astralyx-ui 0.1.0

package/registry/items/reasoning-block.json

@@ -0,0 +1,23 @@
+{
+  "name": "reasoning-block",
+  "type": "registry:ui",
+  "title": "Reasoning Block",
+  "description": "A model's intermediate reasoning, folded away by default — it is supporting evidence, not the answer, and a panel that opens itself pushes the answer below the fold.",
+  "category": "AI",
+  "dependencies": [
+    "lucide-react@^1.39.0"
+  ],
+  "registryDependencies": [
+    "fmt",
+    "lib-styles",
+    "lib-utils",
+    "spinner"
+  ],
+  "files": [
+    {
+      "path": "components/ui/reasoning-block.tsx",
+      "type": "registry:ui",
+      "content": "import { useState, type ComponentProps, type ReactNode } from 'react'\nimport { Brain, ChevronDown, ChevronRight } from 'lucide-react'\nimport { Fmt } from '@/components/ui/fmt'\nimport { Spinner } from '@/components/ui/spinner'\nimport { focusRing, interactive, radius } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * A model's intermediate reasoning, folded away by default.\n *\n * Collapsed by default on purpose: reasoning is supporting evidence, not the\n * answer, and a panel that opens itself pushes the thing the reader asked for\n * below the fold.\n *\n * While streaming it opens itself and shows a spinner, because during that time\n * it is the only thing happening — then collapses once the answer starts. That\n * transition is the whole interaction, so `streaming` is a prop rather than\n * something inferred from children changing.\n */\nfunction ReasoningBlock({\n  children,\n  streaming = false,\n  duration,\n  defaultOpen,\n  label = 'Reasoning',\n  className,\n  ...props\n}: ComponentProps<'div'> & {\n  streaming?: boolean\n  /** Seconds spent thinking. Shown once finished. */\n  duration?: number\n  defaultOpen?: boolean\n  label?: ReactNode\n}) {\n  const [open, setOpen] = useState(defaultOpen ?? streaming)\n  const Chevron = open ? ChevronDown : ChevronRight\n\n  return (\n    <div\n      data-slot=\"reasoning-block\"\n      data-streaming={streaming || undefined}\n      className={cn('border-border overflow-hidden border', radius.surface, className)}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        onClick={() => setOpen((value) => !value)}\n        className={cn(\n          'text-muted-foreground hover:text-foreground hover:bg-accent/40 flex w-full items-center gap-2 px-3 py-2',\n          interactive,\n          focusRing,\n        )}\n      >\n        <Chevron className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n        {streaming ? (\n          <Spinner size=\"xs\" className=\"shrink-0\" label=\"Thinking\" />\n        ) : (\n          <Brain className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n        )}\n        <span className=\"min-w-0 flex-1 truncate text-start text-xs font-medium\">\n          {streaming ? 'Thinking…' : label}\n        </span>\n        {!streaming && duration !== undefined && (\n          <span className=\"shrink-0 text-xs tabular-nums\">\n            <Fmt type=\"duration\" value={duration} />\n          </span>\n        )}\n      </button>\n\n      {open && (\n        <div className=\"border-border text-muted-foreground border-t p-3 text-sm\">\n          {children}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { ReasoningBlock }\n"
+    }
+  ]
+}

package/registry/items/regex-tester.json

@@ -0,0 +1,25 @@
+{
+  "name": "regex-tester",
+  "type": "registry:ui",
+  "title": "Regex Tester",
+  "description": "A pattern against a test string, with matches highlighted and capture groups listed. Zero-length matches are guarded — `/a*/g` matches empty at every position and hangs a naive exec loop.",
+  "category": "Code Tools",
+  "dependencies": [
+    "lucide-react@^1.39.0"
+  ],
+  "registryDependencies": [
+    "badge",
+    "input",
+    "label",
+    "lib-styles",
+    "lib-utils",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "components/ui/regex-tester.tsx",
+      "type": "registry:ui",
+      "content": "import { useMemo, useState, type ComponentProps, type ReactNode } from 'react'\nimport { TriangleAlert } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Textarea } from '@/components/ui/textarea'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * A regular expression against a test string, with matches highlighted.\n *\n * The pattern is compiled in a try/catch and the error is shown as you type. An\n * unfinished pattern is the normal state while typing, so a syntax error is a\n * hint, not a failure — the previous good match set is not thrown away.\n *\n * Zero-length matches are guarded. `/a*\\/g` matches empty at every position and\n * a naive `exec` loop over it never terminates; the index is advanced manually\n * when a match consumes nothing. This is the bug in most hand-rolled regex\n * testers.\n *\n * Named and numbered capture groups are listed per match. A pattern that\n * matches but captures the wrong thing is the failure people actually hit, and\n * a highlight alone cannot show it.\n */\nexport type RegexMatch = {\n  index: number\n  text: string\n  groups: { name: string; value: string | undefined }[]\n}\n\nconst FLAG_SET = ['g', 'i', 'm', 's', 'u', 'y'] as const\n\nfunction RegexTester({\n  pattern: patternProp,\n  onPatternChange,\n  flags: flagsProp,\n  onFlagsChange,\n  input: inputProp,\n  onInputChange,\n  patternLabel = 'Pattern',\n  flagsLabel = 'Flags',\n  inputLabel = 'Test string',\n  matchesLabel = 'Matches',\n  noMatchLabel = 'No matches',\n  groupsLabel = 'Groups',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'onChange' | 'children'> & {\n  pattern?: string\n  onPatternChange?: (pattern: string) => void\n  flags?: string\n  onFlagsChange?: (flags: string) => void\n  input?: string\n  onInputChange?: (input: string) => void\n  patternLabel?: ReactNode\n  flagsLabel?: ReactNode\n  inputLabel?: ReactNode\n  matchesLabel?: ReactNode\n  noMatchLabel?: ReactNode\n  groupsLabel?: ReactNode\n}) {\n  const [ownPattern, setOwnPattern] = useState(patternProp ?? '')\n  const [ownFlags, setOwnFlags] = useState(flagsProp ?? 'g')\n  const [ownInput, setOwnInput] = useState(inputProp ?? '')\n\n  const pattern = patternProp ?? ownPattern\n  const flags = flagsProp ?? ownFlags\n  const input = inputProp ?? ownInput\n\n  const { matches, error } = useMemo(() => {\n    if (!pattern) return { matches: [] as RegexMatch[], error: undefined }\n    let regex: RegExp\n    try {\n      regex = new RegExp(pattern, flags.includes('g') ? flags : `${flags}g`)\n    } catch (exception) {\n      return { matches: [] as RegexMatch[], error: (exception as Error).message }\n    }\n\n    const found: RegexMatch[] = []\n    let hit: RegExpExecArray | null\n    let guard = 0\n    while ((hit = regex.exec(input)) && guard++ < 5000) {\n      found.push({\n        index: hit.index,\n        text: hit[0],\n        groups: [\n          ...hit.slice(1).map((value, i) => ({ name: String(i + 1), value })),\n          ...Object.entries(hit.groups ?? {}).map(([name, value]) => ({ name, value })),\n        ],\n      })\n      // A zero-length match leaves lastIndex where it was; without this the\n      // loop never terminates.\n      if (hit[0] === '') regex.lastIndex++\n    }\n    return { matches: found, error: undefined }\n  }, [pattern, flags, input])\n\n  /** Splits the input into plain and matched runs for highlighting. */\n  const segments = useMemo(() => {\n    const out: { text: string; hit: boolean }[] = []\n    let cursor = 0\n    for (const match of matches) {\n      if (match.index > cursor) out.push({ text: input.slice(cursor, match.index), hit: false })\n      out.push({ text: match.text, hit: true })\n      cursor = match.index + match.text.length\n    }\n    if (cursor < input.length) out.push({ text: input.slice(cursor), hit: false })\n    return out\n  }, [matches, input])\n\n  const setPattern = (next: string) => {\n    if (patternProp === undefined) setOwnPattern(next)\n    onPatternChange?.(next)\n  }\n  const setFlags = (next: string) => {\n    if (flagsProp === undefined) setOwnFlags(next)\n    onFlagsChange?.(next)\n  }\n  const setInput = (next: string) => {\n    if (inputProp === undefined) setOwnInput(next)\n    onInputChange?.(next)\n  }\n\n  return (\n    <div\n      data-slot=\"regex-tester\"\n      className={cn(surface, radius.surface, 'flex flex-col gap-3 p-4', className)}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-end gap-2\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-1.5\">\n          <Label htmlFor=\"regex-pattern\">{patternLabel}</Label>\n          <Input\n            id=\"regex-pattern\"\n            value={pattern}\n            error={Boolean(error)}\n            placeholder=\"(\\w+)@(\\w+)\\.com\"\n            className=\"font-mono text-xs\"\n            onChange={(event) => setPattern(event.target.value)}\n          />\n        </div>\n        <div className=\"flex flex-col gap-1.5\">\n          <Label htmlFor=\"regex-flags\">{flagsLabel}</Label>\n          <Input\n            id=\"regex-flags\"\n            value={flags}\n            placeholder=\"gi\"\n            containerClassName=\"w-24\"\n            className=\"font-mono text-xs\"\n            onChange={(event) =>\n              setFlags([...new Set(event.target.value.split(''))]\n                .filter((f) => (FLAG_SET as readonly string[]).includes(f))\n                .join(''))\n            }\n          />\n        </div>\n      </div>\n\n      {error && (\n        <p className=\"flex items-start gap-1.5 text-xs text-[var(--destructive-soft-foreground)]\">\n          <TriangleAlert className=\"mt-0.5 size-3.5 shrink-0\" aria-hidden=\"true\" />\n          {error}\n        </p>\n      )}\n\n      <div className=\"flex flex-col gap-1.5\">\n        <Label htmlFor=\"regex-input\">{inputLabel}</Label>\n        <Textarea\n          id=\"regex-input\"\n          rows={4}\n          value={input}\n          className=\"font-mono text-xs\"\n          onChange={(event) => setInput(event.target.value)}\n        />\n      </div>\n\n      <div className={cn('bg-secondary/60 p-3 font-mono text-xs whitespace-pre-wrap', radius.control)}>\n        {segments.length === 0 ? (\n          <span className=\"text-muted-foreground/60\">{noMatchLabel}</span>\n        ) : (\n          segments.map((segment, index) =>\n            segment.hit ? (\n              <mark\n                key={index}\n                className=\"bg-[color-mix(in_oklab,var(--amber)_35%,transparent)] text-foreground\"\n              >\n                {segment.text}\n              </mark>\n            ) : (\n              <span key={index}>{segment.text}</span>\n            ),\n          )\n        )}\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <span className=\"text-muted-foreground flex items-center gap-2 text-xs font-medium\">\n          {matchesLabel}\n          <Badge size=\"sm\">{matches.length}</Badge>\n        </span>\n\n        {matches.length > 0 && (\n          <ul className=\"flex list-none flex-col gap-1.5\">\n            {matches.slice(0, 20).map((match, index) => (\n              <li key={index} className=\"flex flex-wrap items-baseline gap-x-3 gap-y-1 text-xs\">\n                <span className=\"text-muted-foreground/60 w-8 shrink-0 text-end tabular-nums\">\n                  {match.index}\n                </span>\n                <code className=\"font-mono\">{match.text || '∅'}</code>\n                {/* A pattern that matches but captures the wrong thing is the\n                    failure people actually hit; a highlight cannot show it. */}\n                {match.groups.length > 0 && (\n                  <span className=\"text-muted-foreground flex flex-wrap gap-x-2\">\n                    <span className=\"opacity-70\">{groupsLabel}:</span>\n                    {match.groups.map((group) => (\n                      <span key={group.name} className=\"font-mono\">\n                        {group.name}={group.value === undefined ? '—' : `\"${group.value}\"`}\n                      </span>\n                    ))}\n                  </span>\n                )}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { RegexTester }\n"
+    }
+  ]
+}

