@floegence/floe-webapp-core 0.36.27 → 0.36.30

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

@@ -5,6 +5,7 @@ export type BuiltinWorkbenchWidgetType = 'terminal' | 'file-browser' | 'system-m
 export type WorkbenchWidgetType = BuiltinWorkbenchWidgetType | (string & {});
 export declare const WORKBENCH_WIDGET_TYPES: readonly WorkbenchWidgetType[];
 export type WorkbenchWidgetRenderMode = 'canvas_scaled' | 'projected_surface';
+export type WorkbenchProjectedSurfaceScaleBehavior = 'stable_transform' | 'settle_sharp_zoom';
 export type WorkbenchCanvasOwnerReason = 'initial' | 'background_pointer' | 'background_focus' | 'selection_cleared' | (string & {});
 export type WorkbenchWidgetOwnerReason = 'pointer' | 'focus' | 'activation' | (string & {});
 export type WorkbenchInputOwner = {
@@ -112,6 +113,7 @@ export interface WorkbenchWidgetDefinition<TWidgetType extends string = Workbenc
     group?: string;
     singleton?: boolean;
     renderMode?: WorkbenchWidgetRenderMode;
+    projectedSurfaceScaleBehavior?: WorkbenchProjectedSurfaceScaleBehavior;
 }
 export interface WorkbenchWidgetItem<TWidgetType extends string = WorkbenchWidgetType> {
     id: string;

package/dist/components/workbench/useWorkbenchModel.js

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

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

@@ -1,6 +1,7 @@
-import { type WorkbenchProjectedRect, type WorkbenchState, type WorkbenchViewport, type WorkbenchWidgetDefinition, type WorkbenchWidgetItem, type WorkbenchWidgetRenderMode, type WorkbenchWidgetSurfaceMetrics, type WorkbenchWidgetType } from './types';
+import { type WorkbenchProjectedSurfaceScaleBehavior, 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 declare function resolveWorkbenchProjectedSurfaceScaleBehavior(definition: WorkbenchWidgetDefinition): WorkbenchProjectedSurfaceScaleBehavior;
 export interface CreateWorkbenchProjectedRectInput {
     widgetId: string;
     worldX: number;