@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Menu/Menu.tsx

@@ -1,159 +0,0 @@
-'use client';
-
-import type { ReactElement } from 'react';
-import { useIsMobile } from '../../hooks';
-import { Drawer } from '../Drawer/Drawer';
-import { Icon, type IconName } from '../Icon/Icon';
-import { Popover } from '../Popover/Popover';
-import styles from './Menu.module.css';
-
-export interface MenuItem {
-  type?: 'item';
-  label: string;
-  onSelect: () => void;
-  icon?: IconName;
-  /** Styles the item as a destructive action (e.g. "Delete list"). */
-  destructive?: boolean;
-  disabled?: boolean;
-  /**
-   * Marks the item as one of a mutually-exclusive set (e.g. the active sort
-   * order) — renders a leading checkmark and `role="menuitemradio"` instead
-   * of `role="menuitem"`. Pass this on every item in the group, including
-   * the unchecked ones, so their labels stay aligned with the checked one's
-   * reserved checkmark gutter. Omit entirely for plain action items (e.g.
-   * "Delete list") — they render with no reserved leading space at all.
-   */
-  checked?: boolean;
-}
-
-/** A non-interactive section heading above a run of items (e.g. "Sort by"). */
-export interface MenuLabel {
-  type: 'label';
-  label: string;
-}
-
-/** A visual divider between sections. */
-export interface MenuSeparator {
-  type: 'separator';
-}
-
-export type MenuEntry = MenuItem | MenuLabel | MenuSeparator;
-
-export interface MenuProps {
-  /** The element that opens the menu — rendered as-is; the caller wires its
-   *  onClick to flip `open` (same controlled pattern as `Popover`). */
-  trigger: ReactElement;
-  open: boolean;
-  onClose: () => void;
-  items: MenuEntry[];
-  'aria-label': string;
-  /** Forwarded to `Popover` on desktop. Has no effect on mobile, where the
-   *  menu is always a full-width `Drawer`. */
-  align?: 'left' | 'right';
-}
-
-/**
- * Menu — an adaptive action menu: `Popover` on desktop, a bottom-sheet
- * `Drawer` on mobile. Replaces the desktop-Popover/mobile-Drawer fork that
- * `⋯` action menus (list options, row actions) otherwise re-derive per
- * plugin. Same list of `items` renders in both presentations — only the
- * surrounding chrome (floating panel vs. bottom sheet) differs, matching the
- * platform's `useIsMobile` breakpoint.
- *
- * `items` accepts three entry shapes: a plain action (`MenuItem`, `type`
- * omitted or `'item'`), a non-interactive section heading (`MenuLabel`,
- * `type: 'label'`), and a `MenuSeparator` (`type: 'separator'`) — enough to
- * express grouped sections like "Filter" / "Sort by" above a run of
- * destructive actions, matching how native OS menus lay out mixed
- * action/selection groups.
- *
- * Selecting an item both closes the menu and calls its `onSelect` — a
- * consumer's `onSelect` never needs to call `onClose` itself.
- */
-/**
- * MenuEntries — the `<ul role="menu">` item list itself, factored out of
- * `Menu` so other adaptive-surface components (e.g. `ContextMenu`) can
- * render the exact same items/destructive/checked/icon markup inside their
- * own positioning shell, instead of re-deriving it and risking drift.
- */
-export function MenuEntries({
-  items,
-  onSelect,
-}: {
-  items: MenuEntry[];
-  /** Called after an item's own onSelect — typically the surface's onClose. */
-  onSelect: (entry: MenuItem) => void;
-}) {
-  return (
-    <ul className={styles.list} role="menu">
-      {items.map((entry, index) => {
-        // Entries are a static, order-stable list per render — nothing
-        // reorders — so an index key is safe here.
-        if (entry.type === 'separator') {
-          return <li key={index} role="separator" className={styles.separator} />;
-        }
-        if (entry.type === 'label') {
-          return (
-            <li key={index} role="presentation" className={styles.label}>
-              {entry.label}
-            </li>
-          );
-        }
-        const isCheckable = entry.checked !== undefined;
-        return (
-          <li key={index} role="none">
-            <button
-              role={isCheckable ? 'menuitemradio' : 'menuitem'}
-              aria-checked={isCheckable ? entry.checked : undefined}
-              type="button"
-              className={[styles.item, entry.destructive ? styles.itemDestructive : '']
-                .filter(Boolean)
-                .join(' ')}
-              disabled={entry.disabled}
-              onClick={() => onSelect(entry)}
-            >
-              {isCheckable && (
-                <span className={styles.check} aria-hidden>
-                  {entry.checked && <Icon name="check" size="sm" aria-hidden />}
-                </span>
-              )}
-              {entry.icon && <Icon name={entry.icon} size="sm" aria-hidden />}
-              {entry.label}
-            </button>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-export function Menu({ trigger, open, onClose, items, 'aria-label': ariaLabel, align }: MenuProps) {
-  const isMobile = useIsMobile();
-
-  const list = (
-    <MenuEntries
-      items={items}
-      onSelect={(entry) => {
-        onClose();
-        entry.onSelect();
-      }}
-    />
-  );
-
-  if (isMobile) {
-    return (
-      <>
-        {trigger}
-        <Drawer open={open} onClose={onClose} aria-label={ariaLabel}>
-          {list}
-        </Drawer>
-      </>
-    );
-  }
-
-  return (
-    <Popover trigger={trigger} open={open} onClose={onClose} aria-label={ariaLabel} align={align}>
-      {list}
-    </Popover>
-  );
-}

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

@@ -1,197 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { Menu, type MenuItem } from '../Menu';
-
-let mobile = false;
-function installMatchMedia() {
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockImplementation((query: string) => ({
-      // useIsMobile's query is '(max-width: ...)'; everything else (e.g.
-      // Drawer's prefers-reduced-motion check) defaults to false so the
-      // mobile-branch Drawer isn't accidentally forced into the
-      // reduced-motion path.
-      matches: query.includes('max-width') ? mobile : false,
-      media: query,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  );
-}
-
-function installPointerCapture() {
-  if (!Element.prototype.setPointerCapture) {
-    Element.prototype.setPointerCapture = () => {};
-  }
-}
-
-const items: MenuItem[] = [
-  { label: 'Rename', onSelect: vi.fn() },
-  { label: 'Delete', onSelect: vi.fn(), destructive: true },
-];
-
-describe('Menu', () => {
-  beforeEach(() => {
-    mobile = false;
-    installMatchMedia();
-    installPointerCapture();
-  });
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('renders the trigger regardless of open state', () => {
-    render(
-      <Menu
-        trigger={<button type="button">Open menu</button>}
-        open={false}
-        onClose={() => {}}
-        items={items}
-        aria-label="List actions"
-      />,
-    );
-    expect(screen.getByRole('button', { name: 'Open menu' })).toBeTruthy();
-  });
-
-  it('renders as a Popover on desktop', () => {
-    render(
-      <Menu
-        trigger={<button type="button">Open menu</button>}
-        open
-        onClose={() => {}}
-        items={items}
-        aria-label="List actions"
-      />,
-    );
-    const menu = screen.getByRole('dialog', { name: 'List actions' });
-    // Popover's own aria-modal is explicitly false (non-modal floating panel).
-    expect(menu.getAttribute('aria-modal')).toBe('false');
-    expect(screen.getByRole('menuitem', { name: 'Rename' })).toBeTruthy();
-  });
-
-  it('renders as a Drawer on mobile', () => {
-    mobile = true;
-    installMatchMedia();
-    render(
-      <Menu
-        trigger={<button type="button">Open menu</button>}
-        open
-        onClose={() => {}}
-        items={items}
-        aria-label="List actions"
-      />,
-    );
-    const menu = screen.getByRole('dialog', { name: 'List actions' });
-    expect(menu.getAttribute('aria-modal')).toBe('true');
-    expect(screen.getByRole('menuitem', { name: 'Rename' })).toBeTruthy();
-  });
-
-  it('calls both onClose and the item onSelect when an item is chosen', () => {
-    const onClose = vi.fn();
-    const onSelect = vi.fn();
-    render(
-      <Menu
-        trigger={<button type="button">Open menu</button>}
-        open
-        onClose={onClose}
-        items={[{ label: 'Rename', onSelect }]}
-        aria-label="List actions"
-      />,
-    );
-    fireEvent.click(screen.getByRole('menuitem', { name: 'Rename' }));
-    expect(onSelect).toHaveBeenCalledOnce();
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('disables an item and does not fire onSelect when clicked', () => {
-    const onSelect = vi.fn();
-    render(
-      <Menu
-        trigger={<button type="button">Open menu</button>}
-        open
-        onClose={() => {}}
-        items={[{ label: 'Archive', onSelect, disabled: true }]}
-        aria-label="List actions"
-      />,
-    );
-    fireEvent.click(screen.getByRole('menuitem', { name: 'Archive' }));
-    expect(onSelect).not.toHaveBeenCalled();
-  });
-
-  it('marks a destructive item distinctly from a default one', () => {
-    render(
-      <Menu
-        trigger={<button type="button">Open menu</button>}
-        open
-        onClose={() => {}}
-        items={items}
-        aria-label="List actions"
-      />,
-    );
-    const renameClass = screen.getByRole('menuitem', { name: 'Rename' }).className;
-    const deleteClass = screen.getByRole('menuitem', { name: 'Delete' }).className;
-    expect(deleteClass).not.toBe(renameClass);
-  });
-
-  it('renders section labels and separators as non-interactive entries', () => {
-    render(
-      <Menu
-        trigger={<button type="button">Open menu</button>}
-        open
-        onClose={() => {}}
-        items={[
-          { type: 'label', label: 'Sort by' },
-          { label: 'Title', onSelect: vi.fn(), checked: true },
-          { type: 'separator' },
-          { label: 'Delete list', onSelect: vi.fn(), destructive: true },
-        ]}
-        aria-label="List actions"
-      />,
-    );
-    expect(screen.getByText('Sort by').getAttribute('role')).toBe('presentation');
-    expect(screen.getByRole('separator')).toBeTruthy();
-    // Only the plain action item is a plain menuitem; the checkable one is a menuitemradio.
-    expect(screen.getAllByRole('menuitem')).toHaveLength(1);
-  });
-
-  it('renders a checkable item as menuitemradio with aria-checked', () => {
-    render(
-      <Menu
-        trigger={<button type="button">Open menu</button>}
-        open
-        onClose={() => {}}
-        items={[
-          { label: 'Manual', onSelect: vi.fn(), checked: false },
-          { label: 'Title', onSelect: vi.fn(), checked: true },
-        ]}
-        aria-label="List actions"
-      />,
-    );
-    const unchecked = screen.getByRole('menuitemradio', { name: 'Manual' });
-    const checked = screen.getByRole('menuitemradio', { name: 'Title' });
-    expect(unchecked.getAttribute('aria-checked')).toBe('false');
-    expect(checked.getAttribute('aria-checked')).toBe('true');
-  });
-
-  it('closes and selects when a checkable item is clicked', () => {
-    const onClose = vi.fn();
-    const onSelect = vi.fn();
-    render(
-      <Menu
-        trigger={<button type="button">Open menu</button>}
-        open
-        onClose={onClose}
-        items={[{ label: 'Title', onSelect, checked: false }]}
-        aria-label="List actions"
-      />,
-    );
-    fireEvent.click(screen.getByRole('menuitemradio', { name: 'Title' }));
-    expect(onSelect).toHaveBeenCalledOnce();
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-});

package/src/components/Menubar/Menubar.stories.tsx

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Menubar } from './Menubar';
-
-const meta = {
-  title: 'Components/Menubar',
-  component: Menubar,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          "Desktop app-style menu bar (File/Edit/View...). A thin composition of NavigationMenu with MenuEntries as each item's flyout content — no positioning or list-rendering logic duplicated.",
-      },
-    },
-  },
-} satisfies Meta<typeof Menubar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {
-  args: {
-    menus: [
-      {
-        label: 'File',
-        items: [
-          { label: 'New conversation', onSelect: () => {} },
-          { label: 'Export', onSelect: () => {} },
-          { type: 'separator' },
-          { label: 'Close', onSelect: () => {} },
-        ],
-      },
-      {
-        label: 'Edit',
-        items: [
-          { label: 'Undo', onSelect: () => {} },
-          { label: 'Redo', onSelect: () => {} },
-        ],
-      },
-      {
-        label: 'View',
-        items: [
-          { type: 'label', label: 'Layout' },
-          { label: 'Compact', checked: false, onSelect: () => {} },
-          { label: 'Comfortable', checked: true, onSelect: () => {} },
-        ],
-      },
-    ],
-  },
-};

package/src/components/Menubar/Menubar.tsx

@@ -1,42 +0,0 @@
-'use client';
-
-import { NavigationMenu } from '../NavigationMenu/NavigationMenu';
-import { MenuEntries, type MenuEntry } from '../Menu/Menu';
-
-export interface MenubarMenu {
-  label: string;
-  items: MenuEntry[];
-}
-
-export interface MenubarProps {
-  menus: MenubarMenu[];
-  'aria-label'?: string;
-}
-
-/**
- * Menubar — desktop app-style menu bar (File / Edit / View...). A thin
- * composition of `NavigationMenu` (top-level triggers, per-item flyout
- * positioning, hover-switches-when-one-is-open, arrow-key navigation) with
- * `MenuEntries` (the same item list markup `Menu`'s dropdowns use) as each
- * item's flyout content — no positioning or list-rendering logic
- * duplicated from either.
- */
-export function Menubar({ menus, 'aria-label': ariaLabel = 'Menu bar' }: MenubarProps) {
-  return (
-    <NavigationMenu
-      aria-label={ariaLabel}
-      items={menus.map((menu) => ({
-        label: menu.label,
-        content: (close: () => void) => (
-          <MenuEntries
-            items={menu.items}
-            onSelect={(entry) => {
-              close();
-              entry.onSelect();
-            }}
-          />
-        ),
-      }))}
-    />
-  );
-}

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

@@ -1,45 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { Menubar } from '../Menubar';
-
-afterEach(cleanup);
-
-describe('Menubar', () => {
-  it('opens a menu on trigger click, showing its items', () => {
-    render(<Menubar menus={[{ label: 'File', items: [{ label: 'New', onSelect: () => {} }] }]} />);
-    fireEvent.click(screen.getByRole('button', { name: 'File' }));
-    expect(screen.getByRole('menuitem', { name: 'New' })).toBeDefined();
-  });
-
-  it('selecting an item calls onSelect and closes the menu', () => {
-    const onSelect = vi.fn();
-    render(<Menubar menus={[{ label: 'File', items: [{ label: 'New', onSelect }] }]} />);
-    fireEvent.click(screen.getByRole('button', { name: 'File' }));
-    fireEvent.click(screen.getByRole('menuitem', { name: 'New' }));
-    expect(onSelect).toHaveBeenCalled();
-    expect(screen.queryByRole('menuitem', { name: 'New' })).toBeNull();
-  });
-
-  it('switches directly between menus on hover once one is open, like a real menu bar', () => {
-    render(
-      <Menubar
-        menus={[
-          { label: 'File', items: [{ label: 'New', onSelect: () => {} }] },
-          { label: 'Edit', items: [{ label: 'Undo', onSelect: () => {} }] },
-        ]}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'File' }));
-    expect(screen.getByRole('menuitem', { name: 'New' })).toBeDefined();
-
-    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Edit' }));
-    expect(screen.getByRole('menuitem', { name: 'Undo' })).toBeDefined();
-    expect(screen.queryByRole('menuitem', { name: 'New' })).toBeNull();
-  });
-
-  it('defaults to an accessible "Menu bar" label', () => {
-    render(<Menubar menus={[{ label: 'File', items: [] }]} />);
-    expect(screen.getByRole('navigation', { name: 'Menu bar' })).toBeDefined();
-  });
-});

package/src/components/Message/Message.module.css

@@ -1,99 +0,0 @@
-.row {
-  display: flex;
-  flex-direction: column;
-  max-width: 80%;
-}
-
-.user {
-  align-self: flex-end;
-  align-items: flex-end;
-}
-
-.assistant,
-.tool {
-  align-self: flex-start;
-  align-items: flex-start;
-}
-
-.bubble {
-  padding: var(--sv-space-2) var(--sv-space-3);
-  border-radius: var(--sv-radius-xl);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1.5;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-}
-
-.user .bubble {
-  background: var(--sv-color-accent);
-  color: var(--sv-color-text-on-accent);
-  border-bottom-right-radius: var(--sv-radius-sm);
-}
-
-.assistant .bubble {
-  background: var(--sv-color-surface-raised);
-  border: 1px solid var(--sv-color-border);
-  color: var(--sv-color-text-primary);
-  border-bottom-left-radius: var(--sv-radius-sm);
-}
-
-.tool .bubble {
-  background: var(--sv-color-surface-sunken);
-  color: var(--sv-color-text-muted);
-  font-family: var(--sv-font-family-mono);
-  font-size: var(--sv-font-size-xs);
-  border-bottom-left-radius: var(--sv-radius-sm);
-}
-
-.actions {
-  display: flex;
-  gap: var(--sv-space-2);
-  margin-top: var(--sv-space-1);
-  font-size: var(--sv-font-size-caption);
-  color: var(--sv-color-text-muted);
-}
-
-/* Typing indicator — three dots, staggered pulse. */
-.typingDots {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: var(--sv-space-1) 0;
-}
-
-.dot {
-  width: 6px;
-  height: 6px;
-  border-radius: var(--sv-radius-full);
-  background: currentColor;
-  opacity: 0.4;
-  animation: typing-pulse 1.2s ease-in-out infinite;
-}
-
-.dot:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.dot:nth-child(3) {
-  animation-delay: 0.4s;
-}
-
-@keyframes typing-pulse {
-  0%,
-  80%,
-  100% {
-    opacity: 0.4;
-    transform: scale(0.85);
-  }
-  40% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dot {
-    animation: none;
-    opacity: 0.7;
-  }
-}

package/src/components/Message/Message.stories.tsx

@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Message } from './Message';
-
-const meta = {
-  title: 'Components/Message',
-  component: Message,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          "A single chat turn, for the Sovereign Harness assistant (RFC 0040). `sender` is one of user/assistant/tool — matching harness_messages (named `sender`, not `role`, to avoid colliding with the ARIA role attribute). Content is caller-controlled ReactNode; markdown rendering, if any, is the consumer's choice.",
-      },
-    },
-  },
-  args: { sender: 'assistant', children: 'Your task is due Thursday.' },
-} satisfies Meta<typeof Message>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const User: Story = {
-  args: { sender: 'user', children: 'What tasks do I have due this week?' },
-};
-
-export const Assistant: Story = {
-  args: { sender: 'assistant' },
-};
-
-export const Tool: Story = {
-  args: { sender: 'tool', children: 'query_tasks({ dueBefore: "2026-08-01" }) → 3 results' },
-};
-
-export const Pending: Story = {
-  args: { sender: 'assistant', pending: true },
-};
-
-export const WithActions: Story = {
-  args: {
-    sender: 'assistant',
-    actions: (
-      <>
-        <button type="button" style={{ all: 'unset', cursor: 'pointer' }}>
-          Forget this
-        </button>
-        <span>·</span>
-        <button type="button" style={{ all: 'unset', cursor: 'pointer' }}>
-          Copy
-        </button>
-      </>
-    ),
-  },
-};
-
-export const Conversation: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-      <Message sender="user">What tasks do I have due this week?</Message>
-      <Message sender="tool">
-        query_tasks({'{'} dueBefore: "2026-08-01" {'}'}) → 3 results
-      </Message>
-      <Message
-        sender="assistant"
-        actions={
-          <button type="button" style={{ all: 'unset', cursor: 'pointer' }}>
-            Forget this
-          </button>
-        }
-      >
-        You have 3 tasks due this week: review the Q3 report, reply to the design feedback thread,
-        and renew the domain registration.
-      </Message>
-      <Message sender="user">Thanks!</Message>
-      <Message sender="assistant" pending />
-    </div>
-  ),
-};