Conversation
Pattern-driven CSS Grid layout. cellPattern declares per-row column counts (e.g. "3 3 6, 6 6, 7 5, 12") and rowPattern declares row track heights; both repeat to cover all children. gridCount derives from the LCM of cellPattern row sums by default. With resizable, drag handles snap cell widths to integer grid columns and row heights to pixels. With reorderable, dropping a cell into a row redistributes that row evenly across gridCount; the source row also redistributes. After interaction the layout is encoded back into cellPattern so it survives subsequent re-renders. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2 tasks
* main: fix scanPrototypesFor cache when class init is in flight (#37)
The last handle in each row was hidden because it had no neighbor to resize against. Now it's visible and resizes the last cell against the row's column budget — the row can shrink below columnCount, leaving empty columns on the right. columnCount is pinned on first such drag so the LCM recompute doesn't re-normalize the row back to full width. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
Masonrycomponent (komp-masonry): a managed CSS-Grid layout wherecellPatterndeclares per-row cell column counts androwPatterndeclares repeating row track heights.gridCountdefaults to the LCM ofcellPatternrow sums.resizableadds drag handles between cells (snap to integer grid columns) and between rows (pixel-snapped row heights).reorderablelets the user drag a cell into a different row; the destination row redistributes its cells evenly acrossgridCountand the source row redistributes too. The new layout is encoded back intocellPatternso it survives subsequent re-renders.For the example
cellPattern="3 3 6, 6 6, 7 5, 12", dragging the7cell into the second row produces"3 3 6, 4 4 4, 12, 12"— destination row evenly redistributes 3 cells across the 12-col grid; the orphaned5becomes a full-width row.Test plan
/demo/masonry— initial 8-cell layout matches3 3 6, 6 6, 7 5, 12cellPatternattribute reflects the new layoutnpm teststill passesnpm run docsbuilds without warnings🤖 Generated with Claude Code