@misoto22/folio 0.0.0 → 0.16.0

package/dist/charts/BulletChart/BulletChart.js

@@ -0,0 +1,197 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChartFigure } from "../lib/figure.js";
+import {} from "../lib/empty.js";
+import { defaultTick } from "../lib/format.js";
+import { clampedFraction } from "../lib/scale.js";
+const BAND_WEIGHT = { heaviest: 1, lightest: 0.3 };
+const BAR_SHARE = 0.34;
+function position(value, [low, high]) {
+  return clampedFraction(value, low, high);
+}
+function overflows(value, [low, high]) {
+  return value !== void 0 && Number.isFinite(value) && (value > high || value < low);
+}
+function pct(share) {
+  return `${Number((share * 100).toFixed(4))}%`;
+}
+function bands(ranges, [low, high], formatValue) {
+  const set = [...new Set(ranges.filter(Number.isFinite))].sort((a, b) => a - b);
+  const bounds = set.filter((bound) => bound > low && bound < high);
+  const edges = [low, ...bounds, high];
+  const count = edges.length - 1;
+  const { heaviest, lightest } = BAND_WEIGHT;
+  const list = Array.from({ length: count }, (_, index) => ({
+    from: edges[index],
+    to: edges[index + 1],
+    // Heaviest at the low end, lightening as the scale rises — so the measure
+    // bar, which is solid, stands out most where performance is best.
+    weight: count === 1 ? lightest : heaviest - index / (count - 1) * (heaviest - lightest)
+  }));
+  return { list, label: set.map(formatValue).join(", ") };
+}
+function resolve(data, domain, ranges, formatValue) {
+  return data.map((measure) => {
+    const own = measure.ranges ?? ranges ?? [];
+    const high = Math.max(measure.value, measure.target ?? Number.NEGATIVE_INFINITY, ...own);
+    const scale = measure.domain ?? domain ?? [Math.min(0, measure.value), high || 1];
+    const built = bands(own, scale, formatValue);
+    return { ...measure, domain: scale, bands: built.list, rangeLabel: built.label };
+  });
+}
+function BulletChart({
+  title,
+  showTitle,
+  description,
+  data,
+  ranges,
+  domain,
+  formatValue = defaultTick,
+  showScale = false,
+  className,
+  hideDataTable = false,
+  empty
+}) {
+  const measures = resolve(data, domain, ranges, formatValue);
+  return /* @__PURE__ */ jsx(
+    ChartFigure,
+    {
+      title,
+      showTitle,
+      description,
+      className,
+      table: hideDataTable ? false : {
+        rows: measures,
+        rowKey: "name",
+        columns: [
+          { key: "value", label: "Value" },
+          { key: "target", label: "Target" },
+          { key: "rangeLabel", label: "Range bounds" }
+        ]
+      },
+      isEmpty: measures.length === 0,
+      empty,
+      children: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-4", children: measures.map((measure) => /* @__PURE__ */ jsx(
+        BulletRow,
+        {
+          measure,
+          formatValue,
+          showScale
+        },
+        measure.name
+      )) })
+    }
+  );
+}
+function BulletRow({
+  measure,
+  formatValue,
+  showScale
+}) {
+  const scale = measure.domain;
+  const barShare = position(measure.value, scale);
+  const targetShare = measure.target === void 0 ? null : position(measure.target, scale);
+  const runsOver = overflows(measure.value, scale) || overflows(measure.target, scale);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("span", { className: "truncate text-sm text-(--ink)", children: [
+        measure.name,
+        measure.detail && /* @__PURE__ */ jsx("span", { className: "ms-2 mono-meta text-(--ink-3-aa)", children: measure.detail })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "shrink-0 font-mono text-xs tabular-nums text-(--ink)", children: [
+        formatValue(measure.value),
+        measure.target !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-(--ink-3-aa)", children: [
+          " / ",
+          formatValue(measure.target)
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-hidden": true,
+        "data-slot": "bullet-track",
+        className: "relative h-6 w-full overflow-hidden rounded-(--radius-sm)",
+        children: [
+          measure.bands.map((band) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "bullet-band",
+              className: "absolute inset-y-0 block",
+              style: {
+                insetInlineStart: pct(position(band.from, scale)),
+                inlineSize: pct(position(band.to, scale) - position(band.from, scale)),
+                // The one translucent-mark pair in the token layer, because it is
+                // the only one that holds a different number on each ground.
+                backgroundColor: `color-mix(in srgb, var(--series-1) calc(var(--chart-fill) * ${band.weight} * 100%), transparent)`
+              }
+            },
+            `${band.from}-${band.to}`
+          )),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "bullet-bar",
+              className: "absolute block bg-(--series-1)",
+              style: {
+                insetInlineStart: 0,
+                insetBlockStart: pct((1 - BAR_SHARE) / 2),
+                blockSize: pct(BAR_SHARE),
+                inlineSize: pct(barShare)
+              }
+            }
+          ),
+          targetShare !== null && // A rule ACROSS the bar rather than a second bar beside it: the two
+          // are different kinds of number, and the reader has to be able to
+          // tell at a glance which one was achieved and which was asked for.
+          //
+          // The paper halo is what makes that true where the rule lands ON the
+          // bar. Both are drawn in --ink, so a target inside the achieved range
+          // — which is every measure that is doing well — was an ink rule on an
+          // ink bar and simply not there.
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "bullet-target",
+              className: "absolute inset-y-1 block w-0.5 bg-(--ink) shadow-[0_0_0_1px_var(--paper)]",
+              style: {
+                insetInlineStart: pct(targetShare),
+                // Pulled back by its own width in PROPORTION to where it sits:
+                // flush at the start at 0, centred in the middle, flush at the end
+                // at 1. A fixed half-width pull put a target of zero half outside
+                // the track, where `overflow-hidden` took it — so "Open incidents,
+                // target 0" drew no target at all, on the one measure whose whole
+                // point is the distance from it.
+                marginInlineStart: `${-2 * targetShare}px`
+              }
+            }
+          ),
+          runsOver && // Clamped and silent, a number past the end of the scale fills the
+          // track exactly as a number AT the end of it does — so the one thing
+          // the row cannot say is the one thing the reader most needs to know.
+          // The notch is what breaks that tie; the printed figure above still
+          // carries the real number.
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "bullet-overflow",
+              className: "absolute inset-y-0 end-0 block w-1.5 bg-(--chart-surface)",
+              style: {
+                clipPath: "polygon(100% 0, 0 50%, 100% 100%)"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    showScale && /* @__PURE__ */ jsxs("div", { className: "flex justify-between mono-meta text-(--chart-axis)", children: [
+      /* @__PURE__ */ jsx("span", { children: formatValue(scale[0]) }),
+      /* @__PURE__ */ jsx("span", { children: formatValue(scale[1]) })
+    ] })
+  ] });
+}
+var BulletChart_default = BulletChart;
+export {
+  BulletChart,
+  BulletChart_default as default
+};
+//# sourceMappingURL=BulletChart.js.map

