@sovereignfs/ui 0.45.0 → 0.83.1

package/src/index.ts

@@ -1,3 +1,9 @@
+export { LegalLinks } from './components/LegalLinks/LegalLinks';
+export type { LegalLinksProps } from './components/LegalLinks/LegalLinks';
+export { ConsentPrompt } from './components/ConsentPrompt/ConsentPrompt';
+export type { ConsentPromptProps } from './components/ConsentPrompt/ConsentPrompt';
+export { Markdown } from './components/Markdown/Markdown';
+export type { MarkdownProps } from './components/Markdown/Markdown';
 export { Badge } from './components/Badge/Badge';
 export type { BadgeProps, BadgeVariant, BadgeStatus } from './components/Badge/Badge';
 export { Icon } from './components/Icon/Icon';
@@ -49,22 +55,60 @@ export type {
   MenuSeparator,
   MenuEntry,
 } from './components/Menu/Menu';
+export { UserMenu } from './components/UserMenu/UserMenu';
+export type { UserMenuProps, UserMenuItem } from './components/UserMenu/UserMenu';
+export { AppsLauncher } from './components/AppsLauncher/AppsLauncher';
+export type { AppsLauncherProps, AppsLauncherItem } from './components/AppsLauncher/AppsLauncher';
+export { NotificationsPanel } from './components/NotificationsPanel/NotificationsPanel';
+export type {
+  NotificationsPanelProps,
+  NotificationsPanelItem,
+} from './components/NotificationsPanel/NotificationsPanel';
 export { ToastProvider, useToast } from './components/Toast/Toast';
 export type { ToastItem, ToastContextValue } from './components/Toast/Toast';
 export { Card } from './components/Card/Card';
 export type { CardProps } from './components/Card/Card';
+
+export { CardTile, CardTileGrid, NewCardTile } from './components/CardTile/CardTile';
+export type {
+  CardTileProps,
+  CardTileGridProps,
+  NewCardTileProps,
+} from './components/CardTile/CardTile';
 export { FormField } from './components/FormField/FormField';
 export type { FormFieldProps, FormFieldRenderProps } from './components/FormField/FormField';
 export { PageHeader } from './components/PageHeader/PageHeader';
 export type { PageHeaderProps } from './components/PageHeader/PageHeader';
+export { PageContainer } from './components/PageContainer/PageContainer';
+export type { PageContainerProps } from './components/PageContainer/PageContainer';
+export { Header } from './components/Header/Header';
+export type { HeaderProps, HeaderPlugin } from './components/Header/Header';
+export { MobileHeader } from './components/MobileHeader/MobileHeader';
+export type { MobileHeaderProps } from './components/MobileHeader/MobileHeader';
+export { MobileFooter } from './components/MobileFooter/MobileFooter';
+export type { MobileFooterProps, FooterIcon } from './components/MobileFooter/MobileFooter';
+export { MobileAppsDrawer } from './components/MobileAppsDrawer/MobileAppsDrawer';
+export type {
+  MobileAppsDrawerProps,
+  MobileAppsDrawerItem,
+} from './components/MobileAppsDrawer/MobileAppsDrawer';
 export { EmptyState } from './components/EmptyState/EmptyState';
 export type { EmptyStateProps } from './components/EmptyState/EmptyState';
+export { OfflineGate } from './components/OfflineGate/OfflineGate';
+export type { OfflineGateProps } from './components/OfflineGate/OfflineGate';
+export { DeviceOnlyGate } from './components/DeviceOnlyGate/DeviceOnlyGate';
+export type { DeviceOnlyGateProps } from './components/DeviceOnlyGate/DeviceOnlyGate';
+export { DeviceStorageKeyGate } from './components/DeviceStorageKeyGate/DeviceStorageKeyGate';
+export type {
+  DeviceStorageKeyGateProps,
+  DeviceStorageKeyGateStatus,
+} from './components/DeviceStorageKeyGate/DeviceStorageKeyGate';
 export { Spinner } from './components/Spinner/Spinner';
 export type { SpinnerProps } from './components/Spinner/Spinner';
 export { Avatar } from './components/Avatar/Avatar';
 export type { AvatarProps } from './components/Avatar/Avatar';
 export { NavTabs } from './components/NavTabs/NavTabs';
