@eifi1/ui-kit 0.48.2 → 0.50.0

package/src/theme/chart-palette.ts

@@ -1,23 +1,45 @@
 // Chart colour system. Single source of truth lives in the design tokens
 // (:root / .dark in tokens.css): brand = indigo, money = teal/amber/purple,
-// chart-1..9 = Paul Tol "Muted" (CVD-safe across protan/deutan/tritan).
+// chart-1..8 = anyplot's "Imprint" hues (https://anyplot.ai/palette, 0.49 — Paul Tol
+// "Muted" before, still selectable as the `paul-tol` preset).
 // Returning CSS vars here makes every Recharts series theme-aware for free — the
 // SVG fill/stroke resolves --chart-N against the current light/dark token set.
 
 import { contrast, parseHex as parseRgbHex } from "./color";
 
-const PALETTE_SIZE = 9;
+/** How many categorical slots `paletteFor` cycles through: anyplot's eight hues. Amber,
+ *  anyplot's ninth colour, is a semantic warning anchor and not a series slot. A preset
+ *  that carries more hues (Paul Tol's nine) still writes them as `--chart-N`, but the
+ *  by-index ramp wraps after eight, so the same series keeps the same colour whichever
+ *  preset is active. */
+export const PALETTE_SIZE = 8;
+
+/** anyplot's colour-vision-deficiency-optimal order over the eight slots — the order
+ *  that keeps the FIRST n series furthest apart under protan/deutan/tritan simulation.
+ *  An option (`paletteFor(i, { order: "cvd" })`), not the default: the default order is
+ *  anyplot's own slot order, so series 1 is always the green. */
+export const CVD_ORDER = [0, 1, 7, 6, 4, 5, 2, 3] as const;
+
+export interface PaletteForOptions {
+  /** `"slot"` (default): anyplot's slot order. `"cvd"`: {@link CVD_ORDER}. */
+  order?: "slot" | "cvd";
+}
 
 /** CVD-safe categorical colour for series `index`, as a theme-aware CSS var.
+ *
+ *  The first series is always slot 0 (`--chart-1`, anyplot's green), and the ramp
+ *  wraps after {@link PALETTE_SIZE}.
  *
  *  Wraps in both directions, the way `strokeDash` does: JS `%` keeps the sign,
- *  so `-1 % 9` is `-1` and the plain formula named `--chart-0`, a token that does not
+ *  so `-1 % 8` is `-1` and the plain formula named `--chart-0`, a token that does not
  *  exist — a series with no stroke at all. A fractional index is truncated, and one
  *  that is not a number (NaN, ±Infinity — an `indexOf` miss divided by something)
  *  takes the first colour rather than `var(--chart-NaN)`. */
