@eduardoalvarez/arrecife 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## [0.8.0](https://github.com/Proskynete/arrecife/compare/v0.7.0...v0.8.0) (2026-09-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* **components:** `SidebarNav`, `SidebarGroup` and `SidebarItem` are removed. A project that wants a sidebar builds one from `Nav` and `Sheet`, which is what both admin projects already did. Migration in docs/migration-0.8.md.
+* **components:** `Footer` no longer accepts `children`, and `FooterLink` is removed. A row of loose text links becomes `variant="full"` with `columns`. Migration in docs/migration-0.8.md.
+* **tokens:** the `caret` utility is removed. If you wrote `motion-safe:caret` by hand, Tailwind now drops it silently and your mark goes still with no error: use `pulse-accent` on a thin shape. Migration in docs/migration-0.8.md.
+* **primitives:** `Table` draws its own radius, border and clip, so the wrapper `div` around it has to lose its `rounded-*`, `border` and `overflow-hidden` or you get two borders. Nothing fails at compile time. Migration in docs/migration-0.8.md.
+
+### 🚀 Novedades
+
+* **chart:** AreaChart, BarChart and LineChart on the chassis ([780c976](https://github.com/Proskynete/arrecife/commit/780c97633b1d245f9de42cc42a333e0b7baf679c))
+* **components:** Footer gets a full shape, and its signature draws the halo ([88c5af3](https://github.com/Proskynete/arrecife/commit/88c5af362ff2ee44e50e534259014d1a3f19c253))
+* **components:** SidebarNav goes, and so does the recipe built on it ([27f6a3e](https://github.com/Proskynete/arrecife/commit/27f6a3e65c4f67dfd1531992b436965bc591bdf6))
+* **components:** the footer stops taking loose links, and the columns are the answer ([5d4495e](https://github.com/Proskynete/arrecife/commit/5d4495eb8f9928dfea0605026b8e99a91922ee27))
+* **primitives:** Table draws its own surface, and its scroll region is reachable ([ca07f2c](https://github.com/Proskynete/arrecife/commit/ca07f2c5a04f9db45819a9d3f0d69e32e3d112c6))
+* **social:** the glyphs come out as portable data, and Website joins them ([bb62292](https://github.com/Proskynete/arrecife/commit/bb62292c16d4a9c4953b4a83deab61db0f07afcf))
+* **tokens:** pulse-accent, the halo both sites already drew ([28d1c49](https://github.com/Proskynete/arrecife/commit/28d1c49fa9c7f48077391e2462ace69053c1377e))
+* **tokens:** the caret goes, and the motion rule is one criterion again ([46f03ff](https://github.com/Proskynete/arrecife/commit/46f03ff26c5568b38a1a0633f2ed1f1ac34bcaa7))
+
+
+### 🐛 Correcciones
+
+* **components:** NavItem asChild reaches its child ([f0556d5](https://github.com/Proskynete/arrecife/commit/f0556d5a7e36af188e7c7cac8df82258310c5205))
+* **primitives:** ref is in the type of the four form controls ([f219d32](https://github.com/Proskynete/arrecife/commit/f219d3253fbddf35f004cb5f88015ad25cedde90))
+* the llms generator stops interpreting $ in the inventory ([e0f5309](https://github.com/Proskynete/arrecife/commit/e0f5309b6620c9b8e6ed07d77bc08a5164b977fd))
+* **tokens:** the doctor stops asking a React-less project for [@source](https://github.com/source) ([7bf6e8f](https://github.com/Proskynete/arrecife/commit/7bf6e8fe97e444ed60547265cceda1bd960511c4))
+
+
+### 📚 Documentación
+
+* §§ 47 and 48, and the two removals in the migration guide ([424933e](https://github.com/Proskynete/arrecife/commit/424933e7a419398e755ccd49019f00e54bcc8abf))
+* docs/ splits into architecture, decisions and runbooks ([db5a9b4](https://github.com/Proskynete/arrecife/commit/db5a9b4621100bbf1b77b83894f43caea99c56c1))
+* **readme:** the 0.8.0 callout, and SidebarNav comes off the Phase 5 list ([a5af2f0](https://github.com/Proskynete/arrecife/commit/a5af2f0c2f838432d4a9c815d2127c35146c88bd))
+* **readme:** the table's surface, the halo, and the caret that goes with it ([a30b8b6](https://github.com/Proskynete/arrecife/commit/a30b8b601b30fb133cd1876c1139f88142c83d8a))
+* the reference documents for 0.8.0 ([e4521e2](https://github.com/Proskynete/arrecife/commit/e4521e2b1492132baa3849d8b73e36425ff40f4c))
+
+
+### 🚀 CI/CD
+
+* the templates and the size labeler follow docs/ into its folders ([ea037a1](https://github.com/Proskynete/arrecife/commit/ea037a16517e379ec7bf6544caa96239fae2a491))
+
 ## [0.7.0](https://github.com/Proskynete/arrecife/compare/v0.6.0...v0.7.0) (2026-09-04)
 
 

package/README.md

@@ -7,7 +7,7 @@ Published Storybook: [arrecife.eduardoalvarez.dev](https://arrecife.eduardoalvar
 
 ## The identity documents
 
-`docs/design-system.md` and `docs/brand-manual.md` are the extraction of the two
+`docs/architecture/design-system.md` and `docs/architecture/brand-manual.md` are the extraction of the two
 Claude Design canvases, kept in the repo so they can be grepped and versioned.
 The canvas is still the source; this is the consultable copy.
 
@@ -15,7 +15,7 @@ They are here for a concrete reason: the highlighting palette lived hand-written
 in a project with a `#E05252` that this README has declared wrong for months, and
 nobody saw it because the document was not greppable from the code.
 
-`docs/decisions.md` is the other half: the points where the code and the document
+`docs/decisions/` is the other half: the points where the code and the document
 do not say the same thing, each with its resolution and its reason.
 
 ## The two documents for agents
@@ -130,17 +130,32 @@ 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.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`.
+>
+> Only one fails at compile time — `Footer` no longer takes `children` — and that
+> is the one to look at first. The other three fail silently or not at all: the
+> `Table` wrapper you no longer need gives you two borders, and a hand-written
+> `motion-safe:caret` just stops animating.
+>
+> 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.
+>
+> Run `npx arrecife` first, then read
+> [`docs/runbooks/migration-0.8.md`](docs/runbooks/migration-0.8.md).
+
 > **Coming from 0.6.0.** One break, and it is a find and replace the type checker
 > points at: `Stat`'s `tone="alerta"` is `tone="alert"`.
 >
 > Everything else is additive, and most of it lets a project delete something it
 > was maintaining by hand: `./social` and `./icons` are two new subpaths,
-> `EmptyState` has a shape with no face, `Stat` covers the KPI cards, `SidebarNav`
-> groups and collapses, and `npx arrecife` catches two failures that produce no
-> error at all.
+> `EmptyState` has a shape with no face, `Stat` covers the KPI cards, and
+> `npx arrecife` catches two failures that produce no error at all.
 >
 > Run `npx arrecife` first, then read
-> [`docs/migration-0.7.md`](docs/migration-0.7.md).
+> [`docs/runbooks/migration-0.7.md`](docs/runbooks/migration-0.7.md).
 
 > **Coming from 0.5.x.** Two unrelated things landed in 0.6.0, and they ship
 > together because in `0.x` a breaking change bumps the minor.
@@ -154,19 +169,19 @@ over.
 > the type checker catches every one at the call site.
 >
 > Both halves, in order, with the full rename table and what each project can now
-> **delete**: [`docs/migration-0.6.md`](docs/migration-0.6.md).
+> **delete**: [`docs/runbooks/migration-0.6.md`](docs/runbooks/migration-0.6.md).
 
 > **Coming from 0.4.0 or earlier.** `Toast`, `ToastProvider`, `ToastViewport`,
 > `ToastTitle` and `ToastDescription` stopped being public API in 0.5.0: you use
 > `Toaster` and `toast()`. `ToastAction` stays. The migration, with the reasoning
-> and the examples, is in [`docs/migration-0.5.md`](docs/migration-0.5.md).
+> and the examples, is in [`docs/runbooks/migration-0.5.md`](docs/runbooks/migration-0.5.md).
 
 > **Coming from 0.2.0 or earlier.** The five spacing steps were renamed: `p-md`
 > is now `p-step-md`, `gap-sm` is `gap-step-sm`. It is a breaking change, and if
 > your project uses `max-w-sm`, `max-w-md` or `max-w-lg`, those were also worth
 > 12, 16 and 26px with nothing saying so. The reasoning, the migration pattern
 > and what to check afterwards are in
-> [`docs/migration-0.3.md`](docs/migration-0.3.md).
+> [`docs/runbooks/migration-0.3.md`](docs/runbooks/migration-0.3.md).
 
 The font families are declared by name. Each project loads Bricolage Grotesque,
 Geist and JetBrains Mono however it prefers: the library does not dictate how.
@@ -345,8 +360,19 @@ import { social } from '@eduardoalvarez/arrecife';
 <social.GitHub />
 ```
 
-All nine are `GitHub`, `LinkedIn`, `X`, `Instagram`, `Discord`, `YouTube`, `Rss`,
-`Email` and `Newsletter`.
+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
@@ -409,7 +435,7 @@ stroke` story alternates the bars so the claim can be checked instead of believe
 — 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.md` § 29 says so.
+change and `docs/decisions/0.7.md` § 29 says so.
 
 **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
@@ -427,7 +453,7 @@ one channel WCAG 1.4.1 says may not carry meaning** — the fill is the second
 channel, and it is the one that survives a forced-colours mode where the biolume
 does not. `quiet` is the opposite problem: in a metadata row the icon is not the
 point of the line, and at `regular` it draws as heavy as the date beside it.
-`docs/decisions.md` § 35 has the rest.
+`docs/decisions/0.7.md` § 35 has the rest.
 
 `@phosphor-icons/react` is an **optional** peer dependency on its own subpath, by
 the same rule as `./form` and `./chart`: two of the five projects use no icons and
@@ -457,17 +483,16 @@ 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`, `./og` and `./shiki` — and that is the half that matters more.
+`./variants`, `./social/data`, `./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 nine `<svg>` — so it can never be
+portable ones. It renders React — it is ten `<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.md`
-§ 26.
+that mistake undoes the only reason the subpath exists. See `docs/decisions/0.7.md` § 26.
 
 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
@@ -528,10 +553,21 @@ import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage }
 
 import { ChartContainer, ChartTooltip, ChartTooltipContent, seriesColor }
   from '@eduardoalvarez/arrecife/chart';
+
+// And the three chart types, which are what a project actually reaches for.
+import { AreaChart, BarChart, LineChart } from '@eduardoalvarez/arrecife/chart';
 ```
 
-`check:exports` verifies that the five portable ones — `./tokens`, `./theme`,
-`./variants`, `./og` and `./shiki` — bring no React into the published `dist/`,
+`AreaChart`, `BarChart` and `LineChart` take `data`, `series` and `xKey` and draw
+the whole thing. **They are not Recharts' components of the same name**, and the
+collision is deliberate: what they replace is not an import, it is sixty lines of
+composition — a `linearGradient` with a hardcoded id, a `CartesianGrid
+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/`,
 **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
@@ -599,8 +635,7 @@ cannot see: axe does not evaluate text over a gradient, so both modes passed it.
 
 The light blocks now sweep between `background` and `surface` and never touch
 `surfaceRaised`, so the darkest point of either one is the page itself — a token
-that passes on the page passes at every point of the sweep. `docs/decisions.md`
-§ 9 has the measurements, including the two other things the first composition
+that passes on the page passes at every point of the sweep. `docs/decisions/0.6.md` § 9 has the measurements, including the two other things the first composition
 got wrong.
 
 ### The third correction: a semantic color is not a text color over its own tint
@@ -793,8 +828,13 @@ run summary.
 - **Phase 4** · `AudioPlayer`, migrated. Done.
 - **Phase 5** · done. `ArticleCard`, `AuthorCard`, `TalkCard`, `CourseCard`,
   `LinkRow`, `CodeBlock`, `Blockquote`, `PageHeader`, `EmptyState`, `Breadcrumb`,
-  `Nav`, `SidebarNav`, `TableOfContents`, `Stat`, `Footer`, `Hero`,
-  `NewsletterForm`, `og/` and `shiki/`.
+  `Nav`, `TableOfContents`, `Stat`, `Footer`, `Hero`, `NewsletterForm`, `og/` and
+  `shiki/`.
+
+  `SidebarNav` was on that list and came off it in 0.8.0. It met the rule below
+  on the identity half and never on the consumer half: the two admin projects it
+  was built for each wrote their own and never imported it. See
+  `docs/decisions/0.8.md` § 48.
 
   The criterion for deciding what gets in is still the same: **it encodes an
   identity rule, it has two or more consumers, and it drags in no project
@@ -859,6 +899,15 @@ about as library pieces. They get in anyway: the CLI aesthetic — the bar's
   And the **menu items** of `Select` and `DropdownMenu` stay on `cursor-default`:
   a native menu does not show the pointing hand, and the row highlight already
   says the row responds.
+- **`Table`'s scroll region is a focus stop.** A region you can pan with a mouse
+  has to be reachable with a keyboard — WCAG 2.1.1 — and a table of text holds
+  nothing focusable to land on, so the columns past the right edge were simply
+  unreadable without one. It had been true since the container started scrolling
+  and no story was ever narrow enough to say so; the first one with more columns
+  than width failed axe on `scrollable-region-focusable` immediately. It is
+  unconditional, because whether a table overflows depends on the viewport and
+  the only alternative is a ResizeObserver on every table in the system. See
+  `docs/decisions/0.8.md` § 39.
 
 ### The syntax palette
 
@@ -1004,22 +1053,47 @@ maintain for nothing.
 `role="dialog"` on the content, and a dialog with no accessible name says nothing
 to a screen reader: now it cannot be forgotten because it does not compile.
 
-### The fifth motion exception: the footer's caret
-
-The CLI signature ends in a block caret that blinks, behind `motion-safe`. It is
-the first exception that is not feedback about progress, so it needed a different
-argument.
-
-The signature is a **prompt** — that is why it is mono, why the `$` is in accent
-and why it sits in a footer instead of a `<p>` saying «© 2026». A prompt whose
-caret does not blink is a terminal that has hung, and a still block at the end of
-a line reads as a stray character.
-
-So the criterion splits in two. The first four exceptions are feedback about
-progress or spatial continuity; this one is legibility: it is not decoration, it
-is what makes the piece readable as what it is. `step-end` and not a fade,
-because a real caret is on or off and easing it turns a terminal into a pulsing
-dot. See `docs/decisions.md` § 23.
+### The signature's mark: the halo, and the caret it removed
+
+The CLI signature ends in a 2px bar that stays solid and **radiates** — a
+`box-shadow` ring grows out to 5px and fades, 1.5s `ease-in-out`, behind
+`motion-safe`. It is the fifth declared motion exception and it lands on the
+one criterion the other four share, next to the button spinner: a prompt that
+radiates says the terminal is live, which is what a still mark cannot say.
+
+**It replaced a blink this library had invented.** The signature used to end in a
+half-em block blinking at `step-end`, argued from first principles: a prompt
+whose caret does not blink is a terminal that has hung. Every sentence of that
+argument is true, and it was answering a question the identity had already
+answered — `cursos` and `eduardoalvarez.dev` both shipped `@keyframes cursor-ping`,
+the same effect under the same name, written before this library had a `Footer`.
+The blog's copy is still in its `base.css` with nothing rendering it, because
+adopting the component replaced its mark. That is the drift this library exists
+to remove, arriving through the library.
+
+**`caret` is gone, not merely unused.** It arrived in 0.6.0 and it is removed
+here. A published utility is normally not withdrawn the day its one consumer
+changes its mind, but it never had a consumer to change its mind: no project ever
+wrote the class, and the argument that justified it was reasoned rather than
+read. Leaving it published leaves the invention in the package under a label that
+makes it look like a feature.
+
+**The halo is not that utility with a setting**, which is why it arrives under
+its own name. The caret's whole case rested on `step-end`: a real caret is on or
+off, and easing it turns a terminal into a pulsing dot. Folding a halo into that
+name would make the argument contradict itself.
+
+**And the rule gets its shape back.** The caret was the only member of the
+«legibility» criterion that was invented to admit it, so the five exceptions —
+the button spinner, the `Sheet` panel, the `Skeleton` shimmer, the `Accordion`
+height and this halo — are again all one thing: feedback about progress or about
+spatial continuity. A sixth lands on that or it does not exist.
+
+The bar is 2px and not a block because a halo needs something thin to radiate
+from, the colour is `var(--color-accent)` so it follows the mode, and
+`motion-safe` is the one thing not copied from `cursos` — whose span animates
+regardless of the setting. See `docs/decisions/0.8.md` § 45, and § 23 for the entry
+it reverses.
 
 ### The second motion exception
 
@@ -1065,7 +1139,7 @@ text, and `surfaceRaised` is where a toolbar lives.
 `destructiveOutline` fills on hover, and that is a declared exception to
 «secondary is never filled» — a destructive that looks identical to a secondary
 until you read it is the problem the variant exists to fix. See
-`docs/decisions.md` § 21.
+`docs/decisions/0.6.md` § 21.
 
 ### `icon-sm`, for the one admin app
 
@@ -1076,7 +1150,7 @@ three actions per table row, and at 42 the row grows with them.
 `size="icon-sm"` is 32×32, and it is 32 and not the 28 that project actually had:
 32 is `sm`'s height, so a dense icon button lines up with a small text button and
 a toolbar mixing the two stays on one baseline. It does not replace `icon` — a
-page's primary action stays at 42. See `docs/decisions.md` § 22.
+page's primary action stays at 42. See `docs/decisions/0.6.md` § 22.
 
 ### The theme script, and the mode a site already decided
 

package/dist/brand/index.cjs

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

package/dist/brand/index.js

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

package/dist/chart/index.cjs

@@ -1,6 +1,7 @@
 'use client';
 'use strict';
 
+var react = require('react');
 var recharts = require('recharts');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -45,7 +46,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.md`.
+   * outweighed the title they accompany. See `docs/decisions/`.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
@@ -91,7 +92,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.md` § 22.
+   * a row of a table. See `docs/decisions/0.6.md` § 22.
    */
   iconSm: 32
 };
@@ -294,11 +295,137 @@ function ChartLegendContent({ payload, className }) {
     /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", variant: "label", tone: "secondary", className: "font-normal", children: item.value })
   ] }, `${String(item.dataKey ?? item.value ?? i)}`)) });
 }
+var rows = (data) => data;
+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 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,
+  {
+    cursor: false,
+    content: /* @__PURE__ */ jsxRuntime.jsx(ChartTooltipContent, { formatter: formatter ? (value) => formatter(value) : void 0 })
+  },
+  "tooltip"
+);
+function AreaChart({
+  data,
+  series: series2,
+  xKey,
+  formatter,
+  legend,
+  stacked = false,
+  ...container
+}) {
+  const id = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.AreaChart, { data: rows(data), margin: MARGIN, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: series2.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: `${id}-${s.key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "5%", stopColor: color(s, i), stopOpacity: 0.5 }),
+      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "95%", stopColor: color(s, i), stopOpacity: 0.05 })
+    ] }, s.key)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40 }),
+    tooltipOf(formatter),
+    legendOf(series2, legend),
+    series2.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Area,
+      {
+        dataKey: s.key,
+        name: s.label,
+        type: "natural",
+        stroke: color(s, i),
+        strokeWidth: 2,
+        fill: `url(#${id}-${s.key})`,
+        isAnimationActive: false,
+        ...stacked ? { stackId: "stack" } : {}
+      },
+      s.key
+    ))
+  ] }) });
+}
+function BarChart({
+  data,
+  series: series2,
+  xKey,
+  formatter,
+  legend,
+  orientation = "vertical",
+  stacked = false,
+  ...container
+}) {
+  const lying = orientation === "horizontal";
+  return /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    recharts.BarChart,
+    {
+      data: rows(data),
+      margin: MARGIN,
+      ...lying ? { layout: "vertical" } : {},
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { vertical: lying, horizontal: !lying }),
+        lying ? [
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { dataKey: xKey, type: "category", ...AXIS, width: 130 }, "category"),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { type: "number", hide: true }, "value")
+        ] : [
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }, "category"),
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40 }, "value")
+        ],
+        tooltipOf(formatter),
+        legendOf(series2, legend),
+        series2.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          recharts.Bar,
+          {
+            dataKey: s.key,
+            name: s.label,
+            fill: color(s, i),
+            radius: lying ? [0, radius.chip, radius.chip, 0] : [radius.chip, radius.chip, 0, 0],
+            isAnimationActive: false,
+            ...stacked ? { stackId: "stack" } : {}
+          },
+          s.key
+        ))
+      ]
+    }
+  ) });
+}
+function LineChart({
+  data,
+  series: series2,
+  xKey,
+  formatter,
+  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 }),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.YAxis, { ...AXIS, width: 40 }),
+    tooltipOf(formatter),
+    legendOf(series2, legend),
+    series2.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Line,
+      {
+        dataKey: s.key,
+        name: s.label,
+        type: "natural",
+        stroke: color(s, i),
+        strokeWidth: 2,
+        dot: false,
+        activeDot: { r: 4 },
+        isAnimationActive: false
+      },
+      s.key
+    ))
+  ] }) });
+}
 
