Second POC for redoing Layout Batch 1 demos. Mirrors `box`'s canonical
shape adapted for a flex container:
- 7 container-side controls (direction, align, justify, wrap, gap,
padding, inline) — chips for unions, number for space tokens,
switch for the boolean.
- API tab separates "Container props (Flex-only)" from "Inherited
from Box" with a forward-link.
- Cross-references: lede + API call out that item-side props
(alignSelf, gridColumn, …) live on the child `<Box>`, and that
Stack / Group are direction-specific helpers.
- Reference comparison row reflects the Radix Themes split (item vs
container) and notes Chakra's `HStack`/`VStack` map to UIX `Stack`.
Adds `src/uix/morfo/components/flex.ts` (scope `eidos`, 1 part, 0
events, mirrors box.ts justification).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Visual-only primitives translated from the legacy `air/components/layout`
on the morfo-runtime branch. Architectural adjustments for the eidos
target: drop the `air-` class prefix, target `[data-{name}]` directly,
rename CSS vars to `--{name}-*`, replace `var(--air-space-N)` with the
eidos foundation `var(--space-N)` token, resolve responsive props via
`ActiveEidos.resolve(prop)`.
- `box` — universal box-model utility (size, padding, margin, gap,
position, overflow, flex/grid item props). Every prop maps to a
CSS custom property; unset props fall through via `revert-layer`.
- `flex` / `grid` / `stack` / `group` / `wrap` — layout containers
that render through Box (single `<div>` per primitive, no
semantic-tag prop in this batch). Markers stack as
`[data-box][data-{name}]`.
- `container` — max-width centered (sm/md/lg/xl/full).
- `section` — semantic-padding block with background tone variants.
Shared helpers at `_layout/shared.ts` (formatLayoutSpace /
formatLayoutLength / formatLayoutRaw / pushStyleVar / composeStyle)
plus an optional `Layout.*` namespace barrel for consumers who prefer
that style; the individual `import { Box }` from each component dir
also works.
Each primitive ships a demo at `/uix/components/{name}/` with a live
example, a props table, and a reference comparison row (radix-themes /
chakra-ui / mantine).
svelte-check: 0 errors / 0 new warnings.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
dev