@eduardoalvarez/arrecife 0.7.0 → 0.9.0

package/llms.txt

@@ -116,10 +116,11 @@ that only whoever uses them installs.
 | `@eduardoalvarez/arrecife/og` | **no** | — | The Open Graph templates for Satori |
 | `@eduardoalvarez/arrecife/shiki` | **no** | — | The syntax highlighting theme |
 | `@eduardoalvarez/arrecife/brand` | yes | — | Logo, isotype and mascot as components |
-| `@eduardoalvarez/arrecife/social` | yes, on the server only | — | The nine social icons, loose. No `"use client"` |
+| `@eduardoalvarez/arrecife/social` | yes, on the server only | — | The ten social icons, loose. No `"use client"` |
+| `@eduardoalvarez/arrecife/social/data` | **no** | — | The same ten as shapes, plus `socialSvg`. For a template that mounts no React |
 | `@eduardoalvarez/arrecife/icons` | yes | `@phosphor-icons/react` | `Icon`, which draws a Phosphor icon at the system's size, and at the weight its role asks for |
 | `@eduardoalvarez/arrecife/form` | yes | `react-hook-form` | The form layer: labels, errors and `aria-*` |
-| `@eduardoalvarez/arrecife/chart` | yes | `recharts` | The chart chassis and the series palette |
+| `@eduardoalvarez/arrecife/chart` | yes | `recharts` | The chart chassis, the series palette and the three chart types |
 | `@eduardoalvarez/arrecife/assets/*` | — | — | The brand PNGs |
 
 Importing the root from a build script to get one token is the mistake the
@@ -146,11 +147,11 @@ import in an adapter of your own marked `"use client"` — that was the workarou
 before 0.6.0 and it pulled 272 KB of client chunk in for components that never
 needed it.
 
-The five portable subpaths do NOT carry the directive, and that is the half that
-matters in a Server Component: `./tokens`, `./theme`, `./variants`, `./og` and
-`./shiki` stay on the server. Neither does `./social`, which is a third case: it
-renders React — it is nine `<svg>` — so it can never be portable, but it holds no
-state and nothing about it needs a client boundary. It is the only way to put a
+The six portable subpaths do NOT carry the directive, and that is the half that
+matters in a Server Component: `./tokens`, `./theme`, `./variants`, `./social/data`,
+`./og` and `./shiki` stay on the server. Neither does `./social`, which is a third
+case: it renders React — it is ten `<svg>` — so it can never be portable, but it
+holds no state and nothing about it needs a client boundary. It is the only way to put a
 social icon in a Server Component, and § «The social icons come from `./social`»
 below says why the grouped form cannot do it. If all you need are classes — for a `<div>`, an
 `<a>` or an Astro island you do not want to hydrate — import them from
@@ -229,59 +230,6 @@ tells them apart.
 Do not silence it by removing the `@import`: the fix is the `@source` line, or
 renaming your own token.
 
-### `SidebarNav` groups, and the icon replaces the prompt
-
-```tsx
-<SidebarNav aria-label="Administración" brand={<>…</>} version="v0.6.0" branch="main">
-  <SidebarItem href="/admin" icon={<Icon as={SquaresFour} />} active>Resumen</SidebarItem>
-
-  <SidebarGroup label="Ventas">
-    <SidebarItem href="/admin/ventas" icon={<Icon as={CreditCard} />}>Ventas</SidebarItem>
-    <SidebarItem href="/admin/cupones" icon={<Icon as={Ticket} />}>Cupones</SidebarItem>
-  </SidebarGroup>
-</SidebarNav>
-```
-
-Past about eight items a flat sidebar stops being readable. Each `SidebarGroup`
-is a nested list named by its label, so a screen reader says «lista Ventas, 3
-elementos» instead of one list of eleven. The label is a paragraph and **not** a
-heading on purpose: a sidebar is navigation, and a heading here would land in the
-page's own outline.
-
-**`icon` replaces the `▸`, it does not join it.** Do not pass a glyph and expect
-the prompt as well. A sidebar with no icons keeps the prompt on every item, which
-is what a four-section blog admin wants.
-
-**`brand` does not replace `title`.** `title` is the eyebrow and also the `nav`'s
-accessible name when it is a string; a logo is not an accessible name, so pass
-`aria-label` when you use `brand`. See `docs/decisions.md` § 32.
-
-**It collapses to a rail, and the toggle is CONTROLLED:**
-
-```tsx
-const [collapsed, setCollapsed] = useState(false);
-
-<SidebarNav
-  collapsed={collapsed}
-  onCollapsedChange={setCollapsed}
-  brand={<Wordmark />}
-  mark={<Isotype className="h-6" />}
-  user={<Avatar … />}
->
-```
-
-There is no uncontrolled mode: this state is almost always persisted, and an
-internal one would fight the cookie you already keep. `onCollapsedChange` is also
-what makes the toggle appear — `collapsed` on its own is a rail with no way out,
-which is a layout and not an accident.
-
-Collapsed, the widths become `w-sidebar-rail` (56) and `w-sidebar` (256), and the
-component owns them only when it can collapse. It does **not** transition, on
-purpose. `brand` is hidden and `mark` takes its place, because a wordmark does
-not fit in a rail. Every label stays in the accessibility tree as `sr-only`, so
-do not «simplify» by dropping the children of a collapsed item. See
-`docs/decisions.md` § 34.
-
 ### `Nav` is two slots and one height
 
 Almost everything an app shell wants from a site bar is already a slot:
