@floegence/floe-webapp-core 0.83.1 → 0.85.1

package/dist/components/file-browser/DragPreview.js

@@ -1,6 +1,6 @@
 import { createComponent as o, Portal as N, insert as l, effect as u, className as $, memo as B, template as a, setAttribute as A } from "solid-js/web";
 import { createSignal as F, createEffect as V, createMemo as d, Show as m, For as j } from "solid-js";
-import { Presence as U, Motion as X } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.15/node_modules/solid-motionone/dist/index.js";
+import { Presence as U, Motion as X } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.17/node_modules/solid-motionone/dist/index.js";
 import { cn as f } from "../../utils/cn.js";
 import { useFileBrowserDrag as G } from "../../context/FileBrowserDragContext.js";
 import { FileItemIcon as W } from "./FileIcons.js";

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,47 +1,48 @@
-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) {
-    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);
-    const a = /* @__PURE__ */ new Set([e.id]);
-    let d = e.parentId;
+import { applyGraphPositions as v } from "./positions.js";
+function $(i) {
+  const n = /* @__PURE__ */ new Set(), p = (t) => {
+    if (!t || n.has(t)) throw new Error(`Duplicate or empty graph ID: ${t}`);
+    n.add(t);
+  }, s = new Map(i.nodes.map((t) => [t.id, t]));
+  for (const t of i.nodes) {
+    if (p(t.id), ![t.width, t.height].every((r) => Number.isFinite(r) && r > 0))
+      throw new Error(`Invalid dimensions for graph node: ${t.id}`);
+    for (const r of t.ports ?? []) p(r.id);
+    const a = /* @__PURE__ */ new Set([t.id]);
+    let d = t.parentId;
     for (; d !== void 0; ) {
       const r = s.get(d);
       if (!r || r.kind !== "group")
-        throw new Error(`Invalid parent for graph node: ${e.id}`);
-      if (a.has(d)) throw new Error(`Cyclic graph containment: ${e.id}`);
+        throw new Error(`Invalid parent for graph node: ${t.id}`);
+      if (a.has(d)) throw new Error(`Cyclic graph containment: ${t.id}`);
       a.add(d), d = r.parentId;
     }
   }
-  for (const e of n.edges) {
-    p(e.id);
+  for (const t of i.edges) {
+    p(t.id);
     for (const [a, d] of [
-      [e.source, e.sourcePort],
-      [e.target, e.targetPort]
+      [t.source, t.sourcePort],
+      [t.target, t.targetPort]
     ]) {
       const r = s.get(a);
       if (!r || d !== void 0 && !r.ports?.some((c) => c.id === d))
-        throw new Error(`Invalid endpoint for graph edge: ${e.id}`);
+        throw new Error(`Invalid endpoint for graph edge: ${t.id}`);
     }
   }
 }
-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((e) => Number.isFinite(e) && e >= 0))
     throw new Error("Graph layout spacing must be finite and nonnegative");
