@eifi1/ui-kit 0.4.0

package/dist/theme/chart-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/chart-palette.ts"],"sourcesContent":["// Chart colour system. Single source of truth lives in the design tokens\n// (:root / .dark in tokens.css): brand = indigo, money = teal/amber/purple,\n// chart-1..9 = Paul Tol \"Muted\" (CVD-safe across protan/deutan/tritan).\n// Returning CSS vars here makes every Recharts series theme-aware for free — the\n// SVG fill/stroke resolves --chart-N against the current light/dark token set.\n\nconst PALETTE_SIZE = 9;\n\n/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var. */\nexport function paletteFor(index: number): string {\n  return `var(--chart-${(index % PALETTE_SIZE) + 1})`;\n}\n\n/** Semantic money colours, theme-aware via tokens. Pair with +/- and arrow\n    cues at the call site so colour is never the only signal (CVD). */\nexport const CHART_COLORS = {\n  income: \"var(--money-income)\",\n  expense: \"var(--money-expense)\",\n  net: \"var(--money-net)\",\n  assigned: \"var(--brand)\",\n  activity: \"var(--money-expense)\",\n} as const;\n\n// ── Raw hex stops, by theme ────────────────────────────────────────────────\n// The heatmaps interpolate colours in JS (CSS vars can't be lerped), so they\n// need concrete hex per theme. Keep these in sync with the tokens.\nexport const PALETTE_HEX = {\n  light: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n  dark: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n} as const;\n\n/** A heatmap's interpolation stops for one theme. Open string fields so any\n    palette preset (not just the built-in default) can supply its own stops. */\nexport interface HeatStops {\n  neutral: string;\n  under: string;\n  over: string;\n  seqLow: string;\n  seqHigh: string;\n  empty: string;\n}\n\n/** Diverging (variance: under←0→over) and sequential (spending intensity)\n    heatmap stops, per theme. Teal = under/good, amber = over/spend = bad. */\nexport const HEATMAP_HEX = {\n  light: {\n    neutral: \"#f1f5f9\", // slate-100\n    under: \"#0f766e\", // teal-700\n    over: \"#b45309\", // amber-700\n    seqLow: \"#fef3c7\", // amber-100\n    seqHigh: \"#b45309\", // amber-700\n    empty: \"rgba(148,163,184,0.14)\",\n  },\n  dark: {\n    neutral: \"#334155\", // slate-700\n    under: \"#2dd4bf\", // teal-400\n    over: \"#fbbf24\", // amber-400\n    seqLow: \"#3f2d10\", // dim amber, sits just above slate-950\n    seqHigh: \"#fbbf24\", // amber-400\n    empty: \"rgba(148,163,184,0.10)\",\n  },\n} as const;\n\n/** Linear interpolate two #rrggbb hexes; `t` in [0,1]. Returns #rrggbb. */\nexport function lerpHex(a: string, b: string, t: number): string {\n  const pa = parseHex(a) ?? UNREADABLE;\n  const pb = parseHex(b) ?? UNREADABLE;\n  const c = (i: number) => Math.round(pa[i] + (pb[i] - pa[i]) * clamp01(t));\n  return `#${[c(0), c(1), c(2)].map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\n/** Pick a legible text colour (near-black / near-white) for a solid hex fill,\n    flipping by perceived luminance so cell/treemap labels keep contrast.\n\n    A fill this cannot read gets `currentColor` — inherit, i.e. whatever the\n    surrounding text already uses. That is the only answer that is right on both\n    themes, because an unreadable fill is usually a translucent one (`HEATMAP_HEX.*\n    .empty` is an `rgba()` string, and the variance heatmap does pass it here for any\n    category with zero assigned and positive activity — a refund). Picking a constant\n    instead is what produced the bug: `NaN > 0.6` is false, so the label came back\n    near-white on a near-white cell and the figure was invisible. */\nexport function textOn(hex: string): string {\n  const rgb = parseHex(hex);\n  if (!rgb) return \"currentColor\";\n  const [r, g, b] = rgb;\n  // Rec.601 luma; >0.6 → dark text, else light text.\n  const luma = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n  return luma > 0.6 ? \"#1a1a1a\" : \"#f8fafc\";\n}\n\n/** Mid-grey, for a stop {@link lerpHex} has to interpolate but cannot read. It has\n *  to return SOME valid colour, and a grey is the one that misleads least. */\nconst UNREADABLE: [number, number, number] = [0x80, 0x80, 0x80];\n\n/**\n * `#rgb` or `#rrggbb` to components, or **null** when it is neither.\n *\n * This used to `parseInt` whatever it was given and hand the NaNs on, and both\n * callers propagated them silently: {@link lerpHex} produced the literal string\n * `\"#nannannan\"`, and {@link textOn} computed `NaN > 0.6 === false` and returned the\n * LIGHT label colour.\n *\n * That is not hypothetical — a non-hex value ships in this very module.\n * `HEATMAP_HEX.*.empty` is an `rgba(…)` string, and the variance heatmap paints a\n * figure on an `empty` cell whenever a category has zero assigned and positive\n * activity (a refund). On the light theme the cell is near-white and the label came\n * back near-white: the number was there, and unreadable.\n */\nfunction parseHex(hex: string): [number, number, number] | null {\n  const h = hex.startsWith(\"#\") ? hex.slice(1) : hex;\n  const full =\n    h.length === 3\n      ? h\n          .split(\"\")\n          .map((c) => c + c)\n          .join(\"\")\n      : h;\n  if (!/^[0-9a-fA-F]{6}$/.test(full)) return null;\n  return [\n    parseInt(full.slice(0, 2), 16),\n    parseInt(full.slice(2, 4), 16),\n    parseInt(full.slice(4, 6), 16),\n  ];\n}\n\nfunction clamp01(t: number): number {\n  return t < 0 ? 0 : t > 1 ? 1 : t;\n}\n"],"mappings":"AAMA,MAAM,eAAe;AAGd,SAAS,WAAW,OAAuB;AAChD,SAAO,eAAgB,QAAQ,eAAgB,CAAC;AAClD;AAIO,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,UAAU;AAAA,EACV,UAAU;AACZ;AAKO,MAAM,cAAc;AAAA,EACzB,OAAO,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,EACzG,MAAM,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAC1G;AAeO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL,SAAS;AAAA;AAAA,IACT,OAAO;AAAA;AAAA,IACP,MAAM;AAAA;AAAA,IACN,QAAQ;AAAA;AAAA,IACR,SAAS;AAAA;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA;AAAA,IACT,OAAO;AAAA;AAAA,IACP,MAAM;AAAA;AAAA,IACN,QAAQ;AAAA;AAAA,IACR,SAAS;AAAA;AAAA,IACT,OAAO;AAAA,EACT;AACF;AAGO,SAAS,QAAQ,GAAW,GAAW,GAAmB;AAC/D,QAAM,KAAK,SAAS,CAAC,KAAK;AAC1B,QAAM,KAAK,SAAS,CAAC,KAAK;AAC1B,QAAM,IAAI,CAAC,MAAc,KAAK,MAAM,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC;AACxE,SAAO,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AACpF;AAYO,SAAS,OAAO,KAAqB;AAC1C,QAAM,MAAM,SAAS,GAAG;AACxB,MAAI,CAAC,IAAK,QAAO;AACjB,QAAM,CAAC,GAAG,GAAG,CAAC,IAAI;AAElB,QAAM,QAAQ,QAAQ,IAAI,QAAQ,IAAI,QAAQ,KAAK;AACnD,SAAO,OAAO,MAAM,YAAY;AAClC;AAIA,MAAM,aAAuC,CAAC,KAAM,KAAM,GAAI;AAgB9D,SAAS,SAAS,KAA8C;AAC9D,QAAM,IAAI,IAAI,WAAW,GAAG,IAAI,IAAI,MAAM,CAAC,IAAI;AAC/C,QAAM,OACJ,EAAE,WAAW,IACT,EACG,MAAM,EAAE,EACR,IAAI,CAAC,MAAM,IAAI,CAAC,EAChB,KAAK,EAAE,IACV;AACN,MAAI,CAAC,mBAAmB,KAAK,IAAI,EAAG,QAAO;AAC3C,SAAO;AAAA,IACL,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IAC7B,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,IAC7B,SAAS,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE;AAAA,EAC/B;AACF;AAEA,SAAS,QAAQ,GAAmB;AAClC,SAAO,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;AACjC;","names":[]}

