@usetheo/ui 0.1.0-next.0

package/registry/r/dialog.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "dialog",
+  "type": "registry:ui",
+  "title": "Dialog",
+  "description": "Modal overlay built on Radix Dialog.",
+  "dependencies": [
+    "@radix-ui/react-dialog",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/dialog/dialog.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/dialog.tsx",
+      "content": "import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Dialog — modal overlay built on Radix Dialog.\n *\n * Composition:\n *   <Dialog>\n *     <Dialog.Trigger>Open</Dialog.Trigger>\n *     <Dialog.Content>\n *       <Dialog.Header>\n *         <Dialog.Title>…</Dialog.Title>\n *         <Dialog.Description>…</Dialog.Description>\n *       </Dialog.Header>\n *       <Dialog.Body>…</Dialog.Body>\n *       <Dialog.Footer>…</Dialog.Footer>\n *     </Dialog.Content>\n *   </Dialog>\n *\n * Overlay is a theme-neutral backdrop (`bg-background/80`) with no glass blur\n * (anti-glass guideline). Content uses card surface, rounded-2xl, shadow-lg\n * + slight glow on enter.\n */\n\nconst Overlay = forwardRef<\n  ElementRef<typeof DialogPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    ref={ref}\n    className={cn(\n      \"fixed inset-0 z-50 bg-background/80\",\n      \"data-[state=open]:fade-in-0 data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=closed]:animate-out\",\n      className,\n    )}\n    {...props}\n  />\n));\nOverlay.displayName = \"Dialog.Overlay\";\n\ninterface ContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {\n  hideCloseButton?: boolean;\n}\n\nconst Content = forwardRef<ElementRef<typeof DialogPrimitive.Content>, ContentProps>(\n  ({ className, children, hideCloseButton, ...props }, ref) => (\n    <DialogPrimitive.Portal>\n      <Overlay />\n      <DialogPrimitive.Content\n        ref={ref}\n        className={cn(\n          \"-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 w-full max-w-lg\",\n          \"rounded-2xl border bg-card text-card-foreground shadow-lg\",\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          \"duration-base\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {!hideCloseButton ? (\n          <DialogPrimitive.Close\n            className={cn(\n              \"absolute top-4 right-4 rounded-md p-1 opacity-70\",\n              \"transition-opacity hover:opacity-100\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n              \"disabled:pointer-events-none\",\n            )}\n          >\n            <X className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        ) : null}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  ),\n);\nContent.displayName = \"Dialog.Content\";\n\nconst Header = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"flex flex-col gap-1.5 p-6 pb-3 text-left\", className)} {...props} />\n);\nHeader.displayName = \"Dialog.Header\";\n\nconst Body = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div className={cn(\"px-6 pb-6 text-body-md text-muted-foreground\", className)} {...props} />\n);\nBody.displayName = \"Dialog.Body\";\n\nconst Footer = ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => (\n  <div\n    className={cn(\"flex flex-col-reverse gap-2 p-6 pt-3 sm:flex-row sm:justify-end\", className)}\n    {...props}\n  />\n);\nFooter.displayName = \"Dialog.Footer\";\n\ntype TitleProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\nconst Title = forwardRef<ElementRef<typeof DialogPrimitive.Title>, TitleProps>(\n  ({ className, ...props }, ref) => (\n    <DialogPrimitive.Title\n      ref={ref}\n      className={cn(\"font-display text-foreground text-title-lg tracking-tight\", className)}\n      {...props}\n    />\n  ),\n);\nTitle.displayName = \"Dialog.Title\";\n\nconst Description = forwardRef<\n  ElementRef<typeof DialogPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    ref={ref}\n    className={cn(\"text-body-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nDescription.displayName = \"Dialog.Description\";\n\nconst Dialog = /*#__PURE__*/ Object.assign(DialogPrimitive.Root, {\n  Trigger: DialogPrimitive.Trigger,\n  Close: DialogPrimitive.Close,\n  Content,\n  Overlay,\n  Header,\n  Body,\n  Footer,\n  Title,\n  Description,\n});\n\nexport { Dialog };\n"
+    }
+  ]
+}

package/registry/r/diff-viewer.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "diff-viewer",
+  "type": "registry:ui",
+  "title": "DiffViewer",
+  "description": "Unified diff rendering, no external dep.",
+  "dependencies": [],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/diff-viewer/diff-viewer.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/diff-viewer.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type DiffLineKind = \"added\" | \"removed\" | \"unchanged\" | \"meta\";\n\nexport interface DiffLine {\n  kind: DiffLineKind;\n  /** Original line number (left side); undefined for added lines. */\n  oldNumber?: number;\n  /** New line number (right side); undefined for removed lines. */\n  newNumber?: number;\n  content: string;\n}\n\nexport interface DiffHunk {\n  id: string;\n  /**\n   * Optional header (e.g. \"@@ -42,7 +42,12 @@\"). Caller usually formats this.\n   */\n  header?: string;\n  lines: DiffLine[];\n  /**\n   * If true, the hunk is rendered as a collapsed \"N unmodified lines\" placeholder.\n   */\n  collapsed?: boolean;\n}\n\ninterface DiffViewerProps extends HTMLAttributes<HTMLDivElement> {\n  /** Path of the file being diffed. */\n  path: string;\n  /** Diff stats summary. */\n  stats?: { added: number; removed: number };\n  hunks: DiffHunk[];\n}\n\nconst lineBg: Record<DiffLineKind, string> = {\n  added: \"bg-success/10\",\n  removed: \"bg-destructive/10\",\n  unchanged: \"\",\n  meta: \"bg-muted/60 text-primary\",\n};\n\nconst sign: Record<DiffLineKind, string> = {\n  added: \"+\",\n  removed: \"-\",\n  unchanged: \" \",\n  meta: \"@\",\n};\n\n/**\n * DiffViewer — unified diff rendering, no external dep.\n *\n * Visual: two gutter columns (old/new line numbers) + sign + monospaced content.\n * Added/removed rows tinted in success/destructive. Collapsed hunks render as\n * a single muted row \"N unmodified lines\".\n *\n * For syntax highlighting, the consumer can render `content` via their own\n * highlighter and pass `unchanged` lines with already-highlighted strings (not\n * common; usually plain text is enough for the brutalist console aesthetic).\n */\nconst DiffViewer = forwardRef<HTMLDivElement, DiffViewerProps>(\n  ({ className, path, stats, hunks, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"overflow-hidden rounded-xl border bg-card font-mono\", className)}\n      {...props}\n    >\n      <header className=\"flex items-center justify-between gap-3 border-border/40 border-b bg-muted/30 px-3 py-2\">\n        <span className=\"truncate text-code-sm text-foreground\">{path}</span>\n        {stats ? (\n          <span className=\"font-mono text-code-sm\">\n            <span className=\"text-success\">+{stats.added}</span>{\" \"}\n            <span className=\"text-destructive\">-{stats.removed}</span>\n          </span>\n        ) : null}\n      </header>\n      <ol className=\"text-code-sm\">\n        {hunks.map((hunk) => (\n          <li key={hunk.id}>\n            {hunk.collapsed ? (\n              <div className=\"px-3 py-1 text-muted-foreground italic\">\n                {hunk.lines.length} unmodified lines\n              </div>\n            ) : (\n              <>\n                {hunk.header ? (\n                  <div className=\"bg-muted/60 px-3 py-1 text-primary\">{hunk.header}</div>\n                ) : null}\n                <table className=\"w-full border-collapse\" aria-label={`Diff hunk for ${path}`}>\n                  <tbody>\n                    {hunk.lines.map((line, idx) => (\n                      <tr key={`${hunk.id}-${idx}`} className={lineBg[line.kind]}>\n                        <td className=\"select-none px-2 text-right text-muted-foreground/60 tabular-nums\">\n                          {line.oldNumber ?? \"\"}\n                        </td>\n                        <td className=\"select-none px-2 text-right text-muted-foreground/60 tabular-nums\">\n                          {line.newNumber ?? \"\"}\n                        </td>\n                        <td\n                          className={cn(\n                            \"select-none pr-1 pl-2\",\n                            line.kind === \"added\" && \"text-success\",\n                            line.kind === \"removed\" && \"text-destructive\",\n                            line.kind === \"meta\" && \"text-primary\",\n                          )}\n                        >\n                          {sign[line.kind]}\n                        </td>\n                        <td\n                          className={cn(\n                            \"w-full whitespace-pre\",\n                            line.kind === \"added\" && \"text-success\",\n                            line.kind === \"removed\" && \"text-destructive\",\n                          )}\n                        >\n                          {line.content}\n                        </td>\n                      </tr>\n                    ))}\n                  </tbody>\n                </table>\n              </>\n            )}\n          </li>\n        ))}\n      </ol>\n    </div>\n  ),\n);\nDiffViewer.displayName = \"DiffViewer\";\n\nexport { DiffViewer };\n"
+    }
+  ]
+}

