bakethere 0.1.0

package/dist/cli.js

@@ -0,0 +1,5059 @@
+#!/usr/bin/env node
+"use strict";
+
+// src/cli.ts
+var import_commander4 = require("commander");
+
+// src/commands/list.ts
+var import_commander = require("commander");
+var import_prompts = require("@clack/prompts");
+
+// src/registry/components/button.ts
+var button = {
+  name: "button",
+  category: "primitives",
+  description: "Accessible button with variants, sizes, and loading state",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Button.tsx",
+      content: `"use client";
+
+import { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type { ButtonProps } from "./button.types";
+
+const variantClasses: Record<string, string> = {
+  solid:
+    "bg-[var(--bt-accent)] text-[var(--bt-text-inverse)] hover:bg-[var(--bt-accent-hover)] border border-transparent",
+  outline:
+    "bg-transparent text-[var(--bt-accent)] border border-[var(--bt-accent)] hover:bg-[var(--bt-accent-muted)]",
+  ghost:
+    "bg-transparent text-[var(--bt-text-primary)] border border-transparent hover:bg-[var(--bt-hover-bg)]",
+  destructive:
+    "bg-[var(--bt-destructive-bg)] text-[var(--bt-destructive)] border border-[var(--bt-destructive)] hover:opacity-80",
+};
+
+const sizeClasses: Record<string, string> = {
+  sm: "h-8 px-3 text-sm gap-1.5",
+  md: "h-10 px-4 text-sm gap-2",
+  lg: "h-12 px-6 text-base gap-2",
+  icon: "h-10 w-10 p-0",
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "solid",
+      size = "md",
+      theme,
+      isLoading = false,
+      leftIcon,
+      rightIcon,
+      disabled,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { theme: contextTheme } = useBakeThereTheme();
+    const activeTheme = theme ?? contextTheme;
+
+    return (
+      <button
+        ref={ref}
+        data-bt-theme={activeTheme}
+        disabled={disabled || isLoading}
+        className={cn(
+          "inline-flex items-center justify-center font-medium rounded-[var(--bt-radius-md)] transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+          "disabled:opacity-[var(--bt-disabled-opacity)] disabled:pointer-events-none",
+          variantClasses[variant],
+          sizeClasses[size],
+          className
+        )}
+        {...props}
+      >
+        {isLoading ? (
+          <svg
+            className="animate-spin h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            />
+          </svg>
+        ) : (
+          <>
+            {leftIcon && <span aria-hidden="true">{leftIcon}</span>}
+            {children}
+            {rightIcon && <span aria-hidden="true">{rightIcon}</span>}
+          </>
+        )}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "Button";
+`
+    },
+    {
+      name: "button.types.ts",
+      content: `import type { ButtonHTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export type ButtonVariant = "solid" | "outline" | "ghost" | "destructive";
+export type ButtonSize = "sm" | "md" | "lg" | "icon";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  theme?: BtTheme;
+  isLoading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/button-group.ts
+var buttonGroup = {
+  name: "button-group",
+  category: "primitives",
+  description: "Group buttons into a visually connected row",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "ButtonGroup.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type { ButtonGroupProps } from "./button-group.types";
+
+export function ButtonGroup({ className, children, ...props }: ButtonGroupProps) {
+  return (
+    <div className={cn("bt-button-group", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "button-group.types.ts",
+      content: `import type { HTMLAttributes } from "react";
+
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement> {}
+`
+    }
+  ]
+};
+
+// src/registry/components/input.ts
+var input = {
+  name: "input",
+  category: "primitives",
+  description: "Text input with label, error state, and prefix/suffix support",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Input.tsx",
+      content: `"use client";
+
+import { forwardRef, useId } from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type { InputProps } from "./input.types";
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      theme,
+      label,
+      helperText,
+      errorText,
+      leftAddon,
+      rightAddon,
+      state = "default",
+      disabled,
+      className,
+      id: externalId,
+      ...props
+    },
+    ref
+  ) => {
+    const { theme: contextTheme } = useBakeThereTheme();
+    const activeTheme = theme ?? contextTheme;
+    const generatedId = useId();
+    const id = externalId ?? generatedId;
+
+    const isError = state === "error" || !!errorText;
+    const isDisabled = state === "disabled" || disabled;
+
+    return (
+      <div data-bt-theme={activeTheme} className="flex flex-col gap-1.5 w-full">
+        {label && (
+          <label
+            htmlFor={id}
+            className="text-sm font-medium text-[var(--bt-text-primary)]"
+          >
+            {label}
+          </label>
+        )}
+        <div className="relative flex items-center">
+          {leftAddon && (
+            <div className="absolute left-3 text-[var(--bt-text-muted)]">
+              {leftAddon}
+            </div>
+          )}
+          <input
+            ref={ref}
+            id={id}
+            disabled={isDisabled}
+            aria-invalid={isError || undefined}
+            aria-describedby={
+              errorText ? \`\${id}-error\` : helperText ? \`\${id}-helper\` : undefined
+            }
+            className={cn(
+              "w-full rounded-[var(--bt-radius-md)] border bg-[var(--bt-bg-surface)]",
+              "text-[var(--bt-text-primary)] placeholder:text-[var(--bt-text-muted)]",
+              "px-3 py-2 text-sm transition-colors",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+              "disabled:bg-[var(--bt-bg-muted)] disabled:text-[var(--bt-text-muted)] disabled:border-[var(--bt-border-muted)] disabled:pointer-events-none disabled:cursor-not-allowed",
+              isError
+                ? "border-[var(--bt-destructive)] focus-visible:ring-[var(--bt-destructive)]"
+                : "border-[var(--bt-border)] focus-visible:border-[var(--bt-border-focus)]",
+              leftAddon ? "pl-9" : "",
+              rightAddon ? "pr-9" : "",
+              className
+            )}
+            {...props}
+          />
+          {rightAddon && (
+            <div className="absolute right-3 text-[var(--bt-text-muted)]">
+              {rightAddon}
+            </div>
+          )}
+        </div>
+        {errorText && (
+          <p id={\`\${id}-error\`} className="text-xs text-[var(--bt-destructive)]" role="alert">
+            {errorText}
+          </p>
+        )}
+        {!errorText && helperText && (
+          <p id={\`\${id}-helper\`} className="text-xs text-[var(--bt-text-muted)]">
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";
+`
+    },
+    {
+      name: "input.types.ts",
+      content: `import type { InputHTMLAttributes, ReactNode } from "react";
+import type { BtTheme } from "../../types";
+
+export type InputState = "default" | "error" | "disabled";
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  theme?: BtTheme;
+  label?: string;
+  helperText?: string;
+  errorText?: string;
+  leftAddon?: ReactNode;
+  rightAddon?: ReactNode;
+  state?: InputState;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/label.ts
+var label = {
+  name: "label",
+  category: "primitives",
+  description: "Styled form label with required indicator",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Label.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type { LabelProps } from "./label.types";
+
+export function Label({
+  theme,
+  required,
+  className,
+  children,
+  ...props
+}: LabelProps) {
+  return (
+    <label
+      data-bt-theme={theme}
+      className={cn(
+        "text-sm font-medium text-[var(--bt-text-primary)] leading-none",
+        "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {required && (
+        <span className="ml-1 text-[var(--bt-destructive)]" aria-hidden="true">
+          *
+        </span>
+      )}
+    </label>
+  );
+}
+`
+    },
+    {
+      name: "label.types.ts",
+      content: `import type { LabelHTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  theme?: BtTheme;
+  required?: boolean;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/checkbox.ts
+var checkbox = {
+  name: "checkbox",
+  category: "primitives",
+  description: "Accessible checkbox with indeterminate state",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Checkbox.tsx",
+      content: `"use client";
+
+import { useState, useCallback, useId } from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type { CheckboxProps } from "./checkbox.types";
+
+const sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+};
+
+const checkSizeClasses = {
+  sm: "h-2.5 w-2.5",
+  md: "h-3 w-3",
+  lg: "h-4 w-4",
+};
+
+export function Checkbox({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  size = "md",
+  theme,
+  className,
+  id: externalId,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+}: CheckboxProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+  const generatedId = useId();
+  const id = externalId ?? generatedId;
+
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = controlledChecked !== undefined ? controlledChecked : internalChecked;
+
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    const next = !isChecked;
+    if (controlledChecked === undefined) setInternalChecked(next);
+    onCheckedChange?.(next);
+  }, [disabled, isChecked, controlledChecked, onCheckedChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === " ") {
+        e.preventDefault();
+        toggle();
+      }
+    },
+    [toggle]
+  );
+
+  return (
+    <div
+      id={id}
+      data-bt-theme={activeTheme}
+      role="checkbox"
+      aria-checked={isChecked}
+      aria-disabled={disabled || undefined}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      tabIndex={disabled ? -1 : 0}
+      onClick={toggle}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "inline-flex items-center justify-center rounded-[var(--bt-radius-sm)] border",
+        "cursor-pointer transition-colors select-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+        sizeClasses[size],
+        isChecked
+          ? "bg-[var(--bt-accent)] border-[var(--bt-accent)]"
+          : "bg-[var(--bt-bg-surface)] border-[var(--bt-border)]",
+        disabled && "opacity-[var(--bt-disabled-opacity)] pointer-events-none",
+        className
+      )}
+    >
+      {isChecked && (
+        <svg
+          className={cn("text-[var(--bt-text-inverse)]", checkSizeClasses[size])}
+          viewBox="0 0 12 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <path
+            d="M2 6L5 9L10 3"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "checkbox.types.ts",
+      content: `import type { BtTheme } from "../../types";
+
+export type CheckboxSize = "sm" | "md" | "lg";
+
+export interface CheckboxProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  theme?: BtTheme;
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/toggle.ts
+var toggle = {
+  name: "toggle",
+  category: "primitives",
+  description: "Toggle switch for binary on/off state",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Toggle.tsx",
+      content: `"use client";
+
+import { useState, useCallback, useId } from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type { ToggleProps } from "./toggle.types";
+
+const trackSizes = {
+  sm: "h-5 w-9",
+  md: "h-6 w-11",
+  lg: "h-7 w-14",
+};
+
+const thumbSizes = {
+  sm: "h-3.5 w-3.5",
+  md: "h-[18px] w-[18px]",
+  lg: "h-[22px] w-[22px]",
+};
+
+const thumbTranslate = {
+  sm: "translate-x-4",
+  md: "translate-x-5",
+  lg: "translate-x-7",
+};
+
+export function Toggle({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  size = "md",
+  theme,
+  className,
+  id: externalId,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+}: ToggleProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+  const generatedId = useId();
+  const id = externalId ?? generatedId;
+
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = controlledChecked !== undefined ? controlledChecked : internalChecked;
+
+  const toggle = useCallback(() => {
+    if (disabled) return;
+    const next = !isChecked;
+    if (controlledChecked === undefined) setInternalChecked(next);
+    onCheckedChange?.(next);
+  }, [disabled, isChecked, controlledChecked, onCheckedChange]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        toggle();
+      }
+    },
+    [toggle]
+  );
+
+  return (
+    <div
+      id={id}
+      data-bt-theme={activeTheme}
+      role="switch"
+      aria-checked={isChecked}
+      aria-disabled={disabled || undefined}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      tabIndex={disabled ? -1 : 0}
+      onClick={toggle}
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "relative inline-flex items-center rounded-[var(--bt-radius-full)] cursor-pointer",
+        "transition-colors duration-200 select-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+        trackSizes[size],
+        isChecked
+          ? "bg-[var(--bt-accent)]"
+          : "bg-[var(--bt-bg-muted)] border border-[var(--bt-border)]",
+        disabled && "opacity-[var(--bt-disabled-opacity)] pointer-events-none",
+        className
+      )}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "absolute top-1/2 -translate-y-1/2 left-0.5",
+          "rounded-full bg-white shadow-sm",
+          "transition-transform duration-200",
+          thumbSizes[size],
+          isChecked ? thumbTranslate[size] : "translate-x-0"
+        )}
+      />
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "toggle.types.ts",
+      content: `import type { BtTheme } from "../../types";
+
+export type ToggleSize = "sm" | "md" | "lg";
+
+export interface ToggleProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  size?: ToggleSize;
+  theme?: BtTheme;
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/text.ts
+var text = {
+  name: "text",
+  category: "primitives",
+  description: "Typography primitives \u2014 heading, body, caption, code",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Text.tsx",
+      content: `import type { ElementType, JSX } from "react";
+import { cn } from "@/lib/utils";
+import type { TextVariant, TextFont, TextProps } from "./text.types";
+
+const elementMap: Record<TextVariant, keyof JSX.IntrinsicElements> = {
+  "display-lg": "h1",
+  "display":    "h1",
+  "h1":         "h1",
+  "h2":         "h2",
+  "h3":         "h3",
+  "h4":         "h4",
+  "h5":         "h5",
+  "h6":         "h6",
+  "body-lg":    "p",
+  "body":       "p",
+  "body-sm":    "p",
+  "caption":    "span",
+  "overline":   "span",
+  "code":       "code",
+};
+
+const sizeMap: Record<TextVariant, string> = {
+  "display-lg": "clamp(3rem, 6vw + 1rem, 6rem)",
+  "display":    "clamp(2.25rem, 4vw + 1rem, 4.5rem)",
+  "h1":         "clamp(1.875rem, 3vw + 1rem, 3rem)",
+  "h2":         "clamp(1.5rem, 2vw + 1rem, 2.25rem)",
+  "h3":         "clamp(1.25rem, 1.5vw + 0.75rem, 1.875rem)",
+  "h4":         "clamp(1.125rem, 1vw + 0.75rem, 1.5rem)",
+  "h5":         "clamp(1rem, 0.5vw + 0.75rem, 1.25rem)",
+  "h6":         "clamp(0.875rem, 0.5vw + 0.625rem, 1rem)",
+  "body-lg":    "clamp(1rem, 0.5vw + 0.75rem, 1.25rem)",
+  "body":       "1rem",
+  "body-sm":    "0.875rem",
+  "caption":    "0.75rem",
+  "overline":   "0.6875rem",
+  "code":       "0.875rem",
+};
+
+const weightMap: Record<TextVariant, number> = {
+  "display-lg": 800,
+  "display":    700,
+  "h1":         700,
+  "h2":         600,
+  "h3":         600,
+  "h4":         600,
+  "h5":         500,
+  "h6":         500,
+  "body-lg":    400,
+  "body":       400,
+  "body-sm":    400,
+  "caption":    400,
+  "overline":   600,
+  "code":       400,
+};
+
+const lineHeightMap: Record<TextVariant, string> = {
+  "display-lg": "1.1",
+  "display":    "1.1",
+  "h1":         "1.2",
+  "h2":         "1.25",
+  "h3":         "1.3",
+  "h4":         "1.35",
+  "h5":         "1.4",
+  "h6":         "1.4",
+  "body-lg":    "1.7",
+  "body":       "1.6",
+  "body-sm":    "1.6",
+  "caption":    "1.5",
+  "overline":   "1.4",
+  "code":       "1.5",
+};
+
+const fontStacks: Record<TextFont, string> = {
+  sans:  "var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif",
+  serif: "Georgia, 'Times New Roman', ui-serif, serif",
+  mono:  "var(--font-geist-mono), ui-monospace, monospace",
+};
+
+export function Text({
+  variant = "body",
+  font,
+  as,
+  theme,
+  style,
+  className,
+  children,
+  ...props
+}: TextProps) {
+  const Tag = (as ?? elementMap[variant]) as ElementType;
+  const isCode = variant === "code";
+  const resolvedFont = isCode
+    ? fontStacks.mono
+    : font
+    ? fontStacks[font]
+    : undefined;
+
+  return (
+    <Tag
+      {...(theme ? { "data-bt-theme": theme } : {})}
+      style={{
+        fontSize:   sizeMap[variant],
+        fontWeight: weightMap[variant],
+        lineHeight: lineHeightMap[variant],
+        ...(resolvedFont ? { fontFamily: resolvedFont } : {}),
+        ...(variant === "overline"
+          ? { textTransform: "uppercase" as const, letterSpacing: "0.1em" }
+          : {}),
+        ...style,
+      }}
+      className={cn("text-[var(--bt-text-primary)]", className)}
+      {...props}
+    >
+      {children}
+    </Tag>
+  );
+}
+`
+    },
+    {
+      name: "text.types.ts",
+      content: `import type { HTMLAttributes, JSX } from "react";
+import type { BtTheme } from "../../types";
+
+export type TextVariant =
+  | "display-lg"
+  | "display"
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "body-lg"
+  | "body"
+  | "body-sm"
+  | "caption"
+  | "overline"
+  | "code";
+
+export type TextFont = "sans" | "serif" | "mono";
+
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  variant?: TextVariant;
+  font?: TextFont;
+  as?: keyof JSX.IntrinsicElements;
+  theme?: BtTheme;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/textarea.ts
+var textarea = {
+  name: "textarea",
+  category: "primitives",
+  description: "Multi-line text input with auto-resize support",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Textarea.tsx",
+      content: `"use client";
+
+import { forwardRef, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type { TextareaProps } from "./textarea.types";
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      theme,
+      autoResize = false,
+      maxRows,
+      disabled,
+      className,
+      onInput,
+      rows = 3,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const { theme: contextTheme } = useBakeThereTheme();
+    const activeTheme = theme ?? contextTheme;
+
+    // Fallback for 'line-height: normal' \u2014 approximates text-sm * 1.5
+    const LINE_HEIGHT_FALLBACK = 21;
+
+    const doResize = useCallback(
+      (el: HTMLTextAreaElement) => {
+        el.style.height = "auto";
+        const lineHeight =
+          parseInt(getComputedStyle(el).lineHeight) || LINE_HEIGHT_FALLBACK;
+        const newHeight = maxRows
+          ? Math.min(el.scrollHeight, maxRows * lineHeight)
+          : el.scrollHeight;
+        el.style.height = \`\${newHeight}px\`;
+      },
+      [maxRows]
+    );
+
+    return (
+      <div data-bt-theme={activeTheme} className="w-full">
+        <textarea
+          ref={ref}
+          rows={rows}
+          disabled={disabled}
+          onInput={(e) => {
+            if (autoResize) doResize(e.currentTarget as HTMLTextAreaElement);
+            onInput?.(e);
+          }}
+          style={
+            autoResize
+              ? { resize: "none", overflow: "hidden", ...style }
+              : style
+          }
+          className={cn(
+            "w-full rounded-[var(--bt-radius-md)] border bg-[var(--bt-bg-surface)]",
+            "text-[var(--bt-text-primary)] placeholder:text-[var(--bt-text-muted)]",
+            "px-3 py-2 text-sm transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+            "focus-visible:border-[var(--bt-border-focus)] border-[var(--bt-border)]",
+            "disabled:bg-[var(--bt-bg-muted)] disabled:text-[var(--bt-text-muted)] disabled:border-[var(--bt-border-muted)] disabled:pointer-events-none disabled:cursor-not-allowed",
+            !autoResize && "resize-y",
+            className
+          )}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+
+Textarea.displayName = "Textarea";
+`
+    },
+    {
+      name: "textarea.types.ts",
+      content: `import type { TextareaHTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  theme?: BtTheme;
+  autoResize?: boolean;
+  maxRows?: number;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/radio.ts
+var radio = {
+  name: "radio",
+  category: "primitives",
+  description: "Radio button group for single selection",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Radio.tsx",
+      content: `"use client";
+
+import {
+  createContext,
+  useContext,
+  useId,
+  useState,
+  useCallback,
+  useRef,
+  type KeyboardEvent,
+} from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type { RadioGroupProps, RadioGroupItemProps } from "./radio.types";
+
+interface RadioContextValue {
+  value: string;
+  setSelected: (value: string) => void;
+  name: string;
+  groupDisabled: boolean;
+}
+
+const RadioContext = createContext<RadioContextValue | null>(null);
+
+function useRadioContext() {
+  const ctx = useContext(RadioContext);
+  if (!ctx) throw new Error("RadioGroupItem must be used inside <RadioGroup>");
+  return ctx;
+}
+
+export function RadioGroup({
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  name,
+  disabled = false,
+  theme,
+  className,
+  children,
+}: RadioGroupProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+  const groupRef = useRef<HTMLDivElement>(null);
+
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const value = controlledValue ?? internalValue;
+
+  const generatedName = useId();
+  const groupName = name ?? generatedName;
+
+  const setSelected = useCallback(
+    (val: string) => {
+      if (controlledValue === undefined) setInternalValue(val);
+      onValueChange?.(val);
+    },
+    [controlledValue, onValueChange]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      const inputs = groupRef.current?.querySelectorAll<HTMLInputElement>(
+        'input[type="radio"]:not(:disabled)'
+      );
+      if (!inputs || inputs.length === 0) return;
+      const arr = Array.from(inputs);
+      const idx = arr.findIndex((el) => el.value === value);
+
+      if (e.key === "ArrowDown" || e.key === "ArrowRight") {
+        e.preventDefault();
+        const next = arr[(idx + 1) % arr.length];
+        next.focus();
+        setSelected(next.value);
+      } else if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
+        e.preventDefault();
+        const prev = arr[(idx - 1 + arr.length) % arr.length];
+        prev.focus();
+        setSelected(prev.value);
+      }
+    },
+    [value, setSelected]
+  );
+
+  return (
+    <RadioContext.Provider
+      value={{ value, setSelected, name: groupName, groupDisabled: disabled }}
+    >
+      <div
+        ref={groupRef}
+        data-bt-theme={activeTheme}
+        role="radiogroup"
+        onKeyDown={handleKeyDown}
+        className={cn("flex flex-col gap-2", className)}
+      >
+        {children}
+      </div>
+    </RadioContext.Provider>
+  );
+}
+
+export function RadioGroupItem({
+  value,
+  label,
+  disabled: itemDisabled = false,
+  className,
+}: RadioGroupItemProps) {
+  const { value: selectedValue, setSelected, name, groupDisabled } =
+    useRadioContext();
+  const isSelected = selectedValue === value;
+  const isDisabled = groupDisabled || itemDisabled;
+
+  return (
+    <label
+      className={cn(
+        "flex items-center gap-2 cursor-pointer select-none",
+        isDisabled && "opacity-[var(--bt-disabled-opacity)] pointer-events-none",
+        className
+      )}
+    >
+      <input
+        type="radio"
+        name={name}
+        value={value}
+        checked={isSelected}
+        disabled={isDisabled}
+        onChange={() => setSelected(value)}
+        className="sr-only peer"
+      />
+      <div
+        aria-hidden="true"
+        className={cn(
+          "h-4 w-4 rounded-full border-2 flex items-center justify-center",
+          "transition-colors",
+          "peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--bt-ring)] peer-focus-visible:ring-offset-1",
+          isSelected
+            ? "border-[var(--bt-accent)]"
+            : "border-[var(--bt-border)]"
+        )}
+      >
+        {isSelected && (
+          <div className="h-2 w-2 rounded-full bg-[var(--bt-accent)]" />
+        )}
+      </div>
+      <span className="text-sm text-[var(--bt-text-primary)]">{label}</span>
+    </label>
+  );
+}
+`
+    },
+    {
+      name: "radio.types.ts",
+      content: `import type { ReactNode } from "react";
+import type { BtTheme } from "../../types";
+
+export interface RadioGroupProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  name?: string;
+  disabled?: boolean;
+  theme?: BtTheme;
+  className?: string;
+  children?: ReactNode;
+}
+
+export interface RadioGroupItemProps {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  className?: string;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/slider.ts
+var slider = {
+  name: "slider",
+  category: "primitives",
+  description: "Range slider with themed track and thumb",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Slider.tsx",
+      content: `"use client";
+
+import { useState, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type { SliderProps } from "./slider.types";
+
+export function Slider({
+  value: controlledValue,
+  defaultValue = 50,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  onChange,
+  theme,
+  className,
+}: SliderProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const value = controlledValue ?? internalValue;
+
+  const range = max - min;
+  const percentage = range === 0 ? 0 : ((value - min) / range) * 100;
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const next = Number(e.target.value);
+      if (controlledValue === undefined) setInternalValue(next);
+      onChange?.(next);
+    },
+    [controlledValue, onChange]
+  );
+
+  return (
+    <div data-bt-theme={activeTheme} className={cn("w-full", className)}>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        disabled={disabled}
+        onChange={handleChange}
+        style={
+          { "--bt-slider-value": \`\${percentage}%\` } as React.CSSProperties
+        }
+        className="bt-slider"
+      />
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "slider.types.ts",
+      content: `import type { BtTheme } from "../../types";
+
+export interface SliderProps {
+  value?: number;
+  defaultValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  onChange?: (value: number) => void;
+  theme?: BtTheme;
+  className?: string;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/select.ts
+var select = {
+  name: "select",
+  category: "primitives",
+  description: "Custom select dropdown with keyboard navigation",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Select.tsx",
+      content: `"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  useId,
+  type ReactNode,
+} from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type {
+  SelectProps,
+  SelectTriggerProps,
+  SelectContentProps,
+  SelectItemProps,
+  SelectGroupProps,
+  SelectLabelProps,
+} from "./select.types";
+
+interface SelectItem {
+  value: string;
+  label: string;
+}
+
+interface SelectContextValue {
+  value: string | undefined;
+  selectedLabel: string | undefined;
+  onSelect: (value: string, label: string) => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+  contentId: string;
+  highlightedIndex: number | null;
+  setHighlightedIndex: (i: number | null) => void;
+  items: SelectItem[];
+  registerItem: (value: string, label: string) => void;
+  unregisterItem: (value: string) => void;
+  disabled: boolean;
+}
+
+const SelectContext = createContext<SelectContextValue | null>(null);
+
+function useSelectContext() {
+  const ctx = useContext(SelectContext);
+  if (!ctx) throw new Error("Select sub-components must be used inside <Select>");
+  return ctx;
+}
+
+export function Select({
+  value: controlledValue,
+  onValueChange,
+  defaultValue,
+  disabled = false,
+  theme,
+  children,
+}: SelectProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+  const [internalValue, setInternalValue] = useState<string | undefined>(defaultValue);
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const [selectedLabel, setSelectedLabel] = useState<string | undefined>(undefined);
+  const [open, setOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState<number | null>(null);
+  const [items, setItems] = useState<SelectItem[]>([]);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const contentId = useId();
+
+  const handleSelect = useCallback(
+    (val: string, label: string) => {
+      if (controlledValue === undefined) setInternalValue(val);
+      setSelectedLabel(label);
+      onValueChange?.(val);
+      setOpen(false);
+      setHighlightedIndex(null);
+      setTimeout(() => triggerRef.current?.focus(), 0);
+    },
+    [controlledValue, onValueChange]
+  );
+
+  const handleOpenChange = useCallback(
+    (val: boolean) => {
+      setOpen(val);
+      if (val) {
+        const idx = items.findIndex((i) => i.value === value);
+        setHighlightedIndex(idx >= 0 ? idx : null);
+      } else {
+        setHighlightedIndex(null);
+      }
+    },
+    [items, value]
+  );
+
+  const registerItem = useCallback((itemValue: string, label: string) => {
+    setItems((prev) => [...prev, { value: itemValue, label }]);
+  }, []);
+
+  const unregisterItem = useCallback((itemValue: string) => {
+    setItems((prev) => prev.filter((i) => i.value !== itemValue));
+  }, []);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    function handleMouseDown(e: MouseEvent) {
+      const content = document.getElementById(contentId);
+      if (
+        triggerRef.current &&
+        !triggerRef.current.contains(e.target as Node) &&
+        !content?.contains(e.target as Node)
+      ) {
+        setOpen(false);
+        setHighlightedIndex(null);
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [open, contentId]);
+
+  return (
+    <SelectContext.Provider
+      value={{
+        value,
+        selectedLabel,
+        onSelect: handleSelect,
+        open,
+        onOpenChange: handleOpenChange,
+        triggerRef,
+        contentId,
+        highlightedIndex,
+        setHighlightedIndex,
+        items,
+        registerItem,
+        unregisterItem,
+        disabled,
+      }}
+    >
+      <div data-bt-theme={activeTheme}>
+        {children}
+      </div>
+    </SelectContext.Provider>
+  );
+}
+
+export function SelectTrigger({ placeholder = "Select...", className, ...props }: SelectTriggerProps) {
+  const {
+    selectedLabel,
+    onSelect,
+    open,
+    onOpenChange,
+    triggerRef,
+    contentId,
+    highlightedIndex,
+    setHighlightedIndex,
+    items,
+    disabled,
+  } = useSelectContext();
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+    const count = items.length;
+
+    if (!open) {
+      if (
+        e.key === " " ||
+        e.key === "Enter" ||
+        e.key === "ArrowDown" ||
+        e.key === "ArrowUp"
+      ) {
+        e.preventDefault();
+        onOpenChange(true);
+      }
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedIndex(
+        highlightedIndex === null ? 0 : (highlightedIndex + 1) % count
+      );
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedIndex(
+        highlightedIndex === null
+          ? count - 1
+          : (highlightedIndex - 1 + count) % count
+      );
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (highlightedIndex !== null && items[highlightedIndex]) {
+        onSelect(items[highlightedIndex].value, items[highlightedIndex].label);
+      }
+    } else if (e.key === "Escape" || e.key === "Tab") {
+      if (e.key === "Tab") e.preventDefault();
+      onOpenChange(false);
+      triggerRef.current?.focus();
+    }
+  };
+
+  return (
+    <button
+      ref={triggerRef}
+      type="button"
+      aria-haspopup="listbox"
+      aria-expanded={open}
+      aria-controls={contentId}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      onClick={() => onOpenChange(!open)}
+      className={cn(
+        "h-10 px-3 text-sm border border-[var(--bt-border)] rounded-[var(--bt-radius-md)]",
+        "bg-[var(--bt-bg-base)] text-[var(--bt-text-primary)] inline-flex items-center justify-between gap-2",
+        "min-w-[120px]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+        "disabled:opacity-50 disabled:cursor-not-allowed",
+        "transition-colors",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className={cn(
+          "truncate",
+          selectedLabel
+            ? "text-[var(--bt-text-primary)]"
+            : "text-[var(--bt-text-muted)]"
+        )}
+      >
+        {selectedLabel ?? placeholder}
+      </span>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        className={cn(
+          "shrink-0 text-[var(--bt-text-muted)] transition-transform duration-200",
+          open && "rotate-180"
+        )}
+      >
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    </button>
+  );
+}
+
+export function SelectContent({ children, className, style, ...props }: SelectContentProps) {
+  const { open, triggerRef, contentId, highlightedIndex, items } = useSelectContext();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number; width: number } | null>(null);
+
+  const highlightedItemId =
+    highlightedIndex !== null && items[highlightedIndex]
+      ? \`select-item-\${items[highlightedIndex].value}\`
+      : undefined;
+
+  useEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+
+    function recalculate() {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
+    }
+
+    recalculate();
+    window.addEventListener("scroll", recalculate, { passive: true, capture: true });
+    window.addEventListener("resize", recalculate, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", recalculate, { capture: true });
+      window.removeEventListener("resize", recalculate);
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={contentRef}
+      id={contentId}
+      role="listbox"
+      aria-activedescendant={highlightedItemId}
+      style={{
+        position: "fixed",
+        top: pos?.top ?? 0,
+        left: pos?.left ?? 0,
+        width: pos?.width ?? 0,
+        visibility: pos ? "visible" : "hidden",
+        pointerEvents: pos ? "auto" : "none",
+        zIndex: 60,
+        animation: "bt-fade-in 0.15s ease-out",
+        ...style,
+      }}
+      className={cn(
+        "bg-[var(--bt-bg-surface)] border border-[var(--bt-border)]",
+        "shadow-[var(--bt-shadow-md)] rounded-[var(--bt-radius-md)] py-1",
+        "max-h-[300px] overflow-y-auto",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SelectItem({
+  value: itemValue,
+  disabled = false,
+  children,
+  className,
+  ...props
+}: SelectItemProps) {
+  const {
+    value,
+    onSelect,
+    registerItem,
+    unregisterItem,
+    highlightedIndex,
+    setHighlightedIndex,
+    items,
+  } = useSelectContext();
+
+  const isSelected = value === itemValue;
+  const itemIndex = items.findIndex((i) => i.value === itemValue);
+  const isHighlighted = highlightedIndex !== null && itemIndex === highlightedIndex;
+  const itemId = \`select-item-\${itemValue}\`;
+
+  useLayoutEffect(() => {
+    if (disabled) return;
+    const label =
+      typeof children === "string" ? children : itemValue;
+    registerItem(itemValue, label);
+    return () => unregisterItem(itemValue);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [itemValue, disabled]);
+
+  return (
+    <div
+      id={itemId}
+      role="option"
+      aria-selected={isSelected}
+      aria-disabled={disabled || undefined}
+      data-highlighted={isHighlighted ? "true" : undefined}
+      tabIndex={-1}
+      onClick={() => {
+        if (!disabled) {
+          const label = typeof children === "string" ? children : itemValue;
+          onSelect(itemValue, label);
+        }
+      }}
+      onMouseEnter={() => {
+        if (!disabled && itemIndex >= 0) setHighlightedIndex(itemIndex);
+      }}
+      className={cn(
+        "px-3 py-2 text-sm cursor-pointer flex items-center justify-between",
+        "text-[var(--bt-text-primary)]",
+        isHighlighted && "bg-[var(--bt-hover-bg)]",
+        disabled && "opacity-50 cursor-not-allowed pointer-events-none",
+        className
+      )}
+      {...props}
+    >
+      <span>{children}</span>
+      {isSelected && (
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+          className="shrink-0 text-[var(--bt-accent)]"
+        >
+          <polyline points="20 6 9 17 4 12" />
+        </svg>
+      )}
+    </div>
+  );
+}
+
+export function SelectGroup({ className, children, ...props }: SelectGroupProps) {
+  return (
+    <div role="group" className={cn("py-1", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function SelectLabel({ className, children, ...props }: SelectLabelProps) {
+  return (
+    <p
+      className={cn(
+        "px-3 py-1 text-xs font-semibold text-[var(--bt-text-muted)] uppercase tracking-wider",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+}
+`
+    },
+    {
+      name: "select.types.ts",
+      content: `import type { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import type { BtTheme } from "../../types";
+
+export interface SelectProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  defaultValue?: string;
+  disabled?: boolean;
+  theme?: BtTheme;
+  children: ReactNode;
+}
+
+export interface SelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  placeholder?: string;
+}
+
+export type SelectContentProps = HTMLAttributes<HTMLDivElement>;
+
+export interface SelectItemProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+  disabled?: boolean;
+}
+
+export type SelectGroupProps = HTMLAttributes<HTMLDivElement>;
+
+export interface SelectLabelProps extends HTMLAttributes<HTMLParagraphElement> {}
+`
+    }
+  ]
+};
+
+// src/registry/components/card.ts
+var card = {
+  name: "card",
+  category: "display",
+  description: "Content container with header, content, and footer sections",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Card.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type { CardProps, CardHeaderProps, CardContentProps, CardFooterProps } from "./card.types";
+
+export function Card({ theme, className, children, ...props }: CardProps) {
+  return (
+    <div
+      {...(theme ? { "data-bt-theme": theme } : {})}
+      className={cn(
+        "rounded-[var(--bt-radius-lg)] border border-[var(--bt-border)]",
+        "bg-[var(--bt-bg-surface)] shadow-[var(--bt-shadow-sm)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({ className, children, ...props }: CardHeaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-1.5 p-6", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function CardContent({ className, children, ...props }: CardContentProps) {
+  return (
+    <div className={cn("p-6 pt-0", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function CardFooter({ className, children, ...props }: CardFooterProps) {
+  return (
+    <div className={cn("flex items-center p-6 pt-0", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "card.types.ts",
+      content: `import type { HTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  theme?: BtTheme;
+}
+
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {}
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {}
+`
+    }
+  ]
+};
+
+// src/registry/components/badge.ts
+var badge = {
+  name: "badge",
+  category: "display",
+  description: "Small status indicator with semantic color variants",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Badge.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type { BadgeProps } from "./badge.types";
+
+const variantClasses: Record<string, string> = {
+  default: "bg-[var(--bt-accent-muted)] text-[var(--bt-accent)] border-transparent",
+  secondary: "bg-[var(--bt-bg-muted)] text-[var(--bt-text-secondary)] border-transparent",
+  destructive: "bg-[var(--bt-destructive-bg)] text-[var(--bt-destructive)] border-transparent",
+  outline: "bg-transparent text-[var(--bt-text-primary)] border-[var(--bt-border)]",
+};
+
+const sizeClasses: Record<string, string> = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-0.5 text-sm",
+};
+
+export function Badge({
+  variant = "default",
+  size = "sm",
+  theme,
+  className,
+  children,
+  ...props
+}: BadgeProps) {
+  return (
+    <span
+      {...(theme ? { "data-bt-theme": theme } : {})}
+      className={cn(
+        "inline-flex items-center font-medium border rounded-[var(--bt-radius-full)]",
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
+`
+    },
+    {
+      name: "badge.types.ts",
+      content: `import type { HTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export type BadgeVariant = "default" | "secondary" | "destructive" | "outline";
+export type BadgeSize = "sm" | "md";
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  theme?: BtTheme;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/avatar.ts
+var avatar = {
+  name: "avatar",
+  category: "display",
+  description: "User avatar with image, initials, and fallback support",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Avatar.tsx",
+      content: `"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import type { AvatarProps, AvatarImageProps, AvatarFallbackProps } from "./avatar.types";
+
+const sizeClasses: Record<string, string> = {
+  sm: "h-6 w-6 text-xs",
+  md: "h-10 w-10 text-sm",
+  lg: "h-14 w-14 text-base",
+  xl: "h-[72px] w-[72px] text-lg",
+};
+
+export function Avatar({ size = "md", theme, className, children, ...props }: AvatarProps) {
+  return (
+    <div
+      {...(theme ? { "data-bt-theme": theme } : {})}
+      className={cn(
+        "relative inline-flex items-center justify-center",
+        "rounded-full overflow-hidden",
+        "bg-[var(--bt-bg-muted)] text-[var(--bt-text-secondary)]",
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function AvatarImage({ src, alt = "", className, onError, ...props }: AvatarImageProps) {
+  const [errored, setErrored] = useState(false);
+
+  if (errored) return null;
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={cn("h-full w-full object-cover", className)}
+      onError={(e) => {
+        setErrored(true);
+        onError?.(e);
+      }}
+      {...props}
+    />
+  );
+}
+
+export function AvatarFallback({ className, children, ...props }: AvatarFallbackProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "absolute inset-0 flex items-center justify-center",
+        "font-medium text-[var(--bt-text-secondary)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "avatar.types.ts",
+      content: `import type { HTMLAttributes, ImgHTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  size?: AvatarSize;
+  theme?: BtTheme;
+}
+
+export interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {}
+
+export interface AvatarFallbackProps extends HTMLAttributes<HTMLDivElement> {}
+`
+    }
+  ]
+};
+
+// src/registry/components/separator.ts
+var separator = {
+  name: "separator",
+  category: "display",
+  description: "Horizontal or vertical visual divider",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Separator.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type { SeparatorProps } from "./separator.types";
+
+export function Separator({
+  orientation = "horizontal",
+  theme,
+  className,
+  ...props
+}: SeparatorProps) {
+  if (orientation === "vertical") {
+    return (
+      <div
+        role="separator"
+        aria-orientation="vertical"
+        {...(theme ? { "data-bt-theme": theme } : {})}
+        className={cn("inline-block w-px self-stretch bg-[var(--bt-border)]", className)}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <hr
+      role="separator"
+      {...(theme ? { "data-bt-theme": theme } : {})}
+      className={cn("border-0 border-t border-[var(--bt-border)] w-full", className)}
+      {...props}
+    />
+  );
+}
+`
+    },
+    {
+      name: "separator.types.ts",
+      content: `import type { HTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export type SeparatorOrientation = "horizontal" | "vertical";
+
+export interface SeparatorProps extends HTMLAttributes<HTMLElement> {
+  orientation?: SeparatorOrientation;
+  theme?: BtTheme;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/skeleton.ts
+var skeleton = {
+  name: "skeleton",
+  category: "display",
+  description: "Loading placeholder with shimmer animation",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Skeleton.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type { SkeletonProps } from "./skeleton.types";
+
+const shapeClasses: Record<string, string> = {
+  line:   "h-4 w-full rounded-full",
+  rect:   "rounded-[var(--bt-radius-md)]",
+  circle: "rounded-full",
+};
+
+export function Skeleton({ shape = "line", width, height, className }: SkeletonProps) {
+  return (
+    <div
+      style={{
+        width:  width  ? (typeof width  === "number" ? \`\${width}px\`  : width)  : undefined,
+        height: height ? (typeof height === "number" ? \`\${height}px\` : height) : undefined,
+        background: "linear-gradient(90deg, var(--bt-skeleton-base) 25%, var(--bt-skeleton-highlight) 50%, var(--bt-skeleton-base) 75%)",
+        backgroundSize: "200% 100%",
+        animation: "bt-shimmer 1.5s ease-in-out infinite",
+      }}
+      className={cn(shapeClasses[shape], className)}
+    />
+  );
+}
+`
+    },
+    {
+      name: "skeleton.types.ts",
+      content: `export type SkeletonShape = "line" | "rect" | "circle";
+
+export interface SkeletonProps {
+  shape?: SkeletonShape;
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/stat.ts
+var stat = {
+  name: "stat",
+  category: "display",
+  description: "Metric display with label, value, and optional delta",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Stat.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type { StatProps } from "./stat.types";
+
+const trendColorMap: Record<string, string> = {
+  up:      "var(--bt-success)",
+  down:    "var(--bt-destructive)",
+  neutral: "var(--bt-text-muted)",
+};
+
+export function Stat({
+  value,
+  label,
+  delta,
+  trend = "neutral",
+  description,
+  theme,
+  className,
+}: StatProps) {
+  return (
+    <div
+      {...(theme ? { "data-bt-theme": theme } : {})}
+      className={cn("flex flex-col gap-1", className)}
+    >
+      <p className="text-sm font-medium text-[var(--bt-text-muted)]">{label}</p>
+      <p className="text-3xl font-bold text-[var(--bt-text-primary)]">{value}</p>
+      {delta && (
+        <p className="text-sm font-medium" style={{ color: trendColorMap[trend] }}>
+          {delta}
+        </p>
+      )}
+      {description && (
+        <p className="text-xs text-[var(--bt-text-muted)]">{description}</p>
+      )}
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "stat.types.ts",
+      content: `import type { BtTheme } from "../../types";
+
+export type StatTrend = "up" | "down" | "neutral";
+
+export interface StatProps {
+  value: string | number;
+  label: string;
+  delta?: string;
+  trend?: StatTrend;
+  description?: string;
+  theme?: BtTheme;
+  className?: string;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/empty.ts
+var empty = {
+  name: "empty",
+  category: "display",
+  description: "Empty state display with icon, heading, and action",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Empty.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type { EmptyProps } from "./empty.types";
+
+const DefaultIcon = () => (
+  <svg
+    width="48"
+    height="48"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7" />
+    <path d="M2 13h4l2 3h8l2-3h4" />
+  </svg>
+);
+
+export function Empty({ title, description, icon, action, className }: EmptyProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 max-w-xs mx-auto text-center py-12",
+        className
+      )}
+    >
+      <div className="text-[var(--bt-text-muted)]">
+        {icon ?? <DefaultIcon />}
+      </div>
+      <h3 className="text-base font-semibold text-[var(--bt-text-primary)]">{title}</h3>
+      {description && (
+        <p className="text-sm text-[var(--bt-text-muted)]">{description}</p>
+      )}
+      {action && <div className="mt-2">{action}</div>}
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "empty.types.ts",
+      content: `import type { ReactNode } from "react";
+
+export interface EmptyProps {
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  action?: ReactNode;
+  className?: string;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/alert.ts
+var alert = {
+  name: "alert",
+  category: "display",
+  description: "Contextual feedback message with semantic variants",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Alert.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type { AlertProps, AlertTitleProps, AlertDescriptionProps, AlertVariant } from "./alert.types";
+
+const variantStyles: Record<AlertVariant, { bg: string; borderColor: string; accent: string }> = {
+  default: {
+    bg: "var(--bt-bg-surface)",
+    borderColor: "var(--bt-border)",
+    accent: "var(--bt-text-secondary)",
+  },
+  info: {
+    bg: "color-mix(in srgb, var(--bt-accent) 10%, transparent)",
+    borderColor: "color-mix(in srgb, var(--bt-accent) 30%, transparent)",
+    accent: "var(--bt-accent)",
+  },
+  success: {
+    bg: "color-mix(in srgb, var(--bt-success) 12%, transparent)",
+    borderColor: "color-mix(in srgb, var(--bt-success) 35%, transparent)",
+    accent: "var(--bt-success)",
+  },
+  warning: {
+    bg: "color-mix(in srgb, var(--bt-warning) 12%, transparent)",
+    borderColor: "color-mix(in srgb, var(--bt-warning) 35%, transparent)",
+    accent: "var(--bt-warning)",
+  },
+  error: {
+    bg: "color-mix(in srgb, var(--bt-destructive) 12%, transparent)",
+    borderColor: "color-mix(in srgb, var(--bt-destructive) 35%, transparent)",
+    accent: "var(--bt-destructive)",
+  },
+};
+
+function DefaultIcon({ variant }: { variant: AlertVariant }) {
+  if (variant === "success") {
+    return (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="10" />
+        <polyline points="9 12 11 14 15 10" />
+      </svg>
+    );
+  }
+  if (variant === "warning") {
+    return (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+        <line x1="12" y1="9" x2="12" y2="13" />
+        <line x1="12" y1="17" x2="12.01" y2="17" />
+      </svg>
+    );
+  }
+  if (variant === "error") {
+    return (
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="10" />
+        <line x1="15" y1="9" x2="9" y2="15" />
+        <line x1="9" y1="9" x2="15" y2="15" />
+      </svg>
+    );
+  }
+  // default and info
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="8" x2="12" y2="12" />
+      <line x1="12" y1="16" x2="12.01" y2="16" />
+    </svg>
+  );
+}
+
+export function Alert({
+  variant = "default",
+  icon,
+  theme,
+  className,
+  children,
+  style,
+  ...props
+}: AlertProps) {
+  const vs = variantStyles[variant];
+  return (
+    <div
+      role="alert"
+      {...(theme ? { "data-bt-theme": theme } : {})}
+      style={{
+        background: vs.bg,
+        borderLeftColor: vs.borderColor,
+        ...style,
+      }}
+      className={cn(
+        "flex gap-3 p-4 rounded-[var(--bt-radius-md)] border border-transparent border-l-4",
+        className
+      )}
+      {...props}
+    >
+      <span style={{ color: vs.accent }} className="mt-0.5 shrink-0">
+        {icon ?? <DefaultIcon variant={variant} />}
+      </span>
+      <div className="flex-1 space-y-1">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export function AlertTitle({ className, children, ...props }: AlertTitleProps) {
+  return (
+    <p className={cn("font-semibold text-sm text-[var(--bt-text-primary)] leading-tight", className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+export function AlertDescription({ className, children, ...props }: AlertDescriptionProps) {
+  return (
+    <p className={cn("text-sm text-[var(--bt-text-secondary)]", className)} {...props}>
+      {children}
+    </p>
+  );
+}
+`
+    },
+    {
+      name: "alert.types.ts",
+      content: `import type { HTMLAttributes, ReactNode } from "react";
+import type { BtTheme } from "../../types";
+
+export type AlertVariant = "default" | "info" | "success" | "warning" | "error";
+
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: AlertVariant;
+  icon?: ReactNode;
+  theme?: BtTheme;
+}
+
+export type AlertTitleProps = HTMLAttributes<HTMLParagraphElement>;
+export type AlertDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+`
+    }
+  ]
+};
+
+// src/registry/components/progress.ts
+var progress = {
+  name: "progress",
+  category: "display",
+  description: "Progress bar with determinate and indeterminate modes",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Progress.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type { ProgressProps } from "./progress.types";
+
+const sizeClasses = {
+  sm: "h-1",
+  md: "h-2",
+  lg: "h-4",
+};
+
+const variantColors: Record<"default" | "success" | "warning" | "error", string> = {
+  default: "var(--bt-accent)",
+  success: "var(--bt-success)",
+  warning: "var(--bt-warning)",
+  error: "var(--bt-destructive)",
+};
+
+export function Progress({
+  value,
+  max = 100,
+  size = "md",
+  variant = "default",
+  theme,
+  className,
+  style,
+  ...props
+}: ProgressProps) {
+  const isIndeterminate = value === undefined;
+  const pct = isIndeterminate ? undefined : Math.min(100, Math.max(0, (value / max) * 100));
+
+  return (
+    <div
+      role="progressbar"
+      aria-valuenow={isIndeterminate ? undefined : value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      {...(theme ? { "data-bt-theme": theme } : {})}
+      style={style}
+      className={cn(
+        "w-full rounded-full bg-[var(--bt-border)] overflow-hidden",
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    >
+      <div
+        style={{
+          width: isIndeterminate ? "50%" : \`\${pct}%\`,
+          background: variantColors[variant],
+          height: "100%",
+          borderRadius: "inherit",
+          transition: isIndeterminate ? undefined : "width 0.3s ease",
+          animation: isIndeterminate
+            ? "bt-progress-indeterminate 1.5s ease-in-out infinite"
+            : undefined,
+        }}
+      />
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "progress.types.ts",
+      content: `import type { HTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+  value?: number;
+  max?: number;
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "success" | "warning" | "error";
+  theme?: BtTheme;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/dialog.ts
+var dialog = {
+  name: "dialog",
+  category: "overlay",
+  description: "Modal dialog built on the native <dialog> element",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Dialog.tsx",
+      content: `"use client";
+
+import {
+  createContext,
+  useContext,
+  useRef,
+  useEffect,
+  useCallback,
+  useId,
+  type ReactNode,
+} from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type {
+  DialogProps,
+  DialogTriggerProps,
+  DialogContentProps,
+  DialogHeaderProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+  DialogFooterProps,
+  DialogCloseProps,
+} from "./dialog.types";
+
+interface DialogContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  titleId: string;
+  descriptionId: string;
+}
+
+const DialogContext = createContext<DialogContextValue | null>(null);
+
+function useDialogContext() {
+  const ctx = useContext(DialogContext);
+  if (!ctx) throw new Error("Dialog sub-components must be used inside <Dialog>");
+  return ctx;
+}
+
+export function Dialog({ open = false, onOpenChange, children, theme }: DialogProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+  const titleId = useId();
+  const descriptionId = useId();
+
+  const handleOpenChange = useCallback(
+    (val: boolean) => onOpenChange?.(val),
+    [onOpenChange]
+  );
+
+  return (
+    <DialogContext.Provider
+      value={{ open, onOpenChange: handleOpenChange, titleId, descriptionId }}
+    >
+      <div data-bt-theme={activeTheme}>{children}</div>
+    </DialogContext.Provider>
+  );
+}
+
+export function DialogTrigger({ children, onClick, className, ...props }: DialogTriggerProps) {
+  const { onOpenChange } = useDialogContext();
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        onOpenChange(true);
+        onClick?.(e);
+      }}
+      className={cn(
+        "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium",
+        "rounded-[var(--bt-radius-md)] border border-[var(--bt-border)]",
+        "text-[var(--bt-text-primary)] bg-transparent hover:bg-[var(--bt-hover-bg)]",
+        "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+        "disabled:opacity-[var(--bt-disabled-opacity)] disabled:pointer-events-none",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function DialogContent({ children, onClose, className, ...props }: DialogContentProps) {
+  const { open, onOpenChange, titleId, descriptionId } = useDialogContext();
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleClose = () => onOpenChange(false);
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [onOpenChange]);
+
+  return (
+    <dialog
+      ref={dialogRef}
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      aria-modal="true"
+      className={cn(
+        "rounded-[var(--bt-radius-lg)] border border-[var(--bt-border)]",
+        "bg-[var(--bt-bg-elevated)] text-[var(--bt-text-primary)]",
+        "shadow-[var(--bt-shadow-lg)] p-0 max-w-lg w-full",
+        "open:flex open:flex-col",
+        className
+      )}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onOpenChange(false);
+      }}
+      {...props}
+    >
+      <div className="flex flex-col p-6 gap-4 animate-[bt-dialog-in_0.2s_ease-out]">{children}</div>
+    </dialog>
+  );
+}
+
+export function DialogHeader({ className, children, ...props }: DialogHeaderProps) {
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function DialogTitle({ className, children, ...props }: DialogTitleProps) {
+  const { titleId } = useDialogContext();
+  return (
+    <h2
+      id={titleId}
+      className={cn("text-lg font-semibold text-[var(--bt-text-primary)]", className)}
+      {...props}
+    >
+      {children}
+    </h2>
+  );
+}
+
+export function DialogDescription({ className, children, ...props }: DialogDescriptionProps) {
+  const { descriptionId } = useDialogContext();
+  return (
+    <p
+      id={descriptionId}
+      className={cn("text-sm text-[var(--bt-text-muted)]", className)}
+      {...props}
+    >
+      {children}
+    </p>
+  );
+}
+
+export function DialogFooter({ className, children, ...props }: DialogFooterProps) {
+  return (
+    <div
+      className={cn("flex items-center justify-end gap-3 pt-2", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DialogClose({ children, onClick, className, ...props }: DialogCloseProps) {
+  const { onOpenChange } = useDialogContext();
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        onOpenChange(false);
+        onClick?.(e);
+      }}
+      className={cn(
+        "inline-flex items-center justify-center rounded-[var(--bt-radius-md)]",
+        "text-sm font-medium transition-colors",
+        "text-[var(--bt-text-muted)] hover:text-[var(--bt-text-primary)]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+`
+    },
+    {
+      name: "dialog.types.ts",
+      content: `import type { HTMLAttributes, DialogHTMLAttributes, ReactNode, ButtonHTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: ReactNode;
+  theme?: BtTheme;
+}
+
+export interface DialogTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
+}
+
+export interface DialogContentProps extends DialogHTMLAttributes<HTMLDialogElement> {
+  onClose?: () => void;
+}
+
+export interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+export interface DialogTitleProps extends HTMLAttributes<HTMLHeadingElement> {}
+export interface DialogDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {}
+export interface DialogFooterProps extends HTMLAttributes<HTMLDivElement> {}
+export interface DialogCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+`
+    }
+  ]
+};
+
+// src/registry/components/tooltip.ts
+var tooltip = {
+  name: "tooltip",
+  category: "overlay",
+  description: "CSS-only tooltip with directional placement",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Tooltip.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type { TooltipProps } from "./tooltip.types";
+
+export function Tooltip({
+  content,
+  side = "top",
+  delay = 0,
+  theme,
+  className,
+  children,
+}: TooltipProps) {
+  return (
+    <div
+      className={cn("bt-tooltip-wrapper relative inline-block", className)}
+      {...(theme ? { "data-bt-theme": theme } : {})}
+    >
+      {children}
+      <div
+        data-bt-tooltip=""
+        data-side={side}
+        role="tooltip"
+        style={delay ? { transitionDelay: \`\${delay}ms\` } : undefined}
+      >
+        {content}
+      </div>
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "tooltip.types.ts",
+      content: `import type { HTMLAttributes, ReactNode } from "react";
+import type { BtTheme } from "../../types";
+
+export type TooltipSide = "top" | "bottom" | "left" | "right";
+
+export interface TooltipProps {
+  content: ReactNode;
+  side?: TooltipSide;
+  delay?: number;
+  theme?: BtTheme;
+  className?: string;
+  children: ReactNode;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/toast.ts
+var toast = {
+  name: "toast",
+  category: "overlay",
+  description: "Non-blocking notification with toast queue and provider",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Toast.tsx",
+      content: `"use client";
+
+import { useEffect } from "react";
+import { cn } from "@/lib/utils";
+import type { ToastProps } from "./toast.types";
+
+const variantClasses: Record<string, string> = {
+  default: "border-[var(--bt-border)] bg-[var(--bt-bg-elevated)]",
+  success:
+    "border-[var(--bt-success)] bg-[var(--bt-bg-elevated)] text-[var(--bt-success)]",
+  destructive:
+    "border-[var(--bt-destructive)] bg-[var(--bt-destructive-bg)] text-[var(--bt-destructive)]",
+  warning:
+    "border-[var(--bt-warning)] bg-[var(--bt-bg-elevated)] text-[var(--bt-warning)]",
+};
+
+export function Toast({
+  id,
+  title,
+  description,
+  variant = "default",
+  duration = 4000,
+  onDismiss,
+  theme,
+}: ToastProps) {
+  useEffect(() => {
+    if (duration <= 0) return;
+    const timer = setTimeout(() => onDismiss(id), duration);
+    return () => clearTimeout(timer);
+  }, [id, duration, onDismiss]);
+
+  return (
+    <div
+      role="alert"
+      aria-live="assertive"
+      aria-atomic="true"
+      {...(theme ? { "data-bt-theme": theme } : {})}
+      onClick={() => onDismiss(id)}
+      className={cn(
+        "relative flex flex-col gap-1 rounded-[var(--bt-radius-md)] border p-4",
+        "text-[var(--bt-text-primary)] shadow-[var(--bt-shadow-lg)]",
+        "cursor-pointer select-none",
+        "animate-[bt-toast-in_0.3s_ease-out]",
+        variantClasses[variant]
+      )}
+    >
+      {title && <p className="text-sm font-semibold">{title}</p>}
+      {description && <p className="text-sm opacity-90">{description}</p>}
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "ToastProvider.tsx",
+      content: `"use client";
+
+import { createPortal } from "react-dom";
+import { useEffect, useState } from "react";
+import { useToast } from "./useToast";
+import { Toast } from "./Toast";
+import type { BtTheme } from "../../types";
+
+interface ToastProviderProps {
+  theme?: BtTheme;
+}
+
+export function ToastProvider({ theme }: ToastProviderProps) {
+  const { toasts, dismiss } = useToast();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return createPortal(
+    <div
+      aria-label="Notifications"
+      className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 w-80 max-w-[calc(100vw-2rem)]"
+    >
+      {toasts.map((toast) => (
+        <Toast key={toast.id} {...toast} onDismiss={dismiss} theme={theme} />
+      ))}
+    </div>,
+    document.body
+  );
+}
+`
+    },
+    {
+      name: "useToast.ts",
+      content: `"use client";
+
+import { useSyncExternalStore, useCallback } from "react";
+import type { ToastItem, ToastOptions } from "./toast.types";
+
+let toasts: ToastItem[] = [];
+const listeners = new Set<() => void>();
+
+function notify() {
+  listeners.forEach((l) => l());
+}
+
+const store = {
+  subscribe(listener: () => void) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  },
+  getSnapshot(): ToastItem[] {
+    return toasts;
+  },
+};
+
+function addToast(options: ToastOptions): string {
+  const id = Math.random().toString(36).slice(2);
+  toasts = [...toasts, { id, ...options }];
+  notify();
+  return id;
+}
+
+function removeToast(id: string): void {
+  toasts = toasts.filter((t) => t.id !== id);
+  notify();
+}
+
+export function useToast() {
+  const items = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+
+  const toast = useCallback((options: ToastOptions) => {
+    return addToast(options);
+  }, []);
+
+  const dismiss = useCallback((id: string) => {
+    removeToast(id);
+  }, []);
+
+  return { toasts: items, toast, dismiss };
+}
+`
+    },
+    {
+      name: "toast.types.ts",
+      content: `import type { BtTheme } from "../../types";
+
+export type ToastVariant = "default" | "success" | "destructive" | "warning";
+
+export interface ToastItem {
+  id: string;
+  title?: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+}
+
+export interface ToastProps extends ToastItem {
+  onDismiss: (id: string) => void;
+  theme?: BtTheme;
+}
+
+export interface ToastOptions {
+  title?: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/popover.ts
+var popover = {
+  name: "popover",
+  category: "overlay",
+  description: "Floating content panel anchored to a trigger",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Popover.tsx",
+      content: `"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useId,
+  type ReactNode,
+  type ReactElement,
+} from "react";
+import React from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type {
+  PopoverProps,
+  PopoverTriggerProps,
+  PopoverContentProps,
+} from "./popover.types";
+
+interface PopoverContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  contentId: string;
+  activeTheme: string;
+}
+
+const PopoverContext = createContext<PopoverContextValue | null>(null);
+
+function usePopoverContext() {
+  const ctx = useContext(PopoverContext);
+  if (!ctx) throw new Error("Popover sub-components must be used inside <Popover>");
+  return ctx;
+}
+
+export function Popover({
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+  theme,
+  children,
+}: PopoverProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const contentId = useId();
+
+  const handleOpenChange = useCallback(
+    (val: boolean) => {
+      if (controlledOpen === undefined) setInternalOpen(val);
+      onOpenChange?.(val);
+    },
+    [controlledOpen, onOpenChange]
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    function handleMouseDown(e: MouseEvent) {
+      const content = document.getElementById(contentId);
+      if (
+        triggerRef.current &&
+        !triggerRef.current.contains(e.target as Node) &&
+        !content?.contains(e.target as Node)
+      ) {
+        handleOpenChange(false);
+      }
+    }
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") handleOpenChange(false);
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, contentId, handleOpenChange]);
+
+  return (
+    <PopoverContext.Provider value={{ open, onOpenChange: handleOpenChange, triggerRef, contentId, activeTheme }}>
+      {children}
+    </PopoverContext.Provider>
+  );
+}
+
+export function PopoverTrigger({ children }: PopoverTriggerProps) {
+  const { open, onOpenChange, triggerRef, contentId } = usePopoverContext();
+  const childProps = children.props as { onClick?: (e: React.MouseEvent) => void };
+  return React.cloneElement(children as ReactElement<Record<string, unknown>>, {
+    ref: triggerRef,
+    onClick: (e: React.MouseEvent) => {
+      onOpenChange(!open);
+      childProps.onClick?.(e);
+    },
+    "aria-expanded": open,
+    "aria-haspopup": "dialog",
+    "aria-controls": contentId,
+  });
+}
+
+export function PopoverContent({
+  side = "bottom",
+  align = "center",
+  sideOffset = 8,
+  children,
+  className,
+  style,
+  ...props
+}: PopoverContentProps) {
+  const { open, triggerRef, contentId, activeTheme } = usePopoverContext();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+
+    function recalculate() {
+      if (!triggerRef.current || !contentRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      const cw = contentRef.current.offsetWidth;
+      const ch = contentRef.current.offsetHeight;
+
+      let top = 0;
+      let left = 0;
+
+      if (side === "bottom") {
+        top = rect.bottom + sideOffset;
+      } else if (side === "top") {
+        top = rect.top - ch - sideOffset;
+      } else if (side === "right") {
+        left = rect.right + sideOffset;
+      } else {
+        left = rect.left - cw - sideOffset;
+      }
+
+      if (side === "bottom" || side === "top") {
+        if (align === "start") left = rect.left;
+        else if (align === "center") left = rect.left + rect.width / 2 - cw / 2;
+        else left = rect.right - cw;
+      } else {
+        if (align === "start") top = rect.top;
+        else if (align === "center") top = rect.top + rect.height / 2 - ch / 2;
+        else top = rect.bottom - ch;
+      }
+
+      setPos({ top, left });
+    }
+
+    recalculate();
+    window.addEventListener("scroll", recalculate, { passive: true, capture: true });
+    window.addEventListener("resize", recalculate, { passive: true });
+    return () => {
+      window.removeEventListener("scroll", recalculate, { capture: true });
+      window.removeEventListener("resize", recalculate);
+    };
+  }, [open, side, align, sideOffset]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={contentRef}
+      id={contentId}
+      role="dialog"
+      data-bt-theme={activeTheme}
+      style={{
+        position: "fixed",
+        top: pos?.top ?? 0,
+        left: pos?.left ?? 0,
+        zIndex: 60,
+        visibility: pos ? "visible" : "hidden",
+        pointerEvents: pos ? "auto" : "none",
+        animation: "bt-fade-in 0.15s ease-out",
+        ...style,
+      }}
+      className={cn(
+        "bg-[var(--bt-bg-surface)] border border-[var(--bt-border)]",
+        "shadow-[var(--bt-shadow-md)] rounded-[var(--bt-radius-md)] p-3",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "popover.types.ts",
+      content: `import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import type { BtTheme } from "../../types";
+
+export interface PopoverProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  theme?: BtTheme;
+  children: ReactNode;
+}
+
+export interface PopoverTriggerProps {
+  children: ReactElement;
+}
+
+export interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/dropdown-menu.ts
+var dropdownMenu = {
+  name: "dropdown-menu",
+  category: "navigation",
+  description: "Dropdown menu with keyboard navigation",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "DropdownMenu.tsx",
+      content: `"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  type ReactNode,
+  type KeyboardEvent,
+} from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type {
+  DropdownMenuProps,
+  DropdownMenuTriggerProps,
+  DropdownMenuContentProps,
+  DropdownMenuItemProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuLabelProps,
+} from "./dropdown-menu.types";
+
+interface DropdownContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+const DropdownContext = createContext<DropdownContextValue | null>(null);
+
+function useDropdownContext() {
+  const ctx = useContext(DropdownContext);
+  if (!ctx) throw new Error("DropdownMenu sub-components must be used inside <DropdownMenu>");
+  return ctx;
+}
+
+export function DropdownMenu({ children, theme }: DropdownMenuProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleMouseDown(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [open]);
+
+  return (
+    <DropdownContext.Provider value={{ open, setOpen }}>
+      <div ref={containerRef} data-bt-theme={activeTheme} className="relative inline-block">
+        {children}
+      </div>
+    </DropdownContext.Provider>
+  );
+}
+
+export function DropdownMenuTrigger({ children, onClick, className, ...props }: DropdownMenuTriggerProps) {
+  const { open, setOpen } = useDropdownContext();
+  return (
+    <button
+      type="button"
+      aria-haspopup="true"
+      aria-expanded={open}
+      onClick={(e) => {
+        setOpen(!open);
+        onClick?.(e);
+      }}
+      className={cn(
+        "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-[var(--bt-radius-md)]",
+        "border border-[var(--bt-border)] text-[var(--bt-text-primary)] bg-transparent",
+        "hover:bg-[var(--bt-hover-bg)] transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+        "disabled:opacity-[var(--bt-disabled-opacity)] disabled:pointer-events-none",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function DropdownMenuContent({
+  children,
+  align = "start",
+  className,
+  ...props
+}: DropdownMenuContentProps) {
+  const { open } = useDropdownContext();
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
+    const items = contentRef.current?.querySelectorAll<HTMLButtonElement>(
+      '[role="menuitem"]:not(:disabled)'
+    );
+    if (!items || items.length === 0) return;
+    const focused = document.activeElement;
+    const idx = Array.from(items).indexOf(focused as HTMLButtonElement);
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      items[(idx + 1) % items.length].focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      items[(idx - 1 + items.length) % items.length].focus();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      // Find and focus the trigger
+      const trigger = contentRef.current?.closest(".relative")?.querySelector<HTMLButtonElement>(
+        '[aria-haspopup="true"]'
+      );
+      trigger?.focus();
+    }
+  }, []);
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={contentRef}
+      role="menu"
+      aria-orientation="vertical"
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "absolute z-50 mt-1 min-w-[160px] rounded-[var(--bt-radius-md)]",
+        "border border-[var(--bt-border)] bg-[var(--bt-bg-elevated)]",
+        "shadow-[var(--bt-shadow-md)] py-1",
+        "animate-[bt-dropdown-in_0.15s_ease-out]",
+        align === "end" ? "right-0" : align === "center" ? "left-1/2 -translate-x-1/2" : "left-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function DropdownMenuItem({
+  children,
+  destructive = false,
+  onClick,
+  className,
+  ...props
+}: DropdownMenuItemProps) {
+  const { setOpen } = useDropdownContext();
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={(e) => {
+        onClick?.(e);
+        setOpen(false);
+      }}
+      className={cn(
+        "w-full flex items-center px-3 py-2 text-sm text-left",
+        "focus-visible:outline-none focus-visible:bg-[var(--bt-hover-bg)]",
+        "hover:bg-[var(--bt-hover-bg)] transition-colors",
+        destructive
+          ? "text-[var(--bt-destructive)] hover:bg-[var(--bt-destructive-bg)]"
+          : "text-[var(--bt-text-primary)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function DropdownMenuSeparator({ className, ...props }: DropdownMenuSeparatorProps) {
+  return (
+    <div
+      role="separator"
+      className={cn("my-1 h-px bg-[var(--bt-border)]", className)}
+      {...props}
+    />
+  );
+}
+
+export function DropdownMenuLabel({ children, className, ...props }: DropdownMenuLabelProps) {
+  return (
+    <div
+      className={cn("px-3 py-1.5 text-xs font-semibold text-[var(--bt-text-muted)]", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "dropdown-menu.types.ts",
+      content: `import type { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import type { BtTheme } from "../../types";
+
+export interface DropdownMenuProps {
+  children: ReactNode;
+  theme?: BtTheme;
+}
+
+export interface DropdownMenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export interface DropdownMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+  align?: "start" | "end" | "center";
+}
+
+export interface DropdownMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  destructive?: boolean;
+}
+
+export interface DropdownMenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {}
+
+export interface DropdownMenuLabelProps extends HTMLAttributes<HTMLDivElement> {}
+`
+    }
+  ]
+};
+
+// src/registry/components/tabs.ts
+var tabs = {
+  name: "tabs",
+  category: "navigation",
+  description: "Tab navigation with single-selection content panels",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Tabs.tsx",
+      content: `"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useRef,
+  type KeyboardEvent,
+} from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type {
+  TabsProps,
+  TabsListProps,
+  TabsTriggerProps,
+  TabsContentProps,
+} from "./tabs.types";
+
+interface TabsContextValue {
+  activeValue: string;
+  setActiveValue: (value: string) => void;
+  variant: "line" | "pill";
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx) throw new Error("Tabs sub-components must be used inside <Tabs>");
+  return ctx;
+}
+
+export function Tabs({
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  variant = "line",
+  theme,
+  className,
+  children,
+}: TabsProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const activeValue = controlledValue ?? internalValue;
+
+  const setActiveValue = useCallback(
+    (val: string) => {
+      if (controlledValue === undefined) setInternalValue(val);
+      onValueChange?.(val);
+    },
+    [controlledValue, onValueChange]
+  );
+
+  return (
+    <TabsContext.Provider value={{ activeValue, setActiveValue, variant }}>
+      <div data-bt-theme={activeTheme} className={cn("flex flex-col gap-4", className)}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+export function TabsList({ className, children, ...props }: TabsListProps) {
+  const { variant } = useTabsContext();
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {
+    const triggers = listRef.current?.querySelectorAll<HTMLButtonElement>(
+      '[role="tab"]:not([disabled])'
+    );
+    if (!triggers || triggers.length === 0) return;
+    const idx = Array.from(triggers).indexOf(document.activeElement as HTMLButtonElement);
+
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      triggers[(idx + 1) % triggers.length].focus();
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      triggers[(idx - 1 + triggers.length) % triggers.length].focus();
+    }
+  }, []);
+
+  return (
+    <div
+      ref={listRef}
+      role="tablist"
+      aria-orientation="horizontal"
+      onKeyDown={handleKeyDown}
+      className={cn(
+        "flex items-center",
+        variant === "pill"
+          ? "gap-1 bg-[var(--bt-bg-muted)] p-1 rounded-[var(--bt-radius-md)]"
+          : "border-b border-[var(--bt-border)] gap-0",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function TabsTrigger({
+  value,
+  disabled = false,
+  className,
+  children,
+  onClick,
+  ...props
+}: TabsTriggerProps) {
+  const { activeValue, setActiveValue, variant } = useTabsContext();
+  const isActive = activeValue === value;
+
+  return (
+    <button
+      role="tab"
+      type="button"
+      aria-selected={isActive}
+      aria-controls={\`tabpanel-\${value}\`}
+      id={\`tab-\${value}\`}
+      disabled={disabled}
+      tabIndex={isActive ? 0 : -1}
+      onClick={(e) => {
+        setActiveValue(value);
+        (onClick as React.MouseEventHandler<HTMLButtonElement>)?.(e);
+      }}
+      className={cn(
+        "inline-flex items-center justify-center px-3 py-2 text-sm font-medium",
+        "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+        "disabled:opacity-[var(--bt-disabled-opacity)] disabled:pointer-events-none",
+        variant === "pill"
+          ? cn(
+              "rounded-[var(--bt-radius-sm)]",
+              isActive
+                ? "bg-[var(--bt-bg-elevated)] text-[var(--bt-text-primary)] shadow-[var(--bt-shadow-sm)]"
+                : "text-[var(--bt-text-muted)] hover:text-[var(--bt-text-primary)]"
+            )
+          : cn(
+              "border-b-2 rounded-none -mb-px",
+              isActive
+                ? "border-[var(--bt-accent)] text-[var(--bt-accent)]"
+                : "border-transparent text-[var(--bt-text-muted)] hover:text-[var(--bt-text-primary)]"
+            ),
+        className
+      )}
+      {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function TabsContent({
+  value,
+  className,
+  children,
+  ...props
+}: TabsContentProps) {
+  const { activeValue } = useTabsContext();
+  if (activeValue !== value) return null;
+
+  return (
+    <div
+      role="tabpanel"
+      id={\`tabpanel-\${value}\`}
+      aria-labelledby={\`tab-\${value}\`}
+      tabIndex={0}
+      className={cn("focus-visible:outline-none animate-[bt-fade-in_0.15s_ease-out]", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "tabs.types.ts",
+      content: `import type { HTMLAttributes, ReactNode } from "react";
+import type { BtTheme } from "../../types";
+
+export type TabsVariant = "line" | "pill";
+
+export interface TabsProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  variant?: TabsVariant;
+  theme?: BtTheme;
+  className?: string;
+  children: ReactNode;
+}
+
+export interface TabsListProps extends HTMLAttributes<HTMLDivElement> {}
+
+export interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+  value: string;
+  disabled?: boolean;
+}
+
+export interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/accordion.ts
+var accordion = {
+  name: "accordion",
+  category: "navigation",
+  description: "Collapsible content sections with single/multiple modes",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Accordion.tsx",
+      content: `"use client";
+
+import { createContext, useContext, useState, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+} from "./accordion.types";
+
+interface AccordionContextValue {
+  openValues: string[];
+  toggle: (value: string) => void;
+  type: "single" | "multiple";
+}
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+function useAccordionContext() {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) throw new Error("Accordion sub-components must be used inside <Accordion>");
+  return ctx;
+}
+
+interface AccordionItemContextValue {
+  value: string;
+  isOpen: boolean;
+}
+
+const AccordionItemContext = createContext<AccordionItemContextValue | null>(null);
+
+function useAccordionItemContext() {
+  const ctx = useContext(AccordionItemContext);
+  if (!ctx) throw new Error("AccordionTrigger/AccordionContent must be used inside <AccordionItem>");
+  return ctx;
+}
+
+export function Accordion({
+  type = "single",
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  theme,
+  className,
+  children,
+  ...props
+}: AccordionProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+
+  const getInitial = (): string[] => {
+    if (defaultValue) return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    return [];
+  };
+
+  const [internalOpen, setInternalOpen] = useState<string[]>(getInitial);
+  const openValues =
+    controlledValue !== undefined
+      ? Array.isArray(controlledValue)
+        ? controlledValue
+        : [controlledValue]
+      : internalOpen;
+
+  const toggle = useCallback(
+    (val: string) => {
+      let next: string[];
+      if (type === "single") {
+        next = openValues.includes(val) ? [] : [val];
+      } else {
+        next = openValues.includes(val)
+          ? openValues.filter((v) => v !== val)
+          : [...openValues, val];
+      }
+      if (controlledValue === undefined) setInternalOpen(next);
+      onValueChange?.(type === "single" ? (next[0] ?? "") : next);
+    },
+    [openValues, type, controlledValue, onValueChange]
+  );
+
+  return (
+    <AccordionContext.Provider value={{ openValues, toggle, type }}>
+      <div
+        data-bt-theme={activeTheme}
+        className={cn(
+          "divide-y divide-[var(--bt-border)] border border-[var(--bt-border)] rounded-[var(--bt-radius-md)]",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
+}
+
+export function AccordionItem({ value, className, children, ...props }: AccordionItemProps) {
+  const { openValues } = useAccordionContext();
+  const isOpen = openValues.includes(value);
+  return (
+    <AccordionItemContext.Provider value={{ value, isOpen }}>
+      <div className={cn("overflow-hidden", className)} {...props}>
+        {children}
+      </div>
+    </AccordionItemContext.Provider>
+  );
+}
+
+export function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps) {
+  const { toggle } = useAccordionContext();
+  const { value, isOpen } = useAccordionItemContext();
+  return (
+    <button
+      type="button"
+      aria-expanded={isOpen}
+      onClick={() => toggle(value)}
+      className={cn(
+        "flex w-full items-center justify-between px-4 py-3 text-sm font-medium",
+        "text-[var(--bt-text-primary)] hover:bg-[var(--bt-bg-muted)]",
+        "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)] focus-visible:ring-inset",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        style={{
+          transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+          transition: "transform 0.2s ease",
+        }}
+        aria-hidden="true"
+      >
+        <polyline points="6 9 12 15 18 9" />
+      </svg>
+    </button>
+  );
+}
+
+export function AccordionContent({ className, children, ...props }: AccordionContentProps) {
+  const { isOpen } = useAccordionItemContext();
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateRows: isOpen ? "1fr" : "0fr",
+        transition: "grid-template-rows 0.2s ease",
+      }}
+    >
+      <div style={{ overflow: "hidden" }}>
+        <div
+          className={cn("px-4 pb-3 pt-0 text-sm text-[var(--bt-text-secondary)]", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "accordion.types.ts",
+      content: `import type { HTMLAttributes, ButtonHTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+  type?: "single" | "multiple";
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  theme?: BtTheme;
+}
+
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+  value: string;
+}
+
+export interface AccordionTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {}
+`
+    }
+  ]
+};
+
+// src/registry/components/breadcrumb.ts
+var breadcrumb = {
+  name: "breadcrumb",
+  category: "navigation",
+  description: "Navigation breadcrumb with separator and current page",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Breadcrumb.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type {
+  BreadcrumbProps,
+  BreadcrumbItemProps,
+  BreadcrumbSeparatorProps,
+} from "./breadcrumb.types";
+
+export function Breadcrumb({ className, children, ...props }: BreadcrumbProps) {
+  return (
+    <nav aria-label="Breadcrumb" className={cn("", className)} {...props}>
+      <ol className="flex flex-wrap items-center gap-1.5 text-sm text-[var(--bt-text-muted)]">
+        {children}
+      </ol>
+    </nav>
+  );
+}
+
+export function BreadcrumbItem({
+  href,
+  isCurrentPage = false,
+  className,
+  children,
+  ...props
+}: BreadcrumbItemProps) {
+  if (isCurrentPage) {
+    return (
+      <li aria-current="page" className={cn("font-medium text-[var(--bt-text-primary)]", className)}>
+        {children}
+      </li>
+    );
+  }
+  return (
+    <li className={cn("", className)}>
+      <a
+        href={href}
+        className="transition-colors hover:text-[var(--bt-text-primary)]"
+        {...props}
+      >
+        {children}
+      </a>
+    </li>
+  );
+}
+
+export function BreadcrumbSeparator({
+  separator = "/",
+  className,
+  ...props
+}: BreadcrumbSeparatorProps) {
+  return (
+    <li aria-hidden="true" className={cn("text-[var(--bt-text-muted)]", className)} {...props}>
+      {separator}
+    </li>
+  );
+}
+`
+    },
+    {
+      name: "breadcrumb.types.ts",
+      content: `import type { HTMLAttributes, AnchorHTMLAttributes } from "react";
+
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {}
+
+export interface BreadcrumbItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  href?: string;
+  isCurrentPage?: boolean;
+}
+
+export interface BreadcrumbSeparatorProps extends HTMLAttributes<HTMLLIElement> {
+  separator?: string;
+}
+`
+    }
+  ]
+};
+
+// src/registry/components/table.ts
+var table = {
+  name: "table",
+  category: "data",
+  description: "Data table with header, body, and cell styling",
+  infraDeps: ["tokens", "globals", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Table.tsx",
+      content: `import { cn } from "@/lib/utils";
+import type {
+  TableProps, TableHeaderProps, TableBodyProps, TableFooterProps,
+  TableRowProps, TableHeadProps, TableCellProps, TableCaptionProps,
+} from "./table.types";
+
+export function Table({ striped = false, theme, className, children, ...props }: TableProps) {
+  return (
+    <div
+      {...(theme ? { "data-bt-theme": theme } : {})}
+      className="w-full overflow-auto rounded-[var(--bt-radius-md)] border border-[var(--bt-border)]"
+    >
+      <table
+        className={cn(
+          "w-full caption-bottom text-sm text-[var(--bt-text-primary)]",
+          striped && "[&_tbody_tr:nth-child(odd)]:bg-[var(--bt-bg-muted)]",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </table>
+    </div>
+  );
+}
+
+export function TableHeader({ sticky = false, className, children, ...props }: TableHeaderProps) {
+  return (
+    <thead
+      className={cn(
+        "bg-[var(--bt-bg-elevated)] text-[var(--bt-text-secondary)]",
+        sticky && "sticky top-0 z-10",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </thead>
+  );
+}
+
+export function TableBody({ className, children, ...props }: TableBodyProps) {
+  return (
+    <tbody className={cn("divide-y divide-[var(--bt-border)]", className)} {...props}>
+      {children}
+    </tbody>
+  );
+}
+
+export function TableFooter({ className, children, ...props }: TableFooterProps) {
+  return (
+    <tfoot
+      className={cn("bg-[var(--bt-bg-elevated)] text-[var(--bt-text-secondary)] font-medium", className)}
+      {...props}
+    >
+      {children}
+    </tfoot>
+  );
+}
+
+export function TableRow({ className, children, ...props }: TableRowProps) {
+  return (
+    <tr
+      className={cn(
+        "border-b border-[var(--bt-border)] transition-colors hover:bg-[var(--bt-hover-bg)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </tr>
+  );
+}
+
+export function TableHead({ className, children, ...props }: TableHeadProps) {
+  return (
+    <th
+      scope="col"
+      className={cn(
+        "h-10 px-4 text-left align-middle font-semibold text-xs uppercase tracking-wide text-[var(--bt-text-muted)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </th>
+  );
+}
+
+export function TableCell({ className, children, ...props }: TableCellProps) {
+  return (
+    <td className={cn("px-4 py-3 align-middle", className)} {...props}>
+      {children}
+    </td>
+  );
+}
+
+export function TableCaption({ className, children, ...props }: TableCaptionProps) {
+  return (
+    <caption className={cn("mt-4 text-sm text-[var(--bt-text-muted)] text-center", className)} {...props}>
+      {children}
+    </caption>
+  );
+}
+`
+    },
+    {
+      name: "table.types.ts",
+      content: `import type { HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes, TableHTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+  striped?: boolean;
+  theme?: BtTheme;
+}
+
+export interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
+  sticky?: boolean;
+}
+
+export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {}
+export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {}
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {}
+export interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {}
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {}
+export interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {}
+`
+    }
+  ]
+};
+
+// src/registry/components/sidebar.ts
+var sidebar = {
+  name: "sidebar",
+  category: "layout",
+  description: "Fixed navigation sidebar with overlay backdrop",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Sidebar.tsx",
+      content: `"use client";
+
+import { createContext, useContext, useState, useCallback, useEffect } from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type {
+  SidebarProps, SidebarTriggerProps, SidebarContentProps,
+  SidebarHeaderProps, SidebarBodyProps, SidebarFooterProps, SidebarCloseProps,
+} from "./sidebar.types";
+
+interface SidebarContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  side: "left" | "right";
+  closeOnBackdrop: boolean;
+  size: "sm" | "md" | "lg";
+}
+
+const SidebarContext = createContext<SidebarContextValue | null>(null);
+
+function useSidebarContext() {
+  const ctx = useContext(SidebarContext);
+  if (!ctx) throw new Error("Sidebar sub-components must be used inside <Sidebar>");
+  return ctx;
+}
+
+const sizeWidths = { sm: "240px", md: "288px", lg: "360px" };
+
+export function Sidebar({
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+  side = "left",
+  closeOnBackdrop = true,
+  size = "md",
+  theme,
+  className,
+  children,
+}: SidebarProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const handleOpenChange = useCallback(
+    (val: boolean) => {
+      if (controlledOpen === undefined) setInternalOpen(val);
+      onOpenChange?.(val);
+    },
+    [controlledOpen, onOpenChange]
+  );
+
+  useEffect(() => {
+    if (open) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "";
+    return () => { document.body.style.overflow = ""; };
+  }, [open]);
+
+  return (
+    <SidebarContext.Provider value={{ open, onOpenChange: handleOpenChange, side, closeOnBackdrop, size }}>
+      <div data-bt-theme={activeTheme} className={className}>
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+}
+
+export function SidebarTrigger({ children, onClick, className, ...props }: SidebarTriggerProps) {
+  const { onOpenChange } = useSidebarContext();
+  return (
+    <button
+      type="button"
+      onClick={(e) => { onOpenChange(true); onClick?.(e); }}
+      className={cn(
+        "inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium",
+        "rounded-[var(--bt-radius-md)] border border-[var(--bt-border)]",
+        "text-[var(--bt-text-primary)] bg-transparent hover:bg-[var(--bt-hover-bg)]",
+        "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
+
+export function SidebarContent({ children, className }: SidebarContentProps) {
+  const { open, onOpenChange, side, closeOnBackdrop, size } = useSidebarContext();
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        aria-hidden="true"
+        onClick={() => closeOnBackdrop && onOpenChange(false)}
+        style={{
+          position: "fixed",
+          inset: 0,
+          zIndex: 40,
+          background: "rgba(0,0,0,0.5)",
+          opacity: open ? 1 : 0,
+          pointerEvents: open ? "auto" : "none",
+          transition: "opacity 0.25s ease",
+          willChange: "opacity",
+        }}
+      />
+      {/* Panel */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        style={{
+          position: "fixed",
+          top: 0,
+          bottom: 0,
+          [side]: 0,
+          width: sizeWidths[size],
+          maxWidth: "90vw",
+          zIndex: 50,
+          transform: open
+            ? "translateX(0)"
+            : side === "left"
+            ? "translateX(-100%)"
+            : "translateX(100%)",
+          transition: "transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+          willChange: "transform",
+        }}
+        className={cn(
+          "flex flex-col",
+          "bg-[var(--bt-bg-surface)]",
+          side === "left" ? "border-r border-[var(--bt-border)]" : "border-l border-[var(--bt-border)]",
+          "shadow-[var(--bt-shadow-lg)]",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </>
+  );
+}
+
+export function SidebarHeader({ children, className, ...props }: SidebarHeaderProps) {
+  return (
+    <div
+      className={cn("flex items-center justify-between px-4 py-3 border-b border-[var(--bt-border)] shrink-0", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SidebarBody({ children, className, ...props }: SidebarBodyProps) {
+  return (
+    <div className={cn("flex-1 overflow-y-auto px-4 py-3", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function SidebarFooter({ children, className, ...props }: SidebarFooterProps) {
+  return (
+    <div className={cn("shrink-0 px-4 py-3 border-t border-[var(--bt-border)]", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function SidebarClose({ children, onClick, className, ...props }: SidebarCloseProps) {
+  const { onOpenChange } = useSidebarContext();
+  return (
+    <button
+      type="button"
+      aria-label="Close sidebar"
+      onClick={(e) => { onOpenChange(false); onClick?.(e); }}
+      className={cn(
+        "inline-flex items-center justify-center rounded-[var(--bt-radius-sm)]",
+        "w-8 h-8 text-[var(--bt-text-muted)] hover:text-[var(--bt-text-primary)]",
+        "hover:bg-[var(--bt-hover-bg)] transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bt-ring)]",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      )}
+    </button>
+  );
+}
+`
+    },
+    {
+      name: "sidebar.types.ts",
+      content: `import type { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import type { BtTheme } from "../../types";
+
+export interface SidebarProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  side?: "left" | "right";
+  closeOnBackdrop?: boolean;
+  size?: "sm" | "md" | "lg";
+  theme?: BtTheme;
+  className?: string;
+  children: ReactNode;
+}
+
+export interface SidebarTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+export interface SidebarContentProps extends HTMLAttributes<HTMLDivElement> {}
+export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {}
+export interface SidebarBodyProps extends HTMLAttributes<HTMLDivElement> {}
+export interface SidebarFooterProps extends HTMLAttributes<HTMLDivElement> {}
+export interface SidebarCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+`
+    }
+  ]
+};
+
+// src/registry/components/header.ts
+var header = {
+  name: "header",
+  category: "layout",
+  description: "Page header with navigation and action slots",
+  infraDeps: ["tokens", "globals", "provider", "utils"],
+  componentDeps: [],
+  npmDeps: [],
+  files: [
+    {
+      name: "Header.tsx",
+      content: `"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+import { useBakeThereTheme } from "../../provider";
+import type { HeaderProps, HeaderBrandProps, HeaderNavProps, HeaderActionsProps } from "./header.types";
+
+export function Header({
+  sticky = false,
+  variant = "bordered",
+  scrollFade = false,
+  theme,
+  className,
+  children,
+  ...props
+}: HeaderProps) {
+  const { theme: contextTheme } = useBakeThereTheme();
+  const activeTheme = theme ?? contextTheme;
+  const [scrolled, setScrolled] = useState(false);
+  const headerRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const el = headerRef.current;
+    if (!scrollFade || !el) return;
+
+    // Walk up the DOM to find the nearest scrollable ancestor.
+    // Terminates when el becomes null (reached top of the tree without finding one).
+    let scrollEl: Element | null = el.parentElement;
+    while (scrollEl) {
+      const { overflowY } = window.getComputedStyle(scrollEl);
+      // "overlay" is a legacy WebKit alias for "scroll"; harmless to include.
+      if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") break;
+      scrollEl = scrollEl.parentElement;
+    }
+
+    // Use found container, or fall back to window (e.g. full-page layouts).
+    const target: Element | Window = scrollEl ?? window;
+
+    const getScrollTop = () =>
+      target instanceof Window ? target.scrollY : (target as Element).scrollTop;
+
+    const handle = () => setScrolled(getScrollTop() > 20);
+
+    // Initialize immediately \u2014 container may already be scrolled on mount.
+    handle();
+
+    target.addEventListener("scroll", handle, { passive: true });
+    return () => target.removeEventListener("scroll", handle);
+  }, [scrollFade]);
+
+  const visible = !scrollFade || scrolled;
+
+  return (
+    <header
+      ref={headerRef}
+      data-bt-theme={activeTheme}
+      style={scrollFade ? { transition: "background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease" } : undefined}
+      className={cn(
+        "w-full z-30",
+        sticky ? "sticky top-0" : "relative",
+        visible ? "bg-[var(--bt-bg-base)]" : "bg-transparent",
+        variant === "bordered" && visible && "border-b border-[var(--bt-border)]",
+        variant === "elevated" && visible && "shadow-[var(--bt-shadow-sm)]",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center h-14 px-4 gap-4">
+        {children}
+      </div>
+    </header>
+  );
+}
+
+export function HeaderBrand({ className, children, ...props }: HeaderBrandProps) {
+  return (
+    <div className={cn("flex items-center gap-2 shrink-0", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+
+export function HeaderNav({ className, children, ...props }: HeaderNavProps) {
+  return (
+    <nav className={cn("flex-1 flex items-center gap-1", className)} {...props}>
+      {children}
+    </nav>
+  );
+}
+
+export function HeaderActions({ className, children, ...props }: HeaderActionsProps) {
+  return (
+    <div className={cn("flex items-center gap-2 ml-auto shrink-0", className)} {...props}>
+      {children}
+    </div>
+  );
+}
+`
+    },
+    {
+      name: "header.types.ts",
+      content: `import type { HTMLAttributes } from "react";
+import type { BtTheme } from "../../types";
+
+export interface HeaderProps extends HTMLAttributes<HTMLElement> {
+  sticky?: boolean;
+  variant?: "flat" | "bordered" | "elevated";
+  scrollFade?: boolean;
+  theme?: BtTheme;
+}
+
+export interface HeaderBrandProps extends HTMLAttributes<HTMLDivElement> {}
+export interface HeaderNavProps extends HTMLAttributes<HTMLElement> {}
+export interface HeaderActionsProps extends HTMLAttributes<HTMLDivElement> {}
+`
+    }
+  ]
+};
+
+// src/registry/index.ts
+var registry = {
+  button,
+  "button-group": buttonGroup,
+  input,
+  label,
+  checkbox,
+  toggle,
+  text,
+  textarea,
+  radio,
+  slider,
+  select,
+  card,
+  badge,
+  avatar,
+  separator,
+  skeleton,
+  stat,
+  empty,
+  alert,
+  progress,
+  dialog,
+  tooltip,
+  toast,
+  popover,
+  "dropdown-menu": dropdownMenu,
+  tabs,
+  accordion,
+  breadcrumb,
+  table,
+  sidebar,
+  header
+};
+var categories = {
+  primitives: ["button", "button-group", "input", "label", "checkbox", "toggle", "text", "textarea", "radio", "slider", "select"],
+  display: ["card", "badge", "avatar", "separator", "skeleton", "stat", "empty", "alert", "progress"],
+  overlay: ["dialog", "tooltip", "toast", "popover"],
+  navigation: ["dropdown-menu", "tabs", "accordion", "breadcrumb"],
+  data: ["table"],
+  layout: ["sidebar", "header"]
+};
+
+// src/commands/list.ts
+var listCommand = new import_commander.Command("list").description("List all available BakeThere components").action(() => {
+  (0, import_prompts.intro)("BakeThere Components");
+  for (const [category, names] of Object.entries(categories)) {
+    const label2 = category.charAt(0).toUpperCase() + category.slice(1);
+    import_prompts.log.message(`${label2.padEnd(12)} ${names.join("  ")}`);
+  }
+  (0, import_prompts.outro)("Run 'bakethere add <name>' to add a component.");
+});
+
+// src/commands/init.ts
+var import_commander2 = require("commander");
+var import_prompts2 = require("@clack/prompts");
+var import_path4 = require("path");
+var import_fs4 = require("fs");
+
+// src/lib/config.ts
+var import_fs = require("fs");
+var import_path = require("path");
+var CONFIG_FILE = "bakethere.json";
+function hasConfig(cwd) {
+  return (0, import_fs.existsSync)((0, import_path.join)(cwd, CONFIG_FILE));
+}
+function readConfig(cwd) {
+  const configPath = (0, import_path.join)(cwd, CONFIG_FILE);
+  if (!(0, import_fs.existsSync)(configPath)) {
+    throw new Error(`bakethere.json not found at ${configPath}. Run 'bakethere init' first.`);
+  }
+  return JSON.parse((0, import_fs.readFileSync)(configPath, "utf-8"));
+}
+function writeConfig(cwd, config) {
+  (0, import_fs.writeFileSync)((0, import_path.join)(cwd, CONFIG_FILE), JSON.stringify(config, null, 2) + "\n");
+}
+
+// src/lib/detect.ts
+var import_fs2 = require("fs");
+var import_path2 = require("path");
+function detectProject(cwd) {
+  return {
+    hasSrcDir: (0, import_fs2.existsSync)((0, import_path2.join)(cwd, "src")),
+    hasTypeScript: (0, import_fs2.existsSync)((0, import_path2.join)(cwd, "tsconfig.json")),
+    hasUtils: (0, import_fs2.existsSync)((0, import_path2.join)(cwd, "src/lib/utils.ts")) || (0, import_fs2.existsSync)((0, import_path2.join)(cwd, "lib/utils.ts"))
+  };
+}
+
+// src/lib/copy.ts
+var import_fs3 = require("fs");
+var import_path3 = require("path");
+function copyFiles(files, targetDir, options = {}) {
+  const results = [];
+  for (const file of files) {
+    const dest = (0, import_path3.join)(targetDir, file.name);
+    if ((0, import_fs3.existsSync)(dest) && !options.overwrite) {
+      results.push({ path: dest, skipped: true });
+      continue;
+    }
+    try {
+      (0, import_fs3.mkdirSync)((0, import_path3.dirname)(dest), { recursive: true });
+      (0, import_fs3.writeFileSync)(dest, file.content, "utf-8");
+      results.push({ path: dest, skipped: false });
+    } catch (e) {
+      results.push({ path: dest, skipped: false, error: String(e) });
+    }
+  }
+  return results;
+}
+
+// src/registry/infra.ts
+var tokensCssContent = `[data-bt-theme="dark"] {
+  /* Backgrounds */
+  --bt-bg-base:       #15151E;
+  --bt-bg-surface:    #2A2B3C;
+  --bt-bg-elevated:   #232336;
+  --bt-bg-overlay:    #1E1E2E;
+  --bt-bg-muted:      #28283A;
+
+  /* Text */
+  --bt-text-primary:  #EDEDED;
+  --bt-text-secondary:#ADADBF;
+  --bt-text-muted:    #7E7E99;
+  --bt-text-inverse:  #15151E;
+
+  /* Accent (teal) */
+  --bt-accent:        #5EDEC6;
+  --bt-accent-hover:  #4DCCB3;
+  --bt-accent-muted:  rgba(94,222,198,0.15);
+
+  /* Borders */
+  --bt-border:        #393951;
+  --bt-border-focus:  #5EDEC6;
+  --bt-border-muted:  #2F2F44;
+
+  /* Ring */
+  --bt-ring:          rgba(94,222,198,0.45);
+
+  /* Semantic */
+  --bt-destructive:        #F87171;
+  --bt-destructive-bg:     rgba(248,113,113,0.15);
+  --bt-success:            #4ADE80;
+  --bt-warning:            #FBBF24;
+
+  /* Interactive */
+  --bt-hover-bg:           rgba(255,255,255,0.05);
+  --bt-active-bg:          rgba(94,222,198,0.12);
+  --bt-disabled-opacity:   0.4;
+
+  /* Shadows */
+  --bt-shadow-sm:  0 1px 3px rgba(0,0,0,0.5);
+  --bt-shadow-md:  0 4px 12px rgba(0,0,0,0.6);
+  --bt-shadow-lg:  0 8px 32px rgba(0,0,0,0.7);
+
+  /* Skeleton */
+  --bt-skeleton-base:      #252535;
+  --bt-skeleton-highlight: #393951;
+
+  /* Radius */
+  --bt-radius-sm:   0.25rem;
+  --bt-radius-md:   0.5rem;
+  --bt-radius-lg:   0.75rem;
+  --bt-radius-full: 9999px;
+}
+
+[data-bt-theme="warm"] {
+  /* Backgrounds \u2014 sourdough crumb interior: warm cream with blue undertones */
+  --bt-bg-base:       #EEF0F8;
+  --bt-bg-surface:    #F4F2FB;
+  --bt-bg-elevated:   #F9F8FE;
+  --bt-bg-overlay:    #EAECF5;
+  --bt-bg-muted:      #E5E4F2;
+
+  /* Text \u2014 dark navy to medium slate */
+  --bt-text-primary:  #1E2140;
+  --bt-text-secondary:#484E6E;
+  --bt-text-muted:    #8890B0;
+  --bt-text-inverse:  #FFFFFF;
+
+  /* Accent \u2014 dusty periwinkle blue */
+  --bt-accent:        #5573B8;
+  --bt-accent-hover:  #4260A3;
+  --bt-accent-muted:  rgba(85,115,184,0.15);
+
+  /* Borders \u2014 soft blue-grey */
+  --bt-border:        #BFC5DC;
+  --bt-border-focus:  #5573B8;
+  --bt-border-muted:  #D4D8EC;
+  --bt-ring:          rgba(85,115,184,0.4);
+
+  /* Semantic */
+  --bt-destructive:        #C44B4B;
+  --bt-destructive-bg:     rgba(196,75,75,0.1);
+  --bt-success:            #3A8F5A;
+  --bt-warning:            #A07020;
+
+  /* Interactive */
+  --bt-hover-bg:           rgba(85,115,184,0.06);
+  --bt-active-bg:          rgba(85,115,184,0.12);
+  --bt-disabled-opacity:   0.4;
+
+  /* Shadows */
+  --bt-shadow-sm:  0 1px 3px rgba(30,33,64,0.1);
+  --bt-shadow-md:  0 4px 12px rgba(30,33,64,0.12);
+  --bt-shadow-lg:  0 8px 32px rgba(30,33,64,0.16);
+
+  /* Skeleton */
+  --bt-skeleton-base:      #D4D8EC;
+  --bt-skeleton-highlight: #F4F2FB;
+
+  /* Radius */
+  --bt-radius-sm:   0.375rem;
+  --bt-radius-md:   0.625rem;
+  --bt-radius-lg:   1rem;
+  --bt-radius-full: 9999px;
+}
+
+[data-bt-theme="plain"] {
+  --bt-bg-base:       #FFFFFF;
+  --bt-bg-surface:    #F9F9F9;
+  --bt-bg-elevated:   #F2F2F2;
+  --bt-bg-overlay:    #FAFAFA;
+  --bt-bg-muted:      #EEEEEE;
+
+  --bt-text-primary:  #0A0A0A;
+  --bt-text-secondary:#404040;
+  --bt-text-muted:    #888888;
+  --bt-text-inverse:  #FFFFFF;
+
+  --bt-accent:        #0A0A0A;
+  --bt-accent-hover:  #333333;
+  --bt-accent-muted:  #E8E8E8;
+
+  --bt-border:        #C0C0C0;
+  --bt-border-focus:  #0A0A0A;
+  --bt-border-muted:  #D8D8D8;
+  --bt-ring:          rgba(10,10,10,0.25);
+
+  --bt-destructive:        #DC2626;
+  --bt-destructive-bg:     rgba(220,38,38,0.12);
+  --bt-success:            #16A34A;
+  --bt-warning:            #CA8A04;
+
+  --bt-hover-bg:           rgba(0,0,0,0.04);
+  --bt-active-bg:          rgba(0,0,0,0.08);
+  --bt-disabled-opacity:   0.55;
+
+  --bt-shadow-sm:  0 1px 3px rgba(0,0,0,0.14);
+  --bt-shadow-md:  0 4px 12px rgba(0,0,0,0.12);
+  --bt-shadow-lg:  0 8px 32px rgba(0,0,0,0.15);
+
+  /* Skeleton */
+  --bt-skeleton-base:      #D4D4D4;
+  --bt-skeleton-highlight: #F5F5F5;
+
+  --bt-radius-sm:   0.25rem;
+  --bt-radius-md:   0.375rem;
+  --bt-radius-lg:   0.5rem;
+  --bt-radius-full: 9999px;
+}
+`;
+var bakethereGlobalsContent = `/* BakeThere Global Styles \u2014 import in your globals.css */
+
+::backdrop { background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
+dialog { position: fixed; inset: 0; margin: auto; }
+
+[data-bt-tooltip] {
+  position: absolute;
+  z-index: 50;
+  opacity: 0;
+  pointer-events: none;
+  background: var(--bt-bg-elevated);
+  color: var(--bt-text-primary);
+  padding: 0.375rem 0.625rem;
+  border-radius: var(--bt-radius-sm);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  transition: opacity 0.15s;
+}
+
+.bt-tooltip-wrapper:hover [data-bt-tooltip],
+.bt-tooltip-wrapper:focus-within [data-bt-tooltip] {
+  opacity: 1;
+}
+
+[data-bt-tooltip][data-side="top"]    { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
+[data-bt-tooltip][data-side="bottom"] { top: calc(100% + 6px);    left: 50%; transform: translateX(-50%); }
+[data-bt-tooltip][data-side="left"]   { right: calc(100% + 6px);  top: 50%;  transform: translateY(-50%); }
+[data-bt-tooltip][data-side="right"]  { left: calc(100% + 6px);   top: 50%;  transform: translateY(-50%); }
+
+/* Themed scrollbar */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--bt-border, #ccc); border-radius: 9999px; }
+::-webkit-scrollbar-thumb:hover { background: var(--bt-text-muted, #999); }
+* { scrollbar-width: thin; scrollbar-color: var(--bt-border, #ccc) transparent; }
+
+/* ButtonGroup */
+.bt-button-group {
+  display: inline-flex;
+}
+.bt-button-group > button:not(:first-child) {
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.bt-button-group > button:not(:last-child) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+@keyframes bt-toast-in {
+  from {
+    transform: translateY(1rem);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes bt-dropdown-in {
+  from {
+    transform: translateY(-0.25rem);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes bt-dialog-in {
+  from { transform: scale(0.96) translateY(-6px); opacity: 0; }
+  to   { transform: scale(1) translateY(0); opacity: 1; }
+}
+
+@keyframes bt-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes bt-progress-indeterminate {
+  0%   { transform: translateX(-100%) scaleX(0.5); }
+  50%  { transform: translateX(100%) scaleX(0.8); }
+  100% { transform: translateX(300%) scaleX(0.5); }
+}
+
+/* Slider */
+input[type="range"].bt-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 9999px;
+  background: linear-gradient(
+    to right,
+    var(--bt-accent) 0%,
+    var(--bt-accent) var(--bt-slider-value, 0%),
+    var(--bt-bg-muted) var(--bt-slider-value, 0%),
+    var(--bt-bg-muted) 100%
+  );
+  outline: none;
+  cursor: pointer;
+}
+input[type="range"].bt-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--bt-accent);
+  cursor: pointer;
+  box-shadow: var(--bt-shadow-sm);
+  border: 2px solid var(--bt-bg-elevated);
+}
+input[type="range"].bt-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--bt-accent);
+  cursor: pointer;
+  box-shadow: var(--bt-shadow-sm);
+  border: none;
+}
+input[type="range"].bt-slider:disabled {
+  opacity: var(--bt-disabled-opacity);
+  pointer-events: none;
+}
+
+@keyframes bt-shimmer {
+  from { background-position: -200% 0; }
+  to   { background-position:  200% 0; }
+}
+`;
+var providerContent = `"use client";
+
+import { createContext, useContext, useState, type ReactNode } from "react";
+
+export type BtTheme = "dark" | "warm" | "plain";
+// BtBaseProps is co-located here so component files can import it from BakeThereProvider
+// rather than needing a separate types file in the user's project.
+export type BtBaseProps = { theme?: BtTheme; className?: string; };
+
+interface BakeThereContextValue {
+  theme: BtTheme;
+  setTheme: (theme: BtTheme) => void;
+}
+
+const BakeThereContext = createContext<BakeThereContextValue | null>(null);
+
+interface BakeThereProviderProps {
+  children: ReactNode;
+  theme?: BtTheme;
+  defaultTheme?: BtTheme;
+}
+
+export function BakeThereProvider({
+  children,
+  theme: controlledTheme,
+  defaultTheme = "dark",
+}: BakeThereProviderProps) {
+  const [internalTheme, setInternalTheme] = useState<BtTheme>(defaultTheme);
+
+  const activeTheme = controlledTheme ?? internalTheme;
+  const setTheme = controlledTheme !== undefined ? () => {} : setInternalTheme;
+
+  return (
+    <BakeThereContext.Provider value={{ theme: activeTheme, setTheme }}>
+      <div data-bt-theme={activeTheme}>
+        {children}
+      </div>
+    </BakeThereContext.Provider>
+  );
+}
+
+export function useBakeThereTheme(): BakeThereContextValue {
+  const ctx = useContext(BakeThereContext);
+  if (!ctx) {
+    throw new Error("useBakeThereTheme must be used within a BakeThereProvider");
+  }
+  return ctx;
+}
+
+export function useThemeProps(): { "data-bt-theme": BtTheme } {
+  const { theme } = useBakeThereTheme();
+  return { "data-bt-theme": theme };
+}
+`;
+var utilsContent = `import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+`;
+var infra = {
+  tokens: { name: "bakethere-tokens.css", content: tokensCssContent },
+  globals: { name: "bakethere-globals.css", content: bakethereGlobalsContent },
+  provider: { name: "BakeThereProvider.tsx", content: providerContent },
+  utils: { name: "utils.ts", content: utilsContent }
+};
+
+// src/commands/init.ts
+var initCommand = new import_commander2.Command("init").description("Initialize BakeThere in your project").option("-y, --yes", "Skip prompts and use defaults", false).action(async (options) => {
+  const cwd = process.cwd();
+  (0, import_prompts2.intro)("BakeThere Init");
+  if (hasConfig(cwd)) {
+    import_prompts2.log.warn("bakethere.json already exists. Remove it to re-initialize.");
+    process.exit(0);
+  }
+  const detected = detectProject(cwd);
+  const defaultComponentsDir = detected.hasSrcDir ? "src/components/ui" : "components/ui";
+  const defaultStylesDir = detected.hasSrcDir ? "src/styles" : "styles";
+  let componentsDir = defaultComponentsDir;
+  let componentsAlias = "@/components/ui";
+  let stylesDir = defaultStylesDir;
+  let utilsAlias = "@/lib/utils";
+  if (!options.yes) {
+    const inputComponentsDir = await (0, import_prompts2.text)({
+      message: "Where should components be installed?",
+      placeholder: defaultComponentsDir,
+      defaultValue: defaultComponentsDir
+    });
+    if (typeof inputComponentsDir === "string") componentsDir = inputComponentsDir;
+    const inputAlias = await (0, import_prompts2.text)({
+      message: "What is the TypeScript alias for the components directory?",
+      placeholder: "@/components/ui",
+      defaultValue: "@/components/ui"
+    });
+    if (typeof inputAlias === "string") componentsAlias = inputAlias;
+    const inputStylesDir = await (0, import_prompts2.text)({
+      message: "Where should styles be installed?",
+      placeholder: defaultStylesDir,
+      defaultValue: defaultStylesDir
+    });
+    if (typeof inputStylesDir === "string") stylesDir = inputStylesDir;
+    const inputUtils = await (0, import_prompts2.text)({
+      message: "What is your utils import alias?",
+      placeholder: "@/lib/utils",
+      defaultValue: "@/lib/utils"
+    });
+    if (typeof inputUtils === "string") utilsAlias = inputUtils;
+  }
+  const config = {
+    componentsDir,
+    componentsAlias,
+    stylesDir,
+    aliases: { utils: utilsAlias }
+  };
+  const s1 = (0, import_prompts2.spinner)();
+  s1.start("Writing bakethere.json");
+  try {
+    writeConfig(cwd, config);
+  } catch (err) {
+    s1.stop("Failed to write bakethere.json");
+    import_prompts2.log.error(String(err));
+    process.exit(1);
+  }
+  s1.stop("bakethere.json created");
+  (0, import_fs4.mkdirSync)((0, import_path4.join)(cwd, stylesDir), { recursive: true });
+  (0, import_fs4.mkdirSync)((0, import_path4.join)(cwd, componentsDir), { recursive: true });
+  const stylesFiles = [infra.tokens, infra.globals];
+  const componentFiles = [infra.provider];
+  const utilsFiles = detected.hasUtils ? [] : [infra.utils];
+  const utilsDir = detected.hasSrcDir ? "src/lib" : "lib";
+  const s2 = (0, import_prompts2.spinner)();
+  s2.start("Copying infrastructure files");
+  let infraErrors = false;
+  const allInfraResults = [
+    ...copyFiles(stylesFiles, (0, import_path4.join)(cwd, stylesDir)),
+    ...copyFiles(componentFiles, (0, import_path4.join)(cwd, componentsDir)),
+    ...utilsFiles.length > 0 ? (() => {
+      (0, import_fs4.mkdirSync)((0, import_path4.join)(cwd, utilsDir), { recursive: true });
+      return copyFiles(utilsFiles, (0, import_path4.join)(cwd, utilsDir));
+    })() : []
+  ];
+  s2.stop("Infrastructure files copied");
+  for (const r of allInfraResults) {
+    if (r.error) {
+      import_prompts2.log.error(`Failed to write ${r.path}: ${r.error}`);
+      infraErrors = true;
+    }
+  }
+  if (infraErrors) {
+    (0, import_prompts2.outro)("Done with errors. Some infrastructure files may not have been written.");
+    process.exit(1);
+  }
+  (0, import_prompts2.outro)(`Done! Next steps:
+  1. Add to your globals.css:
+       @import '${stylesDir}/bakethere-tokens.css';
+       @import '${stylesDir}/bakethere-globals.css';
+  2. Wrap your app in <BakeThereProvider> from '${componentsAlias}/BakeThereProvider'
+  3. Run 'bakethere add <component>' to add components`);
+});
+
+// src/commands/add.ts
+var import_commander3 = require("commander");
+var import_prompts3 = require("@clack/prompts");
+var import_path5 = require("path");
+var import_fs5 = require("fs");
+
+// src/lib/rewrite.ts
+function rewriteImports(source, config) {
+  const { componentsAlias, aliases } = config;
+  let result = source.replace(
+    /from\s+"\.\.\/\.\.\/provider"|from\s+'\.\.\/\.\.\/provider'/g,
+    `from "${componentsAlias}/BakeThereProvider"`
+  );
+  result = result.replace(
+    /from\s+"\.\.\/provider"|from\s+'\.\.\/provider'/g,
+    `from "${componentsAlias}/BakeThereProvider"`
+  );
+  result = result.replace(
+    /from\s+"\.\.\/\.\.\/types"|from\s+'\.\.\/\.\.\/types'/g,
+    `from "${componentsAlias}/BakeThereProvider"`
+  );
+  result = result.replace(
+    /from\s+"\.\.\/types"|from\s+'\.\.\/types'/g,
+    `from "${componentsAlias}/BakeThereProvider"`
+  );
+  if (aliases.utils !== "@/lib/utils") {
+    result = result.replace(
+      /from\s+"@\/lib\/utils"|from\s+'@\/lib\/utils'/g,
+      `from "${aliases.utils}"`
+    );
+  }
+  result = result.replace(
+    /from\s+["'](\.\.\/\.\.\/|\.\.\/)[^"']+["']/g,
+    (match) => {
+      const pathMatch = match.match(/["'](\.\.\/\.\.\/|\.\.\/)(.*?)["']/);
+      if (!pathMatch) return match;
+      const segments = pathMatch[2].split("/");
+      const raw = segments[segments.length - 1];
+      const pascalSegment = raw.charAt(0).toUpperCase() + raw.slice(1);
+      return `from "${componentsAlias}/${pascalSegment}"`;
+    }
+  );
+  return result;
+}
+
+// src/commands/add.ts
+function resolveComponents(names) {
+  const visited = /* @__PURE__ */ new Set();
+  const infraDeps = /* @__PURE__ */ new Set();
+  const queue = [...names];
+  while (queue.length > 0) {
+    const name = queue.shift();
+    if (visited.has(name)) continue;
+    visited.add(name);
+    const comp = registry[name];
+    if (!comp) continue;
+    comp.infraDeps.forEach((d) => infraDeps.add(d));
+    comp.componentDeps.forEach((d) => {
+      if (!visited.has(d)) queue.push(d);
+    });
+  }
+  return { components: Array.from(visited), infraDeps };
+}
+function rewriteFiles(files, config) {
+  return files.map((f) => ({
+    ...f,
+    content: f.name.endsWith(".css") ? f.content : rewriteImports(f.content, config)
+  }));
+}
+var addCommand = new import_commander3.Command("add").description("Add one or more BakeThere components to your project").argument("[components...]", "Component names to add").option("-o, --overwrite", "Overwrite existing files", false).option("--path <dir>", "Override output directory for component files").option("-y, --yes", "Skip prompts and use defaults", false).action(async (componentArgs, options) => {
+  const cwd = process.cwd();
+  (0, import_prompts3.intro)("BakeThere");
+  const unknown = componentArgs.filter((n) => !registry[n]);
+  if (unknown.length > 0) {
+    for (const name of unknown) {
+      import_prompts3.log.error(`Unknown component: "${name}". Run 'bakethere list' to see available components.`);
+    }
+    process.exit(1);
+  }
+  let selectedNames = componentArgs;
+  if (selectedNames.length === 0 && options.yes) {
+    import_prompts3.log.error("Specify component names when using --yes. Example: bakethere add button card");
+    process.exit(1);
+  }
+  if (selectedNames.length === 0) {
+    const allOptions = Object.entries(categories).flatMap(
+      ([cat, names]) => names.map((n) => ({ value: n, label: n, hint: cat }))
+    );
+    const selected = await (0, import_prompts3.multiselect)({
+      message: "Which components would you like to add?",
+      options: allOptions,
+      required: true
+    });
+    if ((0, import_prompts3.isCancel)(selected)) {
+      import_prompts3.log.info("Cancelled.");
+      process.exit(0);
+    }
+    selectedNames = selected;
+  }
+  if (!hasConfig(cwd)) {
+    import_prompts3.log.warn("bakethere.json not found. Running init first...");
+    const detected2 = detectProject(cwd);
+    const config2 = {
+      componentsDir: detected2.hasSrcDir ? "src/components/ui" : "components/ui",
+      componentsAlias: "@/components/ui",
+      stylesDir: detected2.hasSrcDir ? "src/styles" : "styles",
+      aliases: { utils: "@/lib/utils" }
+    };
+    writeConfig(cwd, config2);
+    import_prompts3.log.info("bakethere.json created with defaults. Edit it to customize paths.");
+  }
+  const config = readConfig(cwd);
+  const componentsDir = options.path ? (0, import_path5.resolve)(cwd, options.path) : (0, import_path5.join)(cwd, config.componentsDir);
+  const stylesDir = (0, import_path5.join)(cwd, config.stylesDir);
+  const detected = detectProject(cwd);
+  const utilsDir = (0, import_path5.resolve)(cwd, detected.hasSrcDir ? "src/lib" : "lib");
+  const { components, infraDeps } = resolveComponents(selectedNames);
+  const s = (0, import_prompts3.spinner)();
+  s.start("Setting up infrastructure");
+  (0, import_fs5.mkdirSync)(stylesDir, { recursive: true });
+  (0, import_fs5.mkdirSync)(componentsDir, { recursive: true });
+  (0, import_fs5.mkdirSync)(utilsDir, { recursive: true });
+  const stylesInfra = [];
+  const utilsInfra = [];
+  const componentInfra = [];
+  for (const dep of infraDeps) {
+    const file = infra[dep];
+    if (!file) continue;
+    if (file.name.endsWith(".css")) {
+      stylesInfra.push(file);
+    } else if (dep === "utils") {
+      utilsInfra.push(file);
+    } else {
+      componentInfra.push(file);
+    }
+  }
+  copyFiles(stylesInfra, stylesDir, { overwrite: options.overwrite });
+  copyFiles(utilsInfra, utilsDir, { overwrite: options.overwrite });
+  copyFiles(componentInfra, componentsDir, { overwrite: options.overwrite });
+  s.stop("Infrastructure ready");
+  const npmDepsNeeded = [];
+  let hasErrors = false;
+  for (const name of components) {
+    const comp = registry[name];
+    const rewritten = rewriteFiles(comp.files, config);
+    const results = copyFiles(rewritten, componentsDir, { overwrite: options.overwrite });
+    for (const r of results) {
+      const rel = (0, import_path5.relative)(cwd, r.path);
+      if (r.error) {
+        import_prompts3.log.error(`Failed to write ${rel}: ${r.error}`);
+        hasErrors = true;
+      } else if (r.skipped) {
+        import_prompts3.log.warn(`Skipped (already exists): ${rel}`);
+      } else {
+        import_prompts3.log.success(`Added: ${rel}`);
+      }
+    }
+    comp.npmDeps.forEach((d) => npmDepsNeeded.push(d));
+  }
+  if (npmDepsNeeded.length > 0) {
+    import_prompts3.log.info(`Install peer dependencies:
+  npm install ${[...new Set(npmDepsNeeded)].join(" ")}`);
+  }
+  if (hasErrors) {
+    (0, import_prompts3.outro)("Done with errors. Some files may not have been written.");
+    process.exit(1);
+  } else {
+    (0, import_prompts3.outro)(`Done! ${components.length} component(s) added.`);
+  }
+});
+
+// src/cli.ts
+import_commander4.program.name("bakethere").description("Add BakeThere components to your project").version("0.1.0");
+import_commander4.program.addCommand(listCommand);
+import_commander4.program.addCommand(initCommand);
+import_commander4.program.addCommand(addCommand);
+import_commander4.program.parse();