@eifi1/ui-kit 0.51.7 → 0.53.0

package/dist/sync.d.ts

@@ -1,6 +1,6 @@
-export { createSyncDb, rowByPk, SYNC_DB_PK_INDEX, SYNC_DB_STORES } from "./sync/db.js";
+export { createSyncDb, rowByPk, SYNC_DB_PK_INDEX } from "./sync/db.js";
 export type { CreateSyncDbOptions, OutboxChange, OutboxStatus, SyncDb, SyncDbUpgrade, SyncedRow, SyncMetaEntry, } from "./sync/db.js";
-export { createSyncEngine, DEFAULT_HOLD_CODES, DEFAULT_SYNC_BACKOFF_MS, releaseSyncEngine, syncEngineFor, } from "./sync/engine.js";
+export { createSyncEngine, DEFAULT_HOLD_CODES, releaseSyncEngine, syncEngineFor } from "./sync/engine.js";
 export type { SyncCounts, SyncEngine, SyncEngineOptions, SyncEngineState, SyncRoundResult, SyncStep, SyncStepContext, SyncStepResult, } from "./sync/engine.js";
 export { useSyncQuery, useSyncStatus, useSyncWorker } from "./sync/hooks.js";
 export type { SyncPageCursor, SyncRefusalBody, SyncRejectionBody, SyncRequestBody, SyncResponseBody, SyncWireChange, } from "./sync/wire.js";

package/dist/sync.js

@@ -1,19 +1,11 @@
 "use client";