package/registry/r/domain-config.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "domain-config",
+  "type": "registry:block",
+  "title": "DomainConfig",
+  "description": "Manage custom domains for a project.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "badge",
+    "button",
+    "cn",
+    "input",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/domain-config/domain-config.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/domain-config.tsx",
+      "content": "import { Check, Globe, Plus, ShieldCheck, ShieldX, Trash2 } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\n\nexport type DomainStatus = \"verified\" | \"pending\" | \"invalid\";\n\nexport interface Domain {\n  id: string;\n  hostname: string;\n  status: DomainStatus;\n  primary?: boolean;\n  /**\n   * TLS state. If true, certificate is provisioned & valid.\n   */\n  tls?: boolean;\n  /**\n   * DNS record the user must add to verify ownership.\n   */\n  verificationRecord?: {\n    type: \"TXT\" | \"CNAME\" | \"A\";\n    name: string;\n    value: string;\n  };\n}\n\nconst statusVariant: Record<DomainStatus, \"success\" | \"warning\" | \"destructive\"> = {\n  verified: \"success\",\n  pending: \"warning\",\n  invalid: \"destructive\",\n};\nconst statusDot: Record<DomainStatus, \"success\" | \"warning\" | \"destructive\"> = {\n  verified: \"success\",\n  pending: \"warning\",\n  invalid: \"destructive\",\n};\nconst statusLabel: Record<DomainStatus, string> = {\n  verified: \"Verified\",\n  pending: \"Pending DNS\",\n  invalid: \"Invalid\",\n};\n\ninterface DomainConfigProps extends HTMLAttributes<HTMLDivElement> {\n  domains: Domain[];\n  onAdd?: (hostname: string) => void;\n  onRemove?: (id: string) => void;\n  onSetPrimary?: (id: string) => void;\n}\n\n/**\n * DomainConfig — manage custom domains for a project.\n *\n * Shows: hostname, status, TLS, primary flag, and verification DNS record when pending.\n * Common in every PaaS dashboard (Vercel, Railway, Render).\n */\nconst DomainConfig = forwardRef<HTMLDivElement, DomainConfigProps>(\n  ({ className, domains, onAdd, onRemove, onSetPrimary, ...props }, ref) => {\n    const [hostname, setHostname] = useState(\"\");\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"rounded-xl border bg-card p-5 shadow-sm\", className)}\n        {...props}\n      >\n        <header className=\"mb-4 flex items-baseline justify-between gap-3\">\n          <div>\n            <h3 className=\"font-display text-title-md tracking-tight\">Domains</h3>\n            <p className=\"text-body-sm text-muted-foreground\">{domains.length} configured</p>\n          </div>\n        </header>\n\n        {onAdd ? (\n          <form\n            className=\"mb-4 grid grid-cols-[1fr_auto] gap-2\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              const v = hostname.trim();\n              if (!v) return;\n              onAdd(v);\n              setHostname(\"\");\n            }}\n          >\n            <Input\n              placeholder=\"api.acme.com\"\n              value={hostname}\n              onChange={(e) => setHostname(e.target.value)}\n              aria-label=\"Hostname\"\n              className=\"font-mono\"\n            />\n            <Button type=\"submit\">\n              <Plus /> Add domain\n            </Button>\n          </form>\n        ) : null}\n\n        <ul className=\"grid gap-3\">\n          {domains.map((d) => (\n            <li key={d.id} className=\"grid gap-3 rounded-lg border border-border/40 p-4\">\n              <div className=\"flex flex-wrap items-center gap-3\">\n                <Globe className=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\n                <span className=\"font-mono text-code-md text-foreground\">{d.hostname}</span>\n                <Badge variant={statusVariant[d.status]}>\n                  <Badge.Dot tone={statusDot[d.status]} pulse={d.status === \"pending\"} />\n                  {statusLabel[d.status]}\n                </Badge>\n                {d.tls === true ? (\n                  <Badge variant=\"primary\">\n                    <ShieldCheck className=\"size-3\" /> TLS\n                  </Badge>\n                ) : d.tls === false ? (\n                  <Badge variant=\"destructive\">\n                    <ShieldX className=\"size-3\" /> No TLS\n                  </Badge>\n                ) : null}\n                {d.primary ? (\n                  <Badge variant=\"accent\">\n                    <Check className=\"size-3\" /> Primary\n                  </Badge>\n                ) : null}\n                <div className=\"ml-auto flex items-center gap-1\">\n                  {!d.primary && onSetPrimary ? (\n                    <Button size=\"sm\" variant=\"ghost\" onClick={() => onSetPrimary(d.id)}>\n                      Set primary\n                    </Button>\n                  ) : null}\n                  {onRemove ? (\n                    <Button\n                      size=\"icon\"\n                      variant=\"ghost\"\n                      onClick={() => onRemove(d.id)}\n                      aria-label={`Remove ${d.hostname}`}\n                    >\n                      <Trash2 />\n                    </Button>\n                  ) : null}\n                </div>\n              </div>\n              {d.status === \"pending\" && d.verificationRecord ? (\n                <div className=\"rounded-md border border-border/60 border-dashed bg-muted/30 p-3 font-mono text-code-sm\">\n                  <p className=\"mb-2 font-sans text-label-caps text-muted-foreground uppercase\">\n                    Add this DNS record to verify\n                  </p>\n                  <div className=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-1\">\n                    <span className=\"text-muted-foreground\">type</span>\n                    <span>{d.verificationRecord.type}</span>\n                    <span className=\"text-muted-foreground\">name</span>\n                    <span>{d.verificationRecord.name}</span>\n                    <span className=\"text-muted-foreground\">value</span>\n                    <span className=\"break-all\">{d.verificationRecord.value}</span>\n                  </div>\n                </div>\n              ) : null}\n            </li>\n          ))}\n          {domains.length === 0 ? (\n            <li className=\"rounded-lg border border-border/40 border-dashed p-8 text-center text-body-sm text-muted-foreground\">\n              No domains yet. Add one to route traffic to this project.\n            </li>\n          ) : null}\n        </ul>\n      </div>\n    );\n  },\n);\nDomainConfig.displayName = \"DomainConfig\";\n\nexport { DomainConfig };\n"
+    }
+  ]
+}

package/registry/r/empty-state.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "empty-state",
+  "type": "registry:ui",
+  "title": "EmptyState",
+  "description": "Visual placeholder for empty lists / first-run screens.",
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/empty-state/empty-state.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/empty-state.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\ninterface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Icon shown above the title. */\n  icon?: IconComponent;\n  title: ReactNode;\n  description?: ReactNode;\n  /** Optional action slot (typically <Button>). */\n  action?: ReactNode;\n  /** Hint shown above the title (e.g. uppercase eyebrow). */\n  eyebrow?: ReactNode;\n  /** Bordered dashed surface (placeholder vibe). Default true. */\n  dashed?: boolean;\n}\n\n/**\n * EmptyState — visual placeholder for empty lists / first-run screens.\n *\n * Composition: icon + eyebrow + title + description + action. All slots are\n * optional except title.\n */\nconst EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    { className, icon: Icon, title, description, action, eyebrow, dashed = true, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"grid place-items-center gap-3 rounded-2xl border bg-card px-6 py-12 text-center\",\n        dashed ? \"border-border/60 border-dashed\" : \"border-border/40\",\n        className,\n      )}\n      {...props}\n    >\n      {Icon ? (\n        <span className=\"grid size-12 place-items-center rounded-2xl bg-primary/10 text-primary\">\n          <Icon className=\"size-6\" aria-hidden=\"true\" />\n        </span>\n      ) : null}\n      {eyebrow ? (\n        <p className=\"font-mono text-label-caps text-muted-foreground uppercase\">{eyebrow}</p>\n      ) : null}\n      <h3 className=\"font-display text-foreground text-title-md\">{title}</h3>\n      {description ? (\n        <p className=\"max-w-md text-body-sm text-muted-foreground\">{description}</p>\n      ) : null}\n      {action ? <div className=\"mt-2\">{action}</div> : null}\n    </div>\n  ),\n);\nEmptyState.displayName = \"EmptyState\";\n\nexport { EmptyState };\n"
+    }
+  ]
+}

