@eduardoalvarez/arrecife 0.5.0 → 0.6.0

package/dist/catalog-D13txprv.d.cts

@@ -0,0 +1,78 @@
+/**
+ * The brand catalog: which pieces of Tiburoncín exist and what their file is
+ * called. Pure data, no React, so the OG templates and any script can read it
+ * too.
+ *
+ * Adding a new piece means dropping the PNG into `assets/brand/` and adding one
+ * line here. The type updates itself and autocomplete offers it immediately.
+ */
+/**
+ * The faces. They are used only in empty states, confirmations, errors, course
+ * progress and celebration — never in a hero, pricing, services, contact or CV.
+ * That is why `EmptyState` takes a face and `PageHeader` does not.
+ */
+declare const faces: {
+    readonly annoyed: "face-annoyed.png";
+    readonly confused: "face-confused.png";
+    readonly hearts: "face-hearts.png";
+    readonly laughing: "face-laughing.png";
+    readonly shades: "face-shades.png";
+    readonly waiting: "face-waiting.png";
+    readonly wink: "face-wink.png";
+};
+/** Full-body poses. */
+declare const poses: {
+    readonly desk: "pose-desk.png";
+    readonly 'laptop-coffee': "pose-laptop-coffee.png";
+    readonly peek: "pose-peek.png";
+    readonly surf: "pose-surf.png";
+};
+/**
+ * The fin, in its two variants.
+ *
+ * The fin's body is nearly black, so on a dark background the two-blue variant
+ * disappears. `foam` is the single-ink silhouette — 94 % of its pixels are
+ * `#EDF4F3`, which is the foam token — and it is the one that reads over abyss.
+ */
+declare const fins: {
+    /** Two blues. For light backgrounds. */
+    readonly color: "fin.png";
+    /** Single-ink silhouette. For dark backgrounds. */
+    readonly foam: "fin-foam.png";
+};
+/**
+ * The assigned use of each face, from the manual's inventory.
+ *
+ * This is not loose documentation: it is the part of the humour contract that
+ * can be written as data. The manual assigns a situation to each face, and
+ * without this the choice was made by eye at every call site — which is how
+ * `annoyed` ends up on a confirmation and `hearts` on an error.
+ *
+ * One is missing: the manual lists eight faces and `head-5` (surprise ·
+ * destructive confirmation) has no PNG in `assets/brand/`. When it arrives, it
+ * goes in here and in `faces` at the same time.
+ */
+declare const faceUsage: {
+    readonly wink: "Forms, a friendly footnote";
+    readonly waiting: "No results, waiting state";
+    readonly laughing: "Success, subscription confirmed";
+    readonly shades: "Module or course completed";
+    readonly hearts: "Gratitude, article OG";
+    readonly confused: "404, page not found";
+    readonly annoyed: "Server error, build failure";
+};
+type Face = keyof typeof faces;
+type Pose = keyof typeof poses;
+type Fin = keyof typeof fins;
+/** Which background the piece will sit on. It decides which fin is used. */
+type Background = 'dark' | 'light';
+/**
+ * Where the PNGs are served from. `/brand` by default, which is where they
+ * already live in all five projects (`public/brand/`), so there is nothing to
+ * configure.
+ */
+declare const ASSETS_PATH = "/brand";
+declare const faceList: readonly Face[];
+declare const poseList: readonly Pose[];
+
+export { ASSETS_PATH as A, type Background as B, type Face as F, type Pose as P, type Fin as a, faceUsage as b, faces as c, fins as d, poses as e, faceList as f, poseList as p };

package/dist/catalog-D13txprv.d.ts

