@floegence/floe-webapp-core 0.82.1 → 0.84.0

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

@@ -0,0 +1,27 @@
+import { type JSX } from 'solid-js';
+import type { GraphLayout, GraphLayoutNode, GraphObjectEvent, GraphObjectRef, GraphViewport } from './types';
+export interface GraphNodeRenderContext {
+    selected: () => boolean;
+    /** Use on a touch-accessible menu trigger; floating UI remains host-owned. */
+    openMenu: (event: MouseEvent) => void;
+}
+export interface GraphCanvasProps {
+    layout: GraphLayout;
+    viewport: GraphViewport;
+    onViewportChange: (viewport: GraphViewport) => void;
+    ariaLabel: string;
+    renderNode: (node: GraphLayoutNode, context: GraphNodeRenderContext) => JSX.Element;
+    renderGroup?: (node: GraphLayoutNode, context: GraphNodeRenderContext) => JSX.Element;
+    selected?: GraphObjectRef | null;
+    /** Undefined follows pointer/focus. Null explicitly clears highlighting. */
+    highlight?: GraphObjectRef | null;
+    onActivate?: (event: GraphObjectEvent) => void;
+    onContextMenu?: (event: GraphObjectEvent) => void;
+    onHover?: (object: GraphObjectRef | null) => void;
+    onInteractionStart?: () => void;
+    /** Overlay content should use shared SurfaceFloatingLayer for point placement. */
+    overlay?: JSX.Element;
+    class?: string;
+}
+/** Controlled graph surface. Hosts own documents and selection; Floe owns geometry and input. */
+export declare function GraphCanvas(props: GraphCanvasProps): JSX.Element;

package/dist/components/graph/GraphCanvas.js

@@ -0,0 +1,193 @@
+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
+  }), 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 = 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
+    } = O();
+    if (!t || !r) return i.layout.nodes;
+    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,
+      owner: t,
+      position: r && (r.clientX !== 0 || r.clientY !== 0) ? {
+        x: r.clientX,
+        y: r.clientY
+      } : {
+        x: a.left + a.width / 2,
+        y: a.top + Math.min(32, a.height / 2)
+      }
+    };
+  }, 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))));
+  };
+  re(() => {
+    if (!g) return;
+    const e = () => U({
+      width: g.clientWidth,
+      height: g.clientHeight
+    });
+    e();
+    const t = new ResizeObserver(e);
+    t.observe(g), ae(() => t.disconnect());
+  });
+  const G = (e) => {
+    const t = {
+      kind: "node",
+      id: e.id
+    }, r = {
+      selected: () => A(t),
+      openMenu: (a) => R(t, a)
+    };
+    return (() => {
+      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);
+      })()), 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,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0,
+        s: void 0,
+        h: void 0
+      }), a;
+    })();
+  };
+  return (() => {
+    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;
+      },
+      minScale: 0.1,
+      maxScale: 3,
+      get ariaLabel() {
+        return i.ariaLabel;
+      },
+      get onViewportChange() {
+        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" : oe(r),
+      onCanvasPointerDown: (r) => {
+        !(r.target instanceof Element) || r.target.closest("[data-graph-object]") || i.onActivate?.(x(null, g, r));
+      },
+      onCanvasContextMenu: (r) => i.onContextMenu?.({
+        object: null,
+        owner: g,
+        position: {
+          x: r.clientX,
+          y: r.clientY
+        }
+      }),
+      children: (r) => {
+        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: G
+        }), (() => {
+          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: (s) => {
+              const f = {
+                kind: "edge",
+                id: s.id
+              }, C = () => s.sections.map(ce).join(" "), I = () => le(s.sections);
+              return w(F, {
+                get when() {
+                  return !Y() || Y().has(s.id);
+                },
+                get children() {
+                  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,
+                    a: void 0,
+                    o: void 0,
+                    i: void 0,
+                    n: void 0
+                  }), k;
+                }
+              });
+            }
+          }), null), S(() => l(c, "aria-label", i.ariaLabel)), c;
+        })(), w(D, {
+          get each() {
+            return b();
+          },
+          children: G
+        })];
+      }
+    }), null), y(e, () => i.overlay, null), S((r) => {
+      var a = `floe-graph ${i.class ?? ""}`, n = i.ariaLabel;
+      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;
+  })();
+}
+te(["focusin", "focusout", "click", "contextmenu", "keydown"]);
+export {
+  ke as GraphCanvas
+};

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

