@usetheo/ui 0.13.0 → 0.13.2

package/registry/r/model-card.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/model-card/model-card.tsx",
       "type": "registry:ui",
       "target": "components/ui/model-card.tsx",
-      "content": "import { CalendarDays, Eye, GitBranch, Image, Sparkles, Wrench } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface ModelCapabilityFlag {\n  id: string;\n  label: string;\n  icon?: IconComponent;\n  enabled: boolean;\n}\n\nexport interface ModelInfo {\n  id: string;\n  /** Display name (e.g. \"Opus 4.7\"). */\n  name: string;\n  /** Vendor (Anthropic, OpenAI, …). */\n  vendor: string;\n  /** Optional tag (default, fast, smart, beta). */\n  tag?: ReactNode;\n  /** Total context window in tokens. */\n  contextWindow: number;\n  /** Max output tokens per turn. */\n  maxOutput: number;\n  /** USD per million input tokens. */\n  pricePerMInput?: number;\n  /** USD per million output tokens. */\n  pricePerMOutput?: number;\n  /** Knowledge cutoff date label (e.g. \"Jan 2026\"). */\n  cutoff?: string;\n  /** Capability flags shown as chips. */\n  capabilities?: ModelCapabilityFlag[];\n  /** Short description / positioning. */\n  description?: ReactNode;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(0)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;\n  return `${n}`;\n};\n\nconst formatUsd = (n: number) =>\n  n >= 100 ? `$${n.toFixed(0)}` : n >= 1 ? `$${n.toFixed(2)}` : `$${n.toFixed(3)}`;\n\ninterface ModelCardProps extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\"> {\n  model: ModelInfo;\n  /** Render as the currently-selected variant (violet ring). */\n  selected?: boolean;\n  /** Fires when user clicks to select. */\n  onSelect?: (id: string) => void;\n}\n\n/**\n * ModelCard — full info on a model: vendor, context, output cap, pricing,\n * capabilities, knowledge cutoff. Used in the \"switch model\" surface.\n */\nconst ModelCard = forwardRef<HTMLElement, ModelCardProps>(\n  ({ className, model, selected, onSelect, ...props }, ref) => {\n    const Tag = onSelect ? \"button\" : \"article\";\n    return (\n      <Tag\n        ref={ref as never}\n        type={onSelect ? \"button\" : undefined}\n        onClick={onSelect ? () => onSelect(model.id) : undefined}\n        className={cn(\n          \"grid gap-3 rounded-xl border bg-card p-4 text-left\",\n          \"transition-[border-color,box-shadow] duration-base ease-out-soft\",\n          selected\n            ? \"border-primary shadow-glow\"\n            : onSelect\n              ? \"hover:border-primary/40 hover:shadow-sm\"\n              : \"\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n          className,\n        )}\n        aria-pressed={onSelect ? !!selected : undefined}\n        {...(props as HTMLAttributes<HTMLElement>)}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h4 className=\"font-display text-title-md tracking-tight\">{model.name}</h4>\n            <p className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {model.vendor}\n            </p>\n          </div>\n          {model.tag ? (\n            <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-2 py-0.5 font-mono text-accent text-label uppercase\">\n              {typeof model.tag === \"string\" && model.tag.toLowerCase() === \"smart\" ? (\n                <Sparkles className=\"size-3\" />\n              ) : null}\n              {model.tag}\n            </span>\n          ) : null}\n        </header>\n\n        {model.description ? (\n          <p className=\"text-body-sm text-muted-foreground\">{model.description}</p>\n        ) : null}\n\n        <dl className=\"grid grid-cols-2 gap-3 border-border/30 border-t pt-3 font-mono\">\n          <div className=\"grid gap-0.5\">\n            <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Context\n            </dt>\n            <dd className=\"font-medium text-body-sm tabular-nums\">\n              {formatTokens(model.contextWindow)} tok\n            </dd>\n          </div>\n          <div className=\"grid gap-0.5\">\n            <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Max output\n            </dt>\n            <dd className=\"font-medium text-body-sm tabular-nums\">\n              {formatTokens(model.maxOutput)} tok\n            </dd>\n          </div>\n          {model.pricePerMInput !== undefined ? (\n            <div className=\"grid gap-0.5\">\n              <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Input\n              </dt>\n              <dd className=\"font-medium text-body-sm tabular-nums\">\n                {formatUsd(model.pricePerMInput)} <span className=\"text-muted-foreground\">/M</span>\n              </dd>\n            </div>\n          ) : null}\n          {model.pricePerMOutput !== undefined ? (\n            <div className=\"grid gap-0.5\">\n              <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Output\n              </dt>\n              <dd className=\"font-medium text-body-sm tabular-nums\">\n                {formatUsd(model.pricePerMOutput)} <span className=\"text-muted-foreground\">/M</span>\n              </dd>\n            </div>\n          ) : null}\n        </dl>\n\n        {model.capabilities && model.capabilities.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {model.capabilities.map((cap) => {\n              const Icon = cap.icon ?? Wrench;\n              return (\n                <span\n                  key={cap.id}\n                  className={cn(\n                    \"inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-label\",\n                    cap.enabled\n                      ? \"bg-success/15 text-success\"\n                      : \"bg-muted text-muted-foreground line-through\",\n                  )}\n                >\n                  <Icon className=\"size-3\" aria-hidden=\"true\" />\n                  {cap.label}\n                </span>\n              );\n            })}\n          </div>\n        ) : null}\n\n        {model.cutoff ? (\n          <p className=\"inline-flex items-center gap-1 font-mono text-label text-muted-foreground\">\n            <CalendarDays className=\"size-3\" aria-hidden=\"true\" /> Knowledge cutoff · {model.cutoff}\n          </p>\n        ) : null}\n      </Tag>\n    );\n  },\n);\nModelCard.displayName = \"ModelCard\";\n\n/** Pre-canned capability flags. */\nexport const modelCapabilityPresets = {\n  vision: { id: \"vision\", label: \"Vision\", icon: Image as IconComponent } as const,\n  tools: { id: \"tools\", label: \"Tool use\", icon: Wrench } as const,\n  reasoning: { id: \"reasoning\", label: \"Reasoning\", icon: Sparkles } as const,\n  fineTuning: { id: \"ft\", label: \"Fine-tuning\", icon: GitBranch } as const,\n  multimodal: { id: \"multimodal\", label: \"Multimodal\", icon: Eye } as const,\n};\n\nexport { ModelCard };\n"
+      "content": "import { CalendarDays, Eye, GitBranch, Image, Sparkles, Wrench } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface ModelCapabilityFlag {\n  id: string;\n  label: string;\n  icon?: IconComponent;\n  enabled: boolean;\n}\n\nexport interface ModelInfo {\n  id: string;\n  /** Display name (e.g. \"Opus 4.7\"). */\n  name: string;\n  /** Vendor (Anthropic, OpenAI, …). */\n  vendor: string;\n  /** Optional tag (default, fast, smart, beta). */\n  tag?: ReactNode;\n  /** Total context window in tokens. */\n  contextWindow: number;\n  /** Max output tokens per turn. */\n  maxOutput: number;\n  /** USD per million input tokens. */\n  pricePerMInput?: number;\n  /** USD per million output tokens. */\n  pricePerMOutput?: number;\n  /** Knowledge cutoff date label (e.g. \"Jan 2026\"). */\n  cutoff?: string;\n  /** Capability flags shown as chips. */\n  capabilities?: ModelCapabilityFlag[];\n  /** Short description / positioning. */\n  description?: ReactNode;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(0)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(0)}k`;\n  return `${n}`;\n};\n\nconst formatUsd = (n: number) =>\n  n >= 100 ? `$${n.toFixed(0)}` : n >= 1 ? `$${n.toFixed(2)}` : `$${n.toFixed(3)}`;\n\ninterface ModelCardProps extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\"> {\n  model: ModelInfo;\n  /** Render as the currently-selected variant (violet ring). */\n  selected?: boolean;\n  /** Fires when user clicks to select. */\n  onSelect?: (id: string) => void;\n}\n\n/**\n * ModelCard — full info on a model: vendor, context, output cap, pricing,\n * capabilities, knowledge cutoff. Used in the \"switch model\" surface.\n */\nconst ModelCard = forwardRef<HTMLElement, ModelCardProps>(\n  ({ className, model, selected, onSelect, ...props }, ref) => {\n    const Tag = onSelect ? \"button\" : \"article\";\n    return (\n      <Tag\n        data-slot=\"model-card\"\n        ref={ref as never}\n        type={onSelect ? \"button\" : undefined}\n        onClick={onSelect ? () => onSelect(model.id) : undefined}\n        className={cn(\n          \"grid gap-3 rounded-xl border bg-card p-4 text-left\",\n          \"transition-[border-color,box-shadow] duration-base ease-out-soft\",\n          selected\n            ? \"border-primary shadow-glow\"\n            : onSelect\n              ? \"hover:border-primary/40 hover:shadow-sm\"\n              : \"\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n          className,\n        )}\n        aria-pressed={onSelect ? !!selected : undefined}\n        {...(props as HTMLAttributes<HTMLElement>)}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h4 className=\"font-display text-title-md tracking-tight\">{model.name}</h4>\n            <p className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {model.vendor}\n            </p>\n          </div>\n          {model.tag ? (\n            <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-2 py-0.5 font-mono text-accent text-label uppercase\">\n              {typeof model.tag === \"string\" && model.tag.toLowerCase() === \"smart\" ? (\n                <Sparkles className=\"size-3\" />\n              ) : null}\n              {model.tag}\n            </span>\n          ) : null}\n        </header>\n\n        {model.description ? (\n          <p className=\"text-body-sm text-muted-foreground\">{model.description}</p>\n        ) : null}\n\n        <dl className=\"grid grid-cols-2 gap-3 border-border/30 border-t pt-3 font-mono\">\n          <div className=\"grid gap-0.5\">\n            <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Context\n            </dt>\n            <dd className=\"font-medium text-body-sm tabular-nums\">\n              {formatTokens(model.contextWindow)} tok\n            </dd>\n          </div>\n          <div className=\"grid gap-0.5\">\n            <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n              Max output\n            </dt>\n            <dd className=\"font-medium text-body-sm tabular-nums\">\n              {formatTokens(model.maxOutput)} tok\n            </dd>\n          </div>\n          {model.pricePerMInput !== undefined ? (\n            <div className=\"grid gap-0.5\">\n              <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Input\n              </dt>\n              <dd className=\"font-medium text-body-sm tabular-nums\">\n                {formatUsd(model.pricePerMInput)} <span className=\"text-muted-foreground\">/M</span>\n              </dd>\n            </div>\n          ) : null}\n          {model.pricePerMOutput !== undefined ? (\n            <div className=\"grid gap-0.5\">\n              <dt className=\"text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Output\n              </dt>\n              <dd className=\"font-medium text-body-sm tabular-nums\">\n                {formatUsd(model.pricePerMOutput)} <span className=\"text-muted-foreground\">/M</span>\n              </dd>\n            </div>\n          ) : null}\n        </dl>\n\n        {model.capabilities && model.capabilities.length > 0 ? (\n          <div className=\"flex flex-wrap gap-1.5\">\n            {model.capabilities.map((cap) => {\n              const Icon = cap.icon ?? Wrench;\n              return (\n                <span\n                  key={cap.id}\n                  className={cn(\n                    \"inline-flex items-center gap-1 rounded-md px-2 py-0.5 font-mono text-label\",\n                    cap.enabled\n                      ? \"bg-success/15 text-success\"\n                      : \"bg-muted text-muted-foreground line-through\",\n                  )}\n                >\n                  <Icon className=\"size-3\" aria-hidden=\"true\" />\n                  {cap.label}\n                </span>\n              );\n            })}\n          </div>\n        ) : null}\n\n        {model.cutoff ? (\n          <p className=\"inline-flex items-center gap-1 font-mono text-label text-muted-foreground\">\n            <CalendarDays className=\"size-3\" aria-hidden=\"true\" /> Knowledge cutoff · {model.cutoff}\n          </p>\n        ) : null}\n      </Tag>\n    );\n  },\n);\nModelCard.displayName = \"ModelCard\";\n\n/** Pre-canned capability flags. */\nexport const modelCapabilityPresets = {\n  vision: { id: \"vision\", label: \"Vision\", icon: Image as IconComponent } as const,\n  tools: { id: \"tools\", label: \"Tool use\", icon: Wrench } as const,\n  reasoning: { id: \"reasoning\", label: \"Reasoning\", icon: Sparkles } as const,\n  fineTuning: { id: \"ft\", label: \"Fine-tuning\", icon: GitBranch } as const,\n  multimodal: { id: \"multimodal\", label: \"Multimodal\", icon: Eye } as const,\n};\n\nexport { ModelCard };\n"
     }
   ]
 }

package/registry/r/model-selector.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/model-selector/model-selector.tsx",
       "type": "registry:ui",
       "target": "components/ui/model-selector.tsx",
-      "content": "import * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronDown, Sparkles } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface ModelOption {\n  id: string;\n  label: string;\n  /** Optional vendor hint shown small below the label. */\n  vendor?: string;\n  /** Optional tag e.g. \"default\", \"fast\", \"smart\". */\n  tag?: string;\n}\n\ninterface ModelSelectorProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  value: string;\n  options: ModelOption[];\n  onChange?: (id: string) => void;\n}\n\n/**\n * ModelSelector — chip dropdown for picking the active LLM.\n *\n * Visual: pill with violet dot + label + chevron. Dropdown uses Radix Menu.\n */\nconst ModelSelector = forwardRef<HTMLButtonElement, ModelSelectorProps>(\n  ({ className, value, options, onChange, ...props }, ref) => {\n    const current = options.find((o) => o.id === value) ?? options[0];\n    return (\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger asChild>\n          <button\n            ref={ref}\n            type=\"button\"\n            className={cn(\n              \"inline-flex h-8 items-center gap-2 rounded-full border border-border/60 bg-card px-3\",\n              \"font-medium font-sans text-body-sm text-foreground\",\n              \"transition-colors duration-base ease-out-soft\",\n              \"hover:bg-muted\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n              className,\n            )}\n            {...props}\n          >\n            <span className=\"size-1.5 rounded-full bg-primary\" aria-hidden=\"true\" />\n            {current?.label ?? \"Select model\"}\n            <ChevronDown className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            sideOffset={6}\n            align=\"end\"\n            className={cn(\n              \"z-50 min-w-[14rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md\",\n              \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n              \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n            )}\n          >\n            {options.map((opt) => (\n              <DropdownMenu.Item\n                key={opt.id}\n                onSelect={() => onChange?.(opt.id)}\n                className={cn(\n                  \"flex cursor-pointer items-center justify-between gap-3 rounded-md px-2 py-2\",\n                  \"text-body-sm\",\n                  \"focus:bg-muted focus:outline-none\",\n                  \"data-[highlighted]:bg-muted\",\n                )}\n              >\n                <span className=\"flex flex-col\">\n                  <span className=\"font-medium\">{opt.label}</span>\n                  {opt.vendor ? (\n                    <span className=\"font-mono text-label text-muted-foreground\">{opt.vendor}</span>\n                  ) : null}\n                </span>\n                <span className=\"flex items-center gap-2\">\n                  {opt.tag ? (\n                    <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-2 py-0.5 font-mono text-accent text-label uppercase\">\n                      {opt.tag === \"smart\" ? <Sparkles className=\"size-3\" /> : null}\n                      {opt.tag}\n                    </span>\n                  ) : null}\n                  {opt.id === value ? <Check className=\"size-3.5 text-primary\" /> : null}\n                </span>\n              </DropdownMenu.Item>\n            ))}\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    );\n  },\n);\nModelSelector.displayName = \"ModelSelector\";\n\nexport { ModelSelector };\n"
+      "content": "import * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronDown, Sparkles } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface ModelOption {\n  id: string;\n  label: string;\n  /** Optional vendor hint shown small below the label. */\n  vendor?: string;\n  /** Optional tag e.g. \"default\", \"fast\", \"smart\". */\n  tag?: string;\n}\n\ninterface ModelSelectorProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  value: string;\n  options: ModelOption[];\n  onChange?: (id: string) => void;\n}\n\n/**\n * ModelSelector — chip dropdown for picking the active LLM.\n *\n * Visual: pill with violet dot + label + chevron. Dropdown uses Radix Menu.\n */\nconst ModelSelector = forwardRef<HTMLButtonElement, ModelSelectorProps>(\n  ({ className, value, options, onChange, ...props }, ref) => {\n    const current = options.find((o) => o.id === value) ?? options[0];\n    return (\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger asChild>\n          <button\n            data-slot=\"model-selector\"\n            ref={ref}\n            type=\"button\"\n            className={cn(\n              \"inline-flex h-8 items-center gap-2 rounded-full border border-border/60 bg-card px-3\",\n              \"font-medium font-sans text-body-sm text-foreground\",\n              \"transition-colors duration-base ease-out-soft\",\n              \"hover:bg-muted\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n              className,\n            )}\n            {...props}\n          >\n            <span className=\"size-1.5 rounded-full bg-primary\" aria-hidden=\"true\" />\n            {current?.label ?? \"Select model\"}\n            <ChevronDown className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n          </button>\n        </DropdownMenu.Trigger>\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            sideOffset={6}\n            align=\"end\"\n            className={cn(\n              \"z-50 min-w-[14rem] overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md\",\n              \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n              \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n            )}\n          >\n            {options.map((opt) => (\n              <DropdownMenu.Item\n                key={opt.id}\n                onSelect={() => onChange?.(opt.id)}\n                className={cn(\n                  \"flex cursor-pointer items-center justify-between gap-3 rounded-md px-2 py-2\",\n                  \"text-body-sm\",\n                  \"focus:bg-muted focus:outline-none\",\n                  \"data-[highlighted]:bg-muted\",\n                )}\n              >\n                <span className=\"flex flex-col\">\n                  <span className=\"font-medium\">{opt.label}</span>\n                  {opt.vendor ? (\n                    <span className=\"font-mono text-label text-muted-foreground\">{opt.vendor}</span>\n                  ) : null}\n                </span>\n                <span className=\"flex items-center gap-2\">\n                  {opt.tag ? (\n                    <span className=\"inline-flex items-center gap-1 rounded-full bg-accent/15 px-2 py-0.5 font-mono text-accent text-label uppercase\">\n                      {opt.tag === \"smart\" ? <Sparkles className=\"size-3\" /> : null}\n                      {opt.tag}\n                    </span>\n                  ) : null}\n                  {opt.id === value ? <Check className=\"size-3.5 text-primary\" /> : null}\n                </span>\n              </DropdownMenu.Item>\n            ))}\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    );\n  },\n);\nModelSelector.displayName = \"ModelSelector\";\n\nexport { ModelSelector };\n"
     }
   ]
 }

