@a4ui/core 0.31.1 → 0.33.0

package/src/ui/SuggestionChips.tsx

@@ -0,0 +1,65 @@
+// Wrapping row of dismissible/selectable pill chips (e.g. AI follow-up
+// suggestions). Plain buttons in a flex-wrap row — no Kobalte primitive
+// covers this shape, so it's hand-rolled like AnnouncementBar's tag chips.
+import { X } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+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 function SuggestionChips(props: SuggestionChipsProps): JSX.Element {
+  return (
+    <div class={cn('flex flex-wrap gap-2', props.class)}>
+      <For each={props.suggestions}>
+        {(suggestion) => (
+          <span class="inline-flex items-center gap-1 rounded-full border border-border pl-3 pr-1.5 py-1.5 text-sm text-foreground transition-colors hover:bg-muted">
+            <button
+              type="button"
+              onClick={() => props.onSelect?.(suggestion)}
+              class="outline-none focus-visible:ring-2 focus-visible:ring-ring/30 rounded-sm"
+            >
+              {suggestion}
+            </button>
+            <Show when={props.onDismiss}>
+              <button
+                type="button"
+                aria-label={`Dismiss "${suggestion}"`}
+                onClick={(ev) => {
+                  ev.stopPropagation()
+                  props.onDismiss?.(suggestion)
+                }}
+                class="rounded-full p-0.5 text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30"
+              >
+                <X class="h-3 w-3" />
+              </button>
+            </Show>
+          </span>
+        )}
+      </For>
+    </div>
+  )
+}

package/src/ui/ToolCallTimeline.tsx

