@eduardoalvarez/arrecife 0.6.0 → 0.8.0

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 };

package/dist/chart/index.d.ts

@@ -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 };

package/dist/chart/index.js

@@ -1,10 +1,11 @@
 'use client';
-import { Text } from '../chunk-JMOOFZ3B.js';
+import { Text } from '../chunk-TRPBID2W.js';
 import '../chunk-ODBFN44D.js';
-import { cn } from '../chunk-XKYHTOUJ.js';
-import '../chunk-O4TAH7YJ.js';
+import { cn } from '../chunk-FAAGZG7A.js';
+import { radius } from '../chunk-FGFNK72B.js';
 import '../chunk-MLKGABMK.js';
-import { ResponsiveContainer, Tooltip, Legend } from 'recharts';
+import { useId } from 'react';
+import { ResponsiveContainer, Tooltip, Legend, AreaChart as AreaChart$1, CartesianGrid, XAxis, YAxis, Area, BarChart as BarChart$1, Bar, LineChart as LineChart$1, Line } from 'recharts';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function seriesColor(index) {
@@ -101,5 +102,128 @@ function ChartLegendContent({ payload, className }) {
     /* @__PURE__ */ 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 = (series, index) => series.color ?? seriesColor(index);
+var MARGIN = { left: 0, right: 12, top: 8, bottom: 0 };
+var AXIS = { tickLine: false, axisLine: false };
+var legendOf = (series, legend) => legend ?? series.length > 1 ? /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }, "legend") : null;
+var tooltipOf = (formatter) => /* @__PURE__ */ jsx(
+  ChartTooltip,
+  {
+    cursor: false,
+    content: /* @__PURE__ */ jsx(ChartTooltipContent, { formatter: formatter ? (value) => formatter(value) : void 0 })
+  },
+  "tooltip"
+);
+function AreaChart({
+  data,
+  series,
+  xKey,
+  formatter,
+  legend,
+  stacked = false,
+  ...container
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxs(AreaChart$1, { data: rows(data), margin: MARGIN, children: [
+    /* @__PURE__ */ jsx("defs", { children: series.map((s, i) => /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-${s.key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+      /* @__PURE__ */ jsx("stop", { offset: "5%", stopColor: color(s, i), stopOpacity: 0.5 }),
+      /* @__PURE__ */ jsx("stop", { offset: "95%", stopColor: color(s, i), stopOpacity: 0.05 })
+    ] }, s.key)) }),
+    /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }),
+    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40 }),
+    tooltipOf(formatter),
+    legendOf(series, legend),
+    series.map((s, i) => /* @__PURE__ */ jsx(
+      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,
+  xKey,
+  formatter,
+  legend,
+  orientation = "vertical",
+  stacked = false,
+  ...container
+}) {
+  const lying = orientation === "horizontal";
+  return /* @__PURE__ */ jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxs(
+    BarChart$1,
+    {
+      data: rows(data),
+      margin: MARGIN,
+      ...lying ? { layout: "vertical" } : {},
+      children: [
+        /* @__PURE__ */ jsx(CartesianGrid, { vertical: lying, horizontal: !lying }),
+        lying ? [
+          /* @__PURE__ */ jsx(YAxis, { dataKey: xKey, type: "category", ...AXIS, width: 130 }, "category"),
+          /* @__PURE__ */ jsx(XAxis, { type: "number", hide: true }, "value")
+        ] : [
+          /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }, "category"),
+          /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40 }, "value")
+        ],
+        tooltipOf(formatter),
+        legendOf(series, legend),
+        series.map((s, i) => /* @__PURE__ */ jsx(
+          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,
+  xKey,
+  formatter,
+  legend,
+  ...container
+}) {
+  return /* @__PURE__ */ jsx(ChartContainer, { ...container, children: /* @__PURE__ */ jsxs(LineChart$1, { data: rows(data), margin: MARGIN, children: [
+    /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ jsx(XAxis, { dataKey: xKey, ...AXIS, tickMargin: 8 }),
+    /* @__PURE__ */ jsx(YAxis, { ...AXIS, width: 40 }),
+    tooltipOf(formatter),
+    legendOf(series, legend),
+    series.map((s, i) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        dataKey: s.key,
+        name: s.label,
+        type: "natural",
+        stroke: color(s, i),
+        strokeWidth: 2,
+        dot: false,
+        activeDot: { r: 4 },
+        isAnimationActive: false
+      },
+      s.key
+    ))
+  ] }) });
+}
 
-export { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, SERIES_COLORS, seriesColor };
+export { AreaChart, BarChart, ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, LineChart, SERIES_COLORS, seriesColor };

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

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

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

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

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

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

package/dist/{chunk-O4TAH7YJ.js → chunk-FGFNK72B.js}

@@ -144,7 +144,7 @@ var typeScale = {
    * (plankton 5.57:1 over abyss), which is the part that is not negotiable.
    *
    * At 13 the three badge families grew past the size of a small button and
-   * outweighed the title they accompany. See `docs/decisions.md`.
+   * outweighed the title they accompany. See `docs/decisions/`.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
@@ -198,7 +198,7 @@ var control = {
    * baseline; 28 would have been a fifth height that matches nothing.
    *
    * It does not replace `icon`. A page's primary action stays at 42; this is for
-   * a row of a table. See `docs/decisions.md` § 22.
+   * a row of a table. See `docs/decisions/0.6.md` § 22.
    */
   iconSm: 32
 };
@@ -213,6 +213,30 @@ var spacing = {
 var size = {
   /** Navigation bar height. */
   nav: 64,
+  /**
+   * The bar when it shares the screen with a sidebar.
+   *
+   * It is not «a smaller bar because it looks better». At 64 the header of an
+   * app shell competes with the rail beside it for the same corner, and the two
+   * together eat the top of the content area. 56 is what `cursos` had arrived at
+   * on its own, and it is the same reasoning as `control.iconSm`: the one admin
+   * app of the five is denser than the four reading sites. See
+   * `docs/decisions/0.7.md` § 30.
+   */
+  navCompact: 56,
+  /**
+   * The admin sidebar, and the rail it collapses to.
+   *
+   * They are tokens and not the consumer's `w-*` because a collapsible sidebar
+   * has to know BOTH: the layout beside it reserves one of the two, and two
+   * numbers written by hand in two files drift the first time one of them moves.
+   * A sidebar that never collapses is still just a box the layout sizes.
+   *
+   * 56 is the rail: `navCompact`'s height, so a panel's bar and its rail meet in
+   * a square corner instead of a step.
+   */
+  sidebar: 256,
+  sidebarRail: 56,
   /** Reading column width. */
   content: 760,
   /** Maximum page width. */
@@ -245,9 +269,9 @@ var gradient = {
     og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
   },
   light: {
-    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surfaceRaised} 100%)`,
-    section: `linear-gradient(150deg, ${light.surface} 0%, ${light.surfaceRaised} 100%)`,
-    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surfaceRaised} 100%)`
+    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surface} 100%)`,
+    section: `linear-gradient(150deg, ${light.surface} 0%, ${light.background} 100%)`,
+    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`
   }
 };
 var shadow = {