@floegence/floe-webapp-core 0.81.1 → 0.81.2

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,6 +1,6 @@
-import { insert as h, createComponent as l, effect as K, setAttribute as L, memo as B, className as Ke, template as $, addEventListener as Ce, Portal as We, setStyleProperty as Ne, use as Ve, delegateEvents as Ge } from "solid-js/web";
+import { insert as m, createComponent as d, effect as K, setAttribute as I, memo as B, className as He, template as $, Dynamic as Ke, Portal as We, setStyleProperty as Ne, use as Ve, delegateEvents as Ge } from "solid-js/web";
 import { createSignal as de, onCleanup as p, createEffect as ee, createMemo as A, Show as R, For as te, Index as Ue } from "solid-js";
-import { Motion as W } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { Motion as W } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.15/node_modules/solid-motionone/dist/index.js";
 import { easing as N, duration as V } from "../../utils/animations.js";
 import { Plus as qe } from "../icons/index.js";
 import { startHotInteraction as ze } from "../../utils/hotInteraction.js";
@@ -9,10 +9,10 @@ import { clientToCanvasWorld as Je } from "../ui/canvasGeometry.js";
 import { isBarItemContextMenuKey as Qe, keyboardBarItemContextMenuRequest as Ze } from "../layout/barItemContextMenu.js";
 import { createWorkbenchWidgetFrame as pe } from "./workbenchHelpers.js";
 import { getWidgetEntry as et } from "./widgets/widgetRegistry.js";