package/registry/r/env-var-editor.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "env-var-editor",
+  "type": "registry:block",
+  "title": "EnvVarEditor",
+  "description": "Table-like editor for environment variables.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "badge",
+    "button",
+    "cn",
+    "input",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/env-var-editor/env-var-editor.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/env-var-editor.tsx",
+      "content": "import { Copy, Eye, EyeOff, Lock, Plus, Trash2 } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\n\nexport type EnvScope = \"production\" | \"staging\" | \"preview\" | \"all\" | string;\n\nexport interface EnvVar {\n  id: string;\n  key: string;\n  /**\n   * Secret value. If `masked` is true, value is hidden by default.\n   */\n  value: string;\n  masked?: boolean;\n  scope?: EnvScope;\n  /**\n   * Read-only marker (e.g. system-managed vars like THEO_DEPLOY_ID).\n   */\n  readonly?: boolean;\n}\n\ninterface EnvVarEditorProps extends HTMLAttributes<HTMLDivElement> {\n  vars: EnvVar[];\n  onAdd?: (entry: Omit<EnvVar, \"id\">) => void;\n  onRemove?: (id: string) => void;\n  /**\n   * Available scope options for the add form. Defaults to a sensible PaaS set.\n   */\n  scopeOptions?: EnvScope[];\n}\n\nconst DEFAULT_SCOPES: EnvScope[] = [\"production\", \"staging\", \"preview\", \"all\"];\n\n/**\n * EnvVarEditor — table-like editor for environment variables.\n *\n * Mono font on keys/values, mask toggle on secret values, scope badge,\n * remove + copy actions. Add form sits above the list.\n *\n * Stateless: caller controls the list and reacts to onAdd / onRemove.\n */\nconst EnvVarEditor = forwardRef<HTMLDivElement, EnvVarEditorProps>(\n  ({ className, vars, onAdd, onRemove, scopeOptions = DEFAULT_SCOPES, ...props }, ref) => {\n    const [newKey, setNewKey] = useState(\"\");\n    const [newValue, setNewValue] = useState(\"\");\n    const [newScope, setNewScope] = useState<EnvScope>(scopeOptions[0] ?? \"production\");\n\n    const submit = () => {\n      const trimmedKey = newKey.trim();\n      if (!trimmedKey) return;\n      onAdd?.({ key: trimmedKey, value: newValue, scope: newScope, masked: true });\n      setNewKey(\"\");\n      setNewValue(\"\");\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"rounded-xl border bg-card p-5 shadow-sm\", className)}\n        {...props}\n      >\n        <header className=\"mb-4 flex items-baseline justify-between gap-3\">\n          <div>\n            <h3 className=\"font-display text-title-md tracking-tight\">Environment variables</h3>\n            <p className=\"text-body-sm text-muted-foreground\">\n              {vars.length} {vars.length === 1 ? \"variable\" : \"variables\"}\n            </p>\n          </div>\n        </header>\n\n        {onAdd ? (\n          <form\n            className=\"mb-4 grid grid-cols-[2fr_3fr_auto_auto] gap-2\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              submit();\n            }}\n          >\n            <Input\n              placeholder=\"DATABASE_URL\"\n              value={newKey}\n              onChange={(e) => setNewKey(e.target.value)}\n              className=\"font-mono\"\n              aria-label=\"Variable name\"\n            />\n            <Input\n              placeholder=\"postgresql://…\"\n              value={newValue}\n              onChange={(e) => setNewValue(e.target.value)}\n              className=\"font-mono\"\n              aria-label=\"Variable value\"\n            />\n            <select\n              value={newScope}\n              onChange={(e) => setNewScope(e.target.value)}\n              aria-label=\"Variable scope\"\n              className={cn(\n                \"h-10 rounded-md border border-input bg-card px-3\",\n                \"font-sans text-body-sm\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n              )}\n            >\n              {scopeOptions.map((s) => (\n                <option key={s} value={s}>\n                  {s}\n                </option>\n              ))}\n            </select>\n            <Button type=\"submit\">\n              <Plus /> Add\n            </Button>\n          </form>\n        ) : null}\n\n        <ul className=\"divide-y divide-border/30\">\n          {vars.map((v) => (\n            <Row key={v.id} entry={v} {...(onRemove ? { onRemove } : {})} />\n          ))}\n          {vars.length === 0 ? (\n            <li className=\"py-8 text-center text-body-sm text-muted-foreground\">\n              No environment variables yet.\n            </li>\n          ) : null}\n        </ul>\n      </div>\n    );\n  },\n);\nEnvVarEditor.displayName = \"EnvVarEditor\";\n\ninterface RowProps {\n  entry: EnvVar;\n  onRemove?: (id: string) => void;\n}\n\nfunction Row({ entry, onRemove }: RowProps) {\n  const [revealed, setRevealed] = useState(!entry.masked);\n\n  const value = revealed ? entry.value : \"•\".repeat(Math.min(entry.value.length, 12) || 8);\n\n  const copy = () => {\n    if (typeof navigator !== \"undefined\" && navigator.clipboard) {\n      navigator.clipboard.writeText(entry.value).catch((err: unknown) => {\n        // T7.6: dev-only warning so engineers see something when clipboard\n        // fails (Safari/Firefox iframe sandbox, document not focused,\n        // Permissions-Policy block). Production stays silent — behavior is\n        // fail-safe (user can still copy manually).\n        if (typeof process !== \"undefined\" && process.env.NODE_ENV !== \"production\") {\n          // biome-ignore lint/suspicious/noConsole: dev-only clipboard diagnostic (T7.6)\n          console.warn(\"[@usetheo/ui] EnvVarEditor clipboard write failed:\", err);\n        }\n      });\n    }\n  };\n\n  return (\n    <li className=\"grid grid-cols-[2fr_3fr_auto_auto] items-center gap-3 py-3\">\n      <span className=\"truncate font-mono text-code-sm text-foreground\">{entry.key}</span>\n      <span className=\"flex items-center gap-2 truncate font-mono text-code-sm text-muted-foreground\">\n        {entry.readonly ? <Lock className=\"size-3\" aria-hidden=\"true\" /> : null}\n        {value}\n      </span>\n      <Badge variant={entry.scope === \"production\" ? \"primary\" : \"default\"}>\n        {entry.scope ?? \"all\"}\n      </Badge>\n      <div className=\"flex items-center gap-0.5\">\n        {entry.masked ? (\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => setRevealed((r) => !r)}\n            aria-label={revealed ? \"Hide value\" : \"Reveal value\"}\n          >\n            {revealed ? <EyeOff /> : <Eye />}\n          </Button>\n        ) : null}\n        <Button size=\"icon\" variant=\"ghost\" onClick={copy} aria-label=\"Copy value\">\n          <Copy />\n        </Button>\n        {onRemove && !entry.readonly ? (\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onRemove(entry.id)}\n            aria-label={`Remove ${entry.key}`}\n          >\n            <Trash2 />\n          </Button>\n        ) : null}\n      </div>\n    </li>\n  );\n}\n\nexport { EnvVarEditor };\n"
+    }
+  ]
+}

