@eduardoalvarez/arrecife 0.2.0 → 0.3.0

package/dist/og/index.js

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

package/dist/shiki/index.js

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

package/dist/tokens/index.cjs

@@ -158,11 +158,11 @@ var control = {
   icon: 42
 };
 var spacing = {
-  xs: 8,
-  sm: 12,
-  md: 16,
-  lg: 26,
-  xl: 40,
+  stepXs: 8,
+  stepSm: 12,
+  stepMd: 16,
+  stepLg: 26,
+  stepXl: 40,
   section: 96
 };
 var size = {

package/dist/tokens/index.d.cts

@@ -289,12 +289,34 @@ declare const control: {
     /** Botón de icono: cuadrado, sin texto. */
     readonly icon: 42;
 };
+/**
+ * El ritmo de página. Los cinco escalones llevan `step` en el nombre, y no es
+ * decoración: es la corrección de un bug que no dio la cara en ningún sitio.
+ *
+ * En Tailwind v4, `--spacing-*` no alimenta solo `p-*`, `m-*` y `gap-*`:
+ * también resuelve `w-*`, `h-*`, `max-w-*`, `min-w-*`, `basis-*` y `size-*`, y
+ * ahí GANA a la escala `--container-*`. Los escalones se llamaban `xs, sm, md,
+ * lg, xl`, que son exactamente los nombres de esa escala, así que cualquier
+ * proyecto que importara `theme.css` se quedaba con `max-w-sm` valiendo 12px en
+ * vez de 384px. Nada avisaba: ni el build, ni los tipos, ni Storybook, ni la
+ * suite —la librería no usa esas utilidades por dentro—. Se descubrió en
+ * producción, con el párrafo de un hero a una palabra por línea.
+ *
+ * Redeclarar `--container-sm` NO lo arregla: `--spacing-*` gana la resolución.
+ * La única salida es que la librería no use esos nombres.
+ *
+ * El prefijo sigue el patrón que ya tenía `control`: un grupo con nombre propio
+ * dentro del espacio `--spacing-*`. `scripts/check-tokens-namespace.mjs` impide
+ * la recaída.
+ *
+ * `section` no lleva prefijo porque no choca con nada de Tailwind.
+ */
 declare const spacing: {
-    readonly xs: 8;
-    readonly sm: 12;
-    readonly md: 16;
-    readonly lg: 26;
-    readonly xl: 40;
+    readonly stepXs: 8;
+    readonly stepSm: 12;
+    readonly stepMd: 16;
+    readonly stepLg: 26;
+    readonly stepXl: 40;
     readonly section: 96;
 };
 declare const size: {
@@ -567,11 +589,11 @@ declare const tokens: {
         readonly icon: 42;
     };
     readonly spacing: {
-        readonly xs: 8;
-        readonly sm: 12;
-        readonly md: 16;
-        readonly lg: 26;
-        readonly xl: 40;
+        readonly stepXs: 8;
+        readonly stepSm: 12;
+        readonly stepMd: 16;
+        readonly stepLg: 26;
+        readonly stepXl: 40;
         readonly section: 96;
     };
     readonly size: {

package/dist/tokens/index.d.ts

@@ -289,12 +289,34 @@ declare const control: {
     /** Botón de icono: cuadrado, sin texto. */
     readonly icon: 42;
 };
+/**
+ * El ritmo de página. Los cinco escalones llevan `step` en el nombre, y no es
+ * decoración: es la corrección de un bug que no dio la cara en ningún sitio.
+ *
+ * En Tailwind v4, `--spacing-*` no alimenta solo `p-*`, `m-*` y `gap-*`:
+ * también resuelve `w-*`, `h-*`, `max-w-*`, `min-w-*`, `basis-*` y `size-*`, y
+ * ahí GANA a la escala `--container-*`. Los escalones se llamaban `xs, sm, md,
+ * lg, xl`, que son exactamente los nombres de esa escala, así que cualquier
+ * proyecto que importara `theme.css` se quedaba con `max-w-sm` valiendo 12px en
+ * vez de 384px. Nada avisaba: ni el build, ni los tipos, ni Storybook, ni la
+ * suite —la librería no usa esas utilidades por dentro—. Se descubrió en
+ * producción, con el párrafo de un hero a una palabra por línea.
+ *
+ * Redeclarar `--container-sm` NO lo arregla: `--spacing-*` gana la resolución.
+ * La única salida es que la librería no use esos nombres.
+ *
+ * El prefijo sigue el patrón que ya tenía `control`: un grupo con nombre propio
+ * dentro del espacio `--spacing-*`. `scripts/check-tokens-namespace.mjs` impide
+ * la recaída.
+ *
+ * `section` no lleva prefijo porque no choca con nada de Tailwind.
+ */
 declare const spacing: {
-    readonly xs: 8;
-    readonly sm: 12;
-    readonly md: 16;
-    readonly lg: 26;
-    readonly xl: 40;
+    readonly stepXs: 8;
+    readonly stepSm: 12;
+    readonly stepMd: 16;
+    readonly stepLg: 26;
+    readonly stepXl: 40;
     readonly section: 96;
 };
 declare const size: {
@@ -567,11 +589,11 @@ declare const tokens: {
         readonly icon: 42;
     };
     readonly spacing: {
-        readonly xs: 8;
-        readonly sm: 12;
-        readonly md: 16;
-        readonly lg: 26;
-        readonly xl: 40;
+        readonly stepXs: 8;
+        readonly stepSm: 12;
+        readonly stepMd: 16;
+        readonly stepLg: 26;
+        readonly stepXl: 40;
         readonly section: 96;
     };
     readonly size: {

package/dist/tokens/index.js

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

package/dist/tokens/theme.css

@@ -100,11 +100,11 @@
   --radius-panel: 16px;
   --radius-pill: 999px;
 
-  --spacing-xs: 8px;
-  --spacing-sm: 12px;
-  --spacing-md: 16px;
-  --spacing-lg: 26px;
-  --spacing-xl: 40px;
+  --spacing-step-xs: 8px;
+  --spacing-step-sm: 12px;
+  --spacing-step-md: 16px;
+  --spacing-step-lg: 26px;
+  --spacing-step-xl: 40px;
   --spacing-section: 96px;
 
   --spacing-control-sm: 14px;

package/llms.txt

@@ -82,6 +82,21 @@ Bricolage Grotesque (`font-display`), Geist (`font-sans`) y JetBrains Mono
 (`font-mono`) como prefiera —`next/font`, `@fontsource`, un `<link>`—. Si no las
 carga, el navegador cae al fallback y la tipografía se ve mal.
 
+El nombre tiene que coincidir **exactamente** con el que declaran los tokens, y
+esto ya ha fallado en dos proyectos:
+
+| Utilidad | Nombre que pide el token |
+| --- | --- |
+| `font-display` | `"Bricolage Grotesque"` |
+| `font-sans` | `"Geist"` |
+| `font-mono` | `"JetBrains Mono"` |
+
+Varios paquetes de fuentes las publican como `"Bricolage Grotesque Variable"` o
+`"Geist Variable"`. Registrar el `@font-face` con ese nombre NO carga lo que los
+tokens piden: la familia cae al sistema en silencio, sin error en consola. El
+`font-family` del `@font-face` es un alias que elige el proyecto, así que se
+escribe con el nombre de la tabla.
+
 ## Qué importar de dónde
 
 `exports` tiene cinco subrutas y la elección importa: tres de ellas **no
@@ -122,7 +137,8 @@ mismo valor está disponible en los dos sitios y no pueden discrepar.
 | `typeScale.h1` | `--text-h1` | `text-h1` (arrastra line-height, weight y tracking) |
 | `fonts.display` | `--font-display` | `font-display` |
 | `radius.card` | `--radius-card` | `rounded-card` |
-| `spacing.lg` | `--spacing-lg` | `p-lg`, `gap-lg`, `mb-lg` |
+| `spacing.stepLg` | `--spacing-step-lg` | `p-step-lg`, `gap-step-lg`, `mb-step-lg` |
+| `spacing.section` | `--spacing-section` | `py-section`, `mb-section` |
 | `control.md` | `--spacing-control-md` | `px-control-md` |
 | `control.icon` | `--spacing-control-icon` | `size-control-icon` (42×42) |
 | `gradient[modo].hero` | `--gradient-hero` | `degradado-hero` |
@@ -135,6 +151,15 @@ mismo valor está disponible en los dos sitios y no pueden discrepar.
 `transition-standard` es la única transición del sistema y solo puede animar
 color y borde: así está escrita la utilidad.
 
+**Los escalones de espaciado llevan `step` en el nombre y no es opcional.**
+`p-md` no es una clase de Arrecife: en un proyecto con Tailwind v4 cae en la
+escala numérica y no hace nada visible. El ritmo de página es `p-step-md`,
+`gap-step-sm`, `py-step-xl`. Llevan prefijo porque `xs, sm, md, lg, xl` son los
+nombres de la escala `--container-*` de Tailwind, y un `--spacing-md` propio se
+comía `max-w-md` en todo el proyecto sin avisar de nada. `max-w-*`, `w-*` y `h-*`
+son de Tailwind y se usan tal cual. Guía de migración desde la 0.2.0:
+<https://github.com/Proskynete/arrecife/blob/main/docs/migracion-0.3.md>.
+
 ## Reglas del sistema que el código consumidor no debe romper
 
 Son decisiones de identidad, ya medidas. Romperlas produce código que compila y
@@ -1151,7 +1176,7 @@ no monta React, esa subruta es la que hay que importar.
 | `shadow` | `{ readonly standard: "0 1px 2px rgba(0, 0, 0, 0.35)"; }` | Un solo nivel. No hay escala de elevación. |
 | `sintaxis` | `{ fondo, identificador, literal, palabraClave, comentario, invalido }` | La paleta del resaltado de sintaxis. |
 | `size` | `{ readonly nav: 64; readonly content: 760; readonly wide: 1180; }` |  |
-| `spacing` | `{ readonly xs: 8; readonly sm: 12; readonly md: 16; readonly lg: 26; readonly xl: 40; readonly section: 96; }` |  |
+| `spacing` | `{ readonly stepXs: 8; readonly stepSm: 12; readonly stepMd: 16; readonly stepLg: 26; readonly stepXl: 40; readonly section: 96; }` | El ritmo de página. Los cinco escalones llevan `step` en el nombre, y no es decoración: es la corrección de un bug que no dio la cara en ningún sitio. |
 | `tagline` | `{ largo, corto, en }` |  |
 | `tokens` | `{ colors, brand, fonts, typeScale, limits, radius, control, spacing, size, gradient, sintaxis, shadow, motion, tagline, naming }` | Todos los tokens en un solo objeto, para plantillas Satori y generadores. |
 | `typeScale` | `{ display, stat, h1, h2, h3, body, lead, ui, label, tag, chip, meta, eyebrow }` |  |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduardoalvarez/arrecife",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Librería de componentes de la identidad visual de Eduardo Álvarez",
   "license": "MIT",
   "author": "Eduardo Esteban Álvarez Castañeda <soy@eduardoalvarez.dev>",
@@ -53,20 +53,22 @@
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "pnpm check:tokens && tsup && pnpm build:tokens && pnpm build:llms",
+    "build": "pnpm check:tokens && pnpm check:namespace && tsup && pnpm build:tokens && pnpm build:llms",
     "build:tokens": "node scripts/build-tokens.mjs",
     "build:llms": "node scripts/build-llms.mjs",
     "check:tokens": "node scripts/check-tokens-purity.mjs",
+    "check:namespace": "node scripts/check-tokens-namespace.mjs",
     "check:llms": "node scripts/build-llms.mjs --check",
     "check:exports": "node scripts/check-package-exports.mjs",
     "check:release": "node scripts/check-release-config.mjs",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
-    "test": "pnpm test:oscuro && pnpm test:claro",
+    "test": "pnpm test:unidad && pnpm test:oscuro && pnpm test:claro",
     "test:watch": "vitest --project storybook",
     "storybook": "pnpm build:tokens && storybook dev -p 6006",
     "build-storybook": "pnpm build:tokens && storybook build",
     "prepublishOnly": "pnpm build",
+    "test:unidad": "vitest run --project unidad",
     "test:oscuro": "vitest run --project storybook",
     "test:claro": "STORYBOOK_THEME=claro vitest run --project storybook"
   },