@usetheo/ui 0.13.0 → 0.13.1

package/registry/r/social-auth-row.json

@@ -15,7 +15,7 @@
       "path": "components/primitives/social-auth-row/social-auth-row.tsx",
       "type": "registry:ui",
       "target": "components/ui/social-auth-row.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface SocialProvider {\n  id: string;\n  label: ReactNode;\n  /** Icon component (e.g. brand-specific SVG). */\n  icon: IconComponent;\n}\n\ninterface SocialAuthRowProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  providers: SocialProvider[];\n  onSelect?: (id: string) => void;\n  /**\n   * Stack vertically instead of horizontally (single-column flow).\n   */\n  vertical?: boolean;\n}\n\n/**\n * SocialAuthRow — row of OAuth provider buttons.\n *\n * Stateless; caller wires the redirect on `onSelect`. Buttons share Theo button\n * styling but with provider icon prominently on the left.\n */\nconst SocialAuthRow = forwardRef<HTMLDivElement, SocialAuthRowProps>(\n  ({ className, providers, onSelect, vertical, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"grid gap-2\",\n        vertical ? \"grid-cols-1\" : `grid-cols-${Math.min(providers.length, 4)}`,\n        className,\n      )}\n      style={\n        !vertical\n          ? { gridTemplateColumns: `repeat(${providers.length}, minmax(0, 1fr))` }\n          : undefined\n      }\n      {...props}\n    >\n      {providers.map((p) => {\n        const Icon = p.icon;\n        return (\n          <button\n            key={p.id}\n            type=\"button\"\n            onClick={() => onSelect?.(p.id)}\n            className={cn(\n              \"inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-border bg-card\",\n              \"px-4 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            )}\n          >\n            <Icon className=\"size-4\" aria-hidden=\"true\" />\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  ),\n);\nSocialAuthRow.displayName = \"SocialAuthRow\";\n\nexport { SocialAuthRow };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface SocialProvider {\n  id: string;\n  label: ReactNode;\n  /** Icon component (e.g. brand-specific SVG). */\n  icon: IconComponent;\n}\n\ninterface SocialAuthRowProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  providers: SocialProvider[];\n  onSelect?: (id: string) => void;\n  /**\n   * Stack vertically instead of horizontally (single-column flow).\n   */\n  vertical?: boolean;\n}\n\n/**\n * SocialAuthRow — row of OAuth provider buttons.\n *\n * Stateless; caller wires the redirect on `onSelect`. Buttons share Theo button\n * styling but with provider icon prominently on the left.\n */\nconst SocialAuthRow = forwardRef<HTMLDivElement, SocialAuthRowProps>(\n  ({ className, providers, onSelect, vertical, ...props }, ref) => (\n    <div\n      data-slot=\"social-auth-row\"\n      ref={ref}\n      className={cn(\n        \"grid gap-2\",\n        vertical ? \"grid-cols-1\" : `grid-cols-${Math.min(providers.length, 4)}`,\n        className,\n      )}\n      style={\n        !vertical\n          ? { gridTemplateColumns: `repeat(${providers.length}, minmax(0, 1fr))` }\n          : undefined\n      }\n      {...props}\n    >\n      {providers.map((p) => {\n        const Icon = p.icon;\n        return (\n          <button\n            key={p.id}\n            type=\"button\"\n            onClick={() => onSelect?.(p.id)}\n            className={cn(\n              \"inline-flex h-10 items-center justify-center gap-2 rounded-lg border border-border bg-card\",\n              \"px-4 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            )}\n          >\n            <Icon className=\"size-4\" aria-hidden=\"true\" />\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  ),\n);\nSocialAuthRow.displayName = \"SocialAuthRow\";\n\nexport { SocialAuthRow };\n"
     }
   ]
 }

package/registry/r/stat-tile.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/stat-tile/stat-tile.tsx",
       "type": "registry:ui",
       "target": "components/ui/stat-tile.tsx",
-      "content": "import { ArrowUpRight, Minus, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ElementType, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * StatTile — big number + label + optional delta + optional icon.\n *\n * Dual mode based on `onClick`:\n *   - With onClick → renders as `<button>` with hover state + trailing\n *     ArrowUpRight chevron (navigation affordance).\n *   - Without onClick → renders as static `<div>`.\n *\n * Delta trend drives icon + color: up=success/TrendingUp, down=destructive/\n * TrendingDown, flat=muted/Minus. Big value uses font-display + tabular-nums.\n *\n * @example\n *   <StatTile value=\"42\" label=\"Projects\" />\n *   <StatTile value=\"$1,234\" label=\"MRR\" icon={DollarSign}\n *             delta={{ value: \"+12%\", trend: \"up\" }} onClick={openBilling} />\n */\nexport interface StatTileProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"value\"> {\n  value: ReactNode;\n  label: ReactNode;\n  icon?: ElementType;\n  delta?: { value: ReactNode; trend: \"up\" | \"down\" | \"flat\" };\n}\n\nconst TREND: Record<\"up\" | \"down\" | \"flat\", { icon: ElementType; color: string }> = {\n  up: { icon: TrendingUp, color: \"text-success\" },\n  down: { icon: TrendingDown, color: \"text-destructive\" },\n  flat: { icon: Minus, color: \"text-muted-foreground\" },\n};\n\nconst StatTile = forwardRef<HTMLElement, StatTileProps>(\n  ({ className, value, label, icon: Icon, delta, onClick, children: _children, ...props }, ref) => {\n    const isInteractive = onClick !== undefined;\n    const TrendIcon = delta !== undefined ? TREND[delta.trend].icon : null;\n    const trendColor = delta !== undefined ? TREND[delta.trend].color : \"\";\n\n    const inner = (\n      <>\n        {(Icon !== undefined || isInteractive) && (\n          <div className=\"mb-3 flex items-center justify-between\">\n            {Icon !== undefined ? (\n              <div className=\"flex size-8 items-center justify-center rounded-lg border border-border/40 bg-muted/40\">\n                <Icon aria-hidden=\"true\" className=\"size-4 text-muted-foreground\" />\n              </div>\n            ) : (\n              <div />\n            )}\n            {isInteractive ? (\n              <ArrowUpRight\n                aria-hidden=\"true\"\n                className=\"size-3.5 text-muted-foreground transition-colors group-hover:text-foreground\"\n              />\n            ) : null}\n          </div>\n        )}\n        <div className=\"whitespace-nowrap font-bold font-display text-display-md text-foreground tabular-nums leading-none tracking-tight\">\n          {value}\n        </div>\n        <div className=\"mt-1 font-sans text-body-sm text-muted-foreground\">{label}</div>\n        {delta !== undefined && TrendIcon !== null ? (\n          <div\n            className={cn(\"mt-2 inline-flex items-center gap-1 font-mono text-label\", trendColor)}\n          >\n            <TrendIcon aria-hidden=\"true\" className=\"size-3\" />\n            <span>{delta.value}</span>\n          </div>\n        ) : null}\n      </>\n    );\n\n    if (isInteractive) {\n      return (\n        <button\n          ref={ref as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n          onClick={onClick}\n          className={cn(\n            \"group block w-full rounded-xl border border-border/40 bg-card p-5 text-left\",\n            \"cursor-pointer transition-colors hover:border-primary/30\",\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          {inner}\n        </button>\n      );\n    }\n\n    return (\n      <div\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={cn(\"rounded-xl border border-border/40 bg-card p-5\", className)}\n      >\n        {inner}\n      </div>\n    );\n  },\n);\nStatTile.displayName = \"StatTile\";\n\nexport { StatTile };\n"
+      "content": "import { ArrowUpRight, Minus, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes, ElementType, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * StatTile — big number + label + optional delta + optional icon.\n *\n * Dual mode based on `onClick`:\n *   - With onClick → renders as `<button>` with hover state + trailing\n *     ArrowUpRight chevron (navigation affordance).\n *   - Without onClick → renders as static `<div>`.\n *\n * Delta trend drives icon + color: up=success/TrendingUp, down=destructive/\n * TrendingDown, flat=muted/Minus. Big value uses font-display + tabular-nums.\n *\n * @example\n *   <StatTile value=\"42\" label=\"Projects\" />\n *   <StatTile value=\"$1,234\" label=\"MRR\" icon={DollarSign}\n *             delta={{ value: \"+12%\", trend: \"up\" }} onClick={openBilling} />\n */\nexport interface StatTileProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"value\"> {\n  value: ReactNode;\n  label: ReactNode;\n  icon?: ElementType;\n  delta?: { value: ReactNode; trend: \"up\" | \"down\" | \"flat\" };\n}\n\nconst TREND: Record<\"up\" | \"down\" | \"flat\", { icon: ElementType; color: string }> = {\n  up: { icon: TrendingUp, color: \"text-success\" },\n  down: { icon: TrendingDown, color: \"text-destructive\" },\n  flat: { icon: Minus, color: \"text-muted-foreground\" },\n};\n\nconst StatTile = forwardRef<HTMLElement, StatTileProps>(\n  ({ className, value, label, icon: Icon, delta, onClick, children: _children, ...props }, ref) => {\n    const isInteractive = onClick !== undefined;\n    const TrendIcon = delta !== undefined ? TREND[delta.trend].icon : null;\n    const trendColor = delta !== undefined ? TREND[delta.trend].color : \"\";\n\n    const inner = (\n      <>\n        {(Icon !== undefined || isInteractive) && (\n          <div className=\"mb-3 flex items-center justify-between\">\n            {Icon !== undefined ? (\n              <div className=\"flex size-8 items-center justify-center rounded-lg border border-border/40 bg-muted/40\">\n                <Icon aria-hidden=\"true\" className=\"size-4 text-muted-foreground\" />\n              </div>\n            ) : (\n              <div />\n            )}\n            {isInteractive ? (\n              <ArrowUpRight\n                aria-hidden=\"true\"\n                className=\"size-3.5 text-muted-foreground transition-colors group-hover:text-foreground\"\n              />\n            ) : null}\n          </div>\n        )}\n        <div className=\"whitespace-nowrap font-bold font-display text-display-md text-foreground tabular-nums leading-none tracking-tight\">\n          {value}\n        </div>\n        <div className=\"mt-1 font-sans text-body-sm text-muted-foreground\">{label}</div>\n        {delta !== undefined && TrendIcon !== null ? (\n          <div\n            className={cn(\"mt-2 inline-flex items-center gap-1 font-mono text-label\", trendColor)}\n          >\n            <TrendIcon aria-hidden=\"true\" className=\"size-3\" />\n            <span>{delta.value}</span>\n          </div>\n        ) : null}\n      </>\n    );\n\n    if (isInteractive) {\n      return (\n        <button\n          data-slot=\"stat-tile\"\n          ref={ref as React.Ref<HTMLButtonElement>}\n          type=\"button\"\n          onClick={onClick}\n          className={cn(\n            \"group block w-full rounded-xl border border-border/40 bg-card p-5 text-left\",\n            \"cursor-pointer transition-colors hover:border-primary/30\",\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          {inner}\n        </button>\n      );\n    }\n\n    return (\n      <div\n        data-slot=\"stat-tile\"\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={cn(\"rounded-xl border border-border/40 bg-card p-5\", className)}\n      >\n        {inner}\n      </div>\n    );\n  },\n);\nStatTile.displayName = \"StatTile\";\n\nexport { StatTile };\n"
     }
   ]
 }

package/registry/r/status-dot.json

