@floegence/floe-webapp-core 0.36.18 → 0.36.19

package/dist/components/workbench/WorkbenchWidget.js

@@ -1,51 +1,62 @@
-import { spread as L, mergeProps as at, insert as l, createComponent as c, memo as rt, template as q, use as dt, delegateEvents as lt } from "solid-js/web";
-import { createSignal as C, onCleanup as ct, untrack as S, createMemo as f } from "solid-js";
-import { startHotInteraction as A } from "../../utils/hotInteraction.js";
-import { X as O, Minus as F, Maximize as N, GripVertical as st } from "../icons/index.js";
-import { CANVAS_WHEEL_INTERACTIVE_ATTR as wt, WORKBENCH_WIDGET_SHELL_ATTR as gt, shouldActivateWorkbenchWidgetLocalTarget as ht, resolveWorkbenchWidgetEventOwnership as ut } from "../ui/localInteractionSurface.js";
-import { startPointerSession as j } from "../ui/pointerSession.js";
-import { createWorkbenchWidgetSurfaceMetrics as ft } from "./workbenchHelpers.js";
-var _t = /* @__PURE__ */ q('<article class=workbench-widget data-floe-dialog-surface-host=true><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>'), bt = /* @__PURE__ */ q('<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 mt = 220, vt = 160, B = '[data-floe-canvas-interactive="true"]', V = '[data-floe-canvas-pan-surface="true"]';
-function Ct(t) {
-  const [_, I] = C(null), [b, x] = C(null), [G, Z] = C();
-  let h, u, g;
-  ct(() => {
-    h?.stop({
+import { spread as F, mergeProps as nt, insert as l, createComponent as c, memo as at, template as B, use as rt, delegateEvents as dt } from "solid-js/web";
+import { createMemo as u, createSignal as W, onCleanup as lt, untrack as f } from "solid-js";
+import { startHotInteraction as ct } from "../../utils/hotInteraction.js";
+import { X as j, Minus as O, Maximize as N, GripVertical as st } from "../icons/index.js";
+import { CANVAS_WHEEL_INTERACTIVE_ATTR as wt, WORKBENCH_WIDGET_SHELL_ATTR as gt, shouldActivateWorkbenchWidgetLocalTarget as ht } from "../ui/localInteractionSurface.js";
+import { startPointerSession as q } from "../ui/pointerSession.js";
+import { createWorkbenchWidgetSurfaceMetrics as ut } from "./workbenchHelpers.js";
+import { resolveWorkbenchInteractionAdapter as ft } from "./workbenchInteractionAdapter.js";
+var _t = /* @__PURE__ */ B('<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>'), bt = /* @__PURE__ */ B('<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 mt = 220, vt = 160;
+function Wt(t) {
+  const s = u(() => ft(t.interactionAdapter)), [m, y] = W(null), [v, x] = W(null), [V, Z] = W();
+  let _, b, h;
+  const p = (e, i) => {
+    const r = ct({
+      kind: e,
+      cursor: i
+    });
+    let d = !1;
+    return f(() => t.onLayoutInteractionStart?.()), () => {
+      d || (d = !0, r(), f(() => t.onLayoutInteractionEnd?.()));
+    };
+  };
+  lt(() => {
+    _?.stop({
       reason: "manual_stop",
       commit: !1
-    }), h = void 0, u?.stop({
+    }), _ = void 0, b?.stop({
       reason: "manual_stop",
       commit: !1
-    }), u = void 0, S(_)?.stopInteraction(), S(b)?.stopInteraction();
+    }), b = void 0, f(m)?.stopInteraction(), f(v)?.stopInteraction();
   });
-  const W = () => _() !== null, R = () => b() !== null, p = (e) => ut({
+  const z = () => m() !== null, R = () => v() !== null, T = (e) => s().resolveWidgetEventOwnership({
     target: e,
-    widgetRoot: g ?? null,
-    interactiveSelector: B,
-    panSurfaceSelector: V
-  }), K = (e) => {
+    widgetRoot: h ?? null,
+    interactiveSelector: s().interactiveSelector,
+    panSurfaceSelector: s().panSurfaceSelector
+  }), G = (e) => {
     if (e.button !== 0) return;
     t.onSelect(t.widgetId), t.onCommitFront(t.widgetId);
-    const i = p(e.target);
+    const i = T(e.target);
     if (i === "widget_shell") {
-      g?.focus({
+      h?.focus({
         preventScroll: !0
       });
       return;
     }
     i === "widget_local" && ht({
       target: e.target,
-      widgetRoot: g ?? null,
-      interactiveSelector: B,
-      panSurfaceSelector: V
+      widgetRoot: h ?? null,
+      interactiveSelector: s().interactiveSelector,
+      panSurfaceSelector: s().panSurfaceSelector
     }) && Z((r) => ({
       seq: (r?.seq ?? 0) + 1,
       source: "local_pointer",
       pointerType: e.pointerType || void 0
     }));
-  }, m = f(() => {
-    const e = _();
+  }, $ = u(() => {
+    const e = m();
     return e ? {
       x: e.worldX,
       y: e.worldY
@@ -53,8 +64,8 @@ function Ct(t) {
       x: t.x,
       y: t.y
     };
-  }), v = f(() => {
-    const e = b();
+  }), S = u(() => {
+    const e = v();
     return e ? {
       width: e.width,
       height: e.height
@@ -62,34 +73,34 @@ function Ct(t) {
       width: t.width,
       height: t.height
     };
-  }), E = f(() => {
+  }), X = u(() => {
     if (!(t.layoutMode !== "projected_surface" || !t.projectedViewport))
-      return ft({
+      return ut({
         widgetId: t.widgetId,
-        worldX: m().x,
-        worldY: m().y,
-        worldWidth: v().width,
-        worldHeight: v().height,
+        worldX: $().x,
+        worldY: $().y,
+        worldWidth: S().width,
+        worldHeight: S().height,
         viewport: t.projectedViewport,
         ready: t.surfaceReady ?? !0
       });
-  }), U = f(() => {
+  }), K = u(() => {
     const e = t.itemSnapshot().z_index, i = Number.isFinite(e) ? Math.max(1, Math.min(99, Math.round(e))) : 1;
     return String(i).padStart(2, "0");
-  }), T = (e) => {
+  }), Y = (e) => {
     e.preventDefault(), e.stopPropagation(), t.onRequestOverview(t.itemSnapshot());
-  }, z = (e) => {
-    e.preventDefault(), e.stopPropagation(), t.onRequestFit(t.itemSnapshot());
   }, D = (e) => {
+    e.preventDefault(), e.stopPropagation(), t.onRequestFit(t.itemSnapshot());
+  }, P = (e) => {
     e.preventDefault(), e.stopPropagation(), t.onRequestDelete(t.widgetId);
-  }, J = f(() => {
+  }, J = u(() => {
     const e = {
-      width: `${v().width}px`,
-      height: `${v().height}px`,
-      "z-index": W() || R() || t.optimisticFront ? `${t.topRenderLayer + 1}` : `${t.renderLayer}`
+      width: `${S().width}px`,
+      height: `${S().height}px`,
+      "z-index": z() || R() || t.optimisticFront ? `${t.topRenderLayer + 1}` : `${t.renderLayer}`
     };
     if (t.layoutMode === "projected_surface") {
-      const i = E()?.rect;
+      const i = X()?.rect;
       return {
         ...e,
         left: `${i?.screenX ?? 0}px`,
@@ -99,10 +110,10 @@ function Ct(t) {
     }
     return {
       ...e,
-      transform: `translate(${m().x}px, ${m().y}px)`
+      transform: `translate(${$().x}px, ${$().y}px)`
     };
   }), Q = (e) => {
-    const i = S(_);
+    const i = f(m);
     if (!i) return;
     const r = {
       x: i.worldX,
@@ -111,20 +122,17 @@ function Ct(t) {
       x: i.startWorldX,
       y: i.startWorldY
     }, a = e && (Math.abs(r.x - d.x) > 1 || Math.abs(r.y - d.y) > 1);
-    t.onCommitFront(t.widgetId), a && t.onCommitMove(t.widgetId, r), i.stopInteraction(), I(null), h = void 0;
-  }, X = (e) => {
+    t.onCommitFront(t.widgetId), a && t.onCommitMove(t.widgetId, r), i.stopInteraction(), y(null), _ = void 0;
+  }, E = (e) => {
     if (e.button !== 0 || t.locked) return;
-    e.preventDefault(), e.stopPropagation(), h?.stop({
+    e.preventDefault(), e.stopPropagation(), _?.stop({
       reason: "manual_stop",
       commit: !1
-    }), t.onSelect(t.widgetId), g?.focus({
+    }), t.onSelect(t.widgetId), h?.focus({
       preventScroll: !0
     }), t.onStartOptimisticFront(t.widgetId);
-    const i = A({
-      kind: "drag",
-      cursor: "grabbing"
-    }), r = Math.max(t.viewportScale, 1e-3);
-    I({
+    const i = p("drag", "grabbing"), r = Math.max(t.viewportScale, 1e-3);
+    y({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
@@ -137,18 +145,18 @@ function Ct(t) {
       stopInteraction: i
     });
     const d = (a) => {
-      I((o) => {
+      y((o) => {
         if (!o || o.pointerId !== a.pointerId) return o;
-        const w = o.startWorldX + (a.clientX - o.startClientX) / o.scale, s = o.startWorldY + (a.clientY - o.startClientY) / o.scale;
+        const g = o.startWorldX + (a.clientX - o.startClientX) / o.scale, w = o.startWorldY + (a.clientY - o.startClientY) / o.scale;
         return {
           ...o,
-          worldX: w,
-          worldY: s,
-          moved: o.moved || Math.abs(w - o.startWorldX) > 2 || Math.abs(s - o.startWorldY) > 2
+          worldX: g,
+          worldY: w,
+          moved: o.moved || Math.abs(g - o.startWorldX) > 2 || Math.abs(w - o.startWorldY) > 2
         };
       });
     };
-    h = j({
+    _ = q({
       pointerEvent: e,
       captureEl: e.currentTarget,
       onMove: d,
@@ -156,24 +164,21 @@ function Ct(t) {
         commit: a
       }) => Q(a)
     });
-  }, tt = (e) => {
-    const i = S(b);
+  }, U = (e) => {
+    const i = f(v);
     if (!i) return;
     const r = {
       width: i.width,
       height: i.height
     }, d = Math.abs(i.width - i.startWidth) > 1 || Math.abs(i.height - i.startHeight) > 1;
-    e && d && t.onCommitResize(t.widgetId, r), i.stopInteraction(), x(null), u = void 0;
-  }, et = (e) => {
+    e && d && t.onCommitResize(t.widgetId, r), i.stopInteraction(), x(null), b = void 0;
+  }, tt = (e) => {
     if (e.button !== 0 || t.locked) return;
-    e.preventDefault(), e.stopPropagation(), u?.stop({
+    e.preventDefault(), e.stopPropagation(), b?.stop({
       reason: "manual_stop",
       commit: !1
     }), t.onStartOptimisticFront(t.widgetId);
-    const i = A({
-      kind: "drag",
-      cursor: "nwse-resize"
-    }), r = Math.max(t.viewportScale, 1e-3);
+    const i = p("resize", "nwse-resize"), r = Math.max(t.viewportScale, 1e-3);
     x({
       pointerId: e.pointerId,
       startClientX: e.clientX,
@@ -188,39 +193,47 @@ function Ct(t) {
     const d = (a) => {
       x((o) => {
         if (!o || o.pointerId !== a.pointerId) return o;
-        const w = Math.max(mt, o.startWidth + (a.clientX - o.startClientX) / o.scale), s = Math.max(vt, o.startHeight + (a.clientY - o.startClientY) / o.scale);
+        const g = Math.max(mt, o.startWidth + (a.clientX - o.startClientX) / o.scale), w = Math.max(vt, o.startHeight + (a.clientY - o.startClientY) / o.scale);
         return {
           ...o,
-          width: w,
-          height: s
+          width: g,
+          height: w
         };
       });
     };
-    u = j({
+    b = q({
       pointerEvent: e,
       captureEl: e.currentTarget,
       onMove: d,
       onEnd: ({
         commit: a
-      }) => tt(a)
+      }) => U(a)
     });
   };
   return (() => {
-    var e = _t(), i = e.firstChild, r = i.firstChild, d = r.firstChild, a = d.nextSibling, o = a.nextSibling, w = r.nextSibling, s = w.nextSibling, y = s.nextSibling, it = y.firstChild, P = it.nextSibling, ot = y.nextSibling, $ = ot.firstChild, k = $.nextSibling, M = k.nextSibling, nt = i.nextSibling, Y = g;
-    return typeof Y == "function" ? dt(Y, e) : g = e, L(e, at({
+    var e = _t(), i = e.firstChild, r = i.firstChild, d = r.firstChild, a = d.nextSibling, o = a.nextSibling, g = r.nextSibling, w = g.nextSibling, M = w.nextSibling, et = M.firstChild, A = et.nextSibling, it = M.nextSibling, k = it.firstChild, I = k.nextSibling, C = I.nextSibling, ot = i.nextSibling, L = h;
+    return typeof L == "function" ? rt(L, e) : h = e, F(e, nt({
       get classList() {
         return {
           "is-selected": t.selected,
-          "is-dragging": W(),
+          "is-dragging": z(),
           "is-resizing": R(),
           "is-filtered-out": t.filtered,
           "is-projected-surface": t.layoutMode === "projected_surface",
           "is-locked": t.locked
         };
-      },
+      }
+    }, () => ({
+      [s().dialogSurfaceHostAttr]: "true"
+    }), {
       get "data-floe-workbench-widget-id"() {
         return t.widgetId;
-      },
+      }
+    }, () => ({
+      [s().widgetRootAttr]: "true"
+    }), () => ({
+      [s().widgetIdAttr]: t.widgetId
+    }), {
       get "data-workbench-widget-type"() {
         return t.widgetType;
       },
@@ -231,44 +244,44 @@ function Ct(t) {
       [wt]: t.selected ? "true" : void 0
     }), {
       tabIndex: 0,
-      onPointerDown: K,
+      onPointerDown: G,
       onFocus: () => {
         t.onSelect(t.widgetId);
       },
       onContextMenu: (n) => {
-        p(n.target) === "widget_shell" && (n.preventDefault(), n.stopPropagation(), t.onContextMenu(n, t.itemSnapshot()));
+        T(n.target) === "widget_shell" && (n.preventDefault(), n.stopPropagation(), t.onContextMenu(n, t.itemSnapshot()));
       },
       get style() {
         return J();
       }
-    }), !1, !0), i.$$pointerdown = X, L(i, {
+    }), !1, !0), i.$$pointerdown = E, F(i, {
       [gt]: "true"
-    }, !1, !0), d.$$click = D, d.$$pointerdown = (n) => n.stopPropagation(), l(d, c(O, {
+    }, !1, !0), d.$$click = P, d.$$pointerdown = (n) => n.stopPropagation(), l(d, c(j, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), a.$$click = T, a.$$pointerdown = (n) => n.stopPropagation(), l(a, c(F, {
+    })), a.$$click = Y, a.$$pointerdown = (n) => n.stopPropagation(), l(a, c(O, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), o.$$click = z, o.$$pointerdown = (n) => n.stopPropagation(), l(o, c(N, {
+    })), o.$$click = D, o.$$pointerdown = (n) => n.stopPropagation(), l(o, c(N, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), l(w, U), s.$$pointerdown = X, l(s, c(st, {
+    })), l(g, K), w.$$pointerdown = E, l(w, c(st, {
       class: "w-3.5 h-3.5"
-    })), l(y, () => {
+    })), l(M, () => {
       const n = t.definition.icon;
       return c(n, {
         class: "w-3.5 h-3.5"
       });
-    }, P), l(P, () => t.widgetTitle), $.$$click = T, $.$$pointerdown = (n) => n.stopPropagation(), l($, c(F, {
+    }, A), l(A, () => t.widgetTitle), k.$$click = Y, k.$$pointerdown = (n) => n.stopPropagation(), l(k, c(O, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), k.$$click = z, k.$$pointerdown = (n) => n.stopPropagation(), l(k, c(N, {
+    })), I.$$click = D, I.$$pointerdown = (n) => n.stopPropagation(), l(I, c(N, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), M.$$click = D, M.$$pointerdown = (n) => n.stopPropagation(), l(M, c(O, {
+    })), C.$$click = P, C.$$pointerdown = (n) => n.stopPropagation(), l(C, c(j, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), l(nt, () => {
+    })), l(ot, () => {
       const n = t.definition.body;
       return c(n, {
         get widgetId() {
@@ -281,22 +294,22 @@ function Ct(t) {
           return t.widgetType;
         },
         get surfaceMetrics() {
-          return E();
+          return X();
         },
         get activation() {
-          return G();
+          return V();
         }
       });
     }), l(e, (() => {
-      var n = rt(() => !!t.locked);
+      var n = at(() => !!t.locked);
       return () => n() ? null : (() => {
         var H = bt();
-        return H.$$pointerdown = et, H;
+        return H.$$pointerdown = tt, H;
       })();
     })(), null), e;
   })();
 }
-lt(["pointerdown", "click"]);
+dt(["pointerdown", "click"]);
 export {
-  Ct as WorkbenchWidget
+  Wt as WorkbenchWidget
 };

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

@@ -1,9 +1,68 @@
 import type { Component } from 'solid-js';
 import type { WorkbenchThemeId } from './workbenchThemes';
+import type { SurfaceInteractionTargetRole, SurfaceWheelLocalReason, WorkbenchWidgetEventOwnership } from '../ui/localInteractionSurface';
 export type BuiltinWorkbenchWidgetType = 'terminal' | 'file-browser' | 'system-monitor' | 'log-viewer' | 'code-editor';
 export type WorkbenchWidgetType = BuiltinWorkbenchWidgetType | (string & {});
 export declare const WORKBENCH_WIDGET_TYPES: readonly WorkbenchWidgetType[];
 export type WorkbenchWidgetRenderMode = 'canvas_scaled' | 'projected_surface';
+export type WorkbenchCanvasOwnerReason = 'initial' | 'background_pointer' | 'background_focus' | (string & {});
+export type WorkbenchWidgetOwnerReason = 'pointer' | 'focus' | 'activation' | (string & {});
+export type WorkbenchInputOwner = {
+    kind: 'canvas';
+    reason: WorkbenchCanvasOwnerReason;
+} | {
+    kind: 'widget';
+    widgetId: string;
+    reason: WorkbenchWidgetOwnerReason;
+};
+export type WorkbenchWheelLocalReason = SurfaceWheelLocalReason | 'selected_widget' | (string & {});
+export type WorkbenchWheelRoutingDecision = {
+    kind: 'canvas_zoom';
+} | {
+    kind: 'local_surface';
+    reason: WorkbenchWheelLocalReason;
+} | {
+    kind: 'ignore';
+    reason: 'pan_zoom_disabled' | (string & {});
+};
+export interface WorkbenchInteractionAdapter {
+    surfaceRootAttr?: string;
+    widgetRootAttr?: string;
+    widgetIdAttr?: string;
+    dialogSurfaceHostAttr?: string;
+    interactiveSelector?: string;
+    panSurfaceSelector?: string;
+    wheelInteractiveSelector?: string;
+    createInitialInputOwner?: () => WorkbenchInputOwner;
+    createCanvasInputOwner?: (reason: WorkbenchCanvasOwnerReason) => WorkbenchInputOwner;
+    createWidgetInputOwner?: (widgetId: string, reason: WorkbenchWidgetOwnerReason) => WorkbenchInputOwner;
+    findWidgetRoot?: (target: EventTarget | null) => HTMLElement | null;
+    readWidgetId?: (element: Element | null) => string | null;
+    focusWidgetElement?: (root: ParentNode | null | undefined, widgetId: string) => boolean;
+    resolveSurfaceTargetRole?: (args: {
+        target: EventTarget | null;
+        interactiveSelector: string;
+        panSurfaceSelector: string;
+    }) => SurfaceInteractionTargetRole;
+    resolveWidgetEventOwnership?: (args: {
+        target: EventTarget | null;
+        widgetRoot: Element | EventTarget | null;
+        interactiveSelector: string;
+        panSurfaceSelector: string;
+    }) => WorkbenchWidgetEventOwnership;
+    resolveWheelRouting?: (args: {
+        target: EventTarget | null;
+        disablePanZoom: boolean;
+        selectedWidgetId: string | null;
+        wheelInteractiveSelector: string;
+    }) => WorkbenchWheelRoutingDecision;
+    shouldBypassGlobalHotkeys?: (args: {
+        root: HTMLElement | null | undefined;
+        target: EventTarget | null;
+        owner: WorkbenchInputOwner;
+        interactiveSelector: string;
+    }) => boolean;
+}
 export interface WorkbenchProjectedRect {
     widgetId: string;
     worldX: number;

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

@@ -0,0 +1,39 @@
+import type { WorkbenchCanvasOwnerReason, WorkbenchInputOwner, WorkbenchInteractionAdapter, WorkbenchWidgetOwnerReason } from './types';
+export declare const DEFAULT_WORKBENCH_SURFACE_ROOT_ATTR = "data-floe-workbench-surface-root";
+export declare const DEFAULT_WORKBENCH_WIDGET_ROOT_ATTR = "data-floe-workbench-widget-root";
+export declare const DEFAULT_WORKBENCH_WIDGET_ID_ATTR = "data-floe-workbench-widget-id";
+export declare const DEFAULT_WORKBENCH_DIALOG_SURFACE_HOST_ATTR = "data-floe-dialog-surface-host";
+export interface ResolvedWorkbenchInteractionAdapter extends WorkbenchInteractionAdapter {
+    surfaceRootAttr: string;
+    widgetRootAttr: string;
+    widgetIdAttr: string;
+    dialogSurfaceHostAttr: string;
+    interactiveSelector: string;
+    panSurfaceSelector: string;
+    wheelInteractiveSelector: string;
+    createInitialInputOwner: () => WorkbenchInputOwner;
+    createCanvasInputOwner: (reason: WorkbenchCanvasOwnerReason) => WorkbenchInputOwner;
+    createWidgetInputOwner: (widgetId: string, reason: WorkbenchWidgetOwnerReason) => WorkbenchInputOwner;
+    findWidgetRoot: (target: EventTarget | null) => HTMLElement | null;
+    readWidgetId: (element: Element | null) => string | null;
+    focusWidgetElement: (root: ParentNode | null | undefined, widgetId: string) => boolean;
+    resolveSurfaceTargetRole: NonNullable<WorkbenchInteractionAdapter['resolveSurfaceTargetRole']>;
+    resolveWidgetEventOwnership: NonNullable<WorkbenchInteractionAdapter['resolveWidgetEventOwnership']>;
+    resolveWheelRouting: NonNullable<WorkbenchInteractionAdapter['resolveWheelRouting']>;
+    shouldBypassGlobalHotkeys: NonNullable<WorkbenchInteractionAdapter['shouldBypassGlobalHotkeys']>;
+}
+export declare function readWorkbenchWidgetId(element: Element | null, widgetIdAttr?: string): string | null;
+export declare function findWorkbenchWidgetRoot(target: EventTarget | null, widgetRootAttr?: string): HTMLElement | null;
+export declare function findWorkbenchWidgetElement(args: {
+    root: ParentNode | null | undefined;
+    widgetId: string;
+    widgetRootAttr?: string;
+    readWidgetId?: (element: Element | null) => string | null;
+}): HTMLElement | null;
+export declare function focusWorkbenchWidgetElement(args: {
+    root: ParentNode | null | undefined;
+    widgetId: string;
+    widgetRootAttr?: string;
+    readWidgetId?: (element: Element | null) => string | null;
+}): boolean;
+export declare function resolveWorkbenchInteractionAdapter(adapter?: WorkbenchInteractionAdapter): ResolvedWorkbenchInteractionAdapter;

package/dist/components/workbench/workbenchInteractionAdapter.js

@@ -0,0 +1,103 @@
+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) {
+  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();
+  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 k(e) {
+  const {
+    root: t,
+    widgetId: o,
+    widgetRootAttr: r = a,
+    readWidgetId: c = (i) => g(i, s)
+  } = e;
+  if (!t || typeof t.querySelectorAll != "function") return null;
+  const l = t.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;
+}
+function d(e) {
+  return { kind: "canvas", reason: e };
+}
+function C(e, t) {
+  return { kind: "widget", widgetId: e, reason: t };
+}
+function H(e) {
+  const t = 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 };
+}
+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,
+    widgetId: u,
+    widgetRootAttr: o,
+    readWidgetId: f
+  }));
+  return {
+    ...e,
+    surfaceRootAttr: t,
+    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
+    })),
+    resolveWidgetEventOwnership: e?.resolveWidgetEventOwnership ?? ((n) => W({
+      target: n.target,
+      widgetRoot: n.widgetRoot,
+      interactiveSelector: n.interactiveSelector,
+      panSurfaceSelector: n.panSurfaceSelector,
+      shellSelector: I
+    })),
+    resolveWheelRouting: e?.resolveWheelRouting ?? ((n) => H({
+      target: n.target,
+      disablePanZoom: n.disablePanZoom,
+      wheelInteractiveSelector: n.wheelInteractiveSelector
+    })),
+    shouldBypassGlobalHotkeys: e?.shouldBypassGlobalHotkeys ?? ((n) => {
+      const u = m(n.target);
+      return R(u);
+    })
+  };
+}
+export {
+  h as DEFAULT_WORKBENCH_DIALOG_SURFACE_HOST_ATTR,
+  _ 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,
+  D as resolveWorkbenchInteractionAdapter
+};

package/package.json

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