@usetheo/ui 0.13.0 → 0.13.2

package/registry/r/context-window-bar.json

@@ -14,7 +14,7 @@
       "path": "components/primitives/context-window-bar/context-window-bar.tsx",
       "type": "registry:ui",
       "target": "components/ui/context-window-bar.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface ContextWindowBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tokens currently used in the context window. */\n  used: number;\n  /** Model's total context capacity (e.g. 200_000, 1_000_000). */\n  total: number;\n  /** Optional secondary label rendered on the right (e.g. model name). */\n  trailing?: ReactNode;\n  /** Optional title shown above the bar. */\n  label?: ReactNode;\n  /** Compact mode hides numbers and label; just the bar. */\n  compact?: boolean;\n  /**\n   * Override warning thresholds (0..1). Defaults: warn 0.7, danger 0.9.\n   */\n  warnAt?: number;\n  dangerAt?: number;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;\n  return `${n}`;\n};\n\n/**\n * ContextWindowBar — shows how much of the model's context window has been\n * consumed. Color transitions: success → warning → destructive past thresholds.\n *\n * Critical for transparency: a user should always be able to glance at this\n * and know if the conversation is about to hit the cap.\n */\nconst ContextWindowBar = forwardRef<HTMLDivElement, ContextWindowBarProps>(\n  (\n    {\n      className,\n      used,\n      total,\n      trailing,\n      label = \"Context\",\n      compact,\n      warnAt = 0.7,\n      dangerAt = 0.9,\n      ...props\n    },\n    ref,\n  ) => {\n    const ratio = Math.max(0, Math.min(1, used / total));\n    const tone = ratio >= dangerAt ? \"destructive\" : ratio >= warnAt ? \"warning\" : \"primary\";\n    const percent = Math.round(ratio * 100);\n\n    const barColor = {\n      primary: \"bg-primary\",\n      warning: \"bg-warning\",\n      destructive: \"bg-destructive\",\n    }[tone];\n\n    const textColor = {\n      primary: \"text-foreground\",\n      warning: \"text-warning\",\n      destructive: \"text-destructive\",\n    }[tone];\n\n    return (\n      <div ref={ref} className={cn(\"grid gap-1.5\", className)} {...props}>\n        {!compact ? (\n          <div className=\"flex items-baseline justify-between gap-2\">\n            <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {label}\n            </span>\n            <span className={cn(\"font-mono text-body-sm tabular-nums\", textColor)}>\n              {formatTokens(used)} / {formatTokens(total)}{\" \"}\n              <span className=\"opacity-60\">({percent}%)</span>\n            </span>\n          </div>\n        ) : null}\n        <div\n          className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\"\n          role=\"progressbar\"\n          tabIndex={-1}\n          aria-valuenow={used}\n          aria-valuemin={0}\n          aria-valuemax={total}\n          aria-label={`${percent}% of context window used`}\n        >\n          <div\n            className={cn(\n              \"h-full rounded-full transition-[width,background-color] duration-base ease-out-soft\",\n              barColor,\n            )}\n            style={{ width: `${percent}%` }}\n          />\n        </div>\n        {trailing ? (\n          <div className=\"font-mono text-label text-muted-foreground\">{trailing}</div>\n        ) : null}\n      </div>\n    );\n  },\n);\nContextWindowBar.displayName = \"ContextWindowBar\";\n\nexport { ContextWindowBar };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface ContextWindowBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Tokens currently used in the context window. */\n  used: number;\n  /** Model's total context capacity (e.g. 200_000, 1_000_000). */\n  total: number;\n  /** Optional secondary label rendered on the right (e.g. model name). */\n  trailing?: ReactNode;\n  /** Optional title shown above the bar. */\n  label?: ReactNode;\n  /** Compact mode hides numbers and label; just the bar. */\n  compact?: boolean;\n  /**\n   * Override warning thresholds (0..1). Defaults: warn 0.7, danger 0.9.\n   */\n  warnAt?: number;\n  dangerAt?: number;\n}\n\nconst formatTokens = (n: number) => {\n  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;\n  return `${n}`;\n};\n\n/**\n * ContextWindowBar — shows how much of the model's context window has been\n * consumed. Color transitions: success → warning → destructive past thresholds.\n *\n * Critical for transparency: a user should always be able to glance at this\n * and know if the conversation is about to hit the cap.\n */\nconst ContextWindowBar = forwardRef<HTMLDivElement, ContextWindowBarProps>(\n  (\n    {\n      className,\n      used,\n      total,\n      trailing,\n      label = \"Context\",\n      compact,\n      warnAt = 0.7,\n      dangerAt = 0.9,\n      ...props\n    },\n    ref,\n  ) => {\n    const ratio = Math.max(0, Math.min(1, used / total));\n    const tone = ratio >= dangerAt ? \"destructive\" : ratio >= warnAt ? \"warning\" : \"primary\";\n    const percent = Math.round(ratio * 100);\n\n    const barColor = {\n      primary: \"bg-primary\",\n      warning: \"bg-warning\",\n      destructive: \"bg-destructive\",\n    }[tone];\n\n    const textColor = {\n      primary: \"text-foreground\",\n      warning: \"text-warning\",\n      destructive: \"text-destructive\",\n    }[tone];\n\n    return (\n      <div\n        data-slot=\"context-window-bar\"\n        ref={ref}\n        className={cn(\"grid gap-1.5\", className)}\n        {...props}\n      >\n        {!compact ? (\n          <div className=\"flex items-baseline justify-between gap-2\">\n            <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n              {label}\n            </span>\n            <span className={cn(\"font-mono text-body-sm tabular-nums\", textColor)}>\n              {formatTokens(used)} / {formatTokens(total)}{\" \"}\n              <span className=\"opacity-60\">({percent}%)</span>\n            </span>\n          </div>\n        ) : null}\n        <div\n          className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\"\n          role=\"progressbar\"\n          tabIndex={-1}\n          aria-valuenow={used}\n          aria-valuemin={0}\n          aria-valuemax={total}\n          aria-label={`${percent}% of context window used`}\n        >\n          <div\n            className={cn(\n              \"h-full rounded-full transition-[width,background-color] duration-base ease-out-soft\",\n              barColor,\n            )}\n            style={{ width: `${percent}%` }}\n          />\n        </div>\n        {trailing ? (\n          <div className=\"font-mono text-label text-muted-foreground\">{trailing}</div>\n        ) : null}\n      </div>\n    );\n  },\n);\nContextWindowBar.displayName = \"ContextWindowBar\";\n\nexport { ContextWindowBar };\n"
     }
   ]
 }

package/registry/r/copy-button.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/copy-button/copy-button.tsx",
       "type": "registry:ui",
       "target": "components/ui/copy-button.tsx",
-      "content": "import { Check, Copy, X } from \"lucide-react\";\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * CopyButton — click-to-copy primitive for PaaS surfaces.\n *\n * Wraps the Clipboard API behind a button that:\n *   - Calls `navigator.clipboard.writeText(value)` on click\n *   - Swaps the icon (Copy → Check on success, Copy → X on failure)\n *   - Optionally swaps the visible `label` to \"Copied!\" / \"Failed\"\n *   - Announces the state change via an `aria-live=\"polite\"` sr-only region\n *   - Reverts to idle after `feedbackDuration` ms (default 1500)\n *\n * SSR-safe (guards `navigator?.clipboard?.writeText`). Debounces double-clicks\n * by ignoring clicks while not in the `idle` state. Cleans up the revert timer\n * on unmount so no `setState` happens on unmounted components.\n *\n * @example\n *   <CopyButton value={envVar.value} />               // icon-only ghost\n *   <CopyButton value={token} label=\"Copy token\" variant=\"outline\" />\n */\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\nexport interface CopyButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"onClick\" | \"children\"> {\n  /** String to copy when clicked. */\n  value: string;\n  /** Optional button label. Default: just the icon. */\n  label?: ReactNode;\n  /** Visual style. */\n  variant?: \"ghost\" | \"outline\";\n  /** Size. */\n  size?: \"sm\" | \"md\";\n  /** Callback after successful copy (e.g. analytics). */\n  onCopied?: (value: string) => void;\n  /** Duration of the feedback state in ms. Default 1500. */\n  feedbackDuration?: number;\n}\n\nconst VARIANT: Record<NonNullable<CopyButtonProps[\"variant\"]>, string> = {\n  ghost: \"hover:bg-muted\",\n  outline: \"border border-border/60 rounded-md\",\n};\n\nconst SIZE: Record<NonNullable<CopyButtonProps[\"size\"]>, string> = {\n  sm: \"px-2 py-1 text-label\",\n  md: \"px-2.5 py-1.5 text-body-sm\",\n};\n\nconst CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(\n  (\n    {\n      className,\n      value,\n      label,\n      variant = \"ghost\",\n      size = \"sm\",\n      onCopied,\n      feedbackDuration = 1500,\n      ...props\n    },\n    ref,\n  ) => {\n    const [state, setState] = useState<CopyState>(\"idle\");\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n      return () => {\n        if (timerRef.current !== null) {\n          clearTimeout(timerRef.current);\n        }\n      };\n    }, []);\n\n    const scheduleRevert = useCallback(() => {\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current);\n      }\n      timerRef.current = setTimeout(() => {\n        setState(\"idle\");\n        timerRef.current = null;\n      }, feedbackDuration);\n    }, [feedbackDuration]);\n\n    const handleClick = useCallback(() => {\n      if (state !== \"idle\") return;\n\n      if (typeof navigator === \"undefined\" || !navigator.clipboard?.writeText) {\n        setState(\"failed\");\n        scheduleRevert();\n        return;\n      }\n\n      navigator.clipboard.writeText(value).then(\n        () => {\n          setState(\"copied\");\n          onCopied?.(value);\n          scheduleRevert();\n        },\n        () => {\n          setState(\"failed\");\n          scheduleRevert();\n        },\n      );\n    }, [state, value, onCopied, scheduleRevert]);\n\n    const Icon = state === \"copied\" ? Check : state === \"failed\" ? X : Copy;\n    const liveMessage =\n      state === \"copied\" ? \"Copied to clipboard\" : state === \"failed\" ? \"Copy failed\" : \"\";\n\n    const labelText =\n      label !== undefined\n        ? state === \"copied\"\n          ? \"Copied!\"\n          : state === \"failed\"\n            ? \"Failed\"\n            : label\n        : null;\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        onClick={handleClick}\n        data-state={state}\n        className={cn(\n          \"inline-flex items-center gap-1.5\",\n          \"font-sans transition-colors\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n          VARIANT[variant],\n          SIZE[size],\n          className,\n        )}\n        {...props}\n      >\n        <Icon\n          aria-hidden=\"true\"\n          className={cn(\n            \"size-3.5 shrink-0 transition-opacity duration-200\",\n            state === \"copied\" && \"text-success\",\n            state === \"failed\" && \"text-destructive\",\n          )}\n        />\n        {labelText !== null ? <span>{labelText}</span> : null}\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveMessage}\n        </span>\n      </button>\n    );\n  },\n);\nCopyButton.displayName = \"CopyButton\";\n\nexport { CopyButton };\n"
+      "content": "\"use client\";\n\nimport { Check, Copy, X } from \"lucide-react\";\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * CopyButton — click-to-copy primitive for PaaS surfaces.\n *\n * Wraps the Clipboard API behind a button that:\n *   - Calls `navigator.clipboard.writeText(value)` on click\n *   - Swaps the icon (Copy → Check on success, Copy → X on failure)\n *   - Optionally swaps the visible `label` to \"Copied!\" / \"Failed\"\n *   - Announces the state change via an `aria-live=\"polite\"` sr-only region\n *   - Reverts to idle after `feedbackDuration` ms (default 1500)\n *\n * SSR-safe (guards `navigator?.clipboard?.writeText`). Debounces double-clicks\n * by ignoring clicks while not in the `idle` state. Cleans up the revert timer\n * on unmount so no `setState` happens on unmounted components.\n *\n * @example\n *   <CopyButton value={envVar.value} />               // icon-only ghost\n *   <CopyButton value={token} label=\"Copy token\" variant=\"outline\" />\n */\ntype CopyState = \"idle\" | \"copied\" | \"failed\";\n\nexport interface CopyButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"type\" | \"onClick\" | \"children\"> {\n  /** String to copy when clicked. */\n  value: string;\n  /** Optional button label. Default: just the icon. */\n  label?: ReactNode;\n  /** Visual style. */\n  variant?: \"ghost\" | \"outline\";\n  /** Size. */\n  size?: \"sm\" | \"md\";\n  /** Callback after successful copy (e.g. analytics). */\n  onCopied?: (value: string) => void;\n  /** Duration of the feedback state in ms. Default 1500. */\n  feedbackDuration?: number;\n}\n\nconst VARIANT: Record<NonNullable<CopyButtonProps[\"variant\"]>, string> = {\n  ghost: \"hover:bg-muted\",\n  outline: \"border border-border/60 rounded-md\",\n};\n\nconst SIZE: Record<NonNullable<CopyButtonProps[\"size\"]>, string> = {\n  sm: \"px-2 py-1 text-label\",\n  md: \"px-2.5 py-1.5 text-body-sm\",\n};\n\nconst CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(\n  (\n    {\n      className,\n      value,\n      label,\n      variant = \"ghost\",\n      size = \"sm\",\n      onCopied,\n      feedbackDuration = 1500,\n      ...props\n    },\n    ref,\n  ) => {\n    const [state, setState] = useState<CopyState>(\"idle\");\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n      return () => {\n        if (timerRef.current !== null) {\n          clearTimeout(timerRef.current);\n        }\n      };\n    }, []);\n\n    const scheduleRevert = useCallback(() => {\n      if (timerRef.current !== null) {\n        clearTimeout(timerRef.current);\n      }\n      timerRef.current = setTimeout(() => {\n        setState(\"idle\");\n        timerRef.current = null;\n      }, feedbackDuration);\n    }, [feedbackDuration]);\n\n    const handleClick = useCallback(() => {\n      if (state !== \"idle\") return;\n\n      if (typeof navigator === \"undefined\" || !navigator.clipboard?.writeText) {\n        setState(\"failed\");\n        scheduleRevert();\n        return;\n      }\n\n      navigator.clipboard.writeText(value).then(\n        () => {\n          setState(\"copied\");\n          onCopied?.(value);\n          scheduleRevert();\n        },\n        () => {\n          setState(\"failed\");\n          scheduleRevert();\n        },\n      );\n    }, [state, value, onCopied, scheduleRevert]);\n\n    const Icon = state === \"copied\" ? Check : state === \"failed\" ? X : Copy;\n    const liveMessage =\n      state === \"copied\" ? \"Copied to clipboard\" : state === \"failed\" ? \"Copy failed\" : \"\";\n\n    const labelText =\n      label !== undefined\n        ? state === \"copied\"\n          ? \"Copied!\"\n          : state === \"failed\"\n            ? \"Failed\"\n            : label\n        : null;\n\n    return (\n      <button\n        data-slot=\"copy-button\"\n        ref={ref}\n        type=\"button\"\n        onClick={handleClick}\n        data-state={state}\n        className={cn(\n          \"inline-flex items-center gap-1.5\",\n          \"font-sans transition-colors\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card\",\n          VARIANT[variant],\n          SIZE[size],\n          className,\n        )}\n        {...props}\n      >\n        <Icon\n          aria-hidden=\"true\"\n          className={cn(\n            \"size-3.5 shrink-0 transition-opacity duration-200\",\n            state === \"copied\" && \"text-success\",\n            state === \"failed\" && \"text-destructive\",\n          )}\n        />\n        {labelText !== null ? <span>{labelText}</span> : null}\n        <span className=\"sr-only\" aria-live=\"polite\">\n          {liveMessage}\n        </span>\n      </button>\n    );\n  },\n);\nCopyButton.displayName = \"CopyButton\";\n\nexport { CopyButton };\n"
     }
   ]
 }

