aeon-ui-engine 1.0.0 → 1.0.2

package/.changeset/config.json

@@ -3,6 +3,7 @@
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [
+    ["aeon-ui-engine"],
     [
       "@aeon-ui/core",
       "@aeon-ui/primitives",
@@ -26,5 +27,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@aeon-ui/demo", "aeon-ui-monorepo"]
+  "ignore": ["@aeon-ui/demo"]
 }

package/CHANGELOG.md

@@ -0,0 +1,38 @@
+# Changelog
+
+All notable changes to **aeon-ui-engine** are documented here.
+
+Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.0.2] - 2026-06-02
+
+### Added
+
+- Shared Panda tokens `controlMinHXs`, `controlMinHSm`, `controlMinHMd`, and `controlMinHLg` so compact control heights stay aligned across components.
+
+### Changed
+
+- Button, select trigger, and combobox input recipes reference the shared control-height tokens instead of hardcoded `rem` values.
+- Demo header toolbar uses `size="sm"` for buttons alongside the select (same compact tier) without page-level height overrides.
+
+## [1.0.1] - 2026-06-02
+
+### Changed
+
+- Open Graph preview image shows `npm install aeon-ui-engine` and is served at `/og-aeon-ui-engine.png` for cache-friendly social sharing.
+- Demo site copy standardized on the `aeon-ui-engine` npm package name.
+
+### Fixed
+
+- Mobile header theme preset select shows a visible **Theme** label instead of chevron-only.
+
+## [1.0.0] - 2026-06-02
+
+### Added
+
+- Initial npm release of **aeon-ui-engine** — monorepo bundle with headless statechart primitives, React bindings, Panda styled layer, and themes.
+
+[1.0.2]: https://github.com/GenericCPU/aeon-ui/compare/v1.0.1...v1.0.2
+[1.0.1]: https://github.com/GenericCPU/aeon-ui/compare/v1.0.0...v1.0.1
+[1.0.0]: https://github.com/GenericCPU/aeon-ui/releases/tag/v1.0.0

package/COMPONENTS.md

@@ -19,13 +19,18 @@ Status key: **Headless** (`@aeon-ui/react`) · **Styled** (`@aeon-ui/ui`) · **S
 | Scroll | ✓ | ✓ | **`getScrollSnapshot`** | overflow axis + edge position |
 | Menu | ✓ | ✓ | `popoverMachine` | open / closed |
 | Popover | ✓ | ✓ | `popoverMachine` | open / closed |
-| Tooltip | ✓ | ✓ | **React state** | open / closed |
+| Tooltip | ✓ | ✓ | **React state** | open / closed; tap-to-toggle on touch |
 | Toast | ✓ | ✓ | `toastMachine` | hidden / visible |
 | Avatar | ✓ | — | **React state** | idle / loading / loaded / error |
+| Separator | ✓ | ✓ | **static** | horizontal / vertical orientation |
+| Progress | ✓ | ✓ | **props** | idle / loading / complete |
+| RadioGroup | ✓ | ✓ | `tabsMachine` | one selected item |
+| Slider | ✓ | ✓ | `sliderMachine` | idle / dragging + value |
+| PinInput | ✓ | ✓ | **React state** | idle / complete |
 
 ## Planned (not shipped)
 
-Slider, Number Input, Date Picker, Tree View, Pin Input, File Upload, Carousel — tracked as the catalog grows; prefer explicit machines per component.
+Number Input, Date Picker, Tree View, File Upload, Carousel, Toggle Group — tracked as the catalog grows; prefer explicit machines per component.
 
 ## Choosing a layer
 

package/INTEGRATION.md