@@ -308,7 +256,7 @@ does nothing.
 
 **One `Nav` per page.** It renders the site's `banner` landmark, and two banners
 on one page is an accessibility failure — which is also why `PageHeader` goes
-inside `<main>` and is not a landmark. See `docs/decisions.md` § 30.
+inside `<main>` and is not a landmark. See `decisions/0.7.md` § 30.
 
 ### Icons are yours, the way they are drawn is not
 
@@ -344,13 +292,13 @@ is no fourth:
 | `tone` | Weight | What it is |
 | --- | --- | --- |
 | `action` · the default | `regular` | An icon that is a control or names one. It is the system's line: 16 on a 256 grid = 0.0625em, against the document's 1.6 on a 24 grid = 0.0667em. Six per cent apart, which is no pixel on any screen |
-| `current` | `fill` | The one of a set you are on — the sidebar item carrying `aria-current` |
+| `current` | `fill` | The one of a set you are on — the nav item carrying `aria-current` |
 | `quiet` | `light` | Furniture: a marker in a metadata row, not a control and not a state |
 
 ```tsx
-<SidebarItem href="/cursos" active icon={<Icon as={GraduationCap} tone="current" />}>
+<NavItem href="/cursos" active icon={<Icon as={GraduationCap} tone="current" />}>
   cursos
-</SidebarItem>
+</NavItem>
 ```
 
 `current` is the one that earns the axis. An active item already paints itself
@@ -377,7 +325,7 @@ a Server Component throws. It ships no `"use client"` to stop you, so the failur
 arrives at render rather than at build. The `/ssr` entry is the same icons
 without the context read, and `Icon` works with either.
 
-See `docs/decisions.md` § 29 and § 35.
+See `decisions/0.7.md` § 29 and § 35.
 
 ### `Stat`'s delta says direction, not judgement
 
@@ -394,7 +342,7 @@ errores» point the same way and mean opposite things, so whether a number is go
 news is `tone`'s job and yours: `neutral` for a datum, `alert` when the number IS
 the problem, `achievement` when it is the reward. `alert` and `achievement` paint
 the same sand on purpose — the API is the meaning, the colour is the
-implementation. See `docs/decisions.md` § 28.
+implementation. See `decisions/0.7.md` § 28.
 
 `delta.value` arrives already formatted, like `value`: the library imposes no
 locale and computes no percentage. `spark` is a `ReactNode` and the library ships
@@ -404,7 +352,7 @@ no sparkline — pass your own, exactly like `icon`.
 and biolume goes on the icon badge and the sparkline instead: three accents in
 one card and the figure stops being the loudest thing in it. `alert` and
 `achievement` DO paint the number sand, which is how «this number is not just a
-number» is said. See `docs/decisions.md` § 31.
+number» is said. See `decisions/0.7.md` § 31.
 
 **`icon` is a badge in the corner opposite the title**, in a circle tinted at
 10 % of the tone. You pass the glyph; the circle, the tint and the size are the
@@ -432,6 +380,102 @@ Do not reach for `page` inside a table because the face is «nicer»: an admin
 screen with a dozen empty regions gets a dozen mascots, which is what made every
 consuming project write its own empty state instead of using this one.
 
+### The two shapes of `Footer`
+
+```tsx
+// The default. Stacked rows, signature level with the first one.
+<Footer brand={<Logo />} social={SOCIAL} />
+
+// `full`. Brand and description on the left, link columns on the right,
+// signature closing the piece behind a hairline.
+<Footer
+  variant="full"
+  brand={<Logo />}
+  description="Cursos para construir con IA, directos y al grano."
+  columns={[
+    { title: 'Aprendizaje', links: [{ label: 'Cursos', href: '/cursos' }] },
+    { title: 'Legal', links: [{ label: 'Términos', href: '/terminos' }] },
+  ]}
+  social={SOCIAL}
+  action={<Button variant="tertiary" size="sm">Reportar un problema</Button>}
+  linkAsChild={({ href, children }) => <Link href={href}>{children}</Link>}
+/>
+```
+
+**Passing no `variant` is the default shape, and it is not a fallback**: two of
+the three sites that draw a footer want exactly that, and it has not changed.
+
+`columns`, `description`, `action` and `linkAsChild` exist ONLY on `full`. The
+props are a discriminated union, like `EmptyState`'s, so the default form cannot
+be handed one — if `tsc` rejects a `columns` you passed, you meant to pass
+`variant="full"` as well.
+
+Reach for `full` whenever the footer has links at all. **There is no other
+place to put them**: `Footer` takes no `children`, so a row of loose text links
+does not compile. That row existed until 0.8.0 and no project ever passed it —
+and columns are also the only way to say «this block changes with who is
+looking», an admin block against an account block, because they are data you
+build and not markup the library walks.
+
+The `./` in front of each column link is the component's, like `NavItem`'s, and
+it is `aria-hidden`. The column titles render as `<h3>`. Pass `linkAsChild` to
+plug in the router's `Link`; without it the columns are plain `<a>` and every
+navigation costs a page load.
+
+### `Table` brings its own surface
+
+```tsx
+// ✅ this is the whole thing
+<Table>…</Table>
+
+// ❌ two borders. The radius, the border and the clip are the component's
+<div className="rounded-lg border border-border bg-card overflow-hidden">
+  <Table>…</Table>
+</div>
+```
+
+`Table` draws `rounded-card`, `border-hairline` and the clip on the same
+container that scrolls it horizontally. Do not wrap it in a surface of your own,
+and do not add `overflow-hidden`: `TableRow`'s hover tint is already clipped by
+the corners, which is what the wrapper used to be for.
+
+`className` reaches the `<table>`, not the container, so a `rounded-none` from
+the call site does nothing.
+
+### The three chart types, and the names they took
+
+```tsx
+import { AreaChart, BarChart, LineChart } from '@eduardoalvarez/arrecife/chart';
+
+<AreaChart
+  label="Registros nuevos por día"
+  summary="Sube de 24 a 52 con una caída en mayo."
+  height={200}
+  data={data}
+  series={[{ key: 'count', label: 'Registros' }]}
+  xKey="day"
+/>
+```
+
+`data`, `series` and `xKey`, plus the mandatory `label`. The gradient, the grid,
+the axes and the tooltip belong to the component — that composition is the system
+drawing, and writing it at the call site is how it drifts.
+
+**These are NOT Recharts' components of the same name.** Import ours; do not
+import both in one file. Recharts' `Area`, `Line` and `XAxis` are still not
+re-exported, because they are unchanged and wrapping them buys nothing.
+
+`BarChart`'s `orientation` is named for what you see: `horizontal` lays the bars
+down for a ranking. Recharts calls that same thing `layout="vertical"` — if you
+are porting code, the value flips.
+
+`stacked` on `AreaChart` and `BarChart` adds the series up. Without it areas
+overlap, which is honest and rarely what you want with more than one series: to
+COMPARE rather than add up, the type is `LineChart`.
+
+Anything that is not a series over a category axis has no type and is not missing
+one. A doughnut is `ChartContainer` plus Recharts' `Pie` with `SERIES_COLORS`.
+
 ### The social icons come from `./social`
 
 ```tsx
@@ -446,9 +490,16 @@ import { social } from '@eduardoalvarez/arrecife';
 <social.GitHub />
 ```
 