package/registry/r/cost-meter.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/cost-meter/cost-meter.tsx",
       "type": "registry:ui",
       "target": "components/ui/cost-meter.tsx",
-      "content": "import { Coins, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface CostMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Current cost in USD. */\n  cost: number;\n  /** Optional monthly budget; renders progress bar when present. */\n  budget?: number;\n  /** Optional title (e.g. \"This session\", \"Monthly\"). */\n  title?: ReactNode;\n  /** Optional delta vs previous period. */\n  delta?: { value: number; period: string };\n  /** Compact mode — single-line summary. */\n  compact?: boolean;\n}\n\nconst formatUsd = (n: number) =>\n  n >= 100 ? `$${n.toFixed(0)}` : n >= 10 ? `$${n.toFixed(1)}` : `$${n.toFixed(2)}`;\n\n/**\n * CostMeter — gauge for token spend. Two visuals:\n *   - card: title + big number + optional progress bar + optional delta.\n *   - compact: chip \"Coins $4.20\" for nav bars.\n */\nconst CostMeter = forwardRef<HTMLDivElement, CostMeterProps>(\n  ({ className, cost, budget, title = \"Spend\", delta, compact, ...props }, ref) => {\n    if (compact) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            \"inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card px-2.5 py-1\",\n            \"font-mono text-label\",\n            className,\n          )}\n          {...props}\n        >\n          <Coins className=\"size-3 text-primary\" aria-hidden=\"true\" />\n          <span className=\"text-foreground tabular-nums\">{formatUsd(cost)}</span>\n          {budget ? <span className=\"text-muted-foreground\">/ {formatUsd(budget)}</span> : null}\n        </div>\n      );\n    }\n\n    const ratio = budget ? Math.max(0, Math.min(1, cost / budget)) : 0;\n    const percent = Math.round(ratio * 100);\n    const overBudget = budget !== undefined && cost > budget;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"grid gap-2 rounded-xl border bg-card p-4\", className)}\n        {...props}\n      >\n        <header className=\"flex items-baseline justify-between\">\n          <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {title}\n          </span>\n          {delta ? (\n            <span\n              className={cn(\n                \"inline-flex items-center gap-1 font-mono text-body-sm tabular-nums\",\n                delta.value >= 0 ? \"text-warning\" : \"text-success\",\n              )}\n            >\n              {delta.value >= 0 ? (\n                <TrendingUp className=\"size-3\" aria-hidden=\"true\" />\n              ) : (\n                <TrendingDown className=\"size-3\" aria-hidden=\"true\" />\n              )}\n              {delta.value >= 0 ? \"+\" : \"\"}\n              {formatUsd(Math.abs(delta.value))}{\" \"}\n              <span className=\"text-muted-foreground\">{delta.period}</span>\n            </span>\n          ) : null}\n        </header>\n        <div className=\"flex items-baseline gap-1.5\">\n          <span className=\"font-bold font-display text-display-md text-foreground tabular-nums leading-none\">\n            {formatUsd(cost)}\n          </span>\n          {budget !== undefined ? (\n            <span className=\"font-mono text-body-sm text-muted-foreground\">\n              of {formatUsd(budget)}\n            </span>\n          ) : null}\n        </div>\n        {budget !== undefined ? (\n          <div className=\"grid gap-1\">\n            <div\n              className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\"\n              role=\"progressbar\"\n              tabIndex={-1}\n              aria-valuenow={percent}\n              aria-valuemin={0}\n              aria-valuemax={100}\n            >\n              <div\n                className={cn(\n                  \"h-full rounded-full transition-[width,background-color]\",\n                  overBudget ? \"bg-destructive\" : ratio > 0.75 ? \"bg-warning\" : \"bg-primary\",\n                )}\n                style={{ width: `${Math.min(100, percent)}%` }}\n              />\n            </div>\n            <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n              {percent}% of budget {overBudget ? \"· over!\" : \"used\"}\n            </span>\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nCostMeter.displayName = \"CostMeter\";\n\nexport { CostMeter };\n"
+      "content": "import { Coins, TrendingDown, TrendingUp } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\ninterface CostMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  /** Current cost in USD. */\n  cost: number;\n  /** Optional monthly budget; renders progress bar when present. */\n  budget?: number;\n  /** Optional title (e.g. \"This session\", \"Monthly\"). */\n  title?: ReactNode;\n  /** Optional delta vs previous period. */\n  delta?: { value: number; period: string };\n  /** Compact mode — single-line summary. */\n  compact?: boolean;\n}\n\nconst formatUsd = (n: number) =>\n  n >= 100 ? `$${n.toFixed(0)}` : n >= 10 ? `$${n.toFixed(1)}` : `$${n.toFixed(2)}`;\n\n/**\n * CostMeter — gauge for token spend. Two visuals:\n *   - card: title + big number + optional progress bar + optional delta.\n *   - compact: chip \"Coins $4.20\" for nav bars.\n */\nconst CostMeter = forwardRef<HTMLDivElement, CostMeterProps>(\n  ({ className, cost, budget, title = \"Spend\", delta, compact, ...props }, ref) => {\n    if (compact) {\n      return (\n        <div\n          data-slot=\"cost-meter\"\n          ref={ref}\n          className={cn(\n            \"inline-flex items-center gap-1.5 rounded-full border border-border/60 bg-card px-2.5 py-1\",\n            \"font-mono text-label\",\n            className,\n          )}\n          {...props}\n        >\n          <Coins className=\"size-3 text-primary\" aria-hidden=\"true\" />\n          <span className=\"text-foreground tabular-nums\">{formatUsd(cost)}</span>\n          {budget ? <span className=\"text-muted-foreground\">/ {formatUsd(budget)}</span> : null}\n        </div>\n      );\n    }\n\n    const ratio = budget ? Math.max(0, Math.min(1, cost / budget)) : 0;\n    const percent = Math.round(ratio * 100);\n    const overBudget = budget !== undefined && cost > budget;\n\n    return (\n      <div\n        data-slot=\"cost-meter\"\n        ref={ref}\n        className={cn(\"grid gap-2 rounded-xl border bg-card p-4\", className)}\n        {...props}\n      >\n        <header className=\"flex items-baseline justify-between\">\n          <span className=\"font-mono text-label-caps text-muted-foreground uppercase tracking-wider\">\n            {title}\n          </span>\n          {delta ? (\n            <span\n              className={cn(\n                \"inline-flex items-center gap-1 font-mono text-body-sm tabular-nums\",\n                delta.value >= 0 ? \"text-warning\" : \"text-success\",\n              )}\n            >\n              {delta.value >= 0 ? (\n                <TrendingUp className=\"size-3\" aria-hidden=\"true\" />\n              ) : (\n                <TrendingDown className=\"size-3\" aria-hidden=\"true\" />\n              )}\n              {delta.value >= 0 ? \"+\" : \"\"}\n              {formatUsd(Math.abs(delta.value))}{\" \"}\n              <span className=\"text-muted-foreground\">{delta.period}</span>\n            </span>\n          ) : null}\n        </header>\n        <div className=\"flex items-baseline gap-1.5\">\n          <span className=\"font-bold font-display text-display-md text-foreground tabular-nums leading-none\">\n            {formatUsd(cost)}\n          </span>\n          {budget !== undefined ? (\n            <span className=\"font-mono text-body-sm text-muted-foreground\">\n              of {formatUsd(budget)}\n            </span>\n          ) : null}\n        </div>\n        {budget !== undefined ? (\n          <div className=\"grid gap-1\">\n            <div\n              className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\"\n              role=\"progressbar\"\n              tabIndex={-1}\n              aria-valuenow={percent}\n              aria-valuemin={0}\n              aria-valuemax={100}\n            >\n              <div\n                className={cn(\n                  \"h-full rounded-full transition-[width,background-color]\",\n                  overBudget ? \"bg-destructive\" : ratio > 0.75 ? \"bg-warning\" : \"bg-primary\",\n                )}\n                style={{ width: `${Math.min(100, percent)}%` }}\n              />\n            </div>\n            <span className=\"font-mono text-label text-muted-foreground tabular-nums\">\n              {percent}% of budget {overBudget ? \"· over!\" : \"used\"}\n            </span>\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\nCostMeter.displayName = \"CostMeter\";\n\nexport { CostMeter };\n"
     }
   ]
 }

package/registry/r/created-files-card.json

