@floegence/floe-webapp-core 0.84.0 → 0.86.0

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/layout.js

@@ -1,91 +1,94 @@
 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))
+import { computePackedGraphLayout as b } from "./packing.js";
+function N(n) {
+  const o = /* @__PURE__ */ new Set(), c = (e) => {
+    if (!e || o.has(e)) throw new Error(`Duplicate or empty graph ID: ${e}`);
+    o.add(e);
+  }, a = new Map(n.nodes.map((e) => [e.id, e]));
+  for (const e of n.nodes) {
+    if (c(e.id), ![e.width, e.height].every((i) => Number.isFinite(i) && i > 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]);
+    for (const i of e.ports ?? []) c(i.id);
+    const s = /* @__PURE__ */ new Set([e.id]);
     let d = e.parentId;
     for (; d !== void 0; ) {
-      const r = s.get(d);
-      if (!r || r.kind !== "group")
+      const i = a.get(d);
+      if (!i || i.kind !== "group")
         throw new Error(`Invalid parent for graph node: ${e.id}`);
-      if (a.has(d)) throw new Error(`Cyclic graph containment: ${e.id}`);
-      a.add(d), d = r.parentId;
+      if (s.has(d)) throw new Error(`Cyclic graph containment: ${e.id}`);
+      s.add(d), d = i.parentId;
     }
   }
-  for (const e of i.edges) {
-    p(e.id);
-    for (const [a, d] of [
+  for (const e of n.edges) {
+    c(e.id);
+    for (const [s, d] of [
       [e.source, e.sourcePort],
       [e.target, e.targetPort]
     ]) {
-      const r = s.get(a);
-      if (!r || d !== void 0 && !r.ports?.some((c) => c.id === d))
+      const i = a.get(s);
+      if (!i || d !== void 0 && !i.ports?.some((h) => h.id === d))
         throw new Error(`Invalid endpoint for graph edge: ${e.id}`);
     }
   }
 }
-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))
+async function P(n, o, c) {
+  if (N(n), o.aspectRatio !== void 0 && (!Number.isFinite(o.aspectRatio) || o.aspectRatio <= 0))
+    throw new Error("Graph layout aspect ratio must be finite and positive");
+  const a = o.groupPadding ?? { top: 64, right: 28, bottom: 28, left: 28 };
+  if (![...Object.values(a), o.spacing ?? 64].every((t) => Number.isFinite(t) && t >= 0))
     throw new Error("Graph layout spacing must be finite and nonnegative");
+  if (o.aspectRatio !== void 0) return b(n, o, c);
   const e = /* @__PURE__ */ new Map();
-  for (const t of i.nodes)
+  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) => ({
-        id: o.id,
+      ports: t.ports?.map((r) => ({
+        id: r.id,
         width: 1,
         height: 1,
-        layoutOptions: { "elk.port.side": o.side }
+        layoutOptions: { "elk.port.side": r.side }
       })),
       layoutOptions: {
         "elk.portConstraints": "FIXED_ORDER",
-        "elk.padding": `[top=${s.top},left=${s.left},bottom=${s.bottom},right=${s.right}]`
+        "elk.padding": `[top=${a.top},left=${a.left},bottom=${a.bottom},right=${a.right}]`
       }
     });
-  const a = [];
-  for (const t of i.nodes)
-    (t.parentId ? e.get(t.parentId).children : a).push(e.get(t.id));
+  const s = [];
+  for (const t of n.nodes)
+    (t.parentId ? e.get(t.parentId).children : s).push(e.get(t.id));
   const d = /* @__PURE__ */ new Set([
-    ...i.nodes.flatMap((t) => [t.id, ...(t.ports ?? []).map((o) => o.id)]),
-    ...i.edges.map((t) => t.id)
+    ...n.nodes.flatMap((t) => [t.id, ...(t.ports ?? []).map((r) => r.id)]),
+    ...n.edges.map((t) => t.id)
   ]);
-  let r = "$graph";
-  for (; d.has(r); ) r += "$";
-  const c = await p.layout({
-    id: r,
-    children: a,
-    edges: i.edges.map((t) => ({
+  let i = "$graph";
+  for (; d.has(i); ) i += "$";
+  const h = await c.layout({
+    id: i,
+    children: s,
+    edges: n.edges.map((t) => ({
       id: t.id,
       sources: [t.sourcePort ?? t.source],
       targets: [t.targetPort ?? t.target]
     })),
     layoutOptions: {
       "elk.algorithm": "layered",
-      "elk.direction": n.direction ?? "RIGHT",
+      "elk.direction": o.direction ?? "RIGHT",
       "elk.edgeRouting": "ORTHOGONAL",
       "elk.hierarchyHandling": "INCLUDE_CHILDREN",
-      "elk.spacing.nodeNode": String(n.spacing ?? 64),
-      "elk.layered.spacing.nodeNodeBetweenLayers": String(n.spacing ?? 64),
+      "elk.spacing.nodeNode": String(o.spacing ?? 64),
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(o.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(), E = (t) => {
+    for (const r of t.edges ?? []) {
+      const p = r.container ?? t.id, l = f.get(p) ?? { x: 0, y: 0 };
       x.set(
-        o.id,
-        (o.sections ?? []).map(
+        r.id,
+        (r.sections ?? []).map(
           (g) => [g.startPoint, ...g.bendPoints ?? [], g.endPoint].map((w) => ({
             x: w.x + l.x,
             y: w.y + l.y
@@ -93,33 +96,34 @@ async function O(i, n, p) {
         )
       );
     }
-    for (const o of t.children ?? []) I(o);
-  }, E = (t, o, h) => {
-    const l = o + (t.x ?? 0), g = h + (t.y ?? 0);
+    for (const r of t.children ?? []) E(r);
+  }, I = (t, r, p) => {
+    const l = r + (t.x ?? 0), g = p + (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 w of t.children ?? []) I(w, l, g);
   };
-  for (const t of c.children ?? []) E(t, 0, 0);
-  I(c);
-  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 };
+  for (const t of h.children ?? []) I(t, 0, 0);
+  E(h);
+  const y = !o.positions?.length && o.anchor && f.get(o.anchor.nodeId), m = y ? o.anchor.position.x - y.x : 0, u = y ? o.anchor.position.y - y.y : 0, k = n.nodes.map((t) => {
+    const r = f.get(t.id);
+    return { ...t, ...r, x: r.x + m, y: r.y + u };
   });
   return v(
     {
       nodes: k,
-      edges: i.edges.map((t) => ({
+      edges: n.edges.map((t) => ({
         ...t,
         sections: (x.get(t.id) ?? []).map(
-          (o) => o.map((h) => ({ x: h.x + m, y: h.y + u }))
+          (r) => r.map((p) => ({ x: p.x + m, y: p.y + u }))
         )
       })),
-      bounds: { x: m, y: u, width: c.width ?? 0, height: c.height ?? 0 }
+      bounds: { x: m, y: u, width: h.width ?? 0, height: h.height ?? 0 }
     },
-    n
+    o,
+    n.nodes
   );
 }
 export {
-  O as computeGraphLayout,
-  $ as validateGraphInput
+  P as computeGraphLayout,
+  N as validateGraphInput
 };

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

@@ -0,0 +1,4 @@
+import type { ELK } from 'elkjs/lib/elk-api';
+import type { GraphInput, GraphLayout, GraphLayoutOptions } from './types';
+/** Lay out each containment level as peers, then route the complete compound graph. */
+export declare function computePackedGraphLayout(input: GraphInput, options: GraphLayoutOptions, engine: Pick<ELK, 'layout'>): Promise<GraphLayout>;

package/dist/components/graph/packing.js

@@ -0,0 +1,74 @@
+import { applyGraphPositions as b, routeGraphGeometry as G } from "./positions.js";
+async function O(d, n, k) {
+  const a = new Map(d.nodes.map((e) => [e.id, { ...e, x: 0, y: 0 }])), r = /* @__PURE__ */ new Map();
+  for (const e of a.values()) {
+    const i = r.get(e.parentId) ?? [];
+    i.push(e), r.set(e.parentId, i);
+  }
+  const x = /* @__PURE__ */ new Set([
+    ...d.nodes.flatMap((e) => [e.id, ...(e.ports ?? []).map((i) => i.id)]),
+    ...d.edges.map((e) => e.id)
+  ]);
+  let l = "$packed";
+  for (; x.has(l); ) l += "$";
+  const g = n.groupPadding ?? { top: 64, right: 28, bottom: 28, left: 28 }, p = (e, i, o) => {
+    e.x += i, e.y += o;
+    for (const c of r.get(e.id) ?? []) p(c, i, o);
+  }, y = (e, i) => {
+    let o = a.get(e);
+    for (; o && o.parentId !== i; )
+      o = o.parentId ? a.get(o.parentId) : void 0;
+    return o;
+  }, m = async (e) => {
+    const i = r.get(e) ?? [];
+    for (const t of i) {
+      if (!r.has(t.id)) continue;
+      const s = await m(t.id);
+      t.width = Math.max(t.width, s.width), t.height = Math.max(t.height, s.height);
+    }
+    if (!i.length) return { width: 0, height: 0 };
+    const o = /* @__PURE__ */ new Map();
+    for (const t of d.edges) {
+      const s = y(t.source, e), h = y(t.target, e);
+      if (!s || !h || s.id === h.id) continue;
+      const w = JSON.stringify([s.id, h.id]);
+      o.has(w) || o.set(w, { id: t.id, sources: [s.id], targets: [h.id] });
+    }
+    const c = await k.layout({
+      id: e ?? l,
+      children: i.map((t) => ({ id: t.id, width: t.width, height: t.height })),
+      edges: [...o.values()],
+      layoutOptions: {
+        "elk.algorithm": o.size ? "layered" : "rectpacking",
+        "elk.direction": n.direction ?? "RIGHT",
+        "elk.edgeRouting": "ORTHOGONAL",
+        "elk.separateConnectedComponents": "true",
+        "elk.aspectRatio": String(n.aspectRatio),
+        "elk.spacing.componentComponent": String(n.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.padding": e ? `[top=${g.top},left=${g.left},bottom=${g.bottom},right=${g.right}]` : "[top=12,left=12,bottom=12,right=12]",
+        "elk.randomSeed": "1"
+      }
+    });
+    for (const t of c.children ?? []) {
+      const s = a.get(t.id);
+      p(s, (t.x ?? 0) - s.x, (t.y ?? 0) - s.y);
+    }
+    return { width: c.width ?? 0, height: c.height ?? 0 };
+  }, S = await m(), f = !n.positions?.length && n.anchor && a.get(n.anchor.nodeId);
+  if (f) {
+    const e = n.anchor.position.x - f.x, i = n.anchor.position.y - f.y;
+    for (const o of r.get(void 0) ?? []) p(o, e, i);
+  }
+  const u = {
+    nodes: [...a.values()],
+    edges: d.edges.map((e) => ({ ...e, sections: [] })),
+    bounds: { x: 0, y: 0, ...S }
+  };
+  return n.positions?.length ? b(u, n, d.nodes) : G(u);
+}
+export {
+  O as computePackedGraphLayout
+};

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

@@ -1,3 +1,5 @@
-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;
+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;
+/** Shared routing and bounds for explicit positions and packed compound geometry. */
+export declare function routeGraphGeometry(layout: GraphLayout): GraphLayout;

package/dist/components/graph/positions.js

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

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

@@ -46,10 +46,14 @@ export interface GraphLayout {
     bounds: GraphBounds;
 }
 export interface GraphLayoutOptions {
-    /** Absolute world positions. Descendants move with pinned groups; impossible containment or routing fails explicitly. */
+    /** Desired width/height when packing disconnected objects, including group members. */
+    aspectRatio?: number;
+    /** 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/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.84.0",
+  "version": "0.86.0",
   "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",