@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Dialog/Dialog.tsx

@@ -1,160 +0,0 @@
-'use client';
-
-import { createContext, type ReactNode, useContext, useEffect, useRef, useState } from 'react';
-import { useMountTransition, usePrefersReducedMotion } from '../../motion';
-import {
-  useOverlayFocusCapture,
-  useOverlayKeyboardTrap,
-  useOverlayScrollLock,
-} from '../../overlay-shell';
-import { OverlayHeader } from '../OverlayHeader/OverlayHeader';
-import styles from './Dialog.module.css';
-
-// Matches --sv-motion-duration-base (Dialog.module.css) — 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.
-const MOTION_DURATION_MS = 250;
-
-// undefined (the default, outside any Provider) means "no Dialog ancestor" —
-// distinct from a real setter function, so useOverlaySecondRow can silently
-// no-op when called outside a Dialog instead of throwing.
-const OverlaySecondRowContext = createContext<((node: ReactNode | null) => void) | undefined>(
-  undefined,
-);
-
-/**
- * Lets content deep inside a `Dialog` (e.g. a plugin's own route layout,
- * rendered several levels below wherever the `Dialog` itself is
- * instantiated) supply the second-row content of the Dialog's mobile
- * `OverlayHeader` — typically a tab strip. Solves the "double header"
- * problem: without this, a plugin's own tab strip has no way to reach the
- * Dialog's header and ends up rendered a second time, as its own sticky bar,
- * inside the scrolling content area.
- *
- * A no-op when there is no enclosing `Dialog` (e.g. the same plugin layout
- * also rendered on a plain, non-overlay route) — safe to call unconditionally.
- * Returns whether an enclosing `Dialog` actually received the content, so a
- * caller that also renders its own inline header/tab-strip copy for the
- * no-Dialog case can hide that copy on mobile specifically when this
- * returned `true` (the Dialog's own header is showing it instead there).
- *
- * ```tsx
- * function AccountLayout({ children }) {
- *   const insideOverlay = useOverlaySecondRow(<nav>...tab strip...</nav>);
- *   return <div>{children}</div>;
- * }
- * ```
- */
-export function useOverlaySecondRow(node: ReactNode | null): boolean {
-  const setSecondRow = useContext(OverlaySecondRowContext);
-  useEffect(() => {
-    if (!setSecondRow) return;
-    setSecondRow(node);
-    return () => setSecondRow(null);
-  }, [setSecondRow, node]);
-  return setSecondRow !== undefined;
-}
-
-export type DialogSize = 'sm' | 'md' | 'lg' | 'full';
-
-export interface DialogProps {
-  /** Whether the dialog is shown. When false, nothing renders. */
-  open: boolean;
-  /** Called on Esc, scrim click, or the close button. */
-  onClose: () => void;
-  /** Panel size on desktop. Mobile always renders as a full-screen sheet. */
-  size?: DialogSize;
-  /** Accessible name for the dialog (sets `aria-label` on the panel). */
-  'aria-label'?: string;
-  /** On mobile: shown in the top bar alongside the close button so the title
-   *  and dismiss affordance occupy the same row instead of stacking. */
-  title?: string;
-  children: ReactNode;
-}
-
-/**
- * Dialog — a modal surface (scrim + panel) for overlay-shell plugins and any
- * plugin that needs a dismissable layer. Router-agnostic: the caller decides
- * what `onClose` does (the runtime's `@modal` slot wires it to `router.back()`).
- *
- * Behaviour: Esc and scrim-click dismiss; focus moves into the panel on open and
- * is restored to the previously-focused element on close; Tab is trapped within
- * the panel. Styling references `--sv-*` tokens only; on mobile the panel becomes
- * a full-screen sheet regardless of `size`.
- *
- * Animated open/close: fade + scale on desktop, slide-up on mobile (matching
- * the "feels like a page push" framing of the mobile sheet). The `open`/
- * `onClose` API is unchanged — closing still stays mounted internally for the
- * exit transition before actually unmounting; `prefers-reduced-motion: reduce`
- * collapses both to near-instant.
- */
-export function Dialog({
-  open,
-  onClose,
-  size = 'lg',
-  'aria-label': ariaLabel,
-  title,
-  children,
-}: DialogProps) {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const reducedMotion = usePrefersReducedMotion();
-  const { mounted, phase } = useMountTransition(open, reducedMotion ? 0 : MOTION_DURATION_MS);
-  const [secondRow, setSecondRow] = useState<ReactNode | null>(null);
-
-  useOverlayScrollLock(mounted);
-  useOverlayFocusCapture(panelRef, open);
-  useOverlayKeyboardTrap(panelRef, open, onClose);
-
-  if (!mounted) return null;
-  const isOpenPhase = phase === 'open';
-
-  return (
-    // role="presentation" removes the scrim from the AT (it is purely visual).
-    // e.target check lets clicks inside the panel bubble without triggering dismiss.
-    <div
-      className={[styles.scrim, isOpenPhase ? styles.scrimOpen : ''].filter(Boolean).join(' ')}
-      role="presentation"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-      onKeyDown={(e) => {
-        if (e.key === 'Escape') onClose();
-      }}
-    >
-      <div
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label={ariaLabel ?? title}
-        tabIndex={-1}
-        className={[styles.panel, styles[size], isOpenPhase ? styles.panelOpen : '']
-          .filter(Boolean)
-          .join(' ')}
-      >
-        {/* Mobile: shared OverlayHeader (title + close in one row, hidden on
-            desktop via CSS — see .mobileHeader). secondRow is populated by a
-            descendant's useOverlaySecondRow call, e.g. a plugin's own tab
-            strip — see that hook's doc comment for why. */}
-        <OverlayHeader
-          title={title}
-          onClose={onClose}
-          secondRow={secondRow}
-          className={styles.mobileHeader}
-        />
-        {/* Desktop: absolute close button (hidden on mobile via CSS). */}
-        <button type="button" className={styles.close} aria-label="Close" onClick={onClose}>
-          ×
-        </button>
-        {/* The panel is a fixed-size box; only this region scrolls, so the
-            panel never resizes with its content and the close button stays
-            pinned. */}
-        <div className={styles.content}>
-          <OverlaySecondRowContext.Provider value={setSecondRow}>
-            {children}
-          </OverlaySecondRowContext.Provider>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,137 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { Dialog, useOverlaySecondRow } from '../Dialog';
-
-// Dialog's exit animation reads prefers-reduced-motion via matchMedia, which
-// jsdom does not implement. `matches: false` (motion enabled) exercises the
-// normal animated path; the actual reduced-motion behaviour is covered by
-// motion.ts's own tests.
-function installMatchMedia() {
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockImplementation((query: string) => ({
-      matches: false,
-      media: query,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  );
-}
-
-describe('Dialog', () => {
-  beforeEach(installMatchMedia);
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('renders nothing when closed', () => {
-    render(
-      <Dialog open={false} onClose={() => {}}>
-        Body
-      </Dialog>,
-    );
-    expect(screen.queryByRole('dialog')).toBeNull();
-  });
-
-  it('renders the panel with its accessible name when open', () => {
-    render(
-      <Dialog open onClose={() => {}} aria-label="Settings">
-        Body
-      </Dialog>,
-    );
-    const dialog = screen.getByRole('dialog', { name: 'Settings' });
-    expect(dialog.getAttribute('aria-modal')).toBe('true');
-  });
-
-  it('calls onClose on Escape', () => {
-    const onClose = vi.fn();
-    render(
-      <Dialog open onClose={onClose}>
-        Body
-      </Dialog>,
-    );
-    // Keyboard handler is registered on document (not the dialog element) so
-    // screen readers and keyboard users can dismiss from anywhere in the page.
-    fireEvent.keyDown(document, { key: 'Escape' });
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('calls onClose on scrim click but not on panel click', () => {
-    const onClose = vi.fn();
-    render(
-      <Dialog open onClose={onClose} aria-label="Panel">
-        Body
-      </Dialog>,
-    );
-    fireEvent.click(screen.getByRole('dialog')); // panel — should not close
-    expect(onClose).not.toHaveBeenCalled();
-    const closeButtons = screen.getAllByRole('button', { name: 'Close' });
-    expect(closeButtons.length).toBeGreaterThan(0);
-    fireEvent.click(closeButtons[0] as HTMLElement);
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('applies the size class', () => {
-    render(
-      <Dialog open onClose={() => {}} size="full" aria-label="Big">
-        Body
-      </Dialog>,
-    );
-    expect(screen.getByRole('dialog').className).toContain('full');
-  });
-
-  it('supports the sm size', () => {
-    render(
-      <Dialog open onClose={() => {}} size="sm" aria-label="Small">
-        Body
-      </Dialog>,
-    );
-    expect(screen.getByRole('dialog').className).toContain('sm');
-  });
-
-  it('renders a descendant-supplied secondRow via useOverlaySecondRow', () => {
-    function TabStrip() {
-      useOverlaySecondRow(<nav>Tab strip</nav>);
-      return null;
-    }
-    render(
-      <Dialog open onClose={() => {}} title="Account" aria-label="Account">
-        <TabStrip />
-      </Dialog>,
-    );
-    expect(screen.getByText('Tab strip')).toBeTruthy();
-  });
-
-  it('removes the secondRow when the supplying descendant unmounts', () => {
-    function TabStrip() {
-      useOverlaySecondRow(<nav>Tab strip</nav>);
-      return null;
-    }
-    function Harness({ showTabs }: { showTabs: boolean }) {
-      return (
-        <Dialog open onClose={() => {}} title="Account" aria-label="Account">
-          {showTabs && <TabStrip />}
-        </Dialog>
-      );
-    }
-    const { rerender } = render(<Harness showTabs />);
-    expect(screen.getByText('Tab strip')).toBeTruthy();
-    rerender(<Harness showTabs={false} />);
-    expect(screen.queryByText('Tab strip')).toBeNull();
-  });
-
-  it('is a no-op when called outside a Dialog', () => {
-    function Standalone() {
-      useOverlaySecondRow(<nav>Tab strip</nav>);
-      return <span>Standalone content</span>;
-    }
-    render(<Standalone />);
-    expect(screen.getByText('Standalone content')).toBeTruthy();
-    expect(screen.queryByText('Tab strip')).toBeNull();
-  });
-});

package/src/components/DragHandleRow/DragHandleRow.module.css

@@ -1,57 +0,0 @@
-.row {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sv-space-1);
-  position: relative;
-}
-
-/* Hover-reveal only where hover genuinely exists — on touch the handle would
-   otherwise never become visible (tap-generated hover doesn't count as a
-   sustained hover state, and :not(:hover) is always true with no hover
-   capability at all), so it stays visible by default there. */
-@media (hover: hover) {
-  .row:not(:hover) .handle,
-  .row:not(:focus-within) .handle {
-    opacity: 0;
-  }
-}
-
-.handle {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  margin-top: 2px;
-  border: none;
-  background: none;
-  padding: 0;
-  border-radius: var(--sv-radius-sm);
-  color: var(--sv-color-text-muted);
-  cursor: grab;
-  opacity: 1;
-  transition: opacity 0.1s ease;
-}
-
-.handle:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-.handle:active {
-  cursor: grabbing;
-}
-
-.icon {
-  pointer-events: none;
-}
-
-.content {
-  flex: 1;
-  min-width: 0;
-}
-
-.dragging {
-  opacity: 0.5;
-}

package/src/components/DragHandleRow/DragHandleRow.tsx

@@ -1,61 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import styles from './DragHandleRow.module.css';
-
-export interface DragHandleRowProps extends HTMLAttributes<HTMLDivElement> {
-  children: ReactNode;
-  /** Pass drag-listener and drag-control props from dnd-kit here. */
-  handleProps?: HTMLAttributes<HTMLButtonElement>;
-  isDragging?: boolean;
-}
-
-/**
- * A row wrapper that surfaces a drag handle on the left.
- * Consumers attach dnd-kit's useSortable listeners to `handleProps`.
- */
-export function DragHandleRow({
-  children,
-  handleProps,
-  isDragging,
-  className,
-  ...rest
-}: DragHandleRowProps) {
-  return (
-    <div
-      {...rest}
-      className={[styles.row, isDragging ? styles.dragging : '', className]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <button
-        type="button"
-        aria-label="Drag to reorder"
-        className={styles.handle}
-        tabIndex={-1}
-        {...handleProps}
-      >
-        <DragIcon />
-      </button>
-      <div className={styles.content}>{children}</div>
-    </div>
-  );
-}
-
-function DragIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 14 14"
-      fill="none"
-      aria-hidden="true"
-      className={styles.icon}
-    >
-      {/* Two columns of three dots */}
-      {[3, 7, 11].map((cy) =>
-        [4, 10].map((cx) => (
-          <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={1.2} fill="currentColor" />
-        )),
-      )}
-    </svg>
-  );
-}

package/src/components/Drawer/Drawer.module.css

@@ -1,92 +0,0 @@
-/* Drawer — bottom-sheet surface (RFC 0013). Shares scrim/shadow tokens with
- * Dialog but slides up from the bottom instead of centering. The panel has no
- * fixed height — it sizes to content, capped at 80dvh so some page context
- * remains visible above. Safe-area-aware: bottom padding clears the home
- * indicator in standalone/fullscreen mode. */
-
-.scrim {
-  position: fixed;
-  inset: 0;
-  /* When the shell declares --sv-shell-footer-height (mobile nav bar), stop the
-     scrim above the footer so the panel never hides behind it. */
-  bottom: var(--sv-shell-footer-height, 0);
-  z-index: 100;
-  display: flex;
-  align-items: flex-end;
-  background: var(--sv-color-scrim);
-  /* Entrance/exit fade — same two-phase-mount pattern as Dialog (see motion.ts
-     and Drawer.tsx). */
-  opacity: 0;
-  transition: opacity var(--sv-motion-duration-base) var(--sv-motion-ease-out);
-}
-
-.scrimOpen {
-  opacity: 1;
-}
-
-.panel {
-  width: 100%;
-  max-height: 80dvh;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  background: var(--sv-color-surface-raised);
-  border-top: 1px solid var(--sv-color-border);
-  border-radius: var(--sv-radius-3xl) var(--sv-radius-3xl) 0 0;
-  box-shadow: var(--sv-shadow-overlay);
-  /* Pull content above the home indicator / bottom bar in standalone mode. */
-  padding-bottom: env(safe-area-inset-bottom);
-  outline: none;
-  /* Slide up from below the viewport. Always a bottom sheet, so unlike Dialog
-     there's no desktop-vs-mobile fork here. */
-  transform: translateY(100%);
-  transition: transform var(--sv-motion-duration-base) var(--sv-motion-ease-out);
-}
-
-.panelOpen {
-  transform: translateY(0);
-}
-
-/* 'half' snapHeight — a fixed height instead of the default content-sized cap
- * above. Per the design-system's "half screen or less" convention for
- * Drawer; content taller than this belongs in Sheet instead. */
-.panelHalf {
-  height: 50dvh;
-  max-height: 50dvh;
-}
-
-/* See Dialog.module.css's identical rule for why 0.01ms rather than 0. */
-@media (prefers-reduced-motion: reduce) {
-  .scrim,
-  .panel {
-    transition-duration: 0.01ms;
-  }
-}
-
-/* Grab handle — the sole drag-initiation region for swipe-down-to-dismiss
- * (see Drawer.tsx's doc comment for why not the whole panel). The visual bar
- * (::before) stays the small, established 36x4px size; only the hit area
- * grows to a comfortable touch target. */
-.handle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: var(--sv-touch-target-min, 44px);
-  flex-shrink: 0;
-  cursor: grab;
-  /* JS-driven drag — the browser must not treat a press here as a
-     scroll/pan gesture that would fight it. */
-  touch-action: none;
-}
-
-.handle:active {
-  cursor: grabbing;
-}
-
-.handle::before {
-  content: '';
-  width: 36px;
-  height: 4px;
-  border-radius: var(--sv-radius-full);
-  background: var(--sv-color-border-strong);
-}

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,132 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from 'storybook/test';
-import { useState } from 'react';
-import { Button } from '../Button/Button';
-import { Icon } from '../Icon/Icon';
-import { Drawer } from './Drawer';
-
-function DrawerDemo({ label = 'Navigation' }: { label?: string }) {
-  const [open, setOpen] = useState(false);
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open drawer</Button>
-      <Drawer open={open} onClose={() => setOpen(false)} aria-label={label}>
-        <ul style={{ listStyle: 'none', margin: 0, padding: '8px 0' }}>
-          {(['house', 'grid-2x2', 'settings', 'user'] as const).map((icon) => (
-            <li key={icon}>
-              <button
-                onClick={() => setOpen(false)}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 12,
-                  width: '100%',
-                  padding: '12px 20px',
-                  background: 'none',
-                  border: 'none',
-                  cursor: 'pointer',
-                  fontSize: 15,
-                  color: 'var(--sv-color-text-primary)',
-                  fontFamily: 'system-ui',
-                }}
-              >
-                <Icon name={icon} size="md" aria-hidden />
-                {icon.replace(/-/g, ' ')}
-              </button>
-            </li>
-          ))}
-        </ul>
-      </Drawer>
-    </>
-  );
-}
-
-const meta = {
-  title: 'Components/Drawer',
-  component: Drawer,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          'Dismissable bottom-sheet panel. Used by the mobile shell for plugin navigation. Supports Esc, scrim-click, focus trap. Respects `env(safe-area-inset-bottom)`. Use the viewport addon at 375px to see the intended mobile context.',
-      },
-    },
-    viewport: { defaultViewport: 'mobile' },
-  },
-} satisfies Meta<typeof Drawer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => <DrawerDemo />,
-};
-
-export const Closed: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => (
-    <Drawer open={false} onClose={() => {}} aria-label="Closed drawer">
-      <p>Never seen</p>
-    </Drawer>
-  ),
-};
-
-function DrawerWithTitleDemo() {
-  const [open, setOpen] = useState(false);
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open drawer</Button>
-      <Drawer open={open} onClose={() => setOpen(false)} title="Apps">
-        <ul style={{ listStyle: 'none', margin: 0, padding: '8px 0' }}>
-          {(['house', 'grid-2x2', 'settings', 'user'] as const).map((icon) => (
-            <li key={icon}>
-              <button
-                onClick={() => setOpen(false)}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 12,
-                  width: '100%',
-                  padding: '12px 20px',
-                  background: 'none',
-                  border: 'none',
-                  cursor: 'pointer',
-                  fontSize: 15,
-                  color: 'var(--sv-color-text-primary)',
-                  fontFamily: 'system-ui',
-                }}
-              >
-                <Icon name={icon} size="md" aria-hidden />
-                {icon.replace(/-/g, ' ')}
-              </button>
-            </li>
-          ))}
-        </ul>
-      </Drawer>
-    </>
-  );
-}
-
-/** Opt-in `title` prop renders a built-in `OverlayHeader` (title + close)
- * below the grab handle — hidden by default (see the `Default` story), for
- * consumers that want one instead of building their own header markup. */
-export const WithTitle: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => <DrawerWithTitleDemo />,
-};
-
-/** Play function opens the drawer and asserts its list items are visible. */
-export const OpenViaInteraction: Story = {
-  args: { open: false, onClose: () => {}, children: null },
-  render: (_args) => <DrawerDemo label="Navigation menu" />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button', { name: /open drawer/i }));
-    const drawer = canvas.getByRole('navigation');
-    await expect(drawer).toBeVisible();
-  },
-};