@sovereignfs/ui 0.54.0 → 0.89.1

package/src/hooks/useResponsiveLayout.ts

@@ -1,36 +0,0 @@
-'use client';
-
-import { useIsMobile } from './useIsMobile';
-
-export interface UseResponsiveLayoutOptions<TWeb, TMobile> {
-  web: TWeb;
-  mobile: TMobile;
-  breakpointPx?: number;
-}
-
-export interface UseResponsiveLayoutResult<TWeb, TMobile> {
-  isMobile: boolean;
-  value: TWeb | TMobile;
-}
-
-/**
- * useResponsiveLayout — picks between a `web` and `mobile` value for the
- * current viewport, built on `useIsMobile` (same breakpoint/SSR-safe-default
- * behavior, not reimplemented here). Generic over the value type so it works
- * for JSX (the common case — forking an entire component tree, not just a
- * class name) or any other per-breakpoint value a plugin wants to pick
- * without repeating the isMobile-ternary boilerplate every call site.
- *
- * This formalizes the `if (isMobile) return <mobile/>; return <web/>;` fork
- * plugins have hand-rolled per-plugin (e.g. a `MobileAwareShell` component
- * that swaps an entire routed page tree for a client-only mobile one) —
- * see `ResponsiveSurface` for the equivalent as a plain JSX component.
- */
-export function useResponsiveLayout<TWeb, TMobile>({
-  web,
-  mobile,
-  breakpointPx,
-}: UseResponsiveLayoutOptions<TWeb, TMobile>): UseResponsiveLayoutResult<TWeb, TMobile> {
-  const isMobile = useIsMobile(breakpointPx);
-  return { isMobile, value: isMobile ? mobile : web };
-}

package/src/hooks/useSnapCarousel.ts

