@floegence/floe-webapp-core 0.36.17 → 0.36.19

package/dist/components/ui/InfiniteCanvas.d.ts

@@ -1,4 +1,5 @@
 import { type JSX } from 'solid-js';
+import { type SurfaceInteractionTargetRole, type SurfaceWheelRoutingDecision } from './localInteractionSurface';
 export interface InfiniteCanvasPoint {
     x: number;
     y: number;
@@ -26,6 +27,22 @@ export interface InfiniteCanvasProps {
     interactiveSelector?: string;
     panSurfaceSelector?: string;
     wheelInteractiveSelector?: string;
+    resolveTargetRole?: (args: {
+        target: EventTarget | null;
+        interactiveSelector: string;
+        panSurfaceSelector: string;
+    }) => SurfaceInteractionTargetRole;
+    resolveWheelRouting?: (args: {
+        target: EventTarget | null;
+        disablePanZoom: boolean;
+        wheelInteractiveSelector: string;
+    }) => SurfaceWheelRoutingDecision | {
+        kind: 'local_surface';
+        reason: string;
+    } | {
+        kind: 'ignore';
+        reason: string;
+    };
     minScale?: number;
     maxScale?: number;
     wheelZoomSpeed?: number;

package/dist/components/ui/InfiniteCanvas.js

@@ -1,13 +1,13 @@
 import { spread as z, mergeProps as B, insert as _, effect as j, className as q, setStyleProperty as G, template as J, use as K } from "solid-js/web";
 import { createSignal as T, untrack as L, createEffect as A, onCleanup as I } from "solid-js";
 import { cn as D } from "../../utils/cn.js";
-import { startHotInteraction as x } from "../../utils/hotInteraction.js";
+import { startHotInteraction as R } from "../../utils/hotInteraction.js";
 import { resolveSurfaceInteractionTargetRole as Q, resolveSurfaceWheelRouting as ee, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as te } from "./localInteractionSurface.js";
 import { startPointerSession as ne } from "./pointerSession.js";
-import { clientToCanvasLocal as Y, localToCanvasWorld as re, createViewportFromZoomAnchor as oe } from "./canvasGeometry.js";
+import { clientToCanvasLocal as x, localToCanvasWorld as re, createViewportFromZoomAnchor as oe } from "./canvasGeometry.js";
 import { SURFACE_PORTAL_LAYER_ATTR as ae } from "./dialogSurfaceScope.js";
 var ie = /* @__PURE__ */ J('<div><div style="transform-origin:0 0">');
-const ce = 1, le = 0.45, se = 2.2, ue = 14e-4, fe = '[data-floe-canvas-pan-surface="true"]', R = 3;
+const ce = 1, le = 0.45, se = 2.2, ue = 14e-4, fe = '[data-floe-canvas-pan-surface="true"]', Y = 3;
 function de(t, a, f) {
   return Math.max(a, Math.min(f, t));
 }
@@ -22,14 +22,14 @@ function me(t, a) {
   return t.deltaMode === 1 ? t.deltaY * 16 : t.deltaMode === 2 ? t.deltaY * (a?.clientHeight ?? window.innerHeight) : t.deltaY;
 }
 function Pe(t) {
-  const [a, f] = T(L(() => b(t.viewport))), [S, w] = T(null);
+  const [a, f] = T(L(() => b(t.viewport))), [S, v] = T(null);
   let i, s, d, m = !1, l;
   const M = () => t.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => t.panSurfaceSelector ?? fe, F = () => t.wheelInteractiveSelector ?? te, V = () => t.minScale ?? le, y = () => t.maxScale ?? se, k = () => t.wheelZoomSpeed ?? ue, N = () => {
     const e = S();
     return e ? e.startedFromPanSurface ? e.moved : !0 : !1;
-  }, v = () => {
+  }, w = () => {
     d !== void 0 && (window.clearTimeout(d), d = void 0);
-  }, C = () => {
+  }, g = () => {
     m = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
   }, U = () => {
     if (typeof window > "u") {
@@ -39,26 +39,26 @@ function Pe(t) {
     l !== void 0 && window.clearTimeout(l), l = window.setTimeout(() => {
       l = void 0, m = !1;
     }, 0);
-  }, g = (e) => {
+  }, C = (e) => {
     L(() => t.onViewportChange?.(e));
-  }, Z = (e) => {
+  }, W = (e) => {
     if (typeof window > "u") {
-      g(e);
+      C(e);
       return;
     }
-    v(), d = window.setTimeout(() => {
-      d = void 0, g(e);
+    w(), d = window.setTimeout(() => {
+      d = void 0, C(e);
     }, 90);
-  }, p = (e) => Q({
+  }, h = (e) => (t.resolveTargetRole ?? Q)({
     target: e,
     interactiveSelector: M(),
     panSurfaceSelector: X()
-  }), H = () => {
+  }), Z = () => {
     const e = S();
     if (!e) return;
     e.stopInteraction?.();
     const n = a();
-    w(null), s = void 0, e.startedFromPanSurface && e.moved && (m = !0, U()), g(n);
+    v(null), s = void 0, e.startedFromPanSurface && e.moved && (m = !0, U()), C(n);
   };
   A(() => {
     S() || f(b(t.viewport));
@@ -66,35 +66,35 @@ function Pe(t) {
     const e = i;
     if (!e) return;
     const n = (r) => {
-      !m || p(r.target) !== "pan_surface" || (C(), r.preventDefault(), r.stopPropagation());
+      !m || h(r.target) !== "pan_surface" || (g(), r.preventDefault(), r.stopPropagation());
     };
-    e.addEventListener("click", n, !0), e.addEventListener("wheel", h, {
+    e.addEventListener("click", n, !0), e.addEventListener("wheel", E, {
       passive: !1
     }), I(() => {
-      e.removeEventListener("click", n, !0), e.removeEventListener("wheel", h);
+      e.removeEventListener("click", n, !0), e.removeEventListener("wheel", E);
     });
   }), I(() => {
-    v(), s?.stop({
+    w(), s?.stop({
       reason: "manual_stop",
       commit: !0
-    }), s = void 0, C();
+    }), s = void 0, g();
   });
-  const W = (e) => {
+  const H = (e) => {
     if (e.button !== 0) return;
-    const n = p(e.target);
+    const n = h(e.target);
     if (n === "canvas" && t.onCanvasPointerDown?.(e), t.disablePanZoom) return;
     const r = n === "pan_surface";
-    n !== "local_surface" && (v(), C(), r || (t.onViewportInteractionStart?.("pan"), e.preventDefault()), s?.stop({
+    n !== "local_surface" && (w(), g(), r || (t.onViewportInteractionStart?.("pan"), e.preventDefault()), s?.stop({
       reason: "manual_stop",
       commit: !0
-    }), w({
+    }), v({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
       startViewport: a(),
       moved: !1,
       startedFromPanSurface: r,
-      stopInteraction: r ? void 0 : x({
+      stopInteraction: r ? void 0 : R({
         kind: "drag",
         cursor: "grabbing"
       })
@@ -104,53 +104,53 @@ function Pe(t) {
       capturePointer: !r,
       onMove: O,
       onEnd: () => {
-        H();
+        Z();
       }
     }));
   }, O = (e) => {
     const n = S();
     if (!n || n.pointerId !== e.pointerId) return;
     const r = e.clientX - n.startClientX, o = e.clientY - n.startClientY;
-    if (!(n.moved || Math.abs(r) > R || Math.abs(o) > R)) return;
+    if (!(n.moved || Math.abs(r) > Y || Math.abs(o) > Y)) return;
     n.moved || (e.preventDefault(), (!i || typeof i.hasPointerCapture != "function" || !i.hasPointerCapture(e.pointerId)) && s?.capturePointer());
     const u = {
       ...n.startViewport,
       x: n.startViewport.x + r,
       y: n.startViewport.y + o
     };
-    n.moved || w({
+    n.moved || v({
       ...n,
       moved: !0,
-      stopInteraction: n.stopInteraction ?? x({
+      stopInteraction: n.stopInteraction ?? R({
         kind: "drag",
         cursor: "grabbing"
       })
     }), f(u);
-  }, h = (e) => {
+  }, E = (e) => {
     const n = i?.getBoundingClientRect();
-    if (!n || ee({
+    if (!n || (t.resolveWheelRouting ?? ee)({
       target: e.target,
       disablePanZoom: !!t.disablePanZoom,
       wheelInteractiveSelector: F()
     }).kind !== "canvas_zoom") return;
     e.preventDefault(), t.onViewportInteractionStart?.("wheel");
-    const o = a(), c = Y(n, {
+    const o = a(), c = x(n, {
       clientX: e.clientX,
       clientY: e.clientY
-    }), u = me(e, i), E = de(o.scale * Math.exp(-u * k()), V(), y());
-    if (Math.abs(E - o.scale) < 1e-4) return;
+    }), u = me(e, i), p = de(o.scale * Math.exp(-u * k()), V(), y());
+    if (Math.abs(p - o.scale) < 1e-4) return;
     const P = oe({
       viewport: o,
       localPoint: c,
-      nextScale: E
+      nextScale: p
     });
-    f(P), Z(P);
+    f(P), W(P);
   }, $ = (e) => {
-    if (p(e.target) !== "canvas") return;
+    if (h(e.target) !== "canvas") return;
     const n = i?.getBoundingClientRect();
     if (!n) return;
     e.preventDefault();
-    const r = Y(n, {
+    const r = x(n, {
       clientX: e.clientX,
       clientY: e.clientY
     }), o = a(), c = re(o, r);
@@ -172,7 +172,7 @@ function Pe(t) {
     }, {
       [ae]: "true"
     }, {
-      onPointerDown: W,
+      onPointerDown: H,
       onContextMenu: $,
       get "aria-label"() {
         return t.ariaLabel ?? "Infinite canvas";

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

@@ -9,7 +9,7 @@ export { CommandPalette } from './CommandPalette';
 export { InfiniteCanvas, type InfiniteCanvasProps, type InfiniteCanvasPoint, type InfiniteCanvasContextMenuEvent, } from './InfiniteCanvas';
 export { startPointerSession, type PointerSessionController, type PointerSessionEndEvent, type PointerSessionEndReason, type PointerSessionSnapshot, type StartPointerSessionOptions, } from './pointerSession';
 export { clientToCanvasLocal, clientToCanvasWorld, createViewportFromZoomAnchor, isPointInsideCanvasRect, localToCanvasWorld, type CanvasClientPoint, type CanvasLocalPoint, type CanvasViewportLike, type CanvasViewportRectLike, type CanvasWorldPoint, } from './canvasGeometry';
-export { CANVAS_WHEEL_INTERACTIVE_ATTR, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR, LOCAL_INTERACTION_SURFACE_ATTR, DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR, WORKBENCH_WIDGET_SHELL_ATTR, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR, isLocalInteractionSurfaceTarget, resolveSurfaceInteractionTargetRole, resolveSurfaceWheelRouting, resolveWorkbenchWidgetEventOwnership, type SurfaceInteractionRoutingOptions, type SurfaceInteractionTargetRole, type SurfaceWheelLocalReason, type SurfaceWheelRoutingDecision, type SurfaceWheelRoutingOptions, type WorkbenchWidgetEventOwnership, type WorkbenchWidgetEventOwnershipOptions, } from './localInteractionSurface';
+export { CANVAS_WHEEL_INTERACTIVE_ATTR, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR, LOCAL_INTERACTION_SURFACE_ATTR, DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR, WORKBENCH_WIDGET_SHELL_ATTR, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR, isLocalInteractionSurfaceTarget, resolveSurfaceInteractionTargetRole, resolveSurfaceWheelRouting, resolveWorkbenchWidgetEventOwnership, shouldActivateWorkbenchWidgetLocalTarget, type SurfaceInteractionRoutingOptions, type SurfaceInteractionTargetRole, type SurfaceWheelLocalReason, type SurfaceWheelRoutingDecision, type SurfaceWheelRoutingOptions, type WorkbenchWidgetEventOwnership, type WorkbenchWidgetEventOwnershipOptions, type WorkbenchWidgetLocalActivationTargetOptions, } from './localInteractionSurface';
 export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, isSurfacePortalMode, projectSurfacePortalPosition, projectSurfacePortalRect, resolveSurfacePortalBoundaryRect, resolveSurfacePortalHost, resolveSurfacePortalMount, resolveSurfacePortalMountRect, __resetSurfacePortalScopeForTests, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalInteractionSnapshot, type SurfacePortalMode, type SurfacePortalRect, } from './surfacePortalScope';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Interactive3DCard, AnimatedBorderCard, NeonCard, MorphCard, type CardProps, type CardVariant, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, type Interactive3DCardProps, type AnimatedBorderCardProps, type NeonCardProps, type MorphCardProps, } from './Card';
 export { Tabs, TabPanel, type TabsProps, type TabPanelProps, type TabItem, type TabsFeatures, type TabsSlotClassNames, type TabsIndicatorMode, type TabsIndicatorColorToken, } from './Tabs';

package/dist/components/ui/localInteractionSurface.d.ts

@@ -26,6 +26,7 @@ export interface WorkbenchWidgetEventOwnershipOptions extends SurfaceInteraction
     widgetRoot: Element | EventTarget | null;
     shellSelector?: string;
 }
+export type WorkbenchWidgetLocalActivationTargetOptions = WorkbenchWidgetEventOwnershipOptions;
 export interface SurfaceWheelRoutingOptions {
     target: EventTarget | null;
     disablePanZoom: boolean;
@@ -36,3 +37,4 @@ export declare function resolveSurfaceInteractionTargetRole(options: SurfaceInte
 export declare function resolveSurfaceWheelRouting(options: SurfaceWheelRoutingOptions): SurfaceWheelRoutingDecision;
 export declare function isLocalInteractionSurfaceTarget(options: SurfaceInteractionRoutingOptions): boolean;
 export declare function resolveWorkbenchWidgetEventOwnership(options: WorkbenchWidgetEventOwnershipOptions): WorkbenchWidgetEventOwnership;
+export declare function shouldActivateWorkbenchWidgetLocalTarget(options: WorkbenchWidgetLocalActivationTargetOptions): boolean;

package/dist/components/ui/localInteractionSurface.js

@@ -1,48 +1,73 @@
-import { isTypingElement as a } from "../../utils/dom.js";
-const u = "data-floe-local-interaction-surface", i = `[${u}="true"]`, f = "data-floe-canvas-wheel-interactive", E = `[${f}="true"]`, _ = "data-floe-workbench-widget-shell", T = `[${_}="true"]`;
-function c(e) {
+import { isTypingElement as o } from "../../utils/dom.js";
+const f = "data-floe-local-interaction-surface", u = `[${f}="true"]`, E = "data-floe-canvas-wheel-interactive", d = `[${E}="true"]`, _ = "data-floe-workbench-widget-shell", i = `[${_}="true"]`;
+function a(e) {
   return typeof Element < "u" && e instanceof Element ? e : typeof Node < "u" && e instanceof Node ? e.parentElement : null;
 }
+function T(e) {
+  if (!e || typeof HTMLElement > "u" || !(e instanceof HTMLElement))
+    return !1;
+  if (e.matches("button, input, select, textarea, summary") || e.matches("a[href], area[href]") || e.matches('iframe, [contenteditable="true"]')) return !0;
+  const t = e.getAttribute("tabindex");
+  return t !== null && t !== "-1";
+}
+function S(e, t) {
+  let r = e;
+  for (; r && r !== t; ) {
+    if (o(r) || T(r))
+      return !0;
+    r = r.parentElement;
+  }
+  return !1;
+}
 function s(e) {
   const {
     target: t,
-    interactiveSelector: l,
-    panSurfaceSelector: r,
-    localInteractionSurfaceSelector: n = i
-  } = e, o = t instanceof Element ? t : null;
-  return o ? o.closest(r) !== null ? "pan_surface" : a(o) || o.closest(l) !== null || o.closest(n) !== null ? "local_surface" : "canvas" : "canvas";
+    interactiveSelector: r,
+    panSurfaceSelector: c,
+    localInteractionSurfaceSelector: n = u
+  } = e, l = t instanceof Element ? t : null;
+  return l ? l.closest(c) !== null ? "pan_surface" : o(l) || l.closest(r) !== null || l.closest(n) !== null ? "local_surface" : "canvas" : "canvas";
 }
-function d(e) {
+function g(e) {
   const {
     target: t,
-    localInteractionSurfaceSelector: l = i,
-    wheelInteractiveSelector: r = E
-  } = e, n = c(t);
-  return n ? a(n) ? "typing_element" : n.closest(l) !== null ? "local_interaction_surface" : n.closest(r) !== null ? "wheel_interactive" : null : null;
+    localInteractionSurfaceSelector: r = u,
+    wheelInteractiveSelector: c = d
+  } = e, n = a(t);
+  return n ? o(n) ? "typing_element" : n.closest(r) !== null ? "local_interaction_surface" : n.closest(c) !== null ? "wheel_interactive" : null : null;
 }
-function R(e) {
-  const t = d(e);
+function L(e) {
+  const t = g(e);
   return t ? { kind: "local_surface", reason: t } : e.disablePanZoom ? { kind: "ignore", reason: "pan_zoom_disabled" } : { kind: "canvas_zoom" };
 }
 function A(e) {
   return s(e) !== "canvas";
 }
-function L(e) {
+function m(e) {
+  const {
+    widgetRoot: t,
+    shellSelector: r = i
+  } = e, c = a(t), n = a(e.target);
+  return !c || !n || !c.contains(n) ? "outside_widget" : s(e) !== "canvas" ? "widget_local" : n === c || n.closest(r) !== null ? "widget_shell" : "widget_local";
+}
+function R(e) {
   const {
     widgetRoot: t,
-    shellSelector: l = T
-  } = e, r = c(t), n = c(e.target);
-  return !r || !n || !r.contains(n) ? "outside_widget" : s(e) !== "canvas" ? "widget_local" : n === r || n.closest(l) !== null ? "widget_shell" : "widget_local";
+    shellSelector: r = i,
+    localInteractionSurfaceSelector: c = u
+  } = e, n = a(t), l = a(e.target);
+  return !n || !l || !n.contains(l) || l === n || l.closest(r) !== null || l.closest(e.panSurfaceSelector) !== null || l.closest(c) !== null || S(l, n) ? !1 : m(e) === "widget_local";
 }
 export {
-  f as CANVAS_WHEEL_INTERACTIVE_ATTR,
-  E as DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR,
-  i as DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR,
-  T as DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR,
-  u as LOCAL_INTERACTION_SURFACE_ATTR,
+  E as CANVAS_WHEEL_INTERACTIVE_ATTR,
+  d as DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR,
+  u as DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR,
+  i as DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR,
+  f as LOCAL_INTERACTION_SURFACE_ATTR,
   _ as WORKBENCH_WIDGET_SHELL_ATTR,
   A as isLocalInteractionSurfaceTarget,
   s as resolveSurfaceInteractionTargetRole,
-  R as resolveSurfaceWheelRouting,
-  L as resolveWorkbenchWidgetEventOwnership
+  L as resolveSurfaceWheelRouting,
+  m as resolveWorkbenchWidgetEventOwnership,
+  R as shouldActivateWorkbenchWidgetLocalTarget
 };

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

@@ -1,5 +1,6 @@
 import { type InfiniteCanvasContextMenuEvent } from '../../ui';
-import type { WorkbenchViewport, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+import { type ResolvedWorkbenchInteractionAdapter } from './workbenchInteractionAdapter';
+import type { WorkbenchInteractionAdapter, WorkbenchViewport, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
 export interface WorkbenchCanvasProps {
     widgetDefinitions: readonly WorkbenchWidgetDefinition[];
     widgets: readonly WorkbenchWidgetItem[];
@@ -12,6 +13,7 @@ export interface WorkbenchCanvasProps {
     optimisticFrontWidgetId: string | null;
     locked: boolean;
     filters: Record<WorkbenchWidgetType, boolean>;
+    interactionAdapter?: WorkbenchInteractionAdapter | ResolvedWorkbenchInteractionAdapter;
     setCanvasFrameRef: (el: HTMLDivElement | undefined) => void;
     onViewportCommit: (viewport: WorkbenchViewport) => void;
     onViewportInteractionStart?: (kind: 'wheel' | 'pan') => void;
@@ -32,5 +34,7 @@ export interface WorkbenchCanvasProps {
     onRequestOverview: (item: WorkbenchWidgetItem) => void;
     onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;
+    onLayoutInteractionStart?: () => void;
+    onLayoutInteractionEnd?: () => void;
 }
 export declare function WorkbenchCanvas(props: WorkbenchCanvasProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,21 +1,22 @@
-import { use as C, insert as m, createComponent as i, effect as R, template as w } from "solid-js/web";
-import { createMemo as o, Show as h, For as W } from "solid-js";
-import { WorkbenchCanvasField as F } from "./WorkbenchCanvasField.js";
-import { WorkbenchWidget as y } from "./WorkbenchWidget.js";
-import { createWorkbenchRenderLayerMap as I, resolveWorkbenchWidgetRenderMode as l } from "./workbenchHelpers.js";
-import { getWidgetEntry as u } from "./widgets/widgetRegistry.js";
-import { InfiniteCanvas as S } from "../ui/InfiniteCanvas.js";
-var k = /* @__PURE__ */ w("<div class=workbench-canvas><div class=workbench-canvas__atmosphere aria-hidden=true>"), M = /* @__PURE__ */ w("<div class=workbench-canvas__projected-layer>");
+import { use as I, insert as v, createComponent as a, effect as h, template as s } from "solid-js/web";
+import { createMemo as i, Show as R, For as W } from "solid-js";
+import { resolveWorkbenchInteractionAdapter as y } from "./workbenchInteractionAdapter.js";
+import { WorkbenchCanvasField as S } from "./WorkbenchCanvasField.js";
+import { WorkbenchWidget as F } from "./WorkbenchWidget.js";
+import { createWorkbenchRenderLayerMap as k, resolveWorkbenchWidgetRenderMode as w } from "./workbenchHelpers.js";
+import { getWidgetEntry as c } from "./widgets/widgetRegistry.js";
+import { InfiniteCanvas as L } from "../ui/InfiniteCanvas.js";
+var M = /* @__PURE__ */ s("<div class=workbench-canvas><div class=workbench-canvas__atmosphere aria-hidden=true>"), b = /* @__PURE__ */ s("<div class=workbench-canvas__projected-layer>");
 function q(e) {
-  const n = o((g) => {
-    const d = e.widgetById().get(e.widgetId);
-    if (d) return d;
+  const n = i((d) => {
+    const g = e.widgetById().get(e.widgetId);
     if (g) return g;
+    if (d) return d;
     throw new Error(`Workbench widget ${e.widgetId} is missing from the projected render map.`);
-  }), a = o(() => u(n().type, e.widgetDefinitions));
-  return i(y, {
+  }), u = i(() => c(n().type, e.widgetDefinitions));
+  return a(F, {
     get definition() {
-      return a();
+      return u();
     },
     get widgetId() {
       return e.widgetId;
@@ -60,6 +61,9 @@ function q(e) {
     get filtered() {
       return !e.filters[n().type];
     },
+    get interactionAdapter() {
+      return e.interactionAdapter;
+    },
     layoutMode: "projected_surface",
     get projectedViewport() {
       return e.projectedViewport;
@@ -93,22 +97,28 @@ function q(e) {
     },
     get onRequestDelete() {
       return e.onRequestDelete;
+    },
+    get onLayoutInteractionStart() {
+      return e.onLayoutInteractionStart;
+    },
+    get onLayoutInteractionEnd() {
+      return e.onLayoutInteractionEnd;
     }
   });
 }
-function V(e) {
-  const n = o(() => new Map(e.widgets.map((t) => [t.id, t]))), a = o(() => I(e.widgets)), g = o(() => e.widgets.filter((t) => {
-    const r = u(t.type, e.widgetDefinitions);
-    return l(r) === "canvas_scaled";
-  })), d = o(() => e.widgets.filter((t) => {
-    const r = u(t.type, e.widgetDefinitions);
-    return l(r) === "projected_surface";
-  }).map((t) => t.id)), s = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0;
+function A(e) {
+  const n = i(() => y(e.interactionAdapter)), u = i(() => new Map(e.widgets.map((t) => [t.id, t]))), d = i(() => k(e.widgets)), g = i(() => e.widgets.filter((t) => {
+    const o = c(t.type, e.widgetDefinitions);
+    return w(o) === "canvas_scaled";
+  })), m = i(() => e.widgets.filter((t) => {
+    const o = c(t.type, e.widgetDefinitions);
+    return w(o) === "projected_surface";
+  }).map((t) => t.id)), f = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0;
   return (() => {
-    var t = k();
+    var t = M();
     t.firstChild;
-    var r = e.setCanvasFrameRef;
-    return typeof r == "function" ? C(r, t) : e.setCanvasFrameRef = t, m(t, i(S, {
+    var o = e.setCanvasFrameRef;
+    return typeof o == "function" ? I(o, t) : e.setCanvasFrameRef = t, v(t, a(L, {
       ariaLabel: "Workbench canvas",
       class: "workbench-canvas__infinite",
       get viewport() {
@@ -126,29 +136,40 @@ function V(e) {
       get onCanvasPointerDown() {
         return e.onCanvasPointerDown;
       },
+      resolveTargetRole: (r) => n().resolveSurfaceTargetRole({
+        target: r.target,
+        interactiveSelector: r.interactiveSelector,
+        panSurfaceSelector: r.panSurfaceSelector
+      }),
+      resolveWheelRouting: (r) => n().resolveWheelRouting({
+        target: r.target,
+        disablePanZoom: r.disablePanZoom,
+        selectedWidgetId: e.selectedWidgetId,
+        wheelInteractiveSelector: r.wheelInteractiveSelector
+      }),
       get disablePanZoom() {
         return e.locked;
       },
-      overlay: (v) => i(h, {
+      overlay: (r) => a(R, {
         get when() {
-          return d().length > 0;
+          return m().length > 0;
         },
         get children() {
-          var c = M();
-          return m(c, i(W, {
+          var l = b();
+          return v(l, a(W, {
             get each() {
-              return d();
+              return m();
             },
-            children: (f) => i(q, {
-              widgetId: f,
+            children: (C) => a(q, {
+              widgetId: C,
               get widgetDefinitions() {
                 return e.widgetDefinitions;
               },
               get canvasFrameSize() {
                 return e.canvasFrameSize;
               },
-              widgetById: n,
-              renderLayers: a,
+              widgetById: u,
+              renderLayers: d,
               get selectedWidgetId() {
                 return e.selectedWidgetId;
               },
@@ -161,6 +182,9 @@ function V(e) {
               get filters() {
                 return e.filters;
               },
+              get interactionAdapter() {
+                return n();
+              },
               get setCanvasFrameRef() {
                 return e.setCanvasFrameRef;
               },
@@ -197,16 +221,22 @@ function V(e) {
               get onRequestDelete() {
                 return e.onRequestDelete;
               },
-              projectedViewport: v,
+              get onLayoutInteractionStart() {
+                return e.onLayoutInteractionStart;
+              },
+              get onLayoutInteractionEnd() {
+                return e.onLayoutInteractionEnd;
+              },
+              projectedViewport: r,
               get surfaceReady() {
-                return s();
+                return f();
               }
             })
-          })), c;
+          })), l;
         }
       }),
       get children() {
-        return i(F, {
+        return a(S, {
           get widgetDefinitions() {
             return e.widgetDefinitions;
           },
@@ -228,6 +258,9 @@ function V(e) {
           get filters() {
             return e.filters;
           },
+          get interactionAdapter() {
+            return n();
+          },
           get onSelectWidget() {
             return e.onSelectWidget;
           },
@@ -254,12 +287,18 @@ function V(e) {
           },
           get onRequestDelete() {
             return e.onRequestDelete;
+          },
+          get onLayoutInteractionStart() {
+            return e.onLayoutInteractionStart;
+          },
+          get onLayoutInteractionEnd() {
+            return e.onLayoutInteractionEnd;
           }
         });
       }
-    }), null), R(() => t.classList.toggle("is-locked", !!e.locked)), t;
+    }), null), h(() => t.classList.toggle("is-locked", !!e.locked)), t;
   })();
 }
 export {
-  V as WorkbenchCanvas
+  A as WorkbenchCanvas
 };

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

@@ -1,4 +1,5 @@
-import type { WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+import { type ResolvedWorkbenchInteractionAdapter } from './workbenchInteractionAdapter';
+import type { WorkbenchInteractionAdapter, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
 export interface WorkbenchCanvasFieldProps {
     widgetDefinitions: readonly WorkbenchWidgetDefinition[];
     widgets: readonly WorkbenchWidgetItem[];
@@ -7,6 +8,7 @@ export interface WorkbenchCanvasFieldProps {
     viewportScale: number;
     locked: boolean;
     filters: Record<WorkbenchWidgetType, boolean>;
+    interactionAdapter?: WorkbenchInteractionAdapter | ResolvedWorkbenchInteractionAdapter;
     onSelectWidget: (widgetId: string) => void;
     onWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
     onStartOptimisticFront: (widgetId: string) => void;
@@ -22,5 +24,7 @@ export interface WorkbenchCanvasFieldProps {
     onRequestOverview: (item: WorkbenchWidgetItem) => void;
     onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;
+    onLayoutInteractionStart?: () => void;
+    onLayoutInteractionEnd?: () => void;
 }
 export declare function WorkbenchCanvasField(props: WorkbenchCanvasFieldProps): import("solid-js").JSX.Element;