{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "play-button",
  "title": "PlayButton",
  "description": "Cell execution control button that shows Play, Stop, or Loading states based on execution state. Used in notebook cell toolbars.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/cell/PlayButton.tsx",
      "content": "import { Loader2, Play, Square } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface PlayButtonProps {\n  executionState: \"idle\" | \"queued\" | \"running\" | \"completed\" | \"error\";\n  cellType: string;\n  isFocused?: boolean;\n  onExecute: () => void;\n  onInterrupt: () => void;\n  className?: string;\n  focusedClass?: string;\n  isAutoLaunching?: boolean;\n  /**\n   * When true, uses gutter-optimized visibility (invisible when unfocused,\n   * visible on focus or parent hover). Default: false for backwards compatibility.\n   */\n  gutterMode?: boolean;\n}\n\nexport const PlayButton: React.FC<PlayButtonProps> = ({\n  executionState,\n  cellType,\n  isFocused = false,\n  onExecute,\n  onInterrupt,\n  className = \"\",\n  focusedClass = \"text-foreground\",\n  isAutoLaunching = false,\n  gutterMode = false,\n}) => {\n  const isRunning = executionState === \"running\" || executionState === \"queued\";\n  const title = isAutoLaunching\n    ? \"Starting runtime...\"\n    : isRunning\n      ? \"Stop execution\"\n      : `Execute ${cellType} cell`;\n\n  // Visibility classes differ based on mode\n  const visibilityClass = gutterMode\n    ? isRunning\n      ? \"text-destructive hover:text-destructive animate-pulse\"\n      : isFocused\n        ? focusedClass\n        : \"text-transparent group-hover:text-muted-foreground hover:text-foreground\"\n    : isRunning\n      ? \"text-destructive hover:text-destructive shadow-destructive/20 animate-pulse drop-shadow-sm\"\n      : isFocused\n        ? focusedClass\n        : \"text-muted-foreground/40 hover:text-foreground group-hover:text-foreground\";\n\n  return (\n    <button\n      data-slot=\"play-button\"\n      onClick={isRunning ? onInterrupt : onExecute}\n      disabled={isAutoLaunching}\n      className={cn(\n        \"flex items-center justify-center transition-all\",\n        gutterMode\n          ? \"rounded-sm p-0.5\" // Minimal padding in gutter mode\n          : \"hover:bg-muted/80 rounded-sm bg-background p-1\",\n        visibilityClass,\n        isAutoLaunching && \"cursor-wait opacity-75\",\n        className,\n      )}\n      title={title}\n    >\n      {isAutoLaunching ? (\n        <Loader2\n          className={cn(gutterMode ? \"size-3.5\" : \"size-4\", \"animate-spin\")}\n        />\n      ) : isRunning ? (\n        <Square\n          fill={gutterMode ? \"currentColor\" : \"none\"}\n          stroke={gutterMode ? \"none\" : \"currentColor\"}\n          strokeWidth={gutterMode ? undefined : \"2\"}\n          className={gutterMode ? \"size-2.5\" : \"size-4\"}\n        />\n      ) : (\n        <Play\n          fill=\"currentColor\"\n          stroke=\"none\"\n          className={cn(gutterMode ? \"size-3.5\" : \"size-4\")}\n        />\n      )}\n    </button>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/cell/PlayButton.tsx"
    }
  ],
  "type": "registry:component"
}