@sovereignfs/ui 0.45.0 → 0.54.0

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

@@ -110,6 +110,28 @@ describe('Drawer', () => {
     expect(screen.getByRole('dialog').className).not.toMatch(/panelHalf/);
   });
 
+  it('does not render OverlayHeader when title is omitted (hidden by default)', () => {
+    render(
+      <Drawer open onClose={() => {}} aria-label="Nav">
+        <button type="button">Own action</button>
+      </Drawer>,
+    );
+    // Only the content's own button — no OverlayHeader close button.
+    expect(screen.getAllByRole('button')).toHaveLength(1);
+  });
+
+  it('renders OverlayHeader (title + close) when title is provided', () => {
+    const onClose = vi.fn();
+    render(
+      <Drawer open onClose={onClose} aria-label="Nav" title="Apps">
+        Body
+      </Drawer>,
+    );
+    expect(screen.getByText('Apps')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
   describe('swipe-down-to-dismiss (grab handle)', () => {
     // The handle is the panel's first child, aria-hidden and unlabeled —
     // same "select via DOM position" approach the scrim-click test above

package/src/components/Icon/icons/index.ts

@@ -3,10 +3,12 @@ import type { ReactElement, SVGProps } from 'react';
 import { HouseIcon } from './house';
 import { SettingsIcon } from './settings';
 import { LogOutIcon } from './log-out';
+import { SmartphoneIcon } from './smartphone';
 import { ChevronRightIcon } from './chevron-right';
 import { ChevronLeftIcon } from './chevron-left';
 import { ChevronDownIcon } from './chevron-down';
 import { ChevronUpIcon } from './chevron-up';
+import { MenuIcon } from './menu';
 import { XIcon } from './x';
 import { CheckIcon } from './check';
 import { PlusIcon } from './plus';
@@ -59,10 +61,12 @@ export type IconName =
   | 'house'
   | 'settings'
   | 'log-out'
+  | 'smartphone'
   | 'chevron-right'
   | 'chevron-left'
   | 'chevron-down'
   | 'chevron-up'
+  | 'menu'
   | 'x'
   | 'check'
   | 'plus'
@@ -117,10 +121,12 @@ export const ICONS: Record<IconName, IconComponent> = {
   house: HouseIcon,
   settings: SettingsIcon,
   'log-out': LogOutIcon,
+  smartphone: SmartphoneIcon,
   'chevron-right': ChevronRightIcon,
   'chevron-left': ChevronLeftIcon,
   'chevron-down': ChevronDownIcon,
   'chevron-up': ChevronUpIcon,
+  menu: MenuIcon,
   x: XIcon,
   check: CheckIcon,
   plus: PlusIcon,
@@ -173,10 +179,12 @@ export const ICONS: Record<IconName, IconComponent> = {
 export { HouseIcon } from './house';
 export { SettingsIcon } from './settings';
 export { LogOutIcon } from './log-out';
+export { SmartphoneIcon } from './smartphone';
 export { ChevronRightIcon } from './chevron-right';
 export { ChevronLeftIcon } from './chevron-left';
 export { ChevronDownIcon } from './chevron-down';
 export { ChevronUpIcon } from './chevron-up';
+export { MenuIcon } from './menu';
 export { XIcon } from './x';
 export { CheckIcon } from './check';
 export { PlusIcon } from './plus';

package/src/components/Icon/icons/menu.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function MenuIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path d="M4 5h16" />
+      <path d="M4 12h16" />
+      <path d="M4 19h16" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/smartphone.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function SmartphoneIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
+      <path d="M12 18h.01" />
+    </svg>
+  );
+}

package/src/components/LegalLinks/LegalLinks.module.css

@@ -0,0 +1,24 @@
+.root {
+  margin: var(--sv-space-5) 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sv-space-2);
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-text-muted);
+}
+
+.link {
+  color: var(--sv-color-text-muted);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-color: var(--sv-color-border);
+}
+
+.link:hover {
+  color: var(--sv-color-text-primary);
+}
+
+.dot {
+  color: var(--sv-color-border);
+}

package/src/components/LegalLinks/LegalLinks.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { LegalLinks } from './LegalLinks';
+
+const meta = {
+  title: 'Components/LegalLinks',
+  component: LegalLinks,
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof LegalLinks>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {};
+
+export const CustomHrefs: Story = {
+  args: {
+    privacyHref: 'https://example.com/legal/privacy',
+    tosHref: 'https://example.com/legal/tos',
+  },
+};

package/src/components/LegalLinks/LegalLinks.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import styles from './LegalLinks.module.css';
+
+export interface LegalLinksProps {
+  privacyHref?: string;
+  tosHref?: string;
+  /** Renders a linked item. Defaults to a plain `<a href>`, which causes a
+   * full page reload — pass Next's `<Link>` (or equivalent) to keep
+   * navigation client-side. Not needed for a full-reload navigation away
+   * from a standalone auth page, but matters if this is ever mounted inside
+   * an SPA-like shell. */
+  renderLink?: (href: string, label: string) => ReactNode;
+  className?: string;
+}
+
+export function LegalLinks({
+  privacyHref = '/privacy',
+  tosHref = '/tos',
+  renderLink,
+  className,
+}: LegalLinksProps) {
+  const link = (href: string, label: string) =>
+    renderLink ? (
+      renderLink(href, label)
+    ) : (
+      <a href={href} className={styles.link}>
+        {label}
+      </a>
+    );
+
+  return (
+    <p className={[styles.root, className].filter(Boolean).join(' ')}>
+      {link(privacyHref, 'Privacy Policy')}
+      <span aria-hidden="true" className={styles.dot}>
+        ·
+      </span>
+      {link(tosHref, 'Terms of Service')}
+    </p>
+  );
+}

package/src/components/Markdown/Markdown.module.css

@@ -0,0 +1,49 @@
+/* Spacing lives on this wrapper div, not on the Typography-rendered tag
+   inside it — Typography's own variants reset margin: 0, which would tie
+   for CSS specificity against a bare `.root > * + *` sibling rule and make
+   the outcome depend on module load order. A dedicated class avoids that. */
+.block {
+  margin-top: var(--sv-space-4);
+}
+
+.block:first-child {
+  margin-top: 0;
+}
+
+.block[data-heading] {
+  margin-top: var(--sv-space-8);
+}
+
+.block[data-heading]:first-child {
+  margin-top: 0;
+}
+
+.blockquote {
+  margin: 0;
+  padding: var(--sv-space-4);
+  border-left: 3px solid var(--sv-color-border);
+  background: var(--sv-color-surface-sunken);
+  border-radius: var(--sv-radius-sm);
+}
+
+.list {
+  margin: 0;
+  padding-left: var(--sv-space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-2);
+}
+
+.root a {
+  color: var(--sv-color-text-primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.root code {
+  font-family: var(--sv-font-family-mono);
+  font-size: 0.9em;
+  background: var(--sv-color-surface-sunken);
+  padding: 0.1em 0.35em;
+  border-radius: var(--sv-radius-sm);
+}

package/src/components/Markdown/Markdown.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Markdown } from './Markdown';
+
+const sample = `# Privacy Policy
+
+This document describes the built-in, default behavior of **Sovereign**.
+
+> Replaced content from an operator overrides this default.
+
+## What we collect
+
+- **Email address** and password.
+- *Time zone*, detected automatically at signup.
+
+See the [project source](https://github.com/sovereignfs/sovereign) for details.
+`;
+
+const meta = {
+  title: 'Components/Markdown',
+  component: Markdown,
+  parameters: { layout: 'padded' },
+  args: { content: sample },
+} satisfies Meta<typeof Markdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {};

package/src/components/Markdown/Markdown.tsx

@@ -0,0 +1,168 @@
+import type { ReactNode } from 'react';
+import { Typography } from '../Typography/Typography';
+import styles from './Markdown.module.css';
+
+export interface MarkdownProps {
+  /** Raw markdown source. Supports the subset used by Sovereign's own
+   * long-form content pages: headings (#/##/###), paragraphs, **bold**,
+   * *italic*, `code`, [links](url), unordered lists (-), and blockquotes
+   * (>), including soft-wrapped continuation lines within a paragraph or
+   * list item. Not a general-purpose CommonMark parser — no tables,
+   * images, ordered lists, or nested blocks. */
+  content: string;
+  className?: string;
+}
+
+let inlineKey = 0;
+
+/** Parses **bold**, *italic*, `code`, and [text](url) within a line of text. */
+function parseInline(text: string): ReactNode[] {
+  const nodes: ReactNode[] = [];
+  const pattern = /\[([^\]]+)\]\(([^)]+)\)|\*\*([^*]+)\*\*|\*([^*]+)\*|`([^`]+)`/;
+  let remaining = text;
+
+  while (remaining.length > 0) {
+    const match = pattern.exec(remaining);
+    if (!match) {
+      nodes.push(remaining);
+      break;
+    }
+    if (match.index > 0) nodes.push(remaining.slice(0, match.index));
+
+    const [full, linkText, linkHref, boldText, italicText, codeText] = match;
+    const key = `md-inline-${inlineKey++}`;
+    if (linkHref !== undefined) {
+      nodes.push(
+        <a key={key} href={linkHref}>
+          {linkText}
+        </a>,
+      );
+    } else if (boldText !== undefined) {
+      nodes.push(<strong key={key}>{boldText}</strong>);
+    } else if (italicText !== undefined) {
+      nodes.push(<em key={key}>{italicText}</em>);
+    } else if (codeText !== undefined) {
+      nodes.push(<code key={key}>{codeText}</code>);
+    }
+    remaining = remaining.slice(match.index + full.length);
+  }
+
+  return nodes;
+}
+
+const isQuote = (l: string) => l.startsWith('> ') || l === '>';
+const isListItem = (l: string) => l.startsWith('- ');
+const isHeading = (l: string) => /^#{1,3}\s+/.test(l);
+/** A line that ends the current *paragraph* run — a blank line, or the
+ * start of a heading, quote, or list block. Anything else (including an
+ * indented continuation line) is folded into the paragraph, matching how
+ * the source markdown soft-wraps prose across lines. */
+const endsParagraph = (l: string) => l.trim() === '' || isHeading(l) || isQuote(l) || isListItem(l);
+/** A line that ends the current *list* run — a blank line, or the start of
+ * a heading or quote. Deliberately does NOT include `isListItem`: a list
+ * item's own opening line legitimately satisfies `isListItem`, so reusing
+ * `endsParagraph` here (which does) would treat the first line of every
+ * list as ending the list before it started — the list-collection loop
+ * would then never advance, looping forever. */
+const endsList = (l: string) => l.trim() === '' || isHeading(l) || isQuote(l);
+
+function parseBlocks(content: string): ReactNode[] {
+  const lines = content.replace(/\r\n/g, '\n').split('\n');
+  const blocks: ReactNode[] = [];
+  let i = 0;
+  let blockKey = 0;
+
+  while (i < lines.length) {
+    const line = lines[i] ?? '';
+
+    if (line.trim() === '') {
+      i++;
+      continue;
+    }
+
+    const heading = /^(#{1,3})\s+(.*)$/.exec(line);
+    if (heading) {
+      const level = (heading[1]?.length ?? 1) as 1 | 2 | 3;
+      blocks.push(
+        <div key={blockKey++} className={styles.block} data-heading>
+          <Typography variant={`h${level}` as 'h1' | 'h2' | 'h3'}>
+            {parseInline(heading[2] ?? '')}
+          </Typography>
+        </div>,
+      );
+      i++;
+      continue;
+    }
+
+    if (isQuote(line)) {
+      const quoteLines: string[] = [];
+      while (i < lines.length && isQuote(lines[i] ?? '')) {
+        quoteLines.push((lines[i] ?? '').slice(2));
+        i++;
+      }
+      blocks.push(
+        <div key={blockKey++} className={styles.block}>
+          <blockquote className={styles.blockquote}>
+            <Typography variant="body" as="p">
+              {parseInline(quoteLines.join(' '))}
+            </Typography>
+          </blockquote>
+        </div>,
+      );
+      continue;
+    }
+
+    if (isListItem(line)) {
+      const items: string[] = [];
+      while (i < lines.length && !endsList(lines[i] ?? '')) {
+        const current = lines[i] ?? '';
+        if (isListItem(current)) {
+          items.push(current.slice(2));
+        } else {
+          // Continuation of the previous item's wrapped text.
+          const lastIndex = items.length - 1;
+          items[lastIndex] = `${items[lastIndex] ?? ''} ${current.trim()}`;
+        }
+        i++;
+      }
+      blocks.push(
+        <div key={blockKey++} className={styles.block}>
+          <ul className={styles.list}>
+            {items.map((item, idx) => (
+              <Typography key={idx} variant="body" as="li">
+                {parseInline(item)}
+              </Typography>
+            ))}
+          </ul>
+        </div>,
+      );
+      continue;
+    }
+
+    const paraLines: string[] = [];
+    while (i < lines.length && !endsParagraph(lines[i] ?? '')) {
+      paraLines.push((lines[i] ?? '').trim());
+      i++;
+    }
+    blocks.push(
+      <div key={blockKey++} className={styles.block}>
+        <Typography variant="body" as="p">
+          {parseInline(paraLines.join(' '))}
+        </Typography>
+      </div>,
+    );
+  }
+
+  return blocks;
+}
+
+/** Renders a constrained markdown subset (see MarkdownProps) as styled React
+ * elements built from Typography — no HTML string injection. Meant for
+ * long-form, first-party content pages (privacy policy, terms of service)
+ * sourced from a single markdown file, not for rendering arbitrary or
+ * user-supplied markdown. */
+export function Markdown({ content, className }: MarkdownProps) {
+  return (
+    <div className={[styles.root, className].filter(Boolean).join(' ')}>{parseBlocks(content)}</div>
+  );
+}

package/src/components/MobileAppsDrawer/MobileAppsDrawer.module.css

@@ -0,0 +1,81 @@
+/* Matches the runtime shell's own Apps drawer grid exactly
+   (runtime/app/(platform)/_components/MobileNav.module.css's .drawerGrid/
+   .drawerGridItem/.drawerGridIcon/.drawerGridName) — this component is
+   meant to replace that hand-rolled markup for any consumer building its
+   own Apps-style launcher. No header row — see the component's own doc
+   comment for why. */
+
+.grid {
+  list-style: none;
+  margin: 0;
+  /* Drawer's own grab handle already reserves a 44px touch target above this
+     — no extra top padding needed beyond a touch of breathing room. Bottom
+     gets noticeably more: with no header row to separate the grid from the
+     handle, a tight top/bottom balance read as top-heavy (grid crowding the
+     handle isn't the issue; the *last* row crowding the panel's bottom
+     edge/safe-area is). Drawer's own panel already adds
+     env(safe-area-inset-bottom) below everything, so this is on top of that,
+     not instead of it. */
+  padding: var(--sv-space-1) var(--sv-space-4) var(--sv-space-10);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  row-gap: var(--sv-space-5);
+}
+
+.gridItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sv-space-2);
+  padding: var(--sv-space-1);
+  border: none;
+  background: none;
+  text-decoration: none;
+  color: var(--sv-color-text-primary);
+  font: inherit;
+  cursor: pointer;
+  width: 100%;
+}
+
+@media (hover: hover) {
+  .gridItem:hover .gridIcon {
+    background: var(--sv-color-border);
+  }
+}
+
+.gridItem:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--sv-radius-md);
+}
+
+/* color: text-primary, not text-muted — the reference's own drawerGridIcon
+   uses text-muted only as its monogram-fallback text color for <img>-less
+   plugin icons (raster <img> icons don't inherit CSS color at all, so that
+   value never actually painted a real icon). Every tile here renders a real
+   stroke icon via the Icon component (currentColor), which does inherit —
+   matching the reference's own explicit override for that exact case
+   (.drawerGridIconSettings, used by its Console tile) rather than the
+   fallback default. */
+.gridIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 14px;
+  background: var(--sv-color-surface-sunken);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+  transition: background 0.1s;
+}
+
+.gridName {
+  font-size: var(--sv-font-size-sm);
+  text-align: center;
+  color: var(--sv-color-text-primary);
+  line-height: 1.3;
+  word-break: break-word;
+  max-width: 80px;
+}

package/src/components/MobileAppsDrawer/MobileAppsDrawer.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react';
+import { Drawer } from '../Drawer/Drawer';
+import styles from './MobileAppsDrawer.module.css';
+
+export interface MobileAppsDrawerItem {
+  /** Stable identity for this tile — used as the React key. */
+  key: string;
+  icon: ReactNode;
+  label: string;
+  /** Renders an `<a>` when set; otherwise a `<button>` calling `onClick`. */
+  href?: string;
+  onClick?: () => void;
+}
+
+export interface MobileAppsDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  /** Accessible name for the drawer panel — required since there's no
+   *  visible title to fall back to (Drawer's grab handle plus swipe-down /
+   *  scrim-tap already cover dismissal, so no header row is rendered). */
+  'aria-label': string;
+  /** The grid tiles — supplied by the consumer (e.g. installed plugins,
+   *  a plugin's own sections). MobileAppsDrawer owns only the drawer
+   *  chrome/grid layout, never the item list itself. */
+  items: MobileAppsDrawerItem[];
+}
+
+function DrawerGridTile({ icon, label, href, onClick }: Omit<MobileAppsDrawerItem, 'key'>) {
+  const content = (
+    <>
+      <span className={styles.gridIcon} aria-hidden="true">
+        {icon}
+      </span>
+      <span className={styles.gridName}>{label}</span>
+    </>
+  );
+  if (href) {
+    return (
+      <a href={href} className={styles.gridItem} onClick={onClick}>
+        {content}
+      </a>
+    );
+  }
+  return (
+    <button type="button" className={styles.gridItem} onClick={onClick}>
+      {content}
+    </button>
+  );
+}
+
+/**
+ * The mobile "Apps" drawer: a bottom sheet with a 3-column grid of icon
+ * tiles — same tile size (56px, radius 14px) and grid layout as the runtime
+ * shell's own Apps drawer (MobileNav's Drawer content), generalized so the
+ * tile list comes from the consumer (the shell passes installed plugins; a
+ * plugin composing its own MobileFooter launcher passes whatever its own
+ * "apps" are, e.g. a section index) rather than being hardcoded to plugins
+ * specifically. No header row (title/close button) — Drawer's own grab
+ * handle plus swipe-down/scrim-tap dismissal are enough, and a header ate
+ * into the limited vertical space a launcher grid needs most.
+ */
+export function MobileAppsDrawer({ open, onClose, items, ...rest }: MobileAppsDrawerProps) {
+  const ariaLabel = rest['aria-label'];
+
+  return (
+    <Drawer open={open} onClose={onClose} aria-label={ariaLabel}>
+      <nav aria-label={ariaLabel}>
+        <ul className={styles.grid}>
+          {items.map(({ key, ...item }) => (
+            <li key={key}>
+              <DrawerGridTile key={key} {...item} />
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </Drawer>
+  );
+}