package/registry/r/multi-select-prompt.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "multi-select-prompt",
+  "type": "registry:block",
+  "title": "MultiSelectPrompt",
+  "description": "Multi-select ask-the-user card with number-key toggles, an Other free-text option, and a side-by-side preview pane.",
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/badge.json",
+    "https://usetheodev.github.io/theo-ui/r/button.json",
+    "https://usetheodev.github.io/theo-ui/r/checkbox.json",
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/input.json",
+    "https://usetheodev.github.io/theo-ui/r/label.json",
+    "https://usetheodev.github.io/theo-ui/r/prompt.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/composites/multi-select-prompt/multi-select-prompt.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/multi-select-prompt.tsx",
+      "content": "\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { OTHER_OPTION_VALUE, type PromptOption, digitKeyToIndex } from \"@/lib/prompt\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\n/**\n * MultiSelectPrompt — multi-select \"ask the user\" card for agent surfaces.\n *\n * The checkbox sibling of `ChoicePrompt`: same question + header chip + option\n * shape + `1`..`9` number-key toggles + injectable free-text \"Other\" +\n * side-by-side preview, but the user may select any number of options.\n *\n * Renders one question at a time — sequencing is the consumer's responsibility.\n * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).\n */\n\n/** Payload handed to `onConfirm`. */\nexport interface MultiSelectPromptResult {\n  /** The selected option values (includes the reserved Other value when checked). */\n  values: string[];\n  /** Present only when the Other option is among the selected values. */\n  otherText?: string;\n}\n\nexport interface MultiSelectPromptProps extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\"> {\n  /** The question being asked. */\n  question: ReactNode;\n  /** Optional secondary line under the question. */\n  description?: ReactNode;\n  /** Optional short header chip (rendered as a Badge). */\n  badge?: ReactNode;\n  /** The selectable options. */\n  options: PromptOption[];\n  /** Controlled selected values. */\n  value?: string[];\n  /** Initial selected values when uncontrolled. */\n  defaultValue?: string[];\n  /** Fired with the full value array whenever the selection changes. */\n  onValueChange?: (values: string[]) => void;\n  /** Inject a free-text \"Other\" option as the last row. */\n  allowOther?: boolean;\n  /** Label for the Other row. Defaults to \"Other\". */\n  otherLabel?: ReactNode;\n  /** Placeholder for the Other text field. */\n  otherPlaceholder?: string;\n  /** Controlled Other text. */\n  otherText?: string;\n  /** Fired with the Other text on every keystroke. */\n  onOtherTextChange?: (text: string) => void;\n  /** Enable `1`..`9` number-key toggling. Default true. */\n  enableKeyboardShortcuts?: boolean;\n  /** Show the `1`..`9` hint chips next to options. Defaults to the shortcut flag. */\n  showNumbers?: boolean;\n  /** Minimum selections required before Confirm enables. Default 1. */\n  minSelected?: number;\n  /** Confirm button label. Defaults to \"Confirm\". Omit `onConfirm` to hide it. */\n  confirmLabel?: ReactNode;\n  /** Cancel button label. Defaults to \"Cancel\". Omit `onCancel` to hide it. */\n  cancelLabel?: ReactNode;\n  /** Pressing Confirm. Receives the selection (and Other text when relevant). */\n  onConfirm?: (result: MultiSelectPromptResult) => void;\n  /** Pressing Cancel. */\n  onCancel?: () => void;\n}\n\nconst MultiSelectPrompt = forwardRef<HTMLElement, MultiSelectPromptProps>(\n  (\n    {\n      className,\n      question,\n      description,\n      badge,\n      options,\n      value,\n      defaultValue,\n      onValueChange,\n      allowOther = false,\n      otherLabel = \"Other\",\n      otherPlaceholder = \"Type your answer…\",\n      otherText,\n      onOtherTextChange,\n      enableKeyboardShortcuts = true,\n      showNumbers,\n      minSelected = 1,\n      confirmLabel = \"Confirm\",\n      cancelLabel = \"Cancel\",\n      onConfirm,\n      onCancel,\n      ...props\n    },\n    ref,\n  ) => {\n    const baseId = useId();\n    const questionId = `${baseId}-question`;\n    const optionId = (value_: string): string => `${baseId}-opt-${value_}`;\n\n    const [internalValues, setInternalValues] = useState<string[]>(defaultValue ?? []);\n    const values = value !== undefined ? value : internalValues;\n\n    const [internalOther, setInternalOther] = useState(\"\");\n    const otherValue = otherText !== undefined ? otherText : internalOther;\n\n    const numbersVisible = showNumbers ?? enableKeyboardShortcuts;\n    const hasPreview = options.some((option) => option.preview != null);\n    const selectedPreviews = options.filter(\n      (option) => option.preview != null && values.includes(option.value),\n    );\n\n    const toggle = (next: string): void => {\n      const updated = values.includes(next)\n        ? values.filter((current) => current !== next)\n        : [...values, next];\n      if (value === undefined) setInternalValues(updated);\n      onValueChange?.(updated);\n    };\n\n    const setOther = (next: string): void => {\n      if (otherText === undefined) setInternalOther(next);\n      onOtherTextChange?.(next);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLElement>): void => {\n      if (!enableKeyboardShortcuts) return;\n      const target = event.target as HTMLElement;\n      if (target.tagName === \"INPUT\" || target.tagName === \"TEXTAREA\") return;\n      const index = digitKeyToIndex(event.key);\n      if (index === null || index >= options.length) return;\n      const option = options[index];\n      if (!option || option.disabled) return;\n      event.preventDefault();\n      toggle(option.value);\n    };\n\n    const otherChecked = values.includes(OTHER_OPTION_VALUE);\n\n    const confirm = (): void => {\n      if (values.length < minSelected) return;\n      onConfirm?.(otherChecked ? { values, otherText: otherValue } : { values });\n    };\n\n    return (\n      <section\n        data-slot=\"multi-select-prompt\"\n        ref={ref}\n        aria-labelledby={questionId}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"grid w-full gap-4 rounded-xl border bg-card p-5 text-card-foreground shadow-md\",\n          \"transition-shadow duration-base ease-out-soft\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <h3 id={questionId} className=\"font-display text-foreground text-title-md tracking-tight\">\n            {question}\n          </h3>\n          {badge != null ? (\n            <Badge variant=\"primary\" size=\"sm\" className=\"shrink-0\">\n              {badge}\n            </Badge>\n          ) : null}\n        </header>\n        {description != null ? (\n          <p className=\"text-body-sm text-muted-foreground\">{description}</p>\n        ) : null}\n\n        <div className={cn(\"grid gap-5\", hasPreview && \"md:grid-cols-2\")}>\n          <fieldset className=\"m-0 grid min-w-0 gap-2 border-0 p-0\" aria-labelledby={questionId}>\n            {options.map((option, index) => (\n              <div key={option.value} className=\"flex items-start gap-3\">\n                <Checkbox\n                  id={optionId(option.value)}\n                  checked={values.includes(option.value)}\n                  disabled={option.disabled}\n                  onCheckedChange={() => toggle(option.value)}\n                  className=\"mt-0.5\"\n                />\n                <Label\n                  htmlFor={optionId(option.value)}\n                  className=\"flex flex-1 cursor-pointer flex-col items-start gap-0.5\"\n                >\n                  <span className=\"text-body-md text-foreground\">{option.label}</span>\n                  {option.description != null ? (\n                    <span className=\"text-body-sm text-muted-foreground\">{option.description}</span>\n                  ) : null}\n                </Label>\n                {numbersVisible && index < 9 ? (\n                  <span\n                    aria-hidden=\"true\"\n                    className=\"mt-0.5 shrink-0 rounded border border-border bg-muted px-1.5 font-mono text-label text-muted-foreground\"\n                  >\n                    {index + 1}\n                  </span>\n                ) : null}\n              </div>\n            ))}\n\n            {allowOther ? (\n              <div className=\"flex flex-col gap-2 border-border/40 border-t pt-2\">\n                <div className=\"flex items-start gap-3\">\n                  <Checkbox\n                    id={optionId(OTHER_OPTION_VALUE)}\n                    checked={otherChecked}\n                    onCheckedChange={() => toggle(OTHER_OPTION_VALUE)}\n                    className=\"mt-0.5\"\n                  />\n                  <Label\n                    htmlFor={optionId(OTHER_OPTION_VALUE)}\n                    className=\"flex-1 cursor-pointer text-body-md\"\n                  >\n                    {otherLabel}\n                  </Label>\n                </div>\n                {otherChecked ? (\n                  <Input\n                    size=\"sm\"\n                    aria-label={typeof otherLabel === \"string\" ? otherLabel : \"Other\"}\n                    placeholder={otherPlaceholder}\n                    value={otherValue}\n                    onChange={(event) => setOther(event.target.value)}\n                    className=\"ml-7\"\n                  />\n                ) : null}\n              </div>\n            ) : null}\n          </fieldset>\n\n          {hasPreview ? (\n            <div className=\"rounded-lg border border-border/60 bg-muted/40 p-3\">\n              <p className=\"mb-2 font-sans text-label-caps text-muted-foreground uppercase tracking-wider\">\n                Preview\n              </p>\n              {selectedPreviews.length > 0 ? (\n                <div className=\"grid gap-3\">\n                  {selectedPreviews.map((option) => (\n                    <div\n                      key={option.value}\n                      className=\"whitespace-pre-wrap break-words font-mono text-code-sm text-foreground\"\n                    >\n                      {option.preview}\n                    </div>\n                  ))}\n                </div>\n              ) : (\n                <p className=\"text-body-sm text-muted-foreground\">Select an option to preview.</p>\n              )}\n            </div>\n          ) : null}\n        </div>\n\n        {onConfirm || onCancel ? (\n          <footer className=\"flex items-center justify-end gap-2\">\n            {onCancel ? (\n              <Button size=\"sm\" variant=\"secondary\" onClick={onCancel}>\n                {cancelLabel}\n              </Button>\n            ) : null}\n            {onConfirm ? (\n              <Button\n                size=\"sm\"\n                variant=\"primary\"\n                disabled={values.length < minSelected}\n                onClick={confirm}\n              >\n                {confirmLabel}\n              </Button>\n            ) : null}\n          </footer>\n        ) : null}\n      </section>\n    );\n  },\n);\nMultiSelectPrompt.displayName = \"MultiSelectPrompt\";\n\nexport { MultiSelectPrompt };\n"
+    }
+  ]
+}

package/registry/r/page-shell.json

@@ -19,7 +19,7 @@
       "path": "components/composites/page-shell/page-shell.tsx",
       "type": "registry:ui",
       "target": "components/ui/page-shell.tsx",
-      "content": "import { AlertCircle, Loader2 } from \"lucide-react\";\nimport { forwardRef, useEffect } from \"react\";\nimport type { ElementType, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ActionBar } from \"@/components/ui/action-bar\";\nimport { Card } from \"@/components/ui/card\";\nimport { EmptyState } from \"@/components/ui/empty-state\";\n\n/**\n * PageShell — page-level scaffold composite.\n *\n * Renders title + optional description + optional ActionBar, then\n * one of four mutually-exclusive content states:\n *   1. loading (highest precedence)\n *   2. error\n *   3. empty\n *   4. children (default)\n *\n * Scope-narrowed per Brief #5 D3: PageShell does NOT manage\n * `document.title`. Use the optional `onTitleChange` callback to\n * wire your own hook (e.g. useSetPageTitle, react-helmet,\n * next/head).\n *\n * @example\n *   <PageShell\n *     title=\"Domains\"\n *     description=\"Custom domains and DNS verification.\"\n *     search={{ placeholder: \"Search…\", value: q, onChange: setQ }}\n *     primaryAction={{ label: \"Add domain\", icon: Plus, onClick: openModal }}\n *     loading={isLoading}\n *     error={error ? { message: error.message, onRetry: refetch } : undefined}\n *     empty={data?.length === 0 ? { title: \"No domains yet\" } : undefined}\n *   >\n *     <DataTable columns={…} data={data} />\n *   </PageShell>\n */\nexport interface PageShellProps {\n  title: string;\n  description?: ReactNode;\n  /** Optional callback invoked when `title` changes — wire to your own document.title hook. */\n  onTitleChange?: (title: string) => void;\n  primaryAction?: {\n    label: ReactNode;\n    icon?: ElementType;\n    onClick: () => void;\n    loading?: boolean;\n  };\n  search?: {\n    placeholder: string;\n    value: string;\n    onChange: (v: string) => void;\n  };\n  onFilterClick?: () => void;\n  loading?: boolean;\n  /** Custom loading UI. Defaults to a centered spinner card. */\n  loadingNode?: ReactNode;\n  error?: {\n    message: string;\n    onRetry?: () => void;\n    docsHref?: string;\n  };\n  empty?: {\n    icon?: ElementType;\n    title: string;\n    description?: ReactNode;\n    action?: { label: string; onClick: () => void };\n  };\n  children?: ReactNode;\n  className?: string;\n}\n\nconst PageShell = forwardRef<HTMLElement, PageShellProps>(\n  (\n    {\n      title,\n      description,\n      onTitleChange,\n      primaryAction,\n      search,\n      onFilterClick,\n      loading = false,\n      loadingNode,\n      error,\n      empty,\n      children,\n      className,\n    },\n    ref,\n  ) => {\n    useEffect(() => {\n      onTitleChange?.(title);\n    }, [title, onTitleChange]);\n\n    const hasActionBar =\n      search !== undefined || primaryAction !== undefined || onFilterClick !== undefined;\n\n    // State precedence: loading > error > empty > children\n    let content: ReactNode;\n    if (loading) {\n      content = loadingNode ?? (\n        <Card className=\"flex items-center justify-center gap-3 p-12 text-muted-foreground\">\n          <Loader2 aria-hidden=\"true\" className=\"size-5 animate-spin\" />\n          <span className=\"font-sans text-body-sm\">Loading…</span>\n        </Card>\n      );\n    } else if (error) {\n      content = (\n        <Card className=\"flex flex-col items-center gap-3 p-8 text-center\">\n          <AlertCircle aria-hidden=\"true\" className=\"size-8 text-destructive\" />\n          <p className=\"font-sans text-body-sm text-foreground\">{error.message}</p>\n          <div className=\"flex items-center gap-3\">\n            {error.onRetry ? (\n              <button\n                type=\"button\"\n                onClick={error.onRetry}\n                className={cn(\n                  \"inline-flex items-center rounded-md border border-border/40 px-3 py-1.5\",\n                  \"font-sans text-body-sm text-foreground\",\n                  \"transition-colors hover:bg-muted\",\n                )}\n              >\n                Retry\n              </button>\n            ) : null}\n            {error.docsHref ? (\n              <a\n                href={error.docsHref}\n                className=\"font-sans text-body-sm text-primary hover:underline\"\n              >\n                View docs\n              </a>\n            ) : null}\n          </div>\n        </Card>\n      );\n    } else if (empty) {\n      const emptyAction = empty.action;\n      content = (\n        <EmptyState\n          icon={empty.icon as Parameters<typeof EmptyState>[0][\"icon\"]}\n          title={empty.title}\n          description={empty.description}\n          action={\n            emptyAction ? (\n              <button\n                type=\"button\"\n                onClick={emptyAction.onClick}\n                className={cn(\n                  \"inline-flex items-center rounded-md bg-primary px-3 py-1.5\",\n                  \"font-medium font-sans text-body-sm text-primary-foreground\",\n                  \"transition-colors hover:bg-primary-deep\",\n                )}\n              >\n                {emptyAction.label}\n              </button>\n            ) : undefined\n          }\n        />\n      );\n    } else {\n      content = children;\n    }\n\n    return (\n      <main\n        ref={ref}\n        aria-busy={loading || undefined}\n        className={cn(\"flex flex-col gap-6\", className)}\n      >\n        <header className=\"flex flex-col gap-1\">\n          <h1 className=\"font-display font-semibold text-display-sm text-foreground tracking-tight\">\n            {title}\n          </h1>\n          {description ? (\n            <p className=\"font-sans text-body-md text-muted-foreground\">{description}</p>\n          ) : null}\n        </header>\n        {hasActionBar ? (\n          <ActionBar search={search} primaryAction={primaryAction} onFilterClick={onFilterClick} />\n        ) : null}\n        <div>{content}</div>\n      </main>\n    );\n  },\n);\nPageShell.displayName = \"PageShell\";\n\nexport { PageShell };\n"
+      "content": "\"use client\";\n\nimport { AlertCircle, Loader2 } from \"lucide-react\";\nimport { forwardRef, useEffect } from \"react\";\nimport type { ElementType, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ActionBar } from \"@/components/ui/action-bar\";\nimport { Card } from \"@/components/ui/card\";\nimport { EmptyState } from \"@/components/ui/empty-state\";\n\n/**\n * PageShell — page-level scaffold composite.\n *\n * Renders title + optional description + optional ActionBar, then\n * one of four mutually-exclusive content states:\n *   1. loading (highest precedence)\n *   2. error\n *   3. empty\n *   4. children (default)\n *\n * Scope-narrowed per Brief #5 D3: PageShell does NOT manage\n * `document.title`. Use the optional `onTitleChange` callback to\n * wire your own hook (e.g. useSetPageTitle, react-helmet,\n * next/head).\n *\n * @example\n *   <PageShell\n *     title=\"Domains\"\n *     description=\"Custom domains and DNS verification.\"\n *     search={{ placeholder: \"Search…\", value: q, onChange: setQ }}\n *     primaryAction={{ label: \"Add domain\", icon: Plus, onClick: openModal }}\n *     loading={isLoading}\n *     error={error ? { message: error.message, onRetry: refetch } : undefined}\n *     empty={data?.length === 0 ? { title: \"No domains yet\" } : undefined}\n *   >\n *     <DataTable columns={…} data={data} />\n *   </PageShell>\n */\nexport interface PageShellProps {\n  title: string;\n  description?: ReactNode;\n  /** Optional callback invoked when `title` changes — wire to your own document.title hook. */\n  onTitleChange?: (title: string) => void;\n  primaryAction?: {\n    label: ReactNode;\n    icon?: ElementType;\n    onClick: () => void;\n    loading?: boolean;\n  };\n  search?: {\n    placeholder: string;\n    value: string;\n    onChange: (v: string) => void;\n  };\n  onFilterClick?: () => void;\n  loading?: boolean;\n  /** Custom loading UI. Defaults to a centered spinner card. */\n  loadingNode?: ReactNode;\n  error?: {\n    message: string;\n    onRetry?: () => void;\n    docsHref?: string;\n  };\n  empty?: {\n    icon?: ElementType;\n    title: string;\n    description?: ReactNode;\n    action?: { label: string; onClick: () => void };\n  };\n  children?: ReactNode;\n  className?: string;\n}\n\nconst PageShell = forwardRef<HTMLElement, PageShellProps>(\n  (\n    {\n      title,\n      description,\n      onTitleChange,\n      primaryAction,\n      search,\n      onFilterClick,\n      loading = false,\n      loadingNode,\n      error,\n      empty,\n      children,\n      className,\n    },\n    ref,\n  ) => {\n    useEffect(() => {\n      onTitleChange?.(title);\n    }, [title, onTitleChange]);\n\n    const hasActionBar =\n      search !== undefined || primaryAction !== undefined || onFilterClick !== undefined;\n\n    // State precedence: loading > error > empty > children\n    let content: ReactNode;\n    if (loading) {\n      content = loadingNode ?? (\n        <Card className=\"flex items-center justify-center gap-3 p-12 text-muted-foreground\">\n          <Loader2 aria-hidden=\"true\" className=\"size-5 animate-spin\" />\n          <span className=\"font-sans text-body-sm\">Loading…</span>\n        </Card>\n      );\n    } else if (error) {\n      content = (\n        <Card className=\"flex flex-col items-center gap-3 p-8 text-center\">\n          <AlertCircle aria-hidden=\"true\" className=\"size-8 text-destructive\" />\n          <p className=\"font-sans text-body-sm text-foreground\">{error.message}</p>\n          <div className=\"flex items-center gap-3\">\n            {error.onRetry ? (\n              <button\n                type=\"button\"\n                onClick={error.onRetry}\n                className={cn(\n                  \"inline-flex items-center rounded-md border border-border/40 px-3 py-1.5\",\n                  \"font-sans text-body-sm text-foreground\",\n                  \"transition-colors hover:bg-muted\",\n                )}\n              >\n                Retry\n              </button>\n            ) : null}\n            {error.docsHref ? (\n              <a\n                href={error.docsHref}\n                className=\"font-sans text-body-sm text-primary hover:underline\"\n              >\n                View docs\n              </a>\n            ) : null}\n          </div>\n        </Card>\n      );\n    } else if (empty) {\n      const emptyAction = empty.action;\n      content = (\n        <EmptyState\n          icon={empty.icon as Parameters<typeof EmptyState>[0][\"icon\"]}\n          title={empty.title}\n          description={empty.description}\n          action={\n            emptyAction ? (\n              <button\n                type=\"button\"\n                onClick={emptyAction.onClick}\n                className={cn(\n                  \"inline-flex items-center rounded-md bg-primary px-3 py-1.5\",\n                  \"font-medium font-sans text-body-sm text-primary-foreground\",\n                  \"transition-colors hover:bg-primary-deep\",\n                )}\n              >\n                {emptyAction.label}\n              </button>\n            ) : undefined\n          }\n        />\n      );\n    } else {\n      content = children;\n    }\n\n    return (\n      <main\n        data-slot=\"page-shell\"\n        ref={ref}\n        aria-busy={loading || undefined}\n        className={cn(\"flex flex-col gap-6\", className)}\n      >\n        <header className=\"flex flex-col gap-1\">\n          <h1 className=\"font-display font-semibold text-display-sm text-foreground tracking-tight\">\n            {title}\n          </h1>\n          {description ? (\n            <p className=\"font-sans text-body-md text-muted-foreground\">{description}</p>\n          ) : null}\n        </header>\n        {hasActionBar ? (\n          <ActionBar search={search} primaryAction={primaryAction} onFilterClick={onFilterClick} />\n        ) : null}\n        {/* Content slot: `flex flex-col gap-6` matches the outer <main> gap so\n         * direct children (e.g. multiple <Card>s, a <Table>, an inline <Alert>)\n         * automatically receive consistent section spacing. Without this,\n         * pages with 2+ top-level children would render them flush against\n         * each other — a regression observed in dashboard /memory landing\n         * (5 sibling sections collided). Pages that already wrap their content\n         * in a single grid/div are unaffected (gap only applies between siblings). */}\n        <div className=\"flex flex-col gap-6\">{content}</div>\n      </main>\n    );\n  },\n);\nPageShell.displayName = \"PageShell\";\n\nexport { PageShell };\n"
     }
   ]
 }

