@eifi1/ui-kit 0.15.3 → 0.15.5

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/palette-derive.ts"],"sourcesContent":["import type { ThemeMode } from \"./theme-store\";\nimport type { TokenSet } from \"./palette-presets\";\nimport type { HeatStops } from \"./chart-palette\";\nimport {\n  contrast,\n  deltaE,\n  toHex,\n  hexToOklch,\n  oklchToHex,\n  parseHex,\n  rgbToOklch,\n  simulateCvd,\n  solveLightness,\n} from \"./color\";\nimport type { CvdType, Oklch } from \"./color\";\n\n/**\n * Build a whole palette from one brand colour, plus any number of colours pinned by\n * hand, with every contrast ratio SOLVED rather than chosen and then hoped for.\n *\n * The presets this package shipped were assembled by eye and annotated with the ratios\n * they were believed to hold — `tokens.css` records \"7.0:1 and 4.8:1\", and\n * `palette-presets.ts` records \"2.67:1 … lifted they clear it at 3.30:1\". Nothing\n * computed any of them, and the audit found four of the nine default light chart hues\n * below the 3:1 that WCAG 1.4.11 requires of a graphical object. A comment is not a\n * test. Everything here is derived to a target and then measured, and\n * {@link auditPalette} returns the measurements so a caller can refuse a palette that\n * does not hold up.\n *\n * WHAT IS DERIVED AND WHAT IS NOT. The UI palette and the CATEGORICAL CHART RAMP solve\n * different problems and are deliberately kept apart. A UI colour needs contrast against\n * one known surface and carries a fixed meaning; a chart colour needs to stay separable\n * from eight unknown siblings, at roughly equal salience, with no implied order.\n * Optimising a set for one makes it worse at the other, which is why `deriveTokenSet`\n * leaves `chart` alone unless you explicitly ask for {@link deriveChartRamp}.\n */\n\n/* ── Inputs ───────────────────────────────────────────────────────────────── */\n\n/** A role whose hue may be pinned by the caller instead of chosen by the deriver. */\nexport type AnchorRole = \"brand\" | \"accent\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n\nexport type PaletteAnchors = { brand: string } & Partial<Record<Exclude<AnchorRole, \"brand\">, string>>;\n\nexport interface DeriveOptions {\n  anchors: PaletteAnchors;\n  mode: ThemeMode;\n  /**\n   * How strongly the surfaces carry the brand's hue, 0–1 of the maximum useful tint.\n   * 0 gives neutral greys; the shipped default is a visible warmth, because a page that\n   * is very slightly the brand's hue reads as considered where a pure grey reads as\n   * unstyled. Above ~0.5 the surfaces start competing with the content.\n   */\n  surfaceTint?: number;\n  /** Contrast targets for the three text roles against the WORST surface. */\n  textContrast?: { primary?: number; secondary?: number; muted?: number };\n}\n\n/* ── Outputs ──────────────────────────────────────────────────────────────── */\n\n/** The semantic layer, which lives in tokens.css rather than in `TokenSet`. */\nexport interface SemanticTokens {\n  danger: string;\n  dangerHover: string;\n  dangerContrast: string;\n  dangerBorder: string;\n  dangerBg: string;\n  warning: string;\n  warningBorder: string;\n  warningBg: string;\n  info: string;\n  infoBorder: string;\n  infoBg: string;\n  success: string;\n  successBorder: string;\n  successBg: string;\n  /** Present only when a `accent` (secondary brand) anchor was supplied. */\n  accent?: string;\n  accentContrast?: string;\n  accentBg?: string;\n}\n\nexport interface ContrastCheck {\n  /** e.g. \"textMuted on bgPage\". */\n  pair: string;\n  ratio: number;\n  /** What WCAG asks of this pair. */\n  required: number;\n  /** Which rule the requirement comes from, for a reader who wants to argue with it. */\n  rule: string;\n  passes: boolean;\n}\n\nexport interface ContrastReport {\n  checks: ContrastCheck[];\n  failures: ContrastCheck[];\n  passes: boolean;\n}\n\nexport interface DerivedPalette {\n  tokens: TokenSet;\n  semantic: SemanticTokens;\n  audit: ContrastReport;\n  /** Compromises the deriver had to make, in plain words. Never silent. */\n  warnings: string[];\n}\n\n/* ── The hue homes ────────────────────────────────────────────────────────── */\n\n/**\n * Where each semantic role wants to sit, and how far it may be pushed.\n *\n * A semantic colour is a convention before it is an aesthetic: danger is red because\n * every other interface the user has ever used made it red, and a \"danger\" button in\n * the brand's teal is a worse button however well it matches. So each role has a home\n * hue and a narrow licence to move — enough to get out of the brand's way when the\n * brand happens to live in the same neighbourhood, not enough to stop meaning what it\n * means. If it cannot get far enough, that is a warning, not a silent compromise.\n */\nconst HUE_HOME: Record<Exclude<AnchorRole, \"brand\" | \"accent\">, { hue: number; slack: number }> = {\n  danger: { hue: 27, slack: 14 },\n  warning: { hue: 75, slack: 16 },\n  success: { hue: 150, slack: 20 },\n  info: { hue: 240, slack: 22 },\n};\n\n/** Circular distance between two hue angles, 0–180. */\nfunction hueGap(a: number, b: number): number {\n  const d = Math.abs(((a - b) % 360) + 360) % 360;\n  return d > 180 ? 360 - d : d;\n}\n\n/**\n * Nudge `home` within `slack` to maximise the distance from every taken hue.\n *\n * Sampled rather than solved: the objective is a min-of-distances over a handful of\n * points on a short arc, which is piecewise-linear with kinks wherever the nearest\n * neighbour changes. Gradient methods stall on those kinks; 2° steps over a ±22° arc is\n * 23 evaluations of some trigonometry and cannot stall.\n */\nfunction placeHue(home: number, slack: number, taken: number[]): number {\n  let best = home;\n  let bestGap = Math.min(...taken.map((t) => hueGap(home, t)), 360);\n  for (let d = -slack; d <= slack; d += 2) {\n    const h = (home + d + 360) % 360;\n    const gap = Math.min(...taken.map((t) => hueGap(h, t)), 360);\n    // Ties go to the hue nearest home: a role should move only as far as it must.\n    if (gap > bestGap + 1e-9) {\n      best = h;\n      bestGap = gap;\n    }\n  }\n  return best;\n}\n\n/* ── Derivation ───────────────────────────────────────────────────────────── */\n\nconst SURFACE_L = {\n  // Light: the PAGE is slightly darker than the cards on it, so a card reads as raised\n  // without needing a shadow to say so. Matches the shipped presets' relationship.\n  light: { page: 0.912, surface: 0.945, surface2: 0.929 },\n  dark: { page: 0.158, surface: 0.206, surface2: 0.249 },\n} as const;\n\n/**\n * What a hairline has to clear against the surface it divides.\n *\n * WCAG has nothing to say here — a decorative border is not a graphical object that\n * conveys information — so this is a house rule, and it is deliberately low. A border\n * that clears 3:1 is a RULE, not a hairline: it draws the eye to the box instead of to\n * what is in it. 1.5:1 is the point at which the edge is reliably findable without\n * becoming part of the composition.\n */\nconst BORDER_CONTRAST = 1.5;\n\n/** The most tint a surface can carry before it stops reading as a neutral ground. */\nconst MAX_SURFACE_CHROMA = 0.034;\n\nfunction surfaceSet(hue: number, mode: ThemeMode, tint: number) {\n  const c = MAX_SURFACE_CHROMA * Math.max(0, Math.min(1, tint));\n  const L = SURFACE_L[mode];\n  const bgPage = oklchToHex({ l: L.page, c, h: hue });\n  const bgSurface = oklchToHex({ l: L.surface, c, h: hue });\n  const bgSurface2 = oklchToHex({ l: L.surface2, c, h: hue });\n  // Solved, not guessed: a fixed lightness that looks right against a pale warm ground\n  // disappears against a deep cold one, and both are reachable from the same `hue`\n  // input. The border carries a little more chroma than the surfaces because at these\n  // lightnesses a perfectly neutral hairline on a tinted ground reads as a wrong grey.\n  const borderChroma = c * 1.6;\n  // Solved against the surface the hairline is HARDEST to see on, not against one of\n  // the three. Solving against `bgSurface` alone left it at 1.36:1 on `bgPage`, so the\n  // target and the audit disagreed about the same border.\n  const hardest = [bgPage, bgSurface, bgSurface2].reduce((a, b) =>\n    contrast(a, mode === \"light\" ? \"#000000\" : \"#ffffff\") <\n    contrast(b, mode === \"light\" ? \"#000000\" : \"#ffffff\")\n      ? a\n      : b,\n  );\n  const borderL = solveLightness(\n    BORDER_CONTRAST,\n    parseHex(hardest)!,\n    hue,\n    borderChroma,\n    mode === \"light\" ? \"darker\" : \"lighter\",\n  );\n  return {\n    bgPage,\n    bgSurface,\n    bgSurface2,\n    border: oklchToHex({ l: borderL, c: borderChroma, h: hue }),\n  };\n}\n\n/** Solve a colour at this hue that clears `target` against `against`, keeping chroma. */\nfunction solveAgainst(hue: number, chroma: number, target: number, against: string, mode: ThemeMode): string {\n  const bg = parseHex(against)!;\n  const l = solveLightness(target, bg, hue, chroma, mode === \"light\" ? \"darker\" : \"lighter\");\n  return oklchToHex({ l, c: chroma, h: hue });\n}\n\n/** Whichever of near-white / near-black reads better ON `fill`. */\nfunction contrastOn(fill: string): string {\n  const light = \"#ffffff\";\n  const dark = \"#12100e\";\n  return contrast(fill, light) >= contrast(fill, dark) ? light : dark;\n}\n\n/** A soft tint of `hue` sitting on the surface — a badge fill, not a button fill. */\nfunction tintOn(hue: number, chroma: number, surface: string, mode: ThemeMode): string {\n  const s = hexToOklch(surface)!;\n  // Toward the colour, but only far enough to be seen: these back TEXT of the same hue,\n  // and a strong tint leaves the text nowhere to go.\n  const l = mode === \"light\" ? s.l - 0.055 : s.l + 0.055;\n  return oklchToHex({ l, c: Math.min(chroma * 0.45, 0.06), h: hue });\n}\n\nexport function derivePalette({\n  anchors,\n  mode,\n  surfaceTint = 0.55,\n  textContrast,\n}: DeriveOptions): DerivedPalette {\n  const warnings: string[] = [];\n  const brand = hexToOklch(anchors.brand);\n  if (!brand) {\n    throw new Error(\n      `derivePalette: brand \"${anchors.brand}\" is not a #rgb or #rrggbb colour. ` +\n        `Anchors must be hex — a named colour or an rgba() string cannot be converted.`,\n    );\n  }\n\n  const targets = { primary: 10, secondary: 7, muted: 4.6, ...textContrast };\n\n  // ── Surfaces, from the brand's hue.\n  const surfaces = surfaceSet(brand.h, mode, surfaceTint);\n  // Every text role is solved against the WORST of the three, so a token is legible\n  // wherever it lands. Solving against `bgSurface` alone is the mistake that makes a\n  // muted label fail on the page background it also sits on.\n  const worstSurface = [surfaces.bgPage, surfaces.bgSurface, surfaces.bgSurface2].reduce((a, b) =>\n    contrast(a, mode === \"light\" ? \"#000000\" : \"#ffffff\") <\n    contrast(b, mode === \"light\" ? \"#000000\" : \"#ffffff\")\n      ? a\n      : b,\n  );\n\n  // ── Text. A trace of the brand hue keeps the greys from reading cold on a warm page.\n  const textChroma = 0.014;\n  const textPrimary = solveAgainst(brand.h, textChroma, targets.primary, worstSurface, mode);\n  const textSecondary = solveAgainst(brand.h, textChroma, targets.secondary, worstSurface, mode);\n  const textMuted = solveAgainst(brand.h, textChroma, targets.muted, worstSurface, mode);\n\n  // ── Brand. Keep the hue the caller asked for; move only the lightness, and only as\n  // far as 3:1 against the worst surface — WCAG 1.4.11, since a brand-filled control is\n  // a graphical object whose boundary has to be perceivable.\n  const brandChroma = Math.max(brand.c, 0.06);\n  const brandRatio = contrast(anchors.brand, worstSurface);\n  // NORMALISED, never the caller's raw string. `parseHex` accepts \"4f46e5\" and \"#abc\",\n  // and passing either through unchanged put a value in the TokenSet that is not a CSS\n  // colour — it then fails silently at paint time, three layers from here.\n  const brandHex =\n    brandRatio >= 3\n      ? toHex(parseHex(anchors.brand)!)\n      : solveAgainst(brand.h, brandChroma, 3, worstSurface, mode);\n  if (brandRatio < 3) {\n    warnings.push(\n      `brand ${anchors.brand} sits at ${brandRatio.toFixed(2)}:1 against the ${mode} surfaces, ` +\n        `below the 3:1 WCAG 1.4.11 asks of a control boundary. Lightness was adjusted to ` +\n        `${brandHex}; hue and chroma are unchanged.`,\n    );\n  }\n  const brandLch = hexToOklch(brandHex)!;\n  const brandHover = oklchToHex({\n    ...brandLch,\n    // Hover moves AWAY from the page in both themes: darker on light, lighter on dark.\n    l: mode === \"light\" ? brandLch.l - 0.06 : brandLch.l + 0.06,\n  });\n  const brandContrast = contrastOn(brandHex);\n  const onBrand = contrast(brandHex, brandContrast);\n  if (onBrand < 4.5) {\n    warnings.push(\n      `text on the brand fill reaches only ${onBrand.toFixed(2)}:1 (needs 4.5:1). ` +\n        `A mid-lightness, high-chroma brand cannot carry legible text at any ink; ` +\n        `use it as an accent and keep primary buttons on a darker or lighter variant.`,\n    );\n  }\n\n  // ── Semantic roles. Anchors are honoured exactly; the rest are placed away from the\n  // brand and from each other, within each role's licence to move.\n  const taken: number[] = [brandLch.h];\n  const accentLch = anchors.accent ? hexToOklch(anchors.accent) : null;\n  if (anchors.accent && !accentLch) {\n    warnings.push(`accent \"${anchors.accent}\" is not a hex colour and was ignored.`);\n  }\n  if (accentLch) taken.push(accentLch.h);\n\n  const semanticHue = {} as Record<Exclude<AnchorRole, \"brand\" | \"accent\">, number>;\n  const semanticChroma = {} as Record<Exclude<AnchorRole, \"brand\" | \"accent\">, number>;\n  for (const role of [\"danger\", \"warning\", \"success\", \"info\"] as const) {\n    const pinned = anchors[role] ? hexToOklch(anchors[role]!) : null;\n    if (anchors[role] && !pinned) {\n      warnings.push(`${role} \"${anchors[role]}\" is not a hex colour and was ignored.`);\n    }\n    const home = HUE_HOME[role];\n    const hue = pinned ? pinned.h : placeHue(home.hue, home.slack, taken);\n    if (!pinned) {\n      const gap = Math.min(...taken.map((t) => hueGap(hue, t)));\n      if (gap < 20) {\n        warnings.push(\n          `${role} could only reach ${gap.toFixed(0)}° from the nearest pinned hue, which is ` +\n            `too close to tell apart at a glance. Pin ${role} explicitly, or move the brand.`,\n        );\n      }\n    }\n    semanticHue[role] = hue;\n    semanticChroma[role] = pinned ? Math.max(pinned.c, 0.08) : 0.13;\n    taken.push(hue);\n  }\n\n  /**\n   * A semantic colour has two jobs and therefore two backgrounds: plain text on the\n   * page, and the label inside its own tinted badge. The badge is the harder of the\n   * two — it is a step toward the colour — so solving only against the surface produced\n   * a badge at 4.1:1 while the loose text passed, which is the failure mode that is\n   * hardest to notice because nine tenths of the uses look fine.\n   */\n  const sem = (role: Exclude<AnchorRole, \"brand\" | \"accent\">) => {\n    const hue = semanticHue[role];\n    const chroma = semanticChroma[role];\n    const bg = tintOn(hue, chroma, surfaces.bgSurface, mode);\n    const onSurface = solveLightness(\n      4.5,\n      parseHex(worstSurface)!,\n      hue,\n      chroma,\n      mode === \"light\" ? \"darker\" : \"lighter\",\n    );\n    const onTint = solveLightness(\n      4.5,\n      parseHex(bg)!,\n      hue,\n      chroma,\n      mode === \"light\" ? \"darker\" : \"lighter\",\n    );\n    const l = mode === \"light\" ? Math.min(onSurface, onTint) : Math.max(onSurface, onTint);\n    return oklchToHex({ l, c: chroma, h: hue });\n  };\n\n  const danger = sem(\"danger\");\n  const dangerLch = hexToOklch(danger)!;\n  const semantic: SemanticTokens = {\n    danger,\n    dangerHover: oklchToHex({\n      ...dangerLch,\n      l: mode === \"light\" ? dangerLch.l - 0.06 : dangerLch.l + 0.06,\n    }),\n    dangerContrast: contrastOn(danger),\n    dangerBorder: oklchToHex({\n      l: mode === \"light\" ? dangerLch.l + 0.22 : dangerLch.l - 0.22,\n      c: semanticChroma.danger,\n      h: semanticHue.danger,\n    }),\n    dangerBg: tintOn(semanticHue.danger, semanticChroma.danger, surfaces.bgSurface, mode),\n    warning: sem(\"warning\"),\n    warningBorder: oklchToHex({\n      l: mode === \"light\" ? 0.82 : 0.44,\n      c: semanticChroma.warning,\n      h: semanticHue.warning,\n    }),\n    warningBg: tintOn(semanticHue.warning, semanticChroma.warning, surfaces.bgSurface, mode),\n    info: sem(\"info\"),\n    infoBorder: oklchToHex({\n      l: mode === \"light\" ? 0.8 : 0.45,\n      c: semanticChroma.info,\n      h: semanticHue.info,\n    }),\n    infoBg: tintOn(semanticHue.info, semanticChroma.info, surfaces.bgSurface, mode),\n    success: sem(\"success\"),\n    successBorder: oklchToHex({\n      l: mode === \"light\" ? 0.81 : 0.45,\n      c: semanticChroma.success,\n      h: semanticHue.success,\n    }),\n    successBg: tintOn(semanticHue.success, semanticChroma.success, surfaces.bgSurface, mode),\n  };\n\n  if (accentLch) {\n    const accent = solveAgainst(accentLch.h, Math.max(accentLch.c, 0.06), 3, worstSurface, mode);\n    semantic.accent = accent;\n    semantic.accentContrast = contrastOn(accent);\n    semantic.accentBg = tintOn(accentLch.h, Math.max(accentLch.c, 0.06), surfaces.bgSurface, mode);\n  }\n\n  // ── Money. A THIRD system again: these are data colours with fixed meanings, and the\n  // one rule that outranks everything is that income and expense must never be the\n  // red/green pair — which is why the shipped presets use teal/amber/violet. Derived\n  // here at fixed hues rather than from the brand, for the same reason `--danger` is:\n  // a consumer who rebrands does not thereby change what \"money out\" looks like.\n  const money = (hue: number, target: number) => solveAgainst(hue, 0.12, target, worstSurface, mode);\n  const moneyIncome = money(175, 4.5);\n  const moneyExpense = money(70, 4.5);\n  const moneyNet = money(300, 4.5);\n  const moneyNeutral = oklchToHex({ l: mode === \"light\" ? 0.52 : 0.72, c: 0.012, h: brand.h });\n\n  const tokens: TokenSet = {\n    ...surfaces,\n    textPrimary,\n    textSecondary,\n    textMuted,\n    brand: brandHex,\n    brandHover,\n    brandContrast,\n    moneyIncome,\n    moneyExpense,\n    moneyNet,\n    moneyNeutral,\n    // Left alone. See the note at the top of this file about why the categorical ramp is\n    // not derived from the brand unless the caller asks.\n    //\n    // ⚠️ EMPTY, not absent: a caller who hands this straight to `applyTokenSet` keeps\n    // whatever `--chart-1…9` were already on the element. That is deliberate — the ramp\n    // is a separate decision and clearing it would leave charts unpainted — but it means\n    // a derived palette applied over another preset is a MIX until you also supply a\n    // ramp. `deriveChartRamp` is how you supply one.\n    chart: [],\n    heat: deriveHeat(moneyIncome, moneyExpense, surfaces, mode),\n  };\n\n  return { tokens, semantic, audit: auditPalette(tokens, semantic), warnings };\n}\n\n/**\n * Heatmap stops, reusing the money pair.\n *\n * `under` is the good direction and `over` the bad one, at the SAME hues as\n * `moneyIncome`/`moneyExpense` — so a heatmap cell and the figure printed beside it\n * agree about which way is which, rather than each inventing its own convention.\n */\nfunction deriveHeat(\n  income: string,\n  expense: string,\n  surfaces: { bgSurface2: string },\n  mode: ThemeMode,\n): HeatStops {\n  const exp = hexToOklch(expense)!;\n  return {\n    neutral: surfaces.bgSurface2,\n    under: income,\n    over: expense,\n    seqLow: oklchToHex({ l: mode === \"light\" ? 0.93 : 0.26, c: 0.05, h: exp.h }),\n    seqHigh: expense,\n    empty: mode === \"light\" ? \"rgba(120,110,95,0.14)\" : \"rgba(160,170,190,0.10)\",\n  };\n}\n\n/* ── Audit ────────────────────────────────────────────────────────────────── */\n\n/**\n * Measure every pair that has a requirement, and say which ones fail.\n *\n * This is the part the shipped presets were missing. `derivePalette` runs it on the way\n * out, and the preset test runs it over everything the package ships, so a palette that\n * does not hold up cannot be merged with a comment claiming that it does.\n */\nexport function auditPalette(t: TokenSet, semantic?: SemanticTokens): ContrastReport {\n  const checks: ContrastCheck[] = [];\n  const surfaces: Array<[string, string]> = [\n    [\"bgPage\", t.bgPage],\n    [\"bgSurface\", t.bgSurface],\n    [\"bgSurface2\", t.bgSurface2],\n  ];\n\n  const add = (pair: string, fg: string, bg: string, required: number, rule: string) => {\n    const ratio = contrast(fg, bg);\n    checks.push({ pair, ratio, required, rule, passes: ratio >= required - 0.05 });\n  };\n\n  for (const [name, bg] of surfaces) {\n    add(`textPrimary on ${name}`, t.textPrimary, bg, 7, \"WCAG 1.4.6 AAA body text\");\n    add(`textSecondary on ${name}`, t.textSecondary, bg, 4.5, \"WCAG 1.4.3 AA body text\");\n    add(`textMuted on ${name}`, t.textMuted, bg, 4.5, \"WCAG 1.4.3 AA body text\");\n    add(`brand on ${name}`, t.brand, bg, 3, \"WCAG 1.4.11 graphical object\");\n    add(`border on ${name}`, t.border, bg, 1.1, \"house rule: a hairline must be findable\");\n    for (const [key, hex] of [\n      [\"moneyIncome\", t.moneyIncome],\n      [\"moneyExpense\", t.moneyExpense],\n      [\"moneyNet\", t.moneyNet],\n    ] as const) {\n      add(`${key} on ${name}`, hex, bg, 4.5, \"WCAG 1.4.3 — these are rendered as TEXT\");\n    }\n  }\n\n  add(\"brandContrast on brand\", t.brandContrast, t.brand, 4.5, \"WCAG 1.4.3 AA body text\");\n\n  if (semantic) {\n    for (const [name, fg] of [\n      [\"danger\", semantic.danger],\n      [\"warning\", semantic.warning],\n      [\"info\", semantic.info],\n      [\"success\", semantic.success],\n    ] as const) {\n      add(`${name} on bgSurface`, fg, t.bgSurface, 4.5, \"WCAG 1.4.3 — rendered as text\");\n    }\n    add(\"danger on dangerBg\", semantic.danger, semantic.dangerBg, 4.5, \"WCAG 1.4.3 — badge text\");\n    add(\"warning on warningBg\", semantic.warning, semantic.warningBg, 4.5, \"WCAG 1.4.3 — badge text\");\n    add(\"info on infoBg\", semantic.info, semantic.infoBg, 4.5, \"WCAG 1.4.3 — badge text\");\n    add(\"success on successBg\", semantic.success, semantic.successBg, 4.5, \"WCAG 1.4.3 — badge text\");\n    add(\n      \"dangerContrast on danger\",\n      semantic.dangerContrast,\n      semantic.danger,\n      4.5,\n      \"WCAG 1.4.3 AA body text\",\n    );\n  }\n\n  const failures = checks.filter((c) => !c.passes);\n  return { checks, failures, passes: failures.length === 0 };\n}\n\n/* ── Categorical chart ramp ───────────────────────────────────────────────── */\n\nexport interface ChartRampReport {\n  colors: string[];\n  /** Series pairs that are too close under normal vision or any simulated CVD. */\n  collisions: Array<{ a: number; b: number; under: \"normal\" | CvdType; distance: number }>;\n  /** Series that do not clear 3:1 against a surface they may be drawn on. */\n  lowContrast: Array<{ index: number; surface: string; ratio: number }>;\n  /** The worst pairwise separation, across normal vision and all three dichromacies. */\n  minSeparation: number;\n  /** The worst contrast any series reaches against any surface it was measured on. */\n  minContrast: number;\n  passes: boolean;\n}\n\n/**\n * The floor for pairwise separation in OKLab, across normal vision and each dichromacy.\n *\n * CALIBRATED, not chosen. Paul Tol's \"Muted\" set — which this package ships and which is\n * a well-regarded CVD-safe palette — bottoms out at 0.059 in its light variant and 0.032\n * in the lightened dark one. A threshold above 0.059 would fail a palette that is known\n * to work, which is worse than having no check at all: an audit that cries wolf gets\n * switched off. 0.05 sits just under the known-good case.\n */\nconst MIN_SEPARATION = 0.05;\n\n/**\n * **The categorical trade-off, measured.** At a SINGLE lightness, the most series that\n * can satisfy both the 3:1 fill contrast of WCAG 1.4.11 and {@link MIN_SEPARATION} under\n * dichromacy is FOUR. Searched exhaustively over starting hue and lightness:\n *\n *   n=4  best separation 0.065  — both satisfiable\n *   n=5  best separation 0.041  — not satisfiable\n *   n=9  best separation 0.015  — not satisfiable\n *\n * The reason is structural: dichromacy collapses the red-green axis, so hue alone stops\n * distinguishing colours once you need more than a handful, and the remaining channel is\n * LIGHTNESS — the very thing a uniform-contrast ramp holds constant. Paul Tol's set\n * varies lightness deliberately and pays for it in contrast; that is not an oversight in\n * their palette, it is the only currency left.\n *\n * So above four series this deriver varies lightness too, and reports what it gave up\n * rather than pretending both constraints were met.\n *\n * NOTE ON WHAT THIS BOUND IS. It describes the PROBLEM, not a guarantee about\n * {@link deriveChartRamp}. That function fixes lightness and starts the hue wheel at the\n * brand's own hue rather than searching for the best start, so it reaches the bound only\n * where the brand happens to sit well: sweeping 72 brand hues against the default light\n * surfaces, 7 of 72 produced a passing 4-series ramp (12 of 72 on dark), and none passed\n * at 5 or 9. Read the report it returns; do not assume a pass.\n */\nconst SINGLE_LIGHTNESS_MAX_SERIES = 4;\n\n/**\n * A categorical ramp of `count` hues, evenly spaced and equal in perceived lightness,\n * then MEASURED for separability — including under each dichromacy.\n *\n * Offered but not used by default, and the distinction matters. Evenly spaced hues at\n * one lightness are a reasonable generic answer; Paul Tol's \"Muted\" set, which this\n * package ships, is a better specific one, because it was optimised against real\n * confusion lines rather than derived from a formula. So this exists for a consumer who\n * wants their charts to follow their brand and is willing to read the report — not as\n * a silent upgrade to the default.\n */\nexport function deriveChartRamp(\n  brandHex: string,\n  mode: ThemeMode,\n  surfaces: string[],\n  count = 9,\n): ChartRampReport {\n  const brand = hexToOklch(brandHex) ?? { l: 0.6, c: 0.12, h: 264 };\n  const base = mode === \"light\" ? 0.58 : 0.74;\n  const c = Math.max(0.09, Math.min(brand.c, 0.15));\n  // Up to four series, one lightness: a scale that varies lightness implies rank, and a\n  // categorical one must not. Beyond four, lightness is the only channel left that\n  // survives dichromacy — see SINGLE_LIGHTNESS_MAX_SERIES — so it alternates in a\n  // three-step cycle, which keeps ADJACENT series (the ones a legend puts side by side)\n  // at different lightnesses as well as different hues.\n  const vary = count > SINGLE_LIGHTNESS_MAX_SERIES;\n  const offsets = [0, mode === \"light\" ? -0.1 : 0.1, mode === \"light\" ? 0.08 : -0.08];\n  const colors = Array.from({ length: count }, (_, i) =>\n    oklchToHex({\n      l: vary ? base + offsets[i % offsets.length] : base,\n      c,\n      h: (brand.h + (360 / count) * i) % 360,\n    }),\n  );\n\n  return measureRamp(colors, surfaces);\n}\n\n/** Audit a ramp somebody else chose — the shipped Paul Tol set, say. */\nexport function auditChartRamp(colors: string[], surfaces: string[]): ChartRampReport {\n  return measureRamp(colors, surfaces);\n}\n\nfunction measureRamp(colors: string[], surfaces: string[]): ChartRampReport {\n  const collisions: ChartRampReport[\"collisions\"] = [];\n  const rgbs = colors.map((hex) => parseHex(hex)).filter((v): v is NonNullable<typeof v> => !!v);\n  let minSeparation = Infinity;\n  for (let i = 0; i < rgbs.length; i++) {\n    for (let j = i + 1; j < rgbs.length; j++) {\n      const normal = deltaE(rgbs[i], rgbs[j]);\n      minSeparation = Math.min(minSeparation, normal);\n      if (normal < MIN_SEPARATION) {\n        collisions.push({ a: i, b: j, under: \"normal\", distance: normal });\n      }\n      for (const type of [\"protanopia\", \"deuteranopia\", \"tritanopia\"] as const) {\n        const d = deltaE(simulateCvd(rgbs[i], type), simulateCvd(rgbs[j], type));\n        minSeparation = Math.min(minSeparation, d);\n        if (d < MIN_SEPARATION) collisions.push({ a: i, b: j, under: type, distance: d });\n      }\n    }\n  }\n\n  const lowContrast: ChartRampReport[\"lowContrast\"] = [];\n  let minContrast = Infinity;\n  colors.forEach((hex, index) => {\n    for (const surface of surfaces) {\n      const ratio = contrast(hex, surface);\n      minContrast = Math.min(minContrast, ratio);\n      // WCAG 1.4.11: a graphical object carrying meaning needs 3:1 against what is\n      // adjacent to it. A bar the same value as the card behind it has no boundary.\n      if (ratio < 3) lowContrast.push({ index, surface, ratio });\n    }\n  });\n\n  return {\n    colors,\n    collisions,\n    lowContrast,\n    minSeparation: Number.isFinite(minSeparation) ? minSeparation : 0,\n    minContrast: Number.isFinite(minContrast) ? minContrast : 0,\n    passes: collisions.length === 0 && lowContrast.length === 0,\n  };\n}\n\n/** Convenience: the OKLCH of a hex, for a caller inspecting an anchor. */\nexport function describe(hex: string): Oklch | null {\n  const rgb = parseHex(hex);\n  return rgb ? rgbToOklch(rgb) : null;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/theme/palette-derive.ts"],"sourcesContent":["import type { ThemeMode } from \"./theme-store\";\nimport type { TokenSet } from \"./palette-presets\";\nimport type { HeatStops } from \"./chart-palette\";\nimport {\n  contrast,\n  deltaE,\n  toHex,\n  hexToOklch,\n  oklchToHex,\n  parseHex,\n  rgbToOklch,\n  simulateCvd,\n  solveLightness,\n} from \"./color\";\nimport type { CvdType, Oklch } from \"./color\";\n\n/**\n * Build a whole palette from one brand colour, plus any number of colours pinned by\n * hand, with every contrast ratio SOLVED rather than chosen and then hoped for.\n *\n * The presets this package shipped were assembled by eye and annotated with the ratios\n * they were believed to hold — `tokens.css` records \"7.0:1 and 4.8:1\", and\n * `palette-presets.ts` records \"2.67:1 … lifted they clear it at 3.30:1\". Nothing\n * computed any of them, and the audit found four of the nine default light chart hues\n * below the 3:1 that WCAG 1.4.11 requires of a graphical object. A comment is not a\n * test. Everything here is derived to a target and then measured, and\n * {@link auditPalette} returns the measurements so a caller can refuse a palette that\n * does not hold up.\n *\n * WHAT IS DERIVED AND WHAT IS NOT. The UI palette and the CATEGORICAL CHART RAMP solve\n * different problems and are deliberately kept apart. A UI colour needs contrast against\n * one known surface and carries a fixed meaning; a chart colour needs to stay separable\n * from eight unknown siblings, at roughly equal salience, with no implied order.\n * Optimising a set for one makes it worse at the other, which is why `deriveTokenSet`\n * leaves `chart` alone unless you explicitly ask for {@link deriveChartRamp}.\n */\n\n/* ── Inputs ───────────────────────────────────────────────────────────────── */\n\n/** A role whose hue may be pinned by the caller instead of chosen by the deriver. */\nexport type AnchorRole = \"brand\" | \"accent\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n\nexport type PaletteAnchors = { brand: string } & Partial<Record<Exclude<AnchorRole, \"brand\">, string>>;\n\nexport interface DeriveOptions {\n  anchors: PaletteAnchors;\n  mode: ThemeMode;\n  /**\n   * How strongly the surfaces carry the brand's hue, 0–1 of the maximum useful tint.\n   * 0 gives neutral greys; the shipped default is a visible warmth, because a page that\n   * is very slightly the brand's hue reads as considered where a pure grey reads as\n   * unstyled. Above ~0.5 the surfaces start competing with the content.\n   */\n  surfaceTint?: number;\n  /** Contrast targets for the three text roles against the WORST surface. */\n  textContrast?: { primary?: number; secondary?: number; muted?: number };\n}\n\n/* ── Outputs ──────────────────────────────────────────────────────────────── */\n\n/** The semantic layer, which lives in tokens.css rather than in `TokenSet`. */\nexport interface SemanticTokens {\n  danger: string;\n  dangerHover: string;\n  dangerContrast: string;\n  dangerBorder: string;\n  /** The error line (invalid field, danger banner, destructive focus ring): as loud as\n   *  `dangerBorder` was before 0.15.5, so it keeps 3:1 against the surface. */\n  dangerBorderStrong: string;\n  dangerBg: string;\n  warning: string;\n  warningBorder: string;\n  warningBg: string;\n  info: string;\n  infoBorder: string;\n  infoBg: string;\n  success: string;\n  successBorder: string;\n  successBg: string;\n  /** Present only when a `accent` (secondary brand) anchor was supplied. */\n  accent?: string;\n  accentContrast?: string;\n  accentBg?: string;\n}\n\nexport interface ContrastCheck {\n  /** e.g. \"textMuted on bgPage\". */\n  pair: string;\n  ratio: number;\n  /** What WCAG asks of this pair. */\n  required: number;\n  /** Which rule the requirement comes from, for a reader who wants to argue with it. */\n  rule: string;\n  passes: boolean;\n}\n\nexport interface ContrastReport {\n  checks: ContrastCheck[];\n  failures: ContrastCheck[];\n  passes: boolean;\n}\n\nexport interface DerivedPalette {\n  tokens: TokenSet;\n  semantic: SemanticTokens;\n  audit: ContrastReport;\n  /** Compromises the deriver had to make, in plain words. Never silent. */\n  warnings: string[];\n}\n\n/* ── The hue homes ────────────────────────────────────────────────────────── */\n\n/**\n * Where each semantic role wants to sit, and how far it may be pushed.\n *\n * A semantic colour is a convention before it is an aesthetic: danger is red because\n * every other interface the user has ever used made it red, and a \"danger\" button in\n * the brand's teal is a worse button however well it matches. So each role has a home\n * hue and a narrow licence to move — enough to get out of the brand's way when the\n * brand happens to live in the same neighbourhood, not enough to stop meaning what it\n * means. If it cannot get far enough, that is a warning, not a silent compromise.\n */\nconst HUE_HOME: Record<Exclude<AnchorRole, \"brand\" | \"accent\">, { hue: number; slack: number }> = {\n  danger: { hue: 27, slack: 14 },\n  warning: { hue: 75, slack: 16 },\n  success: { hue: 150, slack: 20 },\n  info: { hue: 240, slack: 22 },\n};\n\n/** Circular distance between two hue angles, 0–180. */\nfunction hueGap(a: number, b: number): number {\n  const d = Math.abs(((a - b) % 360) + 360) % 360;\n  return d > 180 ? 360 - d : d;\n}\n\n/**\n * Nudge `home` within `slack` to maximise the distance from every taken hue.\n *\n * Sampled rather than solved: the objective is a min-of-distances over a handful of\n * points on a short arc, which is piecewise-linear with kinks wherever the nearest\n * neighbour changes. Gradient methods stall on those kinks; 2° steps over a ±22° arc is\n * 23 evaluations of some trigonometry and cannot stall.\n */\nfunction placeHue(home: number, slack: number, taken: number[]): number {\n  let best = home;\n  let bestGap = Math.min(...taken.map((t) => hueGap(home, t)), 360);\n  for (let d = -slack; d <= slack; d += 2) {\n    const h = (home + d + 360) % 360;\n    const gap = Math.min(...taken.map((t) => hueGap(h, t)), 360);\n    // Ties go to the hue nearest home: a role should move only as far as it must.\n    if (gap > bestGap + 1e-9) {\n      best = h;\n      bestGap = gap;\n    }\n  }\n  return best;\n}\n\n/* ── Derivation ───────────────────────────────────────────────────────────── */\n\nconst SURFACE_L = {\n  // Light: the PAGE is slightly darker than the cards on it, so a card reads as raised\n  // without needing a shadow to say so. Matches the shipped presets' relationship.\n  light: { page: 0.912, surface: 0.945, surface2: 0.929 },\n  dark: { page: 0.158, surface: 0.206, surface2: 0.249 },\n} as const;\n\n/**\n * What a hairline has to clear against the surface it divides.\n *\n * WCAG has nothing to say here — a decorative border is not a graphical object that\n * conveys information — so this is a house rule, and it is deliberately low. A border\n * that clears 3:1 is a RULE, not a hairline: it draws the eye to the box instead of to\n * what is in it. 1.5:1 is the point at which the edge is reliably findable without\n * becoming part of the composition.\n */\nconst BORDER_CONTRAST = 1.5;\n\n/** The most tint a surface can carry before it stops reading as a neutral ground. */\nconst MAX_SURFACE_CHROMA = 0.034;\n\nfunction surfaceSet(hue: number, mode: ThemeMode, tint: number) {\n  const c = MAX_SURFACE_CHROMA * Math.max(0, Math.min(1, tint));\n  const L = SURFACE_L[mode];\n  const bgPage = oklchToHex({ l: L.page, c, h: hue });\n  const bgSurface = oklchToHex({ l: L.surface, c, h: hue });\n  const bgSurface2 = oklchToHex({ l: L.surface2, c, h: hue });\n  // Solved, not guessed: a fixed lightness that looks right against a pale warm ground\n  // disappears against a deep cold one, and both are reachable from the same `hue`\n  // input. The border carries a little more chroma than the surfaces because at these\n  // lightnesses a perfectly neutral hairline on a tinted ground reads as a wrong grey.\n  const borderChroma = c * 1.6;\n  // Solved against the surface the hairline is HARDEST to see on, not against one of\n  // the three. Solving against `bgSurface` alone left it at 1.36:1 on `bgPage`, so the\n  // target and the audit disagreed about the same border.\n  const hardest = [bgPage, bgSurface, bgSurface2].reduce((a, b) =>\n    contrast(a, mode === \"light\" ? \"#000000\" : \"#ffffff\") <\n    contrast(b, mode === \"light\" ? \"#000000\" : \"#ffffff\")\n      ? a\n      : b,\n  );\n  const borderL = solveLightness(\n    BORDER_CONTRAST,\n    parseHex(hardest)!,\n    hue,\n    borderChroma,\n    mode === \"light\" ? \"darker\" : \"lighter\",\n  );\n  return {\n    bgPage,\n    bgSurface,\n    bgSurface2,\n    border: oklchToHex({ l: borderL, c: borderChroma, h: hue }),\n  };\n}\n\n/** Solve a colour at this hue that clears `target` against `against`, keeping chroma. */\nfunction solveAgainst(hue: number, chroma: number, target: number, against: string, mode: ThemeMode): string {\n  const bg = parseHex(against)!;\n  const l = solveLightness(target, bg, hue, chroma, mode === \"light\" ? \"darker\" : \"lighter\");\n  return oklchToHex({ l, c: chroma, h: hue });\n}\n\n/** Whichever of near-white / near-black reads better ON `fill`. */\nfunction contrastOn(fill: string): string {\n  const light = \"#ffffff\";\n  const dark = \"#12100e\";\n  return contrast(fill, light) >= contrast(fill, dark) ? light : dark;\n}\n\n/** A soft tint of `hue` sitting on the surface — a badge fill, not a button fill. */\nfunction tintOn(hue: number, chroma: number, surface: string, mode: ThemeMode): string {\n  const s = hexToOklch(surface)!;\n  // Toward the colour, but only far enough to be seen: these back TEXT of the same hue,\n  // and a strong tint leaves the text nowhere to go.\n  const l = mode === \"light\" ? s.l - 0.055 : s.l + 0.055;\n  return oklchToHex({ l, c: Math.min(chroma * 0.45, 0.06), h: hue });\n}\n\nexport function derivePalette({\n  anchors,\n  mode,\n  surfaceTint = 0.55,\n  textContrast,\n}: DeriveOptions): DerivedPalette {\n  const warnings: string[] = [];\n  const brand = hexToOklch(anchors.brand);\n  if (!brand) {\n    throw new Error(\n      `derivePalette: brand \"${anchors.brand}\" is not a #rgb or #rrggbb colour. ` +\n        `Anchors must be hex — a named colour or an rgba() string cannot be converted.`,\n    );\n  }\n\n  const targets = { primary: 10, secondary: 7, muted: 4.6, ...textContrast };\n\n  // ── Surfaces, from the brand's hue.\n  const surfaces = surfaceSet(brand.h, mode, surfaceTint);\n  // Every text role is solved against the WORST of the three, so a token is legible\n  // wherever it lands. Solving against `bgSurface` alone is the mistake that makes a\n  // muted label fail on the page background it also sits on.\n  const worstSurface = [surfaces.bgPage, surfaces.bgSurface, surfaces.bgSurface2].reduce((a, b) =>\n    contrast(a, mode === \"light\" ? \"#000000\" : \"#ffffff\") <\n    contrast(b, mode === \"light\" ? \"#000000\" : \"#ffffff\")\n      ? a\n      : b,\n  );\n\n  // ── Text. A trace of the brand hue keeps the greys from reading cold on a warm page.\n  const textChroma = 0.014;\n  const textPrimary = solveAgainst(brand.h, textChroma, targets.primary, worstSurface, mode);\n  const textSecondary = solveAgainst(brand.h, textChroma, targets.secondary, worstSurface, mode);\n  const textMuted = solveAgainst(brand.h, textChroma, targets.muted, worstSurface, mode);\n\n  // ── Brand. Keep the hue the caller asked for; move only the lightness, and only as\n  // far as 3:1 against the worst surface — WCAG 1.4.11, since a brand-filled control is\n  // a graphical object whose boundary has to be perceivable.\n  const brandChroma = Math.max(brand.c, 0.06);\n  const brandRatio = contrast(anchors.brand, worstSurface);\n  // NORMALISED, never the caller's raw string. `parseHex` accepts \"4f46e5\" and \"#abc\",\n  // and passing either through unchanged put a value in the TokenSet that is not a CSS\n  // colour — it then fails silently at paint time, three layers from here.\n  const brandHex =\n    brandRatio >= 3\n      ? toHex(parseHex(anchors.brand)!)\n      : solveAgainst(brand.h, brandChroma, 3, worstSurface, mode);\n  if (brandRatio < 3) {\n    warnings.push(\n      `brand ${anchors.brand} sits at ${brandRatio.toFixed(2)}:1 against the ${mode} surfaces, ` +\n        `below the 3:1 WCAG 1.4.11 asks of a control boundary. Lightness was adjusted to ` +\n        `${brandHex}; hue and chroma are unchanged.`,\n    );\n  }\n  const brandLch = hexToOklch(brandHex)!;\n  const brandHover = oklchToHex({\n    ...brandLch,\n    // Hover moves AWAY from the page in both themes: darker on light, lighter on dark.\n    l: mode === \"light\" ? brandLch.l - 0.06 : brandLch.l + 0.06,\n  });\n  const brandContrast = contrastOn(brandHex);\n  const onBrand = contrast(brandHex, brandContrast);\n  if (onBrand < 4.5) {\n    warnings.push(\n      `text on the brand fill reaches only ${onBrand.toFixed(2)}:1 (needs 4.5:1). ` +\n        `A mid-lightness, high-chroma brand cannot carry legible text at any ink; ` +\n        `use it as an accent and keep primary buttons on a darker or lighter variant.`,\n    );\n  }\n\n  // ── Semantic roles. Anchors are honoured exactly; the rest are placed away from the\n  // brand and from each other, within each role's licence to move.\n  const taken: number[] = [brandLch.h];\n  const accentLch = anchors.accent ? hexToOklch(anchors.accent) : null;\n  if (anchors.accent && !accentLch) {\n    warnings.push(`accent \"${anchors.accent}\" is not a hex colour and was ignored.`);\n  }\n  if (accentLch) taken.push(accentLch.h);\n\n  const semanticHue = {} as Record<Exclude<AnchorRole, \"brand\" | \"accent\">, number>;\n  const semanticChroma = {} as Record<Exclude<AnchorRole, \"brand\" | \"accent\">, number>;\n  for (const role of [\"danger\", \"warning\", \"success\", \"info\"] as const) {\n    const pinned = anchors[role] ? hexToOklch(anchors[role]!) : null;\n    if (anchors[role] && !pinned) {\n      warnings.push(`${role} \"${anchors[role]}\" is not a hex colour and was ignored.`);\n    }\n    const home = HUE_HOME[role];\n    const hue = pinned ? pinned.h : placeHue(home.hue, home.slack, taken);\n    if (!pinned) {\n      const gap = Math.min(...taken.map((t) => hueGap(hue, t)));\n      if (gap < 20) {\n        warnings.push(\n          `${role} could only reach ${gap.toFixed(0)}° from the nearest pinned hue, which is ` +\n            `too close to tell apart at a glance. Pin ${role} explicitly, or move the brand.`,\n        );\n      }\n    }\n    semanticHue[role] = hue;\n    semanticChroma[role] = pinned ? Math.max(pinned.c, 0.08) : 0.13;\n    taken.push(hue);\n  }\n\n  /**\n   * A semantic colour has two jobs and therefore two backgrounds: plain text on the\n   * page, and the label inside its own tinted badge. The badge is the harder of the\n   * two — it is a step toward the colour — so solving only against the surface produced\n   * a badge at 4.1:1 while the loose text passed, which is the failure mode that is\n   * hardest to notice because nine tenths of the uses look fine.\n   */\n  const sem = (role: Exclude<AnchorRole, \"brand\" | \"accent\">) => {\n    const hue = semanticHue[role];\n    const chroma = semanticChroma[role];\n    const bg = tintOn(hue, chroma, surfaces.bgSurface, mode);\n    const onSurface = solveLightness(\n      4.5,\n      parseHex(worstSurface)!,\n      hue,\n      chroma,\n      mode === \"light\" ? \"darker\" : \"lighter\",\n    );\n    const onTint = solveLightness(\n      4.5,\n      parseHex(bg)!,\n      hue,\n      chroma,\n      mode === \"light\" ? \"darker\" : \"lighter\",\n    );\n    const l = mode === \"light\" ? Math.min(onSurface, onTint) : Math.max(onSurface, onTint);\n    return oklchToHex({ l, c: chroma, h: hue });\n  };\n\n  const danger = sem(\"danger\");\n  const dangerLch = hexToOklch(danger)!;\n  const semantic: SemanticTokens = {\n    danger,\n    dangerHover: oklchToHex({\n      ...dangerLch,\n      l: mode === \"light\" ? dangerLch.l - 0.06 : dangerLch.l + 0.06,\n    }),\n    dangerContrast: contrastOn(danger),\n    // The tone border follows its siblings' lightness in dark mode (warning 0.44, info\n    // and success 0.45) — a soft frame; the strong line keeps the old, louder recipe.\n    dangerBorder: oklchToHex({\n      l: mode === \"light\" ? dangerLch.l + 0.22 : 0.45,\n      c: semanticChroma.danger,\n      h: semanticHue.danger,\n    }),\n    dangerBorderStrong: oklchToHex({\n      l: mode === \"light\" ? dangerLch.l + 0.22 : dangerLch.l - 0.22,\n      c: semanticChroma.danger,\n      h: semanticHue.danger,\n    }),\n    dangerBg: tintOn(semanticHue.danger, semanticChroma.danger, surfaces.bgSurface, mode),\n    warning: sem(\"warning\"),\n    warningBorder: oklchToHex({\n      l: mode === \"light\" ? 0.82 : 0.44,\n      c: semanticChroma.warning,\n      h: semanticHue.warning,\n    }),\n    warningBg: tintOn(semanticHue.warning, semanticChroma.warning, surfaces.bgSurface, mode),\n    info: sem(\"info\"),\n    infoBorder: oklchToHex({\n      l: mode === \"light\" ? 0.8 : 0.45,\n      c: semanticChroma.info,\n      h: semanticHue.info,\n    }),\n    infoBg: tintOn(semanticHue.info, semanticChroma.info, surfaces.bgSurface, mode),\n    success: sem(\"success\"),\n    successBorder: oklchToHex({\n      l: mode === \"light\" ? 0.81 : 0.45,\n      c: semanticChroma.success,\n      h: semanticHue.success,\n    }),\n    successBg: tintOn(semanticHue.success, semanticChroma.success, surfaces.bgSurface, mode),\n  };\n\n  if (accentLch) {\n    const accent = solveAgainst(accentLch.h, Math.max(accentLch.c, 0.06), 3, worstSurface, mode);\n    semantic.accent = accent;\n    semantic.accentContrast = contrastOn(accent);\n    semantic.accentBg = tintOn(accentLch.h, Math.max(accentLch.c, 0.06), surfaces.bgSurface, mode);\n  }\n\n  // ── Money. A THIRD system again: these are data colours with fixed meanings, and the\n  // one rule that outranks everything is that income and expense must never be the\n  // red/green pair — which is why the shipped presets use teal/amber/violet. Derived\n  // here at fixed hues rather than from the brand, for the same reason `--danger` is:\n  // a consumer who rebrands does not thereby change what \"money out\" looks like.\n  const money = (hue: number, target: number) => solveAgainst(hue, 0.12, target, worstSurface, mode);\n  const moneyIncome = money(175, 4.5);\n  const moneyExpense = money(70, 4.5);\n  const moneyNet = money(300, 4.5);\n  const moneyNeutral = oklchToHex({ l: mode === \"light\" ? 0.52 : 0.72, c: 0.012, h: brand.h });\n\n  const tokens: TokenSet = {\n    ...surfaces,\n    textPrimary,\n    textSecondary,\n    textMuted,\n    brand: brandHex,\n    brandHover,\n    brandContrast,\n    moneyIncome,\n    moneyExpense,\n    moneyNet,\n    moneyNeutral,\n    // Left alone. See the note at the top of this file about why the categorical ramp is\n    // not derived from the brand unless the caller asks.\n    //\n    // ⚠️ EMPTY, not absent: a caller who hands this straight to `applyTokenSet` keeps\n    // whatever `--chart-1…9` were already on the element. That is deliberate — the ramp\n    // is a separate decision and clearing it would leave charts unpainted — but it means\n    // a derived palette applied over another preset is a MIX until you also supply a\n    // ramp. `deriveChartRamp` is how you supply one.\n    chart: [],\n    heat: deriveHeat(moneyIncome, moneyExpense, surfaces, mode),\n  };\n\n  return { tokens, semantic, audit: auditPalette(tokens, semantic), warnings };\n}\n\n/**\n * Heatmap stops, reusing the money pair.\n *\n * `under` is the good direction and `over` the bad one, at the SAME hues as\n * `moneyIncome`/`moneyExpense` — so a heatmap cell and the figure printed beside it\n * agree about which way is which, rather than each inventing its own convention.\n */\nfunction deriveHeat(\n  income: string,\n  expense: string,\n  surfaces: { bgSurface2: string },\n  mode: ThemeMode,\n): HeatStops {\n  const exp = hexToOklch(expense)!;\n  return {\n    neutral: surfaces.bgSurface2,\n    under: income,\n    over: expense,\n    seqLow: oklchToHex({ l: mode === \"light\" ? 0.93 : 0.26, c: 0.05, h: exp.h }),\n    seqHigh: expense,\n    empty: mode === \"light\" ? \"rgba(120,110,95,0.14)\" : \"rgba(160,170,190,0.10)\",\n  };\n}\n\n/* ── Audit ────────────────────────────────────────────────────────────────── */\n\n/**\n * Measure every pair that has a requirement, and say which ones fail.\n *\n * This is the part the shipped presets were missing. `derivePalette` runs it on the way\n * out, and the preset test runs it over everything the package ships, so a palette that\n * does not hold up cannot be merged with a comment claiming that it does.\n */\nexport function auditPalette(t: TokenSet, semantic?: SemanticTokens): ContrastReport {\n  const checks: ContrastCheck[] = [];\n  const surfaces: Array<[string, string]> = [\n    [\"bgPage\", t.bgPage],\n    [\"bgSurface\", t.bgSurface],\n    [\"bgSurface2\", t.bgSurface2],\n  ];\n\n  const add = (pair: string, fg: string, bg: string, required: number, rule: string) => {\n    const ratio = contrast(fg, bg);\n    checks.push({ pair, ratio, required, rule, passes: ratio >= required - 0.05 });\n  };\n\n  for (const [name, bg] of surfaces) {\n    add(`textPrimary on ${name}`, t.textPrimary, bg, 7, \"WCAG 1.4.6 AAA body text\");\n    add(`textSecondary on ${name}`, t.textSecondary, bg, 4.5, \"WCAG 1.4.3 AA body text\");\n    add(`textMuted on ${name}`, t.textMuted, bg, 4.5, \"WCAG 1.4.3 AA body text\");\n    add(`brand on ${name}`, t.brand, bg, 3, \"WCAG 1.4.11 graphical object\");\n    add(`border on ${name}`, t.border, bg, 1.1, \"house rule: a hairline must be findable\");\n    for (const [key, hex] of [\n      [\"moneyIncome\", t.moneyIncome],\n      [\"moneyExpense\", t.moneyExpense],\n      [\"moneyNet\", t.moneyNet],\n    ] as const) {\n      add(`${key} on ${name}`, hex, bg, 4.5, \"WCAG 1.4.3 — these are rendered as TEXT\");\n    }\n  }\n\n  add(\"brandContrast on brand\", t.brandContrast, t.brand, 4.5, \"WCAG 1.4.3 AA body text\");\n\n  if (semantic) {\n    for (const [name, fg] of [\n      [\"danger\", semantic.danger],\n      [\"warning\", semantic.warning],\n      [\"info\", semantic.info],\n      [\"success\", semantic.success],\n    ] as const) {\n      add(`${name} on bgSurface`, fg, t.bgSurface, 4.5, \"WCAG 1.4.3 — rendered as text\");\n    }\n    add(\"danger on dangerBg\", semantic.danger, semantic.dangerBg, 4.5, \"WCAG 1.4.3 — badge text\");\n    add(\"warning on warningBg\", semantic.warning, semantic.warningBg, 4.5, \"WCAG 1.4.3 — badge text\");\n    add(\"info on infoBg\", semantic.info, semantic.infoBg, 4.5, \"WCAG 1.4.3 — badge text\");\n    add(\"success on successBg\", semantic.success, semantic.successBg, 4.5, \"WCAG 1.4.3 — badge text\");\n    add(\n      \"dangerContrast on danger\",\n      semantic.dangerContrast,\n      semantic.danger,\n      4.5,\n      \"WCAG 1.4.3 AA body text\",\n    );\n  }\n\n  const failures = checks.filter((c) => !c.passes);\n  return { checks, failures, passes: failures.length === 0 };\n}\n\n/* ── Categorical chart ramp ───────────────────────────────────────────────── */\n\nexport interface ChartRampReport {\n  colors: string[];\n  /** Series pairs that are too close under normal vision or any simulated CVD. */\n  collisions: Array<{ a: number; b: number; under: \"normal\" | CvdType; distance: number }>;\n  /** Series that do not clear 3:1 against a surface they may be drawn on. */\n  lowContrast: Array<{ index: number; surface: string; ratio: number }>;\n  /** The worst pairwise separation, across normal vision and all three dichromacies. */\n  minSeparation: number;\n  /** The worst contrast any series reaches against any surface it was measured on. */\n  minContrast: number;\n  passes: boolean;\n}\n\n/**\n * The floor for pairwise separation in OKLab, across normal vision and each dichromacy.\n *\n * CALIBRATED, not chosen. Paul Tol's \"Muted\" set — which this package ships and which is\n * a well-regarded CVD-safe palette — bottoms out at 0.059 in its light variant and 0.032\n * in the lightened dark one. A threshold above 0.059 would fail a palette that is known\n * to work, which is worse than having no check at all: an audit that cries wolf gets\n * switched off. 0.05 sits just under the known-good case.\n */\nconst MIN_SEPARATION = 0.05;\n\n/**\n * **The categorical trade-off, measured.** At a SINGLE lightness, the most series that\n * can satisfy both the 3:1 fill contrast of WCAG 1.4.11 and {@link MIN_SEPARATION} under\n * dichromacy is FOUR. Searched exhaustively over starting hue and lightness:\n *\n *   n=4  best separation 0.065  — both satisfiable\n *   n=5  best separation 0.041  — not satisfiable\n *   n=9  best separation 0.015  — not satisfiable\n *\n * The reason is structural: dichromacy collapses the red-green axis, so hue alone stops\n * distinguishing colours once you need more than a handful, and the remaining channel is\n * LIGHTNESS — the very thing a uniform-contrast ramp holds constant. Paul Tol's set\n * varies lightness deliberately and pays for it in contrast; that is not an oversight in\n * their palette, it is the only currency left.\n *\n * So above four series this deriver varies lightness too, and reports what it gave up\n * rather than pretending both constraints were met.\n *\n * NOTE ON WHAT THIS BOUND IS. It describes the PROBLEM, not a guarantee about\n * {@link deriveChartRamp}. That function fixes lightness and starts the hue wheel at the\n * brand's own hue rather than searching for the best start, so it reaches the bound only\n * where the brand happens to sit well: sweeping 72 brand hues against the default light\n * surfaces, 7 of 72 produced a passing 4-series ramp (12 of 72 on dark), and none passed\n * at 5 or 9. Read the report it returns; do not assume a pass.\n */\nconst SINGLE_LIGHTNESS_MAX_SERIES = 4;\n\n/**\n * A categorical ramp of `count` hues, evenly spaced and equal in perceived lightness,\n * then MEASURED for separability — including under each dichromacy.\n *\n * Offered but not used by default, and the distinction matters. Evenly spaced hues at\n * one lightness are a reasonable generic answer; Paul Tol's \"Muted\" set, which this\n * package ships, is a better specific one, because it was optimised against real\n * confusion lines rather than derived from a formula. So this exists for a consumer who\n * wants their charts to follow their brand and is willing to read the report — not as\n * a silent upgrade to the default.\n */\nexport function deriveChartRamp(\n  brandHex: string,\n  mode: ThemeMode,\n  surfaces: string[],\n  count = 9,\n): ChartRampReport {\n  const brand = hexToOklch(brandHex) ?? { l: 0.6, c: 0.12, h: 264 };\n  const base = mode === \"light\" ? 0.58 : 0.74;\n  const c = Math.max(0.09, Math.min(brand.c, 0.15));\n  // Up to four series, one lightness: a scale that varies lightness implies rank, and a\n  // categorical one must not. Beyond four, lightness is the only channel left that\n  // survives dichromacy — see SINGLE_LIGHTNESS_MAX_SERIES — so it alternates in a\n  // three-step cycle, which keeps ADJACENT series (the ones a legend puts side by side)\n  // at different lightnesses as well as different hues.\n  const vary = count > SINGLE_LIGHTNESS_MAX_SERIES;\n  const offsets = [0, mode === \"light\" ? -0.1 : 0.1, mode === \"light\" ? 0.08 : -0.08];\n  const colors = Array.from({ length: count }, (_, i) =>\n    oklchToHex({\n      l: vary ? base + offsets[i % offsets.length] : base,\n      c,\n      h: (brand.h + (360 / count) * i) % 360,\n    }),\n  );\n\n  return measureRamp(colors, surfaces);\n}\n\n/** Audit a ramp somebody else chose — the shipped Paul Tol set, say. */\nexport function auditChartRamp(colors: string[], surfaces: string[]): ChartRampReport {\n  return measureRamp(colors, surfaces);\n}\n\nfunction measureRamp(colors: string[], surfaces: string[]): ChartRampReport {\n  const collisions: ChartRampReport[\"collisions\"] = [];\n  const rgbs = colors.map((hex) => parseHex(hex)).filter((v): v is NonNullable<typeof v> => !!v);\n  let minSeparation = Infinity;\n  for (let i = 0; i < rgbs.length; i++) {\n    for (let j = i + 1; j < rgbs.length; j++) {\n      const normal = deltaE(rgbs[i], rgbs[j]);\n      minSeparation = Math.min(minSeparation, normal);\n      if (normal < MIN_SEPARATION) {\n        collisions.push({ a: i, b: j, under: \"normal\", distance: normal });\n      }\n      for (const type of [\"protanopia\", \"deuteranopia\", \"tritanopia\"] as const) {\n        const d = deltaE(simulateCvd(rgbs[i], type), simulateCvd(rgbs[j], type));\n        minSeparation = Math.min(minSeparation, d);\n        if (d < MIN_SEPARATION) collisions.push({ a: i, b: j, under: type, distance: d });\n      }\n    }\n  }\n\n  const lowContrast: ChartRampReport[\"lowContrast\"] = [];\n  let minContrast = Infinity;\n  colors.forEach((hex, index) => {\n    for (const surface of surfaces) {\n      const ratio = contrast(hex, surface);\n      minContrast = Math.min(minContrast, ratio);\n      // WCAG 1.4.11: a graphical object carrying meaning needs 3:1 against what is\n      // adjacent to it. A bar the same value as the card behind it has no boundary.\n      if (ratio < 3) lowContrast.push({ index, surface, ratio });\n    }\n  });\n\n  return {\n    colors,\n    collisions,\n    lowContrast,\n    minSeparation: Number.isFinite(minSeparation) ? minSeparation : 0,\n    minContrast: Number.isFinite(minContrast) ? minContrast : 0,\n    passes: collisions.length === 0 && lowContrast.length === 0,\n  };\n}\n\n/** Convenience: the OKLCH of a hex, for a caller inspecting an anchor. */\nexport function describe(hex: string): Oklch | null {\n  const rgb = parseHex(hex);\n  return rgb ? rgbToOklch(rgb) : null;\n}\n"],"mappings":";AAGA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA6GP,MAAM,WAA4F;AAAA,EAChG,QAAQ,EAAE,KAAK,IAAI,OAAO,GAAG;AAAA,EAC7B,SAAS,EAAE,KAAK,IAAI,OAAO,GAAG;AAAA,EAC9B,SAAS,EAAE,KAAK,KAAK,OAAO,GAAG;AAAA,EAC/B,MAAM,EAAE,KAAK,KAAK,OAAO,GAAG;AAC9B;AAGA,SAAS,OAAO,GAAW,GAAmB;AAC5C,QAAM,IAAI,KAAK,KAAM,IAAI,KAAK,MAAO,GAAG,IAAI;AAC5C,SAAO,IAAI,MAAM,MAAM,IAAI;AAC7B;AAUA,SAAS,SAAS,MAAc,OAAe,OAAyB;AACtE,MAAI,OAAO;AACX,MAAI,UAAU,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,OAAO,MAAM,CAAC,CAAC,GAAG,GAAG;AAChE,WAAS,IAAI,CAAC,OAAO,KAAK,OAAO,KAAK,GAAG;AACvC,UAAM,KAAK,OAAO,IAAI,OAAO;AAC7B,UAAM,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC,GAAG,GAAG;AAE3D,QAAI,MAAM,UAAU,MAAM;AACxB,aAAO;AACP,gBAAU;AAAA,IACZ;AAAA,EACF;AACA,SAAO;AACT;AAIA,MAAM,YAAY;AAAA;AAAA;AAAA,EAGhB,OAAO,EAAE,MAAM,OAAO,SAAS,OAAO,UAAU,MAAM;AAAA,EACtD,MAAM,EAAE,MAAM,OAAO,SAAS,OAAO,UAAU,MAAM;AACvD;AAWA,MAAM,kBAAkB;AAGxB,MAAM,qBAAqB;AAE3B,SAAS,WAAW,KAAa,MAAiB,MAAc;AAC9D,QAAM,IAAI,qBAAqB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI,CAAC;AAC5D,QAAM,IAAI,UAAU,IAAI;AACxB,QAAM,SAAS,WAAW,EAAE,GAAG,EAAE,MAAM,GAAG,GAAG,IAAI,CAAC;AAClD,QAAM,YAAY,WAAW,EAAE,GAAG,EAAE,SAAS,GAAG,GAAG,IAAI,CAAC;AACxD,QAAM,aAAa,WAAW,EAAE,GAAG,EAAE,UAAU,GAAG,GAAG,IAAI,CAAC;AAK1D,QAAM,eAAe,IAAI;AAIzB,QAAM,UAAU,CAAC,QAAQ,WAAW,UAAU,EAAE;AAAA,IAAO,CAAC,GAAG,MACzD,SAAS,GAAG,SAAS,UAAU,YAAY,SAAS,IACpD,SAAS,GAAG,SAAS,UAAU,YAAY,SAAS,IAChD,IACA;AAAA,EACN;AACA,QAAM,UAAU;AAAA,IACd;AAAA,IACA,SAAS,OAAO;AAAA,IAChB;AAAA,IACA;AAAA,IACA,SAAS,UAAU,WAAW;AAAA,EAChC;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,WAAW,EAAE,GAAG,SAAS,GAAG,cAAc,GAAG,IAAI,CAAC;AAAA,EAC5D;AACF;AAGA,SAAS,aAAa,KAAa,QAAgB,QAAgB,SAAiB,MAAyB;AAC3G,QAAM,KAAK,SAAS,OAAO;AAC3B,QAAM,IAAI,eAAe,QAAQ,IAAI,KAAK,QAAQ,SAAS,UAAU,WAAW,SAAS;AACzF,SAAO,WAAW,EAAE,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC;AAC5C;AAGA,SAAS,WAAW,MAAsB;AACxC,QAAM,QAAQ;AACd,QAAM,OAAO;AACb,SAAO,SAAS,MAAM,KAAK,KAAK,SAAS,MAAM,IAAI,IAAI,QAAQ;AACjE;AAGA,SAAS,OAAO,KAAa,QAAgB,SAAiB,MAAyB;AACrF,QAAM,IAAI,WAAW,OAAO;AAG5B,QAAM,IAAI,SAAS,UAAU,EAAE,IAAI,QAAQ,EAAE,IAAI;AACjD,SAAO,WAAW,EAAE,GAAG,GAAG,KAAK,IAAI,SAAS,MAAM,IAAI,GAAG,GAAG,IAAI,CAAC;AACnE;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAAkC;AAChC,QAAM,WAAqB,CAAC;AAC5B,QAAM,QAAQ,WAAW,QAAQ,KAAK;AACtC,MAAI,CAAC,OAAO;AACV,UAAM,IAAI;AAAA,MACR,yBAAyB,QAAQ,KAAK;AAAA,IAExC;AAAA,EACF;AAEA,QAAM,UAAU,EAAE,SAAS,IAAI,WAAW,GAAG,OAAO,KAAK,GAAG,aAAa;AAGzE,QAAM,WAAW,WAAW,MAAM,GAAG,MAAM,WAAW;AAItD,QAAM,eAAe,CAAC,SAAS,QAAQ,SAAS,WAAW,SAAS,UAAU,EAAE;AAAA,IAAO,CAAC,GAAG,MACzF,SAAS,GAAG,SAAS,UAAU,YAAY,SAAS,IACpD,SAAS,GAAG,SAAS,UAAU,YAAY,SAAS,IAChD,IACA;AAAA,EACN;AAGA,QAAM,aAAa;AACnB,QAAM,cAAc,aAAa,MAAM,GAAG,YAAY,QAAQ,SAAS,cAAc,IAAI;AACzF,QAAM,gBAAgB,aAAa,MAAM,GAAG,YAAY,QAAQ,WAAW,cAAc,IAAI;AAC7F,QAAM,YAAY,aAAa,MAAM,GAAG,YAAY,QAAQ,OAAO,cAAc,IAAI;AAKrF,QAAM,cAAc,KAAK,IAAI,MAAM,GAAG,IAAI;AAC1C,QAAM,aAAa,SAAS,QAAQ,OAAO,YAAY;AAIvD,QAAM,WACJ,cAAc,IACV,MAAM,SAAS,QAAQ,KAAK,CAAE,IAC9B,aAAa,MAAM,GAAG,aAAa,GAAG,cAAc,IAAI;AAC9D,MAAI,aAAa,GAAG;AAClB,aAAS;AAAA,MACP,SAAS,QAAQ,KAAK,YAAY,WAAW,QAAQ,CAAC,CAAC,kBAAkB,IAAI,8FAExE,QAAQ;AAAA,IACf;AAAA,EACF;AACA,QAAM,WAAW,WAAW,QAAQ;AACpC,QAAM,aAAa,WAAW;AAAA,IAC5B,GAAG;AAAA;AAAA,IAEH,GAAG,SAAS,UAAU,SAAS,IAAI,OAAO,SAAS,IAAI;AAAA,EACzD,CAAC;AACD,QAAM,gBAAgB,WAAW,QAAQ;AACzC,QAAM,UAAU,SAAS,UAAU,aAAa;AAChD,MAAI,UAAU,KAAK;AACjB,aAAS;AAAA,MACP,uCAAuC,QAAQ,QAAQ,CAAC,CAAC;AAAA,IAG3D;AAAA,EACF;AAIA,QAAM,QAAkB,CAAC,SAAS,CAAC;AACnC,QAAM,YAAY,QAAQ,SAAS,WAAW,QAAQ,MAAM,IAAI;AAChE,MAAI,QAAQ,UAAU,CAAC,WAAW;AAChC,aAAS,KAAK,WAAW,QAAQ,MAAM,wCAAwC;AAAA,EACjF;AACA,MAAI,UAAW,OAAM,KAAK,UAAU,CAAC;AAErC,QAAM,cAAc,CAAC;AACrB,QAAM,iBAAiB,CAAC;AACxB,aAAW,QAAQ,CAAC,UAAU,WAAW,WAAW,MAAM,GAAY;AACpE,UAAM,SAAS,QAAQ,IAAI,IAAI,WAAW,QAAQ,IAAI,CAAE,IAAI;AAC5D,QAAI,QAAQ,IAAI,KAAK,CAAC,QAAQ;AAC5B,eAAS,KAAK,GAAG,IAAI,KAAK,QAAQ,IAAI,CAAC,wCAAwC;AAAA,IACjF;AACA,UAAM,OAAO,SAAS,IAAI;AAC1B,UAAM,MAAM,SAAS,OAAO,IAAI,SAAS,KAAK,KAAK,KAAK,OAAO,KAAK;AACpE,QAAI,CAAC,QAAQ;AACX,YAAM,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,OAAO,KAAK,CAAC,CAAC,CAAC;AACxD,UAAI,MAAM,IAAI;AACZ,iBAAS;AAAA,UACP,GAAG,IAAI,qBAAqB,IAAI,QAAQ,CAAC,CAAC,uFACI,IAAI;AAAA,QACpD;AAAA,MACF;AAAA,IACF;AACA,gBAAY,IAAI,IAAI;AACpB,mBAAe,IAAI,IAAI,SAAS,KAAK,IAAI,OAAO,GAAG,IAAI,IAAI;AAC3D,UAAM,KAAK,GAAG;AAAA,EAChB;AASA,QAAM,MAAM,CAAC,SAAkD;AAC7D,UAAM,MAAM,YAAY,IAAI;AAC5B,UAAM,SAAS,eAAe,IAAI;AAClC,UAAM,KAAK,OAAO,KAAK,QAAQ,SAAS,WAAW,IAAI;AACvD,UAAM,YAAY;AAAA,MAChB;AAAA,MACA,SAAS,YAAY;AAAA,MACrB;AAAA,MACA;AAAA,MACA,SAAS,UAAU,WAAW;AAAA,IAChC;AACA,UAAM,SAAS;AAAA,MACb;AAAA,MACA,SAAS,EAAE;AAAA,MACX;AAAA,MACA;AAAA,MACA,SAAS,UAAU,WAAW;AAAA,IAChC;AACA,UAAM,IAAI,SAAS,UAAU,KAAK,IAAI,WAAW,MAAM,IAAI,KAAK,IAAI,WAAW,MAAM;AACrF,WAAO,WAAW,EAAE,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC;AAAA,EAC5C;AAEA,QAAM,SAAS,IAAI,QAAQ;AAC3B,QAAM,YAAY,WAAW,MAAM;AACnC,QAAM,WAA2B;AAAA,IAC/B;AAAA,IACA,aAAa,WAAW;AAAA,MACtB,GAAG;AAAA,MACH,GAAG,SAAS,UAAU,UAAU,IAAI,OAAO,UAAU,IAAI;AAAA,IAC3D,CAAC;AAAA,IACD,gBAAgB,WAAW,MAAM;AAAA;AAAA;AAAA,IAGjC,cAAc,WAAW;AAAA,MACvB,GAAG,SAAS,UAAU,UAAU,IAAI,OAAO;AAAA,MAC3C,GAAG,eAAe;AAAA,MAClB,GAAG,YAAY;AAAA,IACjB,CAAC;AAAA,IACD,oBAAoB,WAAW;AAAA,MAC7B,GAAG,SAAS,UAAU,UAAU,IAAI,OAAO,UAAU,IAAI;AAAA,MACzD,GAAG,eAAe;AAAA,MAClB,GAAG,YAAY;AAAA,IACjB,CAAC;AAAA,IACD,UAAU,OAAO,YAAY,QAAQ,eAAe,QAAQ,SAAS,WAAW,IAAI;AAAA,IACpF,SAAS,IAAI,SAAS;AAAA,IACtB,eAAe,WAAW;AAAA,MACxB,GAAG,SAAS,UAAU,OAAO;AAAA,MAC7B,GAAG,eAAe;AAAA,MAClB,GAAG,YAAY;AAAA,IACjB,CAAC;AAAA,IACD,WAAW,OAAO,YAAY,SAAS,eAAe,SAAS,SAAS,WAAW,IAAI;AAAA,IACvF,MAAM,IAAI,MAAM;AAAA,IAChB,YAAY,WAAW;AAAA,MACrB,GAAG,SAAS,UAAU,MAAM;AAAA,MAC5B,GAAG,eAAe;AAAA,MAClB,GAAG,YAAY;AAAA,IACjB,CAAC;AAAA,IACD,QAAQ,OAAO,YAAY,MAAM,eAAe,MAAM,SAAS,WAAW,IAAI;AAAA,IAC9E,SAAS,IAAI,SAAS;AAAA,IACtB,eAAe,WAAW;AAAA,MACxB,GAAG,SAAS,UAAU,OAAO;AAAA,MAC7B,GAAG,eAAe;AAAA,MAClB,GAAG,YAAY;AAAA,IACjB,CAAC;AAAA,IACD,WAAW,OAAO,YAAY,SAAS,eAAe,SAAS,SAAS,WAAW,IAAI;AAAA,EACzF;AAEA,MAAI,WAAW;AACb,UAAM,SAAS,aAAa,UAAU,GAAG,KAAK,IAAI,UAAU,GAAG,IAAI,GAAG,GAAG,cAAc,IAAI;AAC3F,aAAS,SAAS;AAClB,aAAS,iBAAiB,WAAW,MAAM;AAC3C,aAAS,WAAW,OAAO,UAAU,GAAG,KAAK,IAAI,UAAU,GAAG,IAAI,GAAG,SAAS,WAAW,IAAI;AAAA,EAC/F;AAOA,QAAM,QAAQ,CAAC,KAAa,WAAmB,aAAa,KAAK,MAAM,QAAQ,cAAc,IAAI;AACjG,QAAM,cAAc,MAAM,KAAK,GAAG;AAClC,QAAM,eAAe,MAAM,IAAI,GAAG;AAClC,QAAM,WAAW,MAAM,KAAK,GAAG;AAC/B,QAAM,eAAe,WAAW,EAAE,GAAG,SAAS,UAAU,OAAO,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,CAAC;AAE3F,QAAM,SAAmB;AAAA,IACvB,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,OAAO,CAAC;AAAA,IACR,MAAM,WAAW,aAAa,cAAc,UAAU,IAAI;AAAA,EAC5D;AAEA,SAAO,EAAE,QAAQ,UAAU,OAAO,aAAa,QAAQ,QAAQ,GAAG,SAAS;AAC7E;AASA,SAAS,WACP,QACA,SACA,UACA,MACW;AACX,QAAM,MAAM,WAAW,OAAO;AAC9B,SAAO;AAAA,IACL,SAAS,SAAS;AAAA,IAClB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ,WAAW,EAAE,GAAG,SAAS,UAAU,OAAO,MAAM,GAAG,MAAM,GAAG,IAAI,EAAE,CAAC;AAAA,IAC3E,SAAS;AAAA,IACT,OAAO,SAAS,UAAU,0BAA0B;AAAA,EACtD;AACF;AAWO,SAAS,aAAa,GAAa,UAA2C;AACnF,QAAM,SAA0B,CAAC;AACjC,QAAM,WAAoC;AAAA,IACxC,CAAC,UAAU,EAAE,MAAM;AAAA,IACnB,CAAC,aAAa,EAAE,SAAS;AAAA,IACzB,CAAC,cAAc,EAAE,UAAU;AAAA,EAC7B;AAEA,QAAM,MAAM,CAAC,MAAc,IAAY,IAAY,UAAkB,SAAiB;AACpF,UAAM,QAAQ,SAAS,IAAI,EAAE;AAC7B,WAAO,KAAK,EAAE,MAAM,OAAO,UAAU,MAAM,QAAQ,SAAS,WAAW,KAAK,CAAC;AAAA,EAC/E;AAEA,aAAW,CAAC,MAAM,EAAE,KAAK,UAAU;AACjC,QAAI,kBAAkB,IAAI,IAAI,EAAE,aAAa,IAAI,GAAG,0BAA0B;AAC9E,QAAI,oBAAoB,IAAI,IAAI,EAAE,eAAe,IAAI,KAAK,yBAAyB;AACnF,QAAI,gBAAgB,IAAI,IAAI,EAAE,WAAW,IAAI,KAAK,yBAAyB;AAC3E,QAAI,YAAY,IAAI,IAAI,EAAE,OAAO,IAAI,GAAG,8BAA8B;AACtE,QAAI,aAAa,IAAI,IAAI,EAAE,QAAQ,IAAI,KAAK,yCAAyC;AACrF,eAAW,CAAC,KAAK,GAAG,KAAK;AAAA,MACvB,CAAC,eAAe,EAAE,WAAW;AAAA,MAC7B,CAAC,gBAAgB,EAAE,YAAY;AAAA,MAC/B,CAAC,YAAY,EAAE,QAAQ;AAAA,IACzB,GAAY;AACV,UAAI,GAAG,GAAG,OAAO,IAAI,IAAI,KAAK,IAAI,KAAK,8CAAyC;AAAA,IAClF;AAAA,EACF;AAEA,MAAI,0BAA0B,EAAE,eAAe,EAAE,OAAO,KAAK,yBAAyB;AAEtF,MAAI,UAAU;AACZ,eAAW,CAAC,MAAM,EAAE,KAAK;AAAA,MACvB,CAAC,UAAU,SAAS,MAAM;AAAA,MAC1B,CAAC,WAAW,SAAS,OAAO;AAAA,MAC5B,CAAC,QAAQ,SAAS,IAAI;AAAA,MACtB,CAAC,WAAW,SAAS,OAAO;AAAA,IAC9B,GAAY;AACV,UAAI,GAAG,IAAI,iBAAiB,IAAI,EAAE,WAAW,KAAK,oCAA+B;AAAA,IACnF;AACA,QAAI,sBAAsB,SAAS,QAAQ,SAAS,UAAU,KAAK,8BAAyB;AAC5F,QAAI,wBAAwB,SAAS,SAAS,SAAS,WAAW,KAAK,8BAAyB;AAChG,QAAI,kBAAkB,SAAS,MAAM,SAAS,QAAQ,KAAK,8BAAyB;AACpF,QAAI,wBAAwB,SAAS,SAAS,SAAS,WAAW,KAAK,8BAAyB;AAChG;AAAA,MACE;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,WAAW,OAAO,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM;AAC/C,SAAO,EAAE,QAAQ,UAAU,QAAQ,SAAS,WAAW,EAAE;AAC3D;AA0BA,MAAM,iBAAiB;AA2BvB,MAAM,8BAA8B;AAa7B,SAAS,gBACd,UACA,MACA,UACA,QAAQ,GACS;AACjB,QAAM,QAAQ,WAAW,QAAQ,KAAK,EAAE,GAAG,KAAK,GAAG,MAAM,GAAG,IAAI;AAChE,QAAM,OAAO,SAAS,UAAU,OAAO;AACvC,QAAM,IAAI,KAAK,IAAI,MAAM,KAAK,IAAI,MAAM,GAAG,IAAI,CAAC;AAMhD,QAAM,OAAO,QAAQ;AACrB,QAAM,UAAU,CAAC,GAAG,SAAS,UAAU,OAAO,KAAK,SAAS,UAAU,OAAO,KAAK;AAClF,QAAM,SAAS,MAAM;AAAA,IAAK,EAAE,QAAQ,MAAM;AAAA,IAAG,CAAC,GAAG,MAC/C,WAAW;AAAA,MACT,GAAG,OAAO,OAAO,QAAQ,IAAI,QAAQ,MAAM,IAAI;AAAA,MAC/C;AAAA,MACA,IAAI,MAAM,IAAK,MAAM,QAAS,KAAK;AAAA,IACrC,CAAC;AAAA,EACH;AAEA,SAAO,YAAY,QAAQ,QAAQ;AACrC;AAGO,SAAS,eAAe,QAAkB,UAAqC;AACpF,SAAO,YAAY,QAAQ,QAAQ;AACrC;AAEA,SAAS,YAAY,QAAkB,UAAqC;AAC1E,QAAM,aAA4C,CAAC;AACnD,QAAM,OAAO,OAAO,IAAI,CAAC,QAAQ,SAAS,GAAG,CAAC,EAAE,OAAO,CAAC,MAAkC,CAAC,CAAC,CAAC;AAC7F,MAAI,gBAAgB;AACpB,WAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACpC,aAAS,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACxC,YAAM,SAAS,OAAO,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC;AACtC,sBAAgB,KAAK,IAAI,eAAe,MAAM;AAC9C,UAAI,SAAS,gBAAgB;AAC3B,mBAAW,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,UAAU,UAAU,OAAO,CAAC;AAAA,MACnE;AACA,iBAAW,QAAQ,CAAC,cAAc,gBAAgB,YAAY,GAAY;AACxE,cAAM,IAAI,OAAO,YAAY,KAAK,CAAC,GAAG,IAAI,GAAG,YAAY,KAAK,CAAC,GAAG,IAAI,CAAC;AACvE,wBAAgB,KAAK,IAAI,eAAe,CAAC;AACzC,YAAI,IAAI,eAAgB,YAAW,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,MAAM,UAAU,EAAE,CAAC;AAAA,MAClF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,cAA8C,CAAC;AACrD,MAAI,cAAc;AAClB,SAAO,QAAQ,CAAC,KAAK,UAAU;AAC7B,eAAW,WAAW,UAAU;AAC9B,YAAM,QAAQ,SAAS,KAAK,OAAO;AACnC,oBAAc,KAAK,IAAI,aAAa,KAAK;AAGzC,UAAI,QAAQ,EAAG,aAAY,KAAK,EAAE,OAAO,SAAS,MAAM,CAAC;AAAA,IAC3D;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe,OAAO,SAAS,aAAa,IAAI,gBAAgB;AAAA,IAChE,aAAa,OAAO,SAAS,WAAW,IAAI,cAAc;AAAA,IAC1D,QAAQ,WAAW,WAAW,KAAK,YAAY,WAAW;AAAA,EAC5D;AACF;AAGO,SAAS,SAAS,KAA2B;AAClD,QAAM,MAAM,SAAS,GAAG;AACxB,SAAO,MAAM,WAAW,GAAG,IAAI;AACjC;","names":[]}

