@usetheo/ui 0.1.0-next.0 → 0.3.0-next.0

package/registry/r/auto-compact-notice.json

@@ -8,8 +8,8 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/avatar.json

@@ -9,8 +9,8 @@
     "class-variance-authority"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/badge.json

@@ -8,15 +8,15 @@
     "class-variance-authority"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {
       "path": "components/primitives/badge/badge.tsx",
       "type": "registry:ui",
       "target": "components/ui/badge.tsx",
-      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Badge — small status / tag indicator.\n *\n * Variants:\n *   - default     muted surface, hairline border\n *   - primary     violet outline + soft violet bg\n *   - accent      burnt sienna (celebration / pro / beta)\n *   - success     deploy succeeded\n *   - warning     attention needed\n *   - destructive failed\n *   - outline     transparent, just border\n *\n * Status dots are inlined via `<Badge.Dot />` for things like \"Building…\",\n * \"Running\", \"Failed\" rows in deployment lists.\n */\nconst badgeVariants = cva(\n  [\n    \"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5\",\n    \"font-sans text-label uppercase tracking-wider\",\n    \"transition-colors\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"border-border/40 bg-muted text-muted-foreground\",\n        primary: \"border-primary/30 bg-primary/10 text-primary\",\n        accent: \"border-accent/40 bg-accent/15 text-accent\",\n        success: \"border-success/40 bg-success/15 text-success\",\n        warning: \"border-warning/40 bg-warning/15 text-warning\",\n        destructive: \"border-destructive/40 bg-destructive/15 text-destructive\",\n        outline: \"border-border bg-transparent text-foreground\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(({ className, variant, ...props }, ref) => (\n  <span ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />\n));\nBadge.displayName = \"Badge\";\n\ninterface BadgeDotProps extends HTMLAttributes<HTMLSpanElement> {\n  pulse?: boolean;\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"destructive\" | \"muted\";\n}\n\nconst toneClass: Record<NonNullable<BadgeDotProps[\"tone\"]>, string> = {\n  primary: \"bg-primary\",\n  accent: \"bg-accent\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  destructive: \"bg-destructive\",\n  muted: \"bg-muted-foreground\",\n};\n\nconst Dot = forwardRef<HTMLSpanElement, BadgeDotProps>(\n  ({ className, pulse = false, tone = \"success\", ...props }, ref) => (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(\n        \"inline-block size-1.5 rounded-full\",\n        toneClass[tone],\n        pulse && \"animate-pulse-glow\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nDot.displayName = \"Badge.Dot\";\n\nconst BadgeWithDot = Badge as typeof Badge & { Dot: typeof Dot };\nBadgeWithDot.Dot = Dot;\n\nexport { BadgeWithDot as Badge, badgeVariants };\n"
+      "content": "import { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Badge — small status / tag indicator.\n *\n * Variants:\n *   - default     muted surface, hairline border\n *   - primary     violet outline + soft violet bg\n *   - accent      burnt sienna (celebration / pro / beta)\n *   - success     deploy succeeded\n *   - warning     attention needed\n *   - destructive failed\n *   - outline     transparent, just border\n *\n * Status dots are inlined via `<Badge.Dot />` for things like \"Building…\",\n * \"Running\", \"Failed\" rows in deployment lists.\n */\nconst badgeVariants = cva(\n  [\n    \"inline-flex items-center gap-1.5 rounded-full border\",\n    \"font-sans uppercase tracking-wider\",\n    \"transition-colors\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"border-border/40 bg-muted text-muted-foreground\",\n        primary: \"border-primary/30 bg-primary/10 text-primary\",\n        accent: \"border-accent/40 bg-accent/15 text-accent\",\n        success: \"border-success/40 bg-success/15 text-success\",\n        warning: \"border-warning/40 bg-warning/15 text-warning\",\n        destructive: \"border-destructive/40 bg-destructive/15 text-destructive\",\n        outline: \"border-border bg-transparent text-foreground\",\n      },\n      size: {\n        sm: \"px-2 py-0.5 text-label-caps\",\n        md: \"px-2.5 py-0.5 text-label\",\n        lg: \"px-3 py-1 text-body-md\",\n      },\n    },\n    defaultVariants: { variant: \"default\", size: \"md\" },\n  },\n);\n\nexport interface BadgeProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nconst Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, variant, size, ...props }, ref) => (\n    <span ref={ref} className={cn(badgeVariants({ variant, size }), className)} {...props} />\n  ),\n);\nBadge.displayName = \"Badge\";\n\ninterface BadgeDotProps extends HTMLAttributes<HTMLSpanElement> {\n  pulse?: boolean;\n  tone?: \"primary\" | \"accent\" | \"success\" | \"warning\" | \"destructive\" | \"muted\";\n}\n\nconst toneClass: Record<NonNullable<BadgeDotProps[\"tone\"]>, string> = {\n  primary: \"bg-primary\",\n  accent: \"bg-accent\",\n  success: \"bg-success\",\n  warning: \"bg-warning\",\n  destructive: \"bg-destructive\",\n  muted: \"bg-muted-foreground\",\n};\n\nconst Dot = forwardRef<HTMLSpanElement, BadgeDotProps>(\n  ({ className, pulse = false, tone = \"success\", ...props }, ref) => (\n    <span\n      ref={ref}\n      aria-hidden=\"true\"\n      className={cn(\n        \"inline-block size-1.5 rounded-full\",\n        toneClass[tone],\n        pulse && \"animate-pulse-glow\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nDot.displayName = \"Badge.Dot\";\n\nconst BadgeWithDot = Badge as typeof Badge & { Dot: typeof Dot };\nBadgeWithDot.Dot = Dot;\n\nexport { BadgeWithDot as Badge, badgeVariants };\n"
     }
   ]
 }

