@floegence/floe-webapp-core 0.36.7 → 0.36.9

package/dist/components/workbench/WorkbenchWidget.js

@@ -1,45 +1,76 @@
-import { spread as G, insert as u, createComponent as I, memo as K, effect as V, setAttribute as q, setStyleProperty as m, template as P, use as U, delegateEvents as j } from "solid-js/web";
-import { createSignal as H, onCleanup as J, untrack as _, createMemo as A } from "solid-js";
-import { startHotInteraction as O } from "../../utils/hotInteraction.js";
-import { GripVertical as Q, X as Z } from "../icons/index.js";
-import { WORKBENCH_WIDGET_SHELL_ATTR as p, resolveWorkbenchWidgetEventOwnership as tt } from "../ui/localInteractionSurface.js";
-var et = /* @__PURE__ */ P('<article class=workbench-widget data-floe-dialog-surface-host=true tabindex=0><header class=workbench-widget__header><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></span></div><button type=button class=workbench-widget__close aria-label="Remove widget"data-floe-canvas-interactive=true></button></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), it = /* @__PURE__ */ P('<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 nt = 220, ot = 160, at = '[data-floe-canvas-interactive="true"]', rt = '[data-floe-canvas-pan-surface="true"]';
-function ht(i) {
-  const [f, C] = H(null), [v, x] = H(null);
+import { spread as G, insert as u, createComponent as _, memo as V, effect as K, setAttribute as T, style as q, template as O, use as U, delegateEvents as J } from "solid-js/web";
+import { createSignal as H, onCleanup as Q, untrack as x, createMemo as y } from "solid-js";
+import { startHotInteraction as A } from "../../utils/hotInteraction.js";
+import { GripVertical as Z, X as p } from "../icons/index.js";
+import { WORKBENCH_WIDGET_SHELL_ATTR as tt, resolveWorkbenchWidgetEventOwnership as et } from "../ui/localInteractionSurface.js";
+import { createWorkbenchWidgetSurfaceMetrics as it } from "./workbenchHelpers.js";
+var nt = /* @__PURE__ */ O('<article class=workbench-widget data-floe-dialog-surface-host=true tabindex=0><header class=workbench-widget__header><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></span></div><button type=button class=workbench-widget__close aria-label="Remove widget"data-floe-canvas-interactive=true></button></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), ot = /* @__PURE__ */ O('<div class=workbench-widget__resize aria-label="Resize widget"data-floe-canvas-interactive=true><svg class=workbench-widget__resize-glyph viewBox="0 0 12 12"aria-hidden=true><path d="M12 0 L0 12"></path><path d="M12 4 L4 12"></path><path d="M12 8 L8 12">');
+const at = 220, rt = 160, dt = '[data-floe-canvas-interactive="true"]', lt = '[data-floe-canvas-pan-surface="true"]';
+function ft(t) {
+  const [f, C] = H(null), [v, M] = H(null);
   let h, w, b;
-  J(() => {
-    h?.abort(), h = void 0, w?.abort(), w = void 0, _(f)?.stopInteraction(), _(v)?.stopInteraction();
+  Q(() => {
+    h?.abort(), h = void 0, w?.abort(), w = void 0, x(f)?.stopInteraction(), x(v)?.stopInteraction();
   });
-  const S = () => f() !== null, y = () => v() !== null, E = (e) => tt({
-    target: e,
+  const S = () => f() !== null, W = () => v() !== null, $ = (i) => et({
+    target: i,
     widgetRoot: b ?? null,
-    interactiveSelector: at,
-    panSurfaceSelector: rt
-  }), N = (e) => {
-    e.button === 0 && (i.onSelect(i.widgetId), i.onCommitFront(i.widgetId), E(e.target) === "widget_shell" && b?.focus({
+    interactiveSelector: dt,
+    panSurfaceSelector: lt
+  }), P = (i) => {
+    i.button === 0 && (t.onSelect(t.widgetId), t.onCommitFront(t.widgetId), $(i.target) === "widget_shell" && b?.focus({
       preventScroll: !0
     }));
-  }, W = A(() => {
-    const e = f();
-    return e ? {
-      x: e.worldX,
-      y: e.worldY
+  }, m = y(() => {
+    const i = f();
+    return i ? {
+      x: i.worldX,
+      y: i.worldY
     } : {
-      x: i.x,
-      y: i.y
+      x: t.x,
+      y: t.y
     };
-  }), M = A(() => {
-    const e = v();
-    return e ? {
-      width: e.width,
-      height: e.height
-    } : {
+  }), I = y(() => {
+    const i = v();
+    return i ? {
       width: i.width,
       height: i.height
+    } : {
+      width: t.width,
+      height: t.height
+    };
+  }), k = y(() => {
+    if (!(t.layoutMode !== "projected_surface" || !t.projectedViewport))
+      return it({
+        widgetId: t.widgetId,
+        worldX: m().x,
+        worldY: m().y,
+        worldWidth: I().width,
+        worldHeight: I().height,
+        viewport: t.projectedViewport,
+        ready: t.surfaceReady ?? !0
+      });
+  }), j = y(() => {
+    const i = {
+      width: `${I().width}px`,
+      height: `${I().height}px`,
+      "z-index": S() || W() || t.optimisticFront ? `${t.topRenderLayer + 1}` : `${t.renderLayer}`
     };
-  }), $ = (e) => {
-    const n = _(f);
+    if (t.layoutMode === "projected_surface") {
+      const n = k()?.rect;
+      return {
+        ...i,
+        left: `${n?.screenX ?? 0}px`,
+        top: `${n?.screenY ?? 0}px`,
+        "--floe-workbench-projected-scale": `${n?.viewportScale ?? Math.max(t.viewportScale, 1e-3)}`
+      };
+    }
+    return {
+      ...i,
+      transform: `translate(${m().x}px, ${m().y}px)`
+    };
+  }), E = (i) => {
+    const n = x(f);
     if (!n) return;
     const a = {
       x: n.worldX,
@@ -47,146 +78,149 @@ function ht(i) {
     }, r = {
       x: n.startWorldX,
       y: n.startWorldY
-    }, s = e && (Math.abs(a.x - r.x) > 1 || Math.abs(a.y - r.y) > 1);
-    i.onCommitFront(i.widgetId), s && i.onCommitMove(i.widgetId, a), n.stopInteraction(), C(null), h?.abort(), h = void 0;
-  }, F = (e) => {
-    if (e.button !== 0 || i.locked) return;
-    e.preventDefault(), e.stopPropagation(), h?.abort(), i.onStartOptimisticFront(i.widgetId);
-    const n = O({
+    }, s = i && (Math.abs(a.x - r.x) > 1 || Math.abs(a.y - r.y) > 1);
+    t.onCommitFront(t.widgetId), s && t.onCommitMove(t.widgetId, a), n.stopInteraction(), C(null), h?.abort(), h = void 0;
+  }, N = (i) => {
+    if (i.button !== 0 || t.locked) return;
+    i.preventDefault(), i.stopPropagation(), h?.abort(), t.onStartOptimisticFront(t.widgetId);
+    const n = A({
       kind: "drag",
       cursor: "grabbing"
-    }), a = Math.max(i.viewportScale, 1e-3);
+    }), a = Math.max(t.viewportScale, 1e-3);
     C({
-      pointerId: e.pointerId,
-      startClientX: e.clientX,
-      startClientY: e.clientY,
-      startWorldX: i.x,
-      startWorldY: i.y,
-      worldX: i.x,
-      worldY: i.y,
+      pointerId: i.pointerId,
+      startClientX: i.clientX,
+      startClientY: i.clientY,
+      startWorldX: t.x,
+      startWorldY: t.y,
+      worldX: t.x,
+      worldY: t.y,
       moved: !1,
       scale: a,
       stopInteraction: n
     });
     const r = (o) => {
-      C((t) => {
-        if (!t || t.pointerId !== o.pointerId) return t;
-        const d = t.startWorldX + (o.clientX - t.startClientX) / t.scale, g = t.startWorldY + (o.clientY - t.startClientY) / t.scale;
+      C((e) => {
+        if (!e || e.pointerId !== o.pointerId) return e;
+        const l = e.startWorldX + (o.clientX - e.startClientX) / e.scale, g = e.startWorldY + (o.clientY - e.startClientY) / e.scale;
         return {
-          ...t,
-          worldX: d,
+          ...e,
+          worldX: l,
           worldY: g,
-          moved: t.moved || Math.abs(d - t.startWorldX) > 2 || Math.abs(g - t.startWorldY) > 2
+          moved: e.moved || Math.abs(l - e.startWorldX) > 2 || Math.abs(g - e.startWorldY) > 2
         };
       });
     }, s = (o) => {
-      o.pointerId === e.pointerId && $(!0);
+      o.pointerId === i.pointerId && E(!0);
     }, c = (o) => {
-      o.pointerId === e.pointerId && $(!1);
-    }, l = new AbortController();
-    h = l, window.addEventListener("pointermove", r, {
-      signal: l.signal
+      o.pointerId === i.pointerId && E(!1);
+    }, d = new AbortController();
+    h = d, window.addEventListener("pointermove", r, {
+      signal: d.signal
     }), window.addEventListener("pointerup", s, {
       once: !0,
-      signal: l.signal
+      signal: d.signal
     }), window.addEventListener("pointercancel", c, {
       once: !0,
-      signal: l.signal
+      signal: d.signal
     });
-  }, k = (e) => {
-    const n = _(v);
+  }, L = (i) => {
+    const n = x(v);
     if (!n) return;
     const a = {
       width: n.width,
       height: n.height
     }, r = Math.abs(n.width - n.startWidth) > 1 || Math.abs(n.height - n.startHeight) > 1;
-    e && r && i.onCommitResize(i.widgetId, a), n.stopInteraction(), x(null), w?.abort(), w = void 0;
-  }, B = (e) => {
-    if (e.button !== 0 || i.locked) return;
-    e.preventDefault(), e.stopPropagation(), w?.abort(), i.onStartOptimisticFront(i.widgetId);
-    const n = O({
+    i && r && t.onCommitResize(t.widgetId, a), n.stopInteraction(), M(null), w?.abort(), w = void 0;
+  }, F = (i) => {
+    if (i.button !== 0 || t.locked) return;
+    i.preventDefault(), i.stopPropagation(), w?.abort(), t.onStartOptimisticFront(t.widgetId);
+    const n = A({
       kind: "drag",
       cursor: "nwse-resize"
-    }), a = Math.max(i.viewportScale, 1e-3);
-    x({
-      pointerId: e.pointerId,
-      startClientX: e.clientX,
-      startClientY: e.clientY,
-      startWidth: i.width,
-      startHeight: i.height,
-      width: i.width,
-      height: i.height,
+    }), a = Math.max(t.viewportScale, 1e-3);
+    M({
+      pointerId: i.pointerId,
+      startClientX: i.clientX,
+      startClientY: i.clientY,
+      startWidth: t.width,
+      startHeight: t.height,
+      width: t.width,
+      height: t.height,
       scale: a,
       stopInteraction: n
     });
     const r = (o) => {
-      x((t) => {
-        if (!t || t.pointerId !== o.pointerId) return t;
-        const d = Math.max(nt, t.startWidth + (o.clientX - t.startClientX) / t.scale), g = Math.max(ot, t.startHeight + (o.clientY - t.startClientY) / t.scale);
+      M((e) => {
+        if (!e || e.pointerId !== o.pointerId) return e;
+        const l = Math.max(at, e.startWidth + (o.clientX - e.startClientX) / e.scale), g = Math.max(rt, e.startHeight + (o.clientY - e.startClientY) / e.scale);
         return {
-          ...t,
-          width: d,
+          ...e,
+          width: l,
           height: g
         };
       });
     }, s = (o) => {
-      o.pointerId === e.pointerId && k(!0);
+      o.pointerId === i.pointerId && L(!0);
     }, c = (o) => {
-      o.pointerId === e.pointerId && k(!1);
-    }, l = new AbortController();
-    w = l, window.addEventListener("pointermove", r, {
-      signal: l.signal
+      o.pointerId === i.pointerId && L(!1);
+    }, d = new AbortController();
+    w = d, window.addEventListener("pointermove", r, {
+      signal: d.signal
     }), window.addEventListener("pointerup", s, {
       once: !0,
-      signal: l.signal
+      signal: d.signal
     }), window.addEventListener("pointercancel", c, {
       once: !0,
-      signal: l.signal
+      signal: d.signal
     });
   };
   return (() => {
-    var e = et(), n = e.firstChild, a = n.firstChild, r = a.nextSibling, s = r.firstChild, c = r.nextSibling, l = n.nextSibling;
-    e.$$contextmenu = (t) => {
-      E(t.target) === "widget_shell" && (t.preventDefault(), t.stopPropagation(), i.onContextMenu(t, i.itemSnapshot()));
-    }, e.addEventListener("focus", () => {
-      i.onSelect(i.widgetId);
-    }), e.$$pointerdown = N;
+    var i = nt(), n = i.firstChild, a = n.firstChild, r = a.nextSibling, s = r.firstChild, c = r.nextSibling, d = n.nextSibling;
+    i.$$contextmenu = (e) => {
+      $(e.target) === "widget_shell" && (e.preventDefault(), e.stopPropagation(), t.onContextMenu(e, t.itemSnapshot()));
+    }, i.addEventListener("focus", () => {
+      t.onSelect(t.widgetId);
+    }), i.$$pointerdown = P;
     var o = b;
-    return typeof o == "function" ? U(o, e) : b = e, G(n, {
-      [p]: "true"
-    }, !1, !0), a.$$pointerdown = F, u(a, I(Q, {
+    return typeof o == "function" ? U(o, i) : b = i, G(n, {
+      [tt]: "true"
+    }, !1, !0), a.$$pointerdown = N, u(a, _(Z, {
       class: "w-3.5 h-3.5"
     })), u(r, () => {
-      const t = i.definition.icon;
-      return I(t, {
+      const e = t.definition.icon;
+      return _(e, {
         class: "w-3.5 h-3.5"
       });
-    }, s), u(s, () => i.widgetTitle), c.$$click = (t) => {
-      t.stopPropagation(), t.preventDefault(), i.onRequestDelete(i.widgetId);
-    }, c.$$pointerdown = (t) => t.stopPropagation(), u(c, I(Z, {
+    }, s), u(s, () => t.widgetTitle), c.$$click = (e) => {
+      e.stopPropagation(), e.preventDefault(), t.onRequestDelete(t.widgetId);
+    }, c.$$pointerdown = (e) => e.stopPropagation(), u(c, _(p, {
       class: "w-3 h-3"
-    })), u(l, () => {
-      const t = i.definition.body;
-      return I(t, {
+    })), u(d, () => {
+      const e = t.definition.body;
+      return _(e, {
         get widgetId() {
-          return i.widgetId;
+          return t.widgetId;
         },
         get title() {
-          return i.widgetTitle;
+          return t.widgetTitle;
         },
         get type() {
-          return i.widgetType;
+          return t.widgetType;
+        },
+        get surfaceMetrics() {
+          return k();
         }
       });
-    }), u(e, (() => {
-      var t = K(() => !!i.locked);
-      return () => t() ? null : (() => {
-        var d = it();
-        return d.$$pointerdown = B, d;
+    }), u(i, (() => {
+      var e = V(() => !!t.locked);
+      return () => e() ? null : (() => {
+        var l = ot();
+        return l.$$pointerdown = F, l;
       })();
-    })(), null), V((t) => {
-      var d = !!i.selected, g = !!S(), L = !!y(), R = !!i.filtered, X = i.widgetId, Y = `translate(${W().x}px, ${W().y}px)`, z = `${M().width}px`, D = `${M().height}px`, T = S() || y() || i.optimisticFront ? `${i.topRenderLayer + 1}` : `${i.renderLayer}`;
-      return d !== t.e && e.classList.toggle("is-selected", t.e = d), g !== t.t && e.classList.toggle("is-dragging", t.t = g), L !== t.a && e.classList.toggle("is-resizing", t.a = L), R !== t.o && e.classList.toggle("is-filtered-out", t.o = R), X !== t.i && q(e, "data-floe-workbench-widget-id", t.i = X), Y !== t.n && m(e, "transform", t.n = Y), z !== t.s && m(e, "width", t.s = z), D !== t.h && m(e, "height", t.h = D), T !== t.r && m(e, "z-index", t.r = T), t;
+    })(), null), K((e) => {
+      var l = !!t.selected, g = !!S(), R = !!W(), X = !!t.filtered, Y = t.layoutMode === "projected_surface", z = t.widgetId, D = t.layoutMode ?? "canvas_scaled", B = j();
+      return l !== e.e && i.classList.toggle("is-selected", e.e = l), g !== e.t && i.classList.toggle("is-dragging", e.t = g), R !== e.a && i.classList.toggle("is-resizing", e.a = R), X !== e.o && i.classList.toggle("is-filtered-out", e.o = X), Y !== e.i && i.classList.toggle("is-projected-surface", e.i = Y), z !== e.n && T(i, "data-floe-workbench-widget-id", e.n = z), D !== e.s && T(i, "data-floe-workbench-render-mode", e.s = D), e.h = q(i, B, e.h), e;
     }, {
       e: void 0,
       t: void 0,
@@ -195,12 +229,11 @@ function ht(i) {
       i: void 0,
       n: void 0,
       s: void 0,
-      h: void 0,
-      r: void 0
-    }), e;
+      h: void 0
+    }), i;
   })();
 }
-j(["pointerdown", "contextmenu", "click"]);
+J(["pointerdown", "contextmenu", "click"]);
 export {
-  ht as WorkbenchWidget
+  ft as WorkbenchWidget
 };

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

@@ -4,4 +4,4 @@ export { WorkbenchContextMenu, type WorkbenchContextMenuItem, type WorkbenchCont
 export { useWorkbenchModel, type UseWorkbenchModelOptions } from './useWorkbenchModel';
 export { WIDGET_REGISTRY, createWorkbenchFilterState, getWidgetEntry, isValidWorkbenchWidgetType, resolveWorkbenchWidgetDefinitions, type WidgetRegistryEntry, } from './widgets/widgetRegistry';
 export * from './types';
-export { sanitizeWorkbenchState, createDefaultWorkbenchState, createWorkbenchId, createWorkbenchRenderLayerMap, type WorkbenchRenderLayerMap, } from './workbenchHelpers';
+export { sanitizeWorkbenchState, createDefaultWorkbenchState, createWorkbenchId, createWorkbenchProjectedRect, createWorkbenchRenderLayerMap, createWorkbenchWidgetSurfaceMetrics, resolveWorkbenchWidgetRenderMode, type WorkbenchRenderLayerMap, } from './workbenchHelpers';

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

@@ -2,10 +2,28 @@ import type { Component } from 'solid-js';
 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 interface WorkbenchProjectedRect {
+    widgetId: string;
+    worldX: number;
+    worldY: number;
+    worldWidth: number;
+    worldHeight: number;
+    screenX: number;
+    screenY: number;
+    screenWidth: number;
+    screenHeight: number;
+    viewportScale: number;
+}
+export interface WorkbenchWidgetSurfaceMetrics {
+    ready: boolean;
+    rect: WorkbenchProjectedRect;
+}
 export interface WorkbenchWidgetBodyProps<TWidgetType extends string = WorkbenchWidgetType> {
     widgetId: string;
     title: string;
     type: TWidgetType;
+    surfaceMetrics?: WorkbenchWidgetSurfaceMetrics;
 }
 export interface WorkbenchWidgetDefinition<TWidgetType extends string = WorkbenchWidgetType> {
     type: TWidgetType;
@@ -21,6 +39,7 @@ export interface WorkbenchWidgetDefinition<TWidgetType extends string = Workbenc
     };
     group?: string;
     singleton?: boolean;
+    renderMode?: WorkbenchWidgetRenderMode;
 }
 export interface WorkbenchWidgetItem<TWidgetType extends string = WorkbenchWidgetType> {
     id: string;

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

@@ -10,6 +10,10 @@ export interface UseWorkbenchModelOptions {
 export declare function useWorkbenchModel(options: UseWorkbenchModelOptions): {
     widgets: import("solid-js").Accessor<WorkbenchWidgetItem<WorkbenchWidgetType>[]>;
     viewport: import("solid-js").Accessor<WorkbenchViewport>;
+    canvasFrameSize: import("solid-js").Accessor<{
+        width: number;
+        height: number;
+    }>;
     locked: import("solid-js").Accessor<boolean>;
     filters: import("solid-js").Accessor<Record<WorkbenchWidgetType, boolean>>;
     selectedWidgetId: import("solid-js").Accessor<string | null>;

package/dist/components/workbench/useWorkbenchModel.js

@@ -1,23 +1,23 @@
 import { createSignal as _, createMemo as d, onCleanup as mt } from "solid-js";
 import { ArrowUp as Wt, Copy as xt, Trash as St } from "../icons/index.js";
-import { getTopZIndex as Ct, createContextMenuPosition as pt, createWorkbenchId as kt, findNearestWidget as Ft, clampScale as Xt, WORKBENCH_CANVAS_ZOOM_STEP as P, WORKBENCH_CONTEXT_MENU_WIDTH_PX as bt, estimateContextMenuHeight as Mt } from "./workbenchHelpers.js";
-import { resolveWorkbenchWidgetDefinitions as Yt, getWidgetEntry as Z, createWorkbenchFilterState as yt } from "./widgets/widgetRegistry.js";
+import { getTopZIndex as Ct, createContextMenuPosition as pt, createWorkbenchId as kt, findNearestWidget as Ft, clampScale as Xt, WORKBENCH_CANVAS_ZOOM_STEP as Z, WORKBENCH_CONTEXT_MENU_WIDTH_PX as bt, estimateContextMenuHeight as Mt } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetDefinitions as Yt, getWidgetEntry as $, createWorkbenchFilterState as yt } from "./widgets/widgetRegistry.js";
 function Nt(s) {
-  const [m, W] = _(null), [$, A] = _(null), [j, K] = _({ width: 0, height: 0 });
+  const [m, W] = _(null), [j, A] = _(null), [D, K] = _({ width: 0, height: 0 });
   let r = null, x = null;
-  const a = s.state, h = d(() => a().widgets), u = d(() => a().viewport), L = d(() => a().locked), D = d(() => a().filters), k = d(() => a().selectedWidgetId), F = d(() => Ct(h())), U = d(() => `${Math.round(u().scale * 100)}%`), G = () => typeof s.widgetDefinitions == "function" ? s.widgetDefinitions() : s.widgetDefinitions, f = d(
+  const a = s.state, h = d(() => a().widgets), u = d(() => a().viewport), L = d(() => a().locked), T = d(() => a().filters), k = d(() => a().selectedWidgetId), F = d(() => Ct(h())), U = d(() => `${Math.round(u().scale * 100)}%`), G = () => typeof s.widgetDefinitions == "function" ? s.widgetDefinitions() : s.widgetDefinitions, f = d(
     () => Yt(G())
   ), X = (t, e) => {
-    const n = Number.isFinite(t) && t > 0 ? t : 0, i = Number.isFinite(e) && e > 0 ? e : 0, o = { width: n, height: i }, c = j();
+    const n = Number.isFinite(t) && t > 0 ? t : 0, i = Number.isFinite(e) && e > 0 ? e : 0, o = { width: n, height: i }, c = D();
     return c.width === n && c.height === i ? c : (K(o), o);
-  }, T = () => {
+  }, N = () => {
     x?.disconnect(), x = null;
   }, w = () => r ? X(r.clientWidth, r.clientHeight) : X(0, 0), J = (t) => {
     if (r === (t ?? null)) {
       w();
       return;
     }
-    T(), r = t ?? null, w(), !(!r || typeof ResizeObserver > "u") && (x = new ResizeObserver((e) => {
+    N(), r = t ?? null, w(), !(!r || typeof ResizeObserver > "u") && (x = new ResizeObserver((e) => {
       const n = e[0];
       X(
         n?.contentRect.width ?? r?.clientWidth ?? 0,
@@ -26,7 +26,7 @@ function Nt(s) {
     }), x.observe(r));
   };
   mt(() => {
-    T(), r = null;
+    N(), r = null;
   });
   const Q = (t) => {
     W({
@@ -43,7 +43,7 @@ function Nt(s) {
       worldY: e.y,
       widgetId: e.id
     });
-  }, g = () => W(null), et = (t) => a().widgets.find((e) => e.id === t) ?? null, b = (t) => a().widgets.find((e) => e.type === t) ?? null, N = d(() => {
+  }, g = () => W(null), et = (t) => a().widgets.find((e) => e.id === t) ?? null, b = (t) => a().widgets.find((e) => e.type === t) ?? null, R = d(() => {
     const t = m();
     if (!t) return [];
     if (t.widgetId) {
@@ -62,7 +62,7 @@ function Nt(s) {
         label: "Duplicate",
         icon: xt,
         onSelect: () => {
-          R(e.type, e.x + 32, e.y + 32), g();
+          V(e.type, e.x + 32, e.y + 32), g();
         }
       })), n.push({ id: "separator-delete", kind: "separator" }), n.push({
         id: "delete",
@@ -87,7 +87,7 @@ function Nt(s) {
   }), nt = d(() => {
     const t = m();
     if (!t) return;
-    const e = N(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
+    const e = R(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
     return pt({
       clientX: t.clientX,
       clientY: t.clientY,
@@ -95,7 +95,7 @@ function Nt(s) {
       menuHeight: Mt(n, i)
     });
   }), M = (t, e, n) => {
-    const i = Z(t, f()), o = i.singleton ? b(t) : null;
+    const i = $(t, f()), o = i.singleton ? b(t) : null;
     if (o)
       return C(o, { centerViewport: !0 });
     const c = i.defaultSize, l = {
@@ -115,9 +115,9 @@ function Nt(s) {
       selectedWidgetId: l.id
     })), l;
   }, Y = (t, e, n) => {
-    const i = Z(t, f()).defaultSize;
+    const i = $(t, f()).defaultSize;
     return M(t, e - i.width / 2, n - i.height / 2);
-  }, R = (t, e, n) => M(t, e, n), y = (t) => {
+  }, V = (t, e, n) => M(t, e, n), y = (t) => {
     s.setState((e) => ({
       ...e,
       widgets: e.widgets.filter((n) => n.id !== t),
@@ -150,9 +150,9 @@ function Nt(s) {
     }));
   }, I = (t) => {
     s.setState((e) => ({ ...e, viewport: t }));
-  }, V = (t) => {
+  }, H = (t) => {
     const e = u(), n = w(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, c = Xt(
-      t === "in" ? e.scale * P : e.scale / P
+      t === "in" ? e.scale * Z : e.scale / Z
     ), l = {
       x: n.width / 2 - i * c,
       y: n.height / 2 - o * c,
@@ -179,7 +179,7 @@ function Nt(s) {
       ...e,
       filters: t
     }));
-  }, H = (t) => {
+  }, E = (t) => {
     s.setState((e) => ({ ...e, selectedWidgetId: t }));
   }, at = () => {
     const t = w(), e = u();
@@ -188,38 +188,39 @@ function Nt(s) {
       worldY: t.height > 0 ? (t.height / 2 - e.y) / e.scale : 180
     };
   };
-  let E = 0;
+  let q = 0;
   const ut = (t, e, n) => {
-    const i = u(), o = i.x, c = i.y, l = i.scale, p = performance.now(), gt = 360, ht = ++E, ft = (v) => 1 - Math.pow(1 - v, 3), q = (v) => {
-      if (ht !== E) return;
-      const wt = v - p, B = Math.min(Math.max(wt / gt, 0), 1), O = ft(B);
+    const i = u(), o = i.x, c = i.y, l = i.scale, p = performance.now(), gt = 360, ht = ++q, ft = (v) => 1 - Math.pow(1 - v, 3), B = (v) => {
+      if (ht !== q) return;
+      const wt = v - p, P = Math.min(Math.max(wt / gt, 0), 1), O = ft(P);
       I({
         x: o + (t - o) * O,
         y: c + (e - c) * O,
         scale: l + (n - l) * O
-      }), B < 1 && requestAnimationFrame(q);
+      }), P < 1 && requestAnimationFrame(B);
     };
-    requestAnimationFrame(q);
+    requestAnimationFrame(B);
   }, z = (t) => {
     const e = w();
     if (e.width === 0 || e.height === 0) return;
     const n = u(), i = e.width / 2 - (t.x + t.width / 2) * n.scale, o = e.height / 2 - (t.y + t.height / 2) * n.scale;
     ut(i, o, n.scale);
-  }, C = (t, e = {}) => (H(t.id), S(t.id), e.centerViewport !== !1 && z(t), t);
+  }, C = (t, e = {}) => (E(t.id), S(t.id), e.centerViewport !== !1 && z(t), t);
   return {
     widgets: h,
     viewport: u,
+    canvasFrameSize: D,
     locked: L,
-    filters: D,
+    filters: T,
     selectedWidgetId: k,
     topZIndex: F,
     scaleLabel: U,
-    optimisticFrontWidgetId: $,
+    optimisticFrontWidgetId: j,
     widgetDefinitions: f,
     setCanvasFrameRef: J,
     contextMenu: {
       state: m,
-      items: N,
+      items: R,
       position: nt,
       close: g,
       retarget: (t) => {
@@ -234,7 +235,7 @@ function Nt(s) {
     canvas: {
       openCanvasContextMenu: Q,
       openWidgetContextMenu: tt,
-      selectWidget: H,
+      selectWidget: E,
       startOptimisticFront: it,
       commitFront: S,
       commitMove: ot,
@@ -242,8 +243,8 @@ function Nt(s) {
       commitViewport: I
     },
     hud: {
-      zoomIn: () => V("in"),
-      zoomOut: () => V("out")
+      zoomIn: () => H("in"),
+      zoomOut: () => H("out")
     },
     lock: {
       toggle: ct
@@ -259,7 +260,7 @@ function Nt(s) {
           h(),
           k(),
           t,
-          D()
+          T()
         );
         e && C(e);
       },
@@ -274,7 +275,7 @@ function Nt(s) {
       deleteWidget: y,
       addWidget: M,
       addWidgetAtCursor: Y,
-      addWidgetCentered: R,
+      addWidgetCentered: V,
       ensureWidget: (t, e) => {
         const n = b(t);
         if (n)

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

@@ -1,5 +1,18 @@
-import { type WorkbenchState, type WorkbenchViewport, type WorkbenchWidgetDefinition, type WorkbenchWidgetItem, type WorkbenchWidgetType } from './types';
+import { type WorkbenchProjectedRect, type WorkbenchState, type WorkbenchViewport, type WorkbenchWidgetDefinition, type WorkbenchWidgetItem, type WorkbenchWidgetRenderMode, type WorkbenchWidgetSurfaceMetrics, type WorkbenchWidgetType } from './types';
 export declare function createWorkbenchId(): string;
+export declare function resolveWorkbenchWidgetRenderMode(definition: WorkbenchWidgetDefinition): WorkbenchWidgetRenderMode;
+export interface CreateWorkbenchProjectedRectInput {
+    widgetId: string;
+    worldX: number;
+    worldY: number;
+    worldWidth: number;
+    worldHeight: number;
+    viewport: WorkbenchViewport;
+}
+export declare function createWorkbenchProjectedRect(input: CreateWorkbenchProjectedRectInput): WorkbenchProjectedRect;
+export declare function createWorkbenchWidgetSurfaceMetrics(input: CreateWorkbenchProjectedRectInput & {
+    ready: boolean;
+}): WorkbenchWidgetSurfaceMetrics;
 export declare function sanitizeViewport(viewport: Partial<WorkbenchViewport> | undefined): WorkbenchViewport;
 export declare function sanitizeFilters(filters: Partial<Record<WorkbenchWidgetType, boolean>> | undefined, widgetDefinitions?: readonly WorkbenchWidgetDefinition[]): Record<WorkbenchWidgetType, boolean>;
 export interface SanitizeWorkbenchStateOptions {