package/registry/items/release-list.json

@@ -0,0 +1,22 @@
+{
+  "name": "release-list",
+  "type": "registry:ui",
+  "title": "Release List",
+  "description": "A changelog as a document — each version an article with a real heading, so it can be linked to and navigated by heading. Never sorts, since \"newest first\" cannot be derived from semver once pre-releases exist.",
+  "category": "Development",
+  "dependencies": [
+    "lucide-react@^1.39.0"
+  ],
+  "registryDependencies": [
+    "badge",
+    "lib-styles",
+    "lib-utils"
+  ],
+  "files": [
+    {
+      "path": "components/ui/release-list.tsx",
+      "type": "registry:ui",
+      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { Tag } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * A changelog: versions newest first, each with its notes.\n *\n * The version is an `<h3>` inside an article rather than a styled div, because\n * a changelog is a document — someone lands on it from a link and navigates it\n * by heading. Order is the caller's; this never sorts, since \"newest first\"\n * cannot be derived from a semver string alone once pre-releases are involved.\n */\nexport type Release = {\n  version: string\n  date?: Date\n  /** Highlighted as the current or newest release. */\n  current?: boolean\n  tag?: ReactNode\n  notes?: ReactNode\n  /** Grouped bullets — Added, Fixed, Changed. */\n  sections?: { label: string; items: ReactNode[] }[]\n}\n\nfunction ReleaseList({\n  releases,\n  locale = 'en-GB',\n  latestLabel = 'Latest',\n  className,\n  ...props\n}: ComponentProps<'div'> & {\n  releases: Release[]\n  locale?: string\n  /** Badge on the newest release. */\n  latestLabel?: ReactNode\n}) {\n  const date = new Intl.DateTimeFormat(locale, {\n    day: 'numeric',\n    month: 'long',\n    year: 'numeric',\n  })\n\n  return (\n    <div\n      data-slot=\"release-list\"\n      className={cn('flex flex-col gap-4', className)}\n      {...props}\n    >\n      {releases.map((release) => (\n        <article\n          key={release.version}\n          className={cn(surface, radius.surface, 'p-4')}\n        >\n          <header className=\"mb-3 flex flex-wrap items-center gap-2\">\n            <Tag className=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n            <h3 className=\"font-mono text-sm font-semibold\">{release.version}</h3>\n            {release.current && (\n              <Badge size=\"sm\" color=\"green\">\n                {latestLabel}\n              </Badge>\n            )}\n            {release.tag}\n            {release.date && (\n              <time\n                dateTime={release.date.toISOString()}\n                className=\"text-muted-foreground ms-auto text-xs\"\n              >\n                {date.format(release.date)}\n              </time>\n            )}\n          </header>\n\n          {release.notes && (\n            <div className=\"text-muted-foreground mb-3 text-sm\">{release.notes}</div>\n          )}\n\n          {release.sections?.map((section) => (\n            <section key={section.label} className=\"mb-3 last:mb-0\">\n              <h4 className=\"mb-1 text-xs font-medium tracking-wide uppercase\">\n                {section.label}\n              </h4>\n              <ul className=\"text-muted-foreground ms-4 flex list-disc flex-col gap-0.5 text-sm\">\n                {section.items.map((item, index) => (\n                  <li key={index}>{item}</li>\n                ))}\n              </ul>\n            </section>\n          ))}\n        </article>\n      ))}\n    </div>\n  )\n}\n\nexport { ReleaseList }\n"
+    }
+  ]
+}

package/registry/items/request-builder.json

@@ -0,0 +1,28 @@
+{
+  "name": "request-builder",
+  "type": "registry:ui",
+  "title": "Request Builder",
+  "description": "Method, URL, headers, query and body. Query parameters are edited as rows and the assembled URL is shown beneath — hand-editing a query string is where encoding bugs come from.",
+  "category": "API",
+  "dependencies": [
+    "lucide-react@^1.39.0"
+  ],
+  "registryDependencies": [
+    "badge",
+    "button",
+    "collapsible",
+    "input",
+    "lib-styles",
+    "lib-utils",
+    "select",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "components/ui/request-builder.tsx",
+      "type": "registry:ui",
+      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { Plus, Send, Trash2 } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Select } from '@/components/ui/select'\nimport { Switch } from '@/components/ui/switch'\nimport { Badge } from '@/components/ui/badge'\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'\nimport { Textarea } from '@/components/ui/textarea'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * Compose an HTTP request: method, URL, headers, query and body.\n *\n * Query parameters are edited as rows, not as a query string. Hand-editing a\n * URL is where encoding bugs come from — a `&` inside a value silently becomes\n * a parameter boundary — and the assembled URL is shown read-only underneath so\n * you can still see exactly what will be sent.\n *\n * Query, headers and body are stacked disclosures rather than tabs. Their\n * heights differ a lot, so a shared tab panel resizes the card on every switch\n * and the strip moves out from under the pointer. Stacking also lets you see\n * the parameters and the body at once, which is what composing a request takes.\n *\n * Rows can be disabled rather than only deleted. Toggling a header off to test\n * something and back on again is the actual workflow; deleting it means\n * retyping it.\n *\n * The body tab is disabled for methods that do not carry one. GET with a body\n * is legal in the RFC, widely unsupported in practice, and offering it invites\n * an afternoon debugging a proxy that stripped it.\n */\nexport type RequestRow = { id: string; name: string; value: string; enabled?: boolean }\n\nconst METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS']\nconst BODYLESS = new Set(['GET', 'HEAD'])\n\nfunction RequestBuilder({\n  method = 'GET',\n  onMethodChange,\n  url = '',\n  onUrlChange,\n  headers = [],\n  onHeadersChange,\n  params = [],\n  onParamsChange,\n  body = '',\n  onBodyChange,\n  onSend,\n  sending = false,\n  urlPlaceholder = 'https://api.example.com/v1/users',\n  urlLabel = 'Request URL',\n  sendLabel = 'Send',\n  headersLabel = 'Headers',\n  paramsLabel = 'Query',\n  bodyLabel = 'Body',\n  addLabel = 'Add row',\n  removeLabel = 'Remove row',\n  enableLabel = 'Include this row',\n  nameePlaceholder = 'name',\n  valuePlaceholder = 'value',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'onChange' | 'children'> & {\n  method?: string\n  onMethodChange?: (method: string) => void\n  url?: string\n  onUrlChange?: (url: string) => void\n  headers?: RequestRow[]\n  onHeadersChange?: (rows: RequestRow[]) => void\n  params?: RequestRow[]\n  onParamsChange?: (rows: RequestRow[]) => void\n  body?: string\n  onBodyChange?: (body: string) => void\n  onSend?: () => void\n  sending?: boolean\n  urlPlaceholder?: string\n  urlLabel?: string\n  sendLabel?: ReactNode\n  headersLabel?: ReactNode\n  paramsLabel?: ReactNode\n  bodyLabel?: ReactNode\n  addLabel?: ReactNode\n  removeLabel?: string\n  enableLabel?: string\n  nameePlaceholder?: string\n  valuePlaceholder?: string\n}) {\n  const bodyless = BODYLESS.has(method.toUpperCase())\n\n  // Built with URL so values are encoded properly, not concatenated.\n  const assembled = (() => {\n    const active = params.filter((row) => row.enabled !== false && row.name)\n    if (!url) return ''\n    try {\n      const parsed = new URL(url.includes('://') ? url : `https://${url}`)\n      for (const row of active) parsed.searchParams.set(row.name, row.value)\n      return parsed.toString()\n    } catch {\n      return url\n    }\n  })()\n\n  const rowEditor = (\n    rows: RequestRow[],\n    onChange: ((rows: RequestRow[]) => void) | undefined,\n  ) => (\n    <div className=\"flex flex-col gap-2\">\n      {rows.map((row, index) => (\n        <div key={row.id} className=\"flex items-center gap-2\">\n          {/* Disable, don't delete — toggling off and on is the real workflow. */}\n          <Switch\n            size=\"sm\"\n            checked={row.enabled !== false}\n            aria-label={enableLabel}\n            onChange={(event) =>\n              onChange?.(\n                rows.map((r, i) => (i === index ? { ...r, enabled: event.target.checked } : r)),\n              )\n            }\n          />\n          <Input\n            size=\"sm\"\n            value={row.name}\n            placeholder={nameePlaceholder}\n            containerClassName=\"flex-1\"\n            className=\"font-mono text-xs\"\n            onChange={(event) =>\n              onChange?.(rows.map((r, i) => (i === index ? { ...r, name: event.target.value } : r)))\n            }\n          />\n          <Input\n            size=\"sm\"\n            value={row.value}\n            placeholder={valuePlaceholder}\n            containerClassName=\"flex-1\"\n            className=\"font-mono text-xs\"\n            onChange={(event) =>\n              onChange?.(rows.map((r, i) => (i === index ? { ...r, value: event.target.value } : r)))\n            }\n          />\n          <Button\n            variant=\"ghost\"\n            size=\"icon-xs\"\n            aria-label={removeLabel}\n            onClick={() => onChange?.(rows.filter((_, i) => i !== index))}\n          >\n            <Trash2 />\n          </Button>\n        </div>\n      ))}\n      <Button\n        variant=\"ghost\"\n        size=\"xs\"\n        className=\"self-start\"\n        onClick={() =>\n          onChange?.([...rows, { id: `row-${Date.now()}`, name: '', value: '', enabled: true }])\n        }\n      >\n        <Plus />\n        {addLabel}\n      </Button>\n    </div>\n  )\n\n  return (\n    <div\n      data-slot=\"request-builder\"\n      className={cn(surface, radius.surface, 'flex flex-col overflow-hidden', className)}\n      {...props}\n    >\n      <div className=\"border-border flex flex-wrap items-center gap-2 border-b p-3\">\n        <Select\n          size=\"sm\"\n          className=\"w-28 shrink-0\"\n          aria-label=\"Method\"\n          value={method}\n          onValueChange={(next) => onMethodChange?.(next)}\n          options={METHODS.map((m) => ({ value: m, label: m }))}\n        />\n        <Input\n          size=\"sm\"\n          value={url}\n          placeholder={urlPlaceholder}\n          aria-label={urlLabel}\n          containerClassName=\"min-w-40 flex-1\"\n          className=\"font-mono text-xs\"\n          onChange={(event) => onUrlChange?.(event.target.value)}\n        />\n        {onSend && (\n          <Button size=\"sm\" disabled={sending || !url} onClick={onSend}>\n            <Send />\n            {sendLabel}\n          </Button>\n        )}\n      </div>\n\n      <Section title={paramsLabel} count={params.length} defaultOpen>\n        {rowEditor(params, onParamsChange)}\n      </Section>\n\n      <Section title={headersLabel} count={headers.length}>\n        {rowEditor(headers, onHeadersChange)}\n      </Section>\n\n      {/* A GET body is legal in the RFC and widely stripped by proxies.\n          Offering it invites an afternoon of debugging. */}\n      {!bodyless && (\n        <Section title={bodyLabel}>\n          <Textarea\n            rows={6}\n            value={body}\n            className=\"font-mono text-xs\"\n            aria-label={typeof bodyLabel === 'string' ? bodyLabel : 'Body'}\n            onChange={(event) => onBodyChange?.(event.target.value)}\n          />\n        </Section>\n      )}\n\n      {assembled && (\n        <p className=\"border-border text-muted-foreground border-t p-3 font-mono text-xs break-all\">\n          {assembled}\n        </p>\n      )}\n    </div>\n  )\n}\n\n/** One disclosure row, at module scope so it is a stable component type. */\nfunction Section({\n  title,\n  count,\n  defaultOpen = false,\n  children,\n}: {\n  title: ReactNode\n  count?: number\n  defaultOpen?: boolean\n  children: ReactNode\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen} className=\"border-border border-t\">\n      <CollapsibleTrigger className=\"hover:bg-accent/40 w-full p-3 text-start text-xs font-medium\">\n        <span className=\"flex-1\">{title}</span>\n        {count !== undefined && count > 0 && (\n          <Badge size=\"sm\" color=\"neutral\">\n            {count}\n          </Badge>\n        )}\n      </CollapsibleTrigger>\n      {/* Padding goes on the inner content, not on CollapsibleContent itself:\n          that element's height is animated from its child's measured height,\n          so padding on the wrapper is excluded from the measurement and the\n          panel opens to the padding alone. */}\n      <CollapsibleContent>\n        <div className=\"p-3 pt-0\">{children}</div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n\nexport { RequestBuilder }\n"
+    }
+  ]
+}

