@eduardoalvarez/arrecife 0.3.0 → 0.5.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-I7GYZD2A.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-I7GYZD2A.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

@@ -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

@@ -367,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%)";
@@ -423,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`.
@@ -621,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)";
     };
@@ -642,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

@@ -367,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%)";
@@ -423,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`.
@@ -621,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)";
     };
@@ -642,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-VSMW2CT4.js';
-export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, shadow, sintaxis, size, spacing, tagline, typeScale } from '../chunk-I7GYZD2A.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';

package/dist/tokens/theme.css

@@ -44,6 +44,12 @@
   --color-brand-spots: #C2D7E7;
   --color-brand-hull: #0B1524;
 
+  /* --- series de gráfica · modo oscuro (default) --------------------------- */
+  --color-serie-1: #35D6C0;
+  --color-serie-2: #F2A65A;
+  --color-serie-3: #3E7CB1;
+  --color-serie-4: #71919C;
+
   /* --- tipografía --------------------------------------------------------- */
   --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
   --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
@@ -153,6 +159,11 @@
   --color-warning: #E8A33D;
   --color-error: #E15757;
 
+  --color-serie-1: #35D6C0;
+  --color-serie-2: #F2A65A;
+  --color-serie-3: #3E7CB1;
+  --color-serie-4: #71919C;
+
   --gradient-hero: linear-gradient(160deg, #091319 60%, #0D2129 100%);
   --gradient-seccion: linear-gradient(150deg, #10202B 0%, #0D2129 100%);
   --gradient-og: linear-gradient(145deg, #091319 55%, #0D2129 100%);
@@ -178,6 +189,11 @@
   --color-warning: #8D6111;
   --color-error: #C0392B;
 
+  --color-serie-1: #0D7C6F;
+  --color-serie-2: #A65B27;
+  --color-serie-3: #3E7CB1;
+  --color-serie-4: #626A75;
+
   --gradient-hero: linear-gradient(160deg, #F6F2EA 60%, #EFE9DE 100%);
   --gradient-seccion: linear-gradient(150deg, #FFFFFF 0%, #EFE9DE 100%);
   --gradient-og: linear-gradient(145deg, #F6F2EA 55%, #EFE9DE 100%);
@@ -216,6 +232,33 @@
   animation: arrecife-shimmer 1.4s linear infinite;
 }
 
+/* --- la excepción del plegable ----------------------------------------------
+   La cuarta y, como las otras tres, no es «queda mejor»: un plegable que revela
+   contenido sin transición hace SALTAR todo lo que tiene debajo, y quien acaba
+   de pulsar pierde el sitio en la página. Es la misma categoría que el panel
+   lateral —un panel que entra desde un borde se desliza por definición— y no la
+   de una animación de entrada, que es lo que el sistema no admite: aquí no
+   aparece nada nuevo en pantalla, se abre un hueco.
+
+   La altura la publica Radix en --radix-accordion-content-height. Dura lo que
+   dura todo lo demás y usa la misma curva, así que no estrena un tiempo. En el
+   componente va detrás de motion-safe. */
+@keyframes arrecife-despliega {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+@keyframes arrecife-repliega {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+@utility desplegar {
+  animation: arrecife-despliega var(--duration-standard) var(--ease-standard);
+}
+@utility replegar {
+  animation: arrecife-repliega var(--duration-standard) var(--ease-standard);
+}
+
 /* --- la excepción del panel lateral -----------------------------------------
    Un panel que entra desde un borde se desliza por definición: quieto sería un
    modal descentrado. Es la segunda y última excepción a "nada de