@floegence/floe-webapp-core 0.86.15 → 0.86.18

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

@@ -21,6 +21,10 @@ export interface GraphCanvasProps {
     onInteractionStart?: () => void;
     /** Overlay content should use shared SurfaceFloatingLayer for point placement. */
     overlay?: JSX.Element;
+    /** Optional interactive overview. Its geometry follows the same visible layout. */
+    minimap?: {
+        ariaLabel: string;
+    };
     class?: string;
 }
 /** Controlled graph surface. Hosts own documents and selection; Floe owns geometry and input. */

package/dist/components/graph/GraphCanvas.js

@@ -1,79 +1,111 @@
-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()}`;
+import { insert as w, createComponent as x, setAttribute as l, effect as S, className as K, template as I, memo as ae, setStyleProperty as T, use as ie, delegateEvents as oe } from "solid-js/web";
+import { createUniqueId as le, createSignal as O, createMemo as y, onMount as ce, For as j, Show as D, onCleanup as de } from "solid-js";
+import { InfiniteCanvas as ue } from "../ui/InfiniteCanvas.js";
+import { resolveSurfaceInteractionTargetRole as se } from "../ui/localInteractionSurface.js";
+import { graphRelatedEdges as U, graphEdgeLabelPosition as he, graphSectionPath as ge } from "./geometry.js";
+import { GraphMinimap as fe } from "./GraphMinimap.js";
+var ve = /* @__PURE__ */ I("<div data-floe-canvas-pan-surface=true role=group tabindex=0>"), me = /* @__PURE__ */ I("<div role=region tabindex=0>"), be = /* @__PURE__ */ I('<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>'), xe = /* @__PURE__ */ I("<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), ye = /* @__PURE__ */ I("<svg><text class=floe-graph__edge-label aria-hidden=true></svg>", !1, !0, !1);
+function Le(i) {
+  const H = `graph-arrow-${le()}`;
   let g;
-  const [q, K] = B(null), [O, U] = B({
+  const [J, Q] = O(null), [V, Z] = O({
     width: 0,
     height: 0
-  }), X = () => i.highlight === void 0 ? q() : i.highlight, J = $(() => new Map(i.layout.nodes.map((e) => [e.id, e]))), Q = $(() => {
+  }), X = () => i.highlight === void 0 ? J() : i.highlight, p = y(() => new Map(i.layout.nodes.map((e) => [e.id, e]))), ee = y(() => {
     const e = X();
-    return e?.kind === "node" ? W(i.layout, e.id) : new Set(e ? [e.id] : []);
-  }), Y = $(() => {
+    return e?.kind === "node" ? U(i.layout, e.id) : new Set(e ? [e.id] : []);
+  }), Y = 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 t = p().get(e.id), n = t?.kind === "group" ? t.id : t?.parentId;
+    return n ? U(i.layout, n) : null;
+  }), A = (e) => i.selected?.kind === e.kind && i.selected.id === e.id, B = (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();
+      height: n
+    } = V();
+    if (!t || !n) return;
+    const r = -e.x / e.scale - 240, a = -e.y / e.scale - 240, m = r + t / e.scale + 480, c = a + n / e.scale + 480;
+    return {
+      left: r,
+      top: a,
+      right: m,
+      bottom: c
+    };
+  }, te = (e) => {
+    const t = B(e);
+    if (!t) return i.layout.nodes;
+    const {
+      left: n,
+      top: r,
+      right: a,
+      bottom: m
+    } = t;
+    return i.layout.nodes.filter((c) => c.id === i.selected?.id || c.x + c.width >= n && c.x <= a && c.y + c.height >= r && c.y <= m);
+  }, N = y(() => i.layout.edges.map((e) => ({
+    edge: e,
+    path: e.sections.map(ge).join(" "),
+    label: he(e.sections),
+    segments: e.sections.flatMap((t) => t.slice(1).map((n, r) => ({
+      left: Math.min(n.x, t[r].x),
+      right: Math.max(n.x, t[r].x),
+      top: Math.min(n.y, t[r].y),
+      bottom: Math.max(n.y, t[r].y)
+    })))
+  }))), ne = (e) => {
+    const t = B(e);
+    return t ? N().filter(({
+      edge: n,
+      segments: r
+    }) => n.id === i.selected?.id || r.some((a) => a.left <= t.right && a.right >= t.left && a.top <= t.bottom && a.bottom >= t.top)) : N();
+  }, f = (e) => {
+    Q(e), i.onHover?.(e);
+  }, k = (e, t, n) => {
+    const r = t.getBoundingClientRect();
     return {
       object: e,
       owner: t,
-      position: r && (r.clientX !== 0 || r.clientY !== 0) ? {
-        x: r.clientX,
-        y: r.clientY
+      position: n && (n.clientX !== 0 || n.clientY !== 0) ? {
+        x: n.clientX,
+        y: n.clientY
       } : {
-        x: a.left + a.width / 2,
-        y: a.top + Math.min(32, a.height / 2)
+        x: r.left + r.width / 2,
+        y: r.top + Math.min(32, r.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))));
+  }, z = (e, t) => {
+    i.onContextMenu && (t.preventDefault(), t.stopPropagation(), i.onContextMenu(k(e, t.currentTarget, t)));
+  }, G = (e, t) => {
+    t.target === t.currentTarget && (t.key === "ContextMenu" || t.shiftKey && t.key === "F10" ? (t.preventDefault(), t.stopPropagation(), i.onContextMenu?.(k(e, t.currentTarget))) : t.key === "Enter" ? (t.preventDefault(), t.stopPropagation(), i.onActivate?.(k(e, t.currentTarget))) : t.key === "Escape" && (f(null), i.onActivate?.(k(null, g))));
   };
-  re(() => {
+  ce(() => {
     if (!g) return;
-    const e = () => U({
+    const e = () => Z({
       width: g.clientWidth,
       height: g.clientHeight
     });
     e();
     const t = new ResizeObserver(e);
-    t.observe(g), ae(() => t.disconnect());
+    t.observe(g), de(() => t.disconnect());
   });
-  const G = (e) => {
+  const F = (e) => {
     const t = {
       kind: "node",
       id: e.id
-    }, r = {
+    }, n = {
       selected: () => A(t),
-      openMenu: (a) => R(t, a)
+      openMenu: (r) => z(t, r)
     };
     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;
+      var r = ve();
+      return r.$$keydown = (a) => G(t, a), r.$$contextmenu = (a) => z(t, a), r.$$click = (a) => {
+        a.target.closest("button, a, input, select, textarea, [data-floe-canvas-interactive]") || (a.stopPropagation(), i.onActivate?.(k(t, a.currentTarget, a)));
+      }, r.$$focusout = () => f(null), r.$$focusin = () => f(t), r.addEventListener("pointerleave", () => f(null)), r.addEventListener("pointerenter", () => f(t)), w(r, (() => {
+        var a = ae(() => !!(e.kind === "group" && i.renderGroup));
+        return () => a() ? i.renderGroup(e, n) : i.renderNode(e, n);
+      })()), S((a) => {
+        var m = e.kind === "group" ? "floe-graph__group" : "floe-graph__node", c = e.id, d = A(t), _ = `${e.x}px`, P = `${e.y}px`, $ = `${e.width}px`, u = `${e.height}px`, v = e.label;
+        return m !== a.e && K(r, a.e = m), c !== a.t && l(r, "data-graph-object", a.t = c), d !== a.a && l(r, "data-selected", a.a = d), _ !== a.o && T(r, "left", a.o = _), P !== a.i && T(r, "top", a.i = P), $ !== a.n && T(r, "width", a.n = $), u !== a.s && T(r, "height", a.s = u), v !== a.h && l(r, "aria-label", a.h = v), a;
       }, {
         e: void 0,
         t: void 0,
@@ -83,14 +115,14 @@ function ke(i) {
         n: void 0,
         s: void 0,
         h: void 0
-      }), a;
+      }), r;
     })();
   };
   return (() => {
-    var e = se();
-    e.$$keydown = (r) => j(null, r);
+    var e = me();
+    e.$$keydown = (n) => G(null, n);
     var t = g;
-    return typeof t == "function" ? ee(t, e) : g = e, y(e, w(ie, {
+    return typeof t == "function" ? ie(t, e) : g = e, w(e, x(ue, {
       get viewport() {
         return i.viewport;
       },
@@ -103,62 +135,64 @@ function ke(i) {
         return i.onViewportChange;
       },
       onViewportInteractionStart: () => i.onInteractionStart?.(),
-      resolveTargetRole: (r) => (r.target instanceof Element ? r.target : null)?.closest('button, a, input, select, textarea, [data-floe-canvas-interactive="true"]') ? "local_surface" : oe(r),
-      onCanvasPointerDown: (r) => {
-        !(r.target instanceof Element) || r.target.closest("[data-graph-object]") || i.onActivate?.(x(null, g, r));
+      resolveTargetRole: (n) => (n.target instanceof Element ? n.target : null)?.closest('button, a, input, select, textarea, [data-floe-canvas-interactive="true"]') ? "local_surface" : se(n),
+      onCanvasPointerDown: (n) => {
+        !(n.target instanceof Element) || n.target.closest("[data-graph-object]") || i.onActivate?.(k(null, g, n));
       },
-      onCanvasContextMenu: (r) => i.onContextMenu?.({
+      onCanvasContextMenu: (n) => i.onContextMenu?.({
         object: null,
         owner: g,
         position: {
-          x: r.clientX,
-          y: r.clientY
+          x: n.clientX,
+          y: n.clientY
         }
       }),
-      children: (r) => {
-        const a = $(() => Z(r())), n = $(() => a().filter((c) => c.kind === "group")), b = $(() => a().filter((c) => c.kind !== "group"));
-        return [w(D, {
+      children: (n) => {
+        const r = y(() => te(n())), a = y(() => r().filter((d) => d.kind === "group")), m = y(() => r().filter((d) => d.kind !== "group")), c = y(() => ne(n()));
+        return [x(j, {
           get each() {
-            return n();
+            return a();
           },
-          children: G
+          children: F
         }), (() => {
-          var c = ue(), d = c.firstChild, P = d.firstChild;
-          return l(P, "id", H), y(c, w(D, {
+          var d = be(), _ = d.firstChild, P = _.firstChild;
+          return l(P, "id", H), w(d, x(j, {
             get each() {
-              return i.layout.edges;
+              return c();
             },
-            children: (s) => {
-              const f = {
+            children: ($) => {
+              const {
+                edge: u
+              } = $, v = {
                 kind: "edge",
-                id: s.id
-              }, C = () => s.sections.map(ce).join(" "), I = () => le(s.sections);
-              return w(F, {
+                id: u.id
+              }, W = () => $.path, re = () => $.label;
+              return x(D, {
                 get when() {
-                  return !Y() || Y().has(s.id);
+                  return !Y() || Y().has(u.id);
                 },
                 get children() {
-                  var k = he(), z = k.firstChild, u = z.nextSibling;
-                  return l(z, "marker-end", `url(#${H})`), y(k, w(F, {
+                  var C = xe(), R = C.firstChild, s = R.nextSibling;
+                  return l(R, "marker-end", `url(#${H})`), w(C, x(D, {
                     get when() {
-                      return I();
+                      return re();
                     },
                     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;
+                      var b = ye();
+                      return w(b, () => u.label), S((h) => {
+                        var M = /^\d+$/.test(u.label), E = o().x, L = o().y - 6;
+                        return M !== h.e && l(b, "data-count", h.e = M), E !== h.t && l(b, "x", h.t = E), L !== h.a && l(b, "y", h.a = L), h;
                       }, {
                         e: void 0,
                         t: void 0,
                         a: void 0
-                      }), m;
+                      }), b;
                     })()
