svelte-kit-vice/src/uix/eidos/components/box/README.md

Eidos Box

Universal box-model utility. Eidos-native: cada prop mapea a una custom property --box-* emitida inline en un único <div data-box>, y la receta cae con revert-layer a la cascada normal cuando no se fija. Box es la primitiva sobre la que se componen Flex, Grid, Stack, Group, Wrap, Container y Section.

Superficie

<Box padding={4} gap={3} display="flex" maxWidth={600}>…</Box>

<!-- Como item de un Grid/Flex padre: -->
<Box gridColumn="1 / 3" placeSelf="center">…</Box>

Baseline

Origen: air/components/layout/box (rama morfo-runtime). Adaptaciones para eidos: drop del prefijo air-, selectores [data-box] directos, vars renombradas a --box-*, sustitución de var(--air-space-N) por var(--space-N) y resolución reactiva de props responsive vía ActiveEidos.require().resolve().

Decisión clave introducida en 66c6897c: los props de grid item placement (gridColumn, gridRow, gridArea, placeSelf) viven en Box, no en Grid. Son props del HIJO que declara su slot, no del container. Air los puso en Grid — corregido durante el port.

Comparativa

Capacidad	UIX (eidos)	Radix Themes	Chakra UI	Mantine
Display	Sí	Sí	Sí	Sí
Width / height + min/max	Sí	Sí	Sí	Sí
Padding / margin (+ shorthands X/Y/per-side)	Sí (paddingX, paddingY, paddingTop…)	Sí (p, px, pt…)	Sí	Sí
Position + insets	Sí	Sí	Sí	Sí
Overflow + axis variants	Sí	Sí	Sí	Sí
Flex item (flex, grow, shrink, basis, order)	Sí	Sí	Sí	— (en Flex)
Grid item (gridColumn, gridRow, gridArea, placeSelf)	Sí (movido desde Grid 2026-05-22)	Sí	Sí	—
align-self / justify-self	Sí	Sí	Sí	—
Background / color / shadow	No — UIX separa layout de visual treatment	Sí (bg, style)	Sí (bg, color)	Sí (bg)
as prop para semantic tag	No — root fijo <div> (batch 1)	Sí	Sí (vía polymorphic ref)	Sí (component)
Responsive prop syntax	Sí (ResponsiveProp via Eidos)	Sí ({ initial: …, sm: … })	Sí	Sí
Container-side flex/grid (alignItems, justifyContent, templateColumns…)	No — viven en Flex/Grid (split Radix)	Split Radix	Mezclado en Box	Split Radix

Decisiones

• Item-side props en Box, container-side en Flex/Grid — split estilo Radix Themes / Mantine. Chakra y MUI mezclan todo en Box, pero el split deja un API más predecible.
• No bg/color/shadow — UIX separa estructura de tratamiento visual. Esos props viven en componentes con variant/color (avatar, dialog, button…). Box es sólo layout.
• Root <div> fijo — sin as prop en batch 1. Si el consumidor necesita semantic tag (<main>, <section>, <article>), envuelve Box. Se reconsiderará si llegan ≥2 casos reales que lo justifiquen.
• Inline styles, no classnames generados — el style attr lista cada --box-* declarada; debugger en DevTools muestra exactamente qué propiedades activas tiene cada Box.
• revert-layer como fallback — props sin setear no fuerzan initial, dejan que la cascada normal aplique. Permite mezclar Box con cualquier otro CSS sin "ganar" sobre estilos no relacionados.

Eventos Sema

Box declara 0 eventos. Es una primitiva pasiva: no commit, no emerge, no reacciona a nada — sólo estiliza hijos vía cascade. Componentes que animan/cambian estado al aparecer componen Box con una primitiva interactiva (popover, drawer, collapsible) que sí posee los verbos sema relevantes.

Gaps

Gap	Disposición	Detalle
as prop para semantic tag (section, article, main, aside…)	diferir	Esperamos ≥2 casos reales antes de añadir polimorfismo. Hoy se envuelve Box en el tag semántico.
bg / color shorthand sobre tokens UIX	descartar	Box es layout puro. Los componentes con variant/color son los que llevan tratamiento visual.
borderRadius / boxShadow props	descartar	Idem — escapar vía style= cuando se necesite un one-off.
flexBasis (alias de basis)	diferir	Posible alias por familiaridad con devs Chakra. Bajo prioridad.
Documentación per-prop con ejemplos visuales individuales	implementar	En la pasada de docs final. Hoy el demo cubre los casos comunes.

Referencias

• Radix Themes Box: https://www.radix-ui.com/themes/docs/components/box
• Chakra UI Box: https://chakra-ui.com/docs/components/box
• Mantine Box: https://mantine.dev/core/box/
• MUI Box: https://mui.com/system/react-box/

Passive justification

Visual-only primitive (scope: ['eidos'] en el morfo). Una sola part Provider que emite el marker [data-box], sin estados, sin data-attrs específicos, sin ARIA, sin keyboard. El recipe consume las CSS variables que el componente escribe inline. No hay nada que animar, ningún ciclo de vida que enviar a sema.