@particle-academy/react-fancy 2.10.0 → 3.0.0

package/dist/index.js

@@ -2,7 +2,7 @@ import { forwardRef, createContext, useId, useRef, useEffect, useState, useCallb
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LucideIcons from 'lucide-react';
-import { X, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Search, Menu, File, Upload, PanelLeftOpen, PanelLeftClose, ZoomIn, ZoomOut, RotateCcw, Maximize, Check, XCircle, AlertTriangle, Info } from 'lucide-react';
+import { X, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Search, Menu, File, Upload, PanelLeftOpen, PanelLeftClose, Check, XCircle, AlertTriangle, Info } from 'lucide-react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { marked } from 'marked';
@@ -11454,1653 +11454,6 @@ var Kanban = Object.assign(KanbanRoot, {
   Card: KanbanCard,
   ColumnHandle: KanbanColumnHandle
 });
-var CanvasContext = createContext(null);
-function useCanvas() {
-  const ctx = useContext(CanvasContext);
-  if (!ctx) throw new Error("useCanvas must be used within a Canvas component");
-  return ctx;
-}
-function CanvasNode({ children, id, x, y, draggable, onPositionChange, className, style }) {
-  const { registerNode, unregisterNode, viewport, gridSize, snapToGrid } = useCanvas();
-  const nodeRef = useRef(null);
-  const isDragging = useRef(false);
-  const dragStart = useRef({ mouseX: 0, mouseY: 0, nodeX: 0, nodeY: 0 });
-  useEffect(() => {
-    const el = nodeRef.current;
-    if (!el) return;
-    const updateRect = () => {
-      registerNode(id, { x, y, width: el.offsetWidth, height: el.offsetHeight });
-    };
-    updateRect();
-    const observer = new ResizeObserver(updateRect);
-    observer.observe(el);
-    return () => {
-      observer.disconnect();
-      unregisterNode(id);
-    };
-  }, [id, x, y, registerNode, unregisterNode]);
-  const handlePointerDown = useCallback(
-    (e) => {
-      if (!draggable || e.button !== 0) return;
-      e.stopPropagation();
-      isDragging.current = true;
-      dragStart.current = { mouseX: e.clientX, mouseY: e.clientY, nodeX: x, nodeY: y };
-      e.target.setPointerCapture(e.pointerId);
-    },
-    [draggable, x, y]
-  );
-  const handlePointerMove = useCallback(
-    (e) => {
-      if (!isDragging.current) return;
-      const dx = (e.clientX - dragStart.current.mouseX) / viewport.zoom;
-      const dy = (e.clientY - dragStart.current.mouseY) / viewport.zoom;
-      let nx = dragStart.current.nodeX + dx;
-      let ny = dragStart.current.nodeY + dy;
-      if (snapToGrid && gridSize > 0) {
-        nx = Math.round(nx / gridSize) * gridSize;
-        ny = Math.round(ny / gridSize) * gridSize;
-      }
-      onPositionChange?.(nx, ny);
-    },
-    [viewport.zoom, onPositionChange, snapToGrid, gridSize]
-  );
-  const handlePointerUp = useCallback(() => {
-    isDragging.current = false;
-  }, []);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: nodeRef,
-      "data-react-fancy-canvas-node": "",
-      "data-node-id": id,
-      className: cn("absolute", draggable && "cursor-grab active:cursor-grabbing", className),
-      style: { left: x, top: y, ...style },
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      children
-    }
-  );
-}
-CanvasNode.displayName = "CanvasNode";
-
-// src/components/Canvas/canvas.utils.ts
-function getAnchorPoint(rect, anchor, otherRect) {
-  const cx = rect.x + rect.width / 2;
-  const cy = rect.y + rect.height / 2;
-  if (anchor === "auto" && otherRect) {
-    const ocx = otherRect.x + otherRect.width / 2;
-    const ocy = otherRect.y + otherRect.height / 2;
-    const dx = ocx - cx;
-    const dy = ocy - cy;
-    if (Math.abs(dx) > Math.abs(dy)) {
-      return dx > 0 ? { x: rect.x + rect.width, y: cy } : { x: rect.x, y: cy };
-    }
-    return dy > 0 ? { x: cx, y: rect.y + rect.height } : { x: cx, y: rect.y };
-  }
-  switch (anchor) {
-    case "top":
-      return { x: cx, y: rect.y };
-    case "bottom":
-      return { x: cx, y: rect.y + rect.height };
-    case "left":
-      return { x: rect.x, y: cy };
-    case "right":
-      return { x: rect.x + rect.width, y: cy };
-    case "center":
-      return { x: cx, y: cy };
-    default:
-      return { x: cx, y: cy };
-  }
-}
-function bezierPath(from, to) {
-  const dx = Math.abs(to.x - from.x);
-  const dy = Math.abs(to.y - from.y);
-  if (dx > dy) {
-    const offset2 = dx * 0.5;
-    const cp1x = from.x + (to.x > from.x ? offset2 : -offset2);
-    const cp2x = to.x + (to.x > from.x ? -offset2 : offset2);
-    return `M${from.x},${from.y} C${cp1x},${from.y} ${cp2x},${to.y} ${to.x},${to.y}`;
-  }
-  const offset = Math.max(dy * 0.5, 30);
-  const cp1y = from.y + (to.y > from.y ? offset : -offset);
-  const cp2y = to.y + (to.y > from.y ? -offset : offset);
-  return `M${from.x},${from.y} C${from.x},${cp1y} ${to.x},${cp2y} ${to.x},${to.y}`;
-}
-function stepPath(from, to) {
-  const midX = (from.x + to.x) / 2;
-  return `M${from.x},${from.y} H${midX} V${to.y} H${to.x}`;
-}
-function straightPath(from, to) {
-  return `M${from.x},${from.y} L${to.x},${to.y}`;
-}
-function getEdgePath(from, to, curve = "bezier") {
-  switch (curve) {
-    case "bezier":
-      return bezierPath(from, to);
-    case "step":
-      return stepPath(from, to);
-    case "straight":
-      return straightPath(from, to);
-  }
-}
-function CanvasEdge({
-  from,
-  to,
-  fromAnchor = "auto",
-  toAnchor = "auto",
-  curve = "bezier",
-  color = "currentColor",
-  strokeWidth = 2,
-  dashed = false,
-  animated = false,
-  label,
-  className,
-  markerStart,
-  markerEnd
-}) {
-  const { nodeRects, registryVersion } = useCanvas();
-  const path = useMemo(() => {
-    const fromRect = nodeRects.get(from);
-    const toRect = nodeRects.get(to);
-    if (!fromRect || !toRect) return null;
-    const fromPt = getAnchorPoint(fromRect, fromAnchor, toRect);
-    const toPt = getAnchorPoint(toRect, toAnchor, fromRect);
-    return {
-      d: getEdgePath(fromPt, toPt, curve),
-      midX: (fromPt.x + toPt.x) / 2,
-      midY: (fromPt.y + toPt.y) / 2
-    };
-  }, [from, to, fromAnchor, toAnchor, curve, nodeRects, registryVersion]);
-  if (!path) return null;
-  return /* @__PURE__ */ jsxs("g", { "data-react-fancy-canvas-edge": "", className: cn("text-zinc-300 dark:text-zinc-600", className), children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: path.d,
-        fill: "none",
-        stroke: color,
-        strokeWidth,
-        strokeDasharray: dashed ? "6 4" : void 0,
-        markerStart: markerStart ? `url(#${markerStart})` : void 0,
-        markerEnd: markerEnd ? `url(#${markerEnd})` : void 0,
-        className: animated ? "animate-[dash_1s_linear_infinite]" : "",
-        style: animated ? { strokeDasharray: "8 4" } : void 0
-      }
-    ),
-    label && /* @__PURE__ */ jsx("foreignObject", { x: path.midX - 40, y: path.midY - 12, width: 80, height: 24, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-xs text-zinc-500", children: label }) })
-  ] });
-}
-CanvasEdge.displayName = "CanvasEdge";
-function CanvasMinimap({ width = 150, height = 100, className }) {
-  const { nodeRects, registryVersion, viewport } = useCanvas();
-  const bounds = useMemo(() => {
-    if (nodeRects.size === 0) return { minX: 0, minY: 0, maxX: 500, maxY: 300 };
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    nodeRects.forEach((r) => {
-      minX = Math.min(minX, r.x);
-      minY = Math.min(minY, r.y);
-      maxX = Math.max(maxX, r.x + r.width);
-      maxY = Math.max(maxY, r.y + r.height);
-    });
-    const padding = 50;
-    return { minX: minX - padding, minY: minY - padding, maxX: maxX + padding, maxY: maxY + padding };
-  }, [nodeRects, registryVersion]);
-  const scaleX = width / (bounds.maxX - bounds.minX || 1);
-  const scaleY = height / (bounds.maxY - bounds.minY || 1);
-  const scale = Math.min(scaleX, scaleY);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      "data-react-fancy-canvas-minimap": "",
-      className: cn(
-        "absolute right-3 bottom-3 overflow-hidden rounded-lg border border-zinc-200 bg-white/90 dark:border-zinc-700 dark:bg-zinc-900/90",
-        className
-      ),
-      style: { width, height },
-      children: /* @__PURE__ */ jsxs("svg", { width, height, children: [
-        Array.from(nodeRects.entries()).map(([id, rect]) => /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: (rect.x - bounds.minX) * scale,
-            y: (rect.y - bounds.minY) * scale,
-            width: Math.max(rect.width * scale, 4),
-            height: Math.max(rect.height * scale, 3),
-            rx: 1,
-            className: "fill-blue-400/60"
-          },
-          id
-        )),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: (-viewport.panX / viewport.zoom - bounds.minX) * scale,
-            y: (-viewport.panY / viewport.zoom - bounds.minY) * scale,
-            width: (width / viewport.zoom / scale > 0 ? width / viewport.zoom : width) * scale / (bounds.maxX - bounds.minX || 1) * (bounds.maxX - bounds.minX),
-            height: (height / viewport.zoom / scale > 0 ? height / viewport.zoom : height) * scale / (bounds.maxY - bounds.minY || 1) * (bounds.maxY - bounds.minY),
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: 1,
-            className: "text-blue-500"
-          }
-        )
-      ] })
-    }
-  );
-}
-CanvasMinimap.displayName = "CanvasMinimap";
-function CanvasControls({
-  className,
-  showZoomIn = true,
-  showZoomOut = true,
-  showReset = true,
-  showFitAll = true
-}) {
-  const { setViewport, nodeRects, containerRef } = useCanvas();
-  const zoomIn = () => setViewport((v) => ({ ...v, zoom: Math.min(3, v.zoom * 1.25) }));
-  const zoomOut = () => setViewport((v) => ({ ...v, zoom: Math.max(0.1, v.zoom / 1.25) }));
-  const reset = () => setViewport({ panX: 0, panY: 0, zoom: 1 });
-  const fitAll = () => {
-    const container = containerRef.current;
-    if (!container || nodeRects.size === 0) return reset();
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    nodeRects.forEach((r) => {
-      minX = Math.min(minX, r.x);
-      minY = Math.min(minY, r.y);
-      maxX = Math.max(maxX, r.x + r.width);
-      maxY = Math.max(maxY, r.y + r.height);
-    });
-    const padding = 40;
-    const contentW = maxX - minX + padding * 2;
-    const contentH = maxY - minY + padding * 2;
-    const cw = container.clientWidth;
-    const ch = container.clientHeight;
-    const zoom = Math.min(cw / contentW, ch / contentH, 1.5);
-    const panX = (cw - contentW * zoom) / 2 - minX * zoom + padding * zoom;
-    const panY = (ch - contentH * zoom) / 2 - minY * zoom + padding * zoom;
-    setViewport({ panX, panY, zoom });
-  };
-  const btnClass = "flex h-8 w-8 items-center justify-center rounded-md text-zinc-500 hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-300 transition-colors";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-react-fancy-canvas-controls": "",
-      className: cn(
-        "absolute bottom-3 left-3 flex gap-1 rounded-lg border border-zinc-200 bg-white/90 p-1 shadow-sm dark:border-zinc-700 dark:bg-zinc-900/90",
-        className
-      ),
-      children: [
-        showZoomIn && /* @__PURE__ */ jsx("button", { type: "button", onClick: zoomIn, className: btnClass, "aria-label": "Zoom in", children: /* @__PURE__ */ jsx(ZoomIn, { size: 16 }) }),
-        showZoomOut && /* @__PURE__ */ jsx("button", { type: "button", onClick: zoomOut, className: btnClass, "aria-label": "Zoom out", children: /* @__PURE__ */ jsx(ZoomOut, { size: 16 }) }),
-        showReset && /* @__PURE__ */ jsx("button", { type: "button", onClick: reset, className: btnClass, "aria-label": "Reset view", children: /* @__PURE__ */ jsx(RotateCcw, { size: 16 }) }),
-        showFitAll && /* @__PURE__ */ jsx("button", { type: "button", onClick: fitAll, className: btnClass, "aria-label": "Fit all", children: /* @__PURE__ */ jsx(Maximize, { size: 16 }) })
-      ]
-    }
-  );
-}
-CanvasControls.displayName = "CanvasControls";
-var DEFAULT_VIEWPORT = { panX: 0, panY: 0, zoom: 1 };
-function CanvasRoot({
-  children,
-  viewport: controlledViewport,
-  defaultViewport = DEFAULT_VIEWPORT,
-  onViewportChange,
-  minZoom = 0.1,
-  maxZoom = 3,
-  pannable = true,
-  zoomable = true,
-  showGrid = false,
-  gridStyle = "dots",
-  gridSize = 20,
-  gridColor = "rgb(161 161 170 / 0.3)",
-  snapToGrid = false,
-  fitOnMount = false,
-  className,
-  style
-}) {
-  const containerRef = useRef(null);
-  const [viewport, setViewport] = useControllableState(controlledViewport, defaultViewport, onViewportChange);
-  const { registerNode, unregisterNode, nodeRects, version: registryVersion } = useNodeRegistry();
-  const { containerProps } = usePanZoom({
-    viewport,
-    setViewport,
-    minZoom,
-    maxZoom,
-    pannable,
-    zoomable,
-    containerRef
-  });
-  const ctx = useMemo(
-    () => ({ viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, containerRef, gridSize, snapToGrid }),
-    [viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, gridSize, snapToGrid]
-  );
-  const hasFitted = useRef(false);
-  useEffect(() => {
-    if (!fitOnMount || hasFitted.current || nodeRects.size === 0) return;
-    const container = containerRef.current;
-    if (!container || container.clientWidth === 0) return;
-    hasFitted.current = true;
-    requestAnimationFrame(() => {
-      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-      nodeRects.forEach((r) => {
-        minX = Math.min(minX, r.x);
-        minY = Math.min(minY, r.y);
-        maxX = Math.max(maxX, r.x + r.width);
-        maxY = Math.max(maxY, r.y + r.height);
-      });
-      const padding = 40;
-      const contentW = maxX - minX + padding * 2;
-      const contentH = maxY - minY + padding * 2;
-      const cw = container.clientWidth;
-      const ch = container.clientHeight;
-      const zoom = Math.min(cw / contentW, ch / contentH, 1.5);
-      const panX = (cw - contentW * zoom) / 2 - minX * zoom + padding * zoom;
-      const panY = (ch - contentH * zoom) / 2 - minY * zoom + padding * zoom;
-      setViewport({ panX, panY, zoom });
-    });
-  }, [fitOnMount, nodeRects, registryVersion, setViewport]);
-  const edges = [];
-  const others = [];
-  const overlays = [];
-  Children.forEach(children, (child) => {
-    const el = child;
-    if (!el || !el.type) return;
-    const elType = el.type;
-    if (elType === CanvasEdge || elType?._isCanvasEdge) {
-      edges.push(el);
-    } else if (elType === CanvasMinimap || elType === CanvasControls) {
-      overlays.push(el);
-    } else {
-      others.push(el);
-    }
-  });
-  return /* @__PURE__ */ jsx(CanvasContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      "data-react-fancy-canvas": "",
-      className: cn("relative overflow-hidden", className),
-      style: { touchAction: "none", ...style },
-      ...containerProps,
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-canvas-bg": "",
-            className: "absolute inset-0",
-            style: showGrid && gridStyle !== "none" ? gridStyle === "lines" ? {
-              backgroundImage: `linear-gradient(to right, ${gridColor} 1px, transparent 1px), linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)`,
-              backgroundSize: `${gridSize * viewport.zoom}px ${gridSize * viewport.zoom}px`,
-              backgroundPosition: `${viewport.panX}px ${viewport.panY}px`
-            } : {
-              backgroundImage: `radial-gradient(circle, ${gridColor} 1px, transparent 1px)`,
-              backgroundSize: `${gridSize * viewport.zoom}px ${gridSize * viewport.zoom}px`,
-              backgroundPosition: `${viewport.panX}px ${viewport.panY}px`
-            } : void 0
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "absolute origin-top-left",
-            style: {
-              transform: `translate(${viewport.panX}px, ${viewport.panY}px) scale(${viewport.zoom})`
-            },
-            children: others
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            className: "pointer-events-none absolute inset-0 h-full w-full",
-            style: {
-              transform: `translate(${viewport.panX}px, ${viewport.panY}px) scale(${viewport.zoom})`,
-              transformOrigin: "0 0"
-            },
-            children: [
-              /* @__PURE__ */ jsxs("defs", { children: [
-                /* @__PURE__ */ jsx("marker", { id: "canvas-arrow", viewBox: "0 0 10 10", refX: "10", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L10,5 L0,10 Z", fill: "#71717a" }) }),
-                /* @__PURE__ */ jsx("marker", { id: "canvas-circle", viewBox: "0 0 10 10", refX: "5", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto", children: /* @__PURE__ */ jsx("circle", { cx: "5", cy: "5", r: "3.5", fill: "#71717a" }) }),
-                /* @__PURE__ */ jsx("marker", { id: "canvas-diamond", viewBox: "0 0 12 12", refX: "6", refY: "6", markerWidth: "10", markerHeight: "10", orient: "auto", children: /* @__PURE__ */ jsx("polygon", { points: "6,0 12,6 6,12 0,6", fill: "none", stroke: "#71717a", strokeWidth: "1.5" }) }),
-                /* @__PURE__ */ jsx("marker", { id: "canvas-one", viewBox: "0 0 2 16", refX: "1", refY: "8", markerWidth: "2", markerHeight: "14", orient: "auto", children: /* @__PURE__ */ jsx("line", { x1: "1", y1: "0", x2: "1", y2: "16", stroke: "#71717a", strokeWidth: "2" }) }),
-                /* @__PURE__ */ jsxs("marker", { id: "canvas-crow-foot", viewBox: "0 0 16 16", refX: "16", refY: "8", markerWidth: "14", markerHeight: "14", orient: "auto", children: [
-                  /* @__PURE__ */ jsx("line", { x1: "16", y1: "8", x2: "0", y2: "0", stroke: "#71717a", strokeWidth: "2", strokeLinecap: "round" }),
-                  /* @__PURE__ */ jsx("line", { x1: "16", y1: "8", x2: "0", y2: "8", stroke: "#71717a", strokeWidth: "2", strokeLinecap: "round" }),
-                  /* @__PURE__ */ jsx("line", { x1: "16", y1: "8", x2: "0", y2: "16", stroke: "#71717a", strokeWidth: "2", strokeLinecap: "round" }),
-                  /* @__PURE__ */ jsx("line", { x1: "16", y1: "0", x2: "16", y2: "16", stroke: "#71717a", strokeWidth: "2", strokeLinecap: "round" })
-                ] })
-              ] }),
-              edges
-            ]
-          }
-        ),
-        overlays
-      ]
-    }
-  ) });
-}
-var Canvas = Object.assign(CanvasRoot, {
-  Node: CanvasNode,
-  Edge: CanvasEdge,
-  Minimap: CanvasMinimap,
-  Controls: CanvasControls
-});
-var DiagramContext = createContext(null);
-function useDiagram() {
-  const ctx = useContext(DiagramContext);
-  if (!ctx) {
-    throw new Error("useDiagram must be used within a <Diagram> component");
-  }
-  return ctx;
-}
-function DiagramField({
-  name,
-  type,
-  primary = false,
-  foreign = false,
-  nullable = false,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-react-fancy-diagram-field": "",
-      className: cn(
-        "flex items-center justify-between gap-2 border-t border-zinc-200 px-3 py-1 text-sm dark:border-zinc-700",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-          primary && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded bg-blue-100 px-1 py-0.5 text-[10px] font-semibold leading-none text-blue-700 dark:bg-blue-900/50 dark:text-blue-300", children: "PK" }),
-          foreign && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded bg-amber-100 px-1 py-0.5 text-[10px] font-semibold leading-none text-amber-700 dark:bg-amber-900/50 dark:text-amber-300", children: "FK" }),
-          /* @__PURE__ */ jsx("span", { className: "text-zinc-800 dark:text-zinc-200", children: name })
-        ] }),
-        type && /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xs text-zinc-400 dark:text-zinc-500", children: [
-          type,
-          nullable && "?"
-        ] })
-      ]
-    }
-  );
-}
-DiagramField.displayName = "DiagramField";
-function DiagramEntity({
-  children,
-  id: idProp,
-  name,
-  x = 0,
-  y = 0,
-  color = "bg-blue-600 dark:bg-blue-500",
-  draggable,
-  onPositionChange,
-  className
-}) {
-  const id = idProp ?? name;
-  const fields = [];
-  const other = [];
-  Children.forEach(children, (child) => {
-    const el = child;
-    if (!el || !el.type) return;
-    if (el.type === DiagramField) {
-      fields.push(el);
-    } else {
-      other.push(el);
-    }
-  });
-  return /* @__PURE__ */ jsx(Canvas.Node, { id, x, y, draggable, onPositionChange, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-react-fancy-diagram-entity": "",
-      "data-entity-id": id,
-      className: cn(
-        "w-[220px] overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-800",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "px-3 py-2 text-sm font-semibold text-white",
-              color
-            ),
-            children: name
-          }
-        ),
-        fields.length > 0 && /* @__PURE__ */ jsx("div", { children: fields }),
-        other
-      ]
-    }
-  ) });
-}
-DiagramEntity.displayName = "DiagramEntity";
-
-// src/components/Diagram/diagram.markers.ts
-function defaultMarkersForType(type) {
-  switch (type) {
-    case "one-to-one":
-      return { fromMarker: "one", toMarker: "one", lineStyle: "solid" };
-    case "one-to-many":
-      return { fromMarker: "one", toMarker: "many", lineStyle: "solid" };
-    case "many-to-one":
-      return { fromMarker: "many", toMarker: "one", lineStyle: "solid" };
-    case "many-to-many":
-      return { fromMarker: "many", toMarker: "many", lineStyle: "solid" };
-    case "association":
-      return { fromMarker: "none", toMarker: "arrow", lineStyle: "solid" };
-    case "aggregation":
-      return { fromMarker: "diamond-open", toMarker: "none", lineStyle: "solid" };
-    case "composition":
-      return { fromMarker: "diamond", toMarker: "none", lineStyle: "solid" };
-    case "inheritance":
-      return { fromMarker: "none", toMarker: "triangle-open", lineStyle: "solid" };
-    case "implementation":
-      return { fromMarker: "none", toMarker: "triangle-open", lineStyle: "dashed" };
-    case "dependency":
-      return { fromMarker: "none", toMarker: "arrow", lineStyle: "dashed" };
-    default:
-      return { fromMarker: "none", toMarker: "none", lineStyle: "solid" };
-  }
-}
-var SIZE = 12;
-function renderMarker(marker, pt, direction) {
-  if (typeof marker === "string" && marker.startsWith("emoji:")) {
-    return { paths: [], text: marker.slice(6) };
-  }
-  switch (marker) {
-    case "none":
-      return null;
-    case "arrow":
-      return { paths: [{ d: arrowPath(pt, direction), fill: "stroke" }] };
-    case "arrow-open":
-      return { paths: [{ d: arrowPath(pt, direction), fill: "none" }] };
-    case "circle":
-      return { paths: [{ d: circlePath(pt), fill: "stroke" }] };
-    case "circle-open":
-      return { paths: [{ d: circlePath(pt), fill: "background" }] };
-    case "square":
-      return { paths: [{ d: squarePath(pt, direction), fill: "stroke" }] };
-    case "square-open":
-      return { paths: [{ d: squarePath(pt, direction), fill: "background" }] };
-    case "diamond":
-      return { paths: [{ d: diamondPath(pt, direction), fill: "stroke" }] };
-    case "diamond-open":
-      return { paths: [{ d: diamondPath(pt, direction), fill: "background" }] };
-    case "triangle":
-      return { paths: [{ d: trianglePath(pt, direction), fill: "stroke" }] };
-    case "triangle-open":
-      return { paths: [{ d: trianglePath(pt, direction), fill: "background" }] };
-    case "cross":
-      return { paths: [{ d: crossPath(pt, direction), fill: "none" }] };
-    case "one":
-      return { paths: [{ d: oneSymbol(pt, direction), fill: "none" }] };
-    case "many":
-      return { paths: [{ d: crowFootSymbol(pt, direction), fill: "none" }] };
-    case "optional-one":
-      return {
-        paths: [
-          { d: circleOuter(pt, direction), fill: "background" },
-          { d: oneSymbolOffset(pt, direction), fill: "none" }
-        ]
-      };
-    case "optional-many":
-      return {
-        paths: [
-          { d: circleOuter(pt, direction), fill: "background" },
-          { d: crowFootSymbolOffset(pt, direction), fill: "none" }
-        ]
-      };
-    default:
-      if (typeof marker === "string" && marker !== "") {
-        return { paths: [], text: marker };
-      }
-      return null;
-  }
-}
-function markerInset(marker) {
-  if (marker === "none" || marker === void 0) return 0;
-  if (typeof marker === "string" && (marker.startsWith("emoji:") || !KNOWN_MARKERS.has(marker))) {
-    return SIZE;
-  }
-  switch (marker) {
-    case "circle":
-    case "circle-open":
-      return SIZE * 0.6;
-    case "one":
-      return 0;
-    // bar sits AT endpoint
-    case "many":
-      return SIZE;
-    case "optional-one":
-      return SIZE * 1.2;
-    case "optional-many":
-      return SIZE * 1.8;
-    default:
-      return SIZE;
-  }
-}
-var KNOWN_MARKERS = /* @__PURE__ */ new Set([
-  "none",
-  "arrow",
-  "arrow-open",
-  "circle",
-  "circle-open",
-  "square",
-  "square-open",
-  "diamond",
-  "diamond-open",
-  "triangle",
-  "triangle-open",
-  "one",
-  "many",
-  "optional-one",
-  "optional-many",
-  "cross"
-]);
-function dirVec(direction) {
-  switch (direction) {
-    case "left":
-      return [-1, 0];
-    case "right":
-      return [1, 0];
-    case "up":
-      return [0, -1];
-    case "down":
-      return [0, 1];
-  }
-}
-function perpVec(direction) {
-  switch (direction) {
-    case "left":
-    case "right":
-      return [0, 1];
-    case "up":
-    case "down":
-      return [1, 0];
-  }
-}
-function arrowPath(pt, direction, _filled) {
-  const [dx, dy] = dirVec(direction);
-  const [px, py] = perpVec(direction);
-  const tipX = pt.x + dx * SIZE;
-  const tipY = pt.y + dy * SIZE;
-  const baseAX = pt.x + px * (SIZE * 0.55);
-  const baseAY = pt.y + py * (SIZE * 0.55);
-  const baseBX = pt.x - px * (SIZE * 0.55);
-  const baseBY = pt.y - py * (SIZE * 0.55);
-  return `M${baseAX},${baseAY} L${tipX},${tipY} L${baseBX},${baseBY} Z`;
-}
-function circlePath(pt, _filled) {
-  const r = SIZE * 0.45;
-  return `M${pt.x - r},${pt.y} a${r},${r} 0 1 0 ${r * 2},0 a${r},${r} 0 1 0 ${-r * 2},0 Z`;
-}
-function squarePath(pt, direction, _filled) {
-  const [dx, dy] = dirVec(direction);
-  const [px, py] = perpVec(direction);
-  const half = SIZE * 0.5;
-  const cx = pt.x + dx * half;
-  const cy = pt.y + dy * half;
-  const tlX = cx - px * half - dx * half;
-  const tlY = cy - py * half - dy * half;
-  const trX = cx + px * half - dx * half;
-  const trY = cy + py * half - dy * half;
-  const brX = cx + px * half + dx * half;
-  const brY = cy + py * half + dy * half;
-  const blX = cx - px * half + dx * half;
-  const blY = cy - py * half + dy * half;
-  return `M${tlX},${tlY} L${trX},${trY} L${brX},${brY} L${blX},${blY} Z`;
-}
-function diamondPath(pt, direction, _filled) {
-  const [dx, dy] = dirVec(direction);
-  const [px, py] = perpVec(direction);
-  const len = SIZE * 1.2;
-  const cx = pt.x + dx * (len / 2);
-  const cy = pt.y + dy * (len / 2);
-  const aX = pt.x;
-  const aY = pt.y;
-  const bX = cx + px * (SIZE * 0.45);
-  const bY = cy + py * (SIZE * 0.45);
-  const tX = pt.x + dx * len;
-  const tY = pt.y + dy * len;
-  const dX = cx - px * (SIZE * 0.45);
-  const dY = cy - py * (SIZE * 0.45);
-  return `M${aX},${aY} L${bX},${bY} L${tX},${tY} L${dX},${dY} Z`;
-}
-function trianglePath(pt, direction, _filled) {
-  const [dx, dy] = dirVec(direction);
-  const [px, py] = perpVec(direction);
-  const len = SIZE * 1.1;
-  const baseCX = pt.x + dx * len;
-  const baseCY = pt.y + dy * len;
-  const baseAX = baseCX + px * (SIZE * 0.6);
-  const baseAY = baseCY + py * (SIZE * 0.6);
-  const baseBX = baseCX - px * (SIZE * 0.6);
-  const baseBY = baseCY - py * (SIZE * 0.6);
-  return `M${pt.x},${pt.y} L${baseAX},${baseAY} L${baseBX},${baseBY} Z`;
-}
-function crossPath(pt, direction) {
-  const [dx, dy] = dirVec(direction);
-  const [px, py] = perpVec(direction);
-  const s = SIZE * 0.5;
-  const cx = pt.x + dx * (SIZE * 0.5);
-  const cy = pt.y + dy * (SIZE * 0.5);
-  return [
-    `M${cx - s * (px + dx)},${cy - s * (py + dy)} L${cx + s * (px + dx)},${cy + s * (py + dy)}`,
-    `M${cx - s * (px - dx)},${cy - s * (py - dy)} L${cx + s * (px - dx)},${cy + s * (py - dy)}`
-  ].join(" ");
-}
-function oneSymbol(pt, direction) {
-  const [, py] = perpVec(direction);
-  const [px] = perpVec(direction);
-  const half = SIZE * 0.6;
-  return `M${pt.x - px * half},${pt.y - py * half} L${pt.x + px * half},${pt.y + py * half}`;
-}
-function crowFootSymbol(pt, direction) {
-  const [dx, dy] = dirVec(direction);
-  const [px, py] = perpVec(direction);
-  const tipX = pt.x + dx * SIZE;
-  const tipY = pt.y + dy * SIZE;
-  const spread = SIZE * 0.8;
-  const aX = pt.x + px * spread, aY = pt.y + py * spread;
-  const cX = pt.x - px * spread, cY = pt.y - py * spread;
-  return [
-    `M${aX},${aY} L${tipX},${tipY}`,
-    `M${pt.x},${pt.y} L${tipX},${tipY}`,
-    `M${cX},${cY} L${tipX},${tipY}`,
-    `M${aX},${aY} L${cX},${cY}`
-  ].join(" ");
-}
-function circleOuter(pt, direction) {
-  const [dx, dy] = dirVec(direction);
-  const r = SIZE * 0.4;
-  const cx = pt.x + dx * (SIZE * 0.4 + r);
-  const cy = pt.y + dy * (SIZE * 0.4 + r);
-  return `M${cx - r},${cy} a${r},${r} 0 1 0 ${r * 2},0 a${r},${r} 0 1 0 ${-r * 2},0 Z`;
-}
-function oneSymbolOffset(pt, direction) {
-  const [px, py] = perpVec(direction);
-  const half = SIZE * 0.6;
-  return `M${pt.x - px * half},${pt.y - py * half} L${pt.x + px * half},${pt.y + py * half}`;
-}
-function crowFootSymbolOffset(pt, direction) {
-  const [dx, dy] = dirVec(direction);
-  const [px, py] = perpVec(direction);
-  const inset = SIZE * 0.8;
-  const startX = pt.x + dx * inset;
-  const startY = pt.y + dy * inset;
-  const tipX = pt.x + dx * (inset + SIZE);
-  const tipY = pt.y + dy * (inset + SIZE);
-  const spread = SIZE * 0.8;
-  const aX = startX + px * spread, aY = startY + py * spread;
-  const cX = startX - px * spread, cY = startY - py * spread;
-  return [
-    `M${aX},${aY} L${tipX},${tipY}`,
-    `M${startX},${startY} L${tipX},${tipY}`,
-    `M${cX},${cY} L${tipX},${tipY}`
-  ].join(" ");
-}
-
-// src/components/Diagram/diagram.routing.ts
-var STUB = 24;
-var DODGE_PADDING = 16;
-var MAX_DODGE_ITERATIONS = 6;
-function pickAnchors(from, to, fromY, toY) {
-  const fcx = from.x + from.width / 2;
-  const fcy = from.y + from.height / 2;
-  const tcx = to.x + to.width / 2;
-  const tcy = to.y + to.height / 2;
-  const dx = tcx - fcx;
-  const dy = tcy - fcy;
-  let fromSide, toSide;
-  if (Math.abs(dx) >= Math.abs(dy)) {
-    fromSide = dx >= 0 ? "right" : "left";
-    toSide = dx >= 0 ? "left" : "right";
-  } else {
-    fromSide = dy >= 0 ? "bottom" : "top";
-    toSide = dy >= 0 ? "top" : "bottom";
-  }
-  return {
-    from: anchorOnSide(from, fromSide, fromY),
-    to: anchorOnSide(to, toSide, toY)
-  };
-}
-function anchorOnSide(box, side, fieldY) {
-  switch (side) {
-    case "right":
-      return { side, x: box.x + box.width, y: box.y + (fieldY ?? box.height / 2) };
-    case "left":
-      return { side, x: box.x, y: box.y + (fieldY ?? box.height / 2) };
-    case "top":
-      return { side, x: box.x + box.width / 2, y: box.y };
-    case "bottom":
-      return { side, x: box.x + box.width / 2, y: box.y + box.height };
-  }
-}
-function stubOut(a, distance2 = STUB) {
-  switch (a.side) {
-    case "right":
-      return { x: a.x + distance2, y: a.y };
-    case "left":
-      return { x: a.x - distance2, y: a.y };
-    case "top":
-      return { x: a.x, y: a.y - distance2 };
-    case "bottom":
-      return { x: a.x, y: a.y + distance2 };
-  }
-}
-function manhattanPath(from, to, obstacles = []) {
-  const f = { x: from.x, y: from.y };
-  const t = { x: to.x, y: to.y };
-  const fs = stubOut(from);
-  const ts = stubOut(to);
-  const fHoriz = from.side === "left" || from.side === "right";
-  const tHoriz = to.side === "left" || to.side === "right";
-  if (fHoriz && tHoriz) {
-    const midX = pickClearMidX((fs.x + ts.x) / 2, fs.y, ts.y, obstacles);
-    return uniqPath([
-      f,
-      fs,
-      { x: midX, y: fs.y },
-      { x: midX, y: ts.y },
-      ts,
-      t
-    ]);
-  }
-  if (!fHoriz && !tHoriz) {
-    const midY = pickClearMidY((fs.y + ts.y) / 2, fs.x, ts.x, obstacles);
-    return uniqPath([
-      f,
-      fs,
-      { x: fs.x, y: midY },
-      { x: ts.x, y: midY },
-      ts,
-      t
-    ]);
-  }
-  if (fHoriz) {
-    return uniqPath([
-      f,
-      fs,
-      { x: ts.x, y: fs.y },
-      ts,
-      t
-    ]);
-  }
-  return uniqPath([
-    f,
-    fs,
-    { x: fs.x, y: ts.y },
-    ts,
-    t
-  ]);
-}
-function pickClearMidX(idealX, y1, y2, obstacles) {
-  if (obstacles.length === 0) return idealX;
-  const yMin = Math.min(y1, y2);
-  const yMax = Math.max(y1, y2);
-  let midX = idealX;
-  for (let i = 0; i < 4; i++) {
-    let shifted = false;
-    for (const ob of obstacles) {
-      if (ob.y + ob.height + DODGE_PADDING < yMin) continue;
-      if (ob.y - DODGE_PADDING > yMax) continue;
-      const left = ob.x - DODGE_PADDING;
-      const right = ob.x + ob.width + DODGE_PADDING;
-      if (midX > left && midX < right) {
-        midX = Math.abs(midX - left) <= Math.abs(midX - right) ? left - 1 : right + 1;
-        shifted = true;
-      }
-    }
-    if (!shifted) break;
-  }
-  return midX;
-}
-function pickClearMidY(idealY, x1, x2, obstacles) {
-  if (obstacles.length === 0) return idealY;
-  const xMin = Math.min(x1, x2);
-  const xMax = Math.max(x1, x2);
-  let midY = idealY;
-  for (let i = 0; i < 4; i++) {
-    let shifted = false;
-    for (const ob of obstacles) {
-      if (ob.x + ob.width + DODGE_PADDING < xMin) continue;
-      if (ob.x - DODGE_PADDING > xMax) continue;
-      const top = ob.y - DODGE_PADDING;
-      const bot = ob.y + ob.height + DODGE_PADDING;
-      if (midY > top && midY < bot) {
-        midY = Math.abs(midY - top) <= Math.abs(midY - bot) ? top - 1 : bot + 1;
-        shifted = true;
-      }
-    }
-    if (!shifted) break;
-  }
-  return midY;
-}
-function uniqPath(points) {
-  const out = [];
-  for (const p of points) {
-    const last = out[out.length - 1];
-    if (!last || Math.abs(last.x - p.x) > 0.5 || Math.abs(last.y - p.y) > 0.5) {
-      out.push(p);
-    }
-  }
-  return out;
-}
-function dodgeObstacles(path, obstacles, padding = DODGE_PADDING) {
-  if (obstacles.length === 0 || path.length < 2) return path;
-  let working = path.slice();
-  for (let iter = 0; iter < MAX_DODGE_ITERATIONS; iter++) {
-    let dodged = false;
-    const result = [working[0]];
-    for (let i = 1; i < working.length; i++) {
-      const a = result[result.length - 1];
-      const b = working[i];
-      const detour = detourAround(a, b, obstacles, padding);
-      if (detour.length === 0) {
-        result.push(b);
-      } else {
-        for (const p of detour) result.push(p);
-        result.push(b);
-        dodged = true;
-      }
-    }
-    working = uniqPath(result);
-    if (!dodged) break;
-  }
-  return working;
-}
-function detourAround(a, b, obstacles, padding) {
-  const isHorizontal = Math.abs(a.y - b.y) < 0.5;
-  const isVertical = Math.abs(a.x - b.x) < 0.5;
-  if (!isHorizontal && !isVertical) return [];
-  let best = null;
-  for (const r of obstacles) {
-    const expanded = expandRect(r, padding);
-    if (!segmentCrossesRect(a, b, expanded)) continue;
-    let entry, exit;
-    if (isHorizontal) {
-      entry = b.x > a.x ? expanded.x : expanded.x + expanded.width;
-      exit = b.x > a.x ? expanded.x + expanded.width : expanded.x;
-    } else {
-      entry = b.y > a.y ? expanded.y : expanded.y + expanded.height;
-      exit = b.y > a.y ? expanded.y + expanded.height : expanded.y;
-    }
-    const dist = isHorizontal ? Math.abs(entry - a.x) : Math.abs(entry - a.y);
-    if (!best || dist < (isHorizontal ? Math.abs(best.entry - a.x) : Math.abs(best.entry - a.y))) {
-      best = { rect: expanded, entry, exit };
-    }
-  }
-  if (!best) return [];
-  if (isHorizontal) {
-    const aboveY = best.rect.y - 1;
-    const belowY = best.rect.y + best.rect.height + 1;
-    const detourY = Math.abs(a.y - aboveY) <= Math.abs(a.y - belowY) ? aboveY : belowY;
-    return [
-      { x: best.entry, y: a.y },
-      { x: best.entry, y: detourY },
-      { x: best.exit, y: detourY },
-      { x: best.exit, y: a.y }
-    ];
-  } else {
-    const leftX = best.rect.x - 1;
-    const rightX = best.rect.x + best.rect.width + 1;
-    const detourX = Math.abs(a.x - leftX) <= Math.abs(a.x - rightX) ? leftX : rightX;
-    return [
-      { x: a.x, y: best.entry },
-      { x: detourX, y: best.entry },
-      { x: detourX, y: best.exit },
-      { x: a.x, y: best.exit }
-    ];
-  }
-}
-function expandRect(r, padding) {
-  return {
-    x: r.x - padding,
-    y: r.y - padding,
-    width: r.width + padding * 2,
-    height: r.height + padding * 2
-  };
-}
-function segmentCrossesRect(a, b, rect) {
-  const xMin = Math.min(a.x, b.x);
-  const xMax = Math.max(a.x, b.x);
-  const yMin = Math.min(a.y, b.y);
-  const yMax = Math.max(a.y, b.y);
-  if (xMax < rect.x) return false;
-  if (xMin > rect.x + rect.width) return false;
-  if (yMax < rect.y) return false;
-  if (yMin > rect.y + rect.height) return false;
-  if (a.x >= rect.x + 1 && a.x <= rect.x + rect.width - 1 && a.y >= rect.y + 1 && a.y <= rect.y + rect.height - 1) return false;
-  if (b.x >= rect.x + 1 && b.x <= rect.x + rect.width - 1 && b.y >= rect.y + 1 && b.y <= rect.y + rect.height - 1) return false;
-  return true;
-}
-function pathFromPoints(points, cornerRadius = 8) {
-  if (points.length === 0) return "";
-  if (points.length === 1) return `M${points[0].x},${points[0].y}`;
-  if (points.length === 2 || cornerRadius <= 0) {
-    return points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
-  }
-  let d = `M${points[0].x},${points[0].y}`;
-  for (let i = 1; i < points.length - 1; i++) {
-    const prev = points[i - 1];
-    const curr = points[i];
-    const next = points[i + 1];
-    const r = Math.min(
-      cornerRadius,
-      distance(prev, curr) / 2,
-      distance(curr, next) / 2
-    );
-    if (r < 1) {
-      d += ` L${curr.x},${curr.y}`;
-      continue;
-    }
-    const beforeX = curr.x + Math.sign(prev.x - curr.x) * r;
-    const beforeY = curr.y + Math.sign(prev.y - curr.y) * r;
-    const afterX = curr.x + Math.sign(next.x - curr.x) * r;
-    const afterY = curr.y + Math.sign(next.y - curr.y) * r;
-    d += ` L${beforeX},${beforeY} Q${curr.x},${curr.y} ${afterX},${afterY}`;
-  }
-  const last = points[points.length - 1];
-  d += ` L${last.x},${last.y}`;
-  return d;
-}
-function distance(a, b) {
-  return Math.hypot(b.x - a.x, b.y - a.y);
-}
-function bezierPath2(from, to) {
-  const fs = stubOut(from, Math.max(40, distance(from, to) * 0.3));
-  const ts = stubOut(to, Math.max(40, distance(from, to) * 0.3));
-  return `M${from.x},${from.y} C${fs.x},${fs.y} ${ts.x},${ts.y} ${to.x},${to.y}`;
-}
-function midPoint(points) {
-  if (points.length === 0) return { x: 0, y: 0 };
-  if (points.length === 1) return points[0];
-  let total = 0;
-  const segLens = [];
-  for (let i = 1; i < points.length; i++) {
-    const len = distance(points[i - 1], points[i]);
-    segLens.push(len);
-    total += len;
-  }
-  let target = total / 2;
-  for (let i = 0; i < segLens.length; i++) {
-    if (target <= segLens[i]) {
-      const t = segLens[i] === 0 ? 0 : target / segLens[i];
-      const a = points[i];
-      const b = points[i + 1];
-      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
-    }
-    target -= segLens[i];
-  }
-  return points[points.length - 1];
-}
-function insetEndpoints(points, inset) {
-  if (points.length < 2) return points;
-  const result = points.slice();
-  if (inset.from > 0) {
-    const a = result[0];
-    const b = result[1];
-    const len = distance(a, b);
-    if (len > inset.from) {
-      const t = inset.from / len;
-      result[0] = { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
-    }
-  }
-  if (inset.to > 0) {
-    const lastIdx = result.length - 1;
-    const a = result[lastIdx];
-    const b = result[lastIdx - 1];
-    const len = distance(a, b);
-    if (len > inset.to) {
-      const t = inset.to / len;
-      result[lastIdx] = { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
-    }
-  }
-  return result;
-}
-var HEADER_HEIGHT = 36;
-var FIELD_HEIGHT = 29;
-var DEFAULT_COLOR2 = "#71717a";
-function markerDirection(side) {
-  switch (side) {
-    case "left":
-      return "right";
-    // entity body is to the right of a left-side anchor
-    case "right":
-      return "left";
-    case "top":
-      return "down";
-    case "bottom":
-      return "up";
-  }
-}
-function strokeDashArray(style) {
-  switch (style) {
-    case "dashed":
-      return "8 4";
-    case "dotted":
-      return "2 4";
-    default:
-      return void 0;
-  }
-}
-function DiagramRelation({
-  from,
-  to,
-  fromField: fromFieldProp,
-  toField: toFieldProp,
-  type,
-  fromMarker: fromMarkerProp,
-  toMarker: toMarkerProp,
-  lineStyle: lineStyleProp,
-  routing = "manhattan",
-  color = DEFAULT_COLOR2,
-  strokeWidth = 2,
-  label
-}) {
-  const { nodeRects, registryVersion } = useCanvas();
-  const { schema } = useDiagram();
-  const result = useMemo(() => {
-    const fromRect = nodeRects.get(from);
-    const toRect = nodeRects.get(to);
-    if (!fromRect || !toRect) return null;
-    const defaults = defaultMarkersForType(type);
-    const fromMarker = fromMarkerProp ?? defaults.fromMarker;
-    const toMarker = toMarkerProp ?? defaults.toMarker;
-    const lineStyle = lineStyleProp ?? defaults.lineStyle;
-    const fromEntity = schema.entities.find((e) => (e.id ?? e.name) === from);
-    const toEntity = schema.entities.find((e) => (e.id ?? e.name) === to);
-    const fromFieldY = resolveFieldY(fromRect, fromEntity?.fields, fromFieldProp, true);
-    const toFieldY = resolveFieldY(toRect, toEntity?.fields, toFieldProp, false, fromEntity?.name ?? from);
-    const anchors = pickAnchors(fromRect, toRect, fromFieldY, toFieldY);
-    if (anchors.from.side === "top" || anchors.from.side === "bottom") {
-      anchors.from.x = fromRect.x + fromRect.width / 2;
-    }
-    if (anchors.to.side === "top" || anchors.to.side === "bottom") {
-      anchors.to.x = toRect.x + toRect.width / 2;
-    }
-    let points;
-    if (routing === "straight") {
-      points = [
-        { x: anchors.from.x, y: anchors.from.y },
-        { x: anchors.to.x, y: anchors.to.y }
-      ];
-    } else if (routing === "bezier") {
-      points = [];
-    } else {
-      const obstacles = [];
-      nodeRects.forEach((rect, id) => {
-        if (id === from || id === to) return;
-        obstacles.push(rect);
-      });
-      const initial = manhattanPath(anchors.from, anchors.to, obstacles);
-      points = dodgeObstacles(initial, obstacles);
-    }
-    const insetAmount = { from: markerInset(fromMarker), to: markerInset(toMarker) };
-    if (routing !== "bezier") {
-      points = insetEndpoints(points, insetAmount);
-    }
-    const linePath = routing === "bezier" ? bezierPath2(anchors.from, anchors.to) : pathFromPoints(points);
-    const fromMarkerRenderable = renderMarker(
-      fromMarker,
-      { x: anchors.from.x, y: anchors.from.y },
-      markerDirection(anchors.from.side)
-    );
-    const toMarkerRenderable = renderMarker(
-      toMarker,
-      { x: anchors.to.x, y: anchors.to.y },
-      markerDirection(anchors.to.side)
-    );
-    const mid = routing === "bezier" ? { x: (anchors.from.x + anchors.to.x) / 2, y: (anchors.from.y + anchors.to.y) / 2 } : midPoint(points);
-    return {
-      linePath,
-      fromMarker: fromMarkerRenderable,
-      toMarker: toMarkerRenderable,
-      fromAnchor: anchors.from,
-      toAnchor: anchors.to,
-      mid,
-      lineStyle
-    };
-  }, [
-    from,
-    to,
-    fromFieldProp,
-    toFieldProp,
-    type,
-    fromMarkerProp,
-    toMarkerProp,
-    lineStyleProp,
-    routing,
-    schema,
-    nodeRects,
-    registryVersion
-  ]);
-  if (!result) return null;
-  const dashArray = strokeDashArray(result.lineStyle);
-  return /* @__PURE__ */ jsxs("g", { "data-react-fancy-diagram-relation": "", children: [
-    /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: result.linePath,
-        fill: "none",
-        stroke: color,
-        strokeWidth,
-        strokeDasharray: dashArray,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      }
-    ),
-    result.fromMarker?.paths.map((shape, i) => /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: shape.d,
-        fill: shape.fill === "stroke" ? color : shape.fill === "background" ? "#ffffff" : "none",
-        stroke: color,
-        strokeWidth,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      },
-      `fm-${i}`
-    )),
-    result.fromMarker?.text && /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: result.fromAnchor.x,
-        y: result.fromAnchor.y,
-        fontSize: 16,
-        textAnchor: "middle",
-        dominantBaseline: "middle",
-        style: { userSelect: "none" },
-        children: result.fromMarker.text
-      }
-    ),
-    result.toMarker?.text && /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: result.toAnchor.x,
-        y: result.toAnchor.y,
-        fontSize: 16,
-        textAnchor: "middle",
-        dominantBaseline: "middle",
-        style: { userSelect: "none" },
-        children: result.toMarker.text
-      }
-    ),
-    result.toMarker?.paths.map((shape, i) => /* @__PURE__ */ jsx(
-      "path",
-      {
-        d: shape.d,
-        fill: shape.fill === "stroke" ? color : shape.fill === "background" ? "#ffffff" : "none",
-        stroke: color,
-        strokeWidth,
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      },
-      `tm-${i}`
-    )),
-    label && /* @__PURE__ */ jsx("foreignObject", { x: result.mid.x - 50, y: result.mid.y - 12, width: 100, height: 24, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-xs text-zinc-500", children: /* @__PURE__ */ jsx("span", { className: "rounded bg-white/90 px-1.5 py-0.5 dark:bg-zinc-900/90", children: label }) }) })
-  ] });
-}
-function resolveFieldY(rect, fields, fieldProp, isFrom, fromName) {
-  if (!fields || fields.length === 0) return void 0;
-  let idx = -1;
-  if (fieldProp) {
-    idx = fields.findIndex((f) => f.name === fieldProp);
-  } else if (isFrom) {
-    idx = fields.findIndex((f) => f.primary);
-  } else {
-    const lower = (fromName ?? "").toLowerCase();
-    idx = fields.findIndex(
-      (f) => f.foreign && (f.name === `${lower}_id` || f.name === `${lower}Id`)
-    );
-    if (idx === -1) idx = fields.findIndex((f) => f.foreign);
-  }
-  if (idx < 0) return void 0;
-  return HEADER_HEIGHT + idx * FIELD_HEIGHT + FIELD_HEIGHT / 2;
-}
-DiagramRelation._isCanvasEdge = true;
-DiagramRelation.displayName = "DiagramRelation";
-var FORMAT_LABELS = {
-  erd: "ERD",
-  uml: "UML",
-  dfd: "DFD"
-};
-var FORMAT_EXTENSIONS = {
-  erd: "erd",
-  uml: "puml",
-  dfd: "dfd"
-};
-function DiagramToolbar({ className }) {
-  const { schema, downloadableRef, importableRef, exportFormats, onImport } = useDiagram();
-  const fileInputRef = useRef(null);
-  const canDownload = downloadableRef.current;
-  const canImport = importableRef.current;
-  const handleDownload = useCallback(
-    async (format) => {
-      const { serializeToERD, serializeToUML, serializeToDFD } = await import('./diagram.serializers-6RPUO46U.js');
-      let content;
-      switch (format) {
-        case "erd":
-          content = serializeToERD(schema);
-          break;
-        case "uml":
-          content = serializeToUML(schema);
-          break;
-        case "dfd":
-          content = serializeToDFD(schema);
-          break;
-      }
-      const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `diagram.${FORMAT_EXTENSIONS[format]}`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
-    },
-    [schema]
-  );
-  const handleFileChange = useCallback(
-    async (e) => {
-      const file = e.target.files?.[0];
-      if (!file || !onImport) return;
-      const text = await file.text();
-      const ext = file.name.split(".").pop()?.toLowerCase();
-      const { deserializeSchema } = await import('./diagram.serializers-6RPUO46U.js');
-      let format = "erd";
-      if (ext === "puml" || ext === "uml") format = "uml";
-      else if (ext === "dfd") format = "dfd";
-      const parsed = deserializeSchema(text, format);
-      onImport(parsed);
-      if (fileInputRef.current) {
-        fileInputRef.current.value = "";
-      }
-    },
-    [onImport]
-  );
-  if (!canDownload && !canImport) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-react-fancy-diagram-toolbar": "",
-      className: cn(
-        "absolute right-3 top-3 z-10 flex items-center gap-1 rounded-lg border border-zinc-200 bg-white/90 p-1 shadow-sm backdrop-blur-sm dark:border-zinc-700 dark:bg-zinc-800/90",
-        className
-      ),
-      children: [
-        canDownload && exportFormats.map((format) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => handleDownload(format),
-            className: "rounded px-2 py-1 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200",
-            children: FORMAT_LABELS[format]
-          },
-          format
-        )),
-        canImport && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => fileInputRef.current?.click(),
-              className: "rounded px-2 py-1 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:hover:text-zinc-200",
-              children: "Import"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: fileInputRef,
-              type: "file",
-              accept: ".erd,.puml,.uml,.dfd,.txt",
-              className: "hidden",
-              onChange: handleFileChange
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-DiagramToolbar.displayName = "DiagramToolbar";
-
-// src/components/Diagram/diagram.layout.ts
-var ENTITY_WIDTH = 220;
-var HEADER_HEIGHT2 = 40;
-var FIELD_HEIGHT2 = 28;
-var HORIZONTAL_GAP = 80;
-var VERTICAL_GAP = 60;
-function getEntityHeight(fieldCount) {
-  return HEADER_HEIGHT2 + Math.max(fieldCount, 1) * FIELD_HEIGHT2;
-}
-function resolveEntityId(entity) {
-  return entity.id ?? entity.name;
-}
-function computeDiagramLayout(schema) {
-  const positions = /* @__PURE__ */ new Map();
-  const entityIds = new Set(schema.entities.map(resolveEntityId));
-  const incoming = /* @__PURE__ */ new Map();
-  for (const id of entityIds) {
-    incoming.set(id, /* @__PURE__ */ new Set());
-  }
-  for (const rel of schema.relations) {
-    if (entityIds.has(rel.from) && entityIds.has(rel.to)) {
-      incoming.get(rel.to).add(rel.from);
-    }
-  }
-  const rowAssignment = /* @__PURE__ */ new Map();
-  const assigned = /* @__PURE__ */ new Set();
-  const queue = [];
-  for (const id of entityIds) {
-    if (incoming.get(id).size === 0) {
-      rowAssignment.set(id, 0);
-      assigned.add(id);
-      queue.push(id);
-    }
-  }
-  if (queue.length === 0 && entityIds.size > 0) {
-    const firstId = resolveEntityId(schema.entities[0]);
-    rowAssignment.set(firstId, 0);
-    assigned.add(firstId);
-    queue.push(firstId);
-  }
-  const outgoing = /* @__PURE__ */ new Map();
-  for (const id of entityIds) {
-    outgoing.set(id, []);
-  }
-  for (const rel of schema.relations) {
-    if (entityIds.has(rel.from) && entityIds.has(rel.to)) {
-      outgoing.get(rel.from).push(rel.to);
-    }
-  }
-  let head = 0;
-  while (head < queue.length) {
-    const current = queue[head++];
-    const currentRow = rowAssignment.get(current);
-    for (const neighbor of outgoing.get(current) ?? []) {
-      if (!assigned.has(neighbor)) {
-        rowAssignment.set(neighbor, currentRow + 1);
-        assigned.add(neighbor);
-        queue.push(neighbor);
-      }
-    }
-  }
-  for (const id of entityIds) {
-    if (!assigned.has(id)) {
-      rowAssignment.set(id, 0);
-    }
-  }
-  const rows = /* @__PURE__ */ new Map();
-  for (const [id, row] of rowAssignment) {
-    if (!rows.has(row)) {
-      rows.set(row, []);
-    }
-    rows.get(row).push(id);
-  }
-  const fieldCounts = /* @__PURE__ */ new Map();
-  for (const entity of schema.entities) {
-    fieldCounts.set(resolveEntityId(entity), entity.fields?.length ?? 0);
-  }
-  const sortedRows = Array.from(rows.keys()).sort((a, b) => a - b);
-  let currentY = 0;
-  for (const rowIndex of sortedRows) {
-    const rowEntities = rows.get(rowIndex);
-    const totalWidth = rowEntities.length * ENTITY_WIDTH + (rowEntities.length - 1) * HORIZONTAL_GAP;
-    const startX = -totalWidth / 2 + ENTITY_WIDTH / 2;
-    let maxHeight = 0;
-    for (let i = 0; i < rowEntities.length; i++) {
-      const entityId = rowEntities[i];
-      const x = startX + i * (ENTITY_WIDTH + HORIZONTAL_GAP) - ENTITY_WIDTH / 2;
-      positions.set(entityId, { x, y: currentY });
-      const height = getEntityHeight(fieldCounts.get(entityId) ?? 0);
-      if (height > maxHeight) {
-        maxHeight = height;
-      }
-    }
-    currentY += maxHeight + VERTICAL_GAP;
-  }
-  return positions;
-}
-function DiagramRoot({
-  children,
-  schema,
-  type = "general",
-  viewport,
-  defaultViewport,
-  onViewportChange,
-  downloadable = false,
-  importable = false,
-  exportFormats = ["erd"],
-  onImport,
-  minimap = false,
-  className
-}) {
-  const downloadableRef = useRef(downloadable);
-  const importableRef = useRef(importable);
-  const normalizedSchema = useMemo(() => {
-    if (!schema) return { entities: [], relations: [] };
-    const entities = schema.entities.map((e) => ({
-      ...e,
-      id: e.id ?? e.name
-    }));
-    const relations = schema.relations.map((r, i) => ({
-      ...r,
-      id: r.id ?? `rel-${i}`
-    }));
-    return { entities, relations };
-  }, [schema]);
-  const initialPositions = useMemo(() => {
-    if (normalizedSchema.entities.length === 0) return /* @__PURE__ */ new Map();
-    const layout = computeDiagramLayout(normalizedSchema);
-    const positions = /* @__PURE__ */ new Map();
-    for (const entity of normalizedSchema.entities) {
-      if (entity.x !== void 0 && entity.y !== void 0) {
-        positions.set(entity.id, { x: entity.x, y: entity.y });
-      } else {
-        const pos = layout.get(entity.id);
-        positions.set(entity.id, pos ?? { x: 0, y: 0 });
-      }
-    }
-    return positions;
-  }, [normalizedSchema]);
-  const computedDefaultViewport = useMemo(() => {
-    if (defaultViewport) return defaultViewport;
-    if (initialPositions.size === 0) return { panX: 0, panY: 0, zoom: 1 };
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    initialPositions.forEach((pos) => {
-      minX = Math.min(minX, pos.x);
-      minY = Math.min(minY, pos.y);
-      maxX = Math.max(maxX, pos.x + 220);
-      maxY = Math.max(maxY, pos.y + 200);
-    });
-    const padding = 40;
-    const panX = -minX + padding;
-    const panY = -minY + padding;
-    return { panX, panY, zoom: 1 };
-  }, [defaultViewport, initialPositions]);
-  const [entityPositions, setEntityPositions] = useState(initialPositions);
-  const handleEntityMove = useCallback((entityId, x, y) => {
-    setEntityPositions((prev) => {
-      const next = new Map(prev);
-      next.set(entityId, { x, y });
-      return next;
-    });
-  }, []);
-  const ctx = useMemo(
-    () => ({
-      diagramType: type,
-      schema: normalizedSchema,
-      downloadableRef,
-      importableRef,
-      exportFormats,
-      onImport
-    }),
-    [type, normalizedSchema, exportFormats, onImport]
-  );
-  return /* @__PURE__ */ jsx(DiagramContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { "data-react-fancy-diagram": "", className: "relative h-full w-full", children: /* @__PURE__ */ jsxs(
-    Canvas,
-    {
-      viewport,
-      defaultViewport: computedDefaultViewport,
-      onViewportChange,
-      showGrid: true,
-      fitOnMount: true,
-      className: cn("h-full w-full", className),
-      children: [
-        normalizedSchema.entities.map((entity) => {
-          const pos = entityPositions.get(entity.id) ?? { x: 0, y: 0 };
-          return /* @__PURE__ */ jsx(
-            DiagramEntity,
-            {
-              id: entity.id,
-              name: entity.name,
-              x: pos.x,
-              y: pos.y,
-              draggable: true,
-              onPositionChange: (nx, ny) => handleEntityMove(entity.id, nx, ny),
-              children: entity.fields?.map((field) => /* @__PURE__ */ jsx(
-                DiagramField,
-                {
-                  name: field.name,
-                  type: field.type,
-                  primary: field.primary,
-                  foreign: field.foreign,
-                  nullable: field.nullable
-                },
-                field.name
-              ))
-            },
-            entity.id
-          );
-        }),
-        normalizedSchema.relations.map((rel) => /* @__PURE__ */ jsx(
-          DiagramRelation,
-          {
-            from: rel.from,
-            to: rel.to,
-            fromField: rel.fromField,
-            toField: rel.toField,
-            type: rel.type,
-            label: rel.label
-          },
-          rel.id
-        )),
-        children,
-        /* @__PURE__ */ jsx(Canvas.Controls, {}),
-        minimap && /* @__PURE__ */ jsx(Canvas.Minimap, {})
-      ]
-    }
-  ) }) });
-}
-var Diagram = Object.assign(DiagramRoot, {
-  Entity: DiagramEntity,
-  Field: DiagramField,
-  Relation: DiagramRelation,
-  Toolbar: DiagramToolbar
-});
 var TreeNavContext = createContext(null);
 function useTreeNav() {
   const ctx = useContext(TreeNavContext);
@@ -13467,6 +11820,6 @@ var TreeNav = Object.assign(TreeNavRoot, {
   Node: TreeNode
 });
 
-export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Calendar, Callout, Canvas, Card, Carousel, Chart, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Diagram, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, Field, FileUpload, Heading, Icon, Input, Kanban, Menu2 as Menu, MobileMenu, Modal, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, RadioGroup, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Text, Textarea, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCanvas, useCarousel, useCommand, useContextMenu, useControllableState, useDiagram, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
+export { Accordion, AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, Action, Autocomplete, Avatar, Badge, Brand, Breadcrumbs, Calendar, Callout, Card, Carousel, Chart, Checkbox, CheckboxGroup, ColorPicker, Command, Composer, ContentRenderer, ContextMenu, DatePicker, Dropdown, EMOJI_CATEGORY_ORDER, EMOJI_DATA, EMOJI_ENTRIES, Editor, Emoji, EmojiSelect, Field, FileUpload, Heading, Icon, Input, Kanban, Menu2 as Menu, MobileMenu, Modal, MultiSwitch, Navbar, OtpInput, Pagination, Pillbox, Popover, Portal, Profile, Progress, RadioGroup, SKIN_TONES, Select, Separator, Sidebar, Skeleton, Slider, Switch, Table, Tabs, Text, Textarea, TimePicker, Timeline, Toast, Tooltip, TreeNav, applyTone, cn, configureIcons, find, hasSkinTones, registerExtension, registerExtensions, registerIconSet, registerIcons, resolve, sanitizeHref, sanitizeHtml, search, skinTones, useAccordion, useAccordionPanel, useAccordionSection, useAnimation, useCarousel, useCommand, useContextMenu, useControllableState, useDropdown, useEditor, useEscapeKey, useFileUpload, useFloatingPosition, useFocusTrap, useId12 as useId, useKanban, useMenu, useMobileMenu, useModal, useNavbar, useNodeRegistry, useOutsideClick, usePanZoom, usePopover, useSidebar, useTabs, useToast, useTreeNav };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map