package/registry/r/pagination.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/pagination/pagination.tsx",
       "type": "registry:ui",
       "target": "components/ui/pagination.tsx",
-      "content": "import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Pagination — accessible page-number navigation primitive.\n *\n * Renders a `<nav aria-label=\"Pagination\">` containing a button group:\n * `[<<] [<] 1 ... 5 6 [7] 8 9 ... 42 [>] [>>]`. The active page carries\n * `aria-current=\"page\"`. Keyboard navigation (ArrowLeft / ArrowRight /\n * Home / End) is wired on the nav. Ellipses are rendered as\n * non-interactive `<span>` elements with `aria-hidden`.\n *\n * Renders nothing when `totalPages <= 1` (the page is the whole list).\n *\n * `siblingCount` controls how many neighbors of the current page are\n * always visible (default 1 → \"5 6 [7] 8 9\"). `showJumpButtons`\n * toggles the first/last `<<` / `>>` buttons.\n *\n * Consumers control state (`currentPage`) and are responsible for any\n * URL routing — the buttons are `<button>`, not `<a>`.\n *\n * @example\n *   <Pagination\n *     currentPage={page}\n *     totalPages={42}\n *     onPageChange={setPage}\n *   />\n */\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n  currentPage: number;\n  totalPages: number;\n  onPageChange: (page: number) => void;\n  /** Neighbors of current page that stay visible. Default 1. */\n  siblingCount?: number;\n  /** Render `<<` / `>>` first/last buttons. Default true. */\n  showJumpButtons?: boolean;\n  /** Size variant. Default md. */\n  size?: \"sm\" | \"md\";\n}\n\n/**\n * Pure helper: compute the visible page-range with ellipses.\n * Exported for unit testing — most pagination bugs live here.\n */\nexport function computePageRange(\n  currentPage: number,\n  totalPages: number,\n  siblingCount = 1,\n): Array<number | \"ellipsis-start\" | \"ellipsis-end\"> {\n  if (totalPages <= 1) return [];\n\n  // Always keep first + last + siblings around current.\n  // Total \"core\" buttons: 1 + (siblingCount * 2 + 1) + 1 = siblingCount * 2 + 3.\n  // Plus possibly 2 ellipsis placeholders → max visible = siblingCount * 2 + 5.\n  const totalNumbers = siblingCount * 2 + 3;\n  const totalWithEdges = totalNumbers + 2;\n\n  if (totalPages <= totalWithEdges) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const leftSibling = Math.max(currentPage - siblingCount, 1);\n  const rightSibling = Math.min(currentPage + siblingCount, totalPages);\n\n  const showLeftEllipsis = leftSibling > 2;\n  const showRightEllipsis = rightSibling < totalPages - 1;\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    const leftRangeEnd = 1 + (siblingCount * 2 + 2);\n    const leftRange = Array.from({ length: leftRangeEnd }, (_, i) => i + 1);\n    return [...leftRange, \"ellipsis-end\", totalPages];\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    const rightStart = totalPages - (siblingCount * 2 + 2);\n    const rightRange = Array.from(\n      { length: totalPages - rightStart + 1 },\n      (_, i) => rightStart + i,\n    );\n    return [1, \"ellipsis-start\", ...rightRange];\n  }\n\n  // Both sides need ellipsis.\n  const middleRange = Array.from(\n    { length: rightSibling - leftSibling + 1 },\n    (_, i) => leftSibling + i,\n  );\n  return [1, \"ellipsis-start\", ...middleRange, \"ellipsis-end\", totalPages];\n}\n\nconst SIZE: Record<NonNullable<PaginationProps[\"size\"]>, string> = {\n  sm: \"size-7 text-label\",\n  md: \"size-8 text-body-sm\",\n};\n\nconst ICON_SIZE: Record<NonNullable<PaginationProps[\"size\"]>, string> = {\n  sm: \"size-3\",\n  md: \"size-3.5\",\n};\n\nconst Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      className,\n      currentPage,\n      totalPages,\n      onPageChange,\n      siblingCount = 1,\n      showJumpButtons = true,\n      size = \"md\",\n      ...props\n    },\n    ref,\n  ) => {\n    if (totalPages <= 1) {\n      return null;\n    }\n\n    const range = computePageRange(currentPage, totalPages, siblingCount);\n    const prevDisabled = currentPage <= 1;\n    const nextDisabled = currentPage >= totalPages;\n    const sizeClass = SIZE[size];\n    const iconClass = ICON_SIZE[size];\n\n    const buttonBase = cn(\n      \"inline-flex items-center justify-center rounded-md font-mono tabular-nums\",\n      \"transition-colors\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      sizeClass,\n    );\n\n    function go(page: number) {\n      const clamped = Math.max(1, Math.min(totalPages, page));\n      if (clamped !== currentPage) onPageChange(clamped);\n    }\n\n    function handleKeyDown(e: KeyboardEvent<HTMLElement>) {\n      if (e.key === \"ArrowLeft\") {\n        e.preventDefault();\n        go(currentPage - 1);\n      } else if (e.key === \"ArrowRight\") {\n        e.preventDefault();\n        go(currentPage + 1);\n      } else if (e.key === \"Home\") {\n        e.preventDefault();\n        go(1);\n      } else if (e.key === \"End\") {\n        e.preventDefault();\n        go(totalPages);\n      }\n    }\n\n    return (\n      <nav\n        ref={ref}\n        aria-label=\"Pagination\"\n        onKeyDown={handleKeyDown}\n        className={cn(\"flex items-center gap-1\", className)}\n        {...props}\n      >\n        {showJumpButtons ? (\n          <button\n            type=\"button\"\n            onClick={() => go(1)}\n            disabled={prevDisabled}\n            aria-label=\"Go to first page\"\n            aria-disabled={prevDisabled || undefined}\n            className={cn(\n              buttonBase,\n              \"text-foreground hover:bg-muted\",\n              prevDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n            )}\n          >\n            <ChevronsLeft aria-hidden=\"true\" className={iconClass} />\n          </button>\n        ) : null}\n        <button\n          type=\"button\"\n          onClick={() => go(currentPage - 1)}\n          disabled={prevDisabled}\n          aria-label=\"Go to previous page\"\n          aria-disabled={prevDisabled || undefined}\n          className={cn(\n            buttonBase,\n            \"text-foreground hover:bg-muted\",\n            prevDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n          )}\n        >\n          <ChevronLeft aria-hidden=\"true\" className={iconClass} />\n        </button>\n        {range.map((item) => {\n          if (item === \"ellipsis-start\" || item === \"ellipsis-end\") {\n            return (\n              <span\n                key={item}\n                aria-hidden=\"true\"\n                className={cn(\n                  \"inline-flex items-center justify-center text-muted-foreground\",\n                  sizeClass,\n                )}\n              >\n                …\n              </span>\n            );\n          }\n          const isActive = item === currentPage;\n          return (\n            <button\n              key={item}\n              type=\"button\"\n              onClick={() => go(item)}\n              aria-label={`Go to page ${item}`}\n              aria-current={isActive ? \"page\" : undefined}\n              className={cn(\n                buttonBase,\n                isActive\n                  ? \"bg-primary text-primary-foreground hover:bg-primary\"\n                  : \"text-foreground hover:bg-muted\",\n              )}\n            >\n              {item}\n            </button>\n          );\n        })}\n        <button\n          type=\"button\"\n          onClick={() => go(currentPage + 1)}\n          disabled={nextDisabled}\n          aria-label=\"Go to next page\"\n          aria-disabled={nextDisabled || undefined}\n          className={cn(\n            buttonBase,\n            \"text-foreground hover:bg-muted\",\n            nextDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n          )}\n        >\n          <ChevronRight aria-hidden=\"true\" className={iconClass} />\n        </button>\n        {showJumpButtons ? (\n          <button\n            type=\"button\"\n            onClick={() => go(totalPages)}\n            disabled={nextDisabled}\n            aria-label=\"Go to last page\"\n            aria-disabled={nextDisabled || undefined}\n            className={cn(\n              buttonBase,\n              \"text-foreground hover:bg-muted\",\n              nextDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n            )}\n          >\n            <ChevronsRight aria-hidden=\"true\" className={iconClass} />\n          </button>\n        ) : null}\n      </nav>\n    );\n  },\n);\nPagination.displayName = \"Pagination\";\n\nexport { Pagination };\n"
+      "content": "import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, KeyboardEvent } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Pagination — accessible page-number navigation primitive.\n *\n * Renders a `<nav aria-label=\"Pagination\">` containing a button group:\n * `[<<] [<] 1 ... 5 6 [7] 8 9 ... 42 [>] [>>]`. The active page carries\n * `aria-current=\"page\"`. Keyboard navigation (ArrowLeft / ArrowRight /\n * Home / End) is wired on the nav. Ellipses are rendered as\n * non-interactive `<span>` elements with `aria-hidden`.\n *\n * Renders nothing when `totalPages <= 1` (the page is the whole list).\n *\n * `siblingCount` controls how many neighbors of the current page are\n * always visible (default 1 → \"5 6 [7] 8 9\"). `showJumpButtons`\n * toggles the first/last `<<` / `>>` buttons.\n *\n * Consumers control state (`currentPage`) and are responsible for any\n * URL routing — the buttons are `<button>`, not `<a>`.\n *\n * @example\n *   <Pagination\n *     currentPage={page}\n *     totalPages={42}\n *     onPageChange={setPage}\n *   />\n */\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n  currentPage: number;\n  totalPages: number;\n  onPageChange: (page: number) => void;\n  /** Neighbors of current page that stay visible. Default 1. */\n  siblingCount?: number;\n  /** Render `<<` / `>>` first/last buttons. Default true. */\n  showJumpButtons?: boolean;\n  /** Size variant. Default md. */\n  size?: \"sm\" | \"md\";\n}\n\n/**\n * Pure helper: compute the visible page-range with ellipses.\n * Exported for unit testing — most pagination bugs live here.\n */\nexport function computePageRange(\n  currentPage: number,\n  totalPages: number,\n  siblingCount = 1,\n): Array<number | \"ellipsis-start\" | \"ellipsis-end\"> {\n  if (totalPages <= 1) return [];\n\n  // Always keep first + last + siblings around current.\n  // Total \"core\" buttons: 1 + (siblingCount * 2 + 1) + 1 = siblingCount * 2 + 3.\n  // Plus possibly 2 ellipsis placeholders → max visible = siblingCount * 2 + 5.\n  const totalNumbers = siblingCount * 2 + 3;\n  const totalWithEdges = totalNumbers + 2;\n\n  if (totalPages <= totalWithEdges) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const leftSibling = Math.max(currentPage - siblingCount, 1);\n  const rightSibling = Math.min(currentPage + siblingCount, totalPages);\n\n  const showLeftEllipsis = leftSibling > 2;\n  const showRightEllipsis = rightSibling < totalPages - 1;\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    const leftRangeEnd = 1 + (siblingCount * 2 + 2);\n    const leftRange = Array.from({ length: leftRangeEnd }, (_, i) => i + 1);\n    return [...leftRange, \"ellipsis-end\", totalPages];\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    const rightStart = totalPages - (siblingCount * 2 + 2);\n    const rightRange = Array.from(\n      { length: totalPages - rightStart + 1 },\n      (_, i) => rightStart + i,\n    );\n    return [1, \"ellipsis-start\", ...rightRange];\n  }\n\n  // Both sides need ellipsis.\n  const middleRange = Array.from(\n    { length: rightSibling - leftSibling + 1 },\n    (_, i) => leftSibling + i,\n  );\n  return [1, \"ellipsis-start\", ...middleRange, \"ellipsis-end\", totalPages];\n}\n\nconst SIZE: Record<NonNullable<PaginationProps[\"size\"]>, string> = {\n  sm: \"size-7 text-label\",\n  md: \"size-8 text-body-sm\",\n};\n\nconst ICON_SIZE: Record<NonNullable<PaginationProps[\"size\"]>, string> = {\n  sm: \"size-3\",\n  md: \"size-3.5\",\n};\n\nconst Pagination = forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      className,\n      currentPage,\n      totalPages,\n      onPageChange,\n      siblingCount = 1,\n      showJumpButtons = true,\n      size = \"md\",\n      ...props\n    },\n    ref,\n  ) => {\n    if (totalPages <= 1) {\n      return null;\n    }\n\n    const range = computePageRange(currentPage, totalPages, siblingCount);\n    const prevDisabled = currentPage <= 1;\n    const nextDisabled = currentPage >= totalPages;\n    const sizeClass = SIZE[size];\n    const iconClass = ICON_SIZE[size];\n\n    const buttonBase = cn(\n      \"inline-flex items-center justify-center rounded-md font-mono tabular-nums\",\n      \"transition-colors\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      sizeClass,\n    );\n\n    function go(page: number) {\n      const clamped = Math.max(1, Math.min(totalPages, page));\n      if (clamped !== currentPage) onPageChange(clamped);\n    }\n\n    function handleKeyDown(e: KeyboardEvent<HTMLElement>) {\n      if (e.key === \"ArrowLeft\") {\n        e.preventDefault();\n        go(currentPage - 1);\n      } else if (e.key === \"ArrowRight\") {\n        e.preventDefault();\n        go(currentPage + 1);\n      } else if (e.key === \"Home\") {\n        e.preventDefault();\n        go(1);\n      } else if (e.key === \"End\") {\n        e.preventDefault();\n        go(totalPages);\n      }\n    }\n\n    return (\n      <nav\n        data-slot=\"pagination\"\n        ref={ref}\n        aria-label=\"Pagination\"\n        onKeyDown={handleKeyDown}\n        className={cn(\"flex items-center gap-1\", className)}\n        {...props}\n      >\n        {showJumpButtons ? (\n          <button\n            type=\"button\"\n            onClick={() => go(1)}\n            disabled={prevDisabled}\n            aria-label=\"Go to first page\"\n            aria-disabled={prevDisabled || undefined}\n            className={cn(\n              buttonBase,\n              \"text-foreground hover:bg-muted\",\n              prevDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n            )}\n          >\n            <ChevronsLeft aria-hidden=\"true\" className={iconClass} />\n          </button>\n        ) : null}\n        <button\n          type=\"button\"\n          onClick={() => go(currentPage - 1)}\n          disabled={prevDisabled}\n          aria-label=\"Go to previous page\"\n          aria-disabled={prevDisabled || undefined}\n          className={cn(\n            buttonBase,\n            \"text-foreground hover:bg-muted\",\n            prevDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n          )}\n        >\n          <ChevronLeft aria-hidden=\"true\" className={iconClass} />\n        </button>\n        {range.map((item) => {\n          if (item === \"ellipsis-start\" || item === \"ellipsis-end\") {\n            return (\n              <span\n                key={item}\n                aria-hidden=\"true\"\n                className={cn(\n                  \"inline-flex items-center justify-center text-muted-foreground\",\n                  sizeClass,\n                )}\n              >\n                …\n              </span>\n            );\n          }\n          const isActive = item === currentPage;\n          return (\n            <button\n              key={item}\n              type=\"button\"\n              onClick={() => go(item)}\n              aria-label={`Go to page ${item}`}\n              aria-current={isActive ? \"page\" : undefined}\n              className={cn(\n                buttonBase,\n                isActive\n                  ? \"bg-primary text-primary-foreground hover:bg-primary\"\n                  : \"text-foreground hover:bg-muted\",\n              )}\n            >\n              {item}\n            </button>\n          );\n        })}\n        <button\n          type=\"button\"\n          onClick={() => go(currentPage + 1)}\n          disabled={nextDisabled}\n          aria-label=\"Go to next page\"\n          aria-disabled={nextDisabled || undefined}\n          className={cn(\n            buttonBase,\n            \"text-foreground hover:bg-muted\",\n            nextDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n          )}\n        >\n          <ChevronRight aria-hidden=\"true\" className={iconClass} />\n        </button>\n        {showJumpButtons ? (\n          <button\n            type=\"button\"\n            onClick={() => go(totalPages)}\n            disabled={nextDisabled}\n            aria-label=\"Go to last page\"\n            aria-disabled={nextDisabled || undefined}\n            className={cn(\n              buttonBase,\n              \"text-foreground hover:bg-muted\",\n              nextDisabled && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n            )}\n          >\n            <ChevronsRight aria-hidden=\"true\" className={iconClass} />\n          </button>\n        ) : null}\n      </nav>\n    );\n  },\n);\nPagination.displayName = \"Pagination\";\n\nexport { Pagination };\n"
     }
   ]
 }

