@sovereignfs/ui 0.83.1 → 0.89.1

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

@@ -1,318 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { useState } from 'react';
-import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { ConfirmDialog } from '../../ConfirmDialog/ConfirmDialog';
-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 exactly once on Escape with focus inside the panel', () => {
-    const onClose = vi.fn();
-    render(
-      <Dialog open onClose={onClose} aria-label="Panel">
-        <button>Focus me</button>
-      </Dialog>,
-    );
-    // 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();
-    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="lg" aria-label="Big">
-        Body
-      </Dialog>,
-    );
-    expect(screen.getByRole('dialog').className).toContain('lg');
-  });
-
-  it('supports the sm size', () => {
-    render(
-      <Dialog open onClose={() => {}} size="sm" aria-label="Small">
-        Body
-      </Dialog>,
-    );
-    expect(screen.getByRole('dialog').className).toContain('sm');
-  });
-
-  it('supports the auto size', () => {
-    render(
-      <Dialog open onClose={() => {}} size="auto" aria-label="Auto-sized">
-        Body
-      </Dialog>,
-    );
-    expect(screen.getByRole('dialog').className).toContain('auto');
-  });
-
-  it('supports the fixed size (epic task 14.5)', () => {
-    render(
-      <Dialog open onClose={() => {}} size="fixed" aria-label="Fixed-size">
-        Body
-      </Dialog>,
-    );
-    expect(screen.getByRole('dialog').className).toContain('fixed');
-  });
-
-  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();
-  });
-
-  describe('Body only (default — no header/footer props)', () => {
-    it('renders exactly one close button and no footer', () => {
-      render(
-        <Dialog open onClose={() => {}} title="Settings" aria-label="Settings">
-          Body
-        </Dialog>,
-      );
-      // Both the mobile-only OverlayHeader's close button and the
-      // desktop-only floating one are always in the DOM (CSS toggles which
-      // is visible per breakpoint, not React) — unchanged from before this
-      // task, since this is the `header`-omitted branch.
-      expect(screen.getAllByRole('button', { name: 'Close' })).toHaveLength(2);
-      expect(screen.getByText('Settings')).toBeTruthy();
-    });
-  });
-
-  describe('Header + Body (header prop)', () => {
-    it('renders header content via a single OverlayHeader, on both breakpoints, instead of the mobile-only title bar', () => {
-      render(
-        <Dialog open onClose={() => {}} header={<span>Card detail</span>} aria-label="Card detail">
-          Body
-        </Dialog>,
-      );
-      expect(screen.getByText('Card detail')).toBeTruthy();
-      // Only one close button now — the header branch skips the separate
-      // desktop .close button entirely (see Dialog.tsx's own comment).
-      expect(screen.getAllByRole('button', { name: 'Close' })).toHaveLength(1);
-    });
-
-    it('supersedes title for visible content but keeps title as the aria-label fallback', () => {
-      render(
-        <Dialog open onClose={() => {}} title="Fallback name" header={<span>Visible header</span>}>
-          Body
-        </Dialog>,
-      );
-      expect(screen.getByText('Visible header')).toBeTruthy();
-      expect(screen.queryByText('Fallback name')).toBeNull();
-      expect(screen.getByRole('dialog', { name: 'Fallback name' })).toBeTruthy();
-    });
-  });
-
-  describe('Header + Body + Footer (header and footer props)', () => {
-    it('renders footer content as a non-scrolling sibling of the body', () => {
-      render(
-        <Dialog
-          open
-          onClose={() => {}}
-          header={<span>Card detail</span>}
-          footer={<button type="button">Save</button>}
-          aria-label="Card detail"
-        >
-          <p>Body content</p>
-        </Dialog>,
-      );
-      const footerButton = screen.getByRole('button', { name: 'Save' });
-      const bodyText = screen.getByText('Body content');
-      expect(footerButton).toBeTruthy();
-      // Footer is a sibling of .content (the scroll region), not nested
-      // inside it — it must never scroll away with the body.
-      expect(bodyText.closest('[class*="content"]')?.contains(footerButton)).toBe(false);
-    });
-
-    it('omits the footer row entirely when footer is not provided', () => {
-      render(
-        <Dialog open onClose={() => {}} header={<span>Card detail</span>} aria-label="Card detail">
-          Body
-        </Dialog>,
-      );
-      expect(screen.queryByRole('button', { name: 'Save' })).toBeNull();
-    });
-  });
-});
-
-describe('Dialog Escape precedence with a nested ConfirmDialog', () => {
-  beforeEach(() => {
-    installMatchMedia();
-    // jsdom does not implement HTMLDialogElement — see ConfirmDialog.test.tsx
-    // for the full rationale on the guard + deferred dispatch (both matter
-    // here too: without the guard, this file's own reuse of the mock across
-    // renders would double-dispatch; without deferring, ConfirmDialog's
-    // unregister-on-close wouldn't have run yet by the time this test reads
-    // the outer Dialog's response to a second Escape).
-    HTMLDialogElement.prototype.showModal = function (this: HTMLDialogElement) {
-      this.setAttribute('open', '');
-    };
-    HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
-      if (!this.hasAttribute('open')) return;
-      this.removeAttribute('open');
-      queueMicrotask(() => this.dispatchEvent(new Event('close')));
-    };
-  });
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  async function flush() {
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 0));
-    });
-  }
-
-  it('defers Escape to a nested open ConfirmDialog instead of closing the outer Dialog', async () => {
-    const outerOnClose = vi.fn();
-
-    function NestedHarness() {
-      // Starts closed and opens via a later click — matching the real
-      // sequence (CardDetailOverlay: the outer Dialog is already mounted and
-      // registered before the user ever triggers the nested confirm).
-      // Mounting both already-open in the same initial render would instead
-      // have React fire the child's (ConfirmDialog's) registration effect
-      // before the parent's (Dialog's) in that one shared commit — the one
-      // case this stack-order approach doesn't handle, and not the shape of
-      // the bug this task fixes.
-      const [confirmOpen, setConfirmOpen] = useState(false);
-      return (
-        <Dialog open onClose={outerOnClose} aria-label="Card detail">
-          <button onClick={() => setConfirmOpen(true)}>Delete card…</button>
-          <ConfirmDialog
-            open={confirmOpen}
-            onClose={() => setConfirmOpen(false)}
-            onConfirm={() => {}}
-            title="Delete card?"
-            message="This can't be undone."
-          />
-        </Dialog>
-      );
-    }
-
-    render(<NestedHarness />);
-    fireEvent.click(screen.getByRole('button', { name: 'Delete card…' }));
-    await flush();
-    expect(screen.getByRole('button', { name: 'Cancel' })).toBeTruthy();
-
-    // The nested ConfirmDialog is topmost — the outer Dialog's document-level
-    // Escape listener must not act while it's open.
-    fireEvent.keyDown(document, { key: 'Escape' });
-    await flush();
-    expect(outerOnClose).not.toHaveBeenCalled();
-    expect(screen.getByRole('button', { name: 'Cancel' })).toBeTruthy();
-
-    // Dismiss the nested confirm (unregisters it from the open-overlay
-    // stack) — the outer Dialog is now topmost again.
-    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
-    await flush();
-    expect(screen.queryByRole('button', { name: 'Cancel' })).toBeNull();
-
-    // A second Escape now reaches the outer Dialog.
-    fireEvent.keyDown(document, { key: 'Escape' });
-    await flush();
-    expect(outerOnClose).toHaveBeenCalledOnce();
-  });
-});

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,42 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import { GripIcon } from '../GripIcon/GripIcon';
-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}
-      >
-        <GripIcon className={styles.icon} />
-      </button>
-      <div className={styles.content}>{children}</div>
-    </div>
-  );
-}

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