@@ -0,0 +1,78 @@
+/**
+ * The brand catalog: which pieces of Tiburoncín exist and what their file is
+ * called. Pure data, no React, so the OG templates and any script can read it
+ * too.
+ *
+ * Adding a new piece means dropping the PNG into `assets/brand/` and adding one
+ * line here. The type updates itself and autocomplete offers it immediately.
+ */
+/**
+ * The faces. They are used only in empty states, confirmations, errors, course
+ * progress and celebration — never in a hero, pricing, services, contact or CV.
+ * That is why `EmptyState` takes a face and `PageHeader` does not.
+ */
+declare const faces: {
+    readonly annoyed: "face-annoyed.png";
+    readonly confused: "face-confused.png";
+    readonly hearts: "face-hearts.png";
+    readonly laughing: "face-laughing.png";
+    readonly shades: "face-shades.png";
+    readonly waiting: "face-waiting.png";
+    readonly wink: "face-wink.png";
+};
+/** Full-body poses. */
+declare const poses: {
+    readonly desk: "pose-desk.png";
+    readonly 'laptop-coffee': "pose-laptop-coffee.png";
+    readonly peek: "pose-peek.png";
+    readonly surf: "pose-surf.png";
+};
+/**
+ * The fin, in its two variants.
+ *
+ * The fin's body is nearly black, so on a dark background the two-blue variant
+ * disappears. `foam` is the single-ink silhouette — 94 % of its pixels are
+ * `#EDF4F3`, which is the foam token — and it is the one that reads over abyss.
+ */
+declare const fins: {
+    /** Two blues. For light backgrounds. */
+    readonly color: "fin.png";
+    /** Single-ink silhouette. For dark backgrounds. */
+    readonly foam: "fin-foam.png";
+};
+/**
+ * The assigned use of each face, from the manual's inventory.
+ *
+ * This is not loose documentation: it is the part of the humour contract that
+ * can be written as data. The manual assigns a situation to each face, and
+ * without this the choice was made by eye at every call site — which is how
+ * `annoyed` ends up on a confirmation and `hearts` on an error.
+ *
+ * One is missing: the manual lists eight faces and `head-5` (surprise ·
+ * destructive confirmation) has no PNG in `assets/brand/`. When it arrives, it
+ * goes in here and in `faces` at the same time.
+ */
+declare const faceUsage: {
+    readonly wink: "Forms, a friendly footnote";
+    readonly waiting: "No results, waiting state";
+    readonly laughing: "Success, subscription confirmed";
+    readonly shades: "Module or course completed";
+    readonly hearts: "Gratitude, article OG";
+    readonly confused: "404, page not found";
+    readonly annoyed: "Server error, build failure";
+};
+type Face = keyof typeof faces;
+type Pose = keyof typeof poses;
+type Fin = keyof typeof fins;
+/** Which background the piece will sit on. It decides which fin is used. */
+type Background = 'dark' | 'light';
+/**
+ * Where the PNGs are served from. `/brand` by default, which is where they
+ * already live in all five projects (`public/brand/`), so there is nothing to
+ * configure.
+ */
+declare const ASSETS_PATH = "/brand";
+declare const faceList: readonly Face[];
+declare const poseList: readonly Pose[];
+
+export { ASSETS_PATH as A, type Background as B, type Face as F, type Pose as P, type Fin as a, faceUsage as b, faces as c, fins as d, poses as e, faceList as f, poseList as p };