package/registry/r/permission-matrix.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/permission-matrix/permission-matrix.tsx",
       "type": "registry:ui",
       "target": "components/ui/permission-matrix.tsx",
-      "content": "import { Check, Lock, Plus, ShieldQuestion, Trash2 } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type PermissionDecisionKind = \"allow\" | \"ask\" | \"deny\";\n\nexport interface PermissionRule {\n  id: string;\n  /** Tool the rule applies to. Use \"*\" for any. */\n  tool: string;\n  /** Glob path it applies to. Use \"*\" for any. */\n  path: string;\n  decision: PermissionDecisionKind;\n  /** Optional rationale shown as helper text. */\n  note?: string;\n}\n\ninterface PermissionMatrixProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  rules: PermissionRule[];\n  title?: ReactNode;\n  /**\n   * Available tools shown in the add form. Pass `undefined` (or omit) — or an\n   * empty array — to hide the add form entirely. The form only renders when\n   * `onAdd` is provided AND `toolOptions` has at least one entry.\n   */\n  toolOptions?: string[];\n  onAdd?: (rule: Omit<PermissionRule, \"id\">) => void;\n  onRemove?: (id: string) => void;\n  onDecisionChange?: (id: string, decision: PermissionDecisionKind) => void;\n}\n\nconst DECISION_CLASS: Record<PermissionDecisionKind, string> = {\n  allow: \"bg-success/15 text-success border-success/40\",\n  ask: \"bg-warning/15 text-warning border-warning/40\",\n  deny: \"bg-destructive/15 text-destructive border-destructive/40\",\n};\n\nconst DECISION_ICON: Record<PermissionDecisionKind, ReactNode> = {\n  allow: <Check className=\"size-3\" aria-hidden=\"true\" />,\n  ask: <ShieldQuestion className=\"size-3\" aria-hidden=\"true\" />,\n  deny: <Lock className=\"size-3\" aria-hidden=\"true\" />,\n};\n\nconst cycle = (cur: PermissionDecisionKind): PermissionDecisionKind =>\n  cur === \"allow\" ? \"ask\" : cur === \"ask\" ? \"deny\" : \"allow\";\n\n/**\n * PermissionMatrix — tool × path × decision grid for fine-grained access\n * control. Used as the \"permissions\" tab in the agent settings.\n *\n * One PermissionRule per row. Click the decision pill to cycle Allow → Ask → Deny.\n *\n * Design decision (2026-05-14): PermissionMatrix stays in `primitives/`\n * — not `composites/` — even though it renders inputs and a select. The native\n * `<input>` / `<select>` elements use Theo design tokens directly (border-input,\n * ring, font-mono) so visual parity with `Input` / `Select` primitives is\n * preserved. Reason for keeping it primitive: a consumer installing\n * `permission-matrix` from the registry gets a single self-contained file with\n * no transitive Theo dependencies — opposite trade-off from `EnvVarEditor`\n * which is intentionally a composite. Both shapes are valid; we ship one of\n * each so consumers can pick the dependency profile that fits their app.\n */\nconst PermissionMatrix = forwardRef<HTMLDivElement, PermissionMatrixProps>(\n  (\n    {\n      className,\n      rules,\n      title = \"Permissions\",\n      toolOptions,\n      onAdd,\n      onRemove,\n      onDecisionChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const [newTool, setNewTool] = useState(toolOptions?.[0] ?? \"*\");\n    const [newPath, setNewPath] = useState(\"\");\n    const [newDecision, setNewDecision] = useState<PermissionDecisionKind>(\"ask\");\n\n    const submit = () => {\n      if (!newPath.trim()) return;\n      onAdd?.({ tool: newTool, path: newPath.trim(), decision: newDecision });\n      setNewPath(\"\");\n    };\n\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n        {title ? (\n          <header className=\"flex items-baseline justify-between border-border/40 border-b px-4 py-3\">\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n            <span className=\"font-mono text-label text-muted-foreground\">\n              {rules.length} {rules.length === 1 ? \"rule\" : \"rules\"}\n            </span>\n          </header>\n        ) : null}\n\n        {onAdd && toolOptions && toolOptions.length > 0 ? (\n          <form\n            className=\"grid grid-cols-[1fr_2fr_auto_auto] gap-2 border-border/40 border-b p-3\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              submit();\n            }}\n          >\n            <select\n              value={newTool}\n              onChange={(e) => setNewTool(e.target.value)}\n              aria-label=\"Tool\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm\"\n            >\n              <option value=\"*\">* (any tool)</option>\n              {toolOptions.map((t) => (\n                <option key={t} value={t}>\n                  {t}\n                </option>\n              ))}\n            </select>\n            <input\n              type=\"text\"\n              value={newPath}\n              onChange={(e) => setNewPath(e.target.value)}\n              placeholder=\"path glob (e.g. src/**/*.ts)\"\n              aria-label=\"Path\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            />\n            <select\n              value={newDecision}\n              onChange={(e) => setNewDecision(e.target.value as PermissionDecisionKind)}\n              aria-label=\"Decision\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm uppercase\"\n            >\n              <option value=\"allow\">allow</option>\n              <option value=\"ask\">ask</option>\n              <option value=\"deny\">deny</option>\n            </select>\n            <button\n              type=\"submit\"\n              className=\"inline-flex h-9 items-center gap-1 rounded-md bg-primary px-3 font-sans text-label text-primary-foreground hover:shadow-glow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Plus className=\"size-3.5\" /> Add\n            </button>\n          </form>\n        ) : null}\n\n        <ul className=\"divide-y divide-border/30\">\n          {rules.map((rule) => (\n            <li\n              key={rule.id}\n              className=\"grid grid-cols-[1fr_2fr_auto_auto] items-center gap-3 px-4 py-2.5\"\n            >\n              <span className=\"truncate font-mono text-code-sm text-foreground\">{rule.tool}</span>\n              <span className=\"truncate font-mono text-code-sm text-muted-foreground\">\n                {rule.path}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => onDecisionChange?.(rule.id, cycle(rule.decision))}\n                className={cn(\n                  \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1\",\n                  \"font-mono text-label uppercase tracking-wider transition-colors\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                  DECISION_CLASS[rule.decision],\n                  !onDecisionChange && \"pointer-events-none\",\n                )}\n              >\n                {DECISION_ICON[rule.decision]}\n                {rule.decision}\n              </button>\n              {onRemove ? (\n                <button\n                  type=\"button\"\n                  onClick={() => onRemove(rule.id)}\n                  aria-label={`Remove rule ${rule.tool} ${rule.path}`}\n                  className=\"rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                >\n                  <Trash2 className=\"size-3.5\" />\n                </button>\n              ) : null}\n            </li>\n          ))}\n          {rules.length === 0 ? (\n            <li className=\"px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n              No permission rules configured. The agent will fall back to default policy.\n            </li>\n          ) : null}\n        </ul>\n      </section>\n    );\n  },\n);\nPermissionMatrix.displayName = \"PermissionMatrix\";\n\nexport { PermissionMatrix };\n"
+      "content": "\"use client\";\n\nimport { Check, Lock, Plus, ShieldQuestion, Trash2 } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type PermissionDecisionKind = \"allow\" | \"ask\" | \"deny\";\n\nexport interface PermissionRule {\n  id: string;\n  /** Tool the rule applies to. Use \"*\" for any. */\n  tool: string;\n  /** Glob path it applies to. Use \"*\" for any. */\n  path: string;\n  decision: PermissionDecisionKind;\n  /** Optional rationale shown as helper text. */\n  note?: string;\n}\n\ninterface PermissionMatrixProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  rules: PermissionRule[];\n  title?: ReactNode;\n  /**\n   * Available tools shown in the add form. Pass `undefined` (or omit) — or an\n   * empty array — to hide the add form entirely. The form only renders when\n   * `onAdd` is provided AND `toolOptions` has at least one entry.\n   */\n  toolOptions?: string[];\n  onAdd?: (rule: Omit<PermissionRule, \"id\">) => void;\n  onRemove?: (id: string) => void;\n  onDecisionChange?: (id: string, decision: PermissionDecisionKind) => void;\n}\n\nconst DECISION_CLASS: Record<PermissionDecisionKind, string> = {\n  allow: \"bg-success/15 text-success border-success/40\",\n  ask: \"bg-warning/15 text-warning border-warning/40\",\n  deny: \"bg-destructive/15 text-destructive border-destructive/40\",\n};\n\nconst DECISION_ICON: Record<PermissionDecisionKind, ReactNode> = {\n  allow: <Check className=\"size-3\" aria-hidden=\"true\" />,\n  ask: <ShieldQuestion className=\"size-3\" aria-hidden=\"true\" />,\n  deny: <Lock className=\"size-3\" aria-hidden=\"true\" />,\n};\n\nconst cycle = (cur: PermissionDecisionKind): PermissionDecisionKind =>\n  cur === \"allow\" ? \"ask\" : cur === \"ask\" ? \"deny\" : \"allow\";\n\n/**\n * PermissionMatrix — tool × path × decision grid for fine-grained access\n * control. Used as the \"permissions\" tab in the agent settings.\n *\n * One PermissionRule per row. Click the decision pill to cycle Allow → Ask → Deny.\n *\n * Design decision (2026-05-14): PermissionMatrix stays in `primitives/`\n * — not `composites/` — even though it renders inputs and a select. The native\n * `<input>` / `<select>` elements use Theo design tokens directly (border-input,\n * ring, font-mono) so visual parity with `Input` / `Select` primitives is\n * preserved. Reason for keeping it primitive: a consumer installing\n * `permission-matrix` from the registry gets a single self-contained file with\n * no transitive Theo dependencies — opposite trade-off from `EnvVarEditor`\n * which is intentionally a composite. Both shapes are valid; we ship one of\n * each so consumers can pick the dependency profile that fits their app.\n */\nconst PermissionMatrix = forwardRef<HTMLDivElement, PermissionMatrixProps>(\n  (\n    {\n      className,\n      rules,\n      title = \"Permissions\",\n      toolOptions,\n      onAdd,\n      onRemove,\n      onDecisionChange,\n      ...props\n    },\n    ref,\n  ) => {\n    const [newTool, setNewTool] = useState(toolOptions?.[0] ?? \"*\");\n    const [newPath, setNewPath] = useState(\"\");\n    const [newDecision, setNewDecision] = useState<PermissionDecisionKind>(\"ask\");\n\n    const submit = () => {\n      if (!newPath.trim()) return;\n      onAdd?.({ tool: newTool, path: newPath.trim(), decision: newDecision });\n      setNewPath(\"\");\n    };\n\n    return (\n      <section\n        data-slot=\"permission-matrix\"\n        ref={ref}\n        className={cn(\"rounded-xl border bg-card\", className)}\n        {...props}\n      >\n        {title ? (\n          <header className=\"flex items-baseline justify-between border-border/40 border-b px-4 py-3\">\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n            <span className=\"font-mono text-label text-muted-foreground\">\n              {rules.length} {rules.length === 1 ? \"rule\" : \"rules\"}\n            </span>\n          </header>\n        ) : null}\n\n        {onAdd && toolOptions && toolOptions.length > 0 ? (\n          <form\n            className=\"grid grid-cols-[1fr_2fr_auto_auto] gap-2 border-border/40 border-b p-3\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              submit();\n            }}\n          >\n            <select\n              value={newTool}\n              onChange={(e) => setNewTool(e.target.value)}\n              aria-label=\"Tool\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm\"\n            >\n              <option value=\"*\">* (any tool)</option>\n              {toolOptions.map((t) => (\n                <option key={t} value={t}>\n                  {t}\n                </option>\n              ))}\n            </select>\n            <input\n              type=\"text\"\n              value={newPath}\n              onChange={(e) => setNewPath(e.target.value)}\n              placeholder=\"path glob (e.g. src/**/*.ts)\"\n              aria-label=\"Path\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            />\n            <select\n              value={newDecision}\n              onChange={(e) => setNewDecision(e.target.value as PermissionDecisionKind)}\n              aria-label=\"Decision\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm uppercase\"\n            >\n              <option value=\"allow\">allow</option>\n              <option value=\"ask\">ask</option>\n              <option value=\"deny\">deny</option>\n            </select>\n            <button\n              type=\"submit\"\n              className=\"inline-flex h-9 items-center gap-1 rounded-md bg-primary px-3 font-sans text-label text-primary-foreground hover:shadow-glow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Plus className=\"size-3.5\" /> Add\n            </button>\n          </form>\n        ) : null}\n\n        <ul className=\"divide-y divide-border/30\">\n          {rules.map((rule) => (\n            <li\n              key={rule.id}\n              className=\"grid grid-cols-[1fr_2fr_auto_auto] items-center gap-3 px-4 py-2.5\"\n            >\n              <span className=\"truncate font-mono text-code-sm text-foreground\">{rule.tool}</span>\n              <span className=\"truncate font-mono text-code-sm text-muted-foreground\">\n                {rule.path}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => onDecisionChange?.(rule.id, cycle(rule.decision))}\n                className={cn(\n                  \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1\",\n                  \"font-mono text-label uppercase tracking-wider transition-colors\",\n                  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                  DECISION_CLASS[rule.decision],\n                  !onDecisionChange && \"pointer-events-none\",\n                )}\n              >\n                {DECISION_ICON[rule.decision]}\n                {rule.decision}\n              </button>\n              {onRemove ? (\n                <button\n                  type=\"button\"\n                  onClick={() => onRemove(rule.id)}\n                  aria-label={`Remove rule ${rule.tool} ${rule.path}`}\n                  className=\"rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                >\n                  <Trash2 className=\"size-3.5\" />\n                </button>\n              ) : null}\n            </li>\n          ))}\n          {rules.length === 0 ? (\n            <li className=\"px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n              No permission rules configured. The agent will fall back to default policy.\n            </li>\n          ) : null}\n        </ul>\n      </section>\n    );\n  },\n);\nPermissionMatrix.displayName = \"PermissionMatrix\";\n\nexport { PermissionMatrix };\n"
     }
   ]
 }

package/registry/r/permission-modal.json

@@ -18,7 +18,7 @@
       "path": "components/composites/permission-modal/permission-modal.tsx",
       "type": "registry:ui",
       "target": "components/ui/permission-modal.tsx",
