POC for redoing Layout Batch 1 demos to follow DEMO_AUTHORING_GUIDE.
Box becomes the reference template for the remaining 7 primitives.
Demo follows the canon shape:
- Header with eyebrow + 4 meta pills (parts, events, props, scope).
- Stage permanently rendered with 3 nested boxes + trace strip
showing live display/padding/gap state.
- 6 tabs in canonical order (Live · API · Morfo · Sema · Recipe · A11y).
- Live tab: 7 controls + reactive soma/eidos snippets.
- API tab: 6 subsections grouped by concern (sizing / spacing /
display+position / flex/grid item / escape hatch / reference
comparison vs radix-themes / chakra / mantine).
- Morfo / Sema / Recipe / A11y tabs each populated with the contract
appropriate to a passive eidos-native primitive.
Architectural fixes (heredados de air, ahora correctos):
- `gridColumn`, `gridRow`, `gridArea` move from `<Grid>` to `<Box>` —
these are item placement props, they belong on the CHILD that
declares its slot, not the container.
- Add `placeSelf` to Box (grid item shorthand for align-self +
justify-self).
- Grid recipe + props updated accordingly; comment clarifies that
item placement lives on Box.
Add `src/uix/morfo/components/box.ts` (scope `eidos`, 1 part, 0 events
with justification comment). Box demo updated lede to point at Flex /
Grid for container-side props (Radix Themes split, not Chakra
everything-on-Box).
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