@floegence/floe-webapp-core 0.36.7 → 0.36.8

package/dist/components/editor/CodeEditor.d.ts

@@ -1,11 +1,13 @@
 import { type JSX } from 'solid-js';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
 import 'monaco-editor/min/vs/editor/editor.main.css';
+import { type CodeEditorRuntimeOptions } from './monacoStandaloneRuntime';
 export interface CodeEditorProps {
     path: string;
     language?: string;
     value: string;
     options?: monaco.editor.IStandaloneEditorConstructionOptions;
+    runtimeOptions?: CodeEditorRuntimeOptions;
     class?: string;
     style?: JSX.CSSProperties;
     onReady?: (api: CodeEditorApi) => void;

package/dist/components/editor/CodeEditor.js

@@ -1,11 +1,11 @@
-import { use as L, effect as D, className as F, style as O, template as V } from "solid-js/web";
-import { onMount as b, onCleanup as p, createEffect as g } from "solid-js";
-import { useTheme as q } from "../../context/ThemeContext.js";
-import { useResizeObserver as w } from "../../hooks/useResizeObserver.js";
+import { use as L, effect as O, className as D, style as F, template as V } from "solid-js/web";
+import { onMount as b, onCleanup as q, createEffect as g } from "solid-js";
+import { useTheme as w } from "../../context/ThemeContext.js";
+import { useResizeObserver as A } from "../../hooks/useResizeObserver.js";
 import * as f from "monaco-editor/esm/vs/editor/editor.api.js";
 import "monaco-editor/min/vs/editor/editor.main.css";
-import { resolveCodeEditorLanguageSpec as A } from "./languages.js";
-import { ensureMonacoEnvironment as U } from "./monacoEnvironment.js";
+import { resolveCodeEditorLanguageSpec as U } from "./languages.js";
+import { ensureMonacoEnvironment as p } from "./monacoEnvironment.js";
 import { ensureMonacoStandaloneRuntime as N } from "./monacoStandaloneRuntime.js";
 var _ = /* @__PURE__ */ V("<div>");
 const E = {
@@ -30,11 +30,11 @@ function B(t, c) {
   return !r || r.isEmpty() ? "" : c.getValueInRange(r);
 }
 function X(t) {
-  const c = q();
+  const c = w();
   let r;
   const R = ++$;
-  let n, o, s, S = null, v = 0;
-  const x = w(() => r), y = () => {
+  let n, o, d, S = null, v = 0;
+  const x = A(() => r), y = () => {
     f.editor.setTheme(c.resolvedTheme() === "dark" ? "vs-dark" : "vs");
   }, m = () => !n || !o ? null : {
     editor: n,
@@ -52,7 +52,7 @@ function X(t) {
     e && t.onSelectionChange?.(e.getSelectedText(), e);
   }, I = async () => {
     if (!n) return;
-    const e = ++v, a = A(t.language);
+    const e = ++v, a = U(t.language);
     let i = a.id;
     try {
       await a.load?.();
@@ -61,34 +61,34 @@ function X(t) {
       i = "plaintext";
     }
     if (!n || e !== v) return;
-    const d = k(R, t.path);
-    if (o && o.uri.toString() === d.toString()) {
+    const u = k(R, t.path);
+    if (o && o.uri.toString() === u.toString()) {
       o.getLanguageId() !== i && f.editor.setModelLanguage(o, i), o.getValue() !== t.value && o.setValue(t.value), C(), M();
       return;
     }
-    const l = f.editor.createModel(t.value, i, d);
+    const l = f.editor.createModel(t.value, i, u);
     o?.dispose(), o = l, n.setModel(o), C(), M();
   };
   return b(() => {
     let e = !1, a, i;
     (async () => {
-      if (!r || (U(), await N(), e || !r) || (n = f.editor.create(r, {
+      if (!r || (p(), await N(t.runtimeOptions), e || !r) || (n = f.editor.create(r, {
         model: null,
         ...E,
         ...t.options ?? {}
       }), y(), await I(), e || !n)) return;
       const l = t.onContentChange, T = t.onChange, z = t.onSelectionChange;
-      a = n.onDidChangeModelContent((u) => {
+      a = n.onDidChangeModelContent((s) => {
         const h = m();
-        h && (l?.(u, h), T && T(h.getValue()));
+        h && (l?.(s, h), T && T(h.getValue()));
       }), i = n.onDidChangeCursorSelection(() => {
-        const u = m();
-        u && z?.(u.getSelectedText(), u);
+        const s = m();
+        s && z?.(s.getSelectedText(), s);
       });
     })().catch((l) => {
       console.error("Failed to initialize Monaco editor runtime", l);
-    }), p(() => {
-      e = !0, a?.dispose(), i?.dispose(), s && cancelAnimationFrame(s), n?.dispose(), o?.dispose(), n = void 0, o = void 0;
+    }), q(() => {
+      e = !0, a?.dispose(), i?.dispose(), d && cancelAnimationFrame(d), n?.dispose(), o?.dispose(), n = void 0, o = void 0;
     });
   }), g(() => {
     y();
@@ -101,7 +101,7 @@ function X(t) {
     t.path, t.language, t.value, I();
   }), g(() => {
     const e = x();
-    !e || !n || (s && cancelAnimationFrame(s), s = requestAnimationFrame(() => {
+    !e || !n || (d && cancelAnimationFrame(d), d = requestAnimationFrame(() => {
       n?.layout({
         width: e.width,
         height: e.height
@@ -109,9 +109,9 @@ function X(t) {
     }));
   }), (() => {
     var e = _(), a = r;
-    return typeof a == "function" ? L(a, e) : r = e, D((i) => {
-      var d = t.class, l = t.style;
-      return d !== i.e && F(e, i.e = d), i.t = O(e, l, i.t), i;
+    return typeof a == "function" ? L(a, e) : r = e, O((i) => {
+      var u = t.class, l = t.style;
+      return u !== i.e && D(e, i.e = u), i.t = F(e, l, i.t), i;
     }, {
       e: void 0,
       t: void 0

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

@@ -1,2 +1,3 @@
 export { CodeEditor, type CodeEditorProps, type CodeEditorApi } from './CodeEditor';
 export { resolveCodeEditorLanguageSpec, isCodeEditorLanguageSupported, type CodeEditorLanguageSpec } from './languages';
+export { DEFAULT_MONACO_STANDALONE_FEATURES, normalizeMonacoRuntimeFeatureSet, type CodeEditorRuntimeOptions, type MonacoRuntimeFeatureSet, } from './monacoStandaloneRuntime';

package/dist/components/editor/monacoStandaloneRuntime.d.ts

@@ -1,4 +1,16 @@
-type MonacoStandaloneRuntimeLoader = () => Promise<unknown>;
-export declare function createMonacoStandaloneRuntime(loader: MonacoStandaloneRuntimeLoader): () => Promise<void>;
-export declare const ensureMonacoStandaloneRuntime: () => Promise<void>;
+export interface MonacoRuntimeFeatureSet {
+    suggestMemory: boolean;
+    codeLensCache: boolean;
+    inlayHintsCache: boolean;
+    treeViewsDnd: boolean;
+    actionWidget: boolean;
+}
+export interface CodeEditorRuntimeOptions {
+    standaloneFeatures?: Partial<MonacoRuntimeFeatureSet>;
+}
+export declare const DEFAULT_MONACO_STANDALONE_FEATURES: MonacoRuntimeFeatureSet;
+type MonacoStandaloneRuntimeLoader = (features: MonacoRuntimeFeatureSet) => Promise<unknown>;
+export declare function normalizeMonacoRuntimeFeatureSet(standaloneFeatures?: Partial<MonacoRuntimeFeatureSet>): MonacoRuntimeFeatureSet;
+export declare function createMonacoStandaloneRuntime(loader: MonacoStandaloneRuntimeLoader): (options?: CodeEditorRuntimeOptions) => Promise<void>;
+export declare const ensureMonacoStandaloneRuntime: (options?: CodeEditorRuntimeOptions) => Promise<void>;
 export {};

package/dist/components/editor/monacoStandaloneRuntime.js

@@ -1,21 +1,49 @@
-function e(t) {
-  let n = null;
-  return () => n || (n = t().then(() => {
-  }).catch((o) => {
-    throw n = null, o;
-  }), n);
+const s = {
+  suggestMemory: !0,
+  codeLensCache: !0,
+  inlayHintsCache: !0,
+  treeViewsDnd: !0,
+  actionWidget: !0
+};
+function u(e) {
+  return {
+    ...s,
+    ...e ?? {}
+  };
+}
+function d(e) {
+  return [
+    `suggestMemory:${e.suggestMemory ? "1" : "0"}`,
+    `codeLensCache:${e.codeLensCache ? "1" : "0"}`,
+    `inlayHintsCache:${e.inlayHintsCache ? "1" : "0"}`,
+    `treeViewsDnd:${e.treeViewsDnd ? "1" : "0"}`,
+    `actionWidget:${e.actionWidget ? "1" : "0"}`
+  ].join("|");
+}
+function m(e) {
+  const n = /* @__PURE__ */ new Map();
+  return (r) => {
+    const o = u(r?.standaloneFeatures), t = d(o), i = n.get(t);
+    if (i) return i;
+    const c = e(o).then(() => {
+    }).catch((a) => {
+      throw n.delete(t), a;
+    });
+    return n.set(t, c), c;
+  };
 }
-function r() {
-  return Promise.all([
-    import("monaco-editor/esm/vs/editor/edcore.main.js"),
-    import("monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestMemory.js"),
-    import("monaco-editor/esm/vs/editor/contrib/codelens/browser/codeLensCache.js"),
-    import("monaco-editor/esm/vs/editor/common/services/treeViewsDndService.js"),
-    import("monaco-editor/esm/vs/platform/actionWidget/browser/actionWidget.js")
-  ]);
+function h(e) {
+  const n = [
+    import("monaco-editor/esm/vs/editor/edcore.main.js")
+  ];
+  return e.suggestMemory && n.push(import("monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestMemory.js")), e.codeLensCache && n.push(import("monaco-editor/esm/vs/editor/contrib/codelens/browser/codeLensCache.js")), e.inlayHintsCache && n.push(import("monaco-editor/esm/vs/editor/contrib/inlayHints/browser/inlayHintsContribution.js")), e.treeViewsDnd && n.push(import("monaco-editor/esm/vs/editor/common/services/treeViewsDndService.js")), e.actionWidget && n.push(import("monaco-editor/esm/vs/platform/actionWidget/browser/actionWidget.js")), Promise.all(n);
 }
-const i = e(r);
+const g = m(
+  h
+);
 export {
-  e as createMonacoStandaloneRuntime,
-  i as ensureMonacoStandaloneRuntime
+  s as DEFAULT_MONACO_STANDALONE_FEATURES,
+  m as createMonacoStandaloneRuntime,
+  g as ensureMonacoStandaloneRuntime,
+  u as normalizeMonacoRuntimeFeatureSet
 };

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

@@ -14,6 +14,7 @@ export interface InfiniteCanvasContextMenuEvent {
 }
 export interface InfiniteCanvasProps {
     children: JSX.Element;
+    overlay?: (viewport: InfiniteCanvasPoint) => JSX.Element;
     viewport: InfiniteCanvasPoint;
     onViewportChange?: (viewport: InfiniteCanvasPoint) => void;
     onCanvasContextMenu?: (event: InfiniteCanvasContextMenuEvent) => void;
@@ -22,6 +23,7 @@ export interface InfiniteCanvasProps {
     contentClass?: string;
     interactiveSelector?: string;
     panSurfaceSelector?: string;
+    wheelInteractiveSelector?: string;
     minScale?: number;
     maxScale?: number;
     wheelZoomSpeed?: number;

package/dist/components/ui/InfiniteCanvas.js

@@ -1,34 +1,34 @@
-import { insert as j, effect as q, className as I, setAttribute as G, setStyleProperty as J, template as K, use as Q, delegateEvents as ee } from "solid-js/web";
-import { createSignal as T, untrack as L, createEffect as _, onCleanup as b } from "solid-js";
+import { insert as x, effect as G, className as T, setAttribute as J, setStyleProperty as K, template as Q, use as ee, delegateEvents as te } from "solid-js/web";
+import { createSignal as _, untrack as L, createEffect as b, onCleanup as A } from "solid-js";
 import { cn as D } from "../../utils/cn.js";
-import { startHotInteraction as Y } from "../../utils/hotInteraction.js";
-import { resolveSurfaceInteractionTargetRole as te } from "./localInteractionSurface.js";
-var ne = /* @__PURE__ */ K('<div><div style="transform-origin:0 0">');
-const re = 1, oe = 0.45, ae = 2.2, ie = 14e-4, ce = '[data-floe-canvas-pan-surface="true"]', y = 3;
-function le(n, i, d) {
-  return Math.max(i, Math.min(d, n));
+import { startHotInteraction as y } from "../../utils/hotInteraction.js";
+import { resolveSurfaceInteractionTargetRole as ne, resolveSurfaceWheelRouting as re, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as oe } from "./localInteractionSurface.js";
+var ae = /* @__PURE__ */ Q('<div><div style="transform-origin:0 0">');
+const ie = 1, ce = 0.45, le = 2.2, se = 14e-4, ue = '[data-floe-canvas-pan-surface="true"]', Y = 3;
+function de(n, a, d) {
+  return Math.max(a, Math.min(d, n));
 }
-function A(n) {
+function M(n) {
   return {
     x: Number.isFinite(n.x) ? n.x : 0,
     y: Number.isFinite(n.y) ? n.y : 0,
-    scale: Number.isFinite(n.scale) && n.scale > 0 ? n.scale : re
+    scale: Number.isFinite(n.scale) && n.scale > 0 ? n.scale : ie
   };
 }
-function se(n, i) {
-  return n.deltaMode === 1 ? n.deltaY * 16 : n.deltaMode === 2 ? n.deltaY * (i?.clientHeight ?? window.innerHeight) : n.deltaY;
+function fe(n, a) {
+  return n.deltaMode === 1 ? n.deltaY * 16 : n.deltaMode === 2 ? n.deltaY * (a?.clientHeight ?? window.innerHeight) : n.deltaY;
 }
-function ve(n) {
-  const [i, d] = T(L(() => A(n.viewport))), [p, w] = T(null);
-  let a, f, m = !1, l;
-  const M = () => n.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => n.panSurfaceSelector ?? ce, R = () => n.minScale ?? oe, F = () => n.maxScale ?? ae, k = () => n.wheelZoomSpeed ?? ie, $ = () => {
-    const e = p();
+function Ce(n) {
+  const [a, d] = _(L(() => M(n.viewport))), [v, w] = _(null);
+  let i, f, m = !1, l;
+  const R = () => n.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => n.panSurfaceSelector ?? ue, F = () => n.wheelInteractiveSelector ?? oe, k = () => n.minScale ?? ce, V = () => n.maxScale ?? le, $ = () => n.wheelZoomSpeed ?? se, N = () => {
+    const e = v();
     return e ? e.startedFromPanSurface ? e.moved : !0 : !1;
-  }, C = () => {
+  }, p = () => {
     f !== void 0 && (window.clearTimeout(f), f = void 0);
-  }, g = () => {
+  }, C = () => {
     m = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
-  }, V = () => {
+  }, U = () => {
     if (typeof window > "u") {
       m = !1;
       return;
@@ -38,116 +38,117 @@ function ve(n) {
     }, 0);
   }, h = (e) => {
     L(() => n.onViewportChange?.(e));
-  }, N = (e) => {
+  }, H = (e) => {
     if (typeof window > "u") {
       h(e);
       return;
     }
-    C(), f = window.setTimeout(() => {
+    p(), f = window.setTimeout(() => {
       f = void 0, h(e);
     }, 90);
-  }, v = (e) => te({
+  }, g = (e) => ne({
     target: e,
-    interactiveSelector: M(),
+    interactiveSelector: R(),
     panSurfaceSelector: X()
-  }), P = (e) => {
-    const t = p();
+  }), E = (e) => {
+    const t = v();
     if (!t || e !== void 0 && t.pointerId !== e) return;
     t.stopInteraction?.();
-    const r = i();
-    w(null), a && a.hasPointerCapture(t.pointerId) && a.releasePointerCapture(t.pointerId), t.startedFromPanSurface && t.moved && (m = !0, V()), h(r);
+    const o = a();
+    w(null), i && i.hasPointerCapture(t.pointerId) && i.releasePointerCapture(t.pointerId), t.startedFromPanSurface && t.moved && (m = !0, U()), h(o);
   };
-  _(() => {
-    p() || d(A(n.viewport));
-  }), _(() => {
-    const e = a;
+  b(() => {
+    v() || d(M(n.viewport));
+  }), b(() => {
+    const e = i;
     if (!e) return;
-    const t = (r) => {
-      !m || v(r.target) !== "pan_surface" || (g(), r.preventDefault(), r.stopPropagation());
+    const t = (o) => {
+      !m || g(o.target) !== "pan_surface" || (C(), o.preventDefault(), o.stopPropagation());
     };
-    e.addEventListener("click", t, !0), e.addEventListener("wheel", x, {
+    e.addEventListener("click", t, !0), e.addEventListener("wheel", P, {
       passive: !1
-    }), b(() => {
-      e.removeEventListener("click", t, !0), e.removeEventListener("wheel", x);
+    }), A(() => {
+      e.removeEventListener("click", t, !0), e.removeEventListener("wheel", P);
     });
-  }), b(() => {
-    C(), P(), g();
+  }), A(() => {
+    p(), E(), C();
   });
-  const U = (e) => {
+  const Z = (e) => {
     if (e.button !== 0 || n.disablePanZoom) return;
-    const t = v(e.target), r = t === "pan_surface";
-    t !== "local_surface" && (C(), g(), r || (e.preventDefault(), a?.setPointerCapture(e.pointerId)), w({
+    const t = g(e.target), o = t === "pan_surface";
+    t !== "local_surface" && (p(), C(), o || (e.preventDefault(), i?.setPointerCapture(e.pointerId)), w({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
-      startViewport: i(),
+      startViewport: a(),
       moved: !1,
-      startedFromPanSurface: r,
-      stopInteraction: r ? void 0 : Y({
+      startedFromPanSurface: o,
+      stopInteraction: o ? void 0 : y({
         kind: "drag",
         cursor: "grabbing"
       })
     }));
-  }, H = (e) => {
-    const t = p();
+  }, W = (e) => {
+    const t = v();
     if (!t || t.pointerId !== e.pointerId) return;
-    const r = e.clientX - t.startClientX, o = e.clientY - t.startClientY;
-    if (!(t.moved || Math.abs(r) > y || Math.abs(o) > y)) return;
-    t.moved || (e.preventDefault(), a?.hasPointerCapture(e.pointerId) || a?.setPointerCapture(e.pointerId));
+    const o = e.clientX - t.startClientX, r = e.clientY - t.startClientY;
+    if (!(t.moved || Math.abs(o) > Y || Math.abs(r) > Y)) return;
+    t.moved || (e.preventDefault(), i?.hasPointerCapture(e.pointerId) || i?.setPointerCapture(e.pointerId));
     const s = {
       ...t.startViewport,
-      x: t.startViewport.x + r,
-      y: t.startViewport.y + o
+      x: t.startViewport.x + o,
+      y: t.startViewport.y + r
     };
     t.moved || w({
       ...t,
       moved: !0,
-      stopInteraction: t.stopInteraction ?? Y({
+      stopInteraction: t.stopInteraction ?? y({
         kind: "drag",
         cursor: "grabbing"
       })
     }), d(s);
-  }, Z = (e) => {
-    P(e.pointerId);
   }, O = (e) => {
-    P(e.pointerId);
-  }, x = (e) => {
-    if (v(e.target) !== "canvas")
-      return;
-    const r = a?.getBoundingClientRect();
-    if (!r || n.disablePanZoom)
-      return;
+    E(e.pointerId);
+  }, z = (e) => {
+    E(e.pointerId);
+  }, P = (e) => {
+    const t = i?.getBoundingClientRect();
+    if (!t || re({
+      target: e.target,
+      disablePanZoom: !!n.disablePanZoom,
+      wheelInteractiveSelector: F()
+    }).kind !== "canvas_zoom") return;
     e.preventDefault();
-    const o = i(), c = e.clientX - r.left, s = e.clientY - r.top, S = se(e, a), u = le(o.scale * Math.exp(-S * k()), R(), F());
-    if (Math.abs(u - o.scale) < 1e-4) return;
-    const B = (c - o.x) / o.scale, z = (s - o.y) / o.scale, E = {
-      x: c - B * u,
-      y: s - z * u,
+    const r = a(), c = e.clientX - t.left, s = e.clientY - t.top, S = fe(e, i), u = de(r.scale * Math.exp(-S * $()), k(), V());
+    if (Math.abs(u - r.scale) < 1e-4) return;
+    const j = (c - r.x) / r.scale, q = (s - r.y) / r.scale, I = {
+      x: c - j * u,
+      y: s - q * u,
       scale: u
     };
-    d(E), N(E);
-  }, W = (e) => {
-    if (v(e.target) !== "canvas") return;
-    const t = a?.getBoundingClientRect();
+    d(I), H(I);
+  }, B = (e) => {
+    if (g(e.target) !== "canvas") return;
+    const t = i?.getBoundingClientRect();
     if (!t) return;
     e.preventDefault();
-    const r = e.clientX - t.left, o = e.clientY - t.top, c = i();
+    const o = e.clientX - t.left, r = e.clientY - t.top, c = a();
     n.onCanvasContextMenu?.({
       clientX: e.clientX,
       clientY: e.clientY,
-      localX: r,
-      localY: o,
-      worldX: (r - c.x) / c.scale,
-      worldY: (o - c.y) / c.scale
+      localX: o,
+      localY: r,
+      worldX: (o - c.x) / c.scale,
+      worldY: (r - c.y) / c.scale
     });
   };
   return (() => {
-    var e = ne(), t = e.firstChild;
-    e.$$contextmenu = W, e.addEventListener("pointercancel", O), e.$$pointerup = Z, e.$$pointermove = H, e.$$pointerdown = U;
-    var r = a;
-    return typeof r == "function" ? Q(r, e) : a = e, j(t, () => n.children), q((o) => {
-      var c = D("floe-infinite-canvas", $() && "is-panning", n.disablePanZoom && "is-locked", n.class), s = n.ariaLabel ?? "Infinite canvas", S = D("floe-infinite-canvas__viewport", n.contentClass), u = `translate(${i().x}px, ${i().y}px) scale(${i().scale})`;
-      return c !== o.e && I(e, o.e = c), s !== o.t && G(e, "aria-label", o.t = s), S !== o.a && I(t, o.a = S), u !== o.o && J(t, "transform", o.o = u), o;
+    var e = ae(), t = e.firstChild;
+    e.$$contextmenu = B, e.addEventListener("pointercancel", z), e.$$pointerup = O, e.$$pointermove = W, e.$$pointerdown = Z;
+    var o = i;
+    return typeof o == "function" ? ee(o, e) : i = e, x(t, () => n.children), x(e, () => n.overlay?.(a()), null), G((r) => {
+      var c = D("floe-infinite-canvas", N() && "is-panning", n.disablePanZoom && "is-locked", n.class), s = n.ariaLabel ?? "Infinite canvas", S = D("floe-infinite-canvas__viewport", n.contentClass), u = `translate(${a().x}px, ${a().y}px) scale(${a().scale})`;
+      return c !== r.e && T(e, r.e = c), s !== r.t && J(e, "aria-label", r.t = s), S !== r.a && T(t, r.a = S), u !== r.o && K(t, "transform", r.o = u), r;
     }, {
       e: void 0,
       t: void 0,
@@ -156,7 +157,7 @@ function ve(n) {
     }), e;
   })();
 }
-ee(["pointerdown", "pointermove", "pointerup", "contextmenu"]);
+te(["pointerdown", "pointermove", "pointerup", "contextmenu"]);
 export {
-  ve as InfiniteCanvas
+  Ce as InfiniteCanvas
 };

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

@@ -7,7 +7,7 @@ export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectPro
 export { Tooltip, type TooltipProps } from './Tooltip';
 export { CommandPalette } from './CommandPalette';
 export { InfiniteCanvas, type InfiniteCanvasProps, type InfiniteCanvasPoint, type InfiniteCanvasContextMenuEvent, } from './InfiniteCanvas';
-export { LOCAL_INTERACTION_SURFACE_ATTR, DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR, WORKBENCH_WIDGET_SHELL_ATTR, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR, isLocalInteractionSurfaceTarget, resolveSurfaceInteractionTargetRole, resolveWorkbenchWidgetEventOwnership, type SurfaceInteractionRoutingOptions, type SurfaceInteractionTargetRole, 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, type SurfaceInteractionRoutingOptions, type SurfaceInteractionTargetRole, type SurfaceWheelLocalReason, type SurfaceWheelRoutingDecision, type SurfaceWheelRoutingOptions, type WorkbenchWidgetEventOwnership, type WorkbenchWidgetEventOwnershipOptions, } from './localInteractionSurface';
 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';
 export { DirectoryPicker, type DirectoryPickerProps } from './DirectoryPicker';

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

@@ -1,8 +1,20 @@
 export declare const LOCAL_INTERACTION_SURFACE_ATTR = "data-floe-local-interaction-surface";
 export declare const DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR = "[data-floe-local-interaction-surface=\"true\"]";
+export declare const CANVAS_WHEEL_INTERACTIVE_ATTR = "data-floe-canvas-wheel-interactive";
+export declare const DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR = "[data-floe-canvas-wheel-interactive=\"true\"]";
 export declare const WORKBENCH_WIDGET_SHELL_ATTR = "data-floe-workbench-widget-shell";
 export declare const DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR = "[data-floe-workbench-widget-shell=\"true\"]";
 export type SurfaceInteractionTargetRole = 'canvas' | 'local_surface' | 'pan_surface';
+export type SurfaceWheelLocalReason = 'typing_element' | 'local_interaction_surface' | 'wheel_interactive';
+export type SurfaceWheelRoutingDecision = {
+    kind: 'canvas_zoom';
+} | {
+    kind: 'local_surface';
+    reason: SurfaceWheelLocalReason;
+} | {
+    kind: 'ignore';
+    reason: 'pan_zoom_disabled';
+};
 export type WorkbenchWidgetEventOwnership = 'outside_widget' | 'widget_local' | 'widget_shell';
 export interface SurfaceInteractionRoutingOptions {
     target: EventTarget | null;
@@ -14,6 +26,13 @@ export interface WorkbenchWidgetEventOwnershipOptions extends SurfaceInteraction
     widgetRoot: Element | EventTarget | null;
     shellSelector?: string;
 }
+export interface SurfaceWheelRoutingOptions {
+    target: EventTarget | null;
+    disablePanZoom: boolean;
+    localInteractionSurfaceSelector?: string;
+    wheelInteractiveSelector?: string;
+}
 export declare function resolveSurfaceInteractionTargetRole(options: SurfaceInteractionRoutingOptions): SurfaceInteractionTargetRole;
+export declare function resolveSurfaceWheelRouting(options: SurfaceWheelRoutingOptions): SurfaceWheelRoutingDecision;
 export declare function isLocalInteractionSurfaceTarget(options: SurfaceInteractionRoutingOptions): boolean;
 export declare function resolveWorkbenchWidgetEventOwnership(options: WorkbenchWidgetEventOwnershipOptions): WorkbenchWidgetEventOwnership;

package/dist/components/ui/localInteractionSurface.js

@@ -1,33 +1,48 @@
-import { isTypingElement as i } from "../../utils/dom.js";
-const s = "data-floe-local-interaction-surface", u = `[${s}="true"]`, f = "data-floe-workbench-widget-shell", E = `[${f}="true"]`;
-function o(e) {
+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) {
   return typeof Element < "u" && e instanceof Element ? e : typeof Node < "u" && e instanceof Node ? e.parentElement : null;
 }
-function a(e) {
+function s(e) {
   const {
-    target: l,
-    interactiveSelector: c,
-    panSurfaceSelector: n,
-    localInteractionSurfaceSelector: t = u
-  } = e, r = l instanceof Element ? l : null;
-  return r ? r.closest(n) !== null ? "pan_surface" : i(r) || r.closest(c) !== null || r.closest(t) !== null ? "local_surface" : "canvas" : "canvas";
+    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";
 }
 function d(e) {
-  return a(e) !== "canvas";
+  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;
+}
+function R(e) {
+  const t = d(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 T(e) {
+function L(e) {
   const {
-    widgetRoot: l,
-    shellSelector: c = E
-  } = e, n = o(l), t = o(e.target);
-  return !n || !t || !n.contains(t) ? "outside_widget" : a(e) !== "canvas" ? "widget_local" : t === n || t.closest(c) !== null ? "widget_shell" : "widget_local";
+    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";
 }
 export {
-  u as DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR,
-  E as DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR,
-  s as LOCAL_INTERACTION_SURFACE_ATTR,
-  f as WORKBENCH_WIDGET_SHELL_ATTR,
-  d as isLocalInteractionSurfaceTarget,
-  a as resolveSurfaceInteractionTargetRole,
-  T as resolveWorkbenchWidgetEventOwnership
+  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,
+  _ as WORKBENCH_WIDGET_SHELL_ATTR,
+  A as isLocalInteractionSurfaceTarget,
+  s as resolveSurfaceInteractionTargetRole,
+  R as resolveSurfaceWheelRouting,
+  L as resolveWorkbenchWidgetEventOwnership
 };

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

@@ -4,6 +4,10 @@ export interface WorkbenchCanvasProps {
     widgetDefinitions: readonly WorkbenchWidgetDefinition[];
     widgets: readonly WorkbenchWidgetItem[];
     viewport: WorkbenchViewport;
+    canvasFrameSize: {
+        width: number;
+        height: number;
+    };
     selectedWidgetId: string | null;
     optimisticFrontWidgetId: string | null;
     locked: boolean;