@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/NotificationsPanel/NotificationsPanel.stories.tsx

@@ -1,61 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { NotificationsPanel } from './NotificationsPanel';
-import { Icon } from '../Icon/Icon';
-
-const items = [
-  {
-    id: '1',
-    icon: <Icon name="layers" size="sm" aria-hidden />,
-    title: 'Added to a project',
-    timeLabel: '2d ago',
-    read: false,
-    onDismiss: () => {},
-  },
-  {
-    id: '2',
-    icon: <Icon name="user-round-plus" size="sm" aria-hidden />,
-    title: 'Jamie invited you to Notes',
-    timeLabel: '3d ago',
-    read: true,
-    href: '/notes',
-    onDismiss: () => {},
-  },
-];
-
-const meta = {
-  title: 'Components/NotificationsPanel',
-  component: NotificationsPanel,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component:
-          "The bell trigger + dropdown, generalized from the runtime shell's own NotificationBell. Pure presentation — no fetch/SSE/mark-read logic; the consumer supplies already-resolved items and wires onOpen/onDismiss/onMarkAllRead/onClearAll.",
-      },
-    },
-  },
-  args: {
-    items,
-    unreadCount: 1,
-    onMarkAllRead: () => {},
-    onClearAll: () => {},
-  },
-} satisfies Meta<typeof NotificationsPanel>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const Empty: Story = {
-  args: {
-    items: [],
-    unreadCount: 0,
-  },
-};
-
-export const WithViewAll: Story = {
-  args: {
-    viewAllHref: '/inbox',
-  },
-};

package/src/components/NotificationsPanel/NotificationsPanel.tsx

