@eduardoalvarez/arrecife 0.5.1 → 0.7.0

package/dist/chunk-OMKSESQB.js

@@ -0,0 +1,300 @@
+// src/tokens/tokens.ts
+var dark = {
+  background: "#091319",
+  //          abyss · page background
+  surface: "#10202B",
+  //             trench · cards and panels
+  surfaceRaised: "#17303E",
+  //       current · menus, active tabs
+  border: "#22414F",
+  //              control borders
+  hairline: "#1E3441",
+  //            subtle dividers
+  hairlineHover: "#2C4D5D",
+  //       hairline on card hover
+  textPrimary: "#EDF4F3",
+  //         foam              16.84:1
+  textSecondary: "#A7BCC4",
+  //       haze               9.50:1
+  textMuted: "#71919C",
+  //           plankton           5.57:1  never under 13px
+  accent: "#35D6C0",
+  //              biolume           10.31:1  interactive
+  accentHover: "#5FE3D1",
+  accentOn: "#06171A",
+  //            ink over biolume
+  warm: "#F2A65A",
+  //                sand               9.28:1  human and conversion
+  warmHover: "#F7BB7D",
+  warmOn: "#2A1605",
+  //              ink over sand
+  success: "#4FB477",
+  warning: "#E8A33D",
+  error: "#E15757",
+  //                                 4.51:1 over surface
+  /**
+   * The destructive fill. It is NOT `error`, and the difference is the role.
+   *
+   * `error` is a TEXT color: it has to read against a dark surface, so it sits
+   * mid-red. `danger` is a FILL: what has to read is the ink ON TOP of it, so it
+   * goes lighter. Same reasoning as `accent` and `accentOn` — one is measured
+   * against the page, the other against what it carries.
+   *
+   * Measured: ink 6.53:1 over the fill and 7.92:1 over the hover; the fill
+   * itself 6.71:1 over abyss, 5.94 over surface and 4.91 over surfaceRaised, so
+   * the outline variant reads as text on all three.
+   */
+  danger: "#F4736B",
+  dangerHover: "#F78D86",
+  dangerOn: "#2B0A08"
+  //             ink over danger    6.53:1
+};
+var light = {
+  background: "#F6F2EA",
+  //          paper
+  surface: "#FFFFFF",
+  surfaceRaised: "#EFE9DE",
+  border: "#E6DFD2",
+  hairline: "#EBE6DC",
+  hairlineHover: "#D3C8B2",
+  //       hairline on card hover
+  textPrimary: "#0B1524",
+  //                           16.40:1
+  textSecondary: "#3D4B58",
+  textMuted: "#626A75",
+  //                             4.53:1 over surfaceRaised
+  accent: "#0D7C6F",
+  //              dark biolume       4.55:1
+  accentHover: "#0C7466",
+  accentOn: "#FFFFFF",
+  warm: "#A65B27",
+  //                dark sand          4.54:1
+  warmHover: "#96511F",
+  warmOn: "#FFF7EE",
+  success: "#0F6B52",
+  warning: "#8D6111",
+  //                               4.51:1 over surfaceRaised
+  error: "#C0392B",
+  /**
+   * In light mode `danger` and `error` land on the same hex, and that is not an
+   * oversight: over paper a red dark enough to carry white ink is also the red
+   * that reads as text. In dark they part company because the fill has to be
+   * lighter than the text color, not darker.
+   *
+   * Measured: ink 5.11:1 over the fill and 6.61:1 over the hover; the fill
+   * itself 4.87:1 over paper, 5.44 over surface and 4.50 over surfaceRaised —
+   * the last one is exactly on the AA line, which is where every light semantic
+   * in this palette sits.
+   */
+  danger: "#C0392B",
+  dangerHover: "#A32F22",
+  dangerOn: "#FFF6F4"
+  //                              5.11:1 over danger
+};
+var colors = { dark, light };
+var brand = {
+  /** The mascot's body. 4.22:1 → FILL ONLY, NEVER text. */
+  body: "#3E7CB1",
+  /** Spot pattern. */
+  spots: "#C2D7E7",
+  /** Hull · outline, and the background of code blocks. */
+  hull: "#0B1524"
+};
+var fonts = {
+  /** Headlines and large numbers ONLY. Never body copy. */
+  display: '"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif',
+  /** Body and interface. */
+  sans: '"Geist", ui-sans-serif, system-ui, sans-serif',
+  /** Code, paths, labels, metadata, the CLI signature. */
+  mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
+};
+var typeScale = {
+  display: { family: "display", size: 76, lineHeight: 0.96, weight: 800, tracking: "-0.035em" },
+  /** 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. The large button, and the deck on interior pages.
+   *
+   * 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 },
+  /**
+   * The status-badge scale: sans 12.5/500, squared off.
+   *
+   * 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 },
+  /**
+   * The category and metric scale: mono 11.5.
+   *
+   * 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.
+   *
+   * 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 with NO transform: dates, paths, versions, file names, the footer
+   * signature and metric labels. It is most of the mono in the system.
+   *
+   * 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.
+   *
+   * 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" }
+};
+var limits = {
+  /** Absolute minimum on screen. */
+  minScreenPx: 13,
+  /** Absolute minimum in print. */
+  minPrintPt: 12,
+  /** Maximum body measure. */
+  measure: "68ch"
+};
+var radius = {
+  chip: 6,
+  control: 10,
+  card: 14,
+  panel: 16,
+  pill: 999
+};
+var control = {
+  sm: 14,
+  md: 22,
+  lg: 30,
+  /** 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,
+  stepSm: 12,
+  stepMd: 16,
+  stepLg: 26,
+  stepXl: 40,
+  section: 96
+};
+var size = {
+  /** Navigation bar height. */
+  nav: 64,
+  /**
+   * The bar when it shares the screen with a sidebar.
+   *
+   * It is not «a smaller bar because it looks better». At 64 the header of an
+   * app shell competes with the rail beside it for the same corner, and the two
+   * together eat the top of the content area. 56 is what `cursos` had arrived at
+   * on its own, and it is the same reasoning as `control.iconSm`: the one admin
+   * app of the five is denser than the four reading sites. See
+   * `docs/decisions.md` § 30.
+   */
+  navCompact: 56,
+  /**
+   * The admin sidebar, and the rail it collapses to.
+   *
+   * They are tokens and not the consumer's `w-*` because a collapsible sidebar
+   * has to know BOTH: the layout beside it reserves one of the two, and two
+   * numbers written by hand in two files drift the first time one of them moves.
+   * A sidebar that never collapses is still just a box the layout sizes.
+   *
+   * 56 is the rail: `navCompact`'s height, so a panel's bar and its rail meet in
+   * a square corner instead of a step.
+   */
+  sidebar: 256,
+  sidebarRail: 56,
+  /** Reading column width. */
+  content: 760,
+  /** Maximum page width. */
+  wide: 1180
+};
+var syntax = {
+  /** The hull. It is the block background in both modes. */
+  background: brand.hull,
+  /** Identifiers, functions, types, variables. */
+  identifier: dark.textPrimary,
+  /** Strings, numbers, booleans, null. */
+  literal: dark.accent,
+  /** Keywords, control flow, `import`, `this`. */
+  keyword: dark.warm,
+  /** Comments and punctuation. */
+  comment: dark.textMuted,
+  /** `markup.deleted`, `invalid`. */
+  invalid: dark.error
+};
+var series = {
+  dark: [dark.accent, dark.warm, brand.body, dark.textMuted],
+  light: [light.accent, light.warm, brand.body, light.textMuted]
+};
+var deep = "#0D2129";
+var gradient = {
+  dark: {
+    hero: `linear-gradient(160deg, ${dark.background} 60%, ${deep} 100%)`,
+    section: `linear-gradient(150deg, ${dark.surface} 0%, ${deep} 100%)`,
+    /** The one used by the article OG template. 145°, from the document. */
+    og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
+  },
+  light: {
+    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surface} 100%)`,
+    section: `linear-gradient(150deg, ${light.surface} 0%, ${light.background} 100%)`,
+    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`
+  }
+};
+var shadow = {
+  standard: "0 1px 2px rgba(0, 0, 0, 0.35)"
+};
+var motion = {
+  duration: "150ms",
+  easing: "ease-out",
+  properties: "color, background-color, border-color, fill, stroke"
+};
+var tagline = {
+  /** Hero. */
+  long: "Ayudo a equipos de ingenier\xEDa a escalar con criterio",
+  /** Header, one line. */
+  short: "Ayudo a equipos a escalar con criterio",
+  /** LinkedIn. */
+  en: "Helping engineering teams scale with judgment"
+};
+var naming = {
+  wordmark: "Eduardo \xC1lvarez",
+  mascot: "Tiburonc\xEDn",
+  /** The domain, for the footer CLI signature: `$ cd ~/eduardoalvarez.dev/2026`. */
+  domain: "eduardoalvarez.dev"
+};
+
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale };

package/dist/{chunk-VPT32GPG.js → chunk-TA7TLWW4.js}

@@ -1,4 +1,4 @@
-import { naming, tagline, motion, shadow, series, sintaxis, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-TSPJOM6K.js';
+import { naming, tagline, motion, shadow, series, syntax, gradient, size, spacing, control, radius, limits, typeScale, fonts, brand, colors } from './chunk-OMKSESQB.js';
 
 // src/tokens/index.ts
 var tokens = {
@@ -12,7 +12,7 @@ var tokens = {
   spacing,
   size,
   gradient,
-  sintaxis,
+  syntax,
   series,
   shadow,
   motion,

package/dist/chunk-WGNIRIN7.js

@@ -0,0 +1,42 @@
+import { text } from './chunk-ODBFN44D.js';
+import { cn } from './chunk-2WPWEIMD.js';
+import { Slot } from '@radix-ui/react-slot';
+import 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+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,
+  tone,
+  as,
+  asChild = false,
+  measure,
+  children,
+  ...props
+}) {
+  const scale = variant ?? "body";
+  const clamp = measure ?? scale === "body";
+  const classes = cn(text({ variant, tone }), clamp && "max-w-measure", className);
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { className: classes, ...props, children });
+  }
+  const Label = as ?? LABEL[scale];
+  return /* @__PURE__ */ jsx(Label, { className: classes, ...props, children });
+}
+
+export { Text };