@@ -7,6 +7,7 @@
   "dependencies": [],
   "registryDependencies": [
     "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/env.json",
     "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
@@ -14,7 +15,7 @@
       "path": "components/primitives/status-dot/status-dot.tsx",
       "type": "registry:ui",
       "target": "components/ui/status-dot.tsx",
-      "content": "import { forwardRef, useEffect } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * StatusDot — semantic status indicator (colored circle + optional label).\n *\n * Five status kinds:\n *   - `live`     — deployed / verified / healthy (success)\n *   - `building` — in-progress / queued (warning, auto-pulses)\n *   - `failed`   — error / down / rejected (destructive)\n *   - `idle`     — pending / offline (muted)\n *   - `warning`  — degraded but functional (warning, static)\n *\n * Three sizes (xs 6px, sm 8px default, md 10px). `pulse` defaults to\n * `true` for `building` and `false` otherwise; passing `pulse` explicitly\n * overrides the auto behavior. When no visible `label` AND no `aria-label`\n * are provided, the component auto-applies `aria-label={status}` and\n * emits a dev-mode warning (a status communicated only by color is\n * invisible to screen readers).\n *\n * @example\n *   <StatusDot status=\"live\" label=\"Production\" />\n *   <StatusDot status=\"building\" />            // auto-pulses + auto-aria-label\n */\nexport type StatusKind = \"live\" | \"building\" | \"failed\" | \"idle\" | \"warning\";\n\nexport interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  status: StatusKind;\n  label?: ReactNode;\n  size?: \"xs\" | \"sm\" | \"md\";\n  pulse?: boolean;\n}\n\nconst DOT_COLOR: Record<StatusKind, string> = {\n  live: \"bg-success\",\n  building: \"bg-warning\",\n  failed: \"bg-destructive\",\n  idle: \"bg-muted-foreground/40\",\n  warning: \"bg-warning\",\n};\n\nconst LABEL_COLOR: Record<StatusKind, string> = {\n  live: \"text-success\",\n  building: \"text-warning\",\n  failed: \"text-destructive\",\n  idle: \"text-muted-foreground\",\n  warning: \"text-warning\",\n};\n\nconst SIZE: Record<NonNullable<StatusDotProps[\"size\"]>, string> = {\n  xs: \"size-1.5\",\n  sm: \"size-2\",\n  md: \"size-2.5\",\n};\n\nconst StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(\n  ({ className, status, label, size = \"sm\", pulse, \"aria-label\": ariaLabel, ...props }, ref) => {\n    const shouldPulse = pulse ?? status === \"building\";\n\n    const hasVisibleLabel = label !== undefined && label !== null;\n    const effectiveAriaLabel = ariaLabel ?? (hasVisibleLabel ? undefined : status);\n\n    // EC-6: dev warning when neither label nor aria-label is provided.\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\" && !hasVisibleLabel && ariaLabel === undefined) {\n        // biome-ignore lint/suspicious/noConsole: dev-only diagnostic for a11y misconfiguration.\n        console.warn(\n          `<StatusDot status=\"${status}\" />: no \\`label\\` or \\`aria-label\\` provided. Color-only status is invisible to screen readers. Falling back to aria-label=\"${status}\".`,\n        );\n      }\n    }, [hasVisibleLabel, ariaLabel, status]);\n\n    const dot = (\n      <span\n        aria-hidden={hasVisibleLabel ? \"true\" : undefined}\n        className={cn(\n          \"inline-block shrink-0 rounded-full\",\n          SIZE[size],\n          DOT_COLOR[status],\n          shouldPulse && \"animate-pulse\",\n        )}\n      />\n    );\n\n    if (!hasVisibleLabel) {\n      return (\n        <span\n          ref={ref}\n          // biome-ignore lint/a11y/useSemanticElements: StatusDot is a generic inline indicator; there is no HTML element with implicit role=\"status\" that is an inline span. The native <output> is block-level and form-bound, which doesn't fit this use case.\n          role=\"status\"\n          aria-label={effectiveAriaLabel}\n          className={cn(\"inline-flex items-center\", className)}\n          {...props}\n        >\n          {dot}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        ref={ref}\n        aria-label={effectiveAriaLabel}\n        className={cn(\n          \"inline-flex items-center gap-1.5 font-mono text-label\",\n          LABEL_COLOR[status],\n          className,\n        )}\n        {...props}\n      >\n        {dot}\n        <span>{label}</span>\n      </span>\n    );\n  },\n);\nStatusDot.displayName = \"StatusDot\";\n\nexport { StatusDot };\n"
+      "content": "\"use client\";\n\nimport { forwardRef, useEffect } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { isDev } from \"@/lib/env\";\n\n/**\n * StatusDot — semantic status indicator (colored circle + optional label).\n *\n * Five status kinds:\n *   - `live`     — deployed / verified / healthy (success)\n *   - `building` — in-progress / queued (warning, auto-pulses)\n *   - `failed`   — error / down / rejected (destructive)\n *   - `idle`     — pending / offline (muted)\n *   - `warning`  — degraded but functional (warning, static)\n *\n * Three sizes (xs 6px, sm 8px default, md 10px). `pulse` defaults to\n * `true` for `building` and `false` otherwise; passing `pulse` explicitly\n * overrides the auto behavior. When no visible `label` AND no `aria-label`\n * are provided, the component auto-applies `aria-label={status}` and\n * emits a dev-mode warning (a status communicated only by color is\n * invisible to screen readers).\n *\n * @example\n *   <StatusDot status=\"live\" label=\"Production\" />\n *   <StatusDot status=\"building\" />            // auto-pulses + auto-aria-label\n */\nexport type StatusKind = \"live\" | \"building\" | \"failed\" | \"idle\" | \"warning\";\n\nexport interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  status: StatusKind;\n  label?: ReactNode;\n  size?: \"xs\" | \"sm\" | \"md\";\n  pulse?: boolean;\n}\n\nconst DOT_COLOR: Record<StatusKind, string> = {\n  live: \"bg-success\",\n  building: \"bg-warning\",\n  failed: \"bg-destructive\",\n  idle: \"bg-muted-foreground/40\",\n  warning: \"bg-warning\",\n};\n\nconst LABEL_COLOR: Record<StatusKind, string> = {\n  live: \"text-success\",\n  building: \"text-warning\",\n  failed: \"text-destructive\",\n  idle: \"text-muted-foreground\",\n  warning: \"text-warning\",\n};\n\nconst SIZE: Record<NonNullable<StatusDotProps[\"size\"]>, string> = {\n  xs: \"size-1.5\",\n  sm: \"size-2\",\n  md: \"size-2.5\",\n};\n\nconst StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(\n  ({ className, status, label, size = \"sm\", pulse, \"aria-label\": ariaLabel, ...props }, ref) => {\n    const shouldPulse = pulse ?? status === \"building\";\n\n    const hasVisibleLabel = label !== undefined && label !== null;\n    const effectiveAriaLabel = ariaLabel ?? (hasVisibleLabel ? undefined : status);\n\n    // EC-6: dev warning when neither label nor aria-label is provided.\n    useEffect(() => {\n      if (isDev() && !hasVisibleLabel && ariaLabel === undefined) {\n        // biome-ignore lint/suspicious/noConsole: dev-only diagnostic for a11y misconfiguration.\n        console.warn(\n          `<StatusDot status=\"${status}\" />: no \\`label\\` or \\`aria-label\\` provided. Color-only status is invisible to screen readers. Falling back to aria-label=\"${status}\".`,\n        );\n      }\n    }, [hasVisibleLabel, ariaLabel, status]);\n\n    const dot = (\n      <span\n        aria-hidden={hasVisibleLabel ? \"true\" : undefined}\n        className={cn(\n          \"inline-block shrink-0 rounded-full\",\n          SIZE[size],\n          DOT_COLOR[status],\n          shouldPulse && \"animate-pulse\",\n        )}\n      />\n    );\n\n    if (!hasVisibleLabel) {\n      return (\n        <span\n          data-slot=\"status-dot\"\n          ref={ref}\n          // biome-ignore lint/a11y/useSemanticElements: StatusDot is a generic inline indicator; there is no HTML element with implicit role=\"status\" that is an inline span. The native <output> is block-level and form-bound, which doesn't fit this use case.\n          role=\"status\"\n          aria-label={effectiveAriaLabel}\n          className={cn(\"inline-flex items-center\", className)}\n          {...props}\n        >\n          {dot}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        data-slot=\"status-dot\"\n        ref={ref}\n        aria-label={effectiveAriaLabel}\n        className={cn(\n          \"inline-flex items-center gap-1.5 font-mono text-label\",\n          LABEL_COLOR[status],\n          className,\n        )}\n        {...props}\n      >\n        {dot}\n        <span>{label}</span>\n      </span>\n    );\n  },\n);\nStatusDot.displayName = \"StatusDot\";\n\nexport { StatusDot };\n"
     }
   ]
 }

package/registry/r/status-indicator.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "status-indicator",
+  "type": "registry:ui",
+  "title": "StatusIndicator",
+  "description": "Operational state indicator (online/offline/degraded/info) consuming status-* semantic tokens (ADR-0007).",
+  "dependencies": [],
+  "registryDependencies": [
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
+  ],
+  "files": [
+    {
+      "path": "components/composites/status-indicator/status-indicator.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/status-indicator.tsx",
+      "content": "import { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { cn } from \"@/lib/cn\";\n\n/**\n * StatusIndicator — semantic operational-state indicator (composite).\n *\n * Consumes the `--status-online` / `--status-offline` / `--status-degraded`\n * / `--status-info` token group (ADR-0007). Statuses describe component\n * liveness (alive/dead/slow/info-flag), distinct from action-result\n * semantics (success/destructive/warning/info — see `StatusDot` primitive).\n *\n * Hierarchy invariant (T4.1): this composite consumes primitives via\n * Tailwind tokens (`bg-status-*`), never imports another composite. The\n * `StatusDot` primitive remains as a separate, more generic API.\n *\n * @example\n *   <StatusIndicator status=\"online\" />\n *   <StatusIndicator status=\"degraded\" label=\"Slow\" />\n *   <StatusIndicator status=\"offline\" label=\"Disconnected\" size=\"md\" />\n */\n\nexport type StatusIndicatorKind = \"online\" | \"offline\" | \"degraded\" | \"info\";\nexport type StatusIndicatorSize = \"sm\" | \"md\";\n\nexport interface StatusIndicatorProps extends Omit<HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** Operational state to convey. Maps to `--status-{kind}`. */\n  status: StatusIndicatorKind;\n  /** Optional inline label to the right of the dot. */\n  label?: string;\n  /** Size of the dot. Default `sm` (8px). */\n  size?: StatusIndicatorSize;\n  /** When true, pulses the dot to draw attention (e.g., live state). */\n  pulse?: boolean;\n}\n\nconst DOT_COLOR: Record<StatusIndicatorKind, string> = {\n  online: \"bg-status-online\",\n  offline: \"bg-status-offline\",\n  degraded: \"bg-status-degraded\",\n  info: \"bg-status-info\",\n};\n\nconst LABEL_COLOR: Record<StatusIndicatorKind, string> = {\n  online: \"text-foreground\",\n  offline: \"text-foreground\",\n  degraded: \"text-foreground\",\n  info: \"text-foreground\",\n};\n\nconst ARIA_LABEL: Record<StatusIndicatorKind, string> = {\n  online: \"Online\",\n  offline: \"Offline\",\n  degraded: \"Degraded\",\n  info: \"Information\",\n};\n\nconst SIZE_DOT: Record<StatusIndicatorSize, string> = {\n  sm: \"size-2\",\n  md: \"size-2.5\",\n};\n\nexport const StatusIndicator = forwardRef<HTMLSpanElement, StatusIndicatorProps>(\n  (\n    { status, label, size = \"sm\", pulse = false, className, \"aria-label\": ariaLabel, ...rest },\n    ref,\n  ) => {\n    const accessibleLabel = label ?? ariaLabel ?? ARIA_LABEL[status];\n    return (\n      <span\n        data-slot=\"status-indicator\"\n        ref={ref}\n        role=\"img\"\n        aria-label={accessibleLabel}\n        className={cn(\"inline-flex items-center gap-2 font-medium text-xs\", className)}\n        data-status={status}\n        {...rest}\n      >\n        <span\n          className={cn(\n            \"inline-block rounded-full\",\n            SIZE_DOT[size],\n            DOT_COLOR[status],\n            pulse && \"animate-pulse\",\n          )}\n          aria-hidden\n        />\n        {label !== undefined && <span className={LABEL_COLOR[status]}>{label}</span>}\n      </span>\n    );\n  },\n);\nStatusIndicator.displayName = \"StatusIndicator\";\n"
+    }
+  ]
+}

package/registry/r/steps-rail.json

@@ -14,7 +14,7 @@
       "path": "components/primitives/steps-rail/steps-rail.tsx",
       "type": "registry:ui",
       "target": "components/ui/steps-rail.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface RailStep {\n  id: string | number;\n  label?: ReactNode;\n  /**\n   * Visual state: \"complete\", \"current\", \"pending\".\n   */\n  state?: \"complete\" | \"current\" | \"pending\";\n}\n\ninterface StepsRailProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  steps: RailStep[];\n  /**\n   * Optional label rendered at the top of the rail (e.g. \"STEPS\").\n   */\n  title?: ReactNode;\n}\n\n/**\n * StepsRail — vertical numbered rail with connecting line.\n *\n * Mirrors the file-organisation wiremock right rail: 5 numbered dots, current\n * highlighted, line connecting them.\n */\nconst StepsRail = forwardRef<HTMLElement, StepsRailProps>(\n  ({ className, steps, title, ...props }, ref) => (\n    <aside\n      ref={ref}\n      className={cn(\n        \"flex w-14 flex-col items-center gap-6 border-border/40 border-l py-6\",\n        className,\n      )}\n      aria-label=\"Task steps\"\n      {...props}\n    >\n      {title ? (\n        <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n          {title}\n        </span>\n      ) : null}\n      <ol className=\"before:-translate-x-1/2 relative grid place-items-center gap-6 before:absolute before:top-3 before:bottom-3 before:left-1/2 before:w-px before:bg-border/60\">\n        {steps.map((step, idx) => {\n          const state = step.state ?? (idx === 0 ? \"current\" : \"pending\");\n          return (\n            <li key={step.id} className=\"relative z-10\">\n              <span\n                className={cn(\n                  \"grid size-7 place-items-center rounded-full border-2 font-bold font-mono text-code-sm\",\n                  state === \"complete\" && \"border-primary bg-primary text-primary-foreground\",\n                  state === \"current\" && \"border-foreground bg-foreground text-background\",\n                  state === \"pending\" && \"border-border bg-card text-muted-foreground\",\n                )}\n                aria-current={state === \"current\" ? \"step\" : undefined}\n              >\n                {step.label ?? idx + 1}\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n    </aside>\n  ),\n);\nStepsRail.displayName = \"StepsRail\";\n\nexport { StepsRail };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface RailStep {\n  id: string | number;\n  label?: ReactNode;\n  /**\n   * Visual state: \"complete\", \"current\", \"pending\".\n   */\n  state?: \"complete\" | \"current\" | \"pending\";\n}\n\ninterface StepsRailProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  steps: RailStep[];\n  /**\n   * Optional label rendered at the top of the rail (e.g. \"STEPS\").\n   */\n  title?: ReactNode;\n}\n\n/**\n * StepsRail — vertical numbered rail with connecting line.\n *\n * Mirrors the file-organisation wiremock right rail: 5 numbered dots, current\n * highlighted, line connecting them.\n */\nconst StepsRail = forwardRef<HTMLElement, StepsRailProps>(\n  ({ className, steps, title, ...props }, ref) => (\n    <aside\n      data-slot=\"steps-rail\"\n      ref={ref}\n      className={cn(\n        \"flex w-14 flex-col items-center gap-6 border-border/40 border-l py-6\",\n        className,\n      )}\n      aria-label=\"Task steps\"\n      {...props}\n    >\n      {title ? (\n        <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n          {title}\n        </span>\n      ) : null}\n      <ol className=\"before:-translate-x-1/2 relative grid place-items-center gap-6 before:absolute before:top-3 before:bottom-3 before:left-1/2 before:w-px before:bg-border/60\">\n        {steps.map((step, idx) => {\n          const state = step.state ?? (idx === 0 ? \"current\" : \"pending\");\n          return (\n            <li key={step.id} className=\"relative z-10\">\n              <span\n                className={cn(\n                  \"grid size-7 place-items-center rounded-full border-2 font-bold font-mono text-code-sm\",\n                  state === \"complete\" && \"border-primary bg-primary text-primary-foreground\",\n                  state === \"current\" && \"border-foreground bg-foreground text-background\",\n                  state === \"pending\" && \"border-border bg-card text-muted-foreground\",\n                )}\n                aria-current={state === \"current\" ? \"step\" : undefined}\n              >\n                {step.label ?? idx + 1}\n              </span>\n            </li>\n          );\n        })}\n      </ol>\n    </aside>\n  ),\n);\nStepsRail.displayName = \"StepsRail\";\n\nexport { StepsRail };\n"
     }
   ]
 }