-export function paletteFor(index: number): string {
+export function paletteFor(index: number, options?: PaletteForOptions): string {
   const i = Number.isFinite(index) ? Math.trunc(index) : 0;
-  return `var(--chart-${(((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE) + 1})`;
+  const position = ((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE;
+  const slot = options?.order === "cvd" ? CVD_ORDER[position] : position;
+  return `var(--chart-${slot + 1})`;
 }
 
 /** Semantic money colours, theme-aware via tokens. Pair with +/- and arrow
@@ -26,10 +48,65 @@ export const CHART_COLORS = {
   income: "var(--money-income)",
   expense: "var(--money-expense)",
   net: "var(--money-net)",
+  neutral: "var(--money-neutral)",
   assigned: "var(--brand)",
   activity: "var(--money-expense)",
+  /** A generic total line — not money-coloured, the chart's neutral ink. */
+  total: "var(--chart-ink)",
+} as const;
+
+/**
+ * What a chart draws that is NOT a series (anyplot's roles, 0.49). Two inks, which are
+ * the only chart colours that change between light and dark — the eight hues do not:
+ *
+ * - `other` / `rest` / `disabled` and confidence-`band` fills → the MUTED ink. A
+ *   treemap's "rest" bucket or a pie's "Other" slice takes this instead of wrapping
+ *   round to a hue the reader will match to a real series.
+ * - `total` / `baseline` / `outline` → the neutral INK.
+ */
+export const CHART_ROLES = {
+  other: "var(--chart-muted)",
+  rest: "var(--chart-muted)",
+  disabled: "var(--chart-muted)",
+  band: "var(--chart-muted)",
+  total: "var(--chart-ink)",
+  baseline: "var(--chart-ink)",
+  outline: "var(--chart-ink)",
 } as const;
 
+/** `--chart-ink` per theme, as hex (tokens.css holds the same two). */
+export const CHART_INK_HEX = { light: "#1a1a17", dark: "#f0efe8" } as const;
+/** `--chart-muted` per theme, as hex (tokens.css holds the same two). */
+export const CHART_MUTED_HEX = { light: "#6b6a63", dark: "#a8a79f" } as const;
+
+/** The 3:1 WCAG 1.4.11 asks of a filled graphical object against its surface. */
+export const EDGE_MIN_CONTRAST = 3;
+
+/**
+ * The 1px edge a FILLED mark (a bar, an area, a treemap tile) needs, or `undefined`.
+ *
+ * anyplot's answer to hues that sit under 3:1 on the ground (cyan, lime, lavender, ochre
+ * and green on cream; matte red and rose on the dark ground): outline the shape in ink,
+ * so its boundary is legible while the fill keeps the hue that identifies the series.
+ * Only those — a hue that clears 3:1 on every surface given stays unstroked, because an
+ * outline on every bar is noise.
+ *
+ * `fill` must be a measurable `#rgb`/`#rrggbb`; `surfaces` are the grounds the mark can
+ * sit on (the card and the page), and the WORST of them decides. Anything it cannot
+ * measure gets no edge rather than a guessed one.
+ */
+export function chartEdge(
+  fill: string,
+  surfaces: readonly string[],
+  ink: string = CHART_ROLES.outline,
+): string | undefined {
+  if (!parseRgbHex(fill)) return undefined;
+  const measurable = surfaces.filter((s) => parseRgbHex(s));
+  if (measurable.length === 0) return undefined;
+  const worst = Math.min(...measurable.map((s) => contrast(fill, s)));
+  return worst < EDGE_MIN_CONTRAST ? ink : undefined;
+}
+
 // ── Raw hex stops, by theme ────────────────────────────────────────────────
 // The heatmaps interpolate colours in JS (CSS vars can't be lerped), so they
 // need concrete hex per theme — i.e. the same colours DEFAULT_PRESET already
@@ -42,9 +119,14 @@ export const CHART_COLORS = {
 // DEFAULT_PRESET" — which is not optional: they HAD drifted, five of the six light
 // heat stops, and the light `neutral` was still Tailwind's slate-100, a cool grey on
 // the warm cream page this theme has used since #328.
+//
+// 0.49: the same eight hues in both themes — anyplot does not re-tune a hue for the dark
+// ground, and neither does the kit any more; `chartEdge` outlines the two that fall
+// under 3:1 there (matte red, rose) instead of lifting them into different colours.
+const IMPRINT_HEX = ["#009e73", "#c475fd", "#4467a3", "#bd8233", "#ae3030", "#2abccd", "#954477", "#99b314"] as const;
 export const PALETTE_HEX = {
-  light: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
-  dark: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"],
+  light: IMPRINT_HEX,
+  dark: IMPRINT_HEX,
 } as const;
 
 /** A heatmap's interpolation stops for one theme. Open string fields so any
@@ -59,24 +141,24 @@ export interface HeatStops {
 }
 
 /** Diverging (variance: under←0→over) and sequential (spending intensity)
-    heatmap stops, per theme. Teal = under/good, amber = over/spend = bad. */
+    heatmap stops, per theme — anyplot's scales (0.49). Sequential runs anyplot green →
+    blue; diverging runs blue (under) ↔ paper/ink (0, the midpoint) ↔ matte red (over).
+    The hues are the same in both themes; only the midpoint flips with the ground. */
 export const HEATMAP_HEX = {
   light: {
-    neutral: "#f1e7d2", // the cream surface itself, not a cool grey
-    under: "#0b6650", // DEFAULT_PRESET.light.moneyIncome
-    over: "#9c6418", // DEFAULT_PRESET.light.moneyExpense, warmed to the page
-    seqLow: "#f6ecd0",
-    seqHigh: "#9c6418",
+    neutral: "#faf8f1", // anyplot's light paper — the diverging scale's 0
+    under: "#4467a3",
+    over: "#ae3030",
+    seqLow: "#009e73",
+    seqHigh: "#4467a3",
     empty: "rgba(148,163,184,0.14)",
   },
   dark: {
-    neutral: "#363a5a", // one step above --border on the indigo-noir surface
-    under: "#22c3b6", // DEFAULT_PRESET.dark.moneyIncome
-    // Brighter than dark.moneyExpense (#e4b035) on purpose: a gradient endpoint is
-    // meant to be the loudest thing in its scale, and it is a fill, not a figure.
-    over: "#fbbf24",
-    seqLow: "#3a2c14", // dim amber, sits just above the page
-    seqHigh: "#fbbf24",
+    neutral: "#1a1a17", // anyplot's ink — the diverging scale's 0 on the dark ground
+    under: "#4467a3",
+    over: "#ae3030",
+    seqLow: "#009e73",
+    seqHigh: "#4467a3",
     empty: "rgba(148,163,184,0.10)",
   },
 } as const;

package/src/theme/palette-presets.ts

@@ -1,7 +1,8 @@
 // Appearance presets — the single source of truth for the "palette switcher"
 // (feedback #307). Each preset is a full set of design-token values for BOTH
 // light and dark, covering the page/surface backgrounds, the brand accent, the
-// semantic money trio and the 9-colour categorical chart palette, plus the
+// semantic money trio and the categorical chart palette (anyplot's eight "Imprint"
+// hues by default since 0.49, Paul Tol's nine in `PAUL_TOL_PRESET`), plus the
 // heatmap stops. A preset is applied at runtime by writing these as CSS custom
 // properties onto <html> (see palette-store.ts), which instantly re-skins every
 // token-driven surface and chart. The two heatmaps and the treemap interpolate
@@ -40,7 +41,9 @@ export interface TokenSet {
   moneyExpense: string;
   moneyNet: string;
   moneyNeutral: string;
-  // Categorical chart series (Paul Tol "Muted" by default — CVD-safe), exactly 9
+  // Categorical chart series, written as `--chart-1…9`. anyplot's eight "Imprint" hues by
+  // default (0.49), Paul Tol "Muted"'s nine in `PAUL_TOL_PRESET`. `paletteFor` cycles
+  // eight; a shorter ramp is repeated to fill `--chart-9` (see `applyTokenSet`).
   chart: string[];
   // Heatmap interpolation stops (variance diverging + spending sequential)
   heat: HeatStops;
@@ -54,6 +57,59 @@ export interface PalettePreset {
   dark: TokenSet;
 }
 
+// ── "Imprint" chart hues (feedback #119; the default since 0.49) ─────────────
+// anyplot's categorical palette (https://anyplot.ai/palette), by a colleague of
+// Marcel's. 8 hues + an amber semantic anchor, derived from Wong 2011 by a
+// Petroff-style max-min ΔE search in CAM02-UCS with Machado 2009 CVD simulation —
+// the same lineage as Paul Tol "Muted", one generation on, and tuned for exactly the
+// warm cream paper our light theme uses.
+//
+// 0.49 (Marcel, 2026-10-22): the DEFAULT, in anyplot's slot order, eight slots — amber
+// #DDCC77 left the pool, it is anyplot's semantic warning anchor, not a series colour.
+// The SAME hues in both themes: 0.48 lifted matte red and rose for the dark ground
+// (#BF413E, #A25083), which made the dark chart a different palette from the light one.
+// anyplot answers a hue under 3:1 with a 1px ink edge instead, and so does the kit now
+// (`chartEdge`, drawn by SeriesChart's bars and areas and by Treemap's tiles).
+//
+// Measured on our surfaces (CIEDE2000, Machado severity-100, 8 like-for-like slots on
+// the cream light surface #f6ecd9) — neither palette dominates:
+//   Paul Tol Muted  min-contrast 1.38 · worst-CVD ΔE00 11.8 · normal ΔE00 16.1
+//   imprint         min-contrast 1.95 · worst-CVD ΔE00  7.2 · normal ΔE00 22.2
+// i.e. imprint is punchier and has no near-invisible pale slot (Tol's #88ccee sits at
+// 1.5:1 on cream), while Tol separates better under colour-vision deficiency — which is
+// why `paletteFor` offers anyplot's CVD-optimal order (`{ order: "cvd" }`).
+const IMPRINT_HUES = [
+  "#009e73", // brand green   — first series, always
+  "#c475fd", // lavender      — creative
+  "#4467a3", // blue          — cool / info
+  "#bd8233", // ochre         — earth / commodity
+  "#ae3030", // matte red     — bad / loss / error
+  "#2abccd", // cyan          — sky / tech-cool
+  "#954477", // rose          — wellness / health
+  "#99b314", // lime          — growth / nature
+];
+
+/** anyplot's scales (0.49): sequential green → blue, diverging blue (under) ↔ paper or
+ *  ink (0) ↔ matte red (over). `chart-palette.ts`'s `HEATMAP_HEX` holds the same. */
+const ANYPLOT_HEAT: Record<"light" | "dark", HeatStops> = {
+  light: {
+    neutral: "#faf8f1",
+    under: "#4467a3",
+    over: "#ae3030",
+    seqLow: "#009e73",
+    seqHigh: "#4467a3",
+    empty: "rgba(148,163,184,0.14)",
+  },
+  dark: {
+    neutral: "#1a1a17",
+    under: "#4467a3",
+    over: "#ae3030",
+    seqLow: "#009e73",
+    seqHigh: "#4467a3",
+    empty: "rgba(148,163,184,0.10)",
+  },
+};
+
 // The shipped default (feedback #328): SOLAR-DUSK warm light + INDIGO-NOIR deep
 // dark surfaces — the two curated presets the user picked per mode — but with a
 // SINGLE unified brand accent (indigo) across both modes rather than each
@@ -62,10 +118,15 @@ export interface PalettePreset {
 // the dark block is Indigo Noir (already indigo). The money trio
 // (income/expense/net) drives the chart bars and stays palette-driven so those
 // semantic colours adapt to each mode's contrast (best practice — feedback #328).
+//
+// 0.49: its chart ramp and heat stops are anyplot's ("Imprint", above) — the money
+// trio stays the kit's own (Marcel, 2026-10-22: chart income/expense/net/neutral keep
+// the money tokens, never anyplot's green/red). The 0.48 default, the same surfaces
+// with Paul Tol's ramp, is `PAUL_TOL_PRESET`.
 export const DEFAULT_PRESET: PalettePreset = {
   id: "default",
-  name: "Default",
-  blurb: "Solar-dusk light · indigo-noir dark",
+  name: "Imprint",
+  blurb: "anyplot.ai chart hues · solar-dusk light · indigo-noir dark",
   light: {
     // Solar Dusk (light) surfaces, with the brand unified to indigo (see above).
     bgPage: "#ede3cf",
@@ -84,15 +145,8 @@ export const DEFAULT_PRESET: PalettePreset = {
     moneyExpense: "#905902",
     moneyNet: "#7a4fa3",
     moneyNeutral: "#6b6453",
-    chart: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
-    heat: {
-      neutral: "#f1e7d2",
-      under: "#0b6650",
-      over: "#9c6418",
-      seqLow: "#f6ecd0",
-      seqHigh: "#9c6418",
-      empty: "rgba(148,163,184,0.14)",
-    },
+    chart: IMPRINT_HUES,
+    heat: ANYPLOT_HEAT.light,
   },
   dark: {
     // Indigo Noir (dark)
@@ -115,6 +169,36 @@ export const DEFAULT_PRESET: PalettePreset = {
     moneyExpense: "#e4b035",
     moneyNet: "#b39aef",
     moneyNeutral: "#9aa1bd",
+    chart: IMPRINT_HUES,
+    heat: ANYPLOT_HEAT.dark,
+  },
+};
+
+
+/**
+ * The 0.48 default: the same surfaces, brand and money, with Paul Tol's "Muted" nine
+ * as the chart ramp and the teal/amber heat stops that went with it. Selectable, no
+ * longer the default (0.49). `paletteFor` cycles eight, so its ninth hue (#aa4499) is
+ * reachable only as `var(--chart-9)`.
+ */
+export const PAUL_TOL_PRESET: PalettePreset = {
+  id: "paul-tol",
+  name: "Paul Tol muted",
+  blurb: "Paul Tol's CVD-safe chart hues · solar-dusk light · indigo-noir dark",
+  light: {
+    ...DEFAULT_PRESET.light,
+    chart: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
+    heat: {
+      neutral: "#f1e7d2",
+      under: "#0b6650",
+      over: "#9c6418",
+      seqLow: "#f6ecd0",
+      seqHigh: "#9c6418",
+      empty: "rgba(148,163,184,0.14)",
+    },
+  },
+  dark: {
+    ...DEFAULT_PRESET.dark,
     chart: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"],
     heat: {
       neutral: "#363a5a",
@@ -127,73 +211,20 @@ export const DEFAULT_PRESET: PalettePreset = {
   },
 };
 
-// ── "Imprint" chart hues (feedback #119) ──────────────────────────────────────
-// anyplot's categorical palette (https://anyplot.ai/palette), by a colleague of
-// Marcel's. 8 hues + an amber semantic anchor, derived from Wong 2011 by a
-// Petroff-style max-min ΔE search in CAM02-UCS with Machado 2009 CVD simulation —
-// the same lineage as our default Paul Tol "Muted", one generation on, and tuned
-// for exactly the warm cream paper our light theme uses.
-//
-// This preset is DEFAULT_PRESET with ONLY the 9 categorical chart hues swapped;
-// surfaces, brand and the semantic money trio stay put, because those were their
-// own deliberate decisions (#307/#328) and are not what the palette is for. The
-// heatmap stops likewise stay teal/amber: they encode under/over, and imprint's
-// own diverging ramp is red↔blue, which would fight the money semantics.
-//
-// Measured on our surfaces (CIEDE2000, Machado severity-100, 8 like-for-like
-// slots on the cream light surface #f6ecd9) — neither palette dominates:
-//   Paul Tol Muted  min-contrast 1.38 · worst-CVD ΔE00 11.8 · normal ΔE00 16.1
-//   imprint         min-contrast 1.95 · worst-CVD ΔE00  7.2 · normal ΔE00 22.2
-// i.e. imprint is punchier and has no near-invisible pale slot (Tol's #88ccee
-// sits at 1.5:1 on cream), while Tol separates better under colour-vision
-// deficiency. So this ships as a CHOICE, not as a new default.
-//
-// The dark set keeps imprint's hues verbatim except matte-red and rose, whose
-// lightness is lifted (oklch L 0.50→0.55) because verbatim they land at 2.67:1
-// and 2.76:1 on our deep-indigo dark surface — under WCAG 2.1 SC 1.4.11's 3:1
-// non-text minimum. Lifted they clear it at 3.30:1 / 3.28:1. anyplot documents
-// the same shortfall on their own dark ground and answers it with a stroke halo;
-// lifting keeps the fix in the token layer instead of every chart component.
-const IMPRINT_HUES_LIGHT = [
-  "#009E73", // brand green   — first series
-  "#C475FD", // lavender      — creative
-  "#4467A3", // blue          — cool / info
-  "#BD8233", // ochre         — earth / commodity
-  "#AE3030", // matte red     — bad / loss / error
-  "#2ABCCD", // cyan          — sky / tech-cool
-  "#954477", // rose          — wellness / health
-  "#99B314", // lime          — growth / nature
-  "#DDCC77", // amber         — anyplot's semantic anchor, used here as slot 9
-];
-const IMPRINT_HUES_DARK = [
-  "#009E73",
-  "#C475FD",
-  "#4467A3",
-  "#BD8233",
-  "#BF413E", // matte red, L-lifted for our dark surface
-  "#2ABCCD",
-  "#A25083", // rose, L-lifted for our dark surface
-  "#99B314",
-  "#DDCC77",
-];
-
-export const IMPRINT_PRESET: PalettePreset = {
-  id: "imprint",
-  name: "Imprint",
-  blurb: "Colourblind-safe chart hues by anyplot.ai",
-  light: { ...DEFAULT_PRESET.light, chart: IMPRINT_HUES_LIGHT },
-  dark: { ...DEFAULT_PRESET.dark, chart: IMPRINT_HUES_DARK },
-};
+/** @deprecated 0.49 — use `DEFAULT_PRESET` (Imprint IS the default now); removed in 0.51.
+ *  A persisted `"imprint"` id resolves to it through `presetById`'s fallback. */
+export const IMPRINT_PRESET: PalettePreset = DEFAULT_PRESET;
 
 // The full-theme switcher from #307 stayed retired (feedback #328) — the default
 // is still the single source of truth for surfaces, brand and money (its five
 // alternatives are gone, see the header). What IS selectable is
-// the categorical chart ramp (feedback #119), so these two presets are the live
-// set; presetById falls back to the default for any stale persisted id.
+// the categorical chart ramp (feedback #119), so Imprint (the default) and Paul Tol are
+// the live set; presetById falls back to the default for any stale persisted id.
 /**
  * The categorical chart ramp, shared by every derived preset below.
  *
- * Paul Tol's "Muted" set, unchanged, and deliberately NOT re-derived per preset. A
+ * The default's ramp (anyplot's eight since 0.49, Paul Tol's "Muted" before), and
+ * deliberately NOT re-derived per preset. A
  * categorical ramp solves a different problem from a UI palette — separability among
  * nine unknown siblings, rather than contrast against one known surface — and a set
  * optimised against real dichromat confusion lines beats one spaced evenly by formula.
@@ -205,7 +236,7 @@ export const IMPRINT_PRESET: PalettePreset = {
  * SINGLE_LIGHTNESS_MAX_SERIES — so a chart with more than four series must carry a
  * second channel (a direct label, a pattern, a legend adjacent to the mark).
  */
-const PAUL_TOL = {
+const KIT_RAMP = {
   light: DEFAULT_PRESET.light.chart,
   dark: DEFAULT_PRESET.dark.chart,
 } as const;
@@ -249,7 +280,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#8e5900",
       moneyNet: "#7356a2",
       moneyNeutral: "#61646c",
-      chart: PAUL_TOL.light,
+      chart: KIT_RAMP.light,
       heat: {
         neutral: "#dce2ef",
         under: "#00725f",
@@ -274,7 +305,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#b77b29",
       moneyNet: "#9679c9",
       moneyNeutral: "#a1a5ac",
-      chart: PAUL_TOL.dark,
+      chart: KIT_RAMP.dark,
       heat: {
         neutral: "#1d212b",
         under: "#009a80",
@@ -304,7 +335,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#8e5900",
       moneyNet: "#7356a2",
       moneyNeutral: "#5f6662",
-      chart: PAUL_TOL.light,
+      chart: KIT_RAMP.light,
       heat: {
         neutral: "#d8e6dd",
         under: "#00725f",
@@ -329,7 +360,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#b87c2a",
       moneyNet: "#977ac9",
       moneyNeutral: "#9fa7a2",
-      chart: PAUL_TOL.dark,
+      chart: KIT_RAMP.dark,
       heat: {
         neutral: "#1a241e",
         under: "#009a80",
@@ -359,7 +390,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#8d5800",
       moneyNet: "#7355a2",
       moneyNeutral: "#676269",
-      chart: PAUL_TOL.light,
+      chart: KIT_RAMP.light,
       heat: {
         neutral: "#e7dfea",
         under: "#00715e",
@@ -384,7 +415,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#b77b29",
       moneyNet: "#9679c9",
       moneyNeutral: "#a8a2aa",
-      chart: PAUL_TOL.dark,
+      chart: KIT_RAMP.dark,
       heat: {
         neutral: "#251f27",
         under: "#009980",
@@ -414,7 +445,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#8d5800",
       moneyNet: "#7255a1",
       moneyNeutral: "#616467",
-      chart: PAUL_TOL.light,
+      chart: KIT_RAMP.light,
       heat: {
         neutral: "#e1e2e3",
         under: "#00715e",
@@ -439,7 +470,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
       moneyExpense: "#b77b29",
       moneyNet: "#9679c9",
       moneyNeutral: "#a2a5a8",
-      chart: PAUL_TOL.dark,
+      chart: KIT_RAMP.dark,
       heat: {
         neutral: "#212122",
         under: "#009a80",
@@ -452,7 +483,7 @@ export const DERIVED_PRESETS: PalettePreset[] = [
   },
 ];
 
-export const PALETTES: PalettePreset[] = [DEFAULT_PRESET, IMPRINT_PRESET, ...DERIVED_PRESETS];
+export const PALETTES: PalettePreset[] = [DEFAULT_PRESET, PAUL_TOL_PRESET, ...DERIVED_PRESETS];
 
 export function presetById(id: string): PalettePreset {
   return PALETTES.find((p) => p.id === id) ?? DEFAULT_PRESET;
@@ -508,5 +539,11 @@ export function applyTokenSet(
   el.style.setProperty("--money-expense", step?.well?.moneyExpense ?? t.moneyExpense);
   el.style.setProperty("--money-net", step?.well?.moneyNet ?? t.moneyNet);
   el.style.setProperty("--money-neutral", step?.well?.moneyNeutral ?? t.moneyNeutral);
-  t.chart.forEach((c, i) => el.style.setProperty(`--chart-${i + 1}`, c));
+  // All nine `--chart-N`, a shorter ramp repeated: Imprint's eight write `--chart-9` as
+  // slot 0 — what `paletteFor(8)` names — so a host addressing `var(--chart-9)` directly
+  // follows the cycle, and switching away from Paul Tol's nine leaves no stale ninth hue.
+  // An empty ramp (a `derivePalette` set) leaves whatever was there, deliberately.
+  if (t.chart.length > 0) {
+    for (let i = 0; i < 9; i++) el.style.setProperty(`--chart-${i + 1}`, t.chart[i % t.chart.length]);
+  }
 }

package/src/tour/tour-dock.ts

@@ -0,0 +1,132 @@
+import type { CSSProperties } from "react";
+import { readKeyboardInset } from "../hooks/use-anchored-panel";
+
+/*
+ * # The docked card (docs/tours-harmonization.md §11.7, contract round 054 §6)
+ *
+ * On a phone a field step's card is pinned full-width to the top or bottom edge of the
+ * USABLE BAND — the visual viewport less the keyboard, raised above the highest
+ * `[data-tour-obstruction]` (the number pad, a picker sheet) — on the edge away from the
+ * spotlighted field, so it covers neither the field nor the keyboard nor the pad.
+ */
+
+export type DockEdge = "top" | "bottom";
+
+export interface DockRect {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+}
+
+/** The band, in layout-viewport px (what `position: fixed` measures from). */
+export interface Band {
+  top: number;
+  bottom: number;
+}
+
+/** Below this the docked layout applies (Tailwind's `sm`). */
+export const DOCK_MAX_WIDTH = 640;
+/** The gutter between the card and the band's edge, and between the card and the field. */
+const GUTTER = 8;
+/** An obstruction whose top is within this of the band's top covers the screen. */
+const FULL_SCREEN_SLACK = 64;
+/** Under this much free space on its edge the card flips (the hysteresis floor). */
+const MIN_DOCK = 140;
+
+/**
+ * The usable band now: the visual viewport while a keyboard is up (`readKeyboardInset`'s
+ * rules — pinch zoom is not a keyboard, 100 px minimum), else the layout viewport; its
+ * bottom raised to the top of the highest visible obstruction that holds neither the field
+ * nor the card. An obstruction that starts at the band's top (a full-screen picker, opened
+ * over everything) is not a bottom layer and is ignored; a tall one (the number pad at
+ * Large text is over half a phone) still counts.
+ */
+export function readBand(target: Element | null, card: Element | null): Band {
+  const vh = window.innerHeight;
+  let top = 0;
+  let bottom = vh;
+  const vv = window.visualViewport;
+  if (vv && readKeyboardInset() > 0) {
+    top = vv.offsetTop;
+    bottom = vv.offsetTop + vv.height;
+  }
+  for (const el of Array.from(document.querySelectorAll("[data-tour-obstruction]"))) {
+    if ((target && el.contains(target)) || (card && el.contains(card))) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0 || r.top <= top + FULL_SCREEN_SLACK) continue;
+    if (r.top < bottom) bottom = r.top;
+  }
+  return { top, bottom };
+}
+
+/** The card's free space on `edge`, between the band's edge and the spotlight. */
+function room(edge: DockEdge, spot: DockRect, band: Band): number {
+  return edge === "bottom" ? band.bottom - (spot.top + spot.height) - GUTTER * 2 : spot.top - band.top - GUTTER * 2;
+}
+
+/**
+ * The edge away from the field: the bottom when the spotlight's centre is in the band's
+ * upper half, else the top. With a `previous` edge, it stays unless the card would have to
+ * cover the spotlight there (no flip on every keyboard animation frame).
+ */
+export function dockEdge(spot: DockRect, band: Band, previous: DockEdge | null, cardHeight: number): DockEdge {
+  const preferred: DockEdge = spot.top + spot.height / 2 < band.top + (band.bottom - band.top) / 2 ? "bottom" : "top";
+  if (!previous || previous === preferred) return preferred;
+  return room(previous, spot, band) >= Math.min(MIN_DOCK, cardHeight) ? previous : preferred;
+}
+
+/** The docked card's position: full-width with 8 px (safe-area aware) gutters, its height
+ *  capped to the free space so its body scrolls and its title and buttons show. */
+export function dockStyle(edge: DockEdge, spot: DockRect | null, band: Band): CSSProperties {
+  const vh = window.innerHeight;
+  const cap = spot ? Math.max(MIN_DOCK / 2, room(edge, spot, band)) : band.bottom - band.top - GUTTER * 2;
+  const base: CSSProperties = {
+    left: `max(${GUTTER}px, env(safe-area-inset-left))`,
+    right: `max(${GUTTER}px, env(safe-area-inset-right))`,
+    width: "auto",
+    maxWidth: "none",
+    maxHeight: cap,
+  };
+  if (edge === "top") {
+    return { ...base, top: band.top <= 0 ? `max(${GUTTER}px, env(safe-area-inset-top))` : band.top + GUTTER, bottom: "auto" };
+  }
+  const fromBottom = vh - band.bottom;
+  return {
+    ...base,
+    top: "auto",
+    bottom: fromBottom <= 0 ? `max(${GUTTER}px, env(safe-area-inset-bottom))` : fromBottom + GUTTER,
+  };
+}
+
+/** The target's nearest ancestor that scrolls vertically now (a sheet's body), or null. */
+export function scrollParent(el: Element): HTMLElement | null {
+  for (let node = el.parentElement; node && node !== document.body; node = node.parentElement) {
+    const { overflowY } = getComputedStyle(node);
+    if ((overflowY === "auto" || overflowY === "scroll") && node.scrollHeight > node.clientHeight) return node;
+  }
+  return null;
+}
+
+/**
+ * Scroll the field into the half of the band away from the card, through its nearest
+ * scrollable ancestor (the window only when there is none — the page behind a sheet never
+ * moves). A field already inside that half is left where it is. Returns the edge the card
+ * takes.
+ */
+export function scrollIntoFreeHalf(el: Element, card: Element | null, previous: DockEdge | null): DockEdge {
+  const r = el.getBoundingClientRect();
+  const band = readBand(el, card);
+  const edge = dockEdge(r, band, previous, card instanceof HTMLElement ? card.offsetHeight : MIN_DOCK);
+  const mid = band.top + (band.bottom - band.top) / 2;
+  const half = edge === "bottom" ? { top: band.top + GUTTER, bottom: mid } : { top: mid, bottom: band.bottom - GUTTER };
+  if (r.top >= half.top && r.top + r.height <= half.bottom) return edge;
+  // Centred in the half, or its top at the half's top when it is taller than the half.
+  const delta =
+    r.height > half.bottom - half.top ? r.top - half.top : r.top + r.height / 2 - (half.top + half.bottom) / 2;
+  const scroller = scrollParent(el);
+  if (scroller) scroller.scrollTop += delta;
+  // A field in a kit layer with nothing to scroll: the page behind it stays put.
+  else if (!el.closest("[data-kit-layer]")) window.scrollBy?.(0, delta);
+  return edge;
+}