@sovereignfs/ui 0.45.0 → 0.83.1

package/src/components/RootLayout/__tests__/RootLayout.test.tsx

@@ -0,0 +1,161 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { RootLayout } from '../RootLayout';
+
+let matches = false;
+
+function installMatchMedia() {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query: string) => ({
+      matches,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  );
+}
+
+describe('RootLayout', () => {
+  beforeEach(() => {
+    matches = false;
+    installMatchMedia();
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('plain: renders the single child on web and mobile', () => {
+    render(
+      <RootLayout variant="plain">
+        <span>Main</span>
+      </RootLayout>,
+    );
+    expect(screen.getByText('Main')).toBeDefined();
+    cleanup();
+
+    matches = true;
+    installMatchMedia();
+    render(
+      <RootLayout variant="plain">
+        <span>Main</span>
+      </RootLayout>,
+    );
+    expect(screen.getByText('Main')).toBeDefined();
+  });
+
+  it('sidebar: renders sidebar + main on web, main only on mobile', () => {
+    render(
+      <RootLayout variant="sidebar">
+        <nav>Sidebar</nav>
+        <main>Main</main>
+      </RootLayout>,
+    );
+    expect(screen.getByText('Sidebar')).toBeDefined();
+    expect(screen.getByText('Main')).toBeDefined();
+    cleanup();
+
+    matches = true;
+    installMatchMedia();
+    render(
+      <RootLayout variant="sidebar">
+        <nav>Sidebar</nav>
+        <main>Main</main>
+      </RootLayout>,
+    );
+    expect(screen.queryByText('Sidebar')).toBeNull();
+    expect(screen.getByText('Main')).toBeDefined();
+  });
+
+  it('header: renders header + main identically on web and mobile', () => {
+    render(
+      <RootLayout variant="header">
+        <header>Header</header>
+        <main>Main</main>
+      </RootLayout>,
+    );
+    expect(screen.getByText('Header')).toBeDefined();
+    expect(screen.getByText('Main')).toBeDefined();
+    cleanup();
+
+    matches = true;
+    installMatchMedia();
+    render(
+      <RootLayout variant="header">
+        <header>Header</header>
+        <main>Main</main>
+      </RootLayout>,
+    );
+    expect(screen.getByText('Header')).toBeDefined();
+    expect(screen.getByText('Main')).toBeDefined();
+  });
+
+  it('header: applies headerHeight on web and mobileHeaderHeight on mobile', () => {
+    render(
+      <RootLayout variant="header">
+        <header>Header</header>
+        <main>Main</main>
+      </RootLayout>,
+    );
+    expect(screen.getByText('Header').parentElement?.style.height).toBe('48px');
+    cleanup();
+
+    matches = true;
+    installMatchMedia();
+    render(
+      <RootLayout variant="header">
+        <header>Header</header>
+        <main>Main</main>
+      </RootLayout>,
+    );
+    expect(screen.getByText('Header').parentElement?.style.height).toBe('60px');
+  });
+
+  it('shell: renders main only on web, header + main + footer on mobile', () => {
+    render(
+      <RootLayout variant="shell">
+        <header>Header</header>
+        <main>Main</main>
+        <footer>Footer</footer>
+      </RootLayout>,
+    );
+    expect(screen.queryByText('Header')).toBeNull();
+    expect(screen.getByText('Main')).toBeDefined();
+    expect(screen.queryByText('Footer')).toBeNull();
+    cleanup();
+
+    matches = true;
+    installMatchMedia();
+    render(
+      <RootLayout variant="shell">
+        <header>Header</header>
+        <main>Main</main>
+        <footer>Footer</footer>
+      </RootLayout>,
+    );
+    expect(screen.getByText('Header')).toBeDefined();
+    expect(screen.getByText('Main')).toBeDefined();
+    expect(screen.getByText('Footer')).toBeDefined();
+  });
+
+  it('warns in development when the child count does not match the variant', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+
+    render(
+      <RootLayout variant="sidebar">
+        <span>Only one child</span>
+      </RootLayout>,
+    );
+
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('variant="sidebar"'));
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('expects 2'));
+    expect(warn).toHaveBeenCalledWith(expect.stringContaining('received 1'));
+
+    warn.mockRestore();
+  });
+});

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -2,7 +2,7 @@
   display: inline-flex;
   background: var(--sv-color-surface-sunken);
   border-radius: var(--sv-radius-full);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   padding: 2px;
   gap: 2px;
 }