package/registry/items/resizable.json

@@ -0,0 +1,22 @@
+{
+  "name": "resizable",
+  "type": "registry:ui",
+  "title": "Resizable",
+  "description": "Two panels with a draggable divider. Sizes are percentages, so the split survives a container resize — and the handle is a real slider, so arrow keys resize it too.",
+  "category": "Navigation",
+  "dependencies": [
+    "lucide-react@^1.39.0"
+  ],
+  "registryDependencies": [
+    "lib-styles",
+    "lib-utils",
+    "primitive-media-query"
+  ],
+  "files": [
+    {
+      "path": "components/ui/resizable.tsx",
+      "type": "registry:ui",
+      "content": "import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentProps,\n  type ReactNode,\n} from 'react'\nimport { GripVertical } from 'lucide-react'\nimport { useBreakpoint } from '@/components/primitives/media-query'\nimport { focusRing, type Responsive } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * Two panels with a draggable divider between them.\n *\n * Sizes are percentages, so the split survives a container resize. Pointer\n * capture is what makes the drag reliable — without it, moving faster than the\n * browser repaints drops the pointer outside the handle and the drag stops.\n *\n * The handle is also a real slider: arrow keys move it, which is the only way a\n * keyboard user can resize at all.\n */\nfunction Resizable({\n  handleLabel = 'Resize panels',\n  className,\n  orientation = 'horizontal',\n  defaultSize = 50,\n  minSize = 15,\n  maxSize = 85,\n  onResize,\n  responsive = 'md',\n  children,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children' | 'onResize'> & {\n  orientation?: 'horizontal' | 'vertical'\n  /** Percentage taken by the first panel. */\n  defaultSize?: number\n  minSize?: number\n  maxSize?: number\n  onResize?: (size: number) => void\n  /**\n   * Breakpoint a horizontal split stays side by side at. Below it the panels\n   * stack, because two columns on a phone give each about 180px.\n   *\n   * Unlike the other responsive components this cannot be done in CSS: the\n   * pointer maths, the arrow keys and the ARIA orientation all depend on which\n   * axis is being dragged, so the orientation has to genuinely change.\n   */\n  responsive?: Responsive\n  /** Accessible name for the drag handle. */\n  handleLabel?: string\n  children: [ReactNode, ReactNode]\n}) {\n  const wide = useBreakpoint(responsive === false ? 'sm' : responsive)\n  const vertical =\n    orientation === 'vertical' || (responsive !== false && !wide)\n\n  const [size, setSize] = useState(defaultSize)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const dragging = useRef(false)\n\n  const apply = useCallback(\n    (next: number) => {\n      const clamped = Math.min(maxSize, Math.max(minSize, next))\n      setSize(clamped)\n      onResize?.(clamped)\n    },\n    [minSize, maxSize, onResize],\n  )\n\n  const onPointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!dragging.current || !containerRef.current) return\n      const rect = containerRef.current.getBoundingClientRect()\n      const ratio = vertical\n        ? (event.clientY - rect.top) / rect.height\n        : (event.clientX - rect.left) / rect.width\n      apply(ratio * 100)\n    },\n    [vertical, apply],\n  )\n\n  useEffect(() => {\n    const stop = () => {\n      dragging.current = false\n      document.body.style.userSelect = ''\n    }\n    document.addEventListener('pointermove', onPointerMove)\n    document.addEventListener('pointerup', stop)\n    return () => {\n      document.removeEventListener('pointermove', onPointerMove)\n      document.removeEventListener('pointerup', stop)\n      stop()\n    }\n  }, [onPointerMove])\n\n  const step = (delta: number) => apply(size + delta)\n\n  return (\n    <div\n      ref={containerRef}\n      data-slot=\"resizable\"\n      className={cn('flex w-full', vertical ? 'flex-col' : 'flex-row', className)}\n      {...props}\n    >\n      {/* Each panel is a flex column, so a single child can take `flex-1` and\n          fill it. `height: 100%` inside a panel would depend on the parent's\n          height being definite, which it is not while the split is being\n          dragged. */}\n      <div\n        style={{ flexBasis: `${size}%` }}\n        className=\"flex min-h-0 min-w-0 flex-col overflow-hidden\"\n      >\n        {children[0]}\n      </div>\n\n      <div\n        role=\"separator\"\n        tabIndex={0}\n        aria-orientation={vertical ? 'horizontal' : 'vertical'}\n        aria-valuenow={Math.round(size)}\n        aria-valuemin={minSize}\n        aria-valuemax={maxSize}\n        aria-label={handleLabel}\n        onPointerDown={(event) => {\n          event.preventDefault()\n          dragging.current = true\n          // Keeps events coming to this element even when the pointer outruns\n          // it, which is what makes a fast drag not fall off the handle.\n          event.currentTarget.setPointerCapture(event.pointerId)\n          document.body.style.userSelect = 'none'\n        }}\n        onKeyDown={(event) => {\n          const back = vertical ? 'ArrowUp' : 'ArrowLeft'\n          const forward = vertical ? 'ArrowDown' : 'ArrowRight'\n          if (event.key === back) {\n            event.preventDefault()\n            step(event.shiftKey ? -10 : -2)\n          } else if (event.key === forward) {\n            event.preventDefault()\n            step(event.shiftKey ? 10 : 2)\n          } else if (event.key === 'Home') {\n            event.preventDefault()\n            apply(minSize)\n          } else if (event.key === 'End') {\n            event.preventDefault()\n            apply(maxSize)\n          }\n        }}\n        className={cn(\n          'bg-border hover:bg-[var(--border-active)] group relative flex shrink-0 items-center justify-center transition-colors duration-150 ease-out motion-reduce:transition-none',\n          focusRing,\n          // `self-stretch` rather than `h-full`: the handle is a flex child, so\n          // stretching fills the cross axis whether or not the container's\n          // height is definite. `h-full` collapses the line to nothing when it\n          // is not.\n          vertical\n            ? 'h-px w-full cursor-row-resize'\n            : 'w-px cursor-col-resize self-stretch',\n        )}\n      >\n        <span\n          className={cn(\n            'bg-border group-hover:bg-[var(--border-active)] text-muted-foreground absolute grid place-items-center rounded-sm transition-colors duration-150 ease-out motion-reduce:transition-none',\n            vertical ? 'h-3 w-6' : 'h-6 w-3',\n          )}\n        >\n          <GripVertical className={cn('size-3', vertical && 'rotate-90')} />\n        </span>\n      </div>\n\n      <div className=\"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden\">\n        {children[1]}\n      </div>\n    </div>\n  )\n}\n\nexport { Resizable }\n"
+    }
+  ]
+}

package/registry/items/resource-meter.json

