@floegence/floe-webapp-core 0.86.23 → 0.86.25

package/dist/components/workbench/WorkbenchFilterBar.js

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