@sovereignfs/ui 0.83.1 → 0.89.1

package/dist/tokens/fonts.css

@@ -0,0 +1,53 @@
+/* Hanken Grotesk, the Sovereign typeface, shipped with the design system so that no instance has to supply it and
+   none has to ask another site for it (a page that loads its font from a third party tells that party who is reading).
+   One variable file for each script, weights 100 to 900, chosen by the browser from the characters on the page.
+   The files and their licence (SIL Open Font License 1.1) are in ../fonts; the family is named as the
+   `--sv-font-family` token names it, so a component never has to know where the font comes from.
+   Fontsource's build of the Google Fonts release, https://fontsource.org/fonts/hanken-grotesk. */
+
+/* hanken-grotesk-cyrillic-ext-wght-normal */
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(../fonts/hanken-grotesk-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+
+/* hanken-grotesk-vietnamese-wght-normal */
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(../fonts/hanken-grotesk-vietnamese-wght-normal.woff2) format('woff2-variations');
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+    U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+
+/* hanken-grotesk-latin-ext-wght-normal */
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(../fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
+}
+
+/* hanken-grotesk-latin-wght-normal */
+@font-face {
+  font-family: 'Hanken Grotesk';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/dist/tokens/primitives.css

@@ -56,9 +56,10 @@
   --sv-space-16: 4rem;
 
   /* Typography
-     Default pair: Hanken Grotesk (body) + JetBrains Mono (code/identifiers).
-     Operators supply the web font via <link> or instance CSS; the fallback
-     stack applies when the font is not loaded. */
+     The Sovereign typeface is Hanken Grotesk, bundled with the design system (fonts.css, loaded by tokens.css),
+     with JetBrains Mono for code and identifiers, which an instance may supply. Every component takes its
+     family from these tokens and nothing else (`pnpm design:tokens:check`), so the typeface is the same
+     wherever the design system is used; the stack after it applies only while the font loads. */
   --sv-font-family:
     'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,
     sans-serif;
@@ -82,12 +83,12 @@
   --sv-font-weight-semibold: 600;
   --sv-font-weight-bold: 700;
 
-  /* In-app text-size control (task 10.2), discharging the pinch-zoom-disabled
-     accessibility debt (runtime/app/layout.tsx sets userScalable: false).
+  /* In-app text-size control, discharging the pinch-zoom-disabled
+     accessibility debt of an app that sets userScalable: false.
      Every --sv-font-size-* above is rem-based, so scaling the root font size
      scales the whole type system with no per-component changes. Driven by
-     [data-text-size] on <html>, set pre-paint by runtime/src/theme-script.ts
-     from the `sv-text-size` cookie — same mechanism as [data-theme]. Like
+     [data-text-size] on <html>, set pre-paint by the app — same mechanism as
+     [data-theme]. Like
      --sv-radius-scale, this is a theme-stable scale token with no separate
      semantic tier. */
   --sv-text-size-scale: 1;
@@ -99,11 +100,10 @@
   --sv-icon-size-lg: 1.5rem; /* 24px — prominent / standalone */
 
   /* Border radii (v3.1 spec values). --sv-radius-scale is the one
-     instance-controllable exception to "scale tokens are theme-stable"
-     (RFC 0077) — an operator's corner-radius preset (None/XS/S/M/L)
-     overrides it at :root via the InstanceProvider style injection
-     (runtime/src/instance-provider.tsx), same pipeline as --sv-color-accent.
-     Every corner token below is proportional to it, so a plugin author never
+     instance-controllable exception to "scale tokens are theme-stable" —
+     an operator's corner-radius preset (None/XS/S/M/L) overrides it at
+     :root, same pipeline as --sv-color-accent.
+     Every corner token below is proportional to it, so an app author never
      references --sv-radius-scale directly — they keep using --sv-radius-sm
      etc. exactly as before. --sv-radius-full is deliberately NOT derived
      from the scale: it's a shape token (circle/pill), not a corner-rounding

package/dist/tokens.css

@@ -1,5 +1,6 @@
-/* Convenience entry that loads both token tiers. The runtime shell imports this
+/* Convenience entry that loads the typeface and both token tiers. The runtime shell imports this
  * once so --sv-* variables are available globally (primitives first, then the
  * semantic layer that maps them). */
+@import './tokens/fonts.css';
 @import './tokens/primitives.css';
 @import './tokens/semantic.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sovereignfs/ui",
-  "version": "0.83.1",
+  "version": "0.89.1",
   "type": "module",
   "description": "Sovereign Design System — design tokens and React components.",
   "keywords": [
@@ -10,10 +10,19 @@
     "components",
     "css-modules",
     "tokens",
-    "plugin",
+    "app",
     "self-hosted"
   ],
-  "license": "AGPL-3.0-or-later",
+  "license": "MPL-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sovereignfs/sovereign.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/sovereignfs/sovereign/tree/main/packages/ui#readme",
+  "bugs": {
+    "url": "https://github.com/sovereignfs/sovereign/issues"
+  },
   "sideEffects": [
     "**/*.css"
   ],
@@ -32,8 +41,9 @@
   },
   "files": [
     "dist",
-    "src",
-    "NOTICE"
+    "LICENSE",
+    "NOTICE",
+    "README.md"
   ],
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -52,20 +62,21 @@
   "devDependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@playwright/test": "^1.62.1",
+    "@playwright/test": "^1.64.0",
+    "@sovereignfs/tsconfig": "0.0.0",
     "@storybook/addon-a11y": "^10.6.0",
     "@storybook/addon-themes": "^10.6.0",
     "@storybook/react-vite": "^10.6.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.3",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "@types/node": "^24.19.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "storybook": "^10.6.0",
-    "tsup": "^8.5.1",
-    "typescript": "^6.0.3",
-    "@sovereignfs/tsconfig": "0.0.0"
+    "tsup": "^9.0.0",
+    "typescript": "~6.0.3"
   },
   "scripts": {
     "build": "tsup",

package/src/__tests__/motion.test.tsx

@@ -1,105 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { act, cleanup, render } from '@testing-library/react';
-import { useMountTransition, usePrefersReducedMotion } from '../motion';
-
-let matches = false;
-function installMatchMedia() {
-  vi.stubGlobal(
-    'matchMedia',
-    vi.fn().mockImplementation((query: string) => ({
-      matches,
-      media: query,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      addListener: vi.fn(),
-      removeListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    })),
-  );
-}
-
-function MountTransitionHarness({ open, durationMs }: { open: boolean; durationMs: number }) {
-  const { mounted, phase } = useMountTransition(open, durationMs);
-  return <span data-testid="out">{mounted ? phase : 'unmounted'}</span>;
-}
-
-describe('useMountTransition', () => {
-  beforeEach(() => vi.useFakeTimers());
-  afterEach(() => {
-    vi.useRealTimers();
-    cleanup();
-  });
-
-  it('animates the entrance even on a fresh mount that starts open (e.g. a route-driven overlay)', () => {
-    const { getByTestId } = render(<MountTransitionHarness open durationMs={250} />);
-    // Renders 'entering' first — the closed-position styles — so the CSS
-    // transition has somewhere to animate from; the effect below flips it to
-    // 'open' one frame later, same as a prop-driven open transition would.
-    expect(getByTestId('out').textContent).toBe('entering');
-    act(() => void vi.advanceTimersByTime(16)); // flush the requestAnimationFrame callback
-    expect(getByTestId('out').textContent).toBe('open');
-  });
-
-  it('starts unmounted when closed from the first render', () => {
-    const { getByTestId } = render(<MountTransitionHarness open={false} durationMs={250} />);
-    expect(getByTestId('out').textContent).toBe('unmounted');
-  });
-
-  it('animates entrance: entering on the same frame, open one frame later', () => {
-    const { getByTestId, rerender } = render(
-      <MountTransitionHarness open={false} durationMs={250} />,
-    );
-    rerender(<MountTransitionHarness open durationMs={250} />);
-    expect(getByTestId('out').textContent).toBe('entering');
-    act(() => {
-      vi.advanceTimersByTime(16); // flush the requestAnimationFrame callback
-    });
-    expect(getByTestId('out').textContent).toBe('open');
-  });
-
-  it('stays mounted through "closing" for durationMs, then unmounts', () => {
-    const { getByTestId, rerender } = render(<MountTransitionHarness open durationMs={250} />);
-    rerender(<MountTransitionHarness open={false} durationMs={250} />);
-    // Still mounted immediately after `open` flips false — this is the whole
-    // point: the exit transition needs to actually play, not jump-cut.
-    expect(getByTestId('out').textContent).toBe('closing');
-    act(() => void vi.advanceTimersByTime(249));
-    expect(getByTestId('out').textContent).toBe('closing');
-    act(() => void vi.advanceTimersByTime(1));
-    expect(getByTestId('out').textContent).toBe('unmounted');
-  });
-
-  it('honours a near-zero durationMs (the reduced-motion path)', () => {
-    const { getByTestId, rerender } = render(<MountTransitionHarness open durationMs={0} />);
-    rerender(<MountTransitionHarness open={false} durationMs={0} />);
-    act(() => void vi.advanceTimersByTime(0));
-    expect(getByTestId('out').textContent).toBe('unmounted');
-  });
-});
-
-function ReducedMotionHarness() {
-  const reduced = usePrefersReducedMotion();
-  return <span data-testid="out">{String(reduced)}</span>;
-}
-
-describe('usePrefersReducedMotion', () => {
-  afterEach(() => {
-    vi.unstubAllGlobals();
-    cleanup();
-  });
-
-  it('defaults to false and reflects a true matchMedia result after mount', () => {
-    matches = true;
-    installMatchMedia();
-    const { getByTestId } = render(<ReducedMotionHarness />);
-    expect(getByTestId('out').textContent).toBe('true');
-  });
-
-  it('reflects a false matchMedia result', () => {
-    matches = false;
-    installMatchMedia();
-    const { getByTestId } = render(<ReducedMotionHarness />);
-    expect(getByTestId('out').textContent).toBe('false');
-  });
-});

package/src/__tests__/package-json.test.ts

@@ -1,8 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import packageJson from '../../package.json';
-
-describe('packages/ui/package.json — sideEffects', () => {
-  it('declares sideEffects as exactly ["**/*.css"]', () => {
-    expect(packageJson.sideEffects).toEqual(['**/*.css']);
-  });
-});

package/src/components/Accordion/Accordion.module.css

@@ -1,3 +0,0 @@
-.root {
-  border-top: var(--sv-border-width-hairline) solid var(--sv-color-border);
-}

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,110 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from 'storybook/test';
-import { Accordion } from './Accordion';
-
-const meta = {
-  title: 'Components/Accordion',
-  component: Accordion,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'One or more Collapsible sections. type="single" closes other sections when one opens; type="multiple" allows any number open at once.',
-      },
-    },
-  },
-  args: { items: [], type: 'single', openIds: [], onOpenIdsChange: () => {} },
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-const FAQ_ITEMS = [
-  {
-    id: 'plugins',
-    trigger: 'What plugins ship by default?',
-    content: 'Only the platform plugins (Console, Launcher, Account) plus Sovereign Tasks.',
-  },
-  {
-    id: 'hosting',
-    trigger: 'Can I self-host this?',
-    content: 'Yes — Sovereign is designed to be self-hosted via Docker Compose.',
-  },
-  {
-    id: 'pricing',
-    trigger: 'Is it free?',
-    content: 'The platform is open source. Individual plugins may have their own pricing.',
-  },
-];
-
-export const Default: Story = {
-  render: () => {
-    const [openIds, setOpenIds] = useState<string[]>(['plugins']);
-    return (
-      <Accordion items={FAQ_ITEMS} type="single" openIds={openIds} onOpenIdsChange={setOpenIds} />
-    );
-  },
-};
-
-export const MultipleOpen: Story = {
-  render: () => {
-    const [openIds, setOpenIds] = useState<string[]>(['plugins', 'hosting']);
-    return (
-      <Accordion items={FAQ_ITEMS} type="multiple" openIds={openIds} onOpenIdsChange={setOpenIds} />
-    );
-  },
-};
-
-export const LongContent: Story = {
-  render: () => {
-    const [openIds, setOpenIds] = useState<string[]>(['changelog']);
-    return (
-      <Accordion
-        items={[
-          {
-            id: 'changelog',
-            trigger: 'Full changelog',
-            content: (
-              <ul style={{ margin: 0, paddingLeft: 20 }}>
-                <li>Added component sizing alignment across the design system</li>
-                <li>Added RadioGroup, Slider, Progress, Table, Alert primitives</li>
-                <li>Added Breadcrumb, Pagination, and Kbd primitives</li>
-                <li>Added Accordion and Collapsible primitives</li>
-              </ul>
-            ),
-          },
-        ]}
-        type="single"
-        openIds={openIds}
-        onOpenIdsChange={setOpenIds}
-      />
-    );
-  },
-};
-
-export const KeyboardInteraction: Story = {
-  render: () => {
-    const [openIds, setOpenIds] = useState<string[]>([]);
-    return (
-      <Accordion items={FAQ_ITEMS} type="single" openIds={openIds} onOpenIdsChange={setOpenIds} />
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const trigger = canvas.getByRole('button', { name: 'What plugins ship by default?' });
-
-    await expect(trigger).toHaveAttribute('aria-expanded', 'false');
-
-    trigger.focus();
-    await userEvent.keyboard('{Enter}');
-    await expect(trigger).toHaveAttribute('aria-expanded', 'true');
-    await expect(canvas.getByText(/Only the platform plugins/)).toBeVisible();
-
-    await userEvent.keyboard(' ');
-    await expect(trigger).toHaveAttribute('aria-expanded', 'false');
-  },
-};

package/src/components/Accordion/Accordion.tsx

@@ -1,53 +0,0 @@
-import type { ReactNode } from 'react';
-import { Collapsible } from '../Collapsible/Collapsible';
-import styles from './Accordion.module.css';
-
-export interface AccordionItem {
-  id: string;
-  trigger: ReactNode;
-  content: ReactNode;
-}
-
-export interface AccordionProps {
-  items: AccordionItem[];
-  /** `single` closes other sections when one opens. `multiple` allows any
-   * number of sections open at once. */
-  type: 'single' | 'multiple';
-  openIds: string[];
-  onOpenIdsChange: (openIds: string[]) => void;
-  className?: string;
-}
-
-/**
- * Accordion — one or more `Collapsible` sections.
- *
- * Keyboard support (Enter/Space toggles the focused trigger) comes from
- * `Collapsible`'s real `<button>` — no arrow-key roving-tabindex handling
- * here, since accordion sections aren't a roving-tabindex widget per the
- * WAI-ARIA accordion pattern (each trigger is independently Tab-focusable).
- */
-export function Accordion({ items, type, openIds, onOpenIdsChange, className }: AccordionProps) {
-  function handleOpenChange(id: string, open: boolean) {
-    if (type === 'single') {
-      onOpenIdsChange(open ? [id] : []);
-      return;
-    }
-    onOpenIdsChange(open ? [...openIds, id] : openIds.filter((openId) => openId !== id));
-  }
-
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')}>
-      {items.map((item) => (
-        <Collapsible
-          key={item.id}
-          id={item.id}
-          trigger={item.trigger}
-          open={openIds.includes(item.id)}
-          onOpenChange={(open) => handleOpenChange(item.id, open)}
-        >
-          {item.content}
-        </Collapsible>
-      ))}
-    </div>
-  );
-}

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

