@particle-academy/fancy-echarts 2.0.3 → 3.0.2

package/dist/index.cjs

@@ -7,7 +7,300 @@ var charts = require('echarts/charts');
 var components = require('echarts/components');
 var renderers = require('echarts/renderers');
 
-// src/components/EChart.tsx
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/components/Diagram/diagram.serializers.ts
+var diagram_serializers_exports = {};
+__export(diagram_serializers_exports, {
+  deserializeSchema: () => deserializeSchema,
+  serializeToDFD: () => serializeToDFD,
+  serializeToERD: () => serializeToERD,
+  serializeToUML: () => serializeToUML
+});
+function serializeToERD(schema) {
+  const lines = [];
+  for (const entity of schema.entities) {
+    lines.push(`[${entity.name}]`);
+    if (entity.fields) {
+      for (const field of entity.fields) {
+        const parts = [`  ${field.name}`];
+        if (field.type) parts.push(field.type);
+        if (field.primary) parts.push("PK");
+        if (field.foreign) parts.push("FK");
+        if (field.nullable) parts.push("?");
+        lines.push(parts.join(" "));
+      }
+    }
+    lines.push("");
+  }
+  for (const rel of schema.relations) {
+    const fromEntity = schema.entities.find((e) => e.id === rel.from);
+    const toEntity = schema.entities.find((e) => e.id === rel.to);
+    if (!fromEntity || !toEntity) continue;
+    const marker = getERDMarker(rel.type);
+    const parts = [fromEntity.name, marker, toEntity.name];
+    if (rel.label) parts.push(`: ${rel.label}`);
+    lines.push(parts.join(" "));
+  }
+  return lines.join("\n").trim();
+}
+function getERDMarker(type) {
+  switch (type) {
+    case "one-to-one":
+      return "1--1";
+    case "one-to-many":
+      return "1--*";
+    case "many-to-many":
+      return "*--*";
+    default:
+      return "--";
+  }
+}
+function serializeToUML(schema) {
+  const lines = ["@startuml"];
+  for (const entity of schema.entities) {
+    lines.push(`class ${entity.name} {`);
+    if (entity.fields) {
+      for (const field of entity.fields) {
+        const typeStr = field.type ?? "any";
+        const nullable = field.nullable ? "?" : "";
+        const stereotype = field.primary ? " <<PK>>" : field.foreign ? " <<FK>>" : "";
+        lines.push(`  ${field.name} : ${typeStr}${nullable}${stereotype}`);
+      }
+    }
+    lines.push("}");
+    lines.push("");
+  }
+  for (const rel of schema.relations) {
+    const fromEntity = schema.entities.find((e) => e.id === rel.from);
+    const toEntity = schema.entities.find((e) => e.id === rel.to);
+    if (!fromEntity || !toEntity) continue;
+    const arrow = getUMLArrow(rel.type);
+    const label = rel.label ? ` : ${rel.label}` : "";
+    lines.push(`${fromEntity.name} ${arrow} ${toEntity.name}${label}`);
+  }
+  lines.push("@enduml");
+  return lines.join("\n");
+}
+function getUMLArrow(type) {
+  switch (type) {
+    case "one-to-one":
+      return '"1" -- "1"';
+    case "one-to-many":
+      return '"1" -- "*"';
+    case "many-to-many":
+      return '"*" -- "*"';
+    default:
+      return "--";
+  }
+}
+function serializeToDFD(schema) {
+  const lines = [];
+  for (const entity of schema.entities) {
+    lines.push(`entity ${entity.name}`);
+  }
+  lines.push("");
+  for (const rel of schema.relations) {
+    const fromEntity = schema.entities.find((e) => e.id === rel.from);
+    const toEntity = schema.entities.find((e) => e.id === rel.to);
+    if (!fromEntity || !toEntity) continue;
+    const label = rel.label ? ` "${rel.label}"` : "";
+    lines.push(`${fromEntity.name} -> ${toEntity.name}${label}`);
+  }
+  return lines.join("\n").trim();
+}
+function deserializeSchema(input, format) {
+  switch (format) {
+    case "erd":
+      return deserializeERD(input);
+    case "uml":
+      return deserializeUML(input);
+    case "dfd":
+      return deserializeDFD(input);
+  }
+}
+function deserializeERD(input) {
+  const entities = [];
+  const relations = [];
+  const lines = input.split("\n");
+  let currentEntity = null;
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+    const entityMatch = line.match(/^\[(.+)\]$/);
+    if (entityMatch) {
+      currentEntity = {
+        id: entityMatch[1].toLowerCase().replace(/\s+/g, "_"),
+        name: entityMatch[1],
+        fields: []
+      };
+      entities.push(currentEntity);
+      continue;
+    }
+    if (currentEntity && rawLine.startsWith("  ") && line.length > 0) {
+      const parts = line.split(/\s+/);
+      const field = { name: parts[0] };
+      if (parts.length > 1 && !["PK", "FK", "?"].includes(parts[1])) {
+        field.type = parts[1];
+      }
+      if (parts.includes("PK")) field.primary = true;
+      if (parts.includes("FK")) field.foreign = true;
+      if (parts.includes("?")) field.nullable = true;
+      currentEntity.fields.push(field);
+      continue;
+    }
+    const relMatch = line.match(
+      /^(\S+)\s+(1--1|1--\*|\*--\*)\s+(\S+)(?:\s*:\s*(.+))?$/
+    );
+    if (relMatch) {
+      currentEntity = null;
+      const fromName = relMatch[1];
+      const marker = relMatch[2];
+      const toName = relMatch[3];
+      const label = relMatch[4];
+      const fromEntity = entities.find((e) => e.name === fromName);
+      const toEntity = entities.find((e) => e.name === toName);
+      if (fromEntity && toEntity) {
+        relations.push({
+          id: `${fromEntity.id ?? fromEntity.name}_${toEntity.id ?? toEntity.name}`,
+          from: fromEntity.id ?? fromEntity.name,
+          to: toEntity.id ?? toEntity.name,
+          type: parseERDMarker(marker),
+          label
+        });
+      }
+      continue;
+    }
+    if (line === "") {
+      currentEntity = null;
+    }
+  }
+  return { entities, relations };
+}
+function parseERDMarker(marker) {
+  switch (marker) {
+    case "1--1":
+      return "one-to-one";
+    case "1--*":
+      return "one-to-many";
+    case "*--*":
+      return "many-to-many";
+    default:
+      return "one-to-many";
+  }
+}
+function deserializeUML(input) {
+  const entities = [];
+  const relations = [];
+  const lines = input.split("\n");
+  let currentEntity = null;
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+    if (line === "@startuml" || line === "@enduml" || line === "") continue;
+    const classMatch = line.match(/^class\s+(\S+)\s*\{$/);
+    if (classMatch) {
+      currentEntity = {
+        id: classMatch[1].toLowerCase().replace(/\s+/g, "_"),
+        name: classMatch[1],
+        fields: []
+      };
+      entities.push(currentEntity);
+      continue;
+    }
+    if (line === "}") {
+      currentEntity = null;
+      continue;
+    }
+    if (currentEntity) {
+      const fieldMatch = line.match(
+        /^(\S+)\s*:\s*(\S+?)(\?)?(?:\s*<<(PK|FK)>>)?$/
+      );
+      if (fieldMatch) {
+        const field = {
+          name: fieldMatch[1],
+          type: fieldMatch[2]
+        };
+        if (fieldMatch[3]) field.nullable = true;
+        if (fieldMatch[4] === "PK") field.primary = true;
+        if (fieldMatch[4] === "FK") field.foreign = true;
+        currentEntity.fields.push(field);
+      }
+      continue;
+    }
+    const relMatch = line.match(
+      /^(\S+)\s+"([1*])"\s+--\s+"([1*])"\s+(\S+)(?:\s*:\s*(.+))?$/
+    );
+    if (relMatch) {
+      const fromName = relMatch[1];
+      const fromCard = relMatch[2];
+      const toCard = relMatch[3];
+      const toName = relMatch[4];
+      const label = relMatch[5];
+      const fromEntity = entities.find((e) => e.name === fromName);
+      const toEntity = entities.find((e) => e.name === toName);
+      if (fromEntity && toEntity) {
+        const type = fromCard === "1" && toCard === "1" ? "one-to-one" : fromCard === "1" && toCard === "*" ? "one-to-many" : "many-to-many";
+        relations.push({
+          id: `${fromEntity.id ?? fromEntity.name}_${toEntity.id ?? toEntity.name}`,
+          from: fromEntity.id ?? fromEntity.name,
+          to: toEntity.id ?? toEntity.name,
+          type,
+          label
+        });
+      }
+    }
+  }
+  return { entities, relations };
+}
+function deserializeDFD(input) {
+  const entities = [];
+  const relations = [];
+  const lines = input.split("\n");
+  for (const rawLine of lines) {
+    const line = rawLine.trim();
+    if (line === "") continue;
+    const entityMatch = line.match(/^entity\s+(\S+)$/);
+    if (entityMatch) {
+      entities.push({
+        id: entityMatch[1].toLowerCase().replace(/\s+/g, "_"),
+        name: entityMatch[1],
+        fields: []
+      });
+      continue;
+    }
+    const flowMatch = line.match(
+      /^(\S+)\s+->\s+(\S+)(?:\s+"(.+)")?$/
+    );
+    if (flowMatch) {
+      const fromName = flowMatch[1];
+      const toName = flowMatch[2];
+      const label = flowMatch[3];
+      const fromEntity = entities.find((e) => e.name === fromName);
+      const toEntity = entities.find((e) => e.name === toName);
+      if (fromEntity && toEntity) {
+        relations.push({
+          id: `${fromEntity.id ?? fromEntity.name}_${toEntity.id ?? toEntity.name}`,
+          from: fromEntity.id ?? fromEntity.name,
+          to: toEntity.id ?? toEntity.name,
+          type: "one-to-many",
+          label
+        });
+      }
+    }
+  }
+  return { entities, relations };
+}
+var init_diagram_serializers = __esm({
+  "src/components/Diagram/diagram.serializers.ts"() {
+  }
+});
 function useResizeObserver(ref, callback) {
   const callbackRef = react.useRef(callback);
   callbackRef.current = callback;
@@ -600,6 +893,2045 @@ function registerBuiltinThemes() {
   registerTheme("pastel", pastelTheme);
 }
 
+// src/utils/cn.ts
+function flatten(value) {
+  if (!value) return "";
+  if (typeof value === "string" || typeof value === "number") return String(value);
+  if (Array.isArray(value)) return value.map(flatten).filter(Boolean).join(" ");
+  if (typeof value === "object") {
+    return Object.entries(value).filter(([, v]) => Boolean(v)).map(([k]) => k).join(" ");
+  }
+  return "";
+}
+function cn(...inputs) {
+  return inputs.map(flatten).filter(Boolean).join(" ");
+}
+function useControllableState(controlledValue, defaultValue, onChange) {
+  const [uncontrolledValue, setUncontrolledValue] = react.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const onChangeRef = react.useRef(onChange);
+  onChangeRef.current = onChange;
+  const setValue = react.useCallback(
+    (next) => {
+      const nextValue = typeof next === "function" ? next(value) : next;
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onChangeRef.current?.(nextValue);
+    },
+    [isControlled, value]
+  );
+  return [value, setValue];
+}
+function usePanZoom({
+  viewport,
+  setViewport,
+  minZoom,
+  maxZoom,
+  pannable,
+  zoomable,
+  containerRef
+}) {
+  const isPanningRef = react.useRef(false);
+  const startRef = react.useRef({ x: 0, y: 0, panX: 0, panY: 0 });
+  const viewportRef = react.useRef(viewport);
+  viewportRef.current = viewport;
+  const setViewportRef = react.useRef(setViewport);
+  setViewportRef.current = setViewport;
+  const zoomableRef = react.useRef(zoomable);
+  zoomableRef.current = zoomable;
+  const minZoomRef = react.useRef(minZoom);
+  minZoomRef.current = minZoom;
+  const maxZoomRef = react.useRef(maxZoom);
+  maxZoomRef.current = maxZoom;
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    function handleWheel(e) {
+      if (!zoomableRef.current) return;
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      const rect = container.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      setViewportRef.current((prev) => {
+        const factor = 1 - e.deltaY * 1e-3;
+        const newZoom = Math.min(maxZoomRef.current, Math.max(minZoomRef.current, prev.zoom * factor));
+        const ratio = newZoom / prev.zoom;
+        return {
+          zoom: newZoom,
+          panX: mouseX - (mouseX - prev.panX) * ratio,
+          panY: mouseY - (mouseY - prev.panY) * ratio
+        };
+      });
+    }
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleWheel);
+    };
+  }, [containerRef]);
+  const onPointerDown = react.useCallback(
+    (e) => {
+      if (!pannable) return;
+      if (e.button !== 0) return;
+      const target = e.target;
+      if (target !== containerRef.current && !target.hasAttribute("data-canvas-bg")) return;
+      isPanningRef.current = true;
+      startRef.current = { x: e.clientX, y: e.clientY, panX: viewport.panX, panY: viewport.panY };
+      e.target.setPointerCapture(e.pointerId);
+      e.preventDefault();
+    },
+    [pannable, viewport.panX, viewport.panY, containerRef]
+  );
+  const onPointerMove = react.useCallback(
+    (e) => {
+      if (!isPanningRef.current) return;
+      const dx = e.clientX - startRef.current.x;
+      const dy = e.clientY - startRef.current.y;
+      setViewport((prev) => ({
+        ...prev,
+        panX: startRef.current.panX + dx,
+        panY: startRef.current.panY + dy
+      }));
+    },
+    [setViewport]
+  );
+  const onPointerUp = react.useCallback(() => {
+    isPanningRef.current = false;
+  }, []);
+  return {
+    containerProps: { onPointerDown, onPointerMove, onPointerUp },
+    isPanning: isPanningRef.current
+  };
+}
+function useNodeRegistry() {
+  const rectsRef = react.useRef(/* @__PURE__ */ new Map());
+  const [version, setVersion] = react.useState(0);
+  const registerNode = react.useCallback((id, rect) => {
+    rectsRef.current.set(id, rect);
+    setVersion((v) => v + 1);
+  }, []);
+  const unregisterNode = react.useCallback((id) => {
+    rectsRef.current.delete(id);
+    setVersion((v) => v + 1);
+  }, []);
+  return { registerNode, unregisterNode, nodeRects: rectsRef.current, version };
+}
+var CanvasContext = react.createContext(null);
+function useCanvas() {
+  const ctx = react.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 = react.useRef(null);
+  const isDragging = react.useRef(false);
+  const dragStart = react.useRef({ mouseX: 0, mouseY: 0, nodeX: 0, nodeY: 0 });
+  react.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 = react.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 = react.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 = react.useCallback(() => {
+    isDragging.current = false;
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.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/Diagram/_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 = react.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__ */ jsxRuntime.jsxs("g", { "data-react-fancy-canvas-edge": "", className: cn("text-zinc-300 dark:text-zinc-600", className), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("foreignObject", { x: path.midX - 40, y: path.midY - 12, width: 80, height: 24, children: /* @__PURE__ */ jsxRuntime.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 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width, height, children: [
+        Array.from(nodeRects.entries()).map(([id, rect]) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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";
+var iconProps = { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
+var ZoomIn = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...iconProps, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+] });
+var ZoomOut = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...iconProps, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+] });
+var Maximize = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...iconProps, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 7V5a2 2 0 0 1 2-2h2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 3h2a2 2 0 0 1 2 2v2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 17v2a2 2 0 0 1-2 2h-2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 21H5a2 2 0 0 1-2-2v-2" })
+] });
+var RotateCcw = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...iconProps, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3v5h5" })
+] });
+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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("button", { type: "button", onClick: zoomIn, className: btnClass, "aria-label": "Zoom in", children: /* @__PURE__ */ jsxRuntime.jsx(ZoomIn, {}) }),
+        showZoomOut && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: zoomOut, className: btnClass, "aria-label": "Zoom out", children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOut, {}) }),
+        showReset && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: reset, className: btnClass, "aria-label": "Reset view", children: /* @__PURE__ */ jsxRuntime.jsx(RotateCcw, {}) }),
+        showFitAll && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: fitAll, className: btnClass, "aria-label": "Fit all", children: /* @__PURE__ */ jsxRuntime.jsx(Maximize, {}) })
+      ]
+    }
+  );
+}
+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 = react.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 = react.useMemo(
+    () => ({ viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, containerRef, gridSize, snapToGrid }),
+    [viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, gridSize, snapToGrid]
+  );
+  const hasFitted = react.useRef(false);
+  react.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 = [];
+  react.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__ */ jsxRuntime.jsx(CanvasContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      "data-react-fancy-canvas": "",
+      className: cn("relative overflow-hidden", className),
+      style: { touchAction: "none", ...style },
+      ...containerProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute origin-top-left",
+            style: {
+              transform: `translate(${viewport.panX}px, ${viewport.panY}px) scale(${viewport.zoom})`
+            },
+            children: others
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("defs", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-arrow", viewBox: "0 0 10 10", refX: "10", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L10,5 L0,10 Z", fill: "#71717a" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-circle", viewBox: "0 0 10 10", refX: "5", refY: "5", markerWidth: "8", markerHeight: "8", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5", cy: "5", r: "3.5", fill: "#71717a" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-diamond", viewBox: "0 0 12 12", refX: "6", refY: "6", markerWidth: "10", markerHeight: "10", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "6,0 12,6 6,12 0,6", fill: "none", stroke: "#71717a", strokeWidth: "1.5" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "canvas-one", viewBox: "0 0 2 16", refX: "1", refY: "8", markerWidth: "2", markerHeight: "14", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "0", x2: "1", y2: "16", stroke: "#71717a", strokeWidth: "2" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("marker", { id: "canvas-crow-foot", viewBox: "0 0 16 16", refX: "16", refY: "8", markerWidth: "14", markerHeight: "14", orient: "auto", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "8", x2: "0", y2: "0", stroke: "#71717a", strokeWidth: "2", strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "8", x2: "0", y2: "8", stroke: "#71717a", strokeWidth: "2", strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "8", x2: "0", y2: "16", stroke: "#71717a", strokeWidth: "2", strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsxRuntime.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 = react.createContext(null);
+function useDiagram() {
+  const ctx = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          primary && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-zinc-800 dark:text-zinc-200", children: name })
+        ] }),
+        type && /* @__PURE__ */ jsxRuntime.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 = [];
+  react.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__ */ jsxRuntime.jsx(Canvas.Node, { id, x, y, draggable, onPositionChange, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "px-3 py-2 text-sm font-semibold text-white",
+              color
+            ),
+            children: name
+          }
+        ),
+        fields.length > 0 && /* @__PURE__ */ jsxRuntime.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_COLOR = "#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_COLOR,
+  strokeWidth = 2,
+  label
+}) {
+  const { nodeRects, registryVersion } = useCanvas();
+  const { schema } = useDiagram();
+  const result = react.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__ */ jsxRuntime.jsxs("g", { "data-react-fancy-diagram-relation": "", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: result.linePath,
+        fill: "none",
+        stroke: color,
+        strokeWidth,
+        strokeDasharray: dashArray,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    result.fromMarker?.paths.map((shape, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("foreignObject", { x: result.mid.x - 50, y: result.mid.y - 12, width: 100, height: 24, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-xs text-zinc-500", children: /* @__PURE__ */ jsxRuntime.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 = react.useRef(null);
+  const canDownload = downloadableRef.current;
+  const canImport = importableRef.current;
+  const handleDownload = react.useCallback(
+    async (format) => {
+      const { serializeToERD: serializeToERD2, serializeToUML: serializeToUML2, serializeToDFD: serializeToDFD2 } = await Promise.resolve().then(() => (init_diagram_serializers(), diagram_serializers_exports));
+      let content;
+      switch (format) {
+        case "erd":
+          content = serializeToERD2(schema);
+          break;
+        case "uml":
+          content = serializeToUML2(schema);
+          break;
+        case "dfd":
+          content = serializeToDFD2(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 = react.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: deserializeSchema2 } = await Promise.resolve().then(() => (init_diagram_serializers(), diagram_serializers_exports));
+      let format = "erd";
+      if (ext === "puml" || ext === "uml") format = "uml";
+      else if (ext === "dfd") format = "dfd";
+      const parsed = deserializeSchema2(text, format);
+      onImport(parsed);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [onImport]
+  );
+  if (!canDownload && !canImport) return null;
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.useRef(downloadable);
+  const importableRef = react.useRef(importable);
+  const normalizedSchema = react.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 = react.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 = react.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] = react.useState(initialPositions);
+  const handleEntityMove = react.useCallback((entityId, x, y) => {
+    setEntityPositions((prev) => {
+      const next = new Map(prev);
+      next.set(entityId, { x, y });
+      return next;
+    });
+  }, []);
+  const ctx = react.useMemo(
+    () => ({
+      diagramType: type,
+      schema: normalizedSchema,
+      downloadableRef,
+      importableRef,
+      exportFormats,
+      onImport
+    }),
+    [type, normalizedSchema, exportFormats, onImport]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(DiagramContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-diagram": "", className: "relative h-full w-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          DiagramRelation,
+          {
+            from: rel.from,
+            to: rel.to,
+            fromField: rel.fromField,
+            toField: rel.toField,
+            type: rel.type,
+            label: rel.label
+          },
+          rel.id
+        )),
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(Canvas.Controls, {}),
+        minimap && /* @__PURE__ */ jsxRuntime.jsx(Canvas.Minimap, {})
+      ]
+    }
+  ) }) });
+}
+var Diagram = Object.assign(DiagramRoot, {
+  Entity: DiagramEntity,
+  Field: DiagramField,
+  Relation: DiagramRelation,
+  Toolbar: DiagramToolbar
+});
+function DataDiagram(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Diagram,
+    {
+      type: "erd",
+      downloadable: true,
+      exportFormats: ["erd", "uml"],
+      minimap: true,
+      ...props
+    }
+  );
+}
+DataDiagram.Entity = Diagram.Entity;
+DataDiagram.Field = Diagram.Field;
+DataDiagram.Relation = Diagram.Relation;
+DataDiagram.Toolbar = Diagram.Toolbar;
+DataDiagram.displayName = "DataDiagram";
+var COL_GAP = 220;
+var ROW_GAP = 140;
+function autoLayout(nodes) {
+  let col = 0;
+  let row = 0;
+  const cols = Math.max(2, Math.ceil(Math.sqrt(nodes.length)));
+  return nodes.map((n) => {
+    if (n.x !== void 0 && n.y !== void 0) return n;
+    const placed = { ...n, x: col * COL_GAP + 40, y: row * ROW_GAP + 40 };
+    col += 1;
+    if (col >= cols) {
+      col = 0;
+      row += 1;
+    }
+    return placed;
+  });
+}
+function Flowchart({
+  nodes,
+  edges,
+  routing = "manhattan",
+  downloadable = false,
+  minimap = false,
+  className
+}) {
+  const schema = react.useMemo(() => {
+    const placed = autoLayout(nodes);
+    return {
+      entities: placed.map((n) => ({
+        id: n.id,
+        name: n.label,
+        x: n.x,
+        y: n.y
+      })),
+      relations: edges.map((e) => ({
+        from: e.from,
+        to: e.to,
+        type: e.type ?? "association",
+        routing,
+        label: e.label
+      }))
+    };
+  }, [nodes, edges, routing]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Diagram,
+    {
+      type: "flowchart",
+      schema,
+      downloadable,
+      minimap,
+      className
+    }
+  );
+}
+Flowchart.displayName = "Flowchart";
+
+// src/components/Diagrams/mindmap.layout.ts
+var DEFAULT_RADII = [0, 220, 380, 520, 640, 740];
+function leafCount(node) {
+  if (!node.children || node.children.length === 0) return 1;
+  return node.children.reduce((sum, child) => sum + leafCount(child), 0);
+}
+function radiusForDepth(depth, radii) {
+  if (depth < radii.length) return radii[depth];
+  return radii[radii.length - 1] + (depth - radii.length + 1) * 110;
+}
+function layoutMindmap(root, radii = DEFAULT_RADII) {
+  const positions = [];
+  const edges = [];
+  const placed = /* @__PURE__ */ new Map();
+  function place(node, depth, angleStart, angleEnd) {
+    const r = radiusForDepth(depth, radii);
+    const angleMid = (angleStart + angleEnd) / 2;
+    const x = depth === 0 ? 0 : r * Math.cos(angleMid);
+    const y = depth === 0 ? 0 : r * Math.sin(angleMid);
+    placed.set(node.id, { x, y });
+    positions.push({ id: node.id, label: node.label, color: node.color, x, y });
+    if (!node.children || node.children.length === 0) return;
+    const total = leafCount(node);
+    let cursor = angleStart;
+    for (const child of node.children) {
+      const span = leafCount(child) / total * (angleEnd - angleStart);
+      place(child, depth + 1, cursor, cursor + span);
+      edges.push({ from: node.id, to: child.id });
+      cursor += span;
+    }
+  }
+  place(root, 0, 0, Math.PI * 2);
+  const PADDING2 = 100;
+  const xs = positions.map((p) => p.x);
+  const ys = positions.map((p) => p.y);
+  const minX = Math.min(...xs);
+  const minY = Math.min(...ys);
+  const maxX = Math.max(...xs);
+  const maxY = Math.max(...ys);
+  const shifted = positions.map((p) => ({
+    ...p,
+    x: p.x - minX + PADDING2,
+    y: p.y - minY + PADDING2
+  }));
+  return {
+    nodes: shifted,
+    edges,
+    width: maxX - minX + PADDING2 * 2,
+    height: maxY - minY + PADDING2 * 2
+  };
+}
+function Mindmap({
+  root,
+  radii,
+  downloadable = false,
+  minimap = false,
+  className
+}) {
+  const schema = react.useMemo(() => {
+    const layout = layoutMindmap(root, radii);
+    return {
+      entities: layout.nodes.map((n) => ({
+        id: n.id,
+        name: n.label,
+        x: n.x,
+        y: n.y
+      })),
+      relations: layout.edges.map((e) => ({
+        from: e.from,
+        to: e.to,
+        type: "association",
+        routing: "bezier",
+        toMarker: "none",
+        fromMarker: "none"
+      }))
+    };
+  }, [root, radii]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Diagram,
+    {
+      type: "general",
+      schema,
+      downloadable,
+      minimap,
+      className
+    }
+  );
+}
+Mindmap.displayName = "Mindmap";
+
+// src/components/Diagrams/orgchart.layout.ts
+var COL_WIDTH = 200;
+var ROW_HEIGHT = 140;
+var PADDING = 60;
+var slotCursor = 0;
+function size(node, depth) {
+  if (!node.children || node.children.length === 0) {
+    const startSlot2 = slotCursor++;
+    return { node, depth, startSlot: startSlot2, span: 1, centerSlot: startSlot2, children: [] };
+  }
+  const startSlot = slotCursor;
+  const sized = node.children.map((c) => size(c, depth + 1));
+  const span = sized.reduce((sum, s) => sum + s.span, 0);
+  const centerSlot = (sized[0].centerSlot + sized[sized.length - 1].centerSlot) / 2;
+  return { node, depth, startSlot, span, centerSlot, children: sized };
+}
+function flatten2(s, out, edges) {
+  out.push({
+    id: s.node.id,
+    label: s.node.label,
+    color: s.node.color,
+    x: s.centerSlot * COL_WIDTH + PADDING,
+    y: s.depth * ROW_HEIGHT + PADDING
+  });
+  for (const child of s.children) {
+    edges.push({ from: s.node.id, to: child.node.id });
+    flatten2(child, out, edges);
+  }
+}
+function layoutOrgChart(root) {
+  slotCursor = 0;
+  const sized = size(root, 0);
+  const nodes = [];
+  const edges = [];
+  flatten2(sized, nodes, edges);
+  const xs = nodes.map((n) => n.x);
+  const ys = nodes.map((n) => n.y);
+  return {
+    nodes,
+    edges,
+    width: Math.max(...xs) + PADDING + COL_WIDTH,
+    height: Math.max(...ys) + PADDING + ROW_HEIGHT
+  };
+}
+function OrgChart({
+  root,
+  downloadable = false,
+  minimap = false,
+  className
+}) {
+  const schema = react.useMemo(() => {
+    const layout = layoutOrgChart(root);
+    return {
+      entities: layout.nodes.map((n) => ({
+        id: n.id,
+        name: n.label,
+        x: n.x,
+        y: n.y
+      })),
+      relations: layout.edges.map((e) => ({
+        from: e.from,
+        to: e.to,
+        type: "association",
+        routing: "manhattan",
+        fromMarker: "none",
+        toMarker: "triangle-open"
+      }))
+    };
+  }, [root]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Diagram,
+    {
+      type: "general",
+      schema,
+      downloadable,
+      minimap,
+      className
+    }
+  );
+}
+OrgChart.displayName = "OrgChart";
+
 Object.defineProperty(exports, "BarChart", {
   enumerable: true,
   get: function () { return charts.BarChart; }
@@ -736,9 +3068,14 @@ Object.defineProperty(exports, "SVGRenderer", {
   enumerable: true,
   get: function () { return renderers.SVGRenderer; }
 });
+exports.DataDiagram = DataDiagram;
+exports.Diagram = Diagram;
 exports.EChart = EChart;
 exports.EChart3D = EChart3D;
 exports.EChartGraphic = EChartGraphic;
+exports.Flowchart = Flowchart;
+exports.Mindmap = Mindmap;
+exports.OrgChart = OrgChart;
 exports.darkTheme = darkTheme;
 exports.pastelTheme = pastelTheme;
 exports.registerAll = registerAll;
@@ -746,6 +3083,7 @@ exports.registerBuiltinThemes = registerBuiltinThemes;
 exports.registerCharts = registerCharts;
 exports.registerComponents = registerComponents;
 exports.registerTheme = registerTheme;
+exports.useDiagram = useDiagram;
 exports.useECharts = useECharts;
 exports.useResizeObserver = useResizeObserver;
 exports.vintageTheme = vintageTheme;