@a4ui/core 0.32.0 → 0.34.0

package/dist/ui/AudioWaveform.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+export interface AudioWaveformProps {
+    src?: string;
+    peaks?: number[];
+    /** Bar row height in pixels. @default 64 */
+    height?: number;
+    class?: string;
+}
+/**
+ * Waveform of vertical bars driven by an optional hidden `<audio>` element.
+ * Pass `peaks` (numbers in `0..1`) for a real waveform, or omit it for a
+ * deterministic placeholder shape. The played portion (up to
+ * `currentTime / duration`) is highlighted; clicking a bar seeks there. With
+ * no `src`, playback is simulated on a timer for demo purposes.
+ *
+ * @example
+ * ```tsx
+ * <AudioWaveform src="/media/track.mp3" />
+ * <AudioWaveform peaks={[0.2, 0.8, 0.4, 0.9, 0.3]} height={48} />
+ * ```
+ */
+export declare function AudioWaveform(props: AudioWaveformProps): JSX.Element;

package/dist/ui/Callout.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+/** Semantic tone of a {@link Callout}; drives the accent border, tint, and default icon. */
+export type CalloutTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface CalloutProps {
+    /** Visual/semantic tone. Defaults to `'info'`. */
+    tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+    /** Optional bold heading shown above the body. */
+    title?: JSX.Element;
+    /** Overrides the tone's default icon. */
+    icon?: JSX.Element;
+    children: JSX.Element;
+    class?: string;
+}
+/**
+ * Inline highlighted block for embedding guidance/notes inside prose (docs,
+ * READMEs, long-form content) — a left accent border, a faint tone-tinted
+ * background, and an icon. Unlike {@link Alert} it isn't a dismissible
+ * notification; it's part of the content flow.
+ *
+ * @example
+ * ```tsx
+ * <Callout tone="warning" title="Before you continue">
+ *   This action can't be undone once the migration starts.
+ * </Callout>
+ * ```
+ */
+export declare function Callout(props: CalloutProps): JSX.Element;

package/dist/ui/Confetti.d.ts

@@ -0,0 +1,46 @@
+import { JSX } from 'solid-js';
+export interface ConfettiProps {
+    /** Bump this (e.g. a counter) to fire a burst. Mount does not count. */
+    trigger?: number;
+    /** Number of pieces per burst. @default 80 */
+    count?: number;
+    class?: string;
+}
+/**
+ * Fires one burst of confetti pieces from the bottom-center of `container`,
+ * flying up and outward in a fan, rotating, then falling with gravity and
+ * fading out — each piece removes itself once its animation finishes. Angle,
+ * speed, fall distance and spin are derived deterministically from each
+ * piece's index (Math.sin), so the same `count` always produces the same
+ * fan. `container` should be `position: relative` (or already positioned)
+ * with `overflow: hidden` so pieces don't affect layout. No-op under
+ * {@link motionReduced}. This is the primitive behind {@link Confetti}.
+ *
+ * @example
+ * ```ts
+ * fireConfetti(cardEl, { count: 120 })
+ * ```
+ */
+export declare function fireConfetti(container: HTMLElement, opts?: {
+    count?: number;
+}): void;
+/**
+ * Absolutely-positioned confetti layer: fires a burst of colored pieces from
+ * the bottom-center whenever `trigger` changes (the initial mount does not
+ * fire one). Purely decorative — `pointer-events-none` and `aria-hidden`.
+ * Place it inside a `position: relative` container; pair with a `count`
+ * prop, or reach for {@link fireConfetti} directly to fire into an
+ * arbitrary element outside Solid's render tree.
+ *
+ * @example
+ * ```tsx
+ * const [bursts, setBursts] = createSignal(0)
+ * return (
+ *   <div class="relative h-64">
+ *     <Confetti trigger={bursts()} count={100} />
+ *     <Button onClick={() => setBursts((n) => n + 1)}>Celebrate</Button>
+ *   </div>
+ * )
+ * ```
+ */
+export declare function Confetti(props: ConfettiProps): JSX.Element;