@@ -1,61 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { Accordion } from '../Accordion';
-
-afterEach(cleanup);
-
-const items = [
-  { id: 'a', trigger: 'Section A', content: 'Content A' },
-  { id: 'b', trigger: 'Section B', content: 'Content B' },
-];
-
-describe('Accordion', () => {
-  it('renders a trigger button per item', () => {
-    render(<Accordion items={items} type="single" openIds={[]} onOpenIdsChange={() => {}} />);
-    expect(screen.getByRole('button', { name: 'Section A' })).toBeDefined();
-    expect(screen.getByRole('button', { name: 'Section B' })).toBeDefined();
-  });
-
-  it('type="single": opening one section replaces the open set entirely', () => {
-    const onOpenIdsChange = vi.fn();
-    render(
-      <Accordion items={items} type="single" openIds={['a']} onOpenIdsChange={onOpenIdsChange} />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Section B' }));
-    expect(onOpenIdsChange).toHaveBeenCalledWith(['b']);
-  });
-
-  it('type="multiple": opening a section adds to the open set', () => {
-    const onOpenIdsChange = vi.fn();
-    render(
-      <Accordion items={items} type="multiple" openIds={['a']} onOpenIdsChange={onOpenIdsChange} />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Section B' }));
-    expect(onOpenIdsChange).toHaveBeenCalledWith(['a', 'b']);
-  });
-
-  it('type="multiple": closing an open section removes only that id', () => {
-    const onOpenIdsChange = vi.fn();
-    render(
-      <Accordion
-        items={items}
-        type="multiple"
-        openIds={['a', 'b']}
-        onOpenIdsChange={onOpenIdsChange}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: 'Section A' }));
-    expect(onOpenIdsChange).toHaveBeenCalledWith(['b']);
-  });
-
-  it('reflects openIds via aria-expanded on each trigger', () => {
-    render(<Accordion items={items} type="single" openIds={['a']} onOpenIdsChange={() => {}} />);
-    expect(screen.getByRole('button', { name: 'Section A' }).getAttribute('aria-expanded')).toBe(
-      'true',
-    );
-    expect(screen.getByRole('button', { name: 'Section B' }).getAttribute('aria-expanded')).toBe(
-      'false',
-    );
-  });
-});