package/dist/charts/BulletChart/BulletChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/BulletChart/BulletChart.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { ChartFigure } from '../lib/figure'\nimport { type ChartEmptyProps } from '../lib/empty'\nimport { defaultTick } from '../lib/format'\nimport { clampedFraction } from '../lib/scale'\n\n/**\n * The heaviest and lightest a qualitative band may be, as multiples of\n * `--chart-fill`.\n *\n * Few's rule is no more than five bands in one hue, arranged so the low end of\n * the scale is the heaviest. The measure bar is solid ink on top of them, so\n * the ceiling has to stay well under it: bands that compete with the bar stop\n * being the ground it is read against.\n */\nconst BAND_WEIGHT = { heaviest: 1, lightest: 0.3 } as const\n\n/** How tall the measure bar is, as a share of the track. Few's is a third. */\nconst BAR_SHARE = 0.34\n\n/** One measure, its target, and the bands it is read against. */\nexport interface BulletMeasure {\n  /** What is being measured. Doubles as the row's key, so it must be unique. */\n  name: string\n  /** The number the row is about. */\n  value: number\n  /**\n   * The number the measure is being judged against — last year, the budget,\n   * the SLO. Drawn as a rule across the bar, not as a second bar.\n   */\n  target?: number\n  /**\n   * The qualitative bands, as ascending UPPER bounds. `[60, 80]` on a 0–100\n   * scale draws three bands: 0–60, 60–80, 80–100.\n   *\n   * Few's limit is five, and it is a real one: past that the shades stop being\n   * separable and the bands become a gradient nobody can read a boundary off.\n   */\n  ranges?: number[]\n  /** The scale, as `[min, max]`. Falls back to the chart's, then to the data. */\n  domain?: [number, number]\n  /** A second line under the name — the unit, the window, the owner. */\n  detail?: ReactNode\n}\n\n/** A measure with its scale and bands resolved. */\ninterface ResolvedMeasure extends BulletMeasure {\n  domain: [number, number]\n  bands: { from: number; to: number; weight: number }[]\n  /** Written out for the hidden table, which cannot print an array. */\n  rangeLabel: string\n}\n\n/** Where a value sits on the scale, 0 to 1, clamped to it. */\nfunction position(value: number, [low, high]: [number, number]): number {\n  return clampedFraction(value, low, high)\n}\n\n/** Whether a number is off the end of the scale it is being drawn against. */\nfunction overflows(value: number | undefined, [low, high]: [number, number]): boolean {\n  return value !== undefined && Number.isFinite(value) && (value > high || value < low)\n}\n\n/**\n * A share of the track, as a CSS percentage.\n *\n * Rounded, because binary floating point turns `0.8 - 0.5` into\n * `30.000000000000004%` — a number no layout engine cares about and every\n * reader of the DOM does. Four places is finer than a subpixel on any track\n * this chart will be given.\n */\nfunction pct(share: number): string {\n  return `${Number((share * 100).toFixed(4))}%`\n}\n\n/** The bands, from the ascending upper bounds, each with its own weight. */\nfunction bands(\n  ranges: number[],\n  [low, high]: [number, number],\n  formatValue: (value: number) => string,\n): { list: ResolvedMeasure['bands']; label: string } {\n  const set = [...new Set(ranges.filter(Number.isFinite))].sort((a, b) => a - b)\n  // A bound off the end of the scale has no boundary to draw: it would be a\n  // band with no width, or one that starts past the track. It is dropped from\n  // the picture and kept in the LABEL, because a caller who pinned `[0, 50]`\n  // and passed `[60, 80]` has made a mistake, and one flat band that says\n  // nothing is how it stays invisible.\n  const bounds = set.filter((bound) => bound > low && bound < high)\n\n  const edges = [low, ...bounds, high]\n  const count = edges.length - 1\n  const { heaviest, lightest } = BAND_WEIGHT\n\n  const list = Array.from({ length: count }, (_, index) => ({\n    from: edges[index]!,\n    to: edges[index + 1]!,\n    // Heaviest at the low end, lightening as the scale rises — so the measure\n    // bar, which is solid, stands out most where performance is best.\n    weight: count === 1 ? lightest : heaviest - (index / (count - 1)) * (heaviest - lightest),\n  }))\n\n  // The label names the bounds the caller SET, not the band tops: the last\n  // band's top is the end of the scale, which is not a threshold anybody chose\n  // — and not the drawable subset either, or a bound the scale cannot hold\n  // would go missing from the reading as well as from the picture.\n  return { list, label: set.map(formatValue).join(', ') }\n}\n\n/** Every measure, with its scale and bands worked out. */\nfunction resolve(\n  data: BulletMeasure[],\n  domain: [number, number] | undefined,\n  ranges: number[] | undefined,\n  formatValue: (value: number) => string,\n): ResolvedMeasure[] {\n  return data.map((measure) => {\n    const own = measure.ranges ?? ranges ?? []\n    const high = Math.max(measure.value, measure.target ?? Number.NEGATIVE_INFINITY, ...own)\n    // Anchored at zero unless told otherwise: the measure is drawn as a BAR,\n    // and a bar read off a scale that does not start at zero overstates every\n    // difference on it.\n    const scale: [number, number] = measure.domain ?? domain ?? [Math.min(0, measure.value), high || 1]\n    const built = bands(own, scale, formatValue)\n\n    return { ...measure, domain: scale, bands: built.list, rangeLabel: built.label }\n  })\n}\n\nexport interface BulletChartProps {\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the rows instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /** One entry per measure. Order is the reading order; it is not sorted. */\n  data: BulletMeasure[]\n  /**\n   * The bands every measure falls back to, as ascending upper bounds.\n   *\n   * Shared bands only mean something when the measures share a scale. Where\n   * they do not — a latency beside a conversion rate — put `ranges` and\n   * `domain` on each measure instead.\n   */\n  ranges?: number[]\n  /** The scale every measure falls back to, as `[min, max]`. */\n  domain?: [number, number]\n  /** Formats every number the chart prints. */\n  formatValue?: (value: number) => string\n  /** Prints the scale's two ends under each track. */\n  showScale?: boolean\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Drops the hidden table view. Only correct when the page prints the data itself. */\n  hideDataTable?: boolean\n  /** What the chart shows when it has nothing to draw. */\n  empty?: ChartEmptyProps\n}\n\n/**\n * A measure, its target, and the bands that say whether the number is any good\n * — one dense row per thing being tracked.\n *\n * Stephen Few designed this to replace the dashboard gauge, and the argument\n * has held: a speedometer spends a whole card saying one number badly, where a\n * bullet graph says the same number, its target, and the qualitative context\n * around it in the height of a line of text. Ten of them stack into a status\n * page a reader can scan in one pass.\n *\n * What it will not do is show change over time. A bullet graph is one instant,\n * and `target` is the only comparison it carries; when the question is\n * \"how did we get here\" it wants a `<LineChart>`, and when several measures\n * have to be compared against each OTHER rather than each against its own\n * target, a `<BarList>` ranks them and this does not.\n *\n * **The bands are the part to be careful with.** They are a judgement — someone\n * decided that 80 is \"good\" — drawn in the same ink as the measurement, and a\n * reader has no way to tell an agreed threshold from a number somebody typed.\n * They also compress: a value near the top of the scale sits in the same band\n * whether it cleared the boundary by a point or by thirty. The band answers\n * \"is this acceptable\", never \"by how much\".\n *\n * No rendering engine, deliberately — this is the one chart in the set with\n * nothing to compute. Each row is a single linear scale with no axis, no ticks\n * and no shared plot area, so it is laid out as HTML: the bands and the bar are\n * inline-axis offsets, which means the whole chart mirrors correctly in a\n * right-to-left document, where an SVG drawn in user space would not.\n *\n * @example\n * <BulletChart\n *   title=\"Service levels against target\"\n *   data={[{ name: 'Uptime', value: 99.4, target: 99.9, ranges: [98, 99.5] }]}\n *   domain={[95, 100]}\n * />\n */\nexport function BulletChart({\n  title,\n  showTitle,\n  description,\n  data,\n  ranges,\n  domain,\n  formatValue = defaultTick,\n  showScale = false,\n  className,\n  hideDataTable = false,\n  empty,\n}: BulletChartProps) {\n  const measures = resolve(data, domain, ranges, formatValue)\n\n  return (\n    <ChartFigure\n      title={title}\n      showTitle={showTitle}\n      description={description}\n      className={className}\n      table={\n        hideDataTable\n          ? false\n          : {\n              rows: measures as unknown as Record<string, unknown>[],\n              rowKey: 'name',\n              columns: [\n                { key: 'value', label: 'Value' },\n                { key: 'target', label: 'Target' },\n                { key: 'rangeLabel', label: 'Range bounds' },\n              ],\n            }\n      }\n      isEmpty={measures.length === 0}\n      empty={empty}\n    >\n      <div className=\"flex w-full flex-col gap-4\">\n        {measures.map((measure) => (\n          <BulletRow\n            key={measure.name}\n            measure={measure}\n            formatValue={formatValue}\n            showScale={showScale}\n          />\n        ))}\n      </div>\n    </ChartFigure>\n  )\n}\n\nfunction BulletRow({\n  measure,\n  formatValue,\n  showScale,\n}: {\n  measure: ResolvedMeasure\n  formatValue: (value: number) => string\n  showScale: boolean\n}) {\n  const scale = measure.domain\n  const barShare = position(measure.value, scale)\n  const targetShare = measure.target === undefined ? null : position(measure.target, scale)\n  const runsOver = overflows(measure.value, scale) || overflows(measure.target, scale)\n\n  return (\n    <div className=\"flex w-full flex-col gap-1.5\">\n      <div className=\"flex items-baseline justify-between gap-3\">\n        <span className=\"truncate text-sm text-(--ink)\">\n          {measure.name}\n          {measure.detail && (\n            <span className=\"ms-2 mono-meta text-(--ink-3-aa)\">{measure.detail}</span>\n          )}\n        </span>\n        <span className=\"shrink-0 font-mono text-xs tabular-nums text-(--ink)\">\n          {formatValue(measure.value)}\n          {measure.target !== undefined && (\n            <span className=\"text-(--ink-3-aa)\"> / {formatValue(measure.target)}</span>\n          )}\n        </span>\n      </div>\n\n      {/* The graphic repeats what the line above and the hidden table already\n          say, so it is out of the accessibility tree entirely rather than\n          announced a third time as a stack of empty boxes. */}\n      <div\n        aria-hidden\n        data-slot=\"bullet-track\"\n        className=\"relative h-6 w-full overflow-hidden rounded-(--radius-sm)\"\n      >\n        {measure.bands.map((band) => (\n          <span\n            key={`${band.from}-${band.to}`}\n            data-slot=\"bullet-band\"\n            className=\"absolute inset-y-0 block\"\n            style={{\n              insetInlineStart: pct(position(band.from, scale)),\n              inlineSize: pct(position(band.to, scale) - position(band.from, scale)),\n              // The one translucent-mark pair in the token layer, because it is\n              // the only one that holds a different number on each ground.\n              backgroundColor: `color-mix(in srgb, var(--series-1) calc(var(--chart-fill) * ${band.weight} * 100%), transparent)`,\n            }}\n          />\n        ))}\n\n        {/* Solid, and a third of the track's height. The measure is the one\n            thing here that is a measurement rather than a judgement, so it is\n            the only mark drawn at full weight. */}\n        <span\n          data-slot=\"bullet-bar\"\n          className=\"absolute block bg-(--series-1)\"\n          style={{\n            insetInlineStart: 0,\n            insetBlockStart: pct((1 - BAR_SHARE) / 2),\n            blockSize: pct(BAR_SHARE),\n            inlineSize: pct(barShare),\n          }}\n        />\n\n        {targetShare !== null && (\n          // A rule ACROSS the bar rather than a second bar beside it: the two\n          // are different kinds of number, and the reader has to be able to\n          // tell at a glance which one was achieved and which was asked for.\n          //\n          // The paper halo is what makes that true where the rule lands ON the\n          // bar. Both are drawn in --ink, so a target inside the achieved range\n          // — which is every measure that is doing well — was an ink rule on an\n          // ink bar and simply not there.\n          <span\n            data-slot=\"bullet-target\"\n            className=\"absolute inset-y-1 block w-0.5 bg-(--ink) shadow-[0_0_0_1px_var(--paper)]\"\n            style={{\n              insetInlineStart: pct(targetShare),\n              // Pulled back by its own width in PROPORTION to where it sits:\n              // flush at the start at 0, centred in the middle, flush at the end\n              // at 1. A fixed half-width pull put a target of zero half outside\n              // the track, where `overflow-hidden` took it — so \"Open incidents,\n              // target 0\" drew no target at all, on the one measure whose whole\n              // point is the distance from it.\n              marginInlineStart: `${-2 * targetShare}px`,\n            }}\n          />\n        )}\n\n        {runsOver && (\n          // Clamped and silent, a number past the end of the scale fills the\n          // track exactly as a number AT the end of it does — so the one thing\n          // the row cannot say is the one thing the reader most needs to know.\n          // The notch is what breaks that tie; the printed figure above still\n          // carries the real number.\n          <span\n            data-slot=\"bullet-overflow\"\n            className=\"absolute inset-y-0 end-0 block w-1.5 bg-(--chart-surface)\"\n            style={{\n              clipPath: 'polygon(100% 0, 0 50%, 100% 100%)',\n            }}\n          />\n        )}\n      </div>\n\n      {showScale && (\n        <div className=\"flex justify-between mono-meta text-(--chart-axis)\">\n          <span>{formatValue(scale[0])}</span>\n          <span>{formatValue(scale[1])}</span>\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport default BulletChart\n"],"mappings":"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","names":[]}

package/dist/charts/CalendarHeatmap/CalendarHeatmap.d.ts

@@ -0,0 +1,106 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ChartEmptyProps } from '../lib/empty.js';
+
+interface CalendarHeatmapValue {
+    /** The day, as `YYYY-MM-DD`. */
+    date: string;
+    /** The count. `null` is drawn as an explicit gap, not as a zero. */
+    value: number | null;
+}
+interface CalendarHeatmapProps {
+    /** What the calendar shows. Required, and it names the table. */
+    title: string;
+    /** Prints the title above the grid instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    /**
+     * One entry per day that has a reading. Order does not matter; the grid is
+     * built from the dates.
+     *
+     * A day inside the window with no entry is drawn as a gap rather than as a
+     * zero, which is the distinction a calendar most often loses: "nothing
+     * happened" and "nothing was recorded" are different readings, and a page
+     * that draws them alike invites the reader to explain an outage that was a
+     * gap in collection.
+     */
+    values: CalendarHeatmapValue[];
+    /**
+     * The first day the grid covers, as `YYYY-MM-DD`. Defaults to the earliest
+     * date in `values`.
+     *
+     * Give both ends whenever the window is a fact about the QUESTION rather than
+     * about the data — "the last year", "this quarter". Derived from the values,
+     * a quiet January simply does not exist, and the grid silently becomes a
+     * different window than the one beside it.
+     */
+    from?: string;
+    /** The last day the grid covers, as `YYYY-MM-DD`. Defaults to the latest date in `values`. */
+    to?: string;
+    /**
+     * What each cell announces, given its reading and its date.
+     *
+     * The default is the date and the number. Reach for this to name the unit —
+     * "3 commits on 2026-01-05" — because the row and column headers a cell is
+     * announced with are a weekday and a month over a block of five weeks, and
+     * neither says which day it was.
+     */
+    describe?: (value: number, date: string) => string;
+    /**
+     * The seven row headers, Sunday first, whatever `weekStartsOn` is.
+     *
+     * Sunday first in the ARRAY and not on the grid: the labels are a
+     * translation and the first column is a calendar convention, and tying the
+     * two together would make a Monday-first German calendar a different array
+     * from a Monday-first English one.
+     */
+    weekdayLabels?: string[];
+    /** The twelve column headers, January first. */
+    monthLabels?: string[];
+    /** Which weekday the grid's first row is. `0` is Sunday, `1` Monday. */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * The domain, as `[min, max]`. Derived from the readings when omitted.
+     *
+     * Pin it whenever two calendars are meant to be compared: a quiet year and a
+     * busy one drawn on their own domains look identical, and the comparison the
+     * reader came for is not merely lost but inverted.
+     */
+    domain?: [number, number];
+    className?: string;
+    /** What the grid shows when there is no window to draw. */
+    empty?: ChartEmptyProps;
+}
+/**
+ * A year of daily readings, as a week-by-week grid.
+ *
+ * `Heatmap` draws a grid of named rows and columns and knows nothing about
+ * dates; this is the arrangement everybody writes on top of it and nobody
+ * writes the same way twice — a column per week, a row per weekday, a month
+ * name on the first column it touches, and the days either side of the window
+ * left as gaps rather than as zeroes.
+ *
+ * The grid is built from the DATES rather than from the order of the array, so
+ * a gap in the data is a gap on the calendar. That is the failure this exists
+ * to prevent: given a bare list of counts, a missing Tuesday shifts every
+ * reading after it by one cell, and the result is a plausible picture of a year
+ * that did not happen.
+ *
+ * Every date is arithmetic on UTC midnights. A local-time calendar drawn in two
+ * timezones is two different calendars, and the disagreement is exactly one day
+ * wide — small enough to survive review and large enough to move a reading into
+ * the wrong week.
+ *
+ * @example
+ * <CalendarHeatmap
+ *   title="Commits per day"
+ *   values={days}
+ *   from="2026-01-01"
+ *   to="2026-12-31"
+ *   describe={(value, date) => `${value} commits on ${date}`}
+ * />
+ */
+declare function CalendarHeatmap({ title, showTitle, description, values, from, to, describe, weekdayLabels, monthLabels, weekStartsOn, domain, className, empty, }: CalendarHeatmapProps): react.JSX.Element;
+
+export { CalendarHeatmap, type CalendarHeatmapProps, type CalendarHeatmapValue, CalendarHeatmap as default };