-import { createSyncDb, rowByPk, SYNC_DB_PK_INDEX, SYNC_DB_STORES } from "./sync/db.js";
-import {
-  createSyncEngine,
-  DEFAULT_HOLD_CODES,
-  DEFAULT_SYNC_BACKOFF_MS,
-  releaseSyncEngine,
-  syncEngineFor
-} from "./sync/engine.js";
+import { createSyncDb, rowByPk, SYNC_DB_PK_INDEX } from "./sync/db.js";
+import { createSyncEngine, DEFAULT_HOLD_CODES, releaseSyncEngine, syncEngineFor } from "./sync/engine.js";
 import { useSyncQuery, useSyncStatus, useSyncWorker } from "./sync/hooks.js";
 import { isOfflineError, readLocalFirst, stampAfter, uuid5, writeLocalFirst } from "./offline/local-first.js";
 export {
   DEFAULT_HOLD_CODES,
-  DEFAULT_SYNC_BACKOFF_MS,
   SYNC_DB_PK_INDEX,
-  SYNC_DB_STORES,
   createSyncDb,
   createSyncEngine,
   isOfflineError,

package/dist/sync.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/sync.ts"],"sourcesContent":["// `@eifi1/ui-kit/sync` — local-first phase 3 (docs/local-first-harmonization.md §2.3, 0.46):\n// the sync engine on a Dexie copy, its worker and status hooks, and the live read of the copy.\n//\n// The only entry point that imports `dexie` — an optional peer for that reason. It never loads\n// `/offline`'s TanStack and idb-keyval peers: the leaf utilities both entries export live in\n// one module of their own (src/offline/local-first.ts). NOT re-exported from the main barrel.\nexport { createSyncDb, rowByPk, SYNC_DB_PK_INDEX, SYNC_DB_STORES } from \"./sync/db\";\nexport type {\n  CreateSyncDbOptions,\n  OutboxChange,\n  OutboxStatus,\n  SyncDb,\n  SyncDbUpgrade,\n  SyncedRow,\n  SyncMetaEntry,\n} from \"./sync/db\";\nexport {\n  createSyncEngine,\n  DEFAULT_HOLD_CODES,\n  DEFAULT_SYNC_BACKOFF_MS,\n  releaseSyncEngine,\n  syncEngineFor,\n} from \"./sync/engine\";\nexport type {\n  SyncCounts,\n  SyncEngine,\n  SyncEngineOptions,\n  SyncEngineState,\n  SyncRoundResult,\n  SyncStep,\n  SyncStepContext,\n  SyncStepResult,\n} from \"./sync/engine\";\nexport { useSyncQuery, useSyncStatus, useSyncWorker } from \"./sync/hooks\";\nexport type {\n  SyncPageCursor,\n  SyncRefusalBody,\n  SyncRejectionBody,\n  SyncRequestBody,\n  SyncResponseBody,\n  SyncWireChange,\n} from \"./sync/wire\";\nexport { isOfflineError, readLocalFirst, stampAfter, uuid5, writeLocalFirst } from \"./offline/local-first\";\n"],"mappings":";AAMA,SAAS,cAAc,SAAS,kBAAkB,sBAAsB;AAUxE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAWP,SAAS,cAAc,eAAe,qBAAqB;AAS3D,SAAS,gBAAgB,gBAAgB,YAAY,OAAO,uBAAuB;","names":[]}
+{"version":3,"sources":["../src/sync.ts"],"sourcesContent":["// `@eifi1/ui-kit/sync` — local-first phase 3 (docs/local-first-harmonization.md §2.3, 0.46):\n// the sync engine on a Dexie copy, its worker and status hooks, and the live read of the copy.\n//\n// The only entry point that imports `dexie` — an optional peer for that reason. It never loads\n// `/offline`'s TanStack and idb-keyval peers: the leaf utilities both entries export live in\n// one module of their own (src/offline/local-first.ts). NOT re-exported from the main barrel.\nexport { createSyncDb, rowByPk, SYNC_DB_PK_INDEX } from \"./sync/db\";\nexport type {\n  CreateSyncDbOptions,\n  OutboxChange,\n  OutboxStatus,\n  SyncDb,\n  SyncDbUpgrade,\n  SyncedRow,\n  SyncMetaEntry,\n} from \"./sync/db\";\nexport { createSyncEngine, DEFAULT_HOLD_CODES, releaseSyncEngine, syncEngineFor } from \"./sync/engine\";\nexport type {\n  SyncCounts,\n  SyncEngine,\n  SyncEngineOptions,\n  SyncEngineState,\n  SyncRoundResult,\n  SyncStep,\n  SyncStepContext,\n  SyncStepResult,\n} from \"./sync/engine\";\nexport { useSyncQuery, useSyncStatus, useSyncWorker } from \"./sync/hooks\";\nexport type {\n  SyncPageCursor,\n  SyncRefusalBody,\n  SyncRejectionBody,\n  SyncRequestBody,\n  SyncResponseBody,\n  SyncWireChange,\n} from \"./sync/wire\";\nexport { isOfflineError, readLocalFirst, stampAfter, uuid5, writeLocalFirst } from \"./offline/local-first\";\n"],"mappings":";AAMA,SAAS,cAAc,SAAS,wBAAwB;AAUxD,SAAS,kBAAkB,oBAAoB,mBAAmB,qBAAqB;AAWvF,SAAS,cAAc,eAAe,qBAAqB;AAS3D,SAAS,gBAAgB,gBAAgB,YAAY,OAAO,uBAAuB;","names":[]}

package/dist/testing/css-variables.js

@@ -1,4 +1,5 @@
 "use client";
+import { themeBlocks } from "../eslint/role-utilities.js";
 import { KIT_NAMES, TAILWIND_THEME_NAMES } from "./css-variables.generated.js";
 const KIT_CSS_VARIABLES = new Set(KIT_NAMES.split(" "));
 const TAILWIND_THEME = new Set(TAILWIND_THEME_NAMES.split(" "));
@@ -11,14 +12,8 @@ function stripComments(text, isCss) {
 }
 function withoutInlineTheme(css) {
   let out = css;
-  for (const m of css.matchAll(/@theme\b[^{;]*\binline\b[^{;]*\{/g)) {
-    let depth = 0;
-    let end = m.index + m[0].length - 1;
-    for (; end < css.length; end++) {
-      if (css[end] === "{") depth++;
-      else if (css[end] === "}" && --depth === 0) break;
-    }
-    out = out.slice(0, m.index) + css.slice(m.index, end + 1).replace(/[^\n]/g, " ") + out.slice(end + 1);
+  for (const { start, end } of themeBlocks(css, { inline: true })) {
+    out = out.slice(0, start) + out.slice(start, end).replace(/[^\n]/g, " ") + out.slice(end);
   }
   return out;
 }

package/dist/testing/css-variables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/testing/css-variables.ts"],"sourcesContent":["import { KIT_NAMES, TAILWIND_THEME_NAMES } from \"./css-variables.generated\";\n\n/**\n * The guard against an undeclared CSS custom property (0.33,\n * docs/colour-roles-harmonization.md §8, §12.5).\n *\n * A `var(--name)` with no fallback, where nothing declares `--name`, makes the whole\n * declaration invalid at computed-value time: `fill` inherits, `color` inherits, a\n * background goes transparent. Kurvenschmiede's control diagram painted\n * `fill-[var(--surface)]` — a token that never existed (the kit's is `--bg-surface`) —\n * and drew black boxes on a public page. The class compiled, the build passed, the type\n * checker had no opinion, and nothing in any suite noticed. This is the check that\n * notices, run from an app's own test over the source texts the app collects.\n *\n * Browser-safe on purpose, like the rest of the kit: it takes TEXTS, not paths, so an app\n * reads its files however its setup allows (`import.meta.glob` with `?raw`, or `node:fs`)\n * and the kit carries no `node:fs`.\n */\n\n/** Every custom property the installed kit declares or publishes to apps.\n *\n *  Generated from `tokens.css` when the kit is built (scripts/gen-kit-css-variables.mjs),\n *  so it is always the installed version's, and an app never searches `node_modules`.\n *  It leaves out two kinds of name on purpose:\n *  - a name declared only in an `@theme inline` block (`--text-color-muted`,\n *    `--background-color-surface`): Tailwind emits no variable for it, so\n *    `var(--text-color-muted)` would pass a guard that counted it and paint nothing;\n *  - AppShell's measured `--app-nav-h`, which exists only while an AppShell is mounted —\n *    on a landing, legal, sign-in or pay page it is undefined. Read it with a fallback,\n *    `var(--app-nav-h,0px)`, as every kit read does.\n *  Everything `applyTokenSet` and More contrast write on `<html>` is in, through the\n *  stylesheet's `:root` / `.dark` mirror. Component internals (`--slider-fill`, `--fp-*`,\n *  `--icon-button-tone`, `--label-strip-edge`) are not: an app that reads one depends on\n *  the kit's internals, and the guard says so. */\nexport const KIT_CSS_VARIABLES: ReadonlySet<string> = new Set(KIT_NAMES.split(\" \"));\n\n/** Tailwind's own theme variables (`--color-rose-500`, `--spacing`, `--text-sm` …), from\n *  the `tailwindcss/theme.css` the kit builds with. Tailwind emits one when a scanned file\n *  names it, so a `var()` of it resolves. */\nconst TAILWIND_THEME: ReadonlySet<string> = new Set(TAILWIND_THEME_NAMES.split(\" \"));\n\n/** A Tailwind PALETTE colour: a hue with a shade, black or white. `refusePalette` reports\n *  these although they resolve — an app that has no palette lint asks this test to be\n *  its refusal. */\nconst PALETTE_VARIABLE = /^--color-(?:[a-z]+-\\d{2,3}|black|white)$/;\n\n/** Read only where it is set: the guard accepts it in a fallback use, never bare. */\nconst APP_NAV_H = \"--app-nav-h\";\n\nexport interface UndeclaredCssVariablesOptions {\n  /** Variables a library writes at runtime, as names or patterns:\n   *  `[\"--radix-collapsible-content-height\"]`. An app's own writes are found in its\n   *  source and need no listing. */\n  runtime?: readonly (string | RegExp)[];\n  /** Also check `var(--x, …)`. Off by default: a fallback says what happens when the\n   *  name is missing. `--app-nav-h` counts as declared only here. */\n  checkFallbacks?: boolean;\n  /** Report Tailwind palette variables (`--color-red-500`, `--color-white`) although\n   *  they resolve. Default false. */\n  refusePalette?: boolean;\n}\n\n/** Comments are not CSS. `/* *\\/` in both; `//` in TS only (not after a `:`, so a URL in a\n *  string survives). Replaced by spaces of the same shape, so line numbers hold. */\nfunction stripComments(text: string, isCss: boolean): string {\n  const blank = (m: string) => m.replace(/[^\\n]/g, \" \");\n  const noBlocks = text.replace(/\\/\\*[\\s\\S]*?\\*\\//g, blank);\n  return isCss ? noBlocks : noBlocks.replace(/(^|[^:])(\\/\\/[^\\n]*)/g, (_, pre: string, c: string) => pre + blank(c));\n}\n\n/** The text with every `@theme … inline … { … }` block blanked out, braces and all. */\nfunction withoutInlineTheme(css: string): string {\n  let out = css;\n  for (const m of css.matchAll(/@theme\\b[^{;]*\\binline\\b[^{;]*\\{/g)) {\n    let depth = 0;\n    let end = m.index + m[0].length - 1;\n    for (; end < css.length; end++) {\n      if (css[end] === \"{\") depth++;\n      else if (css[end] === \"}\" && --depth === 0) break;\n    }\n    out = out.slice(0, m.index) + css.slice(m.index, end + 1).replace(/[^\\n]/g, \" \") + out.slice(end + 1);\n  }\n  return out;\n}\n\n/**\n * Every custom property a stylesheet declares (`--name:`), in any block — except a name\n * declared only inside `@theme inline`, which Tailwind never emits as a variable. Comments\n * are skipped. The same rule builds {@link KIT_CSS_VARIABLES} from `tokens.css`.\n */\nexport function declaredCustomProperties(css: string): Set<string> {\n  const code = withoutInlineTheme(stripComments(css, true));\n  return new Set([...code.matchAll(/(--[a-zA-Z0-9_-]+)\\s*:/g)].map((m) => m[1]));\n}\n\n/** What an app's source writes at runtime: `setProperty(\"--name\"`, a React style key\n *  `\"--name\":`, a Tailwind arbitrary property `[--name:…]`. */\nfunction runtimeWrites(code: string): string[] {\n  return [\n    ...code.matchAll(/setProperty\\(\\s*[\"'`](--[a-zA-Z0-9_-]+)[\"'`]/g),\n    ...code.matchAll(/[\"'](--[a-zA-Z0-9_-]+)[\"']\\s*:/g),\n    ...code.matchAll(/\\[(--[a-zA-Z0-9_-]+):/g),\n  ].map((m) => m[1]);\n}\n\n/** A chart series' colour (`var(--color-total)`) is declared in a file with a `total: {`\n *  config entry: the kit's ChartContainer writes `--color-<key>` for each key. */\nfunction chartKeys(code: string): Set<string> {\n  return new Set([...code.matchAll(/(?:^|[\\s{,])[\"']?([A-Za-z_][\\w-]*)[\"']?\\s*:\\s*\\{/g)].map((m) => m[1]));\n}\n\nconst isCssPath = (path: string) => /\\.css(?:\\?|$)/.test(path);\n\n/**\n * Every `var(--name)` without a fallback that nothing declares, as `\"path:line --name\"`.\n *\n * `sources` maps a path to its text: the app's `.ts`, `.tsx` and `.css` source, tests\n * left out. A name counts as declared when it is:\n * 1. the kit's ({@link KIT_CSS_VARIABLES});\n * 2. declared in any `.css` entry of `sources` (outside `@theme inline`);\n * 3. written by the source at runtime (`setProperty`, a style key, `[--name:…]`);\n * 4. one of Tailwind's theme variables — unless `refusePalette` and it is a palette colour;\n * 5. a chart series' `--color-<key>`, in a file with a `<key>: {` entry;\n * 6. listed in `options.runtime`.\n *\n * Not counted: comments; a use with a fallback, unless `checkFallbacks`; a name built at\n * runtime (`` `var(--chart-${n})` `` — a name must be followed by `)` or `,`).\n *\n * It REFUSES A VACUOUS RUN: it throws when `sources` holds fewer than ten files, or when\n * a `.css` entry is empty. Vitest stubs every stylesheet with an empty string by default,\n * `?raw` included, so an app that reads its CSS that way without opting it out of the stub\n * (`test.css.include`) would otherwise lose every declaration and every use in it, and\n * this would pass or fail for the wrong reason.\n */\nexport function undeclaredCssVariables(\n  sources: Record<string, string>,\n  options: UndeclaredCssVariablesOptions = {},\n): string[] {\n  const { runtime = [], checkFallbacks = false, refusePalette = false } = options;\n  const entries = Object.entries(sources);\n  if (entries.length < 10) {\n    throw new Error(\n      `undeclaredCssVariables: only ${entries.length} source file(s) — the glob or the file list found ` +\n        `(almost) nothing, and a check over nothing passes. Pass the app's .ts/.tsx/.css source.`,\n    );\n  }\n  const emptyCss = entries.filter(([path, text]) => isCssPath(path) && text.trim() === \"\").map(([path]) => path);\n  if (emptyCss.length) {\n    throw new Error(\n      `undeclaredCssVariables: ${emptyCss.join(\", \")} read as empty. Vitest stubs stylesheets with \"\" ` +\n        `(\\`?raw\\` too) unless the file is listed in \\`test.css.include\\`.`,\n    );\n  }\n\n  const code = entries.map(([path, text]) => [path, stripComments(text, isCssPath(path))] as const);\n  const declared = new Set<string>();\n  for (const [path, text] of code) {\n    if (isCssPath(path)) for (const name of declaredCustomProperties(text)) declared.add(name);\n    for (const name of runtimeWrites(text)) declared.add(name);\n  }\n  const listed = (name: string) => runtime.some((r) => (typeof r === \"string\" ? r === name : r.test(name)));\n\n  const out: string[] = [];\n  for (const [path, text] of code) {\n    let keys: Set<string> | null = null;\n    for (const m of text.matchAll(/var\\(\\s*(--[a-zA-Z0-9_-]+)\\s*([,)])/g)) {\n      const [, name, next] = m;\n      const fallback = next === \",\";\n      if (fallback && !checkFallbacks) continue;\n      if (KIT_CSS_VARIABLES.has(name) || declared.has(name) || listed(name)) continue;\n      if (fallback && name === APP_NAV_H) continue;\n      if (TAILWIND_THEME.has(name)) {\n        if (refusePalette && PALETTE_VARIABLE.test(name)) {\n          out.push(`${path}:${lineOf(text, m.index)} ${name} (a Tailwind palette colour; refusePalette is on)`);\n        }\n        continue;\n      }\n      const chart = /^--color-([A-Za-z_][\\w-]*)$/.exec(name);\n      if (chart && (keys ??= chartKeys(text)).has(chart[1])) continue;\n      out.push(`${path}:${lineOf(text, m.index)} ${name}`);\n    }\n  }\n  return out;\n}\n\nfunction lineOf(text: string, index: number): number {\n  let line = 1;\n  for (let i = 0; i < index; i++) if (text.charCodeAt(i) === 10) line++;\n  return line;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/testing/css-variables.ts"],"sourcesContent":["import { themeBlocks } from \"../eslint/role-utilities\";\nimport { KIT_NAMES, TAILWIND_THEME_NAMES } from \"./css-variables.generated\";\n\n/**\n * The guard against an undeclared CSS custom property (0.33,\n * docs/colour-roles-harmonization.md §8, §12.5).\n *\n * A `var(--name)` with no fallback, where nothing declares `--name`, makes the whole\n * declaration invalid at computed-value time: `fill` inherits, `color` inherits, a\n * background goes transparent. Kurvenschmiede's control diagram painted\n * `fill-[var(--surface)]` — a token that never existed (the kit's is `--bg-surface`) —\n * and drew black boxes on a public page. The class compiled, the build passed, the type\n * checker had no opinion, and nothing in any suite noticed. This is the check that\n * notices, run from an app's own test over the source texts the app collects.\n *\n * Browser-safe on purpose, like the rest of the kit: it takes TEXTS, not paths, so an app\n * reads its files however its setup allows (`import.meta.glob` with `?raw`, or `node:fs`)\n * and the kit carries no `node:fs`.\n */\n\n/** Every custom property the installed kit declares or publishes to apps.\n *\n *  Generated from `tokens.css` when the kit is built (scripts/gen-kit-css-variables.mjs),\n *  so it is always the installed version's, and an app never searches `node_modules`.\n *  It leaves out two kinds of name on purpose:\n *  - a name declared only in an `@theme inline` block (`--text-color-muted`,\n *    `--background-color-surface`): Tailwind emits no variable for it, so\n *    `var(--text-color-muted)` would pass a guard that counted it and paint nothing;\n *  - AppShell's measured `--app-nav-h`, which exists only while an AppShell is mounted —\n *    on a landing, legal, sign-in or pay page it is undefined. Read it with a fallback,\n *    `var(--app-nav-h,0px)`, as every kit read does.\n *  Everything `applyTokenSet` and More contrast write on `<html>` is in, through the\n *  stylesheet's `:root` / `.dark` mirror. Component internals (`--slider-fill`, `--fp-*`,\n *  `--icon-button-tone`, `--label-strip-edge`) are not: an app that reads one depends on\n *  the kit's internals, and the guard says so. */\nexport const KIT_CSS_VARIABLES: ReadonlySet<string> = new Set(KIT_NAMES.split(\" \"));\n\n/** Tailwind's own theme variables (`--color-rose-500`, `--spacing`, `--text-sm` …), from\n *  the `tailwindcss/theme.css` the kit builds with. Tailwind emits one when a scanned file\n *  names it, so a `var()` of it resolves. */\nconst TAILWIND_THEME: ReadonlySet<string> = new Set(TAILWIND_THEME_NAMES.split(\" \"));\n\n/** A Tailwind PALETTE colour: a hue with a shade, black or white. `refusePalette` reports\n *  these although they resolve — an app that has no palette lint asks this test to be\n *  its refusal. */\nconst PALETTE_VARIABLE = /^--color-(?:[a-z]+-\\d{2,3}|black|white)$/;\n\n/** Read only where it is set: the guard accepts it in a fallback use, never bare. */\nconst APP_NAV_H = \"--app-nav-h\";\n\nexport interface UndeclaredCssVariablesOptions {\n  /** Variables a library writes at runtime, as names or patterns:\n   *  `[\"--radix-collapsible-content-height\"]`. An app's own writes are found in its\n   *  source and need no listing. */\n  runtime?: readonly (string | RegExp)[];\n  /** Also check `var(--x, …)`. Off by default: a fallback says what happens when the\n   *  name is missing. `--app-nav-h` counts as declared only here. */\n  checkFallbacks?: boolean;\n  /** Report Tailwind palette variables (`--color-red-500`, `--color-white`) although\n   *  they resolve. Default false. */\n  refusePalette?: boolean;\n}\n\n/** Comments are not CSS. `/* *\\/` in both; `//` in TS only (not after a `:`, so a URL in a\n *  string survives). Replaced by spaces of the same shape, so line numbers hold. */\nfunction stripComments(text: string, isCss: boolean): string {\n  const blank = (m: string) => m.replace(/[^\\n]/g, \" \");\n  const noBlocks = text.replace(/\\/\\*[\\s\\S]*?\\*\\//g, blank);\n  return isCss ? noBlocks : noBlocks.replace(/(^|[^:])(\\/\\/[^\\n]*)/g, (_, pre: string, c: string) => pre + blank(c));\n}\n\n/** The text with every `@theme … inline … { … }` block blanked out, braces and all. The\n *  blocks are the kit's one block finder's, `themeBlocks` (src/eslint/role-utilities.ts,\n *  which imports nothing): this was a second brace-counting copy of it, kept equal to the\n *  generator's (scripts/gen-kit-css-variables.mjs, on `themeBlocks` since DUP-13) only by\n *  token-vars-declared.test.ts (0.52 code review). */\nfunction withoutInlineTheme(css: string): string {\n  let out = css;\n  for (const { start, end } of themeBlocks(css, { inline: true })) {\n    out = out.slice(0, start) + out.slice(start, end).replace(/[^\\n]/g, \" \") + out.slice(end);\n  }\n  return out;\n}\n\n/**\n * Every custom property a stylesheet declares (`--name:`), in any block — except a name\n * declared only inside `@theme inline`, which Tailwind never emits as a variable. Comments\n * are skipped. The same rule builds {@link KIT_CSS_VARIABLES} from `tokens.css`.\n */\nexport function declaredCustomProperties(css: string): Set<string> {\n  const code = withoutInlineTheme(stripComments(css, true));\n  return new Set([...code.matchAll(/(--[a-zA-Z0-9_-]+)\\s*:/g)].map((m) => m[1]));\n}\n\n/** What an app's source writes at runtime: `setProperty(\"--name\"`, a React style key\n *  `\"--name\":`, a Tailwind arbitrary property `[--name:…]`. */\nfunction runtimeWrites(code: string): string[] {\n  return [\n    ...code.matchAll(/setProperty\\(\\s*[\"'`](--[a-zA-Z0-9_-]+)[\"'`]/g),\n    ...code.matchAll(/[\"'](--[a-zA-Z0-9_-]+)[\"']\\s*:/g),\n    ...code.matchAll(/\\[(--[a-zA-Z0-9_-]+):/g),\n  ].map((m) => m[1]);\n}\n\n/** A chart series' colour (`var(--color-total)`) is declared in a file with a `total: {`\n *  config entry: the kit's ChartContainer writes `--color-<key>` for each key. */\nfunction chartKeys(code: string): Set<string> {\n  return new Set([...code.matchAll(/(?:^|[\\s{,])[\"']?([A-Za-z_][\\w-]*)[\"']?\\s*:\\s*\\{/g)].map((m) => m[1]));\n}\n\nconst isCssPath = (path: string) => /\\.css(?:\\?|$)/.test(path);\n\n/**\n * Every `var(--name)` without a fallback that nothing declares, as `\"path:line --name\"`.\n *\n * `sources` maps a path to its text: the app's `.ts`, `.tsx` and `.css` source, tests\n * left out. A name counts as declared when it is:\n * 1. the kit's ({@link KIT_CSS_VARIABLES});\n * 2. declared in any `.css` entry of `sources` (outside `@theme inline`);\n * 3. written by the source at runtime (`setProperty`, a style key, `[--name:…]`);\n * 4. one of Tailwind's theme variables — unless `refusePalette` and it is a palette colour;\n * 5. a chart series' `--color-<key>`, in a file with a `<key>: {` entry;\n * 6. listed in `options.runtime`.\n *\n * Not counted: comments; a use with a fallback, unless `checkFallbacks`; a name built at\n * runtime (`` `var(--chart-${n})` `` — a name must be followed by `)` or `,`).\n *\n * It REFUSES A VACUOUS RUN: it throws when `sources` holds fewer than ten files, or when\n * a `.css` entry is empty. Vitest stubs every stylesheet with an empty string by default,\n * `?raw` included, so an app that reads its CSS that way without opting it out of the stub\n * (`test.css.include`) would otherwise lose every declaration and every use in it, and\n * this would pass or fail for the wrong reason.\n */\nexport function undeclaredCssVariables(\n  sources: Record<string, string>,\n  options: UndeclaredCssVariablesOptions = {},\n): string[] {\n  const { runtime = [], checkFallbacks = false, refusePalette = false } = options;\n  const entries = Object.entries(sources);\n  if (entries.length < 10) {\n    throw new Error(\n      `undeclaredCssVariables: only ${entries.length} source file(s) — the glob or the file list found ` +\n        `(almost) nothing, and a check over nothing passes. Pass the app's .ts/.tsx/.css source.`,\n    );\n  }\n  const emptyCss = entries.filter(([path, text]) => isCssPath(path) && text.trim() === \"\").map(([path]) => path);\n  if (emptyCss.length) {\n    throw new Error(\n      `undeclaredCssVariables: ${emptyCss.join(\", \")} read as empty. Vitest stubs stylesheets with \"\" ` +\n        `(\\`?raw\\` too) unless the file is listed in \\`test.css.include\\`.`,\n    );\n  }\n\n  const code = entries.map(([path, text]) => [path, stripComments(text, isCssPath(path))] as const);\n  const declared = new Set<string>();\n  for (const [path, text] of code) {\n    if (isCssPath(path)) for (const name of declaredCustomProperties(text)) declared.add(name);\n    for (const name of runtimeWrites(text)) declared.add(name);\n  }\n  const listed = (name: string) => runtime.some((r) => (typeof r === \"string\" ? r === name : r.test(name)));\n\n  const out: string[] = [];\n  for (const [path, text] of code) {\n    let keys: Set<string> | null = null;\n    for (const m of text.matchAll(/var\\(\\s*(--[a-zA-Z0-9_-]+)\\s*([,)])/g)) {\n      const [, name, next] = m;\n      const fallback = next === \",\";\n      if (fallback && !checkFallbacks) continue;\n      if (KIT_CSS_VARIABLES.has(name) || declared.has(name) || listed(name)) continue;\n      if (fallback && name === APP_NAV_H) continue;\n      if (TAILWIND_THEME.has(name)) {\n        if (refusePalette && PALETTE_VARIABLE.test(name)) {\n          out.push(`${path}:${lineOf(text, m.index)} ${name} (a Tailwind palette colour; refusePalette is on)`);\n        }\n        continue;\n      }\n      const chart = /^--color-([A-Za-z_][\\w-]*)$/.exec(name);\n      if (chart && (keys ??= chartKeys(text)).has(chart[1])) continue;\n      out.push(`${path}:${lineOf(text, m.index)} ${name}`);\n    }\n  }\n  return out;\n}\n\nfunction lineOf(text: string, index: number): number {\n  let line = 1;\n  for (let i = 0; i < index; i++) if (text.charCodeAt(i) === 10) line++;\n  return line;\n}\n"],"mappings":"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","names":[]}

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

@@ -54,11 +54,6 @@ export declare const CHART_ROLES: {
     readonly baseline: "var(--chart-ink)";
     readonly outline: "var(--chart-ink)";
 };
-/** `--chart-ink` per theme, as hex (tokens.css holds the same two). */
-export declare const CHART_INK_HEX: {
-    readonly light: "#1a1a17";
-    readonly dark: "#f0efe8";
-};
 /** `--chart-muted` per theme, as hex (tokens.css holds the same two). */
 export declare const CHART_MUTED_HEX: {
     readonly light: "#6b6a63";

package/dist/theme/chart-palette.js

@@ -27,7 +27,6 @@ const CHART_ROLES = {
   baseline: "var(--chart-ink)",
   outline: "var(--chart-ink)"
 };
-const CHART_INK_HEX = { light: "#1a1a17", dark: "#f0efe8" };
 const CHART_MUTED_HEX = { light: "#6b6a63", dark: "#a8a79f" };
 const EDGE_MIN_CONTRAST = 3;
 function chartEdge(fill, surfaces, ink = CHART_ROLES.outline) {
@@ -85,7 +84,6 @@ function clamp01(t) {
 }
 export {
   CHART_COLORS,
-  CHART_INK_HEX,
   CHART_MUTED_HEX,
   CHART_ROLES,
   CVD_ORDER,

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

@@ -1 +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..8 = anyplot's \"Imprint\" hues (https://anyplot.ai/palette, 0.49 — Paul Tol\n// \"Muted\" before, still selectable as the `paul-tol` preset).\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\nimport { contrast, parseHex as parseRgbHex } from \"./color\";\n\n/** How many categorical slots `paletteFor` cycles through: anyplot's eight hues. Amber,\n *  anyplot's ninth colour, is a semantic warning anchor and not a series slot. A preset\n *  that carries more hues (Paul Tol's nine) still writes them as `--chart-N`, but the\n *  by-index ramp wraps after eight, so the same series keeps the same colour whichever\n *  preset is active. */\nexport const PALETTE_SIZE = 8;\n\n/** anyplot's colour-vision-deficiency-optimal order over the eight slots — the order\n *  that keeps the FIRST n series furthest apart under protan/deutan/tritan simulation.\n *  An option (`paletteFor(i, { order: \"cvd\" })`), not the default: the default order is\n *  anyplot's own slot order, so series 1 is always the green. */\nexport const CVD_ORDER = [0, 1, 7, 6, 4, 5, 2, 3] as const;\n\nexport interface PaletteForOptions {\n  /** `\"slot\"` (default): anyplot's slot order. `\"cvd\"`: {@link CVD_ORDER}. */\n  order?: \"slot\" | \"cvd\";\n}\n\n/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var.\n *\n *  The first series is always slot 0 (`--chart-1`, anyplot's green), and the ramp\n *  wraps after {@link PALETTE_SIZE}.\n *\n *  Wraps in both directions, the way `strokeDash` does: JS `%` keeps the sign,\n *  so `-1 % 8` is `-1` and the plain formula named `--chart-0`, a token that does not\n *  exist — a series with no stroke at all. A fractional index is truncated, and one\n *  that is not a number (NaN, ±Infinity — an `indexOf` miss divided by something)\n *  takes the first colour rather than `var(--chart-NaN)`. */\nexport function paletteFor(index: number, options?: PaletteForOptions): string {\n  const i = Number.isFinite(index) ? Math.trunc(index) : 0;\n  const position = ((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE;\n  const slot = options?.order === \"cvd\" ? CVD_ORDER[position] : position;\n  return `var(--chart-${slot + 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  neutral: \"var(--money-neutral)\",\n  assigned: \"var(--brand)\",\n  activity: \"var(--money-expense)\",\n  /** A generic total line — not money-coloured, the chart's neutral ink. */\n  total: \"var(--chart-ink)\",\n} as const;\n\n/**\n * What a chart draws that is NOT a series (anyplot's roles, 0.49). Two inks, which are\n * the only chart colours that change between light and dark — the eight hues do not:\n *\n * - `other` / `rest` / `disabled` and confidence-`band` fills → the MUTED ink. A\n *   treemap's \"rest\" bucket or a pie's \"Other\" slice takes this instead of wrapping\n *   round to a hue the reader will match to a real series.\n * - `total` / `baseline` / `outline` → the neutral INK.\n */\nexport const CHART_ROLES = {\n  other: \"var(--chart-muted)\",\n  rest: \"var(--chart-muted)\",\n  disabled: \"var(--chart-muted)\",\n  band: \"var(--chart-muted)\",\n  total: \"var(--chart-ink)\",\n  baseline: \"var(--chart-ink)\",\n  outline: \"var(--chart-ink)\",\n} as const;\n\n/** `--chart-ink` per theme, as hex (tokens.css holds the same two). */\nexport const CHART_INK_HEX = { light: \"#1a1a17\", dark: \"#f0efe8\" } as const;\n/** `--chart-muted` per theme, as hex (tokens.css holds the same two). */\nexport const CHART_MUTED_HEX = { light: \"#6b6a63\", dark: \"#a8a79f\" } as const;\n\n/** The 3:1 WCAG 1.4.11 asks of a filled graphical object against its surface. */\nexport const EDGE_MIN_CONTRAST = 3;\n\n/**\n * The 1px edge a FILLED mark (a bar, an area, a treemap tile) needs, or `undefined`.\n *\n * anyplot's answer to hues that sit under 3:1 on the ground (cyan, lime, lavender, ochre\n * and green on cream; matte red and rose on the dark ground): outline the shape in ink,\n * so its boundary is legible while the fill keeps the hue that identifies the series.\n * Only those — a hue that clears 3:1 on every surface given stays unstroked, because an\n * outline on every bar is noise.\n *\n * `fill` must be a measurable `#rgb`/`#rrggbb`; `surfaces` are the grounds the mark can\n * sit on (the card and the page), and the WORST of them decides. Anything it cannot\n * measure gets no edge rather than a guessed one.\n */\nexport function chartEdge(\n  fill: string,\n  surfaces: readonly string[],\n  ink: string = CHART_ROLES.outline,\n): string | undefined {\n  if (!parseRgbHex(fill)) return undefined;\n  const measurable = surfaces.filter((s) => parseRgbHex(s));\n  if (measurable.length === 0) return undefined;\n  const worst = Math.min(...measurable.map((s) => contrast(fill, s)));\n  return worst < EDGE_MIN_CONTRAST ? ink : undefined;\n}\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 — i.e. the same colours DEFAULT_PRESET already\n// holds, written down a second time.\n//\n// They are duplicated rather than imported because these two objects are the whole\n// of the `@eifi1/ui-kit/chart` subpath's colour layer, and importing the preset bank\n// would pull every preset's full token set into that chunk to read two of them. What\n// keeps the copies together is `chart-palette.test.ts` — \"has not drifted from\n// DEFAULT_PRESET\" — which is not optional: they HAD drifted, five of the six light\n// heat stops, and the light `neutral` was still Tailwind's slate-100, a cool grey on\n// the warm cream page this theme has used since #328.\n//\n// 0.49: the same eight hues in both themes — anyplot does not re-tune a hue for the dark\n// ground, and neither does the kit any more; `chartEdge` outlines the two that fall\n// under 3:1 there (matte red, rose) instead of lifting them into different colours.\nconst IMPRINT_HEX = [\"#009e73\", \"#c475fd\", \"#4467a3\", \"#bd8233\", \"#ae3030\", \"#2abccd\", \"#954477\", \"#99b314\"] as const;\nexport const PALETTE_HEX = {\n  light: IMPRINT_HEX,\n  dark: IMPRINT_HEX,\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 — anyplot's scales (0.49). Sequential runs anyplot green →\n    blue; diverging runs blue (under) ↔ paper/ink (0, the midpoint) ↔ matte red (over).\n    The hues are the same in both themes; only the midpoint flips with the ground. */\nexport const HEATMAP_HEX = {\n  light: {\n    neutral: \"#faf8f1\", // anyplot's light paper — the diverging scale's 0\n    under: \"#4467a3\",\n    over: \"#ae3030\",\n    seqLow: \"#009e73\",\n    seqHigh: \"#4467a3\",\n    empty: \"rgba(148,163,184,0.14)\",\n  },\n  dark: {\n    neutral: \"#1a1a17\", // anyplot's ink — the diverging scale's 0 on the dark ground\n    under: \"#4467a3\",\n    over: \"#ae3030\",\n    seqLow: \"#009e73\",\n    seqHigh: \"#4467a3\",\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/** The two inks a cell/treemap label can be set in. Near-black and near-white rather\n    than #000/#fff: at full black-on-full-white the label stops looking like part of the\n    same type system as the rest of the page. */\nconst INK_DARK = \"#1a1a1a\";\nconst INK_LIGHT = \"#f8fafc\";\n\n/** Pick a legible text colour (near-black / near-white) for a solid hex fill, by\n    MEASURING both against it and keeping the one that wins.\n\n    This used to flip on Rec.601 luma > 0.6, which is a brightness heuristic and not a\n    contrast measure — the two disagree on six of the eighteen default chart hues, a\n    third of the ramp, and on each of those the label got the worse of the two inks.\n    `#44aa99` is the plainest case: luma calls it dark, so it took white, which measures\n    2.69:1 on it; near-black measures 6.18:1. keksdose measured this too and forked the\n    function locally for its treemap, leaving its other two call sites on this one.\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 earlier bug: the unparsed fill fell through to the\n    light ink, near-white on a near-white cell, and the figure was invisible. */\nexport function textOn(hex: string): string {\n  const rgb = parseRgbHex(hex);\n  if (!rgb) return \"currentColor\";\n  // Ties go to the dark ink: at equal measured contrast it is the one that keeps a\n  // small label looking like type rather than like a glow.\n  return contrast(rgb, INK_DARK) >= contrast(rgb, INK_LIGHT) ? INK_DARK : INK_LIGHT;\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 * A tuple-shaped shim over `color.ts`'s parser, which is the same function and is\n * already the one `contrast` validates with — so {@link lerpHex} and {@link textOn}\n * cannot disagree about what counts as a colour.\n *\n * The **null** is the whole point of it. This used to `parseInt` whatever it was given\n * and hand the NaNs on, and both callers propagated them silently: {@link lerpHex}\n * produced the literal string `\"#nannannan\"`, and {@link textOn} fell through to 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 rgb = parseRgbHex(hex);\n  return rgb ? [rgb.r, rgb.g, rgb.b] : null;\n}\n\nfunction clamp01(t: number): number {\n  return t < 0 ? 0 : t > 1 ? 1 : t;\n}\n"],"mappings":"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","names":[]}
+{"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..8 = anyplot's \"Imprint\" hues (https://anyplot.ai/palette, 0.49 — Paul Tol\n// \"Muted\" before, still selectable as the `paul-tol` preset).\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\nimport { contrast, parseHex as parseRgbHex } from \"./color\";\n\n/** How many categorical slots `paletteFor` cycles through: anyplot's eight hues. Amber,\n *  anyplot's ninth colour, is a semantic warning anchor and not a series slot. A preset\n *  that carries more hues (Paul Tol's nine) still writes them as `--chart-N`, but the\n *  by-index ramp wraps after eight, so the same series keeps the same colour whichever\n *  preset is active. */\nexport const PALETTE_SIZE = 8;\n\n/** anyplot's colour-vision-deficiency-optimal order over the eight slots — the order\n *  that keeps the FIRST n series furthest apart under protan/deutan/tritan simulation.\n *  An option (`paletteFor(i, { order: \"cvd\" })`), not the default: the default order is\n *  anyplot's own slot order, so series 1 is always the green. */\nexport const CVD_ORDER = [0, 1, 7, 6, 4, 5, 2, 3] as const;\n\nexport interface PaletteForOptions {\n  /** `\"slot\"` (default): anyplot's slot order. `\"cvd\"`: {@link CVD_ORDER}. */\n  order?: \"slot\" | \"cvd\";\n}\n\n/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var.\n *\n *  The first series is always slot 0 (`--chart-1`, anyplot's green), and the ramp\n *  wraps after {@link PALETTE_SIZE}.\n *\n *  Wraps in both directions, the way `strokeDash` does: JS `%` keeps the sign,\n *  so `-1 % 8` is `-1` and the plain formula named `--chart-0`, a token that does not\n *  exist — a series with no stroke at all. A fractional index is truncated, and one\n *  that is not a number (NaN, ±Infinity — an `indexOf` miss divided by something)\n *  takes the first colour rather than `var(--chart-NaN)`. */\nexport function paletteFor(index: number, options?: PaletteForOptions): string {\n  const i = Number.isFinite(index) ? Math.trunc(index) : 0;\n  const position = ((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE;\n  const slot = options?.order === \"cvd\" ? CVD_ORDER[position] : position;\n  return `var(--chart-${slot + 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  neutral: \"var(--money-neutral)\",\n  assigned: \"var(--brand)\",\n  activity: \"var(--money-expense)\",\n  /** A generic total line — not money-coloured, the chart's neutral ink. */\n  total: \"var(--chart-ink)\",\n} as const;\n\n/**\n * What a chart draws that is NOT a series (anyplot's roles, 0.49). Two inks, which are\n * the only chart colours that change between light and dark — the eight hues do not:\n *\n * - `other` / `rest` / `disabled` and confidence-`band` fills → the MUTED ink. A\n *   treemap's \"rest\" bucket or a pie's \"Other\" slice takes this instead of wrapping\n *   round to a hue the reader will match to a real series.\n * - `total` / `baseline` / `outline` → the neutral INK.\n */\nexport const CHART_ROLES = {\n  other: \"var(--chart-muted)\",\n  rest: \"var(--chart-muted)\",\n  disabled: \"var(--chart-muted)\",\n  band: \"var(--chart-muted)\",\n  total: \"var(--chart-ink)\",\n  baseline: \"var(--chart-ink)\",\n  outline: \"var(--chart-ink)\",\n} as const;\n\n/** `--chart-muted` per theme, as hex (tokens.css holds the same two). */\nexport const CHART_MUTED_HEX = { light: \"#6b6a63\", dark: \"#a8a79f\" } as const;\n\n/** The 3:1 WCAG 1.4.11 asks of a filled graphical object against its surface. */\nexport const EDGE_MIN_CONTRAST = 3;\n\n/**\n * The 1px edge a FILLED mark (a bar, an area, a treemap tile) needs, or `undefined`.\n *\n * anyplot's answer to hues that sit under 3:1 on the ground (cyan, lime, lavender, ochre\n * and green on cream; matte red and rose on the dark ground): outline the shape in ink,\n * so its boundary is legible while the fill keeps the hue that identifies the series.\n * Only those — a hue that clears 3:1 on every surface given stays unstroked, because an\n * outline on every bar is noise.\n *\n * `fill` must be a measurable `#rgb`/`#rrggbb`; `surfaces` are the grounds the mark can\n * sit on (the card and the page), and the WORST of them decides. Anything it cannot\n * measure gets no edge rather than a guessed one.\n */\nexport function chartEdge(\n  fill: string,\n  surfaces: readonly string[],\n  ink: string = CHART_ROLES.outline,\n): string | undefined {\n  if (!parseRgbHex(fill)) return undefined;\n  const measurable = surfaces.filter((s) => parseRgbHex(s));\n  if (measurable.length === 0) return undefined;\n  const worst = Math.min(...measurable.map((s) => contrast(fill, s)));\n  return worst < EDGE_MIN_CONTRAST ? ink : undefined;\n}\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 — i.e. the same colours DEFAULT_PRESET already\n// holds, written down a second time.\n//\n// They are duplicated rather than imported because these two objects are the whole\n// of the `@eifi1/ui-kit/chart` subpath's colour layer, and importing the preset bank\n// would pull every preset's full token set into that chunk to read two of them. What\n// keeps the copies together is `chart-palette.test.ts` — \"has not drifted from\n// DEFAULT_PRESET\" — which is not optional: they HAD drifted, five of the six light\n// heat stops, and the light `neutral` was still Tailwind's slate-100, a cool grey on\n// the warm cream page this theme has used since #328.\n//\n// 0.49: the same eight hues in both themes — anyplot does not re-tune a hue for the dark\n// ground, and neither does the kit any more; `chartEdge` outlines the two that fall\n// under 3:1 there (matte red, rose) instead of lifting them into different colours.\nconst IMPRINT_HEX = [\"#009e73\", \"#c475fd\", \"#4467a3\", \"#bd8233\", \"#ae3030\", \"#2abccd\", \"#954477\", \"#99b314\"] as const;\nexport const PALETTE_HEX = {\n  light: IMPRINT_HEX,\n  dark: IMPRINT_HEX,\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 — anyplot's scales (0.49). Sequential runs anyplot green →\n    blue; diverging runs blue (under) ↔ paper/ink (0, the midpoint) ↔ matte red (over).\n    The hues are the same in both themes; only the midpoint flips with the ground. */\nexport const HEATMAP_HEX = {\n  light: {\n    neutral: \"#faf8f1\", // anyplot's light paper — the diverging scale's 0\n    under: \"#4467a3\",\n    over: \"#ae3030\",\n    seqLow: \"#009e73\",\n    seqHigh: \"#4467a3\",\n    empty: \"rgba(148,163,184,0.14)\",\n  },\n  dark: {\n    neutral: \"#1a1a17\", // anyplot's ink — the diverging scale's 0 on the dark ground\n    under: \"#4467a3\",\n    over: \"#ae3030\",\n    seqLow: \"#009e73\",\n    seqHigh: \"#4467a3\",\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/** The two inks a cell/treemap label can be set in. Near-black and near-white rather\n    than #000/#fff: at full black-on-full-white the label stops looking like part of the\n    same type system as the rest of the page. */\nconst INK_DARK = \"#1a1a1a\";\nconst INK_LIGHT = \"#f8fafc\";\n\n/** Pick a legible text colour (near-black / near-white) for a solid hex fill, by\n    MEASURING both against it and keeping the one that wins.\n\n    This used to flip on Rec.601 luma > 0.6, which is a brightness heuristic and not a\n    contrast measure — the two disagree on six of the eighteen default chart hues, a\n    third of the ramp, and on each of those the label got the worse of the two inks.\n    `#44aa99` is the plainest case: luma calls it dark, so it took white, which measures\n    2.69:1 on it; near-black measures 6.18:1. keksdose measured this too and forked the\n    function locally for its treemap, leaving its other two call sites on this one.\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 earlier bug: the unparsed fill fell through to the\n    light ink, near-white on a near-white cell, and the figure was invisible. */\nexport function textOn(hex: string): string {\n  const rgb = parseRgbHex(hex);\n  if (!rgb) return \"currentColor\";\n  // Ties go to the dark ink: at equal measured contrast it is the one that keeps a\n  // small label looking like type rather than like a glow.\n  return contrast(rgb, INK_DARK) >= contrast(rgb, INK_LIGHT) ? INK_DARK : INK_LIGHT;\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 * A tuple-shaped shim over `color.ts`'s parser, which is the same function and is\n * already the one `contrast` validates with — so {@link lerpHex} and {@link textOn}\n * cannot disagree about what counts as a colour.\n *\n * The **null** is the whole point of it. This used to `parseInt` whatever it was given\n * and hand the NaNs on, and both callers propagated them silently: {@link lerpHex}\n * produced the literal string `\"#nannannan\"`, and {@link textOn} fell through to 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 rgb = parseRgbHex(hex);\n  return rgb ? [rgb.r, rgb.g, rgb.b] : null;\n}\n\nfunction clamp01(t: number): number {\n  return t < 0 ? 0 : t > 1 ? 1 : t;\n}\n"],"mappings":";AAOA,SAAS,UAAU,YAAY,mBAAmB;AAO3C,MAAM,eAAe;AAMrB,MAAM,YAAY,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAiBzC,SAAS,WAAW,OAAe,SAAqC;AAC7E,QAAM,IAAI,OAAO,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI;AACvD,QAAM,YAAa,IAAI,eAAgB,gBAAgB;AACvD,QAAM,OAAO,SAAS,UAAU,QAAQ,UAAU,QAAQ,IAAI;AAC9D,SAAO,eAAe,OAAO,CAAC;AAChC;AAIO,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA;AAAA,EAEV,OAAO;AACT;AAWO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AACX;AAGO,MAAM,kBAAkB,EAAE,OAAO,WAAW,MAAM,UAAU;AAG5D,MAAM,oBAAoB;AAe1B,SAAS,UACd,MACA,UACA,MAAc,YAAY,SACN;AACpB,MAAI,CAAC,YAAY,IAAI,EAAG,QAAO;AAC/B,QAAM,aAAa,SAAS,OAAO,CAAC,MAAM,YAAY,CAAC,CAAC;AACxD,MAAI,WAAW,WAAW,EAAG,QAAO;AACpC,QAAM,QAAQ,KAAK,IAAI,GAAG,WAAW,IAAI,CAAC,MAAM,SAAS,MAAM,CAAC,CAAC,CAAC;AAClE,SAAO,QAAQ,oBAAoB,MAAM;AAC3C;AAkBA,MAAM,cAAc,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AACpG,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,MAAM;AACR;AAiBO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL,SAAS;AAAA;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;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;AAKA,MAAM,WAAW;AACjB,MAAM,YAAY;AAmBX,SAAS,OAAO,KAAqB;AAC1C,QAAM,MAAM,YAAY,GAAG;AAC3B,MAAI,CAAC,IAAK,QAAO;AAGjB,SAAO,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK,SAAS,IAAI,WAAW;AAC1E;AAIA,MAAM,aAAuC,CAAC,KAAM,KAAM,GAAI;AAoB9D,SAAS,SAAS,KAA8C;AAC9D,QAAM,MAAM,YAAY,GAAG;AAC3B,SAAO,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI;AACvC;AAEA,SAAS,QAAQ,GAAmB;AAClC,SAAO,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;AACjC;","names":[]}

package/dist/theme/contrast.d.ts

@@ -48,7 +48,8 @@ export interface PersistedContrast {
     };
     version?: number;
 }
-/** This device's own choice under `storageKey`, or `null` when it never chose. */
+/** This device's own choice under `storageKey`, or `null` when it never chose (or the
+ *  storage is blocked, malformed, or holds a value that is not a mode). */
 export declare function readPersistedContrast(storageKey: string): ContrastMode | null;
 /**
  * Pre-paint (§10.3, §10.5): this device's choice under `storageKey` — else the account's

package/dist/theme/contrast.js

@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { logger } from "../lib/logger.js";
-import { readStored } from "../lib/safe-storage.js";
+import { readStoredJson } from "../lib/safe-storage.js";
 import { registerDeviceSetting } from "../lib/device-settings.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { CONTRAST_STEPPED_VARS, contrastStep, rememberedTokenSet } from "./contrast-tokens.js";
@@ -60,14 +60,9 @@ function applyContrast(level) {
   root.setAttribute(CONTRAST_ATTRIBUTE, level);
   reapplyContrastTokens(root);
 }
+const holdsContrast = (blob) => isContrastMode(blob?.state?.contrast);
 function readPersistedContrast(storageKey) {
-  try {
-    const blob = JSON.parse(readStored(storageKey) ?? "null");
-    const mode = blob?.state?.contrast;
-    return isContrastMode(mode) ? mode : null;
-  } catch {
-    return null;
-  }
+  return readStoredJson(storageKey, holdsContrast)?.state.contrast ?? null;
 }
 function applyPersistedContrast(storageKey, options = {}) {
   let account;

package/dist/theme/contrast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/contrast.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { readStored } from \"../lib/safe-storage\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CONTRAST_STEPPED_VARS, contrastStep, rememberedTokenSet } from \"./contrast-tokens\";\nimport { applyTokenSet, DEFAULT_PRESET } from \"./palette-presets\";\nimport type { PersistedAppearanceOptions } from \"./text-size\";\n\n/**\n * \"More contrast\" (docs/text-size-harmonization.md §2.4, §5, §10.5, §10.6): a switch\n * beside the text size, on by choice or — on \"System\" — when the device asks for more\n * contrast (`prefers-contrast: more`). Any text size.\n *\n * In force it is `<html data-contrast=\"more\">` (else `\"standard\"`), which does two things:\n * - the inline colour tokens are re-written one step stronger (`applyTokenSet`'s\n *   contrast flag — see contrast-tokens.ts for what moves and why it is JS);\n * - tokens.css raises `--focus-ring-width` from 2 to 3 px, in light deepens the status,\n *   hue and field-sync literals and `--bg-active` to read on the stepped well (0.36,\n *   colour-roles §13), and turns on the `contrast:` variant for anything else a\n *   component wants to change.\n *\n * The names below are frozen like the text size's: server-kit's `CONTRAST_MODES`, the\n * stored format, the attribute.\n */\n\n/** The stored choices (§10.6): server-kit's `CONTRAST_MODES`. \"system\" IS a stored value\n *  — the PATCH rule refuses an explicit null, so null means only \"never chosen\". */\nexport const CONTRAST_MODES = [\"system\", \"standard\", \"more\"] as const;\n\nexport type ContrastMode = (typeof CONTRAST_MODES)[number];\n\n/** What is in force on `<html data-contrast>`: a mode with \"system\" resolved. */\nexport type ContrastLevel = \"standard\" | \"more\";\n\nconst CONTRAST_ATTRIBUTE = \"data-contrast\";\nconst PREFERS_MORE_QUERY = \"(prefers-contrast: more)\";\n\nexport function isContrastMode(value: unknown): value is ContrastMode {\n  return value === \"system\" || value === \"standard\" || value === \"more\";\n}\n\n/** The mode in force: **this device's own choice → the account's → \"system\"** (§2.6).\n *  The one order the pre-paint call, the apply hook and `useAccountAppearance` share. */\nexport function resolveContrastMode(device: unknown, account?: unknown): ContrastMode {\n  if (isContrastMode(device)) return device;\n  if (isContrastMode(account)) return account;\n  return \"system\";\n}\n\n/** Whether the device asks for more contrast now. False without `matchMedia`. */\nexport function prefersMoreContrast(): boolean {\n  try {\n    return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n      ? window.matchMedia(PREFERS_MORE_QUERY).matches\n      : false;\n  } catch {\n    return false;\n  }\n}\n\n/** A mode to the level it puts on `<html>`; \"system\" asks the device (or takes\n *  `prefersMore`, when the caller already knows). */\nexport function contrastLevel(mode: ContrastMode, prefersMore: boolean = prefersMoreContrast()): ContrastLevel {\n  return mode === \"more\" || (mode === \"system\" && prefersMore) ? \"more\" : \"standard\";\n}\n\n/** The level `<html>` carries now; \"standard\" without one. */\nexport function readContrastLevel(): ContrastLevel {\n  if (typeof document === \"undefined\") return \"standard\";\n  return document.documentElement.getAttribute(CONTRAST_ATTRIBUTE) === \"more\" ? \"more\" : \"standard\";\n}\n\n/**\n * Re-write the contrast-dependent tokens on `el` for its current `data-contrast`.\n *\n * With a palette layer (`applyTokenSet` has written a set here), that set is applied\n * again and steps itself. Without one — an app whose base tokens come from tokens.css,\n * like Kurvenschmiede's — the stepped tokens are written over the stylesheet for the\n * default preset in the current light/dark, or removed again: the four text and line\n * tokens in both modes, and in light the well and the four money colours too (0.36,\n * docs/colour-roles-harmonization.md §13.3 decision 10). In dark those five stay removed,\n * so the stylesheet's dark well and money paint.\n *\n * It never calls `applyTokenSet` here: that would remember a token set on `<html>`, and\n * this app would then take the palette branch above, which a theme switch does not re-run\n * (the class observer in `useApplyContrast` re-writes only while nothing is remembered).\n */\nfunction reapplyContrastTokens(el: HTMLElement): void {\n  const written = rememberedTokenSet(el);\n  if (written) {\n    applyTokenSet(el, written);\n    return;\n  }\n  for (const name of CONTRAST_STEPPED_VARS) el.style.removeProperty(name);\n  if (el.getAttribute(CONTRAST_ATTRIBUTE) !== \"more\") return;\n  const step = contrastStep(DEFAULT_PRESET[el.classList.contains(\"dark\") ? \"dark\" : \"light\"]);\n  el.style.setProperty(\"--text-secondary\", step.textSecondary);\n  el.style.setProperty(\"--text-muted\", step.textMuted);\n  el.style.setProperty(\"--text-placeholder\", step.textPlaceholder);\n  el.style.setProperty(\"--border\", step.border);\n  // One line per variable, not a loop: the step's fields are not the variables' names.\n  if (step.well) {\n    el.style.setProperty(\"--bg-surface-2\", step.well.bgSurface2);\n    el.style.setProperty(\"--money-income\", step.well.moneyIncome);\n    el.style.setProperty(\"--money-expense\", step.well.moneyExpense);\n    el.style.setProperty(\"--money-net\", step.well.moneyNet);\n    el.style.setProperty(\"--money-neutral\", step.well.moneyNeutral);\n  }\n}\n\n/** Put `level` on `<html>` and re-write the colour tokens for it. */\nexport function applyContrast(level: ContrastLevel): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  root.setAttribute(CONTRAST_ATTRIBUTE, level);\n  reapplyContrastTokens(root);\n}\n\n/* ── Storage: the frozen format, the pre-paint call ─────────────────────── */\n\n/**\n * What a contrast store persists under its key — FROZEN, like the text size's:\n *\n *     {\"state\":{\"contrast\":\"more\"},\"version\":1}\n *\n * `contrast` is one of {@link CONTRAST_MODES}, or `null` / absent when this device never\n * chose.\n */\nexport interface PersistedContrast {\n  state?: { contrast?: ContrastMode | null };\n  version?: number;\n}\n\n/** This device's own choice under `storageKey`, or `null` when it never chose. */\nexport function readPersistedContrast(storageKey: string): ContrastMode | null {\n  try {\n    const blob = JSON.parse(readStored(storageKey) ?? \"null\") as PersistedContrast | null;\n    const mode = blob?.state?.contrast;\n    return isContrastMode(mode) ? mode : null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Pre-paint (§10.3, §10.5): this device's choice under `storageKey` — else the account's\n * last known value, else \"system\" — resolved against `prefers-contrast` and applied\n * BEFORE `createRoot`. Call it next to `applyPersistedPalette`, in EITHER order — the\n * palette steps itself when `data-contrast` is already set, and this re-applies the\n * palette's set when it is not; no app has to put one first (0.32.1, keksdose's 0.32\n * report asked which). Returns the level applied.\n */\nexport function applyPersistedContrast(storageKey: string, options: PersistedAppearanceOptions = {}): ContrastLevel {\n  let account: unknown;\n  try {\n    account = options.account?.();\n  } catch {\n    account = undefined;\n  }\n  const level = contrastLevel(resolveContrastMode(readPersistedContrast(storageKey), account));\n  applyContrast(level);\n  return level;\n}\n\n/* ── The store ──────────────────────────────────────────────────────────── */\n\nexport interface ContrastState {\n  /** This device's own choice (persisted), or `null` when it never chose — then the\n   *  account's value applies, else \"system\". */\n  contrast: ContrastMode | null;\n  /** Store this device's choice; `null` forgets it. */\n  setContrast: (contrast: ContrastMode | null) => void;\n}\n\nexport interface ApplyContrastOptions {\n  /** The account's value (`/auth/me`'s `contrast`): it applies while this device has no\n   *  choice of its own. */\n  account?: string | null;\n}\n\n/**\n * Build a contrast store bound to a consumer-supplied localStorage key, shaped like\n * `createThemeStore` and {@link createTextSizeStore} (§6). It holds the DEVICE's choice;\n * the account's value comes in through `useApplyContrast({ account })`.\n *\n * `useApplyContrast` — mount it once near the root, beside `useApplyPalette`:\n * - puts the level on `<html>` and steps the tokens;\n * - on \"System\", follows `prefers-contrast: more` live (§10.5);\n * - without a palette layer, re-writes the stepped tokens when the light/dark class\n *   changes, since they differ per theme.\n *\n * The persisted format is {@link PersistedContrast}, and frozen.\n */\nexport function createContrastStore(storageKey: string) {\n  const useContrastStore = create<ContrastState>()(\n    logger(\n      persist(\n        (set) => ({\n          contrast: null,\n          setContrast: (contrast) => set({ contrast: isContrastMode(contrast) ? contrast : null }),\n        }),\n        {\n          name: storageKey,\n          version: 1,\n          partialize: (s) => ({ contrast: s.contrast }),\n          merge: (persisted, current) => {\n            const value = (persisted as { contrast?: unknown } | null)?.contrast;\n            return { ...current, contrast: isContrastMode(value) ? value : null };\n          },\n        },\n      ),\n      \"contrast\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): no choice on\n  // this device, so `useApplyContrast` re-resolves to the account's mode, else \"system\",\n  // and re-steps the tokens.\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => useContrastStore.getState().setContrast(null),\n  });\n\n  function useApplyContrast({ account }: ApplyContrastOptions = {}): ContrastLevel {\n    const device = useContrastStore((s) => s.contrast);\n    // Subscribed whatever the mode (hooks cannot be skipped); only \"system\" reads it.\n    const prefersMore = useMediaQuery(PREFERS_MORE_QUERY, false);\n    const level = contrastLevel(resolveContrastMode(device, account), prefersMore);\n    useEffect(() => {\n      applyContrast(level);\n    }, [level]);\n    // Without a palette layer the stepped tokens are per theme: follow `.dark`.\n    useEffect(() => {\n      if (typeof MutationObserver === \"undefined\") return;\n      const root = document.documentElement;\n      const observer = new MutationObserver(() => {\n        if (!rememberedTokenSet(root)) reapplyContrastTokens(root);\n      });\n      observer.observe(root, { attributes: true, attributeFilter: [\"class\"] });\n      return () => observer.disconnect();\n    }, []);\n    return level;\n  }\n\n  return { useContrastStore, useApplyContrast };\n}\n\nexport type ContrastStore = ReturnType<typeof createContrastStore>;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/theme/contrast.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { readStoredJson } from \"../lib/safe-storage\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CONTRAST_STEPPED_VARS, contrastStep, rememberedTokenSet } from \"./contrast-tokens\";\nimport { applyTokenSet, DEFAULT_PRESET } from \"./palette-presets\";\nimport type { PersistedAppearanceOptions } from \"./text-size\";\n\n/**\n * \"More contrast\" (docs/text-size-harmonization.md §2.4, §5, §10.5, §10.6): a switch\n * beside the text size, on by choice or — on \"System\" — when the device asks for more\n * contrast (`prefers-contrast: more`). Any text size.\n *\n * In force it is `<html data-contrast=\"more\">` (else `\"standard\"`), which does two things:\n * - the inline colour tokens are re-written one step stronger (`applyTokenSet`'s\n *   contrast flag — see contrast-tokens.ts for what moves and why it is JS);\n * - tokens.css raises `--focus-ring-width` from 2 to 3 px, in light deepens the status,\n *   hue and field-sync literals and `--bg-active` to read on the stepped well (0.36,\n *   colour-roles §13), and turns on the `contrast:` variant for anything else a\n *   component wants to change.\n *\n * The names below are frozen like the text size's: server-kit's `CONTRAST_MODES`, the\n * stored format, the attribute.\n */\n\n/** The stored choices (§10.6): server-kit's `CONTRAST_MODES`. \"system\" IS a stored value\n *  — the PATCH rule refuses an explicit null, so null means only \"never chosen\". */\nexport const CONTRAST_MODES = [\"system\", \"standard\", \"more\"] as const;\n\nexport type ContrastMode = (typeof CONTRAST_MODES)[number];\n\n/** What is in force on `<html data-contrast>`: a mode with \"system\" resolved. */\nexport type ContrastLevel = \"standard\" | \"more\";\n\nconst CONTRAST_ATTRIBUTE = \"data-contrast\";\nconst PREFERS_MORE_QUERY = \"(prefers-contrast: more)\";\n\nexport function isContrastMode(value: unknown): value is ContrastMode {\n  return value === \"system\" || value === \"standard\" || value === \"more\";\n}\n\n/** The mode in force: **this device's own choice → the account's → \"system\"** (§2.6).\n *  The one order the pre-paint call, the apply hook and `useAccountAppearance` share. */\nexport function resolveContrastMode(device: unknown, account?: unknown): ContrastMode {\n  if (isContrastMode(device)) return device;\n  if (isContrastMode(account)) return account;\n  return \"system\";\n}\n\n/** Whether the device asks for more contrast now. False without `matchMedia`. */\nexport function prefersMoreContrast(): boolean {\n  try {\n    return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\"\n      ? window.matchMedia(PREFERS_MORE_QUERY).matches\n      : false;\n  } catch {\n    return false;\n  }\n}\n\n/** A mode to the level it puts on `<html>`; \"system\" asks the device (or takes\n *  `prefersMore`, when the caller already knows). */\nexport function contrastLevel(mode: ContrastMode, prefersMore: boolean = prefersMoreContrast()): ContrastLevel {\n  return mode === \"more\" || (mode === \"system\" && prefersMore) ? \"more\" : \"standard\";\n}\n\n/** The level `<html>` carries now; \"standard\" without one. */\nexport function readContrastLevel(): ContrastLevel {\n  if (typeof document === \"undefined\") return \"standard\";\n  return document.documentElement.getAttribute(CONTRAST_ATTRIBUTE) === \"more\" ? \"more\" : \"standard\";\n}\n\n/**\n * Re-write the contrast-dependent tokens on `el` for its current `data-contrast`.\n *\n * With a palette layer (`applyTokenSet` has written a set here), that set is applied\n * again and steps itself. Without one — an app whose base tokens come from tokens.css,\n * like Kurvenschmiede's — the stepped tokens are written over the stylesheet for the\n * default preset in the current light/dark, or removed again: the four text and line\n * tokens in both modes, and in light the well and the four money colours too (0.36,\n * docs/colour-roles-harmonization.md §13.3 decision 10). In dark those five stay removed,\n * so the stylesheet's dark well and money paint.\n *\n * It never calls `applyTokenSet` here: that would remember a token set on `<html>`, and\n * this app would then take the palette branch above, which a theme switch does not re-run\n * (the class observer in `useApplyContrast` re-writes only while nothing is remembered).\n */\nfunction reapplyContrastTokens(el: HTMLElement): void {\n  const written = rememberedTokenSet(el);\n  if (written) {\n    applyTokenSet(el, written);\n    return;\n  }\n  for (const name of CONTRAST_STEPPED_VARS) el.style.removeProperty(name);\n  if (el.getAttribute(CONTRAST_ATTRIBUTE) !== \"more\") return;\n  const step = contrastStep(DEFAULT_PRESET[el.classList.contains(\"dark\") ? \"dark\" : \"light\"]);\n  el.style.setProperty(\"--text-secondary\", step.textSecondary);\n  el.style.setProperty(\"--text-muted\", step.textMuted);\n  el.style.setProperty(\"--text-placeholder\", step.textPlaceholder);\n  el.style.setProperty(\"--border\", step.border);\n  // One line per variable, not a loop: the step's fields are not the variables' names.\n  if (step.well) {\n    el.style.setProperty(\"--bg-surface-2\", step.well.bgSurface2);\n    el.style.setProperty(\"--money-income\", step.well.moneyIncome);\n    el.style.setProperty(\"--money-expense\", step.well.moneyExpense);\n    el.style.setProperty(\"--money-net\", step.well.moneyNet);\n    el.style.setProperty(\"--money-neutral\", step.well.moneyNeutral);\n  }\n}\n\n/** Put `level` on `<html>` and re-write the colour tokens for it. */\nexport function applyContrast(level: ContrastLevel): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  root.setAttribute(CONTRAST_ATTRIBUTE, level);\n  reapplyContrastTokens(root);\n}\n\n/* ── Storage: the frozen format, the pre-paint call ─────────────────────── */\n\n/**\n * What a contrast store persists under its key — FROZEN, like the text size's:\n *\n *     {\"state\":{\"contrast\":\"more\"},\"version\":1}\n *\n * `contrast` is one of {@link CONTRAST_MODES}, or `null` / absent when this device never\n * chose.\n */\nexport interface PersistedContrast {\n  state?: { contrast?: ContrastMode | null };\n  version?: number;\n}\n\n/** The frozen format holding a mode this kit knows — the shape `readStoredJson` admits. */\nconst holdsContrast = (blob: unknown): blob is { state: { contrast: ContrastMode } } =>\n  isContrastMode((blob as PersistedContrast | null)?.state?.contrast);\n\n/** This device's own choice under `storageKey`, or `null` when it never chose (or the\n *  storage is blocked, malformed, or holds a value that is not a mode). */\nexport function readPersistedContrast(storageKey: string): ContrastMode | null {\n  return readStoredJson(storageKey, holdsContrast)?.state.contrast ?? null;\n}\n\n/**\n * Pre-paint (§10.3, §10.5): this device's choice under `storageKey` — else the account's\n * last known value, else \"system\" — resolved against `prefers-contrast` and applied\n * BEFORE `createRoot`. Call it next to `applyPersistedPalette`, in EITHER order — the\n * palette steps itself when `data-contrast` is already set, and this re-applies the\n * palette's set when it is not; no app has to put one first (0.32.1, keksdose's 0.32\n * report asked which). Returns the level applied.\n */\nexport function applyPersistedContrast(storageKey: string, options: PersistedAppearanceOptions = {}): ContrastLevel {\n  let account: unknown;\n  try {\n    account = options.account?.();\n  } catch {\n    account = undefined;\n  }\n  const level = contrastLevel(resolveContrastMode(readPersistedContrast(storageKey), account));\n  applyContrast(level);\n  return level;\n}\n\n/* ── The store ──────────────────────────────────────────────────────────── */\n\nexport interface ContrastState {\n  /** This device's own choice (persisted), or `null` when it never chose — then the\n   *  account's value applies, else \"system\". */\n  contrast: ContrastMode | null;\n  /** Store this device's choice; `null` forgets it. */\n  setContrast: (contrast: ContrastMode | null) => void;\n}\n\nexport interface ApplyContrastOptions {\n  /** The account's value (`/auth/me`'s `contrast`): it applies while this device has no\n   *  choice of its own. */\n  account?: string | null;\n}\n\n/**\n * Build a contrast store bound to a consumer-supplied localStorage key, shaped like\n * `createThemeStore` and {@link createTextSizeStore} (§6). It holds the DEVICE's choice;\n * the account's value comes in through `useApplyContrast({ account })`.\n *\n * `useApplyContrast` — mount it once near the root, beside `useApplyPalette`:\n * - puts the level on `<html>` and steps the tokens;\n * - on \"System\", follows `prefers-contrast: more` live (§10.5);\n * - without a palette layer, re-writes the stepped tokens when the light/dark class\n *   changes, since they differ per theme.\n *\n * The persisted format is {@link PersistedContrast}, and frozen.\n */\nexport function createContrastStore(storageKey: string) {\n  const useContrastStore = create<ContrastState>()(\n    logger(\n      persist(\n        (set) => ({\n          contrast: null,\n          setContrast: (contrast) => set({ contrast: isContrastMode(contrast) ? contrast : null }),\n        }),\n        {\n          name: storageKey,\n          version: 1,\n          partialize: (s) => ({ contrast: s.contrast }),\n          merge: (persisted, current) => {\n            const value = (persisted as { contrast?: unknown } | null)?.contrast;\n            return { ...current, contrast: isContrastMode(value) ? value : null };\n          },\n        },\n      ),\n      \"contrast\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): no choice on\n  // this device, so `useApplyContrast` re-resolves to the account's mode, else \"system\",\n  // and re-steps the tokens.\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => useContrastStore.getState().setContrast(null),\n  });\n\n  function useApplyContrast({ account }: ApplyContrastOptions = {}): ContrastLevel {\n    const device = useContrastStore((s) => s.contrast);\n    // Subscribed whatever the mode (hooks cannot be skipped); only \"system\" reads it.\n    const prefersMore = useMediaQuery(PREFERS_MORE_QUERY, false);\n    const level = contrastLevel(resolveContrastMode(device, account), prefersMore);\n    useEffect(() => {\n      applyContrast(level);\n    }, [level]);\n    // Without a palette layer the stepped tokens are per theme: follow `.dark`.\n    useEffect(() => {\n      if (typeof MutationObserver === \"undefined\") return;\n      const root = document.documentElement;\n      const observer = new MutationObserver(() => {\n        if (!rememberedTokenSet(root)) reapplyContrastTokens(root);\n      });\n      observer.observe(root, { attributes: true, attributeFilter: [\"class\"] });\n      return () => observer.disconnect();\n    }, []);\n    return level;\n  }\n\n  return { useContrastStore, useApplyContrast };\n}\n\nexport type ContrastStore = ReturnType<typeof createContrastStore>;\n"],"mappings":"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","names":[]}

package/dist/theme/palette-store.js

@@ -3,15 +3,15 @@ import { useEffect } from "react";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { logger } from "../lib/logger.js";
+import { readStoredJson } from "../lib/safe-storage.js";
 import { registerDeviceSetting } from "../lib/device-settings.js";
 import { applyTokenSet, DEFAULT_PRESET, presetById } from "./palette-presets.js";
+const holdsPaletteId = (blob) => {
+  const id = blob?.state?.id;
+  return typeof id === "string" && id !== "";
+};
 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 {
-  }
+  const id = readStoredJson(storageKey, holdsPaletteId)?.state.id ?? DEFAULT_PRESET.id;
   applyTokenSet(document.documentElement, presetById(id)[mode]);
 }
 function createPaletteStore(storageKey, useTheme) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/palette-store.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport { logger } from \"../lib/logger\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\nimport type { HeatStops } from \"./chart-palette\";\nimport { applyTokenSet, DEFAULT_PRESET, presetById, type TokenSet } from \"./palette-presets\";\nimport type { ThemeState, ThemeMode } from \"./theme-store\";\n\n/**\n * Pre-hydration counterpart to `applyPersistedTheme`: read the palette id\n * persisted under `storageKey` straight from localStorage and apply that preset's\n * tokens for the given resolved `mode` to <html>, BEFORE React mounts (no flash of\n * the default palette). Falls back to the default preset for missing/malformed\n * state, so an app entrypoint never re-types the persist envelope.\n */\nexport function applyPersistedPalette(storageKey: string, mode: ThemeMode): void {\n  let id = DEFAULT_PRESET.id;\n  try {\n    const blob = JSON.parse(localStorage.getItem(storageKey) ?? \"{}\") as {\n      state?: { id?: string };\n    };\n    if (blob.state?.id) id = blob.state.id;\n  } catch {\n    /* malformed storage → default preset */\n  }\n  applyTokenSet(document.documentElement, presetById(id)[mode]);\n}\n\n// The palette layer flips the whole app between candidate appearance presets at\n// runtime (feedback #307), re-skinning every token-driven surface and chart.\n// Persisted like the theme so a reload keeps the selection.\ninterface PaletteState {\n  id: string;\n  setId: (id: string) => void;\n}\n\n/**\n * Build a palette store bound to a consumer-supplied localStorage key, wired to\n * that app's theme store (for the active light/dark mode). Returns the palette\n * hook plus the effect + selector hooks that read the active preset's tokens.\n */\nexport function createPaletteStore(storageKey: string, useTheme: UseBoundStore<StoreApi<ThemeState>>) {\n  const usePalette = create<PaletteState>()(\n    logger(\n      persist(\n        (set) => ({\n          id: DEFAULT_PRESET.id,\n          setId: (id) => set({ id }),\n        }),\n        { name: storageKey, version: 1 },\n      ),\n      \"palette\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): the Default\n  // palette, STATE ONLY. `useApplyPalette`, where the app mounts it, re-applies through\n  // its effect. Never an imperative `applyTokenSet` here: it would remember a token set\n  // on <html>, and an app without a palette layer (Kurvenschmiede) would then take the\n  // contrast store's palette branch, where a theme switch no longer re-writes the stepped\n  // tokens (KS 3.3).\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => usePalette.getState().setId(DEFAULT_PRESET.id),\n  });\n\n  /** Apply the active preset's tokens to <html> as inline CSS custom properties,\n   *  re-applying when the preset or the light/dark theme changes. Tailwind v4\n   *  strips a bare root token block from the bundle, so this inline write from\n   *  the TS source of truth is what actually drives the colours.\n   *\n   *  0.32: keeps More contrast. `applyTokenSet` reads `<html data-contrast>`, which the\n   *  contrast store sets, and steps the tokens itself; the contrast store re-applies\n   *  the set written here when the contrast changes (docs/text-size-harmonization.md\n   *  §10.5). Neither store needs the other. */\n  function useApplyPalette(): void {\n    const id = usePalette((s) => s.id);\n    const mode = useTheme((s) => s.mode);\n    useEffect(() => {\n      applyTokenSet(document.documentElement, presetById(id)[mode]);\n    }, [id, mode]);\n  }\n\n  /** The active preset's token set for the current theme — the source for the\n   *  JS-interpolated charts (treemap fills, heatmap stops) that can't read CSS\n   *  vars. */\n  function useActiveTokenSet(): TokenSet {\n    const id = usePalette((s) => s.id);\n    const mode = useTheme((s) => s.mode);\n    return presetById(id)[mode];\n  }\n\n  /** The 9 categorical chart hues for the active preset/theme (treemap cells). */\n  function useChartHex(): string[] {\n    return useActiveTokenSet().chart;\n  }\n\n  /** The active preset/theme heatmap interpolation stops. */\n  function useHeatStops(): HeatStops {\n    return useActiveTokenSet().heat;\n  }\n\n  return { usePalette, useApplyPalette, useActiveTokenSet, useChartHex, useHeatStops };\n}\n\nexport type PaletteStore = ReturnType<typeof createPaletteStore>;\n"],"mappings":";AAAA,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,cAAc;AACvB,SAAS,6BAA6B;AAEtC,SAAS,eAAe,gBAAgB,kBAAiC;AAUlE,SAAS,sBAAsB,YAAoB,MAAuB;AAC/E,MAAI,KAAK,eAAe;AACxB,MAAI;AACF,UAAM,OAAO,KAAK,MAAM,aAAa,QAAQ,UAAU,KAAK,IAAI;AAGhE,QAAI,KAAK,OAAO,GAAI,MAAK,KAAK,MAAM;AAAA,EACtC,QAAQ;AAAA,EAER;AACA,gBAAc,SAAS,iBAAiB,WAAW,EAAE,EAAE,IAAI,CAAC;AAC9D;AAeO,SAAS,mBAAmB,YAAoB,UAA+C;AACpG,QAAM,aAAa,OAAqB;AAAA,IACtC;AAAA,MACE;AAAA,QACE,CAAC,SAAS;AAAA,UACR,IAAI,eAAe;AAAA,UACnB,OAAO,CAAC,OAAO,IAAI,EAAE,GAAG,CAAC;AAAA,QAC3B;AAAA,QACA,EAAE,MAAM,YAAY,SAAS,EAAE;AAAA,MACjC;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAOA,wBAAsB;AAAA,IACpB,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO,MAAM,WAAW,SAAS,EAAE,MAAM,eAAe,EAAE;AAAA,EAC5D,CAAC;AAWD,WAAS,kBAAwB;AAC/B,UAAM,KAAK,WAAW,CAAC,MAAM,EAAE,EAAE;AACjC,UAAM,OAAO,SAAS,CAAC,MAAM,EAAE,IAAI;AACnC,cAAU,MAAM;AACd,oBAAc,SAAS,iBAAiB,WAAW,EAAE,EAAE,IAAI,CAAC;AAAA,IAC9D,GAAG,CAAC,IAAI,IAAI,CAAC;AAAA,EACf;AAKA,WAAS,oBAA8B;AACrC,UAAM,KAAK,WAAW,CAAC,MAAM,EAAE,EAAE;AACjC,UAAM,OAAO,SAAS,CAAC,MAAM,EAAE,IAAI;AACnC,WAAO,WAAW,EAAE,EAAE,IAAI;AAAA,EAC5B;AAGA,WAAS,cAAwB;AAC/B,WAAO,kBAAkB,EAAE;AAAA,EAC7B;AAGA,WAAS,eAA0B;AACjC,WAAO,kBAAkB,EAAE;AAAA,EAC7B;AAEA,SAAO,EAAE,YAAY,iBAAiB,mBAAmB,aAAa,aAAa;AACrF;","names":[]}
