@floegence/floe-webapp-core 0.45.0 → 0.46.1

package/dist/components/workbench/WorkbenchFilterBar.js

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