svelte-kit-vice/src/uix/eidos/components/stack

Eidos Stack

Direction-controlled Flex wrapper. Por defecto vertical (column); con direction="row" se convierte en horizontal. Es azúcar sobre Flex cuando lo único que importa es apilar items con un gap.

Superficie

<Stack gap={3}>
	<Box>Row A</Box>
	<Box>Row B</Box>
	<Box>Row C</Box>
</Stack>

<Stack direction="row" align="center" gap={2}>…</Stack>

Baseline

Origen: air/components/layout/stack. Adaptación estándar (drop air, vars --stack-*, var(--space-N)).

Composición: se renderiza a través de Flex (no de Box directamente). El DOM final es <div data-box data-flex data-stack>. El recipe de Stack es prácticamente un marker — todo el comportamiento viene del Flex inferior.

Comparativa

Capacidad	UIX	Chakra Stack	Mantine Stack	Radix Themes
direction row/column	Sí	Sí (Stack/HStack/VStack)	Sólo column (Stack), Group para row	Vía Flex
gap	Sí	Sí (spacing)	Sí	Sí
align / justify	Sí	Sí	Sí	Vía Flex
wrap	Sí (heredado Flex)	No directo	No	Vía Flex
Slot divider entre hijos	No — gap conocido	Sí (divider={<Separator/>})	Sí (gap + Divider component)	—
Helpers HStack / VStack	No — gap conocido	Sí	Sí (Group = HStack)	—

Decisiones

• Componente único con direction en vez de tres componentes — preferimos un solo Stack con prop sobre el patrón Chakra Stack/HStack/VStack. Menos superficie pública, mismo poder.
• Defaults a column — match Mantine. Si quieres row con espacio entre items y wrap, Group ofrece esos defaults.
• No divider slot por ahora — useful pero no crítico. Backlog.

Eventos Sema

0 eventos. Pasivo.

Gaps

Gap	Disposición	Detalle
Slot divider para insertar separator entre items	diferir	Patrón Chakra. Útil para listas/menús. Backlog Layout fixes.
Helpers HStack / VStack	diferir	Ergonomía Chakra. UIX prefiere <Stack direction="row">. Reconsiderar si la fricción es real en consumers.
preventGrowOverflow para hijos con grow	diferir	Patrón Mantine Group; aplicable también a Stack horizontal.

Referencias

• Chakra UI Stack: https://chakra-ui.com/docs/components/stack
• Mantine Stack: https://mantine.dev/core/stack/
• Radix Themes: usa <Flex direction="column"> sin Stack dedicado.

Passive justification

Visual-only (scope: ['eidos']). Sin estado, sin keyboard, sin ARIA, sin eventos. Marker pasa a través de Flex/Box.