-                  }), 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;
+                  }), s), s.$$keydown = (o) => G(v, o), s.$$contextmenu = (o) => z(v, o), s.$$click = (o) => {
+                    o.stopPropagation(), i.onActivate?.(k(v, o.currentTarget, o));
+                  }, s.addEventListener("blur", () => f(null)), s.addEventListener("focus", () => f(v)), s.addEventListener("pointerleave", () => f(null)), s.addEventListener("pointerenter", () => f(v)), S((o) => {
+                    var b = u.id, h = ee().has(u.id), M = A(v), E = W(), L = W(), q = u.label;
+                    return b !== o.e && l(C, "data-graph-object", o.e = b), h !== o.t && l(C, "data-emphasized", o.t = h), M !== o.a && l(C, "data-selected", o.a = M), E !== o.o && l(R, "d", o.o = E), L !== o.i && l(s, "d", o.i = L), q !== o.n && l(s, "aria-label", o.n = q), o;
                   }, {
                     e: void 0,
                     t: void 0,
@@ -166,28 +200,52 @@ function ke(i) {
                     o: void 0,
                     i: void 0,
                     n: void 0
-                  }), k;
+                  }), C;
                 }
               });
             }
-          }), null), S(() => l(c, "aria-label", i.ariaLabel)), c;
-        })(), w(D, {
+          }), null), S(() => l(d, "aria-label", i.ariaLabel)), d;
+        })(), x(j, {
           get each() {
-            return b();
+            return m();
           },
-          children: G
+          children: F
         })];
       }