@@ -71,6 +71,20 @@ import { Menu, Button } from '@aeon-ui/ui'
 </button>
 ```
 
+## Styling stacks (Chakra, Park UI, Tark UI, Shark UI)
+
+Aeon is **headless** like Ark UI — it does not ship adapters for Chakra v3, Park UI, Tark UI, or Shark UI, and that is intentional:
+
+| Stack | Built on | Relationship to Aeon |
+|-------|----------|----------------------|
+| **Chakra UI v3** | Ark UI + Zag | Different primitive layer. Migrating **from** Ark **to** Aeon → [docs/MIGRATION_FROM_ARK.md](./docs/MIGRATION_FROM_ARK.md). |
+| **Park UI** | Panda CSS + Ark | Aeon already pairs **Panda slot recipes + headless** in one repo (`@aeon-ui/ui`). Use Aeon styled or copy recipe patterns. |
+| **Tark UI / Shark UI** | Ark + Tailwind | Style Aeon headless with Tailwind the same way — target `data-aeon-scope` / `data-aeon-part` / `data-aeon-state` (see Tailwind example above). |
+
+**What works today:** `@aeon-ui/react` with any CSS system; `@aeon-ui/ui` for Panda-native defaults; thin wrappers in your repo (same pattern as Shark UI’s shadcn-style files).
+
+**What we do not maintain:** drop-in replacement exports for Ark or Chakra recipe APIs — different anatomy prefix, machines, and compound part names.
+
 ## XState in your app
 
 Primitives use XState; your features can too. `useAeonMachine` is exported from `@aeon-ui/react` for shared machines.

package/PUBLISHING.md

@@ -1,5 +1,25 @@
 # Publishing to npm
 
+## aeon-ui-engine (primary npm package)
+
+The public install target is **`aeon-ui-engine`**, published from the **repo root**. Its semver is independent of internal `@aeon-ui/*` workspace versions (still `0.1.0` until those are released separately).
+
+### Release checklist (patch / minor / major)
+
+1. Update root **[CHANGELOG.md](./CHANGELOG.md)** under `## [X.Y.Z]` using [Keep a Changelog](https://keepachangelog.com/) sections: `Added`, `Changed`, `Fixed`, `Removed`, `Deprecated`, `Security`.
+2. Bump **`version`** in root **[package.json](./package.json)** (`1.0.1` → `1.0.2` = **patch** for fixes; **minor** for features; **major** for breaking changes).
+3. `pnpm build && pnpm typecheck`
+4. Commit: `Release aeon-ui-engine vX.Y.Z`
+5. Tag: `git tag vX.Y.Z`
+6. Publish: `npm publish --access public` (from repo root; requires `npm login`)
+7. Push: `git push && git push --tags`
+
+Optional: add a Changeset with `"aeon-ui-engine": patch|minor|major` before step 2 if you use `pnpm version-packages` for the root package only (see `.changeset/config.json`).
+
+---
+
+## @aeon-ui/* scoped packages (future)
+
 Packages are versioned together at **0.1.0** (pre-release) using [Changesets](https://github.com/changesets/changesets).
 
 ## Packages

package/README.md

@@ -21,15 +21,19 @@ Aeon UI models interactive behavior as executable [statecharts](https://www.thes
 | `@aeon-ui/solid` | Solid headless adapter (v0.1: Switch + `useAeonMachine`) |
 | `@aeon-ui/svelte` | Svelte headless adapter (v0.1: Switch + `useAeonMachine`) |
 
-**Catalog (React):** Button, Switch, Checkbox, Dialog, Tabs, Accordion, Select, **Combobox**, Async, Field, Scroll, **Menu**, **Popover**, **Tooltip**, **Toast** — see [COMPONENTS.md](./COMPONENTS.md). **Vue / Solid / Svelte:** reference Switch port; more components follow — [FRAMEWORKS.md](./FRAMEWORKS.md).
+**Catalog (React):** Button, Switch, Checkbox, Dialog, Tabs, Accordion, Select, Combobox, Async, Field, Scroll, Menu, Popover, Tooltip, Toast, **Separator**, **Progress**, **RadioGroup**, **Slider**, **PinInput** — see [COMPONENTS.md](./COMPONENTS.md).
 
 ## Quick start
 
-**Early access** — DM FOR EARLY ACCESS (npm publish is wired via Changesets; public install docs ship when the scope is live).
+The monorepo is published on npm as **`aeon-ui-engine`**:
 
-Open [https://github.com/GenericCPU/aeon-ui](https://github.com/GenericCPU/aeon-ui) for the repo. The marketing demo lives at [https://aeon-ui.com](https://aeon-ui.com) — set `VITE_SITE_ORIGIN` to that origin in Vercel so Open Graph previews resolve `og.png` correctly.
+```bash
+npm install aeon-ui-engine
+```
+
+Open [https://github.com/GenericCPU/aeon-ui](https://github.com/GenericCPU/aeon-ui) for the repo. The marketing demo lives at [https://aeon-ui.com](https://aeon-ui.com) — set `VITE_SITE_ORIGIN` to that origin in Vercel so Open Graph previews resolve the social image in `apps/demo/public/` correctly.
 
-When published: `pnpm add @aeon-ui/ui @aeon-ui/react @aeon-ui/panda`
+After installing `aeon-ui-engine`, use the core, React, styled UI, and Panda layers included in the package.
 
 After changing recipes or tokens in `packages/panda`:
 

package/apps/demo/og.config.mjs

@@ -4,12 +4,17 @@ export const siteOrigin = (process.env.VITE_SITE_ORIGIN ?? 'https://aeon-ui.com'
   '',
 )
 
+/** Published npm package — keep in sync with apps/demo/src/site.ts */
+export const npmPackage = 'aeon-ui-engine'
+export const npmInstallCommand = `npm install ${npmPackage}`
+
 export const og = {
   title: 'Aeon UI — Future-proof UI infrastructure',
   description:
-    'Statechart-driven headless primitives and a Panda CSS styled layer — dependable behavior, anatomy you can theme, built to last.',
+    'Statechart-driven primitives and a styled layer you control — dependable behavior today, room to grow tomorrow. Built to last.',
   siteName: 'Aeon UI',
-  imagePath: '/og.png',
-  imageAlt: 'Aeon UI — Future-proof UI infrastructure for the web',
+  imagePath: '/og-aeon-ui-engine.png',
+  imageAlt: `Aeon UI — Future-proof UI infrastructure (${npmInstallCommand})`,
   themeColor: '#0c0e12',
+  npmInstallCommand,
 }

