@floegence/floe-webapp-core 0.86.21 → 0.86.23

package/dist/components/graph/GraphCanvas.d.ts

@@ -23,7 +23,7 @@ export interface GraphCanvasProps {
     /** Overlay content should use shared SurfaceFloatingLayer for point placement. */
     overlay?: JSX.Element;
     /** Optional interactive overview. Its geometry follows the same visible layout. */
-    minimap?: Pick<GraphMinimapProps, 'ariaLabel' | 'nodeStyle'>;
+    minimap?: Pick<GraphMinimapProps, 'ariaLabel' | 'nodeStyle' | 'edges'>;
     class?: string;
 }
 /** Controlled graph surface. Hosts own documents and selection; Floe owns geometry and input. */

package/dist/components/graph/GraphCanvas.js

@@ -1,29 +1,29 @@
-import { insert as S, createComponent as w, setAttribute as c, effect as z, setStyleProperty as L, className as U, template as B, memo as it, use as ot, delegateEvents as lt } from "solid-js/web";
-import { createUniqueId as dt, createSignal as J, createMemo as x, onMount as ct, For as Y, Show as _, onCleanup as ut } from "solid-js";
-import { InfiniteCanvas as st } from "../ui/InfiniteCanvas.js";
+import { insert as S, createComponent as w, setAttribute as c, effect as z, setStyleProperty as L, className as J, template as B, memo as it, use as lt, delegateEvents as dt } from "solid-js/web";
+import { createUniqueId as ct, createSignal as Q, createMemo as v, onMount as ut, For as _, Show as N, onCleanup as st } from "solid-js";
+import { InfiniteCanvas as gt } from "../ui/InfiniteCanvas.js";
 import { resolveSurfaceInteractionTargetRole as ht } from "../ui/localInteractionSurface.js";
