@a4ui/core 0.24.3 → 0.26.0

package/dist/lib/createOptimistic.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Holds an optimistic value that's updated immediately on `run`, then
+ * reconciled with the resolved (or rolled back on rejected) async result.
+ *
+ * @example
+ * ```ts
+ * const list = createOptimistic<Todo[]>([])
+ * async function addTodo(todo: Todo) {
+ *   await list.run([...list.value(), todo], () => api.addTodo(todo))
+ * }
+ * ```
+ */
+export declare function createOptimistic<T>(initial: T): {
+    value: () => T;
+    pending: () => boolean;
+    run: (optimistic: T, commit: () => Promise<T>) => Promise<T>;
+};

package/dist/lib/easing.d.ts

@@ -0,0 +1,42 @@
+/** Named cubic-bezier easing curves, as CSS `transition-timing-function` strings. */
+export declare const EASE: {
+    /** Gentle ease-out — the sensible default for entrances and most UI motion. */
+    readonly out: "cubic-bezier(0.22, 1, 0.36, 1)";
+    /** Balanced ease-in-out for reversible state toggles. */
+    readonly inOut: "cubic-bezier(0.65, 0, 0.35, 1)";
+    /** Emphasized, decisive curve (fast start, long settle) for hero moments. */
+    readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)";
+    /** No easing. */
+    readonly linear: "linear";
+};
+/** A key of {@link EASE}. */
+export type EaseName = keyof typeof EASE;
+/**
+ * Spring option presets for the `spring` helper (motion.dev), re-exported from
+ * `@a4ui/core`. Pass one straight through:
+ *
+ * @example
+ * ```ts
+ * import { animate, spring, SPRING } from '@a4ui/core'
+ * animate(el, { y: 0 }, { type: spring, ...SPRING.snappy })
+ * ```
+ */
+export declare const SPRING: {
+    /** Soft, natural settle — good for panels and layout shifts. */
+    readonly gentle: {
+        readonly stiffness: 170;
+        readonly damping: 26;
+    };
+    /** Quick and tight, minimal overshoot — good for toggles and small controls. */
+    readonly snappy: {
+        readonly stiffness: 320;
+        readonly damping: 30;
+    };
+    /** Playful overshoot — good for playful accents. Use sparingly. */
+    readonly bouncy: {
+        readonly stiffness: 420;
+        readonly damping: 18;
+    };
+};
+/** A key of {@link SPRING}. */
+export type SpringName = keyof typeof SPRING;

package/dist/lib/viewTransition.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Run `update` inside a View Transition when the browser supports it, so DOM
+ * changes cross-fade automatically; otherwise just run `update` synchronously.
+ * Respects reduced-motion (skips the transition).
+ * @example
+ * startViewTransition(() => setRoute('details'))
+ */
+export declare function startViewTransition(update: () => void): void;

package/dist/ui/ArtifactPanel.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'solid-js';
+export interface ArtifactPanelProps {
+    open: boolean;
+    onClose?: () => void;
+    title?: string;
+    /** Panel width in px when open. @default 420 */
+    width?: number;
+    children: JSX.Element;
+    class?: string;
+}
+/**
+ * Right-side split panel that holds generated output (code, preview, doc) next
+ * to a chat — for AI UIs that keep the artifact and the conversation visible at
+ * once. Inline, not an overlay: place it as the last child of a flex row next
+ * to the main content. Slides open/closed by animating width (and a matching
+ * fade/slide on its content), reduced-motion aware via `motionReduced()`.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false)
+ * <div class="flex h-full">
+ *   <main class="min-w-0 flex-1">…chat…</main>
+ *   <ArtifactPanel open={open()} onClose={() => setOpen(false)} title="script.py">
+ *     <pre class="p-4 text-sm">…generated code…</pre>
+ *   </ArtifactPanel>
+ * </div>
+ * ```
+ */
+export declare function ArtifactPanel(props: ArtifactPanelProps): JSX.Element;