-    }), 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;
+    }), null), w(e, x(D, {
+      get when() {
+        return i.minimap;
+      },
+      children: (n) => x(fe, {
+        get layout() {
+          return i.layout;
+        },
+        get viewport() {
+          return i.viewport;
+        },
+        get size() {
+          return V();
+        },
+        get onViewportChange() {
+          return i.onViewportChange;
+        },
+        get onInteractionStart() {
+          return i.onInteractionStart;
+        },
+        get ariaLabel() {
+          return n().ariaLabel;
+        }
+      })
+    }), null), w(e, () => i.overlay, null), S((n) => {
+      var r = `floe-graph ${i.class ?? ""}`, a = i.ariaLabel;
+      return r !== n.e && K(e, n.e = r), a !== n.t && l(e, "aria-label", n.t = a), n;
     }, {
       e: void 0,
       t: void 0
     }), e;
   })();
 }
-te(["focusin", "focusout", "click", "contextmenu", "keydown"]);
+oe(["focusin", "focusout", "click", "contextmenu", "keydown"]);
 export {
-  ke as GraphCanvas
+  Le as GraphCanvas
 };

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

@@ -0,0 +1,14 @@
+import type { GraphLayout, GraphViewport } from './types';
+export interface GraphMinimapProps {
+    layout: GraphLayout;
+    viewport: GraphViewport;
+    size: {
+        width: number;
+        height: number;
+    };
+    onViewportChange: (viewport: GraphViewport) => void;
+    onInteractionStart?: () => void;
+    ariaLabel: string;
+}
+/** A lightweight navigator over the exact main-canvas geometry. No second layout. */
+export declare function GraphMinimap(props: GraphMinimapProps): import("solid-js").JSX.Element;