-      "content": "import { AlertTriangle, FolderOpen, ShieldAlert } from \"lucide-react\";\nimport { useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type {\n  PermissionDecision,\n  PermissionOperation,\n  PermissionRequest,\n} from \"@/types/permission\";\nimport { Button } from \"@/components/ui/button\";\nimport { Dialog } from \"@/components/ui/dialog\";\n\n/**\n * Friendly operation labels used by the default copy. Override with the\n * `operationLabels` prop to localize or rephrase per project.\n */\nexport const defaultOperationLabels: Record<PermissionOperation, string> = {\n  read: \"read\",\n  write: \"edit\",\n  delete: \"permanently delete\",\n};\n\ninterface PermissionModalLabels {\n  /** \"Cancel\" button. */\n  cancel: ReactNode;\n  /** \"Always allow\" tertiary button. */\n  always: ReactNode;\n  /** \"Allow once\" primary button. */\n  allow: ReactNode;\n  /** Inline label rendered before the operation list inside the body card. */\n  requestedOps: ReactNode;\n}\n\nconst defaultLabels: PermissionModalLabels = {\n  cancel: \"Cancel\",\n  always: \"Always allow\",\n  allow: \"Allow once\",\n  requestedOps: \"Requested operations:\",\n};\n\ninterface PermissionModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  request: PermissionRequest;\n  /**\n   * Fires when the user picks a decision. The modal does NOT auto-close;\n   * caller decides whether the decision should dismiss the modal.\n   */\n  onDecide: (decision: PermissionDecision) => void;\n  /** Override the modal title. Defaults to \"Allow Theo to {ops} files in {path}?\". */\n  title?: ReactNode;\n  /** Override the modal description (body lead text). */\n  description?: ReactNode;\n  /** Override the verb used for each operation in the default copy. */\n  operationLabels?: Partial<Record<PermissionOperation, string>>;\n  /** Override button text + inline labels. Useful for i18n. */\n  labels?: Partial<PermissionModalLabels>;\n}\n\n/**\n * PermissionModal — local-files access prompt built on Dialog.\n *\n * Three actions: Cancel (denied), Always allow, Allow once. Per WIREMOCKS §5,\n * the path is shown in the title (not hidden in body) and destructive\n * operations are listed inline.\n *\n * All visible text can be overridden via `title`, `description`,\n * `operationLabels`, and `labels`. Defaults are English; pass overrides for\n * other locales.\n */\nfunction PermissionModal({\n  open,\n  onOpenChange,\n  request,\n  onDecide,\n  title,\n  description,\n  operationLabels,\n  labels,\n}: PermissionModalProps) {\n  const opLabels = { ...defaultOperationLabels, ...operationLabels };\n  const opsList = request.operations.map((op) => opLabels[op]).join(\", \");\n  const text = { ...defaultLabels, ...labels };\n\n  // T4.4 (Code Issue 4): Esc / overlay-click previously fired onOpenChange(false)\n  // but never onDecide — users saw \"Cancel\" semantics, app saw silent dismissal.\n  // Track whether an explicit button decision happened; if the dialog closes\n  // without one, treat it as denied. decidedRef must reset on every fresh open\n  // so a rapid close-then-open doesn't carry state forward.\n  const decidedRef = useRef(false);\n  function handleDecide(decision: PermissionDecision) {\n    decidedRef.current = true;\n    onDecide(decision);\n  }\n  function handleOpenChange(next: boolean) {\n    const wasDecided = decidedRef.current;\n    // Reset BEFORE invoking onDecide so a re-open within the same tick starts\n    // clean. Edge case from SF-6: rapid toggle could leave decidedRef=true.\n    decidedRef.current = false;\n    if (!next && !wasDecided) {\n      onDecide(\"denied\");\n    }\n    onOpenChange(next);\n  }\n\n  const defaultTitle = (\n    <span className=\"flex items-center gap-2\">\n      <ShieldAlert className=\"size-5 text-warning\" aria-hidden=\"true\" />\n      Allow Theo to {opsList} files in{\" \"}\n      <code className=\"rounded-md bg-muted px-1.5 py-0.5 font-mono text-code-md text-primary\">\n        {request.path}\n      </code>\n      ?\n    </span>\n  );\n\n  const defaultDescription = (\n    <>\n      This includes all files and subfolders. Theo will be able to {opsList} and may share the\n      contents with connected third-party tools. Be careful when exposing confidential information.\n    </>\n  );\n\n  return (\n    <Dialog open={open} onOpenChange={handleOpenChange}>\n      <Dialog.Content className=\"max-w-xl\">\n        <Dialog.Header>\n          <Dialog.Title>{title ?? defaultTitle}</Dialog.Title>\n          <Dialog.Description>{description ?? defaultDescription}</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Body>\n          <div className=\"flex items-start gap-3 rounded-md border border-border/40 bg-muted/40 p-3\">\n            <FolderOpen\n              className=\"mt-0.5 size-4 shrink-0 text-muted-foreground\"\n              aria-hidden=\"true\"\n            />\n            <div className=\"grid gap-1\">\n              <p className=\"font-mono text-code-sm text-foreground\">{request.path}</p>\n              <p className=\"flex items-center gap-1.5 font-sans text-label text-warning\">\n                <AlertTriangle className=\"size-3\" aria-hidden=\"true\" />\n                {text.requestedOps} {opsList}\n              </p>\n            </div>\n          </div>\n        </Dialog.Body>\n        <Dialog.Footer>\n          <Button variant=\"secondary\" onClick={() => handleDecide(\"denied\")}>\n            {text.cancel}\n          </Button>\n          <Button variant=\"ghost\" onClick={() => handleDecide(\"always_allowed\")}>\n            {text.always}\n          </Button>\n          <Button onClick={() => handleDecide(\"allowed_once\")}>{text.allow}</Button>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n\nexport { PermissionModal };\n"
+      "content": "\"use client\";\n\nimport { AlertTriangle, FolderOpen, ShieldAlert } from \"lucide-react\";\nimport { useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type {\n  PermissionDecision,\n  PermissionOperation,\n  PermissionRequest,\n} from \"@/types/permission\";\nimport { Button } from \"@/components/ui/button\";\nimport { Dialog } from \"@/components/ui/dialog\";\n\n/**\n * Friendly operation labels used by the default copy. Override with the\n * `operationLabels` prop to localize or rephrase per project.\n */\nexport const defaultOperationLabels: Record<PermissionOperation, string> = {\n  read: \"read\",\n  write: \"edit\",\n  delete: \"permanently delete\",\n};\n\ninterface PermissionModalLabels {\n  /** \"Cancel\" button. */\n  cancel: ReactNode;\n  /** \"Always allow\" tertiary button. */\n  always: ReactNode;\n  /** \"Allow once\" primary button. */\n  allow: ReactNode;\n  /** Inline label rendered before the operation list inside the body card. */\n  requestedOps: ReactNode;\n}\n\nconst defaultLabels: PermissionModalLabels = {\n  cancel: \"Cancel\",\n  always: \"Always allow\",\n  allow: \"Allow once\",\n  requestedOps: \"Requested operations:\",\n};\n\ninterface PermissionModalProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  request: PermissionRequest;\n  /**\n   * Fires when the user picks a decision. The modal does NOT auto-close;\n   * caller decides whether the decision should dismiss the modal.\n   */\n  onDecide: (decision: PermissionDecision) => void;\n  /** Override the modal title. Defaults to \"Allow Theo to {ops} files in {path}?\". */\n  title?: ReactNode;\n  /** Override the modal description (body lead text). */\n  description?: ReactNode;\n  /** Override the verb used for each operation in the default copy. */\n  operationLabels?: Partial<Record<PermissionOperation, string>>;\n  /** Override button text + inline labels. Useful for i18n. */\n  labels?: Partial<PermissionModalLabels>;\n}\n\n/**\n * PermissionModal — local-files access prompt built on Dialog.\n *\n * Three actions: Cancel (denied), Always allow, Allow once. Per WIREMOCKS §5,\n * the path is shown in the title (not hidden in body) and destructive\n * operations are listed inline.\n *\n * All visible text can be overridden via `title`, `description`,\n * `operationLabels`, and `labels`. Defaults are English; pass overrides for\n * other locales.\n */\nfunction PermissionModal({\n  open,\n  onOpenChange,\n  request,\n  onDecide,\n  title,\n  description,\n  operationLabels,\n  labels,\n}: PermissionModalProps) {\n  const opLabels = { ...defaultOperationLabels, ...operationLabels };\n  const opsList = request.operations.map((op) => opLabels[op]).join(\", \");\n  const text = { ...defaultLabels, ...labels };\n\n  // T4.4 (Code Issue 4): Esc / overlay-click previously fired onOpenChange(false)\n  // but never onDecide — users saw \"Cancel\" semantics, app saw silent dismissal.\n  // Track whether an explicit button decision happened; if the dialog closes\n  // without one, treat it as denied. decidedRef must reset on every fresh open\n  // so a rapid close-then-open doesn't carry state forward.\n  const decidedRef = useRef(false);\n  function handleDecide(decision: PermissionDecision) {\n    decidedRef.current = true;\n    onDecide(decision);\n  }\n  function handleOpenChange(next: boolean) {\n    const wasDecided = decidedRef.current;\n    // Reset BEFORE invoking onDecide so a re-open within the same tick starts\n    // clean. Edge case from SF-6: rapid toggle could leave decidedRef=true.\n    decidedRef.current = false;\n    if (!next && !wasDecided) {\n      onDecide(\"denied\");\n    }\n    onOpenChange(next);\n  }\n\n  const defaultTitle = (\n    <span className=\"flex items-center gap-2\">\n      <ShieldAlert className=\"size-5 text-warning\" aria-hidden=\"true\" />\n      Allow Theo to {opsList} files in{\" \"}\n      <code className=\"rounded-md bg-muted px-1.5 py-0.5 font-mono text-code-md text-primary\">\n        {request.path}\n      </code>\n      ?\n    </span>\n  );\n\n  const defaultDescription = (\n    <>\n      This includes all files and subfolders. Theo will be able to {opsList} and may share the\n      contents with connected third-party tools. Be careful when exposing confidential information.\n    </>\n  );\n\n  return (\n    <Dialog data-slot=\"permission-modal\" open={open} onOpenChange={handleOpenChange}>\n      <Dialog.Content className=\"max-w-xl\">\n        <Dialog.Header>\n          <Dialog.Title>{title ?? defaultTitle}</Dialog.Title>\n          <Dialog.Description>{description ?? defaultDescription}</Dialog.Description>\n        </Dialog.Header>\n        <Dialog.Body>\n          <div className=\"flex items-start gap-3 rounded-md border border-border/40 bg-muted/40 p-3\">\n            <FolderOpen\n              className=\"mt-0.5 size-4 shrink-0 text-muted-foreground\"\n              aria-hidden=\"true\"\n            />\n            <div className=\"grid gap-1\">\n              <p className=\"font-mono text-code-sm text-foreground\">{request.path}</p>\n              <p className=\"flex items-center gap-1.5 font-sans text-label text-warning\">\n                <AlertTriangle className=\"size-3\" aria-hidden=\"true\" />\n                {text.requestedOps} {opsList}\n              </p>\n            </div>\n          </div>\n        </Dialog.Body>\n        <Dialog.Footer>\n          <Button variant=\"secondary\" onClick={() => handleDecide(\"denied\")}>\n            {text.cancel}\n          </Button>\n          <Button variant=\"ghost\" onClick={() => handleDecide(\"always_allowed\")}>\n            {text.always}\n          </Button>\n          <Button onClick={() => handleDecide(\"allowed_once\")}>{text.allow}</Button>\n        </Dialog.Footer>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n\nexport { PermissionModal };\n"
     }
   ]
 }

package/registry/r/pin-input.json

@@ -14,7 +14,7 @@
       "path": "components/primitives/pin-input/pin-input.tsx",
       "type": "registry:ui",
       "target": "components/ui/pin-input.tsx",
-      "content": "import { forwardRef, useEffect, useRef } from \"react\";\nimport type { ClipboardEvent, HTMLAttributes, KeyboardEvent } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * PinInput — multi-slot OTP / code input primitive.\n *\n * Renders N separate boxes (default 6) that auto-advance focus on\n * input. Paste handling fills all slots from clipboard (whitespace\n * stripped). Arrow keys navigate; backspace clears current slot\n * then moves focus back when empty.\n *\n * Industry-standard pattern for email verification codes (Apple,\n * Stripe, Clerk, Auth0, GitHub two-factor).\n *\n * @example\n *   <PinInput\n *     length={6}\n *     value={code}\n *     onChange={setCode}\n *     onComplete={(v) => verify(v)}\n *     inputMode=\"numeric\"\n *     aria-label=\"Verification code\"\n *   />\n *\n * Note: value is treated as controlled. If you pass a complete value\n * on mount, onComplete will NOT fire — onComplete fires only on\n * transitions from incomplete → complete.\n */\nexport interface PinInputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"inputMode\"> {\n  length?: number;\n  value?: string;\n  onChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n  inputMode?: \"numeric\" | \"alphanumeric\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  disabled?: boolean;\n  error?: boolean;\n  \"aria-label\": string;\n  autoFocus?: boolean;\n  mask?: boolean;\n}\n\nconst SIZE_CLASS: Record<NonNullable<PinInputProps[\"size\"]>, string> = {\n  sm: \"size-8 text-body-sm\",\n  md: \"size-10 text-body-md\",\n  lg: \"size-12 text-title-sm\",\n};\n\nfunction sanitize(raw: string, inputMode: \"numeric\" | \"alphanumeric\"): string {\n  const noWhitespace = raw.replace(/\\s/g, \"\");\n  if (inputMode === \"numeric\") {\n    return noWhitespace.replace(/\\D/g, \"\");\n  }\n  return noWhitespace.toUpperCase().replace(/[^A-Z0-9]/g, \"\");\n}\n\nconst PinInput = forwardRef<HTMLDivElement, PinInputProps>(\n  (\n    {\n      className,\n      length = 6,\n      value = \"\",\n      onChange,\n      onComplete,\n      inputMode = \"numeric\",\n      size = \"md\",\n      disabled = false,\n      error = false,\n      autoFocus = false,\n      mask = false,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n    const wasCompleteRef = useRef<boolean>(value.length === length);\n\n    // Auto-focus first slot on mount (SSR-safe)\n    useEffect(() => {\n      if (!autoFocus) return;\n      if (typeof window === \"undefined\") return;\n      inputRefs.current[0]?.focus();\n    }, [autoFocus]);\n\n    // Fire onComplete on transitions from incomplete → complete\n    useEffect(() => {\n      const isComplete = value.length === length && value.length > 0;\n      if (isComplete && !wasCompleteRef.current) {\n        onComplete?.(value);\n      }\n      wasCompleteRef.current = isComplete;\n    }, [value, length, onComplete]);\n\n    function commit(next: string) {\n      const sanitized = sanitize(next, inputMode).slice(0, length);\n      onChange?.(sanitized);\n    }\n\n    function handleChange(slot: number, raw: string) {\n      const sanitized = sanitize(raw, inputMode);\n      if (sanitized.length === 0) {\n        // Clear current slot\n        const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n        commit(next);\n        return;\n      }\n      // Take the last character typed (handles browser autocomplete that fills multiple)\n      const ch = sanitized[sanitized.length - 1] ?? \"\";\n      const next = `${value.slice(0, slot)}${ch}${value.slice(slot + 1)}`;\n      commit(next);\n      // Advance focus\n      if (slot < length - 1) {\n        inputRefs.current[slot + 1]?.focus();\n      }\n    }\n\n    function handleKeyDown(slot: number, e: KeyboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      const slotChar = value[slot] ?? \"\";\n\n      if (e.key === \"Backspace\") {\n        if (slotChar === \"\") {\n          // Move focus back if current is empty\n          if (slot > 0) {\n            inputRefs.current[slot - 1]?.focus();\n          }\n        } else {\n          // Clear current slot, stay focused\n          const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n          commit(next);\n        }\n        e.preventDefault();\n      } else if (e.key === \"ArrowLeft\") {\n        if (slot > 0) inputRefs.current[slot - 1]?.focus();\n        e.preventDefault();\n      } else if (e.key === \"ArrowRight\") {\n        if (slot < length - 1) inputRefs.current[slot + 1]?.focus();\n        e.preventDefault();\n      }\n    }\n\n    function handlePaste(slot: number, e: ClipboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      e.preventDefault();\n      const pasted = e.clipboardData.getData(\"text/plain\");\n      const sanitized = sanitize(pasted, inputMode);\n      if (sanitized.length === 0) return;\n      // Build slot-indexed array, then overwrite from `slot` onwards.\n      // Previous string-concat approach didn't pad when value was shorter\n      // than `slot`, which made paste-from-middle-when-empty fill from 0.\n      const slotArr: string[] = Array.from({ length }, (_, i) => value[i] ?? \"\");\n      const remaining = length - slot;\n      const filled = sanitized.slice(0, remaining);\n      for (let i = 0; i < filled.length; i++) {\n        slotArr[slot + i] = filled[i] ?? \"\";\n      }\n      const next = slotArr.join(\"\");\n      commit(next);\n      // Focus the slot after the last filled, or the last slot if completed\n      const focusAt = Math.min(slot + filled.length, length - 1);\n      requestAnimationFrame(() => inputRefs.current[focusAt]?.focus());\n    }\n\n    const slots = Array.from({ length }, (_, i) => i);\n\n    return (\n      <div\n        ref={ref}\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would force a different visual layout (rectangular border by default) and is form-bound; we use a div with role=\"group\" + aria-label for grouping semantics.\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\"inline-flex items-center gap-2\", className)}\n        {...props}\n      >\n        {slots.map((i) => {\n          const ch = value[i] ?? \"\";\n          const display = mask && ch !== \"\" ? \"•\" : ch;\n          return (\n            <input\n              key={i}\n              ref={(el) => {\n                inputRefs.current[i] = el;\n              }}\n              type=\"text\"\n              inputMode={inputMode === \"numeric\" ? \"numeric\" : \"text\"}\n              pattern={inputMode === \"numeric\" ? \"[0-9]*\" : undefined}\n              maxLength={1}\n              autoComplete={i === 0 ? \"one-time-code\" : \"off\"}\n              disabled={disabled}\n              value={display}\n              onChange={(e) => handleChange(i, e.target.value)}\n              onKeyDown={(e) => handleKeyDown(i, e)}\n              onPaste={(e) => handlePaste(i, e)}\n              aria-label={`Digit ${i + 1} of ${length}`}\n              className={cn(\n                \"rounded-md border bg-card text-center font-medium font-mono\",\n                \"transition-colors\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n                \"disabled:cursor-not-allowed disabled:opacity-50\",\n                SIZE_CLASS[size],\n                error ? \"border-destructive\" : \"border-border/60 hover:border-border\",\n              )}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\nPinInput.displayName = \"PinInput\";\n\nexport { PinInput };\n"
+      "content": "\"use client\";\n\nimport { forwardRef, useEffect, useRef } from \"react\";\nimport type { ClipboardEvent, HTMLAttributes, KeyboardEvent } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * PinInput — multi-slot OTP / code input primitive.\n *\n * Renders N separate boxes (default 6) that auto-advance focus on\n * input. Paste handling fills all slots from clipboard (whitespace\n * stripped). Arrow keys navigate; backspace clears current slot\n * then moves focus back when empty.\n *\n * Industry-standard pattern for email verification codes (Apple,\n * Stripe, Clerk, Auth0, GitHub two-factor).\n *\n * @example\n *   <PinInput\n *     length={6}\n *     value={code}\n *     onChange={setCode}\n *     onComplete={(v) => verify(v)}\n *     inputMode=\"numeric\"\n *     aria-label=\"Verification code\"\n *   />\n *\n * Note: value is treated as controlled. If you pass a complete value\n * on mount, onComplete will NOT fire — onComplete fires only on\n * transitions from incomplete → complete.\n */\nexport interface PinInputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"inputMode\"> {\n  length?: number;\n  value?: string;\n  onChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n  inputMode?: \"numeric\" | \"alphanumeric\";\n  size?: \"sm\" | \"md\" | \"lg\";\n  disabled?: boolean;\n  error?: boolean;\n  \"aria-label\": string;\n  autoFocus?: boolean;\n  mask?: boolean;\n}\n\nconst SIZE_CLASS: Record<NonNullable<PinInputProps[\"size\"]>, string> = {\n  sm: \"size-8 text-body-sm\",\n  md: \"size-10 text-body-md\",\n  lg: \"size-12 text-title-sm\",\n};\n\nfunction sanitize(raw: string, inputMode: \"numeric\" | \"alphanumeric\"): string {\n  const noWhitespace = raw.replace(/\\s/g, \"\");\n  if (inputMode === \"numeric\") {\n    return noWhitespace.replace(/\\D/g, \"\");\n  }\n  return noWhitespace.toUpperCase().replace(/[^A-Z0-9]/g, \"\");\n}\n\nconst PinInput = forwardRef<HTMLDivElement, PinInputProps>(\n  (\n    {\n      className,\n      length = 6,\n      value = \"\",\n      onChange,\n      onComplete,\n      inputMode = \"numeric\",\n      size = \"md\",\n      disabled = false,\n      error = false,\n      autoFocus = false,\n      mask = false,\n      \"aria-label\": ariaLabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n    const wasCompleteRef = useRef<boolean>(value.length === length);\n\n    // Auto-focus first slot on mount (SSR-safe)\n    useEffect(() => {\n      if (!autoFocus) return;\n      if (typeof window === \"undefined\") return;\n      inputRefs.current[0]?.focus();\n    }, [autoFocus]);\n\n    // Fire onComplete on transitions from incomplete → complete\n    useEffect(() => {\n      const isComplete = value.length === length && value.length > 0;\n      if (isComplete && !wasCompleteRef.current) {\n        onComplete?.(value);\n      }\n      wasCompleteRef.current = isComplete;\n    }, [value, length, onComplete]);\n\n    function commit(next: string) {\n      const sanitized = sanitize(next, inputMode).slice(0, length);\n      onChange?.(sanitized);\n    }\n\n    function handleChange(slot: number, raw: string) {\n      const sanitized = sanitize(raw, inputMode);\n      if (sanitized.length === 0) {\n        // Clear current slot\n        const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n        commit(next);\n        return;\n      }\n      // Take the last character typed (handles browser autocomplete that fills multiple)\n      const ch = sanitized[sanitized.length - 1] ?? \"\";\n      const next = `${value.slice(0, slot)}${ch}${value.slice(slot + 1)}`;\n      commit(next);\n      // Advance focus\n      if (slot < length - 1) {\n        inputRefs.current[slot + 1]?.focus();\n      }\n    }\n\n    function handleKeyDown(slot: number, e: KeyboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      const slotChar = value[slot] ?? \"\";\n\n      if (e.key === \"Backspace\") {\n        if (slotChar === \"\") {\n          // Move focus back if current is empty\n          if (slot > 0) {\n            inputRefs.current[slot - 1]?.focus();\n          }\n        } else {\n          // Clear current slot, stay focused\n          const next = `${value.slice(0, slot)}${value.slice(slot + 1)}`;\n          commit(next);\n        }\n        e.preventDefault();\n      } else if (e.key === \"ArrowLeft\") {\n        if (slot > 0) inputRefs.current[slot - 1]?.focus();\n        e.preventDefault();\n      } else if (e.key === \"ArrowRight\") {\n        if (slot < length - 1) inputRefs.current[slot + 1]?.focus();\n        e.preventDefault();\n      }\n    }\n\n    function handlePaste(slot: number, e: ClipboardEvent<HTMLInputElement>) {\n      if (disabled) return;\n      e.preventDefault();\n      const pasted = e.clipboardData.getData(\"text/plain\");\n      const sanitized = sanitize(pasted, inputMode);\n      if (sanitized.length === 0) return;\n      // Build slot-indexed array, then overwrite from `slot` onwards.\n      // Previous string-concat approach didn't pad when value was shorter\n      // than `slot`, which made paste-from-middle-when-empty fill from 0.\n      const slotArr: string[] = Array.from({ length }, (_, i) => value[i] ?? \"\");\n      const remaining = length - slot;\n      const filled = sanitized.slice(0, remaining);\n      for (let i = 0; i < filled.length; i++) {\n        slotArr[slot + i] = filled[i] ?? \"\";\n      }\n      const next = slotArr.join(\"\");\n      commit(next);\n      // Focus the slot after the last filled, or the last slot if completed\n      const focusAt = Math.min(slot + filled.length, length - 1);\n      requestAnimationFrame(() => inputRefs.current[focusAt]?.focus());\n    }\n\n    const slots = Array.from({ length }, (_, i) => i);\n\n    return (\n      <div\n        data-slot=\"pin-input\"\n        ref={ref}\n        // biome-ignore lint/a11y/useSemanticElements: <fieldset> would force a different visual layout (rectangular border by default) and is form-bound; we use a div with role=\"group\" + aria-label for grouping semantics.\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={cn(\"inline-flex items-center gap-2\", className)}\n        {...props}\n      >\n        {slots.map((i) => {\n          const ch = value[i] ?? \"\";\n          const display = mask && ch !== \"\" ? \"•\" : ch;\n          return (\n            <input\n              key={i}\n              ref={(el) => {\n                inputRefs.current[i] = el;\n              }}\n              type=\"text\"\n              inputMode={inputMode === \"numeric\" ? \"numeric\" : \"text\"}\n              pattern={inputMode === \"numeric\" ? \"[0-9]*\" : undefined}\n              maxLength={1}\n              autoComplete={i === 0 ? \"one-time-code\" : \"off\"}\n              disabled={disabled}\n              value={display}\n              onChange={(e) => handleChange(i, e.target.value)}\n              onKeyDown={(e) => handleKeyDown(i, e)}\n              onPaste={(e) => handlePaste(i, e)}\n              aria-label={`Digit ${i + 1} of ${length}`}\n              className={cn(\n                \"rounded-md border bg-card text-center font-medium font-mono\",\n                \"transition-colors\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n                \"disabled:cursor-not-allowed disabled:opacity-50\",\n                SIZE_CLASS[size],\n                error ? \"border-destructive\" : \"border-border/60 hover:border-border\",\n              )}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\nPinInput.displayName = \"PinInput\";\n\nexport { PinInput };\n"
     }
   ]
 }