package/dist/chart/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var recharts = require('recharts');
@@ -10,56 +11,56 @@ var jsxRuntime = require('react/jsx-runtime');
 // src/chart/index.tsx
 var typeScale = {
   display: { family: "display", size: 76, lineHeight: 0.96, weight: 800, tracking: "-0.035em" },
-  /** Métricas grandes. Números, no prosa: interlineado 1 y sin descendentes. */
+  /** Large metrics. Numbers, not prose: line height 1 and no descenders. */
   stat: { family: "display", size: 46, lineHeight: 1, weight: 800, tracking: "-0.035em" },
   h1: { family: "display", size: 44, lineHeight: 1.05, weight: 700, tracking: "-0.03em" },
   h2: { family: "display", size: 30, lineHeight: 1.1, weight: 600, tracking: "-0.02em" },
   h3: { family: "display", size: 25, lineHeight: 1.15, weight: 600, tracking: "-0.02em" },
   body: { family: "sans", size: 18, lineHeight: 1.75, weight: 400 },
   /**
-   * 17px. El botón grande y la bajada de las páginas internas.
+   * 17px. The large button, and the deck on interior pages.
    *
-   * Entra como escalón propio porque el documento lo usa DOS veces y en piezas
-   * distintas: «lg 15px 30px r12» con texto de 17, y «h1 44/700 · bajada 17px ·
-   * párrafo de contexto 15px». Un solo uso no habría justificado partir la
-   * distancia entre `ui` (15) y `body` (18); dos sí.
+   * It earns its own step because the identity document uses it TWICE, in two
+   * different pieces: «lg 15/30 r12» with 17px text, and «h1 44/700 · deck 17px
+   * · context paragraph 15px». One use would not have justified splitting the
+   * gap between `ui` (15) and `body` (18); two did.
    */
   lead: { family: "sans", size: 17, lineHeight: 1.5, weight: 400 },
   ui: { family: "sans", size: 15, lineHeight: 1.6, weight: 400 },
   label: { family: "sans", size: 13, lineHeight: 1.5, weight: 500 },
   /**
-   * La escala de las etiquetas de estado: sans 12.5/500, cuadrada.
+   * The status-badge scale: sans 12.5/500, squared off.
    *
-   * Es medio píxel por debajo de `label`, y esta vez el medio píxel sí importa:
-   * una etiqueta de estado va dentro de una tabla o al lado de un título, y a 13
-   * competía con el texto que acompaña. El documento la da en 12.5 y se ve.
+   * That is half a pixel below `label`, and this time the half pixel matters: a
+   * status badge sits inside a table or next to a title, and at 13 it competed
+   * with the text it accompanies. The document specifies 12.5 and it shows.
    */
   tag: { family: "sans", size: 12.5, lineHeight: 1.4, weight: 500 },
   /**
-   * La escala de categoría y métrica: mono 11.5.
+   * The category and metric scale: mono 11.5.
    *
-   * Rompe el suelo de `limits.minScreenPx`, y es a propósito. Ese suelo protege
-   * al TEXTO —lo que se lee en una frase—, y una píldora de una palabra no es
-   * texto corrido: es una marca. El contraste sigue medido y pasa AA (plancton
-   * 5.57:1 sobre abismo), que es la parte que no se negocia.
+   * It breaks the floor set by `limits.minScreenPx`, deliberately. That floor
+   * protects TEXT — what you read in a sentence — and a one-word pill is not
+   * running text: it is a mark. Contrast is still measured and still passes AA
+   * (plankton 5.57:1 over abyss), which is the part that is not negotiable.
    *
-   * A 13 las tres familias de etiqueta salían del tamaño de un botón pequeño y
-   * pesaban más que el título que acompañan. Ver `docs/decisiones.md`.
+   * At 13 the three badge families grew past the size of a small button and
+   * outweighed the title they accompany. See `docs/decisions.md`.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
-   * Mono SIN transformar: fechas, rutas, versiones, nombres de archivo, la firma
-   * del footer y las métricas de etiqueta. Es la mayoría del mono del sistema.
+   * Mono with NO transform: dates, paths, versions, file names, the footer
+   * signature and metric labels. It is most of the mono in the system.
    *
-   * Existe porque `eyebrow` lleva `uppercase` de fábrica y no es una preferencia
-   * que se pueda apagar: es la escala del eyebrow. Un `18 ago 2026` en versalitas
-   * o un `pose-laptop-coffee.png` en mayúsculas están mal, y sin este escalón la
-   * única salida era un `normal-case` en cada sitio de uso.
+   * It exists because `eyebrow` ships `uppercase` and that is not a preference
+   * you can switch off: it IS the eyebrow scale. An `18 Aug 2026` in small caps
+   * or a `pose-laptop-coffee.png` in all caps are wrong, and without this step
+   * the only way out was a `normal-case` at every call site.
    *
-   * El documento dice 12.5. Son 13 por la misma razón por la que `textMuted` se
-   * corrigió: `limits.minScreenPx` es 13 y plancton «nunca bajo 13px». Esta
-   * escala es justo donde se escriben las metas en muted, así que ponerla en
-   * 12.5 habría dejado ilegible su uso más común por medio píxel.
+   * The document says 12.5. This is 13 for the same reason `textMuted` was
+   * corrected: `limits.minScreenPx` is 13 and plankton is «never under 13px».
+   * This scale is exactly where muted metadata gets written, so putting it at
+   * 12.5 would have made its most common use illegible by half a pixel.
    */
   meta: { family: "mono", size: 13, lineHeight: 1.6, weight: 400 },
   eyebrow: { family: "mono", size: 12, tracking: "0.12em", transform: "uppercase" }
@@ -75,8 +76,24 @@ var control = {
   sm: 14,
   md: 22,
   lg: 30,
-  /** Botón de icono: cuadrado, sin texto. */
-  icon: 42
+  /** Icon button: square, no text. */
+  icon: 42,
+  /**
+   * The dense icon button, 32×32.
+   *
+   * 42 is the right measure for a control you hit with a thumb, and the four
+   * reading sites are where that fits. `cursos` is the odd one out: it is the
+   * only admin app of the set, with three actions per table row, and at 42 the
+   * row grows with them — the original used 24 and 28.
+   *
+   * It is 32 and not 28 because 32 is `sm`'s height. A dense icon button lines
+   * up with a small text button, so a toolbar mixing the two stays on one
+   * baseline; 28 would have been a fifth height that matches nothing.
+   *
+   * It does not replace `icon`. A page's primary action stays at 42; this is for
+   * a row of a table. See `docs/decisions.md` § 22.
+   */
+  iconSm: 32
 };
 var spacing = {
   stepXs: 8,
@@ -88,67 +105,52 @@ var spacing = {
 };
 
 // src/lib/cn.ts
-var kebab = (nombre) => nombre.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
-var escalas = Object.keys(typeScale);
-var radios = Object.keys(radius);
-var espacios = Object.keys(spacing).map(kebab);
-var controles = Object.keys(control).map((nombre) => `control-${kebab(nombre)}`);
+var kebab = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+var scales = Object.keys(typeScale);
+var radii = Object.keys(radius);
+var namespaces = Object.keys(spacing).map(kebab);
+var controls = Object.keys(control).map((name) => `control-${kebab(name)}`);
 var twMerge = tailwindMerge.extendTailwindMerge({
   extend: {
     classGroups: {
-      "font-size": [{ text: escalas }],
-      rounded: [{ rounded: radios }],
-      p: [{ p: espacios }],
-      px: [{ px: [...espacios, ...controles] }],
-      py: [{ py: espacios }],
-      gap: [{ gap: espacios }],
-      size: [{ size: controles }]
+      "font-size": [{ text: scales }],
+      rounded: [{ rounded: radii }],
+      p: [{ p: namespaces }],
+      px: [{ px: [...namespaces, ...controls] }],
+      py: [{ py: namespaces }],
+      gap: [{ gap: namespaces }],
+      size: [{ size: controls }]
     }
   }
 });
 function cn(...inputs) {
   return twMerge(clsx.clsx(inputs));
 }
-var ETIQUETA = {
-  display: "h1",
-  stat: "p",
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  body: "p",
-  lead: "p",
-  ui: "p",
-  label: "span",
-  tag: "span",
-  meta: "p",
-  chip: "span",
-  eyebrow: "p"
-};
-var texto = classVarianceAuthority.cva("", {
+var text = classVarianceAuthority.cva("", {
   variants: {
     variant: {
       display: "text-display font-display",
-      // Métricas grandes: 46px de display. Es la única escala pensada para un
-      // número, y por eso el interlineado es 1.
+      // Large metrics: 46px of display. It is the only scale designed for a
+      // number, which is why its line height is 1.
       stat: "text-stat font-display",
       h1: "text-h1 font-display",
       h2: "text-h2 font-display",
       h3: "text-h3 font-display",
       body: "text-body font-sans",
-      // 17px: la bajada de las páginas internas y el botón grande.
+      // 17px: the deck on interior pages and the large button.
       lead: "text-lead font-sans",
       ui: "text-ui font-sans",
       label: "text-label font-sans",
-      // Las dos escalas de etiqueta. `tag` es el estado (sans 12.5/500) y `chip`
-      // la categoría y la métrica (mono 11.5). Ninguna transforma el texto.
+      // The two badge scales. `tag` is status (sans 12.5/500) and `chip` is
+      // category and metric (mono 11.5). Neither transforms the text.
       tag: "text-tag font-sans",
       chip: "text-chip font-mono",
-      // Mono SIN transformar: fechas, rutas, versiones, nombres de archivo y la
-      // firma del footer. Es el escalón que faltaba, y por el que cada sitio de
-      // uso terminaba escribiendo `variant="eyebrow" className="normal-case"`.
+      // Mono with NO transform: dates, paths, versions, file names and the
+      // footer signature. It is the step that was missing, and the reason every
+      // call site ended up writing `variant="eyebrow" className="normal-case"`.
       meta: "text-meta font-mono",
-      // `uppercase` no cabe en un token de tamaño: text-transform no es un
-      // modificador de --text-*. Por eso lo pone la variante y no theme.css.
+      // `uppercase` does not fit in a size token: text-transform is not a
+      // modifier of --text-*. Which is why the variant sets it, not theme.css.
       eyebrow: "text-eyebrow font-mono uppercase"
     },
     tone: {
@@ -164,6 +166,21 @@ var texto = classVarianceAuthority.cva("", {
   },
   defaultVariants: { variant: "body", tone: "primary" }
 });
+var LABEL = {
+  display: "h1",
+  stat: "p",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  body: "p",
+  lead: "p",
+  ui: "p",
+  label: "span",
+  tag: "span",
+  meta: "p",
+  chip: "span",
+  eyebrow: "p"
+};
 function Text({
   className,
   variant,
@@ -174,19 +191,19 @@ function Text({
   children,
   ...props
 }) {
-  const escala = variant ?? "body";
-  const limitar = measure ?? escala === "body";
-  const clases = cn(texto({ variant, tone }), limitar && "max-w-measure", className);
+  const scale = variant ?? "body";
+  const clamp = measure ?? scale === "body";
+  const classes = cn(text({ variant, tone }), clamp && "max-w-measure", className);
   if (asChild) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: clases, ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: classes, ...props, children });
   }
-  const Etiqueta = as ?? ETIQUETA[escala];
-  return /* @__PURE__ */ jsxRuntime.jsx(Etiqueta, { className: clases, ...props, children });
+  const Label = as ?? LABEL[scale];
+  return /* @__PURE__ */ jsxRuntime.jsx(Label, { className: classes, ...props, children });
 }
-function colorDeSerie(indice) {
-  return `var(--color-serie-${Math.abs(indice) % 4 + 1})`;
+function seriesColor(index) {
+  return `var(--color-series-${Math.abs(index) % 4 + 1})`;
 }
-var COLORES_DE_SERIE = [0, 1, 2, 3].map(colorDeSerie);
+var SERIES_COLORS = [0, 1, 2, 3].map(seriesColor);
 function ChartContainer({
   label,
   summary,
@@ -201,9 +218,9 @@ function ChartContainer({
       "aria-label": label,
       className: cn(
         "w-full",
-        // La rejilla y los ejes, con los tokens del sistema en vez de los grises
-        // por defecto de Recharts. Van como variantes de descendiente porque los
-        // nodos los pinta la librería y no hay dónde ponerles una clase.
+        // The grid and the axes, with the system's tokens instead of Recharts'
+        // default greys. They go as descendant variants because the nodes are
+        // painted by the library and there is nowhere to put a class on them.
         "[&_.recharts-cartesian-grid_line]:stroke-hairline",
         "[&_.recharts-cartesian-axis-line]:stroke-hairline",
         "[&_.recharts-cartesian-axis-tick_text]:fill-text-muted",
@@ -253,7 +270,7 @@ function ChartTooltipContent({
             {
               "aria-hidden": "true",
               className: "rounded-chip size-2 shrink-0",
-              style: { backgroundColor: item.color ?? colorDeSerie(i) }
+              style: { backgroundColor: item.color ?? seriesColor(i) }
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", variant: "label", tone: "secondary", className: "font-normal", children: item.name }),
@@ -271,17 +288,17 @@ function ChartLegendContent({ payload, className }) {
       {
         "aria-hidden": "true",
         className: "rounded-chip size-2 shrink-0",
-        style: { backgroundColor: item.color ?? colorDeSerie(i) }
+        style: { backgroundColor: item.color ?? seriesColor(i) }
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", variant: "label", tone: "secondary", className: "font-normal", children: item.value })
   ] }, `${String(item.dataKey ?? item.value ?? i)}`)) });
 }
 
-exports.COLORES_DE_SERIE = COLORES_DE_SERIE;
 exports.ChartContainer = ChartContainer;
 exports.ChartLegend = ChartLegend;
 exports.ChartLegendContent = ChartLegendContent;
 exports.ChartTooltip = ChartTooltip;
 exports.ChartTooltipContent = ChartTooltipContent;
-exports.colorDeSerie = colorDeSerie;
+exports.SERIES_COLORS = SERIES_COLORS;
+exports.seriesColor = seriesColor;