package/registry/r/folder-context-card.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "folder-context-card",
+  "type": "registry:ui",
+  "title": "FolderContextCard",
+  "description": "File/folder tree fragment for the right inspector.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/folder-context-card/folder-context-card.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/folder-context-card.tsx",
+      "content": "import { ChevronRight, File, Folder } 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 FolderEntry {\n  id: string;\n  name: string;\n  kind: \"folder\" | \"file\";\n  /**\n   * If true, the entry is expanded (icons + nested children).\n   * Pure visual flag; toggling is the caller's job.\n   */\n  open?: boolean;\n  /**\n   * Optional nested entries when this is a folder.\n   */\n  children?: FolderEntry[];\n  /** Optional adornment after the name (badge, modified indicator). */\n  trailing?: ReactNode;\n  /** Override the icon. */\n  icon?: IconComponent;\n}\n\ninterface FolderContextCardProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title?: ReactNode;\n  /**\n   * Root entries shown directly in the card.\n   */\n  entries: FolderEntry[];\n  /**\n   * Fires when an entry row is clicked.\n   */\n  onEntryClick?: (id: string) => void;\n}\n\n/**\n * FolderContextCard — file/folder tree fragment for the right inspector.\n *\n * Visual: 1-level tree with chevron indicating expanded state. Renders nested\n * children recursively, but does not manage open state — caller controls\n * `entry.open` and reacts to `onEntryClick`.\n */\nconst FolderContextCard = forwardRef<HTMLElement, FolderContextCardProps>(\n  ({ className, title, entries, onEntryClick, ...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      <Tree entries={entries} {...(onEntryClick ? { onEntryClick } : {})} depth={0} />\n    </section>\n  ),\n);\nFolderContextCard.displayName = \"FolderContextCard\";\n\nfunction Tree({\n  entries,\n  onEntryClick,\n  depth,\n}: {\n  entries: FolderEntry[];\n  onEntryClick?: (id: string) => void;\n  depth: number;\n}) {\n  return (\n    <ul className={cn(\"grid\", depth === 0 ? \"gap-0.5\" : \"gap-0\")}>\n      {entries.map((entry) => {\n        const IconComp = entry.icon ?? (entry.kind === \"folder\" ? Folder : File);\n        const hasChildren = entry.kind === \"folder\" && entry.children && entry.children.length > 0;\n        return (\n          <li key={entry.id}>\n            <button\n              type=\"button\"\n              onClick={() => onEntryClick?.(entry.id)}\n              className={cn(\n                \"flex w-full items-center gap-2 rounded-md px-2 py-1.5\",\n                \"font-sans text-body-sm text-foreground\",\n                \"transition-colors hover:bg-muted\",\n                \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              )}\n              style={{ paddingLeft: `${0.5 + depth * 0.9}rem` }}\n            >\n              {hasChildren ? (\n                <ChevronRight\n                  className={cn(\n                    \"size-3 shrink-0 text-muted-foreground transition-transform\",\n                    entry.open && \"rotate-90\",\n                  )}\n                  aria-hidden=\"true\"\n                />\n              ) : (\n                <span className=\"w-3\" aria-hidden=\"true\" />\n              )}\n              <IconComp\n                className={cn(\n                  \"size-4 shrink-0\",\n                  entry.kind === \"folder\" ? \"text-primary\" : \"text-muted-foreground\",\n                )}\n                aria-hidden=\"true\"\n              />\n              <span className=\"flex-1 truncate text-left\">{entry.name}</span>\n              {entry.trailing}\n            </button>\n            {hasChildren && entry.open ? (\n              <Tree\n                entries={entry.children as FolderEntry[]}\n                {...(onEntryClick ? { onEntryClick } : {})}\n                depth={depth + 1}\n              />\n            ) : null}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nexport { FolderContextCard };\n"
+    }
+  ]
+}

package/registry/r/folder-selector.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "folder-selector",
+  "type": "registry:ui",
+  "title": "FolderSelector",
+  "description": "Chip showing the active working directory.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/folder-selector/folder-selector.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/folder-selector.tsx",
+      "content": "import { ChevronDown, Folder } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface FolderSelectorProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Currently selected absolute path. */\n  path: string;\n  /**\n   * Render in compact mode (smaller height, no chevron padding).\n   * Default is the full-width composer variant used in the Files panel.\n   */\n  compact?: boolean;\n}\n\n/**\n * FolderSelector — chip showing the active working directory.\n *\n * Visual: folder icon + monospaced path (truncated middle) + chevron.\n * Stateless: caller handles the actual folder-picker dialog.\n */\nconst FolderSelector = forwardRef<HTMLButtonElement, FolderSelectorProps>(\n  ({ className, path, compact, ...props }, ref) => (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={cn(\n        \"inline-flex items-center gap-2 rounded-lg border border-border/60 bg-card\",\n        \"font-mono text-code-sm text-foreground\",\n        \"transition-colors duration-base ease-out-soft\",\n        \"hover:border-primary/40 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        compact ? \"h-8 px-2.5\" : \"h-10 px-3\",\n        className,\n      )}\n      {...props}\n    >\n      <Folder className=\"size-4 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n      <span className=\"min-w-0 flex-1 truncate text-left\">{path}</span>\n      <ChevronDown className=\"size-3 shrink-0 text-muted-foreground\" aria-hidden=\"true\" />\n    </button>\n  ),\n);\nFolderSelector.displayName = \"FolderSelector\";\n\nexport { FolderSelector };\n"
+    }
+  ]
+}

package/registry/r/form-field.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "form-field",
+  "type": "registry:ui",
+  "title": "FormField",
+  "description": "Composition wrapper for accessible form rows.",
+  "dependencies": [
+    "@radix-ui/react-label",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/form-field/form-field.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/form-field.tsx",
+      "content": "import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { AlertCircle } from \"lucide-react\";\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useId,\n} from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * FormField — composition wrapper for accessible form rows.\n *\n * Provides context with a generated `id`, so children (Label, Input, Hint,\n * Error) wire themselves via `htmlFor` / `id` / `aria-describedby` without\n * the consumer having to thread IDs manually.\n *\n * Composition:\n *   <FormField>\n *     <FormField.Label required>Email</FormField.Label>\n *     <FormField.Control>\n *       <Input type=\"email\" placeholder=\"…\" />\n *     </FormField.Control>\n *     <FormField.Hint>We never share your email.</FormField.Hint>\n *     <FormField.Error>{error}</FormField.Error>\n *   </FormField>\n *\n * Errors take precedence over hints (only one of them shows at once).\n */\n\ninterface FormFieldContextValue {\n  fieldId: string;\n  hintId: string;\n  errorId: string;\n  hasError: boolean;\n}\n\nconst FormFieldContext = createContext<FormFieldContextValue | null>(null);\n\nfunction useFormField(): FormFieldContextValue {\n  const ctx = useContext(FormFieldContext);\n  if (!ctx) throw new Error(\"FormField subcomponents must be inside <FormField>.\");\n  return ctx;\n}\n\ninterface FormFieldProps extends HTMLAttributes<HTMLDivElement> {\n  /** Optional explicit id override. */\n  id?: string;\n  /** Marks the field as invalid; switches Hint → Error and toggles aria. */\n  invalid?: boolean;\n}\n\nconst FormFieldRoot = forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ className, id: idProp, invalid, ...props }, ref) => {\n    const auto = useId();\n    const fieldId = idProp ?? `field-${auto}`;\n    const ctx: FormFieldContextValue = {\n      fieldId,\n      hintId: `${fieldId}-hint`,\n      errorId: `${fieldId}-error`,\n      hasError: !!invalid,\n    };\n    return (\n      <FormFieldContext.Provider value={ctx}>\n        <div ref={ref} className={cn(\"grid gap-1.5\", className)} {...props} />\n      </FormFieldContext.Provider>\n    );\n  },\n);\nFormFieldRoot.displayName = \"FormField\";\n\ninterface FormFieldLabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {\n  required?: boolean;\n}\n\n// Inlined label markup (was importing `<Label>` from sibling primitive).\n// BLOCKER-001 / D2: form-field stays in primitives/ but cannot cross-import.\n// Uses the same Radix LabelPrimitive primitive that the standalone `<Label>`\n// uses, with identical Tailwind tokens — visual parity is preserved.\nconst FormFieldLabel = forwardRef<ElementRef<typeof LabelPrimitive.Root>, FormFieldLabelProps>(\n  ({ className, required, children, ...props }, ref) => {\n    const { fieldId } = useFormField();\n    return (\n      <LabelPrimitive.Root\n        ref={ref}\n        htmlFor={fieldId}\n        className={cn(\n          \"inline-flex items-center gap-1 font-medium font-sans text-body-sm text-foreground\",\n          \"peer-disabled:cursor-not-allowed peer-disabled:opacity-60\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {required ? (\n          <span className=\"text-destructive\" aria-hidden=\"true\">\n            *\n          </span>\n        ) : null}\n      </LabelPrimitive.Root>\n    );\n  },\n);\nFormFieldLabel.displayName = \"FormField.Label\";\n\nconst FormFieldControl = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ children, ...props }, ref) => {\n    const { fieldId, hintId, errorId, hasError } = useFormField();\n    const described = hasError ? errorId : hintId;\n    // Children.only enforces exactly one child element (the form control) so we\n    // can safely clone it with the wiring props (id + aria-describedby + aria-invalid).\n    // The previous implementation spread the element object directly which relied\n    // on React's internal `$$typeof` invariant and silently dropped `ref` — the\n    // cloneElement path preserves both `ref` and `key`.\n    const only = Children.only(children) as ReactElement;\n    const cloned = isValidElement(only)\n      ? cloneElement(only, {\n          id: fieldId,\n          \"aria-describedby\": described,\n          \"aria-invalid\": hasError || undefined,\n        } as Partial<typeof only.props>)\n      : only;\n    return (\n      <div ref={ref} {...props}>\n        {cloned}\n      </div>\n    );\n  },\n);\nFormFieldControl.displayName = \"FormField.Control\";\n\nconst FormFieldHint = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { hintId, hasError } = useFormField();\n    if (hasError) return null;\n    return (\n      <p\n        ref={ref}\n        id={hintId}\n        className={cn(\"text-body-sm text-muted-foreground\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\nFormFieldHint.displayName = \"FormField.Hint\";\n\nconst FormFieldError = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { errorId, hasError } = useFormField();\n    if (!hasError) return null;\n    return (\n      <p\n        ref={ref}\n        id={errorId}\n        role=\"alert\"\n        className={cn(\"flex items-center gap-1 text-body-sm text-destructive\", className)}\n        {...props}\n      >\n        <AlertCircle className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n        {children as ReactNode}\n      </p>\n    );\n  },\n);\nFormFieldError.displayName = \"FormField.Error\";\n\nconst FormField = /*#__PURE__*/ Object.assign(FormFieldRoot, {\n  Label: FormFieldLabel,\n  Control: FormFieldControl,\n  Hint: FormFieldHint,\n  Error: FormFieldError,\n});\n\nexport { FormField };\n"
+    }
+  ]
+}

