@eduardoalvarez/arrecife 0.10.0 → 0.12.0

package/dist/chart/index.js

@@ -1,8 +1,8 @@
 'use client';
-import { Text } from '../chunk-TRPBID2W.js';
+import { Text } from '../chunk-BFYNBIVJ.js';
 import '../chunk-ODBFN44D.js';
-import { cn } from '../chunk-FAAGZG7A.js';
-import { radius } from '../chunk-FGFNK72B.js';
+import { cn } from '../chunk-TMUGT3Y3.js';
+import { radius } from '../chunk-5YWGOFDX.js';
 import { useId } from 'react';
 import { ResponsiveContainer, Tooltip, Legend, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Area, BarChart as BarChart$1, Bar, LineChart as LineChart$1, Line } from 'recharts';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -106,6 +106,7 @@ var color = (series, index) => series.color ?? seriesColor(index);
 var MARGIN = { left: 0, right: 12, top: 8, bottom: 0 };
 var AXIS = { tickLine: false, axisLine: false };
 var tickOf = (format) => format ? { tickFormatter: format } : {};
+var domainOf = (max) => max === void 0 ? {} : { domain: [0, max] };
 var legendOf = (series, legend) => legend ?? series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }, "legend") : null;
 var tooltipOf = (formatter) => /* @__PURE__ */ jsx(
   ChartTooltip,
@@ -122,6 +123,7 @@ function AreaChart({
   formatter,
   xTickFormatter,
   yTickFormatter,
+  valueMax,
   legend,
   stacked = false,
   ...container
@@ -134,7 +136,7 @@ function AreaChart({
     ] }, s.key)) }),
     /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
     /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8, ...tickOf(xTickFormatter) }),
-    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }),
+    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter), ...domainOf(valueMax) }),
     tooltipOf(formatter),
     legendOf(series, legend),
     series.map((s, i) => /* @__PURE__ */ jsx(
@@ -160,6 +162,7 @@ function BarChart({
   formatter,
   xTickFormatter,
   yTickFormatter,
+  valueMax,
   legend,
   orientation = "vertical",
   stacked = false,
@@ -186,7 +189,16 @@ function BarChart({
             },
             "category"
           ),
-          /* @__PURE__ */ jsx(XAxis, { type: "number", hide: true, ...tickOf(yTickFormatter) }, "value")
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              type: "number",
+              hide: true,
+              ...tickOf(yTickFormatter),
+              ...domainOf(valueMax)
+            },
+            "value"
+          )
         ] : [
           /* @__PURE__ */ jsx(
             XAxis,
@@ -198,7 +210,16 @@ function BarChart({
             },
             "category"
           ),
-          /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }, "value")
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              ...AXIS,
+              width: 40,
+              ...tickOf(yTickFormatter),
+              ...domainOf(valueMax)
+            },
+            "value"
+          )
         ],
         tooltipOf(formatter),
         legendOf(series, legend),