package/dist/components/graph/GraphMinimap.js

@@ -0,0 +1,88 @@
+import { effect as S, setAttribute as d, template as z, use as A, delegateEvents as k } from "solid-js/web";
+import { createMemo as w } from "solid-js";
+import { graphSectionPath as D, fitGraphViewport as L } from "./geometry.js";
+var V = /* @__PURE__ */ z('<svg class=floe-graph__minimap role=region tabindex=0 preserveAspectRatio="xMidYMid meet"data-floe-canvas-interactive=true><path class=floe-graph__minimap-groups></path><path class=floe-graph__minimap-edges></path><path class=floe-graph__minimap-nodes></path><rect class=floe-graph__minimap-viewport>');
+function R(e) {
+  let h, n;
+  const c = w(() => {
+    const {
+      x: i,
+      y: o,
+      width: s,
+      height: v
+    } = e.layout.bounds, a = Math.max(s, v, 1) * 0.04;
+    return {
+      x: i - a,
+      y: o - a,
+      width: s + a * 2,
+      height: v + a * 2
+    };
+  }), g = (i) => e.layout.nodes.filter((o) => (o.kind === "group" ? "group" : "node") === i).map((o) => `M${o.x},${o.y}h${o.width}v${o.height}h${-o.width}Z`).join(""), C = w(() => g("node")), I = w(() => g("group")), P = w(() => e.layout.edges.flatMap((i) => i.sections.map(D)).join(" ")), u = (i) => {
+    const o = h?.getScreenCTM();
+    return o ? new DOMPoint(i.clientX, i.clientY).matrixTransform(o.inverse()) : void 0;
+  }, f = (i) => {
+    n?.id === i.pointerId && (n = void 0, h?.hasPointerCapture(i.pointerId) && h.releasePointerCapture(i.pointerId));
+  };
+  return (() => {
+    var i = V(), o = i.firstChild, s = o.nextSibling, v = s.nextSibling, a = v.nextSibling;
+    i.$$keydown = (t) => {
+      const l = {
+        ArrowLeft: [1, 0],
+        ArrowRight: [-1, 0],
+        ArrowUp: [0, 1],
+        ArrowDown: [0, -1]
+      }[t.key];
+      !l && t.key !== "Home" || (t.preventDefault(), t.stopPropagation(), e.onInteractionStart?.(), e.onViewportChange(l ? {
+        ...e.viewport,
+        x: e.viewport.x + l[0] * e.size.width * 0.2,
+        y: e.viewport.y + l[1] * e.size.height * 0.2
+      } : L(e.layout.bounds, e.size, 24)));
+    }, i.addEventListener("lostpointercapture", () => {
+      n = void 0;
+    }), i.addEventListener("pointercancel", f), i.$$pointerup = f, i.$$pointermove = (t) => {
+      if (n?.id !== t.pointerId) return;
+      const r = u(t);
+      r && e.onViewportChange({
+        ...n.viewport,
+        x: n.viewport.x - (r.x - n.x) * n.viewport.scale,
+        y: n.viewport.y - (r.y - n.y) * n.viewport.scale
+      });
+    }, i.$$pointerdown = (t) => {
+      if (t.button !== 0) return;
+      const r = u(t);
+      r && (t.preventDefault(), t.stopPropagation(), e.onInteractionStart?.(), h.focus({
+        preventScroll: !0
+      }), t.target.matches(".floe-graph__minimap-viewport") || e.onViewportChange({
+        ...e.viewport,
+        x: e.size.width / 2 - r.x * e.viewport.scale,
+        y: e.size.height / 2 - r.y * e.viewport.scale
+      }), n = {
+        id: t.pointerId,
+        x: r.x,
+        y: r.y,
+        viewport: {
+          ...e.viewport
+        }
+      }, h.setPointerCapture(t.pointerId));
+    };
+    var m = h;
+    return typeof m == "function" ? A(m, i) : h = i, S((t) => {
+      var r = e.ariaLabel, l = `${c().x} ${c().y} ${c().width} ${c().height}`, x = I(), y = P(), p = C(), $ = -e.viewport.x / e.viewport.scale, b = -e.viewport.y / e.viewport.scale, _ = e.size.width / e.viewport.scale, M = e.size.height / e.viewport.scale;
+      return r !== t.e && d(i, "aria-label", t.e = r), l !== t.t && d(i, "viewBox", t.t = l), x !== t.a && d(o, "d", t.a = x), y !== t.o && d(s, "d", t.o = y), p !== t.i && d(v, "d", t.i = p), $ !== t.n && d(a, "x", t.n = $), b !== t.s && d(a, "y", t.s = b), _ !== t.h && d(a, "width", t.h = _), M !== t.r && d(a, "height", t.r = M), t;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0,
+      r: void 0
+    }), i;
+  })();
+}
+k(["pointerdown", "pointermove", "pointerup", "keydown"]);
+export {
+  R as GraphMinimap
+};

