@sovereignfs/ui 0.41.0 → 0.54.0

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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,168 @@
+'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

@@ -0,0 +1,162 @@
+// @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

@@ -65,7 +65,11 @@
   align-items: center;
   justify-content: center;
   gap: var(--sv-space-2);
-  padding: 13px var(--sv-space-4);
+  /* 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);

package/src/components/ContextMenu/ContextMenu.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ContextMenu } from './ContextMenu';
+
+const meta = {
+  title: 'Components/ContextMenu',
+  component: ContextMenu,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          "Right-click menu on desktop, long-press on touch. Desktop positioning reuses Popover's existing collision detection anchored to the click point; touch opens the same items in a Drawer bottom sheet — a floating panel at a touch point isn't a pattern touch interfaces have.",
+      },
+    },
+  },
+  args: {
+    children: <span />,
+    items: [
+      { label: 'Rename', onSelect: () => {} },
+      { label: 'Duplicate', onSelect: () => {} },
+      { type: 'separator' },
+      { label: 'Delete', destructive: true, onSelect: () => {} },
+    ],
+    'aria-label': 'Row actions',
+  },
+} satisfies Meta<typeof ContextMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: (args) => (
+    <ContextMenu {...args}>
+      <div
+        style={{
+          width: 240,
+          padding: 'var(--sv-space-4)',
+          border: '1px dashed var(--sv-color-border-strong)',
+          borderRadius: 'var(--sv-radius-md)',
+          textAlign: 'center',
+          fontSize: 14,
+          color: 'var(--sv-color-text-muted)',
+        }}
+      >
+        Right-click here (or long-press on touch)
+      </div>
+    </ContextMenu>
+  ),
+};
+
+export const WithIconsAndChecked: Story = {
+  args: {
+    items: [
+      { type: 'label', label: 'Sort by' },
+      { label: 'Name', checked: true, onSelect: () => {} },
+      { label: 'Date modified', checked: false, onSelect: () => {} },
+      { type: 'separator' },
+      { label: 'Rename', icon: 'pencil', onSelect: () => {} },
+      { label: 'Delete', icon: 'trash-2', destructive: true, onSelect: () => {} },
+    ],
+  },
+  render: (args) => (
+    <ContextMenu {...args}>
+      <div
+        style={{
+          width: 240,
+          padding: 'var(--sv-space-4)',
+          border: '1px dashed var(--sv-color-border-strong)',
+          borderRadius: 'var(--sv-radius-md)',
+          textAlign: 'center',
+          fontSize: 14,
+          color: 'var(--sv-color-text-muted)',
+        }}
+      >
+        Right-click here
+      </div>
+    </ContextMenu>
+  ),
+};

package/src/components/ContextMenu/ContextMenu.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { cloneElement, useState } from 'react';
+import type { ReactElement } from 'react';
+import type { MouseEvent as ReactMouseEvent } from 'react';
+import { useIsMobile, useLongPress } from '../../hooks';
+import { Popover } from '../Popover/Popover';
+import { Drawer } from '../Drawer/Drawer';
+import { MenuEntries, type MenuEntry, type MenuItem } from '../Menu/Menu';
+
+export interface ContextMenuProps {
+  /** The element that gets right-click (desktop) / long-press (touch)
+   * behavior — cloned with the trigger handlers, rendered as-is otherwise.
+   * Typed with `<any>` props (not a bare `ReactElement`, whose implicit
+   * `unknown` props type makes `cloneElement` reject *both* branches of
+   * the long-press/onContextMenu union below — an interface value like
+   * `LongPressHandlers` isn't assignable to an indexed props type without
+   * its own index signature) — the standard, narrowly-scoped escape hatch
+   * for "clone an arbitrary child with props not known ahead of time". */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- see comment above
+  children: ReactElement<any>;
+  items: MenuEntry[];
+  'aria-label': string;
+}
+
+/**
+ * ContextMenu — right-click menu on desktop, long-press on touch.
+ *
+ * Desktop positioning reuses `Popover`'s existing collision-detection logic
+ * rather than reimplementing it: the panel is wrapped in a zero-size,
+ * `position: fixed` anchor placed at the click coordinates, so `Popover`
+ * measures and flips against *that* point exactly as it would a normal
+ * trigger element.
+ *
+ * Touch uses `useLongPress` (which already handles the OS's own long-press
+ * callout/context-menu suppression) and opens the same items in a `Drawer`
+ * bottom sheet — the same adaptive-surface split `Menu` already uses,
+ * because a floating panel positioned at a touch point isn't a pattern
+ * touch interfaces have in the first place.
+ */
+export function ContextMenu({ children, items, 'aria-label': ariaLabel }: ContextMenuProps) {
+  const isMobile = useIsMobile();
+  const [open, setOpen] = useState(false);
+  const [point, setPoint] = useState({ x: 0, y: 0 });
+
+  const longPressHandlers = useLongPress({
+    onLongPress: () => setOpen(true),
+    disabled: !isMobile,
+  });
+
+  function handleContextMenu(e: ReactMouseEvent) {
+    e.preventDefault();
+    setPoint({ x: e.clientX, y: e.clientY });
+    setOpen(true);
+  }
+
+  const wrappedChild = cloneElement(
+    children,
+    isMobile ? longPressHandlers : { onContextMenu: handleContextMenu },
+  );
+
+  const list = (
+    <MenuEntries
+      items={items}
+      onSelect={(entry: MenuItem) => {
+        setOpen(false);
+        entry.onSelect();
+      }}
+    />
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {wrappedChild}
+        <Drawer open={open} onClose={() => setOpen(false)} aria-label={ariaLabel}>
+          {list}
+        </Drawer>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {wrappedChild}
+      {open && (
+        <div style={{ position: 'fixed', left: point.x, top: point.y, width: 0, height: 0 }}>
+          <Popover
+            trigger={<span />}
+            open={open}
+            onClose={() => setOpen(false)}
+            aria-label={ariaLabel}
+          >
+            {list}
+          </Popover>
+        </div>
+      )}
+    </>
+  );
+}