@floegence/floe-webapp-core 0.41.2 → 0.42.0

package/dist/components/workbench/WorkbenchFilterBar.js

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