package/dist/ui/CategoryStrip.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+/** A single selectable category: value, label, and optional leading icon. */
+export interface CategoryItem {
+    value: string;
+    label: string;
+    icon?: JSX.Element;
+}
+export interface CategoryStripProps {
+    items: CategoryItem[];
+    value: string;
+    onChange: (value: string) => void;
+    class?: string;
+}
+/**
+ * Horizontally-scrollable row of icon-over-label category tabs with a
+ * bottom-underline indicator on the active item. Left/Right arrow keys move
+ * the selection between items.
+ *
+ * @example
+ * ```tsx
+ * <CategoryStrip items={categories} value={category()} onChange={setCategory} />
+ * ```
+ */
+export declare function CategoryStrip(props: CategoryStripProps): JSX.Element;

package/dist/ui/ChatThread.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface ChatThreadProps {
+    children: JSX.Element;
+    /** Max width of the reading column, in px. Defaults to `768`. */
+    maxWidth?: number;
+    /** Auto-scroll to the newest message on mount and whenever children change. Defaults to `true`. */
+    stickToBottom?: boolean;
+    class?: string;
+}
+/**
+ * Scrollable, centered reading column that stacks chat messages. Layout-only:
+ * it renders whatever is passed as `children`, so pair it with your own
+ * message bubbles/components.
+ *
+ * @example
+ * ```tsx
+ * <ChatThread maxWidth={640}>
+ *   <div>Hi! Ask me anything about your itinerary.</div>
+ *   <div>What's the weather like in Rivertown this weekend?</div>
+ *   <div>Sunny and mild, 18–22°C, light breeze on Saturday.</div>
+ * </ChatThread>
+ * ```
+ */
+export declare function ChatThread(props: ChatThreadProps): JSX.Element;

package/dist/ui/Citation.d.ts

@@ -0,0 +1,44 @@
+import { JSX } from 'solid-js';
+export interface CitationProps {
+    /** The source number shown in the chip, e.g. `1`. */
+    index: number;
+    /** Links out to the source when present (opens in a new tab). */
+    href?: string;
+    /** Shown as a native tooltip and used as the accessible name. */
+    title?: string;
+    class?: string;
+}
+/**
+ * Small inline chip citing a numbered source, meant to sit inside a sentence
+ * right after the claim it backs up.
+ *
+ * @example
+ * ```tsx
+ * <p>
+ *   Glass surfaces use a translucent backdrop blur
+ *   <Citation index={1} href="https://example.com/spec" title="Design spec" />.
+ * </p>
+ * ```
+ */
+export declare function Citation(props: CitationProps): JSX.Element;
+export interface SourceListProps {
+    sources: {
+        title: string;
+        href?: string;
+    }[];
+    class?: string;
+}
+/**
+ * Compact numbered "Sources" block matching the indices used by {@link Citation}.
+ *
+ * @example
+ * ```tsx
+ * <SourceList
+ *   sources={[
+ *     { title: 'Design spec', href: 'https://example.com/spec' },
+ *     { title: 'Internal style guide' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function SourceList(props: SourceListProps): JSX.Element;

package/dist/ui/CodeTabs.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+/** A single tab's content: label, source code, and optional language tag. */
+export interface CodeTab {
+    label: string;
+    code: string;
+    /** Language tag, e.g. `'tsx'`. Not used for highlighting; informational only. */
+    lang?: string;
+}
+export interface CodeTabsProps {
+    tabs: CodeTab[];
+    class?: string;
+}
+/**
+ * Card of tabbed code blocks with a copy button for the active tab, for
+ * showing several code samples or language variants side by side.
+ *
+ * @example
+ * ```tsx
+ * <CodeTabs
+ *   tabs={[
+ *     { label: 'npm', code: 'npm install @a4ui/core' },
+ *     { label: 'pnpm', code: 'pnpm add @a4ui/core' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function CodeTabs(props: CodeTabsProps): JSX.Element;

package/dist/ui/FloatingToolbar.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from 'solid-js';
+export interface FloatingToolbarProps {
+    children: JSX.Element;
+    /** Which edge of the viewport the bar is anchored to. Defaults to `'bottom'`. */
+    position?: 'top' | 'bottom';
+    /** Shrink padding/scale and intensify the glass blur once scrolled past ~24px. Defaults to `true`. */
+    condenseOnScroll?: boolean;
+    class?: string;
+}
+/**
+ * Fixed, horizontally-centered glass toolbar that floats above the page
+ * content. When `condenseOnScroll` is on (the default), it tightens its
+ * padding and scales down slightly once the user scrolls past a small
+ * threshold, mimicking a "Liquid Glass" detached bar. Reduced-motion aware:
+ * the condense change applies instantly, without a transition, when
+ * {@link motionReduced} is true.
+ *
+ * @example
+ * ```tsx
+ * <FloatingToolbar position="bottom">
+ *   <IconButton label="Undo"><UndoIcon /></IconButton>
+ *   <IconButton label="Redo"><RedoIcon /></IconButton>
+ * </FloatingToolbar>
+ * ```
+ */
+export declare function FloatingToolbar(props: FloatingToolbarProps): JSX.Element;