-  const e = /* @__PURE__ */ new Map();
-  for (const t of n.nodes)
-    e.set(t.id, {
-      id: t.id,
-      width: t.width,
-      height: t.height,
-      ...t.kind === "group" ? { children: [] } : {},
-      ports: t.ports?.map((o) => ({
+  const t = /* @__PURE__ */ new Map();
+  for (const e of i.nodes)
+    t.set(e.id, {
+      id: e.id,
+      width: e.width,
+      height: e.height,
+      ...e.kind === "group" ? { children: [] } : {},
+      ports: e.ports?.map((o) => ({
         id: o.id,
         width: 1,
         height: 1,
@@ -53,35 +54,35 @@ async function N(n, i, p) {
       }
     });
   const a = [];
-  for (const t of n.nodes)
-    (t.parentId ? e.get(t.parentId).children : a).push(e.get(t.id));
+  for (const e of i.nodes)
+    (e.parentId ? t.get(e.parentId).children : a).push(t.get(e.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((e) => [e.id, ...(e.ports ?? []).map((o) => o.id)]),
+    ...i.edges.map((e) => e.id)
   ]);
   let r = "$graph";
   for (; d.has(r); ) r += "$";
   const c = await p.layout({
     id: r,
     children: a,
-    edges: n.edges.map((t) => ({
-      id: t.id,
-      sources: [t.sourcePort ?? t.source],
-      targets: [t.targetPort ?? t.target]
+    edges: i.edges.map((e) => ({
+      id: e.id,
+      sources: [e.sourcePort ?? e.source],
+      targets: [e.targetPort ?? e.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"
     }
-  }), f = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map(), I = (t) => {
-    for (const o of t.edges ?? []) {
-      const h = o.container ?? t.id, l = f.get(h) ?? { x: 0, y: 0 };
+  }), f = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map(), I = (e) => {
+    for (const o of e.edges ?? []) {
+      const h = o.container ?? e.id, l = f.get(h) ?? { x: 0, y: 0 };
       x.set(
         o.id,
         (o.sections ?? []).map(
@@ -92,30 +93,34 @@ async function N(n, i, p) {
         )
       );
     }
-    for (const o of t.children ?? []) I(o);
-  }, E = (t, o, h) => {
-    const l = o + (t.x ?? 0), g = h + (t.y ?? 0);
-    f.set(t.id, { x: l, y: g, width: t.width ?? 0, height: t.height ?? 0 });
-    for (const w of t.children ?? []) E(w, l, g);
+    for (const o of e.children ?? []) I(o);
+  }, E = (e, o, h) => {
+    const l = o + (e.x ?? 0), g = h + (e.y ?? 0);
+    f.set(e.id, { x: l, y: g, width: e.width ?? 0, height: e.height ?? 0 });
+    for (const w of e.children ?? []) E(w, l, g);
   };
-  for (const t of c.children ?? []) E(t, 0, 0);
+  for (const e of c.children ?? []) E(e, 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((e) => {
+    const o = f.get(e.id);
+    return { ...e, ...o, x: o.x + m, y: o.y + u };
+  });
+  return v(
+    {
+      nodes: k,
+      edges: i.edges.map((e) => ({
+        ...e,
+        sections: (x.get(e.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,
+    i.nodes
+  );
 }
 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, GraphNode } from './types';
+/** Apply explicit fixed or preferred positions, then route the resulting geometry once. */
+export declare function applyGraphPositions(layout: GraphLayout, options: GraphLayoutOptions, input: readonly GraphNode[]): GraphLayout;

package/dist/components/graph/positions.js

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

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

@@ -46,6 +46,12 @@ export interface GraphLayout {
     bounds: GraphBounds;
 }
 export interface GraphLayoutOptions {
+    /** Absolute world positions. Descendants move with their group. Invalid positions always fail. */
+    positions?: readonly (GraphPoint & {
+        nodeId: string;
+    })[];
+    /** Fixed (default) rejects impossible geometry. Preferred retains clear positions and separates colliding siblings, resizing groups around their content before routing. */
+    positionMode?: 'fixed' | 'preferred';
     direction?: 'RIGHT' | 'DOWN' | 'LEFT' | 'UP';
     spacing?: number;
     groupPadding?: {

package/dist/components/notes/NotesOverlay.js

@@ -1,6 +1,6 @@
 import { createComponent as n, insert as l, addEventListener as v, effect as C, setAttribute as F, Portal as d, memo as P, template as c, delegateEvents as L } from "solid-js/web";
 import { createMemo as R, createEffect as f, onCleanup as _, Show as s } from "solid-js";
-import { Motion as w } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.15/node_modules/solid-motionone/dist/index.js";
+import { Motion as w } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.17/node_modules/solid-motionone/dist/index.js";
 import { easing as B, duration as k } from "../../utils/animations.js";
 import { useOverlayMask as K } from "../../hooks/useOverlayMask.js";
 import { X as Z } from "../icons/index.js";

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,6 +1,6 @@
 import { insert as m, createComponent as d, effect as K, setAttribute as I, memo as B, className as He, template as $, Dynamic as Ke, Portal as We, setStyleProperty as Ne, use as Ve, delegateEvents as Ge } from "solid-js/web";
 import { createSignal as de, onCleanup as p, createEffect as ee, createMemo as A, Show as R, For as te, Index as Ue } from "solid-js";
-import { Motion as W } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.15/node_modules/solid-motionone/dist/index.js";
+import { Motion as W } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.17/node_modules/solid-motionone/dist/index.js";
 import { easing as N, duration as V } from "../../utils/animations.js";
 import { Plus as qe } from "../icons/index.js";
 import { startHotInteraction as ze } from "../../utils/hotInteraction.js";

package/dist/components/workbench/WorkbenchLockButton.js

@@ -1,5 +1,5 @@
 import { insert as n, createComponent as c, memo as s, effect as d, setAttribute as u, template as k, delegateEvents as v } from "solid-js/web";
-import { Motion as m } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.15/node_modules/solid-motionone/dist/index.js";
+import { Motion as m } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.17/node_modules/solid-motionone/dist/index.js";
 import { easing as f, duration as h } from "../../utils/animations.js";
 import { Lock as g, Unlock as _ } from "../icons/index.js";
 var L = /* @__PURE__ */ k("<button type=button class=workbench-lock-button data-floe-surface=floating data-floe-canvas-interactive=true><span class=workbench-lock-button__icon>"), w = /* @__PURE__ */ k("<span class=workbench-lock-button__kbd>");

package/dist/components/workbench/WorkbenchOverlay.js

@@ -1,6 +1,6 @@
 import { createComponent as r, insert as l, template as s, delegateEvents as y } from "solid-js/web";
 import { Show as f } from "solid-js";
-import { Motion as i } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.15/node_modules/solid-motionone/dist/index.js";
+import { Motion as i } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.17/node_modules/solid-motionone/dist/index.js";
 import { easing as h, duration as c } from "../../utils/animations.js";
 import { useOverlayMask as b } from "../../hooks/useOverlayMask.js";
 import { X as v } from "../icons/index.js";

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/dist/node_modules/.pnpm/{solid-motionone@1.0.4_solid-js@1.9.15 → solid-motionone@1.0.4_solid-js@1.9.17}/node_modules/solid-motionone/dist/index.js

@@ -1,8 +1,8 @@
 import { createComponent as m, mergeProps as v, Dynamic as x } from "solid-js/web";
 import { createSignal as p, createContext as d, splitProps as P, useContext as l, createEffect as u, onCleanup as S, batch as c } from "solid-js";
-import { resolveFirst as E } from "../../../../@solid-primitives_refs@1.1.4_solid-js@1.9.15/node_modules/@solid-primitives/refs/dist/index.js";
-import { createSwitchTransition as y } from "../../../../@solid-primitives_transition-group@1.1.2_solid-js@1.9.15/node_modules/@solid-primitives/transition-group/dist/index.js";
-import { combineStyle as C } from "../../../../@solid-primitives_props@3.2.4_solid-js@1.9.15/node_modules/@solid-primitives/props/dist/combineProps.js";
+import { resolveFirst as E } from "../../../../@solid-primitives_refs@1.1.4_solid-js@1.9.17/node_modules/@solid-primitives/refs/dist/index.js";
+import { createSwitchTransition as y } from "../../../../@solid-primitives_transition-group@1.1.2_solid-js@1.9.17/node_modules/@solid-primitives/transition-group/dist/index.js";
+import { combineStyle as C } from "../../../../@solid-primitives_props@3.2.4_solid-js@1.9.17/node_modules/@solid-primitives/props/dist/combineProps.js";
 import { createMotionState as h, mountedStates as M } from "../../../../@motionone_dom@10.18.0/node_modules/@motionone/dom/dist/state/index.es.js";
 import { createStyles as T } from "../../../../@motionone_dom@10.18.0/node_modules/@motionone/dom/dist/animate/utils/style-object.es.js";
 var g = d(), D = (t) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.83.1",
+  "version": "0.85.1",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -156,7 +156,7 @@
     "clean": "rm -rf dist *.tsbuildinfo"
   },
   "peerDependencies": {
-    "solid-js": "^1.8.0"
+    "solid-js": "^1.9.17"
   },
   "dependencies": {
     "clsx": "^2.1.1",
@@ -173,7 +173,7 @@
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
-    "solid-js": "^1.9.15",
+    "solid-js": "^1.9.17",
     "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3",
     "vite": "^7.3.6",