aeon-ui-engine 1.0.1 → 1.0.3

package/STATES.md

@@ -1,243 +0,0 @@
-# States traditional UI forgets — and how Aeon models them
-
-**Agents:** start at [AGENTS.md](./AGENTS.md) and [docs/MACHINES.md](./docs/MACHINES.md) for which components use machines vs props.
-
-Aeon’s north star: **[state is defined first; UI expresses the totality of that definition](./PHILOSOPHY.md)** (`UI = f(snapshot)`).
-
-Traditional interfaces collapse rich behavior into a few booleans (`disabled`, `loading`, `open`) or hide conditions entirely. This document catalogs common gaps, how Aeon addresses them today, and how to extend the library.
-
----
-
-## The attribute contract
-
-Every styled surface should be targetable consistently:
-
-| Attribute | Purpose |
-|-----------|---------|
-| `data-aeon-scope` | Component family (`button`, `async`, `field`, …) |
-| `data-aeon-part` | Compound part (`root`, `track`, `control`, …) |
-| `data-aeon-state` | Active condition(s) from the machine snapshot |
-
-Nested parallel regions flatten with `stateToAttr` from `@aeon-ui/core`:
-
-```ts
-import { stateToAttr } from '@aeon-ui/core'
-// e.g. "interaction:dirty validation:invalid submission:idle"
-```
-
-Panda recipes and `globalCss` in `@aeon-ui/panda` key off these attributes — not ad hoc class names in product code.
-
----
-
-## 1. Async data regions
-
-### What traditional UI skips
-
-| Condition | Typical mistake |
-|-----------|-----------------|
-| **Idle** (never fetched) | Looks like “empty” |
-| **Loading** | Spinner with no named state |
-| **Success** | Only happy path styled |
-| **Failure** | Toast only, easy to miss |
-| **Empty** (success, zero results) | Same UI as idle |
-| **Stale** (success + background refresh) | Silent flicker |
-
-### Aeon model
-
-Machine: `createAsyncMachine()` in `@aeon-ui/primitives`  
-States: `idle` · `loading` · `success` · `failure` · `empty`  
-Context flag: `stale` on success → readout uses `data-aeon-state="success stale"`
-
-Constants: `ASYNC_LIFECYCLE_STATES`, `isEmptyAsyncData()`
-
-### UI kit (totality pattern)
-
-```tsx
-import { Async, Button } from '@aeon-ui/ui'
-
-<Async.Root>
-  <Async.Track />      {/* every lifecycle state visible on the rail */}
-  <Async.Readout>…</Async.Readout>
-  <Async.Actions>
-    <Button.Root>Fetch</Button.Root>
-  </Async.Actions>
-</Async.Root>
-```
-
-Headless: `@aeon-ui/react` → `Async`, `useAsyncContext`  
-Anatomy: `asyncAnatomy` (`track`, `segment`, `readout`, `actions`, …)  
-Styles: `aeonAsync` slot recipe
-
-**Rule:** If the chart lists five states, the track lists five segments — one active, none implicit.
-
----
-
-## 2. Action button lifecycle
-
-### What traditional UI skips
-
-`disabled` is used for: in-flight submit, success, permission denied, validation blocked, and “busy”.
-
-Missing named states: **pending**, **success**, **failure**, distinct from **disabled**.
-
-### Aeon model
-
-Machine: `buttonLifecycleMachine`  
-States: `idle` · `pending` · `success` · `failure` · `disabled`
-
-### Component API
-
-```tsx
-<Button.Root status="pending" aria-busy>
-  Submitting…
-</Button.Root>
-```
-
-`status` maps to `data-aeon-state`. Global styles adjust cursor/opacity/border per state.
-
-For full chart-driven flows, run `buttonLifecycleMachine` with `useAeonMachine` and drive `status` from `snapshot.value` (see playground **Button lifecycle**).
-
----
-
-## 3. Form field (orthogonal regions)
-
-### What traditional UI skips
-
-Interaction, validation, and submission are merged into one visual “error state.”
-
-### Aeon model
-
-Machine: `fieldMachine` (parallel)
-
-| Region | States |
-|--------|--------|
-| `interaction` | `pristine` · `dirty` |
-| `validation` | `valid` · `invalid` |
-| `submission` | `idle` · `pending` |
-
-Root: `data-aeon-state="interaction:dirty validation:invalid submission:idle"`
-
-### Component API
-
-```tsx
-import { Field } from '@aeon-ui/ui'
-
-<Field.Root>
-  <Field.Label htmlFor="email">Email</Field.Label>
-  <Field.Control id="email" validate={(v) => isValidEmail(v)} />
-  <Field.Message>Enter a valid email.</Field.Message>
-  <Field.Hint>Shown when pristine.</Field.Hint>
-</Field.Root>
-```
-
-`Field.Control` sends `INPUT`, `BLUR`, and `VALIDATE` events.  
-`Field.Message` renders only when `validation:invalid`.  
-Pending submission dims the control via `[data-aeon-state*="submission:pending"]` in global CSS.
-
----
-
-## 4. Primitives already chart-backed
-
-| Primitive | Stable states (high level) |
-|-----------|----------------------------|
-| **Dialog** | `closed` · `open` |
-| **Toggle / Switch** | `checked` / `unchecked` + interaction `idle` · `pressed` |
-| **Tabs** | single active value |
-| **Accordion** | per-item open/closed |
-
-Future optional substates (documented, not all implemented): dialog `entering` / `exiting`, accordion `expanding` / `collapsing`.
-
----
-
-## 5. Scroll regions
-
-### What traditional UI skips
-
-Scroll position is implicit. Overflow axis (vertical, horizontal, or both) and whether the user is at the start, middle, or end of each axis are rarely reflected in the DOM — so edge fades, scrollbar styling, and assistive hints stay out of sync.
-
-### Aeon model
-
-No XState machine — `getScrollSnapshot()` in `@aeon-ui/core` derives state from the viewport element on scroll and resize.
-
-| `data-aeon-state` token | Meaning |
-|-------------------------|---------|
-| `idle` | No overflow on either axis |
-| `overflow-y` · `overflow-x` · `overflow-both` | Which axes scroll |
-| `at-start-y` · `between-y` · `at-end-y` | Vertical edge position |
-| `at-start-x` · `between-x` · `at-end-x` | Horizontal edge position |
-
-### Component API
-
-```tsx
-import { Scroll } from '@aeon-ui/ui'
-
-<Scroll.Root axis="both" maxH="md">
-  <Scroll.Viewport>
-    <Scroll.Content>{children}</Scroll.Content>
-  </Scroll.Viewport>
-  <Scroll.StateReadout />
-</Scroll.Root>
-```
-
-Import `@aeon-ui/panda/scrollbars.css` after `theme-runtime.css` for WebKit + Firefox scrollbar styling on `html`, `[data-aeon-scroll]`, and `.code-example`.
-
----
-
-## 6. States to model in product code
-
-Aeon does not ship every domain machine, but the same rules apply:
-
-| Concern | Suggested states |
-|---------|------------------|
-| **Offline** | `online` · `offline` · `reconnecting` |
-| **Permissions** | `allowed` · `denied` (not `disabled`) |
-| **Optimistic UI** | `optimistic` · `confirmed` · `rolledBack` |
-| **Rate limit** | `ok` · `throttled` |
-| **Selection** | add `indeterminate` on checkboxes |
-
-Use **orthogonal regions** when concerns are independent (Nguyen / Harel statecharts).
-
----
-
-## 7. Styling checklist
-
-Full ordered steps: **[docs/COMPONENT_CHECKLIST.md](./docs/COMPONENT_CHECKLIST.md)**.
-
-1. Model the chart in `@aeon-ui/primitives` (or app-level XState).
-2. Add anatomy in `@aeon-ui/core` if new scope.
-3. Project snapshot in `@aeon-ui/react` with `partAttrs` / `stateToAttr`.
-4. Add slot recipe or `globalCss` keyed on `data-aeon-state` in `@aeon-ui/panda`.
-5. Export styled compound from `@aeon-ui/ui`.
-6. Demo the **full rail** — track + readout + actions.
-
----
-
-## 8. Play-surface layout (spatial, not XState)
-
-Games and spatial UIs need **desktop vs mobile composition** without breaking pointer math. Aeon models this separately from behavior:
-
-- **Layout mode** — `compact` | `wide` on `data-aeon-layout-mode`
-- **Composition** — `split` | `stack` | `overlay` on `data-aeon-layout-composition`
-- **Normalized coordinates** — `normFromClient` / `clientFromNorm` in `@aeon-ui/core` (0–100 plane per measured region)
-
-Full guide: **[docs/LAYOUT_COORDINATES.md](./docs/LAYOUT_COORDINATES.md)** · Anatomy: `playSurfaceAnatomy` · Hook: `useLayoutMode`.
-
----
-
-## 9. Package map
-
-| Package | Role |
-|---------|------|
-| `@aeon-ui/primitives` | Machines: `async`, `buttonLifecycle`, `field`, … |
-| `@aeon-ui/core` | `asyncAnatomy`, `fieldAnatomy`, `scrollAnatomy`, `getScrollSnapshot` |
-| `@aeon-ui/react` | `Async.*`, `Field.*`, `Scroll.*`, `Button` + `status` |
-| `@aeon-ui/panda` | `aeonAsync`, `aeonField`, `aeonScroll`, `scrollbars.css` |
-| `@aeon-ui/ui` | Styled exports |
-
----
-
-## References
-
-- [PHILOSOPHY.md](./PHILOSOPHY.md) — north star and tenets  
-- [Thanh Nguyen (2020) — Statecharts for modern web application state management](https://www.theseus.fi/bitstream/handle/10024/334118/Thanh_Nguyen.pdf?sequence=2&isAllowed=y)  
-- Live examples: `apps/demo` playground (**Async region**, **Button lifecycle**, **Field regions**, **Scroll regions**)

package/apps/demo/index.html

@@ -1,31 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Aeon UI — Future-proof UI infrastructure</title>
-    <!-- OG_META -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Instrument+Sans:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script>
-      (function () {
-        var t = localStorage.getItem('aeon-theme') || 'default';
-        var m = localStorage.getItem('aeon-mode');
-        if (m !== 'light' && m !== 'dark') {
-          m = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
-        }
-        document.documentElement.dataset.aeonTheme = t;
-        document.documentElement.dataset.aeonMode = m;
-        document.documentElement.style.colorScheme = m;
-      })();
-    </script>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/apps/demo/og.config.mjs

@@ -1,20 +0,0 @@
-/** Shared OG / canonical URLs — override in CI with VITE_SITE_ORIGIN. */
-export const siteOrigin = (process.env.VITE_SITE_ORIGIN ?? 'https://aeon-ui.com').replace(
-  /\/$/,
-  '',
-)
-
-/** 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 primitives and a styled layer you control — dependable behavior today, room to grow tomorrow. Built to last.',
-  siteName: 'Aeon UI',
-  imagePath: '/og-aeon-ui-engine.png',
-  imageAlt: `Aeon UI — Future-proof UI infrastructure (${npmInstallCommand})`,
-  themeColor: '#0c0e12',
-  npmInstallCommand,
-}

package/apps/demo/package.json

@@ -1,41 +0,0 @@
-{
-  "name": "@aeon-ui/demo",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "generate:og": "node scripts/generate-og-png.mjs",
-    "build": "pnpm --filter @aeon-ui/panda codegen && pnpm --filter @aeon-ui/site build && node scripts/generate-og-png.mjs && vite build",
-    "preview": "vite preview",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@aeon-ui/geometry": "workspace:*",
-    "@aeon-ui/panda": "workspace:*",
-    "@aeon-ui/primitives": "workspace:*",
-    "@aeon-ui/react": "workspace:*",
-    "@aeon-ui/react-scene": "workspace:*",
-    "@aeon-ui/signal": "workspace:*",
-    "@aeon-ui/surface": "workspace:*",
-    "@aeon-ui/ui": "workspace:*",
-    "@xstate/react": "^5.0.3",
-    "mermaid": "^11.15.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "xstate": "^5.19.2"
-  },
-  "devDependencies": {
-    "@aeon-ui/site": "workspace:*",
-    "@fontsource/ibm-plex-mono": "^5.2.7",
-    "@fontsource/instrument-sans": "^5.2.8",
-    "@fontsource/syne": "^5.2.7",
-    "@resvg/resvg-js": "^2.6.2",
-    "@types/node": "^22.15.3",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "wawoff2": "^2.0.1"
-  }
-}

package/apps/demo/public/favicon.svg

@@ -1,16 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Aeon UI">
-  <rect width="32" height="32" rx="8" fill="#0a0c10"/>
-  <rect
-    x="6.5"
-    y="6.5"
-    width="15"
-    height="15"
-    rx="3.5"
-    fill="none"
-    stroke="#5eead4"
-    stroke-width="1.75"
-    opacity="0.9"
-  />
-  <rect x="10.5" y="10.5" width="15" height="15" rx="3.5" fill="#e8ecf4"/>
-  <circle cx="21" cy="21" r="2.5" fill="#5eead4"/>
-</svg>

package/apps/demo/public/og.svg

@@ -1,35 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-label="Aeon UI - Future-proof UI infrastructure">
-  <defs>
-    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="0%" stop-color="#121820"/>
-      <stop offset="55%" stop-color="#0c0e12"/>
-      <stop offset="100%" stop-color="#080a0e"/>
-    </linearGradient>
-    <linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="0%">
-      <stop offset="0%" stop-color="#2dd4bf" stop-opacity="0"/>
-      <stop offset="45%" stop-color="#5eead4"/>
-      <stop offset="100%" stop-color="#2dd4bf" stop-opacity="0"/>
-    </linearGradient>
-    <pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
-      <path d="M 48 0 L 0 0 0 48" fill="none" stroke="#5eead4" stroke-width="0.5" opacity="0.08"/>
-    </pattern>
-    <radialGradient id="glow" cx="72%" cy="28%" r="45%">
-      <stop offset="0%" stop-color="#5eead4" stop-opacity="0.14"/>
-      <stop offset="100%" stop-color="#5eead4" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-  <rect width="1200" height="630" fill="url(#bg)"/>
-  <rect width="1200" height="630" fill="url(#grid)"/>
-  <rect width="1200" height="630" fill="url(#glow)"/>
-
-  <text x="80" y="268" fill="#f0f4e8" font-family="Syne" font-size="88" font-weight="700" letter-spacing="-0.04em">Aeon UI</text>
-  <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="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>
-  <text x="80" y="578" fill="#64748b" font-family="IBM Plex Mono" font-size="14" font-weight="400">spidercorp.xyz</text>
-</svg>

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

@@ -1,62 +0,0 @@
-import { createRequire } from 'node:module'
-import { mkdtempSync, readFileSync, writeFileSync } from 'node:fs'
-import { tmpdir } from 'node:os'
-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.imagePath.replace(/^\//, ''))
-
-/** @type {Array<[slug: string, pkg: string, file: string]>} */
-const FONT_SOURCES = [
-  ['Syne-700', '@fontsource/syne', 'syne-latin-700-normal.woff2'],
-  ['InstrumentSans-500', '@fontsource/instrument-sans', 'instrument-sans-latin-500-normal.woff2'],
-  ['InstrumentSans-400', '@fontsource/instrument-sans', 'instrument-sans-latin-400-normal.woff2'],
-  ['IBMPlexMono-500', '@fontsource/ibm-plex-mono', 'ibm-plex-mono-latin-500-normal.woff2'],
-  ['IBMPlexMono-400', '@fontsource/ibm-plex-mono', 'ibm-plex-mono-latin-400-normal.woff2'],
-]
-
-function woff2Path(pkg, filename) {
-  return join(dirname(require.resolve(`${pkg}/package.json`)), 'files', filename)
-}
-
-/** resvg `fontFiles` only loads SFNT/TTF — convert @fontsource WOFF2 first. */
-async function loadFontFiles() {
-  const dir = mkdtempSync(join(tmpdir(), 'aeon-og-fonts-'))
-  const fontFiles = []
-
-  for (const [slug, pkg, file] of FONT_SOURCES) {
-    const woff2 = readFileSync(woff2Path(pkg, file))
-    const sfnt = await wawoff2.decompress(woff2)
-    const ttfPath = join(dir, `${slug}.ttf`)
-    writeFileSync(ttfPath, Buffer.from(sfnt))
-    fontFiles.push(ttfPath)
-  }
-
-  return fontFiles
-}
-
-const svgTemplate = readFileSync(svgPath, 'utf8')
-const svg = svgTemplate.replaceAll('{{NPM_INSTALL_COMMAND}}', og.npmInstallCommand)
-const fontFiles = await loadFontFiles()
-
-const resvg = new Resvg(svg, {
-  fitTo: { mode: 'width', value: 1200 },
-  font: {
-    loadSystemFonts: false,
-    fontFiles,
-    defaultFontFamily: 'Instrument Sans',
-    sansSerifFamily: 'Instrument Sans',
-    serifFamily: 'Syne',
-    monospaceFamily: 'IBM Plex Mono',
-  },
-})
-
-const png = resvg.render().asPng()
-writeFileSync(outPath, png)
-console.log(`Wrote ${outPath} (${png.length} bytes)`)

package/apps/demo/src/App.tsx

@@ -1,31 +0,0 @@
-import { Toast } from '@aeon-ui/ui'
-import { GridMesh } from './components/GridMesh.js'
-import { LandingFaq } from './components/LandingFaq.js'
-import { LandingFooter } from './components/LandingFooter.js'
-import { LandingHeader } from './components/LandingHeader.js'
-import { LandingHero } from './components/LandingHero.js'
-import { DiagramsSection } from './components/DiagramsSection.js'
-import { LayersSection } from './components/LayersSection.js'
-import { PhilosophySection } from './components/PhilosophySection.js'
-import { PlaygroundSection } from './components/PlaygroundSection.js'
-
-export function App() {
-  return (
-    <Toast.Provider>
-      <GridMesh />
-      <div className="landing">
-        <LandingHeader />
-        <main>
-          <LandingHero />
-          <PhilosophySection />
-          <PlaygroundSection />
-          <LayersSection />
-          <DiagramsSection />
-          <LandingFaq />
-        </main>
-        <LandingFooter />
-      </div>
-      <Toast.Viewport placement="bottom-end" />
-    </Toast.Provider>
-  )
-}

package/apps/demo/src/aeonDiagrams.ts

@@ -1,42 +0,0 @@
-/** Mermaid sources — kept in sync with aeon-ui-engine machines (STATES.md). */
-
-export type AeonDiagram = {
-  id: string
-  title: string
-  caption: string
-  source: string
-}
-
-/** Model → snapshot → DOM. The north-star flow. */
-export const aeonNorthStarDiagram = `flowchart LR
-  chart["Statechart"]
-  snap["Snapshot"]
-  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
-  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: 'Model → UI',
-    caption: 'Behavior is defined once; the interface is its projection — structure, copy, and state attributes in agreement.',
-    source: aeonNorthStarDiagram,
-  },
-  {
-    id: 'async',
-    title: 'Async region',
-    caption: 'A named lifecycle teams can reason about together — not an unnamed spinner behind a boolean.',
-    source: asyncLifecycleDiagram,
-  },
-]

package/apps/demo/src/app.css

@@ -1,16 +0,0 @@
-@import './landing.css';
-@import './demo-layout.css';
-
-html {
-  scroll-behavior: smooth;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
-  }
-}
-
-a {
-  color: inherit;
-}

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

@@ -1,20 +0,0 @@
-import { Button, cn } from '@aeon-ui/ui'
-import type { ReactNode } from 'react'
-
-export interface ActionClusterProps {
-  children: ReactNode
-  className?: string
-}
-
-/** Machine console actions — spaced buttons by default. */
-export function ActionCluster({ children, className }: ActionClusterProps) {
-  return (
-    <Button.Group
-      className={cn('machine-console__actions', className)}
-      data-aeon-scope="machine"
-      data-aeon-part="actions"
-    >
-      {children}
-    </Button.Group>
-  )
-}

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

@@ -1,97 +0,0 @@
-import { useAsyncContext } from '@aeon-ui/react'
-import { Async, Button } from '@aeon-ui/ui'
-import { ActionCluster } from './ActionCluster.js'
-
-export interface AsyncMachineDemoProps {
-  /** Playground shows failure and empty paths; hero always succeeds for a crisp preview. */
-  variant?: 'hero' | 'playground'
-}
-
-const readouts: Record<string, Record<'hero' | 'playground', string>> = {
-  idle: {
-    hero: 'Idle — ready to fetch',
-    playground: 'Idle — press Simulate fetch when ready',
-  },
-  loading: {
-    hero: 'Loading…',
-    playground: 'Loading…',
-  },
-  success: {
-    hero: 'Success',
-    playground: 'Success — data on context',
-  },
-  failure: {
-    hero: 'Failure',
-    playground: 'Failure — error on context',
-  },
-  empty: {
-    hero: 'Empty',
-    playground: 'Empty — resolved with no rows',
-  },
-}
-
-function AsyncMachineControls({ variant }: { variant: 'hero' | 'playground' }) {
-  const { status, send } = useAsyncContext()
-  const runFetch = () => {
-    send({ type: 'FETCH' })
-    const delay = variant === 'hero' ? 700 : 900
-    setTimeout(() => {
-      if (variant === 'hero') {
-        send({ type: 'RESOLVE', data: 'Payload OK' })
-        return
-      }
-      const roll = Math.random()
-      if (roll < 0.25) {
-        send({ type: 'REJECT', error: 'Network unreachable' })
-      } else if (roll < 0.4) {
-        send({ type: 'RESOLVE', data: [] })
-      } else {
-        send({ type: 'RESOLVE', data: 'Aeon payload received' })
-      }
-    }, delay)
-  }
-
-  return (
-    <ActionCluster className="machine-console__actions">
-      <Button.Root size="sm" onClick={runFetch} disabled={status === 'loading'}>
-        {variant === 'hero' ? 'Run' : 'Simulate fetch'}
-      </Button.Root>
-      <Button.Root size="sm" variant="outline" onClick={() => send({ type: 'RESET' })}>
-        Reset
-      </Button.Root>
-      {variant === 'playground' && status === 'success' && (
-        <Button.Root size="sm" variant="ghost" onClick={() => send({ type: 'STALE' })}>
-          Mark stale
-        </Button.Root>
-      )}
-    </ActionCluster>
-  )
-}
-
-function AsyncMachineReadout({ variant }: { variant: 'hero' | 'playground' }) {
-  const { status, data, error, stale } = useAsyncContext()
-  const readout =
-    status === 'success'
-      ? String(data ?? (variant === 'hero' ? 'Payload OK' : 'Aeon payload received'))
-      : status === 'failure'
-        ? String(error ?? 'Network unreachable')
-        : (readouts[status]?.[variant] ?? readouts.idle[variant])
-
-  return (
-    <p className="live-status__text">
-      {stale && status === 'success' ? `${readout} (stale — refresh recommended)` : readout}
-    </p>
-  )
-}
-
-export function AsyncMachineDemo({ variant = 'playground' }: AsyncMachineDemoProps) {
-  return (
-    <Async.Root data-aeon-scope="machine" data-aeon-part="console">
-      <Async.Track />
-      <Async.Readout>
-        <AsyncMachineReadout variant={variant} />
-      </Async.Readout>
-      <AsyncMachineControls variant={variant} />
-    </Async.Root>
-  )
-}