@eduardoalvarez/arrecife 0.5.1 → 0.7.0

package/dist/{label-DuTvJGxD.d.ts → label-MgHFKnFy.d.cts}

@@ -4,10 +4,10 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 
 type LabelProps = ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
 /**
- * La escala `label`: 13px, que es el mínimo absoluto en pantalla del sistema.
+ * The `label` scale: 13px, which is the system's absolute minimum on screen.
  *
- * Se atenúa junto al control cuando este está deshabilitado, para que la
- * pareja etiqueta-control se lea siempre como una sola unidad.
+ * It dims together with the control when that control is disabled, so the
+ * label-control pair always reads as a single unit.
  */
 declare function Label({ className, ...props }: LabelProps): react.JSX.Element;
 

package/dist/{label-DuTvJGxD.d.cts → label-MgHFKnFy.d.ts}

@@ -4,10 +4,10 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 
 type LabelProps = ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
 /**
- * La escala `label`: 13px, que es el mínimo absoluto en pantalla del sistema.
+ * The `label` scale: 13px, which is the system's absolute minimum on screen.
  *
- * Se atenúa junto al control cuando este está deshabilitado, para que la
- * pareja etiqueta-control se lea siempre como una sola unidad.
+ * It dims together with the control when that control is disabled, so the
+ * label-control pair always reads as a single unit.
  */
 declare function Label({ className, ...props }: LabelProps): react.JSX.Element;
 

package/dist/og/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-// src/brand/catalogo.ts
-var caras = {
+// src/brand/catalog.ts
+var faces = {
   annoyed: "face-annoyed.png",
   confused: "face-confused.png",
   hearts: "face-hearts.png",
@@ -16,95 +16,96 @@ var poses = {
   peek: "pose-peek.png",
   surf: "pose-surf.png"
 };
-var aletas = {
-  /** Dos azules. Para fondos claros. */
+var fins = {
+  /** Two blues. For light backgrounds. */
   color: "fin.png",
-  /** Silueta a una tinta. Para fondos oscuros. */
-  espuma: "fin-foam.png"
+  /** Single-ink silhouette. For dark backgrounds. */
+  foam: "fin-foam.png"
 };
-var RUTA_ASSETS = "/brand";
+var ASSETS_PATH = "/brand";
 
 // src/tokens/tokens.ts
 var dark = {
   background: "#091319",
-  //       corriente · menús, tabs activos
+  //       current · menus, active tabs
   border: "#22414F",
-  //       hairline en hover de tarjeta
+  //       hairline on card hover
   textPrimary: "#EDF4F3",
-  //         espuma            16.84:1
+  //         foam              16.84:1
   textSecondary: "#A7BCC4",
-  //           plancton           5.57:1  nunca bajo 13px
+  //           plankton           5.57:1  never under 13px
   accent: "#35D6C0",
-  //            tinta sobre bioluz
+  //            ink over biolume
   warm: "#F2A65A"};
 var light = {
   background: "#F6F2EA",
-  surfaceRaised: "#EFE9DE",
-  //       hairline en hover de tarjeta
+  //          paper
+  surface: "#FFFFFF",
+  //       hairline on card hover
   textPrimary: "#0B1524",
   //                           16.40:1
   textSecondary: "#3D4B58",
   warm: "#A65B27"};
 var fonts = {
-  /** SOLO titulares y números grandes. Nunca cuerpo. */
+  /** Headlines and large numbers ONLY. Never body copy. */
   display: '"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif',
-  /** Cuerpo e interfaz. */
+  /** Body and interface. */
   sans: '"Geist", ui-sans-serif, system-ui, sans-serif',
-  /** Código, rutas, etiquetas, metadatos, firma CLI. */
+  /** Code, paths, labels, metadata, the CLI signature. */
   mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
 };
 var typeScale = {
   h1: { tracking: "-0.03em" },
   eyebrow: { tracking: "0.12em"}
 };
-var profundo = "#0D2129";
+var deep = "#0D2129";
 var gradient = {
   dark: {
-    /** El de la plantilla OG de artículo. 145°, del documento. */
-    og: `linear-gradient(145deg, ${dark.background} 55%, ${profundo} 100%)`
+    /** The one used by the article OG template. 145°, from the document. */
+    og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
   },
   light: {
-    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surfaceRaised} 100%)`
+    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`
   }
 };
 var tagline = {
-  /** Header, una línea. */
-  corto: "Ayudo a equipos a escalar con criterio"};
+  /** Header, one line. */
+  short: "Ayudo a equipos a escalar con criterio"};
 var naming = {
   wordmark: "Eduardo \xC1lvarez",
-  /** El dominio, para la firma CLI del footer: `$ cd ~/eduardoalvarez.dev/2026`. */
+  /** The domain, for the footer CLI signature: `$ cd ~/eduardoalvarez.dev/2026`. */
   domain: "eduardoalvarez.dev"
 };
 