@@ -225,13 +246,14 @@ function LineChart({
   formatter,
   xTickFormatter,
   yTickFormatter,
+  valueMax,
   legend,
   ...container
 }) {
   return /* @__PURE__ */ jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxs(LineChart$1, { data: rows(data), margin: MARGIN, children: [
     /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
     /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8, ...tickOf(xTickFormatter) }),
-    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }),
+    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter), ...domainOf(valueMax) }),
     tooltipOf(formatter),
     legendOf(series, legend),
     series.map((s, i) => /* @__PURE__ */ jsx(

package/dist/{chunk-FGFNK72B.js → chunk-5YWGOFDX.js}

@@ -144,7 +144,7 @@ var typeScale = {
    * (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/`.
+   * outweighed the title they accompany. See `docs/decisions/` § 10.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
@@ -198,7 +198,7 @@ var control = {
    * 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/0.6.md` § 22.
+   * a row of a table. See `docs/decisions/` § 22.
    */
   iconSm: 32
 };
@@ -221,7 +221,7 @@ var size = {
    * 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/0.7.md` § 30.
+   * `docs/decisions/` § 30.
    */
   navCompact: 56,
   /**
@@ -294,7 +294,20 @@ var naming = {
   wordmark: "Eduardo \xC1lvarez",
   mascot: "Tiburonc\xEDn",
   /** The domain, for the footer CLI signature: `$ cd ~/eduardoalvarez.dev/2026`. */
-  domain: "eduardoalvarez.dev"
+  domain: "eduardoalvarez.dev",
+  /** The library's own name, for a footer that credits it. */
+  library: "Arrecife",
+  /**
+   * Where the library is published, for `Footer builtWith`.
+   *
+   * It is here and not written into the component for the reason the domain is:
+   * one string, five projects. It is the same URL as `homepage` in
+   * `package.json` and it cannot be derived from it — this file imports nothing
+   * — so `check:exports` compares the two on every build. Without that, moving
+   * the Storybook would update what npm prints and leave five production
+   * footers linking at the old address.
+   */
+  libraryUrl: "https://arrecife.eduardoalvarez.dev"
 };
 
 export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale };

package/dist/{chunk-5A5GH2PF.js → chunk-6QJQ6K7J.js}

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

package/dist/{chunk-TRPBID2W.js → chunk-BFYNBIVJ.js}

@@ -1,5 +1,5 @@
 import { text } from './chunk-ODBFN44D.js';
-import { cn } from './chunk-FAAGZG7A.js';
+import { cn } from './chunk-TMUGT3Y3.js';
 import { Slot } from '@radix-ui/react-slot';
 import 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-IIT3YLYN.js → chunk-BRDTB44R.js}

@@ -1,7 +1,7 @@
-import { cn } from './chunk-FAAGZG7A.js';
+import { cn } from './chunk-TMUGT3Y3.js';
 import { fins, ASSETS_PATH, poses, faces } from './chunk-CKRSQPTX.js';
-import { naming, tagline } from './chunk-FGFNK72B.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { naming, tagline } from './chunk-5YWGOFDX.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function Isotype({
   background = "dark",
@@ -10,18 +10,24 @@ function Isotype({
   className,
   ...props
 }) {
-  const file = background === "dark" ? fins.foam : fins.color;
-  return /* @__PURE__ */ jsx(
+  const fin = (file, mode) => /* @__PURE__ */ jsx(
     "img",
     {
       src: `${basePath}/${file}`,
       alt,
       width: 147,
       height: 111,
-      className: cn("h-8 w-auto select-none", className),
+      className: cn("h-8 w-auto select-none", className, mode),
       ...props
     }
   );
+  if (background === "auto") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      fin(fins.foam, "light:hidden"),
+      fin(fins.color, "not-light:hidden")
+    ] });
+  }
+  return fin(background === "dark" ? fins.foam : fins.color);
 }
 function Logo({
   background = "dark",

package/dist/{chunk-XXDATT3A.js → chunk-FF33ARRA.js}

@@ -19,7 +19,7 @@ var button = cva(
         ],
         // The one control whose focus ring is not biolume. It is the system's
         // only sand fill, and a biolume ring three pixels off a sand button puts
-        // both of the brand's accents in the same glance. See `docs/decisions/0.7.md` § 37.
+        // both of the brand's accents in the same glance. See `docs/decisions/` § 37.
         conversion: "bg-warm text-warm-on hover:bg-warm-hover focus-ring-warm",
         secondary: [
           "border-hairline-hover border bg-transparent text-text-primary",

package/dist/{chunk-FAAGZG7A.js → chunk-TMUGT3Y3.js}

@@ -1,4 +1,4 @@
-import { spacing, control, radius, typeScale } from './chunk-FGFNK72B.js';
+import { spacing, control, radius, typeScale } from './chunk-5YWGOFDX.js';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 

package/dist/{chunk-6IGD5REB.js → chunk-W75O3Z77.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-FAAGZG7A.js';
+import { cn } from './chunk-TMUGT3Y3.js';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-ZSCSKCTY.js → chunk-WU66TPJT.js}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-FAAGZG7A.js';
+import { cn } from './chunk-TMUGT3Y3.js';
 import { jsx } from 'react/jsx-runtime';
 
 var ICON_WEIGHT = "regular";

package/dist/form/index.cjs

@@ -67,7 +67,7 @@ var typeScale = {
    * (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/`.
+   * outweighed the title they accompany. See `docs/decisions/` § 10.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
@@ -113,7 +113,7 @@ var control = {
    * 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/0.6.md` § 22.
+   * a row of a table. See `docs/decisions/` § 22.
    */
   iconSm: 32
 };

package/dist/form/index.js

@@ -1,9 +1,9 @@
 'use client';
-import { Label } from '../chunk-6IGD5REB.js';
-import { Text } from '../chunk-TRPBID2W.js';
+import { Label } from '../chunk-W75O3Z77.js';
+import { Text } from '../chunk-BFYNBIVJ.js';
 import '../chunk-ODBFN44D.js';
-import { cn } from '../chunk-FAAGZG7A.js';
-import '../chunk-FGFNK72B.js';
+import { cn } from '../chunk-TMUGT3Y3.js';
+import '../chunk-5YWGOFDX.js';
 import { createContext, useContext, useId } from 'react';
 import { FormProvider, Controller, useFormContext, useFormState } from 'react-hook-form';
 import { Slot } from '@radix-ui/react-slot';

package/dist/icons/index.cjs

@@ -41,7 +41,7 @@ var typeScale = {
    * (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/`.
+   * outweighed the title they accompany. See `docs/decisions/` § 10.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
@@ -87,7 +87,7 @@ var control = {
    * 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/0.6.md` § 22.
+   * a row of a table. See `docs/decisions/` § 22.
    */
   iconSm: 32
 };

package/dist/icons/index.d.cts

@@ -43,7 +43,7 @@ import { IconWeight, IconProps as IconProps$1, Icon as Icon$1 } from '@phosphor-
  * THE WEIGHT IS AN AXIS, AND IT IS THE ONLY ONE AN ICON HAS. There are three
  * roles and `tone` is how you name them; the weights themselves are not a prop,
  * because Phosphor's other three — `thin`, `bold`, `duotone` — say nothing this
- * system means. See `TONE_WEIGHT` below and `docs/decisions/0.7.md` § 35.
+ * system means. See `TONE_WEIGHT` below and `docs/decisions/` § 35.
  *
  * IT IS NOW THE ONLY LINE THE LIBRARY DRAWS, which is what 0.10.0 changed.
  * `lib/glyphs.tsx` drew at 1.75 on a 16 grid — 0.109em, three quarters heavier
@@ -51,7 +51,7 @@ import { IconWeight, IconProps as IconProps$1, Icon as Icon$1 } from '@phosphor-
  * third hand. 0.7.0 left both alone because reconciling them restyles every
  * primitive in the library; that is exactly what 0.10.0 did, and both files are
  * gone. There is one description of what a line looks like here, and it is
- * Phosphor's. See `docs/decisions/0.10.md` § 51.
+ * Phosphor's. See `docs/decisions/` § 51.
  *
  * IN NEXT, IMPORT FROM `@phosphor-icons/react/ssr` inside a Server Component.
  * Phosphor's default build reads `IconContext` through `useContext`, and a hook

package/dist/icons/index.d.ts

@@ -43,7 +43,7 @@ import { IconWeight, IconProps as IconProps$1, Icon as Icon$1 } from '@phosphor-
  * THE WEIGHT IS AN AXIS, AND IT IS THE ONLY ONE AN ICON HAS. There are three
  * roles and `tone` is how you name them; the weights themselves are not a prop,
  * because Phosphor's other three — `thin`, `bold`, `duotone` — say nothing this
- * system means. See `TONE_WEIGHT` below and `docs/decisions/0.7.md` § 35.
+ * system means. See `TONE_WEIGHT` below and `docs/decisions/` § 35.
  *
  * IT IS NOW THE ONLY LINE THE LIBRARY DRAWS, which is what 0.10.0 changed.
  * `lib/glyphs.tsx` drew at 1.75 on a 16 grid — 0.109em, three quarters heavier
@@ -51,7 +51,7 @@ import { IconWeight, IconProps as IconProps$1, Icon as Icon$1 } from '@phosphor-
  * third hand. 0.7.0 left both alone because reconciling them restyles every
  * primitive in the library; that is exactly what 0.10.0 did, and both files are
  * gone. There is one description of what a line looks like here, and it is
- * Phosphor's. See `docs/decisions/0.10.md` § 51.
+ * Phosphor's. See `docs/decisions/` § 51.
  *
  * IN NEXT, IMPORT FROM `@phosphor-icons/react/ssr` inside a Server Component.
  * Phosphor's default build reads `IconContext` through `useContext`, and a hook

package/dist/icons/index.js

@@ -1,3 +1,3 @@
-export { ICON_WEIGHT, Icon, TONE_WEIGHT } from '../chunk-ZSCSKCTY.js';
-import '../chunk-FAAGZG7A.js';
-import '../chunk-FGFNK72B.js';
+export { ICON_WEIGHT, Icon, TONE_WEIGHT } from '../chunk-WU66TPJT.js';
+import '../chunk-TMUGT3Y3.js';
+import '../chunk-5YWGOFDX.js';

package/dist/index.cjs

@@ -209,7 +209,7 @@ var typeScale = {
    * (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/`.
+   * outweighed the title they accompany. See `docs/decisions/` § 10.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
@@ -263,7 +263,7 @@ var control = {
    * 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/0.6.md` § 22.
+   * a row of a table. See `docs/decisions/` § 22.
    */
   iconSm: 32
 };
@@ -286,7 +286,7 @@ var size = {
    * 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/0.7.md` § 30.
+   * `docs/decisions/` § 30.
    */
   navCompact: 56,
   /**
@@ -359,7 +359,20 @@ var naming = {
   wordmark: "Eduardo \xC1lvarez",
   mascot: "Tiburonc\xEDn",
   /** The domain, for the footer CLI signature: `$ cd ~/eduardoalvarez.dev/2026`. */
-  domain: "eduardoalvarez.dev"
+  domain: "eduardoalvarez.dev",
+  /** The library's own name, for a footer that credits it. */
+  library: "Arrecife",
+  /**
+   * Where the library is published, for `Footer builtWith`.
+   *
+   * It is here and not written into the component for the reason the domain is:
+   * one string, five projects. It is the same URL as `homepage` in
+   * `package.json` and it cannot be derived from it — this file imports nothing
+   * — so `check:exports` compares the two on every build. Without that, moving
+   * the Storybook would update what npm prints and leave five production
+   * footers linking at the old address.
+   */
+  libraryUrl: "https://arrecife.eduardoalvarez.dev"
 };
 
 // src/tokens/index.ts
@@ -484,7 +497,7 @@ var button = classVarianceAuthority.cva(
         ],
         // The one control whose focus ring is not biolume. It is the system's
         // only sand fill, and a biolume ring three pixels off a sand button puts
-        // both of the brand's accents in the same glance. See `docs/decisions/0.7.md` § 37.
+        // both of the brand's accents in the same glance. See `docs/decisions/` § 37.
         conversion: "bg-warm text-warm-on hover:bg-warm-hover focus-ring-warm",
         secondary: [
           "border-hairline-hover border bg-transparent text-text-primary",
@@ -2874,25 +2887,62 @@ function CourseCard({
   meta,
   status,
   progress,
+  media,
+  footer,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(CardShell, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
-    status ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "warm", children: status }) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
-    summary ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-3", children: summary }) : null,
-    meta && meta.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-step-xs flex items-center", children: [
-      i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
-      m
-    ] }, i)) }) : null,
-    typeof progress === "number" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs mt-auto flex flex-col pt-step-sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Progress, { value: progress, tone: "warm", label: `Progreso del curso: ${progress}%` }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "label", tone: "muted", as: "p", children: [
-        progress,
-        "% cursado"
-      ] })
-    ] }) : null
-  ] }) });
+  const hasProgress = typeof progress === "number";
+  return (
+    // `overflow-hidden` only with a cover: it is what rounds the cover's top
+    // corners to the card's. It clips the content and not the `<a>` itself, so
+    // the focus ring — an outline three pixels outside — still shows.
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CardShell,
+      {
+        className: cn("p-step-lg", media ? "overflow-hidden" : null, className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+          media ? (
+            // The bleed is the card's own padding, negated. A call site that
+            // changes the padding through `className` has to change this too, and
+            // that is the trade for keeping the padding on the shell like every
+            // other card instead of in a second place only when there is a cover.
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-step-lg -mt-step-lg mb-step-xs", children: media })
+          ) : null,
+          status ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "warm", children: status }) }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
+          summary ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-3", children: summary }) : null,
+          meta && meta.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-step-xs flex items-center", children: [
+            i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
+            m
+          ] }, i)) }) : null,
+          hasProgress ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs mt-auto flex flex-col pt-step-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Progress, { value: progress, tone: "warm", label: `Progreso del curso: ${progress}%` }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "label", tone: "muted", as: "p", children: [
+              progress,
+              "% cursado"
+            ] })
+          ] }) : null,
+          footer ? (
+            // Only one of the two takes `mt-auto`. Two auto margins in one column
+            // split the free space between them, and the progress bar would float
+            // halfway down the card.
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  "gap-step-sm pt-step-sm flex flex-wrap items-center justify-between",
+                  hasProgress ? null : "mt-auto"
+                ),
+                children: footer
+              }
+            )
+          ) : null
+        ] })
+      }
+    )
+  );
 }
 
 // src/brand/catalog.ts
