@floegence/floe-webapp-core 0.36.74 → 0.36.76

package/dist/components/ui/Tabs.js

@@ -1,11 +1,12 @@
-import { createComponent as v, spread as de, mergeProps as ce, insert as f, effect as x, className as y, setStyleProperty as oe, memo as se, use as le, setAttribute as I, template as w, delegateEvents as Ne } from "solid-js/web";
-import { splitProps as ue, Show as k, createSignal as B, untrack as ie, createEffect as O, For as Le, onCleanup as ae } from "solid-js";
+import { createComponent as v, spread as ae, mergeProps as de, insert as f, effect as x, className as y, setStyleProperty as ne, memo as oe, use as se, setAttribute as B, template as w, delegateEvents as $e } from "solid-js/web";
+import { splitProps as ce, Show as k, createSignal as L, untrack as le, createEffect as X, For as Ne, onCleanup as ie } from "solid-js";
 import { cn as g } from "../../utils/cn.js";
-import { deferAfterPaint as R } from "../../utils/defer.js";
+import { deferAfterPaint as M } from "../../utils/defer.js";
+import { createUIFirstSelection as Le } from "../../utils/uiFirstSelection.js";
 import { useViewActivation as Re } from "../../context/ViewActivationContext.js";
 import { X as Te, Plus as ze, ChevronRight as Ee } from "../icons/index.js";