@@ -0,0 +1,7 @@
+import type { GraphInput, GraphLayout, GraphLayoutOptions } from './types';
+export interface GraphLayoutEngine {
+    layout(input: GraphInput, options?: GraphLayoutOptions): Promise<GraphLayout>;
+    dispose(): void;
+}
+/** One worker per mounted graph. Dispose on unmount; failures are never hidden. */
+export declare function createGraphLayoutEngine(): GraphLayoutEngine;

package/dist/components/graph/engine.js

@@ -0,0 +1,35 @@
+import m from "../../_virtual/elk-api.js";
+import { computeGraphLayout as u } from "./layout.js";
+function c() {
+  const r = new Worker(new URL(
+    /* @vite-ignore */
+    "" + new URL("../../assets/elk-worker-CrDP6jPz.js", import.meta.url).href,
+    import.meta.url
+  ), { type: "module" }), p = new m({ workerFactory: () => r });
+  let o;
+  const t = /* @__PURE__ */ new Set(), n = (e) => {
+    o = e, r.terminate();
+    for (const a of t) a.reject(e);
+    t.clear();
+  };
+  return r.addEventListener(
+    "error",
+    (e) => n(new Error(e.message || "Graph layout worker failed"))
+  ), r.addEventListener(
+    "messageerror",
+    () => n(new Error("Invalid graph layout worker response"))
+  ), {
+    layout(e, a) {
+      return o ? Promise.reject(o) : new Promise((l, s) => {
+        const i = { reject: s };
+        t.add(i), u(e, a ?? {}, p).then(l, s).finally(() => t.delete(i));
+      });
+    },
+    dispose() {
+      n(new Error("Graph layout engine disposed"));
+    }
+  };
+}
+export {
+  c as createGraphLayoutEngine
+};

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