@@ -1,187 +0,0 @@
-'use client';
-
-import { useState, type ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-import { Popover } from '../Popover/Popover';
-import styles from './NotificationsPanel.module.css';
-
-export interface NotificationsPanelItem {
-  id: string;
-  /** Category icon, already resolved (sized + colored) by the consumer —
-   *  this component doesn't own category → color mapping. */
-  icon: ReactNode;
-  title: string;
-  /** Pre-formatted relative time (e.g. "2d ago") — formatting stays
-   *  consumer-side so this component needs no Date/clock dependency. */
-  timeLabel: string;
-  read: boolean;
-  /** Renders the title as a link when set. */
-  href?: string;
-  /** Called when the title is clicked/tapped — typically "mark as read". */
-  onOpen?: () => void;
-  onDismiss: () => void;
-}
-
-export interface NotificationsPanelProps {
-  items: NotificationsPanelItem[];
-  unreadCount: number;
-  onMarkAllRead?: () => void;
-  onClearAll?: () => void;
-  emptyMessage?: string;
-  /** Trigger button's accessible label base — the unread count is appended
-   *  automatically, matching the real NotificationBell. Defaults to
-   *  "Notifications". */
-  'aria-label'?: string;
-  align?: 'left' | 'right';
-  /** Optional footer link (e.g. to the consumer's own full notification
-   *  list/detail view — RFC 0048) — mirrors the real `NotificationBell`'s
-   *  "View all" link. Omit to render no footer, matching this component's
-   *  behavior before this prop existed. */
-  viewAllHref?: string;
-}
-
-function NotificationRow({ item }: { item: NotificationsPanelItem }) {
-  const titleContent = item.href ? (
-    <a href={item.href} className={styles.itemTitle} onClick={item.onOpen}>
-      {item.title}
-    </a>
-  ) : !item.read ? (
-    <button
-      type="button"
-      className={styles.itemTitle}
-      aria-label={`Mark as read: ${item.title}`}
-      onClick={item.onOpen}
-    >
-      {item.title}
-    </button>
-  ) : (
-    <span className={styles.itemTitle}>{item.title}</span>
-  );
-
-  return (
-    <li className={[styles.item, item.read ? styles.itemRead : ''].filter(Boolean).join(' ')}>
-      <div className={styles.categoryIcon}>{item.icon}</div>
-      <div className={styles.itemBody}>
-        {titleContent}
-        <span className={styles.itemTime}>{item.timeLabel}</span>
-      </div>
-      <div className={styles.itemEnd}>
-        {!item.read && <span className={styles.unreadDot} aria-label="Unread" />}
-        <button
-          type="button"
-          className={styles.dismissBtn}
-          aria-label={`Dismiss: ${item.title}`}
-          onClick={item.onDismiss}
-        >
-          <Icon name="x" size="sm" aria-hidden />
-        </button>
-      </div>
-    </li>
-  );
-}
-
-/**
- * NotificationsPanel — the bell trigger + dropdown, generalized from the
- * runtime shell's own `NotificationBell.tsx` visual structure and copy
- * (title / Mark all read / Clear all / close, then a list of category-icon +
- * title + time + unread-dot + dismiss rows, or an empty state).
- *
- * Deliberately **presentational only** — no fetch/SSE/polling, no
- * category → color mapping, no mark-read/dismiss networking. The real
- * `NotificationBell` owns real platform data (`/api/account/notifications`,
- * a shared cross-instance store); this component can't and shouldn't know
- * about that (SDK boundary). The consumer supplies `items` already resolved
- * and wires `onOpen`/`onDismiss`/`onMarkAllRead`/`onClearAll` to whatever
- * its own data layer needs, against a shared panel instead of a
- * `shell: minimal` plugin hand-rebuilding one locally. Built on the shared
- * `Popover` primitive (self-contained open state) rather than the
- * original's hand-rolled outside-click/Escape listener.
- */
-export function NotificationsPanel({
-  items,
-  unreadCount,
-  onMarkAllRead,
-  onClearAll,
-  emptyMessage = 'No notifications.',
-  'aria-label': ariaLabel = 'Notifications',
-  align = 'right',
-  viewAllHref,
-}: NotificationsPanelProps) {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Popover
-      align={align}
-      width={340}
-      aria-label={ariaLabel}
-      open={open}
-      onClose={() => setOpen(false)}
-      trigger={
-        <button
-          type="button"
-          aria-label={unreadCount > 0 ? `${ariaLabel} (${unreadCount} unread)` : ariaLabel}
-          aria-haspopup="true"
-          aria-expanded={open}
-          onClick={() => setOpen((v) => !v)}
-          className={styles.trigger}
-        >
-          {/* size="lg" (24px), not "md" (20px) — matches the real
-              NotificationBell's own inline SVG, which is literally
-              width="24" height="24", not the DS Icon scale's "md" step. */}
-          <Icon name="bell" size="lg" aria-hidden />
-          {unreadCount > 0 && (
-            <span className={styles.badge} aria-hidden="true">
-              {unreadCount > 99 ? '99+' : unreadCount}
-            </span>
-          )}
-        </button>
-      }
-    >
-      <div className={styles.header}>
-        <span className={styles.headerTitle}>{ariaLabel}</span>
-        <div className={styles.headerActions}>
-          {items.length > 0 && (
-            <>
-              {unreadCount > 0 && onMarkAllRead && (
-                <button type="button" className={styles.actionBtn} onClick={onMarkAllRead}>
-                  Mark all read
-                </button>
-              )}
-              {onClearAll && (
-                <button type="button" className={styles.actionBtn} onClick={onClearAll}>
-                  Clear all
-                </button>
-              )}
-            </>
-          )}
-          <button
-            type="button"
-            className={styles.closeBtn}
-            aria-label={`Close ${ariaLabel.toLowerCase()}`}
-            onClick={() => setOpen(false)}
-          >
-            <Icon name="x" size="sm" aria-hidden />
-          </button>
-        </div>
-      </div>
-
-      <ul className={styles.list} aria-label={`${ariaLabel} list`}>
-        {items.length === 0 ? (
-          <li className={styles.empty}>
-            <span className={styles.emptyIcon} aria-hidden="true">
-              <Icon name="bell" size="lg" aria-hidden />
-            </span>
-            <span className={styles.emptyText}>{emptyMessage}</span>
-          </li>
-        ) : (
-          items.map((item) => <NotificationRow key={item.id} item={item} />)
-        )}
-      </ul>
-      {viewAllHref && (
-        <a href={viewAllHref} className={styles.viewAll} onClick={() => setOpen(false)}>
-          View all
-        </a>
-      )}
-    </Popover>
-  );
-}

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

