💡 Multi-line flex wrapping (flexWrap)
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 52/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- c, typescript
- Domain
- cli
Research direction
Run the failing test in test/flex-wrap.test.ts and compare the nm/repro/flex-wrap diff with main. Trace the layout group in ops.ts through the decode in src/clayterm.c:499 and the vendored clay/clay.h configuration. Done means wrap, nowrap, and wrap-reverse produce the requested line placement, with nowrap remaining the default.
Written by the indexing model from the issue text.
Description
Is your feature request related to a problem?
A flex container lays every child out on a single main-axis line, so children that exceed the container's main-axis size overflow past it instead of breaking. In a row container 2 cells wide with children A (1 wide) and BC (2 wide), BC is placed at x:1 and overflows to x:3—past width:2—and the grid prints ABC on one row. There's no way to ask a container to wrap, which makes column-of-cards / tag-cloud layouts impossible without measuring and chunking children by hand on the JS side.
Describe the solution you'd like
A container set to wrap should start a new line when a child no longer fits along the main axis (accumulated child main size + gaps exceeds the container's main-axis size), stacking the lines along the cross axis. For the example above, BC should land at {x:0, y:1, width:2, height:1} and the grid should print A then BC on two rows.
open("root", {
layout: {
width: fixed(2),
height: fixed(4),
direction: "ltr",
flexWrap: "wrap", // "nowrap" (default) | "wrap" | "wrap-reverse"
},
});
flexWrap should mirror the CSS flex-wrap property. Default to "nowrap", support "wrap" and "wrap-reverse".
Describe alternatives you've considered
We can pre-measure children in JS, chunk them into rows by hand, and emit a column of explicit ltr rows. That falls apart the moment sizing is fit/grow (we'd be duplicating the renderer's own measurement) and it doesn't survive a resize without re-chunking.
Additional context
Failing test case on nm/repro/flex-wrap (test · diff).
A wrap field needs to thread through the wire format and the layout pass: the layout group in ops.ts, the layout decode in reduce (src/clayterm.c:499), and Clay_LayoutConfig in the vendored clay/clay.h, which is single-line today.
- Dominant language
- TypeScript
- Stars
- 42
- Forks
- 2
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 12
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from bombshell-dev/tty
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
bombshell-dev/tty#61 · 1 reaction ·
-
Difficulty 5/5 Over a week Newbie friendliness 25/100
bombshell-dev/tty#129 ·
-
question
Difficulty 5/5 Over a week Newbie friendliness 38/100
bombshell-dev/tty#112 ·
-
enhancement high priority
Difficulty 3/5 1-2 days Newbie friendliness 68/100
bombshell-dev/tty#83 · 2 comments ·
-
enhancement
Difficulty 4/5 3-5 days Newbie friendliness 48/100
bombshell-dev/tty#82 ·
All issues in bombshell-dev/tty
Similar issues
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
dennys-bd/agent-hive#184 ·
-
Add: hunch Open
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
AbdelStark/awesome-typesafe#104 ·
-
ai-observability bug team/ai-observability
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
vicharanashala/fln#563 ·