@floegence/floe-webapp-core 0.36.3 → 0.36.4

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

@@ -7,7 +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 { LOCAL_INTERACTION_SURFACE_ATTR, DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR, WORKBENCH_WIDGET_SHELL_ATTR, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR, isLocalInteractionSurfaceTarget, resolveSurfaceInteractionTargetRole, resolveWorkbenchWidgetEventOwnership, type SurfaceInteractionRoutingOptions, type SurfaceInteractionTargetRole, type WorkbenchWidgetEventOwnership, type WorkbenchWidgetEventOwnershipOptions, } 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

@@ -1,11 +1,19 @@
 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 declare const WORKBENCH_WIDGET_SHELL_ATTR = "data-floe-workbench-widget-shell";
+export declare const DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR = "[data-floe-workbench-widget-shell=\"true\"]";
 export type SurfaceInteractionTargetRole = 'canvas' | 'local_surface' | 'pan_surface';
+export type WorkbenchWidgetEventOwnership = 'outside_widget' | 'widget_local' | 'widget_shell';
 export interface SurfaceInteractionRoutingOptions {
     target: EventTarget | null;
     interactiveSelector: string;
     panSurfaceSelector: string;
     localInteractionSurfaceSelector?: string;
 }
+export interface WorkbenchWidgetEventOwnershipOptions extends SurfaceInteractionRoutingOptions {
+    widgetRoot: Element | EventTarget | null;
+    shellSelector?: string;
+}
 export declare function resolveSurfaceInteractionTargetRole(options: SurfaceInteractionRoutingOptions): SurfaceInteractionTargetRole;
 export declare function isLocalInteractionSurfaceTarget(options: SurfaceInteractionRoutingOptions): boolean;
+export declare function resolveWorkbenchWidgetEventOwnership(options: WorkbenchWidgetEventOwnershipOptions): WorkbenchWidgetEventOwnership;

package/dist/components/ui/localInteractionSurface.js

@@ -1,20 +1,33 @@
-import { isTypingElement as l } from "../../utils/dom.js";
-const o = "data-floe-local-interaction-surface", s = `[${o}="true"]`;
-function u(t) {
+import { isTypingElement as i } from "../../utils/dom.js";
+const s = "data-floe-local-interaction-surface", u = `[${s}="true"]`, f = "data-floe-workbench-widget-shell", E = `[${f}="true"]`;
+function o(e) {
+  return typeof Element < "u" && e instanceof Element ? e : typeof Node < "u" && e instanceof Node ? e.parentElement : null;
+}
+function a(e) {
   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";
+    target: l,
+    interactiveSelector: c,
+    panSurfaceSelector: n,
+    localInteractionSurfaceSelector: t = u
+  } = e, r = l instanceof Element ? l : null;
+  return r ? r.closest(n) !== null ? "pan_surface" : i(r) || r.closest(c) !== null || r.closest(t) !== null ? "local_surface" : "canvas" : "canvas";
+}
+function d(e) {
+  return a(e) !== "canvas";
 }
-function f(t) {
-  return u(t) !== "canvas";
+function T(e) {
+  const {
+    widgetRoot: l,
+    shellSelector: c = E
+  } = e, n = o(l), t = o(e.target);
+  return !n || !t || !n.contains(t) ? "outside_widget" : a(e) !== "canvas" ? "widget_local" : t === n || t.closest(c) !== null ? "widget_shell" : "widget_local";
 }
 export {
-  s as DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR,
-  o as LOCAL_INTERACTION_SURFACE_ATTR,
-  f as isLocalInteractionSurfaceTarget,
-  u as resolveSurfaceInteractionTargetRole
+  u as DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR,
+  E as DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR,
+  s as LOCAL_INTERACTION_SURFACE_ATTR,
+  f as WORKBENCH_WIDGET_SHELL_ATTR,
+  d as isLocalInteractionSurfaceTarget,
+  a as resolveSurfaceInteractionTargetRole,
+  T as resolveWorkbenchWidgetEventOwnership
 };

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

@@ -6,7 +6,6 @@ export interface WorkbenchCanvasProps {
     viewport: WorkbenchViewport;
     selectedWidgetId: string | null;
     optimisticFrontWidgetId: string | null;
-    topZIndex: number;
     locked: boolean;
     filters: Record<WorkbenchWidgetType, boolean>;
     setCanvasFrameRef: (el: HTMLDivElement | undefined) => void;

package/dist/components/workbench/WorkbenchCanvas.js

@@ -1,11 +1,11 @@
 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) {
+import { InfiniteCanvas as m } from "../ui/InfiniteCanvas.js";
+var u = /* @__PURE__ */ g("<div class=workbench-canvas>");
+function v(e) {
   return (() => {
-    var t = m(), n = e.setCanvasFrameRef;
-    return typeof n == "function" ? r(n, t) : e.setCanvasFrameRef = t, o(t, i(u, {
+    var t = u(), n = e.setCanvasFrameRef;
+    return typeof n == "function" ? r(n, t) : e.setCanvasFrameRef = t, o(t, i(m, {
       ariaLabel: "Workbench canvas",
       class: "workbench-canvas__infinite",
       get viewport() {
@@ -34,9 +34,6 @@ function C(e) {
           get optimisticFrontWidgetId() {
             return e.optimisticFrontWidgetId;
           },
-          get topZIndex() {
-            return e.topZIndex;
-          },
           get viewportScale() {
             return e.viewport.scale;
           },
@@ -73,5 +70,5 @@ function C(e) {
   })();
 }
 export {
-  C as WorkbenchCanvas
+  v as WorkbenchCanvas
 };

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

@@ -4,7 +4,6 @@ export interface WorkbenchCanvasFieldProps {
     widgets: readonly WorkbenchWidgetItem[];
     selectedWidgetId: string | null;
     optimisticFrontWidgetId: string | null;
-    topZIndex: number;
     viewportScale: number;
     locked: boolean;
     filters: Record<WorkbenchWidgetType, boolean>;

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;