@eduardoalvarez/arrecife 0.2.0 → 0.4.0

package/dist/label-DuTvJGxD.d.cts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+type LabelProps = ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
+/**
+ * La escala `label`: 13px, que es el mínimo absoluto en pantalla del sistema.
+ *
+ * Se atenúa junto al control cuando este está deshabilitado, para que la
+ * pareja etiqueta-control se lea siempre como una sola unidad.
+ */
+declare function Label({ className, ...props }: LabelProps): react.JSX.Element;
+
+export { Label as L, type LabelProps as a };

package/dist/label-DuTvJGxD.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+type LabelProps = ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
+/**
+ * La escala `label`: 13px, que es el mínimo absoluto en pantalla del sistema.
+ *
+ * Se atenúa junto al control cuando este está deshabilitado, para que la
+ * pareja etiqueta-control se lea siempre como una sola unidad.
+ */
+declare function Label({ className, ...props }: LabelProps): react.JSX.Element;
+
+export { Label as L, type LabelProps as a };

package/dist/og/index.js

@@ -1,5 +1,6 @@
 import { RUTA_ASSETS, caras, poses, aletas } from '../chunk-E3OMP2DL.js';
-import { fonts, dark, light, naming, gradient, tagline, typeScale } from '../chunk-DHF63QNM.js';
+import { fonts, dark, light, naming, gradient, tagline, typeScale } from '../chunk-TSPJOM6K.js';
+import '../chunk-MLKGABMK.js';
 
 // src/og/plantillas.ts
 var OG = {

package/dist/shiki/index.js

@@ -1,4 +1,5 @@
-import { sintaxis } from '../chunk-DHF63QNM.js';
+import { sintaxis } from '../chunk-TSPJOM6K.js';
+import '../chunk-MLKGABMK.js';
 
 // src/shiki/tema.ts
 var arrecife = {

package/dist/tema/index.cjs

@@ -0,0 +1,94 @@
+'use strict';
+
+// src/tema/index.ts
+var TEMA_CLAVE = "arrecife-tema";
+var TEMA_ATRIBUTO = "data-theme";
+var TEMA_EVENTO = "arrecife:tema";
+var esTema = (valor) => valor === "dark" || valor === "light";
+function temaActual() {
+  if (typeof document === "undefined") return "dark";
+  const puesto = document.documentElement.getAttribute(TEMA_ATRIBUTO);
+  return esTema(puesto) ? puesto : "dark";
+}
+function temaGuardado() {
+  if (typeof localStorage === "undefined") return null;
+  try {
+    const valor = localStorage.getItem(TEMA_CLAVE);
+    return esTema(valor) ? valor : null;
+  } catch {
+    return null;
+  }
+}
+function temaPreferido() {
+  const guardado = temaGuardado();
+  if (guardado) return guardado;
+  if (typeof matchMedia === "undefined") return "dark";
+  return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+function aplicarTema(tema, persistir = true) {
+  if (typeof document === "undefined") return;
+  document.documentElement.setAttribute(TEMA_ATRIBUTO, tema);
+  document.documentElement.style.colorScheme = tema;
+  if (persistir) {
+    try {
+      localStorage.setItem(TEMA_CLAVE, tema);
+    } catch {
+    }
+  }
+  dispatchEvent(new CustomEvent(TEMA_EVENTO, { detail: tema }));
+}
+function alternarTema() {
+  const siguiente = temaActual() === "dark" ? "light" : "dark";
+  aplicarTema(siguiente);
+  return siguiente;
+}
+function escucharTema(alCambiar) {
+  if (typeof window === "undefined") return () => {
+  };
+  const propio = (evento) => {
+    const detalle = evento.detail;
+    if (esTema(detalle)) alCambiar(detalle);
+  };
+  const otraPestana = (evento) => {
+    if (evento.key !== TEMA_CLAVE) return;
+    const tema = esTema(evento.newValue) ? evento.newValue : temaPreferido();
+    aplicarTema(tema, false);
+    alCambiar(tema);
+  };
+  addEventListener(TEMA_EVENTO, propio);
+  addEventListener("storage", otraPestana);
+  return () => {
+    removeEventListener(TEMA_EVENTO, propio);
+    removeEventListener("storage", otraPestana);
+  };
+}
+var scriptTema = [
+  "(function () {",
+  "  var CLAVE = " + JSON.stringify(TEMA_CLAVE) + ";",
+  "  function resolver() {",
+  "    try {",
+  "      var guardado = localStorage.getItem(CLAVE);",
+  '      if (guardado === "dark" || guardado === "light") return guardado;',
+  "    } catch (e) {}",
+  '    return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";',
+  "  }",
+  "  function aplicar() {",
+  "    var tema = resolver();",
+  "    document.documentElement.setAttribute(" + JSON.stringify(TEMA_ATRIBUTO) + ", tema);",
+  "    document.documentElement.style.colorScheme = tema;",
+  "  }",
+  "  aplicar();",
+  '  document.addEventListener("astro:after-swap", aplicar);',
+  "})();"
+].join("\n");
+
+exports.TEMA_ATRIBUTO = TEMA_ATRIBUTO;
+exports.TEMA_CLAVE = TEMA_CLAVE;
+exports.TEMA_EVENTO = TEMA_EVENTO;
+exports.alternarTema = alternarTema;
+exports.aplicarTema = aplicarTema;
+exports.escucharTema = escucharTema;
+exports.scriptTema = scriptTema;
+exports.temaActual = temaActual;
+exports.temaGuardado = temaGuardado;
+exports.temaPreferido = temaPreferido;

package/dist/tema/index.d.cts

@@ -0,0 +1,110 @@
+/**
+ * El tema, sin React.
+ *
+ * La librería define TODO el sistema de temas —`@custom-variant light`, los
+ * bloques `[data-theme]`, la paleta de los dos modos— y hasta ahora no exponía
+ * lo que lo cambia. `eduardoalvarez.dev` y `links` lo reimplementaban por
+ * separado, cada uno con su `localStorage` y su `astro:after-swap`.
+ *
+ * Este subpaquete no importa React a propósito, igual que `./tokens`, `./og` y
+ * `./shiki`: los dos proyectos que más lo necesitan son Astro y uno de ellos no
+ * envía JavaScript de framework. Lo que se publica aquí es lo difícil del
+ * componente —evitar el parpadeo de la primera pintura y que la elección
+ * sobreviva a la navegación—, no el botón. El botón es `ThemeToggle`, vive en la
+ * raíz y usa esto por dentro.
+ *
+ * `check-package-exports.mjs` verifica que `./tema` no arrastra React en el
+ * `dist/` publicado, igual que las otras tres subrutas portables.
+ */
+/** Los dos modos. El oscuro es el primario y es el default del sistema. */
+type Tema = 'dark' | 'light';
+/**
+ * La clave de `localStorage`.
+ *
+ * Va con el nombre de la librería porque el `localStorage` es del origen, no
+ * del proyecto: un `theme` a secas colisiona con el de cualquier otra cosa que
+ * viva en el mismo dominio.
+ */
+declare const TEMA_CLAVE = "arrecife-tema";
+/** El atributo que leen los bloques `[data-theme]` de `theme.css`. */
+declare const TEMA_ATRIBUTO = "data-theme";
+/**
+ * El evento que se emite cuando el tema cambia.
+ *
+ * Existe porque `storage` solo avisa a las OTRAS pestañas: en la que hizo el
+ * cambio, nada notifica, y un sitio con dos controles de tema —la cabecera y el
+ * pie— se quedaría con uno de los dos mostrando el icono equivocado.
+ */
+declare const TEMA_EVENTO = "arrecife:tema";
+/**
+ * El tema que hay puesto ahora mismo, leído del DOM.
+ *
+ * Del DOM y no de `localStorage` a propósito: el script de la cabecera ya
+ * resolvió la preferencia guardada contra la del sistema, y volver a resolverla
+ * aquí es la forma de que las dos respuestas se separen.
+ */
+declare function temaActual(): Tema;
+/**
+ * La preferencia guardada, si la hay. `null` significa «nadie ha elegido», que
+ * no es lo mismo que «eligió oscuro»: sin elección manda el sistema.
+ */
+declare function temaGuardado(): Tema | null;
+/**
+ * El tema que corresponde: lo elegido, y si no hay elección, lo que pida el
+ * sistema. Sin `prefers-color-scheme` declarado, oscuro, que es el primario.
+ */
+declare function temaPreferido(): Tema;
+/**
+ * Pone el tema en el `<html>` y lo persiste.
+ *
+ * Escribe el atributo SIEMPRE, también cuando es `dark`. El default del sistema
+ * no necesita el atributo, pero dejarlo explícito es lo que permite que un
+ * subárbol declare el modo contrario —el bloque de código va sobre casco en los
+ * dos temas— sin que herede de un `<html>` sin marcar.
+ */
+declare function aplicarTema(tema: Tema, persistir?: boolean): void;
+/** Cambia al contrario y devuelve el que quedó. */
+declare function alternarTema(): Tema;
+/**
+ * Se suscribe a los cambios de tema y devuelve la función que cancela.
+ *
+ * Escucha las dos fuentes: el evento propio —el control de esta pestaña— y
+ * `storage`, que es el cambio hecho en otra. Sin la segunda, dos pestañas
+ * abiertas se quedan con temas distintos hasta que se recarga una.
+ */
+declare function escucharTema(alCambiar: (tema: Tema) => void): () => void;
+/**
+ * El script que va INLINE en el `<head>`, antes de cualquier hoja de estilo.
+ *
+ * Es la parte difícil y es la que se reescribía en cada proyecto. Sin él, la
+ * primera pintura sale con el tema por defecto y el correcto entra un frame
+ * después: en un sitio oscuro que el usuario dejó en claro, eso es un
+ * fogonazo blanco en cada carga.
+ *
+ * Tiene que ser una cadena y tiene que ir en línea. Un `<script src>`, aunque
+ * sea síncrono, se descarga: el parpadeo vuelve. Por eso esto no es un módulo
+ * que se importa, es texto que se inyecta:
+ *
+ * ```astro
+ * ---
+ * import { scriptTema } from '@eduardoalvarez/arrecife/tema';
+ * ---
+ * <head>
+ *   <script is:inline set:html={scriptTema} />
+ * </head>
+ * ```
+ *
+ * ```tsx
+ * // Next, en el layout raíz.
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: scriptTema }} />
+ * </head>
+ * ```
+ *
+ * Reengancha en `astro:after-swap` porque las transiciones de vista de Astro
+ * reemplazan el `<html>` entero: sin esa línea, el tema se pierde al navegar y
+ * vuelve el fogonazo, esta vez a mitad de sesión.
+ */
+declare const scriptTema: string;
+
+export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, type Tema, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido };

package/dist/tema/index.d.ts

@@ -0,0 +1,110 @@
+/**
+ * El tema, sin React.
+ *
+ * La librería define TODO el sistema de temas —`@custom-variant light`, los
+ * bloques `[data-theme]`, la paleta de los dos modos— y hasta ahora no exponía
+ * lo que lo cambia. `eduardoalvarez.dev` y `links` lo reimplementaban por
+ * separado, cada uno con su `localStorage` y su `astro:after-swap`.
+ *
+ * Este subpaquete no importa React a propósito, igual que `./tokens`, `./og` y
+ * `./shiki`: los dos proyectos que más lo necesitan son Astro y uno de ellos no
+ * envía JavaScript de framework. Lo que se publica aquí es lo difícil del
+ * componente —evitar el parpadeo de la primera pintura y que la elección
+ * sobreviva a la navegación—, no el botón. El botón es `ThemeToggle`, vive en la
+ * raíz y usa esto por dentro.
+ *
+ * `check-package-exports.mjs` verifica que `./tema` no arrastra React en el
+ * `dist/` publicado, igual que las otras tres subrutas portables.
+ */
+/** Los dos modos. El oscuro es el primario y es el default del sistema. */
+type Tema = 'dark' | 'light';
+/**
+ * La clave de `localStorage`.
+ *
+ * Va con el nombre de la librería porque el `localStorage` es del origen, no
+ * del proyecto: un `theme` a secas colisiona con el de cualquier otra cosa que
+ * viva en el mismo dominio.
+ */
+declare const TEMA_CLAVE = "arrecife-tema";
+/** El atributo que leen los bloques `[data-theme]` de `theme.css`. */
+declare const TEMA_ATRIBUTO = "data-theme";
+/**
+ * El evento que se emite cuando el tema cambia.
+ *
+ * Existe porque `storage` solo avisa a las OTRAS pestañas: en la que hizo el
+ * cambio, nada notifica, y un sitio con dos controles de tema —la cabecera y el
+ * pie— se quedaría con uno de los dos mostrando el icono equivocado.
+ */
+declare const TEMA_EVENTO = "arrecife:tema";
+/**
+ * El tema que hay puesto ahora mismo, leído del DOM.
+ *
+ * Del DOM y no de `localStorage` a propósito: el script de la cabecera ya
+ * resolvió la preferencia guardada contra la del sistema, y volver a resolverla
+ * aquí es la forma de que las dos respuestas se separen.
+ */
+declare function temaActual(): Tema;
+/**
+ * La preferencia guardada, si la hay. `null` significa «nadie ha elegido», que
+ * no es lo mismo que «eligió oscuro»: sin elección manda el sistema.
+ */
+declare function temaGuardado(): Tema | null;
+/**
+ * El tema que corresponde: lo elegido, y si no hay elección, lo que pida el
+ * sistema. Sin `prefers-color-scheme` declarado, oscuro, que es el primario.
+ */
+declare function temaPreferido(): Tema;
+/**
+ * Pone el tema en el `<html>` y lo persiste.
+ *
+ * Escribe el atributo SIEMPRE, también cuando es `dark`. El default del sistema
+ * no necesita el atributo, pero dejarlo explícito es lo que permite que un
+ * subárbol declare el modo contrario —el bloque de código va sobre casco en los
+ * dos temas— sin que herede de un `<html>` sin marcar.
+ */
+declare function aplicarTema(tema: Tema, persistir?: boolean): void;
+/** Cambia al contrario y devuelve el que quedó. */
+declare function alternarTema(): Tema;
+/**
+ * Se suscribe a los cambios de tema y devuelve la función que cancela.
+ *
+ * Escucha las dos fuentes: el evento propio —el control de esta pestaña— y
+ * `storage`, que es el cambio hecho en otra. Sin la segunda, dos pestañas
+ * abiertas se quedan con temas distintos hasta que se recarga una.
+ */
+declare function escucharTema(alCambiar: (tema: Tema) => void): () => void;
+/**
+ * El script que va INLINE en el `<head>`, antes de cualquier hoja de estilo.
+ *
+ * Es la parte difícil y es la que se reescribía en cada proyecto. Sin él, la
+ * primera pintura sale con el tema por defecto y el correcto entra un frame
+ * después: en un sitio oscuro que el usuario dejó en claro, eso es un
+ * fogonazo blanco en cada carga.
+ *
+ * Tiene que ser una cadena y tiene que ir en línea. Un `<script src>`, aunque
+ * sea síncrono, se descarga: el parpadeo vuelve. Por eso esto no es un módulo
+ * que se importa, es texto que se inyecta:
+ *
+ * ```astro
+ * ---
+ * import { scriptTema } from '@eduardoalvarez/arrecife/tema';
+ * ---
+ * <head>
+ *   <script is:inline set:html={scriptTema} />
+ * </head>
+ * ```
+ *
+ * ```tsx
+ * // Next, en el layout raíz.
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: scriptTema }} />
+ * </head>
+ * ```
+ *
+ * Reengancha en `astro:after-swap` porque las transiciones de vista de Astro
+ * reemplazan el `<html>` entero: sin esa línea, el tema se pierde al navegar y
+ * vuelve el fogonazo, esta vez a mitad de sesión.
+ */
+declare const scriptTema: string;
+
+export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, type Tema, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido };

package/dist/tema/index.js

@@ -0,0 +1,2 @@
+export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido } from '../chunk-KPZNNMV5.js';
+import '../chunk-MLKGABMK.js';

