@floegence/floe-webapp-core 0.42.0 → 0.42.2

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 { 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 { insert as h, createComponent as c, effect as Y, setAttribute as y, memo as Q, 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 Z, onCleanup as U, createEffect as q, createMemo as H, Show as W, For as ee, Index as Re } 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 pe } from "../icons/index.js";
+import { startHotInteraction as Be } from "../../utils/hotInteraction.js";
+import { startPointerSession as He } from "../ui/pointerSession.js";
+import { clientToCanvasWorld as We } from "../ui/canvasGeometry.js";
+import { createWorkbenchWidgetFrame as Ne } from "./workbenchHelpers.js";
+import { getWidgetEntry as Ke } from "./widgets/widgetRegistry.js";
+import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as be, frameFromElement as _e, createWorkbenchEdgeAutoPanController as Ve } from "./workbenchEdgeAutoPan.js";
+import { DockLayoutDashboard as Ge, DockLayers as Ue, DockRegion as qe, DockText as ze, DockMessageSquare as je } from "../icons/DockIcons.js";
+var Je = /* @__PURE__ */ X("<button type=button class=workbench-dock__item>"), Qe = /* @__PURE__ */ X('<button type=button class="workbench-dock__item workbench-dock__action">'), Ze = /* @__PURE__ */ X('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), et = /* @__PURE__ */ X("<span class=workbench-dock__external-placeholder aria-hidden=true>"), tt = /* @__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>'), nt = /* @__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>"), ot = /* @__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, rt = 1e3, it = ".workbench-dock", te = [{
   mode: "work",
   label: "Work Mode",
   description: "Operate windows and sticky notes",
-  icon: Ke
+  icon: Ge
 }, {
   mode: "background",
   label: "Composition Mode",
   description: "Arrange regions and canvas text",
-  icon: Ne
-}], nt = [{
+  icon: Ue
+}], at = [{
   tool: "sticky-note",
   label: "Sticky",
-  icon: Ue
-}], ot = [{
+  icon: je
+}], lt = [{
   tool: "background-region",
   label: "Region",
-  icon: Ve
+  icon: qe
 }, {
   tool: "text",
   label: "Text",
-  icon: Ge
+  icon: ze
 }];
-function rt(e) {
-  const a = e?.closest(".workbench-surface")?.querySelector(he);
-  return a instanceof HTMLElement ? we(a) : null;
+function ct(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 st(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 dt(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(it) === 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 ut(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 = Qe();
+    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) {
+function Lt(e) {
   const [s, a] = Z(null), [l, r] = Z(null), [i, D] = Z(!1);
-  let v, E, u, b, C = null;
-  G(() => {
+  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 = Ve({
       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) {
@@ -264,7 +264,7 @@ function Et(e) {
       return;
     }
     if (t && n.overCanvas && n.canvasPlacement) {
-      const S = n.canvasFrame && P ? He(n.canvasFrame, P, {
+      const S = n.canvasFrame && P ? We(n.canvasFrame, P, {
         clientX: n.clientX,
         clientY: n.clientY
       }) : null, o = n.canvasFrame ? {
@@ -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) => {
+  }, z = (t, n, f, P, S, o, _, w) => {
     t.preventDefault(), E?.stop({
       reason: "manual_stop",
       commit: !1
-    }), p();
-    const g = rt(v);
+    }), N();
+    const u = ct(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: Be({
         kind: "drag",
         cursor: "grabbing"
       }),
@@ -310,44 +310,45 @@ 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, rt);
+          };
+          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 && st(d.clientX, d.clientY, I), se = ce && !G, Te = x && !G && dt(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);
     };
-    E = Be({
+    E = He({
       pointerEvent: t,
       captureEl: t.currentTarget,
       onMove: L,
@@ -359,41 +360,41 @@ 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 = Ke(t.widgetType, e.widgetDefinitions);
       t.onDrop({
         widgetType: t.widgetType,
         centerWorld: P.worldPoint,
-        frame: We(S, {
+        frame: Ne(S, {
           anchor: "center",
           worldX: P.worldPoint.worldX,
           worldY: P.worldPoint.worldY
         })
       });
     }
-  } : 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, z(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" ? lt.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
     icon: t.icon
-  })) : [...nt.map((t) => ({
+  })) : [...at.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
@@ -403,40 +404,40 @@ 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) => {
+  }))]), 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 = () => ({
+  }, J = () => s() === 0, Oe = () => ({
     scale: 1,
     y: 0,
     x: 0
   });
   return [(() => {
-    var t = Qe(), n = t.firstChild, f = n.firstChild, P = n.nextSibling;
+    var t = tt(), 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 {
@@ -446,80 +447,82 @@ function Et(e) {
       },
       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 = Ze();
+        return h(o, c(ee, {
+          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 = nt(), 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(Re, {
       get each() {
-        return R();
+        return K();
       },
       children: (o, _) => {
-        const h = () => _() + 1;
-        return c(lt, {
-          action: o,
+        const w = () => _ + 1;
+        return c(ut, {
+          get action() {
+            return 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 = et();
+        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(ee, {
       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 +539,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;
           },
           get canvasPlacement() {
-            return ne(o.canvasPlacement);
+            return oe(o.canvasPlacement);
           },
-          onEnter: () => a(h()),
-          onLeave: () => a((g) => g === h() ? null : g),
+          onEnter: () => a(w()),
+          onLeave: () => a((u) => u === w() ? null : u),
           onDragBegin: z
         });
       }
-    }), P), w(t, c(q, {
+    }), P), h(t, c(ee, {
       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,19 +572,19 @@ 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();
           },
           get hoverOffset() {
-            return k(h());
+            return k(w());
           },
           get isDragging() {
-            return Q(() => o.kind === "widget")() ? Ee() === o.id : De() === o.id;
+            return Q(() => o.kind === "widget")() ? Ce() === o.id : Pe() === o.id;
           },
           get canvasPlacement() {
             return Q(() => o.kind === "widget")() ? {
@@ -589,23 +592,23 @@ function Et(e) {
                 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),
+          onEnter: () => a(w()),
+          onLeave: () => a((u) => u === w() ? null : u),
           onDragBegin: z
         });
       }
-    }), 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 = !!(J() || 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 +620,35 @@ function Et(e) {
       return !!(l()?.moved && !l()?.preview);
     },
     get children() {
-      return c(ct, {
+      return c(gt, {
         state: l
       });
     }
   })];
 }
-function ct(e) {
+function gt(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 = ot(), 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(pe, {
         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 +656,7 @@ function ct(e) {
     }
   });
 }
-Ae(["pointerdown", "click"]);
+Fe(["pointerdown", "click"]);
 export {
-  Et as WorkbenchDock
+  Lt as WorkbenchDock
 };

package/package.json

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