+{"version":3,"sources":["../../src/theme/palette-store.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport type { StoreApi, UseBoundStore } from \"zustand\";\nimport { logger } from \"../lib/logger\";\nimport { readStoredJson } from \"../lib/safe-storage\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\nimport type { HeatStops } from \"./chart-palette\";\nimport { applyTokenSet, DEFAULT_PRESET, presetById, type TokenSet } from \"./palette-presets\";\nimport type { ThemeState, ThemeMode } from \"./theme-store\";\n\n/** zustand's envelope with a preset id in it; anything else (absent, blocked, malformed)\n *  is the default preset. An unknown id is too — `presetById`'s fallback. */\nconst holdsPaletteId = (blob: unknown): blob is { state: { id: string } } => {\n  const id = (blob as { state?: { id?: unknown } } | null)?.state?.id;\n  return typeof id === \"string\" && id !== \"\";\n};\n\n/**\n * Pre-hydration counterpart to `applyPersistedTheme`: read the palette id\n * persisted under `storageKey` straight from localStorage and apply that preset's\n * tokens for the given resolved `mode` to <html>, BEFORE React mounts (no flash of\n * the default palette). Falls back to the default preset for missing/malformed\n * state, so an app entrypoint never re-types the persist envelope.\n */\nexport function applyPersistedPalette(storageKey: string, mode: ThemeMode): void {\n  const id = readStoredJson(storageKey, holdsPaletteId)?.state.id ?? DEFAULT_PRESET.id;\n  applyTokenSet(document.documentElement, presetById(id)[mode]);\n}\n\n// The palette layer flips the whole app between candidate appearance presets at\n// runtime (feedback #307), re-skinning every token-driven surface and chart.\n// Persisted like the theme so a reload keeps the selection.\ninterface PaletteState {\n  id: string;\n  setId: (id: string) => void;\n}\n\n/**\n * Build a palette store bound to a consumer-supplied localStorage key, wired to\n * that app's theme store (for the active light/dark mode). Returns the palette\n * hook plus the effect + selector hooks that read the active preset's tokens.\n */\nexport function createPaletteStore(storageKey: string, useTheme: UseBoundStore<StoreApi<ThemeState>>) {\n  const usePalette = create<PaletteState>()(\n    logger(\n      persist(\n        (set) => ({\n          id: DEFAULT_PRESET.id,\n          setId: (id) => set({ id }),\n        }),\n        { name: storageKey, version: 1 },\n      ),\n      \"palette\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): the Default\n  // palette, STATE ONLY. `useApplyPalette`, where the app mounts it, re-applies through\n  // its effect. Never an imperative `applyTokenSet` here: it would remember a token set\n  // on <html>, and an app without a palette layer (Kurvenschmiede) would then take the\n  // contrast store's palette branch, where a theme switch no longer re-writes the stepped\n  // tokens (KS 3.3).\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => usePalette.getState().setId(DEFAULT_PRESET.id),\n  });\n\n  /** Apply the active preset's tokens to <html> as inline CSS custom properties,\n   *  re-applying when the preset or the light/dark theme changes. Tailwind v4\n   *  strips a bare root token block from the bundle, so this inline write from\n   *  the TS source of truth is what actually drives the colours.\n   *\n   *  0.32: keeps More contrast. `applyTokenSet` reads `<html data-contrast>`, which the\n   *  contrast store sets, and steps the tokens itself; the contrast store re-applies\n   *  the set written here when the contrast changes (docs/text-size-harmonization.md\n   *  §10.5). Neither store needs the other. */\n  function useApplyPalette(): void {\n    const id = usePalette((s) => s.id);\n    const mode = useTheme((s) => s.mode);\n    useEffect(() => {\n      applyTokenSet(document.documentElement, presetById(id)[mode]);\n    }, [id, mode]);\n  }\n\n  /** The active preset's token set for the current theme — the source for the\n   *  JS-interpolated charts (treemap fills, heatmap stops) that can't read CSS\n   *  vars. */\n  function useActiveTokenSet(): TokenSet {\n    const id = usePalette((s) => s.id);\n    const mode = useTheme((s) => s.mode);\n    return presetById(id)[mode];\n  }\n\n  /** The 9 categorical chart hues for the active preset/theme (treemap cells). */\n  function useChartHex(): string[] {\n    return useActiveTokenSet().chart;\n  }\n\n  /** The active preset/theme heatmap interpolation stops. */\n  function useHeatStops(): HeatStops {\n    return useActiveTokenSet().heat;\n  }\n\n  return { usePalette, useApplyPalette, useActiveTokenSet, useChartHex, useHeatStops };\n}\n\nexport type PaletteStore = ReturnType<typeof createPaletteStore>;\n"],"mappings":";AAAA,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,6BAA6B;AAEtC,SAAS,eAAe,gBAAgB,kBAAiC;AAKzE,MAAM,iBAAiB,CAAC,SAAqD;AAC3E,QAAM,KAAM,MAA8C,OAAO;AACjE,SAAO,OAAO,OAAO,YAAY,OAAO;AAC1C;AASO,SAAS,sBAAsB,YAAoB,MAAuB;AAC/E,QAAM,KAAK,eAAe,YAAY,cAAc,GAAG,MAAM,MAAM,eAAe;AAClF,gBAAc,SAAS,iBAAiB,WAAW,EAAE,EAAE,IAAI,CAAC;AAC9D;AAeO,SAAS,mBAAmB,YAAoB,UAA+C;AACpG,QAAM,aAAa,OAAqB;AAAA,IACtC;AAAA,MACE;AAAA,QACE,CAAC,SAAS;AAAA,UACR,IAAI,eAAe;AAAA,UACnB,OAAO,CAAC,OAAO,IAAI,EAAE,GAAG,CAAC;AAAA,QAC3B;AAAA,QACA,EAAE,MAAM,YAAY,SAAS,EAAE;AAAA,MACjC;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAOA,wBAAsB;AAAA,IACpB,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO,MAAM,WAAW,SAAS,EAAE,MAAM,eAAe,EAAE;AAAA,EAC5D,CAAC;AAWD,WAAS,kBAAwB;AAC/B,UAAM,KAAK,WAAW,CAAC,MAAM,EAAE,EAAE;AACjC,UAAM,OAAO,SAAS,CAAC,MAAM,EAAE,IAAI;AACnC,cAAU,MAAM;AACd,oBAAc,SAAS,iBAAiB,WAAW,EAAE,EAAE,IAAI,CAAC;AAAA,IAC9D,GAAG,CAAC,IAAI,IAAI,CAAC;AAAA,EACf;AAKA,WAAS,oBAA8B;AACrC,UAAM,KAAK,WAAW,CAAC,MAAM,EAAE,EAAE;AACjC,UAAM,OAAO,SAAS,CAAC,MAAM,EAAE,IAAI;AACnC,WAAO,WAAW,EAAE,EAAE,IAAI;AAAA,EAC5B;AAGA,WAAS,cAAwB;AAC/B,WAAO,kBAAkB,EAAE;AAAA,EAC7B;AAGA,WAAS,eAA0B;AACjC,WAAO,kBAAkB,EAAE;AAAA,EAC7B;AAEA,SAAO,EAAE,YAAY,iBAAiB,mBAAmB,aAAa,aAAa;AACrF;","names":[]}