package/dist/ui/CouponField.d.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'solid-js';
+export interface CouponFieldProps {
+    /** Validate/apply a coupon code. Resolve with `{ ok: false }` for a rejected
+     * code — do not throw for expected rejections, only for unexpected failures. */
+    onApply: (code: string) => Promise<{
+        ok: boolean;
+        message?: string;
+        discount?: string;
+    }>;
+    placeholder?: string;
+    class?: string;
+}
+/**
+ * Coupon/promo code input with an "Apply" button. Tracks explicit
+ * idle/loading/success/error state: loading shows a spinner and disables the
+ * input, success shows the applied discount with a way to remove it and try
+ * another code, error shows the failure message inline and lets the user retry.
+ * Rejections are read from the resolved `{ ok: false }` result, not caught
+ * exceptions — an unexpected throw from `onApply` propagates uncaught.
+ *
+ * @example
+ * ```tsx
+ * <CouponField
+ *   onApply={async (code) => {
+ *     const res = await api.applyCoupon(code)
+ *     return res.valid
+ *       ? { ok: true, discount: '-$10' }
+ *       : { ok: false, message: 'That code has expired.' }
+ *   }}
+ * />
+ * ```
+ */
+export declare function CouponField(props: CouponFieldProps): JSX.Element;

package/dist/ui/CursorTrail.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface CursorTrailProps {
+    /** Blob tone. @default 'primary' */
+    color?: 'primary' | 'accent';
+    /** Blob diameter in px. @default 24 */
+    size?: number;
+    class?: string;
+}
+/**
+ * Layer that spawns a soft, blurred blob at the cursor position on every
+ * throttled `pointermove` over its parent, scaling down and fading out as
+ * it removes itself — leaving a trail. Must sit inside a `position:
+ * relative` parent (the layer listens on `parentElement`, since it is
+ * itself `pointer-events-none`). Purely decorative — `pointer-events-none`
+ * and `aria-hidden`. No-op under {@link motionReduced}; listeners are
+ * cleaned up on unmount.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative h-48 rounded-lg border">
+ *   <CursorTrail color="accent" size={32} />
+ * </div>
+ * ```
+ */
+export declare function CursorTrail(props: CursorTrailProps): JSX.Element;

package/dist/ui/DiffViewer.d.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'solid-js';
+/** A single rendered row of a diff. */
+export interface DiffLine {
+    type: 'add' | 'remove' | 'context';
+    content: string;
+    /** Line number in the old file. Present for `'remove'` and `'context'` rows. */
+    oldNum?: number;
+    /** Line number in the new file. Present for `'add'` and `'context'` rows. */
+    newNum?: number;
+}
+export interface DiffViewerProps {
+    /** Unified diff text (as produced by `git diff`/`diff -u`). Ignored if `lines` is set. */
+    diff?: string;
+    /** Pre-parsed diff rows. Takes precedence over `diff`. */
+    lines?: DiffLine[];
+    /** Header label. If omitted, inferred from the `+++`/`---` headers of `diff`, when present. */
+    filename?: string;
+    class?: string;
+}
+/**
+ * Read-only diff block: renders added/removed/context lines with a line-number
+ * gutter and a +/-/space marker. Accepts either a raw unified-diff string
+ * (parsed internally) or pre-parsed {@link DiffLine} rows.
+ *
+ * @example
+ * ```tsx
+ * <DiffViewer
+ *   filename="src/lib/cn.ts"
+ *   diff={`@@ -1,3 +1,3 @@\n-export const cn = (a) => a\n+export const cn = (a, b) => a + b\n context line`}
+ * />
+ * ```
+ */
+export declare function DiffViewer(props: DiffViewerProps): JSX.Element;

package/dist/ui/FollowingPointer.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface FollowingPointerProps {
+    label?: JSX.Element;
+    /** Tone of the custom cursor + label chip. @default 'primary' */
+    color?: 'primary' | 'accent';
+    children: JSX.Element;
+    class?: string;
+}
+/**
+ * Wraps `children` in a `relative` container that hides the native cursor
+ * and renders a custom pointer — a small arrow glyph plus a rounded label
+ * chip in the given tone — that follows the mouse within the container.
+ * Hidden until the pointer enters, hidden again on leave. Under
+ * {@link motionReduced}, the native cursor is kept and nothing custom is
+ * rendered. Listeners are cleaned up on unmount.
+ *
+ * @example
+ * ```tsx
+ * <FollowingPointer label="Alex" color="accent">
+ *   <div class="grid h-48 place-items-center rounded-lg border">Hover me</div>
+ * </FollowingPointer>
+ * ```
+ */
+export declare function FollowingPointer(props: FollowingPointerProps): JSX.Element;

package/dist/ui/GanttChart.d.ts

