@particle-academy/react-fancy 2.9.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,1005 +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";
-var HEADER_HEIGHT = 36;
-var FIELD_HEIGHT = 29;
-var SYMBOL_SIZE = 12;
-function oneSymbol(pt, direction) {
-  const s = SYMBOL_SIZE * 0.6;
-  switch (direction) {
-    case "left":
-    case "right":
-      return `M${pt.x},${pt.y - s} L${pt.x},${pt.y + s}`;
-    case "up":
-    case "down":
-      return `M${pt.x - s},${pt.y} L${pt.x + s},${pt.y}`;
-  }
-}
-function crowFootSymbol(pt, direction) {
-  const s = SYMBOL_SIZE;
-  const spread = s * 0.8;
-  let tip;
-  switch (direction) {
-    case "right":
-      tip = { x: pt.x - s, y: pt.y };
-      return [
-        `M${pt.x},${pt.y - spread} L${tip.x},${tip.y}`,
-        `M${pt.x},${pt.y} L${tip.x},${tip.y}`,
-        `M${pt.x},${pt.y + spread} L${tip.x},${tip.y}`,
-        // bar at entity edge
-        `M${pt.x},${pt.y - spread} L${pt.x},${pt.y + spread}`
-      ].join(" ");
-    case "left":
-      tip = { x: pt.x + s, y: pt.y };
-      return [
-        `M${pt.x},${pt.y - spread} L${tip.x},${tip.y}`,
-        `M${pt.x},${pt.y} L${tip.x},${tip.y}`,
-        `M${pt.x},${pt.y + spread} L${tip.x},${tip.y}`,
-        `M${pt.x},${pt.y - spread} L${pt.x},${pt.y + spread}`
-      ].join(" ");
-    case "down":
-      tip = { x: pt.x, y: pt.y - s };
-      return [
-        `M${pt.x - spread},${pt.y} L${tip.x},${tip.y}`,
-        `M${pt.x},${pt.y} L${tip.x},${tip.y}`,
-        `M${pt.x + spread},${pt.y} L${tip.x},${tip.y}`,
-        `M${pt.x - spread},${pt.y} L${pt.x + spread},${pt.y}`
-      ].join(" ");
-    case "up":
-      tip = { x: pt.x, y: pt.y + s };
-      return [
-        `M${pt.x - spread},${pt.y} L${tip.x},${tip.y}`,
-        `M${pt.x},${pt.y} L${tip.x},${tip.y}`,
-        `M${pt.x + spread},${pt.y} L${tip.x},${tip.y}`,
-        `M${pt.x - spread},${pt.y} L${pt.x + spread},${pt.y}`
-      ].join(" ");
-  }
-}
-function getSymbolPath(type, end, pt, direction) {
-  const side = end === "start" ? type.split("-to-")[0] : type.split("-to-")[1];
-  if (side === "one") return oneSymbol(pt, direction);
-  if (side === "many") return crowFootSymbol(pt, direction);
-  return null;
-}
-function DiagramRelation({
-  from,
-  to,
-  fromField: fromFieldProp,
-  toField: toFieldProp,
-  type,
-  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 fromEntity = schema.entities.find((e) => (e.id ?? e.name) === from);
-    const toEntity = schema.entities.find((e) => (e.id ?? e.name) === to);
-    let fromFieldIdx = -1;
-    let toFieldIdx = -1;
-    if (fromFieldProp && fromEntity?.fields) {
-      fromFieldIdx = fromEntity.fields.findIndex((f) => f.name === fromFieldProp);
-    } else if (fromEntity?.fields) {
-      fromFieldIdx = fromEntity.fields.findIndex((f) => f.primary);
-    }
-    if (toFieldProp && toEntity?.fields) {
-      toFieldIdx = toEntity.fields.findIndex((f) => f.name === toFieldProp);
-    } else if (toEntity?.fields) {
-      const fromName = (fromEntity?.name ?? from).toLowerCase();
-      toFieldIdx = toEntity.fields.findIndex(
-        (f) => f.foreign && (f.name === `${fromName}_id` || f.name === `${fromName}Id`)
-      );
-      if (toFieldIdx === -1) {
-        toFieldIdx = toEntity.fields.findIndex((f) => f.foreign);
-      }
-    }
-    const fromFieldY = fromFieldIdx >= 0 ? HEADER_HEIGHT + fromFieldIdx * FIELD_HEIGHT + FIELD_HEIGHT / 2 : fromRect.height / 2;
-    const toFieldY = toFieldIdx >= 0 ? HEADER_HEIGHT + toFieldIdx * FIELD_HEIGHT + FIELD_HEIGHT / 2 : toRect.height / 2;
-    const fromCx = fromRect.x + fromRect.width / 2;
-    const toCx = toRect.x + toRect.width / 2;
-    let fromPt, toPt;
-    let fromDir;
-    let toDir;
-    if (fromCx <= toCx) {
-      fromPt = { x: fromRect.x + fromRect.width, y: fromRect.y + fromFieldY };
-      toPt = { x: toRect.x, y: toRect.y + toFieldY };
-      fromDir = "right";
-      toDir = "left";
-    } else {
-      fromPt = { x: fromRect.x, y: fromRect.y + fromFieldY };
-      toPt = { x: toRect.x + toRect.width, y: toRect.y + toFieldY };
-      fromDir = "left";
-      toDir = "right";
-    }
-    const offsetFrom = { ...fromPt };
-    const offsetTo = { ...toPt };
-    if (fromDir === "right") offsetFrom.x += SYMBOL_SIZE;
-    else offsetFrom.x -= SYMBOL_SIZE;
-    if (toDir === "left") offsetTo.x -= SYMBOL_SIZE;
-    else offsetTo.x += SYMBOL_SIZE;
-    const adx = Math.abs(offsetTo.x - offsetFrom.x);
-    const ady = Math.abs(offsetTo.y - offsetFrom.y);
-    const off = Math.max(adx * 0.4, ady * 0.25, 40);
-    const cp1x = offsetFrom.x + (fromDir === "right" ? off : -off);
-    const cp2x = offsetTo.x + (toDir === "left" ? -off : off);
-    const linePath = `M${offsetFrom.x},${offsetFrom.y} C${cp1x},${offsetFrom.y} ${cp2x},${offsetTo.y} ${offsetTo.x},${offsetTo.y}`;
-    const startSymbol = getSymbolPath(type, "start", fromPt, fromDir);
-    const endSymbol = getSymbolPath(type, "end", toPt, toDir);
-    return { linePath, startSymbol, endSymbol, midX: (offsetFrom.x + offsetTo.x) / 2, midY: (offsetFrom.y + offsetTo.y) / 2 };
-  }, [from, to, fromFieldProp, toFieldProp, type, schema, nodeRects, registryVersion]);
-  if (!result) return null;
-  return /* @__PURE__ */ jsxs("g", { "data-react-fancy-diagram-relation": "", children: [
-    /* @__PURE__ */ jsx("path", { d: result.linePath, fill: "none", stroke: "#71717a", strokeWidth: 2 }),
-    result.startSymbol && /* @__PURE__ */ jsx("path", { d: result.startSymbol, fill: "none", stroke: "#71717a", strokeWidth: 2 }),
-    result.endSymbol && /* @__PURE__ */ jsx("path", { d: result.endSymbol, fill: "none", stroke: "#71717a", strokeWidth: 2 }),
-    label && /* @__PURE__ */ jsx("foreignObject", { x: result.midX - 40, y: result.midY - 12, width: 80, height: 24, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-xs text-zinc-500", children: label }) })
-  ] });
-}
-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);
@@ -12819,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