package/dist/theme/palette-presets.d.ts

@@ -0,0 +1,39 @@
+import { HeatStops } from './chart-palette.js';
+
+interface TokenSet {
+    bgPage: string;
+    bgSurface: string;
+    bgSurface2: string;
+    border: string;
+    textPrimary: string;
+    textSecondary: string;
+    textMuted: string;
+    brand: string;
+    brandHover: string;
+    brandContrast: string;
+    moneyIncome: string;
+    moneyExpense: string;
+    moneyNet: string;
+    moneyNeutral: string;
+    chart: string[];
+    heat: HeatStops;
+}
+interface PalettePreset {
+    id: string;
+    name: string;
+    blurb: string;
+    light: TokenSet;
+    dark: TokenSet;
+}
+declare const DEFAULT_PRESET: PalettePreset;
+declare const ALTERNATIVE_PRESETS: PalettePreset[];
+declare const IMPRINT_PRESET: PalettePreset;
+declare const PALETTES: PalettePreset[];
+declare function presetById(id: string): PalettePreset;
+declare const TOKEN_VARS: readonly ["--bg-page", "--bg-surface", "--bg-surface-2", "--border", "--text-primary", "--text-secondary", "--text-muted", "--brand", "--brand-hover", "--brand-contrast", "--money-income", "--money-expense", "--money-net", "--money-neutral", "--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5", "--chart-6", "--chart-7", "--chart-8", "--chart-9"];
+/** Write a token set onto an element's inline style as CSS custom properties. */
+declare function applyTokenSet(el: HTMLElement, t: TokenSet): void;
+/** Remove all preset overrides so the tokens.css :root/.dark defaults take over. */
+declare function clearTokenSet(el: HTMLElement): void;
+
+export { ALTERNATIVE_PRESETS, DEFAULT_PRESET, IMPRINT_PRESET, PALETTES, type PalettePreset, TOKEN_VARS, type TokenSet, applyTokenSet, clearTokenSet, presetById };

package/dist/theme/palette-presets.js