package/dist/wizard/stepper-nav.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { f as ButtonVariant } from '../kit-labels-BHfRBbHs.js';
+import { f as ButtonVariant } from '../kit-labels-BD2F7sOz.js';
 import { UseWizardReturn, WizardLabels } from './types.js';
 import '../components/data-table-labels.js';
 import '../components/mini-calendar.js';
@@ -32,8 +32,7 @@ import '../components/dialog-frame.js';
 import '../components/modal.js';
 import '../hooks/use-search-param-state.js';
 import '../components/measured-grid.js';
-import '../feedback/feedback-attachment.js';
-import '../feedback/feedback-dialog.js';
+import '../feedback-attachment-BYAHJMOr.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import '../components/account-settings-labels.js';

package/dist/wizard.d.ts

@@ -6,7 +6,7 @@ export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './kit-labels-BHfRBbHs.js';
+import './kit-labels-BD2F7sOz.js';
 import './components/data-table-labels.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';
@@ -37,8 +37,7 @@ import './components/dialog-frame.js';
 import './components/modal.js';
 import './hooks/use-search-param-state.js';
 import './components/measured-grid.js';
-import './feedback/feedback-attachment.js';
-import './feedback/feedback-dialog.js';
+import './feedback-attachment-BYAHJMOr.js';
 import './feedback/feedback-thread.js';
 import './feedback/feedback-inbox.js';
 import './components/account-settings-labels.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.15.3",
