@a4ui/core 0.33.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/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/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/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/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/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/TreeTable.d.ts

@@ -0,0 +1,52 @@
+import { JSX } from 'solid-js';
+/** A column definition for {@link TreeTable}. */
+export interface TreeTableColumn<T> {
+    /** Row data property this column reads when `cell` is omitted. */
+    key: string;
+    /** Column heading content. */
+    header: JSX.Element;
+    /** Custom cell renderer; falls back to `String(row[key])` when omitted. */
+    cell?: (row: T) => JSX.Element;
+    /** Right-align the column (numbers, totals). */
+    align?: 'left' | 'right';
+}
+/** A single node in a {@link TreeTable}; nodes may nest via `children`. */
+export interface TreeTableRow<T> {
+    /** Unique identifier; used to track expanded state. */
+    id: string;
+    /** Row payload passed to each column's `cell` renderer. */
+    data: T;
+    /** Child rows revealed when this row is expanded. */
+    children?: TreeTableRow<T>[];
+}
+export interface TreeTableProps<T> {
+    columns: TreeTableColumn<T>[];
+    rows: TreeTableRow<T>[];
+    /** Expand every row with children on first render. Defaults to false. */
+    defaultExpanded?: boolean;
+    class?: string;
+}
+/**
+ * Hierarchical table: rows may carry `children`, revealed by clicking the
+ * chevron in the first column. Depth is shown via indentation; expanded state
+ * is tracked internally, seeded fully expanded when `defaultExpanded` is set.
+ *
+ * @example
+ * ```tsx
+ * <TreeTable
+ *   defaultExpanded
+ *   columns={[
+ *     { key: 'name', header: 'Name' },
+ *     { key: 'size', header: 'Size', align: 'right', cell: (row) => `${row.size} KB` },
+ *   ]}
+ *   rows={[
+ *     {
+ *       id: 'src',
+ *       data: { name: 'src', size: 0 },
+ *       children: [{ id: 'index', data: { name: 'index.ts', size: 2 } }],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function TreeTable<T>(props: TreeTableProps<T>): JSX.Element;

package/dist/ui/VideoPlayerShell.d.ts

@@ -0,0 +1,19 @@
+import { JSX } from 'solid-js';
+export interface VideoPlayerShellProps {
+    src: string;
+    poster?: string;
+    class?: string;
+}
+/**
+ * Native `<video>` wrapped in a glass shell with fully custom controls: a big
+ * center play/pause, a bottom bar (play/pause, elapsed/duration, a scrub
+ * range, mute toggle, fullscreen, Picture-in-Picture), and a keyboard map
+ * (Space = play/pause, ArrowLeft/Right = seek ±5s). Controls auto-hide while
+ * playing and reappear on pointer movement.
+ *
+ * @example
+ * ```tsx
+ * <VideoPlayerShell src="/media/demo.mp4" poster="/media/demo-poster.jpg" />
+ * ```
+ */
+export declare function VideoPlayerShell(props: VideoPlayerShellProps): JSX.Element;

package/package.json

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

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.33.0'
+export const A4UI_VERSION = '0.34.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -209,6 +209,30 @@ export { Globe, type GlobeMarker, type GlobeArc, type GlobeProps } from './ui/Gl
 export { WorldMap, type WorldMapPoint, type WorldMapConnection, type WorldMapProps } from './ui/WorldMap'
 export { Confetti, fireConfetti, type ConfettiProps } from './ui/Confetti'
 export { CursorTrail, type CursorTrailProps } from './ui/CursorTrail'