package/registry/r/sub-agent-dispatch.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/sub-agent-dispatch/sub-agent-dispatch.tsx",
       "type": "registry:ui",
       "target": "components/ui/sub-agent-dispatch.tsx",
-      "content": "import { Bot, CornerDownRight, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type SubAgentState = \"spawning\" | \"running\" | \"completed\" | \"failed\" | \"cancelled\";\n\nexport interface SubAgentRun {\n  id: string;\n  /** Profile name (matches AgentProfile.name). */\n  agent: string;\n  /** Short task description given to the sub-agent. */\n  task: string;\n  state: SubAgentState;\n  /** Optional duration label. */\n  duration?: string;\n  /** Optional last status line (preview of the latest event). */\n  lastEvent?: string;\n  /** Optional result summary (one-liner). */\n  result?: ReactNode;\n}\n\ninterface SubAgentDispatchProps extends HTMLAttributes<HTMLElement> {\n  run: SubAgentRun;\n  /** When provided, renders a cancel button while the run is in flight. */\n  onCancel?: (id: string) => void;\n}\n\nconst STATE_CONFIG: Record<SubAgentState, { label: string; class: string }> = {\n  spawning: {\n    label: \"Spawning\",\n    class: \"border-primary/40 bg-primary/10 text-primary animate-pulse\",\n  },\n  running: { label: \"Running\", class: \"border-primary/40 bg-primary/15 text-primary\" },\n  completed: { label: \"Done\", class: \"border-success/40 bg-success/15 text-success\" },\n  failed: { label: \"Failed\", class: \"border-destructive/40 bg-destructive/15 text-destructive\" },\n  cancelled: { label: \"Cancelled\", class: \"border-border/40 bg-muted text-muted-foreground\" },\n};\n\n/**\n * SubAgentDispatch — visualization for a Task() / sub-agent invocation.\n *\n * Shows the agent name, the task summary, current state, an inline event\n * preview, and an optional result. Use inside the agent timeline to make\n * delegation visible.\n */\nconst SubAgentDispatch = forwardRef<HTMLElement, SubAgentDispatchProps>(\n  ({ className, run, onCancel, ...props }, ref) => {\n    const cfg = STATE_CONFIG[run.state];\n    const isLive = run.state === \"spawning\" || run.state === \"running\";\n    return (\n      <article\n        ref={ref}\n        className={cn(\n          \"grid gap-2 rounded-lg border border-primary/30 border-l-2 border-l-primary bg-card px-4 py-3\",\n          className,\n        )}\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            <CornerDownRight className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <Bot className=\"size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <span className=\"font-medium font-mono text-code-sm text-foreground\">dispatch</span>\n            <span className=\"font-mono text-code-sm text-primary\">{run.agent}</span>\n            {run.duration ? (\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                · {run.duration}\n              </span>\n            ) : null}\n          </div>\n          <span\n            className={cn(\n              \"inline-flex shrink-0 items-center gap-1 rounded-full border px-2.5 py-0.5\",\n              \"font-mono text-label uppercase tracking-wider\",\n              cfg.class,\n            )}\n          >\n            {isLive ? <Loader2 className=\"size-3 animate-spin\" aria-hidden=\"true\" /> : null}\n            {cfg.label}\n          </span>\n        </header>\n\n        <p className=\"text-body-sm text-foreground\">\n          <span className=\"mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            task\n          </span>\n          {run.task}\n        </p>\n\n        {run.lastEvent ? (\n          <p className=\"truncate font-mono text-code-sm text-muted-foreground\">\n            <span className=\"text-muted-foreground/60\">›</span> {run.lastEvent}\n          </p>\n        ) : null}\n\n        {run.result ? (\n          <p className=\"rounded-md bg-muted/40 px-3 py-2 text-body-sm text-foreground\">\n            <span className=\"mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              result\n            </span>\n            {run.result}\n          </p>\n        ) : null}\n\n        {isLive && onCancel ? (\n          <footer className=\"flex justify-end\">\n            <button\n              type=\"button\"\n              onClick={() => onCancel(run.id)}\n              className=\"rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              Cancel\n            </button>\n          </footer>\n        ) : null}\n      </article>\n    );\n  },\n);\nSubAgentDispatch.displayName = \"SubAgentDispatch\";\n\nexport { SubAgentDispatch };\n"
+      "content": "import { Bot, CornerDownRight, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type SubAgentState = \"spawning\" | \"running\" | \"completed\" | \"failed\" | \"cancelled\";\n\nexport interface SubAgentRun {\n  id: string;\n  /** Profile name (matches AgentProfile.name). */\n  agent: string;\n  /** Short task description given to the sub-agent. */\n  task: string;\n  state: SubAgentState;\n  /** Optional duration label. */\n  duration?: string;\n  /** Optional last status line (preview of the latest event). */\n  lastEvent?: string;\n  /** Optional result summary (one-liner). */\n  result?: ReactNode;\n}\n\ninterface SubAgentDispatchProps extends HTMLAttributes<HTMLElement> {\n  run: SubAgentRun;\n  /** When provided, renders a cancel button while the run is in flight. */\n  onCancel?: (id: string) => void;\n}\n\nconst STATE_CONFIG: Record<SubAgentState, { label: string; class: string }> = {\n  spawning: {\n    label: \"Spawning\",\n    class: \"border-primary/40 bg-primary/10 text-primary animate-pulse\",\n  },\n  running: { label: \"Running\", class: \"border-primary/40 bg-primary/15 text-primary\" },\n  completed: { label: \"Done\", class: \"border-success/40 bg-success/15 text-success\" },\n  failed: { label: \"Failed\", class: \"border-destructive/40 bg-destructive/15 text-destructive\" },\n  cancelled: { label: \"Cancelled\", class: \"border-border/40 bg-muted text-muted-foreground\" },\n};\n\n/**\n * SubAgentDispatch — visualization for a Task() / sub-agent invocation.\n *\n * Shows the agent name, the task summary, current state, an inline event\n * preview, and an optional result. Use inside the agent timeline to make\n * delegation visible.\n */\nconst SubAgentDispatch = forwardRef<HTMLElement, SubAgentDispatchProps>(\n  ({ className, run, onCancel, ...props }, ref) => {\n    const cfg = STATE_CONFIG[run.state];\n    const isLive = run.state === \"spawning\" || run.state === \"running\";\n    return (\n      <article\n        data-slot=\"sub-agent-dispatch\"\n        ref={ref}\n        className={cn(\n          \"grid gap-2 rounded-lg border border-primary/30 border-l-2 border-l-primary bg-card px-4 py-3\",\n          className,\n        )}\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            <CornerDownRight className=\"size-3.5 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <Bot className=\"size-4 shrink-0 text-primary\" aria-hidden=\"true\" />\n            <span className=\"font-medium font-mono text-code-sm text-foreground\">dispatch</span>\n            <span className=\"font-mono text-code-sm text-primary\">{run.agent}</span>\n            {run.duration ? (\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                · {run.duration}\n              </span>\n            ) : null}\n          </div>\n          <span\n            className={cn(\n              \"inline-flex shrink-0 items-center gap-1 rounded-full border px-2.5 py-0.5\",\n              \"font-mono text-label uppercase tracking-wider\",\n              cfg.class,\n            )}\n          >\n            {isLive ? <Loader2 className=\"size-3 animate-spin\" aria-hidden=\"true\" /> : null}\n            {cfg.label}\n          </span>\n        </header>\n\n        <p className=\"text-body-sm text-foreground\">\n          <span className=\"mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            task\n          </span>\n          {run.task}\n        </p>\n\n        {run.lastEvent ? (\n          <p className=\"truncate font-mono text-code-sm text-muted-foreground\">\n            <span className=\"text-muted-foreground/60\">›</span> {run.lastEvent}\n          </p>\n        ) : null}\n\n        {run.result ? (\n          <p className=\"rounded-md bg-muted/40 px-3 py-2 text-body-sm text-foreground\">\n            <span className=\"mr-2 font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              result\n            </span>\n            {run.result}\n          </p>\n        ) : null}\n\n        {isLive && onCancel ? (\n          <footer className=\"flex justify-end\">\n            <button\n              type=\"button\"\n              onClick={() => onCancel(run.id)}\n              className=\"rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              Cancel\n            </button>\n          </footer>\n        ) : null}\n      </article>\n    );\n  },\n);\nSubAgentDispatch.displayName = \"SubAgentDispatch\";\n\nexport { SubAgentDispatch };\n"
     }
   ]
 }

package/registry/r/switch.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/switch/switch.tsx",
       "type": "registry:ui",
       "target": "components/ui/switch.tsx",
-      "content": "import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Switch — built on Radix Switch. Used for binary toggles (autoaccept,\n * dark mode preview, feature flags).\n *\n * Off-state uses --muted, on-state uses --primary with a subtle glow shadow\n * to mark \"this is active\" in the violet brand language.\n *\n * The `size` prop accepts `\"sm\" | \"md\" | \"lg\"`. Default `md` preserves the\n * 20×36 track from before this prop existed.\n */\nconst switchVariants = cva(\n  [\n    \"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent\",\n    \"transition-[background-color,box-shadow] 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    \"data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_0_8px_hsl(var(--primary)/0.35)]\",\n    \"data-[state=unchecked]:bg-muted\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-4 w-7\",\n        md: \"h-5 w-9\",\n        lg: \"h-6 w-11\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst thumbClassBySize: Record<NonNullable<VariantProps<typeof switchVariants>[\"size\"]>, string> = {\n  sm: \"size-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0.5\",\n  md: \"size-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5\",\n  lg: \"size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5\",\n};\n\ninterface SwitchProps\n  extends ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n    VariantProps<typeof switchVariants> {}\n\nconst Switch = forwardRef<ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(\n  ({ className, size, ...props }, ref) => (\n    <SwitchPrimitive.Root ref={ref} className={cn(switchVariants({ size }), className)} {...props}>\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block rounded-full bg-card shadow-sm\",\n          \"transition-transform duration-base ease-out-soft\",\n          thumbClassBySize[size ?? \"md\"],\n        )}\n      />\n    </SwitchPrimitive.Root>\n  ),\n);\nSwitch.displayName = \"Switch\";\n\nexport { Switch, switchVariants };\n"
+      "content": "import * as SwitchPrimitive from \"@radix-ui/react-switch\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Switch — built on Radix Switch. Used for binary toggles (autoaccept,\n * dark mode preview, feature flags).\n *\n * Off-state uses --muted, on-state uses --primary with a subtle glow shadow\n * to mark \"this is active\" in the violet brand language.\n *\n * The `size` prop accepts `\"sm\" | \"md\" | \"lg\"`. Default `md` preserves the\n * 20×36 track from before this prop existed.\n */\nconst switchVariants = cva(\n  [\n    \"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent\",\n    \"transition-[background-color,box-shadow] 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    \"data-[state=checked]:bg-primary data-[state=checked]:shadow-[0_0_8px_hsl(var(--primary)/0.35)]\",\n    \"data-[state=unchecked]:bg-muted\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-4 w-7\",\n        md: \"h-5 w-9\",\n        lg: \"h-6 w-11\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst thumbClassBySize: Record<NonNullable<VariantProps<typeof switchVariants>[\"size\"]>, string> = {\n  sm: \"size-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0.5\",\n  md: \"size-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5\",\n  lg: \"size-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5\",\n};\n\ninterface SwitchProps\n  extends ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,\n    VariantProps<typeof switchVariants> {}\n\nconst Switch = forwardRef<ElementRef<typeof SwitchPrimitive.Root>, SwitchProps>(\n  ({ className, size, ...props }, ref) => (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      ref={ref}\n      className={cn(switchVariants({ size }), className)}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        className={cn(\n          \"pointer-events-none block rounded-full bg-card shadow-sm\",\n          \"transition-transform duration-base ease-out-soft\",\n          thumbClassBySize[size ?? \"md\"],\n        )}\n      />\n    </SwitchPrimitive.Root>\n  ),\n);\nSwitch.displayName = \"Switch\";\n\nexport { Switch, switchVariants };\n"
     }
   ]
 }

package/registry/r/system-prompt-editor.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/system-prompt-editor/system-prompt-editor.tsx",
       "type": "registry:ui",
       "target": "components/ui/system-prompt-editor.tsx",
