@floegence/floe-webapp-core 0.36.24 → 0.36.25

package/dist/components/workbench/WorkbenchWidget.js

@@ -1,381 +1,407 @@
-import { spread as j, mergeProps as ut, insert as c, createComponent as w, memo as ht, template as K, use as ft, delegateEvents as _t } from "solid-js/web";
-import { createMemo as h, createSignal as p, onCleanup as bt, untrack as f } from "solid-js";
-import { startHotInteraction as mt } from "../../utils/hotInteraction.js";
-import { X as N, Minus as V, Maximize as Z, GripVertical as vt } from "../icons/index.js";
-import { CANVAS_WHEEL_INTERACTIVE_ATTR as St, WORKBENCH_WIDGET_SHELL_ATTR as kt, resolveWorkbenchWidgetLocalTypingTarget as $t, shouldActivateWorkbenchWidgetLocalTarget as yt } from "../ui/localInteractionSurface.js";
-import { startPointerSession as G } from "../ui/pointerSession.js";
-import { createWorkbenchWidgetSurfaceMetrics as It } from "./workbenchHelpers.js";
-import { resolveWorkbenchInteractionAdapter as xt } from "./workbenchInteractionAdapter.js";
-var Mt = /* @__PURE__ */ K('<article class=workbench-widget><header class=workbench-widget__header><span class=workbench-widget__traffic role=group aria-label="Window controls"><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--close"aria-label="Close widget"title="Close widget"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button></span><span class=workbench-widget__badge aria-hidden=true></span><button type=button class=workbench-widget__drag aria-label="Drag widget"data-floe-canvas-interactive=true></button><div class=workbench-widget__title-area><span class=workbench-widget__title-dot aria-hidden=true></span><span class=workbench-widget__title></span></div><span class=workbench-widget__window-controls role=group aria-label="Window controls"><button type=button class="workbench-widget__window-control workbench-widget__window-control--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--close"aria-label="Remove widget"title="Remove widget"data-floe-canvas-interactive=true></button></span></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), Tt = /* @__PURE__ */ K('<div class=workbench-widget__resize aria-label="Resize widget"data-floe-canvas-interactive=true><svg class=workbench-widget__resize-glyph viewBox="0 0 12 12"aria-hidden=true><path d="M12 0 L0 12"></path><path d="M12 4 L4 12"></path><path d="M12 8 L8 12">');
-const Ct = 220, Wt = 160;
-function Pt(t) {
-  const d = h(() => xt(t.interactionAdapter)), [S, M] = p(null), [k, T] = p(null), [J, Q] = p();
-  let _, b, z = 0, m = null, v = null, s;
-  const R = (e, i) => {
-    const o = mt({
-      kind: e,
+import { spread as V, mergeProps as vt, insert as l, createComponent as w, memo as kt, template as U, use as St, delegateEvents as $t } from "solid-js/web";
+import { createMemo as h, createSignal as z, onCleanup as Z, untrack as f, createEffect as yt } from "solid-js";
+import { startHotInteraction as It } from "../../utils/hotInteraction.js";
+import { X as G, Minus as K, Maximize as J, GripVertical as pt } from "../icons/index.js";
+import { CANVAS_WHEEL_INTERACTIVE_ATTR as Mt, WORKBENCH_WIDGET_SHELL_ATTR as xt, resolveWorkbenchWidgetLocalTypingTarget as Tt, shouldActivateWorkbenchWidgetLocalTarget as Ct } from "../ui/localInteractionSurface.js";
+import { startPointerSession as Q } from "../ui/pointerSession.js";
+import { createWorkbenchWidgetSurfaceMetrics as Wt } from "./workbenchHelpers.js";
+import { resolveWorkbenchInteractionAdapter as Pt } from "./workbenchInteractionAdapter.js";
+var zt = /* @__PURE__ */ U('<article class=workbench-widget><header class=workbench-widget__header><span class=workbench-widget__traffic role=group aria-label="Window controls"><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--close"aria-label="Close widget"title="Close widget"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button></span><span class=workbench-widget__badge aria-hidden=true></span><button type=button class=workbench-widget__drag aria-label="Drag widget"data-floe-canvas-interactive=true></button><div class=workbench-widget__title-area><span class=workbench-widget__title-dot aria-hidden=true></span><span class=workbench-widget__title></span></div><span class=workbench-widget__window-controls role=group aria-label="Window controls"><button type=button class="workbench-widget__window-control workbench-widget__window-control--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--close"aria-label="Remove widget"title="Remove widget"data-floe-canvas-interactive=true></button></span></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), Rt = /* @__PURE__ */ U('<div class=workbench-widget__resize aria-label="Resize widget"data-floe-canvas-interactive=true><svg class=workbench-widget__resize-glyph viewBox="0 0 12 12"aria-hidden=true><path d="M12 0 L0 12"></path><path d="M12 4 L4 12"></path><path d="M12 8 L8 12">');
+const At = 220, Lt = 160;
+function Bt(e) {
+  const s = h(() => Pt(e.interactionAdapter)), [S, x] = z(null), [$, T] = z(null), [tt, et] = z();
+  let m, _, R = 0, it = 0, b = null, v = null;
+  const k = /* @__PURE__ */ new Map();
+  let d;
+  const A = (t, i) => {
+    const n = It({
+      kind: t,
       cursor: i
     });
-    let a = !1;
-    return f(() => t.onLayoutInteractionStart?.()), () => {
-      a || (a = !0, o(), f(() => t.onLayoutInteractionEnd?.()));
+    let r = !1;
+    return f(() => e.onLayoutInteractionStart?.()), () => {
+      r || (r = !0, n(), f(() => e.onLayoutInteractionEnd?.()));
     };
   };
-  bt(() => {
-    _?.stop({
+  Z(() => {
+    m?.stop({
       reason: "manual_stop",
       commit: !1
-    }), _ = void 0, b?.stop({
+    }), m = void 0, _?.stop({
       reason: "manual_stop",
       commit: !1
-    }), b = void 0, f(S)?.stopInteraction(), f(k)?.stopInteraction();
+    }), _ = void 0, f(S)?.stopInteraction(), f($)?.stopInteraction();
   });
-  const A = () => S() !== null, D = () => k() !== null, U = h(() => t.filtered ? "cold" : t.selected ? "hot" : "warm"), L = (e) => d().resolveWidgetEventOwnership({
-    target: e,
-    widgetRoot: s ?? null,
-    interactiveSelector: d().interactiveSelector,
-    panSurfaceSelector: d().panSurfaceSelector
-  }), tt = () => {
-    t.onSelect(t.widgetId), t.onCommitFront(t.widgetId), s?.focus({
+  const C = () => {
+    e.onSelect(e.widgetId), e.onCommitFront(e.widgetId);
+  }, nt = (t, i) => {
+    const n = {
+      token: ++it,
+      wasSelected: i
+    };
+    k.set(t, n), queueMicrotask(() => {
+      k.get(t)?.token === n.token && k.delete(t);
+    }), C();
+  }, ot = (t) => {
+    const i = k.get(t) ?? null;
+    return i && k.delete(t), i;
+  };
+  yt(() => {
+    const t = d;
+    if (!t) return;
+    const i = (n) => {
+      n.button === 0 && nt(n.pointerId, e.selected);
+    };
+    t.addEventListener("pointerdown", i, !0), Z(() => {
+      t.removeEventListener("pointerdown", i, !0);
+    });
+  });
+  const L = () => S() !== null, D = () => $() !== null, rt = h(() => e.filtered ? "cold" : e.selected ? "hot" : "warm"), X = (t) => s().resolveWidgetEventOwnership({
+    target: t,
+    widgetRoot: d ?? null,
+    interactiveSelector: s().interactiveSelector,
+    panSurfaceSelector: s().panSurfaceSelector
+  }), at = () => {
+    C(), d?.focus({
       preventScroll: !0
     });
-  }, X = (e) => {
-    Q((i) => ({
+  }, E = (t) => {
+    et((i) => ({
       seq: (i?.seq ?? 0) + 1,
       source: "local_pointer",
-      pointerType: e
+      pointerType: t
     }));
-  }, et = (e) => {
-    if (!(!s || !e.isConnected || !s.contains(e)))
+  }, ct = (t) => {
+    if (!(!d || !t.isConnected || !d.contains(t)))
       try {
-        e.focus({
+        t.focus({
           preventScroll: !0
         });
       } catch {
-        e.focus();
+        t.focus();
       }
-  }, it = (e, i) => {
-    m = {
-      token: ++z,
-      pointerId: e,
+  }, lt = (t, i) => {
+    b = {
+      token: ++R,
+      pointerId: t,
       pointerType: i,
       timestamp: Date.now()
     };
-    const o = m;
+    const n = b;
     queueMicrotask(() => {
-      !o || m?.token !== o.token || (X(o.pointerType), m = null);
+      !n || b?.token !== n.token || (E(n.pointerType), b = null);
     });
-  }, nt = (e, i) => {
+  }, dt = (t, i) => {
     v = {
-      token: ++z,
-      pointerId: e,
+      token: ++R,
+      pointerId: t,
       target: i,
       timestamp: Date.now()
     };
-    const o = v;
+    const n = v;
     queueMicrotask(() => {
-      const a = () => {
-        !o || v?.token !== o.token || (et(o.target), v = null);
+      const r = () => {
+        !n || v?.token !== n.token || (ct(n.target), v = null);
       };
       if (typeof requestAnimationFrame == "function") {
-        requestAnimationFrame(() => a());
+        requestAnimationFrame(() => r());
         return;
       }
-      a();
+      r();
     });
-  }, ot = (e) => {
-    if (e.button !== 0) return;
-    const i = t.selected, o = L(e.target), a = o === "widget_local" ? $t({
-      target: e.target,
-      widgetRoot: s ?? null,
-      interactiveSelector: d().interactiveSelector,
-      panSurfaceSelector: d().panSurfaceSelector
-    }) : null, l = o === "widget_local" && !a && yt({
-      target: e.target,
-      widgetRoot: s ?? null,
-      interactiveSelector: d().interactiveSelector,
-      panSurfaceSelector: d().panSurfaceSelector
+  }, st = (t) => {
+    if (t.button !== 0) return;
+    const i = ot(t.pointerId), n = i?.wasSelected ?? e.selected, r = X(t.target), a = r === "widget_local" ? Tt({
+      target: t.target,
+      widgetRoot: d ?? null,
+      interactiveSelector: s().interactiveSelector,
+      panSurfaceSelector: s().panSurfaceSelector
+    }) : null, o = r === "widget_local" && !a && Ct({
+      target: t.target,
+      widgetRoot: d ?? null,
+      interactiveSelector: s().interactiveSelector,
+      panSurfaceSelector: s().panSurfaceSelector
     });
-    if (t.onSelect(t.widgetId), t.onCommitFront(t.widgetId), o === "widget_shell") {
-      s?.focus({
+    if (i || C(), r === "widget_shell") {
+      d?.focus({
         preventScroll: !0
       });
       return;
     }
-    if (o === "widget_local") {
+    if (r === "widget_local") {
       if (a) {
-        m = null, i || nt(e.pointerId, a);
+        b = null, n || dt(t.pointerId, a);
         return;
       }
-      if (l) {
-        if (v = null, i) {
-          X(e.pointerType || void 0);
+      if (o) {
+        if (v = null, n) {
+          E(t.pointerType || void 0);
           return;
         }
-        it(e.pointerId, e.pointerType || void 0);
+        lt(t.pointerId, t.pointerType || void 0);
       }
     }
-  }, $ = h(() => {
-    const e = S();
-    return e ? {
-      x: e.worldX,
-      y: e.worldY
+  }, y = h(() => {
+    const t = S();
+    return t ? {
+      x: t.worldX,
+      y: t.worldY
     } : {
-      x: t.x,
-      y: t.y
+      x: e.x,
+      y: e.y
     };
-  }), y = h(() => {
-    const e = k();
-    return e ? {
-      width: e.width,
-      height: e.height
-    } : {
+  }), I = h(() => {
+    const t = $();
+    return t ? {
       width: t.width,
       height: t.height
+    } : {
+      width: e.width,
+      height: e.height
     };
   }), Y = h(() => {
-    if (!(t.layoutMode !== "projected_surface" || !t.projectedViewport))
-      return It({
-        widgetId: t.widgetId,
-        worldX: $().x,
-        worldY: $().y,
-        worldWidth: y().width,
-        worldHeight: y().height,
-        viewport: t.projectedViewport(),
-        ready: t.surfaceReady ?? !0
+    if (!(e.layoutMode !== "projected_surface" || !e.projectedViewport))
+      return Wt({
+        widgetId: e.widgetId,
+        worldX: y().x,
+        worldY: y().y,
+        worldWidth: I().width,
+        worldHeight: I().height,
+        viewport: e.projectedViewport(),
+        ready: e.surfaceReady ?? !0
       });
-  }), at = h(() => {
-    const e = t.itemSnapshot().z_index, i = Number.isFinite(e) ? Math.max(1, Math.min(99, Math.round(e))) : 1;
+  }), wt = h(() => {
+    const t = e.itemSnapshot().z_index, i = Number.isFinite(t) ? Math.max(1, Math.min(99, Math.round(t))) : 1;
     return String(i).padStart(2, "0");
-  }), P = (e) => {
-    e.preventDefault(), e.stopPropagation(), t.onRequestOverview(t.itemSnapshot());
-  }, E = (e) => {
-    e.preventDefault(), e.stopPropagation(), t.onRequestFit(t.itemSnapshot());
-  }, F = (e) => {
-    e.preventDefault(), e.stopPropagation(), t.onRequestDelete(t.widgetId);
-  }, rt = h(() => {
-    const e = {
-      width: `${y().width}px`,
-      height: `${y().height}px`,
-      "z-index": A() || D() || t.optimisticFront ? `${t.topRenderLayer + 1}` : `${t.renderLayer}`
+  }), F = (t) => {
+    t.preventDefault(), t.stopPropagation(), e.onRequestOverview(e.itemSnapshot());
+  }, H = (t) => {
+    t.preventDefault(), t.stopPropagation(), e.onRequestFit(e.itemSnapshot());
+  }, O = (t) => {
+    t.preventDefault(), t.stopPropagation(), e.onRequestDelete(e.widgetId);
+  }, ut = h(() => {
+    const t = {
+      width: `${I().width}px`,
+      height: `${I().height}px`,
+      "z-index": L() || D() || e.optimisticFront ? `${e.topRenderLayer + 1}` : `${e.renderLayer}`
     };
-    if (t.layoutMode === "projected_surface") {
+    if (e.layoutMode === "projected_surface") {
       const i = Y()?.rect;
       return {
-        ...e,
-        transform: `translate3d(${i?.screenX ?? 0}px, ${i?.screenY ?? 0}px, 0) scale(${i?.viewportScale ?? Math.max(t.viewportScale, 1e-3)})`
+        ...t,
+        transform: `translate3d(${i?.screenX ?? 0}px, ${i?.screenY ?? 0}px, 0) scale(${i?.viewportScale ?? Math.max(e.viewportScale, 1e-3)})`
       };
     }
     return {
-      ...e,
-      transform: `translate(${$().x}px, ${$().y}px)`
+      ...t,
+      transform: `translate(${y().x}px, ${y().y}px)`
     };
-  }), lt = (e) => {
+  }), gt = (t) => {
     const i = f(S);
     if (!i) return;
-    const o = {
+    const n = {
       x: i.worldX,
       y: i.worldY
-    }, a = {
+    }, r = {
       x: i.startWorldX,
       y: i.startWorldY
-    }, l = e && (Math.abs(o.x - a.x) > 1 || Math.abs(o.y - a.y) > 1);
-    t.onCommitFront(t.widgetId), l && t.onCommitMove(t.widgetId, o), i.stopInteraction(), M(null), _ = void 0;
-  }, H = (e) => {
-    if (e.button !== 0 || t.locked) return;
-    e.preventDefault(), e.stopPropagation(), _?.stop({
+    }, a = t && (Math.abs(n.x - r.x) > 1 || Math.abs(n.y - r.y) > 1);
+    e.onCommitFront(e.widgetId), a && e.onCommitMove(e.widgetId, n), i.stopInteraction(), x(null), m = void 0;
+  }, q = (t) => {
+    if (t.button !== 0 || e.locked) return;
+    t.preventDefault(), t.stopPropagation(), m?.stop({
       reason: "manual_stop",
       commit: !1
-    }), t.onSelect(t.widgetId), s?.focus({
+    }), e.onSelect(e.widgetId), d?.focus({
       preventScroll: !0
-    }), t.onStartOptimisticFront(t.widgetId);
-    const i = R("drag", "grabbing"), o = Math.max(t.viewportScale, 1e-3);
-    M({
-      pointerId: e.pointerId,
-      startClientX: e.clientX,
-      startClientY: e.clientY,
-      startWorldX: t.x,
-      startWorldY: t.y,
-      worldX: t.x,
-      worldY: t.y,
+    }), e.onStartOptimisticFront(e.widgetId);
+    const i = A("drag", "grabbing"), n = Math.max(e.viewportScale, 1e-3);
+    x({
+      pointerId: t.pointerId,
+      startClientX: t.clientX,
+      startClientY: t.clientY,
+      startWorldX: e.x,
+      startWorldY: e.y,
+      worldX: e.x,
+      worldY: e.y,
       moved: !1,
-      scale: o,
+      scale: n,
       stopInteraction: i
     });
-    const a = (l) => {
-      M((n) => {
-        if (!n || n.pointerId !== l.pointerId) return n;
-        const u = n.startWorldX + (l.clientX - n.startClientX) / n.scale, g = n.startWorldY + (l.clientY - n.startClientY) / n.scale;
+    const r = (a) => {
+      x((o) => {
+        if (!o || o.pointerId !== a.pointerId) return o;
+        const g = o.startWorldX + (a.clientX - o.startClientX) / o.scale, u = o.startWorldY + (a.clientY - o.startClientY) / o.scale;
         return {
-          ...n,
-          worldX: u,
-          worldY: g,
-          moved: n.moved || Math.abs(u - n.startWorldX) > 2 || Math.abs(g - n.startWorldY) > 2
+          ...o,
+          worldX: g,
+          worldY: u,
+          moved: o.moved || Math.abs(g - o.startWorldX) > 2 || Math.abs(u - o.startWorldY) > 2
         };
       });
     };
-    _ = G({
-      pointerEvent: e,
-      captureEl: e.currentTarget,
-      onMove: a,
+    m = Q({
+      pointerEvent: t,
+      captureEl: t.currentTarget,
+      onMove: r,
       onEnd: ({
-        commit: l
-      }) => lt(l)
+        commit: a
+      }) => gt(a)
     });
-  }, ct = (e) => {
-    const i = f(k);
+  }, ht = (t) => {
+    const i = f($);
     if (!i) return;
-    const o = {
+    const n = {
       width: i.width,
       height: i.height
-    }, a = Math.abs(i.width - i.startWidth) > 1 || Math.abs(i.height - i.startHeight) > 1;
-    e && a && t.onCommitResize(t.widgetId, o), i.stopInteraction(), T(null), b = void 0;
-  }, dt = (e) => {
-    if (e.button !== 0 || t.locked) return;
-    e.preventDefault(), e.stopPropagation(), b?.stop({
+    }, r = Math.abs(i.width - i.startWidth) > 1 || Math.abs(i.height - i.startHeight) > 1;
+    t && r && e.onCommitResize(e.widgetId, n), i.stopInteraction(), T(null), _ = void 0;
+  }, ft = (t) => {
+    if (t.button !== 0 || e.locked) return;
+    t.preventDefault(), t.stopPropagation(), _?.stop({
       reason: "manual_stop",
       commit: !1
-    }), t.onStartOptimisticFront(t.widgetId);
-    const i = R("resize", "nwse-resize"), o = Math.max(t.viewportScale, 1e-3);
+    }), e.onStartOptimisticFront(e.widgetId);
+    const i = A("resize", "nwse-resize"), n = Math.max(e.viewportScale, 1e-3);
     T({
-      pointerId: e.pointerId,
-      startClientX: e.clientX,
-      startClientY: e.clientY,
-      startWidth: t.width,
-      startHeight: t.height,
-      width: t.width,
-      height: t.height,
-      scale: o,
+      pointerId: t.pointerId,
+      startClientX: t.clientX,
+      startClientY: t.clientY,
+      startWidth: e.width,
+      startHeight: e.height,
+      width: e.width,
+      height: e.height,
+      scale: n,
       stopInteraction: i
     });
-    const a = (l) => {
-      T((n) => {
-        if (!n || n.pointerId !== l.pointerId) return n;
-        const u = Math.max(Ct, n.startWidth + (l.clientX - n.startClientX) / n.scale), g = Math.max(Wt, n.startHeight + (l.clientY - n.startClientY) / n.scale);
+    const r = (a) => {
+      T((o) => {
+        if (!o || o.pointerId !== a.pointerId) return o;
+        const g = Math.max(At, o.startWidth + (a.clientX - o.startClientX) / o.scale), u = Math.max(Lt, o.startHeight + (a.clientY - o.startClientY) / o.scale);
         return {
-          ...n,
-          width: u,
-          height: g
+          ...o,
+          width: g,
+          height: u
         };
       });
     };
-    b = G({
-      pointerEvent: e,
-      captureEl: e.currentTarget,
-      onMove: a,
+    _ = Q({
+      pointerEvent: t,
+      captureEl: t.currentTarget,
+      onMove: r,
       onEnd: ({
-        commit: l
-      }) => ct(l)
+        commit: a
+      }) => ht(a)
     });
   };
   return (() => {
-    var e = Mt(), i = e.firstChild, o = i.firstChild, a = o.firstChild, l = a.nextSibling, n = l.nextSibling, u = o.nextSibling, g = u.nextSibling, C = g.nextSibling, st = C.firstChild, q = st.nextSibling, wt = C.nextSibling, I = wt.firstChild, x = I.nextSibling, W = x.nextSibling, gt = i.nextSibling, B = s;
-    return typeof B == "function" ? ft(B, e) : s = e, j(e, ut({
+    var t = zt(), i = t.firstChild, n = i.firstChild, r = n.firstChild, a = r.nextSibling, o = a.nextSibling, g = n.nextSibling, u = g.nextSibling, W = u.nextSibling, mt = W.firstChild, B = mt.nextSibling, _t = W.nextSibling, p = _t.firstChild, M = p.nextSibling, P = M.nextSibling, bt = i.nextSibling, j = d;
+    return typeof j == "function" ? St(j, t) : d = t, V(t, vt({
       get classList() {
         return {
-          "is-selected": t.selected,
-          "is-dragging": A(),
+          "is-selected": e.selected,
+          "is-dragging": L(),
           "is-resizing": D(),
-          "is-filtered-out": t.filtered,
-          "is-projected-surface": t.layoutMode === "projected_surface",
-          "is-locked": t.locked
+          "is-filtered-out": e.filtered,
+          "is-projected-surface": e.layoutMode === "projected_surface",
+          "is-locked": e.locked
         };
       }
     }, () => ({
-      [d().dialogSurfaceHostAttr]: "true"
+      [s().dialogSurfaceHostAttr]: "true"
     }), {
       get "data-floe-workbench-widget-id"() {
-        return t.widgetId;
+        return e.widgetId;
       }
     }, () => ({
-      [d().widgetRootAttr]: "true"
+      [s().widgetRootAttr]: "true"
     }), () => ({
-      [d().widgetIdAttr]: t.widgetId
+      [s().widgetIdAttr]: e.widgetId
     }), {
       get "data-workbench-widget-type"() {
-        return t.widgetType;
+        return e.widgetType;
       },
       get "data-floe-workbench-render-mode"() {
-        return t.layoutMode ?? "canvas_scaled";
+        return e.layoutMode ?? "canvas_scaled";
       }
     }, () => ({
-      [St]: t.selected ? "true" : void 0
+      [Mt]: e.selected ? "true" : void 0
     }), {
       tabIndex: 0,
-      onPointerDown: ot,
+      onPointerDown: st,
       onFocus: () => {
-        t.onSelect(t.widgetId);
+        e.onSelect(e.widgetId);
       },
-      onContextMenu: (r) => {
-        L(r.target) === "widget_shell" && (r.preventDefault(), r.stopPropagation(), t.onContextMenu(r, t.itemSnapshot()));
+      onContextMenu: (c) => {
+        X(c.target) === "widget_shell" && (c.preventDefault(), c.stopPropagation(), e.onContextMenu(c, e.itemSnapshot()));
       },
       get style() {
-        return rt();
+        return ut();
       }
-    }), !1, !0), i.$$pointerdown = H, j(i, {
-      [kt]: "true"
-    }, !1, !0), a.$$click = F, a.$$pointerdown = (r) => r.stopPropagation(), c(a, w(N, {
+    }), !1, !0), i.$$pointerdown = q, V(i, {
+      [xt]: "true"
+    }, !1, !0), r.$$click = O, r.$$pointerdown = (c) => c.stopPropagation(), l(r, w(G, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), l.$$click = P, l.$$pointerdown = (r) => r.stopPropagation(), c(l, w(V, {
+    })), a.$$click = F, a.$$pointerdown = (c) => c.stopPropagation(), l(a, w(K, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), n.$$click = E, n.$$pointerdown = (r) => r.stopPropagation(), c(n, w(Z, {
+    })), o.$$click = H, o.$$pointerdown = (c) => c.stopPropagation(), l(o, w(J, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), c(u, at), g.$$pointerdown = H, c(g, w(vt, {
+    })), l(g, wt), u.$$pointerdown = q, l(u, w(pt, {
       class: "w-3.5 h-3.5"
-    })), c(C, () => {
-      const r = t.definition.icon;
-      return w(r, {
+    })), l(W, () => {
+      const c = e.definition.icon;
+      return w(c, {
         class: "w-3.5 h-3.5"
       });
-    }, q), c(q, () => t.widgetTitle), I.$$click = P, I.$$pointerdown = (r) => r.stopPropagation(), c(I, w(V, {
+    }, B), l(B, () => e.widgetTitle), p.$$click = F, p.$$pointerdown = (c) => c.stopPropagation(), l(p, w(K, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), x.$$click = E, x.$$pointerdown = (r) => r.stopPropagation(), c(x, w(Z, {
+    })), M.$$click = H, M.$$pointerdown = (c) => c.stopPropagation(), l(M, w(J, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), W.$$click = F, W.$$pointerdown = (r) => r.stopPropagation(), c(W, w(N, {
+    })), P.$$click = O, P.$$pointerdown = (c) => c.stopPropagation(), l(P, w(G, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), c(gt, () => {
-      const r = t.definition.body;
-      return w(r, {
+    })), l(bt, () => {
+      const c = e.definition.body;
+      return w(c, {
         get widgetId() {
-          return t.widgetId;
+          return e.widgetId;
         },
         get title() {
-          return t.widgetTitle;
+          return e.widgetTitle;
         },
         get type() {
-          return t.widgetType;
+          return e.widgetType;
         },
         surfaceMetrics: Y,
         get activation() {
-          return J();
+          return tt();
         },
         get lifecycle() {
-          return U();
+          return rt();
         },
         get selected() {
-          return t.selected;
+          return e.selected;
         },
         get filtered() {
-          return t.filtered;
+          return e.filtered;
         },
-        requestActivate: tt
+        requestActivate: at
       });
-    }), c(e, (() => {
-      var r = ht(() => !!t.locked);
-      return () => r() ? null : (() => {
-        var O = Tt();
-        return O.$$pointerdown = dt, O;
+    }), l(t, (() => {
+      var c = kt(() => !!e.locked);
+      return () => c() ? null : (() => {
+        var N = Rt();
+        return N.$$pointerdown = ft, N;
       })();
-    })(), null), e;
+    })(), null), t;
   })();
 }
-_t(["pointerdown", "click"]);
+$t(["pointerdown", "click"]);
 export {
-  Pt as WorkbenchWidget
+  Bt as WorkbenchWidget
 };

package/dist/components/workbench/workbenchInteractionAdapter.js

@@ -1,103 +1,112 @@
-import { isTypingElement as R } from "../../utils/dom.js";
-import { DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as v, resolveWorkbenchWidgetEventOwnership as W, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR as I, resolveSurfaceInteractionTargetRole as T, resolveSurfaceWheelRouting as A } from "../ui/localInteractionSurface.js";
-const _ = "data-floe-workbench-surface-root", a = "data-floe-workbench-widget-root", s = "data-floe-workbench-widget-id", h = "data-floe-dialog-surface-host";
-function m(e) {
+import { isTypingElement as E } from "../../utils/dom.js";
+import { DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as R, resolveWorkbenchWidgetEventOwnership as v, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR as _, resolveSurfaceInteractionTargetRole as T, resolveSurfaceWheelRouting as A } from "../ui/localInteractionSurface.js";
+const m = "data-floe-workbench-surface-root", a = "data-floe-workbench-widget-root", s = "data-floe-workbench-widget-id", h = "data-floe-dialog-surface-host";
+function W(e) {
   return typeof Element < "u" && e instanceof Element ? e : typeof Node < "u" && e instanceof Node ? e.parentElement : null;
 }
-function g(e, t = s) {
-  const r = (e?.getAttribute(t) ?? "").trim();
+function S(e, n = s) {
+  const r = (e?.getAttribute(n) ?? "").trim();
   return r.length > 0 ? r : null;
 }
-function O(e, t = a) {
-  if (!(e instanceof Element)) return null;
-  const o = e.closest(`[${t}="true"]`);
-  return o instanceof HTMLElement ? o : null;
+function O(e, n = a) {
+  const o = W(e);
+  if (!o) return null;
+  const r = o.closest(`[${n}="true"]`);
+  return r instanceof HTMLElement ? r : null;
 }
 function k(e) {
   const {
-    root: t,
+    root: n,
     widgetId: o,
     widgetRootAttr: r = a,
-    readWidgetId: c = (i) => g(i, s)
+    readWidgetId: c = (i) => S(i, s)
   } = e;
-  if (!t || typeof t.querySelectorAll != "function") return null;
-  const l = t.querySelectorAll(`[${r}="true"]`);
+  if (!n || typeof n.querySelectorAll != "function") return null;
+  const l = n.querySelectorAll(`[${r}="true"]`);
   for (const i of l)
     if (i instanceof HTMLElement && c(i) === o)
       return i;
   return null;
 }
 function b(e) {
-  const t = k(e);
-  return t ? (t.focus({ preventScroll: !0 }), !0) : !1;
+  const n = k(e);
+  return n ? (n.focus({ preventScroll: !0 }), !0) : !1;
 }
-function d(e) {
+function g(e) {
   return { kind: "canvas", reason: e };
 }
-function C(e, t) {
-  return { kind: "widget", widgetId: e, reason: t };
+function p(e, n) {
+  return { kind: "widget", widgetId: e, reason: n };
 }
-function H(e) {
-  const t = A({
+function C(e) {
+  const n = e.findWidgetRoot(e.target);
+  if (n) {
+    const r = e.readWidgetId(n);
+    return r !== null && r === e.selectedWidgetId ? { kind: "local_surface", reason: "selected_widget" } : e.disablePanZoom ? { kind: "ignore", reason: "pan_zoom_disabled" } : { kind: "canvas_zoom" };
+  }
+  const o = A({
     target: e.target,
     disablePanZoom: e.disablePanZoom,
     wheelInteractiveSelector: e.wheelInteractiveSelector
   });
-  return t.kind === "canvas_zoom" ? t : t.kind === "local_surface" ? { kind: "local_surface", reason: t.reason } : { kind: "ignore", reason: t.reason };
+  return o.kind === "canvas_zoom" ? o : o.kind === "local_surface" ? { kind: "local_surface", reason: o.reason } : { kind: "ignore", reason: o.reason };
 }
 function D(e) {
-  const t = e?.surfaceRootAttr ?? _, o = e?.widgetRootAttr ?? a, r = e?.widgetIdAttr ?? s, c = e?.dialogSurfaceHostAttr ?? h, l = e?.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', i = e?.panSurfaceSelector ?? '[data-floe-canvas-pan-surface="true"]', S = e?.wheelInteractiveSelector ?? v, f = e?.readWidgetId ?? ((n) => g(n, r)), E = e?.findWidgetRoot ?? ((n) => O(n, o)), w = e?.focusWidgetElement ?? ((n, u) => b({
-    root: n,
+  const n = e?.surfaceRootAttr ?? m, o = e?.widgetRootAttr ?? a, r = e?.widgetIdAttr ?? s, c = e?.dialogSurfaceHostAttr ?? h, l = e?.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', i = e?.panSurfaceSelector ?? '[data-floe-canvas-pan-surface="true"]', w = e?.wheelInteractiveSelector ?? R, d = e?.readWidgetId ?? ((t) => S(t, r)), f = e?.findWidgetRoot ?? ((t) => O(t, o)), I = e?.focusWidgetElement ?? ((t, u) => b({
+    root: t,
     widgetId: u,
     widgetRootAttr: o,
-    readWidgetId: f
+    readWidgetId: d
   }));
   return {
     ...e,
-    surfaceRootAttr: t,
+    surfaceRootAttr: n,
     widgetRootAttr: o,
     widgetIdAttr: r,
     dialogSurfaceHostAttr: c,
     interactiveSelector: l,
     panSurfaceSelector: i,
-    wheelInteractiveSelector: S,
-    createInitialInputOwner: e?.createInitialInputOwner ?? (() => d("initial")),
-    createCanvasInputOwner: e?.createCanvasInputOwner ?? d,
-    createWidgetInputOwner: e?.createWidgetInputOwner ?? C,
-    readWidgetId: f,
-    findWidgetRoot: E,
-    focusWidgetElement: w,
-    resolveSurfaceTargetRole: e?.resolveSurfaceTargetRole ?? ((n) => T({
-      target: n.target,
-      interactiveSelector: n.interactiveSelector,
-      panSurfaceSelector: n.panSurfaceSelector
+    wheelInteractiveSelector: w,
+    createInitialInputOwner: e?.createInitialInputOwner ?? (() => g("initial")),
+    createCanvasInputOwner: e?.createCanvasInputOwner ?? g,
+    createWidgetInputOwner: e?.createWidgetInputOwner ?? p,
+    readWidgetId: d,
+    findWidgetRoot: f,
+    focusWidgetElement: I,
+    resolveSurfaceTargetRole: e?.resolveSurfaceTargetRole ?? ((t) => T({
+      target: t.target,
+      interactiveSelector: t.interactiveSelector,
+      panSurfaceSelector: t.panSurfaceSelector
     })),
-    resolveWidgetEventOwnership: e?.resolveWidgetEventOwnership ?? ((n) => W({
-      target: n.target,
-      widgetRoot: n.widgetRoot,
-      interactiveSelector: n.interactiveSelector,
-      panSurfaceSelector: n.panSurfaceSelector,
-      shellSelector: I
+    resolveWidgetEventOwnership: e?.resolveWidgetEventOwnership ?? ((t) => v({
+      target: t.target,
+      widgetRoot: t.widgetRoot,
+      interactiveSelector: t.interactiveSelector,
+      panSurfaceSelector: t.panSurfaceSelector,
+      shellSelector: _
     })),
-    resolveWheelRouting: e?.resolveWheelRouting ?? ((n) => H({
-      target: n.target,
-      disablePanZoom: n.disablePanZoom,
-      wheelInteractiveSelector: n.wheelInteractiveSelector
+    resolveWheelRouting: e?.resolveWheelRouting ?? ((t) => C({
+      target: t.target,
+      disablePanZoom: t.disablePanZoom,
+      selectedWidgetId: t.selectedWidgetId,
+      wheelInteractiveSelector: t.wheelInteractiveSelector,
+      findWidgetRoot: f,
+      readWidgetId: d
     })),
-    shouldBypassGlobalHotkeys: e?.shouldBypassGlobalHotkeys ?? ((n) => {
-      const u = m(n.target);
-      return R(u);
+    shouldBypassGlobalHotkeys: e?.shouldBypassGlobalHotkeys ?? ((t) => {
+      const u = W(t.target);
+      return E(u);
     })
   };
 }
 export {
   h as DEFAULT_WORKBENCH_DIALOG_SURFACE_HOST_ATTR,
-  _ as DEFAULT_WORKBENCH_SURFACE_ROOT_ATTR,
+  m as DEFAULT_WORKBENCH_SURFACE_ROOT_ATTR,
   s as DEFAULT_WORKBENCH_WIDGET_ID_ATTR,
   a as DEFAULT_WORKBENCH_WIDGET_ROOT_ATTR,
   k as findWorkbenchWidgetElement,
   O as findWorkbenchWidgetRoot,
   b as focusWorkbenchWidgetElement,
-  g as readWorkbenchWidgetId,
+  S as readWorkbenchWidgetId,
   D as resolveWorkbenchInteractionAdapter
 };

package/package.json

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