@@ -17,7 +17,7 @@
       "path": "components/primitives/created-files-card/created-files-card.tsx",
       "type": "registry:ui",
       "target": "components/ui/created-files-card.tsx",
-      "content": "import { Cloud, FileSpreadsheet, Folder } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface CreatedFile {\n  id: string;\n  name: string;\n  /** Optional size for display, e.g. \"42 KB\". */\n  size?: string;\n  /** Icon override. */\n  icon?: IconComponent;\n  /** Optional destination metadata (e.g. \"Google Drive · /Reports\"). */\n  destination?: ReactNode;\n  /** Optional URL to open the file. */\n  href?: string;\n}\n\ninterface CreatedFilesCardProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title?: ReactNode;\n  files: CreatedFile[];\n  /**\n   * Optional CTA shown at the bottom (e.g. \"Move to Google Drive\").\n   */\n  cta?: ReactNode;\n}\n\n/**\n * CreatedFilesCard — surfaces files produced by a completed task.\n *\n * From WIREMOCKS §2: each file is a card-like row with icon + name + destination.\n * Used as social proof of delivery in Task Completed views.\n */\nconst CreatedFilesCard = forwardRef<HTMLElement, CreatedFilesCardProps>(\n  ({ className, title = \"Files created\", files, cta, ...props }, ref) => (\n    <section\n      ref={ref}\n      className={cn(\"rounded-xl border border-primary/40 bg-primary/5 p-4\", className)}\n      {...props}\n    >\n      <header className=\"mb-3 flex items-center gap-2\">\n        <Cloud className=\"size-4 text-primary\" aria-hidden=\"true\" />\n        <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n      </header>\n      <ul className=\"grid gap-2\">\n        {files.map((file) => {\n          const Icon = file.icon ?? FileSpreadsheet;\n          const RowTag = file.href ? \"a\" : \"div\";\n          return (\n            <li key={file.id}>\n              <RowTag\n                href={file.href}\n                target={file.href ? \"_blank\" : undefined}\n                rel={file.href ? \"noreferrer\" : undefined}\n                className={cn(\n                  \"flex items-center gap-3 rounded-md border border-border/40 bg-card px-3 py-2\",\n                  file.href &&\n                    \"transition-colors hover:border-primary/40 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                )}\n              >\n                <Icon className=\"size-5 shrink-0 text-primary\" aria-hidden=\"true\" />\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate font-mono text-code-md text-foreground\">{file.name}</p>\n                  {file.destination ? (\n                    <p className=\"flex items-center gap-1 truncate text-body-sm text-muted-foreground\">\n                      <Folder className=\"size-3 shrink-0\" aria-hidden=\"true\" /> {file.destination}\n                    </p>\n                  ) : null}\n                </div>\n                {file.size ? (\n                  <span className=\"font-mono text-code-sm text-muted-foreground\">{file.size}</span>\n                ) : null}\n              </RowTag>\n            </li>\n          );\n        })}\n      </ul>\n      {cta ? <div className=\"mt-3 flex justify-end\">{cta}</div> : null}\n    </section>\n  ),\n);\nCreatedFilesCard.displayName = \"CreatedFilesCard\";\n\nexport { CreatedFilesCard };\n"
+      "content": "import { Cloud, FileSpreadsheet, Folder } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport type { IconComponent } from \"@/lib/types\";\n\nexport interface CreatedFile {\n  id: string;\n  name: string;\n  /** Optional size for display, e.g. \"42 KB\". */\n  size?: string;\n  /** Icon override. */\n  icon?: IconComponent;\n  /** Optional destination metadata (e.g. \"Google Drive · /Reports\"). */\n  destination?: ReactNode;\n  /** Optional URL to open the file. */\n  href?: string;\n}\n\ninterface CreatedFilesCardProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  title?: ReactNode;\n  files: CreatedFile[];\n  /**\n   * Optional CTA shown at the bottom (e.g. \"Move to Google Drive\").\n   */\n  cta?: ReactNode;\n}\n\n/**\n * CreatedFilesCard — surfaces files produced by a completed task.\n *\n * From WIREMOCKS §2: each file is a card-like row with icon + name + destination.\n * Used as social proof of delivery in Task Completed views.\n */\nconst CreatedFilesCard = forwardRef<HTMLElement, CreatedFilesCardProps>(\n  ({ className, title = \"Files created\", files, cta, ...props }, ref) => (\n    <section\n      data-slot=\"created-files-card\"\n      ref={ref}\n      className={cn(\"rounded-xl border border-primary/40 bg-primary/5 p-4\", className)}\n      {...props}\n    >\n      <header className=\"mb-3 flex items-center gap-2\">\n        <Cloud className=\"size-4 text-primary\" aria-hidden=\"true\" />\n        <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3>\n      </header>\n      <ul className=\"grid gap-2\">\n        {files.map((file) => {\n          const Icon = file.icon ?? FileSpreadsheet;\n          const RowTag = file.href ? \"a\" : \"div\";\n          return (\n            <li key={file.id}>\n              <RowTag\n                href={file.href}\n                target={file.href ? \"_blank\" : undefined}\n                rel={file.href ? \"noreferrer\" : undefined}\n                className={cn(\n                  \"flex items-center gap-3 rounded-md border border-border/40 bg-card px-3 py-2\",\n                  file.href &&\n                    \"transition-colors hover:border-primary/40 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                )}\n              >\n                <Icon className=\"size-5 shrink-0 text-primary\" aria-hidden=\"true\" />\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate font-mono text-code-md text-foreground\">{file.name}</p>\n                  {file.destination ? (\n                    <p className=\"flex items-center gap-1 truncate text-body-sm text-muted-foreground\">\n                      <Folder className=\"size-3 shrink-0\" aria-hidden=\"true\" /> {file.destination}\n                    </p>\n                  ) : null}\n                </div>\n                {file.size ? (\n                  <span className=\"font-mono text-code-sm text-muted-foreground\">{file.size}</span>\n                ) : null}\n              </RowTag>\n            </li>\n          );\n        })}\n      </ul>\n      {cta ? <div className=\"mt-3 flex justify-end\">{cta}</div> : null}\n    </section>\n  ),\n);\nCreatedFilesCard.displayName = \"CreatedFilesCard\";\n\nexport { CreatedFilesCard };\n"
     }
   ]
 }

package/registry/r/cron-job-card.json

@@ -16,7 +16,7 @@
       "path": "components/primitives/cron-job-card/cron-job-card.tsx",
       "type": "registry:ui",
       "target": "components/ui/cron-job-card.tsx",
-      "content": "import { Clock, Play, Square, Trash2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type CronJobStatus = \"idle\" | \"running\" | \"failed\" | \"disabled\";\n\nexport interface CronJob {\n  id: string;\n  /** Human-readable job name. */\n  name: string;\n  /** Cron expression — e.g. every 4 hours. */\n  schedule: string;\n  /** What gets run (prompt or command). */\n  prompt: string;\n  status: CronJobStatus;\n  /** ISO/string timestamp of last run. */\n  lastRun?: string;\n  /** ISO/string timestamp of next run. */\n  nextRun?: string;\n  /** Optional last-run result line. */\n  lastResult?: ReactNode;\n}\n\ninterface CronJobCardProps extends Omit<HTMLAttributes<HTMLElement>, \"onToggle\"> {\n  job: CronJob;\n  onRunNow?: (id: string) => void;\n  onToggle?: (id: string, enabled: boolean) => void;\n  onRemove?: (id: string) => void;\n}\n\nconst STATUS_CONFIG: Record<CronJobStatus, { label: string; class: string }> = {\n  idle: { label: \"Scheduled\", class: \"border-success/40 bg-success/10 text-success\" },\n  running: {\n    label: \"Running\",\n    class: \"border-primary/40 bg-primary/10 text-primary animate-pulse\",\n  },\n  failed: {\n    label: \"Last run failed\",\n    class: \"border-destructive/40 bg-destructive/10 text-destructive\",\n  },\n  disabled: { label: \"Disabled\", class: \"border-border/40 bg-muted text-muted-foreground\" },\n};\n\n/**\n * CronJobCard — one scheduled agent job. Shows cron expression, prompt,\n * status, last/next run. Inline actions: run now, pause, delete.\n */\nconst CronJobCard = forwardRef<HTMLElement, CronJobCardProps>(\n  ({ className, job, onRunNow, onToggle, onRemove, ...props }, ref) => {\n    const cfg = STATUS_CONFIG[job.status];\n    const enabled = job.status !== \"disabled\";\n    return (\n      <article\n        ref={ref}\n        className={cn(\n          \"grid gap-3 rounded-xl border bg-card p-4\",\n          job.status === \"disabled\" && \"opacity-70\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h4 className=\"font-display text-title-md tracking-tight\">{job.name}</h4>\n            <p className=\"mt-0.5 inline-flex items-center gap-2 font-mono text-code-sm text-muted-foreground\">\n              <Clock className=\"size-3\" aria-hidden=\"true\" /> {job.schedule}\n            </p>\n          </div>\n          <span\n            className={cn(\n              \"inline-flex items-center rounded-full border px-2.5 py-0.5\",\n              \"font-mono text-label uppercase tracking-wider\",\n              cfg.class,\n            )}\n          >\n            {cfg.label}\n          </span>\n        </header>\n\n        <p className=\"line-clamp-2 rounded-md bg-muted/60 px-3 py-2 font-mono text-code-sm text-foreground\">\n          {job.prompt}\n        </p>\n\n        <div className=\"grid grid-cols-2 gap-3 font-mono text-label text-muted-foreground\">\n          <span>\n            <span className=\"text-muted-foreground/60\">last:</span> {job.lastRun ?? \"never\"}\n          </span>\n          <span>\n            <span className=\"text-muted-foreground/60\">next:</span> {job.nextRun ?? \"—\"}\n          </span>\n        </div>\n\n        {job.lastResult ? (\n          <p className=\"text-body-sm text-muted-foreground\">{job.lastResult}</p>\n        ) : null}\n\n        <footer className=\"flex items-center justify-end gap-1.5\">\n          {onRunNow ? (\n            <button\n              type=\"button\"\n              onClick={() => onRunNow(job.id)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Play className=\"size-3\" /> Run now\n            </button>\n          ) : null}\n          {onToggle ? (\n            <button\n              type=\"button\"\n              onClick={() => onToggle(job.id, !enabled)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Square className=\"size-3\" /> {enabled ? \"Pause\" : \"Enable\"}\n            </button>\n          ) : null}\n          {onRemove ? (\n            <button\n              type=\"button\"\n              onClick={() => onRemove(job.id)}\n              aria-label={`Remove ${job.name}`}\n              className=\"rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Trash2 className=\"size-3.5\" />\n            </button>\n          ) : null}\n        </footer>\n      </article>\n    );\n  },\n);\nCronJobCard.displayName = \"CronJobCard\";\n\nexport { CronJobCard };\n"
+      "content": "import { Clock, Play, Square, Trash2 } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\nexport type CronJobStatus = \"idle\" | \"running\" | \"failed\" | \"disabled\";\n\nexport interface CronJob {\n  id: string;\n  /** Human-readable job name. */\n  name: string;\n  /** Cron expression — e.g. every 4 hours. */\n  schedule: string;\n  /** What gets run (prompt or command). */\n  prompt: string;\n  status: CronJobStatus;\n  /** ISO/string timestamp of last run. */\n  lastRun?: string;\n  /** ISO/string timestamp of next run. */\n  nextRun?: string;\n  /** Optional last-run result line. */\n  lastResult?: ReactNode;\n}\n\ninterface CronJobCardProps extends Omit<HTMLAttributes<HTMLElement>, \"onToggle\"> {\n  job: CronJob;\n  onRunNow?: (id: string) => void;\n  onToggle?: (id: string, enabled: boolean) => void;\n  onRemove?: (id: string) => void;\n}\n\nconst STATUS_CONFIG: Record<CronJobStatus, { label: string; class: string }> = {\n  idle: { label: \"Scheduled\", class: \"border-success/40 bg-success/10 text-success\" },\n  running: {\n    label: \"Running\",\n    class: \"border-primary/40 bg-primary/10 text-primary animate-pulse\",\n  },\n  failed: {\n    label: \"Last run failed\",\n    class: \"border-destructive/40 bg-destructive/10 text-destructive\",\n  },\n  disabled: { label: \"Disabled\", class: \"border-border/40 bg-muted text-muted-foreground\" },\n};\n\n/**\n * CronJobCard — one scheduled agent job. Shows cron expression, prompt,\n * status, last/next run. Inline actions: run now, pause, delete.\n */\nconst CronJobCard = forwardRef<HTMLElement, CronJobCardProps>(\n  ({ className, job, onRunNow, onToggle, onRemove, ...props }, ref) => {\n    const cfg = STATUS_CONFIG[job.status];\n    const enabled = job.status !== \"disabled\";\n    return (\n      <article\n        data-slot=\"cron-job-card\"\n        ref={ref}\n        className={cn(\n          \"grid gap-3 rounded-xl border bg-card p-4\",\n          job.status === \"disabled\" && \"opacity-70\",\n          className,\n        )}\n        {...props}\n      >\n        <header className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <h4 className=\"font-display text-title-md tracking-tight\">{job.name}</h4>\n            <p className=\"mt-0.5 inline-flex items-center gap-2 font-mono text-code-sm text-muted-foreground\">\n              <Clock className=\"size-3\" aria-hidden=\"true\" /> {job.schedule}\n            </p>\n          </div>\n          <span\n            className={cn(\n              \"inline-flex items-center rounded-full border px-2.5 py-0.5\",\n              \"font-mono text-label uppercase tracking-wider\",\n              cfg.class,\n            )}\n          >\n            {cfg.label}\n          </span>\n        </header>\n\n        <p className=\"line-clamp-2 rounded-md bg-muted/60 px-3 py-2 font-mono text-code-sm text-foreground\">\n          {job.prompt}\n        </p>\n\n        <div className=\"grid grid-cols-2 gap-3 font-mono text-label text-muted-foreground\">\n          <span>\n            <span className=\"text-muted-foreground/60\">last:</span> {job.lastRun ?? \"never\"}\n          </span>\n          <span>\n            <span className=\"text-muted-foreground/60\">next:</span> {job.nextRun ?? \"—\"}\n          </span>\n        </div>\n\n        {job.lastResult ? (\n          <p className=\"text-body-sm text-muted-foreground\">{job.lastResult}</p>\n        ) : null}\n\n        <footer className=\"flex items-center justify-end gap-1.5\">\n          {onRunNow ? (\n            <button\n              type=\"button\"\n              onClick={() => onRunNow(job.id)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Play className=\"size-3\" /> Run now\n            </button>\n          ) : null}\n          {onToggle ? (\n            <button\n              type=\"button\"\n              onClick={() => onToggle(job.id, !enabled)}\n              className=\"inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-card px-2.5 py-1 font-mono text-label hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Square className=\"size-3\" /> {enabled ? \"Pause\" : \"Enable\"}\n            </button>\n          ) : null}\n          {onRemove ? (\n            <button\n              type=\"button\"\n              onClick={() => onRemove(job.id)}\n              aria-label={`Remove ${job.name}`}\n              className=\"rounded-md p-1.5 text-muted-foreground hover:bg-muted hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Trash2 className=\"size-3.5\" />\n            </button>\n          ) : null}\n        </footer>\n      </article>\n    );\n  },\n);\nCronJobCard.displayName = \"CronJobCard\";\n\nexport { CronJobCard };\n"
     }
   ]
 }