@@ -0,0 +1,37 @@
+import { JSX } from 'solid-js';
+/** A single bar rendered by {@link GanttChart}. */
+export interface GanttTask {
+    id: string;
+    name: string;
+    /** ISO date, `'YYYY-MM-DD'`. */
+    start: string;
+    /** ISO date, `'YYYY-MM-DD'`. */
+    end: string;
+    /** Ids of tasks that must finish before this one starts; drawn as elbow connectors. */
+    dependencies?: string[];
+    /** Bar color. Defaults to `'primary'`. */
+    tone?: 'primary' | 'accent';
+}
+export interface GanttChartProps {
+    tasks: GanttTask[];
+    class?: string;
+}
+/**
+ * Read-only Gantt chart: a header row of date ticks over a proportional time
+ * axis, one row per task with a colored bar spanning `start`–`end`, elbow
+ * connectors for `dependencies`, and a "today" marker when today falls
+ * within the overall range. Horizontal scroll kicks in when the range is
+ * wide relative to the container.
+ *
+ * @example
+ * ```tsx
+ * <GanttChart
+ *   tasks={[
+ *     { id: 'design', name: 'Design', start: '2026-01-05', end: '2026-01-16', tone: 'accent' },
+ *     { id: 'build', name: 'Build', start: '2026-01-19', end: '2026-02-06', dependencies: ['design'] },
+ *     { id: 'launch', name: 'Launch', start: '2026-02-09', end: '2026-02-10', dependencies: ['build'] },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function GanttChart(props: GanttChartProps): JSX.Element;

package/dist/ui/Globe.d.ts

@@ -0,0 +1,44 @@
+import { JSX } from 'solid-js';
+export interface GlobeMarker {
+    lat: number;
+    lng: number;
+    label?: string;
+}
+export interface GlobeArc {
+    /** [lat, lng] */
+    from: [number, number];
+    /** [lat, lng] */
+    to: [number, number];
+}
+export interface GlobeProps {
+    markers?: GlobeMarker[];
+    arcs?: GlobeArc[];
+    /** Canvas size in CSS px (square). @default 400 */
+    size?: number;
+    /** Spin automatically. @default true (ignored under reduced motion). */
+    autoRotate?: boolean;
+    class?: string;
+}
+/**
+ * A dotted 3D globe drawn on `<canvas>` with plain Canvas 2D (no three.js,
+ * no WebGL): dots come from a deterministic Fibonacci-sphere distribution,
+ * rotate around the Y axis, and project orthographically with depth-scaled
+ * alpha/size. `markers` render as brighter glowing dots (title = label);
+ * `arcs` draw as outward-bulging curves between two front-facing markers,
+ * with a small traveling highlight. Auto-rotates unless `autoRotate={false}`;
+ * drag with the pointer to spin manually. Renders a single static frame
+ * under `motionReduced()` (no auto-rotation; drag still works).
+ *
+ * @example
+ * ```tsx
+ * <Globe
+ *   size={360}
+ *   markers={[
+ *     { lat: 40.7, lng: -74.0, label: 'New York' },
+ *     { lat: 35.7, lng: 139.7, label: 'Tokyo' },
+ *   ]}
+ *   arcs={[{ from: [40.7, -74.0], to: [35.7, 139.7] }]}
+ * />
+ * ```
+ */
+export declare function Globe(props: GlobeProps): JSX.Element;

package/dist/ui/Kanban.d.ts

@@ -0,0 +1,49 @@
+import { JSX } from 'solid-js';
+/** A single card on a {@link Kanban} board. */
+export interface KanbanCard {
+    /** Stable unique id (used for drag tracking + list keying). */
+    id: string;
+    /** Card body — usually a title/label. */
+    title: JSX.Element;
+    /** Optional trailing badge (e.g. priority, assignee initials). */
+    badge?: JSX.Element;
+}
+/** A column of a {@link Kanban} board. */
+export interface KanbanColumn {
+    /** Stable unique id. */
+    id: string;
+    /** Column heading. */
+    title: string;
+    /** Cards in the column, top to bottom. */
+    cards: KanbanCard[];
+    /** Optional WIP limit — the count badge switches to a warning tone past it. */
+    limit?: number;
+}
+export interface KanbanProps {
+    /** Columns, in display order left to right. */
+    columns: KanbanColumn[];
+    /** Called with the full new columns array after any drag (reorder or move). */
+    onChange?: (columns: KanbanColumn[]) => void;
+    class?: string;
+}
+/**
+ * Horizontal Kanban board: glass column panels holding vertical lists of
+ * draggable cards. Drag a card by its grip handle to reorder it within a
+ * column or drop it into another column — a dashed placeholder marks the
+ * drop slot and a floating clone follows the pointer, the same pointer-events
+ * idiom as {@link Sortable} extended to track which column's list the
+ * pointer is currently over. Works controlled (pass `columns` sourced from
+ * your own state + `onChange` to write it back) or uncontrolled (pass
+ * `columns` once and just read the final layout from `onChange`).
+ *
+ * @example
+ * ```tsx
+ * const [columns, setColumns] = createSignal<KanbanColumn[]>([
+ *   { id: 'todo', title: 'To do', cards: [{ id: '1', title: 'Write spec' }] },
+ *   { id: 'doing', title: 'Doing', cards: [], limit: 2 },
+ *   { id: 'done', title: 'Done', cards: [] },
+ * ])
+ * <Kanban columns={columns()} onChange={setColumns} />
+ * ```
+ */
+export declare function Kanban(props: KanbanProps): JSX.Element;