package/apps/demo/public/og.svg

@@ -26,8 +26,8 @@
   <text x="80" y="340" fill="#94a3b8" font-family="Instrument Sans" font-size="36" font-weight="500">Future-proof UI infrastructure</text>
   <text x="80" y="400" fill="#64748b" font-family="IBM Plex Mono" font-size="22" font-weight="400">Statecharts / Headless primitives / Panda CSS</text>
 
-  <rect x="80" y="430" width="220" height="36" rx="6" fill="rgba(94, 234, 212, 0.12)" stroke="rgba(94, 234, 212, 0.35)" stroke-width="1"/>
-  <text x="104" y="454" fill="#5eead4" font-family="IBM Plex Mono" font-size="15" font-weight="500">@aeon-ui/ui</text>
+  <rect x="80" y="428" width="404" height="40" rx="6" fill="rgba(94, 234, 212, 0.12)" stroke="rgba(94, 234, 212, 0.35)" stroke-width="1"/>
+  <text x="104" y="454" fill="#5eead4" font-family="IBM Plex Mono" font-size="14" font-weight="500">{{NPM_INSTALL_COMMAND}}</text>
 
   <text x="80" y="548" fill="#94a3b8" font-family="Instrument Sans" font-size="17" font-weight="500">A project by</text>
   <text x="228" y="548" fill="#5eead4" font-family="Syne" font-size="22" font-weight="700">SpiderCorp</text>

package/apps/demo/scripts/generate-og-png.mjs

@@ -5,11 +5,12 @@ import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { Resvg } from '@resvg/resvg-js'
 import wawoff2 from 'wawoff2'