-export type { NavTabsProps, NavTabItem } from './components/NavTabs/NavTabs';
+export type { NavTabsProps, NavTabItem, NavTabLinkProps } from './components/NavTabs/NavTabs';
 export { Tooltip } from './components/Tooltip/Tooltip';
 export type { TooltipProps } from './components/Tooltip/Tooltip';
 export { Checkbox } from './components/Checkbox/Checkbox';
@@ -148,6 +192,10 @@ export { Combobox } from './components/Combobox/Combobox';
 export type { ComboboxProps, ComboboxOption } from './components/Combobox/Combobox';
 export { DragHandleRow } from './components/DragHandleRow/DragHandleRow';
 export type { DragHandleRowProps } from './components/DragHandleRow/DragHandleRow';
+export { GripIcon } from './components/GripIcon/GripIcon';
+export type { GripIconProps } from './components/GripIcon/GripIcon';
+export { StepStrip } from './components/StepStrip/StepStrip';
+export type { StepStripProps, StepStripItem } from './components/StepStrip/StepStrip';
 export { FileDropzone } from './components/FileDropzone/FileDropzone';
 export type { FileDropzoneProps } from './components/FileDropzone/FileDropzone';
 export { Calendar } from './components/Calendar/Calendar';
@@ -161,6 +209,8 @@ export type {
 } from './components/SuggestionInput/SuggestionInput';
 export { IconPicker } from './components/IconPicker/IconPicker';
 export type { IconPickerProps } from './components/IconPicker/IconPicker';
+export { ColorPicker } from './components/ColorPicker/ColorPicker';
+export type { ColorPickerProps, ColorPickerSwatch } from './components/ColorPicker/ColorPicker';
 export { QuantityStepper } from './components/QuantityStepper/QuantityStepper';
 export type { QuantityStepperProps } from './components/QuantityStepper/QuantityStepper';
 export { CheckableListRow } from './components/CheckableListRow/CheckableListRow';
@@ -184,7 +234,78 @@ export {
   useDoubleTapHandler,
   useSingleOrDoubleTap,
   useIsMobile,
+  useIsOffline,
+  useOfflineTileState,
   useCommitOnEnterOrBlur,
+  useSwipeReveal,
+  useSnapCarousel,
+  useResponsiveLayout,
+  useCarouselRouteSync,
+  useReorderSensors,
+  shouldHandleDndEvent,
+  useSwipeStack,
 } from './hooks';
