@floegence/floe-webapp-core 0.36.48 → 0.36.50

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

@@ -1,4 +1,9 @@
 import { type Component } from 'solid-js';
+export type WorkbenchContextMenuSelectEvent = Readonly<{
+    source: 'pointer' | 'keyboard';
+    clientX: number;
+    clientY: number;
+}>;
 type WorkbenchContextMenuActionItem = Readonly<{
     id: string;
     kind: 'action';
@@ -6,7 +11,7 @@ type WorkbenchContextMenuActionItem = Readonly<{
     icon: Component<{
         class?: string;
     }>;
-    onSelect: () => void;
+    onSelect: (event?: WorkbenchContextMenuSelectEvent) => void;
     disabled?: boolean;
     destructive?: boolean;
 }>;

package/dist/components/workbench/WorkbenchContextMenu.js

@@ -1,43 +1,49 @@
-import { spread as _, mergeProps as b, insert as c, createComponent as u, addEventListener as v, effect as f, className as p, template as a, delegateEvents as h } from "solid-js/web";
-import { For as x } from "solid-js";
-import { cn as k } from "../../utils/cn.js";
-import { WORKBENCH_CONTEXT_MENU_ATTR as w } from "./workbenchContextMenuDismiss.js";
-var $ = /* @__PURE__ */ a("<div role=menu class=workbench-context-menu data-floe-workbench-boundary=true>"), g = /* @__PURE__ */ a("<div role=separator aria-orientation=horizontal class=workbench-context-menu__separator>"), C = /* @__PURE__ */ a("<button type=button role=menuitem><span class=workbench-context-menu__icon aria-hidden=true></span><span class=workbench-context-menu__label>");
-function E(t) {
-  return t.kind === "action";
+import { spread as _, mergeProps as b, insert as c, createComponent as u, effect as p, className as f, template as a, delegateEvents as h } from "solid-js/web";
+import { For as v } from "solid-js";
+import { cn as x } from "../../utils/cn.js";
+import { WORKBENCH_CONTEXT_MENU_ATTR as k } from "./workbenchContextMenuDismiss.js";
+var $ = /* @__PURE__ */ a("<div role=menu class=workbench-context-menu data-floe-workbench-boundary=true>"), w = /* @__PURE__ */ a("<div role=separator aria-orientation=horizontal class=workbench-context-menu__separator>"), g = /* @__PURE__ */ a("<button type=button role=menuitem><span class=workbench-context-menu__icon aria-hidden=true></span><span class=workbench-context-menu__label>");
+function C(n) {
+  return n.kind === "action";
 }
-function A(t) {
+function M(n) {
   return (() => {
     var o = $();
     return _(o, b({
-      [w]: "true"
+      [k]: "true"
     }, {
       get style() {
         return {
-          left: `${t.x}px`,
-          top: `${t.y}px`
+          left: `${n.x}px`,
+          top: `${n.y}px`
         };
       },
-      onContextMenu: (e) => e.preventDefault()
-    }), !1, !0), c(o, u(x, {
+      onContextMenu: (t) => t.preventDefault()
+    }), !1, !0), c(o, u(v, {
       get each() {
-        return t.items;
+        return n.items;
       },
-      children: (e) => {
-        if (!E(e))
-          return g();
-        const m = e.icon;
+      children: (t) => {
+        if (!C(t))
+          return w();
+        const m = t.icon;
         return (() => {
-          var n = C(), i = n.firstChild, d = i.nextSibling;
-          return v(n, "click", e.onSelect, !0), c(i, u(m, {
+          var r = g(), i = r.firstChild, d = i.nextSibling;
+          return r.$$click = (e) => {
+            t.onSelect({
+              source: e.detail === 0 ? "keyboard" : "pointer",
+              clientX: e.clientX,
+              clientY: e.clientY
+            });
+          }, c(i, u(m, {
             class: "workbench-context-menu__icon-svg"
-          })), c(d, () => e.label), f((r) => {
-            var l = k("workbench-context-menu__item", e.destructive && "is-destructive"), s = e.disabled;
-            return l !== r.e && p(n, r.e = l), s !== r.t && (n.disabled = r.t = s), r;
+          })), c(d, () => t.label), p((e) => {
+            var l = x("workbench-context-menu__item", t.destructive && "is-destructive"), s = t.disabled;
+            return l !== e.e && f(r, e.e = l), s !== e.t && (r.disabled = e.t = s), e;
           }, {
             e: void 0,
             t: void 0
-          }), n;
+          }), r;
         })();
       }
     })), o;
@@ -45,5 +51,5 @@ function A(t) {
 }
 h(["click"]);
 export {
-  A as WorkbenchContextMenu
+  M as WorkbenchContextMenu
 };

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,75 +1,75 @@
-import { insert as h, createComponent as d, effect as A, setAttribute as x, memo as le, template as I, Portal as se, setStyleProperty as de, use as ue, delegateEvents as ge } from "solid-js/web";
-import { createSignal as F, onCleanup as z, createEffect as ve, createMemo as W, Show as N, For as j } from "solid-js";
+import { insert as h, createComponent as d, effect as A, setAttribute as x, memo as se, template as $, Portal as de, setStyleProperty as ue, use as ge, delegateEvents as ve } from "solid-js/web";
+import { createSignal as W, onCleanup as j, createEffect as fe, createMemo as K, Show as V, For as J } from "solid-js";
 import { Motion as X } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
 import { easing as H, duration as Y } from "../../utils/animations.js";
-import { LayoutDashboard as fe, Layers as Z, Region as me, TextTool as he, MessageSquare as ke, Plus as be } from "../icons/index.js";
-import { startHotInteraction as _e } from "../../utils/hotInteraction.js";
-import { startPointerSession as we } from "../ui/pointerSession.js";
-import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as ee, createWorkbenchEdgeAutoPanController as Ee, frameFromElement as Ce } from "./workbenchEdgeAutoPan.js";
-var Se = /* @__PURE__ */ I("<button type=button class=workbench-dock__item>"), Oe = /* @__PURE__ */ I('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), Le = /* @__PURE__ */ I('<div class=workbench-dock 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>'), De = /* @__PURE__ */ I("<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>"), Me = /* @__PURE__ */ I("<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 J = 5, pe = ".workbench-dock", K = [{
+import { LayoutDashboard as me, Layers as ee, Region as he, TextTool as ke, MessageSquare as be, Plus as _e } from "../icons/index.js";
+import { startHotInteraction as we } from "../../utils/hotInteraction.js";
+import { startPointerSession as Ee } from "../ui/pointerSession.js";
+import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as te, createWorkbenchEdgeAutoPanController as Ce, frameFromElement as Se } from "./workbenchEdgeAutoPan.js";
+var Oe = /* @__PURE__ */ $("<button type=button class=workbench-dock__item>"), Le = /* @__PURE__ */ $('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), De = /* @__PURE__ */ $('<div class=workbench-dock 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>'), Me = /* @__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>"), ye = /* @__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 Q = 5, Ie = ".workbench-dock", N = [{
   mode: "work",
   label: "Work Mode",
   description: "Operate windows and sticky notes",
-  icon: fe
+  icon: me
 }, {
   mode: "background",
   label: "Composition Mode",
   description: "Arrange regions and canvas text",
-  icon: Z
-}], ye = [{
+  icon: ee
+}], $e = [{
   tool: "sticky-note",
   label: "Sticky",
-  icon: ke
-}], Ie = [{
+  icon: be
+}], pe = [{
   tool: "background-region",
   label: "Region",
-  icon: me
+  icon: he
 }, {
   tool: "text",
   label: "Text",
-  icon: he
+  icon: ke
 }];
-function te() {
-  const t = document.querySelector(ee);
-  return t instanceof HTMLElement ? t.getBoundingClientRect() : null;
+function ne() {
+  const e = document.querySelector(te);
+  return e instanceof HTMLElement ? e.getBoundingClientRect() : null;
 }
-function V(t, s, a) {
-  return t >= a.left && t <= a.right && s >= a.top && s <= a.bottom;
+function G(e, s, a) {
+  return e >= a.left && e <= a.right && s >= a.top && s <= a.bottom;
 }
-function Pe(t, s) {
-  const a = te();
-  return a ? V(t, s, a) : !1;
+function Pe(e, s) {
+  const a = ne();
+  return a ? G(e, s, a) : !1;
 }
-function Te(t, s, a, u) {
-  const o = te();
+function Te(e, s, a, u) {
+  const o = ne();
   if (!o) return !1;
-  if (V(t, s, o) || V(a, u, o))
+  if (G(e, s, o) || G(a, u, o))
     return !0;
-  const n = a - t, w = u - s;
+  const n = a - e, w = u - s;
   let k = 0, v = 1;
   const g = (f, C) => {
     if (f === 0) return C >= 0;
     const E = C / f;
     return f < 0 ? E > v ? !1 : (E > k && (k = E), !0) : E < k ? !1 : (E < v && (v = E), !0);
   };
-  return g(-n, t - o.left) && g(n, o.right - t) && g(-w, s - o.top) && g(w, o.bottom - s);
+  return g(-n, e - o.left) && g(n, o.right - e) && g(-w, s - o.top) && g(w, o.bottom - s);
 }
-function Q(t, s) {
+function Z(e, s) {
   if (typeof document.elementFromPoint != "function") return !1;
-  const a = document.elementFromPoint(t, s);
-  return a instanceof Element && a.closest(pe) !== null;
+  const a = document.elementFromPoint(e, s);
+  return a instanceof Element && a.closest(Ie) !== null;
 }
-function $e(t) {
-  const s = () => t.hoverOffset === -1 ? {
+function Re(e) {
+  const s = () => e.hoverOffset === -1 ? {
     scale: 1.26,
     y: -6,
     x: 0
-  } : t.hoverOffset === 1 ? {
+  } : e.hoverOffset === 1 ? {
     scale: 1.08,
     y: -2,
     x: 5
-  } : t.hoverOffset === -2 ? {
+  } : e.hoverOffset === -2 ? {
     scale: 1.08,
     y: -2,
     x: -5
@@ -77,12 +77,12 @@ function $e(t) {
     scale: 1,
     y: 0,
     x: 0
-  }, a = () => t.hoverOffset === -1, u = (o) => {
-    o.button === 0 && t.onDragBegin(o, t.kind, t.id, t.label, t.icon);
+  }, a = () => e.hoverOffset === -1, u = (o) => {
+    o.button === 0 && e.onDragBegin(o, e.kind, e.id, e.label, e.icon);
   };
   return (() => {
-    var o = Se();
-    return o.$$pointerdown = u, o.addEventListener("pointerleave", () => t.onLeave()), o.addEventListener("pointerenter", () => t.onEnter()), h(o, d(X.span, {
+    var o = Oe();
+    return o.$$pointerdown = u, o.addEventListener("pointerleave", () => e.onLeave()), o.addEventListener("pointerenter", () => e.onEnter()), h(o, d(X.span, {
       class: "workbench-dock__tile",
       get animate() {
         return s();
@@ -95,7 +95,7 @@ function $e(t) {
       },
       get children() {
         return (() => {
-          const n = t.icon;
+          const n = e.icon;
           return d(n, {
             class: "workbench-dock__icon"
           });
@@ -116,10 +116,10 @@ function $e(t) {
         };
       },
       get children() {
-        return t.label;
+        return e.label;
       }
     }), null), A((n) => {
-      var w = !!t.active, k = !t.visible, v = !!a(), g = !!t.isDragging, f = `${t.label} — click to solo, drag to canvas to create`, C = t.active;
+      var w = !!e.active, k = !!(e.filterable && !e.visible), v = !!a(), g = !!e.isDragging, f = e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, C = e.active;
       return w !== n.e && o.classList.toggle("is-active", n.e = w), k !== n.t && o.classList.toggle("is-filter-muted", n.t = k), v !== n.a && o.classList.toggle("is-hovered", n.a = v), g !== n.o && o.classList.toggle("is-source-dragging", n.o = g), f !== n.i && x(o, "aria-label", n.i = f), C !== n.n && x(o, "aria-pressed", n.n = C), n;
     }, {
       e: void 0,
@@ -131,73 +131,73 @@ function $e(t) {
     }), o;
   })();
 }
-function Ke(t) {
-  const [s, a] = F(null), [u, o] = F(null), [n, w] = F(!1);
+function Ne(e) {
+  const [s, a] = W(null), [u, o] = W(null), [n, w] = W(!1);
   let k, v, g, f = null;
-  z(() => {
+  j(() => {
     g?.stop(), v?.stop({
       reason: "manual_stop",
       commit: !1
     }), v = void 0, u()?.stopInteraction();
-  }), ve(() => {
+  }), fe(() => {
     if (!n() || typeof window > "u") return;
-    const e = (l) => {
+    const t = (l) => {
       k && l.target instanceof Node && k.contains(l.target) || w(!1);
     }, i = (l) => {
       l.key === "Escape" && w(!1);
     };
-    window.addEventListener("pointerdown", e, !0), window.addEventListener("keydown", i, !0), z(() => {
-      window.removeEventListener("pointerdown", e, !0), window.removeEventListener("keydown", i, !0);
+    window.addEventListener("pointerdown", t, !0), window.addEventListener("keydown", i, !0), j(() => {
+      window.removeEventListener("pointerdown", t, !0), window.removeEventListener("keydown", i, !0);
     });
   });
-  const C = (e) => {
+  const C = (t) => {
     const i = s();
-    return i === null ? 0 : i === e ? -1 : i === e + 1 ? -2 : i === e - 1 ? 1 : 0;
+    return i === null ? 0 : i === t ? -1 : i === t + 1 ? -2 : i === t - 1 ? 1 : 0;
   }, E = () => {
     g?.stop(), g = void 0, f = null;
   }, S = () => {
-    !t.viewport || !t.onViewportCommit || (f = t.viewport, g?.stop(), g = Ee({
+    !e.viewport || !e.onViewportCommit || (f = e.viewport, g?.stop(), g = Ce({
       readFrame: () => {
-        const e = document.querySelector(ee);
-        return e instanceof HTMLElement ? Ce(e) : null;
+        const t = document.querySelector(te);
+        return t instanceof HTMLElement ? Se(t) : null;
       },
-      readViewport: () => f ?? t.viewport ?? null,
-      commitViewport: (e) => {
-        f = e, t.onViewportCommit?.(e);
+      readViewport: () => f ?? e.viewport ?? null,
+      commitViewport: (t) => {
+        f = t, e.onViewportCommit?.(t);
       },
-      onPanStart: () => t.onViewportInteractionStart?.("pan"),
+      onPanStart: () => e.onViewportInteractionStart?.("pan"),
       shouldPan: () => {
-        const e = u();
-        return !!(e?.moved && e.hasEnteredCanvas && !Q(e.clientX, e.clientY));
+        const t = u();
+        return !!(t?.moved && t.hasEnteredCanvas && !Z(t.clientX, t.clientY));
       }
     }));
-  }, L = (e) => {
+  }, D = (t) => {
     const i = u();
     if (!i) return;
     const l = !i.moved;
     if (i.stopInteraction(), E(), o(null), v = void 0, l) {
-      t.onSoloFilter(String(i.id), U());
+      L() !== "background" && e.onSoloFilter(String(i.id), q());
       return;
     }
-    e && i.overCanvas && (i.kind === "widget" ? t.onCreateAt?.(i.id, i.clientX, i.clientY) : t.onCreateToolAt?.(i.id, i.clientX, i.clientY));
-  }, P = (e, i, l, T, r) => {
-    e.preventDefault(), v?.stop({
+    t && i.overCanvas && (i.kind === "widget" ? e.onCreateAt?.(i.id, i.clientX, i.clientY) : e.onCreateToolAt?.(i.id, i.clientX, i.clientY));
+  }, p = (t, i, l, P, r) => {
+    t.preventDefault(), v?.stop({
       reason: "manual_stop",
       commit: !1
     }), S(), o({
       kind: i,
       id: l,
-      label: T,
+      label: P,
       icon: r,
-      pointerId: e.pointerId,
-      startClientX: e.clientX,
-      startClientY: e.clientY,
-      clientX: e.clientX,
-      clientY: e.clientY,
+      pointerId: t.pointerId,
+      startClientX: t.clientX,
+      startClientY: t.clientY,
+      clientX: t.clientX,
+      clientY: t.clientY,
       moved: !1,
       overCanvas: !1,
       hasEnteredCanvas: !1,
-      stopInteraction: _e({
+      stopInteraction: we({
         kind: "drag",
         cursor: "grabbing"
       })
@@ -206,56 +206,58 @@ function Ke(t) {
       let m = !1;
       o((_) => {
         if (!_ || _.pointerId !== c.pointerId) return _;
-        const B = c.clientX - _.startClientX, $ = c.clientY - _.startClientY, D = _.moved || Math.abs(B) > J || Math.abs($) > J, O = Q(c.clientX, c.clientY), y = D && Pe(c.clientX, c.clientY) && !O, R = D && !O && Te(_.clientX, _.clientY, c.clientX, c.clientY), q = _.hasEnteredCanvas || y || R;
-        return m = D && q && !O, {
+        const B = c.clientX - _.startClientX, T = c.clientY - _.startClientY, M = _.moved || Math.abs(B) > Q || Math.abs(T) > Q, O = Z(c.clientX, c.clientY), I = M && Pe(c.clientX, c.clientY) && !O, R = M && !O && Te(_.clientX, _.clientY, c.clientX, c.clientY), z = _.hasEnteredCanvas || I || R;
+        return m = M && z && !O, {
           ..._,
           clientX: c.clientX,
           clientY: c.clientY,
-          moved: D,
-          overCanvas: y,
-          hasEnteredCanvas: q
+          moved: M,
+          overCanvas: I,
+          hasEnteredCanvas: z
         };
       }), m && g?.updatePointer(c.clientX, c.clientY);
     };
-    v = we({
-      pointerEvent: e,
-      captureEl: e.currentTarget,
+    v = Ee({
+      pointerEvent: t,
+      captureEl: t.currentTarget,
       onMove: b,
       onEnd: ({
         commit: c
-      }) => L(c)
+      }) => D(c)
     });
-  }, ne = () => u()?.kind === "widget" ? u().id : null, oe = () => u()?.kind === "tool" ? u().id : null, M = () => t.mode === "background" || t.mode === "annotation" ? "background" : "work", ie = W(() => K.find((e) => e.mode === M()) ?? K[0]), G = W(() => M() === "background" ? Ie.map((e) => ({
-    id: e.tool,
+  }, oe = () => u()?.kind === "widget" ? u().id : null, ie = () => u()?.kind === "tool" ? u().id : null, L = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", re = K(() => N.find((t) => t.mode === L()) ?? N[0]), U = K(() => L() === "background" ? pe.map((t) => ({
+    id: t.tool,
     kind: "tool",
-    label: e.label,
-    icon: e.icon
-  })) : [...ye.map((e) => ({
-    id: e.tool,
+    label: t.label,
+    icon: t.icon
+  })) : [...$e.map((t) => ({
+    id: t.tool,
     kind: "tool",
-    label: e.label,
-    icon: e.icon
-  })), ...t.widgetDefinitions.map((e) => ({
-    id: e.type,
+    label: t.label,
+    icon: t.icon
+  })), ...e.widgetDefinitions.map((t) => ({
+    id: t.type,
     kind: "widget",
-    label: e.label,
-    icon: e.icon
-  }))]), U = W(() => G().map((e) => String(e.id))), re = (e) => t.filters[e] !== !1, ae = (e) => {
-    const i = U();
-    return i.length > 1 && i.every((l) => t.filters[l] !== !1 == (l === e));
-  }, p = () => s() === 0, ce = () => ({
-    scale: p() || n() ? 1.26 : 1,
-    y: p() || n() ? -6 : 0,
+    label: t.label,
+    icon: t.icon
+  }))]), q = K(() => U().map((t) => String(t.id))), F = () => L() !== "background", ae = (t) => !F() || e.filters[t] !== !1, ce = (t) => {
+    if (!F())
+      return !1;
+    const i = q();
+    return i.length > 1 && i.every((l) => e.filters[l] !== !1 == (l === t));
+  }, y = () => s() === 0, le = () => ({
+    scale: y() || n() ? 1.26 : 1,
+    y: y() || n() ? -6 : 0,
     x: s() === 1 ? -5 : 0
   });
   return [(() => {
-    var e = Le(), i = e.firstChild, l = i.firstChild;
-    i.nextSibling, e.addEventListener("pointerleave", () => a(null));
-    var T = k;
-    return typeof T == "function" ? ue(T, e) : k = e, l.$$click = () => w((r) => !r), l.addEventListener("pointerleave", () => a((r) => r === 0 ? null : r)), l.addEventListener("pointerenter", () => a(0)), h(l, d(X.span, {
+    var t = De(), i = t.firstChild, l = i.firstChild;
+    i.nextSibling, t.addEventListener("pointerleave", () => a(null));
+    var P = k;
+    return typeof P == "function" ? ge(P, t) : k = t, l.$$click = () => w((r) => !r), l.addEventListener("pointerleave", () => a((r) => r === 0 ? null : r)), l.addEventListener("pointerenter", () => a(0)), h(l, d(X.span, {
       class: "workbench-dock__tile",
       get animate() {
-        return ce();
+        return le();
       },
       get transition() {
         return {
@@ -264,7 +266,7 @@ function Ke(t) {
         };
       },
       get children() {
-        return d(Z, {
+        return d(ee, {
           class: "workbench-dock__icon"
         });
       }
@@ -272,8 +274,8 @@ function Ke(t) {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: p() && !n() ? 1 : 0,
-          y: p() && !n() ? -6 : 0
+          opacity: y() && !n() ? 1 : 0,
+          y: y() && !n() ? -6 : 0
         };
       },
       get transition() {
@@ -283,27 +285,27 @@ function Ke(t) {
         };
       },
       get children() {
-        return ie().label;
+        return re().label;
       }
-    }), null), h(i, d(N, {
+    }), null), h(i, d(V, {
       get when() {
         return n();
       },
       get children() {
-        var r = Oe();
-        return h(r, d(j, {
-          each: K,
+        var r = Le();
+        return h(r, d(J, {
+          each: N,
           children: (b) => {
             const c = b.icon;
             return (() => {
-              var m = De(), _ = m.firstChild, B = _.nextSibling, $ = B.firstChild, D = $.nextSibling;
+              var m = Me(), _ = m.firstChild, B = _.nextSibling, T = B.firstChild, M = T.nextSibling;
               return m.$$click = () => {
-                t.onSelectMode?.(b.mode), w(!1);
+                e.onSelectMode?.(b.mode), w(!1);
               }, h(_, d(c, {
                 class: "workbench-dock__mode-icon"
-              })), h($, () => b.label), h(D, () => b.description), A((O) => {
-                var y = M() === b.mode, R = M() === b.mode;
-                return y !== O.e && m.classList.toggle("is-active", O.e = y), R !== O.t && x(m, "aria-checked", O.t = R), O;
+              })), h(T, () => b.label), h(M, () => b.description), A((O) => {
+                var I = L() === b.mode, R = L() === b.mode;
+                return I !== O.e && m.classList.toggle("is-active", O.e = I), R !== O.t && x(m, "aria-checked", O.t = R), O;
               }, {
                 e: void 0,
                 t: void 0
@@ -312,13 +314,13 @@ function Ke(t) {
           }
         })), r;
       }
-    }), null), h(e, d(j, {
+    }), null), h(t, d(J, {
       get each() {
-        return G();
+        return U();
       },
       children: (r, b) => {
         const c = () => b() + 1;
-        return d($e, {
+        return d(Re, {
           get id() {
             return String(r.id);
           },
@@ -332,64 +334,67 @@ function Ke(t) {
             return r.icon;
           },
           get active() {
-            return ae(String(r.id));
+            return ce(String(r.id));
           },
           get visible() {
-            return re(String(r.id));
+            return ae(String(r.id));
+          },
+          get filterable() {
+            return F();
           },
           get hoverOffset() {
             return C(c());
           },
           get isDragging() {
-            return le(() => r.kind === "widget")() ? ne() === r.id : oe() === r.id;
+            return se(() => r.kind === "widget")() ? oe() === r.id : ie() === r.id;
           },
           onEnter: () => a(c()),
           onLeave: () => a((m) => m === c() ? null : m),
-          onDragBegin: P
+          onDragBegin: p
         });
       }
     }), null), A((r) => {
-      var b = M() === "background", c = !!(p() || n()), m = n();
+      var b = L() === "background", c = !!(y() || n()), m = n();
       return b !== r.e && l.classList.toggle("is-active", r.e = b), c !== r.t && l.classList.toggle("is-hovered", r.t = c), m !== r.a && x(l, "aria-expanded", r.a = m), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0
-    }), e;
-  })(), d(N, {
+    }), t;
+  })(), d(V, {
     get when() {
       return u()?.moved ?? !1;
     },
     get children() {
-      return d(Re, {
+      return d(Ae, {
         state: u
       });
     }
   })];
 }
-function Re(t) {
+function Ae(e) {
   const s = () => {
-    const n = t.state();
+    const n = e.state();
     return n ? `translate3d(${n.clientX + 14}px, ${n.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
-  }, a = () => t.state()?.overCanvas ?? !1, u = () => t.state()?.label ?? "", o = () => t.state()?.icon;
-  return d(se, {
+  }, a = () => e.state()?.overCanvas ?? !1, u = () => e.state()?.label ?? "", o = () => e.state()?.icon;
+  return d(de, {
     get children() {
-      var n = Me(), w = n.firstChild, k = w.nextSibling, v = k.firstChild, g = v.nextSibling, f = g.firstChild, C = f.nextSibling, E = C.firstChild;
-      return h(v, d(N, {
+      var n = ye(), w = n.firstChild, k = w.nextSibling, v = k.firstChild, g = v.nextSibling, f = g.firstChild, C = f.nextSibling, E = C.firstChild;
+      return h(v, d(V, {
         get when() {
           return o();
         },
         children: (S) => {
-          const L = S();
-          return d(L, {
+          const D = S();
+          return d(D, {
             class: "w-4 h-4"
           });
         }
-      })), h(f, u), h(C, d(be, {
+      })), h(f, u), h(C, d(_e, {
         class: "w-3 h-3"
       }), E), h(E, () => a() ? "Drop to create" : "Drag onto canvas"), A((S) => {
-        var L = !!a(), P = s();
-        return L !== S.e && n.classList.toggle("is-over-canvas", S.e = L), P !== S.t && de(n, "transform", S.t = P), S;
+        var D = !!a(), p = s();
+        return D !== S.e && n.classList.toggle("is-over-canvas", S.e = D), p !== S.t && ue(n, "transform", S.t = p), S;
       }, {
         e: void 0,
         t: void 0
@@ -397,7 +402,7 @@ function Re(t) {
     }
   });
 }
-ge(["pointerdown", "click"]);
+ve(["pointerdown", "click"]);
 export {
-  Ke as WorkbenchDock
+  Ne as WorkbenchDock
 };