import { o as A, r as _ } from "./rolldown-runtime.js";
import { i as I, t as P } from "./vendor/react.js";
import { t as h } from "./utils.js";
import { t as c } from "./Skeleton2.js";
import { t as W } from "./AICodeBlock.js";
var l = /* @__PURE__ */ A(I(), 1);
function O(o) {
  if (typeof window > "u") return {
    blue500: "#3b82f6",
    blue600: "#2563eb",
    gray900: "#0f172a",
    gray50: "#f8fafc",
    gray300: "#cbd5e1",
    gray500: "#475569",
    gray200: "#e2e8f0",
    gray700: "#334155",
    gray800: "#1e293b",
    gray100: "#f1f5f9"
  };
  const n = getComputedStyle(o ?? document.documentElement), r = (e, s) => n.getPropertyValue(e).trim() || s;
  return {
    blue500: r("--blue-500", "#3b82f6"),
    blue600: r("--blue-600", "#2563eb"),
    gray900: r("--gray-900", "#0f172a"),
    gray50: r("--gray-50", "#f8fafc"),
    gray300: r("--gray-300", "#cbd5e1"),
    gray500: r("--gray-500", "#475569"),
    gray200: r("--gray-200", "#e2e8f0"),
    gray700: r("--gray-700", "#334155"),
    gray800: r("--gray-800", "#1e293b"),
    gray100: r("--gray-100", "#f1f5f9")
  };
}
function $(o, n) {
  const r = o === "dark", e = O(n);
  return {
    startOnLoad: !1,
    securityLevel: "strict",
    suppressErrorRendering: !0,
    theme: "base",
    themeVariables: {
      primaryColor: r ? e.blue500 : e.blue600,
      primaryTextColor: r ? e.gray50 : e.gray900,
      primaryBorderColor: r ? e.gray500 : e.gray300,
      secondaryColor: r ? e.gray700 : e.gray200,
      secondaryTextColor: r ? e.gray100 : e.gray800,
      secondaryBorderColor: r ? e.gray500 : e.gray300,
      tertiaryColor: r ? e.gray800 : e.gray100,
      tertiaryTextColor: r ? e.gray200 : e.gray700,
      tertiaryBorderColor: r ? e.gray700 : e.gray200,
      background: r ? e.gray900 : "#ffffff",
      mainBkg: r ? e.gray800 : e.gray50,
      textColor: r ? e.gray200 : e.gray800,
      titleColor: r ? e.gray50 : e.gray900,
      lineColor: r ? e.gray500 : "#94a3b8",
      nodeBorder: r ? e.gray500 : e.gray300,
      noteBkgColor: r ? e.gray700 : "#fef9c3",
      noteTextColor: r ? e.gray100 : e.gray800,
      noteBorderColor: r ? e.gray500 : "#fde047",
      clusterBkg: r ? e.gray800 : e.gray100,
      clusterBorder: r ? e.gray700 : e.gray200,
      actorBkg: r ? e.gray800 : e.gray50,
      actorBorder: r ? e.gray500 : e.gray300,
      actorTextColor: r ? e.gray100 : e.gray800,
      actorLineColor: r ? "#64748b" : "#94a3b8",
      signalColor: "#64748b",
      signalTextColor: r ? e.gray200 : e.gray800,
      labelBoxBkgColor: r ? e.gray700 : e.gray100,
      labelBoxBorderColor: r ? e.gray500 : e.gray300,
      labelTextColor: r ? e.gray100 : e.gray800,
      loopTextColor: r ? e.gray100 : e.gray800,
      activationBkgColor: r ? e.blue500 : "#dbeafe",
      activationBorderColor: r ? e.blue600 : e.blue500,
      sequenceNumberColor: r ? e.gray50 : e.gray900,
      classText: r ? e.gray200 : e.gray800,
      labelColor: r ? e.gray200 : e.gray800,
      entityBorder: r ? e.gray500 : e.gray300,
      entityBkg: r ? e.gray800 : e.gray50,
      entityTextColor: r ? e.gray100 : e.gray800,
      relationColor: r ? "#64748b" : "#94a3b8",
      relationLabelColor: r ? e.gray200 : e.gray800,
      relationLabelBackground: r ? e.gray900 : "#ffffff",
      attributeBackgroundColorOdd: r ? e.gray700 : e.gray100,
      attributeBackgroundColorEven: r ? e.gray800 : e.gray50,
      sectionBkgColor: r ? e.gray700 : e.gray200,
      altSectionBkgColor: r ? e.gray800 : e.gray100,
      sectionBkgColor2: r ? e.gray800 : e.gray50,
      gridColor: r ? e.gray700 : e.gray200,
      doneTaskBkgColor: r ? "#22c55e" : "#86efac",
      doneTaskBorderColor: r ? "#16a34a" : "#22c55e",
      activeTaskBkgColor: r ? e.blue500 : "#93c5fd",
      activeTaskBorderColor: r ? e.blue600 : e.blue500,
      critBkgColor: r ? "#ef4444" : "#fecaca",
      critBorderColor: r ? "#dc2626" : "#ef4444",
      taskBkgColor: r ? e.gray500 : e.gray300,
      taskBorderColor: r ? "#64748b" : "#94a3b8",
      taskTextColor: r ? e.gray100 : e.gray800,
      taskTextOutsideColor: r ? e.gray200 : e.gray800,
      taskTextLightColor: r ? e.gray50 : e.gray900,
      todayLineColor: r ? "#f472b6" : "#ec4899",
      pieStrokeColor: r ? e.gray900 : "#ffffff",
      pieLegendTextColor: r ? e.gray200 : e.gray800,
      pieSectionTextColor: r ? e.gray50 : e.gray900,
      pieStrokeWidth: "2px",
      pieOuterStrokeWidth: "2px",
      pie1: r ? e.blue500 : e.blue600,
      pie2: r ? "#22c55e" : "#16a34a",
      pie3: r ? "#f59e0b" : "#d97706",
      pie4: r ? "#ef4444" : "#dc2626",
      pie5: r ? "#a855f7" : "#9333ea",
      pie6: r ? "#ec4899" : "#db2777",
      pie7: r ? "#06b6d4" : "#0891b2",
      pie8: r ? "#84cc16" : "#65a30d",
      pie9: r ? "#f97316" : "#ea580c",
      pie10: r ? "#6366f1" : "#4f46e5",
      pie11: r ? "#14b8a6" : "#0d9488",
      pie12: r ? "#f43f5e" : "#e11d48",
      mindmapColors: r ? [
        e.blue500,
        "#22c55e",
        "#f59e0b",
        "#ef4444",
        "#a855f7",
        "#ec4899"
      ] : [
        e.blue600,
        "#16a34a",
        "#d97706",
        "#dc2626",
        "#9333ea",
        "#db2777"
      ],
      git0: r ? e.blue500 : e.blue600,
      git1: r ? "#22c55e" : "#16a34a",
      git2: r ? "#f59e0b" : "#d97706",
      git3: r ? "#ef4444" : "#dc2626",
      git4: r ? "#a855f7" : "#9333ea",
      git5: r ? "#ec4899" : "#db2777",
      git6: r ? "#06b6d4" : "#0891b2",
      git7: r ? "#84cc16" : "#65a30d",
      gitBranchLabel0: r ? e.gray50 : e.gray900,
      gitBranchLabel1: r ? e.gray50 : e.gray900,
      gitBranchLabel2: r ? e.gray50 : e.gray900,
      gitBranchLabel3: r ? e.gray50 : e.gray900,
      gitBranchLabel4: r ? e.gray50 : e.gray900,
      gitBranchLabel5: r ? e.gray50 : e.gray900,
      gitBranchLabel6: r ? e.gray50 : e.gray900,
      gitBranchLabel7: r ? e.gray50 : e.gray900,
      commitLabelColor: r ? e.gray50 : e.gray900,
      commitLabelBackground: r ? e.gray700 : e.gray200,
      quadrant1Fill: r ? e.blue500 : "#dbeafe",
      quadrant2Fill: r ? "#22c55e" : "#dcfce7",
      quadrant3Fill: r ? "#f59e0b" : "#fef3c7",
      quadrant4Fill: r ? "#ef4444" : "#fee2e2",
      quadrant1TextFill: r ? e.gray50 : e.gray800,
      quadrant2TextFill: r ? e.gray50 : e.gray800,
      quadrant3TextFill: r ? e.gray50 : e.gray800,
      quadrant4TextFill: r ? e.gray50 : e.gray800,
      quadrantPointFill: r ? e.gray200 : e.gray800,
      quadrantPointTextFill: r ? e.gray200 : e.gray800,
      quadrantExternalBorderStrokeFill: r ? e.gray500 : e.gray300,
      quadrantInternalBorderStrokeFill: r ? e.gray700 : e.gray200,
      quadrantTitleFill: r ? e.gray50 : e.gray900,
      quadrantXAxisTextFill: r ? e.gray200 : e.gray800,
      quadrantYAxisTextFill: r ? e.gray200 : e.gray800,
      cScale0: r ? e.blue500 : e.blue600,
      cScale1: r ? "#22c55e" : "#16a34a",
      cScale2: r ? "#f59e0b" : "#d97706",
      cScale3: r ? "#ef4444" : "#dc2626",
      cScale4: r ? "#a855f7" : "#9333ea",
      cScale5: r ? "#ec4899" : "#db2777",
      cScale6: r ? "#06b6d4" : "#0891b2",
      cScale7: r ? "#84cc16" : "#65a30d",
      fontFamily: 'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
      fontSize: "14px"
    },
    flowchart: {
      htmlLabels: !0,
      curve: "basis",
      padding: 15,
      nodeSpacing: 50,
      rankSpacing: 50
    },
    sequence: {
      diagramMarginX: 50,
      diagramMarginY: 10,
      actorMargin: 50,
      width: 150,
      height: 65,
      boxMargin: 10,
      boxTextMargin: 5,
      noteMargin: 10,
      messageMargin: 35,
      mirrorActors: !0,
      bottomMarginAdj: 1,
      showSequenceNumbers: !1
    },
    gantt: {
      titleTopMargin: 25,
      barHeight: 20,
      barGap: 4,
      topPadding: 50,
      leftPadding: 75,
      gridLineStartPadding: 35,
      fontSize: 11,
      sectionFontSize: 11,
      numberSectionStyles: 4
    },
    er: {
      diagramPadding: 20,
      layoutDirection: "TB",
      minEntityWidth: 100,
      minEntityHeight: 75,
      entityPadding: 15,
      stroke: r ? e.gray500 : e.gray300,
      fill: r ? e.gray800 : e.gray50,
      fontSize: 12
    },
    pie: { textPosition: 0.75 },
    mindmap: {
      padding: 10,
      maxNodeWidth: 200
    },
    class: { titleTopMargin: 25 },
    state: {
      dividerMargin: 10,
      sizeUnit: 5,
      padding: 8,
      textHeight: 10,
      titleShift: -15,
      noteMargin: 10,
      forkWidth: 70,
      forkHeight: 7,
      miniPadding: 2,
      fontSizeFactor: 5.02,
      fontSize: 24,
      labelHeight: 16,
      edgeLengthFactor: "20",
      compositTitleSize: 35,
      radius: 5
    }
  };
}
var a = P();
function M({ maxHeight: o }) {
  return /* @__PURE__ */ (0, a.jsx)("div", {
    className: "flex items-center justify-center p-8 rounded-xl border border-border bg-muted",
    style: {
      minHeight: 200,
      maxHeight: o
    },
    children: /* @__PURE__ */ (0, a.jsxs)("div", {
      className: "flex flex-col items-center gap-4 w-full max-w-md",
      children: [
        /* @__PURE__ */ (0, a.jsx)(c, { className: "h-4 w-3/4" }),
        /* @__PURE__ */ (0, a.jsxs)("div", {
          className: "flex items-center justify-center gap-4 w-full",
          children: [
            /* @__PURE__ */ (0, a.jsx)(c, { className: "h-16 w-24 rounded-lg" }),
            /* @__PURE__ */ (0, a.jsx)(c, { className: "h-1 w-8" }),
            /* @__PURE__ */ (0, a.jsx)(c, { className: "h-16 w-24 rounded-lg" }),
            /* @__PURE__ */ (0, a.jsx)(c, { className: "h-1 w-8" }),
            /* @__PURE__ */ (0, a.jsx)(c, { className: "h-16 w-24 rounded-lg" })
          ]
        }),
        /* @__PURE__ */ (0, a.jsx)(c, { className: "h-4 w-1/2" })
      ]
    })
  });
}
function H({ code: o, error: n }) {
  return /* @__PURE__ */ (0, a.jsxs)("div", {
    className: "space-y-2",
    children: [/* @__PURE__ */ (0, a.jsxs)("div", {
      className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-destructive/20 text-destructive text-sm",
      role: "alert",
      children: [
        /* @__PURE__ */ (0, a.jsx)("svg", {
          xmlns: "http://www.w3.org/2000/svg",
          viewBox: "0 0 20 20",
          fill: "currentColor",
          className: "size-4 flex-shrink-0",
          "aria-hidden": "true",
          children: /* @__PURE__ */ (0, a.jsx)("path", {
            fillRule: "evenodd",
            d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",
            clipRule: "evenodd"
          })
        }),
        /* @__PURE__ */ (0, a.jsx)("span", {
          className: "font-medium",
          children: "Diagram parse error:"
        }),
        /* @__PURE__ */ (0, a.jsx)("span", {
          className: "truncate",
          children: n
        })
      ]
    }), /* @__PURE__ */ (0, a.jsx)(W, {
      code: o,
      language: "mermaid",
      showLineNumbers: !0
    })]
  });
}
function Y(o) {
  const [n, r] = l.useState(() => o !== "auto" ? o : typeof window > "u" ? "light" : document.documentElement.classList.contains("dark") ? "dark" : "light");
  return l.useEffect(() => {
    if (o !== "auto") {
      r(o);
      return;
    }
    const e = new MutationObserver(() => {
      r(document.documentElement.classList.contains("dark") ? "dark" : "light");
    });
    return e.observe(document.documentElement, {
      attributes: !0,
      attributeFilter: ["class"]
    }), r(document.documentElement.classList.contains("dark") ? "dark" : "light"), () => e.disconnect();
  }, [o]), n;
}
var U = 0;
function p({ code: o, theme: n = "auto", caption: r, interactive: e = !1, maxHeight: s, className: T }) {
  const v = Y(n), [C, f] = l.useState(null), [k, m] = l.useState(null), [N, w] = l.useState(!0), B = l.useRef(null), L = l.useRef(`mermaid-diagram-${++U}`), [i, d] = l.useState({
    x: 0,
    y: 0,
    scale: 1
  }), [y, j] = l.useState(!1), b = l.useRef({
    x: 0,
    y: 0
  });
  l.useEffect(() => {
    let t = !1;
    async function u() {
      w(!0), m(null), f(null);
      try {
        const g = (await import("./mermaid.core.js")).default, x = $(v, B.current);
        g.initialize(x);
        const D = `${L.current}-${Date.now()}`, { svg: R } = await g.render(D, o.trim());
        t || (f(R), m(null));
      } catch (g) {
        t || (m(g instanceof Error ? g.message : "Failed to parse diagram"), f(null));
      } finally {
        t || w(!1);
      }
    }
    return u(), () => {
      t = !0;
    };
  }, [o, v]), l.useEffect(() => {
    d({
      x: 0,
      y: 0,
      scale: 1
    });
  }, [o]);
  const q = l.useCallback((t) => {
    if (!e) return;
    t.preventDefault();
    const u = t.deltaY > 0 ? 0.9 : 1.1, g = Math.min(Math.max(i.scale * u, 0.5), 3);
    d((x) => ({
      ...x,
      scale: g
    }));
  }, [e, i.scale]), F = l.useCallback((t) => {
    e && (j(!0), b.current = {
      x: t.clientX - i.x,
      y: t.clientY - i.y
    });
  }, [
    e,
    i.x,
    i.y
  ]), z = l.useCallback((t) => {
    !y || !e || d((u) => ({
      ...u,
      x: t.clientX - b.current.x,
      y: t.clientY - b.current.y
    }));
  }, [y, e]), S = l.useCallback(() => {
    j(!1);
  }, []), E = l.useCallback(() => {
    d({
      x: 0,
      y: 0,
      scale: 1
    });
  }, []);
  return N ? /* @__PURE__ */ (0, a.jsx)(M, { maxHeight: s }) : k ? /* @__PURE__ */ (0, a.jsx)(H, {
    code: o,
    error: k
  }) : C ? /* @__PURE__ */ (0, a.jsxs)("figure", {
    "data-slot": "ai-mermaid-diagram",
    className: h("space-y-2", T),
    children: [/* @__PURE__ */ (0, a.jsxs)("div", {
      ref: B,
      className: h("relative overflow-hidden rounded-xl border border-border bg-muted", e && "cursor-grab", y && "cursor-grabbing"),
      style: { maxHeight: s },
      onWheel: q,
      onMouseDown: F,
      onMouseMove: z,
      onMouseUp: S,
      onMouseLeave: S,
      children: [/* @__PURE__ */ (0, a.jsx)("div", {
        className: h("flex items-center justify-center p-4", s && "overflow-auto"),
        ...s ? {
          tabIndex: 0,
          role: "region",
          "aria-label": "Diagram view"
        } : {},
        style: e ? {
          transform: `translate(${i.x}px, ${i.y}px) scale(${i.scale})`,
          transformOrigin: "center center",
          transition: y ? "none" : "transform 0.1s ease-out"
        } : void 0,
        children: /* @__PURE__ */ (0, a.jsx)("div", {
          className: "[&_svg]:max-w-full [&_svg]:h-auto",
          dangerouslySetInnerHTML: { __html: C },
          "aria-label": "Mermaid diagram",
          role: "img"
        })
      }), e && /* @__PURE__ */ (0, a.jsxs)("div", {
        className: "absolute bottom-2 right-2 flex items-center gap-1 bg-card/80 supports-backdrop-filter:backdrop-blur-sm rounded-lg border border-border p-1",
        children: [
          /* @__PURE__ */ (0, a.jsx)("button", {
            type: "button",
            onClick: () => d((t) => ({
              ...t,
              scale: Math.min(t.scale * 1.2, 3)
            })),
            className: "p-1.5 rounded hover:bg-muted text-secondary-foreground hover:text-foreground transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring",
            "aria-label": "Zoom in",
            children: /* @__PURE__ */ (0, a.jsx)("svg", {
              xmlns: "http://www.w3.org/2000/svg",
              viewBox: "0 0 20 20",
              fill: "currentColor",
              className: "size-4",
              children: /* @__PURE__ */ (0, a.jsx)("path", { d: "M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" })
            })
          }),
          /* @__PURE__ */ (0, a.jsx)("button", {
            type: "button",
            onClick: () => d((t) => ({
              ...t,
              scale: Math.max(t.scale * 0.8, 0.5)
            })),
            className: "p-1.5 rounded hover:bg-muted text-secondary-foreground hover:text-foreground transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring",
            "aria-label": "Zoom out",
            children: /* @__PURE__ */ (0, a.jsx)("svg", {
              xmlns: "http://www.w3.org/2000/svg",
              viewBox: "0 0 20 20",
              fill: "currentColor",
              className: "size-4",
              children: /* @__PURE__ */ (0, a.jsx)("path", {
                fillRule: "evenodd",
                d: "M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z",
                clipRule: "evenodd"
              })
            })
          }),
          /* @__PURE__ */ (0, a.jsx)("div", { className: "w-px h-4 bg-border-secondary mx-0.5" }),
          /* @__PURE__ */ (0, a.jsx)("button", {
            type: "button",
            onClick: E,
            className: "p-1.5 rounded hover:bg-muted text-secondary-foreground hover:text-foreground transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring",
            "aria-label": "Reset view",
            children: /* @__PURE__ */ (0, a.jsx)("svg", {
              xmlns: "http://www.w3.org/2000/svg",
              viewBox: "0 0 20 20",
              fill: "currentColor",
              className: "size-4",
              children: /* @__PURE__ */ (0, a.jsx)("path", {
                fillRule: "evenodd",
                d: "M15.312 11.424a5.5 5.5 0 01-9.201 2.466l-.312-.311h2.433a.75.75 0 000-1.5H3.989a.75.75 0 00-.75.75v4.242a.75.75 0 001.5 0v-2.43l.31.31a7 7 0 0011.712-3.138.75.75 0 00-1.449-.39zm1.23-3.723a.75.75 0 00.219-.53V2.929a.75.75 0 00-1.5 0v2.43l-.31-.31A7 7 0 003.239 8.188a.75.75 0 101.448.389A5.5 5.5 0 0113.89 6.11l.311.31h-2.432a.75.75 0 000 1.5h4.243a.75.75 0 00.53-.219z",
                clipRule: "evenodd"
              })
            })
          }),
          /* @__PURE__ */ (0, a.jsxs)("span", {
            className: "text-xs text-quaternary-foreground px-1 tabular-nums",
            children: [Math.round(i.scale * 100), "%"]
          })
        ]
      })]
    }), r && /* @__PURE__ */ (0, a.jsx)("figcaption", {
      className: "text-sm text-muted-foreground text-center px-4",
      children: r
    })]
  }) : /* @__PURE__ */ (0, a.jsx)(M, { maxHeight: s });
}
p.displayName = "AIMermaidDiagram";
var K = /* @__PURE__ */ _({
  AIMermaidDiagram: () => p,
  default: () => p
});
export {
  p as n,
  K as t
};

//# sourceMappingURL=AIMermaidDiagram.js.map