package/registry/r/plan-badge.json

@@ -14,7 +14,7 @@
       "path": "components/primitives/plan-badge/plan-badge.tsx",
       "type": "registry:ui",
       "target": "components/ui/plan-badge.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * PlanBadge — semantic pricing-tier badge.\n *\n * Five canonical tiers (`free` / `hobby` / `pro` / `team` / `enterprise`) with\n * distinct color tokens. Consumers self-document intent with `plan=\"hobby\"`\n * instead of mapping a generic `<Badge variant=\"outline\">` to colors per app.\n * Future rebrand / dark-mode tweaks propagate automatically — no consumer\n * code change.\n *\n * Visual spec (per `theo/docs/handoff/2026-05-23-theo-ui-cloud-dashboard-gaps-brief.md`):\n *\n *   | tier         | bg                  | border                   | text                  |\n *   |--------------|---------------------|--------------------------|-----------------------|\n *   | free         | bg-muted/40         | border-muted-foreground/20 | text-muted-foreground |\n *   | hobby        | bg-warning/10       | border-warning/30        | text-warning          |\n *   | pro          | bg-primary/10       | border-primary/30        | text-primary          |\n *   | team         | bg-success/10       | border-success/30        | text-success          |\n *   | enterprise   | bg-foreground/5     | border-foreground/20     | text-foreground       |\n *\n * Default label capitalizes the tier (`hobby → \"Hobby\"`, `enterprise → \"Enterprise\"`).\n *\n * Used by `<AccountMenu>` inline with the user name; usable standalone.\n */\n\nexport type PlanTier = \"free\" | \"hobby\" | \"pro\" | \"team\" | \"enterprise\";\n\nexport interface PlanBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Plan tier identifier. */\n  plan: PlanTier;\n  /** Override the display label. Defaults to the capitalized tier name. */\n  label?: string;\n  /** Size variant. */\n  size?: \"sm\" | \"md\";\n}\n\nconst TIER_CLASS: Record<PlanTier, string> = {\n  free: \"bg-muted/40 border-muted-foreground/20 text-muted-foreground\",\n  hobby: \"bg-warning/10 border-warning/30 text-warning\",\n  pro: \"bg-primary/10 border-primary/30 text-primary\",\n  team: \"bg-success/10 border-success/30 text-success\",\n  enterprise: \"bg-foreground/5 border-foreground/20 text-foreground\",\n};\n\nconst SIZE_CLASS = {\n  sm: \"px-1.5 py-0 text-label-caps\",\n  md: \"px-2 py-0.5 text-label\",\n} as const;\n\nfunction defaultLabel(plan: PlanTier): string {\n  return plan.charAt(0).toUpperCase() + plan.slice(1);\n}\n\nconst PlanBadge = forwardRef<HTMLSpanElement, PlanBadgeProps>(\n  ({ className, plan, label, size = \"md\", ...props }, ref) => {\n    // Runtime fallback for unknown tier (TypeScript prevents this at compile\n    // time; the guard handles consumers casting an arbitrary string).\n    const tierClass = TIER_CLASS[plan] ?? TIER_CLASS.free;\n    const displayLabel = label ?? defaultLabel(plan);\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"inline-flex items-center rounded-md border\",\n          \"font-mono uppercase tabular-nums tracking-wider\",\n          tierClass,\n          SIZE_CLASS[size],\n          className,\n        )}\n        data-plan={plan}\n        {...props}\n      >\n        {displayLabel}\n      </span>\n    );\n  },\n);\nPlanBadge.displayName = \"PlanBadge\";\n\nexport { PlanBadge };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * PlanBadge — semantic pricing-tier badge.\n *\n * Five canonical tiers (`free` / `hobby` / `pro` / `team` / `enterprise`) with\n * distinct color tokens. Consumers self-document intent with `plan=\"hobby\"`\n * instead of mapping a generic `<Badge variant=\"outline\">` to colors per app.\n * Future rebrand / dark-mode tweaks propagate automatically — no consumer\n * code change.\n *\n * Visual spec (per `theo/docs/handoff/2026-05-23-theo-ui-cloud-dashboard-gaps-brief.md`):\n *\n *   | tier         | bg                  | border                   | text                  |\n *   |--------------|---------------------|--------------------------|-----------------------|\n *   | free         | bg-muted/40         | border-muted-foreground/20 | text-muted-foreground |\n *   | hobby        | bg-warning/10       | border-warning/30        | text-warning          |\n *   | pro          | bg-primary/10       | border-primary/30        | text-primary          |\n *   | team         | bg-success/10       | border-success/30        | text-success          |\n *   | enterprise   | bg-foreground/5     | border-foreground/20     | text-foreground       |\n *\n * Default label capitalizes the tier (`hobby → \"Hobby\"`, `enterprise → \"Enterprise\"`).\n *\n * Used by `<AccountMenu>` inline with the user name; usable standalone.\n */\n\nexport type PlanTier = \"free\" | \"hobby\" | \"pro\" | \"team\" | \"enterprise\";\n\nexport interface PlanBadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Plan tier identifier. */\n  plan: PlanTier;\n  /** Override the display label. Defaults to the capitalized tier name. */\n  label?: string;\n  /** Size variant. */\n  size?: \"sm\" | \"md\";\n}\n\nconst TIER_CLASS: Record<PlanTier, string> = {\n  free: \"bg-muted/40 border-muted-foreground/20 text-muted-foreground\",\n  hobby: \"bg-warning/10 border-warning/30 text-warning\",\n  pro: \"bg-primary/10 border-primary/30 text-primary\",\n  team: \"bg-success/10 border-success/30 text-success\",\n  enterprise: \"bg-foreground/5 border-foreground/20 text-foreground\",\n};\n\nconst SIZE_CLASS = {\n  sm: \"px-1.5 py-0 text-label-caps\",\n  md: \"px-2 py-0.5 text-label\",\n} as const;\n\nfunction defaultLabel(plan: PlanTier): string {\n  return plan.charAt(0).toUpperCase() + plan.slice(1);\n}\n\nconst PlanBadge = forwardRef<HTMLSpanElement, PlanBadgeProps>(\n  ({ className, plan, label, size = \"md\", ...props }, ref) => {\n    // Runtime fallback for unknown tier (TypeScript prevents this at compile\n    // time; the guard handles consumers casting an arbitrary string).\n    const tierClass = TIER_CLASS[plan] ?? TIER_CLASS.free;\n    const displayLabel = label ?? defaultLabel(plan);\n    return (\n      <span\n        data-slot=\"plan-badge\"\n        ref={ref}\n        className={cn(\n          \"inline-flex items-center rounded-md border\",\n          \"font-mono uppercase tabular-nums tracking-wider\",\n          tierClass,\n          SIZE_CLASS[size],\n          className,\n        )}\n        data-plan={plan}\n        {...props}\n      >\n        {displayLabel}\n      </span>\n    );\n  },\n);\nPlanBadge.displayName = \"PlanBadge\";\n\nexport { PlanBadge };\n"
     }
   ]
 }

package/registry/r/preview-env-card.json

@@ -19,7 +19,7 @@
       "path": "components/composites/preview-env-card/preview-env-card.tsx",
       "type": "registry:block",
       "target": "components/blocks/preview-env-card.tsx",
-      "content": "import { ExternalLink, GitPullRequest, Server } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { safeHref } from \"@/lib/safe-href\";\nimport { Badge } from \"@/components/ui/badge\";\nimport type { DeploymentStatus } from \"@/components/blocks/deployment-row\";\n\nconst statusToVariant: Record<\n  DeploymentStatus,\n  \"default\" | \"primary\" | \"success\" | \"warning\" | \"destructive\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"default\",\n};\nconst statusToDot: Record<\n  DeploymentStatus,\n  \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"muted\",\n};\nconst statusLabels: Record<DeploymentStatus, string> = {\n  queued: \"Queued\",\n  building: \"Building\",\n  deploying: \"Deploying\",\n  live: \"Live\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nexport interface PreviewService {\n  /** Service name e.g. \"api\", \"web\", \"worker\". */\n  name: string;\n  /** Live URL or null if not exposed (worker). */\n  url?: string;\n  status: DeploymentStatus;\n}\n\nexport interface PreviewEnv {\n  id: string;\n  prNumber: number;\n  prTitle: string;\n  branch: string;\n  author?: { name: string; avatarUrl?: string };\n  services: PreviewService[];\n  createdAt: string;\n}\n\ninterface PreviewEnvCardProps extends HTMLAttributes<HTMLDivElement> {\n  env: PreviewEnv;\n  actions?: ReactNode;\n}\n\n/**\n * PreviewEnvCard — preview environment card surfacing all services from one PR.\n *\n * Theo's killer feature: full-stack preview environments. The card shows:\n *   - PR number + title at the top\n *   - branch + author in the metadata row\n *   - one badge per service with its own status + URL\n *   - bottom action row (Open, Promote, Delete)\n */\nconst PreviewEnvCard = forwardRef<HTMLDivElement, PreviewEnvCardProps>(\n  ({ className, env, actions, ...props }, ref) => (\n    <article\n      ref={ref}\n      className={cn(\n        \"rounded-xl border bg-card p-5 shadow-sm\",\n        \"transition-[border-color,box-shadow] duration-base ease-out-soft\",\n        \"hover:border-primary/40\",\n        className,\n      )}\n      {...(props as HTMLAttributes<HTMLDivElement>)}\n    >\n      <header className=\"flex items-start justify-between gap-3\">\n        <div className=\"min-w-0\">\n          <p className=\"flex items-center gap-2 font-mono text-label-caps text-muted-foreground uppercase\">\n            <GitPullRequest className=\"size-3\" /> PR #{env.prNumber}\n          </p>\n          <h3 className=\"mt-1 truncate font-display text-title-md tracking-tight\">{env.prTitle}</h3>\n          <p className=\"mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-body-sm text-muted-foreground\">\n            <span className=\"font-mono text-code-sm\">{env.branch}</span>\n            {env.author ? (\n              <>\n                <span aria-hidden=\"true\">·</span>\n                <span>by {env.author.name}</span>\n              </>\n            ) : null}\n            <span aria-hidden=\"true\">·</span>\n            <span>opened {env.createdAt}</span>\n          </p>\n        </div>\n        <Badge variant=\"primary\">\n          <Server className=\"size-3\" /> {env.services.length} service\n          {env.services.length === 1 ? \"\" : \"s\"}\n        </Badge>\n      </header>\n\n      <ul className=\"mt-4 divide-y divide-border/30 rounded-lg border border-border/30\">\n        {env.services.map((s) => {\n          // T3.3 (SEC-003): defang dangerous URL protocols before rendering\n          // as <a href>. Consumers passing user-controlled URLs from API\n          // responses are protected from javascript:/vbscript:/data:text/html\n          // XSS payloads.\n          const sanitized = safeHref(s.url);\n          return (\n            <li key={s.name} className=\"flex items-center justify-between gap-3 px-3 py-2\">\n              <span className=\"font-mono text-code-sm text-foreground\">{s.name}</span>\n              <div className=\"flex items-center gap-2\">\n                {sanitized ? (\n                  <a\n                    href={sanitized}\n                    className=\"inline-flex items-center gap-1 font-mono text-code-sm text-primary hover:underline\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                  >\n                    {sanitized.replace(/^https?:\\/\\//, \"\")}\n                    <ExternalLink className=\"size-3\" />\n                  </a>\n                ) : (\n                  <span className=\"font-mono text-code-sm text-muted-foreground\">internal</span>\n                )}\n                <Badge variant={statusToVariant[s.status]}>\n                  <Badge.Dot\n                    tone={statusToDot[s.status]}\n                    pulse={\n                      s.status === \"building\" || s.status === \"deploying\" || s.status === \"queued\"\n                    }\n                  />\n                  {statusLabels[s.status]}\n                </Badge>\n              </div>\n            </li>\n          );\n        })}\n      </ul>\n\n      {actions ? <div className=\"mt-4 flex items-center gap-2\">{actions}</div> : null}\n    </article>\n  ),\n);\nPreviewEnvCard.displayName = \"PreviewEnvCard\";\n\nexport { PreviewEnvCard };\n"
+      "content": "import { ExternalLink, GitPullRequest, Server } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { safeHref } from \"@/lib/safe-href\";\nimport { Badge } from \"@/components/ui/badge\";\nimport type { DeploymentStatus } from \"@/components/blocks/deployment-row\";\n\nconst statusToVariant: Record<\n  DeploymentStatus,\n  \"default\" | \"primary\" | \"success\" | \"warning\" | \"destructive\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"default\",\n};\nconst statusToDot: Record<\n  DeploymentStatus,\n  \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"muted\",\n};\nconst statusLabels: Record<DeploymentStatus, string> = {\n  queued: \"Queued\",\n  building: \"Building\",\n  deploying: \"Deploying\",\n  live: \"Live\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nexport interface PreviewService {\n  /** Service name e.g. \"api\", \"web\", \"worker\". */\n  name: string;\n  /** Live URL or null if not exposed (worker). */\n  url?: string;\n  status: DeploymentStatus;\n}\n\nexport interface PreviewEnv {\n  id: string;\n  prNumber: number;\n  prTitle: string;\n  branch: string;\n  author?: { name: string; avatarUrl?: string };\n  services: PreviewService[];\n  createdAt: string;\n}\n\ninterface PreviewEnvCardProps extends HTMLAttributes<HTMLDivElement> {\n  env: PreviewEnv;\n  actions?: ReactNode;\n}\n\n/**\n * PreviewEnvCard — preview environment card surfacing all services from one PR.\n *\n * Theo's killer feature: full-stack preview environments. The card shows:\n *   - PR number + title at the top\n *   - branch + author in the metadata row\n *   - one badge per service with its own status + URL\n *   - bottom action row (Open, Promote, Delete)\n */\nconst PreviewEnvCard = forwardRef<HTMLDivElement, PreviewEnvCardProps>(\n  ({ className, env, actions, ...props }, ref) => (\n    <article\n      data-slot=\"preview-env-card\"\n      ref={ref}\n      className={cn(\n        \"rounded-xl border bg-card p-5 shadow-sm\",\n        \"transition-[border-color,box-shadow] duration-base ease-out-soft\",\n        \"hover:border-primary/40\",\n        className,\n      )}\n      {...(props as HTMLAttributes<HTMLDivElement>)}\n    >\n      <header className=\"flex items-start justify-between gap-3\">\n        <div className=\"min-w-0\">\n          <p className=\"flex items-center gap-2 font-mono text-label-caps text-muted-foreground uppercase\">\n            <GitPullRequest className=\"size-3\" /> PR #{env.prNumber}\n          </p>\n          <h3 className=\"mt-1 truncate font-display text-title-md tracking-tight\">{env.prTitle}</h3>\n          <p className=\"mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-body-sm text-muted-foreground\">\n            <span className=\"font-mono text-code-sm\">{env.branch}</span>\n            {env.author ? (\n              <>\n                <span aria-hidden=\"true\">·</span>\n                <span>by {env.author.name}</span>\n              </>\n            ) : null}\n            <span aria-hidden=\"true\">·</span>\n            <span>opened {env.createdAt}</span>\n          </p>\n        </div>\n        <Badge variant=\"primary\">\n          <Server className=\"size-3\" /> {env.services.length} service\n          {env.services.length === 1 ? \"\" : \"s\"}\n        </Badge>\n      </header>\n\n      <ul className=\"mt-4 divide-y divide-border/30 rounded-lg border border-border/30\">\n        {env.services.map((s) => {\n          // T3.3 (SEC-003): defang dangerous URL protocols before rendering\n          // as <a href>. Consumers passing user-controlled URLs from API\n          // responses are protected from javascript:/vbscript:/data:text/html\n          // XSS payloads.\n          const sanitized = safeHref(s.url);\n          return (\n            <li key={s.name} className=\"flex items-center justify-between gap-3 px-3 py-2\">\n              <span className=\"font-mono text-code-sm text-foreground\">{s.name}</span>\n              <div className=\"flex items-center gap-2\">\n                {sanitized ? (\n                  <a\n                    href={sanitized}\n                    className=\"inline-flex items-center gap-1 font-mono text-code-sm text-primary hover:underline\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                  >\n                    {sanitized.replace(/^https?:\\/\\//, \"\")}\n                    <ExternalLink className=\"size-3\" />\n                  </a>\n                ) : (\n                  <span className=\"font-mono text-code-sm text-muted-foreground\">internal</span>\n                )}\n                <Badge variant={statusToVariant[s.status]}>\n                  <Badge.Dot\n                    tone={statusToDot[s.status]}\n                    pulse={\n                      s.status === \"building\" || s.status === \"deploying\" || s.status === \"queued\"\n                    }\n                  />\n                  {statusLabels[s.status]}\n                </Badge>\n              </div>\n            </li>\n          );\n        })}\n      </ul>\n\n      {actions ? <div className=\"mt-4 flex items-center gap-2\">{actions}</div> : null}\n    </article>\n  ),\n);\nPreviewEnvCard.displayName = \"PreviewEnvCard\";\n\nexport { PreviewEnvCard };\n"
     }
   ]
 }

