@floegence/floe-webapp-core 0.40.4 → 0.40.6

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

@@ -1,4 +1,4 @@
-import { type JSX } from 'solid-js';
+import { type Component, type JSX } from 'solid-js';
 import { type WorkbenchEdgeAutoPanFrame } from './workbenchEdgeAutoPan';
 import type { WorkbenchDockToolId, WorkbenchInteractionMode, WorkbenchViewport, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
 export interface WorkbenchFilterBarProps {
@@ -9,17 +9,38 @@ export interface WorkbenchFilterBarProps {
     /** Solo a single dock component in the supplied mode scope; soloing it again shows the full scope. */
     onSoloFilter: (id: string, scope: readonly string[]) => void;
     onSelectMode?: (mode: WorkbenchInteractionMode) => void;
+    dockActions?: readonly WorkbenchDockAction[];
     /**
      * Called when the user drags a widget pill onto the canvas to create a
      * new widget of that type. Coordinates are in client space (clientX/Y).
      */
     onCreateAt?: (type: WorkbenchWidgetType, clientX: number, clientY: number, context?: WorkbenchDockDropContext) => void;
     onCreateToolAt?: (tool: WorkbenchDockToolId, clientX: number, clientY: number, context?: WorkbenchDockDropContext) => void;
+    /**
+     * Handles a plain click on a dock item. Return true when the host consumed
+     * the click and the default filter-solo behavior should be skipped.
+     */
+    onItemClick?: (item: WorkbenchDockItemActivation) => boolean | void;
     onDragPreviewChange?: (preview: WorkbenchDockDragPreview | null) => void;
     viewport?: WorkbenchViewport;
     onViewportCommit?: (viewport: WorkbenchViewport) => void;
     onViewportInteractionStart?: (kind: 'pan') => void;
 }
+export type WorkbenchDockAction = Readonly<{
+    id: string;
+    label: string;
+    icon: Component<{
+        class?: string;
+    }>;
+    active?: boolean;
+    onActivate: (trigger: HTMLButtonElement) => void;
+}>;
+export type WorkbenchDockItemActivation = Readonly<{
+    kind: 'widget' | 'tool';
+    id: WorkbenchWidgetType | WorkbenchDockToolId;
+    label: string;
+    trigger: HTMLButtonElement;
+}>;
 export type WorkbenchDockDragPreview = Readonly<{
     kind: 'widget' | 'tool';
     id: WorkbenchWidgetType | WorkbenchDockToolId;

package/dist/components/workbench/WorkbenchFilterBar.js

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

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

@@ -1,5 +1,6 @@
 import { type UIFirstSelectionEvent } from '../../utils/uiFirstSelection';
 import { type WorkbenchContextMenuItem } from './WorkbenchContextMenu';
+import { type WorkbenchDockItemActivation, type WorkbenchDockAction } 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;
@@ -66,6 +67,8 @@ export interface WorkbenchSurfaceProps {
     resolveContextMenuItems?: WorkbenchContextMenuItemsResolver;
     onApiReady?: (api: WorkbenchSurfaceApi | null) => void;
     onRequestDelete?: (widgetId: string) => void;
+    onDockItemClick?: (item: WorkbenchDockItemActivation) => boolean | void;
+    dockActions?: readonly WorkbenchDockAction[];
     onLayoutInteractionStart?: () => void;
     onLayoutInteractionEnd?: () => void;
     /** Defer pointer/focus widget activation until the visual selection has painted. */

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,5 +1,5 @@
 import { use as j, spread as K, mergeProps as Z, insert as v, createComponent as l, Portal as G, addEventListener as J, template as R, delegateEvents as Q } from "solid-js/web";
-import { createSignal as p, createMemo as w, untrack as C, createEffect as k, onCleanup as A, Show as ee } from "solid-js";
+import { createSignal as C, createMemo as w, untrack as h, createEffect as k, onCleanup as A, Show as ee } from "solid-js";
 import { clientToCanvasWorld as B } from "../ui/canvasGeometry.js";
 import { createUIFirstSelection as te } from "../../utils/uiFirstSelection.js";
 import { WorkbenchCanvas as ne } from "./WorkbenchCanvas.js";
@@ -11,8 +11,8 @@ import { installWorkbenchContextMenuDismissListeners as ce } from "./workbenchCo
 import { createContextMenuPosition as de, WORKBENCH_CONTEXT_MENU_WIDTH_PX as ue, estimateContextMenuHeight as se } from "./workbenchHelpers.js";
 import { resolveWorkbenchWidgetPlacementPreview as le, resolveWorkbenchToolPlacementPreview as ge } from "./workbenchPlacement.js";
 import { useWorkbenchModel as we } from "./useWorkbenchModel.js";
-import { resolveWorkbenchInteractionAdapter as fe } from "./workbenchInteractionAdapter.js";
-var me = /* @__PURE__ */ R("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), ve = /* @__PURE__ */ R("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+import { resolveWorkbenchInteractionAdapter as me } from "./workbenchInteractionAdapter.js";
+var fe = /* @__PURE__ */ R("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), ve = /* @__PURE__ */ R("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
 const ke = "F1";
 function T(i) {
   if (i)
@@ -70,17 +70,17 @@ function Re(i) {
       return;
     }
     t.canvas.selectWidget(e), t.canvas.commitFront(e);
-  }, [s, X] = p(null), [_, q] = p(null), c = w(() => fe(i.interactionAdapter)), [h, g] = p(C(() => c().createInitialInputOwner())), S = w(() => {
+  }, [s, X] = C(null), [_, q] = C(null), c = w(() => me(i.interactionAdapter)), [p, g] = C(h(() => c().createInitialInputOwner())), S = w(() => {
     const e = i.launcherWidgetTypes;
     return !e || e.length <= 0 ? null : new Set(e);
   }), Y = w(() => {
     const e = t.widgetDefinitions(), n = S();
     return n ? e.filter((o) => n.has(o.type)) : e;
   }), b = w(() => {
-    const e = t.contextMenu.state(), n = t.contextMenu.items(), o = S(), r = o ? n.filter((m) => {
-      if (m.kind !== "action")
+    const e = t.contextMenu.state(), n = t.contextMenu.items(), o = S(), r = o ? n.filter((f) => {
+      if (f.kind !== "action")
         return !0;
-      const L = /^add-(.+)$/.exec(String(m.id ?? ""));
+      const L = /^add-(.+)$/.exec(String(f.id ?? ""));
       return L ? o.has(L[1]) : !0;
     }) : n;
     if (!e || !i.resolveContextMenuItems)
@@ -113,8 +113,8 @@ function Re(i) {
       g(r.createWidgetInputOwner(d, n));
       return;
     }
-    const m = s();
-    m && e instanceof Node && m.contains(e) && g(r.createCanvasInputOwner(o));
+    const f = s();
+    f && e instanceof Node && f.contains(e) && g(r.createCanvasInputOwner(o));
   }, I = (e = "selection_cleared") => {
     const n = c(), o = s();
     t.selection.clear(), g(n.createCanvasInputOwner(e)), queueMicrotask(() => {
@@ -133,17 +133,17 @@ function Re(i) {
       worldX: r > 0 ? (r / 2 - n.x) / n.scale : 240,
       worldY: a > 0 ? (a / 2 - n.y) / n.scale : 180
     };
-  }, f = (e) => {
-    const n = C(c), o = C(s);
+  }, m = (e) => {
+    const n = h(c), o = h(s);
     queueMicrotask(() => {
       n.focusWidgetElement(o, e), g(n.createWidgetInputOwner(e, "activation"));
     });
   }, P = (e) => {
     const n = t.navigation.fitWidget(e);
-    f(n.id);
+    m(n.id);
   }, V = (e) => {
     const n = t.navigation.overviewWidget(e);
-    f(n.id);
+    m(n.id);
   };
   k(() => {
     i.onApiReady?.({
@@ -167,15 +167,15 @@ function Re(i) {
       clearSelection: () => I("selection_cleared"),
       focusWidget: (e, n) => {
         const o = t.navigation.focusWidget(e, n);
-        return f(o.id), o;
+        return m(o.id), o;
       },
       fitWidget: (e) => {
         const n = t.navigation.fitWidget(e);
-        return f(n.id), n;
+        return m(n.id), n;
       },
       overviewWidget: (e) => {
         const n = t.navigation.overviewWidget(e);
-        return f(n.id), n;
+        return m(n.id), n;
       },
       findWidgetByType: (e) => t.queries.findWidgetByType(e),
       findWidgetById: (e) => t.queries.findWidgetById(e),
@@ -211,7 +211,7 @@ function Re(i) {
     });
     A(() => e());
   }), k(() => {
-    const e = h();
+    const e = p();
     if (e.kind !== "widget") return;
     t.widgets().some((o) => o.id === e.widgetId) || g(c().createCanvasInputOwner("widget_removed"));
   }), k(() => {
@@ -236,7 +236,7 @@ function Re(i) {
         if (!c().shouldBypassGlobalHotkeys({
           root: s(),
           target: o.target,
-          owner: h(),
+          owner: p(),
           interactiveSelector: c().interactiveSelector
         }))
           switch (o.key) {
@@ -513,6 +513,12 @@ function Re(i) {
       onViewportInteractionStart: () => t.canvas.cancelViewportNavigation(),
       onCreateAt: z,
       onCreateToolAt: H,
+      get onItemClick() {
+        return i.onDockItemClick;
+      },
+      get dockActions() {
+        return i.dockActions;
+      },
       onDragPreviewChange: q
     }), null), v(e, l(ie, {
       get scaleLabel() {
@@ -536,7 +542,7 @@ function Re(i) {
         return l(G, {
           get children() {
             return [(() => {
-              var o = me();
+              var o = fe();
               return J(o, "contextmenu", t.contextMenu.retarget, !0), o;
             })(), l(oe, {
               get x() {

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

@@ -1,5 +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 } 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.4",
+  "version": "0.40.6",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",