refine gutter: continuous ribbon + execution count#142
Merged
Conversation
- Widen gutter action area (w-10) to fit play button + execution count - Add self-stretch to ribbon to ensure continuous throughline with no gaps - Move execution count [n]: into the gutter alongside play button - Update demos to show play button and execution count stacked in gutter - Make ExecutionCount more compact (text-xs, tabular-nums) This creates a cleaner layout matching runt/Colab where the gutter contains both the execution indicator and the play button, with the ribbon flowing continuously through all cells.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Introduces CellBetweener component that maintains gutter ribbon continuity between cells. This creates an unbroken "paper edge" effect down the left side of the notebook, as suggested in issue #139 comment. - CellBetweener uses same gutter structure (w-10 action area + w-1 ribbon) - Accepts cellType prop to match color of adjacent cell - Updated NotebookDemo and GutterNotebookDemo to use betweeners - Added to registry.json with dependency on cell-container
The ribbon color now serves as the cell type indicator, making the CellTypeButton badges in headers redundant. This creates a cleaner visual with less clutter. - Remove CellTypeButton from CellDemo and NotebookDemo headers - Make CellHeader leftContent/rightContent optional - Cell type can be changed via the existing kebab menu (CellControls)
Implements the "paper margins" layout where cells have symmetric margins: - Left margin: play button, execution count, colored ribbon (existing) - Right margin: cell controls (NEW) Changes: - CellContainer: Add `rightGutterContent` prop for right margin slot - Right margin: opacity-0 on desktop, visible on hover/focus - Mobile: both margins always visible - Demos updated to compose controls from primitives (Button, DropdownMenu) Also adds contributing/design.md documenting: - Props vs className philosophy (props = behavior, className = appearance) - Composition over configuration pattern - Paper margins layout concept
- Update composition diagram to show paper margins structure - Update code example to use rightGutterContent instead of CellHeader - Add rightGutterContent to props table - Update descriptions to reflect new design philosophy
Combines play button + execution count into one compact `[n]:` element, inspired by classic Jupyter/Colab style: - `[ ▶ ]` before first run - click to execute - `[■]` while running (pulsing) - click to stop - `[1]` after execution - hover shows play overlay, click to re-run Perfect for single-line cells where vertical space is at a premium. Adds CompactCellDemo and CompactNotebookDemo to showcase the pattern.
Prevents visual shift by always showing `]:` instead of conditionally hiding the colon when the stop icon is displayed.
Replace Lucide icons with unicode characters (▶, ■) so play/stop symbols match the visual weight of the monospace brackets.
Remove built-in pt-1 from CellContainer gutters. Users now control alignment via their gutterContent padding to match content padding. Updated all demos to add pt-* matching their content's p-* padding, so play buttons align with the first line of code.
CellContainer now provides default p-3 padding for content and pt-3 for gutters. This ensures alignment "just works" without users needing to manually sync padding classes. Simplified all demos to remove manual padding wrappers.
Reduce gutter top padding from pt-3 (12px) to pt-2 (8px) to better align with the first line of CodeMirror content, which has its own internal padding structure. This follows the pattern from intheloop where play buttons align to the actual text position.
Increase gutter top padding from pt-2 (8px) to pt-3.5 (14px) to better align with text baseline. The content has p-3 (12px) padding plus line-height creates additional visual offset, so pt-3.5 compensates for the difference between gutter content and text baselines.
Change CompactExecutionButton and ExecutionCount from text-xs to text-sm so the [n]: brackets match the content's font size and appear visually consistent with CodeMirror/editor text.
- Lead with CompactCellDemo as hero demo - Show CompactExecutionButton in main usage example - Move PlayButton + ExecutionCount to "Alternative" section - Update ASCII diagram to show compact [▶]: style - Add CompactExecutionButton and ExecutionCount to component reference - Simplify documentation, remove redundant sections - Fix gutter padding to pt-3 for better alignment
- Remove stylized green output text - Show actual output that would result from running the code - Use plain monospace text for stream output - Only show output for cells that would produce output (e.g., print()) - Add pt-2 spacing between source and output divider
Multi-cell demos now track a global execution counter so running cells in order shows [1]:, [2]:, [3]: like a real Jupyter notebook.
Configures onlyBuiltDependencies for esbuild, msw, and sharp to ensure consistent builds across environments.
Only the setter is used - destructure with empty slot to satisfy linter.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Evolves the cell layout into a full "paper margins" design with multiple layout options:
Paper Margins Layout
Symmetric gutters on left and right create a clean paper-like aesthetic:
Compact Layout
CompactExecutionButtoncombines play + execution count into one[n]:element:[ ▶ ]before first run - click to execute[■]while running (pulsing) - click to stop[1]after execution - hover shows play, click to re-runChanges
New Components
CellContainer
rightGutterContentprop for right margin slotw-10(symmetric), hidden on desktop, visible on hover/focusDemos
Documentation
contributing/design.md- shadcn philosophy (props = behavior, className = appearance)Test Plan
Visit
/docs/cell/cell-container:[n]:style execution buttonsTest interactions:
[1]→ shows play overlay