@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/Drawer/Drawer.tsx

@@ -1,175 +0,0 @@
-'use client';
-
-import { type PointerEvent as ReactPointerEvent, 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 './Drawer.module.css';
-
-export interface DrawerProps {
-  /** Whether the drawer is shown. When false, nothing renders. */
-  open: boolean;
-  /** Called on Esc, scrim click, or a swipe-down past the dismiss threshold. */
-  onClose: () => void;
-  /** Accessible name for the drawer panel (sets `aria-label`). */
-  'aria-label'?: string;
-  /** `'content'` (default) sizes to content, capped at 80dvh. `'half'` fixes
-   *  the panel to 50dvh regardless of content — per the design-system's
-   *  "half screen or less" convention for Drawer, this is the only other
-   *  supported size; taller content should use `Sheet` instead. */
-  snapHeight?: 'content' | 'half';
-  /** Renders a built-in `OverlayHeader` (title + close) below the grab
-   *  handle. Omit when the content supplies its own header, or none is
-   *  needed at all — e.g. the mobile shell's Apps drawer, whose grab handle
-   *  and swipe-down/scrim-tap dismissal are enough on their own. Mirrors
-   *  `Sheet`'s identical `title` prop. */
-  title?: string;
-  children: ReactNode;
-}
-
-// Downward drag distance (px) past which releasing dismisses the drawer
-// instead of snapping back open. Distance-only, no velocity tracking — matches
-// the swipe-to-reveal gesture already established in consuming plugins (see
-// the mobile design-system plan), not a separate technique invented here.
-const SWIPE_DISMISS_THRESHOLD_PX = 100;
-
-/**
- * Drawer — a dismissable bottom-sheet panel. Used by the mobile shell for
- * plugin navigation; also available to plugins for any bottom-up surface.
- *
- * Behaviour: Esc, scrim click, or dragging the grab handle down past
- * `SWIPE_DISMISS_THRESHOLD_PX` all dismiss; focus moves to the first
- * focusable element on open and is restored on close; Tab is trapped within
- * the panel. The panel respects `env(safe-area-inset-bottom)` so it clears
- * the home indicator in standalone/fullscreen mode. Shares dismissal
- * conventions and tokens (`--sv-color-scrim`, `--sv-shadow-overlay`) with
- * `Dialog`.
- *
- * Animated open/close: slides up from the bottom, scrim fades. The `open`/
- * `onClose` API is unchanged — closing stays mounted internally for the exit
- * transition before actually unmounting; `prefers-reduced-motion: reduce`
- * collapses it to near-instant.
- *
- * The grab handle is the *only* drag-initiation region (not the whole panel)
- * — dragging from body content would fight that content's own internal
- * scroll, the same reasoning behind the tasks plugin's edge-zone-only
- * swipe-to-reveal technique.
- */
-export function Drawer({
-  open,
-  onClose,
-  'aria-label': ariaLabel,
-  snapHeight = 'content',
-  title,
-  children,
-}: DrawerProps) {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const reducedMotion = usePrefersReducedMotion();
-  const { mounted, phase } = useMountTransition(
-    open,
-    reducedMotion ? 0 : OVERLAY_MOTION_DURATION_MS,
-  );
-  // Tracks an in-progress handle drag. Kept in a ref (not state) so pointermove
-  // updates the DOM directly at 60fps instead of re-rendering on every event —
-  // same technique as the tasks plugin's swipe-to-reveal rows.
-  const dragStartY = useRef<number | null>(null);
-
-  useOverlayScrollLock(mounted);
-  useOverlayFocusCapture(panelRef, open);
-  useOverlayKeyboardTrap(panelRef, open, onClose);
-
-  // Swipe-down-to-dismiss, initiated only from the grab handle (see the
-  // component doc comment for why not the whole panel). Drags the panel
-  // directly via inline style while active (transition: none, so it tracks
-  // the finger 1:1 with no lag) and lets go on release: clearing the inline
-  // transform in the same commit that re-enables the CSS transition makes
-  // the panel animate from wherever the drag ended to its resolved position
-  // — open (snap back) or closed (the exit transition, same as a
-  // programmatic close) — rather than jump-cutting there. Same technique as
-  // the tasks plugin's row swipe-to-reveal.
-  function handleHandlePointerDown(e: ReactPointerEvent) {
-    e.currentTarget.setPointerCapture(e.pointerId);
-    dragStartY.current = e.clientY;
-  }
-
-  function handleHandlePointerMove(e: ReactPointerEvent) {
-    const startY = dragStartY.current;
-    if (startY === null) return;
-    const dy = Math.max(0, e.clientY - startY); // upward drag has no effect — already fully open
-    const panel = panelRef.current;
-    if (!panel) return;
-    panel.style.transition = 'none';
-    panel.style.transform = `translateY(${dy}px)`;
-  }
-
-  // Releases the drag and resolves it to open (snap back) or closed, based on
-  // distance. Shared by pointerup (a completed gesture) and pointercancel
-  // (the browser took the gesture away, e.g. for a system gesture) — cancel
-  // always snaps back rather than honoring the distance, since it wasn't a
-  // deliberate release.
-  function releaseDrag(e: ReactPointerEvent, honorDistance: boolean) {
-    const startY = dragStartY.current;
-    dragStartY.current = null;
-    if (startY === null) return;
-    const dy = Math.max(0, e.clientY - startY);
-    const panel = panelRef.current;
-    if (panel) {
-      panel.style.transform = '';
-      panel.style.transition = '';
-    }
-    if (honorDistance && dy > SWIPE_DISMISS_THRESHOLD_PX) 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.
-    // No onKeyDown here — useOverlayKeyboardTrap above already owns Escape via a
-    // document-level listener; a second handler here used to double-fire onClose
-    // per keypress (see Dialog.tsx's identical fix for the full explanation).
-    <div
-      className={[styles.scrim, isOpenPhase ? styles.scrimOpen : ''].filter(Boolean).join(' ')}
-      role="presentation"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={panelRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label={ariaLabel}
-        tabIndex={-1}
-        className={[
-          styles.panel,
-          snapHeight === 'half' ? styles.panelHalf : '',
-          isOpenPhase ? styles.panelOpen : '',
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        {/* The only drag-initiation region for swipe-down-to-dismiss — see the
-            component doc comment for why not the whole panel. Decorative +
-            functional, so no aria-label of its own; Esc and the scrim remain
-            the accessible dismiss paths. */}
-        <div
-          className={styles.handle}
-          aria-hidden="true"
-          onPointerDown={handleHandlePointerDown}
-          onPointerMove={handleHandlePointerMove}
-          onPointerUp={(e) => releaseDrag(e, true)}
-          onPointerCancel={(e) => releaseDrag(e, false)}
-        />
-        {title && <OverlayHeader title={title} onClose={onClose} />}
-        <div className={styles.body}>{children}</div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,226 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { Drawer } from '../Drawer';
-
-// Drawer'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(),
-    })),
-  );
-}
-
-// jsdom does not implement Element.setPointerCapture/releasePointerCapture
-// (another documented gap, alongside matchMedia and HTMLDialogElement) — the
-// grab handle's pointerdown handler calls setPointerCapture unconditionally.
-function installPointerCapture() {
-  if (!Element.prototype.setPointerCapture) {
-    Element.prototype.setPointerCapture = () => {};
-  }
-  if (!Element.prototype.releasePointerCapture) {
-    Element.prototype.releasePointerCapture = () => {};
-  }
-}
-
-describe('Drawer', () => {
-  beforeEach(() => {
-    installMatchMedia();
-    installPointerCapture();
-  });
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('renders nothing when closed', () => {
-    render(
-      <Drawer open={false} onClose={() => {}}>
-        Body
-      </Drawer>,
-    );
-    expect(screen.queryByRole('dialog')).toBeNull();
-  });
-
-  it('renders the panel with its accessible name when open', () => {
-    render(
-      <Drawer open onClose={() => {}} aria-label="Navigation">
-        Body
-      </Drawer>,
-    );
-    const panel = screen.getByRole('dialog', { name: 'Navigation' });
-    expect(panel.getAttribute('aria-modal')).toBe('true');
-  });
-
-  it('calls onClose exactly once on Escape with focus inside the panel', () => {
-    const onClose = vi.fn();
-    render(
-      <Drawer open onClose={onClose} aria-label="Panel">
-        <button>Focus me</button>
-      </Drawer>,
-    );
-    // Dispatched from the actually-focused element (matching real usage,
-    // where useOverlayFocusCapture moves focus into the panel on open) so the
-    // keydown bubbles through the scrim on its way to document — the exact
-    // path that used to trigger both the scrim's own (now-removed) Escape
-    // handler and useOverlayKeyboardTrap's document-level listener, double-
-    // firing onClose. Dispatching straight on `document` (the previous form
-    // of this test) skips that bubble path and would pass even if the bug
-    // were reintroduced.
-    const button = screen.getByRole('button', { name: 'Focus me' });
-    button.focus();
-    fireEvent.keyDown(button, { key: 'Escape' });
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('calls onClose on scrim click but not on panel click', () => {
-    const onClose = vi.fn();
-    const { container } = render(
-      <Drawer open onClose={onClose} aria-label="Nav">
-        <button>Action</button>
-      </Drawer>,
-    );
-    // The scrim is the outermost div; the panel is a child.
-    fireEvent.click(screen.getByRole('dialog')); // panel — should not close
-    expect(onClose).not.toHaveBeenCalled();
-    // Click the scrim background (the container's first child).
-    const scrim = container.firstElementChild as HTMLElement;
-    fireEvent.click(scrim);
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('applies the half snapHeight class', () => {
-    render(
-      <Drawer open onClose={() => {}} aria-label="Nav" snapHeight="half">
-        Body
-      </Drawer>,
-    );
-    expect(screen.getByRole('dialog').className).toMatch(/panelHalf/);
-  });
-
-  it('does not apply the half snapHeight class by default (content-sized)', () => {
-    render(
-      <Drawer open onClose={() => {}} aria-label="Nav">
-        Body
-      </Drawer>,
-    );
-    expect(screen.getByRole('dialog').className).not.toMatch(/panelHalf/);
-  });
-
-  it('does not render OverlayHeader when title is omitted (hidden by default)', () => {
-    render(
-      <Drawer open onClose={() => {}} aria-label="Nav">
-        <button type="button">Own action</button>
-      </Drawer>,
-    );
-    // Only the content's own button — no OverlayHeader close button.
-    expect(screen.getAllByRole('button')).toHaveLength(1);
-  });
-
-  it('renders children inside a scrollable body, separate from the grab handle', () => {
-    // Regression test: the panel used to be the sole scroll container
-    // (overflow-y: auto on .panel itself), so a tall drawer scrolled the
-    // grab handle out of view along with the content. The handle must stay
-    // a sibling of the scrollable region, not a descendant of it.
-    render(
-      <Drawer open onClose={() => {}} aria-label="Nav">
-        <button type="button">Own action</button>
-      </Drawer>,
-    );
-    const panel = screen.getByRole('dialog');
-    const handle = panel.firstElementChild as HTMLElement;
-    const button = screen.getByRole('button', { name: 'Own action' });
-    const body = button.parentElement as HTMLElement;
-    expect(body).not.toBe(panel);
-    expect(body.contains(handle)).toBe(false);
-    expect(panel.contains(body)).toBe(true);
-  });
-
-  it('renders OverlayHeader (title + close) when title is provided', () => {
-    const onClose = vi.fn();
-    render(
-      <Drawer open onClose={onClose} aria-label="Nav" title="Apps">
-        Body
-      </Drawer>,
-    );
-    expect(screen.getByText('Apps')).toBeTruthy();
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  describe('swipe-down-to-dismiss (grab handle)', () => {
-    // The handle is the panel's first child, aria-hidden and unlabeled —
-    // same "select via DOM position" approach the scrim-click test above
-    // already uses for a similarly unlabeled element.
-    function getHandle() {
-      return screen.getByRole('dialog').firstElementChild as HTMLElement;
-    }
-
-    it('dismisses when dragged past the threshold', () => {
-      const onClose = vi.fn();
-      render(
-        <Drawer open onClose={onClose} aria-label="Nav">
-          Body
-        </Drawer>,
-      );
-      const handle = getHandle();
-      fireEvent.pointerDown(handle, { clientY: 0 });
-      fireEvent.pointerMove(handle, { clientY: 150 });
-      fireEvent.pointerUp(handle, { clientY: 150 }); // 150px > 100px threshold
-      expect(onClose).toHaveBeenCalledOnce();
-    });
-
-    it('snaps back without dismissing when released under the threshold', () => {
-      const onClose = vi.fn();
-      render(
-        <Drawer open onClose={onClose} aria-label="Nav">
-          Body
-        </Drawer>,
-      );
-      const handle = getHandle();
-      fireEvent.pointerDown(handle, { clientY: 0 });
-      fireEvent.pointerMove(handle, { clientY: 40 });
-      fireEvent.pointerUp(handle, { clientY: 40 }); // 40px < 100px threshold
-      expect(onClose).not.toHaveBeenCalled();
-    });
-
-    it('snaps back without dismissing on pointercancel, regardless of distance', () => {
-      const onClose = vi.fn();
-      render(
-        <Drawer open onClose={onClose} aria-label="Nav">
-          Body
-        </Drawer>,
-      );
-      const handle = getHandle();
-      fireEvent.pointerDown(handle, { clientY: 0 });
-      fireEvent.pointerMove(handle, { clientY: 200 }); // well past the threshold
-      fireEvent.pointerCancel(handle, { clientY: 200 });
-      expect(onClose).not.toHaveBeenCalled();
-    });
-
-    it('ignores upward drags (already fully open)', () => {
-      const onClose = vi.fn();
-      render(
-        <Drawer open onClose={onClose} aria-label="Nav">
-          Body
-        </Drawer>,
-      );
-      const handle = getHandle();
-      fireEvent.pointerDown(handle, { clientY: 100 });
-      fireEvent.pointerMove(handle, { clientY: 0 }); // upward
-      fireEvent.pointerUp(handle, { clientY: 0 });
-      expect(onClose).not.toHaveBeenCalled();
-    });
-  });
-});

package/src/components/EmptyState/EmptyState.module.css

@@ -1,27 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sv-space-3);
-  padding: var(--sv-space-12) var(--sv-space-6);
-  text-align: center;
-}
-
-.icon {
-  color: var(--sv-color-text-subtle);
-}
-
-.heading {
-  margin: 0;
-  font-size: var(--sv-font-size-md);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-}
-
-.description {
-  margin: 0;
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-muted);
-  max-width: 36ch;
-}

package/src/components/EmptyState/EmptyState.tsx

@@ -1,27 +0,0 @@
-import type { ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-import type { IconName } from '../Icon/Icon';
-import styles from './EmptyState.module.css';
-
-export interface EmptyStateProps {
-  icon?: IconName;
-  heading: string;
-  description?: string;
-  action?: ReactNode;
-  className?: string;
-}
-
-export function EmptyState({ icon, heading, description, action, className }: EmptyStateProps) {
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')}>
-      {icon && (
-        <span className={styles.icon}>
-          <Icon name={icon} size="lg" aria-hidden={true} />
-        </span>
-      )}
-      <h2 className={styles.heading}>{heading}</h2>
-      {description && <p className={styles.description}>{description}</p>}
-      {action}
-    </div>
-  );
-}

package/src/components/FileDropzone/FileDropzone.module.css

@@ -1,63 +0,0 @@
-.dropzone {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-4);
-  width: 100%;
-  box-sizing: border-box;
-  padding: var(--sv-space-4) var(--sv-space-5);
-  border: 1.5px dashed var(--sv-color-border);
-  border-radius: var(--sv-radius-md);
-  background-color: var(--sv-color-surface-raised);
-  cursor: pointer;
-  transition:
-    background-color 0.12s ease,
-    border-color 0.12s ease;
-}
-
-@media (hover: hover) {
-  .dropzone:hover {
-    background-color: var(--sv-color-surface-sunken);
-    border-color: var(--sv-color-border-strong);
-  }
-}
-
-.dropzoneActive {
-  background-color: var(--sv-color-surface-sunken);
-  border-color: var(--sv-color-border-strong);
-}
-
-.dropzoneDisabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.icon {
-  display: inline-flex;
-  flex-shrink: 0;
-  color: var(--sv-color-text-muted);
-}
-
-.text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.title {
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-medium);
-  color: var(--sv-color-text-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.hint {
-  font-size: var(--sv-font-size-xs);
-  color: var(--sv-color-text-muted);
-}
-
-.hiddenInput {
-  display: none;
-}

package/src/components/FileDropzone/FileDropzone.tsx

@@ -1,109 +0,0 @@
-'use client';
-
-import type { DragEvent, ReactNode } from 'react';
-import { useRef, useState } from 'react';
-import { Icon } from '../Icon/Icon';
-import styles from './FileDropzone.module.css';
-
-export interface FileDropzoneProps {
-  /** Native `<input type="file">` `name` attribute — set this to submit the
-   * file as part of a native `<form action={...}>` (Server Action) request. */
-  name?: string;
-  /** Native `<input type="file">` `accept` attribute, e.g. `".zip,application/zip"`. */
-  accept?: string;
-  /** Icon shown beside the label — a file-type glyph. Defaults to a generic file icon. */
-  icon?: ReactNode;
-  /** Primary label — e.g. "Choose a ZIP file", or the selected file's name. */
-  label: string;
-  /** Secondary hint — e.g. "or drag and drop here", or the selected file's size. */
-  hint?: string;
-  /** Called with the picked or dropped file, or `null` if the input is cleared. */
-  onFileSelect: (file: File | null) => void;
-  /** Accessible name for the control — describe what will be uploaded. */
-  ariaLabel: string;
-  disabled?: boolean;
-  className?: string;
-}
-
-/**
- * A styled drag-and-drop file picker: a dashed-border dropzone wrapping a
- * visually-hidden native `<input type="file">`, so the native picker still
- * opens on click and the field participates in normal form semantics. A
- * dropped file is written into the input's own `FileList` (via `DataTransfer`)
- * so `name` + native `<form action>` submission sees it exactly like a
- * click-picked file — not just the `onFileSelect` callback.
- *
- * Caller owns the selected-file state and passes `label`/`hint` accordingly
- * (e.g. swap to the picked file's name/size) — this component is otherwise
- * uncontrolled and stateless beyond its own drag-hover visual.
- *
- * Do not pass `required` through to a wrapping form's validation via this
- * field — `display: none` on the hidden input does not exempt it from HTML5
- * constraint validation, so a `required` hidden input can block submission
- * with no visible field for the user to focus. Validate `onFileSelect`'s
- * result in application code instead.
- */
-export function FileDropzone({
-  name,
-  accept,
-  icon,
-  label,
-  hint,
-  onFileSelect,
-  ariaLabel,
-  disabled,
-  className,
-}: FileDropzoneProps) {
-  const [dragging, setDragging] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  return (
-    <label
-      className={[
-        styles.dropzone,
-        dragging ? styles.dropzoneActive : '',
-        disabled ? styles.dropzoneDisabled : '',
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      onDragOver={(event: DragEvent) => {
-        if (disabled) return;
-        event.preventDefault();
-        setDragging(true);
-      }}
-      onDragLeave={() => setDragging(false)}
-      onDrop={(event: DragEvent) => {
-        if (disabled) return;
-        event.preventDefault();
-        setDragging(false);
-        const dropped = event.dataTransfer.files[0];
-        if (!dropped) return;
-        if (inputRef.current && typeof DataTransfer !== 'undefined') {
-          const transfer = new DataTransfer();
-          transfer.items.add(dropped);
-          inputRef.current.files = transfer.files;
-        }
-        onFileSelect(dropped);
-      }}
-    >
-      <span className={styles.icon} aria-hidden="true">
-        {icon ?? <Icon name="file" size="lg" aria-hidden />}
-      </span>
-      <span className={styles.text}>
-        <span className={styles.title}>{label}</span>
-        {hint && <span className={styles.hint}>{hint}</span>}
-      </span>
-      <input
-        ref={inputRef}
-        type="file"
-        name={name}
-        aria-label={ariaLabel}
-        accept={accept}
-        disabled={disabled}
-        onChange={(event) => onFileSelect(event.target.files?.[0] ?? null)}
-        className={styles.hiddenInput}
-      />
-    </label>
-  );
-}