package/registry/r/browser-controls.json

@@ -8,8 +8,8 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/build-log-stream.json

@@ -5,8 +5,8 @@
   "title": "BuildLogStream",
   "description": "Terminal-like log viewer with timestamps + level coloring.",
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/button.json

@@ -9,15 +9,15 @@
     "class-variance-authority"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {
       "path": "components/primitives/button/button.tsx",
       "type": "registry:ui",
       "target": "components/ui/button.tsx",
-      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Button — primitive action element in the Violet Forge design system.\n *\n * Variants:\n *   - primary    Theo violet fill, glow on hover (signature)\n *   - secondary  surface with hairline border\n *   - accent     burnt-sienna fill, celebratory actions\n *   - ghost      transparent, hover lifts surface\n *   - link       text-only, primary color, underline on hover\n *   - destructive  for irreversible actions\n *\n * Sizes: sm (32px) · md (40px, default) · lg (48px) · icon (square 40px)\n *\n * `asChild` swaps the root for the consumer's element (Radix Slot pattern).\n */\nconst buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg\",\n    // NIT-004: `font-medium` (500) aligns with the design-system.md UI weight.\n    // Previously `font-bold` (700) exceeded the normative 400/500/600 weight\n    // range declared for Geist Sans in the Violet Forge identity.\n    \"font-medium font-sans tracking-tight\",\n    \"transition-[box-shadow,background-color,color,transform] duration-base ease-out-soft\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          \"bg-primary text-primary-foreground\",\n          \"hover:bg-primary hover:shadow-glow\",\n          \"active:scale-[0.98] active:bg-primary-deep active:shadow-none\",\n        ],\n        secondary: [\n          \"border border-border bg-secondary text-secondary-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98]\",\n        ],\n        accent: [\"bg-accent text-accent-foreground\", \"hover:bg-accent-deep\", \"active:scale-[0.98]\"],\n        ghost: [\n          \"bg-transparent text-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98] active:bg-secondary\",\n        ],\n        link: [\n          \"bg-transparent text-primary underline-offset-4\",\n          \"hover:text-primary-deep hover:underline\",\n          \"h-auto p-0\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground\",\n          \"hover:bg-destructive/90\",\n          \"active:scale-[0.98]\",\n        ],\n      },\n      size: {\n        sm: \"h-8 px-3 text-body-sm\",\n        md: \"h-10 px-4 text-body-md\",\n        lg: \"h-12 px-6 text-body-lg\",\n        icon: \"h-10 w-10 p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, type, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        ref={ref}\n        type={asChild ? undefined : (type ?? \"button\")}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n"
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { forwardRef } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Button — primitive action element in the Violet Forge design system.\n *\n * Variants:\n *   - primary    Theo violet fill, glow on hover (signature)\n *   - secondary  surface with hairline border\n *   - accent     burnt-sienna fill, celebratory actions\n *   - ghost      transparent, hover lifts surface\n *   - link       text-only, primary color, underline on hover\n *   - destructive  for irreversible actions\n *\n * Sizes: sm (32px) · md (40px, default) · lg (48px) · icon (square 40px)\n *\n * `asChild` swaps the root for the consumer's element (Radix Slot pattern).\n */\nconst buttonVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg\",\n    // NIT-004: `font-medium` (500) aligns with the design-system.md UI weight.\n    // Previously `font-bold` (700) exceeded the normative 400/500/600 weight\n    // range declared for Geist Sans in the Violet Forge identity.\n    \"font-medium font-sans tracking-tight\",\n    \"transition-[box-shadow,background-color,color,transform] duration-base ease-out-soft\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          \"bg-primary text-primary-foreground\",\n          \"hover:bg-primary hover:shadow-glow\",\n          \"active:scale-[0.98] active:bg-primary-deep active:shadow-none\",\n        ],\n        secondary: [\n          \"border border-border bg-secondary text-secondary-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98]\",\n        ],\n        accent: [\"bg-accent text-accent-foreground\", \"hover:bg-accent-deep\", \"active:scale-[0.98]\"],\n        ghost: [\n          \"bg-transparent text-foreground\",\n          \"hover:bg-muted\",\n          \"active:scale-[0.98] active:bg-secondary\",\n        ],\n        link: [\n          \"bg-transparent text-primary underline-offset-4\",\n          \"hover:text-primary-deep hover:underline\",\n          \"h-auto p-0\",\n        ],\n        destructive: [\n          \"bg-destructive text-destructive-foreground\",\n          \"hover:bg-destructive/90\",\n          \"active:scale-[0.98]\",\n        ],\n      },\n      size: {\n        sm: \"h-8 px-3 text-body-sm\",\n        // md: tier ajustável via density (CSS var on :root). See D3 ADR of\n        // faang-density-tightening plan. Default `comfortable` density makes\n        // this 36px (--theo-control-h: 2.25rem). sm and lg stay hardcoded.\n        md: \"h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] text-body-sm\",\n        lg: \"h-11 px-4 text-body-md\",\n        icon: \"h-[var(--theo-control-h,2.25rem)] w-[var(--theo-control-h,2.25rem)] p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, asChild = false, type, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"button\";\n    return (\n      <Comp\n        ref={ref}\n        type={asChild ? undefined : (type ?? \"button\")}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      />\n    );\n  },\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n"
     }
   ]
 }