package/dist/ui/Lamp.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+export interface LampProps {
+    children?: JSX.Element;
+    class?: string;
+}
+/**
+ * Hero/section backdrop: a spotlight beam fanning down from the top center —
+ * two symmetric blurred gradient cones (`--primary` / `--accent`) plus a
+ * bright thin source line — over a dark base, with `children` centered in
+ * the illuminated area below. Grows/brightens in on mount via Motion
+ * (opacity + scale); static under {@link motionReduced}. Self-contained
+ * (`relative overflow-hidden`); size it with `class` (e.g. `min-h-[28rem]`).
+ *
+ * @example
+ * ```tsx
+ * <Lamp class="min-h-[28rem]">
+ *   <h1 class="text-4xl font-semibold text-foreground">Build in the light</h1>
+ *   <p class="mt-4 text-muted-foreground">A hero backdrop with a spotlight glow.</p>
+ * </Lamp>
+ * ```
+ */
+export declare function Lamp(props: LampProps): JSX.Element;

package/dist/ui/Lightbox.d.ts

@@ -0,0 +1,41 @@
+import { JSX } from 'solid-js';
+/** One image in a {@link Lightbox}. */
+export interface LightboxImage {
+    src: string;
+    alt?: string;
+    /** Smaller image used in the thumbnail grid/strip; falls back to `src`. */
+    thumb?: string;
+}
+export interface LightboxProps {
+    images: LightboxImage[];
+    /** Controlled overlay open state. When set, wins over internal state — pair with `onOpenChange`. */
+    open?: boolean;
+    /** Controlled active image index (clamped to the images array). When set, wins over internal state — pair with `onIndexChange`. */
+    index?: number;
+    onOpenChange?: (open: boolean) => void;
+    onIndexChange?: (index: number) => void;
+    /** Show the thumbnail strip at the bottom of the overlay. @default true */
+    showThumbnails?: boolean;
+    class?: string;
+}
+/**
+ * Responsive thumbnail grid (`thumb || src`) that opens into a full-screen
+ * viewer on click: the active image centered, prev/next chevrons, a close
+ * button, an alt-text caption, a zoom toggle, and (by default) a thumbnail
+ * strip with the active image highlighted. Navigate with the arrow keys or
+ * Escape, click the backdrop to close. Works controlled
+ * (`open`/`index` + `onOpenChange`/`onIndexChange`) or uncontrolled. Body
+ * scroll locks while open, like `Modal`; the zoom transition is skipped
+ * under `prefers-reduced-motion` but stays fully functional.
+ *
+ * @example
+ * ```tsx
+ * <Lightbox
+ *   images={[
+ *     { src: '/photos/1-full.jpg', thumb: '/photos/1-thumb.jpg', alt: 'Sunset over the bay' },
+ *     { src: '/photos/2-full.jpg', thumb: '/photos/2-thumb.jpg', alt: 'Mountain trail' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Lightbox(props: LightboxProps): JSX.Element;

package/dist/ui/ModelPicker.d.ts

@@ -0,0 +1,38 @@
+import { JSX } from 'solid-js';
+/** A single selectable model in a {@link ModelPicker} menu. */
+export interface ModelOption {
+    id: string;
+    name: string;
+    icon?: JSX.Element;
+    description?: string;
+    badge?: JSX.Element;
+}
+export interface ModelPickerProps {
+    models: ModelOption[];
+    /** Controlled selected model id. Omit and use `defaultValue` for uncontrolled use. */
+    value?: string;
+    /** Initial selected model id when uncontrolled. Ignored if `value` is passed. */
+    defaultValue?: string;
+    onChange?: (id: string) => void;
+    class?: string;
+}
+/**
+ * Dropdown trigger showing the selected model's icon + name + a chevron; the
+ * menu lists every model with icon, name, description, and optional badge,
+ * checkmarking the current selection. Controlled via `value`/`onChange` or
+ * uncontrolled via `defaultValue`, and fully keyboard-navigable (arrow keys,
+ * typeahead, Escape) via Kobalte's `DropdownMenu`.
+ *
+ * @example
+ * ```tsx
+ * <ModelPicker
+ *   models={[
+ *     { id: 'sonnet', name: 'Claude Sonnet', description: 'Balanced speed and quality' },
+ *     { id: 'opus', name: 'Claude Opus', description: 'Most capable', badge: <Badge tone="info">New</Badge> },
+ *   ]}
+ *   defaultValue="sonnet"
+ *   onChange={(id) => console.log('selected', id)}
+ * />
+ * ```
+ */
+export declare function ModelPicker(props: ModelPickerProps): JSX.Element;