-All nine: `GitHub`, `LinkedIn`, `X`, `Instagram`, `Discord`, `YouTube`, `Rss`,
-`Email`, `Newsletter`. `Newsletter` is the bell: a way to follow, like `Rss`,
-named for what it means.
+All ten: `GitHub`, `LinkedIn`, `X`, `Instagram`, `Discord`, `YouTube`, `Rss`,
+`Email`, `Newsletter`, `Website`. `Newsletter` is the bell: a way to follow, like
+`Rss`, named for what it means. `Website` is «my other site» — the personal
+domain in a footer full of networks — and it is what replaces borrowing a globe
+from an icon set, which brings its own stroke weight and its own margins.
+
+Six are brands and go SOLID, four are functional and use a 1.6 stroke. A row that
+mixes the two pens is the normal case, not a defect: a brand is somebody else's
+silhouette and cannot be outlined, and a symbol the system draws itself has no
+owner to be faithful to.
 
 **In a Server Component the subpath is mandatory, not preferred.** The root
 carries `"use client"`, and a client reference crosses the boundary per EXPORT —
@@ -460,6 +511,24 @@ client JS. Use `social` only when mapping a list of names onto icons.
 The root keeps the group because one of them is called `X`, and loose at the root
 it collides. In the subpath, alias it: `import { X as XIcon }`.
 