+exports.AreaChart = AreaChart;
+exports.BarChart = BarChart;
 exports.ChartContainer = ChartContainer;
 exports.ChartLegend = ChartLegend;
 exports.ChartLegendContent = ChartLegendContent;
 exports.ChartTooltip = ChartTooltip;
 exports.ChartTooltipContent = ChartTooltipContent;
+exports.LineChart = LineChart;
 exports.SERIES_COLORS = SERIES_COLORS;
 exports.seriesColor = seriesColor;

package/dist/chart/index.d.cts

@@ -22,9 +22,15 @@ import { Legend, Tooltip } from 'recharts';
  *   3. The tooltip appears where it will stay: `isAnimationActive` is off
  *      everywhere, because the system does not animate position.
  *
- * The data pieces — `BarChart`, `Line`, `XAxis` — are NOT re-exported. They are
- * Recharts' API, the project already knows it, and wrapping them would be a
- * layer of names to keep in sync with the library's version.
+ * Recharts' data pieces — `Area`, `Line`, `XAxis` — are still NOT re-exported.
+ * They are Recharts' API, the project already knows it, and wrapping them would
+ * be a layer of names to keep in sync with the library's version.
+ *
+ * What IS published, since this version, are three CHART TYPES on top of that
+ * chassis: `AreaChart`, `BarChart` and `LineChart`. They are not wrappers over
+ * Recharts' components of the same name — they take `data`, `series` and `xKey`
+ * and draw the whole thing. See `docs/decisions/0.8.md` § 43 for why the names
+ * collide on purpose.
  */
 /**
  * The color of series `index`, as a custom property.
@@ -123,5 +129,109 @@ type ChartLegendContentProps = {
 };
 /** The legend, with the tooltip's same square swatch and the `label` scale. */
 declare function ChartLegendContent({ payload, className }: ChartLegendContentProps): react.JSX.Element | null;