-      "content": "import { RotateCcw, Sparkles } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface SystemPromptEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Vendor / default system prompt (read-only). */\n  defaultPrompt: string;\n  /** Current override; pass empty string for \"use default\". */\n  override: string;\n  onOverrideChange: (next: string) => void;\n  /** Approximate token count for the active prompt. */\n  tokenEstimate?: number;\n  title?: ReactNode;\n}\n\n/**\n * SystemPromptEditor — surface the agent's system prompt with a clear\n * \"vendor default\" vs \"user override\" toggle.\n *\n * Behavior:\n *   - When override is empty, the textarea shows the default (greyed out,\n *     editable starts blank).\n *   - When user types, override takes effect.\n *   - \"Reset to default\" wipes the override.\n *\n * Critical for transparency: a user must be able to see and edit the prompt.\n */\nconst SystemPromptEditor = forwardRef<HTMLDivElement, SystemPromptEditorProps>(\n  (\n    {\n      className,\n      defaultPrompt,\n      override,\n      onOverrideChange,\n      tokenEstimate,\n      title = \"System prompt\",\n      ...props\n    },\n    ref,\n  ) => {\n    const usingOverride = override.length > 0;\n    const [showDefault, setShowDefault] = useState(false);\n\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card\", className)} {...props}>\n        <header className=\"flex items-center justify-between gap-3 border-border/40 border-b px-4 py-3\">\n          <div className=\"flex items-center gap-2\">\n            <Sparkles className=\"size-4 text-primary\" aria-hidden=\"true\" />\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n            <span\n              className={cn(\n                \"inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-label uppercase tracking-wider\",\n                usingOverride\n                  ? \"border-primary/40 bg-primary/10 text-primary\"\n                  : \"border-border/40 bg-muted text-muted-foreground\",\n              )}\n            >\n              {usingOverride ? \"Override active\" : \"Vendor default\"}\n            </span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {tokenEstimate !== undefined ? (\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                ~{tokenEstimate.toLocaleString()} tokens\n              </span>\n            ) : null}\n            <button\n              type=\"button\"\n              onClick={() => setShowDefault((v) => !v)}\n              className=\"rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              {showDefault ? \"Hide\" : \"Show\"} default\n            </button>\n            {usingOverride ? (\n              <button\n                type=\"button\"\n                onClick={() => onOverrideChange(\"\")}\n                className=\"inline-flex items-center gap-1 rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              >\n                <RotateCcw className=\"size-3\" /> Reset\n              </button>\n            ) : null}\n          </div>\n        </header>\n\n        {showDefault ? (\n          <pre className=\"max-h-48 overflow-auto border-border/40 border-b bg-muted/40 px-4 py-3 font-mono text-code-sm text-muted-foreground\">\n            {defaultPrompt}\n          </pre>\n        ) : null}\n\n        <textarea\n          value={override}\n          onChange={(e) => onOverrideChange(e.target.value)}\n          placeholder={\n            usingOverride ? \"\" : \"Leave empty to use the vendor default. Type here to override.\"\n          }\n          rows={8}\n          className={cn(\n            \"w-full resize-y bg-transparent px-4 py-3 font-mono text-code-md text-foreground\",\n            \"placeholder:text-muted-foreground\",\n            \"focus:outline-none\",\n          )}\n        />\n      </section>\n    );\n  },\n);\nSystemPromptEditor.displayName = \"SystemPromptEditor\";\n\nexport { SystemPromptEditor };\n"
+      "content": "\"use client\";\n\nimport { RotateCcw, Sparkles } from \"lucide-react\";\nimport { forwardRef, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface SystemPromptEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Vendor / default system prompt (read-only). */\n  defaultPrompt: string;\n  /** Current override; pass empty string for \"use default\". */\n  override: string;\n  onOverrideChange: (next: string) => void;\n  /** Approximate token count for the active prompt. */\n  tokenEstimate?: number;\n  title?: ReactNode;\n}\n\n/**\n * SystemPromptEditor — surface the agent's system prompt with a clear\n * \"vendor default\" vs \"user override\" toggle.\n *\n * Behavior:\n *   - When override is empty, the textarea shows the default (greyed out,\n *     editable starts blank).\n *   - When user types, override takes effect.\n *   - \"Reset to default\" wipes the override.\n *\n * Critical for transparency: a user must be able to see and edit the prompt.\n */\nconst SystemPromptEditor = forwardRef<HTMLDivElement, SystemPromptEditorProps>(\n  (\n    {\n      className,\n      defaultPrompt,\n      override,\n      onOverrideChange,\n      tokenEstimate,\n      title = \"System prompt\",\n      ...props\n    },\n    ref,\n  ) => {\n    const usingOverride = override.length > 0;\n    const [showDefault, setShowDefault] = useState(false);\n\n    return (\n      <section\n        data-slot=\"system-prompt-editor\"\n        ref={ref}\n        className={cn(\"rounded-xl border bg-card\", className)}\n        {...props}\n      >\n        <header className=\"flex items-center justify-between gap-3 border-border/40 border-b px-4 py-3\">\n          <div className=\"flex items-center gap-2\">\n            <Sparkles className=\"size-4 text-primary\" aria-hidden=\"true\" />\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n            <span\n              className={cn(\n                \"inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-label uppercase tracking-wider\",\n                usingOverride\n                  ? \"border-primary/40 bg-primary/10 text-primary\"\n                  : \"border-border/40 bg-muted text-muted-foreground\",\n              )}\n            >\n              {usingOverride ? \"Override active\" : \"Vendor default\"}\n            </span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            {tokenEstimate !== undefined ? (\n              <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n                ~{tokenEstimate.toLocaleString()} tokens\n              </span>\n            ) : null}\n            <button\n              type=\"button\"\n              onClick={() => setShowDefault((v) => !v)}\n              className=\"rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              {showDefault ? \"Hide\" : \"Show\"} default\n            </button>\n            {usingOverride ? (\n              <button\n                type=\"button\"\n                onClick={() => onOverrideChange(\"\")}\n                className=\"inline-flex items-center gap-1 rounded-md px-2 py-1 font-mono text-label text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              >\n                <RotateCcw className=\"size-3\" /> Reset\n              </button>\n            ) : null}\n          </div>\n        </header>\n\n        {showDefault ? (\n          <pre className=\"max-h-48 overflow-auto border-border/40 border-b bg-muted/40 px-4 py-3 font-mono text-code-sm text-muted-foreground\">\n            {defaultPrompt}\n          </pre>\n        ) : null}\n\n        <textarea\n          value={override}\n          onChange={(e) => onOverrideChange(e.target.value)}\n          placeholder={\n            usingOverride ? \"\" : \"Leave empty to use the vendor default. Type here to override.\"\n          }\n          rows={8}\n          className={cn(\n            \"w-full resize-y bg-transparent px-4 py-3 font-mono text-code-md text-foreground\",\n            \"placeholder:text-muted-foreground\",\n            \"focus:outline-none\",\n          )}\n        />\n      </section>\n    );\n  },\n);\nSystemPromptEditor.displayName = \"SystemPromptEditor\";\n\nexport { SystemPromptEditor };\n"
     }
   ]
 }

package/registry/r/table.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/table/table.tsx",
       "type": "registry:ui",
       "target": "components/ui/table.tsx",
-      "content": "import { ChevronDown, ChevronUp } from \"lucide-react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Table — semantic data table primitive with sub-components.\n *\n * Composition:\n *   <Table density=\"default\">\n *     <Table.Header>\n *       <Table.Row>\n *         <Table.HeaderCell>Date</Table.HeaderCell>\n *         <Table.HeaderCell align=\"right\">Amount</Table.HeaderCell>\n *       </Table.Row>\n *     </Table.Header>\n *     <Table.Body>\n *       <Table.Row>\n *         <Table.Cell>2026-05-23</Table.Cell>\n *         <Table.Cell align=\"right\" numeric>$ 42.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Body>\n *   </Table>\n *\n * density propagates via Context so Cells pick up vertical padding without\n * prop drilling. Sub-components are attached as static properties on the\n * root (`Table.Header`, etc.) — single import surface.\n *\n * Sortable header: pass `onSort` + `sortDirection`. The HeaderCell renders\n * the sort affordance (ChevronUp/ChevronDown) and triggers the consumer\n * callback. `sortDirection` without `onSort` is a no-op (header stays\n * static); `sortDirection=\"none\"` with `onSort` shows a dimmed affordance.\n */\n\ntype TableDensity = \"default\" | \"compact\";\ntype AlignKind = \"left\" | \"center\" | \"right\";\ntype SortDirection = \"asc\" | \"desc\" | \"none\";\n\nconst TableDensityContext = createContext<TableDensity>(\"default\");\n\nconst alignClass: Record<AlignKind, string> = {\n  left: \"text-left\",\n  center: \"text-center\",\n  right: \"text-right\",\n};\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  density?: TableDensity;\n}\n\nconst Root = forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = \"default\", children, ...props }, ref) => (\n    <TableDensityContext.Provider value={density}>\n      <table\n        ref={ref}\n        className={cn(\"w-full border-collapse font-sans text-body-sm\", className)}\n        {...props}\n      >\n        {children}\n      </table>\n    </TableDensityContext.Provider>\n  ),\n);\nRoot.displayName = \"Table\";\n\nconst Header = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <thead\n      ref={ref}\n      className={cn(\n        \"border-border/40 border-b text-label-caps text-muted-foreground uppercase tracking-wider\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nHeader.displayName = \"Table.Header\";\n\nconst Body = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <tbody ref={ref} className={cn(\"text-foreground\", className)} {...props} />\n  ),\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <tr\n      ref={ref}\n      className={cn(\n        \"border-border/20 border-b transition-colors last:border-0 hover:bg-muted/40\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nRow.displayName = \"Table.Row\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  align?: AlignKind;\n  numeric?: boolean;\n}\n\nconst Cell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, align = \"left\", numeric, children, ...props }, ref) => {\n    const density = useContext(TableDensityContext);\n    return (\n      <td\n        ref={ref}\n        className={cn(\n          \"px-3\",\n          density === \"compact\" ? \"py-1.5\" : \"py-3\",\n          alignClass[align],\n          numeric && \"font-mono tabular-nums\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </td>\n    );\n  },\n);\nCell.displayName = \"Table.Cell\";\n\nexport interface TableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  align?: AlignKind;\n  /** When provided, header becomes a sort trigger. */\n  onSort?: () => void;\n  /** Current sort state for this column. */\n  sortDirection?: SortDirection;\n}\n\nconst HeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n  ({ className, align = \"left\", onSort, sortDirection = \"none\", children, ...props }, ref) => {\n    const sortAffordance =\n      onSort !== undefined ? (\n        <span className=\"ml-1 inline-flex flex-col\">\n          <ChevronUp\n            aria-hidden=\"true\"\n            className={cn(\"-mb-1 size-3\", sortDirection === \"asc\" ? \"opacity-100\" : \"opacity-30\")}\n          />\n          <ChevronDown\n            aria-hidden=\"true\"\n            className={cn(\"size-3\", sortDirection === \"desc\" ? \"opacity-100\" : \"opacity-30\")}\n          />\n        </span>\n      ) : null;\n\n    const ariaSort: ThHTMLAttributes<HTMLTableCellElement>[\"aria-sort\"] =\n      onSort === undefined\n        ? undefined\n        : sortDirection === \"asc\"\n          ? \"ascending\"\n          : sortDirection === \"desc\"\n            ? \"descending\"\n            : \"none\";\n\n    return (\n      <th\n        ref={ref}\n        scope=\"col\"\n        aria-sort={ariaSort}\n        className={cn(\n          \"px-3 py-2.5 font-medium\",\n          alignClass[align],\n          align === \"right\" && \"[&_button]:justify-end\",\n          className,\n        )}\n        {...props}\n      >\n        {onSort !== undefined ? (\n          <button\n            type=\"button\"\n            onClick={onSort}\n            className={cn(\n              \"inline-flex items-center gap-1\",\n              \"text-label-caps uppercase tracking-wider\",\n              \"transition-colors hover:text-foreground\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            {children}\n            {sortAffordance}\n          </button>\n        ) : (\n          children\n        )}\n      </th>\n    );\n  },\n);\nHeaderCell.displayName = \"Table.HeaderCell\";\n\ntype TableRoot = typeof Root & {\n  Header: typeof Header;\n  Body: typeof Body;\n  Row: typeof Row;\n  Cell: typeof Cell;\n  HeaderCell: typeof HeaderCell;\n};\n\nconst Table: TableRoot = Object.assign(Root, { Header, Body, Row, Cell, HeaderCell });\n\nexport { Table };\n"
+      "content": "\"use client\";\n\nimport { ChevronDown, ChevronUp } from \"lucide-react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Table — semantic data table primitive with sub-components.\n *\n * Composition:\n *   <Table density=\"default\">\n *     <Table.Header>\n *       <Table.Row>\n *         <Table.HeaderCell>Date</Table.HeaderCell>\n *         <Table.HeaderCell align=\"right\">Amount</Table.HeaderCell>\n *       </Table.Row>\n *     </Table.Header>\n *     <Table.Body>\n *       <Table.Row>\n *         <Table.Cell>2026-05-23</Table.Cell>\n *         <Table.Cell align=\"right\" numeric>$ 42.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Body>\n *   </Table>\n *\n * density propagates via Context so Cells pick up vertical padding without\n * prop drilling. Sub-components are attached as static properties on the\n * root (`Table.Header`, etc.) — single import surface.\n *\n * Sortable header: pass `onSort` + `sortDirection`. The HeaderCell renders\n * the sort affordance (ChevronUp/ChevronDown) and triggers the consumer\n * callback. `sortDirection` without `onSort` is a no-op (header stays\n * static); `sortDirection=\"none\"` with `onSort` shows a dimmed affordance.\n */\n\ntype TableDensity = \"default\" | \"compact\";\ntype AlignKind = \"left\" | \"center\" | \"right\";\ntype SortDirection = \"asc\" | \"desc\" | \"none\";\n\nconst TableDensityContext = createContext<TableDensity>(\"default\");\n\nconst alignClass: Record<AlignKind, string> = {\n  left: \"text-left\",\n  center: \"text-center\",\n  right: \"text-right\",\n};\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  density?: TableDensity;\n}\n\nconst Root = forwardRef<HTMLTableElement, TableProps>(\n  ({ className, density = \"default\", children, ...props }, ref) => (\n    <TableDensityContext.Provider value={density}>\n      <table\n        data-slot=\"table\"\n        ref={ref}\n        className={cn(\"w-full border-collapse font-sans text-body-sm\", className)}\n        {...props}\n      >\n        {children}\n      </table>\n    </TableDensityContext.Provider>\n  ),\n);\nRoot.displayName = \"Table\";\n\nconst Header = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <thead\n      data-slot=\"table-header\"\n      ref={ref}\n      className={cn(\n        \"border-border/40 border-b text-label-caps text-muted-foreground uppercase tracking-wider\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nHeader.displayName = \"Table.Header\";\n\nconst Body = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>(\n  ({ className, ...props }, ref) => (\n    <tbody\n      data-slot=\"table-body\"\n      ref={ref}\n      className={cn(\"text-foreground\", className)}\n      {...props}\n    />\n  ),\n);\nBody.displayName = \"Table.Body\";\n\nconst Row = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(\n  ({ className, ...props }, ref) => (\n    <tr\n      data-slot=\"table-row\"\n      ref={ref}\n      className={cn(\n        \"border-border/20 border-b transition-colors last:border-0 hover:bg-muted/40\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nRow.displayName = \"Table.Row\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n  align?: AlignKind;\n  numeric?: boolean;\n}\n\nconst Cell = forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, align = \"left\", numeric, children, ...props }, ref) => {\n    const density = useContext(TableDensityContext);\n    return (\n      <td\n        data-slot=\"table-cell\"\n        ref={ref}\n        className={cn(\n          \"px-3\",\n          density === \"compact\" ? \"py-1.5\" : \"py-3\",\n          alignClass[align],\n          numeric && \"font-mono tabular-nums\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </td>\n    );\n  },\n);\nCell.displayName = \"Table.Cell\";\n\nexport interface TableHeaderCellProps extends ThHTMLAttributes<HTMLTableCellElement> {\n  align?: AlignKind;\n  /** When provided, header becomes a sort trigger. */\n  onSort?: () => void;\n  /** Current sort state for this column. */\n  sortDirection?: SortDirection;\n}\n\nconst HeaderCell = forwardRef<HTMLTableCellElement, TableHeaderCellProps>(\n  ({ className, align = \"left\", onSort, sortDirection = \"none\", children, ...props }, ref) => {\n    const sortAffordance =\n      onSort !== undefined ? (\n        <span className=\"ml-1 inline-flex flex-col\">\n          <ChevronUp\n            aria-hidden=\"true\"\n            className={cn(\"-mb-1 size-3\", sortDirection === \"asc\" ? \"opacity-100\" : \"opacity-30\")}\n          />\n          <ChevronDown\n            aria-hidden=\"true\"\n            className={cn(\"size-3\", sortDirection === \"desc\" ? \"opacity-100\" : \"opacity-30\")}\n          />\n        </span>\n      ) : null;\n\n    const ariaSort: ThHTMLAttributes<HTMLTableCellElement>[\"aria-sort\"] =\n      onSort === undefined\n        ? undefined\n        : sortDirection === \"asc\"\n          ? \"ascending\"\n          : sortDirection === \"desc\"\n            ? \"descending\"\n            : \"none\";\n\n    return (\n      <th\n        data-slot=\"table-header-cell\"\n        ref={ref}\n        scope=\"col\"\n        aria-sort={ariaSort}\n        className={cn(\n          \"px-3 py-2.5 font-medium\",\n          alignClass[align],\n          align === \"right\" && \"[&_button]:justify-end\",\n          className,\n        )}\n        {...props}\n      >\n        {onSort !== undefined ? (\n          <button\n            type=\"button\"\n            onClick={onSort}\n            className={cn(\n              \"inline-flex items-center gap-1\",\n              \"text-label-caps uppercase tracking-wider\",\n              \"transition-colors hover:text-foreground\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n            )}\n          >\n            {children}\n            {sortAffordance}\n          </button>\n        ) : (\n          children\n        )}\n      </th>\n    );\n  },\n);\nHeaderCell.displayName = \"Table.HeaderCell\";\n\ntype TableRoot = typeof Root & {\n  Header: typeof Header;\n  Body: typeof Body;\n  Row: typeof Row;\n  Cell: typeof Cell;\n  HeaderCell: typeof HeaderCell;\n};\n\nconst Table: TableRoot = Object.assign(Root, { Header, Body, Row, Cell, HeaderCell });\n\nexport { Table };\n"
     }
   ]
 }