package/dist/tokens/index.cjs

@@ -158,11 +158,11 @@ var control = {
   icon: 42
 };
 var spacing = {
-  xs: 8,
-  sm: 12,
-  md: 16,
-  lg: 26,
-  xl: 40,
+  stepXs: 8,
+  stepSm: 12,
+  stepMd: 16,
+  stepLg: 26,
+  stepXl: 40,
   section: 96
 };
 var size = {
@@ -187,6 +187,10 @@ var sintaxis = {
   /** `markup.deleted`, `invalid`. */
   invalido: dark.error
 };
+var series = {
+  dark: [dark.accent, dark.warm, brand.body, dark.textMuted],
+  light: [light.accent, light.warm, brand.body, light.textMuted]
+};
 var profundo = "#0D2129";
 var gradient = {
   dark: {
@@ -237,6 +241,7 @@ var tokens = {
   size,
   gradient,
   sintaxis,
+  series,
   shadow,
   motion,
   tagline,
@@ -254,6 +259,7 @@ exports.limits = limits;
 exports.motion = motion;
 exports.naming = naming;
 exports.radius = radius;
+exports.series = series;
 exports.shadow = shadow;
 exports.sintaxis = sintaxis;
 exports.size = size;

package/dist/tokens/index.d.cts

@@ -289,12 +289,34 @@ declare const control: {
     /** Botón de icono: cuadrado, sin texto. */
     readonly icon: 42;
 };
+/**
+ * El ritmo de página. Los cinco escalones llevan `step` en el nombre, y no es
+ * decoración: es la corrección de un bug que no dio la cara en ningún sitio.
+ *
+ * En Tailwind v4, `--spacing-*` no alimenta solo `p-*`, `m-*` y `gap-*`:
+ * también resuelve `w-*`, `h-*`, `max-w-*`, `min-w-*`, `basis-*` y `size-*`, y
+ * ahí GANA a la escala `--container-*`. Los escalones se llamaban `xs, sm, md,
+ * lg, xl`, que son exactamente los nombres de esa escala, así que cualquier
+ * proyecto que importara `theme.css` se quedaba con `max-w-sm` valiendo 12px en
+ * vez de 384px. Nada avisaba: ni el build, ni los tipos, ni Storybook, ni la
+ * suite —la librería no usa esas utilidades por dentro—. Se descubrió en
+ * producción, con el párrafo de un hero a una palabra por línea.
+ *
+ * Redeclarar `--container-sm` NO lo arregla: `--spacing-*` gana la resolución.
+ * La única salida es que la librería no use esos nombres.
+ *
+ * El prefijo sigue el patrón que ya tenía `control`: un grupo con nombre propio
+ * dentro del espacio `--spacing-*`. `scripts/check-tokens-namespace.mjs` impide
+ * la recaída.
+ *
+ * `section` no lleva prefijo porque no choca con nada de Tailwind.
+ */
 declare const spacing: {
-    readonly xs: 8;
-    readonly sm: 12;
-    readonly md: 16;
-    readonly lg: 26;
-    readonly xl: 40;
+    readonly stepXs: 8;
+    readonly stepSm: 12;
+    readonly stepMd: 16;
+    readonly stepLg: 26;
+    readonly stepXl: 40;
     readonly section: 96;
 };
 declare const size: {
@@ -345,6 +367,32 @@ declare const sintaxis: {
     /** `markup.deleted`, `invalid`. */
     readonly invalido: "#E15757";
 };
+/**
+ * La paleta de series de las gráficas. CUATRO, por el mismo motivo que la de
+ * sintaxis: el sistema se comunica con color y borde, no con ruido cromático.
+ *
+ * Ninguno es un color nuevo. Son cuatro que ya están en la identidad y que se
+ * distinguen por TONO, no por luminosidad —turquesa, naranja, azul y gris—,
+ * que es la única forma de que sigan siendo cuatro series para quien no
+ * distingue rojo y verde. Elegir bioluz y `success` habría dado dos verdes
+ * casi idénticos en modo claro.
+ *
+ * `brand.body` entra aquí y no en el resaltado por la misma regla vista al
+ * derecho: el sistema lo restringe a RELLENO y nunca a texto, y una serie de
+ * gráfica es relleno. Es igual en los dos modos porque es color de marca.
+ *
+ * El umbral que aplica es el de objeto gráfico, 3:1 contra el fondo, no el de
+ * texto. Medidos contra `background`, los cuatro lo pasan en los dos modos con
+ * margen: el peor es `brand.body` sobre papel, con 3.9:1.
+ *
+ * Una quinta serie no se añade inventando un tono. Si una gráfica necesita
+ * cinco categorías, o sobran categorías o hace falta agrupar en «otros»: ver
+ * `docs/decisiones.md`.
+ */
+declare const series: {
+    readonly dark: readonly ["#35D6C0", "#F2A65A", "#3E7CB1", "#71919C"];
+    readonly light: readonly ["#0D7C6F", "#A65B27", "#3E7CB1", "#626A75"];
+};
 declare const gradient: {
     readonly dark: {
         readonly hero: "linear-gradient(160deg, #091319 60%, #0D2129 100%)";
@@ -401,6 +449,8 @@ type GradientToken = keyof typeof gradient.dark;
 type SintaxisToken = keyof typeof sintaxis;
 type SpacingToken = keyof typeof spacing;
 type SizeToken = keyof typeof size;
+/** El índice de una serie de gráfica: 0, 1, 2 o 3. */
+type SeriesToken = 0 | 1 | 2 | 3;
 
 /**
  * Punto de entrada de `@eduardoalvarez/arrecife/tokens`.
@@ -567,11 +617,11 @@ declare const tokens: {
         readonly icon: 42;
     };
     readonly spacing: {
-        readonly xs: 8;
-        readonly sm: 12;
-        readonly md: 16;
-        readonly lg: 26;
-        readonly xl: 40;
+        readonly stepXs: 8;
+        readonly stepSm: 12;
+        readonly stepMd: 16;
+        readonly stepLg: 26;
+        readonly stepXl: 40;
         readonly section: 96;
     };
     readonly size: {
@@ -599,6 +649,10 @@ declare const tokens: {
         readonly comentario: "#71919C";
         readonly invalido: "#E15757";
     };
+    readonly series: {
+        readonly dark: readonly ["#35D6C0", "#F2A65A", "#3E7CB1", "#71919C"];
+        readonly light: readonly ["#0D7C6F", "#A65B27", "#3E7CB1", "#626A75"];
+    };
     readonly shadow: {
         readonly standard: "0 1px 2px rgba(0, 0, 0, 0.35)";
     };
@@ -620,4 +674,4 @@ declare const tokens: {
 };
 type Tokens = typeof tokens;
 
-export { type BrandToken, type ColorMode, type ColorToken, type ControlToken, type FontToken, type GradientToken, type RadiusToken, type SintaxisToken, type SizeToken, type SpacingToken, type Tokens, type TypeScaleToken, brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, shadow, sintaxis, size, spacing, tagline, tokens, typeScale };
+export { type BrandToken, type ColorMode, type ColorToken, type ControlToken, type FontToken, type GradientToken, type RadiusToken, type SeriesToken, type SintaxisToken, type SizeToken, type SpacingToken, type Tokens, type TypeScaleToken, brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, sintaxis, size, spacing, tagline, tokens, typeScale };

package/dist/tokens/index.d.ts

@@ -289,12 +289,34 @@ declare const control: {
     /** Botón de icono: cuadrado, sin texto. */
     readonly icon: 42;
 };
+/**
+ * El ritmo de página. Los cinco escalones llevan `step` en el nombre, y no es
+ * decoración: es la corrección de un bug que no dio la cara en ningún sitio.
+ *
+ * En Tailwind v4, `--spacing-*` no alimenta solo `p-*`, `m-*` y `gap-*`:
+ * también resuelve `w-*`, `h-*`, `max-w-*`, `min-w-*`, `basis-*` y `size-*`, y
+ * ahí GANA a la escala `--container-*`. Los escalones se llamaban `xs, sm, md,
+ * lg, xl`, que son exactamente los nombres de esa escala, así que cualquier
+ * proyecto que importara `theme.css` se quedaba con `max-w-sm` valiendo 12px en
+ * vez de 384px. Nada avisaba: ni el build, ni los tipos, ni Storybook, ni la
+ * suite —la librería no usa esas utilidades por dentro—. Se descubrió en
+ * producción, con el párrafo de un hero a una palabra por línea.
+ *
+ * Redeclarar `--container-sm` NO lo arregla: `--spacing-*` gana la resolución.
+ * La única salida es que la librería no use esos nombres.
+ *
+ * El prefijo sigue el patrón que ya tenía `control`: un grupo con nombre propio
+ * dentro del espacio `--spacing-*`. `scripts/check-tokens-namespace.mjs` impide
+ * la recaída.
+ *
+ * `section` no lleva prefijo porque no choca con nada de Tailwind.
+ */
 declare const spacing: {
-    readonly xs: 8;
-    readonly sm: 12;
-    readonly md: 16;
-    readonly lg: 26;
-    readonly xl: 40;
+    readonly stepXs: 8;
+    readonly stepSm: 12;
+    readonly stepMd: 16;
+    readonly stepLg: 26;
+    readonly stepXl: 40;
     readonly section: 96;
 };
 declare const size: {
@@ -345,6 +367,32 @@ declare const sintaxis: {
     /** `markup.deleted`, `invalid`. */
     readonly invalido: "#E15757";
 };
+/**
+ * La paleta de series de las gráficas. CUATRO, por el mismo motivo que la de
+ * sintaxis: el sistema se comunica con color y borde, no con ruido cromático.
+ *
+ * Ninguno es un color nuevo. Son cuatro que ya están en la identidad y que se
+ * distinguen por TONO, no por luminosidad —turquesa, naranja, azul y gris—,
+ * que es la única forma de que sigan siendo cuatro series para quien no
+ * distingue rojo y verde. Elegir bioluz y `success` habría dado dos verdes
+ * casi idénticos en modo claro.
+ *
+ * `brand.body` entra aquí y no en el resaltado por la misma regla vista al
+ * derecho: el sistema lo restringe a RELLENO y nunca a texto, y una serie de
+ * gráfica es relleno. Es igual en los dos modos porque es color de marca.
+ *
+ * El umbral que aplica es el de objeto gráfico, 3:1 contra el fondo, no el de
+ * texto. Medidos contra `background`, los cuatro lo pasan en los dos modos con
+ * margen: el peor es `brand.body` sobre papel, con 3.9:1.
+ *
+ * Una quinta serie no se añade inventando un tono. Si una gráfica necesita
+ * cinco categorías, o sobran categorías o hace falta agrupar en «otros»: ver
+ * `docs/decisiones.md`.
+ */
+declare const series: {
+    readonly dark: readonly ["#35D6C0", "#F2A65A", "#3E7CB1", "#71919C"];
+    readonly light: readonly ["#0D7C6F", "#A65B27", "#3E7CB1", "#626A75"];
+};
 declare const gradient: {
     readonly dark: {
         readonly hero: "linear-gradient(160deg, #091319 60%, #0D2129 100%)";
@@ -401,6 +449,8 @@ type GradientToken = keyof typeof gradient.dark;
 type SintaxisToken = keyof typeof sintaxis;
 type SpacingToken = keyof typeof spacing;
 type SizeToken = keyof typeof size;
+/** El índice de una serie de gráfica: 0, 1, 2 o 3. */
+type SeriesToken = 0 | 1 | 2 | 3;
 
 /**
  * Punto de entrada de `@eduardoalvarez/arrecife/tokens`.
@@ -567,11 +617,11 @@ declare const tokens: {
         readonly icon: 42;
     };
     readonly spacing: {
-        readonly xs: 8;
-        readonly sm: 12;
-        readonly md: 16;
-        readonly lg: 26;
-        readonly xl: 40;
+        readonly stepXs: 8;
+        readonly stepSm: 12;
+        readonly stepMd: 16;
+        readonly stepLg: 26;
+        readonly stepXl: 40;
         readonly section: 96;
     };
     readonly size: {
@@ -599,6 +649,10 @@ declare const tokens: {
         readonly comentario: "#71919C";
         readonly invalido: "#E15757";
     };
+    readonly series: {
+        readonly dark: readonly ["#35D6C0", "#F2A65A", "#3E7CB1", "#71919C"];
+        readonly light: readonly ["#0D7C6F", "#A65B27", "#3E7CB1", "#626A75"];
+    };
     readonly shadow: {
         readonly standard: "0 1px 2px rgba(0, 0, 0, 0.35)";
     };
@@ -620,4 +674,4 @@ declare const tokens: {
 };
 type Tokens = typeof tokens;
 
-export { type BrandToken, type ColorMode, type ColorToken, type ControlToken, type FontToken, type GradientToken, type RadiusToken, type SintaxisToken, type SizeToken, type SpacingToken, type Tokens, type TypeScaleToken, brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, shadow, sintaxis, size, spacing, tagline, tokens, typeScale };
+export { type BrandToken, type ColorMode, type ColorToken, type ControlToken, type FontToken, type GradientToken, type RadiusToken, type SeriesToken, type SintaxisToken, type SizeToken, type SpacingToken, type Tokens, type TypeScaleToken, brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, sintaxis, size, spacing, tagline, tokens, typeScale };

package/dist/tokens/index.js

@@ -1,2 +1,3 @@
-export { tokens } from '../chunk-22OXRTAL.js';
-export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, shadow, sintaxis, size, spacing, tagline, typeScale } from '../chunk-DHF63QNM.js';
+export { tokens } from '../chunk-VPT32GPG.js';
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, sintaxis, size, spacing, tagline, typeScale } from '../chunk-TSPJOM6K.js';
+import '../chunk-MLKGABMK.js';