@floegence/floe-webapp-core 0.36.11 → 0.36.12

package/dist/components/workbench/WorkbenchContextMenu.js

@@ -1,44 +1,49 @@
-import { insert as a, createComponent as d, addEventListener as b, effect as v, className as f, setStyleProperty as m, template as l, delegateEvents as h } from "solid-js/web";
-import { For as x } from "solid-js";
-import { cn as k } from "../../utils/cn.js";
-var _ = /* @__PURE__ */ l("<div role=menu class=workbench-context-menu data-floe-workbench-boundary=true>"), p = /* @__PURE__ */ l("<div role=separator aria-orientation=horizontal class=workbench-context-menu__separator>"), w = /* @__PURE__ */ l("<button type=button role=menuitem><span class=workbench-context-menu__label>");
-function $(n) {
-  return n.kind === "action";
+import { spread as d, mergeProps as v, insert as a, createComponent as s, addEventListener as f, effect as b, className as _, template as c, delegateEvents as p } from "solid-js/web";
+import { For as h } from "solid-js";
+import { cn as x } from "../../utils/cn.js";
+import { WORKBENCH_CONTEXT_MENU_ATTR as k } from "./workbenchContextMenuDismiss.js";
+var w = /* @__PURE__ */ c("<div role=menu class=workbench-context-menu data-floe-workbench-boundary=true>"), C = /* @__PURE__ */ c("<div role=separator aria-orientation=horizontal class=workbench-context-menu__separator>"), $ = /* @__PURE__ */ c("<button type=button role=menuitem><span class=workbench-context-menu__label>");
+function E(r) {
+  return r.kind === "action";
 }
-function E(n) {
+function M(r) {
   return (() => {
-    var r = _();
-    return r.$$contextmenu = (e) => e.preventDefault(), a(r, d(x, {
+    var o = w();
+    return d(o, v({
+      [k]: "true"
+    }, {
+      get style() {
+        return {
+          left: `${r.x}px`,
+          top: `${r.y}px`
+        };
+      },
+      onContextMenu: (e) => e.preventDefault()
+    }), !1, !0), a(o, s(h, {
       get each() {
-        return n.items;
+        return r.items;
       },
       children: (e) => {
-        if (!$(e))
-          return p();
-        const c = e.icon;
+        if (!E(e))
+          return C();
+        const m = e.icon;
         return (() => {
-          var t = w(), i = t.firstChild;
-          return b(t, "click", e.onSelect, !0), a(t, d(c, {
+          var t = $(), l = t.firstChild;
+          return f(t, "click", e.onSelect, !0), a(t, s(m, {
             class: "h-3.5 w-3.5"
-          }), i), a(i, () => e.label), v((o) => {
-            var u = k("workbench-context-menu__item", e.destructive && "is-destructive"), s = e.disabled;
-            return u !== o.e && f(t, o.e = u), s !== o.t && (t.disabled = o.t = s), o;
+          }), l), a(l, () => e.label), b((n) => {
+            var i = x("workbench-context-menu__item", e.destructive && "is-destructive"), u = e.disabled;
+            return i !== n.e && _(t, n.e = i), u !== n.t && (t.disabled = n.t = u), n;
           }, {
             e: void 0,
             t: void 0
           }), t;
         })();
       }
-    })), v((e) => {
-      var c = `${n.x}px`, t = `${n.y}px`;
-      return c !== e.e && m(r, "left", e.e = c), t !== e.t && m(r, "top", e.t = t), e;
-    }, {
-      e: void 0,
-      t: void 0
-    }), r;
+    })), o;
   })();
 }
-h(["contextmenu", "click"]);
+p(["click"]);
 export {
-  E as WorkbenchContextMenu
+  M as WorkbenchContextMenu
 };

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

@@ -5,9 +5,12 @@ export interface WorkbenchSurfaceApi {
         worldX?: number;
         worldY?: number;
     }) => WorkbenchWidgetItem | null;
+    clearSelection: () => void;
     focusWidget: (widget: WorkbenchWidgetItem, options?: {
         centerViewport?: boolean;
     }) => WorkbenchWidgetItem;
+    fitWidget: (widget: WorkbenchWidgetItem) => WorkbenchWidgetItem;
+    overviewWidget: (widget: WorkbenchWidgetItem) => WorkbenchWidgetItem;
     findWidgetByType: (type: WorkbenchWidgetType) => WorkbenchWidgetItem | null;
 }
 export interface WorkbenchSurfaceProps {

package/dist/components/workbench/WorkbenchSurface.js

@@ -1,42 +1,53 @@
-import { insert as c, createComponent as a, Portal as k, addEventListener as s, effect as p, className as b, template as m, delegateEvents as C } from "solid-js/web";
-import { createEffect as d, onCleanup as g, Show as W } from "solid-js";
-import { isTypingElement as A } from "../../utils/dom.js";
-import { WorkbenchCanvas as y } from "./WorkbenchCanvas.js";
+import { insert as c, createComponent as a, Portal as h, addEventListener as p, effect as k, className as W, template as g, delegateEvents as b } from "solid-js/web";
+import { createEffect as s, onCleanup as u, Show as C } from "solid-js";
+import { isTypingElement as y } from "../../utils/dom.js";
+import { WorkbenchCanvas as A } from "./WorkbenchCanvas.js";
 import { WorkbenchContextMenu as D } from "./WorkbenchContextMenu.js";
 import { WorkbenchFilterBar as x } from "./WorkbenchFilterBar.js";
 import { WorkbenchHud as S } from "./WorkbenchHud.js";
-import { WorkbenchLockButton as F } from "./WorkbenchLockButton.js";
-import { useWorkbenchModel as M } from "./useWorkbenchModel.js";
-var L = /* @__PURE__ */ m("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), R = /* @__PURE__ */ m("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
-const E = "F1";
-function U(i) {
-  const e = M({
+import { WorkbenchLockButton as M } from "./WorkbenchLockButton.js";
+import { installWorkbenchContextMenuDismissListeners as F } from "./workbenchContextMenuDismiss.js";
+import { useWorkbenchModel as L } from "./useWorkbenchModel.js";
+var R = /* @__PURE__ */ g("<div class=workbench-menu-backdrop data-floe-workbench-boundary=true>"), E = /* @__PURE__ */ g("<div><div class=workbench-surface__body data-floe-workbench-canvas-frame=true>");
+const _ = "F1";
+function P(i) {
+  const e = L({
     state: () => i.state(),
     setState: (t) => i.setState(t),
     widgetDefinitions: () => i.widgetDefinitions,
     onClose: () => {
     }
   });
-  d(() => {
+  s(() => {
     i.onApiReady?.({
       ensureWidget: (t, r) => e.widgetActions.ensureWidget(t, r) ?? null,
+      clearSelection: () => e.selection.clear(),
       focusWidget: (t, r) => e.navigation.focusWidget(t, r),
+      fitWidget: (t) => e.navigation.fitWidget(t),
+      overviewWidget: (t) => e.navigation.overviewWidget(t),
       findWidgetByType: (t) => e.queries.findWidgetByType(t)
-    }), g(() => {
+    }), u(() => {
       i.onApiReady?.(null);
     });
   });
-  const u = () => i.lockShortcut === void 0 ? E : i.lockShortcut;
-  d(() => {
+  const d = () => i.lockShortcut === void 0 ? _ : i.lockShortcut;
+  s(() => {
+    if (typeof window > "u" || !e.contextMenu.state()) return;
+    const t = F({
+      ownerWindow: window,
+      onDismiss: e.contextMenu.close
+    });
+    u(() => t());
+  }), s(() => {
     if (i.enableKeyboard === !1 || typeof document > "u") return;
-    const t = u(), r = (n) => {
+    const t = d(), r = (n) => {
       if (n.defaultPrevented || n.isComposing) return;
       if (t !== null && n.key === t) {
         n.preventDefault(), e.lock.toggle();
         return;
       }
       const o = n.target;
-      if (!(o instanceof Element && A(o)))
+      if (!(o instanceof Element && y(o)))
         switch (n.key) {
           case "ArrowUp":
             n.preventDefault(), e.navigation.handleArrowNavigation("up");
@@ -56,26 +67,26 @@ function U(i) {
             break;
         }
     };
-    document.addEventListener("keydown", r, !0), g(() => document.removeEventListener("keydown", r, !0));
+    document.addEventListener("keydown", r, !0), u(() => document.removeEventListener("keydown", r, !0));
   });
-  const f = (t, r) => {
+  const m = (t, r) => {
     const n = document.querySelector('[data-floe-workbench-canvas-frame="true"]');
     if (!n) return null;
     const o = n.getBoundingClientRect();
     if (t < o.left || t > o.right || r < o.top || r > o.bottom)
       return null;
-    const v = t - o.left, h = r - o.top, l = e.viewport();
+    const w = t - o.left, v = r - o.top, l = e.viewport();
     return {
-      worldX: (v - l.x) / l.scale,
-      worldY: (h - l.y) / l.scale
+      worldX: (w - l.x) / l.scale,
+      worldY: (v - l.y) / l.scale
     };
-  }, w = (t, r, n) => {
-    const o = f(r, n);
+  }, f = (t, r, n) => {
+    const o = m(r, n);
     o && e.widgetActions.addWidgetAtCursor(t, o.worldX, o.worldY);
   };
   return (() => {
-    var t = R(), r = t.firstChild;
-    return c(r, a(y, {
+    var t = E(), r = t.firstChild;
+    return c(r, a(A, {
       get widgetDefinitions() {
         return e.widgetDefinitions();
       },
@@ -130,7 +141,7 @@ function U(i) {
       get onRequestDelete() {
         return e.widgetActions.deleteWidget;
       }
-    })), c(t, a(F, {
+    })), c(t, a(M, {
       get locked() {
         return e.locked();
       },
@@ -138,7 +149,7 @@ function U(i) {
         return e.lock.toggle;
       },
       get shortcutLabel() {
-        return u() ?? void 0;
+        return d() ?? void 0;
       }
     }), null), c(t, a(x, {
       get widgetDefinitions() {
@@ -156,7 +167,7 @@ function U(i) {
       get onShowAll() {
         return e.filter.showAll;
       },
-      onCreateAt: w
+      onCreateAt: f
     }), null), c(t, a(S, {
       get scaleLabel() {
         return e.scaleLabel();
@@ -167,16 +178,16 @@ function U(i) {
       get onZoomIn() {
         return e.hud.zoomIn;
       }
-    }), null), c(t, a(W, {
+    }), null), c(t, a(C, {
       get when() {
         return e.contextMenu.state();
       },
       get children() {
-        return a(k, {
+        return a(h, {
           get children() {
             return [(() => {
-              var n = L();
-              return s(n, "contextmenu", e.contextMenu.retarget, !0), s(n, "click", e.contextMenu.close, !0), n;
+              var n = R();
+              return p(n, "contextmenu", e.contextMenu.retarget, !0), n;
             })(), a(D, {
               get x() {
                 return e.contextMenu.position()?.left ?? 0;
@@ -191,10 +202,10 @@ function U(i) {
           }
         });
       }
-    }), null), p(() => b(t, `workbench-surface${i.class ? ` ${i.class}` : ""}`)), t;
+    }), null), k(() => W(t, `workbench-surface${i.class ? ` ${i.class}` : ""}`)), t;
   })();
 }
-C(["click", "contextmenu"]);
+b(["contextmenu"]);
 export {
-  U as WorkbenchSurface
+  P as WorkbenchSurface
 };

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, createWorkbenchProjectedRect, createWorkbenchRenderLayerMap, createWorkbenchWidgetSurfaceMetrics, resolveWorkbenchWidgetRenderMode, type WorkbenchRenderLayerMap, } from './workbenchHelpers';
+export { sanitizeWorkbenchState, createDefaultWorkbenchState, createWorkbenchId, createWorkbenchProjectedRect, createWorkbenchRenderLayerMap, createWorkbenchViewportCenteredOnWidget, createWorkbenchViewportFitForWidget, createWorkbenchWidgetSurfaceMetrics, resolveWorkbenchWidgetRenderMode, type WorkbenchRenderLayerMap, } from './workbenchHelpers';

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

@@ -36,6 +36,7 @@ export declare function useWorkbenchModel(options: UseWorkbenchModelOptions): {
         openCanvasContextMenu: (event: InfiniteCanvasContextMenuEvent) => void;
         openWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
         selectWidget: (widgetId: string) => void;
+        clearSelection: () => void;
         startOptimisticFront: (widgetId: string) => void;
         commitFront: (widgetId: string) => void;
         commitMove: (widgetId: string, position: {
@@ -66,6 +67,11 @@ export declare function useWorkbenchModel(options: UseWorkbenchModelOptions): {
         focusWidget: (widget: WorkbenchWidgetItem, options?: {
             centerViewport?: boolean;
         }) => WorkbenchWidgetItem<WorkbenchWidgetType>;
+        fitWidget: (widget: WorkbenchWidgetItem) => WorkbenchWidgetItem<WorkbenchWidgetType>;
+        overviewWidget: (widget: WorkbenchWidgetItem) => WorkbenchWidgetItem<WorkbenchWidgetType>;
+    };
+    selection: {
+        clear: () => void;
     };
     widgetActions: {
         deleteSelected: () => void;

package/dist/components/workbench/useWorkbenchModel.js

@@ -1,230 +1,252 @@
-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 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), [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), 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 = D();
-    return c.width === n && c.height === i ? c : (K(o), o);
-  }, N = () => {
-    x?.disconnect(), x = null;
-  }, w = () => r ? X(r.clientWidth, r.clientHeight) : X(0, 0), J = (t) => {
+import { createSignal as V, createMemo as d, onCleanup as xt } from "solid-js";
+import { ArrowUp as St, Copy as Ct, Trash as pt } from "../icons/index.js";
+import { getTopZIndex as kt, createContextMenuPosition as Ft, createWorkbenchId as bt, createWorkbenchViewportCenteredOnWidget as L, findNearestWidget as It, clampScale as Mt, WORKBENCH_CANVAS_ZOOM_STEP as $, WORKBENCH_MIN_SCALE as Xt, createWorkbenchViewportFitForWidget as yt, WORKBENCH_CONTEXT_MENU_WIDTH_PX as Yt, estimateContextMenuHeight as vt } from "./workbenchHelpers.js";
+import { resolveWorkbenchWidgetDefinitions as Ot, getWidgetEntry as j, createWorkbenchFilterState as zt } from "./widgets/widgetRegistry.js";
+function qt(c) {
+  const [W, x] = V(null), [U, D] = V(null), [H, G] = V({ width: 0, height: 0 });
+  let r = null, S = null;
+  const l = c.state, w = d(() => l().widgets), u = d(() => l().viewport), J = d(() => l().locked), N = d(() => l().filters), F = d(() => l().selectedWidgetId), b = d(() => kt(w())), Q = d(() => `${Math.round(u().scale * 100)}%`), tt = () => typeof c.widgetDefinitions == "function" ? c.widgetDefinitions() : c.widgetDefinitions, m = d(
+    () => Ot(tt())
+  ), I = (t, e) => {
+    const n = Number.isFinite(t) && t > 0 ? t : 0, i = Number.isFinite(e) && e > 0 ? e : 0, o = { width: n, height: i }, s = H();
+    return s.width === n && s.height === i ? s : (G(o), o);
+  }, R = () => {
+    S?.disconnect(), S = null;
+  }, a = () => r ? I(r.clientWidth, r.clientHeight) : I(0, 0), et = (t) => {
     if (r === (t ?? null)) {
-      w();
+      a();
       return;
     }
-    N(), r = t ?? null, w(), !(!r || typeof ResizeObserver > "u") && (x = new ResizeObserver((e) => {
+    R(), r = t ?? null, a(), !(!r || typeof ResizeObserver > "u") && (S = new ResizeObserver((e) => {
       const n = e[0];
-      X(
+      I(
         n?.contentRect.width ?? r?.clientWidth ?? 0,
         n?.contentRect.height ?? r?.clientHeight ?? 0
       );
-    }), x.observe(r));
+    }), S.observe(r));
   };
-  mt(() => {
-    N(), r = null;
+  xt(() => {
+    R(), r = null;
   });
-  const Q = (t) => {
-    W({
+  const nt = (t) => {
+    x({
       clientX: t.clientX,
       clientY: t.clientY,
       worldX: t.worldX,
       worldY: t.worldY
     });
-  }, tt = (t, e) => {
-    S(e.id), W({
+  }, it = (t, e) => {
+    f(e.id), x({
       clientX: t.clientX,
       clientY: t.clientY,
       worldX: e.x,
       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, R = d(() => {
-    const t = m();
+  }, h = () => x(null), ot = (t) => l().widgets.find((e) => e.id === t) ?? null, M = (t) => l().widgets.find((e) => e.type === t) ?? null, T = d(() => {
+    const t = W();
     if (!t) return [];
     if (t.widgetId) {
-      const e = h().find((i) => i.id === t.widgetId), n = [];
+      const e = w().find((i) => i.id === t.widgetId), n = [];
       return e && (n.push({
         id: "bring-to-front",
         kind: "action",
         label: "Bring to Front",
-        icon: Wt,
+        icon: St,
         onSelect: () => {
-          S(e.id), g();
+          f(e.id), h();
         }
       }), n.push({
         id: "duplicate",
         kind: "action",
         label: "Duplicate",
-        icon: xt,
+        icon: Ct,
         onSelect: () => {
-          V(e.type, e.x + 32, e.y + 32), g();
+          E(e.type, e.x + 32, e.y + 32), h();
         }
       })), n.push({ id: "separator-delete", kind: "separator" }), n.push({
         id: "delete",
         kind: "action",
         label: "Delete",
-        icon: St,
+        icon: pt,
         destructive: !0,
         onSelect: () => {
-          t.widgetId && y(t.widgetId), g();
+          t.widgetId && Y(t.widgetId), h();
         }
       }), n;
     }
-    return f().map((e) => ({
+    return m().map((e) => ({
       id: `add-${e.type}`,
       kind: "action",
       label: `Add ${e.label}`,
       icon: e.icon,
       onSelect: () => {
-        Y(e.type, t.worldX, t.worldY), g();
+        y(e.type, t.worldX, t.worldY), h();
       }
     }));
-  }), nt = d(() => {
-    const t = m();
+  }), ct = d(() => {
+    const t = W();
     if (!t) return;
-    const e = R(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
-    return pt({
+    const e = T(), n = e.filter((o) => o.kind === "action").length, i = e.filter((o) => o.kind === "separator").length;
+    return Ft({
       clientX: t.clientX,
       clientY: t.clientY,
-      menuWidth: bt,
-      menuHeight: Mt(n, i)
+      menuWidth: Yt,
+      menuHeight: vt(n, i)
     });
-  }), M = (t, e, n) => {
-    const i = $(t, f()), o = i.singleton ? b(t) : null;
+  }), X = (t, e, n) => {
+    const i = j(t, m()), o = i.singleton ? M(t) : null;
     if (o)
-      return C(o, { centerViewport: !0 });
-    const c = i.defaultSize, l = {
-      id: kt(),
+      return p(o, { centerViewport: !0 });
+    const s = i.defaultSize, g = {
+      id: bt(),
       type: t,
       title: i.defaultTitle,
       x: e,
       y: n,
-      width: c.width,
-      height: c.height,
-      z_index: F() + 1,
+      width: s.width,
+      height: s.height,
+      z_index: b() + 1,
       created_at_unix_ms: Date.now()
     };
-    return s.setState((p) => ({
-      ...p,
-      widgets: [...p.widgets, l],
-      selectedWidgetId: l.id
-    })), l;
-  }, Y = (t, e, n) => {
-    const i = $(t, f()).defaultSize;
-    return M(t, e - i.width / 2, n - i.height / 2);
-  }, V = (t, e, n) => M(t, e, n), y = (t) => {
-    s.setState((e) => ({
+    return c.setState((k) => ({
+      ...k,
+      widgets: [...k.widgets, g],
+      selectedWidgetId: g.id
+    })), g;
+  }, y = (t, e, n) => {
+    const i = j(t, m()).defaultSize;
+    return X(t, e - i.width / 2, n - i.height / 2);
+  }, E = (t, e, n) => X(t, e, n), Y = (t) => {
+    c.setState((e) => ({
       ...e,
       widgets: e.widgets.filter((n) => n.id !== t),
       selectedWidgetId: e.selectedWidgetId === t ? null : e.selectedWidgetId
     }));
-  }, it = (t) => {
-    A(t);
-  }, S = (t) => {
-    A(t);
-    const e = F(), n = h().find((i) => i.id === t);
-    n && n.z_index < e && s.setState((i) => ({
+  }, st = (t) => {
+    D(t);
+  }, f = (t) => {
+    D(t);
+    const e = b(), n = w().find((i) => i.id === t);
+    n && n.z_index < e && c.setState((i) => ({
       ...i,
       widgets: i.widgets.map(
         (o) => o.id === t ? { ...o, z_index: e + 1 } : o
       )
     }));
-  }, ot = (t, e) => {
-    s.setState((n) => ({
+  }, rt = (t, e) => {
+    c.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
         (i) => i.id === t ? { ...i, x: e.x, y: e.y } : i
       )
     }));
-  }, st = (t, e) => {
-    s.setState((n) => ({
+  }, dt = (t, e) => {
+    c.setState((n) => ({
       ...n,
       widgets: n.widgets.map(
         (i) => i.id === t ? { ...i, width: e.width, height: e.height } : i
       )
     }));
-  }, I = (t) => {
-    s.setState((e) => ({ ...e, viewport: 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 * Z : e.scale / Z
-    ), l = {
-      x: n.width / 2 - i * c,
-      y: n.height / 2 - o * c,
-      scale: c
+  }, v = (t) => {
+    c.setState((e) => ({ ...e, viewport: t }));
+  }, B = (t) => {
+    const e = u(), n = a(), i = (n.width / 2 - e.x) / e.scale, o = (n.height / 2 - e.y) / e.scale, s = Mt(
+      t === "in" ? e.scale * $ : e.scale / $
+    ), g = {
+      x: n.width / 2 - i * s,
+      y: n.height / 2 - o * s,
+      scale: s
     };
-    I(l);
-  }, ct = () => {
-    s.setState((t) => ({ ...t, locked: !t.locked }));
-  }, rt = (t) => {
-    s.setState((e) => ({
+    v(g);
+  }, lt = () => {
+    c.setState((t) => ({ ...t, locked: !t.locked }));
+  }, at = (t) => {
+    c.setState((e) => ({
       ...e,
       filters: { ...e.filters, [t]: !e.filters[t] }
     }));
-  }, dt = (t) => {
-    s.setState((e) => {
+  }, gt = (t) => {
+    c.setState((e) => {
       const n = { ...e.filters };
       for (const i of Object.keys(n))
         n[i] = i === t;
       return { ...e, filters: n };
     });
-  }, lt = () => {
-    const t = yt(f());
-    s.setState((e) => ({
+  }, ut = () => {
+    const t = zt(m());
+    c.setState((e) => ({
       ...e,
       filters: t
     }));
-  }, E = (t) => {
-    s.setState((e) => ({ ...e, selectedWidgetId: t }));
-  }, at = () => {
-    const t = w(), e = u();
+  }, C = (t) => {
+    c.setState((e) => ({ ...e, selectedWidgetId: t }));
+  }, q = () => {
+    c.setState(
+      (t) => t.selectedWidgetId === null ? t : { ...t, selectedWidgetId: null }
+    );
+  }, ht = () => {
+    const t = a(), e = u();
     return {
       worldX: t.width > 0 ? (t.width / 2 - e.x) / e.scale : 240,
       worldY: t.height > 0 ? (t.height / 2 - e.y) / e.scale : 180
     };
   };
-  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 = ++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
-      }), P < 1 && requestAnimationFrame(B);
+  let P = 0;
+  const O = (t) => {
+    const e = u(), n = e.x, i = e.y, o = e.scale, s = performance.now(), g = 360, k = ++P, mt = (_) => 1 - Math.pow(1 - _, 3), Z = (_) => {
+      if (k !== P) return;
+      const Wt = _ - s, K = Math.min(Math.max(Wt / g, 0), 1), A = mt(K);
+      v({
+        x: n + (t.x - n) * A,
+        y: i + (t.y - i) * A,
+        scale: o + (t.scale - o) * A
+      }), K < 1 && requestAnimationFrame(Z);
     };
-    requestAnimationFrame(B);
+    requestAnimationFrame(Z);
   }, 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 = {}) => (E(t.id), S(t.id), e.centerViewport !== !1 && z(t), t);
+    const e = a();
+    e.width === 0 || e.height === 0 || O(L({
+      widget: t,
+      scale: u().scale,
+      frameWidth: e.width,
+      frameHeight: e.height
+    }));
+  }, ft = (t) => {
+    const e = a();
+    e.width === 0 || e.height === 0 || O(yt({
+      widget: t,
+      frameWidth: e.width,
+      frameHeight: e.height
+    }));
+  }, wt = (t) => {
+    const e = a();
+    e.width === 0 || e.height === 0 || O(L({
+      widget: t,
+      scale: Xt,
+      frameWidth: e.width,
+      frameHeight: e.height
+    }));
+  }, p = (t, e = {}) => (C(t.id), f(t.id), e.centerViewport !== !1 && z(t), t);
   return {
-    widgets: h,
+    widgets: w,
     viewport: u,
-    canvasFrameSize: D,
-    locked: L,
-    filters: T,
-    selectedWidgetId: k,
-    topZIndex: F,
-    scaleLabel: U,
-    optimisticFrontWidgetId: j,
-    widgetDefinitions: f,
-    setCanvasFrameRef: J,
+    canvasFrameSize: H,
+    locked: J,
+    filters: N,
+    selectedWidgetId: F,
+    topZIndex: b,
+    scaleLabel: Q,
+    optimisticFrontWidgetId: U,
+    widgetDefinitions: m,
+    setCanvasFrameRef: et,
     contextMenu: {
-      state: m,
-      items: R,
-      position: nt,
-      close: g,
+      state: W,
+      items: T,
+      position: ct,
+      close: h,
       retarget: (t) => {
-        t.preventDefault(), t.stopPropagation(), W({
+        t.preventDefault(), t.stopPropagation(), x({
           clientX: t.clientX,
           clientY: t.clientY,
           worldX: 0,
@@ -233,54 +255,60 @@ function Nt(s) {
       }
     },
     canvas: {
-      openCanvasContextMenu: Q,
-      openWidgetContextMenu: tt,
-      selectWidget: E,
-      startOptimisticFront: it,
-      commitFront: S,
-      commitMove: ot,
-      commitResize: st,
-      commitViewport: I
+      openCanvasContextMenu: nt,
+      openWidgetContextMenu: it,
+      selectWidget: C,
+      clearSelection: q,
+      startOptimisticFront: st,
+      commitFront: f,
+      commitMove: rt,
+      commitResize: dt,
+      commitViewport: v
     },
     hud: {
-      zoomIn: () => H("in"),
-      zoomOut: () => H("out")
+      zoomIn: () => B("in"),
+      zoomOut: () => B("out")
     },
     lock: {
-      toggle: ct
+      toggle: lt
     },
     filter: {
-      toggle: rt,
-      solo: dt,
-      showAll: lt
+      toggle: at,
+      solo: gt,
+      showAll: ut
     },
     navigation: {
       handleArrowNavigation: (t) => {
-        const e = Ft(
-          h(),
-          k(),
+        const e = It(
+          w(),
+          F(),
           t,
-          T()
+          N()
         );
-        e && C(e);
+        e && p(e);
       },
       centerOnWidget: z,
-      focusWidget: C
+      focusWidget: p,
+      fitWidget: (t) => (C(t.id), f(t.id), ft(t), t),
+      overviewWidget: (t) => (C(t.id), f(t.id), wt(t), t)
+    },
+    selection: {
+      clear: q
     },
     widgetActions: {
       deleteSelected: () => {
-        const t = k();
-        t && y(t);
+        const t = F();
+        t && Y(t);
       },
-      deleteWidget: y,
-      addWidget: M,
-      addWidgetAtCursor: Y,
-      addWidgetCentered: V,
+      deleteWidget: Y,
+      addWidget: X,
+      addWidgetAtCursor: y,
+      addWidgetCentered: E,
       ensureWidget: (t, e) => {
-        const n = b(t);
+        const n = M(t);
         if (n)
-          return C(n, { centerViewport: e?.centerViewport ?? !0 });
-        const i = at(), o = Y(
+          return p(n, { centerViewport: e?.centerViewport ?? !0 });
+        const i = ht(), o = y(
           t,
           e?.worldX ?? i.worldX,
           e?.worldY ?? i.worldY
@@ -289,18 +317,18 @@ function Nt(s) {
       }
     },
     queries: {
-      findWidgetByType: b,
-      findWidgetById: et
+      findWidgetByType: M,
+      findWidgetById: ot
     },
     handleCloseRequest: () => {
-      if (m()) {
-        g();
+      if (W()) {
+        h();
         return;
       }
-      s.onClose();
+      c.onClose();
     }
   };
 }
 export {
-  Nt as useWorkbenchModel
+  qt as useWorkbenchModel
 };

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

@@ -0,0 +1,5 @@
+export declare const WORKBENCH_CONTEXT_MENU_ATTR = "data-floe-workbench-context-menu";
+export declare function installWorkbenchContextMenuDismissListeners(options: {
+    ownerWindow: Window;
+    onDismiss: () => void;
+}): () => void;

package/dist/components/workbench/workbenchContextMenuDismiss.js

@@ -0,0 +1,29 @@
+const i = "data-floe-workbench-context-menu";
+function s(e) {
+  return !e || typeof e != "object" ? !1 : e.dataset?.floeWorkbenchContextMenu === "true";
+}
+function d(e) {
+  if (typeof e.composedPath == "function") {
+    for (const t of e.composedPath())
+      if (s(t))
+        return !0;
+  }
+  const n = e.target;
+  return typeof Element < "u" && n instanceof Element ? n.closest(`[${i}="true"]`) !== null : !1;
+}
+function c(e) {
+  const n = (o) => {
+    d(o) || e.onDismiss();
+  }, t = (o) => {
+    o.key === "Escape" && e.onDismiss();
+  }, r = () => {
+    e.onDismiss();
+  };
+  return e.ownerWindow.addEventListener("pointerdown", n, !0), e.ownerWindow.addEventListener("keydown", t, !0), e.ownerWindow.addEventListener("resize", r), e.ownerWindow.addEventListener("scroll", r, !0), () => {
+    e.ownerWindow.removeEventListener("pointerdown", n, !0), e.ownerWindow.removeEventListener("keydown", t, !0), e.ownerWindow.removeEventListener("resize", r), e.ownerWindow.removeEventListener("scroll", r, !0);
+  };
+}
+export {
+  i as WORKBENCH_CONTEXT_MENU_ATTR,
+  c as installWorkbenchContextMenuDismissListeners
+};

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

@@ -23,6 +23,23 @@ export declare function sanitizeWorkbenchState(input: unknown, options?: Sanitiz
 export declare function createDefaultWorkbenchState(widgetDefinitions?: readonly WorkbenchWidgetDefinition[]): WorkbenchState;
 export declare const WORKBENCH_CANVAS_ZOOM_STEP = 1.18;
 export declare const WORKBENCH_CONTEXT_MENU_WIDTH_PX = 200;
+export declare const WORKBENCH_MIN_SCALE = 0.45;
+export declare const WORKBENCH_MAX_SCALE = 2.2;
+export declare const WORKBENCH_VIEWPORT_FIT_PADDING_PX = 48;
+export declare function createWorkbenchViewportCenteredOnWidget(options: {
+    widget: WorkbenchWidgetItem;
+    scale: number;
+    frameWidth: number;
+    frameHeight: number;
+}): WorkbenchViewport;
+export declare function createWorkbenchViewportFitForWidget(options: {
+    widget: WorkbenchWidgetItem;
+    frameWidth: number;
+    frameHeight: number;
+    minScale?: number;
+    maxScale?: number;
+    paddingPx?: number;
+}): WorkbenchViewport;
 export interface WorkbenchRenderLayerMap {
     byWidgetId: ReadonlyMap<string, number>;
     topRenderLayer: number;

package/dist/components/workbench/workbenchHelpers.js

@@ -1,13 +1,13 @@
-import { DEFAULT_WORKBENCH_VIEWPORT as g } from "./types.js";
-import { resolveWorkbenchWidgetDefinitions as m, getWidgetEntry as x, createWorkbenchFilterState as _, isValidWorkbenchWidgetType as w } from "./widgets/widgetRegistry.js";
-function v() {
+import { DEFAULT_WORKBENCH_VIEWPORT as y } from "./types.js";
+import { resolveWorkbenchWidgetDefinitions as _, getWidgetEntry as W, createWorkbenchFilterState as w, isValidWorkbenchWidgetType as k } from "./widgets/widgetRegistry.js";
+function D() {
   const e = globalThis.crypto;
   return e && typeof e.randomUUID == "function" ? `wb-${e.randomUUID()}` : `wb-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
 }
-function I(e) {
+function O(e) {
   return e.renderMode ?? "canvas_scaled";
 }
-function p(e) {
+function N(e) {
   const t = Number.isFinite(e.viewport.scale) && e.viewport.scale > 0 ? e.viewport.scale : 1;
   return {
     widgetId: e.widgetId,
@@ -22,30 +22,30 @@ function p(e) {
     viewportScale: t
   };
 }
-function H(e) {
+function R(e) {
   return {
     ready: e.ready,
-    rect: p(e)
+    rect: N(e)
   };
 }
-function M(e) {
+function H(e) {
   return e ? {
     x: Number.isFinite(e.x) ? e.x : 0,
     y: Number.isFinite(e.y) ? e.y : 0,
     scale: Number.isFinite(e.scale) && e.scale > 0 ? e.scale : 1
-  } : { ...g };
+  } : { ...y };
 }
-function k(e, t) {
-  return _(t, e);
+function F(e, t) {
+  return w(t, e);
 }
-function D(e, t = {}) {
-  const r = m(t.widgetDefinitions), d = t.createFallbackState ?? (() => S(r)), n = e;
+function T(e, t = {}) {
+  const r = _(t.widgetDefinitions), d = t.createFallbackState ?? (() => I(r)), n = e;
   if (!n || n.version !== 1 || !Array.isArray(n.widgets))
     return d();
-  const o = n.widgets.filter(
-    (i) => !!i && typeof i.id == "string" && w(i.type, r) && typeof i.title == "string"
+  const a = n.widgets.filter(
+    (i) => !!i && typeof i.id == "string" && k(i.type, r) && typeof i.title == "string"
   ).map((i) => {
-    const h = x(i.type, r);
+    const h = W(i.type, r);
     return {
       id: i.id,
       type: i.type,
@@ -57,52 +57,76 @@ function D(e, t = {}) {
       z_index: Number.isFinite(i.z_index) && i.z_index >= 0 ? i.z_index : 1,
       created_at_unix_ms: Number.isFinite(i.created_at_unix_ms) ? i.created_at_unix_ms : Date.now()
     };
-  }), a = typeof n.selectedWidgetId == "string" && o.some((i) => i.id === n.selectedWidgetId) ? n.selectedWidgetId : null;
+  }), c = typeof n.selectedWidgetId == "string" && a.some((i) => i.id === n.selectedWidgetId) ? n.selectedWidgetId : null;
   return {
     version: 1,
-    widgets: o,
-    viewport: M(n.viewport),
+    widgets: a,
+    viewport: H(n.viewport),
     locked: typeof n.locked == "boolean" ? n.locked : !1,
-    filters: k(n.filters, r),
-    selectedWidgetId: a
+    filters: F(n.filters, r),
+    selectedWidgetId: c
   };
 }
-function S(e) {
-  const t = m(e), r = Date.now(), d = [
+function I(e) {
+  const t = _(e), r = Date.now(), d = [
     { type: "terminal", title: "dev · terminal", x: 80, y: 80 },
     { type: "file-browser", title: "project · files", x: 600, y: 80 },
     { type: "system-monitor", title: "host · system monitor", x: 80, y: 420 },
     { type: "log-viewer", title: "services · logs", x: 540, y: 500 },
     { type: "code-editor", title: "Counter.tsx", x: 1e3, y: 180 }
-  ], n = d.filter((o) => t.some((a) => a.type === o.type)).map((o, a) => {
-    const i = x(o.type, t);
+  ], n = d.filter((a) => t.some((c) => c.type === a.type)).map((a, c) => {
+    const i = W(a.type, t);
     return {
-      id: `wb-seed-${a + 1}`,
-      type: o.type,
-      title: o.title,
-      x: o.x,
-      y: o.y,
+      id: `wb-seed-${c + 1}`,
+      type: a.type,
+      title: a.title,
+      x: a.x,
+      y: a.y,
       width: i.defaultSize.width,
       height: i.defaultSize.height,
-      z_index: a + 1,
-      created_at_unix_ms: r - (d.length - a) * 6e5
+      z_index: c + 1,
+      created_at_unix_ms: r - (d.length - c) * 6e5
     };
   });
   return {
     version: 1,
     widgets: n,
-    viewport: { ...g },
+    viewport: { ...y },
     locked: !1,
-    filters: _(t),
+    filters: w(t),
     selectedWidgetId: n[0]?.id ?? null
   };
 }
-const C = 1.18, E = 200;
-function z(e, t) {
+const P = 1.18, A = 200, u = 0.45, g = 2.2, z = 48;
+function v(e) {
+  const t = b(e.scale, u, g);
+  return {
+    x: e.frameWidth / 2 - (e.widget.x + e.widget.width / 2) * t,
+    y: e.frameHeight / 2 - (e.widget.y + e.widget.height / 2) * t,
+    scale: t
+  };
+}
+function X(e) {
+  const t = e.minScale ?? u, r = e.maxScale ?? g, d = e.paddingPx ?? z, n = Math.max(e.frameWidth - d * 2, 1), a = Math.max(e.frameHeight - d * 2, 1), c = b(
+    Math.min(
+      n / Math.max(e.widget.width, 1),
+      a / Math.max(e.widget.height, 1)
+    ),
+    t,
+    r
+  );
+  return v({
+    widget: e.widget,
+    scale: c,
+    frameWidth: e.frameWidth,
+    frameHeight: e.frameHeight
+  });
+}
+function p(e, t) {
   return e.z_index !== t.z_index ? e.z_index - t.z_index : e.created_at_unix_ms !== t.created_at_unix_ms ? e.created_at_unix_ms - t.created_at_unix_ms : e.id.localeCompare(t.id);
 }
-function R(e) {
-  const t = [...e].sort(z), r = /* @__PURE__ */ new Map();
+function V(e) {
+  const t = [...e].sort(p), r = /* @__PURE__ */ new Map();
   for (const [d, n] of t.entries())
     r.set(n.id, d + 1);
   return {
@@ -110,70 +134,75 @@ function R(e) {
     topRenderLayer: Math.max(t.length, 1)
   };
 }
-function T(e) {
+function B(e) {
   const t = typeof window < "u" ? window.innerWidth : 1280, r = typeof window < "u" ? window.innerHeight : 800;
   let d = e.clientX, n = e.clientY;
   return d + e.menuWidth > t && (d = Math.max(0, t - e.menuWidth - 8)), n + e.menuHeight > r && (n = Math.max(0, r - e.menuHeight - 8)), { left: d, top: n };
 }
-function O(e) {
+function K(e) {
   return e.reduce((t, r) => Math.max(t, r.z_index), 1);
 }
-function X(e, t, r, d) {
-  const n = e.filter((c) => d[c.type]);
+function U(e, t, r, d) {
+  const n = e.filter((o) => d[o.type]);
   if (n.length === 0) return null;
   if (!t) return n[0] ?? null;
-  const o = n.find((c) => c.id === t);
-  if (!o) return n[0] ?? null;
-  const a = o.x + o.width / 2, i = o.y + o.height / 2;
-  let h = null, f = 1 / 0;
-  for (const c of n) {
-    if (c.id === t) continue;
-    const s = c.x + c.width / 2 - a, l = c.y + c.height / 2 - i;
-    let u = !1;
+  const a = n.find((o) => o.id === t);
+  if (!a) return n[0] ?? null;
+  const c = a.x + a.width / 2, i = a.y + a.height / 2;
+  let h = null, m = 1 / 0;
+  for (const o of n) {
+    if (o.id === t) continue;
+    const s = o.x + o.width / 2 - c, l = o.y + o.height / 2 - i;
+    let f = !1;
     switch (r) {
       case "up":
-        u = l < -10;
+        f = l < -10;
         break;
       case "down":
-        u = l > 10;
+        f = l > 10;
         break;
       case "left":
-        u = s < -10;
+        f = s < -10;
         break;
       case "right":
-        u = s > 10;
+        f = s > 10;
         break;
     }
-    if (!u) continue;
-    const b = Math.sqrt(s * s + l * l), W = Math.atan2(
+    if (!f) continue;
+    const M = Math.sqrt(s * s + l * l), S = Math.atan2(
       Math.abs(r === "up" || r === "down" ? s : l),
       Math.abs(r === "up" || r === "down" ? l : s)
-    ), y = b * (1 + W * 1.5);
-    y < f && (f = y, h = c);
+    ), x = M * (1 + S * 1.5);
+    x < m && (m = x, h = o);
   }
   return h;
 }
-function U(e, t = 0.45, r = 2.2) {
+function b(e, t = u, r = g) {
   return Math.max(t, Math.min(r, e));
 }
-function A(e, t = 0) {
+function L(e, t = 0) {
   return 16 + Math.max(1, e) * 32 + Math.max(0, t) * 9;
 }
 export {
-  C as WORKBENCH_CANVAS_ZOOM_STEP,
-  E as WORKBENCH_CONTEXT_MENU_WIDTH_PX,
-  U as clampScale,
-  T as createContextMenuPosition,
-  S as createDefaultWorkbenchState,
-  v as createWorkbenchId,
-  p as createWorkbenchProjectedRect,
-  R as createWorkbenchRenderLayerMap,
-  H as createWorkbenchWidgetSurfaceMetrics,
-  A as estimateContextMenuHeight,
-  X as findNearestWidget,
-  O as getTopZIndex,
-  I as resolveWorkbenchWidgetRenderMode,
-  k as sanitizeFilters,
-  M as sanitizeViewport,
-  D as sanitizeWorkbenchState
+  P as WORKBENCH_CANVAS_ZOOM_STEP,
+  A as WORKBENCH_CONTEXT_MENU_WIDTH_PX,
+  g as WORKBENCH_MAX_SCALE,
+  u as WORKBENCH_MIN_SCALE,
+  z as WORKBENCH_VIEWPORT_FIT_PADDING_PX,
+  b as clampScale,
+  B as createContextMenuPosition,
+  I as createDefaultWorkbenchState,
+  D as createWorkbenchId,
+  N as createWorkbenchProjectedRect,
+  V as createWorkbenchRenderLayerMap,
+  v as createWorkbenchViewportCenteredOnWidget,
+  X as createWorkbenchViewportFitForWidget,
+  R as createWorkbenchWidgetSurfaceMetrics,
+  L as estimateContextMenuHeight,
+  U as findNearestWidget,
+  K as getTopZIndex,
+  O as resolveWorkbenchWidgetRenderMode,
+  F as sanitizeFilters,
+  H as sanitizeViewport,
+  T as sanitizeWorkbenchState
 };

package/dist/workbench.js

@@ -1,27 +1,29 @@
-import { DEFAULT_WORKBENCH_VIEWPORT as o, WORKBENCH_WIDGET_TYPES as t } from "./components/workbench/types.js";
-import { WIDGET_REGISTRY as W, createWorkbenchFilterState as n, getWidgetEntry as a, isValidWorkbenchWidgetType as b, resolveWorkbenchWidgetDefinitions as h } from "./components/workbench/widgets/widgetRegistry.js";
+import { DEFAULT_WORKBENCH_VIEWPORT as t, WORKBENCH_WIDGET_TYPES as o } from "./components/workbench/types.js";
+import { WIDGET_REGISTRY as W, createWorkbenchFilterState as n, getWidgetEntry as a, isValidWorkbenchWidgetType as i, resolveWorkbenchWidgetDefinitions as b } from "./components/workbench/widgets/widgetRegistry.js";
 import { WorkbenchContextMenu as k } from "./components/workbench/WorkbenchContextMenu.js";
 import { WorkbenchOverlay as f } from "./components/workbench/WorkbenchOverlay.js";
 import { WorkbenchSurface as E } from "./components/workbench/WorkbenchSurface.js";
-import { createDefaultWorkbenchState as R, createWorkbenchId as l, createWorkbenchProjectedRect as m, createWorkbenchRenderLayerMap as s, createWorkbenchWidgetSurfaceMetrics as S, resolveWorkbenchWidgetRenderMode as T, sanitizeWorkbenchState as g } from "./components/workbench/workbenchHelpers.js";
-import { useWorkbenchModel as D } from "./components/workbench/useWorkbenchModel.js";
+import { createDefaultWorkbenchState as x, createWorkbenchId as R, createWorkbenchProjectedRect as l, createWorkbenchRenderLayerMap as m, createWorkbenchViewportCenteredOnWidget as s, createWorkbenchViewportFitForWidget as S, createWorkbenchWidgetSurfaceMetrics as T, resolveWorkbenchWidgetRenderMode as u, sanitizeWorkbenchState as D } from "./components/workbench/workbenchHelpers.js";
+import { useWorkbenchModel as M } from "./components/workbench/useWorkbenchModel.js";
 export {
-  o as DEFAULT_WORKBENCH_VIEWPORT,
+  t as DEFAULT_WORKBENCH_VIEWPORT,
   W as WIDGET_REGISTRY,
-  t as WORKBENCH_WIDGET_TYPES,
+  o as WORKBENCH_WIDGET_TYPES,
   k as WorkbenchContextMenu,
   f as WorkbenchOverlay,
   E as WorkbenchSurface,
-  R as createDefaultWorkbenchState,
+  x as createDefaultWorkbenchState,
   n as createWorkbenchFilterState,
-  l as createWorkbenchId,
-  m as createWorkbenchProjectedRect,
-  s as createWorkbenchRenderLayerMap,
-  S as createWorkbenchWidgetSurfaceMetrics,
+  R as createWorkbenchId,
+  l as createWorkbenchProjectedRect,
+  m as createWorkbenchRenderLayerMap,
+  s as createWorkbenchViewportCenteredOnWidget,
+  S as createWorkbenchViewportFitForWidget,
+  T as createWorkbenchWidgetSurfaceMetrics,
   a as getWidgetEntry,
-  b as isValidWorkbenchWidgetType,
-  h as resolveWorkbenchWidgetDefinitions,
-  T as resolveWorkbenchWidgetRenderMode,
-  g as sanitizeWorkbenchState,
-  D as useWorkbenchModel
+  i as isValidWorkbenchWidgetType,
+  b as resolveWorkbenchWidgetDefinitions,
+  u as resolveWorkbenchWidgetRenderMode,
+  D as sanitizeWorkbenchState,
+  M as useWorkbenchModel
 };

package/package.json

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