@floegence/floe-webapp-core 0.39.2 → 0.39.4

package/dist/components/ui/FloatingWindow.js

@@ -1,29 +1,29 @@
-import { createComponent as s, Portal as Le, spread as de, mergeProps as ue, memo as ce, insert as g, effect as u, setAttribute as Me, addEventListener as m, className as c, template as a, use as De, delegateEvents as ke } from "solid-js/web";
-import { createUniqueId as Te, createSignal as v, onMount as We, onCleanup as q, createEffect as b, Show as P, batch as Oe, untrack as He } from "solid-js";
+import { createComponent as s, Portal as Me, spread as de, mergeProps as ue, memo as ce, insert as g, effect as c, setAttribute as Te, addEventListener as m, className as f, template as d, use as De, delegateEvents as ke } from "solid-js/web";
+import { createUniqueId as We, createSignal as v, onMount as Oe, onCleanup as X, createEffect as b, Show as P, batch as He, untrack as Ue } from "solid-js";
 import { cn as E } from "../../utils/cn.js";
-import { useLayout as Ue } from "../../context/LayoutContext.js";
+import { useLayout as Ye } from "../../context/LayoutContext.js";
 import { Button as fe } from "./Button.js";
-import { Restore as Xe, Maximize as Ye, X as qe } from "../icons/index.js";
-import { startHotInteraction as Ne } from "../../utils/hotInteraction.js";
-import { resolveFloatingWindowViewport as he, normalizeFloatingWindowRect as we, resolveFloatingWindowRect as Be } from "./floatingWindowGeometry.js";
+import { Restore as Ne, Maximize as Xe, X as qe } from "../icons/index.js";
+import { startHotInteraction as Be } from "../../utils/hotInteraction.js";
+import { resolveFloatingWindowViewport as he, normalizeFloatingWindowRect as we, resolveFloatingWindowRect as Ge } from "./floatingWindowGeometry.js";
 import { createFloatingPresence as je } from "./floatingPresence.js";
 import { LOCAL_INTERACTION_SURFACE_ATTR as ge } from "./localInteractionSurface.js";