+  "version": "0.15.5",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",
@@ -77,7 +77,9 @@
     "check:tailwind": "node scripts/check-tailwind-scan.mjs",
     "check:security": "npm audit --audit-level=high",
     "check:commits": "node scripts/check-commit-range.cjs",
-    "check:static": "npm run typecheck && npm run lint && npm run check:tokens && npm run check:security && npm run check:commits",
+    "check:commit-rules": "node scripts/check-commit-rules.mjs",
+    "sync:commit-rules": "node scripts/sync-commit-rules.mjs",
+    "check:static": "npm run typecheck && npm run lint && npm run check:tokens && npm run check:security && npm run check:commit-rules && npm run check:commits",
     "check:test": "npm run test:coverage",
     "check:build": "npm run build && npm run check:graph && npm run check:package && npm run build:showcase && npm run check:tailwind",
     "check": "node scripts/check.mjs",

package/src/components/alert-banner.tsx

@@ -28,7 +28,7 @@ export type AlertSize = "sm" | "md";
  * at any offset. Callers compensate the extra pixel in their own padding so
  * switching tones never shifts the layout. */
 const TONE_FRAME: Record<AlertTone, string> = {
-  danger: "border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]",
+  danger: "border-2 border-[var(--danger-border-strong)] bg-[var(--danger-bg)]",
   warning: "border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]",
   info: "border-2 border-[var(--info-border)] bg-[var(--info-bg)]",
   success: "border-2 border-[var(--success-border)] bg-[var(--success-bg)]",

package/src/components/amount-input.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from "react";
 import { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from "./currency-select";
 import { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, PHONE_QUERY } from "./ui";
 import { cn } from "../lib/cn";
+import { currencyMinorDigits } from "../lib/format";
 import { useMediaQuery } from "../hooks/use-media-query";
 import { CalculatorButton, type CalculatorButtonLabels } from "./calculator";
 import { NumberPadSheet, type NumberPadSheetLabels } from "./numpad-sheet";
@@ -99,6 +100,9 @@ interface AmountInputProps {
    * Because it is rendered rather than stored it cannot be deleted (the next render
    * puts it back), a select-all-and-retype keeps the direction, and the caret needs
    * no minding.
+   *
+   * Since 0.15.5 it is drawn on its own too, for a read-only or disabled signed figure
+   * (an "Items total" of −5.18): no `onNegativeChange` needed just to show the minus.
    */
   negative?: boolean;
   /**
@@ -182,17 +186,6 @@ interface AmountInputProps {
   onCommit?: (value: string) => void;
 }
 
-/** The currency's minor unit (CHF 2, JPY 0), or `undefined` for no currency or a code
- *  `Intl` does not accept. */
-function currencyDigits(code: string | undefined): number | undefined {
-  if (!code) return undefined;
-  try {
-    return new Intl.NumberFormat("en", { style: "currency", currency: code }).resolvedOptions()
-      .maximumFractionDigits;
-  } catch {
-    return undefined;
-  }
-}
 
 /**
  * A settled figure, rounded to `digits` (half away from zero) and clamped to
@@ -340,7 +333,11 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // front of a bare amount: an expression being typed ("12-30") owns its own
     // minus and has to survive keystroke-for-keystroke.
     const signOwned = onNegativeChange !== undefined;
-    const shown = signOwned && negative && isBareAmount(value) ? `-${value}` : value;
+    // The sign is DRAWN whenever `negative` says so, handler or not (keksdose live #366):
+    // a read-only or disabled total ("−5.18") used to need a dummy `onNegativeChange`
+    // just to show its minus. Without the handler there is nothing to toggle — a typed
+    // minus simply stays in the text, as in any field without a direction control.
+    const shown = negative && isBareAmount(value) ? `-${value}` : value;
     // What the user SEES is `shown` with the locale's decimal mark (kastlan 40: a
     // fr-CH user typed "1,5" and watched it turn into "1.5" under their fingers). Display only — `value`, `onChange`, the sign split and the settle all
     // stay dot-decimal, because that string is the contract: RhfMoneyField's
@@ -360,7 +357,12 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // draft is shown only while it still spells what the field holds; a value set from
     // outside, a calculator result or a commit falls back to the derived spelling.
     const [draft, setDraft] = useState<string | null>(null);
-    const derived = mark === "," ? shown.replace(/\./g, ",") : shown;
+    // A value the HOST set (not one typed here) is shown at the currency's minor unit
+    // while the field is not being edited: an FX estimate of 93.4213 showed four
+    // decimals (keksdose live #356). Display only — `value` is the host's, untouched.
+    const displayDigits = digitsProp ?? currencyMinorDigits(currency);
+    const resting = focused ? shown : settleAmount(shown, displayDigits);
+    const derived = mark === "," ? resting.replace(/\./g, ",") : resting;
     const draftAs = draft === null ? "" : sanitizeLive(normalizeTypedMarks(draft, mark));
     const display =
       draft === null
@@ -380,7 +382,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // edit the field's own text that is simply what the field was showing; the
     // desktop calculator keeps its expression in a popover the field never sees,
     // so it passes it in (see `CalculatorButton`'s `onChange`).
-    const digits = digitsProp ?? currencyDigits(currency);
+    const digits = digitsProp ?? currencyMinorDigits(currency);
     const settle = (text: string) => settleAmount(text, digits, min, max);
     const handleText = (raw: string, previous: string = shown) => {
       const text = sanitizeLive(raw);

package/src/components/chart.tsx

@@ -243,6 +243,21 @@ interface ChartTooltipContentProps {
   boundaryRef?: RefObject<HTMLElement | null>;
   /** Injected by recharts: keep series drawn with `hide` in the tooltip. */
   includeHidden?: boolean;
+  /**
+   * `"floating"` (the default): the box recharts moves with the cursor. `"readout"`: the
+   * same heading and values as a flat row for a FIXED place outside the plot — a
+   * `SeriesChart` whose `tooltip.placement` is `"above"`/`"below"` portals it there, so
+   * a finger on a phone no longer sits on the box it is trying to read (keksdose #359).
+   * No border, shadow, width cap or viewport nudge; the values flow in a grid whose
+   * column count depends on the row's width alone, so the row is the same height
+   * whatever is being pointed at — and, idle, it shows {@link idleKeys} with "—".
+   */
+  variant?: "floating" | "readout";
+  /** Readout only: the series to list while nothing is active, so the row keeps the
+   *  height it will have once something is. */
+  idleKeys?: readonly string[];
+  /** Readout only: the heading while nothing is active. Default "—". */
+  idleLabel?: ReactNode;
 }
 
 export function ChartTooltipContent({
@@ -257,13 +272,19 @@ export function ChartTooltipContent({
   coordinate,
   boundaryRef,
   includeHidden = false,
+  variant = "floating",
+  idleKeys,
+  idleLabel,
 }: ChartTooltipContentProps) {
   const config = useChart();
   const tipRef = useRef<HTMLDivElement>(null);
+  const readout = variant === "readout";
   // `ChartTooltip` keeps null values (so they can print "—"), which also keeps the
   // series a legend toggle switched off with `hide`; those go here instead.
   const items = includeHidden ? payload : payload?.filter((item) => item.hide !== true);
-  const visible = Boolean(active && items?.length);
+  const shown = Boolean(active && items?.length);
+  // Everything below that measures and moves the box is about a FLOATING one.
+  const visible = shown && !readout;
   // Recharts anchors the tooltip at coordinate.x inside the full (scrolled) chart
   // width; subtract the container's scrollLeft to get its on-screen x, then flip
   // left if the tooltip's own width would run past the visible right edge.
@@ -332,6 +353,85 @@ export function ChartTooltipContent({
       setNudge(next);
     }
   }, [visible, x, payload, label, flip, settled]);
+  // One series' line — the floating box stacks them; the readout lays them in a grid,
+  // where a long name is cut rather than wrapped so every cell stays one line high.
+  const tooltipRow = (item: TooltipPayloadItem, i: number, inRow: boolean) => {
+    // Bars/lines/areas identify a series by dataKey; pies/treemaps key off
+    // `name` (the nameKey value). Prefer whichever the config knows.
+    const dk = item.dataKey != null ? String(item.dataKey) : undefined;
+    const nm = item.name != null ? String(item.name) : undefined;
+    const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : (dk ?? nm ?? String(i));
+    const series = config[cfgKey];
+    const fill = typeof item.payload?.fill === "string" ? item.payload.fill : undefined;
+    // The data point's own `fill` before recharts' `item.color`: a treemap tile,
+    // or a bar with a per-cell colour, IS the colour the reader is pointing at,
+    // while `item.color` is the series-wide one — every tile's swatch came out
+    // `--chart-1` whatever colour the tile was.
+    const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "#64748b";
+    const name = series?.label ?? nm ?? cfgKey;
+    const raw = tooltipValue(item.value);
+    let text: ReactNode;
+    // An idle readout cell has asked nothing yet, so there is no absence for
+    // `formatValue` to word — it is the bare mark.
+    if (inRow && !shown) text = NO_VALUE;
+    else if (formatValue) text = formatValue(raw);
+    else if (raw == null) text = NO_VALUE;
+    else text = valueFormatter ? valueFormatter(raw) : raw;
+    return (
+      <div
+        key={`${cfgKey}-${i}`}
+        // A readout cell is capped so a wide row does not push its value a column away
+        // from its name.
+        className={cn("flex items-center", inRow ? "min-w-0 max-w-[12rem] gap-1.5" : "gap-2")}
+      >
+        <span
+          className={cn(
+            "shrink-0 rounded-[2px]",
+            indicator === "dot" ? "h-2.5 w-2.5 rounded-full" : "h-2.5 w-1",
+          )}
+          style={{ backgroundColor: color }}
+        />
+        <span
+          className={cn("min-w-0 text-[var(--text-muted)]", inRow ? "truncate" : "break-words")}
+        >
+          {name}
+        </span>
+        <span
+          data-private
+          // Isolated, so an RTL page does not turn "-26.6" into "26.6-": a figure has no
+          // strong direction of its own, and one formatted with an RTL mark keeps it.
+          dir="auto"
+          className="ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]"
+        >
+          {text}
+        </span>
+      </div>
+    );
+  };
+
+  if (readout) {
+    // Idle, the row lists every series with no value — the same cells it will have, so
+    // nothing under it moves on the first tap.
+    const rows: TooltipPayloadItem[] = shown
+      ? items!
+      : (idleKeys ?? Object.keys(config)).map((key) => ({ dataKey: key }));
+    return (
+      <div className="text-xs" data-chart-readout={shown ? "active" : "idle"}>
+        {/* A full 24 px line: the zoom's reset button sits at the top corner of a chart
+            whose row is above it, and has to fit beside the heading, not over a value. */}
+        <div data-readout-heading className="truncate font-medium leading-6 text-[var(--text-primary)]">
+          {shown && !hideLabel && label != null
+            ? labelFormatter
+              ? labelFormatter(label)
+              : label
+            : (idleLabel ?? NO_VALUE)}
+        </div>
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] gap-x-4 gap-y-1">
+          {rows.map((item, i) => tooltipRow(item, i, true))}
+        </div>
+      </div>
+    );
+  }
   if (!visible || !items) return null;
   return (
     <div
@@ -359,46 +459,7 @@ export function ChartTooltipContent({
           {labelFormatter ? labelFormatter(label) : label}
         </div>
       )}
-      <div className="grid gap-1.5">
-        {items.map((item, i) => {
-          // Bars/lines/areas identify a series by dataKey; pies/treemaps key off
-          // `name` (the nameKey value). Prefer whichever the config knows.
-          const dk = item.dataKey != null ? String(item.dataKey) : undefined;
-          const nm = item.name != null ? String(item.name) : undefined;
-          const cfgKey = dk && config[dk] ? dk : nm && config[nm] ? nm : (dk ?? nm ?? String(i));
-          const series = config[cfgKey];
-          const fill = typeof item.payload?.fill === "string" ? item.payload.fill : undefined;
-          // The data point's own `fill` before recharts' `item.color`: a treemap tile,
-          // or a bar with a per-cell colour, IS the colour the reader is pointing at,
-          // while `item.color` is the series-wide one — every tile's swatch came out
-          // `--chart-1` whatever colour the tile was.
-          const color = paintedColor(cfgKey, series) ?? fill ?? item.color ?? "#64748b";
-          const name = series?.label ?? nm ?? cfgKey;
-          const raw = tooltipValue(item.value);
-          let shown: ReactNode;
-          if (formatValue) shown = formatValue(raw);
-          else if (raw == null) shown = NO_VALUE;
-          else shown = valueFormatter ? valueFormatter(raw) : raw;
-          return (
-            <div key={`${cfgKey}-${i}`} className="flex items-center gap-2">
-              <span
-                className={cn(
-                  "shrink-0 rounded-[2px]",
-                  indicator === "dot" ? "h-2.5 w-2.5 rounded-full" : "h-2.5 w-1",
-                )}
-                style={{ backgroundColor: color }}
-              />
-              <span className="min-w-0 break-words text-[var(--text-muted)]">{name}</span>
-              <span
-                data-private
-                className="ms-auto shrink-0 whitespace-nowrap font-mono font-medium tabular-nums text-[var(--text-primary)]"
-              >
-                {shown}
-              </span>
-            </div>
-          );
-        })}
-      </div>
+      <div className="grid gap-1.5">{items.map((item, i) => tooltipRow(item, i, false))}</div>
     </div>
   );
 }

package/src/components/checkbox.tsx

@@ -40,7 +40,7 @@ const BOX_MIXED = "border-[var(--brand)] bg-[var(--brand)]";
 // survives fractional display scaling on every edge (see the note in ui.tsx). The
 // focus ring turns danger too, so focusing a wrong box does not repaint it as fine.
 const BOX_INVALID =
-  "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] checked:border-[var(--danger-border)] focus-visible:ring-[var(--danger)]";
+  "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] checked:border-[var(--danger-border-strong)] focus-visible:ring-[var(--danger)]";
 
 const ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
 

package/src/components/chip.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useId, useRef, useState } from "react";
+import { forwardRef, isValidElement, useId, useRef, useState } from "react";
 import type { ComponentPropsWithoutRef, KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { Check, X } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
@@ -307,7 +307,13 @@ interface ChipBaseProps {
    * drawn, so write it in normal case.
    */
   caps?: boolean;
-  icon?: LucideIcon;
+  /**
+   * The leading glyph: a lucide component (`icon={Check}`, drawn at the chip's size), or
+   * — since 0.15.4 — a ready element (`icon={<Check className="text-[var(--success)]" />}`)
+   * for a glyph whose colour or stroke carries a state; it is sized to the same box
+   * (keksdose live #358 built that slot by hand inside `children`).
+   */
+  icon?: LucideIcon | ReactElement;
   /**
    * Marks the chip as the current one — `aria-current` on a link, `aria-pressed` on a
    * toggle.
@@ -500,8 +506,27 @@ export const Chip = forwardRef<HTMLElement, ChipProps>(function Chip(
         </span>
       )}
       {dot && <span aria-hidden data-chip-dot="" className={cn("shrink-0 rounded-full", DOT_SIZE[size], DOT[tone])} />}
-      {Icon && <Icon className={cn(s.icon, "shrink-0")} aria-hidden />}
-      <span className="min-w-0 truncate">{children}</span>
+      {Icon &&
+        (isValidElement(Icon) ? (
+          <span aria-hidden className={cn(s.icon, "inline-flex shrink-0 [&>svg]:size-full")}>
+            {Icon}
+          </span>
+        ) : (
+          <Icon className={cn(s.icon, "shrink-0")} aria-hidden />
+        ))}
+      {/* Text truncates. Mixed children (an icon and a word) sit in a row instead: as a
+          plain span, the svg — a block under Tailwind's preflight — stacked above the
+          text (keksdose live #358). */}
+      <span
+        className={cn(
+          "min-w-0",
+          typeof children === "string" || typeof children === "number"
+            ? "truncate"
+            : "inline-flex items-center gap-1 [&>svg]:size-[1em] [&>svg]:shrink-0",
+        )}
+      >
+        {children}
+      </span>
     </>
   );
 

package/src/components/choice-card.tsx

@@ -102,7 +102,7 @@ const CARD =
 const CARD_DISABLED = "hover:border-[var(--border)] hover:bg-[var(--bg-surface)]";
 
 const CARD_INVALID =
-  "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] has-[:checked]:border-[var(--danger-border)] has-[:checked]:ring-[var(--danger-border)]";
+  "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] has-[:checked]:border-[var(--danger-border-strong)] has-[:checked]:ring-[var(--danger-border-strong)]";
 
 const BOX =
   "peer size-4 shrink-0 appearance-none border border-[var(--border-strong)] bg-[var(--bg-surface)] transition-colors " +

package/src/components/error-boundary.tsx

@@ -642,7 +642,7 @@ function ErrorFallback({
             // program's words and can be read out or screenshotted verbatim.
             <p
               data-error-message=""
-              className="-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-[var(--danger-border)] bg-[var(--danger-bg)] px-3 py-2 text-start font-mono text-xs text-[var(--text-primary)]"
+              className="-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-[var(--danger-border-strong)] bg-[var(--danger-bg)] px-3 py-2 text-start font-mono text-xs text-[var(--text-primary)]"
             >
               {errorLine}
             </p>

package/src/components/file-dropzone.tsx

@@ -339,7 +339,7 @@ export function FileDropzone({
               : dragOver
                 ? "cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]"
                 : showError
-                  ? "cursor-pointer border-[var(--danger-border)]"
+                  ? "cursor-pointer border-[var(--danger-border-strong)]"
                   : "cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]",
           className,
         )}

package/src/components/form-actions.tsx

@@ -160,7 +160,15 @@ export function FormActions({
       {...rest}
       style={
         placement === "sticky"
-          ? { paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))", ...style }
+          ? {
+              paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))",
+              // On the phone's bottom nav, not behind it (keksdose live #361): `bottom-0`
+              // pinned the row under AppShell's nav, which covers the page's last ~56px.
+              // `--app-nav-h` is the nav's measured height (0px from md up, and outside an
+              // AppShell); the 1px overlaps the two top borders into one line.
+              bottom: "max(0px, calc(var(--app-nav-h, 0px) - 1px))",
+              ...style,
+            }
           : style
       }
       className={cn("flex flex-wrap items-center gap-2", ALIGN_CLASS[justify], PLACEMENT_CLASS[placement], className)}