@floegence/floe-webapp-core 0.40.15 → 0.40.16

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

@@ -10,6 +10,7 @@ export interface WorkbenchFilterBarProps {
     onSoloFilter: (id: string, scope: readonly string[]) => void;
     onSelectMode?: (mode: WorkbenchInteractionMode) => void;
     dockActions?: readonly WorkbenchDockAction[];
+    dockItems?: readonly WorkbenchHostDockItem[];
     registerExternalDockDragController?: (controller: WorkbenchExternalDockDragController | null) => void;
     onExternalDockDrop?: (item: WorkbenchExternalDockDragItem) => void;
     /**
@@ -37,6 +38,16 @@ export type WorkbenchDockAction = Readonly<{
     active?: boolean;
     onActivate: (trigger: HTMLButtonElement) => void;
 }>;
+export type WorkbenchHostDockItem = Readonly<{
+    id: string;
+    label: string;
+    icon: Component<{
+        class?: string;
+    }>;
+    active?: boolean;
+    onActivate?: (trigger: HTMLButtonElement) => void;
+    onDropToCanvas?: (clientX: number, clientY: number, context?: WorkbenchDockDropContext) => void;
+}>;
 export type WorkbenchDockItemActivation = Readonly<{
     kind: 'widget' | 'tool';
     id: WorkbenchWidgetType | WorkbenchDockToolId;

package/dist/components/workbench/WorkbenchFilterBar.js

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

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

@@ -1,6 +1,6 @@
 import { type UIFirstSelectionEvent } from '../../utils/uiFirstSelection';
 import { type WorkbenchContextMenuItem } from './WorkbenchContextMenu';
-import { type WorkbenchDockItemActivation, type WorkbenchDockAction, type WorkbenchExternalDockDragController, type WorkbenchExternalDockDragItem } from './WorkbenchFilterBar';
+import { type WorkbenchDockItemActivation, type WorkbenchDockAction, type WorkbenchExternalDockDragController, type WorkbenchExternalDockDragItem, type WorkbenchHostDockItem } from './WorkbenchFilterBar';
 import type { WorkbenchState, WorkbenchAnnotationItem, WorkbenchBackgroundLayer, WorkbenchBackgroundLayerDefaults, WorkbenchBackgroundLayerPatch, WorkbenchContextMenuState, WorkbenchInteractionAdapter, WorkbenchStickyNoteItem, WorkbenchStickyNotePatch, WorkbenchTextAnnotationDefaults, WorkbenchTextAnnotationPatch, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
 export interface WorkbenchCreateAtOptions {
     worldX?: number;
@@ -69,6 +69,7 @@ export interface WorkbenchSurfaceProps {
     onRequestDelete?: (widgetId: string) => void;
     onDockItemClick?: (item: WorkbenchDockItemActivation) => boolean | void;
     dockActions?: readonly WorkbenchDockAction[];
+    dockItems?: readonly WorkbenchHostDockItem[];
     registerExternalDockDragController?: (controller: WorkbenchExternalDockDragController | null) => void;
     onExternalDockDrop?: (item: WorkbenchExternalDockDragItem) => void;
     onLayoutInteractionStart?: () => void;

package/dist/components/workbench/WorkbenchSurface.js

@@ -115,7 +115,7 @@ function Ee(i) {
     }
     const f = s();
     f && e instanceof Node && f.contains(e) && g(r.createCanvasInputOwner(o));
-  }, M = (e = "selection_cleared") => {
+  }, I = (e = "selection_cleared") => {
     const n = c(), o = s();
     t.selection.clear(), g(n.createCanvasInputOwner(e)), queueMicrotask(() => {
       if (!o || typeof document > "u") return;
@@ -164,7 +164,7 @@ function Ee(i) {
         const n = y();
         return t.widgetActions.addBackgroundLayerAtCursor(e?.worldX ?? n.worldX, e?.worldY ?? n.worldY) ?? null;
       },
-      clearSelection: () => M("selection_cleared"),
+      clearSelection: () => I("selection_cleared"),
       focusWidget: (e, n) => {
         const o = t.navigation.focusWidget(e, n);
         return m(o.id), o;
@@ -202,7 +202,7 @@ function Ee(i) {
       i.onApiReady?.(null);
     });
   });
-  const I = () => i.lockShortcut === void 0 ? ke : i.lockShortcut;
+  const M = () => i.lockShortcut === void 0 ? ke : i.lockShortcut;
   k(() => {
     if (typeof window > "u" || !t.contextMenu.state()) return;
     const e = ce({
@@ -227,7 +227,7 @@ function Ee(i) {
     });
   }), k(() => {
     if (i.enableKeyboard === !1 || typeof document > "u") return;
-    const e = I(), n = (o) => {
+    const e = M(), n = (o) => {
       if (!(o.defaultPrevented || o.isComposing)) {
         if (e !== null && o.key === e) {
           o.preventDefault(), t.lock.toggle();
@@ -291,7 +291,7 @@ function Ee(i) {
       e === "background-region" && t.widgetActions.addBackgroundLayerAtCursor(a.worldX, a.worldY);
     }
   }, U = (e) => {
-    e.button === 0 && (c().findWidgetRoot(e.target) || M("background_pointer"));
+    e.button === 0 && (c().findWidgetRoot(e.target) || I("background_pointer"));
   }, $ = w(() => {
     const e = _();
     if (!e) return null;
@@ -483,7 +483,7 @@ function Ee(i) {
         return t.lock.toggle;
       },
       get shortcutLabel() {
-        return I() ?? void 0;
+        return M() ?? void 0;
       }
     }), null), v(e, l(re, {
       get widgetDefinitions() {
@@ -519,6 +519,9 @@ function Ee(i) {
       get dockActions() {
         return i.dockActions;
       },
+      get dockItems() {
+        return i.dockItems;
+      },
       get registerExternalDockDragController() {
         return i.registerExternalDockDragController;
       },

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

@@ -1,6 +1,6 @@
 export { WorkbenchOverlay, type WorkbenchOverlayProps, } from './WorkbenchOverlay';
 export { WorkbenchSurface, type WorkbenchSurfaceApi, type WorkbenchCreateAtOptions, type WorkbenchCreateWidgetOptions, type WorkbenchContextMenuItemsResolver, type WorkbenchSurfaceProps, } from './WorkbenchSurface';
-export type { WorkbenchDockAction, WorkbenchDockItemActivation, WorkbenchExternalDockDragController, WorkbenchExternalDockDragItem, } from './WorkbenchFilterBar';
+export type { WorkbenchDockAction, WorkbenchDockItemActivation, WorkbenchExternalDockDragController, WorkbenchExternalDockDragItem, WorkbenchHostDockItem, } from './WorkbenchFilterBar';
 export { WorkbenchContextMenu, type WorkbenchContextMenuItem, type WorkbenchContextMenuProps, } from './WorkbenchContextMenu';
 export { useWorkbenchModel, type UseWorkbenchModelOptions } from './useWorkbenchModel';
 export { WIDGET_REGISTRY, createWorkbenchFilterState, getWidgetEntry, isValidWorkbenchWidgetType, resolveWorkbenchWidgetDefinitions, type WidgetRegistryEntry, } from './widgets/widgetRegistry';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.40.15",
+  "version": "0.40.16",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",