@a4ui/core 0.31.1 → 0.33.0

package/src/ui/Globe.tsx

@@ -0,0 +1,317 @@
+// A dotted 3D globe rendered on a single <canvas> with plain Canvas 2D — no
+// three.js, no WebGL. The sphere's dots come from a Fibonacci sphere
+// (deterministic, evenly distributed — no Math.random so the dot field is
+// stable across renders/SSR hydration). Each frame: rotate every point around
+// the Y axis, project orthographically (drop z), keep only front-facing
+// points (z > 0), and scale alpha/size by depth for a cheap "3D" read.
+// Markers/arcs project through the same pipeline so they stay glued to the
+// sphere as it spins. Colors are read from the live theme tokens via
+// getComputedStyle (canvas can't consume `hsl(var(--x))` directly). Follows
+// SpaceBackground's onMount/onCleanup idiom: bind listeners into a cleanups
+// array, cancel the rAF, tear everything down on unmount.
+import { createEffect, onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+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
+}
+
+interface Vec3 {
+  x: number
+  y: number
+  z: number
+}
+
+interface Projected {
+  x: number
+  y: number
+  z: number
+  front: boolean
+}
+
+const DOT_COUNT = 900
+const ROTATE_SPEED = 0.12 // rad/s
+const DRAG_SPEED = 0.012 // rad per px of pointer movement
+
+// Fibonacci sphere: evenly-spaced points on a unit sphere, fully deterministic
+// (no RNG) so the dot field is stable across renders and reproducible in tests.
+function fibonacciSphere(count: number): Vec3[] {
+  const points: Vec3[] = []
+  const goldenAngle = Math.PI * (3 - Math.sqrt(5))
+  for (let i = 0; i < count; i++) {
+    const y = 1 - (i / (count - 1)) * 2 // 1..-1
+    const radius = Math.sqrt(Math.max(0, 1 - y * y))
+    const theta = goldenAngle * i
+    points.push({ x: Math.cos(theta) * radius, y, z: Math.sin(theta) * radius })
+  }
+  return points
+}
+
+const SPHERE_POINTS = fibonacciSphere(DOT_COUNT)
+
+function latLngToVec3(lat: number, lng: number): Vec3 {
+  const latRad = (lat * Math.PI) / 180
+  const lngRad = (lng * Math.PI) / 180
+  return {
+    x: Math.cos(latRad) * Math.sin(lngRad),
+    y: Math.sin(latRad),
+    z: Math.cos(latRad) * Math.cos(lngRad),
+  }
+}
+
+// Rotate around the Y axis and project orthographically to a `radius`-sized
+// disc centered at (cx, cy). z stays in [-1, 1] (front-facing when > 0).
+function project(p: Vec3, angle: number, radius: number, cx: number, cy: number): Projected {
+  const cos = Math.cos(angle)
+  const sin = Math.sin(angle)
+  const x = p.x * cos + p.z * sin
+  const z = -p.x * sin + p.z * cos
+  const y = p.y
+  return { x: cx + x * radius, y: cy - y * radius, z, front: z > 0 }
+}
+
+function resolveColor(canvas: HTMLCanvasElement, token: string, fallback: string): string {
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(token).trim()
+  return raw ? `hsl(${raw})` : fallback
+}
+
+/**
+ * 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 function Globe(props: GlobeProps): JSX.Element {
+  let canvas!: HTMLCanvasElement
+  const size = () => props.size ?? 400
+
+  onMount(() => {
+    const ctx = canvas.getContext('2d')
+    if (!ctx) return
+
+    const cleanups: Array<() => void> = []
+    const bind = (
+      target: EventTarget,
+      type: string,
+      handler: EventListener,
+      opts?: AddEventListenerOptions,
+    ) => {
+      target.addEventListener(type, handler, opts)
+      cleanups.push(() => target.removeEventListener(type, handler, opts))
+    }
+
+    let angle = 0
+    let dragging = false
+    let lastX = 0
+    let rafId = 0
+    let lastTs = 0
+    // Screen-space marker positions from the last draw, for hover hit-testing
+    // (cheap: only a handful of markers, refreshed every frame anyway).
+    let markerHits: Array<{ x: number; y: number; label: string }> = []
+
+    const draw = (): void => {
+      const dpr = window.devicePixelRatio || 1
+      const cssSize = size()
+      const radius = cssSize * 0.42
+      const cx = cssSize / 2
+      const cy = cssSize / 2
+
+      if (canvas.width !== cssSize * dpr || canvas.height !== cssSize * dpr) {
+        canvas.width = cssSize * dpr
+        canvas.height = cssSize * dpr
+        canvas.style.width = `${cssSize}px`
+        canvas.style.height = `${cssSize}px`
+      }
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.clearRect(0, 0, cssSize, cssSize)
+
+      const dotColor = resolveColor(canvas, '--foreground', '210 20% 90%')
+      const markerColor = resolveColor(canvas, '--accent', '200 90% 60%')
+      const arcColor = resolveColor(canvas, '--primary', '250 80% 65%')
+
+      // Base sphere dots, back-to-front isn't needed (no overlap testing) —
+      // just skip anything facing away from the viewer.
+      for (const p of SPHERE_POINTS) {
+        const proj = project(p, angle, radius, cx, cy)
+        if (!proj.front) continue
+        const depth = proj.z // 0..1
+        ctx.beginPath()
+        ctx.fillStyle = dotColor
+        ctx.globalAlpha = 0.15 + depth * 0.55
+        ctx.arc(proj.x, proj.y, 0.6 + depth * 1.2, 0, Math.PI * 2)
+        ctx.fill()
+      }
+      ctx.globalAlpha = 1
+
+      // Arcs: only drawn when both endpoints are currently front-facing.
+      const arcs = props.arcs ?? []
+      for (const arc of arcs) {
+        const from = project(latLngToVec3(arc.from[0], arc.from[1]), angle, radius, cx, cy)
+        const to = project(latLngToVec3(arc.to[0], arc.to[1]), angle, radius, cx, cy)
+        if (!from.front || !to.front) continue
+
+        const mx = (from.x + to.x) / 2
+        const my = (from.y + to.y) / 2
+        // Bulge outward from the sphere center, proportional to the chord length.
+        const dx = mx - cx
+        const dy = my - cy
+        const dist = Math.hypot(dx, dy) || 1
+        const chord = Math.hypot(to.x - from.x, to.y - from.y)
+        const bulge = chord * 0.35
+        const ctrlX = mx + (dx / dist) * bulge
+        const ctrlY = my + (dy / dist) * bulge
+
+        ctx.beginPath()
+        ctx.strokeStyle = arcColor
+        ctx.globalAlpha = 0.55
+        ctx.lineWidth = 1.4
+        ctx.moveTo(from.x, from.y)
+        ctx.quadraticCurveTo(ctrlX, ctrlY, to.x, to.y)
+        ctx.stroke()
+        ctx.globalAlpha = 1
+
+        // Traveling highlight: a bright dot eased along the same quadratic,
+        // looping with the wall clock so it doesn't need its own rAF state.
+        if (!motionReduced()) {
+          const t = (performance.now() / 1600) % 1
+          const it = 1 - t
+          const hx = it * it * from.x + 2 * it * t * ctrlX + t * t * to.x
+          const hy = it * it * from.y + 2 * it * t * ctrlY + t * t * to.y
+          ctx.beginPath()
+          ctx.fillStyle = markerColor
+          ctx.arc(hx, hy, 2.4, 0, Math.PI * 2)
+          ctx.fill()
+        }
+      }
+
+      // Markers: brighter glowing dots, only when front-facing.
+      const markers = props.markers ?? []
+      const hits: typeof markerHits = []
+      for (const marker of markers) {
+        const proj = project(latLngToVec3(marker.lat, marker.lng), angle, radius, cx, cy)
+        if (!proj.front) continue
+        ctx.beginPath()
+        ctx.fillStyle = markerColor
+        ctx.shadowColor = markerColor
+        ctx.shadowBlur = 8
+        ctx.arc(proj.x, proj.y, 3, 0, Math.PI * 2)
+        ctx.fill()
+        ctx.shadowBlur = 0
+        if (marker.label) hits.push({ x: proj.x, y: proj.y, label: marker.label })
+      }
+      markerHits = hits
+    }
+
+    const tick = (ts: number): void => {
+      const dt = lastTs ? (ts - lastTs) / 1000 : 0
+      lastTs = ts
+      if (!dragging && !motionReduced() && props.autoRotate !== false) {
+        angle += ROTATE_SPEED * dt
+      }
+      draw()
+      // Keep animating while auto-rotating, or to refresh the traveling arc
+      // highlight — both are no-ops under reduced motion (frozen frame).
+      if (!motionReduced()) rafId = requestAnimationFrame(tick)
+    }
+
+    if (motionReduced()) {
+      draw() // single static frame
+    } else {
+      rafId = requestAnimationFrame(tick)
+    }
+
+    // Pointer drag to spin manually — works even under reduced motion.
+    const onPointerDown = (e: PointerEvent): void => {
+      dragging = true
+      lastX = e.clientX
+      canvas.setPointerCapture(e.pointerId)
+    }
+    const onPointerMove = (e: PointerEvent): void => {
+      if (!dragging) {
+        // Hover hit-test against the last drawn marker positions → native tooltip.
+        const rect = canvas.getBoundingClientRect()
+        const px = e.clientX - rect.left
+        const py = e.clientY - rect.top
+        const hit = markerHits.find((m) => Math.hypot(m.x - px, m.y - py) <= 6)
+        canvas.title = hit?.label ?? ''
+        return
+      }
+      const dx = e.clientX - lastX
+      lastX = e.clientX
+      angle += dx * DRAG_SPEED
+      if (motionReduced()) draw() // rAF loop is off; redraw explicitly per move
+    }
+    const onPointerUp = (e: PointerEvent): void => {
+      dragging = false
+      if (canvas.hasPointerCapture(e.pointerId)) canvas.releasePointerCapture(e.pointerId)
+    }
+    bind(canvas, 'pointerdown', onPointerDown as EventListener)
+    bind(canvas, 'pointermove', onPointerMove as EventListener)
+    bind(canvas, 'pointerup', onPointerUp as EventListener)
+    bind(canvas, 'pointercancel', onPointerUp as EventListener)
+
+    // Re-render (static frame) if props change while reduced motion holds the
+    // loop frozen — otherwise the rAF loop already picks up prop changes.
+    createEffect(() => {
+      // Track reactive deps: size + reference identity of markers/arcs.
+      void size()
+      void props.markers
+      void props.arcs
+      void props.autoRotate
+      if (motionReduced()) draw()
+    })
+
+    onCleanup(() => {
+      if (rafId) cancelAnimationFrame(rafId)
+      cleanups.forEach((fn) => fn())
+    })
+  })
+
+  return (
+    <canvas
+      ref={canvas}
+      class={cn('touch-none rounded-full select-none', props.class)}
+      width={size()}
+      height={size()}
+      role="img"
+      aria-label="Interactive globe"
+    />
+  )
+}

package/src/ui/Meteors.tsx

@@ -0,0 +1,109 @@
+// Meteors — Aceternity-style decorative meteor shower: thin diagonal streaks
+// that fall down-left and fade, looping with per-meteor stagger. Pure CSS
+// keyframes (injected once into the document head, like LoadingDots) so the
+// motion costs nothing in JS; each meteor's position/delay/duration is derived
+// deterministically from its index (no Math.random, so the layout is
+// reproducible across renders and safe under SSR).
+import { For, type JSX, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface MeteorsProps {
+  /** Number of meteor streaks to render. @default 20 */
+  count?: number
+  class?: string
+}
+
+const STYLE_ID = 'a4ui-meteors-style'
+
+function ensureStyleInjected(): void {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return
+  const style = document.createElement('style')
+  style.id = STYLE_ID
+  style.textContent = `
+@keyframes a4-meteor-fall {
+  0% { transform: rotate(215deg) translateX(0); opacity: 1; }
+  70% { opacity: 1; }
+  100% { transform: rotate(215deg) translateX(-500px); opacity: 0; }
+}
+`
+  document.head.appendChild(style)
+}
+
+/**
+ * Deterministic pseudo-random value in [0, 1) derived from an index via a
+ * sine-based hash. Used to vary each meteor's position/timing without
+ * `Math.random`, so the layout is identical across renders (and SSR-safe).
+ */
+function pseudoRandom(seed: number): number {
+  const x = Math.sin(seed * 12.9898) * 43758.5453
+  return x - Math.floor(x)
+}
+
+/**
+ * Decorative full-cover meteor shower: thin diagonal streaks that fall
+ * down-left and fade, looping with staggered delays and varied start
+ * positions/durations. Purely visual — absolute, `pointer-events-none`,
+ * `aria-hidden` — so it layers behind/inside a `relative overflow-hidden`
+ * container without affecting layout or a11y. Under {@link motionReduced} it
+ * swaps the falling streaks for a handful of static, faint dots.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative overflow-hidden rounded-2xl border border-border p-8">
+ *   <Meteors count={20} />
+ *   <p class="relative">Content sits above the meteors.</p>
+ * </div>
+ * ```
+ */
+export function Meteors(props: MeteorsProps): JSX.Element {
+  ensureStyleInjected()
+
+  const count = () => props.count ?? 20
+  const meteors = () => Array.from({ length: count() })
+  const staticDots = () => Array.from({ length: Math.min(6, count()) })
+
+  return (
+    <div class={cn('pointer-events-none absolute inset-0 overflow-hidden', props.class)} aria-hidden="true">
+      <Show
+        when={!motionReduced()}
+        fallback={
+          <For each={staticDots()}>
+            {(_, i) => (
+              <span
+                class="absolute h-0.5 w-0.5 rounded-full bg-foreground/30"
+                style={{
+                  top: `${pseudoRandom(i() * 2 + 1) * 100}%`,
+                  left: `${pseudoRandom(i() * 2 + 2) * 100}%`,
+                }}
+              />
+            )}
+          </For>
+        }
+      >
+        <For each={meteors()}>
+          {(_, i) => {
+            const left = pseudoRandom(i() * 2 + 1) * 100
+            const delay = pseudoRandom(i() * 2 + 2) * 8
+            const duration = 2 + pseudoRandom(i() * 3 + 5) * 5
+
+            return (
+              <span
+                class={cn(
+                  'absolute top-0 h-0.5 w-0.5 rotate-[215deg] rounded-full bg-foreground',
+                  "before:absolute before:top-1/2 before:h-px before:w-12 before:-translate-y-1/2 before:bg-gradient-to-r before:from-foreground/60 before:to-transparent before:content-['']",
+                )}
+                style={{
+                  left: `${left}%`,
+                  animation: `a4-meteor-fall ${duration}s linear infinite`,
+                  'animation-delay': `${delay}s`,
+                }}
+              />
+            )
+          }}
+        </For>
+      </Show>
+    </div>
+  )
+}