@@ -1,78 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { NotificationsPanel } from '../NotificationsPanel';
-
-afterEach(() => {
-  cleanup();
-});
-
-const items = [
-  {
-    id: '1',
-    icon: <span>icon</span>,
-    title: 'Added to a project',
-    timeLabel: '2d ago',
-    read: false,
-    onOpen: vi.fn(),
-    onDismiss: vi.fn(),
-  },
-];
-
-describe('NotificationsPanel', () => {
-  it('renders a closed trigger with an unread badge', () => {
-    render(<NotificationsPanel items={items} unreadCount={1} />);
-    expect(screen.getByRole('button', { name: /1 unread/ })).toBeTruthy();
-    expect(screen.queryByText('Added to a project')).toBeNull();
-  });
-
-  it('renders no badge when there are no unread notifications', () => {
-    render(<NotificationsPanel items={[]} unreadCount={0} />);
-    expect(screen.getByRole('button', { name: 'Notifications' })).toBeTruthy();
-  });
-
-  it('opens the panel on trigger click, showing items', () => {
-    render(<NotificationsPanel items={items} unreadCount={1} />);
-    fireEvent.click(screen.getByRole('button', { name: /unread/ }));
-    expect(screen.getByText('Added to a project')).toBeTruthy();
-    expect(screen.getByText('2d ago')).toBeTruthy();
-  });
-
-  it('shows an empty state when there are no items', () => {
-    render(<NotificationsPanel items={[]} unreadCount={0} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Notifications' }));
-    expect(screen.getByText('No notifications.')).toBeTruthy();
-  });
-
-  it('calls onOpen when an unread title is clicked', () => {
-    render(<NotificationsPanel items={items} unreadCount={1} />);
-    fireEvent.click(screen.getByRole('button', { name: /unread/ }));
-    fireEvent.click(screen.getByRole('button', { name: 'Mark as read: Added to a project' }));
-    expect(items[0]?.onOpen).toHaveBeenCalledOnce();
-  });
-
-  it('calls onDismiss when the dismiss button is clicked', () => {
-    render(<NotificationsPanel items={items} unreadCount={1} />);
-    fireEvent.click(screen.getByRole('button', { name: /unread/ }));
-    fireEvent.click(screen.getByRole('button', { name: 'Dismiss: Added to a project' }));
-    expect(items[0]?.onDismiss).toHaveBeenCalledOnce();
-  });
-
-  it('calls onMarkAllRead and onClearAll from the header actions', () => {
-    const onMarkAllRead = vi.fn();
-    const onClearAll = vi.fn();
-    render(
-      <NotificationsPanel
-        items={items}
-        unreadCount={1}
-        onMarkAllRead={onMarkAllRead}
-        onClearAll={onClearAll}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: /unread/ }));
-    fireEvent.click(screen.getByRole('button', { name: 'Mark all read' }));
-    fireEvent.click(screen.getByRole('button', { name: 'Clear all' }));
-    expect(onMarkAllRead).toHaveBeenCalledOnce();
-    expect(onClearAll).toHaveBeenCalledOnce();
-  });
-});