+/**
+ * One series: which key of the datum it reads, what it is called, and — only if
+ * you insist — what color it is.
+ *
+ * `color` is there for the case the palette cannot serve: a status series where
+ * «pagado» has to be `success` and not «the first of the four». Leaving it out
+ * is the normal case and the right one — `seriesColor(i)` follows the mode, and
+ * a hard-coded hex does not. See the note on `seriesColor` above.
+ */
+type ChartSeries = {
+    /** The key this series reads in each datum. */
+    key: string;
+    /** What the legend and the tooltip call it. User-facing, so Spanish. */
+    label: string;
+    /** Overrides the palette. Defaults to `seriesColor(index)`. */
+    color?: string | undefined;
+};
+/** A row of the chart: the category key plus one value per series. */
+type ChartDatum = Record<string, unknown>;
+/**
+ * What all three types take, and it is deliberately short: `data`, `series` and
+ * `xKey`, plus the container's own `label`.
+ *
+ * Everything that is NOT here is the part that was being copied — the gradient,
+ * the grid with no vertical lines, the axes with no line and no tick, the
+ * tooltip with no cursor. `cursos` wrote all of it four times, once per chart,
+ * and the fourth one would have had a different `strokeWidth` from the first.
+ * The drawing is the system's; the data is the project's.
+ */
+type SeriesChartProps = Omit<ChartContainerProps, 'children'> & {
+    data: readonly ChartDatum[];
+    series: readonly ChartSeries[];
+    /** The key on the category axis: the day, the month, the course. */
+    xKey: string;
+    /** Formats the value in the tooltip. The library imposes no locale. */
+    formatter?: ((value: unknown) => ReactNode) | undefined;
+    /**
+     * Shows the legend. It defaults to «only when there is more than one series»:
+     * a legend naming the one line already named by the chart's own heading is a
+     * row of pixels that says nothing.
+     */
+    legend?: boolean | undefined;
+};
+/**
+ * A series over time, with the fill fading out underneath it.
+ *
+ * The gradient is the whole reason this is a component and not three lines at
+ * the call site: it needs a `<linearGradient>` with an id, the id has to be
+ * unique on the page, and the two projects that wrote it by hand both hardcoded
+ * one — a second chart on the same screen would have taken the first one's fill.
+ * `useId` settles it.
+ *
+ * 0.5 down to 0.05 is the ramp `cursos` arrived at, and `type="natural"` is its
+ * curve: a monotone spline reads as a measurement and a straight segment reads
+ * as a schedule. The stroke is 2, which is the one weight in the system that is
+ * neither a hairline nor a border.
+ *
+ * With more than one series the areas OVERLAP rather than stack, because a
+ * stacked area answers «how much in total» and this library has no way to know
+ * that is the question. When it is, pass `stacked`. When you want to compare
+ * rather than add up, the answer is `LineChart`.
+ */
+type AreaChartProps = SeriesChartProps & {
+    /** Adds the series up instead of overlaying them. */
+    stacked?: boolean | undefined;
+};
+declare function AreaChart({ data, series, xKey, formatter, legend, stacked, ...container }: AreaChartProps): react.JSX.Element;
+/**
+ * Bars, upright or lying down.
+ *
+ * `orientation` is named for what you SEE and not for what Recharts calls it,
+ * and the two are opposites: Recharts' `layout="vertical"` draws horizontal
+ * bars. That inversion is a coin flip every time somebody writes it, so it is
+ * settled here once — `vertical` means the bars grow upwards.
+ *
+ * `horizontal` is the shape for a ranking, which is what `cursos` uses it for:
+ * course names on the left, one bar each. It reserves 130px for the category
+ * axis and hides the value axis, because a ranking is read by comparing lengths
+ * and not by reading a number off a scale — the number is in the tooltip.
+ *
+ * The corner radius is `radius.chip`, the system's smallest. A bar is a chip
+ * lying down, and picking a number that is not a token is how a fifth radius
+ * gets into the system without anybody deciding it should.
+ */
+type BarChartProps = SeriesChartProps & {
+    /** `vertical` grows the bars upwards, which is the default. `horizontal` is a ranking. */
+    orientation?: 'vertical' | 'horizontal' | undefined;
+    /** Stacks the series instead of putting them side by side. */
+    stacked?: boolean | undefined;
+};
+declare function BarChart({ data, series, xKey, formatter, legend, orientation, stacked, ...container }: BarChartProps): react.JSX.Element;
+/**
+ * Lines, for comparing series against each other.
+ *
+ * It is the type that does NOT add anything up, which is the whole reason it
+ * exists next to `AreaChart`: four filled areas on top of each other are a
+ * total, and four lines are four things you can tell apart.
+ *
+ * No dots at rest. A point per datum on a 90-day series is a dotted line, and
+ * the value is in the tooltip; the dot comes back on hover because that is
+ * where it means «this one».
+ */
+type LineChartProps = SeriesChartProps;
+declare function LineChart({ data, series, xKey, formatter, legend, ...container }: LineChartProps): react.JSX.Element;
 
-export { ChartContainer, type ChartContainerProps, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartPayloadItem, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, SERIES_COLORS, seriesColor };
+export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, ChartContainer, type ChartContainerProps, type ChartDatum, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartPayloadItem, type ChartSeries, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, LineChart, type LineChartProps, SERIES_COLORS, type SeriesChartProps, seriesColor };