package/dist/ui/InlineSelect.d.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'solid-js';
+export interface InlineSelectOption {
+    value: string;
+    label: string;
+}
+export interface InlineSelectProps {
+    value: string;
+    options: InlineSelectOption[];
+    onChange: (value: string) => void;
+    placeholder?: string;
+    class?: string;
+}
+/**
+ * Edit-in-place select: renders the current value as a clickable chip until
+ * clicked, then swaps to a `Select` for picking a new value. Committing a
+ * choice returns it to text; blurring away or pressing Escape cancels back
+ * to the previous value. Built for status/priority-style editing inline in
+ * rows/tables.
+ *
+ * @example
+ * ```tsx
+ * <InlineSelect
+ *   value={status()}
+ *   options={[
+ *     { value: 'todo', label: 'To do' },
+ *     { value: 'doing', label: 'In progress' },
+ *     { value: 'done', label: 'Done' },
+ *   ]}
+ *   onChange={setStatus}
+ * />
+ * ```
+ */
+export declare function InlineSelect(props: InlineSelectProps): JSX.Element;

package/dist/ui/MasterDetail.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+export interface MasterDetailItem {
+    id: string;
+    label: string;
+    meta?: JSX.Element;
+    detail: JSX.Element;
+}
+export interface MasterDetailProps {
+    items: MasterDetailItem[];
+    /** Controlled selection. Uncontrolled (internal signal, defaults to the first item) when omitted. */
+    selectedId?: string;
+    onSelect?: (id: string) => void;
+    class?: string;
+}
+/**
+ * List + detail-pane layout: a scrollable list of items on the left, the
+ * selected item's detail content on the right. Arrow keys (and Home/End)
+ * move the selection within the list.
+ *
+ * @example
+ * ```tsx
+ * <MasterDetail
+ *   items={messages.map((m) => ({ id: m.id, label: m.subject, meta: <Badge>{m.from}</Badge>, detail: <MessageBody message={m} /> }))}
+ * />
+ * ```
+ */
+export declare function MasterDetail(props: MasterDetailProps): JSX.Element;

package/dist/ui/Message.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+/** Who sent a {@link Message}; drives its subtle visual treatment. */
+export type ChatRole = 'user' | 'assistant' | 'system';
+export interface MessageProps {
+    role: ChatRole;
+    children: JSX.Element;
+    /** Display name shown in the header line. Omitted for `system` messages. */
+    author?: string;
+    /** Small avatar node, e.g. an icon or `<Avatar/>`. Omitted for `system` messages. */
+    avatar?: JSX.Element;
+    /** Preformatted timestamp string, e.g. `'2:45 PM'`. */
+    timestamp?: string;
+    class?: string;
+}
+/**
+ * Full-width chat message row with no bubble: an optional avatar/author
+ * header line followed by a prose content block. Role is differentiated with
+ * subtle, token-based treatment only — `assistant` gets a faint muted panel,
+ * `user` stays plain, `system` is a small centered note.
+ *
+ * @example
+ * ```tsx
+ * <Message role="assistant" author="Nova" timestamp="2:45 PM">
+ *   <p>Here's the summary you asked for.</p>
+ * </Message>
+ * ```
+ */
+export declare function Message(props: MessageProps): JSX.Element;