package/src/components/OfflineGate/OfflineGate.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import { useIsOffline } from '../../hooks/useIsOffline';
-import { EmptyState } from '../EmptyState/EmptyState';
-
-export interface OfflineGateProps {
-  children: ReactNode;
-  /** Defaults to a generic "this section" phrasing — pass the surface's own name. */
-  surfaceName?: string;
-  className?: string;
-}
-
-/**
- * OfflineGate — blocks administrative/settings surfaces from rendering
- * (possibly stale) cached content while the device has no network, showing an
- * explanatory empty state instead (research 0012, epic task 2.32).
- *
- * Distinct from `OfflineBanner`: the banner is an informational overlay that
- * coexists with normal content everywhere in the shell. This is a hard block
- * for surfaces where operating against stale data is actively wrong — e.g. a
- * Console user list or an Account billing page reflects a point-in-time
- * snapshot the moment it's server-rendered, and any cached copy replayed
- * later has no way to signal that it may already be stale. `OfflineGate`
- * doesn't try to tell staleness apart from freshness; it removes the
- * question by not rendering the content at all while offline.
- *
- * `children` is rendered unconditionally while online, so this adds no cost
- * to the common case — it only decides what to show, never how the wrapped
- * content itself is fetched or cached.
- */
-export function OfflineGate({ children, surfaceName, className }: OfflineGateProps) {
-  const isOffline = useIsOffline();
-  if (!isOffline) return <>{children}</>;
-
-  return (
-    <EmptyState
-      icon="alert-triangle"
-      heading="You're offline"
-      description={`${surfaceName ?? 'This section'} needs a connection — reconnect to continue.`}
-      className={className}
-    />
-  );
-}

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

@@ -1,66 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, render, screen } from '@testing-library/react';
-import { OfflineGate } from '../OfflineGate';
-
-describe('OfflineGate', () => {
-  beforeEach(() => {
-    vi.stubGlobal('navigator', { ...window.navigator, onLine: true });
-  });
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('renders children unchanged while online', () => {
-    render(
-      <OfflineGate>
-        <p>Live content</p>
-      </OfflineGate>,
-    );
-    expect(screen.getByText('Live content')).toBeDefined();
-  });
-
-  it('replaces children with an explanatory empty state while offline', () => {
-    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
-    render(
-      <OfflineGate>
-        <p>Live content</p>
-      </OfflineGate>,
-    );
-    expect(screen.queryByText('Live content')).toBeNull();
-    expect(screen.getByText("You're offline")).toBeDefined();
-  });
-
-  it('names the surface in the offline message when provided', () => {
-    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
-    render(
-      <OfflineGate surfaceName="Console">
-        <p>Live content</p>
-      </OfflineGate>,
-    );
-    expect(screen.getByText(/Console needs a connection/)).toBeDefined();
-  });
-
-  it('falls back to generic phrasing with no surface name', () => {
-    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
-    render(
-      <OfflineGate>
-        <p>Live content</p>
-      </OfflineGate>,
-    );
-    expect(screen.getByText(/This section needs a connection/)).toBeDefined();
-  });
-
-  it('swaps back to children on reconnect', () => {
-    vi.stubGlobal('navigator', { ...window.navigator, onLine: false });
-    render(
-      <OfflineGate>
-        <p>Live content</p>
-      </OfflineGate>,
-    );
-    expect(screen.getByText("You're offline")).toBeDefined();
-    act(() => window.dispatchEvent(new Event('online')));
-    expect(screen.getByText('Live content')).toBeDefined();
-  });
-});

package/src/components/OverlayHeader/OverlayHeader.module.css

