You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
4.9 KiB
98 lines
4.9 KiB
5 months ago
|
# 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
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<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.
|