+
+// Productivity data views.
+export { Kanban, type KanbanCard, type KanbanColumn, type KanbanProps } from './ui/Kanban'
+export { GanttChart, type GanttTask, type GanttChartProps } from './ui/GanttChart'
+export { TreeTable, type TreeTableColumn, type TreeTableRow, type TreeTableProps } from './ui/TreeTable'
+export { PivotTable, type PivotDatum, type PivotTableProps } from './ui/PivotTable'
+
+// Onboarding + commerce.
+export {
+  OnboardingChecklist,
+  type OnboardingStep,
+  type OnboardingChecklistProps,
+} from './ui/OnboardingChecklist'
+export { CouponField, type CouponFieldProps } from './ui/CouponField'
+
+// Media.
+export { Lightbox, type LightboxImage, type LightboxProps } from './ui/Lightbox'
+export { VideoPlayerShell, type VideoPlayerShellProps } from './ui/VideoPlayerShell'
+export { AudioWaveform, type AudioWaveformProps } from './ui/AudioWaveform'
+
+// Spatial + interaction.
+export { Lamp, type LampProps } from './ui/Lamp'
+export { FollowingPointer, type FollowingPointerProps } from './ui/FollowingPointer'
+export { SheetSnap, type SheetSnapProps } from './ui/SheetSnap'
 export {
   CopyButton,
   type CopyButtonProps,

package/src/ui/AudioWaveform.tsx

@@ -0,0 +1,190 @@
+// Bar-style audio waveform over a hidden native <audio> element — no media
+// library. When no real `peaks` are supplied, a deterministic placeholder
+// waveform is derived from the bar index (abs(sin(...)) blend) so the shape
+// is stable across renders instead of reshuffling on every re-render like
+// Math.random() would.
+import { Pause, Play } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface AudioWaveformProps {
+  src?: string
+  peaks?: number[]
+  /** Bar row height in pixels. @default 64 */
+  height?: number
+  class?: string
+}
+
+const PLACEHOLDER_BAR_COUNT = 48
+// Demo progress rate (fraction of the fake "duration" per animation frame
+// tick) used only when there's no `src` to drive real audio playback.
+const DEMO_TICK_MS = 100
+const DEMO_STEP = 0.01
+
+/** Deterministic placeholder bar heights (0..1), no Math.random. */
+function placeholderPeaks(count: number): number[] {
+  return Array.from({ length: count }, (_, i) => {
+    const a = Math.abs(Math.sin(i * 0.35))
+    const b = Math.abs(Math.sin(i * 0.09 + 1.2))
+    return 0.15 + 0.85 * (0.65 * a + 0.35 * b)
+  })
+}
+
+/**
+ * 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 function AudioWaveform(props: AudioWaveformProps): JSX.Element {
+  let audioRef: HTMLAudioElement | undefined
+
+  const [playing, setPlaying] = createSignal(false)
+  const [currentTime, setCurrentTime] = createSignal(0)
+  const [duration, setDuration] = createSignal(0)
+
+  const bars = createMemo(() => props.peaks ?? placeholderPeaks(PLACEHOLDER_BAR_COUNT))
+  const progress = createMemo(() => (duration() > 0 ? currentTime() / duration() : 0))
+  const barHeight = () => props.height ?? 64
+
+  const togglePlay = (): void => {
+    if (props.src) {
+      const audio = audioRef
+      if (!audio) return
+      if (audio.paused) void audio.play()
+      else audio.pause()
+      return
+    }
+    // No source: drive a fake demo progress instead of real playback.
+    setPlaying((p) => !p)
+  }
+
+  const seekToRatio = (ratio: number): void => {
+    const clamped = Math.min(Math.max(ratio, 0), 1)
+    if (props.src) {
+      const audio = audioRef
+      if (!audio || !duration()) return
+      audio.currentTime = clamped * duration()
+      return
+    }
+    setCurrentTime(clamped * (duration() || 1))
+  }
+
+  const handleBarClick = (index: number): void => {
+    seekToRatio((index + 0.5) / bars().length)
+  }
+
+  onMount(() => {
+    if (props.src) {
+      const audio = audioRef
+      if (!audio) return
+
+      const onPlay = (): void => {
+        setPlaying(true)
+      }
+      const onPause = (): void => {
+        setPlaying(false)
+      }
+      const onTimeUpdate = (): void => {
+        setCurrentTime(audio.currentTime)
+      }
+      const onLoadedMetadata = (): void => {
+        setDuration(audio.duration || 0)
+      }
+
+      audio.addEventListener('play', onPlay)
+      audio.addEventListener('pause', onPause)
+      audio.addEventListener('timeupdate', onTimeUpdate)
+      audio.addEventListener('loadedmetadata', onLoadedMetadata)
+
+      onCleanup(() => {
+        audio.removeEventListener('play', onPlay)
+        audio.removeEventListener('pause', onPause)
+        audio.removeEventListener('timeupdate', onTimeUpdate)
+        audio.removeEventListener('loadedmetadata', onLoadedMetadata)
+      })
+      return
+    }
+
+    // Demo mode: fake a duration and advance currentTime on an interval while playing.
+    setDuration(30)
+    const interval = setInterval(() => {
+      if (!playing() || motionReduced()) return
+      setCurrentTime((t) => {
+        const next = t + DEMO_STEP * duration()
+        if (next >= duration()) {
+          setPlaying(false)
+          return 0
+        }
+        return next
+      })
+    }, DEMO_TICK_MS)
+    onCleanup(() => clearInterval(interval))
+  })
+
+  return (
+    <div class={cn('card flex items-center gap-3 p-3', props.class)}>
+      <Show when={props.src}>
+        <audio ref={audioRef} src={props.src} />
+      </Show>
+
+      <button
+        type="button"
+        aria-label={playing() ? 'Pause' : 'Play'}
+        onClick={togglePlay}
+        class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-transform duration-150 hover:scale-105 active:scale-95"
+      >
+        <Show when={playing()} fallback={<Play class="h-4 w-4 translate-x-0.5" fill="currentColor" />}>
+          <Pause class="h-4 w-4" fill="currentColor" />
+        </Show>
+      </button>
+
+      <div
+        role="slider"
+        aria-label="Waveform position"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={Math.round(progress() * 100)}
+        tabIndex={0}
+        class="flex flex-1 cursor-pointer items-center gap-[2px]"
+        style={{ height: `${barHeight()}px` }}
+        onClick={(event) => {
+          const rect = event.currentTarget.getBoundingClientRect()
+          seekToRatio((event.clientX - rect.left) / rect.width)
+        }}
+      >
+        <For each={bars()}>
+          {(peak, index) => {
+            const played = createMemo(() => index() / bars().length <= progress())
+            return (
+              <button
+                type="button"
+                aria-hidden="true"
+                tabIndex={-1}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  handleBarClick(index())
+                }}
+                class={cn(
+                  'w-full min-w-[2px] flex-1 rounded-full transition-colors duration-150',
+                  played() ? 'bg-primary' : 'bg-muted',
+                )}
+                style={{ height: `${Math.max(peak, 0.06) * 100}%` }}
+              />
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}