@floegence/floe-webapp-core 0.36.15 → 0.36.17

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

@@ -19,6 +19,7 @@ export interface InfiniteCanvasProps {
     onViewportChange?: (viewport: InfiniteCanvasPoint) => void;
     onViewportInteractionStart?: (kind: 'wheel' | 'pan') => void;
     onCanvasContextMenu?: (event: InfiniteCanvasContextMenuEvent) => void;
+    onCanvasPointerDown?: (event: PointerEvent) => void;
     ariaLabel?: string;
     class?: string;
     contentClass?: string;

package/dist/components/ui/InfiniteCanvas.js

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

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

@@ -7,6 +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 { 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 { 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';

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

@@ -0,0 +1,35 @@
+export type PointerSessionEndReason = 'pointer_up' | 'pointer_cancel' | 'buttons_released' | 'lost_pointer_capture' | 'window_blur' | 'document_hidden' | 'manual_stop';
+export interface PointerSessionSnapshot {
+    pointerId: number;
+    latestClientX: number;
+    latestClientY: number;
+    latestButtons: number;
+    active: boolean;
+    captureActive: boolean;
+}
+export interface PointerSessionEndEvent {
+    reason: PointerSessionEndReason;
+    commit: boolean;
+    snapshot: PointerSessionSnapshot;
+    event?: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY' | 'buttons'>;
+}
+export interface StartPointerSessionOptions {
+    pointerEvent: PointerEvent;
+    captureEl?: HTMLElement | null;
+    ownerDocument?: Document;
+    buttonMask?: number;
+    capturePointer?: boolean;
+    onMove?: (event: PointerEvent, snapshot: PointerSessionSnapshot) => void;
+    onEnd: (event: PointerSessionEndEvent) => void;
+}
+export interface PointerSessionController {
+    snapshot: () => PointerSessionSnapshot;
+    updatePointer: (event: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY' | 'buttons'>) => void;
+    capturePointer: () => void;
+    stop: (options?: {
+        reason?: PointerSessionEndReason;
+        commit?: boolean;
+        event?: Pick<PointerEvent, 'pointerId' | 'clientX' | 'clientY' | 'buttons'>;
+    }) => void;
+}
+export declare function startPointerSession(options: StartPointerSessionOptions): PointerSessionController;

package/dist/components/ui/pointerSession.js

@@ -0,0 +1,85 @@
+function C(e) {
+  if (e.ownerDocument) return e.ownerDocument;
+  if (e.captureEl?.ownerDocument) return e.captureEl.ownerDocument;
+  const n = e.pointerEvent.target;
+  return n && typeof n == "object" && "ownerDocument" in n && n.ownerDocument instanceof Document ? n.ownerDocument : document;
+}
+function c(e, n) {
+  return typeof e.buttons == "number" ? e.buttons : n;
+}
+function L(e, n) {
+  return !e || e.pointerId === n;
+}
+function b(e) {
+  const n = C(e), l = n.defaultView ?? window, a = e.buttonMask ?? 1, h = c(e.pointerEvent, a), t = {
+    pointerId: e.pointerEvent.pointerId,
+    latestClientX: e.pointerEvent.clientX,
+    latestClientY: e.pointerEvent.clientY,
+    latestButtons: h,
+    active: !0,
+    captureActive: !1
+  }, o = (r) => {
+    !t.active || r.pointerId !== t.pointerId || (t.latestClientX = r.clientX, t.latestClientY = r.clientY, t.latestButtons = c(r, t.latestButtons));
+  }, s = () => {
+    if (t.active && !(!e.captureEl || typeof e.captureEl.setPointerCapture != "function"))
+      try {
+        e.captureEl.setPointerCapture(t.pointerId), t.captureActive = !0;
+      } catch {
+      }
+  }, w = () => {
+    if (!e.captureEl || typeof e.captureEl.releasePointerCapture != "function") {
+      t.captureActive = !1;
+      return;
+    }
+    try {
+      (typeof e.captureEl.hasPointerCapture != "function" || e.captureEl.hasPointerCapture(t.pointerId)) && e.captureEl.releasePointerCapture(t.pointerId);
+    } catch {
+    } finally {
+      t.captureActive = !1;
+    }
+  }, P = () => {
+    n.removeEventListener("pointermove", p, !0), n.removeEventListener("pointerup", d, !0), n.removeEventListener("pointercancel", f, !0), n.removeEventListener("visibilitychange", E), l.removeEventListener("blur", v), e.captureEl?.removeEventListener("lostpointercapture", m);
+  }, i = (r = {}) => {
+    if (!t.active) return;
+    const u = r.event;
+    L(u, t.pointerId) && (u && o(u), t.active = !1, P(), w(), e.onEnd({
+      reason: r.reason ?? "manual_stop",
+      commit: r.commit ?? !1,
+      snapshot: t,
+      ...u ? { event: u } : {}
+    }));
+  };
+  function p(r) {
+    if (!(!t.active || r.pointerId !== t.pointerId)) {
+      if (o(r), a > 0 && (c(r, t.latestButtons) & a) !== a) {
+        i({ reason: "buttons_released", commit: !0, event: r });
+        return;
+      }
+      e.onMove?.(r, t);
+    }
+  }
+  function d(r) {
+    i({ reason: "pointer_up", commit: !0, event: r });
+  }
+  function f(r) {
+    i({ reason: "pointer_cancel", commit: !1, event: r });
+  }
+  function m() {
+    i({ reason: "lost_pointer_capture", commit: !0 });
+  }
+  function v() {
+    i({ reason: "window_blur", commit: !0 });
+  }
+  function E() {
+    n.hidden && i({ reason: "document_hidden", commit: !0 });
+  }
+  return n.addEventListener("pointermove", p, !0), n.addEventListener("pointerup", d, !0), n.addEventListener("pointercancel", f, !0), n.addEventListener("visibilitychange", E), l.addEventListener("blur", v), e.captureEl?.addEventListener("lostpointercapture", m), e.capturePointer !== !1 && s(), {
+    snapshot: () => t,
+    updatePointer: o,
+    capturePointer: s,
+    stop: i
+  };
+}
+export {
+  b as startPointerSession
+};

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

@@ -16,6 +16,7 @@ export interface WorkbenchCanvasProps {
     onViewportCommit: (viewport: WorkbenchViewport) => void;
     onViewportInteractionStart?: (kind: 'wheel' | 'pan') => void;
     onCanvasContextMenu: (event: InfiniteCanvasContextMenuEvent) => void;
+    onCanvasPointerDown?: (event: PointerEvent) => void;
     onSelectWidget: (widgetId: string) => void;
     onWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
     onStartOptimisticFront: (widgetId: string) => void;
@@ -28,6 +29,8 @@ export interface WorkbenchCanvasProps {
         width: number;
         height: number;
     }) => void;
+    onRequestOverview: (item: WorkbenchWidgetItem) => void;
+    onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;
 }
 export declare function WorkbenchCanvas(props: WorkbenchCanvasProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,19 +1,19 @@
-import { use as v, insert as m, createComponent as i, effect as W, template as w } from "solid-js/web";
-import { createMemo as o, Show as h, For as F } from "solid-js";
-import { WorkbenchCanvasField as y } from "./WorkbenchCanvasField.js";
-import { WorkbenchWidget as I } from "./WorkbenchWidget.js";
-import { createWorkbenchRenderLayerMap as R, resolveWorkbenchWidgetRenderMode as l } from "./workbenchHelpers.js";
-import { getWidgetEntry as c } from "./widgets/widgetRegistry.js";
+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 M = /* @__PURE__ */ w("<div class=workbench-canvas>"), k = /* @__PURE__ */ w("<div class=workbench-canvas__projected-layer>");
-function b(e) {
+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>");
+function q(e) {
   const n = o((g) => {
     const d = e.widgetById().get(e.widgetId);
     if (d) return d;
     if (g) return g;
     throw new Error(`Workbench widget ${e.widgetId} is missing from the projected render map.`);
-  }), a = o(() => c(n().type, e.widgetDefinitions));
-  return i(I, {
+  }), a = o(() => u(n().type, e.widgetDefinitions));
+  return i(y, {
     get definition() {
       return a();
     },
@@ -85,22 +85,30 @@ function b(e) {
     get onCommitResize() {
       return e.onCommitResize;
     },
+    get onRequestOverview() {
+      return e.onRequestOverview;
+    },
+    get onRequestFit() {
+      return e.onRequestFit;
+    },
     get onRequestDelete() {
       return e.onRequestDelete;
     }
   });
 }
-function q(e) {
-  const n = o(() => new Map(e.widgets.map((t) => [t.id, t]))), a = o(() => R(e.widgets)), g = o(() => e.widgets.filter((t) => {
-    const r = c(t.type, e.widgetDefinitions);
+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 = c(t.type, e.widgetDefinitions);
+    const r = u(t.type, e.widgetDefinitions);
     return l(r) === "projected_surface";
-  }).map((t) => t.id)), f = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0;
+  }).map((t) => t.id)), s = () => e.canvasFrameSize.width > 0 && e.canvasFrameSize.height > 0;
   return (() => {
-    var t = M(), r = e.setCanvasFrameRef;
-    return typeof r == "function" ? v(r, t) : e.setCanvasFrameRef = t, m(t, i(S, {
+    var t = k();
+    t.firstChild;
+    var r = e.setCanvasFrameRef;
+    return typeof r == "function" ? C(r, t) : e.setCanvasFrameRef = t, m(t, i(S, {
       ariaLabel: "Workbench canvas",
       class: "workbench-canvas__infinite",
       get viewport() {
@@ -115,21 +123,24 @@ function q(e) {
       get onCanvasContextMenu() {
         return e.onCanvasContextMenu;
       },
+      get onCanvasPointerDown() {
+        return e.onCanvasPointerDown;
+      },
       get disablePanZoom() {
         return e.locked;
       },
-      overlay: (s) => i(h, {
+      overlay: (v) => i(h, {
         get when() {
           return d().length > 0;
         },
         get children() {
-          var u = k();
-          return m(u, i(F, {
+          var c = M();
+          return m(c, i(W, {
             get each() {
               return d();
             },
-            children: (C) => i(b, {
-              widgetId: C,
+            children: (f) => i(q, {
+              widgetId: f,
               get widgetDefinitions() {
                 return e.widgetDefinitions;
               },
@@ -177,19 +188,25 @@ function q(e) {
               get onCommitResize() {
                 return e.onCommitResize;
               },
+              get onRequestOverview() {
+                return e.onRequestOverview;
+              },
+              get onRequestFit() {
+                return e.onRequestFit;
+              },
               get onRequestDelete() {
                 return e.onRequestDelete;
               },
-              projectedViewport: s,
+              projectedViewport: v,
               get surfaceReady() {
-                return f();
+                return s();
               }
             })
-          })), u;
+          })), c;
         }
       }),
       get children() {
-        return i(y, {
+        return i(F, {
           get widgetDefinitions() {
             return e.widgetDefinitions;
           },
@@ -229,14 +246,20 @@ function q(e) {
           get onCommitResize() {
             return e.onCommitResize;
           },
+          get onRequestOverview() {
+            return e.onRequestOverview;
+          },
+          get onRequestFit() {
+            return e.onRequestFit;
+          },
           get onRequestDelete() {
             return e.onRequestDelete;
           }
         });
       }
-    })), W(() => t.classList.toggle("is-locked", !!e.locked)), t;
+    }), null), R(() => t.classList.toggle("is-locked", !!e.locked)), t;
   })();
 }
 export {
-  q as WorkbenchCanvas
+  V as WorkbenchCanvas
 };

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

@@ -19,6 +19,8 @@ export interface WorkbenchCanvasFieldProps {
         width: number;
         height: number;
     }) => void;
+    onRequestOverview: (item: WorkbenchWidgetItem) => void;
+    onRequestFit: (item: WorkbenchWidgetItem) => void;
     onRequestDelete: (widgetId: string) => void;
 }
 export declare function WorkbenchCanvasField(props: WorkbenchCanvasFieldProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchCanvasField.js

@@ -3,8 +3,8 @@ import { createMemo as i, For as c } from "solid-js";
 import { createWorkbenchRenderLayerMap as a } from "./workbenchHelpers.js";
 import { getWidgetEntry as l } from "./widgets/widgetRegistry.js";
 import { WorkbenchWidget as w } from "./WorkbenchWidget.js";
-var f = /* @__PURE__ */ m("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>");
-function W(e) {
+var v = /* @__PURE__ */ m("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>");
+function f(e) {
   const t = i((r) => {
     const n = e.widgetById().get(e.widgetId);
     if (n) return n;
@@ -76,20 +76,26 @@ function W(e) {
     get onCommitResize() {
       return e.onCommitResize;
     },
+    get onRequestOverview() {
+      return e.onRequestOverview;
+    },
+    get onRequestFit() {
+      return e.onRequestFit;
+    },
     get onRequestDelete() {
       return e.onRequestDelete;
     }
   });
 }
-function v(e) {
+function F(e) {
   const t = i(() => e.widgets.map((n) => n.id)), d = i(() => new Map(e.widgets.map((n) => [n.id, n]))), r = i(() => a(e.widgets));
   return (() => {
-    var n = f();
+    var n = v();
     return n.firstChild, u(n, g(c, {
       get each() {
         return t();
       },
-      children: (o) => g(W, {
+      children: (o) => g(f, {
         widgetId: o,
         get widgetDefinitions() {
           return e.widgetDefinitions;
@@ -132,6 +138,12 @@ function v(e) {
         get onCommitResize() {
           return e.onCommitResize;
         },
+        get onRequestOverview() {
+          return e.onRequestOverview;
+        },
+        get onRequestFit() {
+          return e.onRequestFit;
+        },
         get onRequestDelete() {
           return e.onRequestDelete;
         }
@@ -140,5 +152,5 @@ function v(e) {
   })();
 }
 export {
-  v as WorkbenchCanvasField
+  F as WorkbenchCanvasField
 };