-// src/og/plantillas.ts
+// src/og/templates.ts
 var OG = {
   width: 1200,
   height: 630,
-  margen: 64,
-  /** Alto máximo de la mascota. */
-  mascota: 430,
-  /** La aleta de la firma. */
-  aletaFirma: 34,
+  margin: 64,
+  /** The mascot's maximum height. */
+  mascot: 430,
+  /** The signature's fin. */
+  signatureFin: 34,
   /**
-   * Hueco que deja la columna cuando la pose va a la izquierda (curso).
+   * The gap the column leaves when the pose goes on the left (course).
    *
-   * Son 560 y no 420 porque una pose completa a 430 de alto mide ~534 de ancho:
-   * con el hueco justo, el tiburón se comía el titular. La reserva se mide por
-   * el ancho real de la pose, no por el margen.
+   * It is 560 and not 420 because a full pose at 430 tall measures ~534 wide:
+   * with the exact gap, the shark ate into the headline. The reserve is measured
+   * by the pose's real width, not by the margin.
    */
-  reservaMascota: 560
+  mascotReserve: 560
 };
 function el(type, props, children) {
   return { type, props: children === void 0 ? props : { ...props, children } };
 }
-function caja(style, children) {
+function box(style, children) {
   return el("div", { style: { display: "flex", ...style } }, children);
 }
-function texto(style, contenido) {
-  return el("div", { style: { display: "flex", ...style } }, contenido);
+function text(style, content) {
+  return el("div", { style: { display: "flex", ...style } }, content);
 }
-function eyebrow(contenido, color) {
-  return texto(
+function eyebrow(content, color) {
+  return text(
     {
       fontFamily: fonts.mono,
       fontSize: 20,
@@ -112,11 +113,11 @@ function eyebrow(contenido, color) {
       textTransform: "uppercase",
       color
     },
-    contenido
+    content
   );
 }
-function titular(contenido, color) {
-  return texto(
+function headline(content, color) {
+  return text(
     {
       fontFamily: fonts.display,
       fontSize: 58,
@@ -124,8 +125,8 @@ function titular(contenido, color) {
       lineHeight: 1.06,
       letterSpacing: typeScale.h1.tracking,
       color,
-      // 70 % del LIENZO, no de la columna. Con la mascota en su propia columna
-      // el 70 % relativo daba ~400px y el titular se truncaba a media palabra.
+      // 70 % of the CANVAS, not of the column. With the mascot in a column of
+      // its own, a relative 70 % gave ~400px and the headline truncated mid-word.
       maxWidth: OG.width * 0.7,
       display: "-webkit-box",
       WebkitBoxOrient: "vertical",
@@ -133,144 +134,144 @@ function titular(contenido, color) {
       overflow: "hidden",
       textOverflow: "ellipsis"
     },
-    contenido
+    content
   );
 }
-function firma(contenido, color, modo, base) {
-  return caja({ alignItems: "center", gap: 14 }, [
+function signature(content, color, mode, base) {
+  return box({ alignItems: "center", gap: 14 }, [
     el("img", {
       alt: "",
-      src: `${base}/${modo === "oscuro" ? aletas.espuma : aletas.color}`,
-      height: OG.aletaFirma,
-      style: { height: OG.aletaFirma }
+      src: `${base}/${mode === "dark" ? fins.foam : fins.color}`,
+      height: OG.signatureFin,
+      style: { height: OG.signatureFin }
     }),
-    texto({ fontFamily: fonts.mono, fontSize: 21, color }, contenido)
+    text({ fontFamily: fonts.mono, fontSize: 21, color }, content)
   ]);
 }
-function tarjeta(opciones) {
-  const columna = caja(
+function card(options) {
+  const column = box(
     {
       position: "relative",
       flexDirection: "column",
       justifyContent: "space-between",
       width: "100%",
       height: "100%",
-      padding: OG.margen,
-      // Cuando la pose va a la izquierda hay que dejarle el hueco: es lo único
-      // que cambia de la retícula, y solo lo hace la plantilla de curso.
-      paddingLeft: opciones.mascotaIzquierda ? OG.reservaMascota : OG.margen
+      padding: OG.margin,
+      // When the pose goes on the left it needs the gap left for it: it is the
+      // only thing that changes in the grid, and only the course template does it.
+      paddingLeft: options.mascotaIzquierda ? OG.mascotReserve : OG.margin
     },
     [
-      eyebrow(opciones.eyebrow.texto, opciones.eyebrow.color),
-      caja({ flexDirection: "column", gap: 18 }, [
-        titular(opciones.title, opciones.tinta),
-        opciones.bajada ? texto(
+      eyebrow(options.eyebrow.text, options.eyebrow.color),
+      box({ flexDirection: "column", gap: 18 }, [
+        headline(options.title, options.tinta),
+        options.bajada ? text(
           {
             fontFamily: fonts.sans,
             fontSize: 26,
-            color: opciones.tintaSecundaria,
+            color: options.tintaSecundaria,
             maxWidth: OG.width * 0.7
           },
-          opciones.bajada
+          options.bajada
         ) : null
       ]),
-      firma(opciones.firma, opciones.firmaColor, opciones.modo, opciones.base)
+      signature(options.signature, options.firmaColor, options.mode, options.base)
     ]
   );
-  return caja(
+  return box(
     {
       position: "relative",
       width: OG.width,
       height: OG.height,
-      backgroundImage: opciones.fondo,
-      backgroundColor: opciones.modo === "oscuro" ? dark.background : light.background,
+      backgroundImage: options.background,
+      backgroundColor: options.mode === "dark" ? dark.background : light.background,
       fontFamily: fonts.sans,
       overflow: "hidden"
     },
     [
-      opciones.mascota ? caja(
+      options.mascot ? box(
         {
           position: "absolute",
           bottom: 0,
-          ...opciones.mascotaIzquierda ? { left: 0 } : { right: 0 },
+          ...options.mascotaIzquierda ? { left: 0 } : { right: 0 },
           alignItems: "flex-end"
         },
-        opciones.mascota
+        options.mascot
       ) : null,
-      columna
+      column
     ]
   );
 }
-function mascotaPose(pose, base, alto = OG.mascota) {
-  return el("img", { alt: "", src: `${base}/${poses[pose]}`, height: alto, style: { height: alto } });
+function mascotPose(pose, base, height = OG.mascot) {
+  return el("img", { alt: "", src: `${base}/${poses[pose]}`, height, style: { height } });
 }
-function plantillaArticulo(datos) {
-  const base = datos.basePath ?? RUTA_ASSETS;
-  const cara = datos.expresion ?? "hearts";
-  const meta = [datos.category, datos.readingMinutes ? `${datos.readingMinutes} min` : void 0].filter(Boolean).join(" \xB7 ");
-  return tarjeta({
-    modo: "oscuro",
-    fondo: gradient.dark.og,
-    eyebrow: { texto: meta || "art\xEDculo", color: dark.warm },
-    title: datos.title,
-    firma: naming.domain,
+function articleTemplate(data) {
+  const base = data.basePath ?? ASSETS_PATH;
+  const face = data.expression ?? "hearts";
+  const meta = [data.category, data.readingMinutes ? `${data.readingMinutes} min` : void 0].filter(Boolean).join(" \xB7 ");
+  return card({
+    mode: "dark",
+    background: gradient.dark.og,
+    eyebrow: { text: meta || "art\xEDculo", color: dark.warm },
+    title: data.title,
+    signature: naming.domain,
     firmaColor: dark.textSecondary,
     base,
     tinta: dark.textPrimary,
     tintaSecundaria: dark.textSecondary,
-    mascota: el("img", {
+    mascot: el("img", {
       alt: "",
-      src: `${base}/${caras[cara]}`,
+      src: `${base}/${faces[face]}`,
       height: 300,
-      style: { height: 300, marginBottom: OG.margen, marginRight: OG.margen }
+      style: { height: 300, marginBottom: OG.margin, marginRight: OG.margin }
     })
   });
 }
-function plantillaCurso(datos) {
-  const base = datos.basePath ?? RUTA_ASSETS;
-  const meta = [datos.modules ? `${datos.modules} m\xF3dulos` : void 0, datos.duration].filter(Boolean).join(" \xB7 ");
-  return tarjeta({
-    modo: "claro",
-    fondo: gradient.light.og,
-    eyebrow: { texto: "nuevo curso", color: light.warm },
-    title: datos.title,
+function courseTemplate(data) {
+  const base = data.basePath ?? ASSETS_PATH;
+  const meta = [data.modules ? `${data.modules} m\xF3dulos` : void 0, data.duration].filter(Boolean).join(" \xB7 ");
+  return card({
+    mode: "light",
+    background: gradient.light.og,
+    eyebrow: { text: "nuevo curso", color: light.warm },
+    title: data.title,
     bajada: meta || void 0,
-    firma: datos.url ?? `cursos.${naming.domain}`,
+    signature: data.url ?? `cursos.${naming.domain}`,
     firmaColor: light.warm,
     base,
     tinta: light.textPrimary,
     tintaSecundaria: light.textSecondary,
     mascotaIzquierda: true,
-    mascota: mascotaPose(datos.pose ?? "desk", base)
+    mascot: mascotPose(data.pose ?? "desk", base)
   });
 }
-function plantillaCharla(datos) {
-  const base = datos.basePath ?? RUTA_ASSETS;
-  const cabeza = ["charla", datos.event, datos.year].filter(Boolean).join(" \xB7 ");
-  const pie = [datos.location, datos.event ? void 0 : naming.domain].filter(Boolean).join(" \xB7 ");
-  return tarjeta({
-    modo: "oscuro",
-    fondo: "none",
-    eyebrow: { texto: cabeza, color: dark.accent },
-    title: datos.title,
-    bajada: datos.summary,
-    firma: pie || naming.domain,
+function talkTemplate(data) {
+  const base = data.basePath ?? ASSETS_PATH;
+  const head = ["charla", data.event, data.year].filter(Boolean).join(" \xB7 ");
+  const footer = [data.location, data.event ? void 0 : naming.domain].filter(Boolean).join(" \xB7 ");
+  return card({
+    mode: "dark",
+    background: "none",
+    eyebrow: { text: head, color: dark.accent },
+    title: data.title,
+    bajada: data.summary,
+    signature: footer || naming.domain,
     firmaColor: dark.textSecondary,
     base,
     tinta: dark.textPrimary,
     tintaSecundaria: dark.textSecondary,
-    // Sangra: se sale por abajo y por la derecha, como la portada de slide.
-    mascota: el("img", {
+    // It bleeds: it runs off the bottom and the right, like a slide cover.
+    mascot: el("img", {
       alt: "",
-      src: `${base}/${poses[datos.pose ?? "surf"]}`,
+      src: `${base}/${poses[data.pose ?? "surf"]}`,
       height: 470,
       style: { height: 470, marginBottom: -46, marginRight: -36 }
     })
   });
 }
-function plantillaDefecto(datos = {}) {
-  const base = datos.basePath ?? RUTA_ASSETS;
-  return caja(
+function defaultTemplate(data = {}) {
+  const base = data.basePath ?? ASSETS_PATH;
+  return box(
     {
       width: OG.width,
       height: OG.height,
@@ -279,11 +280,11 @@ function plantillaDefecto(datos = {}) {
       fontFamily: fonts.sans
     },
     [
-      // Columna de la aleta: 290 de ancho, que es donde cae el divisor.
-      caja(
+      // The fin's column: 290 wide, which is where the divider falls.
+      box(
         { width: 290, height: "100%", alignItems: "center", justifyContent: "center" },
-        // El halo. Un círculo de bioluz al 12 % detrás de la aleta.
-        caja(
+        // The halo. A circle of biolume at 12 % behind the fin.
+        box(
           {
             width: 260,
             height: 260,
@@ -292,21 +293,21 @@ function plantillaDefecto(datos = {}) {
             alignItems: "center",
             justifyContent: "center"
           },
-          el("img", { alt: "", src: `${base}/${aletas.espuma}`, height: 200, style: { height: 200 } })
+          el("img", { alt: "", src: `${base}/${fins.foam}`, height: 200, style: { height: 200 } })
         )
       ),
-      // El divisor, exactamente en x=290.
-      caja({ width: 1, height: 340, backgroundColor: dark.border }),
-      caja(
-        { flexDirection: "column", gap: 20, paddingLeft: OG.margen, paddingRight: OG.margen, flex: 1 },
+      // The divider, exactly at x=290.
+      box({ width: 1, height: 340, backgroundColor: dark.border }),
+      box(
+        { flexDirection: "column", gap: 20, paddingLeft: OG.margin, paddingRight: OG.margin, flex: 1 },
         [
-          texto(
+          text(
             { fontFamily: fonts.sans, fontSize: 72, fontWeight: 700, color: dark.textPrimary, lineHeight: 1.05 },
-            datos.title ?? naming.wordmark
+            data.title ?? naming.wordmark
           ),
-          texto(
+          text(
             { fontFamily: fonts.sans, fontSize: 28, fontWeight: 400, color: dark.textSecondary, lineHeight: 1.4 },
-            datos.description ?? tagline.corto
+            data.description ?? tagline.short
           )
         ]
       )
@@ -315,8 +316,8 @@ function plantillaDefecto(datos = {}) {
 }
 
 exports.OG = OG;
-exports.plantillaArticulo = plantillaArticulo;
-exports.plantillaBase = tarjeta;
-exports.plantillaCharla = plantillaCharla;
-exports.plantillaCurso = plantillaCurso;
-exports.plantillaDefecto = plantillaDefecto;
+exports.articleTemplate = articleTemplate;
+exports.courseTemplate = courseTemplate;
+exports.defaultTemplate = defaultTemplate;
+exports.plantillaBase = card;
+exports.talkTemplate = talkTemplate;