@geomak/ui 1.6.1 → 1.7.0

package/dist/index.d.cts

@@ -1,8 +1,80 @@
 export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.cjs';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
+interface PortalProps {
+    /** Content to render at the target node. */
+    children: React$1.ReactNode;
+    /**
+     * Where to mount the portal.
+     * - omitted / undefined → `document.body` (the safe default for viewport-anchored UI)
+     * - HTMLElement        → that exact node
+     * - () => HTMLElement  → resolved at mount time (lets you query the DOM after layout)
+     * - null               → portal is disabled and renders nothing
+     */
+    target?: HTMLElement | (() => HTMLElement | null) | null;
+}
+/**
+ * SSR-safe portal helper. Renders `children` at a detached DOM node — by
+ * default `document.body` — so that any `position: fixed` descendant resolves
+ * against the real viewport, never against a transformed, filtered, or
+ * contained ancestor.
+ *
+ * ## Why this exists
+ *
+ * Per CSS spec, **any ancestor with `transform`, `filter`, `perspective`,
+ * `will-change`, or `contain: layout|paint|strict` creates a new containing
+ * block for `position: fixed` descendants**. The fixed element then resolves
+ * its coordinates against that ancestor, not the viewport — silently breaking
+ * full-screen overlays, toast viewports, mobile drawers, and loading screens
+ * whenever the consumer wraps the component in:
+ *   - a page-transition library (Framer Motion, view transitions)
+ *   - a modal/drawer (Storybook's centered-layout wrapper hits this too)
+ *   - a card with `contain: layout` or `will-change: transform`
+ *   - a CSS filter (backdrop-blur, drop-shadow on a card)
+ *
+ * Portaling to `document.body` makes the component **immune** to any
+ * styling its consumer applies to ancestor elements. This is the same
+ * pattern Radix UI uses internally for every overlay primitive
+ * (`Dialog.Portal`, `Tooltip.Portal`, `Popover.Portal`, etc.).
+ *
+ * ## When to use it
+ *
+ * Wrap any element that uses `position: fixed` to anchor itself to the
+ * viewport — full-screen overlays, toast viewports, drawers, loading
+ * screens, command palettes. If you're using a Radix primitive, prefer
+ * its built-in `*.Portal` component (they're equivalent but match the
+ * primitive's lifecycle).
+ *
+ * ## SSR / hydration
+ *
+ * `document.body` isn't available during SSR or the very first client
+ * render. The component renders `null` until `useEffect` resolves the
+ * target post-mount, then re-renders with the portal in place. Content
+ * that needs to appear immediately on mount will paint one frame later
+ * — acceptable for overlays (the trigger interaction is what kicks them
+ * off anyway).
+ *
+ * @example Full-screen loading overlay
+ * <Portal>
+ *   <div className="fixed inset-0 bg-black/40 z-overlay">
+ *     <Spinner />
+ *   </div>
+ * </Portal>
+ *
+ * @example Mount to a specific element
+ * <Portal target={() => document.getElementById('app-root')}>
+ *   <Drawer />
+ * </Portal>
+ *
+ * @example Conditionally disable (e.g. SSR-only render)
+ * <Portal target={shouldPortal ? undefined : null}>
+ *   <Banner />
+ * </Portal>
+ */
+declare function Portal({ children, target }: PortalProps): React$1.ReactPortal;
+
 declare const Icon: {
     (): react_jsx_runtime.JSX.Element;
     Moon: ({ color }: {
@@ -1596,4 +1668,4 @@ declare const Temporal: {
     TemporalPicker: typeof TemporalPickerBase;
 };
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };

package/dist/index.d.ts

@@ -1,8 +1,80 @@
 export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.js';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
+interface PortalProps {
+    /** Content to render at the target node. */
+    children: React$1.ReactNode;
+    /**
+     * Where to mount the portal.
+     * - omitted / undefined → `document.body` (the safe default for viewport-anchored UI)
+     * - HTMLElement        → that exact node
+     * - () => HTMLElement  → resolved at mount time (lets you query the DOM after layout)
+     * - null               → portal is disabled and renders nothing
+     */
+    target?: HTMLElement | (() => HTMLElement | null) | null;
+}
+/**
+ * SSR-safe portal helper. Renders `children` at a detached DOM node — by
+ * default `document.body` — so that any `position: fixed` descendant resolves
+ * against the real viewport, never against a transformed, filtered, or
+ * contained ancestor.
+ *
+ * ## Why this exists
+ *
+ * Per CSS spec, **any ancestor with `transform`, `filter`, `perspective`,
+ * `will-change`, or `contain: layout|paint|strict` creates a new containing
+ * block for `position: fixed` descendants**. The fixed element then resolves
+ * its coordinates against that ancestor, not the viewport — silently breaking
+ * full-screen overlays, toast viewports, mobile drawers, and loading screens
+ * whenever the consumer wraps the component in:
+ *   - a page-transition library (Framer Motion, view transitions)
+ *   - a modal/drawer (Storybook's centered-layout wrapper hits this too)
+ *   - a card with `contain: layout` or `will-change: transform`
+ *   - a CSS filter (backdrop-blur, drop-shadow on a card)
+ *
+ * Portaling to `document.body` makes the component **immune** to any
+ * styling its consumer applies to ancestor elements. This is the same
+ * pattern Radix UI uses internally for every overlay primitive
+ * (`Dialog.Portal`, `Tooltip.Portal`, `Popover.Portal`, etc.).
+ *
+ * ## When to use it
+ *
+ * Wrap any element that uses `position: fixed` to anchor itself to the
+ * viewport — full-screen overlays, toast viewports, drawers, loading
+ * screens, command palettes. If you're using a Radix primitive, prefer
+ * its built-in `*.Portal` component (they're equivalent but match the
+ * primitive's lifecycle).
+ *
+ * ## SSR / hydration
+ *
+ * `document.body` isn't available during SSR or the very first client
+ * render. The component renders `null` until `useEffect` resolves the
+ * target post-mount, then re-renders with the portal in place. Content
+ * that needs to appear immediately on mount will paint one frame later
+ * — acceptable for overlays (the trigger interaction is what kicks them
+ * off anyway).
+ *
+ * @example Full-screen loading overlay
+ * <Portal>
+ *   <div className="fixed inset-0 bg-black/40 z-overlay">
+ *     <Spinner />
+ *   </div>
+ * </Portal>
+ *
+ * @example Mount to a specific element
+ * <Portal target={() => document.getElementById('app-root')}>
+ *   <Drawer />
+ * </Portal>
+ *
+ * @example Conditionally disable (e.g. SSR-only render)
+ * <Portal target={shouldPortal ? undefined : null}>
+ *   <Banner />
+ * </Portal>
+ */
+declare function Portal({ children, target }: PortalProps): React$1.ReactPortal;
+
 declare const Icon: {
     (): react_jsx_runtime.JSX.Element;
     Moon: ({ color }: {
@@ -1596,4 +1668,4 @@ declare const Temporal: {
     TemporalPicker: typeof TemporalPickerBase;
 };
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };

package/dist/index.js

@@ -1,7 +1,8 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
+import React10, { createContext, useState, useEffect, useMemo, useContext, useRef, useCallback, useId } from 'react';
+import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React9, { createContext, useMemo, useState, useEffect, useContext, useRef, useCallback, useId } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -13,6 +14,18 @@ import * as Popover from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 
+function Portal({ children, target }) {
+  const [resolved, setResolved] = useState(null);
+  useEffect(() => {
+    if (target === null) {
+      setResolved(null);
+      return;
+    }
+    const node = typeof target === "function" ? target() : target ?? document.body;
+    setResolved(node ?? null);
+  }, [target]);
+  return resolved ? createPortal(children, resolved) : null;
+}
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" }) });
 var Sun = ({ color = "yellow" }) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" }) });
 var CheckCircle = ({ color = "#fff", size = 28 }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14 0.25C6.40625 0.25 0.25 6.40625 0.25 14C0.25 21.5937 6.40625 27.75 14 27.75C21.5937 27.75 27.75 21.5937 27.75 14C27.75 6.40625 21.5937 0.25 14 0.25ZM19.96 11.675C20.0697 11.5496 20.1533 11.4034 20.2057 11.2452C20.2582 11.087 20.2784 10.9199 20.2653 10.7537C20.2522 10.5876 20.206 10.4257 20.1295 10.2777C20.0529 10.1296 19.9475 9.99838 19.8194 9.89168C19.6914 9.78497 19.5433 9.70495 19.3839 9.65633C19.2244 9.6077 19.0569 9.59145 18.8911 9.60853C18.7253 9.62562 18.5646 9.67568 18.4184 9.75579C18.2723 9.8359 18.1436 9.94443 18.04 10.075L12.665 16.5237L9.88375 13.7412C9.648 13.5136 9.33224 13.3876 9.0045 13.3904C8.67675 13.3933 8.36324 13.5247 8.13148 13.7565C7.89972 13.9882 7.76825 14.3018 7.76541 14.6295C7.76256 14.9572 7.88855 15.273 8.11625 15.5087L11.8662 19.2587C11.9891 19.3815 12.1361 19.4773 12.298 19.5401C12.4599 19.6028 12.6331 19.6312 12.8066 19.6233C12.98 19.6154 13.15 19.5715 13.3055 19.4943C13.4611 19.4171 13.5988 19.3084 13.71 19.175L19.96 11.675Z", fill: color }) });
@@ -735,11 +748,11 @@ var TYPE_BG = {
   danger: "bg-status-error"
 };
 var VIEWPORT_CLASSES = {
-  "top-right": "fixed top-14 right-0     flex flex-col       items-end",
-  "top-left": "fixed top-14 left-0      flex flex-col       items-start",
-  "top-center": "fixed top-14 left-1/2    flex flex-col       items-center -translate-x-1/2",
-  "bottom-right": "fixed bottom-4 right-0   flex flex-col-reverse items-end",
-  "bottom-left": "fixed bottom-4 left-0    flex flex-col-reverse items-start",
+  "top-right": "fixed top-4    right-4   flex flex-col         items-end",
+  "top-left": "fixed top-4    left-4    flex flex-col         items-start",
+  "top-center": "fixed top-4    left-1/2  flex flex-col         items-center -translate-x-1/2",
+  "bottom-right": "fixed bottom-4 right-4   flex flex-col-reverse items-end",
+  "bottom-left": "fixed bottom-4 left-4    flex flex-col-reverse items-start",
   "bottom-center": "fixed bottom-4 left-1/2  flex flex-col-reverse items-center -translate-x-1/2"
 };
 function getInitialMotion(pos, reduced) {
@@ -747,9 +760,9 @@ function getInitialMotion(pos, reduced) {
   const bottom = pos.startsWith("bottom");
   return {
     opacity: 0,
-    y: bottom ? 10 : -10,
-    // drop in from above (top) or rise from below (bottom)
-    scale: 0.94
+    y: bottom ? 24 : -24,
+    // rise from below (bottom) or drop from above (top)
+    scale: 0.92
   };
 }
 function TypeIcon({ type }) {
@@ -790,15 +803,25 @@ function NotificationItem({
   return /* @__PURE__ */ jsx(
     motion.div,
     {
-      layout: true,
+      className: "pointer-events-auto",
       initial,
       animate: { opacity: 1, y: 0, scale: 1 },
-      exit: initial,
+      exit: {
+        opacity: 0,
+        y: pos.startsWith("bottom") ? 16 : -16,
+        scale: 0.94,
+        transition: reduced ? { duration: 0 } : {
+          opacity: { duration: 0.14, delay: 0.06 },
+          y: { type: "tween", duration: 0.22, ease: [0.4, 0, 1, 1] },
+          scale: { type: "tween", duration: 0.22, ease: [0.4, 0, 1, 1] }
+        }
+      },
       transition: reduced ? { duration: 0 } : {
-        opacity: { duration: 0.18 },
-        y: { type: "tween", duration: 0.24, ease: [0.16, 1, 0.3, 1] },
-        scale: { type: "tween", duration: 0.24, ease: [0.16, 1, 0.3, 1] },
-        layout: { duration: 0.2, ease: [0.16, 1, 0.3, 1] }
+        // Opacity finishes in 0.15 s — card is fully opaque while y/scale
+        // still have ~55 % of their travel left → movement is clearly visible.
+        opacity: { duration: 0.15 },
+        y: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] },
+        scale: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] }
       },
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
@@ -866,13 +889,13 @@ function NotificationProvider({
   };
   return /* @__PURE__ */ jsx(NotificationContext.Provider, { value: { open, close }, children: /* @__PURE__ */ jsxs(Toast.Provider, { swipeDirection: position.endsWith("right") ? "right" : position.endsWith("left") ? "left" : "up", children: [
     children,
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
       Toast.Viewport,
       {
         asChild: true,
         className: [
           VIEWPORT_CLASSES[position],
-          "z-[500000] gap-2 w-[332px] p-4 outline-none"
+          "z-[500000] gap-2 w-[332px] outline-none pointer-events-none"
         ].join(" "),
         children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsx(
           NotificationItem,
@@ -885,7 +908,7 @@ function NotificationProvider({
           n.id
         )) }) })
       }
-    )
+    ) })
   ] }) });
 }
 function useNotification() {
@@ -912,20 +935,24 @@ function LoadingSpinner({ prompt }) {
     }
     return () => timeouts.forEach(clearTimeout);
   }, [letterRefs, letters.length]);