package/src/ui/ModelPicker.tsx

@@ -0,0 +1,119 @@
+// AI model picker — dropdown trigger (icon + name + chevron) over a menu of
+// models (icon + name + description + badge), selected one checkmarked.
+// Built on Kobalte's DropdownMenu (same primitive as Dropdown.tsx), using its
+// RadioGroup/RadioItem for single-select keyboard navigation and a11y
+// (role="menuitemradio", aria-checked) — Dropdown.tsx's own item API only
+// supports a plain string label, not this richer per-option content.
+import { DropdownMenu } from '@kobalte/core/dropdown-menu'
+import { Check, ChevronDown } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show, createSignal, untrack } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** 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 function ModelPicker(props: ModelPickerProps): JSX.Element {
+  // Initial value only: read once (untracked), by design — this seeds the
+  // uncontrolled fallback and must not re-run when `models`/`defaultValue` change later.
+  const [internal, setInternal] = createSignal(untrack(() => props.defaultValue ?? props.models[0]?.id))
+  const selectedId = () => props.value ?? internal()
+  const selectedModel = () => props.models.find((m) => m.id === selectedId())
+
+  const handleChange = (id: string) => {
+    if (props.value === undefined) setInternal(id)
+    props.onChange?.(id)
+  }
+
+  return (
+    <DropdownMenu preventScroll={false}>
+      <DropdownMenu.Trigger
+        class={cn(
+          'inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground outline-none transition-colors a4-field',
+          props.class,
+        )}
+        aria-label="Select model"
+      >
+        <Show when={selectedModel()?.icon}>
+          <span class="flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground">
+            {selectedModel()?.icon}
+          </span>
+        </Show>
+        <span class="truncate font-medium">{selectedModel()?.name}</span>
+        <ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground" />
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content class="z-50 min-w-64 overflow-hidden rounded-md border border-border bg-card p-1 text-card-foreground shadow-sm">
+          <DropdownMenu.RadioGroup value={selectedId()} onChange={handleChange}>
+            <For each={props.models}>
+              {(model) => (
+                <DropdownMenu.RadioItem
+                  value={model.id}
+                  class="flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 outline-none hover:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+                >
+                  <Show when={model.icon}>
+                    <span class="flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground">
+                      {model.icon}
+                    </span>
+                  </Show>
+                  <span class="flex min-w-0 flex-1 flex-col">
+                    <DropdownMenu.ItemLabel class="truncate text-sm text-foreground">
+                      {model.name}
+                    </DropdownMenu.ItemLabel>
+                    <Show when={model.description}>
+                      <DropdownMenu.ItemDescription class="truncate text-xs text-muted-foreground">
+                        {model.description}
+                      </DropdownMenu.ItemDescription>
+                    </Show>
+                  </span>
+                  <Show when={model.badge}>{model.badge}</Show>
+                  <span class="flex h-4 w-4 shrink-0 items-center justify-center text-primary">
+                    <Show when={model.id === selectedId()}>
+                      <Check class="h-4 w-4" />
+                    </Show>
+                  </span>
+                </DropdownMenu.RadioItem>
+              )}
+            </For>
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu>
+  )
+}

