@floegence/floe-webapp-core 0.36.2 → 0.36.4

package/dist/components/workbench/WorkbenchCanvasField.js

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

package/dist/components/workbench/WorkbenchSurface.js

@@ -2,14 +2,14 @@ import { insert as c, createComponent as a, Portal as k, addEventListener as s,
 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 { WorkbenchContextMenu as x } from "./WorkbenchContextMenu.js";
-import { WorkbenchFilterBar as D } from "./WorkbenchFilterBar.js";
+import { WorkbenchContextMenu as D } from "./WorkbenchContextMenu.js";
+import { WorkbenchFilterBar as x } from "./WorkbenchFilterBar.js";
 import { WorkbenchHud as M } from "./WorkbenchHud.js";
 import { WorkbenchLockButton as S } from "./WorkbenchLockButton.js";
 import { useWorkbenchModel as F } 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 K(i) {
+function U(i) {
   const e = F({
     state: () => i.state(),
     setState: (t) => i.setState(t),
@@ -91,9 +91,6 @@ function K(i) {
       get optimisticFrontWidgetId() {
         return e.optimisticFrontWidgetId();
       },
-      get topZIndex() {
-        return e.topZIndex();
-      },
       get locked() {
         return e.locked();
       },
@@ -140,7 +137,7 @@ function K(i) {
       get shortcutLabel() {
         return u() ?? void 0;
       }
-    }), null), c(t, a(D, {
+    }), null), c(t, a(x, {
       get widgetDefinitions() {
         return e.widgetDefinitions();
       },
@@ -177,7 +174,7 @@ function K(i) {
             return [(() => {
               var n = L();
               return s(n, "contextmenu", e.contextMenu.retarget, !0), s(n, "click", e.contextMenu.close, !0), n;
-            })(), a(x, {
+            })(), a(D, {
               get x() {
                 return e.contextMenu.position()?.left ?? 0;
               },
@@ -196,5 +193,5 @@ function K(i) {
 }
 C(["click", "contextmenu"]);
 export {
-  K as WorkbenchSurface
+  U as WorkbenchSurface
 };

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

@@ -9,11 +9,11 @@ export interface WorkbenchWidgetProps {
     y: number;
     width: number;
     height: number;
-    zIndex: number;
+    renderLayer: number;
     itemSnapshot: () => WorkbenchWidgetItem;
     selected: boolean;
     optimisticFront: boolean;
-    topZIndex: number;
+    topRenderLayer: number;
     viewportScale: number;
     locked: boolean;
     filtered: boolean;

package/dist/components/workbench/WorkbenchWidget.js

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

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

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

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

@@ -10,6 +10,11 @@ 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 interface WorkbenchRenderLayerMap {
+    byWidgetId: ReadonlyMap<string, number>;
+    topRenderLayer: number;
+}
+export declare function createWorkbenchRenderLayerMap(widgets: readonly WorkbenchWidgetItem[]): WorkbenchRenderLayerMap;
 export declare function createContextMenuPosition(options: {
     clientX: number;
     clientY: number;