Cell Components

CellContainer          <- Focus wrapper with selection border
└── CellHeader         <- Toolbar layout (left/right slots)
    ├── PlayButton     <- Execute/interrupt control
    ├── CellTypeButton <- Cell type indicator (code, markdown, etc.)
    ├── ExecutionStatus<- Running/queued/error badges
    └── CellControls   <- Source toggle, move, delete actions
└── [Source content]   <- Your editor component
└── [Output content]   <- Your output renderer

import { CellContainer } from "@/registry/cell/CellContainer";
import { CellHeader } from "@/registry/cell/CellHeader";
import { CellControls } from "@/registry/cell/CellControls";
import { CellTypeButton } from "@/registry/cell/CellTypeButton";
import { PlayButton } from "@/registry/cell/PlayButton";
import { ExecutionStatus } from "@/registry/cell/ExecutionStatus";

function NotebookCell({ cell, isFocused, onFocus }) {
  const [sourceVisible, setSourceVisible] = useState(true);

  return (
    <CellContainer
      id={cell.id}
      isFocused={isFocused}
      onFocus={onFocus}
    >
      <CellHeader
        leftContent={
          <>
            <PlayButton
              executionState={cell.executionState}
              cellType={cell.type}
              isFocused={isFocused}
              onExecute={() => executeCell(cell.id)}
              onInterrupt={() => interruptCell(cell.id)}
            />
            <CellTypeButton cellType={cell.type} size="sm" />
            <ExecutionStatus executionState={cell.executionState} />
          </>
        }
        rightContent={
          <CellControls
            sourceVisible={sourceVisible}
            toggleSourceVisibility={() => setSourceVisible(!sourceVisible)}
            onDeleteCell={() => deleteCell(cell.id)}
            onClearOutputs={() => clearOutputs(cell.id)}
            hasOutputs={cell.outputs.length > 0}
            forceVisible={isFocused}
          />
        }
      />
      {sourceVisible && <CodeEditor value={cell.source} />}
      {cell.outputs.map(output => <OutputRenderer output={output} />)}
    </CellContainer>
  );
}