@fairgarden/design 0.1.0-alpha.0

package/components/Chart/Chart.d.ts

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type SequentialStep, type SeriesSlot } from '../../utils/seriesPatterns';
+export type { SeriesSlot, SequentialStep };
+export declare const chart: (props?: ({
+    kind?: "area" | "line" | "column" | "bar" | null | undefined;
+    oneInk?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ChartVariants = VariantProps<typeof chart>;
+/** The chart's structural build. */
+export type ChartKind = NonNullable<ChartVariants['kind']>;
+/** One series: a numeric field of the rows, drawn in one pattern slot. */
+export interface ChartSeries<Key extends string = string> {
+    /** The row field holding this series' values. */
+    key: Key;
+    /** The series name: direct label, legend entry, tooltip and table column head. */
+    name: string;
+    /**
+     * The pattern slot (§8.7): 1 solid, 2 hatch 45°, 3 dot screen, 4 hatch
+     * 0°, 5 crossed hatch, 6 outline ("Other", always the remainder).
+     * Default: the series' position, so the first series is the emphasis
+     * series. A series keeps its slot on screen, in print and in the legend.
+     */
+    slot?: SeriesSlot;
+}
+/** A sequential encoding: each row's step, 1–5, drawn as a stepped fill (§8.7). */
+export interface ChartSteps<Key extends string = string> {
+    /** The row field holding the step, an integer from 1 to 5. */
+    key: Key;
+    /** The step's name, for the tooltip and the data-table column head. */
+    name: string;
+    /** End labels of the stepped legend, e.g. `['0/5', '5/5 available']`. */
+    labels?: readonly [React.ReactNode, React.ReactNode];
+}
+type FieldKey<Row> = Extract<keyof Row, string>;
+/** Props for Chart: `div` props plus the data, the encoding and the figure text. */
+export type ChartProps<Row extends object = Record<string, unknown>> = Omit<React.ComponentPropsWithRef<'div'>, 'children'> & {
+    /**
+     * `bar` (default): horizontal bars, labels left, values at the bar ends,
+     * the form preferred on mobile. `column`: horizontal bars below 1024 px of
+     * the container and in print, columns from 1024 px. `line`: lines told
+     * apart by point markers (● ○ ■ □ ▲), never by dashes. `area`: stacked
+     * areas; several series always stack, because patterns never overlap.
+     */
+    kind?: ChartVariants['kind'];
+    /** The rows, one per category, in display order. */
+    data: readonly Row[];
+    /** The row field naming each category (bar label, column or time tick). */
+    categoryKey: FieldKey<Row>;
+    /** Head of the category column in the data table. Default "Category". */
+    categoryLabel?: string;
+    /**
+     * The series, in the semantic order: at most 4 (6 at the hard limit;
+     * beyond that, small multiples). Extra series are not drawn.
+     */
+    series: readonly ChartSeries<FieldKey<Row>>[];
+    /** The figure caption, which is the chart's title: say what to notice. */
+    caption: React.ReactNode;
+    /** The figure label, e.g. "Fig. 3", on its own line above the caption. */
+    figureLabel?: React.ReactNode;
+    /** Source and method notes, e.g. "Source: Trail counters, 2026." */
+    source?: React.ReactNode;
+    /** Value axis title with its units, e.g. "Visitors (thousands)". */
+    valueLabel?: string;
+    /**
+     * Formats every value: labels, ticks, tooltip and table. Default: grouped
+     * digits (`toLocaleString('en-US')`).
+     */
+    formatValue?: (value: number) => string;
+    /** Stacks bar and column series into one bar per category. Area series always stack. */
+    stacked?: boolean;
+    /**
+     * Single highlight: this series takes slot 1 and every other series
+     * slot 6 (outline), the preferred form for "one against the rest".
+     */
+    highlight?: FieldKey<Row>;
+    /**
+     * A sequential encoding for a single-series bar or column chart: each bar
+     * takes its row's step fill (secondary 4 / 6 / 8 / 11 / 12 on screen), and
+     * its print pattern as a print-only layer.
+     */
+    steps?: ChartSteps<FieldKey<Row>>;
+    /**
+     * Direct labels (`LabelList`): values at bar ends, series names and last
+     * values at line ends, names inside areas. Default `true`.
+     */
+    labels?: boolean;
+    /**
+     * The custom legend above the chart (beside it from 1024 px), with 16 px
+     * swatches showing the fill drawn. Default: shown for grouped or stacked
+     * bars with more than one series, where direct labels cannot name them.
+     */
+    legend?: boolean;
+    /**
+     * Plot height in px on screen. Default: bars from their rows (16 px bars),
+     * other charts 320.
+     */
+    height?: number;
+    /** Plot height in px in print. Default: the screen height. */
+    printHeight?: number;
+    /**
+     * Forces one ink: every slot in --primary12 and sequential cells as
+     * patterns. Not needed for the ground: the scope already draws one ink
+     * everywhere but a light base (`paper`, `white`) or a nested `white`
+     * plate (§8.7). Default `false`.
+     */
+    oneInk?: ChartVariants['oneInk'];
+    /**
+     * Primary Radix scale: even slots, slot 6, edges, axes and labels. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: ChartVariants['primary'];
+    /**
+     * Secondary Radix scale: odd slots and sequential steps. Keep step 11 at
+     * 3:1 on the ground (§2 pairing matrix) [D128]. Never defaulted.
+     */
+    secondary?: ChartVariants['secondary'];
+    /** The data-table trigger label. Default "Show Data Table". */
+    tableLabel?: React.ReactNode;
+    /** The trigger label while the table is open. Default "Hide Data Table". */
+    tableOpenLabel?: React.ReactNode;
+};
+/**
+ * A chart figure (§8.7) built with Recharts [D167]. Categories are told
+ * apart by the `pattern-series` slots, on screen as in print: odd slots in
+ * --secondary11, even in --primary12, slot 1 solid, slot 6 outline, every
+ * shape edged in --border-size-1 --primary12 [D125]. Values are labelled
+ * directly; the tooltip and the keyboard accessibility layer repeat them;
+ * the "Show Data Table" Collapsible holds them all. The chart follows its
+ * container's width on screen and prints at a fixed 174 mm, animation off.
+ */
+export declare function Chart<Row extends object = Record<string, unknown>>(props: ChartProps<Row>): React.JSX.Element;
+//# sourceMappingURL=Chart.d.ts.map

package/components/Chart/Chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../src/components/Chart/Chart.tsx"],"names":[],"mappings":"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"}

package/components/Chart/Chart.js

@@ -0,0 +1,453 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, LabelList, Line, LineChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, useYAxisScale, } from 'recharts';
+import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from '../Collapsible';
+import { Figure, FigureCaption, FigureMedia } from '../Figure';
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeaderCell, TableRow, } from '../Table';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import { GROUND, HALO, INK_PRIMARY, PatternDefs, SEQUENTIAL_FILLS, safeId, slotFill, slotInk, stepPatternFill, } from '../../utils/seriesPatterns';
+import { useMediaQuery } from '../../utils/useMediaQuery';
+import styles from './chart.module.css';
+/*
+ * Chart (§8.7) [D167, D125]: a Recharts SVG chart in a figure, with a
+ * custom legend, a caption and the "Show Data Table" Collapsible.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: chart.module.css; CVA function `chart`.
+ * - Axes: `kind` → bar | column | line | area (the structural build);
+ *   `oneInk` → `oneInk` (forces one ink: every slot in --primary12,
+ *   sequential cells as their patterns on screen); `primary`, `secondary` →
+ *   scales module classes. `secondary` carries the odd slots and the
+ *   sequential steps, `primary` the even slots, slot 6, every edge, axis and
+ *   label.
+ * - Inks by ground, with no prop: odd slots take --role-series-odd and the
+ *   sequential cells follow the --ds-series-fill / --ds-series-pattern
+ *   switches, which roles.css resolves per scope: two inks and flat steps
+ *   on a light base ground or a nested `white` plate, one ink and patterns
+ *   everywhere else, the pastels included (§8.7) [D125].
+ * - Compound variants: none.
+ * - Defaults: kind bar, oneInk false; color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: the Recharts surface's `:focus-visible` → the ring; the active
+ *   category (hover or arrow keys, the accessibility layer) → the tooltip,
+ *   the cursor, and a --border-size-2 edge on the active bars, markers one
+ *   size up; nothing fades. The table trigger per §10.13.
+ * - Parts: base, body (the FigureMedia), legend, legendItem, swatch,
+ *   stepLegend, chartArea, axisTitle, plot, plotBars, plotColumns, print,
+ *   tooltip, dataTable (the Collapsible holding the §8.2 Table). The
+ *   caption is the Figure's FigureCaption (§8.5): label, caption, source.
+ * - Scope: none. Container: `base`, named `chart` because it holds the
+ *   Figure's own container. Baseline: horizontal bars,
+ *   legend above; from 1024 px a column chart draws columns and the legend
+ *   moves to the side (§5.10.2). Print: a fixed 174 mm chart.
+ *
+ * Every fill, stroke and label is a role-variable string passed to Recharts
+ * (never a Radix variable or literal), fills are opaque (fillOpacity 1), and
+ * nothing is a gradient, shadow or opacity animation [D16, D21, D91].
+ */
+export const chart = cva(styles.base, {
+    variants: {
+        // Only a column chart restructures by container width; the other builds
+        // differ inside the SVG, so their classes carry no rules.
+        kind: {
+            bar: '',
+            column: styles.column,
+            line: '',
+            area: '',
+        },
+        oneInk: {
+            true: styles.oneInk,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'bar',
+        oneInk: false,
+    },
+});
+/*
+ * Token mirrors. SVG attributes and Recharts' layout take numbers, so these
+ * values mirror their tokens (like TOOLTIP_DELAY_MS mirrors its token).
+ */
+/** Bar thickness, --size-px-3: at least --ds-space-12 (12 px) at every size [I7]. */
+const BAR_THICKNESS = 16;
+/** Gap between bars in one category: at least 0.3 × the thickness. */
+const BAR_GAP = 6;
+/** Gap between categories, --size-px-3. */
+const CATEGORY_GAP = 16;
+/** --border-size-1. */
+const STROKE_1 = 1;
+/** --ds-stroke-1-5. */
+const STROKE_1_5 = 1.5;
+/** --border-size-2. */
+const STROKE_2 = 2;
+/** Point marker radius: an 8 px marker. */
+const MARKER_RADIUS = 4;
+/** A column never grows wider than --size-px-8. */
+const MAX_COLUMN = 48;
+/** --ds-duration-disclosure: growth by length only, under --motionOK. */
+const DURATION = 200;
+/** --ds-print-live-width, 174 mm at 96 px per inch. */
+const PRINT_WIDTH = 658;
+/** Plot height of column, line and area charts. */
+const DEFAULT_HEIGHT = 320;
+/** Space the value axis takes when it shows under horizontal bars. */
+const AXIS_HEIGHT = 28;
+/** Advance of one `type-data` character: IBM Plex Mono is 0.6 em at 14 px. */
+const DATA_CHAR = 8.4;
+/** Average advance of one `type-caption` character at 14 px. */
+const TEXT_CHAR = 7.5;
+/** The thinnest area band that takes a direct label. */
+const MIN_LABEL_BAND = 18;
+/** Open Props' --motionOK. */
+const MOTION_QUERY = '(prefers-reduced-motion: no-preference)';
+/** Pattern part classes, for this module's print and forced-colors rules. */
+const patternClassNames = {
+    mark: styles.patternMark,
+    dot: styles.patternDot,
+    ground: styles.patternGround,
+};
+const defaultFormat = (value) => value.toLocaleString('en-US');
+function valueOf(row, key) {
+    const value = row?.[key];
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+}
+function stepOf(row, key) {
+    const value = Math.round(valueOf(row, key) ?? 1);
+    return Math.min(5, Math.max(1, value));
+}
+function textOf(value) {
+    return value == null ? '' : String(value);
+}
+/* ------------------------------------------------------------------ */
+/* SVG parts rendered inside Recharts                                  */
+/* ------------------------------------------------------------------ */
+/** A relation gridline: `line-dotted-fine` in --role-rule, drawn as true dots. */
+function gridLine(props) {
+    return (React.createElement("line", { key: props.key ?? undefined, x1: props.x1, y1: props.y1, x2: props.x2, y2: props.y2, fill: "none", stroke: "var(--role-rule)", className: styles.gridLine }));
+}
+/** Point markers by slot: ● ○ ■ □ ▲ △ (filled odd slots, open even slots). */
+const markerShapes = {
+    1: 'circle',
+    2: 'circle',
+    3: 'square',
+    4: 'square',
+    5: 'triangle',
+    6: 'triangle',
+};
+/** A line's point marker in its slot's shape; one size up and heavier when active. */
+function MarkerGlyph({ cx, cy, slot, ink, active = false }) {
+    if (cx == null || cy == null || !Number.isFinite(cx) || !Number.isFinite(cy))
+        return null;
+    const r = active ? MARKER_RADIUS + 1 : MARKER_RADIUS;
+    const filled = slot % 2 === 1 && slot !== 6;
+    const fill = filled ? ink : GROUND;
+    const stroke = filled ? INK_PRIMARY : ink;
+    const strokeWidth = active ? STROKE_2 : filled ? STROKE_1 : STROKE_1_5;
+    const shape = markerShapes[slot];
+    if (shape === 'circle') {
+        return React.createElement("circle", { cx: cx, cy: cy, r: r, fill: fill, stroke: stroke, strokeWidth: strokeWidth });
+    }
+    if (shape === 'square') {
+        return (React.createElement("rect", { x: cx - r, y: cy - r, width: r * 2, height: r * 2, fill: fill, stroke: stroke, strokeWidth: strokeWidth }));
+    }
+    const h = r * 1.15;
+    return (React.createElement("path", { d: `M${cx} ${cy - h}L${cx + h} ${cy + h * 0.8}L${cx - h} ${cy + h * 0.8}Z`, fill: fill, stroke: stroke, strokeWidth: strokeWidth, strokeLinejoin: "round" }));
+}
+/**
+ * A sequential bar: its flat screen fill and, as a second layer, its print
+ * pattern. The print block hides the fill and shows the pattern [D126, D167].
+ */
+function StepShape({ x = 0, y = 0, width = 0, height = 0, payload, prefix, stepKey }) {
+    const step = stepOf(payload, stepKey);
+    const box = {
+        x: width < 0 ? x + width : x,
+        y: height < 0 ? y + height : y,
+        width: Math.abs(width),
+        height: Math.abs(height),
+    };
+    return (React.createElement("g", null,
+        React.createElement("rect", { ...box, className: styles.stepFill, fill: SEQUENTIAL_FILLS[step], fillOpacity: 1, stroke: INK_PRIMARY, strokeWidth: STROKE_1 }),
+        React.createElement("rect", { ...box, className: styles.stepPattern, fill: stepPatternFill(prefix, step), fillOpacity: 1, stroke: INK_PRIMARY, strokeWidth: STROKE_1 })));
+}
+/** A line's direct label at its end point: the series name and the last value. */
+function EndLabel({ viewBox, index, value, last, name, format }) {
+    const box = viewBox;
+    if (index !== last || box?.x == null || box.y == null)
+        return null;
+    return (React.createElement("text", { x: box.x + MARKER_RADIUS + 6, y: box.y, dy: "0.35em", textAnchor: "start", fill: INK_PRIMARY, className: styles.endLabel },
+        React.createElement("tspan", { className: styles.endName }, name),
+        typeof value === 'number' ? (React.createElement("tspan", { className: styles.endValue, dx: "6" }, format(value))) : null));
+}
+/** An area's direct label: its name inside its band at the last point, on a --role-halo knockout. */
+function AreaLabel({ viewBox, index, last, low, high, name }) {
+    const yScale = useYAxisScale();
+    const box = viewBox;
+    if (index !== last || !yScale || box?.x == null)
+        return null;
+    const top = yScale(high);
+    const bottom = yScale(low);
+    if (top == null || bottom == null || Math.abs(bottom - top) < MIN_LABEL_BAND)
+        return null;
+    return (React.createElement("text", { x: box.x - 8, y: (top + bottom) / 2, dy: "0.35em", textAnchor: "end", fill: INK_PRIMARY, stroke: HALO, className: styles.areaLabel }, name));
+}
+/** A 16 px swatch showing the fill actually drawn, edged in --border-size-1 --primary12. */
+function Swatch({ slot, ink, prefix, oneInk, line }) {
+    return (React.createElement("svg", { className: styles.swatch, viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false" }, line ? (React.createElement(React.Fragment, null,
+        React.createElement("line", { x1: 0, y1: 8, x2: 16, y2: 8, stroke: ink, strokeWidth: STROKE_2 }),
+        React.createElement(MarkerGlyph, { cx: 8, cy: 8, slot: slot, ink: ink }))) : (React.createElement("rect", { x: 0.5, y: 0.5, width: 15, height: 15, fill: slotFill(prefix, slot, oneInk), fillOpacity: 1, stroke: INK_PRIMARY, strokeWidth: STROKE_1 }))));
+}
+/**
+ * The tooltip panel: an anchored overlay with a --border-size-2 --primary12
+ * edge, the Tooltip roles (--primary1 face, --primary12 text) and values in
+ * `type-data`; no shadow. It repeats the row's values in series order, the
+ * same values the table holds, and never adds one.
+ */
+function ChartTooltip({ active, payload, series, categoryKey, steps, prefix, oneInk, line, format, }) {
+    const row = payload?.[0]?.payload;
+    if (!active || !row)
+        return null;
+    return (React.createElement("div", { className: styles.tooltip },
+        React.createElement("p", { className: styles.tooltipLabel }, textOf(row[categoryKey])),
+        React.createElement("ul", { className: styles.tooltipList },
+            series.map((entry) => {
+                const value = valueOf(row, entry.key);
+                return (React.createElement("li", { key: entry.key, className: styles.tooltipItem },
+                    React.createElement(Swatch, { slot: entry.slot, ink: entry.ink, prefix: prefix, oneInk: oneInk, line: line }),
+                    React.createElement("span", { className: styles.tooltipName }, entry.name),
+                    React.createElement("span", { className: styles.tooltipValue }, value == null ? '—' : format(value))));
+            }),
+            steps ? (React.createElement("li", { className: styles.tooltipItem },
+                React.createElement("span", { "aria-hidden": "true" }),
+                React.createElement("span", { className: styles.tooltipName }, steps.name),
+                React.createElement("span", { className: styles.tooltipValue },
+                    stepOf(row, steps.key),
+                    "/5"))) : null)));
+}
+function Plot(props) {
+    const { variant, prefix, print, width, height, rows, categoryKey, series, stacked, steps, labels, oneInk, animate, format, title, } = props;
+    const last = rows.length - 1;
+    const labelFormatter = (value) => (typeof value === 'number' ? format(value) : textOf(value));
+    const longestValue = Math.max(1, ...rows.flatMap((row) => series.map((entry) => {
+        const value = stacked
+            ? series.reduce((sum, item) => sum + (valueOf(row, item.key) ?? 0), 0)
+            : valueOf(row, entry.key);
+        return value == null ? 0 : format(value).length;
+    })));
+    const longestName = Math.max(1, ...series.map((entry) => entry.name.length));
+    const shared = {
+        id: prefix,
+        data: rows,
+        accessibilityLayer: !print,
+        title,
+        width,
+        height: width == null ? undefined : height,
+        tabIndex: print ? -1 : undefined,
+        style: print
+            ? { width: '100%', height: 'auto', aspectRatio: `${width} / ${height}` }
+            : undefined,
+    };
+    // Lines are told apart by markers, so they need no pattern slots.
+    const defs = (React.createElement(PatternDefs, { prefix: prefix, oneInk: oneInk, slots: variant === 'line' ? [] : series.map((entry) => entry.slot), steps: steps != null, classNames: patternClassNames }));
+    const tooltip = (cursor) => print ? null : (React.createElement(Tooltip, { content: React.createElement(ChartTooltip, { series: series, categoryKey: categoryKey, steps: steps, prefix: prefix, oneInk: oneInk, line: variant === 'line', format: format }), cursor: cursor === 'band'
+            ? { className: styles.cursorBand, fill: 'none', stroke: INK_PRIMARY, strokeWidth: STROKE_1 }
+            : { className: styles.cursorLine, stroke: INK_PRIMARY }, isAnimationActive: animate, animationDuration: DURATION, animationEasing: "ease-out" }));
+    const animation = {
+        isAnimationActive: animate,
+        animationDuration: DURATION,
+        animationEasing: 'ease-out',
+    };
+    const categoryTick = { className: styles.categoryTick, fill: INK_PRIMARY };
+    // Value ticks sit on their rules (Crab Fit): the numeral just above its gridline.
+    const valueTick = { className: styles.valueTick, fill: INK_PRIMARY, dy: -6 };
+    if (variant === 'bars' || variant === 'columns') {
+        const horizontal = variant === 'bars';
+        const onFill = stacked;
+        const labelPosition = onFill ? 'center' : horizontal ? 'right' : 'top';
+        const endSpace = labels && !onFill ? Math.ceil(longestValue * DATA_CHAR) + 12 : 12;
+        return (React.createElement(BarChart, { ...shared, layout: horizontal ? 'vertical' : 'horizontal', barGap: BAR_GAP, barCategoryGap: horizontal ? CATEGORY_GAP : '30%', margin: horizontal
+                ? { top: 4, right: endSpace, bottom: 4, left: 0 }
+                : { top: labels && !onFill ? 24 : 12, right: 8, bottom: 0, left: 0 } },
+            defs,
+            React.createElement(CartesianGrid, { horizontal: horizontal ? false : gridLine, vertical: horizontal && !labels ? gridLine : false }),
+            horizontal ? (React.createElement(React.Fragment, null,
+                React.createElement(XAxis, { type: "number", hide: labels, axisLine: false, tickLine: false, tick: { ...valueTick, dy: 4 }, tickFormatter: format, height: AXIS_HEIGHT }),
+                React.createElement(YAxis, { type: "category", dataKey: categoryKey, width: "auto", axisLine: false, tickLine: false, tickMargin: 8, interval: 0, tick: categoryTick }),
+                React.createElement(ReferenceLine, { x: 0, stroke: INK_PRIMARY, strokeWidth: STROKE_1, className: styles.zeroLine, ifOverflow: "discard" }))) : (React.createElement(React.Fragment, null,
+                React.createElement(XAxis, { type: "category", dataKey: categoryKey, axisLine: false, tickLine: false, tickMargin: 8, tick: categoryTick }),
+                React.createElement(YAxis, { type: "number", width: "auto", axisLine: false, tickLine: false, tickMargin: 8, tick: valueTick, tickFormatter: format }),
+                React.createElement(ReferenceLine, { y: 0, stroke: INK_PRIMARY, strokeWidth: STROKE_1, className: styles.zeroLine, ifOverflow: "discard" }))),
+            tooltip('band'),
+            series.map((entry) => (React.createElement(Bar, { key: entry.key, dataKey: entry.key, name: entry.name, fill: slotFill(prefix, entry.slot, oneInk), fillOpacity: 1, stroke: INK_PRIMARY, strokeWidth: STROKE_1, radius: 0, stackId: stacked ? 'stack' : undefined, barSize: horizontal ? BAR_THICKNESS : undefined, maxBarSize: horizontal ? undefined : MAX_COLUMN, shape: steps ? React.createElement(StepShape, { prefix: prefix, stepKey: steps.key }) : undefined, activeBar: steps || print ? false : { strokeWidth: STROKE_2 }, ...animation }, labels ? (React.createElement(LabelList, { dataKey: entry.key, position: labelPosition, offset: 8, formatter: labelFormatter, fill: INK_PRIMARY, stroke: onFill ? HALO : undefined, className: onFill ? styles.labelOnFill : styles.valueLabel })) : null)))));
+    }
+    const categoryAxis = (React.createElement(XAxis, { type: "category", dataKey: categoryKey, axisLine: false, tickLine: false, tickMargin: 8, tick: categoryTick }));
+    const valueAxis = (React.createElement(YAxis, { type: "number", width: "auto", axisLine: false, tickLine: false, tickMargin: 8, tick: valueTick, tickFormatter: format }));
+    const zeroLine = (React.createElement(ReferenceLine, { y: 0, stroke: INK_PRIMARY, strokeWidth: STROKE_1, className: styles.zeroLine, ifOverflow: "discard" }));
+    if (variant === 'line') {
+        const endSpace = labels
+            ? Math.ceil(longestName * TEXT_CHAR + longestValue * DATA_CHAR) + MARKER_RADIUS + 20
+            : 12;
+        return (React.createElement(LineChart, { ...shared, margin: { top: 12, right: endSpace, bottom: 0, left: 0 } },
+            defs,
+            React.createElement(CartesianGrid, { horizontal: gridLine, vertical: false }),
+            categoryAxis,
+            valueAxis,
+            zeroLine,
+            tooltip('line'),
+            series.map((entry) => (React.createElement(Line, { key: entry.key, type: "linear", dataKey: entry.key, name: entry.name, stroke: entry.ink, strokeWidth: STROKE_2, fill: "none", dot: React.createElement(MarkerGlyph, { slot: entry.slot, ink: entry.ink }), activeDot: print ? false : React.createElement(MarkerGlyph, { slot: entry.slot, ink: entry.ink, active: true }), ...animation }, labels ? (React.createElement(LabelList, { content: React.createElement(EndLabel, { last: last, name: entry.name, format: format }) })) : null)))));
+    }
+    // Stacked areas: each band's low and high at the last point, for its label.
+    const lastRow = rows[last];
+    let running = 0;
+    const bands = series.map((entry) => {
+        const low = running;
+        running += valueOf(lastRow, entry.key) ?? 0;
+        return { low, high: running };
+    });
+    return (React.createElement(AreaChart, { ...shared, margin: { top: 12, right: 12, bottom: 0, left: 0 } },
+        defs,
+        React.createElement(CartesianGrid, { horizontal: gridLine, vertical: false }),
+        categoryAxis,
+        valueAxis,
+        tooltip('line'),
+        series.map((entry, index) => (React.createElement(Area, { key: entry.key, type: "linear", dataKey: entry.key, name: entry.name, stackId: "stack", fill: slotFill(prefix, entry.slot, oneInk), fillOpacity: 1, stroke: INK_PRIMARY, strokeWidth: STROKE_1, dot: false, activeDot: print ? false : { r: MARKER_RADIUS, fill: HALO, stroke: INK_PRIMARY, strokeWidth: STROKE_2 }, ...animation }, labels ? (React.createElement(LabelList, { content: React.createElement(AreaLabel, { last: last, low: bands[index].low, high: bands[index].high, name: entry.name }) })) : null))),
+        zeroLine));
+}
+/**
+ * The custom legend (Recharts' own is never used): 16 px swatches showing
+ * the fill drawn, in the chart's inks, and for a sequential encoding a
+ * framed stepped bar with end labels. Its patterns are defined in its own
+ * defs, so it never depends on a chart copy that is hidden.
+ */
+function Legend({ series, prefix, oneInk, line, showSeries, steps }) {
+    return (React.createElement("div", { className: styles.legend },
+        React.createElement("svg", { className: styles.defs, "aria-hidden": "true", focusable: "false" },
+            React.createElement(PatternDefs, { prefix: prefix, oneInk: oneInk, slots: series.map((entry) => entry.slot), steps: steps != null, classNames: patternClassNames })),
+        showSeries ? (React.createElement("ul", { className: styles.legendList }, series.map((entry) => (React.createElement("li", { key: entry.key, className: styles.legendItem },
+            React.createElement(Swatch, { slot: entry.slot, ink: entry.ink, prefix: prefix, oneInk: oneInk, line: line }),
+            React.createElement("span", { className: styles.legendLabel }, entry.name)))))) : null,
+        steps ? (React.createElement("div", { className: styles.stepLegend },
+            steps.labels ? React.createElement("span", { className: styles.stepLabel }, steps.labels[0]) : null,
+            React.createElement("svg", { className: styles.stepBar, viewBox: "0 0 81 17", "aria-hidden": "true", focusable: "false" }, [1, 2, 3, 4, 5].map((step) => {
+                const cell = { x: (step - 1) * 16 + 0.5, y: 0.5, width: 16, height: 16 };
+                return (React.createElement("g", { key: step },
+                    React.createElement("rect", { ...cell, className: styles.stepFill, fill: SEQUENTIAL_FILLS[step], stroke: INK_PRIMARY, strokeWidth: STROKE_1 }),
+                    React.createElement("rect", { ...cell, className: styles.stepPattern, fill: stepPatternFill(prefix, step), stroke: INK_PRIMARY, strokeWidth: STROKE_1 })));
+            })),
+            steps.labels ? React.createElement("span", { className: styles.stepLabel }, steps.labels[1]) : null)) : null));
+}
+/**
+ * The data-table alternative, a §8.2 Table with the chart's series names
+ * and units: right-aligned tabular numerals, "—" for an empty cell, the
+ * five-row cadence past 10 rows. Up to four columns it fits at every width;
+ * wider, it scrolls with the category column pinned.
+ */
+function DataTable({ caption, valueLabel, categoryLabel, rows, categoryKey, series, steps, format, }) {
+    const columns = 1 + series.length + (steps ? 1 : 0);
+    return (React.createElement(Table, { strategy: columns <= 4 ? 'fit' : 'scroll' },
+        React.createElement(TableCaption, { note: valueLabel }, caption),
+        React.createElement(TableHead, null,
+            React.createElement(TableRow, null,
+                React.createElement(TableHeaderCell, null, categoryLabel),
+                series.map((entry) => (React.createElement(TableHeaderCell, { key: entry.key, numeric: true }, entry.name))),
+                steps ? React.createElement(TableHeaderCell, { numeric: true }, steps.name) : null)),
+        React.createElement(TableBody, null, rows.map((row, index) => (React.createElement(TableRow, { key: `${textOf(row[categoryKey])}-${index}` },
+            React.createElement(TableHeaderCell, null, textOf(row[categoryKey])),
+            series.map((entry) => {
+                const value = valueOf(row, entry.key);
+                return (React.createElement(TableCell, { key: entry.key, numeric: true }, value == null ? '—' : format(value)));
+            }),
+            steps ? (React.createElement(TableCell, { numeric: true }, valueOf(row, steps.key) == null ? '—' : `${stepOf(row, steps.key)}/5`)) : null))))));
+}
+/* ------------------------------------------------------------------ */
+/* Chart                                                               */
+/* ------------------------------------------------------------------ */
+/**
+ * A chart figure (§8.7) built with Recharts [D167]. Categories are told
+ * apart by the `pattern-series` slots, on screen as in print: odd slots in
+ * --secondary11, even in --primary12, slot 1 solid, slot 6 outline, every
+ * shape edged in --border-size-1 --primary12 [D125]. Values are labelled
+ * directly; the tooltip and the keyboard accessibility layer repeat them;
+ * the "Show Data Table" Collapsible holds them all. The chart follows its
+ * container's width on screen and prints at a fixed 174 mm, animation off.
+ */
+export function Chart(props) {
+    const { kind, data, categoryKey, categoryLabel = 'Category', series, caption, figureLabel, source, valueLabel, formatValue, stacked = false, highlight, steps, labels = true, legend, height, printHeight, oneInk, primary, secondary, tableLabel = 'Show Data Table', tableOpenLabel = 'Hide Data Table', className, ...rest } = props;
+    const scope = useScopeAttributes();
+    const motionOK = useMediaQuery(MOTION_QUERY);
+    const id = safeId(React.useId(), 'chart');
+    const resolvedKind = kind ?? 'bar';
+    const ink = oneInk === true;
+    const format = formatValue ?? defaultFormat;
+    const rows = data;
+    const isBar = resolvedKind === 'bar' || resolvedKind === 'column';
+    const stepEncoding = isBar && steps ? { key: steps.key, name: steps.name } : undefined;
+    const stack = resolvedKind === 'area' || (isBar && stacked && !stepEncoding);
+    const resolved = React.useMemo(() => series.slice(0, stepEncoding ? 1 : 6).map((entry, index) => {
+        const slot = highlight
+            ? entry.key === highlight
+                ? 1
+                : 6
+            : (entry.slot ?? Math.min(index + 1, 6));
+        return { key: entry.key, name: entry.name, slot, ink: slotInk(slot, ink) };
+    }), [series, highlight, ink, stepEncoding]);
+    const showSeriesLegend = legend ?? (isBar && resolved.length > 1);
+    const showLegend = showSeriesLegend || stepEncoding != null;
+    // Values that live only in the tooltip (every line point but the last,
+    // area values, unlabelled charts) print as the data table beside the chart.
+    const printTable = !labels || resolvedKind === 'line' || resolvedKind === 'area';
+    const groupSize = stack || stepEncoding ? 1 : Math.max(1, resolved.length);
+    const barsHeight = rows.length * (groupSize * BAR_THICKNESS + (groupSize - 1) * BAR_GAP + CATEGORY_GAP) +
+        8 +
+        (labels ? 0 : AXIS_HEIGHT);
+    const screenHeight = height ?? (resolvedKind === 'bar' ? barsHeight : DEFAULT_HEIGHT);
+    const columnsHeight = height ?? DEFAULT_HEIGHT;
+    const plotProps = {
+        rows,
+        categoryKey,
+        series: resolved,
+        stacked: stack,
+        steps: stepEncoding,
+        labels,
+        oneInk: ink,
+        format,
+        title: typeof caption === 'string' ? caption : undefined,
+    };
+    const screenVariant = isBar ? 'bars' : resolvedKind;
+    // Print resolves against the printed column (174 mm, under 1024 px), so a
+    // column chart prints as horizontal bars.
+    const printVariant = screenVariant;
+    const printPlotHeight = printHeight ?? (isBar ? (resolvedKind === 'bar' ? screenHeight : barsHeight) : screenHeight);
+    return (React.createElement("div", { ...rest, ...scope, className: chart({
+            kind,
+            oneInk,
+            primary,
+            secondary,
+            className: cx(printTable && styles.printTable, className) || undefined,
+        }) },
+        React.createElement(Figure, { kind: "technical" },
+            React.createElement(FigureMedia, { className: cx(styles.body, showLegend && styles.withLegend) },
+                showLegend ? (React.createElement(Legend, { series: resolved, prefix: `${id}-legend`, oneInk: ink, line: resolvedKind === 'line', showSeries: showSeriesLegend, steps: stepEncoding ? steps : undefined })) : null,
+                React.createElement("div", { className: styles.chartArea },
+                    valueLabel ? React.createElement("p", { className: styles.axisTitle }, valueLabel) : null,
+                    React.createElement("div", { className: styles.plot },
+                        React.createElement("div", { className: styles.plotBars },
+                            React.createElement(ResponsiveContainer, { width: "100%", height: isBar ? barsHeight : screenHeight },
+                                React.createElement(Plot, { ...plotProps, variant: screenVariant, prefix: `${id}-screen`, print: false, height: isBar ? barsHeight : screenHeight, animate: motionOK }))),
+                        resolvedKind === 'column' ? (React.createElement("div", { className: styles.plotColumns },
+                            React.createElement(ResponsiveContainer, { width: "100%", height: columnsHeight },
+                                React.createElement(Plot, { ...plotProps, variant: "columns", prefix: `${id}-columns`, print: false, height: columnsHeight, animate: motionOK })))) : null),
+                    React.createElement("div", { className: styles.print, "aria-hidden": "true", inert: true },
+                        React.createElement(Plot, { ...plotProps, variant: printVariant, prefix: `${id}-print`, print: true, width: PRINT_WIDTH, height: printPlotHeight, animate: false })))),
+            React.createElement(FigureCaption, { label: figureLabel, credit: source }, caption)),
+        React.createElement(Collapsible, { className: styles.dataTable },
+            React.createElement(CollapsibleTrigger, { openLabel: tableOpenLabel }, tableLabel),
+            React.createElement(CollapsiblePanel, null,
+                React.createElement(DataTable, { caption: caption, valueLabel: valueLabel, categoryLabel: categoryLabel, rows: rows, categoryKey: categoryKey, series: resolved, steps: stepEncoding ? steps : undefined, format: format })))));
+}
+//# sourceMappingURL=Chart.js.map