@@ -3203,8 +3253,7 @@ function SocialRow({ social }) {
 function Signature({
   year,
   href,
-  domain: domainName = naming.domain,
-  className
+  domain: domainName = naming.domain
 }) {
   const domain = href ? /* @__PURE__ */ jsxRuntime.jsx(
     "a",
@@ -3214,7 +3263,7 @@ function Signature({
       children: domainName
     }
   ) : domainName;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "meta", tone: "muted", as: "p", className: cn("shrink-0", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "meta", tone: "muted", as: "p", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", className: "text-accent", children: [
       "$",
       " "
@@ -3232,6 +3281,46 @@ function Signature({
     )
   ] });
 }
+function BuiltWith() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "meta", tone: "muted", as: "p", children: [
+    "Creado con",
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: naming.libraryUrl,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: cn(
+          "text-accent hover:text-text-primary transition-standard cursor-pointer",
+          "underline decoration-1 underline-offset-4",
+          "rounded-chip focus-ring"
+        ),
+        children: naming.library
+      }
+    ),
+    " ",
+    /* @__PURE__ */ jsxRuntime.jsx(Icon, { as: react.Heart, tone: "current", className: "text-accent inline align-middle" })
+  ] });
+}
+function SignatureBlock({
+  year,
+  href,
+  domain,
+  builtWith,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn("gap-step-xs flex shrink-0 flex-col items-center sm:items-end", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Signature, { year, href, domain }),
+        builtWith ? /* @__PURE__ */ jsxRuntime.jsx(BuiltWith, {}) : null
+      ]
+    }
+  );
+}
 function Shell({
   className,
   contentClassName,
@@ -3254,6 +3343,7 @@ function Footer({
   linkAsChild,
   social,
   brand: brand2,
+  builtWith,
   year = (/* @__PURE__ */ new Date()).getFullYear(),
   signatureHref,
   domain,
@@ -3303,7 +3393,15 @@ function Footer({
           column.title
         )) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-hairline mt-step-xl pt-step-lg border-t", children: /* @__PURE__ */ jsxRuntime.jsx(Signature, { year, href: signatureHref, domain, className: "text-center sm:text-right" }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-hairline mt-step-xl pt-step-lg border-t", children: /* @__PURE__ */ jsxRuntime.jsx(
+        SignatureBlock,
+        {
+          year,
+          href: signatureHref,
+          domain,
+          builtWith
+        }
+      ) })
     ] });
   }
   const rows = [
@@ -3314,7 +3412,16 @@ function Footer({
   return /* @__PURE__ */ jsxRuntime.jsxs(Shell, { className, contentClassName: "gap-step-lg", ...rest, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-md flex flex-col items-center sm:flex-row sm:flex-wrap", children: [
       first ?? null,
-      /* @__PURE__ */ jsxRuntime.jsx(Signature, { year, href: signatureHref, domain, className: "sm:ml-auto" })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SignatureBlock,
+        {
+          year,
+          href: signatureHref,
+          domain,
+          builtWith,
+          className: "sm:ml-auto"
+        }
+      )
     ] }),
     others
   ] });
