@a4ui/core 0.32.0 → 0.34.0

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/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/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/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/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.34.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'

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.32.0'
+export const A4UI_VERSION = '0.34.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -186,6 +186,53 @@ export { Dock, type DockItem, type DockProps } from './ui/Dock'
 export { AnimatedBeam, type AnimatedBeamProps } from './ui/AnimatedBeam'
 export { BorderBeam, type BorderBeamProps } from './ui/BorderBeam'
 export { Meteors, type MeteorsProps } from './ui/Meteors'
+
+// AI agent surface + chat affordances.
+export { ReasoningTrace, type ReasoningTraceProps } from './ui/ReasoningTrace'
+export {
+  ToolCallTimeline,
+  type ToolCall,
+  type ToolCallStatus,
+  type ToolCallTimelineProps,
+} from './ui/ToolCallTimeline'
+export { DiffViewer, type DiffLine, type DiffViewerProps } from './ui/DiffViewer'
+export { ModelPicker, type ModelOption, type ModelPickerProps } from './ui/ModelPicker'
+export { UsageMeter, type UsageMeterProps } from './ui/UsageMeter'
+export { SuggestionChips, type SuggestionChipsProps } from './ui/SuggestionChips'
+
+// Content blocks.
+export { Callout, type CalloutTone, type CalloutProps } from './ui/Callout'
+export { Snippet, type SnippetProps } from './ui/Snippet'
+
+// Spatial showpieces + motion extras.
+export { Globe, type GlobeMarker, type GlobeArc, type GlobeProps } from './ui/Globe'
+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,