+import { og } from '../og.config.mjs'
 
 const require = createRequire(import.meta.url)
 const root = join(dirname(fileURLToPath(import.meta.url)), '..')
 const svgPath = join(root, 'public', 'og.svg')
-const outPath = join(root, 'public', 'og.png')
+const outPath = join(root, 'public', og.imagePath.replace(/^\//, ''))
 
 /** @type {Array<[slug: string, pkg: string, file: string]>} */
 const FONT_SOURCES = [
@@ -40,7 +41,8 @@ async function loadFontFiles() {
   return fontFiles
 }
 
-const svg = readFileSync(svgPath, 'utf8')
+const svgTemplate = readFileSync(svgPath, 'utf8')
+const svg = svgTemplate.replaceAll('{{NPM_INSTALL_COMMAND}}', og.npmInstallCommand)
 const fontFiles = await loadFontFiles()
 
 const resvg = new Resvg(svg, {

package/apps/demo/src/App.tsx

@@ -17,10 +17,10 @@ export function App() {
         <LandingHeader />
         <main>
           <LandingHero />
+          <PhilosophySection />
+          <PlaygroundSection />
           <LayersSection />
           <DiagramsSection />
-          <PlaygroundSection />
-          <PhilosophySection />
           <LandingFaq />
         </main>
         <LandingFooter />

package/apps/demo/src/aeonDiagrams.ts

@@ -1,100 +1,42 @@
-/** Mermaid sources — kept in sync with @aeon-ui/primitives machines (STATES.md). */
+/** Mermaid sources — kept in sync with aeon-ui-engine machines (STATES.md). */
 
 export type AeonDiagram = {
   id: string
   title: string
   caption: string
   source: string
-  packageRef: string
 }
 
+/** Model → snapshot → DOM. The north-star flow. */
 export const aeonNorthStarDiagram = `flowchart LR
-  chart["Statechart\\n(XState)"]
+  chart["Statechart"]
   snap["Snapshot"]
-  attr["data-aeon-state"]
-  ui["UI = f(state)"]
-  chart --> snap --> attr --> ui`
+  ui["UI"]
+  chart --> snap --> ui`
 
+/** Main async path — full machine has reset/re-fetch edges in STATES.md. */
 export const asyncLifecycleDiagram = `stateDiagram-v2
   direction LR
   [*] --> idle
-  idle --> loading: FETCH
-  idle --> idle: RESET / clear
-  loading --> success: RESOLVE
-  loading --> empty: RESOLVE (empty)
-  loading --> failure: REJECT
-  success --> loading: FETCH
-  empty --> loading: FETCH
-  failure --> loading: FETCH
-  success --> idle: RESET
-  empty --> idle: RESET
-  failure --> idle: RESET`
-
-export const buttonLifecycleDiagram = `stateDiagram-v2
-  direction LR
-  [*] --> idle
-  idle --> pending: PRESS
-  idle --> disabled: DISABLE
-  pending --> success: SUCCEED
-  pending --> failure: FAIL
-  pending --> disabled: DISABLE
-  success --> idle: RESET
-  success --> pending: PRESS
-  failure --> idle: RESET
-  failure --> pending: PRESS
-  disabled --> idle: ENABLE`
-
-export const fieldOrthogonalDiagram = `stateDiagram-v2
-  direction TB
-  state "interaction region" as interaction {
-    direction LR
-    [*] --> pristine
-    pristine --> dirty: INPUT / BLUR
-    dirty --> pristine: RESET
-  }
-  state "validation region" as validation {
-    direction LR
-    [*] --> valid
-    valid --> invalid: VALIDATE invalid
-    invalid --> valid: VALIDATE valid
-    invalid --> valid: RESET
-  }
-  state "submission region" as submission {
-    direction LR
-    [*] --> idle
-    idle --> pending: SUBMIT
-    pending --> idle: SUBMIT_DONE / SUBMIT_FAIL
-  }`
+  idle --> loading: fetch
+  loading --> success: ok
+  loading --> failure: err
+  loading --> empty: empty
+  success --> idle: reset
+  failure --> idle: reset
+  empty --> idle: reset`
 
 export const aeonDiagrams: AeonDiagram[] = [
   {
     id: 'north-star',
-    title: 'North star',
-    caption: 'Behavior is modeled first; the DOM expresses the snapshot — never the other way around.',
+    title: 'Model → UI',
+    caption: 'Behavior is defined once; the interface is its projection — structure, copy, and state attributes in agreement.',
     source: aeonNorthStarDiagram,
-    packageRef: 'PHILOSOPHY.md',
   },
   {
     id: 'async',
-    title: 'Async data region',
-    caption:
-      'Sequential lifecycle from createAsyncMachine(): idle · loading · success · failure · empty, plus stale on success.',
+    title: 'Async region',
+    caption: 'A named lifecycle teams can reason about together — not an unnamed spinner behind a boolean.',
     source: asyncLifecycleDiagram,
-    packageRef: '@aeon-ui/primitives — createAsyncMachine()',
-  },
-  {
-    id: 'button',
-    title: 'Button lifecycle',
-    caption: 'Submit controls: pending, success, and failure are real states — not overloaded disabled.',
-    source: buttonLifecycleDiagram,
-    packageRef: '@aeon-ui/primitives — buttonLifecycleMachine',
-  },
-  {
-    id: 'field',
-    title: 'Field (orthogonal regions)',
-    caption:
-      'Parallel regions flatten to one attribute: interaction:dirty validation:invalid submission:idle',
-    source: fieldOrthogonalDiagram,
-    packageRef: '@aeon-ui/primitives — fieldMachine',
   },
 ]

package/apps/demo/src/components/DiagramsSection.tsx

@@ -13,24 +13,23 @@ export function DiagramsSection() {
         </header>
 
         <div className="diagrams__grid">
-          {aeonDiagrams.map((d) => (
-            <article key={d.id} className="panel diagram-card" data-aeon-scope="diagrams">
+          {aeonDiagrams.map((diagram) => (
+            <article key={diagram.id} className="panel diagram-card" data-aeon-scope="diagrams">
               <header className="diagram-card__head">
-                <h3>{d.title}</h3>
-                <p>{d.caption}</p>
-                <code className="diagram-card__ref">{d.packageRef}</code>
+                <h3>{diagram.title}</h3>
+                <p>{diagram.caption}</p>
               </header>
-              <MermaidDiagram source={d.source} title={d.title} />
+              <MermaidDiagram source={diagram.source} title={diagram.title} />
             </article>
           ))}
         </div>
 
         <p className="diagrams__footnote">
-          Charts match executable machines in the repo — see{' '}
+          Full machine definitions in{' '}
           <a href={site.statesDocUrl} target="_blank" rel="noreferrer">
             STATES.md
-          </a>{' '}
-          and the playground for live snapshots.
+          </a>
+          .
         </p>
       </div>
     </section>

package/apps/demo/src/components/HeroInstall.tsx

@@ -2,9 +2,12 @@ import { site } from '../site.js'
 
 export function HeroInstallLine() {
   return (
-    <p className="hero-install__line" data-aeon-scope="hero" data-aeon-part="install">
-      <span className="hero-install__label">{site.heroInstallLabel}</span>
-      <span className="hero-install__access">{site.heroInstallAccess}</span>
-    </p>
+    <div className="hero-install" data-aeon-scope="hero" data-aeon-part="install">
+      <p className="hero-install__line">
+        <span className="hero-install__label">{site.heroInstallLabel}</span>
+        <code className="hero-install__command">{site.heroInstallCommand}</code>
+      </p>
+      <p className="hero-install__hint">{site.heroInstallHint}</p>
+    </div>
   )
 }

package/apps/demo/src/components/LandingFaq.tsx

@@ -18,7 +18,7 @@ export function LandingFaq() {
               <Accordion.ItemTrigger value={item.id}>{item.question}</Accordion.ItemTrigger>
               <Accordion.ItemContent value={item.id}>
                 <p>{item.answer}</p>
-                <CodeExample code={item.example} />
+                {'example' in item && item.example ? <CodeExample code={item.example} /> : null}
               </Accordion.ItemContent>
             </Accordion.Item>
           ))}

package/apps/demo/src/components/LandingFooter.tsx

@@ -10,6 +10,14 @@ export function LandingFooter() {
           © {year} {site.brand} · {site.tagline}
         </p>
         <p className="landing-footer__tag">
+          <a href={site.npmRegistryUrl} target="_blank" rel="noreferrer">
+            {site.npmPackage}
+          </a>
+          {' · '}
+          <a href={site.url} target="_blank" rel="noreferrer">
+            GitHub
+          </a>
+          {' · '}
           A project by{' '}
           <a href={site.studioUrl} target="_blank" rel="noreferrer">
             {site.studio}

package/apps/demo/src/components/LandingHeader.tsx

@@ -46,11 +46,13 @@ export function LandingHeader() {
         <div className="landing-header__utilities">
           <ThemeSwitcher />
           <a href="#playground" className="landing-header__cta">
-            <Button.Root size="xs">
+            <Button.Root size="sm" aria-label={site.heroCtaPrimary}>
               <span className="landing-header__cta-label landing-header__cta-label--long">
                 {site.heroCtaPrimary}
               </span>
-              <span className="landing-header__cta-label landing-header__cta-label--short">Demo</span>
+              <span className="landing-header__cta-label landing-header__cta-label--short" aria-hidden="true">
+                {site.headerCtaShort}
+              </span>
             </Button.Root>
           </a>
         </div>

package/apps/demo/src/components/LayersSection.tsx

@@ -1,5 +1,4 @@
 import { commitments, layers, site } from '../site.js'
-import { CodeExample } from './CodeExample.js'
 
 export function LayersSection() {
   return (
@@ -21,9 +20,9 @@ export function LayersSection() {
         </div>
 
         <div className="layers__grid" role="list">
-          {layers.map((l, index) => (
+          {layers.map((layer, index) => (
             <article
-              key={l.id}
+              key={layer.id}
               className="panel layer-card"
               role="listitem"
               data-aeon-scope="layers"
@@ -32,16 +31,13 @@ export function LayersSection() {
               <span className="layer-card__index" aria-hidden>
                 {String(index + 1).padStart(2, '0')}
               </span>
-              <h3>{l.title}</h3>
-              <p>{l.description}</p>
+              <h3>{layer.title}</h3>
+              <p>{layer.description}</p>
               <ul>
-                {l.highlights.map((h) => (
-                  <li key={h}>{h}</li>
+                {layer.highlights.map((highlight) => (
+                  <li key={highlight}>{highlight}</li>
                 ))}
               </ul>
-              <div className="layer-card__example">
-                <CodeExample code={l.example} />
-              </div>
             </article>
           ))}
         </div>

package/apps/demo/src/components/MermaidDiagram.tsx

@@ -21,12 +21,14 @@ function ensureMermaid(mermaid: typeof import('mermaid').default) {
       noteBorderColor: '#3d4556',
     },
     state: {
-      nodeSpacing: 48,
-      rankSpacing: 56,
+      nodeSpacing: 64,
+      rankSpacing: 72,
+      fontSize: 15,
     },
     flowchart: {
       curve: 'basis',
-      padding: 12,
+      padding: 16,
+      htmlLabels: true,
     },
   })
   mermaidReady = true

package/apps/demo/src/components/PhilosophySection.tsx

@@ -1,6 +1,5 @@
 import { Button } from '@aeon-ui/ui'
 import { philosophyTenets, site } from '../site.js'
-import { CodeExample } from './CodeExample.js'
 
 export function PhilosophySection() {
   return (
@@ -17,7 +16,6 @@ export function PhilosophySection() {
             <article key={t.title} className="thesis__card">
               <h3>{t.title}</h3>
               <p>{t.body}</p>
-              <CodeExample code={t.example} />
             </article>
           ))}
         </div>

package/apps/demo/src/components/PlaygroundBlock.tsx

@@ -1,23 +1,18 @@
 import type { ReactNode } from 'react'
-import { CodeExample } from './CodeExample.js'
 
 export interface PlaygroundBlockProps {
   title: string
   description: string
-  example: string
   children: ReactNode
   last?: boolean
 }
 
-export function PlaygroundBlock({ title, description, example, children, last }: PlaygroundBlockProps) {
+export function PlaygroundBlock({ title, description, children, last }: PlaygroundBlockProps) {
   return (
-    <section
-      className={`playground__block${last ? ' playground__block--last' : ''}`}
-    >
+    <section className={`playground__block${last ? ' playground__block--last' : ''}`}>
       <h3 className="playground__block-title">{title}</h3>
       <p className="playground__block-sub">{description}</p>
-      <CodeExample code={example} />
-      {children}
+      <div className="playground__block-demo">{children}</div>
     </section>
   )
 }

package/apps/demo/src/components/PlaygroundControlsDemo.tsx

@@ -0,0 +1,63 @@
+import { Button, Checkbox, PinInput, RadioGroup, Slider, Switch } from '@aeon-ui/ui'
+import { useState } from 'react'
+
+export function PlaygroundControlsDemo() {
+  const [notifications, setNotifications] = useState(true)
+  const [emailDigest, setEmailDigest] = useState(false)
+  const [plan, setPlan] = useState('standard')
+  const [volume, setVolume] = useState(40)
+  const [pin, setPin] = useState('')
+
+  return (
+    <div className="playground-controls">
+      <Button.Group className="playground-button-row">
+        <Button.Root>Primary</Button.Root>
+        <Button.Root variant="outline">Outline</Button.Root>
+        <Button.Root variant="ghost">Ghost</Button.Root>
+      </Button.Group>
+
+      <div className="playground-controls__toggles">
+        <Switch.Root checked={notifications} onCheckedChange={setNotifications}>
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+          <Switch.Label>Notifications</Switch.Label>
+        </Switch.Root>
+
+        <Checkbox.Root checked={emailDigest} onCheckedChange={setEmailDigest}>
+          <Checkbox.Control>
+            <Checkbox.Indicator />
+          </Checkbox.Control>
+          <Checkbox.Label>Email digest</Checkbox.Label>
+        </Checkbox.Root>
+      </div>
+
+      <RadioGroup.Root value={plan} onValueChange={setPlan} className="playground-controls__radio">
+        <RadioGroup.Item value="standard">
+          <RadioGroup.ItemControl>
+            <RadioGroup.ItemIndicator />
+          </RadioGroup.ItemControl>
+          <RadioGroup.ItemLabel>Standard</RadioGroup.ItemLabel>
+        </RadioGroup.Item>
+        <RadioGroup.Item value="pro">
+          <RadioGroup.ItemControl>
+            <RadioGroup.ItemIndicator />
+          </RadioGroup.ItemControl>
+          <RadioGroup.ItemLabel>Pro</RadioGroup.ItemLabel>
+        </RadioGroup.Item>
+      </RadioGroup.Root>
+
+      <Slider.Root value={volume} onValueChange={setVolume} className="playground-controls__slider">
+        <Slider.Track>
+          <Slider.Range />
+          <Slider.Thumb />
+        </Slider.Track>
+        <Slider.ValueText>{volume}%</Slider.ValueText>
+      </Slider.Root>
+
+      <PinInput.Root length={4} value={pin} onValueChange={setPin}>
+        <PinInput.Group />
+      </PinInput.Root>
+    </div>
+  )
+}