package/registry/r/tabs.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/tabs/tabs.tsx",
       "type": "registry:ui",
       "target": "components/ui/tabs.tsx",
-      "content": "import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Tabs — built on Radix Tabs.\n *\n * Visual: underlined active tab in primary (violet), inactive in muted-foreground.\n * Used in project views (Overview / Deployments / Logs / Settings).\n */\n\nconst List = forwardRef<\n  ElementRef<typeof TabsPrimitive.List>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    ref={ref}\n    className={cn(\n      \"inline-flex h-10 items-center border-border/40 border-b text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nList.displayName = \"Tabs.List\";\n\nconst Trigger = forwardRef<\n  ElementRef<typeof TabsPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    ref={ref}\n    className={cn(\n      \"relative inline-flex h-10 items-center justify-center whitespace-nowrap px-4\",\n      \"font-medium font-sans text-body-sm text-muted-foreground\",\n      \"transition-colors duration-base ease-out-soft\",\n      \"hover:text-foreground\",\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:pointer-events-none disabled:opacity-50\",\n      \"data-[state=active]:text-foreground\",\n      // Active underline using a pseudo-element via shadow\n      \"data-[state=active]:shadow-[inset_0_-2px_0_0_hsl(var(--primary))]\",\n      className,\n    )}\n    {...props}\n  />\n));\nTrigger.displayName = \"Tabs.Trigger\";\n\nconst Content = forwardRef<\n  ElementRef<typeof TabsPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    ref={ref}\n    className={cn(\n      \"mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      className,\n    )}\n    {...props}\n  />\n));\nContent.displayName = \"Tabs.Content\";\n\nconst Tabs = /*#__PURE__*/ Object.assign(TabsPrimitive.Root, {\n  List,\n  Trigger,\n  Content,\n});\n\nexport { Tabs };\n"
+      "content": "import * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Tabs — built on Radix Tabs.\n *\n * Visual: underlined active tab in primary (violet), inactive in muted-foreground.\n * Used in project views (Overview / Deployments / Logs / Settings).\n */\n\nconst List = forwardRef<\n  ElementRef<typeof TabsPrimitive.List>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.List\n    data-slot=\"tabs-list\"\n    ref={ref}\n    className={cn(\n      \"inline-flex h-10 items-center border-border/40 border-b text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n));\nList.displayName = \"Tabs.List\";\n\nconst Trigger = forwardRef<\n  ElementRef<typeof TabsPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Trigger\n    data-slot=\"tabs-trigger\"\n    ref={ref}\n    className={cn(\n      \"relative inline-flex h-10 items-center justify-center whitespace-nowrap px-4\",\n      \"font-medium font-sans text-body-sm text-muted-foreground\",\n      \"transition-colors duration-base ease-out-soft\",\n      \"hover:text-foreground\",\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:pointer-events-none disabled:opacity-50\",\n      \"data-[state=active]:text-foreground\",\n      // Active underline using a pseudo-element via shadow\n      \"data-[state=active]:shadow-[inset_0_-2px_0_0_hsl(var(--primary))]\",\n      className,\n    )}\n    {...props}\n  />\n));\nTrigger.displayName = \"Tabs.Trigger\";\n\nconst Content = forwardRef<\n  ElementRef<typeof TabsPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => (\n  <TabsPrimitive.Content\n    data-slot=\"tabs-content\"\n    ref={ref}\n    className={cn(\n      \"mt-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n      className,\n    )}\n    {...props}\n  />\n));\nContent.displayName = \"Tabs.Content\";\n\nconst Tabs = /*#__PURE__*/ Object.assign(TabsPrimitive.Root, {\n  List,\n  Trigger,\n  Content,\n});\n\nexport { Tabs };\n"
     }
   ]
 }

package/registry/r/tailwind-preset.json

@@ -13,7 +13,7 @@
       "path": "styles/tailwind-preset.ts",
       "type": "registry:lib",
       "target": "styles/tailwind-preset.ts",
