{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "joyco",
  "homepage": "https://registry.joyco.studio",
  "items": [
    {
      "name": "infinite-list",
      "type": "registry:component",
      "title": "Infinite List",
      "description": "A bias-based infinite scroll wrapper and hook.",
      "files": [
        {
          "path": "registry/components/infinite-list.tsx",
          "type": "registry:component"
        }
      ]
    },
    {
      "name": "marquee",
      "type": "registry:component",
      "title": "Marquee",
      "description": "The all in one marquee component with smooth Web Animations API.",
      "files": [
        {
          "path": "registry/components/marquee.tsx",
          "type": "registry:component"
        }
      ],
      "dependencies": [
        "@joycostudio/marquee"
      ]
    },
    {
      "name": "file-button",
      "type": "registry:component",
      "title": "File Button",
      "description": "A button that opens a file input when clicked.",
      "files": [
        {
          "path": "registry/components/file-button.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/hooks/use-file-upload.tsx",
          "type": "registry:hook"
        }
      ],
      "registryDependencies": [
        "@joyco/button"
      ]
    },
    {
      "name": "file-dropzone",
      "type": "registry:component",
      "title": "File Dropzone",
      "description": "A drag-and-drop file upload component with image preview, validation, and error handling.",
      "files": [
        {
          "path": "registry/components/file-dropzone.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/hooks/use-file-upload.tsx",
          "type": "registry:hook"
        }
      ],
      "registryDependencies": [
        "@joyco/button"
      ]
    },
    {
      "name": "mobile-menu",
      "type": "registry:component",
      "title": "Mobile Menu",
      "description": "A full-screen overlay mobile menu.",
      "files": [
        {
          "path": "registry/components/mobile-menu.tsx",
          "type": "registry:component"
        }
      ],
      "dependencies": [
        "@radix-ui/react-dialog",
        "@radix-ui/react-slot",
        "react-remove-scroll"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "scroll-area",
      "type": "registry:component",
      "title": "Scroll Area",
      "description": "A scrollable area component with customizable top and bottom shadows that appear when content overflows.",
      "files": [
        {
          "path": "registry/components/scroll-area.tsx",
          "type": "registry:component"
        }
      ],
      "dependencies": [
        "@radix-ui/react-presence"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "chat",
      "type": "registry:component",
      "title": "Chat",
      "description": "A composable chat component",
      "files": [
        {
          "path": "registry/components/chat.tsx",
          "type": "registry:component"
        },
        {
          "path": "hooks/use-interruption.ts",
          "type": "registry:hook"
        },
        {
          "path": "registry/lib/compose-refs.ts",
          "type": "registry:lib"
        }
      ],
      "dependencies": [
        "debounce",
        "react-use-measure"
      ],
      "registryDependencies": [
        "@joyco/input-group",
        "@joyco/avatar",
        "@joyco/utils"
      ]
    },
    {
      "name": "hls-video-player",
      "type": "registry:component",
      "title": "HLS Video Player",
      "description": "A headless HLS video player with native HLS detection and error handling.",
      "files": [
        {
          "path": "registry/components/hls-video-player.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/lib/compose-refs.ts",
          "type": "registry:lib"
        }
      ],
      "dependencies": [
        "hls.js"
      ]
    },
    {
      "name": "action-hint",
      "type": "registry:component",
      "title": "Action Hint",
      "description": "A particle emitter for showing ephemeral action feedback hints that fade out.",
      "files": [
        {
          "path": "registry/components/action-hint.tsx",
          "type": "registry:component"
        }
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "image-sequence",
      "type": "registry:component",
      "title": "Image Sequence",
      "description": "A canvas-based image sequence player with binary progressive loading for smooth playback.",
      "files": [
        {
          "path": "registry/components/image-sequence.tsx",
          "type": "registry:component"
        }
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "typewriter",
      "type": "registry:component",
      "title": "Typewriter",
      "description": "A lightweight typewriter text component that cycles through phrases with minimal JavaScript.",
      "files": [
        {
          "path": "registry/components/typewriter.tsx",
          "type": "registry:component"
        },
        {
          "path": "hooks/use-typewriter.ts",
          "type": "registry:hook"
        }
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "spritesheet-sequencer",
      "type": "registry:component",
      "title": "Spritesheet Sequencer",
      "description": "A WAAPI-powered spritesheet animator for squared grid-based spritesheets with stepped frame animation.",
      "files": [
        {
          "path": "registry/components/spritesheet-sequencer.tsx",
          "type": "registry:component"
        }
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "magnetic",
      "type": "registry:component",
      "title": "Magnetic",
      "description": "A cursor-attraction wrapper that makes inner content subtly follow the mouse position.",
      "files": [
        {
          "path": "registry/components/magnetic.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/lib/compose-refs.ts",
          "type": "registry:lib"
        }
      ],
      "dependencies": [
        "@radix-ui/react-slot"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "scramble",
      "type": "registry:component",
      "title": "Scramble",
      "description": "A GSAP registered effect that decodes text with staggered character-by-character reveal animation.",
      "files": [
        {
          "path": "registry/lib/gsap/effects/scramble.ts",
          "type": "registry:lib"
        }
      ],
      "dependencies": [
        "gsap"
      ]
    },
    {
      "name": "scramble-button",
      "type": "registry:component",
      "title": "Scramble Button",
      "description": "A button that scrambles its text on hover using the scramble GSAP effect.",
      "files": [
        {
          "path": "registry/components/scramble-button.tsx",
          "type": "registry:component"
        }
      ],
      "dependencies": [
        "gsap"
      ],
      "registryDependencies": [
        "@joyco/scramble",
        "@joyco/button"
      ]
    },
    {
      "name": "brick-breaker",
      "type": "registry:component",
      "title": "Brick Breaker",
      "description": "A fully-featured brick breaker game with multiple levels, brick types, and proper collision physics.",
      "files": [
        {
          "path": "registry/components/games/brick-breaker/index.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/brick-breaker/brick-breaker.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/brick-breaker/ui.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/brick-breaker/types.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/brick-breaker/config.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/brick-breaker/levels.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/brick-breaker/utils.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/brick-breaker/use-brick-breaker.ts",
          "type": "registry:component"
        }
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "snake-game",
      "type": "registry:component",
      "title": "Snake Game",
      "description": "A minimal, themeable snake game component with highscore persistence.",
      "files": [
        {
          "path": "registry/components/games/snake-game/index.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/snake-game/snake-game.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/snake-game/types.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/snake-game/config.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/snake-game/utils.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/snake-game/use-snake-game.ts",
          "type": "registry:hook"
        },
        {
          "path": "registry/hooks/use-local-storage.ts",
          "type": "registry:hook"
        }
      ],
      "registryDependencies": [
        "@joyco/button",
        "@joyco/kbd",
        "@joyco/utils"
      ]
    },
    {
      "name": "space-invaders",
      "type": "registry:component",
      "title": "Space Invaders",
      "description": "A vertical-scrolling shoot-'em-up with enemy waves, a scaling boss (REBEL CRUSHER), pause, and highscore persistence.",
      "files": [
        {
          "path": "registry/components/games/space-invaders/index.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/space-invaders/space-invaders.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/space-invaders/ui.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/space-invaders/use-space-invaders.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/space-invaders/engine.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/space-invaders/render.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/space-invaders/types.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/space-invaders/config.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/games/space-invaders/utils.ts",
          "type": "registry:component"
        }
      ],
      "registryDependencies": [
        "@joyco/button",
        "@joyco/kbd",
        "@joyco/utils"
      ]
    },
    {
      "name": "typed-emitter",
      "type": "registry:lib",
      "title": "Typed Emitter",
      "description": "A thin typed wrapper around tiny-emitter that lets subclasses pin an event-map type for fully typed on/emit.",
      "files": [
        {
          "path": "registry/lib/typed-emitter.ts",
          "type": "registry:lib"
        }
      ],
      "dependencies": [
        "tiny-emitter"
      ]
    },
    {
      "name": "canvas-2d",
      "type": "registry:component",
      "title": "Canvas 2D",
      "description": "A DPR-aware 2D canvas component and hook that handles sizing, pixel ratio, and context setup automatically.",
      "files": [
        {
          "path": "registry/components/canvas-2d.tsx",
          "type": "registry:component"
        }
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "debug-canvas",
      "type": "registry:component",
      "title": "r3f Canvas",
      "description": "An enhanced R3F Canvas with built-in debug helpers \u2014 orbit/fly controls (mutually exclusive), grid, camera monitor, and performance stats \u2014 all toggled via a shared tweakpane folder.",
      "files": [
        {
          "path": "registry/components/debug-canvas/index.ts",
          "type": "registry:component"
        },
        {
          "path": "registry/components/debug-canvas/debug-canvas.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/components/debug-canvas/debug-controls.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/components/debug-canvas/debug-grid-helper.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/components/debug-canvas/debug-camera-monitor.tsx",
          "type": "registry:component"
        },
        {
          "path": "registry/components/debug-canvas/debug-perf-monitor.tsx",
          "type": "registry:component"
        }
      ],
      "dependencies": [
        "stats-gl",
        "@react-three/drei"
      ],
      "registryDependencies": [
        "@joyco/debug"
      ]
    },
    {
      "name": "debug",
      "type": "registry:component",
      "title": "Debug Hooks",
      "description": "A tweakpane-powered debug panel with URL-persisted state, draggable UI, and reactive hooks for binding component values.",
      "files": [
        {
          "path": "registry/lib/debug/provider.tsx",
          "type": "registry:lib"
        },
        {
          "path": "registry/lib/debug/context.tsx",
          "type": "registry:lib"
        },
        {
          "path": "registry/lib/debug/hooks.tsx",
          "type": "registry:lib"
        },
        {
          "path": "registry/lib/debug/hash-state.ts",
          "type": "registry:lib"
        },
        {
          "path": "registry/lib/debug/index.ts",
          "type": "registry:lib"
        },
        {
          "path": "registry/lib/debug/use-draggable.ts",
          "type": "registry:lib"
        }
      ],
      "dependencies": [
        "@tweakpane/core",
        "lodash.debounce",
        "@types/lodash.debounce",
        "zustand",
        "tweakpane"
      ]
    },
    {
      "name": "avatar",
      "type": "registry:ui",
      "title": "Avatar",
      "description": "An image element with a fallback for representing the user.",
      "files": [
        {
          "path": "components/ui/avatar.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-avatar"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "badge",
      "type": "registry:ui",
      "title": "Badge",
      "description": "Displays a badge or a component that looks like a badge.",
      "files": [
        {
          "path": "components/ui/badge.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-slot",
        "class-variance-authority"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "button",
      "type": "registry:ui",
      "title": "Button",
      "description": "Displays a button or a component that looks like a button.",
      "files": [
        {
          "path": "components/ui/button.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-slot",
        "class-variance-authority"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "button-group",
      "type": "registry:ui",
      "title": "Button Group",
      "description": "Groups multiple buttons or inputs into a single visual unit.",
      "files": [
        {
          "path": "components/ui/button-group.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-slot",
        "class-variance-authority"
      ],
      "registryDependencies": [
        "@joyco/separator",
        "@joyco/utils"
      ]
    },
    {
      "name": "card",
      "type": "registry:ui",
      "title": "Card",
      "description": "Displays a card with header, content, and footer.",
      "files": [
        {
          "path": "components/ui/card.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "chart",
      "type": "registry:ui",
      "title": "Chart",
      "description": "Composable charting components built on top of Recharts.",
      "files": [
        {
          "path": "components/ui/chart.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "recharts"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "collapsible",
      "type": "registry:ui",
      "title": "Collapsible",
      "description": "An interactive component which expands/collapses a panel.",
      "files": [
        {
          "path": "components/ui/collapsible.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-collapsible"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "dropdown-menu",
      "type": "registry:ui",
      "title": "Dropdown Menu",
      "description": "Displays a menu to the user triggered by a button.",
      "files": [
        {
          "path": "registry/ui/dropdown-menu.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-dropdown-menu",
        "lucide-react"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "input",
      "type": "registry:ui",
      "title": "Input",
      "description": "Displays a form input field.",
      "files": [
        {
          "path": "components/ui/input.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "input-group",
      "type": "registry:ui",
      "title": "Input Group",
      "description": "Composable input group with addons, buttons, and textarea support.",
      "files": [
        {
          "path": "components/ui/input-group.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "class-variance-authority"
      ],
      "registryDependencies": [
        "@joyco/button",
        "@joyco/input",
        "@joyco/textarea",
        "@joyco/utils"
      ]
    },
    {
      "name": "kbd",
      "type": "registry:ui",
      "title": "Kbd",
      "description": "Displays a keyboard key or shortcut.",
      "files": [
        {
          "path": "components/ui/kbd.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "media-player",
      "type": "registry:ui",
      "title": "Media Player",
      "description": "A composable media player with controls, settings, captions, and PiP support.",
      "files": [
        {
          "path": "components/ui/media-player.tsx",
          "type": "registry:ui"
        },
        {
          "path": "registry/lib/compose-refs.ts",
          "type": "registry:lib"
        },
        {
          "path": "hooks/use-lazy-ref.ts",
          "type": "registry:hook"
        }
      ],
      "dependencies": [
        "media-chrome",
        "@radix-ui/react-direction",
        "@radix-ui/react-slider",
        "@radix-ui/react-slot"
      ],
      "registryDependencies": [
        "@joyco/badge",
        "@joyco/button",
        "@joyco/dropdown-menu",
        "@joyco/tooltip",
        "@joyco/utils"
      ]
    },
    {
      "name": "mention",
      "type": "registry:ui",
      "title": "Mention",
      "description": "An autocomplete mention input component.",
      "files": [
        {
          "path": "components/ui/mention.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@diceui/mention"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "popover",
      "type": "registry:ui",
      "title": "Popover",
      "description": "Displays rich content in a portal triggered by a button.",
      "files": [
        {
          "path": "components/ui/popover.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-popover"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "select",
      "type": "registry:ui",
      "title": "Select",
      "description": "Displays a list of options for the user to pick from.",
      "files": [
        {
          "path": "registry/ui/select.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-select",
        "lucide-react"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "separator",
      "type": "registry:ui",
      "title": "Separator",
      "description": "Visually or semantically separates content.",
      "files": [
        {
          "path": "components/ui/separator.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-separator",
        "class-variance-authority"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "slider",
      "type": "registry:ui",
      "title": "Slider",
      "description": "An input where the user selects a value from within a given range.",
      "files": [
        {
          "path": "components/ui/slider.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-slider"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "switch",
      "type": "registry:ui",
      "title": "Switch",
      "description": "A control that allows the user to toggle between checked and unchecked.",
      "files": [
        {
          "path": "components/ui/switch.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "radix-ui"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "tabs",
      "type": "registry:ui",
      "title": "Tabs",
      "description": "A set of layered sections of content displayed one at a time.",
      "files": [
        {
          "path": "components/ui/tabs.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-tabs"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "textarea",
      "type": "registry:ui",
      "title": "Textarea",
      "description": "Displays a form textarea field.",
      "files": [
        {
          "path": "components/ui/textarea.tsx",
          "type": "registry:ui"
        }
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "tooltip",
      "type": "registry:ui",
      "title": "Tooltip",
      "description": "A popup that displays information related to an element on hover.",
      "files": [
        {
          "path": "components/ui/tooltip.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-tooltip"
      ],
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "cluster",
      "type": "registry:ui",
      "title": "Cluster",
      "description": "A flex container with the design system gap and an optional filler for space distribution.",
      "files": [
        {
          "path": "components/ui/cluster.tsx",
          "type": "registry:ui"
        }
      ],
      "dependencies": [
        "@radix-ui/react-slot",
        "class-variance-authority"
      ],
      "cssVars": {
        "theme": {
          "gap": "0.25rem",
          "spacing-gap": "var(--gap)"
        }
      },
      "css": {
        "@layer base": {
          ":where([data-slot='cluster'] > *)": {
            "background-color": "var(--cluster-bg, transparent)"
          }
        }
      },
      "docs": "Cluster is a transparent flex container \u2014 it never has a visible background. Use the `bg` prop to set `--cluster-bg` which direct children inherit. Use `<Filler />` for space distribution instead of justify-between. Every direct child must be a solid element with its own bg. See https://hub.joyco.studio/components/cluster for full docs.",
      "meta": {
        "llms": "Cluster & Filler are layout primitives. Rules: (1) Clusters are transparent, bg prop sets --cluster-bg inherited by children via @layer base :where() rule. (2) Every direct Cluster child must be a solid element with its own visual identity. (3) Use <Filler /> (flex-1, aria-hidden) for space distribution \u2014 never justify-between/end/around. (4) Children override inherited bg with any bg-* class. Props: display (flex|inline-flex), direction (row|col), align (start|center|end|stretch|baseline), wrap (bool), bg (muted|accent), asChild (bool). For inline contexts use asChild with <span>. Requires CSS: @layer base { :where([data-slot='cluster'] > *) { background-color: var(--cluster-bg, transparent); } }"
      },
      "registryDependencies": [
        "@joyco/utils"
      ]
    },
    {
      "name": "joyco-theme",
      "type": "registry:theme",
      "title": "JOYCO Theme",
      "description": "JOYCO brand theme with light and dark mode color tokens.",
      "css": {
        "@custom-variant hocus (&:is(:hover, :focus-visible))": {},
        "@custom-variant dark (&:where(.dark, .dark *))": {},
        "@custom-variant light (&:where(.light, .light *))": {},
        "@layer base": {
          "*": {
            "scrollbar-width": "thin",
            "scrollbar-color": "var(--accent) transparent"
          },
          "*::-webkit-scrollbar": {
            "-webkit-appearance": "none",
            "width": "12px",
            "height": "12px",
            "background-color": "transparent"
          },
          "*::-webkit-scrollbar-track": {
            "-webkit-appearance": "none",
            "background-color": "transparent",
            "border-radius": "0"
          },
          "*::-webkit-scrollbar-thumb": {
            "-webkit-appearance": "none",
            "background-color": "var(--accent)",
            "border-radius": "0",
            "border": "2px solid transparent",
            "background-clip": "padding-box"
          },
          "*::-webkit-scrollbar-thumb:hover": {
            "background-color": "color-mix(in oklab, var(--accent) 80%, var(--foreground))"
          },
          "*::-webkit-scrollbar-corner": {
            "background-color": "transparent"
          }
        }
      },
      "cssVars": {
        "theme": {
          "gap": "0.25rem",
          "spacing-gap": "var(--gap)",
          "radius": "0rem",
          "font-sans": "var(--font-public-sans)",
          "font-mono": "var(--font-roboto-mono)",
          "default-font-family": "var(--font-sans)",
          "default-font-family-mono": "var(--font-mono)",
          "text-base--letter-spacing": "-0.015em",
          "text-lg--letter-spacing": "-0.02em",
          "text-xl--letter-spacing": "-0.025em",
          "text-2xl--letter-spacing": "-0.03em",
          "text-3xl--letter-spacing": "-0.03em",
          "text-4xl--letter-spacing": "-0.03em",
          "text-5xl--letter-spacing": "-0.03em",
          "text-6xl--letter-spacing": "-0.03em",
          "text-7xl--letter-spacing": "-0.03em",
          "text-8xl--letter-spacing": "-0.03em",
          "text-9xl--letter-spacing": "-0.03em"
        },
        "light": {
          "background": "oklch(1 0 0)",
          "foreground": "oklch(0.145 0 0)",
          "card": "oklch(0.97 0 0)",
          "card-foreground": "oklch(0.145 0 0)",
          "popover": "oklch(1 0 0)",
          "popover-foreground": "oklch(0.145 0 0)",
          "primary": "oklch(0.452 0.313214 264.052)",
          "primary-foreground": "oklch(1 0 0)",
          "secondary": "oklch(0.97 0 0)",
          "secondary-foreground": "oklch(0.205 0 0)",
          "muted": "oklch(0.97 0 0)",
          "muted-foreground": "oklch(0.556 0 0)",
          "accent": "oklch(0.9 0 0)",
          "accent-foreground": "oklch(0.205 0 0)",
          "destructive": "oklch(0.577 0.245 27.325)",
          "border": "oklch(0.922 0 0)",
          "input": "oklch(0.922 0 0)",
          "ring": "oklch(0.708 0 0)",
          "chart-1": "oklch(0.646 0.222 41.116)",
          "chart-2": "oklch(0.6 0.118 184.704)",
          "chart-3": "oklch(0.398 0.07 227.392)",
          "chart-4": "oklch(0.828 0.189 84.429)",
          "chart-5": "oklch(0.769 0.188 70.08)",
          "sidebar": "oklch(0.985 0 0)",
          "sidebar-foreground": "oklch(0.145 0 0)",
          "sidebar-primary": "oklch(0.205 0 0)",
          "sidebar-primary-foreground": "oklch(0.985 0 0)",
          "sidebar-accent": "oklch(0.97 0 0)",
          "sidebar-accent-foreground": "oklch(0.205 0 0)",
          "sidebar-border": "oklch(0.922 0 0)",
          "sidebar-ring": "oklch(0.708 0 0)",
          "radius": "0rem"
        },
        "dark": {
          "background": "oklch(0.1684 0 0)",
          "foreground": "oklch(0.985 0 0)",
          "card": "oklch(0.2046 0 0)",
          "card-foreground": "oklch(0.985 0 0)",
          "popover": "oklch(0.205 0 0)",
          "popover-foreground": "oklch(0.985 0 0)",
          "primary": "oklch(0.452 0.313214 264.052)",
          "primary-foreground": "oklch(1 0 0)",
          "secondary": "oklch(0.269 0 0)",
          "secondary-foreground": "oklch(0.985 0 0)",
          "muted": "oklch(0.2134 0 0)",
          "muted-foreground": "oklch(0.708 0 0)",
          "accent": "oklch(0.2768 0 0)",
          "accent-foreground": "oklch(0.8975 0 0)",
          "destructive": "oklch(0.704 0.191 22.216)",
          "border": "oklch(0.285 0 0)",
          "input": "oklch(1 0 0 / 15%)",
          "ring": "oklch(0.556 0 0)",
          "chart-1": "oklch(0.488 0.243 264.376)",
          "chart-2": "oklch(0.696 0.17 162.48)",
          "chart-3": "oklch(0.769 0.188 70.08)",
          "chart-4": "oklch(0.627 0.265 303.9)",
          "chart-5": "oklch(0.645 0.246 16.439)",
          "sidebar": "oklch(0.205 0 0)",
          "sidebar-foreground": "oklch(0.985 0 0)",
          "sidebar-primary": "oklch(0.488 0.243 264.376)",
          "sidebar-primary-foreground": "oklch(0.985 0 0)",
          "sidebar-accent": "oklch(0.269 0 0)",
          "sidebar-accent-foreground": "oklch(0.985 0 0)",
          "sidebar-border": "oklch(1 0 0 / 10%)",
          "sidebar-ring": "oklch(0.556 0 0)"
        }
      }
    },
    {
      "name": "joyco-fonts",
      "type": "registry:lib",
      "title": "JOYCO Fonts",
      "description": "JOYCO brand font configuration with Public Sans and Roboto Mono.",
      "files": [
        {
          "path": "registry/lib/fonts.ts",
          "type": "registry:lib",
          "target": "lib/fonts.ts"
        }
      ]
    },
    {
      "name": "utils",
      "type": "registry:lib",
      "title": "Utils",
      "description": "The cn class-merge helper used by every JOYCO UI component.",
      "files": [
        {
          "path": "lib/utils.ts",
          "type": "registry:lib",
          "target": "lib/utils.ts"
        }
      ],
      "dependencies": [
        "clsx",
        "tailwind-merge"
      ]
    },
    {
      "name": "ui",
      "type": "registry:style",
      "title": "JOYCO UI",
      "description": "The full JOYCO UI kit \u2014 all components and brand theming.",
      "css": {
        "@custom-variant hocus (&:is(:hover, :focus-visible))": {},
        "@custom-variant dark (&:where(.dark, .dark *))": {},
        "@custom-variant light (&:where(.light, .light *))": {},
        "@layer base": {
          "*": {
            "scrollbar-width": "thin",
            "scrollbar-color": "var(--accent) transparent"
          },
          "*::-webkit-scrollbar": {
            "-webkit-appearance": "none",
            "width": "12px",
            "height": "12px",
            "background-color": "transparent"
          },
          "*::-webkit-scrollbar-track": {
            "-webkit-appearance": "none",
            "background-color": "transparent",
            "border-radius": "0"
          },
          "*::-webkit-scrollbar-thumb": {
            "-webkit-appearance": "none",
            "background-color": "var(--accent)",
            "border-radius": "0",
            "border": "2px solid transparent",
            "background-clip": "padding-box"
          },
          "*::-webkit-scrollbar-thumb:hover": {
            "background-color": "color-mix(in oklab, var(--accent) 80%, var(--foreground))"
          },
          "*::-webkit-scrollbar-corner": {
            "background-color": "transparent"
          }
        }
      },
      "cssVars": {
        "theme": {
          "gap": "0.25rem",
          "spacing-gap": "var(--gap)",
          "radius": "0rem",
          "font-sans": "var(--font-public-sans)",
          "font-mono": "var(--font-roboto-mono)",
          "default-font-family": "var(--font-sans)",
          "default-font-family-mono": "var(--font-mono)",
          "text-base--letter-spacing": "-0.015em",
          "text-lg--letter-spacing": "-0.02em",
          "text-xl--letter-spacing": "-0.025em",
          "text-2xl--letter-spacing": "-0.03em",
          "text-3xl--letter-spacing": "-0.03em",
          "text-4xl--letter-spacing": "-0.03em",
          "text-5xl--letter-spacing": "-0.03em",
          "text-6xl--letter-spacing": "-0.03em",
          "text-7xl--letter-spacing": "-0.03em",
          "text-8xl--letter-spacing": "-0.03em",
          "text-9xl--letter-spacing": "-0.03em"
        },
        "light": {
          "background": "oklch(1 0 0)",
          "foreground": "oklch(0.145 0 0)",
          "card": "oklch(0.97 0 0)",
          "card-foreground": "oklch(0.145 0 0)",
          "popover": "oklch(1 0 0)",
          "popover-foreground": "oklch(0.145 0 0)",
          "primary": "oklch(0.452 0.313214 264.052)",
          "primary-foreground": "oklch(1 0 0)",
          "secondary": "oklch(0.97 0 0)",
          "secondary-foreground": "oklch(0.205 0 0)",
          "muted": "oklch(0.97 0 0)",
          "muted-foreground": "oklch(0.556 0 0)",
          "accent": "oklch(0.9 0 0)",
          "accent-foreground": "oklch(0.205 0 0)",
          "destructive": "oklch(0.577 0.245 27.325)",
          "border": "oklch(0.922 0 0)",
          "input": "oklch(0.922 0 0)",
          "ring": "oklch(0.708 0 0)",
          "chart-1": "oklch(0.646 0.222 41.116)",
          "chart-2": "oklch(0.6 0.118 184.704)",
          "chart-3": "oklch(0.398 0.07 227.392)",
          "chart-4": "oklch(0.828 0.189 84.429)",
          "chart-5": "oklch(0.769 0.188 70.08)",
          "sidebar": "oklch(0.985 0 0)",
          "sidebar-foreground": "oklch(0.145 0 0)",
          "sidebar-primary": "oklch(0.205 0 0)",
          "sidebar-primary-foreground": "oklch(0.985 0 0)",
          "sidebar-accent": "oklch(0.97 0 0)",
          "sidebar-accent-foreground": "oklch(0.205 0 0)",
          "sidebar-border": "oklch(0.922 0 0)",
          "sidebar-ring": "oklch(0.708 0 0)",
          "radius": "0rem"
        },
        "dark": {
          "background": "oklch(0.1684 0 0)",
          "foreground": "oklch(0.985 0 0)",
          "card": "oklch(0.2046 0 0)",
          "card-foreground": "oklch(0.985 0 0)",
          "popover": "oklch(0.205 0 0)",
          "popover-foreground": "oklch(0.985 0 0)",
          "primary": "oklch(0.452 0.313214 264.052)",
          "primary-foreground": "oklch(1 0 0)",
          "secondary": "oklch(0.269 0 0)",
          "secondary-foreground": "oklch(0.985 0 0)",
          "muted": "oklch(0.2134 0 0)",
          "muted-foreground": "oklch(0.708 0 0)",
          "accent": "oklch(0.2768 0 0)",
          "accent-foreground": "oklch(0.8975 0 0)",
          "destructive": "oklch(0.704 0.191 22.216)",
          "border": "oklch(0.285 0 0)",
          "input": "oklch(1 0 0 / 15%)",
          "ring": "oklch(0.556 0 0)",
          "chart-1": "oklch(0.488 0.243 264.376)",
          "chart-2": "oklch(0.696 0.17 162.48)",
          "chart-3": "oklch(0.769 0.188 70.08)",
          "chart-4": "oklch(0.627 0.265 303.9)",
          "chart-5": "oklch(0.645 0.246 16.439)",
          "sidebar": "oklch(0.205 0 0)",
          "sidebar-foreground": "oklch(0.985 0 0)",
          "sidebar-primary": "oklch(0.488 0.243 264.376)",
          "sidebar-primary-foreground": "oklch(0.985 0 0)",
          "sidebar-accent": "oklch(0.269 0 0)",
          "sidebar-accent-foreground": "oklch(0.985 0 0)",
          "sidebar-border": "oklch(1 0 0 / 10%)",
          "sidebar-ring": "oklch(0.556 0 0)",
          "radius": "0rem"
        }
      },
      "registryDependencies": [
        "@joyco/joyco-fonts",
        "@joyco/avatar",
        "@joyco/badge",
        "@joyco/button",
        "@joyco/button-group",
        "@joyco/chart",
        "@joyco/collapsible",
        "@joyco/dropdown-menu",
        "@joyco/input",
        "@joyco/input-group",
        "@joyco/kbd",
        "@joyco/media-player",
        "@joyco/mention",
        "@joyco/popover",
        "@joyco/select",
        "@joyco/separator",
        "@joyco/slider",
        "@joyco/switch",
        "@joyco/tabs",
        "@joyco/textarea",
        "@joyco/tooltip",
        "@joyco/cluster",
        "@joyco/utils"
      ]
    }
  ]
}