@eduardoalvarez/arrecife 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## [0.11.0](https://github.com/Proskynete/arrecife/compare/v0.10.0...v0.11.0) (2026-09-11)
+
+
+### 🚀 Novedades
+
+* **brand:** the fin can follow the theme with background="auto" ([3021f24](https://github.com/Proskynete/arrecife/commit/3021f24575c6f9422b7f322bf825a878a735306d))
+* **chart:** valueMax sets the top of the value axis ([ccebe24](https://github.com/Proskynete/arrecife/commit/ccebe24361ce4004916b433819ddf7f53f89907a))
+* **components:** CourseCard takes a cover and a closing row ([a3c73d0](https://github.com/Proskynete/arrecife/commit/a3c73d0b21edffc16c2965475fce9de6e1502926))
+* **components:** PageHeader lets the screen pick the title scale ([99bd553](https://github.com/Proskynete/arrecife/commit/99bd55376992109ea90c8eaedc435ffcadffdb0e))
+
+
+### 📚 Documentación
+
+* four decisions from cursos adopting the whole library ([2a712b8](https://github.com/Proskynete/arrecife/commit/2a712b871edd73f63fddfd2733279bf3e2834e07))
+* **readme:** background="auto", valueMax, and the story count ([149442c](https://github.com/Proskynete/arrecife/commit/149442cb2748da9cb06b3df23254cba46aae378a))
+
+## [0.10.0](https://github.com/Proskynete/arrecife/compare/v0.9.0...v0.10.0) (2026-09-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* **icons:** `@phosphor-icons/react` becomes a REQUIRED peer dependency, and `@eduardoalvarez/arrecife/social`, `/social/data` and the root's `social` namespace are removed. Phosphor has all ten marks; the mapping table and the `tone` each one takes are in docs/runbooks/migration-0.10.md.
+
+### 🚀 Novedades
+
+* **icons:** Phosphor is the only hand the library draws in ([833090e](https://github.com/Proskynete/arrecife/commit/833090e80d8d259f6965f389bc455cc72945a9c0))
+* **primitives:** the alert's four marks come from Phosphor ([0a4c86e](https://github.com/Proskynete/arrecife/commit/0a4c86ef7a8f5375c27bd7cea3afa3ab7ec76c35))
+* **storybook:** a way in, and a generated agent block on every component ([08eb4dd](https://github.com/Proskynete/arrecife/commit/08eb4ddcc8044ce561f88eb30894faaf00ff6e95))
+
+
+### 🐛 Correcciones
+
+* **a11y:** the code block's scroll region is reachable by keyboard ([5de3618](https://github.com/Proskynete/arrecife/commit/5de3618a81badb92a374e7dc40d0d251c133794d))
+* **components:** the audio player's waveform is Phosphor's, not five spans ([a0d92cd](https://github.com/Proskynete/arrecife/commit/a0d92cd99eaecbe1c506b60d03fa4b76f623faf0))
+* **components:** the footer stacks and centres below sm ([723920e](https://github.com/Proskynete/arrecife/commit/723920e0d3513d2834ac6215b6245491ac82be54))
+* **components:** the nav item row scrolls instead of pushing the page sideways ([716bb55](https://github.com/Proskynete/arrecife/commit/716bb55ccdecb796132928a73caa09e980b78015))
+* **components:** ThemeToggle switches the theme without onThemeChange ([c947036](https://github.com/Proskynete/arrecife/commit/c9470363618c3c70948616fb8e1a49b54921a830))
+* **primitives:** the tab list scrolls and the pagination row wraps ([e44a3dc](https://github.com/Proskynete/arrecife/commit/e44a3dc43022e25545c5802543f77e26b5bccdad))
+* **primitives:** the toast carries its tone as a surface, not as a hairline ([f1c6352](https://github.com/Proskynete/arrecife/commit/f1c6352de323acef2cb4ab55555d088da380b8ae))
+
+
+### 📚 Documentación
+
+* § 51 names the waveform, and the runbook says it moved ([aea65a1](https://github.com/Proskynete/arrecife/commit/aea65a108e11e3352c4fa35a2f27c19b2b6fac9b))
+* **readme:** the library stops drawing icons of its own ([7d56012](https://github.com/Proskynete/arrecife/commit/7d5601241eef5855148f3075a805585bc56b0fcf))
+* the 0.10 decision log ([254ab6a](https://github.com/Proskynete/arrecife/commit/254ab6a72a662c7303cac690eeb2e887735bd7d4))
+* the 0.10 migration runbook ([1118afd](https://github.com/Proskynete/arrecife/commit/1118afdc6221f6b7a22d5b7d8f7478ea875890dc))
+
+
+### 📦 Dependencias
+
+* ignoreDeprecations, because tsup injects a baseUrl TypeScript 6 rejects ([5eb20c8](https://github.com/Proskynete/arrecife/commit/5eb20c897346ed68b98e03b1c7f1519d57e7b513))
+
+
+### 🚀 CI/CD
+
+* the social scope goes with the subpath that named it ([b02ab52](https://github.com/Proskynete/arrecife/commit/b02ab525f6e30a6114abada71afcd8bb6f3d06a7))
+
 ## [0.9.0](https://github.com/Proskynete/arrecife/compare/v0.8.0...v0.9.0) (2026-09-08)
 
 

package/README.md

@@ -130,6 +130,22 @@ so the command reports the value on each side and only fails on the ones that
 differ. A collision that agrees is worth knowing about and is not worth failing
 over.
 
+> **Coming from 0.9.0.** Two breaks and they are the same one twice: the library
+> stopped drawing icons of its own. `@phosphor-icons/react` becomes a REQUIRED
+> peer dependency — even if your project draws no icons, the `Alert` and the
+> `Select` you import do — and `./social` and `./social/data` are removed.
+> Phosphor has all ten marks and `tsc` points at every call site; the mapping
+> table is in the runbook.
+>
+> Everything else is additive and asks nothing of you: the footer centres itself
+> on a phone, `Nav` and `TabsList` scroll instead of pushing the page sideways,
+> `Pagination` wraps, `Toast` carries a real colour again, `Alert`'s four mono
+> characters become Phosphor marks, and `ThemeToggle` toggles without
+> `onThemeChange` — which was a genuine bug.
+>
+> Run `npx arrecife` first, then read
+> [`docs/runbooks/migration-0.10.md`](docs/runbooks/migration-0.10.md).
+
 > **Coming from 0.7.0.** Four breaks, and three of them are things the library
 > takes back OUT because nothing in the four projects drew them: the `caret`
 > utility, the footer's row of loose text links, and `SidebarNav`.
@@ -141,7 +157,7 @@ over.
 >
 > Everything else is additive: `Footer variant="full"` with columns, three chart
 > shapes, `./social/data` for a project that mounts no React, and a `Website`
-> glyph.
+> glyph. Both `./social` subpaths were removed again in 0.10.0.
 >
 > Run `npx arrecife` first, then read
 > [`docs/runbooks/migration-0.8.md`](docs/runbooks/migration-0.8.md).
@@ -346,60 +362,63 @@ Verified by packing the library with `pnpm pack` and installing it in a separate
 project: the types resolve from `dist/`, `./tokens` loads without dragging React
 in and `./tokens/theme.css` resolves by subpath.
 
-### The social icons come from `./social`
+### The social icons are yours too, and they come from Phosphor
 
-```tsx
-// ❌ does not exist: the root publishes them grouped, not loose
-import { GitHub, LinkedIn } from '@eduardoalvarez/arrecife';
+Until 0.10.0 this section documented a catalogue of ten hand-drawn marks at
+`./social`, published a second time as shapes at `./social/data` for a consumer
+that mounts no React. Both are gone.
 
-// ✅ the normal form
+```tsx
+// ❌ removed in 0.10.0
 import { GitHub, LinkedIn } from '@eduardoalvarez/arrecife/social';
-
-// ✅ for iterating the catalogue
 import { social } from '@eduardoalvarez/arrecife';
-<social.GitHub />
+
+// ✅
+import { GithubLogo, LinkedinLogo } from '@phosphor-icons/react';
+import { Icon } from '@eduardoalvarez/arrecife/icons';
+
+<Icon as={GithubLogo} tone="current" />
 ```
 
-All ten are `GitHub`, `LinkedIn`, `X`, `Instagram`, `Discord`, `YouTube`, `Rss`,
-`Email`, `Newsletter` and `Website`. The last one is «my other site» — the
-personal domain in a footer full of networks — and it exists so that footer stops
-borrowing a globe from an icon set, which brings its own stroke weight and its
-own margins with it.
-
-**And the shapes are published a second time, without React.** `./social/data`
-imports nothing: it holds every glyph as structured shapes plus `socialSvg`,
-which returns a complete `<svg>` as a string. It is for the consumer that mounts
-no React and used to paste the `<path>` into its own template — `links` had four
-of them and `cursos` had six. The React components above are drawn from that same
-file, so a `d` that changes changes in both or in neither. See
-`docs/decisions/0.8.md` § 42.
-
-**The two forms are not taste, and in Next they are not interchangeable.** The
-root carries `"use client"`, and what crosses into a Server Component is a client
-reference **per export** — the properties of a plain object are not exports. So
-from a Server Component `social.LinkedIn` is `undefined`, and `undefined` as an
-element type kills the build at prerender. `./social` carries no directive: the
-icon renders on the server, ships no client JS, and pulls 5.6 KB instead of the
-root's 116 KB. Reach for the subpath by default; reach for `social` when you are
-mapping a list of link names onto icons.
-
-The namespace stays because **one of them is called `X`**. An `export const X` at
-the root of a component library collides with anything — a generic's type
-variable, an `import { X }` from somewhere else — and the failure shows up far
-from here. In the subpath you asked for icons, so the collision is yours to
-resolve and it takes one word: `import { X as XIcon }`.
-
-`Newsletter` is the bell, and it is named for what it means and not for what it
-draws — same as everything else in the system. It plays `Rss`'s role: a way to
-follow, not a social network. That is what keeps it inside this catalogue and
-keeps the catalogue from turning into an icon library.
-
-**The internal glyphs are NOT exported.** `Close`, `ChevronDown`, `Copy`, `Sun`
-and company are the minimum set the primitives need and they stay inside.
-Publishing them would turn `lib/glyphs.tsx` into the icon library the system
-decided not to have, and from there it grows on its own. A project that needs an
-icon passes its own: `Stat` receives `icon`, `Footer` receives each social link's
-`icon`.
+| Removed | Phosphor | `tone` |
+| --- | --- | --- |
+| `GitHub` | `GithubLogo` | `current` |
+| `LinkedIn` | `LinkedinLogo` | `current` |
+| `X` | `XLogo` | `current` |
+| `Instagram` | `InstagramLogo` | `current` |
+| `Discord` | `DiscordLogo` | `current` |
+| `YouTube` | `YoutubeLogo` | `current` |
+| `Rss` | `Rss` | `action` |
+| `Email` | `Envelope` | `action` |
+| `Newsletter` | `BellSimple` | `action` |
+| `Website` | `Globe` | `action` |
+
+**The `tone` column is the old drawing rule, not a new one.** Six are brands and
+went SOLID, which is `tone="current"` — Phosphor's `fill`. Four were functional
+and used the document's 1.6 stroke, which is the default `action`. Nothing about
+how the row looks changed; what changed is who draws it.
+
+**Why they went, when the whole point of `./social/data` was that `links` had
+pasted four `<path>`s by hand.** Because `links` left first. Its `Footer.astro`
+now draws Phosphor through `astro-icon` and its own docstring lists the divergence:
+«every icon on the page — the six in the cards and the four here — is then one set
+at one weight». `eduardoalvarez.dev` did the same in `site-footer.tsx`. Two
+consumers walking away from a subpath built for them is the library being out of
+step, not the consumers. See `docs/decisions/0.10.md` § 51.
+
+**In a Next Server Component, take the glyph from `@phosphor-icons/react/ssr`.**
+`./icons` carries no `"use client"` on purpose, so an icon renders on the server
+and ships no client JS. Phosphor's default build reads `IconContext` through
+`useContext` and a hook in a Server Component throws; the `/ssr` entry is the same
+icons without that read, and `Icon` works with either.
+
+**There are no internal glyphs left to not export.** `lib/glyphs.tsx` held
+`Close`, `ChevronDown`, `Copy`, `Sun` and fifteen others, and the rule was that
+publishing them would turn it into the icon library the system decided not to
+have. The file is deleted: the primitives draw from Phosphor like everything else.
+A component that needs an icon still takes it as a prop — `Stat` receives `icon`,
+`Footer` receives each social link's `icon` — and the project passes
+`<Icon as={…} />`.
 
 ### The icons are yours, the way they are drawn is not
 
@@ -427,15 +446,17 @@ names. Measured on the `Minus` path itself, whose regular form is a bar of radiu
 | --- | --- | --- |
 | phosphor `regular` | 16 on a 256 grid | **0.0625em** |
 | the document | 1.6 on a 24 grid | **0.0667em** |
-| `lib/glyphs.tsx` | 1.75 on a 16 grid | 0.109em |
+| `lib/glyphs.tsx`, until 0.10.0 | 1.75 on a 16 grid | 0.109em |
 
 Six per cent apart, which is no pixel on any screen. Nothing had to be derived and
 no number had to be invented. The `Icons/Icon` → `regular IS the document's
-stroke` story alternates the bars so the claim can be checked instead of believed
-— and it also shows the third row, because **`glyphs.tsx` is the outlier**: at
-0.109em it is three quarters heavier than both, it was never argued anywhere, and
-aligning it would restyle every primitive in the library. That is a separate
-change and `docs/decisions/0.7.md` § 29 says so.
+stroke` story shows the bars so the claim can be checked instead of believed.
+
+**The third row is history now, and it is left in because it is the argument.**
+`glyphs.tsx` drew at 0.109em — three quarters heavier than both — and 0.7.0
+measured it, said so and left it alone, because aligning it restyles every
+primitive in the library. 0.10.0 is that change: the file is gone and there is
+one line in the system. See `docs/decisions/0.10.md` § 51.
 
 **The weight is an axis with three values, and `tone` is how you name them.**
 `weight` is not a prop: Phosphor ships six and this system reads three, because
@@ -483,16 +504,17 @@ It blocked `cursos` for a whole version, and the workaround there was a
 that is a `<span>` with no interaction. It cost 272 KB of client chunk.
 
 The five portable subpaths do NOT carry it — `./tokens`, `./theme`,
-`./variants`, `./social/data`, `./og` and `./shiki` — and that is the half that matters more.
+`./variants`, `./og` and `./shiki` — and that is the half that matters more.
 Marking them client would be a lie with a cost: a Server Component importing
 `buttonVariants`, a function that returns a string, would pull a client boundary
 in with it.
 
-`./social` is the third case, and it is why the check stopped looking only at the
-portable ones. It renders React — it is ten `<svg>` — so it can never be
+`./icons` is the third case, and it is why the check stopped looking only at the
+portable ones. It renders React — it is one `<svg>` — so it can never be
 portable, and it holds no state, so it must not be a client entry either. Listed
 in neither set, nothing would have noticed it being marked client by mistake, and
-that mistake undoes the only reason the subpath exists. See `docs/decisions/0.7.md` § 26.
+that mistake undoes the only reason the subpath exists: an icon in a Server
+Component with no client boundary opened for it.
 
 It is stamped by `scripts/add-use-client.mjs` after tsup, and not by tsup's
 `banner`. That was tried first: esbuild writes the directive and the bundling
@@ -566,8 +588,13 @@ vertical={false}`, two axes with the line and the tick off, a `type="natural"`
 and a `strokeWidth` — which `cursos` wrote four times, once per chart. None of
 that is a decision the project made. See `docs/decisions/0.8.md` § 43.
 
-`check:exports` verifies that the six portable ones — `./tokens`, `./theme`,
-`./variants`, `./social/data`, `./og` and `./shiki` — bring no React into the published `dist/`,
+A chart of a quantity with a ceiling passes it: `valueMax={100}` on a percentage.
+Without it the value axis ends at the largest datum, and a horizontal ranking —
+whose value axis is hidden — draws a course watched to 40 % as a full bar. See
+`docs/decisions/0.11.md` § 58.
+
+`check:exports` verifies that the five portable ones — `./tokens`, `./theme`,
+`./variants`, `./og` and `./shiki` — bring no React into the published `dist/`,
 **by following the relative imports**. Without that the check was worthless: with `treeshake`
 on, each portable entry ends up as two lines re-exporting from a
 `chunk-XXXX.js`, and a grep over those two lines finds no React even when the
@@ -581,7 +608,7 @@ chunk imports it.
 | `pnpm typecheck` | `tsc --noEmit` |
 | `pnpm lint` | ESLint, including the ban on literal hexes outside `tokens.ts` |
 | `pnpm check:tokens` | fails if `src/tokens/` imports anything from outside |
-| `pnpm test` | compiles Tailwind and runs axe over the 208 stories, in both modes |
+| `pnpm test` | compiles Tailwind and runs axe over the 248 stories, in both modes |
 | `pnpm check:exports` | verifies that `dist/` holds what `exports` promises |
 | `pnpm check:release` | validates `release-please-config.json` against the official schema |
 | `pnpm storybook` | generates the tokens and serves Storybook on 6006 |
@@ -869,12 +896,17 @@ about as library pieces. They get in anyway: the CLI aesthetic — the bar's
 
 ### Phase 3 decisions
 
-- **It ships no icon set**, and that has not changed. The eight glyphs the
-  primitives need are inline in `src/lib/glyphs.tsx`, inherit `currentColor` and
-  measure 1em, and they are not exported. What DID change is that
-  `@phosphor-icons/react` is now an optional peer on `./icons`, so the set a
-  project chooses is drawn at the system's weight — see «The icons are yours»
-  above. Optional and on a subpath is the point: the two projects that use no
+- **It shipped no icon set, and by 0.10.0 that position had been abandoned from
+  both ends.** Phase 3 said the eight glyphs the primitives need are inline in
+  `src/lib/glyphs.tsx` and not exported; 0.7.0 added `@phosphor-icons/react` as an
+  optional peer on `./icons` so the set a project chooses is drawn at the system's
+  weight; and 0.10.0 deleted `glyphs.tsx` and `./social` and made Phosphor
+  required, because a library drawing in three hands cannot say which one is
+  right. See «The social icons are yours too» above and `docs/decisions/0.10.md`
+  § 51. What survives verbatim is the part that was always the real rule: the
+  icons are the project's, the LINE is the system's. The rest of this bullet is
+  the 0.7.0 argument, kept because it is what the reversal was measured against:
+  optional and on a subpath was the point, since the two projects that use no
   icons install nothing.
 - **No entrance animations.** Modals, menus, tooltips and toasts appear where
   they will stay. The `Switch` knob changes position without sliding. The
@@ -968,8 +1000,11 @@ skips, the 1 → 1.25 → 1.5 → 1.75 → 2 speed cycle and the volume with mut
 portfolio's. What changed:
 
 **Two dependencies a package cannot have.** The portfolio's `Icon` became
-`src/lib/glyphs.tsx` with identical paths; `trackEvent` became the `onFirstPlay`
-prop, which still fires exactly once per load.
+`src/lib/glyphs.tsx` with identical paths — and since 0.10.0 those eight paths are
+gone too, replaced by `Play`, `Pause`, `SpeakerHigh`, `SpeakerSlash`,
+`CircleNotch`, `ArrowsClockwise` and the two seek arrows from Phosphor.
+`trackEvent` became the `onFirstPlay` prop, which still fires exactly once per
+load.
 
 **One API change.** `compact`/`banner` as two booleans became
 `mode="full" | "compact" | "banner"`, which is the vocabulary the three modes were
@@ -1017,6 +1052,12 @@ adding a line to the catalog.
 Pixel analysis confirms it — 94 % of `fin-foam.png` is `#EDF4F3`, which is the
 foam token.
 
+On a site that switches theme, `background="auto"` renders both and the `light:`
+variant shows the one that reads, so no call site has to know which theme is on.
+A background that does not follow the theme — a dark panel on a light page —
+still names itself: `auto` reads the page, not the panel. See
+`docs/decisions/0.11.md` § 60.
+
 **Rule 5 as API.** The wordmark comes from `naming.wordmark` and always reads
 «Eduardo Álvarez». There is no prop that changes that text, and Tiburoncín never
 appears written inside the logo.

package/dist/brand/index.cjs

@@ -168,18 +168,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",

package/dist/brand/index.d.cts

@@ -3,21 +3,60 @@ export { A as ASSETS_PATH, a as Fin, f as faceList, b as faceUsage, c as faces,
 import * as react from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 
+/**
+ * Which background the fin sits on, or `auto` to let the theme decide.
+ *
+ * It is its own type and not a third member of `Background`, because
+ * `Background` is also what the OG templates read, and Satori has no CSS to
+ * resolve `auto` with: a template knows its mode and has to say it.
+ */
+type IsotypeBackground = Background | 'auto';
 type IsotypeProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'alt'> & {
     /**
-     * Which background it sits on. Deciding is mandatory even though it has a
-     * default: the fin's body is nearly black, so the two-blue variant disappears
-     * over abyss. Being a prop, the rule stops being something to remember.
+     * Which background it sits on, or `auto` on a site that switches theme: both
+     * fins are rendered and CSS shows the one that reads. Deciding is mandatory
+     * even though it has a default: the fin's body is nearly black, so the
+     * two-blue variant disappears over abyss.
+     *
+     * Use `dark` or `light` when the background does not follow the theme. A
+     * panel that stays dark in both modes is a fixed background, and `auto` would
+     * pick the page's fin instead of the panel's.
      */
-    background?: Background | undefined;
+    background?: IsotypeBackground | undefined;
     basePath?: string | undefined;
     /** Alt text. Empty when the isotype accompanies text that already names it. */
     alt?: string | undefined;
 };
+/**
+ * The fin, in the variant its background asks for.
+ *
+ * `auto` renders both and lets the `light:` variant choose, which is what
+ * `ThemeToggle` already does with its two icons and for the same reason: the
+ * server does not know the theme, and a fin picked in JavaScript would be wrong
+ * on the first paint half the time. `cursos` had written exactly this by hand
+ * after a surface changed mode and its fin vanished — not looked wrong: vanished,
+ * with no error and no gap in the layout. See `docs/decisions/0.11.md` § 60.
+ *
+ * Dark is the system default, so the foam fin is the one shown unless
+ * `data-theme="light"` says otherwise, and the two-blue one hides everywhere
+ * else. `not-light:hidden` rather than `hidden light:block`: the visible fin
+ * keeps whatever `display` the call site gave it.
+ *
+ * What it costs: the hidden image is still downloaded, 14 or 21 KB. And with
+ * `auto` the props land on BOTH `<img>` — an `id` or a `ref` included — so a
+ * call site that needs to reach the one image passes the background it is on.
+ * The `alt` does not double: an image with `display: none` is out of the
+ * accessibility tree.
+ */
 declare function Isotype({ background, basePath, alt, className, ...props }: IsotypeProps): react.JSX.Element;
 
 type LogoProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
-    background?: Background | undefined;
+    /**
+     * The background the logo sits on, handed to its fin. `auto` follows the
+     * theme — see `Isotype`. The wordmark needs no help: it is `textPrimary`, which
+     * already follows the mode.
+     */
+    background?: IsotypeBackground | undefined;
     basePath?: string | undefined;
     /** Hides the wordmark and leaves only the fin, for very narrow bars. */
     isotypeOnly?: boolean | undefined;
@@ -69,4 +108,4 @@ type MascotFaceProps = Base & {
  */
 declare function MascotFace({ expression, basePath, alt, className, ...props }: MascotFaceProps): react.JSX.Element;
 
-export { Background, Face, Isotype, type IsotypeProps, Logo, type LogoProps, Mascot, MascotFace, type MascotFaceProps, type MascotProps, Pose };
+export { Background, Face, Isotype, type IsotypeBackground, type IsotypeProps, Logo, type LogoProps, Mascot, MascotFace, type MascotFaceProps, type MascotProps, Pose };

package/dist/brand/index.d.ts

@@ -3,21 +3,60 @@ export { A as ASSETS_PATH, a as Fin, f as faceList, b as faceUsage, c as faces,
 import * as react from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 
+/**
+ * Which background the fin sits on, or `auto` to let the theme decide.
+ *
+ * It is its own type and not a third member of `Background`, because
+ * `Background` is also what the OG templates read, and Satori has no CSS to
+ * resolve `auto` with: a template knows its mode and has to say it.
+ */
+type IsotypeBackground = Background | 'auto';
 type IsotypeProps = Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'alt'> & {
     /**
-     * Which background it sits on. Deciding is mandatory even though it has a
-     * default: the fin's body is nearly black, so the two-blue variant disappears
-     * over abyss. Being a prop, the rule stops being something to remember.
+     * Which background it sits on, or `auto` on a site that switches theme: both
+     * fins are rendered and CSS shows the one that reads. Deciding is mandatory
+     * even though it has a default: the fin's body is nearly black, so the
+     * two-blue variant disappears over abyss.
+     *
+     * Use `dark` or `light` when the background does not follow the theme. A
+     * panel that stays dark in both modes is a fixed background, and `auto` would
+     * pick the page's fin instead of the panel's.
      */
-    background?: Background | undefined;
+    background?: IsotypeBackground | undefined;
     basePath?: string | undefined;
     /** Alt text. Empty when the isotype accompanies text that already names it. */
     alt?: string | undefined;
 };
+/**
+ * The fin, in the variant its background asks for.
+ *
+ * `auto` renders both and lets the `light:` variant choose, which is what
+ * `ThemeToggle` already does with its two icons and for the same reason: the
+ * server does not know the theme, and a fin picked in JavaScript would be wrong
+ * on the first paint half the time. `cursos` had written exactly this by hand
+ * after a surface changed mode and its fin vanished — not looked wrong: vanished,
+ * with no error and no gap in the layout. See `docs/decisions/0.11.md` § 60.
+ *
+ * Dark is the system default, so the foam fin is the one shown unless
+ * `data-theme="light"` says otherwise, and the two-blue one hides everywhere
+ * else. `not-light:hidden` rather than `hidden light:block`: the visible fin
+ * keeps whatever `display` the call site gave it.
+ *
+ * What it costs: the hidden image is still downloaded, 14 or 21 KB. And with
+ * `auto` the props land on BOTH `<img>` — an `id` or a `ref` included — so a
+ * call site that needs to reach the one image passes the background it is on.
+ * The `alt` does not double: an image with `display: none` is out of the
+ * accessibility tree.
+ */
 declare function Isotype({ background, basePath, alt, className, ...props }: IsotypeProps): react.JSX.Element;
 
 type LogoProps = Omit<ComponentPropsWithoutRef<'span'>, 'children'> & {
-    background?: Background | undefined;
+    /**
+     * The background the logo sits on, handed to its fin. `auto` follows the
+     * theme — see `Isotype`. The wordmark needs no help: it is `textPrimary`, which
+     * already follows the mode.
+     */
+    background?: IsotypeBackground | undefined;
     basePath?: string | undefined;
     /** Hides the wordmark and leaves only the fin, for very narrow bars. */
     isotypeOnly?: boolean | undefined;
@@ -69,4 +108,4 @@ type MascotFaceProps = Base & {
  */
 declare function MascotFace({ expression, basePath, alt, className, ...props }: MascotFaceProps): react.JSX.Element;
 
-export { Background, Face, Isotype, type IsotypeProps, Logo, type LogoProps, Mascot, MascotFace, type MascotFaceProps, type MascotProps, Pose };
+export { Background, Face, Isotype, type IsotypeBackground, type IsotypeProps, Logo, type LogoProps, Mascot, MascotFace, type MascotFaceProps, type MascotProps, Pose };

package/dist/brand/index.js

@@ -1,6 +1,5 @@
 'use client';
-export { Isotype, Logo, Mascot, MascotFace } from '../chunk-MPZBF2TZ.js';
-export { ASSETS_PATH, faceList, faceUsage, faces, fins, poseList, poses } from '../chunk-CKRSQPTX.js';
+export { Isotype, Logo, Mascot, MascotFace } from '../chunk-RKGKO2TW.js';
 import '../chunk-FAAGZG7A.js';
+export { ASSETS_PATH, faceList, faceUsage, faces, fins, poseList, poses } from '../chunk-CKRSQPTX.js';
 import '../chunk-FGFNK72B.js';
-import '../chunk-MLKGABMK.js';

package/dist/chart/index.cjs

@@ -300,6 +300,7 @@ var color = (series2, index) => series2.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 = (series2, legend) => legend ?? series2.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, { content: /* @__PURE__ */ jsxRuntime.jsx(ChartLegendContent, {}) }, "legend") : null;
 var tooltipOf = (formatter) => /* @__PURE__ */ jsxRuntime.jsx(
   ChartTooltip,
@@ -316,6 +317,7 @@ function AreaChart({
   formatter,
   xTickFormatter,
   yTickFormatter,
+  valueMax,
   legend,
   stacked = false,
   ...container
@@ -328,7 +330,7 @@ function AreaChart({
     ] }, s.key)) }),
     /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false }),
     /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8, ...tickOf(xTickFormatter) }),
-    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter), ...domainOf(valueMax) }),
     tooltipOf(formatter),
     legendOf(series2, legend),
     series2.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -354,6 +356,7 @@ function BarChart({
   formatter,
   xTickFormatter,
   yTickFormatter,
+  valueMax,
   legend,
   orientation = "vertical",
   stacked = false,
@@ -380,7 +383,16 @@ function BarChart({
             },
             "category"
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { type: "number", hide: true, ...tickOf(yTickFormatter) }, "value")
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.XAxis,
+            {
+              type: "number",
+              hide: true,
+              ...tickOf(yTickFormatter),
+              ...domainOf(valueMax)
+            },
+            "value"
+          )
         ] : [
           /* @__PURE__ */ jsxRuntime.jsx(
             recharts.XAxis,
@@ -392,7 +404,16 @@ function BarChart({
             },
             "category"
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }, "value")
+          /* @__PURE__ */ jsxRuntime.jsx(
+            recharts.YAxis,
+            {
+              ...AXIS,
+              width: 40,
+              ...tickOf(yTickFormatter),
+              ...domainOf(valueMax)
+            },
+            "value"
+          )
         ],
         tooltipOf(formatter),
         legendOf(series2, legend),
@@ -419,13 +440,14 @@ function LineChart({
   formatter,
   xTickFormatter,
   yTickFormatter,
+  valueMax,
   legend,
   ...container
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data: rows(data), margin: MARGIN, children: [
     /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false }),
     /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8, ...tickOf(xTickFormatter) }),
-    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter) }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40, ...tickOf(yTickFormatter), ...domainOf(valueMax) }),
     tooltipOf(formatter),
     legendOf(series2, legend),
     series2.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(