aeon-ui-engine 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # 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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "aeon-ui-engine",
-  "version": "1.8.0",
+  "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",

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'

package/packages/core/src/list-window.ts

@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+
+export 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. */
+export type ListWindowAxis = 'y' | 'x'
+
+export 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.
+ */
+export const LIST_WINDOW_MIN_ITEMS = 60
+
+export function fullListWindow(total: number): ListWindow {
+  return { start: 0, end: Math.max(0, total), padStart: 0, padEnd: 0 }
+}
+
+export function sameListWindow(a: ListWindow, b: ListWindow): boolean {
+  return a.start === b.start && a.end === b.end && a.padStart === b.padStart && a.padEnd === b.padEnd
+}
+
+export function computeListWindow(input: ListWindowInput): ListWindow {
+  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),
+  }
+}
+
+/** Attribute that marks a spacer, so row measuring skips it. */
+export const LIST_WINDOW_PAD_ATTR = 'data-aeon-window-pad'
+
+export function listWindowPadAttrs(edge: 'start' | 'end'): Record<string, string | boolean> {
+  return { [LIST_WINDOW_PAD_ATTR]: edge, 'aria-hidden': true }
+}
+
+/** The element that actually scrolls a list: the nearest ancestor overflowing on the axis, else the window. */
+export function resolveScrollRoot(el: HTMLElement | null, axis: ListWindowAxis = 'y'): HTMLElement | Window {
+  let node: HTMLElement | null = 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
+}
+
+export function scrollRootHeight(root: HTMLElement | Window): number {
+  return root === window ? window.innerHeight : (root as HTMLElement).clientHeight
+}
+
+/** Viewport length along the axis. */
+export function scrollRootExtent(root: HTMLElement | Window, axis: ListWindowAxis = 'y'): number {
+  if (axis === 'y') return scrollRootHeight(root)
+  return root === window ? window.innerWidth : (root as HTMLElement).clientWidth
+}
+
+export function scrollRootTop(root: HTMLElement | Window): number {
+  return root === window ? 0 : (root as HTMLElement).getBoundingClientRect().top
+}
+
+/**
+ * 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.
+ */
+export function scrollRootScrolledPast(
+  root: HTMLElement | Window,
+  list: HTMLElement,
+  axis: ListWindowAxis = 'y',
+): number {
+  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 as HTMLElement).getBoundingClientRect().left
+  return Math.max(0, rootLeft - list.getBoundingClientRect().left)
+}
+
+/** Real column count for a grid; 1 for a list. The hint is only a fallback. */
+export function measureListColumns(style: CSSStyleDeclaration, hint = 1): number {
+  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)
+}
+
+/** Row pitch along the axis from a rendered row, so spacers match what is on screen. */
+export function measureListRowExtent(
+  list: HTMLElement,
+  style: CSSStyleDeclaration,
+  hint: number,
+  rowSelector?: string,
+  axis: ListWindowAxis = 'y',
+): number {
+  const row = Array.from(list.children).find(
+    (node): node is HTMLElement =>
+      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)
+}