@floegence/floe-webapp-core 0.44.1 → 0.45.0

package/dist/components/workbench/WorkbenchFilterBar.d.ts

@@ -49,8 +49,11 @@ export type WorkbenchHostDockItem = Readonly<{
     onActivate?: (trigger: HTMLButtonElement) => void;
     /** Requests a product-owned context menu for this concrete Dock button. */
     onContextMenu?: BarItemContextMenuHandler;
+    /** Places the host item before or after Floe's built-in component group. */
+    dockPlacement?: WorkbenchDockItemPlacement;
     canvasPlacement?: WorkbenchDockCanvasPlacement;
 }>;
+export type WorkbenchDockItemPlacement = 'before-components' | 'after-components';
 export type WorkbenchDockItemActivation = Readonly<{
     kind: 'widget' | 'tool';
     id: WorkbenchWidgetType | WorkbenchDockToolId;
@@ -63,6 +66,8 @@ export type WorkbenchExternalDockDragItem = Readonly<{
     icon: Component<{
         class?: string;
     }>;
+    /** Places the Dock drop preview before or after Floe's built-in component group. */
+    dockPlacement?: WorkbenchDockItemPlacement;
     canvasPlacement?: WorkbenchDockCanvasPlacement;
     onDropToDock?: () => void;
 }>;

package/dist/components/workbench/WorkbenchFilterBar.js

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

package/dist/components/workbench/index.d.ts

@@ -1,7 +1,7 @@
 export { WorkbenchOverlay, type WorkbenchOverlayProps } from './WorkbenchOverlay';
 export { WorkbenchDockPopoverSurface, type WorkbenchDockPopoverSurfaceProps, } from './WorkbenchDockPopoverSurface';
 export { WorkbenchSurface, type WorkbenchSurfaceApi, type WorkbenchCreateAtOptions, type WorkbenchCreateWidgetOptions, type WorkbenchContextMenuItemsResolver, type WorkbenchSurfaceProps, } from './WorkbenchSurface';
-export type { WorkbenchDockAction, WorkbenchCanvasWidgetPlacement, WorkbenchDockCanvasPlacement, WorkbenchDockDropContext, WorkbenchDockItemActivation, WorkbenchExternalDockDragController, WorkbenchExternalDockDragItem, WorkbenchHostDockItem, } from './WorkbenchFilterBar';
+export type { WorkbenchDockAction, WorkbenchCanvasWidgetPlacement, WorkbenchDockCanvasPlacement, WorkbenchDockDropContext, WorkbenchDockItemPlacement, WorkbenchDockItemActivation, WorkbenchExternalDockDragController, WorkbenchExternalDockDragItem, WorkbenchHostDockItem, } from './WorkbenchFilterBar';
 export type { BarItemContextMenuHandler, BarItemContextMenuRequest, BarItemContextMenuSource, } from '../layout/barItemContextMenu';
 export { WorkbenchContextMenu, type WorkbenchContextMenuItem, type WorkbenchContextMenuProps, } from './WorkbenchContextMenu';
 export { useWorkbenchModel, type UseWorkbenchModelOptions } from './useWorkbenchModel';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.44.1",
+  "version": "0.45.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",