package/registry/r/hook-config.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hook-config",
+  "type": "registry:ui",
+  "title": "HookConfig",
+  "description": "Editor for lifecycle hooks (PreToolUse, PostToolUse, Stop…).",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/hook-config/hook-config.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/hook-config.tsx",
+      "content": "import { Plus, Trash2, Zap } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type HookEvent =\n  | \"PreToolUse\"\n  | \"PostToolUse\"\n  | \"UserPromptSubmit\"\n  | \"Stop\"\n  | \"SessionStart\"\n  | \"SessionEnd\";\n\nexport interface HookEntry {\n  id: string;\n  event: HookEvent;\n  /** Tool matcher (e.g. \"Bash\", \"Write\", \"*\"). */\n  matcher: string;\n  /** Shell command to run. */\n  command: string;\n  enabled?: boolean;\n}\n\nconst HOOK_EVENTS: HookEvent[] = [\n  \"PreToolUse\",\n  \"PostToolUse\",\n  \"UserPromptSubmit\",\n  \"Stop\",\n  \"SessionStart\",\n  \"SessionEnd\",\n];\n\ninterface HookConfigProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onToggle\"> {\n  hooks: HookEntry[];\n  onAdd?: (hook: Omit<HookEntry, \"id\">) => void;\n  onRemove?: (id: string) => void;\n  onToggle?: (id: string, enabled: boolean) => void;\n  title?: ReactNode;\n}\n\n/**\n * HookConfig — editor for lifecycle hooks (PreToolUse, PostToolUse, Stop…).\n *\n * Mirrors Claude Code's settings.json hooks but visual. Each row is an\n * { event × matcher × command } triple with on/off toggle.\n */\nconst HookConfig = forwardRef<HTMLDivElement, HookConfigProps>(\n  ({ className, hooks, onAdd, onRemove, onToggle, title = \"Hooks\", ...props }, ref) => {\n    const [event, setEvent] = useState<HookEvent>(\"PreToolUse\");\n    const [matcher, setMatcher] = useState(\"*\");\n    const [command, setCommand] = useState(\"\");\n\n    const submit = () => {\n      if (!command.trim()) return;\n      onAdd?.({ event, matcher: matcher.trim() || \"*\", command: command.trim() });\n      setCommand(\"\");\n    };\n\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n        <header className=\"flex items-baseline justify-between border-border/40 border-b px-4 py-3\">\n          <div className=\"flex items-center gap-2\">\n            <Zap className=\"size-4 text-primary\" aria-hidden=\"true\" />\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          </div>\n          <span className=\"font-mono text-label text-muted-foreground\">\n            {hooks.length} {hooks.length === 1 ? \"hook\" : \"hooks\"}\n          </span>\n        </header>\n\n        {onAdd ? (\n          <form\n            className=\"grid grid-cols-[140px_140px_1fr_auto] items-center gap-2 border-border/40 border-b p-3\"\n            onSubmit={(e) => {\n              e.preventDefault();\n              submit();\n            }}\n          >\n            <select\n              value={event}\n              onChange={(e) => setEvent(e.target.value as HookEvent)}\n              aria-label=\"Event\"\n              className=\"h-9 rounded-md border border-input bg-card px-2 font-mono text-code-sm\"\n            >\n              {HOOK_EVENTS.map((evt) => (\n                <option key={evt} value={evt}>\n                  {evt}\n                </option>\n              ))}\n            </select>\n            <input\n              type=\"text\"\n              value={matcher}\n              onChange={(e) => setMatcher(e.target.value)}\n              placeholder=\"matcher (Bash, Write, *)\"\n              aria-label=\"Matcher\"\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            <input\n              type=\"text\"\n              value={command}\n              onChange={(e) => setCommand(e.target.value)}\n              placeholder='command (e.g. \"./scripts/audit.sh\")'\n              aria-label=\"Command\"\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            <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          {hooks.map((hook) => {\n            const enabled = hook.enabled ?? true;\n            return (\n              <li\n                key={hook.id}\n                className={cn(\n                  \"grid grid-cols-[140px_140px_1fr_auto_auto] items-center gap-3 px-4 py-2.5\",\n                  !enabled && \"opacity-50\",\n                )}\n              >\n                <span className=\"font-mono text-code-sm text-primary\">{hook.event}</span>\n                <span className=\"font-mono text-code-sm text-muted-foreground\">{hook.matcher}</span>\n                <span className=\"truncate font-mono text-code-sm text-foreground\">\n                  {hook.command}\n                </span>\n                {onToggle ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => onToggle(hook.id, !enabled)}\n                    aria-pressed={enabled}\n                    className={cn(\n                      \"rounded-full border px-2.5 py-0.5 font-mono text-label uppercase\",\n                      enabled\n                        ? \"border-success/40 bg-success/15 text-success\"\n                        : \"border-border/40 bg-muted text-muted-foreground\",\n                    )}\n                  >\n                    {enabled ? \"On\" : \"Off\"}\n                  </button>\n                ) : (\n                  <span />\n                )}\n                {onRemove ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => onRemove(hook.id)}\n                    aria-label={`Remove hook ${hook.event} ${hook.matcher}`}\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                ) : (\n                  <span />\n                )}\n              </li>\n            );\n          })}\n          {hooks.length === 0 ? (\n            <li className=\"px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n              No hooks configured.\n            </li>\n          ) : null}\n        </ul>\n      </section>\n    );\n  },\n);\nHookConfig.displayName = \"HookConfig\";\n\nexport { HookConfig, HOOK_EVENTS };\n"
+    }
+  ]
+}

