@particle-academy/react-fancy 2.8.1 → 2.10.0

package/dist/index.cjs

@@ -11771,7 +11771,7 @@ function useCanvas() {
   return ctx;
 }
 function CanvasNode({ children, id, x, y, draggable, onPositionChange, className, style }) {
-  const { registerNode, unregisterNode, viewport } = useCanvas();
+  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 });
@@ -11804,9 +11804,15 @@ function CanvasNode({ children, id, x, y, draggable, onPositionChange, className
       if (!isDragging.current) return;
       const dx = (e.clientX - dragStart.current.mouseX) / viewport.zoom;
       const dy = (e.clientY - dragStart.current.mouseY) / viewport.zoom;
-      onPositionChange?.(dragStart.current.nodeX + dx, dragStart.current.nodeY + dy);
+      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]
+    [viewport.zoom, onPositionChange, snapToGrid, gridSize]
   );
   const handlePointerUp = react.useCallback(() => {
     isDragging.current = false;
@@ -12054,6 +12060,10 @@ function CanvasRoot({
   pannable = true,
   zoomable = true,
   showGrid = false,
+  gridStyle = "dots",
+  gridSize = 20,
+  gridColor = "rgb(161 161 170 / 0.3)",
+  snapToGrid = false,
   fitOnMount = false,
   className,
   style
@@ -12071,8 +12081,8 @@ function CanvasRoot({
     containerRef
   });
   const ctx = react.useMemo(
-    () => ({ viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, containerRef }),
-    [viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion]
+    () => ({ viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, containerRef, gridSize, snapToGrid }),
+    [viewport, setViewport, registerNode, unregisterNode, nodeRects, registryVersion, gridSize, snapToGrid]
   );
   const hasFitted = react.useRef(false);
   react.useEffect(() => {
@@ -12128,9 +12138,13 @@ function CanvasRoot({
           {
             "data-canvas-bg": "",
             className: "absolute inset-0",
-            style: showGrid ? {
-              backgroundImage: `radial-gradient(circle, rgb(161 161 170 / 0.3) 1px, transparent 1px)`,
-              backgroundSize: `${20 * viewport.zoom}px ${20 * viewport.zoom}px`,
+            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
           }
@@ -12270,65 +12284,615 @@ function DiagramEntity({
   ) });
 }
 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;
+
+// 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 `M${pt.x},${pt.y - s} L${pt.x},${pt.y + s}`;
+      return [1, 0];
     case "up":
+      return [0, -1];
     case "down":
-      return `M${pt.x - s},${pt.y} L${pt.x + s},${pt.y}`;
+      return [0, 1];
   }
 }
-function crowFootSymbol(pt, direction) {
-  const s = SYMBOL_SIZE;
-  const spread = s * 0.8;
-  let tip;
+function perpVec(direction) {
   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 "right":
+      return [0, 1];
     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;
+    case "down":
+      return [1, 0];
+  }
+}
+function arrowPath(pt, direction, _filled) {
+  const [dx, dy] = dirVec(direction);
+  const [px, py] = perpVec(direction);
+  const tipX = pt.x + dx * SIZE;
+  const tipY = pt.y + dy * SIZE;
+  const baseAX = pt.x + px * (SIZE * 0.55);
+  const baseAY = pt.y + py * (SIZE * 0.55);
+  const baseBX = pt.x - px * (SIZE * 0.55);
+  const baseBY = pt.y - py * (SIZE * 0.55);
+  return `M${baseAX},${baseAY} L${tipX},${tipY} L${baseBX},${baseBY} Z`;
+}
+function circlePath(pt, _filled) {
+  const r = SIZE * 0.45;
+  return `M${pt.x - r},${pt.y} a${r},${r} 0 1 0 ${r * 2},0 a${r},${r} 0 1 0 ${-r * 2},0 Z`;
+}
+function squarePath(pt, direction, _filled) {
+  const [dx, dy] = dirVec(direction);
+  const [px, py] = perpVec(direction);
+  const half = SIZE * 0.5;
+  const cx = pt.x + dx * half;
+  const cy = pt.y + dy * half;
+  const tlX = cx - px * half - dx * half;
+  const tlY = cy - py * half - dy * half;
+  const trX = cx + px * half - dx * half;
+  const trY = cy + py * half - dy * half;
+  const brX = cx + px * half + dx * half;
+  const brY = cy + py * half + dy * half;
+  const blX = cx - px * half + dx * half;
+  const blY = cy - py * half + dy * half;
+  return `M${tlX},${tlY} L${trX},${trY} L${brX},${brY} L${blX},${blY} Z`;
+}
+function diamondPath(pt, direction, _filled) {
+  const [dx, dy] = dirVec(direction);
+  const [px, py] = perpVec(direction);
+  const len = SIZE * 1.2;
+  const cx = pt.x + dx * (len / 2);
+  const cy = pt.y + dy * (len / 2);
+  const aX = pt.x;
+  const aY = pt.y;
+  const bX = cx + px * (SIZE * 0.45);
+  const bY = cy + py * (SIZE * 0.45);
+  const tX = pt.x + dx * len;
+  const tY = pt.y + dy * len;
+  const dX = cx - px * (SIZE * 0.45);
+  const dY = cy - py * (SIZE * 0.45);
+  return `M${aX},${aY} L${bX},${bY} L${tX},${tY} L${dX},${dY} Z`;
+}
+function trianglePath(pt, direction, _filled) {
+  const [dx, dy] = dirVec(direction);
+  const [px, py] = perpVec(direction);
+  const len = SIZE * 1.1;
+  const baseCX = pt.x + dx * len;
+  const baseCY = pt.y + dy * len;
+  const baseAX = baseCX + px * (SIZE * 0.6);
+  const baseAY = baseCY + py * (SIZE * 0.6);
+  const baseBX = baseCX - px * (SIZE * 0.6);
+  const baseBY = baseCY - py * (SIZE * 0.6);
+  return `M${pt.x},${pt.y} L${baseAX},${baseAY} L${baseBX},${baseBY} Z`;
+}
+function crossPath(pt, direction) {
+  const [dx, dy] = dirVec(direction);
+  const [px, py] = perpVec(direction);
+  const s = SIZE * 0.5;
+  const cx = pt.x + dx * (SIZE * 0.5);
+  const cy = pt.y + dy * (SIZE * 0.5);
+  return [
+    `M${cx - s * (px + dx)},${cy - s * (py + dy)} L${cx + s * (px + dx)},${cy + s * (py + dy)}`,
+    `M${cx - s * (px - dx)},${cy - s * (py - dy)} L${cx + s * (px - dx)},${cy + s * (py - dy)}`
+  ].join(" ");
+}
+function oneSymbol(pt, direction) {
+  const [, py] = perpVec(direction);
+  const [px] = perpVec(direction);
+  const half = SIZE * 0.6;
+  return `M${pt.x - px * half},${pt.y - py * half} L${pt.x + px * half},${pt.y + py * half}`;
+}
+function crowFootSymbol(pt, direction) {
+  const [dx, dy] = dirVec(direction);
+  const [px, py] = perpVec(direction);
+  const tipX = pt.x + dx * SIZE;
+  const tipY = pt.y + dy * SIZE;
+  const spread = SIZE * 0.8;
+  const aX = pt.x + px * spread, aY = pt.y + py * spread;
+  const cX = pt.x - px * spread, cY = pt.y - py * spread;
+  return [
+    `M${aX},${aY} L${tipX},${tipY}`,
+    `M${pt.x},${pt.y} L${tipX},${tipY}`,
+    `M${cX},${cY} L${tipX},${tipY}`,
+    `M${aX},${aY} L${cX},${cY}`
+  ].join(" ");
+}
+function circleOuter(pt, direction) {
+  const [dx, dy] = dirVec(direction);
+  const r = SIZE * 0.4;
+  const cx = pt.x + dx * (SIZE * 0.4 + r);
+  const cy = pt.y + dy * (SIZE * 0.4 + r);
+  return `M${cx - r},${cy} a${r},${r} 0 1 0 ${r * 2},0 a${r},${r} 0 1 0 ${-r * 2},0 Z`;
+}
+function oneSymbolOffset(pt, direction) {
+  const [px, py] = perpVec(direction);
+  const half = SIZE * 0.6;
+  return `M${pt.x - px * half},${pt.y - py * half} L${pt.x + px * half},${pt.y + py * half}`;
+}
+function crowFootSymbolOffset(pt, direction) {
+  const [dx, dy] = dirVec(direction);
+  const [px, py] = perpVec(direction);
+  const inset = SIZE * 0.8;
+  const startX = pt.x + dx * inset;
+  const startY = pt.y + dy * inset;
+  const tipX = pt.x + dx * (inset + SIZE);
+  const tipY = pt.y + dy * (inset + SIZE);
+  const spread = SIZE * 0.8;
+  const aX = startX + px * spread, aY = startY + py * spread;
+  const cX = startX - px * spread, cY = startY - py * spread;
+  return [
+    `M${aX},${aY} L${tipX},${tipY}`,
+    `M${startX},${startY} L${tipX},${tipY}`,
+    `M${cX},${cY} L${tipX},${tipY}`
+  ].join(" ");
+}
+
+// src/components/Diagram/diagram.routing.ts
+var STUB = 24;
+var DODGE_PADDING = 16;
+var MAX_DODGE_ITERATIONS = 6;
+function pickAnchors(from, to, fromY, toY) {
+  const fcx = from.x + from.width / 2;
+  const fcy = from.y + from.height / 2;
+  const tcx = to.x + to.width / 2;
+  const tcy = to.y + to.height / 2;
+  const dx = tcx - fcx;
+  const dy = tcy - fcy;
+  let fromSide, toSide;
+  if (Math.abs(dx) >= Math.abs(dy)) {
+    fromSide = dx >= 0 ? "right" : "left";
+    toSide = dx >= 0 ? "left" : "right";
+  } else {
+    fromSide = dy >= 0 ? "bottom" : "top";
+    toSide = dy >= 0 ? "top" : "bottom";
+  }
+  return {
+    from: anchorOnSide(from, fromSide, fromY),
+    to: anchorOnSide(to, toSide, toY)
+  };
+}
+function anchorOnSide(box, side, fieldY) {
+  switch (side) {
+    case "right":
+      return { side, x: box.x + box.width, y: box.y + (fieldY ?? box.height / 2) };
+    case "left":
+      return { side, x: box.x, y: box.y + (fieldY ?? box.height / 2) };
+    case "top":
+      return { side, x: box.x + box.width / 2, y: box.y };
+    case "bottom":
+      return { side, x: box.x + box.width / 2, y: box.y + box.height };
+  }
+}
+function stubOut(a, distance2 = STUB) {
+  switch (a.side) {
+    case "right":
+      return { x: a.x + distance2, y: a.y };
+    case "left":
+      return { x: a.x - distance2, y: a.y };
+    case "top":
+      return { x: a.x, y: a.y - distance2 };
+    case "bottom":
+      return { x: a.x, y: a.y + distance2 };
+  }
+}
+function manhattanPath(from, to, obstacles = []) {
+  const f = { x: from.x, y: from.y };
+  const t = { x: to.x, y: to.y };
+  const fs = stubOut(from);
+  const ts = stubOut(to);
+  const fHoriz = from.side === "left" || from.side === "right";
+  const tHoriz = to.side === "left" || to.side === "right";
+  if (fHoriz && tHoriz) {
+    const midX = pickClearMidX((fs.x + ts.x) / 2, fs.y, ts.y, obstacles);
+    return uniqPath([
+      f,
+      fs,
+      { x: midX, y: fs.y },
+      { x: midX, y: ts.y },
+      ts,
+      t
+    ]);
+  }
+  if (!fHoriz && !tHoriz) {
+    const midY = pickClearMidY((fs.y + ts.y) / 2, fs.x, ts.x, obstacles);
+    return uniqPath([
+      f,
+      fs,
+      { x: fs.x, y: midY },
+      { x: ts.x, y: midY },
+      ts,
+      t
+    ]);
+  }
+  if (fHoriz) {
+    return uniqPath([
+      f,
+      fs,
+      { x: ts.x, y: fs.y },
+      ts,
+      t
+    ]);
+  }
+  return uniqPath([
+    f,
+    fs,
+    { x: fs.x, y: ts.y },
+    ts,
+    t
+  ]);
+}
+function pickClearMidX(idealX, y1, y2, obstacles) {
+  if (obstacles.length === 0) return idealX;
+  const yMin = Math.min(y1, y2);
+  const yMax = Math.max(y1, y2);
+  let midX = idealX;
+  for (let i = 0; i < 4; i++) {
+    let shifted = false;
+    for (const ob of obstacles) {
+      if (ob.y + ob.height + DODGE_PADDING < yMin) continue;
+      if (ob.y - DODGE_PADDING > yMax) continue;
+      const left = ob.x - DODGE_PADDING;
+      const right = ob.x + ob.width + DODGE_PADDING;
+      if (midX > left && midX < right) {
+        midX = Math.abs(midX - left) <= Math.abs(midX - right) ? left - 1 : right + 1;
+        shifted = true;
+      }
+    }
+    if (!shifted) break;
+  }
+  return midX;
+}
+function pickClearMidY(idealY, x1, x2, obstacles) {
+  if (obstacles.length === 0) return idealY;
+  const xMin = Math.min(x1, x2);
+  const xMax = Math.max(x1, x2);
+  let midY = idealY;
+  for (let i = 0; i < 4; i++) {
+    let shifted = false;
+    for (const ob of obstacles) {
+      if (ob.x + ob.width + DODGE_PADDING < xMin) continue;
+      if (ob.x - DODGE_PADDING > xMax) continue;
+      const top = ob.y - DODGE_PADDING;
+      const bot = ob.y + ob.height + DODGE_PADDING;
+      if (midY > top && midY < bot) {
+        midY = Math.abs(midY - top) <= Math.abs(midY - bot) ? top - 1 : bot + 1;
+        shifted = true;
+      }
+    }
+    if (!shifted) break;
+  }
+  return midY;
+}
+function uniqPath(points) {
+  const out = [];
+  for (const p of points) {
+    const last = out[out.length - 1];
+    if (!last || Math.abs(last.x - p.x) > 0.5 || Math.abs(last.y - p.y) > 0.5) {
+      out.push(p);
+    }
+  }
+  return out;
+}
+function dodgeObstacles(path, obstacles, padding = DODGE_PADDING) {
+  if (obstacles.length === 0 || path.length < 2) return path;
+  let working = path.slice();
+  for (let iter = 0; iter < MAX_DODGE_ITERATIONS; iter++) {
+    let dodged = false;
+    const result = [working[0]];
+    for (let i = 1; i < working.length; i++) {
+      const a = result[result.length - 1];
+      const b = working[i];
+      const detour = detourAround(a, b, obstacles, padding);
+      if (detour.length === 0) {
+        result.push(b);
+      } else {
+        for (const p of detour) result.push(p);
+        result.push(b);
+        dodged = true;
+      }
+    }
+    working = uniqPath(result);
+    if (!dodged) break;
+  }
+  return working;
+}
+function detourAround(a, b, obstacles, padding) {
+  const isHorizontal = Math.abs(a.y - b.y) < 0.5;
+  const isVertical = Math.abs(a.x - b.x) < 0.5;
+  if (!isHorizontal && !isVertical) return [];
+  let best = null;
+  for (const r of obstacles) {
+    const expanded = expandRect(r, padding);
+    if (!segmentCrossesRect(a, b, expanded)) continue;
+    let entry, exit;
+    if (isHorizontal) {
+      entry = b.x > a.x ? expanded.x : expanded.x + expanded.width;
+      exit = b.x > a.x ? expanded.x + expanded.width : expanded.x;
+    } else {
+      entry = b.y > a.y ? expanded.y : expanded.y + expanded.height;
+      exit = b.y > a.y ? expanded.y + expanded.height : expanded.y;
+    }
+    const dist = isHorizontal ? Math.abs(entry - a.x) : Math.abs(entry - a.y);
+    if (!best || dist < (isHorizontal ? Math.abs(best.entry - a.x) : Math.abs(best.entry - a.y))) {
+      best = { rect: expanded, entry, exit };
+    }
+  }
+  if (!best) return [];
+  if (isHorizontal) {
+    const aboveY = best.rect.y - 1;
+    const belowY = best.rect.y + best.rect.height + 1;
+    const detourY = Math.abs(a.y - aboveY) <= Math.abs(a.y - belowY) ? aboveY : belowY;
+    return [
+      { x: best.entry, y: a.y },
+      { x: best.entry, y: detourY },
+      { x: best.exit, y: detourY },
+      { x: best.exit, y: a.y }
+    ];
+  } else {
+    const leftX = best.rect.x - 1;
+    const rightX = best.rect.x + best.rect.width + 1;
+    const detourX = Math.abs(a.x - leftX) <= Math.abs(a.x - rightX) ? leftX : rightX;
+    return [
+      { x: a.x, y: best.entry },
+      { x: detourX, y: best.entry },
+      { x: detourX, y: best.exit },
+      { x: a.x, y: best.exit }
+    ];
+  }
+}
+function expandRect(r, padding) {
+  return {
+    x: r.x - padding,
+    y: r.y - padding,
+    width: r.width + padding * 2,
+    height: r.height + padding * 2
+  };
+}
+function segmentCrossesRect(a, b, rect) {
+  const xMin = Math.min(a.x, b.x);
+  const xMax = Math.max(a.x, b.x);
+  const yMin = Math.min(a.y, b.y);
+  const yMax = Math.max(a.y, b.y);
+  if (xMax < rect.x) return false;
+  if (xMin > rect.x + rect.width) return false;
+  if (yMax < rect.y) return false;
+  if (yMin > rect.y + rect.height) return false;
+  if (a.x >= rect.x + 1 && a.x <= rect.x + rect.width - 1 && a.y >= rect.y + 1 && a.y <= rect.y + rect.height - 1) return false;
+  if (b.x >= rect.x + 1 && b.x <= rect.x + rect.width - 1 && b.y >= rect.y + 1 && b.y <= rect.y + rect.height - 1) return false;
+  return true;
+}
+function pathFromPoints(points, cornerRadius = 8) {
+  if (points.length === 0) return "";
+  if (points.length === 1) return `M${points[0].x},${points[0].y}`;
+  if (points.length === 2 || cornerRadius <= 0) {
+    return points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x},${p.y}`).join(" ");
+  }
+  let d = `M${points[0].x},${points[0].y}`;
+  for (let i = 1; i < points.length - 1; i++) {
+    const prev = points[i - 1];
+    const curr = points[i];
+    const next = points[i + 1];
+    const r = Math.min(
+      cornerRadius,
+      distance(prev, curr) / 2,
+      distance(curr, next) / 2
+    );
+    if (r < 1) {
+      d += ` L${curr.x},${curr.y}`;
+      continue;
+    }
+    const beforeX = curr.x + Math.sign(prev.x - curr.x) * r;
+    const beforeY = curr.y + Math.sign(prev.y - curr.y) * r;
+    const afterX = curr.x + Math.sign(next.x - curr.x) * r;
+    const afterY = curr.y + Math.sign(next.y - curr.y) * r;
+    d += ` L${beforeX},${beforeY} Q${curr.x},${curr.y} ${afterX},${afterY}`;
+  }
+  const last = points[points.length - 1];
+  d += ` L${last.x},${last.y}`;
+  return d;
+}
+function distance(a, b) {
+  return Math.hypot(b.x - a.x, b.y - a.y);
+}
+function bezierPath2(from, to) {
+  const fs = stubOut(from, Math.max(40, distance(from, to) * 0.3));
+  const ts = stubOut(to, Math.max(40, distance(from, to) * 0.3));
+  return `M${from.x},${from.y} C${fs.x},${fs.y} ${ts.x},${ts.y} ${to.x},${to.y}`;
+}
+function midPoint(points) {
+  if (points.length === 0) return { x: 0, y: 0 };
+  if (points.length === 1) return points[0];
+  let total = 0;
+  const segLens = [];
+  for (let i = 1; i < points.length; i++) {
+    const len = distance(points[i - 1], points[i]);
+    segLens.push(len);
+    total += len;
+  }
+  let target = total / 2;
+  for (let i = 0; i < segLens.length; i++) {
+    if (target <= segLens[i]) {
+      const t = segLens[i] === 0 ? 0 : target / segLens[i];
+      const a = points[i];
+      const b = points[i + 1];
+      return { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    }
+    target -= segLens[i];
+  }
+  return points[points.length - 1];
+}
+function insetEndpoints(points, inset) {
+  if (points.length < 2) return points;
+  const result = points.slice();
+  if (inset.from > 0) {
+    const a = result[0];
+    const b = result[1];
+    const len = distance(a, b);
+    if (len > inset.from) {
+      const t = inset.from / len;
+      result[0] = { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    }
+  }
+  if (inset.to > 0) {
+    const lastIdx = result.length - 1;
+    const a = result[lastIdx];
+    const b = result[lastIdx - 1];
+    const len = distance(a, b);
+    if (len > inset.to) {
+      const t = inset.to / len;
+      result[lastIdx] = { x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t };
+    }
+  }
+  return result;
+}
+var HEADER_HEIGHT = 36;
+var FIELD_HEIGHT = 29;
+var DEFAULT_COLOR2 = "#71717a";
+function markerDirection(side) {
+  switch (side) {
+    case "left":
+      return "right";
+    // entity body is to the right of a left-side anchor
+    case "right":
+      return "left";
+    case "top":
+      return "down";
+    case "bottom":
+      return "up";
+  }
+}
+function strokeDashArray(style) {
+  switch (style) {
+    case "dashed":
+      return "8 4";
+    case "dotted":
+      return "2 4";
+    default:
+      return void 0;
+  }
 }
 function DiagramRelation({
   from,
@@ -12336,6 +12900,12 @@ function DiagramRelation({
   fromField: fromFieldProp,
   toField: toFieldProp,
   type,
+  fromMarker: fromMarkerProp,
+  toMarker: toMarkerProp,
+  lineStyle: lineStyleProp,
+  routing = "manhattan",
+  color = DEFAULT_COLOR2,
+  strokeWidth = 2,
   label
 }) {
   const { nodeRects, registryVersion } = useCanvas();
@@ -12344,68 +12914,160 @@ function DiagramRelation({
     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);
-    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";
+    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 {
-      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]);
+      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: "#71717a", strokeWidth: 2 }),
-    result.startSymbol && /* @__PURE__ */ jsxRuntime.jsx("path", { d: result.startSymbol, fill: "none", stroke: "#71717a", strokeWidth: 2 }),
-    result.endSymbol && /* @__PURE__ */ jsxRuntime.jsx("path", { d: result.endSymbol, fill: "none", stroke: "#71717a", strokeWidth: 2 }),
-    label && /* @__PURE__ */ jsxRuntime.jsx("foreignObject", { x: result.midX - 40, y: result.midY - 12, width: 80, height: 24, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-xs text-zinc-500", children: label }) })
+    /* @__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 = {
@@ -12847,6 +13509,8 @@ function TreeNode({ node, depth }) {
     dragState,
     setDragState,
     onNodeMove,
+    acceptExternalDrops,
+    onExternalDrop,
     nodes,
     expandNode
   } = useTreeNav();
@@ -12889,14 +13553,18 @@ function TreeNode({ node, depth }) {
     clearAutoExpand();
     setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
   }, [clearAutoExpand, setDragState]);
+  const isExternalDrag = !dragState.draggedNodeId;
   const handleDragOver = react.useCallback((e) => {
-    if (!dragState.draggedNodeId) return;
-    const sourceId = dragState.draggedNodeId;
-    if (sourceId === node.id) return;
-    if (isDescendantOf(nodes, sourceId, node.id)) return;
+    if (isExternalDrag) {
+      if (!acceptExternalDrops) return;
+    } else {
+      const sourceId = dragState.draggedNodeId;
+      if (sourceId === node.id) return;
+      if (isDescendantOf(nodes, sourceId, node.id)) return;
+    }
     e.preventDefault();
     e.stopPropagation();
-    e.dataTransfer.dropEffect = "move";
+    e.dataTransfer.dropEffect = isExternalDrag ? "copy" : "move";
     const position = computeDropPosition(e, !!isFolder);
     if (isFolder && !isExpanded && position === "inside") {
       if (!autoExpandTimer.current) {
@@ -12909,9 +13577,9 @@ function TreeNode({ node, depth }) {
       clearAutoExpand();
     }
     if (dragState.dropTargetId !== node.id || dragState.dropPosition !== position) {
-      setDragState({ draggedNodeId: sourceId, dropTargetId: node.id, dropPosition: position });
+      setDragState({ draggedNodeId: dragState.draggedNodeId, dropTargetId: node.id, dropPosition: position });
     }
-  }, [dragState, node.id, isFolder, isExpanded, nodes, setDragState, expandNode, clearAutoExpand]);
+  }, [dragState, isExternalDrag, acceptExternalDrops, node.id, isFolder, isExpanded, nodes, setDragState, expandNode, clearAutoExpand]);
   const handleDragLeave = react.useCallback((e) => {
     if (!e.currentTarget.contains(e.relatedTarget)) {
       clearAutoExpand();
@@ -12925,21 +13593,25 @@ function TreeNode({ node, depth }) {
     e.stopPropagation();
     clearAutoExpand();
     const sourceId = dragState.draggedNodeId;
-    const position = dragState.dropPosition;
-    if (!sourceId || !position) return;
-    if (sourceId === node.id) return;
-    if (isDescendantOf(nodes, sourceId, node.id)) return;
-    onNodeMove?.(sourceId, node.id, position);
+    const position = dragState.dropPosition ?? computeDropPosition(e, !!isFolder);
+    if (sourceId) {
+      if (sourceId === node.id) return;
+      if (isDescendantOf(nodes, sourceId, node.id)) return;
+      onNodeMove?.(sourceId, node.id, position);
+    } else if (acceptExternalDrops) {
+      onExternalDrop?.(e, node, position);
+    }
     setDragState({ draggedNodeId: null, dropTargetId: null, dropPosition: null });
-  }, [dragState, node.id, nodes, onNodeMove, setDragState, clearAutoExpand]);
+  }, [dragState, node, isFolder, nodes, onNodeMove, acceptExternalDrops, onExternalDrop, setDragState, clearAutoExpand]);
   const canDrag = draggable && !node.disabled;
+  const dropEnabled = draggable || acceptExternalDrops;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       "data-react-fancy-tree-node": "",
-      onDragOver: draggable ? handleDragOver : void 0,
-      onDragLeave: draggable ? handleDragLeave : void 0,
-      onDrop: draggable ? handleDrop : void 0,
+      onDragOver: dropEnabled ? handleDragOver : void 0,
+      onDragLeave: dropEnabled ? handleDragLeave : void 0,
+      onDrop: dropEnabled ? handleDrop : void 0,
       children: [
         isDropTarget && dropPosition === "before" && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -13012,6 +13684,8 @@ function TreeNavRoot({
   onNodeContextMenu,
   draggable = false,
   onNodeMove,
+  acceptExternalDrops = false,
+  onExternalDrop,
   expandedIds: controlledExpanded,
   defaultExpandedIds,
   onExpandedChange,
@@ -13065,6 +13739,8 @@ function TreeNavRoot({
       dragState,
       setDragState,
       onNodeMove,
+      acceptExternalDrops,
+      onExternalDrop,
       nodes,
       expandNode
     }),
@@ -13079,16 +13755,19 @@ function TreeNavRoot({
       draggable,
       dragState,
       onNodeMove,
+      acceptExternalDrops,
+      onExternalDrop,
       nodes,
       expandNode
     ]
   );
+  const dropEnabled = draggable || acceptExternalDrops;
   return /* @__PURE__ */ jsxRuntime.jsx(TreeNavContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
     "nav",
     {
       "data-react-fancy-tree-nav": "",
       className: cn("flex flex-col gap-0.5 py-1 text-sm", className),
-      onDragEnd: draggable ? handleDragEnd : void 0,
+      onDragEnd: dropEnabled ? handleDragEnd : void 0,
       children: nodes.map((node) => /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node, depth: 0 }, node.id))
     }
   ) });