package/dist/ui/OnboardingChecklist.d.ts

@@ -0,0 +1,51 @@
+import { JSX } from 'solid-js';
+/** A single step in an {@link OnboardingChecklist}. */
+export interface OnboardingStep {
+    /** Stable identifier, used as the toggle key and `For` item key. */
+    id: string;
+    title: JSX.Element;
+    /** Optional detail shown when the step is expanded. */
+    description?: JSX.Element;
+    /** Whether the step is complete. */
+    done?: boolean;
+    /** Optional call-to-action rendered alongside the description. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export interface OnboardingChecklistProps {
+    steps: OnboardingStep[];
+    /** Called with the step id and its next `done` state when the indicator is toggled. */
+    onToggle?: (id: string, done: boolean) => void;
+    /** Heading shown above the progress summary. Defaults to `'Getting started'`. */
+    title?: JSX.Element;
+    class?: string;
+}
+/**
+ * Card-shaped onboarding/setup checklist: a header with a completion ring and
+ * "{done} of {total} complete" summary, followed by expandable steps. Each
+ * step has a clickable check indicator (toggles `done` via `onToggle`), a
+ * title, and an optional description + CTA revealed on expand. Completion is
+ * controlled by the caller; expansion is local UI state (one step open at a time).
+ *
+ * @example
+ * ```tsx
+ * const [steps, setSteps] = createSignal<OnboardingStep[]>([
+ *   { id: 'profile', title: 'Complete your profile', done: true },
+ *   {
+ *     id: 'invite',
+ *     title: 'Invite a teammate',
+ *     description: 'Collaborate faster by adding at least one teammate.',
+ *     action: { label: 'Invite', onClick: () => openInviteDialog() },
+ *   },
+ * ])
+ * <OnboardingChecklist
+ *   steps={steps()}
+ *   onToggle={(id, done) =>
+ *     setSteps((prev) => prev.map((s) => (s.id === id ? { ...s, done } : s)))
+ *   }
+ * />
+ * ```
+ */
+export declare function OnboardingChecklist(props: OnboardingChecklistProps): JSX.Element;

package/dist/ui/PivotTable.d.ts

@@ -0,0 +1,37 @@
+import { JSX } from 'solid-js';
+/** A single record fed into {@link PivotTable}. */
+export interface PivotDatum {
+    [key: string]: string | number;
+}
+export interface PivotTableProps {
+    data: PivotDatum[];
+    /** Field whose unique values become row headers. */
+    rowField: string;
+    /** Field whose unique values become column headers. */
+    columnField: string;
+    /** Numeric field aggregated into each cell. */
+    valueField: string;
+    /** Aggregation applied per (row, column) bucket. Defaults to 'sum'. */
+    aggregate?: 'sum' | 'count' | 'avg';
+    class?: string;
+}
+/**
+ * Cross-tab table: crosses the unique values of `rowField` and `columnField`,
+ * aggregating `valueField` into each cell (default `'sum'`), plus row/column
+ * totals.
+ *
+ * @example
+ * ```tsx
+ * <PivotTable
+ *   data={[
+ *     { region: 'West', product: 'Widget', revenue: 100 },
+ *     { region: 'West', product: 'Gadget', revenue: 50 },
+ *     { region: 'East', product: 'Widget', revenue: 75 },
+ *   ]}
+ *   rowField="region"
+ *   columnField="product"
+ *   valueField="revenue"
+ * />
+ * ```
+ */
+export declare function PivotTable(props: PivotTableProps): JSX.Element;