-  return /* @__PURE__ */ jsxs("div", { className: "fixed top-0 bottom-0 right-0 left-0 bg-oxford-blue-700-opaque z-[8000000] flex flex-col gap-5 items-center justify-start pt-80", children: [
-    /* @__PURE__ */ jsx("div", { className: "border-r-prussian-blue border-l-prussian-blue border-t-white border-b-white border-[10px] w-[80px] h-[80px] rounded-xl shapeshift" }),
-    /* @__PURE__ */ jsx("div", { className: "text-prussian-blue dark:text-white text-3xl font-bold", children: letters.map((letter, index) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "select-none",
-        ref: (ref) => {
-          letterRefs[index] = ref;
+  return (
+    // Portaled so the full-screen overlay always covers the real viewport,
+    // not whatever container the consumer renders LoadingSpinner inside.
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("div", { className: "fixed top-0 bottom-0 right-0 left-0 bg-oxford-blue-700-opaque z-[8000000] flex flex-col gap-5 items-center justify-start pt-80", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-r-prussian-blue border-l-prussian-blue border-t-white border-b-white border-[10px] w-[80px] h-[80px] rounded-xl shapeshift" }),
+      /* @__PURE__ */ jsx("div", { className: "text-prussian-blue dark:text-white text-3xl font-bold", children: letters.map((letter, index) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "select-none",
+          ref: (ref) => {
+            letterRefs[index] = ref;
+          },
+          children: letter
         },
-        children: letter
-      },
-      index
-    )) })
-  ] });
+        index
+      )) })
+    ] }) })
+  );
 }
 function FadingBase({
   className = "",
@@ -1395,7 +1422,7 @@ function Wizard({ children, steps, storageKey = "po_wizard" }) {
     children
   ] });
 }