package/dist/theme/text-size.js

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useSyncExternalStore } from "react";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { logger } from "../lib/logger.js";
-import { readStored } from "../lib/safe-storage.js";
+import { readStoredJson } from "../lib/safe-storage.js";
 import { registerDeviceSetting } from "../lib/device-settings.js";
 const TEXT_SIZES = ["normal", "large", "xlarge"];
 const TEXT_SCALE = { normal: 1, large: 1.25, xlarge: 1.5 };
@@ -51,14 +51,9 @@ function useTextSize() {
   const size = useSyncExternalStore(subscribe, readTextSize, () => "normal");
   return useMemo(() => ({ size, scale: TEXT_SCALE[size] }), [size]);
 }
+const holdsTextSize = (blob) => isTextSize(blob?.state?.size);
 function readPersistedTextSize(storageKey) {
-  try {
-    const blob = JSON.parse(readStored(storageKey) ?? "null");
-    const size = blob?.state?.size;
-    return isTextSize(size) ? size : null;
-  } catch {
-    return null;
-  }
+  return readStoredJson(storageKey, holdsTextSize)?.state.size ?? null;
 }
 function readAccount(account) {
   if (!account) return void 0;

package/dist/theme/text-size.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/text-size.ts"],"sourcesContent":["import { useEffect, useMemo, useSyncExternalStore } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { readStored } from \"../lib/safe-storage\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\n\n/**\n * The text size (docs/text-size-harmonization.md §2.1, §3.1, §10.3, §10.6).\n *\n * ONE scale on `<html>`: `data-text-size=\"normal|large|xlarge\"`, and `tokens.css` turns\n * it into `font-size: 100% / 125% / 150%` — percent, never px, so \"Normal\" keeps\n * whatever size the person set in the browser. Tailwind's spacing and type are rem, so\n * about 90 % of every screen grows with that one declaration; the breakpoints follow too\n * (tokens.css redefines `sm:` … `3xl:` per size, {@link useBreakpoint} answers the same\n * in JS).\n *\n * The names below are the mechanism's public vocabulary and are FROZEN: an app's\n * storage, its `/auth/me` column (server-kit's `TEXT_SIZES`) and the inline boot snippet\n * all spell them this way.\n */\n\n/** The three steps, in order (§2.1, §10.6): server-kit's `TEXT_SIZES`, value for value. */\nexport const TEXT_SIZES = [\"normal\", \"large\", \"xlarge\"] as const;\n\nexport type TextSize = (typeof TEXT_SIZES)[number];\n\n/** The root font size each step sets, as a factor of the browser's own (tokens.css). For\n *  what CSS cannot reach: a canvas or SVG chart's px constants, a windowed list's row\n *  estimate, a popover width in px (§3.2). */\nexport const TEXT_SCALE: Readonly<Record<TextSize, number>> = { normal: 1, large: 1.25, xlarge: 1.5 };\n\n/** The attribute on `<html>` that carries the size. */\nconst TEXT_SIZE_ATTRIBUTE = \"data-text-size\";\n\nexport function isTextSize(value: unknown): value is TextSize {\n  return value === \"normal\" || value === \"large\" || value === \"xlarge\";\n}\n\n/**\n * The size in force: **this device's own choice → the account's → Normal** (§2.2, §2.6).\n * Each is taken only when it is one of {@link TEXT_SIZES}; anything else (a stale value,\n * `null` = never chosen) falls through to the next. The one order the pre-paint call, the\n * apply hook and `useAccountAppearance` all use, so the three can never disagree.\n */\nexport function resolveTextSize(device: unknown, account?: unknown): TextSize {\n  if (isTextSize(device)) return device;\n  if (isTextSize(account)) return account;\n  return \"normal\";\n}\n\n/* ── <html data-text-size> and the subscribers that read it ─────────────── */\n\nconst listeners = new Set<() => void>();\nlet observer: MutationObserver | null = null;\n\nfunction notify(): void {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void): () => void {\n  listeners.add(listener);\n  // Also catches writers that are not this module — the inline boot snippet, an app\n  // setting the attribute by hand, a test.\n  if (!observer && typeof MutationObserver !== \"undefined\" && typeof document !== \"undefined\") {\n    observer = new MutationObserver(notify);\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: [TEXT_SIZE_ATTRIBUTE] });\n  }\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0) {\n      observer?.disconnect();\n      observer = null;\n    }\n  };\n}\n\n/** The size `<html>` carries now; Normal without one (or outside a browser). */\nexport function readTextSize(): TextSize {\n  if (typeof document === \"undefined\") return \"normal\";\n  const value = document.documentElement.getAttribute(TEXT_SIZE_ATTRIBUTE);\n  return isTextSize(value) ? value : \"normal\";\n}\n\n/** Put `size` on `<html>`. Every {@link useTextSize} re-renders with it. */\nexport function applyTextSize(size: TextSize): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  if (root.getAttribute(TEXT_SIZE_ATTRIBUTE) === size) return;\n  root.setAttribute(TEXT_SIZE_ATTRIBUTE, size);\n  notify();\n}\n\nexport interface TextSizeInfo {\n  size: TextSize;\n  /** {@link TEXT_SCALE} for `size`: 1, 1.25 or 1.5. */\n  scale: number;\n}\n\n/**\n * The size in force on this page, and its scale (§3.1) — read from `<html>`, so it needs\n * no store and works in every kit component: whoever applied the size (the app's store,\n * the pre-paint call, the inline snippet), this follows it.\n *\n * Only for what CSS cannot do. A class that should differ at Large is a `large:`\n * variant; a layout switch is a breakpoint, which already scales.\n */\nexport function useTextSize(): TextSizeInfo {\n  const size = useSyncExternalStore(subscribe, readTextSize, () => \"normal\" as const);\n  return useMemo(() => ({ size, scale: TEXT_SCALE[size] }), [size]);\n}\n\n/* ── Storage: the frozen format, the pre-paint call ─────────────────────── */\n\n/**\n * What a text-size store persists under its key — zustand's persist envelope, and FROZEN\n * (§10.3) because an app's inline `<head>` snippet reads it before any module loads:\n *\n *     {\"state\":{\"size\":\"large\"},\"version\":1}\n *\n * `size` is one of {@link TEXT_SIZES}, or `null` / absent when this device never chose.\n * A future change adds a key; it never renames `state.size` or changes its values.\n *\n * A hand-written seed (a test, a screenshot script) must carry `\"version\":1`: the store\n * drops a stored state of another version as a migration it doesn't know, silently\n * (keksdose's 0.32 report). The inline snippet reads `state.size` whatever the version,\n * so the two would disagree. In the kit's showcase, `?text-size=` needs no seed.\n */\nexport interface PersistedTextSize {\n  state?: { size?: TextSize | null };\n  version?: number;\n}\n\n/** This device's own choice under `storageKey`, or `null` when it never chose (or the\n *  storage is blocked, malformed, or holds a value that is not a size). */\nexport function readPersistedTextSize(storageKey: string): TextSize | null {\n  try {\n    const blob = JSON.parse(readStored(storageKey) ?? \"null\") as PersistedTextSize | null;\n    const size = blob?.state?.size;\n    return isTextSize(size) ? size : null;\n  } catch {\n    return null;\n  }\n}\n\nexport interface PersistedAppearanceOptions {\n  /**\n   * The account's last known value, for a device without a choice of its own (§10.3):\n   * what the app persisted with its user (keksdose keeps `/auth/me` in localStorage), so\n   * a cold boot paints the account's size instead of Normal and then jumping — offline\n   * too. Called once, guarded: a throw counts as \"no account value\".\n   */\n  account?: () => string | null | undefined;\n}\n\nfunction readAccount(account: PersistedAppearanceOptions[\"account\"]): unknown {\n  if (!account) return undefined;\n  try {\n    return account();\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * Pre-paint (§3.1, §10.3): read this device's choice under `storageKey` — else the\n * account's last known value — and put it on `<html>` BEFORE `createRoot`, next to\n * `applyPersistedTheme`, so the first paint already has the right size. Returns the size\n * applied.\n *\n * ```ts\n * applyPersistedTextSize(\"keksdose-text-size\", {\n *   account: () => readPersistedUser()?.text_size,\n * });\n * ```\n */\nexport function applyPersistedTextSize(storageKey: string, options: PersistedAppearanceOptions = {}): TextSize {\n  const size = resolveTextSize(readPersistedTextSize(storageKey), readAccount(options.account));\n  applyTextSize(size);\n  return size;\n}\n\n/**\n * The same pre-paint as {@link applyPersistedTextSize}, as an inline `<head>` script for\n * a boot splash painted from `index.html` before any module runs (§10.3). A function\n * EXPRESSION: call it with the storage key and, optionally, a function returning the\n * account's last known value.\n *\n * ```html\n * <script>\n *   (function(k,a){…})(\"keksdose-text-size\", function () {\n *     return JSON.parse(localStorage.getItem(\"keksdose-auth\")).state.user.text_size;\n *   });\n * </script>\n * ```\n *\n * Paste the constant's value in place of `(function(k,a){…})`. It reads the frozen\n * {@link PersistedTextSize} format, never throws, and sets only `data-text-size`.\n *\n * The splash sizes in rem, and needs the root rules inline beside it, since the app's\n * stylesheet is a separate request and arrives after the splash paints (0.32.1,\n * keksdose's 0.32 report: that is every app, not an edge case):\n *\n * ```html\n * <style>html[data-text-size=large]{font-size:125%}html[data-text-size=xlarge]{font-size:150%}</style>\n * ```\n *\n * Under a hash-based Content Security Policy (`script-src 'sha256-…'`) this is a second\n * inline script with its own hash: add it to the policy, and recompute it whenever the\n * storage key or the account function in the call changes (keksdose added it to both\n * its Caddyfiles, and its guard test hashes every inline script).\n */\nexport const TEXT_SIZE_INLINE_SCRIPT =\n  \"(function(k,a){function ok(v){return v==='normal'||v==='large'||v==='xlarge'}\" +\n  \"var v=null;try{var s=JSON.parse(localStorage.getItem(k)||'null');v=s&&s.state&&s.state.size}catch(e){}\" +\n  \"if(!ok(v)){v=null;try{v=a?a():null}catch(e){}}\" +\n  \"try{document.documentElement.setAttribute('data-text-size',ok(v)?v:'normal')}catch(e){}})\";\n\n/* ── The store ──────────────────────────────────────────────────────────── */\n\nexport interface TextSizeState {\n  /** This device's own choice (persisted), or `null` when it never chose — then the\n   *  account's value applies (§2.2). */\n  size: TextSize | null;\n  /** Store this device's choice; `null` forgets it, so the account's applies again. */\n  setSize: (size: TextSize | null) => void;\n}\n\nexport interface ApplyTextSizeOptions {\n  /** The account's value (`/auth/me`'s `text_size`): it applies while this device has no\n   *  choice of its own. Leave it out where there is no account. */\n  account?: string | null;\n}\n\n/**\n * Build a text-size store bound to a consumer-supplied localStorage key, shaped like\n * `createThemeStore` (§6). It holds the DEVICE's choice only; the account's value comes\n * in through `useApplyTextSize({ account })` and `useAccountAppearance`, and the size in\n * force is always {@link resolveTextSize} of the two.\n *\n * - `useTextSizeStore` — the zustand hook: `size` (device choice or null) and `setSize`.\n * - `useApplyTextSize({ account })` — the effect that puts the size in force on `<html>`.\n *   Mount it once near the root, beside `useApplyTheme`.\n *\n * The persisted format is {@link PersistedTextSize}, and frozen.\n */\nexport function createTextSizeStore(storageKey: string) {\n  const useTextSizeStore = create<TextSizeState>()(\n    logger(\n      persist(\n        (set) => ({\n          size: null,\n          setSize: (size) => set({ size: isTextSize(size) ? size : null }),\n        }),\n        {\n          name: storageKey,\n          version: 1,\n          partialize: (s) => ({ size: s.size }),\n          // A hand-edited or future value must not reach <html> as an unknown size.\n          merge: (persisted, current) => ({\n            ...current,\n            size: isTextSize((persisted as { size?: unknown } | null)?.size)\n              ? (persisted as { size: TextSize }).size\n              : null,\n          }),\n        },\n      ),\n      \"text-size\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): no choice on\n  // this device, so `useApplyTextSize` re-resolves to the account's size, else Normal.\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => useTextSizeStore.getState().setSize(null),\n  });\n\n  function useApplyTextSize({ account }: ApplyTextSizeOptions = {}): TextSize {\n    const device = useTextSizeStore((s) => s.size);\n    const size = resolveTextSize(device, account);\n    useEffect(() => {\n      applyTextSize(size);\n    }, [size]);\n    return size;\n  }\n\n  return { useTextSizeStore, useApplyTextSize };\n}\n\nexport type TextSizeStore = ReturnType<typeof createTextSizeStore>;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/theme/text-size.ts"],"sourcesContent":["import { useEffect, useMemo, useSyncExternalStore } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { readStoredJson } from \"../lib/safe-storage\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\n\n/**\n * The text size (docs/text-size-harmonization.md §2.1, §3.1, §10.3, §10.6).\n *\n * ONE scale on `<html>`: `data-text-size=\"normal|large|xlarge\"`, and `tokens.css` turns\n * it into `font-size: 100% / 125% / 150%` — percent, never px, so \"Normal\" keeps\n * whatever size the person set in the browser. Tailwind's spacing and type are rem, so\n * about 90 % of every screen grows with that one declaration; the breakpoints follow too\n * (tokens.css redefines `sm:` … `3xl:` per size, {@link useBreakpoint} answers the same\n * in JS).\n *\n * The names below are the mechanism's public vocabulary and are FROZEN: an app's\n * storage, its `/auth/me` column (server-kit's `TEXT_SIZES`) and the inline boot snippet\n * all spell them this way.\n */\n\n/** The three steps, in order (§2.1, §10.6): server-kit's `TEXT_SIZES`, value for value. */\nexport const TEXT_SIZES = [\"normal\", \"large\", \"xlarge\"] as const;\n\nexport type TextSize = (typeof TEXT_SIZES)[number];\n\n/** The root font size each step sets, as a factor of the browser's own (tokens.css). For\n *  what CSS cannot reach: a canvas or SVG chart's px constants, a windowed list's row\n *  estimate, a popover width in px (§3.2). */\nexport const TEXT_SCALE: Readonly<Record<TextSize, number>> = { normal: 1, large: 1.25, xlarge: 1.5 };\n\n/** The attribute on `<html>` that carries the size. */\nconst TEXT_SIZE_ATTRIBUTE = \"data-text-size\";\n\nexport function isTextSize(value: unknown): value is TextSize {\n  return value === \"normal\" || value === \"large\" || value === \"xlarge\";\n}\n\n/**\n * The size in force: **this device's own choice → the account's → Normal** (§2.2, §2.6).\n * Each is taken only when it is one of {@link TEXT_SIZES}; anything else (a stale value,\n * `null` = never chosen) falls through to the next. The one order the pre-paint call, the\n * apply hook and `useAccountAppearance` all use, so the three can never disagree.\n */\nexport function resolveTextSize(device: unknown, account?: unknown): TextSize {\n  if (isTextSize(device)) return device;\n  if (isTextSize(account)) return account;\n  return \"normal\";\n}\n\n/* ── <html data-text-size> and the subscribers that read it ─────────────── */\n\nconst listeners = new Set<() => void>();\nlet observer: MutationObserver | null = null;\n\nfunction notify(): void {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void): () => void {\n  listeners.add(listener);\n  // Also catches writers that are not this module — the inline boot snippet, an app\n  // setting the attribute by hand, a test.\n  if (!observer && typeof MutationObserver !== \"undefined\" && typeof document !== \"undefined\") {\n    observer = new MutationObserver(notify);\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: [TEXT_SIZE_ATTRIBUTE] });\n  }\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0) {\n      observer?.disconnect();\n      observer = null;\n    }\n  };\n}\n\n/** The size `<html>` carries now; Normal without one (or outside a browser). */\nexport function readTextSize(): TextSize {\n  if (typeof document === \"undefined\") return \"normal\";\n  const value = document.documentElement.getAttribute(TEXT_SIZE_ATTRIBUTE);\n  return isTextSize(value) ? value : \"normal\";\n}\n\n/** Put `size` on `<html>`. Every {@link useTextSize} re-renders with it. */\nexport function applyTextSize(size: TextSize): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  if (root.getAttribute(TEXT_SIZE_ATTRIBUTE) === size) return;\n  root.setAttribute(TEXT_SIZE_ATTRIBUTE, size);\n  notify();\n}\n\nexport interface TextSizeInfo {\n  size: TextSize;\n  /** {@link TEXT_SCALE} for `size`: 1, 1.25 or 1.5. */\n  scale: number;\n}\n\n/**\n * The size in force on this page, and its scale (§3.1) — read from `<html>`, so it needs\n * no store and works in every kit component: whoever applied the size (the app's store,\n * the pre-paint call, the inline snippet), this follows it.\n *\n * Only for what CSS cannot do. A class that should differ at Large is a `large:`\n * variant; a layout switch is a breakpoint, which already scales.\n */\nexport function useTextSize(): TextSizeInfo {\n  const size = useSyncExternalStore(subscribe, readTextSize, () => \"normal\" as const);\n  return useMemo(() => ({ size, scale: TEXT_SCALE[size] }), [size]);\n}\n\n/* ── Storage: the frozen format, the pre-paint call ─────────────────────── */\n\n/**\n * What a text-size store persists under its key — zustand's persist envelope, and FROZEN\n * (§10.3) because an app's inline `<head>` snippet reads it before any module loads:\n *\n *     {\"state\":{\"size\":\"large\"},\"version\":1}\n *\n * `size` is one of {@link TEXT_SIZES}, or `null` / absent when this device never chose.\n * A future change adds a key; it never renames `state.size` or changes its values.\n *\n * A hand-written seed (a test, a screenshot script) must carry `\"version\":1`: the store\n * drops a stored state of another version as a migration it doesn't know, silently\n * (keksdose's 0.32 report). The inline snippet reads `state.size` whatever the version,\n * so the two would disagree. In the kit's showcase, `?text-size=` needs no seed.\n */\nexport interface PersistedTextSize {\n  state?: { size?: TextSize | null };\n  version?: number;\n}\n\n/** The frozen format holding a size this kit knows — the shape `readStoredJson` admits. */\nconst holdsTextSize = (blob: unknown): blob is { state: { size: TextSize } } =>\n  isTextSize((blob as PersistedTextSize | null)?.state?.size);\n\n/** This device's own choice under `storageKey`, or `null` when it never chose (or the\n *  storage is blocked, malformed, or holds a value that is not a size). */\nexport function readPersistedTextSize(storageKey: string): TextSize | null {\n  return readStoredJson(storageKey, holdsTextSize)?.state.size ?? null;\n}\n\nexport interface PersistedAppearanceOptions {\n  /**\n   * The account's last known value, for a device without a choice of its own (§10.3):\n   * what the app persisted with its user (keksdose keeps `/auth/me` in localStorage), so\n   * a cold boot paints the account's size instead of Normal and then jumping — offline\n   * too. Called once, guarded: a throw counts as \"no account value\".\n   */\n  account?: () => string | null | undefined;\n}\n\nfunction readAccount(account: PersistedAppearanceOptions[\"account\"]): unknown {\n  if (!account) return undefined;\n  try {\n    return account();\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * Pre-paint (§3.1, §10.3): read this device's choice under `storageKey` — else the\n * account's last known value — and put it on `<html>` BEFORE `createRoot`, next to\n * `applyPersistedTheme`, so the first paint already has the right size. Returns the size\n * applied.\n *\n * ```ts\n * applyPersistedTextSize(\"keksdose-text-size\", {\n *   account: () => readPersistedUser()?.text_size,\n * });\n * ```\n */\nexport function applyPersistedTextSize(storageKey: string, options: PersistedAppearanceOptions = {}): TextSize {\n  const size = resolveTextSize(readPersistedTextSize(storageKey), readAccount(options.account));\n  applyTextSize(size);\n  return size;\n}\n\n/**\n * The same pre-paint as {@link applyPersistedTextSize}, as an inline `<head>` script for\n * a boot splash painted from `index.html` before any module runs (§10.3). A function\n * EXPRESSION: call it with the storage key and, optionally, a function returning the\n * account's last known value.\n *\n * ```html\n * <script>\n *   (function(k,a){…})(\"keksdose-text-size\", function () {\n *     return JSON.parse(localStorage.getItem(\"keksdose-auth\")).state.user.text_size;\n *   });\n * </script>\n * ```\n *\n * Paste the constant's value in place of `(function(k,a){…})`. It reads the frozen\n * {@link PersistedTextSize} format, never throws, and sets only `data-text-size`.\n *\n * The splash sizes in rem, and needs the root rules inline beside it, since the app's\n * stylesheet is a separate request and arrives after the splash paints (0.32.1,\n * keksdose's 0.32 report: that is every app, not an edge case):\n *\n * ```html\n * <style>html[data-text-size=large]{font-size:125%}html[data-text-size=xlarge]{font-size:150%}</style>\n * ```\n *\n * Under a hash-based Content Security Policy (`script-src 'sha256-…'`) this is a second\n * inline script with its own hash: add it to the policy, and recompute it whenever the\n * storage key or the account function in the call changes (keksdose added it to both\n * its Caddyfiles, and its guard test hashes every inline script).\n */\nexport const TEXT_SIZE_INLINE_SCRIPT =\n  \"(function(k,a){function ok(v){return v==='normal'||v==='large'||v==='xlarge'}\" +\n  \"var v=null;try{var s=JSON.parse(localStorage.getItem(k)||'null');v=s&&s.state&&s.state.size}catch(e){}\" +\n  \"if(!ok(v)){v=null;try{v=a?a():null}catch(e){}}\" +\n  \"try{document.documentElement.setAttribute('data-text-size',ok(v)?v:'normal')}catch(e){}})\";\n\n/* ── The store ──────────────────────────────────────────────────────────── */\n\nexport interface TextSizeState {\n  /** This device's own choice (persisted), or `null` when it never chose — then the\n   *  account's value applies (§2.2). */\n  size: TextSize | null;\n  /** Store this device's choice; `null` forgets it, so the account's applies again. */\n  setSize: (size: TextSize | null) => void;\n}\n\nexport interface ApplyTextSizeOptions {\n  /** The account's value (`/auth/me`'s `text_size`): it applies while this device has no\n   *  choice of its own. Leave it out where there is no account. */\n  account?: string | null;\n}\n\n/**\n * Build a text-size store bound to a consumer-supplied localStorage key, shaped like\n * `createThemeStore` (§6). It holds the DEVICE's choice only; the account's value comes\n * in through `useApplyTextSize({ account })` and `useAccountAppearance`, and the size in\n * force is always {@link resolveTextSize} of the two.\n *\n * - `useTextSizeStore` — the zustand hook: `size` (device choice or null) and `setSize`.\n * - `useApplyTextSize({ account })` — the effect that puts the size in force on `<html>`.\n *   Mount it once near the root, beside `useApplyTheme`.\n *\n * The persisted format is {@link PersistedTextSize}, and frozen.\n */\nexport function createTextSizeStore(storageKey: string) {\n  const useTextSizeStore = create<TextSizeState>()(\n    logger(\n      persist(\n        (set) => ({\n          size: null,\n          setSize: (size) => set({ size: isTextSize(size) ? size : null }),\n        }),\n        {\n          name: storageKey,\n          version: 1,\n          partialize: (s) => ({ size: s.size }),\n          // A hand-edited or future value must not reach <html> as an unknown size.\n          merge: (persisted, current) => ({\n            ...current,\n            size: isTextSize((persisted as { size?: unknown } | null)?.size)\n              ? (persisted as { size: TextSize }).size\n              : null,\n          }),\n        },\n      ),\n      \"text-size\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): no choice on\n  // this device, so `useApplyTextSize` re-resolves to the account's size, else Normal.\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => useTextSizeStore.getState().setSize(null),\n  });\n\n  function useApplyTextSize({ account }: ApplyTextSizeOptions = {}): TextSize {\n    const device = useTextSizeStore((s) => s.size);\n    const size = resolveTextSize(device, account);\n    useEffect(() => {\n      applyTextSize(size);\n    }, [size]);\n    return size;\n  }\n\n  return { useTextSizeStore, useApplyTextSize };\n}\n\nexport type TextSizeStore = ReturnType<typeof createTextSizeStore>;\n"],"mappings":"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","names":[]}

