@aeon-ui/core

DOM contract and anatomy — no React, no XState runtime in components.

Agents: read AGENTS.md and docs/FILE_MAP.md.

Install

pnpm add @aeon-ui/core

Usually consumed via @aeon-ui/react or @aeon-ui/ui.

Exports

| Module | Purpose | |--------|---------| | philosophy | UI_IS_FUNCTION_OF_STATE, AEON_PRINCIPLE | | anatomy | buttonAnatomy, asyncAnatomy, fieldAnatomy, … | | attrs | partAttrs, scopeAttrs, partOnlyAttrs, stateToAttr | | machine | createAeonMachine — XState setup helper | | scroll | getScrollSnapshot(element) | | layout | Normalized coords, ResponsiveLayoutSpec, layoutModeAttrs | | types | Shared types |

Play-surface layout (coordinates)

import {
  playSurfaceAnatomy,
  normFromClient,
  layoutModeAttrs,
  type ResponsiveLayoutSpec,
} from '@aeon-ui/core'

See docs/LAYOUT_COORDINATES.md.

Anatomy

import { asyncAnatomy, partAttrs } from '@aeon-ui/core'

partAttrs(asyncAnatomy.scope, asyncAnatomy.readout, {
  state: 'loading',
})
// → data-aeon-scope="async" data-aeon-part="readout" data-aeon-state="loading"

Parallel regions

import { stateToAttr } from '@aeon-ui/core'

stateToAttr({ interaction: 'dirty', validation: 'invalid', submission: 'idle' })
// → "interaction:dirty validation:invalid submission:idle"

Adding a scope

1. Add myAnatomy = anatomy('my', ['root', ...] as const) in src/anatomy.ts.
2. Use in React via partAttrs.
3. Follow docs/COMPONENT_CHECKLIST.md.

Related

• STATES.md — attribute contract
• packages/primitives/README.md — machines