package/registry/r/preview-panel.json

@@ -15,7 +15,7 @@
       "path": "components/composites/preview-panel/preview-panel.tsx",
       "type": "registry:ui",
       "target": "components/ui/preview-panel.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { BrowserControls } from \"@/components/ui/browser-controls\";\n\ninterface PreviewPanelProps extends Omit<HTMLAttributes<HTMLElement>, \"content\"> {\n  url: string;\n  onUrlChange?: (next: string) => void;\n  onBack?: () => void;\n  onForward?: () => void;\n  onReload?: () => void;\n  /**\n   * Region rendered as the preview body. Typically an <iframe>.\n   */\n  content: ReactNode;\n  /**\n   * Optional logs section rendered below the preview (e.g. dev server output).\n   */\n  logsSlot?: ReactNode;\n}\n\n/**\n * PreviewPanel — browser preview with controls + integrated logs slot.\n *\n * The Code workspace shows live dev-server URL + HMR logs side-by-side; this\n * panel keeps both in a single card so the user doesn't switch contexts.\n */\nconst PreviewPanel = forwardRef<HTMLElement, PreviewPanelProps>(\n  (\n    { className, url, onUrlChange, onBack, onForward, onReload, content, logsSlot, ...props },\n    ref,\n  ) => (\n    <section\n      ref={ref}\n      className={cn(\"flex h-full flex-col overflow-hidden rounded-xl border bg-card\", className)}\n      {...props}\n    >\n      <BrowserControls\n        url={url}\n        {...(onUrlChange ? { onUrlChange } : {})}\n        {...(onBack ? { onBack } : {})}\n        {...(onForward ? { onForward } : {})}\n        {...(onReload ? { onReload } : {})}\n      />\n      <div className=\"flex-1 overflow-hidden bg-background\">{content}</div>\n      {logsSlot ? (\n        <div className=\"max-h-48 overflow-auto border-border/40 border-t bg-card\">{logsSlot}</div>\n      ) : null}\n    </section>\n  ),\n);\nPreviewPanel.displayName = \"PreviewPanel\";\n\nexport { PreviewPanel };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { BrowserControls } from \"@/components/ui/browser-controls\";\n\ninterface PreviewPanelProps extends Omit<HTMLAttributes<HTMLElement>, \"content\"> {\n  url: string;\n  onUrlChange?: (next: string) => void;\n  onBack?: () => void;\n  onForward?: () => void;\n  onReload?: () => void;\n  /**\n   * Region rendered as the preview body. Typically an <iframe>.\n   */\n  content: ReactNode;\n  /**\n   * Optional logs section rendered below the preview (e.g. dev server output).\n   */\n  logsSlot?: ReactNode;\n}\n\n/**\n * PreviewPanel — browser preview with controls + integrated logs slot.\n *\n * The Code workspace shows live dev-server URL + HMR logs side-by-side; this\n * panel keeps both in a single card so the user doesn't switch contexts.\n */\nconst PreviewPanel = forwardRef<HTMLElement, PreviewPanelProps>(\n  (\n    { className, url, onUrlChange, onBack, onForward, onReload, content, logsSlot, ...props },\n    ref,\n  ) => (\n    <section\n      data-slot=\"preview-panel\"\n      ref={ref}\n      className={cn(\"flex h-full flex-col overflow-hidden rounded-xl border bg-card\", className)}\n      {...props}\n    >\n      <BrowserControls\n        url={url}\n        {...(onUrlChange ? { onUrlChange } : {})}\n        {...(onBack ? { onBack } : {})}\n        {...(onForward ? { onForward } : {})}\n        {...(onReload ? { onReload } : {})}\n      />\n      <div className=\"flex-1 overflow-hidden bg-background\">{content}</div>\n      {logsSlot ? (\n        <div className=\"max-h-48 overflow-auto border-border/40 border-t bg-card\">{logsSlot}</div>\n      ) : null}\n    </section>\n  ),\n);\nPreviewPanel.displayName = \"PreviewPanel\";\n\nexport { PreviewPanel };\n"
     }
   ]
 }

package/registry/r/progress-checklist.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/progress-checklist/progress-checklist.tsx",
       "type": "registry:ui",
       "target": "components/ui/progress-checklist.tsx",
-      "content": "import { Check, CircleDashed, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { TaskStep, TaskStepStatus } from \"@/types/task\";\n\nconst statusIcon = {\n  pending: CircleDashed,\n  running: Loader2,\n  done: Check,\n  skipped: CircleDashed,\n} as const;\n\nconst statusToneText: Record<TaskStepStatus, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-primary\",\n  done: \"text-success line-through\",\n  skipped: \"text-muted-foreground line-through\",\n};\n\nconst statusBg: Record<TaskStepStatus, string> = {\n  pending: \"bg-muted text-muted-foreground\",\n  running: \"bg-primary text-primary-foreground\",\n  done: \"bg-success text-success-foreground\",\n  skipped: \"bg-muted text-muted-foreground\",\n};\n\ninterface ProgressChecklistProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  steps: TaskStep[];\n  /**\n   * If true, shows percentage bar for running steps with `progress`.\n   */\n  showProgressBars?: boolean;\n}\n\n/**\n * ProgressChecklist — right-inspector checklist.\n *\n * Visual: vertical list of steps with status dot, label, optional progress bar.\n * Matches WIREMOCKS §3 / §4 (\"Progresso\") with checkmarks and pulse on running.\n */\nconst ProgressChecklist = forwardRef<HTMLDivElement, ProgressChecklistProps>(\n  ({ className, title, steps, showProgressBars = true, ...props }, ref) => (\n    <section ref={ref} className={cn(\"rounded-xl border bg-card p-4\", className)} {...props}>\n      {title ? (\n        <header className=\"mb-3 flex items-center justify-between\">\n          <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n        </header>\n      ) : null}\n      <ol className=\"grid gap-3\">\n        {steps.map((step) => {\n          const Icon = statusIcon[step.status];\n          return (\n            <li key={step.id} className=\"grid grid-cols-[auto_1fr] items-start gap-3\">\n              <span\n                className={cn(\n                  \"mt-0.5 grid size-5 place-items-center rounded-full\",\n                  statusBg[step.status],\n                )}\n                aria-hidden=\"true\"\n              >\n                <Icon className={cn(\"size-3\", step.status === \"running\" && \"animate-spin\")} />\n              </span>\n              <div className=\"min-w-0\">\n                <p className={cn(\"text-body-sm\", statusToneText[step.status])}>{step.label}</p>\n                {showProgressBars && step.status === \"running\" && step.progress !== undefined ? (\n                  <div className=\"mt-1.5 h-1 w-full overflow-hidden rounded-full bg-muted\">\n                    <div\n                      className=\"h-full bg-primary transition-[width] duration-base ease-out-soft\"\n                      style={{ width: `${Math.round(step.progress * 100)}%` }}\n                    />\n                  </div>\n                ) : null}\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n    </section>\n  ),\n);\nProgressChecklist.displayName = \"ProgressChecklist\";\n\nexport { ProgressChecklist };\n"
+      "content": "import { Check, CircleDashed, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { TaskStep, TaskStepStatus } from \"@/types/task\";\n\nconst statusIcon = {\n  pending: CircleDashed,\n  running: Loader2,\n  done: Check,\n  skipped: CircleDashed,\n} as const;\n\nconst statusToneText: Record<TaskStepStatus, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-primary\",\n  done: \"text-success line-through\",\n  skipped: \"text-muted-foreground line-through\",\n};\n\nconst statusBg: Record<TaskStepStatus, string> = {\n  pending: \"bg-muted text-muted-foreground\",\n  running: \"bg-primary text-primary-foreground\",\n  done: \"bg-success text-success-foreground\",\n  skipped: \"bg-muted text-muted-foreground\",\n};\n\ninterface ProgressChecklistProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  steps: TaskStep[];\n  /**\n   * If true, shows percentage bar for running steps with `progress`.\n   */\n  showProgressBars?: boolean;\n}\n\n/**\n * ProgressChecklist — right-inspector checklist.\n *\n * Visual: vertical list of steps with status dot, label, optional progress bar.\n * Matches WIREMOCKS §3 / §4 (\"Progresso\") with checkmarks and pulse on running.\n */\nconst ProgressChecklist = forwardRef<HTMLDivElement, ProgressChecklistProps>(\n  ({ className, title, steps, showProgressBars = true, ...props }, ref) => (\n    <section\n      data-slot=\"progress-checklist\"\n      ref={ref}\n      className={cn(\"rounded-xl border bg-card p-4\", className)}\n      {...props}\n    >\n      {title ? (\n        <header className=\"mb-3 flex items-center justify-between\">\n          <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n        </header>\n      ) : null}\n      <ol className=\"grid gap-3\">\n        {steps.map((step) => {\n          const Icon = statusIcon[step.status];\n          return (\n            <li key={step.id} className=\"grid grid-cols-[auto_1fr] items-start gap-3\">\n              <span\n                className={cn(\n                  \"mt-0.5 grid size-5 place-items-center rounded-full\",\n                  statusBg[step.status],\n                )}\n                aria-hidden=\"true\"\n              >\n                <Icon className={cn(\"size-3\", step.status === \"running\" && \"animate-spin\")} />\n              </span>\n              <div className=\"min-w-0\">\n                <p className={cn(\"text-body-sm\", statusToneText[step.status])}>{step.label}</p>\n                {showProgressBars && step.status === \"running\" && step.progress !== undefined ? (\n                  <div className=\"mt-1.5 h-1 w-full overflow-hidden rounded-full bg-muted\">\n                    <div\n                      className=\"h-full bg-primary transition-[width] duration-base ease-out-soft\"\n                      style={{ width: `${Math.round(step.progress * 100)}%` }}\n                    />\n                  </div>\n                ) : null}\n              </div>\n            </li>\n          );\n        })}\n      </ol>\n    </section>\n  ),\n);\nProgressChecklist.displayName = \"ProgressChecklist\";\n\nexport { ProgressChecklist };\n"
     }
   ]
 }

package/registry/r/progress.json

@@ -14,7 +14,7 @@
       "path": "components/primitives/progress/progress.tsx",
       "type": "registry:ui",
       "target": "components/ui/progress.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Progress — accessible progress bar primitive.\n *\n * Built on `<div role=\"progressbar\">` (NOT native `<progress>`) so Tailwind\n * classes can style the track + fill cross-browser (Chrome/Safari/Firefox\n * shadow-DOM hooks for `<progress>` diverge). Matches Radix / shadcn /\n * Mantine convention.\n *\n * Variants:\n *   - intent: `default` | `success` | `warning` | `destructive` — controls fill color\n *   - height: `h-1` (4px, default) | `h-1.5` | `h-2` | `h-3`\n *   - indeterminate: animated bar, no value (e.g. \"uploading…\", \"building…\")\n *\n * Composition:\n *   <Progress value={42} max={100} intent=\"success\" aria-label=\"Upload\" />\n *   <Progress indeterminate aria-label=\"Building\" />\n *\n * A11y:\n *   - role=\"progressbar\"\n *   - aria-valuenow / aria-valuemin / aria-valuemax (determinate)\n *   - aria-busy=\"true\" when indeterminate\n *   - Respects `prefers-reduced-motion` (no animation when set)\n *\n * Used by `<UsageMeter>` to render each metric's fill bar, but ships as a\n * standalone primitive for direct consumer use (deploy phase, file upload,\n * build progress, quota fill).\n */\n\nexport interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /** Current value (0..max). Values outside the range are clamped. */\n  value?: number;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Visual intent — controls fill color. */\n  intent?: \"default\" | \"success\" | \"warning\" | \"destructive\";\n  /** Bar height in tailwind units. Defaults to `\"h-1\"` (4px). */\n  height?: \"h-1\" | \"h-1.5\" | \"h-2\" | \"h-3\";\n  /** When true, animated bar with no value. Omits `aria-valuenow`, adds `aria-busy`. */\n  indeterminate?: boolean;\n  /** Accessible label. Required if not preceded by an `aria-labelledby` element. */\n  \"aria-label\"?: string;\n}\n\nconst INTENT_FILL: Record<NonNullable<ProgressProps[\"intent\"]>, string> = {\n  default: \"bg-primary\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  destructive: \"bg-destructive\",\n};\n\nconst Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  (\n    {\n      className,\n      value = 0,\n      max = 100,\n      intent = \"default\",\n      height = \"h-1\",\n      indeterminate = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedMax = Math.max(0, max);\n    const clampedValue = Math.min(clampedMax, Math.max(0, value));\n    const percent = clampedMax > 0 ? (clampedValue / clampedMax) * 100 : 0;\n    const fillClass = INTENT_FILL[intent];\n\n    return (\n      // biome-ignore lint/a11y/useFocusableInteractive: WAI-ARIA `progressbar` is a status role (https://www.w3.org/TR/wai-aria-1.2/#progressbar) — NOT supposed to be focusable; screen readers announce updates without keyboard navigation.\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={clampedMax}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-busy={indeterminate ? true : undefined}\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-muted\", height, className)}\n        {...props}\n      >\n        {indeterminate ? (\n          <div\n            className={cn(\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[progress-indeterminate_1.4s_ease-in-out_infinite] motion-reduce:animate-none\",\n              \"motion-reduce:w-full motion-reduce:opacity-50\",\n              fillClass,\n            )}\n          />\n        ) : (\n          <div\n            className={cn(\n              \"h-full rounded-full transition-[width] duration-base ease-out-soft\",\n              \"motion-reduce:transition-none\",\n              fillClass,\n            )}\n            style={{ width: `${percent}%` }}\n          />\n        )}\n      </div>\n    );\n  },\n);\nProgress.displayName = \"Progress\";\n\nexport { Progress };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Progress — accessible progress bar primitive.\n *\n * Built on `<div role=\"progressbar\">` (NOT native `<progress>`) so Tailwind\n * classes can style the track + fill cross-browser (Chrome/Safari/Firefox\n * shadow-DOM hooks for `<progress>` diverge). Matches Radix / shadcn /\n * Mantine convention.\n *\n * Variants:\n *   - intent: `default` | `success` | `warning` | `destructive` — controls fill color\n *   - height: `h-1` (4px, default) | `h-1.5` | `h-2` | `h-3`\n *   - indeterminate: animated bar, no value (e.g. \"uploading…\", \"building…\")\n *\n * Composition:\n *   <Progress value={42} max={100} intent=\"success\" aria-label=\"Upload\" />\n *   <Progress indeterminate aria-label=\"Building\" />\n *\n * A11y:\n *   - role=\"progressbar\"\n *   - aria-valuenow / aria-valuemin / aria-valuemax (determinate)\n *   - aria-busy=\"true\" when indeterminate\n *   - Respects `prefers-reduced-motion` (no animation when set)\n *\n * Used by `<UsageMeter>` to render each metric's fill bar, but ships as a\n * standalone primitive for direct consumer use (deploy phase, file upload,\n * build progress, quota fill).\n */\n\nexport interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, \"role\"> {\n  /** Current value (0..max). Values outside the range are clamped. */\n  value?: number;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Visual intent — controls fill color. */\n  intent?: \"default\" | \"success\" | \"warning\" | \"destructive\";\n  /** Bar height in tailwind units. Defaults to `\"h-1\"` (4px). */\n  height?: \"h-1\" | \"h-1.5\" | \"h-2\" | \"h-3\";\n  /** When true, animated bar with no value. Omits `aria-valuenow`, adds `aria-busy`. */\n  indeterminate?: boolean;\n  /** Accessible label. Required if not preceded by an `aria-labelledby` element. */\n  \"aria-label\"?: string;\n}\n\nconst INTENT_FILL: Record<NonNullable<ProgressProps[\"intent\"]>, string> = {\n  default: \"bg-primary\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  destructive: \"bg-destructive\",\n};\n\nconst Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  (\n    {\n      className,\n      value = 0,\n      max = 100,\n      intent = \"default\",\n      height = \"h-1\",\n      indeterminate = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedMax = Math.max(0, max);\n    const clampedValue = Math.min(clampedMax, Math.max(0, value));\n    const percent = clampedMax > 0 ? (clampedValue / clampedMax) * 100 : 0;\n    const fillClass = INTENT_FILL[intent];\n\n    return (\n      // biome-ignore lint/a11y/useFocusableInteractive: WAI-ARIA `progressbar` is a status role (https://www.w3.org/TR/wai-aria-1.2/#progressbar) — NOT supposed to be focusable; screen readers announce updates without keyboard navigation.\n      <div\n        data-slot=\"progress\"\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={clampedMax}\n        aria-valuenow={indeterminate ? undefined : clampedValue}\n        aria-busy={indeterminate ? true : undefined}\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-muted\", height, className)}\n        {...props}\n      >\n        {indeterminate ? (\n          <div\n            className={cn(\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[progress-indeterminate_1.4s_ease-in-out_infinite] motion-reduce:animate-none\",\n              \"motion-reduce:w-full motion-reduce:opacity-50\",\n              fillClass,\n            )}\n          />\n        ) : (\n          <div\n            className={cn(\n              \"h-full rounded-full transition-[width] duration-base ease-out-soft\",\n              \"motion-reduce:transition-none\",\n              fillClass,\n            )}\n            style={{ width: `${percent}%` }}\n          />\n        )}\n      </div>\n    );\n  },\n);\nProgress.displayName = \"Progress\";\n\nexport { Progress };\n"
     }
   ]
 }