package/dist/doctor.mjs

@@ -0,0 +1,166 @@
+#!/usr/bin/env node
+/**
+ * `npx arrecife doctor` — the two failures a consuming project cannot see.
+ *
+ * Both were found by hand, in the same migration, and both cost hours because
+ * neither produces an error. This is the check the backlog asked for.
+ *
+ * ONE · THE MISSING `@source`. Tailwind only generates the classes it can see,
+ * and it does not look inside `node_modules`. Without the directive every class
+ * the components emit is purged — `p-step-lg`, `rounded-card`, `border-hairline`
+ * — and they render with no padding, no radius and no border. There is no
+ * console error and no undefined class: the component mounts, simply undressed.
+ * It is in the README and it was still forgotten, because until a project uses a
+ * component and not just a token it does not need the line.
+ *
+ * TWO · THE TOKEN NAMESPACE COLLIDING WITH shadcn's. A project coming from
+ * shadcn has `@theme inline { --color-accent: var(--accent); }`, and shadcn's
+ * `--accent` is the hover SURFACE, `#17303E`, while this library's is the brand
+ * turquoise, `#35D6C0`. The result was **88 classes inside the library's own
+ * components** painting grey — 28 `text-accent`, 26 `outline-accent`, 15
+ * `bg-accent`, 12 `border-accent`. Buttons, focus rings and badges came out the
+ * colour of a surface, and it looked as though the migration had done nothing.
+ *
+ * Five names collide in total. Four are harmless because the two sides happen to
+ * agree on the value, which is why the check reports the value on each side
+ * instead of just the name: a collision that agrees is worth knowing about and
+ * is not worth failing over.
+ *
+ * WHY A COMMAND AND NOT A README PARAGRAPH. Both of these WERE a README
+ * paragraph. The whole reason this library exists is that a rule which is only
+ * written down drifts, and a rule that fails silently drifts fastest.
+ */
+import { readdir, readFile } from 'node:fs/promises';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const PACKAGE = '@eduardoalvarez/arrecife';
+const here = dirname(fileURLToPath(import.meta.url));
+const cwd = process.cwd();
+
+const SKIP = new Set(['node_modules', '.git', '.next', 'dist', 'build', 'out', '.astro', 'coverage']);
+
+async function* css(dir) {
+  let items;
+  try {
+    items = await readdir(dir, { withFileTypes: true });
+  } catch {
+    return;
+  }
+  for (const item of items) {
+    if (item.name.startsWith('.') && item.name !== '.') continue;
+    const path = join(dir, item.name);
+    if (item.isDirectory()) {
+      if (SKIP.has(item.name)) continue;
+      yield* css(path);
+    } else if (item.name.endsWith('.css')) {
+      yield path;
+    }
+  }
+}
+
+/** `--name: value;` pairs inside every `@theme` block of a stylesheet. */
+function themeProperties(source) {
+  const found = new Map();
+  // `@theme`, `@theme inline`, `@theme static` — the modifier does not matter
+  // for a name collision, only the name does.
+  const blocks = source.matchAll(/@theme[^{]*\{([\s\S]*?)\n\}/g);
+  for (const [, body] of blocks) {
+    for (const [, name, value] of body.matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)) {
+      found.set(name, value.trim());
+    }
+  }
+  return found;
+}
+
+/** Our own published properties, read from the package rather than hardcoded. */
+async function ours() {
+  for (const candidate of [
+    resolve(here, 'tokens/theme.css'), // published: dist/doctor.mjs beside dist/tokens/
+    resolve(here, '../dist/tokens/theme.css'), // in this repo, run from scripts/
+  ]) {
+    try {
+      return themeProperties(await readFile(candidate, 'utf8'));
+    } catch {
+      /* try the next one */
+    }
+  }
+  return new Map();
+}
+
+const problems = [];
+const notes = [];
+
+const theirs = await ours();
+if (theirs.size === 0) {
+  console.error(`arrecife · could not read ${PACKAGE}'s own theme.css. Run \`pnpm build\` first.`);
+  process.exit(1);
+}
+
+let entries = 0;
+
+for await (const file of css(cwd)) {
+  const source = await readFile(file, 'utf8');
+  const shown = relative(cwd, file);
+
+  // The entry sheet is the one that imports Tailwind. A partial that only holds
+  // an `@theme` block is checked for collisions all the same.
+  const isEntry = /@import\s+["']tailwindcss["']/.test(source);
+  const importsTokens = source.includes(`${PACKAGE}/tokens/theme.css`);
+  const hasSource = /@source\s+["'][^"']*@eduardoalvarez\/arrecife/.test(source);
+
+  if (isEntry) entries += 1;
+
+  if (isEntry && importsTokens && !hasSource) {
+    // The path is relative to the SHEET, not to the project root, which is the
+    // part that gets written wrong: a sheet in `src/styles/` goes up three.
+    const target = relative(dirname(file), join(cwd, 'node_modules', PACKAGE, 'dist'));
+    problems.push(
+      `${shown}\n` +
+        `    imports ${PACKAGE}/tokens/theme.css and has no @source.\n` +
+        `    Every class the components emit is being purged — silently. Add:\n\n` +
+        `      @source "${target.split('\\\\').join('/')}";\n`,
+    );
+  }
+
+  for (const [name, value] of themeProperties(source)) {
+    const mine = theirs.get(name);
+    if (mine === undefined) continue;
+
+    // A value that points at another property cannot be compared here, and it is
+    // exactly the shape the shadcn collision takes.
+    const indirect = value.includes('var(');
+    const same = !indirect && value.toLowerCase() === mine.toLowerCase();
+
+    if (same) {
+      notes.push(`${shown} redefines ${name}, with the same value (${value}). Harmless.`);
+      continue;
+    }
+
+    problems.push(
+      `${shown}\n` +
+        `    redefines ${name}, which ${PACKAGE} owns.\n` +
+        `      yours:    ${value}${indirect ? '   ← points at another property, so it wins silently' : ''}\n` +
+        `      arrecife: ${mine}\n` +
+        `    Every class in the library that uses it takes YOUR value, including the\n` +
+        `    ones inside the library's own components.\n`,
+    );
+  }
+}
+
+if (entries === 0) {
+  console.log('arrecife · no stylesheet importing tailwindcss was found. Nothing to check.');
+  process.exit(0);
+}
+
+for (const note of notes) console.log(`arrecife · note · ${note}`);
+
+if (problems.length > 0) {
+  console.error(`\narrecife · ${problems.length} thing(s) that fail without saying so:\n`);
+  for (const problem of problems) console.error(`  ${problem}`);
+  process.exit(1);
+}
+
+console.log(
+  `arrecife · ${entries} stylesheet(s) checked · @source is in place and no token is redefined`,
+);