@adoptai/genui-components 0.1.32

package/dist/composites/flow-canvas/resolver.js

@@ -0,0 +1,1287 @@
+"use client";
+import React4, { createContext, Suspense, useState, useRef, useMemo, useEffect, useCallback, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import dagre from '@dagrejs/dagre';
+import { createPortal } from 'react-dom';
+import { ReactFlowProvider, useNodesState, useEdgesState, useReactFlow, ReactFlow, Background, BackgroundVariant, Handle, Position } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { toPng } from 'html-to-image';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/shared/theme.ts
+var BORDER, MUTED, PAPER, ACCENT, ACCENT_SOFT, SECONDARY, CHART_PALETTE;
+var init_theme = __esm({
+  "src/shared/theme.ts"() {
+    BORDER = "#dedede";
+    MUTED = "#777777";
+    PAPER = "#f6f6f6";
+    ACCENT = "#ff5000";
+    ACCENT_SOFT = "#cc4000";
+    SECONDARY = "#0364ff";
+    CHART_PALETTE = [
+      "#ff5000",
+      "#0364ff",
+      "#16a34a",
+      "#dc2626",
+      "#7c3aed",
+      "#0891b2",
+      "#f59e0b",
+      "#6366f1",
+      "#ec4899",
+      "#84cc16",
+      "#e11d48",
+      "#0ea5e9"
+    ];
+  }
+});
+function useTheme() {
+  return useContext(GenUIThemeContext);
+}
+var DEFAULT_TOKENS, GenUIThemeContext;
+var init_ThemeContext = __esm({
+  "src/shared/ThemeContext.tsx"() {
+    "use client";
+    init_theme();
+    DEFAULT_TOKENS = {
+      BORDER,
+      MUTED,
+      PAPER,
+      ACCENT,
+      ACCENT_SOFT,
+      SECONDARY,
+      CHART_PALETTE: [...CHART_PALETTE]
+    };
+    GenUIThemeContext = createContext(DEFAULT_TOKENS);
+  }
+});
+
+// src/composites/flow-canvas/parseMermaidFlow.ts
+function detectShape(rawNode) {
+  let m = rawNode.match(/^(\w+)\[(?:"|")?([^\]]*?)(?:"|")?\]$/);
+  const patterns = [
+    [/^(\w+)\[\((.+?)\)\]$/, "rounded"],
+    // ([label])  — stadium
+    [/^(\w+)\[\[(.+?)\]\]$/, "rect"],
+    // [[label]]  — subroutine → rect
+    [/^(\w+)\[\((.+?)\)\]$/, "rounded"],
+    // [(label)]  — cylinder approximation
+    [/^(\w+)\(\((.+?)\)\)$/, "circle"],
+    // ((label))
+    [/^(\w+)\(\[(.+?)\]\)$/, "rounded"],
+    // ([label])
+    [/^(\w+)\[(.+?)\]$/, "rect"],
+    // [label]
+    [/^(\w+)\{(.+?)\}$/, "diamond"]
+    // {label}
+  ];
+  for (const [re, shape] of patterns) {
+    m = rawNode.match(re);
+    if (m) return { id: m[1], label: unquote(m[2]), shape };
+  }
+  m = rawNode.match(/^(\w+)\[\((.+?)\)\]$/);
+  if (m) return { id: m[1], label: unquote(m[2]), shape: "cylinder" };
+  const bare = rawNode.match(/^(\w+)$/);
+  if (bare) return { id: bare[1], label: bare[1], shape: "rect" };
+  return { id: rawNode.replace(/\W/g, "_"), label: rawNode, shape: "rect" };
+}
+function unquote(s) {
+  return s.replace(/^["']|["']$/g, "").trim();
+}
+function splitEdge(line) {
+  let m = line.match(/^(.+?)\s*--+>\|([^|]*)\|\s*(.+)$/);
+  if (m) return { left: m[1].trim(), right: m[3].trim(), edgeLabel: m[2].trim() || void 0 };
+  m = line.match(/^(.+?)\s*---*>?\s+(.+)$/);
+  if (m) return { left: m[1].trim(), right: m[2].trim() };
+  return null;
+}
+function parseMermaidFlow(source) {
+  var _a, _b, _c;
+  const lines = source.split("\n").map((l) => l.trim()).filter((l) => l && !l.startsWith("%%"));
+  if (!lines.length) return null;
+  const header = lines[0].toLowerCase();
+  if (!header.startsWith("flowchart") && !header.startsWith("graph")) return null;
+  const directionMap = {
+    td: "TB",
+    tb: "TB",
+    lr: "LR",
+    rl: "RL",
+    bt: "BT"
+  };
+  const dirToken = (_b = (_a = header.split(/\s+/)[1]) == null ? void 0 : _a.toLowerCase()) != null ? _b : "td";
+  const direction = (_c = directionMap[dirToken]) != null ? _c : "TB";
+  const nodeMap = /* @__PURE__ */ new Map();
+  const edges = [];
+  function ensureNode(raw) {
+    const parsed = detectShape(raw);
+    if (!nodeMap.has(parsed.id)) {
+      nodeMap.set(parsed.id, parsed);
+    } else if (parsed.label !== parsed.id) {
+      const existing = nodeMap.get(parsed.id);
+      if (existing.label === existing.id) {
+        nodeMap.set(parsed.id, __spreadProps(__spreadValues({}, existing), { label: parsed.label, shape: parsed.shape }));
+      }
+    }
+    return parsed.id;
+  }
+  for (let i = 1; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.startsWith("subgraph")) {
+      continue;
+    }
+    if (line === "end") {
+      continue;
+    }
+    const edgeParts = splitEdge(line);
+    if (edgeParts) {
+      let parts = [edgeParts.left];
+      let rest = edgeParts.right;
+      let chain = splitEdge(rest);
+      while (chain) {
+        parts.push(chain.left);
+        rest = chain.right;
+        chain = splitEdge(rest);
+      }
+      parts.push(rest);
+      for (let j = 0; j < parts.length - 1; j++) {
+        const srcId = ensureNode(parts[j]);
+        const dstId = ensureNode(parts[j + 1]);
+        edges.push({
+          source: srcId,
+          target: dstId,
+          label: j === 0 ? edgeParts.edgeLabel : void 0
+        });
+      }
+      continue;
+    }
+    if (line && !line.startsWith("style") && !line.startsWith("classDef") && !line.startsWith("class ")) {
+      ensureNode(line);
+    }
+  }
+  return {
+    direction,
+    nodes: Array.from(nodeMap.values()),
+    edges
+  };
+}
+var init_parseMermaidFlow = __esm({
+  "src/composites/flow-canvas/parseMermaidFlow.ts"() {
+  }
+});
+function reverseDir(dir) {
+  return dir === "LR" ? "RL" : dir === "RL" ? "LR" : dir === "TB" ? "BT" : "TB";
+}
+function measureBounds(nodes) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const n of nodes) {
+    const x2 = n.position.x + n.width;
+    const y2 = n.position.y + n.height;
+    if (n.position.x < minX) minX = n.position.x;
+    if (n.position.y < minY) minY = n.position.y;
+    if (x2 > maxX) maxX = x2;
+    if (y2 > maxY) maxY = y2;
+  }
+  return { w: maxX - minX + 40, h: maxY - minY + 40 };
+}
+function applySnake(nodes, direction, rowGap) {
+  const isHoriz = direction === "LR" || direction === "RL";
+  const primary = isHoriz ? "x" : "y";
+  const secondary = isHoriz ? "y" : "x";
+  const rankMap = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const key = Math.round(n.position[primary] / 2) * 2;
+    if (!rankMap.has(key)) rankMap.set(key, []);
+    rankMap.get(key).push(n);
+  }
+  const ranks = [...rankMap.keys()].sort((a, b) => a - b);
+  if (ranks.length <= 5) return;
+  const nodesPerRow = 5;
+  const primarySpan = ranks[ranks.length - 1] - ranks[0];
+  const rankStep = primarySpan / Math.max(ranks.length - 1, 1);
+  let secondaryOffset = 0;
+  for (let rowIdx = 0; rowIdx < Math.ceil(ranks.length / nodesPerRow); rowIdx++) {
+    const rowRanks = ranks.slice(rowIdx * nodesPerRow, (rowIdx + 1) * nodesPerRow);
+    const isReversed = rowIdx % 2 === 1;
+    const rowDir = isReversed ? reverseDir(direction) : direction;
+    let rowSecondaryMax = secondaryOffset;
+    for (let colIdx = 0; colIdx < rowRanks.length; colIdx++) {
+      const rank = rowRanks[colIdx];
+      const rankNodes = rankMap.get(rank);
+      const effectiveCol = isReversed ? nodesPerRow - 1 - colIdx : colIdx;
+      const newPrimary = effectiveCol * rankStep;
+      const minSec = Math.min(...rankNodes.map((n) => n.position[secondary]));
+      for (const n of rankNodes) {
+        const secOffset = n.position[secondary] - minSec;
+        const newPos = __spreadValues({}, n.position);
+        newPos[primary] = newPrimary;
+        newPos[secondary] = secondaryOffset + secOffset;
+        n.position = newPos;
+        n.data = __spreadProps(__spreadValues({}, n.data), { direction: rowDir });
+        const nodeSecSize = (isHoriz ? n.height : n.width) || 40;
+        rowSecondaryMax = Math.max(
+          rowSecondaryMax,
+          secondaryOffset + secOffset + nodeSecSize
+        );
+      }
+    }
+    secondaryOffset = rowSecondaryMax + rowGap;
+  }
+}
+function computeLayout(flow, nodeWidth = 148, nodeHeight = 40) {
+  const g = new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  g.setGraph({
+    rankdir: RANK_DIR[flow.direction],
+    ranksep: 60,
+    nodesep: 40,
+    marginx: 20,
+    marginy: 20
+  });
+  for (const node of flow.nodes) {
+    const w = node.shape === "diamond" ? nodeWidth + 40 : nodeWidth;
+    const h = node.shape === "diamond" ? nodeHeight + 24 : nodeHeight;
+    g.setNode(node.id, { width: w, height: h });
+  }
+  for (const edge of flow.edges) {
+    g.setEdge(edge.source, edge.target, {});
+  }
+  dagre.layout(g);
+  const nodes = flow.nodes.map((n) => {
+    const pos = g.node(n.id);
+    const w = n.shape === "diamond" ? nodeWidth + 40 : nodeWidth;
+    const h = n.shape === "diamond" ? nodeHeight + 24 : nodeHeight;
+    return {
+      id: n.id,
+      type: n.shape,
+      position: { x: pos.x - w / 2, y: pos.y - h / 2 },
+      data: { label: n.label, direction: flow.direction },
+      width: w,
+      height: h
+    };
+  });
+  const pre = measureBounds(nodes);
+  const isHoriz = flow.direction === "LR" || flow.direction === "RL";
+  const preRatio = isHoriz ? pre.w / Math.max(pre.h, 1) : pre.h / Math.max(pre.w, 1);
+  if (preRatio > SNAKE_RATIO && nodes.length > 4) {
+    applySnake(nodes, flow.direction, 60);
+  }
+  const { w: graphWidth, h: graphHeight } = measureBounds(nodes);
+  const edges = flow.edges.map((e, i) => ({
+    id: `e-${e.source}-${e.target}-${i}`,
+    source: e.source,
+    target: e.target,
+    label: e.label,
+    type: "smoothstep",
+    style: { stroke: "#c93d1e", strokeWidth: 1.75 },
+    labelStyle: {
+      fill: "#6b6b6b",
+      fontSize: 10,
+      fontFamily: "Plus Jakarta Sans, system-ui, sans-serif"
+    },
+    labelBgStyle: { fill: "#f8f8f7", fillOpacity: 0.92 },
+    labelBgPadding: [3, 5],
+    markerEnd: {
+      type: "arrowclosed",
+      color: "#c93d1e",
+      width: 16,
+      height: 16
+    }
+  }));
+  return { nodes, edges, graphWidth, graphHeight };
+}
+var RANK_DIR, SNAKE_RATIO;
+var init_layoutFlow = __esm({
+  "src/composites/flow-canvas/layoutFlow.ts"() {
+    RANK_DIR = {
+      TB: "TB",
+      BT: "BT",
+      LR: "LR",
+      RL: "RL"
+    };
+    SNAKE_RATIO = 2.6;
+  }
+});
+
+// src/composites/flow-canvas/FlowGraph.tsx
+var FlowGraph_exports = {};
+__export(FlowGraph_exports, {
+  FlowGraph: () => FlowGraph
+});
+function themeVars(t) {
+  return {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    ["--gx-accent"]: t.ACCENT,
+    ["--gx-border"]: t.BORDER,
+    ["--gx-muted"]: t.MUTED,
+    ["--gx-bg"]: "#ffffff",
+    ["--gx-bg-subtle"]: t.PAPER,
+    ["--gx-text"]: "var(--foreground)",
+    ["--gx-outline"]: "var(--foreground)",
+    ["--gx-font"]: "var(--font-sans, Figtree, system-ui, sans-serif)"
+  };
+}
+function Handles({ dir }) {
+  switch (dir) {
+    case "BT":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Bottom, style: hDot }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Top, style: hDot })
+      ] });
+    case "LR":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, style: hDot }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, style: hDot })
+      ] });
+    case "RL":
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Right, style: hDot }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Left, style: hDot })
+      ] });
+    default:
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, style: hDot }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Bottom, style: hDot })
+      ] });
+  }
+}
+function nodeClass(status) {
+  return "gx-flow-node" + (status ? ` gx-flow-${status}` : "");
+}
+function DoneBadge() {
+  return /* @__PURE__ */ jsx("span", { className: "gx-done-badge", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { width: "9", height: "9", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) }) });
+}
+function RectNode({ data }) {
+  var _a;
+  const s = data.status;
+  return /* @__PURE__ */ jsxs("div", { className: nodeClass(s), style: __spreadProps(__spreadValues({}, nodeBase), { borderRadius: "6px" }), children: [
+    /* @__PURE__ */ jsx(Handles, { dir: data.direction }),
+    s === "done" && /* @__PURE__ */ jsx(DoneBadge, {}),
+    String((_a = data.label) != null ? _a : "")
+  ] });
+}
+function RoundedNode({ data }) {
+  var _a;
+  const s = data.status;
+  return /* @__PURE__ */ jsxs("div", { className: nodeClass(s), style: __spreadProps(__spreadValues({}, nodeBase), { borderRadius: "999px" }), children: [
+    /* @__PURE__ */ jsx(Handles, { dir: data.direction }),
+    s === "done" && /* @__PURE__ */ jsx(DoneBadge, {}),
+    String((_a = data.label) != null ? _a : "")
+  ] });
+}
+function CircleNode({ data }) {
+  var _a;
+  const s = data.status;
+  return /* @__PURE__ */ jsxs("div", { className: nodeClass(s), style: __spreadProps(__spreadValues({}, nodeBase), { borderRadius: "50%", padding: "6px" }), children: [
+    /* @__PURE__ */ jsx(Handles, { dir: data.direction }),
+    s === "done" && /* @__PURE__ */ jsx(DoneBadge, {}),
+    String((_a = data.label) != null ? _a : "")
+  ] });
+}
+function DiamondNode({ data }) {
+  var _a;
+  const s = data.status;
+  return /* @__PURE__ */ jsxs("div", { className: nodeClass(s), style: { position: "relative", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", border: "none", background: "transparent" }, children: [
+    /* @__PURE__ */ jsx(Handles, { dir: data.direction }),
+    s === "done" && /* @__PURE__ */ jsx(DoneBadge, {}),
+    /* @__PURE__ */ jsx("svg", { style: { position: "absolute", inset: 0, width: "100%", height: "100%", overflow: "visible" }, viewBox: "0 0 1 1", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx("polygon", { className: "gx-flow-poly", points: "0.5,0.03 0.97,0.5 0.5,0.97 0.03,0.5", fill: "var(--gx-bg)", stroke: "var(--gx-outline)", strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" }) }),
+    /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1, fontFamily: "var(--gx-font)", fontSize: "11px", fontWeight: 500, color: "var(--gx-text)", textAlign: "center", lineHeight: 1.25, userSelect: "none", padding: "0 22px", maxWidth: "100%" }, children: String((_a = data.label) != null ? _a : "") })
+  ] });
+}
+function CylinderNode({ data }) {
+  var _a;
+  const a = 5;
+  const s = data.status;
+  return /* @__PURE__ */ jsxs("div", { className: nodeClass(s), style: { position: "relative", width: "100%", height: "100%", border: "none", background: "transparent" }, children: [
+    /* @__PURE__ */ jsx(Handles, { dir: data.direction }),
+    s === "done" && /* @__PURE__ */ jsx(DoneBadge, {}),
+    /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: a * 2, border: "1.5px solid var(--gx-outline)", borderRadius: "50%", background: "var(--gx-bg)", zIndex: 1 } }),
+    /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: `${a}px 0`, border: "1.5px solid var(--gx-outline)", borderTop: "none", borderBottom: "none", background: "var(--gx-bg)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--gx-font)", fontSize: "12px", fontWeight: 500, color: "var(--gx-text)" }, children: String((_a = data.label) != null ? _a : "") }),
+    /* @__PURE__ */ jsx("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: a * 2, border: "1.5px solid var(--gx-outline)", borderRadius: "50%", background: "var(--gx-bg)", zIndex: 1 } })
+  ] });
+}
+function FitBtn() {
+  const { fitView } = useReactFlow();
+  return /* @__PURE__ */ jsxs("button", { style: pillStyle, onClick: () => fitView({ padding: 0.1, duration: 300 }), onMouseEnter: onEnter, onMouseLeave: onLeave, children: [
+    /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M1 4V1h3M7 1h3v3M10 7v3H7M4 10H1V7" }) }),
+    /* @__PURE__ */ jsx("span", { children: "Fit" })
+  ] });
+}
+function idealHeight(boxW, graphWidth, graphHeight) {
+  if (!graphWidth || !graphHeight || !boxW) return 300;
+  const ratio = graphWidth / graphHeight;
+  const h = Math.round(boxW / ratio);
+  return Math.max(220, Math.min(480, h));
+}
+async function getMermaid(t) {
+  const m = (await import('mermaid')).default;
+  const sig = `${t.ACCENT}|${t.BORDER}|${t.PAPER}|${t.MUTED}`;
+  if (!mermaidReady || mermaidSig !== sig) {
+    m.initialize({
+      startOnLoad: false,
+      logLevel: 5,
+      theme: "base",
+      themeVariables: {
+        primaryColor: "#ffffff",
+        primaryBorderColor: "#171717",
+        primaryTextColor: "#171717",
+        mainBkg: "#ffffff",
+        nodeBorder: "#171717",
+        lineColor: t.ACCENT,
+        secondaryColor: t.PAPER,
+        clusterBkg: t.PAPER,
+        clusterBorder: t.BORDER,
+        noteBkgColor: t.PAPER,
+        noteBorderColor: t.BORDER,
+        actorLineColor: t.ACCENT,
+        loopTextColor: t.MUTED,
+        fontFamily: "Figtree, system-ui, sans-serif",
+        fontSize: "12px"
+      }
+    });
+    mermaidReady = true;
+    mermaidSig = sig;
+  }
+  return m;
+}
+function MermaidFallback({ diagram, title }) {
+  const tokens = useTheme();
+  const [svg, setSvg] = useState("");
+  const [err, setErr] = useState(false);
+  const [full, setFull] = useState(false);
+  const idRef = useRef(0);
+  useEffect(() => {
+    const id = ++renderSeq;
+    idRef.current = id;
+    setErr(false);
+    (async () => {
+      try {
+        const m = await getMermaid(tokens);
+        if (idRef.current !== id) return;
+        const { svg: out } = await m.render(`gx-mm-${id}`, diagram);
+        if (idRef.current !== id) return;
+        setSvg(out);
+      } catch (e) {
+        if (idRef.current === id) setErr(true);
+      }
+    })();
+  }, [diagram, tokens]);
+  if (err) {
+    return /* @__PURE__ */ jsxs("div", { style: { height: "100%", overflow: "auto", padding: 20, fontSize: 12, fontFamily: "var(--font-sans)", display: "flex", flexDirection: "column", gap: 8 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { color: tokens.ACCENT, fontWeight: 500 }, children: "Diagram syntax error" }),
+      /* @__PURE__ */ jsx("pre", { style: { fontSize: 11, background: "#ffffff", border: `1px solid ${tokens.BORDER}`, borderRadius: 6, padding: "10px 12px", overflowX: "auto", whiteSpace: "pre-wrap", wordBreak: "break-word", color: "var(--foreground)", margin: 0 }, children: diagram })
+    ] });
+  }
+  if (!svg) {
+    return /* @__PURE__ */ jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: tokens.MUTED, fontSize: 11, fontFamily: "var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase" }, children: "rendering" });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: { position: "relative", height: "100%", overflow: "auto" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "mermaid-output", dangerouslySetInnerHTML: { __html: svg } }),
+    /* @__PURE__ */ jsxs("button", { style: __spreadProps(__spreadValues({}, pillStyle), { position: "absolute", top: 10, right: 10, zIndex: 10 }), onClick: () => setFull(true), onMouseEnter: onEnter, onMouseLeave: onLeave, children: [
+      /* @__PURE__ */ jsx(ExpandIcon, {}),
+      /* @__PURE__ */ jsx("span", { children: "Expand" })
+    ] }),
+    full && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, themeVars(tokens)), { position: "fixed", inset: 0, zIndex: 9999, background: "rgba(23,23,23,0.55)", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)" }), onClick: (e) => {
+        if (e.target === e.currentTarget) setFull(false);
+      }, children: /* @__PURE__ */ jsxs("div", { style: { background: "#ffffff", borderRadius: 10, border: `1px solid ${tokens.BORDER}`, boxShadow: "0 8px 32px rgba(23,23,23,0.12)", width: "min(92vw,1280px)", height: "min(88vh,960px)", display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { padding: "8px 12px", borderBottom: `1px solid ${tokens.BORDER}`, display: "flex", alignItems: "center", justifyContent: "space-between", background: tokens.PAPER }, children: [
+          /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--font-sans)", fontSize: 12, color: tokens.MUTED }, children: title != null ? title : "Diagram" }),
+          /* @__PURE__ */ jsxs("button", { style: __spreadProps(__spreadValues({}, pillStyle), { color: tokens.ACCENT }), onClick: () => setFull(false), children: [
+            /* @__PURE__ */ jsx(CloseIcon, {}),
+            /* @__PURE__ */ jsx("span", { children: "Close" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }, children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: svg }, style: { maxWidth: "100%" } }) })
+      ] }) }),
+      document.body
+    )
+  ] });
+}
+function FullscreenModalInner({ nodes, edges, title, onClose }) {
+  const tokens = useTheme();
+  const [n, , onNC] = useNodesState(nodes);
+  const [e, , onEC] = useEdgesState(edges);
+  return /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, themeVars(tokens)), { position: "fixed", inset: 0, zIndex: 9999, background: "rgba(23,23,23,0.55)", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)" }), onClick: (ev) => {
+    if (ev.target === ev.currentTarget) onClose();
+  }, children: /* @__PURE__ */ jsxs("div", { style: { background: "#ffffff", borderRadius: "10px", border: `1px solid ${tokens.BORDER}`, boxShadow: "0 8px 32px rgba(23,23,23,0.12)", width: "min(92vw,1280px)", height: "min(88vh,960px)", display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { padding: "8px 12px", borderBottom: `1px solid ${tokens.BORDER}`, display: "flex", alignItems: "center", justifyContent: "space-between", background: tokens.PAPER, flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { fontFamily: "var(--font-sans)", fontSize: "12px", color: tokens.MUTED }, children: title != null ? title : "Diagram" }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "6px" }, children: [
+        /* @__PURE__ */ jsx(FitBtn, {}),
+        /* @__PURE__ */ jsxs("button", { style: __spreadProps(__spreadValues({}, pillStyle), { color: tokens.ACCENT }), onClick: onClose, children: [
+          /* @__PURE__ */ jsx(CloseIcon, {}),
+          /* @__PURE__ */ jsx("span", { children: "Close" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, position: "relative" }, children: /* @__PURE__ */ jsx(ReactFlow, { nodes: n, edges: e, nodeTypes, onNodesChange: onNC, onEdgesChange: onEC, fitView: true, fitViewOptions: { padding: 0.1 }, nodesDraggable: false, nodesConnectable: false, elementsSelectable: false, panOnDrag: true, zoomOnScroll: true, minZoom: 0.15, maxZoom: 4, proOptions: { hideAttribution: true }, style: { background: tokens.PAPER, width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1, color: tokens.BORDER }) }) })
+  ] }) });
+}
+function FullscreenModal({ nodes, edges, title, onClose }) {
+  useEffect(() => {
+    const h = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", h);
+    return () => window.removeEventListener("keydown", h);
+  }, [onClose]);
+  return createPortal(
+    /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(FullscreenModalInner, { nodes, edges, title, onClose }) }),
+    document.body
+  );
+}
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    var _a;
+    if (typeof matchMedia === "undefined") return;
+    const mq = matchMedia("(prefers-reduced-motion: reduce)");
+    setReduced(mq.matches);
+    const h = () => setReduced(mq.matches);
+    (_a = mq.addEventListener) == null ? void 0 : _a.call(mq, "change", h);
+    return () => {
+      var _a2;
+      return (_a2 = mq.removeEventListener) == null ? void 0 : _a2.call(mq, "change", h);
+    };
+  }, []);
+  return reduced;
+}
+function topoOrder(nodeIds, edges) {
+  var _a, _b, _c, _d;
+  const indeg = new Map(nodeIds.map((id) => [id, 0]));
+  const adj = new Map(nodeIds.map((id) => [id, []]));
+  for (const e of edges) {
+    if (!indeg.has(e.target) || !adj.has(e.source)) continue;
+    indeg.set(e.target, ((_a = indeg.get(e.target)) != null ? _a : 0) + 1);
+    adj.get(e.source).push(e.target);
+  }
+  const queue = nodeIds.filter((id) => {
+    var _a2;
+    return ((_a2 = indeg.get(id)) != null ? _a2 : 0) === 0;
+  });
+  const seen = /* @__PURE__ */ new Set();
+  const order = [];
+  while (queue.length) {
+    const id = queue.shift();
+    if (seen.has(id)) continue;
+    seen.add(id);
+    order.push(id);
+    for (const t of (_b = adj.get(id)) != null ? _b : []) {
+      indeg.set(t, ((_c = indeg.get(t)) != null ? _c : 1) - 1);
+      if (((_d = indeg.get(t)) != null ? _d : 0) <= 0 && !seen.has(t)) queue.push(t);
+    }
+  }
+  for (const id of nodeIds) if (!seen.has(id)) order.push(id);
+  return order;
+}
+function useAutoplay(order, enabled) {
+  const reduced = usePrefersReducedMotion();
+  const [step, setStep] = useState(0);
+  const key = order.join("|");
+  useEffect(() => {
+    if (!enabled || reduced || order.length === 0) {
+      setStep(0);
+      return;
+    }
+    let s = 0;
+    setStep(0);
+    let timer;
+    const tick = () => {
+      s += 1;
+      if (s > order.length) {
+        s = 0;
+        setStep(0);
+        timer = setTimeout(tick, 850);
+        return;
+      }
+      setStep(s);
+      timer = setTimeout(tick, s === order.length ? 1100 : 850);
+    };
+    timer = setTimeout(tick, 850);
+    return () => clearTimeout(timer);
+  }, [enabled, reduced, key]);
+  return useMemo(() => {
+    const m = {};
+    order.forEach((id, i) => {
+      m[id] = i < step ? "done" : i === step ? "active" : "pending";
+    });
+    if (step >= order.length) order.forEach((id) => m[id] = "done");
+    return m;
+  }, [order, step]);
+}
+function resolveStates(nodes, nodeStates) {
+  var _a, _b;
+  if (!nodeStates) return {};
+  const m = {};
+  for (const n of nodes) {
+    const label = (_a = n.data) == null ? void 0 : _a.label;
+    const st = (_b = nodeStates[n.id]) != null ? _b : label ? nodeStates[label] : void 0;
+    if (st) m[n.id] = st;
+  }
+  return m;
+}
+function Inner({ diagram, title, autoplay, nodeStates }) {
+  const tokens = useTheme();
+  const [full, setFull] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [boxW, setBoxW] = useState(640);
+  const containerRef = useRef(null);
+  const parsed = useMemo(() => parseMermaidFlow(diagram), [diagram]);
+  const layout = useMemo(() => parsed ? computeLayout(parsed) : null, [parsed]);
+  const themedEdges = useMemo(
+    () => {
+      var _a;
+      return ((_a = layout == null ? void 0 : layout.edges) != null ? _a : []).map((e) => __spreadProps(__spreadValues({}, e), {
+        style: __spreadProps(__spreadValues({}, e.style), { stroke: tokens.ACCENT, strokeWidth: 1.75 }),
+        labelStyle: { fill: tokens.MUTED, fontSize: 10, fontFamily: "var(--font-sans, Figtree, system-ui, sans-serif)" },
+        labelBgStyle: { fill: "#ffffff", fillOpacity: 0.92 },
+        markerEnd: { type: "arrowclosed", color: tokens.ACCENT, width: 12, height: 12 }
+      }));
+    },
+    [layout, tokens.ACCENT, tokens.MUTED]
+  );
+  const order = useMemo(
+    () => {
+      var _a, _b;
+      return topoOrder(((_a = layout == null ? void 0 : layout.nodes) != null ? _a : []).map((n) => n.id), (_b = layout == null ? void 0 : layout.edges) != null ? _b : []);
+    },
+    [layout]
+  );
+  const autoStatus = useAutoplay(order, !!autoplay);
+  const staticStatus = useMemo(() => {
+    var _a;
+    return resolveStates((_a = layout == null ? void 0 : layout.nodes) != null ? _a : [], nodeStates);
+  }, [layout, nodeStates]);
+  const statusMap = autoplay ? autoStatus : staticStatus;
+  const displayNodes = useMemo(
+    () => {
+      var _a;
+      return ((_a = layout == null ? void 0 : layout.nodes) != null ? _a : []).map((n) => __spreadProps(__spreadValues({}, n), { data: __spreadProps(__spreadValues({}, n.data), { status: statusMap[n.id] }) }));
+    },
+    [layout, statusMap]
+  );
+  const displayEdges = useMemo(
+    () => themedEdges.map((e) => {
+      const ss = statusMap[e.source];
+      const ts = statusMap[e.target];
+      const flowing = ss === "done" && ts === "active";
+      const bothDone = ss === "done" && ts === "done";
+      const anyStatus = !!(ss || ts);
+      const lit = flowing || bothDone;
+      const stroke = lit || !anyStatus ? tokens.ACCENT : tokens.BORDER;
+      return __spreadProps(__spreadValues({}, e), {
+        animated: flowing,
+        style: __spreadProps(__spreadValues({}, e.style), { stroke, strokeWidth: flowing ? 2.25 : 1.75, opacity: anyStatus && !lit ? 0.5 : 1, transition: "stroke 0.3s ease, opacity 0.3s ease" }),
+        markerEnd: { type: "arrowclosed", color: stroke, width: 12, height: 12 }
+      });
+    }),
+    [themedEdges, statusMap, tokens.ACCENT, tokens.BORDER]
+  );
+  const [nodes, setNodes, onNC] = useNodesState(displayNodes);
+  const [edges, setEdges, onEC] = useEdgesState(displayEdges);
+  const rf = useReactFlow();
+  useEffect(() => {
+    setNodes(displayNodes);
+  }, [displayNodes, setNodes]);
+  useEffect(() => {
+    setEdges(displayEdges);
+  }, [displayEdges, setEdges]);
+  useEffect(() => {
+    const id = requestAnimationFrame(() => {
+      try {
+        rf.fitView({ padding: 0.1 });
+      } catch (e) {
+      }
+    });
+    return () => cancelAnimationFrame(id);
+  }, [layout, rf]);
+  const handleClickOutside = useCallback((e) => {
+    if (containerRef.current && !containerRef.current.contains(e.target)) setFocused(false);
+  }, []);
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [handleClickOutside]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    let raf = 0;
+    const measure = () => {
+      const w = el.clientWidth || 640;
+      setBoxW((prev) => Math.abs(prev - w) > 1 ? w : prev);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(measure);
+    });
+    ro.observe(el);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+    };
+  }, []);
+  if (!parsed || !layout) {
+    return /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, themeVars(tokens)), { height: 320 }), children: /* @__PURE__ */ jsx(MermaidFallback, { diagram, title }) });
+  }
+  const h = idealHeight(boxW, layout.graphWidth, layout.graphHeight);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, style: __spreadProps(__spreadValues({}, themeVars(tokens)), { position: "relative", width: "100%", height: h }), onMouseDown: () => setFocused(true), children: [
+    /* @__PURE__ */ jsx("style", { children: FLOW_ANIM_CSS }),
+    /* @__PURE__ */ jsx(
+      ReactFlow,
+      {
+        nodes,
+        edges,
+        nodeTypes,
+        onNodesChange: onNC,
+        onEdgesChange: onEC,
+        fitView: true,
+        fitViewOptions: { padding: 0.1 },
+        nodesDraggable: false,
+        nodesConnectable: false,
+        elementsSelectable: false,
+        panOnDrag: true,
+        zoomOnScroll: focused,
+        preventScrolling: focused,
+        minZoom: 0.2,
+        maxZoom: 4,
+        proOptions: { hideAttribution: true },
+        style: { background: tokens.PAPER, width: "100%", height: "100%", borderRadius: 10 },
+        children: /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1, color: tokens.BORDER })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 10, right: 10, zIndex: 10, display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ jsx(FitBtn, {}),
+      /* @__PURE__ */ jsxs("button", { style: pillStyle, onClick: () => setFull(true), onMouseEnter: onEnter, onMouseLeave: onLeave, children: [
+        /* @__PURE__ */ jsx(ExpandIcon, {}),
+        /* @__PURE__ */ jsx("span", { children: "Expand" })
+      ] })
+    ] }),
+    full && typeof document !== "undefined" && /* @__PURE__ */ jsx(FullscreenModal, { nodes: displayNodes, edges: displayEdges, title, onClose: () => setFull(false) })
+  ] });
+}
+function FlowGraph({ diagram, title, autoplay, nodeStates }) {
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(Inner, { diagram, title, autoplay, nodeStates }) });
+}
+var hDot, FLOW_ANIM_CSS, nodeBase, nodeTypes, pillStyle, onEnter, onLeave, ExpandIcon, CloseIcon, mermaidReady, mermaidSig, renderSeq;
+var init_FlowGraph = __esm({
+  "src/composites/flow-canvas/FlowGraph.tsx"() {
+    "use client";
+    init_ThemeContext();
+    init_parseMermaidFlow();
+    init_layoutFlow();
+    hDot = {
+      width: 8,
+      height: 8,
+      background: "var(--gx-accent)",
+      border: "2px solid var(--gx-bg)",
+      borderRadius: "50%"
+    };
+    FLOW_ANIM_CSS = `
+.gx-flow-node{transition:opacity .3s ease,box-shadow .35s ease,border-color .3s ease,background-color .3s ease;}
+.gx-flow-pending{opacity:.45;}
+.gx-flow-active{border-color:var(--gx-accent)!important;background-color:color-mix(in srgb,var(--gx-accent) 9%,#fff)!important;animation:gxFlowPulse 1.5s ease-in-out infinite;}
+.gx-flow-done{border-color:var(--gx-accent)!important;background-color:color-mix(in srgb,var(--gx-accent) 15%,#fff)!important;}
+.gx-flow-error{border-color:#dc2626!important;background-color:#fdecec!important;}
+.gx-flow-poly{transition:stroke .3s ease,fill .3s ease;}
+.gx-flow-active .gx-flow-poly{stroke:var(--gx-accent);fill:color-mix(in srgb,var(--gx-accent) 9%,#fff);}
+.gx-flow-done .gx-flow-poly{stroke:var(--gx-accent);fill:color-mix(in srgb,var(--gx-accent) 15%,#fff);}
+.gx-done-badge{position:absolute;top:-7px;right:-7px;width:15px;height:15px;border-radius:50%;background:var(--gx-accent);color:#fff;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 1px 2px rgba(0,0,0,.2);}
+@keyframes gxFlowPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gx-accent) 50%,transparent);}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--gx-accent) 0%,transparent);}}
+@media (prefers-reduced-motion: reduce){.gx-flow-active{animation:none;}}
+`;
+    nodeBase = {
+      position: "relative",
+      background: "var(--gx-bg)",
+      color: "var(--gx-text)",
+      border: "1.5px solid var(--gx-outline)",
+      fontFamily: "var(--gx-font)",
+      fontSize: "12px",
+      fontWeight: 500,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      textAlign: "center",
+      padding: "8px 14px",
+      width: "100%",
+      height: "100%",
+      boxSizing: "border-box",
+      userSelect: "none",
+      lineHeight: 1.3
+    };
+    nodeTypes = {
+      rect: RectNode,
+      rounded: RoundedNode,
+      circle: CircleNode,
+      diamond: DiamondNode,
+      cylinder: CylinderNode
+    };
+    pillStyle = {
+      display: "flex",
+      alignItems: "center",
+      gap: "5px",
+      height: "26px",
+      padding: "0 10px",
+      background: "rgba(255,255,255,0.9)",
+      backdropFilter: "blur(10px)",
+      WebkitBackdropFilter: "blur(10px)",
+      border: "1px solid var(--gx-border)",
+      borderRadius: "100px",
+      cursor: "pointer",
+      color: "var(--gx-muted)",
+      fontSize: "11px",
+      fontFamily: "var(--gx-font)",
+      fontWeight: 500,
+      boxShadow: "0 1px 3px rgba(0,0,0,0.07)",
+      transition: "background 0.12s, color 0.12s"
+    };
+    onEnter = (e) => {
+      e.currentTarget.style.background = "var(--gx-bg)";
+      e.currentTarget.style.color = "var(--gx-text)";
+    };
+    onLeave = (e) => {
+      e.currentTarget.style.background = "rgba(255,255,255,0.9)";
+      e.currentTarget.style.color = "var(--gx-muted)";
+    };
+    ExpandIcon = () => /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 11 11", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "M1 4V1h3M7 1h3v3M10 7v3H7M4 10H1V7" }) });
+    CloseIcon = () => /* @__PURE__ */ jsxs("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+      /* @__PURE__ */ jsx("line", { x1: "1", y1: "1", x2: "9", y2: "9" }),
+      /* @__PURE__ */ jsx("line", { x1: "9", y1: "1", x2: "1", y2: "9" })
+    ] });
+    mermaidReady = false;
+    mermaidSig = "";
+    renderSeq = 0;
+  }
+});
+
+// src/shared/ColumnSettingsPanel.tsx
+init_theme();
+function ColumnSettingsPanel({ columns, hidden, onToggle, onShowAll, onHideAll }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px", minWidth: "180px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", paddingBottom: "4px", borderBottom: `1px solid ${BORDER}` }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onShowAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: ACCENT, fontWeight: 500, padding: 0 },
+          children: "Show all"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onHideAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, fontWeight: 500, padding: 0 },
+          children: "Hide all"
+        }
+      )
+    ] }),
+    columns.map((col) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", fontSize: "12px", color: "var(--foreground)" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: !hidden.has(col.key),
+              onChange: () => onToggle(col.key),
+              style: { accentColor: ACCENT, width: "14px", height: "14px", margin: 0, cursor: "pointer" }
+            }
+          ),
+          col.label
+        ]
+      },
+      col.key
+    ))
+  ] });
+}
+
+// src/shared/ComponentActions.tsx
+init_theme();
+var DOT_COLOR = "#aaaaaa";
+var DOT_HOVER = "#555555";
+function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "component" }) {
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState("main");
+  const contentRef = useRef(null);
+  const menuRef = useRef(null);
+  const btnRef = useRef(null);
+  const close = useCallback(() => {
+    setOpen(false);
+    setView("main");
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      var _a, _b;
+      if ((_a = menuRef.current) == null ? void 0 : _a.contains(e.target)) return;
+      if ((_b = btnRef.current) == null ? void 0 : _b.contains(e.target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, close]);
+  const handleDownloadPNG = useCallback(async () => {
+    if (!contentRef.current) return;
+    try {
+      const url = await toPng(contentRef.current, { backgroundColor: "white", pixelRatio: 2 });
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${filename}.png`;
+      a.click();
+    } catch (e) {
+    }
+    close();
+  }, [filename, close]);
+  const handleCSV = useCallback(() => {
+    onDownloadCSV == null ? void 0 : onDownloadCSV();
+    close();
+  }, [onDownloadCSV, close]);
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx("div", { ref: contentRef, style: { width: "100%" }, children }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: "4px", position: "relative", zIndex: 10, flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: btnRef,
+          onClick: () => {
+            setOpen((o) => !o);
+            setView("main");
+          },
+          "aria-label": "Component actions",
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "4px 8px",
+            display: "flex",
+            gap: "3px",
+            alignItems: "center",
+            borderRadius: "6px",
+            transition: "background 0.15s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.background = "#f2f2f2";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_HOVER);
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = "none";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_COLOR);
+          },
+          children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "6", viewBox: "0 0 20 6", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "10", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "17", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } })
+          ] })
+        }
+      ),
+      open && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            right: 0,
+            marginBottom: "4px",
+            background: "white",
+            border: `1px solid ${BORDER}`,
+            borderRadius: "0.75rem",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.06)",
+            zIndex: 50,
+            padding: view === "columns" ? "10px" : "4px",
+            minWidth: view === "columns" ? "200px" : "160px"
+          },
+          children: view === "main" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            columnConfig && /* @__PURE__ */ jsx(MenuButton, { label: "Customize columns", onClick: () => setView("columns") }),
+            onDownloadCSV && /* @__PURE__ */ jsx(MenuButton, { label: "Download CSV", onClick: handleCSV }),
+            /* @__PURE__ */ jsx(MenuButton, { label: "Download PNG", onClick: handleDownloadPNG })
+          ] }) : /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setView("main"),
+                style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, marginBottom: "6px", padding: 0 },
+                children: "\u2190 Back"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColumnSettingsPanel,
+              {
+                columns: columnConfig.columns,
+                hidden: columnConfig.hidden,
+                onToggle: columnConfig.onToggle,
+                onShowAll: columnConfig.onShowAll,
+                onHideAll: columnConfig.onHideAll
+              }
+            )
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function MenuButton({ label, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      style: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: "8px 12px",
+        fontSize: "12.5px",
+        color: "var(--foreground)",
+        textAlign: "left",
+        borderRadius: "8px",
+        transition: "background 0.15s",
+        whiteSpace: "nowrap"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.background = "#f2f2f2",
+      onMouseLeave: (e) => e.currentTarget.style.background = "none",
+      children: label
+    }
+  );
+}
+
+// src/composites/flow-canvas/resolver.tsx
+init_ThemeContext();
+var FlowGraph2 = React4.lazy(
+  () => Promise.resolve().then(() => (init_FlowGraph(), FlowGraph_exports)).then((m) => ({ default: m.FlowGraph }))
+);
+function FlowCanvasRenderer({
+  diagram,
+  title,
+  description,
+  streaming = false,
+  autoplay,
+  nodeStates
+}) {
+  const { ACCENT: ACCENT2, BORDER: BORDER2, MUTED: MUTED2, PAPER: PAPER2 } = useTheme();
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "8px" }, children: [
+    (title || streaming) && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+      title && /* @__PURE__ */ jsx("p", { style: {
+        fontFamily: "var(--font-serif)",
+        fontSize: "15px",
+        fontWeight: 600,
+        color: "var(--foreground)",
+        letterSpacing: "-0.005em",
+        margin: 0
+      }, children: title }),
+      streaming && /* @__PURE__ */ jsx("span", { style: {
+        display: "inline-block",
+        width: "7px",
+        height: "7px",
+        borderRadius: "50%",
+        background: ACCENT2,
+        animation: "canvasPulse 1.2s ease-in-out infinite",
+        flexShrink: 0
+      } })
+    ] }),
+    description && !streaming && /* @__PURE__ */ jsx("p", { style: { fontSize: "12.5px", color: "#888888", margin: 0, fontFamily: "var(--font-sans)" }, children: description }),
+    /* @__PURE__ */ jsx("div", { style: __spreadValues({
+      width: "100%",
+      borderRadius: "0.75rem",
+      border: `1px solid ${BORDER2}`,
+      boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.05)",
+      overflow: "hidden",
+      background: "#ffffff",
+      position: "relative"
+    }, diagram ? {} : { height: "320px" }), children: diagram ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(FlowGraph2, { diagram, title, autoplay, nodeStates }) }) : /* @__PURE__ */ jsx("div", { style: {
+      position: "absolute",
+      inset: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" }, children: [
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "5px" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx("span", { style: {
+        width: "6px",
+        height: "6px",
+        borderRadius: "50%",
+        background: ACCENT2,
+        display: "inline-block",
+        animation: `bounce 1s ease-in-out ${i * 0.18}s infinite`
+      } }, i)) }),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#888888", fontFamily: "var(--font-sans)" }, children: "Drawing diagram\u2026" })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("style", { children: `
+        @keyframes canvasPulse {
+          0%, 100% { opacity: 1; transform: scale(1); }
+          50% { opacity: 0.4; transform: scale(0.75); }
+        }
+
+        /* \u2500\u2500 Mermaid output container \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+        /* Centering + padding handled by the shared Viewport; let the svg size
+           naturally so fit-to-view can scale it. */
+        .mermaid-output {
+          display: flex;
+          align-items: flex-start;
+          justify-content: center;
+          width: 100%;
+          box-sizing: border-box;
+          padding: 24px 20px;
+        }
+        .mermaid-output svg { display: block; max-width: 100%; height: auto; }
+
+        /* \u2500\u2500 All SVG text \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+        .mermaid-output text,
+        .mermaid-output text tspan {
+          font-family: Figtree, system-ui, sans-serif !important;
+          font-size: 12px !important;
+          fill: #111111 !important;
+        }
+
+        /* \u2500\u2500 Flowchart: node shapes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+        .mermaid-output .node rect,
+        .mermaid-output .node circle,
+        .mermaid-output .node ellipse,
+        .mermaid-output .node polygon,
+        .mermaid-output .node path {
+          stroke: #111111 !important;
+          stroke-width: 2 !important;
+        }
+
+        /* \u2500\u2500 Edges / arrows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+        .mermaid-output .edgePath .path,
+        .mermaid-output .flowchart-link {
+          stroke: ${ACCENT2} !important;
+          stroke-width: 2 !important;
+        }
+        .mermaid-output marker path {
+          fill: ${ACCENT2} !important;
+          stroke: ${ACCENT2} !important;
+        }
+        .mermaid-output .edgeLabel rect {
+          fill: #ffffff !important;
+          stroke: none !important;
+        }
+        .mermaid-output .edgeLabel text,
+        .mermaid-output .edgeLabel text tspan {
+          fill: ${MUTED2} !important;
+          font-size: 11px !important;
+        }
+
+        /* \u2500\u2500 Clusters / subgraphs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+        .mermaid-output .cluster rect {
+          fill: ${PAPER2} !important;
+          stroke: ${BORDER2} !important;
+          stroke-width: 2 !important;
+        }
+        .mermaid-output .cluster text,
+        .mermaid-output .cluster text tspan {
+          font-size: 10px !important;
+          font-weight: 600 !important;
+          letter-spacing: 0.05em !important;
+          fill: ${MUTED2} !important;
+          text-transform: uppercase !important;
+        }
+
+        /* \u2500\u2500 Sequence diagrams \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+        .mermaid-output .actor {
+          fill: #ffffff !important;
+          stroke: #111111 !important;
+          stroke-width: 2 !important;
+        }
+        .mermaid-output line.actor-line {
+          stroke: ${ACCENT2} !important;
+          stroke-width: 1.5 !important;
+          stroke-dasharray: 5 4 !important;
+        }
+        .mermaid-output .messageLine0,
+        .mermaid-output .messageLine1 {
+          stroke: ${ACCENT2} !important;
+          stroke-width: 2 !important;
+        }
+        .mermaid-output .note {
+          fill: #fef8e7 !important;
+          stroke: #e0c97c !important;
+          stroke-width: 2 !important;
+        }
+        .mermaid-output .activation0,
+        .mermaid-output .activation1 {
+          fill: #fef3c7 !important;
+          stroke: ${ACCENT2} !important;
+          stroke-width: 2 !important;
+        }
+        .mermaid-output .loopLine {
+          stroke: ${BORDER2} !important;
+          stroke-dasharray: 4 4 !important;
+        }
+
+        /* \u2500\u2500 ER diagrams \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+        .mermaid-output .er.entityBox {
+          fill: #ffffff !important;
+          stroke: #111111 !important;
+          stroke-width: 2 !important;
+        }
+        .mermaid-output .er.relationshipLine {
+          stroke: ${ACCENT2} !important;
+          stroke-width: 2 !important;
+        }
+        .mermaid-output .er.reltext tspan {
+          fill: ${MUTED2} !important;
+          font-size: 11px !important;
+        }
+
+        /* \u2500\u2500 Class diagrams \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+        .mermaid-output g.classGroup rect {
+          fill: #ffffff !important;
+          stroke: #111111 !important;
+          stroke-width: 2 !important;
+        }
+        .mermaid-output .relation {
+          stroke: ${ACCENT2} !important;
+          stroke-width: 2 !important;
+        }
+      ` })
+  ] });
+}
+function FlowCanvasResolver(p) {
+  var _a;
+  const { ACCENT: ACCENT2, BORDER: BORDER2 } = useTheme();
+  return /* @__PURE__ */ jsx(ComponentActions, { filename: (_a = p.title) != null ? _a : "flow-canvas", children: /* @__PURE__ */ jsx(
+    FlowCanvasRenderer,
+    {
+      diagram: p.diagram,
+      title: p.title,
+      description: p.description,
+      streaming: false,
+      autoplay: p.autoplay,
+      nodeStates: p.node_states
+    }
+  ) });
+}
+
+export { FlowCanvasRenderer, FlowCanvasResolver };
+//# sourceMappingURL=resolver.js.map
+//# sourceMappingURL=resolver.js.map