@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Command/Command.stories.tsx

@@ -1,104 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Command } from './Command';
-import { Button } from '../Button/Button';
-
-const meta = {
-  title: 'Components/Command',
-  component: Command,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          '⌘K-style command palette. Opened via Dialog, which supplies the modal shell — this adds the search input, substring filtering, and arrow-key/Enter selection on top of it. Controlled: the consumer owns the open state and any global shortcut listener that flips it.',
-      },
-    },
-  },
-  args: { open: false, onClose: () => {}, items: [] },
-} satisfies Meta<typeof Command>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-function CommandDemo() {
-  const [open, setOpen] = useState(false);
-  const [lastSelected, setLastSelected] = useState<string | null>(null);
-
-  return (
-    <div>
-      <Button onClick={() => setOpen(true)}>Open command palette</Button>
-      {lastSelected && (
-        <p
-          style={{
-            marginTop: 'var(--sv-space-3)',
-            fontSize: 14,
-            color: 'var(--sv-color-text-muted)',
-          }}
-        >
-          Last selected: {lastSelected}
-        </p>
-      )}
-      <Command
-        open={open}
-        onClose={() => setOpen(false)}
-        aria-label="Command palette"
-        items={[
-          {
-            id: 'new',
-            label: 'New conversation',
-            group: 'Actions',
-            icon: 'plus',
-            onSelect: () => setLastSelected('New conversation'),
-          },
-          {
-            id: 'export',
-            label: 'Export chat',
-            group: 'Actions',
-            icon: 'upload',
-            keywords: 'download save',
-            onSelect: () => setLastSelected('Export chat'),
-          },
-          {
-            id: 'profile',
-            label: 'Go to profile',
-            group: 'Navigation',
-            icon: 'user',
-            onSelect: () => setLastSelected('Go to profile'),
-          },
-          {
-            id: 'settings',
-            label: 'Open settings',
-            group: 'Navigation',
-            icon: 'settings',
-            onSelect: () => setLastSelected('Open settings'),
-          },
-        ]}
-      />
-    </div>
-  );
-}
-
-export const Default: Story = {
-  render: () => <CommandDemo />,
-};
-
-export const OpenWithNoResults: Story = {
-  render: () => {
-    function Demo() {
-      const [open, setOpen] = useState(true);
-      return (
-        <Command
-          open={open}
-          onClose={() => setOpen(false)}
-          aria-label="Command palette"
-          placeholder="Try typing something with no matches…"
-          items={[{ id: 'a', label: 'Alpha', onSelect: () => {} }]}
-        />
-      );
-    }
-    return <Demo />;
-  },
-};

package/src/components/Command/Command.tsx