-      "content": "/**\n * Theo UI Tailwind preset — Violet Forge identity.\n *\n * Single source of truth for the design system's utility-level tokens:\n *   - colors mapped to CSS variables (HSL split via `hsl(var(--x) / <alpha>)`)\n *   - Geist-inspired typescale (display / title / body / label / code tiers)\n *   - radii, shadows, motion timing & duration, keyframes\n *   - tailwindcss-animate plugin\n *\n * Consumed by:\n *   - `tailwind.config.ts` (this repo) via `presets: [theoUIPreset]`\n *   - registry/r/tailwind-preset.json (shipped to consumers via shadcn CLI)\n *\n * Consumers integrate as:\n *\n *   import type { Config } from \"tailwindcss\";\n *   import { theoUIPreset } from \"./styles/tailwind-preset\";\n *\n *   export default {\n *     darkMode: \"class\",\n *     content: [\"./src/**\\/*.{ts,tsx}\"],\n *     presets: [theoUIPreset],\n *   } satisfies Config;\n *\n * Note: `darkMode` and `content` are NOT in the preset — they are consumer\n * decisions. The preset only contains `theme.extend.*` and `plugins`.\n */\n\nimport type { Config } from \"tailwindcss\";\nimport animate from \"tailwindcss-animate\";\n\nconst hsl = (token: string) => `hsl(var(${token}) / <alpha-value>)`;\n\nexport const theoUIPreset: Partial<Config> = {\n  theme: {\n    container: {\n      center: true,\n      padding: \"1rem\",\n      screens: {\n        \"2xl\": \"1280px\",\n      },\n    },\n    extend: {\n      colors: {\n        background: hsl(\"--background\"),\n        foreground: hsl(\"--foreground\"),\n        card: {\n          DEFAULT: hsl(\"--card\"),\n          foreground: hsl(\"--card-foreground\"),\n        },\n        popover: {\n          DEFAULT: hsl(\"--popover\"),\n          foreground: hsl(\"--popover-foreground\"),\n        },\n        primary: {\n          DEFAULT: hsl(\"--primary\"),\n          deep: hsl(\"--primary-deep\"),\n          glow: hsl(\"--primary-glow\"),\n          foreground: hsl(\"--primary-foreground\"),\n        },\n        secondary: {\n          DEFAULT: hsl(\"--secondary\"),\n          foreground: hsl(\"--secondary-foreground\"),\n        },\n        accent: {\n          DEFAULT: hsl(\"--accent\"),\n          deep: hsl(\"--accent-deep\"),\n          foreground: hsl(\"--accent-foreground\"),\n        },\n        muted: {\n          DEFAULT: hsl(\"--muted\"),\n          foreground: hsl(\"--muted-foreground\"),\n        },\n        success: {\n          DEFAULT: hsl(\"--success\"),\n          foreground: hsl(\"--success-foreground\"),\n        },\n        warning: {\n          DEFAULT: hsl(\"--warning\"),\n          foreground: hsl(\"--warning-foreground\"),\n        },\n        destructive: {\n          DEFAULT: hsl(\"--destructive\"),\n          foreground: hsl(\"--destructive-foreground\"),\n        },\n        info: {\n          DEFAULT: hsl(\"--info\"),\n          foreground: hsl(\"--info-foreground\"),\n        },\n        border: hsl(\"--border\"),\n        input: hsl(\"--input\"),\n        ring: hsl(\"--ring\"),\n      },\n      fontFamily: {\n        display: \"var(--font-display)\",\n        sans: \"var(--font-body)\",\n        mono: \"var(--font-mono)\",\n      },\n      /* Geist-inspired Violet Forge typescale.\n       *\n       * Three strict weights: 400 (body), 500 (UI), 600 (display/headings).\n       * Letter-spacing scales with size — aggressive negative on display.\n       * Mirrors the Vercel/Geist vocabulary while keeping Theo's identity.\n       */\n      fontSize: {\n        // Display tier — aggressive compression, content-led headlines\n        \"display-2xl\": [\"64px\", { lineHeight: \"1\", letterSpacing: \"-0.0464em\", fontWeight: \"600\" }],\n        \"display-xl\": [\"48px\", { lineHeight: \"1.05\", letterSpacing: \"-0.05em\", fontWeight: \"600\" }],\n        \"display-lg\": [\"40px\", { lineHeight: \"1.1\", letterSpacing: \"-0.05em\", fontWeight: \"600\" }],\n        \"display-md\": [\"32px\", { lineHeight: \"1.2\", letterSpacing: \"-0.04em\", fontWeight: \"600\" }],\n        headline: [\"28px\", { lineHeight: \"1.25\", letterSpacing: \"-0.035em\", fontWeight: \"600\" }],\n        // Title tier — section / card heads\n        \"title-lg\": [\"24px\", { lineHeight: \"1.33\", letterSpacing: \"-0.04em\", fontWeight: \"600\" }],\n        \"title-md\": [\"20px\", { lineHeight: \"1.4\", letterSpacing: \"-0.03em\", fontWeight: \"600\" }],\n        // Body tier — FAANG-density realignment 2026-05-22: body-md is the\n        // industry-standard 14px (shadcn / Vercel Geist / Linear / Stripe /\n        // Mantine). The previous 15px was idiosyncratic. body-sm (14px label\n        // weight) remains separate via its line-height / weight signature.\n        \"body-lg\": [\"18px\", { lineHeight: \"1.56\", letterSpacing: \"-0.01em\", fontWeight: \"400\" }],\n        \"body-md\": [\"14px\", { lineHeight: \"1.43\", letterSpacing: \"0\", fontWeight: \"400\" }],\n        \"body-sm\": [\"13px\", { lineHeight: \"1.46\", fontWeight: \"400\" }],\n        // Label tier — used on buttons, nav, secondary actions\n        label: [\"14px\", { lineHeight: \"1.43\", fontWeight: \"500\" }],\n        \"label-caps\": [\"12px\", { lineHeight: \"1.33\", letterSpacing: \"0.04em\", fontWeight: \"500\" }],\n        // Mono — code surfaces, technical labels\n        \"code-md\": [\"14px\", { lineHeight: \"1.5\", fontWeight: \"400\" }],\n        \"code-sm\": [\"13px\", { lineHeight: \"1.54\", fontWeight: \"500\" }],\n      },\n      borderRadius: {\n        none: \"var(--radius-none)\",\n        sm: \"var(--radius-sm)\",\n        md: \"var(--radius-md)\",\n        lg: \"var(--radius-lg)\",\n        xl: \"var(--radius-xl)\",\n        \"2xl\": \"var(--radius-2xl)\",\n        full: \"var(--radius-full)\",\n      },\n      boxShadow: {\n        sm: \"var(--shadow-sm)\",\n        md: \"var(--shadow-md)\",\n        lg: \"var(--shadow-lg)\",\n        glow: \"var(--shadow-glow)\",\n        \"glow-strong\": \"var(--shadow-glow-strong)\",\n      },\n      transitionTimingFunction: {\n        \"out-soft\": \"var(--ease-out-soft)\",\n        snap: \"var(--ease-snap)\",\n      },\n      transitionDuration: {\n        fast: \"var(--duration-fast)\",\n        base: \"var(--duration-base)\",\n        slow: \"var(--duration-slow)\",\n      },\n      keyframes: {\n        \"fade-in-up\": {\n          \"0%\": { opacity: \"0\", transform: \"translateY(8px)\" },\n          \"100%\": { opacity: \"1\", transform: \"translateY(0)\" },\n        },\n        \"pulse-glow\": {\n          \"0%, 100%\": { boxShadow: \"0 0 0 0 hsl(var(--primary) / 0.5)\" },\n          \"50%\": { boxShadow: \"0 0 0 8px hsl(var(--primary) / 0)\" },\n        },\n      },\n      animation: {\n        \"fade-in-up\": \"fade-in-up var(--duration-base) var(--ease-out-soft) both\",\n        \"pulse-glow\": \"pulse-glow 1.5s var(--ease-in-out) infinite\",\n      },\n    },\n  },\n  plugins: [animate],\n};\n"
+      "content": "/**\n * Theo UI Tailwind preset — Violet Forge identity.\n *\n * Single source of truth for the design system's utility-level tokens:\n *   - colors mapped to CSS variables (HSL split via `hsl(var(--x) / <alpha>)`)\n *   - Geist-inspired typescale (display / title / body / label / code tiers)\n *   - radii, shadows, motion timing & duration, keyframes\n *   - tailwindcss-animate plugin\n *\n * Consumed by:\n *   - `tailwind.config.ts` (this repo) via `presets: [theoUIPreset]`\n *   - registry/r/tailwind-preset.json (shipped to consumers via shadcn CLI)\n *\n * Consumers integrate as:\n *\n *   import type { Config } from \"tailwindcss\";\n *   import { theoUIPreset } from \"./styles/tailwind-preset\";\n *\n *   export default {\n *     darkMode: \"class\",\n *     content: [\"./src/**\\/*.{ts,tsx}\"],\n *     presets: [theoUIPreset],\n *   } satisfies Config;\n *\n * Note: `darkMode` and `content` are NOT in the preset — they are consumer\n * decisions. The preset only contains `theme.extend.*` and `plugins`.\n */\n\nimport type { Config } from \"tailwindcss\";\nimport animate from \"tailwindcss-animate\";\n\n// Post-T2.4 (ADR-0005): tokens are OKLCH. The previous `hsl(var(--x) / <alpha>)`\n// pattern resolves to `hsl(oklch(...))` which is invalid CSS — utilities\n// silently fall back to transparent. OKLCH relative-color syntax preserves\n// Tailwind's `<alpha-value>` slot for opacity modifiers (e.g. `bg-primary/50`).\nconst hsl = (token: string) => `oklch(from var(${token}) l c h / <alpha-value>)`;\n\nexport const theoUIPreset: Partial<Config> = {\n  theme: {\n    container: {\n      center: true,\n      padding: \"1rem\",\n      screens: {\n        \"2xl\": \"1280px\",\n      },\n    },\n    extend: {\n      colors: {\n        background: hsl(\"--background\"),\n        foreground: hsl(\"--foreground\"),\n        card: {\n          DEFAULT: hsl(\"--card\"),\n          foreground: hsl(\"--card-foreground\"),\n        },\n        popover: {\n          DEFAULT: hsl(\"--popover\"),\n          foreground: hsl(\"--popover-foreground\"),\n        },\n        primary: {\n          DEFAULT: hsl(\"--primary\"),\n          deep: hsl(\"--primary-deep\"),\n          glow: hsl(\"--primary-glow\"),\n          foreground: hsl(\"--primary-foreground\"),\n        },\n        secondary: {\n          DEFAULT: hsl(\"--secondary\"),\n          foreground: hsl(\"--secondary-foreground\"),\n        },\n        accent: {\n          DEFAULT: hsl(\"--accent\"),\n          deep: hsl(\"--accent-deep\"),\n          foreground: hsl(\"--accent-foreground\"),\n        },\n        muted: {\n          DEFAULT: hsl(\"--muted\"),\n          foreground: hsl(\"--muted-foreground\"),\n        },\n        success: {\n          DEFAULT: hsl(\"--success\"),\n          foreground: hsl(\"--success-foreground\"),\n        },\n        warning: {\n          DEFAULT: hsl(\"--warning\"),\n          foreground: hsl(\"--warning-foreground\"),\n        },\n        destructive: {\n          DEFAULT: hsl(\"--destructive\"),\n          foreground: hsl(\"--destructive-foreground\"),\n        },\n        info: {\n          DEFAULT: hsl(\"--info\"),\n          foreground: hsl(\"--info-foreground\"),\n        },\n        // Status palette (online/offline/degraded/info) consumed by\n        // StatusIndicator via `bg-status-*`. The `--status-*` tokens already\n        // live in tokens.css; this block was missing from the v3 preset (only\n        // the v4 `@theme` declared `--color-status-*`), so `bg-status-online`\n        // resolved to nothing in the v3/Ladle build — transparent dots.\n        status: {\n          online: {\n            DEFAULT: hsl(\"--status-online\"),\n            foreground: hsl(\"--status-online-foreground\"),\n          },\n          offline: {\n            DEFAULT: hsl(\"--status-offline\"),\n            foreground: hsl(\"--status-offline-foreground\"),\n          },\n          degraded: {\n            DEFAULT: hsl(\"--status-degraded\"),\n            foreground: hsl(\"--status-degraded-foreground\"),\n          },\n          info: { DEFAULT: hsl(\"--status-info\"), foreground: hsl(\"--status-info-foreground\") },\n        },\n        border: hsl(\"--border\"),\n        input: hsl(\"--input\"),\n        ring: hsl(\"--ring\"),\n      },\n      fontFamily: {\n        display: \"var(--font-display)\",\n        sans: \"var(--font-body)\",\n        mono: \"var(--font-mono)\",\n      },\n      /* Geist-inspired Violet Forge typescale.\n       *\n       * Three strict weights: 400 (body), 500 (UI), 600 (display/headings).\n       * Letter-spacing scales with size — aggressive negative on display.\n       * Mirrors the Vercel/Geist vocabulary while keeping Theo's identity.\n       */\n      fontSize: {\n        // Display tier — aggressive compression, content-led headlines\n        \"display-2xl\": [\"64px\", { lineHeight: \"1\", letterSpacing: \"-0.0464em\", fontWeight: \"600\" }],\n        \"display-xl\": [\"48px\", { lineHeight: \"1.05\", letterSpacing: \"-0.05em\", fontWeight: \"600\" }],\n        \"display-lg\": [\"40px\", { lineHeight: \"1.1\", letterSpacing: \"-0.05em\", fontWeight: \"600\" }],\n        \"display-md\": [\"32px\", { lineHeight: \"1.2\", letterSpacing: \"-0.04em\", fontWeight: \"600\" }],\n        headline: [\"28px\", { lineHeight: \"1.25\", letterSpacing: \"-0.035em\", fontWeight: \"600\" }],\n        // Title tier — section / card heads\n        \"title-lg\": [\"24px\", { lineHeight: \"1.33\", letterSpacing: \"-0.04em\", fontWeight: \"600\" }],\n        \"title-md\": [\"20px\", { lineHeight: \"1.4\", letterSpacing: \"-0.03em\", fontWeight: \"600\" }],\n        // Body tier — FAANG-density realignment 2026-05-22: body-md is the\n        // industry-standard 14px (shadcn / Vercel Geist / Linear / Stripe /\n        // Mantine). The previous 15px was idiosyncratic. body-sm (14px label\n        // weight) remains separate via its line-height / weight signature.\n        \"body-lg\": [\"18px\", { lineHeight: \"1.56\", letterSpacing: \"-0.01em\", fontWeight: \"400\" }],\n        \"body-md\": [\"14px\", { lineHeight: \"1.43\", letterSpacing: \"0\", fontWeight: \"400\" }],\n        \"body-sm\": [\"13px\", { lineHeight: \"1.46\", fontWeight: \"400\" }],\n        // Label tier — used on buttons, nav, secondary actions\n        label: [\"14px\", { lineHeight: \"1.43\", fontWeight: \"500\" }],\n        \"label-caps\": [\"12px\", { lineHeight: \"1.33\", letterSpacing: \"0.04em\", fontWeight: \"500\" }],\n        // Mono — code surfaces, technical labels\n        \"code-md\": [\"14px\", { lineHeight: \"1.5\", fontWeight: \"400\" }],\n        \"code-sm\": [\"13px\", { lineHeight: \"1.54\", fontWeight: \"500\" }],\n      },\n      borderRadius: {\n        none: \"var(--radius-none)\",\n        sm: \"var(--radius-sm)\",\n        md: \"var(--radius-md)\",\n        lg: \"var(--radius-lg)\",\n        xl: \"var(--radius-xl)\",\n        \"2xl\": \"var(--radius-2xl)\",\n        full: \"var(--radius-full)\",\n      },\n      boxShadow: {\n        sm: \"var(--shadow-sm)\",\n        md: \"var(--shadow-md)\",\n        lg: \"var(--shadow-lg)\",\n        glow: \"var(--shadow-glow)\",\n        \"glow-strong\": \"var(--shadow-glow-strong)\",\n      },\n      transitionTimingFunction: {\n        \"out-soft\": \"var(--ease-out-soft)\",\n        snap: \"var(--ease-snap)\",\n      },\n      transitionDuration: {\n        fast: \"var(--duration-fast)\",\n        base: \"var(--duration-base)\",\n        slow: \"var(--duration-slow)\",\n      },\n      keyframes: {\n        \"fade-in-up\": {\n          \"0%\": { opacity: \"0\", transform: \"translateY(8px)\" },\n          \"100%\": { opacity: \"1\", transform: \"translateY(0)\" },\n        },\n        \"pulse-glow\": {\n          \"0%, 100%\": { boxShadow: \"0 0 0 0 hsl(var(--primary) / 0.5)\" },\n          \"50%\": { boxShadow: \"0 0 0 8px hsl(var(--primary) / 0)\" },\n        },\n      },\n      animation: {\n        \"fade-in-up\": \"fade-in-up var(--duration-base) var(--ease-out-soft) both\",\n        \"pulse-glow\": \"pulse-glow 1.5s var(--ease-in-out) infinite\",\n      },\n    },\n  },\n  plugins: [animate],\n};\n"
     }
   ]
 }

package/registry/r/task-header.json

@@ -18,7 +18,7 @@
       "path": "components/composites/task-header/task-header.tsx",
       "type": "registry:ui",
       "target": "components/ui/task-header.tsx",