@@ -0,0 +1,10 @@
+import type { GraphBounds, GraphLayout, GraphPoint, GraphViewport } from './types';
+export declare function graphSectionPath(points: readonly GraphPoint[]): string;
+export declare function fitGraphViewport(bounds: GraphBounds, size: {
+    width: number;
+    height: number;
+}, 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

@@ -0,0 +1,45 @@
+function c(e) {
+  return e.map((n, h) => `${h ? "L" : "M"}${n.x},${n.y}`).join(" ");
+}
+function s(e, n, h = 48) {
+  const a = Math.max(
+    0.1,
+    Math.min(
+      1,
+      (n.width - h * 2) / Math.max(1, e.width),
+      (n.height - h * 2) / Math.max(1, e.height)
+    )
+  );
+  return {
+    x: (n.width - e.width * a) / 2 - e.x * a,
+    y: (n.height - e.height * a) / 2 - e.y * a,
+    scale: a
+  };
+}
+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 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 {
+  s as fitGraphViewport,
+  g as graphEdgeLabelPosition,
+  f as graphRelatedEdges,
+  c as graphSectionPath
+};

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

@@ -0,0 +1,5 @@
+import type { ELK } from 'elkjs/lib/elk-api';
+import type { GraphInput, GraphLayout, GraphLayoutOptions } from './types';
+export declare function validateGraphInput(input: GraphInput): void;
+/** Normalizes geometry around the supplied ELK engine; browser layout runs in its worker. */
+export declare function computeGraphLayout(input: GraphInput, options: GraphLayoutOptions, engine: Pick<ELK, 'layout'>): Promise<GraphLayout>;

package/dist/components/graph/layout.js

@@ -0,0 +1,125 @@
+import { applyGraphPositions as v } from "./positions.js";
+function $(i) {
+  const n = /* @__PURE__ */ new Set(), p = (e) => {
+    if (!e || n.has(e)) throw new Error(`Duplicate or empty graph ID: ${e}`);
+    n.add(e);
+  }, s = new Map(i.nodes.map((e) => [e.id, e]));
+  for (const e of i.nodes) {
+    if (p(e.id), ![e.width, e.height].every((r) => Number.isFinite(r) && r > 0))
+      throw new Error(`Invalid dimensions for graph node: ${e.id}`);
+    for (const r of e.ports ?? []) p(r.id);
+    const a = /* @__PURE__ */ new Set([e.id]);
+    let d = e.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}`);
+      a.add(d), d = r.parentId;
+    }
+  }
+  for (const e of i.edges) {
+    p(e.id);
+    for (const [a, 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))
+        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))
+    throw new Error("Graph layout spacing must be finite and nonnegative");
+  const e = /* @__PURE__ */ new Map();
+  for (const t of i.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,
+        width: 1,
+        height: 1,
+        layoutOptions: { "elk.port.side": o.side }
+      })),
+      layoutOptions: {
+        "elk.portConstraints": "FIXED_ORDER",
+        "elk.padding": `[top=${s.top},left=${s.left},bottom=${s.bottom},right=${s.right}]`
+      }
+    });
+  const a = [];
+  for (const t of i.nodes)
+    (t.parentId ? e.get(t.parentId).children : a).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)
+  ]);
+  let r = "$graph";
+  for (; d.has(r); ) r += "$";
+  const c = await p.layout({
+    id: r,
+    children: a,
+    edges: i.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.edgeRouting": "ORTHOGONAL",
+      "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+      "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 };
+      x.set(
+        o.id,
+        (o.sections ?? []).map(
+          (g) => [g.startPoint, ...g.bendPoints ?? [], g.endPoint].map((w) => ({
+            x: w.x + l.x,
+            y: w.y + l.y
+          }))
+        )
+      );
+    }
+    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 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 };
+  });
+  return v(
+    {
+      nodes: k,
+      edges: i.edges.map((t) => ({
+        ...t,
+        sections: (x.get(t.id) ?? []).map(
+          (o) => o.map((h) => ({ x: h.x + m, y: h.y + u }))
+        )
+      })),
+      bounds: { x: m, y: u, width: c.width ?? 0, height: c.height ?? 0 }
+    },
+    n
+  );
+}
+export {
+  O as computeGraphLayout,
+  $ as validateGraphInput
+};

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

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

package/dist/components/graph/positions.js

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

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

@@ -0,0 +1,76 @@
+import type { InfiniteCanvasPoint } from '../ui/InfiniteCanvas';
+export interface GraphPoint {
+    x: number;
+    y: number;
+}
+export interface GraphBounds extends GraphPoint {
+    width: number;
+    height: number;
+}
+export type GraphViewport = InfiniteCanvasPoint;
+/** Port IDs, node IDs, and edge IDs share one namespace. */
+export interface GraphPort {
+    id: string;
+    side: 'NORTH' | 'EAST' | 'SOUTH' | 'WEST';
+}
+export interface GraphNode {
+    id: string;
+    label: string;
+    kind?: 'node' | 'group';
+    parentId?: string;
+    width: number;
+    height: number;
+    ports?: readonly GraphPort[];
+}
+export interface GraphEdge {
+    id: string;
+    label: string;
+    source: string;
+    target: string;
+    sourcePort?: string;
+    targetPort?: string;
+}
+export interface GraphInput {
+    nodes: readonly GraphNode[];
+    edges: readonly GraphEdge[];
+}
+export interface GraphLayoutNode extends GraphNode, GraphBounds {
+}
+export interface GraphLayoutEdge extends GraphEdge {
+    /** Separate sections preserve branches and self loops without inventing joins. */
+    sections: readonly (readonly GraphPoint[])[];
+}
+export interface GraphLayout {
+    nodes: readonly GraphLayoutNode[];
+    edges: readonly GraphLayoutEdge[];
+    bounds: GraphBounds;
+}
+export interface GraphLayoutOptions {
+    /** Absolute world positions. Descendants move with pinned groups; impossible containment or routing fails explicitly. */
+    positions?: readonly (GraphPoint & {
+        nodeId: string;
+    })[];
+    direction?: 'RIGHT' | 'DOWN' | 'LEFT' | 'UP';
+    spacing?: number;
+    groupPadding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Keep the object under inspection at its previous world position after layout. */
+    anchor?: {
+        nodeId: string;
+        position: GraphPoint;
+    };
+}
+export type GraphObjectRef = {
+    kind: 'node' | 'edge';
+    id: string;
+};
+/** Client coordinates go directly to SurfaceFloatingLayer; never rescale them. */
+export interface GraphObjectEvent {
+    object: GraphObjectRef | null;
+    position: GraphPoint;
+    owner: Element;
+}

package/dist/components/ui/InfiniteCanvas.d.ts

@@ -14,7 +14,7 @@ export interface InfiniteCanvasContextMenuEvent {
     worldY: number;
 }
 export interface InfiniteCanvasProps {
-    children: JSX.Element;
+    children: JSX.Element | ((viewport: Accessor<InfiniteCanvasPoint>) => JSX.Element);
     overlay?: (viewport: Accessor<InfiniteCanvasPoint>) => JSX.Element;
     viewport: InfiniteCanvasPoint;
     onViewportChange?: (viewport: InfiniteCanvasPoint) => void;