@a4ui/core 0.32.0 → 0.33.0

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/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/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/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/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/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;

package/dist/ui/ToolCallTimeline.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'solid-js';
+/** Status of a single tool call rendered by {@link ToolCallTimeline}. */
+export type ToolCallStatus = 'pending' | 'success' | 'error';
+/** A single tool invocation rendered by {@link ToolCallTimeline}. */
+export interface ToolCall {
+    /** Tool/function name, rendered in mono. */
+    name: string;
+    status: ToolCallStatus;
+    /** Arguments passed to the call. Shown in a collapsible details area when present. */
+    args?: JSX.Element | string;
+    /** Result returned by the call. Shown in a collapsible details area when present. */
+    result?: JSX.Element | string;
+}
+export interface ToolCallTimelineProps {
+    calls: ToolCall[];
+    class?: string;
+}
+/**
+ * Vertical timeline of AI tool calls: a connector line runs down the left with
+ * a status node per call (spinner while `pending`, check when `success`, x when
+ * `error`), the tool name in mono, and — when `args`/`result` are given — a
+ * collapsible details panel underneath.
+ *
+ * @example
+ * ```tsx
+ * <ToolCallTimeline
+ *   calls={[
+ *     { name: 'search_docs', status: 'success', args: 'query: "refunds"', result: '3 matches' },
+ *     { name: 'update_ticket', status: 'pending' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function ToolCallTimeline(props: ToolCallTimelineProps): JSX.Element;

package/dist/ui/UsageMeter.d.ts

@@ -0,0 +1,26 @@
+import { JSX } from 'solid-js';
+export interface UsageMeterProps {
+    used: number;
+    limit: number;
+    /** Header content shown before the "{used}/{limit}{unit}" count. */
+    label?: JSX.Element;
+    /** Appended to displayed numbers, e.g. `' tokens'` or `'%'`. */
+    unit?: string;
+    /** Fraction of `limit` (0–1) at which the fill switches to the warning tone. @default 0.85 */
+    warnAt?: number;
+    class?: string;
+}
+/**
+ * Labeled consumption bar: a header row with `label` and the raw
+ * "{used}/{limit}{unit}" count, a track whose fill width is `used / limit`
+ * (clamped to 0–100%) and switches to a warning tone once that ratio reaches
+ * `warnAt`, and a small "{remaining} left" line underneath. Built on Kobalte's
+ * `Meter` primitive, so it carries the same `role="meter"` a11y semantics as
+ * {@link Meter}.
+ *
+ * @example
+ * ```tsx
+ * <UsageMeter used={92} limit={100} label="API requests" unit=" req" warnAt={0.9} />
+ * ```
+ */
+export declare function UsageMeter(props: UsageMeterProps): JSX.Element;

package/dist/ui/WorldMap.d.ts