@@ -0,0 +1,440 @@
+const DEFAULT_PRESET = {
+  id: "default",
+  name: "Default",
+  blurb: "Solar-dusk light \xB7 indigo-noir dark",
+  light: {
+    // Solar Dusk (light) surfaces, with the brand unified to indigo (see above).
+    bgPage: "#ede3cf",
+    bgSurface: "#f6ecd9",
+    bgSurface2: "#f3ead6",
+    border: "#e2d6bd",
+    textPrimary: "#463f33",
+    textSecondary: "#50493c",
+    textMuted: "#696153",
+    brand: "#4f46e5",
+    brandHover: "#4338ca",
+    brandContrast: "#ffffff",
+    moneyIncome: "#0b6650",
+    moneyExpense: "#9c6418",
+    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)"
+    }
+  },
+  dark: {
+    // Indigo Noir (dark)
+    bgPage: "#0e0f1c",
+    bgSurface: "#181a2c",
+    bgSurface2: "#21243a",
+    border: "#2e3252",
+    textPrimary: "#e6e8f4",
+    textSecondary: "#adafbe",
+    textMuted: "#8d90a0",
+    brand: "#8b93f8",
+    brandHover: "#aab1fb",
+    brandContrast: "#16182b",
+    moneyIncome: "#22c3b6",
+    // Amber-400 (#fbbf24) sat at OKLab L 0.84 while every other dark token lives
+    // at 0.68–0.74, so outflows outshouted the inflows they are paired with. Same
+    // hue and chroma, pulled to L 0.785 (dev#434). The heat stops below keep the
+    // brighter amber on purpose: a gradient endpoint is meant to be the loudest
+    // thing in its scale, and it is a fill, not a figure.
+    moneyExpense: "#e4b035",
+    moneyNet: "#b39aef",
+    moneyNeutral: "#9aa1bd",
+    chart: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"],
+    heat: {
+      neutral: "#363a5a",
+      under: "#22c3b6",
+      over: "#fbbf24",
+      seqLow: "#3a2c14",
+      seqHigh: "#fbbf24",
+      empty: "rgba(148,163,184,0.10)"
+    }
+  }
+};
+const ALTERNATIVE_PRESETS = [
+  {
+    id: "warm-paper",
+    name: "Warm Paper",
+    blurb: "Cream paper \xB7 warm charcoal",
+    light: {
+      bgPage: "#ece5d6",
+      bgSurface: "#f5efe3",
+      bgSurface2: "#efe9dc",
+      border: "#e2dcce",
+      textPrimary: "#2b2622",
+      textSecondary: "#4f4a44",
+      textMuted: "#68625b",
+      brand: "#9a5b34",
+      brandHover: "#824827",
+      brandContrast: "#fdf8f2",
+      moneyIncome: "#0e7490",
+      moneyExpense: "#8f3f0a",
+      moneyNet: "#7c4dab",
+      moneyNeutral: "#6b6258",
+      chart: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
+      heat: {
+        neutral: "#efe9dc",
+        under: "#0e7490",
+        over: "#b45309",
+        seqLow: "#fbeed2",
+        seqHigh: "#b45309",
+        empty: "rgba(148,163,184,0.14)"
+      }
+    },
+    dark: {
+      bgPage: "#211e1a",
+      bgSurface: "#2a2622",
+      bgSurface2: "#322d27",
+      border: "#3d372f",
+      textPrimary: "#e8e2d6",
+      textSecondary: "#bfb9af",
+      textMuted: "#9e998f",
+      brand: "#e0986a",
+      brandHover: "#ecae85",
+      brandContrast: "#2a1c10",
+      moneyIncome: "#4dd4c4",
+      moneyExpense: "#fbbf3a",
+      moneyNet: "#bfa0e0",
+      moneyNeutral: "#a39a8c",
+      chart: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#cf6488", "#cc78be"],
+      heat: {
+        neutral: "#3a352e",
+        under: "#4dd4c4",
+        over: "#fbbf3a",
+        seqLow: "#2c2014",
+        seqHigh: "#fbbf3a",
+        empty: "rgba(148,163,184,0.10)"
+      }
+    }
+  },
+  {
+    id: "nord-frost",
+    name: "Nord Frost",
+    blurb: "Cool snow \xB7 polar night",
+    light: {
+      bgPage: "#e2e7ef",
+      bgSurface: "#f0f3f8",
+      bgSurface2: "#e1e6ee",
+      border: "#d3dae6",
+      textPrimary: "#2e3440",
+      textSecondary: "#454b56",
+      textMuted: "#5e636e",
+      brand: "#3b6ea5",
+      brandHover: "#305a86",
+      brandContrast: "#ffffff",
+      moneyIncome: "#0f8060",
+      moneyExpense: "#b8431a",
+      moneyNet: "#6b4fa0",
+      moneyNeutral: "#5b6577",
+      chart: ["#3a6ea5", "#56b6c2", "#2f7d4f", "#cdb52f", "#d05f7a", "#9a3f93", "#4d4bbf", "#dd6a2c", "#7a8aa8"],
+      heat: {
+        neutral: "#e1e6ee",
+        under: "#0f8060",
+        over: "#b8431a",
+        seqLow: "#f0f3f7",
+        seqHigh: "#a14708",
+        empty: "rgba(148,163,184,0.14)"
+      }
+    },
+    dark: {
+      bgPage: "#242933",
+      bgSurface: "#2e3440",
+      bgSurface2: "#3b4252",
+      border: "#434c5e",
+      textPrimary: "#eceff4",
+      textSecondary: "#d4d7de",
+      textMuted: "#afb3bc",
+      brand: "#88c0d0",
+      brandHover: "#a3d4e0",
+      brandContrast: "#1c2027",
+      moneyIncome: "#4ecf9c",
+      moneyExpense: "#e8a24f",
+      moneyNet: "#caa0e0",
+      moneyNeutral: "#9aa5b8",
+      chart: ["#7fb4e6", "#5ec9d6", "#5cc483", "#dccb6b", "#e87e96", "#bd6fce", "#9389f2", "#ef8f4a", "#8693ad"],
+      heat: {
+        neutral: "#3b4252",
+        under: "#4ecf9c",
+        over: "#e8a24f",
+        seqLow: "#33373f",
+        seqHigh: "#e8a24f",
+        empty: "rgba(148,163,184,0.10)"
+      }
+    }
+  },
+  {
+    id: "indigo-noir",
+    name: "Indigo Noir",
+    blurb: "Crisp light \xB7 deep indigo",
+    light: {
+      bgPage: "#e8eaf2",
+      bgSurface: "#f6f7fb",
+      bgSurface2: "#eef1f8",
+      border: "#dadfeb",
+      textPrimary: "#1b1f2e",
+      textSecondary: "#494d5a",
+      textMuted: "#626572",
+      brand: "#4338ca",
+      brandHover: "#3730a3",
+      brandContrast: "#ffffff",
+      moneyIncome: "#0c6478",
+      moneyExpense: "#b45309",
+      moneyNet: "#7c3aed",
+      moneyNeutral: "#5b6478",
+      chart: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
+      heat: {
+        neutral: "#eef1f7",
+        under: "#0c6478",
+        over: "#b45309",
+        seqLow: "#fdeed4",
+        seqHigh: "#b45309",
+        empty: "rgba(148,163,184,0.14)"
+      }
+    },
+    dark: {
+      bgPage: "#0e0f1c",
+      bgSurface: "#181a2c",
+      bgSurface2: "#21243a",
+      border: "#2e3252",
+      textPrimary: "#e6e8f4",
+      textSecondary: "#adafbe",
+      textMuted: "#8d90a0",
+      brand: "#8b93f8",
+      brandHover: "#aab1fb",
+      brandContrast: "#16182b",
+      moneyIncome: "#22c3b6",
+      // Kept byte-identical to DEFAULT_PRESET.dark, which IS this preset (dev#434).
+      moneyExpense: "#e4b035",
+      moneyNet: "#b39aef",
+      moneyNeutral: "#9aa1bd",
+      chart: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"],
+      heat: {
+        neutral: "#363a5a",
+        under: "#22c3b6",
+        over: "#fbbf24",
+        seqLow: "#3a2c14",
+        seqHigh: "#fbbf24",
+        empty: "rgba(148,163,184,0.10)"
+      }
+    }
+  },
+  {
+    id: "solar-dusk",
+    name: "Solar Dusk",
+    blurb: "Solarized warmth, easy on the eyes",
+    light: {
+      bgPage: "#ede3cf",
+      bgSurface: "#f6ecd9",
+      bgSurface2: "#f3ead6",
+      border: "#e2d6bd",
+      textPrimary: "#463f33",
+      textSecondary: "#50493c",
+      textMuted: "#696153",
+      brand: "#2c6979",
+      brandHover: "#1f515f",
+      brandContrast: "#ffffff",
+      moneyIncome: "#0b6650",
+      moneyExpense: "#9c6418",
+      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)"
+      }
+    },
+    dark: {
+      bgPage: "#0e1a1f",
+      bgSurface: "#15272e",
+      bgSurface2: "#1d333c",
+      border: "#2a4750",
+      textPrimary: "#d6cdb8",
+      textSecondary: "#c2bdab",
+      textMuted: "#9c9d91",
+      brand: "#5fb8cc",
+      brandHover: "#82cfe0",
+      brandContrast: "#0a161a",
+      moneyIncome: "#22b884",
+      moneyExpense: "#f0b94e",
+      moneyNet: "#bfa0e0",
+      moneyNeutral: "#9aa3a0",
+      chart: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#c873c0"],
+      heat: {
+        neutral: "#26424b",
+        under: "#22b884",
+        over: "#f0b94e",
+        seqLow: "#1f3138",
+        seqHigh: "#f0b94e",
+        empty: "rgba(148,163,184,0.10)"
+      }
+    }
+  },
+  {
+    id: "zinc-mono",
+    name: "Zinc Mono",
+    blurb: "True-neutral chrome \xB7 data pops",
+    light: {
+      bgPage: "#ececec",
+      bgSurface: "#f7f7f7",
+      bgSurface2: "#f4f4f5",
+      border: "#e4e4e7",
+      textPrimary: "#18181b",
+      textSecondary: "#4e4e50",
+      textMuted: "#676769",
+      brand: "#1d4ed8",
+      brandHover: "#1e40af",
+      brandContrast: "#ffffff",
+      moneyIncome: "#0e7490",
+      moneyExpense: "#cf4310",
+      moneyNet: "#7c3aed",
+      moneyNeutral: "#52525b",
+      chart: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
+      heat: {
+        neutral: "#f4f4f5",
+        under: "#0e7490",
+        over: "#cf4310",
+        seqLow: "#fdeede",
+        seqHigh: "#cf4310",
+        empty: "rgba(148,163,184,0.14)"
+      }
+    },
+    dark: {
+      bgPage: "#09090b",
+      bgSurface: "#18181b",
+      bgSurface2: "#27272a",
+      border: "#3f3f46",
+      textPrimary: "#f4f4f5",
+      textSecondary: "#b2b2b3",
+      textMuted: "#929294",
+      brand: "#60a5fa",
+      brandHover: "#93c5fd",
+      brandContrast: "#0b1220",
+      moneyIncome: "#22d3ee",
+      moneyExpense: "#f97316",
+      moneyNet: "#c4b5fd",
+      moneyNeutral: "#a1a1aa",
+      chart: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"],
+      heat: {
+        neutral: "#3f3f46",
+        under: "#22d3ee",
+        over: "#f97316",
+        seqLow: "#3a2410",
+        seqHigh: "#f97316",
+        empty: "rgba(148,163,184,0.10)"
+      }
+    }
+  }
+];
+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"
+];
+const IMPRINT_PRESET = {
+  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 }
+};
+const PALETTES = [DEFAULT_PRESET, IMPRINT_PRESET];
+function presetById(id) {
+  return PALETTES.find((p) => p.id === id) ?? DEFAULT_PRESET;
+}
+const TOKEN_VARS = [
+  "--bg-page",
+  "--bg-surface",
+  "--bg-surface-2",
+  "--border",
+  "--text-primary",
+  "--text-secondary",
+  "--text-muted",
+  "--brand",
+  "--brand-hover",
+  "--brand-contrast",
+  "--money-income",
+  "--money-expense",
+  "--money-net",
+  "--money-neutral",
+  "--chart-1",
+  "--chart-2",
+  "--chart-3",
+  "--chart-4",
+  "--chart-5",
+  "--chart-6",
+  "--chart-7",
+  "--chart-8",
+  "--chart-9"
+];
+function applyTokenSet(el, t) {
+  el.style.setProperty("--bg-page", t.bgPage);
+  el.style.setProperty("--bg-surface", t.bgSurface);
+  el.style.setProperty("--bg-surface-2", t.bgSurface2);
+  el.style.setProperty("--border", t.border);
+  el.style.setProperty("--text-primary", t.textPrimary);
+  el.style.setProperty("--text-secondary", t.textSecondary);
+  el.style.setProperty("--text-muted", t.textMuted);
+  el.style.setProperty("--brand", t.brand);
+  el.style.setProperty("--brand-hover", t.brandHover);
+  el.style.setProperty("--brand-contrast", t.brandContrast);
+  el.style.setProperty("--money-income", t.moneyIncome);
+  el.style.setProperty("--money-expense", t.moneyExpense);
+  el.style.setProperty("--money-net", t.moneyNet);
+  el.style.setProperty("--money-neutral", t.moneyNeutral);
+  t.chart.forEach((c, i) => el.style.setProperty(`--chart-${i + 1}`, c));
+}
+function clearTokenSet(el) {
+  for (const v of TOKEN_VARS) el.style.removeProperty(v);
+}
+export {
+  ALTERNATIVE_PRESETS,
+  DEFAULT_PRESET,
+  IMPRINT_PRESET,
+  PALETTES,
+  TOKEN_VARS,
+  applyTokenSet,
+  clearTokenSet,
+  presetById
+};
+//# sourceMappingURL=palette-presets.js.map