package/registry/r/cron-jobs-list.json

@@ -17,7 +17,7 @@
       "path": "components/composites/cron-jobs-list/cron-jobs-list.tsx",
       "type": "registry:block",
       "target": "components/blocks/cron-jobs-list.tsx",
-      "content": "import { Plus } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { type CronJob, CronJobCard } from \"@/components/ui/cron-job-card\";\n\ninterface CronJobsListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onToggle\"> {\n  jobs: CronJob[];\n  title?: ReactNode;\n  onAdd?: () => void;\n  onRunNow?: (id: string) => void;\n  onToggle?: (id: string, enabled: boolean) => void;\n  onRemove?: (id: string) => void;\n}\n\n/**\n * CronJobsList — grid of CronJobCards with a sticky \"new job\" action.\n */\nconst CronJobsList = forwardRef<HTMLDivElement, CronJobsListProps>(\n  (\n    { className, jobs, title = \"Scheduled jobs\", onAdd, onRunNow, onToggle, onRemove, ...props },\n    ref,\n  ) => (\n    <section\n      ref={ref}\n      className={cn(\"grid gap-3\", className)}\n      aria-label=\"Scheduled agent jobs\"\n      {...props}\n    >\n      <header className=\"flex items-baseline justify-between\">\n        {title ? <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3> : <span />}\n        <div className=\"flex items-center gap-3\">\n          <span className=\"font-mono text-label text-muted-foreground\">\n            {jobs.length} {jobs.length === 1 ? \"job\" : \"jobs\"}\n          </span>\n          {onAdd ? (\n            <button\n              type=\"button\"\n              onClick={onAdd}\n              className=\"inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 font-sans text-label text-primary-foreground hover:shadow-glow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Plus className=\"size-3.5\" /> New job\n            </button>\n          ) : null}\n        </div>\n      </header>\n      {jobs.length === 0 ? (\n        <p className=\"rounded-xl border border-border/60 border-dashed bg-muted/30 px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n          No scheduled jobs yet.\n        </p>\n      ) : (\n        <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n          {jobs.map((job) => (\n            <CronJobCard\n              key={job.id}\n              job={job}\n              {...(onRunNow ? { onRunNow } : {})}\n              {...(onToggle ? { onToggle } : {})}\n              {...(onRemove ? { onRemove } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </section>\n  ),\n);\nCronJobsList.displayName = \"CronJobsList\";\n\nexport { CronJobsList };\n"
+      "content": "import { Plus } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { type CronJob, CronJobCard } from \"@/components/ui/cron-job-card\";\n\ninterface CronJobsListProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\" | \"onToggle\"> {\n  jobs: CronJob[];\n  title?: ReactNode;\n  onAdd?: () => void;\n  onRunNow?: (id: string) => void;\n  onToggle?: (id: string, enabled: boolean) => void;\n  onRemove?: (id: string) => void;\n}\n\n/**\n * CronJobsList — grid of CronJobCards with a sticky \"new job\" action.\n */\nconst CronJobsList = forwardRef<HTMLDivElement, CronJobsListProps>(\n  (\n    { className, jobs, title = \"Scheduled jobs\", onAdd, onRunNow, onToggle, onRemove, ...props },\n    ref,\n  ) => (\n    <section\n      data-slot=\"cron-jobs-list\"\n      ref={ref}\n      className={cn(\"grid gap-3\", className)}\n      aria-label=\"Scheduled agent jobs\"\n      {...props}\n    >\n      <header className=\"flex items-baseline justify-between\">\n        {title ? <h3 className=\"font-display text-title-md tracking-tight\">{title}</h3> : <span />}\n        <div className=\"flex items-center gap-3\">\n          <span className=\"font-mono text-label text-muted-foreground\">\n            {jobs.length} {jobs.length === 1 ? \"job\" : \"jobs\"}\n          </span>\n          {onAdd ? (\n            <button\n              type=\"button\"\n              onClick={onAdd}\n              className=\"inline-flex items-center gap-1 rounded-md bg-primary px-2.5 py-1 font-sans text-label text-primary-foreground hover:shadow-glow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Plus className=\"size-3.5\" /> New job\n            </button>\n          ) : null}\n        </div>\n      </header>\n      {jobs.length === 0 ? (\n        <p className=\"rounded-xl border border-border/60 border-dashed bg-muted/30 px-4 py-8 text-center font-sans text-body-sm text-muted-foreground\">\n          No scheduled jobs yet.\n        </p>\n      ) : (\n        <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2\">\n          {jobs.map((job) => (\n            <CronJobCard\n              key={job.id}\n              job={job}\n              {...(onRunNow ? { onRunNow } : {})}\n              {...(onToggle ? { onToggle } : {})}\n              {...(onRemove ? { onRemove } : {})}\n            />\n          ))}\n        </div>\n      )}\n    </section>\n  ),\n);\nCronJobsList.displayName = \"CronJobsList\";\n\nexport { CronJobsList };\n"
     }
   ]
 }

package/registry/r/danger-zone.json

@@ -14,7 +14,7 @@
       "path": "components/primitives/danger-zone/danger-zone.tsx",
       "type": "registry:ui",
       "target": "components/ui/danger-zone.tsx",
-      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * DangerZone — destructive-actions section primitive.\n *\n * Red-bordered container with a title bar and `DangerZone.Action` rows.\n * Each Action is laid out as title + description on the left, with a\n * consumer-provided action slot (typically a destructive Button) on\n * the right. Rows are separated by hairline dividers; the last row\n * has no bottom border via `last:border-b-0`.\n *\n * The consumer supplies the destructive button — this primitive never\n * imports `<Button>`, keeping it free of internal `@usetheo/ui` deps\n * (true primitive).\n *\n * @example\n *   <DangerZone>\n *     <DangerZone.Action\n *       title=\"Delete project\"\n *       description=\"Permanently delete this project.\"\n *       action={<Button variant=\"destructive\">Delete</Button>}\n *     />\n *   </DangerZone>\n */\nexport interface DangerZoneProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Section title. Default \"Danger Zone\". */\n  title?: ReactNode;\n}\n\nconst Root = forwardRef<HTMLElement, DangerZoneProps>(\n  ({ className, title = \"Danger Zone\", children, ...props }, ref) => (\n    <section\n      ref={ref}\n      aria-label={typeof title === \"string\" ? title : \"Danger Zone\"}\n      className={cn(\"rounded-xl border border-destructive/30 bg-destructive/[0.02]\", className)}\n      {...props}\n    >\n      <div className=\"border-destructive/20 border-b px-5 py-3 font-sans text-destructive text-label-caps uppercase tracking-wider\">\n        {title}\n      </div>\n      {children}\n    </section>\n  ),\n);\nRoot.displayName = \"DangerZone\";\n\nexport interface DangerZoneActionProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title: ReactNode;\n  description: ReactNode;\n  /** Consumer-provided destructive button (or any ReactNode). */\n  action: ReactNode;\n}\n\nconst Action = forwardRef<HTMLDivElement, DangerZoneActionProps>(\n  ({ className, title, description, action, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-between gap-4 border-destructive/10 border-b px-5 py-4 last:border-b-0\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-col\">\n        <span className=\"font-medium font-sans text-body-sm text-foreground\">{title}</span>\n        <span className=\"mt-0.5 font-sans text-label text-muted-foreground\">{description}</span>\n      </div>\n      <div className=\"shrink-0\">{action}</div>\n    </div>\n  ),\n);\nAction.displayName = \"DangerZone.Action\";\n\ntype DangerZoneRoot = typeof Root & { Action: typeof Action };\nconst DangerZone: DangerZoneRoot = Object.assign(Root, { Action });\n\nexport { DangerZone };\n"
+      "content": "import { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * DangerZone — destructive-actions section primitive.\n *\n * Red-bordered container with a title bar and `DangerZone.Action` rows.\n * Each Action is laid out as title + description on the left, with a\n * consumer-provided action slot (typically a destructive Button) on\n * the right. Rows are separated by hairline dividers; the last row\n * has no bottom border via `last:border-b-0`.\n *\n * The consumer supplies the destructive button — this primitive never\n * imports `<Button>`, keeping it free of internal `@theokit/ui` deps\n * (true primitive).\n *\n * @example\n *   <DangerZone>\n *     <DangerZone.Action\n *       title=\"Delete project\"\n *       description=\"Permanently delete this project.\"\n *       action={<Button variant=\"destructive\">Delete</Button>}\n *     />\n *   </DangerZone>\n */\nexport interface DangerZoneProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  /** Section title. Default \"Danger Zone\". */\n  title?: ReactNode;\n}\n\nconst Root = forwardRef<HTMLElement, DangerZoneProps>(\n  ({ className, title = \"Danger Zone\", children, ...props }, ref) => (\n    <section\n      data-slot=\"danger-zone\"\n      ref={ref}\n      aria-label={typeof title === \"string\" ? title : \"Danger Zone\"}\n      className={cn(\"rounded-xl border border-destructive/30 bg-destructive/[0.02]\", className)}\n      {...props}\n    >\n      <div className=\"border-destructive/20 border-b px-5 py-3 font-sans text-destructive text-label-caps uppercase tracking-wider\">\n        {title}\n      </div>\n      {children}\n    </section>\n  ),\n);\nRoot.displayName = \"DangerZone\";\n\nexport interface DangerZoneActionProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title: ReactNode;\n  description: ReactNode;\n  /** Consumer-provided destructive button (or any ReactNode). */\n  action: ReactNode;\n}\n\nconst Action = forwardRef<HTMLDivElement, DangerZoneActionProps>(\n  ({ className, title, description, action, ...props }, ref) => (\n    <div\n      data-slot=\"danger-zone-action\"\n      ref={ref}\n      className={cn(\n        \"flex items-center justify-between gap-4 border-destructive/10 border-b px-5 py-4 last:border-b-0\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-col\">\n        <span className=\"font-medium font-sans text-body-sm text-foreground\">{title}</span>\n        <span className=\"mt-0.5 font-sans text-label text-muted-foreground\">{description}</span>\n      </div>\n      <div className=\"shrink-0\">{action}</div>\n    </div>\n  ),\n);\nAction.displayName = \"DangerZone.Action\";\n\ntype DangerZoneRoot = typeof Root & { Action: typeof Action };\nconst DangerZone: DangerZoneRoot = Object.assign(Root, { Action });\n\nexport { DangerZone };\n"
     }
   ]
 }