-      "content": "import { ChevronDown } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { TaskStatus } from \"@/types/task\";\nimport { Badge } from \"@/components/ui/badge\";\n\nconst statusVariant: Record<\n  TaskStatus,\n  \"default\" | \"primary\" | \"warning\" | \"success\" | \"destructive\"\n> = {\n  idle: \"default\",\n  permission_required: \"warning\",\n  starting: \"primary\",\n  running: \"primary\",\n  verifying: \"primary\",\n  completed: \"success\",\n  failed: \"destructive\",\n};\nconst statusDot: Record<TaskStatus, \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"> = {\n  idle: \"muted\",\n  permission_required: \"warning\",\n  starting: \"primary\",\n  running: \"primary\",\n  verifying: \"primary\",\n  completed: \"success\",\n  failed: \"destructive\",\n};\nconst statusLabel: Record<TaskStatus, string> = {\n  idle: \"Idle\",\n  permission_required: \"Permission required\",\n  starting: \"Starting up\",\n  running: \"Running\",\n  verifying: \"Verifying\",\n  completed: \"Completed\",\n  failed: \"Failed\",\n};\n\ninterface TaskHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title: ReactNode;\n  status?: TaskStatus;\n  /**\n   * If provided, a chevron is shown next to the title and clicking it fires this callback.\n   * Used as the \"expand task metadata\" affordance in the Infra shell.\n   */\n  onToggle?: () => void;\n  /** Right-side actions (e.g. cancel task, close panel). */\n  actions?: ReactNode;\n}\n\n/**\n * TaskHeader — title bar for a task pane.\n *\n * Visual: display-md title with chevron + optional status badge with pulse + actions slot.\n */\nconst TaskHeader = forwardRef<HTMLElement, TaskHeaderProps>(\n  ({ className, title, status, onToggle, actions, ...props }, ref) => (\n    <header\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-between gap-3 rounded-xl border border-border/40 bg-card px-4 py-3\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <h2 className=\"truncate font-display text-title-lg tracking-tight\">{title}</h2>\n        {onToggle ? (\n          <button\n            type=\"button\"\n            onClick={onToggle}\n            aria-label=\"Toggle task details\"\n            className=\"rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <ChevronDown className=\"size-4\" />\n          </button>\n        ) : null}\n      </div>\n      <div className=\"flex items-center gap-2\">\n        {status ? (\n          <Badge variant={statusVariant[status]}>\n            <Badge.Dot\n              tone={statusDot[status]}\n              pulse={status === \"running\" || status === \"starting\" || status === \"verifying\"}\n            />\n            {statusLabel[status]}\n          </Badge>\n        ) : null}\n        {actions}\n      </div>\n    </header>\n  ),\n);\nTaskHeader.displayName = \"TaskHeader\";\n\nexport { TaskHeader };\n"
+      "content": "import { ChevronDown } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { TaskStatus } from \"@/types/task\";\nimport { Badge } from \"@/components/ui/badge\";\n\nconst statusVariant: Record<\n  TaskStatus,\n  \"default\" | \"primary\" | \"warning\" | \"success\" | \"destructive\"\n> = {\n  idle: \"default\",\n  permission_required: \"warning\",\n  starting: \"primary\",\n  running: \"primary\",\n  verifying: \"primary\",\n  completed: \"success\",\n  failed: \"destructive\",\n};\nconst statusDot: Record<TaskStatus, \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"> = {\n  idle: \"muted\",\n  permission_required: \"warning\",\n  starting: \"primary\",\n  running: \"primary\",\n  verifying: \"primary\",\n  completed: \"success\",\n  failed: \"destructive\",\n};\nconst statusLabel: Record<TaskStatus, string> = {\n  idle: \"Idle\",\n  permission_required: \"Permission required\",\n  starting: \"Starting up\",\n  running: \"Running\",\n  verifying: \"Verifying\",\n  completed: \"Completed\",\n  failed: \"Failed\",\n};\n\ninterface TaskHeaderProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title: ReactNode;\n  status?: TaskStatus;\n  /**\n   * If provided, a chevron is shown next to the title and clicking it fires this callback.\n   * Used as the \"expand task metadata\" affordance in the Infra shell.\n   */\n  onToggle?: () => void;\n  /** Right-side actions (e.g. cancel task, close panel). */\n  actions?: ReactNode;\n}\n\n/**\n * TaskHeader — title bar for a task pane.\n *\n * Visual: display-md title with chevron + optional status badge with pulse + actions slot.\n */\nconst TaskHeader = forwardRef<HTMLElement, TaskHeaderProps>(\n  ({ className, title, status, onToggle, actions, ...props }, ref) => (\n    <header\n      data-slot=\"task-header\"\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-between gap-3 rounded-xl border border-border/40 bg-card px-4 py-3\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <h2 className=\"truncate font-display text-title-lg tracking-tight\">{title}</h2>\n        {onToggle ? (\n          <button\n            type=\"button\"\n            onClick={onToggle}\n            aria-label=\"Toggle task details\"\n            className=\"rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n          >\n            <ChevronDown className=\"size-4\" />\n          </button>\n        ) : null}\n      </div>\n      <div className=\"flex items-center gap-2\">\n        {status ? (\n          <Badge variant={statusVariant[status]}>\n            <Badge.Dot\n              tone={statusDot[status]}\n              pulse={status === \"running\" || status === \"starting\" || status === \"verifying\"}\n            />\n            {statusLabel[status]}\n          </Badge>\n        ) : null}\n        {actions}\n      </div>\n    </header>\n  ),\n);\nTaskHeader.displayName = \"TaskHeader\";\n\nexport { TaskHeader };\n"
     }
   ]
 }

package/registry/r/task-plan.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/task-plan/task-plan.tsx",
       "type": "registry:ui",
       "target": "components/ui/task-plan.tsx",
-      "content": "import { CheckCircle2, Circle, CircleDashed, CircleX, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type PlanNodeStatus = \"pending\" | \"running\" | \"done\" | \"skipped\" | \"failed\";\n\nexport interface PlanNode {\n  id: string;\n  label: string;\n  status: PlanNodeStatus;\n  /** Optional details / sub-explanation. */\n  detail?: string;\n  /** Sub-nodes (rendered indented). */\n  children?: PlanNode[];\n}\n\nconst STATUS_ICON = {\n  pending: CircleDashed,\n  running: Loader2,\n  done: CheckCircle2,\n  skipped: Circle,\n  failed: CircleX,\n} as const;\n\nconst STATUS_COLOR: Record<PlanNodeStatus, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-primary\",\n  done: \"text-success\",\n  skipped: \"text-muted-foreground/60\",\n  failed: \"text-destructive\",\n};\n\nconst LABEL_STYLE: Record<PlanNodeStatus, string> = {\n  pending: \"text-foreground\",\n  running: \"text-foreground\",\n  done: \"text-foreground line-through decoration-muted-foreground/40\",\n  skipped: \"text-muted-foreground line-through\",\n  failed: \"text-destructive\",\n};\n\ninterface TaskNodeProps extends HTMLAttributes<HTMLLIElement> {\n  node: PlanNode;\n  depth?: number;\n}\n\n/**\n * TaskNode — single row in a task plan. Renders its own children recursively\n * with increasing indentation.\n */\nconst TaskNode = forwardRef<HTMLLIElement, TaskNodeProps>(\n  ({ className, node, depth = 0, ...props }, ref) => {\n    const Icon = STATUS_ICON[node.status];\n    return (\n      <li\n        ref={ref}\n        className={cn(\"grid gap-1\", className)}\n        style={{ marginLeft: `${depth * 1.25}rem` }}\n        {...props}\n      >\n        <div className=\"grid grid-cols-[auto_1fr] items-baseline gap-2\">\n          <Icon\n            aria-hidden=\"true\"\n            className={cn(\n              \"mt-0.5 size-3.5 shrink-0\",\n              STATUS_COLOR[node.status],\n              node.status === \"running\" && \"animate-spin\",\n            )}\n          />\n          <div className=\"min-w-0\">\n            <p className={cn(\"text-body-sm\", LABEL_STYLE[node.status])}>{node.label}</p>\n            {node.detail ? (\n              <p className=\"text-body-sm text-muted-foreground\">{node.detail}</p>\n            ) : null}\n          </div>\n        </div>\n        {node.children && node.children.length > 0 ? (\n          <ul className=\"grid gap-1 border-border/30 border-l pl-2\">\n            {node.children.map((child) => (\n              <TaskNode key={child.id} node={child} depth={depth + 1} />\n            ))}\n          </ul>\n        ) : null}\n      </li>\n    );\n  },\n);\nTaskNode.displayName = \"TaskNode\";\n\ninterface TaskPlanProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  nodes: PlanNode[];\n  /** Header title. */\n  title?: ReactNode;\n  /** Summary line shown next to the title (e.g. \"3 of 7 done\"). */\n  summary?: ReactNode;\n}\n\n/**\n * TaskPlan — hierarchical task plan, à la Claude \"plan mode\".\n *\n * The agent emits a structured plan; the user sees each step progress from\n * pending → running → done (or failed/skipped). Children render with one\n * extra indent level and a left border to suggest hierarchy.\n */\nconst TaskPlan = forwardRef<HTMLElement, TaskPlanProps>(\n  ({ className, nodes, title = \"Plan\", summary, ...props }, ref) => {\n    const auto = nodes.length;\n    const done = nodes.filter((n) => n.status === \"done\").length;\n    const computedSummary = summary ?? (auto > 0 ? `${done} of ${auto} done` : \"no steps\");\n    return (\n      <section ref={ref} className={cn(\"rounded-xl border bg-card p-4\", className)} {...props}>\n        <header className=\"mb-3 flex items-baseline justify-between gap-3\">\n          {title ? (\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          ) : (\n            <span />\n          )}\n          <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n            {computedSummary}\n          </span>\n        </header>\n        <ul className=\"grid gap-1.5\">\n          {nodes.map((node) => (\n            <TaskNode key={node.id} node={node} />\n          ))}\n        </ul>\n      </section>\n    );\n  },\n);\nTaskPlan.displayName = \"TaskPlan\";\n\nexport { TaskNode, TaskPlan };\n"
+      "content": "import { CheckCircle2, Circle, CircleDashed, CircleX, Loader2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type PlanNodeStatus = \"pending\" | \"running\" | \"done\" | \"skipped\" | \"failed\";\n\nexport interface PlanNode {\n  id: string;\n  label: string;\n  status: PlanNodeStatus;\n  /** Optional details / sub-explanation. */\n  detail?: string;\n  /** Sub-nodes (rendered indented). */\n  children?: PlanNode[];\n}\n\nconst STATUS_ICON = {\n  pending: CircleDashed,\n  running: Loader2,\n  done: CheckCircle2,\n  skipped: Circle,\n  failed: CircleX,\n} as const;\n\nconst STATUS_COLOR: Record<PlanNodeStatus, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-primary\",\n  done: \"text-success\",\n  skipped: \"text-muted-foreground/60\",\n  failed: \"text-destructive\",\n};\n\nconst LABEL_STYLE: Record<PlanNodeStatus, string> = {\n  pending: \"text-foreground\",\n  running: \"text-foreground\",\n  done: \"text-foreground line-through decoration-muted-foreground/40\",\n  skipped: \"text-muted-foreground line-through\",\n  failed: \"text-destructive\",\n};\n\ninterface TaskNodeProps extends HTMLAttributes<HTMLLIElement> {\n  node: PlanNode;\n  depth?: number;\n}\n\n/**\n * TaskNode — single row in a task plan. Renders its own children recursively\n * with increasing indentation.\n */\nconst TaskNode = forwardRef<HTMLLIElement, TaskNodeProps>(\n  ({ className, node, depth = 0, ...props }, ref) => {\n    const Icon = STATUS_ICON[node.status];\n    return (\n      <li\n        data-slot=\"task-node\"\n        ref={ref}\n        className={cn(\"grid gap-1\", className)}\n        style={{ marginLeft: `${depth * 1.25}rem` }}\n        {...props}\n      >\n        <div className=\"grid grid-cols-[auto_1fr] items-baseline gap-2\">\n          <Icon\n            aria-hidden=\"true\"\n            className={cn(\n              \"mt-0.5 size-3.5 shrink-0\",\n              STATUS_COLOR[node.status],\n              node.status === \"running\" && \"animate-spin\",\n            )}\n          />\n          <div className=\"min-w-0\">\n            <p className={cn(\"text-body-sm\", LABEL_STYLE[node.status])}>{node.label}</p>\n            {node.detail ? (\n              <p className=\"text-body-sm text-muted-foreground\">{node.detail}</p>\n            ) : null}\n          </div>\n        </div>\n        {node.children && node.children.length > 0 ? (\n          <ul className=\"grid gap-1 border-border/30 border-l pl-2\">\n            {node.children.map((child) => (\n              <TaskNode key={child.id} node={child} depth={depth + 1} />\n            ))}\n          </ul>\n        ) : null}\n      </li>\n    );\n  },\n);\nTaskNode.displayName = \"TaskNode\";\n\ninterface TaskPlanProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  nodes: PlanNode[];\n  /** Header title. */\n  title?: ReactNode;\n  /** Summary line shown next to the title (e.g. \"3 of 7 done\"). */\n  summary?: ReactNode;\n}\n\n/**\n * TaskPlan — hierarchical task plan, à la Claude \"plan mode\".\n *\n * The agent emits a structured plan; the user sees each step progress from\n * pending → running → done (or failed/skipped). Children render with one\n * extra indent level and a left border to suggest hierarchy.\n */\nconst TaskPlan = forwardRef<HTMLElement, TaskPlanProps>(\n  ({ className, nodes, title = \"Plan\", summary, ...props }, ref) => {\n    const auto = nodes.length;\n    const done = nodes.filter((n) => n.status === \"done\").length;\n    const computedSummary = summary ?? (auto > 0 ? `${done} of ${auto} done` : \"no steps\");\n    return (\n      <section\n        data-slot=\"task-plan\"\n        ref={ref}\n        className={cn(\"rounded-xl border bg-card p-4\", className)}\n        {...props}\n      >\n        <header className=\"mb-3 flex items-baseline justify-between gap-3\">\n          {title ? (\n            <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n          ) : (\n            <span />\n          )}\n          <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n            {computedSummary}\n          </span>\n        </header>\n        <ul className=\"grid gap-1.5\">\n          {nodes.map((node) => (\n            <TaskNode key={node.id} node={node} />\n          ))}\n        </ul>\n      </section>\n    );\n  },\n);\nTaskPlan.displayName = \"TaskPlan\";\n\nexport { TaskNode, TaskPlan };\n"
     }
   ]
 }