package/dist/theme/palette-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/palette-presets.ts"],"sourcesContent":["// Appearance presets — the single source of truth for the \"palette switcher\"\n// (feedback #307). Each preset is a full set of design-token values for BOTH\n// light and dark, covering the page/surface backgrounds, the brand accent, the\n// semantic money trio and the 9-colour categorical chart palette, plus the\n// heatmap stops. A preset is applied at runtime by writing these as CSS custom\n// properties onto <html> (see palette-store.ts), which instantly re-skins every\n// token-driven surface and chart. The two heatmaps and the treemap interpolate\n// concrete hex in JS, so they read the same values from here via the hooks in\n// palette-store.\n//\n// The alternative presets below were designed + accessibility-vetted as a set\n// (each is CVD-safe across protan/deutan/tritan, money is never red/green, and\n// text/background contrast clears WCAG AA on both themes). To promote one to the\n// app-wide default, copy its values into the :root/.dark blocks in tokens.css\n// (the default preset here mirrors those exactly).\n\nimport type { HeatStops } from \"./chart-palette\";\n\nexport interface TokenSet {\n  // Backgrounds & chrome\n  bgPage: string;\n  bgSurface: string;\n  bgSurface2: string;\n  border: string;\n  textPrimary: string;\n  // The two quieter text roles. Derived per preset by blending `textPrimary` toward\n  // that preset's own surfaces until the contrast against the WORST of bgPage /\n  // bgSurface / bgSurface2 hits 7:1 and 4.8:1 — so both clear WCAG AA for normal text\n  // (4.5:1) on every surface they can land on, and both inherit the preset's warmth\n  // instead of importing a cool grey from Tailwind's palette.\n  textSecondary: string;\n  textMuted: string;\n  // Interactive brand accent\n  brand: string;\n  brandHover: string;\n  brandContrast: string;\n  // Semantic money (never red/green — CVD-safe, paired with +/- cues elsewhere)\n  moneyIncome: string;\n  moneyExpense: string;\n  moneyNet: string;\n  moneyNeutral: string;\n  // Categorical chart series (Paul Tol \"Muted\" by default — CVD-safe), exactly 9\n  chart: string[];\n  // Heatmap interpolation stops (variance diverging + spending sequential)\n  heat: HeatStops;\n}\n\nexport interface PalettePreset {\n  id: string;\n  name: string;\n  blurb: string;\n  light: TokenSet;\n  dark: TokenSet;\n}\n\n// The shipped default (feedback #328): SOLAR-DUSK warm light + INDIGO-NOIR deep\n// dark surfaces — the two curated presets the user picked per mode — but with a\n// SINGLE unified brand accent (indigo) across both modes rather than each\n// preset's own accent (the user asked for the brand accent to stay the same).\n// So the light block is Solar Dusk with its teal brand overridden to indigo, and\n// the dark block is Indigo Noir (already indigo). The money trio\n// (income/expense/net) drives the chart bars and stays palette-driven so those\n// semantic colours adapt to each mode's contrast (best practice — feedback #328).\nexport const DEFAULT_PRESET: PalettePreset = {\n  id: \"default\",\n  name: \"Default\",\n  blurb: \"Solar-dusk light · indigo-noir dark\",\n  light: {\n    // Solar Dusk (light) surfaces, with the brand unified to indigo (see above).\n    bgPage: \"#ede3cf\",\n    bgSurface: \"#f6ecd9\",\n    bgSurface2: \"#f3ead6\",\n    border: \"#e2d6bd\",\n    textPrimary: \"#463f33\",\n    textSecondary: \"#50493c\",\n    textMuted: \"#696153\",\n    brand: \"#4f46e5\",\n    brandHover: \"#4338ca\",\n    brandContrast: \"#ffffff\",\n    moneyIncome: \"#0b6650\",\n    moneyExpense: \"#9c6418\",\n    moneyNet: \"#7a4fa3\",\n    moneyNeutral: \"#6b6453\",\n    chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n    heat: {\n      neutral: \"#f1e7d2\",\n      under: \"#0b6650\",\n      over: \"#9c6418\",\n      seqLow: \"#f6ecd0\",\n      seqHigh: \"#9c6418\",\n      empty: \"rgba(148,163,184,0.14)\",\n    },\n  },\n  dark: {\n    // Indigo Noir (dark)\n    bgPage: \"#0e0f1c\",\n    bgSurface: \"#181a2c\",\n    bgSurface2: \"#21243a\",\n    border: \"#2e3252\",\n    textPrimary: \"#e6e8f4\",\n    textSecondary: \"#adafbe\",\n    textMuted: \"#8d90a0\",\n    brand: \"#8b93f8\",\n    brandHover: \"#aab1fb\",\n    brandContrast: \"#16182b\",\n    moneyIncome: \"#22c3b6\",\n    // Amber-400 (#fbbf24) sat at OKLab L 0.84 while every other dark token lives\n    // at 0.68–0.74, so outflows outshouted the inflows they are paired with. Same\n    // hue and chroma, pulled to L 0.785 (dev#434). The heat stops below keep the\n    // brighter amber on purpose: a gradient endpoint is meant to be the loudest\n    // thing in its scale, and it is a fill, not a figure.\n    moneyExpense: \"#e4b035\",\n    moneyNet: \"#b39aef\",\n    moneyNeutral: \"#9aa1bd\",\n    chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n    heat: {\n      neutral: \"#363a5a\",\n      under: \"#22c3b6\",\n      over: \"#fbbf24\",\n      seqLow: \"#3a2c14\",\n      seqHigh: \"#fbbf24\",\n      empty: \"rgba(148,163,184,0.10)\",\n    },\n  },\n};\n\n// Vetted alternatives to preview (CVD-safe, WCAG-AA on both themes).\nexport const ALTERNATIVE_PRESETS: PalettePreset[] = [\n  {\n    id: \"warm-paper\",\n    name: \"Warm Paper\",\n    blurb: \"Cream paper · warm charcoal\",\n    light: {\n      bgPage: \"#ece5d6\",\n      bgSurface: \"#f5efe3\",\n      bgSurface2: \"#efe9dc\",\n      border: \"#e2dcce\",\n      textPrimary: \"#2b2622\",\n      textSecondary: \"#4f4a44\",\n      textMuted: \"#68625b\",\n      brand: \"#9a5b34\",\n      brandHover: \"#824827\",\n      brandContrast: \"#fdf8f2\",\n      moneyIncome: \"#0e7490\",\n      moneyExpense: \"#8f3f0a\",\n      moneyNet: \"#7c4dab\",\n      moneyNeutral: \"#6b6258\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#efe9dc\",\n        under: \"#0e7490\",\n        over: \"#b45309\",\n        seqLow: \"#fbeed2\",\n        seqHigh: \"#b45309\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#211e1a\",\n      bgSurface: \"#2a2622\",\n      bgSurface2: \"#322d27\",\n      border: \"#3d372f\",\n      textPrimary: \"#e8e2d6\",\n      textSecondary: \"#bfb9af\",\n      textMuted: \"#9e998f\",\n      brand: \"#e0986a\",\n      brandHover: \"#ecae85\",\n      brandContrast: \"#2a1c10\",\n      moneyIncome: \"#4dd4c4\",\n      moneyExpense: \"#fbbf3a\",\n      moneyNet: \"#bfa0e0\",\n      moneyNeutral: \"#a39a8c\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#cf6488\", \"#cc78be\"],\n      heat: {\n        neutral: \"#3a352e\",\n        under: \"#4dd4c4\",\n        over: \"#fbbf3a\",\n        seqLow: \"#2c2014\",\n        seqHigh: \"#fbbf3a\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"nord-frost\",\n    name: \"Nord Frost\",\n    blurb: \"Cool snow · polar night\",\n    light: {\n      bgPage: \"#e2e7ef\",\n      bgSurface: \"#f0f3f8\",\n      bgSurface2: \"#e1e6ee\",\n      border: \"#d3dae6\",\n      textPrimary: \"#2e3440\",\n      textSecondary: \"#454b56\",\n      textMuted: \"#5e636e\",\n      brand: \"#3b6ea5\",\n      brandHover: \"#305a86\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0f8060\",\n      moneyExpense: \"#b8431a\",\n      moneyNet: \"#6b4fa0\",\n      moneyNeutral: \"#5b6577\",\n      chart: [\"#3a6ea5\", \"#56b6c2\", \"#2f7d4f\", \"#cdb52f\", \"#d05f7a\", \"#9a3f93\", \"#4d4bbf\", \"#dd6a2c\", \"#7a8aa8\"],\n      heat: {\n        neutral: \"#e1e6ee\",\n        under: \"#0f8060\",\n        over: \"#b8431a\",\n        seqLow: \"#f0f3f7\",\n        seqHigh: \"#a14708\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#242933\",\n      bgSurface: \"#2e3440\",\n      bgSurface2: \"#3b4252\",\n      border: \"#434c5e\",\n      textPrimary: \"#eceff4\",\n      textSecondary: \"#d4d7de\",\n      textMuted: \"#afb3bc\",\n      brand: \"#88c0d0\",\n      brandHover: \"#a3d4e0\",\n      brandContrast: \"#1c2027\",\n      moneyIncome: \"#4ecf9c\",\n      moneyExpense: \"#e8a24f\",\n      moneyNet: \"#caa0e0\",\n      moneyNeutral: \"#9aa5b8\",\n      chart: [\"#7fb4e6\", \"#5ec9d6\", \"#5cc483\", \"#dccb6b\", \"#e87e96\", \"#bd6fce\", \"#9389f2\", \"#ef8f4a\", \"#8693ad\"],\n      heat: {\n        neutral: \"#3b4252\",\n        under: \"#4ecf9c\",\n        over: \"#e8a24f\",\n        seqLow: \"#33373f\",\n        seqHigh: \"#e8a24f\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"indigo-noir\",\n    name: \"Indigo Noir\",\n    blurb: \"Crisp light · deep indigo\",\n    light: {\n      bgPage: \"#e8eaf2\",\n      bgSurface: \"#f6f7fb\",\n      bgSurface2: \"#eef1f8\",\n      border: \"#dadfeb\",\n      textPrimary: \"#1b1f2e\",\n      textSecondary: \"#494d5a\",\n      textMuted: \"#626572\",\n      brand: \"#4338ca\",\n      brandHover: \"#3730a3\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0c6478\",\n      moneyExpense: \"#b45309\",\n      moneyNet: \"#7c3aed\",\n      moneyNeutral: \"#5b6478\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#eef1f7\",\n        under: \"#0c6478\",\n        over: \"#b45309\",\n        seqLow: \"#fdeed4\",\n        seqHigh: \"#b45309\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#0e0f1c\",\n      bgSurface: \"#181a2c\",\n      bgSurface2: \"#21243a\",\n      border: \"#2e3252\",\n      textPrimary: \"#e6e8f4\",\n      textSecondary: \"#adafbe\",\n      textMuted: \"#8d90a0\",\n      brand: \"#8b93f8\",\n      brandHover: \"#aab1fb\",\n      brandContrast: \"#16182b\",\n      moneyIncome: \"#22c3b6\",\n      // Kept byte-identical to DEFAULT_PRESET.dark, which IS this preset (dev#434).\n      moneyExpense: \"#e4b035\",\n      moneyNet: \"#b39aef\",\n      moneyNeutral: \"#9aa1bd\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n      heat: {\n        neutral: \"#363a5a\",\n        under: \"#22c3b6\",\n        over: \"#fbbf24\",\n        seqLow: \"#3a2c14\",\n        seqHigh: \"#fbbf24\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"solar-dusk\",\n    name: \"Solar Dusk\",\n    blurb: \"Solarized warmth, easy on the eyes\",\n    light: {\n      bgPage: \"#ede3cf\",\n      bgSurface: \"#f6ecd9\",\n      bgSurface2: \"#f3ead6\",\n      border: \"#e2d6bd\",\n      textPrimary: \"#463f33\",\n      textSecondary: \"#50493c\",\n      textMuted: \"#696153\",\n      brand: \"#2c6979\",\n      brandHover: \"#1f515f\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0b6650\",\n      moneyExpense: \"#9c6418\",\n      moneyNet: \"#7a4fa3\",\n      moneyNeutral: \"#6b6453\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#f1e7d2\",\n        under: \"#0b6650\",\n        over: \"#9c6418\",\n        seqLow: \"#f6ecd0\",\n        seqHigh: \"#9c6418\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#0e1a1f\",\n      bgSurface: \"#15272e\",\n      bgSurface2: \"#1d333c\",\n      border: \"#2a4750\",\n      textPrimary: \"#d6cdb8\",\n      textSecondary: \"#c2bdab\",\n      textMuted: \"#9c9d91\",\n      brand: \"#5fb8cc\",\n      brandHover: \"#82cfe0\",\n      brandContrast: \"#0a161a\",\n      moneyIncome: \"#22b884\",\n      moneyExpense: \"#f0b94e\",\n      moneyNet: \"#bfa0e0\",\n      moneyNeutral: \"#9aa3a0\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#c873c0\"],\n      heat: {\n        neutral: \"#26424b\",\n        under: \"#22b884\",\n        over: \"#f0b94e\",\n        seqLow: \"#1f3138\",\n        seqHigh: \"#f0b94e\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"zinc-mono\",\n    name: \"Zinc Mono\",\n    blurb: \"True-neutral chrome · data pops\",\n    light: {\n      bgPage: \"#ececec\",\n      bgSurface: \"#f7f7f7\",\n      bgSurface2: \"#f4f4f5\",\n      border: \"#e4e4e7\",\n      textPrimary: \"#18181b\",\n      textSecondary: \"#4e4e50\",\n      textMuted: \"#676769\",\n      brand: \"#1d4ed8\",\n      brandHover: \"#1e40af\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0e7490\",\n      moneyExpense: \"#cf4310\",\n      moneyNet: \"#7c3aed\",\n      moneyNeutral: \"#52525b\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#f4f4f5\",\n        under: \"#0e7490\",\n        over: \"#cf4310\",\n        seqLow: \"#fdeede\",\n        seqHigh: \"#cf4310\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#09090b\",\n      bgSurface: \"#18181b\",\n      bgSurface2: \"#27272a\",\n      border: \"#3f3f46\",\n      textPrimary: \"#f4f4f5\",\n      textSecondary: \"#b2b2b3\",\n      textMuted: \"#929294\",\n      brand: \"#60a5fa\",\n      brandHover: \"#93c5fd\",\n      brandContrast: \"#0b1220\",\n      moneyIncome: \"#22d3ee\",\n      moneyExpense: \"#f97316\",\n      moneyNet: \"#c4b5fd\",\n      moneyNeutral: \"#a1a1aa\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n      heat: {\n        neutral: \"#3f3f46\",\n        under: \"#22d3ee\",\n        over: \"#f97316\",\n        seqLow: \"#3a2410\",\n        seqHigh: \"#f97316\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n];\n\n// ── \"Imprint\" chart hues (feedback #119) ──────────────────────────────────────\n// anyplot's categorical palette (https://anyplot.ai/palette), by a colleague of\n// Marcel's. 8 hues + an amber semantic anchor, derived from Wong 2011 by a\n// Petroff-style max-min ΔE search in CAM02-UCS with Machado 2009 CVD simulation —\n// the same lineage as our default Paul Tol \"Muted\", one generation on, and tuned\n// for exactly the warm cream paper our light theme uses.\n//\n// This preset is DEFAULT_PRESET with ONLY the 9 categorical chart hues swapped;\n// surfaces, brand and the semantic money trio stay put, because those were their\n// own deliberate decisions (#307/#328) and are not what the palette is for. The\n// heatmap stops likewise stay teal/amber: they encode under/over, and imprint's\n// own diverging ramp is red↔blue, which would fight the money semantics.\n//\n// Measured on our surfaces (CIEDE2000, Machado severity-100, 8 like-for-like\n// slots on the cream light surface #f6ecd9) — neither palette dominates:\n//   Paul Tol Muted  min-contrast 1.38 · worst-CVD ΔE00 11.8 · normal ΔE00 16.1\n//   imprint         min-contrast 1.95 · worst-CVD ΔE00  7.2 · normal ΔE00 22.2\n// i.e. imprint is punchier and has no near-invisible pale slot (Tol's #88ccee\n// sits at 1.5:1 on cream), while Tol separates better under colour-vision\n// deficiency. So this ships as a CHOICE, not as a new default.\n//\n// The dark set keeps imprint's hues verbatim except matte-red and rose, whose\n// lightness is lifted (oklch L 0.50→0.55) because verbatim they land at 2.67:1\n// and 2.76:1 on our deep-indigo dark surface — under WCAG 2.1 SC 1.4.11's 3:1\n// non-text minimum. Lifted they clear it at 3.30:1 / 3.28:1. anyplot documents\n// the same shortfall on their own dark ground and answers it with a stroke halo;\n// lifting keeps the fix in the token layer instead of every chart component.\nconst IMPRINT_HUES_LIGHT = [\n  \"#009E73\", // brand green   — first series\n  \"#C475FD\", // lavender      — creative\n  \"#4467A3\", // blue          — cool / info\n  \"#BD8233\", // ochre         — earth / commodity\n  \"#AE3030\", // matte red     — bad / loss / error\n  \"#2ABCCD\", // cyan          — sky / tech-cool\n  \"#954477\", // rose          — wellness / health\n  \"#99B314\", // lime          — growth / nature\n  \"#DDCC77\", // amber         — anyplot's semantic anchor, used here as slot 9\n];\nconst IMPRINT_HUES_DARK = [\n  \"#009E73\",\n  \"#C475FD\",\n  \"#4467A3\",\n  \"#BD8233\",\n  \"#BF413E\", // matte red, L-lifted for our dark surface\n  \"#2ABCCD\",\n  \"#A25083\", // rose, L-lifted for our dark surface\n  \"#99B314\",\n  \"#DDCC77\",\n];\n\nexport const IMPRINT_PRESET: PalettePreset = {\n  id: \"imprint\",\n  name: \"Imprint\",\n  blurb: \"Colourblind-safe chart hues by anyplot.ai\",\n  light: { ...DEFAULT_PRESET.light, chart: IMPRINT_HUES_LIGHT },\n  dark: { ...DEFAULT_PRESET.dark, chart: IMPRINT_HUES_DARK },\n};\n\n// The full-theme switcher from #307 stayed retired (feedback #328) — the default\n// is still the single source of truth for surfaces, brand and money, and\n// ALTERNATIVE_PRESETS above remains a reference bank only. What IS selectable is\n// the categorical chart ramp (feedback #119), so these two presets are the live\n// set; presetById falls back to the default for any stale persisted id.\nexport const PALETTES: PalettePreset[] = [DEFAULT_PRESET, IMPRINT_PRESET];\n\nexport function presetById(id: string): PalettePreset {\n  return PALETTES.find((p) => p.id === id) ?? DEFAULT_PRESET;\n}\n\n// The CSS custom properties a preset writes onto <html>. Also used to clear the\n// overrides when returning to the default.\nexport const TOKEN_VARS = [\n  \"--bg-page\",\n  \"--bg-surface\",\n  \"--bg-surface-2\",\n  \"--border\",\n  \"--text-primary\",\n  \"--text-secondary\",\n  \"--text-muted\",\n  \"--brand\",\n  \"--brand-hover\",\n  \"--brand-contrast\",\n  \"--money-income\",\n  \"--money-expense\",\n  \"--money-net\",\n  \"--money-neutral\",\n  \"--chart-1\",\n  \"--chart-2\",\n  \"--chart-3\",\n  \"--chart-4\",\n  \"--chart-5\",\n  \"--chart-6\",\n  \"--chart-7\",\n  \"--chart-8\",\n  \"--chart-9\",\n] as const;\n\n/** Write a token set onto an element's inline style as CSS custom properties. */\nexport function applyTokenSet(el: HTMLElement, t: TokenSet): void {\n  el.style.setProperty(\"--bg-page\", t.bgPage);\n  el.style.setProperty(\"--bg-surface\", t.bgSurface);\n  el.style.setProperty(\"--bg-surface-2\", t.bgSurface2);\n  el.style.setProperty(\"--border\", t.border);\n  el.style.setProperty(\"--text-primary\", t.textPrimary);\n  el.style.setProperty(\"--text-secondary\", t.textSecondary);\n  el.style.setProperty(\"--text-muted\", t.textMuted);\n  el.style.setProperty(\"--brand\", t.brand);\n  el.style.setProperty(\"--brand-hover\", t.brandHover);\n  el.style.setProperty(\"--brand-contrast\", t.brandContrast);\n  el.style.setProperty(\"--money-income\", t.moneyIncome);\n  el.style.setProperty(\"--money-expense\", t.moneyExpense);\n  el.style.setProperty(\"--money-net\", t.moneyNet);\n  el.style.setProperty(\"--money-neutral\", t.moneyNeutral);\n  t.chart.forEach((c, i) => el.style.setProperty(`--chart-${i + 1}`, c));\n}\n\n/** Remove all preset overrides so the tokens.css :root/.dark defaults take over. */\nexport function clearTokenSet(el: HTMLElement): void {\n  for (const v of TOKEN_VARS) el.style.removeProperty(v);\n}\n"],"mappings":"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","names":[]}

