@humanforest/slidev-theme 0.1.0

package/components/backgrounds.js

@@ -0,0 +1,135 @@
+// The named background/ink pair NAMES, derived from the generated manifest rather than restated.
+//
+// A name here is a background PLUS A HALF — `accent-dark`, `warm-light` — because that is what the
+// generator emits and what an OBJECT on the deck needs: a fixed pair that reads the same wherever
+// it is dropped. A SURFACE of the deck reads the unsuffixed `--deck-bg-<name>` instead, which
+// follows the register. Both come from one table; see scripts/deck.ts's PANEL.
+//
+// This used to be six poetic names (forest, deep, night, bark, mint, peach) in a table of their
+// own, five of which were a panel half written a second time. They drifted the first time one
+// moved.
+//
+// Defect #9 of this project's one recurring shape: `scripts/deck.ts`'s PANEL table is the single
+// place the pairs are DEFINED, but before this file existed, BadgeStrip.vue and IconTile.vue each
+// hard-coded their own copy of the names (for their `tone` validator), and IconTile.vue
+// hard-coded `peach` a third time directly in CSS (`var(--deck-bg-warm-light)`). Nothing linked any
+// of the three back to the generator. Rename `peach` -> `sand` in scripts/deck.ts and regenerate:
+// every existing gate (deckCoverage, the frontmatter suite, deckAudit) stayed green, because none
+// of them read the components' hard-coded lists against the generator's — and every IconTile went
+// invalid-at-computed-value-time, an invisible 80x80 blank, with no warning anywhere.
+//
+// Importing deck.json directly — the same technique DottedMap.vue already uses for
+// `@humanforest/tokens/geo/london-dots-coarse.json` — makes that class of drift structurally
+// impossible: there is exactly one place the names live, and every consumer reads it.
+import deckTokens from '@humanforest/tokens/deck/deck.json';
+
+/** The four names the generator publishes a background for, bare — no half. */
+export const BACKGROUND_NAMES = Object.keys(deckTokens.backgrounds);
+
+/** Every `<name>-<half>` the generator emits a `--deck-bg-*` / `--deck-on-bg-*` pair for. */
+export const BACKGROUNDS = BACKGROUND_NAMES.flatMap((n) => [`${n}-light`, `${n}-dark`]);
+
+/*
+  ★★ A HALF IS A CHOICE ONLY WHERE THERE IS SOMETHING TO CHOOSE, which is why a background is twelve
+  values and not eight.
+
+  The generator publishes each row of the table twice over. FOLLOWING tokens
+  (`--deck-bg-<name>`, `--deck-ink-<name>`) carry no half because the REGISTER picks the column;
+  PINNED tokens (`--deck-bg-<name>-<half>`) name the column outright, so the author picks it and the
+  value is the same on every slide.
+
+  A consumer therefore takes one vocabulary or the other, never both: a solid badge paints its own
+  ground and so must be pinned (`accent-dark`), and an outline badge borrows the slide's ground and
+  so must follow (`accent`). The half is not "optional" in the second case — it is unexpressible,
+  because there is no second value for an author to choose between.
+
+  Both live in one prop because they are one axis — WHICH FAMILY — asked at two levels of
+  commitment. Splitting them into `background` and `pinnedBackground` would make a caller name the family twice.
+*/
+export const BACKGROUND_VALUES = [...BACKGROUNDS, ...BACKGROUND_NAMES];
+
+/** What a Card (and StatCard) can sit on, in order of how much ground it claims: `transparent`
+ * paints none and draws its edge in its own ink, `surface` is the derived step off the slide
+ * ground, and the four names are the table's pairs read as FOLLOWING tokens — the register picks
+ * the half, and the card's own `dark` pins the dark one. The pinned `<name>-<half>` spellings are
+ * not here: a card is a surface OF the slide, not an object dropped on it. */
+export const CARD_BACKGROUNDS = ['transparent', 'surface', ...BACKGROUND_NAMES];
+
+/** What a component falls back to when asked for a name the generator doesn't have. */
+export const DEFAULT_BACKGROUND = 'vivid-dark';
+
+/**
+ * Clamps an arbitrary tone value to one the generator actually emits — the house lookup-table
+ * idiom (Placeholder's `ratio`, Grid's `cols`/`gap`/`align`), applied to chip tone. Vue strips
+ * prop validators from production builds, so without this, `<BadgeStrip tone="olive">` (or a renamed
+ * tone the caller didn't know about) would build `var(--deck-bg-olive)` — undefined, so BOTH
+ * the fill and the ink go invalid at computed-value time: an unstyled, transparent chip, no
+ * warning. Clamping first means the interpolation below only ever sees a name that exists.
+ */
+export const clampBackground = (name) => {
+  if (BACKGROUNDS.includes(name)) return name;
+  // A bare name reaching a PINNED consumer is a caller that asked to follow the register where
+  // following is not on offer. It keeps its family and takes that family's dark half — the register
+  // a badge is drawn in by default, and the half every pinned default in the theme already names.
+  if (BACKGROUND_NAMES.includes(name)) return `${name}-dark`;
+  return DEFAULT_BACKGROUND;
+};
+
+/** The same clamp for a FOLLOWING consumer: the bare family name, with any half discarded. */
+export const clampBackgroundName = (name) => {
+  const base = String(name).replace(/-(light|dark)$/, '');
+  return BACKGROUND_NAMES.includes(base) ? base : DEFAULT_BACKGROUND.replace(/-(light|dark)$/, '');
+};
+
+/** The inline `background`/`color` pair for a chip tone, already clamped — never raw
+    interpolation into the custom-property name. */
+export const backgroundStyle = (name) => {
+  const n = clampBackground(name);
+  return { background: `var(--deck-bg-${n})`, color: `var(--deck-on-bg-${n})` };
+};
+
+/*
+  ★★ THE RUNNING CHROME DOES NOT PAINT FROM A CHIP, and that is the whole point of this helper.
+
+  Both pills used `backgroundStyle('vivid-dark')`, and a pinned half is register-INVARIANT by design — an object sits ON the deck, so it reads the same on either ground. Correct for an object;
+  wrong for the running chrome, which lands on whatever ground the SLIDE gives it. With the pill
+  pinned to forest-700, every dark panel ground failed the 3:1 non-text floor beneath it: bark
+  1.09:1, forest-900 1.77:1, neutral-800 2.33:1. Moving with the register makes those 3.86, 6.28 and
+  8.28.
+
+  ⚠ IT PAINTS THE ACCENT PAIR, AND IT USED TO HAVE A PAIR OF ITS OWN. --deck-chrome-pill /
+  --deck-on-chrome-pill existed "so the chrome can be re-tuned without moving every accent" — a lever
+  created already equal to the accent on both registers, and never once turned. Forty-two things
+  painted the accent; one painted the pill. A role whose only difference from another is its name is
+  a second thing to keep in sync, and its specimen drew two identical boxes under two labels. If the
+  chrome ever does need to step away from the accent, that is the moment to add a role, with a value.
+*/
+export const chromePillStyle = () => ({
+  background: 'var(--deck-accent)',
+  color: 'var(--deck-on-accent)',
+});
+
+/*
+  The UNFILLED counterpart: a stroke and a label in the background's ink, on whatever ground the slide
+  gives it. `--deck-ink-<name>` FOLLOWS the register, so this takes a bare name — see the ★★ note
+  above on why the half is unexpressible here rather than merely unused.
+
+  `borderColor` is left to `currentColor` in CSS rather than named again here, so the stroke and the
+  label can never drift apart.
+*/
+export const outlineStyle = (name) => ({ color: `var(--deck-ink-${clampBackgroundName(name)})` });
+
+/*
+  The FILLED counterpart of `outlineStyle`: the same bare name, painted as a ground rather than as
+  ink, and following the register the way `--deck-bg-<name>` does.
+
+  ★ IT IS NOT `backgroundStyle` WITH THE HALF LEFT OFF. That one clamps a bare name UP to the
+  family's dark half and pins it, which is correct for an object dropped on the deck and wrong for a
+  fill that belongs to a surface — see the ★★ note above on why the half is unexpressible for a
+  following consumer. Avatar's monogram disc is the second case: it sits inside a ring that already
+  follows the page's ink, so a pinned fill would flip out of step with the edge around it.
+*/
+export const groundStyle = (name) => {
+  const n = clampBackgroundName(name);
+  return { background: `var(--deck-bg-${n})`, color: `var(--deck-on-bg-${n})` };
+};

