@floegence/floe-webapp-core 0.46.3 → 0.46.5

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

@@ -8,7 +8,7 @@ export interface DialogProps {
     children: JSX.Element;
     footer?: JSX.Element;
     class?: string;
-    /** Optional stacking layer for global dialogs. Surface-scoped dialogs remain locally layered. */
+    /** Optional stacking layer for global dialogs. Overrides the placement provider default. */
     globalZIndex?: number;
 }
 /**

package/dist/components/ui/Dialog.js

@@ -1,77 +1,78 @@
-import { createComponent as r, use as E, setAttribute as f, style as W, Portal as Y, spread as R, mergeProps as k, memo as P, insert as d, effect as H, template as u } from "solid-js/web";
-import { createUniqueId as X, createSignal as S, createMemo as N, createEffect as J, onCleanup as Q, Show as h, untrack as ee } from "solid-js";
-import { cn as p } from "../../utils/cn.js";
-import { Button as I } from "./Button.js";
-import { X as te } from "../icons/index.js";
-import { useResolvedFloeConfig as ne } from "../../context/FloeConfigContext.js";
-import { useOverlayMask as re } from "../../hooks/useOverlayMask.js";
-import { resolveSurfacePortalHost as oe, isSurfacePortalMode as F, DIALOG_SURFACE_BOUNDARY_ATTR as _, projectSurfacePortalRect as ie, resolveSurfacePortalBoundaryRect as le, resolveSurfacePortalMount as ae } from "./dialogSurfaceScope.js";
-import { LOCAL_INTERACTION_SURFACE_ATTR as de } from "./localInteractionSurface.js";
-import { createFloatingPresence as ce } from "./floatingPresence.js";
-var ue = /* @__PURE__ */ u("<span aria-hidden=true>"), se = /* @__PURE__ */ u('<h2 class="text-sm font-semibold">'), fe = /* @__PURE__ */ u('<p class="mt-0.5 text-xs text-muted-foreground">'), ge = /* @__PURE__ */ u('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), me = /* @__PURE__ */ u('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), he = /* @__PURE__ */ u('<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">'), be = /* @__PURE__ */ u("<div>");
-const we = {
+import { createComponent as r, use as E, setAttribute as f, style as Y, Portal as X, spread as k, mergeProps as P, memo as S, insert as a, effect as N, template as u } from "solid-js/web";
+import { createUniqueId as J, createSignal as I, createMemo as H, createEffect as Q, onCleanup as ee, Show as b, untrack as te } from "solid-js";
+import { cn as A } from "../../utils/cn.js";
+import { Button as B } from "./Button.js";
+import { X as ne } from "../icons/index.js";
+import { useResolvedFloeConfig as re } from "../../context/FloeConfigContext.js";
+import { useOverlayMask as oe } from "../../hooks/useOverlayMask.js";
+import { resolveSurfacePortalHost as ie, DIALOG_SURFACE_BOUNDARY_ATTR as O, isSurfacePortalMode as j, projectSurfacePortalRect as le, resolveSurfacePortalBoundaryRect as ae, resolveSurfacePortalMount as de } from "./dialogSurfaceScope.js";
+import { LOCAL_INTERACTION_SURFACE_ATTR as ce } from "./localInteractionSurface.js";
+import { createFloatingPresence as ue } from "./floatingPresence.js";
+import { useDialogPlacement as se } from "./DialogPlacementContext.js";
+var fe = /* @__PURE__ */ u("<span aria-hidden=true>"), ge = /* @__PURE__ */ u('<h2 class="text-sm font-semibold">'), me = /* @__PURE__ */ u('<p class="mt-0.5 text-xs text-muted-foreground">'), he = /* @__PURE__ */ u('<div class="flex items-start justify-between p-3 border-b border-border"><div>'), be = /* @__PURE__ */ u('<div class="flex items-center justify-end gap-2 p-3 border-t border-border">'), ve = /* @__PURE__ */ u('<div><div></div><div class="pointer-events-none relative z-[1] flex h-full w-full items-center justify-center"><div><div class="flex-1 overflow-auto overscroll-contain p-3">'), we = /* @__PURE__ */ u("<div>");
+const ye = {
   display: "none"
 };
-function ve(e) {
+function xe(e) {
   if (typeof queueMicrotask == "function") {
     queueMicrotask(e);
     return;
   }
   Promise.resolve().then(e);
 }
-function j(e) {
+function q(e) {
   return `${e.left}|${e.top}|${e.right}|${e.bottom}|${e.width}|${e.height}`;
 }
-function ye(e) {
+function pe(e) {
   return typeof window < "u" && typeof window.requestAnimationFrame == "function" ? window.requestAnimationFrame(e) : window.setTimeout(() => e(Date.now()), 16);
 }
-function xe(e) {
+function $e(e) {
   if (typeof window < "u" && typeof window.cancelAnimationFrame == "function") {
     window.cancelAnimationFrame(e);
     return;
   }
   window.clearTimeout(e);
 }
-function $e(e) {
-  const o = X(), B = () => `dialog-${o}-title`, T = () => `dialog-${o}-description`;
-  let C;
-  const [b, q] = S(null), [D, G] = S(0), [z, L] = S(0), M = () => e.open && !!b() && D() > 0, s = ce({
-    open: M,
+function _e(e) {
+  const g = se(), d = J(), F = () => `dialog-${d}-title`, D = () => `dialog-${d}-description`;
+  let v;
+  const [w, G] = I(null), [M, z] = I(0), [L, Z] = I(0), s = ue({
+    open: () => e.open && !!w() && M() > 0,
     exitDurationMs: 120
-  }), A = () => s.mounted() && !!b() && D() > 0, U = (t) => {
-    q(t), ve(() => {
-      ee(b) === t && G((l) => l + 1);
+  }), y = () => s.mounted() && !!w() && M() > 0, U = (t) => {
+    G(t), xe(() => {
+      te(w) === t && z((i) => i + 1);
     });
-  }, w = N(() => A() ? oe({
-    owner: b()
+  }, x = H(() => y() ? ie({
+    owner: w()
   }) : {
     host: null,
     boundaryHost: null,
     mountHost: null,
     mode: "global"
-  }), v = () => `dialog-boundary-${o}`, n = () => F(w()), V = () => ae(w()), O = (t) => ie(le(t), t), Z = () => O(w()), y = N(() => (z(), Z())), K = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${_}="${v()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${_}="${v()}"]`) : !1;
-  return J(() => {
-    const t = w();
-    if (!A() || !F(t) || typeof window > "u")
+  }), p = () => `dialog-boundary-${d}`, n = () => g.mode() === "auto" && j(x()), V = () => n() ? de(x()) : void 0, T = () => e.globalZIndex ?? g.globalZIndex(), R = (t) => le(ae(t), t), K = () => R(x()), $ = H(() => (L(), K())), W = (t) => typeof Element < "u" && t instanceof Element ? !!t.closest(`[${O}="${p()}"]`) : typeof Node < "u" && t instanceof Node ? !!t.parentElement?.closest(`[${O}="${p()}"]`) : !1;
+  return Q(() => {
+    const t = x();
+    if (!y() || !n() || typeof window > "u")
       return;
-    let l = !1, g = null, i = j(O(t));
-    const x = () => {
-      if (l || !F(t))
+    let i = !1, m = null, o = q(R(t));
+    const _ = () => {
+      if (i || !j(t))
         return;
-      const a = j(O(t));
-      a !== i && (i = a, L(($) => $ + 1));
-    }, m = () => {
-      l || (g = ye(() => {
-        x(), m();
+      const l = q(R(t));
+      l !== o && (o = l, Z((C) => C + 1));
+    }, h = () => {
+      i || (m = pe(() => {
+        _(), h();
       }));
     };
-    m(), Q(() => {
-      l = !0, g !== null && xe(g);
+    h(), ee(() => {
+      i = !0, m !== null && $e(m);
     });
-  }), re({
-    open: M,
-    root: () => C,
-    containsTarget: n() ? (t) => K(t) : void 0,
+  }), oe({
+    open: y,
+    root: () => v,
+    containsTarget: (t) => n() ? W(t) : typeof Node < "u" && t instanceof Node ? !!v?.contains(t) : !1,
     onClose: () => e.onOpenChange(!1),
     lockBodyScroll: () => !n(),
     trapFocus: !0,
@@ -82,20 +83,20 @@ function $e(e) {
     blockTouchMove: () => n() ? "none" : "outside",
     restoreFocus: !0
   }), [(() => {
-    var t = ue();
-    return E(U, t), f(t, "data-floe-dialog-owner-anchor", o), W(t, we), t;
-  })(), r(h, {
+    var t = fe();
+    return E(U, t), f(t, "data-floe-dialog-owner-anchor", d), Y(t, ye), t;
+  })(), r(b, {
     get when() {
-      return A();
+      return y();
     },
     get children() {
-      return r(Y, {
+      return r(X, {
         get mount() {
           return V();
         },
         get children() {
-          var t = he(), l = t.firstChild, g = l.nextSibling, i = g.firstChild, x = i.firstChild;
-          f(t, "data-floe-dialog-overlay-root", o), R(t, k({
+          var t = ve(), i = t.firstChild, m = i.nextSibling, o = m.firstChild, _ = o.firstChild;
+          f(t, "data-floe-dialog-overlay-root", d), k(t, P({
             get "data-floe-dialog-mode"() {
               return n() ? "surface" : "global";
             },
@@ -106,38 +107,38 @@ function $e(e) {
               return s.exiting() ? "true" : void 0;
             }
           }, () => ({
-            [de]: n() ? "true" : void 0
+            [ce]: n() ? "true" : void 0
           }), {
             get class() {
-              return p(n() ? "absolute z-20 box-border p-3" : p("fixed inset-0 box-border p-4", e.globalZIndex === void 0 && "z-50"), s.exiting() && "pointer-events-none");
+              return A(n() ? "absolute z-20 box-border p-3" : A("fixed inset-0 box-border p-4", T() === void 0 && "z-50"), s.exiting() && "pointer-events-none");
             },
             get style() {
-              return P(() => !!n())() ? {
-                left: `${y().left}px`,
-                top: `${y().top}px`,
-                width: `${y().width}px`,
-                height: `${y().height}px`
+              return S(() => !!n())() ? {
+                left: `${$().left}px`,
+                top: `${$().top}px`,
+                width: `${$().width}px`,
+                height: `${$().height}px`
               } : {
-                "z-index": e.globalZIndex
+                "z-index": T()
               };
             }
-          }), !1, !0), f(l, "data-floe-dialog-backdrop", o), R(l, k(() => ({
-            [_]: v()
+          }), !1, !0), f(i, "data-floe-dialog-backdrop", d), k(i, P(() => ({
+            [O]: p()
           }), {
             get "data-floating-presence"() {
               return s.state();
             },
             get class() {
-              return p("absolute inset-0 cursor-pointer floe-floating-presence floe-floating-backdrop", n() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
+              return A("absolute inset-0 cursor-pointer floe-floating-presence floe-floating-backdrop", n() ? "bg-background/72 backdrop-blur-[2px]" : "bg-background/80 backdrop-blur-sm");
             },
             onClick: () => e.onOpenChange(!1)
           }), !1, !1);
-          var m = C;
-          return typeof m == "function" ? E(m, i) : C = i, f(i, "data-floe-dialog-panel", o), R(i, k(() => ({
-            [_]: v()
+          var h = v;
+          return typeof h == "function" ? E(h, o) : v = o, f(o, "data-floe-dialog-panel", d), k(o, P(() => ({
+            [O]: p()
           }), {
             get class() {
-              return p(n() ? "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", "floe-floating-presence floe-floating-dialog-panel", "flex flex-col", e.class);
+              return A(n() ? "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", "floe-floating-presence floe-floating-dialog-panel", "pointer-events-auto flex flex-col", e.class);
             },
             get "data-floating-presence"() {
               return s.state();
@@ -147,54 +148,54 @@ function $e(e) {
               return n() ? void 0 : "true";
             },
             get "aria-labelledby"() {
-              return P(() => !!e.title)() ? B() : void 0;
+              return S(() => !!e.title)() ? F() : void 0;
             },
             get "aria-describedby"() {
-              return P(() => !!e.description)() ? T() : void 0;
+              return S(() => !!e.description)() ? D() : void 0;
             },
             tabIndex: -1
-          }), !1, !0), d(i, r(h, {
+          }), !1, !0), a(o, r(b, {
             get when() {
               return e.title || e.description;
             },
             get children() {
-              var a = ge(), $ = a.firstChild;
-              return d($, r(h, {
+              var l = he(), C = l.firstChild;
+              return a(C, r(b, {
                 get when() {
                   return e.title;
                 },
                 get children() {
-                  var c = se();
-                  return d(c, () => e.title), H(() => f(c, "id", B())), c;
+                  var c = ge();
+                  return a(c, () => e.title), N(() => f(c, "id", F())), c;
                 }
-              }), null), d($, r(h, {
+              }), null), a(C, r(b, {
                 get when() {
                   return e.description;
                 },
                 get children() {
-                  var c = fe();
-                  return d(c, () => e.description), H(() => f(c, "id", T())), c;
+                  var c = me();
+                  return a(c, () => e.description), N(() => f(c, "id", D())), c;
                 }
-              }), null), d(a, r(I, {
+              }), null), a(l, r(B, {
                 variant: "ghost-destructive",
                 size: "icon",
                 class: "-my-2 -mr-2 h-[46px] w-[46px] shrink-0 sm:my-0 sm:-mr-1 sm:h-6 sm:w-6",
                 onClick: () => e.onOpenChange(!1),
                 "aria-label": "Close",
                 get children() {
-                  return r(te, {
+                  return r(ne, {
                     class: "w-3.5 h-3.5"
                   });
                 }
-              }), null), a;
+              }), null), l;
             }
-          }), x), d(x, () => e.children), d(i, r(h, {
+          }), _), a(_, () => e.children), a(o, r(b, {
             get when() {
               return e.footer;
             },
             get children() {
-              var a = me();
-              return d(a, () => e.footer), a;
+              var l = be();
+              return a(l, () => e.footer), l;
             }
           }), null), t;
         }
@@ -202,9 +203,9 @@ function $e(e) {
     }
   })];
 }
-function Ie(e) {
-  const o = ne();
-  return r($e, {
+function Te(e) {
+  const g = re();
+  return r(_e, {
     get open() {
       return e.open;
     },
@@ -221,16 +222,16 @@ function Ie(e) {
       return e.globalZIndex;
     },
     get footer() {
-      return [r(I, {
+      return [r(B, {
         variant: "ghost",
         onClick: () => e.onOpenChange(!1),
         get disabled() {
           return e.loading;
         },
         get children() {
-          return e.cancelText ?? o.config.strings.confirmDialog.cancel;
+          return e.cancelText ?? g.config.strings.confirmDialog.cancel;
         }
-      }), r(I, {
+      }), r(B, {
         get variant() {
           return e.variant === "destructive" ? "destructive" : "primary";
         },
@@ -241,16 +242,16 @@ function Ie(e) {
           return e.loading;
         },
         get children() {
-          return e.confirmText ?? o.config.strings.confirmDialog.confirm;
+          return e.confirmText ?? g.config.strings.confirmDialog.confirm;
         }
       })];
     },
     get children() {
-      return e.children ?? be();
+      return e.children ?? we();
     }
   });
 }
 export {
-  Ie as ConfirmDialog,
-  $e as Dialog
+  Te as ConfirmDialog,
+  _e as Dialog
 };

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

@@ -0,0 +1,16 @@
+import { type Accessor, type JSX } from 'solid-js';
+export type DialogPlacementMode = 'auto' | 'global';
+export interface DialogPlacementProviderProps {
+    /** Resolve dialogs from their nearest surface host, or force document-level modal placement. */
+    mode: DialogPlacementMode;
+    /** Default stacking layer for global dialogs in this placement scope. */
+    globalZIndex?: number;
+    children: JSX.Element;
+}
+interface DialogPlacementContextValue {
+    mode: Accessor<DialogPlacementMode>;
+    globalZIndex: Accessor<number | undefined>;
+}
+export declare function DialogPlacementProvider(props: DialogPlacementProviderProps): JSX.Element;
+export declare function useDialogPlacement(): DialogPlacementContextValue;
+export {};

package/dist/components/ui/DialogPlacementContext.js

@@ -0,0 +1,26 @@
+import { createComponent as n } from "solid-js/web";
+import { useContext as r, createContext as l } from "solid-js";
+const a = {
+  mode: () => "auto",
+  globalZIndex: () => {
+  }
+}, o = l(a);
+function d(e) {
+  const t = {
+    mode: () => e.mode,
+    globalZIndex: () => e.globalZIndex
+  };
+  return n(o.Provider, {
+    value: t,
+    get children() {
+      return e.children;
+    }
+  });
+}
+function m() {
+  return r(o);
+}
+export {
+  d as DialogPlacementProvider,
+  m as useDialogPlacement
+};

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

@@ -2,6 +2,7 @@ export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from '.
 export { Tag, type TagProps, type TagVariant, type TagSize } from './Tag';
 export { Input, Textarea, NumberInput, AffixInput, type InputProps, type InputSize, type TextareaProps, type NumberInputProps, type AffixInputProps, type AffixOption, } from './Input';
 export { Dialog, ConfirmDialog, type DialogProps, type ConfirmDialogProps } from './Dialog';
+export { DialogPlacementProvider, type DialogPlacementMode, type DialogPlacementProviderProps, } from './DialogPlacementContext';
 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 MenuItemNavigationOptions, type MenuKeyboardNavigationOptions, } from './menuUtils';