package/dist/theme/palette-store.d.ts

@@ -0,0 +1,45 @@
+import * as zustand_middleware from 'zustand/middleware';
+import { UseBoundStore, StoreApi } from 'zustand';
+import { HeatStops } from './chart-palette.js';
+import { TokenSet } from './palette-presets.js';
+import { ThemeState, ThemeMode } from './theme-store.js';
+
+/**
+ * Pre-hydration counterpart to `applyPersistedTheme`: read the palette id
+ * persisted under `storageKey` straight from localStorage and apply that preset's
+ * tokens for the given resolved `mode` to <html>, BEFORE React mounts (no flash of
+ * the default palette). Falls back to the default preset for missing/malformed
+ * state, so an app entrypoint never re-types the persist envelope.
+ */
+declare function applyPersistedPalette(storageKey: string, mode: ThemeMode): void;
+interface PaletteState {
+    id: string;
+    setId: (id: string) => void;
+}
+/**
+ * Build a palette store bound to a consumer-supplied localStorage key, wired to
+ * that app's theme store (for the active light/dark mode). Returns the palette
+ * hook plus the effect + selector hooks that read the active preset's tokens.
+ */
+declare function createPaletteStore(storageKey: string, useTheme: UseBoundStore<StoreApi<ThemeState>>): {
+    usePalette: UseBoundStore<Omit<StoreApi<PaletteState>, "setState" | "persist"> & {
+        setState(partial: PaletteState | Partial<PaletteState> | ((state: PaletteState) => PaletteState | Partial<PaletteState>), replace?: false | undefined): unknown;
+        setState(state: PaletteState | ((state: PaletteState) => PaletteState), replace: true): unknown;
+        persist: {
+            setOptions: (options: Partial<zustand_middleware.PersistOptions<PaletteState, PaletteState, unknown>>) => void;
+            clearStorage: () => void;
+            rehydrate: () => Promise<void> | void;
+            hasHydrated: () => boolean;
+            onHydrate: (fn: (state: PaletteState) => void) => () => void;
+            onFinishHydration: (fn: (state: PaletteState) => void) => () => void;
+            getOptions: () => Partial<zustand_middleware.PersistOptions<PaletteState, PaletteState, unknown>>;
+        };
+    }>;
+    useApplyPalette: () => void;
+    useActiveTokenSet: () => TokenSet;
+    useChartHex: () => string[];
+    useHeatStops: () => HeatStops;
+};
+type PaletteStore = ReturnType<typeof createPaletteStore>;
+
+export { type PaletteStore, applyPersistedPalette, createPaletteStore };