@@ -1,98 +0,0 @@
-/* OverlayHeader — shared fixed secondary header for Dialog's mobile mode,
- * Sheet, and Drawer. Not itself pinned via position — the consumer renders it
- * as a flex-shrink: 0 sibling before its own scrolling content region (see
- * the component's own doc comment). */
-
-.header {
-  flex-shrink: 0;
-  background: var(--sv-color-surface);
-  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
-}
-
-.row {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-2);
-  padding: var(--sv-space-3) var(--sv-space-4);
-}
-
-.backButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sv-touch-target-min, 44px);
-  height: var(--sv-touch-target-min, 44px);
-  flex-shrink: 0;
-  /* Pull the touch-target padding back so the chevron glyph still sits close
-     to the title, matching the visual (not hit-area) spacing of .row's own
-     gap — otherwise a 44px box reads as a large empty gap before the title. */
-  margin-left: calc(-1 * (var(--sv-touch-target-min, 44px) - var(--sv-icon-size-md)) / 2);
-  margin-right: calc(
-    -1 * (var(--sv-touch-target-min, 44px) - var(--sv-icon-size-md)) / 2 + var(--sv-space-1)
-  );
-  border: none;
-  border-radius: var(--sv-radius-md);
-  background: transparent;
-  color: var(--sv-color-text-muted);
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .backButton:hover {
-    background: var(--sv-color-surface-sunken);
-    color: var(--sv-color-text-primary);
-  }
-}
-
-.backButton:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: -2px;
-}
-
-.title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--sv-font-size-xl);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-}
-
-.action {
-  flex-shrink: 0;
-}
-
-.closeButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sv-touch-target-min, 44px);
-  height: var(--sv-touch-target-min, 44px);
-  flex-shrink: 0;
-  /* Pull the touch-target padding back so the × sits flush with the row's own
-     edge padding, same reasoning as .backButton above. */
-  margin-right: calc(-1 * (var(--sv-touch-target-min, 44px) - var(--sv-icon-size-sm)) / 2);
-  border: none;
-  border-radius: var(--sv-radius-md);
-  background: transparent;
-  color: var(--sv-color-text-muted);
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .closeButton:hover {
-    background: var(--sv-color-surface-sunken);
-    color: var(--sv-color-text-primary);
-  }
-}
-
-.closeButton:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: -2px;
-}
-
-.secondRow {
-  padding: 0 var(--sv-space-2) var(--sv-space-2);
-}

package/src/components/OverlayHeader/OverlayHeader.tsx

@@ -1,77 +0,0 @@
-import type { ReactNode } from 'react';
-import { Icon } from '../Icon/Icon';
-import styles from './OverlayHeader.module.css';
-
-export interface OverlayHeaderProps {
-  /** Overlay title, shown between the optional back button and the trailing
-   *  slots. Optional — some consumers (e.g. `Dialog`'s mobile bar) need the
-   *  row's close button present even when no title applies. Accepts any
-   *  `ReactNode`, not just a string — e.g. `Dialog`'s `header` prop passes
-   *  arbitrary content through here (an icon next to text, etc.); the
-   *  row's title slot still assumes single-line content sized like text
-   *  (see the component's own doc comment for the line this doesn't cross). */
-  title?: ReactNode;
-  /** Always renders a close button; called on click. */
-  onClose: () => void;
-  /** When provided, renders a back-chevron button before the title (for
-   *  hierarchical navigation within a single overlay — going back without
-   *  fully closing it). Omit for a flat overlay that only ever closes. */
-  onBack?: () => void;
-  /** Trailing slot next to the close button — e.g. a "Save" action. */
-  action?: ReactNode;
-  /** A second row below the title row — e.g. a tab strip. */
-  secondRow?: ReactNode;
-  className?: string;
-  /** Override the title row's own className (e.g. tighter padding to match
-   *  a consumer's own compact header elsewhere in the same surface) — the
-   *  row keeps its standard title/back/action/close layout, just restyled.
-   *  For a genuinely different shape, don't use `OverlayHeader` at all (see
-   *  this component's own doc comment). */
-  rowClassName?: string;
-  /** Override the title text's own className (e.g. a smaller font size to
-   *  match a consumer's own compact header elsewhere in the same surface). */
-  titleClassName?: string;
-}
-
-/**
- * OverlayHeader — the shared fixed secondary header for `Dialog`'s mobile
- * mode, `Sheet`, and `Drawer`: title + close (+ optional back button /
- * trailing action / tab-strip row). Not itself `position: sticky` or
- * `position: fixed` — it stays visually pinned because the consuming overlay
- * renders it as a non-scrolling flex sibling before its own scrollable
- * content region, the same technique `Dialog`'s `.mobileBar` already used
- * before this component existed to generalize it.
- *
- * Content that needs a fully custom header (e.g. an editable title, or
- * controls that aren't a simple title/back/action shape) should not use this
- * component — render its own header row instead; `Sheet`'s `title` prop is
- * optional specifically to leave that escape hatch open.
- */
-export function OverlayHeader({
-  title,
-  onClose,
-  onBack,
-  action,
-  secondRow,
-  className,
-  rowClassName,
-  titleClassName,
-}: OverlayHeaderProps) {
-  return (
-    <div className={[styles.header, className].filter(Boolean).join(' ')}>
-      <div className={[styles.row, rowClassName].filter(Boolean).join(' ')}>
-        {onBack && (
-          <button type="button" className={styles.backButton} aria-label="Back" onClick={onBack}>
-            <Icon name="chevron-left" size="md" aria-hidden />
-          </button>
-        )}
-        <span className={[styles.title, titleClassName].filter(Boolean).join(' ')}>{title}</span>
-        {action && <div className={styles.action}>{action}</div>}
-        <button type="button" className={styles.closeButton} aria-label="Close" onClick={onClose}>
-          <Icon name="x" size="sm" aria-hidden />
-        </button>
-      </div>
-      {secondRow && <div className={styles.secondRow}>{secondRow}</div>}
-    </div>
-  );
-}

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