@@ -1,168 +0,0 @@
-'use client';
-
-import { useEffect, useId, useMemo, useRef, useState } from 'react';
-import type { KeyboardEvent as ReactKeyboardEvent } from 'react';
-import { Dialog } from '../Dialog/Dialog';
-import { Icon, type IconName } from '../Icon/Icon';
-import styles from './Command.module.css';
-
-export interface CommandItem {
-  id: string;
-  label: string;
-  onSelect: () => void;
-  icon?: IconName;
-  /** Section header this item is grouped under. */
-  group?: string;
-  /** Extra searchable text beyond the label (keywords, description). */
-  keywords?: string;
-}
-
-export interface CommandProps {
-  open: boolean;
-  onClose: () => void;
-  items: CommandItem[];
-  placeholder?: string;
-  'aria-label'?: string;
-}
-
-/** Case-insensitive substring match against label + keywords. Not a scored
- * fuzzy matcher — a real fuzzy-match algorithm is a meaningfully bigger
- * undertaking than this primitive needs until a consumer's command list
- * is large enough that substring filtering stops being good enough. */
-function matches(item: CommandItem, query: string): boolean {
-  if (!query) return true;
-  const haystack = `${item.label} ${item.keywords ?? ''}`.toLowerCase();
-  return haystack.includes(query.toLowerCase());
-}
-
-/**
- * Command — a ⌘K-style palette. Opened via `Dialog`, which supplies the
- * modal shell (scrim, panel, mobile full-screen sheet, focus handling) —
- * this only adds the search input, filtering, and arrow-key/Enter
- * selection on top of it. Controlled (`open`/`onClose`): the consumer wires
- * up their own global shortcut listener to flip `open` — a DS primitive
- * shouldn't own a document-level keydown listener itself.
- */
-export function Command({
-  open,
-  onClose,
-  items,
-  placeholder = 'Type a command…',
-  'aria-label': ariaLabel = 'Command palette',
-}: CommandProps) {
-  const [query, setQuery] = useState('');
-  const [highlightedIndex, setHighlightedIndex] = useState(0);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const listId = useId();
-
-  const filtered = useMemo(() => items.filter((item) => matches(item, query)), [items, query]);
-
-  // Reset on every open, and whenever the query narrows/widens the result
-  // set — the top match should always be the one Enter would select.
-  useEffect(() => {
-    setHighlightedIndex(0);
-  }, [query, open]);
-
-  useEffect(() => {
-    if (open) {
-      setQuery('');
-      // Dialog mounts its content in the same tick it flips `open`; focus
-      // needs the next paint to land on an element that actually exists.
-      requestAnimationFrame(() => inputRef.current?.focus());
-    }
-  }, [open]);
-
-  function handleKeyDown(e: ReactKeyboardEvent<HTMLInputElement>) {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      setHighlightedIndex((i) => Math.min(i + 1, filtered.length - 1));
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      setHighlightedIndex((i) => Math.max(i - 1, 0));
-    } else if (e.key === 'Enter') {
-      e.preventDefault();
-      const item = filtered[highlightedIndex];
-      if (item) {
-        onClose();
-        item.onSelect();
-      }
-    }
-  }
-
-  // Group items in their original order, without moving an item's position
-  // relative to its own group even if groups aren't contiguous in `items`.
-  const groups = useMemo(() => {
-    const order: (string | undefined)[] = [];
-    const byGroup = new Map<string | undefined, CommandItem[]>();
-    for (const item of filtered) {
-      let bucket = byGroup.get(item.group);
-      if (!bucket) {
-        bucket = [];
-        order.push(item.group);
-        byGroup.set(item.group, bucket);
-      }
-      bucket.push(item);
-    }
-    return order.map((group) => ({ group, items: byGroup.get(group) ?? [] }));
-  }, [filtered]);
-
-  const highlightedId = filtered[highlightedIndex]
-    ? `${listId}-${filtered[highlightedIndex].id}`
-    : undefined;
-
-  return (
-    <Dialog open={open} onClose={onClose} aria-label={ariaLabel} size="sm">
-      <div className={styles.root}>
-        <input
-          ref={inputRef}
-          type="text"
-          role="combobox"
-          aria-expanded={filtered.length > 0}
-          aria-controls={listId}
-          aria-activedescendant={highlightedId}
-          aria-autocomplete="list"
-          className={styles.input}
-          placeholder={placeholder}
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          onKeyDown={handleKeyDown}
-        />
-        <ul id={listId} role="listbox" className={styles.list}>
-          {filtered.length === 0 && <li className={styles.empty}>No matching commands.</li>}
-          {groups.map(({ group, items: groupItems }) => (
-            <li key={group ?? '__ungrouped'}>
-              {group && <div className={styles.groupLabel}>{group}</div>}
-              <ul className={styles.groupList}>
-                {groupItems.map((item) => {
-                  const index = filtered.indexOf(item);
-                  const isHighlighted = index === highlightedIndex;
-                  return (
-                    <li key={item.id}>
-                      <button
-                        id={`${listId}-${item.id}`}
-                        type="button"
-                        role="option"
-                        aria-selected={isHighlighted}
-                        className={[styles.item, isHighlighted ? styles.itemHighlighted : '']
-                          .filter(Boolean)
-                          .join(' ')}
-                        onMouseEnter={() => setHighlightedIndex(index)}
-                        onClick={() => {
-                          onClose();
-                          item.onSelect();
-                        }}
-                      >
-                        {item.icon && <Icon name={item.icon} size="sm" aria-hidden />}
-                        {item.label}
-                      </button>
-                    </li>
-                  );
-                })}
-              </ul>
-            </li>
-          ))}
-        </ul>
-      </div>
-    </Dialog>
-  );
-}

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

