@floegence/floe-webapp-core 0.36.1 → 0.36.3

package/dist/components/ui/InfiniteCanvas.js

@@ -1,34 +1,34 @@
-import { insert as q, effect as G, className as T, setAttribute as J, setStyleProperty as K, template as Q, use as ee, delegateEvents as te } from "solid-js/web";
-import { createSignal as D, untrack as L, createEffect as b, onCleanup as y } from "solid-js";
-import { cn as Y } from "../../utils/cn.js";
-import { isTypingElement as _ } from "../../utils/dom.js";
-import { startHotInteraction as A } from "../../utils/hotInteraction.js";
-var ne = /* @__PURE__ */ Q('<div><div style="transform-origin:0 0">');
-const re = 1, ie = 0.45, oe = 2.2, ae = 14e-4, ce = '[data-floe-canvas-pan-surface="true"]', M = 3;
-function le(n, a, d) {
-  return Math.max(a, Math.min(d, n));
+import { insert as j, effect as q, className as I, setAttribute as G, setStyleProperty as J, template as K, use as Q, delegateEvents as ee } from "solid-js/web";
+import { createSignal as T, untrack as L, createEffect as _, onCleanup as b } from "solid-js";
+import { cn as D } from "../../utils/cn.js";
+import { startHotInteraction as Y } from "../../utils/hotInteraction.js";
+import { resolveSurfaceInteractionTargetRole as te } from "./localInteractionSurface.js";
+var ne = /* @__PURE__ */ K('<div><div style="transform-origin:0 0">');
+const re = 1, oe = 0.45, ae = 2.2, ie = 14e-4, ce = '[data-floe-canvas-pan-surface="true"]', y = 3;
+function le(n, i, d) {
+  return Math.max(i, Math.min(d, n));
 }
-function X(n) {
+function A(n) {
   return {
     x: Number.isFinite(n.x) ? n.x : 0,
     y: Number.isFinite(n.y) ? n.y : 0,
     scale: Number.isFinite(n.scale) && n.scale > 0 ? n.scale : re
   };
 }
-function se(n, a) {
-  return n.deltaMode === 1 ? n.deltaY * 16 : n.deltaMode === 2 ? n.deltaY * (a?.clientHeight ?? window.innerHeight) : n.deltaY;
+function se(n, i) {
+  return n.deltaMode === 1 ? n.deltaY * 16 : n.deltaMode === 2 ? n.deltaY * (i?.clientHeight ?? window.innerHeight) : n.deltaY;
 }
-function we(n) {
-  const [a, d] = D(L(() => X(n.viewport))), [p, S] = D(null);
-  let o, f, m = !1, l;
-  const F = () => n.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', k = () => n.panSurfaceSelector ?? ce, $ = () => n.minScale ?? ie, V = () => n.maxScale ?? oe, R = () => n.wheelZoomSpeed ?? ae, N = () => {
+function ve(n) {
+  const [i, d] = T(L(() => A(n.viewport))), [p, w] = T(null);
+  let a, f, m = !1, l;
+  const M = () => n.interactiveSelector ?? '[data-floe-canvas-interactive="true"]', X = () => n.panSurfaceSelector ?? ce, R = () => n.minScale ?? oe, F = () => n.maxScale ?? ae, k = () => n.wheelZoomSpeed ?? ie, $ = () => {
     const e = p();
     return e ? e.startedFromPanSurface ? e.moved : !0 : !1;
-  }, v = () => {
-    f !== void 0 && (window.clearTimeout(f), f = void 0);
   }, C = () => {
+    f !== void 0 && (window.clearTimeout(f), f = void 0);
+  }, g = () => {
     m = !1, l !== void 0 && (window.clearTimeout(l), l = void 0);
-  }, U = () => {
+  }, V = () => {
     if (typeof window > "u") {
       m = !1;
       return;
@@ -38,113 +38,116 @@ function we(n) {
     }, 0);
   }, h = (e) => {
     L(() => n.onViewportChange?.(e));
-  }, H = (e) => {
+  }, N = (e) => {
     if (typeof window > "u") {
       h(e);
       return;
     }
-    v(), f = window.setTimeout(() => {
+    C(), f = window.setTimeout(() => {
       f = void 0, h(e);
     }, 90);
-  }, E = (e) => e instanceof Element ? e.closest(F()) ? !0 : _(e) : !1, P = (e) => e instanceof Element ? e.closest(k()) !== null : !1, g = (e) => {
+  }, v = (e) => te({
+    target: e,
+    interactiveSelector: M(),
+    panSurfaceSelector: X()
+  }), P = (e) => {
     const t = p();
     if (!t || e !== void 0 && t.pointerId !== e) return;
     t.stopInteraction?.();
-    const r = a();
-    S(null), o && o.hasPointerCapture(t.pointerId) && o.releasePointerCapture(t.pointerId), t.startedFromPanSurface && t.moved && (m = !0, U()), h(r);
+    const r = i();
+    w(null), a && a.hasPointerCapture(t.pointerId) && a.releasePointerCapture(t.pointerId), t.startedFromPanSurface && t.moved && (m = !0, V()), h(r);
   };
-  b(() => {
-    p() || d(X(n.viewport));
-  }), b(() => {
-    const e = o;
+  _(() => {
+    p() || d(A(n.viewport));
+  }), _(() => {
+    const e = a;
     if (!e) return;
     const t = (r) => {
-      !m || !P(r.target) || (C(), r.preventDefault(), r.stopPropagation());
+      !m || v(r.target) !== "pan_surface" || (g(), r.preventDefault(), r.stopPropagation());
     };
     e.addEventListener("click", t, !0), e.addEventListener("wheel", x, {
       passive: !1
-    }), y(() => {
+    }), b(() => {
       e.removeEventListener("click", t, !0), e.removeEventListener("wheel", x);
     });
-  }), y(() => {
-    v(), g(), C();
+  }), b(() => {
+    C(), P(), g();
   });
-  const Z = (e) => {
-    if (e.button !== 0 || _(e.target) || n.disablePanZoom) return;
-    const t = P(e.target);
-    E(e.target) && !t || (v(), C(), t || (e.preventDefault(), o?.setPointerCapture(e.pointerId)), S({
+  const U = (e) => {
+    if (e.button !== 0 || n.disablePanZoom) return;
+    const t = v(e.target), r = t === "pan_surface";
+    t !== "local_surface" && (C(), g(), r || (e.preventDefault(), a?.setPointerCapture(e.pointerId)), w({
       pointerId: e.pointerId,
       startClientX: e.clientX,
       startClientY: e.clientY,
-      startViewport: a(),
+      startViewport: i(),
       moved: !1,
-      startedFromPanSurface: t,
-      stopInteraction: t ? void 0 : A({
+      startedFromPanSurface: r,
+      stopInteraction: r ? void 0 : Y({
         kind: "drag",
         cursor: "grabbing"
       })
     }));
-  }, O = (e) => {
+  }, H = (e) => {
     const t = p();
     if (!t || t.pointerId !== e.pointerId) return;
-    const r = e.clientX - t.startClientX, i = e.clientY - t.startClientY;
-    if (!(t.moved || Math.abs(r) > M || Math.abs(i) > M)) return;
-    t.moved || (e.preventDefault(), o?.hasPointerCapture(e.pointerId) || o?.setPointerCapture(e.pointerId));
-    const u = {
+    const r = e.clientX - t.startClientX, o = e.clientY - t.startClientY;
+    if (!(t.moved || Math.abs(r) > y || Math.abs(o) > y)) return;
+    t.moved || (e.preventDefault(), a?.hasPointerCapture(e.pointerId) || a?.setPointerCapture(e.pointerId));
+    const s = {
       ...t.startViewport,
       x: t.startViewport.x + r,
-      y: t.startViewport.y + i
+      y: t.startViewport.y + o
     };
-    t.moved || S({
+    t.moved || w({
       ...t,
       moved: !0,
-      stopInteraction: t.stopInteraction ?? A({
+      stopInteraction: t.stopInteraction ?? Y({
         kind: "drag",
         cursor: "grabbing"
       })
-    }), d(u);
-  }, W = (e) => {
-    g(e.pointerId);
-  }, B = (e) => {
-    g(e.pointerId);
+    }), d(s);
+  }, Z = (e) => {
+    P(e.pointerId);
+  }, O = (e) => {
+    P(e.pointerId);
   }, x = (e) => {
-    const t = o?.getBoundingClientRect();
-    if (!t) return;
-    if (n.disablePanZoom) {
-      e.preventDefault();
+    if (v(e.target) !== "canvas")
+      return;
+    const r = a?.getBoundingClientRect();
+    if (!r || n.disablePanZoom)
       return;
-    }
     e.preventDefault();
-    const r = a(), i = e.clientX - t.left, c = e.clientY - t.top, u = se(e, o), s = le(r.scale * Math.exp(-u * R()), $(), V());
-    if (Math.abs(s - r.scale) < 1e-4) return;
-    const w = (i - r.x) / r.scale, j = (c - r.y) / r.scale, I = {
-      x: i - w * s,
-      y: c - j * s,
-      scale: s
+    const o = i(), c = e.clientX - r.left, s = e.clientY - r.top, S = se(e, a), u = le(o.scale * Math.exp(-S * k()), R(), F());
+    if (Math.abs(u - o.scale) < 1e-4) return;
+    const B = (c - o.x) / o.scale, z = (s - o.y) / o.scale, E = {
+      x: c - B * u,
+      y: s - z * u,
+      scale: u
     };
-    d(I), H(I);
-  }, z = (e) => {
-    if (E(e.target)) return;
-    const t = o?.getBoundingClientRect();
+    d(E), N(E);
+  }, W = (e) => {
+    if (v(e.target) !== "canvas") return;
+    const t = a?.getBoundingClientRect();
     if (!t) return;
     e.preventDefault();
-    const r = e.clientX - t.left, i = e.clientY - t.top, c = a();
+    const r = e.clientX - t.left, o = e.clientY - t.top, c = i();
     n.onCanvasContextMenu?.({
       clientX: e.clientX,
       clientY: e.clientY,
       localX: r,
-      localY: i,
+      localY: o,
       worldX: (r - c.x) / c.scale,
-      worldY: (i - c.y) / c.scale
+      worldY: (o - c.y) / c.scale
     });
   };
   return (() => {
     var e = ne(), t = e.firstChild;
-    e.$$contextmenu = z, e.addEventListener("pointercancel", B), e.$$pointerup = W, e.$$pointermove = O, e.$$pointerdown = Z;
-    var r = o;
-    return typeof r == "function" ? ee(r, e) : o = e, q(t, () => n.children), G((i) => {
-      var c = Y("floe-infinite-canvas", N() && "is-panning", n.disablePanZoom && "is-locked", n.class), u = n.ariaLabel ?? "Infinite canvas", s = Y("floe-infinite-canvas__viewport", n.contentClass), w = `translate(${a().x}px, ${a().y}px) scale(${a().scale})`;
-      return c !== i.e && T(e, i.e = c), u !== i.t && J(e, "aria-label", i.t = u), s !== i.a && T(t, i.a = s), w !== i.o && K(t, "transform", i.o = w), i;
+    e.$$contextmenu = W, e.addEventListener("pointercancel", O), e.$$pointerup = Z, e.$$pointermove = H, e.$$pointerdown = U;
+    var r = a;
+    return typeof r == "function" ? Q(r, e) : a = e, j(t, () => n.children), q((o) => {
+      var c = D("floe-infinite-canvas", $() && "is-panning", n.disablePanZoom && "is-locked", n.class), s = n.ariaLabel ?? "Infinite canvas", S = D("floe-infinite-canvas__viewport", n.contentClass), u = `translate(${i().x}px, ${i().y}px) scale(${i().scale})`;
+      return c !== o.e && I(e, o.e = c), s !== o.t && G(e, "aria-label", o.t = s), S !== o.a && I(t, o.a = S), u !== o.o && J(t, "transform", o.o = u), o;
     }, {
       e: void 0,
       t: void 0,
@@ -153,7 +156,7 @@ function we(n) {
     }), e;
   })();
 }
-te(["pointerdown", "pointermove", "pointerup", "contextmenu"]);
+ee(["pointerdown", "pointermove", "pointerup", "contextmenu"]);
 export {
-  we as InfiniteCanvas
+  ve as InfiniteCanvas
 };

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

@@ -0,0 +1,14 @@
+export declare const DIALOG_SURFACE_HOST_ATTR = "data-floe-dialog-surface-host";
+export declare const DIALOG_SURFACE_BOUNDARY_ATTR = "data-floe-dialog-surface-boundary";
+export type DialogSurfaceInteractionSnapshot = Readonly<{
+    target: Element | null;
+    activeElement: Element | null;
+    recordedAt: number;
+}>;
+export type ResolvedDialogSurfaceHost = Readonly<{
+    host: HTMLElement | null;
+    mode: 'global' | 'surface';
+}>;
+export declare function ensureDialogSurfaceInteractionTracking(): void;
+export declare function resolveDialogSurfaceHost(): ResolvedDialogSurfaceHost;
+export declare function __resetDialogSurfaceScopeForTests(): void;

package/dist/components/ui/dialogSurfaceScope.js

@@ -0,0 +1,45 @@
+const a = "data-floe-dialog-surface-host", m = "data-floe-dialog-surface-boundary";
+let o = null, t = null;
+function d(e) {
+  return typeof Element < "u" && e instanceof Element ? e : typeof Node < "u" && e instanceof Node ? e.parentElement : null;
+}
+function f(e) {
+  const n = e?.activeElement;
+  return n instanceof Element ? n : null;
+}
+function i(e) {
+  const n = typeof document < "u" ? document : null;
+  o = {
+    target: d(e),
+    activeElement: f(n),
+    recordedAt: Date.now()
+  };
+}
+function r(e) {
+  i(e.target);
+}
+function u(e) {
+  i(e.target);
+}
+function l() {
+  typeof document > "u" || t !== document && (t && (t.removeEventListener("pointerdown", r, !0), t.removeEventListener("focusin", u, !0)), document.addEventListener("pointerdown", r, !0), document.addEventListener("focusin", u, !0), t = document);
+}
+function s() {
+  return !o || Date.now() - o.recordedAt > 1600 ? null : o;
+}
+function c(e) {
+  const n = e?.closest(`[${a}="true"]`);
+  return n instanceof HTMLElement && n.isConnected ? n : null;
+}
+function E() {
+  l();
+  const e = s(), n = c(e?.target ?? null) ?? c(e?.activeElement ?? null);
+  return n ? { host: n, mode: "surface" } : { host: null, mode: "global" };
+}
+typeof document < "u" && l();
+export {
+  m as DIALOG_SURFACE_BOUNDARY_ATTR,
+  a as DIALOG_SURFACE_HOST_ATTR,
+  l as ensureDialogSurfaceInteractionTracking,
+  E as resolveDialogSurfaceHost
+};

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

@@ -7,6 +7,7 @@ export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectPro
 export { Tooltip, type TooltipProps } from './Tooltip';
 export { CommandPalette } from './CommandPalette';
 export { InfiniteCanvas, type InfiniteCanvasProps, type InfiniteCanvasPoint, type InfiniteCanvasContextMenuEvent, } from './InfiniteCanvas';
+export { LOCAL_INTERACTION_SURFACE_ATTR, DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR, isLocalInteractionSurfaceTarget, resolveSurfaceInteractionTargetRole, type SurfaceInteractionRoutingOptions, type SurfaceInteractionTargetRole, } from './localInteractionSurface';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Interactive3DCard, AnimatedBorderCard, NeonCard, MorphCard, type CardProps, type CardVariant, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardContentProps, type CardFooterProps, type Interactive3DCardProps, type AnimatedBorderCardProps, type NeonCardProps, type MorphCardProps, } from './Card';
 export { Tabs, TabPanel, type TabsProps, type TabPanelProps, type TabItem, type TabsFeatures, type TabsSlotClassNames, type TabsIndicatorMode, type TabsIndicatorColorToken, } from './Tabs';
 export { DirectoryPicker, type DirectoryPickerProps } from './DirectoryPicker';

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

@@ -0,0 +1,11 @@
+export declare const LOCAL_INTERACTION_SURFACE_ATTR = "data-floe-local-interaction-surface";
+export declare const DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR = "[data-floe-local-interaction-surface=\"true\"]";
+export type SurfaceInteractionTargetRole = 'canvas' | 'local_surface' | 'pan_surface';
+export interface SurfaceInteractionRoutingOptions {
+    target: EventTarget | null;
+    interactiveSelector: string;
+    panSurfaceSelector: string;
+    localInteractionSurfaceSelector?: string;
+}
+export declare function resolveSurfaceInteractionTargetRole(options: SurfaceInteractionRoutingOptions): SurfaceInteractionTargetRole;
+export declare function isLocalInteractionSurfaceTarget(options: SurfaceInteractionRoutingOptions): boolean;

package/dist/components/ui/localInteractionSurface.js

@@ -0,0 +1,20 @@
+import { isTypingElement as l } from "../../utils/dom.js";
+const o = "data-floe-local-interaction-surface", s = `[${o}="true"]`;
+function u(t) {
+  const {
+    target: n,
+    interactiveSelector: r,
+    panSurfaceSelector: c,
+    localInteractionSurfaceSelector: a = s
+  } = t, e = n instanceof Element ? n : null;
+  return e ? e.closest(c) !== null ? "pan_surface" : l(e) || e.closest(r) !== null || e.closest(a) !== null ? "local_surface" : "canvas" : "canvas";
+}
+function f(t) {
+  return u(t) !== "canvas";
+}
+export {
+  s as DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR,
+  o as LOCAL_INTERACTION_SURFACE_ATTR,
+  f as isLocalInteractionSurfaceTarget,
+  u as resolveSurfaceInteractionTargetRole
+};

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,13 +1,11 @@
-import { use as d, insert as a, createComponent as i, effect as l, template as c } from "solid-js/web";
-import { For as g } from "solid-js";
-import { WorkbenchWidget as u } from "./WorkbenchWidget.js";
-import { getWidgetEntry as m } from "./widgets/widgetRegistry.js";
-import { InfiniteCanvas as v } from "../ui/InfiniteCanvas.js";
-var s = /* @__PURE__ */ c("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>"), f = /* @__PURE__ */ c("<div class=workbench-canvas>");
-function b(e) {
+import { use as r, insert as o, createComponent as i, effect as a, template as g } from "solid-js/web";
+import { WorkbenchCanvasField as c } from "./WorkbenchCanvasField.js";
+import { InfiniteCanvas as u } from "../ui/InfiniteCanvas.js";
+var m = /* @__PURE__ */ g("<div class=workbench-canvas>");
+function C(e) {
   return (() => {
-    var t = f(), o = e.setCanvasFrameRef;
-    return typeof o == "function" ? d(o, t) : e.setCanvasFrameRef = t, a(t, i(v, {
+    var t = m(), n = e.setCanvasFrameRef;
+    return typeof n == "function" ? r(n, t) : e.setCanvasFrameRef = t, o(t, i(u, {
       ariaLabel: "Workbench canvas",
       class: "workbench-canvas__infinite",
       get viewport() {
@@ -23,61 +21,57 @@ function b(e) {
         return e.locked;
       },
       get children() {
-        var r = s();
-        return r.firstChild, a(r, i(g, {
-          get each() {
+        return i(c, {
+          get widgetDefinitions() {
+            return e.widgetDefinitions;
+          },
+          get widgets() {
             return e.widgets;
           },
-          children: (n) => i(u, {
-            get definition() {
-              return m(n.type, e.widgetDefinitions);
-            },
-            item: n,
-            get selected() {
-              return e.selectedWidgetId === n.id;
-            },
-            get optimisticFront() {
-              return e.optimisticFrontWidgetId === n.id;
-            },
-            get topZIndex() {
-              return e.topZIndex;
-            },
-            get viewportScale() {
-              return e.viewport.scale;
-            },
-            get locked() {
-              return e.locked;
-            },
-            get filtered() {
-              return !e.filters[n.type];
-            },
-            get onSelect() {
-              return e.onSelectWidget;
-            },
-            get onContextMenu() {
-              return e.onWidgetContextMenu;
-            },
-            get onStartOptimisticFront() {
-              return e.onStartOptimisticFront;
-            },
-            get onCommitFront() {
-              return e.onCommitFront;
-            },
-            get onCommitMove() {
-              return e.onCommitMove;
-            },
-            get onCommitResize() {
-              return e.onCommitResize;
-            },
-            get onRequestDelete() {
-              return e.onRequestDelete;
-            }
-          })
-        }), null), r;
+          get selectedWidgetId() {
+            return e.selectedWidgetId;
+          },
+          get optimisticFrontWidgetId() {
+            return e.optimisticFrontWidgetId;
+          },
+          get topZIndex() {
+            return e.topZIndex;
+          },
+          get viewportScale() {
+            return e.viewport.scale;
+          },
+          get locked() {
+            return e.locked;
+          },
+          get filters() {
+            return e.filters;
+          },
+          get onSelectWidget() {
+            return e.onSelectWidget;
+          },
+          get onWidgetContextMenu() {
+            return e.onWidgetContextMenu;
+          },
+          get onStartOptimisticFront() {
+            return e.onStartOptimisticFront;
+          },
+          get onCommitFront() {
+            return e.onCommitFront;
+          },
+          get onCommitMove() {
+            return e.onCommitMove;
+          },
+          get onCommitResize() {
+            return e.onCommitResize;
+          },
+          get onRequestDelete() {
+            return e.onRequestDelete;
+          }
+        });
       }
-    })), l(() => t.classList.toggle("is-locked", !!e.locked)), t;
+    })), a(() => t.classList.toggle("is-locked", !!e.locked)), t;
   })();
 }
 export {
-  b as WorkbenchCanvas
+  C as WorkbenchCanvas
 };

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

@@ -0,0 +1,25 @@
+import type { WorkbenchWidgetDefinition, WorkbenchWidgetItem, WorkbenchWidgetType } from './types';
+export interface WorkbenchCanvasFieldProps {
+    widgetDefinitions: readonly WorkbenchWidgetDefinition[];
+    widgets: readonly WorkbenchWidgetItem[];
+    selectedWidgetId: string | null;
+    optimisticFrontWidgetId: string | null;
+    topZIndex: number;
+    viewportScale: number;
+    locked: boolean;
+    filters: Record<WorkbenchWidgetType, boolean>;
+    onSelectWidget: (widgetId: string) => void;
+    onWidgetContextMenu: (event: MouseEvent, item: WorkbenchWidgetItem) => void;
+    onStartOptimisticFront: (widgetId: string) => void;
+    onCommitFront: (widgetId: string) => void;
+    onCommitMove: (widgetId: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    onCommitResize: (widgetId: string, size: {
+        width: number;
+        height: number;
+    }) => void;
+    onRequestDelete: (widgetId: string) => void;
+}
+export declare function WorkbenchCanvasField(props: WorkbenchCanvasFieldProps): import("solid-js").JSX.Element;

package/dist/components/workbench/WorkbenchCanvasField.js

@@ -0,0 +1,145 @@
+import { insert as o, createComponent as g, template as u } from "solid-js/web";
+import { createMemo as r, For as m } from "solid-js";
+import { getWidgetEntry as c } from "./widgets/widgetRegistry.js";
+import { WorkbenchWidget as l } from "./WorkbenchWidget.js";
+var a = /* @__PURE__ */ u("<div class=workbench-canvas__field><div class=workbench-canvas__grid aria-hidden=true>");
+function w(t) {
+  const e = r((n) => {
+    const i = t.widgetById().get(t.widgetId);
+    if (i) return i;
+    if (n) return n;
+    throw new Error(`Workbench widget ${t.widgetId} is missing from the render map.`);
+  }), d = r(() => c(e().type, t.widgetDefinitions));
+  return g(l, {
+    get definition() {
+      return d();
+    },
+    get widgetId() {
+      return t.widgetId;
+    },
+    get widgetTitle() {
+      return e().title;
+    },
+    get widgetType() {
+      return e().type;
+    },
+    get x() {
+      return e().x;
+    },
+    get y() {
+      return e().y;
+    },
+    get width() {
+      return e().width;
+    },
+    get height() {
+      return e().height;
+    },
+    get zIndex() {
+      return e().z_index;
+    },
+    itemSnapshot: e,
+    get selected() {
+      return t.selectedWidgetId === t.widgetId;
+    },
+    get optimisticFront() {
+      return t.optimisticFrontWidgetId === t.widgetId;
+    },
+    get topZIndex() {
+      return t.topZIndex;
+    },
+    get viewportScale() {
+      return t.viewportScale;
+    },
+    get locked() {
+      return t.locked;
+    },
+    get filtered() {
+      return !t.filters[e().type];
+    },
+    get onSelect() {
+      return t.onSelectWidget;
+    },
+    get onContextMenu() {
+      return t.onWidgetContextMenu;
+    },
+    get onStartOptimisticFront() {
+      return t.onStartOptimisticFront;
+    },
+    get onCommitFront() {
+      return t.onCommitFront;
+    },
+    get onCommitMove() {
+      return t.onCommitMove;
+    },
+    get onCommitResize() {
+      return t.onCommitResize;
+    },
+    get onRequestDelete() {
+      return t.onRequestDelete;
+    }
+  });
+}
+function W(t) {
+  const e = r(() => t.widgets.map((n) => n.id)), d = r(() => new Map(t.widgets.map((n) => [n.id, n])));
+  return (() => {
+    var n = a();
+    return n.firstChild, o(n, g(m, {
+      get each() {
+        return e();
+      },
+      children: (i) => g(w, {
+        widgetId: i,
+        get widgetDefinitions() {
+          return t.widgetDefinitions;
+        },
+        get widgets() {
+          return t.widgets;
+        },
+        widgetById: d,
+        get selectedWidgetId() {
+          return t.selectedWidgetId;
+        },
+        get optimisticFrontWidgetId() {
+          return t.optimisticFrontWidgetId;
+        },
+        get topZIndex() {
+          return t.topZIndex;
+        },
+        get viewportScale() {
+          return t.viewportScale;
+        },
+        get locked() {
+          return t.locked;
+        },
+        get filters() {
+          return t.filters;
+        },
+        get onSelectWidget() {
+          return t.onSelectWidget;
+        },
+        get onWidgetContextMenu() {
+          return t.onWidgetContextMenu;
+        },
+        get onStartOptimisticFront() {
+          return t.onStartOptimisticFront;
+        },
+        get onCommitFront() {
+          return t.onCommitFront;
+        },
+        get onCommitMove() {
+          return t.onCommitMove;
+        },
+        get onCommitResize() {
+          return t.onCommitResize;
+        },
+        get onRequestDelete() {
+          return t.onRequestDelete;
+        }
+      })
+    }), null), n;
+  })();
+}
+export {
+  W as WorkbenchCanvasField
+};