@@ -1,69 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { OverlayHeader } from '../OverlayHeader';
-
-describe('OverlayHeader', () => {
-  afterEach(cleanup);
-
-  it('renders the title and calls onClose on the close button', () => {
-    const onClose = vi.fn();
-    render(<OverlayHeader title="Account" onClose={onClose} />);
-    expect(screen.getByText('Account')).toBeTruthy();
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('does not render a back button when onBack is omitted', () => {
-    render(<OverlayHeader title="Account" onClose={() => {}} />);
-    expect(screen.queryByRole('button', { name: 'Back' })).toBeNull();
-  });
-
-  it('renders and wires a back button when onBack is provided', () => {
-    const onBack = vi.fn();
-    render(<OverlayHeader title="Account" onClose={() => {}} onBack={onBack} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Back' }));
-    expect(onBack).toHaveBeenCalledOnce();
-  });
-
-  it('renders the trailing action slot', () => {
-    render(
-      <OverlayHeader
-        title="Edit list"
-        onClose={() => {}}
-        action={<button type="button">Save</button>}
-      />,
-    );
-    expect(screen.getByRole('button', { name: 'Save' })).toBeTruthy();
-  });
-
-  it('renders just the close button when title is omitted', () => {
-    const onClose = vi.fn();
-    render(<OverlayHeader onClose={onClose} />);
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  it('renders the second row', () => {
-    render(<OverlayHeader title="Account" onClose={() => {}} secondRow={<nav>Tab strip</nav>} />);
-    expect(screen.getByText('Tab strip')).toBeTruthy();
-  });
-
-  it('accepts arbitrary ReactNode content for title, not just a string', () => {
-    // Locks in the type widening (title?: string -> title?: ReactNode) that
-    // Dialog's `header` prop relies on (Dialog.tsx passes header through
-    // here as `title`) — a plain string title must keep working unchanged.
-    render(
-      <OverlayHeader
-        title={
-          <>
-            <strong>Card</strong> detail
-          </>
-        }
-        onClose={() => {}}
-      />,
-    );
-    expect(screen.getByText('Card').tagName).toBe('STRONG');
-    expect(screen.getByText('detail')).toBeTruthy();
-  });
-});