package/registry/r/hook-event-log.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "hook-event-log",
+  "type": "registry:ui",
+  "title": "HookEventLog",
+  "description": "Chronological list of hook firings, with result tone, the",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/hook-event-log/hook-event-log.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/hook-event-log.tsx",
+      "content": "import { CheckCircle2, CircleX, ShieldAlert } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type HookEventResult = \"ok\" | \"blocked\" | \"error\";\n\nexport interface HookEventEntry {\n  id: string;\n  /** Hook event (e.g. PreToolUse). */\n  event: string;\n  /** Hook matcher (e.g. Bash). */\n  matcher: string;\n  /** What the hook command was. */\n  command: string;\n  result: HookEventResult;\n  timestamp: string;\n  /** Optional stderr/stdout snippet. */\n  output?: string;\n  /** Optional duration label, e.g. \"120ms\". */\n  duration?: string;\n}\n\ninterface HookEventLogProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  events: HookEventEntry[];\n  title?: ReactNode;\n}\n\nconst RESULT_CONFIG = {\n  ok: { icon: CheckCircle2, color: \"text-success\" },\n  blocked: { icon: ShieldAlert, color: \"text-warning\" },\n  error: { icon: CircleX, color: \"text-destructive\" },\n} as const;\n\n/**\n * HookEventLog — chronological list of hook firings, with result tone, the\n * command that ran, and an optional output preview.\n */\nconst HookEventLog = forwardRef<HTMLDivElement, HookEventLogProps>(\n  ({ className, events, title = \"Hook log\", ...props }, ref) => (\n    <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\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          {events.length} {events.length === 1 ? \"event\" : \"events\"}\n        </span>\n      </header>\n      <ol className=\"divide-y divide-border/30\">\n        {events.map((evt) => {\n          const cfg = RESULT_CONFIG[evt.result];\n          const Icon = cfg.icon;\n          return (\n            <li\n              key={evt.id}\n              className=\"grid grid-cols-[auto_1fr_auto] items-start gap-3 px-4 py-2.5\"\n            >\n              <Icon aria-hidden=\"true\" className={cn(\"mt-0.5 size-3.5 shrink-0\", cfg.color)} />\n              <div className=\"min-w-0\">\n                <p className=\"flex flex-wrap items-baseline gap-2\">\n                  <span className=\"font-mono text-code-sm text-primary\">{evt.event}</span>\n                  <span className=\"font-mono text-code-sm text-muted-foreground\">\n                    matcher={evt.matcher}\n                  </span>\n                  {evt.duration ? (\n                    <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                      {evt.duration}\n                    </span>\n                  ) : null}\n                </p>\n                <p className=\"truncate font-mono text-code-sm text-foreground\">{evt.command}</p>\n                {evt.output ? (\n                  <pre className=\"mt-1 max-h-24 overflow-auto rounded-md bg-muted/60 px-2 py-1 font-mono text-code-sm text-muted-foreground\">\n                    {evt.output}\n                  </pre>\n                ) : null}\n              </div>\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                {evt.timestamp}\n              </span>\n            </li>\n          );\n        })}\n        {events.length === 0 ? (\n          <li className=\"px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n            No hooks have fired yet.\n          </li>\n        ) : null}\n      </ol>\n    </section>\n  ),\n);\nHookEventLog.displayName = \"HookEventLog\";\n\nexport { HookEventLog };\n"
+    }
+  ]
+}

package/registry/r/input.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "input",
+  "type": "registry:ui",
+  "title": "Input",
+  "description": "Text input primitive with focus ring, error state, and form-field composition support.",
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/input/input.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/input.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}\n\n/**\n * Input — text input primitive.\n *\n * Violet Forge specifics:\n *   - height 40px (h-10) matching default Button md.\n *   - rounded-md (6px) — slightly less than buttons to differentiate.\n *   - focus uses violet ring (--ring).\n *   - placeholder uses --muted-foreground.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type = \"text\", ...props }, ref) => (\n    <input\n      ref={ref}\n      type={type}\n      className={cn(\n        \"flex h-10 w-full rounded-md border border-input bg-card px-3 py-2\",\n        \"text-body-md text-foreground placeholder:text-muted-foreground\",\n        \"transition-[box-shadow,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        \"focus-visible:border-primary\",\n        \"disabled:cursor-not-allowed disabled:opacity-50\",\n        \"file:border-0 file:bg-transparent file:font-medium file:text-body-sm\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n"
+    }
+  ]
+}

package/registry/r/intent-selector.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "intent-selector",
+  "type": "registry:ui",
+  "title": "IntentSelector",
+  "description": "Chip dropdown for picking the agent's intent for the next",
+  "dependencies": [
+    "@radix-ui/react-dropdown-menu",
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset",
+    "types"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/intent-selector/intent-selector.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/intent-selector.tsx",
+      "content": "import * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronDown, Pencil } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface IntentOption {\n  id: string;\n  label: string;\n  /** Optional one-liner shown below the label in the menu. */\n  description?: string;\n  /** Optional icon — defaults to a pencil for the trigger if none. */\n  icon?: IconComponent;\n}\n\ninterface IntentSelectorProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n  value: string;\n  options: IntentOption[];\n  onChange?: (id: string) => void;\n}\n\n/**\n * IntentSelector — chip dropdown for picking the agent's intent for the next\n * turn (e.g. edit / plan / review). Mirrors ModelSelector: pill trigger +\n * Radix DropdownMenu of options with description and a check on the active.\n */\nconst IntentSelector = forwardRef<HTMLButtonElement, IntentSelectorProps>(\n  ({ className, value, options, onChange, ...props }, ref) => {\n    const current = options.find((o) => o.id === value) ?? options[0];\n    const Icon = current?.icon ?? Pencil;\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            <Icon className=\"size-3.5 text-primary\" aria-hidden=\"true\" />\n            {current?.label ?? \"Select intent\"}\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=\"start\"\n            className={cn(\n              \"z-50 min-w-[16rem] 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              const OptIcon = opt.icon ?? Pencil;\n              return (\n                <DropdownMenu.Item\n                  key={opt.id}\n                  onSelect={() => onChange?.(opt.id)}\n                  className={cn(\n                    \"flex cursor-pointer items-start 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                  <OptIcon className=\"mt-0.5 size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n                  <span className=\"flex flex-1 flex-col\">\n                    <span className=\"font-medium\">{opt.label}</span>\n                    {opt.description ? (\n                      <span className=\"text-label text-muted-foreground\">{opt.description}</span>\n                    ) : null}\n                  </span>\n                  {opt.id === value ? (\n                    <Check className=\"mt-0.5 size-3.5 shrink-0 text-primary\" />\n                  ) : null}\n                </DropdownMenu.Item>\n              );\n            })}\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    );\n  },\n);\nIntentSelector.displayName = \"IntentSelector\";\n\nexport { IntentSelector };\n"
+    }
+  ]
+}

package/registry/r/label.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "label",
+  "type": "registry:ui",
+  "title": "Label",
+  "description": "Form field label built on Radix Label.",
+  "dependencies": [
+    "@radix-ui/react-label"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/label/label.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/label.tsx",
+      "content": "import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Label — form field label built on Radix Label.\n *\n * Behaviors:\n *   - Clicking the label focuses the associated `htmlFor` input.\n *   - Adds a small red asterisk when `required` is set.\n *   - Inherits disabled visuals from the wrapper (`peer-disabled`).\n */\ninterface LabelProps extends ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {\n  required?: boolean;\n}\n\nconst Label = forwardRef<ElementRef<typeof LabelPrimitive.Root>, LabelProps>(\n  ({ className, required, children, ...props }, ref) => (\n    <LabelPrimitive.Root\n      ref={ref}\n      className={cn(\n        \"inline-flex items-center gap-1 font-medium font-sans text-body-sm text-foreground\",\n        \"peer-disabled:cursor-not-allowed peer-disabled:opacity-60\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {required ? (\n        <span className=\"text-destructive\" aria-hidden=\"true\">\n          *\n        </span>\n      ) : null}\n    </LabelPrimitive.Root>\n  ),\n);\nLabel.displayName = \"Label\";\n\nexport { Label };\n"
+    }
+  ]
+}