package/registry/r/capability-indicator.json

@@ -8,9 +8,9 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset",
-    "types"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
   ],
   "files": [
     {

package/registry/r/card.json

@@ -8,15 +8,15 @@
     "@radix-ui/react-slot"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {
       "path": "components/primitives/card/card.tsx",
       "type": "registry:ui",
       "target": "components/ui/card.tsx",
-      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Card — surface container for grouping related content.\n *\n * Composition pattern (shadcn-style):\n *   <Card>\n *     <Card.Header>\n *       <Card.Title>…</Card.Title>\n *       <Card.Description>…</Card.Description>\n *     </Card.Header>\n *     <Card.Body>…</Card.Body>\n *     <Card.Footer>…</Card.Footer>\n *   </Card>\n *\n * Variants are applied via Tailwind utility classes on the root.\n * Use `bg-dotted-violet` utility on a parent to get the signature page texture.\n */\n\nconst Root = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"rounded-xl border bg-card text-card-foreground shadow-md\",\n        \"transition-shadow duration-base ease-out-soft\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nRoot.displayName = \"Card\";\n\nconst Header = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-col gap-1.5 p-6 pb-3\", className)} {...props} />\n  ),\n);\nHeader.displayName = \"Card.Header\";\n\ninterface TitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * When true, renders the child element with the Card.Title styles applied\n   * (Radix Slot pattern). Use to swap the default `<h3>` for `<h1>` / `<h2>`\n   * when the heading hierarchy requires it.\n   */\n  asChild?: boolean;\n}\n\nconst Title = forwardRef<HTMLHeadingElement, TitleProps>(\n  ({ className, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"h3\";\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\"font-display text-foreground text-title-lg tracking-tight\", className)}\n        {...props}\n      />\n    );\n  },\n);\nTitle.displayName = \"Card.Title\";\n\nconst Description = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn(\"text-body-sm text-muted-foreground\", className)} {...props} />\n  ),\n);\nDescription.displayName = \"Card.Description\";\n\nconst Body = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} className={cn(\"p-6 pt-3\", className)} {...props} />\n  ),\n);\nBody.displayName = \"Card.Body\";\n\nconst Footer = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\"flex items-center gap-3 border-border/40 border-t p-6 pt-4\", className)}\n      {...props}\n    />\n  ),\n);\nFooter.displayName = \"Card.Footer\";\n\nconst Card = /*#__PURE__*/ Object.assign(Root, {\n  Header,\n  Title,\n  Description,\n  Body,\n  Footer,\n});\n\nexport { Card };\n"
+      "content": "import { Slot } from \"@radix-ui/react-slot\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { HTMLAttributes } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Card — surface container for grouping related content.\n *\n * Composition pattern (shadcn-style):\n *   <Card>\n *     <Card.Header>\n *       <Card.Title>…</Card.Title>\n *       <Card.Description>…</Card.Description>\n *     </Card.Header>\n *     <Card.Body>…</Card.Body>\n *     <Card.Footer>…</Card.Footer>\n *   </Card>\n *\n * The `size` prop on the root propagates to subparts via Context, so a\n * single declaration controls padding + heading scale across the compound.\n * Subparts used in isolation default to `md`. Subparts do NOT accept a `size`\n * prop of their own — use `className` for granular per-subpart tweaks.\n * (EC-8, edge-case review 2026-05-20.)\n */\n\ntype CardSize = \"sm\" | \"md\" | \"lg\";\n\ninterface CardContextValue {\n  size: CardSize;\n}\n\nconst CardContext = createContext<CardContextValue>({ size: \"md\" });\n\nconst useCardSize = (): CardSize => useContext(CardContext).size;\n\ninterface CardRootProps extends HTMLAttributes<HTMLDivElement> {\n  size?: CardSize;\n}\n\nconst Root = forwardRef<HTMLDivElement, CardRootProps>(\n  ({ className, size = \"md\", ...props }, ref) => (\n    <CardContext.Provider value={{ size }}>\n      <div\n        ref={ref}\n        className={cn(\n          \"rounded-xl border bg-card text-card-foreground shadow-md\",\n          \"transition-shadow duration-base ease-out-soft\",\n          className,\n        )}\n        {...props}\n      />\n    </CardContext.Provider>\n  ),\n);\nRoot.displayName = \"Card\";\n\nconst headerPadBySize: Record<CardSize, string> = {\n  sm: \"gap-1 p-3 pb-1.5\",\n  md: \"gap-1.5 p-5 pb-2.5\",\n  lg: \"gap-2 p-6 pb-3\",\n};\n\nconst Header = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const size = useCardSize();\n    return (\n      <div ref={ref} className={cn(\"flex flex-col\", headerPadBySize[size], className)} {...props} />\n    );\n  },\n);\nHeader.displayName = \"Card.Header\";\n\nconst titleFontBySize: Record<CardSize, string> = {\n  sm: \"text-title-md\",\n  md: \"text-title-lg\",\n  lg: \"text-headline\",\n};\n\ninterface TitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * When true, renders the child element with the Card.Title styles applied\n   * (Radix Slot pattern). Use to swap the default `<h3>` for `<h1>` / `<h2>`\n   * when the heading hierarchy requires it.\n   */\n  asChild?: boolean;\n}\n\nconst Title = forwardRef<HTMLHeadingElement, TitleProps>(\n  ({ className, asChild = false, ...props }, ref) => {\n    const Comp = asChild ? Slot : \"h3\";\n    const size = useCardSize();\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          \"font-display text-foreground tracking-tight\",\n          titleFontBySize[size],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTitle.displayName = \"Card.Title\";\n\nconst Description = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  ({ className, ...props }, ref) => (\n    <p ref={ref} className={cn(\"text-body-sm text-muted-foreground\", className)} {...props} />\n  ),\n);\nDescription.displayName = \"Card.Description\";\n\nconst bodyPadBySize: Record<CardSize, string> = {\n  sm: \"p-3 pt-1.5\",\n  md: \"p-5 pt-2.5\",\n  lg: \"p-6 pt-3\",\n};\n\nconst Body = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const size = useCardSize();\n    return <div ref={ref} className={cn(bodyPadBySize[size], className)} {...props} />;\n  },\n);\nBody.displayName = \"Card.Body\";\n\nconst footerPadBySize: Record<CardSize, string> = {\n  sm: \"gap-2 p-3 pt-2\",\n  md: \"gap-3 p-5 pt-3\",\n  lg: \"gap-4 p-6 pt-4\",\n};\n\nconst Footer = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => {\n    const size = useCardSize();\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex items-center border-border/40 border-t\",\n          footerPadBySize[size],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nFooter.displayName = \"Card.Footer\";\n\nconst Card = /*#__PURE__*/ Object.assign(Root, {\n  Header,\n  Title,\n  Description,\n  Body,\n  Footer,\n});\n\nexport { Card };\n"
     }
   ]
 }

