@floegence/floe-webapp-core 0.82.0 → 0.83.1

package/dist/components/chat/blocks/MarkdownMedia.d.ts

@@ -35,6 +35,7 @@ export interface ResolvedMarkdownMedia {
 export interface MarkdownMediaProps {
     source: MarkdownMediaSource;
     labels: MarkdownMediaLabels;
+    /** Replace this callback when its authorization or resource context changes. Reads inside it do not trigger reloads. */
     resolve?: (source: MarkdownMediaSource, signal: AbortSignal) => Promise<ResolvedMarkdownMedia>;
     class?: string;
 }

package/dist/components/chat/blocks/MarkdownMedia.js

@@ -1,141 +1,139 @@
-import { use as F, insert as s, createComponent as o, effect as u, setAttribute as n, memo as _, className as K, template as v, delegateEvents as P } from "solid-js/web";
-import { createSignal as x, onMount as Q, onCleanup as B, createMemo as X, createEffect as Y, Switch as D, Match as w, Show as S } from "solid-js";
-import { FloatingWindow as Z } from "../../ui/FloatingWindow.js";
-import { Refresh as p, FolderOpen as ee, Eye as re, Maximize as te, ExternalLink as ae } from "../../icons/index.js";
-import { cn as le } from "../../../utils/cn.js";
-import { sandboxedMarkdownHtml as N, safeMarkdownMediaURL as ne } from "../markdown/media.js";
-var ie = /* @__PURE__ */ v("<span class=chat-media-placeholder role=status>"), oe = /* @__PURE__ */ v("<span class=chat-media-placeholder role=status><span></span><button type=button class=chat-media-retry>"), se = /* @__PURE__ */ v("<button type=button class=chat-media-image-button><img class=chat-media-image loading=lazy decoding=async referrerpolicy=no-referrer>", !0, !1, !1), ce = /* @__PURE__ */ v("<video class=chat-media-video controls playsinline preload=metadata>"), de = /* @__PURE__ */ v("<audio class=chat-media-audio controls preload=metadata>"), ue = /* @__PURE__ */ v("<iframe class=chat-media-html sandbox=allow-scripts referrerpolicy=no-referrer>"), H = /* @__PURE__ */ v("<button type=button class=chat-media-action>"), ve = /* @__PURE__ */ v("<div class=chat-media-preview-content><img referrerpolicy=no-referrer class=chat-media-full-image>"), he = /* @__PURE__ */ v("<span><span class=chat-media-viewport></span><span class=chat-media-header><span class=chat-media-heading><span class=chat-media-kind></span><span class=chat-media-title></span></span><span class=chat-media-actions>"), me = /* @__PURE__ */ v('<a class=chat-media-action target=_blank rel="noopener noreferrer">');
-async function ge(a) {
-  const f = ne(a.src ?? "");
+import { use as B, insert as o, createComponent as i, effect as u, setAttribute as n, memo as R, className as P, template as h, delegateEvents as Q } from "solid-js/web";
+import { createSignal as M, onMount as X, onCleanup as D, createMemo as Y, createEffect as Z, on as q, Switch as N, Match as k, Show as E } from "solid-js";
+import { FloatingWindow as p } from "../../ui/FloatingWindow.js";
+import { Refresh as ee, FolderOpen as re, Eye as te, Maximize as ae, ExternalLink as le } from "../../icons/index.js";
+import { cn as ne } from "../../../utils/cn.js";
+import { sandboxedMarkdownHtml as V, safeMarkdownMediaURL as ie } from "../markdown/media.js";
+var oe = /* @__PURE__ */ h("<span class=chat-media-placeholder role=status>"), se = /* @__PURE__ */ h("<span class=chat-media-placeholder role=status><span></span><button type=button class=chat-media-retry>"), ce = /* @__PURE__ */ h("<button type=button class=chat-media-image-button><img class=chat-media-image loading=lazy decoding=async referrerpolicy=no-referrer>", !0, !1, !1), de = /* @__PURE__ */ h("<video class=chat-media-video controls playsinline preload=metadata>"), ve = /* @__PURE__ */ h("<audio class=chat-media-audio controls preload=metadata>"), ue = /* @__PURE__ */ h("<iframe class=chat-media-html sandbox=allow-scripts referrerpolicy=no-referrer>"), z = /* @__PURE__ */ h("<button type=button class=chat-media-action>"), he = /* @__PURE__ */ h("<div class=chat-media-preview-content><img referrerpolicy=no-referrer class=chat-media-full-image>"), me = /* @__PURE__ */ h("<span><span class=chat-media-viewport></span><span class=chat-media-header><span class=chat-media-heading><span class=chat-media-kind></span><span class=chat-media-title></span></span><span class=chat-media-actions>"), ge = /* @__PURE__ */ h('<a class=chat-media-action target=_blank rel="noopener noreferrer">');
+async function fe(a) {
+  const f = ie(a.src ?? "");
   if (!f || a.kind === "html") throw new Error("A host resolver is required");
   return {
     src: f,
     openURL: f
   };
 }
-const xe = (a) => {
-  let f, q;
-  const [V, z] = x(!1);
-  Q(() => {
+const Me = (a) => {
+  let f, I;
+  const [W, O] = M(!1);
+  X(() => {
     if (typeof IntersectionObserver > "u") {
-      z(!0);
+      O(!0);
       return;
     }
-    const i = new IntersectionObserver((g) => {
-      g.some((d) => d.isIntersecting) && (z(!0), i.disconnect());
+    const s = new IntersectionObserver((c) => {
+      c.some((L) => L.isIntersecting) && (O(!0), s.disconnect());
     }, {
       rootMargin: "400px"
     });
-    i.observe(f), B(() => i.disconnect());
+    s.observe(f), D(() => s.disconnect());
   });
-  const [h, I] = x(), [W, R] = x(), [k, y] = x("loading"), [j, G] = x(0), [$, E] = x(!1), m = () => a.source.title || a.labels[a.source.kind], J = X(() => a.source), T = () => h()?.preview?.label || a.labels.previewImage || a.labels.expand, O = (i) => {
-    q = i.currentTarget;
-    const g = h()?.preview;
-    g ? g.onSelect() : E(!0);
+  const [m, U] = M(), [j, T] = M(), [y, $] = M("loading"), [G, J] = M(0), [x, C] = M(!1), g = () => a.source.title || a.labels[a.source.kind], K = Y(() => a.source), H = () => m()?.preview?.label || a.labels.previewImage || a.labels.expand, A = (s) => {
+    I = s.currentTarget;
+    const c = m()?.preview;
+    c ? c.onSelect() : C(!0);
   };
-  return Y(() => {
-    if (!V()) return;
-    const i = J(), g = a.resolve ?? ge;
-    j();
-    const d = new AbortController();
-    B(() => d.abort()), I(void 0), R(void 0), y("loading"), E(!1), (async () => {
-      if (i.kind === "html" && i.html !== void 0) {
-        if (i.html.length > 1e6) throw new Error("HTML preview is too large");
-        d.signal.aborted || R(N(i.html));
+  return Z(q([W, K, () => a.resolve, G], ([s, c, L]) => {
+    if (!s) return;
+    const _ = L ?? fe, v = new AbortController();
+    D(() => v.abort()), U(void 0), T(void 0), $("loading"), C(!1), (async () => {
+      if (c.kind === "html" && c.html !== void 0) {
+        if (c.html.length > 1e6) throw new Error("HTML preview is too large");
+        v.signal.aborted || T(V(c.html));
       } else {
-        const b = await g(i, d.signal);
-        if (d.signal.aborted) return;
-        if (i.kind === "html") {
+        const b = await _(c, v.signal);
+        if (v.signal.aborted) return;
+        if (c.kind === "html") {
           if (!b.loadHTML) throw new Error("HTML loader is required");
-          const M = await b.loadHTML(d.signal);
-          if (d.signal.aborted) return;
-          if (M.length > 1e6) throw new Error("HTML preview is too large");
-          R(N(M));
+          const w = await b.loadHTML(v.signal);
+          if (v.signal.aborted) return;
+          if (w.length > 1e6) throw new Error("HTML preview is too large");
+          T(V(w));
         } else if (!b.src) throw new Error("Media URL is required");
-        I(b);
+        U(b);
       }
-      d.signal.aborted || y("ready");
+      v.signal.aborted || $("ready");
     })().catch(() => {
-      d.signal.aborted || y("error");
+      v.signal.aborted || $("error");
     });
-  }), (() => {
-    var i = he(), g = i.firstChild, d = g.nextSibling, b = d.firstChild, M = b.firstChild, U = M.nextSibling, C = b.nextSibling, A = f;
-    return typeof A == "function" ? F(A, i) : f = i, s(g, o(D, {
+  })), (() => {
+    var s = me(), c = s.firstChild, L = c.nextSibling, _ = L.firstChild, v = _.firstChild, b = v.nextSibling, w = _.nextSibling, F = f;
+    return typeof F == "function" ? B(F, s) : f = s, o(c, i(N, {
       get children() {
-        return [o(w, {
+        return [i(k, {
           get when() {
-            return k() === "loading";
+            return y() === "loading";
           },
           get children() {
-            var e = ie();
-            return s(e, () => a.labels.loading), e;
+            var e = oe();
+            return o(e, () => a.labels.loading), e;
           }
-        }), o(w, {
+        }), i(k, {
           get when() {
-            return k() === "error";
+            return y() === "error";
           },
           get children() {
-            var e = oe(), r = e.firstChild, t = r.nextSibling;
-            return s(r, () => a.labels.unavailable), t.$$click = () => G((l) => l + 1), s(t, o(p, {}), null), s(t, () => a.labels.retry, null), e;
+            var e = se(), r = e.firstChild, t = r.nextSibling;
+            return o(r, () => a.labels.unavailable), t.$$click = () => J((l) => l + 1), o(t, i(ee, {}), null), o(t, () => a.labels.retry, null), e;
           }
-        }), o(w, {
+        }), i(k, {
           get when() {
-            return k() === "ready";
+            return y() === "ready";
           },
           get children() {
-            return o(D, {
+            return i(N, {
               get children() {
-                return [o(w, {
+                return [i(k, {
                   get when() {
                     return a.source.kind === "image";
                   },
                   get children() {
-                    var e = se(), r = e.firstChild;
-                    return e.$$click = O, r.addEventListener("error", () => y("error")), u((t) => {
-                      var l = `${T()}: ${m()}`, c = h()?.src, L = m();
-                      return l !== t.e && n(e, "aria-label", t.e = l), c !== t.t && n(r, "src", t.t = c), L !== t.a && n(r, "alt", t.a = L), t;
+                    var e = ce(), r = e.firstChild;
+                    return e.$$click = A, r.addEventListener("error", () => $("error")), u((t) => {
+                      var l = `${H()}: ${g()}`, d = m()?.src, S = g();
+                      return l !== t.e && n(e, "aria-label", t.e = l), d !== t.t && n(r, "src", t.t = d), S !== t.a && n(r, "alt", t.a = S), t;
                     }, {
                       e: void 0,
                       t: void 0,
                       a: void 0
                     }), e;
                   }
-                }), o(w, {
+                }), i(k, {
                   get when() {
                     return a.source.kind === "video";
                   },
                   get children() {
-                    var e = ce();
-                    return e.addEventListener("error", () => y("error")), u((r) => {
-                      var t = h()?.src, l = m();
+                    var e = de();
+                    return e.addEventListener("error", () => $("error")), u((r) => {
+                      var t = m()?.src, l = g();
                       return t !== r.e && n(e, "src", r.e = t), l !== r.t && n(e, "aria-label", r.t = l), r;
                     }, {
                       e: void 0,
                       t: void 0
                     }), e;
                   }
-                }), o(w, {
+                }), i(k, {
                   get when() {
                     return a.source.kind === "audio";
                   },
                   get children() {
-                    var e = de();
-                    return e.addEventListener("error", () => y("error")), u((r) => {
-                      var t = h()?.src, l = m();
+                    var e = ve();
+                    return e.addEventListener("error", () => $("error")), u((r) => {
+                      var t = m()?.src, l = g();
                       return t !== r.e && n(e, "src", r.e = t), l !== r.t && n(e, "aria-label", r.t = l), r;
                     }, {
                       e: void 0,
                       t: void 0
                     }), e;
                   }
-                }), o(w, {
+                }), i(k, {
                   get when() {
                     return a.source.kind === "html";
                   },
                   get children() {
                     var e = ue();
                     return u((r) => {
-                      var t = m(), l = W();
+                      var t = g(), l = j();
                       return t !== r.e && n(e, "title", r.e = t), l !== r.t && n(e, "srcdoc", r.t = l), r;
                     }, {
                       e: void 0,
@@ -148,80 +146,80 @@ const xe = (a) => {
           }
         })];
       }
-    })), s(M, () => a.labels[a.source.kind]), s(U, m), s(C, o(S, {
+    })), o(v, () => a.labels[a.source.kind]), o(b, g), o(w, i(E, {
       get when() {
-        return _(() => k() === "ready")() && h()?.reveal;
+        return R(() => y() === "ready")() && m()?.reveal;
       },
       children: (e) => (() => {
-        var r = H();
-        return r.$$click = () => e().onSelect(), s(r, o(ee, {})), u((t) => {
-          var l = e().label, c = e().label;
-          return l !== t.e && n(r, "aria-label", t.e = l), c !== t.t && n(r, "title", t.t = c), t;
+        var r = z();
+        return r.$$click = () => e().onSelect(), o(r, i(re, {})), u((t) => {
+          var l = e().label, d = e().label;
+          return l !== t.e && n(r, "aria-label", t.e = l), d !== t.t && n(r, "title", t.t = d), t;
         }, {
           e: void 0,
           t: void 0
         }), r;
       })()
-    }), null), s(C, o(S, {
+    }), null), o(w, i(E, {
       get when() {
-        return _(() => k() === "ready")() && a.source.kind === "image";
+        return R(() => y() === "ready")() && a.source.kind === "image";
       },
       get children() {
-        var e = H();
-        return e.$$click = O, s(e, o(re, {})), u((r) => {
-          var t = T(), l = T();
+        var e = z();
+        return e.$$click = A, o(e, i(te, {})), u((r) => {
+          var t = H(), l = H();
           return t !== r.e && n(e, "aria-label", r.e = t), l !== r.t && n(e, "title", r.t = l), r;
         }, {
           e: void 0,
           t: void 0
         }), e;
       }
-    }), null), s(C, o(S, {
+    }), null), o(w, i(E, {
       get when() {
-        return _(() => k() === "ready")() && a.source.kind === "html";
+        return R(() => y() === "ready")() && a.source.kind === "html";
       },
       get children() {
-        var e = H();
-        return e.$$click = () => E(!$()), s(e, o(te, {})), u((r) => {
-          var t = $() ? a.labels.collapse : a.labels.expand, l = $() ? a.labels.collapse : a.labels.expand, c = $();
-          return t !== r.e && n(e, "aria-label", r.e = t), l !== r.t && n(e, "title", r.t = l), c !== r.a && n(e, "aria-expanded", r.a = c), r;
+        var e = z();
+        return e.$$click = () => C(!x()), o(e, i(ae, {})), u((r) => {
+          var t = x() ? a.labels.collapse : a.labels.expand, l = x() ? a.labels.collapse : a.labels.expand, d = x();
+          return t !== r.e && n(e, "aria-label", r.e = t), l !== r.t && n(e, "title", r.t = l), d !== r.a && n(e, "aria-expanded", r.a = d), r;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), e;
       }
-    }), null), s(C, o(S, {
+    }), null), o(w, i(E, {
       get when() {
-        return _(() => a.source.kind !== "image" && !h()?.reveal)() && h()?.openURL;
+        return R(() => a.source.kind !== "image" && !m()?.reveal)() && m()?.openURL;
       },
       children: (e) => (() => {
-        var r = me();
-        return s(r, o(ae, {})), u((t) => {
-          var l = e(), c = a.labels.open, L = a.labels.open;
-          return l !== t.e && n(r, "href", t.e = l), c !== t.t && n(r, "aria-label", t.t = c), L !== t.a && n(r, "title", t.a = L), t;
+        var r = ge();
+        return o(r, i(le, {})), u((t) => {
+          var l = e(), d = a.labels.open, S = a.labels.open;
+          return l !== t.e && n(r, "href", t.e = l), d !== t.t && n(r, "aria-label", t.t = d), S !== t.a && n(r, "title", t.a = S), t;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), r;
       })()
-    }), null), s(i, o(S, {
+    }), null), o(s, i(E, {
       get when() {
         return a.source.kind === "image";
       },
       get children() {
-        return o(Z, {
+        return i(p, {
           get open() {
-            return $();
+            return x();
           },
           onOpenChange: (e) => {
-            E(e), e || q?.focus({
+            C(e), e || I?.focus({
               preventScroll: !0
             });
           },
           get title() {
-            return m();
+            return g();
           },
           get labels() {
             return {
@@ -241,12 +239,12 @@ const xe = (a) => {
           compactBelow: 640,
           class: "chat-media-preview-window",
           get children() {
-            var e = ve(), r = e.firstChild;
-            return F((t) => queueMicrotask(() => t.closest('[role="dialog"]')?.focus({
+            var e = he(), r = e.firstChild;
+            return B((t) => queueMicrotask(() => t.closest('[role="dialog"]')?.focus({
               preventScroll: !0
             })), e), u((t) => {
-              var l = h()?.src, c = m();
-              return l !== t.e && n(r, "src", t.e = l), c !== t.t && n(r, "alt", t.t = c), t;
+              var l = m()?.src, d = g();
+              return l !== t.e && n(r, "src", t.e = l), d !== t.t && n(r, "alt", t.t = d), t;
             }, {
               e: void 0,
               t: void 0
@@ -255,16 +253,16 @@ const xe = (a) => {
         });
       }
     }), null), u((e) => {
-      var r = le("chat-media", $() && a.source.kind === "html" && "chat-media-expanded", a.class), t = a.source.kind, l = m();
-      return r !== e.e && K(i, e.e = r), t !== e.t && n(i, "data-media-kind", e.t = t), l !== e.a && n(U, "title", e.a = l), e;
+      var r = ne("chat-media", x() && a.source.kind === "html" && "chat-media-expanded", a.class), t = a.source.kind, l = g();
+      return r !== e.e && P(s, e.e = r), t !== e.t && n(s, "data-media-kind", e.t = t), l !== e.a && n(b, "title", e.a = l), e;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), i;
+    }), s;
   })();
 };
-P(["click"]);
+Q(["click"]);
 export {
-  xe as MarkdownMedia
+  Me as MarkdownMedia
 };

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,178 @@
+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({
+    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();
+    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 {
+      width: t,
+      height: r
+    } = q();
+    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 = 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)
+      }
+    };
+  }, 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))));
+  };
+  te(() => {
+    if (!u) return;
+    const e = () => K({
+      width: u.clientWidth,
+      height: u.clientHeight
+    });
+    e();
+    const t = new ResizeObserver(e);
+    t.observe(u), re(() => t.disconnect());
+  });
+  const j = (e) => {
+    const t = {
+      kind: "node",
+      id: e.id
+    }, r = {
+      selected: () => S(t),
+      openMenu: (a) => L(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));
+        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;
+      }, {
+        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 = ce();
+    e.$$keydown = (r) => _(null, r);
+    var t = u;
+    return typeof t == "function" ? Z(t, e) : u = e, w(e, y(ae, {
+      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" : ie(r),
+      onCanvasPointerDown: (r) => {
+        !(r.target instanceof Element) || r.target.closest("[data-graph-object]") || i.onActivate?.(m(null, u, r));
+      },
+      onCanvasContextMenu: (r) => i.onContextMenu?.({
+        object: null,
+        owner: u,
+        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, {
+          get each() {
+            return n();
+          },
+          children: j
+        }), (() => {
+          var l = de(), d = l.firstChild, $ = d.firstChild;
+          return c($, "id", T), w(l, y(P, {
+            get each() {
+              return i.layout.edges;
+            },
+            children: (h) => {
+              const g = {
+                kind: "edge",
+                id: h.id
+              }, b = () => h.sections.map(oe).join(" ");
+              return y(ne, {
+                get when() {
+                  return !R() || R().has(h.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;
+                  }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0,
+                    o: void 0,
+                    i: void 0,
+                    n: void 0
+                  }), v;
+                }
+              });
+            }
+          }), null), C(() => c(l, "aria-label", i.ariaLabel)), l;
+        })(), y(P, {
+          get each() {
+            return x();
+          },
+          children: j
+        })];
+      }
+    }), null), w(e, () => i.overlay, null), C((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;
+    }, {
+      e: void 0,
+      t: void 0
+    }), e;
+  })();
+}
+p(["focusin", "focusout", "click", "contextmenu", "keydown"]);
+export {
+  me 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,8 @@
+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>;