@a4ui/core 0.32.0 → 0.34.0

package/src/ui/SheetSnap.tsx

@@ -0,0 +1,264 @@
+// Bottom sheet with drag-to-resize snap points (mobile filter/detail panels,
+// map bottom sheets). Kobalte's Dialog (used by Drawer/Modal) has no notion of
+// intermediate heights, so this rolls its own portal + backdrop + focus/Escape/
+// body-scroll-lock (mirroring Drawer.tsx's overlay idiom) and its own raw
+// pointerdown/move/up + pointer-capture drag loop (there's no shared drag
+// primitive in the repo to reuse). The sheet's height is fixed to the tallest
+// snap point; the *visible* portion is controlled by translating it down in
+// pixels, snapped to one of `snapPoints` (fractions of `window.innerHeight`).
+import { createEffect, createSignal, onCleanup, onMount, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { animate, motionReduced } from '../lib/motion'
+import { Portal } from './Portal'
+
+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
+}
+
+const DEFAULT_SNAPS = [0.5, 0.9]
+const SPRING_STIFFNESS = 380
+const SPRING_DAMPING = 38
+/** Drag past the lowest snap point by this many px (with no help from velocity) dismisses. */
+const DISMISS_DISTANCE_PX = 100
+/** px/ms; a flick faster than this biases the resolved snap by one level, or dismisses near the bottom. */
+const FLICK_VELOCITY = 0.5
+
+const clamp = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max)
+
+/**
+ * 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 function SheetSnap(props: SheetSnapProps): JSX.Element {
+  const snaps = () => (props.snapPoints?.length ? props.snapPoints : DEFAULT_SNAPS)
+  const defaultIndex = () => clamp(props.defaultSnap ?? 0, 0, snaps().length - 1)
+
+  const [mounted, setMounted] = createSignal(false)
+  const [translateY, setTranslateY] = createSignal(0)
+
+  let previouslyFocused: HTMLElement | null = null
+  let previousBodyOverflow = ''
+
+  // Plain (non-reactive) geometry — recomputed on open and on resize, read
+  // fresh inside the `translateY()`-dependent style expression below.
+  let maxHeightPx = 0
+  let translateYs: number[] = []
+  let snapIndex = 0
+
+  let controls: ReturnType<typeof animate> | undefined
+  let dragging = false
+  let dragStartClientY = 0
+  let dragStartTranslate = 0
+  let lastClientY = 0
+  let lastTime = 0
+  let velocity = 0 // px/ms, positive = moving down (toward closed)
+
+  const computeGeometry = () => {
+    const vh = window.innerHeight
+    const pixelHeights = snaps().map((f) => f * vh)
+    maxHeightPx = Math.max(...pixelHeights)
+    translateYs = pixelHeights.map((h) => maxHeightPx - h)
+  }
+
+  const lockScroll = () => {
+    previousBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+  }
+  const unlockScroll = () => {
+    document.body.style.overflow = previousBodyOverflow
+  }
+
+  const animateTo = (target: number, onDone?: () => void) => {
+    controls?.stop()
+    if (motionReduced()) {
+      setTranslateY(target)
+      onDone?.()
+      return
+    }
+    controls = animate(translateY(), target, {
+      type: 'spring',
+      stiffness: SPRING_STIFFNESS,
+      damping: SPRING_DAMPING,
+      onUpdate: (v: number) => setTranslateY(v),
+    })
+    controls.finished.then(() => onDone?.()).catch(() => {})
+  }
+
+  // Mount/unmount + enter/exit animation, driven off the controlled `open` prop.
+  createEffect(() => {
+    if (props.open) {
+      if (mounted()) return
+      computeGeometry()
+      snapIndex = defaultIndex()
+      previouslyFocused = document.activeElement as HTMLElement | null
+      setTranslateY(motionReduced() ? translateYs[snapIndex] : maxHeightPx)
+      setMounted(true)
+      lockScroll()
+    } else if (mounted()) {
+      animateTo(maxHeightPx, () => {
+        setMounted(false)
+        unlockScroll()
+        previouslyFocused?.focus()
+      })
+    }
+  })
+
+  const resolveDragEnd = () => {
+    const current = translateY()
+    const mostClosedY = translateYs[0]
+
+    const draggedPastLowest = current - mostClosedY
+    const fastDownwardNearBottom =
+      velocity > FLICK_VELOCITY && current >= mostClosedY - DISMISS_DISTANCE_PX / 2
+    if (draggedPastLowest > DISMISS_DISTANCE_PX || fastDownwardNearBottom) {
+      props.onOpenChange(false)
+      return
+    }
+
+    let nearest = 0
+    let bestDist = Infinity
+    translateYs.forEach((t, i) => {
+      const d = Math.abs(current - t)
+      if (d < bestDist) {
+        bestDist = d
+        nearest = i
+      }
+    })
+
+    let target = nearest
+    if (velocity > FLICK_VELOCITY) target = Math.max(nearest - 1, 0)
+    else if (velocity < -FLICK_VELOCITY) target = Math.min(nearest + 1, translateYs.length - 1)
+
+    snapIndex = target
+    animateTo(translateYs[target])
+  }
+
+  const onHandlePointerDown = (e: PointerEvent) => {
+    if (motionReduced()) return
+    e.preventDefault()
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+    controls?.stop()
+    dragging = true
+    dragStartClientY = e.clientY
+    dragStartTranslate = translateY()
+    lastClientY = e.clientY
+    lastTime = performance.now()
+    velocity = 0
+  }
+
+  const onHandlePointerMove = (e: PointerEvent) => {
+    if (!dragging) return
+    const next = Math.max(dragStartTranslate + (e.clientY - dragStartClientY), 0)
+    setTranslateY(next)
+
+    const now = performance.now()
+    const dt = now - lastTime
+    if (dt > 0) velocity = (e.clientY - lastClientY) / dt
+    lastClientY = e.clientY
+    lastTime = now
+  }
+
+  const onHandlePointerUp = (e: PointerEvent) => {
+    if (!dragging) return
+    dragging = false
+    ;(e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId)
+    resolveDragEnd()
+  }
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && props.open) props.onOpenChange(false)
+  }
+  const onResize = () => {
+    if (!mounted()) return
+    computeGeometry()
+    setTranslateY(translateYs[clamp(snapIndex, 0, translateYs.length - 1)])
+  }
+
+  onMount(() => {
+    document.addEventListener('keydown', onKeyDown)
+    window.addEventListener('resize', onResize)
+  })
+  onCleanup(() => {
+    document.removeEventListener('keydown', onKeyDown)
+    window.removeEventListener('resize', onResize)
+    controls?.stop()
+    if (mounted()) unlockScroll()
+  })
+
+  return (
+    <Show when={mounted()}>
+      <Portal>
+        <div
+          aria-hidden="true"
+          onClick={() => props.onOpenChange(false)}
+          class="fixed inset-0 z-[9998] bg-black/50 backdrop-blur-[2px]"
+        />
+        <div
+          ref={(el) => {
+            requestAnimationFrame(() => {
+              el.focus()
+              animateTo(translateYs[snapIndex])
+            })
+          }}
+          role="dialog"
+          aria-modal="true"
+          aria-label="Bottom sheet"
+          tabindex={-1}
+          class={cn(
+            'fixed inset-x-0 bottom-0 z-[9999] flex flex-col overflow-hidden rounded-t-2xl border border-border bg-glass shadow-2xl outline-none',
+            props.class,
+          )}
+          style={{
+            height: `${maxHeightPx}px`,
+            transform: `translateY(${translateY()}px)`,
+          }}
+        >
+          <div
+            role="button"
+            tabindex={0}
+            aria-label="Drag handle"
+            onPointerDown={onHandlePointerDown}
+            onPointerMove={onHandlePointerMove}
+            onPointerUp={onHandlePointerUp}
+            onPointerCancel={onHandlePointerUp}
+            onKeyDown={(e) => {
+              if (e.key === 'ArrowUp') {
+                e.preventDefault()
+                snapIndex = Math.min(snapIndex + 1, translateYs.length - 1)
+                animateTo(translateYs[snapIndex])
+              } else if (e.key === 'ArrowDown') {
+                e.preventDefault()
+                snapIndex = Math.max(snapIndex - 1, 0)
+                animateTo(translateYs[snapIndex])
+              }
+            }}
+            class="flex shrink-0 touch-none items-center justify-center py-3 outline-none"
+          >
+            <div class="h-1.5 w-10 rounded-full bg-muted-foreground/40" />
+          </div>
+          <div class="flex-1 overflow-y-auto overscroll-contain px-4 pb-4">{props.children}</div>
+        </div>
+      </Portal>
+    </Show>
+  )
+}

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>
+  )
+}

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>
+  )
+}