-import { graphRelatedEdges as Q, graphEdgeLabelPosition as gt, graphSectionPath as vt } from "./geometry.js";
-import { GraphMinimap as ft } from "./GraphMinimap.js";
-var mt = /* @__PURE__ */ B("<div data-floe-canvas-pan-surface=true role=group tabindex=0>"), bt = /* @__PURE__ */ B("<div role=region tabindex=0>"), xt = /* @__PURE__ */ B('<svg class=floe-graph__edges><defs><marker viewBox="0 0 8 8"refX=7 refY=4 markerWidth=7 markerHeight=7 orient=auto-start-reverse><path d="M1 1 L7 4 L1 7"fill=none stroke=context-stroke stroke-width=1.2>'), yt = /* @__PURE__ */ B("<svg><g><path class=floe-graph__edge></path><path class=floe-graph__edge-target tabindex=0 role=button data-floe-canvas-pan-surface=true></svg>", !1, !0, !1), kt = /* @__PURE__ */ B("<svg><text class=floe-graph__edge-label aria-hidden=true></svg>", !1, !0, !1);
-function Lt(i) {
-  const N = `graph-arrow-${dt()}`;
-  let v;
-  const [Z, p] = J(null), [V, tt] = J({
+import { graphRelatedEdges as Z, graphEdgeLabelPosition as vt, graphSectionPath as ft } from "./geometry.js";
+import { GraphMinimap as mt } from "./GraphMinimap.js";
+var bt = /* @__PURE__ */ B("<div data-floe-canvas-pan-surface=true role=group tabindex=0>"), xt = /* @__PURE__ */ B("<div role=region tabindex=0>"), yt = /* @__PURE__ */ B('<svg class=floe-graph__edges><defs><marker viewBox="0 0 8 8"refX=7 refY=4 markerWidth=7 markerHeight=7 orient=auto-start-reverse><path d="M1 1 L7 4 L1 7"fill=none stroke=context-stroke stroke-width=1.2>'), kt = /* @__PURE__ */ B("<svg><g><path class=floe-graph__edge></path><path class=floe-graph__edge-target tabindex=0 role=button data-floe-canvas-pan-surface=true></svg>", !1, !0, !1), wt = /* @__PURE__ */ B("<svg><text class=floe-graph__edge-label aria-hidden=true></svg>", !1, !0, !1);
+function It(o) {
+  const V = `graph-arrow-${ct()}`;
+  let f;
+  const [p, tt] = Q(null), [F, et] = Q({
     width: 0,
     height: 0
-  }), F = () => i.highlight === void 0 ? Z() : i.highlight, et = x(() => new Map(i.layout.nodes.map((t) => [t.id, t]))), nt = x(() => {
-    const t = F();
-    return t?.kind === "node" ? Q(i.layout, t.id) : new Set(t ? [t.id] : []);
-  }), W = x(() => {
-    const t = F();
+  }), W = () => o.highlight === void 0 ? p() : o.highlight, j = v(() => o.layout.nodes), nt = v(() => new Map(j().map((t) => [t.id, t]))), rt = v(() => {
+    const t = W();
+    return t?.kind === "node" ? Z(o.layout, t.id) : new Set(t ? [t.id] : []);
+  }), q = v(() => {
+    const t = W();
     if (t?.kind !== "node") return null;
-    const e = et().get(t.id), r = e?.kind === "group" ? e.id : e?.parentId;
-    return r ? Q(i.layout, r) : null;
-  }), j = (t) => i.selected?.kind === t.kind && i.selected.id === t.id, D = (t) => {
+    const e = nt().get(t.id), r = e?.kind === "group" ? e.id : e?.parentId;
+    return r ? Z(o.layout, r) : null;
+  }), D = (t) => o.selected?.kind === t.kind && o.selected.id === t.id, H = (t) => {
     const {
       width: e,
       height: r
-    } = V();
+    } = F();
     if (!e || !r) return;
     const n = -t.x / t.scale - 240, a = -t.y / t.scale - 240, y = n + e / t.scale + 480, s = a + r / t.scale + 480;
     return {
@@ -32,34 +32,34 @@ function Lt(i) {
       right: y,
       bottom: s
     };
-  }, rt = (t) => {
-    const e = D(t);
-    if (!e) return i.layout.nodes;
+  }, at = (t) => {
+    const e = H(t);
+    if (!e) return j();
     const {
       left: r,
       top: n,
       right: a,
       bottom: y
     } = e;
-    return i.layout.nodes.filter((s) => s.id === i.selected?.id || s.x + s.width >= r && s.x <= a && s.y + s.height >= n && s.y <= y);
-  }, q = x(() => i.layout.edges.map((t) => ({
+    return j().filter((s) => s.id === o.selected?.id || s.x + s.width >= r && s.x <= a && s.y + s.height >= n && s.y <= y);
+  }, K = v(() => o.layout.edges.map((t) => ({
     edge: t,
-    path: t.sections.map(vt).join(" "),
-    label: gt(t.sections),
+    path: t.sections.map(ft).join(" "),
+    label: vt(t.sections),
     segments: t.sections.flatMap((e) => e.slice(1).map((r, n) => ({
       left: Math.min(r.x, e[n].x),
       right: Math.max(r.x, e[n].x),
       top: Math.min(r.y, e[n].y),
       bottom: Math.max(r.y, e[n].y)
     })))
-  }))), at = (t) => {
-    const e = D(t);
-    return e ? q().filter(({
+  }))), ot = (t) => {
+    const e = H(t);
+    return e ? K().filter(({
       edge: r,
       segments: n
-    }) => r.id === i.selected?.id || n.some((a) => a.left <= e.right && a.right >= e.left && a.top <= e.bottom && a.bottom >= e.top)) : q();
-  }, f = (t) => {
-    p(t), i.onHover?.(t);
+    }) => r.id === o.selected?.id || n.some((a) => a.left <= e.right && a.right >= e.left && a.top <= e.bottom && a.bottom >= e.top)) : K();
+  }, m = (t) => {
+    tt(t), o.onHover?.(t);
   }, $ = (t, e, r) => {
     const n = e.getBoundingClientRect();
     return {
@@ -73,39 +73,39 @@ function Lt(i) {
         y: n.top + Math.min(32, n.height / 2)
       }
     };
-  }, H = (t, e) => {
-    i.onContextMenu && (e.preventDefault(), e.stopPropagation(), i.onContextMenu($(t, e.currentTarget, e)));
   }, X = (t, e) => {
-    e.target === e.currentTarget && (e.key === "ContextMenu" || e.shiftKey && e.key === "F10" ? (e.preventDefault(), e.stopPropagation(), i.onContextMenu?.($(t, e.currentTarget))) : e.key === "Enter" ? (e.preventDefault(), e.stopPropagation(), i.onActivate?.($(t, e.currentTarget))) : e.key === "Escape" && (f(null), i.onActivate?.($(null, v))));
+    o.onContextMenu && (e.preventDefault(), e.stopPropagation(), o.onContextMenu($(t, e.currentTarget, e)));
+  }, Y = (t, e) => {
+    e.target === e.currentTarget && (e.key === "ContextMenu" || e.shiftKey && e.key === "F10" ? (e.preventDefault(), e.stopPropagation(), o.onContextMenu?.($(t, e.currentTarget))) : e.key === "Enter" ? (e.preventDefault(), e.stopPropagation(), o.onActivate?.($(t, e.currentTarget))) : e.key === "Escape" && (m(null), o.onActivate?.($(null, f))));
   };
-  ct(() => {
-    if (!v) return;
-    const t = () => tt({
-      width: v.clientWidth,
-      height: v.clientHeight
+  ut(() => {
+    if (!f) return;
+    const t = () => et({
+      width: f.clientWidth,
+      height: f.clientHeight
     });
     t();
     const e = new ResizeObserver(t);
-    e.observe(v), ut(() => e.disconnect());
+    e.observe(f), st(() => e.disconnect());
   });
-  const K = (t) => {
+  const O = (t) => {
     const e = {
       kind: "node",
       id: t.id
     }, r = {
-      selected: () => j(e),
-      openMenu: (n) => H(e, n)
+      selected: () => D(e),
+      openMenu: (n) => X(e, n)
     };
     return (() => {
-      var n = mt();
-      return n.$$keydown = (a) => X(e, a), n.$$contextmenu = (a) => H(e, a), n.$$click = (a) => {
-        a.target.closest("button, a, input, select, textarea, [data-floe-canvas-interactive]") || (a.stopPropagation(), i.onActivate?.($(e, a.currentTarget, a)));
-      }, n.$$focusout = () => f(null), n.$$focusin = () => f(e), n.addEventListener("pointerleave", () => f(null)), n.addEventListener("pointerenter", () => f(e)), S(n, (() => {
-        var a = it(() => !!(t.kind === "group" && i.renderGroup));
-        return () => a() ? i.renderGroup(t, r) : i.renderNode(t, r);
+      var n = bt();
+      return n.$$keydown = (a) => Y(e, a), n.$$contextmenu = (a) => X(e, a), n.$$click = (a) => {
+        a.target.closest("button, a, input, select, textarea, [data-floe-canvas-interactive]") || (a.stopPropagation(), o.onActivate?.($(e, a.currentTarget, a)));
+      }, n.$$focusout = () => m(null), n.$$focusin = () => m(e), n.addEventListener("pointerleave", () => m(null)), n.addEventListener("pointerenter", () => m(e)), S(n, (() => {
+        var a = it(() => !!(t.kind === "group" && o.renderGroup));
+        return () => a() ? o.renderGroup(t, r) : o.renderNode(t, r);
       })()), z((a) => {
-        var y = t.kind === "group" ? "floe-graph__group" : "floe-graph__node", s = t.id, G = j(e), d = `${t.x}px`, C = `${t.y}px`, M = `${t.width}px`, l = `${t.height}px`, u = t.label;
-        return y !== a.e && U(n, a.e = y), s !== a.t && c(n, "data-graph-object", a.t = s), G !== a.a && c(n, "data-selected", a.a = G), d !== a.o && L(n, "left", a.o = d), C !== a.i && L(n, "top", a.i = C), M !== a.n && L(n, "width", a.n = M), l !== a.s && L(n, "height", a.s = l), u !== a.h && c(n, "aria-label", a.h = u), a;
+        var y = t.kind === "group" ? "floe-graph__group" : "floe-graph__node", s = t.id, G = D(e), d = `${t.x}px`, C = `${t.y}px`, M = `${t.width}px`, l = `${t.height}px`, u = t.label;
+        return y !== a.e && J(n, a.e = y), s !== a.t && c(n, "data-graph-object", a.t = s), G !== a.a && c(n, "data-selected", a.a = G), d !== a.o && L(n, "left", a.o = d), C !== a.i && L(n, "top", a.i = C), M !== a.n && L(n, "width", a.n = M), l !== a.s && L(n, "height", a.s = l), u !== a.h && c(n, "aria-label", a.h = u), a;
       }, {
         e: void 0,
         t: void 0,
@@ -119,95 +119,95 @@ function Lt(i) {
     })();
   };
   return (() => {
-    var t = bt();
-    t.$$keydown = (r) => X(null, r);
-    var e = v;
-    return typeof e == "function" ? ot(e, t) : v = t, S(t, w(st, {
+    var t = xt();
+    t.$$keydown = (r) => Y(null, r);
+    var e = f;
+    return typeof e == "function" ? lt(e, t) : f = t, S(t, w(gt, {
       get viewport() {
-        return i.viewport;
+        return o.viewport;
       },
       minScale: 0.1,
       maxScale: 3,
       get ariaLabel() {
-        return i.ariaLabel;
+        return o.ariaLabel;
       },
       get onViewportChange() {
-        return i.onViewportChange;
+        return o.onViewportChange;
       },
-      onViewportInteractionStart: () => i.onInteractionStart?.(),
+      onViewportInteractionStart: () => o.onInteractionStart?.(),
       resolveTargetRole: (r) => (r.target instanceof Element ? r.target : null)?.closest('button, a, input, select, textarea, [data-floe-canvas-interactive="true"]') ? "local_surface" : ht(r),
       onCanvasPointerDown: (r) => {
-        !(r.target instanceof Element) || r.target.closest("[data-graph-object]") || i.onActivate?.($(null, v, r));
+        !(r.target instanceof Element) || r.target.closest("[data-graph-object]") || o.onActivate?.($(null, f, r));
       },
-      onCanvasContextMenu: (r) => i.onContextMenu?.({
+      onCanvasContextMenu: (r) => o.onContextMenu?.({
         object: null,
-        owner: v,
+        owner: f,
         position: {
           x: r.clientX,
           y: r.clientY
         }
       }),
       children: (r) => {
-        const n = x(() => {
-          const d = D(r());
+        const n = v(() => {
+          const d = H(r());
           if (d) return d;
           const {
             x: C,
             y: M,
             width: l,
             height: u
-          } = i.layout.bounds;
+          } = o.layout.bounds;
           return {
             left: C - 240,
             top: M - 240,
             right: C + l + 240,
             bottom: M + u + 240
           };
-        }), a = x(() => rt(r())), y = x(() => a().filter((d) => d.kind === "group")), s = x(() => a().filter((d) => d.kind !== "group")), G = x(() => at(r()));
-        return [w(Y, {
+        }), a = v(() => at(r())), y = v(() => a().filter((d) => d.kind === "group")), s = v(() => a().filter((d) => d.kind !== "group")), G = v(() => ot(r()));
+        return [w(_, {
           get each() {
             return y();
           },
-          children: K
+          children: O
         }), (() => {
-          var d = xt(), C = d.firstChild, M = C.firstChild;
-          return c(M, "id", N), S(d, w(Y, {
+          var d = yt(), C = d.firstChild, M = C.firstChild;
+          return c(M, "id", V), S(d, w(_, {
             get each() {
               return G();
             },
             children: (l) => {
               const {
                 edge: u
-              } = l, m = {
+              } = l, b = {
                 kind: "edge",
                 id: u.id
               }, I = () => l.path, R = () => l.label;
-              return w(_, {
+              return w(N, {
                 get when() {
-                  return !W() || W().has(u.id);
+                  return !q() || q().has(u.id);
                 },
                 get children() {
-                  var b = yt(), E = b.firstChild, h = E.nextSibling;
-                  return c(E, "marker-end", `url(#${N})`), S(b, w(_, {
+                  var x = kt(), E = x.firstChild, g = E.nextSibling;
+                  return c(E, "marker-end", `url(#${V})`), S(x, w(N, {
                     get when() {
                       return R();
                     },
-                    children: (o) => (() => {
-                      var k = kt();
-                      return S(k, () => u.label), z((g) => {
-                        var P = /^\d+$/.test(u.label), T = o().x, A = o().y - 6;
-                        return P !== g.e && c(k, "data-count", g.e = P), T !== g.t && c(k, "x", g.t = T), A !== g.a && c(k, "y", g.a = A), g;
+                    children: (i) => (() => {
+                      var k = wt();
+                      return S(k, () => u.label), z((h) => {
+                        var P = /^\d+$/.test(u.label), T = i().x, A = i().y - 6;
+                        return P !== h.e && c(k, "data-count", h.e = P), T !== h.t && c(k, "x", h.t = T), A !== h.a && c(k, "y", h.a = A), h;
                       }, {
                         e: void 0,
                         t: void 0,
                         a: void 0
                       }), k;
                     })()
-                  }), h), h.$$keydown = (o) => X(m, o), h.$$contextmenu = (o) => H(m, o), h.$$click = (o) => {
-                    o.stopPropagation(), i.onActivate?.($(m, o.currentTarget, o));
-                  }, h.addEventListener("blur", () => f(null)), h.addEventListener("focus", () => f(m)), h.addEventListener("pointerleave", () => f(null)), h.addEventListener("pointerenter", () => f(m)), z((o) => {
-                    var k = u.id, g = nt().has(u.id), P = j(m), T = I(), A = I(), O = u.label;
-                    return k !== o.e && c(b, "data-graph-object", o.e = k), g !== o.t && c(b, "data-emphasized", o.t = g), P !== o.a && c(b, "data-selected", o.a = P), T !== o.o && c(E, "d", o.o = T), A !== o.i && c(h, "d", o.i = A), O !== o.n && c(h, "aria-label", o.n = O), o;
+                  }), g), g.$$keydown = (i) => Y(b, i), g.$$contextmenu = (i) => X(b, i), g.$$click = (i) => {
+                    i.stopPropagation(), o.onActivate?.($(b, i.currentTarget, i));
+                  }, g.addEventListener("blur", () => m(null)), g.addEventListener("focus", () => m(b)), g.addEventListener("pointerleave", () => m(null)), g.addEventListener("pointerenter", () => m(b)), z((i) => {
+                    var k = u.id, h = rt().has(u.id), P = D(b), T = I(), A = I(), U = u.label;
+                    return k !== i.e && c(x, "data-graph-object", i.e = k), h !== i.t && c(x, "data-emphasized", i.t = h), P !== i.a && c(x, "data-selected", i.a = P), T !== i.o && c(E, "d", i.o = T), A !== i.i && c(g, "d", i.i = A), U !== i.n && c(g, "aria-label", i.n = U), i;
                   }, {
                     e: void 0,
                     t: void 0,
@@ -215,13 +215,13 @@ function Lt(i) {
                     o: void 0,
                     i: void 0,
                     n: void 0
-                  }), b;
+                  }), x;
                 }
               });
             }
           }), null), z((l) => {
-            var u = n().right - n().left, m = n().bottom - n().top, I = `${n().left} ${n().top} ${n().right - n().left} ${n().bottom - n().top}`, R = `${n().left}px`, b = `${n().top}px`, E = i.ariaLabel;
-            return u !== l.e && c(d, "width", l.e = u), m !== l.t && c(d, "height", l.t = m), I !== l.a && c(d, "viewBox", l.a = I), R !== l.o && L(d, "left", l.o = R), b !== l.i && L(d, "top", l.i = b), E !== l.n && c(d, "aria-label", l.n = E), l;
+            var u = n().right - n().left, b = n().bottom - n().top, I = `${n().left} ${n().top} ${n().right - n().left} ${n().bottom - n().top}`, R = `${n().left}px`, x = `${n().top}px`, E = o.ariaLabel;
+            return u !== l.e && c(d, "width", l.e = u), b !== l.t && c(d, "height", l.t = b), I !== l.a && c(d, "viewBox", l.a = I), R !== l.o && L(d, "left", l.o = R), x !== l.i && L(d, "top", l.i = x), E !== l.n && c(d, "aria-label", l.n = E), l;
           }, {
             e: void 0,
             t: void 0,
@@ -230,50 +230,53 @@ function Lt(i) {
             i: void 0,
             n: void 0
           }), d;
-        })(), w(Y, {
+        })(), w(_, {
           get each() {
             return s();
           },
-          children: K
+          children: O
         })];
       }
-    }), null), S(t, w(_, {
+    }), null), S(t, w(N, {
       get when() {
-        return i.minimap;
+        return o.minimap;
       },
-      children: (r) => w(ft, {
+      children: (r) => w(mt, {
         get layout() {
-          return i.layout;
+          return o.layout;
         },
         get viewport() {
-          return i.viewport;
+          return o.viewport;
         },
         get size() {
-          return V();
+          return F();
         },
         get onViewportChange() {
-          return i.onViewportChange;
+          return o.onViewportChange;
         },
         get onInteractionStart() {
-          return i.onInteractionStart;
+          return o.onInteractionStart;
         },
         get ariaLabel() {
           return r().ariaLabel;
         },
         get nodeStyle() {
           return r().nodeStyle;
+        },
+        get edges() {
+          return r().edges;
         }
       })
-    }), null), S(t, () => i.overlay, null), z((r) => {
-      var n = `floe-graph ${i.class ?? ""}`, a = i.ariaLabel;
-      return n !== r.e && U(t, r.e = n), a !== r.t && c(t, "aria-label", r.t = a), r;
+    }), null), S(t, () => o.overlay, null), z((r) => {
+      var n = `floe-graph ${o.class ?? ""}`, a = o.ariaLabel;
+      return n !== r.e && J(t, r.e = n), a !== r.t && c(t, "aria-label", r.t = a), r;
     }, {
       e: void 0,
       t: void 0
     }), t;
   })();
 }
-lt(["focusin", "focusout", "click", "contextmenu", "keydown"]);
+dt(["focusin", "focusout", "click", "contextmenu", "keydown"]);
 export {
-  Lt as GraphCanvas
+  It as GraphCanvas
 };

package/dist/components/graph/GraphMinimap.d.ts

@@ -6,6 +6,8 @@ export interface GraphMinimapNodeStyle {
 }
 export interface GraphMinimapProps {
     layout: GraphLayout;
+    /** Optional overview routes independent of transient main-canvas edges. */
+    edges?: GraphLayout['edges'];
     viewport: GraphViewport;
     size: {
         width: number;

package/dist/components/graph/GraphMinimap.js

@@ -1,25 +1,25 @@
-import { insert as k, createComponent as _, effect as g, setAttribute as h, style as C, template as f, use as S, delegateEvents as z } from "solid-js/web";
-import { createMemo as w, For as I } from "solid-js";
-import { graphSectionPath as A, fitGraphViewport as D } from "./geometry.js";
-var L = /* @__PURE__ */ f('<svg class=floe-graph__minimap role=region tabindex=0 preserveAspectRatio="xMidYMid meet"data-floe-canvas-interactive=true><path class=floe-graph__minimap-edges></path><rect class=floe-graph__minimap-viewport>'), V = /* @__PURE__ */ f("<svg><path class=floe-graph__minimap-groups></svg>", !1, !0, !1), E = /* @__PURE__ */ f("<svg><path class=floe-graph__minimap-nodes></svg>", !1, !0, !1);
+import { insert as k, createComponent as _, effect as w, setAttribute as h, style as C, template as f, use as A, delegateEvents as D } from "solid-js/web";
+import { createMemo as u, For as I } from "solid-js";
+import { graphSectionPath as L, fitGraphViewport as V } from "./geometry.js";
+var E = /* @__PURE__ */ f('<svg class=floe-graph__minimap role=region tabindex=0 preserveAspectRatio="xMidYMid meet"data-floe-canvas-interactive=true><path class=floe-graph__minimap-edges></path><rect class=floe-graph__minimap-viewport>'), j = /* @__PURE__ */ f("<svg><path class=floe-graph__minimap-groups></svg>", !1, !0, !1), B = /* @__PURE__ */ f("<svg><path class=floe-graph__minimap-nodes></svg>", !1, !0, !1);
 function R(i) {
-  let v, s;
-  const u = w(() => {
+  let c, s;
+  const P = u(() => i.layout.nodes), S = u(() => i.layout.bounds), g = u(() => {
     const {
       x: e,
       y: l,
       width: d,
       height: n
-    } = i.layout.bounds, t = Math.max(d, n, 1) * 0.04;
+    } = S(), t = Math.max(d, n, 1) * 0.04;
     return {
       x: e - t,
       y: l - t,
       width: d + t * 2,
       height: n + t * 2
     };
-  }), m = w(() => {
+  }), m = u(() => {
     const e = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
-    for (const n of i.layout.nodes) {
+    for (const n of P()) {
       const t = i.nodeStyle?.(n) ?? {}, o = n.kind === "group" ? e : l, r = JSON.stringify([t.fill ?? null, t.stroke ?? null]);
       let a = o.get(r);
       a || (a = {
@@ -42,14 +42,14 @@ function R(i) {
     "--graph-minimap-fill": e.fill,
     "--graph-minimap-stroke": e.stroke,
     "--graph-minimap-opacity": e.fill || e.stroke ? "1" : void 0
-  }), P = w(() => i.layout.edges.flatMap((e) => e.sections.map(A)).join(" ")), y = (e) => {
-    const l = v?.getScreenCTM();
+  }), z = u(() => (i.edges ?? i.layout.edges).flatMap((e) => e.sections.map(L)).join(" ")), y = (e) => {
+    const l = c?.getScreenCTM();
     return l ? new DOMPoint(e.clientX, e.clientY).matrixTransform(l.inverse()) : void 0;
   }, x = (e) => {
-    s?.id === e.pointerId && (s = void 0, v?.hasPointerCapture(e.pointerId) && v.releasePointerCapture(e.pointerId));
+    s?.id === e.pointerId && (s = void 0, c?.hasPointerCapture(e.pointerId) && c.releasePointerCapture(e.pointerId));
   };
   return (() => {
-    var e = L(), l = e.firstChild, d = l.nextSibling;
+    var e = E(), l = e.firstChild, d = l.nextSibling;
     e.$$keydown = (t) => {
       const r = {
         ArrowLeft: [1, 0],
@@ -61,7 +61,7 @@ function R(i) {
         ...i.viewport,
         x: i.viewport.x + r[0] * i.size.width * 0.2,
         y: i.viewport.y + r[1] * i.size.height * 0.2
-      } : D(i.layout.bounds, i.size, 24)));
+      } : V(i.layout.bounds, i.size, 24)));
     }, e.addEventListener("lostpointercapture", () => {
       s = void 0;
     }), e.addEventListener("pointercancel", x), e.$$pointerup = x, e.$$pointermove = (t) => {
@@ -75,7 +75,7 @@ function R(i) {
     }, e.$$pointerdown = (t) => {
       if (t.button !== 0) return;
       const o = y(t);
-      o && (t.preventDefault(), t.stopPropagation(), i.onInteractionStart?.(), v.focus({
+      o && (t.preventDefault(), t.stopPropagation(), i.onInteractionStart?.(), c.focus({
         preventScroll: !0
       }), t.target.matches(".floe-graph__minimap-viewport") || i.onViewportChange({
         ...i.viewport,
@@ -88,18 +88,18 @@ function R(i) {
         viewport: {
           ...i.viewport
         }
-      }, v.setPointerCapture(t.pointerId));
+      }, c.setPointerCapture(t.pointerId));
     };
-    var n = v;
-    return typeof n == "function" ? S(n, e) : v = e, k(e, _(I, {
+    var n = c;
+    return typeof n == "function" ? A(n, e) : c = e, k(e, _(I, {
       get each() {
         return m().groups;
       },
       children: (t) => (() => {
-        var o = V();
-        return g((r) => {
-          var a = t.path, c = p(t);
-          return a !== r.e && h(o, "d", r.e = a), r.t = C(o, c, r.t), r;
+        var o = j();
+        return w((r) => {
+          var a = t.path, v = p(t);
+          return a !== r.e && h(o, "d", r.e = a), r.t = C(o, v, r.t), r;
         }, {
           e: void 0,
           t: void 0
@@ -110,18 +110,18 @@ function R(i) {
         return m().nodes;
       },
       children: (t) => (() => {
-        var o = E();
-        return g((r) => {
-          var a = t.path, c = p(t);
-          return a !== r.e && h(o, "d", r.e = a), r.t = C(o, c, r.t), r;
+        var o = B();
+        return w((r) => {
+          var a = t.path, v = p(t);
+          return a !== r.e && h(o, "d", r.e = a), r.t = C(o, v, r.t), r;
         }, {
           e: void 0,
           t: void 0
         }), o;
       })()
-    }), d), g((t) => {
-      var o = i.ariaLabel, r = `${u().x} ${u().y} ${u().width} ${u().height}`, a = P(), c = -i.viewport.x / i.viewport.scale, $ = -i.viewport.y / i.viewport.scale, b = i.size.width / i.viewport.scale, M = i.size.height / i.viewport.scale;
-      return o !== t.e && h(e, "aria-label", t.e = o), r !== t.t && h(e, "viewBox", t.t = r), a !== t.a && h(l, "d", t.a = a), c !== t.o && h(d, "x", t.o = c), $ !== t.i && h(d, "y", t.i = $), b !== t.n && h(d, "width", t.n = b), M !== t.s && h(d, "height", t.s = M), t;
+    }), d), w((t) => {
+      var o = i.ariaLabel, r = `${g().x} ${g().y} ${g().width} ${g().height}`, a = z(), v = -i.viewport.x / i.viewport.scale, $ = -i.viewport.y / i.viewport.scale, b = i.size.width / i.viewport.scale, M = i.size.height / i.viewport.scale;
+      return o !== t.e && h(e, "aria-label", t.e = o), r !== t.t && h(e, "viewBox", t.t = r), a !== t.a && h(l, "d", t.a = a), v !== t.o && h(d, "x", t.o = v), $ !== t.i && h(d, "y", t.i = $), b !== t.n && h(d, "width", t.n = b), M !== t.s && h(d, "height", t.s = M), t;
     }, {
       e: void 0,
       t: void 0,
@@ -133,7 +133,7 @@ function R(i) {
     }), e;
   })();
 }
-z(["pointerdown", "pointermove", "pointerup", "keydown"]);
+D(["pointerdown", "pointermove", "pointerup", "keydown"]);
 export {
   R as GraphMinimap
 };

package/dist/components/graph/engine.d.ts

@@ -1,6 +1,10 @@
-import type { GraphInput, GraphLayout, GraphLayoutOptions } from './types';
+import type { GraphEdge, GraphInput, GraphLayout, GraphLayoutEdge, GraphLayoutOptions, GraphRoutingOptions } from './types';
 export interface GraphLayoutEngine {
     layout(input: GraphInput, options?: GraphLayoutOptions): Promise<GraphLayout>;
+    /** Route only the supplied edges; geometry and bounds remain authoritative. */
+    route(geometry: Pick<GraphLayout, 'nodes' | 'bounds'>, edges: readonly GraphEdge[], options?: GraphRoutingOptions, request?: {
+        signal?: AbortSignal;
+    }): Promise<readonly GraphLayoutEdge[]>;
     dispose(): void;
 }
 /** One worker per mounted graph. Dispose on unmount; failures are never hidden. */

package/dist/components/graph/engine.js

@@ -1,39 +1,55 @@
 function w() {
-  const t = new Worker(new URL("../../assets/layout-worker-BK6m515B.js", import.meta.url), { type: "module" });
-  let s, u = 0;
-  const o = /* @__PURE__ */ new Map(), n = (e) => {
-    s = e, t.terminate();
-    for (const r of o.values()) r.reject(e);
-    o.clear();
+  const o = new Worker(new URL("../../assets/layout-worker-CFMp3t5w.js", import.meta.url), { type: "module" });
+  let a, d = 0;
+  const t = /* @__PURE__ */ new Map(), n = (e) => {
+    a = e, o.terminate();
+    for (const r of t.values())
+      r.cleanup(), r.reject(e);
+    t.clear();
   };
-  return t.addEventListener(
+  o.addEventListener(
     "error",
     (e) => n(new Error(e.message || "Graph layout worker failed"))
-  ), t.addEventListener(
+  ), o.addEventListener(
     "messageerror",
     () => n(new Error("Invalid graph layout worker response"))
-  ), t.addEventListener("message", ({ data: e }) => {
-    if (!e || !Number.isInteger(e.id) || !e.error && !e.layout) {
+  ), o.addEventListener("message", ({ data: e }) => {
+    if (!e || !Number.isInteger(e.id)) {
       n(new Error("Invalid graph layout worker response"));
       return;
     }
-    const r = o.get(e.id);
-    r && (o.delete(e.id), e.error ? r.reject(new Error(e.error)) : r.resolve(e.layout));
-  }), {
-    layout(e, r) {
-      return s ? Promise.reject(s) : new Promise((a, l) => {
-        const i = ++u;
-        o.set(i, { resolve: a, reject: l });
-        try {
-          t.postMessage({ id: i, input: e, options: r ?? {} });
-        } catch (p) {
-          o.delete(i), l(p);
-        }
-      });
-    },
-    dispose() {
-      n(new Error("Graph layout engine disposed"));
+    const r = t.get(e.id);
+    if (r) {
+      if (!e.error && (r.kind === "layout" ? !e.layout : !Array.isArray(e.edges))) {
+        n(new Error("Invalid graph layout worker response"));
+        return;
+      }
+      t.delete(e.id), r.cleanup(), e.error ? r.reject(new Error(e.error)) : r.resolve(r.kind === "layout" ? e.layout : e.edges);
     }
+  });
+  const p = (e, r) => a ? Promise.reject(a) : r?.aborted ? Promise.reject(new DOMException("Graph routing canceled", "AbortError")) : new Promise((l, s) => {
+    const i = ++d, u = () => {
+      t.delete(i) && (r?.removeEventListener("abort", u), o.postMessage({ id: i, cancel: !0 }), s(new DOMException("Graph routing canceled", "AbortError")));
+    };
+    t.set(i, {
+      kind: e.kind,
+      resolve: (c) => l(c),
+      reject: s,
+      cleanup: () => r?.removeEventListener("abort", u)
+    }), r?.addEventListener("abort", u, { once: !0 });
+    try {
+      o.postMessage({ id: i, ...e });
+    } catch (c) {
+      t.delete(i), r?.removeEventListener("abort", u), s(c);
+    }
+  });
+  return {
+    layout: (e, r = {}) => p({ kind: "layout", input: e, options: r }),
+    route: (e, r, l = {}, s) => p(
+      { kind: "route", geometry: e, edges: r, options: l },
+      s?.signal
+    ),
+    dispose: () => n(new Error("Graph layout engine disposed"))
   };
 }
 export {

package/dist/components/graph/group-layout.d.ts

@@ -0,0 +1,6 @@
+import type { GraphGroupLayout, GraphLayoutNode, GraphLayoutOptions, GraphPoint } from './types';
+/** Pack complete child subtrees in submitted order, without using edges as ranks. */
+export declare function arrangeGroupMembers(members: readonly GraphLayoutNode[], rule: GraphGroupLayout, padding: NonNullable<GraphLayoutOptions['groupPadding']>, spacing: number, translate: (node: GraphLayoutNode, dx: number, dy: number) => void, origin?: GraphPoint): {
+    width: number;
+    height: number;
+};