aeon-ui-engine 1.0.2 → 1.1.0

package/FRAMEWORKS.md

@@ -1,57 +0,0 @@
-# Framework support
-
-**Agents:** [AGENTS.md](./AGENTS.md) · porting steps mirror React — [docs/COMPONENT_CHECKLIST.md](./docs/COMPONENT_CHECKLIST.md)
-
-## Today
-
-| Runtime | Package | Status |
-|---------|---------|--------|
-| React 18+ | `@aeon-ui/react`, `@aeon-ui/ui` | **Full catalog** (Button, Dialog, Select, Combobox, overlays, …) |
-| Vue 3 | `@aeon-ui/vue` | **Adapter v0.1** — `useAeonMachine`, `Switch` |
-| Solid 1.8+ | `@aeon-ui/solid` | **Adapter v0.1** — `useAeonMachine`, `Switch` |
-| Svelte 4/5 | `@aeon-ui/svelte` | **Adapter v0.1** — `useAeonMachine`, `Switch` (`.svelte` parts) |
-
-Styled Panda recipes (`@aeon-ui/ui`) remain **React-only** until a second framework needs them.
-
-## Install
-
-```bash
-# Vue
-pnpm add @aeon-ui/vue @aeon-ui/core @aeon-ui/primitives xstate vue
-
-# Solid
-pnpm add @aeon-ui/solid @aeon-ui/core @aeon-ui/primitives xstate solid-js
-
-# Svelte
-pnpm add @aeon-ui/svelte @aeon-ui/core @aeon-ui/primitives xstate svelte
-```
-
-## Headless contract (all adapters)
-
-Any port must preserve:
-
-1. **Machines** from `@aeon-ui/primitives` (XState) — single source of behavior.
-2. **Anatomy** from `@aeon-ui/core` — `data-aeon-scope`, `data-aeon-part`, `data-aeon-state`.
-3. **Compound parts** — same names as React (`Root`, `Trigger`, `Content`, …).
-4. **Controlled APIs** — `open`, `onOpenChange`, `checked`, `onCheckedChange` where applicable.
-
-Framework packages bind machine snapshots to their reactivity model (via `@xstate/vue`, `@xstate/solid`, or actor `subscribe` in Svelte). They do **not** reimplement transition tables.
-
-## Porting checklist (new component)
-
-1. Copy behavior from `packages/react/src/<component>/`.
-2. Reuse `partAttrs` / anatomy from `@aeon-ui/core`.
-3. Wire `useAeonMachine` (or framework binding) to the primitive machine.
-4. Add a minimal demo or test in that framework when the API stabilizes.
-
-## Why React stayed first
-
-- Largest catalog and Panda styled layer.
-- Demo and docs target JSX.
-- Adapters prove the contract before duplicating every component three times.
-
-## Comparison to Ark / Zag
-
-[Ark UI](https://ark-ui.com) ships many frameworks via [Zag.js](https://zag-js.com) with broad component coverage. Aeon optimizes for **explicit XState charts** and **full lifecycle states** on fewer, deeper primitives. Adapters close the framework gap incrementally; they do not yet match Ark’s breadth.
-
-Contributors: open a PR adding the next React component port to `@aeon-ui/vue` / `solid` / `svelte` using **Switch** as the template.

package/PHILOSOPHY.md

@@ -1,71 +0,0 @@
-# Aeon UI — Founding Philosophy
-
-Aeon UI is infrastructure for the web, built for interfaces that remain clear as products grow.
-
-## North star
-
-**State is defined first. UI represents the totality of that definition.**
-
-A region’s behavior is modeled as an explicit set of conditions — named, mutually exclusive at a given depth, with known transitions. The interface’s job is to **fully express** that model: every stable state the chart allows should be visible in the UI (via structure, copy, and `data-aeon-state`), and the UI should never imply a condition the chart does not define (no mystery spinners, no ambiguous half-states, no styling that drifts from the snapshot).
-
-In short: **UI = f(state)** — not f(props), not f(local React flags), but f(the executable statechart).
-
-## Primary source
-
-**Thanh Nguyen**, *Statecharts for modern web application state management* (Metropolia, 2020).  
-[Theseus thesis PDF](https://www.theseus.fi/bitstream/handle/10024/334118/Thanh_Nguyen.pdf?sequence=2&isAllowed=y)
-
-## Core tenets
-
-### 1. Define state, then project UI
-
-Separate **behavior** (state evolution in a machine) from **presentation** (markup, style, anatomy). Components read a snapshot and render the corresponding face of the model. When the snapshot changes, the whole affordance updates — trigger, labels, indicators, and `data-aeon-state` together.
-
-### 2. Totality, not fragments
-
-If the machine has `idle`, `loading`, `success`, and `failure`, the product surface should account for all four — in layout, messaging, and styling — even when only one is active. Users and developers see the same complete map; nothing is left implicit.
-
-### 3. Explicit, coherent states
-
-Application regions benefit from **mutually exclusive states** at a given depth — one stable condition the team can name, test, and extend. That clarity keeps complex flows maintainable as features accumulate.
-
-### 4. Statecharts for lasting complexity
-
-When requirements grow, flat state diagrams become hard to follow. Statecharts add:
-
-- **Hierarchy** — cluster related states; share transitions at the right level of abstraction
-- **Orthogonality** — independent regions (e.g. playback and shuffle) without combinatorial sprawl
-- **Guards** — conditional transitions that document business rules in the model
-- **Transient states** — routing steps that keep flows readable
-- **Actions and activities** — entry, exit, and transition effects with defined ordering
-
-### 5. Deterministic, diagrammable behavior
-
-Every interactive primitive can own an **executable statechart** (via [XState](https://xstate.js.org)). Models can be visualized, reviewed, and extended alongside designers and stakeholders — a shared map for how the product behaves.
-
-### 6. Design systems in control
-
-Aeon provides **unstyled headless primitives** with explicit anatomy (`data-aeon-scope`, `data-aeon-part`, `data-aeon-state`) so your team owns every surface. The styled layer (`@aeon-ui/ui`) ships intentional defaults you can adopt or replace — **your brand, fully yours**.
-
-## Production-ready patterns
-
-| Concern | Approach |
-|---------|----------|
-| Structure & API | Compound components, part-based anatomy (`data-aeon-scope`, `data-aeon-part`, `data-aeon-state`), accessibility |
-| Styling | Panda CSS slot recipes on headless primitives — tokens and variants keyed to machine state |
-| Execution | XState statecharts (thesis case study) — explicit states and transitions in the browser |
-
-## Library shape
-
-```
-@aeon-ui/core        — philosophy, anatomy, machine helpers
-@aeon-ui/primitives  — headless, statechart-backed parts
-@aeon-ui/react       — React bindings (snapshot → DOM)
-@aeon-ui/ui          — styled components with intentional tokens
-```
-
-**Guideline:** Model the statechart first — list every stable state and transition. Then build UI that expresses the **whole** definition at once (track, readout, parts), with exactly one active condition per region.
-
-See **[STATES.md](./STATES.md)** for states traditional UI often omits (async empty/stale, button pending/success/failure, orthogonal field regions) and the corresponding Aeon primitives.
-
-**Coding agents:** [AGENTS.md](./AGENTS.md) · [docs/INDEX.md](./docs/INDEX.md)

package/PUBLISHING.md

@@ -1,105 +0,0 @@
-# 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
-
-| npm name | Path |
-|----------|------|
-| `@aeon-ui/core` | `packages/core` |
-| `@aeon-ui/primitives` | `packages/primitives` |
-| `@aeon-ui/react` | `packages/react` |
-| `@aeon-ui/panda` | `packages/panda` |
-| `@aeon-ui/ui` | `packages/ui` |
-| `@aeon-ui/vue` | `packages/vue` |
-| `@aeon-ui/solid` | `packages/solid` |
-| `@aeon-ui/svelte` | `packages/svelte` |
-
-All eight publishable packages are in a **fixed** changeset group — one version bump applies to every package.
-
-## Day-to-day versioning
-
-1. After shipping features or fixes, run `pnpm changeset` and describe the change.
-2. When ready to release, run `pnpm version-packages` (updates `package.json` versions and package CHANGELOGs).
-3. Run `pnpm build` and `pnpm typecheck`.
-4. Run `pnpm release` to publish (requires `npm login` and `@aeon-ui` scope access).
-
-See `.changeset/README.md` for a short maintainer cheat sheet.
-
-## Before first publish (0.1.0)
-
-1. `pnpm install` — includes `@changesets/cli` and adapter deps.
-2. `pnpm build` — codegen + all package builds.
-3. `pnpm typecheck` — workspace clean.
-4. Confirm `files` in each `package.json` includes `dist` (and Panda `styled-system` / CSS assets; Svelte `.svelte` sources where applicable).
-5. Create npm org or scope `@aeon-ui` and login: `npm login`.
-6. Apply pending changesets: `pnpm version-packages`.
-7. Dry-run: `pnpm release --dry-run` (if your Changesets version supports it) or publish one package manually to verify.
-8. `pnpm release`.
-
-### Publish order (manual fallback)
-
-Dependency order is satisfied automatically when all packages share one version and declare `workspace:*` / semver peers. Manual order if needed:
-
-```bash
-pnpm --filter @aeon-ui/core publish --access public
-pnpm --filter @aeon-ui/primitives publish --access public
-pnpm --filter @aeon-ui/react publish --access public
-pnpm --filter @aeon-ui/vue publish --access public
-pnpm --filter @aeon-ui/solid publish --access public
-pnpm --filter @aeon-ui/svelte publish --access public
-pnpm --filter @aeon-ui/panda publish --access public
-pnpm --filter @aeon-ui/ui publish --access public
-```
-
-Prefer `pnpm release` once Changesets is in use.
-
-## Consumer install
-
-**React + styled:**
-
-```bash
-pnpm add @aeon-ui/ui @aeon-ui/react @aeon-ui/panda
-```
-
-**Vue headless:**
-
-```bash
-pnpm add @aeon-ui/vue @aeon-ui/core @aeon-ui/primitives xstate
-```
-
-**Solid headless:**
-
-```bash
-pnpm add @aeon-ui/solid @aeon-ui/core @aeon-ui/primitives xstate solid-js
-```
-
-**Svelte headless:**
-
-```bash
-pnpm add @aeon-ui/svelte @aeon-ui/core @aeon-ui/primitives xstate svelte
-```
-
-## Demo app
-
-The `apps/demo` package stays private and is listed in Changesets `ignore`.

package/SCENE.md

@@ -1,113 +0,0 @@
-# Aeon Scene (optional plane)
-
-**Control plane** (`@aeon-ui/primitives`, `@aeon-ui/react`, `@aeon-ui/ui`) models interactive UI with statecharts.
-
-**Scene plane** adds ambient visuals — geometry, materials, and audio-driven motion — without changing that contract.
-
-## Packages
-
-| Package | Role |
-|---------|------|
-| `@aeon-ui/signal` | Web Audio analyser tap, FFT bands, bar motion smoothing |
-| `@aeon-ui/geometry` | Grid/wave patterns, SVG bar layout, `sceneAttrs()` |
-| `@aeon-ui/surface` | Procedural CSS materials (stone, gravel, brick, pavement, kraft) — import `surface.css` once |
-| `@aeon-ui/scene` | CSS 3D transforms, perspective, wall clips (framework-agnostic) |
-| `@aeon-ui/react-scene` | React: backdrops/visualizers + `SceneStage`, `SceneLayer`, `ScenePlane`, `SceneSlot` |
-
-Install only what you need. Sic Bo might use `surface` + `geometry`; a player app might add `signal` + `react-scene`.
-
-## Quick start (React)
-
-```bash
-pnpm add @aeon-ui/react-scene @aeon-ui/signal @aeon-ui/geometry @aeon-ui/surface
-```
-
-```tsx
-import '@aeon-ui/surface/surface.css'
-import { SceneRoot, SceneSurface, SignalBars } from '@aeon-ui/react-scene'
-import { createDemoSignal } from '@aeon-ui/signal'
-
-// Demo oscillator for playgrounds (use attachMediaAnalyser(audio) in production)
-const demo = createDemoSignal()
-demo.start()
-
-<SceneRoot state="active">
-  <SceneSurface material="stone" style={{ minHeight: 120 }} />
-  <SignalBars analyser={demo.analyser} active barCount={7} />
-</SceneRoot>
-```
-
-## Anatomy
-
-Scene regions use the same attribute story as controls:
-
-- `data-aeon-scope="scene"`
-- `data-aeon-part="backdrop" | "grid" | "surface" | "visualizer" | …`
-- `data-aeon-state="idle" | "active" | "paused"` when playback or motion applies
-
-Style with Panda/CSS like any other Aeon part — no requirement to use `@aeon-ui/ui` components.
-
-## Construct a 3D scene from UI elements
-
-Use **CSS 3D** (not WebGL): a `SceneStage` sets perspective; `SceneRoom` builds a box (floor, ceiling, back, left, right) with one shared vanishing point; `SceneLayer` / `ScenePlane` cover ad-hoc layouts; `SceneSlot` mounts interactive UI at a transform. Prefer `SceneRoom` for alley/corridor spaces.
-
-```bash
-pnpm add @aeon-ui/react-scene @aeon-ui/scene @aeon-ui/surface @aeon-ui/geometry
-```
-
-```tsx
-import '@aeon-ui/surface/surface.css'
-import '@aeon-ui/react-scene/scene-3d.css'
-import { SceneStage, SceneRoom, SceneLayer, ScenePlane, SceneSlot } from '@aeon-ui/react-scene'
-
-<SceneStage minHeight={360} perspective={{ distance: 1100, origin: '50% 48%' }}>
-  <SceneRoom
-    size={{ width: 1280, height: 680, depth: 920 }}
-    camera={{ pitch: 11, offsetZ: -60 }}
-    floorMaterial="pavement"
-    wallMaterial="brick"
-    floor={<YourGameBoard />}
-  />
-</SceneStage>
-
-<!-- Or manual layers: -->
-<SceneStage minHeight={360} perspective={{ distance: 1000, origin: '50% 38%' }}>
-  <SceneLayer transform={{ z: -140 }}>
-    <ScenePlane part="sky" style={{ background: 'linear-gradient(180deg, #1a2030, #0d1117)' }} />
-  </SceneLayer>
-
-  <SceneLayer transform={{ z: -70, rotateY: 38 }} origin="0% 100%">
-    <ScenePlane part="wall-left" wall="left" material="brick" fill={false} style={{ width: '52%', height: '72%' }} />
-  </SceneLayer>
-
-  <SceneLayer transform={{ z: -70, rotateY: -38 }} origin="100% 100%">
-    <ScenePlane part="wall-right" wall="right" material="brick" fill={false} style={{ right: 0, width: '52%', height: '72%' }} />
-  </SceneLayer>
-
-  <SceneLayer transform={{ z: 0, rotateX: 58 }} origin="50% 0%">
-    <ScenePlane part="ground" material="gravel">
-      <SceneSlot transform={{ z: 24 }} style={{ left: '12%', right: '12%', top: '18%' }}>
-        {/* Any React UI — table, cards, controls */}
-        <YourGameBoard />
-      </SceneSlot>
-    </ScenePlane>
-  </SceneLayer>
-</SceneStage>
-```
-
-**Image URLs (optional):** pass `texture="…"` on `ScenePlane` when you have art assets. Prefer `@aeon-ui/surface` classes (`aeon-surface--pavement`, `--kraft`, `--brick`, …) for zero-asset materials — see the Sic Bo alley demo.
-
-**Low-level:** import `sceneTransformStyle`, `sceneStageStyle`, `sceneWallClip` from `@aeon-ui/scene` for Vue/Solid/Svelte bindings.
-
-Layers use `data-aeon-scope="scene"` and `data-aeon-part` from `@aeon-ui/geometry` — style in Panda/CSS like controls.
-
-## Soundbase lineage
-
-Bar motion and analyser patterns are adapted from the Soundbase logo visualizer (`logo-visualizer-core`, `logo-audio-analyser`). Product-specific logos stay in the app; the math lives in `@aeon-ui/signal`.
-
-## What not to put here
-
-- Form controls, dialogs, async data — stay in **primitives / ui**
-- Full WebGL/game engines — separate packages or app code; Scene provides CSS/SVG/canvas-friendly building blocks first
-
-Future: `@aeon-ui/vue-scene`, canvas render targets, image-based texture atlases, shared `@aeon-ui/motion` for non-audio springs. WebGL/Three.js stays app-level; Scene 3D is DOM + CSS transforms first.

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,
-}