package/dist/components/graph/engine.js

@@ -1,28 +1,34 @@
-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();
+function w() {
+  const t = new Worker(new URL("../../assets/layout-worker-BK6m515B.js", import.meta.url), { type: "module" });
+  let s, u = 0;
+  const o = /* @__PURE__ */ new Map(), n = (e) => {
+    s = e, t.terminate();
+    for (const r of o.values()) r.reject(e);
+    o.clear();
   };
-  return r.addEventListener(
+  return t.addEventListener(
     "error",
     (e) => n(new Error(e.message || "Graph layout worker failed"))
-  ), r.addEventListener(
+  ), t.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));
+  ), t.addEventListener("message", ({ data: e }) => {
+    if (!e || !Number.isInteger(e.id) || !e.error && !e.layout) {
+      n(new Error("Invalid graph layout worker response"));
+      return;
+    }
+    const r = o.get(e.id);
+    r && (o.delete(e.id), e.error ? r.reject(new Error(e.error)) : r.resolve(e.layout));
+  }), {
+    layout(e, r) {
+      return s ? Promise.reject(s) : new Promise((a, l) => {
+        const i = ++u;
+        o.set(i, { resolve: a, reject: l });
+        try {
+          t.postMessage({ id: i, input: e, options: r ?? {} });
+        } catch (p) {
+          o.delete(i), l(p);
+        }
       });
     },
     dispose() {
@@ -31,5 +37,5 @@ function c() {
   };
 }
 export {
-  c as createGraphLayoutEngine
+  w as createGraphLayoutEngine
 };

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

@@ -0,0 +1 @@
+export {};

package/dist/graph.css

@@ -69,6 +69,57 @@
   stroke: var(--graph-edge-active, var(--foreground));
   stroke-width: 3px;
 }