package/registry/r/chat-composer.json

@@ -8,9 +8,9 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "button",
-    "cn",
-    "tailwind-preset"
+    "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/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/chat-message.json

@@ -6,9 +6,9 @@
   "description": "Single chat turn rendered as user bubble, assistant card, or system callout with accent border.",
   "dependencies": [],
   "registryDependencies": [
-    "chat-types",
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/chat-types.json",
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/chat-thread.json

@@ -6,8 +6,8 @@
   "description": "Simple vertical container that applies spacing + scroll.",
   "dependencies": [],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/checkbox.json

@@ -6,18 +6,19 @@
   "description": "Built on Radix Checkbox — accessible binary control with focus ring and indeterminate state support.",
   "dependencies": [
     "@radix-ui/react-checkbox",
+    "class-variance-authority",
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {
       "path": "components/primitives/checkbox/checkbox.tsx",
       "type": "registry:ui",
       "target": "components/ui/checkbox.tsx",
-      "content": "import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { Check, Minus } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Checkbox — built on Radix Checkbox.\n *\n * Supports tri-state via `checked=\"indeterminate\"`. Violet fill when on,\n * border-only when off. Themed via tokens (--primary, --background).\n */\nconst Checkbox = forwardRef<\n  ElementRef<typeof CheckboxPrimitive.Root>,\n  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer size-4 shrink-0 rounded-sm border border-border bg-card\",\n      \"transition-[background-color,border-color,box-shadow] duration-base ease-out-soft\",\n      \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n      \"disabled:cursor-not-allowed disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n      {props.checked === \"indeterminate\" ? (\n        <Minus className=\"size-3.5\" aria-hidden=\"true\" strokeWidth={3} />\n      ) : (\n        <Check className=\"size-3.5\" aria-hidden=\"true\" strokeWidth={3} />\n      )}\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n));\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n"
+      "content": "import * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { Check, Minus } from \"lucide-react\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Checkbox — built on Radix Checkbox.\n *\n * Supports tri-state via `checked=\"indeterminate\"`. Violet fill when on,\n * border-only when off. Themed via tokens (--primary, --background).\n *\n * The `size` prop accepts `\"sm\" | \"md\" | \"lg\"`. Default `md` preserves the\n * 16px box from before this prop existed. The `sm` size keeps a >=24px\n * effective tap target via an invisible expanded hit area (WCAG 2.5.5).\n */\nconst checkboxVariants = cva(\n  [\n    \"peer relative shrink-0 rounded-sm border border-border bg-card\",\n    \"transition-[background-color,border-color,box-shadow] duration-base ease-out-soft\",\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n    \"data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n    \"data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground\",\n    \"disabled:cursor-not-allowed disabled:opacity-50\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"size-3.5 before:absolute before:inset-[-5px] before:content-['']\",\n        md: \"size-4\",\n        lg: \"size-5\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\nconst iconClassBySize: Record<\n  NonNullable<VariantProps<typeof checkboxVariants>[\"size\"]>,\n  string\n> = {\n  sm: \"size-2.5\",\n  md: \"size-3.5\",\n  lg: \"size-3.5\",\n};\n\ninterface CheckboxProps\n  extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nconst Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  ({ className, size, ...props }, ref) => {\n    const iconClass = iconClassBySize[size ?? \"md\"];\n    return (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        className={cn(checkboxVariants({ size }), className)}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className=\"flex items-center justify-center text-current\">\n          {props.checked === \"indeterminate\" ? (\n            <Minus className={iconClass} aria-hidden=\"true\" strokeWidth={3} />\n          ) : (\n            <Check className={iconClass} aria-hidden=\"true\" strokeWidth={3} />\n          )}\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n  },\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox, checkboxVariants };\n"
     }
   ]
 }

