@floegence/floe-webapp-core 0.40.14 → 0.40.16

package/dist/components/workbench/WorkbenchFilterBar.js

@@ -1,69 +1,69 @@
-import { insert as h, createComponent as s, effect as X, setAttribute as L, memo as be, template as T, addEventListener as ee, Portal as _e, setStyleProperty as we, use as Ee, delegateEvents as Ce } from "solid-js/web";
-import { createSignal as K, onCleanup as te, createEffect as ne, createMemo as R, Show as p, For as N } from "solid-js";
-import { Motion as I } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
-import { easing as $, duration as P } from "../../utils/animations.js";
-import { Plus as Oe } from "../icons/index.js";
-import { startHotInteraction as Se } from "../../utils/hotInteraction.js";
-import { startPointerSession as De } from "../ui/pointerSession.js";
-import { WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as ae, frameFromElement as ce, createWorkbenchEdgeAutoPanController as Le } from "./workbenchEdgeAutoPan.js";
-import { DockLayoutDashboard as ye, DockLayers as Me, DockRegion as Ie, DockText as $e, DockMessageSquare as Pe } from "../icons/DockIcons.js";
-var Te = /* @__PURE__ */ T("<button type=button class=workbench-dock__item>"), Ae = /* @__PURE__ */ T('<button type=button class="workbench-dock__item workbench-dock__action">'), Fe = /* @__PURE__ */ T('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), Xe = /* @__PURE__ */ T('<div class=workbench-dock data-floe-canvas-interactive=true><div class=workbench-dock__mode-switcher><button type=button class="workbench-dock__item workbench-dock__mode-trigger"aria-label="Switch canvas mode"aria-haspopup=menu></button></div><span class=workbench-dock__divider aria-hidden=true>'), xe = /* @__PURE__ */ T("<button type=button class=workbench-dock__mode-option role=menuitemradio><span class=workbench-dock__mode-option-icon></span><span class=workbench-dock__mode-option-copy><span class=workbench-dock__mode-option-label></span><span class=workbench-dock__mode-option-description>"), Ye = /* @__PURE__ */ T("<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>Drag onto canvas");
-const oe = 5, Re = ".workbench-dock", V = [{
+import { insert as b, createComponent as s, effect as P, setAttribute as y, memo as ce, template as x, addEventListener as se, Portal as Se, setStyleProperty as Oe, use as Me, delegateEvents as ye } from "solid-js/web";
+import { createSignal as z, onCleanup as K, createEffect as p, createMemo as $, Show as B, For as N } from "solid-js";
+import { Motion as Y } 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 A } from "../../utils/animations.js";
+import { Plus as xe } from "../icons/index.js";
+import { startHotInteraction as de } from "../../utils/hotInteraction.js";
+import { startPointerSession as ue } from "../ui/pointerSession.js";
+import { createWorkbenchEdgeAutoPanController as Te, WORKBENCH_EDGE_AUTO_PAN_FRAME_SELECTOR as ke, frameFromElement as fe } from "./workbenchEdgeAutoPan.js";
+import { DockLayoutDashboard as Xe, DockLayers as Pe, DockRegion as Ye, DockText as Fe, DockMessageSquare as Ae } from "../icons/DockIcons.js";
+var $e = /* @__PURE__ */ x("<button type=button class=workbench-dock__item>"), Be = /* @__PURE__ */ x('<button type=button class="workbench-dock__item workbench-dock__action">'), He = /* @__PURE__ */ x('<div class=workbench-dock__mode-popover role=menu aria-label="Canvas mode">'), Re = /* @__PURE__ */ x("<span class=workbench-dock__external-placeholder aria-hidden=true>"), We = /* @__PURE__ */ x('<div class=workbench-dock data-floe-canvas-interactive=true><div class=workbench-dock__mode-switcher><button type=button class="workbench-dock__item workbench-dock__mode-trigger"aria-label="Switch canvas mode"aria-haspopup=menu></button></div><span class=workbench-dock__divider aria-hidden=true>'), Ke = /* @__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>"), pe = /* @__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 V = 5, Ne = ".workbench-dock", j = [{
   mode: "work",
   label: "Work Mode",
   description: "Operate windows and sticky notes",
-  icon: ye
+  icon: Xe
 }, {
   mode: "background",
   label: "Composition Mode",
   description: "Arrange regions and canvas text",
-  icon: Me
-}], He = [{
+  icon: Pe
+}], Ve = [{
   tool: "sticky-note",
   label: "Sticky",
-  icon: Pe
-}], Be = [{
+  icon: Ae
+}], Ge = [{
   tool: "background-region",
   label: "Region",
-  icon: Ie
+  icon: Ye
 }, {
   tool: "text",
   label: "Text",
-  icon: $e
+  icon: Fe
 }];
-function We() {
-  const e = document.querySelector(ae);
-  return e instanceof HTMLElement ? ce(e) : null;
+function Ue() {
+  const e = document.querySelector(ke);
+  return e instanceof HTMLElement ? fe(e) : null;
 }
-function G(e, l, a) {
-  return e >= a.left && e <= a.right && l >= a.top && l <= a.bottom;
+function Q(e, u, l) {
+  return e >= l.left && e <= l.right && u >= l.top && u <= l.bottom;
 }
-function Ke(e, l, a) {
-  return a ? G(e, l, a) : !1;
+function qe(e, u, l) {
+  return l ? Q(e, u, l) : !1;
 }
-function ie(e, l, a) {
-  return Math.min(a, Math.max(l, e));
+function ge(e, u, l) {
+  return Math.min(l, Math.max(u, e));
 }
-function Ne(e, l, a, d, n) {
+function ze(e, u, l, c, i) {
   if (!e) return !1;
-  if (G(l, a, e) || G(d, n, e))
+  if (Q(u, l, e) || Q(c, i, e))
     return !0;
-  const o = d - l, b = n - a;
-  let v = 0, f = 1;
-  const u = (k, S) => {
-    if (k === 0) return S >= 0;
-    const C = S / k;
-    return k < 0 ? C > f ? !1 : (C > v && (v = C), !0) : C < v ? !1 : (C < f && (f = C), !0);
+  const r = c - u, C = i - l;
+  let D = 0, h = 1;
+  const g = (w, L) => {
+    if (w === 0) return L >= 0;
+    const f = L / w;
+    return w < 0 ? f > h ? !1 : (f > D && (D = f), !0) : f < D ? !1 : (f < h && (h = f), !0);
   };
-  return u(-o, l - e.left) && u(o, e.right - l) && u(-b, a - e.top) && u(b, e.bottom - a);
+  return g(-r, u - e.left) && g(r, e.right - u) && g(-C, l - e.top) && g(C, e.bottom - l);
 }
-function re(e, l) {
+function J(e, u) {
   if (typeof document.elementFromPoint != "function") return !1;
-  const a = document.elementFromPoint(e, l);
-  return a instanceof Element && a.closest(Re) !== null;
+  const l = document.elementFromPoint(e, u);
+  return l instanceof Element && l.closest(Ne) !== null;
 }
-function Ve(e) {
-  const l = () => e.hoverOffset === -1 ? {
+function ve(e) {
+  const u = () => e.hoverOffset === -1 ? {
     scale: 1.26,
     y: -6,
     x: 0
@@ -79,199 +79,219 @@ function Ve(e) {
     scale: 1,
     y: 0,
     x: 0
-  }, a = () => e.hoverOffset === -1, d = (n) => {
-    n.button === 0 && e.onDragBegin(n, e.kind, e.id, e.label, e.icon, n.currentTarget);
+  }, l = () => e.hoverOffset === -1, c = (i) => {
+    i.button === 0 && e.onDragBegin(i, e.kind, e.id, e.label, e.icon, i.currentTarget);
   };
   return (() => {
-    var n = Te();
-    return n.$$pointerdown = d, n.addEventListener("pointerleave", () => e.onLeave()), n.addEventListener("pointerenter", () => e.onEnter()), h(n, s(I.span, {
+    var i = $e();
+    return i.$$pointerdown = c, i.addEventListener("pointerleave", () => e.onLeave()), i.addEventListener("pointerenter", () => e.onEnter()), b(i, s(Y.span, {
       class: "workbench-dock__tile",
       get animate() {
-        return l();
+        return u();
       },
       get transition() {
         return {
-          duration: P.fast,
-          easing: $.easeOut
+          duration: A.fast,
+          easing: F.easeOut
         };
       },
       get children() {
         return (() => {
-          const o = e.icon;
-          return s(o, {
+          const r = e.icon;
+          return s(r, {
             class: "workbench-dock__icon"
           });
         })();
       }
-    }), null), h(n, s(I.span, {
+    }), null), b(i, s(Y.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: a() ? 1 : 0,
-          y: a() ? -6 : 0
+          opacity: l() ? 1 : 0,
+          y: l() ? -6 : 0
         };
       },
       get transition() {
         return {
-          duration: P.fast,
-          easing: $.easeOut
+          duration: A.fast,
+          easing: F.easeOut
         };
       },
       get children() {
         return e.label;
       }
-    }), null), X((o) => {
-      var b = !!e.active, v = !!(e.filterable && !e.visible), f = !!a(), u = !!e.isDragging, k = e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, S = e.active;
-      return b !== o.e && n.classList.toggle("is-active", o.e = b), v !== o.t && n.classList.toggle("is-filter-muted", o.t = v), f !== o.a && n.classList.toggle("is-hovered", o.a = f), u !== o.o && n.classList.toggle("is-source-dragging", o.o = u), k !== o.i && L(n, "aria-label", o.i = k), S !== o.n && L(n, "aria-pressed", o.n = S), o;
+    }), null), P((r) => {
+      var C = e.kind === "host" ? e.id : void 0, D = !!e.active, h = !!(e.filterable && !e.visible), g = !!l(), w = !!e.isDragging, L = e.filterable ? `${e.label} — click to solo, drag to canvas to create` : `${e.label} — drag to canvas to create`, f = e.active;
+      return C !== r.e && y(i, "data-workbench-dock-item", r.e = C), D !== r.t && i.classList.toggle("is-active", r.t = D), h !== r.a && i.classList.toggle("is-filter-muted", r.a = h), g !== r.o && i.classList.toggle("is-hovered", r.o = g), w !== r.i && i.classList.toggle("is-source-dragging", r.i = w), L !== r.n && y(i, "aria-label", r.n = L), f !== r.s && y(i, "aria-pressed", r.s = f), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0,
-      n: void 0
-    }), n;
+      n: void 0,
+      s: void 0
+    }), i;
   })();
 }
-function pe(e) {
-  const l = () => e.hoverOffset === -1, a = () => e.hoverOffset === -1 ? {
-    scale: 1.26,
-    y: -6,
-    x: 0
-  } : e.hoverOffset === 1 ? {
-    scale: 1.08,
-    y: -2,
-    x: 5
-  } : e.hoverOffset === -2 ? {
-    scale: 1.08,
-    y: -2,
-    x: -5
-  } : {
+function je(e) {
+  const u = () => e.hoverOffset === -1, l = () => ({
     scale: 1,
     y: 0,
     x: 0
-  }, d = e.action.icon;
+  }), c = e.action.icon;
   return (() => {
-    var n = Ae();
-    return n.$$click = (o) => e.action.onActivate(o.currentTarget), n.addEventListener("dragstart", (o) => o.preventDefault()), ee(n, "pointerleave", e.onLeave), ee(n, "pointerenter", e.onEnter), L(n, "draggable", !1), h(n, s(I.span, {
+    var i = Be();
+    return i.$$click = (r) => e.action.onActivate(r.currentTarget), i.addEventListener("dragstart", (r) => r.preventDefault()), se(i, "pointerleave", e.onLeave), se(i, "pointerenter", e.onEnter), y(i, "draggable", !1), b(i, s(Y.span, {
       class: "workbench-dock__tile",
       get animate() {
-        return a();
+        return l();
       },
       get transition() {
         return {
-          duration: P.fast,
-          easing: $.easeOut
+          duration: A.fast,
+          easing: F.easeOut
         };
       },
       get children() {
-        return s(d, {
+        return s(c, {
           class: "workbench-dock__icon"
         });
       }
-    }), null), h(n, s(I.span, {
+    }), null), b(i, s(Y.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: l() ? 1 : 0,
-          y: l() ? -6 : 0
+          opacity: u() ? 1 : 0,
+          y: u() ? -6 : 0
         };
       },
       get transition() {
         return {
-          duration: P.fast,
-          easing: $.easeOut
+          duration: A.fast,
+          easing: F.easeOut
         };
       },
       get children() {
         return e.action.label;
       }
-    }), null), X((o) => {
-      var b = e.action.id, v = !!e.action.active, f = !!l(), u = e.action.label, k = e.action.active;
-      return b !== o.e && L(n, "data-workbench-dock-action", o.e = b), v !== o.t && n.classList.toggle("is-active", o.t = v), f !== o.a && n.classList.toggle("is-hovered", o.a = f), u !== o.o && L(n, "aria-label", o.o = u), k !== o.i && L(n, "aria-pressed", o.i = k), o;
+    }), null), P((r) => {
+      var C = e.action.id, D = !!e.action.active, h = !!u(), g = e.action.label, w = e.action.active;
+      return C !== r.e && y(i, "data-workbench-dock-action", r.e = C), D !== r.t && i.classList.toggle("is-active", r.t = D), h !== r.a && i.classList.toggle("is-hovered", r.a = h), g !== r.o && y(i, "aria-label", r.o = g), w !== r.i && y(i, "aria-pressed", r.i = w), r;
     }, {
       e: void 0,
       t: void 0,
       a: void 0,
       o: void 0,
       i: void 0
-    }), n;
+    }), i;
   })();
 }
-function nt(e) {
-  const [l, a] = K(null), [d, n] = K(null), [o, b] = K(!1);
-  let v, f, u, k = null;
-  te(() => {
-    u?.stop(), f?.stop({
+function lt(e) {
+  const [u, l] = z(null), [c, i] = z(null), [r, C] = z(!1);
+  let D, h, g, w, L = null;
+  K(() => {
+    w?.stop(), h?.stop({
       reason: "manual_stop",
       commit: !1
-    }), f = void 0, d()?.stopInteraction(), e.onDragPreviewChange?.(null);
-  }), ne(() => {
-    e.onDragPreviewChange?.(d()?.preview ?? null);
-  }), ne(() => {
-    if (!o() || typeof window > "u") return;
-    const t = (g) => {
-      v && g.target instanceof Node && v.contains(g.target) || b(!1);
-    }, i = (g) => {
-      g.key === "Escape" && b(!1);
+    }), h = void 0, g?.(), g = void 0, c()?.stopInteraction(), e.onDragPreviewChange?.(null), e.registerExternalDockDragController?.(null);
+  }), p(() => {
+    e.onDragPreviewChange?.(c()?.preview ?? null);
+  }), p(() => {
+    const t = (n) => {
+      n.key !== "Escape" || !c() || (n.preventDefault(), h?.stop({
+        reason: "manual_stop",
+        commit: !1
+      }));
+    };
+    window.addEventListener("keydown", t, !0), K(() => window.removeEventListener("keydown", t, !0));
+  }), p(() => {
+    if (!r() || typeof window > "u") return;
+    const t = (d) => {
+      D && d.target instanceof Node && D.contains(d.target) || C(!1);
+    }, n = (d) => {
+      d.key === "Escape" && C(!1);
     };
-    window.addEventListener("pointerdown", t, !0), window.addEventListener("keydown", i, !0), te(() => {
-      window.removeEventListener("pointerdown", t, !0), window.removeEventListener("keydown", i, !0);
+    window.addEventListener("pointerdown", t, !0), window.addEventListener("keydown", n, !0), K(() => {
+      window.removeEventListener("pointerdown", t, !0), window.removeEventListener("keydown", n, !0);
     });
   });
-  const S = (t) => {
-    const i = l();
-    return i === null ? 0 : i === t ? -1 : i === t + 1 ? -2 : i === t - 1 ? 1 : 0;
-  }, C = () => {
-    u?.stop(), u = void 0, k = null;
+  const f = (t) => {
+    const n = u();
+    return n === null || n <= R().length ? 0 : n === t ? -1 : n === t + 1 ? -2 : n === t - 1 ? 1 : 0;
+  }, T = () => {
+    w?.stop(), w = void 0, L = null;
   }, H = () => {
-    !e.viewport || !e.onViewportCommit || (k = e.viewport, u?.stop(), u = Le({
+    !e.viewport || !e.onViewportCommit || (L = e.viewport, w?.stop(), w = Te({
       readFrame: () => {
-        const t = document.querySelector(ae);
-        return t instanceof HTMLElement ? ce(t) : null;
+        const t = document.querySelector(ke);
+        return t instanceof HTMLElement ? fe(t) : null;
       },
-      readViewport: () => k ?? e.viewport ?? null,
+      readViewport: () => L ?? e.viewport ?? null,
       commitViewport: (t) => {
-        k = t, e.onViewportCommit?.(t);
+        L = t, e.onViewportCommit?.(t);
       },
       onPanStart: () => e.onViewportInteractionStart?.("pan"),
       shouldPan: () => {
-        const t = d();
-        return !!(t?.moved && t.hasEnteredCanvas && !re(t.clientX, t.clientY));
+        const t = c();
+        return !!(t?.moved && t.hasEnteredCanvas && !J(t.clientX, t.clientY));
       }
     }));
-  }, le = (t) => {
-    const i = d();
-    if (!i) return;
-    const g = !i.moved;
-    if (i.stopInteraction(), C(), n(null), f = void 0, g) {
+  }, Z = (t) => {
+    const n = c();
+    if (!n) return;
+    const d = !n.moved;
+    if (n.stopInteraction(), T(), i(null), h = void 0, d) {
+      if (n.kind === "external") return;
+      if (n.kind === "host") {
+        e.dockItems?.find((E) => E.id === n.id)?.onActivate?.(n.trigger);
+        return;
+      }
       if (e.onItemClick?.({
-        kind: i.kind,
-        id: i.id,
-        label: i.label,
-        trigger: i.trigger
+        kind: n.kind,
+        id: n.id,
+        label: n.label,
+        trigger: n.trigger
       })) return;
-      D() !== "background" && e.onSoloFilter(String(i.id), j());
+      M() !== "background" && e.onSoloFilter(String(n.id), ie());
+      return;
+    }
+    if (t && n.kind === "external" && n.overDock) {
+      e.onExternalDockDrop?.({
+        id: n.id,
+        label: n.label,
+        icon: n.icon
+      });
       return;
     }
-    if (t && i.overCanvas) {
-      const y = i.canvasFrame ? {
-        dropAllowed: i.overCanvas,
-        canvasFrame: i.canvasFrame
+    if (t && n.overCanvas) {
+      const _ = n.canvasFrame ? {
+        dropAllowed: n.overCanvas,
+        canvasFrame: n.canvasFrame
       } : void 0;
-      i.kind === "widget" ? e.onCreateAt?.(i.id, i.clientX, i.clientY, y) : e.onCreateToolAt?.(i.id, i.clientX, i.clientY, y);
+      if (n.kind === "widget")
+        e.onCreateAt?.(n.id, n.clientX, n.clientY, _);
+      else if (n.kind === "tool")
+        e.onCreateToolAt?.(n.id, n.clientX, n.clientY, _);
+      else {
+        const E = n.canvasFrame ? {
+          dropAllowed: n.overCanvas,
+          canvasFrame: n.canvasFrame
+        } : void 0;
+        e.dockItems?.find((o) => o.id === n.id)?.onDropToCanvas?.(n.clientX, n.clientY, E);
+      }
     }
-  }, se = (t, i, g, y, x, c) => {
-    t.preventDefault(), f?.stop({
+  }, ee = (t, n, d, _, E, o) => {
+    t.preventDefault(), h?.stop({
       reason: "manual_stop",
       commit: !1
     }), H();
-    const _ = We();
-    n({
-      kind: i,
-      id: g,
-      label: y,
-      icon: x,
+    const v = Ue();
+    i({
+      kind: n,
+      id: d,
+      label: _,
+      icon: E,
       pointerId: t.pointerId,
       startClientX: t.clientX,
       startClientY: t.clientY,
@@ -280,54 +300,122 @@ function nt(e) {
       moved: !1,
       overCanvas: !1,
       hasEnteredCanvas: !1,
-      canvasFrame: _,
+      canvasFrame: v,
       preview: null,
-      stopInteraction: Se({
+      stopInteraction: de({
         kind: "drag",
         cursor: "grabbing"
       }),
-      trigger: c
+      trigger: o,
+      overDock: !1
     });
-    const w = (r) => {
-      let F = !1;
-      n((m) => {
-        if (!m || m.pointerId !== r.pointerId) return m;
-        const Y = r.clientX - m.startClientX, W = r.clientY - m.startClientY, O = m.moved || Math.abs(Y) > oe || Math.abs(W) > oe, M = re(r.clientX, r.clientY), E = m.canvasFrame, J = O && Ke(r.clientX, r.clientY, E), Q = J && !M, ke = O && !M && Ne(E, m.clientX, m.clientY, r.clientX, r.clientY), Z = m.hasEnteredCanvas || J || ke;
-        F = O && Z && !M;
-        const me = E ? ie(r.clientX, E.left, E.right) : r.clientX, he = E ? ie(r.clientY, E.top, E.bottom) : r.clientY;
+    const k = (a) => {
+      let S = !1;
+      i((m) => {
+        if (!m || m.pointerId !== a.pointerId) return m;
+        const W = a.clientX - m.startClientX, q = a.clientY - m.startClientY, O = m.moved || Math.abs(W) > V || Math.abs(q) > V, X = J(a.clientX, a.clientY), I = m.canvasFrame, re = O && qe(a.clientX, a.clientY, I), ae = re && !X, Ce = O && !X && ze(I, m.clientX, m.clientY, a.clientX, a.clientY), le = m.hasEnteredCanvas || re || Ce;
+        S = O && le && !X;
+        const Le = I ? ge(a.clientX, I.left, I.right) : a.clientX, Ie = I ? ge(a.clientY, I.top, I.bottom) : a.clientY;
         return {
           ...m,
-          clientX: r.clientX,
-          clientY: r.clientY,
+          clientX: a.clientX,
+          clientY: a.clientY,
           moved: O,
-          overCanvas: Q,
-          hasEnteredCanvas: Z,
-          preview: O && E ? {
+          overCanvas: ae,
+          hasEnteredCanvas: le,
+          preview: O && I && (m.kind === "widget" || m.kind === "tool") ? {
             kind: m.kind,
             id: m.id,
             label: m.label,
-            clientX: me,
-            clientY: he,
-            dropAllowed: Q,
-            canvasFrame: E
+            clientX: Le,
+            clientY: Ie,
+            dropAllowed: ae,
+            canvasFrame: I
           } : null
         };
-      }), F && u?.updatePointer(r.clientX, r.clientY);
+      }), S && w?.updatePointer(a.clientX, a.clientY);
     };
-    f = De({
+    h = ue({
       pointerEvent: t,
       captureEl: t.currentTarget,
-      onMove: w,
+      onMove: k,
+      onEnd: ({
+        commit: a
+      }) => Z(a)
+    });
+  }, me = (t, n) => {
+    if (t.button !== 0 || !(t.currentTarget instanceof HTMLElement)) return;
+    t.preventDefault(), h?.stop({
+      reason: "manual_stop",
+      commit: !1
+    }), g?.(), g = void 0;
+    const d = t.currentTarget;
+    i({
+      kind: "external",
+      id: n.id,
+      label: n.label,
+      icon: n.icon,
+      pointerId: t.pointerId,
+      startClientX: t.clientX,
+      startClientY: t.clientY,
+      clientX: t.clientX,
+      clientY: t.clientY,
+      moved: !1,
+      overCanvas: !1,
+      overDock: !1,
+      hasEnteredCanvas: !1,
+      canvasFrame: null,
+      preview: null,
+      stopInteraction: de({
+        kind: "drag",
+        cursor: "grabbing"
+      }),
+      trigger: d
+    }), h = ue({
+      pointerEvent: t,
+      captureEl: d,
+      onMove: (_) => {
+        i((E) => {
+          if (!E || E.kind !== "external" || E.pointerId !== _.pointerId) return E;
+          const o = E.moved || Math.abs(_.clientX - E.startClientX) > V || Math.abs(_.clientY - E.startClientY) > V;
+          if (o && !E.moved) {
+            const v = (S) => {
+              S.preventDefault(), S.stopImmediatePropagation(), g?.();
+            }, k = window.setTimeout(() => {
+              g === a && a();
+            }, 0), a = () => {
+              window.clearTimeout(k), d.removeEventListener("click", v, !0), g === a && (g = void 0);
+            };
+            d.addEventListener("click", v, {
+              capture: !0,
+              once: !0
+            }), g = a;
+          }
+          return {
+            ...E,
+            clientX: _.clientX,
+            clientY: _.clientY,
+            moved: o,
+            overDock: o && J(_.clientX, _.clientY)
+          };
+        });
+      },
       onEnd: ({
-        commit: r
-      }) => le(r)
+        commit: _
+      }) => Z(_)
     });
-  }, de = () => d()?.kind === "widget" ? d().id : null, ue = () => d()?.kind === "tool" ? d().id : null, D = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", U = R(() => V.find((t) => t.mode === D()) ?? V[0]), q = R(() => D() === "background" ? Be.map((t) => ({
+  };
+  p(() => {
+    e.registerExternalDockDragController?.({
+      begin: me
+    }), K(() => e.registerExternalDockDragController?.(null));
+  });
+  const he = () => c()?.kind === "widget" ? c().id : null, be = () => c()?.kind === "tool" ? c().id : null, we = () => c()?.kind === "external" ? c()?.icon : void 0, M = () => e.mode === "background" || e.mode === "annotation" ? "background" : "work", te = $(() => j.find((t) => t.mode === M()) ?? j[0]), ne = $(() => M() === "background" ? Ge.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
     icon: t.icon
-  })) : [...He.map((t) => ({
+  })) : [...Ve.map((t) => ({
     id: t.tool,
     kind: "tool",
     label: t.label,
@@ -337,181 +425,240 @@ function nt(e) {
     kind: "widget",
     label: t.label,
     icon: t.icon
-  }))]), z = R(() => D() === "background" ? [] : [...e.dockActions ?? []]), j = R(() => q().map((t) => String(t.id))), B = () => D() !== "background", ge = (t) => !B() || e.filters[t] !== !1, ve = (t) => {
-    if (!B())
+  }))]), oe = $(() => M() === "background" ? [] : [...e.dockItems ?? []]), R = $(() => M() === "background" ? [] : [...e.dockActions ?? []]), ie = $(() => ne().map((t) => String(t.id))), G = () => M() !== "background", _e = (t) => !G() || e.filters[t] !== !1, Ee = (t) => {
+    if (!G())
       return !1;
-    const i = j();
-    return i.length > 1 && i.every((g) => e.filters[g] !== !1 == (g === t));
-  }, A = () => l() === 0, fe = () => ({
-    scale: A() || o() ? 1.26 : 1,
-    y: A() || o() ? -6 : 0,
-    x: l() === 1 ? -5 : 0
+    const n = ie();
+    return n.length > 1 && n.every((d) => e.filters[d] !== !1 == (d === t));
+  }, U = () => u() === 0, De = () => ({
+    scale: 1,
+    y: 0,
+    x: 0
   });
   return [(() => {
-    var t = Xe(), i = t.firstChild, g = i.firstChild, y = i.nextSibling;
-    t.addEventListener("pointerleave", () => a(null));
-    var x = v;
-    return typeof x == "function" ? Ee(x, t) : v = t, g.$$click = () => b((c) => !c), g.addEventListener("pointerleave", () => a((c) => c === 0 ? null : c)), g.addEventListener("pointerenter", () => a(0)), h(g, s(I.span, {
+    var t = We(), n = t.firstChild, d = n.firstChild, _ = n.nextSibling;
+    t.addEventListener("pointerleave", () => l(null));
+    var E = D;
+    return typeof E == "function" ? Me(E, t) : D = t, d.$$click = () => C((o) => !o), d.addEventListener("pointerleave", () => l((o) => o === 0 ? null : o)), d.addEventListener("pointerenter", () => l(0)), b(d, s(Y.span, {
       class: "workbench-dock__tile",
       get animate() {
-        return fe();
+        return De();
       },
       get transition() {
         return {
-          duration: P.fast,
-          easing: $.easeOut
+          duration: A.fast,
+          easing: F.easeOut
         };
       },
       get children() {
         return (() => {
-          const c = U().icon;
-          return s(c, {
+          const o = te().icon;
+          return s(o, {
             class: "workbench-dock__icon"
           });
         })();
       }
-    }), null), h(g, s(I.span, {
+    }), null), b(d, s(Y.span, {
       class: "workbench-dock__tooltip",
       get animate() {
         return {
-          opacity: A() && !o() ? 1 : 0,
-          y: A() && !o() ? -6 : 0
+          opacity: U() && !r() ? 1 : 0,
+          y: U() && !r() ? -6 : 0
         };
       },
       get transition() {
         return {
-          duration: P.fast,
-          easing: $.easeOut
+          duration: A.fast,
+          easing: F.easeOut
         };
       },
       get children() {
-        return U().label;
+        return te().label;
       }
-    }), null), h(i, s(p, {
+    }), null), b(n, s(B, {
       get when() {
-        return o();
+        return r();
       },
       get children() {
-        var c = Fe();
-        return h(c, s(N, {
-          each: V,
-          children: (_) => {
-            const w = _.icon;
+        var o = He();
+        return b(o, s(N, {
+          each: j,
+          children: (v) => {
+            const k = v.icon;
             return (() => {
-              var r = xe(), F = r.firstChild, m = F.nextSibling, Y = m.firstChild, W = Y.nextSibling;
-              return r.$$click = () => {
-                e.onSelectMode?.(_.mode), b(!1);
-              }, h(F, s(w, {
+              var a = Ke(), S = a.firstChild, m = S.nextSibling, W = m.firstChild, q = W.nextSibling;
+              return a.$$click = () => {
+                e.onSelectMode?.(v.mode), C(!1);
+              }, b(S, s(k, {
                 class: "workbench-dock__mode-icon"
-              })), h(Y, () => _.label), h(W, () => _.description), X((O) => {
-                var M = D() === _.mode, E = D() === _.mode;
-                return M !== O.e && r.classList.toggle("is-active", O.e = M), E !== O.t && L(r, "aria-checked", O.t = E), O;
+              })), b(W, () => v.label), b(q, () => v.description), P((O) => {
+                var X = M() === v.mode, I = M() === v.mode;
+                return X !== O.e && a.classList.toggle("is-active", O.e = X), I !== O.t && y(a, "aria-checked", O.t = I), O;
               }, {
                 e: void 0,
                 t: void 0
-              }), r;
+              }), a;
             })();
           }
-        })), c;
+        })), o;
       }
-    }), null), h(t, s(N, {
+    }), null), b(t, s(N, {
       get each() {
-        return z();
+        return R();
       },
-      children: (c, _) => {
-        const w = () => _() + 1;
-        return s(pe, {
-          action: c,
+      children: (o, v) => {
+        const k = () => v() + 1;
+        return s(je, {
+          action: o,
           get hoverOffset() {
-            return S(w());
+            return f(k());
           },
-          onEnter: () => a(w()),
-          onLeave: () => a((r) => r === w() ? null : r)
+          onEnter: () => l(k()),
+          onLeave: () => l((a) => a === k() ? null : a)
         });
       }
-    }), y), h(t, s(N, {
+    }), _), b(t, s(B, {
+      get when() {
+        return !!(c()?.kind === "external" && c()?.moved);
+      },
+      get children() {
+        var o = Re();
+        return b(o, s(B, {
+          get when() {
+            return we();
+          },
+          children: (v) => {
+            const k = v();
+            return s(k, {
+              class: "workbench-dock__icon"
+            });
+          }
+        })), P(() => o.classList.toggle("is-drop-allowed", !!c()?.overDock)), o;
+      }
+    }), _), b(t, s(N, {
       get each() {
-        return q();
+        return oe();
       },
-      children: (c, _) => {
-        const w = () => _() + z().length + 1;
-        return s(Ve, {
+      children: (o, v) => {
+        const k = () => v() + R().length + 1;
+        return s(ve, {
           get id() {
-            return String(c.id);
+            return o.id;
+          },
+          kind: "host",
+          get label() {
+            return o.label;
+          },
+          get icon() {
+            return o.icon;
+          },
+          get active() {
+            return !!o.active;
+          },
+          visible: !0,
+          filterable: !1,
+          get hoverOffset() {
+            return f(k());
+          },
+          get isDragging() {
+            return ce(() => c()?.kind === "host")() && c()?.id === o.id;
+          },
+          onEnter: () => l(k()),
+          onLeave: () => l((a) => a === k() ? null : a),
+          onDragBegin: ee
+        });
+      }
+    }), _), b(t, s(N, {
+      get each() {
+        return ne();
+      },
+      children: (o, v) => {
+        const k = () => v() + R().length + oe().length + 1;
+        return s(ve, {
+          get id() {
+            return String(o.id);
           },
           get kind() {
-            return c.kind;
+            return o.kind;
           },
           get label() {
-            return c.label;
+            return o.label;
           },
           get icon() {
-            return c.icon;
+            return o.icon;
           },
           get active() {
-            return ve(String(c.id));
+            return Ee(String(o.id));
           },
           get visible() {
-            return ge(String(c.id));
+            return _e(String(o.id));
           },
           get filterable() {
-            return B();
+            return G();
           },
           get hoverOffset() {
-            return S(w());
+            return f(k());
           },
           get isDragging() {
-            return be(() => c.kind === "widget")() ? de() === c.id : ue() === c.id;
+            return ce(() => o.kind === "widget")() ? he() === o.id : be() === o.id;
           },
-          onEnter: () => a(w()),
-          onLeave: () => a((r) => r === w() ? null : r),
-          onDragBegin: se
+          onEnter: () => l(k()),
+          onLeave: () => l((a) => a === k() ? null : a),
+          onDragBegin: ee
         });
       }
-    }), null), X((c) => {
-      var _ = D() === "background", w = !!(A() || o()), r = o();
-      return _ !== c.e && g.classList.toggle("is-active", c.e = _), w !== c.t && g.classList.toggle("is-hovered", c.t = w), r !== c.a && L(g, "aria-expanded", c.a = r), c;
+    }), null), P((o) => {
+      var v = !!(c()?.kind === "external" && c()?.moved), k = !!(c()?.kind === "external" && c()?.overDock), a = M() === "background", S = !!(U() || r()), m = r();
+      return v !== o.e && t.classList.toggle("is-external-drop-target", o.e = v), k !== o.t && t.classList.toggle("is-external-drop-allowed", o.t = k), a !== o.a && d.classList.toggle("is-active", o.a = a), S !== o.o && d.classList.toggle("is-hovered", o.o = S), m !== o.i && y(d, "aria-expanded", o.i = m), o;
     }, {
       e: void 0,
       t: void 0,
-      a: void 0
+      a: void 0,
+      o: void 0,
+      i: void 0
     }), t;
-  })(), s(p, {
+  })(), s(B, {
     get when() {
-      return !!(d()?.moved && !d()?.preview);
+      return !!(c()?.moved && !c()?.preview);
     },
     get children() {
-      return s(Ge, {
-        state: d
+      return s(Je, {
+        state: c
       });
     }
   })];
 }
-function Ge(e) {
-  const l = () => {
-    const n = e.state();
-    return n ? `translate3d(${n.clientX + 14}px, ${n.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
-  }, a = () => e.state()?.label ?? "", d = () => e.state()?.icon;
-  return s(_e, {
+function Je(e) {
+  const u = () => {
+    const i = e.state();
+    return i ? `translate3d(${i.clientX + 14}px, ${i.clientY - 56}px, 0)` : "translate3d(0px, 0px, 0)";
+  }, l = () => e.state()?.label ?? "", c = () => e.state()?.icon;
+  return s(Se, {
     get children() {
-      var n = Ye(), o = n.firstChild, b = o.nextSibling, v = b.firstChild, f = v.nextSibling, u = f.firstChild, k = u.nextSibling, S = k.firstChild;
-      return h(v, s(p, {
+      var i = pe(), r = i.firstChild, C = r.nextSibling, D = C.firstChild, h = D.nextSibling, g = h.firstChild, w = g.nextSibling, L = w.firstChild;
+      return b(D, s(B, {
         get when() {
-          return d();
+          return c();
         },
-        children: (C) => {
-          const H = C();
-          return s(H, {
+        children: (f) => {
+          const T = f();
+          return s(T, {
             class: "w-4 h-4"
           });
         }
-      })), h(u, a), h(k, s(Oe, {
+      })), b(g, l), b(w, s(xe, {
         class: "w-3 h-3"
-      }), S), X((C) => we(n, "transform", l())), n;
+      }), L), b(L, () => e.state()?.kind === "external" ? "Pin to Dock" : "Drag onto canvas"), P((f) => {
+        var T = !!(e.state()?.kind === "external" && e.state()?.overDock), H = u();
+        return T !== f.e && i.classList.toggle("is-over-dock", f.e = T), H !== f.t && Oe(i, "transform", f.t = H), f;
+      }, {
+        e: void 0,
+        t: void 0
+      }), i;
     }
   });
 }
-Ce(["pointerdown", "click"]);
+ye(["pointerdown", "click"]);
 export {
-  nt as WorkbenchDock
+  lt as WorkbenchDock
 };