package/dist/ui/PageTransition.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+/** Transition style for {@link PageTransition}. `slide` adds a small vertical shift. */
+export type PageTransitionMode = 'fade' | 'slide';
+export interface PageTransitionProps {
+    /** Change this value (e.g. a route or view id) to trigger a transition. */
+    key: string | number;
+    children: JSX.Element;
+    /** `fade` = opacity only; `slide` = opacity + small vertical shift. @default 'fade' */
+    mode?: PageTransitionMode;
+    class?: string;
+}
+/**
+ * Cross-fades (or slides) its `children` out and in whenever `key` changes —
+ * for route/view transitions. Driven purely by the `key` prop; pair it with a
+ * router's current path or any view-switch signal. Swaps instantly under
+ * reduced motion.
+ *
+ * @example
+ * ```tsx
+ * <PageTransition key={activeTab()} mode="slide">
+ *   <TabContent id={activeTab()} />
+ * </PageTransition>
+ * ```
+ */
+export declare function PageTransition(props: PageTransitionProps): JSX.Element;

package/dist/ui/PillSearch.d.ts

@@ -0,0 +1,38 @@
+import { JSX } from 'solid-js';
+export interface PillField {
+    /** Stable identifier passed back via {@link PillSearchProps.onFieldClick}. */
+    key: string;
+    /** Small label shown above the value, e.g. `"Where"`. */
+    label: string;
+    /** Current value shown below the label. Falls back to `placeholder` when unset. */
+    value?: string;
+    /** Muted hint shown when `value` is unset. */
+    placeholder?: string;
+}
+export interface PillSearchProps {
+    fields: PillField[];
+    /** Called with the clicked field's `key`. */
+    onFieldClick?: (key: string) => void;
+    /** Called when the round search button is pressed. */
+    onSearch?: () => void;
+    class?: string;
+}
+/**
+ * Rounded-full search bar that packs several fields into segments with a
+ * round primary search button — the classic "Where / When / Who" pattern
+ * compressed into one compact control.
+ *
+ * @example
+ * ```tsx
+ * <PillSearch
+ *   fields={[
+ *     { key: 'where', label: 'Where', value: 'Lisbon' },
+ *     { key: 'when', label: 'When', placeholder: 'Add dates' },
+ *     { key: 'who', label: 'Who', placeholder: 'Add guests' },
+ *   ]}
+ *   onFieldClick={(key) => console.log('open', key)}
+ *   onSearch={() => console.log('search')}
+ * />
+ * ```
+ */
+export declare function PillSearch(props: PillSearchProps): JSX.Element;

package/dist/ui/PromptComposer.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'solid-js';
+export interface PromptComposerProps {
+    value: string;
+    onInput: (value: string) => void;
+    onSubmit: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Small helper text under the field, e.g. model name or a character count. */
+    hint?: JSX.Element;
+    /** Attachment labels/filenames shown as removable chips above the input. */
+    attachments?: string[];
+    onRemoveAttachment?: (index: number) => void;
+    /** When set, shows a paperclip button that calls this on click. */
+    onAttach?: () => void;
+    class?: string;
+}
+/**
+ * The input area for a chat/AI UI: an auto-growing textarea inside a glass
+ * card, removable attachment chips, and a bottom bar with an optional attach
+ * button and a Send button. Fully controlled — the parent owns `value`.
+ * Submits on **Cmd/Ctrl+Enter** or the Send button click.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = createSignal('')
+ * <PromptComposer
+ *   value={value()}
+ *   onInput={setValue}
+ *   onSubmit={(v) => { sendMessage(v); setValue('') }}
+ *   placeholder="Ask anything…"
+ * />
+ * ```
+ */
+export declare function PromptComposer(props: PromptComposerProps): JSX.Element;

