@sovereignfs/ui 0.54.0 → 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,14 +56,16 @@
   --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;
   --sv-font-family-mono:
     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  --sv-font-size-2xs: 0.625rem; /* 10px — smallest badge size (Badge size="xs") */
   --sv-font-size-label: 0.6875rem; /* 11px — all-caps section labels */
   --sv-font-size-xs: 0.75rem; /* 12px — mono identifiers */
   --sv-font-size-caption: 0.8125rem; /* 13px — secondary / supporting copy */
@@ -72,17 +74,21 @@
   --sv-font-size-lg: 1.125rem; /* 18px */
   --sv-font-size-xl: 1.25rem; /* 20px */
   --sv-font-size-2xl: 1.5rem; /* 24px */
+  --sv-font-size-3xl: 2rem; /* 32px — document title style (RichTextEditor "Title" paragraph style). A
+     modest step above 2xl reads too close to Heading 1 at a glance (both
+     bold, only 4px apart) — this keeps roughly the same ~1.3x jump Google
+     Docs itself uses between its own Title and Heading 1 sizes. */
   --sv-font-weight-regular: 400;
   --sv-font-weight-medium: 500;
   --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;
@@ -94,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
@@ -116,6 +121,12 @@
   ); /* 20px @ scale 1 — bottom sheet (Drawer top corners) */
   --sv-radius-full: 9999px; /* pill / avatar — unaffected by --sv-radius-scale */
 
+  /* Border width (RFC 0094). Theme-stable like the other scale tokens above —
+     a theme preset can override it (e.g. neobrutalism's thicker outline), but
+     it has no separate semantic tier. Every component references this by
+     name instead of a literal `1px`, the way --sv-radius-* etc. do. */
+  --sv-border-width-hairline: 1px;
+
   /* Touch targets — minimum hit-area dimension for interactive controls.
      44px follows the WCAG 2.5.5 / Apple HIG / Material guideline for reliable
      touch without a pointing device. Applied to icon-only controls on mobile

package/dist/tokens/semantic.css

@@ -19,6 +19,17 @@
   --sv-color-text-muted: var(--sv-grey-500);
   --sv-color-text-subtle: var(--sv-grey-400);
   --sv-color-text-on-accent: var(--sv-white);
+  /* Guaranteed-contrast text pair for content painted directly on a
+     plugin-supplied literal background colour (data, not a design-system
+     token — e.g. a kanban board's own canvas colour). A consumer picks
+     whichever member actually contrasts with its own literal background;
+     neither can be theme-reactive the way --sv-color-text-primary is,
+     since the background itself doesn't react to the app's theme either.
+     Intentionally NOT overridden under [data-theme='dark'] below — same
+     "reads the same regardless of overall page theme" reasoning as
+     --sv-color-text-on-error/-success. */
+  --sv-color-text-on-light-fill: var(--sv-grey-950);
+  --sv-color-text-on-dark-fill: var(--sv-grey-50);
 
   --sv-color-border: var(--sv-grey-200);
   --sv-color-border-strong: var(--sv-grey-300);
@@ -68,6 +79,14 @@
      elevation shadow. Composed rgba layers, like --sv-shadow-card. */
   --sv-color-scrim: rgba(0, 0, 0, 0.5);
 
+  /* High-contrast shadow colour (RFC 0094). Distinct from --sv-color-border-strong
+     even though they resolve to the same monochrome scale — a theme preset's
+     hard offset shadows (e.g. neobrutalism) need a bolder, more saturated value
+     than a border does to read as "authentic," so this is its own token rather
+     than reusing border-strong. Unused by the default theme's soft rgba()
+     shadows above; only a preset that opts in (theme-presets.ts) references it. */
+  --sv-color-shadow-strong: var(--sv-grey-950);
+
   --sv-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
   --sv-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08); /* e1 — card hover lift */
   --sv-shadow-popover:
@@ -75,6 +94,17 @@
   --sv-shadow-overlay: 0 10px 38px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.12);
   --sv-shadow-control: 0 1px 3px rgba(0, 0, 0, 0.2); /* small interactive-control shadows, e.g. Toggle thumb */
 
+  /* Button press-interaction tokens (RFC 0094). Consumed unconditionally by
+     Button.module.css's :active rule — these defaults (none/0/0) make that
+     rule a no-op for today's default look. A theme preset (e.g.
+     neobrutalism) sets non-zero values to get a tactile "press into shadow"
+     effect. Not overridden under [data-theme='dark'] below — like the
+     shadow tokens above, a theme preset's own light/dark variants set these
+     directly rather than this file deriving a dark-mode default for them. */
+  --sv-button-shadow: none;
+  --sv-button-press-x: 0;
+  --sv-button-press-y: 0;
+
   /*
    * Instance identity tokens (RFC 0027 / RFC 0032 rename). Distinct namespace from --sv-color-*:
    * these hold URLs (not colours) and are set once by the operator, not swapped
@@ -122,6 +152,8 @@
 
   --sv-color-scrim: rgba(0, 0, 0, 0.65);
 
+  --sv-color-shadow-strong: var(--sv-grey-50);
+
   --sv-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
   --sv-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.3);
   --sv-shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);

package/dist/tokens/theme-presets.css

@@ -0,0 +1,33 @@
+/*
+ * Generated by scripts/generate-theme-presets-css.ts — do not edit.
+ * Source of truth: packages/ui/src/tokens/theme-presets.ts
+ *
+ * For Storybook / standalone (non-runtime) use only — set data-theme-preset
+ * on the document root element (<html>), never a nested wrapper. See the
+ * generator script's doc comment for why.
+ */
+[data-theme-preset='neobrutalism'] {
+  --sv-radius-scale: 0;
+  --sv-border-width-hairline: 2px;
+  --sv-shadow-card: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-hover: 6px 6px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-popover: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-overlay: 8px 8px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-control: 2px 2px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-shadow: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-press-x: 4px;
+  --sv-button-press-y: 4px;
+}
+
+[data-theme-preset='neobrutalism'][data-theme='dark'] {
+  --sv-radius-scale: 0;
+  --sv-border-width-hairline: 2px;
+  --sv-shadow-card: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-hover: 6px 6px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-popover: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-overlay: 8px 8px 0 0 var(--sv-color-shadow-strong);
+  --sv-shadow-control: 2px 2px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-shadow: 4px 4px 0 0 var(--sv-color-shadow-strong);
+  --sv-button-press-x: 4px;
+  --sv-button-press-y: 4px;
+}

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.54.0",
+  "version": "0.89.1",
   "type": "module",
   "description": "Sovereign Design System — design tokens and React components.",
   "keywords": [
@@ -10,10 +10,22 @@
     "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"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -24,32 +36,47 @@
     },
     "./tokens.css": "./dist/tokens.css",
     "./tokens/primitives.css": "./dist/tokens/primitives.css",
-    "./tokens/semantic.css": "./dist/tokens/semantic.css"
+    "./tokens/semantic.css": "./dist/tokens/semantic.css",
+    "./tokens/theme-presets.css": "./dist/tokens/theme-presets.css"
   },
   "files": [
     "dist",
-    "src",
-    "NOTICE"
+    "LICENSE",
+    "NOTICE",
+    "README.md"
   ],
   "peerDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    }
+  },
   "devDependencies": {
-    "@playwright/test": "^1.62.1",
-    "@storybook/addon-a11y": "^10.5.5",
-    "@storybook/addon-themes": "^10.5.5",
-    "@storybook/react-vite": "^10.5.5",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@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.2",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "storybook": "^10.5.5",
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3",
-    "@sovereignfs/tsconfig": "0.0.0"
+    "@testing-library/react": "^16.3.3",
+    "@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": "^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/components/Accordion/Accordion.module.css

@@ -1,3 +0,0 @@
-.root {
-  border-top: 1px 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',
-    );
-  });
-});