@@ -1,121 +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 --sv-shell-footer-height is set (mobile nav bar — by the platform
-     shell, or by a self-rendered MobileFooter via usePublishShellChromeHeight
-     for a shellConfig.mobileFooter: false plugin), 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;
-  /* The panel itself no longer scrolls — see .body below. display: flex
-     (column) lets .handle (and OverlayHeader, when title is set) stay
-     fixed while .body's own overflow-y handles content taller than the
-     80dvh cap, the same fixed-header/scrollable-body split Sheet.module.css
-     already establishes (its .panel/.content pair). Before this, the whole
-     .panel scrolled as one block, so a tall drawer (e.g. many installed
-     plugins in the Apps grid) scrolled the grab handle itself out of view
-     along with the content — reachable in the DOM, invisible on screen. */
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--sv-color-surface-raised);
-  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  border-radius: var(--sv-radius-3xl) var(--sv-radius-3xl) 0 0;
-  box-shadow: var(--sv-shadow-overlay);
-  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);
-}
-
-/* The scroll container — everything below the fixed handle/OverlayHeader.
-   Scrollbar hidden (not overflow removed) the same way Tabs.module.css's
-   .tablist already does for this design system; scroll-driven UI here reads
-   as a native swipe list, not a document needing a visible scroll affordance. */
-.body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: none;
-  /* Pull content above the home indicator / bottom bar in standalone mode —
-     moved here from .panel now that this is the element whose bottom edge
-     is the actual scrollable content boundary. */
-  padding-bottom: env(safe-area-inset-bottom);
-}
-
-.body::-webkit-scrollbar {
-  display: none;
-}
-
-.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();
-  },
-};