@@ -0,0 +1,137 @@
+// ToolCallTimeline — vertical timeline (à la Timeline.tsx's connector line +
+// dot idiom) where each node is an AI tool call, with a Collapse-style
+// details panel for args/result.
+import { Check, Loader2, X } from 'lucide-solid'
+import { type JSX, For, Show, createSignal } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** 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 function ToolCallTimeline(props: ToolCallTimelineProps): JSX.Element {
+  return (
+    <ol class={cn('relative flex flex-col gap-4', props.class)}>
+      <For each={props.calls}>
+        {(call, index) => (
+          <li class="relative flex gap-3 pl-1">
+            <Show when={index() < props.calls.length - 1}>
+              <span
+                aria-hidden="true"
+                class="absolute left-[calc(0.5rem+2px)] top-6 -bottom-4 w-px -translate-x-1/2 bg-border"
+              />
+            </Show>
+            <StatusNode status={call.status} />
+            <div class="min-w-0 flex-1 pb-0.5">
+              <p class="pt-0.5 font-mono text-sm text-foreground">{call.name}</p>
+              <Show when={call.args !== undefined || call.result !== undefined}>
+                <ToolCallDetails args={call.args} result={call.result} />
+              </Show>
+            </div>
+          </li>
+        )}
+      </For>
+    </ol>
+  )
+}
+
+const STATUS_TONE: Record<ToolCallStatus, string> = {
+  pending: 'border-border bg-muted text-muted-foreground',
+  success: 'border-emerald-500/30 bg-emerald-500/15 text-emerald-500',
+  error: 'border-destructive/30 bg-destructive/15 text-destructive',
+}
+
+function StatusNode(props: { status: ToolCallStatus }): JSX.Element {
+  return (
+    <span
+      aria-hidden="true"
+      class={cn(
+        'relative z-[1] mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full border',
+        STATUS_TONE[props.status],
+      )}
+    >
+      <Show when={props.status === 'pending'}>
+        <Loader2 class="h-3 w-3 animate-spin motion-reduce:animate-none" />
+      </Show>
+      <Show when={props.status === 'success'}>
+        <Check class="h-3 w-3" />
+      </Show>
+      <Show when={props.status === 'error'}>
+        <X class="h-3 w-3" />
+      </Show>
+    </span>
+  )
+}
+
+// Reuses Collapse.tsx's grid-rows transition idiom for the args/result panel.
+function ToolCallDetails(props: { args?: JSX.Element | string; result?: JSX.Element | string }): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+
+  return (
+    <div class="mt-1">
+      <button
+        type="button"
+        aria-expanded={open()}
+        onClick={() => setOpen(!open())}
+        class="text-xs font-medium text-muted-foreground hover:text-foreground"
+      >
+        {open() ? 'Hide details' : 'Show details'}
+      </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="mt-1.5 space-y-1.5 rounded-lg border border-border bg-muted/40 p-2 text-xs text-muted-foreground">
+            <Show when={props.args !== undefined}>
+              <div>
+                <p class="font-medium text-foreground/80">Args</p>
+                <p class="whitespace-pre-wrap font-mono">{props.args}</p>
+              </div>
+            </Show>
+            <Show when={props.result !== undefined}>
+              <div>
+                <p class="font-medium text-foreground/80">Result</p>
+                <p class="whitespace-pre-wrap font-mono">{props.result}</p>
+              </div>
+            </Show>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/ui/UsageMeter.tsx

@@ -0,0 +1,71 @@
+// Labeled consumption bar (e.g. token/quota usage) on Kobalte's Meter
+// primitive — same idiom as Meter.tsx/Progress.tsx, plus a warning-tone fill
+// past a configurable threshold and a "N left" remaining line.
+import { Meter as KMeter } from '@kobalte/core/meter'
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+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 function UsageMeter(props: UsageMeterProps): JSX.Element {
+  const unit = () => props.unit ?? ''
+  const ratio = () => (props.limit > 0 ? props.used / props.limit : 0)
+  const percent = () => Math.max(0, Math.min(100, ratio() * 100))
+  const isWarning = () => ratio() >= (props.warnAt ?? 0.85)
+  const remaining = () => Math.max(0, props.limit - props.used)
+
+  return (
+    <KMeter
+      value={props.used}
+      minValue={0}
+      maxValue={props.limit}
+      getValueLabel={() => `${props.used}/${props.limit}${unit()}`}
+      class={cn('flex flex-col gap-1.5', props.class)}
+    >
+      <div class="flex items-center justify-between text-sm text-foreground">
+        <Show when={props.label}>
+          <KMeter.Label>{props.label}</KMeter.Label>
+        </Show>
+        <KMeter.ValueLabel class="ml-auto tabular-nums text-muted-foreground" />
+      </div>
+      <KMeter.Track class="h-2 overflow-hidden rounded-full bg-muted">
+        <KMeter.Fill
+          class={cn(
+            'h-full rounded-full transition-all duration-500',
+            isWarning() ? 'bg-amber-500' : 'bg-primary',
+          )}
+          style={{ width: `${percent()}%` }}
+        />
+      </KMeter.Track>
+      <p class="text-xs text-muted-foreground">
+        {remaining()}
+        {unit()} left
+      </p>
+    </KMeter>
+  )
+}

package/src/ui/WorldMap.tsx

@@ -0,0 +1,191 @@
+// WorldMap — a lightweight, self-contained SVG "map": a dotted-grid backdrop
+// (no coastlines, no geojson/asset) with connection arcs projected from
+// lat/lng via simple equirectangular mapping. Each arc bulges upward and
+// carries a traveling primary→accent gradient segment, reusing
+// AnimatedBeam's "moving gradient stops along a quadratic curve" technique.
+// Arcs render static (no travel) under reduced motion.
+import { createUniqueId, For, onCleanup, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { animate, motionReduced } from '../lib/motion'
+
+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
+}
+
+const WIDTH = 800
+const HEIGHT = 400
+/** Px spacing between backdrop grid dots. */
+const GRID_GAP = 16
+
+interface Point {
+  x: number
+  y: number
+}
+
+/** Equirectangular projection: lat/lng -> SVG coordinates in the WIDTH x HEIGHT viewBox. */
+function project(point: WorldMapPoint): Point {
+  return {
+    x: ((point.lng + 180) / 360) * WIDTH,
+    y: ((90 - point.lat) / 180) * HEIGHT,
+  }
+}
+
+/** Point at parameter `t` (0..1) along a quadratic Bezier curve. */
+function pointAt(start: Point, control: Point, end: Point, t: number): Point {
+  const it = 1 - t
+  return {
+    x: it * it * start.x + 2 * it * t * control.x + t * t * end.x,
+    y: it * it * start.y + 2 * it * t * control.y + t * t * end.y,
+  }
+}
+
+/** Centers of an evenly spaced dot grid covering the WIDTH x HEIGHT viewBox. */
+function gridDots(): Point[] {
+  const dots: Point[] = []
+  for (let y = GRID_GAP / 2; y < HEIGHT; y += GRID_GAP) {
+    for (let x = GRID_GAP / 2; x < WIDTH; x += GRID_GAP) {
+      dots.push({ x, y })
+    }
+  }
+  return dots
+}
+
+interface ConnectionArcProps {
+  connection: WorldMapConnection
+}
+
+/** One arc: a faint static base stroke plus (unless reduced motion) a traveling gradient segment. */
+function ConnectionArc(props: ConnectionArcProps): JSX.Element {
+  const gradientId = `world-map-beam-${createUniqueId()}`
+  const start = project(props.connection.from)
+  const end = project(props.connection.to)
+  const mx = (start.x + end.x) / 2
+  const my = (start.y + end.y) / 2
+  // Bulge upward (smaller y) regardless of endpoint order.
+  const bulge = Math.max(20, Math.hypot(end.x - start.x, end.y - start.y) * 0.25)
+  const control = { x: mx, y: my - bulge }
+  const d = `M ${start.x} ${start.y} Q ${control.x} ${control.y} ${end.x} ${end.y}`
+  const reduced = motionReduced()
+
+  let gradientEl: SVGLinearGradientElement | undefined
+
+  if (!reduced) {
+    const segment = 0.2
+    const controls = animate(0, 1, {
+      duration: 3,
+      repeat: Infinity,
+      ease: 'linear',
+      onUpdate: (p: number) => {
+        const from = pointAt(start, control, end, Math.max(0, p - segment))
+        const to = pointAt(start, control, end, p)
+        gradientEl?.setAttribute('x1', String(from.x))
+        gradientEl?.setAttribute('y1', String(from.y))
+        gradientEl?.setAttribute('x2', String(to.x))
+        gradientEl?.setAttribute('y2', String(to.y))
+      },
+    })
+    onCleanup(() => controls.stop())
+  }
+
+  return (
+    <>
+      <path d={d} stroke="hsl(var(--muted-foreground))" stroke-width="1" stroke-opacity="0.3" fill="none" />
+      {!reduced && (
+        <>
+          <defs>
+            <linearGradient
+              ref={(el) => {
+                gradientEl = el
+              }}
+              id={gradientId}
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0%" stop-color="hsl(var(--primary))" stop-opacity="0" />
+              <stop offset="50%" stop-color="hsl(var(--primary))" />
+              <stop offset="50%" stop-color="hsl(var(--accent))" />
+              <stop offset="100%" stop-color="hsl(var(--accent))" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+          <path d={d} stroke={`url(#${gradientId})`} stroke-width="1.5" stroke-linecap="round" fill="none" />
+        </>
+      )}
+      <circle
+        cx={start.x}
+        cy={start.y}
+        r="2.5"
+        fill="hsl(var(--primary))"
+        class={reduced ? undefined : 'animate-pulse'}
+      />
+      <circle
+        cx={end.x}
+        cy={end.y}
+        r="2.5"
+        fill="hsl(var(--primary))"
+        class={reduced ? undefined : 'animate-pulse'}
+      />
+    </>
+  )
+}
+
+/**
+ * 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 function WorldMap(props: WorldMapProps): JSX.Element {
+  const connections = () => props.connections ?? []
+  const label = () =>
+    connections()
+      .map(
+        (c) =>
+          `${c.from.label ?? `${c.from.lat},${c.from.lng}`} to ${c.to.label ?? `${c.to.lat},${c.to.lng}`}`,
+      )
+      .join('; ')
+
+  return (
+    <svg
+      role={connections().length > 0 ? 'img' : undefined}
+      aria-label={connections().length > 0 ? `World map with connections: ${label()}` : undefined}
+      aria-hidden={connections().length > 0 ? undefined : 'true'}
+      class={cn('w-full', props.class)}
+      viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+      fill="none"
+    >
+      <For each={gridDots()}>
+        {(dot) => (
+          <circle cx={dot.x} cy={dot.y} r="0.8" fill="hsl(var(--muted-foreground))" fill-opacity="0.25" />
+        )}
+      </For>
+      <For each={connections()}>{(connection) => <ConnectionArc connection={connection} />}</For>
+    </svg>
+  )
+}