package/registry/r/cn.json

@@ -13,7 +13,7 @@
       "path": "lib/cn.ts",
       "type": "registry:lib",
       "target": "lib/cn.ts",
-      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge Tailwind classes with conflict resolution.\n * Standard utility across all @usetheo/ui components.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"
+      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\n/**\n * Custom tailwind-merge instance taught about the Violet Forge typescale.\n *\n * Vanilla `tailwind-merge` groups every `text-*` class together — so\n * `text-label` (a font-size from the typescale) and `text-accent`\n * (a foreground color) clash and the last wins. With cva variants that\n * keep size + color on independent dimensions, this collapsed one of\n * them. Extending the `font-size` group with the typescale tokens\n * declared in `src/styles/tailwind-preset.ts` keeps size + color\n * independent during merge.\n */\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      \"font-size\": [\n        { text: [\"display-2xl\", \"display-xl\", \"display-lg\", \"display-md\"] },\n        { text: [\"headline\", \"title-lg\", \"title-md\"] },\n        { text: [\"body-lg\", \"body-md\", \"body-sm\"] },\n        { text: [\"label\", \"label-caps\"] },\n        { text: [\"code-md\", \"code-sm\"] },\n      ],\n    },\n  },\n});\n\n/**\n * Merge Tailwind classes with conflict resolution.\n * Standard utility across all @usetheo/ui components.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"
     }
   ]
 }