package/registry/r/data-table.json

@@ -21,7 +21,7 @@
       "path": "components/composites/data-table/data-table.tsx",
       "type": "registry:ui",
       "target": "components/ui/data-table.tsx",
-      "content": "import { ChevronDown, ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { Fragment, useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { DropdownMenu } from \"@/components/ui/dropdown-menu\";\nimport { EmptyState } from \"@/components/ui/empty-state\";\nimport { Pagination } from \"@/components/ui/pagination\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Table } from \"@/components/ui/table\";\n\n/**\n * DataTable — generic, sortable, expandable composite over `<Table>`.\n *\n * Adds operator-grade entity-list patterns on top of the plain Table\n * primitive: sortable headers, sticky header, expandable rows\n * (multi-row by default), row action menus (Dropdown), client-side\n * pagination, loading skeleton rows, empty state. Both sort and\n * pagination support controlled OR uncontrolled mode (consumer\n * passes onSortChange / onPageChange to take over state).\n *\n * @example\n *   <DataTable\n *     columns={[\n *       { key: \"name\", label: \"Name\", sortable: true },\n *       { key: \"status\", label: \"Status\" },\n *     ]}\n *     data={domains}\n *     rowKey={(d) => d.id}\n *     expandable={(d) => d.status === \"pending\" ? <DnsRecords domain={d} /> : null}\n *     rowActions={(d) => (\n *       <>\n *         <DropdownMenu.Item onSelect={() => editDomain(d)}>Edit</DropdownMenu.Item>\n *         <DropdownMenu.Item onSelect={() => deleteDomain(d)}>Delete</DropdownMenu.Item>\n *       </>\n *     )}\n *   />\n */\nexport interface DataTableColumn<T> {\n  key: string;\n  label: ReactNode;\n  align?: \"left\" | \"center\" | \"right\";\n  sortable?: boolean;\n  width?: string;\n  render?: (row: T) => ReactNode;\n  className?: string;\n}\n\nexport interface DataTableSort {\n  key: string;\n  direction: \"asc\" | \"desc\";\n}\n\nexport interface DataTableProps<T> {\n  data: T[];\n  columns: DataTableColumn<T>[];\n  rowKey: (row: T) => string;\n  stickyHeader?: boolean;\n  expandable?: (row: T) => ReactNode | null;\n  expandMode?: \"single\" | \"multiple\";\n  rowActions?: (row: T) => ReactNode;\n  pagination?: {\n    pageSize: number;\n    controlledPage?: number;\n    onPageChange?: (page: number) => void;\n  } | null;\n  defaultSort?: DataTableSort;\n  sort?: DataTableSort | null;\n  onSortChange?: (sort: DataTableSort | null) => void;\n  loading?: boolean;\n  emptyState?: ReactNode;\n  className?: string;\n}\n\nfunction compareValues(a: unknown, b: unknown): number {\n  if (a === b) return 0;\n  if (a === null || a === undefined) return -1;\n  if (b === null || b === undefined) return 1;\n  if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n  return String(a).localeCompare(String(b));\n}\n\nfunction DataTable<T>(props: DataTableProps<T>): ReactNode {\n  const {\n    data,\n    columns,\n    rowKey,\n    stickyHeader = true,\n    expandable,\n    expandMode = \"multiple\",\n    rowActions,\n    pagination,\n    defaultSort,\n    sort: controlledSort,\n    onSortChange,\n    loading = false,\n    emptyState,\n    className,\n  } = props;\n\n  const isControlledSort = onSortChange !== undefined;\n  const [uncontrolledSort, setUncontrolledSort] = useState<DataTableSort | null>(\n    defaultSort ?? null,\n  );\n  const sort = isControlledSort ? (controlledSort ?? null) : uncontrolledSort;\n\n  const isControlledPage = pagination?.controlledPage !== undefined;\n  const [uncontrolledPage, setUncontrolledPage] = useState(0);\n  const currentPage = isControlledPage ? (pagination?.controlledPage ?? 0) : uncontrolledPage;\n\n  // EC-9: clamp pageSize to >= 1 to avoid divide-by-zero / infinite render\n  const effectivePageSize = Math.max(1, pagination?.pageSize ?? 10);\n\n  const [expanded, setExpanded] = useState<Set<string>>(new Set());\n\n  function handleSort(columnKey: string) {\n    // Cycle: none → asc → desc → none\n    let nextSort: DataTableSort | null;\n    if (sort?.key !== columnKey) {\n      nextSort = { key: columnKey, direction: \"asc\" };\n    } else if (sort.direction === \"asc\") {\n      nextSort = { key: columnKey, direction: \"desc\" };\n    } else {\n      nextSort = null;\n    }\n    if (isControlledSort) {\n      onSortChange?.(nextSort);\n    } else {\n      setUncontrolledSort(nextSort);\n      // EC-8: sort change resets pagination to page 0\n      if (!isControlledPage) setUncontrolledPage(0);\n    }\n  }\n\n  function handlePageChange(page: number) {\n    // Pagination uses 1-indexed; internal state 0-indexed\n    const zeroIdx = page - 1;\n    if (isControlledPage) {\n      pagination?.onPageChange?.(zeroIdx);\n    } else {\n      setUncontrolledPage(zeroIdx);\n    }\n  }\n\n  function toggleExpand(key: string) {\n    if (expandMode === \"single\") {\n      setExpanded((prev) => (prev.has(key) ? new Set() : new Set([key])));\n    } else {\n      setExpanded((prev) => {\n        const next = new Set(prev);\n        if (next.has(key)) {\n          next.delete(key);\n        } else {\n          next.add(key);\n        }\n        return next;\n      });\n    }\n  }\n\n  // Apply client-side sort in uncontrolled mode\n  const sortedData = useMemo(() => {\n    if (isControlledSort || sort === null) return data;\n    const col = columns.find((c) => c.key === sort.key);\n    if (!col) return data;\n    const sorted = [...data].sort((a, b) => {\n      const aVal = col.render\n        ? null\n        : (a as Record<string, unknown>)[sort.key as keyof T as string];\n      const bVal = col.render\n        ? null\n        : (b as Record<string, unknown>)[sort.key as keyof T as string];\n      const cmp = compareValues(aVal, bVal);\n      return sort.direction === \"asc\" ? cmp : -cmp;\n    });\n    return sorted;\n  }, [data, sort, isControlledSort, columns]);\n\n  // Apply client-side pagination in uncontrolled mode\n  const visibleData = useMemo(() => {\n    if (!pagination) return sortedData;\n    if (isControlledPage) return sortedData; // consumer pre-sliced\n    const start = currentPage * effectivePageSize;\n    return sortedData.slice(start, start + effectivePageSize);\n  }, [sortedData, pagination, isControlledPage, currentPage, effectivePageSize]);\n\n  // EC-1 fix: compute colSpan accounting for chevron + actions columns\n  const extraCols = (expandable ? 1 : 0) + (rowActions ? 1 : 0);\n  const expandedColSpan = columns.length + extraCols;\n  const totalCols = columns.length + extraCols;\n\n  // Loading state (EC-7: loading > empty)\n  if (loading) {\n    return (\n      <div className={cn(\"w-full\", className)}>\n        <Table>\n          <Table.Header className={stickyHeader ? \"sticky top-0 bg-card\" : undefined}>\n            <Table.Row>\n              {expandable ? (\n                <Table.HeaderCell>\n                  <span className=\"sr-only\">Expand</span>\n                </Table.HeaderCell>\n              ) : null}\n              {columns.map((col) => (\n                <Table.HeaderCell key={col.key} align={col.align}>\n                  {col.label}\n                </Table.HeaderCell>\n              ))}\n              {rowActions ? (\n                <Table.HeaderCell>\n                  <span className=\"sr-only\">Actions</span>\n                </Table.HeaderCell>\n              ) : null}\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: 5 }, (_, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows are positional placeholders\n              <Table.Row key={`skeleton-${i}`}>\n                {Array.from({ length: totalCols }, (_, j) => (\n                  // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cells are positional placeholders\n                  <Table.Cell key={`s-${i}-${j}`}>\n                    <Skeleton className=\"h-4 w-full\" />\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  // Empty state (after loading check)\n  if (sortedData.length === 0) {\n    return (\n      <div className={cn(\"w-full\", className)}>\n        {emptyState ?? <EmptyState title=\"No data\" description=\"There's nothing here yet.\" />}\n      </div>\n    );\n  }\n\n  const totalPages = pagination ? Math.ceil(sortedData.length / effectivePageSize) : 1;\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      <Table>\n        <Table.Header className={stickyHeader ? \"sticky top-0 z-10 bg-card\" : undefined}>\n          <Table.Row>\n            {expandable ? (\n              <Table.HeaderCell>\n                <span className=\"sr-only\">Expand</span>\n              </Table.HeaderCell>\n            ) : null}\n            {columns.map((col) => {\n              const isSortable = col.sortable === true;\n              const isActive = sort?.key === col.key;\n              return (\n                <Table.HeaderCell\n                  key={col.key}\n                  align={col.align}\n                  onSort={isSortable ? () => handleSort(col.key) : undefined}\n                  sortDirection={isSortable ? (isActive ? sort?.direction : \"none\") : undefined}\n                  style={col.width ? { width: col.width } : undefined}\n                >\n                  {col.label}\n                </Table.HeaderCell>\n              );\n            })}\n            {rowActions ? (\n              <Table.HeaderCell>\n                <span className=\"sr-only\">Actions</span>\n              </Table.HeaderCell>\n            ) : null}\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {visibleData.map((row) => {\n            const key = rowKey(row);\n            const expandedContent = expandable ? expandable(row) : null;\n            const isExpandable = expandedContent !== null && expandedContent !== undefined;\n            const isExpanded = expanded.has(key);\n            return (\n              <Fragment key={key}>\n                <Table.Row>\n                  {expandable ? (\n                    <Table.Cell>\n                      {isExpandable ? (\n                        <button\n                          type=\"button\"\n                          onClick={() => toggleExpand(key)}\n                          aria-expanded={isExpanded}\n                          aria-controls={`expanded-${key}`}\n                          aria-label={isExpanded ? \"Collapse row\" : \"Expand row\"}\n                          className=\"inline-flex items-center justify-center rounded-md p-0.5 hover:bg-muted\"\n                        >\n                          {isExpanded ? (\n                            <ChevronDown aria-hidden=\"true\" className=\"size-4\" />\n                          ) : (\n                            <ChevronRight aria-hidden=\"true\" className=\"size-4\" />\n                          )}\n                        </button>\n                      ) : null}\n                    </Table.Cell>\n                  ) : null}\n                  {columns.map((col) => (\n                    <Table.Cell key={col.key} align={col.align} className={col.className}>\n                      {col.render\n                        ? col.render(row)\n                        : String((row as Record<string, unknown>)[col.key] ?? \"\")}\n                    </Table.Cell>\n                  ))}\n                  {rowActions ? (\n                    <Table.Cell align=\"right\">\n                      <DropdownMenu>\n                        <DropdownMenu.Trigger\n                          aria-label=\"Row actions\"\n                          className={cn(\n                            \"inline-flex size-7 items-center justify-center rounded-md\",\n                            \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n                            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                          )}\n                        >\n                          <MoreHorizontal aria-hidden=\"true\" className=\"size-4\" />\n                        </DropdownMenu.Trigger>\n                        <DropdownMenu.Content align=\"end\">{rowActions(row)}</DropdownMenu.Content>\n                      </DropdownMenu>\n                    </Table.Cell>\n                  ) : null}\n                </Table.Row>\n                {isExpanded && isExpandable ? (\n                  <tr id={`expanded-${key}`}>\n                    <td colSpan={expandedColSpan} className=\"bg-muted/30 p-4\">\n                      {expandedContent}\n                    </td>\n                  </tr>\n                ) : null}\n              </Fragment>\n            );\n          })}\n        </Table.Body>\n      </Table>\n      {pagination && totalPages > 1 ? (\n        <div className=\"mt-4 flex items-center justify-end\">\n          <Pagination\n            currentPage={currentPage + 1}\n            totalPages={totalPages}\n            onPageChange={handlePageChange}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport { DataTable };\n"
+      "content": "\"use client\";\n\nimport { ChevronDown, ChevronRight, MoreHorizontal } from \"lucide-react\";\nimport { Fragment, useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { DropdownMenu } from \"@/components/ui/dropdown-menu\";\nimport { EmptyState } from \"@/components/ui/empty-state\";\nimport { Pagination } from \"@/components/ui/pagination\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { Table } from \"@/components/ui/table\";\n\n/**\n * DataTable — generic, sortable, expandable composite over `<Table>`.\n *\n * Adds operator-grade entity-list patterns on top of the plain Table\n * primitive: sortable headers, sticky header, expandable rows\n * (multi-row by default), row action menus (Dropdown), client-side\n * pagination, loading skeleton rows, empty state. Both sort and\n * pagination support controlled OR uncontrolled mode (consumer\n * passes onSortChange / onPageChange to take over state).\n *\n * @example\n *   <DataTable\n *     columns={[\n *       { key: \"name\", label: \"Name\", sortable: true },\n *       { key: \"status\", label: \"Status\" },\n *     ]}\n *     data={domains}\n *     rowKey={(d) => d.id}\n *     expandable={(d) => d.status === \"pending\" ? <DnsRecords domain={d} /> : null}\n *     rowActions={(d) => (\n *       <>\n *         <DropdownMenu.Item onSelect={() => editDomain(d)}>Edit</DropdownMenu.Item>\n *         <DropdownMenu.Item onSelect={() => deleteDomain(d)}>Delete</DropdownMenu.Item>\n *       </>\n *     )}\n *   />\n */\nexport interface DataTableColumn<T> {\n  key: string;\n  label: ReactNode;\n  align?: \"left\" | \"center\" | \"right\";\n  sortable?: boolean;\n  width?: string;\n  render?: (row: T) => ReactNode;\n  className?: string;\n}\n\nexport interface DataTableSort {\n  key: string;\n  direction: \"asc\" | \"desc\";\n}\n\nexport interface DataTableProps<T> {\n  data: T[];\n  columns: DataTableColumn<T>[];\n  rowKey: (row: T) => string;\n  stickyHeader?: boolean;\n  expandable?: (row: T) => ReactNode | null;\n  expandMode?: \"single\" | \"multiple\";\n  rowActions?: (row: T) => ReactNode;\n  pagination?: {\n    pageSize: number;\n    controlledPage?: number;\n    onPageChange?: (page: number) => void;\n  } | null;\n  defaultSort?: DataTableSort;\n  sort?: DataTableSort | null;\n  onSortChange?: (sort: DataTableSort | null) => void;\n  loading?: boolean;\n  emptyState?: ReactNode;\n  className?: string;\n}\n\nfunction compareValues(a: unknown, b: unknown): number {\n  if (a === b) return 0;\n  if (a === null || a === undefined) return -1;\n  if (b === null || b === undefined) return 1;\n  if (typeof a === \"number\" && typeof b === \"number\") return a - b;\n  return String(a).localeCompare(String(b));\n}\n\nfunction DataTable<T>(props: DataTableProps<T>): ReactNode {\n  const {\n    data,\n    columns,\n    rowKey,\n    stickyHeader = true,\n    expandable,\n    expandMode = \"multiple\",\n    rowActions,\n    pagination,\n    defaultSort,\n    sort: controlledSort,\n    onSortChange,\n    loading = false,\n    emptyState,\n    className,\n  } = props;\n\n  const isControlledSort = onSortChange !== undefined;\n  const [uncontrolledSort, setUncontrolledSort] = useState<DataTableSort | null>(\n    defaultSort ?? null,\n  );\n  const sort = isControlledSort ? (controlledSort ?? null) : uncontrolledSort;\n\n  const isControlledPage = pagination?.controlledPage !== undefined;\n  const [uncontrolledPage, setUncontrolledPage] = useState(0);\n  const currentPage = isControlledPage ? (pagination?.controlledPage ?? 0) : uncontrolledPage;\n\n  // EC-9: clamp pageSize to >= 1 to avoid divide-by-zero / infinite render\n  const effectivePageSize = Math.max(1, pagination?.pageSize ?? 10);\n\n  const [expanded, setExpanded] = useState<Set<string>>(new Set());\n\n  function handleSort(columnKey: string) {\n    // Cycle: none → asc → desc → none\n    let nextSort: DataTableSort | null;\n    if (sort?.key !== columnKey) {\n      nextSort = { key: columnKey, direction: \"asc\" };\n    } else if (sort.direction === \"asc\") {\n      nextSort = { key: columnKey, direction: \"desc\" };\n    } else {\n      nextSort = null;\n    }\n    if (isControlledSort) {\n      onSortChange?.(nextSort);\n    } else {\n      setUncontrolledSort(nextSort);\n      // EC-8: sort change resets pagination to page 0\n      if (!isControlledPage) setUncontrolledPage(0);\n    }\n  }\n\n  function handlePageChange(page: number) {\n    // Pagination uses 1-indexed; internal state 0-indexed\n    const zeroIdx = page - 1;\n    if (isControlledPage) {\n      pagination?.onPageChange?.(zeroIdx);\n    } else {\n      setUncontrolledPage(zeroIdx);\n    }\n  }\n\n  function toggleExpand(key: string) {\n    if (expandMode === \"single\") {\n      setExpanded((prev) => (prev.has(key) ? new Set() : new Set([key])));\n    } else {\n      setExpanded((prev) => {\n        const next = new Set(prev);\n        if (next.has(key)) {\n          next.delete(key);\n        } else {\n          next.add(key);\n        }\n        return next;\n      });\n    }\n  }\n\n  // Apply client-side sort in uncontrolled mode\n  const sortedData = useMemo(() => {\n    if (isControlledSort || sort === null) return data;\n    const col = columns.find((c) => c.key === sort.key);\n    if (!col) return data;\n    const sorted = [...data].sort((a, b) => {\n      const aVal = col.render\n        ? null\n        : (a as Record<string, unknown>)[sort.key as keyof T as string];\n      const bVal = col.render\n        ? null\n        : (b as Record<string, unknown>)[sort.key as keyof T as string];\n      const cmp = compareValues(aVal, bVal);\n      return sort.direction === \"asc\" ? cmp : -cmp;\n    });\n    return sorted;\n  }, [data, sort, isControlledSort, columns]);\n\n  // Apply client-side pagination in uncontrolled mode\n  const visibleData = useMemo(() => {\n    if (!pagination) return sortedData;\n    if (isControlledPage) return sortedData; // consumer pre-sliced\n    const start = currentPage * effectivePageSize;\n    return sortedData.slice(start, start + effectivePageSize);\n  }, [sortedData, pagination, isControlledPage, currentPage, effectivePageSize]);\n\n  // EC-1 fix: compute colSpan accounting for chevron + actions columns\n  const extraCols = (expandable ? 1 : 0) + (rowActions ? 1 : 0);\n  const expandedColSpan = columns.length + extraCols;\n  const totalCols = columns.length + extraCols;\n\n  // Loading state (EC-7: loading > empty)\n  if (loading) {\n    return (\n      <div data-slot=\"data-table\" className={cn(\"w-full\", className)}>\n        <Table>\n          <Table.Header className={stickyHeader ? \"sticky top-0 bg-card\" : undefined}>\n            <Table.Row>\n              {expandable ? (\n                <Table.HeaderCell>\n                  <span className=\"sr-only\">Expand</span>\n                </Table.HeaderCell>\n              ) : null}\n              {columns.map((col) => (\n                <Table.HeaderCell key={col.key} align={col.align}>\n                  {col.label}\n                </Table.HeaderCell>\n              ))}\n              {rowActions ? (\n                <Table.HeaderCell>\n                  <span className=\"sr-only\">Actions</span>\n                </Table.HeaderCell>\n              ) : null}\n            </Table.Row>\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: 5 }, (_, i) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows are positional placeholders\n              <Table.Row key={`skeleton-${i}`}>\n                {Array.from({ length: totalCols }, (_, j) => (\n                  // biome-ignore lint/suspicious/noArrayIndexKey: skeleton cells are positional placeholders\n                  <Table.Cell key={`s-${i}-${j}`}>\n                    <Skeleton className=\"h-4 w-full\" />\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  // Empty state (after loading check)\n  if (sortedData.length === 0) {\n    return (\n      <div className={cn(\"w-full\", className)}>\n        {emptyState ?? <EmptyState title=\"No data\" description=\"There's nothing here yet.\" />}\n      </div>\n    );\n  }\n\n  const totalPages = pagination ? Math.ceil(sortedData.length / effectivePageSize) : 1;\n\n  return (\n    <div className={cn(\"w-full\", className)}>\n      <Table>\n        <Table.Header className={stickyHeader ? \"sticky top-0 z-10 bg-card\" : undefined}>\n          <Table.Row>\n            {expandable ? (\n              <Table.HeaderCell>\n                <span className=\"sr-only\">Expand</span>\n              </Table.HeaderCell>\n            ) : null}\n            {columns.map((col) => {\n              const isSortable = col.sortable === true;\n              const isActive = sort?.key === col.key;\n              return (\n                <Table.HeaderCell\n                  key={col.key}\n                  align={col.align}\n                  onSort={isSortable ? () => handleSort(col.key) : undefined}\n                  sortDirection={isSortable ? (isActive ? sort?.direction : \"none\") : undefined}\n                  style={col.width ? { width: col.width } : undefined}\n                >\n                  {col.label}\n                </Table.HeaderCell>\n              );\n            })}\n            {rowActions ? (\n              <Table.HeaderCell>\n                <span className=\"sr-only\">Actions</span>\n              </Table.HeaderCell>\n            ) : null}\n          </Table.Row>\n        </Table.Header>\n        <Table.Body>\n          {visibleData.map((row) => {\n            const key = rowKey(row);\n            const expandedContent = expandable ? expandable(row) : null;\n            const isExpandable = expandedContent !== null && expandedContent !== undefined;\n            const isExpanded = expanded.has(key);\n            return (\n              <Fragment key={key}>\n                <Table.Row>\n                  {expandable ? (\n                    <Table.Cell>\n                      {isExpandable ? (\n                        <button\n                          type=\"button\"\n                          onClick={() => toggleExpand(key)}\n                          aria-expanded={isExpanded}\n                          aria-controls={`expanded-${key}`}\n                          aria-label={isExpanded ? \"Collapse row\" : \"Expand row\"}\n                          className=\"inline-flex items-center justify-center rounded-md p-0.5 hover:bg-muted\"\n                        >\n                          {isExpanded ? (\n                            <ChevronDown aria-hidden=\"true\" className=\"size-4\" />\n                          ) : (\n                            <ChevronRight aria-hidden=\"true\" className=\"size-4\" />\n                          )}\n                        </button>\n                      ) : null}\n                    </Table.Cell>\n                  ) : null}\n                  {columns.map((col) => (\n                    <Table.Cell key={col.key} align={col.align} className={col.className}>\n                      {col.render\n                        ? col.render(row)\n                        : String((row as Record<string, unknown>)[col.key] ?? \"\")}\n                    </Table.Cell>\n                  ))}\n                  {rowActions ? (\n                    <Table.Cell align=\"right\">\n                      <DropdownMenu>\n                        <DropdownMenu.Trigger\n                          aria-label=\"Row actions\"\n                          className={cn(\n                            \"inline-flex size-7 items-center justify-center rounded-md\",\n                            \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n                            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n                          )}\n                        >\n                          <MoreHorizontal aria-hidden=\"true\" className=\"size-4\" />\n                        </DropdownMenu.Trigger>\n                        <DropdownMenu.Content align=\"end\">{rowActions(row)}</DropdownMenu.Content>\n                      </DropdownMenu>\n                    </Table.Cell>\n                  ) : null}\n                </Table.Row>\n                {isExpanded && isExpandable ? (\n                  <tr id={`expanded-${key}`}>\n                    <td colSpan={expandedColSpan} className=\"bg-muted/30 p-4\">\n                      {expandedContent}\n                    </td>\n                  </tr>\n                ) : null}\n              </Fragment>\n            );\n          })}\n        </Table.Body>\n      </Table>\n      {pagination && totalPages > 1 ? (\n        <div className=\"mt-4 flex items-center justify-end\">\n          <Pagination\n            currentPage={currentPage + 1}\n            totalPages={totalPages}\n            onPageChange={handlePageChange}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport { DataTable };\n"
     }
   ]
 }