package/registry/r/lane-board.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "lane-board",
+  "type": "registry:ui",
+  "title": "LaneBoard",
+  "description": "Kanban-style task board with 4 lanes matching the claw-code",
+  "dependencies": [],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/lane-board/lane-board.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/lane-board.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type LaneState = \"started\" | \"blocked\" | \"failed\" | \"finished\";\n\nexport interface LaneCard {\n  id: string;\n  /** Card title (e.g. task name). */\n  title: ReactNode;\n  /** Optional description / preview. */\n  description?: ReactNode;\n  /** Optional footer / metadata row. */\n  footer?: ReactNode;\n}\n\nexport interface Lane {\n  state: LaneState;\n  cards: LaneCard[];\n}\n\ninterface LaneBoardProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  lanes: Lane[];\n  title?: ReactNode;\n}\n\nconst LANE_META: Record<LaneState, { label: string; headerClass: string; cardClass: string }> = {\n  started: {\n    label: \"Started\",\n    headerClass: \"text-primary\",\n    cardClass: \"border-primary/30 bg-primary/5\",\n  },\n  blocked: {\n    label: \"Blocked\",\n    headerClass: \"text-warning\",\n    cardClass: \"border-warning/40 bg-warning/5\",\n  },\n  failed: {\n    label: \"Failed\",\n    headerClass: \"text-destructive\",\n    cardClass: \"border-destructive/40 bg-destructive/5\",\n  },\n  finished: {\n    label: \"Finished\",\n    headerClass: \"text-success\",\n    cardClass: \"border-success/40 bg-success/5\",\n  },\n};\n\n/**\n * LaneBoard — kanban-style task board with 4 lanes matching the claw-code\n * lane event schema (started/blocked/failed/finished). Each card is a\n * machine-readable task snapshot the agent emits.\n */\nconst LaneBoard = forwardRef<HTMLDivElement, LaneBoardProps>(\n  ({ className, lanes, title, ...props }, ref) => (\n    <section\n      ref={ref}\n      className={cn(\"grid gap-3\", className)}\n      aria-label=\"Agent lane board\"\n      {...props}\n    >\n      {title ? <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3> : null}\n      <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4\">\n        {lanes.map((lane) => {\n          const meta = LANE_META[lane.state];\n          return (\n            <div\n              key={lane.state}\n              className=\"grid auto-rows-max gap-2 rounded-xl border border-border/40 bg-card p-3\"\n            >\n              <header className=\"flex items-center justify-between px-1\">\n                <span\n                  className={cn(\n                    \"font-mono text-label-caps uppercase tracking-wider\",\n                    meta.headerClass,\n                  )}\n                >\n                  {meta.label}\n                </span>\n                <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                  {lane.cards.length}\n                </span>\n              </header>\n              {lane.cards.length === 0 ? (\n                <p className=\"rounded-md border border-border/40 border-dashed px-3 py-4 text-center font-sans text-body-sm text-muted-foreground\">\n                  empty\n                </p>\n              ) : (\n                <ul className=\"grid gap-2\">\n                  {lane.cards.map((card) => (\n                    <li\n                      key={card.id}\n                      className={cn(\"grid gap-1 rounded-md border p-3\", meta.cardClass)}\n                    >\n                      <p className=\"font-medium text-body-sm text-foreground\">{card.title}</p>\n                      {card.description ? (\n                        <p className=\"text-body-sm text-muted-foreground\">{card.description}</p>\n                      ) : null}\n                      {card.footer ? (\n                        <p className=\"font-mono text-label text-muted-foreground\">{card.footer}</p>\n                      ) : null}\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </section>\n  ),\n);\nLaneBoard.displayName = \"LaneBoard\";\n\nexport { LaneBoard };\n"
+    }
+  ]
+}

package/registry/r/live-region-context.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "live-region-context",
+  "type": "registry:lib",
+  "title": "LiveRegionContext",
+  "description": "React context that coordinates aria-live declarations across nested components to prevent screen-reader double-announcement (T4.1).",
+  "dependencies": [],
+  "files": [
+    {
+      "path": "lib/live-region-context.tsx",
+      "type": "registry:lib",
+      "target": "lib/live-region-context.tsx",
+      "content": "import { createContext, useContext } from \"react\";\n\n/**\n * LiveRegionContext — coordinates `aria-live` declarations across nested\n * components so screen readers don't announce content twice.\n *\n * T4.1 (MF-4, edge-case review). Problem: a container component that\n * declares `role=\"log\" aria-live=\"polite\"` (e.g. `ChatThread`,\n * `AgentStream`) may render a child component that ALSO declares its own\n * `role=\"status\" aria-live=\"polite\"` (e.g. `AgentStreaming`,\n * `AgentErrorCard`). NVDA/JAWS/VoiceOver treat each live region as an\n * independent announcement source, so updates to the child trigger TWO\n * announcements — once from the inner status, once because the outer\n * log observes the DOM mutation. Result: stutter on every streaming\n * token, every new toast, every skeleton mount inside a log.\n *\n * Solution: container components wrap their content with\n * `<LiveRegionProvider value={true}>`. Child components call\n * `useInLiveRegion()` and omit their own `aria-live` / `role` when the\n * context is true. The outer region remains the single announcement\n * source.\n *\n * Default is `false` so standalone components (e.g., a single\n * `AgentStreaming` placed directly in a page) keep their original\n * announcement semantics with zero migration cost.\n *\n * @example\n *   // Container declares the live region\n *   <LiveRegionProvider value={true}>\n *     <div role=\"log\" aria-live=\"polite\">\n *       {children}\n *     </div>\n *   </LiveRegionProvider>\n *\n *   // Child reads context to decide its own ARIA attrs\n *   const inLiveRegion = useInLiveRegion();\n *   return (\n *     <div\n *       role={inLiveRegion ? undefined : \"status\"}\n *       aria-live={inLiveRegion ? undefined : \"polite\"}\n *     >\n *       ...\n *     </div>\n *   );\n */\n\nconst LiveRegionContext = createContext<boolean>(false);\n\nexport const LiveRegionProvider = LiveRegionContext.Provider;\n\nexport function useInLiveRegion(): boolean {\n  return useContext(LiveRegionContext);\n}\n"
+    }
+  ]
+}

package/registry/r/login-split.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "login-split",
+  "type": "registry:ui",
+  "title": "LoginSplit",
+  "description": "50/50 split shell for authentication screens — form pane on the left, illustration on the right.",
+  "dependencies": [],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/login-split/login-split.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/login-split.tsx",
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface LoginSplitProps extends HTMLAttributes<HTMLDivElement> {\n  /** Left pane content — form, brand, etc. */\n  left: ReactNode;\n  /** Right pane content — illustration, marketing, social proof. */\n  right: ReactNode;\n  /**\n   * Optional footer rendered below both panes.\n   */\n  footer?: ReactNode;\n  /**\n   * Reverse the split (form on the right). Default = form left.\n   */\n  reverse?: boolean;\n}\n\n/**\n * LoginSplit — 50/50 split layout shell.\n *\n * Used for the auth flow. Two slots (`left`, `right`); the right pane has a\n * subtle violet wash so the illustration sits inside Theo identity. Mobile\n * collapses to single column.\n */\nconst LoginSplit = forwardRef<HTMLDivElement, LoginSplitProps>(\n  ({ className, left, right, footer, reverse, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex min-h-screen flex-col bg-background\", className)} {...props}>\n      <div\n        className={cn(\n          \"grid flex-1 grid-cols-1 lg:grid-cols-2\",\n          reverse && \"lg:[&>*:first-child]:order-2\",\n        )}\n      >\n        <div className=\"flex items-center justify-center px-6 py-12 lg:px-12\">\n          <div className=\"w-full max-w-md\">{left}</div>\n        </div>\n        <div\n          className={cn(\n            \"relative flex items-center justify-center px-6 py-12 lg:px-12\",\n            \"bg-dotted-violet bg-muted/60\",\n          )}\n        >\n          <div className=\"w-full max-w-lg\">{right}</div>\n        </div>\n      </div>\n      {footer ? (\n        <footer className=\"border-border/40 border-t px-6 py-3 text-center text-body-sm text-muted-foreground\">\n          {footer}\n        </footer>\n      ) : null}\n    </div>\n  ),\n);\nLoginSplit.displayName = \"LoginSplit\";\n\nexport { LoginSplit };\n"
+    }
+  ]
+}

