@floegence/floe-webapp-core 0.42.0 → 0.42.1

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,71 +1,71 @@
-import { insert as w, createComponent as c, effect as A, setAttribute as M, memo as Q, className as Me, template as X, addEventListener as ge, Portal as xe, setStyleProperty as Xe, use as $e, delegateEvents as Ae } from "solid-js/web";
-import { createSignal as Z, onCleanup as G, createEffect as U, createMemo as H, Show as W, For as q } from "solid-js";
-import { Motion as F } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
-import { easing as Y, duration as B } from "../../utils/animations.js";
-import { Plus as Fe } from "../icons/index.js";
-import { startHotInteraction as Ye } from "../../utils/hotInteraction.js";
+import { insert as h, createComponent as c, effect as Y, setAttribute as y, memo as Z, className as Xe, template as X, addEventListener as ke, Portal as Ae, setStyleProperty as Ye, use as $e, delegateEvents as Fe } from "solid-js/web";
+import { createSignal as ee, onCleanup as U, createEffect as q, createMemo as H, Show as W, For as z } from "solid-js";
+import { Motion as $ } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { easing as F, duration as R } from "../../utils/animations.js";
+import { Plus as Re } from "../icons/index.js";
+import { startHotInteraction as pe } from "../../utils/hotInteraction.js";
 import { startPointerSession as Be } from "../ui/pointerSession.js";
 import { clientToCanvasWorld as He } from "../ui/canvasGeometry.js";
 import { createWorkbenchWidgetFrame as We } from "./workbenchHelpers.js";
-import { getWidgetEntry as pe } from "./widgets/widgetRegistry.js";
-import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as he, frameFromElement as we, createWorkbenchEdgeAutoPanController as Re } from "./workbenchEdgeAutoPan.js";
-import { DockLayoutDashboard as Ke, DockLayers as Ne, DockRegion as Ve, DockText as Ge, DockMessageSquare as Ue } from "../icons/DockIcons.js";
-var qe = /* @__PURE__ */ X("<button type=button class=workbench-dock__item>"), ze = /* @__PURE__ */ X('<button type=button class="workbench-dock__item workbench-dock__action">'), je = /* @__PURE__ */ X('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), Je = /* @__PURE__ */ X("<span class=workbench-dock__external-placeholder aria-hidden=true>"), Qe = /* @__PURE__ */ X('<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>'), Ze = /* @__PURE__ */ X("<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>"), et = /* @__PURE__ */ X("<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 ve = 5, tt = ".workbench-dock", ee = [{
+import { getWidgetEntry as Ne } from "./widgets/widgetRegistry.js";
+import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as be, frameFromElement as _e, createWorkbenchEdgeAutoPanController as Ke } from "./workbenchEdgeAutoPan.js";
+import { DockLayoutDashboard as Ve, DockLayers as Ge, DockRegion as Ue, DockText as qe, DockMessageSquare as ze } from "../icons/DockIcons.js";
+var je = /* @__PURE__ */ X("<button type=button class=workbench-dock__item>"), Je = /* @__PURE__ */ X('<button type=button class="workbench-dock__item workbench-dock__action">'), Qe = /* @__PURE__ */ X('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), Ze = /* @__PURE__ */ X("<span class=workbench-dock__external-placeholder aria-hidden=true>"), et = /* @__PURE__ */ X('<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>'), tt = /* @__PURE__ */ X("<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>"), nt = /* @__PURE__ */ X("<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 fe = 5, ot = 1e3, rt = ".workbench-dock", te = [{
   mode: "work",
   label: "Work Mode",
   description: "Operate windows and sticky notes",
-  icon: Ke
+  icon: Ve
 }, {
   mode: "background",
   label: "Composition Mode",
   description: "Arrange regions and canvas text",
-  icon: Ne
-}], nt = [{
+  icon: Ge
+}], it = [{
   tool: "sticky-note",
   label: "Sticky",
-  icon: Ue
-}], ot = [{
+  icon: ze
+}], at = [{
   tool: "background-region",
   label: "Region",
-  icon: Ve
+  icon: Ue
 }, {
   tool: "text",
   label: "Text",
-  icon: Ge
+  icon: qe
 }];
