Pin how the hbox and vbox layouts size their children

[!NOTE] Held in the #18985 reserve: not open for claiming yet. Curated issues are released in batches as review capacity frees up. Please pick an issue labelled good first issue instead. This one is also being moved to the component tier first: it tests something a human looks at, and #18985's tier rule sends those to a real browser.

Welcome 👋

hbox and vbox are the layouts behind most Neo screens: children in a row or in a column, each with a CSS flex value. The rules for that value are small and a little subtle: a number becomes N 1 0%, stretch becomes 1, and a child with its own width or height is left alone. No spec covers them yet.

This is a good first issue for Hacktoberfest 2026. It needs Node.js and a clone of this repository: no Docker, no AI setup.

[!IMPORTANT] Reserved for first-time Neo.mjs contributors. The maintainer team will not claim, edit, or implement this issue through 2026-10-31. Comment here to claim it, and ask anything on this issue.

Set up once: follow Set up the engine from a clone, including npm run bundle-browser-deps: without it the unit suite selects zero tests.

Where things live

• Sources: src/layout/HBox.mjs and src/layout/VBox.mjs, built on applyChildAttributes() in src/layout/Flexbox.mjs
• New test file: test/playwright/unit/layout/Flexbox.spec.mjs. If the fit-layout issue has not landed yet, you create the layout/ folder.
• Pattern to copy: test/playwright/unit/util/Array.spec.mjs (the setup() call and imports)
• Tip: Neo.create(HBoxLayout) works without a container, and a plain object such as {wrapperStyle: {}} works as the child.

What to cover

Also: direction is 'row' for hbox and 'column' for vbox.

Done when

• test/playwright/unit/layout/Flexbox.spec.mjs exists, following the pattern file's setup.
• One test(...) per table row, plus the direction check.
• Test-only: if a layout disagrees with a row, say so on this issue before changing src/.
• npm run test-unit -- test/playwright/unit/layout/Flexbox.spec.mjs passes.
• npm run test-unit passes.

Out of scope

The container CSS classes (applyRenderAttributes), gap, and value validation.

While you wait for review

You just pinned one small piece of a multi-threaded application engine: in Neo.mjs your app's code runs inside a web worker, and the main thread only paints. Two things worth ten minutes:

• See the part nobody expects. Run npm run build-themes -- -n -e dev -t all and npm run server-start, open apps/workstation/, and drag a tab out of the browser window. It becomes its own OS window, still running, with the same component instances and the same worker. Benefits: Introduction explains why that is possible.
• Your coding agent can go much further here. The skills this repository's AI maintainers work with are published on npm as NEO_INLINE_CODE_47, and they need no Knowledge Base and no Memory Core. With Claude or GPT beside you, the help wanted issues are within reach after this one.