@floegence/floe-webapp-core 0.86.7 → 0.86.8

package/dist/components/graph/layout.js

@@ -1,77 +1,82 @@
-import { applyGraphPositions as v } from "./positions.js";
-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 i of e.ports ?? []) c(i.id);
-    const s = /* @__PURE__ */ new Set([e.id]);
-    let d = e.parentId;
-    for (; d !== void 0; ) {
-      const i = a.get(d);
-      if (!i || i.kind !== "group")
-        throw new Error(`Invalid parent for graph node: ${e.id}`);
-      if (s.has(d)) throw new Error(`Cyclic graph containment: ${e.id}`);
-      s.add(d), d = i.parentId;
+import { applyGraphPositions as b } from "./positions.js";
+import { computePackedGraphLayout as k } from "./packing.js";
+function $(a) {
+  const o = /* @__PURE__ */ new Set(), c = (t) => {
+    if (!t || o.has(t)) throw new Error(`Duplicate or empty graph ID: ${t}`);
+    o.add(t);
+  }, i = new Map(a.nodes.map((t) => [t.id, t]));
+  for (const t of a.nodes) {
+    if (c(t.id), ![t.width, t.height].every((n) => Number.isFinite(n) && n > 0))
+      throw new Error(`Invalid dimensions for graph node: ${t.id}`);
+    for (const n of t.ports ?? []) c(n.id);
+    const s = /* @__PURE__ */ new Set([t.id]);
+    let r = t.parentId;
+    for (; r !== void 0; ) {
+      const n = i.get(r);
+      if (!n || n.kind !== "group")
+        throw new Error(`Invalid parent for graph node: ${t.id}`);
+      if (s.has(r)) throw new Error(`Cyclic graph containment: ${t.id}`);
+      s.add(r), r = n.parentId;
     }
   }
-  for (const e of n.edges) {
-    c(e.id);
-    for (const [s, d] of [
-      [e.source, e.sourcePort],
-      [e.target, e.targetPort]
+  for (const t of a.edges) {
+    c(t.id);
+    for (const [s, r] of [
+      [t.source, t.sourcePort],
+      [t.target, t.targetPort]
     ]) {
-      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}`);
+      const n = i.get(s);
+      if (!n || r !== void 0 && !n.ports?.some((h) => h.id === r))
+        throw new Error(`Invalid endpoint for graph edge: ${t.id}`);
     }
   }
 }
-async function P(n, o, c) {
-  if (N(n), o.aspectRatio !== void 0 && (!Number.isFinite(o.aspectRatio) || o.aspectRatio <= 0))
+async function P(a, o, c) {
+  $(a);
+  const i = O(a, o);
+  if (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))
+  const t = o.groupPadding ?? { top: 64, right: 28, bottom: 28, left: 28 };
+  if (![...Object.values(t), o.spacing ?? 64].every((e) => Number.isFinite(e) && e >= 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 n.nodes)
-    e.set(t.id, {
-      id: t.id,
-      width: t.width,
-      height: t.height,
-      ...t.kind === "group" ? { children: [] } : {},
-      ports: t.ports?.map((r) => ({
-        id: r.id,
+  if (o.layers && (M(a, o.layers), o.positionMode === "fixed" && o.positions?.length))
+    throw new Error("Fixed positions cannot be combined with graph layers");
+  if (o.aspectRatio !== void 0 || o.layers)
+    return k(i, o, c);
+  const s = /* @__PURE__ */ new Map();
+  for (const e of i.nodes)
+    s.set(e.id, {
+      id: e.id,
+      width: e.width,
+      height: e.height,
+      ...e.kind === "group" ? { children: [] } : {},
+      ports: e.ports?.map((d) => ({
+        id: d.id,
         width: 1,
         height: 1,
-        layoutOptions: { "elk.port.side": r.side }
+        layoutOptions: { "elk.port.side": d.side }
       })),
       layoutOptions: {
         "elk.portConstraints": "FIXED_ORDER",
-        "elk.padding": `[top=${a.top},left=${a.left},bottom=${a.bottom},right=${a.right}]`
+        "elk.padding": `[top=${t.top},left=${t.left},bottom=${t.bottom},right=${t.right}]`
       }
     });
-  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([
-    ...n.nodes.flatMap((t) => [t.id, ...(t.ports ?? []).map((r) => r.id)]),
-    ...n.edges.map((t) => t.id)
+  const r = [];
+  for (const e of i.nodes)
+    (e.parentId ? s.get(e.parentId).children : r).push(s.get(e.id));
+  const n = /* @__PURE__ */ new Set([
+    ...i.nodes.flatMap((e) => [e.id, ...(e.ports ?? []).map((d) => d.id)]),
+    ...i.edges.map((e) => e.id)
   ]);
-  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]
+  let h = "$graph";
+  for (; n.has(h); ) h += "$";
+  const p = await c.layout({
+    id: h,
+    children: r,
+    edges: i.edges.map((e) => ({
+      id: e.id,
+      sources: [e.sourcePort ?? e.source],
+      targets: [e.targetPort ?? e.target]
     })),
     layoutOptions: {
       "elk.algorithm": "layered",
@@ -83,47 +88,72 @@ async function P(n, o, c) {
       "elk.layered.considerModelOrder.strategy": "NODES_AND_EDGES",
       "elk.randomSeed": "1"
     }
-  }), 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 };
+  }), y = /* @__PURE__ */ new Map(), x = /* @__PURE__ */ new Map(), E = (e) => {
+    for (const d of e.edges ?? []) {
+      const g = d.container ?? e.id, f = y.get(g) ?? { x: 0, y: 0 };
       x.set(
-        r.id,
-        (r.sections ?? []).map(
-          (g) => [g.startPoint, ...g.bendPoints ?? [], g.endPoint].map((w) => ({
-            x: w.x + l.x,
-            y: w.y + l.y
+        d.id,
+        (d.sections ?? []).map(
+          (l) => [l.startPoint, ...l.bendPoints ?? [], l.endPoint].map((m) => ({
+            x: m.x + f.x,
+            y: m.y + f.y
           }))
         )
       );
     }
-    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 ?? []) I(w, l, g);
+    for (const d of e.children ?? []) E(d);
+  }, v = (e, d, g) => {
+    const f = d + (e.x ?? 0), l = g + (e.y ?? 0);
+    y.set(e.id, { x: f, y: l, width: e.width ?? 0, height: e.height ?? 0 });
+    for (const m of e.children ?? []) v(m, f, l);
   };
-  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 };
+  for (const e of p.children ?? []) v(e, 0, 0);
+  E(p);
+  const w = (!o.positions?.length || o.positionMode === "compact") && o.anchor && y.get(o.anchor.nodeId), u = w ? o.anchor.position.x - w.x : 0, I = w ? o.anchor.position.y - w.y : 0, G = i.nodes.map((e) => {
+    const d = y.get(e.id);
+    return { ...e, ...d, x: d.x + u, y: d.y + I };
   });
-  return v(
+  return b(
     {
-      nodes: k,
-      edges: n.edges.map((t) => ({
-        ...t,
-        sections: (x.get(t.id) ?? []).map(
-          (r) => r.map((p) => ({ x: p.x + m, y: p.y + u }))
+      nodes: G,
+      edges: i.edges.map((e) => ({
+        ...e,
+        sections: (x.get(e.id) ?? []).map(
+          (d) => d.map((g) => ({ x: g.x + u, y: g.y + I }))
         )
       })),
-      bounds: { x: m, y: u, width: h.width ?? 0, height: h.height ?? 0 }
+      bounds: { x: u, y: I, width: p.width ?? 0, height: p.height ?? 0 }
     },
     o,
-    n.nodes
+    i.nodes
   );
 }
+function O(a, o) {
+  if (o.positionMode !== "compact" || !o.positions?.length) return a;
+  const c = o.direction ?? "RIGHT", i = new Map(
+    o.positions.map((r) => [
+      r.nodeId,
+      c === "RIGHT" || c === "LEFT" ? r.y : r.x
+    ])
+  ), t = new Map(a.nodes.map((r, n) => [r.id, n]));
+  return { nodes: [...a.nodes].sort((r, n) => {
+    const h = (r.parentId ?? "").localeCompare(n.parentId ?? ""), p = o.layers && !r.parentId && !n.parentId ? 0 : (i.get(r.id) ?? 1 / 0) - (i.get(n.id) ?? 1 / 0);
+    return h || p || t.get(r.id) - t.get(n.id);
+  }), edges: a.edges };
+}
+function M(a, o) {
+  const c = new Map(a.nodes.map((t) => [t.id, t])), i = /* @__PURE__ */ new Set();
+  for (const [t, s] of o.entries()) {
+    if (!s.length) throw new Error(`Graph layer must not be empty: ${t}`);
+    for (const r of s) {
+      const n = c.get(r);
+      if (!n || n.parentId) throw new Error(`Graph layer object must be a root node: ${r}`);
+      if (i.has(r)) throw new Error(`Graph object appears in multiple layers: ${r}`);
+      i.add(r);
+    }
+  }
+}
 export {
   P as computeGraphLayout,
-  N as validateGraphInput
+  $ as validateGraphInput
 };

package/dist/components/graph/packing.js

@@ -1,75 +1,158 @@
-import { applyGraphPositions as b } from "./positions.js";
-import { routeGraphGeometry as G } from "./routing.js";
-async function N(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);
+import { applyGraphPositions as $ } from "./positions.js";
+import { routeGraphGeometry as P } from "./routing.js";
+async function j(f, i, S) {
+  const y = new Map(f.nodes.map((e) => [e.id, { ...e, x: 0, y: 0 }])), O = new Map(f.nodes.map((e, d) => [e.id, d])), m = /* @__PURE__ */ new Map();
+  for (const e of y.values()) {
+    const d = m.get(e.parentId) ?? [];
+    d.push(e), m.set(e.parentId, d);
   }
-  const x = /* @__PURE__ */ new Set([
-    ...d.nodes.flatMap((e) => [e.id, ...(e.ports ?? []).map((i) => i.id)]),
-    ...d.edges.map((e) => e.id)
+  const p = /* @__PURE__ */ new Set([
+    ...f.nodes.flatMap((e) => [e.id, ...(e.ports ?? []).map((d) => d.id)]),
+    ...f.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);
-  }, m = (e, i) => {
-    let o = a.get(e);
-    for (; o && o.parentId !== i; )
-      o = o.parentId ? a.get(o.parentId) : void 0;
-    return o;
-  }, y = async (e) => {
-    const i = r.get(e) ?? [];
-    for (const t of i) {
-      if (!r.has(t.id)) continue;
-      const s = await y(t.id);
-      t.width = Math.max(t.width, s.width), t.height = Math.max(t.height, s.height);
+  let T = "$packed";
+  for (; p.has(T); ) T += "$";
+  const k = i.groupPadding ?? { top: 64, right: 28, bottom: 28, left: 28 }, E = i.direction ?? "RIGHT", w = new Map(
+    (i.positions ?? []).map((e) => [
+      e.nodeId,
+      E === "RIGHT" || E === "LEFT" ? e.y : e.x
+    ])
+  ), I = (e, d, s) => {
+    e.x += d, e.y += s;
+    for (const v of m.get(e.id) ?? []) I(v, d, s);
+  }, x = (e, d) => {
+    let s = y.get(e);
+    for (; s && s.parentId !== d; )
+      s = s.parentId ? y.get(s.parentId) : void 0;
+    return s;
+  }, G = async (e) => {
+    const d = [...m.get(e) ?? []];
+    (e !== void 0 || !i.layers) && d.sort(
+      (o, a) => (w.get(o.id) ?? 1 / 0) - (w.get(a.id) ?? 1 / 0) || O.get(o.id) - O.get(a.id)
+    );
+    for (const o of d) {
+      if (!m.has(o.id)) continue;
+      const a = await G(o.id);
+      o.width = Math.max(o.width, a.width), o.height = Math.max(o.height, a.height);
     }
-    if (!i.length) return { width: 0, height: 0 };
-    const o = /* @__PURE__ */ new Map();
-    for (const t of d.edges) {
-      const s = m(t.source, e), h = m(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] });
+    if (!d.length) return { width: 0, height: 0 };
+    if (e === void 0 && i.layers)
+      return z(d, f, i, x, I);
+    const s = /* @__PURE__ */ new Map();
+    for (const o of f.edges) {
+      const a = x(o.source, e), M = x(o.target, e);
+      if (!a || !M || a.id === M.id) continue;
+      const H = JSON.stringify([a.id, M.id]);
+      s.has(H) || s.set(H, { id: o.id, sources: [a.id], targets: [M.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()],
+    const v = await S.layout({
+      id: e ?? T,
+      children: d.map((o) => ({ id: o.id, width: o.width, height: o.height })),
+      edges: [...s.values()],
       layoutOptions: {
-        "elk.algorithm": o.size ? "layered" : "rectpacking",
-        "elk.direction": n.direction ?? "RIGHT",
+        "elk.algorithm": s.size ? "layered" : "rectpacking",
+        "elk.direction": E,
         "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),
+        ...i.aspectRatio !== void 0 ? { "elk.aspectRatio": String(i.aspectRatio) } : {},
+        "elk.spacing.componentComponent": String(i.spacing ?? 64),
+        "elk.spacing.nodeNode": String(i.spacing ?? 64),
+        "elk.layered.spacing.nodeNodeBetweenLayers": String(i.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.padding": e ? `[top=${k.top},left=${k.left},bottom=${k.bottom},right=${k.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);
+    for (const o of v.children ?? []) {
+      const a = y.get(o.id);
+      I(a, (o.x ?? 0) - a.x, (o.y ?? 0) - a.y);
     }
-    return { width: c.width ?? 0, height: c.height ?? 0 };
-  }, S = await y(), 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);
+    return { width: v.width ?? 0, height: v.height ?? 0 };
+  }, u = await G(), R = (!i.positions?.length || i.positionMode === "compact" || i.layers) && i.anchor && y.get(i.anchor.nodeId);
+  if (R) {
+    const e = i.anchor.position.x - R.x, d = i.anchor.position.y - R.y;
+    for (const s of m.get(void 0) ?? []) I(s, e, d);
   }
-  const u = {
-    nodes: [...a.values()],
-    edges: d.edges.map((e) => ({ ...e, sections: [] })),
-    bounds: { x: 0, y: 0, ...S }
+  const C = {
+    nodes: [...y.values()],
+    edges: f.edges.map((e) => ({ ...e, sections: [] })),
+    bounds: { x: 0, y: 0, ...u }
   };
-  return n.positions?.length ? b(u, n, d.nodes) : G(u);
+  return i.positions?.length && i.positionMode !== "compact" && !i.layers ? $(C, i, f.nodes) : P(C);
+}
+function z(f, i, S, y, O) {
+  const m = S.direction ?? "RIGHT", p = m === "RIGHT" || m === "LEFT", T = m === "RIGHT" || m === "DOWN", k = new Map(f.map((t, n) => [t.id, n])), E = new Map(
+    (S.positions ?? []).filter((t) => k.has(t.nodeId)).map((t) => [t.nodeId, p ? t.y : t.x])
+  ), w = (t, n) => k.get(t) - k.get(n) || t.localeCompare(n), I = (t, n) => (E.get(t) ?? 1 / 0) - (E.get(n) ?? 1 / 0) || w(t, n), x = new Map(f.map((t) => [t.id, /* @__PURE__ */ new Set()]));
+  for (const t of i.edges) {
+    const n = y(t.source, void 0)?.id, r = y(t.target, void 0)?.id;
+    n && r && n !== r && (x.get(n)?.add(r), x.get(r)?.add(n));
+  }
+  const G = S.layers ?? [], u = /* @__PURE__ */ new Map();
+  G.forEach((t, n) => t.forEach((r) => u.set(r, n)));
+  const R = new Set(f.map((t) => t.id)), C = [];
+  for (const t of [...R].sort(w)) {
+    if (!R.has(t)) continue;
+    const n = [], r = [t];
+    R.delete(t);
+    for (let c = 0; c < r.length; c++) {
+      const g = r[c];
+      n.push(g);
+      for (const h of [...x.get(g)].sort(w))
+        R.delete(h) && r.push(h);
+    }
+    C.push(n);
+  }
+  let e = G.length;
+  for (const t of C) {
+    const n = t.filter((g) => u.has(g));
+    if (!n.length) {
+      t.sort(w).forEach((g) => u.set(g, e)), e++;
+      continue;
+    }
+    const r = /* @__PURE__ */ new Map(), c = [...n].sort((g, h) => u.get(g) - u.get(h) || w(g, h));
+    for (const g of c) r.set(g, 0);
+    for (let g = 0; g < c.length; g++) {
+      const h = c[g];
+      for (const l of [...x.get(h)].sort(w))
+        r.has(l) || (r.set(l, r.get(h) + 1), u.set(l, u.get(h)), c.push(l));
+    }
+  }
+  const d = Math.max(G.length, e), s = Array.from({ length: d }, () => []);
+  for (const t of f) s[u.get(t.id)].push(t);
+  for (const t of s) t.sort((n, r) => I(n.id, r.id));
+  const v = (t, n) => {
+    const r = new Map(s[n].map((h, l) => [h.id, l])), c = new Map(s[t].map((h, l) => [h.id, l])), g = (h) => {
+      const l = [...x.get(h) ?? []].flatMap((N) => {
+        const b = r.get(N);
+        return u.get(N) === n && b !== void 0 ? [b] : [];
+      });
+      return l.length ? l.reduce((N, b) => N + b, 0) / l.length : c.get(h);
+    };
+    s[t].sort((h, l) => g(h.id) - g(l.id) || I(h.id, l.id));
+  };
+  for (let t = 1; t < s.length; t++) v(t, t - 1);
+  for (let t = s.length - 2; t >= 0; t--) v(t, t + 1);
+  const o = S.spacing ?? 64;
+  let a = 0, M = 0;
+  const H = [], L = [];
+  for (const t of s) {
+    let n = 0;
+    const r = Math.max(0, ...t.map((c) => p ? c.width : c.height));
+    H.push(a), L.push(r);
+    for (const c of t) {
+      const g = a + (r - (p ? c.width : c.height)) / 2, h = p ? g : n, l = p ? n : g;
+      O(c, h - c.x, l - c.y), n += (p ? c.height : c.width) + o;
+    }
+    M = Math.max(M, Math.max(0, n - o)), a += r + o;
+  }
+  if (a = Math.max(0, a - o), !T)
+    for (const t of f) {
+      const n = u.get(t.id), c = a - H[n] - L[n] + (L[n] - (p ? t.width : t.height)) / 2;
+      O(t, p ? c - t.x : 0, p ? 0 : c - t.y);
+    }
+  return p ? { width: a, height: M } : { width: M, height: a };
 }
 export {
-  N as computePackedGraphLayout
+  j as computePackedGraphLayout
 };

package/dist/components/graph/positions.js

@@ -1,8 +1,8 @@
 import { routeGraphGeometry as G } from "./routing.js";
-function E(d, c, v) {
-  if (!c.positions?.length) return d;
+function E(d, p, v) {
+  if (!p.positions?.length || p.positionMode === "compact") return d;
   const f = new Map(d.nodes.map((t) => [t.id, { ...t }])), l = /* @__PURE__ */ new Map();
-  for (const t of c.positions) {
+  for (const t of p.positions) {
     if (!f.has(t.nodeId) || l.has(t.nodeId) || !Number.isFinite(t.x) || !Number.isFinite(t.y))
       throw new Error(`Invalid graph position: ${t.nodeId}`);
     l.set(t.nodeId, t);
@@ -13,14 +13,14 @@ function E(d, c, v) {
       const m = y.get(t.parentId) ?? [];
       m.push(t), y.set(t.parentId, m);
     }
-  const x = c.groupPadding ?? { top: 64, left: 28, right: 28, bottom: 28 }, u = c.positionMode === "preferred", I = new Map(v.map((t) => [t.id, t])), b = (t, m, M) => {
-    const g = { x: t.x, y: t.y }, p = l.get(t.id);
-    t.x = p?.x ?? t.x + m, t.y = p?.y ?? t.y + M;
+  const x = p.groupPadding ?? { top: 64, left: 28, right: 28, bottom: 28 }, u = p.positionMode === "preferred", I = new Map(v.map((t) => [t.id, t])), b = (t, m, M) => {
+    const g = { x: t.x, y: t.y }, c = l.get(t.id);
+    t.x = c?.x ?? t.x + m, t.y = c?.y ?? t.y + M;
     const i = y.get(t.id) ?? [];
     for (const a of i) b(a, t.x - g.x, t.y - g.y);
     if (!i.length || u) return;
-    const o = Math.min(...i.map((a) => a.x)) - x.left, h = Math.min(...i.map((a) => a.y)) - x.top;
-    if (p && (o < t.x || h < t.y))
+    const r = Math.min(...i.map((a) => a.x)) - x.left, h = Math.min(...i.map((a) => a.y)) - x.top;
+    if (c && (r < t.x || h < t.y))
       throw new Error(`Pinned child lies outside group content: ${t.id}`);
     const s = Math.max(
       t.x + t.width,
@@ -29,43 +29,43 @@ function E(d, c, v) {
       t.y + t.height,
       ...i.map((a) => a.y + a.height + x.bottom)
     );
-    p || (t.x = Math.min(t.x, o), t.y = Math.min(t.y, h)), t.width = s - t.x, t.height = n - t.y;
+    c || (t.x = Math.min(t.x, r), t.y = Math.min(t.y, h)), t.width = s - t.x, t.height = n - t.y;
   };
   for (const t of f.values()) t.parentId || b(t, 0, 0);
   if (u) {
-    const t = Math.max(16, c.spacing ?? 64), m = (i, o, h) => {
-      i.x += o, i.y += h;
-      for (const s of y.get(i.id) ?? []) m(s, o, h);
+    const t = Math.max(16, p.spacing ?? 64), m = (i, r, h) => {
+      i.x += r, i.y += h;
+      for (const s of y.get(i.id) ?? []) m(s, r, h);
     }, M = (i) => {
-      const o = [];
+      const r = [];
       for (const h of [...i].sort(
         (s, n) => s.y - n.y || s.x - n.x || s.id.localeCompare(n.id)
       )) {
         const s = { x: h.x, y: h.y };
-        for (const r of [...o].sort((e, w) => e.x - w.x))
-          h.y < r.y + r.height + t && h.y + h.height + t > r.y && s.x < r.x + r.width + t && s.x + h.width + t > r.x && (s.x = r.x + r.width + t);
+        for (const o of [...r].sort((e, w) => e.x - w.x))
+          h.y < o.y + o.height + t && h.y + h.height + t > o.y && s.x < o.x + o.width + t && s.x + h.width + t > o.x && (s.x = o.x + o.width + t);
         const n = { x: h.x, y: h.y };
-        for (const r of [...o].sort((e, w) => e.y - w.y))
-          h.x < r.x + r.width + t && h.x + h.width + t > r.x && n.y < r.y + r.height + t && n.y + h.height + t > r.y && (n.y = r.y + r.height + t);
+        for (const o of [...r].sort((e, w) => e.y - w.y))
+          h.x < o.x + o.width + t && h.x + h.width + t > o.x && n.y < o.y + o.height + t && n.y + h.height + t > o.y && (n.y = o.y + o.height + t);
         const a = s.x - h.x < n.y - h.y ? s : n;
-        m(h, a.x - h.x, a.y - h.y), o.push(h);
+        m(h, a.x - h.x, a.y - h.y), r.push(h);
       }
     }, g = (i) => {
-      const o = y.get(i.id) ?? [];
-      if (!o.length) return;
-      for (const e of o) g(e);
-      M(o);
-      const h = Math.max(12, x.left), s = Math.max(12, x.top), n = Math.max(12, x.right), a = Math.max(12, x.bottom), r = l.get(i.id);
-      i.x = Math.min(r?.x ?? 1 / 0, Math.min(...o.map((e) => e.x)) - h), i.y = Math.min(r?.y ?? 1 / 0, Math.min(...o.map((e) => e.y)) - s), i.width = Math.max(
+      const r = y.get(i.id) ?? [];
+      if (!r.length) return;
+      for (const e of r) g(e);
+      M(r);
+      const h = Math.max(12, x.left), s = Math.max(12, x.top), n = Math.max(12, x.right), a = Math.max(12, x.bottom), o = l.get(i.id);
+      i.x = Math.min(o?.x ?? 1 / 0, Math.min(...r.map((e) => e.x)) - h), i.y = Math.min(o?.y ?? 1 / 0, Math.min(...r.map((e) => e.y)) - s), i.width = Math.max(
         I.get(i.id).width,
-        Math.max(...o.map((e) => e.x + e.width)) + n - i.x
+        Math.max(...r.map((e) => e.x + e.width)) + n - i.x
       ), i.height = Math.max(
         I.get(i.id).height,
-        Math.max(...o.map((e) => e.y + e.height)) + a - i.y
+        Math.max(...r.map((e) => e.y + e.height)) + a - i.y
       );
-    }, p = [...f.values()].filter((i) => !i.parentId);
-    for (const i of p) g(i);
-    M(p);
+    }, c = [...f.values()].filter((i) => !i.parentId);
+    for (const i of c) g(i);
+    M(c);
   }
   return G({ ...d, nodes: [...f.values()] });
 }