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

Eidos Float

CSS-float primitive: pulls a child to the start or end of the text flow so the surrounding inline content wraps around it. Composes through <Box> so every Box prop (max-width, padding, margin, …) still works on the wrapper.

Typical use cases:

• Inline images inside long-form articles.
• Pull-quotes.
• Drop caps (an initial letter inside an <h2> or paragraph).
• Side-note labels next to a paragraph.

Superficie

<p>
  <Float side="start" maxWidth={140} gap={3}>
    <img src="diagram.png" alt="" />
  </Float>
  Long paragraph that wraps around the floated image, with the image
  pulled to the start (left in LTR) and the text flowing to the
  inline-end side of it.
</p>

<!-- Pull-quote on the end side -->
<article>
  <Float side="end" maxWidth={220} gap={4}>
    <blockquote>"A quotation pulled to the end of the column."</blockquote>
  </Float>
  Body copy continues here with the quote on the inline-end side…
</article>

Baseline

Origen nominal: air/components/layout/float (rama morfo-runtime), pero la semántica se ha re-definido en el port.

Air's Float era una primitiva de posicionamiento absoluto con un grid externo de 3×3 (top-start, top-center, …, bottom-end) que flotaba contenido respecto a un anchor explícito. Equivalente arquitectónico: una variación local del floating-layer sin collision-aware positioning. Esa primitiva tiene su sitio (badges sobre avatares, indicadores sobre items) pero NO se llama float — es más cercana a Radix Float o Positioned.

Cuando se redefinió la batch como "layout primitives", el brief de la batch eligió float para la otra primitiva natural con ese nombre: la propiedad CSS float, la herramienta de larga data para que texto inline wrappee alrededor de imágenes / pull-quotes / drop caps. Las referencias que Radix Themes Inset y MUI Float cubren son exactamente este caso. Mantine no tiene un primitive para esto.

Por eso este wrapper no porta el código de air verbatim: rehace la primitiva alrededor de float: inline-start / float: inline-end con el gap lateral configurable. La primitiva air anterior se reconsidera en el futuro como <Positioned> o <Anchor> cuando se decida que merece su propio componente.

Comparativa

Capacidad	UIX (eidos)	Radix Themes Inset	MUI Pull-quote pattern	Mantine
Side of text flow	side='start' / 'end' (logical)	side='left' / 'right' / 'top' / 'bottom' (logical-ish)	Manual float: left/right	— (no primitive)
RTL mirroring	Automatic (`float: inline-{start	end}`)	Manual	Manual
Inline gap from text	gap prop → margin on the side that faces text	mx prop	Manual margin	n/a
Block-axis margin	Via Box marginTop / marginBottom	Via my / mb / mt	Manual	n/a
Max width / sizing	Inherited from Box	Inherited from Inset/Box	Manual	n/a
Responsive side	Sí (ResponsiveProp<FloatSide>)	Sí	n/a	n/a
Composes through Box	Sí	Box ancestor	Manual	n/a
ARIA / role	Ninguno (primitiva pasiva)	Ninguno	Ninguno	n/a

Decisiones

• float: inline-start | inline-end, no físico left | right. La propiedad lógica mirrors automáticamente en RTL — un Float que mira hacia el comienzo del texto sigue mirando hacia el comienzo cuando el documento es árabe / hebreo.
• gap aplica sólo al lado inline contra el texto. El margin block-axis (top / bottom) queda a cargo de las props estándar de Box (marginTop, marginBottom) — eso da el control fino que requieren los floats reales (suelen necesitar un poco de padding-top para alinear con el ascender del texto vecino).
• side='start' por defecto: replica la convención editorial occidental (imagen a la izquierda, texto fluyendo a la derecha) sin ser hostil a RTL.
• NO portamos el sistema de 9 placements de air. Air's Float era posicionamiento absoluto contra un anchor — semántica completamente diferente. Se reservará para un futuro <Positioned> si surge la necesidad. La actual primitiva es CSS-float puro, alineada con Radix Themes Inset y MUI pull-quotes.
• Compone a través de <Box> — patrón consistente con Flex/Grid/AspectRatio. Hereda max-width, padding, margin, etc., sin duplicarlos.

Eventos Sema

Float declara 0 eventos. Es una primitiva pasiva: cambia cómo su único hijo participa en el flujo de texto circundante y nada más. Sin commit, sin emerge, sin keyboard, sin ARIA. Misma justificación que Box, Flex, Grid, AspectRatio.

Gaps

Gap	Disposición	Detalle
Posiciones físicas left / right además de logical	descartar	Las logicals son superset; el consumidor puede pasar style="float:left" si necesita el físico.
clear shorthand	diferir	El estado puede vivir como prop si surgen ≥2 casos donde el consumidor necesite que el contenido siguiente NO wrappee. Hoy, vía style="clear: both" en el siguiente bloque.
Detección automática de drop cap (:first-letter)	descartar	El consumidor compone Float alrededor de un <span> con la letra inicial.
Migración de la 9-zone air Float a <Positioned>	diferir	Se evaluará si surge la necesidad. Por ahora se documenta la divergencia.
Border-radius / shadow tokens propios	descartar	Float es estructural; el visual treatment lo provee el contenido del hijo.

Referencias

• Radix Themes Inset: https://www.radix-ui.com/themes/docs/components/inset
• MUI Float pattern: https://mui.com/material-ui/react-typography/
• CSS float (logical values): https://developer.mozilla.org/en-US/docs/Web/CSS/float
• Air Float (the 9-zone absolute-position primitive, NOT this primitive): morfo-runtime branch — src/uix/air/components/layout/float

Passive justification

Visual-only primitive (scope: ['eidos'] en el morfo). Una sola part Provider que emite [data-float] + [data-side] sobre el shell [data-box]. Sin estados, sin data-attrs específicos, sin ARIA, sin keyboard. El recipe consume --float-gap y aplica float:inline-{start | end} según [data-side]. No hay nada que animar como verbo sema; el text wrap es geometría pura del navegador.