package/dist/charts/CalendarHeatmap/CalendarHeatmap.js

@@ -0,0 +1,103 @@
+import { jsx } from "react/jsx-runtime";
+import { Heatmap } from "../Heatmap/Heatmap.js";
+const DAY_MS = 864e5;
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+const ZERO_WIDTH_SPACE = "\u200B";
+function parse(date) {
+  const [year = 0, month = 1, day = 1] = date.split("-").map(Number);
+  return Date.UTC(year, month - 1, day);
+}
+function iso(time) {
+  return new Date(time).toISOString().slice(0, 10);
+}
+function CalendarHeatmap({
+  title,
+  showTitle = false,
+  description,
+  values,
+  from,
+  to,
+  describe,
+  weekdayLabels = WEEKDAYS,
+  monthLabels = MONTHS,
+  weekStartsOn = 0,
+  domain,
+  className,
+  empty
+}) {
+  const readings = new Map(values.map((entry) => [entry.date, entry.value]));
+  const dates = values.map((entry) => parse(entry.date));
+  const first = from !== void 0 ? parse(from) : Math.min(...dates);
+  const last = to !== void 0 ? parse(to) : Math.max(...dates);
+  const drawable = Number.isFinite(first) && Number.isFinite(last) && first <= last;
+  const lead = drawable ? (new Date(first).getUTCDay() - weekStartsOn + 7) % 7 : 0;
+  const start = first - lead * DAY_MS;
+  const weeks = drawable ? Math.floor((last - start) / DAY_MS / 7) + 1 : 0;
+  const rows = Array.from(
+    { length: 7 },
+    (_, offset) => weekdayLabels[(weekStartsOn + offset) % 7] ?? ""
+  );
+  const columns = Array.from({ length: weeks }, (_, week) => week).reduce(
+    (acc, week) => {
+      const month = new Date(start + week * 7 * DAY_MS).getUTCMonth();
+      const opens = month !== acc.lastMonth;
+      return {
+        labels: [...acc.labels, `${opens ? monthLabels[month] ?? "" : ""}${ZERO_WIDTH_SPACE.repeat(week)}`],
+        lastMonth: opens ? month : acc.lastMonth
+      };
+    },
+    { labels: [], lastMonth: -1 }
+  ).labels;
+  const cells = [];
+  const dateOf = /* @__PURE__ */ new Map();
+  for (let week = 0; week < weeks; week++) {
+    for (let offset = 0; offset < 7; offset++) {
+      const time = start + (week * 7 + offset) * DAY_MS;
+      if (time < first || time > last) continue;
+      const row = rows[offset] ?? "";
+      const column = columns[week] ?? "";
+      const day = iso(time);
+      dateOf.set(`${row}\0${column}`, day);
+      cells.push({ row, column, value: readings.get(day) ?? null });
+    }
+  }
+  const formatValue = (value, cell) => {
+    const date = dateOf.get(`${cell.row}\0${cell.column}`) ?? "";
+    return describe ? describe(value, date) : `${date}: ${value.toLocaleString()}`;
+  };
+  return /* @__PURE__ */ jsx(
+    Heatmap,
+    {
+      title,
+      showTitle,
+      description,
+      columns,
+      rows,
+      cells,
+      domain,
+      formatValue,
+      className,
+      empty
+    }
+  );
+}
+var CalendarHeatmap_default = CalendarHeatmap;
+export {
+  CalendarHeatmap,
+  CalendarHeatmap_default as default
+};
+//# sourceMappingURL=CalendarHeatmap.js.map