-import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as Ie, frameFromElement as Le, createWorkbenchEdgeAutoPanController as tt } from "./workbenchEdgeAutoPan.js";
+import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as Me, frameFromElement as Le, createWorkbenchEdgeAutoPanController as tt } from "./workbenchEdgeAutoPan.js";
 import { DockLayoutDashboard as nt, DockLayers as ot, DockRegion as rt, DockText as it, DockMessageSquare as at } from "../icons/DockIcons.js";
 var ct = /* @__PURE__ */ $("<button type=button class=workbench-dock__item>"), lt = /* @__PURE__ */ $('<button type=button class="workbench-dock__item workbench-dock__action">'), dt = /* @__PURE__ */ $("<span class=workbench-dock__external-placeholder aria-hidden=true>"), st = /* @__PURE__ */ $('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), ut = /* @__PURE__ */ $("<span class=workbench-dock__divider aria-hidden=true>"), gt = /* @__PURE__ */ $('<div data-floe-canvas-interactive=true><div class=workbench-dock__mode-switcher><button type=button class="workbench-dock__item workbench-dock__mode-trigger"aria-label="Switch canvas mode"aria-haspopup=menu></button></div><span class=workbench-dock__divider aria-hidden=true>'), vt = /* @__PURE__ */ $("<button type=button class=workbench-dock__mode-option role=menuitemradio><span class=workbench-dock__mode-option-icon></span><span class=workbench-dock__mode-option-copy><span class=workbench-dock__mode-option-label></span><span class=workbench-dock__mode-option-description>"), ft = /* @__PURE__ */ $("<div class=workbench-dock-ghost aria-hidden=true><div class=workbench-dock-ghost__halo></div><div class=workbench-dock-ghost__card><div class=workbench-dock-ghost__icon></div><div class=workbench-dock-ghost__copy><div class=workbench-dock-ghost__title></div><div class=workbench-dock-ghost__hint><span>");
-const Pe = 5, kt = 1e3, mt = ".workbench-dock", ht = [{
+const Ce = 5, kt = 1e3, mt = ".workbench-dock", ht = [{
   mode: "work",
   label: "Work Mode",
   description: "Operate windows and sticky notes",
@@ -36,38 +36,38 @@ const Pe = 5, kt = 1e3, mt = ".workbench-dock", ht = [{
   icon: it
 }];
 function _t(e) {
-  const a = e?.closest(".workbench-surface")?.querySelector(Ie);
-  return a instanceof HTMLElement ? Le(a) : null;
+  const c = e?.closest(".workbench-surface")?.querySelector(Me);
+  return c instanceof HTMLElement ? Le(c) : null;
 }
-function ue(e, v, a) {
-  return e >= a.left && e <= a.right && v >= a.top && v <= a.bottom;
+function ue(e, g, c) {
+  return e >= c.left && e <= c.right && g >= c.top && g <= c.bottom;
 }
-function Dt(e, v, a) {
-  return a ? ue(e, v, a) : !1;
+function Dt(e, g, c) {
+  return c ? ue(e, g, c) : !1;
 }
-function xe(e, v, a) {
-  return Math.min(a, Math.max(v, e));
+function Pe(e, g, c) {
+  return Math.min(c, Math.max(g, e));
 }
-function Et(e, v, a, c, d) {
+function Et(e, g, c, i, l) {
   if (!e) return !1;
-  if (ue(v, a, e) || ue(c, d, e))
+  if (ue(g, c, e) || ue(i, l, e))
     return !0;
-  const s = c - v, P = d - a;
-  let b = 0, r = 1;
-  const i = (D, x) => {
+  const _ = i - g, P = l - c;
+  let w = 0, r = 1;
+  const a = (D, x) => {
     if (D === 0) return x >= 0;
-    const f = x / D;
-    return D < 0 ? f > r ? !1 : (f > b && (b = f), !0) : f < b ? !1 : (f < r && (r = f), !0);
+    const v = x / D;
+    return D < 0 ? v > r ? !1 : (v > w && (w = v), !0) : v < w ? !1 : (v < r && (r = v), !0);
   };
-  return i(-s, v - e.left) && i(s, e.right - v) && i(-P, a - e.top) && i(P, e.bottom - a);
+  return a(-_, g - e.left) && a(_, e.right - g) && a(-P, c - e.top) && a(P, e.bottom - c);
 }
-function Me(e, v, a) {
-  if (!a || typeof document.elementFromPoint != "function") return !1;
-  const c = document.elementFromPoint(e, v);
-  return c instanceof Element && c.closest(mt) === a;
+function xe(e, g, c) {
+  if (!c || typeof document.elementFromPoint != "function") return !1;
+  const i = document.elementFromPoint(e, g);
+  return i instanceof Element && i.closest(mt) === c;
 }
 function se(e) {
-  const v = () => e.hoverOffset === -1 ? {
+  const g = () => e.hoverOffset === -1 ? {
     scale: 1.26,
     y: -6,
     x: 0
@@ -83,29 +83,29 @@ function se(e) {
     scale: 1,
     y: 0,
     x: 0
-  }, a = () => e.hoverOffset === -1, c = (r) => {
+  }, c = () => e.hoverOffset === -1, i = (r) => {
     r.button === 0 && e.onDragBegin(r, e.kind, e.id, e.label, e.icon, r.currentTarget, e.canvasPlacement, null);
-  }, d = (r) => {
+  }, l = (r) => {
     e.onContextMenu && (r.preventDefault(), r.stopPropagation(), e.onContextMenu({
       trigger: r.currentTarget,
       clientX: r.clientX,
       clientY: r.clientY,
       source: "pointer"
     }));
-  }, s = (r) => {
+  }, _ = (r) => {
     !e.onContextMenu || !Qe(r) || (r.preventDefault(), r.stopPropagation(), e.onContextMenu(Ze(r.currentTarget)));
   }, P = (r) => {
     r.detail === 0 && e.onKeyboardActivate(r.currentTarget);
-  }, b = () => {
+  }, w = () => {
     const r = e.presentation;
     return r ? r.count === 0 ? `${e.label} +` : r.active && r.currentIndex !== null ? `${e.label} ${r.currentIndex + 1}/${r.count}` : r.count > 1 ? `${e.label} ${r.count}` : e.label : e.label;
   };
   return (() => {
     var r = ct();
-    return r.$$keydown = s, r.$$contextmenu = d, r.$$click = P, r.$$pointerdown = c, r.addEventListener("pointerleave", () => e.onLeave()), r.addEventListener("pointerenter", () => e.onEnter()), h(r, l(W.span, {
+    return r.$$keydown = _, r.$$contextmenu = l, r.$$click = P, r.$$pointerdown = i, r.addEventListener("pointerleave", () => e.onLeave()), r.addEventListener("pointerenter", () => e.onEnter()), m(r, d(W.span, {
       class: "workbench-dock__tile",
       get animate() {
-        return v();
+        return g();
       },
       get transition() {
         return {
@@ -115,18 +115,18 @@ function se(e) {
       },
       get children() {
         return (() => {
-          const i = e.icon;
-          return l(i, {
+          const a = e.icon;
+          return d(a, {
             class: "workbench-dock__icon"
           });
         })();
       }
-    }), null), h(r, l(W.span, {
+    }), null), m(r, d(W.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: a() ? 1 : 0,
-          y: a() ? -6 : 0
+          opacity: c() ? 1 : 0,
+          y: c() ? -6 : 0
         };
       },
       get transition() {
@@ -136,11 +136,11 @@ function se(e) {
         };
       },
       get children() {
-        return B(() => e.activationMode === "focus-cycle")() ? b() : e.label;
+        return B(() => e.activationMode === "focus-cycle")() ? w() : e.label;
       }
-    }), null), K((i) => {
-      var D = e.kind === "host" ? e.id : void 0, x = e.kind === "widget" || e.kind === "tool" ? e.id : void 0, f = !!e.active, M = !!(e.filterable && !e.visible), X = !!a(), z = !!e.isDragging, Y = e.activationMode === "focus-cycle" && e.presentation ? b() : e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, j = e.activationMode === "focus-cycle" ? e.presentation?.active : e.active, F = e.onContextMenu ? "menu" : void 0;
-      return D !== i.e && L(r, "data-workbench-dock-item", i.e = D), x !== i.t && L(r, "data-workbench-dock-component", i.t = x), f !== i.a && r.classList.toggle("is-active", i.a = f), M !== i.o && r.classList.toggle("is-filter-muted", i.o = M), X !== i.i && r.classList.toggle("is-hovered", i.i = X), z !== i.n && r.classList.toggle("is-source-dragging", i.n = z), Y !== i.s && L(r, "aria-label", i.s = Y), j !== i.h && L(r, "aria-pressed", i.h = j), F !== i.r && L(r, "aria-haspopup", i.r = F), i;
+    }), null), K((a) => {
+      var D = e.kind === "host" ? e.id : void 0, x = e.kind === "widget" || e.kind === "tool" ? e.id : void 0, v = !!e.active, M = !!(e.filterable && !e.visible), X = !!c(), z = !!e.isDragging, Y = e.activationMode === "focus-cycle" && e.presentation ? w() : e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, j = e.activationMode === "focus-cycle" ? e.presentation?.active : e.active, F = e.onContextMenu ? "menu" : void 0;
+      return D !== a.e && I(r, "data-workbench-dock-item", a.e = D), x !== a.t && I(r, "data-workbench-dock-component", a.t = x), v !== a.a && r.classList.toggle("is-active", a.a = v), M !== a.o && r.classList.toggle("is-filter-muted", a.o = M), X !== a.i && r.classList.toggle("is-hovered", a.i = X), z !== a.n && r.classList.toggle("is-source-dragging", a.n = z), Y !== a.s && I(r, "aria-label", a.s = Y), j !== a.h && I(r, "aria-pressed", a.h = j), F !== a.r && I(r, "aria-haspopup", a.r = F), a;
     }, {
       e: void 0,
       t: void 0,
@@ -155,17 +155,17 @@ function se(e) {
   })();
 }
 function Ct(e) {
-  const v = () => e.hoverOffset === -1, a = () => ({
+  const g = () => e.hoverOffset === -1, c = () => ({
     scale: 1,
     y: 0,
     x: 0
-  }), c = e.action.icon;
+  });
   return (() => {
-    var d = lt();
-    return d.$$click = (s) => e.onActivate(s.currentTarget), d.addEventListener("dragstart", (s) => s.preventDefault()), Ce(d, "pointerleave", e.onLeave), Ce(d, "pointerenter", e.onEnter), L(d, "draggable", !1), h(d, l(W.span, {
+    var i = lt();
+    return i.$$click = (l) => e.onActivate(l.currentTarget), i.addEventListener("dragstart", (l) => l.preventDefault()), i.addEventListener("pointerleave", () => e.onLeave()), i.addEventListener("pointerenter", () => e.onEnter()), I(i, "draggable", !1), m(i, d(W.span, {
       class: "workbench-dock__tile",
       get animate() {
-        return a();
+        return c();
       },
       get transition() {
         return {
@@ -174,16 +174,19 @@ function Ct(e) {
         };
       },
       get children() {
-        return l(c, {
+        return d(Ke, {
+          get component() {
+            return e.action.icon;
+          },
           class: "workbench-dock__icon"
         });
       }
-    }), null), h(d, l(W.span, {
+    }), null), m(i, d(W.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: v() ? 1 : 0,
-          y: v() ? -6 : 0
+          opacity: g() ? 1 : 0,
+          y: g() ? -6 : 0
         };
       },
       get transition() {
@@ -195,57 +198,57 @@ function Ct(e) {
       get children() {
         return e.action.label;
       }
-    }), null), K((s) => {
-      var P = e.action.id, b = !!e.action.active, r = !!v(), i = e.action.label, D = e.action.active;
-      return P !== s.e && L(d, "data-workbench-dock-action", s.e = P), b !== s.t && d.classList.toggle("is-active", s.t = b), r !== s.a && d.classList.toggle("is-hovered", s.a = r), i !== s.o && L(d, "aria-label", s.o = i), D !== s.i && L(d, "aria-pressed", s.i = D), s;
+    }), null), K((l) => {
+      var _ = e.action.id, P = !!e.action.active, w = !!g(), r = e.action.label, a = e.action.active;
+      return _ !== l.e && I(i, "data-workbench-dock-action", l.e = _), P !== l.t && i.classList.toggle("is-active", l.t = P), w !== l.a && i.classList.toggle("is-hovered", l.a = w), r !== l.o && I(i, "aria-label", l.o = r), a !== l.i && I(i, "aria-pressed", l.i = a), l;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0
-    }), d;
+    }), i;
   })();
 }
 function Bt(e) {
-  const [v, a] = de(null), [c, d] = de(null), [s, P] = de(!1);
-  let b, r, i, D, x = null;
-  const f = () => e.activationMode === "focus-cycle" ? "focus-cycle" : "solo-filter";
+  const [g, c] = de(null), [i, l] = de(null), [_, P] = de(!1);
+  let w, r, a, D, x = null;
+  const v = () => e.activationMode === "focus-cycle" ? "focus-cycle" : "solo-filter";
   p(() => {
     D?.stop(), r?.stop({
       reason: "manual_stop",
       commit: !1
-    }), r = void 0, i?.clear(), i = void 0, c()?.stopInteraction(), e.onDragPreviewChange?.(null), e.registerExternalDockDragController?.(null);
+    }), r = void 0, a?.clear(), a = void 0, i()?.stopInteraction(), e.onDragPreviewChange?.(null), e.registerExternalDockDragController?.(null);
   }), ee(() => {
-    e.onDragPreviewChange?.(c()?.preview ?? null);
+    e.onDragPreviewChange?.(i()?.preview ?? null);
   }), ee(() => {
     const t = (n) => {
-      n.key !== "Escape" || !c() || (n.preventDefault(), r?.stop({
+      n.key !== "Escape" || !i() || (n.preventDefault(), r?.stop({
         reason: "manual_stop",
         commit: !1
       }));
     };
     window.addEventListener("keydown", t, !0), p(() => window.removeEventListener("keydown", t, !0));
   }), ee(() => {
-    if (!s() || typeof window > "u") return;
-    const t = (k) => {
-      b && k.target instanceof Node && b.contains(k.target) || P(!1);
-    }, n = (k) => {
-      k.key === "Escape" && P(!1);
+    if (!_() || typeof window > "u") return;
+    const t = (f) => {
+      w && f.target instanceof Node && w.contains(f.target) || P(!1);
+    }, n = (f) => {
+      f.key === "Escape" && P(!1);
     };
     window.addEventListener("pointerdown", t, !0), window.addEventListener("keydown", n, !0), p(() => {
       window.removeEventListener("pointerdown", t, !0), window.removeEventListener("keydown", n, !0);
     });
   });
   const M = (t) => {
-    const n = v();
+    const n = g();
     return n === null || n <= G().length ? 0 : n === t ? -1 : n === t + 1 ? -2 : n === t - 1 ? 1 : 0;
   }, X = () => {
     D?.stop(), D = void 0, x = null;
   }, z = () => {
     !e.viewport || !e.onViewportCommit || (x = e.viewport, D?.stop(), D = tt({
       readFrame: () => {
-        const n = b?.closest(".workbench-surface")?.querySelector(Ie);
+        const n = w?.closest(".workbench-surface")?.querySelector(Me);
         return n instanceof HTMLElement ? Le(n) : null;
       },
       readViewport: () => x ?? e.viewport ?? null,
@@ -254,11 +257,11 @@ function Bt(e) {
       },
       onPanStart: () => e.onViewportInteractionStart?.("pan"),
       shouldPan: () => {
-        const t = c();
-        return !!(t?.moved && t.hasEnteredCanvas && !Me(t.clientX, t.clientY, b));
+        const t = i();
+        return !!(t?.moved && t.hasEnteredCanvas && !xe(t.clientX, t.clientY, w));
       }
     }));
-  }, Y = (t, n, k, E) => {
+  }, Y = (t, n, f, E) => {
     if (e.onDockActivation?.({
       kind: t,
       id: String(n)
@@ -267,24 +270,24 @@ function Bt(e) {
       e.dockItems?.find((o) => o.id === n)?.onActivate?.(E);
       return;
     }
-    const I = {
+    const L = {
       kind: t,
       id: n,
-      label: k,
+      label: f,
       trigger: E
     };
-    if (!e.onItemClick?.(I)) {
-      if (f() === "focus-cycle") {
-        e.onFocusCycleItem?.(I);
+    if (!e.onItemClick?.(L)) {
+      if (v() === "focus-cycle") {
+        e.onFocusCycleItem?.(L);
         return;
       }
       y() !== "background" && e.onSoloFilter(String(n), ke());
     }
   }, j = (t) => {
-    const n = c();
+    const n = i();
     if (!n) return;
-    const k = !n.moved, E = x ?? e.viewport;
-    if (n.stopInteraction(), X(), d(null), r = void 0, n.kind === "external" && n.moved && i?.expire(), k) {
+    const f = !n.moved, E = x ?? e.viewport;
+    if (n.stopInteraction(), X(), l(null), r = void 0, n.kind === "external" && n.moved && a?.expire(), f) {
       if (n.kind === "external" || !(n.trigger instanceof HTMLButtonElement)) return;
       Y(n.kind, n.id, n.label, n.trigger);
       return;
@@ -294,29 +297,29 @@ function Bt(e) {
       return;
     }
     if (t && n.overCanvas && n.canvasPlacement) {
-      const I = n.canvasFrame && E ? Je(n.canvasFrame, E, {
+      const L = n.canvasFrame && E ? Je(n.canvasFrame, E, {
         clientX: n.clientX,
         clientY: n.clientY
       }) : null, o = n.canvasFrame ? {
         dropAllowed: n.overCanvas,
         canvasFrame: n.canvasFrame,
-        ...I ? {
-          worldPoint: I
+        ...L ? {
+          worldPoint: L
         } : {}
       } : void 0;
       n.canvasPlacement.onDrop(n.clientX, n.clientY, o);
     }
-  }, F = (t, n, k, E, I, o, _, w, u = "before-components") => {
+  }, F = (t, n, f, E, L, o, b, h, s = "before-components") => {
     t.preventDefault(), r?.stop({
       reason: "manual_stop",
       commit: !1
     }), z();
-    const C = _t(b);
-    d({
+    const C = _t(w);
+    l({
       kind: n,
-      id: k,
+      id: f,
       label: E,
-      icon: I,
+      icon: L,
       pointerId: t.pointerId,
       startClientX: t.clientX,
       startClientY: t.clientY,
@@ -327,9 +330,9 @@ function Bt(e) {
       hasEnteredCanvas: !1,
       canvasFrame: C,
       preview: null,
-      canvasPlacement: _,
-      dockDrop: w,
-      dockPlacement: u,
+      canvasPlacement: b,
+      dockDrop: h,
+      dockPlacement: s,
       stopInteraction: ze({
         kind: "drag",
         cursor: "grabbing"
@@ -337,61 +340,61 @@ function Bt(e) {
       trigger: o,
       overDock: !1
     });
-    const T = (g) => {
+    const T = (u) => {
       let O = !1;
-      d((m) => {
-        if (!m || m.pointerId !== g.pointerId) return m;
-        const J = g.clientX - m.startClientX, Q = g.clientY - m.startClientY, H = m.moved || Math.abs(J) > Pe || Math.abs(Q) > Pe;
-        if (m.kind === "external" && H && !m.moved) {
+      l((k) => {
+        if (!k || k.pointerId !== u.pointerId) return k;
+        const J = u.clientX - k.startClientX, Q = u.clientY - k.startClientY, H = k.moved || Math.abs(J) > Ce || Math.abs(Q) > Ce;
+        if (k.kind === "external" && H && !k.moved) {
           let U;
           const q = () => {
-            U !== void 0 && window.clearTimeout(U), m.trigger.removeEventListener("click", _e, !0), window.removeEventListener("pointerdown", De, !0), i?.clear === q && (i = void 0);
+            U !== void 0 && window.clearTimeout(U), k.trigger.removeEventListener("click", _e, !0), window.removeEventListener("pointerdown", De, !0), a?.clear === q && (a = void 0);
           }, _e = (Ee) => {
             Ee.preventDefault(), Ee.stopImmediatePropagation(), q();
-          }, De = () => q(), He = () => {
+          }, De = () => q(), Re = () => {
             U !== void 0 && window.clearTimeout(U), U = window.setTimeout(q, kt);
           };
-          m.trigger.addEventListener("click", _e, !0), window.addEventListener("pointerdown", De, !0), i = {
+          k.trigger.addEventListener("click", _e, !0), window.addEventListener("pointerdown", De, !0), a = {
             clear: q,
-            expire: He
+            expire: Re
           };
         }
-        const Z = Me(g.clientX, g.clientY, b), S = m.canvasFrame, he = H && Dt(g.clientX, g.clientY, S), we = he && !Z, Fe = H && !Z && Et(S, m.clientX, m.clientY, g.clientX, g.clientY), be = m.hasEnteredCanvas || he || Fe;
+        const Z = xe(u.clientX, u.clientY, w), S = k.canvasFrame, he = H && Dt(u.clientX, u.clientY, S), we = he && !Z, Ye = H && !Z && Et(S, k.clientX, k.clientY, u.clientX, u.clientY), be = k.hasEnteredCanvas || he || Ye;
         O = H && be && !Z;
-        const Be = S ? xe(g.clientX, S.left, S.right) : g.clientX, Re = S ? xe(g.clientY, S.top, S.bottom) : g.clientY;
+        const Fe = S ? Pe(u.clientX, S.left, S.right) : u.clientX, Be = S ? Pe(u.clientY, S.top, S.bottom) : u.clientY;
         return {
-          ...m,
-          clientX: g.clientX,
-          clientY: g.clientY,
+          ...k,
+          clientX: u.clientX,
+          clientY: u.clientY,
           moved: H,
           overDock: Z,
           overCanvas: we,
           hasEnteredCanvas: be,
-          preview: H && S && m.canvasPlacement?.preview ? {
-            kind: m.canvasPlacement.preview.kind,
-            id: m.canvasPlacement.preview.id,
-            label: m.label,
-            clientX: Be,
-            clientY: Re,
+          preview: H && S && k.canvasPlacement?.preview ? {
+            kind: k.canvasPlacement.preview.kind,
+            id: k.canvasPlacement.preview.id,
+            label: k.label,
+            clientX: Fe,
+            clientY: Be,
             dropAllowed: we,
             canvasFrame: S
           } : null
         };
-      }), O && D?.updatePointer(g.clientX, g.clientY);
+      }), O && D?.updatePointer(u.clientX, u.clientY);
     };
     r = je({
       pointerEvent: t,
       captureEl: t.currentTarget,
       onMove: T,
       onEnd: ({
-        commit: g,
+        commit: u,
         snapshot: O
       }) => {
         T({
           pointerId: O.pointerId,
           clientX: O.latestClientX,
           clientY: O.latestClientY
-        }), j(g);
+        }), j(u);
       }
     });
   }, ne = (t) => t ? {
@@ -399,28 +402,28 @@ function Bt(e) {
       kind: "widget",
       id: t.widgetType
     },
-    onDrop: (n, k, E) => {
+    onDrop: (n, f, E) => {
       if (!E?.worldPoint) return;
-      const I = et(t.widgetType, e.widgetDefinitions);
+      const L = et(t.widgetType, e.widgetDefinitions);
       t.onDrop({
         widgetType: t.widgetType,
         centerWorld: E.worldPoint,
-        frame: pe(I, {
+        frame: pe(L, {
           anchor: "center",
           worldX: E.worldPoint.worldX,
           worldY: E.worldPoint.worldY
         })
       });
     }
-  } : null, ye = (t, n) => {
-    t.button !== 0 || !(t.currentTarget instanceof HTMLElement) || (i?.clear(), i = void 0, F(t, "external", n.id, n.label, n.icon, t.currentTarget, ne(n.canvasPlacement), n.onDropToDock ?? null, n.dockPlacement ?? "before-components"));
+  } : null, Ie = (t, n) => {
+    t.button !== 0 || !(t.currentTarget instanceof HTMLElement) || (a?.clear(), a = void 0, F(t, "external", n.id, n.label, n.icon, t.currentTarget, ne(n.canvasPlacement), n.onDropToDock ?? null, n.dockPlacement ?? "before-components"));
   };
   ee(() => {
     e.registerExternalDockDragController?.({
-      begin: ye
+      begin: Ie
     }), p(() => e.registerExternalDockDragController?.(null));
   });
-  const Se = () => c()?.kind === "widget" ? c().id : null, Te = () => c()?.kind === "tool" ? c().id : null, Oe = () => c()?.kind === "external" ? c()?.icon : void 0, y = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", oe = A(() => ht.map((t) => ({
+  const ye = () => i()?.kind === "widget" ? i().id : null, Se = () => i()?.kind === "tool" ? i().id : null, Te = () => i()?.kind === "external" ? i()?.icon : void 0, y = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", oe = A(() => ht.map((t) => ({
     ...t,
     icon: e.modeIcons?.[t.mode] ?? t.icon
   }))), ge = A(() => oe().find((t) => t.mode === y()) ?? oe()[0]), re = A(() => y() === "background" ? bt.map((t) => ({
@@ -438,48 +441,48 @@ function Bt(e) {
     kind: "widget",
     label: t.label,
     icon: t.icon
-  }))]), ve = A(() => y() === "background" ? [] : [...e.dockItems ?? []]), ie = A(() => ve().filter((t) => t.dockPlacement !== "after-components")), fe = A(() => ve().filter((t) => t.dockPlacement === "after-components")), G = A(() => y() === "background" ? [] : [...e.dockActions ?? []]), ke = A(() => re().map((t) => String(t.id))), ae = () => y() !== "background", Ae = (t) => !ae() || e.filters[t] !== !1, $e = (t) => {
+  }))]), ve = A(() => y() === "background" ? [] : [...e.dockItems ?? []]), ie = A(() => ve().filter((t) => t.dockPlacement !== "after-components")), fe = A(() => ve().filter((t) => t.dockPlacement === "after-components")), G = A(() => y() === "background" ? [] : [...e.dockActions ?? []]), ke = A(() => re().map((t) => String(t.id))), ae = () => y() !== "background", Oe = (t) => !ae() || e.filters[t] !== !1, Ae = (t) => {
     if (!ae())
       return !1;
     const n = ke();
-    return n.length > 1 && n.every((k) => e.filters[k] !== !1 == (k === t));
-  }, Xe = (t, n) => f() === "focus-cycle" ? e.resolveItemPresentation?.({
+    return n.length > 1 && n.every((f) => e.filters[f] !== !1 == (f === t));
+  }, $e = (t, n) => v() === "focus-cycle" ? e.resolveItemPresentation?.({
     kind: t,
     id: n
-  }) : void 0, ce = () => v() === 0, Ye = () => ({
+  }) : void 0, ce = () => g() === 0, Xe = () => ({
     scale: 1,
     y: 0,
     x: 0
   }), le = (t) => {
-    const n = c();
+    const n = i();
     return !!(n?.kind === "external" && n.moved && n.dockPlacement === t);
   }, me = () => (() => {
     var t = dt();
-    return h(t, l(R, {
+    return m(t, d(R, {
       get when() {
-        return Oe();
+        return Te();
       },
       children: (n) => {
-        const k = n();
-        return l(k, {
+        const f = n();
+        return d(f, {
           class: "workbench-dock__icon"
         });
       }
-    })), K(() => t.classList.toggle("is-drop-allowed", !!c()?.overDock)), t;
+    })), K(() => t.classList.toggle("is-drop-allowed", !!i()?.overDock)), t;
   })();
   return [(() => {
-    var t = gt(), n = t.firstChild, k = n.firstChild, E = n.nextSibling;
-    t.addEventListener("pointerleave", () => a(null));
-    var I = b;
-    return typeof I == "function" ? Ve(I, t) : b = t, k.$$click = () => {
+    var t = gt(), n = t.firstChild, f = n.firstChild, E = n.nextSibling;
+    t.addEventListener("pointerleave", () => c(null));
+    var L = w;
+    return typeof L == "function" ? Ve(L, t) : w = t, f.$$click = () => {
       e.onDockActivation?.({
         kind: "mode",
         id: y()
       }), P((o) => !o);
-    }, k.addEventListener("pointerleave", () => a((o) => o === 0 ? null : o)), k.addEventListener("pointerenter", () => a(0)), h(k, l(W.span, {
+    }, f.addEventListener("pointerleave", () => c((o) => o === 0 ? null : o)), f.addEventListener("pointerenter", () => c(0)), m(f, d(W.span, {
       class: "workbench-dock__tile",
       get animate() {
-        return Ye();
+        return Xe();
       },
       get transition() {
         return {
@@ -490,17 +493,17 @@ function Bt(e) {
       get children() {
         return (() => {
           const o = ge().icon;
-          return l(o, {
+          return d(o, {
             class: "workbench-dock__icon"
           });
         })();
       }
-    }), null), h(k, l(W.span, {
+    }), null), m(f, d(W.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: ce() && !s() ? 1 : 0,
-          y: ce() && !s() ? -6 : 0
+          opacity: ce() && !_() ? 1 : 0,
+          y: ce() && !_() ? -6 : 0
         };
       },
       get transition() {
@@ -512,75 +515,75 @@ function Bt(e) {
       get children() {
         return ge().label;
       }
-    }), null), h(n, l(R, {
+    }), null), m(n, d(R, {
       get when() {
-        return s();
+        return _();
       },
       get children() {
         var o = st();
-        return h(o, l(te, {
+        return m(o, d(te, {
           get each() {
             return oe();
           },
-          children: (_) => {
-            const w = _.icon;
+          children: (b) => {
+            const h = b.icon;
             return (() => {
-              var u = vt(), C = u.firstChild, T = C.nextSibling, g = T.firstChild, O = g.nextSibling;
-              return u.$$click = () => {
+              var s = vt(), C = s.firstChild, T = C.nextSibling, u = T.firstChild, O = u.nextSibling;
+              return s.$$click = () => {
                 e.onDockActivation?.({
                   kind: "mode",
-                  id: _.mode
-                }), e.onSelectMode?.(_.mode), P(!1);
-              }, h(C, l(w, {
+                  id: b.mode
+                }), e.onSelectMode?.(b.mode), P(!1);
+              }, m(C, d(h, {
                 class: "workbench-dock__mode-icon"
-              })), h(g, () => _.label), h(O, () => _.description), K((m) => {
-                var J = y() === _.mode, Q = y() === _.mode;
-                return J !== m.e && u.classList.toggle("is-active", m.e = J), Q !== m.t && L(u, "aria-checked", m.t = Q), m;
+              })), m(u, () => b.label), m(O, () => b.description), K((k) => {
+                var J = y() === b.mode, Q = y() === b.mode;
+                return J !== k.e && s.classList.toggle("is-active", k.e = J), Q !== k.t && I(s, "aria-checked", k.t = Q), k;
               }, {
                 e: void 0,
                 t: void 0
-              }), u;
+              }), s;
             })();
           }
         })), o;
       }
-    }), null), h(t, l(Ue, {
+    }), null), m(t, d(Ue, {
       get each() {
         return G();
       },
-      children: (o, _) => {
-        const w = () => _ + 1;
-        return l(Ct, {
+      children: (o, b) => {
+        const h = () => b + 1;
+        return d(Ct, {
           get action() {
             return o();
           },
           get hoverOffset() {
-            return M(w());
+            return M(h());
           },
-          onEnter: () => a(w()),
-          onLeave: () => a((u) => u === w() ? null : u),
-          onActivate: (u) => {
+          onEnter: () => c(h()),
+          onLeave: () => c((s) => s === h() ? null : s),
+          onActivate: (s) => {
             e.onDockActivation?.({
               kind: "action",
               id: o().id
-            }), o().onActivate(u);
+            }), o().onActivate(s);
           }
         });
       }
-    }), E), h(t, l(R, {
+    }), E), m(t, d(R, {
       get when() {
         return le("before-components");
       },
       get children() {
-        return l(me, {});
+        return d(me, {});
       }
-    }), E), h(t, l(te, {
+    }), E), m(t, d(te, {
       get each() {
         return ie();
       },
-      children: (o, _) => {
-        const w = () => _() + G().length + 1;
-        return l(se, {
+      children: (o, b) => {
+        const h = () => b() + G().length + 1;
+        return d(se, {
           get id() {
             return o.id;
           },
@@ -597,13 +600,13 @@ function Bt(e) {
           visible: !0,
           filterable: !1,
           get activationMode() {
-            return f();
+            return v();
           },
           get hoverOffset() {
-            return M(w());
+            return M(h());
           },
           get isDragging() {
-            return B(() => c()?.kind === "host")() && c()?.id === o.id;
+            return B(() => i()?.kind === "host")() && i()?.id === o.id;
           },
           get canvasPlacement() {
             return ne(o.canvasPlacement);
@@ -611,19 +614,19 @@ function Bt(e) {
           get onContextMenu() {
             return o.onContextMenu;
           },
-          onKeyboardActivate: (u) => Y("host", o.id, o.label, u),
-          onEnter: () => a(w()),
-          onLeave: () => a((u) => u === w() ? null : u),
+          onKeyboardActivate: (s) => Y("host", o.id, o.label, s),
+          onEnter: () => c(h()),
+          onLeave: () => c((s) => s === h() ? null : s),
           onDragBegin: F
         });
       }
-    }), E), h(t, l(te, {
+    }), E), m(t, d(te, {
       get each() {
         return re();
       },
-      children: (o, _) => {
-        const w = () => _() + G().length + ie().length + 1, u = () => Xe(o.kind, o.id);
-        return l(se, {
+      children: (o, b) => {
+        const h = () => b() + G().length + ie().length + 1, s = () => $e(o.kind, o.id);
+        return d(se, {
           get id() {
             return String(o.id);
           },
@@ -637,25 +640,25 @@ function Bt(e) {
             return o.icon;
           },
           get active() {
-            return u()?.active ?? $e(String(o.id));
+            return s()?.active ?? Ae(String(o.id));
           },
           get visible() {
-            return B(() => f() === "focus-cycle")() ? !0 : Ae(String(o.id));
+            return B(() => v() === "focus-cycle")() ? !0 : Oe(String(o.id));
           },
           get filterable() {
-            return B(() => f() === "solo-filter")() && ae();
+            return B(() => v() === "solo-filter")() && ae();
           },
           get activationMode() {
-            return f();
+            return v();
           },
           get presentation() {
-            return u();
+            return s();
           },
           get hoverOffset() {
-            return M(w());
+            return M(h());
           },
           get isDragging() {
-            return B(() => o.kind === "widget")() ? Se() === o.id : Te() === o.id;
+            return B(() => o.kind === "widget")() ? ye() === o.id : Se() === o.id;
           },
           get canvasPlacement() {
             return B(() => o.kind === "widget")() ? {
@@ -663,35 +666,35 @@ function Bt(e) {
                 kind: "widget",
                 id: o.id
               },
-              onDrop: (C, T, g) => e.onCreateAt?.(o.id, C, T, g)
+              onDrop: (C, T, u) => e.onCreateAt?.(o.id, C, T, u)
             } : {
               preview: {
                 kind: "tool",
                 id: o.id
               },
-              onDrop: (C, T, g) => e.onCreateToolAt?.(o.id, C, T, g)
+              onDrop: (C, T, u) => e.onCreateToolAt?.(o.id, C, T, u)
             };
           },
-          onEnter: () => a(w()),
-          onLeave: () => a((C) => C === w() ? null : C),
+          onEnter: () => c(h()),
+          onLeave: () => c((C) => C === h() ? null : C),
           onKeyboardActivate: (C) => Y(o.kind, o.id, o.label, C),
           onDragBegin: F
         });
       }
-    }), null), h(t, l(R, {
+    }), null), m(t, d(R, {
       get when() {
         return fe().length > 0 || le("after-components");
       },
       get children() {
         return ut();
       }
-    }), null), h(t, l(te, {
+    }), null), m(t, d(te, {
       get each() {
         return fe();
       },
-      children: (o, _) => {
-        const w = () => _() + G().length + ie().length + re().length + 1;
-        return l(se, {
+      children: (o, b) => {
+        const h = () => b() + G().length + ie().length + re().length + 1;
+        return d(se, {
           get id() {
             return o.id;
           },
@@ -708,13 +711,13 @@ function Bt(e) {
           visible: !0,
           filterable: !1,
           get activationMode() {
-            return f();
+            return v();
           },
           get hoverOffset() {
-            return M(w());
+            return M(h());
           },
           get isDragging() {
-            return B(() => c()?.kind === "host")() && c()?.id === o.id;
+            return B(() => i()?.kind === "host")() && i()?.id === o.id;
           },
           get canvasPlacement() {
             return ne(o.canvasPlacement);
@@ -722,66 +725,66 @@ function Bt(e) {
           get onContextMenu() {
             return o.onContextMenu;
           },
-          onKeyboardActivate: (u) => Y("host", o.id, o.label, u),
-          onEnter: () => a(w()),
-          onLeave: () => a((u) => u === w() ? null : u),
+          onKeyboardActivate: (s) => Y("host", o.id, o.label, s),
+          onEnter: () => c(h()),
+          onLeave: () => c((s) => s === h() ? null : s),
           onDragBegin: F
         });
       }
-    }), null), h(t, l(R, {
+    }), null), m(t, d(R, {
       get when() {
         return le("after-components");
       },
       get children() {
-        return l(me, {});
+        return d(me, {});
       }
     }), null), K((o) => {
-      var _ = `workbench-dock workbench-dock-material${c()?.kind === "external" && c()?.moved ? " is-external-drop-target" : ""}${c()?.kind === "external" && c()?.overDock ? " is-external-drop-allowed" : ""}`, w = y() === "background", u = !!(ce() || s()), C = s();
-      return _ !== o.e && Ke(t, o.e = _), w !== o.t && k.classList.toggle("is-active", o.t = w), u !== o.a && k.classList.toggle("is-hovered", o.a = u), C !== o.o && L(k, "aria-expanded", o.o = C), o;
+      var b = `workbench-dock workbench-dock-material${i()?.kind === "external" && i()?.moved ? " is-external-drop-target" : ""}${i()?.kind === "external" && i()?.overDock ? " is-external-drop-allowed" : ""}`, h = y() === "background", s = !!(ce() || _()), C = _();
+      return b !== o.e && He(t, o.e = b), h !== o.t && f.classList.toggle("is-active", o.t = h), s !== o.a && f.classList.toggle("is-hovered", o.a = s), C !== o.o && I(f, "aria-expanded", o.o = C), o;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0
     }), t;
-  })(), l(R, {
+  })(), d(R, {
     get when() {
-      return !!(c()?.moved && !c()?.preview);
+      return !!(i()?.moved && !i()?.preview);
     },
     get children() {
-      return l(Pt, {
-        state: c
+      return d(Pt, {
+        state: i
       });
     }
   })];
 }
 function Pt(e) {
-  const v = () => {
-    const d = e.state();
-    return d ? `translate3d(${d.clientX + 14}px, ${d.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
-  }, a = () => e.state()?.label ?? "", c = () => e.state()?.icon;
-  return l(We, {
+  const g = () => {
+    const l = e.state();
+    return l ? `translate3d(${l.clientX + 14}px, ${l.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
+  }, c = () => e.state()?.label ?? "", i = () => e.state()?.icon;
+  return d(We, {
     get children() {
-      var d = ft(), s = d.firstChild, P = s.nextSibling, b = P.firstChild, r = b.nextSibling, i = r.firstChild, D = i.nextSibling, x = D.firstChild;
-      return h(b, l(R, {
+      var l = ft(), _ = l.firstChild, P = _.nextSibling, w = P.firstChild, r = w.nextSibling, a = r.firstChild, D = a.nextSibling, x = D.firstChild;
+      return m(w, d(R, {
         get when() {
-          return c();
+          return i();
         },
-        children: (f) => {
-          const M = f();
-          return l(M, {
+        children: (v) => {
+          const M = v();
+          return d(M, {
             class: "w-4 h-4"
           });
         }
-      })), h(i, a), h(D, l(qe, {
+      })), m(a, c), m(D, d(qe, {
         class: "w-3 h-3"
-      }), x), h(x, () => e.state()?.kind === "external" ? "Pin to Dock" : "Drag onto canvas"), K((f) => {
-        var M = !!(e.state()?.kind === "external" && e.state()?.overDock), X = v();
-        return M !== f.e && d.classList.toggle("is-over-dock", f.e = M), X !== f.t && Ne(d, "transform", f.t = X), f;
+      }), x), m(x, () => e.state()?.kind === "external" ? "Pin to Dock" : "Drag onto canvas"), K((v) => {
+        var M = !!(e.state()?.kind === "external" && e.state()?.overDock), X = g();
+        return M !== v.e && l.classList.toggle("is-over-dock", v.e = M), X !== v.t && Ne(l, "transform", v.t = X), v;
       }, {
         e: void 0,
         t: void 0
-      }), d;
+      }), l;
     }
   });
 }