package/registry/r/terminal-panel.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/terminal-panel/terminal-panel.tsx",
       "type": "registry:ui",
       "target": "components/ui/terminal-panel.tsx",
-      "content": "import { Terminal as TerminalIcon } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\nexport interface TerminalLine {\n  id: string;\n  /**\n   * Visual kind: command (prompted), stdout, stderr, ok (success), prompt (active line).\n   */\n  kind?: \"command\" | \"stdout\" | \"stderr\" | \"ok\" | \"prompt\";\n  content: ReactNode;\n}\n\ninterface TerminalPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  lines: TerminalLine[];\n  /**\n   * Optional prompt prefix for commands, defaults to \"$\".\n   */\n  promptPrefix?: string;\n  /**\n   * Live-region politeness for screen readers. Use `\"polite\"` when streaming\n   * fresh output so assistive tech announces new lines without interrupting.\n   * Default `\"off\"` for static / historical views.\n   */\n  live?: \"off\" | \"polite\";\n}\n\nconst kindColor: Record<NonNullable<TerminalLine[\"kind\"]>, string> = {\n  command: \"text-foreground\",\n  stdout: \"text-muted-foreground\",\n  stderr: \"text-destructive\",\n  ok: \"text-success\",\n  prompt: \"text-primary\",\n};\n\n/**\n * TerminalPanel — minimal terminal output viewer.\n *\n * Visual: dark card with mono font, \"$ \" prefix on command lines, color-coded\n * stdout/stderr/success. No interactivity (read-only) — pair with your own\n * pty/xterm for live shells if needed.\n */\nconst TerminalPanel = forwardRef<HTMLDivElement, TerminalPanelProps>(\n  ({ className, title = \"Terminal\", lines, promptPrefix = \"$\", live = \"off\", ...props }, ref) => {\n    // T4.1 (MF-4): suppress own aria-live when nested in container live region.\n    const inLiveRegion = useInLiveRegion();\n    const effectiveLive = inLiveRegion ? \"off\" : live;\n    return (\n      <div\n        ref={ref}\n        className={cn(\"overflow-hidden rounded-xl border bg-card\", className)}\n        {...props}\n      >\n        <header className=\"flex items-center gap-2 border-border/40 border-b px-3 py-2\">\n          <TerminalIcon className=\"size-3.5 text-muted-foreground\" aria-hidden=\"true\" />\n          <span className=\"font-sans text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {title}\n          </span>\n        </header>\n        <ol\n          className=\"grid gap-0.5 px-3 py-2 font-mono text-code-sm\"\n          aria-live={effectiveLive}\n          aria-atomic=\"false\"\n        >\n          {lines.map((line) => {\n            const kind = line.kind ?? \"stdout\";\n            return (\n              <li key={line.id} className={cn(\"whitespace-pre-wrap\", kindColor[kind])}>\n                {kind === \"command\" ? (\n                  <>\n                    <span className=\"select-none text-primary\">{promptPrefix} </span>\n                    {line.content}\n                  </>\n                ) : kind === \"prompt\" ? (\n                  <span className=\"motion-safe:animate-pulse\">{line.content}</span>\n                ) : (\n                  line.content\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n    );\n  },\n);\nTerminalPanel.displayName = \"TerminalPanel\";\n\nexport { TerminalPanel };\n"
+      "content": "import { Terminal as TerminalIcon } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { useInLiveRegion } from \"@/lib/live-region-context\";\n\nexport interface TerminalLine {\n  id: string;\n  /**\n   * Visual kind: command (prompted), stdout, stderr, ok (success), prompt (active line).\n   */\n  kind?: \"command\" | \"stdout\" | \"stderr\" | \"ok\" | \"prompt\";\n  content: ReactNode;\n}\n\ninterface TerminalPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: ReactNode;\n  lines: TerminalLine[];\n  /**\n   * Optional prompt prefix for commands, defaults to \"$\".\n   */\n  promptPrefix?: string;\n  /**\n   * Live-region politeness for screen readers. Use `\"polite\"` when streaming\n   * fresh output so assistive tech announces new lines without interrupting.\n   * Default `\"off\"` for static / historical views.\n   */\n  live?: \"off\" | \"polite\";\n}\n\nconst kindColor: Record<NonNullable<TerminalLine[\"kind\"]>, string> = {\n  command: \"text-foreground\",\n  stdout: \"text-muted-foreground\",\n  stderr: \"text-destructive\",\n  ok: \"text-success\",\n  prompt: \"text-primary\",\n};\n\n/**\n * TerminalPanel — minimal terminal output viewer.\n *\n * Visual: dark card with mono font, \"$ \" prefix on command lines, color-coded\n * stdout/stderr/success. No interactivity (read-only) — pair with your own\n * pty/xterm for live shells if needed.\n */\nconst TerminalPanel = forwardRef<HTMLDivElement, TerminalPanelProps>(\n  ({ className, title = \"Terminal\", lines, promptPrefix = \"$\", live = \"off\", ...props }, ref) => {\n    // T4.1 (MF-4): suppress own aria-live when nested in container live region.\n    const inLiveRegion = useInLiveRegion();\n    const effectiveLive = inLiveRegion ? \"off\" : live;\n    return (\n      <div\n        data-slot=\"terminal-panel\"\n        ref={ref}\n        className={cn(\"overflow-hidden rounded-xl border bg-card\", className)}\n        {...props}\n      >\n        <header className=\"flex items-center gap-2 border-border/40 border-b px-3 py-2\">\n          <TerminalIcon className=\"size-3.5 text-muted-foreground\" aria-hidden=\"true\" />\n          <span className=\"font-sans text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {title}\n          </span>\n        </header>\n        <ol\n          className=\"grid gap-0.5 px-3 py-2 font-mono text-code-sm\"\n          aria-live={effectiveLive}\n          aria-atomic=\"false\"\n        >\n          {lines.map((line) => {\n            const kind = line.kind ?? \"stdout\";\n            return (\n              <li key={line.id} className={cn(\"whitespace-pre-wrap\", kindColor[kind])}>\n                {kind === \"command\" ? (\n                  <>\n                    <span className=\"select-none text-primary\">{promptPrefix} </span>\n                    {line.content}\n                  </>\n                ) : kind === \"prompt\" ? (\n                  <span className=\"motion-safe:animate-pulse\">{line.content}</span>\n                ) : (\n                  line.content\n                )}\n              </li>\n            );\n          })}\n        </ol>\n      </div>\n    );\n  },\n);\nTerminalPanel.displayName = \"TerminalPanel\";\n\nexport { TerminalPanel };\n"
     }
   ]
 }

package/registry/r/text-prompt.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "text-prompt",
+  "type": "registry:block",
+  "title": "TextPrompt",
+  "description": "Free-text ask-the-user card with single-line or multi-line input and an optional required gate.",
+  "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/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/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/textarea.json"
+  ],
+  "files": [
+    {
+      "path": "components/composites/text-prompt/text-prompt.tsx",
+      "type": "registry:block",
+      "target": "components/blocks/text-prompt.tsx",
+      "content": "\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } 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\";\nimport { Label } from \"@/components/ui/label\";\nimport { Textarea } from \"@/components/ui/textarea\";\n\n/**\n * TextPrompt — free-text \"ask the user\" card for agent surfaces.\n *\n * The open-ended sibling of `ChoicePrompt`: a question with an optional header\n * chip and a single-line (`Input`) or multi-line (`Textarea`) field. Equivalent\n * to the \"Other\" affordance promoted to a question of its own.\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 TextPromptResult {\n  /** The typed text. */\n  text: string;\n}\n\nexport interface TextPromptProps 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  /** Controlled text value. */\n  value?: string;\n  /** Initial text when uncontrolled. */\n  defaultValue?: string;\n  /** Fired with the text on every keystroke. */\n  onValueChange?: (text: string) => void;\n  /** Field placeholder. */\n  placeholder?: string;\n  /** Render a multi-line Textarea instead of a single-line Input. */\n  multiline?: boolean;\n  /** Rows for the Textarea when `multiline`. Default 3. */\n  rows?: number;\n  /** Require non-empty text before Confirm enables. */\n  required?: boolean;\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 typed text. */\n  onConfirm?: (result: TextPromptResult) => void;\n  /** Pressing Cancel. */\n  onCancel?: () => void;\n}\n\nconst TextPrompt = forwardRef<HTMLElement, TextPromptProps>(\n  (\n    {\n      className,\n      question,\n      description,\n      badge,\n      value,\n      defaultValue,\n      onValueChange,\n      placeholder,\n      multiline = false,\n      rows = 3,\n      required = false,\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 fieldId = `${baseId}-field`;\n\n    const [internalValue, setInternalValue] = useState(defaultValue ?? \"\");\n    const text = value !== undefined ? value : internalValue;\n\n    const setText = (next: string): void => {\n      if (value === undefined) setInternalValue(next);\n      onValueChange?.(next);\n    };\n\n    const confirmDisabled = required && text.trim().length === 0;\n\n    const confirm = (): void => {\n      if (confirmDisabled) return;\n      onConfirm?.({ text });\n    };\n\n    return (\n      <section\n        data-slot=\"text-prompt\"\n        ref={ref}\n        aria-labelledby={questionId}\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          <Label\n            htmlFor={fieldId}\n            id={questionId}\n            required={required}\n            className=\"font-display text-foreground text-title-md tracking-tight\"\n          >\n            {question}\n          </Label>\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        {multiline ? (\n          <Textarea\n            id={fieldId}\n            rows={rows}\n            placeholder={placeholder}\n            value={text}\n            onChange={(event) => setText(event.target.value)}\n          />\n        ) : (\n          <Input\n            id={fieldId}\n            placeholder={placeholder}\n            value={text}\n            onChange={(event) => setText(event.target.value)}\n          />\n        )}\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 size=\"sm\" variant=\"primary\" disabled={confirmDisabled} onClick={confirm}>\n                {confirmLabel}\n              </Button>\n            ) : null}\n          </footer>\n        ) : null}\n      </section>\n    );\n  },\n);\nTextPrompt.displayName = \"TextPrompt\";\n\nexport { TextPrompt };\n"
+    }
+  ]
+}

package/registry/r/textarea.json

@@ -13,7 +13,7 @@
       "path": "components/primitives/textarea/textarea.tsx",
       "type": "registry:ui",
       "target": "components/ui/textarea.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { TextareaHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Textarea — multi-line input mirror of Input.\n *\n * Matches Input visuals (violet focus ring, --input border, --card bg).\n * The `size` prop accepts `\"sm\" | \"md\" | \"lg\"`. Default `md` preserves the\n * 80px (5rem) min-height + body-md text from before this prop existed.\n *\n * Note: `TextareaHTMLAttributes<HTMLTextAreaElement>` does NOT declare a\n * native `size` attribute (textareas use `rows` / `cols`), so no Omit is\n * needed — contrast with `<Input>` which had EC-1 collision.\n */\nconst textareaVariants = cva(\n  [\n    \"flex w-full resize-y rounded-md border border-input bg-card\",\n    \"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  ],\n  {\n    variants: {\n      size: {\n        sm: \"min-h-[64px] px-2.5 py-1.5 text-body-sm\",\n        // md: text scale + padding tighten to body-sm per FAANG density.\n        // min-h stays 96px because multiline has its own height rationale.\n        md: \"min-h-[6rem] px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm\",\n        lg: \"min-h-[128px] px-4 py-2.5 text-body-md\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nexport interface TextareaProps\n  extends TextareaHTMLAttributes<HTMLTextAreaElement>,\n    VariantProps<typeof textareaVariants> {}\n\nconst Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, rows = 3, size, ...props }, ref) => (\n    <textarea\n      ref={ref}\n      rows={rows}\n      className={cn(textareaVariants({ size }), className)}\n      {...props}\n    />\n  ),\n);\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea, textareaVariants };\n"
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { TextareaHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Textarea — multi-line input mirror of Input.\n *\n * Matches Input visuals (violet focus ring, --input border, --card bg).\n * The `size` prop accepts `\"sm\" | \"md\" | \"lg\"`. Default `md` preserves the\n * 80px (5rem) min-height + body-md text from before this prop existed.\n *\n * Note: `TextareaHTMLAttributes<HTMLTextAreaElement>` does NOT declare a\n * native `size` attribute (textareas use `rows` / `cols`), so no Omit is\n * needed — contrast with `<Input>` which had EC-1 collision.\n */\nconst textareaVariants = cva(\n  [\n    \"flex w-full resize-y rounded-md border border-input bg-card\",\n    \"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  ],\n  {\n    variants: {\n      size: {\n        sm: \"min-h-[64px] px-2.5 py-1.5 text-body-sm\",\n        // md: text scale + padding tighten to body-sm per FAANG density.\n        // min-h stays 96px because multiline has its own height rationale.\n        md: \"min-h-[6rem] px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm\",\n        lg: \"min-h-[128px] px-4 py-2.5 text-body-md\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nexport interface TextareaProps\n  extends TextareaHTMLAttributes<HTMLTextAreaElement>,\n    VariantProps<typeof textareaVariants> {}\n\nconst Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, rows = 3, size, ...props }, ref) => (\n    <textarea\n      data-slot=\"textarea\"\n      data-size={size}\n      ref={ref}\n      rows={rows}\n      className={cn(textareaVariants({ size }), className)}\n      {...props}\n    />\n  ),\n);\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea, textareaVariants };\n"
     }
   ],
   "dependencies": [