package/dist/ui/ReasoningTrace.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+export interface ReasoningTraceProps {
+    /** Reasoning body content; takes precedence over `text` when both are given. */
+    children?: JSX.Element;
+    /** Plain-text reasoning body, rendered with preserved whitespace. */
+    text?: string;
+    /** Header label. Defaults to `'Reasoning'`. */
+    label?: JSX.Element;
+    /** Whether the panel starts expanded. Defaults to `false`. */
+    defaultOpen?: boolean;
+    /** Show a pulsing dot in the header to indicate reasoning is still streaming. */
+    streaming?: boolean;
+    class?: string;
+}
+/**
+ * Collapsible panel for surfacing a model's intermediate "thinking"/reasoning
+ * trace. The header is a toggle button (brain icon + label + rotating
+ * chevron, plus a pulsing dot while `streaming`); the body is a muted,
+ * smaller-text block showing `text` or `children` with whitespace preserved.
+ * Collapsed by default unless `defaultOpen`. Height/opacity transition,
+ * instant under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * <ReasoningTrace streaming text={reasoningSoFar()} />
+ * ```
+ */
+export declare function ReasoningTrace(props: ReasoningTraceProps): JSX.Element;

package/dist/ui/SheetSnap.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'solid-js';
+export interface SheetSnapProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Fractions of viewport height, ascending, e.g. `[0.4, 0.9]`. @default [0.5, 0.9] */
+    snapPoints?: number[];
+    /** Index into `snapPoints` to open at. @default 0 */
+    defaultSnap?: number;
+    children: JSX.Element;
+    class?: string;
+}
+/**
+ * A draggable bottom sheet that rests at one of several height "snap points"
+ * (fractions of viewport height) instead of just open/closed. Drag the handle
+ * to resize with the finger; releasing snaps to the nearest point, biased by
+ * flick velocity (a fast swipe jumps a level), and a hard downward flick/drag
+ * past the lowest point dismisses. Falls back to an instant show/hide at
+ * `defaultSnap` — no drag physics — under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false)
+ * <SheetSnap open={open()} onOpenChange={setOpen} snapPoints={[0.4, 0.9]}>
+ *   <p>Sheet content…</p>
+ * </SheetSnap>
+ * ```
+ */
+export declare function SheetSnap(props: SheetSnapProps): JSX.Element;

package/dist/ui/Snippet.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'solid-js';
+export interface SnippetProps {
+    /** Source text to display and copy. */
+    code: string;
+    /** Optional language tag shown as a small badge, e.g. `'tsx'`. Informational only, no highlighting. */
+    language?: string;
+    class?: string;
+}
+/**
+ * Single inline code block (mono, bordered, scrollable) with a copy button
+ * that morphs into a checkmark for 1.5s after copying. For one code sample —
+ * use {@link CodeTabs} instead when you need several tabs/languages.
+ *
+ * @example
+ * ```tsx
+ * <Snippet language="bash" code="pnpm add @a4ui/core" />
+ * ```
+ */
+export declare function Snippet(props: SnippetProps): JSX.Element;

package/dist/ui/SuggestionChips.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface SuggestionChipsProps {
+    suggestions: string[];
+    onSelect?: (s: string) => void;
+    onDismiss?: (s: string) => void;
+    class?: string;
+}
+/**
+ * Wrapping row of pill chips, e.g. AI-suggested follow-up prompts. Clicking a
+ * chip calls `onSelect`; if `onDismiss` is passed, each chip also shows a
+ * small "x" that removes it without triggering `onSelect`. The select and
+ * dismiss controls are real sibling `<button>`s (not nested — a `<button>`
+ * can't validly contain another interactive element), so both are reachable
+ * and operable independently via Tab/Enter/Space with no extra ARIA wiring.
+ *
+ * @example
+ * ```tsx
+ * <SuggestionChips
+ *   suggestions={['Summarize this', 'Explain like I\'m 5', 'Write tests']}
+ *   onSelect={(s) => sendMessage(s)}
+ *   onDismiss={(s) => setSuggestions((prev) => prev.filter((x) => x !== s))}
+ * />
+ * ```
+ */
+export declare function SuggestionChips(props: SuggestionChipsProps): JSX.Element;