@floegence/floe-webapp-core 0.36.2 → 0.36.4

package/dist/components/ui/Dialog.js

@@ -1,127 +1,132 @@
-import { createComponent as n, Portal as z, setAttribute as c, spread as O, mergeProps as B, memo as D, insert as a, effect as x, className as A, template as s, use as E } from "solid-js/web";
-import { createUniqueId as M, createMemo as R, Show as f } from "solid-js";
-import { cn as C } from "../../utils/cn.js";
+import { createComponent as n, Portal as R, setAttribute as s, spread as v, mergeProps as C, memo as T, insert as l, effect as A, template as c, use as E } from "solid-js/web";
+import { createUniqueId as S, createMemo as p, Show as u } from "solid-js";
+import { cn as x } from "../../utils/cn.js";
 import { Button as $ } from "./Button.js";
-import { X as F } from "../icons/index.js";
-import { useResolvedFloeConfig as N } from "../../context/FloeConfigContext.js";
-import { useOverlayMask as j } from "../../hooks/useOverlayMask.js";
-import { resolveDialogSurfaceHost as H, DIALOG_SURFACE_BOUNDARY_ATTR as m } from "./dialogSurfaceScope.js";
-var U = /* @__PURE__ */ s('<h2 class="text-sm font-semibold">'), P = /* @__PURE__ */ s('<p class="mt-0.5 text-xs text-muted-foreground">'), W = /* @__PURE__ */ s('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), q = /* @__PURE__ */ s('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), G = /* @__PURE__ */ s('<div><div></div><div class="relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), L = /* @__PURE__ */ s("<div>");
-function X(e) {
-  const i = M(), _ = () => `dialog-${i}-title`, w = () => `dialog-${i}-description`;
-  let h;
-  const v = R(() => e.open ? H() : {
+import { X as z } from "../icons/index.js";
+import { useResolvedFloeConfig as F } from "../../context/FloeConfigContext.js";
+import { useOverlayMask as M } from "../../hooks/useOverlayMask.js";
+import { resolveDialogSurfaceHost as N, DIALOG_SURFACE_BOUNDARY_ATTR as g } from "./dialogSurfaceScope.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as U } from "./localInteractionSurface.js";
+var j = /* @__PURE__ */ c('<h2 class="text-sm font-semibold">'), H = /* @__PURE__ */ c('<p class="mt-0.5 text-xs text-muted-foreground">'), L = /* @__PURE__ */ c('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), P = /* @__PURE__ */ c('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), W = /* @__PURE__ */ c('<div><div></div><div class="relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), q = /* @__PURE__ */ c("<div>");
+function G(e) {
+  const o = S(), _ = () => `dialog-${o}-title`, w = () => `dialog-${o}-description`;
+  let m;
+  const h = p(() => e.open ? N() : {
     host: null,
     mode: "global"
-  }), g = () => `dialog-boundary-${i}`, o = () => v().mode === "surface" && !!v().host?.isConnected, I = () => v().host ?? void 0, S = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${m}="${g()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${m}="${g()}"]`) : !1;
-  return j({
+  }), f = () => `dialog-boundary-${o}`, t = () => h().mode === "surface" && !!h().host?.isConnected, I = () => h().host ?? void 0, B = (r) => typeof Element < "u" && r instanceof Element ? !!r.closest(`[${g}="${f()}"]`) : typeof Node < "u" && r instanceof Node ? !!r.parentElement?.closest(`[${g}="${f()}"]`) : !1;
+  return M({
     open: () => e.open,
-    root: () => h,
-    containsTarget: (t) => o() && S(t),
+    root: () => m,
+    containsTarget: (r) => t() && B(r),
     onClose: () => e.onOpenChange(!1),
-    lockBodyScroll: () => !o(),
+    lockBodyScroll: () => !t(),
     trapFocus: !0,
-    closeOnEscape: () => o() ? "inside" : !0,
+    closeOnEscape: () => t() ? "inside" : !0,
     blockHotkeys: !0,
     // Block scroll bleed outside the dialog while keeping the dialog content scrollable.
-    blockWheel: () => o() ? "none" : "outside",
-    blockTouchMove: () => o() ? "none" : "outside",
+    blockWheel: () => t() ? "none" : "outside",
+    blockTouchMove: () => t() ? "none" : "outside",
     restoreFocus: !0
-  }), n(f, {
+  }), n(u, {
     get when() {
       return e.open;
     },
     get children() {
-      return n(z, {
+      return n(R, {
         get mount() {
           return I();
         },
         get children() {
-          var t = G(), b = t.firstChild, T = b.nextSibling, d = T.firstChild, y = d.firstChild;
-          c(t, "data-floe-dialog-overlay-root", i), c(b, "data-floe-dialog-backdrop", i), O(b, B(() => ({
-            [m]: g()
+          var r = W(), b = r.firstChild, D = b.nextSibling, i = D.firstChild, y = i.firstChild;
+          s(r, "data-floe-dialog-overlay-root", o), v(r, C({
+            get "data-floe-dialog-mode"() {
+              return t() ? "surface" : "global";
+            }
+          }, () => ({
+            [U]: t() ? "true" : void 0
+          }), {
+            get class() {
+              return x(t() ? "absolute inset-0 z-20 p-3" : "fixed inset-0 z-50 p-4");
+            }
+          }), !1, !0), s(b, "data-floe-dialog-backdrop", o), v(b, C(() => ({
+            [g]: f()
           }), {
             get class() {
-              return C("absolute inset-0 cursor-pointer animate-in fade-in", o() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
+              return x("absolute inset-0 cursor-pointer animate-in fade-in", t() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
             },
             onClick: () => e.onOpenChange(!1)
           }), !1, !1);
-          var k = h;
-          return typeof k == "function" ? E(k, d) : h = d, c(d, "data-floe-dialog-panel", i), O(d, B(() => ({
-            [m]: g()
+          var k = m;
+          return typeof k == "function" ? E(k, i) : m = i, s(i, "data-floe-dialog-panel", o), v(i, C(() => ({
+            [g]: f()
           }), {
             get class() {
-              return C(o() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "animate-in fade-in zoom-in-95", "flex flex-col", e.class);
+              return x(t() ? "flex max-h-[calc(100%-1rem)] w-[min(32rem,calc(100%-1rem))] max-w-[calc(100%-1rem)] flex-col" : "w-full max-w-md max-h-[85vh]", "bg-card text-card-foreground rounded-md shadow-lg", "border border-border", "animate-in fade-in zoom-in-95", "flex flex-col", e.class);
             },
             role: "dialog",
             get "aria-modal"() {
-              return o() ? void 0 : "true";
+              return t() ? void 0 : "true";
             },
             get "aria-labelledby"() {
-              return D(() => !!e.title)() ? _() : void 0;
+              return T(() => !!e.title)() ? _() : void 0;
             },
             get "aria-describedby"() {
-              return D(() => !!e.description)() ? w() : void 0;
+              return T(() => !!e.description)() ? w() : void 0;
             },
             tabIndex: -1
-          }), !1, !0), a(d, n(f, {
+          }), !1, !0), l(i, n(u, {
             get when() {
               return e.title || e.description;
             },
             get children() {
-              var r = W(), u = r.firstChild;
-              return a(u, n(f, {
+              var d = L(), O = d.firstChild;
+              return l(O, n(u, {
                 get when() {
                   return e.title;
                 },
                 get children() {
-                  var l = U();
-                  return a(l, () => e.title), x(() => c(l, "id", _())), l;
+                  var a = j();
+                  return l(a, () => e.title), A(() => s(a, "id", _())), a;
                 }
-              }), null), a(u, n(f, {
+              }), null), l(O, n(u, {
                 get when() {
                   return e.description;
                 },
                 get children() {
-                  var l = P();
-                  return a(l, () => e.description), x(() => c(l, "id", w())), l;
+                  var a = H();
+                  return l(a, () => e.description), A(() => s(a, "id", w())), a;
                 }
-              }), null), a(r, n($, {
+              }), null), l(d, n($, {
                 variant: "ghost-destructive",
                 size: "icon",
                 class: "h-6 w-6 -mr-1",
                 onClick: () => e.onOpenChange(!1),
                 "aria-label": "Close",
                 get children() {
-                  return n(F, {
+                  return n(z, {
                     class: "w-3.5 h-3.5"
                   });
                 }
-              }), null), r;
+              }), null), d;
             }
-          }), y), a(y, () => e.children), a(d, n(f, {
+          }), y), l(y, () => e.children), l(i, n(u, {
             get when() {
               return e.footer;
             },
             get children() {
-              var r = q();
-              return a(r, () => e.footer), r;
+              var d = P();
+              return l(d, () => e.footer), d;
             }
-          }), null), x((r) => {
-            var u = o() ? "surface" : "global", l = C(o() ? "absolute inset-0 z-20 p-3" : "fixed inset-0 z-50 p-4");
-            return u !== r.e && c(t, "data-floe-dialog-mode", r.e = u), l !== r.t && A(t, r.t = l), r;
-          }, {
-            e: void 0,
-            t: void 0
-          }), t;
+          }), null), r;
         }
       });
     }
   });
 }
-function te(e) {
-  const i = N();
-  return n(X, {
+function re(e) {
+  const o = F();
+  return n(G, {
     get open() {
       return e.open;
     },
@@ -142,7 +147,7 @@ function te(e) {
           return e.loading;
         },
         get children() {
-          return e.cancelText ?? i.config.strings.confirmDialog.cancel;
+          return e.cancelText ?? o.config.strings.confirmDialog.cancel;
         }
       }), n($, {
         get variant() {
@@ -155,16 +160,16 @@ function te(e) {
           return e.loading;
         },
         get children() {
-          return e.confirmText ?? i.config.strings.confirmDialog.confirm;
+          return e.confirmText ?? o.config.strings.confirmDialog.confirm;
         }
       })];
     },
     get children() {
-      return e.children ?? L();
+      return e.children ?? q();
     }
   });
 }
 export {
-  te as ConfirmDialog,
-  X as Dialog
+  re as ConfirmDialog,
+  G as Dialog
 };

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/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, 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

@@ -0,0 +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

@@ -0,0 +1,33 @@
+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: 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 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 {
+  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>;