package/dist/ui/StreamingText.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from 'solid-js';
+export interface StreamingTextProps {
+    /** The (possibly growing) full text so far. */
+    text: string;
+    /** Whether more text is still coming; shows the blinking caret while `true`. @default true */
+    streaming?: boolean;
+    /** Reveal speed, in characters per second, for newly appended text. @default 120 */
+    speed?: number;
+    class?: string;
+}
+/**
+ * Reveals `text` as it "streams" in: when `text` grows, the newly appended
+ * characters ease in at `speed` chars/sec instead of snapping into place,
+ * with a blinking caret while `streaming`. Already-revealed characters never
+ * re-animate — only the new tail is eased in, so appending to `text` doesn't
+ * replay the whole reveal. Skips the reveal (shows the full text at once)
+ * under reduced motion — the caret still blinks while `streaming` in that
+ * case. `streaming={false}` shows the full text immediately with no caret,
+ * for the final/settled answer.
+ *
+ * @example
+ * ```tsx
+ * <StreamingText text={answer()} streaming={!done()} />
+ * ```
+ */
+export declare function StreamingText(props: StreamingTextProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.24.3",
+  "version": "0.26.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/preset.js

@@ -28,6 +28,26 @@ const glass = plugin(({ addComponents, addVariant }) => {
   // and a darker one on light to keep WCAG AA in both.
   addVariant('light', "[data-theme='light'] &")
   addComponents({
+    // ---- Elevation scale ----
+    // A layered depth system: `.elevation-1..4` for raised surfaces (rising
+    // shadow), `.pressed` for an inset/recessed look. Uses the same `--shadow`
+    // token as the glass surfaces, so it recolors per theme.
+    '.elevation-1': {
+      boxShadow: '0 1px 2px hsl(var(--shadow) / 0.06), 0 1px 3px hsl(var(--shadow) / 0.1)',
+    },
+    '.elevation-2': {
+      boxShadow: '0 2px 4px hsl(var(--shadow) / 0.06), 0 4px 12px hsl(var(--shadow) / 0.12)',
+    },
+    '.elevation-3': {
+      boxShadow: '0 2px 6px hsl(var(--shadow) / 0.08), 0 8px 24px hsl(var(--shadow) / 0.14)',
+    },
+    '.elevation-4': {
+      boxShadow: '0 4px 12px hsl(var(--shadow) / 0.1), 0 16px 40px hsl(var(--shadow) / 0.18)',
+    },
+    '.pressed': {
+      boxShadow: 'inset 0 1px 2px hsl(var(--shadow) / 0.18)',
+    },
+
     // ---- Primary glass surface ----
     '.card': {
       position: 'relative',

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.24.3'
+export const A4UI_VERSION = '0.26.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -33,6 +33,9 @@ export {
 } from './lib/motion'
 export { useMediaQuery } from './lib/media'
 export { remeasureAfterLayout } from './lib/virtual'
+export { createOptimistic } from './lib/createOptimistic'
+export { startViewTransition } from './lib/viewTransition'
+export { EASE, SPRING, type EaseName, type SpringName } from './lib/easing'
 
 // UI components (src/ui) — all 18 extracted. See CLAUDE.md.
 export { Accordion, type AccordionItem } from './ui/Accordion'
@@ -145,6 +148,23 @@ export { Portal, type PortalProps } from './ui/Portal'
 export { Sortable, type SortableProps } from './ui/Sortable'
 export { Clock, type ClockProps } from './ui/Clock'
 
+// Conversation / AI, transitions, and depth surfaces (roadmap phase 1).
+export { ChatThread, type ChatThreadProps } from './ui/ChatThread'
+export { Message, type MessageProps, type ChatRole } from './ui/Message'
+export { StreamingText, type StreamingTextProps } from './ui/StreamingText'
+export { Citation, type CitationProps, SourceList, type SourceListProps } from './ui/Citation'
+export { PromptComposer, type PromptComposerProps } from './ui/PromptComposer'
+export { ArtifactPanel, type ArtifactPanelProps } from './ui/ArtifactPanel'
+export { FloatingToolbar, type FloatingToolbarProps } from './ui/FloatingToolbar'
+export { PageTransition, type PageTransitionProps } from './ui/PageTransition'
+export { InlineSelect, type InlineSelectProps, type InlineSelectOption } from './ui/InlineSelect'
+
+// Phase 2 — code, search, navigation, master-detail.
+export { CodeTabs, type CodeTabsProps, type CodeTab } from './ui/CodeTabs'
+export { PillSearch, type PillSearchProps, type PillField } from './ui/PillSearch'
+export { CategoryStrip, type CategoryStripProps, type CategoryItem } from './ui/CategoryStrip'
+export { MasterDetail, type MasterDetailProps, type MasterDetailItem } from './ui/MasterDetail'
+
 // Motion components (src/ui) — animation primitives built on the `motion` engine
 // (adapted from motion.dev examples). All tree-shakeable and reduced-motion aware;
 // `motion` is external, so importing one of these is the only thing that pulls it.

package/src/lib/createOptimistic.ts

@@ -0,0 +1,43 @@
+// Optimistic-update helper: show a value immediately, then reconcile with the
+// real async result. On failure, rolls back to the previous settled value and
+// rethrows so callers still see the error (e.g. to show a toast).
+import { createSignal } from 'solid-js'
+
+/**
+ * Holds an optimistic value that's updated immediately on `run`, then
+ * reconciled with the resolved (or rolled back on rejected) async result.
+ *
+ * @example
+ * ```ts
+ * const list = createOptimistic<Todo[]>([])
+ * async function addTodo(todo: Todo) {
+ *   await list.run([...list.value(), todo], () => api.addTodo(todo))
+ * }
+ * ```
+ */
+export function createOptimistic<T>(initial: T): {
+  value: () => T
+  pending: () => boolean
+  run: (optimistic: T, commit: () => Promise<T>) => Promise<T>
+} {
+  const [value, setValue] = createSignal(initial)
+  const [pending, setPending] = createSignal(false)
+
+  async function run(optimistic: T, commit: () => Promise<T>): Promise<T> {
+    const previous = value()
+    setValue(() => optimistic)
+    setPending(true)
+    try {
+      const resolved = await commit()
+      setValue(() => resolved)
+      return resolved
+    } catch (err) {
+      setValue(() => previous)
+      throw err
+    } finally {
+      setPending(false)
+    }
+  }
+
+  return { value, pending, run }
+}

package/src/lib/easing.ts

@@ -0,0 +1,43 @@
+// Shared motion vocabulary — named easing curves and spring presets, so every
+// component transition can pull from one consistent set instead of hand-rolling
+// cubic-beziers. `EASE` values are plain CSS `transition-timing-function`
+// strings (drop into an inline style, a `transition-timing-function`, or a
+// Tailwind `ease-[…]` arbitrary value). `SPRING` values are option objects for
+// the `spring` helper re-exported from `@a4ui/core` (motion.dev).
+
+/** Named cubic-bezier easing curves, as CSS `transition-timing-function` strings. */
+export const EASE = {
+  /** Gentle ease-out — the sensible default for entrances and most UI motion. */
+  out: 'cubic-bezier(0.22, 1, 0.36, 1)',
+  /** Balanced ease-in-out for reversible state toggles. */
+  inOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
+  /** Emphasized, decisive curve (fast start, long settle) for hero moments. */
+  emphasized: 'cubic-bezier(0.2, 0, 0, 1)',
+  /** No easing. */
+  linear: 'linear',
+} as const
+
+/** A key of {@link EASE}. */
+export type EaseName = keyof typeof EASE
+
+/**
+ * Spring option presets for the `spring` helper (motion.dev), re-exported from
+ * `@a4ui/core`. Pass one straight through:
+ *
+ * @example
+ * ```ts
+ * import { animate, spring, SPRING } from '@a4ui/core'
+ * animate(el, { y: 0 }, { type: spring, ...SPRING.snappy })
+ * ```
+ */
+export const SPRING = {
+  /** Soft, natural settle — good for panels and layout shifts. */
+  gentle: { stiffness: 170, damping: 26 },
+  /** Quick and tight, minimal overshoot — good for toggles and small controls. */
+  snappy: { stiffness: 320, damping: 30 },
+  /** Playful overshoot — good for playful accents. Use sparingly. */
+  bouncy: { stiffness: 420, damping: 18 },
+} as const
+
+/** A key of {@link SPRING}. */
+export type SpringName = keyof typeof SPRING