package/registry/r/deployment-row.json

@@ -17,7 +17,7 @@
       "path": "components/composites/deployment-row/deployment-row.tsx",
       "type": "registry:block",
       "target": "components/blocks/deployment-row.tsx",
-      "content": "import { GitCommit } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Badge } from \"@/components/ui/badge\";\n\nexport type DeploymentStatus =\n  | \"queued\"\n  | \"building\"\n  | \"deploying\"\n  | \"live\"\n  | \"failed\"\n  | \"cancelled\";\n\nconst statusToVariant: Record<\n  DeploymentStatus,\n  \"default\" | \"primary\" | \"success\" | \"warning\" | \"destructive\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"default\",\n};\n\nconst statusToDotTone: Record<\n  DeploymentStatus,\n  \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"muted\",\n};\n\nconst statusLabels: Record<DeploymentStatus, string> = {\n  queued: \"Queued\",\n  building: \"Building\",\n  deploying: \"Deploying\",\n  live: \"Live\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nconst isAnimated = (status: DeploymentStatus) =>\n  status === \"building\" || status === \"deploying\" || status === \"queued\";\n\nexport interface Deployment {\n  id: string;\n  status: DeploymentStatus;\n  environment: string;\n  branch: string;\n  commitSha: string;\n  commitMessage: string;\n  author?: { name: string; avatarUrl?: string };\n  duration?: string;\n  timeAgo: string;\n}\n\ninterface DeploymentRowProps extends HTMLAttributes<HTMLDivElement> {\n  deployment: Deployment;\n  actions?: ReactNode;\n}\n\n/**\n * DeploymentRow — one row in a deployment list (table-ish layout).\n *\n * Inspired by Vercel/Railway deployment lists. Composes Badge + Badge.Dot for status,\n * mono font for SHA/branch, muted-foreground for metadata.\n */\nconst DeploymentRow = forwardRef<HTMLDivElement, DeploymentRowProps>(\n  ({ className, deployment, actions, ...props }, ref) => {\n    const variant = statusToVariant[deployment.status];\n    const tone = statusToDotTone[deployment.status];\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"grid grid-cols-[auto_1fr_auto] items-center gap-4 border-border/40 border-b px-4 py-3\",\n          \"last:border-b-0\",\n          \"transition-colors hover:bg-muted/40\",\n          className,\n        )}\n        {...props}\n      >\n        <Badge variant={variant} className=\"min-w-[88px] justify-center\">\n          <Badge.Dot tone={tone} pulse={isAnimated(deployment.status)} />\n          {statusLabels[deployment.status]}\n        </Badge>\n\n        <div className=\"min-w-0\">\n          <p className=\"truncate font-medium text-body-sm text-foreground\">\n            {deployment.commitMessage}\n          </p>\n          <p className=\"mt-0.5 flex flex-wrap items-center gap-2 text-body-sm text-muted-foreground\">\n            <span className=\"font-mono text-code-sm\">{deployment.environment}</span>\n            <span aria-hidden=\"true\">·</span>\n            <span className=\"inline-flex items-center gap-1 font-mono text-code-sm\">\n              <GitCommit className=\"size-3\" /> {deployment.commitSha.slice(0, 7)}\n            </span>\n            <span aria-hidden=\"true\">·</span>\n            <span className=\"font-mono text-code-sm\">{deployment.branch}</span>\n            {deployment.author ? (\n              <>\n                <span aria-hidden=\"true\">·</span>\n                <span>by {deployment.author.name}</span>\n              </>\n            ) : null}\n            {deployment.duration ? (\n              <>\n                <span aria-hidden=\"true\">·</span>\n                <span className=\"font-mono text-code-sm\">{deployment.duration}</span>\n              </>\n            ) : null}\n            <span aria-hidden=\"true\">·</span>\n            <span>{deployment.timeAgo}</span>\n          </p>\n        </div>\n\n        {actions ? <div className=\"flex items-center gap-1\">{actions}</div> : null}\n      </div>\n    );\n  },\n);\nDeploymentRow.displayName = \"DeploymentRow\";\n\nexport { DeploymentRow };\n"
+      "content": "import { GitCommit } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Badge } from \"@/components/ui/badge\";\n\nexport type DeploymentStatus =\n  | \"queued\"\n  | \"building\"\n  | \"deploying\"\n  | \"live\"\n  | \"failed\"\n  | \"cancelled\";\n\nconst statusToVariant: Record<\n  DeploymentStatus,\n  \"default\" | \"primary\" | \"success\" | \"warning\" | \"destructive\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"default\",\n};\n\nconst statusToDotTone: Record<\n  DeploymentStatus,\n  \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"muted\"\n> = {\n  queued: \"warning\",\n  building: \"primary\",\n  deploying: \"primary\",\n  live: \"success\",\n  failed: \"destructive\",\n  cancelled: \"muted\",\n};\n\nconst statusLabels: Record<DeploymentStatus, string> = {\n  queued: \"Queued\",\n  building: \"Building\",\n  deploying: \"Deploying\",\n  live: \"Live\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nconst isAnimated = (status: DeploymentStatus) =>\n  status === \"building\" || status === \"deploying\" || status === \"queued\";\n\nexport interface Deployment {\n  id: string;\n  status: DeploymentStatus;\n  environment: string;\n  branch: string;\n  commitSha: string;\n  commitMessage: string;\n  author?: { name: string; avatarUrl?: string };\n  duration?: string;\n  timeAgo: string;\n}\n\ninterface DeploymentRowProps extends HTMLAttributes<HTMLDivElement> {\n  deployment: Deployment;\n  actions?: ReactNode;\n}\n\n/**\n * DeploymentRow — one row in a deployment list (table-ish layout).\n *\n * Inspired by Vercel/Railway deployment lists. Composes Badge + Badge.Dot for status,\n * mono font for SHA/branch, muted-foreground for metadata.\n */\nconst DeploymentRow = forwardRef<HTMLDivElement, DeploymentRowProps>(\n  ({ className, deployment, actions, ...props }, ref) => {\n    const variant = statusToVariant[deployment.status];\n    const tone = statusToDotTone[deployment.status];\n    return (\n      <div\n        data-slot=\"deployment-row\"\n        ref={ref}\n        className={cn(\n          \"grid grid-cols-[auto_1fr_auto] items-center gap-4 border-border/40 border-b px-4 py-3\",\n          \"last:border-b-0\",\n          \"transition-colors hover:bg-muted/40\",\n          className,\n        )}\n        {...props}\n      >\n        <Badge variant={variant} className=\"min-w-[88px] justify-center\">\n          <Badge.Dot tone={tone} pulse={isAnimated(deployment.status)} />\n          {statusLabels[deployment.status]}\n        </Badge>\n\n        <div className=\"min-w-0\">\n          <p className=\"truncate font-medium text-body-sm text-foreground\">\n            {deployment.commitMessage}\n          </p>\n          <p className=\"mt-0.5 flex flex-wrap items-center gap-2 text-body-sm text-muted-foreground\">\n            <span className=\"font-mono text-code-sm\">{deployment.environment}</span>\n            <span aria-hidden=\"true\">·</span>\n            <span className=\"inline-flex items-center gap-1 font-mono text-code-sm\">\n              <GitCommit className=\"size-3\" /> {deployment.commitSha.slice(0, 7)}\n            </span>\n            <span aria-hidden=\"true\">·</span>\n            <span className=\"font-mono text-code-sm\">{deployment.branch}</span>\n            {deployment.author ? (\n              <>\n                <span aria-hidden=\"true\">·</span>\n                <span>by {deployment.author.name}</span>\n              </>\n            ) : null}\n            {deployment.duration ? (\n              <>\n                <span aria-hidden=\"true\">·</span>\n                <span className=\"font-mono text-code-sm\">{deployment.duration}</span>\n              </>\n            ) : null}\n            <span aria-hidden=\"true\">·</span>\n            <span>{deployment.timeAgo}</span>\n          </p>\n        </div>\n\n        {actions ? <div className=\"flex items-center gap-1\">{actions}</div> : null}\n      </div>\n    );\n  },\n);\nDeploymentRow.displayName = \"DeploymentRow\";\n\nexport { DeploymentRow };\n"
     }
   ]
 }