package/src/components/Alert/Alert.module.css

@@ -1,62 +0,0 @@
-.alert {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sv-space-2);
-  padding: var(--sv-space-3) var(--sv-space-4);
-  border: var(--sv-border-width-hairline) solid transparent;
-  border-radius: var(--sv-radius-md);
-  font-size: var(--sv-font-size-sm);
-}
-
-.icon {
-  flex-shrink: 0;
-  /* Optically align to the first line of text rather than the box's
-     vertical center — matches how the heading/body cap-height sits. */
-  margin-top: 2px;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-1);
-  min-width: 0;
-}
-
-.heading {
-  margin: 0;
-  font-weight: var(--sv-font-weight-semibold);
-}
-
-.body {
-  margin: 0;
-}
-
-.info {
-  background: var(--sv-color-info-surface);
-  border-color: var(--sv-color-info-border);
-  color: var(--sv-color-info-text);
-}
-
-.success {
-  background: var(--sv-color-success-surface);
-  border-color: var(--sv-color-success-border);
-  color: var(--sv-color-success-text);
-}
-
-.warning {
-  background: var(--sv-color-warning-surface);
-  border-color: var(--sv-color-warning-border);
-  color: var(--sv-color-warning-text);
-}
-
-.error {
-  background: var(--sv-color-error-surface);
-  border-color: var(--sv-color-error-border);
-  color: var(--sv-color-error-text);
-}
-
-.neutral {
-  background: var(--sv-color-surface-sunken);
-  border-color: var(--sv-color-border);
-  color: var(--sv-color-text-primary);
-}