# Eidos Text

Universal inline-flow typography primitive. Aplica uno de los named
styles del foundation (`body` / `prose` / `label` / `caption`) y
permite sobrescribir per-axis (size / family / weight / color / align)
sin tocar el resto. Render por defecto `<span>` — composable dentro de
cualquier contenedor.

## Superficie

```svelte
<Text>Body copy.</Text>
<Text style="prose" size="lg">Longer reading passage.</Text>
<Text style="caption" italic>Image credit.</Text>
<Text truncate>Single-line label that may overflow…</Text>
<Text clamp={3}>Three-line clamped paragraph.</Text>
<Text as="p" align="center">Centered block paragraph.</Text>
```

## Baseline

Origen: `air/components/typography/text` (rama `morfo-runtime`).
Adaptaciones para eidos:

- **Sizes**: air `1..12` → eidos `xxs/xs/sm/md/lg/xl/xxl/xxxl`. Sin escala
  separada — usamos el contrato existente `--font-size-{key}` /
  `--font-line-height-{key}` / `--font-letter-spacing-{key}` del foundation.
- **Families**: air `'ui'|'prose'|'code'` → eidos `primary/secondary/mono/display`.
  El foundation ya emite los aliases `--font-ui` / `--font-prose` / `--font-code`
  pero preferimos referencias directas a `--font-family-{key}` para
  claridad de origen.
- **Named styles**: nuevo respecto a air. Cuando se pasa `style="body"`
  (default), `"prose"`, `"label"` o `"caption"`, el recipe consume los
  tokens `--style-{name}-*` que el foundation emite (familia + size +
  weight + line-height + letter-spacing + color, con overrides
  responsive cuando aplica). Los per-prop overrides ganan vía local
  `--_text-{axis}` declaradas inline por el componente.
- **Canvas measurement** del air (clamp con conteo exacto de líneas vía
  canvas) se simplifica a CSS `-webkit-line-clamp` en este port —
  ver Gaps.

## Comparativa

| Capacidad | UIX Text | Radix Themes Text | Chakra Text | Mantine Text |
| --- | --- | --- | --- | --- |
| Named style prop (body/prose/label/caption) | Sí (`style`) | Sí (`as` + `size`) | Sí (`textStyle`) | Sí (`size`) |
| Size scale | xxs..xxxl (8 steps) | 1..9 | xs..6xl | xs..xxl |
| Family override | Sí (`family`) | Sí | Sí (`fontFamily`) | Sí (`ff`) |
| Weight override | Sí (`weight`) | Sí | Sí (`fontWeight`) | Sí (`fw`) |
| Color override | Sí (`color` → content-role slot) | Sí (intent) | Sí (free) | Sí (free) |
| Align | Sí | Sí | Sí (`textAlign`) | Sí (`ta`) |
| Italic shorthand | Sí (`italic`) | No (style) | Sí (`fontStyle`) | Sí (`fs`) |
| Underline shorthand | Sí (`underline`) | Sí (`underline`) | Sí (`textDecoration`) | Sí (`td`) |
| Truncate (single-line ellipsis) | Sí (`truncate`) | Sí (`truncate`) | Sí (`isTruncated`) | Sí (`truncate`) |
| Line-clamp (multi-line) | Sí (`clamp={N}`, CSS only) | Sí (`truncate` + `weight`) | Sí (`noOfLines`) | Sí (`lineClamp`) |
| Canvas line-count measurement | **No** — gap | No | No | No |
| Bindable `lineCount` output | **No** — gap | No | No | No |
| `as` prop polymorphism | Sí | Sí | Sí | Sí |
| Responsive props | Sí (`ResponsiveProp`) | Sí | Sí | Sí |

## Decisiones

- **`style` prop apunta a named foundation tokens** — no recreamos los
  combos family+size+weight. Cuando cambias el design system, los
  Text con `style="body"` actualizan sin tocar componentes.
- **Per-prop overrides vía local CSS vars `--_text-*`** — escritas
  inline en el span. El recipe usa `var(--_text-x, var(--style-{name}-x))`
  para cascade limpio.
- **Default `<span>`, no `<p>`** — Text es inline-flow primitive.
  Composable dentro de un `<h1>`, `<button>`, `<label>`, etc. Cuando
  necesitas block-level, `as="p"`. Difiere de Mantine/Chakra que
  default a `<p>`; alinea con el principio "the dumbest element by
  default".
- **`color` siempre desde el content-role slot** — `primary` ↔
  `--color-content-primary`. No aceptamos colores libres en este
  primitive para mantener el contrato de contraste y la coherencia
  con el theme.
- **Canvas measurement diferido** — air tenía un sistema canvas para
  contar líneas exactas + bindable output. Pesa y complica el SSR.
  CSS `-webkit-line-clamp` cubre el 95% de los casos (clamp visual,
  no necesitas el conteo exacto si solo quieres truncar).
- **`tagStyle` separa del `style` prop** — el `style` HTML prop entra en
  conflicto semántico con nuestra prop `style` (named style). El escape
  hatch inline está expuesto vía `tagStyle`.

## Eventos Sema

Text declara 0 eventos. Como Box/Flex/etc., es una primitiva pasiva.
Componentes que animan/cambian estado en aparición componen Text
dentro de un primitive interactivo (collapsible, dialog, toast) que
posee los verbos sema relevantes.

## Gaps

| Gap | Disposición | Detalle |
| --- | --- | --- |
| Canvas line-count measurement (`text` string prop + bindable `lineCount`) | **diferir** | Pesa, complica SSR, y el 95% de casos se cubre con CSS line-clamp. Si llega un caso de uso (e.g. show "+N more lines" badge), añadir como mixin opt-in. |
| Hint visual cuando clamp recorta ("+N líneas más") | **diferir** | Requiere el canvas measurement. Sin él, no podemos saber si hay overflow real. |
| Color libre (hex / CSS custom) en `color` prop | **descartar** | Rompe contrato de contraste con theme. Usar `tagStyle` como escape hatch. |
| Variants tipográficas (small-caps, oldstyle figures, etc.) | **diferir** | Si emerge demanda, añadir feature flags. Bajo prioridad. |
| Text gradient | **diferir** | Composable con `tagStyle` o un componente `<GradientText>` dedicado. |

## Referencias

- Radix Themes Text: https://www.radix-ui.com/themes/docs/components/text
- Chakra UI Text: https://chakra-ui.com/docs/components/text
- Mantine Text: https://mantine.dev/core/text/
- MUI Typography: https://mui.com/material-ui/react-typography/

## Passive justification

Visual-only (`scope: ['eidos']`). Una sola part Provider, marker
`[data-text]`. Sin estados, sin keyboard, sin ARIA, sin eventos.
La recipe consume `--style-{name}-*` tokens del foundation +
`--_text-{axis}` overrides escritas inline.