@eduardoalvarez/arrecife 0.5.1 → 0.7.0

package/dist/index.d.ts

@@ -1,10 +1,11 @@
-export { BrandToken, ColorMode, ColorToken, ControlToken, FontToken, GradientToken, RadiusToken, SeriesToken, SintaxisToken, SizeToken, SpacingToken, Tokens, TypeScaleToken, brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, sintaxis, size, spacing, tagline, tokens, typeScale } from './tokens/index.js';
-import { Tema } from './tema/index.js';
-export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido } from './tema/index.js';
+export { BrandToken, ColorMode, ColorToken, ControlToken, FontToken, GradientToken, RadiusToken, SeriesToken, SizeToken, SpacingToken, SyntaxToken, Tokens, TypeScaleToken, brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, tokens, typeScale } from './tokens/index.js';
+import { Theme } from './theme/index.js';
+export { THEME_ATTRIBUTE, THEME_EVENT, THEME_KEY, ThemeOptions, applyTheme, currentTheme, preferredTheme, storedTheme, themeScript, toggleTheme, watchTheme } from './theme/index.js';
+import { alertVariants as alert, avatarVariants as avatar, badgeVariants as badge, buttonVariants as button, textVariants as text } from './variants/index.js';
+export { CARD, CARD_HOVER, CARD_SURFACE, categoryBadgeVariants, metricBadgeVariants } from './variants/index.js';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, ComponentProps, RefObject, SVGProps } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, ComponentProps, RefObject } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
@@ -12,372 +13,235 @@ import { DayPicker } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-export { L as Label, a as LabelProps } from './label-DuTvJGxD.js';
+export { L as Label, a as LabelProps } from './label-MgHFKnFy.js';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { C as Cara, P as Pose } from './catalogo-Du5ID-Hi.js';
-export { A as Aleta, F as Fondo, R as RUTA_ASSETS, a as aletas, c as caras, l as listaCaras, b as listaPoses, p as poses, u as usoDeCara } from './catalogo-Du5ID-Hi.js';
-export { CaraDeMascota, CaraDeMascotaProps, Isotipo, IsotipoProps, Logo, LogoProps, Mascota, MascotaProps } from './brand/index.js';
+import { F as Face, P as Pose } from './catalog-D13txprv.js';
+export { A as ASSETS_PATH, B as Background, a as Fin, f as faceList, b as faceUsage, c as faces, d as fins, p as poseList, e as poses } from './catalog-D13txprv.js';
+export { Isotype, IsotypeProps, Logo, LogoProps, Mascot, MascotFace, MascotFaceProps, MascotProps } from './brand/index.js';
 import { ClassValue } from 'clsx';
+export { i as social } from './index-DlAO2JZs.js';
 import '@radix-ui/react-label';
 
 /**
- * El plegable. Lo pedían dos proyectos: el FAQ del portafolio y el temario de
- * cursos, que es literalmente una lista de secciones que se abren.
+ * The disclosure. Two projects asked for it: the portfolio FAQ and the course
+ * syllabus, which is literally a list of sections that open.
  *
- * La altura SÍ se anima, y es la cuarta excepción declarada del sistema.
+ * The height IS animated, and it is the system's fourth declared exception.
  *
- * Merece explicarse, porque la regla general es la contraria y este componente
- * nació sin animar citándola. La diferencia es que aquí no APARECE nada: se
- * abre un hueco, y todo lo que hay debajo del acordeón se desplaza. Sin
- * transición ese desplazamiento es un salto, y quien acaba de pulsar pierde el
- * sitio en la página — que es justo el daño que la regla «nada de movimiento»
- * existe para evitar. Es la misma categoría que el panel lateral, la segunda
- * excepción, y no la de una animación de entrada.
+ * It deserves explaining, because the general rule says the opposite and this
+ * component was born unanimated citing it. The difference is that nothing
+ * APPEARS here: a gap opens, and everything below the accordion shifts. Without
+ * a transition that shift is a jump, and whoever just clicked loses their place
+ * on the page — which is exactly the harm the «no movement» rule exists to
+ * prevent. It is the same category as the side panel, the second exception, and
+ * not that of an entrance animation.
  *
- * Va detrás de `motion-safe`, dura `--duration-standard` y usa
- * `--ease-standard`, así que no estrena un tiempo ni una curva. Quien pidió
- * menos movimiento sigue viendo el panel aparecer donde va a quedarse.
+ * It sits behind `motion-safe`, lasts `--duration-standard` and uses
+ * `--ease-standard`, so it introduces neither a new timing nor a new curve.
+ * Whoever asked for less motion still sees the panel appear where it will stay.
  *
- * Ver `docs/decisiones.md` § 20.
+ * See `docs/decisions.md` § 20.
  *
- * El galón, en cambio, gira sin transición: `transition-standard` solo cubre
- * color y borde, así que `rotate` salta aunque la clase esté puesta. Es el mismo
- * trato que recibe el ancho de `Progress`.
+ * The chevron, by contrast, rotates with no transition: `transition-standard`
+ * only covers color and border, so `rotate` snaps even with the class in place.
+ * It is the same treatment `Progress` gives its width.
  *
- * La división entre items es `hairline`, no `border`: es una separación de
- * lectura, no el borde de un control.
+ * The divider between items is `hairline`, not `border`: it is a reading
+ * separation, not the border of a control.
  */
 type AccordionProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
 declare function Accordion({ className, ...props }: AccordionProps): react.JSX.Element;
 declare function AccordionItem({ className, ...props }: ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>): react.JSX.Element;
 /**
- * El disparador es el encabezado, así que va DENTRO de un `<h3>`: Radix envuelve
- * el botón en `AccordionPrimitive.Header`, que renderiza el elemento que se le
- * pida. Sin eso, un lector de pantalla ve una lista de botones sueltos y pierde
- * la estructura de la página, que es justo lo que un FAQ necesita conservar.
- *
- * `headingLevel` existe porque el nivel correcto depende de dónde se monte: en
- * una página de FAQ el bloque cuelga de un `<h2>` de sección, y en un temario
- * puede colgar de un `<h3>`. Fijarlo aquí sería adivinar.
+ * The trigger IS the heading, so it goes INSIDE an `<h3>`: Radix wraps the
+ * button in `AccordionPrimitive.Header`, which renders whichever element you ask
+ * of it. Without that, a screen reader sees a list of loose buttons and loses
+ * the page structure, which is precisely what a FAQ needs to keep.
+ *
+ * `headingLevel` exists because the correct level depends on where it is
+ * mounted: on a FAQ page the block hangs off a section `<h2>`, and in a syllabus
+ * it may hang off an `<h3>`. Pinning it here would be guessing.
  */
 type AccordionTriggerProps = ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
-    /** Nivel del encabezado que envuelve al disparador. */
+    /** The level of the heading wrapping the trigger. */
     headingLevel?: 2 | 3 | 4;
 };
 declare function AccordionTrigger({ className, children, headingLevel, ...props }: AccordionTriggerProps): react.JSX.Element;
 declare function AccordionContent({ className, children, ...props }: ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>): react.JSX.Element;
 
