mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekay
db64dea69d
`tracks` is a CSS track list along a stack's own axis, so the parent sizes its children and none of them carries a flex prop: <YStack tracks="auto 1fr auto"> header, body that fills, footer <XStack tracks="240px 1fr"> a fixed rail and the page On web the stack is a grid: a YStack's tracks are its rows (row flow, one column as wide as the stack), an XStack's its columns. A prop the author names wins over all of it. Alignment keeps its flex meaning: on a vertical stack grid's axes swap, so propMapper renames every key it emits (items -> justifyItems, justify -> alignContent, content -> justifyContent, and a direct child's self -> justifySelf), which holds in media, pseudo and variant styles alike. A child learns its parent's axis from ComponentContext and clears it for its own children. On native the stack stays flex and each child takes its track as flex longhands: Nfr is flex N, a length is a fixed basis, anything else is content-sized. The compiler leaves a tracks stack and its direct children to the runtime, which is where both are decided. Wrap is a row that wraps, the one place content-sized wrapping lives. All opt in: a stack without tracks renders as it did. Tested in components-test (web and native), static-tests (the deopt) and a Playwright run of the integration app that measures the boxes in dev and in the compiled production build. TracksDemo is in the demos app and on the stacks docs page. Claude-Session: https://claude.ai/code/session_01BLLMyBFSvAfCt7ZGqYuiEz