-export { MOBILE_BREAKPOINT_PX } from './hooks';
-export type { UseLongPressOptions, LongPressHandlers, CommitOnEnterOrBlurHandlers } from './hooks';
+export type { OfflineTileState } from './hooks';
+export { MOBILE_BREAKPOINT_PX, SWIPE_STACK_TRANSITION_MS } from './hooks';
+export type {
+  UseLongPressOptions,
+  LongPressHandlers,
+  CommitOnEnterOrBlurHandlers,
+  UseSwipeRevealOptions,
+  UseSwipeRevealHandlers,
+  UseSwipeRevealResult,
+  UseSnapCarouselOptions,
+  UseSnapCarouselResult,
+  UseResponsiveLayoutOptions,
+  UseResponsiveLayoutResult,
+  UseCarouselRouteSyncOptions,
+  UseCarouselRouteSyncResult,
+  UseReorderSensorsOptions,
+  SwipeDirection,
+  UseSwipeStackOptions,
+  UseSwipeStackHandlers,
+  UseSwipeStackResult,
+} from './hooks';
+export { ResponsiveSurface } from './components/ResponsiveSurface/ResponsiveSurface';
+export type { ResponsiveSurfaceProps } from './components/ResponsiveSurface/ResponsiveSurface';
+export { SwipableMobileCarouselDots } from './components/SwipableMobileCarouselDots/SwipableMobileCarouselDots';
+export type { SwipableMobileCarouselDotsProps } from './components/SwipableMobileCarouselDots/SwipableMobileCarouselDots';
+export { SwipableMobileCarousel } from './components/SwipableMobileCarousel/SwipableMobileCarousel';
+export type {
+  SwipableMobileCarouselProps,
+  SwipableMobileCarouselIndicatorProps,
+} from './components/SwipableMobileCarousel/SwipableMobileCarousel';
+export { SwipableMobileCarouselSlide } from './components/SwipableMobileCarousel/SwipableMobileCarouselSlide';
+export type { SwipableMobileCarouselSlideProps } from './components/SwipableMobileCarousel/SwipableMobileCarouselSlide';
+export { SwipableMobileCarouselSlideHeader } from './components/SwipableMobileCarousel/SwipableMobileCarouselSlideHeader';
+export type { SwipableMobileCarouselSlideHeaderProps } from './components/SwipableMobileCarousel/SwipableMobileCarouselSlideHeader';
+export { SwipableMobileCarouselSlideBody } from './components/SwipableMobileCarousel/SwipableMobileCarouselSlideBody';
+export type { SwipableMobileCarouselSlideBodyProps } from './components/SwipableMobileCarousel/SwipableMobileCarouselSlideBody';
+export { SwipableMobileCarouselSlideFooter } from './components/SwipableMobileCarousel/SwipableMobileCarouselSlideFooter';
+export type { SwipableMobileCarouselSlideFooterProps } from './components/SwipableMobileCarousel/SwipableMobileCarouselSlideFooter';
+export { SwipeStack } from './components/SwipeStack/SwipeStack';
+export type { SwipeStackProps, SwipeDirectionMeta } from './components/SwipeStack/SwipeStack';
+export { SwipeStackCard } from './components/SwipeStack/SwipeStackCard';
+export type { SwipeStackCardProps } from './components/SwipeStack/SwipeStackCard';
+export { ThreeColumnLayout } from './components/ThreeColumnLayout/ThreeColumnLayout';
+export type { ThreeColumnLayoutProps } from './components/ThreeColumnLayout/ThreeColumnLayout';
+export { HeaderFooterLayout } from './components/HeaderFooterLayout/HeaderFooterLayout';
+export type { HeaderFooterLayoutProps } from './components/HeaderFooterLayout/HeaderFooterLayout';
+export { RootLayout } from './components/RootLayout/RootLayout';
+export type { RootLayoutProps, RootLayoutVariant } from './components/RootLayout/RootLayout';
+export { PageLayout } from './components/PageLayout/PageLayout';
+export type { PageLayoutProps, PageLayoutPadding } from './components/PageLayout/PageLayout';
+export { NavList } from './components/NavList/NavList';
+export type {
+  NavListProps,
+  NavListGroup,
+  NavListItem,
+  NavListLinkProps,
+} from './components/NavList/NavList';
+
+// Theme presets (RFC 0094) — the closed, built-in preset data. Consumed
+// directly by runtime/src/instance-style.ts (RFC 0095); Storybook and
+// standalone consumers instead import the generated
+// '@sovereignfs/ui/tokens/theme-presets.css'.
+export { THEME_PRESETS, THEME_PRESET_NAMES } from './tokens/theme-presets';
+export type { ThemePresetName, ThemePresetTokens } from './tokens/theme-presets';

package/src/overlay-shell.ts

