@floegence/floe-webapp-core 0.39.3 → 0.39.5

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;

package/dist/components/ui/dialogSurfaceScope.js

@@ -1,9 +1,9 @@
-const a = "data-floe-dialog-surface-host", y = a, p = "data-floe-surface-portal-layer", A = "data-floe-dialog-surface-boundary", g = 1600;
+const d = "data-floe-dialog-surface-host", y = d, p = "data-floe-surface-portal-layer", v = "data-floe-surface-floating-layer", _ = "data-floe-dialog-surface-boundary", g = 1600;
 let r = null, o = null;
 function E(t) {
   return typeof Element < "u" && t instanceof Element ? t : typeof Node < "u" && t instanceof Node ? t.parentElement : null;
 }
-function w(t) {
+function T(t) {
   const e = t?.activeElement;
   return e instanceof Element ? e : null;
 }
@@ -11,7 +11,7 @@ function l(t) {
   const e = typeof document < "u" ? document : null;
   r = {
     target: E(t),
-    activeElement: w(e),
+    activeElement: T(e),
     recordedAt: Date.now()
   };
 }
@@ -21,41 +21,41 @@ function c(t) {
 function f(t) {
   l(t.target);
 }
-function d(t) {
+function a(t) {
   l(t.target);
 }
 function s() {
-  T();
-}
-function T() {
-  typeof document > "u" || o !== document && (o && (o.removeEventListener("pointerdown", c, !0), o.removeEventListener("focusin", f, !0), o.removeEventListener("contextmenu", d, !0)), document.addEventListener("pointerdown", c, !0), document.addEventListener("focusin", f, !0), document.addEventListener("contextmenu", d, !0), o = document);
+  R();
 }
 function R() {
+  typeof document > "u" || o !== document && (o && (o.removeEventListener("pointerdown", c, !0), o.removeEventListener("focusin", f, !0), o.removeEventListener("contextmenu", a, !0)), document.addEventListener("pointerdown", c, !0), document.addEventListener("focusin", f, !0), document.addEventListener("contextmenu", a, !0), o = document);
+}
+function w() {
   return !r || Date.now() - r.recordedAt > g ? null : r;
 }
 function i(t) {
-  const e = t?.closest(`[${a}="true"]`);
+  const e = t?.closest(`[${d}="true"]`);
   return typeof HTMLElement > "u" ? null : e instanceof HTMLElement ? e : null;
 }
-function S(t) {
+function A(t) {
   if (!t) return null;
   const e = t.closest(`[${p}="true"]`);
   return typeof HTMLElement > "u" ? null : e instanceof HTMLElement ? e : null;
 }
 function L(t = {}) {
   s();
-  const e = R(), n = i(t.owner ?? null) ?? i(e?.target ?? null) ?? i(e?.activeElement ?? null);
+  const e = w(), n = i(t.owner ?? null) ?? i(e?.target ?? null) ?? i(e?.activeElement ?? null);
   return n ? {
     host: n,
     boundaryHost: n,
-    mountHost: S(n) ?? n,
+    mountHost: A(n) ?? n,
     mode: "surface"
   } : { host: null, boundaryHost: null, mountHost: null, mode: "global" };
 }
 function u(t) {
   return t.mode === "surface" && !!t.boundaryHost?.isConnected;
 }
-function v(t) {
+function S(t) {
   if (u(t))
     return t.mountHost ?? t.boundaryHost ?? void 0;
 }
@@ -76,7 +76,7 @@ function m() {
     height: window.innerHeight
   };
 }
-function _(t) {
+function b(t) {
   if (!u(t) || !t.boundaryHost)
     return m();
   const e = t.boundaryHost.getBoundingClientRect();
@@ -90,7 +90,7 @@ function _(t) {
   };
 }
 function h(t) {
-  const e = v(t);
+  const e = S(t);
   if (!e)
     return m();
   const n = e.getBoundingClientRect();
@@ -103,7 +103,7 @@ function h(t) {
     height: n.height
   };
 }
-function b(t, e) {
+function P(t, e) {
   if (!u(e))
     return t;
   const n = h(e);
@@ -112,7 +112,7 @@ function b(t, e) {
     y: t.y - n.top
   };
 }
-function P(t, e) {
+function C(t, e) {
   if (!u(e))
     return t;
   const n = h(e);
@@ -125,23 +125,24 @@ function P(t, e) {
     height: t.height
   };
 }
-function C() {
+function H() {
   r = null;
 }
 typeof document < "u" && s();
 export {
-  A as DIALOG_SURFACE_BOUNDARY_ATTR,
-  a as DIALOG_SURFACE_HOST_ATTR,
+  _ as DIALOG_SURFACE_BOUNDARY_ATTR,
+  d as DIALOG_SURFACE_HOST_ATTR,
+  v as SURFACE_FLOATING_LAYER_ATTR,
   y as SURFACE_PORTAL_HOST_ATTR,
   p as SURFACE_PORTAL_LAYER_ATTR,
-  C as __resetSurfacePortalScopeForTests,
+  H as __resetSurfacePortalScopeForTests,
   s as ensureDialogSurfaceInteractionTracking,
-  T as ensureSurfacePortalInteractionTracking,
+  R as ensureSurfacePortalInteractionTracking,
   u as isSurfacePortalMode,
-  b as projectSurfacePortalPosition,
-  P as projectSurfacePortalRect,
-  _ as resolveSurfacePortalBoundaryRect,
+  P as projectSurfacePortalPosition,
+  C as projectSurfacePortalRect,
+  b as resolveSurfacePortalBoundaryRect,
   L as resolveSurfacePortalHost,
-  v as resolveSurfacePortalMount,
+  S as resolveSurfacePortalMount,
   h as resolveSurfacePortalMountRect
 };

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

@@ -4,7 +4,7 @@ export { Input, Textarea, NumberInput, AffixInput, type InputProps, type InputSi
 export { Dialog, ConfirmDialog, type DialogProps, type ConfirmDialogProps } from './Dialog';
 export { FloatingWindow, type FloatingWindowProps } from './FloatingWindow';
 export { createFloatingPresence, type FloatingPresence, type FloatingPresenceOptions, type FloatingPresenceState, } from './floatingPresence';
-export { MENU_ITEM_SELECTOR, focusMenuItem, getMenuItems, handleMenuKeyboardNavigation, moveMenuFocus, type MenuDismissReason, type MenuFocusMode, type MenuKeyboardNavigationOptions, } from './menuUtils';
+export { MENU_ITEM_SELECTOR, focusMenuItem, getMenuItems, handleMenuKeyboardNavigation, moveMenuFocus, type MenuDismissReason, type MenuFocusMode, type MenuItemNavigationOptions, type MenuKeyboardNavigationOptions, } from './menuUtils';
 export { resolveFloatingWindowViewport, type FloatingWindowRect, type FloatingWindowViewport, type FloatingWindowViewportInsets, } from './floatingWindowGeometry';
 export { Dropdown, Select, type DropdownProps, type DropdownItem, type SelectProps, } from './Dropdown';
 export { SurfaceFloatingLayer, type SurfaceFloatingLayerPosition, type SurfaceFloatingLayerProps, type SurfaceFloatingLayerSize, } from './SurfaceFloatingLayer';

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

@@ -10,8 +10,13 @@ export type MenuBoundaryRect = Readonly<{
 }>;
 export type MenuFocusMode = 'first' | 'last' | 'selected';
 export type MenuDismissReason = 'escape' | 'tab' | 'shift-tab';
-export type MenuKeyboardNavigationOptions = Readonly<{
+export type MenuItemNavigationOptions = Readonly<{
+    includeAriaDisabledItems?: boolean;
+}>;
+export type MenuKeyboardNavigationOptions = MenuItemNavigationOptions & Readonly<{
     onDismiss: (reason: MenuDismissReason) => void;
+    onActivate?: (item: HTMLElement) => void;
+    preventDefaultOnTab?: boolean;
 }>;
 export declare function resolveViewportMenuBoundaryRect(): MenuBoundaryRect;
 export declare function clampMenuPosition(anchor: Readonly<{
@@ -33,7 +38,7 @@ export declare function calculateSubmenuPosition(parentRect: DOMRect, submenuRec
     y: number;
 };
 export declare function getWrappedMenuItemIndex(length: number, currentIndex: number, delta: 1 | -1): number | null;
-export declare function getMenuItems(root: ParentNode | null | undefined): HTMLElement[];
-export declare function focusMenuItem(root: ParentNode | null | undefined, mode?: MenuFocusMode): boolean;
-export declare function moveMenuFocus(root: ParentNode | null | undefined, current: HTMLElement | null, delta: 1 | -1): boolean;
+export declare function getMenuItems(root: ParentNode | null | undefined, options?: MenuItemNavigationOptions): HTMLElement[];
+export declare function focusMenuItem(root: ParentNode | null | undefined, mode?: MenuFocusMode, options?: MenuItemNavigationOptions): boolean;
+export declare function moveMenuFocus(root: ParentNode | null | undefined, current: HTMLElement | null, delta: 1 | -1, options?: MenuItemNavigationOptions): boolean;
 export declare function handleMenuKeyboardNavigation(event: KeyboardEvent, options: MenuKeyboardNavigationOptions): boolean;

package/dist/components/ui/menuUtils.js

@@ -1,5 +1,5 @@
-const E = 8, h = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
-function M() {
+const E = 8, I = '[role="menuitem"]:not([disabled]):not([aria-disabled="true"])';
+function c() {
   return typeof window > "u" ? {
     left: 0,
     top: 0,
@@ -16,97 +16,102 @@ function M() {
     height: window.innerHeight
   };
 }
-function f(t) {
-  return t ?? M();
+function l(t) {
+  return t ?? c();
 }
-function w(t, e, r) {
-  const n = f(r);
-  let o = t.x, i = t.y;
-  return o + e.width > n.right - 8 && (o = n.right - e.width - 8), i + e.height > n.bottom - 8 && (i = n.bottom - e.height - 8), {
-    x: Math.max(n.left + 8, o),
-    y: Math.max(n.top + 8, i)
+function A(t, e, a) {
+  const n = l(a);
+  let i = t.x, r = t.y;
+  return i + e.width > n.right - 8 && (i = n.right - e.width - 8), r + e.height > n.bottom - 8 && (r = n.bottom - e.height - 8), {
+    x: Math.max(n.left + 8, i),
+    y: Math.max(n.top + 8, r)
   };
 }
-function T(t, e, r, n) {
-  const o = f(n);
-  let i;
-  switch (r) {
+function T(t, e, a, n) {
+  const i = l(n);
+  let r;
+  switch (a) {
     case "center":
-      i = t.left + t.width / 2 - e.width / 2;
+      r = t.left + t.width / 2 - e.width / 2;
       break;
     case "end":
-      i = t.right - e.width;
+      r = t.right - e.width;
       break;
     default:
-      i = t.left;
+      r = t.left;
   }
-  let a = t.bottom + 4;
-  if (i + e.width > o.right - 8 && (i = o.right - e.width - 8), i = Math.max(o.left + 8, i), a + e.height > o.bottom - 8) {
-    const s = t.top - o.top - 8, d = o.bottom - t.bottom - 8;
-    s > d && s >= e.height ? a = t.top - e.height - 4 : a = o.bottom - e.height - 8;
+  let o = t.bottom + 4;
+  if (r + e.width > i.right - 8 && (r = i.right - e.width - 8), r = Math.max(i.left + 8, r), o + e.height > i.bottom - 8) {
+    const f = t.top - i.top - 8, d = i.bottom - t.bottom - 8;
+    f > d && f >= e.height ? o = t.top - e.height - 4 : o = i.bottom - e.height - 8;
   }
-  return a = Math.max(o.top + 8, a), { x: i, y: a };
+  return o = Math.max(i.top + 8, o), { x: r, y: o };
 }
-function A(t, e, r) {
-  const n = f(r);
-  let o = t.right, i = t.top;
-  if (o + e.width > n.right - 8) {
-    const a = t.left - e.width;
-    a >= n.left + 8 ? o = a : o = n.right - e.width - 8;
+function m(t, e, a) {
+  const n = l(a);
+  let i = t.right, r = t.top;
+  if (i + e.width > n.right - 8) {
+    const o = t.left - e.width;
+    o >= n.left + 8 ? i = o : i = n.right - e.width - 8;
   }
-  return i + e.height > n.bottom - 8 && (i = n.bottom - e.height - 8), o = Math.max(n.left + 8, o), i = Math.max(n.top + 8, i), { x: o, y: i };
+  return r + e.height > n.bottom - 8 && (r = n.bottom - e.height - 8), i = Math.max(n.left + 8, i), r = Math.max(n.top + 8, r), { x: i, y: r };
 }
-function c(t, e, r) {
-  return t <= 0 ? null : e < 0 ? r > 0 ? 0 : t - 1 : (e + r + t) % t;
+function M(t, e, a) {
+  return t <= 0 ? null : e < 0 ? a > 0 ? 0 : t - 1 : (e + a + t) % t;
 }
-function I(t) {
-  return !t || typeof HTMLElement > "u" ? [] : Array.from(t.querySelectorAll(h)).filter(
-    (e) => e instanceof HTMLElement
+function u(t, e = {}) {
+  if (!t || typeof HTMLElement > "u") return [];
+  const a = e.includeAriaDisabledItems ? '[role="menuitem"]:not([disabled])' : I;
+  return Array.from(t.querySelectorAll(a)).filter(
+    (n) => n instanceof HTMLElement
   );
 }
-function l(t, e = "first") {
-  const r = I(t);
-  if (!r.length) return !1;
-  let n = r[0];
-  return e === "last" ? n = r[r.length - 1] : e === "selected" && (n = r.find((o) => o.getAttribute("data-floe-selected") === "true") ?? r[0]), n.focus(), !0;
-}
-function u(t, e, r) {
-  const n = I(t);
+function s(t, e = "first", a = {}) {
+  const n = u(t, a);
   if (!n.length) return !1;
-  const o = e ? n.indexOf(e) : -1, i = c(n.length, o, r);
-  return i === null ? !1 : (n[i]?.focus(), !0);
+  let i = n[0];
+  return e === "last" ? i = n[n.length - 1] : e === "selected" && (i = n.find((r) => r.getAttribute("data-floe-selected") === "true") ?? n[0]), i.focus(), !0;
+}
+function h(t, e, a, n = {}) {
+  const i = u(t, n);
+  if (!i.length) return !1;
+  const r = e ? i.indexOf(e) : -1, o = M(i.length, r, a);
+  return o === null ? !1 : (i[o]?.focus(), !0);
 }
-function P(t, e) {
-  const r = typeof HTMLElement < "u" && t.target instanceof HTMLElement ? t.target : null, n = r?.closest('[role="menu"]');
+function w(t, e) {
+  const a = typeof HTMLElement < "u" && t.target instanceof HTMLElement ? t.target : null, n = a?.closest('[role="menu"]');
   if (!n) return !1;
-  const o = r?.closest(h);
+  const i = u(n, e), r = a?.closest('[role="menuitem"]'), o = r && i.includes(r) ? r : null;
   switch (t.key) {
     case "ArrowDown":
-      return t.preventDefault(), u(n, o, 1), !0;
+      return t.preventDefault(), h(n, o, 1, e), !0;
     case "ArrowUp":
-      return t.preventDefault(), u(n, o, -1), !0;
+      return t.preventDefault(), h(n, o, -1, e), !0;
     case "Home":
-      return t.preventDefault(), l(n, "first"), !0;
+      return t.preventDefault(), s(n, "first", e), !0;
     case "End":
-      return t.preventDefault(), l(n, "last"), !0;
+      return t.preventDefault(), s(n, "last", e), !0;
+    case "Enter":
+    case " ":
+      return o ? o.getAttribute("aria-disabled") === "true" ? (t.preventDefault(), !0) : e.onActivate ? (t.preventDefault(), e.onActivate(o), !0) : !1 : !1;
     case "Escape":
       return t.preventDefault(), t.stopPropagation(), e.onDismiss("escape"), !0;
     case "Tab":
-      return e.onDismiss(t.shiftKey ? "shift-tab" : "tab"), !0;
+      return e.preventDefaultOnTab && t.preventDefault(), e.onDismiss(t.shiftKey ? "shift-tab" : "tab"), !0;
     default:
       return !1;
   }
 }
 export {
-  h as MENU_ITEM_SELECTOR,
+  I as MENU_ITEM_SELECTOR,
   E as VIEWPORT_MARGIN,
   T as calculateMenuPosition,
-  A as calculateSubmenuPosition,
-  w as clampMenuPosition,
-  l as focusMenuItem,
-  I as getMenuItems,
-  c as getWrappedMenuItemIndex,
-  P as handleMenuKeyboardNavigation,
-  u as moveMenuFocus,
-  M as resolveViewportMenuBoundaryRect
+  m as calculateSubmenuPosition,
+  A as clampMenuPosition,
+  s as focusMenuItem,
+  u as getMenuItems,
+  M as getWrappedMenuItemIndex,
+  w as handleMenuKeyboardNavigation,
+  h as moveMenuFocus,
+  c as resolveViewportMenuBoundaryRect
 };

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

@@ -1 +1 @@
-export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, resolveSurfacePortalHost, isSurfacePortalMode, resolveSurfacePortalMount, resolveSurfacePortalBoundaryRect, resolveSurfacePortalMountRect, projectSurfacePortalPosition, projectSurfacePortalRect, __resetSurfacePortalScopeForTests, type SurfacePortalInteractionSnapshot, type SurfacePortalHostResolutionOptions, type SurfacePortalMode, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalRect, } from './dialogSurfaceScope';
+export { DIALOG_SURFACE_HOST_ATTR, SURFACE_PORTAL_HOST_ATTR, SURFACE_PORTAL_LAYER_ATTR, SURFACE_FLOATING_LAYER_ATTR, DIALOG_SURFACE_BOUNDARY_ATTR, ensureSurfacePortalInteractionTracking, resolveSurfacePortalHost, isSurfacePortalMode, resolveSurfacePortalMount, resolveSurfacePortalBoundaryRect, resolveSurfacePortalMountRect, projectSurfacePortalPosition, projectSurfacePortalRect, __resetSurfacePortalScopeForTests, type SurfacePortalInteractionSnapshot, type SurfacePortalHostResolutionOptions, type SurfacePortalMode, type ResolvedSurfacePortalHost, type SurfacePortalBoundaryRect, type SurfacePortalRect, } from './dialogSurfaceScope';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.39.3",
+  "version": "0.39.5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",