package/src/components/Select/Select.module.css

@@ -18,7 +18,7 @@
   line-height: 1.5;
   color: var(--sv-color-text-primary);
   background-color: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border-strong);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
   border-radius: var(--sv-radius-md);
   cursor: pointer;
   /* Remove native OS chevron */

package/src/components/Sheet/Sheet.module.css

@@ -1,6 +1,9 @@
 /* Sheet — fills the same rect as a plugin's content area (between the shell's
  * sticky header and footer nav — see --sv-shell-header-height /
- * --sv-shell-footer-height, set by the shell), sliding in from an edge
+ * --sv-shell-footer-height, set by the platform shell or, for a plugin that
+ * self-renders MobileHeader/MobileFooter instead (shellConfig.mobileHeader/
+ * mobileFooter: false), by that component itself — see
+ * usePublishShellChromeHeight), sliding in from an edge
  * instead of Dialog's centered box or Drawer's partial-height sheet-over-
  * scrim. z-index matches Dialog/Drawer's scrim so it layers consistently
  * with any other overlay. No scrim of its own — see the component doc

package/src/components/Sheet/Sheet.tsx

@@ -1,8 +1,13 @@
 'use client';
 
-import { type ReactNode, useEffect, useRef } from 'react';
-import { lockBodyScroll, unlockBodyScroll } from '../../scroll-lock';
+import { type ReactNode, useRef } from 'react';
 import { useMountTransition, usePrefersReducedMotion } from '../../motion';
+import {
+  OVERLAY_MOTION_DURATION_MS,
+  useOverlayFocusCapture,
+  useOverlayKeyboardTrap,
+  useOverlayScrollLock,
+} from '../../overlay-shell';
 import { OverlayHeader } from '../OverlayHeader/OverlayHeader';
 import styles from './Sheet.module.css';
 
@@ -36,13 +41,6 @@ export interface SheetProps {
   children: ReactNode;
 }
 
-const FOCUSABLE =
-  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-
-// Matches --sv-motion-duration-base (Sheet.module.css) — see Dialog.tsx's
-// identical constant for why this stays a plain JS number.
-const MOTION_DURATION_MS = 250;
-
 /**
  * Sheet — a full-page overlay that replaces a plugin's content area between
  * the shell's fixed header and footer (RFC 0013's mobile chrome stays visible
@@ -71,55 +69,15 @@ export function Sheet({
   children,
 }: SheetProps) {
   const panelRef = useRef<HTMLDivElement>(null);
-  const previouslyFocused = useRef<HTMLElement | null>(null);
   const reducedMotion = usePrefersReducedMotion();
-  const { mounted, phase } = useMountTransition(open, reducedMotion ? 0 : MOTION_DURATION_MS);
-
-  useEffect(() => {
-    if (!mounted) return;
-    lockBodyScroll();
-    return unlockBodyScroll;
-  }, [mounted]);
-
-  useEffect(() => {
-    if (!mounted) return;
-    previouslyFocused.current = document.activeElement as HTMLElement | null;
-    const panel = panelRef.current;
-    const first = panel?.querySelector<HTMLElement>(FOCUSABLE);
-    (first ?? panel)?.focus();
-    return () => previouslyFocused.current?.focus();
-  }, [mounted]);
+  const { mounted, phase } = useMountTransition(
+    open,
+    reducedMotion ? 0 : OVERLAY_MOTION_DURATION_MS,
+  );
 
-  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>(FOCUSABLE)];
-      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]);
+  useOverlayScrollLock(mounted);
+  useOverlayFocusCapture(panelRef, mounted);
+  useOverlayKeyboardTrap(panelRef, open, onClose);
 
   if (!mounted) return null;
 

package/src/components/SplitPane/SplitPane.module.css

@@ -5,7 +5,7 @@
     minmax(0, calc(100% - var(--split-pane-primary-size, 50%)));
   width: 100%;
   min-height: 320px;
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-lg);
   overflow: hidden;
   background: var(--sv-color-surface);
@@ -25,7 +25,7 @@
 }
 
 .pane + .pane {
-  border-left: 1px solid var(--sv-color-border);
+  border-left: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }
 
 .handle {
@@ -34,7 +34,7 @@
   min-width: 12px;
   padding: 0;
   border: 0;
-  border-inline: 1px solid var(--sv-color-border);
+  border-inline: var(--sv-border-width-hairline) solid var(--sv-color-border);
   cursor: col-resize;
   background: var(--sv-color-surface-sunken);
 }
@@ -79,7 +79,7 @@
   }
 
   .pane + .pane {
-    border-top: 1px solid var(--sv-color-border);
+    border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
     border-left: 0;
   }
 }

package/src/components/StatusBadge/StatusBadge.module.css

@@ -5,7 +5,7 @@
   min-height: 24px;
   gap: var(--sv-space-1);
   padding: 2px var(--sv-space-2);
-  border: 1px solid var(--sv-color-border);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border);
   border-radius: var(--sv-radius-full);
   font-family: var(--sv-font-family);
   font-size: var(--sv-font-size-xs);

package/src/components/StepStrip/StepStrip.module.css

@@ -0,0 +1,53 @@
+.strip {
+  display: flex;
+  align-items: stretch;
+  overflow-x: auto;
+}
+
+.step {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.connector {
+  width: var(--sv-space-4);
+  height: 2px;
+  flex-shrink: 0;
+  background: var(--sv-color-border);
+}
+
+.connectorDashed {
+  background-image: repeating-linear-gradient(
+    to right,
+    var(--sv-color-border) 0,
+    var(--sv-color-border) 4px,
+    transparent 4px,
+    transparent 7px
+  );
+}
+
+.addChip {
+  all: unset;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-1);
+  padding: var(--sv-space-3) var(--sv-space-4);
+  border: var(--sv-border-width-hairline) dashed var(--sv-color-border);
+  border-radius: var(--sv-radius-lg);
+  color: var(--sv-color-text-muted);
+  font-size: var(--sv-font-size-sm);
+  cursor: pointer;
+}
+
+.addChip:hover {
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-primary);
+}
+
+.addChip:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}

package/src/components/StepStrip/StepStrip.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+import { Icon } from '../Icon/Icon';
+import styles from './StepStrip.module.css';
+
+export interface StepStripItem {
+  id: string;
+}
+
+export interface StepStripProps<T extends StepStripItem> {
+  items: T[];
+  activeId: string | null;
+  /** Full control over each chip's content, click handling, and (if needed) drag-reorder wiring. */
+  renderItem: (item: T, state: { isActive: boolean; index: number }) => ReactNode;
+  /** Trailing dashed "add" chip — omit to render the strip with no add affordance. */
+  onAdd?: () => void;
+  addLabel?: string;
+  className?: string;
+  'aria-label'?: string;
+}
+
+/**
+ * StepStrip — a horizontal, connected sequence of steps (a route or
+ * itinerary strip): ordered chips joined by a thin connector line, with an
+ * optional trailing dashed "add" chip. Purely presentational — it owns
+ * layout and the connector lines, nothing else.
+ *
+ * Each chip's content, active styling, and click handling are entirely up
+ * to `renderItem`; if a consumer needs drag-reorder, `renderItem` attaches
+ * its own dnd-kit `useSortable` ref/listeners to whatever it returns. This
+ * mirrors `DragHandleRow`'s existing split (DS owns chrome, consumer wires
+ * dnd-kit via passed-through props) generalized for a horizontal,
+ * handle-less strip where the whole rendered item — not a separate handle
+ * icon — is both the click target and the drag surface.
+ */
+export function StepStrip<T extends StepStripItem>({
+  items,
+  activeId,
+  renderItem,
+  onAdd,
+  addLabel = 'Add',
+  className,
+  'aria-label': ariaLabel,
+}: StepStripProps<T>) {
+  return (
+    <div
+      className={[styles.strip, className].filter(Boolean).join(' ')}
+      role="list"
+      aria-label={ariaLabel}
+    >
+      {items.map((item, index) => (
+        <div key={item.id} className={styles.step} role="listitem">
+          {renderItem(item, { isActive: item.id === activeId, index })}
+          {(index < items.length - 1 || onAdd) && (
+            <div
+              className={[
+                styles.connector,
+                index === items.length - 1 ? styles.connectorDashed : '',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+              aria-hidden="true"
+            />
+          )}
+        </div>
+      ))}
+      {onAdd && (
+        <button type="button" className={styles.addChip} onClick={onAdd}>
+          <Icon name="plus" size="sm" aria-hidden={true} />
+          {addLabel}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/SuggestionInput/SuggestionInput.module.css

@@ -7,7 +7,7 @@
   line-height: 1.5;
   color: var(--sv-color-text-primary);
   background-color: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border-strong);
+  border: var(--sv-border-width-hairline) solid var(--sv-color-border-strong);
   border-radius: var(--sv-radius-md);
   transition:
     border-color 0.15s ease,
@@ -99,5 +99,5 @@
 
 .divider {
   margin: var(--sv-space-1) var(--sv-space-2);
-  border-top: 1px solid var(--sv-color-border);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }

package/src/components/SwipableMobileCarousel/SwipableMobileCarousel.module.css

@@ -0,0 +1,64 @@
+.wrap {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.scroller {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  /* Momentum + rubber-banding come from the browser's native scroll physics —
+     no hand-rolled pointer/touch dragging. Deliberately NOT
+     -webkit-overflow-scrolling: touch: that legacy iOS <13 hint promotes its
+     element to its own compositing layer for GPU-accelerated momentum
+     scroll, and that layer's paint order relative to siblings/fixed
+     descendants elsewhere in the tree isn't always reliable on real iOS
+     Safari (confirmed via sovereign-tasks' and sovereign-shopper's own
+     carousels, which hit and fixed this exact bug — a position:fixed
+     overlay opened above the scroller painted BEHIND it instead of above).
+     Removing it doesn't disable momentum scrolling on any iOS version this
+     platform realistically targets. */
+}
+
+.slide {
+  flex: 0 0 100%;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  overflow: hidden;
+  scroll-snap-align: start;
+  scroll-snap-stop: always;
+  /* Slide content is a flex column so Header/Footer stay their natural size
+     and Body (flex: 1 1 auto, min-height: 0) fills and scrolls the rest —
+     see SwipableMobileCarouselSlideParts.module.css. */
+  display: flex;
+  flex-direction: column;
+}
+
+.indicatorSlot {
+  /* Overlays the bottom of .wrap rather than taking its own layout row —
+     matches both sovereign-tasks' and sovereign-shopper's existing dots
+     placement. Applied by the carousel itself around WHATEVER
+     renderIndicator returns (the default SwipableMobileCarouselDots or a
+     caller-supplied override) — a custom renderIndicator has no way to
+     import this module's locally-scoped class itself (CSS Modules classnames
+     aren't cross-file importable), so positioning must live here, not be
+     something each indicator implementation opts into. Previously this class
+     was only ever applied to the *default* indicator branch, which silently
+     left any custom renderIndicator unpositioned — a static, in-flow sibling
+     pushed below the full-height .scroller and clipped out of view instead
+     of overlaid on top of it. */
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: var(--sv-space-3);
+  pointer-events: none;
+}
+
+.indicatorSlot > * {
+  pointer-events: auto;
+}