@floegence/floe-webapp-core 0.42.4 → 0.43.0

package/dist/components/workbench/WorkbenchFilterBar.js

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