package/registry/r/dialog.json

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

package/registry/r/diff-viewer.json

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

package/registry/r/domain-config.json

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

package/registry/r/dropdown-menu.json

@@ -3,7 +3,7 @@
   "name": "dropdown-menu",
   "type": "registry:ui",
   "title": "DropdownMenu",
-  "description": "Accessible dropdown menu primitive built on @radix-ui/react-dropdown-menu. Sub-components attached via Object.assign (Trigger, Content, Item, CheckboxItem, RadioItem, Label, Separator, Shortcut, Group, Sub, SubTrigger, SubContent, RadioGroup). Styled with @usetheo/ui design tokens. Consolidates the 5 prior direct-Radix usages under a single wrapper.",
+  "description": "Accessible dropdown menu primitive built on @radix-ui/react-dropdown-menu. Sub-components attached via Object.assign (Trigger, Content, Item, CheckboxItem, RadioItem, Label, Separator, Shortcut, Group, Sub, SubTrigger, SubContent, RadioGroup). Styled with @theokit/ui design tokens. Consolidates the 5 prior direct-Radix usages under a single wrapper.",
   "dependencies": [
     "@radix-ui/react-dropdown-menu",
     "lucide-react"
@@ -17,7 +17,7 @@
       "path": "components/primitives/dropdown-menu/dropdown-menu.tsx",
       "type": "registry:ui",
       "target": "components/ui/dropdown-menu.tsx",
-      "content": "import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronRight, Circle } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * DropdownMenu — accessible menu primitive built on Radix.\n *\n * Composition (single import surface):\n *   <DropdownMenu>\n *     <DropdownMenu.Trigger>…</DropdownMenu.Trigger>\n *     <DropdownMenu.Content>\n *       <DropdownMenu.Label>Section</DropdownMenu.Label>\n *       <DropdownMenu.Item onSelect={…}>Edit</DropdownMenu.Item>\n *       <DropdownMenu.Separator />\n *       <DropdownMenu.Item disabled>Delete</DropdownMenu.Item>\n *     </DropdownMenu.Content>\n *   </DropdownMenu>\n *\n * The primitive consolidates 5 prior direct-Radix usages\n * (`model-selector`, `intent-selector`, `agent-profile`,\n * `theme-switcher`, `theo-code-shell`) under a single styled\n * wrapper so consumers get consistent visuals + the design tokens.\n *\n * a11y note for tests: Radix's focus-guard spans intentionally\n * violate `aria-hidden-focus`. Tests should pass\n * `{ rules: { \"aria-hidden-focus\": { enabled: false } } }` to axe.\n */\n\nconst Trigger = DropdownMenuPrimitive.Trigger;\nconst Portal = DropdownMenuPrimitive.Portal;\nconst Group = DropdownMenuPrimitive.Group;\nconst Sub = DropdownMenuPrimitive.Sub;\nconst RadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst Content = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 min-w-32 overflow-hidden rounded-lg border border-border/40 bg-card p-1\",\n        \"text-card-foreground shadow-md\",\n        \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n        className,\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n));\nContent.displayName = \"DropdownMenu.Content\";\n\ninterface ItemProps extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {\n  inset?: boolean;\n}\n\nconst Item = forwardRef<ElementRef<typeof DropdownMenuPrimitive.Item>, ItemProps>(\n  ({ className, inset, ...props }, ref) => (\n    <DropdownMenuPrimitive.Item\n      ref={ref}\n      className={cn(\n        \"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5\",\n        \"font-sans text-body-sm text-foreground outline-none\",\n        \"transition-colors\",\n        \"focus:bg-muted focus:text-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        inset && \"pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nItem.displayName = \"DropdownMenu.Item\";\n\nconst CheckboxItem = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    ref={ref}\n    checked={checked}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-md py-1.5 pr-2 pl-8\",\n      \"font-sans text-body-sm text-foreground outline-none\",\n      \"transition-colors focus:bg-muted focus:text-foreground\",\n      \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check aria-hidden=\"true\" className=\"size-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n));\nCheckboxItem.displayName = \"DropdownMenu.CheckboxItem\";\n\nconst RadioItem = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-md py-1.5 pr-2 pl-8\",\n      \"font-sans text-body-sm text-foreground outline-none\",\n      \"transition-colors focus:bg-muted focus:text-foreground\",\n      \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Circle aria-hidden=\"true\" className=\"size-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\nRadioItem.displayName = \"DropdownMenu.RadioItem\";\n\ninterface LabelProps extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {\n  inset?: boolean;\n}\n\nconst Label = forwardRef<ElementRef<typeof DropdownMenuPrimitive.Label>, LabelProps>(\n  ({ className, inset, ...props }, ref) => (\n    <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={cn(\n        \"px-2 py-1.5 font-medium font-sans text-label-caps text-muted-foreground uppercase tracking-wider\",\n        inset && \"pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nLabel.displayName = \"DropdownMenu.Label\";\n\nconst Separator = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border/40\", className)}\n    {...props}\n  />\n));\nSeparator.displayName = \"DropdownMenu.Separator\";\n\nconst Shortcut = ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    className={cn(\"ml-auto font-mono text-label text-muted-foreground\", className)}\n    {...props}\n  />\n);\nShortcut.displayName = \"DropdownMenu.Shortcut\";\n\nconst SubTrigger = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5\",\n      \"font-sans text-body-sm text-foreground outline-none\",\n      \"focus:bg-muted data-[state=open]:bg-muted\",\n      inset && \"pl-8\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight aria-hidden=\"true\" className=\"ml-auto size-3.5\" />\n  </DropdownMenuPrimitive.SubTrigger>\n));\nSubTrigger.displayName = \"DropdownMenu.SubTrigger\";\n\nconst SubContent = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-32 overflow-hidden rounded-lg border border-border/40 bg-card p-1\",\n      \"text-card-foreground shadow-md\",\n      \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n      className,\n    )}\n    {...props}\n  />\n));\nSubContent.displayName = \"DropdownMenu.SubContent\";\n\ntype DropdownMenuRoot = typeof DropdownMenuPrimitive.Root & {\n  Trigger: typeof Trigger;\n  Portal: typeof Portal;\n  Content: typeof Content;\n  Item: typeof Item;\n  CheckboxItem: typeof CheckboxItem;\n  RadioItem: typeof RadioItem;\n  Label: typeof Label;\n  Separator: typeof Separator;\n  Shortcut: typeof Shortcut;\n  Group: typeof Group;\n  Sub: typeof Sub;\n  SubTrigger: typeof SubTrigger;\n  SubContent: typeof SubContent;\n  RadioGroup: typeof RadioGroup;\n};\n\nconst DropdownMenu: DropdownMenuRoot = Object.assign(DropdownMenuPrimitive.Root, {\n  Trigger,\n  Portal,\n  Content,\n  Item,\n  CheckboxItem,\n  RadioItem,\n  Label,\n  Separator,\n  Shortcut,\n  Group,\n  Sub,\n  SubTrigger,\n  SubContent,\n  RadioGroup,\n});\n\nexport { DropdownMenu };\n"
+      "content": "import * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check, ChevronRight, Circle } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef, HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * DropdownMenu — accessible menu primitive built on Radix.\n *\n * Composition (single import surface):\n *   <DropdownMenu>\n *     <DropdownMenu.Trigger>…</DropdownMenu.Trigger>\n *     <DropdownMenu.Content>\n *       <DropdownMenu.Label>Section</DropdownMenu.Label>\n *       <DropdownMenu.Item onSelect={…}>Edit</DropdownMenu.Item>\n *       <DropdownMenu.Separator />\n *       <DropdownMenu.Item disabled>Delete</DropdownMenu.Item>\n *     </DropdownMenu.Content>\n *   </DropdownMenu>\n *\n * The primitive consolidates 5 prior direct-Radix usages\n * (`model-selector`, `intent-selector`, `agent-profile`,\n * `theme-switcher`, `theo-code-shell`) under a single styled\n * wrapper so consumers get consistent visuals + the design tokens.\n *\n * a11y note for tests: Radix's focus-guard spans intentionally\n * violate `aria-hidden-focus`. Tests should pass\n * `{ rules: { \"aria-hidden-focus\": { enabled: false } } }` to axe.\n */\n\nconst Trigger = DropdownMenuPrimitive.Trigger;\nconst Portal = DropdownMenuPrimitive.Portal;\nconst Group = DropdownMenuPrimitive.Group;\nconst Sub = DropdownMenuPrimitive.Sub;\nconst RadioGroup = DropdownMenuPrimitive.RadioGroup;\n\nconst Content = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>\n>(({ className, sideOffset = 4, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      data-slot=\"dropdown-menu-content\"\n      ref={ref}\n      sideOffset={sideOffset}\n      className={cn(\n        \"z-50 min-w-32 overflow-hidden rounded-lg border border-border/40 bg-card p-1\",\n        \"text-card-foreground shadow-md\",\n        \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n        className,\n      )}\n      {...props}\n    />\n  </DropdownMenuPrimitive.Portal>\n));\nContent.displayName = \"DropdownMenu.Content\";\n\ninterface ItemProps extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {\n  inset?: boolean;\n}\n\nconst Item = forwardRef<ElementRef<typeof DropdownMenuPrimitive.Item>, ItemProps>(\n  ({ className, inset, ...props }, ref) => (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      ref={ref}\n      className={cn(\n        \"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5\",\n        \"font-sans text-body-sm text-foreground outline-none\",\n        \"transition-colors\",\n        \"focus:bg-muted focus:text-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n        inset && \"pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nItem.displayName = \"DropdownMenu.Item\";\n\nconst CheckboxItem = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n  <DropdownMenuPrimitive.CheckboxItem\n    data-slot=\"dropdown-menu-checkbox-item\"\n    ref={ref}\n    checked={checked}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-md py-1.5 pr-2 pl-8\",\n      \"font-sans text-body-sm text-foreground outline-none\",\n      \"transition-colors focus:bg-muted focus:text-foreground\",\n      \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Check aria-hidden=\"true\" className=\"size-4\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.CheckboxItem>\n));\nCheckboxItem.displayName = \"DropdownMenu.CheckboxItem\";\n\nconst RadioItem = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.RadioItem\n    data-slot=\"dropdown-menu-radio-item\"\n    ref={ref}\n    className={cn(\n      \"relative flex cursor-default select-none items-center rounded-md py-1.5 pr-2 pl-8\",\n      \"font-sans text-body-sm text-foreground outline-none\",\n      \"transition-colors focus:bg-muted focus:text-foreground\",\n      \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <span className=\"absolute left-2 flex size-3.5 items-center justify-center\">\n      <DropdownMenuPrimitive.ItemIndicator>\n        <Circle aria-hidden=\"true\" className=\"size-2 fill-current\" />\n      </DropdownMenuPrimitive.ItemIndicator>\n    </span>\n    {children}\n  </DropdownMenuPrimitive.RadioItem>\n));\nRadioItem.displayName = \"DropdownMenu.RadioItem\";\n\ninterface LabelProps extends ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {\n  inset?: boolean;\n}\n\nconst Label = forwardRef<ElementRef<typeof DropdownMenuPrimitive.Label>, LabelProps>(\n  ({ className, inset, ...props }, ref) => (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      ref={ref}\n      className={cn(\n        \"px-2 py-1.5 font-medium font-sans text-label-caps text-muted-foreground uppercase tracking-wider\",\n        inset && \"pl-8\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nLabel.displayName = \"DropdownMenu.Label\";\n\nconst Separator = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    data-slot=\"dropdown-menu-separator\"\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-border/40\", className)}\n    {...props}\n  />\n));\nSeparator.displayName = \"DropdownMenu.Separator\";\n\nconst Shortcut = ({ className, ...props }: HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    className={cn(\"ml-auto font-mono text-label text-muted-foreground\", className)}\n    {...props}\n  />\n);\nShortcut.displayName = \"DropdownMenu.Shortcut\";\n\nconst SubTrigger = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }\n>(({ className, inset, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubTrigger\n    data-slot=\"dropdown-menu-sub-trigger\"\n    ref={ref}\n    className={cn(\n      \"flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1.5\",\n      \"font-sans text-body-sm text-foreground outline-none\",\n      \"focus:bg-muted data-[state=open]:bg-muted\",\n      inset && \"pl-8\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n    <ChevronRight aria-hidden=\"true\" className=\"ml-auto size-3.5\" />\n  </DropdownMenuPrimitive.SubTrigger>\n));\nSubTrigger.displayName = \"DropdownMenu.SubTrigger\";\n\nconst SubContent = forwardRef<\n  ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.SubContent\n    data-slot=\"dropdown-menu-sub-content\"\n    ref={ref}\n    className={cn(\n      \"z-50 min-w-32 overflow-hidden rounded-lg border border-border/40 bg-card p-1\",\n      \"text-card-foreground shadow-md\",\n      \"data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out\",\n      className,\n    )}\n    {...props}\n  />\n));\nSubContent.displayName = \"DropdownMenu.SubContent\";\n\ntype DropdownMenuRoot = typeof DropdownMenuPrimitive.Root & {\n  Trigger: typeof Trigger;\n  Portal: typeof Portal;\n  Content: typeof Content;\n  Item: typeof Item;\n  CheckboxItem: typeof CheckboxItem;\n  RadioItem: typeof RadioItem;\n  Label: typeof Label;\n  Separator: typeof Separator;\n  Shortcut: typeof Shortcut;\n  Group: typeof Group;\n  Sub: typeof Sub;\n  SubTrigger: typeof SubTrigger;\n  SubContent: typeof SubContent;\n  RadioGroup: typeof RadioGroup;\n};\n\nconst DropdownMenu: DropdownMenuRoot = Object.assign(DropdownMenuPrimitive.Root, {\n  Trigger,\n  Portal,\n  Content,\n  Item,\n  CheckboxItem,\n  RadioItem,\n  Label,\n  Separator,\n  Shortcut,\n  Group,\n  Sub,\n  SubTrigger,\n  SubContent,\n  RadioGroup,\n});\n\nexport { DropdownMenu };\n"
     }
   ]
 }

package/registry/r/empty-state.json

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

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

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