@floegence/floe-webapp-core 0.86.19 → 0.86.21

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

@@ -1,4 +1,5 @@
 import { type JSX } from 'solid-js';
+import { type GraphMinimapProps } from './GraphMinimap';
 import type { GraphLayout, GraphLayoutNode, GraphObjectEvent, GraphObjectRef, GraphViewport } from './types';
 export interface GraphNodeRenderContext {
     selected: () => boolean;
@@ -22,9 +23,7 @@ export interface GraphCanvasProps {
     /** 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;
-    };
+    minimap?: Pick<GraphMinimapProps, 'ariaLabel' | 'nodeStyle'>;
     class?: string;
 }
 /** Controlled graph surface. Hosts own documents and selection; Floe owns geometry and input. */

package/dist/components/graph/GraphCanvas.js

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

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

@@ -1,4 +1,9 @@
-import type { GraphLayout, GraphViewport } from './types';
+import type { GraphLayout, GraphLayoutNode, GraphViewport } from './types';
+export interface GraphMinimapNodeStyle {
+    /** CSS colors, including theme variables. Omitted colors retain the defaults. */
+    fill?: string;
+    stroke?: string;
+}
 export interface GraphMinimapProps {
     layout: GraphLayout;
     viewport: GraphViewport;
@@ -9,6 +14,8 @@ export interface GraphMinimapProps {
     onViewportChange: (viewport: GraphViewport) => void;
     onInteractionStart?: () => void;
     ariaLabel: string;
+    /** Host appearance over the exact layout. Equal styles share one SVG path. */
+    nodeStyle?: (node: GraphLayoutNode) => GraphMinimapNodeStyle | undefined;
 }
 /** 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

@@ -1,74 +1,127 @@
-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(() => {
+import { insert as k, createComponent as _, effect as g, setAttribute as h, style as C, template as f, use as S, delegateEvents as z } from "solid-js/web";
+import { createMemo as w, For as I } from "solid-js";
+import { graphSectionPath as A, fitGraphViewport as D } from "./geometry.js";
+var L = /* @__PURE__ */ f('<svg class=floe-graph__minimap role=region tabindex=0 preserveAspectRatio="xMidYMid meet"data-floe-canvas-interactive=true><path class=floe-graph__minimap-edges></path><rect class=floe-graph__minimap-viewport>'), V = /* @__PURE__ */ f("<svg><path class=floe-graph__minimap-groups></svg>", !1, !0, !1), E = /* @__PURE__ */ f("<svg><path class=floe-graph__minimap-nodes></svg>", !1, !0, !1);
+function R(i) {
+  let v, s;
+  const u = w(() => {
     const {
-      x: i,
-      y: o,
-      width: s,
-      height: v
-    } = e.layout.bounds, a = Math.max(s, v, 1) * 0.04;
+      x: e,
+      y: l,
+      width: d,
+      height: n
+    } = i.layout.bounds, t = Math.max(d, n, 1) * 0.04;
     return {
-      x: i - a,
-      y: o - a,
-      width: s + a * 2,
-      height: v + a * 2
+      x: e - t,
+      y: l - t,
+      width: d + t * 2,
+      height: n + t * 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));
+  }), m = w(() => {
+    const e = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
+    for (const n of i.layout.nodes) {
+      const t = i.nodeStyle?.(n) ?? {}, o = n.kind === "group" ? e : l, r = JSON.stringify([t.fill ?? null, t.stroke ?? null]);
+      let a = o.get(r);
+      a || (a = {
+        ...t,
+        paths: []
+      }, o.set(r, a)), a.paths.push(`M${n.x},${n.y}h${n.width}v${n.height}h${-n.width}Z`);
+    }
+    const d = (n) => [...n.values()].map(({
+      paths: t,
+      ...o
+    }) => ({
+      ...o,
+      path: t.join("")
+    }));
+    return {
+      groups: d(e),
+      nodes: d(l)
+    };
+  }), p = (e) => ({
+    "--graph-minimap-fill": e.fill,
+    "--graph-minimap-stroke": e.stroke,
+    "--graph-minimap-opacity": e.fill || e.stroke ? "1" : void 0
+  }), P = w(() => i.layout.edges.flatMap((e) => e.sections.map(A)).join(" ")), y = (e) => {
+    const l = v?.getScreenCTM();
+    return l ? new DOMPoint(e.clientX, e.clientY).matrixTransform(l.inverse()) : void 0;
+  }, x = (e) => {
+    s?.id === e.pointerId && (s = void 0, v?.hasPointerCapture(e.pointerId) && v.releasePointerCapture(e.pointerId));
   };
   return (() => {
-    var i = V(), o = i.firstChild, s = o.nextSibling, v = s.nextSibling, a = v.nextSibling;
-    i.$$keydown = (t) => {
-      const l = {
+    var e = L(), l = e.firstChild, d = l.nextSibling;
+    e.$$keydown = (t) => {
+      const r = {
         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
+      !r && t.key !== "Home" || (t.preventDefault(), t.stopPropagation(), i.onInteractionStart?.(), i.onViewportChange(r ? {
+        ...i.viewport,
+        x: i.viewport.x + r[0] * i.size.width * 0.2,
+        y: i.viewport.y + r[1] * i.size.height * 0.2
+      } : D(i.layout.bounds, i.size, 24)));
+    }, e.addEventListener("lostpointercapture", () => {
+      s = void 0;
+    }), e.addEventListener("pointercancel", x), e.$$pointerup = x, e.$$pointermove = (t) => {
+      if (s?.id !== t.pointerId) return;
+      const o = y(t);
+      o && i.onViewportChange({
+        ...s.viewport,
+        x: s.viewport.x - (o.x - s.x) * s.viewport.scale,
+        y: s.viewport.y - (o.y - s.y) * s.viewport.scale
       });
-    }, i.$$pointerdown = (t) => {
+    }, e.$$pointerdown = (t) => {
       if (t.button !== 0) return;
-      const r = u(t);
-      r && (t.preventDefault(), t.stopPropagation(), e.onInteractionStart?.(), h.focus({
+      const o = y(t);
+      o && (t.preventDefault(), t.stopPropagation(), i.onInteractionStart?.(), v.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 = {
+      }), t.target.matches(".floe-graph__minimap-viewport") || i.onViewportChange({
+        ...i.viewport,
+        x: i.size.width / 2 - o.x * i.viewport.scale,
+        y: i.size.height / 2 - o.y * i.viewport.scale
+      }), s = {
         id: t.pointerId,
-        x: r.x,
-        y: r.y,
+        x: o.x,
+        y: o.y,
         viewport: {
-          ...e.viewport
+          ...i.viewport
         }
-      }, h.setPointerCapture(t.pointerId));
+      }, v.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;
+    var n = v;
+    return typeof n == "function" ? S(n, e) : v = e, k(e, _(I, {
+      get each() {
+        return m().groups;
+      },
+      children: (t) => (() => {
+        var o = V();
+        return g((r) => {
+          var a = t.path, c = p(t);
+          return a !== r.e && h(o, "d", r.e = a), r.t = C(o, c, r.t), r;
+        }, {
+          e: void 0,
+          t: void 0
+        }), o;
+      })()
+    }), l), k(e, _(I, {
+      get each() {
+        return m().nodes;
+      },
+      children: (t) => (() => {
+        var o = E();
+        return g((r) => {
+          var a = t.path, c = p(t);
+          return a !== r.e && h(o, "d", r.e = a), r.t = C(o, c, r.t), r;
+        }, {
+          e: void 0,
+          t: void 0
+        }), o;
+      })()
+    }), d), g((t) => {
+      var o = i.ariaLabel, r = `${u().x} ${u().y} ${u().width} ${u().height}`, a = P(), c = -i.viewport.x / i.viewport.scale, $ = -i.viewport.y / i.viewport.scale, b = i.size.width / i.viewport.scale, M = i.size.height / i.viewport.scale;
+      return o !== t.e && h(e, "aria-label", t.e = o), r !== t.t && h(e, "viewBox", t.t = r), a !== t.a && h(l, "d", t.a = a), c !== t.o && h(d, "x", t.o = c), $ !== t.i && h(d, "y", t.i = $), b !== t.n && h(d, "width", t.n = b), M !== t.s && h(d, "height", t.s = M), t;
     }, {
       e: void 0,
       t: void 0,
@@ -76,13 +129,11 @@ function R(e) {
       o: void 0,
       i: void 0,
       n: void 0,
-      s: void 0,
-      h: void 0,
-      r: void 0
-    }), i;
+      s: void 0
+    }), e;
   })();
 }
-k(["pointerdown", "pointermove", "pointerup", "keydown"]);
+z(["pointerdown", "pointermove", "pointerup", "keydown"]);
 export {
   R as GraphMinimap
 };

package/dist/graph.css

@@ -37,8 +37,9 @@
 }
 .floe-graph__edges {
   position: absolute;
-  inset: 0;
-  overflow: visible;
+  /* A visible route may have endpoints far outside the viewport. Clip painting,
+   * not geometry, so its full world bounds do not expand the composited layer. */
+  overflow: hidden;
   z-index: 1;
   pointer-events: none;
 }
@@ -90,13 +91,16 @@
   outline-offset: 2px;
 }
 .floe-graph__minimap-nodes {
-  fill: var(--muted-foreground);
-  opacity: 0.65;
+  fill: var(--graph-minimap-fill, var(--muted-foreground));
+  stroke: var(--graph-minimap-stroke, none);
+  stroke-width: 0.7px;
+  vector-effect: non-scaling-stroke;
+  opacity: var(--graph-minimap-opacity, 0.65);
   pointer-events: none;
 }
 .floe-graph__minimap-groups {
-  fill: color-mix(in srgb, var(--primary) 10%, transparent);
-  stroke: var(--muted-foreground);
+  fill: var(--graph-minimap-fill, color-mix(in srgb, var(--primary) 10%, transparent));
+  stroke: var(--graph-minimap-stroke, var(--muted-foreground));
   stroke-width: 0.7px;
   vector-effect: non-scaling-stroke;
   pointer-events: none;
@@ -147,6 +151,11 @@
   }
   .floe-graph__minimap-nodes {
     fill: CanvasText;
+    stroke: CanvasText;
+    opacity: 1;
+  }
+  .floe-graph__minimap-groups {
+    fill: Canvas;
   }
   .floe-graph__minimap-groups,
   .floe-graph__minimap-edges {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.86.19",
+  "version": "0.86.21",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",