@@ -3465,7 +3572,7 @@ function Nav({ brand: brand2, children, actions, size: size2 = "default", classN
                           puts it in `actions`. A `Nav` that hid its own items would leave every
                           consumer without a drawer with no navigation at all, silently.
               
-                          See `docs/decisions/0.10.md` § 54.
+                          See `docs/decisions/` § 54.
                         */
               /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0 overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "gap-step-md flex w-max items-center", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
@@ -3643,12 +3750,21 @@ function PageHeader({
   action,
   size: size2,
   as = "h1",
+  titleVariant,
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn(header({ size: size2 }), className), ...props, children: [
     eyebrow ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(Text, { as, variant: size2 === "display" ? "display" : "h1", className: "max-w-measure", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Text,
+      {
+        as,
+        variant: titleVariant ?? (size2 === "display" ? "display" : "h1"),
+        className: "max-w-measure",
+        children: title
+      }
+    ),
     description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
     action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-sm mt-step-sm flex flex-wrap items-center", children: action }) : null
   ] });
@@ -3895,18 +4011,24 @@ function Isotype({
   className,
   ...props
 }) {
-  const file = background === "dark" ? fins.foam : fins.color;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const fin = (file, mode) => /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
       src: `${basePath}/${file}`,
       alt,
       width: 147,
       height: 111,
-      className: cn("h-8 w-auto select-none", className),
+      className: cn("h-8 w-auto select-none", className, mode),
       ...props
     }
   );
+  if (background === "auto") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      fin(fins.foam, "light:hidden"),
+      fin(fins.color, "not-light:hidden")
+    ] });
+  }
+  return fin(background === "dark" ? fins.foam : fins.color);
 }
 function Logo({
   background = "dark",