+.floe-graph__minimap {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 4;
+  width: clamp(112px, 20vw, 196px);
+  height: clamp(72px, 12vw, 120px);
+  border: 1px solid var(--border);
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--card) 94%, transparent);
+  box-shadow: 0 3px 14px rgb(0 0 0 / 8%);
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+  overflow: hidden;
+}
+.floe-graph__minimap:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 2px;
+}
+.floe-graph__minimap-nodes {
+  fill: var(--muted-foreground);
+  opacity: 0.65;
+  pointer-events: none;
+}
+.floe-graph__minimap-groups {
+  fill: color-mix(in srgb, var(--primary) 10%, transparent);
+  stroke: var(--muted-foreground);
+  stroke-width: 0.7px;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}
+.floe-graph__minimap-edges {
+  fill: none;
+  stroke: var(--muted-foreground);
+  stroke-width: 0.5px;
+  vector-effect: non-scaling-stroke;
+  opacity: 0.35;
+  pointer-events: none;
+}
+.floe-graph__minimap-viewport {
+  fill: color-mix(in srgb, var(--primary) 12%, transparent);
+  stroke: var(--primary);
+  stroke-width: 1.5px;
+  vector-effect: non-scaling-stroke;
+  cursor: grab;
+}
+.floe-graph__minimap:active,
+.floe-graph__minimap:active .floe-graph__minimap-viewport {
+  cursor: grabbing;
+}
 .floe-graph__node:focus-visible,
 .floe-graph__group:focus-visible {
   outline: 2px solid var(--ring);
@@ -90,6 +141,21 @@
   .floe-graph__group:focus-visible {
     outline-color: Highlight;
   }
+  .floe-graph__minimap {
+    background: Canvas;
+    border-color: CanvasText;
+  }
+  .floe-graph__minimap-nodes {
+    fill: CanvasText;
+  }
+  .floe-graph__minimap-groups,
+  .floe-graph__minimap-edges {
+    stroke: CanvasText;
+  }
+  .floe-graph__minimap-viewport {
+    stroke: Highlight;
+    fill: transparent;
+  }
 }
 
 .floe-graph__edge-label {

package/dist/graph.d.ts

@@ -2,3 +2,4 @@ export * from './components/graph/types';
 export * from './components/graph/geometry';
 export * from './components/graph/engine';
 export * from './components/graph/GraphCanvas';
+export * from './components/graph/GraphMinimap';

package/dist/graph.js

@@ -1,11 +1,13 @@
-import { fitGraphViewport as e, graphEdgeLabelPosition as o, graphRelatedEdges as t, graphSectionPath as p } from "./components/graph/geometry.js";
-import { createGraphLayoutEngine as g } from "./components/graph/engine.js";
+import { fitGraphViewport as e, graphEdgeLabelPosition as o, graphRelatedEdges as p, graphSectionPath as t } from "./components/graph/geometry.js";
+import { createGraphLayoutEngine as i } from "./components/graph/engine.js";
 import { GraphCanvas as n } from "./components/graph/GraphCanvas.js";
+import { GraphMinimap as m } from "./components/graph/GraphMinimap.js";
 export {
   n as GraphCanvas,
-  g as createGraphLayoutEngine,
+  m as GraphMinimap,
+  i as createGraphLayoutEngine,
   e as fitGraphViewport,
   o as graphEdgeLabelPosition,
-  t as graphRelatedEdges,
-  p as graphSectionPath
+  p as graphRelatedEdges,
+  t as graphSectionPath
 };