@@ -1,79 +0,0 @@
-'use client';
-
-import { useEffect, useRef } from 'react';
-import type { RefObject } from 'react';
-
-export interface UseSnapCarouselOptions {
-  /** Total number of slides — settle detection clamps to this range. */
-  itemCount: number;
-  /** Called when the user's scroll gesture settles on a different slide
-   *  index than the last one reported. */
-  onSettle?: (index: number) => void;
-  /** Debounce delay (ms) after the last `scroll` event before checking where
-   *  the container settled. Default 120 — matches the value this hook was
-   *  extracted from. Debounced rather than keyed to the `scrollend` event,
-   *  which pre-17.4 iOS Safari/WKWebView doesn't support. */
-  debounceMs?: number;
-}
-
-export interface UseSnapCarouselResult {
-  /** Attach to the `scroll-snap-type: x` scroll container. */
-  scrollRef: RefObject<HTMLDivElement | null>;
-  /** Imperatively scrolls the container to a slide index. */
-  scrollToIndex: (index: number, behavior?: ScrollBehavior) => void;
-}
-
-/**
- * useSnapCarousel — debounced "settled slide" detection over a native
- * `scroll-snap-type: x` container, extracted from `sovereign-tasks`'s
- * `MobileTasksCarousel` and independently reimplemented in
- * `sovereign-shopper`'s `MobileShopperCarousel` (RFC 0079, epic task 9.20).
- * Gives swipe-between-slides physics for free via native scroll-snap, with
- * this hook only handling "which slide did we land on."
- */
-export function useSnapCarousel({
-  itemCount,
-  onSettle,
-  debounceMs = 120,
-}: UseSnapCarouselOptions): UseSnapCarouselResult {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const lastIndexRef = useRef<number | null>(null);
-  // Kept in a ref so the scroll listener always calls the latest callback
-  // without needing to be torn down and re-attached on every render.
-  const onSettleRef = useRef(onSettle);
-  onSettleRef.current = onSettle;
-
-  useEffect(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    function handleScroll() {
-      if (timerRef.current) clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(() => {
-        const current = scrollRef.current;
-        if (!current) return;
-        const width = current.clientWidth;
-        if (!width) return;
-        const rawIndex = Math.round(current.scrollLeft / width);
-        const newIndex = Math.max(0, Math.min(itemCount - 1, rawIndex));
-        if (newIndex === lastIndexRef.current) return;
-        lastIndexRef.current = newIndex;
-        onSettleRef.current?.(newIndex);
-      }, debounceMs);
-    }
-    el.addEventListener('scroll', handleScroll, { passive: true });
-    return () => {
-      el.removeEventListener('scroll', handleScroll);
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [itemCount, debounceMs]);
-
-  function scrollToIndex(index: number, behavior: ScrollBehavior = 'smooth') {
-    const el = scrollRef.current;
-    if (!el) return;
-    lastIndexRef.current = index;
-    el.scrollTo({ left: index * el.clientWidth, behavior });
-  }
-
-  return { scrollRef, scrollToIndex };
-}

package/src/hooks/useSwipeReveal.ts

@@ -1,107 +0,0 @@
-'use client';
-
-import { useRef } from 'react';
-import type { PointerEvent as ReactPointerEvent, RefObject } from 'react';
-
-export interface UseSwipeRevealOptions {
-  /** Max reveal distance in px — the row translates by `-revealWidth` when open. */
-  revealWidth: number;
-  /** Whether the reveal is currently open. Controlled by the caller so a
-   *  list of rows can coordinate "only one open at a time" — this hook has
-   *  no open state of its own. */
-  open: boolean;
-  /** Called when a drag releases past the halfway point — the caller should
-   *  set `open` to true. */
-  onOpen: () => void;
-  /** Called when a drag releases before the halfway point — the caller
-   *  should set `open` to false. */
-  onClose: () => void;
-  /** Skip entirely (hooks can't be called conditionally). */
-  disabled?: boolean;
-}
-
-export interface UseSwipeRevealHandlers {
-  onPointerDown: (e: ReactPointerEvent) => void;
-  onPointerMove: (e: ReactPointerEvent) => void;
-  onPointerUp: (e: ReactPointerEvent) => void;
-  onPointerCancel: (e: ReactPointerEvent) => void;
-}
-
-export interface UseSwipeRevealResult {
-  /** Attach to the swipeable row element — the hook writes a live transform
-   *  to it directly during the drag (not via React state) so the row tracks
-   *  the finger at 60fps with no re-render per pointermove. */
-  rowRef: RefObject<HTMLDivElement | null>;
-  /** Spread onto the row's pointer event handlers. */
-  handlers: UseSwipeRevealHandlers;
-}
-
-/**
- * useSwipeReveal — horizontal swipe-to-reveal (e.g. Done/Delete actions
- * behind a list row), extracted from `sovereign-tasks`'s `TaskItem`/
- * `ListSidebar`, which independently hand-rolled the identical gesture twice
- * with only `revealWidth` differing (RFC 0079, epic task 9.20).
- *
- * Axis-locks on the first 8px of movement (so a vertical scroll or the
- * carousel's own horizontal swipe-between-slides gesture isn't hijacked by a
- * diagonal drag) and only resolves to open/closed on release, past the
- * halfway point of `revealWidth`.
- */
-export function useSwipeReveal({
-  revealWidth,
-  open,
-  onOpen,
-  onClose,
-  disabled = false,
-}: UseSwipeRevealOptions): UseSwipeRevealResult {
-  const rowRef = useRef<HTMLDivElement>(null);
-  const dragState = useRef<{
-    startX: number;
-    startY: number;
-    locked: 'horizontal' | 'vertical' | null;
-  } | null>(null);
-
-  function onPointerDown(e: ReactPointerEvent) {
-    if (disabled) return;
-    e.currentTarget.setPointerCapture(e.pointerId);
-    dragState.current = { startX: e.clientX, startY: e.clientY, locked: null };
-  }
-
-  function onPointerMove(e: ReactPointerEvent) {
-    const state = dragState.current;
-    if (!state) return;
-    const dx = e.clientX - state.startX;
-    const dy = e.clientY - state.startY;
-    if (!state.locked) {
-      if (Math.abs(dx) < 8 && Math.abs(dy) < 8) return;
-      state.locked = Math.abs(dx) > Math.abs(dy) ? 'horizontal' : 'vertical';
-    }
-    if (state.locked !== 'horizontal') return;
-    e.preventDefault();
-    const base = open ? -revealWidth : 0;
-    const next = Math.min(0, Math.max(-revealWidth, base + dx));
-    if (rowRef.current) rowRef.current.style.transform = `translateX(${next}px)`;
-  }
-
-  function releaseDrag(e: ReactPointerEvent) {
-    const state = dragState.current;
-    dragState.current = null;
-    if (!state || state.locked !== 'horizontal') return;
-    const dx = e.clientX - state.startX;
-    const base = open ? -revealWidth : 0;
-    const finalX = Math.min(0, Math.max(-revealWidth, base + dx));
-    if (rowRef.current) rowRef.current.style.transform = '';
-    if (finalX < -revealWidth / 2) onOpen();
-    else onClose();
-  }
-
-  return {
-    rowRef,
-    handlers: {
-      onPointerDown,
-      onPointerMove,
-      onPointerUp: releaseDrag,
-      onPointerCancel: releaseDrag,
-    },
-  };
-}

package/src/index.ts

@@ -1,251 +0,0 @@
-export { LegalLinks } from './components/LegalLinks/LegalLinks';
-export type { LegalLinksProps } from './components/LegalLinks/LegalLinks';
-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';
-export { Toggle } from './components/Toggle/Toggle';
-export type { ToggleProps } from './components/Toggle/Toggle';
-export { SegmentedControl } from './components/SegmentedControl/SegmentedControl';
-export type {
-  SegmentedControlProps,
-  SegmentedOption,
-} from './components/SegmentedControl/SegmentedControl';
-export { Tabs } from './components/Tabs/Tabs';
-export type { TabsProps, TabItem } from './components/Tabs/Tabs';
-export { Select } from './components/Select/Select';
-export type { SelectProps } from './components/Select/Select';
-export { SystemBanner } from './components/SystemBanner/SystemBanner';
-export type { SystemBannerProps, BannerVariant } from './components/SystemBanner/SystemBanner';
-export { Popover } from './components/Popover/Popover';
-export type { PopoverProps } from './components/Popover/Popover';
-export type { IconProps, IconName } from './components/Icon/Icon';
-export { Button } from './components/Button/Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './components/Button/Button';
-export { Input } from './components/Input/Input';
-export type { InputProps } from './components/Input/Input';
-export { Textarea } from './components/Textarea/Textarea';
-export type { TextareaProps } from './components/Textarea/Textarea';
-export { CodeTextarea } from './components/CodeTextarea/CodeTextarea';
-export type { CodeTextareaProps } from './components/CodeTextarea/CodeTextarea';
-export { StatusBadge } from './components/StatusBadge/StatusBadge';
-export type { StatusBadgeProps, StatusBadgeStatus } from './components/StatusBadge/StatusBadge';
-export { SplitPane } from './components/SplitPane/SplitPane';
-export type { SplitPaneProps } from './components/SplitPane/SplitPane';
-export { TagInput } from './components/TagInput/TagInput';
-export type { TagInputProps } from './components/TagInput/TagInput';
-export { Dialog, useOverlaySecondRow } from './components/Dialog/Dialog';
-export type { DialogProps, DialogSize } from './components/Dialog/Dialog';
-export { Drawer } from './components/Drawer/Drawer';
-export type { DrawerProps } from './components/Drawer/Drawer';
-export { OverlayHeader } from './components/OverlayHeader/OverlayHeader';
-export type { OverlayHeaderProps } from './components/OverlayHeader/OverlayHeader';
-export { Sheet } from './components/Sheet/Sheet';
-export type { SheetProps } from './components/Sheet/Sheet';
-export { ConfirmDialog } from './components/ConfirmDialog/ConfirmDialog';
-export type { ConfirmDialogProps } from './components/ConfirmDialog/ConfirmDialog';
-export { Menu, MenuEntries } from './components/Menu/Menu';
-export type {
-  MenuProps,
-  MenuItem,
-  MenuLabel,
-  MenuSeparator,
-  MenuEntry,
-} from './components/Menu/Menu';
-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 { 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 { 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, NavTabLinkProps } from './components/NavTabs/NavTabs';
-export { Tooltip } from './components/Tooltip/Tooltip';
-export type { TooltipProps } from './components/Tooltip/Tooltip';
-export { Checkbox } from './components/Checkbox/Checkbox';
-export type { CheckboxProps } from './components/Checkbox/Checkbox';
-export { RadioGroup } from './components/RadioGroup/RadioGroup';
-export type { RadioGroupProps, RadioGroupItem } from './components/RadioGroup/RadioGroup';
-export { Slider } from './components/Slider/Slider';
-export type { SliderProps } from './components/Slider/Slider';
-export { Progress } from './components/Progress/Progress';
-export type { ProgressProps } from './components/Progress/Progress';
-export {
-  Table,
-  TableHead,
-  TableBody,
-  TableRow,
-  TableHeaderCell,
-  TableCell,
-} from './components/Table/Table';
-export type { TableProps } from './components/Table/Table';
-export { Alert } from './components/Alert/Alert';
-export type { AlertProps, AlertVariant } from './components/Alert/Alert';
-export { Breadcrumb } from './components/Breadcrumb/Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItem } from './components/Breadcrumb/Breadcrumb';
-export { Pagination } from './components/Pagination/Pagination';
-export type { PaginationProps } from './components/Pagination/Pagination';
-export { Kbd } from './components/Kbd/Kbd';
-export type { KbdProps } from './components/Kbd/Kbd';
-export { Collapsible } from './components/Collapsible/Collapsible';
-export type { CollapsibleProps } from './components/Collapsible/Collapsible';
-export { Accordion } from './components/Accordion/Accordion';
-export type { AccordionProps, AccordionItem } from './components/Accordion/Accordion';
-export { AspectRatio } from './components/AspectRatio/AspectRatio';
-export type { AspectRatioProps } from './components/AspectRatio/AspectRatio';
-export { ButtonGroup } from './components/ButtonGroup/ButtonGroup';
-export type { ButtonGroupProps } from './components/ButtonGroup/ButtonGroup';
-export { Item } from './components/Item/Item';
-export type { ItemProps } from './components/Item/Item';
-export { Label } from './components/Label/Label';
-export type { LabelProps } from './components/Label/Label';
-export { ScrollArea } from './components/ScrollArea/ScrollArea';
-export type { ScrollAreaProps } from './components/ScrollArea/ScrollArea';
-export { Typography } from './components/Typography/Typography';
-export type { TypographyProps, TypographyVariant } from './components/Typography/Typography';
-export { Marker } from './components/Marker/Marker';
-export type { MarkerProps } from './components/Marker/Marker';
-export { Message } from './components/Message/Message';
-export type { MessageProps, MessageSender } from './components/Message/Message';
-export { MessageScroller } from './components/MessageScroller/MessageScroller';
-export type { MessageScrollerProps } from './components/MessageScroller/MessageScroller';
-export { HoverCard } from './components/HoverCard/HoverCard';
-export type { HoverCardProps } from './components/HoverCard/HoverCard';
-export { ContextMenu } from './components/ContextMenu/ContextMenu';
-export type { ContextMenuProps } from './components/ContextMenu/ContextMenu';
-export { NavigationMenu } from './components/NavigationMenu/NavigationMenu';
-export type {
-  NavigationMenuProps,
-  NavigationMenuItem,
-} from './components/NavigationMenu/NavigationMenu';
-export { Menubar } from './components/Menubar/Menubar';
-export type { MenubarProps, MenubarMenu } from './components/Menubar/Menubar';
-export { Command } from './components/Command/Command';
-export type { CommandProps, CommandItem } from './components/Command/Command';
-export {
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizableHandle,
-} from './components/Resizable/Resizable';
-export type {
-  ResizablePanelGroupProps,
-  ResizablePanelProps,
-  ResizableHandleProps,
-  ResizableDirection,
-} from './components/Resizable/Resizable';
-export { DataTable } from './components/DataTable/DataTable';
-export type {
-  DataTableProps,
-  DataTableColumn,
-  SortDirection,
-} from './components/DataTable/DataTable';
-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 { FileDropzone } from './components/FileDropzone/FileDropzone';
-export type { FileDropzoneProps } from './components/FileDropzone/FileDropzone';
-export { Calendar } from './components/Calendar/Calendar';
-export type { CalendarProps } from './components/Calendar/Calendar';
-export { DatePicker } from './components/DatePicker/DatePicker';
-export type { DatePickerProps } from './components/DatePicker/DatePicker';
-export { SuggestionInput } from './components/SuggestionInput/SuggestionInput';
-export type {
-  SuggestionInputProps,
-  SuggestionOption,
-} from './components/SuggestionInput/SuggestionInput';
-export { IconPicker } from './components/IconPicker/IconPicker';
-export type { IconPickerProps } from './components/IconPicker/IconPicker';
-export { QuantityStepper } from './components/QuantityStepper/QuantityStepper';
-export type { QuantityStepperProps } from './components/QuantityStepper/QuantityStepper';
-export { CheckableListRow } from './components/CheckableListRow/CheckableListRow';
-export type { CheckableListRowProps } from './components/CheckableListRow/CheckableListRow';
-export { CurrencyInput } from './components/CurrencyInput/CurrencyInput';
-export type { CurrencyInputProps } from './components/CurrencyInput/CurrencyInput';
-export { BalanceChip } from './components/BalanceChip/BalanceChip';
-export type { BalanceChipProps } from './components/BalanceChip/BalanceChip';
-export { SplitMethodSelector } from './components/SplitMethodSelector/SplitMethodSelector';
-export type {
-  SplitMethodSelectorProps,
-  SplitMethod,
-} from './components/SplitMethodSelector/SplitMethodSelector';
-export { MemberMultiSelect } from './components/MemberMultiSelect/MemberMultiSelect';
-export type {
-  MemberMultiSelectProps,
-  MemberMultiSelectOption,
-} from './components/MemberMultiSelect/MemberMultiSelect';
-export {
-  useLongPress,
-  useDoubleTapHandler,
-  useSingleOrDoubleTap,
-  useIsMobile,
-  useIsOffline,
-  useOfflineTileState,
-  useCommitOnEnterOrBlur,
-  useSwipeReveal,
-  useSnapCarousel,
-  useResponsiveLayout,
-  useCarouselRouteSync,
-} from './hooks';
-export type { OfflineTileState } from './hooks';
-export { MOBILE_BREAKPOINT_PX } from './hooks';
-export type {
-  UseLongPressOptions,
-  LongPressHandlers,
-  CommitOnEnterOrBlurHandlers,
-  UseSwipeRevealOptions,
-  UseSwipeRevealHandlers,
-  UseSwipeRevealResult,
-  UseSnapCarouselOptions,
-  UseSnapCarouselResult,
-  UseResponsiveLayoutOptions,
-  UseResponsiveLayoutResult,
-  UseCarouselRouteSyncOptions,
-  UseCarouselRouteSyncResult,
-} 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';

package/src/motion.ts

@@ -1,78 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-export type TransitionPhase = 'entering' | 'open' | 'closing' | 'closed';
-
-/**
- * useMountTransition — generic two-phase-mount state machine for animated
- * overlays (Dialog, Drawer, and their Phase-B successors: Sheet,
- * ConfirmDialog, Menu). Internal to the design system — not exported from
- * `index.ts`; each component wires its own CSS classes to the returned phase.
- *
- * The `open` prop controls mounting from the outside, but both directions need
- * two renders to actually animate rather than snap: entering needs a frame at
- * the closed-position styles before flipping to open (so the browser has
- * something to interpolate from), and exiting needs to stay mounted *after*
- * `open` goes false long enough to play in reverse — so `mounted` and `open`
- * diverge for `durationMs` on close:
- *
- *   open=true  -> phase 'entering' (closed-position styles — this applies
- *                 equally to a fresh mount that starts open, e.g. a
- *                 route-driven overlay, and to an existing instance whose
- *                 `open` prop just flipped true; both should animate in the
- *                 same way) -> next frame, phase 'open' (open-position styles;
- *                 the CSS transition between the two animates the entrance).
- *   open=false -> phase 'closing' (still mounted, rendered back at the
- *                 closed-position styles so the transition reverses) -> after
- *                 durationMs, phase 'closed' (unmounts).
- *
- * A component only needs one conditional class: apply the "open" variant
- * when `phase === 'open'`, and leave the base (closed-position) styles as the
- * unconditional default — entering, closing, and the pre-transition instant
- * all render as that same base state, which is exactly what should animate
- * to/from.
- */
-export function useMountTransition(
-  open: boolean,
-  durationMs: number,
-): { mounted: boolean; phase: TransitionPhase } {
-  const [phase, setPhase] = useState<TransitionPhase>(open ? 'entering' : 'closed');
-
-  useEffect(() => {
-    if (open) {
-      setPhase('entering');
-      const raf = requestAnimationFrame(() => setPhase('open'));
-      return () => cancelAnimationFrame(raf);
-    }
-    setPhase((p) => (p === 'closed' ? 'closed' : 'closing'));
-    const timer = setTimeout(() => setPhase('closed'), durationMs);
-    return () => clearTimeout(timer);
-  }, [open, durationMs]);
-
-  return { mounted: phase !== 'closed', phase };
-}
-
-/**
- * usePrefersReducedMotion — SSR-safe (defaults to `false` until the client
- * mounts, matching every other SSR-safe hook in this system). Components pair
- * this with a `durationMs` of ~0 passed to `useMountTransition` and a matching
- * `@media (prefers-reduced-motion: reduce)` CSS rule collapsing the same
- * transition to near-instant — both sides must agree, or the JS unmount timer
- * and the CSS animation duration drift apart.
- */
-export function usePrefersReducedMotion(): boolean {
-  const [reduced, setReduced] = useState(false);
-
-  useEffect(() => {
-    const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
-    setReduced(mql.matches);
-    function handleChange(e: MediaQueryListEvent) {
-      setReduced(e.matches);
-    }
-    mql.addEventListener('change', handleChange);
-    return () => mql.removeEventListener('change', handleChange);
-  }, []);
-
-  return reduced;
-}

package/src/overlay-shell.ts

@@ -1,94 +0,0 @@
-'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"])';
-
-/**
- * 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`).
- */
-export function useOverlayKeyboardTrap(
-  panelRef: RefObject<HTMLElement | null>,
-  open: boolean,
-  onClose: () => void,
-): void {
-  useEffect(() => {
-    if (!open) return;
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === 'Escape') {
-        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]);
-}

package/src/scroll-lock.ts

@@ -1,22 +0,0 @@
-// Ref-counted body scroll lock. Multiple overlays (Dialog, Drawer) can be
-// open simultaneously; the body stays locked until all of them close.
-// Uses data-scroll-locks on <body> as a counter so concurrent callers
-// don't clobber each other's lock state.
-//
-// Only locks overflow-y (not the shorthand overflow) so the stylesheet's
-// overflow-x: hidden on html,body is never overridden. On Android, clearing
-// the overflow shorthand causes a brief frame where overflow-x is also
-// unlocked — content wider than the viewport can paint and the home screen
-// appears to "blow out" after the overlay closes.
-
-export function lockBodyScroll(): void {
-  const count = parseInt(document.body.dataset.scrollLocks ?? '0', 10);
-  document.body.dataset.scrollLocks = String(count + 1);
-  if (count === 0) document.body.style.overflowY = 'hidden';
-}
-
-export function unlockBodyScroll(): void {
-  const next = Math.max(0, parseInt(document.body.dataset.scrollLocks ?? '0', 10) - 1);
-  document.body.dataset.scrollLocks = String(next);
-  if (next === 0) document.body.style.overflowY = '';
-}