@@ -0,0 +1,159 @@
+'use client';
+
+import { type RefObject, useEffect, useRef } from 'react';
+import { lockBodyScroll, unlockBodyScroll } from './scroll-lock';
+
+// Internal to the design system — not exported from `index.ts`. Shared by
+// Dialog, Drawer, and Sheet, which independently implemented identical
+// scrim/focus-trap/Escape/scroll-lock logic before this consolidation
+// (RFC 0079, epic task 9.19). ConfirmDialog is deliberately not migrated
+// here — it stays on the native `<dialog>` element, which already provides
+// equivalent focus-trap/backdrop semantics more reliably for its use case.
+
+export const OVERLAY_FOCUSABLE_SELECTOR =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+// Matches --sv-motion-duration-base (Dialog/Drawer/Sheet's own .module.css
+// files) — kept as a plain JS constant rather than read from the CSS custom
+// property so the unmount timer and the CSS transition duration can't
+// silently drift apart at build time; change both together if this value
+// ever changes. Single shared export (not one copy per component) so a
+// future edit to one component's own local copy can't silently desync from
+// the other two — previously hand-copied identically into all three files.
+export const OVERLAY_MOTION_DURATION_MS = 250;
+
+// A LIFO stack of currently-open overlay ids, used only to decide which
+// overlay's Escape handler should act when more than one is open at once —
+// e.g. a ConfirmDialog opened from inside a Dialog. Module-level, not React
+// state: precedence is a synchronous fact resolved at keydown time, not
+// something that needs to trigger a render. Every overlay that wants a say
+// in Escape precedence registers here, including ConfirmDialog (native
+// `<dialog>`, not built on `useOverlayKeyboardTrap` — see this file's own
+// top comment) — it participates in this stack purely so a `Dialog`
+// underneath it knows to defer, without adopting any of the other hooks.
+let openOverlayIds: string[] = [];
+let nextOverlayId = 0;
+
+/** Call on open; returns an id to pass to `unregisterOpenOverlay`. */
+export function registerOpenOverlay(): string {
+  const id = `overlay-${nextOverlayId++}`;
+  openOverlayIds.push(id);
+  return id;
+}
+
+/** Call on close/unmount, with the id `registerOpenOverlay` returned. */
+export function unregisterOpenOverlay(id: string): void {
+  openOverlayIds = openOverlayIds.filter((existing) => existing !== id);
+}
+
+/** Whether `id` is the most-recently-registered still-open overlay. */
+export function isTopmostOpenOverlay(id: string): boolean {
+  return openOverlayIds.at(-1) === id;
+}
+
+/**
+ * Locks document scroll for the whole mounted lifetime of an overlay
+ * (including its exit animation), not just while `open` — so the background
+ * can't scroll while the panel is still visibly sliding/fading away.
+ * Ref-counted via `scroll-lock.ts` so nested overlays (e.g. a confirmation
+ * dialog inside an overlay-shell plugin) don't release the lock while a
+ * sibling is still open.
+ */
+export function useOverlayScrollLock(mounted: boolean): void {
+  useEffect(() => {
+    if (!mounted) return;
+    lockBodyScroll();
+    return unlockBodyScroll;
+  }, [mounted]);
+}
+
+/**
+ * Captures the element focused before the overlay opened, moves focus into
+ * the panel when `active` becomes true, and restores the original focus on
+ * cleanup. Callers pass whichever prop should trigger the capture — `open`
+ * for Dialog/Drawer, `mounted` for Sheet (which restores focus on unmount
+ * rather than on the raw `open` transition).
+ */
+export function useOverlayFocusCapture(
+  panelRef: RefObject<HTMLElement | null>,
+  active: boolean,
+): void {
+  const previouslyFocused = useRef<HTMLElement | null>(null);
+  useEffect(() => {
+    if (!active) return;
+    previouslyFocused.current = document.activeElement as HTMLElement | null;
+    const panel = panelRef.current;
+    const first = panel?.querySelector<HTMLElement>(OVERLAY_FOCUSABLE_SELECTOR);
+    (first ?? panel)?.focus();
+    return () => previouslyFocused.current?.focus();
+  }, [active, panelRef]);
+}
+
+/**
+ * Escape-to-close plus a Tab focus trap cycling within the panel. Attached
+ * at `document` level so no keyboard listener is needed on the overlay's own
+ * element (which would trigger `jsx-a11y/no-noninteractive-element-interactions`).
+ *
+ * Registers with the module's open-overlay stack (see above) for the
+ * lifetime of `open`, and only actually calls `onClose` on Escape when this
+ * overlay is the topmost one. Without this, a Dialog whose descendant opens
+ * its own nested overlay (a ConfirmDialog, another Dialog) would react to
+ * every Escape press itself — closing the wrong, outer surface, and doing so
+ * before the actually-topmost overlay (e.g. a native `<dialog>`, whose own
+ * Escape handling is asynchronous per spec) gets a chance to process the key
+ * itself. Registration is a separate effect keyed only on `open`, not on
+ * `onClose`/`panelRef` — those change identity on unrelated re-renders, and
+ * re-registering on every one of them would keep bumping this overlay to the
+ * top of the stack, which is wrong when nothing about its open/closed state
+ * actually changed.
+ */
+export function useOverlayKeyboardTrap(
+  panelRef: RefObject<HTMLElement | null>,
+  open: boolean,
+  onClose: () => void,
+): void {
+  const overlayIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const id = registerOpenOverlay();
+    overlayIdRef.current = id;
+    return () => {
+      unregisterOpenOverlay(id);
+      overlayIdRef.current = null;
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        const id = overlayIdRef.current;
+        if (id !== null && !isTopmostOpenOverlay(id)) return;
+        e.stopPropagation();
+        onClose();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+      const panel = panelRef.current;
+      if (!panel) return;
+      const focusable = [...panel.querySelectorAll<HTMLElement>(OVERLAY_FOCUSABLE_SELECTOR)];
+      const first = focusable[0];
+      const last = focusable.at(-1);
+      if (!first || !last) {
+        e.preventDefault();
+        return;
+      }
+      const active = document.activeElement;
+      if (e.shiftKey && active === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open, onClose, panelRef]);
+}