aeon-ui-engine 1.0.3 → 1.2.0

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

@@ -1,12 +1,13 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, RefObject, ImgHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, RefObject, ImgHTMLAttributes, FormHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as xstate from 'xstate';
 import { AnyStateMachine } from 'xstate';
-import { AsyncContext } from '@aeon-ui/primitives';
-export { createAsyncMachine, fieldMachine } from '@aeon-ui/primitives';
+import { AsyncContext, ContentRegionState, AppNavChild, StickyBarState } from '@aeon-ui/primitives';
+export { AppNavChild, AppNavContext, createAsyncMachine, fieldMachine } from '@aeon-ui/primitives';
 import { useMachine } from '@xstate/react';
-import { ResponsiveLayoutSpec, LayoutMode, LayoutCompositionSpec } from '@aeon-ui/core';
+import { fieldFace, AeonColorMode, ResponsiveLayoutSpec, LayoutMode, LayoutCompositionSpec } from '@aeon-ui/core';
+export { AeonColorMode as AeonMode } from '@aeon-ui/core';
 
 /** Action button lifecycle — see STATES.md and `buttonLifecycleMachine`. */
 type ButtonStatus = 'idle' | 'pending' | 'success' | 'failure' | 'disabled';
@@ -80,6 +81,51 @@ declare const Dialog: {
     CloseTrigger: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 };
 
