@floegence/floe-webapp-core 0.52.4 → 0.52.5

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.5",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",