@floegence/floe-webapp-core 0.52.4 → 0.52.6

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

@@ -7,6 +7,8 @@ export interface FloatingWindowProps {
     onOpenChange: (open: boolean) => void;
     /** Window title */
     title?: string;
+    /** Compact actions at the right of the title bar, before the window controls. */
+    headerActions?: JSX.Element;
     /** Window content */
     children: JSX.Element;
     /** Optional footer content */

package/dist/components/ui/FloatingWindow.js

@@ -1,53 +1,53 @@
-import { createComponent as a, Portal as Te, spread as ce, mergeProps as fe, memo as we, insert as g, effect as c, setAttribute as De, addEventListener as m, className as f, template as u, use as We, delegateEvents as Oe } from "solid-js/web";
-import { createUniqueId as He, createSignal as p, onCleanup as L, onMount as Ye, createEffect as b, Show as S, batch as Ne, untrack as Xe } from "solid-js";
-import { cn as M } from "../../utils/cn.js";
-import { useLayout as Ue } from "../../context/LayoutContext.js";
-import { Button as he } from "./Button.js";
-import { Restore as qe, Maximize as Be, X as Ge } from "../icons/index.js";
-import { startHotInteraction as je } from "../../utils/hotInteraction.js";
-import { startPointerSession as Ve } from "./pointerSession.js";
-import { resolveFloatingWindowViewport as ge, normalizeFloatingWindowRect as me, resolveFloatingWindowRect as Ze } from "./floatingWindowGeometry.js";
-import { createFloatingPresence as Je } from "./floatingPresence.js";
+import { createComponent as a, Portal as De, spread as ce, mergeProps as fe, memo as he, insert as c, effect as f, setAttribute as We, addEventListener as m, className as h, template as d, use as Oe, delegateEvents as He } from "solid-js/web";
+import { createUniqueId as Ye, createSignal as p, onCleanup as L, onMount as Ne, createEffect as $, Show as x, batch as Xe, untrack as Ue } from "solid-js";
+import { cn as k } from "../../utils/cn.js";
+import { useLayout as qe } from "../../context/LayoutContext.js";
+import { Button as we } from "./Button.js";
+import { Restore as Be, Maximize as Ge, X as je } from "../icons/index.js";
+import { startHotInteraction as Ve } from "../../utils/hotInteraction.js";
+import { startPointerSession as Ze } from "./pointerSession.js";
+import { resolveFloatingWindowViewport as ge, normalizeFloatingWindowRect as me, resolveFloatingWindowRect as Je } from "./floatingWindowGeometry.js";
+import { createFloatingPresence as Ke } from "./floatingPresence.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as ve } from "./localInteractionSurface.js";
-import { SURFACE_PORTAL_LAYER_ATTR as Ke, SURFACE_FLOATING_LAYER_ATTR as Qe } from "./dialogSurfaceScope.js";
-var et = /* @__PURE__ */ u('<h2 class="text-xs leading-none font-medium truncate select-none">'), tt = /* @__PURE__ */ u('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-border">'), nt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), it = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), ot = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), rt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), lt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), st = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), at = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), dt = /* @__PURE__ */ u("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), ut = /* @__PURE__ */ u('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0 px-2"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="flex-1 overflow-auto p-3">');
+import { SURFACE_PORTAL_LAYER_ATTR as Qe, SURFACE_FLOATING_LAYER_ATTR as et } from "./dialogSurfaceScope.js";
+var tt = /* @__PURE__ */ d('<h2 class="text-xs leading-none font-medium truncate select-none">'), nt = /* @__PURE__ */ d('<div data-floe-floating-window-header-actions=true class="flex shrink-0 cursor-default items-center gap-1"><span aria-hidden=true class="mx-2 h-4 w-px shrink-0 bg-border">'), it = /* @__PURE__ */ d('<div data-floe-floating-window-footer=true class="flex items-center justify-end gap-2 p-3 border-t border-border">'), ot = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), rt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), lt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), at = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), st = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), dt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), ut = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), ct = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), ft = /* @__PURE__ */ d('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0 px-2"></div><div class="flex h-full shrink-0 items-stretch"></div></div><div data-floe-floating-window-content=true class="flex-1 overflow-auto p-3">');
 function St(i) {
-  const B = () => i.resizable ?? !0, G = () => i.draggable ?? !0, k = () => i.minSize ?? {
+  const G = () => i.resizable ?? !0, j = () => i.draggable ?? !0, M = () => i.minSize ?? {
     width: 200,
     height: 150
   }, T = () => i.maxSize ?? {
     width: 1 / 0,
     height: 1 / 0
-  }, x = () => i.viewportInsets ?? {}, pe = () => i.zIndex ?? 100, xe = He(), ze = Ue(), $ = () => ze.isMobile(), D = 16, j = () => `floating-window-${xe}-title`, [W, ye] = p(i.defaultPosition ?? {
+  }, z = () => i.viewportInsets ?? {}, pe = () => i.zIndex ?? 100, xe = Ye(), ze = qe(), _ = () => ze.isMobile(), D = 16, V = () => `floating-window-${xe}-title`, [W, ye] = p(i.defaultPosition ?? {
     x: 0,
     y: 0
   }), [O, be] = p(i.defaultSize ?? {
     width: 400,
     height: 300
-  }), [d, V] = p(!1), [R, Z] = p(!1), [E, J] = p(!1), [Se, H] = p(!1), _ = Je({
+  }), [u, Z] = p(!1), [R, J] = p(!1), [E, K] = p(!1), [$e, H] = p(!1), S = Ke({
     open: () => i.open,
     exitDurationMs: 120
-  }), [$e, _e] = p(null);
-  let K = {
+  }), [_e, Se] = p(null);
+  let Q = {
     x: 0,
     y: 0
-  }, Q = {
+  }, ee = {
     x: 0,
     y: 0,
     width: 0,
     height: 0
-  }, ee = {
+  }, te = {
     x: 0,
     y: 0
-  }, te = {
+  }, ne = {
     x: 0,
     y: 0,
     width: 0,
     height: 0
-  }, ne = "se", l, s = null, C, v = null, I = {
+  }, ie = "se", l, s = null, A, v = null, I = {
     x: 0,
     y: 0
-  }, z = null, A = null, Y = !1, y = {
+  }, y = null, C = null, Y = !1, b = {
     x: i.defaultPosition?.x ?? 0,
     y: i.defaultPosition?.y ?? 0,
     width: i.defaultSize?.width ?? 400,
@@ -64,16 +64,16 @@ function St(i) {
     sw: "nesw-resize"
   }, N = (e, t) => {
     if (!e) {
-      A?.(), A = null;
+      C?.(), C = null;
       return;
     }
-    A?.(), A = je({
+    C?.(), C = Ve({
       kind: v === "resize" ? "resize" : "drag",
       cursor: t,
       lockUserSelect: !0
     });
-  }, ie = (e) => {
-    y = e, l && (l.style.transform = `translate3d(${e.x}px, ${e.y}px, 0)`, l.style.width = `${e.width}px`, l.style.height = `${e.height}px`);
+  }, oe = (e) => {
+    b = e, l && (l.style.transform = `translate3d(${e.x}px, ${e.y}px, 0)`, l.style.width = `${e.width}px`, l.style.height = `${e.height}px`);
   }, X = () => {
     const e = W(), t = O();
     return {
@@ -83,7 +83,7 @@ function St(i) {
       height: t.height
     };
   }, P = (e) => {
-    y = e, ye((t) => t.x === e.x && t.y === e.y ? t : {
+    b = e, ye((t) => t.x === e.x && t.y === e.y ? t : {
       x: e.x,
       y: e.y
     }), be((t) => t.width === e.width && t.height === e.height ? t : {
@@ -101,9 +101,9 @@ function St(i) {
     const t = e instanceof Element ? e : null;
     return t ? t.closest('button, input, select, textarea, a, [role="button"], [tabindex]:not([tabindex="-1"])') === null : !0;
   }, U = (e) => !!l && e instanceof Node && l.contains(e), Ee = (e) => {
-    const r = (e instanceof Element ? e : null)?.closest('[role="menu"]')?.closest(`[${Qe}="true"]`);
+    const r = (e instanceof Element ? e : null)?.closest('[role="menu"]')?.closest(`[${et}="true"]`);
     return !!(r && l?.contains(r));
-  }, Ce = () => {
+  }, Ae = () => {
     if (!l) return null;
     const e = l.getBoundingClientRect();
     return {
@@ -112,23 +112,23 @@ function St(i) {
       width: e.width,
       height: e.height
     };
-  }, oe = () => {
-    i.open && (s === null || v === null || typeof window > "u" || ie(Ze({
+  }, re = () => {
+    i.open && (s === null || v === null || typeof window > "u" || oe(Je({
       mode: v,
       pointer: I,
-      dragStartPos: K,
-      dragStartRect: Q,
-      resizeStartPos: ee,
-      resizeStartRect: te,
-      resizeHandle: ne,
-      minSize: k(),
+      dragStartPos: Q,
+      dragStartRect: ee,
+      resizeStartPos: te,
+      resizeStartRect: ne,
+      resizeHandle: ie,
+      minSize: M(),
       maxSize: T(),
       viewport: {
         width: window.innerWidth,
         height: window.innerHeight
       },
-      viewportInsets: x(),
-      mobile: $(),
+      viewportInsets: z(),
+      mobile: _(),
       mobilePadding: D
     })));
   }, F = (e) => {
@@ -137,32 +137,32 @@ function St(i) {
       width: window.innerWidth,
       height: window.innerHeight
     };
-    if (d()) {
-      P(ge(t, x()));
+    if (u()) {
+      P(ge(t, z()));
       return;
     }
     P(me({
       rect: X(),
-      minSize: k(),
+      minSize: M(),
       maxSize: T(),
       viewport: t,
-      viewportInsets: x(),
-      mobile: $(),
+      viewportInsets: z(),
+      mobile: _(),
       mobilePadding: D,
       center: e?.center ?? !1
     }));
-  }, re = (e) => {
-    z !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(z), z = null), e && oe();
-    const t = e ? Ce() ?? y : null;
-    Ne(() => {
-      t && P(t), s = null, v = null, Z(!1), J(!1);
-    }), N(!1, ""), C = void 0;
+  }, le = (e) => {
+    y !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(y), y = null), e && re();
+    const t = e ? Ae() ?? b : null;
+    Xe(() => {
+      t && P(t), s = null, v = null, J(!1), K(!1);
+    }), N(!1, ""), A = void 0;
   }, q = (e = !1) => {
-    C ? C.stop({
+    A ? A.stop({
       commit: e
-    }) : re(e);
+    }) : le(e);
   };
-  L(() => q(!1)), Ye(() => {
+  L(() => q(!1)), Ne(() => {
     i.open || F({
       center: !i.defaultPosition
     });
@@ -172,9 +172,9 @@ function St(i) {
       });
     };
     window.addEventListener("resize", e), L(() => window.removeEventListener("resize", e));
-  }), b(() => {
+  }), $(() => {
     if (!i.open) return;
-    $();
+    _();
     const e = !Y && !i.defaultPosition, t = () => {
       F({
         center: e
@@ -185,11 +185,11 @@ function St(i) {
       return;
     }
     requestAnimationFrame(t);
-  }), b(() => {
-    !i.open || !Y || s !== null || (x(), Xe(() => F({
+  }), $(() => {
+    !i.open || !Y || s !== null || (z(), Ue(() => F({
       center: !1
     })));
-  }), b(() => {
+  }), $(() => {
     if (!i.open) return;
     const e = (t) => {
       if (t.key !== "Escape") return;
@@ -197,13 +197,13 @@ function St(i) {
       !U(t.target) && !U(o) || Ee(t.target) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), i.onOpenChange(!1));
     };
     document.addEventListener("keydown", e, !0), L(() => document.removeEventListener("keydown", e, !0));
-  }), b(() => {
+  }), $(() => {
     if (!i.open) {
       H(!1), q(!1);
       return;
     }
     H(!0);
-  }), b(() => {
+  }), $(() => {
     if (!i.open) return;
     const e = (r) => {
       H(U(r));
@@ -215,46 +215,46 @@ function St(i) {
     document.addEventListener("pointerdown", t), document.addEventListener("focusin", o), L(() => {
       document.removeEventListener("pointerdown", t), document.removeEventListener("focusin", o);
     });
-  }), b(() => {
+  }), $(() => {
     if (!i.open) return;
     const e = X();
-    s === null ? ie(e) : y = e;
+    s === null ? oe(e) : b = e;
   });
-  const Ae = (e) => {
-    !G() || d() || s !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"]') || (e.preventDefault(), s = e.pointerId, v = "drag", Z(!0), K = {
+  const Ce = (e) => {
+    !j() || u() || s !== null || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"], [data-floe-floating-window-header-actions]') || (e.preventDefault(), s = e.pointerId, v = "drag", J(!0), Q = {
       x: e.clientX,
       y: e.clientY
-    }, Q = {
-      ...y
+    }, ee = {
+      ...b
     }, I = {
       x: e.clientX,
       y: e.clientY
     }, N(!0, "grabbing"), se(e));
   }, w = (e) => (t) => {
-    !B() || d() || s !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), s = t.pointerId, v = "resize", J(!0), ne = e, ee = {
+    !G() || u() || s !== null || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), s = t.pointerId, v = "resize", K(!0), ie = e, te = {
       x: t.clientX,
       y: t.clientY
-    }, te = {
-      ...y
+    }, ne = {
+      ...b
     }, I = {
       x: t.clientX,
       y: t.clientY
     }, N(!0, Ie[e]), se(t));
-  }, le = () => {
-    z = null, oe();
+  }, ae = () => {
+    y = null, re();
   }, Fe = (e) => {
     if (!(s === null || e.pointerId !== s) && v !== null && (I = {
       x: e.clientX,
       y: e.clientY
-    }, z === null)) {
+    }, y === null)) {
       if (typeof requestAnimationFrame > "u") {
-        le();
+        ae();
         return;
       }
-      z = requestAnimationFrame(le);
+      y = requestAnimationFrame(ae);
     }
   }, se = (e) => {
-    C = Ve({
+    A = Ze({
       pointerEvent: e,
       captureEl: l,
       onMove: Fe,
@@ -266,12 +266,12 @@ function St(i) {
         I = {
           x: r.latestClientX,
           y: r.latestClientY
-        }, re(t || o === "pointer_cancel");
+        }, le(t || o === "pointer_cancel");
       }
     });
-  }, ae = () => {
-    if (s !== null && q(!0), d()) {
-      const t = $e();
+  }, de = () => {
+    if (s !== null && q(!0), u()) {
+      const t = _e();
       t && P(me({
         rect: {
           x: t.position.x,
@@ -279,21 +279,21 @@ function St(i) {
           width: t.size.width,
           height: t.size.height
         },
-        minSize: k(),
+        minSize: M(),
         maxSize: T(),
         viewport: {
           width: window.innerWidth,
           height: window.innerHeight
         },
-        viewportInsets: x(),
-        mobile: $(),
+        viewportInsets: z(),
+        mobile: _(),
         mobilePadding: D,
         center: !1
-      })), V(!1);
+      })), Z(!1);
       return;
     }
     const e = X();
-    _e({
+    Se({
       position: {
         x: e.x,
         y: e.y
@@ -305,12 +305,12 @@ function St(i) {
     }), P(ge({
       width: window.innerWidth,
       height: window.innerHeight
-    }, x())), V(!0);
+    }, z())), Z(!0);
   }, Le = (e) => {
-    e.target?.closest("button") || ae();
-  }, Me = (e) => {
+    e.target?.closest("button, [data-floe-floating-window-header-actions]") || de();
+  }, ke = (e) => {
     Re(e.target) && Pe();
-  }, h = (e) => M("absolute z-10", {
+  }, g = (e) => k("absolute z-10", {
     n: "cursor-ns-resize top-0 left-2 right-2 h-1",
     s: "cursor-ns-resize bottom-0 left-2 right-2 h-1",
     e: "cursor-ew-resize right-0 top-2 bottom-2 w-1",
@@ -320,26 +320,26 @@ function St(i) {
     se: "cursor-nwse-resize bottom-0 right-0 w-2 h-2",
     sw: "cursor-nesw-resize bottom-0 left-0 w-2 h-2"
   }[e]);
-  return a(S, {
+  return a(x, {
     get when() {
-      return _.mounted();
+      return S.mounted();
     },
     get children() {
-      return a(Te, {
+      return a(De, {
         get children() {
-          var e = ut(), t = e.firstChild, o = t.firstChild, r = o.firstChild, de = r.nextSibling, ke = o.nextSibling, ue = l;
-          return typeof ue == "function" ? We(ue, e) : l = e, ce(e, fe({
+          var e = ft(), t = e.firstChild, o = t.firstChild, r = o.firstChild, B = r.nextSibling, Me = o.nextSibling, ue = l;
+          return typeof ue == "function" ? Oe(ue, e) : l = e, ce(e, fe({
             get "data-floating-presence"() {
-              return _.state();
+              return S.state();
             },
             get "aria-hidden"() {
-              return _.exiting() ? "true" : void 0;
+              return S.exiting() ? "true" : void 0;
             }
           }, {
             [ve]: "true"
           }, {
             get class() {
-              return M("fixed left-0 top-0 z-[100] flex flex-col", (R() || E()) && "select-none", _.exiting() && "pointer-events-none");
+              return k("fixed left-0 top-0 z-[100] flex flex-col", (R() || E()) && "select-none", S.exiting() && "pointer-events-none");
             },
             get style() {
               return {
@@ -352,12 +352,12 @@ function St(i) {
             },
             role: "dialog",
             get "aria-labelledby"() {
-              return we(() => !!i.title)() ? j() : void 0;
+              return he(() => !!i.title)() ? V() : void 0;
             },
             tabIndex: -1,
-            onPointerDown: Me
+            onPointerDown: ke
           }), !1, !0), ce(t, fe({
-            [Ke]: "true"
+            [Qe]: "true"
           }, {
             "data-floe-floating-window-surface": "true",
             "data-floe-surface": "floating",
@@ -365,59 +365,67 @@ function St(i) {
               return R() || E() ? "true" : void 0;
             },
             get "data-floe-floating-window-state"() {
-              return Se() ? "active" : "inactive";
+              return $e() ? "active" : "inactive";
             }
           }, {
             [ve]: "true"
           }, {
             get class() {
-              return M("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "floe-floating-presence floe-floating-window-motion", (R() || E()) && "floe-floating-presence--suspended", d() && "rounded-none", i.class);
+              return k("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "floe-floating-presence floe-floating-window-motion", (R() || E()) && "floe-floating-presence--suspended", u() && "rounded-none", i.class);
             },
             get style() {
               return {
-                "border-radius": d() ? "0" : "10px"
+                "border-radius": u() ? "0" : "10px"
               };
             },
             get "data-floating-presence"() {
-              return _.state();
+              return S.state();
             }
-          }), !1, !0), o.$$dblclick = Le, o.$$pointerdown = Ae, g(r, a(S, {
+          }), !1, !0), o.$$dblclick = Le, o.$$pointerdown = Ce, c(r, a(x, {
             get when() {
               return i.title;
             },
             get children() {
-              var n = et();
-              return g(n, () => i.title), c(() => De(n, "id", j())), n;
+              var n = tt();
+              return c(n, () => i.title), f(() => We(n, "id", V())), n;
+            }
+          })), c(o, a(x, {
+            get when() {
+              return i.headerActions;
+            },
+            get children() {
+              var n = nt(), Te = n.firstChild;
+              return c(n, () => i.headerActions, Te), n;
             }
-          })), g(de, a(he, {
+          }), B), c(B, a(we, {
             variant: "ghost",
             size: "icon",
             "data-floe-floating-window-control": "maximize",
             class: "h-full w-9 shrink-0 rounded-none border-0 px-0 active:scale-100",
             onClick: (n) => {
-              n.stopPropagation(), ae();
+              n.stopPropagation(), de();
             },
             get "aria-label"() {
-              return d() ? "Restore" : "Maximize";
+              return u() ? "Restore" : "Maximize";
             },
             get children() {
-              return a(S, {
+              return a(x, {
                 get when() {
-                  return d();
+                  return u();
                 },
                 get fallback() {
-                  return a(Be, {
+                  return a(Ge, {
                     class: "w-3 h-3"
                   });
                 },
                 get children() {
-                  return a(qe, {
+                  return a(Be, {
                     class: "w-3 h-3"
                   });
                 }
               });
             }
-          }), null), g(de, a(he, {
+          }), null), c(B, a(we, {
             variant: "ghost-destructive",
             size: "icon",
             "data-floe-floating-window-control": "close",
@@ -427,63 +435,63 @@ function St(i) {
             },
             "aria-label": "Close",
             get children() {
-              return a(Ge, {
+              return a(je, {
                 class: "w-3.5 h-3.5"
               });
             }
-          }), null), g(ke, () => i.children), g(t, a(S, {
+          }), null), c(Me, () => i.children), c(t, a(x, {
             get when() {
               return i.footer;
             },
             get children() {
-              var n = tt();
-              return g(n, () => i.footer), n;
+              var n = it();
+              return c(n, () => i.footer), n;
             }
-          }), null), g(t, a(S, {
+          }), null), c(t, a(x, {
             get when() {
-              return we(() => !!B())() && !d();
+              return he(() => !!G())() && !u();
             },
             get children() {
               return [(() => {
-                var n = nt();
-                return m(n, "pointerdown", w("n"), !0), c(() => f(n, h("n"))), n;
+                var n = ot();
+                return m(n, "pointerdown", w("n"), !0), f(() => h(n, g("n"))), n;
               })(), (() => {
-                var n = it();
-                return m(n, "pointerdown", w("s"), !0), c(() => f(n, h("s"))), n;
-              })(), a(S, {
+                var n = rt();
+                return m(n, "pointerdown", w("s"), !0), f(() => h(n, g("s"))), n;
+              })(), a(x, {
                 get when() {
-                  return !$();
+                  return !_();
                 },
                 get children() {
                   return [(() => {
-                    var n = ot();
-                    return m(n, "pointerdown", w("e"), !0), c(() => f(n, h("e"))), n;
-                  })(), (() => {
-                    var n = rt();
-                    return m(n, "pointerdown", w("w"), !0), c(() => f(n, h("w"))), n;
-                  })(), (() => {
                     var n = lt();
-                    return m(n, "pointerdown", w("ne"), !0), c(() => f(n, h("ne"))), n;
-                  })(), (() => {
-                    var n = st();
-                    return m(n, "pointerdown", w("nw"), !0), c(() => f(n, h("nw"))), n;
+                    return m(n, "pointerdown", w("e"), !0), f(() => h(n, g("e"))), n;
                   })(), (() => {
                     var n = at();
-                    return m(n, "pointerdown", w("se"), !0), c(() => f(n, h("se"))), n;
+                    return m(n, "pointerdown", w("w"), !0), f(() => h(n, g("w"))), n;
+                  })(), (() => {
+                    var n = st();
+                    return m(n, "pointerdown", w("ne"), !0), f(() => h(n, g("ne"))), n;
                   })(), (() => {
                     var n = dt();
-                    return m(n, "pointerdown", w("sw"), !0), c(() => f(n, h("sw"))), n;
+                    return m(n, "pointerdown", w("nw"), !0), f(() => h(n, g("nw"))), n;
+                  })(), (() => {
+                    var n = ut();
+                    return m(n, "pointerdown", w("se"), !0), f(() => h(n, g("se"))), n;
+                  })(), (() => {
+                    var n = ct();
+                    return m(n, "pointerdown", w("sw"), !0), f(() => h(n, g("sw"))), n;
                   })()];
                 }
               })];
             }
-          }), null), c(() => f(o, M("flex shrink-0 items-center justify-between h-8", "border-b", d() ? "rounded-none" : "rounded-t-md", G() && !d() && "cursor-move"))), e;
+          }), null), f(() => h(o, k("flex shrink-0 items-center justify-between h-8", "border-b", u() ? "rounded-none" : "rounded-t-md", j() && !u() && "cursor-move"))), e;
         }
       });
     }
   });
 }
-Oe(["pointerdown", "dblclick"]);
+He(["pointerdown", "dblclick"]);
 export {
   St as FloatingWindow
 };

package/dist/components/workbench/WorkbenchFilterBar.d.ts

@@ -8,6 +8,8 @@ export interface WorkbenchFilterBarProps {
     widgets: readonly WorkbenchWidgetItem[];
     filters: Record<string, boolean>;
     mode?: WorkbenchInteractionMode;
+    /** Optional artwork shared by the mode trigger and menu; omitted entries use the built-in icons. */
+    modeIcons?: WorkbenchDockModeIcons;
     /** Changes built-in Dock clicks without affecting drag-to-create behavior. */
     activationMode?: WorkbenchDockItemActivationMode;
     /** Solo a single dock component in the supplied mode scope; soloing it again shows the full scope. */
@@ -44,6 +46,9 @@ export type WorkbenchDockItemPresentation = Readonly<{
     currentIndex: number | null;
     active: boolean;
 }>;
+export type WorkbenchDockModeIcons = Readonly<Partial<Record<'work' | 'background', Component<{
+    class?: string;
+}>>>>;
 export type WorkbenchDockAction = Readonly<{
     id: string;
     label: string;

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,5 +1,5 @@
-import { insert as m, createComponent as l, effect as K, setAttribute as I, memo as B, className as Ke, template as A, addEventListener as Ce, Portal as We, setStyleProperty as Ne, use as Ve, delegateEvents as Ge } from "solid-js/web";
-import { createSignal as le, onCleanup as p, createEffect as ee, createMemo as F, Show as R, For as te, Index as Ue } from "solid-js";
+import { insert as h, createComponent as l, effect as K, setAttribute as L, memo as B, className as Ke, template as $, addEventListener as Ce, Portal as We, setStyleProperty as Ne, use as Ve, delegateEvents as Ge } from "solid-js/web";
+import { createSignal as de, onCleanup as p, createEffect as ee, createMemo as A, Show as R, For as te, Index as Ue } from "solid-js";
 import { Motion as W } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
 import { easing as N, duration as V } from "../../utils/animations.js";
 import { Plus as qe } from "../icons/index.js";
@@ -9,10 +9,10 @@ import { clientToCanvasWorld as Je } from "../ui/canvasGeometry.js";
 import { isBarItemContextMenuKey as Qe, keyboardBarItemContextMenuRequest as Ze } from "../layout/barItemContextMenu.js";
 import { createWorkbenchWidgetFrame as pe } from "./workbenchHelpers.js";
 import { getWidgetEntry as et } from "./widgets/widgetRegistry.js";
-import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as Le, frameFromElement as Ie, createWorkbenchEdgeAutoPanController as tt } from "./workbenchEdgeAutoPan.js";
+import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as Ie, frameFromElement as Le, createWorkbenchEdgeAutoPanController as tt } from "./workbenchEdgeAutoPan.js";
 import { DockLayoutDashboard as nt, DockLayers as ot, DockRegion as rt, DockText as it, DockMessageSquare as at } from "../icons/DockIcons.js";
-var ct = /* @__PURE__ */ A("<button type=button class=workbench-dock__item>"), lt = /* @__PURE__ */ A('<button type=button class="workbench-dock__item workbench-dock__action">'), dt = /* @__PURE__ */ A("<span class=workbench-dock__external-placeholder aria-hidden=true>"), st = /* @__PURE__ */ A('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), ut = /* @__PURE__ */ A("<span class=workbench-dock__divider aria-hidden=true>"), gt = /* @__PURE__ */ A('<div data-floe-canvas-interactive=true><div class=workbench-dock__mode-switcher><button type=button class="workbench-dock__item workbench-dock__mode-trigger"aria-label="Switch canvas mode"aria-haspopup=menu></button></div><span class=workbench-dock__divider aria-hidden=true>'), vt = /* @__PURE__ */ A("<button type=button class=workbench-dock__mode-option role=menuitemradio><span class=workbench-dock__mode-option-icon></span><span class=workbench-dock__mode-option-copy><span class=workbench-dock__mode-option-label></span><span class=workbench-dock__mode-option-description>"), ft = /* @__PURE__ */ A("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
-const Pe = 5, kt = 1e3, ht = ".workbench-dock", de = [{
+var ct = /* @__PURE__ */ $("<button type=button class=workbench-dock__item>"), lt = /* @__PURE__ */ $('<button type=button class="workbench-dock__item workbench-dock__action">'), dt = /* @__PURE__ */ $("<span class=workbench-dock__external-placeholder aria-hidden=true>"), st = /* @__PURE__ */ $('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), ut = /* @__PURE__ */ $("<span class=workbench-dock__divider aria-hidden=true>"), gt = /* @__PURE__ */ $('<div data-floe-canvas-interactive=true><div class=workbench-dock__mode-switcher><button type=button class="workbench-dock__item workbench-dock__mode-trigger"aria-label="Switch canvas mode"aria-haspopup=menu></button></div><span class=workbench-dock__divider aria-hidden=true>'), vt = /* @__PURE__ */ $("<button type=button class=workbench-dock__mode-option role=menuitemradio><span class=workbench-dock__mode-option-icon></span><span class=workbench-dock__mode-option-copy><span class=workbench-dock__mode-option-label></span><span class=workbench-dock__mode-option-description>"), ft = /* @__PURE__ */ $("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
+const Pe = 5, kt = 1e3, mt = ".workbench-dock", ht = [{
   mode: "work",
   label: "Work Mode",
   description: "Operate windows and sticky notes",
@@ -22,11 +22,11 @@ const Pe = 5, kt = 1e3, ht = ".workbench-dock", de = [{
   label: "Composition Mode",
   description: "Arrange regions and canvas text",
   icon: ot
-}], mt = [{
+}], wt = [{
   tool: "sticky-note",
   label: "Sticky",
   icon: at
-}], wt = [{
+}], bt = [{
   tool: "background-region",
   label: "Region",
   icon: rt
@@ -35,20 +35,20 @@ const Pe = 5, kt = 1e3, ht = ".workbench-dock", de = [{
   label: "Text",
   icon: it
 }];
-function bt(e) {
-  const a = e?.closest(".workbench-surface")?.querySelector(Le);
-  return a instanceof HTMLElement ? Ie(a) : null;
+function _t(e) {
+  const a = e?.closest(".workbench-surface")?.querySelector(Ie);
+  return a instanceof HTMLElement ? Le(a) : null;
 }
 function ue(e, v, a) {
   return e >= a.left && e <= a.right && v >= a.top && v <= a.bottom;
 }
-function _t(e, v, a) {
+function Dt(e, v, a) {
   return a ? ue(e, v, a) : !1;
 }
 function xe(e, v, a) {
   return Math.min(a, Math.max(v, e));
 }
-function Dt(e, v, a, c, d) {
+function Et(e, v, a, c, d) {
   if (!e) return !1;
   if (ue(v, a, e) || ue(c, d, e))
     return !0;
@@ -64,7 +64,7 @@ function Dt(e, v, a, c, d) {
 function Me(e, v, a) {
   if (!a || typeof document.elementFromPoint != "function") return !1;
   const c = document.elementFromPoint(e, v);
-  return c instanceof Element && c.closest(ht) === a;
+  return c instanceof Element && c.closest(mt) === a;
 }
 function se(e) {
   const v = () => e.hoverOffset === -1 ? {
@@ -102,7 +102,7 @@ function se(e) {
   };
   return (() => {
     var r = ct();
-    return r.$$keydown = s, r.$$contextmenu = d, r.$$click = P, r.$$pointerdown = c, r.addEventListener("pointerleave", () => e.onLeave()), r.addEventListener("pointerenter", () => e.onEnter()), m(r, l(W.span, {
+    return r.$$keydown = s, r.$$contextmenu = d, r.$$click = P, r.$$pointerdown = c, r.addEventListener("pointerleave", () => e.onLeave()), r.addEventListener("pointerenter", () => e.onEnter()), h(r, l(W.span, {
       class: "workbench-dock__tile",
       get animate() {
         return v();
@@ -121,7 +121,7 @@ function se(e) {
           });
         })();
       }
-    }), null), m(r, l(W.span, {
+    }), null), h(r, l(W.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
@@ -139,8 +139,8 @@ function se(e) {
         return B(() => e.activationMode === "focus-cycle")() ? b() : e.label;
       }
     }), null), K((i) => {
-      var D = e.kind === "host" ? e.id : void 0, x = e.kind === "widget" || e.kind === "tool" ? e.id : void 0, f = !!e.active, M = !!(e.filterable && !e.visible), $ = !!a(), z = !!e.isDragging, X = e.activationMode === "focus-cycle" && e.presentation ? b() : e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, j = e.activationMode === "focus-cycle" ? e.presentation?.active : e.active, Y = e.onContextMenu ? "menu" : void 0;
-      return D !== i.e && I(r, "data-workbench-dock-item", i.e = D), x !== i.t && I(r, "data-workbench-dock-component", i.t = x), f !== i.a && r.classList.toggle("is-active", i.a = f), M !== i.o && r.classList.toggle("is-filter-muted", i.o = M), $ !== i.i && r.classList.toggle("is-hovered", i.i = $), z !== i.n && r.classList.toggle("is-source-dragging", i.n = z), X !== i.s && I(r, "aria-label", i.s = X), j !== i.h && I(r, "aria-pressed", i.h = j), Y !== i.r && I(r, "aria-haspopup", i.r = Y), i;
+      var D = e.kind === "host" ? e.id : void 0, x = e.kind === "widget" || e.kind === "tool" ? e.id : void 0, f = !!e.active, M = !!(e.filterable && !e.visible), X = !!a(), z = !!e.isDragging, Y = e.activationMode === "focus-cycle" && e.presentation ? b() : e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, j = e.activationMode === "focus-cycle" ? e.presentation?.active : e.active, F = e.onContextMenu ? "menu" : void 0;
+      return D !== i.e && L(r, "data-workbench-dock-item", i.e = D), x !== i.t && L(r, "data-workbench-dock-component", i.t = x), f !== i.a && r.classList.toggle("is-active", i.a = f), M !== i.o && r.classList.toggle("is-filter-muted", i.o = M), X !== i.i && r.classList.toggle("is-hovered", i.i = X), z !== i.n && r.classList.toggle("is-source-dragging", i.n = z), Y !== i.s && L(r, "aria-label", i.s = Y), j !== i.h && L(r, "aria-pressed", i.h = j), F !== i.r && L(r, "aria-haspopup", i.r = F), i;
     }, {
       e: void 0,
       t: void 0,
@@ -154,7 +154,7 @@ function se(e) {
     }), r;
   })();
 }
-function Et(e) {
+function Ct(e) {
   const v = () => e.hoverOffset === -1, a = () => ({
     scale: 1,
     y: 0,
@@ -162,7 +162,7 @@ function Et(e) {
   }), c = e.action.icon;
   return (() => {
     var d = lt();
-    return d.$$click = (s) => e.onActivate(s.currentTarget), d.addEventListener("dragstart", (s) => s.preventDefault()), Ce(d, "pointerleave", e.onLeave), Ce(d, "pointerenter", e.onEnter), I(d, "draggable", !1), m(d, l(W.span, {
+    return d.$$click = (s) => e.onActivate(s.currentTarget), d.addEventListener("dragstart", (s) => s.preventDefault()), Ce(d, "pointerleave", e.onLeave), Ce(d, "pointerenter", e.onEnter), L(d, "draggable", !1), h(d, l(W.span, {
       class: "workbench-dock__tile",
       get animate() {
         return a();
@@ -178,7 +178,7 @@ function Et(e) {
           class: "workbench-dock__icon"
         });
       }
-    }), null), m(d, l(W.span, {
+    }), null), h(d, l(W.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
@@ -197,7 +197,7 @@ function Et(e) {
       }
     }), null), K((s) => {
       var P = e.action.id, b = !!e.action.active, r = !!v(), i = e.action.label, D = e.action.active;
-      return P !== s.e && I(d, "data-workbench-dock-action", s.e = P), b !== s.t && d.classList.toggle("is-active", s.t = b), r !== s.a && d.classList.toggle("is-hovered", s.a = r), i !== s.o && I(d, "aria-label", s.o = i), D !== s.i && I(d, "aria-pressed", s.i = D), s;
+      return P !== s.e && L(d, "data-workbench-dock-action", s.e = P), b !== s.t && d.classList.toggle("is-active", s.t = b), r !== s.a && d.classList.toggle("is-hovered", s.a = r), i !== s.o && L(d, "aria-label", s.o = i), D !== s.i && L(d, "aria-pressed", s.i = D), s;
     }, {
       e: void 0,
       t: void 0,
@@ -207,8 +207,8 @@ function Et(e) {
     }), d;
   })();
 }
-function Ft(e) {
-  const [v, a] = le(null), [c, d] = le(null), [s, P] = le(!1);
+function Bt(e) {
+  const [v, a] = de(null), [c, d] = de(null), [s, P] = de(!1);
   let b, r, i, D, x = null;
   const f = () => e.activationMode === "focus-cycle" ? "focus-cycle" : "solo-filter";
   p(() => {
@@ -240,13 +240,13 @@ function Ft(e) {
   const M = (t) => {
     const n = v();
     return n === null || n <= G().length ? 0 : n === t ? -1 : n === t + 1 ? -2 : n === t - 1 ? 1 : 0;
-  }, $ = () => {
+  }, X = () => {
     D?.stop(), D = void 0, x = null;
   }, z = () => {
     !e.viewport || !e.onViewportCommit || (x = e.viewport, D?.stop(), D = tt({
       readFrame: () => {
-        const n = b?.closest(".workbench-surface")?.querySelector(Le);
-        return n instanceof HTMLElement ? Ie(n) : null;
+        const n = b?.closest(".workbench-surface")?.querySelector(Ie);
+        return n instanceof HTMLElement ? Le(n) : null;
       },
       readViewport: () => x ?? e.viewport ?? null,
       commitViewport: (t) => {
@@ -258,7 +258,7 @@ function Ft(e) {
         return !!(t?.moved && t.hasEnteredCanvas && !Me(t.clientX, t.clientY, b));
       }
     }));
-  }, X = (t, n, k, E) => {
+  }, Y = (t, n, k, E) => {
     if (e.onDockActivation?.({
       kind: t,
       id: String(n)
@@ -267,15 +267,15 @@ function Ft(e) {
       e.dockItems?.find((o) => o.id === n)?.onActivate?.(E);
       return;
     }
-    const L = {
+    const I = {
       kind: t,
       id: n,
       label: k,
       trigger: E
     };
-    if (!e.onItemClick?.(L)) {
+    if (!e.onItemClick?.(I)) {
       if (f() === "focus-cycle") {
-        e.onFocusCycleItem?.(L);
+        e.onFocusCycleItem?.(I);
         return;
       }
       y() !== "background" && e.onSoloFilter(String(n), ke());
@@ -284,9 +284,9 @@ function Ft(e) {
     const n = c();
     if (!n) return;
     const k = !n.moved, E = x ?? e.viewport;
-    if (n.stopInteraction(), $(), d(null), r = void 0, n.kind === "external" && n.moved && i?.expire(), k) {
+    if (n.stopInteraction(), X(), d(null), r = void 0, n.kind === "external" && n.moved && i?.expire(), k) {
       if (n.kind === "external" || !(n.trigger instanceof HTMLButtonElement)) return;
-      X(n.kind, n.id, n.label, n.trigger);
+      Y(n.kind, n.id, n.label, n.trigger);
       return;
     }
     if (t && n.overDock && n.dockDrop) {
@@ -294,29 +294,29 @@ function Ft(e) {
       return;
     }
     if (t && n.overCanvas && n.canvasPlacement) {
-      const L = n.canvasFrame && E ? Je(n.canvasFrame, E, {
+      const I = n.canvasFrame && E ? Je(n.canvasFrame, E, {
         clientX: n.clientX,
         clientY: n.clientY
       }) : null, o = n.canvasFrame ? {
         dropAllowed: n.overCanvas,
         canvasFrame: n.canvasFrame,
-        ...L ? {
-          worldPoint: L
+        ...I ? {
+          worldPoint: I
         } : {}
       } : void 0;
       n.canvasPlacement.onDrop(n.clientX, n.clientY, o);
     }
-  }, Y = (t, n, k, E, L, o, _, w, u = "before-components") => {
+  }, F = (t, n, k, E, I, o, _, w, u = "before-components") => {
     t.preventDefault(), r?.stop({
       reason: "manual_stop",
       commit: !1
     }), z();
-    const C = bt(b);
+    const C = _t(b);
     d({
       kind: n,
       id: k,
       label: E,
-      icon: L,
+      icon: I,
       pointerId: t.pointerId,
       startClientX: t.clientX,
       startClientY: t.clientY,
@@ -339,38 +339,38 @@ function Ft(e) {
     });
     const T = (g) => {
       let O = !1;
-      d((h) => {
-        if (!h || h.pointerId !== g.pointerId) return h;
-        const J = g.clientX - h.startClientX, Q = g.clientY - h.startClientY, H = h.moved || Math.abs(J) > Pe || Math.abs(Q) > Pe;
-        if (h.kind === "external" && H && !h.moved) {
+      d((m) => {
+        if (!m || m.pointerId !== g.pointerId) return m;
+        const J = g.clientX - m.startClientX, Q = g.clientY - m.startClientY, H = m.moved || Math.abs(J) > Pe || Math.abs(Q) > Pe;
+        if (m.kind === "external" && H && !m.moved) {
           let U;
           const q = () => {
-            U !== void 0 && window.clearTimeout(U), h.trigger.removeEventListener("click", _e, !0), window.removeEventListener("pointerdown", De, !0), i?.clear === q && (i = void 0);
+            U !== void 0 && window.clearTimeout(U), m.trigger.removeEventListener("click", _e, !0), window.removeEventListener("pointerdown", De, !0), i?.clear === q && (i = void 0);
           }, _e = (Ee) => {
             Ee.preventDefault(), Ee.stopImmediatePropagation(), q();
           }, De = () => q(), He = () => {
             U !== void 0 && window.clearTimeout(U), U = window.setTimeout(q, kt);
           };
-          h.trigger.addEventListener("click", _e, !0), window.addEventListener("pointerdown", De, !0), i = {
+          m.trigger.addEventListener("click", _e, !0), window.addEventListener("pointerdown", De, !0), i = {
             clear: q,
             expire: He
           };
         }
-        const Z = Me(g.clientX, g.clientY, b), S = h.canvasFrame, me = H && _t(g.clientX, g.clientY, S), we = me && !Z, Fe = H && !Z && Dt(S, h.clientX, h.clientY, g.clientX, g.clientY), be = h.hasEnteredCanvas || me || Fe;
+        const Z = Me(g.clientX, g.clientY, b), S = m.canvasFrame, he = H && Dt(g.clientX, g.clientY, S), we = he && !Z, Fe = H && !Z && Et(S, m.clientX, m.clientY, g.clientX, g.clientY), be = m.hasEnteredCanvas || he || Fe;
         O = H && be && !Z;
         const Be = S ? xe(g.clientX, S.left, S.right) : g.clientX, Re = S ? xe(g.clientY, S.top, S.bottom) : g.clientY;
         return {
-          ...h,
+          ...m,
           clientX: g.clientX,
           clientY: g.clientY,
           moved: H,
           overDock: Z,
           overCanvas: we,
           hasEnteredCanvas: be,
-          preview: H && S && h.canvasPlacement?.preview ? {
-            kind: h.canvasPlacement.preview.kind,
-            id: h.canvasPlacement.preview.id,
-            label: h.label,
+          preview: H && S && m.canvasPlacement?.preview ? {
+            kind: m.canvasPlacement.preview.kind,
+            id: m.canvasPlacement.preview.id,
+            label: m.label,
             clientX: Be,
             clientY: Re,
             dropAllowed: we,
@@ -401,11 +401,11 @@ function Ft(e) {
     },
     onDrop: (n, k, E) => {
       if (!E?.worldPoint) return;
-      const L = et(t.widgetType, e.widgetDefinitions);
+      const I = et(t.widgetType, e.widgetDefinitions);
       t.onDrop({
         widgetType: t.widgetType,
         centerWorld: E.worldPoint,
-        frame: pe(L, {
+        frame: pe(I, {
           anchor: "center",
           worldX: E.worldPoint.worldX,
           worldY: E.worldPoint.worldY
@@ -413,19 +413,22 @@ function Ft(e) {
       });
     }
   } : null, ye = (t, n) => {
-    t.button !== 0 || !(t.currentTarget instanceof HTMLElement) || (i?.clear(), i = void 0, Y(t, "external", n.id, n.label, n.icon, t.currentTarget, ne(n.canvasPlacement), n.onDropToDock ?? null, n.dockPlacement ?? "before-components"));
+    t.button !== 0 || !(t.currentTarget instanceof HTMLElement) || (i?.clear(), i = void 0, F(t, "external", n.id, n.label, n.icon, t.currentTarget, ne(n.canvasPlacement), n.onDropToDock ?? null, n.dockPlacement ?? "before-components"));
   };
   ee(() => {
     e.registerExternalDockDragController?.({
       begin: ye
     }), p(() => e.registerExternalDockDragController?.(null));
   });
-  const Se = () => c()?.kind === "widget" ? c().id : null, Te = () => c()?.kind === "tool" ? c().id : null, Oe = () => c()?.kind === "external" ? c()?.icon : void 0, y = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", ge = F(() => de.find((t) => t.mode === y()) ?? de[0]), oe = F(() => y() === "background" ? wt.map((t) => ({
+  const Se = () => c()?.kind === "widget" ? c().id : null, Te = () => c()?.kind === "tool" ? c().id : null, Oe = () => c()?.kind === "external" ? c()?.icon : void 0, y = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", oe = A(() => ht.map((t) => ({
+    ...t,
+    icon: e.modeIcons?.[t.mode] ?? t.icon
+  }))), ge = A(() => oe().find((t) => t.mode === y()) ?? oe()[0]), re = A(() => y() === "background" ? bt.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
     icon: t.icon
-  })) : [...mt.map((t) => ({
+  })) : [...wt.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
@@ -435,24 +438,24 @@ function Ft(e) {
     kind: "widget",
     label: t.label,
     icon: t.icon
-  }))]), ve = F(() => y() === "background" ? [] : [...e.dockItems ?? []]), re = F(() => ve().filter((t) => t.dockPlacement !== "after-components")), fe = F(() => ve().filter((t) => t.dockPlacement === "after-components")), G = F(() => y() === "background" ? [] : [...e.dockActions ?? []]), ke = F(() => oe().map((t) => String(t.id))), ie = () => y() !== "background", Ae = (t) => !ie() || e.filters[t] !== !1, $e = (t) => {
-    if (!ie())
+  }))]), ve = A(() => y() === "background" ? [] : [...e.dockItems ?? []]), ie = A(() => ve().filter((t) => t.dockPlacement !== "after-components")), fe = A(() => ve().filter((t) => t.dockPlacement === "after-components")), G = A(() => y() === "background" ? [] : [...e.dockActions ?? []]), ke = A(() => re().map((t) => String(t.id))), ae = () => y() !== "background", Ae = (t) => !ae() || e.filters[t] !== !1, $e = (t) => {
+    if (!ae())
       return !1;
     const n = ke();
     return n.length > 1 && n.every((k) => e.filters[k] !== !1 == (k === t));
   }, Xe = (t, n) => f() === "focus-cycle" ? e.resolveItemPresentation?.({
     kind: t,
     id: n
-  }) : void 0, ae = () => v() === 0, Ye = () => ({
+  }) : void 0, ce = () => v() === 0, Ye = () => ({
     scale: 1,
     y: 0,
     x: 0
-  }), ce = (t) => {
+  }), le = (t) => {
     const n = c();
     return !!(n?.kind === "external" && n.moved && n.dockPlacement === t);
-  }, he = () => (() => {
+  }, me = () => (() => {
     var t = dt();
-    return m(t, l(R, {
+    return h(t, l(R, {
       get when() {
         return Oe();
       },
@@ -467,13 +470,13 @@ function Ft(e) {
   return [(() => {
     var t = gt(), n = t.firstChild, k = n.firstChild, E = n.nextSibling;
     t.addEventListener("pointerleave", () => a(null));
-    var L = b;
-    return typeof L == "function" ? Ve(L, t) : b = t, k.$$click = () => {
+    var I = b;
+    return typeof I == "function" ? Ve(I, t) : b = t, k.$$click = () => {
       e.onDockActivation?.({
         kind: "mode",
         id: y()
       }), P((o) => !o);
-    }, k.addEventListener("pointerleave", () => a((o) => o === 0 ? null : o)), k.addEventListener("pointerenter", () => a(0)), m(k, l(W.span, {
+    }, k.addEventListener("pointerleave", () => a((o) => o === 0 ? null : o)), k.addEventListener("pointerenter", () => a(0)), h(k, l(W.span, {
       class: "workbench-dock__tile",
       get animate() {
         return Ye();
@@ -492,12 +495,12 @@ function Ft(e) {
           });
         })();
       }
-    }), null), m(k, l(W.span, {
+    }), null), h(k, l(W.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: ae() && !s() ? 1 : 0,
-          y: ae() && !s() ? -6 : 0
+          opacity: ce() && !s() ? 1 : 0,
+          y: ce() && !s() ? -6 : 0
         };
       },
       get transition() {
@@ -509,14 +512,16 @@ function Ft(e) {
       get children() {
         return ge().label;
       }
-    }), null), m(n, l(R, {
+    }), null), h(n, l(R, {
       get when() {
         return s();
       },
       get children() {
         var o = st();
-        return m(o, l(te, {
-          each: de,
+        return h(o, l(te, {
+          get each() {
+            return oe();
+          },
           children: (_) => {
             const w = _.icon;
             return (() => {
@@ -526,11 +531,11 @@ function Ft(e) {
                   kind: "mode",
                   id: _.mode
                 }), e.onSelectMode?.(_.mode), P(!1);
-              }, m(C, l(w, {
+              }, h(C, l(w, {
                 class: "workbench-dock__mode-icon"
-              })), m(g, () => _.label), m(O, () => _.description), K((h) => {
+              })), h(g, () => _.label), h(O, () => _.description), K((m) => {
                 var J = y() === _.mode, Q = y() === _.mode;
-                return J !== h.e && u.classList.toggle("is-active", h.e = J), Q !== h.t && I(u, "aria-checked", h.t = Q), h;
+                return J !== m.e && u.classList.toggle("is-active", m.e = J), Q !== m.t && L(u, "aria-checked", m.t = Q), m;
               }, {
                 e: void 0,
                 t: void 0
@@ -539,13 +544,13 @@ function Ft(e) {
           }
         })), o;
       }
-    }), null), m(t, l(Ue, {
+    }), null), h(t, l(Ue, {
       get each() {
         return G();
       },
       children: (o, _) => {
         const w = () => _ + 1;
-        return l(Et, {
+        return l(Ct, {
           get action() {
             return o();
           },
@@ -562,16 +567,16 @@ function Ft(e) {
           }
         });
       }
-    }), E), m(t, l(R, {
+    }), E), h(t, l(R, {
       get when() {
-        return ce("before-components");
+        return le("before-components");
       },
       get children() {
-        return l(he, {});
+        return l(me, {});
       }
-    }), E), m(t, l(te, {
+    }), E), h(t, l(te, {
       get each() {
-        return re();
+        return ie();
       },
       children: (o, _) => {
         const w = () => _() + G().length + 1;
@@ -606,18 +611,18 @@ function Ft(e) {
           get onContextMenu() {
             return o.onContextMenu;
           },
-          onKeyboardActivate: (u) => X("host", o.id, o.label, u),
+          onKeyboardActivate: (u) => Y("host", o.id, o.label, u),
           onEnter: () => a(w()),
           onLeave: () => a((u) => u === w() ? null : u),
-          onDragBegin: Y
+          onDragBegin: F
         });
       }
-    }), E), m(t, l(te, {
+    }), E), h(t, l(te, {
       get each() {
-        return oe();
+        return re();
       },
       children: (o, _) => {
-        const w = () => _() + G().length + re().length + 1, u = () => Xe(o.kind, o.id);
+        const w = () => _() + G().length + ie().length + 1, u = () => Xe(o.kind, o.id);
         return l(se, {
           get id() {
             return String(o.id);
@@ -638,7 +643,7 @@ function Ft(e) {
             return B(() => f() === "focus-cycle")() ? !0 : Ae(String(o.id));
           },
           get filterable() {
-            return B(() => f() === "solo-filter")() && ie();
+            return B(() => f() === "solo-filter")() && ae();
           },
           get activationMode() {
             return f();
@@ -669,23 +674,23 @@ function Ft(e) {
           },
           onEnter: () => a(w()),
           onLeave: () => a((C) => C === w() ? null : C),
-          onKeyboardActivate: (C) => X(o.kind, o.id, o.label, C),
-          onDragBegin: Y
+          onKeyboardActivate: (C) => Y(o.kind, o.id, o.label, C),
+          onDragBegin: F
         });
       }
-    }), null), m(t, l(R, {
+    }), null), h(t, l(R, {
       get when() {
-        return fe().length > 0 || ce("after-components");
+        return fe().length > 0 || le("after-components");
       },
       get children() {
         return ut();
       }
-    }), null), m(t, l(te, {
+    }), null), h(t, l(te, {
       get each() {
         return fe();
       },
       children: (o, _) => {
-        const w = () => _() + G().length + re().length + oe().length + 1;
+        const w = () => _() + G().length + ie().length + re().length + 1;
         return l(se, {
           get id() {
             return o.id;
@@ -717,22 +722,22 @@ function Ft(e) {
           get onContextMenu() {
             return o.onContextMenu;
           },
-          onKeyboardActivate: (u) => X("host", o.id, o.label, u),
+          onKeyboardActivate: (u) => Y("host", o.id, o.label, u),
           onEnter: () => a(w()),
           onLeave: () => a((u) => u === w() ? null : u),
-          onDragBegin: Y
+          onDragBegin: F
         });
       }
-    }), null), m(t, l(R, {
+    }), null), h(t, l(R, {
       get when() {
-        return ce("after-components");
+        return le("after-components");
       },
       get children() {
-        return l(he, {});
+        return l(me, {});
       }
     }), null), K((o) => {
-      var _ = `workbench-dock workbench-dock-material${c()?.kind === "external" && c()?.moved ? " is-external-drop-target" : ""}${c()?.kind === "external" && c()?.overDock ? " is-external-drop-allowed" : ""}`, w = y() === "background", u = !!(ae() || s()), C = s();
-      return _ !== o.e && Ke(t, o.e = _), w !== o.t && k.classList.toggle("is-active", o.t = w), u !== o.a && k.classList.toggle("is-hovered", o.a = u), C !== o.o && I(k, "aria-expanded", o.o = C), o;
+      var _ = `workbench-dock workbench-dock-material${c()?.kind === "external" && c()?.moved ? " is-external-drop-target" : ""}${c()?.kind === "external" && c()?.overDock ? " is-external-drop-allowed" : ""}`, w = y() === "background", u = !!(ce() || s()), C = s();
+      return _ !== o.e && Ke(t, o.e = _), w !== o.t && k.classList.toggle("is-active", o.t = w), u !== o.a && k.classList.toggle("is-hovered", o.a = u), C !== o.o && L(k, "aria-expanded", o.o = C), o;
     }, {
       e: void 0,
       t: void 0,
@@ -744,13 +749,13 @@ function Ft(e) {
       return !!(c()?.moved && !c()?.preview);
     },
     get children() {
-      return l(Ct, {
+      return l(Pt, {
         state: c
       });
     }
   })];
 }
-function Ct(e) {
+function Pt(e) {
   const v = () => {
     const d = e.state();
     return d ? `translate3d(${d.clientX + 14}px, ${d.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
@@ -758,7 +763,7 @@ function Ct(e) {
   return l(We, {
     get children() {
       var d = ft(), s = d.firstChild, P = s.nextSibling, b = P.firstChild, r = b.nextSibling, i = r.firstChild, D = i.nextSibling, x = D.firstChild;
-      return m(b, l(R, {
+      return h(b, l(R, {
         get when() {
           return c();
         },
@@ -768,11 +773,11 @@ function Ct(e) {
             class: "w-4 h-4"
           });
         }
-      })), m(i, a), m(D, l(qe, {
+      })), h(i, a), h(D, l(qe, {
         class: "w-3 h-3"
-      }), x), m(x, () => e.state()?.kind === "external" ? "Pin to Dock" : "Drag onto canvas"), K((f) => {
-        var M = !!(e.state()?.kind === "external" && e.state()?.overDock), $ = v();
-        return M !== f.e && d.classList.toggle("is-over-dock", f.e = M), $ !== f.t && Ne(d, "transform", f.t = $), f;
+      }), x), h(x, () => e.state()?.kind === "external" ? "Pin to Dock" : "Drag onto canvas"), K((f) => {
+        var M = !!(e.state()?.kind === "external" && e.state()?.overDock), X = v();
+        return M !== f.e && d.classList.toggle("is-over-dock", f.e = M), X !== f.t && Ne(d, "transform", f.t = X), f;
       }, {
         e: void 0,
         t: void 0
@@ -782,5 +787,5 @@ function Ct(e) {
 }
 Ge(["pointerdown", "click", "contextmenu", "keydown"]);
 export {
-  Ft as WorkbenchDock
+  Bt as WorkbenchDock
 };

package/dist/components/workbench/WorkbenchSurface.d.ts

@@ -1,6 +1,6 @@
 import { type UIFirstSelectionEvent } from '../../utils/uiFirstSelection';
 import { type WorkbenchContextMenuItem } from './WorkbenchContextMenu';
-import { type WorkbenchDockItemActivation, type WorkbenchDockItemActivationMode, type WorkbenchDockAction, type WorkbenchExternalDockDragController, type WorkbenchHostDockItem } from './WorkbenchFilterBar';
+import { type WorkbenchDockItemActivation, type WorkbenchDockItemActivationMode, type WorkbenchDockAction, type WorkbenchDockModeIcons, type WorkbenchExternalDockDragController, type WorkbenchHostDockItem } from './WorkbenchFilterBar';
 import type { WorkbenchState, WorkbenchAnnotationItem, WorkbenchBackgroundLayer, WorkbenchBackgroundLayerDefaults, WorkbenchBackgroundLayerPatch, WorkbenchContextMenuState, WorkbenchInteractionAdapter, WorkbenchStickyNoteItem, WorkbenchStickyNotePatch, WorkbenchTextAnnotationDefaults, WorkbenchTextAnnotationPatch, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
 export interface WorkbenchCreateAtOptions {
     worldX?: number;
@@ -73,6 +73,8 @@ export interface WorkbenchSurfaceProps {
      */
     dockItemActivationMode?: WorkbenchDockItemActivationMode;
     onDockItemClick?: (item: WorkbenchDockItemActivation) => boolean | void;
+    /** Host artwork for the Dock mode trigger and its menu. */
+    dockModeIcons?: WorkbenchDockModeIcons;
     dockActions?: readonly WorkbenchDockAction[];
     dockItems?: readonly WorkbenchHostDockItem[];
     registerExternalDockDragController?: (controller: WorkbenchExternalDockDragController | null) => void;

package/dist/components/workbench/WorkbenchSurface.js

@@ -614,6 +614,9 @@ function Zt(c) {
       get onItemClick() {
         return c.onDockItemClick;
       },
+      get modeIcons() {
+        return c.dockModeIcons;
+      },
       get dockActions() {
         return c.dockActions;
       },

package/dist/components/workbench/index.d.ts

@@ -1,7 +1,7 @@
 export { WorkbenchOverlay, type WorkbenchOverlayProps } from './WorkbenchOverlay';
 export { WorkbenchDockPopoverSurface, type WorkbenchDockPopoverSurfaceProps, } from './WorkbenchDockPopoverSurface';
 export { WorkbenchSurface, type WorkbenchSurfaceApi, type WorkbenchCreateAtOptions, type WorkbenchCreateWidgetOptions, type WorkbenchContextMenuItemsResolver, type WorkbenchSurfaceProps, } from './WorkbenchSurface';
-export type { WorkbenchDockAction, WorkbenchCanvasWidgetPlacement, WorkbenchDockCanvasPlacement, WorkbenchDockDropContext, WorkbenchDockItemPlacement, WorkbenchDockItemActivation, WorkbenchDockItemActivationMode, WorkbenchExternalDockDragController, WorkbenchExternalDockDragItem, WorkbenchHostDockItem, } from './WorkbenchFilterBar';
+export type { WorkbenchDockAction, WorkbenchDockModeIcons, WorkbenchCanvasWidgetPlacement, WorkbenchDockCanvasPlacement, WorkbenchDockDropContext, WorkbenchDockItemPlacement, WorkbenchDockItemActivation, WorkbenchDockItemActivationMode, WorkbenchExternalDockDragController, WorkbenchExternalDockDragItem, WorkbenchHostDockItem, } from './WorkbenchFilterBar';
 export type { BarItemContextMenuHandler, BarItemContextMenuRequest, BarItemContextMenuSource, } from '../layout/barItemContextMenu';
 export { WorkbenchContextMenu, type WorkbenchContextMenuItem, type WorkbenchContextMenuProps, } from './WorkbenchContextMenu';
 export { useWorkbenchModel, type UseWorkbenchModelOptions } from './useWorkbenchModel';

package/package.json

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