@sovereignfs/ui 0.45.0 → 0.83.1

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

@@ -0,0 +1,109 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/react';
+import { NavList, type NavListGroup } from '../NavList';
+import styles from '../NavList.module.css';
+
+afterEach(cleanup);
+
+const groups: NavListGroup[] = [
+  {
+    id: 'overview',
+    items: [{ id: 'overview', label: 'Overview', href: '/console', icon: 'layout-dashboard' }],
+  },
+  {
+    id: 'people',
+    label: 'People',
+    items: [
+      { id: 'users', label: 'Users', href: '/console/users', icon: 'users', active: true },
+      { id: 'groups', label: 'Groups', href: '/console/groups', icon: 'layers' },
+    ],
+  },
+];
+
+describe('NavList', () => {
+  it('renders every item as a link with the correct href', () => {
+    render(<NavList groups={groups} variant="static" aria-label="Sections" />);
+    expect(screen.getByRole('link', { name: /overview/i }).getAttribute('href')).toBe('/console');
+    expect(screen.getByRole('link', { name: /users/i }).getAttribute('href')).toBe(
+      '/console/users',
+    );
+    expect(screen.getByRole('link', { name: /groups/i }).getAttribute('href')).toBe(
+      '/console/groups',
+    );
+  });
+
+  it('renders a label for a named group and no label for an ungrouped one', () => {
+    render(<NavList groups={groups} variant="static" aria-label="Sections" />);
+    // "People" is the only group.label in the fixture — it must appear exactly
+    // once. The ungrouped "overview" group renders its item with no group
+    // header text alongside it (nothing else in the fixture could produce a
+    // second match).
+    expect(screen.getAllByText('People')).toHaveLength(1);
+  });
+
+  describe('variant="static"', () => {
+    it('marks the active item with aria-current="page"', () => {
+      render(<NavList groups={groups} variant="static" aria-label="Sections" />);
+      expect(screen.getByRole('link', { name: /users/i }).getAttribute('aria-current')).toBe(
+        'page',
+      );
+      expect(screen.getByRole('link', { name: /groups/i }).getAttribute('aria-current')).toBeNull();
+    });
+
+    it('renders no chevron icons', () => {
+      const { container } = render(
+        <NavList groups={groups} variant="static" aria-label="Sections" />,
+      );
+      expect(container.querySelectorAll('svg').length).toBe(groups.flatMap((g) => g.items).length);
+    });
+  });
+
+  describe('variant="drilldown"', () => {
+    it('never sets aria-current, even on an item marked active', () => {
+      render(<NavList groups={groups} variant="drilldown" aria-label="Sections" />);
+      expect(screen.getByRole('link', { name: /users/i }).getAttribute('aria-current')).toBeNull();
+    });
+
+    it('renders a trailing chevron for every item', () => {
+      const { container } = render(
+        <NavList groups={groups} variant="drilldown" aria-label="Sections" />,
+      );
+      const itemCount = groups.flatMap((g) => g.items).length;
+      // One icon svg + one chevron svg per item.
+      expect(container.querySelectorAll('svg').length).toBe(itemCount * 2);
+    });
+  });
+
+  describe('density', () => {
+    it('defaults to no compact class', () => {
+      const { container } = render(
+        <NavList groups={groups} variant="static" aria-label="Sections" />,
+      );
+      expect(container.querySelector('nav')?.className).not.toContain(styles.compact);
+    });
+
+    it('applies the compact class when density="compact"', () => {
+      const { container } = render(
+        <NavList groups={groups} variant="static" density="compact" aria-label="Sections" />,
+      );
+      expect(container.querySelector('nav')?.className).toContain(styles.compact);
+    });
+  });
+
+  it('calls renderLink with the item and computed link props instead of rendering a plain anchor', () => {
+    const renderLink = vi.fn((_item, linkProps) => (
+      <button type="button" aria-current={linkProps['aria-current']}>
+        {linkProps.children}
+      </button>
+    ));
+    render(
+      <NavList groups={groups} variant="static" aria-label="Sections" renderLink={renderLink} />,
+    );
+    expect(renderLink).toHaveBeenCalledTimes(3);
+    expect(screen.queryAllByRole('link').length).toBe(0);
+    expect(screen.getByRole('button', { name: /users/i }).getAttribute('aria-current')).toBe(
+      'page',
+    );
+  });
+});

