@floegence/floe-webapp-core 0.40.14 → 0.40.15

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