{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cell-controls",
  "title": "CellControls",
  "description": "Cell action menu with source visibility toggle, move controls, and dropdown menu for delete and clear operations.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "registry/cell/CellControls.tsx",
      "content": "import {\n  ArrowDown,\n  ArrowDownToLine,\n  ArrowUp,\n  ArrowUpToLine,\n  ChevronDown,\n  ChevronUp,\n  Eraser,\n  Eye,\n  EyeOff,\n  MoreVertical,\n  X,\n} from \"lucide-react\";\nimport type React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\n\ninterface CellControlsProps {\n  sourceVisible: boolean;\n  onDeleteCell: () => void;\n  onClearOutputs: () => void;\n  hasOutputs: boolean;\n  toggleSourceVisibility: () => void;\n  playButton?: React.ReactNode;\n  onMoveUp?: () => void;\n  onMoveDown?: () => void;\n  onMoveToTop?: () => void;\n  onMoveToBottom?: () => void;\n  canMoveUp?: boolean;\n  canMoveDown?: boolean;\n  onDeleteAllBelow?: () => void;\n  hasCellsBelow?: boolean;\n  /** Optional: Whether AI context is visible for this cell */\n  aiContextVisible?: boolean;\n  /** Optional: Whether context selection mode is active */\n  contextSelectionMode?: boolean;\n  /** Optional: Toggle AI context visibility */\n  toggleAiContextVisibility?: () => void;\n  /** Force controls to be visible, bypassing hover behavior */\n  forceVisible?: boolean;\n  className?: string;\n}\n\nexport const CellControls: React.FC<CellControlsProps> = ({\n  sourceVisible,\n  aiContextVisible = false,\n  contextSelectionMode = false,\n  onDeleteCell,\n  onClearOutputs,\n  hasOutputs,\n  toggleSourceVisibility,\n  toggleAiContextVisibility,\n  playButton,\n  onMoveUp,\n  onMoveDown,\n  onMoveToTop,\n  onMoveToBottom,\n  canMoveUp = false,\n  canMoveDown = false,\n  onDeleteAllBelow,\n  hasCellsBelow = false,\n  forceVisible,\n  className,\n}) => {\n  return (\n    <div\n      data-slot=\"cell-controls\"\n      className={cn(\n        \"cell-controls flex items-center gap-0.5 transition-opacity\",\n        forceVisible\n          ? \"opacity-100\"\n          : \"opacity-100 sm:opacity-0 sm:group-hover:opacity-100\",\n        className,\n      )}\n    >\n      {/* Mobile Play Button */}\n      {playButton}\n\n      {/* Source Visibility Toggle */}\n      <Button\n        variant=\"ghost\"\n        size=\"sm\"\n        onClick={toggleSourceVisibility}\n        className={cn(\n          \"hover:bg-muted/80 h-8 w-8 p-0 sm:h-7 sm:w-7\",\n          !sourceVisible && \"text-muted-foreground/60\",\n        )}\n        title={sourceVisible ? \"Hide source\" : \"Show source\"}\n      >\n        {sourceVisible ? (\n          <ChevronUp className=\"h-4 w-4 sm:h-3 sm:w-3\" />\n        ) : (\n          <ChevronDown className=\"h-4 w-4 sm:h-3 sm:w-3\" />\n        )}\n      </Button>\n\n      {/* Context Selection Mode Button */}\n      {contextSelectionMode && toggleAiContextVisibility && (\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={toggleAiContextVisibility}\n          className={cn(\n            \"hover:bg-muted/80 h-8 w-8 p-0 sm:h-7 sm:w-7\",\n            aiContextVisible ? \"text-purple-600\" : \"text-gray-500\",\n          )}\n          title={\n            aiContextVisible ? \"Hide from AI context\" : \"Show in AI context\"\n          }\n        >\n          {aiContextVisible ? (\n            <Eye className=\"h-4 w-4 sm:h-3 sm:w-3\" />\n          ) : (\n            <EyeOff className=\"h-4 w-4 sm:h-3 sm:w-3\" />\n          )}\n        </Button>\n      )}\n\n      {/* Desktop-only controls */}\n      <div className=\"desktop-controls hidden items-center gap-0.5 sm:flex\">\n        {/* Separator */}\n        <div className=\"bg-border/50 mx-1 h-4 w-px\" />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"hover:bg-muted/80 h-7 w-7 p-0\"\n              title=\"More options\"\n            >\n              <MoreVertical className=\"h-3 w-3\" />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {onMoveToTop && (\n              <DropdownMenuItem onClick={onMoveToTop} disabled={!canMoveUp}>\n                <ArrowUpToLine className=\"mr-2 h-4 w-4\" />\n                <span>Move to top</span>\n              </DropdownMenuItem>\n            )}\n            {onMoveUp && (\n              <DropdownMenuItem onClick={onMoveUp} disabled={!canMoveUp}>\n                <ArrowUp className=\"mr-2 h-4 w-4\" />\n                <span>Move up</span>\n              </DropdownMenuItem>\n            )}\n            {onMoveDown && (\n              <DropdownMenuItem onClick={onMoveDown} disabled={!canMoveDown}>\n                <ArrowDown className=\"mr-2 h-4 w-4\" />\n                <span>Move down</span>\n              </DropdownMenuItem>\n            )}\n            {onMoveToBottom && (\n              <DropdownMenuItem\n                onClick={onMoveToBottom}\n                disabled={!canMoveDown}\n              >\n                <ArrowDownToLine className=\"mr-2 h-4 w-4\" />\n                <span>Move to bottom</span>\n              </DropdownMenuItem>\n            )}\n            {(onMoveUp || onMoveDown || onMoveToTop || onMoveToBottom) && (\n              <DropdownMenuSeparator />\n            )}\n            <DropdownMenuItem onClick={onClearOutputs} disabled={!hasOutputs}>\n              <Eraser className=\"mr-2 h-4 w-4\" />\n              <span>Clear outputs</span>\n            </DropdownMenuItem>\n            <DropdownMenuItem onClick={onDeleteCell} variant=\"destructive\">\n              <X className=\"mr-2 h-4 w-4\" />\n              <span>Delete cell</span>\n            </DropdownMenuItem>\n            {onDeleteAllBelow && hasCellsBelow && (\n              <DropdownMenuItem\n                onClick={onDeleteAllBelow}\n                variant=\"destructive\"\n              >\n                <X className=\"mr-2 h-4 w-4\" />\n                <span>Delete all cells below</span>\n                <ArrowDownToLine className=\"ml-2 h-4 w-4\" />\n              </DropdownMenuItem>\n            )}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/cell/CellControls.tsx"
    }
  ],
  "type": "registry:component"
}