@@ -1,162 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { Command, type CommandItem } from '../Command';
-
-// Command renders inside Dialog, whose exit animation reads
-// prefers-reduced-motion via matchMedia, which jsdom does not implement —
-// see Dialog.test.tsx's identical setup.
-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(),
-    })),
-  );
-}
-
-beforeEach(installMatchMedia);
-afterEach(() => {
-  vi.unstubAllGlobals();
-  cleanup();
-});
-
-const items: CommandItem[] = [
-  { id: 'new', label: 'New conversation', onSelect: vi.fn(), group: 'Actions' },
-  {
-    id: 'export',
-    label: 'Export chat',
-    onSelect: vi.fn(),
-    group: 'Actions',
-    keywords: 'download save',
-  },
-  { id: 'profile', label: 'Go to profile', onSelect: vi.fn(), group: 'Navigation' },
-];
-
-describe('Command', () => {
-  it('renders nothing when closed', () => {
-    render(<Command open={false} onClose={vi.fn()} items={items} />);
-    expect(screen.queryByRole('combobox')).toBeNull();
-  });
-
-  it('lists all items when the query is empty', () => {
-    render(<Command open onClose={vi.fn()} items={items} />);
-    expect(screen.getAllByRole('option')).toHaveLength(3);
-  });
-
-  it('filters by label', () => {
-    render(<Command open onClose={vi.fn()} items={items} />);
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'profile' } });
-    expect(screen.getAllByRole('option')).toHaveLength(1);
-    expect(screen.getByRole('option', { name: 'Go to profile' })).toBeDefined();
-  });
-
-  it('filters by keywords in addition to the label', () => {
-    render(<Command open onClose={vi.fn()} items={items} />);
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'download' } });
-    expect(screen.getAllByRole('option')).toHaveLength(1);
-    expect(screen.getByRole('option', { name: 'Export chat' })).toBeDefined();
-  });
-
-  it('shows an empty state when nothing matches', () => {
-    render(<Command open onClose={vi.fn()} items={items} />);
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'zzz' } });
-    expect(screen.queryAllByRole('option')).toHaveLength(0);
-    expect(screen.getByText('No matching commands.')).toBeDefined();
-  });
-
-  it('renders group headers', () => {
-    render(<Command open onClose={vi.fn()} items={items} />);
-    expect(screen.getByText('Actions')).toBeDefined();
-    expect(screen.getByText('Navigation')).toBeDefined();
-  });
-
-  it('highlights the first item by default', () => {
-    render(<Command open onClose={vi.fn()} items={items} />);
-    expect(
-      screen.getByRole('option', { name: 'New conversation' }).getAttribute('aria-selected'),
-    ).toBe('true');
-  });
-
-  it('ArrowDown/ArrowUp move the highlighted item', () => {
-    render(<Command open onClose={vi.fn()} items={items} />);
-    const input = screen.getByRole('combobox');
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    expect(screen.getByRole('option', { name: 'Export chat' }).getAttribute('aria-selected')).toBe(
-      'true',
-    );
-    fireEvent.keyDown(input, { key: 'ArrowUp' });
-    expect(
-      screen.getByRole('option', { name: 'New conversation' }).getAttribute('aria-selected'),
-    ).toBe('true');
-  });
-
-  it('ArrowDown does not move past the last item', () => {
-    render(<Command open onClose={vi.fn()} items={items} />);
-    const input = screen.getByRole('combobox');
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    expect(
-      screen.getByRole('option', { name: 'Go to profile' }).getAttribute('aria-selected'),
-    ).toBe('true');
-  });
-
-  it('resets the highlighted index when the query changes', () => {
-    render(<Command open onClose={vi.fn()} items={items} />);
-    const input = screen.getByRole('combobox');
-    fireEvent.keyDown(input, { key: 'ArrowDown' });
-    fireEvent.change(input, { target: { value: 'e' } });
-    const [firstMatch] = screen.getAllByRole('option');
-    expect(firstMatch?.getAttribute('aria-selected')).toBe('true');
-  });
-
-  it('Enter selects the highlighted item and closes', () => {
-    const onClose = vi.fn();
-    const onSelect = vi.fn();
-    const localItems: CommandItem[] = [{ id: 'a', label: 'Alpha', onSelect }];
-    render(<Command open onClose={onClose} items={localItems} />);
-    fireEvent.keyDown(screen.getByRole('combobox'), { key: 'Enter' });
-    expect(onSelect).toHaveBeenCalled();
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('clicking an item selects it and closes', () => {
-    const onClose = vi.fn();
-    const onSelect = vi.fn();
-    const localItems: CommandItem[] = [{ id: 'a', label: 'Alpha', onSelect }];
-    render(<Command open onClose={onClose} items={localItems} />);
-    fireEvent.click(screen.getByRole('option', { name: 'Alpha' }));
-    expect(onSelect).toHaveBeenCalled();
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('sets aria-activedescendant to the highlighted option', () => {
-    render(<Command open onClose={vi.fn()} items={items} />);
-    const input = screen.getByRole('combobox');
-    const firstOption = screen.getByRole('option', { name: 'New conversation' });
-    expect(input.getAttribute('aria-activedescendant')).toBe(firstOption.id);
-  });
-
-  it('resets the query each time it opens', () => {
-    const { rerender } = render(<Command open onClose={vi.fn()} items={items} />);
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'profile' } });
-    rerender(<Command open={false} onClose={vi.fn()} items={items} />);
-    rerender(<Command open onClose={vi.fn()} items={items} />);
-    expect(screen.getByRole('combobox').getAttribute('value')).toBe('');
-  });
-
-  it('focuses the input on open', async () => {
-    render(<Command open onClose={vi.fn()} items={items} />);
-    await act(async () => {
-      await new Promise((resolve) => requestAnimationFrame(resolve));
-    });
-    expect(document.activeElement).toBe(screen.getByRole('combobox'));
-  });
-});