-function rt(e) {
-  const a = e?.closest(".workbench-surface")?.querySelector(he);
-  return a instanceof HTMLElement ? we(a) : null;
+function lt(e) {
+  const a = e?.closest(".workbench-surface")?.querySelector(be);
+  return a instanceof HTMLElement ? _e(a) : null;
 }
-function te(e, s, a) {
+function ne(e, s, a) {
   return e >= a.left && e <= a.right && s >= a.top && s <= a.bottom;
 }
-function it(e, s, a) {
-  return a ? te(e, s, a) : !1;
+function ct(e, s, a) {
+  return a ? ne(e, s, a) : !1;
 }
-function ke(e, s, a) {
+function me(e, s, a) {
   return Math.min(a, Math.max(s, e));
 }
-function at(e, s, a, l, r) {
+function st(e, s, a, l, r) {
   if (!e) return !1;
-  if (te(s, a, e) || te(l, r, e))
+  if (ne(s, a, e) || ne(l, r, e))
     return !0;
   const i = l - s, D = r - a;
   let v = 0, E = 1;
-  const u = (b, C) => {
+  const g = (b, C) => {
     if (b === 0) return C >= 0;
     const k = C / b;
     return b < 0 ? k > E ? !1 : (k > v && (v = k), !0) : k < v ? !1 : (k < E && (E = k), !0);
   };
-  return u(-i, s - e.left) && u(i, e.right - s) && u(-D, a - e.top) && u(D, e.bottom - a);
+  return g(-i, s - e.left) && g(i, e.right - s) && g(-D, a - e.top) && g(D, e.bottom - a);
 }
-function fe(e, s, a) {
+function we(e, s, a) {
   if (!a || typeof document.elementFromPoint != "function") return !1;
   const l = document.elementFromPoint(e, s);
-  return l instanceof Element && l.closest(tt) === a;
+  return l instanceof Element && l.closest(rt) === a;
 }
-function me(e) {
+function he(e) {
   const s = () => e.hoverOffset === -1 ? {
     scale: 1.26,
     y: -6,
@@ -86,16 +86,16 @@ function me(e) {
     r.button === 0 && e.onDragBegin(r, e.kind, e.id, e.label, e.icon, r.currentTarget, e.canvasPlacement, null);
   };
   return (() => {
-    var r = qe();
-    return r.$$pointerdown = l, r.addEventListener("pointerleave", () => e.onLeave()), r.addEventListener("pointerenter", () => e.onEnter()), w(r, c(F.span, {
+    var r = je();
+    return r.$$pointerdown = l, r.addEventListener("pointerleave", () => e.onLeave()), r.addEventListener("pointerenter", () => e.onEnter()), h(r, c($.span, {
       class: "workbench-dock__tile",
       get animate() {
         return s();
       },
       get transition() {
         return {
-          duration: B.fast,
-          easing: Y.easeOut
+          duration: R.fast,
+          easing: F.easeOut
         };
       },
       get children() {
@@ -106,7 +106,7 @@ function me(e) {
           });
         })();
       }
-    }), null), w(r, c(F.span, {
+    }), null), h(r, c($.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
@@ -116,16 +116,16 @@ function me(e) {
       },
       get transition() {
         return {
-          duration: B.fast,
-          easing: Y.easeOut
+          duration: R.fast,
+          easing: F.easeOut
         };
       },
       get children() {
         return e.label;
       }
-    }), null), A((i) => {
-      var D = e.kind === "host" ? e.id : void 0, v = !!e.active, E = !!(e.filterable && !e.visible), u = !!a(), b = !!e.isDragging, C = e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, k = e.active;
-      return D !== i.e && M(r, "data-workbench-dock-item", i.e = D), v !== i.t && r.classList.toggle("is-active", i.t = v), E !== i.a && r.classList.toggle("is-filter-muted", i.a = E), u !== i.o && r.classList.toggle("is-hovered", i.o = u), b !== i.i && r.classList.toggle("is-source-dragging", i.i = b), C !== i.n && M(r, "aria-label", i.n = C), k !== i.s && M(r, "aria-pressed", i.s = k), i;
+    }), null), Y((i) => {
+      var D = e.kind === "host" ? e.id : void 0, v = !!e.active, E = !!(e.filterable && !e.visible), g = !!a(), b = !!e.isDragging, C = e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, k = e.active;
+      return D !== i.e && y(r, "data-workbench-dock-item", i.e = D), v !== i.t && r.classList.toggle("is-active", i.t = v), E !== i.a && r.classList.toggle("is-filter-muted", i.a = E), g !== i.o && r.classList.toggle("is-hovered", i.o = g), b !== i.i && r.classList.toggle("is-source-dragging", i.i = b), C !== i.n && y(r, "aria-label", i.n = C), k !== i.s && y(r, "aria-pressed", i.s = k), i;
     }, {
       e: void 0,
       t: void 0,
@@ -137,23 +137,23 @@ function me(e) {
     }), r;
   })();
 }
-function lt(e) {
+function dt(e) {
   const s = () => e.hoverOffset === -1, a = () => ({
     scale: 1,
     y: 0,
     x: 0
   }), l = e.action.icon;
   return (() => {
-    var r = ze();
-    return r.$$click = (i) => e.action.onActivate(i.currentTarget), r.addEventListener("dragstart", (i) => i.preventDefault()), ge(r, "pointerleave", e.onLeave), ge(r, "pointerenter", e.onEnter), M(r, "draggable", !1), w(r, c(F.span, {
+    var r = Je();
+    return r.$$click = (i) => e.action.onActivate(i.currentTarget), r.addEventListener("dragstart", (i) => i.preventDefault()), ke(r, "pointerleave", e.onLeave), ke(r, "pointerenter", e.onEnter), y(r, "draggable", !1), h(r, c($.span, {
       class: "workbench-dock__tile",
       get animate() {
         return a();
       },
       get transition() {
         return {
-          duration: B.fast,
-          easing: Y.easeOut
+          duration: R.fast,
+          easing: F.easeOut
         };
       },
       get children() {
@@ -161,7 +161,7 @@ function lt(e) {
           class: "workbench-dock__icon"
         });
       }
-    }), null), w(r, c(F.span, {
+    }), null), h(r, c($.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
@@ -171,16 +171,16 @@ function lt(e) {
       },
       get transition() {
         return {
-          duration: B.fast,
-          easing: Y.easeOut
+          duration: R.fast,
+          easing: F.easeOut
         };
       },
       get children() {
         return e.action.label;
       }
-    }), null), A((i) => {
-      var D = e.action.id, v = !!e.action.active, E = !!s(), u = e.action.label, b = e.action.active;
-      return D !== i.e && M(r, "data-workbench-dock-action", i.e = D), v !== i.t && r.classList.toggle("is-active", i.t = v), E !== i.a && r.classList.toggle("is-hovered", i.a = E), u !== i.o && M(r, "aria-label", i.o = u), b !== i.i && M(r, "aria-pressed", i.i = b), i;
+    }), null), Y((i) => {
+      var D = e.action.id, v = !!e.action.active, E = !!s(), g = e.action.label, b = e.action.active;
+      return D !== i.e && y(r, "data-workbench-dock-action", i.e = D), v !== i.t && r.classList.toggle("is-active", i.t = v), E !== i.a && r.classList.toggle("is-hovered", i.a = E), g !== i.o && y(r, "aria-label", i.o = g), b !== i.i && y(r, "aria-pressed", i.i = b), i;
     }, {
       e: void 0,
       t: void 0,
@@ -190,45 +190,45 @@ function lt(e) {
     }), r;
   })();
 }
-function Et(e) {
-  const [s, a] = Z(null), [l, r] = Z(null), [i, D] = Z(!1);
-  let v, E, u, b, C = null;
-  G(() => {
+function Pt(e) {
+  const [s, a] = ee(null), [l, r] = ee(null), [i, D] = ee(!1);
+  let v, E, g, b, C = null;
+  U(() => {
     b?.stop(), E?.stop({
       reason: "manual_stop",
       commit: !1
-    }), E = void 0, u?.(), u = void 0, l()?.stopInteraction(), e.onDragPreviewChange?.(null), e.registerExternalDockDragController?.(null);
-  }), U(() => {
+    }), E = void 0, g?.clear(), g = void 0, l()?.stopInteraction(), e.onDragPreviewChange?.(null), e.registerExternalDockDragController?.(null);
+  }), q(() => {
     e.onDragPreviewChange?.(l()?.preview ?? null);
-  }), U(() => {
+  }), q(() => {
     const t = (n) => {
       n.key !== "Escape" || !l() || (n.preventDefault(), E?.stop({
         reason: "manual_stop",
         commit: !1
       }));
     };
-    window.addEventListener("keydown", t, !0), G(() => window.removeEventListener("keydown", t, !0));
-  }), U(() => {
+    window.addEventListener("keydown", t, !0), U(() => window.removeEventListener("keydown", t, !0));
+  }), q(() => {
     if (!i() || typeof window > "u") return;
     const t = (f) => {
       v && f.target instanceof Node && v.contains(f.target) || D(!1);
     }, n = (f) => {
       f.key === "Escape" && D(!1);
     };
-    window.addEventListener("pointerdown", t, !0), window.addEventListener("keydown", n, !0), G(() => {
+    window.addEventListener("pointerdown", t, !0), window.addEventListener("keydown", n, !0), U(() => {
       window.removeEventListener("pointerdown", t, !0), window.removeEventListener("keydown", n, !0);
     });
   });
   const k = (t) => {
     const n = s();
-    return n === null || n <= R().length ? 0 : n === t ? -1 : n === t + 1 ? -2 : n === t - 1 ? 1 : 0;
-  }, $ = () => {
+    return n === null || n <= K().length ? 0 : n === t ? -1 : n === t + 1 ? -2 : n === t - 1 ? 1 : 0;
+  }, A = () => {
     b?.stop(), b = void 0, C = null;
-  }, p = () => {
-    !e.viewport || !e.onViewportCommit || (C = e.viewport, b?.stop(), b = Re({
+  }, N = () => {
+    !e.viewport || !e.onViewportCommit || (C = e.viewport, b?.stop(), b = Ke({
       readFrame: () => {
-        const n = v?.closest(".workbench-surface")?.querySelector(he);
-        return n instanceof HTMLElement ? we(n) : null;
+        const n = v?.closest(".workbench-surface")?.querySelector(be);
+        return n instanceof HTMLElement ? _e(n) : null;
       },
       readViewport: () => C ?? e.viewport ?? null,
       commitViewport: (t) => {
@@ -237,14 +237,14 @@ function Et(e) {
       onPanStart: () => e.onViewportInteractionStart?.("pan"),
       shouldPan: () => {
         const t = l();
-        return !!(t?.moved && t.hasEnteredCanvas && !fe(t.clientX, t.clientY, v));
+        return !!(t?.moved && t.hasEnteredCanvas && !we(t.clientX, t.clientY, v));
       }
     }));
-  }, be = (t) => {
+  }, Ee = (t) => {
     const n = l();
     if (!n) return;
     const f = !n.moved, P = C ?? e.viewport;
-    if (n.stopInteraction(), $(), r(null), E = void 0, f) {
+    if (n.stopInteraction(), A(), r(null), E = void 0, n.kind === "external" && n.moved && g?.expire(), f) {
       if (n.kind === "external" || !(n.trigger instanceof HTMLButtonElement)) return;
       if (n.kind === "host") {
         e.dockItems?.find((o) => o.id === n.id)?.onActivate?.(n.trigger);
@@ -256,7 +256,7 @@ function Et(e) {
         label: n.label,
         trigger: n.trigger
       })) return;
-      I() !== "background" && e.onSoloFilter(String(n.id), ae());
+      O() !== "background" && e.onSoloFilter(String(n.id), le());
       return;
     }
     if (t && n.overDock && n.dockDrop) {
@@ -276,12 +276,12 @@ function Et(e) {
       } : void 0;
       n.canvasPlacement.onDrop(n.clientX, n.clientY, o);
     }
-  }, z = (t, n, f, P, S, o, _, h) => {
+  }, j = (t, n, f, P, S, o, _, w) => {
     t.preventDefault(), E?.stop({
       reason: "manual_stop",
       commit: !1
-    }), p();
-    const g = rt(v);
+    }), N();
+    const u = lt(v);
     r({
       kind: n,
       id: f,
@@ -295,11 +295,11 @@ function Et(e) {
       moved: !1,
       overCanvas: !1,
       hasEnteredCanvas: !1,
-      canvasFrame: g,
+      canvasFrame: u,
       preview: null,
       canvasPlacement: _,
-      dockDrop: h,
-      stopInteraction: Ye({
+      dockDrop: w,
+      stopInteraction: pe({
         kind: "drag",
         cursor: "grabbing"
       }),
@@ -310,39 +310,40 @@ function Et(e) {
       let T = !1;
       r((m) => {
         if (!m || m.pointerId !== d.pointerId) return m;
-        const x = d.clientX - m.startClientX, K = d.clientY - m.startClientY, y = m.moved || Math.abs(x) > ve || Math.abs(K) > ve;
-        if (m.kind === "external" && y && !m.moved) {
-          const de = (ue) => {
-            ue.preventDefault(), ue.stopImmediatePropagation(), u?.();
-          }, ye = window.setTimeout(() => {
-            u === V && V();
-          }, 0), V = () => {
-            window.clearTimeout(ye), m.trigger.removeEventListener("click", de, !0), u === V && (u = void 0);
+        const M = d.clientX - m.startClientX, V = d.clientY - m.startClientY, x = m.moved || Math.abs(M) > fe || Math.abs(V) > fe;
+        if (m.kind === "external" && x && !m.moved) {
+          let p;
+          const B = () => {
+            p !== void 0 && window.clearTimeout(p), m.trigger.removeEventListener("click", ue, !0), window.removeEventListener("pointerdown", ge, !0), g?.clear === B && (g = void 0);
+          }, ue = (ve) => {
+            ve.preventDefault(), ve.stopImmediatePropagation(), B();
+          }, ge = () => B(), Me = () => {
+            p !== void 0 && window.clearTimeout(p), p = window.setTimeout(B, ot);
+          };
+          m.trigger.addEventListener("click", ue, !0), window.addEventListener("pointerdown", ge, !0), g = {
+            clear: B,
+            expire: Me
           };
-          m.trigger.addEventListener("click", de, {
-            capture: !0,
-            once: !0
-          }), u = V;
         }
-        const N = fe(d.clientX, d.clientY, v), O = m.canvasFrame, le = y && it(d.clientX, d.clientY, O), ce = le && !N, Oe = y && !N && at(O, m.clientX, m.clientY, d.clientX, d.clientY), se = m.hasEnteredCanvas || le || Oe;
-        T = y && se && !N;
-        const Ie = O ? ke(d.clientX, O.left, O.right) : d.clientX, Te = O ? ke(d.clientY, O.top, O.bottom) : d.clientY;
+        const G = we(d.clientX, d.clientY, v), I = m.canvasFrame, ce = x && ct(d.clientX, d.clientY, I), se = ce && !G, Te = x && !G && st(I, m.clientX, m.clientY, d.clientX, d.clientY), de = m.hasEnteredCanvas || ce || Te;
+        T = x && de && !G;
+        const xe = I ? me(d.clientX, I.left, I.right) : d.clientX, ye = I ? me(d.clientY, I.top, I.bottom) : d.clientY;
         return {
           ...m,
           clientX: d.clientX,
           clientY: d.clientY,
-          moved: y,
-          overDock: N,
-          overCanvas: ce,
-          hasEnteredCanvas: se,
-          preview: y && O && m.canvasPlacement?.preview ? {
+          moved: x,
+          overDock: G,
+          overCanvas: se,
+          hasEnteredCanvas: de,
+          preview: x && I && m.canvasPlacement?.preview ? {
             kind: m.canvasPlacement.preview.kind,
             id: m.canvasPlacement.preview.id,
             label: m.label,
-            clientX: Ie,
-            clientY: Te,
-            dropAllowed: ce,
-            canvasFrame: O
+            clientX: xe,
+            clientY: ye,
+            dropAllowed: se,
+            canvasFrame: I
           } : null
         };
       }), T && b?.updatePointer(d.clientX, d.clientY);
@@ -359,17 +360,17 @@ function Et(e) {
           pointerId: T.pointerId,
           clientX: T.latestClientX,
           clientY: T.latestClientY
-        }), be(d);
+        }), Ee(d);
       }
     });
-  }, ne = (t) => t ? {
+  }, oe = (t) => t ? {
     preview: {
       kind: "widget",
       id: t.widgetType
     },
     onDrop: (n, f, P) => {
       if (!P?.worldPoint) return;
-      const S = pe(t.widgetType, e.widgetDefinitions);
+      const S = Ne(t.widgetType, e.widgetDefinitions);
       t.onDrop({
         widgetType: t.widgetType,
         centerWorld: P.worldPoint,
@@ -380,20 +381,20 @@ function Et(e) {
         })
       });
     }
-  } : null, _e = (t, n) => {
-    t.button !== 0 || !(t.currentTarget instanceof HTMLElement) || (u?.(), u = void 0, z(t, "external", n.id, n.label, n.icon, t.currentTarget, ne(n.canvasPlacement), n.onDropToDock ?? null));
+  } : null, De = (t, n) => {
+    t.button !== 0 || !(t.currentTarget instanceof HTMLElement) || (g?.clear(), g = void 0, j(t, "external", n.id, n.label, n.icon, t.currentTarget, oe(n.canvasPlacement), n.onDropToDock ?? null));
   };
-  U(() => {
+  q(() => {
     e.registerExternalDockDragController?.({
-      begin: _e
-    }), G(() => e.registerExternalDockDragController?.(null));
+      begin: De
+    }), U(() => e.registerExternalDockDragController?.(null));
   });
-  const Ee = () => l()?.kind === "widget" ? l().id : null, De = () => l()?.kind === "tool" ? l().id : null, Ce = () => l()?.kind === "external" ? l()?.icon : void 0, I = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", oe = H(() => ee.find((t) => t.mode === I()) ?? ee[0]), re = H(() => I() === "background" ? ot.map((t) => ({
+  const Ce = () => l()?.kind === "widget" ? l().id : null, Pe = () => l()?.kind === "tool" ? l().id : null, Le = () => l()?.kind === "external" ? l()?.icon : void 0, O = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", re = H(() => te.find((t) => t.mode === O()) ?? te[0]), ie = H(() => O() === "background" ? at.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
     icon: t.icon
-  })) : [...nt.map((t) => ({
+  })) : [...it.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
@@ -403,123 +404,123 @@ function Et(e) {
     kind: "widget",
     label: t.label,
     icon: t.icon
-  }))]), ie = H(() => I() === "background" ? [] : [...e.dockItems ?? []]), R = H(() => I() === "background" ? [] : [...e.dockActions ?? []]), ae = H(() => re().map((t) => String(t.id))), j = () => I() !== "background", Pe = (t) => !j() || e.filters[t] !== !1, Le = (t) => {
-    if (!j())
+  }))]), ae = H(() => O() === "background" ? [] : [...e.dockItems ?? []]), K = H(() => O() === "background" ? [] : [...e.dockActions ?? []]), le = H(() => ie().map((t) => String(t.id))), J = () => O() !== "background", Se = (t) => !J() || e.filters[t] !== !1, Ie = (t) => {
+    if (!J())
       return !1;
-    const n = ae();
+    const n = le();
     return n.length > 1 && n.every((f) => e.filters[f] !== !1 == (f === t));
-  }, J = () => s() === 0, Se = () => ({
+  }, Q = () => s() === 0, Oe = () => ({
     scale: 1,
     y: 0,
     x: 0
   });
   return [(() => {
-    var t = Qe(), n = t.firstChild, f = n.firstChild, P = n.nextSibling;
+    var t = et(), n = t.firstChild, f = n.firstChild, P = n.nextSibling;
     t.addEventListener("pointerleave", () => a(null));
     var S = v;
-    return typeof S == "function" ? $e(S, t) : v = t, f.$$click = () => D((o) => !o), f.addEventListener("pointerleave", () => a((o) => o === 0 ? null : o)), f.addEventListener("pointerenter", () => a(0)), w(f, c(F.span, {
+    return typeof S == "function" ? $e(S, t) : v = t, f.$$click = () => D((o) => !o), f.addEventListener("pointerleave", () => a((o) => o === 0 ? null : o)), f.addEventListener("pointerenter", () => a(0)), h(f, c($.span, {
       class: "workbench-dock__tile",
       get animate() {
-        return Se();
+        return Oe();
       },
       get transition() {
         return {
-          duration: B.fast,
-          easing: Y.easeOut
+          duration: R.fast,
+          easing: F.easeOut
         };
       },
       get children() {
         return (() => {
-          const o = oe().icon;
+          const o = re().icon;
           return c(o, {
             class: "workbench-dock__icon"
           });
         })();
       }
-    }), null), w(f, c(F.span, {
+    }), null), h(f, c($.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: J() && !i() ? 1 : 0,
-          y: J() && !i() ? -6 : 0
+          opacity: Q() && !i() ? 1 : 0,
+          y: Q() && !i() ? -6 : 0
         };
       },
       get transition() {
         return {
-          duration: B.fast,
-          easing: Y.easeOut
+          duration: R.fast,
+          easing: F.easeOut
         };
       },
       get children() {
-        return oe().label;
+        return re().label;
       }
-    }), null), w(n, c(W, {
+    }), null), h(n, c(W, {
       get when() {
         return i();
       },
       get children() {
-        var o = je();
-        return w(o, c(q, {
-          each: ee,
+        var o = Qe();
+        return h(o, c(z, {
+          each: te,
           children: (_) => {
-            const h = _.icon;
+            const w = _.icon;
             return (() => {
-              var g = Ze(), L = g.firstChild, d = L.nextSibling, T = d.firstChild, m = T.nextSibling;
-              return g.$$click = () => {
+              var u = tt(), L = u.firstChild, d = L.nextSibling, T = d.firstChild, m = T.nextSibling;
+              return u.$$click = () => {
                 e.onSelectMode?.(_.mode), D(!1);
-              }, w(L, c(h, {
+              }, h(L, c(w, {
                 class: "workbench-dock__mode-icon"
-              })), w(T, () => _.label), w(m, () => _.description), A((x) => {
-                var K = I() === _.mode, y = I() === _.mode;
-                return K !== x.e && g.classList.toggle("is-active", x.e = K), y !== x.t && M(g, "aria-checked", x.t = y), x;
+              })), h(T, () => _.label), h(m, () => _.description), Y((M) => {
+                var V = O() === _.mode, x = O() === _.mode;
+                return V !== M.e && u.classList.toggle("is-active", M.e = V), x !== M.t && y(u, "aria-checked", M.t = x), M;
               }, {
                 e: void 0,
                 t: void 0
-              }), g;
+              }), u;
             })();
           }
         })), o;
       }
-    }), null), w(t, c(q, {
+    }), null), h(t, c(z, {
       get each() {
-        return R();
+        return K();
       },
       children: (o, _) => {
-        const h = () => _() + 1;
-        return c(lt, {
+        const w = () => _() + 1;
+        return c(dt, {
           action: o,
           get hoverOffset() {
-            return k(h());
+            return k(w());
           },
-          onEnter: () => a(h()),
-          onLeave: () => a((g) => g === h() ? null : g)
+          onEnter: () => a(w()),
+          onLeave: () => a((u) => u === w() ? null : u)
         });
       }
-    }), P), w(t, c(W, {
+    }), P), h(t, c(W, {
       get when() {
         return !!(l()?.kind === "external" && l()?.moved);
       },
       get children() {
-        var o = Je();
-        return w(o, c(W, {
+        var o = Ze();
+        return h(o, c(W, {
           get when() {
-            return Ce();
+            return Le();
           },
           children: (_) => {
-            const h = _();
-            return c(h, {
+            const w = _();
+            return c(w, {
               class: "workbench-dock__icon"
             });
           }
-        })), A(() => o.classList.toggle("is-drop-allowed", !!l()?.overDock)), o;
+        })), Y(() => o.classList.toggle("is-drop-allowed", !!l()?.overDock)), o;
       }
-    }), P), w(t, c(q, {
+    }), P), h(t, c(z, {
       get each() {
-        return ie();
+        return ae();
       },
       children: (o, _) => {
-        const h = () => _() + R().length + 1;
-        return c(me, {
+        const w = () => _() + K().length + 1;
+        return c(he, {
           get id() {
             return o.id;
           },
@@ -536,26 +537,26 @@ function Et(e) {
           visible: !0,
           filterable: !1,
           get hoverOffset() {
-            return k(h());
+            return k(w());
           },
           get isDragging() {
-            return Q(() => l()?.kind === "host")() && l()?.id === o.id;
+            return Z(() => l()?.kind === "host")() && l()?.id === o.id;
           },
           get canvasPlacement() {
-            return ne(o.canvasPlacement);
+            return oe(o.canvasPlacement);
           },
-          onEnter: () => a(h()),
-          onLeave: () => a((g) => g === h() ? null : g),
-          onDragBegin: z
+          onEnter: () => a(w()),
+          onLeave: () => a((u) => u === w() ? null : u),
+          onDragBegin: j
         });
       }
-    }), P), w(t, c(q, {
+    }), P), h(t, c(z, {
       get each() {
-        return re();
+        return ie();
       },
       children: (o, _) => {
-        const h = () => _() + R().length + ie().length + 1;
-        return c(me, {
+        const w = () => _() + K().length + ae().length + 1;
+        return c(he, {
           get id() {
             return String(o.id);
           },
@@ -569,43 +570,43 @@ function Et(e) {
             return o.icon;
           },
           get active() {
-            return Le(String(o.id));
+            return Ie(String(o.id));
           },
           get visible() {
-            return Pe(String(o.id));
+            return Se(String(o.id));
           },
           get filterable() {
-            return j();
+            return J();
           },
           get hoverOffset() {
-            return k(h());
+            return k(w());
           },
           get isDragging() {
-            return Q(() => o.kind === "widget")() ? Ee() === o.id : De() === o.id;
+            return Z(() => o.kind === "widget")() ? Ce() === o.id : Pe() === o.id;
           },
           get canvasPlacement() {
-            return Q(() => o.kind === "widget")() ? {
+            return Z(() => o.kind === "widget")() ? {
               preview: {
                 kind: "widget",
                 id: o.id
               },
-              onDrop: (g, L, d) => e.onCreateAt?.(o.id, g, L, d)
+              onDrop: (u, L, d) => e.onCreateAt?.(o.id, u, L, d)
             } : {
               preview: {
                 kind: "tool",
                 id: o.id
               },
-              onDrop: (g, L, d) => e.onCreateToolAt?.(o.id, g, L, d)
+              onDrop: (u, L, d) => e.onCreateToolAt?.(o.id, u, L, d)
             };
           },
-          onEnter: () => a(h()),
-          onLeave: () => a((g) => g === h() ? null : g),
-          onDragBegin: z
+          onEnter: () => a(w()),
+          onLeave: () => a((u) => u === w() ? null : u),
+          onDragBegin: j
         });
       }
-    }), null), A((o) => {
-      var _ = `workbench-dock workbench-dock-material${l()?.kind === "external" && l()?.moved ? " is-external-drop-target" : ""}${l()?.kind === "external" && l()?.overDock ? " is-external-drop-allowed" : ""}`, h = I() === "background", g = !!(J() || i()), L = i();
-      return _ !== o.e && Me(t, o.e = _), h !== o.t && f.classList.toggle("is-active", o.t = h), g !== o.a && f.classList.toggle("is-hovered", o.a = g), L !== o.o && M(f, "aria-expanded", o.o = L), o;
+    }), null), Y((o) => {
+      var _ = `workbench-dock workbench-dock-material${l()?.kind === "external" && l()?.moved ? " is-external-drop-target" : ""}${l()?.kind === "external" && l()?.overDock ? " is-external-drop-allowed" : ""}`, w = O() === "background", u = !!(Q() || i()), L = i();
+      return _ !== o.e && Xe(t, o.e = _), w !== o.t && f.classList.toggle("is-active", o.t = w), u !== o.a && f.classList.toggle("is-hovered", o.a = u), L !== o.o && y(f, "aria-expanded", o.o = L), o;
     }, {
       e: void 0,
       t: void 0,
@@ -617,35 +618,35 @@ function Et(e) {
       return !!(l()?.moved && !l()?.preview);
     },
     get children() {
-      return c(ct, {
+      return c(ut, {
         state: l
       });
     }
   })];
 }
-function ct(e) {
+function ut(e) {
   const s = () => {
     const r = e.state();
     return r ? `translate3d(${r.clientX + 14}px, ${r.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
   }, a = () => e.state()?.label ?? "", l = () => e.state()?.icon;
-  return c(xe, {
+  return c(Ae, {
     get children() {
-      var r = et(), i = r.firstChild, D = i.nextSibling, v = D.firstChild, E = v.nextSibling, u = E.firstChild, b = u.nextSibling, C = b.firstChild;
-      return w(v, c(W, {
+      var r = nt(), i = r.firstChild, D = i.nextSibling, v = D.firstChild, E = v.nextSibling, g = E.firstChild, b = g.nextSibling, C = b.firstChild;
+      return h(v, c(W, {
         get when() {
           return l();
         },
         children: (k) => {
-          const $ = k();
-          return c($, {
+          const A = k();
+          return c(A, {
             class: "w-4 h-4"
           });
         }
-      })), w(u, a), w(b, c(Fe, {
+      })), h(g, a), h(b, c(Re, {
         class: "w-3 h-3"
-      }), C), w(C, () => e.state()?.kind === "external" ? "Pin to Dock" : "Drag onto canvas"), A((k) => {
-        var $ = !!(e.state()?.kind === "external" && e.state()?.overDock), p = s();
-        return $ !== k.e && r.classList.toggle("is-over-dock", k.e = $), p !== k.t && Xe(r, "transform", k.t = p), k;
+      }), C), h(C, () => e.state()?.kind === "external" ? "Pin to Dock" : "Drag onto canvas"), Y((k) => {
+        var A = !!(e.state()?.kind === "external" && e.state()?.overDock), N = s();
+        return A !== k.e && r.classList.toggle("is-over-dock", k.e = A), N !== k.t && Ye(r, "transform", k.t = N), k;
       }, {
         e: void 0,
         t: void 0
@@ -653,7 +654,7 @@ function ct(e) {
     }
   });
 }
-Ae(["pointerdown", "click"]);
+Fe(["pointerdown", "click"]);
 export {
-  Et as WorkbenchDock
+  Pt as WorkbenchDock
 };

package/package.json

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