package/components/boroughGeometry.ts

@@ -0,0 +1,59 @@
+/*
+  The pure lookup and framing BoroughShape.vue resolves through — pulled out of the SFC so it is
+  unit-testable in the package's node-only vitest run, the same shape as dottedMapGeometry.js.
+
+  SOURCE OF TRUTH for the idea: packages/charts/src/londonAreas.ts (`indexAreas`) and
+  FBoroughShape.vue's own framing maths. This is a deliberate deck-local re-implementation rather
+  than an import: `@humanforest/charts` peer-depends on `@nuxt/ui`, and bun auto-installs peer
+  dependencies, so taking the dependency drags Nuxt UI and Tailwind into a deck that runs UnoCSS.
+  The GEOMETRY is genuinely shared — both sides read the same generated
+  @humanforest/tokens/geo/london-boroughs.json — so a deck borough and a product borough are the
+  same outline, which is the part that has to match.
+*/
+
+/** One borough, as scripts/londonAreas.ts generates it. */
+export interface Borough {
+  /** ONS code — E09… for a borough. */
+  code: string;
+  name: string;
+  /** SVG path data, in viewBox units. */
+  d: string;
+  /** Bounding box of the largest ring, in viewBox units: origin (x, y) then size (w, h). */
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+/**
+ * Index boroughs by ONS code and by name, both lower-cased.
+ *
+ * Codes are indexed first because they are unambiguous. Names are indexed too because real slide
+ * copy says "Southwark", not "E09000028" — and unlike wards, no two boroughs share a name, so the
+ * name key is safe here without the uniqueness guard londonAreas.ts needs for the ward level.
+ */
+export const indexBoroughs = (areas: readonly Borough[]): Map<string, Borough> => {
+  const byKey = new Map<string, Borough>();
+  for (const a of areas) {
+    byKey.set(a.code.toLowerCase(), a);
+    byKey.set(a.name.toLowerCase(), a);
+  }
+  return byKey;
+};
+
+/** Look one borough up by code or name, case-insensitively. `undefined` for an unknown key —
+ *  never a stray full-London outline, which would be a wrong answer wearing a right one's clothes. */
+export const findBorough = (areas: readonly Borough[], key: string | null | undefined): Borough | undefined =>
+  key == null ? undefined : indexBoroughs(areas).get(String(key).trim().toLowerCase());
+
+/**
+ * The viewBox that frames one borough to its own bounds, with `pad` of breathing room expressed as
+ * a fraction of the shape's LONGER side — so a long thin borough gets the same visual margin all
+ * the way round rather than a wide one on the short axis. Built from the stored bounding box, so
+ * nothing here parses a path.
+ */
+export const frameViewBox = (area: Borough | undefined, pad = 0.04): string | undefined => {
+  if (!area) return undefined;
+  const p = Math.max(area.w, area.h) * pad;
+  return `${area.x - p} ${area.y - p} ${area.w + p * 2} ${area.h + p * 2}`;
+};

package/components/chartData.ts

@@ -0,0 +1,277 @@
+/*
+  The pure half of the deck's chart set — data shaping, series resolution, tick thinning and the
+  empty-state decision. Everything here is a plain function over plain data: no Vue, no DOM, no
+  Unovis. That is what makes it testable in the package's node-only vitest run
+  (test/chartData.static.test.ts), the same reason chipTones.js/dottedMapGeometry.js exist as modules
+  rather than living inline in the components that use them.
+
+  WHY A DECK-LOCAL COPY. `packages/charts` already owns this shape — `fromCategories.ts` derives
+  the same ordered accessor arrays from a categories map, and `useChartPalette.ts` owns the palette
+  accessors. Those two files are the SOURCE OF TRUTH for the idea; this file is a deliberate
+  re-implementation, not a fork of convenience. Measured reason: adding `@humanforest/charts` to
+  this package's dependencies pulls `@nuxt/ui` and `tailwindcss` into the deck's install tree —
+  bun auto-installs peer dependencies, and that package peer-depends on `@nuxt/ui: ^4`. Measured on
+  2026-08-25: 326 top-level entries / 306 MB with it, 204 / 199 MB without. The deck runs UnoCSS and
+  the two pipelines do not coexist, so the dependency is the thing to avoid, not the duplication.
+
+  What is shared instead is what actually has to match: the VALUES. Series colours resolve to
+  --deck-series-1…6, which alias the published categorical palette in the product's own order, so a
+  deck chart and a product chart of the same data are the same chart.
+
+  THE CEILING IS A HARD LIMIT, not a soft one — and it is SIX. It said five here, on the strength of
+  a claim that the palette had no sixth; that was never true of the design system, which publishes
+  six on the vivid track (twelve with labels) and six brand pairs. A chart that needs a SEVENTH
+  series is the wrong chart — so `chartState()` reports that as its own state and the components
+  draw a real message, rather than wrapping back to series 1 (which quietly tells the audience two
+  different things are the same thing) or falling through to Unovis' own --vis-color6.
+*/
+
+/**
+ * How many categorical series the deck palette can express.
+ *
+ * SIX. It was five, on the strength of a claim that the palette had no sixth — which was never true
+ * of the design system: colourEngine publishes six on the vivid track (twelve with labels) and six
+ * brand pairs. Measured, the sixth costs nothing in contrast on either deck ground.
+ *
+ * ★ Both registers carry six. Vivid's is `red`; the .deck-pairs register's is river-soft. Watch the
+ * one collision: on a dark ground vivid red sits dE00 3 from --deck-status-danger-mark, so a
+ * six-series chart beside a status mark reads its last series as an alarm.
+ */
+export const SERIES_CEILING = 6;
+
+/** One series: which field of a row it reads, and what the legend calls it. */
+export interface Series {
+  key: string;
+  name?: string;
+}
+
+/** A resolved series — key, display name, and the CSS colour reference that paints it. */
+export interface ResolvedSeries {
+  key: string;
+  name: string;
+  color: string;
+}
+
+/** A row of an XY chart: a category label plus one numeric field per series. */
+export type Row = Record<string, unknown>;
+
+/**
+ * The colour that paints series `index` (0-based), as a `var()` reference rather than a resolved
+ * value — CSS resolves it continuously, so a `.deck-dark` slide flips every chart with no JS at
+ * all. Mirrors `useChartPalette`'s own "colours are var() STRINGS, not hexes" contract.
+ *
+ * Beyond the ceiling this THROWS rather than wrapping: a silent wrap paints two series the same
+ * colour, which is a lie the audience cannot see. Callers gate on `chartState()` first.
+ */
+export function seriesVar(index: number): string {
+  if (!Number.isInteger(index) || index < 0 || index >= SERIES_CEILING) {
+    throw new RangeError(
+      `seriesVar(${index}): the deck palette carries ${SERIES_CEILING} categorical colours (0…${SERIES_CEILING - 1}). ` +
+        'A chart that needs more is the wrong chart — split it, or aggregate the tail.',
+    );
+  }
+  return `var(--deck-series-${index + 1})`;
+}
+
+/** True for a value a chart can actually plot. Anything else is a gap, never a zero. */
+export const isPlottable = (v: unknown): v is number => typeof v === 'number' && Number.isFinite(v);
+
+/**
+ * The series a chart will draw, given what the author passed and what the data actually contains.
+ * An explicit `series` list wins; otherwise every numeric field on the first row becomes a series,
+ * in the order the object declares them, minus the reserved label field. That affordance is what
+ * lets a slide say `:data="[{ label: 'Jan', rides: 12 }]"` and get a legend without repeating
+ * itself.
+ */
+export function resolveSeries(data: readonly Row[], series?: readonly Series[], labelKey = 'label'): ResolvedSeries[] {
+  const declared = series?.length
+    ? series
+    : Object.keys(data[0] ?? {})
+        .filter((k) => k !== labelKey && isPlottable((data[0] as Row)[k]))
+        .map((key) => ({ key }));
+
+  return declared.map((s, i) => ({
+    key: s.key,
+    name: s.name ?? s.key,
+    // Past the ceiling the colour is not asked for at all — chartState() has already stopped the
+    // chart drawing, and calling seriesVar() here would throw before that message could render.
+    color: i < SERIES_CEILING ? seriesVar(i) : '',
+  }));
+}
+
+/** What a chart should do with what it was handed. */
+export type ChartState =
+  | { kind: 'ready'; series: ResolvedSeries[] }
+  | { kind: 'empty'; reason: 'no-rows' | 'no-series' | 'no-values' }
+  | { kind: 'over-capacity'; count: number };
+
+/**
+ * The honest-degradation decision, in one pure function so both the components and the tests read
+ * the same rules.
+ *
+ *   no-rows      nothing was passed, or an empty array.
+ *   no-series    rows exist but carry no numeric field to plot.
+ *   no-values    series exist but every cell is null/undefined/NaN. Drawn as an empty state
+ *                rather than a flat line along zero: a missing reading is not a reading of nought,
+ *                and on a slide read in seconds from the back of a room there is no axis to
+ *                inspect and no tooltip to interrogate.
+ *   over-capacity  more series than the palette has colours. See the header.
+ */
+export function chartState(data: readonly Row[] | null | undefined, series?: readonly Series[], labelKey = 'label'): ChartState {
+  const rows = Array.isArray(data) ? data : [];
+  if (rows.length === 0) return { kind: 'empty', reason: 'no-rows' };
+
+  const resolved = resolveSeries(rows, series, labelKey);
+  if (resolved.length === 0) return { kind: 'empty', reason: 'no-series' };
+  if (resolved.length > SERIES_CEILING) return { kind: 'over-capacity', count: resolved.length };
+
+  const anyValue = rows.some((row) => resolved.some((s) => isPlottable(row[s.key])));
+  if (!anyValue) return { kind: 'empty', reason: 'no-values' };
+
+  return { kind: 'ready', series: resolved };
+}
+
+/**
+ * The same decision for the single-value charts (donut), whose rows carry one `value` field rather
+ * than a series per column. A total of zero is empty, not a disc: an all-zero donut renders as
+ * either nothing or a NaN arc depending on the mark, and neither says "no data".
+ */
+export function shareState(data: readonly Row[] | null | undefined, valueKey = 'value'): ChartState {
+  const rows = Array.isArray(data) ? data : [];
+  if (rows.length === 0) return { kind: 'empty', reason: 'no-rows' };
+  if (rows.length > SERIES_CEILING) return { kind: 'over-capacity', count: rows.length };
+
+  const values = rows.map((r) => (isPlottable(r[valueKey]) ? r[valueKey] : 0));
+  if (values.every((v) => v <= 0)) return { kind: 'empty', reason: 'no-values' };
+
+  return {
+    kind: 'ready',
+    series: rows.map((r, i) => ({
+      key: String(r[valueKey] ?? i),
+      name: typeof r.label === 'string' ? r.label : String(i + 1),
+      color: seriesVar(i),
+    })),
+  };
+}
+
+/** The numeric column a donut hands its container, gaps read as zero — a missing slice has no
+ *  share, which is the one place a gap and a nought genuinely mean the same thing. */
+export const shareValues = (data: readonly Row[], valueKey = 'value'): number[] =>
+  data.map((r) => (isPlottable(r[valueKey]) ? r[valueKey] : 0));
+
+/**
+ * Which row indices carry a tick.
+ *
+ * A deck axis is not a screen axis. Tick labels are set at --type-deck-body-sm-size (36px) so they
+ * survive a projector, which means far fewer of them fit: twelve months across a half-slide column
+ * collide into a grey smear long before they become unreadable individually. This thins the set to
+ * at most `maxTicks` by taking every nth row, and ALWAYS keeps the last row — an axis whose final
+ * tick is missing reads as though the data stops early.
+ */
+export function tickIndices(count: number, maxTicks = 6): number[] {
+  if (count <= 0) return [];
+  if (count <= maxTicks) return Array.from({ length: count }, (_, i) => i);
+
+  const stride = Math.ceil((count - 1) / Math.max(maxTicks - 1, 1));
+  const out: number[] = [];
+  for (let i = 0; i < count; i += stride) out.push(i);
+  const last = count - 1;
+  if (out[out.length - 1] !== last) {
+    // Replace rather than append when the penultimate tick would sit within half a stride of the
+    // end: two labels that close together at 36px overlap, which is the exact failure this thins for.
+    if (last - out[out.length - 1] < stride / 2) out[out.length - 1] = last;
+    else out.push(last);
+  }
+  return out;
+}
+
+/** The category label for row `index`, or the index itself when the row does not carry one. */
+export const labelAt = (data: readonly Row[], index: number, labelKey = 'label'): string => {
+  const row = data[index];
+  if (!row) return '';
+  const label = row[labelKey];
+  return label == null ? String(index + 1) : String(label);
+};
+
+/**
+ * The deck's default number format: British grouping, and COMPACT past four digits.
+ *
+ * Compact is the deck default rather than the web one because of where the figure is read. "12,480"
+ * at 36px is eleven glyphs an audience has to parse mid-sentence; "12k" is three, and a slide is
+ * making a point about magnitude, not reconciling a ledger. A chart that genuinely needs the exact
+ * figure passes its own `format`.
+ */
+export const formatValue = (v: number): string =>
+  Math.abs(v) >= 10_000
+    ? new Intl.NumberFormat('en-GB', { notation: 'compact', maximumFractionDigits: 1 }).format(v)
+    : new Intl.NumberFormat('en-GB').format(v);
+
+/** A percentage for a donut slice, of the whole its own data sums to. Returns null for a zero
+ *  total rather than NaN%, so a caller never prints "NaN%" on a slide. */
+export const shareOf = (values: readonly number[], index: number): number | null => {
+  const total = values.reduce((a, b) => a + (isPlottable(b) ? b : 0), 0);
+  if (total <= 0) return null;
+  return ((values[index] ?? 0) / total) * 100;
+};
+
+/** Scatter points, grouped by their `group` field into at most five drawable groups. Rows with no
+ *  group all land in one unnamed group, which is the common single-cloud case. */
+export function scatterGroups(data: readonly Row[], groupKey = 'group'): string[] {
+  const seen: string[] = [];
+  for (const row of data) {
+    const g = row[groupKey];
+    const name = g == null ? '' : String(g);
+    if (!seen.includes(name)) seen.push(name);
+  }
+  return seen;
+}
+
+/** The state decision for a scatter: rows need a finite x AND y to be a point at all. */
+export function scatterState(data: readonly Row[] | null | undefined, groupKey = 'group'): ChartState {
+  const rows = Array.isArray(data) ? data : [];
+  if (rows.length === 0) return { kind: 'empty', reason: 'no-rows' };
+
+  const plottable = rows.filter((r) => isPlottable(r.x) && isPlottable(r.y));
+  if (plottable.length === 0) return { kind: 'empty', reason: 'no-values' };
+
+  const groups = scatterGroups(plottable, groupKey);
+  if (groups.length > SERIES_CEILING) return { kind: 'over-capacity', count: groups.length };
+
+  return {
+    kind: 'ready',
+    series: groups.map((name, i) => ({ key: name || 'points', name: name || 'Points', color: seriesVar(i) })),
+  };
+}
+
+/** The message a component prints for a non-ready state. Kept here, not in the templates, so the
+ *  wording is one string a test can pin rather than six that drift apart. */
+/**
+ * The crosshair's circle, in px. Unovis draws it at 4, which is sized against a 2px line on a
+ * dashboard; this deck draws its lines at 6 and is read from across a room, so the circle takes
+ * one and a half times that stroke — big enough to read as a mark on the series it belongs to
+ * rather than as a speck on the rule.
+ */
+export const CROSSHAIR_CIRCLE_R = 9;
+
+/*
+  ★★ UNOVIS BLINKS THE CROSSHAIR OUT BETWEEN COLUMNS, AND THIS DECK IS ITS WORST CASE.
+
+  `hideWhenFarFromPointer` defaults TRUE at a distance of 100, and with `snapToData` the rule reads
+  "hide once the snapped column is more than 100px from the pointer". Unovis' own comment says the
+  flag is for "low data resolution" — which is every chart here: six monthly points across a 1740px
+  plot sit ~290px apart, so a band roughly 90px wide around each midpoint hides the line, the
+  circles AND the tooltip. MEASURED on the Line slide, sweeping the pointer smoothly across the
+  plot: 41 of 200 frames drawn with nothing on screen, and it reads as a flicker rather than as a
+  rule, because the pointer never left the plot.
+
+  A presenter sweeping a chart wants the nearest column's reading, always — which is what the panel
+  already promises by snapping. Off.
+*/
+export const CROSSHAIR_HIDE_WHEN_FAR = false;
+
+export const stateMessage = (state: ChartState, empty: string): string => {
+  if (state.kind === 'over-capacity') {
+    return `${state.count} series — this palette carries ${SERIES_CEILING}`;
+  }
+  return empty;
+};