@floegence/floe-webapp-core 0.36.19 → 0.36.21

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

@@ -1,4 +1,4 @@
-import { type JSX } from 'solid-js';
+import { type Accessor, type JSX } from 'solid-js';
 import { type SurfaceInteractionTargetRole, type SurfaceWheelRoutingDecision } from './localInteractionSurface';
 export interface InfiniteCanvasPoint {
     x: number;
@@ -15,7 +15,7 @@ export interface InfiniteCanvasContextMenuEvent {
 }
 export interface InfiniteCanvasProps {
     children: JSX.Element;
-    overlay?: (viewport: InfiniteCanvasPoint) => JSX.Element;
+    overlay?: (viewport: Accessor<InfiniteCanvasPoint>) => JSX.Element;
     viewport: InfiniteCanvasPoint;
     onViewportChange?: (viewport: InfiniteCanvasPoint) => void;
     onViewportInteractionStart?: (kind: 'wheel' | 'pan') => void;

package/dist/components/ui/InfiniteCanvas.js

@@ -1,37 +1,37 @@
-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 { spread as B, mergeProps as j, insert as _, effect as q, className as G, setStyleProperty as J, template as K, use as Q } from "solid-js/web";
+import { createSignal as T, untrack as L, createMemo as ee, createEffect as A, onCleanup as I } from "solid-js";
 import { cn as D } from "../../utils/cn.js";
 import { startHotInteraction as R } 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 x, localToCanvasWorld as re, createViewportFromZoomAnchor as oe } from "./canvasGeometry.js";
-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"]', Y = 3;
-function de(t, a, f) {
+import { resolveSurfaceInteractionTargetRole as te, resolveSurfaceWheelRouting as ne, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as re } from "./localInteractionSurface.js";
+import { startPointerSession as oe } from "./pointerSession.js";
+import { clientToCanvasLocal as x, localToCanvasWorld as ae, createViewportFromZoomAnchor as ie } from "./canvasGeometry.js";
+import { SURFACE_PORTAL_LAYER_ATTR as ce } from "./dialogSurfaceScope.js";
+var le = /* @__PURE__ */ K('<div><div style="transform-origin:0 0">');
+const se = 1, ue = 0.45, fe = 2.2, de = 14e-4, me = '[data-floe-canvas-pan-surface="true"]', Y = 3;
+function Se(t, a, f) {
   return Math.max(a, Math.min(f, t));
 }
 function b(t) {
   return {
     x: Number.isFinite(t.x) ? t.x : 0,
     y: Number.isFinite(t.y) ? t.y : 0,
-    scale: Number.isFinite(t.scale) && t.scale > 0 ? t.scale : ce
+    scale: Number.isFinite(t.scale) && t.scale > 0 ? t.scale : se
   };
 }
-function me(t, a) {
+function ve(t, a) {
   return t.deltaMode === 1 ? t.deltaY * 16 : t.deltaMode === 2 ? t.deltaY * (a?.clientHeight ?? window.innerHeight) : t.deltaY;
 }
-function Pe(t) {
+function Te(t) {
   const [a, f] = T(L(() => b(t.viewport))), [S, v] = 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 M = () => t.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => t.panSurfaceSelector ?? me, y = () => t.wheelInteractiveSelector ?? re, F = () => t.minScale ?? ue, V = () => t.maxScale ?? fe, k = () => t.wheelZoomSpeed ?? de, N = () => {
     const e = S();
     return e ? e.startedFromPanSurface ? e.moved : !0 : !1;
-  }, w = () => {
+  }, U = ee(() => t.overlay?.(a)), w = () => {
     d !== void 0 && (window.clearTimeout(d), d = void 0);
   }, g = () => {
     m = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
-  }, U = () => {
+  }, W = () => {
     if (typeof window > "u") {
       m = !1;
       return;
@@ -41,7 +41,7 @@ function Pe(t) {
     }, 0);
   }, C = (e) => {
     L(() => t.onViewportChange?.(e));
-  }, W = (e) => {
+  }, Z = (e) => {
     if (typeof window > "u") {
       C(e);
       return;
@@ -49,16 +49,16 @@ function Pe(t) {
     w(), d = window.setTimeout(() => {
       d = void 0, C(e);
     }, 90);
-  }, h = (e) => (t.resolveTargetRole ?? Q)({
+  }, h = (e) => (t.resolveTargetRole ?? te)({
     target: e,
     interactiveSelector: M(),
     panSurfaceSelector: X()
-  }), Z = () => {
+  }), H = () => {
     const e = S();
     if (!e) return;
     e.stopInteraction?.();
     const n = a();
-    v(null), s = void 0, e.startedFromPanSurface && e.moved && (m = !0, U()), C(n);
+    v(null), s = void 0, e.startedFromPanSurface && e.moved && (m = !0, W()), C(n);
   };
   A(() => {
     S() || f(b(t.viewport));
@@ -79,7 +79,7 @@ function Pe(t) {
       commit: !0
     }), s = void 0, g();
   });
-  const H = (e) => {
+  const O = (e) => {
     if (e.button !== 0) return;
     const n = h(e.target);
     if (n === "canvas" && t.onCanvasPointerDown?.(e), t.disablePanZoom) return;
@@ -98,16 +98,16 @@ function Pe(t) {
         kind: "drag",
         cursor: "grabbing"
       })
-    }), s = ne({
+    }), s = oe({
       pointerEvent: e,
       captureEl: i ?? null,
       capturePointer: !r,
-      onMove: O,
+      onMove: $,
       onEnd: () => {
-        Z();
+        H();
       }
     }));
-  }, O = (e) => {
+  }, $ = (e) => {
     const n = S();
     if (!n || n.pointerId !== e.pointerId) return;
     const r = e.clientX - n.startClientX, o = e.clientY - n.startClientY;
@@ -128,24 +128,24 @@ function Pe(t) {
     }), f(u);
   }, E = (e) => {
     const n = i?.getBoundingClientRect();
-    if (!n || (t.resolveWheelRouting ?? ee)({
+    if (!n || (t.resolveWheelRouting ?? ne)({
       target: e.target,
       disablePanZoom: !!t.disablePanZoom,
-      wheelInteractiveSelector: F()
+      wheelInteractiveSelector: y()
     }).kind !== "canvas_zoom") return;
     e.preventDefault(), t.onViewportInteractionStart?.("wheel");
     const o = a(), c = x(n, {
       clientX: e.clientX,
       clientY: e.clientY
-    }), u = me(e, i), p = de(o.scale * Math.exp(-u * k()), V(), y());
+    }), u = ve(e, i), p = Se(o.scale * Math.exp(-u * k()), F(), V());
     if (Math.abs(p - o.scale) < 1e-4) return;
-    const P = oe({
+    const P = ie({
       viewport: o,
       localPoint: c,
       nextScale: p
     });
-    f(P), W(P);
-  }, $ = (e) => {
+    f(P), Z(P);
+  }, z = (e) => {
     if (h(e.target) !== "canvas") return;
     const n = i?.getBoundingClientRect();
     if (!n) return;
@@ -153,7 +153,7 @@ function Pe(t) {
     const r = x(n, {
       clientX: e.clientX,
       clientY: e.clientY
-    }), o = a(), c = re(o, r);
+    }), o = a(), c = ae(o, r);
     t.onCanvasContextMenu?.({
       clientX: e.clientX,
       clientY: e.clientY,
@@ -164,22 +164,22 @@ function Pe(t) {
     });
   };
   return (() => {
-    var e = ie(), n = e.firstChild, r = i;
-    return typeof r == "function" ? K(r, e) : i = e, z(e, B({
+    var e = le(), n = e.firstChild, r = i;
+    return typeof r == "function" ? Q(r, e) : i = e, B(e, j({
       get class() {
         return D("floe-infinite-canvas", N() && "is-panning", t.disablePanZoom && "is-locked", t.class);
       }
     }, {
-      [ae]: "true"
+      [ce]: "true"
     }, {
-      onPointerDown: H,
-      onContextMenu: $,
+      onPointerDown: O,
+      onContextMenu: z,
       get "aria-label"() {
         return t.ariaLabel ?? "Infinite canvas";
       }
-    }), !1, !0), _(n, () => t.children), _(e, () => t.overlay?.(a()), null), j((o) => {
+    }), !1, !0), _(n, () => t.children), _(e, U, null), q((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;
+      return c !== o.e && G(n, o.e = c), u !== o.t && J(n, "transform", o.t = u), o;
     }, {
       e: void 0,
       t: void 0
@@ -187,5 +187,5 @@ function Pe(t) {
   })();
 }
 export {
-  Pe as InfiniteCanvas
+  Te as InfiniteCanvas
 };

package/dist/components/workbench/WorkbenchCanvas.js

@@ -53,7 +53,7 @@ function q(e) {
       return e.renderLayers().topRenderLayer;
     },
     get viewportScale() {
-      return e.projectedViewport.scale;
+      return e.projectedViewport().scale;
     },
     get locked() {
       return e.locked;

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

@@ -1,4 +1,4 @@
-import { type JSX } from 'solid-js';
+import { type Accessor, type JSX } from 'solid-js';
 import { type ResolvedWorkbenchInteractionAdapter } from './workbenchInteractionAdapter';
 import type { WorkbenchViewport, WorkbenchInteractionAdapter, WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetRenderMode, WorkbenchWidgetType } from './types';
 export interface WorkbenchWidgetProps {
@@ -19,7 +19,7 @@ export interface WorkbenchWidgetProps {
     locked: boolean;
     filtered: boolean;
     layoutMode?: WorkbenchWidgetRenderMode;
-    projectedViewport?: WorkbenchViewport;
+    projectedViewport?: Accessor<WorkbenchViewport>;
     surfaceReady?: boolean;
     interactionAdapter?: WorkbenchInteractionAdapter | ResolvedWorkbenchInteractionAdapter;
     onSelect: (widgetId: string) => void;

package/dist/components/workbench/WorkbenchWidget.js

@@ -1,18 +1,18 @@
-import { spread as F, mergeProps as nt, insert as l, createComponent as c, memo as at, template as B, use as rt, delegateEvents as dt } from "solid-js/web";
-import { createMemo as u, createSignal as W, onCleanup as lt, untrack as f } from "solid-js";
-import { startHotInteraction as ct } from "../../utils/hotInteraction.js";
-import { X as j, Minus as O, Maximize as N, GripVertical as st } from "../icons/index.js";
-import { CANVAS_WHEEL_INTERACTIVE_ATTR as wt, WORKBENCH_WIDGET_SHELL_ATTR as gt, shouldActivateWorkbenchWidgetLocalTarget as ht } from "../ui/localInteractionSurface.js";
-import { startPointerSession as q } from "../ui/pointerSession.js";
-import { createWorkbenchWidgetSurfaceMetrics as ut } from "./workbenchHelpers.js";
-import { resolveWorkbenchInteractionAdapter as ft } from "./workbenchInteractionAdapter.js";
-var _t = /* @__PURE__ */ B('<article class=workbench-widget><header class=workbench-widget__header><span class=workbench-widget__traffic role=group aria-label="Window controls"><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--close"aria-label="Close widget"title="Close widget"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button></span><span class=workbench-widget__badge aria-hidden=true></span><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-dot aria-hidden=true></span><span class=workbench-widget__title></span></div><span class=workbench-widget__window-controls role=group aria-label="Window controls"><button type=button class="workbench-widget__window-control workbench-widget__window-control--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--close"aria-label="Remove widget"title="Remove widget"data-floe-canvas-interactive=true></button></span></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), bt = /* @__PURE__ */ B('<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 mt = 220, vt = 160;
-function Wt(t) {
-  const s = u(() => ft(t.interactionAdapter)), [m, y] = W(null), [v, x] = W(null), [V, Z] = W();
-  let _, b, h;
-  const p = (e, i) => {
-    const r = ct({
+import { spread as F, mergeProps as rt, insert as l, createComponent as c, memo as dt, template as B, use as lt, delegateEvents as ct } from "solid-js/web";
+import { createMemo as u, createSignal as W, onCleanup as st, untrack as f } from "solid-js";
+import { startHotInteraction as wt } from "../../utils/hotInteraction.js";
+import { X as j, Minus as O, Maximize as q, GripVertical as gt } from "../icons/index.js";
+import { CANVAS_WHEEL_INTERACTIVE_ATTR as ht, WORKBENCH_WIDGET_SHELL_ATTR as ut, shouldActivateWorkbenchWidgetLocalTarget as ft } from "../ui/localInteractionSurface.js";
+import { startPointerSession as N } from "../ui/pointerSession.js";
+import { createWorkbenchWidgetSurfaceMetrics as _t } from "./workbenchHelpers.js";
+import { resolveWorkbenchInteractionAdapter as bt } from "./workbenchInteractionAdapter.js";
+var mt = /* @__PURE__ */ B('<article class=workbench-widget><header class=workbench-widget__header><span class=workbench-widget__traffic role=group aria-label="Window controls"><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--close"aria-label="Close widget"title="Close widget"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__traffic-dot workbench-widget__traffic-dot--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button></span><span class=workbench-widget__badge aria-hidden=true></span><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-dot aria-hidden=true></span><span class=workbench-widget__title></span></div><span class=workbench-widget__window-controls role=group aria-label="Window controls"><button type=button class="workbench-widget__window-control workbench-widget__window-control--min"aria-label="Minimize widget to overview"title="Minimize widget to overview"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--max"aria-label="Zoom widget to fit viewport"title="Zoom widget to fit viewport"data-floe-canvas-interactive=true></button><button type=button class="workbench-widget__window-control workbench-widget__window-control--close"aria-label="Remove widget"title="Remove widget"data-floe-canvas-interactive=true></button></span></header><div class=workbench-widget__body data-floe-canvas-interactive=true>'), vt = /* @__PURE__ */ B('<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 $t = 220, St = 160;
+function Rt(t) {
+  const s = u(() => bt(t.interactionAdapter)), [m, y] = W(null), [v, x] = W(null), [V, Z] = W();
+  let _, b, g;
+  const z = (e, i) => {
+    const r = wt({
       kind: e,
       cursor: i
     });
@@ -21,7 +21,7 @@ function Wt(t) {
       d || (d = !0, r(), f(() => t.onLayoutInteractionEnd?.()));
     };
   };
-  lt(() => {
+  st(() => {
     _?.stop({
       reason: "manual_stop",
       commit: !1
@@ -30,24 +30,28 @@ function Wt(t) {
       commit: !1
     }), b = void 0, f(m)?.stopInteraction(), f(v)?.stopInteraction();
   });
-  const z = () => m() !== null, R = () => v() !== null, T = (e) => s().resolveWidgetEventOwnership({
+  const R = () => m() !== null, T = () => v() !== null, G = u(() => t.filtered ? "cold" : t.selected ? "hot" : "warm"), X = (e) => s().resolveWidgetEventOwnership({
     target: e,
-    widgetRoot: h ?? null,
+    widgetRoot: g ?? null,
     interactiveSelector: s().interactiveSelector,
     panSurfaceSelector: s().panSurfaceSelector
-  }), G = (e) => {
+  }), K = () => {
+    t.onSelect(t.widgetId), t.onCommitFront(t.widgetId), g?.focus({
+      preventScroll: !0
+    });
+  }, J = (e) => {
     if (e.button !== 0) return;
     t.onSelect(t.widgetId), t.onCommitFront(t.widgetId);
-    const i = T(e.target);
+    const i = X(e.target);
     if (i === "widget_shell") {
-      h?.focus({
+      g?.focus({
         preventScroll: !0
       });
       return;
     }
-    i === "widget_local" && ht({
+    i === "widget_local" && ft({
       target: e.target,
-      widgetRoot: h ?? null,
+      widgetRoot: g ?? null,
       interactiveSelector: s().interactiveSelector,
       panSurfaceSelector: s().panSurfaceSelector
     }) && Z((r) => ({
@@ -73,34 +77,34 @@ function Wt(t) {
       width: t.width,
       height: t.height
     };
-  }), X = u(() => {
+  }), Y = u(() => {
     if (!(t.layoutMode !== "projected_surface" || !t.projectedViewport))
-      return ut({
+      return _t({
         widgetId: t.widgetId,
         worldX: $().x,
         worldY: $().y,
         worldWidth: S().width,
         worldHeight: S().height,
-        viewport: t.projectedViewport,
+        viewport: t.projectedViewport(),
         ready: t.surfaceReady ?? !0
       });
-  }), K = u(() => {
+  }), Q = u(() => {
     const e = t.itemSnapshot().z_index, i = Number.isFinite(e) ? Math.max(1, Math.min(99, Math.round(e))) : 1;
     return String(i).padStart(2, "0");
-  }), Y = (e) => {
+  }), D = (e) => {
     e.preventDefault(), e.stopPropagation(), t.onRequestOverview(t.itemSnapshot());
-  }, D = (e) => {
-    e.preventDefault(), e.stopPropagation(), t.onRequestFit(t.itemSnapshot());
   }, P = (e) => {
+    e.preventDefault(), e.stopPropagation(), t.onRequestFit(t.itemSnapshot());
+  }, A = (e) => {
     e.preventDefault(), e.stopPropagation(), t.onRequestDelete(t.widgetId);
-  }, J = u(() => {
+  }, U = u(() => {
     const e = {
       width: `${S().width}px`,
       height: `${S().height}px`,
-      "z-index": z() || R() || t.optimisticFront ? `${t.topRenderLayer + 1}` : `${t.renderLayer}`
+      "z-index": R() || T() || t.optimisticFront ? `${t.topRenderLayer + 1}` : `${t.renderLayer}`
     };
     if (t.layoutMode === "projected_surface") {
-      const i = X()?.rect;
+      const i = Y()?.rect;
       return {
         ...e,
         left: `${i?.screenX ?? 0}px`,
@@ -112,7 +116,7 @@ function Wt(t) {
       ...e,
       transform: `translate(${$().x}px, ${$().y}px)`
     };
-  }), Q = (e) => {
+  }), tt = (e) => {
     const i = f(m);
     if (!i) return;
     const r = {
@@ -128,10 +132,10 @@ function Wt(t) {
     e.preventDefault(), e.stopPropagation(), _?.stop({
       reason: "manual_stop",
       commit: !1
-    }), t.onSelect(t.widgetId), h?.focus({
+    }), t.onSelect(t.widgetId), g?.focus({
       preventScroll: !0
     }), t.onStartOptimisticFront(t.widgetId);
-    const i = p("drag", "grabbing"), r = Math.max(t.viewportScale, 1e-3);
+    const i = z("drag", "grabbing"), r = Math.max(t.viewportScale, 1e-3);
     y({
       pointerId: e.pointerId,
       startClientX: e.clientX,
@@ -145,26 +149,26 @@ function Wt(t) {
       stopInteraction: i
     });
     const d = (a) => {
-      y((o) => {
-        if (!o || o.pointerId !== a.pointerId) return o;
-        const g = o.startWorldX + (a.clientX - o.startClientX) / o.scale, w = o.startWorldY + (a.clientY - o.startClientY) / o.scale;
+      y((n) => {
+        if (!n || n.pointerId !== a.pointerId) return n;
+        const h = n.startWorldX + (a.clientX - n.startClientX) / n.scale, w = n.startWorldY + (a.clientY - n.startClientY) / n.scale;
         return {
-          ...o,
-          worldX: g,
+          ...n,
+          worldX: h,
           worldY: w,
-          moved: o.moved || Math.abs(g - o.startWorldX) > 2 || Math.abs(w - o.startWorldY) > 2
+          moved: n.moved || Math.abs(h - n.startWorldX) > 2 || Math.abs(w - n.startWorldY) > 2
         };
       });
     };
-    _ = q({
+    _ = N({
       pointerEvent: e,
       captureEl: e.currentTarget,
       onMove: d,
       onEnd: ({
         commit: a
-      }) => Q(a)
+      }) => tt(a)
     });
-  }, U = (e) => {
+  }, et = (e) => {
     const i = f(v);
     if (!i) return;
     const r = {
@@ -172,13 +176,13 @@ function Wt(t) {
       height: i.height
     }, d = Math.abs(i.width - i.startWidth) > 1 || Math.abs(i.height - i.startHeight) > 1;
     e && d && t.onCommitResize(t.widgetId, r), i.stopInteraction(), x(null), b = void 0;
-  }, tt = (e) => {
+  }, it = (e) => {
     if (e.button !== 0 || t.locked) return;
     e.preventDefault(), e.stopPropagation(), b?.stop({
       reason: "manual_stop",
       commit: !1
     }), t.onStartOptimisticFront(t.widgetId);
-    const i = p("resize", "nwse-resize"), r = Math.max(t.viewportScale, 1e-3);
+    const i = z("resize", "nwse-resize"), r = Math.max(t.viewportScale, 1e-3);
     x({
       pointerId: e.pointerId,
       startClientX: e.clientX,
@@ -191,33 +195,33 @@ function Wt(t) {
       stopInteraction: i
     });
     const d = (a) => {
-      x((o) => {
-        if (!o || o.pointerId !== a.pointerId) return o;
-        const g = Math.max(mt, o.startWidth + (a.clientX - o.startClientX) / o.scale), w = Math.max(vt, o.startHeight + (a.clientY - o.startClientY) / o.scale);
+      x((n) => {
+        if (!n || n.pointerId !== a.pointerId) return n;
+        const h = Math.max($t, n.startWidth + (a.clientX - n.startClientX) / n.scale), w = Math.max(St, n.startHeight + (a.clientY - n.startClientY) / n.scale);
         return {
-          ...o,
-          width: g,
+          ...n,
+          width: h,
           height: w
         };
       });
     };
-    b = q({
+    b = N({
       pointerEvent: e,
       captureEl: e.currentTarget,
       onMove: d,
       onEnd: ({
         commit: a
-      }) => U(a)
+      }) => et(a)
     });
   };
   return (() => {
-    var e = _t(), i = e.firstChild, r = i.firstChild, d = r.firstChild, a = d.nextSibling, o = a.nextSibling, g = r.nextSibling, w = g.nextSibling, M = w.nextSibling, et = M.firstChild, A = et.nextSibling, it = M.nextSibling, k = it.firstChild, I = k.nextSibling, C = I.nextSibling, ot = i.nextSibling, L = h;
-    return typeof L == "function" ? rt(L, e) : h = e, F(e, nt({
+    var e = mt(), i = e.firstChild, r = i.firstChild, d = r.firstChild, a = d.nextSibling, n = a.nextSibling, h = r.nextSibling, w = h.nextSibling, M = w.nextSibling, nt = M.firstChild, L = nt.nextSibling, ot = M.nextSibling, k = ot.firstChild, I = k.nextSibling, C = I.nextSibling, at = i.nextSibling, H = g;
+    return typeof H == "function" ? lt(H, e) : g = e, F(e, rt({
       get classList() {
         return {
           "is-selected": t.selected,
-          "is-dragging": z(),
-          "is-resizing": R(),
+          "is-dragging": R(),
+          "is-resizing": T(),
           "is-filtered-out": t.filtered,
           "is-projected-surface": t.layoutMode === "projected_surface",
           "is-locked": t.locked
@@ -241,49 +245,49 @@ function Wt(t) {
         return t.layoutMode ?? "canvas_scaled";
       }
     }, () => ({
-      [wt]: t.selected ? "true" : void 0
+      [ht]: t.selected ? "true" : void 0
     }), {
       tabIndex: 0,
-      onPointerDown: G,
+      onPointerDown: J,
       onFocus: () => {
         t.onSelect(t.widgetId);
       },
-      onContextMenu: (n) => {
-        T(n.target) === "widget_shell" && (n.preventDefault(), n.stopPropagation(), t.onContextMenu(n, t.itemSnapshot()));
+      onContextMenu: (o) => {
+        X(o.target) === "widget_shell" && (o.preventDefault(), o.stopPropagation(), t.onContextMenu(o, t.itemSnapshot()));
       },
       get style() {
-        return J();
+        return U();
       }
     }), !1, !0), i.$$pointerdown = E, F(i, {
-      [gt]: "true"
-    }, !1, !0), d.$$click = P, d.$$pointerdown = (n) => n.stopPropagation(), l(d, c(j, {
+      [ut]: "true"
+    }, !1, !0), d.$$click = A, d.$$pointerdown = (o) => o.stopPropagation(), l(d, c(j, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), a.$$click = Y, a.$$pointerdown = (n) => n.stopPropagation(), l(a, c(O, {
+    })), a.$$click = D, a.$$pointerdown = (o) => o.stopPropagation(), l(a, c(O, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), o.$$click = D, o.$$pointerdown = (n) => n.stopPropagation(), l(o, c(N, {
+    })), n.$$click = P, n.$$pointerdown = (o) => o.stopPropagation(), l(n, c(q, {
       class: "workbench-widget__traffic-icon",
       "aria-hidden": "true"
-    })), l(g, K), w.$$pointerdown = E, l(w, c(st, {
+    })), l(h, Q), w.$$pointerdown = E, l(w, c(gt, {
       class: "w-3.5 h-3.5"
     })), l(M, () => {
-      const n = t.definition.icon;
-      return c(n, {
+      const o = t.definition.icon;
+      return c(o, {
         class: "w-3.5 h-3.5"
       });
-    }, A), l(A, () => t.widgetTitle), k.$$click = Y, k.$$pointerdown = (n) => n.stopPropagation(), l(k, c(O, {
+    }, L), l(L, () => t.widgetTitle), k.$$click = D, k.$$pointerdown = (o) => o.stopPropagation(), l(k, c(O, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), I.$$click = D, I.$$pointerdown = (n) => n.stopPropagation(), l(I, c(N, {
+    })), I.$$click = P, I.$$pointerdown = (o) => o.stopPropagation(), l(I, c(q, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), C.$$click = P, C.$$pointerdown = (n) => n.stopPropagation(), l(C, c(j, {
+    })), C.$$click = A, C.$$pointerdown = (o) => o.stopPropagation(), l(C, c(j, {
       class: "workbench-widget__window-control-icon",
       "aria-hidden": "true"
-    })), l(ot, () => {
-      const n = t.definition.body;
-      return c(n, {
+    })), l(at, () => {
+      const o = t.definition.body;
+      return c(o, {
         get widgetId() {
           return t.widgetId;
         },
@@ -293,23 +297,31 @@ function Wt(t) {
         get type() {
           return t.widgetType;
         },
-        get surfaceMetrics() {
-          return X();
-        },
+        surfaceMetrics: Y,
         get activation() {
           return V();
-        }
+        },
+        get lifecycle() {
+          return G();
+        },
+        get selected() {
+          return t.selected;
+        },
+        get filtered() {
+          return t.filtered;
+        },
+        requestActivate: K
       });
     }), l(e, (() => {
-      var n = at(() => !!t.locked);
-      return () => n() ? null : (() => {
-        var H = bt();
-        return H.$$pointerdown = tt, H;
+      var o = dt(() => !!t.locked);
+      return () => o() ? null : (() => {
+        var p = vt();
+        return p.$$pointerdown = it, p;
       })();
     })(), null), e;
   })();
 }
-dt(["pointerdown", "click"]);
+ct(["pointerdown", "click"]);
 export {
-  Wt as WorkbenchWidget
+  Rt as WorkbenchWidget
 };

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

@@ -1,4 +1,4 @@
-import type { Component } from 'solid-js';
+import type { Accessor, Component } from 'solid-js';
 import type { WorkbenchThemeId } from './workbenchThemes';
 import type { SurfaceInteractionTargetRole, SurfaceWheelLocalReason, WorkbenchWidgetEventOwnership } from '../ui/localInteractionSurface';
 export type BuiltinWorkbenchWidgetType = 'terminal' | 'file-browser' | 'system-monitor' | 'log-viewer' | 'code-editor';
@@ -85,12 +85,17 @@ export interface WorkbenchWidgetBodyActivation {
     source: WorkbenchWidgetBodyActivationSource;
     pointerType?: string;
 }
+export type WorkbenchWidgetLifecycle = 'hot' | 'warm' | 'cold';
 export interface WorkbenchWidgetBodyProps<TWidgetType extends string = WorkbenchWidgetType> {
     widgetId: string;
     title: string;
     type: TWidgetType;
-    surfaceMetrics?: WorkbenchWidgetSurfaceMetrics;
+    surfaceMetrics?: Accessor<WorkbenchWidgetSurfaceMetrics | undefined>;
     activation?: WorkbenchWidgetBodyActivation;
+    lifecycle?: WorkbenchWidgetLifecycle;
+    selected?: boolean;
+    filtered?: boolean;
+    requestActivate?: () => void;
 }
 export interface WorkbenchWidgetDefinition<TWidgetType extends string = WorkbenchWidgetType> {
     type: TWidgetType;

package/package.json

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