{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "aui",
  "homepage": "https://ui.arpitbhayani.me",
  "items": [
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "aui",
      "type": "registry:style",
      "title": "Array UI Theme",
      "description": "The arpitbhayani.me look: paper light & obsidian carbon themes, Assistant & Lora typography, signature crimson accent (#e5000f), and systems engineering aesthetics.",
      "dependencies": [
        "clsx",
        "tailwind-merge",
        "class-variance-authority"
      ],
      "registryDependencies": [],
      "css": {
        "@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500;600;700;800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Lora:ital,wght@0,400..700;1,400..700&display=swap')": {},
        "@layer base": {
          "*": {
            "border-color": "var(--border)"
          },
          "body": {
            "background-color": "var(--background)",
            "color": "var(--foreground)",
            "font-family": "var(--font-sans)",
            "-webkit-font-smoothing": "antialiased"
          },
          "h1, h2, h3, h4, h5, h6": {
            "font-family": "var(--font-heading)",
            "letter-spacing": "-0.015em"
          },
          "code, kbd, samp, pre": {
            "font-family": "var(--font-mono)"
          }
        }
      },
      "cssVars": {
        "theme": {
          "font-sans": "'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "font-heading": "'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
          "font-serif": "'Lora', Georgia, Cambria, serif",
          "font-mono": "'IBM Plex Mono', 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace",
          "radius-sm": "calc(var(--radius) - 4px)",
          "radius-md": "calc(var(--radius) - 2px)",
          "radius-lg": "var(--radius)",
          "radius-xl": "calc(var(--radius) + 4px)",
          "color-background": "var(--background)",
          "color-foreground": "var(--foreground)",
          "color-card": "var(--card)",
          "color-card-foreground": "var(--card-foreground)",
          "color-popover": "var(--popover)",
          "color-popover-foreground": "var(--popover-foreground)",
          "color-primary": "var(--primary)",
          "color-primary-foreground": "var(--primary-foreground)",
          "color-secondary": "var(--secondary)",
          "color-secondary-foreground": "var(--secondary-foreground)",
          "color-muted": "var(--muted)",
          "color-muted-foreground": "var(--muted-foreground)",
          "color-accent": "var(--accent)",
          "color-accent-foreground": "var(--accent-foreground)",
          "color-destructive": "var(--destructive)",
          "color-border": "var(--border)",
          "color-input": "var(--input)",
          "color-ring": "var(--ring)"
        },
        "light": {
          "radius": "0.5rem",
          "background": "43 25% 97%",
          "foreground": "247 7% 19%",
          "card": "0 0% 100%",
          "card-foreground": "247 7% 19%",
          "popover": "0 0% 100%",
          "popover-foreground": "247 7% 19%",
          "primary": "356 100% 45%",
          "primary-foreground": "0 0% 100%",
          "secondary": "41 24% 93%",
          "secondary-foreground": "250 14% 8%",
          "muted": "41 24% 93%",
          "muted-foreground": "253 4% 44%",
          "accent": "41 24% 93%",
          "accent-foreground": "250 14% 8%",
          "destructive": "0 84% 60%",
          "border": "41 24% 86%",
          "input": "41 24% 86%",
          "ring": "356 100% 45%"
        },
        "dark": {
          "background": "240 6% 7%",
          "foreground": "240 5% 85%",
          "card": "240 5% 10%",
          "card-foreground": "240 5% 85%",
          "popover": "240 5% 10%",
          "popover-foreground": "240 5% 85%",
          "primary": "355 100% 60%",
          "primary-foreground": "0 0% 100%",
          "secondary": "240 5% 14%",
          "secondary-foreground": "240 5% 98%",
          "muted": "240 5% 14%",
          "muted-foreground": "240 4% 57%",
          "accent": "240 5% 14%",
          "accent-foreground": "240 5% 98%",
          "destructive": "0 84% 60%",
          "border": "240 5% 16%",
          "input": "240 5% 16%",
          "ring": "355 100% 60%"
        }
      }
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "button",
      "type": "registry:ui",
      "title": "Button",
      "description": "Signature tactile action button with crimson primary, secondary, outline, ghost, and danger variants.",
      "dependencies": [
        "@radix-ui/react-slot",
        "class-variance-authority"
      ],
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/button.tsx",
          "content": "import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer select-none\",\n  {\n    variants: {\n      variant: {\n        primary:\n          \"bg-primary text-primary-foreground shadow-xs hover:opacity-95 active:scale-[0.99]\",\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:opacity-95 active:scale-[0.99]\",\n        secondary:\n          \"bg-secondary text-secondary-foreground border border-border shadow-2xs hover:bg-muted active:scale-[0.99]\",\n        outline:\n          \"border border-border bg-transparent shadow-2xs hover:bg-secondary hover:text-secondary-foreground active:scale-[0.99]\",\n        ghost:\n          \"hover:bg-secondary hover:text-secondary-foreground\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-xs hover:opacity-95 active:scale-[0.99]\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n        amber:\n          \"bg-amber-500 text-stone-950 font-semibold border border-amber-600/30 shadow-xs hover:bg-amber-600 hover:text-stone-950 active:scale-[0.99]\",\n        yellow:\n          \"bg-amber-500 text-stone-950 font-semibold border border-amber-600/30 shadow-xs hover:bg-amber-600 hover:text-stone-950 active:scale-[0.99]\",\n        warning:\n          \"bg-amber-500 text-stone-950 font-semibold border border-amber-600/30 shadow-xs hover:bg-amber-600 hover:text-stone-950 active:scale-[0.99]\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-6 text-base\",\n        icon: \"h-9 w-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"primary\",\n      size: \"default\",\n    },\n  }\n);\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  icon?: React.ReactNode;\n  iconPosition?: \"left\" | \"right\";\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  loading?: boolean;\n  isLoading?: boolean;\n  loadingText?: React.ReactNode;\n  spinner?: React.ReactNode;\n}\n\nconst DefaultSpinner = ({ className }: { className?: string }) => (\n  <svg\n    className={cn(\"animate-spin\", className)}\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    viewBox=\"0 0 24 24\"\n    width=\"16\"\n    height=\"16\"\n    aria-hidden=\"true\"\n  >\n    <circle\n      className=\"opacity-25\"\n      cx=\"12\"\n      cy=\"12\"\n      r=\"10\"\n      stroke=\"currentColor\"\n      strokeWidth=\"4\"\n    />\n    <path\n      className=\"opacity-75\"\n      fill=\"currentColor\"\n      d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n    />\n  </svg>\n);\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      asChild = false,\n      icon,\n      iconPosition = \"left\",\n      leftIcon,\n      rightIcon,\n      loading = false,\n      isLoading = false,\n      loadingText,\n      spinner,\n      children,\n      disabled,\n      ...props\n    },\n    ref\n  ) => {\n    if (asChild) {\n      return (\n        <Slot\n          className={cn(buttonVariants({ variant, size, className }))}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </Slot>\n      );\n    }\n\n    const loadingActive = Boolean(loading || isLoading);\n    const isDisabled = Boolean(disabled || loadingActive);\n    const spinnerElement = spinner || <DefaultSpinner className=\"size-4\" />;\n\n    const effectiveLeftIcon = loadingActive\n      ? (iconPosition === \"right\" && !leftIcon ? undefined : spinnerElement)\n      : leftIcon || (iconPosition === \"left\" ? icon : undefined);\n\n    const effectiveRightIcon = loadingActive\n      ? (iconPosition === \"right\" && !leftIcon ? spinnerElement : undefined)\n      : rightIcon || (iconPosition === \"right\" ? icon : undefined);\n\n    const effectiveChildren = loadingActive && loadingText ? loadingText : children;\n    const isIconOnly =\n      (effectiveChildren === undefined ||\n        effectiveChildren === null ||\n        effectiveChildren === \"\") &&\n      Boolean(effectiveLeftIcon || effectiveRightIcon);\n\n    return (\n      <button\n        className={cn(\n          buttonVariants({ variant, size, className }),\n          loadingActive && \"cursor-wait\"\n        )}\n        ref={ref}\n        disabled={isDisabled}\n        aria-busy={loadingActive ? \"true\" : undefined}\n        {...props}\n      >\n        {isIconOnly ? (\n          effectiveLeftIcon || effectiveRightIcon\n        ) : (\n          <>\n            {effectiveLeftIcon}\n            {effectiveChildren}\n            {effectiveRightIcon}\n          </>\n        )}\n      </button>\n    );\n  }\n);\nButton.displayName = \"Button\";\n\nexport { Button, buttonVariants };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "badge",
      "type": "registry:ui",
      "title": "Badge",
      "description": "Status pills and tag badges (crimson, emerald green, amber, rose red, sky blue, outline).",
      "dependencies": [
        "class-variance-authority"
      ],
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/badge.tsx",
          "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst badgeVariants = cva(\n  \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium font-mono transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2\",\n  {\n    variants: {\n      variant: {\n        primary:\n          \"border-transparent bg-primary text-primary-foreground shadow-xs\",\n        default:\n          \"border-transparent bg-primary text-primary-foreground shadow-xs\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground hover:bg-muted\",\n        outline: \"text-foreground border-border\",\n        green:\n          \"border-emerald-500/25 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400\",\n        amber:\n          \"border-amber-500/25 bg-amber-500/10 text-amber-600 dark:text-amber-400\",\n        red:\n          \"border-rose-500/25 bg-rose-500/10 text-rose-600 dark:text-rose-400\",\n        destructive:\n          \"border-rose-500/25 bg-rose-500/10 text-rose-600 dark:text-rose-400\",\n        blue:\n          \"border-sky-500/25 bg-sky-500/10 text-sky-600 dark:text-sky-400\",\n        violet:\n          \"border-purple-500/25 bg-purple-500/10 text-purple-600 dark:text-purple-400\",\n        cyan:\n          \"border-cyan-500/25 bg-cyan-500/10 text-cyan-600 dark:text-cyan-400\",\n        pink:\n          \"border-pink-500/25 bg-pink-500/10 text-pink-600 dark:text-pink-400\",\n        dark:\n          \"border-transparent bg-foreground text-background\",\n        light:\n          \"border-transparent bg-secondary text-secondary-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLElement>,\n    VariantProps<typeof badgeVariants> {\n  href?: string;\n  interactive?: boolean;\n  target?: string;\n  rel?: string;\n}\n\nconst Badge = React.forwardRef<HTMLElement, BadgeProps>(\n  ({ className, variant, href, interactive = false, target, rel, children, ...props }, ref) => {\n    const isInteractive = interactive || Boolean(href);\n    const classes = cn(\n      badgeVariants({ variant }),\n      isInteractive && \"cursor-pointer hover:opacity-80 transition-opacity\",\n      className\n    );\n\n    if (href) {\n      return (\n        <a\n          ref={ref as unknown as React.Ref<HTMLAnchorElement>}\n          href={href}\n          target={target}\n          rel={target === \"_blank\" && !rel ? \"noopener noreferrer\" : rel}\n          className={classes}\n          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          {children}\n        </a>\n      );\n    }\n\n    return (\n      <span\n        ref={ref as unknown as React.Ref<HTMLSpanElement>}\n        className={classes}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  }\n);\nBadge.displayName = \"Badge\";\n\nexport { Badge, badgeVariants };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "card",
      "type": "registry:ui",
      "title": "Card",
      "description": "Flat card surface with 1px hairline border, header, title, description, content, and footer.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/card.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n  hoverable?: boolean;\n  interactive?: boolean;\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, hoverable = false, interactive = false, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"rounded-lg border border-border bg-card text-card-foreground shadow-xs transition-all\",\n        hoverable && \"hover:border-foreground/25 hover:bg-muted/20\",\n        interactive && \"cursor-pointer hover:border-primary/50 hover:bg-muted/30 hover:shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n);\nCard.displayName = \"Card\";\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n));\nCardHeader.displayName = \"CardHeader\";\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"font-heading text-lg font-bold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n));\nCardTitle.displayName = \"CardTitle\";\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n));\nCardDescription.displayName = \"CardDescription\";\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n));\nCardContent.displayName = \"CardContent\";\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0 border-t border-border/60 mt-4\", className)}\n    {...props}\n  />\n));\nCardFooter.displayName = \"CardFooter\";\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "input",
      "type": "registry:ui",
      "title": "Input",
      "description": "Machined text input with subtle focus ring and optional keyboard shortcut badge.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/input.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  shortcut?: string;\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, shortcut, ...props }, ref) => {\n    if (shortcut) {\n      return (\n        <div className=\"relative flex items-center w-full\">\n          <input\n            type={type}\n            className={cn(\n              \"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 pr-12 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n              className\n            )}\n            ref={ref}\n            {...props}\n          />\n          <kbd className=\"absolute right-2 pointer-events-none inline-flex items-center font-mono text-[0.7rem] font-medium px-1.5 py-0.5 rounded border border-border bg-muted text-muted-foreground\">\n            {shortcut}\n          </kbd>\n        </div>\n      );\n    }\n\n    return (\n      <input\n        type={type}\n        className={cn(\n          \"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      />\n    );\n  }\n);\nInput.displayName = \"Input\";\n\nexport { Input };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "select",
      "type": "registry:ui",
      "title": "Select",
      "description": "Minimal machined select input with native option support.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/select.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SelectOption<T = string> {\n  value: T;\n  label: string;\n  description?: string;\n  badge?: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface SelectProps<T = string> {\n  options?: SelectOption<T>[];\n  value?: T;\n  defaultValue?: T;\n  onChange?: (value: T) => void;\n  placeholder?: string;\n  label?: string;\n  error?: string;\n  helperText?: string;\n  disabled?: boolean;\n  name?: string;\n  className?: string;\n  id?: string;\n  children?: React.ReactNode;\n}\n\nexport function Select<T = string>({\n  options,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  placeholder = \"Select an option...\",\n  label,\n  error,\n  helperText,\n  disabled = false,\n  name,\n  className,\n  id,\n  children,\n}: SelectProps<T>) {\n  const generatedId = React.useId();\n  const selectId = id || (label ? `aui-select-${generatedId}` : undefined);\n\n  // Native fallback if children passed\n  if (!options && children) {\n    const nativeSelect = (\n      <select\n        id={selectId}\n        name={name}\n        defaultValue={defaultValue as any}\n        value={controlledValue as any}\n        onChange={(e) => onChange?.(e.target.value as any)}\n        disabled={disabled}\n        className={cn(\n          \"flex h-9 w-full appearance-none rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-primary disabled:cursor-not-allowed disabled:opacity-50\",\n          error && \"border-destructive\",\n          className\n        )}\n      >\n        {children}\n      </select>\n    );\n\n    if (!label && !error && !helperText) return nativeSelect;\n\n    return (\n      <div className=\"flex flex-col gap-1.5 w-full\">\n        {label && (\n          <label htmlFor={selectId} className=\"text-xs font-semibold text-foreground\">\n            {label}\n          </label>\n        )}\n        {nativeSelect}\n        {helperText && !error && <p className=\"text-xs text-muted-foreground\">{helperText}</p>}\n        {error && <p className=\"text-xs text-destructive\">{error}</p>}\n      </div>\n    );\n  }\n\n  // Custom Dropdown Single Select\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = React.useState<T | undefined>(defaultValue);\n  const selectedValue = isControlled ? controlledValue : uncontrolledValue;\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [highlightedIndex, setHighlightedIndex] = React.useState(0);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const safeOptions = React.useMemo(() => options || [], [options]);\n\n  const selectedOption = React.useMemo(\n    () => safeOptions.find((opt) => opt.value === selectedValue),\n    [safeOptions, selectedValue]\n  );\n\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleClickOutside = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [isOpen]);\n\n  const handleSelect = (option: SelectOption<T>) => {\n    if (option.disabled) return;\n    if (!isControlled) {\n      setUncontrolledValue(option.value);\n    }\n    onChange?.(option.value);\n    setIsOpen(false);\n  };\n\n  const selectTrigger = (\n    <div ref={containerRef} className={cn(\"relative w-full\", className)}>\n      {name && (\n        <input\n          type=\"hidden\"\n          name={name}\n          value={selectedValue !== undefined ? String(selectedValue) : \"\"}\n        />\n      )}\n      <button\n        type=\"button\"\n        id={selectId}\n        className={cn(\n          \"flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs transition-colors hover:border-accent focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-primary\",\n          isOpen && \"ring-1 ring-primary border-primary\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          error && \"border-destructive\"\n        )}\n        onClick={() => !disabled && setIsOpen((prev) => !prev)}\n        disabled={disabled}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n      >\n        <span className=\"truncate\">\n          {selectedOption ? selectedOption.label : <span className=\"text-muted-foreground\">{placeholder}</span>}\n        </span>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          className={cn(\"text-muted-foreground transition-transform duration-150\", isOpen && \"rotate-180\")}\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-[calc(100%+4px)] left-0 right-0 z-50 rounded-md border border-border bg-popover shadow-md overflow-hidden p-1\">\n          <ul className=\"max-h-60 overflow-y-auto list-none m-0 p-0\" role=\"listbox\">\n            {safeOptions.length === 0 ? (\n              <li className=\"p-2 text-center text-xs text-muted-foreground\">No options available</li>\n            ) : (\n              safeOptions.map((opt, idx) => {\n                const isSelected = opt.value === selectedValue;\n                const isHighlighted = idx === highlightedIndex;\n\n                return (\n                  <li\n                    key={String(opt.value)}\n                    className={cn(\n                      \"flex items-center justify-between px-3 py-1.5 text-sm rounded-sm cursor-pointer transition-colors\",\n                      isHighlighted && \"bg-accent/50\",\n                      isSelected && \"font-semibold text-foreground bg-accent\",\n                      opt.disabled && \"cursor-not-allowed opacity-40\"\n                    )}\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    onClick={() => handleSelect(opt)}\n                    onMouseEnter={() => setHighlightedIndex(idx)}\n                  >\n                    <span className=\"truncate\">{opt.label}</span>\n                    {isSelected && (\n                      <svg\n                        xmlns=\"http://www.w3.org/2000/svg\"\n                        width=\"14\"\n                        height=\"14\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"2\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        className=\"text-primary ml-2 shrink-0\"\n                      >\n                        <polyline points=\"20 6 9 17 4 12\" />\n                      </svg>\n                    )}\n                  </li>\n                );\n              })\n            )}\n          </ul>\n        </div>\n      )}\n    </div>\n  );\n\n  if (!label && !error && !helperText) return selectTrigger;\n\n  return (\n    <div className=\"flex flex-col gap-1.5 w-full\">\n      {label && (\n        <label htmlFor={selectId} className=\"text-xs font-semibold text-foreground\">\n          {label}\n        </label>\n      )}\n      {selectTrigger}\n      {helperText && !error && <p className=\"text-xs text-muted-foreground\">{helperText}</p>}\n      {error && <p className=\"text-xs text-destructive\">{error}</p>}\n    </div>\n  );\n}\n\nSelect.displayName = \"Select\";\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "textarea",
      "type": "registry:ui",
      "title": "Textarea",
      "description": "Machined multi-line text field with hairline border.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/textarea.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface TextareaProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: string;\n  error?: string;\n  helperText?: string;\n}\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ label, error, helperText, className, id, ...props }, ref) => {\n    const inputId = id || (label ? label.toLowerCase().replace(/\\s+/g, \"-\") : undefined);\n\n    const textareaElement = (\n      <textarea\n        ref={ref}\n        id={inputId}\n        className={cn(\n          \"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n          error && \"border-destructive\",\n          className\n        )}\n        aria-invalid={Boolean(error)}\n        {...props}\n      />\n    );\n\n    if (!label && !error && !helperText) {\n      return textareaElement;\n    }\n\n    return (\n      <div className=\"flex flex-col gap-1.5 w-full\">\n        {label && (\n          <label htmlFor={inputId} className=\"text-xs font-medium text-foreground\">\n            {label}\n          </label>\n        )}\n        {textareaElement}\n        {error && (\n          <p className=\"text-xs text-destructive mt-0.5\">{error}</p>\n        )}\n        {helperText && !error && (\n          <p className=\"text-xs text-muted-foreground mt-0.5\">{helperText}</p>\n        )}\n      </div>\n    );\n  }\n);\nTextarea.displayName = \"Textarea\";\n\nexport { Textarea };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "switch",
      "type": "registry:ui",
      "title": "Switch",
      "description": "Machined toggle switch with smooth state animation.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/switch.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SwitchProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: React.ReactNode;\n}\n\nconst Switch = React.forwardRef<HTMLInputElement, SwitchProps>(\n  ({ label, className, checked, defaultChecked, disabled, ...props }, ref) => {\n    return (\n      <label\n        className={cn(\n          \"inline-flex items-center gap-2.5 cursor-pointer text-sm select-none\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className\n        )}\n      >\n        <span className=\"relative inline-flex items-center\">\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            role=\"switch\"\n            disabled={disabled}\n            checked={checked}\n            defaultChecked={defaultChecked}\n            className=\"peer sr-only\"\n            {...props}\n          />\n          <span className=\"w-9 h-5 bg-muted peer-checked:bg-primary border border-border rounded-full transition-colors duration-200\" />\n          <span className=\"absolute left-0.5 top-0.5 w-4 h-4 bg-white rounded-full shadow-xs transition-transform duration-200 peer-checked:translate-x-4\" />\n        </span>\n        {label && <span className=\"text-foreground\">{label}</span>}\n      </label>\n    );\n  }\n);\nSwitch.displayName = \"Switch\";\n\nexport { Switch };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "checkbox",
      "type": "registry:ui",
      "title": "Checkbox",
      "description": "Machined checkbox input with custom accent color.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/checkbox.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: React.ReactNode;\n}\n\nconst Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ label, className, disabled, ...props }, ref) => {\n    return (\n      <label\n        className={cn(\n          \"inline-flex items-center gap-2 cursor-pointer text-sm select-none\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          className\n        )}\n      >\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          disabled={disabled}\n          className=\"h-4 w-4 rounded-xs border border-border text-primary accent-primary focus:ring-1 focus:ring-primary focus:ring-offset-0 transition-colors\"\n          {...props}\n        />\n        {label && <span className=\"text-foreground\">{label}</span>}\n      </label>\n    );\n  }\n);\nCheckbox.displayName = \"Checkbox\";\n\nexport { Checkbox };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "table",
      "type": "registry:ui",
      "title": "Table",
      "description": "Dense monospace table with hover rows and structured subcomponents.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/table.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst Table = React.forwardRef<\n  HTMLTableElement,\n  React.HTMLAttributes<HTMLTableElement>\n>(({ className, ...props }, ref) => (\n  <div className=\"relative w-full overflow-auto rounded-lg border border-border bg-card shadow-xs my-4\">\n    <table\n      ref={ref}\n      className={cn(\"w-full caption-bottom text-sm border-collapse text-left\", className)}\n      {...props}\n    />\n  </div>\n));\nTable.displayName = \"Table\";\n\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <thead ref={ref} className={cn(\"[&_tr]:border-b border-border bg-muted/40\", className)} {...props} />\n));\nTableHeader.displayName = \"TableHeader\";\n\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tbody\n    ref={ref}\n    className={cn(\"[&_tr:last-child]:border-0\", className)}\n    {...props}\n  />\n));\nTableBody.displayName = \"TableBody\";\n\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      \"border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n      className\n    )}\n    {...props}\n  />\n));\nTableFooter.displayName = \"TableFooter\";\n\nconst TableRow = React.forwardRef<\n  HTMLTableRowElement,\n  React.HTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n  <tr\n    ref={ref}\n    className={cn(\n      \"border-b border-border transition-colors hover:bg-muted/40 data-[state=selected]:bg-muted\",\n      className\n    )}\n    {...props}\n  />\n));\nTableRow.displayName = \"TableRow\";\n\nconst TableHead = React.forwardRef<\n  HTMLTableCellElement,\n  React.ThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <th\n    ref={ref}\n    className={cn(\n      \"h-10 px-4 text-left align-middle font-mono text-xs font-medium text-muted-foreground uppercase tracking-wider [&:has([role=checkbox])]:pr-0\",\n      className\n    )}\n    {...props}\n  />\n));\nTableHead.displayName = \"TableHead\";\n\nconst TableCell = React.forwardRef<\n  HTMLTableCellElement,\n  React.TdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n  <td\n    ref={ref}\n    className={cn(\"p-4 align-middle font-tabular text-sm text-foreground [&:has([role=checkbox])]:pr-0\", className)}\n    {...props}\n  />\n));\nTableCell.displayName = \"TableCell\";\n\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn(\"mt-4 text-xs text-muted-foreground\", className)}\n    {...props}\n  />\n));\nTableCaption.displayName = \"TableCaption\";\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n};\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "toast",
      "type": "registry:ui",
      "title": "Toast",
      "description": "Status-tinted notification toast with dismiss button.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/toast.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ToastVariant = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  description?: string;\n  variant?: ToastVariant;\n  onClose?: () => void;\n}\n\nconst glyph: Record<ToastVariant, string> = {\n  default: \"i\",\n  info: \"i\",\n  success: \"✓\",\n  warning: \"!\",\n  error: \"×\",\n};\n\nconst Toast = React.forwardRef<HTMLDivElement, ToastProps>(\n  (\n    {\n      title,\n      description,\n      variant = \"default\",\n      onClose,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"status\"\n        className={cn(\n          \"relative flex items-start gap-3 w-full max-w-sm p-4 rounded-lg border border-border bg-card text-card-foreground shadow-lg text-sm\",\n          variant === \"success\" && \"border-emerald-500/30 text-emerald-600 dark:text-emerald-400\",\n          variant === \"warning\" && \"border-amber-500/30 text-amber-600 dark:text-amber-400\",\n          variant === \"error\" && \"border-rose-500/30 text-rose-600 dark:text-rose-400\",\n          className\n        )}\n        {...props}\n      >\n        {!children && (\n          <span\n            className=\"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full bg-muted font-mono text-[11px] font-medium mt-[1px] shadow-[0_0_8px_currentColor]\"\n            aria-hidden=\"true\"\n          >\n            {glyph[variant]}\n          </span>\n        )}\n        <div className=\"flex-1 min-w-0\">\n          {title && <p className=\"font-heading font-semibold text-foreground text-sm leading-5\">{title}</p>}\n          {description && <p className=\"text-xs text-muted-foreground mt-0.5 leading-snug\">{description}</p>}\n          {children}\n        </div>\n        {onClose && (\n          <button\n            type=\"button\"\n            className=\"inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-xs text-muted-foreground hover:text-foreground\"\n            onClick={onClose}\n            aria-label=\"Dismiss\"\n          >\n            ✕\n          </button>\n        )}\n      </div>\n    );\n  }\n);\nToast.displayName = \"Toast\";\n\nexport { Toast };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "spinner",
      "type": "registry:ui",
      "title": "Spinner",
      "description": "Minimal rotating loader indicator with size variants.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/spinner.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: \"sm\" | \"md\" | \"lg\";\n}\n\nconst Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(\n  ({ size = \"md\", className, ...props }, ref) => {\n    const sizeClasses = {\n      sm: \"h-3.5 w-3.5 border-2\",\n      md: \"h-5 w-5 border-2\",\n      lg: \"h-7 w-7 border-3\",\n    };\n\n    return (\n      <span\n        ref={ref}\n        role=\"status\"\n        aria-label=\"Loading\"\n        className={cn(\n          \"inline-block rounded-full border-border border-t-primary animate-spin\",\n          sizeClasses[size],\n          className\n        )}\n        {...props}\n      />\n    );\n  }\n);\nSpinner.displayName = \"Spinner\";\n\nexport { Spinner };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "skeleton",
      "type": "registry:ui",
      "title": "Skeleton",
      "description": "Animated placeholder loader for text, cards, and avatars.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/skeleton.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {\n  width?: string | number;\n  height?: string | number;\n  circle?: boolean;\n}\n\nconst Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ width, height, circle = false, className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"animate-pulse rounded-md bg-muted/60\",\n          !width && !height && \"h-4 w-full\",\n          circle && \"rounded-full\",\n          className\n        )}\n        style={{\n          width,\n          height,\n          ...style,\n        }}\n        aria-hidden=\"true\"\n        {...props}\n      />\n    );\n  }\n);\nSkeleton.displayName = \"Skeleton\";\n\nexport { Skeleton };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "searchbox",
      "type": "registry:ui",
      "title": "SearchBox",
      "description": "Machined search input with search icon and keyboard shortcut keycap.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/searchbox.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SearchBoxProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  shortcut?: string;\n  onClear?: () => void;\n}\n\nconst SearchBox = React.forwardRef<HTMLInputElement, SearchBoxProps>(\n  ({ shortcut = \"⌘K\", onClear, value, onChange, className, ...props }, ref) => {\n    return (\n      <div className={cn(\"relative flex items-center w-full\", className)}>\n        <svg\n          className=\"absolute left-3 h-4 w-4 text-muted-foreground pointer-events-none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n        </svg>\n\n        <input\n          ref={ref}\n          type=\"text\"\n          value={value}\n          onChange={onChange}\n          className=\"flex h-9 w-full rounded-md border border-input bg-background pl-9 pr-12 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring\"\n          {...props}\n        />\n\n        {shortcut && (\n          <kbd className=\"absolute right-2 pointer-events-none inline-flex items-center font-mono text-[0.7rem] font-medium px-1.5 py-0.5 rounded border border-border bg-muted text-muted-foreground\">\n            {shortcut}\n          </kbd>\n        )}\n      </div>\n    );\n  }\n);\nSearchBox.displayName = \"SearchBox\";\n\nexport { SearchBox };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "kbd",
      "type": "registry:ui",
      "title": "Kbd",
      "description": "Monospace keyboard shortcut keycap badge.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/kbd.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface KbdProps extends React.HTMLAttributes<HTMLElement> {\n  keys?: string[];\n}\n\nexport function Kbd({ keys, children, className, ...props }: KbdProps) {\n  return (\n    <kbd\n      className={cn(\n        \"inline-flex items-center justify-center font-mono text-[0.72rem] font-medium px-1.5 py-0.5 rounded border border-border bg-muted/60 text-muted-foreground shadow-2xs select-none gap-0.5\",\n        className\n      )}\n      {...props}\n    >\n      {keys ? keys.join(\" \") : children}\n    </kbd>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "tooltip",
      "type": "registry:ui",
      "title": "Tooltip",
      "description": "Accessible tooltip hint on hover and focus.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/tooltip.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface TooltipProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"content\"> {\n  content?: React.ReactNode;\n  placement?: \"top\" | \"bottom\";\n  children: React.ReactNode;\n}\n\nexport const Tooltip = React.forwardRef<HTMLSpanElement, TooltipProps>(\n  ({ content, placement = \"top\", children, className, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        className={cn(\n          \"relative inline-flex group cursor-help\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {content && (\n          <span\n            role=\"tooltip\"\n            className={cn(\n              \"pointer-events-none absolute z-50 whitespace-nowrap rounded border border-border bg-[#18181c] text-[#ececf1] px-2 py-0.5 text-xs font-mono opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 shadow-md left-1/2 -translate-x-1/2\",\n              placement === \"bottom\" ? \"top-full mt-1.5\" : \"bottom-full mb-1.5\"\n            )}\n          >\n            {content}\n          </span>\n        )}\n      </span>\n    );\n  }\n);\nTooltip.displayName = \"Tooltip\";\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "alert",
      "type": "registry:ui",
      "title": "Alert",
      "description": "Status-tinted inline alert callout (info, success, warning, destructive).",
      "dependencies": [
        "class-variance-authority"
      ],
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/alert.tsx",
          "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border p-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-background text-foreground border-border\",\n        info: \"bg-sky-500/10 text-sky-900 dark:text-sky-200 border-sky-500/25\",\n        success: \"bg-emerald-500/10 text-emerald-900 dark:text-emerald-200 border-emerald-500/25\",\n        warning: \"bg-amber-500/10 text-amber-900 dark:text-amber-200 border-amber-500/25\",\n        destructive: \"bg-rose-500/10 text-rose-900 dark:text-rose-200 border-rose-500/25\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nconst Alert = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>\n>(({ className, variant, ...props }, ref) => (\n  <div\n    ref={ref}\n    role=\"alert\"\n    className={cn(alertVariants({ variant }), className)}\n    {...props}\n  />\n));\nAlert.displayName = \"Alert\";\n\nconst AlertTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h5\n    ref={ref}\n    className={cn(\"mb-1 font-heading font-bold leading-none tracking-tight\", className)}\n    {...props}\n  />\n));\nAlertTitle.displayName = \"AlertTitle\";\n\nconst AlertDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-xs md:text-sm [&_p]:leading-relaxed opacity-90\", className)}\n    {...props}\n  />\n));\nAlertDescription.displayName = \"AlertDescription\";\n\nexport { Alert, AlertTitle, AlertDescription };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "tabs",
      "type": "registry:ui",
      "title": "Tabs",
      "description": "Underline tab navigation with keyboard accessibility.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/tabs.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TabsContextValue {\n  value: string;\n  onValueChange: (val: string) => void;\n}\n\nconst TabsContext = React.createContext<TabsContextValue | undefined>(undefined);\n\nexport interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (val: string) => void;\n}\n\nexport function Tabs({\n  defaultValue,\n  value: controlledValue,\n  onValueChange,\n  children,\n  className,\n  ...props\n}: TabsProps) {\n  const [val, setVal] = React.useState(defaultValue || \"\");\n  const activeValue = controlledValue !== undefined ? controlledValue : val;\n\n  const handleValueChange = (newVal: string) => {\n    if (controlledValue === undefined) {\n      setVal(newVal);\n    }\n    onValueChange?.(newVal);\n  };\n\n  return (\n    <TabsContext.Provider value={{ value: activeValue, onValueChange: handleValueChange }}>\n      <div className={cn(\"w-full\", className)} {...props}>\n        {children}\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport function TabsList({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"inline-flex h-9 items-center justify-start border-b border-border text-muted-foreground gap-4 w-full\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  value: string;\n}\n\nexport function TabsTrigger({ value, className, children, ...props }: TabsTriggerProps) {\n  const ctx = React.useContext(TabsContext);\n  const isActive = ctx?.value === value;\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={isActive}\n      onClick={() => ctx?.onValueChange(value)}\n      className={cn(\n        \"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all relative py-2 cursor-pointer border-b-2 -mb-px\",\n        isActive\n          ? \"border-primary text-foreground font-semibold\"\n          : \"border-transparent text-muted-foreground hover:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string;\n}\n\nexport function TabsContent({ value, className, children, ...props }: TabsContentProps) {\n  const ctx = React.useContext(TabsContext);\n  if (ctx?.value !== value) return null;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      className={cn(\"mt-3 focus-visible:outline-hidden\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "accordion",
      "type": "registry:ui",
      "title": "Accordion",
      "description": "Collapsible hairline accordion sections for FAQs and structured content.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/accordion.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface AccordionContextValue {\n  openItems: string[];\n  toggleItem: (id: string) => void;\n}\n\nconst AccordionContext = React.createContext<AccordionContextValue | undefined>(undefined);\n\nexport interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {\n  type?: \"single\" | \"multiple\";\n  defaultValue?: string | string[];\n}\n\nexport function Accordion({\n  type = \"single\",\n  defaultValue,\n  children,\n  className,\n  ...props\n}: AccordionProps) {\n  const [openItems, setOpenItems] = React.useState<string[]>(() => {\n    if (!defaultValue) return [];\n    return Array.isArray(defaultValue) ? defaultValue : [defaultValue];\n  });\n\n  const toggleItem = (id: string) => {\n    setOpenItems((prev) => {\n      const isOpen = prev.includes(id);\n      if (type === \"single\") {\n        return isOpen ? [] : [id];\n      }\n      return isOpen ? prev.filter((i) => i !== id) : [...prev, id];\n    });\n  };\n\n  return (\n    <AccordionContext.Provider value={{ openItems, toggleItem }}>\n      <div className={cn(\"divide-y divide-border border-y border-border\", className)} {...props}>\n        {children}\n      </div>\n    </AccordionContext.Provider>\n  );\n}\n\nexport interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string;\n}\n\nexport function AccordionItem({ value, className, children, ...props }: AccordionItemProps) {\n  return (\n    <div className={cn(className)} data-value={value} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  value: string;\n}\n\nexport function AccordionTrigger({ value, className, children, ...props }: AccordionTriggerProps) {\n  const ctx = React.useContext(AccordionContext);\n  const isOpen = ctx?.openItems.includes(value);\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => ctx?.toggleItem(value)}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-2.5 text-sm font-semibold text-foreground transition-all hover:text-primary cursor-pointer w-full text-left\",\n        className\n      )}\n      {...props}\n    >\n      <span>{children}</span>\n      <svg\n        width=\"12\"\n        height=\"12\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={cn(\"shrink-0 text-muted-foreground transition-transform duration-200\", isOpen && \"rotate-180 text-foreground\")}\n        aria-hidden=\"true\"\n      >\n        <path d=\"m6 9 6 6 6-6\" />\n      </svg>\n    </button>\n  );\n}\n\nexport interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: string;\n}\n\nexport function AccordionContent({ value, className, children, ...props }: AccordionContentProps) {\n  const ctx = React.useContext(AccordionContext);\n  const isOpen = ctx?.openItems.includes(value);\n\n  if (!isOpen) return null;\n\n  return (\n    <div className={cn(\"pb-2.5 pt-0.5 text-sm text-muted-foreground leading-relaxed\", className)} {...props}>\n      {children}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "dropdown",
      "type": "registry:ui",
      "title": "Dropdown",
      "description": "Minimal click-trigger dropdown menu with click outside dismissal and actions.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/dropdown.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n  trigger: React.ReactNode;\n  align?: \"left\" | \"right\";\n  children: React.ReactNode;\n  isOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport function Dropdown({\n  trigger,\n  align = \"right\",\n  children,\n  className,\n  isOpen: controlledOpen,\n  onOpenChange,\n  ...props\n}: DropdownProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  const toggle = () => {\n    const next = !open;\n    if (!isControlled) setUncontrolledOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const close = () => {\n    if (!isControlled) setUncontrolledOpen(false);\n    onOpenChange?.(false);\n  };\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleClickOutside = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        close();\n      }\n    };\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        close();\n      }\n    };\n    document.addEventListener(\"click\", handleClickOutside);\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      document.removeEventListener(\"click\", handleClickOutside);\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [open]);\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\"relative inline-flex\", className)}\n      {...props}\n    >\n      <div\n        className=\"inline-flex items-center gap-1 cursor-pointer\"\n        onClick={toggle}\n        aria-haspopup=\"menu\"\n        aria-expanded={open}\n      >\n        {trigger}\n      </div>\n      {open && (\n        <div\n          className={cn(\n            \"absolute top-[calc(100%+0.35rem)] min-w-[180px] bg-card border border-border rounded-md shadow-lg p-1.5 z-50 flex flex-col animate-in fade-in-0 zoom-in-95\",\n            align === \"left\" ? \"left-0\" : \"right-0\"\n          )}\n          role=\"menu\"\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport interface DropdownItemProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  destructive?: boolean;\n}\n\nexport function DropdownItem({\n  destructive,\n  className,\n  children,\n  ...props\n}: DropdownItemProps) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"flex items-center gap-2 w-full px-3 py-1.5 text-sm font-medium text-left rounded cursor-pointer transition-colors text-foreground hover:bg-muted focus:bg-muted outline-none\",\n        destructive && \"text-red-500 hover:text-red-500 hover:bg-red-500/10 focus:bg-red-500/10\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function DropdownDivider({ className }: { className?: string }) {\n  return <div className={cn(\"h-px bg-border my-1\", className)} />;\n}\n\nexport function DropdownChevron({ className, ...props }: React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg\n      width=\"12\"\n      height=\"12\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={cn(\"ml-1.5 h-3 w-3 shrink-0 text-muted-foreground transition-transform duration-150\", className)}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "gutter",
      "type": "registry:ui",
      "title": "Gutter",
      "description": "Component-driven whitespace blank spacing primitive between UI elements (e.g. navbar and content).",
      "dependencies": [
        "class-variance-authority"
      ],
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/gutter.tsx",
          "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\n\nconst gutterVariants = cva(\"shrink-0 select-none pointer-events-none\", {\n  variants: {\n    orientation: {\n      vertical: \"w-full block\",\n      horizontal: \"h-full inline-block\",\n    },\n    size: {\n      none: \"\",\n      \"2xs\": \"\",\n      xs: \"\",\n      sm: \"\",\n      md: \"\",\n      lg: \"\",\n      xl: \"\",\n      \"2xl\": \"\",\n      \"3xl\": \"\",\n      \"4xl\": \"\",\n    },\n  },\n  compoundVariants: [\n    { orientation: \"vertical\", size: \"none\", className: \"h-0\" },\n    { orientation: \"vertical\", size: \"2xs\", className: \"h-1\" },\n    { orientation: \"vertical\", size: \"xs\", className: \"h-2\" },\n    { orientation: \"vertical\", size: \"sm\", className: \"h-3\" },\n    { orientation: \"vertical\", size: \"md\", className: \"h-6\" },\n    { orientation: \"vertical\", size: \"lg\", className: \"h-9\" },\n    { orientation: \"vertical\", size: \"xl\", className: \"h-12\" },\n    { orientation: \"vertical\", size: \"2xl\", className: \"h-18\" },\n    { orientation: \"vertical\", size: \"3xl\", className: \"h-24\" },\n    { orientation: \"vertical\", size: \"4xl\", className: \"h-32\" },\n\n    { orientation: \"horizontal\", size: \"none\", className: \"w-0\" },\n    { orientation: \"horizontal\", size: \"2xs\", className: \"w-1\" },\n    { orientation: \"horizontal\", size: \"xs\", className: \"w-2\" },\n    { orientation: \"horizontal\", size: \"sm\", className: \"w-3\" },\n    { orientation: \"horizontal\", size: \"md\", className: \"w-6\" },\n    { orientation: \"horizontal\", size: \"lg\", className: \"w-9\" },\n    { orientation: \"horizontal\", size: \"xl\", className: \"w-12\" },\n    { orientation: \"horizontal\", size: \"2xl\", className: \"w-18\" },\n    { orientation: \"horizontal\", size: \"3xl\", className: \"w-24\" },\n    { orientation: \"horizontal\", size: \"4xl\", className: \"w-32\" },\n  ],\n  defaultVariants: {\n    orientation: \"vertical\",\n    size: \"md\",\n  },\n});\n\nexport type GutterNamedSize =\n  | \"none\"\n  | \"2xs\"\n  | \"xs\"\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\";\n\nexport type GutterSize = GutterNamedSize | number | string;\n\nexport interface GutterProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\">,\n    Omit<VariantProps<typeof gutterVariants>, \"size\"> {\n  /**\n   * Spacing size preset or custom number (px) / string dimension.\n   * @default \"md\"\n   */\n  size?: GutterSize;\n  /**\n   * Axis shorthand: \"y\" sets orientation=\"vertical\", \"x\" sets orientation=\"horizontal\".\n   */\n  axis?: \"x\" | \"y\";\n}\n\nconst NAMED_SIZES: readonly string[] = [\n  \"none\",\n  \"2xs\",\n  \"xs\",\n  \"sm\",\n  \"md\",\n  \"lg\",\n  \"xl\",\n  \"2xl\",\n  \"3xl\",\n  \"4xl\",\n];\n\nexport const Gutter = React.forwardRef<HTMLDivElement, GutterProps>(\n  (\n    {\n      className,\n      orientation = \"vertical\",\n      axis,\n      size = \"md\",\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const effectiveOrientation =\n      axis === \"x\" ? \"horizontal\" : axis === \"y\" ? \"vertical\" : orientation;\n    const isNamed =\n      typeof size === \"string\" && NAMED_SIZES.includes(size);\n\n    const customDim =\n      typeof size === \"number\"\n        ? `${size}px`\n        : !isNamed && size\n        ? String(size)\n        : undefined;\n\n    const dynamicStyle: React.CSSProperties = {\n      ...(customDim\n        ? effectiveOrientation === \"horizontal\"\n          ? { width: customDim }\n          : { height: customDim }\n        : {}),\n      ...style,\n    };\n\n    return (\n      <div\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn(\n          gutterVariants({\n            orientation: effectiveOrientation,\n            size: isNamed ? (size as GutterNamedSize) : undefined,\n          }),\n          className\n        )}\n        style={dynamicStyle}\n        {...props}\n      />\n    );\n  }\n);\n\nGutter.displayName = \"Gutter\";\n\nexport const Spacer = Gutter;\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "progress",
      "type": "registry:ui",
      "title": "Progress",
      "description": "Machined linear progress bar with percentage indicator and status color variants.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/progress.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  value?: number;\n  max?: number;\n  label?: string;\n  showValue?: boolean;\n  size?: \"sm\" | \"md\" | \"lg\";\n  variant?: \"primary\" | \"success\" | \"info\" | \"warning\";\n}\n\nconst SIZE_MAP = {\n  sm: \"h-1.5\",\n  md: \"h-2.5\",\n  lg: \"h-4\",\n};\n\nconst VARIANT_BAR = {\n  primary: \"bg-primary\",\n  success: \"bg-emerald-500\",\n  info: \"bg-sky-500\",\n  warning: \"bg-amber-500\",\n};\n\nexport const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  (\n    {\n      value = 0,\n      max = 100,\n      label,\n      showValue = false,\n      size = \"md\",\n      variant = \"primary\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const pct = Math.min(100, Math.max(0, (value / (max || 1)) * 100));\n\n    return (\n      <div ref={ref} className={cn(\"w-full space-y-1.5 my-2\", className)} {...props}>\n        {(label || showValue) && (\n          <div className=\"flex items-center justify-between text-xs font-mono text-muted-foreground\">\n            {label && <span>{label}</span>}\n            {showValue && <span className=\"tabular-nums font-semibold\">{Math.round(pct)}%</span>}\n          </div>\n        )}\n        <div\n          className={cn(\n            \"relative w-full overflow-hidden rounded-full bg-secondary border border-border/50\",\n            SIZE_MAP[size]\n          )}\n          role=\"progressbar\"\n          aria-valuenow={value}\n          aria-valuemin={0}\n          aria-valuemax={max}\n          aria-label={label}\n        >\n          <div\n            className={cn(\n              \"h-full transition-all duration-300 ease-out\",\n              VARIANT_BAR[variant]\n            )}\n            style={{ width: `${pct}%` }}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nProgress.displayName = \"Progress\";\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "split-pane",
      "type": "registry:ui",
      "title": "SplitPane",
      "description": "Responsive two-column split layout with sticky aside, ratio presets, and mobile stacking.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/split-pane.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SplitPaneProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Optional content for the aside column. If provided, `children` becomes the main content. */\n  aside?: React.ReactNode;\n  /** Whether the first/aside column sticks while scrolling on desktop screens. Default true. */\n  stickyFirst?: boolean;\n  /** Alias for stickyFirst. */\n  stickyAside?: boolean;\n  /** Breakpoint at which columns stack vertically. Default \"lg\". */\n  stackBreakpoint?: \"md\" | \"lg\" | \"xl\";\n  /** Width ratio or grid template layout. Defaults to \"5/7\" (minmax(320px, 5fr) minmax(0, 7fr)). */\n  ratio?: \"5/7\" | \"1/1\" | \"1/2\" | \"2/1\" | \"1/3\" | \"3/1\" | string;\n  /** Minimum width for the aside column on large screens. Default \"320px\". */\n  minAside?: string | number;\n  /** Gap between columns. Default \"lg\" (1.5rem / 24px). */\n  gap?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n}\n\nconst GAP_MAP = {\n  sm: \"gap-3\",\n  md: \"gap-4\",\n  lg: \"gap-6\",\n  xl: \"gap-8\",\n};\n\nexport interface SplitPaneAsideProps extends React.HTMLAttributes<HTMLElement> {\n  sticky?: boolean;\n}\n\nexport const SplitPaneAside = React.forwardRef<HTMLElement, SplitPaneAsideProps>(\n  ({ className, sticky, children, ...props }, ref) => {\n    return (\n      <aside\n        ref={ref}\n        className={cn(\n          \"flex flex-col gap-3 min-w-0 w-full\",\n          sticky && \"lg:sticky lg:top-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </aside>\n    );\n  }\n);\nSplitPaneAside.displayName = \"SplitPaneAside\";\n\nexport interface SplitPaneMainProps extends React.HTMLAttributes<HTMLElement> {\n  as?: React.ElementType;\n}\n\nexport const SplitPaneMain = React.forwardRef<HTMLElement, SplitPaneMainProps>(\n  ({ className, as: Component = \"article\", children, ...props }, ref) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(\"flex min-w-0 flex-col gap-4 w-full\", className)}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\nSplitPaneMain.displayName = \"SplitPaneMain\";\n\nexport function SplitPane({\n  aside,\n  stickyFirst = false,\n  stickyAside,\n  stackBreakpoint = \"lg\",\n  ratio = \"5/7\",\n  minAside = \"320px\",\n  gap = \"lg\",\n  className,\n  children,\n  ...props\n}: SplitPaneProps) {\n  const isSticky = stickyAside !== undefined ? stickyAside : stickyFirst;\n  const minW = typeof minAside === \"number\" ? `${minAside}px` : minAside;\n\n  const gridColsClass =\n    ratio === \"1/1\"\n      ? \"lg:grid-cols-2\"\n      : ratio === \"1/2\"\n      ? \"lg:grid-cols-[1fr_2fr]\"\n      : ratio === \"2/1\"\n      ? \"lg:grid-cols-[2fr_1fr]\"\n      : ratio === \"1/3\"\n      ? \"lg:grid-cols-[1fr_3fr]\"\n      : ratio === \"3/1\"\n      ? \"lg:grid-cols-[3fr_1fr]\"\n      : `lg:grid-cols-[minmax(${minW},5fr)_minmax(0,7fr)]`;\n\n  return (\n    <div\n      className={cn(\n        \"grid items-start w-full\",\n        gridColsClass,\n        GAP_MAP[gap],\n        className\n      )}\n      {...props}\n    >\n      {aside !== undefined ? (\n        <>\n          <SplitPaneAside sticky={isSticky}>{aside}</SplitPaneAside>\n          <SplitPaneMain>{children}</SplitPaneMain>\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n\nSplitPane.Aside = SplitPaneAside;\nSplitPane.Main = SplitPaneMain;\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "layout",
      "type": "registry:ui",
      "title": "Layout",
      "description": "Foundational layout primitives (Container, Stack, Row, Grid) without hand-written CSS.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/layout.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// --- Container ---\nexport interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType;\n  size?: \"narrow\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n}\n\nconst CONTAINER_SIZES = {\n  narrow: \"max-w-3xl\",\n  sm: \"max-w-4xl\",\n  md: \"max-w-5xl\",\n  lg: \"max-w-6xl\",\n  xl: \"max-w-[1400px]\",\n  full: \"max-w-full\",\n};\n\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ as: Component = \"div\", size = \"xl\", className, children, ...props }, ref) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(\"mx-auto w-full px-4 sm:px-6\", CONTAINER_SIZES[size], className)}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\nContainer.displayName = \"Container\";\n\n// --- Stack ---\nexport interface StackProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType;\n  gap?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\";\n}\n\nconst STACK_GAPS = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  sm: \"gap-2\",\n  md: \"gap-4\",\n  lg: \"gap-6\",\n  xl: \"gap-8\",\n};\n\nconst STACK_ALIGNS = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n  stretch: \"items-stretch\",\n};\n\nexport const Stack = React.forwardRef<HTMLDivElement, StackProps>(\n  ({ as: Component = \"div\", gap = \"md\", align = \"stretch\", className, children, ...props }, ref) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(\"flex flex-col\", STACK_GAPS[gap], STACK_ALIGNS[align], className)}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\nStack.displayName = \"Stack\";\n\n// --- Row ---\nexport interface RowProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType;\n  gap?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n  align?: \"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\";\n  justify?: \"start\" | \"center\" | \"end\" | \"between\" | \"around\";\n  wrap?: boolean;\n}\n\nconst ROW_GAPS = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  sm: \"gap-2\",\n  md: \"gap-3\",\n  lg: \"gap-5\",\n  xl: \"gap-8\",\n};\n\nconst ROW_ALIGNS = {\n  start: \"items-start\",\n  center: \"items-center\",\n  end: \"items-end\",\n  baseline: \"items-baseline\",\n  stretch: \"items-stretch\",\n};\n\nconst ROW_JUSTIFIES = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n  around: \"justify-around\",\n};\n\nexport const Row = React.forwardRef<HTMLDivElement, RowProps>(\n  (\n    {\n      as: Component = \"div\",\n      gap = \"md\",\n      align = \"center\",\n      justify = \"start\",\n      wrap = false,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          \"flex flex-row\",\n          ROW_GAPS[gap],\n          ROW_ALIGNS[align],\n          ROW_JUSTIFIES[justify],\n          wrap && \"flex-wrap\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\nRow.displayName = \"Row\";\n\n// --- Grid ---\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  as?: React.ElementType;\n  cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | string;\n  gap?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n}\n\nconst GRID_COLS = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-1 sm:grid-cols-2\",\n  3: \"grid-cols-1 sm:grid-cols-2 md:grid-cols-3\",\n  4: \"grid-cols-1 sm:grid-cols-2 md:grid-cols-4\",\n  5: \"grid-cols-1 sm:grid-cols-2 md:grid-cols-5\",\n  6: \"grid-cols-2 sm:grid-cols-3 md:grid-cols-6\",\n  12: \"grid-cols-12\",\n};\n\nconst GRID_GAPS = {\n  none: \"gap-0\",\n  xs: \"gap-1\",\n  sm: \"gap-2\",\n  md: \"gap-4\",\n  lg: \"gap-6\",\n  xl: \"gap-8\",\n};\n\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps>(\n  ({ as: Component = \"div\", cols = 2, gap = \"md\", className, children, ...props }, ref) => {\n    const colClass = typeof cols === \"number\" ? GRID_COLS[cols as keyof typeof GRID_COLS] || `grid-cols-${cols}` : cols;\n\n    return (\n      <Component\n        ref={ref}\n        className={cn(\"grid\", colClass, GRID_GAPS[gap], className)}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\nGrid.displayName = \"Grid\";\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "typography",
      "type": "registry:ui",
      "title": "Typography",
      "description": "Editorial typography primitives (Heading H1-H6, Lead paragraph) with signature Space Grotesk tracking.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/typography.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n  as?: React.ElementType;\n  size?: \"display\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n}\n\nconst HEADING_SIZES = {\n  display: \"text-4xl md:text-5xl font-extrabold tracking-tight\",\n  h1: \"text-3xl md:text-4xl font-bold tracking-tight\",\n  h2: \"text-2xl md:text-3xl font-bold tracking-tight\",\n  h3: \"text-xl md:text-2xl font-bold\",\n  h4: \"text-lg md:text-xl font-bold\",\n  h5: \"text-base font-semibold\",\n  h6: \"text-sm font-semibold uppercase tracking-wider\",\n};\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n  ({ level = 1, as, size, className, children, ...props }, ref) => {\n    const Component = (as || `h${level}`) as React.ElementType;\n    const sizeKey = size || (`h${level}` as keyof typeof HEADING_SIZES);\n\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          \"font-heading text-foreground\",\n          HEADING_SIZES[sizeKey] || HEADING_SIZES.h1,\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\nHeading.displayName = \"Heading\";\n\nexport const H1 = React.forwardRef<HTMLHeadingElement, Omit<HeadingProps, \"level\">>(\n  (props, ref) => <Heading ref={ref} level={1} {...props} />\n);\nH1.displayName = \"H1\";\n\nexport const H2 = React.forwardRef<HTMLHeadingElement, Omit<HeadingProps, \"level\">>(\n  (props, ref) => <Heading ref={ref} level={2} {...props} />\n);\nH2.displayName = \"H2\";\n\nexport const H3 = React.forwardRef<HTMLHeadingElement, Omit<HeadingProps, \"level\">>(\n  (props, ref) => <Heading ref={ref} level={3} {...props} />\n);\nH3.displayName = \"H3\";\n\nexport const H4 = React.forwardRef<HTMLHeadingElement, Omit<HeadingProps, \"level\">>(\n  (props, ref) => <Heading ref={ref} level={4} {...props} />\n);\nH4.displayName = \"H4\";\n\nexport interface LeadProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  as?: React.ElementType;\n}\n\nexport const Lead = React.forwardRef<HTMLParagraphElement, LeadProps>(\n  ({ as: Component = \"p\", className, children, ...props }, ref) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(\"text-lg md:text-xl text-muted-foreground leading-relaxed\", className)}\n        {...props}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\nLead.displayName = \"Lead\";\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "step-nav",
      "type": "registry:ui",
      "title": "StepNav",
      "description": "Guided walkthrough step navigation bar with previous/next actions, position badge, and keyboard shortcuts.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/step-nav.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"./button\";\nimport { Badge } from \"./badge\";\nimport { Kbd } from \"./kbd\";\n\nexport interface StepNavProps extends React.HTMLAttributes<HTMLElement> {\n  /** 0-indexed current step index. */\n  current: number;\n  /** Total count of steps. */\n  total: number;\n  /** Callback fired when previous button is clicked. */\n  onPrev?: () => void;\n  /** Callback fired when next button is clicked. */\n  onNext?: () => void;\n  /** Custom label for previous button. Default \"← Previous\". */\n  prevLabel?: React.ReactNode;\n  /** Custom label for next button. Default \"Next →\". */\n  nextLabel?: React.ReactNode;\n  /** Custom label for next button when on the last step. Default \"Last step\". */\n  lastLabel?: React.ReactNode;\n  /** Explicitly disable previous button. */\n  prevDisabled?: boolean;\n  /** Explicitly disable next button. */\n  nextDisabled?: boolean;\n  /** Optional secondary badge next to the position counter (e.g. step category or kind). */\n  badge?: React.ReactNode;\n  /** Show keyboard arrow keycaps. Default true. */\n  showKeyboardHints?: boolean;\n  /** Keyboard shortcuts hint icons. Default [\"←\", \"→\"]. */\n  keyboardHints?: [string, string];\n}\n\nexport const StepNav = React.forwardRef<HTMLElement, StepNavProps>(\n  (\n    {\n      current,\n      total,\n      onPrev,\n      onNext,\n      prevLabel = \"← Previous\",\n      nextLabel = \"Next →\",\n      lastLabel = \"Last step\",\n      prevDisabled,\n      nextDisabled,\n      badge,\n      showKeyboardHints = true,\n      keyboardHints = [\"←\", \"→\"],\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const isFirst = current <= 0;\n    const isLast = current >= total - 1;\n\n    return (\n      <nav\n        ref={ref}\n        aria-label=\"Step navigation\"\n        className={cn(\"flex flex-wrap items-center justify-between gap-3 my-2\", className)}\n        {...props}\n      >\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          onClick={onPrev}\n          disabled={prevDisabled !== undefined ? prevDisabled : isFirst}\n        >\n          {prevLabel}\n        </Button>\n\n        <div className=\"flex items-center gap-2\">\n          <Badge>\n            Step {current + 1} of {total}\n          </Badge>\n          {badge}\n          {showKeyboardHints && (\n            <span className=\"hidden items-center gap-1 md:flex\">\n              <Kbd>{keyboardHints[0]}</Kbd>\n              <Kbd>{keyboardHints[1]}</Kbd>\n            </span>\n          )}\n        </div>\n\n        <Button\n          size=\"sm\"\n          onClick={onNext}\n          disabled={nextDisabled !== undefined ? nextDisabled : isLast}\n        >\n          {isLast ? lastLabel : nextLabel}\n        </Button>\n      </nav>\n    );\n  }\n);\nStepNav.displayName = \"StepNav\";\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "theme-toggle",
      "type": "registry:ui",
      "title": "ThemeToggle",
      "description": "Tactile light and dark theme mode toggle button with Sun and Moon icons.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/theme-toggle.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"./button\";\n\nexport interface ThemeToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: \"ghost\" | \"outline\" | \"secondary\";\n  size?: \"sm\" | \"default\" | \"icon\";\n  showLabel?: boolean;\n}\n\nexport function ThemeToggle({\n  variant = \"ghost\",\n  size = \"sm\",\n  showLabel = false,\n  className,\n  ...props\n}: ThemeToggleProps) {\n  const [mounted, setMounted] = React.useState(false);\n  const [isDark, setIsDark] = React.useState(false);\n\n  React.useEffect(() => {\n    setMounted(true);\n    const dark =\n      document.documentElement.classList.contains(\"dark\") ||\n      document.documentElement.getAttribute(\"data-theme\") === \"dark\";\n    setIsDark(dark);\n  }, []);\n\n  const handleToggle = () => {\n    const nextDark = !document.documentElement.classList.contains(\"dark\");\n    document.documentElement.classList.toggle(\"dark\", nextDark);\n    document.documentElement.setAttribute(\"data-theme\", nextDark ? \"dark\" : \"light\");\n    setIsDark(nextDark);\n    try {\n      localStorage.setItem(\"theme\", nextDark ? \"dark\" : \"light\");\n    } catch {}\n  };\n\n  return (\n    <Button\n      variant={variant}\n      size={size}\n      aria-label={isDark ? \"Switch to light theme\" : \"Switch to dark theme\"}\n      title={isDark ? \"Switch to light theme\" : \"Switch to dark theme\"}\n      onClick={handleToggle}\n      className={cn(\"cursor-pointer\", className)}\n      {...props}\n    >\n      <span className=\"flex items-center gap-1.5 font-mono text-xs\">\n        {mounted ? (\n          isDark ? (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z\" />\n            </svg>\n          ) : (\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"14\"\n              height=\"14\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <circle cx=\"12\" cy=\"12\" r=\"4\" />\n              <path d=\"M12 2v2\" />\n              <path d=\"M12 20v2\" />\n              <path d=\"m4.93 4.93 1.41 1.41\" />\n              <path d=\"m17.66 17.66 1.41 1.41\" />\n              <path d=\"M2 12h2\" />\n              <path d=\"M20 12h2\" />\n              <path d=\"m6.34 17.66-1.41 1.41\" />\n              <path d=\"m19.07 4.93-1.41 1.41\" />\n            </svg>\n          )\n        ) : (\n          <span className=\"inline-block size-3.5\" />\n        )}\n        {showLabel && <span>{isDark ? \"Dark\" : \"Light\"}</span>}\n      </span>\n    </Button>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "theme-script",
      "type": "registry:ui",
      "title": "ThemeScript",
      "description": "Early theme bootstrapping script and Google Fonts loader to prevent flash of unstyled content (FOUC).",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/theme-script.tsx",
          "content": "import * as React from \"react\";\n\nexport const THEME_SCRIPT = `(function(){try{var t=localStorage.getItem('theme');var d=window.matchMedia('(prefers-color-scheme: dark)').matches;var m=t||(d?'dark':'light');document.documentElement.setAttribute('data-theme',m);document.documentElement.classList.toggle('dark',m==='dark');}catch(e){}})();`;\n\nexport const GOOGLE_FONTS_HREF =\n  \"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Assistant:wght@400;500;600;700&family=Lora:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap\";\n\nexport interface ThemeScriptProps {\n  /** Also load Array UI signature Google Fonts (Space Grotesk, Assistant, Lora, IBM Plex Mono). Default true. */\n  fonts?: boolean;\n}\n\nexport function ThemeFonts() {\n  return (\n    <>\n      <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n      <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossOrigin=\"anonymous\" />\n      <link rel=\"stylesheet\" href={GOOGLE_FONTS_HREF} />\n    </>\n  );\n}\n\nexport function ThemeScript({ fonts = true }: ThemeScriptProps) {\n  return (\n    <>\n      {fonts && <ThemeFonts />}\n      <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />\n    </>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "terminal",
      "type": "registry:ui",
      "title": "Terminal",
      "description": "Machined telemetry terminal with bash command dots and styled outputs.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/terminal.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type TerminalLine =\n  | string\n  | { text: string; kind?: \"cmd\" | \"out\" | \"ok\" | \"err\" };\n\nexport interface TerminalProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  lines: TerminalLine[];\n}\n\nexport function Terminal({\n  title = \"bash\",\n  lines,\n  className,\n  ...props\n}: TerminalProps) {\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-[#070709] text-[#ececf1] font-mono text-[0.88rem] overflow-hidden shadow-md my-4\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center gap-1.5 px-3 py-2 bg-[#121217] border-b border-[#24242c]\">\n        <span className=\"w-2.5 h-2.5 rounded-full bg-[#ff5f56]\" />\n        <span className=\"w-2.5 h-2.5 rounded-full bg-[#ffbd2e]\" />\n        <span className=\"w-2.5 h-2.5 rounded-full bg-[#27c93f]\" />\n        <span className=\"text-xs text-muted-foreground font-sans ml-2 font-medium\">\n          {title}\n        </span>\n      </div>\n      <div className=\"p-3.5 space-y-1.5 overflow-x-auto leading-relaxed\">\n        {lines.map((line, i) => {\n          const { text, kind } =\n            typeof line === \"string\"\n              ? { text: line, kind: \"cmd\" as const }\n              : { kind: \"cmd\" as const, ...line };\n\n          let colorClass = \"text-[#cfcfd6]\";\n          let prefix = \"\";\n\n          if (kind === \"cmd\") {\n            colorClass = \"text-white font-medium\";\n            prefix = \"$ \";\n          } else if (kind === \"ok\") {\n            colorClass = \"text-emerald-400\";\n            prefix = \"✔ \";\n          } else if (kind === \"err\") {\n            colorClass = \"text-rose-400\";\n            prefix = \"✖ \";\n          }\n\n          return (\n            <div key={i} className={cn(\"whitespace-pre\", colorClass)}>\n              {prefix && (\n                <span className=\"select-none opacity-60 mr-1.5\">{prefix}</span>\n              )}\n              <span>{text}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "diff-block",
      "type": "registry:ui",
      "title": "DiffBlock",
      "description": "Git patch viewer with line gutters, additions, and deletions.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/diff-block.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type DiffCoverage = \"covered\" | \"uncovered\" | \"partial\";\nexport type DiffView = \"unified\" | \"split\";\n\nexport interface DiffSegment {\n  text: string;\n  changed?: boolean;\n}\n\nexport interface DiffLine {\n  type: \"add\" | \"del\" | \"normal\" | \"meta\";\n  content: string;\n  oldNum?: number | string;\n  newNum?: number | string;\n  /** Test coverage of this line in the new file. Rendered when `showCoverage` is set. */\n  coverage?: DiffCoverage;\n  /** Pre-computed intra-line segments. Overrides automatic word highlighting. */\n  segments?: DiffSegment[];\n  /** Author or reviewer annotation rendered beneath the line. */\n  note?: string;\n}\n\nexport type DiffRow =\n  | { kind: \"line\"; line: DiffLine }\n  | { kind: \"pair\"; left?: DiffLine; right?: DiffLine }\n  | { kind: \"fold\"; rows: DiffRow[]; count: number };\n\nexport type DiffFileStatus = \"added\" | \"deleted\" | \"renamed\" | \"modified\";\n\nexport interface DiffBlockProps extends React.HTMLAttributes<HTMLDivElement> {\n  file?: string;\n  diff?: string;\n  lines?: DiffLine[];\n  /** File status badge shown in the header ('added' | 'deleted' | 'renamed' | 'modified'). */\n  status?: DiffFileStatus;\n  fileStatus?: DiffFileStatus;\n  /** `unified` (default) or side-by-side `split`. */\n  view?: DiffView;\n  /** Keep N unchanged lines around each change and fold the rest. `false` shows everything. */\n  collapseContext?: number | false;\n  /** Paint a coverage rail from each line's `coverage` value. */\n  showCoverage?: boolean;\n  /** Highlight changed words inside paired deleted/added lines. Default true. */\n  highlightWords?: boolean;\n}\n\nconst HUNK_RE = /^@@ -(\\d+)(?:,\\d+)? \\+(\\d+)(?:,\\d+)? @@/;\nconst FILE_HEADER_RE = /^(diff --git |index |--- |\\+\\+\\+ |new file mode|deleted file mode|similarity index|rename (from|to) )/;\n\nexport function parseDiff(raw: string): { lines: DiffLine[]; adds: number; dels: number } {\n  const rawLines = raw.replace(/\\s+$/, \"\").replace(/^\\n+/, \"\").split(\"\\n\");\n  const hasHunks = rawLines.some((l) => l.startsWith(\"@@\"));\n  const lines: DiffLine[] = [];\n  let adds = 0;\n  let dels = 0;\n  let oldIndex = 1;\n  let newIndex = 1;\n  let inHunk = false;\n\n  for (const line of rawLines) {\n    if (line.startsWith(\"@@\")) {\n      const m = HUNK_RE.exec(line);\n      if (m) {\n        oldIndex = parseInt(m[1], 10);\n        newIndex = parseInt(m[2], 10);\n      }\n      inHunk = true;\n      lines.push({ type: \"meta\", content: line, oldNum: \"...\", newNum: \"...\" });\n    } else if (hasHunks && !inHunk && FILE_HEADER_RE.test(line)) {\n      continue;\n    } else if (line.startsWith(\"\\\\\")) {\n      lines.push({ type: \"meta\", content: line });\n    } else if (line.startsWith(\"+\")) {\n      adds++;\n      lines.push({ type: \"add\", content: line.slice(1), newNum: newIndex++ });\n    } else if (line.startsWith(\"-\")) {\n      dels++;\n      lines.push({ type: \"del\", content: line.slice(1), oldNum: oldIndex++ });\n    } else {\n      lines.push({\n        type: \"normal\",\n        content: line.startsWith(\" \") ? line.slice(1) : line,\n        oldNum: oldIndex++,\n        newNum: newIndex++,\n      });\n    }\n  }\n\n  return { lines, adds, dels };\n}\n\nfunction tokenize(s: string): string[] {\n  return s.match(/\\s+|[A-Za-z0-9_]+|[^\\sA-Za-z0-9_]/g) ?? [];\n}\n\nfunction wordSegments(oldText: string, newText: string): [DiffSegment[], DiffSegment[]] | null {\n  const a = tokenize(oldText);\n  const b = tokenize(newText);\n  let p = 0;\n  while (p < a.length && p < b.length && a[p] === b[p]) p++;\n  let s = 0;\n  while (s < a.length - p && s < b.length - p && a[a.length - 1 - s] === b[b.length - 1 - s]) s++;\n  if (p === 0 && s === 0) return null;\n  if (p + s >= a.length && p + s >= b.length) return null;\n\n  const build = (t: string[]): DiffSegment[] => {\n    const segs: DiffSegment[] = [];\n    const pre = t.slice(0, p).join(\"\");\n    const mid = t.slice(p, t.length - s).join(\"\");\n    const suf = t.slice(t.length - s).join(\"\");\n    if (pre) segs.push({ text: pre });\n    if (mid) segs.push({ text: mid, changed: true });\n    if (suf) segs.push({ text: suf });\n    return segs;\n  };\n  return [build(a), build(b)];\n}\n\n/** Splits lines into [delRun, addRun] groups (either may be empty) and passthrough singles. */\nfunction groupRuns(lines: DiffLine[]): { dels: DiffLine[]; adds: DiffLine[]; single?: DiffLine }[] {\n  const groups: { dels: DiffLine[]; adds: DiffLine[]; single?: DiffLine }[] = [];\n  let i = 0;\n  while (i < lines.length) {\n    const l = lines[i];\n    if (l.type === \"del\" || l.type === \"add\") {\n      const dels: DiffLine[] = [];\n      const adds: DiffLine[] = [];\n      while (i < lines.length && lines[i].type === \"del\") dels.push(lines[i++]);\n      while (i < lines.length && lines[i].type === \"add\") adds.push(lines[i++]);\n      groups.push({ dels, adds });\n    } else {\n      groups.push({ dels: [], adds: [], single: l });\n      i++;\n    }\n  }\n  return groups;\n}\n\nfunction annotateWords(lines: DiffLine[]): DiffLine[] {\n  const out = lines.map((l) => ({ ...l }));\n  const byRef = new Map<DiffLine, DiffLine>(lines.map((l, i) => [l, out[i]]));\n  for (const g of groupRuns(lines)) {\n    const n = Math.min(g.dels.length, g.adds.length);\n    for (let k = 0; k < n; k++) {\n      const d = byRef.get(g.dels[k])!;\n      const a = byRef.get(g.adds[k])!;\n      if (d.segments || a.segments) continue;\n      const segs = wordSegments(d.content, a.content);\n      if (segs) {\n        d.segments = segs[0];\n        a.segments = segs[1];\n      }\n    }\n  }\n  return out;\n}\n\nfunction rowIsChanged(row: DiffRow): boolean {\n  if (row.kind === \"line\") return row.line.type === \"add\" || row.line.type === \"del\";\n  if (row.kind === \"pair\") return [row.left, row.right].some((l) => l && l.type !== \"normal\");\n  return false;\n}\n\nfunction rowIsPinned(row: DiffRow): boolean {\n  if (row.kind === \"line\") return row.line.type === \"meta\" || Boolean(row.line.note);\n  if (row.kind === \"pair\") return [row.left, row.right].some((l) => l && l.note);\n  return true;\n}\n\nexport function buildDiffRows(\n  inputLines: DiffLine[],\n  opts: { view?: DiffView; collapseContext?: number | false; highlightWords?: boolean } = {}\n): DiffRow[] {\n  const { view = \"unified\", collapseContext = false, highlightWords = true } = opts;\n  const lines = highlightWords ? annotateWords(inputLines) : inputLines;\n\n  let rows: DiffRow[];\n  if (view === \"split\") {\n    rows = [];\n    for (const g of groupRuns(lines)) {\n      if (g.single) {\n        rows.push(\n          g.single.type === \"meta\"\n            ? { kind: \"line\", line: g.single }\n            : { kind: \"pair\", left: g.single, right: g.single }\n        );\n        continue;\n      }\n      const n = Math.max(g.dels.length, g.adds.length);\n      for (let k = 0; k < n; k++) rows.push({ kind: \"pair\", left: g.dels[k], right: g.adds[k] });\n    }\n  } else {\n    rows = lines.map((line) => ({ kind: \"line\", line }));\n  }\n\n  if (collapseContext === false || collapseContext < 0) return rows;\n\n  const keep = rows.map(rowIsPinned);\n  rows.forEach((r, i) => {\n    if (!rowIsChanged(r)) return;\n    for (let k = Math.max(0, i - collapseContext); k <= Math.min(rows.length - 1, i + collapseContext); k++) {\n      keep[k] = true;\n    }\n  });\n\n  const out: DiffRow[] = [];\n  let i = 0;\n  while (i < rows.length) {\n    if (keep[i]) {\n      out.push(rows[i++]);\n      continue;\n    }\n    const start = i;\n    while (i < rows.length && !keep[i]) i++;\n    const hidden = rows.slice(start, i);\n    if (hidden.length >= 2) out.push({ kind: \"fold\", rows: hidden, count: hidden.length });\n    else out.push(...hidden);\n  }\n  return out;\n}\n\nconst SYMBOLS: Record<DiffLine[\"type\"], string> = { add: \"+\", del: \"-\", meta: \"@\", normal: \" \" };\n\nconst LINE_STYLE: Record<DiffLine[\"type\"], string> = {\n  add: \"bg-emerald-950/40 text-emerald-300 border-l-2 border-emerald-500\",\n  del: \"bg-rose-950/40 text-rose-300 border-l-2 border-rose-500\",\n  meta: \"text-cyan-400 bg-cyan-950/20 font-semibold\",\n  normal: \"text-zinc-300 hover:bg-zinc-800/40\",\n};\n\nconst WORD_STYLE: Record<DiffLine[\"type\"], string> = {\n  add: \"bg-emerald-500/30 rounded-xs\",\n  del: \"bg-rose-500/30 rounded-xs\",\n  meta: \"\",\n  normal: \"\",\n};\n\nconst COVERAGE_STYLE: Record<DiffCoverage, string> = {\n  covered: \"bg-emerald-500\",\n  uncovered: \"bg-rose-500\",\n  partial: \"bg-amber-400\",\n};\n\nfunction renderText(l: DiffLine) {\n  if (!l.segments) return l.content;\n  return l.segments.map((s, i) =>\n    s.changed ? (\n      <span key={i} className={WORD_STYLE[l.type]}>\n        {s.text}\n      </span>\n    ) : (\n      <React.Fragment key={i}>{s.text}</React.Fragment>\n    )\n  );\n}\n\nfunction CoverageRail({ coverage, show }: { coverage?: DiffCoverage; show: boolean }) {\n  if (!show) return null;\n  return (\n    <span\n      className={cn(\"self-stretch w-[3px] mr-2 rounded-xs flex-shrink-0\", coverage && COVERAGE_STYLE[coverage])}\n      title={coverage ? `Coverage: ${coverage}` : undefined}\n      aria-label={coverage ? `Coverage: ${coverage}` : undefined}\n    />\n  );\n}\n\nfunction Note({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"pl-[4.25rem] pr-3.5 py-1.5 bg-amber-950/25 border-l-2 border-amber-400 text-xs text-zinc-300 font-sans leading-snug\">\n      {children}\n    </div>\n  );\n}\n\nfunction UnifiedLine({ l, showCoverage }: { l: DiffLine; showCoverage: boolean }) {\n  if (l.type === \"meta\") {\n    return (\n      <>\n        <div className=\"flex items-center px-4 py-1 text-xs italic text-zinc-500 bg-[#121217]/60 border-y border-[#24242c]/50 font-mono select-none\">\n          <span>{renderText(l)}</span>\n        </div>\n        {l.note && <Note>{l.note}</Note>}\n      </>\n    );\n  }\n  return (\n    <>\n      <div className={cn(\"flex items-start px-2 py-0.5 rounded-xs transition-colors whitespace-pre\", LINE_STYLE[l.type])}>\n        <CoverageRail coverage={l.coverage} show={showCoverage} />\n        <span className=\"flex gap-2 pr-3 select-none text-[0.72rem] text-zinc-600 flex-shrink-0\">\n          <span className=\"min-w-[3ch] text-right\">{l.oldNum ?? \"\"}</span>\n          <span className=\"min-w-[3ch] text-right\">{l.newNum ?? \"\"}</span>\n        </span>\n        <span className=\"w-4 select-none text-zinc-500 font-semibold flex-shrink-0\">{SYMBOLS[l.type]}</span>\n        <span className=\"flex-1\">{renderText(l)}</span>\n      </div>\n      {l.note && <Note>{l.note}</Note>}\n    </>\n  );\n}\n\nfunction SplitHalf({ l, side, showCoverage }: { l?: DiffLine; side: \"left\" | \"right\"; showCoverage: boolean }) {\n  if (!l) return <div className=\"bg-zinc-900/60\" />;\n  if (l.type === \"meta\") {\n    return (\n      <div className=\"flex items-center px-4 py-1 text-xs italic text-zinc-500 bg-[#121217]/60 border-y border-[#24242c]/50 font-mono select-none\">\n        <span>{renderText(l)}</span>\n      </div>\n    );\n  }\n  return (\n    <div\n      className={cn(\n        \"flex items-start min-w-0 px-2 py-0.5 whitespace-pre\",\n        side === \"right\" && \"border-l border-[#24242c]\",\n        LINE_STYLE[l.type]\n      )}\n    >\n      {side === \"right\" && <CoverageRail coverage={l.coverage} show={showCoverage} />}\n      <span className=\"pr-3 select-none text-[0.72rem] text-zinc-600 min-w-[3ch] text-right flex-shrink-0\">\n        {(side === \"left\" ? l.oldNum : l.newNum) ?? \"\"}\n      </span>\n      <span className=\"w-4 select-none text-zinc-500 font-semibold flex-shrink-0\">{SYMBOLS[l.type]}</span>\n      <span className=\"flex-1\">{renderText(l)}</span>\n    </div>\n  );\n}\n\nfunction Rows({ rows, showCoverage }: { rows: DiffRow[]; showCoverage: boolean }) {\n  return (\n    <>\n      {rows.map((row, idx) => {\n        if (row.kind === \"line\") return <UnifiedLine key={idx} l={row.line} showCoverage={showCoverage} />;\n        if (row.kind === \"pair\") {\n          const note = row.right?.note ?? row.left?.note;\n          return (\n            <React.Fragment key={idx}>\n              <div className=\"grid grid-cols-[minmax(20rem,1fr)_minmax(20rem,1fr)]\">\n                <SplitHalf l={row.left} side=\"left\" showCoverage={showCoverage} />\n                <SplitHalf l={row.right} side=\"right\" showCoverage={showCoverage} />\n              </div>\n              {note && <Note>{note}</Note>}\n            </React.Fragment>\n          );\n        }\n        return (\n          <details key={idx} className=\"group\">\n            <summary className=\"cursor-pointer list-none px-3.5 py-1 bg-[#121217] border-y border-[#24242c] text-xs italic text-zinc-500 hover:text-zinc-300 select-none [&::-webkit-details-marker]:hidden group-open:not-italic\">\n              {row.count} unchanged lines\n            </summary>\n            <Rows rows={row.rows} showCoverage={showCoverage} />\n          </details>\n        );\n      })}\n    </>\n  );\n}\n\nexport function DiffBlock({\n  file,\n  status,\n  fileStatus,\n  diff,\n  lines: customLines,\n  view = \"unified\",\n  collapseContext = false,\n  showCoverage = false,\n  highlightWords = true,\n  className,\n  ...props\n}: DiffBlockProps) {\n  const parsed = React.useMemo(\n    () => (diff ? parseDiff(diff) : { lines: customLines || [], adds: 0, dels: 0 }),\n    [diff, customLines]\n  );\n  const lines = customLines || parsed.lines;\n  const adds = customLines ? customLines.filter((l) => l.type === \"add\").length : parsed.adds;\n  const dels = customLines ? customLines.filter((l) => l.type === \"del\").length : parsed.dels;\n  const rows = React.useMemo(\n    () => buildDiffRows(lines, { view, collapseContext, highlightWords }),\n    [lines, view, collapseContext, highlightWords]\n  );\n  const effectiveStatus = status || fileStatus;\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-[#070709] text-[#ececf1] font-mono text-[0.84rem] overflow-hidden shadow-md my-4\",\n        className\n      )}\n      {...props}\n    >\n      {file && (\n        <div className=\"flex items-center justify-between px-3.5 py-2 bg-[#121217] border-b border-[#24242c] text-xs\">\n          <div className=\"flex items-center gap-2 min-w-0\">\n            <span className=\"text-zinc-300 font-medium truncate\">{file}</span>\n            {effectiveStatus && (\n              <span\n                className={cn(\n                  \"text-[0.68rem] font-mono uppercase px-1.5 py-0.5 rounded-xs font-medium tracking-wider\",\n                  effectiveStatus === \"added\" && \"bg-emerald-500/15 text-emerald-400 border border-emerald-500/30\",\n                  effectiveStatus === \"deleted\" && \"bg-rose-500/15 text-rose-400 border border-rose-500/30\",\n                  effectiveStatus === \"renamed\" && \"bg-amber-500/15 text-amber-400 border border-amber-500/30\",\n                  effectiveStatus === \"modified\" && \"bg-zinc-700/30 text-zinc-400 border border-zinc-700/50\"\n                )}\n              >\n                {effectiveStatus === \"added\" ? \"+ added\" : effectiveStatus === \"deleted\" ? \"− deleted\" : effectiveStatus}\n              </span>\n            )}\n          </div>\n          <div className=\"flex items-center gap-2 font-mono text-[0.75rem] shrink-0\">\n            {adds > 0 && <span className=\"text-emerald-400\">+{adds}</span>}\n            {dels > 0 && <span className=\"text-rose-400\">-{dels}</span>}\n          </div>\n        </div>\n      )}\n      <div className=\"py-2 overflow-x-auto leading-relaxed\">\n        <Rows rows={rows} showCoverage={showCoverage} />\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "ping-status",
      "type": "registry:ui",
      "title": "PingStatus",
      "description": "Live telemetry pulsing dot indicator with status and latency.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/ping-status.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type PingVariant = \"success\" | \"warning\" | \"danger\" | \"info\" | \"neutral\";\nexport type PingSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface PingStatusProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: PingVariant;\n  size?: PingSize;\n  label?: React.ReactNode;\n  pulse?: boolean;\n}\n\nconst variantStyles: Record<PingVariant, { dot: string; ring: string }> = {\n  success: { dot: \"bg-emerald-500\", ring: \"bg-emerald-400\" },\n  warning: { dot: \"bg-amber-500\", ring: \"bg-amber-400\" },\n  danger: { dot: \"bg-red-500\", ring: \"bg-red-400\" },\n  info: { dot: \"bg-blue-500\", ring: \"bg-blue-400\" },\n  neutral: { dot: \"bg-zinc-400\", ring: \"bg-zinc-300\" },\n};\n\nconst sizeStyles: Record<PingSize, { dot: string; wrapper: string }> = {\n  sm: { dot: \"w-1.5 h-1.5\", wrapper: \"w-2.5 h-2.5\" },\n  md: { dot: \"w-2 h-2\", wrapper: \"w-3 h-3\" },\n  lg: { dot: \"w-2.5 h-2.5\", wrapper: \"w-4 h-4\" },\n};\n\nexport function PingStatus({\n  variant = \"success\",\n  size = \"md\",\n  label,\n  pulse = true,\n  className,\n  ...props\n}: PingStatusProps) {\n  const v = variantStyles[variant];\n  const s = sizeStyles[size];\n\n  return (\n    <div\n      className={cn(\n        \"inline-flex items-center gap-2 text-xs font-mono font-medium text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <span className={cn(\"relative flex items-center justify-center\", s.wrapper)}>\n        {pulse && (\n          <span\n            className={cn(\n              \"absolute inset-0 rounded-full opacity-75 motion-safe:animate-ping\",\n              v.ring\n            )}\n          />\n        )}\n        <span className={cn(\"relative rounded-full\", v.dot, s.dot)} />\n      </span>\n      {label && <span>{label}</span>}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "property-grid",
      "type": "registry:ui",
      "title": "PropertyGrid",
      "description": "Key-value metadata inspector with one-click copy functionality.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/property-grid.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PropertyItem {\n  label: string;\n  value: React.ReactNode;\n  copyable?: boolean;\n  copyValue?: string;\n}\n\nexport interface PropertyGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: PropertyItem[];\n}\n\nexport function PropertyGrid({ items, className, ...props }: PropertyGridProps) {\n  const [copiedKey, setCopiedKey] = React.useState<string | null>(null);\n\n  const handleCopy = (key: string, val: string) => {\n    navigator.clipboard.writeText(val);\n    setCopiedKey(key);\n    setTimeout(() => setCopiedKey(null), 1800);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border divide-y divide-border bg-card text-card-foreground text-sm overflow-hidden my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      {items.map((item, idx) => {\n        const strVal =\n          item.copyValue ?? (typeof item.value === \"string\" ? item.value : undefined);\n        const isCopied = copiedKey === item.label;\n\n        return (\n          <div\n            key={idx}\n            className=\"flex items-center justify-between px-4 py-2.5 hover:bg-muted/40 transition-colors\"\n          >\n            <span className=\"font-mono text-xs text-muted-foreground uppercase tracking-wider\">\n              {item.label}\n            </span>\n            <div className=\"flex items-center gap-2 font-mono text-sm text-foreground\">\n              <span>{item.value}</span>\n              {item.copyable !== false && strVal && (\n                <button\n                  type=\"button\"\n                  className=\"p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer\"\n                  title=\"Copy value\"\n                  onClick={() => handleCopy(item.label, strVal)}\n                >\n                  {isCopied ? (\n                    <span className=\"text-xs text-emerald-500 font-semibold\">Copied</span>\n                  ) : (\n                    <svg\n                      width=\"13\"\n                      height=\"13\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    >\n                      <rect width=\"14\" height=\"14\" x=\"8\" y=\"8\" rx=\"2\" ry=\"2\" />\n                      <path d=\"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2\" />\n                    </svg>\n                  )}\n                </button>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "package-manager",
      "type": "registry:ui",
      "title": "PackageManager",
      "description": "pnpm/npm/bun/yarn command switcher with copy button.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/package-manager.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type PackageManagerType = \"pnpm\" | \"npm\" | \"bun\" | \"yarn\";\n\nexport interface PackageManagerProps extends React.HTMLAttributes<HTMLDivElement> {\n  pkg?: string;\n  defaultManager?: PackageManagerType;\n}\n\nexport function PackageManager({\n  pkg = \"array-ui\",\n  defaultManager = \"pnpm\",\n  className,\n  ...props\n}: PackageManagerProps) {\n  const [manager, setManager] = React.useState<PackageManagerType>(defaultManager);\n  const [copied, setCopied] = React.useState(false);\n\n  const getCommand = (pm: PackageManagerType) => {\n    switch (pm) {\n      case \"pnpm\":\n        return `pnpm add ${pkg}`;\n      case \"bun\":\n        return `bun add ${pkg}`;\n      case \"yarn\":\n        return `yarn add ${pkg}`;\n      case \"npm\":\n      default:\n        return `npm install ${pkg}`;\n    }\n  };\n\n  const command = getCommand(manager);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(command);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card text-card-foreground overflow-hidden shadow-xs my-4\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between border-b border-border bg-muted/30 px-3 py-1.5\">\n        <div className=\"flex items-center gap-1\">\n          {([\"pnpm\", \"npm\", \"bun\", \"yarn\"] as PackageManagerType[]).map((pm) => (\n            <button\n              key={pm}\n              type=\"button\"\n              className={cn(\n                \"px-2.5 py-1 text-xs font-mono font-medium rounded-md transition-colors cursor-pointer\",\n                manager === pm\n                  ? \"bg-background text-foreground shadow-2xs border border-border\"\n                  : \"text-muted-foreground hover:text-foreground\"\n              )}\n              onClick={() => setManager(pm)}\n            >\n              {pm}\n            </button>\n          ))}\n        </div>\n      </div>\n      <div className=\"flex items-center justify-between px-4 py-3 bg-[#09090b] text-[#ececf1]\">\n        <code className=\"font-mono text-sm\">{command}</code>\n        <button\n          type=\"button\"\n          className=\"text-xs px-2.5 py-1 rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-200 transition-colors cursor-pointer\"\n          onClick={handleCopy}\n        >\n          {copied ? \"Copied!\" : \"Copy\"}\n        </button>\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "file-tree",
      "type": "registry:ui",
      "title": "FileTree",
      "description": "Directory explorer tree with collapsible folders and item selection.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/file-tree.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface FileTreeNode {\n  name: string;\n  type?: \"file\" | \"folder\";\n  children?: FileTreeNode[];\n  badge?: string;\n  defaultOpen?: boolean;\n}\n\nexport interface FileTreeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  data: FileTreeNode[];\n  onSelect?: (item: FileTreeNode) => void;\n  selected?: string;\n}\n\nfunction FileTreeNodeItem({\n  node,\n  onSelect,\n  selected,\n}: {\n  node: FileTreeNode;\n  onSelect?: (item: FileTreeNode) => void;\n  selected?: string;\n}) {\n  const isFolder = node.type === \"folder\" || Boolean(node.children && node.children.length > 0);\n  const [isOpen, setIsOpen] = React.useState(node.defaultOpen ?? true);\n  const isSelected = selected === node.name;\n\n  return (\n    <div className=\"text-xs font-mono select-none\">\n      <div\n        className={cn(\n          \"flex items-center gap-1.5 px-2 py-1 rounded cursor-pointer transition-colors\",\n          isSelected ? \"bg-muted font-semibold text-foreground\" : \"text-muted-foreground hover:text-foreground hover:bg-muted/50\"\n        )}\n        onClick={(e) => {\n          e.stopPropagation();\n          if (isFolder) setIsOpen(!isOpen);\n          onSelect?.(node);\n        }}\n      >\n        <span className=\"w-3 text-center text-[10px] text-muted-foreground\">\n          {isFolder ? (isOpen ? \"▾\" : \"▸\") : \"•\"}\n        </span>\n        <span className=\"flex-1\">{node.name}</span>\n        {node.badge && (\n          <span className=\"text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground\">\n            {node.badge}\n          </span>\n        )}\n      </div>\n      {isFolder && isOpen && node.children && (\n        <div className=\"pl-4 border-l border-border/60 ml-2 space-y-0.5 mt-0.5\">\n          {node.children.map((child, idx) => (\n            <FileTreeNodeItem\n              key={idx}\n              node={child}\n              onSelect={onSelect}\n              selected={selected}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function FileTree({ data, onSelect, selected, className, ...props }: FileTreeProps) {\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card p-3 shadow-2xs space-y-0.5 my-4\",\n        className\n      )}\n      {...props}\n    >\n      {data.map((node, idx) => (\n        <FileTreeNodeItem key={idx} node={node} onSelect={onSelect} selected={selected} />\n      ))}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "maxim",
      "type": "registry:ui",
      "title": "Maxim",
      "description": "Editorial quote callout with amber left rail and citation.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/maxim.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MaximProps extends React.HTMLAttributes<HTMLQuoteElement> {\n  quote?: React.ReactNode;\n  author?: string;\n  source?: string;\n  sourceUrl?: string;\n}\n\nexport function Maxim({\n  quote,\n  author,\n  source,\n  sourceUrl,\n  children,\n  className,\n  ...props\n}: MaximProps) {\n  return (\n    <blockquote\n      className={cn(\n        \"relative pl-4 py-1.5 my-6 border-l-[3px] border-[#cc9900] dark:border-[#fbbf24] font-serif italic text-lg leading-relaxed text-foreground/90\",\n        className\n      )}\n      {...props}\n    >\n      <p>{quote || children}</p>\n      {(author || source) && (\n        <cite className=\"block not-italic font-sans text-xs text-muted-foreground font-medium uppercase tracking-wider mt-2\">\n          {author && <span>- {author}</span>}\n          {source && (\n            <span>\n              {author ? \", \" : \"- \"}\n              {sourceUrl ? (\n                <a\n                  href={sourceUrl}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className=\"underline hover:text-foreground transition-colors\"\n                >\n                  {source}\n                </a>\n              ) : (\n                source\n              )}\n            </span>\n          )}\n        </cite>\n      )}\n    </blockquote>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "takeaways-box",
      "type": "registry:ui",
      "title": "TakeawaysBox",
      "description": "Key takeaways container with bulleted highlights.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/takeaways-box.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface TakeawaysBoxProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  items?: React.ReactNode[];\n}\n\nexport function TakeawaysBox({\n  title = \"Key Takeaways\",\n  items,\n  children,\n  className,\n  ...props\n}: TakeawaysBoxProps) {\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-muted/40 p-5 my-6 shadow-2xs\",\n        className\n      )}\n      {...props}\n    >\n      {title && (\n        <h4 className=\"font-heading font-semibold text-base text-foreground mb-3 flex items-center gap-2\">\n          <span className=\"w-1.5 h-1.5 rounded-full bg-primary\" />\n          {title}\n        </h4>\n      )}\n      {items && items.length > 0 ? (\n        <ul className=\"space-y-2 text-sm text-foreground/85 list-disc list-inside\">\n          {items.map((item, idx) => (\n            <li key={idx} className=\"leading-relaxed\">\n              {item}\n            </li>\n          ))}\n        </ul>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "hero",
      "type": "registry:ui",
      "title": "Hero",
      "description": "Editorial profile hero section with avatar, heading, and bio.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/hero.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface HeroProps extends React.HTMLAttributes<HTMLElement> {\n  title?: string;\n  subtitle?: string;\n  bio?: React.ReactNode;\n  avatarUrl?: string;\n  avatarAlt?: string;\n  actions?: React.ReactNode;\n  socialLinks?: React.ReactNode;\n}\n\nexport function Hero({\n  title = \"Hey, I am Arpit\",\n  subtitle = \"engineering, databases, and systems. always building.\",\n  bio,\n  avatarUrl,\n  avatarAlt = \"Portrait\",\n  actions,\n  socialLinks,\n  className,\n  ...props\n}: HeroProps) {\n  return (\n    <section\n      className={cn(\"py-12 md:py-16 border-b border-border\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-col-reverse md:flex-row items-center justify-between gap-8 md:gap-12\">\n        <div className=\"flex-1 space-y-4 text-left\">\n          {title && (\n            <h1 className=\"text-3xl md:text-5xl font-heading font-extrabold tracking-tight text-foreground\">\n              {title}\n            </h1>\n          )}\n          {subtitle && (\n            <p className=\"font-serif italic text-lg md:text-xl text-muted-foreground leading-relaxed\">\n              {subtitle}\n            </p>\n          )}\n          {bio && <div className=\"text-base text-foreground/80 leading-relaxed pt-2\">{bio}</div>}\n          {actions && <div className=\"pt-2 flex items-center gap-3\">{actions}</div>}\n          {socialLinks && <div className=\"pt-3\">{socialLinks}</div>}\n        </div>\n        {avatarUrl && (\n          <div className=\"relative flex-shrink-0\">\n            <img\n              src={avatarUrl}\n              alt={avatarAlt}\n              className=\"w-32 h-32 md:w-44 md:h-44 rounded-xl object-cover border-2 border-border shadow-lg\"\n              loading=\"eager\"\n            />\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "social-pill",
      "type": "registry:ui",
      "title": "SocialPill",
      "description": "Clean pill button with platform icon, handle, and follower count.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/social-pill.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SocialPillProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  platform: string;\n  count?: string | number;\n  icon?: React.ReactNode;\n}\n\nexport function SocialPill({\n  platform,\n  count,\n  icon,\n  className,\n  children,\n  target = \"_blank\",\n  rel = \"noopener noreferrer\",\n  ...props\n}: SocialPillProps) {\n  return (\n    <a\n      target={target}\n      rel={rel}\n      className={cn(\n        \"inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium border border-border bg-card text-foreground hover:bg-muted hover:border-foreground/30 transition-all cursor-pointer shadow-2xs\",\n        className\n      )}\n      {...props}\n    >\n      {icon && <span className=\"opacity-80\">{icon}</span>}\n      <span className=\"capitalize\">{platform}</span>\n      {count && <span className=\"text-muted-foreground text-[11px]\">({count})</span>}\n      {children}\n    </a>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "course-card",
      "type": "registry:ui",
      "title": "CourseCard",
      "description": "Editorial course and project card with badges, tags, and CTA.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/course-card.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface CourseCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  title: string;\n  description: string;\n  href: string;\n  badge?: string;\n  tags?: string[];\n  ctaText?: string;\n}\n\nexport function CourseCard({\n  title,\n  description,\n  href,\n  badge,\n  tags = [],\n  ctaText = \"View details →\",\n  className,\n  ...props\n}: CourseCardProps) {\n  return (\n    <div\n      className={cn(\n        \"group relative rounded-xl border border-border bg-card p-6 shadow-xs hover:shadow-md hover:border-primary/40 transition-all duration-200 flex flex-col justify-between my-4\",\n        className\n      )}\n      {...props}\n    >\n      <div>\n        <div className=\"flex items-start justify-between gap-3 mb-2\">\n          <h3 className=\"font-heading text-xl font-bold tracking-tight text-foreground group-hover:text-primary transition-colors\">\n            <a href={href}>\n              <span className=\"absolute inset-0\" aria-hidden=\"true\" />\n              {title}\n            </a>\n          </h3>\n          {badge && (\n            <span className=\"relative z-10 px-2 py-0.5 rounded-full text-xs font-semibold bg-primary/10 text-primary border border-primary/20\">\n              {badge}\n            </span>\n          )}\n        </div>\n        <p className=\"text-sm text-muted-foreground leading-relaxed mb-4\">\n          {description}\n        </p>\n      </div>\n\n      <div>\n        {tags.length > 0 && (\n          <div className=\"flex flex-wrap gap-1.5 mb-5 relative z-10\">\n            {tags.map((t) => (\n              <span\n                key={t}\n                className=\"px-2 py-0.5 rounded text-[11px] font-mono bg-muted text-muted-foreground border border-border\"\n              >\n                {t}\n              </span>\n            ))}\n          </div>\n        )}\n\n        <div className=\"flex items-center justify-end pt-3 border-t border-border/70 relative z-10\">\n          <span className=\"text-sm font-semibold text-primary group-hover:translate-x-0.5 transition-transform inline-flex items-center gap-1\">\n            {ctaText}\n          </span>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "stat-card",
      "type": "registry:ui",
      "title": "StatCard",
      "description": "Large key metric display card with optional trend indicator.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/stat-card.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type StatCardAccent =\n  | \"red\"\n  | \"rose\"\n  | \"green\"\n  | \"emerald\"\n  | \"blue\"\n  | \"amber\"\n  | \"violet\"\n  | \"pink\"\n  | \"cyan\";\n\nconst ACCENT_STYLES: Record<StatCardAccent, string> = {\n  green: \"text-emerald-600 dark:text-emerald-400\",\n  emerald: \"text-emerald-600 dark:text-emerald-400\",\n  red: \"text-rose-600 dark:text-rose-400\",\n  rose: \"text-rose-600 dark:text-rose-400\",\n  amber: \"text-amber-600 dark:text-amber-400\",\n  blue: \"text-sky-600 dark:text-sky-400\",\n  violet: \"text-purple-600 dark:text-purple-400\",\n  pink: \"text-pink-600 dark:text-pink-400\",\n  cyan: \"text-cyan-600 dark:text-cyan-400\",\n};\n\nexport interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: React.ReactNode;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  trend?: React.ReactNode;\n  accent?: StatCardAccent;\n}\n\nexport function StatCard({\n  value,\n  label,\n  description,\n  trend,\n  accent,\n  className,\n  ...props\n}: StatCardProps) {\n  return (\n    <div\n      className={cn(\n        \"rounded-xl border border-border bg-card p-6 shadow-xs flex flex-col justify-between my-3\",\n        className\n      )}\n      {...props}\n    >\n      <div>\n        <div\n          className={cn(\n            \"font-heading text-3xl md:text-4xl font-extrabold text-foreground tracking-tight tabular-nums\",\n            accent && ACCENT_STYLES[accent]\n          )}\n        >\n          {value}\n        </div>\n        <div className=\"font-sans text-sm font-semibold text-muted-foreground uppercase tracking-wider mt-1\">\n          {label}\n        </div>\n      </div>\n      {(description || trend) && (\n        <div className=\"mt-4 pt-3 border-t border-border flex items-center justify-between text-xs text-muted-foreground\">\n          {description && <div>{description}</div>}\n          {trend && <div className=\"font-mono text-emerald-500 font-medium\">{trend}</div>}\n        </div>\n      )}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "empty-state",
      "type": "registry:ui",
      "title": "EmptyState",
      "description": "Dashed container for empty content and call-to-actions.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/empty-state.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: React.ReactNode;\n  title: string;\n  description?: string;\n}\n\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  children,\n  className,\n  ...props\n}: EmptyStateProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col items-center justify-center p-8 text-center rounded-xl border border-dashed border-border bg-card/50 my-4\",\n        className\n      )}\n      {...props}\n    >\n      {icon && (\n        <div className=\"w-12 h-12 rounded-lg bg-muted flex items-center justify-center text-muted-foreground mb-3\">\n          {icon}\n        </div>\n      )}\n      <h4 className=\"font-heading font-semibold text-lg text-foreground mb-1\">\n        {title}\n      </h4>\n      {description && (\n        <p className=\"text-sm text-muted-foreground max-w-sm mb-4\">\n          {description}\n        </p>\n      )}\n      {children}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "footer",
      "type": "registry:ui",
      "title": "Footer",
      "description": "Editorial 4-column directory footer with category hints, highlights, disclaimer, and social pills.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/footer.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface FooterLink {\n  label: string;\n  href: string;\n  hint?: string;\n  external?: boolean;\n  icon?: React.ReactNode;\n  isRss?: boolean;\n  isHighlight?: boolean;\n}\n\nexport interface FooterColumn {\n  heading: string;\n  links: FooterLink[];\n}\n\nexport interface FooterProps extends React.HTMLAttributes<HTMLElement> {\n  columns?: FooterColumn[];\n  disclaimer?: React.ReactNode;\n  copyright?: string;\n  socialPills?: React.ReactNode;\n}\n\nconst defaultColumns: FooterColumn[] = [\n  {\n    heading: \"Design System\",\n    links: [\n      { label: \"Overview\", href: \"/\" },\n      { label: \"Component Catalog\", href: \"/components\" },\n      { label: \"Design Foundations\", href: \"/foundations\" },\n      { label: \"Color Tokens\", href: \"/foundations#colors\" },\n      { label: \"Typography Scale\", href: \"/foundations#typography\" },\n      { label: \"Spacing & Hairlines\", href: \"/foundations#spacing\" },\n      { label: \"Zero-CSS Invariants\", href: \"/foundations#invariants\" },\n    ],\n  },\n  {\n    heading: \"Components\",\n    links: [\n      { label: \"Developer & Telemetry\", href: \"/components#ping-status\" },\n      { label: \"Core UI & Actions\", href: \"/components#buttons\" },\n      { label: \"Forms & Inputs\", href: \"/components#input\" },\n      { label: \"Feedback & Overlays\", href: \"/components#alert\" },\n      { label: \"Data Display\", href: \"/components#table\" },\n      { label: \"Navigation Primitives\", href: \"/components#tabs\" },\n      { label: \"Explainer Kit\", href: \"/components#explorables\" },\n    ],\n  },\n  {\n    heading: \"For AI Agents & LLMs\",\n    links: [\n      { label: \"Agents Protocol & Prompt\", href: \"/agents\", isHighlight: true },\n      { label: \"llms.txt (Standard)\", href: \"/llms.txt\", hint: \"Manifest\", external: true },\n      { label: \"llms-full.txt\", href: \"/llms-full.txt\", hint: \"Full APIs\", external: true },\n      { label: \"shadcn Registry JSON\", href: \"/r/registry.json\", hint: \"Schema\", external: true },\n      { label: \"AGENTS.md\", href: \"https://raw.githubusercontent.com/arpitbbhayani/aui/main/AGENTS.md\", hint: \"Rules\", external: true },\n      { label: \"robots.txt\", href: \"/robots.txt\", external: true },\n    ],\n  },\n  {\n    heading: \"Installation & Code\",\n    links: [\n      { label: \"GitHub Repository\", href: \"https://github.com/arpitbbhayani/aui\", external: true, hint: \"Source\" },\n      { label: \"npm Package\", href: \"https://www.npmjs.com/package/array-ui\", external: true, hint: \"v0.1.4\" },\n      { label: \"shadcn Registry Guide\", href: \"/agents#shadcn\" },\n      { label: \"React & Next.js Setup\", href: \"/#overview\" },\n      { label: \"Astro Integration\", href: \"/#overview\" },\n    ],\n  },\n];\n\nfunction RssIcon() {\n  return (\n    <svg className=\"w-3.5 h-3.5 inline mr-1 text-[#ff8c00]\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <path d=\"M4 11a9 9 0 0 1 9 9\" />\n      <path d=\"M4 4a16 16 0 0 1 16 16\" />\n      <circle cx=\"5\" cy=\"19\" r=\"1\" />\n    </svg>\n  );\n}\n\nfunction ExternalIcon() {\n  return (\n    <svg className=\"w-3 h-3 inline ml-1 opacity-60\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n      <line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\" />\n      <polyline points=\"7 7 17 7 17 17\" />\n    </svg>\n  );\n}\n\nexport function Footer({\n  columns = defaultColumns,\n  disclaimer = \"Array UI is an editorial design system for personal sites, developer SaaS, and technical documentation. Built with zero custom CSS, machined telemetry, and an agent-first component architecture.\",\n  copyright = `© ${new Date().getFullYear()} Array UI. Built for systems engineers and autonomous coding agents. MIT Licensed.`,\n  socialPills,\n  className,\n  children,\n  ...props\n}: FooterProps) {\n  return (\n    <footer\n      className={cn(\n        \"w-full border-t border-border bg-background py-14 px-4 sm:px-6 lg:px-8 mt-16 font-sans\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"max-w-6xl mx-auto\">\n        {columns && columns.length > 0 && (\n          <div className=\"grid grid-cols-2 md:grid-cols-4 gap-8 mb-10\">\n            {columns.map((col, idx) => (\n              <div key={idx} className=\"space-y-3\">\n                <h4 className=\"font-mono font-bold text-xs tracking-wider uppercase text-muted-foreground/75 mb-3.5\">\n                  {col.heading}\n                </h4>\n                <ul className=\"space-y-2 text-sm\">\n                  {col.links.map((link, lIdx) => (\n                    <li key={lIdx}>\n                      <a\n                        href={link.href}\n                        target={link.external ? \"_blank\" : undefined}\n                        rel={link.external ? \"noopener noreferrer\" : undefined}\n                        className={cn(\n                          \"group inline-flex items-center gap-1.5 text-sm text-foreground/85 hover:text-primary transition-all duration-150 hover:translate-x-0.5 py-0.5\",\n                          link.isHighlight && \"text-primary font-semibold hover:underline\",\n                          link.isRss && \"text-[#ff8c00] hover:text-[#ffa033] font-medium\"\n                        )}\n                      >\n                        {link.isRss && <RssIcon />}\n                        {link.icon}\n                        <span>{link.label}</span>\n                        {link.hint && (\n                          <span className=\"text-[11px] font-mono text-muted-foreground/60 transition-colors group-hover:text-muted-foreground\">\n                            ({link.hint})\n                          </span>\n                        )}\n                        {link.external && <ExternalIcon />}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n        )}\n\n        {children}\n\n        {disclaimer && (\n          <div className=\"border-t border-border/70 py-4 text-xs text-muted-foreground/80 leading-relaxed font-sans\">\n            {disclaimer}\n          </div>\n        )}\n\n        <div className=\"border-t border-border/70 pt-5 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-muted-foreground font-sans\">\n          <div>{copyright}</div>\n          {socialPills && (\n            <div className=\"flex flex-wrap items-center gap-2\">{socialPills}</div>\n          )}\n        </div>\n      </div>\n    </footer>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "page-shell",
      "type": "registry:ui",
      "title": "Page Shell",
      "description": "The holistic frame every page sits in: background, navbar slot, centered max-w-6xl main payload, and footer.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/page-shell.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PageShellProps extends React.HTMLAttributes<HTMLDivElement> {\n  navbar?: React.ReactNode;\n  footer?: React.ReactNode;\n  maxWidth?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"6xl\" | \"full\";\n  children: React.ReactNode;\n}\n\nconst maxWidthMap = {\n  sm: \"max-w-2xl\",\n  md: \"max-w-4xl\",\n  lg: \"max-w-5xl\",\n  xl: \"max-w-6xl\",\n  \"2xl\": \"max-w-7xl\",\n  \"6xl\": \"max-w-6xl\",\n  full: \"max-w-full\",\n};\n\nexport function PageShell({\n  navbar,\n  footer,\n  maxWidth = \"6xl\",\n  children,\n  className,\n  ...props\n}: PageShellProps) {\n  return (\n    <div\n      className={cn(\n        \"min-h-screen flex flex-col bg-background text-foreground font-sans antialiased selection:bg-primary/20 selection:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {navbar}\n      <main\n        className={cn(\n          \"flex-1 w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12\",\n          maxWidthMap[maxWidth]\n        )}\n      >\n        {children}\n      </main>\n      {footer}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "navbar",
      "type": "registry:ui",
      "title": "Navbar",
      "description": "Responsive sticky header with brand, navigation links, status indicators, and right action buttons.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/navbar.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface NavLinkItem {\n  label: string;\n  href: string;\n  active?: boolean;\n  external?: boolean;\n  badge?: string;\n}\n\nexport interface NavbarProps extends React.HTMLAttributes<HTMLElement> {\n  brandName?: string;\n  brandHref?: string;\n  logo?: React.ReactNode;\n  brand?: {\n    name?: string;\n    href?: string;\n    logo?: React.ReactNode;\n  };\n  links?: NavLinkItem[];\n  actions?: React.ReactNode;\n  rightActions?: React.ReactNode;\n  statusIndicator?: React.ReactNode;\n  currentPath?: string;\n}\n\nexport function Navbar({\n  brandName,\n  brandHref,\n  logo,\n  brand,\n  links = [],\n  actions,\n  rightActions,\n  statusIndicator,\n  currentPath,\n  className,\n  ...props\n}: NavbarProps) {\n  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);\n  const [scrolled, setScrolled] = React.useState(false);\n\n  React.useEffect(() => {\n    const handleScroll = () => {\n      setScrolled(window.scrollY > 12);\n    };\n    window.addEventListener(\"scroll\", handleScroll, { passive: true });\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, []);\n\n  const effectiveBrandName = brandName || brand?.name || \"Array UI\";\n  const effectiveBrandHref = brandHref || brand?.href || \"/\";\n  const effectiveLogo = logo || brand?.logo;\n  const effectiveActions = actions || rightActions;\n\n  return (\n    <header\n      className={cn(\n        \"sticky top-0 z-50 w-full transition-all duration-200 border-b\",\n        scrolled\n          ? \"border-border bg-background/85 backdrop-blur-md shadow-2xs\"\n          : \"border-border/60 bg-background/60 backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between gap-4 font-sans\">\n        {/* Brand */}\n        <div className=\"flex items-center gap-3\">\n          <a\n            href={effectiveBrandHref}\n            className=\"flex items-center gap-2 font-heading font-bold text-base tracking-tight text-foreground hover:opacity-90 transition-opacity\"\n          >\n            {effectiveLogo}\n            <span>{effectiveBrandName}</span>\n          </a>\n          {statusIndicator && (\n            <div className=\"hidden sm:inline-flex items-center pl-2 border-l border-border/80\">\n              {statusIndicator}\n            </div>\n          )}\n        </div>\n\n        {/* Desktop Links */}\n        {links && links.length > 0 && (\n          <nav className=\"hidden md:flex items-center gap-6 text-sm\" aria-label=\"Main Navigation\">\n            {links.map((link, idx) => {\n              const isActive = link.active ?? (currentPath ? currentPath === link.href : false);\n              return (\n                <a\n                  key={idx}\n                  href={link.href}\n                  target={link.external ? \"_blank\" : undefined}\n                  rel={link.external ? \"noopener noreferrer\" : undefined}\n                  className={cn(\n                    \"transition-colors hover:text-foreground py-1 text-sm font-medium\",\n                    isActive\n                      ? \"text-primary font-semibold\"\n                      : \"text-muted-foreground\"\n                  )}\n                >\n                  <span>{link.label}</span>\n                  {link.badge && (\n                    <span className=\"ml-1.5 text-[10px] font-mono px-1.5 py-0.5 rounded border border-border bg-muted/60 text-muted-foreground\">\n                      {link.badge}\n                    </span>\n                  )}\n                </a>\n              );\n            })}\n          </nav>\n        )}\n\n        {/* Right Actions & Mobile Toggle */}\n        <div className=\"flex items-center gap-2.5\">\n          {effectiveActions && (\n            <div className=\"flex items-center gap-2\">{effectiveActions}</div>\n          )}\n\n          {/* Mobile hamburger button */}\n          {links && links.length > 0 && (\n            <button\n              type=\"button\"\n              className=\"md:hidden p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors border border-border\"\n              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}\n              aria-label=\"Toggle Navigation Menu\"\n              aria-expanded={mobileMenuOpen}\n            >\n              <svg\n                className=\"w-4 h-4\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                stroke=\"currentColor\"\n                strokeWidth={2}\n              >\n                {mobileMenuOpen ? (\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n                ) : (\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M4 6h16M4 12h16M4 18h16\" />\n                )}\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Mobile Drawer */}\n      {mobileMenuOpen && links && links.length > 0 && (\n        <div className=\"md:hidden border-t border-border bg-background px-4 py-4 space-y-2\">\n          {statusIndicator && <div className=\"pb-2 border-b border-border/60\">{statusIndicator}</div>}\n          <nav className=\"flex flex-col space-y-1\">\n            {links.map((link, idx) => (\n              <a\n                key={idx}\n                href={link.href}\n                onClick={() => setMobileMenuOpen(false)}\n                className={cn(\n                  \"px-3 py-2 rounded-md text-sm transition-colors\",\n                  link.active\n                    ? \"bg-primary/10 text-primary font-semibold\"\n                    : \"text-muted-foreground hover:text-foreground hover:bg-muted/40\"\n                )}\n              >\n                {link.label}\n              </a>\n            ))}\n          </nav>\n        </div>\n      )}\n    </header>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "modal",
      "type": "registry:ui",
      "title": "Modal",
      "description": "Accessible dialog modal with backdrop blur, focus handling, and escape key dismissal.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/modal.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ModalProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  isOpen?: boolean;\n  open?: boolean;\n  onClose?: () => void;\n  title?: React.ReactNode;\n  footer?: React.ReactNode;\n  closeOnBackdropClick?: boolean;\n}\n\nexport function Modal({\n  isOpen,\n  open,\n  onClose,\n  title,\n  children,\n  footer,\n  className,\n  closeOnBackdropClick = true,\n  ...props\n}: ModalProps) {\n  const isVisible = open !== undefined ? open : Boolean(isOpen);\n  const [mounted, setMounted] = React.useState(false);\n  const modalRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  React.useEffect(() => {\n    if (!isVisible) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        onClose?.();\n      }\n    };\n    document.addEventListener(\"keydown\", handleKeyDown);\n    const originalOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      document.body.style.overflow = originalOverflow;\n    };\n  }, [isVisible, onClose]);\n\n  if (!isVisible || !mounted) return null;\n\n  const modalNode = (\n    <div\n      className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] flex items-center justify-center p-4 animate-in fade-in-0\"\n      onClick={(e) => {\n        if (closeOnBackdropClick && e.target === e.currentTarget) {\n          onClose?.();\n        }\n      }}\n      role=\"dialog\"\n      aria-modal=\"true\"\n    >\n      <div\n        ref={modalRef}\n        className={cn(\n          \"w-full max-w-md bg-card text-card-foreground border border-border rounded-xl shadow-2xl overflow-hidden animate-in zoom-in-95\",\n          className\n        )}\n        tabIndex={-1}\n        {...props}\n      >\n        {(title || onClose) && (\n          <div className=\"flex items-center justify-between px-5 py-4 border-b border-border\">\n            {title && (\n              <h3 className=\"font-heading font-semibold text-lg text-foreground\">\n                {title}\n              </h3>\n            )}\n            {onClose && (\n              <button\n                type=\"button\"\n                className=\"w-7 h-7 inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors cursor-pointer ml-auto\"\n                onClick={onClose}\n                aria-label=\"Close dialog\"\n              >\n                ✕\n              </button>\n            )}\n          </div>\n        )}\n\n        <div className=\"p-5 text-sm\">{children}</div>\n\n        {footer && (\n          <div className=\"flex items-center justify-end gap-2 px-5 py-3 bg-muted/30 border-t border-border\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return typeof document !== \"undefined\"\n    ? createPortal(modalNode, document.body)\n    : null;\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "video-embed",
      "type": "registry:ui",
      "title": "VideoEmbed",
      "description": "Responsive 16:9 aspect ratio video embed wrapper with border hairline styling.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/video-embed.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface VideoEmbedProps extends React.HTMLAttributes<HTMLDivElement> {\n  src?: string;\n  title?: string;\n  aspectRatio?: \"16/9\" | \"4/3\" | \"1/1\" | string;\n  allowFullScreen?: boolean;\n}\n\nexport function VideoEmbed({\n  src,\n  title = \"Video player\",\n  aspectRatio = \"16 / 9\",\n  allowFullScreen = true,\n  className,\n  children,\n  style,\n  ...props\n}: VideoEmbedProps) {\n  return (\n    <div\n      className={cn(\n        \"relative w-full rounded-xl overflow-hidden border border-border bg-card my-5\",\n        className\n      )}\n      style={{ aspectRatio, ...style }}\n      {...props}\n    >\n      {src ? (\n        <iframe\n          src={src}\n          title={title}\n          className=\"absolute inset-0 w-full h-full border-0\"\n          allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n          allowFullScreen={allowFullScreen}\n        />\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "canvas",
      "type": "registry:ui",
      "title": "Canvas",
      "description": "Engineering diagram frame with dotted coordinate grid and hairline border.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/canvas.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface CanvasProps extends React.HTMLAttributes<HTMLDivElement> {\n  variant?: \"plain\" | \"grid\" | \"ruled\";\n  frame?: boolean;\n  title?: string;\n  badge?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nexport function Canvas({\n  variant = \"grid\",\n  frame = true,\n  title,\n  badge,\n  footer,\n  children,\n  className,\n  ...props\n}: CanvasProps) {\n  return (\n    <div\n      className={cn(\n        \"relative rounded-lg border border-border bg-card text-card-foreground overflow-hidden shadow-xs\",\n        variant === \"grid\" && \"bg-[radial-gradient(var(--border)_1px,transparent_1px)] [background-size:20px_20px]\",\n        variant === \"ruled\" && \"bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] [background-size:24px_24px]\",\n        className\n      )}\n      {...props}\n    >\n      {(title || badge) && (\n        <div className=\"flex items-center justify-between px-4 py-2.5 border-b border-border bg-muted/30 font-mono text-xs\">\n          <div className=\"flex items-center gap-2 font-medium tracking-tight text-foreground\">\n            <span className=\"w-1.5 h-1.5 rounded-full bg-primary\" />\n            <span>{title}</span>\n          </div>\n          {badge && <div>{badge}</div>}\n        </div>\n      )}\n      <div className=\"p-5\">{children}</div>\n      {footer && (\n        <div className=\"flex items-center justify-between px-4 py-2 border-t border-border bg-muted/20 font-mono text-xs text-muted-foreground\">\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "api-endpoint",
      "type": "registry:ui",
      "title": "ApiEndpoint",
      "description": "Machined HTTP/gRPC API specification block with method pill, copyable paths, parameters, and response tabs.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/api-endpoint.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ApiParam {\n  name: string;\n  type: string;\n  required?: boolean;\n  description: string;\n}\n\nexport interface ApiResponseTab {\n  status: number | string;\n  label?: string;\n  body: string;\n}\n\nexport interface ApiEndpointProps extends React.HTMLAttributes<HTMLDivElement> {\n  method: \"GET\" | \"POST\" | \"PUT\" | \"PATCH\" | \"DELETE\" | string;\n  path: string;\n  description?: string;\n  badge?: React.ReactNode;\n  curl?: string;\n  params?: ApiParam[];\n  responses?: ApiResponseTab[];\n}\n\nexport function ApiEndpoint({\n  method,\n  path,\n  description,\n  badge,\n  curl,\n  params,\n  responses,\n  className,\n  children,\n  ...props\n}: ApiEndpointProps) {\n  const [copiedPath, setCopiedPath] = React.useState(false);\n  const [copiedCurl, setCopiedCurl] = React.useState(false);\n  const [activeTab, setActiveTab] = React.useState(0);\n\n  const methodUpper = method.toUpperCase();\n  const getMethodStyle = () => {\n    switch (methodUpper) {\n      case \"GET\":\n        return \"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20\";\n      case \"POST\":\n        return \"bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20\";\n      case \"PUT\":\n        return \"bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20\";\n      case \"PATCH\":\n        return \"bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20\";\n      case \"DELETE\":\n        return \"bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-500/20\";\n      default:\n        return \"bg-muted text-muted-foreground border-border\";\n    }\n  };\n\n  const handleCopyPath = () => {\n    navigator.clipboard.writeText(path);\n    setCopiedPath(true);\n    setTimeout(() => setCopiedPath(false), 1600);\n  };\n\n  const handleCopyCurl = () => {\n    const curlCmd = curl || `curl -X ${methodUpper} \"https://api.example.com${path}\"`;\n    navigator.clipboard.writeText(curlCmd);\n    setCopiedCurl(true);\n    setTimeout(() => setCopiedCurl(false), 1600);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card text-card-foreground overflow-hidden my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-3 px-4 py-3 bg-muted/30 border-b border-border\">\n        <div className=\"flex items-center gap-2.5 flex-wrap min-w-0\">\n          <span\n            className={cn(\n              \"font-mono text-[11px] font-medium tracking-wider px-2 py-0.5 rounded border uppercase\",\n              getMethodStyle()\n            )}\n          >\n            {methodUpper}\n          </span>\n          <span className=\"font-mono text-sm font-medium text-foreground break-all\">\n            {path}\n          </span>\n          {badge && <span>{badge}</span>}\n        </div>\n        <div className=\"flex items-center gap-1.5\">\n          <button\n            type=\"button\"\n            onClick={handleCopyPath}\n            className=\"inline-flex items-center gap-1.5 px-2 py-1 rounded border border-border bg-card hover:bg-muted font-mono text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer\"\n          >\n            {copiedPath ? (\n              <span className=\"text-emerald-500 font-semibold\">Copied</span>\n            ) : (\n              <span>Path</span>\n            )}\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleCopyCurl}\n            className=\"inline-flex items-center gap-1.5 px-2 py-1 rounded border border-border bg-card hover:bg-muted font-mono text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer\"\n          >\n            {copiedCurl ? (\n              <span className=\"text-emerald-500 font-semibold\">Copied</span>\n            ) : (\n              <span>cURL</span>\n            )}\n          </button>\n        </div>\n      </div>\n\n      <div className=\"p-4 space-y-4\">\n        {description && (\n          <p className=\"text-sm text-muted-foreground leading-relaxed\">\n            {description}\n          </p>\n        )}\n\n        {params && params.length > 0 && (\n          <div>\n            <div className=\"font-mono text-xs uppercase tracking-wider font-medium text-muted-foreground mb-2\">\n              Parameters\n            </div>\n            <div className=\"rounded border border-border overflow-x-auto\">\n              <table className=\"w-full text-left text-xs border-collapse\">\n                <thead className=\"bg-muted/40 font-mono text-muted-foreground uppercase border-b border-border\">\n                  <tr>\n                    <th className=\"px-3 py-2\">Option</th>\n                    <th className=\"px-3 py-2\">Type</th>\n                    <th className=\"px-3 py-2\">Status</th>\n                    <th className=\"px-3 py-2\">Description</th>\n                  </tr>\n                </thead>\n                <tbody className=\"divide-y divide-border\">\n                  {params.map((p, idx) => (\n                    <tr key={idx} className=\"hover:bg-muted/30\">\n                      <td className=\"px-3 py-2 font-mono font-medium text-foreground\">\n                        {p.name}\n                      </td>\n                      <td className=\"px-3 py-2 font-mono text-muted-foreground\">\n                        {p.type}\n                      </td>\n                      <td className=\"px-3 py-2\">\n                        {p.required ? (\n                          <span className=\"font-mono text-[10px] uppercase font-medium text-primary bg-primary/10 px-1.5 py-0.5 rounded\">\n                            req\n                          </span>\n                        ) : (\n                          <span className=\"font-mono text-[10px] text-muted-foreground bg-muted px-1.5 py-0.5 rounded\">\n                            opt\n                          </span>\n                        )}\n                      </td>\n                      <td className=\"px-3 py-2 text-muted-foreground\">\n                        {p.description}\n                      </td>\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n            </div>\n          </div>\n        )}\n\n        {responses && responses.length > 0 && (\n          <div>\n            <div className=\"font-mono text-xs uppercase tracking-wider font-medium text-muted-foreground mb-2\">\n              Responses\n            </div>\n            <div className=\"flex border-b border-border gap-1 mb-2\">\n              {responses.map((res, i) => (\n                <button\n                  key={i}\n                  type=\"button\"\n                  onClick={() => setActiveTab(i)}\n                  className={cn(\n                    \"px-3 py-1 font-mono text-xs border-b-2 font-medium cursor-pointer transition-colors\",\n                    activeTab === i\n                      ? \"border-primary text-foreground font-semibold\"\n                      : \"border-transparent text-muted-foreground hover:text-foreground\"\n                  )}\n                >\n                  {res.status} {res.label ? `· ${res.label}` : \"\"}\n                </button>\n              ))}\n            </div>\n            <pre className=\"p-3 bg-muted/50 rounded border border-border font-mono text-xs text-foreground overflow-x-auto\">\n              <code>{responses[activeTab]?.body}</code>\n            </pre>\n          </div>\n        )}\n\n        {children}\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "doc-stepper",
      "type": "registry:ui",
      "title": "DocStepper",
      "description": "Connected numbered step walkthrough for tutorials, runbooks, and installation guides.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/doc-stepper.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface DocStepItem {\n  title: string;\n  description?: string;\n  status?: \"completed\" | \"active\" | \"pending\";\n  content?: React.ReactNode;\n}\n\nexport interface DocStepperProps extends React.HTMLAttributes<HTMLDivElement> {\n  steps: DocStepItem[];\n  activeStep?: number;\n}\n\nexport function DocStepper({\n  steps,\n  activeStep,\n  className,\n  ...props\n}: DocStepperProps) {\n  return (\n    <div className={cn(\"space-y-6 my-6\", className)} {...props}>\n      {steps.map((step, idx) => {\n        let resolvedStatus = step.status || \"pending\";\n        if (typeof activeStep === \"number\") {\n          if (idx < activeStep) resolvedStatus = \"completed\";\n          else if (idx === activeStep) resolvedStatus = \"active\";\n          else resolvedStatus = \"pending\";\n        }\n\n        const isCompleted = resolvedStatus === \"completed\";\n        const isActive = resolvedStatus === \"active\";\n\n        return (\n          <div key={idx} className=\"flex gap-4 relative\">\n            {idx < steps.length - 1 && (\n              <div\n                className={cn(\n                  \"absolute left-[13px] top-[26px] bottom-[-24px] w-0.5 transition-colors\",\n                  isCompleted ? \"bg-emerald-500\" : \"bg-border\"\n                )}\n              />\n            )}\n\n            <div className=\"flex flex-col items-center flex-shrink-0 z-10\">\n              <div\n                className={cn(\n                  \"w-7 h-7 rounded-full flex items-center justify-center font-mono text-xs font-medium border transition-colors\",\n                  isCompleted && \"bg-card border-emerald-500 text-emerald-500\",\n                  isActive && \"bg-primary border-primary text-primary-foreground shadow-xs ring-4 ring-primary/20\",\n                  !isCompleted && !isActive && \"bg-card border-border text-muted-foreground\"\n                )}\n              >\n                {isCompleted ? \"✓\" : idx + 1}\n              </div>\n            </div>\n\n            <div className=\"flex-1 min-w-0\">\n              <h4 className=\"font-heading font-semibold text-foreground text-base leading-[28px] m-0 p-0\">\n                {step.title}\n              </h4>\n              {step.description && (\n                <p className=\"text-sm text-muted-foreground mt-1 mb-0 leading-relaxed\">\n                  {step.description}\n                </p>\n              )}\n              {step.content && <div className=\"mt-3\">{step.content}</div>}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "param-table",
      "type": "registry:ui",
      "title": "ParamTable",
      "description": "Dense configuration options and parameter reference table with types, required badges, and defaults.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/param-table.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ParamItem {\n  name: string;\n  type: string;\n  required?: boolean;\n  default?: string;\n  description: React.ReactNode;\n  deprecated?: boolean;\n}\n\nexport interface ParamTableProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ParamItem[];\n}\n\nexport function ParamTable({ items, className, ...props }: ParamTableProps) {\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card overflow-x-auto my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <table className=\"w-full text-left text-sm border-collapse\">\n        <thead className=\"bg-muted/40 font-mono text-xs uppercase text-muted-foreground border-b border-border\">\n          <tr>\n            <th className=\"px-4 py-2.5\">Option</th>\n            <th className=\"px-4 py-2.5\">Type</th>\n            <th className=\"px-4 py-2.5\">Default</th>\n            <th className=\"px-4 py-2.5\">Description</th>\n          </tr>\n        </thead>\n        <tbody className=\"divide-y divide-border\">\n          {items.map((item, idx) => (\n            <tr key={idx} className=\"hover:bg-muted/30\">\n              <td className=\"px-4 py-3 align-top\">\n                <div className=\"flex items-center gap-1.5 flex-wrap\">\n                  <span\n                    className={cn(\n                      \"font-mono text-xs font-medium px-1.5 py-0.5 rounded bg-muted text-foreground\",\n                      item.deprecated && \"line-through opacity-60\"\n                    )}\n                  >\n                    {item.name}\n                  </span>\n                  {item.required ? (\n                    <span className=\"font-mono text-[10px] uppercase font-medium text-primary bg-primary/10 px-1 rounded\">\n                      req\n                    </span>\n                  ) : (\n                    <span className=\"font-mono text-[10px] text-muted-foreground bg-muted px-1 rounded\">\n                      opt\n                    </span>\n                  )}\n                </div>\n              </td>\n              <td className=\"px-4 py-3 align-top font-mono text-xs text-blue-500 dark:text-blue-400\">\n                {item.type}\n              </td>\n              <td className=\"px-4 py-3 align-top font-mono text-xs text-muted-foreground\">\n                {item.default ?? \"—\"}\n              </td>\n              <td className=\"px-4 py-3 align-top text-xs text-muted-foreground leading-relaxed\">\n                {item.description}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "feature-matrix",
      "type": "registry:ui",
      "title": "FeatureMatrix",
      "description": "Dense matrix comparison table comparing engines, editions, or versions with status indicators.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/feature-matrix.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface FeatureMatrixColumn {\n  key: string;\n  label: string;\n}\n\nexport interface FeatureMatrixRow {\n  category?: string;\n  name?: string;\n  values?: Record<string, boolean | \"partial\" | string | React.ReactNode>;\n}\n\nexport interface FeatureMatrixProps extends React.HTMLAttributes<HTMLDivElement> {\n  columns: FeatureMatrixColumn[];\n  rows: FeatureMatrixRow[];\n}\n\nexport function FeatureMatrix({\n  columns,\n  rows,\n  className,\n  ...props\n}: FeatureMatrixProps) {\n  const renderCell = (val: boolean | \"partial\" | string | React.ReactNode) => {\n    if (val === true) {\n      return <span className=\"text-emerald-500 font-bold text-base\">✓</span>;\n    }\n    if (val === false) {\n      return <span className=\"text-muted-foreground/40 font-semibold text-sm\">✕</span>;\n    }\n    if (val === \"partial\") {\n      return (\n        <span className=\"font-mono text-[10px] font-medium text-amber-500 bg-amber-500/10 px-1.5 py-0.5 rounded\">\n          Partial\n        </span>\n      );\n    }\n    return <span>{val}</span>;\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card overflow-x-auto my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <table className=\"w-full text-center text-sm border-collapse\">\n        <thead className=\"bg-muted/40 font-heading font-semibold text-xs border-b border-border\">\n          <tr>\n            <th className=\"px-4 py-3 text-left\">Feature</th>\n            {columns.map((col) => (\n              <th key={col.key} className=\"px-4 py-3 border-l border-border\">\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody className=\"divide-y divide-border\">\n          {rows.map((row, idx) => {\n            if (row.category) {\n              return (\n                <tr key={idx} className=\"bg-muted/20\">\n                  <td\n                    colSpan={columns.length + 1}\n                    className=\"px-4 py-2 text-left font-mono text-xs uppercase font-medium text-muted-foreground tracking-wider\"\n                  >\n                    {row.category}\n                  </td>\n                </tr>\n              );\n            }\n\n            return (\n              <tr key={idx} className=\"hover:bg-muted/30\">\n                <td className=\"px-4 py-2.5 text-left font-medium text-foreground text-xs\">\n                  {row.name}\n                </td>\n                {columns.map((col) => (\n                  <td key={col.key} className=\"px-4 py-2.5 border-l border-border text-xs\">\n                    {renderCell(row.values ? row.values[col.key] : false)}\n                  </td>\n                ))}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "version-selector",
      "type": "registry:ui",
      "title": "VersionSelector",
      "description": "Compact documentation version switcher and runtime environment selector.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/version-selector.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface VersionOption {\n  label: string;\n  value: string;\n  badge?: string;\n}\n\nexport interface VersionSelectorProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  label?: string;\n  versions: VersionOption[];\n  value?: string;\n  defaultValue?: string;\n  onChange?: (val: string) => void;\n  name?: string;\n  disabled?: boolean;\n}\n\nexport function VersionSelector({\n  label = \"Version:\",\n  versions,\n  value: controlledValue,\n  defaultValue,\n  onChange,\n  name,\n  disabled = false,\n  className,\n  ...props\n}: VersionSelectorProps) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = React.useState<string>(\n    defaultValue ?? versions[0]?.value ?? \"\"\n  );\n  const selectedValue = isControlled ? controlledValue : uncontrolledValue;\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [highlightedIndex, setHighlightedIndex] = React.useState(0);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const listRef = React.useRef<HTMLUListElement>(null);\n\n  const safeVersions = React.useMemo(() => versions || [], [versions]);\n  const selectedOption = React.useMemo(\n    () => safeVersions.find((v) => v.value === selectedValue) || safeVersions[0],\n    [safeVersions, selectedValue]\n  );\n\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleClickOutside = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    if (!isOpen || !listRef.current) return;\n    const items = listRef.current.querySelectorAll<HTMLLIElement>(\"li\");\n    const activeItem = items[highlightedIndex];\n    if (activeItem) {\n      activeItem.scrollIntoView({ block: \"nearest\" });\n    }\n  }, [highlightedIndex, isOpen]);\n\n  React.useEffect(() => {\n    if (isOpen) {\n      const idx = safeVersions.findIndex((v) => v.value === selectedValue);\n      setHighlightedIndex(idx >= 0 ? idx : 0);\n    }\n  }, [isOpen, safeVersions, selectedValue]);\n\n  const handleSelect = (option: VersionOption) => {\n    if (!isControlled) {\n      setUncontrolledValue(option.value);\n    }\n    onChange?.(option.value);\n    setIsOpen(false);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (disabled) return;\n\n    if (!isOpen) {\n      if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n        e.preventDefault();\n        setIsOpen(true);\n      }\n      return;\n    }\n\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      setIsOpen(false);\n    } else if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setHighlightedIndex((prev) => (prev < safeVersions.length - 1 ? prev + 1 : prev));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0));\n    } else if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      if (safeVersions[highlightedIndex]) {\n        handleSelect(safeVersions[highlightedIndex]);\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\"inline-flex items-center gap-2 relative\", className)}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {label && (\n        <span className=\"font-mono text-xs uppercase tracking-wider text-muted-foreground select-none\">\n          {label}\n        </span>\n      )}\n      <div className=\"relative inline-block\">\n        {name && <input type=\"hidden\" name={name} value={selectedValue} />}\n        <button\n          type=\"button\"\n          className={cn(\n            \"inline-flex items-center gap-1.5 font-mono text-xs font-medium px-2.5 py-1.5 rounded border border-border bg-card text-foreground cursor-pointer transition-colors hover:bg-muted/60 focus:outline-none focus:ring-2 focus:ring-primary/40 select-none\",\n            isOpen && \"border-primary ring-2 ring-primary/40\",\n            disabled && \"opacity-50 cursor-not-allowed\"\n          )}\n          onClick={() => !disabled && setIsOpen((prev) => !prev)}\n          disabled={disabled}\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen}\n        >\n          <span>{selectedOption ? selectedOption.label : \"Select...\"}</span>\n          {selectedOption?.badge && (\n            <span className=\"inline-flex items-center text-[10px] font-bold uppercase tracking-wider px-1 py-0.5 rounded border border-border bg-muted text-muted-foreground leading-none\">\n              {selectedOption.badge}\n            </span>\n          )}\n          <svg\n            width=\"12\"\n            height=\"12\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            className={cn(\"shrink-0 text-muted-foreground transition-transform duration-150\", isOpen && \"rotate-180 text-foreground\")}\n            aria-hidden=\"true\"\n          >\n            <path d=\"m6 9 6 6 6-6\" />\n          </svg>\n        </button>\n\n        {isOpen && (\n          <div\n            className=\"absolute top-[calc(100%+4px)] left-0 min-w-full w-max z-50 bg-card border border-border rounded-md shadow-lg py-1 animate-in fade-in-0 zoom-in-95\"\n            role=\"dialog\"\n          >\n            <ul\n              ref={listRef}\n              className=\"list-none m-0 p-0 max-h-60 overflow-y-auto\"\n              role=\"listbox\"\n              tabIndex={-1}\n            >\n              {safeVersions.map((ver, idx) => {\n                const isSelected = ver.value === selectedValue;\n                const isHighlighted = idx === highlightedIndex;\n\n                return (\n                  <li\n                    key={ver.value}\n                    className={cn(\n                      \"flex items-center justify-between gap-3.5 px-2.5 py-1.5 font-mono text-xs cursor-pointer transition-colors text-foreground\",\n                      (isHighlighted || isSelected) && \"bg-muted/70 text-foreground\",\n                      isSelected && \"font-semibold\"\n                    )}\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    onClick={() => handleSelect(ver)}\n                    onMouseEnter={() => setHighlightedIndex(idx)}\n                  >\n                    <span>{ver.label}</span>\n                    <div className=\"inline-flex items-center gap-1.5\">\n                      {ver.badge && (\n                        <span className=\"inline-flex items-center text-[10px] font-bold uppercase tracking-wider px-1 py-0.5 rounded border border-border bg-muted text-muted-foreground leading-none\">\n                          {ver.badge}\n                        </span>\n                      )}\n                      {isSelected && (\n                        <svg\n                          width=\"12\"\n                          height=\"12\"\n                          viewBox=\"0 0 24 24\"\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"2.5\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                          className=\"text-primary shrink-0\"\n                          aria-hidden=\"true\"\n                        >\n                          <polyline points=\"20 6 9 17 4 12\" />\n                        </svg>\n                      )}\n                    </div>\n                  </li>\n                );\n              })}\n            </ul>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "memory-layout",
      "type": "registry:ui",
      "title": "MemoryLayout",
      "description": "Contiguous byte/memory layout visualizer with offsets, binary structs, and interactive field inspector.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/memory-layout.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MemorySegment {\n  name: string;\n  bytes: number;\n  offset?: string;\n  type?: string;\n  value?: string;\n  description?: string;\n  color?: \"crimson\" | \"emerald\" | \"amber\" | \"blue\" | \"violet\" | \"neutral\";\n}\n\nexport interface MemoryLayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  totalBytes?: number | string;\n  segments: MemorySegment[];\n}\n\nexport function MemoryLayout({\n  title = \"Memory Layout\",\n  totalBytes,\n  segments,\n  className,\n  ...props\n}: MemoryLayoutProps) {\n  const [selectedIndex, setSelectedIndex] = React.useState<number>(0);\n\n  const totalCalculated =\n    totalBytes ??\n    segments.reduce((acc, s) => acc + (typeof s.bytes === \"number\" ? s.bytes : 0), 0);\n\n  const activeSeg = segments[selectedIndex] ?? segments[0];\n\n  const getColorClass = (c?: string) => {\n    switch (c) {\n      case \"crimson\":\n        return \"bg-primary/10 text-primary border-primary/20\";\n      case \"emerald\":\n        return \"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20\";\n      case \"amber\":\n        return \"bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20\";\n      case \"blue\":\n        return \"bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20\";\n      case \"violet\":\n        return \"bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20\";\n      default:\n        return \"bg-muted text-foreground border-border\";\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card text-card-foreground overflow-hidden my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between px-4 py-2.5 border-b border-border bg-muted/30 font-mono text-xs\">\n        <div className=\"flex items-center gap-2 font-semibold text-foreground\">\n          <span className=\"w-1.5 h-1.5 rounded-full bg-primary\" />\n          <span>{title}</span>\n        </div>\n        <div className=\"text-muted-foreground\">Total: {totalCalculated} bytes</div>\n      </div>\n\n      <div className=\"p-4 bg-muted/10 border-b border-border overflow-x-auto\">\n        <div className=\"flex min-h-[52px] min-w-[580px] w-full border border-border rounded-md overflow-hidden bg-card\">\n          {segments.map((seg, idx) => {\n            const flexGrow = Math.max(seg.bytes, 1);\n            const isSelected = selectedIndex === idx;\n\n            return (\n              <div\n                key={idx}\n                className={cn(\n                  \"flex flex-col justify-center items-center p-2 border-r border-border cursor-pointer transition-all min-w-0 max-w-full overflow-hidden last:border-r-0 select-none\",\n                  getColorClass(seg.color),\n                  isSelected && \"ring-2 ring-primary ring-inset z-10 font-bold\"\n                )}\n                style={{ flex: `${flexGrow} 1 0%` }}\n                onClick={() => setSelectedIndex(idx)}\n                title={`${seg.name} (${seg.bytes} bytes, ${seg.offset ?? \"\"})`}\n              >\n                <span className=\"font-mono text-sm font-medium truncate w-full text-center block\">\n                  {seg.name}\n                </span>\n                <span className=\"font-mono text-xs opacity-85 truncate w-full text-center block\">\n                  {seg.offset ?? `${seg.bytes}B`}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n\n      {activeSeg && (\n        <div className=\"p-4 bg-card text-sm\">\n          <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-4\">\n            <div>\n              <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground block mb-1\">\n                Field\n              </span>\n              <span className=\"font-mono font-medium text-foreground\">\n                {activeSeg.name}\n              </span>\n            </div>\n            <div>\n              <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground block mb-1\">\n                Offset\n              </span>\n              <span className=\"font-mono font-medium text-foreground\">\n                {activeSeg.offset ?? \"—\"}\n              </span>\n            </div>\n            <div>\n              <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground block mb-1\">\n                Size\n              </span>\n              <span className=\"font-mono font-medium text-foreground\">\n                {activeSeg.bytes} bytes ({activeSeg.bytes * 8} bits)\n              </span>\n            </div>\n            {activeSeg.type && (\n              <div>\n                <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground block mb-1\">\n                  Type\n                </span>\n                <span className=\"font-mono font-medium text-blue-500\">\n                  {activeSeg.type}\n                </span>\n              </div>\n            )}\n          </div>\n          {activeSeg.description && (\n            <div className=\"mt-3 pt-3 border-t border-border\">\n              <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground block mb-1\">\n                Description\n              </span>\n              <p className=\"text-muted-foreground\">{activeSeg.description}</p>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "pipeline-flow",
      "type": "registry:ui",
      "title": "PipelineFlow",
      "description": "Multi-stage data pipeline flow visualizer with throughput metrics and animated pulse lines.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/pipeline-flow.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PipelineStageItem {\n  title: string;\n  badge?: string;\n  description?: string;\n  metric?: string;\n  active?: boolean;\n}\n\nexport interface PipelineFlowProps extends React.HTMLAttributes<HTMLDivElement> {\n  stages: PipelineStageItem[];\n  animated?: boolean;\n}\n\nexport function PipelineFlow({\n  stages,\n  animated = true,\n  className,\n  ...props\n}: PipelineFlowProps) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 p-4 overflow-x-auto w-full rounded-lg border border-border bg-card\",\n        className\n      )}\n      {...props}\n    >\n      {stages.map((stage, idx) => (\n        <React.Fragment key={idx}>\n          <div\n            className={cn(\n              \"flex flex-col p-3.5 rounded-md border border-border bg-card shadow-xs min-w-[170px] max-w-[240px] flex-shrink-0 transition-colors\",\n              stage.active && \"border-primary ring-1 ring-primary\"\n            )}\n          >\n            <div className=\"flex items-center justify-between gap-1.5 mb-1.5\">\n              <span className=\"font-mono text-sm font-medium text-foreground\">\n                {stage.title}\n              </span>\n              {stage.badge && (\n                <span className=\"font-mono text-xs font-medium px-1.5 py-0.5 rounded bg-muted text-muted-foreground\">\n                  {stage.badge}\n                </span>\n              )}\n            </div>\n            {stage.description && (\n              <p className=\"text-sm text-muted-foreground line-clamp-2 mb-2 leading-snug\">\n                {stage.description}\n              </p>\n            )}\n            {stage.metric && (\n              <div className=\"font-mono text-sm font-medium text-emerald-500 mt-auto\">\n                {stage.metric}\n              </div>\n            )}\n          </div>\n\n          {idx < stages.length - 1 && (\n            <div className=\"flex flex-col items-center justify-center relative w-10 flex-shrink-0\">\n              <div className=\"w-full h-0.5 bg-border relative\">\n                {animated && (\n                  <div className=\"absolute -top-[3px] w-2 h-2 rounded-full bg-primary animate-pulse\" />\n                )}\n                <span className=\"absolute -right-1 -top-2 text-xs text-muted-foreground\">\n                  ►\n                </span>\n              </div>\n            </div>\n          )}\n        </React.Fragment>\n      ))}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "benchmark-delta",
      "type": "registry:ui",
      "title": "BenchmarkDelta",
      "description": "Comparative system performance delta block showing baseline vs candidate metrics.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/benchmark-delta.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface BenchmarkItem {\n  name: string;\n  baselineLabel?: string;\n  baselineValue: number;\n  baselineDisplay: string;\n  candidateLabel?: string;\n  candidateValue: number;\n  candidateDisplay: string;\n  delta: string;\n  better?: \"higher\" | \"lower\";\n}\n\nexport interface BenchmarkDeltaProps extends React.HTMLAttributes<HTMLDivElement> {\n  benchmarks: BenchmarkItem[];\n}\n\nexport function BenchmarkDelta({\n  benchmarks,\n  className,\n  ...props\n}: BenchmarkDeltaProps) {\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card p-4 space-y-4 my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      {benchmarks.map((item, idx) => {\n        const maxVal = Math.max(item.baselineValue, item.candidateValue, 1);\n        const baselinePct = Math.min((item.baselineValue / maxVal) * 100, 100);\n        const candidatePct = Math.min((item.candidateValue / maxVal) * 100, 100);\n\n        const isPositive =\n          item.better === \"lower\"\n            ? item.candidateValue < item.baselineValue\n            : item.candidateValue > item.baselineValue;\n\n        return (\n          <div key={idx} className=\"space-y-2 pb-3 border-b border-border last:border-b-0 last:pb-0\">\n            <div className=\"flex items-center justify-between\">\n              <span className=\"font-mono text-xs font-medium text-foreground\">\n                {item.name}\n              </span>\n              <span\n                className={cn(\n                  \"font-mono text-xs font-medium px-1.5 py-0.5 rounded\",\n                  isPositive\n                    ? \"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400\"\n                    : \"bg-rose-500/10 text-rose-600 dark:text-rose-400\"\n                )}\n              >\n                {item.delta}\n              </span>\n            </div>\n\n            <div className=\"space-y-1.5\">\n              <div className=\"flex items-center gap-3\">\n                <span className=\"font-mono text-[11px] text-muted-foreground w-16 flex-shrink-0\">\n                  {item.baselineLabel ?? \"Baseline\"}\n                </span>\n                <div className=\"flex-1 h-3 rounded bg-muted overflow-hidden border border-border/50\">\n                  <div\n                    className=\"h-full bg-muted-foreground/40 rounded transition-all duration-300\"\n                    style={{ width: `${baselinePct}%` }}\n                  />\n                </div>\n                <span className=\"font-mono text-xs text-muted-foreground w-20 text-right flex-shrink-0\">\n                  {item.baselineDisplay}\n                </span>\n              </div>\n\n              <div className=\"flex items-center gap-3\">\n                <span className=\"font-mono text-[11px] font-medium text-foreground w-16 flex-shrink-0\">\n                  {item.candidateLabel ?? \"Candidate\"}\n                </span>\n                <div className=\"flex-1 h-3 rounded bg-muted overflow-hidden border border-border/50\">\n                  <div\n                    className=\"h-full bg-primary rounded transition-all duration-300\"\n                    style={{ width: `${candidatePct}%` }}\n                  />\n                </div>\n                <span className=\"font-mono text-xs font-medium text-primary w-20 text-right flex-shrink-0\">\n                  {item.candidateDisplay}\n                </span>\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "latency-distribution",
      "type": "registry:ui",
      "title": "LatencyDistribution",
      "description": "Percentile latency distribution bar (p50, p75, p90, p99, p99.9) with color thresholds and SLA lines.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/latency-distribution.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface LatencyBracket {\n  label: string;\n  value: number;\n  display: string;\n  color?: \"emerald\" | \"amber\" | \"rose\" | \"blue\" | \"violet\" | string;\n}\n\nexport interface LatencyDistributionProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  sla?: string;\n  percentiles: LatencyBracket[];\n}\n\nexport function LatencyDistribution({\n  title = \"Latency Distribution\",\n  sla,\n  percentiles,\n  className,\n  ...props\n}: LatencyDistributionProps) {\n  const totalVal = percentiles.reduce((acc, p) => acc + p.value, 0) || 1;\n\n  const getColor = (c?: string) => {\n    switch (c) {\n      case \"emerald\":\n        return \"#10b981\";\n      case \"amber\":\n        return \"#f59e0b\";\n      case \"rose\":\n        return \"#f43f5e\";\n      case \"blue\":\n        return \"#3b82f6\";\n      case \"violet\":\n        return \"#8b5cf6\";\n      default:\n        return \"#e5000f\";\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card p-4 space-y-3 my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"font-mono text-xs font-medium text-foreground\">\n          {title}\n        </span>\n        {sla && (\n          <span className=\"font-mono text-xs text-muted-foreground\">{sla}</span>\n        )}\n      </div>\n\n      <div className=\"flex h-7 rounded border border-border overflow-hidden bg-muted/30\">\n        {percentiles.map((p, idx) => {\n          const widthPct = Math.max((p.value / totalVal) * 100, 8);\n          const color = getColor(p.color);\n\n          return (\n            <div\n              key={idx}\n              className=\"h-full border-r border-border/50 last:border-r-0 flex items-center justify-center font-mono text-xs font-medium\"\n              style={{\n                width: `${widthPct}%`,\n                backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,\n                color: color,\n              }}\n              title={`${p.label}: ${p.display}`}\n            >\n              {p.label}\n            </div>\n          );\n        })}\n      </div>\n\n      <div className=\"flex flex-wrap gap-2 pt-1\">\n        {percentiles.map((p, idx) => {\n          const color = getColor(p.color);\n          return (\n            <div\n              key={idx}\n              className=\"flex items-center gap-1.5 px-2.5 py-1 rounded border border-border bg-muted/20 font-mono text-xs font-medium\"\n            >\n              <span\n                className=\"w-2 h-2 rounded-full\"\n                style={{ backgroundColor: color }}\n              />\n              <span className=\"text-muted-foreground\">{p.label}:</span>\n              <span className=\"font-bold text-foreground\">{p.display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "cluster-state",
      "type": "registry:ui",
      "title": "ClusterState",
      "description": "Distributed consensus cluster topology visualizer (Leader, Followers, Candidates, Quorum status).",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/cluster-state.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ClusterNodeItem {\n  id: string;\n  role: \"leader\" | \"follower\" | \"candidate\" | \"offline\";\n  term?: number;\n  latency?: string;\n  state?: string;\n}\n\nexport interface ClusterStateProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  nodes: ClusterNodeItem[];\n  requiredQuorum?: number;\n  onNodeClick?: (nodeId: string) => void;\n}\n\nexport function ClusterState({\n  title = \"Cluster Topology\",\n  nodes,\n  requiredQuorum,\n  onNodeClick,\n  className,\n  ...props\n}: ClusterStateProps) {\n  const totalNodes = nodes.length;\n  const activeNodes = nodes.filter((n) => n.role !== \"offline\").length;\n  const quorum = requiredQuorum ?? Math.floor(totalNodes / 2) + 1;\n  const isQuorumReached = activeNodes >= quorum;\n\n  const getNodeRoleStyle = (role: string) => {\n    switch (role) {\n      case \"leader\":\n        return \"border-primary bg-primary/10 ring-1 ring-primary\";\n      case \"candidate\":\n        return \"border-amber-500 bg-amber-500/10\";\n      case \"offline\":\n        return \"border-dashed border-border opacity-50 bg-muted\";\n      default:\n        return \"border-border bg-card\";\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card p-4 space-y-4 my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <span className=\"font-mono text-xs font-medium text-foreground\">\n          {title}\n        </span>\n        <div\n          className={cn(\n            \"font-mono text-xs font-medium px-2 py-0.5 rounded border\",\n            isQuorumReached\n              ? \"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20\"\n              : \"bg-rose-500/10 text-rose-600 dark:text-rose-400 border-rose-500/20\"\n          )}\n        >\n          Quorum: {activeNodes}/{totalNodes} {isQuorumReached ? \"Achieved\" : \"Lost\"} (Need {quorum})\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3\">\n        {nodes.map((node) => (\n          <div\n            key={node.id}\n            className={cn(\n              \"flex flex-col p-3 rounded-md border transition-all cursor-pointer hover:-translate-y-0.5\",\n              getNodeRoleStyle(node.role)\n            )}\n            onClick={() => onNodeClick?.(node.id)}\n          >\n            <div className=\"flex items-center justify-between mb-1.5\">\n              <span className=\"font-mono text-sm font-medium text-foreground\">\n                {node.id}\n              </span>\n              <span\n                className={cn(\n                  \"w-2 h-2 rounded-full\",\n                  node.role === \"leader\" && \"bg-primary shadow-xs\",\n                  node.role === \"offline\" && \"bg-muted-foreground\",\n                  node.role !== \"leader\" && node.role !== \"offline\" && \"bg-emerald-500\"\n                )}\n              />\n            </div>\n            <span\n              className={cn(\n                \"font-mono text-xs font-medium uppercase tracking-wider mb-1\",\n                node.role === \"leader\" ? \"text-primary\" : \"text-muted-foreground\"\n              )}\n            >\n              {node.role}\n            </span>\n            {typeof node.term === \"number\" && (\n              <span className=\"font-mono text-xs text-muted-foreground\">\n                Term {node.term}\n              </span>\n            )}\n            {node.latency && (\n              <span className=\"font-mono text-xs text-muted-foreground font-medium\">\n                {node.latency}\n              </span>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "param-sandbox",
      "type": "registry:ui",
      "title": "ParamSandbox",
      "description": "Interactive slider sandbox for mathematical formulas and live reactive system calculations.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/param-sandbox.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SandboxInput {\n  id: string;\n  label: string;\n  min: number;\n  max: number;\n  step?: number;\n  unit?: string;\n  defaultValue?: number;\n}\n\nexport interface SandboxOutput {\n  label: string;\n  compute?: ((vals: Record<string, number>) => string | number) | null;\n  value?: string | number;\n}\n\nexport interface ParamSandboxProps extends React.HTMLAttributes<HTMLDivElement> {\n  formula: string;\n  inputs: SandboxInput[];\n  outputs: SandboxOutput[];\n}\n\nexport function ParamSandbox({\n  formula,\n  inputs = [],\n  outputs = [],\n  className,\n  ...props\n}: ParamSandboxProps) {\n  const initialVals: Record<string, number> = {};\n  (inputs || []).forEach((inp) => {\n    initialVals[inp.id] = inp.defaultValue ?? inp.min;\n  });\n\n  const [values, setValues] = React.useState<Record<string, number>>(initialVals);\n\n  const handleChange = (id: string, val: number) => {\n    setValues((prev) => ({ ...prev, [id]: val }));\n  };\n\n  const getOutputValue = (out: SandboxOutput) => {\n    if (typeof out.compute === \"function\") {\n      try {\n        return out.compute(values);\n      } catch {\n        return \"—\";\n      }\n    }\n    const nodes = values[\"nodes\"] ?? Object.values(values)[0] ?? 5;\n    if (out.label.toLowerCase().includes(\"quorum\")) {\n      return Math.floor(nodes / 2) + 1;\n    }\n    if (out.label.toLowerCase().includes(\"failure\") || out.label.toLowerCase().includes(\"tolerable\")) {\n      return Math.floor((nodes - 1) / 2);\n    }\n    if (out.value !== undefined) {\n      return out.value;\n    }\n    return \"—\";\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card overflow-hidden my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center gap-2.5 px-4 py-2.5 border-b border-border bg-muted/30\">\n        <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground\">\n          Formula:\n        </span>\n        <code className=\"font-mono text-xs font-medium text-foreground\">\n          {formula}\n        </code>\n      </div>\n\n      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-5 p-5\">\n        <div className=\"space-y-4\">\n          {(inputs || []).map((inp) => (\n            <div key={inp.id} className=\"space-y-1.5\">\n              <div className=\"flex items-center justify-between text-xs\">\n                <span className=\"font-mono font-medium text-foreground\">\n                  {inp.label}\n                </span>\n                <span className=\"font-mono font-medium text-primary\">\n                  {values[inp.id] ?? inp.defaultValue ?? inp.min} {inp.unit ?? \"\"}\n                </span>\n              </div>\n              <input\n                type=\"range\"\n                min={inp.min}\n                max={inp.max}\n                step={inp.step ?? 1}\n                value={values[inp.id] ?? inp.defaultValue ?? inp.min}\n                className=\"w-full accent-primary cursor-pointer\"\n                onChange={(e) =>\n                  handleChange(inp.id, parseFloat(e.target.value))\n                }\n              />\n            </div>\n          ))}\n        </div>\n\n        <div className=\"flex flex-col justify-center gap-3\">\n          {(outputs || []).map((out, idx) => (\n            <div\n              key={idx}\n              className=\"flex items-center justify-between p-3.5 rounded-md border border-border bg-muted/20\"\n            >\n              <span className=\"font-mono text-xs text-muted-foreground\">\n                {out.label}\n              </span>\n              <span className=\"font-mono text-base font-medium text-foreground\">\n                {getOutputValue(out)}\n              </span>\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "architecture-canvas",
      "type": "registry:ui",
      "title": "ArchitectureCanvas",
      "description": "Interactive system architecture and flow canvas with animated packet pulses, directional connections, and node inspector.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/architecture-canvas.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ArchitectureStatus = \"ok\" | \"warn\" | \"err\" | \"info\";\n\nexport interface ArchitectureNodeItem {\n  id: string;\n  label: string;\n  badge?: string;\n  description?: string;\n  /** Percentage 0 - 100. Omit x and y to let the canvas place the node automatically. */\n  x?: number;\n  y?: number;\n  status?: ArchitectureStatus;\n  metadata?: Record<string, string>;\n  /** Id of an entry in `groups`. */\n  group?: string;\n  /** Whether this node has been visited / completed. Renders a checkmark or filled dot. */\n  visited?: boolean;\n}\n\nexport type ArchitectureEdgeRouting = \"smoothstep\" | \"bezier\" | \"straight\";\n\nexport interface ArchitectureConnectionItem {\n  from: string;\n  to: string;\n  label?: string;\n  animated?: boolean;\n  variant?: \"solid\" | \"dashed\";\n  status?: \"ok\" | \"warn\" | \"err\" | \"primary\";\n  routing?: ArchitectureEdgeRouting;\n}\n\nexport interface ArchitectureGroupItem {\n  id: string;\n  label: string;\n  kind?: \"service\" | \"layer\" | \"package\" | \"external\";\n  /** Start collapsed into a single node. */\n  defaultCollapsed?: boolean;\n}\n\nexport type ArchitectureDirection = \"LR\" | \"TB\";\n\n/** A node after group collapsing. `collapsedGroupId` is set on a node that stands in for a collapsed group. */\nexport interface ResolvedArchitectureNode extends ArchitectureNodeItem {\n  collapsedGroupId?: string;\n}\n\nexport interface ArchitectureLayout {\n  /** Total canvas size in px. */\n  width: number;\n  height: number;\n  /** Node centers in px, for nodes that had no explicit x/y. */\n  positions: Map<string, { x: number; y: number }>;\n}\n\nexport interface PxBox {\n  id: string;\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n}\n\n/** Fixed node box used when the canvas places nodes itself. */\nexport const ARCH_NODE_W = 184;\nexport const ARCH_NODE_H = 88;\n\nconst GROUP_GAP = 14;\nconst GROUP_LABEL_H = 30;\n/** Distance from the outermost node centers to the group border. */\nexport const ARCH_GROUP_PAD = {\n  x: ARCH_NODE_W / 2 + GROUP_GAP,\n  top: ARCH_NODE_H / 2 + GROUP_GAP + GROUP_LABEL_H,\n  bottom: ARCH_NODE_H / 2 + GROUP_GAP,\n};\n\nconst MARGIN = 24;\n/** Node-to-node gaps (px) along the flow direction (main) and across it (cross). */\nconst GAPS: Record<ArchitectureDirection, { main: number; cross: number }> = {\n  LR: { main: 64, cross: 28 },\n  TB: { main: 68, cross: 40 },\n};\n/** Extra spacing between top-level items (groups and loose nodes). */\nconst ITEM_GAP_EXTRA = 10;\n\nconst STATUS_RANK: Record<ArchitectureStatus, number> = { ok: 0, info: 1, warn: 2, err: 3 };\n\nexport function groupNodeId(groupId: string): string {\n  return `group:${groupId}`;\n}\n\nexport function initialCollapsedGroups(groups: ArchitectureGroupItem[] = []): string[] {\n  return groups.filter((g) => g.defaultCollapsed).map((g) => g.id);\n}\n\n/** Replaces every collapsed group's members with one stand-in node and re-targets edges. */\nexport function collapseArchitecture(\n  nodes: ArchitectureNodeItem[],\n  connections: ArchitectureConnectionItem[],\n  groups: ArchitectureGroupItem[] = [],\n  collapsed: string[] = []\n): { nodes: ResolvedArchitectureNode[]; connections: ArchitectureConnectionItem[] } {\n  const groupMap = new Map(groups.map((g) => [g.id, g]));\n  const active = new Set(collapsed.filter((id) => groupMap.has(id)));\n  if (active.size === 0) return { nodes, connections };\n\n  const remap = new Map<string, string>();\n  const outNodes: ResolvedArchitectureNode[] = [];\n  const emitted = new Set<string>();\n\n  for (const n of nodes) {\n    if (n.group && active.has(n.group)) {\n      const gid = groupNodeId(n.group);\n      remap.set(n.id, gid);\n      if (emitted.has(n.group)) continue;\n      emitted.add(n.group);\n\n      const members = nodes.filter((m) => m.group === n.group);\n      const g = groupMap.get(n.group)!;\n      const pinned = members.every((m) => m.x !== undefined && m.y !== undefined);\n      const worst = members.reduce<ArchitectureStatus | undefined>((acc, m) => {\n        if (!m.status) return acc;\n        return !acc || STATUS_RANK[m.status] > STATUS_RANK[acc] ? m.status : acc;\n      }, undefined);\n\n      outNodes.push({\n        id: gid,\n        label: g.label,\n        badge: `${members.length} nodes`,\n        description: members.map((m) => m.label).join(\", \"),\n        x: pinned ? members.reduce((s, m) => s + (m.x as number), 0) / members.length : undefined,\n        y: pinned ? members.reduce((s, m) => s + (m.y as number), 0) / members.length : undefined,\n        status: worst,\n        metadata: { Group: g.label, Members: String(members.length) },\n        collapsedGroupId: n.group,\n      });\n    } else {\n      outNodes.push(n);\n    }\n  }\n\n  const seen = new Map<string, ArchitectureConnectionItem>();\n  for (const c of connections) {\n    const from = remap.get(c.from) ?? c.from;\n    const to = remap.get(c.to) ?? c.to;\n    if (from === to) continue;\n    const key = `${from}\\u0000${to}`;\n    const prev = seen.get(key);\n    if (prev) {\n      if (c.animated) prev.animated = true;\n      continue;\n    }\n    seen.set(key, { ...c, from, to });\n  }\n\n  return { nodes: outNodes, connections: Array.from(seen.values()) };\n}\n\n/** Longest-path ranking. Edges that close a cycle are ignored so cyclic graphs still lay out. */\nfunction rankItems(ids: string[], edges: [string, string][]): Map<string, number> {\n  const idSet = new Set(ids);\n  const out = new Map<string, string[]>(ids.map((id) => [id, []]));\n  for (const [a, b] of edges) {\n    if (a !== b && idSet.has(a) && idSet.has(b)) out.get(a)!.push(b);\n  }\n\n  const state = new Map<string, 0 | 1 | 2>(ids.map((id) => [id, 0]));\n  const dag: [string, string][] = [];\n  for (const start of ids) {\n    if (state.get(start) !== 0) continue;\n    const stack: { id: string; i: number }[] = [{ id: start, i: 0 }];\n    state.set(start, 1);\n    while (stack.length) {\n      const top = stack[stack.length - 1];\n      const next = out.get(top.id)![top.i++];\n      if (next === undefined) {\n        state.set(top.id, 2);\n        stack.pop();\n        continue;\n      }\n      const s = state.get(next);\n      if (s === 1) continue; // back edge\n      dag.push([top.id, next]);\n      if (s === 0) {\n        state.set(next, 1);\n        stack.push({ id: next, i: 0 });\n      }\n    }\n  }\n\n  const indeg = new Map<string, number>(ids.map((id) => [id, 0]));\n  const succ = new Map<string, string[]>(ids.map((id) => [id, []]));\n  for (const [a, b] of dag) {\n    indeg.set(b, indeg.get(b)! + 1);\n    succ.get(a)!.push(b);\n  }\n  const rank = new Map<string, number>(ids.map((id) => [id, 0]));\n  const queue = ids.filter((id) => indeg.get(id) === 0);\n  while (queue.length) {\n    const u = queue.shift()!;\n    for (const v of succ.get(u)!) {\n      rank.set(v, Math.max(rank.get(v)!, rank.get(u)! + 1));\n      indeg.set(v, indeg.get(v)! - 1);\n      if (indeg.get(v) === 0) queue.push(v);\n    }\n  }\n  return rank;\n}\n\n/** Ranks, then orders each rank with a few barycenter sweeps to cut edge crossings. */\nfunction layerItems(ids: string[], edges: [string, string][]): string[][] {\n  const rank = rankItems(ids, edges);\n  const count = ids.length ? Math.max(...ids.map((id) => rank.get(id)!)) + 1 : 0;\n  const layers: string[][] = Array.from({ length: count }, () => []);\n  for (const id of ids) layers[rank.get(id)!].push(id);\n\n  const idSet = new Set(ids);\n  const nbrs = new Map<string, string[]>(ids.map((id) => [id, []]));\n  for (const [a, b] of edges) {\n    if (a === b || !idSet.has(a) || !idSet.has(b)) continue;\n    nbrs.get(a)!.push(b);\n    nbrs.get(b)!.push(a);\n  }\n\n  const norm = new Map<string, number>();\n  const refresh = () =>\n    layers.forEach((layer) => layer.forEach((id, i) => norm.set(id, (i + 0.5) / layer.length)));\n  refresh();\n\n  const sweep = (r: number, useLower: boolean) => {\n    const layer = layers[r];\n    const keyed = layer.map((id, i) => {\n      const peers = nbrs.get(id)!.filter((n) => (useLower ? rank.get(n)! < r : rank.get(n)! > r));\n      const bary = peers.length ? peers.reduce((s, n) => s + norm.get(n)!, 0) / peers.length : norm.get(id)!;\n      return { id, bary, i };\n    });\n    keyed.sort((a, b) => a.bary - b.bary || a.i - b.i);\n    layers[r] = keyed.map((k) => k.id);\n    refresh();\n  };\n\n  for (let it = 0; it < 4; it++) {\n    for (let r = 1; r < layers.length; r++) sweep(r, true);\n    for (let r = layers.length - 2; r >= 0; r--) sweep(r, false);\n  }\n  return layers;\n}\n\ninterface Item {\n  id: string;\n  members: string[];\n  /** Local ranks for grouped items, used to reorder members against external edges. */\n  layers?: string[][];\n  /** Member center offsets from the item's top-left corner. */\n  offsets: Map<string, { x: number; y: number }>;\n  w: number;\n  h: number;\n}\n\nfunction localItem(\n  id: string,\n  members: string[],\n  edges: [string, string][],\n  direction: ArchitectureDirection,\n  grouped: boolean,\n  gapMain: number\n): Item {\n  const gaps = { ...GAPS[direction], main: gapMain };\n  const mainStep = (direction === \"LR\" ? ARCH_NODE_W : ARCH_NODE_H) + gaps.main;\n  const crossStep = (direction === \"LR\" ? ARCH_NODE_H : ARCH_NODE_W) + gaps.cross;\n\n  const centers = new Map<string, { x: number; y: number }>();\n  let layers: string[][] | undefined;\n  if (!grouped) {\n    centers.set(members[0], { x: 0, y: 0 });\n  } else {\n    layers = layerItems(members, edges);\n    layers.forEach((layer, r) => {\n      layer.forEach((m, i) => {\n        const cross = (i - (layer.length - 1) / 2) * crossStep;\n        const main = r * mainStep;\n        centers.set(m, direction === \"LR\" ? { x: main, y: cross } : { x: cross, y: main });\n      });\n    });\n  }\n\n  const xs = Array.from(centers.values()).map((c) => c.x);\n  const ys = Array.from(centers.values()).map((c) => c.y);\n  const minX = Math.min(...xs);\n  const maxX = Math.max(...xs);\n  const minY = Math.min(...ys);\n  const maxY = Math.max(...ys);\n  const pad = grouped\n    ? ARCH_GROUP_PAD\n    : { x: ARCH_NODE_W / 2, top: ARCH_NODE_H / 2, bottom: ARCH_NODE_H / 2 };\n\n  const offsets = new Map<string, { x: number; y: number }>();\n  centers.forEach((c, m) => offsets.set(m, { x: c.x - minX + pad.x, y: c.y - minY + pad.top }));\n  return { id, members, layers, offsets, w: maxX - minX + pad.x * 2, h: maxY - minY + pad.top + pad.bottom };\n}\n\n/**\n * Places nodes that have no explicit x/y. Groups are laid out as single blocks so their borders\n * never overlap, then members are laid out inside. Positions are px node centers.\n * Returns null when every node already has coordinates.\n */\nexport function layoutArchitecture(\n  nodes: ArchitectureNodeItem[],\n  connections: ArchitectureConnectionItem[],\n  groups: ArchitectureGroupItem[] = [],\n  direction: ArchitectureDirection = \"LR\"\n): ArchitectureLayout | null {\n  const auto = nodes.filter((n) => n.x === undefined || n.y === undefined);\n  if (auto.length === 0) return null;\n\n  const autoIds = new Set(auto.map((n) => n.id));\n  const groupIds = new Set(groups.map((g) => g.id));\n  const itemOf = new Map<string, string>();\n  const itemMembers = new Map<string, string[]>();\n  const itemOrder: string[] = [];\n\n  for (const n of auto) {\n    const itemId = n.group && groupIds.has(n.group) ? `g:${n.group}` : `n:${n.id}`;\n    itemOf.set(n.id, itemId);\n    if (!itemMembers.has(itemId)) {\n      itemMembers.set(itemId, []);\n      itemOrder.push(itemId);\n    }\n    itemMembers.get(itemId)!.push(n.id);\n  }\n\n  const edgePairs: [string, string][] = connections\n    .filter((c) => autoIds.has(c.from) && autoIds.has(c.to))\n    .map((c) => [c.from, c.to]);\n\n  // Leave room between ranks for edge labels (left-to-right only: labels are wide, not tall).\n  const labelWidth = connections\n    .filter((c) => c.label && autoIds.has(c.from) && autoIds.has(c.to))\n    .reduce((m, c) => Math.max(m, (c.label as string).length * 7.2 + 26), 0);\n  const gapMain =\n    direction === \"LR\" ? Math.max(GAPS.LR.main, Math.min(labelWidth + 44, 200)) : GAPS.TB.main;\n\n  const items = new Map<string, Item>();\n  for (const itemId of itemOrder) {\n    const members = itemMembers.get(itemId)!;\n    const grouped = itemId.startsWith(\"g:\");\n    const inner = edgePairs.filter(([a, b]) => itemOf.get(a) === itemId && itemOf.get(b) === itemId);\n    items.set(itemId, localItem(itemId, members, inner, direction, grouped, gapMain));\n  }\n\n  const metaEdges: [string, string][] = [];\n  for (const [a, b] of edgePairs) {\n    const ia = itemOf.get(a)!;\n    const ib = itemOf.get(b)!;\n    if (ia !== ib) metaEdges.push([ia, ib]);\n  }\n  const layers = layerItems(itemOrder, metaEdges);\n\n  const mainGap = gapMain + ITEM_GAP_EXTRA;\n  const crossGap = GAPS[direction].cross + ITEM_GAP_EXTRA / 2;\n  const mainSize = (it: Item) => (direction === \"LR\" ? it.w : it.h);\n  const crossSize = (it: Item) => (direction === \"LR\" ? it.h : it.w);\n\n  const layerMain = layers.map((l) => Math.max(...l.map((id) => mainSize(items.get(id)!))));\n  const layerCross = layers.map(\n    (l) => l.reduce((s, id) => s + crossSize(items.get(id)!), 0) + crossGap * (l.length - 1)\n  );\n  const totalCross = Math.max(...layerCross);\n  const totalMain = layerMain.reduce((s, m) => s + m, 0) + mainGap * (layers.length - 1);\n\n  const positions = new Map<string, { x: number; y: number }>();\n  const itemPos = new Map<string, { left: number; top: number }>();\n  let mainCursor = MARGIN;\n  layers.forEach((layer, r) => {\n    let crossCursor = MARGIN + (totalCross - layerCross[r]) / 2;\n    for (const id of layer) {\n      const it = items.get(id)!;\n      const mainPos = mainCursor + (layerMain[r] - mainSize(it)) / 2;\n      const left = direction === \"LR\" ? mainPos : crossCursor;\n      const top = direction === \"LR\" ? crossCursor : mainPos;\n      itemPos.set(id, { left, top });\n      it.offsets.forEach((o, m) => positions.set(m, { x: left + o.x, y: top + o.y }));\n      crossCursor += crossSize(it) + crossGap;\n    }\n    mainCursor += layerMain[r] + mainGap;\n  });\n\n  // Members were ordered before their group's final place was known. Reorder each group's\n  // members within a rank by where their outside neighbors ended up, to untangle crossings.\n  const cross = (p: { x: number; y: number }) => (direction === \"LR\" ? p.y : p.x);\n  const nbrs = new Map<string, string[]>(auto.map((n) => [n.id, []]));\n  for (const [a, b] of edgePairs) {\n    nbrs.get(a)!.push(b);\n    nbrs.get(b)!.push(a);\n  }\n  for (let pass = 0; pass < 2; pass++) {\n    for (const it of items.values()) {\n      if (!it.layers) continue;\n      const { left, top } = itemPos.get(it.id)!;\n      for (const layer of it.layers) {\n        if (layer.length < 2) continue;\n        const slots = layer.map((m) => cross(it.offsets.get(m)!)).sort((a, b) => a - b);\n        const keyed = layer\n          .map((m, i) => {\n            const outside = nbrs.get(m)!.filter((n) => itemOf.get(n) !== it.id);\n            const key = outside.length\n              ? outside.reduce((sum, n) => sum + cross(positions.get(n)!), 0) / outside.length\n              : cross(positions.get(m)!);\n            return { m, key, i };\n          })\n          .sort((a, b) => a.key - b.key || a.i - b.i);\n        keyed.forEach((k, idx) => {\n          const o = it.offsets.get(k.m)!;\n          const next = direction === \"LR\" ? { x: o.x, y: slots[idx] } : { x: slots[idx], y: o.y };\n          it.offsets.set(k.m, next);\n          positions.set(k.m, { x: left + next.x, y: top + next.y });\n        });\n      }\n    }\n  }\n\n  const width = (direction === \"LR\" ? totalMain : totalCross) + MARGIN * 2;\n  const height = (direction === \"LR\" ? totalCross : totalMain) + MARGIN * 2;\n  return { width, height, positions };\n}\n\n/** Group borders in px, from final node centers. Only groups with at least one placed member. */\nexport function groupBoxes(\n  groups: ArchitectureGroupItem[],\n  nodes: ArchitectureNodeItem[],\n  center: (id: string) => { x: number; y: number } | undefined\n): PxBox[] {\n  const boxes: PxBox[] = [];\n  for (const g of groups) {\n    const pts = nodes\n      .filter((n) => n.group === g.id)\n      .map((n) => center(n.id))\n      .filter((p): p is { x: number; y: number } => Boolean(p));\n    if (pts.length === 0) continue;\n    const minX = Math.min(...pts.map((p) => p.x));\n    const maxX = Math.max(...pts.map((p) => p.x));\n    const minY = Math.min(...pts.map((p) => p.y));\n    const maxY = Math.max(...pts.map((p) => p.y));\n    boxes.push({\n      id: g.id,\n      x: minX - ARCH_GROUP_PAD.x,\n      y: minY - ARCH_GROUP_PAD.top,\n      w: maxX - minX + ARCH_GROUP_PAD.x * 2,\n      h: maxY - minY + ARCH_GROUP_PAD.top + ARCH_GROUP_PAD.bottom,\n    });\n  }\n  return boxes;\n}\n\n/** Point where the segment from (cx, cy) toward (tx, ty) leaves a centered rectangle. */\nexport function clipToRect(cx: number, cy: number, tx: number, ty: number, hw: number, hh: number) {\n  const dx = tx - cx;\n  const dy = ty - cy;\n  if (dx === 0 && dy === 0) return { x: cx, y: cy };\n  const t = Math.min(dx === 0 ? Infinity : hw / Math.abs(dx), dy === 0 ? Infinity : hh / Math.abs(dy));\n  return { x: cx + dx * t, y: cy + dy * t };\n}\n\nexport interface PxEdge {\n  index: number;\n  x1: number;\n  y1: number;\n  x2: number;\n  y2: number;\n  mx: number;\n  my: number;\n  path: string;\n}\n\n/** Computes an SVG path data string and midpoint for straight, bezier, or smoothstep (orthogonal with rounded corners) edges. */\nexport function buildEdgePath(\n  x1: number,\n  y1: number,\n  x2: number,\n  y2: number,\n  routing: ArchitectureEdgeRouting = \"smoothstep\",\n  direction: ArchitectureDirection = \"LR\",\n  borderRadius: number = 8\n): { path: string; mx: number; my: number } {\n  if (routing === \"straight\") {\n    return {\n      path: `M ${x1} ${y1} L ${x2} ${y2}`,\n      mx: (x1 + x2) / 2,\n      my: (y1 + y2) / 2,\n    };\n  }\n\n  if (routing === \"bezier\") {\n    if (direction === \"LR\") {\n      const dx = Math.max(32, Math.abs(x2 - x1) * 0.5);\n      const cx1 = x1 + dx;\n      const cy1 = y1;\n      const cx2 = x2 - dx;\n      const cy2 = y2;\n      return {\n        path: `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`,\n        mx: (x1 + x2) / 2,\n        my: (y1 + y2) / 2,\n      };\n    } else {\n      const dy = Math.max(32, Math.abs(y2 - y1) * 0.5);\n      const cx1 = x1;\n      const cy1 = y1 + dy;\n      const cx2 = x2;\n      const cy2 = y2 - dy;\n      return {\n        path: `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`,\n        mx: (x1 + x2) / 2,\n        my: (y1 + y2) / 2,\n      };\n    }\n  }\n\n  // \"smoothstep\" - orthogonal step routing with rounded corners\n  if (direction === \"LR\") {\n    const dx = x2 - x1;\n    const dy = y2 - y1;\n\n    if (dx >= 12) {\n      const mx = x1 + dx / 2;\n      const r = Math.min(borderRadius, Math.abs(dx) / 2, Math.abs(dy) / 2);\n      if (r <= 1 || Math.abs(dy) <= 2) {\n        return {\n          path: `M ${x1} ${y1} L ${mx} ${y1} L ${mx} ${y2} L ${x2} ${y2}`,\n          mx,\n          my: (y1 + y2) / 2,\n        };\n      }\n      const sy = dy > 0 ? 1 : -1;\n      return {\n        path: `M ${x1} ${y1} L ${mx - r} ${y1} Q ${mx} ${y1} ${mx} ${y1 + r * sy} L ${mx} ${y2 - r * sy} Q ${mx} ${y2} ${mx + r} ${y2} L ${x2} ${y2}`,\n        mx,\n        my: (y1 + y2) / 2,\n      };\n    } else {\n      const r = Math.min(borderRadius, 12);\n      const offset = 32;\n      const midY = dy >= 0 ? Math.max(y1, y2) + offset : Math.min(y1, y2) - offset;\n      const sy1 = midY > y1 ? 1 : -1;\n      const sy2 = y2 > midY ? 1 : -1;\n      return {\n        path: `M ${x1} ${y1} L ${x1 + 16} ${y1} Q ${x1 + 16 + r} ${y1} ${x1 + 16 + r} ${y1 + r * sy1} L ${x1 + 16 + r} ${midY - r * sy1} Q ${x1 + 16 + r} ${midY} ${x1 + 16} ${midY} L ${x2 - 16} ${midY} Q ${x2 - 16 - r} ${midY} ${x2 - 16 - r} ${midY + r * sy2} L ${x2 - 16 - r} ${y2 - r * sy2} Q ${x2 - 16 - r} ${y2} ${x2 - 16} ${y2} L ${x2} ${y2}`,\n        mx: (x1 + x2) / 2,\n        my: midY,\n      };\n    }\n  } else {\n    const dx = x2 - x1;\n    const dy = y2 - y1;\n\n    if (dy >= 12) {\n      const my = y1 + dy / 2;\n      const r = Math.min(borderRadius, Math.abs(dx) / 2, Math.abs(dy) / 2);\n      if (r <= 1 || Math.abs(dx) <= 2) {\n        return {\n          path: `M ${x1} ${y1} L ${x1} ${my} L ${x2} ${my} L ${x2} ${y2}`,\n          mx: (x1 + x2) / 2,\n          my,\n        };\n      }\n      const sx = dx > 0 ? 1 : -1;\n      return {\n        path: `M ${x1} ${y1} L ${x1} ${my - r} Q ${x1} ${my} ${x1 + r * sx} ${my} L ${x2 - r * sx} ${my} Q ${x2} ${my} ${x2} ${my + r} L ${x2} ${y2}`,\n        mx: (x1 + x2) / 2,\n        my,\n      };\n    } else {\n      const r = Math.min(borderRadius, 12);\n      const offset = 36;\n      const midX = dx >= 0 ? Math.max(x1, x2) + offset : Math.min(x1, x2) - offset;\n      const sx1 = midX > x1 ? 1 : -1;\n      const sx2 = x2 > midX ? 1 : -1;\n      return {\n        path: `M ${x1} ${y1} L ${x1} ${y1 + 16} Q ${x1} ${y1 + 16 + r} ${x1 + r * sx1} ${y1 + 16 + r} L ${midX - r * sx1} ${y1 + 16 + r} Q ${midX} ${y1 + 16 + r} ${midX} ${y1 + 16} L ${midX} ${y2 - 16} Q ${midX} ${y2 - 16 - r} ${midX + r * sx2} ${y2 - 16 - r} L ${x2 - r * sx2} ${y2 - 16 - r} Q ${x2} ${y2 - 16 - r} ${x2} ${y2 - 16} L ${x2} ${y2}`,\n        mx: midX,\n        my: (y1 + y2) / 2,\n      };\n    }\n  }\n}\n\n/** Edge segments in px, clipped to node boxes. Opposite edges between the same pair are offset apart. */\nexport function routeEdges(\n  connections: ArchitectureConnectionItem[],\n  center: (id: string) => { x: number; y: number } | undefined,\n  defaultRouting: ArchitectureEdgeRouting = \"smoothstep\",\n  direction: ArchitectureDirection = \"LR\"\n): PxEdge[] {\n  const pairs = new Set(connections.map((c) => `${c.from}\\u0000${c.to}`));\n  const hw = ARCH_NODE_W / 2;\n  const hh = ARCH_NODE_H / 2;\n  const edges: PxEdge[] = [];\n\n  connections.forEach((c, index) => {\n    const a = center(c.from);\n    const b = center(c.to);\n    if (!a || !b) return;\n\n    let ox = 0;\n    let oy = 0;\n    if (pairs.has(`${c.to}\\u0000${c.from}`)) {\n      const len = Math.hypot(b.x - a.x, b.y - a.y) || 1;\n      ox = (-(b.y - a.y) / len) * 7;\n      oy = ((b.x - a.x) / len) * 7;\n    }\n    const ac = { x: a.x + ox, y: a.y + oy };\n    const bc = { x: b.x + ox, y: b.y + oy };\n\n    let start = clipToRect(ac.x, ac.y, bc.x, bc.y, hw, hh);\n    let end = clipToRect(bc.x, bc.y, ac.x, ac.y, hw + 3, hh + 3);\n\n    const routing = c.routing ?? defaultRouting;\n    if (routing !== \"straight\") {\n      if (direction === \"LR\" && b.x >= a.x + hw) {\n        start = { x: a.x + hw, y: a.y + oy };\n        end = { x: b.x - hw - 3, y: b.y + oy };\n      } else if (direction === \"TB\" && b.y >= a.y + hh) {\n        start = { x: a.x + ox, y: a.y + hh };\n        end = { x: b.x + ox, y: b.y - hh - 3 };\n      }\n    }\n\n    const geom = buildEdgePath(start.x, start.y, end.x, end.y, routing, direction);\n\n    edges.push({\n      index,\n      x1: start.x,\n      y1: start.y,\n      x2: end.x,\n      y2: end.y,\n      mx: geom.mx,\n      my: geom.my,\n      path: geom.path,\n    });\n  });\n  return edges;\n}\n\nexport interface ArchitectureCanvasProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  subtitle?: string;\n  badge?: React.ReactNode;\n  nodes: ArchitectureNodeItem[];\n  connections?: ArchitectureConnectionItem[];\n  /** Boundaries (services, layers, packages). Members point at a group with `node.group`. */\n  groups?: ArchitectureGroupItem[];\n  /** Flow direction used when nodes have no x/y. Default \"LR\". */\n  direction?: ArchitectureDirection;\n  selectedNodeId?: string;\n  onNodeSelect?: (nodeId: string) => void;\n  /** Edge routing algorithm: \"smoothstep\" (orthogonal with rounded corners), \"bezier\" (smooth spline), or \"straight\". Default \"smoothstep\". */\n  routing?: ArchitectureEdgeRouting;\n  /** Whether to show canvas navigation / zoom controls (+, -, reset). Default false. */\n  showControls?: boolean;\n  /** Whether to show connection port handles on nodes. Default true. */\n  showHandles?: boolean;\n  /** Compact mode for narrow sidebars or split panes. Reduces viewport padding and default min-height. */\n  compact?: boolean;\n  /** Minimum width for the viewport canvas or container. */\n  minWidth?: number | string;\n  /** Minimum height for the viewport canvas or container. Default 380px (or 240px if compact). */\n  minHeight?: number | string;\n  /** Whether to wrap node labels instead of single-line truncation. Default false. */\n  wrapLabels?: boolean;\n}\n\nconst STATUS_BORDER: Record<ArchitectureStatus, string> = {\n  ok: \"border-l-[3px] border-l-emerald-500\",\n  info: \"\",\n  warn: \"border-l-[3px] border-l-amber-500\",\n  err: \"border-l-[3px] border-l-rose-500\",\n};\n\nexport function ArchitectureCanvas({\n  title = \"System Architecture\",\n  subtitle,\n  badge,\n  nodes: inputNodes,\n  connections: inputConnections = [],\n  groups = [],\n  direction = \"LR\",\n  selectedNodeId: controlledSelected,\n  onNodeSelect,\n  routing = \"smoothstep\",\n  showControls = false,\n  showHandles = true,\n  compact = false,\n  minWidth,\n  minHeight,\n  wrapLabels = false,\n  className,\n  ...props\n}: ArchitectureCanvasProps) {\n  const [collapsed, setCollapsed] = React.useState<string[]>(() => initialCollapsedGroups(groups));\n  const [internalSelected, setInternalSelected] = React.useState<string | null>(\n    inputNodes.length > 0 ? inputNodes[0].id : null\n  );\n  const [zoom, setZoom] = React.useState(1);\n\n  const handleZoomIn = () => setZoom((z) => Math.min(2.0, Math.round((z + 0.15) * 100) / 100));\n  const handleZoomOut = () => setZoom((z) => Math.max(0.5, Math.round((z - 0.15) * 100) / 100));\n  const handleZoomReset = () => setZoom(1);\n\n  const { nodes, connections } = React.useMemo(\n    () => collapseArchitecture(inputNodes, inputConnections, groups, collapsed),\n    [inputNodes, inputConnections, groups, collapsed]\n  );\n  const layout = React.useMemo(\n    () => layoutArchitecture(nodes, connections, groups, direction),\n    [nodes, connections, groups, direction]\n  );\n\n  const activeNodeId = controlledSelected !== undefined ? controlledSelected : internalSelected;\n  const activeNode = nodes.find((n) => n.id === activeNodeId);\n\n  const toggleGroup = (id: string) =>\n    setCollapsed((prev) => (prev.includes(id) ? prev.filter((g) => g !== id) : [...prev, id]));\n\n  const handleNodeClick = (id: string, collapsedGroupId?: string) => {\n    if (collapsedGroupId) toggleGroup(collapsedGroupId);\n    if (controlledSelected === undefined) {\n      setInternalSelected(id);\n    }\n    onNodeSelect?.(id);\n  };\n\n  const nodeMap = new Map<string, ArchitectureNodeItem>();\n  nodes.forEach((n) => nodeMap.set(n.id, n));\n\n  // Px mode: some nodes were placed automatically, so everything is positioned in px.\n  const center = (id: string) => {\n    const n = nodeMap.get(id);\n    if (!n || !layout) return undefined;\n    if (n.x !== undefined && n.y !== undefined) {\n      return { x: (n.x / 100) * layout.width, y: (n.y / 100) * layout.height };\n    }\n    return layout.positions.get(id);\n  };\n\n  const pxEdges = layout ? routeEdges(connections, center, routing, direction) : [];\n  const pxGroups = layout ? groupBoxes(groups, nodes, center) : [];\n  const groupMap = new Map(groups.map((g) => [g.id, g]));\n\n  // Percent mode (all nodes pinned): group borders as calc() around the member bounding box.\n  const pctGroups = layout\n    ? []\n    : groups.flatMap((g) => {\n        const m = nodes.filter((n) => n.group === g.id && n.x !== undefined && n.y !== undefined);\n        if (m.length === 0) return [];\n        const xs = m.map((n) => n.x as number);\n        const ys = m.map((n) => n.y as number);\n        const [x0, x1, y0, y1] = [Math.min(...xs), Math.max(...xs), Math.min(...ys), Math.max(...ys)];\n        return [\n          {\n            id: g.id,\n            style: {\n              left: `calc(${x0}% - ${ARCH_GROUP_PAD.x}px)`,\n              top: `calc(${y0}% - ${ARCH_GROUP_PAD.top}px)`,\n              width: `calc(${x1 - x0}% + ${ARCH_GROUP_PAD.x * 2}px)`,\n              height: `calc(${y1 - y0}% + ${ARCH_GROUP_PAD.top + ARCH_GROUP_PAD.bottom}px)`,\n            } as React.CSSProperties,\n          },\n        ];\n      });\n\n  const renderGroup = (id: string, style: React.CSSProperties) => {\n    const g = groupMap.get(id);\n    if (!g) return null;\n    return (\n      <div\n        key={`group-${id}`}\n        className={cn(\n          \"absolute z-0 box-border rounded-md border bg-card/60 pointer-events-none\",\n          g.kind === \"external\" ? \"border-dotted border-border bg-transparent\" : \"border-dashed border-border\",\n          g.kind === \"layer\" && \"border-solid\"\n        )}\n        style={style}\n      >\n        <div className=\"flex items-center gap-2 h-[30px] px-2.5 font-mono text-xs text-muted-foreground\">\n          <button\n            type=\"button\"\n            aria-expanded=\"true\"\n            aria-label={`Collapse ${g.label}`}\n            onClick={() => toggleGroup(id)}\n            className=\"pointer-events-auto cursor-pointer size-[1.15rem] leading-none rounded border border-border bg-background text-muted-foreground hover:text-foreground\"\n          >\n            -\n          </button>\n          <span className=\"font-semibold text-foreground\">{g.label}</span>\n          {g.kind && <span className=\"uppercase tracking-wider text-[0.68rem]\">{g.kind}</span>}\n        </div>\n      </div>\n    );\n  };\n\n  const renderNode = (node: (typeof nodes)[number], style: React.CSSProperties, fixed: boolean) => {\n    const isSelected = node.id === activeNodeId;\n    const isVisited = node.visited;\n    return (\n      <div\n        key={node.id}\n        className={cn(\n          \"absolute -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-md shadow-xs cursor-pointer transition-all hover:-translate-y-[52%]\",\n          fixed ? \"overflow-hidden px-3 py-2.5\" : \"min-w-[160px] max-w-[240px] p-3.5\",\n          node.collapsedGroupId && \"border-dashed\",\n          node.status && STATUS_BORDER[node.status],\n          !node.status && isVisited && \"border-l-[3px] border-l-emerald-500/70\",\n          isSelected && \"border-primary ring-2 ring-primary bg-primary/5\"\n        )}\n        style={style}\n        onClick={() => handleNodeClick(node.id, node.collapsedGroupId)}\n        title={node.label}\n      >\n        {showHandles && !node.collapsedGroupId && (\n          <>\n            {direction === \"TB\" ? (\n              <>\n                <span className=\"absolute -top-1 left-1/2 -translate-x-1/2 size-2 rounded-full bg-background border border-border pointer-events-none\" aria-hidden=\"true\" />\n                <span className=\"absolute -bottom-1 left-1/2 -translate-x-1/2 size-2 rounded-full bg-background border border-border pointer-events-none\" aria-hidden=\"true\" />\n              </>\n            ) : (\n              <>\n                <span className=\"absolute -left-1 top-1/2 -translate-y-1/2 size-2 rounded-full bg-background border border-border pointer-events-none\" aria-hidden=\"true\" />\n                <span className=\"absolute -right-1 top-1/2 -translate-y-1/2 size-2 rounded-full bg-background border border-border pointer-events-none\" aria-hidden=\"true\" />\n              </>\n            )}\n          </>\n        )}\n        <div className=\"flex items-center justify-between gap-2 mb-1\">\n          <div className=\"flex items-center gap-1.5 min-w-0\">\n            {isVisited && (\n              <span\n                className=\"inline-flex items-center justify-center size-3.5 rounded-full bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 text-[10px] font-semibold shrink-0\"\n                title=\"Visited\"\n                aria-label=\"Visited\"\n              >\n                ✓\n              </span>\n            )}\n            <span\n              className={cn(\n                \"font-mono text-sm font-medium tracking-tight text-foreground\",\n                wrapLabels ? \"whitespace-normal break-words leading-tight\" : \"truncate\"\n              )}\n              title={node.label}\n            >\n              {node.collapsedGroupId ? `+ ${node.label}` : node.label}\n            </span>\n          </div>\n          {node.badge && (\n            <span className=\"font-mono text-xs font-medium px-1.5 py-0.5 rounded bg-muted text-muted-foreground shrink-0\">\n              {node.badge}\n            </span>\n          )}\n        </div>\n        {node.description && (\n          <p className=\"text-xs text-muted-foreground line-clamp-2 leading-relaxed\">{node.description}</p>\n        )}\n      </div>\n    );\n  };\n\n  const labelClass =\n    \"absolute -translate-x-1/2 -translate-y-1/2 bg-background border border-border rounded px-2 py-0.5 font-mono text-xs font-medium text-foreground shadow-xs z-30\";\n\n  const viewportMinHeight = minHeight !== undefined ? minHeight : compact ? \"240px\" : \"380px\";\n  const viewportMinWidth = minWidth !== undefined ? minWidth : undefined;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col border border-border rounded-lg bg-card overflow-hidden shadow-xs my-6\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between p-3.5 bg-background border-b border-border flex-wrap gap-2\">\n        <div className=\"flex items-center gap-2.5\">\n          <span className=\"font-heading font-bold text-base text-foreground\">{title}</span>\n          {subtitle && <span className=\"text-sm text-muted-foreground\">{subtitle}</span>}\n        </div>\n        {badge && <div>{badge}</div>}\n      </div>\n\n      <div\n        className={cn(\n          \"relative w-full overflow-x-auto overflow-y-hidden bg-background\",\n          compact ? \"p-3.5\" : \"p-6\"\n        )}\n        style={{\n          minHeight: viewportMinHeight,\n          minWidth: viewportMinWidth,\n        }}\n      >\n        {layout ? (\n          <div\n            className=\"relative z-20 mx-auto\"\n            style={{\n              width: layout.width,\n              height: layout.height,\n              transform: zoom !== 1 ? `scale(${zoom})` : undefined,\n              transformOrigin: \"top left\",\n              transition: \"transform 0.15s ease-out\",\n            }}\n          >\n            {pxGroups.map((b) => renderGroup(b.id, { left: b.x, top: b.y, width: b.w, height: b.h }))}\n\n            <svg\n              className=\"absolute inset-0 w-full h-full pointer-events-none z-10\"\n              width={layout.width}\n              height={layout.height}\n              viewBox={`0 0 ${layout.width} ${layout.height}`}\n            >\n              <defs>\n                <marker id=\"aui-reg-arrow-px\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n                  <path d=\"M 0 1 L 10 5 L 0 9 z\" className=\"fill-muted-foreground\" />\n                </marker>\n                <marker id=\"aui-reg-arrow-px-active\" viewBox=\"0 0 10 10\" refX=\"10\" refY=\"5\" markerWidth=\"6\" markerHeight=\"6\" orient=\"auto-start-reverse\">\n                  <path d=\"M 0 1 L 10 5 L 0 9 z\" className=\"fill-primary\" />\n                </marker>\n              </defs>\n              {pxEdges.map((e) => {\n                const conn = connections[e.index];\n                const isActive = activeNodeId === conn.from || activeNodeId === conn.to;\n                return (\n                  <g key={`edge-${e.index}`}>\n                    <path\n                      d={e.path}\n                      fill=\"none\"\n                      className={cn(conn.animated && \"animate-pulse\")}\n                      stroke={isActive ? \"hsl(var(--primary))\" : \"hsl(var(--border))\"}\n                      strokeWidth={isActive ? 2 : 1.5}\n                      strokeDasharray={conn.variant === \"dashed\" ? \"4 4\" : undefined}\n                      markerEnd={isActive ? \"url(#aui-reg-arrow-px-active)\" : \"url(#aui-reg-arrow-px)\"}\n                    />\n                    {conn.animated && (\n                      <circle r=\"3.5\" className=\"fill-primary\">\n                        <animateMotion path={e.path} dur=\"2.4s\" repeatCount=\"indefinite\" />\n                      </circle>\n                    )}\n                  </g>\n                );\n              })}\n            </svg>\n\n            {pxEdges.map((e) => {\n              const label = connections[e.index].label;\n              if (!label) return null;\n              return (\n                <div key={`label-${e.index}`} className={labelClass} style={{ left: e.mx, top: e.my }}>\n                  {label}\n                </div>\n              );\n            })}\n\n            {nodes.map((node) => {\n              const c = center(node.id);\n              if (!c) return null;\n              return renderNode(node, { left: c.x, top: c.y, width: ARCH_NODE_W, height: ARCH_NODE_H }, true);\n            })}\n          </div>\n        ) : (\n          <>\n            <svg className=\"absolute inset-0 w-full h-full pointer-events-none z-10\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\">\n              <defs>\n                <marker\n                  id=\"aui-reg-arrow\"\n                  viewBox=\"0 0 10 10\"\n                  refX=\"6\"\n                  refY=\"5\"\n                  markerWidth=\"6\"\n                  markerHeight=\"6\"\n                  orient=\"auto-start-reverse\"\n                >\n                  <path d=\"M 0 1 L 10 5 L 0 9 z\" className=\"fill-muted-foreground\" />\n                </marker>\n                <marker\n                  id=\"aui-reg-arrow-active\"\n                  viewBox=\"0 0 10 10\"\n                  refX=\"6\"\n                  refY=\"5\"\n                  markerWidth=\"6\"\n                  markerHeight=\"6\"\n                  orient=\"auto-start-reverse\"\n                >\n                  <path d=\"M 0 1 L 10 5 L 0 9 z\" className=\"fill-primary\" />\n                </marker>\n              </defs>\n\n              {connections.map((conn, idx) => {\n                const src = nodeMap.get(conn.from);\n                const dst = nodeMap.get(conn.to);\n                if (!src || !dst) return null;\n\n                const isConnActive = activeNodeId === conn.from || activeNodeId === conn.to;\n                const strokeColor = isConnActive ? \"hsl(var(--primary))\" : \"hsl(var(--border))\";\n                const edgeRouting = conn.routing ?? routing;\n                const geom = buildEdgePath(\n                  src.x as number,\n                  src.y as number,\n                  dst.x as number,\n                  dst.y as number,\n                  edgeRouting,\n                  direction\n                );\n\n                return (\n                  <g key={`edge-${idx}`}>\n                    <path\n                      d={geom.path}\n                      fill=\"none\"\n                      className={cn(conn.animated && \"animate-pulse\")}\n                      stroke={strokeColor}\n                      strokeWidth={isConnActive ? 2 : 1.5}\n                      strokeDasharray={conn.variant === \"dashed\" ? \"4 4\" : undefined}\n                      markerEnd={isConnActive ? \"url(#aui-reg-arrow-active)\" : \"url(#aui-reg-arrow)\"}\n                    />\n                    {conn.animated && (\n                      <circle r=\"3.5\" className=\"fill-primary\">\n                        <animateMotion path={geom.path} dur=\"2.4s\" repeatCount=\"indefinite\" />\n                      </circle>\n                    )}\n                  </g>\n                );\n              })}\n            </svg>\n\n            <div\n              className=\"relative z-20 w-full min-w-[640px] h-full min-h-[320px]\"\n              style={{\n                transform: zoom !== 1 ? `scale(${zoom})` : undefined,\n                transformOrigin: \"top left\",\n                transition: \"transform 0.15s ease-out\",\n              }}\n            >\n              {pctGroups.map((g) => renderGroup(g.id, g.style))}\n\n              {connections.map((conn, idx) => {\n                if (!conn.label) return null;\n                const src = nodeMap.get(conn.from);\n                const dst = nodeMap.get(conn.to);\n                if (!src || !dst) return null;\n\n                const edgeRouting = conn.routing ?? routing;\n                const geom = buildEdgePath(\n                  src.x as number,\n                  src.y as number,\n                  dst.x as number,\n                  dst.y as number,\n                  edgeRouting,\n                  direction\n                );\n\n                return (\n                  <div key={`label-${idx}`} className={labelClass} style={{ left: `${geom.mx}%`, top: `${geom.my}%` }}>\n                    {conn.label}\n                  </div>\n                );\n              })}\n\n              {nodes.map((node) => renderNode(node, { left: `${node.x}%`, top: `${node.y}%` }, false))}\n            </div>\n          </>\n        )}\n\n        {showControls && (\n          <div className=\"absolute bottom-3 right-3 inline-flex items-center bg-card border border-border rounded-md shadow-xs z-30 overflow-hidden\" role=\"toolbar\" aria-label=\"Canvas zoom controls\">\n            <button\n              type=\"button\"\n              className=\"inline-flex items-center justify-center size-6.5 text-muted-foreground hover:text-foreground hover:bg-muted font-mono text-sm font-medium border-r border-border\"\n              onClick={handleZoomIn}\n              title=\"Zoom in\"\n              aria-label=\"Zoom in\"\n            >\n              +\n            </button>\n            <button\n              type=\"button\"\n              className=\"inline-flex items-center justify-center size-6.5 text-muted-foreground hover:text-foreground hover:bg-muted font-mono text-sm font-medium border-r border-border\"\n              onClick={handleZoomOut}\n              title=\"Zoom out\"\n              aria-label=\"Zoom out\"\n            >\n              −\n            </button>\n            <button\n              type=\"button\"\n              className=\"px-1.5 font-mono text-[0.7rem] text-muted-foreground hover:text-foreground hover:bg-muted\"\n              onClick={handleZoomReset}\n              title=\"Reset zoom\"\n              aria-label=\"Reset zoom\"\n            >\n              {Math.round(zoom * 100)}%\n            </button>\n          </div>\n        )}\n      </div>\n\n      {activeNode && (\n        <div className=\"p-3.5 bg-card border-t border-border flex items-center justify-between flex-wrap gap-4\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"font-mono text-sm font-medium text-foreground\">\n              Inspecting: {activeNode.label}\n            </span>\n            {activeNode.badge && (\n              <span className=\"font-mono text-xs px-2 py-0.5 rounded bg-muted text-muted-foreground font-medium\">\n                {activeNode.badge}\n              </span>\n            )}\n          </div>\n          {activeNode.metadata && (\n            <div className=\"flex items-center gap-4 flex-wrap\">\n              {Object.entries(activeNode.metadata).map(([key, val]) => (\n                <div key={key} className=\"flex items-center gap-1.5 font-mono text-xs text-muted-foreground\">\n                  <span>{key}:</span>\n                  <strong className=\"text-foreground\">{val}</strong>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "reactflow-canvas",
      "type": "registry:ui",
      "title": "ReactFlowCanvas",
      "description": "Interactive infinite-canvas node diagram powered by React Flow with Array UI tokens, handles, and styling.",
      "dependencies": [
        "@xyflow/react"
      ],
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/reactflow-canvas.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Background,\n  BackgroundVariant,\n  Controls,\n  Handle,\n  Position,\n  ReactFlow,\n  type Edge,\n  type Node,\n  type NodeProps,\n  type ReactFlowProps,\n} from \"@xyflow/react\";\nimport \"@xyflow/react/dist/style.css\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ArchitectureStatus = \"ok\" | \"warn\" | \"err\" | \"info\";\nexport type ArchitectureDirection = \"LR\" | \"TB\";\nexport type ArchitectureEdgeRouting = \"smoothstep\" | \"bezier\" | \"straight\";\n\nexport interface ArchitectureNodeItem {\n  id: string;\n  label: string;\n  badge?: string;\n  description?: string;\n  x?: number;\n  y?: number;\n  status?: ArchitectureStatus;\n  metadata?: Record<string, string>;\n  group?: string;\n  visited?: boolean;\n}\n\nexport interface ArchitectureConnectionItem {\n  from: string;\n  to: string;\n  label?: string;\n  animated?: boolean;\n  variant?: \"solid\" | \"dashed\";\n  status?: \"ok\" | \"warn\" | \"err\" | \"primary\";\n  routing?: ArchitectureEdgeRouting;\n}\n\nexport interface ArchitectureGroupItem {\n  id: string;\n  label: string;\n  kind?: \"service\" | \"layer\" | \"package\" | \"external\";\n}\n\nexport interface ArrayUINodeData extends Record<string, unknown> {\n  label: string;\n  badge?: string;\n  description?: string;\n  status?: ArchitectureStatus;\n  visited?: boolean;\n  metadata?: Record<string, string>;\n  group?: string;\n  direction?: ArchitectureDirection;\n}\n\nexport interface ArrayUIGroupNodeData extends Record<string, unknown> {\n  label: string;\n  kind?: \"service\" | \"layer\" | \"package\" | \"external\";\n}\n\nexport type ArrayUIFlowNode = Node<ArrayUINodeData, \"architecture\">;\nexport type ArrayUIFlowGroupNode = Node<ArrayUIGroupNodeData, \"group\">;\n\nconst STATUS_BORDER: Record<ArchitectureStatus, string> = {\n  ok: \"border-l-[3px] border-l-emerald-500\",\n  info: \"\",\n  warn: \"border-l-[3px] border-l-amber-500\",\n  err: \"border-l-[3px] border-l-rose-500\",\n};\n\nexport const ArrayUINode: React.FC<NodeProps<ArrayUIFlowNode>> = ({ data, selected }) => {\n  const isTB = data.direction === \"TB\";\n  const targetPos = isTB ? Position.Top : Position.Left;\n  const sourcePos = isTB ? Position.Bottom : Position.Right;\n\n  return (\n    <div\n      className={cn(\n        \"relative bg-card border border-border rounded-md shadow-xs transition-all hover:border-primary/60 cursor-grab\",\n        selected && \"border-primary ring-2 ring-primary bg-primary/5\",\n        data.status && STATUS_BORDER[data.status],\n        !data.status && data.visited && \"border-l-[3px] border-l-emerald-500\"\n      )}\n      style={{ width: 184, minHeight: 72, padding: \"0.6rem 0.8rem\" }}\n    >\n      <Handle\n        type=\"target\"\n        position={targetPos}\n        className=\"!size-2 !rounded-full !bg-background !border !border-border hover:!bg-primary hover:!border-primary\"\n      />\n\n      <div className=\"flex items-center justify-between gap-1.5 mb-1\">\n        <div className=\"flex items-center gap-1.5 min-w-0\">\n          {data.visited && (\n            <span\n              className=\"inline-flex items-center justify-center size-3.5 rounded-full bg-emerald-500/20 text-emerald-600 dark:text-emerald-400 text-[10px] font-medium shrink-0\"\n              title=\"Visited\"\n              aria-label=\"Visited\"\n            >\n              ✓\n            </span>\n          )}\n          <span className=\"font-mono text-sm font-medium tracking-tight text-foreground truncate\" title={data.label}>\n            {data.label}\n          </span>\n        </div>\n        {data.badge && (\n          <span className=\"font-mono text-xs font-medium px-1.5 py-0.5 rounded bg-muted text-muted-foreground shrink-0\">\n            {data.badge}\n          </span>\n        )}\n      </div>\n\n      {data.description && (\n        <p className=\"text-xs text-muted-foreground line-clamp-2 leading-relaxed\">{data.description}</p>\n      )}\n\n      <Handle\n        type=\"source\"\n        position={sourcePos}\n        className=\"!size-2 !rounded-full !bg-background !border !border-border hover:!bg-primary hover:!border-primary\"\n      />\n    </div>\n  );\n};\n\nexport const ArrayUIGroupNode: React.FC<NodeProps<ArrayUIFlowGroupNode>> = ({ data, selected }) => {\n  return (\n    <div\n      className={cn(\n        \"w-full h-full relative rounded-md border border-dashed border-border bg-card/40 pointer-events-none\",\n        selected && \"border-primary\"\n      )}\n    >\n      <div className=\"flex items-center gap-2 h-7 px-2.5 font-mono text-xs text-muted-foreground\">\n        <span className=\"font-medium text-foreground\">{data.label}</span>\n        {data.kind && <span className=\"uppercase tracking-wider text-[0.68rem]\">{data.kind}</span>}\n      </div>\n    </div>\n  );\n};\n\nexport const arrayUINodeTypes = {\n  architecture: ArrayUINode,\n  group: ArrayUIGroupNode,\n};\n\nexport function toReactFlowNodesAndEdges(\n  nodes: ArchitectureNodeItem[],\n  connections: ArchitectureConnectionItem[] = [],\n  groups: ArchitectureGroupItem[] = [],\n  options: { direction?: ArchitectureDirection; defaultRouting?: ArchitectureEdgeRouting } = {}\n): {\n  nodes: (ArrayUIFlowNode | ArrayUIFlowGroupNode)[];\n  edges: Edge[];\n} {\n  const direction = options.direction ?? \"LR\";\n  const defaultRouting = options.defaultRouting ?? \"smoothstep\";\n\n  const flowNodes: (ArrayUIFlowNode | ArrayUIFlowGroupNode)[] = [];\n\n  // Group nodes\n  for (const g of groups) {\n    const members = nodes.filter((n) => n.group === g.id);\n    if (members.length === 0) continue;\n    flowNodes.push({\n      id: g.id,\n      type: \"group\",\n      position: { x: 0, y: 0 },\n      style: { width: \"100%\", height: \"100%\", zIndex: -1 },\n      data: { label: g.label, kind: g.kind },\n      draggable: false,\n      selectable: false,\n    });\n  }\n\n  // Member nodes\n  nodes.forEach((n, idx) => {\n    const defaultX = direction === \"LR\" ? idx * 240 + 40 : 120;\n    const defaultY = direction === \"LR\" ? 120 : idx * 140 + 40;\n    const x = n.x !== undefined ? n.x * 6 : defaultX;\n    const y = n.y !== undefined ? n.y * 4 : defaultY;\n\n    flowNodes.push({\n      id: n.id,\n      type: \"architecture\",\n      position: { x, y },\n      data: {\n        label: n.label,\n        badge: n.badge,\n        description: n.description,\n        status: n.status,\n        visited: n.visited,\n        metadata: n.metadata,\n        group: n.group,\n        direction,\n      },\n    });\n  });\n\n  // Edges\n  const flowEdges: Edge[] = connections.map((c, i) => ({\n    id: `e-${c.from}-${c.to}-${i}`,\n    source: c.from,\n    target: c.to,\n    type: c.routing ?? defaultRouting,\n    animated: c.animated,\n    label: c.label,\n    style: {\n      stroke: c.status === \"primary\" ? \"hsl(var(--primary))\" : \"hsl(var(--border))\",\n      strokeWidth: 1.5,\n      strokeDasharray: c.variant === \"dashed\" ? \"4 4\" : undefined,\n    },\n  }));\n\n  return { nodes: flowNodes, edges: flowEdges };\n}\n\nexport interface ReactFlowCanvasProps extends Omit<ReactFlowProps, \"nodes\" | \"edges\" | \"height\"> {\n  title?: string;\n  subtitle?: string;\n  badge?: React.ReactNode;\n  nodes?: ArchitectureNodeItem[] | Node[];\n  connections?: ArchitectureConnectionItem[];\n  groups?: ArchitectureGroupItem[];\n  direction?: ArchitectureDirection;\n  defaultRouting?: ArchitectureEdgeRouting;\n  edges?: Edge[];\n  height?: number | string;\n  showControls?: boolean;\n  showBackground?: boolean;\n}\n\nexport function ReactFlowCanvas({\n  title = \"System Architecture\",\n  subtitle,\n  badge,\n  nodes: inputNodes = [],\n  connections = [],\n  groups = [],\n  direction = \"LR\",\n  defaultRouting = \"smoothstep\",\n  edges: controlledEdges,\n  height = 480,\n  showControls = true,\n  showBackground = true,\n  className,\n  ...props\n}: ReactFlowCanvasProps) {\n  const isArrayUINodes =\n    inputNodes.length === 0 ||\n    !(\"position\" in (inputNodes[0] as Record<string, unknown>));\n\n  const { nodes, edges } = React.useMemo(() => {\n    if (!isArrayUINodes) {\n      return {\n        nodes: inputNodes as Node[],\n        edges: controlledEdges ?? [],\n      };\n    }\n    return toReactFlowNodesAndEdges(\n      inputNodes as ArchitectureNodeItem[],\n      connections,\n      groups,\n      { direction, defaultRouting }\n    );\n  }, [isArrayUINodes, inputNodes, connections, groups, direction, defaultRouting, controlledEdges]);\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col border border-border rounded-lg bg-card overflow-hidden shadow-xs my-6\",\n        className\n      )}\n    >\n      {(title || badge) && (\n        <div className=\"flex items-center justify-between p-3.5 bg-background border-b border-border flex-wrap gap-2\">\n          <div className=\"flex items-center gap-2.5\">\n            <span className=\"font-heading font-bold text-base text-foreground\">{title}</span>\n            {subtitle && <span className=\"text-sm text-muted-foreground\">{subtitle}</span>}\n          </div>\n          {badge && <div>{badge}</div>}\n        </div>\n      )}\n\n      <div style={{ width: \"100%\", height, position: \"relative\" }}>\n        <ReactFlow\n          nodes={nodes}\n          edges={controlledEdges ?? edges}\n          nodeTypes={arrayUINodeTypes}\n          fitView\n          {...props}\n        >\n          {showBackground && (\n            <Background\n              variant={BackgroundVariant.Dots}\n              gap={20}\n              size={1.5}\n              color=\"hsl(var(--border))\"\n            />\n          )}\n          {showControls && <Controls />}\n        </ReactFlow>\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "sequence-diagram",
      "type": "registry:ui",
      "title": "SequenceDiagram",
      "description": "Interactive sequence protocol walkthrough with step scrubber playback, lifelines, and callout notes.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/sequence-diagram.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SequenceStepItem {\n  from: string;\n  to: string;\n  label: string;\n  type?: \"request\" | \"response\" | \"commit\" | \"error\";\n  note?: string;\n  dashed?: boolean;\n}\n\nexport interface SequenceDiagramProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  actors: string[];\n  steps: SequenceStepItem[];\n  interactiveScrubber?: boolean;\n  initialStep?: number;\n}\n\nexport function SequenceDiagram({\n  title = \"Sequence Protocol\",\n  actors,\n  steps,\n  interactiveScrubber = true,\n  initialStep = 0,\n  className,\n  ...props\n}: SequenceDiagramProps) {\n  const [currentStep, setCurrentStep] = React.useState(\n    interactiveScrubber ? initialStep : steps.length - 1\n  );\n  const [isPlaying, setIsPlaying] = React.useState(false);\n\n  React.useEffect(() => {\n    if (!isPlaying) return;\n    const timer = setInterval(() => {\n      setCurrentStep((prev) => {\n        if (prev >= steps.length - 1) {\n          setIsPlaying(false);\n          return prev;\n        }\n        return prev + 1;\n      });\n    }, 1500);\n    return () => clearInterval(timer);\n  }, [isPlaying, steps.length]);\n\n  const handlePrev = () => {\n    setIsPlaying(false);\n    setCurrentStep((p) => Math.max(0, p - 1));\n  };\n\n  const handleNext = () => {\n    setIsPlaying(false);\n    setCurrentStep((p) => Math.min(steps.length - 1, p + 1));\n  };\n\n  const handlePlayPause = () => {\n    if (currentStep >= steps.length - 1 && !isPlaying) {\n      setCurrentStep(0);\n      setIsPlaying(true);\n    } else {\n      setIsPlaying((p) => !p);\n    }\n  };\n\n  const actorCount = actors.length;\n  const getActorIndex = (actorName: string) => {\n    const idx = actors.indexOf(actorName);\n    return idx >= 0 ? idx : 0;\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col border border-border rounded-lg bg-card overflow-hidden shadow-xs my-6\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between p-3.5 bg-background border-b border-border flex-wrap gap-2\">\n        <span className=\"font-heading font-bold text-base text-foreground\">{title}</span>\n        {interactiveScrubber && (\n          <div className=\"flex items-center gap-2\">\n            <span className=\"font-mono text-xs font-medium text-muted-foreground px-2 py-0.5 rounded border border-border bg-card\">\n              Step {currentStep + 1} of {steps.length}\n            </span>\n            <button\n              type=\"button\"\n              className=\"inline-flex items-center justify-center w-7 h-7 rounded border border-border bg-card text-foreground disabled:opacity-40\"\n              onClick={handlePrev}\n              disabled={currentStep === 0}\n              aria-label=\"Previous step\"\n            >\n              ◀\n            </button>\n            <button\n              type=\"button\"\n              className=\"inline-flex items-center justify-center w-7 h-7 rounded bg-primary text-primary-foreground font-bold\"\n              onClick={handlePlayPause}\n              aria-label={isPlaying ? \"Pause\" : \"Play\"}\n            >\n              {isPlaying ? \"❚❚\" : \"▶\"}\n            </button>\n            <button\n              type=\"button\"\n              className=\"inline-flex items-center justify-center w-7 h-7 rounded border border-border bg-card text-foreground disabled:opacity-40\"\n              onClick={handleNext}\n              disabled={currentStep >= steps.length - 1}\n              aria-label=\"Next step\"\n            >\n              ▶\n            </button>\n          </div>\n        )}\n      </div>\n\n      <div className=\"p-6 overflow-x-auto bg-background min-w-full\">\n        <div className=\"flex justify-around min-w-[540px] mb-6\">\n          {actors.map((actor, idx) => (\n            <div\n              key={idx}\n              className=\"px-4 py-2 bg-card border border-border rounded-md font-mono text-sm font-medium text-foreground text-center min-w-[120px] shadow-xs\"\n            >\n              {actor}\n            </div>\n          ))}\n        </div>\n\n        <div className=\"flex flex-col gap-5 min-w-[540px] relative\">\n          {steps.map((step, idx) => {\n            const fromIdx = getActorIndex(step.from);\n            const toIdx = getActorIndex(step.to);\n            const minIdx = Math.min(fromIdx, toIdx);\n            const maxIdx = Math.max(fromIdx, toIdx);\n            const goingRight = fromIdx < toIdx;\n\n            const leftPercent = ((minIdx + 0.5) / actorCount) * 100;\n            const widthPercent = ((maxIdx - minIdx) / actorCount) * 100;\n\n            const isDimmed = interactiveScrubber && idx > currentStep;\n            const isActive = interactiveScrubber && idx === currentStep;\n\n            return (\n              <React.Fragment key={idx}>\n                <div\n                  className={cn(\n                    \"flex items-center relative py-1 transition-opacity duration-300\",\n                    isDimmed && \"opacity-30\",\n                    isActive && \"opacity-100\"\n                  )}\n                >\n                  <div\n                    className={cn(\n                      \"relative h-0.5 bg-border flex items-center justify-center\",\n                      step.dashed && \"border-b border-dashed border-border bg-transparent\",\n                      isActive && \"bg-primary\"\n                    )}\n                    style={{\n                      marginLeft: `${leftPercent}%`,\n                      width: `${widthPercent}%`,\n                    }}\n                  >\n                    <span\n                      className={cn(\n                        \"absolute -top-2.5 text-xs\",\n                        isActive ? \"text-primary font-bold\" : \"text-muted-foreground\",\n                        goingRight ? \"-right-1\" : \"-left-1\"\n                      )}\n                    >\n                      {goingRight ? \"►\" : \"◄\"}\n                    </span>\n                    <span\n                      className={cn(\n                        \"bg-card border border-border rounded px-2.5 py-0.5 font-mono text-xs font-medium text-foreground whitespace-nowrap z-10 shadow-xs\",\n                        isActive && \"border-primary bg-primary/10 text-primary ring-1 ring-primary\"\n                      )}\n                    >\n                      {step.label}\n                    </span>\n                  </div>\n                </div>\n\n                {step.note && (\n                  <div\n                    className={cn(\n                      \"mx-auto max-w-lg p-2.5 rounded-md bg-amber-500/10 border border-amber-500/20 text-xs text-foreground text-center\",\n                      isDimmed && \"opacity-30\",\n                      isActive && \"opacity-100 ring-1 ring-amber-500\"\n                    )}\n                  >\n                    💡 {step.note}\n                  </div>\n                )}\n              </React.Fragment>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "state-machine",
      "type": "registry:ui",
      "title": "StateMachine",
      "description": "Finite state machine diagram with interactive transition triggers, active state highlighting, and audit history.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/state-machine.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface StateNodeItem {\n  id: string;\n  label: string;\n  description?: string;\n  type?: \"initial\" | \"normal\" | \"terminal\";\n}\n\nexport interface StateTransitionItem {\n  from: string;\n  to: string;\n  trigger: string;\n  description?: string;\n}\n\nexport interface StateMachineProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  initialState: string;\n  states: StateNodeItem[];\n  transitions: StateTransitionItem[];\n  onTransition?: (from: string, to: string, trigger: string) => void;\n}\n\nexport function StateMachine({\n  title = \"Finite State Machine\",\n  initialState,\n  states,\n  transitions,\n  onTransition,\n  className,\n  ...props\n}: StateMachineProps) {\n  const [currentState, setCurrentState] = React.useState<string>(initialState);\n  const [history, setHistory] = React.useState<Array<{ from: string; to: string; trigger: string }>>([\n    { from: \"—\", to: initialState, trigger: \"BOOTSTRAP\" },\n  ]);\n\n  const activeNode = states.find((s) => s.id === currentState);\n  const availableTransitions = transitions.filter((t) => t.from === currentState);\n\n  const handleTrigger = (trans: StateTransitionItem) => {\n    setHistory((prev) => [\n      { from: currentState, to: trans.to, trigger: trans.trigger },\n      ...prev.slice(0, 4),\n    ]);\n    setCurrentState(trans.to);\n    onTransition?.(currentState, trans.to, trans.trigger);\n  };\n\n  const handleReset = () => {\n    setCurrentState(initialState);\n    setHistory((prev) => [\n      { from: currentState, to: initialState, trigger: \"RESET\" },\n      ...prev.slice(0, 4),\n    ]);\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col border border-border rounded-lg bg-card overflow-hidden shadow-xs my-6\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center justify-between p-3.5 bg-background border-b border-border flex-wrap gap-2\">\n        <span className=\"font-heading font-bold text-base text-foreground\">{title}</span>\n        <div className=\"flex items-center gap-2\">\n          <span className=\"font-mono text-xs font-medium px-2 py-0.5 rounded bg-primary/10 text-primary border border-primary/20\">\n            Active: {activeNode?.label || currentState}\n          </span>\n          <button\n            type=\"button\"\n            className=\"font-mono text-xs px-2 py-0.5 rounded border border-border bg-card text-muted-foreground hover:text-foreground\"\n            onClick={handleReset}\n          >\n            Reset\n          </button>\n        </div>\n      </div>\n\n      <div className=\"p-5 flex flex-col gap-5\">\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3\">\n          {states.map((state) => {\n            const isActive = state.id === currentState;\n            return (\n              <div\n                key={state.id}\n                className={cn(\n                  \"p-3.5 rounded-md border border-border bg-background cursor-pointer transition-all hover:border-foreground/40\",\n                  isActive && \"border-primary ring-2 ring-primary bg-primary/5\"\n                )}\n                onClick={() => {\n                  const validTrans = transitions.find((t) => t.from === currentState && t.to === state.id);\n                  if (validTrans) handleTrigger(validTrans);\n                }}\n              >\n                <div className=\"flex items-center justify-between mb-1\">\n                  <span className=\"font-mono text-sm font-medium text-foreground\">\n                    {state.label}\n                  </span>\n                  <span className=\"font-mono text-[11px] uppercase font-medium text-muted-foreground\">\n                    {state.type || \"state\"}\n                  </span>\n                </div>\n                {state.description && (\n                  <p className=\"text-xs text-muted-foreground leading-relaxed\">\n                    {state.description}\n                  </p>\n                )}\n              </div>\n            );\n          })}\n        </div>\n\n        <div className=\"p-4 bg-background border border-border rounded-md\">\n          <div className=\"font-mono text-xs font-medium uppercase tracking-wider text-muted-foreground mb-2\">\n            Available Triggers for {activeNode?.label || currentState}:\n          </div>\n          {availableTransitions.length > 0 ? (\n            <div className=\"flex flex-wrap gap-2\">\n              {availableTransitions.map((trans, idx) => (\n                <button\n                  key={idx}\n                  type=\"button\"\n                  className=\"font-mono text-xs px-2.5 py-1 rounded border border-border bg-card hover:border-primary text-foreground transition-colors\"\n                  onClick={() => handleTrigger(trans)}\n                >\n                  ⚡ {trans.trigger} → <span className=\"font-bold\">{trans.to}</span>\n                </button>\n              ))}\n            </div>\n          ) : (\n            <p className=\"text-xs text-muted-foreground m-0\">\n              Terminal state reached. Click &quot;Reset&quot; to restart lifecycle.\n            </p>\n          )}\n        </div>\n\n        {history.length > 1 && (\n          <div className=\"pt-2 border-t border-border flex flex-wrap gap-2 items-center\">\n            <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground\">\n              Trail:\n            </span>\n            {history.map((h, i) => (\n              <span\n                key={i}\n                className=\"font-mono text-xs px-2 py-0.5 rounded bg-muted text-muted-foreground\"\n              >\n                {h.from} → {h.trigger} → {h.to}\n              </span>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "concept-walkthrough",
      "type": "registry:ui",
      "title": "ConceptWalkthrough",
      "description": "Split-pane storyboard explainer with synchronized visual stage, narrative milestones, and keyboard navigation.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/concept-walkthrough.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ConceptWalkthroughStep {\n  title: string;\n  badge?: string;\n  content: React.ReactNode;\n  takeaway?: string;\n  visual: React.ReactNode;\n}\n\nexport interface ConceptWalkthroughProps extends React.HTMLAttributes<HTMLDivElement> {\n  steps: ConceptWalkthroughStep[];\n  activeStep?: number;\n  onStepChange?: (stepIndex: number) => void;\n}\n\nexport function ConceptWalkthrough({\n  steps,\n  activeStep: controlledStep,\n  onStepChange,\n  className,\n  ...props\n}: ConceptWalkthroughProps) {\n  const [internalStep, setInternalStep] = React.useState(0);\n  const stepIdx = controlledStep !== undefined ? controlledStep : internalStep;\n\n  const setStep = (newStep: number) => {\n    const clamped = Math.max(0, Math.min(steps.length - 1, newStep));\n    if (controlledStep === undefined) {\n      setInternalStep(clamped);\n    }\n    onStepChange?.(clamped);\n  };\n\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"ArrowRight\") {\n        setStep(stepIdx + 1);\n      } else if (e.key === \"ArrowLeft\") {\n        setStep(stepIdx - 1);\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [stepIdx, steps.length]);\n\n  const activeStepData = steps[stepIdx] || steps[0];\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col border border-border rounded-lg bg-card overflow-hidden shadow-xs my-6\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"grid grid-cols-1 md:grid-cols-2 min-h-[420px]\">\n        <div className=\"p-6 flex flex-col justify-between border-b md:border-b-0 md:border-r border-border bg-card\">\n          <div>\n            <div className=\"flex items-center justify-between mb-2\">\n              <span className=\"font-mono text-xs uppercase font-medium text-primary bg-primary/10 px-2 py-0.5 rounded\">\n                {activeStepData.badge || `Stage ${stepIdx + 1}`}\n              </span>\n              <span className=\"font-mono text-xs text-muted-foreground\">\n                Use ← → keys to navigate\n              </span>\n            </div>\n\n            <h3 className=\"font-heading text-xl font-bold text-foreground mb-3 leading-tight\">\n              {activeStepData.title}\n            </h3>\n            <div className=\"text-sm text-foreground leading-relaxed mb-4\">\n              {activeStepData.content}\n            </div>\n\n            {activeStepData.takeaway && (\n              <div className=\"p-3 bg-muted/40 border-l-2 border-primary rounded-r text-xs text-foreground mb-5\">\n                <strong>Key Maxim:</strong> {activeStepData.takeaway}\n              </div>\n            )}\n          </div>\n\n          <div className=\"flex items-center justify-between pt-4 border-t border-border\">\n            <span className=\"font-mono text-xs text-muted-foreground font-medium\">\n              Step {stepIdx + 1} of {steps.length}\n            </span>\n            <div className=\"flex items-center gap-2\">\n              <button\n                type=\"button\"\n                className=\"inline-flex items-center justify-center w-7 h-7 rounded border border-border bg-background text-foreground disabled:opacity-40\"\n                onClick={() => setStep(stepIdx - 1)}\n                disabled={stepIdx === 0}\n                aria-label=\"Previous step\"\n              >\n                ◀\n              </button>\n              <div className=\"flex gap-1.5\">\n                {steps.map((_, i) => (\n                  <button\n                    key={i}\n                    type=\"button\"\n                    className={cn(\n                      \"w-2.5 h-2.5 rounded-full border border-border transition-colors\",\n                      i === stepIdx ? \"bg-primary border-primary\" : \"bg-muted\"\n                    )}\n                    onClick={() => setStep(i)}\n                    aria-label={`Jump to step ${i + 1}`}\n                  />\n                ))}\n              </div>\n              <button\n                type=\"button\"\n                className=\"inline-flex items-center justify-center w-7 h-7 rounded bg-primary text-primary-foreground font-bold disabled:opacity-40\"\n                onClick={() => setStep(stepIdx + 1)}\n                disabled={stepIdx >= steps.length - 1}\n                aria-label=\"Next step\"\n              >\n                ▶\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"p-6 bg-background flex items-center justify-center overflow-hidden\">\n          {activeStepData.visual}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "tradeoff-matrix",
      "type": "registry:ui",
      "title": "TradeoffMatrix",
      "description": "Architectural trade-off comparison matrix evaluating candidate technologies across weighted dimensions.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/tradeoff-matrix.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface TradeoffOptionItem {\n  name: string;\n  badge?: string;\n  scores: Record<string, \"high\" | \"med\" | \"low\" | string>;\n  pros?: string[];\n  cons?: string[];\n  verdict?: string;\n}\n\nexport interface TradeoffMatrixProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  description?: string;\n  dimensions: string[];\n  options: TradeoffOptionItem[];\n  recommendation?: string;\n}\n\nexport function TradeoffMatrix({\n  title = \"Architectural Trade-Off Analysis\",\n  description = \"Evaluating system trade-offs across critical engineering dimensions.\",\n  dimensions,\n  options,\n  recommendation,\n  className,\n  ...props\n}: TradeoffMatrixProps) {\n  const renderScore = (score: string) => {\n    const lower = score.toLowerCase();\n    if (lower === \"high\" || lower === \"great\" || lower === \"low latency\" || lower === \"low cost\") {\n      return (\n        <span className=\"inline-flex items-center gap-1 font-mono text-xs font-medium px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-500\">\n          ● {score}\n        </span>\n      );\n    }\n    if (lower === \"med\" || lower === \"medium\" || lower === \"fair\" || lower === \"moderate\") {\n      return (\n        <span className=\"inline-flex items-center gap-1 font-mono text-xs font-medium px-2 py-0.5 rounded bg-amber-500/10 text-amber-500\">\n          ▲ {score}\n        </span>\n      );\n    }\n    if (lower === \"low\" || lower === \"poor\" || lower === \"high complexity\" || lower === \"high cost\") {\n      return (\n        <span className=\"inline-flex items-center gap-1 font-mono text-xs font-medium px-2 py-0.5 rounded bg-rose-500/10 text-rose-500\">\n          ▼ {score}\n        </span>\n      );\n    }\n    return <span className=\"font-mono text-xs font-medium\">{score}</span>;\n  };\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col border border-border rounded-lg bg-card overflow-hidden shadow-xs my-6\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"p-4 bg-background border-b border-border\">\n        <h3 className=\"font-heading text-lg font-bold text-foreground mb-1\">{title}</h3>\n        {description && <p className=\"text-sm text-muted-foreground m-0\">{description}</p>}\n      </div>\n\n      <div className=\"overflow-x-auto w-full\">\n        <table className=\"w-full border-collapse text-left text-sm\">\n          <thead>\n            <tr className=\"border-b border-border bg-muted/20\">\n              <th className=\"p-3.5 font-mono text-xs font-medium uppercase tracking-wider text-muted-foreground\">\n                Candidate Option\n              </th>\n              {dimensions.map((dim) => (\n                <th\n                  key={dim}\n                  className=\"p-3.5 font-mono text-xs font-medium uppercase tracking-wider text-muted-foreground\"\n                >\n                  {dim}\n                </th>\n              ))}\n              <th className=\"p-3.5 font-mono text-xs font-medium uppercase tracking-wider text-muted-foreground\">\n                Key Advantages & Trade-Offs\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {options.map((opt, idx) => (\n              <tr key={idx} className=\"border-b border-border last:border-b-0 hover:bg-muted/10\">\n                <td className=\"p-3.5 align-middle\">\n                  <div className=\"flex flex-col gap-0.5\">\n                    <span className=\"font-heading font-bold text-sm text-foreground\">{opt.name}</span>\n                    {opt.badge && (\n                      <span className=\"font-mono text-xs text-muted-foreground\">\n                        {opt.badge}\n                      </span>\n                    )}\n                  </div>\n                </td>\n                {dimensions.map((dim) => (\n                  <td key={dim} className=\"p-3.5 align-middle\">\n                    {renderScore(opt.scores[dim] || \"—\")}\n                  </td>\n                ))}\n                <td className=\"p-3.5 align-middle\">\n                  <div className=\"flex flex-col gap-1 min-w-[200px]\">\n                    {opt.pros && opt.pros.length > 0 && (\n                      <div className=\"text-xs text-emerald-500 font-medium\">\n                        <strong>+ </strong> {opt.pros.join(\", \")}\n                      </div>\n                    )}\n                    {opt.cons && opt.cons.length > 0 && (\n                      <div className=\"text-xs text-rose-500 font-medium\">\n                        <strong>− </strong> {opt.cons.join(\", \")}\n                      </div>\n                    )}\n                    {opt.verdict && (\n                      <div className=\"font-mono text-xs text-muted-foreground mt-0.5\">\n                        Verdict: {opt.verdict}\n                      </div>\n                    )}\n                  </div>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n\n      {recommendation && (\n        <div className=\"p-3.5 bg-primary/5 border-t border-primary/20 flex items-center gap-2 text-xs text-primary font-medium\">\n          <span className=\"font-bold\">Architectural Recommendation:</span>\n          <span>{recommendation}</span>\n        </div>\n      )}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "analogy-card",
      "type": "registry:ui",
      "title": "AnalogyCard",
      "description": "Dual-perspective mental model card bridging real-world analogies to underlying technical mechanisms.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/analogy-card.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface AnalogyMappingPoint {\n  analogy: string;\n  concept: string;\n}\n\nexport interface AnalogyCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  title?: string;\n  analogyTitle: string;\n  analogyBadge?: string;\n  analogyDescription: string;\n  conceptTitle: string;\n  conceptBadge?: string;\n  conceptDescription: string;\n  mappingPoints?: AnalogyMappingPoint[];\n}\n\nexport function AnalogyCard({\n  title = \"Mental Model & Concept Analogy\",\n  analogyTitle,\n  analogyBadge = \"Everyday Analogy\",\n  analogyDescription,\n  conceptTitle,\n  conceptBadge = \"System Mechanics\",\n  conceptDescription,\n  mappingPoints = [],\n  className,\n  ...props\n}: AnalogyCardProps) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col border border-border rounded-lg bg-card overflow-hidden shadow-xs my-6\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"p-3.5 bg-background border-b border-border flex items-center justify-between\">\n        <span className=\"font-heading font-bold text-base text-foreground\">{title}</span>\n      </div>\n\n      <div className=\"grid grid-cols-1 md:grid-cols-2\">\n        <div className=\"p-5 flex flex-col border-b md:border-b-0 md:border-r border-border bg-card\">\n          <div className=\"flex items-center gap-2 mb-3\">\n            <span className=\"font-mono text-xs uppercase font-medium px-2 py-0.5 rounded bg-amber-500/10 text-amber-500 border border-amber-500/20\">\n              {analogyBadge}\n            </span>\n            <h4 className=\"font-heading font-bold text-base text-foreground m-0\">\n              {analogyTitle}\n            </h4>\n          </div>\n          <p className=\"text-sm text-foreground leading-relaxed mb-4\">\n            {analogyDescription}\n          </p>\n\n          {mappingPoints.length > 0 && (\n            <div className=\"flex flex-col gap-2 mt-auto pt-3 border-t border-border\">\n              <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground\">\n                Metaphor Component:\n              </span>\n              {mappingPoints.map((pt, idx) => (\n                <div key={idx} className=\"flex items-start gap-2 text-xs text-muted-foreground\">\n                  <span className=\"text-primary font-bold\">↳</span>\n                  <span>{pt.analogy}</span>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n\n        <div className=\"p-5 flex flex-col bg-background\">\n          <div className=\"flex items-center gap-2 mb-3\">\n            <span className=\"font-mono text-xs uppercase font-medium px-2 py-0.5 rounded bg-primary/10 text-primary border border-primary/20\">\n              {conceptBadge}\n            </span>\n            <h4 className=\"font-heading font-bold text-base text-foreground m-0\">\n              {conceptTitle}\n            </h4>\n          </div>\n          <p className=\"text-sm text-foreground leading-relaxed mb-4\">\n            {conceptDescription}\n          </p>\n\n          {mappingPoints.length > 0 && (\n            <div className=\"flex flex-col gap-2 mt-auto pt-3 border-t border-border\">\n              <span className=\"font-mono text-xs uppercase font-medium text-muted-foreground\">\n                Corresponds In Software To:\n              </span>\n              {mappingPoints.map((pt, idx) => (\n                <div key={idx} className=\"flex items-start gap-2 text-xs text-muted-foreground\">\n                  <span className=\"text-primary font-bold\">↳</span>\n                  <span className=\"font-mono text-xs font-medium text-foreground\">\n                    {pt.concept}\n                  </span>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "combobox",
      "type": "registry:ui",
      "title": "Combobox",
      "description": "Searchable autocomplete select with keyboard navigation, empty states, and badge support.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/combobox.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ComboboxOption<T = string> {\n  value: T;\n  label: string;\n  description?: string;\n  badge?: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport interface ComboboxProps<T = string> {\n  options: ComboboxOption<T>[];\n  value?: T;\n  onChange: (value: T) => void;\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  loading?: boolean;\n  disabled?: boolean;\n  onSearchChange?: (query: string) => void;\n  renderOption?: (option: ComboboxOption<T>) => React.ReactNode;\n  className?: string;\n}\n\nexport function Combobox<T = string>({\n  options = [],\n  value,\n  onChange,\n  placeholder = \"Select option...\",\n  searchPlaceholder = \"Search...\",\n  emptyText = \"No options found\",\n  loading = false,\n  disabled = false,\n  onSearchChange,\n  renderOption,\n  className,\n}: ComboboxProps<T>) {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [search, setSearch] = React.useState(\"\");\n  const [highlightedIndex, setHighlightedIndex] = React.useState(0);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  const selectedOption = React.useMemo(\n    () => options.find((opt) => opt.value === value),\n    [options, value]\n  );\n\n  const filteredOptions = React.useMemo(() => {\n    if (onSearchChange) return options;\n    if (!search.trim()) return options;\n    const q = search.toLowerCase();\n    return options.filter(\n      (opt) =>\n        opt.label.toLowerCase().includes(q) ||\n        (opt.description && opt.description.toLowerCase().includes(q)) ||\n        (opt.badge && opt.badge.toLowerCase().includes(q))\n    );\n  }, [options, search, onSearchChange]);\n\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleClickOutside = (e: MouseEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(e.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    if (isOpen) {\n      setHighlightedIndex(0);\n      const timer = setTimeout(() => {\n        inputRef.current?.focus();\n      }, 50);\n      return () => clearTimeout(timer);\n    } else {\n      setSearch(\"\");\n    }\n  }, [isOpen]);\n\n  const handleSelect = (option: ComboboxOption<T>) => {\n    if (option.disabled) return;\n    onChange(option.value);\n    setIsOpen(false);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (!isOpen) {\n      if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n        e.preventDefault();\n        setIsOpen(true);\n      }\n      return;\n    }\n\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      setIsOpen(false);\n    } else if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setHighlightedIndex((prev) =>\n        prev < filteredOptions.length - 1 ? prev + 1 : prev\n      );\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : 0));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (filteredOptions[highlightedIndex]) {\n        handleSelect(filteredOptions[highlightedIndex]);\n      }\n    }\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\"relative w-full\", className)}\n      onKeyDown={handleKeyDown}\n    >\n      <button\n        type=\"button\"\n        className={cn(\n          \"flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 text-left\",\n          isOpen && \"ring-1 ring-ring border-primary\"\n        )}\n        onClick={() => !disabled && setIsOpen((prev) => !prev)}\n        disabled={disabled}\n      >\n        <span className=\"truncate\">\n          {selectedOption ? (\n            <span className=\"inline-flex items-center gap-2\">\n              {selectedOption.icon}\n              <span className=\"font-medium text-foreground\">{selectedOption.label}</span>\n              {selectedOption.badge && (\n                <span className=\"font-mono text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground\">\n                  {selectedOption.badge}\n                </span>\n              )}\n            </span>\n          ) : (\n            <span className=\"text-muted-foreground\">{placeholder}</span>\n          )}\n        </span>\n        <svg\n          className={cn(\"h-4 w-4 shrink-0 opacity-50 transition-transform\", isOpen && \"rotate-180\")}\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n        >\n          <polyline points=\"6 9 12 15 18 9\" />\n        </svg>\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-[calc(100%+4px)] left-0 right-0 z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg overflow-hidden animate-in fade-in-0 zoom-in-95\">\n          <div className=\"flex items-center px-3 border-b border-border bg-muted/30\">\n            <svg\n              className=\"mr-2 h-4 w-4 shrink-0 opacity-50\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n            >\n              <circle cx=\"11\" cy=\"11\" r=\"8\" />\n              <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n            </svg>\n            <input\n              ref={inputRef}\n              type=\"text\"\n              className=\"flex h-9 w-full bg-transparent py-2 text-sm outline-hidden placeholder:text-muted-foreground\"\n              placeholder={searchPlaceholder}\n              value={search}\n              onChange={(e) => {\n                setSearch(e.target.value);\n                setHighlightedIndex(0);\n                onSearchChange?.(e.target.value);\n              }}\n            />\n          </div>\n\n          <ul className=\"max-h-[280px] overflow-y-auto p-1 text-sm\">\n            {loading ? (\n              <li className=\"py-6 text-center text-xs text-muted-foreground\">Loading...</li>\n            ) : filteredOptions.length === 0 ? (\n              <li className=\"py-6 text-center text-xs text-muted-foreground\">{emptyText}</li>\n            ) : (\n              filteredOptions.map((opt, idx) => {\n                const isSelected = opt.value === value;\n                const isHighlighted = idx === highlightedIndex;\n\n                return (\n                  <li\n                    key={String(opt.value)}\n                    className={cn(\n                      \"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors\",\n                      isHighlighted && \"bg-accent text-accent-foreground\",\n                      isSelected && \"font-semibold\",\n                      opt.disabled && \"pointer-events-none opacity-50\"\n                    )}\n                    onClick={() => handleSelect(opt)}\n                    onMouseEnter={() => setHighlightedIndex(idx)}\n                  >\n                    {renderOption ? (\n                      renderOption(opt)\n                    ) : (\n                      <>\n                        {opt.icon && <span className=\"mr-2 shrink-0\">{opt.icon}</span>}\n                        <div className=\"flex flex-col flex-1\">\n                          <span>{opt.label}</span>\n                          {opt.description && (\n                            <span className=\"text-xs text-muted-foreground font-normal\">\n                              {opt.description}\n                            </span>\n                          )}\n                        </div>\n                        {opt.badge && (\n                          <span className=\"ml-2 font-mono text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground\">\n                            {opt.badge}\n                          </span>\n                        )}\n                        {isSelected && (\n                          <span className=\"ml-auto text-primary\">✓</span>\n                        )}\n                      </>\n                    )}\n                  </li>\n                );\n              })\n            )}\n          </ul>\n        </div>\n      )}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "drawer",
      "type": "registry:ui",
      "title": "Drawer",
      "description": "Slide-over panel for inspecting logs, resources, and configurations without losing page context.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/drawer.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface DrawerProps {\n  isOpen: boolean;\n  onClose: () => void;\n  side?: \"left\" | \"right\" | \"bottom\";\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  children: React.ReactNode;\n  footer?: React.ReactNode;\n  className?: string;\n  closeOnBackdropClick?: boolean;\n}\n\nexport function Drawer({\n  isOpen,\n  onClose,\n  side = \"right\",\n  size = \"md\",\n  title,\n  description,\n  children,\n  footer,\n  className,\n  closeOnBackdropClick = true,\n}: DrawerProps) {\n  const [mounted, setMounted] = React.useState(false);\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", handleKeyDown);\n    const originalOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      document.body.style.overflow = originalOverflow;\n    };\n  }, [isOpen, onClose]);\n\n  if (!isOpen || !mounted) return null;\n\n  const sizeClasses = {\n    sm: side === \"bottom\" ? \"h-[300px]\" : \"w-full sm:max-w-sm\",\n    md: side === \"bottom\" ? \"h-[450px]\" : \"w-full sm:max-w-md\",\n    lg: side === \"bottom\" ? \"h-[600px]\" : \"w-full sm:max-w-lg\",\n    xl: side === \"bottom\" ? \"h-[750px]\" : \"w-full sm:max-w-xl\",\n    full: \"w-screen h-screen\",\n  };\n\n  const sideClasses = {\n    right: \"inset-y-0 right-0 border-l border-border\",\n    left: \"inset-y-0 left-0 border-r border-border\",\n    bottom: \"inset-x-0 bottom-0 border-t border-border max-h-[85vh]\",\n  };\n\n  const node = (\n    <div\n      className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] animate-in fade-in-0\"\n      onClick={(e) => {\n        if (closeOnBackdropClick && e.target === e.currentTarget) {\n          onClose();\n        }\n      }}\n      role=\"dialog\"\n      aria-modal=\"true\"\n    >\n      <div\n        className={cn(\n          \"fixed bg-card text-card-foreground shadow-2xl flex flex-col overflow-hidden transition-all duration-300\",\n          sideClasses[side],\n          sizeClasses[size],\n          className\n        )}\n      >\n        <div className=\"flex items-start justify-between px-6 py-5 border-b border-border\">\n          <div className=\"flex flex-col gap-1\">\n            {title && (\n              <h3 className=\"font-heading font-semibold text-lg text-foreground\">\n                {title}\n              </h3>\n            )}\n            {description && (\n              <p className=\"text-xs text-muted-foreground\">{description}</p>\n            )}\n          </div>\n          <button\n            type=\"button\"\n            className=\"w-7 h-7 inline-flex items-center justify-center rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors\"\n            onClick={onClose}\n            aria-label=\"Close drawer\"\n          >\n            ✕\n          </button>\n        </div>\n\n        <div className=\"flex-1 p-6 overflow-y-auto text-sm\">{children}</div>\n\n        {footer && (\n          <div className=\"flex items-center justify-end gap-2 px-6 py-4 bg-muted/30 border-t border-border\">\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return typeof document !== \"undefined\"\n    ? createPortal(node, document.body)\n    : null;\n}\n\nexport const Sheet = Drawer;\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "alert-dialog",
      "type": "registry:ui",
      "title": "AlertDialog",
      "description": "Destructive action confirmation dialog with danger styling and optional string confirmation phrase.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/alert-dialog.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface AlertDialogProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onConfirm: () => void | Promise<void>;\n  title: string;\n  description: string;\n  confirmText?: string;\n  cancelText?: string;\n  variant?: \"danger\" | \"warning\";\n  confirmationPhrase?: string;\n  loading?: boolean;\n  className?: string;\n}\n\nexport function AlertDialog({\n  isOpen,\n  onClose,\n  onConfirm,\n  title,\n  description,\n  confirmText = \"Confirm\",\n  cancelText = \"Cancel\",\n  variant = \"danger\",\n  confirmationPhrase,\n  loading = false,\n  className,\n}: AlertDialogProps) {\n  const [mounted, setMounted] = React.useState(false);\n  const [typedPhrase, setTypedPhrase] = React.useState(\"\");\n  const [submitting, setSubmitting] = React.useState(false);\n  const cancelBtnRef = React.useRef<HTMLButtonElement>(null);\n\n  React.useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  React.useEffect(() => {\n    if (isOpen) {\n      setTypedPhrase(\"\");\n      setSubmitting(false);\n      const timer = setTimeout(() => {\n        cancelBtnRef.current?.focus();\n      }, 30);\n      return () => clearTimeout(timer);\n    }\n  }, [isOpen]);\n\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        e.stopPropagation();\n        onClose();\n      }\n    };\n    document.addEventListener(\"keydown\", handleKeyDown);\n    const originalOverflow = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      document.body.style.overflow = originalOverflow;\n    };\n  }, [isOpen, onClose]);\n\n  if (!isOpen || !mounted) return null;\n\n  const phraseMatches = confirmationPhrase\n    ? typedPhrase.trim() === confirmationPhrase.trim()\n    : true;\n\n  const isActionDisabled = !phraseMatches || loading || submitting;\n\n  const handleConfirmClick = async () => {\n    if (isActionDisabled) return;\n    try {\n      setSubmitting(true);\n      await onConfirm();\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  const node = (\n    <div\n      className=\"fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] flex items-center justify-center p-4 animate-in fade-in-0\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      onClick={(e) => {\n        if (e.target === e.currentTarget) onClose();\n      }}\n    >\n      <div\n        className={cn(\n          \"w-full max-w-md rounded-xl border bg-card p-6 shadow-2xl overflow-hidden animate-in zoom-in-95\",\n          variant === \"danger\" ? \"border-rose-500/30\" : \"border-amber-500/30\",\n          className\n        )}\n      >\n        <div className=\"flex items-start gap-4\">\n          <div\n            className={cn(\n              \"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg font-bold text-lg\",\n              variant === \"danger\"\n                ? \"bg-rose-500/10 text-rose-600 dark:text-rose-400\"\n                : \"bg-amber-500/10 text-amber-600 dark:text-amber-400\"\n            )}\n          >\n            ⚠\n          </div>\n          <div className=\"flex-1 space-y-1\">\n            <h3 className=\"font-heading font-semibold text-lg text-foreground\">\n              {title}\n            </h3>\n            <p className=\"text-sm text-muted-foreground\">{description}</p>\n          </div>\n        </div>\n\n        {confirmationPhrase && (\n          <div className=\"mt-4 p-3 rounded-lg border border-border bg-muted/40 space-y-2\">\n            <p className=\"text-xs text-muted-foreground\">\n              Please type <code className=\"font-mono font-medium text-primary px-1 py-0.5 rounded bg-muted\">{confirmationPhrase}</code> to confirm:\n            </p>\n            <input\n              type=\"text\"\n              className=\"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 font-mono text-sm shadow-xs outline-hidden focus:ring-1 focus:ring-ring\"\n              value={typedPhrase}\n              onChange={(e) => setTypedPhrase(e.target.value)}\n              placeholder={confirmationPhrase}\n            />\n          </div>\n        )}\n\n        <div className=\"mt-6 flex items-center justify-end gap-3\">\n          <button\n            ref={cancelBtnRef}\n            type=\"button\"\n            className=\"inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium hover:bg-muted transition-colors\"\n            onClick={onClose}\n            disabled={loading || submitting}\n          >\n            {cancelText}\n          </button>\n          <button\n            type=\"button\"\n            className={cn(\n              \"inline-flex h-9 items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-white shadow-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed\",\n              variant === \"danger\" ? \"bg-destructive hover:bg-destructive/90\" : \"bg-primary hover:bg-primary/90\"\n            )}\n            onClick={handleConfirmClick}\n            disabled={isActionDisabled}\n          >\n            {loading || submitting ? \"Processing...\" : confirmText}\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n\n  return typeof document !== \"undefined\"\n    ? createPortal(node, document.body)\n    : null;\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "secret-input",
      "type": "registry:ui",
      "title": "SecretInput",
      "description": "Masked credential display input with reveal toggle and one-click copy feedback.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/secret-input.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SecretInputProps {\n  value: string;\n  label?: string;\n  helperText?: string;\n  maskByDefault?: boolean;\n  allowCopy?: boolean;\n  onCopy?: () => void;\n  className?: string;\n  id?: string;\n}\n\nexport function SecretInput({\n  value,\n  label,\n  helperText,\n  maskByDefault = true,\n  allowCopy = true,\n  onCopy,\n  className,\n  id,\n}: SecretInputProps) {\n  const [isMasked, setIsMasked] = React.useState(maskByDefault);\n  const [copied, setCopied] = React.useState(false);\n\n  const inputId = id || (label ? `secret-${label.toLowerCase().replace(/\\s+/g, \"-\")}` : undefined);\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      onCopy?.();\n      setTimeout(() => setCopied(false), 2000);\n    } catch {\n      setCopied(true);\n      onCopy?.();\n      setTimeout(() => setCopied(false), 2000);\n    }\n  };\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5 w-full\", className)}>\n      {label && (\n        <label htmlFor={inputId} className=\"text-xs font-medium text-foreground\">\n          {label}\n        </label>\n      )}\n\n      <div className=\"relative flex items-center rounded-md border border-input bg-background shadow-xs focus-within:ring-1 focus-within:ring-ring\">\n        <input\n          id={inputId}\n          type={isMasked ? \"password\" : \"text\"}\n          readOnly\n          value={value}\n          className=\"flex h-9 w-full bg-transparent px-3 py-1 font-mono text-sm outline-hidden\"\n          spellCheck=\"false\"\n        />\n\n        <div className=\"flex items-center gap-1 pr-2\">\n          <button\n            type=\"button\"\n            className=\"inline-flex h-7 w-7 items-center justify-center rounded-xs text-muted-foreground hover:text-foreground hover:bg-muted\"\n            onClick={() => setIsMasked(!isMasked)}\n            aria-label={isMasked ? \"Reveal secret\" : \"Hide secret\"}\n          >\n            {isMasked ? \"👁\" : \"🔒\"}\n          </button>\n\n          {allowCopy && (\n            <button\n              type=\"button\"\n              className={cn(\n                \"inline-flex h-7 items-center gap-1 rounded-xs px-2 text-xs font-mono text-muted-foreground hover:text-foreground hover:bg-muted transition-colors\",\n                copied && \"text-emerald-600 dark:text-emerald-400 font-semibold\"\n              )}\n              onClick={handleCopy}\n            >\n              {copied ? \"✓ Copied\" : \"Copy\"}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {helperText && (\n        <p className=\"text-xs text-muted-foreground mt-0.5\">{helperText}</p>\n      )}\n    </div>\n  );\n}\n\nexport const CopyInput = SecretInput;\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "sidebar",
      "type": "registry:ui",
      "title": "Sidebar",
      "description": "Application shell navigation sidebar with route icons, tenant header, profile footer, and collapse mode.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/sidebar.tsx",
          "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SidebarLinkItem {\n  label: string;\n  href: string;\n  icon?: React.ComponentType<{ className?: string }> | React.ReactNode;\n  active?: boolean;\n  badge?: React.ReactNode;\n  external?: boolean;\n}\n\nexport interface SidebarGroupData {\n  title?: string;\n  links: SidebarLinkItem[];\n}\n\nexport interface SidebarProps extends React.HTMLAttributes<HTMLElement> {\n  groups?: SidebarGroupData[];\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n  collapsed?: boolean;\n  onToggleCollapse?: () => void;\n}\n\nfunction renderLinkIcon(icon: React.ComponentType<{ className?: string }> | React.ReactNode) {\n  if (!icon) return null;\n  if (React.isValidElement(icon)) {\n    return <span className=\"inline-flex mr-2 shrink-0\">{icon}</span>;\n  }\n  if (typeof icon === \"function\" || typeof icon === \"object\") {\n    const IconComponent = icon as React.ComponentType<{ className?: string }>;\n    return (\n      <span className=\"inline-flex mr-2 shrink-0\">\n        <IconComponent className=\"h-4 w-4\" />\n      </span>\n    );\n  }\n  return <span className=\"inline-flex mr-2 shrink-0\">{icon}</span>;\n}\n\nconst Sidebar = React.forwardRef<HTMLElement, SidebarProps>(\n  (\n    {\n      groups,\n      header,\n      footer,\n      collapsed = false,\n      onToggleCollapse,\n      children,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <nav\n        ref={ref}\n        className={cn(\n          \"flex flex-col border-r border-border bg-card text-card-foreground transition-all duration-200\",\n          collapsed ? \"w-14 min-w-[56px]\" : \"w-64 min-w-[256px]\",\n          className\n        )}\n        aria-label=\"Sidebar\"\n        {...props}\n      >\n        {header && (\n          <div className={cn(\"p-4 border-b border-border\", collapsed && \"p-2 flex justify-center\")}>\n            {header}\n          </div>\n        )}\n\n        <div className=\"flex-1 overflow-y-auto p-3 space-y-6\">\n          {!groups && children\n            ? children\n            : groups &&\n              groups.map((group, gi) => (\n                <div key={gi} className=\"space-y-1\">\n                  {group.title && !collapsed && (\n                    <p className=\"px-3 font-mono text-[0.7rem] font-medium text-muted-foreground uppercase tracking-wider mb-2\">\n                      {group.title}\n                    </p>\n                  )}\n                  {group.links.map((link) => (\n                    <a\n                      key={link.href}\n                      href={link.href}\n                      target={link.external ? \"_blank\" : undefined}\n                      rel={link.external ? \"noopener noreferrer\" : undefined}\n                      title={collapsed ? link.label : undefined}\n                      className={cn(\n                        \"flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted\",\n                        link.active\n                          ? \"bg-muted text-primary font-semibold\"\n                          : \"text-muted-foreground hover:text-foreground\",\n                        collapsed && \"justify-center px-2\"\n                      )}\n                    >\n                      {renderLinkIcon(link.icon)}\n                      {!collapsed && <span>{link.label}</span>}\n                      {!collapsed && link.badge && (\n                        <span className=\"ml-auto\">{link.badge}</span>\n                      )}\n                    </a>\n                  ))}\n                </div>\n              ))}\n        </div>\n\n        {footer && (\n          <div className={cn(\"p-4 border-t border-border mt-auto\", collapsed && \"p-2 flex justify-center\")}>\n            {footer}\n          </div>\n        )}\n      </nav>\n    );\n  }\n);\nSidebar.displayName = \"Sidebar\";\n\nexport { Sidebar };\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "multi-select",
      "type": "registry:ui",
      "title": "MultiSelect",
      "description": "Scoped multi-select tag picker with badge pills, search filter, and batch actions.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/multi-select.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface MultiSelectOption {\n  value: string;\n  label: string;\n  group?: string;\n  description?: string;\n}\n\nexport interface MultiSelectProps {\n  options: MultiSelectOption[];\n  selected: string[];\n  onChange: (selected: string[]) => void;\n  placeholder?: string;\n  label?: string;\n  error?: string;\n  maxDisplayedBadges?: number;\n  className?: string;\n}\n\nexport function MultiSelect({\n  options = [],\n  selected = [],\n  onChange,\n  placeholder = \"Select options...\",\n  label,\n  error,\n  maxDisplayedBadges = 3,\n  className,\n}: MultiSelectProps) {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [search, setSearch] = React.useState(\"\");\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleClickOutside = (e: MouseEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(e.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [isOpen]);\n\n  const filteredOptions = React.useMemo(() => {\n    if (!search.trim()) return options;\n    const q = search.toLowerCase();\n    return options.filter(\n      (opt) =>\n        opt.label.toLowerCase().includes(q) ||\n        (opt.description && opt.description.toLowerCase().includes(q))\n    );\n  }, [options, search]);\n\n  const toggleOption = (val: string) => {\n    if (selected.includes(val)) {\n      onChange(selected.filter((item) => item !== val));\n    } else {\n      onChange([...selected, val]);\n    }\n  };\n\n  const removeBadge = (e: React.MouseEvent, val: string) => {\n    e.stopPropagation();\n    onChange(selected.filter((item) => item !== val));\n  };\n\n  const visibleSelected = selected.slice(0, maxDisplayedBadges);\n  const remainingCount = selected.length - maxDisplayedBadges;\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5 w-full\", className)} ref={containerRef}>\n      {label && <label className=\"text-xs font-medium text-foreground\">{label}</label>}\n\n      <div\n        className={cn(\n          \"relative min-h-[38px] w-full flex items-center justify-between rounded-md border border-input bg-background p-1.5 text-sm shadow-xs cursor-pointer transition-colors\",\n          isOpen && \"ring-1 ring-ring border-primary\",\n          error && \"border-destructive\"\n        )}\n        onClick={() => setIsOpen(!isOpen)}\n      >\n        <div className=\"flex flex-wrap gap-1 flex-1 items-center\">\n          {selected.length === 0 ? (\n            <span className=\"text-muted-foreground px-1\">{placeholder}</span>\n          ) : (\n            <>\n              {visibleSelected.map((val) => {\n                const opt = options.find((o) => o.value === val);\n                const itemLabel = opt ? opt.label : val;\n                return (\n                  <span\n                    key={val}\n                    className=\"inline-flex items-center gap-1 font-mono text-xs px-2 py-0.5 rounded border border-border bg-muted text-foreground\"\n                  >\n                    <span>{itemLabel}</span>\n                    <button\n                      type=\"button\"\n                      className=\"text-muted-foreground hover:text-foreground leading-none\"\n                      onClick={(e) => removeBadge(e, val)}\n                    >\n                      ×\n                    </button>\n                  </span>\n                );\n              })}\n              {remainingCount > 0 && (\n                <span className=\"font-mono text-xs px-1.5 py-0.5 rounded border border-border text-muted-foreground\">\n                  +{remainingCount}\n                </span>\n              )}\n            </>\n          )}\n        </div>\n\n        <span className=\"text-muted-foreground px-1\">▾</span>\n      </div>\n\n      {isOpen && (\n        <div className=\"relative\">\n          <div className=\"absolute top-1 left-0 right-0 z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg overflow-hidden animate-in fade-in-0\">\n            <div className=\"p-2 border-b border-border bg-muted/30\">\n              <input\n                ref={inputRef}\n                type=\"text\"\n                className=\"w-full bg-transparent text-sm outline-hidden placeholder:text-muted-foreground\"\n                placeholder=\"Filter tags...\"\n                value={search}\n                onChange={(e) => setSearch(e.target.value)}\n                onClick={(e) => e.stopPropagation()}\n              />\n            </div>\n\n            <div className=\"flex justify-end gap-2 p-1 border-b border-border bg-muted/10 font-mono text-xs\">\n              <button\n                type=\"button\"\n                className=\"px-2 py-0.5 text-muted-foreground hover:text-primary\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange(Array.from(new Set([...selected, ...filteredOptions.map((o) => o.value)])));\n                }}\n              >\n                Select All\n              </button>\n              <button\n                type=\"button\"\n                className=\"px-2 py-0.5 text-muted-foreground hover:text-primary\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onChange([]);\n                }}\n              >\n                Clear All\n              </button>\n            </div>\n\n            <ul className=\"max-h-[220px] overflow-y-auto p-1 text-sm\">\n              {filteredOptions.length === 0 ? (\n                <li className=\"p-4 text-center text-xs text-muted-foreground\">No options found</li>\n              ) : (\n                filteredOptions.map((opt) => {\n                  const isChecked = selected.includes(opt.value);\n                  return (\n                    <li\n                      key={opt.value}\n                      className={cn(\n                        \"flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-accent\",\n                        isChecked && \"font-medium\"\n                      )}\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        toggleOption(opt.value);\n                      }}\n                    >\n                      <input\n                        type=\"checkbox\"\n                        checked={isChecked}\n                        onChange={() => {}}\n                        className=\"h-3.5 w-3.5 accent-primary\"\n                      />\n                      <span className=\"flex-1\">{opt.label}</span>\n                      {opt.group && (\n                        <span className=\"font-mono text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded\">\n                          {opt.group}\n                        </span>\n                      )}\n                    </li>\n                  );\n                })\n              )}\n            </ul>\n          </div>\n        </div>\n      )}\n\n      {error && <p className=\"text-xs text-destructive\">{error}</p>}\n    </div>\n  );\n}\n\nexport const TagInput = MultiSelect;\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "slider",
      "type": "registry:ui",
      "title": "Slider",
      "description": "Continuous or stepped range slider with styled track, tactile thumb, and value readout.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/slider.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SliderProps {\n  value: number;\n  onChange: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  label?: string;\n  valueFormatter?: (value: number) => string;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  label,\n  valueFormatter = (val) => String(val),\n  disabled = false,\n  className,\n}: SliderProps) {\n  const percentage = Math.max(0, Math.min(100, ((value - min) / (max - min)) * 100));\n\n  return (\n    <div className={cn(\"flex flex-col gap-2 w-full\", disabled && \"opacity-50 pointer-events-none\", className)}>\n      <div className=\"flex items-center justify-between text-xs font-medium\">\n        {label && <span className=\"text-foreground\">{label}</span>}\n        <span className=\"font-mono text-primary font-medium\">{valueFormatter(value)}</span>\n      </div>\n\n      <div className=\"relative flex items-center select-none touch-none w-full h-5\">\n        <input\n          type=\"range\"\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          disabled={disabled}\n          onChange={(e) => onChange(Number(e.target.value))}\n          className=\"w-full h-1.5 bg-muted rounded-full appearance-none cursor-pointer accent-primary\"\n        />\n      </div>\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "popover",
      "type": "registry:ui",
      "title": "Popover",
      "description": "Floating anchor-positioned overlay container with collision awareness for forms and filter cards.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/popover.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface PopoverProps {\n  trigger: React.ReactNode;\n  children: React.ReactNode;\n  align?: \"start\" | \"center\" | \"end\";\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  sideOffset?: number;\n  isOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n}\n\nexport function Popover({\n  trigger,\n  children,\n  align = \"start\",\n  side = \"bottom\",\n  sideOffset = 6,\n  isOpen: controlledIsOpen,\n  onOpenChange,\n  className,\n}: PopoverProps) {\n  const [uncontrolledIsOpen, setUncontrolledIsOpen] = React.useState(false);\n  const isControlled = controlledIsOpen !== undefined;\n  const open = isControlled ? controlledIsOpen : uncontrolledIsOpen;\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  const setOpen = (next: boolean) => {\n    if (!isControlled) {\n      setUncontrolledIsOpen(next);\n    }\n    onOpenChange?.(next);\n  };\n\n  React.useEffect(() => {\n    if (!open) return;\n    const handleClickOutside = (e: MouseEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(e.target as Node)\n      ) {\n        setOpen(false);\n      }\n    };\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleClickOutside);\n      document.removeEventListener(\"keydown\", handleKeyDown);\n    };\n  }, [open]);\n\n  const alignClasses = {\n    start: \"left-0\",\n    center: \"left-1/2 -translate-x-1/2\",\n    end: \"right-0\",\n  };\n\n  const sideClasses = {\n    bottom: \"top-full mt-1.5\",\n    top: \"bottom-full mb-1.5\",\n    left: \"right-full mr-1.5 top-0\",\n    right: \"left-full ml-1.5 top-0\",\n  };\n\n  return (\n    <div ref={containerRef} className={cn(\"relative inline-block\", className)}>\n      <div\n        onClick={() => setOpen(!open)}\n        role=\"button\"\n        tabIndex={0}\n        className=\"inline-block cursor-pointer\"\n      >\n        {trigger}\n      </div>\n\n      {open && (\n        <div\n          className={cn(\n            \"absolute z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-md outline-hidden p-4 animate-in fade-in-0 zoom-in-95\",\n            alignClasses[align],\n            sideClasses[side]\n          )}\n          style={{\n            marginTop: side === \"bottom\" ? `${sideOffset}px` : undefined,\n          }}\n          role=\"dialog\"\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "charts",
      "type": "registry:ui",
      "title": "Charts",
      "description": "Lightweight SVG-based telemetry charts (AreaChart, BarChart, Sparkline) with crosshair and hover tooltips.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/charts.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface DataPoint {\n  date: string;\n  [key: string]: string | number;\n}\n\nexport interface AreaChartProps {\n  data: DataPoint[];\n  categories: string[];\n  index: string;\n  colors?: (\"primary\" | \"emerald\" | \"amber\" | \"rose\" | \"cyan\")[];\n  valueFormatter?: (value: number) => string;\n  height?: number;\n  showGrid?: boolean;\n  showLegend?: boolean;\n  className?: string;\n}\n\nexport interface BarChartProps {\n  data: DataPoint[];\n  categories: string[];\n  index: string;\n  colors?: (\"primary\" | \"emerald\" | \"amber\" | \"rose\" | \"cyan\")[];\n  valueFormatter?: (value: number) => string;\n  height?: number;\n  showGrid?: boolean;\n  showLegend?: boolean;\n  className?: string;\n}\n\nexport interface SparklineProps {\n  data: number[];\n  color?: \"primary\" | \"emerald\" | \"amber\" | \"rose\" | \"cyan\";\n  height?: number;\n  width?: number;\n  className?: string;\n}\n\nconst COLOR_MAP: Record<string, { stroke: string; fill: string }> = {\n  primary: { stroke: \"var(--primary, #e5000f)\", fill: \"rgba(229, 0, 15, 0.12)\" },\n  emerald: { stroke: \"#10b981\", fill: \"rgba(16, 185, 129, 0.12)\" },\n  amber: { stroke: \"#d97706\", fill: \"rgba(217, 119, 6, 0.12)\" },\n  rose: { stroke: \"#dc2626\", fill: \"rgba(220, 38, 38, 0.12)\" },\n  cyan: { stroke: \"#0891b2\", fill: \"rgba(8, 145, 178, 0.12)\" },\n};\n\nexport function AreaChart({\n  data = [],\n  categories = [],\n  index,\n  colors = [\"primary\", \"emerald\", \"amber\"],\n  valueFormatter = (val) => String(val),\n  height = 240,\n  showGrid = true,\n  showLegend = true,\n  className,\n}: AreaChartProps) {\n  const [hoverIndex, setHoverIndex] = React.useState<number | null>(null);\n  const svgRef = React.useRef<SVGSVGElement>(null);\n\n  if (!data || data.length === 0) {\n    return (\n      <div\n        className={cn(\"flex items-center justify-center border border-dashed border-border rounded-lg text-xs text-muted-foreground\", className)}\n        style={{ height }}\n      >\n        No telemetry data\n      </div>\n    );\n  }\n\n  const padLeft = 48;\n  const padRight = 16;\n  const padTop = 16;\n  const padBottom = 28;\n  const width = 600;\n\n  const chartW = width - padLeft - padRight;\n  const chartH = height - padTop - padBottom;\n\n  let maxVal = 0;\n  for (const row of data) {\n    for (const cat of categories) {\n      const val = Number(row[cat]) || 0;\n      if (val > maxVal) maxVal = val;\n    }\n  }\n  if (maxVal === 0) maxVal = 10;\n  maxVal = Math.ceil(maxVal * 1.1);\n\n  const getX = (idx: number) => {\n    if (data.length <= 1) return padLeft + chartW / 2;\n    return padLeft + (idx / (data.length - 1)) * chartW;\n  };\n\n  const getY = (val: number) => {\n    return padTop + chartH - (val / maxVal) * chartH;\n  };\n\n  const gridSteps = 4;\n  const yTicks = Array.from({ length: gridSteps + 1 }, (_, i) => {\n    const val = (maxVal / gridSteps) * (gridSteps - i);\n    return { val, y: padTop + (i / gridSteps) * chartH };\n  });\n\n  return (\n    <div className={cn(\"flex flex-col w-full\", className)}>\n      {showLegend && (\n        <div className=\"flex items-center gap-4 mb-2 font-mono text-xs\">\n          {categories.map((cat, i) => {\n            const colorKey = colors[i % colors.length] || \"primary\";\n            const c = COLOR_MAP[colorKey] || COLOR_MAP.primary;\n            return (\n              <div key={cat} className=\"flex items-center gap-1.5\">\n                <span className=\"h-2 w-2 rounded-full\" style={{ backgroundColor: c.stroke }} />\n                <span className=\"text-muted-foreground\">{cat}</span>\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      <div className=\"relative w-full\" style={{ height }}>\n        <svg\n          ref={svgRef}\n          viewBox={`0 0 ${width} ${height}`}\n          preserveAspectRatio=\"none\"\n          className=\"w-full h-full overflow-visible\"\n          onMouseMove={(e) => {\n            if (!svgRef.current) return;\n            const rect = svgRef.current.getBoundingClientRect();\n            const relX = ((e.clientX - rect.left) / rect.width) * width;\n            let closest = 0;\n            let minDiff = Infinity;\n            for (let i = 0; i < data.length; i++) {\n              const diff = Math.abs(getX(i) - relX);\n              if (diff < minDiff) {\n                minDiff = diff;\n                closest = i;\n              }\n            }\n            setHoverIndex(closest);\n          }}\n          onMouseLeave={() => setHoverIndex(null)}\n        >\n          {showGrid &&\n            yTicks.map((tick, i) => (\n              <g key={i}>\n                <line\n                  x1={padLeft}\n                  y1={tick.y}\n                  x2={width - padRight}\n                  y2={tick.y}\n                  stroke=\"currentColor\"\n                  className=\"text-border\"\n                  strokeDasharray=\"3 3\"\n                />\n                <text\n                  x={padLeft - 8}\n                  y={tick.y + 4}\n                  textAnchor=\"end\"\n                  className=\"font-mono text-[9px] fill-muted-foreground\"\n                >\n                  {valueFormatter(Math.round(tick.val))}\n                </text>\n              </g>\n            ))}\n\n          {categories.map((cat, i) => {\n            const colorKey = colors[i % colors.length] || \"primary\";\n            const c = COLOR_MAP[colorKey] || COLOR_MAP.primary;\n            const points = data.map((d, idx) => ({\n              x: getX(idx),\n              y: getY(Number(d[cat]) || 0),\n            }));\n\n            if (points.length === 0) return null;\n\n            const lineD = points.reduce(\n              (acc, pt, idx) => (idx === 0 ? `M ${pt.x} ${pt.y}` : `${acc} L ${pt.x} ${pt.y}`),\n              \"\"\n            );\n            const areaD = `${lineD} L ${points[points.length - 1].x} ${padTop + chartH} L ${points[0].x} ${padTop + chartH} Z`;\n\n            return (\n              <g key={cat}>\n                <defs>\n                  <linearGradient id={`reg-grad-${cat}-${i}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stopColor={c.stroke} stopOpacity=\"0.25\" />\n                    <stop offset=\"100%\" stopColor={c.stroke} stopOpacity=\"0.0\" />\n                  </linearGradient>\n                </defs>\n                <path d={areaD} fill={`url(#reg-grad-${cat}-${i})`} />\n                <path d={lineD} fill=\"none\" stroke={c.stroke} strokeWidth=\"2\" strokeLinecap=\"round\" />\n              </g>\n            );\n          })}\n\n          {data.length > 0 && (\n            <>\n              <text x={getX(0)} y={height - 8} textAnchor=\"start\" className=\"font-mono text-[9px] fill-muted-foreground\">\n                {String(data[0][index] || \"\")}\n              </text>\n              <text x={getX(data.length - 1)} y={height - 8} textAnchor=\"end\" className=\"font-mono text-[9px] fill-muted-foreground\">\n                {String(data[data.length - 1][index] || \"\")}\n              </text>\n            </>\n          )}\n\n          {hoverIndex !== null && data[hoverIndex] && (\n            <g>\n              <line\n                x1={getX(hoverIndex)}\n                y1={padTop}\n                x2={getX(hoverIndex)}\n                y2={padTop + chartH}\n                stroke=\"currentColor\"\n                className=\"text-border\"\n                strokeDasharray=\"2 2\"\n              />\n            </g>\n          )}\n        </svg>\n\n        {hoverIndex !== null && data[hoverIndex] && (\n          <div\n            className=\"absolute top-2 z-20 pointer-events-none rounded-md border border-border bg-popover p-2 text-xs shadow-md\"\n            style={{\n              left: `${(getX(hoverIndex) / width) * 100}%`,\n              transform: hoverIndex > data.length / 2 ? \"translate(-105%, 10%)\" : \"translate(10%, 10%)\",\n            }}\n          >\n            <div className=\"font-mono font-medium text-muted-foreground border-b border-border pb-1 mb-1\">\n              {String(data[hoverIndex][index] || \"\")}\n            </div>\n            {categories.map((cat, i) => {\n              const colorKey = colors[i % colors.length] || \"primary\";\n              const c = COLOR_MAP[colorKey] || COLOR_MAP.primary;\n              return (\n                <div key={cat} className=\"flex items-center gap-2\">\n                  <span className=\"h-1.5 w-1.5 rounded-full\" style={{ backgroundColor: c.stroke }} />\n                  <span className=\"text-foreground\">{cat}:</span>\n                  <span className=\"font-mono font-medium text-foreground\">\n                    {valueFormatter(Number(data[hoverIndex][cat]) || 0)}\n                  </span>\n                </div>\n              );\n            })}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function BarChart({\n  data = [],\n  categories = [],\n  index,\n  colors = [\"primary\", \"emerald\", \"amber\"],\n  valueFormatter = (val) => String(val),\n  height = 240,\n  showGrid = true,\n  showLegend = true,\n  className,\n}: BarChartProps) {\n  if (!data || data.length === 0) {\n    return (\n      <div\n        className={cn(\"flex items-center justify-center border border-dashed border-border rounded-lg text-xs text-muted-foreground\", className)}\n        style={{ height }}\n      >\n        No telemetry data\n      </div>\n    );\n  }\n\n  const padLeft = 48;\n  const padRight = 16;\n  const padTop = 16;\n  const padBottom = 28;\n  const width = 600;\n\n  const chartW = width - padLeft - padRight;\n  const chartH = height - padTop - padBottom;\n\n  let maxVal = 0;\n  for (const row of data) {\n    for (const cat of categories) {\n      const val = Number(row[cat]) || 0;\n      if (val > maxVal) maxVal = val;\n    }\n  }\n  if (maxVal === 0) maxVal = 10;\n  maxVal = Math.ceil(maxVal * 1.15);\n\n  const groupWidth = chartW / data.length;\n  const barPadding = 0.2;\n  const availableBarWidth = groupWidth * (1 - barPadding);\n  const barWidth = Math.max(2, availableBarWidth / categories.length);\n\n  const getY = (val: number) => padTop + chartH - (val / maxVal) * chartH;\n\n  return (\n    <div className={cn(\"flex flex-col w-full\", className)}>\n      {showLegend && (\n        <div className=\"flex items-center gap-4 mb-2 font-mono text-xs\">\n          {categories.map((cat, i) => {\n            const colorKey = colors[i % colors.length] || \"primary\";\n            const c = COLOR_MAP[colorKey] || COLOR_MAP.primary;\n            return (\n              <div key={cat} className=\"flex items-center gap-1.5\">\n                <span className=\"h-2 w-2 rounded-full\" style={{ backgroundColor: c.stroke }} />\n                <span className=\"text-muted-foreground\">{cat}</span>\n              </div>\n            );\n          })}\n        </div>\n      )}\n\n      <div className=\"relative w-full\" style={{ height }}>\n        <svg viewBox={`0 0 ${width} ${height}`} preserveAspectRatio=\"none\" className=\"w-full h-full overflow-visible\">\n          {data.map((row, groupIdx) => {\n            const groupX = padLeft + groupIdx * groupWidth + (groupWidth * barPadding) / 2;\n            return (\n              <g key={groupIdx}>\n                {categories.map((cat, catIdx) => {\n                  const colorKey = colors[catIdx % colors.length] || \"primary\";\n                  const c = COLOR_MAP[colorKey] || COLOR_MAP.primary;\n                  const val = Number(row[cat]) || 0;\n                  const barX = groupX + catIdx * barWidth;\n                  const barY = getY(val);\n                  const barH = padTop + chartH - barY;\n\n                  return (\n                    <rect\n                      key={cat}\n                      x={barX}\n                      y={barY}\n                      width={Math.max(1, barWidth - 1)}\n                      height={Math.max(0, barH)}\n                      fill={c.stroke}\n                      rx=\"1\"\n                    />\n                  );\n                })}\n                <text x={groupX + availableBarWidth / 2} y={height - 8} textAnchor=\"middle\" className=\"font-mono text-[9px] fill-muted-foreground\">\n                  {String(row[index] || \"\")}\n                </text>\n              </g>\n            );\n          })}\n        </svg>\n      </div>\n    </div>\n  );\n}\n\nexport function Sparkline({\n  data = [],\n  color = \"primary\",\n  height = 32,\n  width = 96,\n  className,\n}: SparklineProps) {\n  if (!data || data.length < 2) return null;\n\n  const strokeColor = COLOR_MAP[color]?.stroke || COLOR_MAP.primary.stroke;\n  const padding = 2;\n  const drawW = width - padding * 2;\n  const drawH = height - padding * 2;\n\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n  const range = max - min || 1;\n\n  const points = data.map((val, idx) => ({\n    x: padding + (idx / (data.length - 1)) * drawW,\n    y: padding + drawH - ((val - min) / range) * drawH,\n  }));\n\n  const lineD = points.reduce((acc, pt, idx) => (idx === 0 ? `M ${pt.x} ${pt.y}` : `${acc} L ${pt.x} ${pt.y}`), \"\");\n  const lastPt = points[points.length - 1];\n\n  return (\n    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} className={cn(\"overflow-visible inline-block\", className)}>\n      <path d={lineD} fill=\"none\" stroke={strokeColor} strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n      <circle cx={lastPt.x} cy={lastPt.y} r=\"2.5\" fill={strokeColor} />\n    </svg>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "date-picker",
      "type": "registry:ui",
      "title": "DatePicker",
      "description": "Calendar date picker and date range picker with monospace display and quick range presets.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/date-picker.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface DateRange {\n  from?: Date;\n  to?: Date;\n}\n\nexport interface DatePickerProps {\n  value?: Date;\n  onChange: (date: Date) => void;\n  placeholder?: string;\n  className?: string;\n}\n\nexport interface DateRangePickerProps {\n  value?: DateRange;\n  onChange: (range: DateRange) => void;\n  presets?: Array<{ label: string; range: DateRange }>;\n  placeholder?: string;\n  className?: string;\n}\n\nfunction formatDate(d?: Date) {\n  if (!d) return \"\";\n  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, \"0\")}-${String(d.getDate()).padStart(2, \"0\")}`;\n}\n\nconst MONTH_NAMES = [\n  \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\n  \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"\n];\n\nexport function DatePicker({\n  value,\n  onChange,\n  placeholder = \"Pick a date\",\n  className,\n}: DatePickerProps) {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [viewDate, setViewDate] = React.useState(() => value ? new Date(value) : new Date());\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleClick = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [isOpen]);\n\n  const year = viewDate.getFullYear();\n  const month = viewDate.getMonth();\n  const daysInMonth = new Date(year, month + 1, 0).getDate();\n  const firstDay = new Date(year, month, 1).getDay();\n\n  return (\n    <div ref={ref} className={cn(\"relative inline-block\", className)}>\n      <button\n        type=\"button\"\n        className={cn(\n          \"inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 py-1 font-mono text-xs shadow-xs hover:bg-muted\",\n          isOpen && \"ring-1 ring-ring\"\n        )}\n        onClick={() => setIsOpen(!isOpen)}\n      >\n        <span>📅</span>\n        <span className={value ? \"text-foreground font-semibold\" : \"text-muted-foreground\"}>\n          {value ? formatDate(value) : placeholder}\n        </span>\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-full mt-1 left-0 z-50 rounded-md border border-border bg-popover p-3 shadow-md animate-in fade-in-0\">\n          <div className=\"flex items-center justify-between mb-2\">\n            <button\n              type=\"button\"\n              className=\"h-6 w-6 rounded border border-border flex items-center justify-center text-xs\"\n              onClick={() => setViewDate(new Date(year, month - 1, 1))}\n            >\n              ‹\n            </button>\n            <span className=\"font-heading text-xs font-semibold\">\n              {MONTH_NAMES[month]} {year}\n            </span>\n            <button\n              type=\"button\"\n              className=\"h-6 w-6 rounded border border-border flex items-center justify-center text-xs\"\n              onClick={() => setViewDate(new Date(year, month + 1, 1))}\n            >\n              ›\n            </button>\n          </div>\n\n          <div className=\"grid grid-cols-7 gap-1 text-center font-mono text-xs\">\n            {[\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"].map((d) => (\n              <span key={d} className=\"text-muted-foreground text-[10px] py-1\">{d}</span>\n            ))}\n            {Array.from({ length: firstDay }).map((_, i) => (\n              <span key={`empty-${i}`} />\n            ))}\n            {Array.from({ length: daysInMonth }).map((_, i) => {\n              const day = i + 1;\n              const isSelected = value && value.getFullYear() === year && value.getMonth() === month && value.getDate() === day;\n              return (\n                <button\n                  key={day}\n                  type=\"button\"\n                  className={cn(\n                    \"h-7 w-7 rounded-xs text-xs flex items-center justify-center hover:bg-accent\",\n                    isSelected && \"bg-primary text-white font-bold\"\n                  )}\n                  onClick={() => {\n                    onChange(new Date(year, month, day));\n                    setIsOpen(false);\n                  }}\n                >\n                  {day}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport function DateRangePicker({\n  value,\n  onChange,\n  presets,\n  placeholder = \"Select date range...\",\n  className,\n}: DateRangePickerProps) {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [selectingFrom, setSelectingFrom] = React.useState<Date | undefined>(value?.from);\n  const [viewDate, setViewDate] = React.useState(() => value?.from ? new Date(value.from) : new Date());\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!isOpen) return;\n    const handleClick = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) setIsOpen(false);\n    };\n    document.addEventListener(\"mousedown\", handleClick);\n    return () => document.removeEventListener(\"mousedown\", handleClick);\n  }, [isOpen]);\n\n  const year = viewDate.getFullYear();\n  const month = viewDate.getMonth();\n  const daysInMonth = new Date(year, month + 1, 0).getDate();\n  const firstDay = new Date(year, month, 1).getDay();\n\n  const handleDayClick = (day: number) => {\n    const clicked = new Date(year, month, day);\n    if (!selectingFrom || (value?.from && value?.to)) {\n      setSelectingFrom(clicked);\n      onChange({ from: clicked, to: undefined });\n    } else {\n      if (clicked < selectingFrom) {\n        onChange({ from: clicked, to: selectingFrom });\n      } else {\n        onChange({ from: selectingFrom, to: clicked });\n      }\n      setSelectingFrom(undefined);\n      setIsOpen(false);\n    }\n  };\n\n  const displayText = value?.from && value?.to\n    ? `${formatDate(value.from)} → ${formatDate(value.to)}`\n    : value?.from\n    ? `${formatDate(value.from)} → ...`\n    : placeholder;\n\n  return (\n    <div ref={ref} className={cn(\"relative inline-block\", className)}>\n      <button\n        type=\"button\"\n        className={cn(\n          \"inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-3 py-1 font-mono text-xs shadow-xs hover:bg-muted\",\n          isOpen && \"ring-1 ring-ring\"\n        )}\n        onClick={() => setIsOpen(!isOpen)}\n      >\n        <span>📅</span>\n        <span className={value?.from ? \"text-foreground font-semibold\" : \"text-muted-foreground\"}>\n          {displayText}\n        </span>\n      </button>\n\n      {isOpen && (\n        <div className=\"absolute top-full mt-1 left-0 z-50 rounded-md border border-border bg-popover p-3 shadow-md animate-in fade-in-0 flex gap-3\">\n          <div className=\"flex flex-col gap-1 border-r border-border pr-3\">\n            {[\n              { label: \"Today\", get: () => ({ from: new Date(), to: new Date() }) },\n              { label: \"Last 7d\", get: () => { const to = new Date(); const from = new Date(); from.setDate(to.getDate() - 7); return { from, to }; } },\n              { label: \"Last 30d\", get: () => { const to = new Date(); const from = new Date(); from.setDate(to.getDate() - 30); return { from, to }; } },\n            ].map((p) => (\n              <button\n                key={p.label}\n                type=\"button\"\n                className=\"text-left font-mono text-xs px-2 py-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground\"\n                onClick={() => {\n                  onChange(p.get());\n                  setIsOpen(false);\n                }}\n              >\n                {p.label}\n              </button>\n            ))}\n          </div>\n\n          <div>\n            <div className=\"flex items-center justify-between mb-2\">\n              <button\n                type=\"button\"\n                className=\"h-6 w-6 rounded border border-border flex items-center justify-center text-xs\"\n                onClick={() => setViewDate(new Date(year, month - 1, 1))}\n              >\n                ‹\n              </button>\n              <span className=\"font-heading text-xs font-semibold\">\n                {MONTH_NAMES[month]} {year}\n              </span>\n              <button\n                type=\"button\"\n                className=\"h-6 w-6 rounded border border-border flex items-center justify-center text-xs\"\n                onClick={() => setViewDate(new Date(year, month + 1, 1))}\n              >\n                ›\n              </button>\n            </div>\n\n            <div className=\"grid grid-cols-7 gap-1 text-center font-mono text-xs\">\n              {[\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"].map((d) => (\n                <span key={d} className=\"text-muted-foreground text-[10px] py-1\">{d}</span>\n              ))}\n              {Array.from({ length: firstDay }).map((_, i) => (\n                <span key={`empty-${i}`} />\n              ))}\n              {Array.from({ length: daysInMonth }).map((_, i) => {\n                const day = i + 1;\n                const thisDate = new Date(year, month, day);\n                const isFrom = value?.from && formatDate(thisDate) === formatDate(value.from);\n                const isTo = value?.to && formatDate(thisDate) === formatDate(value.to);\n                const inRange = value?.from && value?.to && thisDate > value.from && thisDate < value.to;\n\n                return (\n                  <button\n                    key={day}\n                    type=\"button\"\n                    className={cn(\n                      \"h-7 w-7 rounded-xs text-xs flex items-center justify-center hover:bg-accent\",\n                      (isFrom || isTo) && \"bg-primary text-white font-bold\",\n                      inRange && \"bg-primary/10 text-primary\"\n                    )}\n                    onClick={() => handleDayClick(day)}\n                  >\n                    {day}\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "data-table",
      "type": "registry:ui",
      "title": "DataTable",
      "description": "Dense SaaS data table with search filtering, multi-row selection, sorting, and pagination.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/data-table.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface DataTableColumn<T> {\n  header: React.ReactNode;\n  accessor?: keyof T;\n  render?: (row: T, index: number) => React.ReactNode;\n  sortable?: boolean;\n  align?: \"left\" | \"center\" | \"right\";\n  width?: string | number;\n}\n\nexport interface DataTableProps<T = any> {\n  data: T[];\n  columns: DataTableColumn<T>[];\n  keyField?: keyof T;\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  selectable?: boolean;\n  selectedKeys?: any[];\n  onSelectedKeysChange?: (keys: any[]) => void;\n  renderBulkActions?: (selectedRows: T[]) => React.ReactNode;\n  pageSize?: number;\n  dense?: boolean;\n  emptyText?: string;\n  className?: string;\n}\n\nexport function DataTable<T extends Record<string, any>>({\n  data = [],\n  columns = [],\n  keyField = \"id\" as keyof T,\n  searchable = true,\n  searchPlaceholder = \"Search...\",\n  selectable = false,\n  selectedKeys: controlledSelectedKeys,\n  onSelectedKeysChange,\n  renderBulkActions,\n  pageSize = 10,\n  dense = false,\n  emptyText = \"No records found\",\n  className,\n}: DataTableProps<T>) {\n  const [internalSelectedKeys, setInternalSelectedKeys] = React.useState<any[]>([]);\n  const [search, setSearch] = React.useState(\"\");\n  const [sortKey, setSortKey] = React.useState<keyof T | null>(null);\n  const [sortDir, setSortDir] = React.useState<\"asc\" | \"desc\" | null>(null);\n  const [currentPage, setCurrentPage] = React.useState(1);\n\n  const selectedKeys = controlledSelectedKeys !== undefined ? controlledSelectedKeys : internalSelectedKeys;\n\n  const setSelectedKeys = (keys: any[]) => {\n    if (onSelectedKeysChange) onSelectedKeysChange(keys);\n    else setInternalSelectedKeys(keys);\n  };\n\n  const filteredData = React.useMemo(() => {\n    if (!search.trim()) return data;\n    const q = search.toLowerCase();\n    return data.filter((row) =>\n      columns.some((col) => {\n        if (!col.accessor) return false;\n        const val = row[col.accessor];\n        return val !== null && val !== undefined && String(val).toLowerCase().includes(q);\n      })\n    );\n  }, [data, search, columns]);\n\n  const sortedData = React.useMemo(() => {\n    if (!sortKey || !sortDir) return filteredData;\n    return [...filteredData].sort((a, b) => {\n      const valA = a[sortKey];\n      const valB = b[sortKey];\n      if (valA === valB) return 0;\n      if (valA === null || valA === undefined) return 1;\n      if (valB === null || valB === undefined) return -1;\n      let comp = 0;\n      if (typeof valA === \"number\" && typeof valB === \"number\") comp = valA - valB;\n      else comp = String(valA).localeCompare(String(valB), undefined, { numeric: true });\n      return sortDir === \"asc\" ? comp : -comp;\n    });\n  }, [filteredData, sortKey, sortDir]);\n\n  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));\n  const page = Math.min(currentPage, totalPages);\n  const paginatedData = React.useMemo(() => {\n    const start = (page - 1) * pageSize;\n    return sortedData.slice(start, start + pageSize);\n  }, [sortedData, page, pageSize]);\n\n  const allPageKeys = React.useMemo(() => paginatedData.map((row) => row[keyField]), [paginatedData, keyField]);\n  const isAllPageSelected = allPageKeys.length > 0 && allPageKeys.every((k) => selectedKeys.includes(k));\n\n  const toggleSelectAll = () => {\n    if (isAllPageSelected) {\n      setSelectedKeys(selectedKeys.filter((k) => !allPageKeys.includes(k)));\n    } else {\n      setSelectedKeys(Array.from(new Set([...selectedKeys, ...allPageKeys])));\n    }\n  };\n\n  const toggleSelectRow = (key: any) => {\n    if (selectedKeys.includes(key)) {\n      setSelectedKeys(selectedKeys.filter((k) => k !== key));\n    } else {\n      setSelectedKeys([...selectedKeys, key]);\n    }\n  };\n\n  const selectedRows = React.useMemo(() => data.filter((r) => selectedKeys.includes(r[keyField])), [data, selectedKeys, keyField]);\n\n  return (\n    <div className={cn(\"space-y-3 w-full\", className)}>\n      <div className=\"flex items-center justify-between gap-4\">\n        {searchable && (\n          <input\n            type=\"text\"\n            className=\"flex h-9 w-64 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs outline-hidden focus:ring-1 focus:ring-ring\"\n            placeholder={searchPlaceholder}\n            value={search}\n            onChange={(e) => {\n              setSearch(e.target.value);\n              setCurrentPage(1);\n            }}\n          />\n        )}\n\n        {selectable && selectedKeys.length > 0 && (\n          <div className=\"flex items-center gap-3 px-3 py-1 bg-muted rounded-md text-xs font-mono\">\n            <span className=\"text-primary font-bold\">{selectedKeys.length} selected</span>\n            {renderBulkActions && renderBulkActions(selectedRows)}\n          </div>\n        )}\n      </div>\n\n      <div className=\"rounded-lg border border-border bg-card shadow-xs overflow-auto\">\n        <table className=\"w-full text-sm border-collapse text-left\">\n          <thead className=\"border-b border-border bg-muted/40 font-mono text-xs text-muted-foreground uppercase\">\n            <tr>\n              {selectable && (\n                <th className=\"p-3 w-10 text-center\">\n                  <input\n                    type=\"checkbox\"\n                    checked={isAllPageSelected}\n                    onChange={toggleSelectAll}\n                    className=\"h-3.5 w-3.5 accent-primary\"\n                  />\n                </th>\n              )}\n              {columns.map((col, idx) => (\n                <th\n                  key={idx}\n                  style={{ width: col.width, textAlign: col.align || \"left\" }}\n                  className={cn(\"p-3 font-semibold\", col.sortable && \"cursor-pointer select-none hover:text-foreground\")}\n                  onClick={() => {\n                    if (!col.sortable || !col.accessor) return;\n                    if (sortKey === col.accessor) {\n                      if (sortDir === \"asc\") setSortDir(\"desc\");\n                      else if (sortDir === \"desc\") { setSortDir(null); setSortKey(null); }\n                      else setSortDir(\"asc\");\n                    } else {\n                      setSortKey(col.accessor);\n                      setSortDir(\"asc\");\n                    }\n                  }}\n                >\n                  {col.header}\n                  {col.sortable && col.accessor === sortKey && (\n                    <span className=\"ml-1 text-primary\">{sortDir === \"asc\" ? \"▲\" : \"▼\"}</span>\n                  )}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {paginatedData.length === 0 ? (\n              <tr>\n                <td colSpan={columns.length + (selectable ? 1 : 0)} className=\"p-8 text-center text-xs text-muted-foreground\">\n                  {emptyText}\n                </td>\n              </tr>\n            ) : (\n              paginatedData.map((row, rIdx) => {\n                const rowKey = row[keyField] ?? rIdx;\n                const isSelected = selectedKeys.includes(rowKey);\n                return (\n                  <tr key={String(rowKey)} className={cn(\"border-b border-border/60 hover:bg-muted/30 transition-colors\", isSelected && \"bg-muted/40\")}>\n                    {selectable && (\n                      <td className=\"p-3 text-center\">\n                        <input\n                          type=\"checkbox\"\n                          checked={isSelected}\n                          onChange={() => toggleSelectRow(rowKey)}\n                          className=\"h-3.5 w-3.5 accent-primary\"\n                        />\n                      </td>\n                    )}\n                    {columns.map((col, cIdx) => (\n                      <td key={cIdx} style={{ textAlign: col.align || \"left\" }} className={cn(\"p-3 text-foreground\", dense && \"py-2\")}>\n                        {col.render ? col.render(row, rIdx) : col.accessor ? row[col.accessor] : null}\n                      </td>\n                    ))}\n                  </tr>\n                );\n              })\n            )}\n          </tbody>\n        </table>\n      </div>\n\n      {totalPages > 1 && (\n        <div className=\"flex items-center justify-between text-xs font-mono text-muted-foreground\">\n          <span>Page {page} of {totalPages} ({sortedData.length} records)</span>\n          <div className=\"flex gap-2\">\n            <button\n              type=\"button\"\n              disabled={page <= 1}\n              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}\n              className=\"px-2.5 py-1 rounded border border-input bg-background hover:bg-muted disabled:opacity-40\"\n            >\n              Previous\n            </button>\n            <button\n              type=\"button\"\n              disabled={page >= totalPages}\n              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}\n              className=\"px-2.5 py-1 rounded border border-input bg-background hover:bg-muted disabled:opacity-40\"\n            >\n              Next\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "side-nav",
      "type": "registry:ui",
      "title": "SideNav",
      "description": "Left/right vertical navigation rail with brand logo, vertical tab menu, user profile card, and logout action.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/side-nav.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface SideNavBrandData {\n  logo?: React.ReactNode;\n  name: React.ReactNode;\n  subtitle?: React.ReactNode;\n  href?: string;\n  badge?: React.ReactNode;\n}\n\nexport interface SideNavItemData {\n  id?: string;\n  label: string;\n  href?: string;\n  icon?: React.ReactNode | React.ComponentType<{ className?: string }>;\n  active?: boolean;\n  badge?: React.ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n  external?: boolean;\n}\n\nexport interface SideNavGroupData {\n  title?: string;\n  items: SideNavItemData[];\n}\n\nexport interface SideNavUserData {\n  name: string;\n  email?: string;\n  avatar?: string;\n  initials?: string;\n  role?: string;\n  href?: string;\n}\n\nexport interface SideNavProps extends React.HTMLAttributes<HTMLElement> {\n  side?: \"left\" | \"right\";\n  fixed?: boolean;\n  sticky?: boolean;\n  collapsed?: boolean;\n  brand?: SideNavBrandData;\n  items?: SideNavItemData[];\n  groups?: SideNavGroupData[];\n  user?: SideNavUserData;\n  onLogout?: () => void;\n  logoutHref?: string;\n  logoutLabel?: string;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nfunction renderItemIcon(icon: React.ReactNode | React.ComponentType<{ className?: string }>) {\n  if (!icon) return null;\n  if (React.isValidElement(icon)) {\n    return <span className=\"inline-flex items-center justify-center w-4 h-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground\">{icon}</span>;\n  }\n  if (typeof icon === \"function\") {\n    const IconComponent = icon as React.ComponentType<{ className?: string }>;\n    return (\n      <span className=\"inline-flex items-center justify-center w-4 h-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground\">\n        <IconComponent />\n      </span>\n    );\n  }\n  return <span className=\"inline-flex items-center justify-center w-4 h-4 shrink-0 text-muted-foreground transition-colors group-hover:text-foreground\">{icon}</span>;\n}\n\nexport const SideNav = React.forwardRef<HTMLElement, SideNavProps>(\n  (\n    {\n      side = \"left\",\n      fixed = false,\n      sticky = false,\n      collapsed = false,\n      brand,\n      items,\n      groups,\n      user,\n      onLogout,\n      logoutHref,\n      logoutLabel = \"Log out\",\n      header,\n      footer,\n      children,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const menuGroups: SideNavGroupData[] = groups\n      ? groups\n      : items\n      ? [{ items }]\n      : [];\n\n    return (\n      <nav\n        ref={ref}\n        className={cn(\n          \"flex flex-col bg-card text-card-foreground transition-all duration-200 z-40\",\n          collapsed ? \"w-[68px] min-w-[68px]\" : \"w-[260px] min-w-[260px]\",\n          side === \"right\" ? \"border-l border-border\" : \"border-r border-border\",\n          fixed && cn(\"fixed top-0 bottom-0\", side === \"right\" ? \"right-0\" : \"left-0\"),\n          sticky && \"sticky top-0 max-h-screen\",\n          \"h-full min-h-screen\",\n          className\n        )}\n        aria-label=\"Side Navigation\"\n        {...props}\n      >\n        {/* Header / Brand */}\n        {header ? (\n          <div className=\"p-4 border-b border-border min-h-[64px] flex items-center\">{header}</div>\n        ) : brand ? (\n          <div className=\"p-4 border-b border-border min-h-[64px] flex items-center\">\n            <a\n              href={brand.href || \"/\"}\n              className=\"flex items-center gap-3 no-underline text-foreground min-w-0 flex-1\"\n              title={typeof brand.name === \"string\" ? brand.name : undefined}\n            >\n              {brand.logo && (\n                <div className=\"flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 text-primary border border-border shrink-0 overflow-hidden font-bold text-sm\">\n                  {brand.logo}\n                </div>\n              )}\n              {!collapsed && (\n                <div className=\"flex flex-col min-w-0 overflow-hidden\">\n                  <div className=\"font-heading text-sm font-bold leading-tight text-foreground truncate flex items-center gap-1.5\">\n                    {brand.name}\n                    {brand.badge && (\n                      <span className=\"font-mono text-[10px] px-1.5 py-0.5 rounded-full bg-muted border border-border text-muted-foreground\">\n                        {brand.badge}\n                      </span>\n                    )}\n                  </div>\n                  {brand.subtitle && (\n                    <div className=\"text-xs text-muted-foreground truncate mt-0.5\">\n                      {brand.subtitle}\n                    </div>\n                  )}\n                </div>\n              )}\n            </a>\n          </div>\n        ) : null}\n\n        {/* Body / Vertical Tab Menu */}\n        <div className=\"flex-1 overflow-y-auto px-2.5 py-4 flex flex-col gap-5\" role=\"tablist\">\n          {menuGroups.length > 0\n            ? menuGroups.map((group, gi) => (\n                <div key={gi} className=\"flex flex-col gap-0.5\">\n                  {group.title && !collapsed && (\n                    <p className=\"text-[11px] font-semibold tracking-wider uppercase text-muted-foreground px-2.5 py-1 m-0\">\n                      {group.title}\n                    </p>\n                  )}\n                  {group.items.map((item, ii) => {\n                    const itemKey = item.id || `${gi}-${ii}`;\n                    const content = (\n                      <>\n                        {item.active ? (\n                          <span className=\"inline-flex items-center justify-center w-4 h-4 shrink-0 text-primary\">\n                            {renderItemIcon(item.icon)}\n                          </span>\n                        ) : (\n                          renderItemIcon(item.icon)\n                        )}\n                        {!collapsed && (\n                          <span className=\"flex-1 truncate\">{item.label}</span>\n                        )}\n                        {!collapsed && item.badge && (\n                          <span className=\"ml-auto font-mono text-[11px] px-1.5 py-0.5 rounded-full bg-muted border border-border text-muted-foreground\">\n                            {item.badge}\n                          </span>\n                        )}\n                      </>\n                    );\n\n                    const baseClasses = cn(\n                      \"group relative flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors cursor-pointer w-full text-left no-underline\",\n                      item.active\n                        ? cn(\n                            \"bg-muted/60 text-foreground font-semibold\",\n                            side === \"left\" && \"before:absolute before:left-0 before:top-[15%] before:bottom-[15%] before:w-1 before:bg-primary before:rounded-r\",\n                            side === \"right\" && \"after:absolute after:right-0 after:top-[15%] after:bottom-[15%] after:w-1 after:bg-primary after:rounded-l\"\n                          )\n                        : \"text-muted-foreground hover:bg-muted/40 hover:text-foreground\",\n                      item.disabled && \"opacity-50 cursor-not-allowed pointer-events-none\"\n                    );\n\n                    if (item.href) {\n                      return (\n                        <a\n                          key={itemKey}\n                          href={item.disabled ? undefined : item.href}\n                          target={item.external ? \"_blank\" : undefined}\n                          rel={item.external ? \"noopener noreferrer\" : undefined}\n                          role=\"tab\"\n                          aria-selected={item.active}\n                          title={collapsed ? item.label : undefined}\n                          onClick={item.onClick}\n                          className={baseClasses}\n                        >\n                          {content}\n                        </a>\n                      );\n                    }\n\n                    return (\n                      <button\n                        key={itemKey}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={item.active}\n                        disabled={item.disabled}\n                        title={collapsed ? item.label : undefined}\n                        onClick={item.onClick}\n                        className={baseClasses}\n                      >\n                        {content}\n                      </button>\n                    );\n                  })}\n                </div>\n              ))\n            : children}\n        </div>\n\n        {/* Footer / Profile & Logout */}\n        {footer ? (\n          <div className=\"p-3 border-t border-border bg-card\">{footer}</div>\n        ) : user || onLogout || logoutHref ? (\n          <div className=\"p-3 border-t border-border bg-card\">\n            <div className=\"flex items-center justify-between gap-2 p-1.5 rounded-md hover:bg-muted/40 transition-colors\">\n              {user && (\n                <a\n                  href={user.href || \"#\"}\n                  className=\"flex items-center gap-2.5 min-w-0 flex-1 no-underline text-foreground\"\n                  title={user.name}\n                >\n                  <div className=\"w-8 h-8 rounded-md border border-border bg-muted text-foreground flex items-center justify-center font-semibold text-xs shrink-0 overflow-hidden\">\n                    {user.avatar ? (\n                      <img src={user.avatar} alt={user.name} className=\"w-full h-full object-cover\" />\n                    ) : (\n                      user.initials || user.name.slice(0, 2).toUpperCase()\n                    )}\n                  </div>\n                  {!collapsed && (\n                    <div className=\"flex flex-col min-w-0 overflow-hidden\">\n                      <div className=\"text-xs font-semibold text-foreground truncate leading-tight\">\n                        {user.name}\n                      </div>\n                      {user.email ? (\n                        <div className=\"text-[11px] text-muted-foreground truncate mt-0.5\">\n                          {user.email}\n                        </div>\n                      ) : user.role ? (\n                        <div className=\"text-[11px] text-muted-foreground truncate mt-0.5\">\n                          {user.role}\n                        </div>\n                      ) : null}\n                    </div>\n                  )}\n                </a>\n              )}\n\n              {(onLogout || logoutHref) && (\n                logoutHref ? (\n                  <a\n                    href={logoutHref}\n                    className=\"inline-flex items-center justify-center w-7 h-7 rounded text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 transition-colors shrink-0\"\n                    title={logoutLabel}\n                    aria-label={logoutLabel}\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    >\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\" />\n                      <polyline points=\"16 17 21 12 16 7\" />\n                      <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\" />\n                    </svg>\n                  </a>\n                ) : (\n                  <button\n                    type=\"button\"\n                    className=\"inline-flex items-center justify-center w-7 h-7 rounded text-muted-foreground hover:text-rose-500 hover:bg-rose-500/10 transition-colors shrink-0\"\n                    title={logoutLabel}\n                    aria-label={logoutLabel}\n                    onClick={onLogout}\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    >\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\" />\n                      <polyline points=\"16 17 21 12 16 7\" />\n                      <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\" />\n                    </svg>\n                  </button>\n                )\n              )}\n            </div>\n          </div>\n        ) : null}\n      </nav>\n    );\n  }\n);\n\nSideNav.displayName = \"SideNav\";\n\nexport const SideNavHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-4 border-b border-border min-h-[64px] flex items-center\", className)} {...props} />\n));\nSideNavHeader.displayName = \"SideNavHeader\";\n\nexport const SideNavBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"flex-1 overflow-y-auto px-2.5 py-4 flex flex-col gap-5\", className)} {...props} />\n));\nSideNavBody.displayName = \"SideNavBody\";\n\nexport const SideNavFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-3 border-t border-border bg-card\", className)} {...props} />\n));\nSideNavFooter.displayName = \"SideNavFooter\";\n",
          "type": "registry:ui"
        }
      ]
    },
    {
      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
      "name": "top-nav",
      "type": "registry:ui",
      "title": "TopNav",
      "description": "Top navigation header bar with brand logo, navigation links, dropdown menus, user profile trigger, and theme selector.",
      "registryDependencies": [
        "https://ui.arpitbhayani.me/r/aui.json"
      ],
      "files": [
        {
          "path": "ui/top-nav.tsx",
          "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface TopNavBrandData {\n  logo?: React.ReactNode;\n  title: React.ReactNode;\n  subtitle?: React.ReactNode;\n  badge?: React.ReactNode;\n  href?: string;\n}\n\nexport interface TopNavDropdownItem {\n  id?: string;\n  label: string;\n  href?: string;\n  description?: string;\n  icon?: React.ReactNode;\n  active?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  divider?: boolean;\n  destructive?: boolean;\n}\n\nexport interface TopNavLinkData {\n  id?: string;\n  label: string;\n  href?: string;\n  active?: boolean;\n  badge?: React.ReactNode;\n  icon?: React.ReactNode;\n  items?: TopNavDropdownItem[];\n  onClick?: () => void;\n  disabled?: boolean;\n  external?: boolean;\n}\n\nexport interface TopNavUserData {\n  name: string;\n  email?: string;\n  avatar?: string;\n  initials?: string;\n  role?: string;\n  href?: string;\n}\n\nexport interface TopNavUserMenuItem {\n  label: string;\n  href?: string;\n  icon?: React.ReactNode;\n  onClick?: () => void;\n  divider?: boolean;\n  destructive?: boolean;\n}\n\nexport interface TopNavProps extends React.HTMLAttributes<HTMLElement> {\n  brand?: TopNavBrandData;\n  links?: TopNavLinkData[];\n  rightActions?: React.ReactNode;\n  user?: TopNavUserData;\n  userMenuItems?: TopNavUserMenuItem[];\n  onLogout?: () => void;\n  logoutLabel?: string;\n  showThemeToggle?: boolean;\n  sticky?: boolean;\n  maxWidth?: \"xl\" | \"lg\" | \"full\";\n}\n\nexport const TopNav = React.forwardRef<HTMLElement, TopNavProps>(\n  (\n    {\n      brand,\n      links = [],\n      rightActions,\n      user,\n      userMenuItems,\n      onLogout,\n      logoutLabel = \"Log out\",\n      showThemeToggle = true,\n      sticky = true,\n      maxWidth = \"xl\",\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [mobileOpen, setMobileOpen] = React.useState(false);\n    const [openDropdown, setOpenDropdown] = React.useState<string | null>(null);\n    const [userDropdownOpen, setUserDropdownOpen] = React.useState(false);\n\n    const maxWidthClass =\n      maxWidth === \"full\"\n        ? \"max-w-full\"\n        : maxWidth === \"lg\"\n        ? \"max-w-5xl\"\n        : \"max-w-7xl\";\n\n    return (\n      <header\n        ref={ref}\n        className={cn(\n          \"w-full bg-background/80 backdrop-blur-md border-b border-border z-50 font-sans\",\n          sticky && \"sticky top-0\",\n          className\n        )}\n        {...props}\n      >\n        <div className={cn(\"flex items-center justify-between gap-6 h-16 px-6 mx-auto\", maxWidthClass)}>\n          {/* Left section: Brand and links */}\n          <div className=\"flex items-center gap-8 min-w-0 flex-1\">\n            {brand && (\n              <a\n                href={brand.href || \"/\"}\n                className=\"inline-flex items-center gap-3 no-underline text-foreground shrink-0\"\n              >\n                {brand.logo && (\n                  <span className=\"flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 text-primary border border-border font-bold text-sm shrink-0 overflow-hidden\">\n                    {brand.logo}\n                  </span>\n                )}\n                <div className=\"flex flex-col min-w-0 gap-0.5\">\n                  <span className=\"font-heading font-bold text-foreground text-sm tracking-tight whitespace-nowrap leading-tight\">\n                    {brand.title}\n                  </span>\n                  {brand.subtitle && (\n                    <span className=\"text-xs text-muted-foreground whitespace-nowrap leading-tight\">\n                      {brand.subtitle}\n                    </span>\n                  )}\n                </div>\n                {brand.badge && <span className=\"ml-1\">{brand.badge}</span>}\n              </a>\n            )}\n\n            {/* Desktop Navigation Links */}\n            {links.length > 0 && (\n              <nav className=\"hidden md:flex items-center gap-1.5 list-none m-0 p-0\" aria-label=\"Main Navigation\">\n                {links.map((link, idx) => {\n                  const linkId = link.id || String(idx);\n                  if (link.items && link.items.length > 0) {\n                    const isOpen = openDropdown === linkId;\n                    return (\n                      <div key={linkId} className=\"relative\">\n                        <button\n                          type=\"button\"\n                          onClick={() => setOpenDropdown(isOpen ? null : linkId)}\n                          className={cn(\n                            \"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md transition-colors whitespace-nowrap cursor-pointer\",\n                            link.active\n                              ? \"text-foreground font-semibold bg-accent\"\n                              : \"text-muted-foreground hover:text-foreground hover:bg-accent\"\n                          )}\n                        >\n                          {link.icon && <span>{link.icon}</span>}\n                          <span>{link.label}</span>\n                          <svg\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"12\"\n                            height=\"12\"\n                            viewBox=\"0 0 24 24\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"2\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            className={cn(\"transition-transform opacity-60\", isOpen && \"rotate-180\")}\n                          >\n                            <polyline points=\"6 9 12 15 18 9\" />\n                          </svg>\n                        </button>\n\n                        {isOpen && (\n                          <div className=\"absolute left-0 mt-2 w-64 p-2 bg-popover text-popover-foreground rounded-md border border-border shadow-lg z-50 flex flex-col gap-1\">\n                            <div className=\"px-2.5 py-1.5 text-xs font-semibold text-muted-foreground border-b border-border mb-1 uppercase tracking-wider\">\n                              {link.label}\n                            </div>\n                            {link.items.map((sub, sIdx) => {\n                              if (sub.divider) {\n                                return <div key={sIdx} className=\"h-px bg-border my-1\" />;\n                              }\n                              const Comp = sub.href ? \"a\" : \"button\";\n                              return (\n                                <Comp\n                                  key={sub.id || sIdx}\n                                  href={sub.href}\n                                  onClick={() => {\n                                    sub.onClick?.();\n                                    setOpenDropdown(null);\n                                  }}\n                                  className={cn(\n                                    \"flex items-start gap-3 w-full p-2.5 rounded-md transition-colors text-left\",\n                                    sub.destructive\n                                      ? \"text-destructive hover:bg-destructive/10\"\n                                      : \"text-foreground hover:bg-accent\"\n                                  )}\n                                >\n                                  {sub.icon && <span className=\"mt-0.5 shrink-0 text-muted-foreground\">{sub.icon}</span>}\n                                  <div className=\"flex flex-col min-w-0 gap-1 flex-1\">\n                                    <span className=\"font-semibold text-xs leading-snug\">{sub.label}</span>\n                                    {sub.description && (\n                                      <span className=\"text-[11px] text-muted-foreground leading-relaxed whitespace-normal break-words\">\n                                        {sub.description}\n                                      </span>\n                                    )}\n                                  </div>\n                                </Comp>\n                              );\n                            })}\n                          </div>\n                        )}\n                      </div>\n                    );\n                  }\n\n                  const Comp = link.href ? \"a\" : \"button\";\n                  return (\n                    <Comp\n                      key={linkId}\n                      href={link.href}\n                      onClick={link.onClick}\n                      target={link.external ? \"_blank\" : undefined}\n                      rel={link.external ? \"noopener noreferrer\" : undefined}\n                      className={cn(\n                        \"inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md transition-colors whitespace-nowrap\",\n                        link.active\n                          ? \"text-foreground font-semibold bg-accent\"\n                          : \"text-muted-foreground hover:text-foreground hover:bg-accent\"\n                      )}\n                    >\n                      {link.icon && <span>{link.icon}</span>}\n                      <span>{link.label}</span>\n                      {link.badge && <span>{link.badge}</span>}\n                    </Comp>\n                  );\n                })}\n              </nav>\n            )}\n\n            {children}\n          </div>\n\n          {/* Right section: Actions, Theme, User menu, Burger */}\n          <div className=\"flex items-center gap-4 shrink-0 ml-auto\">\n            {rightActions}\n\n            {user && (\n              <div className=\"relative\">\n                <button\n                  type=\"button\"\n                  onClick={() => setUserDropdownOpen(!userDropdownOpen)}\n                  className=\"inline-flex items-center gap-2.5 p-1 pr-3 rounded-full border border-border bg-secondary hover:bg-accent transition-colors cursor-pointer\"\n                  aria-label={`User menu for ${user.name}`}\n                >\n                  <div className=\"w-7 h-7 rounded-full bg-muted text-foreground text-xs font-bold flex items-center justify-center overflow-hidden\">\n                    {user.avatar ? (\n                      <img\n                        src={user.avatar}\n                        alt={user.name}\n                        className=\"w-full h-full object-cover\"\n                      />\n                    ) : (\n                      user.initials || user.name.slice(0, 2).toUpperCase()\n                    )}\n                  </div>\n                  <span className=\"text-xs font-semibold text-foreground max-w-[140px] truncate\">\n                    {user.name}\n                  </span>\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    width=\"12\"\n                    height=\"12\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    className=\"opacity-60\"\n                  >\n                    <polyline points=\"6 9 12 15 18 9\" />\n                  </svg>\n                </button>\n\n                {userDropdownOpen && (\n                  <div className=\"absolute right-0 mt-2 w-56 p-1.5 bg-popover text-popover-foreground rounded-md border border-border shadow-lg z-50 flex flex-col gap-1\">\n                    <div className=\"flex flex-col gap-0.5 px-3 py-2 border-b border-border mb-1\">\n                      <div className=\"text-xs font-bold text-foreground truncate\">{user.name}</div>\n                      {user.email && (\n                        <div className=\"text-[11px] text-muted-foreground truncate\">{user.email}</div>\n                      )}\n                    </div>\n\n                    {userMenuItems && userMenuItems.length > 0 ? (\n                      userMenuItems.map((item, idx) => {\n                        if (item.divider) {\n                          return <div key={idx} className=\"h-px bg-border my-1\" />;\n                        }\n                        const Comp = item.href ? \"a\" : \"button\";\n                        return (\n                          <Comp\n                            key={idx}\n                            href={item.href}\n                            onClick={() => {\n                              item.onClick?.();\n                              setUserDropdownOpen(false);\n                            }}\n                            className={cn(\n                              \"flex items-center gap-2.5 w-full px-3 py-2 text-xs rounded transition-colors text-left\",\n                              item.destructive\n                                ? \"text-destructive hover:bg-destructive/10\"\n                                : \"text-foreground hover:bg-accent\"\n                            )}\n                          >\n                            {item.icon}\n                            <span>{item.label}</span>\n                          </Comp>\n                        );\n                      })\n                    ) : (\n                      <a\n                        href={user.href || \"#\"}\n                        onClick={() => setUserDropdownOpen(false)}\n                        className=\"flex items-center gap-2.5 px-3 py-2 text-xs text-foreground hover:bg-accent rounded transition-colors\"\n                      >\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          width=\"14\"\n                          height=\"14\"\n                          viewBox=\"0 0 24 24\"\n                          fill=\"none\"\n                          stroke=\"currentColor\"\n                          strokeWidth=\"2\"\n                          strokeLinecap=\"round\"\n                          strokeLinejoin=\"round\"\n                        >\n                          <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" />\n                          <circle cx=\"12\" cy=\"7\" r=\"4\" />\n                        </svg>\n                        <span>Account Settings</span>\n                      </a>\n                    )}\n\n                    {(onLogout || logoutLabel) && (\n                      <>\n                        <div className=\"h-px bg-border my-1\" />\n                        <button\n                          type=\"button\"\n                          onClick={() => {\n                            onLogout?.();\n                            setUserDropdownOpen(false);\n                          }}\n                          className=\"flex items-center gap-2 w-full px-2.5 py-1.5 text-xs text-destructive hover:bg-destructive/10 rounded transition-colors text-left cursor-pointer\"\n                        >\n                          <svg\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            width=\"14\"\n                            height=\"14\"\n                            viewBox=\"0 0 24 24\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"2\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          >\n                            <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\" />\n                            <polyline points=\"16 17 21 12 16 7\" />\n                            <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\" />\n                          </svg>\n                          <span>{logoutLabel}</span>\n                        </button>\n                      </>\n                    )}\n                  </div>\n                )}\n              </div>\n            )}\n\n            {/* Mobile burger toggle button */}\n            <button\n              type=\"button\"\n              className=\"md:hidden flex items-center justify-center w-8 h-8 rounded-md border border-border text-foreground hover:bg-accent transition-colors\"\n              onClick={() => setMobileOpen(!mobileOpen)}\n              aria-label=\"Toggle navigation menu\"\n              aria-expanded={mobileOpen}\n            >\n              {mobileOpen ? (\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"18\"\n                  height=\"18\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n                </svg>\n              ) : (\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"18\"\n                  height=\"18\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                >\n                  <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\n                  <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\n                  <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" />\n                </svg>\n              )}\n            </button>\n          </div>\n        </div>\n\n        {/* Mobile menu collapsible */}\n        {mobileOpen && (\n          <div className=\"md:hidden flex flex-col gap-3 px-5 py-4 bg-background border-b border-border shadow-lg max-h-[calc(100vh-4.5rem)] overflow-y-auto\">\n            {links.map((link, idx) => (\n              <div key={link.id || idx} className=\"flex flex-col gap-1 border-b border-border/50 pb-2.5 last:border-b-0 last:pb-0\">\n                <a\n                  href={link.href || \"#\"}\n                  onClick={link.onClick}\n                  className={cn(\n                    \"flex items-center justify-between p-2.5 text-sm font-semibold rounded-md border border-border/60 bg-secondary transition-colors\",\n                    link.active\n                      ? \"text-foreground bg-accent border-border\"\n                      : \"text-foreground/90 hover:bg-accent\"\n                  )}\n                >\n                  <span className=\"flex items-center gap-2\">\n                    {link.icon}\n                    {link.label}\n                  </span>\n                  {link.badge}\n                </a>\n                {link.items && link.items.length > 0 && (\n                  <div className=\"pl-3 mt-1.5 flex flex-col gap-1 border-l-2 border-border ml-2\">\n                    {link.items.map((sub, sIdx) => {\n                      if (sub.divider) return null;\n                      return (\n                        <a\n                          key={sub.id || sIdx}\n                          href={sub.href || \"#\"}\n                          onClick={sub.onClick}\n                          className={cn(\n                            \"flex flex-col gap-0.5 p-2 rounded-md transition-colors\",\n                            sub.active\n                              ? \"text-foreground font-semibold bg-accent\"\n                              : \"text-foreground/80 hover:bg-accent\"\n                          )}\n                        >\n                          <span className=\"text-xs font-semibold\">{sub.label}</span>\n                          {sub.description && (\n                            <span className=\"text-[11px] text-muted-foreground leading-relaxed\">\n                              {sub.description}\n                            </span>\n                          )}\n                        </a>\n                      );\n                    })}\n                  </div>\n                )}\n              </div>\n            ))}\n\n            {/* Mobile user profile card & logout */}\n            {user && (\n              <div className=\"flex items-center justify-between p-3 rounded-md border border-border bg-secondary mt-1\">\n                <div className=\"flex items-center gap-3 min-w-0\">\n                  <div className=\"w-8 h-8 rounded-full bg-muted text-foreground text-xs font-bold flex items-center justify-center overflow-hidden shrink-0\">\n                    {user.avatar ? (\n                      <img src={user.avatar} alt={user.name} className=\"w-full h-full object-cover\" />\n                    ) : (\n                      user.initials || user.name.slice(0, 2).toUpperCase()\n                    )}\n                  </div>\n                  <div className=\"flex flex-col min-w-0\">\n                    <span className=\"text-xs font-bold text-foreground truncate\">{user.name}</span>\n                    {user.email && (\n                      <span className=\"text-[11px] text-muted-foreground truncate\">{user.email}</span>\n                    )}\n                  </div>\n                </div>\n                {(onLogout || logoutLabel) && (\n                  <button\n                    type=\"button\"\n                    onClick={onLogout}\n                    className=\"p-1.5 text-destructive hover:bg-destructive/10 rounded transition-colors\"\n                    title={logoutLabel}\n                    aria-label={logoutLabel}\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"16\"\n                      height=\"16\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"2\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    >\n                      <path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\" />\n                      <polyline points=\"16 17 21 12 16 7\" />\n                      <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\" />\n                    </svg>\n                  </button>\n                )}\n              </div>\n            )}\n\n            {/* Mobile right actions */}\n            {rightActions && (\n              <div className=\"flex flex-col gap-2 mt-1\">\n                {rightActions}\n              </div>\n            )}\n          </div>\n        )}\n      </header>\n    );\n  }\n);\n\nTopNav.displayName = \"TopNav\";\n",
          "type": "registry:ui"
        }
      ]
    }
  ]
}