package/registry/r/mcp-server-card.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mcp-server-card",
+  "type": "registry:ui",
+  "title": "McpServerCard",
+  "description": "One MCP server entry showing connection status, the tools",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/primitives/mcp-server-card/mcp-server-card.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/mcp-server-card.tsx",
+      "content": "import { Plug, RotateCcw, Server } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type MCPServerStatus = \"connected\" | \"degraded\" | \"disconnected\" | \"starting\";\n\nexport interface MCPServer {\n  id: string;\n  /** Friendly name, e.g. \"postgres\". */\n  name: string;\n  /** Transport endpoint (stdio command or URL). */\n  endpoint: string;\n  status: MCPServerStatus;\n  /** Tools exposed by the server. */\n  tools: string[];\n  /** Optional resources exposed. */\n  resources?: string[];\n  /** Diagnostic message when degraded/disconnected. */\n  message?: ReactNode;\n  /** Auto-restart toggle hint. */\n  autoRestart?: boolean;\n}\n\nconst STATUS_CONFIG: Record<MCPServerStatus, { label: string; class: string }> = {\n  connected: { label: \"Connected\", class: \"border-success/40 bg-success/15 text-success\" },\n  starting: {\n    label: \"Starting\",\n    class: \"border-primary/40 bg-primary/15 text-primary animate-pulse\",\n  },\n  degraded: { label: \"Degraded\", class: \"border-warning/40 bg-warning/15 text-warning\" },\n  disconnected: {\n    label: \"Disconnected\",\n    class: \"border-destructive/40 bg-destructive/15 text-destructive\",\n  },\n};\n\ninterface MCPServerCardProps extends HTMLAttributes<HTMLElement> {\n  server: MCPServer;\n  onRestart?: (id: string) => void;\n  onDisconnect?: (id: string) => void;\n}\n\n/**\n * MCPServerCard — one MCP server entry showing connection status, the tools\n * it exposes, and inline controls (restart, disconnect).\n *\n * Pairs with claw-code's \"degraded startup reporting\" — failed servers can\n * still appear here with a recovery message.\n */\nconst MCPServerCard = forwardRef<HTMLElement, MCPServerCardProps>(\n  ({ className, server, onRestart, onDisconnect, ...props }, ref) => {\n    const cfg = STATUS_CONFIG[server.status];\n    return (\n      <article\n        ref={ref}\n        className={cn(\"grid gap-3 rounded-xl border bg-card p-4\", className)}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <Server className=\"size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <div className=\"min-w-0\">\n              <h4 className=\"font-medium font-mono text-body-sm text-foreground\">{server.name}</h4>\n              <p className=\"truncate font-mono text-label text-muted-foreground\">\n                {server.endpoint}\n              </p>\n            </div>\n          </div>\n          <span\n            className={cn(\n              \"inline-flex shrink-0 items-center rounded-full border px-2.5 py-0.5\",\n              \"font-mono text-label uppercase tracking-wider\",\n              cfg.class,\n            )}\n          >\n            {cfg.label}\n          </span>\n        </header>\n\n        {server.message ? (\n          <p className=\"rounded-md border border-warning/30 bg-warning/10 px-3 py-2 font-mono text-code-sm text-warning\">\n            {server.message}\n          </p>\n        ) : null}\n\n        {server.tools.length > 0 ? (\n          <div className=\"grid gap-1.5\">\n            <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {server.tools.length} tools\n            </span>\n            <div className=\"flex flex-wrap gap-1.5\">\n              {server.tools.map((tool) => (\n                <span\n                  key={tool}\n                  className=\"inline-flex items-center rounded-md bg-muted px-2 py-0.5 font-mono text-foreground text-label\"\n                >\n                  {tool}\n                </span>\n              ))}\n            </div>\n          </div>\n        ) : null}\n\n        {server.resources && server.resources.length > 0 ? (\n          <div className=\"grid gap-1.5\">\n            <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {server.resources.length} resources\n            </span>\n            <div className=\"flex flex-wrap gap-1.5\">\n              {server.resources.map((r) => (\n                <span\n                  key={r}\n                  className=\"inline-flex items-center rounded-md bg-accent/10 px-2 py-0.5 font-mono text-accent text-label\"\n                >\n                  {r}\n                </span>\n              ))}\n            </div>\n          </div>\n        ) : null}\n\n        <footer className=\"flex items-center justify-end gap-1.5\">\n          {onRestart ? (\n            <button\n              type=\"button\"\n              onClick={() => onRestart(server.id)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <RotateCcw className=\"size-3\" /> Restart\n            </button>\n          ) : null}\n          {onDisconnect ? (\n            <button\n              type=\"button\"\n              onClick={() => onDisconnect(server.id)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Plug className=\"size-3\" /> Disconnect\n            </button>\n          ) : null}\n        </footer>\n      </article>\n    );\n  },\n);\nMCPServerCard.displayName = \"MCPServerCard\";\n\nexport { MCPServerCard };\n"
+    }
+  ]
+}

package/registry/r/mcp-server-list.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "mcp-server-list",
+  "type": "registry:block",
+  "title": "McpServerList",
+  "description": "Grouped MCP server inventory with status filter chips.",
+  "dependencies": [
+    "lucide-react"
+  ],
+  "registryDependencies": [
+    "cn",
+    "mcp-server-card",
+    "tailwind-preset"
+  ],
+  "files": [
+    {
+      "path": "components/composites/mcp-server-list/mcp-server-list.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/mcp-server-list.tsx",
+      "content": "import { Plus } from \"lucide-react\";\nimport { forwardRef, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport {\n  type MCPServer,\n  MCPServerCard,\n  type MCPServerStatus,\n} from \"@/components/ui/mcp-server-card\";\n\ninterface MCPServerListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  servers: MCPServer[];\n  title?: ReactNode;\n  onAdd?: () => void;\n  onRestart?: (id: string) => void;\n  onDisconnect?: (id: string) => void;\n}\n\nconst STATUS_ORDER: MCPServerStatus[] = [\"connected\", \"starting\", \"degraded\", \"disconnected\"];\n\n/**\n * MCPServerList — grouped MCP server inventory with status filter chips.\n * Surfaces degraded/disconnected servers prominently so the user can act.\n */\nconst MCPServerList = forwardRef<HTMLDivElement, MCPServerListProps>(\n  (\n    { className, servers, title = \"MCP servers\", onAdd, onRestart, onDisconnect, ...props },\n    ref,\n  ) => {\n    const [filter, setFilter] = useState<MCPServerStatus | null>(null);\n\n    const counts = useMemo(() => {\n      const result: Record<MCPServerStatus, number> = {\n        connected: 0,\n        starting: 0,\n        degraded: 0,\n        disconnected: 0,\n      };\n      for (const s of servers) result[s.status]++;\n      return result;\n    }, [servers]);\n\n    const filtered = useMemo(\n      () => (filter ? servers.filter((s) => s.status === filter) : servers),\n      [servers, filter],\n    );\n\n    return (\n      <section\n        ref={ref}\n        className={cn(\"grid gap-3\", className)}\n        aria-label=\"MCP servers\"\n        {...props}\n      >\n        <header className=\"flex flex-wrap items-center justify-between gap-3\">\n          {title ? (\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          ) : (\n            <span />\n          )}\n          <div className=\"flex items-center gap-2\">\n            <div className=\"inline-flex rounded-lg border border-border/60 bg-muted p-0.5\">\n              <button\n                type=\"button\"\n                onClick={() => setFilter(null)}\n                aria-pressed={filter === null}\n                className={cn(\n                  \"rounded-md px-2.5 py-1 font-mono text-label\",\n                  filter === null ? \"bg-card text-foreground shadow-sm\" : \"text-muted-foreground\",\n                )}\n              >\n                All · {servers.length}\n              </button>\n              {STATUS_ORDER.map((status) => (\n                <button\n                  key={status}\n                  type=\"button\"\n                  onClick={() => setFilter(status)}\n                  aria-pressed={filter === status}\n                  disabled={counts[status] === 0}\n                  className={cn(\n                    \"rounded-md px-2.5 py-1 font-mono text-label uppercase\",\n                    filter === status\n                      ? \"bg-card text-foreground shadow-sm\"\n                      : \"text-muted-foreground\",\n                    \"disabled:opacity-40\",\n                  )}\n                >\n                  {status} · {counts[status]}\n                </button>\n              ))}\n            </div>\n            {onAdd ? (\n              <button\n                type=\"button\"\n                onClick={onAdd}\n                className=\"inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 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 server\n              </button>\n            ) : null}\n          </div>\n        </header>\n\n        {filtered.length === 0 ? (\n          <p className=\"rounded-xl border border-border/60 border-dashed bg-muted/30 px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n            No servers in this state.\n          </p>\n        ) : (\n          <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n            {filtered.map((server) => (\n              <MCPServerCard\n                key={server.id}\n                server={server}\n                {...(onRestart ? { onRestart } : {})}\n                {...(onDisconnect ? { onDisconnect } : {})}\n              />\n            ))}\n          </div>\n        )}\n      </section>\n    );\n  },\n);\nMCPServerList.displayName = \"MCPServerList\";\n\nexport { MCPServerList };\n"
+    }
+  ]
+}