package/registry/r/command-palette.json

@@ -9,10 +9,10 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "dialog",
-    "tailwind-preset",
-    "types"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/dialog.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
   ],
   "files": [
     {

package/registry/r/context-card.json

@@ -8,9 +8,9 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset",
-    "types"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
   ],
   "files": [
     {

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

@@ -6,8 +6,8 @@
   "description": "Shows how much of the model's context window has been",
   "dependencies": [],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/cost-meter.json

@@ -8,8 +8,8 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

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

@@ -8,9 +8,9 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset",
-    "types"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
   ],
   "files": [
     {

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

@@ -8,8 +8,8 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

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

@@ -8,9 +8,9 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "cron-job-card",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/cron-job-card.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/deployment-row.json

@@ -8,9 +8,9 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "badge",
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/badge.json",
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/dialog.json

@@ -9,8 +9,8 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/diff-viewer.json

@@ -6,8 +6,8 @@
   "description": "Unified diff rendering, no external dep.",
   "dependencies": [],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/domain-config.json

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

package/registry/r/empty-state.json

@@ -5,9 +5,9 @@
   "title": "EmptyState",
   "description": "Visual placeholder for empty lists / first-run screens.",
   "registryDependencies": [
-    "cn",
-    "tailwind-preset",
-    "types"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
   ],
   "files": [
     {

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

@@ -8,11 +8,11 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "badge",
-    "button",
-    "cn",
-    "input",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/badge.json",
+    "https://usetheodev.github.io/theo-ui/r/button.json",
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/input.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

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

@@ -8,9 +8,9 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset",
-    "types"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json",
+    "https://usetheodev.github.io/theo-ui/r/types.json"
   ],
   "files": [
     {

package/registry/r/folder-selector.json

@@ -8,8 +8,8 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

package/registry/r/form-field.json

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

package/registry/r/hook-config.json

@@ -8,8 +8,8 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {

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

@@ -8,8 +8,8 @@
     "lucide-react"
   ],
   "registryDependencies": [
-    "cn",
-    "tailwind-preset"
+    "https://usetheodev.github.io/theo-ui/r/cn.json",
+    "https://usetheodev.github.io/theo-ui/r/tailwind-preset.json"
   ],
   "files": [
     {