package/registry/r/project-card.json

@@ -19,7 +19,7 @@
       "path": "components/composites/project-card/project-card.tsx",
       "type": "registry:block",
       "target": "components/blocks/project-card.tsx",
-      "content": "import { Activity, GitBranch, GitCommit } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { safeHref } from \"@/lib/safe-href\";\nimport { Badge } from \"@/components/ui/badge\";\nimport type { DeploymentStatus } from \"@/components/blocks/deployment-row\";\n\nconst statusToVariant: Record<\n  DeploymentStatus,\n  \"default\" | \"primary\" | \"success\" | \"warning\" | \"destructive\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"default\",\n};\nconst statusToDotTone: Record<\n  DeploymentStatus,\n  \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"muted\",\n};\n\nexport interface Project {\n  id: string;\n  name: string;\n  description?: string;\n  framework?: string;\n  branch: string;\n  commitSha: string;\n  commitMessage?: string;\n  status: DeploymentStatus;\n  url?: string;\n  region?: string;\n  lastDeployedAt: string;\n}\n\ninterface ProjectCardProps extends HTMLAttributes<HTMLAnchorElement | HTMLDivElement> {\n  project: Project;\n  href?: string;\n  actions?: ReactNode;\n  /**\n   * Show the project description and commit message. Default true.\n   */\n  detailed?: boolean;\n}\n\n/**\n * ProjectCard — surface for a project in a project listing.\n *\n * Light hover lift (no shadow inflation), violet ring on focus,\n * status badge with optional pulse, framework + region in muted footer.\n */\nconst ProjectCard = forwardRef<HTMLElement, ProjectCardProps>(\n  ({ className, project, href, actions, detailed = true, ...props }, ref) => {\n    // T3.3 (SEC-003): defang javascript:/vbscript:/data:text/html before\n    // rendering as <a href>. Consumers passing user-controlled URLs are\n    // protected from XSS via dangerous protocols.\n    const sanitizedHref = safeHref(href);\n    const isLink = sanitizedHref !== undefined;\n    const Tag = isLink ? \"a\" : \"div\";\n    const isAnimated =\n      project.status === \"building\" ||\n      project.status === \"deploying\" ||\n      project.status === \"queued\";\n\n    const content = (\n      <>\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h3 className=\"truncate font-display text-title-md tracking-tight\">{project.name}</h3>\n            {project.framework ? (\n              <p className=\"mt-0.5 font-mono text-label-caps text-muted-foreground uppercase\">\n                {project.framework}\n              </p>\n            ) : null}\n          </div>\n          <Badge variant={statusToVariant[project.status]}>\n            <Badge.Dot tone={statusToDotTone[project.status]} pulse={isAnimated} />\n            {project.status === \"live\"\n              ? \"Live\"\n              : project.status === \"building\"\n                ? \"Building\"\n                : project.status === \"deploying\"\n                  ? \"Deploying\"\n                  : project.status === \"queued\"\n                    ? \"Queued\"\n                    : project.status === \"failed\"\n                      ? \"Failed\"\n                      : \"Cancelled\"}\n          </Badge>\n        </div>\n\n        {detailed && project.description ? (\n          <p className=\"line-clamp-2 text-body-sm text-muted-foreground\">{project.description}</p>\n        ) : null}\n\n        {detailed && project.commitMessage ? (\n          <p className=\"line-clamp-1 font-mono text-code-sm text-foreground/80\">\n            {project.commitMessage}\n          </p>\n        ) : null}\n\n        <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-code-sm text-muted-foreground\">\n          <span className=\"inline-flex items-center gap-1\">\n            <GitBranch className=\"size-3\" /> {project.branch}\n          </span>\n          <span className=\"inline-flex items-center gap-1\">\n            <GitCommit className=\"size-3\" /> {project.commitSha.slice(0, 7)}\n          </span>\n          {project.region ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Activity className=\"size-3\" /> {project.region}\n            </span>\n          ) : null}\n          <span aria-hidden=\"true\">·</span>\n          <span>{project.lastDeployedAt}</span>\n        </div>\n\n        {actions ? <div className=\"flex items-center gap-2 pt-2\">{actions}</div> : null}\n      </>\n    );\n\n    return (\n      <Tag\n        ref={ref as Ref<HTMLAnchorElement & HTMLDivElement>}\n        href={sanitizedHref}\n        className={cn(\n          \"group relative flex flex-col gap-3 rounded-xl border bg-card p-5 shadow-sm\",\n          \"transition-[box-shadow,transform,border-color] duration-base ease-out-soft\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          isLink && \"hover:-translate-y-px cursor-pointer hover:border-primary/50 hover:shadow-md\",\n          className,\n        )}\n        {...(props as HTMLAttributes<HTMLAnchorElement> & HTMLAttributes<HTMLDivElement>)}\n      >\n        {content}\n      </Tag>\n    );\n  },\n);\nProjectCard.displayName = \"ProjectCard\";\n\nexport { ProjectCard };\n"
+      "content": "import { Activity, GitBranch, GitCommit } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { safeHref } from \"@/lib/safe-href\";\nimport { Badge } from \"@/components/ui/badge\";\nimport type { DeploymentStatus } from \"@/components/blocks/deployment-row\";\n\nconst statusToVariant: Record<\n  DeploymentStatus,\n  \"default\" | \"primary\" | \"success\" | \"warning\" | \"destructive\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"default\",\n};\nconst statusToDotTone: Record<\n  DeploymentStatus,\n  \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"muted\",\n};\n\nexport interface Project {\n  id: string;\n  name: string;\n  description?: string;\n  framework?: string;\n  branch: string;\n  commitSha: string;\n  commitMessage?: string;\n  status: DeploymentStatus;\n  url?: string;\n  region?: string;\n  lastDeployedAt: string;\n}\n\ninterface ProjectCardProps extends HTMLAttributes<HTMLAnchorElement | HTMLDivElement> {\n  project: Project;\n  href?: string;\n  actions?: ReactNode;\n  /**\n   * Show the project description and commit message. Default true.\n   */\n  detailed?: boolean;\n}\n\n/**\n * ProjectCard — surface for a project in a project listing.\n *\n * Light hover lift (no shadow inflation), violet ring on focus,\n * status badge with optional pulse, framework + region in muted footer.\n */\nconst ProjectCard = forwardRef<HTMLElement, ProjectCardProps>(\n  ({ className, project, href, actions, detailed = true, ...props }, ref) => {\n    // T3.3 (SEC-003): defang javascript:/vbscript:/data:text/html before\n    // rendering as <a href>. Consumers passing user-controlled URLs are\n    // protected from XSS via dangerous protocols.\n    const sanitizedHref = safeHref(href);\n    const isLink = sanitizedHref !== undefined;\n    const Tag = isLink ? \"a\" : \"div\";\n    const isAnimated =\n      project.status === \"building\" ||\n      project.status === \"deploying\" ||\n      project.status === \"queued\";\n\n    const content = (\n      <>\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h3 className=\"truncate font-display text-title-md tracking-tight\">{project.name}</h3>\n            {project.framework ? (\n              <p className=\"mt-0.5 font-mono text-label-caps text-muted-foreground uppercase\">\n                {project.framework}\n              </p>\n            ) : null}\n          </div>\n          <Badge variant={statusToVariant[project.status]}>\n            <Badge.Dot tone={statusToDotTone[project.status]} pulse={isAnimated} />\n            {project.status === \"live\"\n              ? \"Live\"\n              : project.status === \"building\"\n                ? \"Building\"\n                : project.status === \"deploying\"\n                  ? \"Deploying\"\n                  : project.status === \"queued\"\n                    ? \"Queued\"\n                    : project.status === \"failed\"\n                      ? \"Failed\"\n                      : \"Cancelled\"}\n          </Badge>\n        </div>\n\n        {detailed && project.description ? (\n          <p className=\"line-clamp-2 text-body-sm text-muted-foreground\">{project.description}</p>\n        ) : null}\n\n        {detailed && project.commitMessage ? (\n          <p className=\"line-clamp-1 font-mono text-code-sm text-foreground/80\">\n            {project.commitMessage}\n          </p>\n        ) : null}\n\n        <div className=\"flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-code-sm text-muted-foreground\">\n          <span className=\"inline-flex items-center gap-1\">\n            <GitBranch className=\"size-3\" /> {project.branch}\n          </span>\n          <span className=\"inline-flex items-center gap-1\">\n            <GitCommit className=\"size-3\" /> {project.commitSha.slice(0, 7)}\n          </span>\n          {project.region ? (\n            <span className=\"inline-flex items-center gap-1\">\n              <Activity className=\"size-3\" /> {project.region}\n            </span>\n          ) : null}\n          <span aria-hidden=\"true\">·</span>\n          <span>{project.lastDeployedAt}</span>\n        </div>\n\n        {actions ? <div className=\"flex items-center gap-2 pt-2\">{actions}</div> : null}\n      </>\n    );\n\n    return (\n      <Tag\n        data-slot=\"project-card\"\n        ref={ref as Ref<HTMLAnchorElement & HTMLDivElement>}\n        href={sanitizedHref}\n        className={cn(\n          \"group relative flex flex-col gap-3 rounded-xl border bg-card p-5 shadow-sm\",\n          \"transition-[box-shadow,transform,border-color] duration-base ease-out-soft\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n          isLink && \"hover:-translate-y-px cursor-pointer hover:border-primary/50 hover:shadow-md\",\n          className,\n        )}\n        {...(props as HTMLAttributes<HTMLAnchorElement> & HTMLAttributes<HTMLDivElement>)}\n      >\n        {content}\n      </Tag>\n    );\n  },\n);\nProjectCard.displayName = \"ProjectCard\";\n\nexport { ProjectCard };\n"
     }
   ]
 }

package/registry/r/project-switcher.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/project-switcher/project-switcher.tsx",
       "type": "registry:ui",
       "target": "components/ui/project-switcher.tsx",
-      "content": "import { ChevronsUpDown, GitBranch } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * ProjectSwitcher — sidebar header for a code agent app.\n *\n * Shows the active workspace (folder name) + branch + status dot + a tiny\n * `ChevronsUpDown` hint when clickable. Used in Sidebar.Header to anchor the\n * current project context for the session list below.\n *\n *   <Sidebar.Header className=\"p-0\">\n *     <ProjectSwitcher\n *       workspace=\"acme-web\"\n *       branch=\"claude/alignment-grid\"\n *       status=\"running\"\n *       onClick={openProjectPicker}\n *     />\n *   </Sidebar.Header>\n *\n * If `onClick` is omitted, renders as a static `<div>` (no chevron, not focusable).\n */\n\nexport type ProjectStatus = \"idle\" | \"running\" | \"error\" | \"offline\";\n\nconst STATUS_CLASS: Record<ProjectStatus, string> = {\n  idle: \"bg-muted-foreground/40\",\n  running: \"bg-success animate-pulse\",\n  error: \"bg-destructive\",\n  offline: \"bg-muted-foreground/20\",\n};\n\nconst STATUS_LABEL: Record<ProjectStatus, string> = {\n  idle: \"Idle\",\n  running: \"Agent running\",\n  error: \"Error\",\n  offline: \"Offline\",\n};\n\ninterface ProjectSwitcherProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\"> {\n  /** Workspace / folder name (e.g. \"acme-web\"). */\n  workspace: ReactNode;\n  /** Optional git branch. Renders inline with a GitBranch icon. */\n  branch?: ReactNode;\n  /** Optional status dot. Defaults to \"idle\". */\n  status?: ProjectStatus;\n  /** Brand letter / icon shown in the violet tile. Default: first char of workspace if string. */\n  brand?: ReactNode;\n}\n\nconst ProjectSwitcher = forwardRef<HTMLButtonElement, ProjectSwitcherProps>(\n  ({ className, workspace, branch, status = \"idle\", brand, onClick, disabled, ...props }, ref) => {\n    const isInteractive = !!onClick;\n    const inferredBrand =\n      brand ?? (typeof workspace === \"string\" ? workspace.charAt(0).toUpperCase() : \"·\");\n    const content = (\n      <>\n        <span\n          className=\"grid size-8 shrink-0 place-items-center rounded-lg bg-primary font-black font-display text-primary-foreground\"\n          aria-hidden=\"true\"\n        >\n          {inferredBrand}\n        </span>\n        <div className=\"grid min-w-0 flex-1 text-left\">\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <span className=\"truncate font-display text-title-md leading-none\">{workspace}</span>\n            <span\n              className={cn(\"size-1.5 shrink-0 rounded-full\", STATUS_CLASS[status])}\n              aria-label={STATUS_LABEL[status]}\n              role=\"img\"\n            />\n          </div>\n          {branch ? (\n            <span className=\"mt-1 inline-flex items-center gap-1 truncate font-mono text-label text-muted-foreground\">\n              <GitBranch className=\"size-3 shrink-0\" aria-hidden=\"true\" /> {branch}\n            </span>\n          ) : null}\n        </div>\n        {isInteractive ? (\n          <ChevronsUpDown className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n        ) : null}\n      </>\n    );\n\n    if (!isInteractive) {\n      return (\n        <div\n          className={cn(\"flex w-full items-center gap-3 px-5 py-3 text-card-foreground\", className)}\n          aria-disabled={disabled || undefined}\n        >\n          {content}\n        </div>\n      );\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        className={cn(\n          \"flex w-full items-center gap-3 px-5 py-3 text-card-foreground\",\n          \"transition-colors hover:bg-muted/40\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </button>\n    );\n  },\n);\nProjectSwitcher.displayName = \"ProjectSwitcher\";\n\nexport { ProjectSwitcher };\n"
+      "content": "import { ChevronsUpDown, GitBranch } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * ProjectSwitcher — sidebar header for a code agent app.\n *\n * Shows the active workspace (folder name) + branch + status dot + a tiny\n * `ChevronsUpDown` hint when clickable. Used in Sidebar.Header to anchor the\n * current project context for the session list below.\n *\n *   <Sidebar.Header className=\"p-0\">\n *     <ProjectSwitcher\n *       workspace=\"acme-web\"\n *       branch=\"claude/alignment-grid\"\n *       status=\"running\"\n *       onClick={openProjectPicker}\n *     />\n *   </Sidebar.Header>\n *\n * If `onClick` is omitted, renders as a static `<div>` (no chevron, not focusable).\n */\n\nexport type ProjectStatus = \"idle\" | \"running\" | \"error\" | \"offline\";\n\nconst STATUS_CLASS: Record<ProjectStatus, string> = {\n  idle: \"bg-muted-foreground/40\",\n  running: \"bg-success animate-pulse\",\n  error: \"bg-destructive\",\n  offline: \"bg-muted-foreground/20\",\n};\n\nconst STATUS_LABEL: Record<ProjectStatus, string> = {\n  idle: \"Idle\",\n  running: \"Agent running\",\n  error: \"Error\",\n  offline: \"Offline\",\n};\n\ninterface ProjectSwitcherProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"children\"> {\n  /** Workspace / folder name (e.g. \"acme-web\"). */\n  workspace: ReactNode;\n  /** Optional git branch. Renders inline with a GitBranch icon. */\n  branch?: ReactNode;\n  /** Optional status dot. Defaults to \"idle\". */\n  status?: ProjectStatus;\n  /** Brand letter / icon shown in the violet tile. Default: first char of workspace if string. */\n  brand?: ReactNode;\n}\n\nconst ProjectSwitcher = forwardRef<HTMLButtonElement, ProjectSwitcherProps>(\n  ({ className, workspace, branch, status = \"idle\", brand, onClick, disabled, ...props }, ref) => {\n    const isInteractive = !!onClick;\n    const inferredBrand =\n      brand ?? (typeof workspace === \"string\" ? workspace.charAt(0).toUpperCase() : \"·\");\n    const content = (\n      <>\n        <span\n          className=\"grid size-8 shrink-0 place-items-center rounded-lg bg-primary font-black font-display text-primary-foreground\"\n          aria-hidden=\"true\"\n        >\n          {inferredBrand}\n        </span>\n        <div className=\"grid min-w-0 flex-1 text-left\">\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <span className=\"truncate font-display text-title-md leading-none\">{workspace}</span>\n            <span\n              className={cn(\"size-1.5 shrink-0 rounded-full\", STATUS_CLASS[status])}\n              aria-label={STATUS_LABEL[status]}\n              role=\"img\"\n            />\n          </div>\n          {branch ? (\n            <span className=\"mt-1 inline-flex items-center gap-1 truncate font-mono text-label text-muted-foreground\">\n              <GitBranch className=\"size-3 shrink-0\" aria-hidden=\"true\" /> {branch}\n            </span>\n          ) : null}\n        </div>\n        {isInteractive ? (\n          <ChevronsUpDown className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n        ) : null}\n      </>\n    );\n\n    if (!isInteractive) {\n      return (\n        <div\n          className={cn(\"flex w-full items-center gap-3 px-5 py-3 text-card-foreground\", className)}\n          aria-disabled={disabled || undefined}\n        >\n          {content}\n        </div>\n      );\n    }\n\n    return (\n      <button\n        data-slot=\"project-switcher\"\n        ref={ref}\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        className={cn(\n          \"flex w-full items-center gap-3 px-5 py-3 text-card-foreground\",\n          \"transition-colors hover:bg-muted/40\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n        {...props}\n      >\n        {content}\n      </button>\n    );\n  },\n);\nProjectSwitcher.displayName = \"ProjectSwitcher\";\n\nexport { ProjectSwitcher };\n"
     }
   ]
 }