package/src/components/NavTabs/NavTabs.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0;
-  border-bottom: 1px solid var(--sv-color-border);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
 }
 
 .link {

package/src/components/NavTabs/NavTabs.tsx

@@ -1,3 +1,4 @@
+import { Fragment, type ReactNode } from 'react';
 import styles from './NavTabs.module.css';
 
 export interface NavTabItem {
@@ -6,28 +7,55 @@ export interface NavTabItem {
   active?: boolean;
 }
 
+/** Props to spread onto a consumer-supplied link element — keeps NavTabs' own
+ * class names and a11y attributes in sync with whatever the consumer renders. */
+export interface NavTabLinkProps {
+  href: string;
+  className: string;
+  'aria-current': 'page' | undefined;
+  children: ReactNode;
+}
+
 export interface NavTabsProps {
   items: NavTabItem[];
   className?: string;
   'aria-label'?: string;
+  /** Render a tab as something other than a plain `<a href>` — e.g. Next's
+   * `<Link replace>` inside an overlay-shell plugin, where a full page
+   * navigation would break the dialog's history contract. Receives the item
+   * plus the class name/aria attributes NavTabs would otherwise apply. */
+  renderLink?: (item: NavTabItem, linkProps: NavTabLinkProps) => ReactNode;
 }
 
-export function NavTabs({ items, className, 'aria-label': ariaLabel }: NavTabsProps) {
+export function NavTabs({ items, className, 'aria-label': ariaLabel, renderLink }: NavTabsProps) {
   return (
     <nav
       className={[styles.nav, className].filter(Boolean).join(' ')}
       aria-label={ariaLabel ?? 'Page navigation'}
     >
-      {items.map((item) => (
-        <a
-          key={item.href}
-          href={item.href}
-          className={[styles.link, item.active && styles.active].filter(Boolean).join(' ')}
-          aria-current={item.active ? 'page' : undefined}
-        >
-          {item.label}
-        </a>
-      ))}
+      {items.map((item) => {
+        const linkProps: NavTabLinkProps = {
+          href: item.href,
+          className: [styles.link, item.active && styles.active].filter(Boolean).join(' '),
+          'aria-current': item.active ? 'page' : undefined,
+          children: item.label,
+        };
+        return (
+          <Fragment key={item.href}>
+            {renderLink ? (
+              renderLink(item, linkProps)
+            ) : (
+              <a
+                href={linkProps.href}
+                className={linkProps.className}
+                aria-current={linkProps['aria-current']}
+              >
+                {linkProps.children}
+              </a>
+            )}
+          </Fragment>
+        );
+      })}
     </nav>
   );
 }

package/src/components/NotificationsPanel/NotificationsPanel.module.css

@@ -0,0 +1,258 @@
+.trigger {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sv-radius-md);
+  background: transparent;
+  color: var(--sv-color-text-primary);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .trigger:hover {
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 3px;
+  background: var(--sv-color-error-text);
+  color: white;
+  border-radius: var(--sv-radius-full);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 14px;
+  text-align: center;
+  pointer-events: none;
+}
+
+/* ── Header ─────────────────────────────────────────────────────────────── */
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sv-space-2);
+  padding: var(--sv-space-3) var(--sv-space-3) var(--sv-space-3) var(--sv-space-4);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
+}
+
+.headerTitle {
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  flex: 1;
+}
+
+.headerActions {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+}
+
+.actionBtn {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+  white-space: nowrap;
+}
+
+@media (hover: hover) {
+  .actionBtn:hover {
+    color: var(--sv-color-text-primary);
+  }
+}
+
+.closeBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sv-radius-sm);
+  background: none;
+  color: var(--sv-color-text-muted);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .closeBtn:hover {
+    color: var(--sv-color-text-primary);
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+/* ── List ───────────────────────────────────────────────────────────────── */
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 420px;
+  overflow-y: auto;
+}
+
+/* ── Empty state ────────────────────────────────────────────────────────── */
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sv-space-3);
+  padding: var(--sv-space-10) var(--sv-space-4);
+}
+
+.emptyIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+}
+
+.emptyText {
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+}
+
+/* ── Notification item ─────────────────────────────────────────────────── */
+
+.item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sv-space-3);
+  padding: var(--sv-space-3);
+  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
+}
+
+.item:last-child {
+  border-bottom: none;
+}
+
+.categoryIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--sv-radius-full);
+  margin-top: 1px;
+  background: var(--sv-color-surface-sunken);
+  color: var(--sv-color-text-muted);
+}
+
+.itemBody {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.itemTitle {
+  display: block;
+  width: 100%;
+  border: none;
+  padding: 0;
+  background: none;
+  font: inherit;
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  text-decoration: none;
+  text-align: left;
+  line-height: 1.4;
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  a.itemTitle:hover,
+  button.itemTitle:hover {
+    text-decoration: underline;
+  }
+}
+
+.itemRead .itemTitle {
+  color: var(--sv-color-text-subtle);
+  cursor: default;
+}
+
+.itemTime {
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+}
+
+.itemEnd {
+  display: flex;
+  align-items: center;
+  gap: var(--sv-space-2);
+  flex: none;
+  padding-top: 2px;
+}
+
+.unreadDot {
+  display: block;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--sv-radius-full);
+  background: var(--sv-color-accent);
+  flex: none;
+}
+
+.dismissBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: var(--sv-radius-sm);
+  background: none;
+  color: var(--sv-color-text-muted);
+  cursor: pointer;
+}
+
+@media (hover: hover) {
+  .dismissBtn:hover {
+    color: var(--sv-color-text-primary);
+    background: var(--sv-color-surface-sunken);
+  }
+}
+
+.viewAll {
+  display: block;
+  text-align: center;
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
+  font-size: var(--sv-font-size-caption);
+  color: var(--sv-color-text-muted);
+  text-decoration: none;
+}
+
+@media (hover: hover) {
+  .viewAll:hover {
+    color: var(--sv-color-text-primary);
+    background: var(--sv-color-surface-sunken);
+  }
+}

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

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

@@ -0,0 +1,187 @@
+'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>
+  );
+}