{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cell-container",
  "title": "CellContainer",
  "description": "A focus and selection wrapper for notebook cells with gutter ribbon system. Color-coded ribbons indicate cell type, with action area for play button and execution count.",
  "files": [
    {
      "path": "registry/cell/CellContainer.tsx",
      "content": "import { forwardRef, type ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { type GutterColorConfig, getGutterColors } from \"./gutter-colors\";\n\ninterface CellContainerProps {\n  id: string;\n  cellType: string;\n  isFocused?: boolean;\n  onFocus?: () => void;\n  /** Content for the code/editor section (use with outputContent for segmented ribbon) */\n  codeContent?: ReactNode;\n  /** Content for the output section (renders with a different ribbon color) */\n  outputContent?: ReactNode;\n  /** Hide the output section (useful for preloading content invisibly) */\n  hideOutput?: boolean;\n  /** Legacy children prop - use codeContent/outputContent for segmented ribbon support */\n  children?: ReactNode;\n  /** Content to render in the left gutter action area (e.g., play button, execution count) */\n  gutterContent?: ReactNode;\n  /** Content to render in the right margin (e.g., cell controls, kebab menu) */\n  rightGutterContent?: ReactNode;\n  /** Custom color configuration for cell types not in defaults */\n  customGutterColors?: Record<string, GutterColorConfig>;\n  onDragStart?: (e: React.DragEvent) => void;\n  onDragOver?: (e: React.DragEvent) => void;\n  onDrop?: (e: React.DragEvent) => void;\n  className?: string;\n}\n\nexport const CellContainer = forwardRef<HTMLDivElement, CellContainerProps>(\n  (\n    {\n      id,\n      cellType,\n      isFocused = false,\n      onFocus,\n      codeContent,\n      outputContent,\n      hideOutput,\n      children,\n      gutterContent,\n      rightGutterContent,\n      customGutterColors,\n      onDragStart,\n      onDragOver,\n      onDrop,\n      className,\n    },\n    ref,\n  ) => {\n    const colors = getGutterColors(cellType, customGutterColors);\n    const ribbonColor = isFocused\n      ? colors.ribbon.focused\n      : colors.ribbon.default;\n    const outputRibbonColor = isFocused\n      ? colors.outputRibbon.focused\n      : colors.outputRibbon.default;\n    const bgColor = isFocused ? colors.background.focused : undefined;\n\n    // Use segmented ribbon when codeContent is provided\n    const useSegmentedRibbon = codeContent !== undefined;\n    const hasOutput = outputContent !== undefined && outputContent !== null;\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"cell-container\"\n        data-cell-id={id}\n        data-cell-type={cellType}\n        className={cn(\n          \"cell-container group flex transition-colors duration-150\",\n          bgColor,\n          isFocused && \"-mx-16 px-16\",\n          className,\n        )}\n        onMouseDown={onFocus}\n        draggable={!!onDragStart}\n        onDragStart={onDragStart}\n        onDragOver={onDragOver}\n        onDrop={onDrop}\n      >\n        {/* Gutter area - action content only (ribbon moves to content rows for segmented) */}\n        <div className=\"flex w-10 flex-shrink-0 flex-col items-end justify-start gap-0.5 pr-1 pt-3\">\n          {gutterContent}\n        </div>\n        {/* Cell content with ribbon */}\n        {useSegmentedRibbon ? (\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            {/* Code row - ribbon + content together so heights match */}\n            <div className=\"flex\">\n              <div\n                className={cn(\n                  \"w-1 transition-colors duration-150\",\n                  ribbonColor,\n                )}\n              />\n              <div className=\"min-w-0 flex-1 py-3 pl-6 pr-3\">{codeContent}</div>\n            </div>\n            {/* Output row - ribbon + content together */}\n            {hasOutput && (\n              <div className={cn(\"flex\", hideOutput && \"hidden\")}>\n                <div\n                  className={cn(\n                    \"w-1 transition-colors duration-150\",\n                    outputRibbonColor,\n                  )}\n                />\n                <div\n                  className={cn(\n                    \"min-w-0 flex-1 py-2 pl-6 pr-3 transition-opacity duration-150\",\n                    !isFocused && \"opacity-70\",\n                  )}\n                >\n                  {outputContent}\n                </div>\n              </div>\n            )}\n          </div>\n        ) : (\n          /* Legacy layout - ribbon + content side by side */\n          <div className=\"flex min-w-0 flex-1\">\n            <div\n              className={cn(\n                \"w-1 self-stretch transition-colors duration-150\",\n                ribbonColor,\n              )}\n            />\n            <div className=\"min-w-0 flex-1 py-3 pl-6 pr-3\">{children}</div>\n          </div>\n        )}\n        {/* Right margin - pt-3 aligns with left gutter, appears on hover/focus */}\n        {rightGutterContent && (\n          <div\n            className={cn(\n              \"flex w-10 flex-shrink-0 flex-col items-center gap-1 pt-3\",\n              \"opacity-100 transition-opacity duration-150\",\n              \"sm:opacity-0 sm:group-hover:opacity-100 sm:focus-within:opacity-100\",\n              isFocused && \"sm:opacity-100\",\n            )}\n          >\n            {rightGutterContent}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCellContainer.displayName = \"CellContainer\";\n",
      "type": "registry:component",
      "target": "components/cell/CellContainer.tsx"
    },
    {
      "path": "registry/cell/gutter-colors.ts",
      "content": "export interface GutterColorConfig {\n  ribbon: {\n    default: string;\n    focused: string;\n  };\n  outputRibbon: {\n    default: string;\n    focused: string;\n  };\n  background: {\n    focused: string;\n  };\n}\n\n/**\n * Default gutter colors for built-in cell types.\n * Colors are designed to match the existing CellTypeButton color scheme.\n */\nexport const defaultGutterColors: Record<string, GutterColorConfig> = {\n  code: {\n    ribbon: {\n      default: \"bg-gray-200 dark:bg-gray-700\",\n      focused: \"bg-sky-400 dark:bg-sky-600\",\n    },\n    outputRibbon: {\n      default:\n        \"bg-gradient-to-b from-gray-200/60 to-gray-200 dark:from-gray-700/60 dark:to-gray-700\",\n      focused:\n        \"bg-gradient-to-b from-sky-400/60 to-sky-400 dark:from-sky-600/60 dark:to-sky-600\",\n    },\n    background: {\n      focused: \"bg-sky-50/20 dark:bg-sky-900/10\",\n    },\n  },\n  markdown: {\n    ribbon: {\n      default: \"bg-gray-200 dark:bg-gray-700\",\n      focused: \"bg-emerald-400 dark:bg-emerald-600\",\n    },\n    outputRibbon: {\n      default:\n        \"bg-gradient-to-b from-gray-200/60 to-gray-200 dark:from-gray-700/60 dark:to-gray-700\",\n      focused:\n        \"bg-gradient-to-b from-emerald-400/60 to-emerald-400 dark:from-emerald-600/60 dark:to-emerald-600\",\n    },\n    background: {\n      focused: \"bg-emerald-50/20 dark:bg-emerald-900/10\",\n    },\n  },\n  sql: {\n    ribbon: {\n      default: \"bg-amber-200 dark:bg-amber-800\",\n      focused: \"bg-amber-400 dark:bg-amber-600\",\n    },\n    outputRibbon: {\n      default:\n        \"bg-gradient-to-b from-amber-200/60 to-amber-200 dark:from-amber-800/60 dark:to-amber-800\",\n      focused:\n        \"bg-gradient-to-b from-amber-400/60 to-amber-400 dark:from-amber-600/60 dark:to-amber-600\",\n    },\n    background: {\n      focused: \"bg-amber-50/20 dark:bg-amber-900/10\",\n    },\n  },\n  ai: {\n    ribbon: {\n      default: \"bg-purple-200 dark:bg-purple-800\",\n      focused: \"bg-purple-400 dark:bg-purple-600\",\n    },\n    outputRibbon: {\n      default:\n        \"bg-gradient-to-b from-purple-200/60 to-purple-200 dark:from-purple-800/60 dark:to-purple-800\",\n      focused:\n        \"bg-gradient-to-b from-purple-400/60 to-purple-400 dark:from-purple-600/60 dark:to-purple-600\",\n    },\n    background: {\n      focused: \"bg-purple-50/20 dark:bg-purple-900/10\",\n    },\n  },\n  raw: {\n    ribbon: {\n      default: \"bg-rose-200 dark:bg-rose-800\",\n      focused: \"bg-rose-400 dark:bg-rose-600\",\n    },\n    outputRibbon: {\n      default:\n        \"bg-gradient-to-b from-rose-200/60 to-rose-200 dark:from-rose-800/60 dark:to-rose-800\",\n      focused:\n        \"bg-gradient-to-b from-rose-400/60 to-rose-400 dark:from-rose-600/60 dark:to-rose-600\",\n    },\n    background: {\n      focused: \"bg-rose-50/20 dark:bg-rose-900/10\",\n    },\n  },\n};\n\n/**\n * Fallback colors for unknown cell types.\n * Uses neutral gray styling.\n */\nexport const fallbackGutterColors: GutterColorConfig = {\n  ribbon: {\n    default: \"bg-gray-200 dark:bg-gray-700\",\n    focused: \"bg-gray-400 dark:bg-gray-500\",\n  },\n  outputRibbon: {\n    default:\n      \"bg-gradient-to-b from-gray-200/60 to-gray-200 dark:from-gray-700/60 dark:to-gray-700\",\n    focused:\n      \"bg-gradient-to-b from-gray-400/60 to-gray-400 dark:from-gray-500/60 dark:to-gray-500\",\n  },\n  background: {\n    focused: \"bg-gray-50/50 dark:bg-gray-900/30\",\n  },\n};\n\n/**\n * Get gutter colors for a cell type.\n * Falls back to neutral gray for unknown types.\n *\n * @param cellType - The cell type to get colors for\n * @param customColors - Optional custom color overrides\n */\nexport function getGutterColors(\n  cellType: string,\n  customColors?: Record<string, GutterColorConfig>,\n): GutterColorConfig {\n  // Check custom colors first\n  if (customColors?.[cellType]) {\n    return customColors[cellType];\n  }\n  // Then check defaults\n  if (defaultGutterColors[cellType]) {\n    return defaultGutterColors[cellType];\n  }\n  // Fall back to neutral\n  return fallbackGutterColors;\n}\n",
      "type": "registry:lib",
      "target": "components/cell/gutter-colors.ts"
    }
  ],
  "type": "registry:component"
}