@ai-matrx/rich-content 0.2.4 → 0.2.6

package/dist/display/blocks/diagram/InteractiveDiagramBlock.js

@@ -0,0 +1,2415 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Chip } from "@ai-matrx/design-system/controls";
+import {
+  useState,
+  useCallback,
+  useMemo,
+  useEffect,
+  useRef,
+  useId
+} from "react";
+import {
+  ReactFlow,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  MarkerType,
+  BackgroundVariant,
+  Panel,
+  MiniMap,
+  ReactFlowProvider,
+  Handle,
+  Position,
+  useReactFlow,
+  useNodesInitialized,
+  useStore,
+  getViewportForBounds,
+  NodeResizer,
+  applyNodeChanges,
+  reconnectEdge
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import {
+  Network,
+  Maximize2,
+  Minimize2,
+  Download,
+  Layers,
+  Settings,
+  CheckCircle2,
+  XCircle,
+  GitBranch,
+  Users,
+  Database,
+  Server,
+  Globe,
+  Cpu,
+  HardDrive,
+  RotateCcw,
+  Square,
+  Circle,
+  Rainbow,
+  Shuffle,
+  Camera,
+  ExternalLink,
+  Printer,
+  Clock,
+  Table,
+  ArrowRight,
+  ArrowDown,
+  ArrowLeft,
+  ArrowUp,
+  Plus,
+  Trash2,
+  Pencil,
+  Check,
+  Boxes,
+  Magnet,
+  LayoutGrid,
+  ChevronDown
+} from "lucide-react";
+import { useCanvas } from "../../../host/app-bindings.js";
+import { useOpenArtifactInCanvas } from "../../../host/app-bindings.js";
+import { isMaterializedArtifactId } from "../../../utils/lifted/artifactId.js";
+import { getArtifactDef } from "../../../host/app-bindings.js";
+import IconButton from "../../../utils/lifted/IconButton.js";
+import { IconResolver } from "@ai-matrx/icons";
+import { IconInputWithValidation } from "../../../host/app-bindings.js";
+import {
+  getLayoutedElements,
+  getLayoutOptionsForDiagramType,
+  getGridLayout,
+  getRadialLayout,
+  getOrgChartLayout,
+  getPedigreeLayout
+} from "./layout-utils.js";
+import { formatDiagramType } from "./ui-utils.js";
+import {
+  diagramDirectionForFlow,
+  shouldRelayoutOnFlowChange
+} from "./presentation-direction.js";
+import { preferredFlowDirection } from "@ai-matrx/canvas";
+import { useCanvasPresentation } from "@ai-matrx/canvas/react";
+import {
+  diagramScrollPans,
+  firstRankBounds,
+  portraitWidthFitViewport
+} from "../canvas-adaptive.js";
+import {
+  materializeDiagramDefaults
+} from "./parseDiagramJSON.js";
+import {
+  DIAGRAM_COLOR_PRESETS,
+  getDiagramColorHex,
+  getDiagramNodeColorClass,
+  isCustomDiagramColor,
+  normalizeDiagramIconName
+} from "./diagram-visual-defaults.js";
+import {
+  PrintOptionsDialog,
+  usePrintOptions
+} from "@ai-matrx/print/react";
+import { createDiagramPrinter } from "./diagram-printer.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "@ai-matrx/design-system";
+const UNSAFE_COLOR_RE = /\b(oklch|oklab|lab|lch|color)\s*\(/i;
+function backgroundVariantFromDiagram(diagram) {
+  if (diagram.renderHints?.background === "lines")
+    return BackgroundVariant.Lines;
+  if (diagram.renderHints?.background === "cross")
+    return BackgroundVariant.Cross;
+  return BackgroundVariant.Dots;
+}
+function safenColor(value, prop, isDark) {
+  if (!UNSAFE_COLOR_RE.test(value)) return value;
+  const lp = prop.toLowerCase();
+  if (lp.includes("background")) return isDark ? "#1f2937" : "#ffffff";
+  if (lp === "color") return isDark ? "#f3f4f6" : "#111827";
+  if (lp.includes("border") || lp.includes("outline"))
+    return isDark ? "#4b5563" : "#d1d5db";
+  if (lp === "fill" || lp === "stroke") return isDark ? "#9ca3af" : "#374151";
+  return isDark ? "#6b7280" : "#6b7280";
+}
+function patchComputedStyleForCapture(isDark) {
+  const original = window.getComputedStyle.bind(window);
+  window.getComputedStyle = function(elt, pseudo) {
+    const computed = original(elt, pseudo);
+    return new Proxy(computed, {
+      get(target, prop) {
+        const value = target[prop];
+        if (typeof prop === "string" && typeof value === "string" && value && UNSAFE_COLOR_RE.test(value)) {
+          return safenColor(value, prop, isDark);
+        }
+        if (prop === "getPropertyValue") {
+          return (p) => {
+            const raw = target.getPropertyValue(p);
+            return raw && UNSAFE_COLOR_RE.test(raw) ? safenColor(raw, p, isDark) : raw;
+          };
+        }
+        if (typeof value === "function")
+          return value.bind(target);
+        return value;
+      }
+    });
+  };
+  return () => {
+    window.getComputedStyle = original;
+  };
+}
+const PedigreeNode = ({
+  data,
+  selected
+}) => {
+  const gender = data.gender;
+  const affected = data.affected;
+  const deceased = data.deceased;
+  const proband = data.proband;
+  const birthYear = data.birthYear;
+  const deathYear = data.deathYear;
+  const description = typeof data.description === "string" ? data.description : void 0;
+  const isCircle = gender === "female";
+  const isUnknown = !gender || gender === "unknown";
+  const shapeBase = "relative flex items-center justify-center transition-all";
+  const size = "w-20 h-20";
+  const fillColor = affected ? "bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900" : "bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100";
+  const borderColor = proband ? "border-4 border-blue-500" : selected ? "border-4 border-blue-400" : "border-2 border-gray-600 dark:border-gray-400";
+  const shapeClass = isCircle ? `rounded-full ${shapeBase} ${size} ${fillColor} ${borderColor}` : isUnknown ? `rotate-45 ${shapeBase} ${size} ${fillColor} border-2 border-gray-600 dark:border-gray-400` : `${shapeBase} ${size} ${fillColor} ${borderColor}`;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 p-1", children: [
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: Position.Top,
+        id: "input",
+        className: "w-2 h-2 border border-gray-400 dark:border-gray-500 bg-white dark:bg-gray-700"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: shapeClass, title: data.label, children: [
+      deceased && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "absolute w-full h-px bg-gray-600 dark:bg-gray-400 rotate-45 origin-center" }) }),
+      proband && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-1 -left-3 text-blue-500 text-xs font-bold", children: "\u2197" }),
+      isUnknown && /* @__PURE__ */ jsx("div", { className: "-rotate-45 text-xs font-semibold text-center leading-tight px-1", children: data.label }),
+      !isUnknown && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-center leading-tight px-1 break-words max-w-full", children: data.label })
+    ] }),
+    (description || birthYear) && /* @__PURE__ */ jsxs("div", { className: "text-center max-w-[120px]", children: [
+      description && /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-700 dark:text-gray-300 font-medium truncate", children: description }),
+      (birthYear || deathYear) && /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: birthYear && deathYear ? `${birthYear}\u2013${deathYear}` : birthYear ? `b. ${birthYear}` : deathYear ? `d. ${deathYear}` : null })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: Position.Bottom,
+        id: "output",
+        className: "w-2 h-2 border border-gray-400 dark:border-gray-500 bg-white dark:bg-gray-700"
+      }
+    )
+  ] });
+};
+const TimelineNode = ({
+  data,
+  selected
+}) => {
+  const details = typeof data.details === "string" ? data.details : void 0;
+  const description = typeof data.description === "string" ? data.description : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `px-4 py-3 min-w-[140px] max-w-[200px] rounded-xl border-2 shadow-md transition-all bg-blue-50 dark:bg-blue-950/30 border-blue-400 dark:border-blue-600 text-blue-900 dark:text-blue-100 ${selected ? "shadow-xl scale-105 ring-2 ring-blue-400" : "hover:shadow-md"}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Left,
+            id: "input",
+            className: "w-2 h-2 border border-blue-400 bg-white dark:bg-gray-800"
+          }
+        ),
+        details && /* @__PURE__ */ jsx("div", { className: "text-xs font-bold text-blue-500 dark:text-blue-400 mb-1", children: details }),
+        /* @__PURE__ */ jsx("div", { className: "font-semibold text-sm", children: data.label }),
+        description && /* @__PURE__ */ jsx("div", { className: "text-xs opacity-75 mt-1", children: description }),
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "source",
+            position: Position.Right,
+            id: "output",
+            className: "w-2 h-2 border border-blue-400 bg-white dark:bg-gray-800"
+          }
+        )
+      ]
+    }
+  );
+};
+const ERDNode = ({
+  data,
+  selected
+}) => {
+  const attributes = data.attributes;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `min-w-[160px] rounded-lg border-2 shadow-md overflow-hidden transition-all bg-white dark:bg-gray-800 border-purple-400 dark:border-purple-600 ${selected ? "shadow-xl scale-105 ring-2 ring-purple-400" : "hover:shadow-md"}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Left,
+            id: "input",
+            className: "w-2 h-2 border border-purple-400 bg-white dark:bg-gray-800"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "bg-purple-500 dark:bg-purple-700 px-3 py-2 text-white font-bold text-sm text-center", children: data.label }),
+        attributes && attributes.length > 0 && /* @__PURE__ */ jsx("div", { className: "divide-y divide-gray-100 dark:divide-gray-700", children: attributes.map((attr, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "px-3 py-1 text-xs text-gray-700 dark:text-gray-300 font-mono",
+            children: attr
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "source",
+            position: Position.Right,
+            id: "output",
+            className: "w-2 h-2 border border-purple-400 bg-white dark:bg-gray-800"
+          }
+        )
+      ]
+    }
+  );
+};
+const CustomNode = ({
+  data,
+  selected
+}) => {
+  const description = typeof data.description === "string" ? data.description : void 0;
+  const details = typeof data.details === "string" ? data.details : void 0;
+  const getNodeIcon = () => {
+    const iconName = normalizeDiagramIconName(
+      typeof data.icon === "string" ? data.icon : "Square"
+    );
+    if (iconName === "none") return null;
+    return /* @__PURE__ */ jsx(
+      IconResolver,
+      {
+        iconName,
+        fallbackIcon: "Square",
+        className: "h-4 w-4 shrink-0"
+      }
+    );
+  };
+  const getNodeColor = () => {
+    const explicit = getDiagramNodeColorClass(data.color);
+    if (explicit) return explicit;
+    if (data.color) return "";
+    switch (data.nodeType) {
+      case "start":
+        return "bg-green-100 dark:bg-green-950/30 border-green-500 text-green-700 dark:text-green-300";
+      case "end":
+        return "bg-red-100 dark:bg-red-950/30 border-red-500 text-red-700 dark:text-red-300";
+      case "decision":
+        return "bg-orange-100 dark:bg-orange-950/30 border-orange-500 text-orange-700 dark:text-orange-300";
+      case "process":
+        return "bg-blue-100 dark:bg-blue-950/30 border-blue-500 text-blue-700 dark:text-blue-300";
+      case "data":
+        return "bg-purple-100 dark:bg-purple-950/30 border-purple-500 text-purple-700 dark:text-purple-300";
+      case "user":
+        return "bg-indigo-100 dark:bg-indigo-950/30 border-indigo-500 text-indigo-700 dark:text-indigo-300";
+      case "system":
+        return "bg-gray-100 dark:bg-gray-800 border-gray-500 text-gray-700 dark:text-gray-300";
+      case "api":
+        return "bg-teal-100 dark:bg-teal-950/30 border-teal-500 text-teal-700 dark:text-teal-300";
+      case "compute":
+        return "bg-yellow-100 dark:bg-yellow-950/30 border-yellow-500 text-yellow-700 dark:text-yellow-300";
+      case "storage":
+        return "bg-pink-100 dark:bg-pink-950/30 border-pink-500 text-pink-700 dark:text-pink-300";
+      case "event":
+        return "bg-cyan-100 dark:bg-cyan-950/30 border-cyan-500 text-cyan-700 dark:text-cyan-300";
+      case "entity":
+        return "bg-violet-100 dark:bg-violet-950/30 border-violet-500 text-violet-700 dark:text-violet-300";
+      case "gateway":
+        return "bg-amber-100 dark:bg-amber-950/30 border-amber-500 text-amber-700 dark:text-amber-300";
+      default:
+        return "bg-textured border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300";
+    }
+  };
+  const isOrgChart = data.diagramType === "orgchart";
+  const colorClass = getNodeColor();
+  const inlineStyle = isCustomDiagramColor(data.color) ? {
+    backgroundColor: `${getDiagramColorHex(data.color)}20`,
+    borderColor: getDiagramColorHex(data.color),
+    color: getDiagramColorHex(data.color)
+  } : void 0;
+  const shape = data.shape === "rectangle" || data.shape === "pill" || data.shape === "circle" || data.shape === "diamond" || data.shape === "hexagon" ? data.shape : "rounded";
+  const shapeClass = shape === "rectangle" ? "rounded-none" : shape === "pill" ? "rounded-full" : shape === "circle" ? "aspect-square rounded-full" : shape === "rounded" ? "rounded-lg" : "rounded-none";
+  const clipPath = shape === "diamond" ? "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)" : shape === "hexagon" ? "polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)" : void 0;
+  const borderStyle = data.borderStyle === "dashed" ? "border-dashed" : data.borderStyle === "dotted" ? "border-dotted" : "border-solid";
+  const centered = data.textAlign === "center";
+  const hasExplicitWidth = data.hasExplicitWidth === true;
+  const shapeSizeClass = shape === "circle" ? "aspect-square w-[200px] min-w-[160px]" : shape === "diamond" ? "min-h-[180px] w-[240px] min-w-[200px]" : shape === "hexagon" ? "min-h-[140px] w-[260px] min-w-[220px]" : isOrgChart ? `min-w-[200px] ${hasExplicitWidth ? "" : "max-w-[280px]"}` : `min-w-[120px] ${hasExplicitWidth ? "" : "max-w-[280px]"}`;
+  const shapePaddingClass = shape === "diamond" ? "px-12 py-10" : shape === "hexagon" ? "px-10 py-6" : isOrgChart ? "px-6 py-4" : "px-4 py-3";
+  return /* @__PURE__ */ jsxs("div", { className: `${shapeSizeClass} relative h-full overflow-visible`, children: [
+    /* @__PURE__ */ jsx(
+      NodeResizer,
+      {
+        isVisible: selected && data.editing === true,
+        minWidth: shape === "circle" ? 120 : 140,
+        minHeight: shape === "circle" ? 120 : 64,
+        keepAspectRatio: shape === "circle",
+        lineClassName: "!border-primary",
+        handleClassName: "!h-2.5 !w-2.5 !border-primary !bg-background"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: isOrgChart ? Position.Top : Position.Left,
+        id: "input",
+        style: isOrgChart ? { left: "50%", transform: "translateX(-50%)", top: "-6px" } : {},
+        className: "w-3 h-3 border-2 border-gray-400 dark:border-gray-500 bg-textured hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${shapePaddingClass} relative flex h-full w-full items-center border-2 shadow-lg transition-all ${shapeClass} ${borderStyle} ${colorClass} ${selected ? "shadow-xl ring-2 ring-blue-400 dark:ring-blue-500" : "hover:shadow-md"}`,
+        style: { ...inlineStyle, clipPath },
+        children: isOrgChart ? /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0 text-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 mb-2", children: [
+            getNodeIcon(),
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 break-words text-base font-bold [overflow-wrap:anywhere]", children: data.label })
+          ] }),
+          description && /* @__PURE__ */ jsx("div", { className: "mb-1 break-words text-sm font-medium opacity-90 [overflow-wrap:anywhere]", children: description }),
+          details && /* @__PURE__ */ jsx("div", { className: "break-words text-xs italic opacity-70 [overflow-wrap:anywhere]", children: details })
+        ] }) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `w-full min-w-0 ${centered ? "text-center" : "text-left"}`,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `mb-1 flex items-center gap-2 ${centered ? "justify-center" : ""}`,
+                  children: [
+                    getNodeIcon(),
+                    /* @__PURE__ */ jsx("div", { className: "min-w-0 break-words text-sm font-semibold [overflow-wrap:anywhere]", children: data.label })
+                  ]
+                }
+              ),
+              description && /* @__PURE__ */ jsx("div", { className: "mt-1 break-words text-xs opacity-80 [overflow-wrap:anywhere]", children: description }),
+              details && /* @__PURE__ */ jsx("div", { className: "mt-1 break-words text-xs italic opacity-70 [overflow-wrap:anywhere]", children: details })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: isOrgChart ? Position.Bottom : Position.Right,
+        id: "output",
+        style: isOrgChart ? { left: "50%", transform: "translateX(-50%)", bottom: "-6px" } : {},
+        className: "w-3 h-3 border-2 border-gray-400 dark:border-gray-500 bg-textured hover:bg-blue-200 dark:hover:bg-blue-700 transition-colors"
+      }
+    )
+  ] });
+};
+const GroupNode = ({
+  data,
+  selected
+}) => {
+  const style = data.groupStyle === "solid" ? "border-solid" : data.groupStyle === "dotted" ? "border-dotted" : "border-dashed";
+  const color = typeof data.color === "string" && data.color !== "auto" ? data.color : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `h-full w-full rounded-2xl border-2 ${style} bg-background/35 shadow-sm backdrop-blur-[1px] transition-colors ${selected ? "border-primary ring-2 ring-primary/20" : "border-border/80"}`,
+      style: color ? {
+        borderColor: getDiagramColorHex(color),
+        backgroundColor: `${getDiagramColorHex(color)}0d`
+      } : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          NodeResizer,
+          {
+            isVisible: selected && data.editing === true,
+            minWidth: 260,
+            minHeight: 180,
+            lineClassName: "!border-primary",
+            handleClassName: "!h-2.5 !w-2.5 !border-primary !bg-background"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute left-3 top-2 flex max-w-[calc(100%-1.5rem)] items-center gap-1.5 rounded-md bg-background/90 px-2 py-1 text-xs font-semibold text-foreground shadow-sm ring-1 ring-border/70", children: [
+          /* @__PURE__ */ jsx(Boxes, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: String(data.label ?? "Section") })
+        ] })
+      ]
+    }
+  );
+};
+const nodeTypes = {
+  custom: CustomNode,
+  pedigree: PedigreeNode,
+  timeline: TimelineNode,
+  erd: ERDNode,
+  group: GroupNode
+};
+function getReactFlowNodeType(diagramType, nodeData) {
+  if (nodeData.isGroup) return "group";
+  if (diagramType === "pedigree") return "pedigree";
+  if (diagramType === "timeline") return "timeline";
+  if (diagramType === "erd") return "erd";
+  return "custom";
+}
+function buildReactFlowNodes(diagram, editing = false) {
+  const ordered = [...diagram.nodes].sort(
+    (a, b) => Number(Boolean(b.isGroup)) - Number(Boolean(a.isGroup))
+  );
+  return ordered.map((node, index) => ({
+    id: node.id,
+    type: getReactFlowNodeType(diagram.type, node),
+    position: node.position || {
+      x: index % 3 * 200 + 100,
+      y: Math.floor(index / 3) * 150 + 100
+    },
+    data: {
+      label: node.label,
+      isGroup: node.isGroup === true,
+      groupStyle: node.groupStyle ?? "dashed",
+      editing,
+      nodeType: node.nodeType || node.type || "default",
+      description: node.description,
+      details: node.details,
+      diagramType: diagram.type,
+      // Pedigree fields
+      gender: node.gender,
+      affected: node.affected,
+      deceased: node.deceased,
+      proband: node.proband,
+      birthYear: node.birthYear,
+      deathYear: node.deathYear,
+      generation: node.generation,
+      // Extras
+      color: node.color,
+      icon: node.icon,
+      shape: node.shape,
+      borderStyle: node.borderStyle,
+      textAlign: node.textAlign,
+      attributes: node.metadata?.attributes,
+      hasExplicitWidth: node.width !== void 0
+    },
+    parentId: node.parentId,
+    extent: node.parentId ? "parent" : void 0,
+    expandParent: Boolean(node.parentId),
+    style: node.width !== void 0 || node.height !== void 0 || node.isGroup ? {
+      width: node.width ?? (node.isGroup ? 420 : void 0),
+      height: node.height ?? (node.isGroup ? 260 : void 0)
+    } : void 0
+  }));
+}
+function buildReactFlowEdges(diagram) {
+  const nodeIds = new Set(diagram.nodes.map((n) => n.id));
+  const isPedigree = diagram.type === "pedigree";
+  const hideArrows = diagram.renderHints?.hideArrows;
+  const showLabels = diagram.renderHints?.showEdgeLabels !== false;
+  const seenEdgeIds = /* @__PURE__ */ new Map();
+  const uniqueEdgeId = (rawId) => {
+    const priorCount = seenEdgeIds.get(rawId) ?? 0;
+    seenEdgeIds.set(rawId, priorCount + 1);
+    if (priorCount === 0) return rawId;
+    const deduped = `${rawId}__dup${priorCount}`;
+    console.warn(
+      `Diagram edge id "${rawId}" is duplicated in this diagram's data; rendering it as "${deduped}" so both edges stay visible.`
+    );
+    return deduped;
+  };
+  return diagram.edges.filter((edge) => {
+    if (!nodeIds.has(edge.source) || !nodeIds.has(edge.target)) {
+      console.warn(`Diagram edge ${edge.id} references missing nodes`, edge);
+      return false;
+    }
+    return true;
+  }).map((edge) => {
+    const isMarriage = edge.relationship === "marriage" || edge.relationship === "divorced";
+    const isDivorced = edge.relationship === "divorced";
+    const isConsanguineous = edge.relationship === "consanguineous";
+    const edgeColor = getDiagramColorHex(
+      edge.color || (isMarriage ? "#374151" : "gray")
+    );
+    const edgeStyle = {
+      stroke: edgeColor,
+      strokeWidth: isMarriage ? 3 : edge.strokeWidth || 2,
+      strokeDasharray: isDivorced ? "6,3" : isConsanguineous ? "2,2" : edge.lineStyle === "dotted" ? "2,5" : edge.lineStyle === "dashed" || edge.dashed ? "7,5" : "none"
+    };
+    const marker = edge.marker ?? (edge.arrow === false || isMarriage ? "none" : "end");
+    const showStartMarker = !hideArrows && marker !== "none" && (marker === "start" || marker === "both");
+    const showEndMarker = !hideArrows && marker !== "none" && (marker === "end" || marker === "both");
+    const markerDefinition = {
+      type: MarkerType.ArrowClosed,
+      width: isPedigree ? 14 : 20,
+      height: isPedigree ? 14 : 20,
+      color: edgeColor
+    };
+    return {
+      id: uniqueEdgeId(edge.id),
+      source: edge.source,
+      target: edge.target,
+      sourceHandle: "output",
+      targetHandle: "input",
+      type: isPedigree && isMarriage ? "straight" : edge.type === "straight" || edge.type === "step" || edge.type === "smoothstep" ? edge.type : "default",
+      animated: edge.animated || false,
+      markerStart: showStartMarker ? markerDefinition : void 0,
+      markerEnd: showEndMarker ? markerDefinition : void 0,
+      style: edgeStyle,
+      label: showLabels && !isPedigree ? edge.label : void 0,
+      labelStyle: {
+        fontSize: 12,
+        fontWeight: 500,
+        fill: edgeColor
+      },
+      labelBgStyle: { fill: "#ffffff", fillOpacity: 0.8, rx: 4, ry: 4 },
+      data: {
+        lineStyle: edge.lineStyle ?? (edge.dashed ? "dashed" : "solid"),
+        color: edge.color ?? "gray",
+        strokeWidth: edge.strokeWidth ?? 2,
+        marker,
+        arrow: marker !== "none",
+        edgeType: edge.type ?? "bezier"
+      }
+    };
+  });
+}
+const DiagramFlow = ({
+  diagram,
+  workspace = false,
+  showMiniMap,
+  setShowMiniMap,
+  backgroundVariant,
+  setBackgroundVariant,
+  onExportImage,
+  onNodeClick,
+  onSelectionChange,
+  editing = false,
+  onDiagramChange
+}) => {
+  const {
+    setViewport,
+    getNodes,
+    getEdges,
+    getNodesBounds,
+    screenToFlowPosition
+  } = useReactFlow();
+  const nodesInitialized = useNodesInitialized();
+  const hasAutoLayoutApplied = useRef(false);
+  const autoLayoutFrameRef = useRef(null);
+  const canvasPresentation = useCanvasPresentation();
+  const canvasFlow = canvasPresentation ? preferredFlowDirection(canvasPresentation) : null;
+  const personArranged = useRef(false);
+  const lastCanvasFlow = useRef(canvasFlow);
+  const initialNodes = useMemo(
+    () => buildReactFlowNodes(diagram, editing),
+    [diagram, editing]
+  );
+  const initialEdges = useMemo(() => buildReactFlowEdges(diagram), [diagram]);
+  const [nodes, setNodes] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  useEffect(() => {
+    setNodes(buildReactFlowNodes(diagram, editing));
+    setEdges(buildReactFlowEdges(diagram));
+  }, [diagram, editing, setNodes, setEdges]);
+  const [selectedNodeId, setSelectedNodeId] = useState(null);
+  const [selectedEdgeId, setSelectedEdgeId] = useState(null);
+  const commit = useCallback(
+    (rfNodes, rfEdges, layoutOverride) => {
+      if (!onDiagramChange) return;
+      const priorNodes = new Map(diagram.nodes.map((n) => [n.id, n]));
+      const priorEdges = new Map(diagram.edges.map((e) => [e.id, e]));
+      const nodes2 = rfNodes.map((rf) => {
+        const data = rf.data;
+        const isGroup = data.isGroup === true;
+        return {
+          ...priorNodes.get(rf.id) ?? { id: rf.id, label: rf.id },
+          id: rf.id,
+          label: typeof data.label === "string" ? data.label : rf.id,
+          description: typeof data.description === "string" && data.description !== "" ? data.description : void 0,
+          nodeType: typeof data.nodeType === "string" ? data.nodeType : void 0,
+          color: typeof data.color === "string" ? data.color : void 0,
+          icon: typeof data.icon === "string" ? data.icon : void 0,
+          shape: data.shape === "rectangle" || data.shape === "pill" || data.shape === "circle" || data.shape === "diamond" || data.shape === "hexagon" ? data.shape : "rounded",
+          borderStyle: data.borderStyle === "dashed" || data.borderStyle === "dotted" ? data.borderStyle : "solid",
+          textAlign: data.textAlign === "center" ? "center" : "left",
+          isGroup,
+          parentId: rf.parentId,
+          width: isGroup ? rf.measured?.width ?? rf.width ?? 420 : rf.width ?? priorNodes.get(rf.id)?.width,
+          height: isGroup ? rf.measured?.height ?? rf.height ?? 260 : rf.height ?? priorNodes.get(rf.id)?.height,
+          groupStyle: data.groupStyle === "solid" || data.groupStyle === "dashed" || data.groupStyle === "dotted" ? data.groupStyle : void 0,
+          position: { x: rf.position.x, y: rf.position.y }
+        };
+      });
+      const edges2 = rfEdges.map((rf) => {
+        const data = rf.data;
+        return {
+          ...priorEdges.get(rf.id) ?? {
+            id: rf.id,
+            source: rf.source,
+            target: rf.target
+          },
+          id: rf.id,
+          source: rf.source,
+          target: rf.target,
+          label: typeof rf.label === "string" && rf.label !== "" ? rf.label : void 0,
+          type: data?.edgeType === "straight" || data?.edgeType === "step" || data?.edgeType === "smoothstep" ? data.edgeType : "bezier",
+          lineStyle: data?.lineStyle === "dashed" || data?.lineStyle === "dotted" ? data.lineStyle : "solid",
+          dashed: data?.lineStyle === "dashed",
+          animated: rf.animated === true,
+          color: typeof data?.color === "string" ? data.color : "gray",
+          strokeWidth: typeof data?.strokeWidth === "number" ? data.strokeWidth : 2,
+          marker: data?.marker === "none" || data?.marker === "start" || data?.marker === "both" ? data.marker : "end",
+          arrow: data?.marker !== "none" && data?.arrow !== false
+        };
+      });
+      onDiagramChange(
+        materializeDiagramDefaults({
+          ...diagram,
+          nodes: nodes2,
+          edges: edges2,
+          layout: layoutOverride ? { ...diagram.layout, ...layoutOverride } : diagram.layout
+        })
+      );
+    },
+    [diagram, onDiagramChange]
+  );
+  const onConnect = useCallback(
+    (params) => {
+      const next = addEdge(
+        {
+          ...params,
+          id: `e-${crypto.randomUUID().slice(0, 8)}`,
+          type: "default",
+          markerEnd: {
+            type: MarkerType.ArrowClosed,
+            color: getDiagramColorHex("gray")
+          },
+          style: { stroke: getDiagramColorHex("gray"), strokeWidth: 2 },
+          data: {
+            lineStyle: "solid",
+            marker: "end",
+            color: "gray",
+            strokeWidth: 2,
+            edgeType: "bezier"
+          }
+        },
+        getEdges()
+      );
+      setEdges(next);
+      commit(getNodes(), next);
+    },
+    [setEdges, commit, getNodes, getEdges]
+  );
+  const onReconnect = useCallback(
+    (oldEdge, connection) => {
+      const next = reconnectEdge(oldEdge, connection, getEdges());
+      setEdges(next);
+      commit(getNodes(), next);
+    },
+    [commit, getEdges, getNodes, setEdges]
+  );
+  const addBox = useCallback(() => {
+    const id = `n-${crypto.randomUUID().slice(0, 8)}`;
+    const existing = getNodes();
+    const selectedGroup = existing.find(
+      (node) => node.id === selectedNodeId && node.data.isGroup === true
+    );
+    const viewportCenter = screenToFlowPosition({
+      x: window.innerWidth * 0.58,
+      y: window.innerHeight * 0.42
+    });
+    const newNode = {
+      id,
+      type: getReactFlowNodeType(diagram.type, { id, label: "New box" }),
+      position: selectedGroup ? { x: 28, y: 72 } : viewportCenter,
+      data: { label: "New box", diagramType: diagram.type },
+      parentId: selectedGroup?.id,
+      extent: selectedGroup ? "parent" : void 0,
+      expandParent: Boolean(selectedGroup)
+    };
+    const next = [...existing, newNode];
+    setNodes(next);
+    commit(next, getEdges());
+    setSelectedNodeId(id);
+    setSelectedEdgeId(null);
+    onSelectionChange?.({ kind: "box", id });
+  }, [
+    getNodes,
+    getEdges,
+    setNodes,
+    commit,
+    diagram.type,
+    selectedNodeId,
+    onSelectionChange,
+    screenToFlowPosition
+  ]);
+  const addSection = useCallback(() => {
+    const id = `g-${crypto.randomUUID().slice(0, 8)}`;
+    const existing = getNodes();
+    const viewportCenter = screenToFlowPosition({
+      x: window.innerWidth * 0.55,
+      y: window.innerHeight * 0.38
+    });
+    const section = {
+      id,
+      type: "group",
+      position: viewportCenter,
+      data: {
+        label: "New section",
+        isGroup: true,
+        groupStyle: "dashed",
+        editing: true
+      },
+      style: { width: 420, height: 260 }
+    };
+    const next = [section, ...existing];
+    setNodes(next);
+    commit(next, getEdges());
+    setSelectedNodeId(id);
+    setSelectedEdgeId(null);
+    onSelectionChange?.({ kind: "section", id });
+  }, [
+    getNodes,
+    getEdges,
+    setNodes,
+    commit,
+    onSelectionChange,
+    screenToFlowPosition
+  ]);
+  const patchSelectedNode = useCallback(
+    (patch) => {
+      if (!selectedNodeId) return;
+      const next = getNodes().map(
+        (node) => node.id === selectedNodeId ? { ...node, data: { ...node.data, ...patch } } : node
+      );
+      setNodes(next);
+      commit(next, getEdges());
+    },
+    [selectedNodeId, setNodes, getNodes, getEdges, commit]
+  );
+  const deleteSelectedNode = useCallback(() => {
+    if (!selectedNodeId) return;
+    const currentNodes = getNodes();
+    const selected = currentNodes.find((node) => node.id === selectedNodeId);
+    const selectedIsGroup = selected?.data.isGroup === true;
+    const nextNodes = currentNodes.filter((node) => node.id !== selectedNodeId).map((node) => {
+      if (!selectedIsGroup || node.parentId !== selectedNodeId || !selected)
+        return node;
+      return {
+        ...node,
+        parentId: void 0,
+        extent: void 0,
+        expandParent: false,
+        position: {
+          x: selected.position.x + node.position.x,
+          y: selected.position.y + node.position.y
+        }
+      };
+    });
+    const nextEdges = selectedIsGroup ? getEdges() : getEdges().filter(
+      (edge) => edge.source !== selectedNodeId && edge.target !== selectedNodeId
+    );
+    setNodes(nextNodes);
+    setEdges(nextEdges);
+    setSelectedNodeId(null);
+    commit(nextNodes, nextEdges);
+    onSelectionChange?.({ kind: null, id: null });
+  }, [
+    selectedNodeId,
+    getNodes,
+    getEdges,
+    setNodes,
+    setEdges,
+    commit,
+    onSelectionChange
+  ]);
+  const moveSelectedBoxToSection = useCallback(
+    (parentId) => {
+      if (!selectedNodeId) return;
+      const current = getNodes();
+      const selected = current.find((node) => node.id === selectedNodeId);
+      if (!selected || selected.data.isGroup === true) return;
+      const oldParent = selected.parentId ? current.find((node) => node.id === selected.parentId) : void 0;
+      const newParent = parentId ? current.find(
+        (node) => node.id === parentId && node.data.isGroup === true
+      ) : void 0;
+      if (parentId && !newParent)
+        throw new Error(`Section ${parentId} is not on this map.`);
+      const absolute = oldParent ? {
+        x: oldParent.position.x + selected.position.x,
+        y: oldParent.position.y + selected.position.y
+      } : selected.position;
+      const position = newParent ? {
+        x: Math.max(24, absolute.x - newParent.position.x),
+        y: Math.max(64, absolute.y - newParent.position.y)
+      } : absolute;
+      const next = current.map(
+        (node) => node.id === selectedNodeId ? {
+          ...node,
+          parentId: newParent?.id,
+          extent: newParent ? "parent" : void 0,
+          expandParent: Boolean(newParent),
+          position
+        } : node
+      );
+      setNodes(next);
+      commit(next, getEdges());
+    },
+    [selectedNodeId, setNodes, getNodes, getEdges, commit]
+  );
+  const patchSelectedEdge = useCallback(
+    (patch) => {
+      if (!selectedEdgeId) return;
+      const next = getEdges().map((edge) => {
+        if (edge.id !== selectedEdgeId) return edge;
+        const data = {
+          ...edge.data,
+          ...patch.lineStyle ? { lineStyle: patch.lineStyle } : {},
+          ...patch.edgeType ? { edgeType: patch.edgeType } : {},
+          ...patch.color ? { color: patch.color } : {},
+          ...patch.strokeWidth !== void 0 ? { strokeWidth: patch.strokeWidth } : {},
+          ...patch.marker ? { marker: patch.marker } : {}
+        };
+        const lineStyle = data.lineStyle === "dashed" || data.lineStyle === "dotted" ? data.lineStyle : "solid";
+        const marker = data.marker === "none" || data.marker === "start" || data.marker === "both" ? data.marker : "end";
+        const color = getDiagramColorHex(data.color);
+        const markerDefinition = {
+          type: MarkerType.ArrowClosed,
+          color
+        };
+        return {
+          ...edge,
+          ...patch.label !== void 0 ? { label: patch.label } : {},
+          ...patch.edgeType ? {
+            type: patch.edgeType === "bezier" ? "default" : patch.edgeType
+          } : {},
+          ...patch.animated !== void 0 ? { animated: patch.animated } : {},
+          data,
+          markerStart: marker === "start" || marker === "both" ? markerDefinition : void 0,
+          markerEnd: marker === "end" || marker === "both" ? markerDefinition : void 0,
+          style: {
+            ...edge.style,
+            stroke: color,
+            strokeWidth: typeof data.strokeWidth === "number" ? data.strokeWidth : 2,
+            strokeDasharray: lineStyle === "dotted" ? "2,5" : lineStyle === "dashed" ? "7,5" : "none"
+          }
+        };
+      });
+      setEdges(next);
+      commit(getNodes(), next);
+    },
+    [selectedEdgeId, setEdges, getNodes, getEdges, commit]
+  );
+  const deleteSelectedEdge = useCallback(() => {
+    if (!selectedEdgeId) return;
+    const nextEdges = getEdges().filter((e) => e.id !== selectedEdgeId);
+    setEdges(nextEdges);
+    setSelectedEdgeId(null);
+    commit(getNodes(), nextEdges);
+    onSelectionChange?.({ kind: null, id: null });
+  }, [selectedEdgeId, getEdges, setEdges, getNodes, commit, onSelectionChange]);
+  const handleEditNodeClick = useCallback(
+    (_e, node) => {
+      setSelectedEdgeId(null);
+      setSelectedNodeId(node.id);
+      onSelectionChange?.({
+        kind: node.data.isGroup === true ? "section" : "box",
+        id: node.id
+      });
+    },
+    [onSelectionChange]
+  );
+  const handleEditNodeContextMenu = useCallback(
+    (_e, node) => {
+      setSelectedEdgeId(null);
+      setSelectedNodeId(node.id);
+      onSelectionChange?.({
+        kind: node.data.isGroup === true ? "section" : "box",
+        id: node.id
+      });
+    },
+    [onSelectionChange]
+  );
+  const handleEditEdgeClick = useCallback(
+    (_e, edge) => {
+      setSelectedNodeId(null);
+      setSelectedEdgeId(edge.id);
+      onSelectionChange?.({ kind: "arrow", id: edge.id });
+    },
+    [onSelectionChange]
+  );
+  const handlePaneClick = useCallback(() => {
+    setSelectedNodeId(null);
+    setSelectedEdgeId(null);
+    onSelectionChange?.({ kind: null, id: null });
+  }, [onSelectionChange]);
+  const handleNodeDragStop = useCallback(() => {
+    commit(getNodes(), getEdges());
+  }, [commit, getNodes, getEdges]);
+  const selectedNode = editing ? nodes.find((n) => n.id === selectedNodeId) : void 0;
+  const selectedEdge = editing ? edges.find((e) => e.id === selectedEdgeId) : void 0;
+  const selectedIsSection = selectedNode?.data.isGroup === true;
+  const selectedIconName = normalizeDiagramIconName(
+    typeof selectedNode?.data.icon === "string" ? selectedNode.data.icon : "none"
+  );
+  const sections = editing ? nodes.filter((node) => node.data.isGroup === true) : [];
+  const patchRenderHints = useCallback(
+    (patch) => {
+      if (!onDiagramChange) return;
+      onDiagramChange(
+        materializeDiagramDefaults({
+          ...diagram,
+          renderHints: { ...diagram.renderHints, ...patch }
+        })
+      );
+    },
+    [diagram, onDiagramChange]
+  );
+  const patchLayout = useCallback(
+    (patch) => {
+      if (!onDiagramChange) return;
+      onDiagramChange(
+        materializeDiagramDefaults({
+          ...diagram,
+          layout: { ...diagram.layout, ...patch }
+        })
+      );
+    },
+    [diagram, onDiagramChange]
+  );
+  const chooseBackground = useCallback(
+    (variant) => {
+      setBackgroundVariant(variant);
+      patchRenderHints({
+        background: variant === BackgroundVariant.Lines ? "lines" : variant === BackgroundVariant.Cross ? "cross" : "dots"
+      });
+    },
+    [patchRenderHints, setBackgroundVariant]
+  );
+  const chooseMiniMap = useCallback(
+    (visible) => {
+      setShowMiniMap(visible);
+      patchRenderHints({ showMiniMap: visible });
+    },
+    [patchRenderHints, setShowMiniMap]
+  );
+  useEffect(() => {
+    setNodes(
+      (current) => current.map(
+        (node) => node.data.isGroup === true ? { ...node, data: { ...node.data, editing } } : node
+      )
+    );
+  }, [editing, setNodes]);
+  const handleNodesChange = useCallback(
+    (changes) => {
+      const next = applyNodeChanges(changes, getNodes());
+      setNodes(next);
+      if (editing && changes.some(
+        (change) => change.type === "dimensions" && change.resizing === false
+      )) {
+        commit(next, getEdges());
+      }
+    },
+    [setNodes, editing, commit, getNodes, getEdges]
+  );
+  const handleNodeClick = useCallback(
+    (_e, rfNode) => {
+      if (!onNodeClick) return;
+      const original = diagram.nodes.find((n) => n.id === rfNode.id);
+      if (original) onNodeClick(original);
+    },
+    [onNodeClick, diagram.nodes]
+  );
+  const exportImage = useCallback(() => {
+    const currentNodes = getNodes();
+    if (!currentNodes.length) {
+      onExportImage();
+      return;
+    }
+    const nodesBounds = getNodesBounds(currentNodes);
+    const imageWidth = 1200;
+    const imageHeight = 800;
+    const viewport = getViewportForBounds(
+      nodesBounds,
+      imageWidth,
+      imageHeight,
+      0.1,
+      2,
+      0.1
+    );
+    const reactFlowEl = document.querySelector(
+      ".react-flow"
+    );
+    if (!reactFlowEl) {
+      onExportImage();
+      return;
+    }
+    const isDark = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const bgColor = isDark ? "#111827" : "#ffffff";
+    const exportContainer = document.createElement("div");
+    exportContainer.style.cssText = `position:absolute;top:-9999px;left:-9999px;width:${imageWidth}px;height:${imageHeight}px;background:${bgColor}`;
+    if (isDark) exportContainer.classList.add("dark");
+    const cloned = reactFlowEl.cloneNode(true);
+    if (isDark) cloned.classList.add("dark");
+    cloned.style.cssText = `width:${imageWidth}px;height:${imageHeight}px;position:relative;overflow:hidden`;
+    const clonedViewport = cloned.querySelector(
+      ".react-flow__viewport"
+    );
+    if (clonedViewport) {
+      clonedViewport.style.transform = `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`;
+    }
+    exportContainer.appendChild(cloned);
+    document.body.appendChild(exportContainer);
+    import("html2canvas").then((mod) => {
+      const restore = patchComputedStyleForCapture(isDark);
+      return mod.default(exportContainer, {
+        backgroundColor: bgColor,
+        scale: 2,
+        useCORS: true,
+        allowTaint: true,
+        width: imageWidth,
+        height: imageHeight,
+        ignoreElements: (el) => el.classList.contains("react-flow__controls") || el.classList.contains("react-flow__minimap") || el.classList.contains("react-flow__panel")
+      }).finally(restore);
+    }).then((canvas) => {
+      const a = document.createElement("a");
+      a.download = `${diagram.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}_diagram${isDark ? "_dark" : "_light"}.png`;
+      a.href = canvas.toDataURL("image/png");
+      a.click();
+    }).catch((err) => console.warn("Diagram export failed:", err)).finally(() => document.body.removeChild(exportContainer));
+  }, [getNodes, diagram.title, onExportImage]);
+  const measuredWidth = useStore((s) => s.width);
+  const measuredHeight = useStore((s) => s.height);
+  const fitPadding = workspace ? 0.12 : 0.2;
+  const fitMinZoom = workspace ? 0.05 : 0.5;
+  const lastFitKey = useRef(null);
+  const fitViewAfterLayout = useCallback(() => {
+    lastFitKey.current = null;
+  }, []);
+  useEffect(() => {
+    if (editing) return void 0;
+    if (!nodesInitialized || !measuredWidth || !measuredHeight) return void 0;
+    const laidOut = getNodes();
+    if (!laidOut.length) return void 0;
+    const bounds = getNodesBounds(laidOut);
+    if (bounds.width <= 0 || bounds.height <= 0) return void 0;
+    const key = [
+      Math.round(measuredWidth),
+      Math.round(measuredHeight),
+      Math.round(bounds.x),
+      Math.round(bounds.y),
+      Math.round(bounds.width),
+      Math.round(bounds.height)
+    ].join(":");
+    if (lastFitKey.current === key) return void 0;
+    lastFitKey.current = key;
+    const frame = requestAnimationFrame(() => {
+      const contained = getViewportForBounds(
+        bounds,
+        measuredWidth,
+        measuredHeight,
+        fitMinZoom,
+        2,
+        fitPadding
+      );
+      let viewport = contained;
+      const firstRank = firstRankBounds(
+        laidOut.flatMap((n) => {
+          const w = n.measured?.width;
+          const h = n.measured?.height;
+          return !n.parentId && w && h ? [{ x: n.position.x, y: n.position.y, width: w, height: h }] : [];
+        })
+      );
+      const portraitFit = portraitWidthFitViewport({
+        presentation: canvasPresentation,
+        bounds,
+        firstRank,
+        width: measuredWidth,
+        height: measuredHeight,
+        minZoom: fitMinZoom,
+        maxZoom: 2,
+        padding: fitPadding,
+        containedZoom: contained.zoom
+      });
+      const isNarrowPhoneViewport = measuredWidth > 0 && measuredWidth < 640;
+      if (portraitFit) {
+        viewport = portraitFit;
+      } else if (isNarrowPhoneViewport && !diagramScrollPans(canvasPresentation)) {
+        const heightZoom = Math.min(
+          2,
+          Math.max(
+            fitMinZoom,
+            measuredHeight * (1 - fitPadding * 2) / bounds.height
+          )
+        );
+        if (heightZoom > contained.zoom) {
+          const zoom = Math.min(heightZoom, contained.zoom * 4, 2);
+          viewport = {
+            zoom,
+            x: measuredWidth / 2 - (bounds.x + bounds.width / 2) * zoom,
+            y: measuredHeight / 2 - (bounds.y + bounds.height / 2) * zoom
+          };
+        }
+      }
+      setViewport(viewport, { duration: 300 });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    editing,
+    nodesInitialized,
+    measuredWidth,
+    measuredHeight,
+    fitMinZoom,
+    fitPadding,
+    nodes,
+    getNodes,
+    setViewport,
+    canvasPresentation
+  ]);
+  const applyDirectedLayout = useCallback(
+    (direction) => {
+      const currentNodes = getNodes();
+      const currentEdges = getEdges();
+      if (currentNodes.length === 0) return;
+      let result;
+      if (diagram.type === "pedigree" && direction === "TB") {
+        result = getPedigreeLayout(currentNodes, currentEdges);
+      } else if (diagram.type === "orgchart") {
+        const opts = getLayoutOptionsForDiagramType(
+          diagram.type,
+          diagram.nodes.length,
+          direction
+        );
+        result = getOrgChartLayout(currentNodes, currentEdges, opts);
+        if (result.edges) setEdges(result.edges);
+      } else {
+        const opts = getLayoutOptionsForDiagramType(
+          diagram.type,
+          diagram.nodes.length,
+          direction
+        );
+        result = getLayoutedElements(currentNodes, currentEdges, opts);
+      }
+      setNodes(result.nodes);
+      commit(result.nodes, result.edges ?? currentEdges, {
+        algorithm: diagram.type === "pedigree" && direction === "TB" ? "pedigree" : "dagre",
+        direction
+      });
+      fitViewAfterLayout();
+      hasAutoLayoutApplied.current = true;
+    },
+    [
+      commit,
+      getNodes,
+      getEdges,
+      diagram.type,
+      diagram.nodes.length,
+      setNodes,
+      setEdges,
+      fitViewAfterLayout
+    ]
+  );
+  const applyGridLayout = useCallback(() => {
+    const currentEdges = getEdges();
+    const { nodes: laid } = getGridLayout(getNodes(), currentEdges);
+    setNodes(laid);
+    commit(laid, currentEdges, { algorithm: "grid" });
+    fitViewAfterLayout();
+    hasAutoLayoutApplied.current = true;
+  }, [getNodes, getEdges, setNodes, commit, fitViewAfterLayout]);
+  const applyRadialLayout = useCallback(() => {
+    const { nodes: laid } = getRadialLayout(getNodes(), getEdges());
+    setNodes(laid);
+    commit(laid, getEdges(), { algorithm: "radial" });
+    fitViewAfterLayout();
+    hasAutoLayoutApplied.current = true;
+  }, [getNodes, getEdges, setNodes, commit, fitViewAfterLayout]);
+  const applyAutoLayout = useCallback(() => {
+    if (diagram.layout?.algorithm === "radial") {
+      applyRadialLayout();
+      return;
+    }
+    if (diagram.layout?.algorithm === "grid") {
+      applyGridLayout();
+      return;
+    }
+    applyDirectedLayout(
+      diagramDirectionForFlow(canvasFlow, diagram.layout?.direction, diagram.type)
+    );
+  }, [
+    applyDirectedLayout,
+    applyGridLayout,
+    applyRadialLayout,
+    diagram.layout?.algorithm,
+    diagram.layout?.direction,
+    diagram.type,
+    canvasFlow
+  ]);
+  const arrangeByPerson = useCallback((arrange) => {
+    personArranged.current = true;
+    arrange();
+  }, []);
+  useEffect(() => {
+    const previousFlow = lastCanvasFlow.current;
+    lastCanvasFlow.current = canvasFlow;
+    if (!shouldRelayoutOnFlowChange({
+      previousFlow,
+      flow: canvasFlow,
+      autoLaidOut: hasAutoLayoutApplied.current,
+      personArranged: personArranged.current,
+      authoring: Boolean(onDiagramChange)
+    })) {
+      return;
+    }
+    applyAutoLayout();
+  }, [canvasFlow, applyAutoLayout, onDiagramChange]);
+  const resetLayout = useCallback(() => {
+    setNodes(buildReactFlowNodes(diagram, editing));
+    setEdges(buildReactFlowEdges(diagram));
+    fitViewAfterLayout();
+    hasAutoLayoutApplied.current = true;
+  }, [diagram, editing, setNodes, setEdges, fitViewAfterLayout]);
+  useEffect(() => {
+    if (onDiagramChange) return;
+    hasAutoLayoutApplied.current = false;
+  }, [diagram, onDiagramChange]);
+  useEffect(() => {
+    if (!nodesInitialized || hasAutoLayoutApplied.current) return void 0;
+    if (getNodes().length <= 1) return void 0;
+    if (onDiagramChange && diagram.nodes.length > 0 && diagram.nodes.every((n) => n.position)) {
+      hasAutoLayoutApplied.current = true;
+      fitViewAfterLayout();
+      return () => {
+        if (autoLayoutFrameRef.current !== null) {
+          cancelAnimationFrame(autoLayoutFrameRef.current);
+          autoLayoutFrameRef.current = null;
+        }
+      };
+    }
+    autoLayoutFrameRef.current = requestAnimationFrame(() => {
+      autoLayoutFrameRef.current = requestAnimationFrame(() => {
+        if (hasAutoLayoutApplied.current) return;
+        applyAutoLayout();
+      });
+    });
+    return () => {
+      if (autoLayoutFrameRef.current !== null) {
+        cancelAnimationFrame(autoLayoutFrameRef.current);
+        autoLayoutFrameRef.current = null;
+      }
+    };
+  }, [
+    nodesInitialized,
+    applyAutoLayout,
+    fitViewAfterLayout,
+    getNodes,
+    diagram,
+    onDiagramChange
+  ]);
+  return /* @__PURE__ */ jsxs(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      onNodesChange: handleNodesChange,
+      onEdgesChange,
+      onConnect,
+      onReconnect,
+      onNodeClick: editing ? handleEditNodeClick : onNodeClick ? handleNodeClick : void 0,
+      onNodeContextMenu: editing ? handleEditNodeContextMenu : void 0,
+      onEdgeClick: editing ? handleEditEdgeClick : void 0,
+      onPaneClick: editing ? handlePaneClick : void 0,
+      onNodeDragStop: editing ? handleNodeDragStop : void 0,
+      nodeTypes,
+      nodesDraggable: editing,
+      nodesConnectable: editing,
+      edgesReconnectable: editing,
+      snapToGrid: diagram.renderHints?.snapToGrid === true,
+      snapGrid: [20, 20],
+      elementsSelectable: editing || Boolean(onNodeClick),
+      deleteKeyCode: null,
+      minZoom: workspace ? 0.05 : 0.5,
+      maxZoom: 2,
+      fitView: false,
+      panOnScroll: !editing && diagramScrollPans(canvasPresentation),
+      proOptions: { hideAttribution: true },
+      className: `bg-gray-50 dark:bg-gray-900 ${workspace && editing ? "!w-[calc(100%-min(320px,48vw))] !overflow-visible" : ""} ${onNodeClick || editing ? "[&_.react-flow__node]:cursor-pointer" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          Background,
+          {
+            variant: backgroundVariant,
+            gap: 20,
+            size: 1,
+            className: "bg-gray-50 dark:bg-gray-900"
+          }
+        ),
+        diagram.renderHints?.showControls !== false && /* @__PURE__ */ jsx(
+          Controls,
+          {
+            className: "bg-textured border-border rounded-lg shadow-lg",
+            showInteractive: false
+          }
+        ),
+        showMiniMap && /* @__PURE__ */ jsx(
+          MiniMap,
+          {
+            className: "bg-textured border-border rounded-lg shadow-lg",
+            nodeColor: (node) => {
+              if (typeof node.data.color === "string" && node.data.color !== "auto") {
+                return getDiagramColorHex(node.data.color);
+              }
+              switch (node.data.nodeType) {
+                case "start":
+                  return "#10b981";
+                case "end":
+                  return "#ef4444";
+                case "decision":
+                  return "#f59e0b";
+                case "process":
+                  return "#3b82f6";
+                case "data":
+                  return "#8b5cf6";
+                default:
+                  return "#6b7280";
+              }
+            },
+            maskColor: "rgba(0,0,0,0.1)"
+          }
+        ),
+        editing && /* @__PURE__ */ jsxs(
+          Panel,
+          {
+            position: workspace ? "top-right" : "top-left",
+            className: workspace ? "!m-0 h-full w-[min(320px,48vw)] translate-x-full overflow-y-auto rounded-none border-l border-border/80 bg-card/95 p-4 shadow-[-8px_0_24px_-18px_rgba(15,23,42,0.45)] backdrop-blur-xl" : "max-h-[calc(100%-24px)] w-[286px] overflow-y-auto rounded-xl border border-border/80 bg-card/95 p-3 shadow-xl backdrop-blur",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2.5", children: [
+                /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-primary/10 p-2 text-primary-ink", children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: "Build your map" }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      nodes.filter((node) => node.data.isGroup !== true).length,
+                      " ",
+                      "boxes"
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      sections.length,
+                      " sections"
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      edges.length,
+                      " arrows"
+                    ] })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "primary", icon: /* @__PURE__ */ jsx(Plus, {}), onClick: addBox, "aria-label": "Add box", children: "Add box" }),
+                /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(Boxes, {}), onClick: addSection, "aria-label": "Add section", children: "Add section" })
+              ] }),
+              !selectedNode && !selectedEdge && /* @__PURE__ */ jsx("p", { className: "mt-2 text-[11px] leading-snug text-muted-foreground", children: "Click anything to shape it. Drag boxes to move them. Draw an arrow by dragging from the small dot on one box to another." }),
+              selectedNode && /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2.5 border-t border-border/70 pt-3", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: selectedIsSection ? "Section" : "Box" }),
+                /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                  "Name",
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      value: typeof selectedNode.data.label === "string" ? selectedNode.data.label : "",
+                      onChange: (e) => patchSelectedNode({ label: e.target.value }),
+                      className: "mt-1 w-full rounded border border-border bg-background px-2 py-1 text-xs text-foreground outline-none focus:border-primary",
+                      placeholder: "What is this step?"
+                    }
+                  )
+                ] }),
+                selectedIsSection ? /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                  "Border",
+                  /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      value: selectedNode.data.groupStyle === "solid" || selectedNode.data.groupStyle === "dotted" ? selectedNode.data.groupStyle : "dashed",
+                      onChange: (event) => patchSelectedNode({
+                        groupStyle: event.target.value
+                      }),
+                      className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "dashed", children: "Dashed" }),
+                        /* @__PURE__ */ jsx("option", { value: "dotted", children: "Dotted" }),
+                        /* @__PURE__ */ jsx("option", { value: "solid", children: "Solid" })
+                      ]
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                    "Notes",
+                    " ",
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "(optional)" }),
+                    /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        value: typeof selectedNode.data.description === "string" ? selectedNode.data.description : "",
+                        onChange: (event) => patchSelectedNode({ description: event.target.value }),
+                        rows: 2,
+                        className: "mt-1 w-full resize-none rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                        placeholder: "A short line of detail"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                    /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                      "Style",
+                      /* @__PURE__ */ jsxs(
+                        "select",
+                        {
+                          value: typeof selectedNode.data.nodeType === "string" ? selectedNode.data.nodeType : "default",
+                          onChange: (event) => patchSelectedNode({ nodeType: event.target.value }),
+                          className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                          children: [
+                            /* @__PURE__ */ jsx("option", { value: "default", children: "Plain" }),
+                            /* @__PURE__ */ jsx("option", { value: "start", children: "Start" }),
+                            /* @__PURE__ */ jsx("option", { value: "process", children: "Step" }),
+                            /* @__PURE__ */ jsx("option", { value: "decision", children: "Decision" }),
+                            /* @__PURE__ */ jsx("option", { value: "data", children: "Information" }),
+                            /* @__PURE__ */ jsx("option", { value: "end", children: "Finish" })
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                      "Section",
+                      /* @__PURE__ */ jsxs(
+                        "select",
+                        {
+                          value: selectedNode.parentId ?? "none",
+                          onChange: (event) => moveSelectedBoxToSection(
+                            event.target.value === "none" ? null : event.target.value
+                          ),
+                          className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                          children: [
+                            /* @__PURE__ */ jsx("option", { value: "none", children: "No section" }),
+                            sections.map((section) => /* @__PURE__ */ jsx("option", { value: section.id, children: String(section.data.label ?? "Section") }, section.id))
+                          ]
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-foreground", children: "Color" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+                    DIAGRAM_COLOR_PRESETS.map((preset) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => patchSelectedNode({ color: preset.value }),
+                        "aria-label": `Use ${preset.label.toLowerCase()}`,
+                        "aria-pressed": selectedNode.data.color === preset.value,
+                        className: `h-5 w-5 rounded-full border-2 transition-transform hover:scale-110 ${selectedNode.data.color === preset.value ? "border-primary ring-1 ring-primary" : "border-border"}`,
+                        style: { backgroundColor: preset.hex }
+                      },
+                      preset.value
+                    )),
+                    /* @__PURE__ */ jsxs(
+                      "label",
+                      {
+                        className: "relative h-5 w-5 overflow-hidden rounded-full border border-border",
+                        title: "Custom color",
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Custom color" }),
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              type: "color",
+                              "aria-label": "Choose a custom color",
+                              value: getDiagramColorHex(selectedNode.data.color),
+                              onChange: (event) => patchSelectedNode({ color: event.target.value }),
+                              className: "absolute -inset-2 h-9 w-9 cursor-pointer"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                !selectedIsSection && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-foreground", children: "Icon" }),
+                    /* @__PURE__ */ jsx(
+                      IconInputWithValidation,
+                      {
+                        value: selectedIconName === "none" ? "" : selectedIconName,
+                        onChange: (iconName) => patchSelectedNode({
+                          icon: iconName.trim() || "none"
+                        }),
+                        placeholder: "Search or enter an icon",
+                        className: "h-8"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                    /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                      "Shape",
+                      /* @__PURE__ */ jsxs(
+                        "select",
+                        {
+                          value: String(selectedNode.data.shape ?? "rounded"),
+                          onChange: (event) => patchSelectedNode({
+                            shape: event.target.value
+                          }),
+                          className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                          children: [
+                            /* @__PURE__ */ jsx("option", { value: "rounded", children: "Rounded" }),
+                            /* @__PURE__ */ jsx("option", { value: "rectangle", children: "Rectangle" }),
+                            /* @__PURE__ */ jsx("option", { value: "pill", children: "Pill" }),
+                            /* @__PURE__ */ jsx("option", { value: "circle", children: "Circle" }),
+                            /* @__PURE__ */ jsx("option", { value: "diamond", children: "Diamond" }),
+                            /* @__PURE__ */ jsx("option", { value: "hexagon", children: "Hexagon" })
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                      "Border",
+                      /* @__PURE__ */ jsxs(
+                        "select",
+                        {
+                          value: String(selectedNode.data.borderStyle ?? "solid"),
+                          onChange: (event) => patchSelectedNode({
+                            borderStyle: event.target.value
+                          }),
+                          className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                          children: [
+                            /* @__PURE__ */ jsx("option", { value: "solid", children: "Solid" }),
+                            /* @__PURE__ */ jsx("option", { value: "dashed", children: "Dashed" }),
+                            /* @__PURE__ */ jsx("option", { value: "dotted", children: "Dotted" })
+                          ]
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                    "Text",
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: String(selectedNode.data.textAlign ?? "left"),
+                        onChange: (event) => patchSelectedNode({
+                          textAlign: event.target.value
+                        }),
+                        className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "left", children: "Left" }),
+                          /* @__PURE__ */ jsx("option", { value: "center", children: "Centered" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: "Drag the selection handles to set an exact box size." })
+                ] }),
+                /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(Trash2, {}), onClick: deleteSelectedNode, "aria-label": selectedIsSection ? "Remove section and keep its boxes" : "Remove box", className: "w-full", children: selectedIsSection ? "Remove section (keep boxes)" : "Remove box" })
+              ] }),
+              selectedEdge && /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2.5 border-t border-border/70 pt-3", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: "Arrow" }),
+                /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                  "Arrow label",
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      value: typeof selectedEdge.label === "string" ? selectedEdge.label : "",
+                      onChange: (event) => patchSelectedEdge({ label: event.target.value }),
+                      className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                      placeholder: "e.g. sends to"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                  /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                    "Path",
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: selectedEdge.data?.edgeType === "smoothstep" || selectedEdge.data?.edgeType === "step" || selectedEdge.data?.edgeType === "straight" ? selectedEdge.data.edgeType : "bezier",
+                        onChange: (event) => patchSelectedEdge({
+                          edgeType: event.target.value
+                        }),
+                        className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "bezier", children: "Curved" }),
+                          /* @__PURE__ */ jsx("option", { value: "smoothstep", children: "Rounded" }),
+                          /* @__PURE__ */ jsx("option", { value: "step", children: "Stepped" }),
+                          /* @__PURE__ */ jsx("option", { value: "straight", children: "Straight" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                    "Line",
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: selectedEdge.data?.lineStyle === "dashed" || selectedEdge.data?.lineStyle === "dotted" ? selectedEdge.data.lineStyle : "solid",
+                        onChange: (event) => patchSelectedEdge({
+                          lineStyle: event.target.value
+                        }),
+                        className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "solid", children: "Solid" }),
+                          /* @__PURE__ */ jsx("option", { value: "dashed", children: "Dashed" }),
+                          /* @__PURE__ */ jsx("option", { value: "dotted", children: "Dotted" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                  /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                    "Direction",
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: String(selectedEdge.data?.marker ?? "end"),
+                        onChange: (event) => patchSelectedEdge({
+                          marker: event.target.value
+                        }),
+                        className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "end", children: "Forward" }),
+                          /* @__PURE__ */ jsx("option", { value: "start", children: "Backward" }),
+                          /* @__PURE__ */ jsx("option", { value: "both", children: "Both ends" }),
+                          /* @__PURE__ */ jsx("option", { value: "none", children: "No arrowheads" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                    "Weight",
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: String(selectedEdge.data?.strokeWidth ?? 2),
+                        onChange: (event) => patchSelectedEdge({
+                          strokeWidth: Number(event.target.value)
+                        }),
+                        className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "1", children: "Fine" }),
+                          /* @__PURE__ */ jsx("option", { value: "2", children: "Regular" }),
+                          /* @__PURE__ */ jsx("option", { value: "3", children: "Bold" }),
+                          /* @__PURE__ */ jsx("option", { value: "4", children: "Heavy" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-foreground", children: "Color" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+                    DIAGRAM_COLOR_PRESETS.map((preset) => /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => patchSelectedEdge({ color: preset.value }),
+                        "aria-label": `Use ${preset.label.toLowerCase()}`,
+                        "aria-pressed": selectedEdge.data?.color === preset.value,
+                        className: `h-5 w-5 rounded-full border-2 transition-transform hover:scale-110 ${selectedEdge.data?.color === preset.value ? "border-primary ring-1 ring-primary" : "border-border"}`,
+                        style: { backgroundColor: preset.hex }
+                      },
+                      preset.value
+                    )),
+                    /* @__PURE__ */ jsxs(
+                      "label",
+                      {
+                        className: "relative h-5 w-5 overflow-hidden rounded-full border border-border",
+                        title: "Custom color",
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Custom color" }),
+                          /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              type: "color",
+                              "aria-label": "Choose a custom arrow color",
+                              value: getDiagramColorHex(selectedEdge.data?.color),
+                              onChange: (event) => patchSelectedEdge({ color: event.target.value }),
+                              className: "absolute -inset-2 h-9 w-9 cursor-pointer"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1.5", children: /* @__PURE__ */ jsx(Button, { variant: "outline", pressed: selectedEdge.animated, onClick: () => patchSelectedEdge({ animated: !selectedEdge.animated }), children: selectedEdge.animated ? "Motion on" : "Motion off" }) }),
+                /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(Trash2, {}), onClick: deleteSelectedEdge, "aria-label": "Remove arrow", className: "w-full", children: "Remove arrow" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2.5 border-t border-border/70 pt-3", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground", children: "Map appearance" }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+                  /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                    "Background",
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: diagram.renderHints?.background ?? "dots",
+                        onChange: (event) => chooseBackground(
+                          event.target.value === "lines" ? BackgroundVariant.Lines : event.target.value === "cross" ? BackgroundVariant.Cross : BackgroundVariant.Dots
+                        ),
+                        className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "dots", children: "Dots" }),
+                          /* @__PURE__ */ jsx("option", { value: "lines", children: "Lines" }),
+                          /* @__PURE__ */ jsx("option", { value: "cross", children: "Crosses" })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { className: "block text-[11px] font-medium text-foreground", children: [
+                    "Flow",
+                    /* @__PURE__ */ jsxs(
+                      "select",
+                      {
+                        value: diagram.layout?.direction ?? "TB",
+                        onChange: (event) => patchLayout({
+                          direction: event.target.value
+                        }),
+                        className: "mt-1 w-full rounded-md border border-border bg-background px-2 py-1.5 text-xs text-foreground outline-none focus:border-primary",
+                        children: [
+                          /* @__PURE__ */ jsx("option", { value: "TB", children: "Top to bottom" }),
+                          /* @__PURE__ */ jsx("option", { value: "LR", children: "Left to right" }),
+                          /* @__PURE__ */ jsx("option", { value: "BT", children: "Bottom to top" }),
+                          /* @__PURE__ */ jsx("option", { value: "RL", children: "Right to left" })
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-1.5", children: [
+                  /* @__PURE__ */ jsxs(Button, { variant: "outline", pressed: showMiniMap, onClick: () => chooseMiniMap(!showMiniMap), children: [
+                    "Mini map ",
+                    showMiniMap ? "on" : "off"
+                  ] }),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => patchRenderHints({
+                        snapToGrid: diagram.renderHints?.snapToGrid !== true
+                      }),
+                      "aria-pressed": diagram.renderHints?.snapToGrid === true,
+                      className: `rounded-md border px-2 py-1.5 text-[11px] font-medium ${diagram.renderHints?.snapToGrid ? "border-primary/40 bg-primary/10 text-primary-ink" : "border-border text-muted-foreground"}`,
+                      children: [
+                        "Snap ",
+                        diagram.renderHints?.snapToGrid ? "on" : "off"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Button, { variant: "outline", pressed: diagram.renderHints?.showEdgeLabels !== false, onClick: () => patchRenderHints({
+                    showEdgeLabels: diagram.renderHints?.showEdgeLabels === false
+                  }), children: [
+                    "Labels",
+                    " ",
+                    diagram.renderHints?.showEdgeLabels !== false ? "on" : "off"
+                  ] }),
+                  /* @__PURE__ */ jsxs(Button, { variant: "outline", pressed: diagram.renderHints?.showLegend !== false, onClick: () => patchRenderHints({
+                    showLegend: diagram.renderHints?.showLegend === false
+                  }), children: [
+                    "Legend",
+                    " ",
+                    diagram.renderHints?.showLegend !== false ? "on" : "off"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-[10px] leading-snug text-muted-foreground", children: "Flow direction is used the next time you choose a directional layout." })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Panel,
+          {
+            position: "top-right",
+            className: `${workspace ? "!top-32 !right-3 sm:!top-3" : ""} rounded-xl border border-border/70 bg-card/90 p-1.5 shadow-lg backdrop-blur-xl`,
+            children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Arrange map",
+                    className: "flex items-center gap-1 rounded-lg border border-blue-200 bg-blue-50 p-2 text-blue-600 transition-colors hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950/20 dark:text-blue-400 dark:hover:bg-blue-900/30",
+                    title: "Arrange map",
+                    children: [
+                      /* @__PURE__ */ jsx(Shuffle, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", className: "w-52", children: [
+                  /* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Arrange map" }),
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => arrangeByPerson(() => applyDirectedLayout("TB")), children: [
+                    /* @__PURE__ */ jsx(ArrowDown, { className: "mr-2 h-4 w-4" }),
+                    "Top to bottom"
+                  ] }),
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => arrangeByPerson(() => applyDirectedLayout("LR")), children: [
+                    /* @__PURE__ */ jsx(ArrowRight, { className: "mr-2 h-4 w-4" }),
+                    "Left to right"
+                  ] }),
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => arrangeByPerson(() => applyDirectedLayout("BT")), children: [
+                    /* @__PURE__ */ jsx(ArrowUp, { className: "mr-2 h-4 w-4" }),
+                    "Bottom to top"
+                  ] }),
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => arrangeByPerson(() => applyDirectedLayout("RL")), children: [
+                    /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }),
+                    "Right to left"
+                  ] }),
+                  /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => arrangeByPerson(applyGridLayout), children: [
+                    /* @__PURE__ */ jsx(LayoutGrid, { className: "mr-2 h-4 w-4" }),
+                    "Balanced grid"
+                  ] }),
+                  /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: () => arrangeByPerson(applyRadialLayout), children: [
+                    /* @__PURE__ */ jsx(Circle, { className: "mr-2 h-4 w-4" }),
+                    "Around a center"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(RotateCcw, {}), onClick: () => arrangeByPerson(resetLayout), "aria-label": "Restore saved layout", title: "Reset Layout" }),
+                /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Square, {}), onClick: () => chooseBackground(
+                  backgroundVariant === BackgroundVariant.Dots ? BackgroundVariant.Lines : BackgroundVariant.Dots
+                ), "aria-label": backgroundVariant === BackgroundVariant.Dots ? "Use lined background" : "Use dotted background", title: "Toggle Background" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-center", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "quiet", pressed: showMiniMap, icon: /* @__PURE__ */ jsx(Layers, {}), onClick: () => chooseMiniMap(!showMiniMap), "aria-label": showMiniMap ? "Hide mini map" : "Show mini map", title: "Toggle Mini Map" }),
+                editing && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => patchRenderHints({
+                      snapToGrid: diagram.renderHints?.snapToGrid !== true
+                    }),
+                    "aria-label": diagram.renderHints?.snapToGrid ? "Turn off grid snapping" : "Turn on grid snapping",
+                    "aria-pressed": diagram.renderHints?.snapToGrid === true,
+                    className: `rounded-lg p-2 transition-colors ${diagram.renderHints?.snapToGrid ? "bg-blue-100 text-blue-700 dark:bg-blue-950/30 dark:text-blue-300" : "text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"}`,
+                    title: "Toggle snapping",
+                    children: /* @__PURE__ */ jsx(Magnet, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(Camera, {}), glyphTone: "success", onClick: exportImage, "aria-label": "Export map as image", title: "Export as Image" })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+};
+const ALL_LEGEND_ITEMS = [
+  {
+    type: "start",
+    label: "Start",
+    color: "bg-green-100 dark:bg-green-950/30 text-green-700 dark:text-green-300 border border-green-200 dark:border-green-800",
+    icon: CheckCircle2
+  },
+  {
+    type: "process",
+    label: "Process",
+    color: "bg-blue-100 dark:bg-blue-950/30 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800",
+    icon: Settings
+  },
+  {
+    type: "decision",
+    label: "Decision",
+    color: "bg-orange-100 dark:bg-orange-950/30 text-orange-700 dark:text-orange-300 border border-orange-200 dark:border-orange-800",
+    icon: GitBranch
+  },
+  {
+    type: "data",
+    label: "Data",
+    color: "bg-purple-100 dark:bg-purple-950/30 text-purple-700 dark:text-purple-300 border border-purple-200 dark:border-purple-800",
+    icon: Database
+  },
+  {
+    type: "end",
+    label: "End",
+    color: "bg-red-100 dark:bg-red-950/30 text-red-700 dark:text-red-300 border border-red-200 dark:border-red-800",
+    icon: XCircle
+  },
+  {
+    type: "user",
+    label: "User",
+    color: "bg-indigo-100 dark:bg-indigo-950/30 text-indigo-700 dark:text-indigo-300 border border-indigo-200 dark:border-indigo-800",
+    icon: Users
+  },
+  {
+    type: "system",
+    label: "System",
+    color: "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-800",
+    icon: Server
+  },
+  {
+    type: "api",
+    label: "API",
+    color: "bg-teal-100 dark:bg-teal-950/30 text-teal-700 dark:text-teal-300 border border-teal-200 dark:border-teal-800",
+    icon: Globe
+  },
+  {
+    type: "compute",
+    label: "Compute",
+    color: "bg-yellow-100 dark:bg-yellow-950/30 text-yellow-700 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-800",
+    icon: Cpu
+  },
+  {
+    type: "storage",
+    label: "Storage",
+    color: "bg-pink-100 dark:bg-pink-950/30 text-pink-700 dark:text-pink-300 border border-pink-200 dark:border-pink-800",
+    icon: HardDrive
+  },
+  {
+    type: "event",
+    label: "Event",
+    color: "bg-cyan-100 dark:bg-cyan-950/30 text-cyan-700 dark:text-cyan-300 border border-cyan-200 dark:border-cyan-800",
+    icon: Clock
+  },
+  {
+    type: "entity",
+    label: "Entity",
+    color: "bg-violet-100 dark:bg-violet-950/30 text-violet-700 dark:text-violet-300 border border-violet-200 dark:border-violet-800",
+    icon: Table
+  },
+  {
+    type: "gateway",
+    label: "Gateway",
+    color: "bg-amber-100 dark:bg-amber-950/30 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800",
+    icon: ArrowRight
+  },
+  {
+    type: "default",
+    label: "Node",
+    color: "bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-800",
+    icon: Square
+  }
+];
+const PedigreeLegend = () => /* @__PURE__ */ jsx("div", { className: "bg-textured rounded-xl p-3 border-border shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-3", children: [
+  [
+    {
+      label: "Male",
+      shape: "w-6 h-6 border-2 border-gray-600 bg-white dark:bg-gray-800"
+    },
+    {
+      label: "Female",
+      shape: "w-6 h-6 rounded-full border-2 border-gray-600 bg-white dark:bg-gray-800"
+    },
+    {
+      label: "Affected",
+      shape: "w-6 h-6 border-2 border-gray-600 bg-gray-800 dark:bg-gray-200"
+    },
+    {
+      label: "Deceased",
+      shape: "w-6 h-6 border-2 border-gray-600 bg-white dark:bg-gray-800 relative overflow-hidden"
+    },
+    {
+      label: "Proband \u2192",
+      shape: "w-6 h-6 border-4 border-blue-500 bg-white dark:bg-gray-800"
+    }
+  ].map(({ label, shape }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: shape }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: label })
+  ] }, label)),
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-8 h-px border-t-2 border-dashed border-gray-500" }),
+    /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: "Divorced" })
+  ] })
+] }) });
+function getDiagramIcon(type) {
+  switch (type) {
+    case "flowchart":
+      return /* @__PURE__ */ jsx(GitBranch, { className: "h-4 w-4" });
+    case "mindmap":
+      return /* @__PURE__ */ jsx(Rainbow, { className: "h-4 w-4" });
+    case "orgchart":
+      return /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" });
+    case "network":
+      return /* @__PURE__ */ jsx(Network, { className: "h-4 w-4" });
+    case "system":
+      return /* @__PURE__ */ jsx(Server, { className: "h-4 w-4" });
+    case "process":
+      return /* @__PURE__ */ jsx(Settings, { className: "h-4 w-4" });
+    case "pedigree":
+      return /* @__PURE__ */ jsx(Users, { className: "h-4 w-4" });
+    case "timeline":
+      return /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" });
+    case "erd":
+      return /* @__PURE__ */ jsx(Table, { className: "h-4 w-4" });
+    case "sequence":
+      return /* @__PURE__ */ jsx(ArrowRight, { className: "h-4 w-4" });
+    default:
+      return /* @__PURE__ */ jsx(Network, { className: "h-4 w-4" });
+  }
+}
+const InteractiveDiagramBlock = ({
+  diagram,
+  taskId,
+  messageId,
+  conversationId,
+  artifactId,
+  blockIndex,
+  presentation = "card",
+  onNodeClick,
+  defaultEditing = false,
+  onSelectionChange,
+  onDiagramChange
+}) => {
+  const isWorkspace = presentation === "workspace";
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [editing, setEditing] = useState(defaultEditing);
+  const canEdit = Boolean(onDiagramChange);
+  const [cardShowMiniMap, setCardShowMiniMap] = useState(false);
+  const [cardBackgroundVariant, setCardBackgroundVariant] = useState(BackgroundVariant.Dots);
+  const showMiniMap = editing ? diagram.renderHints?.showMiniMap === true : cardShowMiniMap;
+  const backgroundVariant = editing ? backgroundVariantFromDiagram(diagram) : cardBackgroundVariant;
+  const { open: openCanvas } = useCanvas();
+  const { openArtifact } = useOpenArtifactInCanvas();
+  const handleOpenCanvas = () => {
+    const def = getArtifactDef("diagram");
+    if (def?.materializable && isMaterializedArtifactId(artifactId)) {
+      void openArtifact({
+        canvasType: "diagram",
+        title: diagram.title,
+        content: JSON.stringify(diagram),
+        conversationId,
+        messageId,
+        artifactId,
+        artifactIndex: blockIndex && blockIndex > 0 ? blockIndex : 1
+      });
+      return;
+    }
+    openCanvas({
+      type: "diagram",
+      data: diagram,
+      metadata: {
+        title: diagram.title,
+        sourceTaskId: taskId,
+        sourceMessageId: messageId,
+        conversationId,
+        canvasItemId: artifactId
+      }
+    });
+  };
+  const diagramContainerId = useId();
+  const getDiagramElement = useCallback(
+    () => document.getElementById(diagramContainerId),
+    [diagramContainerId]
+  );
+  const diagramPrinter = useMemo(
+    () => createDiagramPrinter(getDiagramElement, diagram),
+    [getDiagramElement, diagram]
+  );
+  const {
+    open: printDialogOpen,
+    setOpen: setPrintDialogOpen,
+    triggerPrint
+  } = usePrintOptions(diagramPrinter, diagram);
+  const exportDiagramJSON = useCallback(() => {
+    const blob = new Blob([JSON.stringify({ diagram }, null, 2)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${diagram.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [diagram]);
+  const toggleEditing = () => {
+    const next = !editing;
+    setEditing(next);
+    if (!next) onSelectionChange?.({ kind: null, id: null });
+  };
+  const handleExportImage = useCallback(() => {
+    const viewport = document.querySelector(
+      ".react-flow__viewport"
+    );
+    if (!viewport) return;
+    const isDark = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
+    import("html2canvas").then((mod) => {
+      const restore = patchComputedStyleForCapture(isDark);
+      return mod.default(viewport, {
+        backgroundColor: isDark ? "#111827" : "#ffffff",
+        scale: 2,
+        useCORS: true
+      }).finally(restore);
+    }).then((canvas) => {
+      const a = document.createElement("a");
+      a.download = `${diagram.title.replace(/[^a-z0-9]/gi, "_").toLowerCase()}_diagram.png`;
+      a.href = canvas.toDataURL("image/png");
+      a.click();
+    }).catch((err) => console.warn("Image export failed:", err));
+  }, [diagram.title]);
+  const renderLegend = () => {
+    if (diagram.type === "orgchart") return null;
+    if (diagram.type === "pedigree") return /* @__PURE__ */ jsx(PedigreeLegend, {});
+    if (diagram.renderHints?.showLegend === false) return null;
+    const usedTypes = new Set(
+      diagram.nodes.map((n) => n.nodeType || n.type || "default")
+    );
+    const items = ALL_LEGEND_ITEMS.filter((item) => usedTypes.has(item.type));
+    if (items.length === 0 || items.length === 1 && items[0].type === "default")
+      return null;
+    return /* @__PURE__ */ jsx("div", { className: "bg-textured rounded-xl p-3 border-border shadow-sm", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `grid gap-3 ${items.length <= 2 ? "grid-cols-2" : items.length <= 3 ? "grid-cols-3" : "grid-cols-2 md:grid-cols-5"}`,
+        children: items.map(({ type, label, color, icon: Icon }) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex items-center gap-1 p-1 rounded-lg ${color} text-xs font-medium`,
+            children: [
+              /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx("span", { children: label })
+            ]
+          },
+          type
+        ))
+      }
+    ) });
+  };
+  const legend = renderLegend();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isWorkspace && isFullScreen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "fixed inset-0 z-40 bg-black/60 backdrop-blur-sm",
+        onClick: () => setIsFullScreen(false)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: (
+          // matrx-touch-targets floors every button/menu-item under it to a
+          // 44px hit area on touch/narrow viewports only (app/globals.css) —
+          // desktop density is untouched. Needed here because React Flow's
+          // own <Controls/> (Zoom in/out, Fit view) and the hand-rolled
+          // Arrange-map/Restore-layout/background/minimap/export buttons
+          // below all render at 26-34px, well under the iOS floor.
+          isWorkspace ? "relative h-full min-h-0 w-full overflow-hidden bg-background matrx-touch-targets" : `w-full rounded-xl border border-border matrx-touch-targets ${isFullScreen ? "fixed inset-0 z-50 flex items-center justify-center p-2" : "py-2"}`
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: isWorkspace ? "h-full min-h-0 w-full overflow-hidden" : `mx-auto w-full max-w-6xl ${isFullScreen ? "bg-textured flex h-full max-h-[95dvh] flex-col overflow-hidden rounded-xl border border-border shadow-2xl" : ""}`,
+            children: [
+              !isWorkspace && isFullScreen && /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 px-3 py-2 border-b border-border flex items-center justify-between bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-blue-600 dark:text-blue-400 flex-shrink-0 [&_svg]:h-4 [&_svg]:w-4", children: getDiagramIcon(diagram.type) }),
+                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground truncate", children: diagram.title })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+                  canEdit && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      icon: editing ? Check : Pencil,
+                      tooltip: editing ? "Done editing" : "Edit this map",
+                      "aria-label": editing ? "Done editing" : "Edit this map",
+                      onClick: toggleEditing,
+                      className: editing ? "bg-emerald-500 dark:bg-emerald-600 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700" : void 0,
+                      variant: editing ? void 0 : "outline"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      icon: Printer,
+                      tooltip: "Print / Save as PDF",
+                      "aria-label": "Print or save as PDF",
+                      onClick: triggerPrint
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      icon: Download,
+                      tooltip: "Export as JSON",
+                      "aria-label": "Export map as JSON",
+                      onClick: exportDiagramJSON,
+                      variant: "outline"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      icon: Minimize2,
+                      tooltip: "Exit full screen",
+                      "aria-label": "Exit full screen",
+                      onClick: () => setIsFullScreen(false),
+                      variant: "outline"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: isWorkspace ? "relative flex h-full min-h-0 flex-col overflow-hidden" : isFullScreen ? "flex min-h-0 flex-1 flex-col overflow-hidden p-2" : "p-2",
+                  children: [
+                    !isWorkspace && !isFullScreen && /* @__PURE__ */ jsx("div", { className: "bg-gradient-to-br from-blue-100 via-indigo-50 to-purple-100 dark:from-blue-950/40 dark:via-indigo-950/30 dark:to-purple-950/40 rounded-xl p-2 border border-blue-200 dark:border-blue-800/50 mb-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 flex-1 min-w-0", children: [
+                        /* @__PURE__ */ jsx("div", { className: "p-2 bg-blue-500 dark:bg-blue-600 rounded-lg flex-shrink-0 text-white [&_svg]:h-4 [&_svg]:w-4", children: getDiagramIcon(diagram.type) }),
+                        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsx("h1", { className: "text-sm font-bold text-foreground leading-tight line-clamp-2", children: diagram.title }),
+                          diagram.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5 line-clamp-2", children: diagram.description }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 flex-wrap mt-1", children: [
+                            /* @__PURE__ */ jsx(Chip, { tone: "blue", label: formatDiagramType(diagram.type) }),
+                            diagram.layout?.direction && /* @__PURE__ */ jsx("span", { className: "px-1.5 py-0.5 bg-muted text-muted-foreground rounded-full text-[10px]", children: diagram.layout.direction })
+                          ] })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+                        canEdit && /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            icon: editing ? Check : Pencil,
+                            tooltip: editing ? "Done editing" : "Edit this map",
+                            "aria-label": editing ? "Done editing" : "Edit this map",
+                            onClick: toggleEditing,
+                            className: editing ? "bg-emerald-500 dark:bg-emerald-600 text-white hover:bg-emerald-600 dark:hover:bg-emerald-700" : void 0,
+                            variant: editing ? void 0 : "outline"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            icon: Printer,
+                            tooltip: "Print / Save as PDF",
+                            "aria-label": "Print or save as PDF",
+                            onClick: triggerPrint
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            icon: ExternalLink,
+                            tooltip: "Open Canvas",
+                            "aria-label": "Open in Canvas",
+                            onClick: handleOpenCanvas
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            icon: Maximize2,
+                            tooltip: "Expand to full screen",
+                            "aria-label": "Expand to full screen",
+                            onClick: () => setIsFullScreen(true)
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          IconButton,
+                          {
+                            icon: Download,
+                            tooltip: "Export as JSON",
+                            "aria-label": "Export map as JSON",
+                            onClick: exportDiagramJSON,
+                            variant: "outline"
+                          }
+                        )
+                      ] })
+                    ] }) }),
+                    isWorkspace && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-3 left-1/2 z-20 -translate-x-1/2", children: /* @__PURE__ */ jsxs("div", { className: "pointer-events-auto flex items-center gap-1 rounded-xl border border-border/70 bg-card/90 p-1 shadow-lg backdrop-blur-xl", children: [
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          icon: Printer,
+                          tooltip: "Print or save as PDF",
+                          "aria-label": "Print or save as PDF",
+                          onClick: triggerPrint,
+                          variant: "ghost"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        IconButton,
+                        {
+                          icon: Download,
+                          tooltip: "Export map as JSON",
+                          "aria-label": "Export map as JSON",
+                          onClick: exportDiagramJSON,
+                          variant: "ghost"
+                        }
+                      )
+                    ] }) }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        id: diagramContainerId,
+                        className: isWorkspace ? "min-h-0 flex-1 overflow-hidden bg-textured" : `${isFullScreen ? "min-h-0 flex-1" : "h-[600px]"} overflow-hidden rounded-xl border border-border bg-textured`,
+                        children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+                          DiagramFlow,
+                          {
+                            diagram,
+                            workspace: isWorkspace,
+                            showMiniMap,
+                            setShowMiniMap: setCardShowMiniMap,
+                            backgroundVariant,
+                            setBackgroundVariant: setCardBackgroundVariant,
+                            onExportImage: handleExportImage,
+                            onNodeClick,
+                            onSelectionChange,
+                            editing: canEdit && editing,
+                            onDiagramChange
+                          }
+                        ) })
+                      }
+                    ),
+                    !isWorkspace && legend && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: isFullScreen ? "flex-shrink-0 px-4 py-3 border-t border-border" : "mt-4",
+                        children: legend
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      PrintOptionsDialog,
+      {
+        printer: diagramPrinter,
+        data: diagram,
+        open: printDialogOpen,
+        onOpenChange: setPrintDialogOpen
+      }
+    )
+  ] });
+};
+var InteractiveDiagramBlock_default = InteractiveDiagramBlock;
+export {
+  InteractiveDiagramBlock_default as default
+};