4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T13cc,import { forwardRef, type ReactNode } from "react"; import { cn } from "@/lib/utils"; import { type GutterColorConfig, getGutterColors } from "./gutter-colors"; interface CellContainerProps { id: string; cellType: string; isFocused?: boolean; onFocus?: () => void; /** Content for the code/editor section (use with outputContent for segmented ribbon) */ codeContent?: ReactNode; /** Content for the output section (renders with a different ribbon color) */ outputContent?: ReactNode; /** Hide the output section (useful for preloading content invisibly) */ hideOutput?: boolean; /** Legacy children prop - use codeContent/outputContent for segmented ribbon support */ children?: ReactNode; /** Content to render in the left gutter action area (e.g., play button, execution count) */ gutterContent?: ReactNode; /** Content to render in the right margin (e.g., cell controls, kebab menu) */ rightGutterContent?: ReactNode; /** Custom color configuration for cell types not in defaults */ customGutterColors?: Record; onDragStart?: (e: React.DragEvent) => void; onDragOver?: (e: React.DragEvent) => void; onDrop?: (e: React.DragEvent) => void; className?: string; } export const CellContainer = forwardRef( ( { id, cellType, isFocused = false, onFocus, codeContent, outputContent, hideOutput, children, gutterContent, rightGutterContent, customGutterColors, onDragStart, onDragOver, onDrop, className, }, ref, ) => { const colors = getGutterColors(cellType, customGutterColors); const ribbonColor = isFocused ? colors.ribbon.focused : colors.ribbon.default; const outputRibbonColor = isFocused ? colors.outputRibbon.focused : colors.outputRibbon.default; const bgColor = isFocused ? colors.background.focused : undefined; // Use segmented ribbon when codeContent is provided const useSegmentedRibbon = codeContent !== undefined; const hasOutput = outputContent !== undefined && outputContent !== null; return (

{/* Gutter area - action content only (ribbon moves to content rows for segmented) */}

{gutterContent}

{/* Cell content with ribbon */} {useSegmentedRibbon ? (

{/* Code row - ribbon + content together so heights match */}

{codeContent}

{/* Output row - ribbon + content together */} {hasOutput && (

{outputContent}

)}

) : ( /* Legacy layout - ribbon + content side by side */

{children}

)} {/* Right margin - pt-3 aligns with left gutter, appears on hover/focus */} {rightGutterContent && (

{rightGutterContent}

)}

); }, ); CellContainer.displayName = "CellContainer"; 52:Tf4e,export interface GutterColorConfig { ribbon: { default: string; focused: string; }; outputRibbon: { default: string; focused: string; }; background: { focused: string; }; } /** * Default gutter colors for built-in cell types. * Colors are designed to match the existing CellTypeButton color scheme. */ export const defaultGutterColors: Record = { code: { ribbon: { default: "bg-gray-200 dark:bg-gray-700", focused: "bg-sky-400 dark:bg-sky-600", }, outputRibbon: { default: "bg-gradient-to-b from-gray-200/60 to-gray-200 dark:from-gray-700/60 dark:to-gray-700", focused: "bg-gradient-to-b from-sky-400/60 to-sky-400 dark:from-sky-600/60 dark:to-sky-600", }, background: { focused: "bg-sky-50/20 dark:bg-sky-900/10", }, }, markdown: { ribbon: { default: "bg-gray-200 dark:bg-gray-700", focused: "bg-emerald-400 dark:bg-emerald-600", }, outputRibbon: { default: "bg-gradient-to-b from-gray-200/60 to-gray-200 dark:from-gray-700/60 dark:to-gray-700", focused: "bg-gradient-to-b from-emerald-400/60 to-emerald-400 dark:from-emerald-600/60 dark:to-emerald-600", }, background: { focused: "bg-emerald-50/20 dark:bg-emerald-900/10", }, }, sql: { ribbon: { default: "bg-amber-200 dark:bg-amber-800", focused: "bg-amber-400 dark:bg-amber-600", }, outputRibbon: { default: "bg-gradient-to-b from-amber-200/60 to-amber-200 dark:from-amber-800/60 dark:to-amber-800", focused: "bg-gradient-to-b from-amber-400/60 to-amber-400 dark:from-amber-600/60 dark:to-amber-600", }, background: { focused: "bg-amber-50/20 dark:bg-amber-900/10", }, }, ai: { ribbon: { default: "bg-purple-200 dark:bg-purple-800", focused: "bg-purple-400 dark:bg-purple-600", }, outputRibbon: { default: "bg-gradient-to-b from-purple-200/60 to-purple-200 dark:from-purple-800/60 dark:to-purple-800", focused: "bg-gradient-to-b from-purple-400/60 to-purple-400 dark:from-purple-600/60 dark:to-purple-600", }, background: { focused: "bg-purple-50/20 dark:bg-purple-900/10", }, }, raw: { ribbon: { default: "bg-rose-200 dark:bg-rose-800", focused: "bg-rose-400 dark:bg-rose-600", }, outputRibbon: { default: "bg-gradient-to-b from-rose-200/60 to-rose-200 dark:from-rose-800/60 dark:to-rose-800", focused: "bg-gradient-to-b from-rose-400/60 to-rose-400 dark:from-rose-600/60 dark:to-rose-600", }, background: { focused: "bg-rose-50/20 dark:bg-rose-900/10", }, }, }; /** * Fallback colors for unknown cell types. * Uses neutral gray styling. */ export const fallbackGutterColors: GutterColorConfig = { ribbon: { default: "bg-gray-200 dark:bg-gray-700", focused: "bg-gray-400 dark:bg-gray-500", }, outputRibbon: { default: "bg-gradient-to-b from-gray-200/60 to-gray-200 dark:from-gray-700/60 dark:to-gray-700", focused: "bg-gradient-to-b from-gray-400/60 to-gray-400 dark:from-gray-500/60 dark:to-gray-500", }, background: { focused: "bg-gray-50/50 dark:bg-gray-900/30", }, }; /** * Get gutter colors for a cell type. * Falls back to neutral gray for unknown types. * * @param cellType - The cell type to get colors for * @param customColors - Optional custom color overrides */ export function getGutterColors( cellType: string, customColors?: Record, ): GutterColorConfig { // Check custom colors first if (customColors?.[cellType]) { return customColors[cellType]; } // Then check defaults if (defaultGutterColors[cellType]) { return defaultGutterColors[cellType]; } // Fall back to neutral return fallbackGutterColors; } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://nteract-elements.vercel.app/r/cell-container.json","proxyUrl":"https://shadcnregistry.com/r/nteract/cell-container","itemId":"@nteract/cell-container"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/cell/CellContainer.tsx","content":"$51","type":"registry:component","target":"components/cell/CellContainer.tsx"},{"path":"registry/cell/gutter-colors.ts","content":"$52","type":"registry:lib","target":"components/cell/gutter-colors.ts"}]}]]}],"$L53"]}]

CellContainer

Installation

Files

components

Styles