package/src/ui/ReasoningTrace.tsx

@@ -0,0 +1,83 @@
+// ReasoningTrace — collapsible "thinking" panel for AI surfaces. Mirrors
+// Collapse.tsx's header/panel idiom (grid-rows transition, chevron rotate)
+// but owns its own open state (seeded from `defaultOpen`) and adds a
+// streaming pulse indicator for in-flight reasoning.
+import { Brain, ChevronDown } from 'lucide-solid'
+import { type JSX, Show, createSignal } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+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 function ReasoningTrace(props: ReasoningTraceProps): JSX.Element {
+  const [open, setOpen] = createSignal(props.defaultOpen ?? false)
+
+  return (
+    <div class={cn('rounded-xl border border-border bg-card', props.class)}>
+      <button
+        type="button"
+        aria-expanded={open()}
+        onClick={() => setOpen(!open())}
+        class="flex w-full items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted"
+      >
+        <Brain class="h-4 w-4 shrink-0" aria-hidden="true" />
+        <span class="flex-1 text-left">{props.label ?? 'Reasoning'}</span>
+        <Show when={props.streaming}>
+          <span class="relative flex h-1.5 w-1.5 shrink-0" aria-hidden="true">
+            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75 motion-reduce:animate-none" />
+            <span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
+          </span>
+        </Show>
+        <ChevronDown
+          class={cn(
+            'h-4 w-4 shrink-0 transition-transform duration-200 motion-reduce:transition-none',
+            open() && 'rotate-180',
+          )}
+          aria-hidden="true"
+        />
+      </button>
+      <div
+        class={cn(
+          'grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none',
+          open() ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        )}
+      >
+        <div class="overflow-hidden">
+          <div
+            class={cn(
+              'whitespace-pre-wrap px-3 pb-3 text-xs leading-relaxed text-muted-foreground transition-opacity duration-200 motion-reduce:transition-none',
+              open() ? 'opacity-100' : 'opacity-0',
+            )}
+          >
+            {props.children ?? props.text}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/ui/Snippet.tsx

@@ -0,0 +1,64 @@
+// Single inline code block with a copy button, for a one-liner or short
+// excerpt embedded in prose. Lighter than CodeTabs (which is a card with tabs
+// for several samples) — Snippet is just one block, no chrome besides the
+// copy affordance and an optional language tag.
+import { Check, Copy } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createSignal, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+const COPIED_TIMEOUT_MS = 1500
+
+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 function Snippet(props: SnippetProps): JSX.Element {
+  const [copied, setCopied] = createSignal(false)
+
+  const copy = () => {
+    if (!navigator.clipboard) return
+    navigator.clipboard.writeText(props.code).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), COPIED_TIMEOUT_MS)
+    })
+  }
+
+  return (
+    <div class={cn('relative rounded-lg border border-border bg-muted px-3 py-2', props.class)}>
+      <Show when={props.language}>
+        <span class="absolute right-9 top-2 rounded bg-card px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+          {props.language}
+        </span>
+      </Show>
+      <button
+        type="button"
+        aria-label={copied() ? 'Copied' : 'Copy to clipboard'}
+        class="absolute right-2 top-2 inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+        onClick={copy}
+      >
+        <Show when={copied()} fallback={<Copy class="h-3.5 w-3.5" />}>
+          <Check class="h-3.5 w-3.5" />
+        </Show>
+      </button>
+      <pre class="overflow-x-auto whitespace-pre pr-8 font-mono text-sm text-foreground">
+        <code>{props.code}</code>
+      </pre>
+    </div>
+  )
+}