package/dist/charts/CalendarHeatmap/CalendarHeatmap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/CalendarHeatmap/CalendarHeatmap.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { Heatmap, type HeatmapCell } from '../Heatmap/Heatmap'\nimport type { ChartEmptyProps } from '../lib/empty'\n\nconst DAY_MS = 86_400_000\n\n/** Sunday first, which is what `weekStartsOn` rotates. */\nconst WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n\nconst MONTHS = [\n  'Jan',\n  'Feb',\n  'Mar',\n  'Apr',\n  'May',\n  'Jun',\n  'Jul',\n  'Aug',\n  'Sep',\n  'Oct',\n  'Nov',\n  'Dec',\n]\n\n/**\n * Invisible, and never repeated: what keeps two blank column headers apart.\n *\n * `Heatmap` places a cell by looking its row and column up by name, so two\n * columns with the same label are one column as far as the grid is concerned —\n * and eleven of the twelve headers on a year are deliberately blank.\n */\nconst ZERO_WIDTH_SPACE = '​'\n\n/** A calendar date as `YYYY-MM-DD`, at UTC midnight. */\nfunction parse(date: string): number {\n  const [year = 0, month = 1, day = 1] = date.split('-').map(Number)\n  return Date.UTC(year, month - 1, day)\n}\n\n/**\n * `YYYY-MM-DD` for a UTC instant.\n *\n * Every date in here is arithmetic on UTC midnights and nothing reads a local\n * component, which is the whole of the timezone story: a naked `new Date('…')`\n * parses in the runner's own zone, so the same grid drawn in Sydney and in\n * Berlin would disagree by a day on either side of local midnight.\n */\nfunction iso(time: number): string {\n  return new Date(time).toISOString().slice(0, 10)\n}\n\nexport interface CalendarHeatmapValue {\n  /** The day, as `YYYY-MM-DD`. */\n  date: string\n  /** The count. `null` is drawn as an explicit gap, not as a zero. */\n  value: number | null\n}\n\nexport interface CalendarHeatmapProps {\n  /** What the calendar shows. Required, and it names the table. */\n  title: string\n  /** Prints the title above the grid instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /**\n   * One entry per day that has a reading. Order does not matter; the grid is\n   * built from the dates.\n   *\n   * A day inside the window with no entry is drawn as a gap rather than as a\n   * zero, which is the distinction a calendar most often loses: \"nothing\n   * happened\" and \"nothing was recorded\" are different readings, and a page\n   * that draws them alike invites the reader to explain an outage that was a\n   * gap in collection.\n   */\n  values: CalendarHeatmapValue[]\n  /**\n   * The first day the grid covers, as `YYYY-MM-DD`. Defaults to the earliest\n   * date in `values`.\n   *\n   * Give both ends whenever the window is a fact about the QUESTION rather than\n   * about the data — \"the last year\", \"this quarter\". Derived from the values,\n   * a quiet January simply does not exist, and the grid silently becomes a\n   * different window than the one beside it.\n   */\n  from?: string\n  /** The last day the grid covers, as `YYYY-MM-DD`. Defaults to the latest date in `values`. */\n  to?: string\n  /**\n   * What each cell announces, given its reading and its date.\n   *\n   * The default is the date and the number. Reach for this to name the unit —\n   * \"3 commits on 2026-01-05\" — because the row and column headers a cell is\n   * announced with are a weekday and a month over a block of five weeks, and\n   * neither says which day it was.\n   */\n  describe?: (value: number, date: string) => string\n  /**\n   * The seven row headers, Sunday first, whatever `weekStartsOn` is.\n   *\n   * Sunday first in the ARRAY and not on the grid: the labels are a\n   * translation and the first column is a calendar convention, and tying the\n   * two together would make a Monday-first German calendar a different array\n   * from a Monday-first English one.\n   */\n  weekdayLabels?: string[]\n  /** The twelve column headers, January first. */\n  monthLabels?: string[]\n  /** Which weekday the grid's first row is. `0` is Sunday, `1` Monday. */\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  /**\n   * The domain, as `[min, max]`. Derived from the readings when omitted.\n   *\n   * Pin it whenever two calendars are meant to be compared: a quiet year and a\n   * busy one drawn on their own domains look identical, and the comparison the\n   * reader came for is not merely lost but inverted.\n   */\n  domain?: [number, number]\n  className?: string\n  /** What the grid shows when there is no window to draw. */\n  empty?: ChartEmptyProps\n}\n\n/**\n * A year of daily readings, as a week-by-week grid.\n *\n * `Heatmap` draws a grid of named rows and columns and knows nothing about\n * dates; this is the arrangement everybody writes on top of it and nobody\n * writes the same way twice — a column per week, a row per weekday, a month\n * name on the first column it touches, and the days either side of the window\n * left as gaps rather than as zeroes.\n *\n * The grid is built from the DATES rather than from the order of the array, so\n * a gap in the data is a gap on the calendar. That is the failure this exists\n * to prevent: given a bare list of counts, a missing Tuesday shifts every\n * reading after it by one cell, and the result is a plausible picture of a year\n * that did not happen.\n *\n * Every date is arithmetic on UTC midnights. A local-time calendar drawn in two\n * timezones is two different calendars, and the disagreement is exactly one day\n * wide — small enough to survive review and large enough to move a reading into\n * the wrong week.\n *\n * @example\n * <CalendarHeatmap\n *   title=\"Commits per day\"\n *   values={days}\n *   from=\"2026-01-01\"\n *   to=\"2026-12-31\"\n *   describe={(value, date) => `${value} commits on ${date}`}\n * />\n */\nexport function CalendarHeatmap({\n  title,\n  showTitle = false,\n  description,\n  values,\n  from,\n  to,\n  describe,\n  weekdayLabels = WEEKDAYS,\n  monthLabels = MONTHS,\n  weekStartsOn = 0,\n  domain,\n  className,\n  empty,\n}: CalendarHeatmapProps) {\n  const readings = new Map(values.map((entry) => [entry.date, entry.value]))\n  const dates = values.map((entry) => parse(entry.date))\n  const first = from !== undefined ? parse(from) : Math.min(...dates)\n  const last = to !== undefined ? parse(to) : Math.max(...dates)\n\n  // `values: []` with no window given leaves the bounds at ±Infinity, which is\n  // the empty state rather than a grid with an infinite number of weeks in it.\n  const drawable = Number.isFinite(first) && Number.isFinite(last) && first <= last\n\n  // Back to the week the window starts in, and forward to the end of the week\n  // it ends in: a calendar's first column is a week, not a Monday-shaped\n  // fragment of one, and the days outside the window are drawn as gaps.\n  const lead = drawable ? (new Date(first).getUTCDay() - weekStartsOn + 7) % 7 : 0\n  const start = first - lead * DAY_MS\n  // Integer arithmetic, not a rounded division: every bound is a UTC midnight,\n  // so the span is a whole number of days and the last day's own week is the\n  // one `+ 1` adds. A `Math.ceil` here drops the final column on any window\n  // that happens to be an exact multiple of seven.\n  const weeks = drawable ? Math.floor((last - start) / DAY_MS / 7) + 1 : 0\n\n  const rows = Array.from(\n    { length: 7 },\n    (_, offset) => weekdayLabels[(weekStartsOn + offset) % 7] ?? '',\n  )\n\n  // A month name on the first column it touches, blank elsewhere — the sparse\n  // header a year of activity reads by. Threaded through `reduce` rather than a\n  // mutated loop variable, so nothing outlives the render that builds it, and\n  // every label carries a run of zero-width spaces sized to its own position:\n  // invisible on screen, unique to the lookup.\n  const columns = Array.from({ length: weeks }, (_, week) => week).reduce<{\n    labels: string[]\n    lastMonth: number\n  }>(\n    (acc, week) => {\n      const month = new Date(start + week * 7 * DAY_MS).getUTCMonth()\n      const opens = month !== acc.lastMonth\n      return {\n        labels: [...acc.labels, `${opens ? (monthLabels[month] ?? '') : ''}${ZERO_WIDTH_SPACE.repeat(week)}`],\n        lastMonth: opens ? month : acc.lastMonth,\n      }\n    },\n    { labels: [], lastMonth: -1 },\n  ).labels\n\n  const cells: HeatmapCell[] = []\n  const dateOf = new Map<string, string>()\n  for (let week = 0; week < weeks; week++) {\n    for (let offset = 0; offset < 7; offset++) {\n      const time = start + (week * 7 + offset) * DAY_MS\n      if (time < first || time > last) continue\n      const row = rows[offset] ?? ''\n      const column = columns[week] ?? ''\n      const day = iso(time)\n      dateOf.set(`${row}\u0000${column}`, day)\n      cells.push({ row, column, value: readings.get(day) ?? null })\n    }\n  }\n\n  // Keyed by the CELL rather than by the value: two days with the same count\n  // are two different readings, and a formatter that only sees the number can\n  // only ever describe one of them.\n  const formatValue = (value: number, cell: HeatmapCell): string => {\n    const date = dateOf.get(`${cell.row}\u0000${cell.column}`) ?? ''\n    return describe ? describe(value, date) : `${date}: ${value.toLocaleString()}`\n  }\n\n  return (\n    <Heatmap\n      title={title}\n      showTitle={showTitle}\n      description={description}\n      columns={columns}\n      rows={rows}\n      cells={cells}\n      domain={domain}\n      formatValue={formatValue}\n      className={className}\n      empty={empty}\n    />\n  )\n}\n\nexport default CalendarHeatmap\n"],"mappings":"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","names":[]}

package/dist/charts/ComposedChart/ComposedChart.d.ts

@@ -0,0 +1,178 @@
+import { ChartCurveType, AreaStrokeVariant, ChartTooltipSlotProps, ChartLegendSlotProps } from '../AreaChart/AreaChart.js';
+import { BarVariant } from '../BarChart/BarChart.js';
+import * as react from 'react';
+import { ComponentProps, ReactNode, FC } from 'react';
+import { XAxis, YAxis, Bar, ComposedChart as ComposedChart$1, Line, CartesianGrid } from 'recharts';
+import { ChartConfig } from '../lib/chart.js';
+import { ChartEmptyProps } from '../lib/empty.js';
+import { ValuesProps } from '../lib/values.js';
+import { ChartBackgroundVariant } from '../lib/background.js';
+import { ChartDotVariant } from '../lib/dot.js';
+import { BrushProps } from '../lib/brush.js';
+import { ToolbarProps } from '../lib/toolbar.js';
+import { ChartRevealType } from '../lib/paint.js';
+import { ReferenceLine, ReferenceBand, Annotation } from '../lib/annotations.js';
+import '../lib/sonify-control.js';
+import '../lib/sonify.js';
+import '../lib/legend.js';
+import '../lib/tooltip.js';
+import 'recharts/types/component/DefaultTooltipContent';
+import '../lib/zoom.js';
+import '../lib/figure.js';
+
+/**
+ * The axis props, with `label` narrowed to a string.
+ *
+ * Recharts' own `label` accepts a render function and a config object, neither
+ * of which a call site should be reaching for to name an axis — and both of
+ * which would let a consumer opt out of the system's own axis type styling
+ * without noticing.
+ */
+type ChartXAxisProps = Omit<ComponentProps<typeof XAxis>, 'label'> & {
+    /** What this axis measures. Say the unit here or in the series label, once. */
+    label?: string;
+};
+type ChartYAxisProps = Omit<ComponentProps<typeof YAxis>, 'label'> & {
+    /** What this axis measures. Say the unit here or in the series label, once. */
+    label?: string;
+};
+
+type ValidateKeys<TData, TConfig> = {
+    [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never;
+};
+interface ComposedChartProps<TData extends Record<string, unknown>, TConfig extends Record<string, ChartConfig[string]>> {
+    config: TConfig & ValidateKeys<TData, TConfig>;
+    /** The rows the chart draws. One entry per point, bar or category. */
+    data: TData[];
+    /**
+     * What the chart shows, in a sentence a reader could act on. Required, and
+     * announced to a screen reader even when it is not printed.
+     */
+    title: string;
+    /** Prints the title above the plot instead of hiding it from sight. */
+    showTitle?: boolean;
+    /** A line under the title — the unit, the window, the caveat. */
+    description?: ReactNode;
+    /**
+     * The composed parts — axes, grid, tooltip, legend, and the marks
+     * themselves.
+     */
+    children: ReactNode;
+    /** Merged onto the figure, last, so a call site can size or space it. */
+    className?: string;
+    /** Escape hatch onto the raw Recharts chart element. */
+    chartProps?: ComponentProps<typeof ComposedChart$1>;
+    /**
+     * How the line between two points is interpolated. Every mark inherits it
+     * unless it says otherwise.
+     */
+    curveType?: ChartCurveType;
+    animationType?: ChartRevealType;
+    barGap?: number;
+    barCategoryGap?: number;
+    /** The series lit on first render, when the chart keeps its own selection. */
+    defaultSelectedDataKey?: string | null;
+    /**
+     * The selected series, driven from outside.
+     *
+     * Give this and the chart follows it; leave it undefined and the chart keeps
+     * its own, starting from `defaultSelectedDataKey`.
+     */
+    selectedDataKey?: string | null;
+    /** Fires when the selection changes, and with null when it is cleared. */
+    onSelectionChange?: (selectedDataKey: string | null) => void;
+    /**
+     * Swaps the marks for an animated skeleton, keeping the measured height so
+     * the page does not jump when the data lands.
+     */
+    isLoading?: boolean;
+    /** How many bars the skeleton draws. */
+    loadingBars?: number;
+    /**
+     * The row field on the category axis. Needed by the brush and by the table
+     * view.
+     */
+    xDataKey?: keyof TData & string;
+    /**
+     * Drops the hidden table view. Only correct when the page prints the data
+     * itself.
+     */
+    hideDataTable?: boolean;
+    /**
+     * What the chart shows when it has nothing to draw.
+     *
+     * Rendered instead of the plot whenever `data` is empty and the chart is not
+     * loading — the state a real dashboard reaches within a week, and the one an
+     * empty pair of axes is indistinguishable from a failed load. `false` keeps
+     * the axes, for a chart whose emptiness is itself the reading.
+     */
+    empty?: ChartEmptyProps | false;
+}
+/**
+ * Bars and lines over one axis — the shape for "the volume, and the rate it
+ * moved at".
+ *
+ * One axis, always. Two measures at different scales belong in two charts or
+ * indexed to a common base; a second y-scale lets the author choose where the
+ * lines cross, which is the single most misleading thing a chart can do.
+ *
+ * @example
+ * <ComposedChart title="Revenue and profit" config={config} data={data}>
+ *   <ComposedChart.Grid />
+ *   <ComposedChart.XAxis dataKey="month" />
+ *   <ComposedChart.Tooltip />
+ *   <ComposedChart.Bar dataKey="revenue" variant="duotone" />
+ *   <ComposedChart.Line dataKey="profit" />
+ * </ComposedChart>
+ */
+declare function ComposedChart<TData extends Record<string, unknown>, TConfig extends Record<string, ChartConfig[string]>>({ config, data, title, showTitle, description, children, className, chartProps, curveType, animationType, barGap, barCategoryGap, defaultSelectedDataKey, selectedDataKey: controlledDataKey, onSelectionChange, isLoading, loadingBars, xDataKey, hideDataTable, empty, }: ComposedChartProps<TData, TConfig>): react.JSX.Element;
+declare namespace ComposedChart {
+    var Bar: ({ dataKey, variant, radius, glowing, animationType, isClickable, enableHoverHighlight, children, barProps, }: ComposedBarProps) => react.JSX.Element | null;
+    var Line: ({ dataKey, strokeVariant, curveType, animationType, connectNulls, glowing, isClickable, children, lineProps, }: ComposedLineProps) => react.JSX.Element | null;
+    var Dot: FC<DotProps>;
+    var ActiveDot: FC<DotProps>;
+    var XAxis: ({ tickLine, axisLine, tickMargin, minTickGap, label, ...rest }: ChartXAxisProps) => react.JSX.Element | null;
+    var YAxis: ({ tickLine, axisLine, tickMargin, minTickGap, width, tickFormatter, label, ...rest }: ChartYAxisProps) => react.JSX.Element | null;
+    var Grid: ({ vertical, strokeDasharray, ...rest }: ComponentProps<typeof CartesianGrid>) => react.JSX.Element;
+    var Tooltip: ({ variant, roundness, defaultIndex, cursor }: ChartTooltipSlotProps) => react.JSX.Element | null;
+    var Legend: ({ variant, align, verticalAlign, isClickable, }: ChartLegendSlotProps) => react.JSX.Element;
+    var Background: ({ variant }: {
+        variant: ChartBackgroundVariant;
+    }) => react.JSX.Element | null;
+    var ReferenceLine: typeof ReferenceLine;
+    var ReferenceBand: typeof ReferenceBand;
+    var Annotation: typeof Annotation;
+    var Values: FC<ValuesProps>;
+    var Brush: FC<BrushProps>;
+    var Toolbar: FC<ToolbarProps>;
+}
+interface ComposedBarProps {
+    dataKey: string;
+    variant?: BarVariant;
+    radius?: number;
+    /** A halo behind the bars. */
+    glowing?: boolean;
+    animationType?: ChartRevealType;
+    isClickable?: boolean;
+    /** Dims this series while another COLUMN is hovered. */
+    enableHoverHighlight?: boolean;
+    /** `<ComposedChart.Values>`. */
+    children?: ReactNode;
+    barProps?: ComponentProps<typeof Bar>;
+}
+interface ComposedLineProps {
+    dataKey: string;
+    strokeVariant?: AreaStrokeVariant;
+    curveType?: ChartCurveType;
+    animationType?: ChartRevealType;
+    connectNulls?: boolean;
+    glowing?: boolean;
+    isClickable?: boolean;
+    children?: ReactNode;
+    lineProps?: ComponentProps<typeof Line>;
+}
+interface DotProps {
+    variant?: ChartDotVariant;
+}
+
+export { type ChartXAxisProps, type ChartYAxisProps, type ComposedBarProps, ComposedChart, type ComposedChartProps, type ComposedLineProps, type DotProps, ComposedChart as default };