+type PromptStatus = 'pending' | 'confirming' | 'dismissed' | 'confirmed';
+interface PromptRootProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Projected onto data-aeon-state (default: pending when open). */
+    status?: PromptStatus;
+    children?: ReactNode;
+    className?: string;
+}
+declare const Prompt: {
+    Root: react.ForwardRefExoticComponent<PromptRootProps & react.RefAttributes<HTMLDivElement>>;
+    Trigger: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+    Portal: react.ForwardRefExoticComponent<DialogPortalProps & react.RefAttributes<HTMLDivElement>>;
+    Backdrop: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Positioner: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Content: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLHeadingElement>>;
+    Description: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+    CloseTrigger: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+    Eyebrow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
+    Meta: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDListElement> & react.RefAttributes<HTMLDListElement>>;
+    Amount: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Actions: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Primary: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+    Secondary: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+};
+
+type StatusBannerTone = 'info' | 'success' | 'warning' | 'danger';
+interface StatusBannerRootProps extends HTMLAttributes<HTMLDivElement> {
+    tone?: StatusBannerTone;
+    /** Machine-ish status string projected to data-aeon-state (e.g. ready, downloading). */
+    status?: string;
+    children?: ReactNode;
+}
+/** Non-blocking top-of-app notice (updates, sync, offline). */
+declare const StatusBanner: {
+    Root: react.ForwardRefExoticComponent<StatusBannerRootProps & react.RefAttributes<HTMLDivElement>>;
+    Copy: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
+    Body: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Actions: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Action: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+};
+
 interface TabsRootProps {
     value?: string;
     defaultValue?: string;
@@ -247,10 +293,10 @@ declare const defaultMachine: xstate.StateMachine<AsyncContext<unknown>, {
     type: "RESOLVE";
     data: unknown;
 }, {}, never, {
-    type: "clear";
+    type: "resolve";
     params: xstate.NonReducibleUnknown;
 } | {
-    type: "resolve";
+    type: "clear";
     params: xstate.NonReducibleUnknown;
 } | {
     type: "markStale";
@@ -286,17 +332,14 @@ interface AsyncProviderProps {
 }
 declare function AsyncProvider({ children, machine }: AsyncProviderProps): react_jsx_runtime.JSX.Element;
 
-interface AsyncRegionProps<T = unknown> {
-    children?: ReactNode | ((state: {
-        status: string;
-        data: T | null;
-        error: string | null;
-    }) => ReactNode);
-    className?: string;
-}
-/** @deprecated Prefer `<Async.Root>` with Track, Readout, and Actions. */
-declare function AsyncRegion<T = unknown>({ children, className }: AsyncRegionProps<T>): react_jsx_runtime.JSX.Element;
+/** Map async machine leaf → Content face (product UI — not Track). */
+declare function asyncStatusToContentState(status: string): ContentRegionState;
 
+/**
+ * Async — fetch lifecycle driver (`createAsyncMachine`).
+ * Product UI: project status with Content slots via `asyncStatusToContentState`.
+ * `Track` is a totality/debug rail — not Instant default (see docs/PRIMITIVE_COVERAGE.md).
+ */
 declare const Async: {
     Root: react.ForwardRefExoticComponent<AsyncRootProps & react.RefAttributes<HTMLDivElement>>;
     Provider: typeof AsyncProvider;
@@ -306,7 +349,13 @@ declare const Async: {
 };
 
 interface FieldContextValue {
+    /** Primary visual face — idle | dirty | invalid | pending (same hierarchy as Button). */
+    face: ReturnType<typeof fieldFace>;
+    /** @deprecated Use `face` — kept as an alias for older callers. */
     stateAttr: string;
+    interaction: string;
+    validation: string;
+    submission: string;
     send: ReturnType<typeof useAeonMachine<typeof fieldMachine>>[1];
     invalid: boolean;
     pending: boolean;
@@ -327,6 +376,7 @@ declare const Field: {
     Root: react.ForwardRefExoticComponent<FieldRootProps & react.RefAttributes<HTMLDivElement>>;
     Label: react.ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & react.RefAttributes<HTMLLabelElement>>;
     Control: react.ForwardRefExoticComponent<FieldControlProps & react.RefAttributes<HTMLInputElement>>;
+    Input: react.ForwardRefExoticComponent<FieldControlProps & react.RefAttributes<HTMLInputElement>>;
     Textarea: react.ForwardRefExoticComponent<FieldTextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
     Message: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
     Hint: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
@@ -545,15 +595,472 @@ declare const Toast: {
     Show: typeof Show;
 };
 
+interface ThemeSwitcherRootProps extends HTMLAttributes<HTMLDivElement> {
+    /** Initial theme — overridden by localStorage / system preference. */
+    defaultTheme?: string;
+    /** Initial mode — overridden by localStorage / system preference. */
+    defaultMode?: AeonColorMode;
+    /** Called when theme or mode changes. */
+    onThemeChange?: (themeId: string, mode: AeonColorMode) => void;
+}
+interface ThemeSwitcherModesProps extends HTMLAttributes<HTMLDivElement> {
+}
+interface ThemeSwitcherModeBtnProps extends HTMLAttributes<HTMLButtonElement> {
+    mode: AeonColorMode;
+    active: boolean;
+}
+interface ThemeSwitcherThemeSelectProps extends HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * ThemeSwitcher — headless compound component for theme + mode control.
+ *
+ * Uses `initAeonTheme()` on mount to read localStorage / system preference.
+ * All state changes call `applyAeonTheme()` to update `<html>` dataset attrs.
+ *
+ * @example
+ * <ThemeSwitcher.Root>
+ *   <ThemeSwitcher.Modes>
+ *     <ThemeSwitcher.ModeBtn mode="light" active={mode === 'light'} />
+ *     <ThemeSwitcher.ModeBtn mode="dark" active={mode === 'dark'} />
+ *   </ThemeSwitcher.Modes>
+ *   <ThemeSwitcher.ThemeSelect>
+ *     <ThemeSwitcher.ThemeTrigger />
+ *   </ThemeSwitcher.ThemeSelect>
+ * </ThemeSwitcher.Root>
+ */
+declare const ThemeSwitcher: {
+    Root: react.ForwardRefExoticComponent<ThemeSwitcherRootProps & react.RefAttributes<HTMLDivElement>>;
+    Modes: react.ForwardRefExoticComponent<ThemeSwitcherModesProps & react.RefAttributes<HTMLDivElement>>;
+    ModeBtn: react.ForwardRefExoticComponent<ThemeSwitcherModeBtnProps & react.RefAttributes<HTMLButtonElement>>;
+    ThemeSelect: react.ForwardRefExoticComponent<ThemeSwitcherThemeSelectProps & react.RefAttributes<HTMLDivElement>>;
+    ThemeTrigger: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+};
+
 type AvatarStatus = 'idle' | 'loading' | 'loaded' | 'error';
 interface AvatarRootProps extends HTMLAttributes<HTMLSpanElement> {
     children?: ReactNode;
     className?: string;
 }
+type PresenceState = 'idle' | 'active' | 'away' | 'busy' | 'offline';
 declare const Avatar: {
     Root: react.ForwardRefExoticComponent<AvatarRootProps & react.RefAttributes<HTMLSpanElement>>;
     Image: react.ForwardRefExoticComponent<ImgHTMLAttributes<HTMLImageElement> & react.RefAttributes<HTMLImageElement>>;
     Fallback: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Badge: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
+        presence?: PresenceState;
+    } & react.RefAttributes<HTMLSpanElement>>;
+};
+
+interface IdentityRootProps extends HTMLAttributes<HTMLElement> {
+    as?: 'div' | 'a' | 'button';
+    size?: 'sm' | 'md' | 'lg';
+    children?: ReactNode;
+}
+declare const Identity: {
+    Root: react.ForwardRefExoticComponent<IdentityRootProps & react.RefAttributes<HTMLElement>>;
+    Avatar: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Subtitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Meta: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Trailing: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+};
+
+interface MetricStripRootProps extends HTMLAttributes<HTMLElement> {
+    /** cluster = ultra-dense chips; loose = columnar stats */
+    density?: 'cluster' | 'loose';
+    children?: ReactNode;
+}
+declare const MetricStrip: {
+    Root: react.ForwardRefExoticComponent<MetricStripRootProps & react.RefAttributes<HTMLElement>>;
+    Chip: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Value: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Label: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+};
+
+interface ListRowRootProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    as?: 'button' | 'div' | 'a';
+    children?: ReactNode;
+}
+declare const ListRow: {
+    Root: react.ForwardRefExoticComponent<ListRowRootProps & react.RefAttributes<HTMLElement>>;
+    Leading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Label: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Description: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Trailing: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+};
+
+/** Card face — idle resting · selected highlight · muted de-emphasized. */
+type EntryState = 'idle' | 'selected' | 'muted';
+interface EntryListProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+interface EntryRootProps extends HTMLAttributes<HTMLElement> {
+    as?: 'article' | 'div' | 'li' | 'section';
+    state?: EntryState;
+    children?: ReactNode;
+}
+declare const Entry: {
+    List: react.ForwardRefExoticComponent<EntryListProps & react.RefAttributes<HTMLDivElement>>;
+    Root: react.ForwardRefExoticComponent<EntryRootProps & react.RefAttributes<HTMLElement>>;
+    Header: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+    Leading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+    Heading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+    Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+    Subtitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+    Meta: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+    Media: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+    Body: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+    Values: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+    Value: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+    Actions: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+    Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        as?: "span" | "div" | "footer" | "header" | "p";
+    } & react.RefAttributes<HTMLElement>>;
+};
+
+type ConversationItemState = 'idle' | 'unread' | 'selected';
+interface ConversationRootProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+interface ConversationItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    state?: ConversationItemState;
+    as?: 'button' | 'div' | 'a';
+}
+declare const Conversation: {
+    Root: react.ForwardRefExoticComponent<ConversationRootProps & react.RefAttributes<HTMLElement>>;
+    Item: react.ForwardRefExoticComponent<ConversationItemProps & react.RefAttributes<HTMLElement>>;
+    Leading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Body: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Title: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Preview: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Meta: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Badge: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+};
+
+type ThreadMessageState = 'mine' | 'theirs' | 'pending' | 'failed';
+interface ThreadRootProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+interface ThreadItemProps extends HTMLAttributes<HTMLDivElement> {
+    state?: ThreadMessageState | `${ThreadMessageState} ${string}`;
+}
+declare const Thread: {
+    Root: react.ForwardRefExoticComponent<ThreadRootProps & react.RefAttributes<HTMLElement>>;
+    List: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<ThreadItemProps & react.RefAttributes<HTMLDivElement>>;
+    Bubble: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Meta: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Day: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+};
+
+type ComposerState = 'idle' | 'sending' | 'disabled' | 'error';
+interface ComposerRootProps extends FormHTMLAttributes<HTMLFormElement> {
+    state?: ComposerState;
+    children?: ReactNode;
+}
+declare const Composer: {
+    Root: react.ForwardRefExoticComponent<ComposerRootProps & react.RefAttributes<HTMLFormElement>>;
+    Input: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & react.RefAttributes<HTMLTextAreaElement>>;
+    Actions: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Send: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+};
+
+interface ProfileHeaderRootProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+declare const ProfileHeader: {
+    Root: react.ForwardRefExoticComponent<ProfileHeaderRootProps & react.RefAttributes<HTMLElement>>;
+    Media: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Identity: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Metrics: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Actions: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Body: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+};
+
+interface BarRootProps extends HTMLAttributes<HTMLDivElement> {
+    /** HTML element to render — defaults to `'header'`. */
+    as?: 'header' | 'nav' | 'footer' | 'div';
+    /** Flex gap between zones. */
+    gap?: string;
+}
+interface ZoneProps extends HTMLAttributes<HTMLDivElement> {
+    /** Which zone — controls flex behavior. */
+    zone: Zone;
+}
+type Zone = 'leading' | 'center' | 'trailing';
+declare const Zone: react.ForwardRefExoticComponent<ZoneProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Bar — horizontal layout primitive for toolbars, headers, footers.
+ *
+ * Guarantees no overlap by enforcing a three-zone flex contract:
+ * - **Leading** — `flex: 0 1 auto`, shrinks before overflowing.
+ * - **Center** — `flex: 1 1 0`, absorbs available space, truncates.
+ * - **Trailing** — `flex: 0 1 auto`, shrinks before overflowing.
+ *
+ * The root is always `display: flex; flex-wrap: nowrap` with
+ * `overflow: hidden` so children can never escape the bar boundary.
+ * Responsive collapse is handled by the Panda recipe (min-widths, wrap
+ * at breakpoints) — never by ad-hoc CSS.
+ */
+declare const Bar: {
+    Root: react.ForwardRefExoticComponent<BarRootProps & react.RefAttributes<HTMLDivElement>>;
+    Leading: react.ForwardRefExoticComponent<Omit<ZoneProps, "zone"> & react.RefAttributes<HTMLDivElement>>;
+    Center: react.ForwardRefExoticComponent<Omit<ZoneProps, "zone"> & react.RefAttributes<HTMLDivElement>>;
+    Trailing: react.ForwardRefExoticComponent<Omit<ZoneProps, "zone"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+interface PanelGroupProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: 'horizontal' | 'vertical';
+    children?: ReactNode;
+}
+interface PanelRootProps extends HTMLAttributes<HTMLDivElement> {
+    /** Accessible name; also the collapsed vertical rail text. */
+    label: string;
+    /** Start expanded (default true). */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Whether the panel can collapse (default true). */
+    collapsible?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    children?: ReactNode;
+}
+interface PanelTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+}
+interface PanelLabelProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Override root label text. */
+    children?: ReactNode;
+}
+interface PanelContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Prefer Scroll.Root inside for overflow regions. */
+    children?: ReactNode;
+}
+declare const Panel: {
+    Group: react.ForwardRefExoticComponent<PanelGroupProps & react.RefAttributes<HTMLDivElement>>;
+    Root: react.ForwardRefExoticComponent<PanelRootProps & react.RefAttributes<HTMLDivElement>>;
+    Trigger: react.ForwardRefExoticComponent<PanelTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+    Label: react.ForwardRefExoticComponent<PanelLabelProps & react.RefAttributes<HTMLSpanElement>>;
+    Content: react.ForwardRefExoticComponent<PanelContentProps & react.RefAttributes<HTMLDivElement>>;
+};
+
+type AppShellChrome = 'idle' | 'overlayOpen';
+interface AppShellContextValue {
+    chrome: AppShellChrome;
+    dockVisible: boolean;
+    overlayOpen: boolean;
+    send: ReturnType<typeof useAeonMachine<typeof appShellMachine>>[1];
+}
+declare function useAppShellContext(): AppShellContextValue;
+interface AppShellRootProps extends HTMLAttributes<HTMLDivElement> {
+    /** Initial dock visibility when uncontrolled. */
+    defaultDockVisible?: boolean;
+    /** Controlled dock visibility — syncs into the shell machine. */
+    dockVisible?: boolean;
+    children?: ReactNode;
+}
+/**
+ * AppShell — application chrome frame.
+ * Machine: idle | overlayOpen (+ dockVisible context).
+ * UI = f(snapshot): content dims / scrim when overlayOpen; dock hides when dockVisible=false.
+ */
+declare const AppShell: {
+    Root: react.ForwardRefExoticComponent<AppShellRootProps & react.RefAttributes<HTMLDivElement>>;
+    Header: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        as?: "main" | "div" | "aside" | "footer" | "header";
+    } & react.RefAttributes<HTMLDivElement>>;
+    Subheader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        as?: "main" | "div" | "aside" | "footer" | "header";
+    } & react.RefAttributes<HTMLDivElement>>;
+    Content: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        as?: "main" | "div" | "aside" | "footer" | "header";
+    } & react.RefAttributes<HTMLDivElement>>;
+    Aside: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        as?: "main" | "div" | "aside" | "footer" | "header";
+    } & react.RefAttributes<HTMLDivElement>>;
+    Footer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        as?: "main" | "div" | "aside" | "footer" | "header";
+    } & react.RefAttributes<HTMLDivElement>>;
+    Dock: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Scrim: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+};
+
+interface AppNavContextValue {
+    section: string;
+    stack: AppNavChild[];
+    child: AppNavChild | null;
+    stateAttr: string;
+    send: ReturnType<typeof useAeonMachine<typeof appNavMachine>>[1];
+    setSection: (section: string) => void;
+    push: (child: AppNavChild) => void;
+    replace: (child: AppNavChild) => void;
+    pop: () => void;
+    popTo: (id: string) => void;
+    clear: () => void;
+}
+declare function useAppNav(): AppNavContextValue;
+/** Use the machine without the compound tree. */
+declare function useAppNavMachine(input?: {
+    section?: string;
+    stack?: AppNavChild[];
+}): {
+    section: string;
+    stack: AppNavChild[];
+    child: AppNavChild | null;
+    stateAttr: string;
+    send: (event: {
+        type: "SET_SECTION";
+        section: string;
+    } | {
+        type: "PUSH";
+        child: AppNavChild;
+    } | {
+        type: "REPLACE";
+        child: AppNavChild;
+    } | {
+        type: "POP";
+    } | {
+        type: "POP_TO";
+        id: string;
+    } | {
+        type: "CLEAR";
+    } | {
+        type: "RESET";
+        section: string;
+    }) => void;
+    setSection: (next: string) => void;
+    push: (next: AppNavChild) => void;
+    replace: (next: AppNavChild) => void;
+    pop: () => void;
+    popTo: (id: string) => void;
+    clear: () => void;
+    reset: (next: string) => void;
+};
+interface AppNavRootProps extends HTMLAttributes<HTMLDivElement> {
+    defaultSection?: string;
+    children?: ReactNode;
+}
+interface AppNavSectionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+}
+interface AppNavBreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    /** Labels for section + each stack entry (length = 1 + stack.length). */
+    labels?: string[];
+}
+/**
+ * AppNav — section rail + detail stack.
+ * Machine: SET_SECTION / PUSH / POP / CLEAR. UI = f(section, stack).
+ */
+declare const AppNav: {
+    Root: react.ForwardRefExoticComponent<AppNavRootProps & react.RefAttributes<HTMLDivElement>>;
+    Rail: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
+    Section: react.ForwardRefExoticComponent<AppNavSectionProps & react.RefAttributes<HTMLButtonElement>>;
+    Stage: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Breadcrumb: react.ForwardRefExoticComponent<AppNavBreadcrumbProps & react.RefAttributes<HTMLElement>>;
+    Back: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+};
+
+interface ContentContextValue {
+    state: ContentRegionState;
+    error: string | null;
+    send: ReturnType<typeof useAeonMachine<typeof contentRegionMachine>>[1];
+}
+declare function useContentContext(): ContentContextValue;
+interface ContentRootProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Controlled face — projects parent/app machine onto Content slots
+     * (same pattern as Button `status`). When set, slot visibility uses this
+     * value instead of the internal contentRegionMachine leaf.
+     */
+    state?: ContentRegionState;
+    children?: ReactNode;
+}
+/**
+ * Content — status-slotted region. Machine totality maps 1:1 onto parts.
+ * States: idle | pending | empty | error | ready | loadingMore | success
+ * Drive via contentRegionMachine events, or project with Root `state` prop.
+ */
+declare const Content: {
+    Root: react.ForwardRefExoticComponent<ContentRootProps & react.RefAttributes<HTMLDivElement>>;
+    Toolbar: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Body: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Pending: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Empty: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Error: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Success: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Sentinel: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+};
+
+interface NavRootProps extends HTMLAttributes<HTMLElement> {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    as?: 'nav' | 'div';
+    orientation?: 'horizontal' | 'vertical';
+    children?: ReactNode;
+}
+interface NavItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+}
+/**
+ * Nav — navigational collection (top links, bottom tabs, side rail).
+ * Selection: tabsMachine. Item states: inactive | active | disabled.
+ */
+declare const Nav: {
+    Root: react.ForwardRefExoticComponent<NavRootProps & react.RefAttributes<HTMLElement>>;
+    Item: react.ForwardRefExoticComponent<NavItemProps & react.RefAttributes<HTMLButtonElement>>;
+    Indicator: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Label: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Icon: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+    Badge: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+};
+
+interface StickyBarContextValue {
+    state: StickyBarState;
+    offsetPx: number;
+    send: ReturnType<typeof useAeonMachine<typeof stickyBarMachine>>[1];
+}
+declare function useStickyBarContext(): StickyBarContextValue;
+interface StickyBarRootProps extends HTMLAttributes<HTMLElement> {
+    as?: 'header' | 'nav' | 'footer' | 'div';
+    /** Placement — top | bottom | inline (CSS contract). */
+    placement?: 'top' | 'bottom' | 'inline';
+    /** Initial machine state. */
+    defaultState?: StickyBarState;
+    children?: ReactNode;
+}
+/**
+ * StickyBar — sticky/fixed chrome band with machine totality.
+ * States: floating | docked | collapsed | hidden
+ * Zones reuse bar anatomy (leading / center / trailing / seam).
+ */
+declare const StickyBar: {
+    Root: react.ForwardRefExoticComponent<StickyBarRootProps & react.RefAttributes<HTMLElement>>;
+    Leading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Center: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Trailing: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+    Seam: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 };
 
 declare function useLayoutMode(spec: ResponsiveLayoutSpec): {
@@ -561,4 +1068,16 @@ declare function useLayoutMode(spec: ResponsiveLayoutSpec): {
     composition: LayoutCompositionSpec;
 };
 
-export { Accordion, type AccordionItemContentProps, type AccordionItemProps, type AccordionItemTriggerProps, type AccordionRootProps, Async, AsyncActions, AsyncProvider, AsyncReadout, AsyncRegion, AsyncRoot, AsyncTrack, Avatar, type AvatarRootProps, type AvatarStatus, Button, type ButtonRootProps, type ButtonStatus, Checkbox, type CheckboxRootProps, Combobox, type ComboboxItemProps, type ComboboxRootProps, Dialog, type DialogPortalProps, type DialogRootProps, Field, type FieldControlProps, type FieldRootProps, type FieldTextareaProps, Menu, type MenuItemProps, type MenuPositionerProps, type MenuRootProps, PinInput, type PinInputInputProps, type PinInputRootProps, Popover, type PopoverPositionerProps, type PopoverRootProps, Progress, type ProgressRootProps, RadioGroup, type RadioGroupItemProps, type RadioGroupRootProps, Scroll, type ScrollRootProps, type ScrollViewportProps, Select, type SelectContentProps, type SelectItemProps, type SelectPositionerProps, type SelectRootProps, Separator, type SeparatorRootProps, Slider, type SliderRootProps, Switch, type SwitchRootProps, Tabs, type TabsContentProps, type TabsRootProps, type TabsTriggerProps, Toast, ToastItem, type ToastPlacement, type ToastProviderProps, type ToastPublishOptions, type ToastRecord, type ToastRootProps, type ToastStore, type ToastViewportProps, Tooltip, type TooltipPositionerProps, type TooltipRootProps, useAeonMachine, useAsyncContext, useFieldContext, useLayoutMode, useScrollContext, useScrollState, useToast, useToastStore };
+type FitTextOptions = {
+    maxPx?: number;
+    minPx?: number;
+    /** Re-run when this value changes (e.g. display string). */
+    watch?: unknown;
+};
+/**
+ * Shrink font-size (then scale) so `contentRef` fits inside `slotRef`
+ * without expanding parent layout. Universal for balance rows, titles, tickers.
+ */
+declare function useFitText(slotRef: RefObject<HTMLElement | null>, contentRef: RefObject<HTMLElement | null>, opts?: FitTextOptions): void;
+
+export { Accordion, type AccordionItemContentProps, type AccordionItemProps, type AccordionItemTriggerProps, type AccordionRootProps, AppNav, type AppNavBreadcrumbProps, type AppNavRootProps, type AppNavSectionProps, AppShell, type AppShellRootProps, Async, AsyncActions, AsyncProvider, AsyncReadout, AsyncRoot, AsyncTrack, Avatar, type AvatarRootProps, type AvatarStatus, Bar, type BarRootProps, Button, type ButtonRootProps, type ButtonStatus, Checkbox, type CheckboxRootProps, Combobox, type ComboboxItemProps, type ComboboxRootProps, Composer, type ComposerRootProps, type ComposerState, Content, type ContentRootProps, Conversation, type ConversationItemProps, type ConversationItemState, type ConversationRootProps, Dialog, type DialogPortalProps, type DialogRootProps, Entry, type EntryListProps, type EntryRootProps, type EntryState, Field, type FieldControlProps, type FieldRootProps, type FieldTextareaProps, Identity, type IdentityRootProps, ListRow, type ListRowRootProps, Menu, type MenuItemProps, type MenuPositionerProps, type MenuRootProps, MetricStrip, type MetricStripRootProps, Nav, type NavItemProps, type NavRootProps, Panel, type PanelContentProps, type PanelGroupProps, type PanelLabelProps, type PanelRootProps, type PanelTriggerProps, PinInput, type PinInputInputProps, type PinInputRootProps, Popover, type PopoverPositionerProps, type PopoverRootProps, type PresenceState, ProfileHeader, type ProfileHeaderRootProps, Progress, type ProgressRootProps, Prompt, type PromptRootProps, type PromptStatus, RadioGroup, type RadioGroupItemProps, type RadioGroupRootProps, Scroll, type ScrollRootProps, type ScrollViewportProps, Select, type SelectContentProps, type SelectItemProps, type SelectPositionerProps, type SelectRootProps, Separator, type SeparatorRootProps, Slider, type SliderRootProps, StatusBanner, type StatusBannerRootProps, type StatusBannerTone, StickyBar, type StickyBarRootProps, Switch, type SwitchRootProps, Tabs, type TabsContentProps, type TabsRootProps, type TabsTriggerProps, ThemeSwitcher, type ThemeSwitcherModeBtnProps, type ThemeSwitcherModesProps, type ThemeSwitcherRootProps, type ThemeSwitcherThemeSelectProps, Thread, type ThreadItemProps, type ThreadMessageState, type ThreadRootProps, Toast, ToastItem, type ToastPlacement, type ToastProviderProps, type ToastPublishOptions, type ToastRecord, type ToastRootProps, type ToastStore, type ToastViewportProps, Tooltip, type TooltipPositionerProps, type TooltipRootProps, asyncStatusToContentState, useAeonMachine, useAppNav, useAppNavMachine, useAppShellContext, useAsyncContext, useContentContext, useFieldContext, useFitText, useLayoutMode, useScrollContext, useScrollState, useStickyBarContext, useToast, useToastStore };