{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "orb",
  "type": "registry:ui",
  "title": "Thinking Orb",
  "description": "Interactive 2D dotted thought-orb indicator with 9 animated AI states and tactile click cycling.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "thinking-orbs",
    "next"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/registry/ui/orb.tsx",
      "content": "\"use client\";\n\nimport React, { useCallback, useState } from \"react\";\nimport dynamic from \"next/dynamic\";\nimport type { OrbState } from \"thinking-orbs\";\nimport { cn } from \"@/lib/utils\";\n\nconst ThinkingOrb = dynamic(\n  () => import(\"thinking-orbs\").then((m) => m.ThinkingOrb),\n  { ssr: false },\n);\n\nexport const ORB_STATES: OrbState[] = [\n  \"breathing\",\n  \"searching\",\n  \"working\",\n  \"solving\",\n  \"listening\",\n  \"connecting\",\n  \"weaving\",\n  \"composing\",\n  \"shaping\",\n];\n\nexport interface OrbColorOption {\n  label: string;\n  value?: string;\n  hex: string;\n}\n\nexport const ORB_COLORS: OrbColorOption[] = [\n  { label: \"Default\", value: undefined, hex: \"#ffffff\" },\n  { label: \"Beige\", value: \"#e8d8c8\", hex: \"#e8d8c8\" },\n  { label: \"Red\", value: \"#ef4444\", hex: \"#ef4444\" },\n  { label: \"Amber\", value: \"#f59e0b\", hex: \"#f59e0b\" },\n  { label: \"Emerald\", value: \"#10b981\", hex: \"#10b981\" },\n  { label: \"Cyan\", value: \"#06b6d4\", hex: \"#06b6d4\" },\n  { label: \"Blue\", value: \"#3b82f6\", hex: \"#3b82f6\" },\n  { label: \"Violet\", value: \"#8b5cf6\", hex: \"#8b5cf6\" },\n  { label: \"Rose\", value: \"#ec4899\", hex: \"#ec4899\" },\n];\n\nexport interface OrbProps {\n  state?: OrbState;\n  defaultState?: OrbState;\n  size?: 64 | 20;\n  display?: number;\n  paused?: boolean;\n  speed?: number;\n  theme?: \"dark\" | \"light\" | \"auto\";\n  color?: string;\n  interactive?: boolean;\n  className?: string;\n  onClick?: (event: React.MouseEvent<HTMLElement>, nextState: OrbState) => void;\n  onStateChange?: (state: OrbState) => void;\n}\n\nexport function Orb({\n  state: controlledState,\n  defaultState = \"breathing\",\n  size = 64,\n  display,\n  paused = false,\n  speed = 1,\n  theme = \"dark\",\n  color,\n  interactive = true,\n  className,\n  onClick,\n  onStateChange,\n}: OrbProps) {\n  const isControlled = controlledState !== undefined;\n  const [internalState, setInternalState] = useState<OrbState>(defaultState);\n  const currentState = isControlled ? controlledState : internalState;\n\n  const px = display ?? size;\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLElement>) => {\n      const currentIndex = ORB_STATES.indexOf(currentState);\n      const nextIndex = (currentIndex + 1) % ORB_STATES.length;\n      const nextState = ORB_STATES[nextIndex];\n\n      if (!isControlled) {\n        setInternalState(nextState);\n      }\n      onStateChange?.(nextState);\n      onClick?.(e, nextState);\n    },\n    [currentState, isControlled, onClick, onStateChange],\n  );\n\n  const canvas = (\n    <ThinkingOrb\n      state={currentState}\n      size={size}\n      theme={theme}\n      speed={speed}\n      paused={paused}\n      color={color}\n      style={{ width: px, height: px, display: \"block\" }}\n    />\n  );\n\n  if (!interactive && !onClick) {\n    return (\n      <span\n        className={cn(\n          \"inline-flex shrink-0 items-center justify-center select-none\",\n          className,\n        )}\n        style={{ width: px, height: px }}\n        aria-hidden\n      >\n        {canvas}\n      </span>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      aria-label={`Orb state is ${currentState}. Click to cycle state.`}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center p-0 border-0 bg-transparent cursor-pointer select-none transition-transform duration-200 ease-out hover:scale-105 active:scale-95 outline-none rounded-full focus-visible:ring-2 focus-visible:ring-zinc-500 dark:focus-visible:ring-white/60\",\n        className,\n      )}\n      style={{ width: px, height: px }}\n    >\n      {canvas}\n    </button>\n  );\n}\n\nexport const ThinkingOrbComponent = Orb;\n",
      "type": "registry:ui",
      "target": "@ui/orb.tsx"
    }
  ]
}