@hex-core/components 1.7.0 → 1.8.0

package/dist/index.js

@@ -5116,6 +5116,401 @@ function SpeechRecognition({
     }
   );
 }
+var DARK_FALLBACK = {
+  background: "#0a0a0a",
+  foreground: "#e5e5e5",
+  selectionBackground: "#404040"
+};
+var LIGHT_FALLBACK = {
+  background: "#fafafa",
+  foreground: "#171717",
+  selectionBackground: "#d4d4d4"
+};
+function readCssVarAsHex(name) {
+  if (typeof document === "undefined") return null;
+  const triplet = getComputedStyle(document.documentElement).getPropertyValue(`--${name}`).trim();
+  if (!triplet) return null;
+  return hslTripletToHex(triplet);
+}
+function Terminal({
+  output,
+  onInput,
+  cols = 80,
+  rows = 24,
+  theme = "dark",
+  cursorBlink = true,
+  disableInput = false,
+  className,
+  ...rest
+}) {
+  const containerRef = React44.useRef(null);
+  const termRef = React44.useRef(null);
+  const writtenRef = React44.useRef("");
+  const onInputRef = React44.useRef(onInput);
+  onInputRef.current = onInput;
+  const outputRef = React44.useRef(output);
+  outputRef.current = output;
+  React44.useEffect(() => {
+    if (!containerRef.current) return;
+    let disposed = false;
+    let inputDispose = null;
+    void (async () => {
+      const xtermModule = await import('@xterm/xterm');
+      if (disposed || !containerRef.current) return;
+      const fallback = theme === "dark" ? DARK_FALLBACK : LIGHT_FALLBACK;
+      const bgHex = readCssVarAsHex("background") ?? fallback.background;
+      const fgHex = readCssVarAsHex("foreground") ?? fallback.foreground;
+      const term = new xtermModule.Terminal({
+        cols,
+        rows,
+        cursorBlink,
+        disableStdin: disableInput,
+        theme: {
+          background: bgHex,
+          foreground: fgHex,
+          cursor: fgHex,
+          selectionBackground: fallback.selectionBackground
+        },
+        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+        fontSize: 13
+      });
+      term.open(containerRef.current);
+      termRef.current = term;
+      const latest = normalizeOutput(outputRef.current);
+      if (latest) {
+        term.write(latest);
+        writtenRef.current = latest;
+      }
+      inputDispose = term.onData((data) => {
+        onInputRef.current?.(data);
+      });
+    })();
+    return () => {
+      disposed = true;
+      inputDispose?.dispose();
+      termRef.current?.dispose();
+      termRef.current = null;
+      writtenRef.current = "";
+    };
+  }, []);
+  React44.useEffect(() => {
+    const term = termRef.current;
+    if (!term) return;
+    const next = normalizeOutput(output);
+    if (next === writtenRef.current) return;
+    if (next.startsWith(writtenRef.current)) {
+      const delta = next.slice(writtenRef.current.length);
+      if (delta) term.write(delta);
+    } else {
+      term.reset();
+      if (next) term.write(next);
+    }
+    writtenRef.current = next;
+  }, [output]);
+  const fallbackTriplet = theme === "dark" ? "0 0% 4%" : "0 0% 98%";
+  const themeBg = `hsl(var(--background, ${fallbackTriplet}))`;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      "data-hex-terminal": true,
+      "data-theme": theme,
+      style: { backgroundColor: themeBg, ...rest.style ?? {} },
+      className: cn(
+        "overflow-hidden rounded-md border p-2",
+        "font-mono text-sm leading-tight",
+        className
+      )
+    }
+  );
+}
+function normalizeOutput(value) {
+  if (value == null) return "";
+  return Array.isArray(value) ? value.join("") : value;
+}
+function Canvas({
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  onConnect,
+  hideControls = false,
+  hideBackground = false,
+  fitView = true,
+  children,
+  className,
+  ...rest
+}) {
+  const [rf, setRf] = React44.useState(null);
+  React44.useEffect(() => {
+    let cancelled = false;
+    void import('reactflow').then((mod) => {
+      if (!cancelled) setRf(mod);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  if (!rf) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        "data-hex-canvas-loading": true,
+        className: cn("h-full w-full bg-muted/20", className),
+        "aria-busy": "true"
+      }
+    );
+  }
+  const { ReactFlow, Background, Controls } = rf;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "data-hex-canvas": true,
+      className: cn("h-full w-full", className),
+      children: /* @__PURE__ */ jsxs(
+        ReactFlow,
+        {
+          nodes,
+          edges,
+          onNodesChange,
+          onEdgesChange,
+          onConnect,
+          fitView,
+          children: [
+            !hideBackground && /* @__PURE__ */ jsx(Background, {}),
+            !hideControls && /* @__PURE__ */ jsx(Controls, {}),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function AudioPlayer({ src, autoPlay = false, onEnded, onError, className, ...rest }) {
+  const containerRef = React44.useRef(null);
+  const wsRef = React44.useRef(null);
+  const onEndedRef = React44.useRef(onEnded);
+  const onErrorRef = React44.useRef(onError);
+  onEndedRef.current = onEnded;
+  onErrorRef.current = onError;
+  const [isPlaying, setIsPlaying] = React44.useState(false);
+  const [duration, setDuration] = React44.useState(0);
+  const [currentTime, setCurrentTime] = React44.useState(0);
+  const [isReady, setIsReady] = React44.useState(false);
+  React44.useEffect(() => {
+    if (!containerRef.current) return;
+    let disposed = false;
+    const objectUrl = src instanceof Blob ? URL.createObjectURL(src) : null;
+    void (async () => {
+      const { default: WaveSurfer } = await import('wavesurfer.js');
+      if (disposed || !containerRef.current) return;
+      const ws = WaveSurfer.create({
+        container: containerRef.current,
+        waveColor: "#a3a3a3",
+        progressColor: "#171717",
+        cursorColor: "transparent",
+        height: 32,
+        barWidth: 2,
+        barGap: 1,
+        barRadius: 1,
+        normalize: true
+      });
+      ws.on("ready", () => {
+        setIsReady(true);
+        setDuration(ws.getDuration());
+        if (autoPlay) void ws.play();
+      });
+      ws.on("play", () => setIsPlaying(true));
+      ws.on("pause", () => setIsPlaying(false));
+      ws.on("finish", () => {
+        setIsPlaying(false);
+        onEndedRef.current?.();
+      });
+      ws.on("timeupdate", (t) => setCurrentTime(t));
+      ws.on("error", (err) => {
+        onErrorRef.current?.(err.message);
+      });
+      void ws.load(objectUrl ?? src);
+      wsRef.current = ws;
+    })();
+    return () => {
+      disposed = true;
+      wsRef.current?.destroy();
+      wsRef.current = null;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [src]);
+  function togglePlay() {
+    const ws = wsRef.current;
+    if (!ws || !isReady) return;
+    void ws.playPause();
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      "data-hex-audio-player": true,
+      className: cn("flex items-center gap-3 rounded-md border bg-background p-2", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: togglePlay,
+            disabled: !isReady,
+            "aria-label": isPlaying ? "Pause" : "Play",
+            className: cn(
+              "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md",
+              "bg-foreground text-background transition-opacity",
+              "hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+            ),
+            children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { ref: containerRef, className: "flex-1 min-w-0" }),
+        /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: [
+          formatTime(currentTime),
+          " / ",
+          formatTime(duration)
+        ] })
+      ]
+    }
+  );
+}
+function formatTime(seconds) {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+function PlayIcon() {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 16 16", width: "12", height: "12", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M5 3.5v9l8-4.5z" }) });
+}
+function PauseIcon() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": true, viewBox: "0 0 16 16", width: "12", height: "12", fill: "currentColor", children: [
+    /* @__PURE__ */ jsx("rect", { x: "4", y: "3", width: "3", height: "10", rx: "0.5" }),
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "3", width: "3", height: "10", rx: "0.5" })
+  ] });
+}
+function AudioWaveform({
+  src,
+  height = 48,
+  waveColor = "#a3a3a3",
+  progressColor,
+  onReady,
+  onError,
+  className,
+  ...rest
+}) {
+  const containerRef = React44.useRef(null);
+  const onReadyRef = React44.useRef(onReady);
+  const onErrorRef = React44.useRef(onError);
+  onReadyRef.current = onReady;
+  onErrorRef.current = onError;
+  React44.useEffect(() => {
+    if (!containerRef.current) return;
+    let disposed = false;
+    let ws = null;
+    const objectUrl = src instanceof Blob ? URL.createObjectURL(src) : null;
+    void (async () => {
+      const { default: WaveSurfer } = await import('wavesurfer.js');
+      if (disposed || !containerRef.current) return;
+      ws = WaveSurfer.create({
+        container: containerRef.current,
+        waveColor,
+        progressColor: progressColor ?? waveColor,
+        cursorColor: "transparent",
+        height,
+        barWidth: 2,
+        barGap: 1,
+        barRadius: 1,
+        normalize: true,
+        interact: false
+      });
+      ws.on("ready", () => {
+        if (ws) onReadyRef.current?.(ws.getDuration());
+      });
+      ws.on("error", (err) => {
+        onErrorRef.current?.(err.message);
+      });
+      void ws.load(objectUrl ?? src);
+    })();
+    return () => {
+      disposed = true;
+      ws?.destroy();
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [src, height, waveColor, progressColor]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: containerRef,
+      "data-hex-audio-waveform": true,
+      className: cn("w-full", className)
+    }
+  );
+}
+function Diagram({ children: source, theme = "default", id, onError, className, ...rest }) {
+  const [svg, setSvg] = React44.useState("");
+  const [error, setError] = React44.useState(null);
+  const onErrorRef = React44.useRef(onError);
+  onErrorRef.current = onError;
+  const reactId = React44.useId();
+  const stableId = id ?? `hex-diagram-${reactId.replace(/:/g, "-")}`;
+  React44.useEffect(() => {
+    let cancelled = false;
+    setError(null);
+    void (async () => {
+      try {
+        const { default: mermaid } = await import('mermaid');
+        if (cancelled) return;
+        mermaid.initialize({ startOnLoad: false, theme, securityLevel: "strict" });
+        const { svg: rendered } = await mermaid.render(stableId, source);
+        if (!cancelled) setSvg(rendered);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        if (cancelled) return;
+        setError(message);
+        onErrorRef.current?.(message);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [source, theme, stableId]);
+  if (error) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        "data-hex-diagram-error": true,
+        role: "alert",
+        className: cn(
+          "rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Diagram failed to render" }),
+          /* @__PURE__ */ jsx("pre", { className: "mt-1 whitespace-pre-wrap text-xs opacity-80", children: error })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "data-hex-diagram": true,
+      "data-theme": theme,
+      className: cn("overflow-auto rounded-md border bg-background p-3", className),
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
 var loadingIndicatorVariants = cva("inline-flex items-center gap-2 text-muted-foreground", {
   variants: {
     size: {
@@ -5217,7 +5612,12 @@ var STATE_LABEL = {
 };
 var STATE_CLASSES = {
   pending: "bg-muted text-muted-foreground",
-  running: "bg-primary/15 text-primary animate-pulse",
+  // Solid primary bg + primary-foreground text in dark mode — the
+  // previously tinted `bg-primary/15` made the badge fg/bg too close in
+  // hue at 10px to clear WCAG AA (was 4.41:1, fails the 4.5 floor).
+  // Light mode keeps the soft tint where contrast holds; dark mode uses
+  // the solid surface for guaranteed ≥7:1 contrast.
+  running: "bg-primary/15 text-primary dark:bg-primary dark:text-primary-foreground animate-pulse",
   result: "bg-accent/30 text-accent-foreground",
   error: "bg-destructive/15 text-destructive"
 };
@@ -5808,7 +6208,3551 @@ function FileIcon2(props) {
     }
   );
 }
+function MindMap({
+  root,
+  orientation = "radial",
+  width = 600,
+  height = 400,
+  onNodeClick,
+  className,
+  ...rest
+}) {
+  const [d3h, setD3h] = React44.useState(null);
+  React44.useEffect(() => {
+    let cancelled = false;
+    void import('d3-hierarchy').then((mod) => {
+      if (!cancelled) setD3h(mod);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  if (!d3h) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-hex-mind-map-loading": true,
+        "aria-busy": "true",
+        className: cn("inline-block bg-muted/20", className),
+        style: { width, height }
+      }
+    );
+  }
+  const { nodes, links, viewBox } = layout(d3h, root, orientation, width, height);
+  const nodeCount = nodes.length;
+  const desc = `Mind map with ${nodeCount} node${nodeCount === 1 ? "" : "s"}, rooted at "${root.label}"`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-mind-map": true,
+      "data-orientation": orientation,
+      role: "img",
+      viewBox,
+      width,
+      height,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Mind map" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-mind-map-links": true, children: links.map((l) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: linkPath(l, orientation),
+            fill: "none",
+            stroke: "hsl(var(--muted-foreground))",
+            strokeOpacity: 0.7,
+            strokeWidth: 1.5
+          },
+          l.id
+        )) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-mind-map-nodes": true, children: nodes.map((n) => /* @__PURE__ */ jsxs(
+          "g",
+          {
+            "data-hex-mind-map-node": true,
+            "data-depth": n.depth,
+            transform: `translate(${n.x},${n.y})`,
+            style: onNodeClick ? { cursor: "pointer" } : void 0,
+            onClick: onNodeClick ? () => onNodeClick(n.node) : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  r: 4,
+                  fill: "hsl(var(--primary))",
+                  stroke: "hsl(var(--background))",
+                  strokeWidth: 2
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: 8,
+                  y: 4,
+                  fontSize: 12,
+                  fill: "hsl(var(--foreground))",
+                  style: { paintOrder: "stroke" },
+                  stroke: "hsl(var(--background))",
+                  strokeWidth: 3,
+                  strokeLinejoin: "round",
+                  children: n.node.label
+                }
+              )
+            ]
+          },
+          n.node.id
+        )) })
+      ]
+    }
+  );
+}
+function layout(d3h, root, orientation, width, height) {
+  const hierarchy = d3h.hierarchy(root);
+  if (orientation === "radial") {
+    const radius = Math.min(width, height) / 2 - 16;
+    const layoutRoot2 = d3h.tree().size([2 * Math.PI, radius])(hierarchy);
+    const nodes2 = [];
+    const links2 = [];
+    layoutRoot2.each((d) => {
+      const point = polarToCartesian(d.x, d.y);
+      nodes2.push({ node: d.data, x: point.x, y: point.y, depth: d.depth });
+    });
+    layoutRoot2.links().forEach((link, i) => {
+      const sPt = polarToCartesian(link.source.x, link.source.y);
+      const tPt = polarToCartesian(link.target.x, link.target.y);
+      links2.push({ source: sPt, target: tPt, id: `l-${i}` });
+    });
+    const half = Math.min(width, height) / 2;
+    return {
+      nodes: nodes2,
+      links: links2,
+      viewBox: `${-half} ${-half} ${2 * half} ${2 * half}`
+    };
+  }
+  const layoutRoot = d3h.tree().size([height - 32, width - 200])(hierarchy);
+  const nodes = [];
+  const links = [];
+  layoutRoot.each((d) => {
+    nodes.push({ node: d.data, x: d.y, y: d.x, depth: d.depth });
+  });
+  layoutRoot.links().forEach((link, i) => {
+    links.push({
+      source: { x: link.source.y, y: link.source.x },
+      target: { x: link.target.y, y: link.target.x },
+      id: `l-${i}`
+    });
+  });
+  return {
+    nodes,
+    links,
+    viewBox: `0 0 ${width} ${height}`
+  };
+}
+function polarToCartesian(angle, radius) {
+  return {
+    x: radius * Math.cos(angle - Math.PI / 2),
+    y: radius * Math.sin(angle - Math.PI / 2)
+  };
+}
+function linkPath(link, orientation) {
+  const { source: s, target: t } = link;
+  if (orientation === "horizontal") {
+    const mx = (s.x + t.x) / 2;
+    return `M${s.x},${s.y} C${mx},${s.y} ${mx},${t.y} ${t.x},${t.y}`;
+  }
+  return `M${s.x},${s.y} C${s.x},${(s.y + t.y) / 2} ${t.x},${(s.y + t.y) / 2} ${t.x},${t.y}`;
+}
+
+// src/lib/chart-palette.ts
+var CHART_PALETTE = [
+  "hsl(var(--chart-1, var(--primary)))",
+  "hsl(var(--chart-2, var(--primary)))",
+  "hsl(var(--chart-3, var(--primary)))",
+  "hsl(var(--chart-4, var(--primary)))",
+  "hsl(var(--chart-5, var(--primary)))",
+  "hsl(var(--chart-6, var(--primary)))"
+];
+function pickChartHue(index) {
+  const safe = (index % CHART_PALETTE.length + CHART_PALETTE.length) % CHART_PALETTE.length;
+  return CHART_PALETTE[safe];
+}
+function TreeMap({
+  root,
+  width = 600,
+  height = 400,
+  padding = 2,
+  tile = "squarify",
+  colorBy = "depth",
+  onLeafClick,
+  className,
+  ...rest
+}) {
+  const [d3h, setD3h] = React44.useState(null);
+  React44.useEffect(() => {
+    let cancelled = false;
+    void import('d3-hierarchy').then((mod) => {
+      if (!cancelled) setD3h(mod);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  if (!d3h) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-hex-tree-map-loading": true,
+        "aria-busy": "true",
+        className: cn("inline-block bg-muted/20", className),
+        style: { width, height }
+      }
+    );
+  }
+  const leaves = layout2(d3h, root, width, height, padding, tile);
+  const maxValue = leaves.reduce((m, l) => l.value > m ? l.value : m, 0) || 1;
+  const desc = `Tree map of ${leaves.length} leaf${leaves.length === 1 ? "" : "s"}, rooted at "${root.label}"`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-tree-map": true,
+      "data-tile": tile,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Tree map" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        leaves.map((l) => {
+          const w = l.x1 - l.x0;
+          const h = l.y1 - l.y0;
+          const fill = resolveFill(l, maxValue, colorBy);
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-tree-map-leaf": true,
+              "data-depth": l.depth,
+              transform: `translate(${l.x0},${l.y0})`,
+              style: onLeafClick ? { cursor: "pointer" } : void 0,
+              onClick: onLeafClick ? () => onLeafClick(l.node) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    width: w,
+                    height: h,
+                    fill,
+                    fillOpacity: 0.85,
+                    stroke: "hsl(var(--background))",
+                    strokeWidth: 1
+                  }
+                ),
+                w > 40 && h > 16 ? /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: 6,
+                    y: 16,
+                    fontSize: 12,
+                    fontWeight: 500,
+                    fill: "hsl(var(--background))",
+                    style: {
+                      pointerEvents: "none",
+                      paintOrder: "stroke",
+                      stroke: "hsl(var(--foreground) / 0.35)",
+                      strokeWidth: 2
+                    },
+                    children: l.node.label
+                  }
+                ) : null,
+                w > 60 && h > 32 ? /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: 6,
+                    y: 32,
+                    fontSize: 11,
+                    fill: "hsl(var(--background) / 0.85)",
+                    style: {
+                      pointerEvents: "none",
+                      paintOrder: "stroke",
+                      stroke: "hsl(var(--foreground) / 0.3)",
+                      strokeWidth: 1.5
+                    },
+                    children: l.value.toLocaleString()
+                  }
+                ) : null
+              ]
+            },
+            l.node.id
+          );
+        })
+      ]
+    }
+  );
+}
+function layout2(d3h, root, width, height, padding, tile) {
+  const tileFn = tile === "binary" ? d3h.treemapBinary : tile === "slice-dice" ? d3h.treemapSliceDice : d3h.treemapSquarify;
+  const hierarchy = d3h.hierarchy(root).sum((d) => d.children && d.children.length > 0 ? 0 : d.value ?? 0).sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+  const layoutRoot = d3h.treemap().tile(tileFn).size([width, height]).padding(padding)(hierarchy);
+  return layoutRoot.leaves().map((leaf, leafIdx) => {
+    let cursor = leaf;
+    while (cursor && cursor.depth > 1) cursor = cursor.parent;
+    const ancestorIdx = cursor?.parent?.children?.indexOf(cursor) ?? leafIdx;
+    return {
+      node: leaf.data,
+      depth: leaf.depth,
+      x0: leaf.x0,
+      y0: leaf.y0,
+      x1: leaf.x1,
+      y1: leaf.y1,
+      value: leaf.value ?? 0,
+      leafIdx,
+      rootSiblingIdx: Math.max(0, ancestorIdx)
+    };
+  });
+}
+function resolveFill(leaf, maxValue, colorBy) {
+  if (typeof colorBy === "function") return colorBy(leaf.node, leaf.depth);
+  if (colorBy === "value") {
+    const t = Math.max(0.2, Math.min(1, leaf.value / maxValue));
+    return `hsl(var(--chart-1) / ${t.toFixed(2)})`;
+  }
+  const idx = leaf.depth > 1 ? leaf.rootSiblingIdx : leaf.leafIdx;
+  return pickChartHue(idx);
+}
+function OrgChart({
+  root,
+  collapsible = true,
+  defaultExpandedDepth = Number.POSITIVE_INFINITY,
+  nodeWidth = 180,
+  nodeHeight = 64,
+  width = 800,
+  height = 480,
+  onNodeClick,
+  className,
+  ...rest
+}) {
+  const [d3h, setD3h] = React44.useState(null);
+  const [collapsed, setCollapsed] = React44.useState(() => seedCollapsed(root, defaultExpandedDepth));
+  React44.useEffect(() => {
+    let cancelled = false;
+    void import('d3-hierarchy').then((mod) => {
+      if (!cancelled) setD3h(mod);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  React44.useEffect(() => {
+    setCollapsed(seedCollapsed(root, defaultExpandedDepth));
+  }, [root, defaultExpandedDepth]);
+  if (!d3h) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-hex-org-chart-loading": true,
+        "aria-busy": "true",
+        className: cn("inline-block bg-muted/20", className),
+        style: { width, height }
+      }
+    );
+  }
+  const { nodes, links } = layout3(d3h, root, collapsed, width, height, nodeHeight);
+  const desc = `Organizational chart with ${nodes.length} visible node${nodes.length === 1 ? "" : "s"}, rooted at "${root.label}"`;
+  const handleClick = (node) => {
+    onNodeClick?.(node);
+    if (!collapsible) return;
+    const hasChildren = node.children && node.children.length > 0;
+    if (!hasChildren) return;
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(node.id)) next.delete(node.id);
+      else next.add(node.id);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-org-chart": true,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Org chart" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-org-chart-links": true, children: links.map((l) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M${l.source.x},${l.source.y} C${l.source.x},${(l.source.y + l.target.y) / 2} ${l.target.x},${(l.source.y + l.target.y) / 2} ${l.target.x},${l.target.y}`,
+            fill: "none",
+            stroke: "hsl(var(--muted-foreground))",
+            strokeOpacity: 0.5,
+            strokeWidth: 1
+          },
+          l.id
+        )) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-org-chart-nodes": true, children: nodes.map((n) => /* @__PURE__ */ jsxs(
+          "g",
+          {
+            "data-hex-org-chart-node": true,
+            "data-depth": n.depth,
+            transform: `translate(${n.x - nodeWidth / 2},${n.y - nodeHeight / 2})`,
+            style: collapsible || onNodeClick ? { cursor: "pointer" } : void 0,
+            onClick: collapsible || onNodeClick ? () => handleClick(n.node) : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  width: nodeWidth,
+                  height: nodeHeight,
+                  rx: 8,
+                  ry: 8,
+                  fill: "hsl(var(--card))",
+                  stroke: "hsl(var(--border))",
+                  strokeWidth: 1
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: 12,
+                  y: 24,
+                  fontSize: 13,
+                  fontWeight: 600,
+                  fill: "hsl(var(--foreground))",
+                  children: truncate(n.node.label, Math.floor((nodeWidth - 24) / 7))
+                }
+              ),
+              n.node.subtitle ? /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: 12,
+                  y: 42,
+                  fontSize: 11,
+                  fill: "hsl(var(--muted-foreground))",
+                  children: truncate(n.node.subtitle, Math.floor((nodeWidth - 24) / 6))
+                }
+              ) : null,
+              n.collapsedCount > 0 ? /* @__PURE__ */ jsxs("g", { transform: `translate(${nodeWidth - 28},${nodeHeight - 18})`, children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    width: 20,
+                    height: 14,
+                    rx: 7,
+                    ry: 7,
+                    fill: "hsl(var(--primary))",
+                    opacity: 0.85
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: 10,
+                    y: 10,
+                    fontSize: 9,
+                    fontWeight: 600,
+                    fill: "hsl(var(--primary-foreground))",
+                    textAnchor: "middle",
+                    children: `+${n.collapsedCount}`
+                  }
+                )
+              ] }) : null
+            ]
+          },
+          n.node.id
+        )) })
+      ]
+    }
+  );
+}
+function seedCollapsed(root, maxDepth) {
+  if (!Number.isFinite(maxDepth)) return /* @__PURE__ */ new Set();
+  const collapsed = /* @__PURE__ */ new Set();
+  const walk = (n, depth) => {
+    if (depth >= maxDepth && n.children && n.children.length > 0) {
+      collapsed.add(n.id);
+      return;
+    }
+    n.children?.forEach((c) => walk(c, depth + 1));
+  };
+  walk(root, 0);
+  return collapsed;
+}
+function layout3(d3h, root, collapsed, width, height, nodeHeight) {
+  const indexById = /* @__PURE__ */ new Map();
+  indexNodes(root, indexById);
+  const visible = pruneCollapsed(root, collapsed);
+  const hierarchy = d3h.hierarchy(visible);
+  const layoutRoot = d3h.tree().size([width - 32, height - nodeHeight])(hierarchy);
+  const nodes = [];
+  layoutRoot.each((d) => {
+    const original = indexById.get(d.data.id);
+    const collapsedCount = collapsed.has(d.data.id) && original ? countDescendants(original) : 0;
+    nodes.push({ node: d.data, x: d.x + 16, y: d.y + nodeHeight / 2, depth: d.depth, collapsedCount });
+  });
+  const links = layoutRoot.links().map((link, i) => ({
+    source: { x: link.source.x + 16, y: link.source.y + nodeHeight / 2 },
+    target: { x: link.target.x + 16, y: link.target.y + nodeHeight / 2 },
+    id: `l-${i}`
+  }));
+  return { nodes, links };
+}
+function pruneCollapsed(node, collapsed) {
+  if (collapsed.has(node.id)) {
+    return { ...node, children: void 0 };
+  }
+  if (!node.children || node.children.length === 0) return node;
+  return { ...node, children: node.children.map((c) => pruneCollapsed(c, collapsed)) };
+}
+function indexNodes(node, out) {
+  out.set(node.id, node);
+  if (!node.children) return;
+  for (const c of node.children) indexNodes(c, out);
+}
+function countDescendants(node) {
+  if (!node.children || node.children.length === 0) return 0;
+  return node.children.reduce((sum, c) => sum + 1 + countDescendants(c), 0);
+}
+function truncate(s, max) {
+  if (s.length <= max) return s;
+  return `${s.slice(0, Math.max(1, max - 1))}\u2026`;
+}
+function depthOpacity(depth, maxDepth) {
+  if (maxDepth <= 1) return 0.85;
+  const t = (depth - 1) / Math.max(1, maxDepth - 1);
+  return 0.85 - t * 0.4;
+}
+function Sunburst({
+  root,
+  drillable = true,
+  centerLabel,
+  size = 400,
+  onSegmentClick,
+  className,
+  ...rest
+}) {
+  const [d3h, setD3h] = React44.useState(null);
+  const [d3s, setD3s] = React44.useState(null);
+  const [focusId, setFocusId] = React44.useState(root.id);
+  React44.useEffect(() => {
+    let cancelled = false;
+    void Promise.all([import('d3-hierarchy'), import('d3-shape')]).then(([h, s]) => {
+      if (cancelled) return;
+      setD3h(h);
+      setD3s(s);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  React44.useEffect(() => {
+    setFocusId(root.id);
+  }, [root]);
+  if (!d3h || !d3s) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-hex-sunburst-loading": true,
+        "aria-busy": "true",
+        className: cn("inline-block bg-muted/20", className),
+        style: { width: size, height: size }
+      }
+    );
+  }
+  const focused = findNode(root, focusId) ?? root;
+  const radius = size / 2;
+  const segments = layout4(d3h, focused, radius);
+  const maxDepth = segments.reduce((m, s) => Math.max(m, s.depth), 1);
+  const arc = d3s.arc().startAngle((s) => s.x0).endAngle((s) => s.x1).innerRadius((s) => s.y0).outerRadius((s) => s.y1).padAngle(5e-3).padRadius(radius);
+  const handleSegmentClick = (segment) => {
+    onSegmentClick?.(segment.node);
+    if (!drillable) return;
+    const hasChildren = segment.node.children && segment.node.children.length > 0;
+    if (!hasChildren) return;
+    setFocusId(segment.node.id);
+  };
+  const handleCenterClick = () => {
+    if (!drillable || focusId === root.id) return;
+    setFocusId(root.id);
+  };
+  const desc = `Sunburst with ${segments.length} segments, focused on "${focused.label}"`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-sunburst": true,
+      "data-focus-id": focusId,
+      role: "img",
+      width: size,
+      height: size,
+      viewBox: `${-radius} ${-radius} ${size} ${size}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Sunburst" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-sunburst-segments": true, children: segments.filter((s) => s.depth > 0).map((s) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            "data-hex-sunburst-segment": true,
+            "data-depth": s.depth,
+            d: arc(s) ?? "",
+            fill: pickChartHue(s.rootSiblingIdx),
+            fillOpacity: depthOpacity(s.depth, maxDepth),
+            stroke: "hsl(var(--background))",
+            strokeWidth: 1,
+            style: drillable || onSegmentClick ? { cursor: "pointer" } : void 0,
+            onClick: drillable || onSegmentClick ? () => handleSegmentClick(s) : void 0
+          },
+          s.node.id
+        )) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-sunburst-labels": true, "aria-hidden": "true", pointerEvents: "none", children: segments.filter((s) => s.depth > 0 && s.x1 - s.x0 > 0.18).map((s) => {
+          const angle = (s.x0 + s.x1) / 2;
+          const rMid = (s.y0 + s.y1) / 2;
+          const cx = Math.sin(angle) * rMid;
+          const cy = -Math.cos(angle) * rMid;
+          return /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: cx,
+              y: cy,
+              textAnchor: "middle",
+              dy: "0.35em",
+              fontSize: 11,
+              fontWeight: 500,
+              fill: "hsl(var(--background))",
+              style: { paintOrder: "stroke", stroke: "hsl(var(--foreground) / 0.25)", strokeWidth: 2 },
+              children: s.node.label
+            },
+            `${s.node.id}-label`
+          );
+        }) }),
+        /* @__PURE__ */ jsxs(
+          "g",
+          {
+            "data-hex-sunburst-center": true,
+            style: drillable && focusId !== root.id ? { cursor: "pointer" } : void 0,
+            onClick: drillable ? handleCenterClick : void 0,
+            children: [
+              /* @__PURE__ */ jsx("circle", { r: radius / 4, fill: "hsl(var(--card))", stroke: "hsl(var(--border))", strokeWidth: 1 }),
+              centerLabel ? /* @__PURE__ */ jsx("foreignObject", { x: -radius / 4, y: -radius / 4, width: radius / 2, height: radius / 2, children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    textAlign: "center",
+                    fontSize: 12,
+                    padding: 4
+                  },
+                  children: centerLabel
+                }
+              ) }) : /* @__PURE__ */ jsx(
+                "text",
+                {
+                  textAnchor: "middle",
+                  dy: "0.35em",
+                  fontSize: 12,
+                  fontWeight: 600,
+                  fill: "hsl(var(--foreground))",
+                  children: focused.label
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function layout4(d3h, focused, radius) {
+  const hierarchy = d3h.hierarchy(focused).sum((d) => d.children && d.children.length > 0 ? 0 : d.value ?? 0).sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
+  const layoutRoot = d3h.partition().size([2 * Math.PI, radius])(hierarchy);
+  const segments = [];
+  layoutRoot.each((d) => {
+    let cursor = d;
+    while (cursor && cursor.depth > 1) cursor = cursor.parent;
+    const ancestorIdx = cursor?.parent?.children?.indexOf(cursor) ?? 0;
+    segments.push({
+      node: d.data,
+      depth: d.depth,
+      x0: d.x0,
+      x1: d.x1,
+      y0: d.y0,
+      y1: d.y1,
+      rootSiblingIdx: Math.max(0, ancestorIdx)
+    });
+  });
+  return segments;
+}
+function findNode(root, id) {
+  if (root.id === id) return root;
+  if (!root.children) return null;
+  for (const c of root.children) {
+    const f = findNode(c, id);
+    if (f) return f;
+  }
+  return null;
+}
+function Dendrogram({
+  root,
+  orientation = "horizontal",
+  linkShape = "step",
+  width = 600,
+  height = 400,
+  onLeafClick,
+  className,
+  ...rest
+}) {
+  const [d3h, setD3h] = React44.useState(null);
+  React44.useEffect(() => {
+    let cancelled = false;
+    void import('d3-hierarchy').then((mod) => {
+      if (!cancelled) setD3h(mod);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  if (!d3h) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-hex-dendrogram-loading": true,
+        "aria-busy": "true",
+        className: cn("inline-block bg-muted/20", className),
+        style: { width, height }
+      }
+    );
+  }
+  const { nodes, links } = layout5(d3h, root, orientation, width, height);
+  const leafCount = nodes.filter((n) => n.isLeaf).length;
+  const desc = `Dendrogram with ${leafCount} leaves, rooted at "${root.label}"`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-dendrogram": true,
+      "data-orientation": orientation,
+      "data-link-shape": linkShape,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Dendrogram" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-dendrogram-links": true, children: links.map((l) => /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: linkPath2(l, orientation, linkShape),
+            fill: "none",
+            stroke: "hsl(var(--muted-foreground))",
+            strokeOpacity: 0.8,
+            strokeWidth: 1
+          },
+          l.id
+        )) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-dendrogram-nodes": true, children: nodes.map((n) => /* @__PURE__ */ jsxs(
+          "g",
+          {
+            "data-hex-dendrogram-node": true,
+            "data-leaf": n.isLeaf ? "true" : "false",
+            "data-depth": n.depth,
+            transform: `translate(${n.x},${n.y})`,
+            style: n.isLeaf && onLeafClick ? { cursor: "pointer" } : void 0,
+            onClick: n.isLeaf && onLeafClick ? () => onLeafClick(n.node) : void 0,
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  r: n.isLeaf ? 3 : 2,
+                  fill: n.isLeaf ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))"
+                }
+              ),
+              n.isLeaf ? /* @__PURE__ */ jsx(
+                "text",
+                {
+                  x: orientation === "horizontal" ? 6 : 0,
+                  y: orientation === "horizontal" ? 4 : 14,
+                  textAnchor: orientation === "horizontal" ? "start" : "middle",
+                  fontSize: 11,
+                  fill: "hsl(var(--foreground))",
+                  style: { paintOrder: "stroke" },
+                  stroke: "hsl(var(--background))",
+                  strokeWidth: 3,
+                  strokeLinejoin: "round",
+                  children: n.node.label
+                }
+              ) : null
+            ]
+          },
+          n.node.id
+        )) })
+      ]
+    }
+  );
+}
+function layout5(d3h, root, orientation, width, height) {
+  const hierarchy = d3h.hierarchy(root);
+  const clusterFn = d3h.cluster();
+  if (orientation === "horizontal") {
+    clusterFn.size([height - 32, width - 120]);
+  } else {
+    clusterFn.size([width - 32, height - 64]);
+  }
+  const layoutRoot = clusterFn(hierarchy);
+  const nodes = [];
+  layoutRoot.each((d) => {
+    const isLeaf = !d.children || d.children.length === 0;
+    if (orientation === "horizontal") {
+      nodes.push({ node: d.data, x: d.y + 16, y: d.x + 16, depth: d.depth, isLeaf });
+    } else {
+      nodes.push({ node: d.data, x: d.x + 16, y: d.y + 16, depth: d.depth, isLeaf });
+    }
+  });
+  const links = layoutRoot.links().map((link, i) => {
+    if (orientation === "horizontal") {
+      return {
+        source: { x: link.source.y + 16, y: link.source.x + 16 },
+        target: { x: link.target.y + 16, y: link.target.x + 16 },
+        id: `l-${i}`
+      };
+    }
+    return {
+      source: { x: link.source.x + 16, y: link.source.y + 16 },
+      target: { x: link.target.x + 16, y: link.target.y + 16 },
+      id: `l-${i}`
+    };
+  });
+  return { nodes, links };
+}
+function linkPath2(link, orientation, linkShape) {
+  const { source: s, target: t } = link;
+  if (linkShape === "step") {
+    if (orientation === "horizontal") {
+      return `M${s.x},${s.y} H${t.x} V${t.y}`;
+    }
+    return `M${s.x},${s.y} V${t.y} H${t.x}`;
+  }
+  if (orientation === "horizontal") {
+    const mx = (s.x + t.x) / 2;
+    return `M${s.x},${s.y} C${mx},${s.y} ${mx},${t.y} ${t.x},${t.y}`;
+  }
+  const my = (s.y + t.y) / 2;
+  return `M${s.x},${s.y} C${s.x},${my} ${t.x},${my} ${t.x},${t.y}`;
+}
+function Sankey({
+  nodes,
+  links,
+  width = 720,
+  height = 420,
+  nodeAlign = "justify",
+  nodeWidth = 12,
+  nodePadding = 8,
+  onLinkHover,
+  onNodeClick,
+  className,
+  ...rest
+}) {
+  const [d3s, setD3s] = React44.useState(null);
+  React44.useEffect(() => {
+    let cancelled = false;
+    void import('d3-sankey').then((mod) => {
+      if (!cancelled) setD3s(mod);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const laidOut = React44.useMemo(() => {
+    if (!d3s) return null;
+    return layout6(d3s, nodes, links, width, height, nodeAlign, nodeWidth, nodePadding);
+  }, [d3s, nodes, links, width, height, nodeAlign, nodeWidth, nodePadding]);
+  if (!d3s || !laidOut) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-hex-sankey-loading": true,
+        "aria-busy": "true",
+        "aria-label": "Loading Sankey diagram",
+        className: cn("inline-block bg-muted/20", className),
+        style: { width, height }
+      }
+    );
+  }
+  const { nodes: laidOutNodes, links: laidOutLinks } = laidOut;
+  const desc = `Sankey diagram with ${nodes.length} node${nodes.length === 1 ? "" : "s"} and ${links.length} link${links.length === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-sankey": true,
+      "data-node-align": nodeAlign,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Sankey diagram" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-sankey-links": true, fill: "none", children: laidOutLinks.map((l, i) => {
+          const interactive = Boolean(onLinkHover);
+          const fireHover = (link) => onLinkHover?.(link);
+          const stroke = pickChartHue(l.sourceIdx);
+          return /* @__PURE__ */ jsx(
+            "path",
+            {
+              "data-hex-sankey-link": true,
+              d: l.d,
+              stroke,
+              strokeOpacity: 0.45,
+              strokeWidth: Math.max(1, l.width),
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? `Flow: ${l.original.source} \u2192 ${l.original.target} (${l.original.value})` : void 0,
+              style: {
+                cursor: interactive ? "pointer" : void 0,
+                transition: "stroke-opacity 120ms ease"
+              },
+              onMouseEnter: interactive ? () => fireHover(l.original) : void 0,
+              onMouseLeave: interactive ? () => fireHover(null) : void 0,
+              onFocus: interactive ? () => fireHover(l.original) : void 0,
+              onBlur: interactive ? () => fireHover(null) : void 0
+            },
+            `${l.original.source}-${l.original.target}-${i}`
+          );
+        }) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-sankey-nodes": true, children: laidOutNodes.map((n) => {
+          const w = n.x1 - n.x0;
+          const h = n.y1 - n.y0;
+          const isRightSide = n.x0 > width / 2;
+          const interactive = Boolean(onNodeClick);
+          const handleActivate = () => onNodeClick?.(n.original);
+          const fill = pickChartHue(n.idx);
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-sankey-node": true,
+              transform: `translate(${n.x0},${n.y0})`,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? n.original.label : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey(e, handleActivate) : void 0,
+              children: [
+                /* @__PURE__ */ jsx("rect", { width: w, height: h, fill, stroke: "hsl(var(--background))" }),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: isRightSide ? -6 : w + 6,
+                    y: h / 2,
+                    dy: "0.35em",
+                    fontSize: 12,
+                    fontWeight: 500,
+                    fill: "hsl(var(--foreground))",
+                    textAnchor: isRightSide ? "end" : "start",
+                    style: { pointerEvents: "none" },
+                    children: n.original.label
+                  }
+                )
+              ]
+            },
+            n.original.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function layout6(d3s, nodes, links, width, height, align, nodeWidth, nodePadding) {
+  const alignFn = align === "left" ? d3s.sankeyLeft : align === "right" ? d3s.sankeyRight : align === "center" ? d3s.sankeyCenter : d3s.sankeyJustify;
+  const nodesClone = nodes.map((n) => ({ ...n }));
+  const linksClone = links.map((l) => ({ ...l }));
+  const sankeyGen = d3s.sankey().nodeId((d) => d.id).nodeAlign(alignFn).nodeWidth(nodeWidth).nodePadding(nodePadding).extent([
+    [1, 1],
+    [width - 1, height - 1]
+  ]);
+  const result = sankeyGen({ nodes: nodesClone, links: linksClone });
+  const linkPath3 = d3s.sankeyLinkHorizontal();
+  const idByIndex = /* @__PURE__ */ new Map();
+  nodes.forEach((n, i) => idByIndex.set(n.id, i));
+  return {
+    nodes: result.nodes.map((n, i) => ({
+      original: { ...nodes[i] },
+      x0: n.x0 ?? 0,
+      x1: n.x1 ?? 0,
+      y0: n.y0 ?? 0,
+      y1: n.y1 ?? 0,
+      idx: i
+    })),
+    links: result.links.map((l, i) => {
+      const sourceId = typeof l.source === "string" ? l.source : l.source.id;
+      const targetId = typeof l.target === "string" ? l.target : l.target.id;
+      return {
+        original: { ...links[i], source: sourceId, target: targetId, value: l.value },
+        d: linkPath3(l) ?? "",
+        width: l.width ?? 1,
+        sourceIdx: idByIndex.get(sourceId) ?? 0
+      };
+    })
+  };
+}
+function activateOnKey(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+function Funnel({
+  stages,
+  width = 480,
+  height = 360,
+  gap = 4,
+  showConversion = true,
+  onStageClick,
+  className,
+  ...rest
+}) {
+  const laidOut = layout7(stages, width, height, gap);
+  const desc = `Funnel with ${stages.length} stage${stages.length === 1 ? "" : "s"}, peak value ${stages[0]?.value ?? 0}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-funnel": true,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Funnel chart" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-funnel-stages": true, children: laidOut.map((s) => {
+          const interactive = Boolean(onStageClick);
+          const handleActivate = () => onStageClick?.(s.stage);
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-funnel-stage": true,
+              "data-depth": s.depth,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? `${s.stage.label}: ${s.stage.value}` : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey2(e, handleActivate) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "polygon",
+                  {
+                    points: `${s.topLeft},${s.yTop} ${s.topRight},${s.yTop} ${s.bottomRight},${s.yBottom} ${s.bottomLeft},${s.yBottom}`,
+                    fill: pickChartHue(s.depth),
+                    fillOpacity: 0.85,
+                    stroke: "hsl(var(--background))",
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: width / 2,
+                    y: (s.yTop + s.yBottom) / 2,
+                    dy: "0.35em",
+                    textAnchor: "middle",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    fill: "hsl(var(--background))",
+                    style: {
+                      pointerEvents: "none",
+                      paintOrder: "stroke",
+                      stroke: "hsl(var(--foreground) / 0.45)",
+                      strokeWidth: 2
+                    },
+                    children: `${s.stage.label} \xB7 ${s.stage.value.toLocaleString()}`
+                  }
+                )
+              ]
+            },
+            s.stage.id
+          );
+        }) }),
+        showConversion ? /* @__PURE__ */ jsx("g", { "data-hex-funnel-conversions": true, children: laidOut.map(
+          (s) => s.conversionFromPrev != null ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              "data-hex-funnel-conversion": true,
+              x: width - 4,
+              y: s.yTop - 2,
+              textAnchor: "end",
+              fontSize: 10,
+              fill: "hsl(var(--muted-foreground))",
+              children: formatPct(s.conversionFromPrev)
+            },
+            `conv-${s.stage.id}`
+          ) : null
+        ) }) : null
+      ]
+    }
+  );
+}
+function layout7(stages, width, height, gap) {
+  if (stages.length === 0) return [];
+  const peak = Math.max(...stages.map((s) => s.value), 0) || 1;
+  const usableHeight = height - gap * Math.max(0, stages.length - 1);
+  const stageHeight = usableHeight / stages.length;
+  const cx = width / 2;
+  return stages.map((stage, i) => {
+    const yTop = i * (stageHeight + gap);
+    const yBottom = yTop + stageHeight;
+    const topRatio = stage.value / peak;
+    const next = stages[i + 1];
+    const bottomRatio = next ? next.value / peak : topRatio;
+    const topHalfWidth = width / 2 * Math.max(0, Math.min(1, topRatio));
+    const bottomHalfWidth = width / 2 * Math.max(0, Math.min(1, bottomRatio));
+    const prev = stages[i - 1];
+    const conversionFromPrev = prev && prev.value > 0 ? stage.value / prev.value : null;
+    return {
+      stage,
+      depth: i,
+      topLeft: cx - topHalfWidth,
+      topRight: cx + topHalfWidth,
+      bottomLeft: cx - bottomHalfWidth,
+      bottomRight: cx + bottomHalfWidth,
+      yTop,
+      yBottom,
+      conversionFromPrev
+    };
+  });
+}
+function formatPct(ratio) {
+  if (!Number.isFinite(ratio)) return "\u2014";
+  return `${(ratio * 100).toFixed(ratio < 0.1 ? 1 : 0)}%`;
+}
+function activateOnKey2(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+function Pyramid({
+  tiers,
+  shape = "widening",
+  width = 480,
+  height = 360,
+  gap = 4,
+  showValues = true,
+  onTierClick,
+  className,
+  ...rest
+}) {
+  const laidOut = layout8(tiers, shape, width, height, gap);
+  const desc = `Pyramid with ${tiers.length} tier${tiers.length === 1 ? "" : "s"} (${shape})`;
+  const warnedRef = React44.useRef(false);
+  const nodeEnv = globalThis.process?.env?.NODE_ENV;
+  if (nodeEnv !== "production" && !warnedRef.current && tiers.length > 7) {
+    warnedRef.current = true;
+    console.warn(
+      `[hex-core/Pyramid] ${tiers.length} tiers \u2014 labels become unreadable past ~7. Group adjacent tiers or switch to TreeMap / OrgChart.`
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-pyramid": true,
+      "data-shape": shape,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Pyramid chart" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-pyramid-tiers": true, children: laidOut.map((t) => {
+          const valueText = showValues && t.tier.value != null ? ` \xB7 ${t.tier.value.toLocaleString()}` : "";
+          const interactive = Boolean(onTierClick);
+          const handleActivate = () => onTierClick?.(t.tier);
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-pyramid-tier": true,
+              "data-depth": t.depth,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? `${t.tier.label}${valueText}` : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey3(e, handleActivate) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "polygon",
+                  {
+                    points: `${t.topLeft},${t.yTop} ${t.topRight},${t.yTop} ${t.bottomRight},${t.yBottom} ${t.bottomLeft},${t.yBottom}`,
+                    fill: pickChartHue(t.depth),
+                    fillOpacity: 0.85,
+                    stroke: "hsl(var(--background))",
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: width / 2,
+                    y: (t.yTop + t.yBottom) / 2,
+                    dy: "0.35em",
+                    textAnchor: "middle",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    fill: "hsl(var(--background))",
+                    style: {
+                      pointerEvents: "none",
+                      paintOrder: "stroke",
+                      stroke: "hsl(var(--foreground) / 0.45)",
+                      strokeWidth: 2
+                    },
+                    children: `${t.tier.label}${valueText}`
+                  }
+                )
+              ]
+            },
+            t.tier.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function layout8(tiers, shape, width, height, gap) {
+  if (tiers.length === 0) return [];
+  const usableHeight = height - gap * Math.max(0, tiers.length - 1);
+  const tierHeight = usableHeight / tiers.length;
+  const cx = width / 2;
+  const total = tiers.length;
+  const ratioAt = (i) => {
+    const t = total === 1 ? 0 : i / (total - 1);
+    return shape === "widening" ? 0.2 + 0.8 * t : 1 - 0.8 * t;
+  };
+  return tiers.map((tier, i) => {
+    const yTop = i * (tierHeight + gap);
+    const yBottom = yTop + tierHeight;
+    const topRatio = ratioAt(i);
+    const bottomRatio = i + 1 < total ? ratioAt(i + 1) : topRatio;
+    const topHalfWidth = width / 2 * topRatio;
+    const bottomHalfWidth = width / 2 * bottomRatio;
+    return {
+      tier,
+      depth: i,
+      topLeft: cx - topHalfWidth,
+      topRight: cx + topHalfWidth,
+      bottomLeft: cx - bottomHalfWidth,
+      bottomRight: cx + bottomHalfWidth,
+      yTop,
+      yBottom
+    };
+  });
+}
+function activateOnKey3(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+function Flowchart({
+  nodes,
+  edges,
+  direction = "vertical",
+  width = 720,
+  height = 480,
+  nodeWidth = 140,
+  nodeHeight = 48,
+  onNodeClick,
+  className,
+  ...rest
+}) {
+  const { nodes: laidOutNodes, edges: laidOutEdges } = React44.useMemo(
+    () => layout9(nodes, edges, direction, width, height, nodeWidth, nodeHeight),
+    [nodes, edges, direction, width, height, nodeWidth, nodeHeight]
+  );
+  const desc = `Flowchart with ${nodes.length} node${nodes.length === 1 ? "" : "s"} and ${edges.length} edge${edges.length === 1 ? "" : "s"}, laid out ${direction}`;
+  const arrowId = React44.useId().replace(/:/g, "-");
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-flowchart": true,
+      "data-direction": direction,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Flowchart" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+          "marker",
+          {
+            id: `hex-flowchart-arrow-${arrowId}`,
+            viewBox: "0 0 10 10",
+            refX: "10",
+            refY: "5",
+            markerWidth: "6",
+            markerHeight: "6",
+            orient: "auto-start-reverse",
+            children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "hsl(var(--muted-foreground))" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-flowchart-edges": true, children: laidOutEdges.map((e, i) => /* @__PURE__ */ jsxs("g", { "data-hex-flowchart-edge": true, children: [
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: edgePath(e.from, e.to, direction),
+              fill: "none",
+              stroke: "hsl(var(--muted-foreground))",
+              strokeOpacity: 0.7,
+              strokeWidth: 1.25,
+              markerEnd: `url(#hex-flowchart-arrow-${arrowId})`
+            }
+          ),
+          e.edge.label ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: (e.from.x + e.to.x) / 2,
+              y: (e.from.y + e.to.y) / 2 - 4,
+              textAnchor: "middle",
+              fontSize: 10,
+              fill: "hsl(var(--muted-foreground))",
+              style: {
+                paintOrder: "stroke"
+              },
+              stroke: "hsl(var(--background))",
+              strokeWidth: 3,
+              strokeLinejoin: "round",
+              children: e.edge.label
+            }
+          ) : null
+        ] }, `${e.edge.source}-${e.edge.target}-${i}`)) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-flowchart-nodes": true, children: laidOutNodes.map((n) => {
+          const shape = n.node.shape ?? "rect";
+          const interactive = Boolean(onNodeClick);
+          const handleActivate = () => onNodeClick?.(n.node);
+          const truncated = truncate2(n.node.label, Math.floor((nodeWidth - 16) / 7));
+          const isTruncated = truncated !== n.node.label;
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-flowchart-node": true,
+              "data-shape": shape,
+              "data-rank": n.rank,
+              transform: `translate(${n.x - nodeWidth / 2},${n.y - nodeHeight / 2})`,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? n.node.label : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey4(e, handleActivate) : void 0,
+              children: [
+                isTruncated ? /* @__PURE__ */ jsx("title", { children: n.node.label }) : null,
+                shape === "diamond" ? /* @__PURE__ */ jsx(
+                  "polygon",
+                  {
+                    points: `${nodeWidth / 2},0 ${nodeWidth},${nodeHeight / 2} ${nodeWidth / 2},${nodeHeight} 0,${nodeHeight / 2}`,
+                    fill: "hsl(var(--card))",
+                    stroke: "hsl(var(--border))",
+                    strokeWidth: 1
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    width: nodeWidth,
+                    height: nodeHeight,
+                    rx: shape === "round" ? nodeHeight / 2 : 6,
+                    ry: shape === "round" ? nodeHeight / 2 : 6,
+                    fill: "hsl(var(--card))",
+                    stroke: "hsl(var(--border))",
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: nodeWidth / 2,
+                    y: nodeHeight / 2,
+                    dy: "0.35em",
+                    textAnchor: "middle",
+                    fontSize: 12,
+                    fontWeight: 500,
+                    fill: "hsl(var(--foreground))",
+                    style: { pointerEvents: "none" },
+                    children: truncated
+                  }
+                )
+              ]
+            },
+            n.node.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function layout9(nodes, edges, direction, width, height, nodeWidth, nodeHeight) {
+  if (nodes.length === 0) return { nodes: [], edges: [] };
+  const byId = new Map(nodes.map((n) => [n.id, n]));
+  const ranks = computeRanks(nodes, edges, byId);
+  const maxRank = Math.max(...ranks.values(), 0);
+  const rankGroups = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const r = ranks.get(n.id) ?? 0;
+    const arr = rankGroups.get(r) ?? [];
+    arr.push(n.id);
+    rankGroups.set(r, arr);
+  }
+  const parentsOf = /* @__PURE__ */ new Map();
+  for (const n of nodes) parentsOf.set(n.id, []);
+  for (const e of edges) {
+    const arr = parentsOf.get(e.target);
+    if (arr && byId.has(e.source)) arr.push(e.source);
+  }
+  const orderInRank = /* @__PURE__ */ new Map();
+  for (let r = 0; r <= maxRank; r++) {
+    const group = rankGroups.get(r) ?? [];
+    if (r > 0) {
+      group.sort((a, b) => meanParentIndex(a, parentsOf, orderInRank) - meanParentIndex(b, parentsOf, orderInRank));
+    }
+    group.forEach((id, i) => orderInRank.set(id, i));
+  }
+  const positions = /* @__PURE__ */ new Map();
+  const margin = 32;
+  const usableMain = (direction === "vertical" ? height : width) - margin * 2;
+  const usableCross = (direction === "vertical" ? width : height) - margin * 2;
+  const rankCount = maxRank + 1;
+  const mainStep = rankCount > 1 ? usableMain / (rankCount - 1) : 0;
+  for (let r = 0; r <= maxRank; r++) {
+    const group = rankGroups.get(r) ?? [];
+    const crossStep = group.length > 0 ? usableCross / (group.length + 1) : 0;
+    group.forEach((id, i) => {
+      const cross = margin + crossStep * (i + 1);
+      const main = margin + mainStep * r;
+      if (direction === "vertical") {
+        positions.set(id, { x: cross, y: main, rank: r });
+      } else {
+        positions.set(id, { x: main, y: cross, rank: r });
+      }
+    });
+  }
+  const laidOutNodes = nodes.map((n) => {
+    const p = positions.get(n.id) ?? { x: 0, y: 0, rank: 0 };
+    return { node: n, x: p.x, y: p.y, rank: p.rank };
+  });
+  const laidOutEdges = edges.map((edge) => {
+    const sp = positions.get(edge.source);
+    const tp = positions.get(edge.target);
+    if (!sp || !tp) return null;
+    const from = direction === "vertical" ? { x: sp.x, y: sp.y + nodeHeight / 2 } : { x: sp.x + nodeWidth / 2, y: sp.y };
+    const to = direction === "vertical" ? { x: tp.x, y: tp.y - nodeHeight / 2 } : { x: tp.x - nodeWidth / 2, y: tp.y };
+    return { edge, from, to };
+  }).filter((e) => e !== null);
+  return { nodes: laidOutNodes, edges: laidOutEdges };
+}
+function meanParentIndex(id, parentsOf, orderInRank) {
+  const parents = parentsOf.get(id) ?? [];
+  if (parents.length === 0) return Number.POSITIVE_INFINITY;
+  let sum = 0;
+  let count = 0;
+  for (const p of parents) {
+    const idx = orderInRank.get(p);
+    if (idx != null) {
+      sum += idx;
+      count++;
+    }
+  }
+  return count === 0 ? Number.POSITIVE_INFINITY : sum / count;
+}
+function computeRanks(nodes, edges, byId) {
+  const ranks = /* @__PURE__ */ new Map();
+  const incoming = /* @__PURE__ */ new Map();
+  for (const n of nodes) incoming.set(n.id, []);
+  for (const e of edges) {
+    const arr = incoming.get(e.target);
+    if (arr && byId.has(e.source)) arr.push(e.source);
+  }
+  const memo = /* @__PURE__ */ new Map();
+  const visiting = /* @__PURE__ */ new Set();
+  const rankOf = (id) => {
+    const cached = memo.get(id);
+    if (cached !== void 0) return cached;
+    if (visiting.has(id)) return 0;
+    visiting.add(id);
+    try {
+      const node = byId.get(id);
+      if (node?.rank != null) {
+        memo.set(id, node.rank);
+        return node.rank;
+      }
+      const parents = incoming.get(id) ?? [];
+      const r = parents.length === 0 ? 0 : 1 + Math.max(...parents.map((p) => rankOf(p)));
+      memo.set(id, r);
+      return r;
+    } finally {
+      visiting.delete(id);
+    }
+  };
+  for (const n of nodes) ranks.set(n.id, rankOf(n.id));
+  return ranks;
+}
+function edgePath(from, to, direction) {
+  if (direction === "vertical") {
+    const my = (from.y + to.y) / 2;
+    return `M${from.x},${from.y} C${from.x},${my} ${to.x},${my} ${to.x},${to.y}`;
+  }
+  const mx = (from.x + to.x) / 2;
+  return `M${from.x},${from.y} C${mx},${from.y} ${mx},${to.y} ${to.x},${to.y}`;
+}
+function truncate2(s, max) {
+  if (s.length <= max) return s;
+  return `${s.slice(0, Math.max(1, max - 1))}\u2026`;
+}
+function activateOnKey4(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+function Venn({
+  sets,
+  size = 360,
+  onSetClick,
+  className,
+  ...rest
+}) {
+  const circles = React44.useMemo(() => layout10(sets, size), [sets, size]);
+  const desc = `Venn diagram with ${sets.length} set${sets.length === 1 ? "" : "s"}: ${sets.map((s) => s.label).join(", ") || "(empty)"}`;
+  const warnedRef = React44.useRef(false);
+  const nodeEnv = globalThis.process?.env?.NODE_ENV;
+  if (nodeEnv !== "production" && !warnedRef.current && (sets.length === 0 || sets.length > 3)) {
+    warnedRef.current = true;
+    console.warn(
+      `[hex-core/Venn] Got ${sets.length} sets \u2014 Venn supports 2 or 3. Use TreeMap or Matrix for higher-arity overlaps.`
+    );
+  }
+  if (sets.length === 0 || sets.length > 3) {
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ...rest,
+        "data-hex-venn": true,
+        "data-set-count": sets.length,
+        role: "img",
+        width: size,
+        height: size,
+        viewBox: `0 0 ${size} ${size}`,
+        className: cn("block", className),
+        children: [
+          /* @__PURE__ */ jsx("title", { children: "Venn diagram" }),
+          /* @__PURE__ */ jsx("desc", { children: desc }),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: size / 2,
+              y: size / 2,
+              textAnchor: "middle",
+              dy: "0.35em",
+              fontSize: 12,
+              fill: "hsl(var(--muted-foreground))",
+              children: sets.length === 0 ? "No sets" : `Venn supports 2\u20133 sets (got ${sets.length})`
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-venn": true,
+      "data-set-count": sets.length,
+      role: "img",
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Venn diagram" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-venn-sets": true, children: circles.map((c) => {
+          const interactive = Boolean(onSetClick);
+          const handleActivate = () => onSetClick?.(c.set);
+          return /* @__PURE__ */ jsx(
+            "g",
+            {
+              "data-hex-venn-set": true,
+              "data-depth": c.depth,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? c.set.label : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey5(e, handleActivate) : void 0,
+              children: /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: c.cx,
+                  cy: c.cy,
+                  r: c.r,
+                  fill: pickChartHue(c.depth),
+                  fillOpacity: 0.45,
+                  stroke: "hsl(var(--background))",
+                  strokeWidth: 1.5
+                }
+              )
+            },
+            c.set.id
+          );
+        }) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-venn-labels": true, children: circles.map((c) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            "data-hex-venn-label": true,
+            x: c.labelX,
+            y: c.labelY,
+            textAnchor: "middle",
+            dy: "0.35em",
+            fontSize: 12,
+            fontWeight: 600,
+            fill: "hsl(var(--foreground))",
+            style: { paintOrder: "stroke", pointerEvents: "none" },
+            stroke: "hsl(var(--background))",
+            strokeWidth: 3,
+            strokeLinejoin: "round",
+            children: `${c.set.label}${c.set.value != null ? ` (${c.set.value})` : ""}`
+          },
+          `label-${c.set.id}`
+        )) })
+      ]
+    }
+  );
+}
+function layout10(sets, size) {
+  if (sets.length === 0 || sets.length > 3) return [];
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = size * 0.22;
+  const sep = size * 0.12;
+  if (sets.length === 1) {
+    return [{ set: sets[0], cx, cy, r, labelX: cx, labelY: cy - r - 8, depth: 0 }];
+  }
+  if (sets.length === 2) {
+    return sets.map((s, i) => {
+      const dx = i === 0 ? -sep : sep;
+      return {
+        set: s,
+        cx: cx + dx,
+        cy,
+        r,
+        labelX: cx + dx + (i === 0 ? -r * 0.6 : r * 0.6),
+        labelY: cy - r - 8,
+        depth: i
+      };
+    });
+  }
+  const verticalOffset = sep * 0.866;
+  const triangle = [
+    { dx: -sep, dy: verticalOffset },
+    // bottom-left
+    { dx: sep, dy: verticalOffset },
+    // bottom-right
+    { dx: 0, dy: -verticalOffset }
+    // top
+  ];
+  const LABEL_PUSH = 1.7;
+  const TOP_LABEL_NUDGE = -8;
+  const BOTTOM_LABEL_NUDGE = 16;
+  return sets.map((s, i) => {
+    const { dx, dy } = triangle[i] ?? triangle[0];
+    const isTop = i === 2;
+    return {
+      set: s,
+      cx: cx + dx,
+      cy: cy + dy,
+      r,
+      labelX: cx + dx * LABEL_PUSH,
+      labelY: cy + dy * LABEL_PUSH + (isTop ? TOP_LABEL_NUDGE : BOTTOM_LABEL_NUDGE),
+      depth: i
+    };
+  });
+}
+function activateOnKey5(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+function Chord({
+  nodes,
+  matrix,
+  size = 480,
+  padAngle = 0.04,
+  onChordHover,
+  onNodeClick,
+  className,
+  ...rest
+}) {
+  const [d3c, setD3c] = React44.useState(null);
+  const [d3s, setD3s] = React44.useState(null);
+  const [importError, setImportError] = React44.useState(false);
+  React44.useEffect(() => {
+    let cancelled = false;
+    void Promise.all([import('d3-chord'), import('d3-shape')]).then(
+      ([c, s]) => {
+        if (cancelled) return;
+        setD3c(c);
+        setD3s(s);
+      },
+      () => {
+        if (!cancelled) setImportError(true);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  const laidOut = React44.useMemo(() => {
+    if (!d3c || !d3s) return null;
+    return layout11(d3c, d3s, nodes, matrix, size, padAngle);
+  }, [d3c, d3s, nodes, matrix, size, padAngle]);
+  if (importError) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-hex-chord-error": true,
+        role: "alert",
+        className: cn(
+          "inline-flex items-center justify-center rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive",
+          className
+        ),
+        style: { width: size, height: size },
+        children: [
+          "Install ",
+          /* @__PURE__ */ jsx("code", { className: "mx-1", children: "d3-chord" }),
+          " to view this chord diagram."
+        ]
+      }
+    );
+  }
+  if (!laidOut) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-hex-chord-loading": true,
+        "aria-busy": "true",
+        "aria-label": "Loading chord diagram",
+        className: cn("inline-block bg-muted/20", className),
+        style: { width: size, height: size }
+      }
+    );
+  }
+  const { arcs, chords } = laidOut;
+  const desc = `Chord diagram with ${nodes.length} node${nodes.length === 1 ? "" : "s"} and ${chords.length} ribbon${chords.length === 1 ? "" : "s"}`;
+  const radius = size / 2;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-chord": true,
+      role: "img",
+      width: size,
+      height: size,
+      viewBox: `${-radius} ${-radius} ${size} ${size}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Chord diagram" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-chord-ribbons": true, children: chords.map((c, i) => {
+          const interactive = Boolean(onChordHover);
+          const payload = {
+            source: c.source,
+            target: c.target,
+            sourceValue: c.sourceValue,
+            targetValue: c.targetValue
+          };
+          const fireHover = (chord) => onChordHover?.(chord);
+          return /* @__PURE__ */ jsx(
+            "path",
+            {
+              "data-hex-chord-ribbon": true,
+              d: c.d,
+              fill: pickChartHue(c.sourceIdx),
+              fillOpacity: 0.55,
+              stroke: "hsl(var(--background))",
+              strokeWidth: 0.5,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? `Flow from ${c.source.label} to ${c.target.label}, value ${c.sourceValue}; reverse value ${c.targetValue}` : void 0,
+              style: {
+                cursor: interactive ? "pointer" : void 0,
+                transition: "fill-opacity 120ms ease"
+              },
+              onMouseEnter: interactive ? () => fireHover(payload) : void 0,
+              onMouseLeave: interactive ? () => fireHover(null) : void 0,
+              onFocus: interactive ? () => fireHover(payload) : void 0,
+              onBlur: interactive ? () => fireHover(null) : void 0
+            },
+            `${c.source.id}-${c.target.id}-${i}`
+          );
+        }) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-chord-arcs": true, children: arcs.map((a) => {
+          const interactive = Boolean(onNodeClick);
+          const handleActivate = () => onNodeClick?.(a.node);
+          const flip = a.labelAngle > Math.PI / 2 && a.labelAngle < 3 * Math.PI / 2;
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-chord-arc": true,
+              "data-depth": a.depth,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? a.node.label : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey6(e, handleActivate) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: a.d,
+                    fill: pickChartHue(a.depth),
+                    stroke: "hsl(var(--background))",
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: a.labelX,
+                    y: a.labelY,
+                    textAnchor: flip ? "end" : "start",
+                    dy: "0.35em",
+                    transform: flip ? `rotate(${a.labelAngle * 180 / Math.PI - 270} ${a.labelX} ${a.labelY})` : `rotate(${a.labelAngle * 180 / Math.PI - 90} ${a.labelX} ${a.labelY})`,
+                    fontSize: 11,
+                    fill: "hsl(var(--foreground))",
+                    style: { pointerEvents: "none" },
+                    children: a.node.label
+                  }
+                )
+              ]
+            },
+            a.node.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function layout11(d3c, d3s, nodes, matrix, size, padAngle) {
+  const longestLabel = nodes.reduce((m, n) => Math.max(m, n.label.length), 0);
+  const labelMargin = Math.max(40, longestLabel * 6 + 16);
+  const radius = size / 2 - labelMargin;
+  const innerRadius = radius - 12;
+  const outerRadius = radius;
+  const chordGen = d3c.chord().padAngle(padAngle).sortSubgroups((a, b) => a < b ? 1 : a > b ? -1 : 0);
+  const result = chordGen(matrix);
+  const arc = d3s.arc().innerRadius(innerRadius).outerRadius(outerRadius);
+  const ribbon = d3c.ribbon().radius(innerRadius);
+  const arcs = result.groups.map((g) => {
+    const node = nodes[g.index] ?? { id: `_${g.index}`, label: `Set ${g.index}` };
+    const midAngle = (g.startAngle + g.endAngle) / 2;
+    const labelRadius = outerRadius + 6;
+    return {
+      node,
+      depth: g.index,
+      d: arc({ startAngle: g.startAngle, endAngle: g.endAngle, innerRadius, outerRadius }) ?? "",
+      labelX: labelRadius * Math.sin(midAngle),
+      labelY: -labelRadius * Math.cos(midAngle),
+      labelAngle: midAngle
+    };
+  });
+  const buildRibbonInput = (c) => ({
+    source: { ...c.source, radius: innerRadius },
+    target: { ...c.target, radius: innerRadius }
+  });
+  const chords = result.filter((c) => c.source.value > 0 || c.target.value > 0).map((c) => ({
+    source: nodes[c.source.index] ?? { id: `_${c.source.index}`, label: `Set ${c.source.index}` },
+    target: nodes[c.target.index] ?? { id: `_${c.target.index}`, label: `Set ${c.target.index}` },
+    sourceValue: c.source.value,
+    targetValue: c.target.value,
+    d: ribbon(buildRibbonInput(c)) ?? "",
+    sourceIdx: c.source.index
+  }));
+  return { arcs, chords };
+}
+function activateOnKey6(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+function Arc({
+  nodes,
+  edges,
+  width = 720,
+  height = 360,
+  nodeRadius = 5,
+  onEdgeHover,
+  onNodeClick,
+  className,
+  ...rest
+}) {
+  const laidOut = React44.useMemo(() => layout12(nodes, edges, width, height), [nodes, edges, width, height]);
+  const desc = `Arc diagram with ${nodes.length} node${nodes.length === 1 ? "" : "s"} and ${edges.length} edge${edges.length === 1 ? "" : "s"}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-arc": true,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Arc diagram" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-arc-edges": true, fill: "none", children: laidOut.edges.map((e, i) => {
+          const interactive = Boolean(onEdgeHover);
+          const fireHover = (edge) => onEdgeHover?.(edge);
+          return /* @__PURE__ */ jsx(
+            "path",
+            {
+              "data-hex-arc-edge": true,
+              d: e.d,
+              stroke: "hsl(var(--primary))",
+              strokeOpacity: 0.5,
+              strokeWidth: Math.max(1, e.width),
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? `Edge between ${e.edge.source} and ${e.edge.target}${e.edge.value != null ? `, value ${e.edge.value}` : ""}` : void 0,
+              style: {
+                cursor: interactive ? "pointer" : void 0,
+                transition: "stroke-opacity 120ms ease"
+              },
+              onMouseEnter: interactive ? () => fireHover(e.edge) : void 0,
+              onMouseLeave: interactive ? () => fireHover(null) : void 0,
+              onFocus: interactive ? () => fireHover(e.edge) : void 0,
+              onBlur: interactive ? () => fireHover(null) : void 0
+            },
+            `${e.edge.source}-${e.edge.target}-${i}`
+          );
+        }) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-arc-nodes": true, children: laidOut.nodes.map((n) => {
+          const interactive = Boolean(onNodeClick);
+          const handleActivate = () => onNodeClick?.(n.node);
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-arc-node": true,
+              "data-depth": n.depth,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? n.node.label : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey7(e, handleActivate) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: n.x,
+                    cy: n.y,
+                    r: nodeRadius,
+                    fill: "hsl(var(--primary))",
+                    stroke: "hsl(var(--background))",
+                    strokeWidth: 2
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: n.x,
+                    y: n.y + nodeRadius + 14,
+                    textAnchor: "middle",
+                    fontSize: 10,
+                    fill: "hsl(var(--foreground))",
+                    style: { pointerEvents: "none" },
+                    children: n.node.label
+                  }
+                )
+              ]
+            },
+            n.node.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function layout12(nodes, edges, width, height) {
+  if (nodes.length === 0) return { nodes: [], edges: [] };
+  const margin = 32;
+  const baselineY = height - 32;
+  const usable = width - margin * 2;
+  const step = nodes.length > 1 ? usable / (nodes.length - 1) : 0;
+  const positions = /* @__PURE__ */ new Map();
+  const laidOutNodes = nodes.map((node, i) => {
+    const x = nodes.length === 1 ? width / 2 : margin + step * i;
+    positions.set(node.id, { x, y: baselineY, index: i });
+    return { node, x, y: baselineY, depth: i };
+  });
+  const maxValue = edges.reduce((m, e) => Math.max(m, e.value ?? 1), 1);
+  const laidOutEdges = edges.map((edge) => {
+    const sp = positions.get(edge.source);
+    const tp = positions.get(edge.target);
+    if (!sp || !tp) return null;
+    const [a, b] = sp.x < tp.x ? [sp, tp] : [tp, sp];
+    const span = (b.x - a.x) / 2;
+    const ctrlY = baselineY - span;
+    const d = `M${a.x},${baselineY} C${a.x},${ctrlY} ${b.x},${ctrlY} ${b.x},${baselineY}`;
+    return {
+      edge,
+      d,
+      width: 1 + (edge.value ?? 1) / maxValue * 3
+    };
+  }).filter((e) => e !== null);
+  return { nodes: laidOutNodes, edges: laidOutEdges };
+}
+function activateOnKey7(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+var MIN_CELL_SIZE_FOR_VALUE = 28;
+function Matrix({
+  nodes,
+  matrix,
+  size = 480,
+  labelMargin = 80,
+  showValues = true,
+  onCellHover,
+  onCellClick,
+  className,
+  ...rest
+}) {
+  const cells = React44.useMemo(() => layout13(nodes, matrix, size, labelMargin), [nodes, matrix, size, labelMargin]);
+  const desc = `Matrix with ${nodes.length} node${nodes.length === 1 ? "" : "s"} (${nodes.length}\xD7${nodes.length} cells)`;
+  const cellSize = nodes.length > 0 ? (size - labelMargin) / nodes.length : 0;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-matrix": true,
+      role: "img",
+      width: size,
+      height: size,
+      viewBox: `0 0 ${size} ${size}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Adjacency matrix" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("g", { "data-hex-matrix-rows": true, children: nodes.map((n, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: labelMargin - 4,
+            y: labelMargin + cellSize * i + cellSize / 2,
+            dy: "0.35em",
+            textAnchor: "end",
+            fontSize: 10,
+            fill: "hsl(var(--foreground))",
+            children: n.label
+          },
+          `row-${n.id}`
+        )) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-matrix-cols": true, children: nodes.map((n, i) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: labelMargin + cellSize * i + cellSize / 2,
+            y: labelMargin - 4,
+            textAnchor: "end",
+            fontSize: 10,
+            fill: "hsl(var(--foreground))",
+            transform: `rotate(-45 ${labelMargin + cellSize * i + cellSize / 2} ${labelMargin - 4})`,
+            children: n.label
+          },
+          `col-${n.id}`
+        )) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-matrix-cells": true, children: cells.map((c) => {
+          const interactive = Boolean(onCellHover || onCellClick);
+          const cellPayload = { row: c.row, col: c.col, value: c.value };
+          const fireHover = (cell) => onCellHover?.(cell);
+          const handleActivate = () => onCellClick?.(cellPayload);
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-matrix-cell": true,
+              "data-row": c.rowIndex,
+              "data-col": c.colIndex,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? `${c.row.label} \u2192 ${c.col.label}: ${c.value}` : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onMouseEnter: onCellHover ? () => fireHover(cellPayload) : void 0,
+              onMouseLeave: onCellHover ? () => fireHover(null) : void 0,
+              onFocus: onCellHover ? () => fireHover(cellPayload) : void 0,
+              onBlur: onCellHover ? () => fireHover(null) : void 0,
+              onClick: onCellClick ? handleActivate : void 0,
+              onKeyDown: onCellClick ? (e) => activateOnKey8(e, handleActivate) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: c.x,
+                    y: c.y,
+                    width: cellSize,
+                    height: cellSize,
+                    fill: "hsl(var(--chart-1, var(--primary)))",
+                    fillOpacity: 0.08 + 0.87 * c.intensity,
+                    stroke: "hsl(var(--background))",
+                    strokeWidth: 0.5
+                  }
+                ),
+                showValues && cellSize > MIN_CELL_SIZE_FOR_VALUE && c.value !== 0 ? /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: c.x + cellSize / 2,
+                    y: c.y + cellSize / 2,
+                    dy: "0.35em",
+                    textAnchor: "middle",
+                    fontSize: 9,
+                    fill: c.intensity > 0.55 ? "hsl(var(--background))" : "hsl(var(--foreground))",
+                    style: { pointerEvents: "none" },
+                    children: c.value
+                  }
+                ) : null
+              ]
+            },
+            `${c.rowIndex}-${c.colIndex}`
+          );
+        }) })
+      ]
+    }
+  );
+}
+function layout13(nodes, matrix, size, labelMargin) {
+  if (nodes.length === 0) return [];
+  const cellSize = (size - labelMargin) / nodes.length;
+  let maxValue = 0;
+  for (const row of matrix) {
+    for (const v of row) if (v > maxValue) maxValue = v;
+  }
+  const cells = [];
+  for (let i = 0; i < nodes.length; i++) {
+    for (let j = 0; j < nodes.length; j++) {
+      const value = matrix[i]?.[j] ?? 0;
+      cells.push({
+        row: nodes[i],
+        col: nodes[j],
+        rowIndex: i,
+        colIndex: j,
+        value,
+        x: labelMargin + cellSize * j,
+        y: labelMargin + cellSize * i,
+        intensity: maxValue > 0 ? value / maxValue : 0
+      });
+    }
+  }
+  return cells;
+}
+function activateOnKey8(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+function TimeAxis({
+  events,
+  start,
+  end,
+  width = 720,
+  height = 200,
+  tickCount = 6,
+  onEventClick,
+  className,
+  ...rest
+}) {
+  const laidOut = React44.useMemo(
+    () => layout14(events, start, end, width, height, tickCount),
+    [events, start, end, width, height, tickCount]
+  );
+  const desc = events.length === 0 ? "Empty time axis" : `Time axis with ${events.length} event${events.length === 1 ? "" : "s"}, range ${laidOut.startLabel} to ${laidOut.endLabel}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-time-axis": true,
+      role: "img",
+      width,
+      height,
+      viewBox: `0 0 ${width} ${height}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Time axis" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsxs("g", { "data-hex-time-axis-axis": true, children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: laidOut.axisLeft,
+              x2: laidOut.axisRight,
+              y1: laidOut.axisY,
+              y2: laidOut.axisY,
+              stroke: "hsl(var(--muted-foreground))",
+              strokeWidth: 1
+            }
+          ),
+          laidOut.ticks.map((tick, i) => /* @__PURE__ */ jsxs("g", { "data-hex-time-axis-tick": true, children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: tick.x,
+                x2: tick.x,
+                y1: laidOut.axisY - 4,
+                y2: laidOut.axisY + 4,
+                stroke: "hsl(var(--muted-foreground))",
+                strokeWidth: 1
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: tick.x,
+                y: laidOut.axisY + 18,
+                textAnchor: "middle",
+                fontSize: 10,
+                fill: "hsl(var(--muted-foreground))",
+                children: tick.label
+              }
+            )
+          ] }, `tick-${i}`))
+        ] }),
+        /* @__PURE__ */ jsx("g", { "data-hex-time-axis-events": true, children: laidOut.events.map((e) => {
+          const interactive = Boolean(onEventClick);
+          const handleActivate = () => onEventClick?.(e.event);
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-time-axis-event": true,
+              "data-row": e.rowIndex,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? `${e.event.label} on ${formatDate(toDate(e.event.date))}` : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (k) => activateOnKey9(k, handleActivate) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: e.x,
+                    x2: e.x,
+                    y1: e.y,
+                    y2: laidOut.axisY,
+                    stroke: "hsl(var(--muted-foreground))",
+                    strokeOpacity: 0.65,
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    cx: e.x,
+                    cy: e.y,
+                    r: 5,
+                    fill: "hsl(var(--primary))",
+                    stroke: "hsl(var(--background))",
+                    strokeWidth: 2
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: e.x + 8,
+                    y: e.y + 4,
+                    fontSize: 11,
+                    fill: "hsl(var(--foreground))",
+                    style: { paintOrder: "stroke", pointerEvents: "none" },
+                    stroke: "hsl(var(--background))",
+                    strokeWidth: 3,
+                    strokeLinejoin: "round",
+                    children: e.event.label
+                  }
+                )
+              ]
+            },
+            e.event.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function layout14(events, start, end, width, height, tickCount) {
+  const margin = 32;
+  const axisLeft = margin;
+  const axisRight = width - margin;
+  const axisY = height - 40;
+  const usableWidth = axisRight - axisLeft;
+  const validEvents = events.filter((e) => Number.isFinite(toDate(e.date).getTime()));
+  if (validEvents.length === 0) {
+    return {
+      events: [],
+      ticks: [],
+      axisY,
+      axisLeft,
+      axisRight,
+      startLabel: "\u2014",
+      endLabel: "\u2014"
+    };
+  }
+  const dates = validEvents.map((e) => toDate(e.date).getTime());
+  const explicitMin = start != null ? toDate(start).getTime() : NaN;
+  const explicitMax = end != null ? toDate(end).getTime() : NaN;
+  const minTs = Number.isFinite(explicitMin) ? explicitMin : Math.min(...dates);
+  const maxTs = Number.isFinite(explicitMax) ? explicitMax : Math.max(...dates);
+  const span = Math.max(1, maxTs - minTs);
+  const tToX = (t) => axisLeft + (t - minTs) / span * usableWidth;
+  const MIN_GAP_PX = 48;
+  const ROW_HEIGHT_PX = 22;
+  const maxRows = Math.max(1, Math.floor((axisY - 10 - 24) / ROW_HEIGHT_PX) + 1);
+  const rowsLastX = [];
+  const positioned = validEvents.map((event) => ({ event, t: toDate(event.date).getTime() })).sort((a, b) => a.t - b.t || a.event.id.localeCompare(b.event.id)).map(({ event, t }) => {
+    const x = tToX(t);
+    let rowIndex = rowsLastX.findIndex((lastX) => x - lastX >= MIN_GAP_PX);
+    if (rowIndex === -1) {
+      if (rowsLastX.length < maxRows) {
+        rowIndex = rowsLastX.length;
+        rowsLastX.push(x);
+      } else {
+        rowIndex = maxRows - 1;
+        rowsLastX[rowIndex] = x;
+      }
+    } else {
+      rowsLastX[rowIndex] = x;
+    }
+    return { event, x, y: 24 + rowIndex * ROW_HEIGHT_PX, rowIndex };
+  });
+  const rawTicks = [];
+  for (let i = 0; i < tickCount; i++) {
+    const t = minTs + i / Math.max(1, tickCount - 1) * span;
+    rawTicks.push({ x: tToX(t), label: formatTick(new Date(t), span) });
+  }
+  const ticks = rawTicks.map((t, i) => ({
+    x: t.x,
+    label: i > 0 && rawTicks[i - 1]?.label === t.label ? "" : t.label
+  }));
+  return {
+    events: positioned,
+    ticks,
+    axisY,
+    axisLeft,
+    axisRight,
+    startLabel: formatDate(new Date(minTs)),
+    endLabel: formatDate(new Date(maxTs))
+  };
+}
+function toDate(v) {
+  if (v instanceof Date) return v;
+  if (typeof v === "number") return new Date(v);
+  return new Date(v);
+}
+function formatDate(d) {
+  if (Number.isNaN(d.getTime())) return "\u2014";
+  return d.toISOString().slice(0, 10);
+}
+function formatTick(d, spanMs) {
+  if (Number.isNaN(d.getTime())) return "\u2014";
+  const ONE_DAY = 24 * 60 * 60 * 1e3;
+  if (spanMs <= 7 * ONE_DAY) {
+    return d.toISOString().slice(0, 10);
+  }
+  if (spanMs <= 90 * ONE_DAY) {
+    return d.toISOString().slice(5, 10);
+  }
+  if (spanMs <= 730 * ONE_DAY) {
+    return d.toISOString().slice(0, 7);
+  }
+  return String(d.getUTCFullYear());
+}
+function activateOnKey9(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+var HEADER_HEIGHT = 40;
+var ROW_PADDING = 6;
+function Gantt({
+  tasks,
+  width = 800,
+  rowHeight = 32,
+  labelMargin = 140,
+  tickCount = 6,
+  onTaskClick,
+  className,
+  ...rest
+}) {
+  const laidOut = React44.useMemo(
+    () => layout15(tasks, width, rowHeight, labelMargin, tickCount),
+    [tasks, width, rowHeight, labelMargin, tickCount]
+  );
+  const totalHeight = HEADER_HEIGHT + tasks.length * rowHeight + ROW_PADDING;
+  const desc = `Gantt with ${tasks.length} task${tasks.length === 1 ? "" : "s"}, range ${laidOut.startLabel} to ${laidOut.endLabel}`;
+  const arrowId = React44.useId().replace(/:/g, "-");
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-gantt": true,
+      role: "img",
+      width,
+      height: totalHeight,
+      viewBox: `0 0 ${width} ${totalHeight}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Gantt chart" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+          "marker",
+          {
+            id: `hex-gantt-arrow-${arrowId}`,
+            viewBox: "0 0 10 10",
+            refX: "10",
+            refY: "5",
+            markerWidth: "5",
+            markerHeight: "5",
+            orient: "auto-start-reverse",
+            children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "hsl(var(--muted-foreground))" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("g", { "data-hex-gantt-axis": true, children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: labelMargin,
+              x2: width - 16,
+              y1: HEADER_HEIGHT - 8,
+              y2: HEADER_HEIGHT - 8,
+              stroke: "hsl(var(--muted-foreground))",
+              strokeWidth: 1
+            }
+          ),
+          laidOut.ticks.map((t, i) => /* @__PURE__ */ jsxs("g", { "data-hex-gantt-tick": true, children: [
+            /* @__PURE__ */ jsx(
+              "line",
+              {
+                x1: t.x,
+                x2: t.x,
+                y1: HEADER_HEIGHT - 8,
+                y2: totalHeight - 4,
+                stroke: "hsl(var(--muted-foreground))",
+                strokeOpacity: 0.15,
+                strokeWidth: 1
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: t.x,
+                y: HEADER_HEIGHT - 14,
+                textAnchor: "middle",
+                fontSize: 10,
+                fill: "hsl(var(--muted-foreground))",
+                children: t.label
+              }
+            )
+          ] }, `tick-${i}`))
+        ] }),
+        /* @__PURE__ */ jsx("g", { "data-hex-gantt-labels": true, children: laidOut.tasks.map((t) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: labelMargin - 8,
+            y: t.y + t.h / 2,
+            dy: "0.35em",
+            textAnchor: "end",
+            fontSize: 11,
+            fill: "hsl(var(--foreground))",
+            children: t.task.label
+          },
+          `label-${t.task.id}`
+        )) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-gantt-deps": true, fill: "none", children: laidOut.deps.map((d) => {
+          const ELBOW = 8;
+          const needsJog = d.to.x < d.from.x + ELBOW;
+          const path = needsJog ? `M${d.from.x},${d.from.y} L${d.from.x + ELBOW},${d.from.y} L${d.from.x + ELBOW},${d.to.y} L${d.to.x},${d.to.y}` : `M${d.from.x},${d.from.y} L${(d.from.x + d.to.x) / 2},${d.from.y} L${(d.from.x + d.to.x) / 2},${d.to.y} L${d.to.x},${d.to.y}`;
+          return /* @__PURE__ */ jsx(
+            "path",
+            {
+              "data-hex-gantt-dep": true,
+              d: path,
+              stroke: "hsl(var(--muted-foreground))",
+              strokeOpacity: 0.55,
+              strokeWidth: 1,
+              markerEnd: `url(#hex-gantt-arrow-${arrowId})`
+            },
+            d.id
+          );
+        }) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-gantt-tasks": true, children: laidOut.tasks.map((t) => {
+          const interactive = Boolean(onTaskClick);
+          const handleActivate = () => onTaskClick?.(t.task);
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-gantt-task": true,
+              "data-row": t.rowIndex,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? `${t.task.label}, ${formatDate2(toDate2(t.task.start))} to ${formatDate2(toDate2(t.task.end))}${t.task.progress != null ? `, ${Math.round((t.task.progress ?? 0) * 100)}% complete` : ""}` : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey10(e, handleActivate) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: t.x,
+                    y: t.y,
+                    width: Math.max(2, t.w),
+                    height: t.h,
+                    rx: 4,
+                    ry: 4,
+                    fill: "hsl(var(--primary))",
+                    fillOpacity: 0.25,
+                    stroke: "hsl(var(--primary))",
+                    strokeWidth: 1
+                  }
+                ),
+                t.progressW > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "rect",
+                    {
+                      x: t.x,
+                      y: t.y,
+                      width: t.progressW,
+                      height: t.h,
+                      rx: 4,
+                      ry: 4,
+                      fill: "hsl(var(--primary))",
+                      fillOpacity: 0.7
+                    }
+                  ),
+                  t.progressW < t.w - 0.5 ? /* @__PURE__ */ jsx(
+                    "line",
+                    {
+                      x1: t.x + t.progressW,
+                      x2: t.x + t.progressW,
+                      y1: t.y,
+                      y2: t.y + t.h,
+                      stroke: "hsl(var(--primary))",
+                      strokeWidth: 1
+                    }
+                  ) : null
+                ] }) : null
+              ]
+            },
+            t.task.id
+          );
+        }) })
+      ]
+    }
+  );
+}
+function layout15(tasks, width, rowHeight, labelMargin, tickCount) {
+  if (tasks.length === 0) {
+    return { tasks: [], deps: [], ticks: [], startLabel: "\u2014", endLabel: "\u2014" };
+  }
+  const axisLeft = labelMargin;
+  const axisRight = width - 16;
+  const usable = axisRight - axisLeft;
+  const allTimes = tasks.flatMap((t) => [toDate2(t.start).getTime(), toDate2(t.end).getTime()]).filter((t) => Number.isFinite(t));
+  if (allTimes.length === 0) {
+    return { tasks: [], deps: [], ticks: [], startLabel: "\u2014", endLabel: "\u2014" };
+  }
+  const minTs = Math.min(...allTimes);
+  const maxTs = Math.max(...allTimes);
+  const span = Math.max(1, maxTs - minTs);
+  const tToX = (t) => axisLeft + (t - minTs) / span * usable;
+  const laidOutTasks = tasks.map((task, i) => {
+    const startTs = toDate2(task.start).getTime();
+    const endTs = toDate2(task.end).getTime();
+    const x = tToX(startTs);
+    const w = Math.max(0, tToX(endTs) - x);
+    const y = HEADER_HEIGHT + i * rowHeight + ROW_PADDING / 2;
+    const h = rowHeight - ROW_PADDING;
+    const progress = clamp01(task.progress ?? 0);
+    return {
+      task,
+      rowIndex: i,
+      x,
+      y,
+      w,
+      h,
+      progressW: w * progress
+    };
+  });
+  const byId = new Map(laidOutTasks.map((t) => [t.task.id, t]));
+  const deps = [];
+  laidOutTasks.forEach((t) => {
+    (t.task.dependencies ?? []).forEach((depId, k) => {
+      const from = byId.get(depId);
+      if (!from) return;
+      deps.push({
+        from: { x: from.x + from.w, y: from.y + from.h / 2 },
+        to: { x: t.x, y: t.y + t.h / 2 },
+        id: `${depId}-${t.task.id}-${k}`
+      });
+    });
+  });
+  const rawTicks = [];
+  for (let i = 0; i < tickCount; i++) {
+    const ts = minTs + i / Math.max(1, tickCount - 1) * span;
+    rawTicks.push({ x: tToX(ts), label: formatTick2(new Date(ts), span) });
+  }
+  const ticks = rawTicks.map((t, i) => ({
+    x: t.x,
+    label: i > 0 && rawTicks[i - 1]?.label === t.label ? "" : t.label
+  }));
+  return {
+    tasks: laidOutTasks,
+    deps,
+    ticks,
+    startLabel: formatDate2(new Date(minTs)),
+    endLabel: formatDate2(new Date(maxTs))
+  };
+}
+function toDate2(v) {
+  if (v instanceof Date) return v;
+  if (typeof v === "number") return new Date(v);
+  return new Date(v);
+}
+function clamp01(v) {
+  return v < 0 ? 0 : v > 1 ? 1 : v;
+}
+function formatDate2(d) {
+  if (Number.isNaN(d.getTime())) return "\u2014";
+  return d.toISOString().slice(0, 10);
+}
+function formatTick2(d, spanMs) {
+  if (Number.isNaN(d.getTime())) return "\u2014";
+  const ONE_DAY = 24 * 60 * 60 * 1e3;
+  if (spanMs <= 90 * ONE_DAY) return d.toISOString().slice(5, 10);
+  if (spanMs <= 730 * ONE_DAY) return d.toISOString().slice(0, 7);
+  return String(d.getUTCFullYear());
+}
+function activateOnKey10(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+var HEADER_PADDING = 16;
+var MESSAGE_TOP_PADDING = 24;
+function Sequence({
+  actors,
+  messages,
+  width = 720,
+  headerHeight = 40,
+  messageGap = 36,
+  onActorClick,
+  onMessageClick,
+  className,
+  ...rest
+}) {
+  const laidOut = React44.useMemo(
+    () => layout16(actors, messages, width, headerHeight, messageGap),
+    [actors, messages, width, headerHeight, messageGap]
+  );
+  const desc = `Sequence diagram with ${actors.length} actor${actors.length === 1 ? "" : "s"} and ${messages.length} message${messages.length === 1 ? "" : "s"}`;
+  const arrowId = React44.useId().replace(/:/g, "-");
+  const SELF_CALL_DROP = Math.min(14, Math.max(6, messageGap * 0.4));
+  const SELF_CALL_OUT = 28;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...rest,
+      "data-hex-sequence": true,
+      role: "img",
+      width,
+      height: laidOut.totalHeight,
+      viewBox: `0 0 ${width} ${laidOut.totalHeight}`,
+      className: cn("block", className),
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Sequence diagram" }),
+        /* @__PURE__ */ jsx("desc", { children: desc }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+          "marker",
+          {
+            id: `hex-sequence-arrow-${arrowId}`,
+            viewBox: "0 0 10 10",
+            refX: "10",
+            refY: "5",
+            markerWidth: "6",
+            markerHeight: "6",
+            orient: "auto-start-reverse",
+            children: /* @__PURE__ */ jsx("path", { d: "M 0 0 L 10 5 L 0 10 z", fill: "hsl(var(--foreground))" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-sequence-lifelines": true, children: laidOut.actors.map((a) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            "data-hex-sequence-lifeline": true,
+            x1: a.x,
+            x2: a.x,
+            y1: headerHeight,
+            y2: laidOut.totalHeight - 8,
+            stroke: "hsl(var(--muted-foreground))",
+            strokeOpacity: 0.7,
+            strokeDasharray: "3 4",
+            strokeWidth: 1
+          },
+          `lifeline-${a.actor.id}`
+        )) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-sequence-actors": true, children: laidOut.actors.map((a) => {
+          const interactive = Boolean(onActorClick);
+          const handleActivate = () => onActorClick?.(a.actor);
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-sequence-actor": true,
+              "data-depth": a.depth,
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? a.actor.label : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey11(e, handleActivate) : void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: a.x - 64,
+                    y: 4,
+                    width: 128,
+                    height: headerHeight - 8,
+                    rx: 4,
+                    ry: 4,
+                    fill: "hsl(var(--card))",
+                    stroke: "hsl(var(--border))",
+                    strokeWidth: 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: a.x,
+                    y: headerHeight / 2,
+                    dy: "0.35em",
+                    textAnchor: "middle",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    fill: "hsl(var(--foreground))",
+                    style: { pointerEvents: "none" },
+                    children: a.actor.label
+                  }
+                )
+              ]
+            },
+            a.actor.id
+          );
+        }) }),
+        /* @__PURE__ */ jsx("g", { "data-hex-sequence-messages": true, children: laidOut.messages.map((m, i) => {
+          const interactive = Boolean(onMessageClick);
+          const handleActivate = () => onMessageClick?.(m.message);
+          const stroke = "hsl(var(--foreground))";
+          const dashed = m.message.type === "return" ? "4 3" : void 0;
+          const strokeWidth = m.message.type === "async" ? 1 : 1.25;
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              "data-hex-sequence-message": true,
+              "data-depth": m.depth,
+              "data-type": m.message.type ?? "sync",
+              role: interactive ? "button" : void 0,
+              tabIndex: interactive ? 0 : void 0,
+              "aria-label": interactive ? `Message ${i + 1}: from ${m.from.actor.label} to ${m.to.actor.label}${m.message.label ? `, "${m.message.label}"` : ""}` : void 0,
+              style: interactive ? { cursor: "pointer" } : void 0,
+              onClick: interactive ? handleActivate : void 0,
+              onKeyDown: interactive ? (e) => activateOnKey11(e, handleActivate) : void 0,
+              children: [
+                m.isSelfCall ? (
+                  // Loopback: out + down + back. Drop scales with messageGap.
+                  /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: `M${m.from.x},${m.y} L${m.from.x + SELF_CALL_OUT},${m.y} L${m.from.x + SELF_CALL_OUT},${m.y + SELF_CALL_DROP} L${m.from.x + 4},${m.y + SELF_CALL_DROP}`,
+                      fill: "none",
+                      stroke,
+                      strokeWidth,
+                      strokeDasharray: dashed,
+                      markerEnd: `url(#hex-sequence-arrow-${arrowId})`
+                    }
+                  )
+                ) : /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: m.from.x,
+                    x2: m.to.x,
+                    y1: m.y,
+                    y2: m.y,
+                    stroke,
+                    strokeWidth,
+                    strokeDasharray: dashed,
+                    markerEnd: `url(#hex-sequence-arrow-${arrowId})`
+                  }
+                ),
+                m.message.label ? /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: m.isSelfCall ? m.from.x + SELF_CALL_OUT + 4 : (m.from.x + m.to.x) / 2,
+                    y: m.y - 4,
+                    textAnchor: m.isSelfCall ? "start" : "middle",
+                    fontSize: 11,
+                    fill: "hsl(var(--foreground))",
+                    style: {
+                      paintOrder: "stroke",
+                      pointerEvents: "none"
+                    },
+                    stroke: "hsl(var(--background))",
+                    strokeWidth: 3,
+                    strokeLinejoin: "round",
+                    children: m.message.label
+                  }
+                ) : null
+              ]
+            },
+            `${m.message.from}-${m.message.to}-${i}`
+          );
+        }) })
+      ]
+    }
+  );
+}
+function layout16(actors, messages, width, headerHeight, messageGap) {
+  if (actors.length === 0) {
+    return { actors: [], messages: [], totalHeight: headerHeight + 16 };
+  }
+  const usableWidth = width - HEADER_PADDING * 2;
+  const colStep = actors.length > 1 ? usableWidth / (actors.length - 1) : 0;
+  const actorPositions = actors.map((a, i) => ({
+    actor: a,
+    x: HEADER_PADDING + colStep * i,
+    depth: i
+  }));
+  const byId = new Map(actorPositions.map((a) => [a.actor.id, a]));
+  const laidOutMessages = messages.map((message, i) => {
+    const from = byId.get(message.from);
+    const to = byId.get(message.to);
+    if (!from || !to) return null;
+    return {
+      message,
+      from,
+      to,
+      y: headerHeight + MESSAGE_TOP_PADDING + i * messageGap,
+      depth: i,
+      isSelfCall: message.from === message.to
+    };
+  }).filter((m) => m !== null);
+  const totalHeight = headerHeight + MESSAGE_TOP_PADDING + Math.max(0, laidOutMessages.length - 1) * messageGap + 32;
+  return { actors: actorPositions, messages: laidOutMessages, totalHeight };
+}
+function activateOnKey11(e, fn) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    fn();
+  }
+}
+function Flashcard({
+  front,
+  back,
+  defaultFlipped = false,
+  flipped: flippedProp,
+  onFlipChange,
+  width = 360,
+  height = 240,
+  flipDurationMs = 500,
+  className,
+  ...rest
+}) {
+  const [internalFlipped, setInternalFlipped] = React44.useState(defaultFlipped);
+  const isControlled = flippedProp !== void 0;
+  const flipped = isControlled ? flippedProp : internalFlipped;
+  const toggle = React44.useCallback(() => {
+    const next = !flipped;
+    if (!isControlled) setInternalFlipped(next);
+    onFlipChange?.(next);
+  }, [flipped, isControlled, onFlipChange]);
+  const handleKey = React44.useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    },
+    [toggle]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "data-hex-flashcard": true,
+      "data-flipped": flipped,
+      role: "button",
+      tabIndex: 0,
+      "aria-pressed": flipped,
+      "aria-label": flipped ? "Flashcard, back side. Activate to flip to front." : "Flashcard, front side. Activate to reveal back.",
+      onClick: toggle,
+      onKeyDown: handleKey,
+      className: cn(
+        "relative inline-block cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      style: {
+        width,
+        height,
+        perspective: 1e3
+      },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-hex-flashcard-inner": true,
+          className: "relative h-full w-full transition-transform",
+          style: {
+            transformStyle: "preserve-3d",
+            transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
+            transitionDuration: `${flipDurationMs}ms`
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-hex-flashcard-face": true,
+                "data-side": "front",
+                className: "absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm",
+                style: {
+                  backfaceVisibility: "hidden",
+                  WebkitBackfaceVisibility: "hidden"
+                },
+                children: front
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "data-hex-flashcard-face": true,
+                "data-side": "back",
+                className: "absolute inset-0 flex items-center justify-center rounded-lg border bg-card p-4 text-center text-card-foreground shadow-sm",
+                style: {
+                  backfaceVisibility: "hidden",
+                  WebkitBackfaceVisibility: "hidden",
+                  transform: "rotateY(180deg)"
+                },
+                children: back
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var AUTO_ID_PREFIX = "__hex_cloze_auto_";
+function normalize(parts) {
+  let blankIndex = 0;
+  const fragments = parts.map((p) => {
+    if (typeof p === "string") return p;
+    const id = p.id ?? `${AUTO_ID_PREFIX}${blankIndex}`;
+    const out = { hidden: p.hidden, id, blankIndex };
+    blankIndex++;
+    return out;
+  });
+  return { fragments, total: blankIndex };
+}
+function Cloze({ parts, revealMode = "click", onReveal, className, ...rest }) {
+  const { fragments, total } = React44.useMemo(() => normalize(parts), [parts]);
+  const [revealed, setRevealed] = React44.useState(() => /* @__PURE__ */ new Set());
+  const onRevealRef = React44.useRef(onReveal);
+  onRevealRef.current = onReveal;
+  const update = React44.useCallback((next) => {
+    setRevealed(next);
+    onRevealRef.current?.(Array.from(next));
+  }, []);
+  const toggleBlank = React44.useCallback(
+    (id) => {
+      const next = new Set(revealed);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      update(next);
+    },
+    [revealed, update]
+  );
+  const allRevealed = total > 0 && revealed.size === total;
+  const toggleAll = React44.useCallback(() => {
+    if (allRevealed) {
+      update(/* @__PURE__ */ new Set());
+    } else {
+      const next = /* @__PURE__ */ new Set();
+      for (const f of fragments) if (typeof f !== "string") next.add(f.id);
+      update(next);
+    }
+  }, [allRevealed, fragments, update]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      "data-hex-cloze": true,
+      "data-all-revealed": allRevealed,
+      className: cn("text-base leading-relaxed", className),
+      children: [
+        /* @__PURE__ */ jsx("p", { "data-hex-cloze-text": true, children: fragments.map((f, i) => {
+          if (typeof f === "string") return /* @__PURE__ */ jsx(React44.Fragment, { children: f }, `s-${i}`);
+          const isRevealed = revealed.has(f.id);
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-hex-cloze-blank": true,
+              "data-blank-id": f.id,
+              "data-revealed": isRevealed,
+              "aria-pressed": isRevealed,
+              "aria-label": isRevealed ? `Blank ${f.blankIndex + 1} revealed: ${f.hidden}. Activate to hide.` : `Blank ${f.blankIndex + 1} of ${total}. Activate to reveal.`,
+              onClick: () => toggleBlank(f.id),
+              className: cn(
+                "mx-0.5 inline-block rounded px-1.5 py-0 align-baseline transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                isRevealed ? "bg-primary/10 text-foreground underline decoration-primary decoration-dotted underline-offset-4" : "select-none bg-muted text-transparent"
+              ),
+              children: f.hidden
+            },
+            f.id
+          );
+        }) }),
+        revealMode === "all" && total > 0 ? /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-hex-cloze-toggle-all": true,
+            "aria-label": allRevealed ? "Hide all blanks" : "Reveal all blanks",
+            onClick: toggleAll,
+            className: "rounded-md border bg-background px-3 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: allRevealed ? "Hide all" : "Reveal all"
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function ImageOcclusion({
+  src,
+  alt,
+  regions,
+  onRegionReveal,
+  className,
+  ...rest
+}) {
+  const [revealed, setRevealed] = React44.useState(() => /* @__PURE__ */ new Set());
+  const onRevealRef = React44.useRef(onRegionReveal);
+  onRevealRef.current = onRegionReveal;
+  const warnedRef = React44.useRef(false);
+  const nodeEnv = globalThis.process?.env?.NODE_ENV;
+  if (nodeEnv !== "production" && !warnedRef.current) {
+    const offender = regions.find(
+      (r) => r.x < 0 || r.y < 0 || r.x + r.width > 1.0001 || r.y + r.height > 1.0001
+    );
+    if (offender) {
+      warnedRef.current = true;
+      console.warn(
+        `[hex-core/ImageOcclusion] Region "${offender.id}" coords escape [0, 1]. Pass fractions, not pixels \u2014 e.g. x: 0.42 (not 168).`
+      );
+    }
+  }
+  const toggle = React44.useCallback((id) => {
+    setRevealed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+        onRevealRef.current?.(id);
+      }
+      return next;
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      "data-hex-image-occlusion": true,
+      className: cn("relative inline-block", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt,
+            "data-hex-image-occlusion-img": true,
+            className: "block h-auto w-full select-none",
+            draggable: false
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-hex-image-occlusion-overlay": true,
+            className: "pointer-events-none absolute inset-0",
+            children: regions.map((r, i) => {
+              const isRevealed = revealed.has(r.id);
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "data-hex-image-occlusion-region": true,
+                  "data-region-id": r.id,
+                  "data-revealed": isRevealed,
+                  "aria-pressed": isRevealed,
+                  "aria-label": r.label ? isRevealed ? `Region ${i + 1} revealed: ${r.label}. Activate to hide.` : `Region ${i + 1} of ${regions.length}, hidden. Activate to reveal: ${r.label}.` : isRevealed ? `Region ${i + 1} revealed. Activate to hide.` : `Region ${i + 1} of ${regions.length}, hidden. Activate to reveal.`,
+                  onClick: () => toggle(r.id),
+                  className: cn(
+                    "pointer-events-auto absolute rounded-sm border-2 border-primary/60 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    isRevealed ? "bg-transparent opacity-30 hover:opacity-60" : "bg-primary opacity-95 hover:bg-primary/90"
+                  ),
+                  style: {
+                    left: `${r.x * 100}%`,
+                    top: `${r.y * 100}%`,
+                    width: `${r.width * 100}%`,
+                    height: `${r.height * 100}%`,
+                    // Explicit z-index = array index makes stacking deterministic:
+                    // later array entries always render (and click-catch) on top.
+                    zIndex: i
+                  }
+                },
+                r.id
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+function Quiz({
+  question,
+  options,
+  selectionMode = "single",
+  submitLabel = "Submit",
+  onAnswer,
+  className,
+  ...rest
+}) {
+  const [selected, setSelected] = React44.useState(() => /* @__PURE__ */ new Set());
+  const [submitted, setSubmitted] = React44.useState(false);
+  const onAnswerRef = React44.useRef(onAnswer);
+  onAnswerRef.current = onAnswer;
+  const groupName = React44.useId();
+  const correctIds = React44.useMemo(
+    () => new Set(options.filter((o) => o.correct).map((o) => o.id)),
+    [options]
+  );
+  const allCorrect = React44.useMemo(() => {
+    if (selected.size !== correctIds.size) return false;
+    for (const id of correctIds) if (!selected.has(id)) return false;
+    return true;
+  }, [selected, correctIds]);
+  const stateFor = (option) => {
+    if (!submitted) return "unanswered";
+    const picked = selected.has(option.id);
+    const isCorrect = correctIds.has(option.id);
+    if (picked && isCorrect) return "correct";
+    if (picked && !isCorrect) return "incorrect";
+    if (!picked && isCorrect) return "missed";
+    return "unanswered";
+  };
+  const toggle = (id) => {
+    setSelected((prev) => {
+      if (selectionMode === "single") return /* @__PURE__ */ new Set([id]);
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const handleSubmit = () => {
+    setSubmitted(true);
+    onAnswerRef.current?.(Array.from(selected), allCorrect);
+  };
+  const canSubmit = selected.size > 0;
+  const statusText = submitted ? allCorrect ? "Correct \u2014 well done." : "Some selections are incorrect or missed. Review the highlighted options." : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      "data-hex-quiz": true,
+      "data-submitted": submitted,
+      "data-all-correct": submitted && allCorrect,
+      className: cn("rounded-lg border bg-card p-4 text-card-foreground", className),
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-hex-quiz-question": true, className: "mb-3 text-base font-medium", children: question }),
+        /* @__PURE__ */ jsx("div", { "data-hex-quiz-options": true, className: "space-y-2", role: selectionMode === "single" ? "radiogroup" : "group", children: options.map((option) => {
+          const state = stateFor(option);
+          const isPicked = selected.has(option.id);
+          return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+            "label",
+            {
+              "data-hex-quiz-option": true,
+              "data-state": state,
+              "data-picked": isPicked,
+              className: cn(
+                "flex cursor-pointer items-start gap-2 rounded-md border bg-background p-2 transition-colors",
+                "hover:bg-muted/50",
+                state === "correct" && "border-primary bg-primary/10",
+                state === "incorrect" && "border-destructive bg-destructive/10",
+                state === "missed" && "border-primary/60 bg-primary/5 ring-1 ring-primary/40"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: selectionMode === "single" ? "radio" : "checkbox",
+                    name: selectionMode === "single" ? groupName : void 0,
+                    value: option.id,
+                    checked: isPicked,
+                    onChange: () => toggle(option.id),
+                    className: "mt-0.5"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                  /* @__PURE__ */ jsx("div", { "data-hex-quiz-label": true, children: option.label }),
+                  submitted && option.explanation && (state === "correct" || state === "incorrect" || state === "missed") ? /* @__PURE__ */ jsx("div", { "data-hex-quiz-explanation": true, className: "mt-1 text-xs text-muted-foreground", children: option.explanation }) : null
+                ] })
+              ]
+            }
+          ) }, option.id);
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-hex-quiz-submit": true,
+              disabled: !canSubmit,
+              onClick: handleSubmit,
+              className: cn(
+                "inline-flex h-9 items-center justify-center rounded-md bg-primary px-3 text-sm font-medium text-primary-foreground transition-opacity",
+                "hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              ),
+              children: submitLabel
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { "data-hex-quiz-status": true, role: "status", "aria-live": "polite", className: "text-sm text-muted-foreground", children: statusText })
+        ] })
+      ]
+    }
+  );
+}
+var EMPTY_PLACEHOLDER = "\u2014";
+function CompareTable({
+  subjects,
+  attributes,
+  highlightDifferences = false,
+  onCellClick,
+  className,
+  ...rest
+}) {
+  const warnedRef = React44.useRef(false);
+  const nodeEnv = globalThis.process?.env?.NODE_ENV;
+  if (nodeEnv !== "production" && !warnedRef.current) {
+    const subjectIds = new Set(subjects.map((s) => s.id));
+    for (const attr of attributes) {
+      for (const valueId of Object.keys(attr.values)) {
+        if (!subjectIds.has(valueId)) {
+          warnedRef.current = true;
+          console.warn(
+            `[hex-core/CompareTable] Attribute "${attr.id}" has a value for subjectId "${valueId}" that isn't in the subjects array. The cell will not render.`
+          );
+          break;
+        }
+      }
+      if (warnedRef.current) break;
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "data-hex-compare-table": true,
+      className: cn("overflow-x-auto rounded-lg border", className),
+      children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { "data-hex-compare-table-header": true, children: [
+          /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: "sticky left-0 z-10 border-b bg-card px-3 py-2 text-left text-xs font-medium text-muted-foreground"
+            }
+          ),
+          subjects.map((subject) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              "data-hex-compare-table-subject": true,
+              "data-subject-id": subject.id,
+              className: "border-b bg-card px-3 py-2 text-left font-semibold",
+              children: subject.label
+            },
+            subject.id
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: attributes.map((attr) => {
+          const reference = highlightDifferences ? subjects.map((s) => attr.values[s.id]).find((v) => v != null && v !== "") : void 0;
+          return /* @__PURE__ */ jsxs("tr", { "data-hex-compare-table-row": true, "data-attribute-id": attr.id, children: [
+            /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "row",
+                className: "sticky left-0 z-10 border-b bg-card px-3 py-2 text-left font-medium",
+                children: attr.label
+              }
+            ),
+            subjects.map((subject) => {
+              const raw = attr.values[subject.id];
+              const isEmpty = raw == null || raw === "";
+              const displayValue = isEmpty ? EMPTY_PLACEHOLDER : raw;
+              const isComparable = (typeof raw === "string" || typeof raw === "number" || typeof raw === "boolean") && (typeof reference === "string" || typeof reference === "number" || typeof reference === "boolean");
+              const differs = highlightDifferences && !isEmpty && reference !== void 0 && isComparable && String(raw) !== String(reference);
+              const interactive = Boolean(onCellClick);
+              return /* @__PURE__ */ jsx(
+                "td",
+                {
+                  "data-hex-compare-table-cell": true,
+                  "data-subject-id": subject.id,
+                  "data-attribute-id": attr.id,
+                  "data-differs": differs,
+                  className: cn(
+                    "border-b px-3 py-2 align-top",
+                    differs && "bg-accent/30 text-accent-foreground",
+                    isEmpty && "text-muted-foreground",
+                    interactive && "cursor-pointer hover:bg-muted/40"
+                  ),
+                  onClick: interactive ? () => onCellClick?.(subject.id, attr.id) : void 0,
+                  children: displayValue
+                },
+                subject.id
+              );
+            })
+          ] }, attr.id);
+        }) })
+      ] })
+    }
+  );
+}
+function shuffleArray(arr) {
+  const out = arr.slice();
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [out[i], out[j]] = [out[j], out[i]];
+  }
+  return out;
+}
+function Deck({
+  cards,
+  shuffle = false,
+  ratingSlot,
+  onCardChange,
+  cardWidth = 360,
+  cardHeight = 240,
+  className,
+  ...rest
+}) {
+  const order = React44.useMemo(() => shuffle ? shuffleArray(cards) : cards.slice(), [cards, shuffle]);
+  const [index, setIndex] = React44.useState(0);
+  const [flipped, setFlipped] = React44.useState(false);
+  const onCardChangeRef = React44.useRef(onCardChange);
+  onCardChangeRef.current = onCardChange;
+  React44.useEffect(() => {
+    setIndex(0);
+    setFlipped(false);
+  }, [order]);
+  const total = order.length;
+  const currentCard = order[index];
+  const goPrev = React44.useCallback(() => {
+    if (index === 0) return;
+    const next = index - 1;
+    setIndex(next);
+    setFlipped(false);
+    const card = order[next];
+    if (card) onCardChangeRef.current?.(next, card);
+  }, [index, order]);
+  const goNext = React44.useCallback(() => {
+    if (index >= total - 1) return;
+    const next = index + 1;
+    setIndex(next);
+    setFlipped(false);
+    const card = order[next];
+    if (card) onCardChangeRef.current?.(next, card);
+  }, [index, order, total]);
+  if (total === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        "data-hex-deck": true,
+        "data-empty": "true",
+        className: cn("rounded-lg border bg-card p-6 text-center text-sm text-muted-foreground", className),
+        children: "No cards in this deck."
+      }
+    );
+  }
+  const progressPercent = total > 0 ? (index + 1) / total * 100 : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      "data-hex-deck": true,
+      "data-index": index,
+      "data-total": total,
+      className: cn("inline-flex flex-col items-center gap-4", className),
+      children: [
+        currentCard ? /* @__PURE__ */ jsx(
+          Flashcard,
+          {
+            front: currentCard.front,
+            back: currentCard.back,
+            flipped,
+            onFlipChange: setFlipped,
+            width: cardWidth,
+            height: cardHeight
+          },
+          currentCard.id
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { "data-hex-deck-controls": true, className: "flex w-full items-center gap-3", style: { width: cardWidth }, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-hex-deck-prev": true,
+              disabled: index === 0,
+              onClick: goPrev,
+              "aria-label": `Previous card. Currently ${index + 1} of ${total}.`,
+              className: "inline-flex h-9 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: "Prev"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { "data-hex-deck-progress": true, className: "flex-1", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-primary transition-all",
+                style: { width: `${progressPercent}%` }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 text-center text-xs text-muted-foreground", children: [
+              index + 1,
+              " / ",
+              total
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-hex-deck-next": true,
+              disabled: index >= total - 1,
+              onClick: goNext,
+              "aria-label": `Next card. Currently ${index + 1} of ${total}.`,
+              className: "inline-flex h-9 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: "Next"
+            }
+          )
+        ] }),
+        ratingSlot && currentCard ? /* @__PURE__ */ jsx("div", { "data-hex-deck-rating-slot": true, className: "w-full", style: { width: cardWidth }, children: ratingSlot(currentCard) }) : null
+      ]
+    }
+  );
+}
+var RATINGS = ["again", "hard", "good", "easy"];
+var DEFAULT_LABELS = {
+  again: "Again",
+  hard: "Hard",
+  good: "Good",
+  easy: "Easy"
+};
+var RATING_HINT = {
+  again: "Couldn't recall \u2014 show this card again soon.",
+  hard: "Recalled with effort \u2014 review sooner than usual.",
+  good: "Recalled correctly \u2014 keep the standard interval.",
+  easy: "Recalled instantly \u2014 push the next review further out."
+};
+var RATING_CLASSES = {
+  again: "border-destructive/40 bg-destructive/10 text-destructive hover:bg-destructive/15 focus-visible:ring-destructive/40",
+  hard: "border-secondary bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  good: "border-primary/40 bg-primary/10 text-foreground hover:bg-primary/15 focus-visible:ring-primary/40",
+  easy: "border-accent bg-accent/10 text-accent-foreground hover:bg-accent/20 focus-visible:ring-accent/40"
+};
+function SpacedRepetition({
+  cardId,
+  onRate,
+  labels,
+  className,
+  ...rest
+}) {
+  const onRateRef = React44.useRef(onRate);
+  onRateRef.current = onRate;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      "data-hex-spaced-repetition": true,
+      "data-card-id": cardId,
+      role: "group",
+      "aria-label": "Confidence rating",
+      className: cn("inline-flex flex-wrap items-center gap-2", className),
+      children: RATINGS.map((rating) => {
+        const label = labels?.[rating] ?? DEFAULT_LABELS[rating];
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-hex-spaced-repetition-button": true,
+            "data-rating": rating,
+            "aria-label": `${label}: ${RATING_HINT[rating]}`,
+            onClick: () => onRateRef.current(rating, cardId),
+            className: cn(
+              "inline-flex h-9 items-center justify-center rounded-md border px-3 text-sm font-medium transition-colors",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              RATING_CLASSES[rating]
+            ),
+            children: label
+          },
+          rating
+        );
+      })
+    }
+  );
+}
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Attachment, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Citation, Cluster, CodeBlock, CodeBlockCopy2 as CodeBlockCopy, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Composer, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, Dropzone, Empty, ErrorState, FileTree, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Loading, LoadingIndicator, Markdown, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, MenubarTrigger, Message, MessageActions, MessageList, MultiCombobox, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Reasoning, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Spacer, SpeechRecognition, Stack, Stepper, Suggestion, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tree, alertVariants, attachmentVariants, badgeVariants, buttonVariants, clusterVariants, cn, containerVariants, emptyVariants, errorStateVariants, formatHslTriplet, gridVariants, hexToHslTriplet, hslToRgb, hslTripletToHex, loadingIndicatorVariants, loadingVariants, messageVariants, navigationMenuTriggerStyle, parseHslTriplet, rgbToHsl, spacerVariants, stackVariants, tagVariants, toggleVariants, toolbarVariants, useFormField, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Arc, AspectRatio, Attachment, AudioPlayer, AudioWaveform, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Canvas, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chord, Citation, Cloze, Cluster, CodeBlock, CodeBlockCopy2 as CodeBlockCopy, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CompareTable, Composer, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, DataTable, DatePicker, Deck, Dendrogram, Diagram, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, Dropzone, Empty, ErrorState, FileTree, Flashcard, Flowchart, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Funnel, Gantt, Grid, HoverCard, HoverCardContent, HoverCardTrigger, ImageOcclusion, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Loading, LoadingIndicator, Markdown, Matrix, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, MenubarTrigger, Message, MessageActions, MessageList, MindMap, MultiCombobox, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, OrgChart, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Pyramid, Quiz, RadioGroup, RadioGroupItem, Reasoning, ResizableHandle, ResizablePanel, ResizablePanelGroup, Sankey, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sequence, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, SpacedRepetition, Spacer, SpeechRecognition, Stack, Stepper, Suggestion, Sunburst, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Terminal, Textarea, TimeAxis, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tree, TreeMap, Venn, alertVariants, attachmentVariants, badgeVariants, buttonVariants, clusterVariants, cn, containerVariants, emptyVariants, errorStateVariants, formatHslTriplet, gridVariants, hexToHslTriplet, hslToRgb, hslTripletToHex, loadingIndicatorVariants, loadingVariants, messageVariants, navigationMenuTriggerStyle, parseHslTriplet, rgbToHsl, spacerVariants, stackVariants, tagVariants, toggleVariants, toolbarVariants, useFormField, useSidebar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map