-import { SURFACE_PORTAL_LAYER_ATTR as Ge } from "./dialogSurfaceScope.js";
-var Ve = /* @__PURE__ */ a('<h2 class="text-sm font-medium truncate select-none">'), Ze = /* @__PURE__ */ a('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), Je = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), Ke = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), Qe = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), et = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), tt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), nt = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), it = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), ot = /* @__PURE__ */ a("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), rt = /* @__PURE__ */ a('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0"></div><div class="flex items-center gap-0.5 -mr-1"></div></div><div class="flex-1 overflow-auto p-3">');
-function pt(i) {
-  const N = () => i.resizable ?? !0, B = () => i.draggable ?? !0, A = () => i.minSize ?? {
+import { SURFACE_PORTAL_LAYER_ATTR as Ve, SURFACE_FLOATING_LAYER_ATTR as Ze } from "./dialogSurfaceScope.js";
+var Je = /* @__PURE__ */ d('<h2 class="text-sm font-medium truncate select-none">'), Ke = /* @__PURE__ */ d('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), Qe = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=n style=touch-action:none>"), et = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=s style=touch-action:none>"), tt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=e style=touch-action:none>"), nt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=w style=touch-action:none>"), it = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=ne style=touch-action:none>"), ot = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=nw style=touch-action:none>"), rt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=se style=touch-action:none>"), lt = /* @__PURE__ */ d("<div data-floe-floating-window-resize-handle=sw style=touch-action:none>"), st = /* @__PURE__ */ d('<div data-floe-geometry-surface=floating-window><div data-floe-dialog-surface-host=true><div data-floe-floating-window-titlebar=true style=touch-action:none><div class="flex-1 min-w-0"></div><div class="flex items-center gap-0.5 -mr-1"></div></div><div class="flex-1 overflow-auto p-3">');
+function xt(i) {
+  const q = () => i.resizable ?? !0, B = () => i.draggable ?? !0, A = () => i.minSize ?? {
     width: 200,
     height: 150
   }, F = () => i.maxSize ?? {
     width: 1 / 0,
     height: 1 / 0
-  }, x = () => i.viewportInsets ?? {}, me = () => i.zIndex ?? 100, pe = Te(), ve = Ue(), $ = () => ve.isMobile(), L = 16, j = () => `floating-window-${pe}-title`, [M, xe] = v(i.defaultPosition ?? {
+  }, x = () => i.viewportInsets ?? {}, me = () => i.zIndex ?? 100, pe = We(), ve = Ye(), $ = () => ve.isMobile(), L = 16, G = () => `floating-window-${pe}-title`, [M, xe] = v(i.defaultPosition ?? {
     x: 0,
     y: 0
-  }), [D, ze] = v(i.defaultSize ?? {
+  }), [T, ye] = v(i.defaultSize ?? {
     width: 400,
     height: 300
-  }), [d, G] = v(!1), [k, V] = v(!1), [T, Z] = v(!1), [ye, W] = v(!1), I = je({
+  }), [u, j] = v(!1), [D, V] = v(!1), [k, Z] = v(!1), [ze, W] = v(!1), I = je({
     open: () => i.open,
     exitDurationMs: 120
   }), [be, Pe] = v(null);
@@ -43,10 +43,10 @@ function pt(i) {
     y: 0,
     width: 0,
     height: 0
-  }, te = "se", o, r = null, p = null, S = {
+  }, te = "se", o, l = null, p = null, S = {
     x: 0,
     y: 0
-  }, z = null, R = null, O = !1, y = {
+  }, y = null, R = null, O = !1, z = {
     x: i.defaultPosition?.x ?? 0,
     y: i.defaultPosition?.y ?? 0,
     width: i.defaultSize?.width ?? 400,
@@ -66,15 +66,15 @@ function pt(i) {
       R?.(), R = null;
       return;
     }
-    R?.(), R = Ne({
+    R?.(), R = Be({
       kind: p === "resize" ? "resize" : "drag",
       cursor: t,
       lockUserSelect: !0
     });
   }, ne = (e) => {
-    y = e, o && (o.style.transform = `translate3d(${e.x}px, ${e.y}px, 0)`, o.style.width = `${e.width}px`, o.style.height = `${e.height}px`);
+    z = e, o && (o.style.transform = `translate3d(${e.x}px, ${e.y}px, 0)`, o.style.width = `${e.width}px`, o.style.height = `${e.height}px`);
   }, U = () => {
-    const e = M(), t = D();
+    const e = M(), t = T();
     return {
       x: e.x,
       y: e.y,
@@ -82,10 +82,10 @@ function pt(i) {
       height: t.height
     };
   }, _ = (e) => {
-    y = e, xe((t) => t.x === e.x && t.y === e.y ? t : {
+    z = e, xe((t) => t.x === e.x && t.y === e.y ? t : {
       x: e.x,
       y: e.y
-    }), ze((t) => t.width === e.width && t.height === e.height ? t : {
+    }), ye((t) => t.width === e.width && t.height === e.height ? t : {
       width: e.width,
       height: e.height
     });
@@ -99,7 +99,10 @@ function pt(i) {
   }, Se = (e) => {
     const t = e instanceof Element ? e : null;
     return t ? t.closest('button, input, select, textarea, a, [role="button"], [tabindex]:not([tabindex="-1"])') === null : !0;
-  }, X = (e) => !!o && e instanceof Node && o.contains(e), _e = () => {
+  }, Y = (e) => !!o && e instanceof Node && o.contains(e), _e = (e) => {
+    const a = (e instanceof Element ? e : null)?.closest('[role="menu"]')?.closest(`[${Ze}="true"]`);
+    return !!(a && o?.contains(a));
+  }, Re = () => {
     if (!o) return null;
     const e = o.getBoundingClientRect();
     return {
@@ -109,7 +112,7 @@ function pt(i) {
       height: e.height
     };
   }, ie = () => {
-    i.open && (r === null || p === null || typeof window > "u" || ne(Be({
+    i.open && (l === null || p === null || typeof window > "u" || ne(Ge({
       mode: p,
       pointer: S,
       dragStartPos: J,
@@ -133,7 +136,7 @@ function pt(i) {
       width: window.innerWidth,
       height: window.innerHeight
     };
-    if (d()) {
+    if (u()) {
       _(he(t, x()));
       return;
     }
@@ -147,28 +150,28 @@ function pt(i) {
       mobilePadding: L,
       center: e?.center ?? !1
     }));
-  }, Y = (e, t = !0) => {
-    z !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(z), z = null), t && ie();
-    const l = t ? _e() ?? y : null;
+  }, N = (e, t = !0) => {
+    y !== null && typeof cancelAnimationFrame < "u" && (cancelAnimationFrame(y), y = null), t && ie();
+    const r = t ? Re() ?? z : null;
     if (e !== void 0)
       try {
         typeof o?.releasePointerCapture == "function" && o.releasePointerCapture(e);
       } catch {
       }
-    Oe(() => {
-      l && _(l), r = null, p = null, V(!1), Z(!1);
+    He(() => {
+      r && _(r), l = null, p = null, V(!1), Z(!1);
     }), H(!1, "");
   };
-  We(() => {
+  Oe(() => {
     i.open || C({
       center: !i.defaultPosition
     });
     const e = () => {
-      r === null && C({
+      l === null && C({
         center: !1
       });
     };
-    window.addEventListener("resize", e), q(() => window.removeEventListener("resize", e));
+    window.addEventListener("resize", e), X(() => window.removeEventListener("resize", e));
   }), b(() => {
     if (!i.open) return;
     $();
@@ -183,80 +186,80 @@ function pt(i) {
     }
     requestAnimationFrame(t);
   }), b(() => {
-    !i.open || !O || r !== null || (x(), He(() => C({
+    !i.open || !O || l !== null || (x(), Ue(() => C({
       center: !1
     })));
   }), b(() => {
     if (!i.open) return;
     const e = (t) => {
       if (t.key !== "Escape") return;
-      const l = typeof document < "u" ? document.activeElement : null;
-      !X(t.target) && !X(l) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), i.onOpenChange(!1));
+      const r = typeof document < "u" ? document.activeElement : null;
+      !Y(t.target) && !Y(r) || _e(t.target) || (t.preventDefault(), typeof t.stopImmediatePropagation == "function" ? t.stopImmediatePropagation() : t.stopPropagation(), i.onOpenChange(!1));
     };
-    document.addEventListener("keydown", e, !0), q(() => document.removeEventListener("keydown", e, !0));
+    document.addEventListener("keydown", e, !0), X(() => document.removeEventListener("keydown", e, !0));
   }), b(() => {
     if (!i.open) {
-      W(!1), Y(r ?? void 0, !1);
+      W(!1), N(l ?? void 0, !1);
       return;
     }
     W(!0);
   }), b(() => {
     if (!i.open) return;
-    const e = (w) => {
-      W(X(w));
-    }, t = (w) => {
-      e(w.target);
-    }, l = (w) => {
-      e(w.target);
+    const e = (a) => {
+      W(Y(a));
+    }, t = (a) => {
+      e(a.target);
+    }, r = (a) => {
+      e(a.target);
     };
-    document.addEventListener("pointerdown", t), document.addEventListener("focusin", l), q(() => {
-      document.removeEventListener("pointerdown", t), document.removeEventListener("focusin", l);
+    document.addEventListener("pointerdown", t), document.addEventListener("focusin", r), X(() => {
+      document.removeEventListener("pointerdown", t), document.removeEventListener("focusin", r);
     });
   }), b(() => {
     if (!i.open) return;
     const e = U();
-    r === null ? ne(e) : y = e;
+    l === null ? ne(e) : z = e;
   });
-  const Re = (e) => {
-    !B() || d() || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"]') || (e.preventDefault(), r = e.pointerId, p = "drag", V(!0), J = {
+  const Ce = (e) => {
+    !B() || u() || e.pointerType === "mouse" && e.button !== 0 || e.target?.closest('button, input, select, textarea, a, [role="button"]') || (e.preventDefault(), l = e.pointerId, p = "drag", V(!0), J = {
       x: e.clientX,
       y: e.clientY
     }, K = {
-      ...y
+      ...z
     }, S = {
       x: e.clientX,
       y: e.clientY
     }, H(!0, "grabbing"), typeof o?.setPointerCapture == "function" && o.setPointerCapture(e.pointerId));
-  }, f = (e) => (t) => {
-    !N() || d() || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), r = t.pointerId, p = "resize", Z(!0), te = e, Q = {
+  }, h = (e) => (t) => {
+    !q() || u() || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), t.stopPropagation(), l = t.pointerId, p = "resize", Z(!0), te = e, Q = {
       x: t.clientX,
       y: t.clientY
     }, ee = {
-      ...y
+      ...z
     }, S = {
       x: t.clientX,
       y: t.clientY
     }, H(!0, $e[e]), typeof o?.setPointerCapture == "function" && o.setPointerCapture(t.pointerId));
   }, oe = () => {
-    z = null, ie();
-  }, Ce = (e) => {
-    if (!(r === null || e.pointerId !== r) && p !== null && (S = {
+    y = null, ie();
+  }, Ee = (e) => {
+    if (!(l === null || e.pointerId !== l) && p !== null && (S = {
       x: e.clientX,
       y: e.clientY
-    }, z === null)) {
+    }, y === null)) {
       if (typeof requestAnimationFrame > "u") {
         oe();
         return;
       }
-      z = requestAnimationFrame(oe);
+      y = requestAnimationFrame(oe);
     }
   }, re = (e) => {
-    r === null || e.pointerId !== r || (S = {
+    l === null || e.pointerId !== l || (S = {
       x: e.clientX,
       y: e.clientY
-    }, Y(e.pointerId));
+    }, N(e.pointerId));
   }, le = () => {
-    if (r !== null && Y(r, !0), d()) {
+    if (l !== null && N(l, !0), u()) {
       const t = be();
       t && _(we({
         rect: {
@@ -275,7 +278,7 @@ function pt(i) {
         mobile: $(),
         mobilePadding: L,
         center: !1
-      })), G(!1);
+      })), j(!1);
       return;
     }
     const e = U();
@@ -291,12 +294,12 @@ function pt(i) {
     }), _(he({
       width: window.innerWidth,
       height: window.innerHeight
-    }, x())), G(!0);
-  }, Ee = () => {
+    }, x())), j(!0);
+  }, Ae = () => {
     le();
-  }, Ae = (e) => {
+  }, Fe = (e) => {
     Se(e.target) && Ie();
-  }, h = (e) => E("absolute z-10", {
+  }, w = (e) => E("absolute z-10", {
     n: "cursor-ns-resize top-0 left-2 right-2 h-1",
     s: "cursor-ns-resize bottom-0 left-2 right-2 h-1",
     e: "cursor-ew-resize right-0 top-2 bottom-2 w-1",
@@ -311,9 +314,9 @@ function pt(i) {
       return I.mounted();
     },
     get children() {
-      return s(Le, {
+      return s(Me, {
         get children() {
-          var e = rt(), t = e.firstChild, l = t.firstChild, w = l.firstChild, se = w.nextSibling, Fe = l.nextSibling, ae = o;
+          var e = st(), t = e.firstChild, r = t.firstChild, a = r.firstChild, se = a.nextSibling, Le = r.nextSibling, ae = o;
           return typeof ae == "function" ? De(ae, e) : o = e, de(e, ue({
             get "data-floating-presence"() {
               return I.state();
@@ -325,49 +328,49 @@ function pt(i) {
             [ge]: "true"
           }, {
             get class() {
-              return E("fixed left-0 top-0 z-[100] flex flex-col", (k() || T()) && "select-none", I.exiting() && "pointer-events-none");
+              return E("fixed left-0 top-0 z-[100] flex flex-col", (D() || k()) && "select-none", I.exiting() && "pointer-events-none");
             },
             get style() {
               return {
-                width: `${D().width}px`,
-                height: `${D().height}px`,
+                width: `${T().width}px`,
+                height: `${T().height}px`,
                 transform: `translate3d(${M().x}px, ${M().y}px, 0)`,
                 "z-index": me(),
-                "will-change": k() ? "transform" : T() ? "transform, width, height" : void 0
+                "will-change": D() ? "transform" : k() ? "transform, width, height" : void 0
               };
             },
-            onPointerMove: Ce,
+            onPointerMove: Ee,
             onPointerUp: re,
             onPointerCancel: re,
             role: "dialog",
             get "aria-labelledby"() {
-              return ce(() => !!i.title)() ? j() : void 0;
+              return ce(() => !!i.title)() ? G() : void 0;
             },
             tabIndex: -1,
-            onPointerDown: Ae
+            onPointerDown: Fe
           }), !1, !0), de(t, ue({
-            [Ge]: "true"
+            [Ve]: "true"
           }, {
             "data-floe-floating-window-surface": "true",
             get "data-floe-floating-window-state"() {
-              return ye() ? "active" : "inactive";
+              return ze() ? "active" : "inactive";
             }
           }, {
             [ge]: "true"
           }, {
             get class() {
-              return E("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "floe-floating-presence floe-floating-window-motion", (k() || T()) && "floe-floating-presence--suspended", d() && "rounded-none", i.class);
+              return E("relative flex h-full w-full flex-col overflow-hidden", "text-card-foreground rounded-md", "border", "floe-floating-presence floe-floating-window-motion", (D() || k()) && "floe-floating-presence--suspended", u() && "rounded-none", i.class);
             },
             get "data-floating-presence"() {
               return I.state();
             }
-          }), !1, !0), l.$$dblclick = Ee, l.$$pointerdown = Re, g(w, s(P, {
+          }), !1, !0), r.$$dblclick = Ae, r.$$pointerdown = Ce, g(a, s(P, {
             get when() {
               return i.title;
             },
             get children() {
-              var n = Ve();
-              return g(n, () => i.title), u(() => Me(n, "id", j())), n;
+              var n = Je();
+              return g(n, () => i.title), c(() => Te(n, "id", G())), n;
             }
           })), g(se, s(fe, {
             variant: "ghost",
@@ -377,20 +380,20 @@ function pt(i) {
               n.stopPropagation(), le();
             },
             get "aria-label"() {
-              return d() ? "Restore" : "Maximize";
+              return u() ? "Restore" : "Maximize";
             },
             get children() {
               return s(P, {
                 get when() {
-                  return d();
+                  return u();
                 },
                 get fallback() {
-                  return s(Ye, {
+                  return s(Xe, {
                     class: "w-3 h-3"
                   });
                 },
                 get children() {
-                  return s(Xe, {
+                  return s(Ne, {
                     class: "w-3 h-3"
                   });
                 }
@@ -409,53 +412,53 @@ function pt(i) {
                 class: "w-3.5 h-3.5"
               });
             }
-          }), null), g(Fe, () => i.children), g(t, s(P, {
+          }), null), g(Le, () => i.children), g(t, s(P, {
             get when() {
               return i.footer;
             },
             get children() {
-              var n = Ze();
+              var n = Ke();
               return g(n, () => i.footer), n;
             }
           }), null), g(t, s(P, {
             get when() {
-              return ce(() => !!N())() && !d();
+              return ce(() => !!q())() && !u();
             },
             get children() {
               return [(() => {
-                var n = Je();
-                return m(n, "pointerdown", f("n"), !0), u(() => c(n, h("n"))), n;
+                var n = Qe();
+                return m(n, "pointerdown", h("n"), !0), c(() => f(n, w("n"))), n;
               })(), (() => {
-                var n = Ke();
-                return m(n, "pointerdown", f("s"), !0), u(() => c(n, h("s"))), n;
+                var n = et();
+                return m(n, "pointerdown", h("s"), !0), c(() => f(n, w("s"))), n;
               })(), s(P, {
                 get when() {
                   return !$();
                 },
                 get children() {
                   return [(() => {
-                    var n = Qe();
-                    return m(n, "pointerdown", f("e"), !0), u(() => c(n, h("e"))), n;
-                  })(), (() => {
-                    var n = et();
-                    return m(n, "pointerdown", f("w"), !0), u(() => c(n, h("w"))), n;
-                  })(), (() => {
                     var n = tt();
-                    return m(n, "pointerdown", f("ne"), !0), u(() => c(n, h("ne"))), n;
+                    return m(n, "pointerdown", h("e"), !0), c(() => f(n, w("e"))), n;
                   })(), (() => {
                     var n = nt();
-                    return m(n, "pointerdown", f("nw"), !0), u(() => c(n, h("nw"))), n;
+                    return m(n, "pointerdown", h("w"), !0), c(() => f(n, w("w"))), n;
                   })(), (() => {
                     var n = it();
-                    return m(n, "pointerdown", f("se"), !0), u(() => c(n, h("se"))), n;
+                    return m(n, "pointerdown", h("ne"), !0), c(() => f(n, w("ne"))), n;
                   })(), (() => {
                     var n = ot();
-                    return m(n, "pointerdown", f("sw"), !0), u(() => c(n, h("sw"))), n;
+                    return m(n, "pointerdown", h("nw"), !0), c(() => f(n, w("nw"))), n;
+                  })(), (() => {
+                    var n = rt();
+                    return m(n, "pointerdown", h("se"), !0), c(() => f(n, w("se"))), n;
+                  })(), (() => {
+                    var n = lt();
+                    return m(n, "pointerdown", h("sw"), !0), c(() => f(n, w("sw"))), n;
                   })()];
                 }
               })];
             }
-          }), null), u(() => c(l, E("flex items-center justify-between h-9 px-3", "border-b", d() ? "rounded-none" : "rounded-t-md", B() && !d() && "cursor-move"))), e;
+          }), null), c(() => f(r, E("flex items-center justify-between h-9 px-3", "border-b", u() ? "rounded-none" : "rounded-t-md", B() && !u() && "cursor-move"))), e;
         }
       });
     }
@@ -463,5 +466,5 @@ function pt(i) {
 }
 ke(["pointerdown", "dblclick"]);
 export {
-  pt as FloatingWindow
+  xt as FloatingWindow
 };

package/dist/components/ui/SurfaceFloatingLayer.js

@@ -1,11 +1,11 @@
-import { createComponent as m, Portal as d, use as y, spread as S, mergeProps as P, insert as v, template as R } from "solid-js/web";
-import { splitProps as g, createMemo as i } from "solid-js";
-import { cn as h } from "../../utils/cn.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as z } from "./localInteractionSurface.js";
-import { clampMenuPosition as _ } from "./menuUtils.js";
-import { resolveSurfacePortalHost as x, resolveSurfacePortalMount as C, resolveSurfacePortalBoundaryRect as M, isSurfacePortalMode as $, projectSurfacePortalPosition as A } from "./dialogSurfaceScope.js";
-var T = /* @__PURE__ */ R("<div>");
-function b() {
+import { createComponent as m, Portal as d, use as y, spread as S, mergeProps as P, insert as R, template as v } from "solid-js/web";
+import { splitProps as _, createMemo as i } from "solid-js";
+import { cn as g } from "../../utils/cn.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as h } from "./localInteractionSurface.js";
+import { clampMenuPosition as A } from "./menuUtils.js";
+import { resolveSurfacePortalHost as T, SURFACE_FLOATING_LAYER_ATTR as z, resolveSurfacePortalMount as C, resolveSurfacePortalBoundaryRect as x, isSurfacePortalMode as L, projectSurfacePortalPosition as M } from "./dialogSurfaceScope.js";
+var $ = /* @__PURE__ */ v("<div>");
+function E() {
   return {
     left: 0,
     top: 0,
@@ -15,11 +15,11 @@ function b() {
     height: 0
   };
 }
-function I(n) {
-  const [e, l] = g(n, ["position", "estimatedSize", "clamp", "class", "style", "children", "layerRef"]), o = i(() => x()), r = () => $(o()), c = () => M(o()) ?? b(), u = () => e.clamp !== !1 && !!e.estimatedSize, p = i(() => {
+function j(n) {
+  const [e, l] = _(n, ["position", "estimatedSize", "clamp", "class", "style", "children", "layerRef"]), o = i(() => T()), r = () => L(o()), c = () => x(o()) ?? E(), u = () => e.clamp !== !1 && !!e.estimatedSize, p = i(() => {
     const t = e.position;
-    return !u() || !e.estimatedSize ? t : _(t, e.estimatedSize, c());
-  }), s = () => A(p(), o()), f = () => ({
+    return !u() || !e.estimatedSize ? t : A(t, e.estimatedSize, c());
+  }), s = () => M(p(), o()), f = () => ({
     ...e.style ?? {},
     left: `${s().x}px`,
     top: `${s().y}px`
@@ -29,20 +29,22 @@ function I(n) {
       return C(o());
     },
     get children() {
-      var t = T(), a = e.layerRef;
+      var t = $(), a = e.layerRef;
       return typeof a == "function" ? y(a, t) : e.layerRef = t, S(t, P(l, {
         get class() {
-          return h(r() ? "absolute z-20" : "fixed z-50", e.class);
+          return g(r() ? "absolute z-20" : "fixed z-50", e.class);
         },
         get style() {
           return f();
         }
+      }, {
+        [z]: "true"
       }, () => ({
-        [z]: r() ? "true" : void 0
-      })), !1, !0), v(t, () => e.children), t;
+        [h]: r() ? "true" : void 0
+      })), !1, !0), R(t, () => e.children), t;
     }
   });
 }
 export {
-  I as SurfaceFloatingLayer
+  j as SurfaceFloatingLayer
 };

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

@@ -2,6 +2,7 @@ import type { SurfacePortalRect } from './surfacePortalTypes';
 export declare const DIALOG_SURFACE_HOST_ATTR = "data-floe-dialog-surface-host";
 export declare const SURFACE_PORTAL_HOST_ATTR = "data-floe-dialog-surface-host";
 export declare const SURFACE_PORTAL_LAYER_ATTR = "data-floe-surface-portal-layer";
+export declare const SURFACE_FLOATING_LAYER_ATTR = "data-floe-surface-floating-layer";
 export declare const DIALOG_SURFACE_BOUNDARY_ATTR = "data-floe-dialog-surface-boundary";
 export type DialogSurfaceInteractionSnapshot = Readonly<{
     target: Element | null;