package/dist/theme/theme-store.js

@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { logger } from "../lib/logger.js";
+import { readStoredJson } from "../lib/safe-storage.js";
 import { registerDeviceSetting } from "../lib/device-settings.js";
 function systemPreference() {
   try {
@@ -27,13 +28,9 @@ function applyThemeClass(mode) {
   else root.classList.remove("dark");
   root.style.colorScheme = mode;
 }
+const isEnvelope = (blob) => typeof blob === "object" && blob !== null;
 function applyPersistedTheme(storageKey) {
-  let preference = "system";
-  try {
-    const blob = JSON.parse(localStorage.getItem(storageKey) ?? "{}");
-    preference = preferenceFromState(blob.state);
-  } catch {
-  }
+  const preference = preferenceFromState(readStoredJson(storageKey, isEnvelope)?.state);
   const mode = resolve(preference);
   applyThemeClass(mode);
   return mode;

package/dist/theme/theme-store.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/theme-store.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n/** What the user chose; \"system\" tracks the OS `prefers-color-scheme`. */\nexport type ThemePreference = \"light\" | \"dark\" | \"system\";\n\nexport interface ThemeState {\n  /** The user's choice (persisted). */\n  preference: ThemePreference;\n  /** The RESOLVED light/dark actually in effect (system → OS). Read this for\n   *  anything that needs the concrete theme (e.g. token selection, toasts). */\n  mode: ThemeMode;\n  setPreference: (preference: ThemePreference) => void;\n  /** Set an explicit light/dark choice (preference follows). */\n  setMode: (mode: ThemeMode) => void;\n  /** Flip the effective theme to the opposite explicit choice. */\n  toggle: () => void;\n}\n\nfunction systemPreference(): ThemeMode {\n  try {\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n  } catch {\n    return \"light\";\n  }\n}\n\nfunction resolve(preference: ThemePreference): ThemeMode {\n  return preference === \"system\" ? systemPreference() : preference;\n}\n\n/** Normalize a persisted theme-state blob to a valid preference. Older blobs\n *  persisted the concrete `mode` (light/dark); carry that over as an explicit\n *  preference so the choice survives. Shared by the store's `migrate` and the\n *  pre-hydration {@link applyPersistedTheme}. */\nfunction preferenceFromState(s: { mode?: string; preference?: string } | null | undefined): ThemePreference {\n  if (s?.preference === \"light\" || s?.preference === \"dark\" || s?.preference === \"system\") {\n    return s.preference;\n  }\n  if (s?.mode === \"light\" || s?.mode === \"dark\") return s.mode;\n  return \"system\";\n}\n\n/**\n * Toggle the `.dark` class on <html> for a resolved light/dark mode, and say the same\n * to the BROWSER through `color-scheme` (0.47, keksdose dev #600): the class switches\n * the kit's tokens, but everything the browser paints itself — a native `<select>`'s\n * open list, a date input's popup, scrollbars, autofill — follows `color-scheme` only,\n * and stayed light on the dark theme. Inline on <html>, so it holds whatever an app's\n * stylesheet says, and it is set by the pre-paint {@link applyPersistedTheme} too.\n */\nfunction applyThemeClass(mode: ThemeMode): void {\n  const root = document.documentElement;\n  if (mode === \"dark\") root.classList.add(\"dark\");\n  else root.classList.remove(\"dark\");\n  root.style.colorScheme = mode;\n}\n\n/**\n * Pre-hydration: read the theme PREFERENCE persisted under `storageKey` straight\n * from localStorage, resolve it to a concrete light/dark mode, and toggle the\n * `.dark` class (and `color-scheme`) on <html> — BEFORE React and the store mount,\n * so the first paint already has the right theme (no flash). Returns the resolved\n * mode so the caller can chain {@link applyPersistedPalette}. Encapsulates the\n * zustand-persist envelope + the legacy `mode`→`preference` fallback so apps never re-type the\n * storage shape in their entrypoint.\n */\nexport function applyPersistedTheme(storageKey: string): ThemeMode {\n  let preference: ThemePreference = \"system\";\n  try {\n    const blob = JSON.parse(localStorage.getItem(storageKey) ?? \"{}\") as {\n      state?: { mode?: string; preference?: string };\n    };\n    preference = preferenceFromState(blob.state);\n  } catch {\n    /* malformed storage → system */\n  }\n  const mode = resolve(preference);\n  applyThemeClass(mode);\n  return mode;\n}\n\n/**\n * Build a theme store bound to a consumer-supplied localStorage key. Tracks a\n * light/dark/system PREFERENCE (feedback #330) and exposes the resolved `mode`.\n * Returns the `useTheme` hook plus a `useApplyTheme` effect that toggles the\n * `.dark` class on <html> and, while on \"system\", follows OS theme changes live.\n */\nexport function createThemeStore(storageKey: string) {\n  const useTheme = create<ThemeState>()(\n    logger(\n      persist(\n        (set, get) => ({\n          preference: \"system\" as ThemePreference,\n          mode: systemPreference(),\n          setPreference: (preference) => set({ preference, mode: resolve(preference) }),\n          setMode: (mode) => set({ preference: mode, mode }),\n          toggle: () => {\n            const next: ThemeMode = get().mode === \"dark\" ? \"light\" : \"dark\";\n            set({ preference: next, mode: next });\n          },\n        }),\n        {\n          name: storageKey,\n          version: 2,\n          // Only the preference is persisted; `mode` is derived on load.\n          partialize: (s) => ({ preference: s.preference }),\n          migrate: (persistedState): { preference: ThemePreference } => ({\n            preference: preferenceFromState(persistedState as { mode?: string; preference?: string } | null),\n          }),\n          onRehydrateStorage: () => (state) => {\n            // The persisted preference decides the concrete mode at load.\n            if (state) state.mode = resolve(state.preference);\n          },\n        },\n      ),\n      \"theme\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): back to\n  // \"System\" through the setter, which re-resolves `mode`; `useApplyTheme` puts the\n  // class back and follows the OS again, and the persisted blob is what the pre-paint\n  // `applyPersistedTheme` reads next load.\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => useTheme.getState().setPreference(\"system\"),\n  });\n\n  function useApplyTheme(): void {\n    const mode = useTheme((s) => s.mode);\n    const preference = useTheme((s) => s.preference);\n    useEffect(() => {\n      applyThemeClass(mode);\n    }, [mode]);\n    // While tracking the system, follow OS theme changes live.\n    useEffect(() => {\n      if (preference !== \"system\") return;\n      let mq: MediaQueryList;\n      try {\n        mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n      } catch {\n        return;\n      }\n      const onChange = () => useTheme.setState({ mode: mq.matches ? \"dark\" : \"light\" });\n      onChange();\n      mq.addEventListener?.(\"change\", onChange);\n      return () => mq.removeEventListener?.(\"change\", onChange);\n    }, [preference]);\n  }\n\n  return { useTheme, useApplyTheme };\n}\n\nexport type ThemeStore = ReturnType<typeof createThemeStore>;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/theme/theme-store.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { readStoredJson } from \"../lib/safe-storage\";\nimport { registerDeviceSetting } from \"../lib/device-settings\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n/** What the user chose; \"system\" tracks the OS `prefers-color-scheme`. */\nexport type ThemePreference = \"light\" | \"dark\" | \"system\";\n\nexport interface ThemeState {\n  /** The user's choice (persisted). */\n  preference: ThemePreference;\n  /** The RESOLVED light/dark actually in effect (system → OS). Read this for\n   *  anything that needs the concrete theme (e.g. token selection, toasts). */\n  mode: ThemeMode;\n  setPreference: (preference: ThemePreference) => void;\n  /** Set an explicit light/dark choice (preference follows). */\n  setMode: (mode: ThemeMode) => void;\n  /** Flip the effective theme to the opposite explicit choice. */\n  toggle: () => void;\n}\n\nfunction systemPreference(): ThemeMode {\n  try {\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n  } catch {\n    return \"light\";\n  }\n}\n\nfunction resolve(preference: ThemePreference): ThemeMode {\n  return preference === \"system\" ? systemPreference() : preference;\n}\n\n/** Normalize a persisted theme-state blob to a valid preference. Older blobs\n *  persisted the concrete `mode` (light/dark); carry that over as an explicit\n *  preference so the choice survives. Shared by the store's `migrate` and the\n *  pre-hydration {@link applyPersistedTheme}. */\nfunction preferenceFromState(s: { mode?: string; preference?: string } | null | undefined): ThemePreference {\n  if (s?.preference === \"light\" || s?.preference === \"dark\" || s?.preference === \"system\") {\n    return s.preference;\n  }\n  if (s?.mode === \"light\" || s?.mode === \"dark\") return s.mode;\n  return \"system\";\n}\n\n/**\n * Toggle the `.dark` class on <html> for a resolved light/dark mode, and say the same\n * to the BROWSER through `color-scheme` (0.47, keksdose dev #600): the class switches\n * the kit's tokens, but everything the browser paints itself — a native `<select>`'s\n * open list, a date input's popup, scrollbars, autofill — follows `color-scheme` only,\n * and stayed light on the dark theme. Inline on <html>, so it holds whatever an app's\n * stylesheet says, and it is set by the pre-paint {@link applyPersistedTheme} too.\n */\nfunction applyThemeClass(mode: ThemeMode): void {\n  const root = document.documentElement;\n  if (mode === \"dark\") root.classList.add(\"dark\");\n  else root.classList.remove(\"dark\");\n  root.style.colorScheme = mode;\n}\n\n/** zustand's envelope, any object; `preferenceFromState` reads only the two names it knows. */\nconst isEnvelope = (blob: unknown): blob is { state?: { mode?: string; preference?: string } } =>\n  typeof blob === \"object\" && blob !== null;\n\n/**\n * Pre-hydration: read the theme PREFERENCE persisted under `storageKey` straight\n * from localStorage, resolve it to a concrete light/dark mode, and toggle the\n * `.dark` class (and `color-scheme`) on <html> — BEFORE React and the store mount,\n * so the first paint already has the right theme (no flash). Returns the resolved\n * mode so the caller can chain {@link applyPersistedPalette}. Encapsulates the\n * zustand-persist envelope + the legacy `mode`→`preference` fallback so apps never re-type the\n * storage shape in their entrypoint.\n */\nexport function applyPersistedTheme(storageKey: string): ThemeMode {\n  // Absent, blocked or malformed storage → \"system\", through `preferenceFromState`.\n  const preference = preferenceFromState(readStoredJson(storageKey, isEnvelope)?.state);\n  const mode = resolve(preference);\n  applyThemeClass(mode);\n  return mode;\n}\n\n/**\n * Build a theme store bound to a consumer-supplied localStorage key. Tracks a\n * light/dark/system PREFERENCE (feedback #330) and exposes the resolved `mode`.\n * Returns the `useTheme` hook plus a `useApplyTheme` effect that toggles the\n * `.dark` class on <html> and, while on \"system\", follows OS theme changes live.\n */\nexport function createThemeStore(storageKey: string) {\n  const useTheme = create<ThemeState>()(\n    logger(\n      persist(\n        (set, get) => ({\n          preference: \"system\" as ThemePreference,\n          mode: systemPreference(),\n          setPreference: (preference) => set({ preference, mode: resolve(preference) }),\n          setMode: (mode) => set({ preference: mode, mode }),\n          toggle: () => {\n            const next: ThemeMode = get().mode === \"dark\" ? \"light\" : \"dark\";\n            set({ preference: next, mode: next });\n          },\n        }),\n        {\n          name: storageKey,\n          version: 2,\n          // Only the preference is persisted; `mode` is derived on load.\n          partialize: (s) => ({ preference: s.preference }),\n          migrate: (persistedState): { preference: ThemePreference } => ({\n            preference: preferenceFromState(persistedState as { mode?: string; preference?: string } | null),\n          }),\n          onRehydrateStorage: () => (state) => {\n            // The persisted preference decides the concrete mode at load.\n            if (state) state.mode = resolve(state.preference);\n          },\n        },\n      ),\n      \"theme\",\n    ),\n  );\n  // Reset this device's settings (docs/settings-harmonization.md §11.4): back to\n  // \"System\" through the setter, which re-resolves `mode`; `useApplyTheme` puts the\n  // class back and follows the OS again, and the persisted blob is what the pre-paint\n  // `applyPersistedTheme` reads next load.\n  registerDeviceSetting({\n    key: storageKey,\n    kind: \"appearance\",\n    reset: () => useTheme.getState().setPreference(\"system\"),\n  });\n\n  function useApplyTheme(): void {\n    const mode = useTheme((s) => s.mode);\n    const preference = useTheme((s) => s.preference);\n    useEffect(() => {\n      applyThemeClass(mode);\n    }, [mode]);\n    // While tracking the system, follow OS theme changes live.\n    useEffect(() => {\n      if (preference !== \"system\") return;\n      let mq: MediaQueryList;\n      try {\n        mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n      } catch {\n        return;\n      }\n      const onChange = () => useTheme.setState({ mode: mq.matches ? \"dark\" : \"light\" });\n      onChange();\n      mq.addEventListener?.(\"change\", onChange);\n      return () => mq.removeEventListener?.(\"change\", onChange);\n    }, [preference]);\n  }\n\n  return { useTheme, useApplyTheme };\n}\n\nexport type ThemeStore = ReturnType<typeof createThemeStore>;\n"],"mappings":"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","names":[]}