+**If you mount no React, the shapes are published too.** `./social/data` imports
+nothing, so an `.astro` that ships no framework JavaScript can draw the same
+glyph instead of pasting the `<path>` into the project:
+
+```astro
+---
+import { socialSvg } from '@eduardoalvarez/arrecife/social/data';
+---
+<Fragment set:html={socialSvg('GitHub', { class: 'size-[19px]' })} />
+```
+
+`socialGlyphs` is the catalogue keyed by name, `socialNames` is the ten names in
+order, and every glyph is exported on its own — `gitHubGlyph`, `websiteGlyph` —
+if you want the shapes rather than the markup. The React components are drawn
+from that same file, so the two renderings cannot disagree. Reaching for
+`socialGlyphs` or `socialSvg` names all ten, which is the price of iterating a
+catalogue; `import { LinkedIn }` still costs one shape.
+
 The internal glyphs — `Close`, `ChevronDown`, `Sun` — are **not exported** and
 are not going to be: they are the primitives' minimum set. A component that needs
 an icon receives it as a prop (`Stat` has `icon`, each `SocialLink` in `Footer`
@@ -498,7 +567,7 @@ They carry a prefix because `xs, sm, md, lg, xl` are the names of Tailwind's
 `--container-*` scale, and a `--spacing-md` of our own was swallowing `max-w-md`
 across the whole project with nothing warning about it. `max-w-*`, `w-*` and
 `h-*` belong to Tailwind and are used as they are. Migration guide from 0.2.0:
-<https://github.com/Proskynete/arrecife/blob/main/docs/migration-0.3.md>.
+<https://github.com/Proskynete/arrecife/blob/main/docs/runbooks/migration-0.3.md>.
 
 ## System rules the consuming code must not break
 
@@ -511,10 +580,16 @@ compiles and looks wrong, or that fails the project's accessibility audit.
 3. **`Button variant="destructive"` is for the irreversible only.** Never for
    «cancel» on a form, and not inside an `AlertDialog` — there the confirm button
    stays `primary`, because the title, the focus on cancel and the no-click-outside
-   already carry the weight. See `docs/decisions.md` § 21.
+   already carry the weight. See `decisions/0.6.md` § 21.
 4. **`secondary` is never filled.** It is border and text.
 5. **No entrance animations.** Modals, menus, tooltips and toasts appear where
-   they will stay. The only exception is the `Button loading` spinner.
+   they will stay. There are five declared exceptions, all behind `motion-safe`
+   and all with a reason written down: the `Button loading` spinner, `Sheet`'s
+   side panel, `Skeleton`'s shimmer, `Accordion`'s height and the `pulse-accent`
+   halo the footer signature ends in. All five are the same criterion — feedback
+   about progress or about spatial continuity — and a sixth lands on it or it
+   does not exist. The `caret` blink 0.6.0 shipped is removed in 0.8.0; it was
+   the only member of the second criterion § 23 opened for it.
 6. **Semantics and scale are independent.** An `h2` that has to look small is
    `<Text as="h2" variant="h3">`, never an `h3` that lies about the hierarchy.
 7. **`textMuted` never goes over `surfaceRaised`**: it gives 4.07 in dark. Over a
@@ -534,7 +609,7 @@ compiles and looks wrong, or that fails the project's accessibility audit.
     hole inside a table page or a dashboard widget, and it carries no face — the
     type does not accept one. `page`, the default, is the one that IS the screen,
     and there `expression` stays mandatory. A dozen mascots on one admin screen is
-    not the humour contract. See `docs/decisions.md` § 27.
+    not the humour contract. See `decisions/0.7.md` § 27.
 12. **The fin is not a free parameter**: `foam` on a dark background, `color` on a
     light one. The components already choose it from the background.
 
@@ -833,7 +908,7 @@ Source: `src/primitives/date-field.tsx`
 
 A date field on the native control, not on a calendar of our own.
 
-- Extends: `Omit<ComponentPropsWithoutRef<'input'>, 'type'>`
+- Extends: `Omit<ComponentProps<'input'>, 'type'>`
 
 | prop | type | req. | default | what it does |
 | --- | --- | --- | --- | --- |
@@ -922,7 +997,9 @@ No entrance animation: the menu appears, it does not unfold.
 
 Source: `src/primitives/input.tsx`
 
-- Extends: `ComponentPropsWithoutRef<'input'>`
+`ComponentProps` and not `ComponentPropsWithoutRef`, and the difference is a bug and not a preference.
+
+- Extends: `ComponentProps<'input'>`
 
 | prop | type | req. | default | what it does |
 | --- | --- | --- | --- | --- |
@@ -934,7 +1011,7 @@ Source: `src/primitives/label.tsx`
 
 The `label` scale: 13px, which is the system's absolute minimum on screen.
 
-- Extends: `ComponentPropsWithoutRef<typeof LabelPrimitive.Root>`
+- Extends: `ComponentProps<typeof LabelPrimitive.Root>`
 - No own props: it passes through those of the element or primitive it wraps.
 
 ### Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis
@@ -1118,7 +1195,7 @@ The knob changes position, but is not animated while doing so: the position IS t
 Source: `src/primitives/table.tsx`
 
 **Table**
-The container scrolls horizontally: the page never does.
+The table, and the surface it sits on. The two are one piece.
 
 - No own props: it passes through those of the element or primitive it wraps.
 
@@ -1141,6 +1218,8 @@ The container scrolls horizontally: the page never does.
 - No own props: it passes through those of the element or primitive it wraps.
 
 **TableCaption**
+The caption, at the bottom and INSIDE the surface.
+
 - No own props: it passes through those of the element or primitive it wraps.
 
 ### Tabs, TabsList, TabsTrigger, TabsContent
@@ -1164,7 +1243,9 @@ Source: `src/primitives/tabs.tsx`
 
 Source: `src/primitives/textarea.tsx`
 
-- Extends: `ComponentPropsWithoutRef<'textarea'>`
+`ComponentProps` carries `ref`, which React 19 passes as a prop. See `InputProps`.
+
+- Extends: `ComponentProps<'textarea'>`
 
 | prop | type | req. | default | what it does |
 | --- | --- | --- | --- | --- |
@@ -1215,7 +1296,7 @@ Source: `src/primitives/typography.tsx`
 
 ## Components
 
-Imported from `@eduardoalvarez/arrecife`. 25 exports.
+Imported from `@eduardoalvarez/arrecife`. 21 exports.
 
 ### ArticleCard
 
@@ -1223,7 +1304,7 @@ Source: `src/components/article-card/index.tsx`
 
 The metadata line uses `meta` and not `eyebrow`: `18 ago 2026 · 8 min de lectura` is a datum, not an overline, and in small caps it was neither.
 
-- Extends: `Omit<CardShellProps, 'children' \| 'title'>`
+- Extends: `Omit<CardShellProps, "children" \| "title">`
 
 | prop | type | req. | default | what it does |
 | --- | --- | --- | --- | --- |
@@ -1355,26 +1436,25 @@ Source: `src/components/event-calendar/index.tsx`
 | `onUpdateEvent` | `(event: CalendarEvent) => void` |  |  |  |
 | `selected` | `Date` |  |  | Selected day, if the project controls it. Without it, it starts on today. |
 
-### Footer, FooterLink
+### Footer
 
 Source: `src/components/footer/index.tsx`
 
-**Footer**
-- Extends: `ComponentPropsWithoutRef<'footer'>`
+- Extends: `FooterBase & ( \| { /** The shape the library has always had: stacked rows and the signature at the top right. */ variant?: 'default' \| undefined; columns?: never; description?: never; action?: never; linkAsChild?: never; } \| { /** `full`: brand and description on the left, link columns on the right, signature closing it. */ variant: 'full'; /** The link columns. Mandatory: without them `full` is the default form with extra steps. */ columns: readonly FooterColumn[]; /** One line under the brand, saying what the site is. */ description?: ReactNode; /** An action under the row of icons — «Reportar un problema». Usually a tertiary button. */ action?: ReactNode; /** * Renders the column links through the child, to plug in the framework's * `Link`. It receives each `href` in the Slot's `props`. * * It is § 24's rule applied where it now bites: a column turns data into * markup, so without a slot the only way to reach one of those links * from a project is to select it by structure or by a style class, and * neither is a contract. `Breadcrumb` and `ArticleCard` have the same * signature on purpose. * * It is also what a client-side transition needs: `cursos` reached for * it the moment its columns stopped being `<a>` tags. */ linkAsChild?: ((props: { href: string; children: ReactNode }) => ReactNode) \| undefined; } )`
 
 | prop | type | req. | default | what it does |
 | --- | --- | --- | --- | --- |
+| `action` | `ReactNode` |  |  | An action under the row of icons — «Reportar un problema». Usually a tertiary button. |
 | `brand` | `ReactNode` |  |  | The brand row: the fin and the wordmark, at the very top. |
+| `columns` | `readonly FooterColumn[]` |  |  | The link columns. Mandatory: without them `full` is the default form with extra steps. |
+| `description` | `ReactNode` |  |  | One line under the brand, saying what the site is. |
+| `domain` | `string` |  |  | The domain the signature prints, defaulting to the identity's own. |
+| `linkAsChild` | `(props: { href: string; children: ReactNode; }) => ReactNode` |  |  | Renders the column links through the child, to plug in the framework's `Link`. It receives each `href` in the Slot's `props`. |
+| `signatureHref` | `string` |  |  | Makes the domain inside the signature a link, keeping the `$`, the path and the prompt's mark as text. |
 | `social` | `readonly SocialLink[]` |  |  |  |
+| `variant` | `"full" \| "default"` |  |  | The shape the library has always had: stacked rows and the signature at the top right. `full`: brand and description on the left, link columns on the right, signature closing it. |
 | `year` | `number` |  | `new Date().getFullYear()` | The signature's year. |
 
-**FooterLink**
-- Extends: `ComponentPropsWithoutRef<'a'>`
-
-| prop | type | req. | default | what it does |
-| --- | --- | --- | --- | --- |
-| `asChild` | `boolean \| undefined` |  | `false` |  |
-
 ### Hero
 
 Source: `src/components/hero/index.tsx`
@@ -1494,46 +1574,6 @@ How much you have read. It is NOT `Progress` under another name.
 | `target` | `RefObject<HTMLElement \| null>` |  |  | The element being measured. Without it, the whole document. |
 | `tone` | `"accent" \| "warm"` |  | `accent` | Sand instead of biolume, to match course progress. |
 
-### SidebarItem, SidebarGroup, SidebarNav
-
-Source: `src/components/sidebar-nav/index.tsx`
-
-**SidebarItem**
-The blog admin's sidebar.
-
-- Extends: `ComponentPropsWithoutRef<'a'>`
-
-| prop | type | req. | default | what it does |
-| --- | --- | --- | --- | --- |
-| `active` | `boolean \| undefined` |  | `false` |  |
-| `asChild` | `boolean \| undefined` |  | `false` |  |
-| `badge` | `ReactNode` |  |  | Counter on the right: pending drafts, unused media. |
-| `icon` | `ReactNode` |  |  | The section's glyph, on the left. It REPLACES the `▸` rather than joining it, and it inherits `currentColor`, so it follows the item's state without being tinted separately. |
-
-**SidebarGroup**
-A labelled block of items — «Contenido», «Alumnos», «Ventas».
-
-- Extends: `Omit<ComponentPropsWithoutRef<'li'>, 'title'>`
-
-| prop | type | req. | default | what it does |
-| --- | --- | --- | --- | --- |
-| `label` | `ReactNode` | yes |  | The block's name. Sentence case, not a section title. |
-
-**SidebarNav**
-- Extends: `ComponentPropsWithoutRef<'nav'>`
-
-| prop | type | req. | default | what it does |
-| --- | --- | --- | --- | --- |
-| `branch` | `ReactNode` |  |  |  |
-| `brand` | `ReactNode` |  |  | The row at the top: isotype and wordmark, `cursos · admin`. It is a slot and not a `logo`/`name` pair because every panel spells its own name differently, and the part that IS the system — the rhythm, the hairline under it — is here. |
-| `collapsed` | `boolean \| undefined` |  | `false` | Turns the sidebar into a rail: icons only, and the widths become the library's — `w-sidebar` and `w-sidebar-rail`. It is CONTROLLED and there is no uncontrolled mode, because this state is almost always persisted in a cookie or in `localStorage`, and an internal state would fight the one the project already keeps. |
-| `collapseLabel` | `string` |  | `Plegar el panel` | The toggle's accessible name, in the two directions. |
-| `expandLabel` | `string` |  | `Desplegar el panel` |  |
-| `mark` | `ReactNode` |  |  | What `brand` becomes in the rail. Usually the isotype with no wordmark. |
-| `onCollapsedChange` | `(collapsed: boolean) => void` |  |  | Called with what the state should become. With it, the toggle appears; with `collapsed` alone the sidebar is a rail with no way out of it, which is a legitimate layout and not an accident. |
-| `user` | `ReactNode` |  |  | Who is signed in, at the bottom above the version. A slot, because an avatar needs a session and a sign-out route and the library takes no project infrastructure — the same reason `Nav`'s user menu goes in `actions`. |
-| `version` | `ReactNode` |  |  | Version and branch, at the bottom. |
-
 ### Stat
 
 Source: `src/components/stat/index.tsx`
@@ -1550,7 +1590,7 @@ A large metric: the number in the `stat` scale and its name underneath.
 | `label` | `ReactNode` | yes |  | What is being counted. It goes in mono small caps. |
 | `progress` | `number` |  |  | With `progress`, the metric reads as progress and adds the bar. |
 | `spark` | `ReactNode` |  |  | The number's shape over time, under it. A `ReactNode` and not a data prop: a sparkline needs a charting library, and this component lives in the barrel that four projects install. The one project that draws them passes its own, exactly like `icon`. |
-| `tone` | `"neutral" \| "alert" \| "achievement"` |  | `neutral` | `alert` ONLY when the number is the problem, and `achievement` when it is the opposite — the diplomas issued, the modules finished. The two paint the same sand today and they are still two names: a system that names by meaning cannot make «this is bad» the only way to say «this stands out». See `docs/decisions.md` § 28. |
+| `tone` | `"neutral" \| "alert" \| "achievement"` |  | `neutral` | `alert` ONLY when the number is the problem, and `achievement` when it is the opposite — the diplomas issued, the modules finished. The two paint the same sand today and they are still two names: a system that names by meaning cannot make «this is bad» the only way to say «this stands out». See `docs/decisions/0.7.md` § 28. |
 | `value` | `ReactNode` | yes |  | The number, already formatted. The library imposes no locale. |
 
 ### TalkCard
@@ -1658,9 +1698,9 @@ Tiburoncín's head, with an expression.
 
 ## Social icons
 
-Imported from `@eduardoalvarez/arrecife/social` · or grouped as `social` from the root. 9 exports.
+Imported from `@eduardoalvarez/arrecife/social` · or grouped as `social` from the root. 10 exports.
 
-### GitHub, LinkedIn, X, Instagram, Discord, YouTube, Rss, Email, Newsletter
+### GitHub, LinkedIn, X, Instagram, Discord, YouTube, Rss, Email, Newsletter, Website
 
 Source: `src/social/index.tsx`
 
@@ -1693,6 +1733,11 @@ The newsletter. It plays the same role as `Rss` — a way to follow, not a socia
 
 - No own props: it passes through those of the element or primitive it wraps.
 
+**Website**
+«My other site»: the personal domain in a footer full of social networks.
+
+- No own props: it passes through those of the element or primitive it wraps.
+
 ## Icons
 
 Imported from `@eduardoalvarez/arrecife/icons` · requires `@phosphor-icons/react`. 1 exports.
@@ -1754,9 +1799,9 @@ The layer that ties the controls to a form with validation and messages.
 
 ## Charts
 
-Imported from `@eduardoalvarez/arrecife/chart` · requires `recharts`. 5 exports.
+Imported from `@eduardoalvarez/arrecife/chart` · requires `recharts`. 8 exports.
 
-### ChartContainer, ChartTooltip, ChartLegend, ChartTooltipContent, ChartLegendContent
+### ChartContainer, ChartTooltip, ChartLegend, ChartTooltipContent, ChartLegendContent, AreaChart, BarChart, LineChart
 
 Source: `src/chart/index.tsx`
 
@@ -1803,12 +1848,91 @@ The legend, with the tooltip's same square swatch and the `label` scale.
 | `className` | `string` |  |  |  |
 | `payload` | `readonly ChartPayloadItem[]` |  |  |  |
 
+**AreaChart**
+A series over time, with the fill fading out underneath it.
+
+- Extends: `SeriesChartProps`
+
+| prop | type | req. | default | what it does |
+| --- | --- | --- | --- | --- |
+| `data` | `readonly ChartDatum[]` | yes |  |  |
+| `formatter` | `(value: unknown) => ReactNode` |  |  | Formats the value in the tooltip. The library imposes no locale. |
+| `height` | `number` |  |  | Height in pixels. Recharts needs a concrete one to measure itself. |
+| `label` | `string` | yes |  | What the chart shows, in one sentence. Mandatory, like `Progress`'s `label`: a bar `<svg>` with no accessible name is not «a chart without a label», it is an empty region. |
+| `legend` | `boolean \| 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. |
+| `series` | `readonly ChartSeries[]` | yes |  |  |
+| `stacked` | `boolean \| undefined` |  | `false` | Adds the series up instead of overlaying them. |
+| `summary` | `ReactNode` |  |  | What the chart says, in words. It goes in a visually hidden `figcaption`. |
+| `xKey` | `string` | yes |  | The key on the category axis: the day, the month, the course. |
+| `xTickFormatter` | `(value: unknown) => string` |  |  | Formats the TICK on the category axis. Returns a string, because an axis tick is an SVG `<text>` and not a place a node can go. |
+| `yTickFormatter` | `(value: unknown) => string` |  |  | Formats the tick on the VALUE axis — the currency symbol, the thousands separator, the percent sign. |
+
+**BarChart**
+Bars, upright or lying down.
+
+- Extends: `SeriesChartProps`
+
+| prop | type | req. | default | what it does |
+| --- | --- | --- | --- | --- |
+| `data` | `readonly ChartDatum[]` | yes |  |  |
+| `formatter` | `(value: unknown) => ReactNode` |  |  | Formats the value in the tooltip. The library imposes no locale. |
+| `height` | `number` |  |  | Height in pixels. Recharts needs a concrete one to measure itself. |
+| `label` | `string` | yes |  | What the chart shows, in one sentence. Mandatory, like `Progress`'s `label`: a bar `<svg>` with no accessible name is not «a chart without a label», it is an empty region. |
+| `legend` | `boolean \| 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. |
+| `orientation` | `"horizontal" \| "vertical"` |  | `vertical` | `vertical` grows the bars upwards, which is the default. `horizontal` is a ranking. |
+| `series` | `readonly ChartSeries[]` | yes |  |  |
+| `stacked` | `boolean \| undefined` |  | `false` | Stacks the series instead of putting them side by side. |
+| `summary` | `ReactNode` |  |  | What the chart says, in words. It goes in a visually hidden `figcaption`. |
+| `xKey` | `string` | yes |  | The key on the category axis: the day, the month, the course. |
+| `xTickFormatter` | `(value: unknown) => string` |  |  | Formats the TICK on the category axis. Returns a string, because an axis tick is an SVG `<text>` and not a place a node can go. |
+| `yTickFormatter` | `(value: unknown) => string` |  |  | Formats the tick on the VALUE axis — the currency symbol, the thousands separator, the percent sign. |
+
+**LineChart**
+Lines, for comparing series against each other.
+
+- Extends: `SeriesChartProps`
+
+| prop | type | req. | default | what it does |
+| --- | --- | --- | --- | --- |
+| `data` | `readonly ChartDatum[]` | yes |  |  |
+| `formatter` | `(value: unknown) => ReactNode` |  |  | Formats the value in the tooltip. The library imposes no locale. |
+| `height` | `number` |  |  | Height in pixels. Recharts needs a concrete one to measure itself. |
+| `label` | `string` | yes |  | What the chart shows, in one sentence. Mandatory, like `Progress`'s `label`: a bar `<svg>` with no accessible name is not «a chart without a label», it is an empty region. |
+| `legend` | `boolean \| 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. |
+| `series` | `readonly ChartSeries[]` | yes |  |  |
+| `summary` | `ReactNode` |  |  | What the chart says, in words. It goes in a visually hidden `figcaption`. |
+| `xKey` | `string` | yes |  | The key on the category axis: the day, the month, the course. |
+| `xTickFormatter` | `(value: unknown) => string` |  |  | Formats the TICK on the category axis. Returns a string, because an axis tick is an SVG `<text>` and not a place a node can go. |
+| `yTickFormatter` | `(value: unknown) => string` |  |  | Formats the tick on the VALUE axis — the currency symbol, the thousands separator, the percent sign. |
+
 ## Exports that are not components
 
 The root re-exports everything from `./tokens` and `./brand` for convenience.
 Each one appears exactly once, under the most specific subpath that publishes
 it: if the code does not mount React, that subpath is the one to import.
 
+### `@eduardoalvarez/arrecife/social/data`
+
+| export | type | what it is |
+| --- | --- | --- |
+| `discordGlyph` | `SocialGlyph` | Discord's mark. Brand, so it is a solid silhouette. |
+| `emailGlyph` | `SocialGlyph` | The envelope. Functional, so it is a 1.6 stroke. |
+| `gitHubGlyph` | `SocialGlyph` | GitHub's mark. Brand, so it is a solid silhouette. |
+| `instagramGlyph` | `SocialGlyph` | Instagram's mark. Brand, so it is a solid silhouette. |
+| `linkedInGlyph` | `SocialGlyph` | LinkedIn's mark. Brand, so it is a solid silhouette. |
+| `newsletterGlyph` | `SocialGlyph` |  |
+| `rssGlyph` | `SocialGlyph` | The feed. Functional, so it is a 1.6 stroke — with one filled dot, because a ring that small reads as a smudge. |
+| `SOCIAL_STROKE_WIDTH` | `1.6` | The stroke width of a functional glyph, from the document. |
+| `SOCIAL_VIEW_BOX` | `"0 0 24 24"` | The grid every glyph is drawn on. |
+| `socialGlyphs` | `{ Discord, Email, GitHub, Instagram, LinkedIn, Newsletter, Rss, Website, X, YouTube }` | The whole catalogue, keyed by the name each glyph is exported under in `./social`. |
+| `socialNames` | `readonly ("Discord" \| "Email" \| "GitHub" \| "Instagram" \| "LinkedIn" \| "Newsletter" \| "Rss" \| "Website" \| "X" \| "YouTube")[]` | The ten names, in the order the catalogue declares them. |
+| `socialSvg` | `(name: "Discord" \| "Email" \| "GitHub" \| "Instagram" \| "LinkedIn" \| "Newsletter" \| "Rss" \| "Website" \| "X" \| "YouTube", extra?: Readonly<Record<string, string \| number>>): string` | One glyph as a complete `<svg>` string, for a template that cannot mount React. |
+| `websiteGlyph` | `SocialGlyph` | «My other site», and the reason it is here rather than borrowed. |
+| `xGlyph` | `SocialGlyph` | X's mark. Brand, so it is a solid silhouette. |
+| `youTubeGlyph` | `SocialGlyph` | YouTube's mark. Brand, so it is a solid silhouette. |
+
+Types (3): `SocialGlyph`, `SocialGlyphShape`, `SocialName`.
+
 ### `@eduardoalvarez/arrecife/variants`
 
 | export | type | what it is |
@@ -1909,7 +2033,7 @@ Types (1): `ShikiTheme`.
 | `SERIES_COLORS` | `string[]` | All four, in order, to hand to a `Pie` with `Cell` in one go. |
 | `seriesColor` | `(index: number): string` | The color of series `index`, as a custom property. |
 
-Types (4): `ChartContainerProps`, `ChartLegendContentProps`, `ChartPayloadItem`, `ChartTooltipContentProps`.
+Types (10): `AreaChartProps`, `BarChartProps`, `ChartContainerProps`, `ChartDatum`, `ChartLegendContentProps`, `ChartPayloadItem`, `ChartSeries`, `ChartTooltipContentProps`, `LineChartProps`, `SeriesChartProps`.
 
 ### `@eduardoalvarez/arrecife/form`
 
@@ -1939,7 +2063,7 @@ Types (6): `ArticleData`, `BaseData`, `CourseData`, `DefaultData`, `SatoriNode`,
 | `toast` | `(message: ReactNode, options?: ToastOptions \| undefined): string` | Fires a notice. It returns its id, which is what you keep in order to close it by hand — the «guardando…» case that gets replaced when the request finishes. |
 | `useTheme` | `(): Theme` | The theme set right now, for a project that needs to branch in React — a different logo per mode, an image with no light version. |
 
-Types (62): `AccordionProps`, `AccordionTriggerProps`, `AlertProps`, `ArticleCardProps`, `AudioPlayerMode`, `AudioPlayerProps`, `AuthorCardProps`, `AvatarProps`, `AvatarUploadProps`, `BadgeProps`, `BlockquoteProps`, `BreadcrumbProps`, `ButtonProps`, `CalendarEvent`, `CalendarProps`, `CategoryBadgeProps`, `CheckboxProps`, `CodeBlockProps`, `CodeProps`, `CourseCardProps`, `Crumb`, `DateFieldProps`, `EmptyStateProps`, `EventCalendarProps`, `FooterLinkProps`, `FooterProps`, `HeroProps`, `InputProps`, `LabelProps`, `LinkRowProps`, `MetricBadgeProps`, `NavItemProps`, `NavProps`, `NewsletterFormProps`, `NewsletterState`, `PageHeaderProps`, `PaginationLinkProps`, `PopoverContentProps`, `ProgressProps`, `RadioGroupItemProps`, `RadioGroupProps`, `ScrollingProgressBarProps`, `SeparatorProps`, `SheetContentProps`, `SidebarGroupProps`, `SidebarItemProps`, `SidebarNavProps`, `SkeletonProps`, `SocialLink`, `StatDelta`, `StatProps`, `SwitchProps`, `TableOfContentsProps`, `TabsProps`, `TalkCardProps`, `TextProps`, `TextareaProps`, `ThemeToggleProps`, `ToastOptions`, `ToastVariant`, `ToasterProps`, `TocEntry`.
+Types (60): `AccordionProps`, `AccordionTriggerProps`, `AlertProps`, `ArticleCardProps`, `AudioPlayerMode`, `AudioPlayerProps`, `AuthorCardProps`, `AvatarProps`, `AvatarUploadProps`, `BadgeProps`, `BlockquoteProps`, `BreadcrumbProps`, `ButtonProps`, `CalendarEvent`, `CalendarProps`, `CategoryBadgeProps`, `CheckboxProps`, `CodeBlockProps`, `CodeProps`, `CourseCardProps`, `Crumb`, `DateFieldProps`, `EmptyStateProps`, `EventCalendarProps`, `FooterColumn`, `FooterColumnLink`, `FooterProps`, `HeroProps`, `InputProps`, `LabelProps`, `LinkRowProps`, `MetricBadgeProps`, `NavItemProps`, `NavProps`, `NewsletterFormProps`, `NewsletterState`, `PageHeaderProps`, `PaginationLinkProps`, `PopoverContentProps`, `ProgressProps`, `RadioGroupItemProps`, `RadioGroupProps`, `ScrollingProgressBarProps`, `SeparatorProps`, `SheetContentProps`, `SkeletonProps`, `SocialLink`, `StatDelta`, `StatProps`, `SwitchProps`, `TableOfContentsProps`, `TabsProps`, `TalkCardProps`, `TextProps`, `TextareaProps`, `ThemeToggleProps`, `ToastOptions`, `ToastVariant`, `ToasterProps`, `TocEntry`.
 
 # Where to look if this is not enough
 
@@ -1947,8 +2071,8 @@ Types (62): `AccordionProps`, `AccordionTriggerProps`, `AlertProps`, `ArticleCar
   generated from the types.
 - The repo's `README.md`: the reasoning behind each decision, the contrast
   correction table and the release cycle.
-- `docs/design-system.md` and `docs/brand-manual.md`: the identity documents,
+- `architecture/design-system.md` and `architecture/brand-manual.md`: the identity documents,
   greppable.
-- `docs/decisions.md`: the points where the code and the document did not say the
+- `decisions/`: the points where the code and the document did not say the
   same thing, each with its resolution.
 - `AGENTS.md`: for working inside the library's repo.