-/**
- * El aviso lleva el color en el fondo, no solo en el borde.
- *
- * La receta del sistema es fondo al 8 % del color semántico y borde al 22 %.
- * Este archivo daba `bg-surface` a las cuatro variantes, así que el tono vivía
- * entero en un borde de 1px: cuatro avisos que se distinguían entre sí por una
- * línea.
- *
- * Los cuatro tonos empiezan en ACENTO, que es el informativo del sistema (✦).
- * No hay `neutral`: un aviso sin color es un párrafo.
- *
- * MEDIDO en los dos modos, porque el 8 % del documento está calculado sobre
- * abismo y había que comprobar que sobrevive sobre papel. Contraste del tinte
- * contra el fondo de página:
- *
- *              8 % oscuro   8 % claro
- *   accent       1.149        1.106
- *   success      1.116        1.121
- *   warning      1.126        1.109
- *   error        1.067        1.120
- *
- * El modo claro NO necesita una segunda tabla: aguanta igual o mejor que el
- * oscuro. El único punto flojo del sistema es `error` sobre abismo, 1.067, que
- * es el tinte más tenue de los ocho y se apoya entero en el borde al 22 %.
- *
- * Hay una SEGUNDA receta, a propósito: el aviso bajo el formulario de
- * newsletter va al 10 % con el borde sólido para leerse bajo el campo. Es
- * `enfasis="fuerte"`, y no se unifica con la sutil porque la diferencia está
- * documentada.
- *
- * TERCERA corrección de contraste, en la línea de las tres que ya tenía
- * `tokens.ts`. El título iba en el color semántico, y en modo claro eso no puede
- * pasar AA: los semánticos claros están calibrados para pasar JUSTO sobre papel
- * (4.54–4.88), así que sobre su propio tinte al 8 % caen a 4.11–4.40. No hay
- * alfa que lo arregle — el problema es poner el color encima de sí mismo.
- *
- * El tinte es una SUPERFICIE, así que el texto que lleva encima es un token de
- * texto: `textPrimary` da 14.6–14.9 sobre los cuatro tintes. El color semántico
- * se queda donde no es texto — el borde y el glifo —, que es lo único que el
- * documento pedía de él. El glifo es decorativo y va `aria-hidden`, así que le
- * aplica el umbral de 3:1 y no el de 4.5: su peor caso claro es 4.11.
- *
- * El radio: el documento dice 12, que no es ninguno de los cinco radios del
- * sistema. Usa el de tarjeta antes que estrenar un sexto — ver
- * `docs/decisiones.md`.
- */
-declare const alert: (props?: ({
-    variant?: "error" | "accent" | "success" | "warning" | null | undefined;
-    enfasis?: "sutil" | "fuerte" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
 type AlertProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & VariantProps<typeof alert> & {
     title?: ReactNode;
     /**
-     * Sustituye el glifo mono de la variante. Nunca un emoji: si necesitas otra
-     * cosa, es un SVG de `glyphs`.
+     * Replaces the variant's mono glyph. Never an emoji: if you need something
+     * else, it is an SVG from `glyphs`.
      */
     icon?: ReactNode;
 };
-declare function Alert({ className, variant, enfasis, title, icon, children, ...props }: AlertProps): react.JSX.Element;
+declare function Alert({ className, variant, emphasis, title, icon, children, ...props }: AlertProps): react.JSX.Element;
 
 /**
- * La confirmación destructiva. NO es un `Dialog` con otro texto, y por eso está
- * en su propio archivo y sobre su propia primitiva de Radix.
- *
- * Tres diferencias, y las tres importan en el momento en que alguien va a
- * borrar un artículo:
- *
- *   1. El rol es `alertdialog`, no `dialog`. Un lector de pantalla lo anuncia
- *      con la descripción incluida, sin esperar a que se navegue hasta ella.
- *   2. El foco inicial va al CANCELAR, no al primer elemento. Quien pulsa Enter
- *      por inercia no borra nada. Radix lo hace solo si el cancelar existe, y
- *      por eso `AlertDialogCancel` no es opcional en la práctica.
- *   3. NO se cierra al pulsar fuera ni tiene aspa. Salir de una confirmación es
- *      una decisión, no un descuido: hay que decir que no.
- *
- * El botón de confirmar NO es rojo. El sistema no tiene variante de peligro
- * —`Button` lo dice explícito— y el error vive en los avisos y en la validación
- * de campo, no en un botón. Lo que comunica la gravedad es el texto: «Borrar el
- * artículo», no «Aceptar».
+ * The destructive confirmation. It is NOT a `Dialog` with different text, which
+ * is why it lives in its own file and on its own Radix primitive.
+ *
+ * Three differences, and all three matter at the moment somebody is about to
+ * delete an article:
+ *
+ *   1. The role is `alertdialog`, not `dialog`. A screen reader announces it
+ *      with the description included, without waiting for you to navigate to it.
+ *   2. Initial focus goes to CANCEL, not to the first element. Whoever hits
+ *      Enter out of inertia deletes nothing. Radix does this on its own only if
+ *      the cancel exists, which is why `AlertDialogCancel` is not optional in
+ *      practice.
+ *   3. It does NOT close on outside click and has no X. Leaving a confirmation
+ *      is a decision, not a slip: you have to say no.
+ *
+ * The confirm button is NOT red, and since 0.6.0 that is a choice and no longer
+ * the absence of an option: `Button` has `destructive`, and here it is still not
+ * used. Everything above already carries the gravity — a title that says what is
+ * about to happen, focus on cancel, no closing by clicking outside — and a red
+ * button on top of that is shouting. What communicates the gravity is the text:
+ * «Borrar el artículo», not «Aceptar».
+ *
+ * `destructive` is for the destructive button that has none of that around it:
+ * a table row, a toolbar. See `docs/decisions.md` § 21.
  */
 declare const AlertDialog: react.FC<AlertDialogPrimitive.AlertDialogProps>;
 declare const AlertDialogTrigger: react.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare function AlertDialogOverlay({ className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>): react.JSX.Element;
-/** Sin entrada animada, igual que `Dialog`: aparece donde va a quedarse. */
+/** No entrance animation, same as `Dialog`: it appears where it will stay. */
 declare function AlertDialogContent({ className, children, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>): react.JSX.Element;
 declare function AlertDialogHeader({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
 /**
- * Cancelar a la IZQUIERDA de confirmar en escritorio y ABAJO en móvil, que es lo
- * que da `flex-col-reverse`: el orden del DOM pone cancelar primero —es donde va
- * el foco— y en columna el dedo lo encuentra donde toca sin cambiar la
- * tabulación.
+ * Cancel to the LEFT of confirm on desktop and BELOW it on mobile, which is what
+ * `flex-col-reverse` gives: the DOM order puts cancel first — that is where focus
+ * goes — and in a column the thumb finds it where it should be without changing
+ * the tab order.
  */
 declare function AlertDialogFooter({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
 declare function AlertDialogTitle({ className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>): react.JSX.Element;
 /**
- * Lo que se pierde, dicho entero. Es lo que el rol `alertdialog` hace que se
- * anuncie de entrada, así que aquí no va «esta acción no se puede deshacer»
- * suelto: va qué se borra y qué se lleva por delante.
+ * What is lost, spelled out. The `alertdialog` role makes this get announced up
+ * front, so «this action cannot be undone» does not go here on its own: what
+ * goes here is what gets deleted and what it takes down with it.
  */
 declare function AlertDialogDescription({ className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>): react.JSX.Element;
-/** El que se lleva el foco al abrir. */
+/** The one that takes focus on open. */
 declare function AlertDialogCancel({ className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>): react.JSX.Element;
 declare function AlertDialogAction({ className, ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>): react.JSX.Element;
 
-declare const avatar: (props?: ({
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
 type AvatarProps = ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & VariantProps<typeof avatar>;
 /**
- * Uno solo para todo: la foto del autor y la de cualquier persona del sistema.
- * No hay un `brand/Avatar` aparte — una foto de perfil con la piel de la marca
- * es exactamente esto con un `src` distinto.
+ * One for everything: the author's photo and anyone else's in the system. There
+ * is no separate `brand/Avatar` — a profile photo wearing the brand's skin is
+ * exactly this with a different `src`.
  */
 declare function Avatar({ className, size, ...props }: AvatarProps): react.JSX.Element;
 declare function AvatarImage({ className, ...props }: ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>): react.JSX.Element;
-/** Iniciales mientras la imagen carga, o cuando no hay imagen. */
+/** Initials while the image loads, or when there is no image. */
 declare function AvatarFallback({ className, ...props }: ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>): react.JSX.Element;
 type AvatarUploadProps = Omit<ComponentPropsWithoutRef<'div'>, 'onSelect' | 'children'> & VariantProps<typeof avatar> & {
-    /** La imagen actual, ya subida. La previsualización local la gana mientras dure. */
+    /** The current image, already uploaded. The local preview beats it while it lasts. */
     src?: string | undefined;
-    /** Iniciales mientras no hay imagen. */
+    /** Initials while there is no image. */
     fallback?: ReactNode;
-    /** Se dispara con el archivo elegido. La subida la hace el proyecto. */
-    onSelectFile?: ((archivo: File) => void) | undefined;
-    /** Qué acepta el diálogo del sistema. */
+    /** Fires with the chosen file. The upload is the project's job. */
+    onSelectFile?: ((file: File) => void) | undefined;
+    /** What the system dialog accepts. */
     accept?: string;
-    /** Nombre accesible del control. Es lo único que lo nombra: no hay texto visible. */
+    /** The control's accessible name. It is the only thing naming it: there is no visible text. */
     label?: string;
     disabled?: boolean | undefined;
 };
 /**
- * El avatar que se puede cambiar. `Avatar` muestra; este además deja elegir.
- *
- * Es presentacional, como `NewsletterForm`: emite `onSelectFile` con el `File` y
- * ahí se acaba su trabajo. La subida no entra —cada proyecto tiene su
- * almacenamiento y su endpoint— y un componente que hiciera el `POST` sería
- * infraestructura, que es el tercer criterio de entrada y el que más se salta.
- *
- * La previsualización es LOCAL y no espera a que la subida termine. Es la
- * diferencia entre un control que responde y uno que parece roto: entre elegir
- * el archivo y que el servidor devuelva la URL pueden pasar segundos, y sin
- * previa el avatar se queda con la foto vieja como si no hubiera pasado nada.
- * El `objectURL` se revoca al cambiar y al desmontar; no revocarlo es una fuga
- * de memoria que no da la cara hasta la décima foto.
- *
- * El control es un `<label>` con un `<input type="file">` oculto dentro, no un
- * `<button>` que dispara un click sintético. El input real trae el diálogo del
- * sistema, el arrastrar-y-soltar del navegador y el foco por teclado; el botón
- * falso hay que reconstruirlo entero y siempre falta algo.
+ * The avatar you can change. `Avatar` displays; this one also lets you pick.
+ *
+ * It is presentational, like `NewsletterForm`: it emits `onSelectFile` with the
+ * `File` and its job ends there. The upload does not belong here — every project
+ * has its own storage and its own endpoint — and a component doing the `POST`
+ * would be infrastructure, which is the third entry criterion and the one most
+ * often skipped.
+ *
+ * The preview is LOCAL and does not wait for the upload to finish. It is the
+ * difference between a control that responds and one that looks broken: seconds
+ * can pass between picking the file and the server returning the URL, and with
+ * no preview the avatar keeps the old photo as though nothing had happened. The
+ * `objectURL` is revoked on change and on unmount; not revoking it is a memory
+ * leak that does not show its face until the tenth photo.
+ *
+ * The control is a `<label>` with a hidden `<input type="file">` inside, not a
+ * `<button>` firing a synthetic click. The real input brings the system dialog,
+ * the browser's drag-and-drop and keyboard focus; the fake button has to be
+ * rebuilt from scratch and something is always missing.
  */
 declare function AvatarUpload({ src, fallback, onSelectFile, accept, label, size, disabled, className, ...props }: AvatarUploadProps): react.JSX.Element;
 
 /**
- * TRES familias de etiqueta, no una.
- *
- * El sistema define tres formas distintas y este archivo las servía todas como
- * píldora mono en versalitas. Cada una tiene su forma porque cada una dice otra
- * cosa:
- *
- *   categoría · píldora r999, mono 11.5, arena   → un slug: `engineering-culture`
- *   estado    · cuadrada r6, sans 12.5/500, tinte → un semáforo: publicado, borrador
- *   métrica   · píldora, mono 11.5 muted          → un dato: `8 min de lectura`
- *
- * NINGUNA va en versalitas. El `uppercase tracking-[0.12em]` que tenían las tres
- * venía de `text-eyebrow`, que es la escala del eyebrow y no la de las
- * etiquetas: convertía `engineering-culture` en `ENGINEERING-CULTURE` y
- * `pose-laptop-coffee.png` en un nombre de archivo que no existe.
- */
-/**
- * Semáforo. Cuadrada r6, sans 12.5/500 y fondo al 8 % del semántico — la receta
- * del aviso en tamaño de palabra: un estado es un aviso de una sola palabra.
- *
- * SIN borde. Lo llevó un tiempo, puesto para reforzar el tono, y pesaba: una
- * caja con borde al lado de un título se lee como un control y no como un dato.
- * El tinte solo es lo que pide el documento y es lo que se ve más limpio.
- *
- * El texto va en `textPrimary`, no en el color del tono. En modo claro los
- * semánticos están calibrados para pasar JUSTO sobre papel, así que sobre su
- * propio tinte caen a 4.10–4.40 y no pasan AA. El tinte es una superficie;
- * encima va un token de texto. Medido en `alert.tsx`.
- *
- * El tono nunca es el único portador del significado: la etiqueta dice
- * «Publicado» o «Borrador» con todas sus letras.
+ * Three badge families, three components. Why there are three shapes and not one
+ * is in `variants/badge.ts`, next to the classes that make them.
  */
-declare const badge: (props?: ({
-    variant?: "error" | "accent" | "success" | "warning" | "neutral" | "warm" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
 type BadgeProps = ComponentPropsWithoutRef<'span'> & VariantProps<typeof badge>;
 declare function Badge({ className, variant, ...props }: BadgeProps): react.JSX.Element;
-/**
- * Un slug, en arena. Sin transformar: los slugs ya vienen en minúscula y
- * forzarla sería el mismo error que forzaba el `uppercase`.
- *
- * El borde del documento es `#4A3A25`, que es arena al 28 % sobre abismo: sale
- * de la paleta, así que no entra como token nuevo. En modo claro la misma regla
- * da arena oscura al 28 % sobre papel, que es lo que se quiere.
- *
- * La variante rellena NO es decorativa: es el único indicador de filtro activo
- * del listado de artículos. Por eso `active` es una prop y no un `className`.
- */
-declare const categoria: (props?: ({
-    active?: boolean | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
 type CategoryBadgeProps = ComponentPropsWithoutRef<'span'> & {
-    /** Filtro seleccionado: arena sólido con tinta encima. */
+    /** Selected filter: solid sand with ink on top. */
     active?: boolean | undefined;
 };
 declare function CategoryBadge({ className, active, ...props }: CategoryBadgeProps): react.JSX.Element;
 type MetricBadgeProps = ComponentPropsWithoutRef<'span'> & {
-    /** Añade el aro de hairline. Por defecto la métrica va sin caja. */
+    /** Adds the hairline ring. By default a metric carries no box. */
     boxed?: boolean | undefined;
 };
 declare function MetricBadge({ className, boxed, ...props }: MetricBadgeProps): react.JSX.Element;
 
-/**
- * Las CUATRO variantes del sistema, y solo esas cuatro.
- *
- * Regla de marca 2, como código y no como documentación: en modo claro el botón
- * primario no puede ser bioluz ni arena, así que pasa a casco sólido. No hay un
- * hex literal en ningún lado — `brand.hull` es un token, y el hover reusa
- * `textSecondary` en vez de inventar un `hullHover`.
- *
- * Regla de marca 3: `conversion` va UNA sola vez por pantalla. Está documentado
- * en la story y no se fuerza en runtime: dos botones de conversión en una misma
- * página son un problema de diseño, no un error que deba tirar el render.
- *
- * `secondary` NUNCA se rellena el fondo. Es borde y texto: en reposo, hairline
- * de hover y espuma; en hover, los dos pasan a bioluz. Un secundario relleno es
- * un primario mal teñido, y era lo que hacía este archivo.
- *
- * `tertiary` es la estética CLI del sistema: mono, formato `./acción →`, sin
- * caja. Aparece en cada tarjeta, así que no es un `ghost` genérico con otro
- * nombre — el formato del texto es parte de la variante.
- *
- * No hay variante de peligro. El error del sistema vive en los avisos y en la
- * validación de campo, no en un botón rojo. Si alguna vez hace falta uno de
- * verdad, entra primero en el documento y luego aquí.
- */
-declare const button: (props?: ({
-    variant?: "primary" | "conversion" | "secondary" | "tertiary" | null | undefined;
-    size?: "icon" | "sm" | "md" | "lg" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonProps = ComponentPropsWithoutRef<'button'> & VariantProps<typeof button> & {
-    /** Renderiza el hijo en vez de un `<button>`, para envolver un enlace. */
+    /** Renders the child instead of a `<button>`, to wrap a link. */
     asChild?: boolean;
-    /** Deshabilita y anuncia `aria-busy`. Incompatible con `asChild`. */
+    /** Disables and announces `aria-busy`. Incompatible with `asChild`. */
     loading?: boolean;
-    /** Glifo SVG antes del texto. Se oculta mientras carga. */
+    /** SVG glyph before the text. Hidden while loading. */
     icon?: ReactNode;
 };
 declare function Button({ className, variant, size, asChild, loading, icon, children, disabled, ...props }: ButtonProps): react.JSX.Element;
 
 type CalendarProps = ComponentProps<typeof DayPicker> & {
     /**
-     * Estira el calendario hasta ocupar todo el ancho de su contenedor, con las
-     * celdas repartiéndoselo a partes iguales.
+     * Stretches the calendar to fill its container's whole width, with the cells
+     * splitting it evenly.
      *
-     * Apagado, el calendario mide lo que miden sus celdas —36 px cada una— y es lo
-     * que quieres dentro de un `Popover`, donde estirarlo dejaría un globo enorme.
-     * Encendido, es la vista de mes de un planificador, que ocupa la página.
+     * Off, the calendar measures whatever its cells measure — 36px each — and that
+     * is what you want inside a `Popover`, where stretching it would leave a huge
+     * bubble. On, it is a planner's month view, which fills the page.
      *
-     * Con varios meses, cada uno se lleva una fracción igual del ancho.
+     * With several months, each takes an equal fraction of the width.
      */
     fullWidth?: boolean | undefined;
 };
 /**
- * Calendario mensual navegable, sobre `react-day-picker`.
+ * A navigable month calendar, on top of `react-day-picker`.
  *
- * Es la única dependencia pesada de la librería y entró a sabiendas: el
- * calendario del planificador de contenido no se puede resolver con el control
- * nativo. Para elegir una fecha dentro de un formulario existe `DateField`, que
- * no arrastra nada.
+ * It is the library's only heavy dependency and it was let in knowingly: the
+ * content planner's calendar cannot be solved with the native control. For
+ * picking a date inside a form there is `DateField`, which drags nothing along.
  *
- * `animate` se queda apagado —es su valor por defecto— así que el cambio de mes
- * no se desliza. Los días se marcan con color y borde, como todo lo demás.
+ * `animate` stays off — that is its default — so the month change does not
+ * slide. Days are marked with color and border, like everything else.
  *
- * El idioma va en español por defecto porque los cinco proyectos lo están; se
- * cambia pasando otro `locale` de date-fns.
+ * The language defaults to Spanish because all five projects are; it is changed
+ * by passing another date-fns `locale`.
  *
- * No trae el `style.css` de la librería: todas las clases salen de aquí, así que
- * el consumidor no tiene que importar CSS de terceros ni pelearse con su
- * especificidad.
+ * It does not ship the library's `style.css`: every class comes from here, so
+ * the consumer need not import third-party CSS or fight its specificity.
  */
 declare function Calendar({ className, classNames, showOutsideDays, fullWidth, ...props }: CalendarProps): react.JSX.Element;
 
-/**
- * El contenedor de superficie del sistema, y la única definición de lo que es
- * una tarjeta: `surface`, borde `hairline`, radio de tarjeta.
- *
- * Las tarjetas con dominio — `ArticleCard`, `TalkCard`, `CourseCard`,
- * `LinkRow` — reutilizan estas mismas clases, así que si el radio o el borde
- * cambian, cambian en todas a la vez.
- *
- * El documento daba a la tarjeta un fondo propio, `#0B1620`, un cuarto nivel de
- * superficie entre abismo y fosa. No entra: no tiene par en modo claro, y una
- * superficie sin par es un token que miente en la mitad de los proyectos. La
- * tarjeta es `surface`, y el documento se corrige — ver `docs/decisiones.md`.
- *
- * El padding sí estaba mal: el documento pide 26 (`lg`) y aquí había 16 (`md`).
- */
-declare const SUPERFICIE_TARJETA = "rounded-card border-hairline bg-surface border";
-/** El hover de la regla 6: solo el borde. Se aplica donde la tarjeta es pulsable. */
-declare const HOVER_TARJETA = "transition-standard hover:border-hairline-hover";
 declare function Card({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
 declare function CardHeader({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
 declare function CardTitle({ className, ...props }: ComponentPropsWithoutRef<'h3'>): react.JSX.Element;
@@ -389,41 +253,40 @@ type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
 declare function Checkbox({ className, ...props }: CheckboxProps): react.JSX.Element;
 
 /**
- * Código en línea, dentro de prosa.
+ * Inline code, inside prose.
  *
- * Existe porque no existía: cada consumidor escribía `<code className="font-mono">`
- * a mano, y la story de marca lo hacía cuatro veces en un solo párrafo. Un
- * `<code>` suelto hereda el tamaño del párrafo, así que dentro de `body` (18px)
- * se veía un mono de 18px que el documento no tiene en ninguna parte.
+ * It exists because it did not: every consumer wrote `<code className="font-mono">`
+ * by hand, and the brand story did it four times in a single paragraph. A bare
+ * `<code>` inherits the paragraph's size, so inside `body` (18px) you saw an
+ * 18px mono that the document has nowhere.
  *
- * No es `CodeBlock`. El bloque es una isla de tema oscuro sobre casco con barra
- * y botón de copiar; esto es una palabra dentro de una frase, y por eso se queda
- * en la superficie de la página en vez de invertir el tema.
+ * It is not `CodeBlock`. The block is an island of dark theme over hull with a
+ * bar and a copy button; this is one word inside a sentence, which is why it
+ * stays on the page surface instead of inverting the theme.
  */
 type CodeProps = ComponentPropsWithoutRef<'code'>;
 declare function Code({ className, ...props }: CodeProps): react.JSX.Element;
 
 type DateFieldProps = Omit<ComponentPropsWithoutRef<'input'>, 'type'> & {
     invalid?: boolean | undefined;
-    /** Añade la hora al campo. Es el `datetime-local` nativo. */
+    /** Adds the time to the field. It is the native `datetime-local`. */
     withTime?: boolean | undefined;
 };
 /**
- * Un campo de fecha sobre el control nativo, no sobre un calendario propio.
+ * A date field on the native control, not on a calendar of our own.
  *
- * Es una decisión deliberada: `react-day-picker` habría sido la primera
- * dependencia pesada de la librería, con su propio CSS y su propia animación de
- * cambio de mes — que el sistema no permite. El control nativo trae gratis el
- * teclado del sistema operativo, el formato según el idioma del usuario y el
- * soporte de lector de pantalla, que es más de lo que un calendario a medida da
- * sin trabajo.
+ * It is a deliberate decision: `react-day-picker` would have been the library's
+ * first heavy dependency, with its own CSS and its own month-change animation —
+ * which the system does not allow. The native control brings the OS keyboard,
+ * the format matching the user's language and screen-reader support for free,
+ * which is more than a bespoke calendar gives without work.
  *
- * Cubre elegir una fecha dentro de un formulario. Un calendario mensual
- * navegable es otra cosa y vive en el proyecto que lo necesita.
+ * It covers picking a date inside a form. A navigable month calendar is a
+ * different thing and lives in the project that needs it.
  *
- * El icono nativo del selector se tiñe con `color-scheme`, que es lo único que
- * el navegador deja controlar: se ata al modo activo para que no aparezca un
- * cuadradito blanco sobre fondo abismo.
+ * The native picker icon is tinted through `color-scheme`, which is the only
+ * thing the browser lets you control: it is tied to the active mode so no little
+ * white square shows up over abyss.
  */
 declare function DateField({ className, invalid, withTime, ...props }: DateFieldProps): react.JSX.Element;
 
@@ -431,7 +294,7 @@ declare const Dialog: react.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 declare function DialogOverlay({ className, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>): react.JSX.Element;
-/** Sin entrada animada: no hay escala ni desplazamiento en el sistema. */
+/** No entrance animation: there is no scale or displacement in the system. */
 declare function DialogContent({ className, children, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Content>): react.JSX.Element;
 declare function DialogHeader({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
 declare function DialogFooter({ className, ...props }: ComponentPropsWithoutRef<'div'>): react.JSX.Element;
@@ -443,7 +306,7 @@ declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuP
 declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSub: react.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
-/** Sin animación de entrada: el menú aparece, no se despliega. */
+/** No entrance animation: the menu appears, it does not unfold. */
 declare function DropdownMenuContent({ className, sideOffset, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>): react.JSX.Element;
 declare function DropdownMenuItem({ className, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>): react.JSX.Element;
 declare function DropdownMenuCheckboxItem({ className, children, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>): react.JSX.Element;
@@ -454,7 +317,7 @@ declare function DropdownMenuSubTrigger({ className, children, ...props }: Compo
 declare function DropdownMenuSubContent({ className, ...props }: ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>): react.JSX.Element;
 
 type InputProps = ComponentPropsWithoutRef<'input'> & {
-    /** Marca el control como inválido y tiñe el borde. */
+    /** Marks the control as invalid and tints the border. */
     invalid?: boolean;
 };
 declare function Input({ className, invalid, ...props }: InputProps): react.JSX.Element;
@@ -474,36 +337,37 @@ declare const Popover: react.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
 /**
- * Radix le pone `role="dialog"` al contenido, y un diálogo sin nombre accesible
- * no le dice nada a quien navega con lector de pantalla. Por eso el tipo exige
- * uno de los dos: `aria-label` con el texto, o `aria-labelledby` apuntando al
- * título que ya se ve en pantalla. No se puede olvidar porque no compila.
+ * Radix puts `role="dialog"` on the content, and a dialog with no accessible
+ * name says nothing to someone navigating with a screen reader. That is why the
+ * type demands one of the two: `aria-label` with the text, or `aria-labelledby`
+ * pointing at the title already visible on screen. It cannot be forgotten
+ * because it does not compile.
  */
-type Etiquetado = {
+type Labelled = {
     'aria-label': string;
     'aria-labelledby'?: never;
 } | {
     'aria-labelledby': string;
     'aria-label'?: never;
 };
-type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & Etiquetado;
-/** Sin animación de entrada: aparece donde va a quedarse, como el resto. */
+type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> & Labelled;
+/** No entrance animation: it appears where it will stay, like the rest. */
 declare function PopoverContent({ className, align, sideOffset, ...props }: PopoverContentProps): react.JSX.Element;
 
 type ProgressProps = ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
     /**
-     * Nombre accesible de la barra. Es obligatorio a propósito: una barra de
-     * progreso sin nombre no dice de qué es el progreso, y ninguna otra parte del
-     * componente puede deducirlo.
+     * The bar's accessible name. It is mandatory on purpose: a progress bar with
+     * no name does not say what the progress is about, and no other part of the
+     * component can deduce it.
      */
     label: string;
-    /** Arena en vez de bioluz, para progreso de curso. */
+    /** Sand instead of biolume, for course progress. */
     tone?: 'accent' | 'warm';
 };
 /**
- * El ancho del indicador cambia, no se anima: el sistema no anima escala ni
- * desplazamiento. `transition-standard` solo cubre color y borde, así que el
- * salto de ancho es inmediato aunque la clase esté puesta.
+ * The indicator's width changes, it is not animated: the system animates neither
+ * scale nor displacement. `transition-standard` only covers color and border, so
+ * the width jump is immediate even with the class in place.
  */
 declare function Progress({ className, value, label, tone, ...props }: ProgressProps): react.JSX.Element;
 
@@ -516,7 +380,7 @@ declare const Select: react.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: react.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & react.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: react.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & react.RefAttributes<HTMLSpanElement>>;
 declare function SelectTrigger({ className, children, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>): react.JSX.Element;
-/** Sin animación de entrada: el menú aparece, no se despliega. */
+/** No entrance animation: the menu appears, it does not unfold. */
 declare function SelectContent({ className, children, position, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Content>): react.JSX.Element;
 declare function SelectLabel({ className, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Label>): react.JSX.Element;
 declare function SelectItem({ className, children, ...props }: ComponentPropsWithoutRef<typeof SelectPrimitive.Item>): react.JSX.Element;
@@ -524,8 +388,8 @@ declare function SelectSeparator({ className, ...props }: ComponentPropsWithoutR
 
 type SeparatorProps = ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>;
 /**
- * `hairline`, no `border`: una división entre contenidos es sutil por
- * definición. Para delimitar un control existe `border`, que es otro token.
+ * `hairline`, not `border`: a division between pieces of content is subtle by
+ * definition. To delimit a control there is `border`, which is another token.
  */
 declare function Separator({ className, orientation, decorative, ...props }: SeparatorProps): react.JSX.Element;
 
@@ -533,14 +397,14 @@ declare const Sheet: react.FC<DialogPrimitive.DialogProps>;
 declare const SheetTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const SheetClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 /**
- * La segunda y última excepción a «nada de desplazamiento», aprobada a
- * sabiendas: un panel que entra desde un borde se desliza por definición, y
- * quieto sería un modal descentrado.
- *
- * Dura `--duration-standard` con `--ease-standard`, o sea lo mismo y con la
- * misma curva que cualquier cambio de color del sistema, así que no introduce
- * un tiempo nuevo. Va detrás de `motion-safe`: quien pidió menos movimiento lo
- * ve aparecer sin deslizarse.
+ * The second and last exception to «no displacement», approved knowingly: a
+ * panel entering from an edge slides by definition, and held still it would be
+ * an off-centre modal.
+ *
+ * It lasts `--duration-standard` with `--ease-standard`, that is, the same time
+ * and the same curve as any color change in the system, so it introduces no new
+ * timing. It sits behind `motion-safe`: whoever asked for less motion sees it
+ * appear without sliding.
  */
 declare const panel: (props?: ({
     side?: "bottom" | "left" | "right" | "top" | null | undefined;
@@ -554,35 +418,36 @@ declare function SheetTitle({ className, ...props }: ComponentPropsWithoutRef<ty
 declare function SheetDescription({ className, ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Description>): react.JSX.Element;
 
 /**
- * Barrido de 1.4s lineal, del documento.
+ * A 1.4s linear sweep, from the document.
  *
- * Es la TERCERA y última excepción a «el sistema no anima», junto al spinner del
- * botón y el panel lateral. Las tres son realimentación de PROGRESO y no de
- * estado, que es el criterio: un bloque quieto y un bloque que nunca va a cargar
- * se ven exactamente igual, y el skeleton existe para decir «esto viene en
- * camino», no «esto está vacío».
+ * It is the THIRD and last exception to «the system does not animate», alongside
+ * the button spinner and the side panel. All three are feedback about PROGRESS
+ * and not about state, which is the criterion: a block that is still and a block
+ * that will never load look exactly the same, and the skeleton exists to say
+ * «this is on its way», not «this is empty».
  *
- * Va detrás de `motion-safe`, así que se apaga solo para quien pidió menos
- * movimiento — y ahí queda el bloque en `surfaceRaised`, que sigue comunicando
- * la forma de lo que va a llegar.
+ * It sits behind `motion-safe`, so it switches itself off for anyone who asked
+ * for less motion — and what is left is the block on `surfaceRaised`, which
+ * still communicates the shape of what is coming.
  *
- * `still` lo apaga a mano, para las tablas largas: veinte filas barriendo a la
- * vez es un estroboscopio, no una carga.
+ * `still` turns it off by hand, for long tables: twenty rows sweeping at once is
+ * a strobe, not a load.
  */
 type SkeletonProps = ComponentPropsWithoutRef<'div'> & {
-    /** Apaga el barrido. Para listas largas, donde muchas a la vez marean. */
+    /** Turns the sweep off. For long lists, where many at once are dizzying. */
     still?: boolean | undefined;
 };
 declare function Skeleton({ className, still, ...props }: SkeletonProps): react.JSX.Element;
 
 type SwitchProps = ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>;
 /**
- * La perilla cambia de posición, pero no se anima al hacerlo: la posición es el
- * estado, no una transición. Lo único que transiciona es el color de la vía.
+ * The knob changes position, but is not animated while doing so: the position IS
+ * the state, not a transition. The only thing that transitions is the track's
+ * color.
  */
 declare function Switch({ className, ...props }: SwitchProps): react.JSX.Element;
 
-/** El contenedor scrollea en horizontal: la página nunca lo hace. */
+/** The container scrolls horizontally: the page never does. */
 declare function Table({ className, ...props }: ComponentPropsWithoutRef<'table'>): react.JSX.Element;
 declare function TableHeader({ className, ...props }: ComponentPropsWithoutRef<'thead'>): react.JSX.Element;
 declare function TableBody({ className, ...props }: ComponentPropsWithoutRef<'tbody'>): react.JSX.Element;
@@ -605,69 +470,72 @@ declare function Textarea({ className, invalid, ...props }: TextareaProps): reac
 
 declare const ToastAction: react.ForwardRefExoticComponent<ToastPrimitive.ToastActionProps & react.RefAttributes<HTMLButtonElement>>;
 declare const toast$1: (props?: ({
-    variant?: "error" | "success" | "neutral" | null | undefined;
+    variant?: "error" | "neutral" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ToastProps = ComponentPropsWithoutRef<typeof ToastPrimitive.Root> & VariantProps<typeof toast$1>;
 
 /**
- * La cara imperativa del `Toast` de Radix: `toast('Guardado')` desde cualquier
- * sitio, sin pasar el aviso por props hasta el componente que lo dispara.
- *
- * Existe porque dos proyectos traían `sonner` para esto. `Toast` cubre el mismo
- * rol y tiene otra forma: Radix es declarativo con proveedor, y para mostrar un
- * aviso desde el `catch` de un `fetch` hay que subir estado hasta donde vive el
- * proveedor. Eso es exactamente lo que `sonner` evita, y es una necesidad real,
- * no una preferencia de API.
- *
- * La alternativa era que los dos proyectos se adaptaran. Se descartó: el aviso
- * lo dispara la capa de datos, que no tiene —ni debería tener— un componente
- * cerca al que subirle un `useState`.
- *
- * Lo que NO se copió de `sonner` es el catálogo entero. No hay `toast.promise`,
- * ni `toast.custom`, ni posiciones configurables, ni apilado con perspectiva:
- * son cuatro variantes de lo mismo y cada una es superficie pública que hay que
- * mantener. Están las tres formas que los proyectos usan de verdad —neutral,
- * éxito, error—, `dismiss` y nada más.
- *
- * El estado vive en un módulo, no en un contexto, porque el punto es que se
- * pueda llamar desde fuera del árbol. `Toaster` se suscribe con
- * `useSyncExternalStore`, que es la forma que React 19 tiene de leer un estado
- * externo sin efectos ni renders en cascada.
+ * The imperative face of Radix's `Toast`: `toast('Guardado')` from anywhere,
+ * without threading the notice through props down to the component that fires
+ * it.
+ *
+ * It exists because two projects were pulling in `sonner` for this. `Toast`
+ * covers the same role and has a different shape: Radix is declarative with a
+ * provider, and to show a notice from a `fetch`'s `catch` you have to lift state
+ * up to where the provider lives. That is exactly what `sonner` avoids, and it
+ * is a real need, not an API preference.
+ *
+ * The alternative was for the two projects to adapt. It was ruled out: the
+ * notice is fired by the data layer, which has no component nearby to hang a
+ * `useState` on — nor should it.
+ *
+ * What was NOT copied from `sonner` is the whole catalogue. There is no
+ * `toast.promise`, no `toast.custom`, no configurable positions, no stacking
+ * with perspective: they are four variations on the same thing and each one is
+ * public surface that has to be maintained. What is here are the three shapes
+ * the projects actually use — neutral, success, error — plus `dismiss`, and
+ * nothing else.
+ *
+ * State lives in a module, not in a context, because the whole point is being
+ * callable from outside the tree. `Toaster` subscribes with
+ * `useSyncExternalStore`, which is React 19's way of reading external state
+ * without effects or cascading renders.
  */
 type ToastVariant = NonNullable<ToastProps['variant']>;
 type ToastOptions = {
-    /** La primera línea, en negrita. Sin ella el aviso es una sola frase. */
+    /** The first line, in bold. Without it the notice is a single sentence. */
     title?: ReactNode;
     description?: ReactNode;
     variant?: ToastVariant;
-    /** Milisegundos en pantalla. `Infinity` lo deja hasta que se cierre a mano. */
+    /** Milliseconds on screen. `Infinity` leaves it until it is closed by hand. */
     duration?: number;
-    /** Un `ToastAction`, si el aviso ofrece deshacer. */
+    /** A `ToastAction`, if the notice offers an undo. */
     action?: ReactNode;
 };
-type Lanzador = {
-    (mensaje: ReactNode, opciones?: ToastOptions): string;
-    success: (mensaje: ReactNode, opciones?: ToastOptions) => string;
-    error: (mensaje: ReactNode, opciones?: ToastOptions) => string;
+type Trigger = {
+    (message: ReactNode, options?: ToastOptions): string;
+    success: (message: ReactNode, options?: ToastOptions) => string;
+    error: (message: ReactNode, options?: ToastOptions) => string;
     dismiss: (id?: string) => void;
 };
 /**
- * Lanza un aviso. Devuelve su id, que es lo que hay que guardar para cerrarlo a
- * mano —el caso de «guardando…» que se reemplaza cuando termina la petición.
+ * Fires a notice. It returns its id, which is what you keep in order to close it
+ * by hand — the «guardando…» case that gets replaced when the request finishes.
  */
-declare const toast: Lanzador;
+declare const toast: Trigger;
 type ToasterProps = {
-    /** Cuánto dura un aviso que no dice lo contrario. */
+    /** How long a notice lasts when it does not say otherwise. */
     duration?: number;
     /**
-     * Nombre del landmark que Radix crea para la región de avisos. Se traduce
-     * porque lo lee un lector de pantalla, y el default de Radix está en inglés.
+     * The name of the landmark Radix creates for the notices region. It is
+     * translated because a screen reader reads it, and Radix's default is in
+     * English.
      */
     label?: string;
 };
 /**
- * Va UNA vez, lo más arriba posible del árbol. Dos `Toaster` montados pintan
- * cada aviso dos veces: la lista es del módulo, no de la instancia.
+ * Mount it ONCE, as high in the tree as possible. Two mounted `Toaster`s paint
+ * every notice twice: the list belongs to the module, not to the instance.
  */
 declare function Toaster({ duration, label }: ToasterProps): react.JSX.Element;
 
@@ -676,126 +544,148 @@ declare const Tooltip: react.FC<TooltipPrimitive.TooltipProps>;
 declare const TooltipTrigger: react.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare function TooltipContent({ className, sideOffset, ...props }: ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>): react.JSX.Element;
 
-declare const texto: (props?: ({
-    variant?: "display" | "h2" | "h3" | "label" | "body" | "h1" | "meta" | "stat" | "lead" | "ui" | "tag" | "chip" | "eyebrow" | null | undefined;
-    tone?: "error" | "accent" | "success" | "warning" | "primary" | "secondary" | "warm" | "muted" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-/** Etiquetas admitidas. La lista es corta a propósito: no es un `div` con estilo. */
-type Etiqueta = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'strong' | 'em' | 'figcaption' | 'caption' | 'legend' | 'dt' | 'dd' | 'li';
-type TextProps = Omit<ComponentPropsWithoutRef<'p'>, 'color'> & VariantProps<typeof texto> & {
-    /** Etiqueta HTML. Por defecto, la que corresponde a la escala. */
-    as?: Etiqueta;
-    /** Renderiza el hijo en vez de crear un elemento, para envolver un enlace. */
+/** Allowed tags. The list is short on purpose: this is not a styled `div`. */
+type Label = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'strong' | 'em' | 'figcaption' | 'caption' | 'legend' | 'dt' | 'dd' | 'li';
+type TextProps = Omit<ComponentPropsWithoutRef<'p'>, 'color'> & VariantProps<typeof text> & {
+    /** HTML tag. Defaults to whichever one matches the scale. */
+    as?: Label;
+    /** Renders the child instead of creating an element, to wrap a link. */
     asChild?: boolean;
     /**
-     * Corta la línea a 68ch. Activo por defecto en `body`, que es la única
-     * escala pensada para leerse en párrafos largos.
+     * Clamps the line to 68ch. On by default for `body`, the only scale meant
+     * to be read in long paragraphs.
      */
     measure?: boolean;
 };
 declare function Text({ className, variant, tone, as, asChild, measure, children, ...props }: TextProps): react.JSX.Element;
 
-type TarjetaProps = ComponentPropsWithoutRef<'a'> & {
+/**
+ * The shared shell of the cards. The class list lives in `variants/card.ts`,
+ * which brings no React, so `links` can read it instead of copying it.
+ */
+type CardShellProps = ComponentPropsWithoutRef<'a'> & {
     /**
-     * Renderiza el hijo en vez de un `<a>`. Es como se enchufa el `Link` de Next
-     * o de Astro sin que la librería dependa de ningún enrutador.
+     * Renders the child instead of an `<a>`. It is how Next's or Astro's `Link`
+     * plugs in without the library depending on any router.
      */
     asChild?: boolean | undefined;
     children: ReactNode;
 };
 
-type ArticleCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
+type ArticleCardProps = Omit<CardShellProps, 'children' | 'title'> & {
     title: ReactNode;
-    /** Entradilla. Se corta a dos líneas para que la rejilla no se desalinee. */
+    /** Standfirst. Clamped to two lines so the grid does not fall out of line. */
     excerpt?: ReactNode;
-    /** Fecha ya formateada por el proyecto: la librería no impone locale. */
+    /** Date already formatted by the project: the library imposes no locale. */
     date?: ReactNode;
-    /** Valor de `datetime` del `<time>`, en ISO. */
+    /** The `<time>` element's `datetime` value, in ISO. */
     dateTime?: string | undefined;
     readingMinutes?: number | undefined;
     tags?: readonly string[] | undefined;
     /**
-     * Nivel del titular. `h3` por defecto: una tarjeta suelta en una rejilla no
-     * gana el nivel que su posición no le da.
+     * The headline level. `h3` by default: a lone card in a grid does not earn a
+     * level its position does not give it.
      *
-     * Acotado a dos valores a propósito. La página de listado —donde las tarjetas
-     * SÍ son el encabezado principal de la sección— necesita `h2`, y esa
-     * intención se perdía con la constante; abrirlo hasta `h4` o `h5`, en cambio,
-     * es invitar a saltarse niveles, que es el fallo que la constante evitaba.
+     * Restricted to two values on purpose. The listing page — where the cards ARE
+     * the section's main heading — needs `h2`, and that intent was lost with a
+     * constant; opening it up to `h4` or `h5`, on the other hand, is an invitation
+     * to skip levels, which is the failure the constant was preventing.
      */
     headingLevel?: 2 | 3;
+    /**
+     * Renders each tag through the child, so an E2E suite can reach it.
+     *
+     * The tags are the one composed part a project could not get at: they arrive
+     * as strings and the component turns them into badges, so a test had to select
+     * them by structure — `article > div > span` — or by a style class. The second
+     * one already broke the blog's suite once, because a style class is not a
+     * contract: it changes when the style changes.
+     *
+     * The library keeps the classes and the rule — a tag is a category pill, and
+     * that does not become negotiable — and hands over only the element and its
+     * attributes:
+     *
+     *     tagAsChild={({ tag }) => <span data-testid={`tag-${tag}`}>{tag}</span>}
+     *
+     * It is the shape `linkAsChild` already has in `Breadcrumb` and
+     * `TableOfContents`, and it is deliberately the same: one idiom for «the
+     * project supplies the element, the library supplies the styling».
+     */
+    tagAsChild?: ((props: {
+        tag: string;
+        children: ReactNode;
+    }) => ReactNode) | undefined;
 };
 /**
- * La línea de metadatos va en `meta` y no en `eyebrow`: `18 ago 2026 · 8 min de
- * lectura` es un dato, no un antetítulo, y en versalitas no era ninguna de las
- * dos cosas.
+ * The metadata line uses `meta` and not `eyebrow`: `18 ago 2026 · 8 min de
+ * lectura` is a datum, not an overline, and in small caps it was neither.
  *
- * Los tags son la familia CATEGORÍA — píldora de arena en minúscula —, no la de
- * estado. Un slug es lo que se lee `engineering-culture`.
+ * The tags are the CATEGORY family — a lowercase sand pill — not the status one.
+ * A slug is something you read as `engineering-culture`.
  */
-declare function ArticleCard({ title, excerpt, date, dateTime, readingMinutes, tags, headingLevel, className, ...props }: ArticleCardProps): react.JSX.Element;
+declare function ArticleCard({ title, excerpt, date, dateTime, readingMinutes, tags, headingLevel, tagAsChild, className, ...props }: ArticleCardProps): react.JSX.Element;
 
 /**
- * La firma al pie del artículo: avatar 52px, nombre 15/500 y el rol en mono
- * muted. Tres datos, ni uno más.
+ * The byline at the foot of the article: 52px avatar, 15/500 name and the role
+ * in muted mono. Three data points, not one more.
  *
- * NO recibe cara de mascota, y no es un descuido: es la misma regla que
- * `PageHeader`. Una cara aquí sería humor en el sitio donde el lector está
- * decidiendo si el autor sabe de lo que habla — justo lo que el contrato del
- * manual excluye.
+ * It does NOT take a mascot face, and that is not an oversight: it is the same
+ * rule as `PageHeader`. A face here would be humour in the exact place where the
+ * reader is deciding whether the author knows what they are talking about —
+ * precisely what the manual's contract excludes.
  *
- * El avatar del manual es la cabeza dentro de un círculo azul tiburón sólido,
- * nunca la cara expresiva suelta.
+ * The manual's avatar is the head inside a solid shark-blue circle, never the
+ * expressive face on its own.
  */
 type AuthorCardProps = Omit<ComponentPropsWithoutRef<'div'>, 'role'> & {
     name: string;
-    /** El rol. Va en mono: es un dato, no una frase. */
+    /** The role. It goes in mono: it is a datum, not a sentence. */
     role?: ReactNode;
-    /** URL del avatar. Sin ella se muestran las iniciales. */
+    /** The avatar's URL. Without it the initials are shown. */
     src?: string | undefined;
-    /** Una o dos frases. Se corta a 68ch sola. */
+    /** One or two sentences. It clamps itself to 68ch. */
     bio?: ReactNode;
-    /** Enlaces o botón de contacto. */
+    /** Links or a contact button. */
     action?: ReactNode;
 };
 declare function AuthorCard({ name, role, src, bio, action, className, ...props }: AuthorCardProps): react.JSX.Element;
 
 /**
- * Migrado desde `eduardoalvarez.dev/src/components/audio-player/index.tsx`.
+ * Migrated from `eduardoalvarez.dev/src/components/audio-player/index.tsx`.
  *
- * La lógica no se reescribió: los tres modos, el reproductor flotante, los
- * saltos de ±15s, el ciclo de velocidad 1 → 1.25 → 1.5 → 1.75 → 2 y el volumen
- * con mute son los mismos. Lo que cambió es la piel y las dos dependencias que
- * un paquete no puede tener:
+ * The logic was not rewritten: the three modes, the floating player, the ±15s
+ * skips, the 1 → 1.25 → 1.5 → 1.75 → 2 speed cycle and the volume with mute are
+ * the same. What changed is the skin and the two dependencies a package cannot
+ * have:
  *
- * - `Icon` del portafolio → los glifos viven ahora en `src/lib/glyphs.tsx`,
- *   con los mismos trazados.
- * - `trackEvent` de analítica → la prop `onFirstPlay`, que el consumidor
- *   conecta a lo que use. Sigue disparándose una sola vez por carga.
+ * - the portfolio's `Icon` → the glyphs now live in `src/lib/glyphs.tsx`, with
+ *   the same paths.
+ * - analytics' `trackEvent` → the `onFirstPlay` prop, which the consumer wires
+ *   to whatever they use. It still fires exactly once per load.
  *
- * Y tres cosas que el sistema no permite:
+ * And three things the system does not allow:
  *
- * - La onda ya no anima `scaleY`. Las barras siguen ahí y siguen distinguiendo
- *   reproducción de pausa por opacidad, pero no escalan.
- * - El reproductor flotante aparece y desaparece en vez de deslizarse.
- * - La barra de progreso ya no interpola el ancho.
+ * - The waveform no longer animates `scaleY`. The bars are still there and still
+ *   tell playback from pause by opacity, but they do not scale.
+ * - The floating player appears and disappears instead of sliding.
+ * - The progress bar no longer interpolates its width.
  *
- * El giro del spinner de carga se queda, con la misma justificación que en
- * `Button`: es realimentación de progreso, no de estado, y va en `motion-safe`.
+ * The loading spinner's spin stays, with the same justification as in `Button`:
+ * it is feedback about progress, not about state, and it sits in `motion-safe`.
  */
 type AudioPlayerMode = 'full' | 'compact' | 'banner';
 type AudioPlayerProps = {
     src: string;
     title?: string;
     /**
-     * `full` para páginas de podcast, `compact` para barras laterales y `banner`
-     * para artículos con narración. `compact` y `banner` traen además el
-     * reproductor flotante cuando el estático sale de vista.
+     * `full` for podcast pages, `compact` for sidebars and `banner` for articles
+     * with narration. `compact` and `banner` also bring the floating player when
+     * the static one leaves the viewport.
      */
     mode?: AudioPlayerMode | undefined;
     /**
-     * Se llama una sola vez por carga, la primera vez que el audio arranca.
-     * Aquí es donde el proyecto engancha su analítica; la librería no la trae.
+     * Called once per load, the first time the audio starts.
+     * This is where the project hooks up its analytics; the library ships none.
      */
     onFirstPlay?: ((title?: string) => void) | undefined;
 };
@@ -803,44 +693,44 @@ declare function AudioPlayer({ src, title, mode, onFirstPlay }: AudioPlayerProps
 
 type BlockquoteProps = Omit<ComponentPropsWithoutRef<'blockquote'>, 'cite'> & {
     children: ReactNode;
-    /** Quién lo dijo. Se marca como `<cite>`. */
+    /** Who said it. Marked up as `<cite>`. */
     author?: ReactNode;
-    /** Dónde lo dijo: charla, artículo, conversación. */
+    /** Where they said it: a talk, an article, a conversation. */
     source?: ReactNode;
 };
 /**
- * La barra lateral es `accent`, que es el color interactivo, porque una cita es
- * la voz de otro entrando en el texto. No lleva comillas decorativas: los
- * glifos del sistema son SVG y una comilla de adorno no aporta nada que el
- * borde y la sangría no digan ya.
+ * The side bar is `accent`, the interactive color, because a quotation is
+ * somebody else's voice entering the text. It carries no decorative quote marks:
+ * the system's glyphs are SVG, and an ornamental quote adds nothing the border
+ * and the indent do not already say.
  */
 declare function Blockquote({ children, author, source, className, ...props }: BlockquoteProps): react.JSX.Element;
 
 /**
- * La ruta como una ruta: `~ / artículos / cómo-escalar-un-equipo`.
+ * The path as a path: `~ / artículos / cómo-escalar-un-equipo`.
  *
- * El `~` no es decoración ni un icono de casa: es el home del sistema de
- * archivos, y por eso el breadcrumb es mono y no sans. Los separadores van en
- * `border` (#22414F), que es el token más tenue que sigue leyéndose como línea.
+ * The `~` is neither decoration nor a house icon: it is the filesystem's home,
+ * which is why the breadcrumb is mono and not sans. The separators use `border`
+ * (#22414F), the faintest token that still reads as a line.
  *
- * El último tramo es la página actual, así que no es un enlace y lleva
- * `aria-current="page"`. Es la diferencia entre una miga de pan accesible y
- * cuatro enlaces seguidos, uno de los cuales no va a ninguna parte.
+ * The last crumb is the current page, so it is not a link and carries
+ * `aria-current="page"`. That is the difference between an accessible breadcrumb
+ * and four consecutive links, one of which goes nowhere.
  */
-type Migaja = {
+type Crumb = {
     label: ReactNode;
-    /** Sin `href`, el tramo es texto. El último nunca debería llevarlo. */
+    /** With no `href`, the crumb is text. The last one should never carry it. */
     href?: string | undefined;
 };
 type BreadcrumbProps = Omit<ComponentPropsWithoutRef<'nav'>, 'children'> & {
-    items: readonly Migaja[];
-    /** Destino del `~`. Por defecto, la raíz del sitio. */
+    items: readonly Crumb[];
+    /** Where the `~` goes. The site root by default. */
     homeHref?: string;
-    /** Etiqueta accesible del `~`, que si no se lee como una tilde suelta. */
+    /** Accessible label for the `~`, which otherwise reads as a stray tilde. */
     homeLabel?: string;
     /**
-     * Renderiza los enlaces con el hijo, para enchufar el `Link` de Next o Astro.
-     * Recibe cada `href` en el `props` del Slot.
+     * Renders the links through the child, to plug in Next's or Astro's `Link`.
+     * It receives each `href` in the Slot's `props`.
      */
     linkAsChild?: ((props: {
         href: string;
@@ -850,148 +740,176 @@ type BreadcrumbProps = Omit<ComponentPropsWithoutRef<'nav'>, 'children'> & {
 declare function Breadcrumb({ items, homeHref, homeLabel, linkAsChild, className, ...props }: BreadcrumbProps): react.JSX.Element;
 
 /**
- * `brand.hull` es «casco · contorno y fondo de bloques de código», así que un
- * bloque de código es oscuro también en modo claro. Por eso la raíz declara
- * `data-theme="dark"`: todo lo de dentro — tinta, hairline, acento — pasa a la
- * paleta oscura sin importar el tema de la página. Es la única isla de tema
- * invertido del sistema, y es deliberada.
+ * `brand.hull` is «hull · outline and the background of code blocks», so a code
+ * block is dark in light mode too. That is why the root declares
+ * `data-theme="dark"`: everything inside — ink, hairline, accent — switches to
+ * the dark palette regardless of the page's theme. It is the system's only
+ * island of inverted theme, and it is deliberate.
  */
 type CodeBlockProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
-    /** El código ya resaltado, o texto plano. */
+    /** The already-highlighted code, or flat text. */
     children: ReactNode;
-    /** Etiqueta del lenguaje. Se muestra en la barra superior. */
+    /** The language label. Shown in the top bar. */
     language?: string | undefined;
-    /** Texto que se copia al portapapeles. Sin esto, no se muestra el botón. */
+    /** The text copied to the clipboard. Without it, the button is not shown. */
     copyText?: string | undefined;
 };
 declare function CodeBlock({ children, language, copyText, className, ...props }: CodeBlockProps): react.JSX.Element;
 
-type CourseCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
+type CourseCardProps = Omit<CardShellProps, 'children' | 'title'> & {
     title: ReactNode;
     summary?: ReactNode;
-    /** Nivel, duración, número de lecciones: lo que el proyecto quiera listar. */
+    /** Level, duration, number of lessons: whatever the project wants to list. */
     meta?: readonly ReactNode[] | undefined;
-    /** Etiqueta de estado: «próximamente», «gratis», «nuevo». */
+    /** Status label: «próximamente», «gratis», «nuevo». */
     status?: ReactNode;
     /**
-     * Porcentaje cursado. Solo tiene sentido para quien ya está inscrito; cuando
-     * se pasa, la barra va en arena, que es el color del progreso de curso.
+     * Percentage completed. It only makes sense for someone already enrolled;
+     * when passed, the bar goes in sand, which is the color of course progress.
      */
     progress?: number | undefined;
 };
 declare function CourseCard({ title, summary, meta, status, progress, className, ...props }: CourseCardProps): react.JSX.Element;
 
 /**
- * La regla más importante de la mascota, por fin como código.
- *
- * `catalogo.ts` y `page-header/index.tsx` la citaban los dos —«por eso
- * `EmptyState` recibe una cara y `PageHeader` no»— y el componente no existía,
- * así que la regla vivía en un comentario sobre un componente fantasma. Desde
- * que la story de marca repite la frase, además, era una promesa publicada.
- *
- * `expresion` es OBLIGATORIA y no opcional: un estado vacío sin cara es la mitad
- * del componente. Es el único sitio, junto con el 404, el error de servidor, el
- * progreso de curso, la celebración, el toast y el «sin spam» del newsletter,
- * donde una cara puede aparecer.
+ * The mascot's most important rule, finally as code.
+ *
+ * `catalog.ts` and `page-header/index.tsx` both cited it — «that is why
+ * `EmptyState` takes a face and `PageHeader` does not» — and the component did
+ * not exist, so the rule lived in a comment about a ghost component. Once the
+ * brand story started repeating the sentence, it was also a published promise.
+ *
+ * `page` keeps that rule intact and `expression` stays MANDATORY there: an empty
+ * state that IS the screen without a face is half the component. It is the only
+ * place, alongside the 404, the server error, course progress, celebration, the
+ * toast and the newsletter's «sin spam», where a face may appear.
+ *
+ * `inline` is the other situation, and it is a different one rather than a
+ * smaller one: the hole inside a table page or a dashboard widget, competing with
+ * a dozen elements around it. An admin panel has twenty of those on one screen,
+ * and twenty faces is not the humour contract, it is a zoo. The variant carries
+ * no face, and the type does not let one through. See `docs/decisions.md` § 27.
  */
-type EmptyStateProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
-    /** La cara. Obligatoria: sin ella esto es un párrafo centrado. */
-    expresion: Cara;
+type EmptyStateBase = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
     title: ReactNode;
-    /** Una línea explicando qué falta o qué hacer. */
+    /** One line explaining what is missing or what to do. */
     description?: ReactNode;
-    /** La acción que saca del estado vacío. Normalmente un botón terciario. */
+    /** The action that gets you out of the empty state. Usually a tertiary button. */
     action?: ReactNode;
-    /** Dónde se sirven los PNG de la marca. */
-    basePath?: string | undefined;
 };
-declare function EmptyState({ expresion, title, description, action, basePath, className, ...props }: EmptyStateProps): react.JSX.Element;
+type EmptyStateProps = EmptyStateBase & ({
+    /** `page`, the default: the empty state IS the screen or the section, and it carries the face. */
+    variant?: 'page' | undefined;
+    /**
+     * The face. Mandatory on `page` and impossible on `inline` — the props
+     * are a union, so the generated table cannot show a per-variant «req.»
+     * and the sentence has to carry it. Without it, `page` is a centred
+     * paragraph.
+     */
+    expression: Face;
+    /** Where the brand PNGs are served from. */
+    basePath?: string | undefined;
+    icon?: never;
+} | {
+    /** `inline`: the hole inside a table or a widget. No face, and no way to pass one. */
+    variant: 'inline';
+    /**
+     * A glyph above the line. It measures 1em and inherits `currentColor`,
+     * like `Stat`'s: the project passes its own and sizes it, because the
+     * system has no icon library and is not getting one.
+     */
+    icon?: ReactNode;
+    expression?: never;
+    basePath?: never;
+});
+declare function EmptyState(props: EmptyStateProps): react.JSX.Element;
 
 /**
- * El calendario con eventos: verlos, crearlos, editarlos y borrarlos.
+ * The calendar with events: seeing them, creating, editing and deleting them.
  *
- * `Calendar` es la primitiva y sigue siendo una rejilla de fechas: sirve para
- * ELEGIR un día y no sabe nada de contenido. Esto es la agenda, y por eso vive
- * en `components/` y no al lado de aquella — tiene estado, tiene formulario y
- * codifica cómo se ve un día con cosas dentro.
+ * `Calendar` is the primitive and remains a grid of dates: it serves to PICK a
+ * day and knows nothing about content. This is the schedule, which is why it
+ * lives in `components/` and not next to that one — it has state, it has a form
+ * and it encodes what a day with things in it looks like.
  *
- * Es presentacional, como el resto de la librería: recibe `events` y emite
- * `onCreateEvent`, `onUpdateEvent` y `onDeleteEvent`. No guarda nada, no llama a
- * ninguna API y no genera ids — el id lo pone quien persiste, porque es quien
- * sabe si viene de una base de datos o de un fichero.
+ * It is presentational, like the rest of the library: it takes `events` and
+ * emits `onCreateEvent`, `onUpdateEvent` and `onDeleteEvent`. It stores nothing,
+ * calls no API and generates no ids — the id is set by whoever persists,
+ * because they are the one who knows whether it comes from a database or a file.
  *
- * DOS COLUMNAS y no un popover sobre el día. El popover es lo que hace todo el
- * mundo y esconde el contenido detrás de un clic: con la lista al lado, un mes
- * con quince eventos se lee de un vistazo y el día seleccionado no tapa la
- * rejilla. En pantalla estrecha se apilan.
+ * TWO COLUMNS and not a popover over the day. The popover is what everyone does
+ * and it hides the content behind a click: with the list beside it, a month with
+ * fifteen events reads at a glance and the selected day does not cover the grid.
+ * On a narrow screen they stack.
  *
- * El borrado pasa por `AlertDialog` y no por un botón directo. Es exactamente el
- * caso para el que existe: una acción destructiva sin deshacer.
+ * Deleting goes through `AlertDialog` and not through a direct button. It is
+ * precisely the case it exists for: a destructive action with no undo.
  */
-type EventoCalendario = {
-    /** Lo pone el proyecto. La librería nunca lo inventa. */
+type CalendarEvent = {
+    /** Set by the project. The library never invents it. */
     id: string;
-    /** Cuándo empieza, con hora. */
+    /** When it starts, with a time. */
     start: Date;
     title: string;
-    /** `warm` cuando el evento es el problema, igual que en `Stat`. */
+    /** `warm` when the event is the problem, same as in `Stat`. */
     tone?: 'accent' | 'warm' | undefined;
 };
 type EventCalendarProps = Omit<ComponentPropsWithoutRef<'div'>, 'onSelect' | 'children'> & {
-    events: readonly EventoCalendario[];
-    /** Sin él, la agenda es de solo lectura y no se pinta el formulario. */
-    onCreateEvent?: ((evento: Omit<EventoCalendario, 'id'>) => void) | undefined;
-    onUpdateEvent?: ((evento: EventoCalendario) => void) | undefined;
+    events: readonly CalendarEvent[];
+    /** Without it, the schedule is read-only and the form is not painted. */
+    onCreateEvent?: ((event: Omit<CalendarEvent, 'id'>) => void) | undefined;
+    onUpdateEvent?: ((event: CalendarEvent) => void) | undefined;
     onDeleteEvent?: ((id: string) => void) | undefined;
-    /** Día seleccionado, si el proyecto lo controla. Sin él, empieza en hoy. */
+    /** Selected day, if the project controls it. Without it, it starts on today. */
     selected?: Date | undefined;
-    onSelectDay?: ((dia: Date) => void) | undefined;
-    /** Encabezado del panel. Por defecto, `es` de date-fns, como `Calendar`. */
-    formatDay?: ((dia: Date) => string) | undefined;
-    formatTime?: ((fecha: Date) => string) | undefined;
-    /** Texto del panel cuando el día elegido no tiene nada. */
+    onSelectDay?: ((day: Date) => void) | undefined;
+    /** The panel's heading. Defaults to date-fns' `es`, like `Calendar`. */
+    formatDay?: ((day: Date) => string) | undefined;
+    formatTime?: ((date: Date) => string) | undefined;
+    /** The panel's text when the chosen day has nothing on it. */
     emptyMessage?: ReactNode;
 };
 declare function EventCalendar({ events, onCreateEvent, onUpdateEvent, onDeleteEvent, selected, onSelectDay, formatDay, formatTime, emptyMessage, className, ...props }: EventCalendarProps): react.JSX.Element;
 
 /**
- * El pie, y la firma CLI del sitio: `$ cd ~/eduardoalvarez.dev/2026`.
+ * The footer, and the site's CLI signature: `$ cd ~/eduardoalvarez.dev/2026`.
  *
- * El dominio sale de `naming.domain` y no de una cadena escrita a mano, por la
- * misma razón que el wordmark: si cambia, cambia en los cinco proyectos a la
- * vez.
+ * The domain comes from `naming.domain` and not from a hand-written string, for
+ * the same reason as the wordmark: if it changes, it changes in all five
+ * projects at once.
  *
- * Los enlaces de redes son iconos SIN texto visible, así que `aria-label` no es
- * una mejora: es lo único que los hace legibles. Por eso es obligatorio en el
- * tipo y no una prop opcional que se olvide.
+ * The social links are icons with NO visible text, so `aria-label` is not an
+ * improvement: it is the only thing that makes them legible. Which is why it is
+ * mandatory in the type and not an optional prop that gets forgotten.
  *
- * La firma va arriba a la derecha, al nivel de la PRIMERA fila que exista, no
- * al final del bloque. Es una decisión de composición y no de estilo: el pie
- * puede llevar marca, enlaces y redes, y colgar la firma de una fila concreta
- * la hunde en cuanto esa fila deja de ser la primera.
+ * The signature sits top right, level with the FIRST row that exists, not at the
+ * end of the block. That is a composition decision and not a styling one: the
+ * footer can carry brand, links and social icons, and hanging the signature off
+ * one specific row sinks it the moment that row stops being the first.
  */
-type Red = {
-    /** Lo que reemplaza al texto visible. Obligatorio. */
+type SocialLink = {
+    /** What replaces the visible text. Mandatory. */
     label: string;
     href: string;
     /**
-     * El glifo, a 19px. Las marcas van en SÓLIDO (`fill`) y los iconos
-     * funcionales en trazo de 1.6. Nunca un emoji.
+     * The glyph, at 19px. Brands are SOLID (`fill`) and functional icons use a 1.6
+     * stroke. Never an emoji.
      */
     icon: ReactNode;
 };
 type FooterProps = ComponentPropsWithoutRef<'footer'> & {
-    social?: readonly Red[];
-    /** Año de la firma. */
+    social?: readonly SocialLink[];
+    /** The signature's year. */
     year?: number;
-    /** Enlaces de texto: aviso legal, RSS, mapa del sitio. */
+    /** Text links: legal notice, RSS, sitemap. */
     children?: ReactNode;
     /**
-     * La fila de marca: la aleta y el wordmark, arriba del todo.
+     * The brand row: the fin and the wordmark, at the very top.
      *
-     * Existe porque sin ella acababa metida en `children` con un `w-full` para
-     * que se llevara su propia línea. Funcionaba y era un apaño: la marca no es
-     * un enlace de texto más, y una ranura propia lo dice en el tipo.
+     * It exists because without it that row ended up inside `children` with a
+     * `w-full` so it would take a line of its own. It worked and it was a patch:
+     * the brand is not one more text link, and a slot of its own says so in the
+     * type.
      */
     brand?: ReactNode;
 };
@@ -1002,413 +920,638 @@ type FooterLinkProps = ComponentPropsWithoutRef<'a'> & {
 declare function FooterLink({ asChild, className, ...props }: FooterLinkProps): react.JSX.Element;
 
 /**
- * UNO por sitio. Es la única pieza del sistema que se gasta como el botón de
- * conversión, y por la misma razón: si hay dos, no hay ninguno.
- *
- * Degradado, radio de panel, texto al 62 % del ancho y la pose sangrando por el
- * borde inferior derecho. Eso es la variante `cabecera`, que es el defecto.
- *
- * En móvil no hay borde por el que sangrar, así que la pose baja al flujo, bajo
- * los botones. No es un `hidden` en pantalla pequeña: la pose es el 40 % de la
- * personalidad del hero.
- *
- * La otra variante es `centrado`, y existe porque la regla de arriba tiene un
- * caso donde no aplica. «Nunca centrada» se escribió contra el hero de una
- * página con más contenido debajo: ahí una mascota centrada bajo el titular es
- * una ilustración de portada, no una cabecera. Pero una página de enlaces es
- * centrada de extremo a extremo y la mascota es el protagonista, no el remate.
- * Ese proyecto se saltaba `Hero` entero por esto, que es peor: una regla
- * declarada y con nombre se discute; una copia del degradado en otro repo se
- * desincroniza. La pose va ARRIBA del titular, no debajo, para que siga sin
- * leerse como la ilustración que cierra un bloque de texto.
- *
- * El degradado viene de `--gradient-hero`, así que sigue el modo. No hay ángulo
- * escrito a mano en ningún proyecto.
+ * ONE per site. It is the only piece in the system that is spent like the
+ * conversion button, and for the same reason: if there are two, there are none.
+ *
+ * Gradient, panel radius, text at 62 % of the width and the pose bleeding off
+ * the bottom-right corner. That is the `header` variant, which is the default.
+ *
+ * On mobile there is no edge to bleed off, so the pose drops into the flow,
+ * below the buttons. It is not a `hidden` on small screens: the pose is 40 % of
+ * the hero's personality.
+ *
+ * The other variant is `centered`, and it exists because the rule above has a
+ * case where it does not apply. «Never centred» was written against the hero of
+ * a page with more content below it: there, a centred mascot under the headline
+ * is a cover illustration, not a header. But a links page is centred end to end
+ * and the mascot is the protagonist, not the flourish. That project skipped
+ * `Hero` entirely over this, which is worse: a declared rule with a name can be
+ * argued with; a copy of the gradient in another repo just drifts. The pose goes
+ * ABOVE the headline, not below it, so it still does not read as the
+ * illustration closing a block of text.
+ *
+ * The gradient comes from `--gradient-hero`, so it follows the mode. There is no
+ * hand-written angle in any project.
  */
 type HeroProps = Omit<ComponentPropsWithoutRef<'section'>, 'title'> & {
     title: ReactNode;
-    /** Mono, versalitas, en acento. */
+    /** Mono, small caps, in accent. */
     eyebrow?: ReactNode;
     description?: ReactNode;
-    /** Los botones. Aquí va el único `conversion` de la pantalla. */
+    /** The buttons. The screen's only `conversion` goes here. */
     action?: ReactNode;
-    /** La pose de Tiburoncín. Sin ella el hero es un panel con texto. */
+    /** Tiburoncín's pose. Without it the hero is a panel with text. */
     pose?: Pose | undefined;
     basePath?: string | undefined;
     /**
-     * `cabecera` sangra la pose por la esquina; `centrado` la pone arriba y
-     * centra el texto, para una página que es solo esto.
+     * `header` bleeds the pose off the corner; `centered` puts it on top and
+     * centres the text, for a page that is only this.
      */
-    variant?: 'cabecera' | 'centrado';
+    variant?: 'header' | 'centered';
 };
 declare function Hero({ title, eyebrow, description, action, pose, basePath, variant, className, ...props }: HeroProps): react.JSX.Element;
 
-type LinkRowProps = Omit<TarjetaProps, 'children'> & {
+type LinkRowProps = Omit<CardShellProps, 'children'> & {
     name: ReactNode;
     description?: ReactNode;
-    /** Glifo SVG del destino. Nunca un emoji. */
+    /** The target's SVG glyph. Never an emoji. */
     icon?: ReactNode;
-    /** Marca el enlace como externo: añade la flecha y el `rel` seguro. */
+    /** Marks the link as external: adds the arrow and the safe `rel`. */
     external?: boolean | undefined;
 };
 /**
- * Migrado desde `links/src/components/Card.astro`. El original escalaba la
- * tarjeta al 102 %, subía el título un píxel y giraba y agrandaba el icono en
- * hover — cuatro movimientos que el sistema no permite. Aquí el hover cambia el
- * borde y el color del icono, y nada más.
+ * Migrated from `links/src/components/Card.astro`. The original scaled the card
+ * to 102 %, lifted the title by a pixel and rotated and enlarged the icon on
+ * hover — four movements the system does not allow. Here the hover changes the
+ * border and the icon's color, and nothing else.
  */
 declare function LinkRow({ name, description, icon, external, className, ...props }: LinkRowProps): react.JSX.Element;
 
 /**
- * La barra del sitio: 64px, abismo al 86 % y desenfoque de 14px detrás.
- *
- * Es composición de página y no un primitivo, pero vive en la librería por una
- * razón concreta: la estética CLI de los items —mono, formato `./sección`— es lo
- * primero que se desincroniza cuando cinco proyectos la reescriben cada uno por
- * su cuenta.
- *
- * Renderiza `<header>` colgando directamente del `body`, así que ES el landmark
- * `banner` del sitio. Por eso `PageHeader` va dentro de `<main>` y no es
- * landmark: dos banners en una página son un fallo de accesibilidad.
- *
- * Los items van a la DERECHA, pegados a las acciones, no a continuación de la
- * marca. Con la marca a la izquierda y los items justo detrás, el bloque de
- * navegación queda flotando en medio de la barra y el ojo tiene que cruzar el
- * hueco dos veces: una para leer la marca y otra para volver a buscar la
- * sección. Agrupados a la derecha, marca y navegación son dos anclas y no tres.
+ * The site bar: 64px, abyss at 86 % and a 14px blur behind it — 56 when it
+ * shares the screen with a sidebar.
+ *
+ * It is page composition and not a primitive, but it lives in the library for a
+ * concrete reason: the CLI aesthetic of the items — mono, `./section` format —
+ * is the first thing that drifts when five projects each rewrite it on their
+ * own.
+ *
+ * It renders a `<header>` hanging directly off the `body`, so it IS the site's
+ * `banner` landmark. That is why `PageHeader` goes inside `<main>` and is not a
+ * landmark: two banners on one page is an accessibility failure.
+ *
+ * The items go on the RIGHT, next to the actions, not straight after the brand.
+ * With the brand on the left and the items right behind it, the navigation block
+ * floats in the middle of the bar and the eye has to cross the gap twice: once
+ * to read the brand and once to come back and find the section. Grouped on the
+ * right, brand and navigation are two anchors instead of three.
+ *
+ * `brand` and `actions` are `ReactNode` slots and they are the answer to almost
+ * everything an app shell asks for: a `~/cursos` wordmark goes in `brand`, and a
+ * user menu or a «Entrar» button goes in `actions`. Session state does not get a
+ * prop of its own — it is project infrastructure, which is the third clause of
+ * the criterion that decides what enters this library. See `docs/decisions.md`
+ * § 30.
  */
 type NavProps = ComponentPropsWithoutRef<'header'> & {
-    /** El logo, a la izquierda. */
+    /** The logo, on the left. */
     brand?: ReactNode;
-    /** Los items de sección. Van a la derecha, pegados a `actions`. */
+    /** The section items. They go on the right, next to `actions`. */
     children?: ReactNode;
-    /** Acciones a la derecha: conversión, cambio de tema, buscar. */
+    /** Actions on the right: conversion, theme switch, search. */
     actions?: ReactNode;
+    /**
+     * `compact` is 56px instead of 64, for a bar that shares the screen with a
+     * sidebar: at 64 the two compete for the same corner and together they eat the
+     * top of the content area.
+     *
+     * It is a prop and not a `className` because the height lives on the inner
+     * container, which never sees one — `className` reaches the `<header>` and
+     * stops there. Passing `h-14` from outside did nothing, silently, which is the
+     * kind of failure this repo writes checks for.
+     */
+    size?: 'default' | 'compact' | undefined;
 };
-declare function Nav({ brand, children, actions, className, ...props }: NavProps): react.JSX.Element;
+declare function Nav({ brand, children, actions, size, className, ...props }: NavProps): react.JSX.Element;
 type NavItemProps = ComponentPropsWithoutRef<'a'> & {
-    /** Sección actual: bioluz con subrayado de 1px. */
+    /** Current section: biolume with a 1px underline. */
     active?: boolean | undefined;
-    /** Renderiza el hijo en vez de un `<a>`, para el `Link` del enrutador. */
+    /** Renders the child instead of an `<a>`, for the router's `Link`. */
     asChild?: boolean | undefined;
 };
 /**
- * El `./` lo pone el componente, no quien lo usa.
+ * The `./` is put there by the component, not by whoever uses it.
  *
- * Es la misma decisión que el botón terciario: el formato es parte de la pieza,
- * no una convención que haya que recordar en cinco proyectos. Va `aria-hidden`,
- * así que un lector de pantalla anuncia «artículos» y no «punto barra
+ * It is the same decision as the tertiary button: the format is part of the
+ * piece, not a convention to be remembered across five projects. It is
+ * `aria-hidden`, so a screen reader announces «artículos» and not «dot slash
  * artículos».
  *
- * La sección actual va entre CORCHETES además de en bioluz y subrayada. No es
- * decoración: el subrayado y el color son la misma señal —«esto destaca»— y en
- * una barra de seis items en mono, a 13px, esa señal se lee peor de lo que
- * parece en una maqueta. Los corchetes son la forma en que una terminal marca la
- * ruta activa, así que dicen «estás aquí» sin depender de que se distinga el
- * color. Van `aria-hidden`, porque quien escucha ya tiene `aria-current`.
+ * The current section goes in BRACKETS as well as in biolume and underlined.
+ * That is not decoration: the underline and the color are the same signal —
+ * «this stands out» — and in a six-item mono bar at 13px that signal reads worse
+ * than it looks in a mockup. Brackets are how a terminal marks the active path,
+ * so they say «you are here» without relying on the color being told apart. They
+ * are `aria-hidden`, because whoever is listening already has `aria-current`.
  */
 declare function NavItem({ active, asChild, className, children, ...props }: NavItemProps): react.JSX.Element;
 
 /**
- * Cuatro estados, y el aviso va DEBAJO del formulario.
- *
- * Reemplazar el formulario por el mensaje de éxito es lo que hace casi todo el
- * mundo y es lo que rompe el caso real: alguien se suscribe con el correo
- * equivocado y ya no tiene dónde volver a escribirlo. El campo se queda.
- *
- * El componente es presentacional: recibe `state` y emite `onSubmitEmail`. La
- * llamada de red la hace el proyecto, porque cada uno tiene su proveedor y la
- * librería no va a elegirlo por ellos.
- *
- * El aviso usa la SEGUNDA receta del sistema —`enfasis="fuerte"`, fondo al 10 %
- * y borde sólido— porque va pegado bajo un campo que ya tiene borde: con la
- * receta sutil, las dos líneas se leen como una sola caja.
- *
- * Es uno de los sitios donde la mascota puede aparecer: el «sin spam».
- *
- * El campo de nombre es OPCIONAL y está apagado por defecto. No es una prop de
- * estilo: el endpoint de uno de los proyectos valida nombre y correo y responde
- * 400 si falta el primero, así que un formulario de un solo campo ahí no es un
- * formulario más pobre — es uno que envía algo que el servidor rechaza. El
- * nombre viaja como SEGUNDO argumento de `onSubmitEmail`, para que las llamadas
- * que ya existen —las que solo declaran `(email)`— sigan compilando.
- *
- * Lo que la librería NO hace es validar el nombre. El proyecto que lo pide lo
- * acota entre 2 y 50 caracteres y solo letras y acentos; esa regla es suya y del
- * servidor que la comprueba de verdad, y copiarla aquí sería tener dos fuentes
- * que se desincronizan en silencio. `nameInputProps` está para que el proyecto
- * ponga la suya.
+ * Four states, and the notice goes UNDER the form.
+ *
+ * Replacing the form with the success message is what almost everyone does and
+ * it is what breaks the real case: somebody subscribes with the wrong email and
+ * then has nowhere to type it again. The field stays.
+ *
+ * The component is presentational: it takes `state` and emits `onSubmitEmail`.
+ * The network call is the project's job, because each has its own provider and
+ * the library is not going to choose one for them.
+ *
+ * The notice uses the system's SECOND recipe — `emphasis="strong"`, background
+ * at 10 % and a solid border — because it sits directly under a field that
+ * already has a border: with the subtle recipe, the two lines read as a single
+ * box.
+ *
+ * It is one of the places the mascot may appear: the «sin spam».
+ *
+ * The name field is OPTIONAL and off by default. It is not a styling prop: one
+ * project's endpoint validates name and email and answers 400 if the first is
+ * missing, so a one-field form there is not a poorer form — it is one that sends
+ * something the server rejects. The name travels as the SECOND argument of
+ * `onSubmitEmail`, so the calls that already exist — the ones only declaring
+ * `(email)` — keep compiling.
+ *
+ * What the library does NOT do is validate the name. The project asking for it
+ * bounds it between 2 and 50 characters and to letters and accents only; that
+ * rule is theirs and the server's that actually checks it, and copying it here
+ * would mean two sources drifting apart in silence. `nameInputProps` is there
+ * for the project to put its own in.
+ *
+ * Four of the props are here because the blog had already built each one by
+ * hand, and each workaround leaned on something nobody had promised: `aside`
+ * replaces an absolutely positioned pose and a `md:pr-[330px]` measured off the
+ * image; `resetOnSuccess` replaces finding the `<form>` with a `ref` on the
+ * container; `onFieldChange` replaces an `onInput` on the `<section>` that
+ * worked because the event bubbles; and `fieldErrors` replaces losing the second
+ * message whenever two fields failed at once. A workaround that works by an
+ * implementation detail is a bug with a delay.
  */
-type NewsletterState = 'reposo' | 'enviando' | 'exito' | 'error';
+type NewsletterState = 'idle' | 'sending' | 'success' | 'error';
 type NewsletterFormProps = Omit<ComponentPropsWithoutRef<'section'>, 'title' | 'onSubmit'> & {
     title: ReactNode;
     description?: ReactNode;
     state?: NewsletterState;
     /**
-     * Se dispara con el correo ya leído del campo, y con el nombre si el campo
-     * está puesto.
+     * Fires with the email already read from the field, and with the name if that
+     * field is enabled.
      */
     onSubmitEmail?: ((email: string, name?: string) => void) | undefined;
     successMessage?: ReactNode;
     errorMessage?: ReactNode;
-    /** La letra pequeña. Es el «sin spam», y por eso admite cara. */
+    /** The small print. It is the «sin spam», which is why it accepts a face. */
     disclaimer?: ReactNode;
-    expresion?: Cara | undefined;
+    expression?: Face | undefined;
     basePath?: string | undefined;
     submitLabel?: string;
     placeholder?: string;
     fieldLabel?: string;
-    /** Añade el campo de nombre delante del correo. */
+    /** Adds the name field ahead of the email one. */
     nameField?: boolean;
     nameLabel?: string;
     namePlaceholder?: string;
     /**
-     * Lo que el proyecto necesite colgar del campo de nombre: `minLength`,
-     * `maxLength`, `pattern`. La librería no impone ninguna de las tres.
+     * Whatever the project needs to hang off the name field: `minLength`,
+     * `maxLength`, `pattern`. The library imposes none of the three.
      */
     nameInputProps?: Omit<InputProps, 'id' | 'name' | 'disabled'> | undefined;
+    /**
+     * The illustration, as a second column inside the panel.
+     *
+     * It exists because the component builds its own children, so neither
+     * `children` nor an extra `ReactNode` had anywhere to go: the blog ended up
+     * positioning the desk pose absolutely over the panel and reserving room for
+     * it with a hand-written `md:pr-[330px]`. That number depends on the image's
+     * width and nothing keeps the two in step.
+     *
+     * It only becomes a column from `md` up. Below that it goes back into the
+     * flow under the form, for the same reason `Hero`'s pose does: on a narrow
+     * screen there is no second column to put it in.
+     */
+    aside?: ReactNode;
+    /**
+     * Empties the fields after a successful subscription. On by default.
+     *
+     * With the fields still full, the same email invites a second submission. The
+     * blog worked around it by finding the `<form>` with a `ref` on the container
+     * and calling `reset()`, because the component exposed no form — a trick that
+     * works by an implementation detail and not by contract.
+     */
+    resetOnSuccess?: boolean;
+    /**
+     * Fires when either field changes. It is where the project clears its error.
+     *
+     * The blog was doing it by hanging an `onInput` off the `<section>` and
+     * relying on the event bubbling up. That works, and it works by accident: it
+     * depends on the spare props landing on the section, which is an
+     * implementation detail and not something anybody promised.
+     */
+    onFieldChange?: ((field: 'name' | 'email', value: string) => void) | undefined;
+    /**
+     * A message under one specific field, instead of the single alert.
+     *
+     * With one bad field the general alert already names it, because the API
+     * sends Zod's first message. With two bad at once only one of them is ever
+     * seen. `fieldErrors` marks each field and puts its message underneath;
+     * `errorMessage` still covers what belongs to the form as a whole — the 409,
+     * the network failure — and both can show at the same time.
+     */
+    fieldErrors?: {
+        name?: ReactNode;
+        email?: ReactNode;
+    } | undefined;
 };
-declare function NewsletterForm({ title, description, state, onSubmitEmail, successMessage, errorMessage, disclaimer, expresion, basePath, submitLabel, placeholder, fieldLabel, nameField, nameLabel, namePlaceholder, nameInputProps, className, ...props }: NewsletterFormProps): react.JSX.Element;
+declare function NewsletterForm({ title, description, state, onSubmitEmail, successMessage, errorMessage, disclaimer, expression, basePath, submitLabel, placeholder, fieldLabel, nameField, nameLabel, namePlaceholder, nameInputProps, aside, resetOnSuccess, onFieldChange, fieldErrors, className, ...props }: NewsletterFormProps): react.JSX.Element;
 
 /**
- * Una sola cabecera en dos escalas, no dos componentes.
+ * One header at two scales, not two components.
  *
- * El hero del portafolio y el de cursos resultaron ser el mismo esqueleto —
- * eyebrow en acento, titular, párrafo acotado — con distinto tamaño. Separarlos
- * en `Hero` y `PageHeader` habría duplicado la misma regla en dos sitios y
- * habría dejado la puerta abierta a que se separaran con el tiempo.
+ * The portfolio's hero and the courses one turned out to be the same skeleton —
+ * eyebrow in accent, headline, clamped paragraph — at different sizes. Splitting
+ * them into `Hero` and `PageHeader` would have duplicated the same rule in two
+ * places and left the door open for them to drift apart over time.
  *
- * `display` para portadas, `page` para cabeceras de sección.
+ * `display` for covers, `page` for section headers.
  *
- * No recibe cara de la mascota, ni en una escala ni en la otra: las caras van en
- * estados vacíos, confirmaciones, errores, progreso de curso y celebración.
+ * It takes no mascot face, at either scale: faces go in empty states,
+ * confirmations, errors, course progress and celebration.
  *
- * Renderiza un `<header>`, y va DENTRO de `<main>`. Un `<header>` que cuelga
- * directamente del `<body>` se convierte en landmark `banner`, y entonces
- * compite con la cabecera del sitio: dos banners en una página es un fallo de
- * accesibilidad. Dentro de `<main>` no es landmark y sí es la cabecera del
- * contenido, que es lo que este componente es.
+ * It renders a `<header>`, and it goes INSIDE `<main>`. A `<header>` hanging
+ * directly off `<body>` becomes a `banner` landmark, and then it competes with
+ * the site header: two banners on one page is an accessibility failure. Inside
+ * `<main>` it is not a landmark and it is the content's header, which is what
+ * this component is.
  */
-declare const cabecera: (props?: ({
+declare const header: (props?: ({
     size?: "display" | "page" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-type PageHeaderProps = Omit<ComponentPropsWithoutRef<'header'>, 'title'> & VariantProps<typeof cabecera> & {
+type PageHeaderProps = Omit<ComponentPropsWithoutRef<'header'>, 'title'> & VariantProps<typeof header> & {
     title: ReactNode;
-    /** Mono, versalitas, en acento. Es la sección a la que pertenece la página. */
+    /** Mono, small caps, in accent. It is the section the page belongs to. */
     eyebrow?: ReactNode | undefined;
     description?: ReactNode | undefined;
     /**
-     * Ranura para las llamadas a la acción. Si aquí va un botón de conversión,
-     * es el único de la pantalla.
+     * Slot for the calls to action. If a conversion button goes here, it is the
+     * only one on the screen.
      */
     action?: ReactNode | undefined;
-    /** Nivel del titular. `h1` salvo que la página ya tenga uno. */
+    /** The headline's level. `h1` unless the page already has one. */
     as?: 'h1' | 'h2' | undefined;
 };
 declare function PageHeader({ title, eyebrow, description, action, size, as, className, ...props }: PageHeaderProps): react.JSX.Element;
 
 /**
- * Cuánto llevas leído. NO es `Progress` con otro nombre.
- *
- * `Progress` mide una tarea: hay un total conocido, alguien la empezó y va a
- * terminar. Esto mide una POSICIÓN en un documento, que se puede recorrer en
- * los dos sentidos y de la que no hay nada que completar. Por eso no lleva
- * `role="progressbar"` ni valor accesible: va `aria-hidden`.
- *
- * Eso último es deliberado y es la decisión que hay que defender. Un lector de
- * pantalla ya sabe dónde está en el documento y anunciarle «37 %» cada vez que
- * se mueve es ruido, no información. La barra es orientación visual, y lo que
- * es solo visual se declara como tal.
- *
- * El ancho se escribe directamente, sin transición: `transition-standard` solo
- * cubre color y borde, así que la barra sigue al scroll en vez de perseguirlo.
- *
- * La medición va dentro de `requestAnimationFrame`. Leer `scrollTop` en el
- * manejador de scroll fuerza un reflujo síncrono en cada evento, y en un
- * artículo largo eso se nota en el propio scroll — el efecto contrario al que
- * busca la pieza.
+ * How much you have read. It is NOT `Progress` under another name.
+ *
+ * `Progress` measures a task: there is a known total, somebody started it and it
+ * is going to finish. This measures a POSITION in a document, which can be
+ * travelled in both directions and of which there is nothing to complete. That
+ * is why it carries neither `role="progressbar"` nor an accessible value: it is
+ * `aria-hidden`.
+ *
+ * That last part is deliberate and it is the decision worth defending. A screen
+ * reader already knows where it is in the document, and announcing «37 %» every
+ * time it moves is noise, not information. The bar is visual orientation, and
+ * what is purely visual is declared as such.
+ *
+ * The width is written directly, with no transition: `transition-standard` only
+ * covers color and border, so the bar follows the scroll instead of chasing it.
+ *
+ * The measurement happens inside `requestAnimationFrame`. Reading `scrollTop` in
+ * the scroll handler forces a synchronous reflow on every event, and in a long
+ * article that shows up in the scroll itself — the opposite of what this piece
+ * is for.
  */
 type ScrollingProgressBarProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
     /**
-     * El elemento que se mide. Sin él, el documento entero.
+     * The element being measured. Without it, the whole document.
      *
-     * Se pasa cuando la barra debe seguir SOLO al artículo: si la página tiene
-     * una cabecera alta y un pie con enlaces, medir el documento marca el 100 %
-     * cuando todavía quedan dos párrafos.
+     * It is passed when the bar should follow ONLY the article: if the page has a
+     * tall header and a footer full of links, measuring the document hits 100 %
+     * while two paragraphs are still left.
      */
     target?: RefObject<HTMLElement | null> | undefined;
-    /** Arena en vez de bioluz, para igualar el progreso de curso. */
+    /** Sand instead of biolume, to match course progress. */
     tone?: 'accent' | 'warm';
-    /** Pega la barra al borde superior de la ventana. */
+    /** Pins the bar to the top edge of the window. */
     sticky?: boolean;
 };
 declare function ScrollingProgressBar({ target, tone, sticky, className, ...props }: ScrollingProgressBarProps): react.JSX.Element;
 
 /**
- * La barra lateral del admin del blog.
+ * The blog admin's sidebar.
  *
- * El `▸` lo pone el componente, igual que el `./` de `NavItem` y el `~` del
- * breadcrumb: es la misma estética CLI y la misma decisión — el formato es parte
- * de la pieza, no una convención que haya que recordar. Va `aria-hidden`.
+ * The `▸` is put there by the component, same as `NavItem`'s `./` and the
+ * breadcrumb's `~`: it is the same CLI aesthetic and the same decision — the
+ * format is part of the piece, not a convention to be remembered. It is
+ * `aria-hidden`.
  *
- * El pie lleva la versión y la rama (`v5.0.1 · main`) en la escala `meta`. No es
- * decoración: en un admin es lo primero que se pregunta cuando algo se ve raro.
+ * An `icon` REPLACES it rather than joining it. Two marks before a label is one
+ * more than the eye needs, and the `▸` exists to say «this is a place you can
+ * go» — which is exactly what a section icon already says, and says better. A
+ * sidebar with no icons keeps the prompt, which is the reading sites' case.
+ *
+ * The footer carries the version and the branch (`v5.0.1 · main`) in the `meta`
+ * scale. It is not decoration: in an admin it is the first thing anyone asks
+ * when something looks off.
  */
 type SidebarItemProps = ComponentPropsWithoutRef<'a'> & {
     active?: boolean | undefined;
     asChild?: boolean | undefined;
-    /** Contador a la derecha: borradores pendientes, media sin usar. */
+    /** Counter on the right: pending drafts, unused media. */
     badge?: ReactNode;
+    /**
+     * The section's glyph, on the left. It REPLACES the `▸` rather than joining
+     * it, and it inherits `currentColor`, so it follows the item's state without
+     * being tinted separately.
+     */
+    icon?: ReactNode;
+};
+declare function SidebarItem({ active, asChild, badge, icon, className, children, ...props }: SidebarItemProps): react.JSX.Element;
+/**
+ * A labelled block of items — «Contenido», «Alumnos», «Ventas».
+ *
+ * A panel's sidebar stops being readable somewhere around eight items, and the
+ * fix is not a scrollbar: it is saying what the blocks are. The label is a `<p>`
+ * and not a heading, because a heading here would land in the document outline
+ * between the page's own — a sidebar is navigation, not content.
+ *
+ * The items go in a nested `<ul>` named by that label, which is what gives a
+ * screen reader «lista Ventas, 3 elementos» instead of one list of eleven.
+ */
+type SidebarGroupProps = Omit<ComponentPropsWithoutRef<'li'>, 'title'> & {
+    /** The block's name. Sentence case, not a section title. */
+    label: ReactNode;
 };
-declare function SidebarItem({ active, asChild, badge, className, children, ...props }: SidebarItemProps): react.JSX.Element;
+declare function SidebarGroup({ label, children, className, ...props }: SidebarGroupProps): react.JSX.Element;
 type SidebarNavProps = ComponentPropsWithoutRef<'nav'> & {
-    /** Encabezado del panel. */
+    /**
+     * The panel's heading, as an eyebrow. It also names the `<nav>` when it is a
+     * string, which is why a `brand` row does not replace it: a logo is not an
+     * accessible name. Pass `aria-label` when neither fits.
+     */
     title?: ReactNode;
-    /** Versión y rama, al pie. */
+    /**
+     * The row at the top: isotype and wordmark, `cursos · admin`. It is a slot and
+     * not a `logo`/`name` pair because every panel spells its own name
+     * differently, and the part that IS the system — the rhythm, the hairline
+     * under it — is here.
+     *
+     * Collapsed, it is hidden: a wordmark does not fit in a rail and the component
+     * cannot trim somebody else's markup. Pass the isotype on its own through
+     * `mark` for the rail to keep something at the top.
+     */
+    brand?: ReactNode;
+    /** What `brand` becomes in the rail. Usually the isotype with no wordmark. */
+    mark?: ReactNode;
+    /**
+     * Who is signed in, at the bottom above the version. A slot, because an avatar
+     * needs a session and a sign-out route and the library takes no project
+     * infrastructure — the same reason `Nav`'s user menu goes in `actions`.
+     */
+    user?: ReactNode;
+    /**
+     * Turns the sidebar into a rail: icons only, and the widths become the
+     * library's — `w-sidebar` and `w-sidebar-rail`. It is CONTROLLED and there is
+     * no uncontrolled mode, because this state is almost always persisted in a
+     * cookie or in `localStorage`, and an internal state would fight the one the
+     * project already keeps.
+     */
+    collapsed?: boolean | undefined;
+    /**
+     * Called with what the state should become. With it, the toggle appears; with
+     * `collapsed` alone the sidebar is a rail with no way out of it, which is a
+     * legitimate layout and not an accident.
+     */
+    onCollapsedChange?: ((collapsed: boolean) => void) | undefined;
+    /** The toggle's accessible name, in the two directions. */
+    collapseLabel?: string;
+    expandLabel?: string;
+    /** Version and branch, at the bottom. */
     version?: ReactNode;
     branch?: ReactNode;
 };
-declare function SidebarNav({ title, version, branch, children, className, ...props }: SidebarNavProps): react.JSX.Element;
+declare function SidebarNav({ title, brand, mark, user, collapsed, onCollapsedChange, collapseLabel, expandLabel, version, branch, children, className, ...props }: SidebarNavProps): react.JSX.Element;
 
 /**
- * Una métrica grande: el número en la escala `stat` y su nombre debajo.
- *
- * La regla del documento no es de estilo, es de semántica: «bioluz para lo
- * neutro y arena SOLO cuando el número es el problema». Un 12 de aplicaciones
- * es un dato; un 0 de design systems es el problema del que trata la charla.
- * Por eso `tone` no es una paleta abierta — son dos valores y significan cosas
- * distintas.
- *
- * El orden de lectura es icono + título, el número grande, y la bajada debajo.
- * El número va en MEDIO y no al final a propósito: es lo que se viene a leer, y
- * una bajada de dos líneas entre el título y la cifra la entierra. Arriba queda
- * de qué va, en medio cuánto, y abajo el matiz que solo lee quien se para.
+ * A large metric: the number in the `stat` scale and its name underneath.
+ *
+ * The document's rule is not one of style, it is one of semantics: «biolume for
+ * the neutral and sand ONLY when the number is the problem». A 12 of
+ * applications is a datum; a 0 of design systems is the problem the talk is
+ * about. That is why `tone` is not an open palette — there are two values and
+ * they mean different things.
+ *
+ * The reading order is title, the big number, and the standfirst below. The
+ * number goes in the MIDDLE and not at the end on purpose: it is what people
+ * came to read, and a two-line standfirst between the title and the figure
+ * buries it. The top says what it is about, the middle says how much, and the
+ * bottom holds the nuance only someone who stops will read.
+ *
+ * `delta` and `spark` sit with the number and not with the standfirst, because
+ * both are about the number: how it moved and what shape the movement had. The
+ * order survives — top what, middle how much, bottom the nuance.
+ *
+ * THE ICON IS A BADGE IN THE OPPOSITE CORNER, not a glyph before the title, and
+ * the tone rides on it rather than on the number. In a panel of ten of these the
+ * eyebrow is the same length in none of them, so an inline icon puts the only
+ * coloured mark on a different x in every card; pinned to the corner it lands on
+ * a grid. The circle is the tint pattern the system already has — `bg-accent/10`
+ * as a surface and the colour on the GLYPH, per `docs/decisions.md` § 4b — and a
+ * glyph clears the 3:1 graphical threshold where text would not clear 4.5.
+ *
+ * WHICH IS WHY A NEUTRAL NUMBER IS PRIMARY INK AND NOT BIOLUME. With a biolume
+ * badge and a biolume sparkline, a biolume number is the third accent in a card
+ * the size of a postcard, and the thing you came to read stops being the loudest
+ * thing in it. `alert` and `achievement` DO still paint the number sand, so the
+ * document's rule survives exactly where it matters: sand when the number is not
+ * just a number. See `docs/decisions.md` § 31.
  */
 type StatProps = Omit<ComponentPropsWithoutRef<'div'>, 'title'> & {
-    /** El número, ya formateado. La librería no impone locale. */
+    /** The number, already formatted. The library imposes no locale. */
     value: ReactNode;
-    /** Qué se está contando. Va en mono versalitas. */
+    /** What is being counted. It goes in mono small caps. */
     label: ReactNode;
-    /** `alerta` solo cuando el número ES el problema. */
-    tone?: 'neutral' | 'alerta';
-    /** Con `progress`, la métrica se lee como avance y añade la barra. */
+    /**
+     * `alert` ONLY when the number is the problem, and `achievement` when it is
+     * the opposite — the diplomas issued, the modules finished. The two paint the
+     * same sand today and they are still two names: a system that names by meaning
+     * cannot make «this is bad» the only way to say «this stands out». See
+     * `docs/decisions.md` § 28.
+     */
+    tone?: 'neutral' | 'alert' | 'achievement';
+    /** With `progress`, the metric reads as progress and adds the bar. */
     progress?: number | undefined;
     /**
-     * Glifo al lado del título, a 1em. Hereda `currentColor`, así que sigue al
-     * tono del título y no hay que teñirlo aparte.
+     * Glyph in a tinted circle, in the corner opposite the title. At 1em, and it
+     * inherits `currentColor` from the badge, so it takes the tone without being
+     * tinted separately.
      */
     icon?: ReactNode;
     /**
-     * La bajada: el matiz que el número solo no da. «12 aplicaciones» no dice si
-     * son muchas, y aquí es donde se dice.
+     * The standfirst: the nuance the number alone does not give. «12 aplicaciones»
+     * does not say whether that is a lot, and this is where that gets said.
      */
     description?: ReactNode;
+    /** How the number moved since last time. */
+    delta?: StatDelta | undefined;
+    /**
+     * The number's shape over time, under it. A `ReactNode` and not a data prop:
+     * a sparkline needs a charting library, and this component lives in the barrel
+     * that four projects install. The one project that draws them passes its own,
+     * exactly like `icon`.
+     */
+    spark?: ReactNode;
+};
+type StatDelta = {
+    /**
+     * Already formatted — «+12 esta semana», «↑8 %». The library imposes no
+     * locale, same as `value`.
+     */
+    value: ReactNode;
+    /**
+     * Which way it moved. It picks the GLYPH and never the colour, because a rise
+     * is not automatically good: «+12 alumnos» and «+12 errores» point the same
+     * way and mean opposite things. Whether the number matters is `tone`'s job,
+     * and it is a decision the call site has already made.
+     */
+    direction: 'up' | 'down' | 'flat';
 };
-declare function Stat({ value, label, tone, progress, icon, description, className, ...props }: StatProps): react.JSX.Element;
+declare function Stat({ value, label, tone, progress, icon, description, delta, spark, className, ...props }: StatProps): react.JSX.Element;
 
-type TalkCardProps = Omit<TarjetaProps, 'children' | 'title'> & {
+type TalkContent = {
     title: ReactNode;
-    /** Dónde se dio: la conferencia, el meetup, el equipo. */
+    /** Where it was given: the conference, the meetup, the team. */
     event: ReactNode;
     date?: ReactNode;
     dateTime?: string | undefined;
     location?: ReactNode;
-    /** Etiqueta corta de estado: «con vídeo», «próxima», «solo audio». */
+    /** Short status label: «con vídeo», «próxima», «solo audio». */
     status?: ReactNode;
     /**
-     * De qué iba la charla. Se corta a dos líneas, igual que el `excerpt` de
-     * `ArticleCard`, para que la rejilla no se desalinee.
+     * What the talk was about. Clamped to two lines, same as `ArticleCard`'s
+     * `excerpt`, so the grid does not fall out of line.
      */
     description?: ReactNode;
 };
-declare function TalkCard({ title, event, date, dateTime, location, status, description, className, ...props }: TalkCardProps): react.JSX.Element;
+/**
+ * A talk has more than one destination, and that is what shapes this type.
+ *
+ * Slides, repo, the recording, the event's own page: the listing used to show
+ * them as loose links under each talk, and migrating to this component made them
+ * DISAPPEAR — there was nowhere to put them, so the blog pointed the whole card
+ * at the first one that existed and the rest were lost.
+ *
+ * So `resources` is a slot, and it forces a choice in the type: a card with
+ * resources is NOT a link. An `<a>` inside an `<a>` is invalid HTML and the
+ * browser un-nests it, so «the card links to the slides AND the slides link to
+ * the slides» is not a thing that can render. With resources the card is an
+ * `<article>` on the card surface and the links are the resources; without them
+ * it stays the single-destination card it was.
+ *
+ * That is why this is a union and not one more optional prop: the combination
+ * that cannot work does not compile.
+ */
+type TalkCardProps = (Omit<CardShellProps, 'children' | 'title'> & TalkContent & {
+    /** The card is the link. Do not pass resources with this. */
+    resources?: never;
+}) | (Omit<ComponentPropsWithoutRef<'article'>, 'title'> & TalkContent & {
+    /**
+     * Slides, repo, recording. They are the links, so the card stops being
+     * one.
+     */
+    resources: ReactNode;
+});
+declare function TalkCard({ title, event, date, dateTime, location, status, description, resources, className, ...props }: TalkCardProps): react.JSX.Element;
 
 /**
- * El control que faltaba. La librería definía todo el sistema de temas y no
- * exponía lo que lo cambia, así que dos proyectos lo reimplementaban.
- *
- * Lo difícil no es el botón: es que la primera pintura no parpadee y que la
- * elección sobreviva a la navegación. Eso vive en `@eduardoalvarez/arrecife/tema`,
- * que no importa React —lo consume un Astro que no monta ninguno— y de ahí sale
- * `scriptTema`, que va inline en el `<head>`. Sin ese script, este botón
- * funciona y aun así se ve el fogonazo en cada carga.
- *
- * Los DOS iconos se renderizan siempre y el que sobra lo esconde el CSS con la
- * variante `light:`. No es una optimización: es lo que evita que el servidor y
- * el cliente discrepen. El servidor no sabe qué tema eligió quien va a leer, así
- * que cualquier icono que elija en el HTML tiene la mitad de probabilidades de
- * ser el equivocado, y corregirlo al hidratar es el parpadeo otra vez.
- *
- * El nombre accesible NO dice a qué modo se va. Sería más informativo y sería
- * una mentira la mitad del tiempo por lo mismo de arriba: el HTML del servidor
- * lo fija antes de saber el tema. «Cambiar de tema» es cierto siempre.
+ * The control that was missing. The library defined the whole theming system and
+ * exposed nothing that changes it, so two projects were reimplementing it.
+ *
+ * The hard part is not the button: it is that the first paint does not flash and
+ * that the choice survives navigation. That lives in
+ * `@eduardoalvarez/arrecife/theme`, which does not import React — an Astro that
+ * mounts none consumes it — and out of it comes `themeScript`, which goes inline
+ * in the `<head>`. Without that script this button works and you still get the
+ * flash on every load.
+ *
+ * BOTH icons are always rendered and CSS hides the spare one with the `light:`
+ * variant. It is not an optimisation: it is what stops the server and the client
+ * from disagreeing. The server does not know which theme the reader chose, so
+ * whichever icon it picks in the HTML has a fifty-fifty chance of being wrong,
+ * and correcting it on hydration is the flash all over again.
+ *
+ * The accessible name does NOT say which mode you are going to. That would be
+ * more informative and would be a lie half the time, for the same reason as
+ * above: the server's HTML fixes it before the theme is known. «Cambiar de
+ * tema» is always true.
  */
 type ThemeToggleProps = Omit<ComponentPropsWithoutRef<'button'>, 'onClick'> & {
-    /** Nombre accesible. El botón no tiene texto visible, así que es lo único que lo nombra. */
+    /** Accessible name. The button has no visible text, so it is the only thing naming it. */
     label?: string;
-    /** Se dispara con el tema que quedó puesto, por si el proyecto quiere anotarlo. */
-    onThemeChange?: ((tema: Tema) => void) | undefined;
+    /** Fires with whichever theme ended up set, in case the project wants to record it. */
+    onThemeChange?: ((theme: Theme) => void) | undefined;
     variant?: ButtonProps['variant'];
     size?: ButtonProps['size'];
 };
 declare function ThemeToggle({ label, onThemeChange, variant, size, className, ...props }: ThemeToggleProps): react.JSX.Element;
 /**
- * El tema puesto ahora mismo, para un proyecto que necesite ramificar en React
- * —un logo distinto por modo, una imagen que no tiene versión clara—.
- *
- * Es `useSyncExternalStore` y no un `useState` con un efecto detrás porque el
- * tema es exactamente eso: un estado que vive fuera de React, en un atributo del
- * `<html>` que puede cambiar sin que React se entere. Escribirlo con un efecto
- * que llama a `setState` en el montaje es el patrón que dispara un render en
- * cascada y que la regla `set-state-in-effect` señala con razón.
- *
- * `getServerSnapshot` devuelve `'dark'` porque en el servidor no hay `document`.
- * El primer render del cliente coincide con el del servidor y el valor real
- * entra después, que es la misma discrepancia de hidratación que `ThemeToggle`
- * evita renderizando los dos iconos.
- *
- * De ahí la regla de uso: si lo que ramifica es SOLO estilo, esto no hace falta
- * y la variante `light:` es mejor — no re-renderiza nada. Esto es para cuando
- * cambia el contenido.
+ * The theme set right now, for a project that needs to branch in React — a
+ * different logo per mode, an image with no light version.
+ *
+ * It is `useSyncExternalStore` and not a `useState` with an effect behind it
+ * because the theme is exactly that: state living outside React, in an attribute
+ * on `<html>` that can change without React finding out. Writing it as an effect
+ * calling `setState` on mount is the pattern that triggers a cascading render
+ * and that the `set-state-in-effect` rule rightly flags.
+ *
+ * `getServerSnapshot` returns `'dark'` because there is no `document` on the
+ * server. The client's first render matches the server's and the real value
+ * arrives afterwards, which is the same hydration mismatch `ThemeToggle` avoids
+ * by rendering both icons.
+ *
+ * Hence the usage rule: if what branches is ONLY style, this is not needed and
+ * the `light:` variant is better — it re-renders nothing. This is for when the
+ * content changes.
  */
-declare function useTema(): Tema;
+declare function useTheme(): Theme;
 
 /**
- * «En esta página». El índice del artículo largo.
+ * «En esta página». The long article's table of contents.
  *
- * Es un `<nav>` con nombre accesible propio, no una lista suelta: en una página
- * que ya tiene la barra del sitio y las migas, un tercer grupo de enlaces sin
- * nombre es indistinguible de los otros dos para quien navega por landmarks.
+ * It is a `<nav>` with an accessible name of its own, not a loose list: on a
+ * page that already has the site bar and the breadcrumb, a third group of links
+ * with no name is indistinguishable from the other two for anyone navigating by
+ * landmarks.
  *
- * El activo se marca con `aria-current`, no solo con color — la sección en la
- * que estás no puede comunicarse únicamente con bioluz.
+ * The active entry is marked with `aria-current`, not with color alone — the
+ * section you are in cannot be communicated purely in biolume.
  *
- * Y ese atributo es además EL GANCHO: las clases del activo se aplican con la
- * variante `aria-[current]:`, no con un ternario en el render. La diferencia es
- * la que hay entre servir solo controlado y servir también sin controlar.
+ * And that attribute is also THE HOOK: the active classes are applied with the
+ * `aria-[current]:` variant, not with a ternary in the render. The difference is
+ * the one between serving controlled only and also serving uncontrolled.
  *
- * Un sitio Astro resuelve el scroll-spy con quince líneas de script que ponen
- * `aria-current` en el enlace visible y quitan el del anterior. Con el estado
- * calculado en el render, ese script no podía hacer nada: había que hidratar el
- * índice como isla de React en cada artículo para algo que cuesta cero
- * JavaScript de framework. Ahora el CSS reacciona al atributo y las dos formas
- * de usarlo dan el mismo resultado.
+ * An Astro site solves scroll-spy with fifteen lines of script that set
+ * `aria-current` on the visible link and remove it from the previous one. With
+ * the state computed in the render, that script could do nothing: the table of
+ * contents had to be hydrated as a React island on every article for something
+ * that costs zero framework JavaScript. Now the CSS reacts to the attribute and
+ * both ways of using it give the same result.
  *
- * El gancho es la PRESENCIA del atributo, así que se quita para desmarcar; no
- * se pone `aria-current="false"`.
+ * The hook is the PRESENCE of the attribute, so it is removed to unmark; you do
+ * not set `aria-current="false"`.
  */
-type Entrada = {
-    /** El ancla, con `#`. */
+type TocEntry = {
+    /** The anchor, with its `#`. */
     href: string;
     label: ReactNode;
-    /** Sangra la entrada. Solo dos niveles: h2 y h3. */
+    /** Indents the entry. Only two levels: h2 and h3. */
     nested?: boolean | undefined;
 };
 type TableOfContentsProps = Omit<ComponentPropsWithoutRef<'nav'>, 'children'> & {
-    items: readonly Entrada[];
-    /** El título del bloque. */
+    items: readonly TocEntry[];
+    /** The block's title. */
     title?: ReactNode;
-    /** Ancla de la sección visible. */
+    /** The anchor of the visible section. */
     activeHref?: string | undefined;
     linkAsChild?: ((props: {
         href: string;
@@ -1419,26 +1562,4 @@ declare function TableOfContents({ items, title, activeHref, linkAsChild, classN
 
 declare function cn(...inputs: ClassValue[]): string;
 
-type IconProps = SVGProps<SVGSVGElement>;
-declare const GitHub: (props: IconProps) => react.JSX.Element;
-declare const LinkedIn: (props: IconProps) => react.JSX.Element;
-declare const X: (props: IconProps) => react.JSX.Element;
-declare const Instagram: (props: IconProps) => react.JSX.Element;
-declare const Discord: (props: IconProps) => react.JSX.Element;
-declare const YouTube: (props: IconProps) => react.JSX.Element;
-declare const Rss: (props: IconProps) => react.JSX.Element;
-declare const Correo: (props: IconProps) => react.JSX.Element;
-
-declare const social_Correo: typeof Correo;
-declare const social_Discord: typeof Discord;
-declare const social_GitHub: typeof GitHub;
-declare const social_Instagram: typeof Instagram;
-declare const social_LinkedIn: typeof LinkedIn;
-declare const social_Rss: typeof Rss;
-declare const social_X: typeof X;
-declare const social_YouTube: typeof YouTube;
-declare namespace social {
-  export { social_Correo as Correo, social_Discord as Discord, social_GitHub as GitHub, social_Instagram as Instagram, social_LinkedIn as LinkedIn, social_Rss as Rss, social_X as X, social_YouTube as YouTube };
-}
-
-export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, type AlertProps, ArticleCard, type ArticleCardProps, AudioPlayer, type AudioPlayerMode, type AudioPlayerProps, AuthorCard, type AuthorCardProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, AvatarUpload, type AvatarUploadProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarProps, Cara, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, type CategoryBadgeProps, Checkbox, type CheckboxProps, Code, CodeBlock, type CodeBlockProps, type CodeProps, CourseCard, type CourseCardProps, DateField, type DateFieldProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, type Entrada, EventCalendar, type EventCalendarProps, type EventoCalendario, Footer, FooterLink, type FooterLinkProps, type FooterProps, HOVER_TARJETA, Hero, type HeroProps, Input, type InputProps, LinkRow, type LinkRowProps, MetricBadge, type MetricBadgeProps, type Migaja, Nav, NavItem, type NavItemProps, type NavProps, NewsletterForm, type NewsletterFormProps, type NewsletterState, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Pose, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type Red, SUPERFICIE_TARJETA, ScrollingProgressBar, type ScrollingProgressBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, type SkeletonProps, Stat, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TalkCard, type TalkCardProps, Tema, Text, type TextProps, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, ToastAction, type ToastOptions, type ToastVariant, Toaster, type ToasterProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, cn, social, texto as textVariants, toast, useTema };
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, type AlertProps, ArticleCard, type ArticleCardProps, AudioPlayer, type AudioPlayerMode, type AudioPlayerProps, AuthorCard, type AuthorCardProps, Avatar, AvatarFallback, AvatarImage, type AvatarProps, AvatarUpload, type AvatarUploadProps, Badge, type BadgeProps, Blockquote, type BlockquoteProps, Breadcrumb, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, type CategoryBadgeProps, Checkbox, type CheckboxProps, Code, CodeBlock, type CodeBlockProps, type CodeProps, CourseCard, type CourseCardProps, type Crumb, DateField, type DateFieldProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, EventCalendar, type EventCalendarProps, Face, Footer, FooterLink, type FooterLinkProps, type FooterProps, Hero, type HeroProps, Input, type InputProps, LinkRow, type LinkRowProps, MetricBadge, type MetricBadgeProps, Nav, NavItem, type NavItemProps, type NavProps, NewsletterForm, type NewsletterFormProps, type NewsletterState, PageHeader, type PageHeaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Pose, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, ScrollingProgressBar, type ScrollingProgressBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Sheet, SheetBody, SheetClose, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarGroup, type SidebarGroupProps, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarNavProps, Skeleton, type SkeletonProps, type SocialLink, Stat, type StatDelta, type StatProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, type TableOfContentsProps, TableRow, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, TalkCard, type TalkCardProps, Text, type TextProps, Textarea, type TextareaProps, Theme, ThemeToggle, type ThemeToggleProps, ToastAction, type ToastOptions, type ToastVariant, Toaster, type ToasterProps, type TocEntry, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, cn, text as textVariants, toast, useTheme };