@@ -0,0 +1,36 @@
+import { JSX } from 'solid-js';
+export interface WorldMapPoint {
+    lat: number;
+    lng: number;
+    label?: string;
+}
+export interface WorldMapConnection {
+    from: WorldMapPoint;
+    to: WorldMapPoint;
+}
+export interface WorldMapProps {
+    /** Arcs to draw between projected points. @default [] */
+    connections?: WorldMapConnection[];
+    class?: string;
+}
+/**
+ * A decorative, dependency-free SVG "world map": an evenly spaced dotted-grid
+ * backdrop (a stylized map, not accurate coastlines) with connection arcs
+ * projected from lat/lng via equirectangular mapping. Each arc bulges upward
+ * and carries a traveling primary→accent gradient segment (reusing
+ * {@link AnimatedBeam}'s technique); arcs render static under reduced motion.
+ * Responsive — scales to its container via the 2:1 `viewBox`.
+ *
+ * @example
+ * ```tsx
+ * <WorldMap
+ *   class="w-full"
+ *   connections={[
+ *     { from: { lat: 40.7128, lng: -74.006, label: 'New York' }, to: { lat: 51.5074, lng: -0.1278, label: 'London' } },
+ *     { from: { lat: 51.5074, lng: -0.1278 }, to: { lat: 35.6762, lng: 139.6503, label: 'Tokyo' } },
+ *     { from: { lat: 40.7128, lng: -74.006 }, to: { lat: -23.5505, lng: -46.6333, label: 'São Paulo' } },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function WorldMap(props: WorldMapProps): JSX.Element;

package/package.json

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

package/src/charts/BarList.tsx

@@ -0,0 +1,83 @@
+// BarList — a ranked horizontal bar list built from plain flex `div`s (no
+// SVG, no charting library). Rows are sorted by value descending; each row
+// is a full-width track with a low-opacity theme-toned fill sized to
+// `value / max`, the `name` overlaid at the left (truncated, linked when
+// `href` is set) and the formatted value at the right. Colors come from
+// theme tokens only.
+import { For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface BarListDatum {
+  name: string
+  value: number
+  href?: string
+}
+
+export interface BarListProps {
+  data: BarListDatum[]
+  /** Formats the raw value shown at the row's end. Default `String`. */
+  valueFormat?: (n: number) => string
+  /** Fill color token. Default 'primary'. */
+  tone?: 'primary' | 'accent'
+  class?: string
+}
+
+/**
+ * Ranked horizontal bar list: rows sorted by `value` descending, each a
+ * full-width track with a low-opacity fill sized to `value / max` of the
+ * tallest row, the `name` overlaid at the left (truncated, rendered as a
+ * link when `href` is set) and the formatted value at the right. Compact
+ * and reflows with its container.
+ *
+ * @example
+ * ```tsx
+ * <BarList
+ *   data={[
+ *     { name: '/dashboard', value: 842, href: '/pages/dashboard' },
+ *     { name: '/settings', value: 231 },
+ *   ]}
+ *   tone="accent"
+ * />
+ * ```
+ */
+export function BarList(props: BarListProps): JSX.Element {
+  const tone = () => props.tone ?? 'primary'
+  const format = () => props.valueFormat ?? ((n: number) => String(n))
+  const fillClass = () => (tone() === 'accent' ? 'bg-accent/15' : 'bg-primary/15')
+  const sorted = () => [...props.data].sort((a, b) => b.value - a.value)
+  const max = () => Math.max(...props.data.map((d) => d.value), 0) || 1
+
+  return (
+    <div class={cn('flex w-full flex-col gap-1.5', props.class)}>
+      <For each={sorted()}>
+        {(datum) => (
+          <div class="relative isolate flex h-8 w-full min-w-0 items-center overflow-hidden rounded-md bg-muted/40">
+            <div
+              class={cn('absolute inset-y-0 left-0 rounded-md transition-all', fillClass())}
+              style={{ width: `${Math.max((datum.value / max()) * 100, 0)}%` }}
+            />
+            <Show
+              when={datum.href}
+              fallback={
+                <span class="relative z-10 min-w-0 flex-1 truncate px-2.5 text-sm text-foreground">
+                  {datum.name}
+                </span>
+              }
+            >
+              <a
+                href={datum.href}
+                class="relative z-10 min-w-0 flex-1 truncate px-2.5 text-sm text-foreground underline-offset-2 hover:underline"
+              >
+                {datum.name}
+              </a>
+            </Show>
+            <span class="relative z-10 shrink-0 px-2.5 text-sm tabular-nums text-muted-foreground">
+              {format()(datum.value)}
+            </span>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}

package/src/charts/CategoryBar.tsx

@@ -0,0 +1,95 @@
+// CategoryBar — a single horizontal segmented bar built from plain flex
+// `div`s (no SVG, no charting library). Each segment's width is its share of
+// the total (via CSS `flex-grow`), segments join seamlessly inside a
+// rounded track, an optional caret marks a value along the total (pure-CSS
+// border triangle), and cumulative boundary labels sit beneath. `success`/
+// `warning` tones reuse `Alert`/`Badge`'s `emerald-500`/`amber-500` (the repo
+// has no dedicated CSS token for them); `primary`/`accent`/`destructive` are
+// the shared semantic tokens.
+import { createMemo, For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export type CategoryBarTone = 'primary' | 'accent' | 'success' | 'warning' | 'destructive'
+
+export interface CategoryBarProps {
+  values: number[]
+  /** A value along the cumulative total to mark with a caret above the bar. */
+  marker?: number
+  /** Per-segment color tokens; cycles the default order below when omitted or shorter than `values`. */
+  tones?: CategoryBarTone[]
+  class?: string
+}
+
+const DEFAULT_TONES: CategoryBarTone[] = ['primary', 'accent', 'success', 'warning', 'destructive']
+
+const TONE_CLASSES: Record<CategoryBarTone, string> = {
+  primary: 'bg-primary',
+  accent: 'bg-accent',
+  success: 'bg-emerald-500',
+  warning: 'bg-amber-500',
+  destructive: 'bg-destructive',
+}
+
+/** Cumulative running sum of `values`, one boundary per entry (same length as `values`). */
+function cumulativeBounds(values: number[]): number[] {
+  let running = 0
+  return values.map((v) => (running += v))
+}
+
+/**
+ * Single segmented bar: each `values[i]` sets a segment's flex-grow share of
+ * the total, colored by `tones[i]` (cycling a sensible default), joined
+ * seamlessly inside one rounded track. An optional `marker` renders a caret
+ * above the bar at that value's position along the total, and cumulative
+ * boundary labels sit beneath (muted, tabular-nums).
+ *
+ * @example
+ * ```tsx
+ * <CategoryBar values={[40, 25, 20, 15]} marker={62} />
+ * ```
+ */
+export function CategoryBar(props: CategoryBarProps): JSX.Element {
+  const total = createMemo(() => props.values.reduce((sum, v) => sum + v, 0) || 1)
+  const bounds = createMemo(() => cumulativeBounds(props.values))
+  const tones = () => (props.tones && props.tones.length > 0 ? props.tones : DEFAULT_TONES)
+  const markerPct = createMemo(() =>
+    props.marker == null ? undefined : Math.min(Math.max((props.marker / total()) * 100, 0), 100),
+  )
+
+  return (
+    <div class={cn('w-full', props.class)}>
+      <div class="relative">
+        <Show when={markerPct() !== undefined}>
+          <div
+            class="absolute -top-1.5 h-0 w-0 -translate-x-1/2 border-x-4 border-t-4 border-x-transparent border-t-foreground"
+            style={{ left: `${markerPct()}%` }}
+            aria-hidden="true"
+          />
+        </Show>
+        <div class="flex h-2.5 w-full overflow-hidden rounded-full bg-muted">
+          <For each={props.values}>
+            {(value, i) => (
+              <div
+                class={cn('h-full', TONE_CLASSES[tones()[i() % tones().length] ?? 'primary'])}
+                style={{ flex: `${Math.max(value, 0)} 0 0%` }}
+              />
+            )}
+          </For>
+        </div>
+      </div>
+      <div class="relative mt-1 h-4 w-full text-xs tabular-nums text-muted-foreground">
+        <For each={bounds()}>
+          {(bound) => (
+            <span
+              class="absolute -translate-x-1/2 whitespace-nowrap"
+              style={{ left: `${Math.min(Math.max((bound / total()) * 100, 0), 100)}%` }}
+            >
+              {bound}
+            </span>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/charts/StatusTracker.tsx

@@ -0,0 +1,81 @@
+// StatusTracker — a status-page style history bar built from plain flex
+// `div`s (no SVG, no charting library). Each segment is a thin rounded bar
+// colored by its status, with a native tooltip carrying the label. `ok`/
+// `degraded` reuse the same success/warning tones as `Alert`/`Badge`
+// (`emerald-500`/`amber-500` — the repo has no dedicated CSS token for
+// them); `down` uses the `--destructive` semantic token.
+import { For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface StatusSegment {
+  status: 'ok' | 'degraded' | 'down'
+  label?: string
+}
+
+export interface StatusTrackerProps {
+  segments: StatusSegment[]
+  class?: string
+}
+
+const STATUS_CLASSES: Record<StatusSegment['status'], string> = {
+  ok: 'bg-emerald-500',
+  degraded: 'bg-amber-500',
+  down: 'bg-destructive',
+}
+
+const STATUS_LABEL: Record<StatusSegment['status'], string> = {
+  ok: 'Operational',
+  degraded: 'Degraded',
+  down: 'Down',
+}
+
+/** Share of `segments` that are `'ok'`, formatted as e.g. `"98.7% uptime"`; `undefined` when empty. */
+function uptimeSummary(segments: StatusSegment[]): string | undefined {
+  if (segments.length === 0) return undefined
+  const ok = segments.filter((s) => s.status === 'ok').length
+  return `${((ok / segments.length) * 100).toFixed(1)}% uptime`
+}
+
+/**
+ * Status-page style history bar: a row of thin rounded segments colored by
+ * `status` (ok/degraded/down), each with a native hover tooltip showing its
+ * label and status, plus a summary uptime line above.
+ *
+ * @example
+ * ```tsx
+ * <StatusTracker
+ *   segments={[
+ *     { status: 'ok', label: 'Jul 1' },
+ *     { status: 'degraded', label: 'Jul 2' },
+ *     { status: 'ok', label: 'Jul 3' },
+ *     { status: 'down', label: 'Jul 4' },
+ *   ]}
+ * />
+ * ```
+ */
+export function StatusTracker(props: StatusTrackerProps): JSX.Element {
+  const summary = () => uptimeSummary(props.segments)
+
+  return (
+    <div class={cn('flex w-full flex-col gap-1.5', props.class)}>
+      <Show when={summary()}>
+        <span class="text-xs text-muted-foreground">{summary()}</span>
+      </Show>
+      <div class="flex w-full items-stretch gap-1">
+        <For each={props.segments}>
+          {(segment) => (
+            <div
+              title={
+                segment.label
+                  ? `${segment.label}: ${STATUS_LABEL[segment.status]}`
+                  : STATUS_LABEL[segment.status]
+              }
+              class={cn('h-6 flex-1 rounded-sm transition-colors', STATUS_CLASSES[segment.status])}
+            />
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/charts/index.ts

@@ -6,3 +6,6 @@ export { DonutChart, type DonutSegment, type DonutChartProps } from './DonutChar
 export { LineChart, type LineSeries, type LineChartProps } from './LineChart'
 export { GaugeChart, type GaugeThreshold, type GaugeChartProps } from './GaugeChart'
 export { RadarChart, type RadarSeries, type RadarChartProps } from './RadarChart'
+export { BarList, type BarListDatum, type BarListProps } from './BarList'
+export { StatusTracker, type StatusSegment, type StatusTrackerProps } from './StatusTracker'
+export { CategoryBar, type CategoryBarTone, type CategoryBarProps } from './CategoryBar'