@floegence/floe-webapp-core 0.83.1 → 0.84.0

package/dist/components/graph/GraphCanvas.js

@@ -1,34 +1,34 @@
-import { insert as w, createComponent as y, setAttribute as c, effect as C, className as N, template as M, memo as Q, setStyleProperty as E, use as Z, delegateEvents as p } from "solid-js/web";
-import { createUniqueId as ee, createSignal as V, createMemo as k, onMount as te, For as P, Show as ne, onCleanup as re } from "solid-js";
-import { InfiniteCanvas as ae } from "../ui/InfiniteCanvas.js";
-import { resolveSurfaceInteractionTargetRole as ie } from "../ui/localInteractionSurface.js";
-import { graphRelatedEdges as B, graphSectionPath as oe } from "./geometry.js";
-var le = /* @__PURE__ */ M("<div data-floe-canvas-pan-surface=true role=group tabindex=0>"), ce = /* @__PURE__ */ M("<div role=region tabindex=0>"), de = /* @__PURE__ */ M('<svg class=floe-graph__edges width=1 height=1><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>'), ue = /* @__PURE__ */ M("<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);
-function me(i) {
-  const T = `graph-arrow-${ee()}`;
-  let u;
-  const [F, W] = V(null), [q, K] = V({
+import { insert as y, createComponent as w, setAttribute as l, effect as S, className as V, template as _, memo as p, setStyleProperty as T, use as ee, delegateEvents as te } from "solid-js/web";
+import { createUniqueId as ne, createSignal as B, createMemo as $, onMount as re, For as D, Show as F, onCleanup as ae } from "solid-js";
+import { InfiniteCanvas as ie } from "../ui/InfiniteCanvas.js";
+import { resolveSurfaceInteractionTargetRole as oe } from "../ui/localInteractionSurface.js";
+import { graphRelatedEdges as W, graphEdgeLabelPosition as le, graphSectionPath as ce } from "./geometry.js";
+var de = /* @__PURE__ */ _("<div data-floe-canvas-pan-surface=true role=group tabindex=0>"), se = /* @__PURE__ */ _("<div role=region tabindex=0>"), ue = /* @__PURE__ */ _('<svg class=floe-graph__edges width=1 height=1><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>'), he = /* @__PURE__ */ _("<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), ge = /* @__PURE__ */ _("<svg><text class=floe-graph__edge-label aria-hidden=true></svg>", !1, !0, !1);
+function ke(i) {
+  const H = `graph-arrow-${ne()}`;
+  let g;
+  const [q, K] = B(null), [O, U] = B({
     width: 0,
     height: 0
-  }), A = () => i.highlight === void 0 ? F() : i.highlight, O = k(() => new Map(i.layout.nodes.map((e) => [e.id, e]))), U = k(() => {
-    const e = A();
-    return e?.kind === "node" ? B(i.layout, e.id) : new Set(e ? [e.id] : []);
-  }), R = k(() => {
-    const e = A();
+  }), X = () => i.highlight === void 0 ? q() : i.highlight, J = $(() => new Map(i.layout.nodes.map((e) => [e.id, e]))), Q = $(() => {
+    const e = X();
+    return e?.kind === "node" ? W(i.layout, e.id) : new Set(e ? [e.id] : []);
+  }), Y = $(() => {
+    const e = X();
     if (e?.kind !== "node") return null;
-    const t = O().get(e.id), r = t?.kind === "group" ? t.id : t?.parentId;
-    return r ? B(i.layout, r) : null;
-  }), S = (e) => i.selected?.kind === e.kind && i.selected.id === e.id, J = (e) => {
+    const t = J().get(e.id), r = t?.kind === "group" ? t.id : t?.parentId;
+    return r ? W(i.layout, r) : null;
+  }), A = (e) => i.selected?.kind === e.kind && i.selected.id === e.id, Z = (e) => {
     const {
       width: t,
       height: r
-    } = q();
+    } = O();
     if (!t || !r) return i.layout.nodes;
-    const a = -e.x / e.scale - 240, n = -e.y / e.scale - 240, x = a + t / e.scale + 480, l = n + r / e.scale + 480;
-    return i.layout.nodes.filter((d) => d.id === i.selected?.id || d.x + d.width >= a && d.x <= x && d.y + d.height >= n && d.y <= l);
-  }, s = (e) => {
-    W(e), i.onHover?.(e);
-  }, m = (e, t, r) => {
+    const a = -e.x / e.scale - 240, n = -e.y / e.scale - 240, b = a + t / e.scale + 480, c = n + r / e.scale + 480;
+    return i.layout.nodes.filter((d) => d.id === i.selected?.id || d.x + d.width >= a && d.x <= b && d.y + d.height >= n && d.y <= c);
+  }, v = (e) => {
+    K(e), i.onHover?.(e);
+  }, x = (e, t, r) => {
     const a = t.getBoundingClientRect();
     return {
       object: e,
@@ -41,39 +41,39 @@ function me(i) {
         y: a.top + Math.min(32, a.height / 2)
       }
     };
-  }, L = (e, t) => {
-    i.onContextMenu && (t.preventDefault(), t.stopPropagation(), i.onContextMenu(m(e, t.currentTarget, t)));
-  }, _ = (e, t) => {
-    t.target === t.currentTarget && (t.key === "ContextMenu" || t.shiftKey && t.key === "F10" ? (t.preventDefault(), t.stopPropagation(), i.onContextMenu?.(m(e, t.currentTarget))) : t.key === "Enter" ? (t.preventDefault(), t.stopPropagation(), i.onActivate?.(m(e, t.currentTarget))) : t.key === "Escape" && (s(null), i.onActivate?.(m(null, u))));
+  }, R = (e, t) => {
+    i.onContextMenu && (t.preventDefault(), t.stopPropagation(), i.onContextMenu(x(e, t.currentTarget, t)));
+  }, j = (e, t) => {
+    t.target === t.currentTarget && (t.key === "ContextMenu" || t.shiftKey && t.key === "F10" ? (t.preventDefault(), t.stopPropagation(), i.onContextMenu?.(x(e, t.currentTarget))) : t.key === "Enter" ? (t.preventDefault(), t.stopPropagation(), i.onActivate?.(x(e, t.currentTarget))) : t.key === "Escape" && (v(null), i.onActivate?.(x(null, g))));
   };
-  te(() => {
-    if (!u) return;
-    const e = () => K({
-      width: u.clientWidth,
-      height: u.clientHeight
+  re(() => {
+    if (!g) return;
+    const e = () => U({
+      width: g.clientWidth,
+      height: g.clientHeight
     });
     e();
     const t = new ResizeObserver(e);
-    t.observe(u), re(() => t.disconnect());
+    t.observe(g), ae(() => t.disconnect());
   });
-  const j = (e) => {
+  const G = (e) => {
     const t = {
       kind: "node",
       id: e.id
     }, r = {
-      selected: () => S(t),
-      openMenu: (a) => L(t, a)
+      selected: () => A(t),
+      openMenu: (a) => R(t, a)
     };
     return (() => {
-      var a = le();
-      return a.$$keydown = (n) => _(t, n), a.$$contextmenu = (n) => L(t, n), a.$$click = (n) => {
-        n.target.closest("button, a, input, select, textarea, [data-floe-canvas-interactive]") || (n.stopPropagation(), i.onActivate?.(m(t, n.currentTarget, n)));
-      }, a.$$focusout = () => s(null), a.$$focusin = () => s(t), a.addEventListener("pointerleave", () => s(null)), a.addEventListener("pointerenter", () => s(t)), w(a, (() => {
-        var n = Q(() => !!(e.kind === "group" && i.renderGroup));
+      var a = de();
+      return a.$$keydown = (n) => j(t, n), a.$$contextmenu = (n) => R(t, n), a.$$click = (n) => {
+        n.target.closest("button, a, input, select, textarea, [data-floe-canvas-interactive]") || (n.stopPropagation(), i.onActivate?.(x(t, n.currentTarget, n)));
+      }, a.$$focusout = () => v(null), a.$$focusin = () => v(t), a.addEventListener("pointerleave", () => v(null)), a.addEventListener("pointerenter", () => v(t)), y(a, (() => {
+        var n = p(() => !!(e.kind === "group" && i.renderGroup));
         return () => n() ? i.renderGroup(e, r) : i.renderNode(e, r);
-      })()), C((n) => {
-        var x = e.kind === "group" ? "floe-graph__group" : "floe-graph__node", l = e.id, d = S(t), $ = `${e.x}px`, h = `${e.y}px`, g = `${e.width}px`, b = `${e.height}px`, v = e.label;
-        return x !== n.e && N(a, n.e = x), l !== n.t && c(a, "data-graph-object", n.t = l), d !== n.a && c(a, "data-selected", n.a = d), $ !== n.o && E(a, "left", n.o = $), h !== n.i && E(a, "top", n.i = h), g !== n.n && E(a, "width", n.n = g), b !== n.s && E(a, "height", n.s = b), v !== n.h && c(a, "aria-label", n.h = v), n;
+      })()), S((n) => {
+        var b = e.kind === "group" ? "floe-graph__group" : "floe-graph__node", c = e.id, d = A(t), P = `${e.x}px`, s = `${e.y}px`, f = `${e.width}px`, C = `${e.height}px`, I = e.label;
+        return b !== n.e && V(a, n.e = b), c !== n.t && l(a, "data-graph-object", n.t = c), d !== n.a && l(a, "data-selected", n.a = d), P !== n.o && T(a, "left", n.o = P), s !== n.i && T(a, "top", n.i = s), f !== n.n && T(a, "width", n.n = f), C !== n.s && T(a, "height", n.s = C), I !== n.h && l(a, "aria-label", n.h = I), n;
       }, {
         e: void 0,
         t: void 0,
@@ -87,10 +87,10 @@ function me(i) {
     })();
   };
   return (() => {
-    var e = ce();
-    e.$$keydown = (r) => _(null, r);
-    var t = u;
-    return typeof t == "function" ? Z(t, e) : u = e, w(e, y(ae, {
+    var e = se();
+    e.$$keydown = (r) => j(null, r);
+    var t = g;
+    return typeof t == "function" ? ee(t, e) : g = e, y(e, w(ie, {
       get viewport() {
         return i.viewport;
       },
@@ -103,47 +103,62 @@ function me(i) {
         return i.onViewportChange;
       },
       onViewportInteractionStart: () => i.onInteractionStart?.(),
-      resolveTargetRole: (r) => (r.target instanceof Element ? r.target : null)?.closest('button, a, input, select, textarea, [data-floe-canvas-interactive="true"]') ? "local_surface" : ie(r),
+      resolveTargetRole: (r) => (r.target instanceof Element ? r.target : null)?.closest('button, a, input, select, textarea, [data-floe-canvas-interactive="true"]') ? "local_surface" : oe(r),
       onCanvasPointerDown: (r) => {
-        !(r.target instanceof Element) || r.target.closest("[data-graph-object]") || i.onActivate?.(m(null, u, r));
+        !(r.target instanceof Element) || r.target.closest("[data-graph-object]") || i.onActivate?.(x(null, g, r));
       },
       onCanvasContextMenu: (r) => i.onContextMenu?.({
         object: null,
-        owner: u,
+        owner: g,
         position: {
           x: r.clientX,
           y: r.clientY
         }
       }),
       children: (r) => {
-        const a = k(() => J(r())), n = k(() => a().filter((l) => l.kind === "group")), x = k(() => a().filter((l) => l.kind !== "group"));
-        return [y(P, {
+        const a = $(() => Z(r())), n = $(() => a().filter((c) => c.kind === "group")), b = $(() => a().filter((c) => c.kind !== "group"));
+        return [w(D, {
           get each() {
             return n();
           },
-          children: j
+          children: G
         }), (() => {
-          var l = de(), d = l.firstChild, $ = d.firstChild;
-          return c($, "id", T), w(l, y(P, {
+          var c = ue(), d = c.firstChild, P = d.firstChild;
+          return l(P, "id", H), y(c, w(D, {
             get each() {
               return i.layout.edges;
             },
-            children: (h) => {
-              const g = {
+            children: (s) => {
+              const f = {
                 kind: "edge",
-                id: h.id
-              }, b = () => h.sections.map(oe).join(" ");
-              return y(ne, {
+                id: s.id
+              }, C = () => s.sections.map(ce).join(" "), I = () => le(s.sections);
+              return w(F, {
                 get when() {
-                  return !R() || R().has(h.id);
+                  return !Y() || Y().has(s.id);
                 },
                 get children() {
-                  var v = ue(), I = v.firstChild, f = I.nextSibling;
-                  return c(I, "marker-end", `url(#${T})`), f.$$keydown = (o) => _(g, o), f.$$contextmenu = (o) => L(g, o), f.$$click = (o) => {
-                    o.stopPropagation(), i.onActivate?.(m(g, o.currentTarget, o));
-                  }, f.addEventListener("blur", () => s(null)), f.addEventListener("focus", () => s(g)), f.addEventListener("pointerleave", () => s(null)), f.addEventListener("pointerenter", () => s(g)), C((o) => {
-                    var z = h.id, D = U().has(h.id), H = S(g), X = b(), Y = b(), G = h.label;
-                    return z !== o.e && c(v, "data-graph-object", o.e = z), D !== o.t && c(v, "data-emphasized", o.t = D), H !== o.a && c(v, "data-selected", o.a = H), X !== o.o && c(I, "d", o.o = X), Y !== o.i && c(f, "d", o.i = Y), G !== o.n && c(f, "aria-label", o.n = G), o;
+                  var k = he(), z = k.firstChild, u = z.nextSibling;
+                  return l(z, "marker-end", `url(#${H})`), y(k, w(F, {
+                    get when() {
+                      return I();
+                    },
+                    children: (o) => (() => {
+                      var m = ge();
+                      return y(m, () => s.label), S((h) => {
+                        var E = /^\d+$/.test(s.label), L = o().x, M = o().y - 6;
+                        return E !== h.e && l(m, "data-count", h.e = E), L !== h.t && l(m, "x", h.t = L), M !== h.a && l(m, "y", h.a = M), h;
+                      }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0
+                      }), m;
+                    })()
+                  }), u), u.$$keydown = (o) => j(f, o), u.$$contextmenu = (o) => R(f, o), u.$$click = (o) => {
+                    o.stopPropagation(), i.onActivate?.(x(f, o.currentTarget, o));
+                  }, u.addEventListener("blur", () => v(null)), u.addEventListener("focus", () => v(f)), u.addEventListener("pointerleave", () => v(null)), u.addEventListener("pointerenter", () => v(f)), S((o) => {
+                    var m = s.id, h = Q().has(s.id), E = A(f), L = C(), M = C(), N = s.label;
+                    return m !== o.e && l(k, "data-graph-object", o.e = m), h !== o.t && l(k, "data-emphasized", o.t = h), E !== o.a && l(k, "data-selected", o.a = E), L !== o.o && l(z, "d", o.o = L), M !== o.i && l(u, "d", o.i = M), N !== o.n && l(u, "aria-label", o.n = N), o;
                   }, {
                     e: void 0,
                     t: void 0,
@@ -151,28 +166,28 @@ function me(i) {
                     o: void 0,
                     i: void 0,
                     n: void 0
-                  }), v;
+                  }), k;
                 }
               });
             }
-          }), null), C(() => c(l, "aria-label", i.ariaLabel)), l;
-        })(), y(P, {
+          }), null), S(() => l(c, "aria-label", i.ariaLabel)), c;
+        })(), w(D, {
           get each() {
-            return x();
+            return b();
           },
-          children: j
+          children: G
         })];
       }
-    }), null), w(e, () => i.overlay, null), C((r) => {
+    }), null), y(e, () => i.overlay, null), S((r) => {
       var a = `floe-graph ${i.class ?? ""}`, n = i.ariaLabel;
-      return a !== r.e && N(e, r.e = a), n !== r.t && c(e, "aria-label", r.t = n), r;
+      return a !== r.e && V(e, r.e = a), n !== r.t && l(e, "aria-label", r.t = n), r;
     }, {
       e: void 0,
       t: void 0
     }), e;
   })();
 }
-p(["focusin", "focusout", "click", "contextmenu", "keydown"]);
+te(["focusin", "focusout", "click", "contextmenu", "keydown"]);
 export {
-  me as GraphCanvas
+  ke as GraphCanvas
 };

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

@@ -6,3 +6,5 @@ export declare function fitGraphViewport(bounds: GraphBounds, size: {
 }, padding?: number): GraphViewport;
 /** Includes descendants so highlighting a group traces all of its direct routes. */
 export declare function graphRelatedEdges(layout: GraphLayout, nodeId: string): ReadonlySet<string>;
+/** Put the short edge label on its longest routed segment, away from arrowheads. */
+export declare function graphEdgeLabelPosition(sections: readonly (readonly GraphPoint[])[]): GraphPoint | null;

package/dist/components/graph/geometry.js

@@ -1,35 +1,45 @@
-function c(t) {
-  return t.map((h, a) => `${a ? "L" : "M"}${h.x},${h.y}`).join(" ");
+function c(e) {
+  return e.map((n, h) => `${h ? "L" : "M"}${n.x},${n.y}`).join(" ");
 }
-function o(t, h, a = 48) {
-  const i = Math.max(
+function s(e, n, h = 48) {
+  const a = Math.max(
     0.1,
     Math.min(
       1,
-      (h.width - a * 2) / Math.max(1, t.width),
-      (h.height - a * 2) / Math.max(1, t.height)
+      (n.width - h * 2) / Math.max(1, e.width),
+      (n.height - h * 2) / Math.max(1, e.height)
     )
   );
   return {
-    x: (h.width - t.width * i) / 2 - t.x * i,
-    y: (h.height - t.height * i) / 2 - t.y * i,
-    scale: i
+    x: (n.width - e.width * a) / 2 - e.x * a,
+    y: (n.height - e.height * a) / 2 - e.y * a,
+    scale: a
   };
 }
-function f(t, h) {
-  const a = /* @__PURE__ */ new Set([h]), i = /* @__PURE__ */ new Map();
-  for (const e of t.nodes)
-    e.parentId && i.set(e.parentId, [...i.get(e.parentId) ?? [], e.id]);
-  const n = (e) => {
-    for (const r of i.get(e) ?? [])
-      a.has(r) || (a.add(r), n(r));
+function f(e, n) {
+  const h = /* @__PURE__ */ new Set([n]), a = /* @__PURE__ */ new Map();
+  for (const t of e.nodes)
+    t.parentId && a.set(t.parentId, [...a.get(t.parentId) ?? [], t.id]);
+  const r = (t) => {
+    for (const i of a.get(t) ?? [])
+      h.has(i) || (h.add(i), r(i));
   };
-  return n(h), new Set(
-    t.edges.filter((e) => a.has(e.source) || a.has(e.target)).map((e) => e.id)
+  return r(n), new Set(
+    e.edges.filter((t) => h.has(t.source) || h.has(t.target)).map((t) => t.id)
   );
 }
+function g(e) {
+  let n = null, h = 0;
+  for (const a of e)
+    for (let r = 1; r < a.length; r++) {
+      const t = a[r - 1], i = a[r], o = Math.abs(i.x - t.x) + Math.abs(i.y - t.y);
+      o > h && (h = o, n = { x: (t.x + i.x) / 2, y: (t.y + i.y) / 2 });
+    }
+  return n;
+}
 export {
-  o as fitGraphViewport,
+  s as fitGraphViewport,
+  g as graphEdgeLabelPosition,
   f as graphRelatedEdges,
   c as graphSectionPath
 };

package/dist/components/graph/layout.js

@@ -1,9 +1,10 @@
-function k(n) {
-  const i = /* @__PURE__ */ new Set(), p = (e) => {
-    if (!e || i.has(e)) throw new Error(`Duplicate or empty graph ID: ${e}`);
-    i.add(e);
-  }, s = new Map(n.nodes.map((e) => [e.id, e]));
-  for (const e of n.nodes) {
+import { applyGraphPositions as v } from "./positions.js";
+function $(i) {
+  const n = /* @__PURE__ */ new Set(), p = (e) => {
+    if (!e || n.has(e)) throw new Error(`Duplicate or empty graph ID: ${e}`);
+    n.add(e);
+  }, s = new Map(i.nodes.map((e) => [e.id, e]));
+  for (const e of i.nodes) {
     if (p(e.id), ![e.width, e.height].every((r) => Number.isFinite(r) && r > 0))
       throw new Error(`Invalid dimensions for graph node: ${e.id}`);
     for (const r of e.ports ?? []) p(r.id);
@@ -17,7 +18,7 @@ function k(n) {
       a.add(d), d = r.parentId;
     }
   }
-  for (const e of n.edges) {
+  for (const e of i.edges) {
     p(e.id);
     for (const [a, d] of [
       [e.source, e.sourcePort],
@@ -29,13 +30,13 @@ function k(n) {
     }
   }
 }
-async function N(n, i, p) {
-  k(n);
-  const s = i.groupPadding ?? { top: 64, right: 28, bottom: 28, left: 28 };
-  if (![...Object.values(s), i.spacing ?? 64].every((t) => Number.isFinite(t) && t >= 0))
+async function O(i, n, p) {
+  $(i);
+  const s = n.groupPadding ?? { top: 64, right: 28, bottom: 28, left: 28 };
+  if (![...Object.values(s), n.spacing ?? 64].every((t) => Number.isFinite(t) && t >= 0))
     throw new Error("Graph layout spacing must be finite and nonnegative");
   const e = /* @__PURE__ */ new Map();
-  for (const t of n.nodes)
+  for (const t of i.nodes)
     e.set(t.id, {
       id: t.id,
       width: t.width,
@@ -53,29 +54,29 @@ async function N(n, i, p) {
       }
     });
   const a = [];
-  for (const t of n.nodes)
+  for (const t of i.nodes)
     (t.parentId ? e.get(t.parentId).children : a).push(e.get(t.id));
   const d = /* @__PURE__ */ new Set([
-    ...n.nodes.flatMap((t) => [t.id, ...(t.ports ?? []).map((o) => o.id)]),
-    ...n.edges.map((t) => t.id)
+    ...i.nodes.flatMap((t) => [t.id, ...(t.ports ?? []).map((o) => o.id)]),
+    ...i.edges.map((t) => t.id)
   ]);
   let r = "$graph";
   for (; d.has(r); ) r += "$";
   const c = await p.layout({
     id: r,
     children: a,
-    edges: n.edges.map((t) => ({
+    edges: i.edges.map((t) => ({
       id: t.id,
       sources: [t.sourcePort ?? t.source],
       targets: [t.targetPort ?? t.target]
     })),
     layoutOptions: {
       "elk.algorithm": "layered",
-      "elk.direction": i.direction ?? "RIGHT",
+      "elk.direction": n.direction ?? "RIGHT",
       "elk.edgeRouting": "ORTHOGONAL",
       "elk.hierarchyHandling": "INCLUDE_CHILDREN",
-      "elk.spacing.nodeNode": String(i.spacing ?? 64),
-      "elk.layered.spacing.nodeNodeBetweenLayers": String(i.spacing ?? 64),
+      "elk.spacing.nodeNode": String(n.spacing ?? 64),
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(n.spacing ?? 64),
       "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
       "elk.randomSeed": "1"
     }
@@ -100,22 +101,25 @@ async function N(n, i, p) {
   };
   for (const t of c.children ?? []) E(t, 0, 0);
   I(c);
-  const y = i.anchor && f.get(i.anchor.nodeId), u = y ? i.anchor.position.x - y.x : 0, m = y ? i.anchor.position.y - y.y : 0;
-  return {
-    nodes: n.nodes.map((t) => {
-      const o = f.get(t.id);
-      return { ...t, ...o, x: o.x + u, y: o.y + m };
-    }),
-    edges: n.edges.map((t) => ({
-      ...t,
-      sections: (x.get(t.id) ?? []).map(
-        (o) => o.map((h) => ({ x: h.x + u, y: h.y + m }))
-      )
-    })),
-    bounds: { x: u, y: m, width: c.width ?? 0, height: c.height ?? 0 }
-  };
+  const y = !n.positions?.length && n.anchor && f.get(n.anchor.nodeId), m = y ? n.anchor.position.x - y.x : 0, u = y ? n.anchor.position.y - y.y : 0, k = i.nodes.map((t) => {
+    const o = f.get(t.id);
+    return { ...t, ...o, x: o.x + m, y: o.y + u };
+  });
+  return v(
+    {
+      nodes: k,
+      edges: i.edges.map((t) => ({
+        ...t,
+        sections: (x.get(t.id) ?? []).map(
+          (o) => o.map((h) => ({ x: h.x + m, y: h.y + u }))
+        )
+      })),
+      bounds: { x: m, y: u, width: c.width ?? 0, height: c.height ?? 0 }
+    },
+    n
+  );
 }
 export {
-  N as computeGraphLayout,
-  k as validateGraphInput
+  O as computeGraphLayout,
+  $ as validateGraphInput
 };

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

@@ -0,0 +1,3 @@
+import type { GraphLayout, GraphLayoutOptions } from './types';
+/** Apply optional absolute world positions, retaining unpinned ELK geometry and group containment. */
+export declare function applyGraphPositions(layout: GraphLayout, options: GraphLayoutOptions): GraphLayout;

package/dist/components/graph/positions.js

@@ -0,0 +1,134 @@
+const P = (s, e = 0) => ({
+  left: s.x - e,
+  top: s.y - e,
+  right: s.x + s.width + e,
+  bottom: s.y + s.height + e
+}), b = (s, e) => s.x > e.left && s.x < e.right && s.y > e.top && s.y < e.bottom, N = (s, e, y) => !y.some(
+  (o) => s.x === e.x ? s.x > o.left && s.x < o.right && Math.max(s.y, e.y) > o.top && Math.min(s.y, e.y) < o.bottom : s.y > o.top && s.y < o.bottom && Math.max(s.x, e.x) > o.left && Math.min(s.x, e.x) < o.right
+);
+function k(s, e, y) {
+  if (y.some((i) => b(s, i) || b(e, i)))
+    throw new Error("Pinned graph positions obstruct an edge endpoint");
+  const o = [
+    .../* @__PURE__ */ new Set([s.x, e.x, ...y.flatMap((i) => [i.left, i.right])])
+  ].sort((i, r) => i - r), d = [
+    .../* @__PURE__ */ new Set([s.y, e.y, ...y.flatMap((i) => [i.top, i.bottom])])
+  ].sort((i, r) => i - r), u = (i) => ({ x: o[i % o.length], y: d[Math.floor(i / o.length)] }), v = d.indexOf(s.y) * o.length + o.indexOf(s.x), E = d.indexOf(e.y) * o.length + o.indexOf(e.x), w = /* @__PURE__ */ new Map([[v, 0]]), I = /* @__PURE__ */ new Map(), h = [], T = (i) => {
+    let r = h.length;
+    for (h.push(i); r > 0; ) {
+      const c = r - 1 >> 1;
+      if (h[c].score <= i.score) break;
+      h[r] = h[c], r = c;
+    }
+    h[r] = i;
+  }, t = () => {
+    const i = h[0], r = h.pop();
+    if (h.length) {
+      let c = 0;
+      for (; c * 2 + 1 < h.length; ) {
+        let a = c * 2 + 1;
+        if (a + 1 < h.length && h[a + 1].score < h[a].score && a++, h[a].score >= r.score) break;
+        h[c] = h[a], c = a;
+      }
+      h[c] = r;
+    }
+    return i;
+  };
+  T({ id: v, score: 0, cost: 0 });
+  let g = 0;
+  for (; h.length && g++ < 5e4; ) {
+    const i = t();
+    if (i.cost !== w.get(i.id)) continue;
+    if (i.id === E) {
+      const x = [u(E)];
+      let f = E;
+      for (; f !== v; )
+        f = I.get(f), x.push(u(f));
+      return x.reverse(), x.filter((l, p) => {
+        const n = x[p - 1], M = x[p + 1];
+        return !n || !M || !(n.x === l.x && l.x === M.x || n.y === l.y && l.y === M.y);
+      });
+    }
+    const r = u(i.id), c = i.id % o.length, a = Math.floor(i.id / o.length), S = [
+      c ? i.id - 1 : -1,
+      c + 1 < o.length ? i.id + 1 : -1,
+      a ? i.id - o.length : -1,
+      a + 1 < d.length ? i.id + o.length : -1
+    ];
+    for (const x of S) {
+      if (x < 0) continue;
+      const f = u(x), l = i.cost + Math.abs(r.x - f.x) + Math.abs(r.y - f.y);
+      l >= (w.get(x) ?? 1 / 0) || !N(r, f, y) || (w.set(x, l), I.set(x, i.id), T({ id: x, cost: l, score: l + Math.abs(f.x - e.x) + Math.abs(f.y - e.y) }));
+    }
+  }
+  throw new Error("Pinned graph positions cannot be routed within the layout budget");
+}
+function H(s, e) {
+  if (!e.positions?.length) return s;
+  const y = new Map(s.nodes.map((t) => [t.id, { ...t }])), o = /* @__PURE__ */ new Map();
+  for (const t of e.positions) {
+    if (!y.has(t.nodeId) || o.has(t.nodeId) || !Number.isFinite(t.x) || !Number.isFinite(t.y))
+      throw new Error(`Invalid graph position: ${t.nodeId}`);
+    o.set(t.nodeId, t);
+  }
+  const d = /* @__PURE__ */ new Map();
+  for (const t of y.values())
+    if (t.parentId) {
+      const g = d.get(t.parentId) ?? [];
+      g.push(t), d.set(t.parentId, g);
+    }
+  const u = e.groupPadding ?? { top: 64, left: 28, right: 28, bottom: 28 }, v = (t, g, i) => {
+    const r = { x: t.x, y: t.y }, c = o.get(t.id);
+    t.x = c?.x ?? t.x + g, t.y = c?.y ?? t.y + i;
+    const a = d.get(t.id) ?? [];
+    for (const p of a) v(p, t.x - r.x, t.y - r.y);
+    if (!a.length) return;
+    const S = Math.min(...a.map((p) => p.x)) - u.left, x = Math.min(...a.map((p) => p.y)) - u.top;
+    if (c && (S < t.x || x < t.y))
+      throw new Error(`Pinned child lies outside group content: ${t.id}`);
+    const f = Math.max(
+      t.x + t.width,
+      ...a.map((p) => p.x + p.width + u.right)
+    ), l = Math.max(
+      t.y + t.height,
+      ...a.map((p) => p.y + p.height + u.bottom)
+    );
+    c || (t.x = Math.min(t.x, S), t.y = Math.min(t.y, x)), t.width = f - t.x, t.height = l - t.y;
+  };
+  for (const t of y.values()) t.parentId || v(t, 0, 0);
+  const E = s.edges.map((t) => {
+    const g = y.get(t.source), i = y.get(t.target), r = (n, M, m) => n.ports?.find((O) => O.id === M)?.side ?? m, c = g.x + g.width / 2 <= i.x + i.width / 2, a = (n, M) => {
+      const m = { x: n.x + n.width / 2, y: n.y + n.height / 2 };
+      return M === "NORTH" ? [
+        { x: m.x, y: n.y },
+        { x: m.x, y: n.y - 8 }
+      ] : M === "SOUTH" ? [
+        { x: m.x, y: n.y + n.height },
+        { x: m.x, y: n.y + n.height + 8 }
+      ] : M === "WEST" ? [
+        { x: n.x, y: m.y },
+        { x: n.x - 8, y: m.y }
+      ] : [
+        { x: n.x + n.width, y: m.y },
+        { x: n.x + n.width + 8, y: m.y }
+      ];
+    }, [S, x] = a(g, r(g, t.sourcePort, c ? "EAST" : "WEST")), [f, l] = a(
+      i,
+      r(i, t.targetPort, g === i ? "NORTH" : c ? "WEST" : "EAST")
+    ), p = [...y.values()].filter((n) => n.kind !== "group").map((n) => P(n, 4));
+    return { ...t, sections: [[S, ...k(x, l, p), f]] };
+  }), w = [...y.values()], I = E.flatMap((t) => t.sections.flat()), h = Math.min(...w.map((t) => t.x), ...I.map((t) => t.x)), T = Math.min(...w.map((t) => t.y), ...I.map((t) => t.y));
+  return {
+    nodes: w,
+    edges: E,
+    bounds: {
+      x: h,
+      y: T,
+      width: Math.max(...w.map((t) => t.x + t.width), ...I.map((t) => t.x)) - h,
+      height: Math.max(...w.map((t) => t.y + t.height), ...I.map((t) => t.y)) - T
+    }
+  };
+}
+export {
+  H as applyGraphPositions
+};

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

@@ -46,6 +46,10 @@ export interface GraphLayout {
     bounds: GraphBounds;
 }
 export interface GraphLayoutOptions {
+    /** Absolute world positions. Descendants move with pinned groups; impossible containment or routing fails explicitly. */
+    positions?: readonly (GraphPoint & {
+        nodeId: string;
+    })[];
     direction?: 'RIGHT' | 'DOWN' | 'LEFT' | 'UP';
     spacing?: number;
     groupPadding?: {

package/dist/graph.css

@@ -91,3 +91,21 @@
     outline-color: Highlight;
   }
 }
+
+.floe-graph__edge-label {
+  fill: var(--graph-edge, var(--muted-foreground));
+  stroke: var(--graph-background, var(--background));
+  stroke-width: 3px;
+  paint-order: stroke fill;
+  font: 11px var(--font-mono, monospace);
+  text-anchor: middle;
+  pointer-events: none;
+  opacity: 0;
+}
+.floe-graph__edge-label[data-count='true'] {
+  opacity: 0.7;
+}
+.floe-graph__edges [data-emphasized='true'] .floe-graph__edge-label,
+.floe-graph__edges [data-selected='true'] .floe-graph__edge-label {
+  opacity: 1;
+}

package/dist/graph.js

@@ -1,10 +1,11 @@
-import { fitGraphViewport as e, graphRelatedEdges as t, graphSectionPath as o } from "./components/graph/geometry.js";
-import { createGraphLayoutEngine as h } from "./components/graph/engine.js";
-import { GraphCanvas as g } from "./components/graph/GraphCanvas.js";
+import { fitGraphViewport as e, graphEdgeLabelPosition as o, graphRelatedEdges as t, graphSectionPath as p } from "./components/graph/geometry.js";
+import { createGraphLayoutEngine as g } from "./components/graph/engine.js";
+import { GraphCanvas as n } from "./components/graph/GraphCanvas.js";
 export {
-  g as GraphCanvas,
-  h as createGraphLayoutEngine,
+  n as GraphCanvas,
+  g as createGraphLayoutEngine,
   e as fitGraphViewport,
+  o as graphEdgeLabelPosition,
   t as graphRelatedEdges,
-  o as graphSectionPath
+  p as graphSectionPath
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.83.1",
+  "version": "0.84.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",