package/dist/theme/palette-store.js

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { logger } from "../lib/logger.js";
+import { applyTokenSet, DEFAULT_PRESET, presetById } from "./palette-presets.js";
+function applyPersistedPalette(storageKey, mode) {
+  let id = DEFAULT_PRESET.id;
+  try {
+    const blob = JSON.parse(localStorage.getItem(storageKey) ?? "{}");
+    if (blob.state?.id) id = blob.state.id;
+  } catch {
+  }
+  applyTokenSet(document.documentElement, presetById(id)[mode]);
+}
+function createPaletteStore(storageKey, useTheme) {
+  const usePalette = create()(
+    logger(
+      persist(
+        (set) => ({
+          id: DEFAULT_PRESET.id,
+          setId: (id) => set({ id })
+        }),
+        { name: storageKey, version: 1 }
+      ),
+      "palette"
+    )
+  );
+  function useApplyPalette() {
+    const id = usePalette((s) => s.id);
+    const mode = useTheme((s) => s.mode);
+    useEffect(() => {
+      applyTokenSet(document.documentElement, presetById(id)[mode]);
+    }, [id, mode]);
+  }
+  function useActiveTokenSet() {
+    const id = usePalette((s) => s.id);
+    const mode = useTheme((s) => s.mode);
+    return presetById(id)[mode];
+  }
+  function useChartHex() {
+    return useActiveTokenSet().chart;
+  }
+  function useHeatStops() {
+    return useActiveTokenSet().heat;
+  }
+  return { usePalette, useApplyPalette, useActiveTokenSet, useChartHex, useHeatStops };
+}
+export {
+  applyPersistedPalette,
+  createPaletteStore
+};
+//# sourceMappingURL=palette-store.js.map