aeon-ui-engine 1.5.1 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,145 @@
 # Changelog
 
+## [Unreleased]
+
+## [1.9.0] - 2026-10-21
+
+### Added
+
+- **Chart cache (`@aeon-ui/primitives`).** `createChartCache({ id, load, ttl, tags? })` is a keyed cache charts invoke as `cache.actor`, shared by every chart instance. Each key is a `cacheEntryMachine` (`idle`, `loading`, `ready`, `stale`, `refreshing`, `failed`): one load per key, a time-to-live per key, stale data served while it revalidates, and `CACHE.INVALIDATE` by key or tag. `peek()` returns a stable view for selectors. Ids naming secrets, keys or spend decisions are refused.
+- **Windowed lists.** `computeListWindow` (`@aeon-ui/core`) and `useWindowedRange` (`@aeon-ui/react`) mount only the rows in view, for vertical lists and horizontal strips.
+- **Sounds (`@aeon-ui/core`).** `playSound(name)` plays short UI sounds synthesized with Web Audio (`tap`, `copy`, `send`, `success`, `attention`, `error`, `ready`); no audio files. Silent until the app calls `configureSounds({ enabled: true, volume })`. The same sound fired twice within 60 ms plays once. `createSoundPlayer` takes a context factory for tests.
+- **`Clipboard` sounds.** `clipboardMachine` plays `copy` on entering `copied` and `error` on entering `failed`, through the `soundCopied` / `soundFailed` actions.
+- **`Clipboard`.** One-click copy on `clipboardMachine` (idle, copying, copied, failed); the styled trigger swaps a copy icon for a check and a live region announces the result.
+- **`Prose`.** Styles rendered markdown in em, so it follows the surrounding font size; draws list markers the reset strips, and `<ol start>` numbers correctly.
+- **`Textarea`.** Grows with its content between `minRows` and `maxRows`; `outline` and `ghost` variants.
+- **`SegmentGroup`.** Compact single choice on `tabsMachine`; arrow keys, Home and End move the selection and skip disabled items.
+- **`Composer.Input` `minRows` / `maxRows`.** The input grows with its text (default 1 to 4 lines) instead of staying one fixed height.
+
+### Changed
+
+- **Panda CSS 2.** `@aeon-ui/panda` runs on `@pandacss/dev` 2.3 and lists `preset-base` and `preset-panda` itself, since v2 adds no presets on its own. Generated `styled-system` files are `.js` instead of `.mjs`.
+
+- **`Select.Positioner` `anchorRef`, `placement`, `matchAnchorWidth`.** The same options `Popover.Positioner` takes: a compact trigger pinned to the end of a row can open its listbox across the row it belongs to, so option labels and details are not squeezed to the trigger's width.
+
+### Fixed
+
+- **Controlled `Tabs.Root` reports clicks.** With `value` set, a trigger click calls `onValueChange` with the clicked value; before, it changed only machine state the controlled value ignored, so the tab never switched. `Tabs.Root` also takes div attributes.
+- **`RadioGroup.Root` takes `aria-label`.** Its props extend div attributes, so `aria-label`, `id` and the rest type-check (the root already passed them through).
+- **`anatomy()` carries its `scope` at runtime.** The type promised `.scope`, but the object had none, so `scopeAttrs(x.scope, …)` emitted `data-aeon-scope="undefined"`.
+
+## [1.8.0] - 2026-09-27
+
+### Added
+
+- **`Popover.Positioner` / `FloatingPositioner` `anchorRef` + `matchAnchorWidth`.** Position a surface against the region it belongs to instead of the small trigger pinned to its edge, so a wide panel lands where the eye already is rather than being clamped back from the viewport edge.
+- **Optional philosophy note:** [docs/ANALOGY.md](./docs/ANALOGY.md) — Aeon as metaphor for formless truth and sensory projection (not product doctrine). Linked from [PHILOSOPHY.md](./PHILOSOPHY.md) and the docs index.
+- `@aeon-ui/tree` — widget trees. A widget is immutable data describing one face
+  of a chart, interpreted into DOM with `data-aeon-scope|part|state`. Flutter's
+  Widget and Element layers only: no RenderObject (layout stays CSS), no
+  `StatefulWidget` (the chart is the only state).
+- `exclusiveActionWidget` — the shared face for "confirm, then await" regions
+  (`idle → confirming → busy → idle | failure`): pending label, disabled set,
+  failure copy and confirm slot are functions of the snapshot.
+- `uncoveredStates(states, project)` — totality as a test: every state the chart
+  names must appear on the tree projected for it.
+- `interpret(tree, hosts)` — element layer; hosts slot existing compounds
+  (`Prompt`, fields) into names the tree declares.
+- Vite aliases, optimizeDeps exclude and tsconfig paths include `@aeon-ui/tree`.
+
+## [1.7.7] - 2026-08-18
+
+### Added
+
+- **Three more primitives in the live section, chosen for chart complexity.** `Slider` is hierarchical — the snapshot reports `interaction.dragging`, so the chart lights the region *and* the leaf inside it while you drag, and an arrow key shows `SET_VALUE` writing context without leaving the state. `FileUpload` runs a real drag-and-drop lifecycle (`idle` / `dragging` / `rejected`), driveable by dragging a file or by sending the same events from buttons. `Toast` is the one chart that moves without you: `visible` carries a delayed `TIMEOUT` that retires it on the machine's own clock.
+- **`useSliderContext`** exported from `@aeon-ui/react`, so a slider's live machine state (including the nested `interaction` value) is readable from inside `Slider.Root` — matching `useAsyncContext` / `useFieldContext` / `useStickyBarContext`.
+
+### Fixed
+
+- **The live chart never highlighted a component's *initial* state.** A late SVG swap replaced the diagram after the highlight was painted, so the first snapshot silently went dark until you interacted. The explorer now repaints when the rendered chart changes.
+- **`valid` also lit up `invalid`.** Node matching compared id substrings, so any state whose name contained another's was highlighted too. Matching is now segment-aware, and a region's `[*]` marker no longer inherits its parent's highlight.
+- **Nested snapshot values are highlighted properly.** A dotted path such as `interaction.dragging` now lights every node on the path, since the ancestors are genuinely active.
+- **Live charts are readable.** The explorer box was short enough that parallel and nested diagrams auto-fit to ~30%; it now has room, and the slider's nested region lays out left-to-right.
+
+## [1.7.6] - 2026-08-18
+
+### Changed
+
+- **Hero video: resolved an apparent contradiction in the narration.** "Nothing else exists" (about the async machine) could read as conflicting with the later child-machine states (broadcasting, seen, mined). The closed-world line is now scoped — "that's this machine's entire world" — and the hierarchy scene opens with the bridge: "Need more states? Charts nest." Transcript re-aligned (61s).
+
+## [1.7.5] - 2026-08-18
+
+### Changed
+
+- **Hero video narration re-recorded for clarity.** "Statechart" is now fed to TTS as "state chart" so it isn't mispronounced (the on-screen subtitle keeps the correct spelling — `speak` overrides audio only, the same mechanism the closing URL already used). The parallel-regions explanation is rebuilt around three plain questions — "Has it been edited? Does it pass? Is it sending?" — and each chart lane now prints its question next to the region name, so the words and the diagram agree. Also clearer: "no in-between states" replaces "no half states", "your CSS targets that attribute" replaces "your styles key off it", and the child machine's middle state is spoken as "seen on the network" rather than a bare "seen". Transcript re-aligned (59s).
+
+## [1.7.4] - 2026-08-18
+
+### Changed
+
+- **Hero video intro now shows the pain, and the ending is de-branded.** The opening scene names the actual symptoms of boolean soup — a mystery spinner with no context, two buttons wired to the same job (`Retry` / `Reload`), and "state is a mess" — instead of an abstract truth count. The narration no longer says the word "dirty" (the state node still shows it, since that's the real machine state). The hierarchy scene presents the nested send flow as "a real example / wallet · send" without naming the product. Transcript re-aligned (57s).
+
+## [1.7.3] - 2026-08-18
+
+### Changed
+
+- **Hero video: plainer intro, glossed jargon, and a real hierarchical chart from a shipping product.** The intro now shows three plain `loading` / `empty` / `error` toggles with what each means in English, instead of prop-name jargon. The parallel-regions scene explains `dirty` outright ("dirty just means the user typed") and prints a plain-English gloss under the composite value. The machine catalog scene is replaced with the send flow from HandCash Desktop: the `sendPayment` chart (`editing → confirming → handoff`) with the `txLifecycle` child machine (`broadcasting → seenInMempool → mined`) nested inside `handoff` — the wallet surface and the breadcrumb (`handoff › broadcasting`) stay in lockstep with the chart. Also fixed a renderer bug where PIL ignored text alpha, so every text fade-in had been popping at full opacity (visible as floating state labels before their nodes appeared). Transcript re-aligned (55s).
+
+## [1.7.2] - 2026-08-18
+
+### Changed
+
+- **New hero video, built from scratch to teach statecharts — not one animated state.** Seven scenes: three booleans producing a screen with a spinner and an error at once; the async machine with every state named and every edge labelled with its event; an event with no matching edge blocked at the door; the field machine's three parallel regions all true at once beside the surface that projects them; `state → data-aeon-state → pixels`; and four components each running their own machine on their own clock. Real system typography (SF / SF Mono), a poster frame from the chart scene, faststart streaming, and re-aligned transcript cues (52s).
+
+## [1.7.1] - 2026-08-18
+
+### Changed
+
+- **Hero video now shows the actual thesis.** Previously the statechart node swept on its own float while the phone face animated separately, so the chart and the screen never agreed. The centrepiece is now one coupled demo: the component face and the highlighted chart node are the same state, driven by a single step timeline, with the causing event (`FETCH`, `RESOLVE`, `REJECT`, `REFRESH`) labelled on the transition edge — the same idea as the live section. The closing card points at "See it live" instead of the removed builder; transcript cues re-aligned.
+
+## [1.7.0] - 2026-08-18
+
+### Added
+
+- **Live section: real components beside the chart that tracks them.** Async, Button, Field, and Dialog run their shipped machines; the Mermaid chart highlights the state the component is actually in and names the event that caused the move. Field reports all three regions at once, because a field has no single state.
+- Machine-accurate diagrams for `buttonLifecycleMachine`, `dialogMachine`, and `fieldMachine`; the async chart now shows its `REFRESH` and re-fetch edges. `aeonDiagrams.test.ts` fails if a chart misses a machine state or invents one.
+
+### Fixed
+
+- **A controlled `Dialog`, `Popover`, or `Menu` could never be opened by its own trigger.** `onOpenChange` reported the resolved prop, so an owner holding `open` never heard the machine's intent — the trigger, escape key, and outside click were all dead. Each root now reports the machine's own transition (and no longer fires on mount).
+
+### Removed
+
+- **The generative app builder is gone** — sandbox, chart→schema compiler, live composer, model client, cost meter, and the `/api/aeon-generate` and `/api/aeon-scrape` endpoints, plus the OpenRouter proxy plugin and its env keys (~6,000 lines). Landing nav, hero, and header CTAs point at the live section.
+- The static "Determinism" diagram section, now that the live charts replace it. `expandActiveStates` lost its builder-specific token aliases.
+
+## [1.6.1] - 2026-08-18
+
+### Changed
+
+- **Builder previews read like designs, not state dumps.** The first screen now leads with the site's own hero headline and description (scraped, never invented); other screens are titled by their state once. Actions promote one primary button and group the rest instead of stacking equal buttons. The app bar no longer repeats the state label the dock already shows.
+- **Device selector is back** — phone / tablet / desktop toggle above the preview, with the desktop frame showing the scraped host in its address bar.
+
+## [1.6.0] - 2026-08-18
+
+### Added
+
+- **Redesign any site from its URL** — paste a domain into the builder and `/api/aeon-scrape` reads the page for its name, description, nav, actions, logo, and `theme-color`. The brand becomes chrome (logo in the app bar, accent palette scoped to the preview) and the page content becomes the prompt. Private and non-HTTP hosts are refused.
+- `builder/projectFaces.ts` — generic chart projection: states become screens, transitions become actions, `collect` demos add a field, `async` demos add an async region.
+- Demo tests now run in CI (`pnpm test`), covering projection, scraping, palette derivation, and a server render of the builder output.
+
+### Changed
+
+- **App builder rebuilt around one input.** Prompt or URL, Build, preview. The starter chips, engine bar, cost meter, inspector tabs, device picker, and build loader are gone.
+- **The model returns a chart and nothing else; the UI is projected from it.** Previously ~1,900 lines of prompt keyword matching decided that "match" meant a dating app, "faq" meant an accordion, and "pong" meant paddles, then filled screens with seeded catalogs, listings, and test stimuli. All of it is deleted, along with the preset app schemas it produced.
+- Empty nav tabs are dropped instead of being filled with placeholder screens, and the offline fallback chart is deliberately shapeless rather than a product guess.
+
+## [1.5.2] - 2026-08-18
+
+### Changed
+
+- **Landing page trimmed to essentials** — removed the pillars grid, the numbered setup box, and the full rule-file dump; the Cursor section is now one command plus a copy button. Hero shows a single install line, the why section keeps only the same-prompt contrast, specs show one chart, and the FAQ is four questions.
+
 ## [1.5.1] - 2026-08-18
 
 ### Added

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "aeon-ui-engine",
-  "version": "1.5.1",
+  "version": "1.9.0",
   "private": false,
   "type": "module",
   "bin": {
-    "aeon-ui": "./packages/cli/dist/bin.js"
+    "aeon-ui": "packages/cli/dist/bin.js"
   },
   "exports": {
     "./vite": "./scripts/vite-aliases.mjs",
@@ -17,6 +17,9 @@
   },
   "files": [
     "packages",
+    "!packages/*/node_modules",
+    "!packages/**/*.test.ts",
+    "!packages/**/*.test.tsx",
     "scripts",
     "tsconfig.base.json",
     "CONSUMER.md",
@@ -34,7 +37,7 @@
     "dev": "pnpm --filter @aeon-ui/demo dev",
     "examples": "pnpm --filter @aeon-ui/examples dev",
     "typecheck": "pnpm -r run typecheck",
-    "test": "pnpm run test:headless",
+    "test": "pnpm run test:headless && pnpm --filter @aeon-ui/demo run test",
     "test:headless": "pnpm run build:headless && pnpm --filter @aeon-ui/core --filter @aeon-ui/primitives --filter @aeon-ui/react run test",
     "changeset": "changeset",
     "version-packages": "changeset version",

package/packages/core/dist/index.d.ts

@@ -159,6 +159,22 @@ declare const composerAnatomy: Record<"root" | "actions" | "input" | "send" | "s
 declare const separatorAnatomy: Record<"root", "root"> & {
     scope: string;
 };
+/** Long-form rich text (rendered markdown). Styles its descendants; no state of its own. */
+declare const proseAnatomy: Record<"root", "root"> & {
+    scope: string;
+};
+/** Multi-line input that grows with its content between `minRows` and `maxRows`. */
+declare const textareaAnatomy: Record<"root", "root"> & {
+    scope: string;
+};
+/** Compact single choice rendered as adjacent buttons; same chart family as Tabs / RadioGroup. */
+declare const segmentGroupAnatomy: Record<"root" | "item", "root" | "item"> & {
+    scope: string;
+};
+/** Copy a value to the clipboard; root state idle | copying | copied | failed. */
+declare const clipboardAnatomy: Record<"root" | "indicator" | "trigger" | "status", "root" | "indicator" | "trigger" | "status"> & {
+    scope: string;
+};
 /** Progress bar — idle / loading / complete on root `data-aeon-state`. */
 declare const progressAnatomy: Record<"root" | "label" | "track" | "range", "root" | "label" | "track" | "range"> & {
     scope: string;
@@ -308,6 +324,67 @@ interface ScrollSnapshot {
 /** Derive overflow + edge states from a scrollable element. */
 declare function getScrollSnapshot(el: HTMLElement): ScrollSnapshot;
 
+/**
+ * Windowed slice of a long list or grid: which items to mount and how much
+ * space stands in for the rest. Geometry, not lifecycle, so like Scroll it is
+ * a pure function over measurements, never a machine.
+ */
+interface ListWindow {
+    /** First mounted item index. */
+    start: number;
+    /** One past the last mounted item index. */
+    end: number;
+    /** Pixels standing in for the rows above the window. */
+    padStart: number;
+    /** Pixels standing in for the rows below the window. */
+    padEnd: number;
+}
+/** The direction a list scrolls: rows down a column, or items along a strip. */
+type ListWindowAxis = 'y' | 'x';
+interface ListWindowInput {
+    total: number;
+    /** Row pitch in pixels along the scroll axis, gap included. */
+    rowExtent: number;
+    /** Items per row; 1 for a list. */
+    columns?: number;
+    /** Rows mounted beyond each edge of the viewport. */
+    overscan?: number;
+    /** How far the list's content has moved past the start of its viewport. */
+    scrolledPast: number;
+    /** Viewport length along the scroll axis. */
+    viewportHeight: number;
+    /** Below this many items the whole list mounts. */
+    minItems?: number;
+}
+/**
+ * Below this, windowing costs more than it saves and a mis-measured row would
+ * visibly shift a short list.
+ */
+declare const LIST_WINDOW_MIN_ITEMS = 60;
+declare function fullListWindow(total: number): ListWindow;
+declare function sameListWindow(a: ListWindow, b: ListWindow): boolean;
+declare function computeListWindow(input: ListWindowInput): ListWindow;
+/** Attribute that marks a spacer, so row measuring skips it. */
+declare const LIST_WINDOW_PAD_ATTR = "data-aeon-window-pad";
+declare function listWindowPadAttrs(edge: 'start' | 'end'): Record<string, string | boolean>;
+/** The element that actually scrolls a list: the nearest ancestor overflowing on the axis, else the window. */
+declare function resolveScrollRoot(el: HTMLElement | null, axis?: ListWindowAxis): HTMLElement | Window;
+declare function scrollRootHeight(root: HTMLElement | Window): number;
+/** Viewport length along the axis. */
+declare function scrollRootExtent(root: HTMLElement | Window, axis?: ListWindowAxis): number;
+declare function scrollRootTop(root: HTMLElement | Window): number;
+/**
+ * How far the list's content has moved past the viewport. A list that is its
+ * own scroll root reports its scroll offset: subtracting its own edge from
+ * itself is always 0, which kept the first rows mounted while the scrollbar
+ * travelled through the end spacer.
+ */
+declare function scrollRootScrolledPast(root: HTMLElement | Window, list: HTMLElement, axis?: ListWindowAxis): number;
+/** Real column count for a grid; 1 for a list. The hint is only a fallback. */
+declare function measureListColumns(style: CSSStyleDeclaration, hint?: number): number;
+/** Row pitch along the axis from a rendered row, so spacers match what is on screen. */
+declare function measureListRowExtent(list: HTMLElement, style: CSSStyleDeclaration, hint: number, rowSelector?: string, axis?: ListWindowAxis): number;
+
 /**
  * Responsive play-surface layout — logical coordinate plane + composition modes.
  *
@@ -530,4 +607,42 @@ declare function identiconColor(seed: string): {
 /** SVG data URL for `<img src>` / CSS background. */
 declare function identiconDataUrl(seed: string, size?: number): string;
 
-export { AEON_PRINCIPLE, AEON_THEME_TRANSITION_CLASS, type AeonActor, type AeonColorMode, type AeonContext, type AeonDataAttrs, type AeonEvent, type AeonPalette, type AeonSnapshot, type AeonStateValue, type AeonThemeDefinition, type ApplyBrandPaletteOptions, type BrandPalette, type BrandPaletteInput, DEFAULT_COMPACT_MQ, type FieldFace, type LayoutComposition, type LayoutCompositionSpec, type LayoutMode, NORM_PLANE, type NormOrigin, type NormPoint, type NormRect, type RegionLayoutSlot, type ResponsiveLayoutSpec, type ScrollOverflow, type ScrollSnapshot, UI_IS_FUNCTION_OF_STATE, accordionAnatomy, anatomy, appNavAnatomy, appShellAnatomy, applyAeonTheme, applyBrandPalette, asyncAnatomy, avatarAnatomy, barAnatomy, brandPaletteToCssText, brandPaletteToCssVars, buttonAnatomy, checkboxAnatomy, clampNorm, clientFromNorm, comboboxAnatomy, composerAnatomy, contentAnatomy, conversationAnatomy, dialogAnatomy, entryAnatomy, fieldAnatomy, fieldFace, fieldRegions, fileUploadAnatomy, getCompactMq, getRegionValue, getScrollSnapshot, identiconColor, identiconDataUrl, identiconGrid, identiconSeedBytes, identityAnatomy, initAeonTheme, insetNormCluster, isAeonColorMode, isAeonMode, isAeonThemeId, layoutCompositionForMode, layoutModeAttrs, listRowAnatomy, matchLayoutMode, measureElement, menuAnatomy, metricStripAnatomy, navAnatomy, normFromClient, normalizeBrandPalette, panelAnatomy, partAttrs, partOnlyAttrs, pinInputAnatomy, playSurfaceAnatomy, popoverAnatomy, profileHeaderAnatomy, progressAnatomy, promptAnatomy, radioGroupAnatomy, rangeSliderAnatomy, regionBoundsForMode, regionLeaf, regionMatches, regionPath, registerAeonThemes, resolveAeonColorMode, resolveRegionRect, runAeonThemeTransition, scopeAttrs, scrollAnatomy, selectAnatomy, separatorAnatomy, sliderAnatomy, stateToAttr, statusBannerAnatomy, switchAnatomy, syncAeonColorMode, tabsAnatomy, themeSwitcherAnatomy, threadAnatomy, toastAnatomy, tooltipAnatomy };
+/**
+ * Short UI sounds synthesized with Web Audio: no files to ship or license.
+ * Silent until an app calls `configureSounds({ enabled: true })`.
+ */
+type SoundName = 'tap' | 'copy' | 'send' | 'success' | 'attention' | 'error' | 'ready';
+interface Tone {
+    /** Start frequency in Hz. */
+    freq: number;
+    /** End frequency in Hz; glides from `freq` over the tone. */
+    to?: number;
+    /** Offset from the sound's start, in seconds. */
+    at: number;
+    /** Time to fade out, in seconds. */
+    duration: number;
+    type?: OscillatorType;
+    /** Peak gain before the master volume, 0 to 1. */
+    gain: number;
+}
+declare const soundPresets: Record<SoundName, readonly Tone[]>;
+interface SoundSettings {
+    enabled: boolean;
+    /** Master volume, 0 to 1. */
+    volume: number;
+}
+/** The slice of `AudioContext` the player uses; tests pass a fake. */
+type SoundContext = Pick<AudioContext, 'currentTime' | 'state' | 'resume' | 'createOscillator' | 'createGain' | 'createBiquadFilter' | 'destination'>;
+interface SoundPlayer {
+    play(name: SoundName): void;
+    configure(settings: Partial<SoundSettings>): void;
+    settings(): SoundSettings;
+}
+declare function createSoundPlayer(createContext?: () => SoundContext | null, initial?: Partial<SoundSettings>): SoundPlayer;
+/** Play a preset through the shared player; a no-op while sounds are off. */
+declare const playSound: (name: SoundName) => void;
+/** Turn the shared player on or off and set its volume. */
+declare const configureSounds: (settings: Partial<SoundSettings>) => void;
+declare const soundSettings: () => SoundSettings;
+
+export { AEON_PRINCIPLE, AEON_THEME_TRANSITION_CLASS, type AeonActor, type AeonColorMode, type AeonContext, type AeonDataAttrs, type AeonEvent, type AeonPalette, type AeonSnapshot, type AeonStateValue, type AeonThemeDefinition, type ApplyBrandPaletteOptions, type BrandPalette, type BrandPaletteInput, DEFAULT_COMPACT_MQ, type FieldFace, LIST_WINDOW_MIN_ITEMS, LIST_WINDOW_PAD_ATTR, type LayoutComposition, type LayoutCompositionSpec, type LayoutMode, type ListWindow, type ListWindowAxis, type ListWindowInput, NORM_PLANE, type NormOrigin, type NormPoint, type NormRect, type RegionLayoutSlot, type ResponsiveLayoutSpec, type ScrollOverflow, type ScrollSnapshot, type SoundContext, type SoundName, type SoundPlayer, type SoundSettings, type Tone, UI_IS_FUNCTION_OF_STATE, accordionAnatomy, anatomy, appNavAnatomy, appShellAnatomy, applyAeonTheme, applyBrandPalette, asyncAnatomy, avatarAnatomy, barAnatomy, brandPaletteToCssText, brandPaletteToCssVars, buttonAnatomy, checkboxAnatomy, clampNorm, clientFromNorm, clipboardAnatomy, comboboxAnatomy, composerAnatomy, computeListWindow, configureSounds, contentAnatomy, conversationAnatomy, createSoundPlayer, dialogAnatomy, entryAnatomy, fieldAnatomy, fieldFace, fieldRegions, fileUploadAnatomy, fullListWindow, getCompactMq, getRegionValue, getScrollSnapshot, identiconColor, identiconDataUrl, identiconGrid, identiconSeedBytes, identityAnatomy, initAeonTheme, insetNormCluster, isAeonColorMode, isAeonMode, isAeonThemeId, layoutCompositionForMode, layoutModeAttrs, listRowAnatomy, listWindowPadAttrs, matchLayoutMode, measureElement, measureListColumns, measureListRowExtent, menuAnatomy, metricStripAnatomy, navAnatomy, normFromClient, normalizeBrandPalette, panelAnatomy, partAttrs, partOnlyAttrs, pinInputAnatomy, playSound, playSurfaceAnatomy, popoverAnatomy, profileHeaderAnatomy, progressAnatomy, promptAnatomy, proseAnatomy, radioGroupAnatomy, rangeSliderAnatomy, regionBoundsForMode, regionLeaf, regionMatches, regionPath, registerAeonThemes, resolveAeonColorMode, resolveRegionRect, resolveScrollRoot, runAeonThemeTransition, sameListWindow, scopeAttrs, scrollAnatomy, scrollRootExtent, scrollRootHeight, scrollRootScrolledPast, scrollRootTop, segmentGroupAnatomy, selectAnatomy, separatorAnatomy, sliderAnatomy, soundPresets, soundSettings, stateToAttr, statusBannerAnatomy, switchAnatomy, syncAeonColorMode, tabsAnatomy, textareaAnatomy, themeSwitcherAnatomy, threadAnatomy, toastAnatomy, tooltipAnatomy };

package/packages/core/dist/index.js

@@ -4,7 +4,7 @@ var UI_IS_FUNCTION_OF_STATE = "UI = f(state)";
 
 // src/anatomy.ts
 function anatomy(scope, parts) {
-  return Object.fromEntries(parts.map((p) => [p, p]));
+  return { ...Object.fromEntries(parts.map((p) => [p, p])), scope };
 }
 var buttonAnatomy = anatomy("button", [
   "root",
@@ -224,6 +224,10 @@ var composerAnatomy = anatomy("composer", [
   "toolbar"
 ]);
 var separatorAnatomy = anatomy("separator", ["root"]);
+var proseAnatomy = anatomy("prose", ["root"]);
+var textareaAnatomy = anatomy("textarea", ["root"]);
+var segmentGroupAnatomy = anatomy("segmentGroup", ["root", "item"]);
+var clipboardAnatomy = anatomy("clipboard", ["root", "trigger", "indicator", "status"]);
 var progressAnatomy = anatomy("progress", ["root", "track", "range", "label"]);
 var radioGroupAnatomy = anatomy("radioGroup", [
   "root",
@@ -453,6 +457,81 @@ function getScrollSnapshot(el) {
   };
 }
 
+// src/list-window.ts
+var LIST_WINDOW_MIN_ITEMS = 60;
+function fullListWindow(total) {
+  return { start: 0, end: Math.max(0, total), padStart: 0, padEnd: 0 };
+}
+function sameListWindow(a, b) {
+  return a.start === b.start && a.end === b.end && a.padStart === b.padStart && a.padEnd === b.padEnd;
+}
+function computeListWindow(input) {
+  const total = Math.max(0, Math.floor(input.total));
+  const minItems = input.minItems ?? LIST_WINDOW_MIN_ITEMS;
+  const rowExtent = input.rowExtent;
+  if (total < minItems || !(rowExtent > 0)) return fullListWindow(total);
+  const columns = Math.max(1, Math.floor(input.columns ?? 1));
+  const overscan = Math.max(0, Math.floor(input.overscan ?? 8));
+  const rows = Math.ceil(total / columns);
+  const firstRow = Math.max(0, Math.floor(Math.max(0, input.scrolledPast) / rowExtent) - overscan);
+  const visibleRows = Math.ceil(Math.max(0, input.viewportHeight) / rowExtent) + overscan * 2;
+  const startRow = Math.min(firstRow, Math.max(0, rows - visibleRows));
+  const endRow = Math.min(rows, startRow + visibleRows);
+  return {
+    start: startRow * columns,
+    end: Math.min(total, endRow * columns),
+    padStart: startRow * rowExtent,
+    padEnd: Math.max(0, (rows - endRow) * rowExtent)
+  };
+}
+var LIST_WINDOW_PAD_ATTR = "data-aeon-window-pad";
+function listWindowPadAttrs(edge) {
+  return { [LIST_WINDOW_PAD_ATTR]: edge, "aria-hidden": true };
+}
+function resolveScrollRoot(el, axis = "y") {
+  let node = el;
+  while (node) {
+    const style = getComputedStyle(node);
+    const overflow = axis === "x" ? style.overflowX : style.overflowY;
+    if (overflow === "auto" || overflow === "scroll") return node;
+    node = node.parentElement;
+  }
+  return window;
+}
+function scrollRootHeight(root) {
+  return root === window ? window.innerHeight : root.clientHeight;
+}
+function scrollRootExtent(root, axis = "y") {
+  if (axis === "y") return scrollRootHeight(root);
+  return root === window ? window.innerWidth : root.clientWidth;
+}
+function scrollRootTop(root) {
+  return root === window ? 0 : root.getBoundingClientRect().top;
+}
+function scrollRootScrolledPast(root, list, axis = "y") {
+  if (root === list) return axis === "x" ? list.scrollLeft : list.scrollTop;
+  if (axis === "y") return Math.max(0, scrollRootTop(root) - list.getBoundingClientRect().top);
+  const rootLeft = root === window ? 0 : root.getBoundingClientRect().left;
+  return Math.max(0, rootLeft - list.getBoundingClientRect().left);
+}
+function measureListColumns(style, hint = 1) {
+  if (!style.display.includes("grid")) return 1;
+  const tracks = style.gridTemplateColumns.trim();
+  if (!tracks || tracks === "none") return Math.max(1, hint);
+  return Math.max(1, tracks.split(/\s+/).length);
+}
+function measureListRowExtent(list, style, hint, rowSelector, axis = "y") {
+  const row = Array.from(list.children).find(
+    (node) => node instanceof HTMLElement && !node.hasAttribute(LIST_WINDOW_PAD_ATTR) && (!rowSelector || node.matches(rowSelector))
+  );
+  if (!row) return hint;
+  const rect = row.getBoundingClientRect();
+  const size = axis === "x" ? rect.width : rect.height;
+  if (size <= 0) return hint;
+  const gap = Number.parseFloat(axis === "x" ? style.columnGap : style.rowGap);
+  return size + (Number.isFinite(gap) ? gap : 0);
+}
+
 // src/layout.ts
 var NORM_PLANE = {
   bottomLeft: "bottom-left",
@@ -767,10 +846,112 @@ function identiconDataUrl(seed, size = 128) {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}"><rect width="${size}" height="${size}" fill="${bg}"/>` + rects + `</svg>`;
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
 }
+
+// src/sound.ts
+var pluck = (freq, at, duration, gain) => [
+  { freq, at, duration, type: "sine", gain },
+  { freq: freq * 2.76, at, duration: duration * 0.4, type: "sine", gain: gain * 0.05 },
+  { freq: freq * 5.4, at, duration: Math.min(0.03, duration * 0.2), type: "sine", gain: gain * 0.02 }
+];
+var soundPresets = {
+  tap: pluck(880, 0, 0.07, 0.28),
+  copy: [...pluck(784, 0, 0.09, 0.3), ...pluck(1175, 0.06, 0.16, 0.26)],
+  send: [...pluck(587, 0, 0.1, 0.3), ...pluck(880, 0.05, 0.18, 0.26)],
+  success: [...pluck(523, 0, 0.22, 0.28), ...pluck(659, 0.08, 0.24, 0.25), ...pluck(784, 0.16, 0.42, 0.24)],
+  attention: [...pluck(988, 0, 0.16, 0.24), ...pluck(988, 0.15, 0.3, 0.18)],
+  error: [
+    { freq: 392, at: 0, duration: 0.14, type: "triangle", gain: 0.3 },
+    { freq: 311, at: 0.12, duration: 0.24, type: "triangle", gain: 0.28 }
+  ],
+  ready: [...pluck(659, 0, 0.16, 0.22), ...pluck(784, 0.07, 0.18, 0.22), ...pluck(988, 0.14, 0.2, 0.22), ...pluck(1319, 0.21, 0.5, 0.2)]
+};
+var ATTACK = 4e-3;
+var LOWPASS_HZ = 4600;
+var FLOOR = 1e-4;
+var REPEAT_GAP = 0.06;
+var clamp01 = (n) => Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : 0;
+function browserContext() {
+  const Ctor = typeof window === "undefined" ? void 0 : window.AudioContext ?? window.webkitAudioContext;
+  return Ctor ? new Ctor() : null;
+}
+function resumeOnGesture(ctx) {
+  if (typeof window === "undefined") return;
+  const resume = () => {
+    void ctx.resume().catch(() => {
+    });
+    window.removeEventListener("pointerdown", resume, true);
+    window.removeEventListener("keydown", resume, true);
+  };
+  window.addEventListener("pointerdown", resume, true);
+  window.addEventListener("keydown", resume, true);
+}
+function createSoundPlayer(createContext = browserContext, initial = {}) {
+  let current = { enabled: false, volume: 0.5, ...initial };
+  current.volume = clamp01(current.volume);
+  let ctx;
+  let output = null;
+  const lastPlayed = /* @__PURE__ */ new Map();
+  const context = () => {
+    if (ctx === void 0) {
+      try {
+        ctx = createContext();
+      } catch {
+        ctx = null;
+      }
+      if (ctx) {
+        const filter = ctx.createBiquadFilter();
+        filter.type = "lowpass";
+        filter.frequency.value = LOWPASS_HZ;
+        filter.connect(ctx.destination);
+        output = filter;
+        if (ctx.state === "suspended") resumeOnGesture(ctx);
+      }
+    }
+    return ctx;
+  };
+  return {
+    play(name) {
+      if (!current.enabled || current.volume === 0) return;
+      const audio = context();
+      if (!audio || !output || audio.state === "closed") return;
+      const now = audio.currentTime;
+      const last = lastPlayed.get(name);
+      if (last !== void 0 && now - last < REPEAT_GAP) return;
+      lastPlayed.set(name, now);
+      for (const tone of soundPresets[name]) {
+        const start = now + tone.at;
+        const end = start + tone.duration;
+        const osc = audio.createOscillator();
+        const gain = audio.createGain();
+        osc.type = tone.type ?? "sine";
+        osc.frequency.setValueAtTime(tone.freq, start);
+        if (tone.to !== void 0) osc.frequency.exponentialRampToValueAtTime(tone.to, end);
+        gain.gain.setValueAtTime(FLOOR, start);
+        gain.gain.linearRampToValueAtTime(Math.max(FLOOR, tone.gain * current.volume), start + ATTACK);
+        gain.gain.exponentialRampToValueAtTime(FLOOR, end);
+        osc.connect(gain);
+        gain.connect(output);
+        osc.start(start);
+        osc.stop(end + 0.02);
+      }
+    },
+    configure(settings) {
+      current = { ...current, ...settings };
+      current.volume = clamp01(current.volume);
+    },
+    settings: () => ({ ...current })
+  };
+}
+var shared = createSoundPlayer();
+var playSound = (name) => shared.play(name);
+var configureSounds = (settings) => shared.configure(settings);
+var soundSettings = () => shared.settings();
 export {
   AEON_PRINCIPLE,
   AEON_THEME_TRANSITION_CLASS,
   DEFAULT_COMPACT_MQ,
+  LIST_WINDOW_MIN_ITEMS,
+  LIST_WINDOW_PAD_ATTR,
   NORM_PLANE,
   UI_IS_FUNCTION_OF_STATE,
   accordionAnatomy,
@@ -788,17 +969,22 @@ export {
   checkboxAnatomy,
   clampNorm,
   clientFromNorm,
+  clipboardAnatomy,
   comboboxAnatomy,
   composerAnatomy,
+  computeListWindow,
+  configureSounds,
   contentAnatomy,
   conversationAnatomy,
   setup as createAeonMachine,
+  createSoundPlayer,
   dialogAnatomy,
   entryAnatomy,
   fieldAnatomy,
   fieldFace,
   fieldRegions,
   fileUploadAnatomy,
+  fullListWindow,
   getCompactMq,
   getRegionValue,
   getScrollSnapshot,
@@ -815,8 +1001,11 @@ export {
   layoutCompositionForMode,
   layoutModeAttrs,
   listRowAnatomy,
+  listWindowPadAttrs,
   matchLayoutMode,
   measureElement,
+  measureListColumns,
+  measureListRowExtent,
   menuAnatomy,
   metricStripAnatomy,
   navAnatomy,
@@ -826,11 +1015,13 @@ export {
   partAttrs,
   partOnlyAttrs,
   pinInputAnatomy,
+  playSound,
   playSurfaceAnatomy,
   popoverAnatomy,
   profileHeaderAnatomy,
   progressAnatomy,
   promptAnatomy,
+  proseAnatomy,
   radioGroupAnatomy,
   rangeSliderAnatomy,
   regionBoundsForMode,
@@ -840,17 +1031,27 @@ export {
   registerAeonThemes,
   resolveAeonColorMode,
   resolveRegionRect,
+  resolveScrollRoot,
   runAeonThemeTransition,
+  sameListWindow,
   scopeAttrs,
   scrollAnatomy,
+  scrollRootExtent,
+  scrollRootHeight,
+  scrollRootScrolledPast,
+  scrollRootTop,
+  segmentGroupAnatomy,
   selectAnatomy,
   separatorAnatomy,
   sliderAnatomy,
+  soundPresets,
+  soundSettings,
   stateToAttr,
   statusBannerAnatomy,
   switchAnatomy,
   syncAeonColorMode,
   tabsAnatomy,
+  textareaAnatomy,
   themeSwitcherAnatomy,
   threadAnatomy,
   toastAnatomy,

package/packages/core/src/anatomy.ts

@@ -1,6 +1,6 @@
 /** Part keys for compound components — scope + named parts for styling and docs. */
 export function anatomy<const T extends readonly string[]>(scope: string, parts: T) {
-  return Object.fromEntries(parts.map((p) => [p, p])) as Record<T[number], T[number]> & {
+  return { ...Object.fromEntries(parts.map((p) => [p, p])), scope } as Record<T[number], T[number]> & {
     scope: typeof scope
   }
 }
@@ -310,6 +310,18 @@ export const composerAnatomy = anatomy('composer', [
 
 export const separatorAnatomy = anatomy('separator', ['root'] as const)
 
+/** Long-form rich text (rendered markdown). Styles its descendants; no state of its own. */
+export const proseAnatomy = anatomy('prose', ['root'] as const)
+
+/** Multi-line input that grows with its content between `minRows` and `maxRows`. */
+export const textareaAnatomy = anatomy('textarea', ['root'] as const)
+
+/** Compact single choice rendered as adjacent buttons; same chart family as Tabs / RadioGroup. */
+export const segmentGroupAnatomy = anatomy('segmentGroup', ['root', 'item'] as const)
+
+/** Copy a value to the clipboard; root state idle | copying | copied | failed. */
+export const clipboardAnatomy = anatomy('clipboard', ['root', 'trigger', 'indicator', 'status'] as const)
+
 /** Progress bar — idle / loading / complete on root `data-aeon-state`. */
 export const progressAnatomy = anatomy('progress', ['root', 'track', 'range', 'label'] as const)
 

package/packages/core/src/index.ts

@@ -4,7 +4,9 @@ export * from './attrs.js'
 export * from './machine.js'
 export * from './types.js'
 export * from './scroll.js'
+export * from './list-window.js'
 export * from './layout.js'
 export * from './theme.js'
 export * from './brand-theme.js'
 export * from './identicon.js'
+export * from './sound.js'