-var He = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), _e = /* @__PURE__ */ w('<button type=button aria-label="Scroll left">'), Pe = /* @__PURE__ */ w("<div>"), De = /* @__PURE__ */ w('<button type=button aria-label="Add new tab">'), Me = /* @__PURE__ */ w('<button type=button aria-label="Scroll right">'), Oe = /* @__PURE__ */ w("<div><div role=tablist aria-orientation=horizontal>"), We = /* @__PURE__ */ w("<span class=flex-shrink-0>"), Fe = /* @__PURE__ */ w("<button type=button>"), je = /* @__PURE__ */ w('<div role=tab><span class="truncate max-w-32">'), Ge = /* @__PURE__ */ w("<div role=tabpanel>");
-const V = {
+var He = /* @__PURE__ */ w('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><path d="m15 18-6-6 6-6">'), _e = /* @__PURE__ */ w('<button type=button aria-label="Scroll left">'), Pe = /* @__PURE__ */ w("<div>"), De = /* @__PURE__ */ w('<button type=button aria-label="Add new tab">'), Me = /* @__PURE__ */ w('<button type=button aria-label="Scroll right">'), Fe = /* @__PURE__ */ w("<div><div role=tablist aria-orientation=horizontal>"), Oe = /* @__PURE__ */ w("<span class=flex-shrink-0>"), We = /* @__PURE__ */ w("<button type=button>"), je = /* @__PURE__ */ w('<div role=tab><span class="truncate max-w-32">'), Ge = /* @__PURE__ */ w("<div role=tabpanel>");
+const q = {
   x: 0,
   width: 0,
   visible: !1
@@ -39,7 +40,7 @@ function Ue(a, e, h) {
 function Xe(a) {
   return a === 1 || a === 2 || a === 3 || a === 4 ? a : 2;
 }
-function Ve(a) {
+function qe(a) {
   switch (a) {
     case 1:
       return {
@@ -63,7 +64,7 @@ function Ve(a) {
       };
   }
 }
-function qe(a) {
+function Ve(a) {
   switch (a) {
     case "border":
       return {
@@ -84,7 +85,7 @@ function qe(a) {
 }
 const Ke = (a) => (() => {
   var e = He();
-  return x(() => I(e, "class", a.class)), e;
+  return x(() => B(e, "class", a.class)), e;
 })();
 function Ye(a) {
   const {
@@ -97,15 +98,15 @@ function Ye(a) {
       width: C,
       visible: C > 0
     };
-  const b = e.getBoundingClientRect(), p = h.getBoundingClientRect(), T = e.offsetWidth || e.clientWidth, A = b.width > 0 && T > 0 ? b.width / T : 1, z = Number.isFinite(A) && A > 0 ? A : 1, E = p.width / z;
+  const b = e.getBoundingClientRect(), p = h.getBoundingClientRect(), R = e.offsetWidth || e.clientWidth, I = b.width > 0 && R > 0 ? b.width / R : 1, T = Number.isFinite(I) && I > 0 ? I : 1, z = p.width / T;
   return {
-    x: (p.left - b.left + e.scrollLeft) / z,
-    width: E,
-    visible: E > 0
+    x: (p.left - b.left + e.scrollLeft) / T,
+    width: z,
+    visible: z > 0
   };
 }
-function nt(a) {
-  const [e, h] = ue(a, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), d = () => e.features?.indicator?.mode ?? "activeBorder", C = () => Xe(e.features?.indicator?.thicknessPx), b = () => e.features?.indicator?.colorToken ?? "primary", p = () => e.features?.indicator?.animated ?? !0, T = () => e.features?.containerBorder ?? !0, A = () => e.features?.scrollButtons ?? "auto", z = () => e.features?.closeButton?.dangerHover ?? !0, E = () => e.features?.closeButton?.enabledByDefault ?? e.closable ?? !1, fe = () => e.features?.addButton?.enabled ?? e.showAdd ?? !1, q = () => Ve(C()), W = () => qe(b());
+function st(a) {
+  const [e, h] = ce(a, ["items", "activeId", "defaultActiveId", "onChange", "onActiveIdChange", "onClose", "onAdd", "showAdd", "closable", "size", "features", "slotClassNames", "ariaLabel", "class"]), d = () => e.features?.indicator?.mode ?? "activeBorder", C = () => Xe(e.features?.indicator?.thicknessPx), b = () => e.features?.indicator?.colorToken ?? "primary", p = () => e.features?.indicator?.animated ?? !0, R = () => e.features?.containerBorder ?? !0, I = () => e.features?.scrollButtons ?? "auto", T = () => e.features?.closeButton?.dangerHover ?? !0, z = () => e.features?.closeButton?.enabledByDefault ?? e.closable ?? !1, ue = () => e.features?.addButton?.enabled ?? e.showAdd ?? !1, V = () => qe(C()), F = () => Ve(b());
   let u;
   const K = (() => {
     try {
@@ -114,125 +115,123 @@ function nt(a) {
       return null;
     }
   })(), S = () => K ? K.active() : !0;
-  let F = !1;
-  const [H, j] = B(V), _ = /* @__PURE__ */ new Map();
-  let G = !1;
-  const P = () => d() === "slider", Y = (o) => {
-    if (!u || !P()) return !1;
-    const r = _.get(o);
+  let O = !1;
+  const [E, W] = L(q), H = /* @__PURE__ */ new Map();
+  let j = !1;
+  const _ = () => d() === "slider", Y = (o) => {
+    if (!u || !_()) return !1;
+    const r = H.get(o);
     if (!r) return !1;
     const s = Ye({
       container: u,
       tab: r
     });
-    return j(s), s.visible;
-  }, ve = () => {
-    if (!P()) {
-      j(V);
+    return W(s), s.visible;
+  }, fe = () => {
+    if (!_()) {
+      W(q);
       return;
     }
-    Y(U()) || j(V);
-  }, D = () => {
-    G || (G = !0, R(() => {
-      G = !1, ie(() => {
-        S() && ve();
+    Y(G()) || W(q);
+  }, P = () => {
+    j || (j = !0, M(() => {
+      j = !1, le(() => {
+        S() && fe();
       });
     }));
-  }, J = () => e.activeId !== void 0, he = () => e.onChange ?? e.onActiveIdChange, [be, ge] = B(ie(() => e.defaultActiveId ?? e.items[0]?.id ?? "")), Q = () => J() ? e.activeId : be(), [U, Z] = B(Q());
-  O(() => {
-    Z(Q());
-  }), O(() => {
-    S() && (d(), U(), D());
+  }, J = () => e.activeId !== void 0, ve = () => e.onChange ?? e.onActiveIdChange, [he, be] = L(le(() => e.defaultActiveId ?? e.items[0]?.id ?? "")), Q = Le({
+    committed: () => J() ? e.activeId : he(),
+    commit: (o) => {
+      J() || be(o), ve()?.(o);
+    }
+  }), G = Q.visual;
+  X(() => {
+    S() && (d(), G(), P());
   });
-  const [ee, me] = B(!1), [te, we] = B(!1), [Ce, pe] = B(!1), re = () => A() === "auto" && Ce(), xe = () => {
+  const [Z, ge] = L(!1), [ee, me] = L(!1), [we, Ce] = L(!1), te = () => I() === "auto" && we(), pe = () => {
     if (!u) return;
     const {
       scrollLeft: o,
       scrollWidth: r,
       clientWidth: s
     } = u, t = r > s;
-    pe(t), me(o > 0), we(o + s < r - 1);
-  }, M = () => {
-    F || (F = !0, R(() => {
-      F = !1, S() && xe();
+    Ce(t), ge(o > 0), me(o + s < r - 1);
+  }, D = () => {
+    O || (O = !0, M(() => {
+      O = !1, S() && pe();
     }));
-  }, ye = () => {
+  }, xe = () => {
     u && u.scrollBy({
       left: -150,
       behavior: "smooth"
     });
-  }, ke = () => {
+  }, ye = () => {
     u && u.scrollBy({
       left: 150,
       behavior: "smooth"
     });
   };
-  O(() => {
+  X(() => {
     if (!u || !S()) return;
-    M(), D();
-    const o = () => M();
+    D(), P();
+    const o = () => D();
     u.addEventListener("scroll", o);
     const r = () => {
-      M(), D();
+      D(), P();
     };
     let s;
-    typeof ResizeObserver < "u" ? (s = new ResizeObserver(r), s.observe(u)) : typeof window < "u" && window.addEventListener("resize", r), ae(() => {
+    typeof ResizeObserver < "u" ? (s = new ResizeObserver(r), s.observe(u)) : typeof window < "u" && window.addEventListener("resize", r), ie(() => {
       u?.removeEventListener("scroll", o), s?.disconnect(), typeof window < "u" && window.removeEventListener("resize", r);
     });
-  }), O(() => {
-    S() && (e.items.length, M(), D());
+  }), X(() => {
+    S() && (e.items.length, D(), P());
   });
-  const X = (o, r) => {
-    if (r) return;
-    const s = he();
-    if (Z(o), P() && Y(o), J() || ge(o), s) {
-      const t = o;
-      R(() => s(t));
-    }
-  }, Be = (o) => {
+  const U = (o, r) => {
+    r || (Q.request(o), _() && Y(o));
+  }, ke = (o) => {
     const r = e.items.find((s) => s.id === o);
-    r && (X(r.id, r.disabled), requestAnimationFrame(() => {
-      const s = _.get(r.id);
+    r && (U(r.id, r.disabled), requestAnimationFrame(() => {
+      const s = H.get(r.id);
       s?.focus(), s?.scrollIntoView({
         block: "nearest",
         inline: "nearest"
       });
     }));
-  }, Ie = (o, r) => {
+  }, Be = (o, r) => {
     const s = Ue(e.items, r.id, o.key);
-    s && (o.preventDefault(), Be(s));
-  }, Ae = (o, r) => {
+    s && (o.preventDefault(), ke(s));
+  }, Ie = (o, r) => {
     o.stopPropagation();
     const s = e.onClose;
     if (!s) return;
     const t = r;
-    R(() => s(t));
+    M(() => s(t));
   }, Se = {
     sm: "h-7 px-2 text-[11px]",
     md: "h-8 px-3 text-xs"
-  }, $e = (o, r) => {
+  }, Ae = (o, r) => {
     const s = "inline-flex items-center gap-1.5 font-medium transition-colors duration-150 whitespace-nowrap", t = r ? "cursor-not-allowed opacity-50" : "cursor-pointer", n = (() => {
       const c = d();
-      return c === "none" || c === "slider" && H().visible ? "border-transparent" : W().tabBorderClass;
+      return c === "none" || c === "slider" && E().visible ? "border-transparent" : F().tabBorderClass;
     })();
-    return g(s, t, Se[e.size ?? "md"], "rounded-t", q().tabBorderClass, o ? g(n, "text-foreground bg-background", e.slotClassNames?.tabActive) : g("border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", e.slotClassNames?.tabInactive), r && "hover:bg-transparent hover:text-muted-foreground hover:border-transparent", e.slotClassNames?.tab);
+    return g(s, t, Se[e.size ?? "md"], "rounded-t", V().tabBorderClass, o ? g(n, "text-foreground bg-background", e.slotClassNames?.tabActive) : g("border-transparent text-muted-foreground hover:text-foreground hover:bg-muted/50", e.slotClassNames?.tabInactive), r && "hover:bg-transparent hover:text-muted-foreground hover:border-transparent", e.slotClassNames?.tab);
   };
   return (() => {
-    var o = Oe(), r = o.firstChild;
-    de(o, ce({
+    var o = Fe(), r = o.firstChild;
+    ae(o, de({
       get class() {
-        return g("relative flex items-center gap-0.5", T() && "border-b border-border", e.slotClassNames?.root, e.class);
+        return g("relative flex items-center gap-0.5", R() && "border-b border-border", e.slotClassNames?.root, e.class);
       }
     }, h), !1, !0), f(o, v(k, {
       get when() {
-        return re();
+        return te();
       },
       get children() {
         var t = _e();
-        return t.$$click = ye, f(t, v(Ke, {
+        return t.$$click = xe, f(t, v(Ke, {
           class: "w-4 h-4"
         })), x((n) => {
-          var c = !ee(), i = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", ee() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
+          var c = !Z(), i = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", Z() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
           return c !== n.e && (t.disabled = n.e = c), i !== n.t && y(t, n.t = i), n;
         }, {
           e: void 0,
@@ -241,64 +240,64 @@ function nt(a) {
       }
     }), r);
     var s = u;
-    return typeof s == "function" ? le(s, r) : u = r, f(r, v(k, {
+    return typeof s == "function" ? se(s, r) : u = r, f(r, v(k, {
       get when() {
-        return se(() => !!P())() && H().visible;
+        return oe(() => !!_())() && E().visible;
       },
       get children() {
         var t = Pe();
         return x((n) => {
-          var c = g("pointer-events-none absolute bottom-0 left-0 z-10", q().sliderHeightClass, W().sliderBgClass, p() ? "transition-[transform,width] duration-200 ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", e.slotClassNames?.indicator), i = `translate3d(${H().x}px, 0, 0)`, $ = `${H().width}px`;
-          return c !== n.e && y(t, n.e = c), i !== n.t && oe(t, "transform", n.t = i), $ !== n.a && oe(t, "width", n.a = $), n;
+          var c = g("pointer-events-none absolute bottom-0 left-0 z-10", V().sliderHeightClass, F().sliderBgClass, p() ? "transition-[transform,width] duration-200 ease-out motion-reduce:transition-none" : "transition-none", "will-change-transform", e.slotClassNames?.indicator), i = `translate3d(${E().x}px, 0, 0)`, A = `${E().width}px`;
+          return c !== n.e && y(t, n.e = c), i !== n.t && ne(t, "transform", n.t = i), A !== n.a && ne(t, "width", n.a = A), n;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         }), t;
       }
-    }), null), f(r, v(Le, {
+    }), null), f(r, v(Ne, {
       get each() {
         return e.items;
       },
       children: (t) => {
-        const n = () => t.id === U(), c = () => t.closable ?? E();
+        const n = () => t.id === G(), c = () => t.closable ?? z();
         return (() => {
-          var i = je(), $ = i.firstChild;
+          var i = je(), A = i.firstChild;
           return i.$$keydown = (l) => {
             if (l.key === "Enter" || l.key === " ") {
-              l.preventDefault(), X(t.id, t.disabled);
+              l.preventDefault(), U(t.id, t.disabled);
               return;
             }
-            Ie(l, t);
-          }, i.$$click = () => X(t.id, t.disabled), le((l) => {
-            _.set(t.id, l), ae(() => _.delete(t.id));
+            Be(l, t);
+          }, i.$$click = () => U(t.id, t.disabled), se((l) => {
+            H.set(t.id, l), ie(() => H.delete(t.id));
           }, i), f(i, v(k, {
             get when() {
               return t.icon;
             },
             get children() {
-              var l = We();
+              var l = Oe();
               return f(l, () => t.icon), l;
             }
-          }), $), f($, () => t.label), f(i, v(k, {
+          }), A), f(A, () => t.label), f(i, v(k, {
             get when() {
-              return se(() => !!c())() && !t.disabled;
+              return oe(() => !!c())() && !t.disabled;
             },
             get children() {
-              var l = Fe();
-              return l.$$click = (m) => Ae(m, t.id), f(l, v(Te, {
+              var l = We();
+              return l.$$click = (m) => Ie(m, t.id), f(l, v(Te, {
                 class: "w-3 h-3"
               })), x((m) => {
-                var N = g("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded cursor-pointer", "bg-transparent text-muted-foreground", z() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-muted/80 hover:text-foreground", "transition-colors duration-150", "ml-1.5", e.slotClassNames?.closeButton), L = `Close ${t.label}`;
-                return N !== m.e && y(l, m.e = N), L !== m.t && I(l, "aria-label", m.t = L), m;
+                var $ = g("flex-shrink-0 flex items-center justify-center", "w-5 h-5 rounded cursor-pointer", "bg-transparent text-muted-foreground", T() ? "hover:bg-error hover:text-error-foreground" : "hover:bg-muted/80 hover:text-foreground", "transition-colors duration-150", "ml-1.5", e.slotClassNames?.closeButton), N = `Close ${t.label}`;
+                return $ !== m.e && y(l, m.e = $), N !== m.t && B(l, "aria-label", m.t = N), m;
               }, {
                 e: void 0,
                 t: void 0
               }), l;
             }
           }), null), x((l) => {
-            var m = $e(n(), t.disabled), N = n(), L = t.disabled, ne = t.disabled ? -1 : n() ? 0 : -1;
-            return m !== l.e && y(i, l.e = m), N !== l.t && I(i, "aria-selected", l.t = N), L !== l.a && I(i, "aria-disabled", l.a = L), ne !== l.o && I(i, "tabindex", l.o = ne), l;
+            var m = Ae(n(), t.disabled), $ = n(), N = t.disabled, re = t.disabled ? -1 : n() ? 0 : -1;
+            return m !== l.e && y(i, l.e = m), $ !== l.t && B(i, "aria-selected", l.t = $), N !== l.a && B(i, "aria-disabled", l.a = N), re !== l.o && B(i, "tabindex", l.o = re), l;
           }, {
             e: void 0,
             t: void 0,
@@ -309,13 +308,13 @@ function nt(a) {
       }
     }), null), f(o, v(k, {
       get when() {
-        return fe();
+        return ue();
       },
       get children() {
         var t = De();
         return t.$$click = () => {
           const n = e.onAdd;
-          n && R(() => n());
+          n && M(() => n());
         }, f(t, v(ze, {
           get class() {
             return e.size === "sm" ? "w-3.5 h-3.5" : "w-4 h-4";
@@ -324,14 +323,14 @@ function nt(a) {
       }
     }), null), f(o, v(k, {
       get when() {
-        return re();
+        return te();
       },
       get children() {
         var t = Me();
-        return t.$$click = ke, f(t, v(Ee, {
+        return t.$$click = ye, f(t, v(Ee, {
           class: "w-4 h-4"
         })), x((n) => {
-          var c = !te(), i = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", te() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
+          var c = !ee(), i = g("flex-shrink-0 flex items-center justify-center", "w-6 h-6 rounded cursor-pointer", "transition-all duration-150", ee() ? "text-muted-foreground hover:text-foreground hover:bg-muted/80 opacity-100" : "opacity-0 pointer-events-none", e.slotClassNames?.scrollButton);
           return c !== n.e && (t.disabled = n.e = c), i !== n.t && y(t, n.t = i), n;
         }, {
           e: void 0,
@@ -346,22 +345,22 @@ function nt(a) {
         "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
         e.slotClassNames?.scrollContainer
       ), c = e.ariaLabel;
-      return n !== t.e && y(r, t.e = n), c !== t.t && I(r, "aria-label", t.t = c), t;
+      return n !== t.e && y(r, t.e = n), c !== t.t && B(r, "aria-label", t.t = c), t;
     }, {
       e: void 0,
       t: void 0
     }), o;
   })();
 }
-function ot(a) {
-  const [e, h] = ue(a, ["active", "keepMounted", "labelledBy", "class", "children"]);
+function lt(a) {
+  const [e, h] = ce(a, ["active", "keepMounted", "labelledBy", "class", "children"]);
   return v(k, {
     get when() {
       return e.keepMounted || e.active;
     },
     get children() {
       var d = Ge();
-      return de(d, ce({
+      return ae(d, de({
         get "aria-labelledby"() {
           return e.labelledBy;
         },
@@ -378,9 +377,9 @@ function ot(a) {
     }
   });
 }
-Ne(["click", "keydown"]);
+$e(["click", "keydown"]);
 export {
-  ot as TabPanel,
-  nt as Tabs,
+  lt as TabPanel,
+  st as Tabs,
   Ue as resolveTabNavigationTargetId
 };

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

@@ -28,6 +28,7 @@ export interface WorkbenchCanvasProps {
     onCanvasContextMenu: (event: InfiniteCanvasContextMenuEvent) => void;
     onCanvasPointerDown?: (event: PointerEvent) => void;
     onSelectWidget: (widgetId: string) => void;
+    onActivateWidget?: (widgetId: string) => void;
     onWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
     onClaimVisualFrontOwner: (widgetId: string) => void;
     onCommitFront: (widgetId: string) => void;

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,20 +1,20 @@
-import { use as E, insert as w, createComponent as g, memo as y, effect as O, template as B } from "solid-js/web";
-import { createMemo as u, createSignal as _, Show as W, For as j } from "solid-js";
+import { use as E, insert as w, createComponent as g, memo as y, effect as F, template as x } from "solid-js/web";
+import { createMemo as u, createSignal as _, Show as O, For as j } from "solid-js";
 import { resolveWorkbenchInteractionAdapter as z } from "./workbenchInteractionAdapter.js";
 import { WORKBENCH_BACKGROUND_REGION_FILTER_ID as P, WORKBENCH_TEXT_FILTER_ID as q, WORKBENCH_STICKY_FILTER_ID as T } from "./types.js";
 import { WorkbenchCanvasField as U } from "./WorkbenchCanvasField.js";
 import { WorkbenchPlacementPreview as G } from "./WorkbenchPlacementPreview.js";
 import { WorkbenchBackgroundLayerView as $, WorkbenchAnnotationLayerView as K, WorkbenchLayerControlOverlayView as H, createWorkbenchTextEditorRegistry as Z, WorkbenchStickyNote as X } from "./WorkbenchLayerObjects.js";
 import { WorkbenchWidget as Y } from "./WorkbenchWidget.js";
-import { createWorkbenchRenderLayerMap as J, resolveWorkbenchModeStrategy as Q, resolveWorkbenchWidgetRenderMode as x } from "./workbenchHelpers.js";
+import { createWorkbenchRenderLayerMap as J, resolveWorkbenchModeStrategy as Q, resolveWorkbenchWidgetRenderMode as A } from "./workbenchHelpers.js";
 import { createWorkbenchWidgetEnterMotionTracker as p } from "./workbenchMotion.js";
 import { getWidgetEntry as R } from "./widgets/widgetRegistry.js";
 import { InfiniteCanvas as ee } from "../ui/InfiniteCanvas.js";
-var te = /* @__PURE__ */ B("<div class=workbench-canvas><div class=workbench-canvas__atmosphere aria-hidden=true>"), ne = /* @__PURE__ */ B("<div class=workbench-canvas__projected-layer><div class=workbench-canvas__projected-work-layer>");
+var te = /* @__PURE__ */ x("<div class=workbench-canvas><div class=workbench-canvas__atmosphere aria-hidden=true>"), ne = /* @__PURE__ */ x("<div class=workbench-canvas__projected-layer><div class=workbench-canvas__projected-work-layer>");
 function re(e) {
   const a = u((c) => {
-    const v = e.widgetById().get(e.widgetId);
-    if (v) return v;
+    const C = e.widgetById().get(e.widgetId);
+    if (C) return C;
     if (c) return c;
     throw new Error(`Workbench widget ${e.widgetId} is missing from the projected render map.`);
   }), r = u(() => R(a().type, e.widgetDefinitions));
@@ -84,6 +84,9 @@ function re(e) {
     get onSelect() {
       return e.onSelectWidget;
     },
+    get onActivate() {
+      return e.onActivateWidget;
+    },
     get onContextMenu() {
       return e.onWidgetContextMenu;
     },
@@ -176,7 +179,7 @@ function oe(e) {
     }
   });
 }
-function ve(e) {
+function Ce(e) {
   const a = u(() => z(e.interactionAdapter)), r = p(() => e.widgets.map((n) => n.id)), c = u(() => {
     const n = e.widgetMotionById;
     if (!n)
@@ -187,13 +190,13 @@ function ve(e) {
     for (const [o, d] of Object.entries(n))
       d !== void 0 && (l[o] = d);
     return l;
-  }), v = u(() => new Map(e.widgets.map((n) => [n.id, n]))), N = u(() => (e.stickyNotes ?? []).map((n) => n.id)), A = u(() => new Map((e.stickyNotes ?? []).map((n) => [n.id, n]))), b = u(() => J([...e.widgets, ...e.stickyNotes ?? []])), I = Z(), [S, f] = _(null), s = u(() => Q(e.mode)), C = u(() => s().workLayerLocked), m = u(() => s().layerEditingEnabled), D = u(() => e.widgets.filter((n) => {
+  }), C = u(() => new Map(e.widgets.map((n) => [n.id, n]))), B = u(() => (e.stickyNotes ?? []).map((n) => n.id)), N = u(() => new Map((e.stickyNotes ?? []).map((n) => [n.id, n]))), b = u(() => J([...e.widgets, ...e.stickyNotes ?? []])), I = Z(), [S, f] = _(null), s = u(() => Q(e.mode)), v = u(() => s().workLayerLocked), m = u(() => s().layerEditingEnabled), D = u(() => e.widgets.filter((n) => {
     const l = R(n.type, e.widgetDefinitions);
-    return x(l) === "canvas_scaled";
+    return A(l) === "canvas_scaled";
   })), h = u(() => e.widgets.filter((n) => {
     const l = R(n.type, e.widgetDefinitions);
-    return x(l) === "projected_surface";
-  }).map((n) => n.id)), M = u(() => h().length > 0), V = u(() => M() ? [] : e.stickyNotes ?? []), F = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0, L = M;
+    return A(l) === "projected_surface";
+  }).map((n) => n.id)), M = u(() => h().length > 0), V = u(() => M() ? [] : e.stickyNotes ?? []), W = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0, L = M;
   return (() => {
     var n = te();
     n.firstChild;
@@ -233,7 +236,7 @@ function ve(e) {
       get disablePanZoom() {
         return e.locked;
       },
-      overlay: (o) => [g(W, {
+      overlay: (o) => [g(O, {
         get when() {
           return L();
         },
@@ -301,7 +304,7 @@ function ve(e) {
               get canvasFrameSize() {
                 return e.canvasFrameSize;
               },
-              widgetById: v,
+              widgetById: C,
               renderLayers: b,
               get widgetMotionById() {
                 return c();
@@ -313,7 +316,7 @@ function ve(e) {
                 return e.visualFrontOwnerId;
               },
               get locked() {
-                return e.locked || C();
+                return e.locked || v();
               },
               get filters() {
                 return e.filters;
@@ -333,6 +336,9 @@ function ve(e) {
               get onSelectWidget() {
                 return e.onSelectWidget;
               },
+              get onActivateWidget() {
+                return e.onActivateWidget;
+              },
               get onWidgetContextMenu() {
                 return e.onWidgetContextMenu;
               },
@@ -365,16 +371,16 @@ function ve(e) {
               },
               projectedViewport: o,
               get surfaceReady() {
-                return F();
+                return W();
               }
             })
           }), null), w(k, g(j, {
             get each() {
-              return N();
+              return B();
             },
             children: (t) => g(oe, {
               noteId: t,
-              stickyNoteById: A,
+              stickyNoteById: N,
               get selectedObject() {
                 return e.selectedObject;
               },
@@ -384,10 +390,10 @@ function ve(e) {
                 return e.visualFrontOwnerId;
               },
               get locked() {
-                return e.locked || C();
+                return e.locked || v();
               },
               get filtered() {
-                return y(() => !C())() && e.filters[T] === !1;
+                return y(() => !v())() && e.filters[T] === !1;
               },
               get onSelectStickyNote() {
                 return e.onSelectStickyNote;
@@ -420,7 +426,7 @@ function ve(e) {
                 return e.onLayoutInteractionEnd;
               },
               get surfaceReady() {
-                return F();
+                return W();
               }
             })
           }), null), w(d, g(H, {
@@ -455,9 +461,9 @@ function ve(e) {
             onCommitBackgroundResize: (t, i) => e.onCommitBackgroundResize?.(t, i),
             onUpdateBackgroundLayer: (t, i) => e.onUpdateBackgroundLayer?.(t, i),
             onDeleteBackgroundLayer: (t) => e.onDeleteBackgroundLayer?.(t)
-          }), null), O(() => d.classList.toggle("is-work-layer-locked", !!C())), d;
+          }), null), F(() => d.classList.toggle("is-work-layer-locked", !!v())), d;
         }
-      }), g(W, {
+      }), g(O, {
         get when() {
           return y(() => !!L())() ? e.placementPreview : null;
         },
@@ -504,7 +510,7 @@ function ve(e) {
             return e.visualFrontOwnerId;
           },
           get workLayerLocked() {
-            return C();
+            return v();
           },
           get annotationLayerEditable() {
             return m();
@@ -536,6 +542,9 @@ function ve(e) {
           get onSelectWidget() {
             return e.onSelectWidget;
           },
+          get onActivateWidget() {
+            return e.onActivateWidget;
+          },
           get onWidgetContextMenu() {
             return e.onWidgetContextMenu;
           },
@@ -639,7 +648,7 @@ function ve(e) {
           textEditorRegistry: I
         });
       }
-    }), null), O((o) => {
+    }), null), F((o) => {
       var d = !!e.locked, k = !!m();
       return d !== o.e && n.classList.toggle("is-locked", o.e = d), k !== o.t && n.classList.toggle("is-composition-mode", o.t = k), o;
     }, {
@@ -649,5 +658,5 @@ function ve(e) {
   })();
 }
 export {
-  ve as WorkbenchCanvas
+  Ce as WorkbenchCanvas
 };

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

@@ -24,6 +24,7 @@ export interface WorkbenchCanvasFieldProps {
     widgetMotionById?: Record<string, WorkbenchWidgetMotionIntent | null | undefined>;
     interactionAdapter?: WorkbenchInteractionAdapter | ResolvedWorkbenchInteractionAdapter;
     onSelectWidget: (widgetId: string) => void;
+    onActivateWidget?: (widgetId: string) => void;
     onWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
     onClaimVisualFrontOwner: (widgetId: string) => void;
     onCommitFront: (widgetId: string) => void;