@@ -0,0 +1,19 @@
+{
+  "name": "resource-meter",
+  "type": "registry:ui",
+  "title": "Resource Meter",
+  "description": "Used against a cap: build minutes, storage, seats, rate limits. Unlike Progress it can exceed 100%, because a quota can be 130% used and hiding that is how a bill becomes a surprise.",
+  "category": "Operations",
+  "dependencies": [],
+  "registryDependencies": [
+    "fmt",
+    "lib-utils"
+  ],
+  "files": [
+    {
+      "path": "components/ui/resource-meter.tsx",
+      "type": "registry:ui",
+      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { Fmt } from '@/components/ui/fmt'\nimport { cn } from '@/lib/utils'\n\n/**\n * A used-against-cap bar: build minutes, storage, seats, rate limits.\n *\n * Not `Progress`, which reports how far along a task is. This reports\n * consumption of a fixed budget, so it warns as it fills and can overflow past\n * 100% — a task cannot be 130% done, but a quota can be 130% used, and hiding\n * that by clamping is how a bill becomes a surprise.\n */\nfunction ResourceMeter({\n  label,\n  used,\n  cap,\n  unit = 'number',\n  tone,\n  hint,\n  size = 'default',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  label: ReactNode\n  used: number\n  cap: number\n  /** How the numbers are written. */\n  unit?: 'number' | 'bytes' | 'duration'\n  /** Any CSS colour. Defaults to a threshold ramp. */\n  tone?: string\n  hint?: ReactNode\n  size?: 'sm' | 'default'\n}) {\n  const ratio = cap > 0 ? used / cap : 0\n  const over = ratio > 1\n  const percent = Math.round(ratio * 100)\n\n  const colour =\n    tone ??\n    (over || ratio >= 0.95\n      ? 'var(--destructive)'\n      : ratio >= 0.8\n        ? 'var(--amber)'\n        : 'var(--blue)')\n\n  return (\n    <div\n      data-slot=\"resource-meter\"\n      className={cn('flex min-w-0 flex-col gap-1.5', className)}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5\">\n        <span className={cn('font-medium', size === 'sm' ? 'text-xs' : 'text-sm')}>\n          {label}\n        </span>\n        <span className=\"text-muted-foreground text-xs tabular-nums\">\n          <Fmt type={unit} value={used} /> / <Fmt type={unit} value={cap} />\n          <span className={cn('ms-1.5', over && 'text-[var(--destructive-soft-foreground)] font-medium')}>\n            ({percent}%)\n          </span>\n        </span>\n      </div>\n\n      <div\n        role=\"progressbar\"\n        aria-valuenow={used}\n        aria-valuemin={0}\n        aria-valuemax={cap}\n        aria-label={typeof label === 'string' ? label : undefined}\n        className={cn(\n          'bg-secondary w-full overflow-hidden rounded-full [corner-shape:round]',\n          size === 'sm' ? 'h-1.5' : 'h-2',\n        )}\n      >\n        <div\n          className=\"h-full rounded-full transition-[width,background-color] duration-300 ease-out [corner-shape:round] motion-reduce:transition-none\"\n          style={{\n            // Clamped for the bar only — the number above still says 130%.\n            width: `${Math.min(ratio, 1) * 100}%`,\n            backgroundColor: colour,\n          }}\n        />\n      </div>\n\n      {hint && <p className=\"text-muted-foreground/70 text-xs\">{hint}</p>}\n      {over && !hint && (\n        <p className=\"text-[var(--destructive-soft-foreground)] text-xs\">\n          Over budget by <Fmt type={unit} value={used - cap} />\n        </p>\n      )}\n    </div>\n  )\n}\n\nexport { ResourceMeter }\n"
+    }
+  ]
+}

package/registry/items/response-viewer.json

@@ -0,0 +1,26 @@
+{
+  "name": "response-viewer",
+  "type": "registry:ui",
+  "title": "Response Viewer",
+  "description": "Status, timing, size, headers and body. The three headline figures share one line because they are read together — a 200 that took 4 seconds is a different result from one that took 40ms.",
+  "category": "API",
+  "dependencies": [],
+  "registryDependencies": [
+    "badge",
+    "code-block",
+    "collapsible",
+    "fmt",
+    "http-status",
+    "json-viewer",
+    "lib-highlighter",
+    "lib-styles",
+    "lib-utils"
+  ],
+  "files": [
+    {
+      "path": "components/ui/response-viewer.tsx",
+      "type": "registry:ui",
+      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { CodeBlock } from '@/components/ui/code-block'\nimport type { Language } from '@/lib/highlighter'\nimport { HttpStatus } from '@/components/ui/http-status'\nimport { JsonViewer, type Json } from '@/components/ui/json-viewer'\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'\nimport { Badge } from '@/components/ui/badge'\nimport { Fmt } from '@/components/ui/fmt'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * An HTTP response: status, timing, size, headers and body.\n *\n * Status, time and size sit together on one line because they are read\n * together — a 200 that took 4 seconds and returned 8MB is a different result\n * from a 200 that took 40ms, and separating them into panels makes that\n * comparison impossible.\n *\n * Body, headers and raw are stacked disclosures rather than tabs. Their heights\n * differ by an order of magnitude, so a shared tab panel resizes the card on\n * every switch — the strip moves out from under the pointer and the next click\n * lands on nothing. Stacking also lets headers and body be read together, which\n * is what diagnosing a response actually takes.\n *\n * A JSON body gets the tree view, anything else gets syntax-highlighted text.\n * Rendering JSON as a wall of text is technically honest and practically\n * useless; rendering HTML as a tree is nonsense.\n *\n * Header names are lower-cased for display. HTTP header names are\n * case-insensitive and servers are inconsistent about them, so preserving the\n * original casing means `Content-Type` and `content-type` sort apart in a list\n * someone is scanning alphabetically.\n */\nexport type ResponseHeader = { name: string; value: string }\n\nfunction ResponseViewer({\n  status,\n  statusText,\n  durationMs,\n  sizeBytes,\n  headers = [],\n  body,\n  contentType,\n  bodyLabel = 'Body',\n  headersLabel = 'Headers',\n  rawLabel = 'Raw',\n  emptyBodyLabel = 'No body',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  status: number\n  statusText?: string\n  durationMs?: number\n  sizeBytes?: number\n  headers?: ResponseHeader[]\n  /** A string, or a parsed object for the tree view. */\n  body?: string | object\n  contentType?: string\n  bodyLabel?: ReactNode\n  headersLabel?: ReactNode\n  rawLabel?: ReactNode\n  emptyBodyLabel?: ReactNode\n}) {\n  const json =\n    typeof body === 'object' && body !== null\n      ? (body as Json)\n      : typeof body === 'string' && /json/i.test(contentType ?? '')\n        ? (() => {\n            try {\n              return JSON.parse(body) as Json\n            } catch {\n              return undefined\n            }\n          })()\n        : undefined\n\n  const raw = typeof body === 'string' ? body : body ? JSON.stringify(body, null, 2) : ''\n  // The highlighter has no plain-text grammar; JSON is the closest neutral one.\n  const language: Language = /html|xml/i.test(contentType ?? '')\n    ? 'html'\n    : /json/i.test(contentType ?? '')\n      ? 'json'\n      : 'bash'\n\n  return (\n    <div\n      data-slot=\"response-viewer\"\n      className={cn(surface, radius.surface, 'flex flex-col overflow-hidden', className)}\n      {...props}\n    >\n      {/* Status, time and size on one line: they are only meaningful together. */}\n      <div className=\"border-border flex flex-wrap items-center gap-3 border-b p-3\">\n        <HttpStatus status={status} phrase={statusText} />\n        {durationMs !== undefined && (\n          <span\n            className={cn(\n              'text-xs tabular-nums',\n              durationMs > 1000 ? 'text-[var(--amber-soft-foreground)]' : 'text-muted-foreground',\n            )}\n          >\n            {durationMs < 1000 ? `${Math.round(durationMs)}ms` : `${(durationMs / 1000).toFixed(2)}s`}\n          </span>\n        )}\n        {sizeBytes !== undefined && (\n          <span className=\"text-muted-foreground text-xs tabular-nums\">\n            <Fmt type=\"bytes\" value={sizeBytes} />\n          </span>\n        )}\n        {contentType && (\n          <span className=\"text-muted-foreground/70 ms-auto truncate font-mono text-xs\">\n            {contentType}\n          </span>\n        )}\n      </div>\n\n      <Section title={bodyLabel} defaultOpen>\n        {json !== undefined ? (\n          <JsonViewer value={json} defaultExpandedDepth={2} />\n        ) : raw ? (\n          <CodeBlock code={raw} language={language} maxLines={20} header={false} />\n        ) : (\n          <p className=\"text-muted-foreground p-4 text-center text-sm\">{emptyBodyLabel}</p>\n        )}\n      </Section>\n\n      <Section title={headersLabel} count={headers.length}>\n        <dl className=\"grid grid-cols-[minmax(0,14rem)_minmax(0,1fr)] gap-x-3 gap-y-1.5 font-mono text-xs\">\n          {[...headers]\n            // Lower-cased and sorted: HTTP header names are case-insensitive\n            // and servers are inconsistent, which breaks an A–Z scan.\n            .map((h) => ({ name: h.name.toLowerCase(), value: h.value }))\n            .sort((a, b) => a.name.localeCompare(b.name))\n            .map((header) => (\n              <div key={header.name} className=\"contents\">\n                <dt className=\"text-muted-foreground truncate\">{header.name}</dt>\n                <dd className=\"min-w-0 break-all\">{header.value}</dd>\n              </div>\n            ))}\n        </dl>\n      </Section>\n\n      <Section title={rawLabel}>\n        <CodeBlock code={raw || '(empty)'} language={language} maxLines={24} header={false} />\n      </Section>\n\n    </div>\n  )\n}\n\n/**\n * One disclosure row. At module scope so it is not a new component type on\n * every render of the viewer.\n */\nfunction Section({\n  title,\n  count,\n  defaultOpen = false,\n  children,\n}: {\n  title: ReactNode\n  count?: number\n  defaultOpen?: boolean\n  children: ReactNode\n}) {\n  return (\n    <Collapsible defaultOpen={defaultOpen} className=\"border-border border-t first:border-t-0\">\n      <CollapsibleTrigger className=\"hover:bg-accent/40 w-full p-3 text-start text-xs font-medium\">\n        <span className=\"flex-1\">{title}</span>\n        {count !== undefined && (\n          <Badge size=\"sm\" color=\"neutral\">\n            {count}\n          </Badge>\n        )}\n      </CollapsibleTrigger>\n      {/* Padding goes on the inner content, not on CollapsibleContent itself:\n          that element's height is animated from its child's measured height,\n          so padding on the wrapper is excluded from the measurement and the\n          panel opens to the padding alone. */}\n      <CollapsibleContent>\n        <div className=\"p-3 pt-0\">{children}</div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n\nexport { ResponseViewer }\n"
+    }
+  ]
+}

package/registry/items/retrieval-results.json

@@ -0,0 +1,23 @@
+{
+  "name": "retrieval-results",
+  "type": "registry:ui",
+  "title": "Retrieval Results",
+  "description": "The chunks a retrieval step pulled, with relevance. Near-misses are dimmed rather than dropped — when an answer is wrong, \"what did it nearly retrieve\" is the useful question.",
+  "category": "AI",
+  "dependencies": [
+    "lucide-react@^1.39.0"
+  ],
+  "registryDependencies": [
+    "badge",
+    "confidence-meter",
+    "lib-styles",
+    "lib-utils"
+  ],
+  "files": [
+    {
+      "path": "components/ui/retrieval-results.tsx",
+      "type": "registry:ui",
+      "content": "import { useState, type ComponentProps, type ReactNode } from 'react'\nimport { ChevronDown, ChevronRight, FileText } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { ConfidenceMeter } from '@/components/ui/confidence-meter'\nimport { focusRing, interactive, radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * The chunks a retrieval step pulled, with their relevance.\n *\n * Chunks below `threshold` are still listed, dimmed, rather than dropped. When\n * an answer is wrong the useful question is usually \"what did it nearly\n * retrieve\" — a list that silently hides the near-misses cannot answer it.\n *\n * Scores use `ConfidenceMeter`'s banding rather than a raw number, for the same\n * reason: a cosine similarity of 0.82 is not a calibrated probability and\n * printing two decimals implies a precision it does not have.\n */\nexport type RetrievedChunk = {\n  id: string\n  /** 0–1. */\n  score: number\n  content: ReactNode\n  source: string\n  page?: number\n  metadata?: Record<string, string>\n}\n\nfunction RetrievalResults({\n  chunks,\n  query,\n  threshold = 0.5,\n  defaultExpanded,\n  title = 'Retrieved context',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  chunks: RetrievedChunk[]\n  query?: ReactNode\n  /** Below this a chunk is dimmed, not hidden. */\n  threshold?: number\n  defaultExpanded?: string[]\n  title?: ReactNode\n}) {\n  const [expanded, setExpanded] = useState<string[]>(\n    // The top hit opens: it is the one that shaped the answer.\n    defaultExpanded ?? (chunks[0] ? [chunks[0].id] : []),\n  )\n\n  const used = chunks.filter((chunk) => chunk.score >= threshold).length\n\n  return (\n    <div\n      data-slot=\"retrieval-results\"\n      className={cn(surface, radius.surface, 'overflow-hidden', className)}\n      {...props}\n    >\n      <div className=\"border-border flex flex-wrap items-center gap-2 border-b p-3\">\n        <span className=\"text-sm font-medium\">{title}</span>\n        <Badge size=\"sm\">{used} of {chunks.length} above threshold</Badge>\n        {query && (\n          <span className=\"text-muted-foreground w-full truncate text-xs\">\n            for “{query}”\n          </span>\n        )}\n      </div>\n\n      <ul className=\"list-none divide-y divide-[var(--border)]\">\n        {chunks.map((chunk) => {\n          const open = expanded.includes(chunk.id)\n          const weak = chunk.score < threshold\n\n          return (\n            <li key={chunk.id} className={cn(weak && 'opacity-55')}>\n              <button\n                type=\"button\"\n                aria-expanded={open}\n                onClick={() =>\n                  setExpanded((current) =>\n                    open\n                      ? current.filter((id) => id !== chunk.id)\n                      : [...current, chunk.id],\n                  )\n                }\n                className={cn(\n                  'hover:bg-accent/40 flex w-full items-center gap-2 p-3 text-start',\n                  interactive,\n                  focusRing,\n                )}\n              >\n                {open ? (\n                  <ChevronDown className=\"text-muted-foreground size-3.5 shrink-0\" />\n                ) : (\n                  <ChevronRight className=\"text-muted-foreground size-3.5 shrink-0\" />\n                )}\n                <FileText className=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n\n                <span className=\"min-w-0 flex-1\">\n                  <span className=\"block truncate text-sm\">{chunk.source}</span>\n                  {chunk.page !== undefined && (\n                    <span className=\"text-muted-foreground block text-xs\">\n                      page {chunk.page}\n                    </span>\n                  )}\n                </span>\n\n                <ConfidenceMeter\n                  value={chunk.score}\n                  showLabel={false}\n                  size=\"sm\"\n                  label=\"Relevance\"\n                  className=\"w-16 shrink-0\"\n                />\n              </button>\n\n              {open && (\n                <div className=\"bg-muted/30 border-border/60 border-t p-3\">\n                  <p className=\"text-muted-foreground text-sm\">{chunk.content}</p>\n\n                  {chunk.metadata && (\n                    <dl className=\"mt-2 flex flex-wrap gap-x-4 gap-y-1 text-xs\">\n                      {Object.entries(chunk.metadata).map(([key, value]) => (\n                        <div key={key} className=\"flex gap-1.5\">\n                          <dt className=\"text-muted-foreground/70\">{key}</dt>\n                          <dd className=\"font-medium\">{value}</dd>\n                        </div>\n                      ))}\n                    </dl>\n                  )}\n                </div>\n              )}\n            </li>\n          )\n        })}\n      </ul>\n    </div>\n  )\n}\n\nexport { RetrievalResults }\n"
+    }
+  ]
+}

package/registry/items/revenue-share-table.json

@@ -0,0 +1,20 @@
+{
+  "name": "revenue-share-table",
+  "type": "registry:ui",
+  "title": "Revenue Share Table",
+  "description": "How a payout splits between parties. The unallocated remainder gets a named row instead of leaving the reader to subtract, and a split exceeding 100% is called out rather than quietly rendered.",
+  "category": "Affiliate",
+  "dependencies": [],
+  "registryDependencies": [
+    "fmt",
+    "lib-utils",
+    "table"
+  ],
+  "files": [
+    {
+      "path": "components/ui/revenue-share-table.tsx",
+      "type": "registry:ui",
+      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { Fmt } from '@/components/ui/fmt'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\nimport { cn } from '@/lib/utils'\n\n/**\n * How a payout splits between parties.\n *\n * The rows are shares of a gross figure, so the table adds them up and shows the\n * remainder as a named row rather than leaving the reader to subtract. A split\n * that does not reach 100% is the normal case — the house keeps the rest — and a\n * split that exceeds it is a configuration error worth seeing immediately.\n *\n * Each party's amount is computed from the gross rather than passed in, because\n * a percentage beside an amount that contradicts it is worse than either alone.\n */\nexport type RevenueShareRow = {\n  id: string\n  party: ReactNode\n  /** Share of gross, 0–1. */\n  share: number\n  note?: ReactNode\n}\n\nfunction RevenueShareTable({\n  rows,\n  gross,\n  currency = 'USD',\n  locale = 'en-GB',\n  remainderLabel = 'Retained',\n  partyHeader = 'Party',\n  shareHeader = 'Share',\n  amountHeader = 'Amount',\n  grossLabel = 'Gross',\n  overAllocatedLabel = 'Over-allocated',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  rows: RevenueShareRow[]\n  gross: number\n  currency?: string\n  locale?: string\n  remainderLabel?: ReactNode\n  partyHeader?: ReactNode\n  shareHeader?: ReactNode\n  amountHeader?: ReactNode\n  /** Label on the total row. */\n  grossLabel?: ReactNode\n  /** Replaces `remainderLabel` when the shares exceed 100%. */\n  overAllocatedLabel?: ReactNode\n}) {\n  const allocated = rows.reduce((total, row) => total + row.share, 0)\n  const remainder = 1 - allocated\n  // Floating-point shares never sum exactly; a hair either side is not an error.\n  const over = remainder < -0.0001\n\n  return (\n    <div data-slot=\"revenue-share-table\" className={cn('flex flex-col gap-2', className)} {...props}>\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>{partyHeader}</TableHead>\n            <TableHead className=\"w-24 text-end\">{shareHeader}</TableHead>\n            <TableHead className=\"w-32 text-end\">{amountHeader}</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {rows.map((row) => (\n            <TableRow key={row.id}>\n              <TableCell>\n                <span className=\"font-medium\">{row.party}</span>\n                {row.note && (\n                  <span className=\"text-muted-foreground block text-xs\">{row.note}</span>\n                )}\n              </TableCell>\n              <TableCell className=\"text-end tabular-nums\">\n                <Fmt type=\"percent\" value={row.share} decimals={row.share * 100 % 1 ? 1 : 0} locale={locale} />\n              </TableCell>\n              <TableCell className=\"text-end tabular-nums\">\n                <Fmt\n                  type=\"currency\"\n                  value={gross * row.share}\n                  currency={currency}\n                  locale={locale}\n                  decimals={2}\n                />\n              </TableCell>\n            </TableRow>\n          ))}\n\n          {/* Named, not left as an exercise in subtraction. */}\n          {Math.abs(remainder) > 0.0001 && (\n            <TableRow className={over ? 'text-[var(--destructive-soft-foreground)]' : undefined}>\n              <TableCell className=\"text-muted-foreground\">\n                {over ? overAllocatedLabel : remainderLabel}\n              </TableCell>\n              <TableCell className=\"text-end tabular-nums\">\n                <Fmt type=\"percent\" value={Math.abs(remainder)} decimals={1} locale={locale} />\n              </TableCell>\n              <TableCell className=\"text-end tabular-nums\">\n                <Fmt\n                  type=\"currency\"\n                  value={Math.abs(gross * remainder)}\n                  currency={currency}\n                  locale={locale}\n                  decimals={2}\n                />\n              </TableCell>\n            </TableRow>\n          )}\n        </TableBody>\n        <TableFooter>\n          <TableRow>\n            <TableCell className=\"font-medium\">{grossLabel}</TableCell>\n            <TableCell className=\"text-muted-foreground text-end tabular-nums\">\n              100%\n            </TableCell>\n            <TableCell className=\"text-end font-semibold tabular-nums\">\n              <Fmt type=\"currency\" value={gross} currency={currency} locale={locale} decimals={2} />\n            </TableCell>\n          </TableRow>\n        </TableFooter>\n      </Table>\n    </div>\n  )\n}\n\nexport { RevenueShareTable }\n"
+    }
+  ]
+}

package/registry/items/review-thread.json

@@ -0,0 +1,25 @@
+{
+  "name": "review-thread",
+  "type": "registry:ui",
+  "title": "Review Thread",
+  "description": "A review conversation anchored to a line of code, with the line shown as context. Resolving is always a callback — a resolved thread is server truth other reviewers see.",
+  "category": "Development",
+  "dependencies": [
+    "lucide-react@^1.39.0"
+  ],
+  "registryDependencies": [
+    "avatar",
+    "badge",
+    "button",
+    "lib-styles",
+    "lib-utils",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "components/ui/review-thread.tsx",
+      "type": "registry:ui",
+      "content": "import { useState, type ComponentProps, type ReactNode } from 'react'\nimport { Check, MessageSquare } from 'lucide-react'\nimport { Avatar } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Textarea } from '@/components/ui/textarea'\nimport { radius } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * A review conversation anchored to a line of code.\n *\n * The anchor is rendered as context above the comments — a thread detached\n * from the line it is about is unreadable, and re-finding that line is the\n * main cost of reviewing in a browser.\n *\n * Resolving is a callback, never local state. A resolved thread is server\n * truth that other reviewers see; a component that hid it locally would show\n * two people different threads on the same diff.\n */\nexport type ReviewComment = {\n  id: string\n  author: string\n  body: ReactNode\n  time?: ReactNode\n  /** Marks the review that requested changes. */\n  pending?: boolean\n}\n\nfunction ReviewThread({\n  path,\n  line,\n  snippet,\n  comments,\n  resolved = false,\n  onResolve,\n  onReply,\n  resolvedLabel = 'Resolved',\n  pendingLabel = 'Pending',\n  replyLabel = 'Reply',\n  replyPlaceholder = 'Reply…',\n  replyFieldLabel = 'Reply to thread',\n  resolveLabel = 'Resolve',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'onSubmit'> & {\n  path?: string\n  line?: number\n  /** The anchored source line. */\n  snippet?: string\n  comments: ReviewComment[]\n  resolved?: boolean\n  onResolve?: () => void\n  onReply?: (body: string) => void\n  resolvedLabel?: ReactNode\n  /** Badge on a comment awaiting a reply. */\n  pendingLabel?: ReactNode\n  replyLabel?: ReactNode\n  replyPlaceholder?: string\n  /** Accessible name for the reply field. */\n  replyFieldLabel?: string\n  resolveLabel?: ReactNode\n}) {\n  const [draft, setDraft] = useState('')\n\n  return (\n    <div\n      data-slot=\"review-thread\"\n      data-resolved={resolved || undefined}\n      className={cn(\n        'border-border overflow-hidden border',\n        radius.surface,\n        resolved && 'opacity-70',\n        className,\n      )}\n      {...props}\n    >\n      {(path || snippet) && (\n        <div className=\"border-border bg-muted/40 border-b p-3\">\n          <div className=\"flex items-center gap-2\">\n            <MessageSquare className=\"text-muted-foreground size-3.5 shrink-0\" />\n            <span className=\"text-muted-foreground min-w-0 flex-1 truncate font-mono text-xs\">\n              {path}\n              {line !== undefined && `:${line}`}\n            </span>\n            {resolved && (\n              <Badge size=\"sm\" color=\"green\">\n                <Check />\n                {resolvedLabel}\n              </Badge>\n            )}\n          </div>\n\n          {snippet && (\n            <pre className=\"text-muted-foreground mt-2 overflow-x-auto font-mono text-xs\">\n              <code>{snippet}</code>\n            </pre>\n          )}\n        </div>\n      )}\n\n      <ul className=\"divide-border/60 flex list-none flex-col divide-y\">\n        {comments.map((comment) => (\n          <li key={comment.id} className=\"flex gap-2.5 px-3 py-2.5\">\n            <Avatar size=\"xs\" name={comment.author} className=\"mt-0.5 shrink-0\" />\n            <div className=\"min-w-0 flex-1\">\n              <div className=\"flex flex-wrap items-baseline gap-x-2\">\n                <span className=\"text-sm font-medium\">{comment.author}</span>\n                {comment.time && (\n                  <span className=\"text-muted-foreground text-xs\">{comment.time}</span>\n                )}\n                {comment.pending && (\n                  <Badge size=\"sm\" color=\"amber\">\n                    {pendingLabel}\n                  </Badge>\n                )}\n              </div>\n              <div className=\"text-muted-foreground mt-0.5 text-sm\">\n                {comment.body}\n              </div>\n            </div>\n          </li>\n        ))}\n      </ul>\n\n      {(onReply || onResolve) && !resolved && (\n        <div className=\"border-border flex flex-col gap-2 border-t p-3\">\n          {onReply && (\n            <Textarea\n              rows={2}\n              autoResize\n              aria-label={replyFieldLabel}\n              placeholder={replyPlaceholder}\n              value={draft}\n              onChange={(event) => setDraft(event.target.value)}\n            />\n          )}\n          <div className=\"flex flex-wrap items-center gap-2\">\n            {onReply && (\n              <Button\n                size=\"sm\"\n                disabled={!draft.trim()}\n                onClick={() => {\n                  onReply(draft)\n                  setDraft('')\n                }}\n              >\n                {replyLabel}\n              </Button>\n            )}\n            {onResolve && (\n              <Button variant=\"secondary\" size=\"sm\" onClick={onResolve}>\n                <Check />\n                {resolveLabel}\n              </Button>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { ReviewThread }\n"
+    }
+  ]
+}

package/registry/items/risk-score.json

@@ -0,0 +1,18 @@
+{
+  "name": "risk-score",
+  "type": "registry:ui",
+  "title": "Risk Score",
+  "description": "A score with the signals that produced it. The factors are the component, not a detail beside it — an analyst cannot approve or decline on \"82\", and an unexplained score is the one thing a regulator will ask you to justify.",
+  "category": "Security",
+  "dependencies": [],
+  "registryDependencies": [
+    "lib-utils"
+  ],
+  "files": [
+    {
+      "path": "components/ui/risk-score.tsx",
+      "type": "registry:ui",
+      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\n/**\n * A 0–100 risk score with the signals that produced it.\n *\n * The contributing factors are the component, not a detail beside it. A bare\n * number is unactionable — an analyst cannot approve or decline on \"82\" — and an\n * unexplained score is also the one thing a regulator will ask you to justify.\n *\n * Bands are named, not just coloured. \"High\" survives being printed, screenshot\n * into a ticket, or read by someone who cannot distinguish amber from green;\n * the colour is reinforcement.\n *\n * Weights are drawn relative to the largest contributor rather than to 100, so\n * a set of small signals still shows its shape instead of five invisible bars.\n */\nexport type RiskFactor = {\n  label: ReactNode\n  /** Points contributed. Negative values lower the score. */\n  weight: number\n  detail?: ReactNode\n}\n\nexport type RiskBand = { min: number; label: string; color: string; ink: string }\n\nconst BANDS: RiskBand[] = [\n  { min: 0, label: 'Low', color: 'var(--green)', ink: 'var(--green-soft-foreground)' },\n  { min: 34, label: 'Elevated', color: 'var(--amber)', ink: 'var(--amber-soft-foreground)' },\n  { min: 67, label: 'High', color: 'var(--destructive)', ink: 'var(--destructive-soft-foreground)' },\n]\n\nfunction bandFor(score: number, bands: RiskBand[]) {\n  return [...bands].reverse().find((band) => score >= band.min) ?? bands[0]\n}\n\nfunction RiskScore({\n  score,\n  factors,\n  bands = BANDS,\n  max = 100,\n  label = 'Risk score',\n  size = 'md',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  score: number\n  factors?: RiskFactor[]\n  bands?: RiskBand[]\n  max?: number\n  label?: ReactNode\n  size?: 'sm' | 'md'\n}) {\n  const clamped = Math.max(0, Math.min(max, score))\n  const band = bandFor((clamped / max) * 100, bands)\n  // Relative to the biggest signal, so small ones still read.\n  const peak = factors?.reduce((top, factor) => Math.max(top, Math.abs(factor.weight)), 0) ?? 0\n\n  return (\n    <div\n      data-slot=\"risk-score\"\n      data-band={band.label.toLowerCase()}\n      className={cn('flex flex-col gap-3', className)}\n      {...props}\n    >\n      <div className=\"flex items-baseline gap-2\">\n        <span\n          className={cn('font-semibold tabular-nums', size === 'sm' ? 'text-2xl' : 'text-3xl')}\n          style={{ color: band.ink }}\n        >\n          {Math.round(clamped)}\n        </span>\n        <span className=\"text-muted-foreground text-xs\">/ {max}</span>\n        {/* Named as well as coloured — this gets screenshotted into tickets. */}\n        <span className=\"ms-auto text-xs font-medium\" style={{ color: band.ink }}>\n          {band.label}\n        </span>\n      </div>\n\n      <div\n        role=\"meter\"\n        aria-valuenow={Math.round(clamped)}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuetext={`${Math.round(clamped)} of ${max}, ${band.label}`}\n        aria-label={typeof label === 'string' ? label : undefined}\n        className={cn('bg-secondary relative h-1.5 w-full overflow-hidden', 'rounded-full')}\n      >\n        <div\n          className=\"h-full transition-[width] duration-300\"\n          style={{ width: `${(clamped / max) * 100}%`, background: band.color }}\n        />\n      </div>\n\n      {factors && factors.length > 0 && (\n        <ul className=\"flex list-none flex-col gap-1.5\">\n          {factors.map((factor, index) => {\n            const share = peak > 0 ? Math.abs(factor.weight) / peak : 0\n            const negative = factor.weight < 0\n            return (\n              <li key={index} className=\"flex flex-col gap-1\">\n                <div className=\"flex items-baseline gap-2 text-xs\">\n                  <span className=\"min-w-0 flex-1 truncate\">{factor.label}</span>\n                  <span\n                    className=\"shrink-0 font-medium tabular-nums\"\n                    style={{ color: negative ? 'var(--green-soft-foreground)' : undefined }}\n                  >\n                    {negative ? '' : '+'}\n                    {factor.weight}\n                  </span>\n                </div>\n                <div className={cn('bg-secondary h-1 w-full overflow-hidden', 'rounded-full')}>\n                  <div\n                    className=\"h-full\"\n                    style={{\n                      width: `${share * 100}%`,\n                      background: negative ? 'var(--green)' : band.color,\n                      opacity: negative ? 1 : 0.65,\n                    }}\n                  />\n                </div>\n                {factor.detail && (\n                  <p className=\"text-muted-foreground text-xs\">{factor.detail}</p>\n                )}\n              </li>\n            )\n          })}\n        </ul>\n      )}\n    </div>\n  )\n}\n\nexport { RiskScore, BANDS as riskBands, bandFor as riskBandFor }\n"
+    }
+  ]
+}

package/registry/items/root-cause-tree.json

@@ -0,0 +1,20 @@
+{
+  "name": "root-cause-tree",
+  "type": "registry:ui",
+  "title": "Root Cause Tree",
+  "description": "A causal chain from symptom to candidate causes, each with a confidence band. Built on Tree, so it inherits the keyboard model rather than growing a second one.",
+  "category": "AIOps",
+  "dependencies": [],
+  "registryDependencies": [
+    "confidence-meter",
+    "lib-utils",
+    "tree"
+  ],
+  "files": [
+    {
+      "path": "components/ui/root-cause-tree.tsx",
+      "type": "registry:ui",
+      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { ConfidenceMeter } from '@/components/ui/confidence-meter'\nimport { Tree, type TreeNode } from '@/components/ui/tree'\nimport { cn } from '@/lib/utils'\n\n/**\n * A causal chain: symptom at the root, candidate causes beneath it.\n *\n * Built on `Tree`, so it inherits the keyboard model rather than growing a\n * second one. What it adds is confidence — each branch carries a score, and the\n * label renders it inline.\n *\n * Confidence is shown as a band, never a bare percentage. These numbers come\n * out of a correlation engine and are not calibrated probabilities; printing\n * \"87%\" beside a guess lends it a precision it has not earned.\n */\nexport type CauseNode = {\n  id: string\n  label: ReactNode\n  /** 0 to 1. */\n  confidence?: number\n  detail?: ReactNode\n  children?: CauseNode[]\n}\n\nfunction toTreeNodes(causes: CauseNode[]): TreeNode[] {\n  return causes.map((cause) => ({\n    id: cause.id,\n    label: (\n      <span className=\"flex min-w-0 flex-1 items-center gap-2\">\n        <span className=\"min-w-0 flex-1 truncate\">{cause.label}</span>\n        {cause.confidence !== undefined && (\n          <ConfidenceMeter\n            value={cause.confidence}\n            showLabel={false}\n            size=\"sm\"\n            className=\"w-16 shrink-0\"\n            label=\"Confidence\"\n          />\n        )}\n      </span>\n    ),\n    meta: cause.detail,\n    children: cause.children ? toTreeNodes(cause.children) : undefined,\n  }))\n}\n\nfunction RootCauseTree({\n  causes,\n  defaultExpanded,\n  label = 'Root cause analysis',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  causes: CauseNode[]\n  defaultExpanded?: string[]\n  /** Accessible name for the tree. */\n  label?: string\n}) {\n  const nodes = toTreeNodes(causes)\n\n  return (\n    <div data-slot=\"root-cause-tree\" className={cn('min-w-0', className)} {...props}>\n      <Tree\n        nodes={nodes}\n        defaultExpanded={defaultExpanded ?? causes.map((cause) => cause.id)}\n        aria-label={label}\n      />\n    </div>\n  )\n}\n\nexport { RootCauseTree }\n"
+    }
+  ]
+}

package/registry/items/round-history.json

@@ -0,0 +1,21 @@
+{
+  "name": "round-history",
+  "type": "registry:ui",
+  "title": "Round History",
+  "description": "Recent results as a strip. It carries an explicit note that past rounds do not predict the next one, because a row of results is read as a pattern whether or not one exists.",
+  "category": "Gaming",
+  "dependencies": [],
+  "registryDependencies": [
+    "fmt",
+    "lib-styles",
+    "lib-utils",
+    "tooltip"
+  ],
+  "files": [
+    {
+      "path": "components/ui/round-history.tsx",
+      "type": "registry:ui",
+      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { Tooltip } from '@/components/ui/tooltip'\nimport { Fmt } from '@/components/ui/fmt'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * Recent round outcomes as a strip of chips.\n *\n * Newest first, left to right. Game histories are read the way a ticker is —\n * the most recent result is the one being reacted to — and appending to the end\n * buries it off the right edge on a phone.\n *\n * The thresholds that colour a chip are props, because \"high\" means 2× in one\n * game and 100× in another. Hard-coding them produces a strip that is all one\n * colour on half the games it is used for.\n *\n * A note about what this cannot tell you is included deliberately: past rounds\n * carry no information about the next one, and a history strip is the single\n * most common surface for the gambler's fallacy.\n */\nexport type Round = {\n  id: string\n  /** The result — a multiplier, a score, a number. */\n  value: number\n  at?: Date\n  /** Marks a round the player took part in. */\n  played?: boolean\n  detail?: ReactNode\n}\n\n/**\n * Default label formatters, hoisted out of the parameter list.\n *\n * An arrow function written inline as a default parameter is a value the\n * React Compiler cannot safely reorder, so it bails on the whole component\n * and none of it gets auto-memoised. At module scope it is a stable\n * reference and the component compiles.\n */\nconst DEFAULT_FORMAT: (value: number) => ReactNode = (value) => `${value.toFixed(2)}×`\n\nfunction RoundHistory({\n  rounds,\n  lowBelow = 2,\n  highAbove = 10,\n  format = DEFAULT_FORMAT,\n  now,\n  locale = 'en-GB',\n  note = 'Past rounds do not affect future ones.',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  rounds: Round[]\n  /** Below this reads as a loss. Game-specific, hence a prop. */\n  lowBelow?: number\n  highAbove?: number\n  format?: (value: number) => ReactNode\n  now?: Date\n  locale?: string\n  note?: ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"round-history\"\n      className={cn(surface, radius.surface, 'flex flex-col gap-2 p-3', className)}\n      {...props}\n    >\n      {/* Newest first: the last result is the one being reacted to. */}\n      <div className=\"flex flex-wrap gap-1.5\">\n        {rounds.map((round) => {\n          const low = round.value < lowBelow\n          const high = round.value >= highAbove\n\n          return (\n            <Tooltip\n              key={round.id}\n              content={\n                <span className=\"flex flex-col\">\n                  <span>{format(round.value)}</span>\n                  {round.at && (\n                    <span className=\"opacity-70\">\n                      <Fmt type=\"relative\" value={round.at} now={now} locale={locale} />\n                    </span>\n                  )}\n                  {round.detail && <span className=\"opacity-70\">{round.detail}</span>}\n                </span>\n              }\n            >\n              <span\n                tabIndex={0}\n                className={cn(\n                  'inline-flex h-6 items-center px-2 text-xs font-medium tabular-nums outline-none',\n                  radius.xs,\n                  'focus-visible:ring-ring/50 focus-visible:ring-2',\n                  low && 'bg-[color-mix(in_oklab,var(--destructive),transparent_86%)] text-[var(--destructive-soft-foreground)]',\n                  high && 'bg-[color-mix(in_oklab,var(--green),transparent_82%)] text-[var(--green-soft-foreground)]',\n                  !low && !high && 'bg-secondary text-muted-foreground',\n                  round.played && 'ring-primary/40 ring-2',\n                )}\n              >\n                {format(round.value)}\n              </span>\n            </Tooltip>\n          )\n        })}\n      </div>\n\n      {/* Stated on purpose — this strip is where the gambler's fallacy lives. */}\n      {note && <p className=\"text-muted-foreground/70 text-xs\">{note}</p>}\n    </div>\n  )\n}\n\nexport { RoundHistory }\n"
+    }
+  ]
+}

package/registry/items/runbook-steps.json

@@ -0,0 +1,24 @@
+{
+  "name": "runbook-steps",
+  "type": "registry:ui",
+  "title": "Runbook Steps",
+  "description": "Remediation steps, run one at a time and only in order. Offering \"run\" on step four while step two is untried invites exactly the mistake the runbook exists to prevent.",
+  "category": "AIOps",
+  "dependencies": [
+    "lucide-react@^1.39.0"
+  ],
+  "registryDependencies": [
+    "badge",
+    "button",
+    "lib-styles",
+    "lib-utils",
+    "spinner"
+  ],
+  "files": [
+    {
+      "path": "components/ui/runbook-steps.tsx",
+      "type": "registry:ui",
+      "content": "import { useState, type ComponentProps, type ReactNode } from 'react'\nimport { Check, Play, SkipForward, X } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Spinner } from '@/components/ui/spinner'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * A runbook: remediation steps, each runnable on its own.\n *\n * Steps run one at a time and only in order — a runbook is a procedure, and\n * offering \"run\" on step four while step two has not been attempted invites\n * exactly the mistake the runbook exists to prevent. The next actionable step is\n * computed rather than tracked, so it stays correct when a step is skipped.\n *\n * Destructive steps must be confirmed. `confirm` is a per-step flag, because the\n * ones that restart a database sit right beside the ones that read a log.\n */\nexport type RunbookStatus = 'pending' | 'running' | 'done' | 'failed' | 'skipped'\n\nexport type RunbookStep = {\n  id: string\n  title: ReactNode\n  description?: ReactNode\n  status: RunbookStatus\n  /** Ask before running. For anything destructive. */\n  confirm?: boolean\n  output?: ReactNode\n}\n\nconst STATUS_BADGE = {\n  pending: null,\n  running: { label: 'Running', color: 'blue' },\n  done: { label: 'Done', color: 'green' },\n  failed: { label: 'Failed', color: 'destructive' },\n  skipped: { label: 'Skipped', color: 'neutral' },\n} as const\n\nfunction RunbookSteps({\n  steps,\n  onRun,\n  onSkip,\n  title,\n  destructiveLabel = 'Destructive',\n  confirmNote = 'This cannot be undone. Run it?',\n  confirmLabel = 'Confirm',\n  cancelLabel = 'Cancel',\n  runLabel = 'Run',\n  skipLabel = 'Skip',\n  runningLabel = 'Running',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'title'> & {\n  steps: RunbookStep[]\n  onRun?: (id: string) => void\n  onSkip?: (id: string) => void\n  title?: ReactNode\n  /** Badge on a step that asks before it runs. */\n  destructiveLabel?: ReactNode\n  confirmNote?: ReactNode\n  confirmLabel?: ReactNode\n  cancelLabel?: ReactNode\n  runLabel?: ReactNode\n  skipLabel?: ReactNode\n  /** Accessible name for the in-progress spinner. */\n  runningLabel?: string\n}) {\n  const [confirming, setConfirming] = useState<string | null>(null)\n\n  // The first step that has not been resolved is the only one that can run.\n  const nextIndex = steps.findIndex((step) => step.status === 'pending')\n  const busy = steps.some((step) => step.status === 'running')\n\n  return (\n    <div\n      data-slot=\"runbook-steps\"\n      className={cn(surface, radius.surface, 'overflow-hidden', className)}\n      {...props}\n    >\n      {title && (\n        <div className=\"border-border bg-muted/40 border-b p-3\">\n          <h3 className=\"text-sm font-medium\">{title}</h3>\n        </div>\n      )}\n\n      <ol className=\"list-none divide-y divide-[var(--border)]\">\n        {steps.map((step, index) => {\n          const badge = STATUS_BADGE[step.status]\n          const actionable = index === nextIndex && !busy\n          const isConfirming = confirming === step.id\n\n          return (\n            <li key={step.id} data-status={step.status} className=\"flex flex-col gap-2 p-3\">\n              <div className=\"flex items-start gap-2.5\">\n                <span\n                  className={cn(\n                    'mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border text-[10px] font-semibold [corner-shape:round]',\n                    step.status === 'done' &&\n                      'border-[var(--green)] bg-[var(--green)] text-[var(--green-foreground)]',\n                    step.status === 'failed' &&\n                      'border-[var(--destructive)] bg-[var(--destructive)] text-[var(--destructive-foreground)]',\n                    step.status === 'skipped' && 'border-border text-muted-foreground/60',\n                    (step.status === 'pending' || step.status === 'running') &&\n                      'border-border text-muted-foreground',\n                  )}\n                >\n                  {step.status === 'done' ? (\n                    <Check className=\"size-3\" />\n                  ) : step.status === 'failed' ? (\n                    <X className=\"size-3\" />\n                  ) : step.status === 'running' ? (\n                    <Spinner size=\"xs\" label={runningLabel} />\n                  ) : (\n                    index + 1\n                  )}\n                </span>\n\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex flex-wrap items-center gap-2\">\n                    <span\n                      className={cn(\n                        'text-sm font-medium',\n                        step.status === 'skipped' && 'text-muted-foreground/60 line-through',\n                      )}\n                    >\n                      {step.title}\n                    </span>\n                    {badge && (\n                      <Badge size=\"sm\" color={badge.color}>\n                        {badge.label}\n                      </Badge>\n                    )}\n                    {step.confirm && step.status === 'pending' && (\n                      <Badge size=\"sm\" color=\"amber\">\n                        {destructiveLabel}\n                      </Badge>\n                    )}\n                  </div>\n\n                  {step.description && (\n                    <p className=\"text-muted-foreground mt-0.5 text-sm\">\n                      {step.description}\n                    </p>\n                  )}\n                </div>\n              </div>\n\n              {step.output && (\n                <div className=\"ms-7 min-w-0\">{step.output}</div>\n              )}\n\n              {actionable && (onRun || onSkip) && (\n                <div className=\"ms-7 flex flex-wrap items-center gap-2\">\n                  {isConfirming ? (\n                    <>\n                      <span className=\"text-muted-foreground text-xs\">\n                        {confirmNote}\n                      </span>\n                      <Button\n                        size=\"xs\"\n                        color=\"destructive\"\n                        onClick={() => {\n                          setConfirming(null)\n                          onRun?.(step.id)\n                        }}\n                      >\n                        {confirmLabel}\n                      </Button>\n                      <Button size=\"xs\" variant=\"secondary\" onClick={() => setConfirming(null)}>\n                        {cancelLabel}\n                      </Button>\n                    </>\n                  ) : (\n                    <>\n                      {onRun && (\n                        <Button\n                          size=\"xs\"\n                          onClick={() =>\n                            step.confirm ? setConfirming(step.id) : onRun(step.id)\n                          }\n                        >\n                          <Play />\n                          {runLabel}\n                        </Button>\n                      )}\n                      {onSkip && (\n                        <Button size=\"xs\" variant=\"secondary\" onClick={() => onSkip(step.id)}>\n                          <SkipForward />\n                          {skipLabel}\n                        </Button>\n                      )}\n                    </>\n                  )}\n                </div>\n              )}\n            </li>\n          )\n        })}\n      </ol>\n    </div>\n  )\n}\n\nexport { RunbookSteps }\n"
+    }
+  ]
+}

package/registry/items/schema-table.json

@@ -0,0 +1,22 @@
+{
+  "name": "schema-table",
+  "type": "registry:ui",
+  "title": "Schema Table",
+  "description": "Columns, keys and indexes. Foreign keys name their target inline, because `owner_id` tells you nothing about whether it points at users or accounts — which is exactly what you opened the schema to find out.",
+  "category": "Database",
+  "dependencies": [
+    "lucide-react@^1.39.0"
+  ],
+  "registryDependencies": [
+    "badge",
+    "lib-styles",
+    "lib-utils"
+  ],
+  "files": [
+    {
+      "path": "components/ui/schema-table.tsx",
+      "type": "registry:ui",
+      "content": "import type { ComponentProps, ReactNode } from 'react'\nimport { KeyRound, Link2 } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * A table's columns, keys and indexes.\n *\n * Nullability is stated as \"not null\" rather than left implied. A blank in a\n * nullable column reads as missing information; the constraint is the fact, and\n * it is the thing that decides whether your code needs a null check.\n *\n * Foreign keys name their target inline. A column called `owner_id` tells you\n * nothing about whether it points at `users` or `accounts`, and that is\n * precisely what someone reading a schema is trying to find out.\n *\n * Indexes are listed separately from columns, with their columns in order.\n * Index column order is not cosmetic — an index on `(a, b)` cannot serve a\n * query filtering only on `b`, and a set-like display hides that completely.\n */\nexport type SchemaColumn = {\n  name: string\n  type: string\n  nullable?: boolean\n  primaryKey?: boolean\n  /** e.g. \"users.id\" */\n  references?: string\n  default?: string\n  comment?: ReactNode\n}\n\nexport type SchemaIndex = {\n  name: string\n  /** In order — order determines which queries it can serve. */\n  columns: string[]\n  unique?: boolean\n  method?: string\n}\n\nfunction SchemaTable({\n  name,\n  columns,\n  indexes = [],\n  rowCount,\n  columnsLabel = 'Columns',\n  indexesLabel = 'Indexes',\n  notNullLabel = 'not null',\n  primaryKeyLabel = 'primary key',\n  uniqueLabel = 'unique',\n  referencesLabel = 'references',\n  defaultLabel = 'default',\n  rowsLabel = 'rows',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  name: ReactNode\n  columns: SchemaColumn[]\n  indexes?: SchemaIndex[]\n  rowCount?: number\n  columnsLabel?: ReactNode\n  indexesLabel?: ReactNode\n  notNullLabel?: ReactNode\n  /** Accessible name for the key icon. */\n  primaryKeyLabel?: string\n  uniqueLabel?: ReactNode\n  /** Accessible name for the foreign-key icon. */\n  referencesLabel?: string\n  defaultLabel?: ReactNode\n  rowsLabel?: ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"schema-table\"\n      className={cn(surface, radius.surface, 'flex flex-col overflow-hidden', className)}\n      {...props}\n    >\n      <div className=\"border-border flex flex-wrap items-baseline gap-2 border-b p-3\">\n        <code className=\"font-mono text-sm font-medium\">{name}</code>\n        {rowCount !== undefined && (\n          <span className=\"text-muted-foreground ms-auto text-xs tabular-nums\">\n            {rowCount.toLocaleString()} {rowsLabel}\n          </span>\n        )}\n      </div>\n\n      <div className=\"p-3\">\n        <p className=\"text-muted-foreground mb-2 text-xs font-medium\">{columnsLabel}</p>\n        <ul className=\"flex list-none flex-col gap-1.5\">\n          {columns.map((column) => (\n            <li key={column.name} className=\"flex flex-wrap items-baseline gap-x-2 gap-y-1 text-xs\">\n              {column.primaryKey && (\n                <KeyRound\n                  className=\"size-3 shrink-0 self-center text-[var(--amber-soft-foreground)]\"\n                  aria-label={primaryKeyLabel}\n                />\n              )}\n              {column.references && (\n                <Link2\n                  className=\"text-muted-foreground/60 size-3 shrink-0 self-center\"\n                  aria-label={referencesLabel}\n                />\n              )}\n\n              <code className=\"font-mono font-medium\">{column.name}</code>\n              <code className=\"text-muted-foreground font-mono\">{column.type}</code>\n\n              {/* The constraint is the fact; a blank reads as missing data. */}\n              {column.nullable === false && (\n                <span className=\"text-muted-foreground/70\">{notNullLabel}</span>\n              )}\n\n              {/* Names the target: `owner_id` alone answers nothing. */}\n              {column.references && (\n                <code className=\"text-muted-foreground/70 font-mono\">→ {column.references}</code>\n              )}\n\n              {column.default !== undefined && (\n                <span className=\"text-muted-foreground/70\">\n                  {defaultLabel} <code className=\"font-mono\">{column.default}</code>\n                </span>\n              )}\n\n              {column.comment && (\n                <span className=\"text-muted-foreground/60 w-full\">{column.comment}</span>\n              )}\n            </li>\n          ))}\n        </ul>\n      </div>\n\n      {indexes.length > 0 && (\n        <div className=\"border-border border-t p-3\">\n          <p className=\"text-muted-foreground mb-2 text-xs font-medium\">{indexesLabel}</p>\n          <ul className=\"flex list-none flex-col gap-1.5\">\n            {indexes.map((index) => (\n              <li key={index.name} className=\"flex flex-wrap items-baseline gap-x-2 text-xs\">\n                <code className=\"font-mono\">{index.name}</code>\n                {/* Order matters: (a, b) cannot serve a query on b alone. */}\n                <code className=\"text-muted-foreground font-mono\">\n                  ({index.columns.join(', ')})\n                </code>\n                {index.unique && (\n                  <Badge size=\"sm\" color=\"neutral\">\n                    {uniqueLabel}\n                  </Badge>\n                )}\n                {index.method && (\n                  <span className=\"text-muted-foreground/60 font-mono\">{index.method}</span>\n                )}\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { SchemaTable }\n"
+    }
+  ]
+}

package/registry/items/schema-viewer.json

@@ -0,0 +1,22 @@
+{
+  "name": "schema-viewer",
+  "type": "registry:ui",
+  "title": "Schema Viewer",
+  "description": "JSON Schema as a tree. Required fields are marked on the field itself rather than left in the parent's `required` array — cross-referencing that list is the one job a renderer should do for you.",
+  "category": "API",
+  "dependencies": [
+    "lucide-react@^1.39.0"
+  ],
+  "registryDependencies": [
+    "badge",
+    "lib-styles",
+    "lib-utils"
+  ],
+  "files": [
+    {
+      "path": "components/ui/schema-viewer.tsx",
+      "type": "registry:ui",
+      "content": "import { useState, type ComponentProps, type ReactNode } from 'react'\nimport { ChevronDown, ChevronRight } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { focusRing, interactive, radius, surface } from '@/lib/styles'\nimport { cn } from '@/lib/utils'\n\n/**\n * A JSON Schema rendered as a navigable tree.\n *\n * Required fields are marked on the field, not listed separately at the parent.\n * JSON Schema puts `required` on the object as an array of names, which means\n * reading a schema involves cross-referencing a list against the properties\n * below it — the one job a renderer should do for you.\n *\n * Constraints are shown inline: `minLength`, `enum`, `pattern`, `format`. A type\n * of \"string\" is rarely the interesting part; that it must match a UUID pattern\n * is.\n *\n * `oneOf` and `anyOf` render as labelled alternatives rather than being\n * flattened. A flattened union looks like an object with contradictory fields.\n */\nexport type JsonSchema = {\n  type?: string | string[]\n  title?: string\n  description?: string\n  properties?: Record<string, JsonSchema>\n  items?: JsonSchema\n  required?: string[]\n  enum?: unknown[]\n  format?: string\n  pattern?: string\n  minLength?: number\n  maxLength?: number\n  minimum?: number\n  maximum?: number\n  default?: unknown\n  oneOf?: JsonSchema[]\n  anyOf?: JsonSchema[]\n  deprecated?: boolean\n}\n\n/** The short constraint list shown beside a field's type. */\nfunction constraints(schema: JsonSchema): string[] {\n  const out: string[] = []\n  if (schema.format) out.push(schema.format)\n  if (schema.enum) out.push(schema.enum.map((v) => JSON.stringify(v)).join(' | '))\n  if (schema.pattern) out.push(`/${schema.pattern}/`)\n  if (schema.minLength !== undefined || schema.maxLength !== undefined) {\n    out.push(`${schema.minLength ?? 0}–${schema.maxLength ?? '∞'} chars`)\n  }\n  if (schema.minimum !== undefined || schema.maximum !== undefined) {\n    out.push(`${schema.minimum ?? '−∞'}–${schema.maximum ?? '∞'}`)\n  }\n  if (schema.default !== undefined) out.push(`default ${JSON.stringify(schema.default)}`)\n  return out\n}\n\nfunction typeOf(schema: JsonSchema): string {\n  if (Array.isArray(schema.type)) return schema.type.join(' | ')\n  if (schema.type === 'array' && schema.items) return `${typeOf(schema.items)}[]`\n  return schema.type ?? (schema.oneOf ? 'oneOf' : schema.anyOf ? 'anyOf' : 'any')\n}\n\nfunction SchemaViewer({\n  schema,\n  name = 'root',\n  defaultOpenDepth = 2,\n  requiredLabel = 'required',\n  deprecatedLabel = 'deprecated',\n  className,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  schema: JsonSchema\n  name?: string\n  defaultOpenDepth?: number\n  requiredLabel?: ReactNode\n  deprecatedLabel?: ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"schema-viewer\"\n      className={cn(surface, radius.surface, 'overflow-hidden p-2', className)}\n      {...props}\n    >\n      <Node\n        schema={schema}\n        name={name}\n        depth={0}\n        required={false}\n        defaultOpenDepth={defaultOpenDepth}\n        requiredLabel={requiredLabel}\n        deprecatedLabel={deprecatedLabel}\n      />\n    </div>\n  )\n}\n\n/** At module scope: a component declared in render remounts every keystroke. */\nfunction Node({\n  schema,\n  name,\n  depth,\n  required,\n  defaultOpenDepth,\n  requiredLabel,\n  deprecatedLabel,\n}: {\n  schema: JsonSchema\n  name: string\n  depth: number\n  required: boolean\n  defaultOpenDepth: number\n  requiredLabel: ReactNode\n  deprecatedLabel: ReactNode\n}) {\n  const [open, setOpen] = useState(depth < defaultOpenDepth)\n\n  const properties = schema.properties ?? schema.items?.properties\n  const requiredSet = new Set(schema.required ?? schema.items?.required ?? [])\n  const alternatives = schema.oneOf ?? schema.anyOf\n  const branching = Boolean(properties || alternatives)\n  const notes = constraints(schema)\n\n  return (\n    <div>\n      <button\n        type=\"button\"\n        aria-expanded={branching ? open : undefined}\n        disabled={!branching}\n        onClick={() => setOpen((v) => !v)}\n        style={{ paddingInlineStart: depth * 14 + 6 }}\n        className={cn(\n          'flex w-full items-baseline gap-2 py-1 pe-2 text-start',\n          radius.xs,\n          branching && interactive,\n          focusRing,\n        )}\n      >\n        {branching ? (\n          open ? (\n            <ChevronDown className=\"text-muted-foreground size-3.5 shrink-0 self-center\" aria-hidden=\"true\" />\n          ) : (\n            <ChevronRight className=\"text-muted-foreground size-3.5 shrink-0 self-center\" aria-hidden=\"true\" />\n          )\n        ) : (\n          <span className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n        )}\n\n        <code className={cn('font-mono text-xs font-medium', schema.deprecated && 'line-through')}>\n          {name}\n        </code>\n\n        {/* Marked on the field, not cross-referenced from the parent's array. */}\n        {required && (\n          <span className=\"text-[var(--destructive-soft-foreground)] text-xs\" title={String(requiredLabel)}>\n            *\n          </span>\n        )}\n\n        <code className=\"text-muted-foreground font-mono text-xs\">{typeOf(schema)}</code>\n\n        {schema.deprecated && (\n          <Badge size=\"sm\" color=\"amber\">\n            {deprecatedLabel}\n          </Badge>\n        )}\n\n        {/* The constraint, not the type, is usually the interesting part. */}\n        {notes.length > 0 && (\n          <span className=\"text-muted-foreground/70 min-w-0 truncate font-mono text-xs\">\n            {notes.join(' · ')}\n          </span>\n        )}\n      </button>\n\n      {schema.description && (\n        <p\n          className=\"text-muted-foreground/80 pe-2 text-xs\"\n          style={{ paddingInlineStart: depth * 14 + 26 }}\n        >\n          {schema.description}\n        </p>\n      )}\n\n      {open && properties && (\n        <div>\n          {Object.entries(properties).map(([key, child]) => (\n            <Node\n              key={key}\n              schema={child}\n              name={key}\n              depth={depth + 1}\n              required={requiredSet.has(key)}\n              defaultOpenDepth={defaultOpenDepth}\n              requiredLabel={requiredLabel}\n              deprecatedLabel={deprecatedLabel}\n            />\n          ))}\n        </div>\n      )}\n\n      {/* Labelled alternatives — a flattened union looks self-contradictory. */}\n      {open && alternatives && (\n        <div>\n          {alternatives.map((child, index) => (\n            <Node\n              key={index}\n              schema={child}\n              name={`${schema.oneOf ? 'oneOf' : 'anyOf'}[${index}]`}\n              depth={depth + 1}\n              required={false}\n              defaultOpenDepth={defaultOpenDepth}\n              requiredLabel={requiredLabel}\n              deprecatedLabel={deprecatedLabel}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { SchemaViewer, constraints as schemaConstraints }\n"
+    }
+  ]
+}

package/registry/items/scroll-area.json

@@ -0,0 +1,18 @@
+{
+  "name": "scroll-area",
+  "type": "registry:ui",
+  "title": "Scroll Area",
+  "description": "A scrollable region with a themed scrollbar, styled through the standard scrollbar properties rather than a JavaScript overlay — so native momentum and keyboard scrolling stay intact.",
+  "category": "Navigation",
+  "dependencies": [],
+  "registryDependencies": [
+    "lib-utils"
+  ],
+  "files": [
+    {
+      "path": "components/ui/scroll-area.tsx",
+      "type": "registry:ui",
+      "content": "import type { ComponentProps } from 'react'\nimport { cn } from '@/lib/utils'\n\n/**\n * A bounded scrollable region.\n *\n * The scrollbar itself is styled globally in `index.css`, so this only decides\n * which axis scrolls — it exists to make that intent explicit at the call site\n * rather than to restyle anything.\n */\nfunction ScrollArea({\n  className,\n  orientation = 'vertical',\n  ...props\n}: ComponentProps<'div'> & {\n  orientation?: 'vertical' | 'horizontal' | 'both'\n}) {\n  return (\n    <div\n      data-slot=\"scroll-area\"\n      data-orientation={orientation}\n      className={cn(\n        'relative',\n        orientation === 'vertical' && 'overflow-y-auto',\n        orientation === 'horizontal' && 'overflow-x-auto',\n        orientation === 'both' && 'overflow-auto',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { ScrollArea }\n"
+    }
+  ]
+}