-var SearchInput = React9.forwardRef(function SearchInput2({
+var SearchInput = React10.forwardRef(function SearchInput2({
   value,
   onChange,
   disabled,
@@ -1659,7 +1686,7 @@ function TableBody({
       setVisibleRows(initial);
     }
   }, [rows]);
-  return /* @__PURE__ */ jsx("tbody", { className: "w-full", children: rows.map((row, i) => /* @__PURE__ */ jsxs(React9.Fragment, { children: [
+  return /* @__PURE__ */ jsx("tbody", { className: "w-full", children: rows.map((row, i) => /* @__PURE__ */ jsxs(React10.Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "tr",
       {
@@ -2109,7 +2136,7 @@ function AppShell({
           footer: sidebarFooter
         }
       ),
-      hasSidebar && isMobile && /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasSidebar && isMobile && /* @__PURE__ */ jsxs(Portal, { children: [
         /* @__PURE__ */ jsx(AnimatePresence, { children: mobileOpen && /* @__PURE__ */ jsx(
           motion.div,
           {
@@ -2240,7 +2267,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React9.useId().replace(/:/g, "");
+  const id = React10.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -3272,6 +3299,6 @@ Temporal.DatePicker = DatePickerBase;
 Temporal.TemporalPicker = TemporalPickerBase;
 var DatePicker_default = Temporal;
 
-export { AppShell, AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker_default as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
+export { AppShell, AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker_default as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map