package/src/components/ConfirmDialog/ConfirmDialog.module.css

@@ -1,113 +0,0 @@
-/* ConfirmDialog — built on the native <dialog> element (see the component's
- * own doc comment for why: content-sized, top-layer stacking, ::backdrop for
- * free). Tokens only. */
-
-.dialog {
-  border: none;
-  border-radius: var(--sv-radius-lg);
-  background: var(--sv-color-surface);
-  box-shadow: var(--sv-shadow-overlay);
-  padding: 0;
-  width: 22rem;
-  max-width: calc(100vw - var(--sv-space-8));
-}
-
-.dialog::backdrop {
-  background: var(--sv-color-scrim);
-}
-
-.body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-4);
-  padding: var(--sv-space-6);
-}
-
-.title {
-  margin: 0;
-  font-size: var(--sv-font-size-lg);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-}
-
-.message {
-  margin: 0;
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-muted);
-}
-
-.error {
-  margin: 0;
-  font-size: var(--sv-font-size-xs);
-  color: var(--sv-color-error-text);
-  padding: var(--sv-space-2) var(--sv-space-3);
-  border: 1px solid var(--sv-color-error-border);
-  border-radius: var(--sv-radius-sm);
-  background-color: var(--sv-color-error-surface);
-}
-
-.actions {
-  display: flex;
-  gap: var(--sv-space-3);
-  justify-content: flex-end;
-}
-
-/* Matches Button's own .button + .md structural rules exactly (padding,
- * radius, font weight, focus-visible ring, disabled state, touch target,
- * hover guard, active/pressed state) so it reads as the same control family
- * — only the color scheme differs. Not built as an override of Button's own
- * CSS module: cross-module class-order in the cascade isn't guaranteed, and
- * an inline-style override would defeat Button's own :hover rule (inline
- * styles always win over an external stylesheet, hover or not). A plain
- * button with its own tokens sidesteps both problems. */
-.destructiveConfirm {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sv-space-2);
-  /* Kept in sync with Button's .md rule by hand (see design-system.md
-     "Button and Checkbox touch ergonomics" — not a literal reuse of
-     Button). Matches Button's md padding, updated alongside it (10px,
-     36px rendered height). */
-  padding: 10px var(--sv-space-4);
-  border: 1px solid transparent;
-  border-radius: var(--sv-radius-md);
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-semibold);
-  line-height: 1;
-  cursor: pointer;
-  touch-action: manipulation;
-  background-color: var(--sv-color-error-solid);
-  color: var(--sv-color-text-on-error);
-  transition: background-color 0.15s ease;
-}
-
-@media (pointer: coarse) {
-  .destructiveConfirm {
-    min-height: var(--sv-touch-target-min, 44px);
-  }
-}
-
-/* Derived via color-mix from the semantic token, not a raw --sv-red-800
-   primitive (the original .dangerButton pattern this replaces did reference
-   the primitive directly — fixed here, not carried forward). */
-@media (hover: hover) {
-  .destructiveConfirm:hover:not(:disabled) {
-    background-color: color-mix(in srgb, var(--sv-color-error-solid) 85%, black);
-  }
-}
-
-.destructiveConfirm:active:not(:disabled) {
-  background-color: color-mix(in srgb, var(--sv-color-error-solid) 80%, black);
-}
-
-.destructiveConfirm:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-.destructiveConfirm:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -1,124 +0,0 @@
-'use client';
-
-import { type ReactNode, useEffect, useRef } from 'react';
-import { Button } from '../Button/Button';
-import styles from './ConfirmDialog.module.css';
-
-export interface ConfirmDialogProps {
-  /** Whether the dialog is shown. */
-  open: boolean;
-  /** Called on Esc, backdrop click, or the Cancel button. */
-  onClose: () => void;
-  title: string;
-  /** Accepts rich content (e.g. `Remove <strong>{name}</strong>?`), not just
-   *  plain text. */
-  message: ReactNode;
-  /** Called when the confirm action is clicked. Does not close the dialog
-   *  itself — pass `pending`/close it via `onClose` from the caller once the
-   *  action settles, so an async action that fails can keep the dialog open
-   *  to show `error`. */
-  onConfirm: () => void;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  /** Styles the confirm action as a destructive (red) action. */
-  destructive?: boolean;
-  /** Disables both actions — pair with a `confirmLabel` reflecting the
-   *  in-flight state (e.g. "Removing…") for an `onConfirm` that triggers an
-   *  async action. */
-  pending?: boolean;
-  /** Optional inline error, shown between the message and the actions — e.g.
-   *  a failed async `onConfirm` that keeps the dialog open to report it. */
-  error?: ReactNode;
-}
-
-/**
- * ConfirmDialog — a small, content-sized confirm/cancel prompt. Deliberately
- * NOT built on `Dialog`, which is a fixed-size box by design (so switching
- * views inside it never resizes the panel) — a confirm prompt is the opposite
- * case, sized to its message. Built on the native `<dialog>` element instead,
- * same as the pattern this component replaces (duplicated across the account
- * and console plugins): top-layer rendering and `::backdrop` come from the
- * browser for free, which is what makes a confirm opened *from inside*
- * another overlay (Dialog, Sheet) reliably stack above it without a manual
- * z-index scheme.
- *
- * Same presentation on desktop and mobile — a small centered card, not a
- * full-screen sheet (unlike Dialog/Sheet, which do fork by viewport).
- */
-export function ConfirmDialog({
-  open,
-  onClose,
-  title,
-  message,
-  onConfirm,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
-  destructive = false,
-  pending = false,
-  error,
-}: ConfirmDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-
-  useEffect(() => {
-    const el = dialogRef.current;
-    if (!el) return;
-    if (open) el.showModal();
-    else el.close();
-  }, [open]);
-
-  // The native <dialog> fires its own 'close' event on Esc (built-in, no
-  // listener needed for that) and whenever .close() runs — including the
-  // effect above reacting to `open` going false. Listening for it here is
-  // what makes Esc call the caller's onClose without a manual keydown handler.
-  useEffect(() => {
-    const el = dialogRef.current;
-    if (!el) return;
-    const handleClose = () => onClose();
-    el.addEventListener('close', handleClose);
-    return () => el.removeEventListener('close', handleClose);
-  }, [onClose]);
-
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    <dialog
-      ref={dialogRef}
-      className={styles.dialog}
-      aria-label={title}
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div className={styles.body}>
-        <h2 className={styles.title}>{title}</h2>
-        <div className={styles.message}>{message}</div>
-        {error && <p className={styles.error}>{error}</p>}
-        <div className={styles.actions}>
-          <Button type="button" variant="secondary" onClick={onClose} disabled={pending}>
-            {cancelLabel}
-          </Button>
-          {destructive ? (
-            // A solid red fill, not Button's own `destructive` variant (an
-            // outlined/ghost style meant for lower-emphasis placements) — a
-            // confirm action should read as strongly as `Button`'s primary
-            // variant does. Uses the same --sv-color-error-solid /
-            // -text-on-error tokens the codebase already introduced for this
-            // exact "reads as a filled action button, not a tinted status
-            // surface" case (see semantic.css).
-            <button
-              type="button"
-              className={styles.destructiveConfirm}
-              onClick={onConfirm}
-              disabled={pending}
-            >
-              {confirmLabel}
-            </button>
-          ) : (
-            <Button type="button" variant="primary" onClick={onConfirm} disabled={pending}>
-              {confirmLabel}
-            </Button>
-          )}
-        </div>
-      </div>
-    </dialog>
-  );
-}