@eifi1/ui-kit 0.48.2 → 0.49.0

package/dist/shell/topbar-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/topbar-controls.tsx"],"sourcesContent":["import { Check, Globe, Moon, Palette, Sun } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport type { PalettePreset } from \"../theme/palette-presets\";\nimport type { ThemeMode } from \"../theme/theme-store\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** Shared square icon-button styling for top-bar triggers, so app-owned controls\n *  (account/feedback menus) line up with the shared ones. */\nexport const TOPBAR_TRIGGER_CLASS =\n  \"size-9 rounded-md flex items-center justify-center text-secondary hover:text-primary hover:bg-hover\";\n\n/** Shared row styling for the top-bar hover-menu items. `text-start`, so a label that\n *  wraps aligns to the reading edge in RTL too. */\nexport const TOPBAR_MENU_ITEM_CLASS =\n  \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-secondary hover:bg-hover\";\n\n/** The small uppercase heading row the top-bar menus share (`heading`). */\nfunction MenuHeading({ children }: { children: string }) {\n  return (\n    <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder\">\n      {children}\n    </li>\n  );\n}\n\n/**\n * Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode, and the\n * toggle keeps no storage key of its own (docs/top-bar-harmonization.md §6.4).\n *\n * `mode` is the theme ON SCREEN — the resolved one, so with a \"system\" preference it is\n * whatever the OS gives. A tap asks for the opposite of that: `onChange(\"light\")` while\n * dark is shown, `onChange(\"dark\")` while light is. The app writes it as its theme\n * preference (an explicit light or dark), where Settings → Appearance keeps the three-way\n * choice. `onToggle` is the older way to hear the tap, without the next mode; both fire.\n */\nexport function ThemeToggle({\n  mode,\n  onToggle,\n  onChange,\n  \"aria-label\": ariaLabel,\n  title,\n  className,\n}: {\n  /** The resolved light/dark on screen (`useThemeStore`'s `mode`, not its preference). */\n  mode: ThemeMode;\n  /** Hears a tap. Kept for 0.41's callers; `onChange` says what to switch to. */\n  onToggle?: () => void;\n  /** 0.42: the mode to switch to — always the opposite of `mode`. */\n  onChange?: (next: ThemeMode) => void;\n  /** Default: `topBar.theme` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  title?: string;\n  className?: string;\n}) {\n  // This had no default at all, so a toggle rendered without `aria-label` was an\n  // icon button with no name — a reader heard \"button\" and nothing else.\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { theme: ariaLabel });\n  const Icon = mode === \"dark\" ? Moon : Sun;\n  const button = (\n    <button\n      type=\"button\"\n      onClick={() => {\n        onChange?.(mode === \"dark\" ? \"light\" : \"dark\");\n        onToggle?.();\n      }}\n      aria-label={labels.theme}\n      className={cn(TOPBAR_TRIGGER_CLASS, className)}\n    >\n      <Icon className=\"size-5\" />\n    </button>\n  );\n  // The name on hover and focus even without a `title` (0.48, keksdose dev#610); a bubble\n  // that only repeats it is visual, in a fragment as on IconButton — see OptionSwitcherMenu.\n  const tip = title ?? labels.theme;\n  return (\n    <Tooltip label={tip} portal>\n      {tip === labels.theme ? <>{button}</> : button}\n    </Tooltip>\n  );\n}\n\n/** Appearance-preset switcher: a hover menu of palette presets with per-theme\n *  colour swatches. Controlled — the app owns the active id and applies it. */\nexport function PaletteMenu({\n  palettes,\n  activeId,\n  mode,\n  onSelect,\n  \"aria-label\": ariaLabel,\n  heading,\n}: {\n  palettes: PalettePreset[];\n  activeId: string;\n  mode: ThemeMode;\n  onSelect: (id: string) => void;\n  /** Default: `topBar.palette` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** Optional small heading row above the list. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { palette: ariaLabel });\n  const activeName = palettes.find((p) => p.id === activeId)?.name ?? activeId;\n  return (\n    <HoverMenu\n      aria-label={labels.palette}\n      trigger={({ toggle }) => (\n        <Tooltip label={activeName} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={labels.palette}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {/* A DATA colour, not a semantic one: the palette mark is the\n                \"colour\" control, so it carries a colour, and which hue is\n                arbitrary. `--chart-1` is the violet end of the CVD-safe\n                categorical ramp and flips per theme — a fixed `violet-500` did\n                not, and stayed a cool violet island on a warm page. */}\n            <Palette className=\"size-5 text-[var(--chart-1)]\" />\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"w-60 py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {palettes.map((p) => {\n            const ts = p[mode];\n            const swatches = [ts.bgPage, ts.brand, ts.moneyIncome, ts.moneyExpense, ts.moneyNet];\n            return (\n              <li key={p.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onSelect(p.id);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"flex shrink-0 gap-0.5\">\n                      {/* Deliberately a neutral at 10% and not a token: this hairline\n                          sits on an ARBITRARY preset colour, so it has to read against\n                          whatever that preset paints, which no themed border does. */}\n                      {swatches.map((c, i) => (\n                        <span\n                          key={i}\n                          className=\"size-3.5 rounded-sm ring-1 ring-inset ring-black/10 dark:ring-white/10\"\n                          style={{ background: c }}\n                        />\n                      ))}\n                    </span>\n                    <span className=\"flex min-w-0 flex-col text-start\">\n                      <span className=\"truncate\">{p.name}</span>\n                      <span className=\"truncate text-caption text-placeholder\">\n                        {p.blurb}\n                      </span>\n                    </span>\n                  </span>\n                  {activeId === p.id && (\n                    <Check className=\"size-4 shrink-0 text-secondary\" />\n                  )}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n\nexport interface LanguageOption {\n  code: string;\n  label: string;\n  /** ISO 3166-1 alpha-2 country code (lowercase) for the flag-icons flag. */\n  country: string;\n}\n\n/** Language switcher: a hover menu of options with flags and a check on the\n *  active one. Controlled — the app owns the current code and change handler.\n *\n *  The trigger is the *active* option's flag, not an icon: lucide's `Languages`\n *  glyph (文A) is the same mark Chrome puts in the omnibox for \"translate this\n *  page\", so it read as machine-translation rather than \"pick the UI language\"\n *  (Keksdose feedback #121). The flag also shows which language is currently on,\n *  which no icon can, and costs the same width on a crowded mobile bar. A globe\n *  covers the case where `current` matches nothing in `options`. */\nexport function LanguageMenu({\n  options,\n  current,\n  onChange,\n  \"aria-label\": ariaLabel,\n  heading,\n}: {\n  options: LanguageOption[];\n  current: string | undefined;\n  onChange: (code: string) => void;\n  /** Default: `topBar.language` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** Optional small heading row above the list — as on `TopBarActionMenu`,\n   *  `OptionSwitcherMenu` and `PaletteMenu`. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { language: ariaLabel });\n  const active = options.find((o) => o.code === current);\n  return (\n    <HoverMenu\n      aria-label={labels.language}\n      trigger={({ toggle }) => (\n        <Tooltip label={active?.label ?? labels.language} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={labels.language}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {active ? (\n              <span\n                aria-hidden\n                className={`fi fi-${active.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}\n              />\n            ) : (\n              <Globe className=\"size-5\" />\n            )}\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {options.map((lang) => {\n            const isActive = lang.code === current;\n            return (\n              <li key={lang.code}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onChange(lang.code);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex items-center gap-2\">\n                    <span\n                      aria-hidden\n                      className={`fi fi-${lang.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}\n                    />\n                    {lang.label}\n                  </span>\n                  {isActive && <Check className=\"size-4 text-secondary\" />}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/shell/topbar-controls.tsx"],"sourcesContent":["import { Check, Globe, Moon, Palette, Sun } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport type { PalettePreset } from \"../theme/palette-presets\";\nimport type { ThemeMode } from \"../theme/theme-store\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { languageCodeLabel } from \"./language-code\";\n\n/** Shared square icon-button styling for top-bar triggers, so app-owned controls\n *  (account/feedback menus) line up with the shared ones. */\nexport const TOPBAR_TRIGGER_CLASS =\n  \"size-9 rounded-md flex items-center justify-center text-secondary hover:text-primary hover:bg-hover\";\n\n/** Shared row styling for the top-bar hover-menu items. `text-start`, so a label that\n *  wraps aligns to the reading edge in RTL too. */\nexport const TOPBAR_MENU_ITEM_CLASS =\n  \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-secondary hover:bg-hover\";\n\n/** The small uppercase heading row the top-bar menus share (`heading`). */\nfunction MenuHeading({ children }: { children: string }) {\n  return (\n    <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder\">\n      {children}\n    </li>\n  );\n}\n\n/**\n * Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode, and the\n * toggle keeps no storage key of its own (docs/top-bar-harmonization.md §6.4).\n *\n * `mode` is the theme ON SCREEN — the resolved one, so with a \"system\" preference it is\n * whatever the OS gives. A tap asks for the opposite of that: `onChange(\"light\")` while\n * dark is shown, `onChange(\"dark\")` while light is. The app writes it as its theme\n * preference (an explicit light or dark), where Settings → Appearance keeps the three-way\n * choice. `onToggle` is the older way to hear the tap, without the next mode; both fire.\n */\nexport function ThemeToggle({\n  mode,\n  onToggle,\n  onChange,\n  \"aria-label\": ariaLabel,\n  title,\n  className,\n}: {\n  /** The resolved light/dark on screen (`useThemeStore`'s `mode`, not its preference). */\n  mode: ThemeMode;\n  /** Hears a tap. Kept for 0.41's callers; `onChange` says what to switch to. */\n  onToggle?: () => void;\n  /** 0.42: the mode to switch to — always the opposite of `mode`. */\n  onChange?: (next: ThemeMode) => void;\n  /** Default: `topBar.theme` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  title?: string;\n  className?: string;\n}) {\n  // This had no default at all, so a toggle rendered without `aria-label` was an\n  // icon button with no name — a reader heard \"button\" and nothing else.\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { theme: ariaLabel });\n  const Icon = mode === \"dark\" ? Moon : Sun;\n  const button = (\n    <button\n      type=\"button\"\n      onClick={() => {\n        onChange?.(mode === \"dark\" ? \"light\" : \"dark\");\n        onToggle?.();\n      }}\n      aria-label={labels.theme}\n      className={cn(TOPBAR_TRIGGER_CLASS, className)}\n    >\n      <Icon className=\"size-5\" />\n    </button>\n  );\n  // The name on hover and focus even without a `title` (0.48, keksdose dev#610); a bubble\n  // that only repeats it is visual, in a fragment as on IconButton — see OptionSwitcherMenu.\n  const tip = title ?? labels.theme;\n  return (\n    <Tooltip label={tip} portal>\n      {tip === labels.theme ? <>{button}</> : button}\n    </Tooltip>\n  );\n}\n\n/** Appearance-preset switcher: a hover menu of palette presets with per-theme\n *  colour swatches. Controlled — the app owns the active id and applies it. */\nexport function PaletteMenu({\n  palettes,\n  activeId,\n  mode,\n  onSelect,\n  \"aria-label\": ariaLabel,\n  heading,\n}: {\n  palettes: PalettePreset[];\n  activeId: string;\n  mode: ThemeMode;\n  onSelect: (id: string) => void;\n  /** Default: `topBar.palette` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** Optional small heading row above the list. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { palette: ariaLabel });\n  const activeName = palettes.find((p) => p.id === activeId)?.name ?? activeId;\n  return (\n    <HoverMenu\n      aria-label={labels.palette}\n      trigger={({ toggle }) => (\n        <Tooltip label={activeName} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={labels.palette}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {/* A DATA colour, not a semantic one: the palette mark is the\n                \"colour\" control, so it carries a colour, and which hue is\n                arbitrary. `--chart-1` is the violet end of the CVD-safe\n                categorical ramp and flips per theme — a fixed `violet-500` did\n                not, and stayed a cool violet island on a warm page. */}\n            <Palette className=\"size-5 text-[var(--chart-1)]\" />\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"w-60 py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {palettes.map((p) => {\n            const ts = p[mode];\n            const swatches = [ts.bgPage, ts.brand, ts.moneyIncome, ts.moneyExpense, ts.moneyNet];\n            return (\n              <li key={p.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onSelect(p.id);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"flex shrink-0 gap-0.5\">\n                      {/* Deliberately a neutral at 10% and not a token: this hairline\n                          sits on an ARBITRARY preset colour, so it has to read against\n                          whatever that preset paints, which no themed border does. */}\n                      {swatches.map((c, i) => (\n                        <span\n                          key={i}\n                          className=\"size-3.5 rounded-sm ring-1 ring-inset ring-black/10 dark:ring-white/10\"\n                          style={{ background: c }}\n                        />\n                      ))}\n                    </span>\n                    <span className=\"flex min-w-0 flex-col text-start\">\n                      <span className=\"truncate\">{p.name}</span>\n                      <span className=\"truncate text-caption text-placeholder\">\n                        {p.blurb}\n                      </span>\n                    </span>\n                  </span>\n                  {activeId === p.id && (\n                    <Check className=\"size-4 shrink-0 text-secondary\" />\n                  )}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n\nexport interface LanguageOption {\n  code: string;\n  label: string;\n  /** ISO 3166-1 alpha-2 country code (lowercase) for the flag-icons flag. */\n  country: string;\n}\n\n/** What {@link LanguageMenu}'s trigger shows of the active language (0.49 KIT-10). */\nexport type LanguageMenuTrigger = \"flag+code\" | \"code\" | \"flag\";\n\n/** The trigger with a code: as tall as the others, as wide as flag and code need. */\nconst LANGUAGE_TRIGGER_WIDE_CLASS = TOPBAR_TRIGGER_CLASS.replace(\"size-9\", \"h-9 min-w-9 gap-1.5 px-2\");\n\nconst FLAG_CLASS =\n  \"inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]\";\n\n/** Language switcher: a hover menu of options with flags and a check on the\n *  active one. Controlled — the app owns the current code and change handler.\n *\n *  The trigger is the *active* option's flag and its language code in capitals\n *  (\"DE\", \"FR\", \"IT\"; `trigger`, 0.49 KIT-10), not an icon: lucide's `Languages`\n *  glyph (文A) is the same mark Chrome puts in the omnibox for \"translate this\n *  page\", so it read as machine-translation rather than \"pick the UI language\"\n *  (Keksdose feedback #121). A flag alone could not tell de-CH, fr-CH and it-CH\n *  apart — one Swiss flag each — so the code is beside it. It is named \"Choose\n *  language, current: Deutsch\" (`topBar.languageCurrent`). A globe covers the\n *  case where `current` matches nothing in `options`. */\nexport function LanguageMenu({\n  options,\n  current,\n  onChange,\n  \"aria-label\": ariaLabel,\n  heading,\n  trigger = \"flag+code\",\n}: {\n  options: LanguageOption[];\n  current: string | undefined;\n  onChange: (code: string) => void;\n  /** The menu's name, and the trigger's as given. Default: the menu `topBar.language`,\n   *  the trigger `topBar.languageCurrent(<the active label>)`, from the\n   *  {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** Optional small heading row above the list — as on `TopBarActionMenu`,\n   *  `OptionSwitcherMenu` and `PaletteMenu`. */\n  heading?: string;\n  /** What the trigger shows: `\"flag+code\"` (default), `\"code\"` or `\"flag\"`. */\n  trigger?: LanguageMenuTrigger;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { language: ariaLabel });\n  const active = options.find((o) => o.code === current);\n  const triggerName = ariaLabel ?? (active ? labels.languageCurrent(active.label) : labels.language);\n  const showsCode = active !== undefined && trigger !== \"flag\";\n  return (\n    <HoverMenu\n      aria-label={labels.language}\n      trigger={({ toggle }) => (\n        <Tooltip label={active?.label ?? labels.language} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={triggerName}\n            className={showsCode ? LANGUAGE_TRIGGER_WIDE_CLASS : TOPBAR_TRIGGER_CLASS}\n          >\n            {active ? (\n              <>\n                {trigger !== \"code\" && <span aria-hidden className={`fi fi-${active.country} ${FLAG_CLASS}`} />}\n                {showsCode && (\n                  <span aria-hidden className=\"text-xs font-semibold tabular-nums tracking-wide\">\n                    {languageCodeLabel(active.code)}\n                  </span>\n                )}\n              </>\n            ) : (\n              <Globe className=\"size-5\" />\n            )}\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {options.map((lang) => {\n            const isActive = lang.code === current;\n            return (\n              <li key={lang.code}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onChange(lang.code);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex items-center gap-2\">\n                    <span aria-hidden className={`fi fi-${lang.country} ${FLAG_CLASS}`} />\n                    {lang.label}\n                  </span>\n                  {isActive && <Check className=\"size-4 text-secondary\" />}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/testing/css-variables.generated.d.ts

@@ -1,5 +1,5 @@
 /** Every custom property tokens.css declares, `@theme inline` names and `--app-nav-h`
- *  left out (100 names). */
+ *  left out (102 names). */
 export declare const KIT_NAMES: string;
 /** The theme variables of Tailwind 4.3.3's `theme.css` (413 names). */
 export declare const TAILWIND_THEME_NAMES: string;

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

@@ -1,5 +1,5 @@
 "use client";
-const KIT_NAMES = "--bg-active --bg-hover --bg-inverse --bg-page --bg-surface --bg-surface-2 --border --border-strong --brand --brand-bg --brand-bg-hover --brand-contrast --brand-hover --brand-muted --breakpoint-3xl --chart-1 --chart-2 --chart-3 --chart-4 --chart-5 --chart-6 --chart-7 --chart-8 --chart-9 --danger --danger-bg --danger-border --danger-border-strong --danger-contrast --danger-hover --flyout-from --focus-ring-width --hue-blue --hue-blue-bg --hue-blue-border --hue-blue-contrast --hue-indigo --hue-indigo-bg --hue-indigo-border --hue-indigo-contrast --hue-orange --hue-orange-bg --hue-orange-border --hue-orange-contrast --hue-purple --hue-purple-bg --hue-purple-border --hue-purple-contrast --hue-teal --hue-teal-bg --hue-teal-border --hue-teal-contrast --info --info-bg --info-border --info-contrast --media-ink --media-scrim --media-scrim-hover --money-expense --money-expense-contrast --money-income --money-income-contrast --money-net --money-net-contrast --money-neutral --money-neutral-contrast --neutral --neutral-contrast --status-edited --status-error --status-pending --status-synced --success --success-bg --success-border --success-contrast --text-caption --text-inverse --text-micro --text-muted --text-placeholder --text-primary --text-secondary --toast-action-bg --toast-action-fg --toast-danger-bg --toast-danger-border --toast-info-bg --toast-info-border --toast-success-bg --toast-success-border --toast-warning-bg --toast-warning-border --warning --warning-bg --warning-border --warning-border-strong --warning-contrast --z-toast";
+const KIT_NAMES = "--bg-active --bg-hover --bg-inverse --bg-page --bg-surface --bg-surface-2 --border --border-strong --brand --brand-bg --brand-bg-hover --brand-contrast --brand-hover --brand-muted --breakpoint-3xl --chart-1 --chart-2 --chart-3 --chart-4 --chart-5 --chart-6 --chart-7 --chart-8 --chart-9 --chart-ink --chart-muted --danger --danger-bg --danger-border --danger-border-strong --danger-contrast --danger-hover --flyout-from --focus-ring-width --hue-blue --hue-blue-bg --hue-blue-border --hue-blue-contrast --hue-indigo --hue-indigo-bg --hue-indigo-border --hue-indigo-contrast --hue-orange --hue-orange-bg --hue-orange-border --hue-orange-contrast --hue-purple --hue-purple-bg --hue-purple-border --hue-purple-contrast --hue-teal --hue-teal-bg --hue-teal-border --hue-teal-contrast --info --info-bg --info-border --info-contrast --media-ink --media-scrim --media-scrim-hover --money-expense --money-expense-contrast --money-income --money-income-contrast --money-net --money-net-contrast --money-neutral --money-neutral-contrast --neutral --neutral-contrast --status-edited --status-error --status-pending --status-synced --success --success-bg --success-border --success-contrast --text-caption --text-inverse --text-micro --text-muted --text-placeholder --text-primary --text-secondary --toast-action-bg --toast-action-fg --toast-danger-bg --toast-danger-border --toast-info-bg --toast-info-border --toast-success-bg --toast-success-border --toast-warning-bg --toast-warning-border --warning --warning-bg --warning-border --warning-border-strong --warning-contrast --z-toast";
 const TAILWIND_THEME_NAMES = "--animate-bounce --animate-ping --animate-pulse --animate-spin --aspect-video --blur-2xl --blur-3xl --blur-lg --blur-md --blur-sm --blur-xl --blur-xs --breakpoint-2xl --breakpoint-lg --breakpoint-md --breakpoint-sm --breakpoint-xl --color-amber-100 --color-amber-200 --color-amber-300 --color-amber-400 --color-amber-50 --color-amber-500 --color-amber-600 --color-amber-700 --color-amber-800 --color-amber-900 --color-amber-950 --color-black --color-blue-100 --color-blue-200 --color-blue-300 --color-blue-400 --color-blue-50 --color-blue-500 --color-blue-600 --color-blue-700 --color-blue-800 --color-blue-900 --color-blue-950 --color-cyan-100 --color-cyan-200 --color-cyan-300 --color-cyan-400 --color-cyan-50 --color-cyan-500 --color-cyan-600 --color-cyan-700 --color-cyan-800 --color-cyan-900 --color-cyan-950 --color-emerald-100 --color-emerald-200 --color-emerald-300 --color-emerald-400 --color-emerald-50 --color-emerald-500 --color-emerald-600 --color-emerald-700 --color-emerald-800 --color-emerald-900 --color-emerald-950 --color-fuchsia-100 --color-fuchsia-200 --color-fuchsia-300 --color-fuchsia-400 --color-fuchsia-50 --color-fuchsia-500 --color-fuchsia-600 --color-fuchsia-700 --color-fuchsia-800 --color-fuchsia-900 --color-fuchsia-950 --color-gray-100 --color-gray-200 --color-gray-300 --color-gray-400 --color-gray-50 --color-gray-500 --color-gray-600 --color-gray-700 --color-gray-800 --color-gray-900 --color-gray-950 --color-green-100 --color-green-200 --color-green-300 --color-green-400 --color-green-50 --color-green-500 --color-green-600 --color-green-700 --color-green-800 --color-green-900 --color-green-950 --color-indigo-100 --color-indigo-200 --color-indigo-300 --color-indigo-400 --color-indigo-50 --color-indigo-500 --color-indigo-600 --color-indigo-700 --color-indigo-800 --color-indigo-900 --color-indigo-950 --color-lime-100 --color-lime-200 --color-lime-300 --color-lime-400 --color-lime-50 --color-lime-500 --color-lime-600 --color-lime-700 --color-lime-800 --color-lime-900 --color-lime-950 --color-mauve-100 --color-mauve-200 --color-mauve-300 --color-mauve-400 --color-mauve-50 --color-mauve-500 --color-mauve-600 --color-mauve-700 --color-mauve-800 --color-mauve-900 --color-mauve-950 --color-mist-100 --color-mist-200 --color-mist-300 --color-mist-400 --color-mist-50 --color-mist-500 --color-mist-600 --color-mist-700 --color-mist-800 --color-mist-900 --color-mist-950 --color-neutral-100 --color-neutral-200 --color-neutral-300 --color-neutral-400 --color-neutral-50 --color-neutral-500 --color-neutral-600 --color-neutral-700 --color-neutral-800 --color-neutral-900 --color-neutral-950 --color-olive-100 --color-olive-200 --color-olive-300 --color-olive-400 --color-olive-50 --color-olive-500 --color-olive-600 --color-olive-700 --color-olive-800 --color-olive-900 --color-olive-950 --color-orange-100 --color-orange-200 --color-orange-300 --color-orange-400 --color-orange-50 --color-orange-500 --color-orange-600 --color-orange-700 --color-orange-800 --color-orange-900 --color-orange-950 --color-pink-100 --color-pink-200 --color-pink-300 --color-pink-400 --color-pink-50 --color-pink-500 --color-pink-600 --color-pink-700 --color-pink-800 --color-pink-900 --color-pink-950 --color-purple-100 --color-purple-200 --color-purple-300 --color-purple-400 --color-purple-50 --color-purple-500 --color-purple-600 --color-purple-700 --color-purple-800 --color-purple-900 --color-purple-950 --color-red-100 --color-red-200 --color-red-300 --color-red-400 --color-red-50 --color-red-500 --color-red-600 --color-red-700 --color-red-800 --color-red-900 --color-red-950 --color-rose-100 --color-rose-200 --color-rose-300 --color-rose-400 --color-rose-50 --color-rose-500 --color-rose-600 --color-rose-700 --color-rose-800 --color-rose-900 --color-rose-950 --color-sky-100 --color-sky-200 --color-sky-300 --color-sky-400 --color-sky-50 --color-sky-500 --color-sky-600 --color-sky-700 --color-sky-800 --color-sky-900 --color-sky-950 --color-slate-100 --color-slate-200 --color-slate-300 --color-slate-400 --color-slate-50 --color-slate-500 --color-slate-600 --color-slate-700 --color-slate-800 --color-slate-900 --color-slate-950 --color-stone-100 --color-stone-200 --color-stone-300 --color-stone-400 --color-stone-50 --color-stone-500 --color-stone-600 --color-stone-700 --color-stone-800 --color-stone-900 --color-stone-950 --color-taupe-100 --color-taupe-200 --color-taupe-300 --color-taupe-400 --color-taupe-50 --color-taupe-500 --color-taupe-600 --color-taupe-700 --color-taupe-800 --color-taupe-900 --color-taupe-950 --color-teal-100 --color-teal-200 --color-teal-300 --color-teal-400 --color-teal-50 --color-teal-500 --color-teal-600 --color-teal-700 --color-teal-800 --color-teal-900 --color-teal-950 --color-violet-100 --color-violet-200 --color-violet-300 --color-violet-400 --color-violet-50 --color-violet-500 --color-violet-600 --color-violet-700 --color-violet-800 --color-violet-900 --color-violet-950 --color-white --color-yellow-100 --color-yellow-200 --color-yellow-300 --color-yellow-400 --color-yellow-50 --color-yellow-500 --color-yellow-600 --color-yellow-700 --color-yellow-800 --color-yellow-900 --color-yellow-950 --color-zinc-100 --color-zinc-200 --color-zinc-300 --color-zinc-400 --color-zinc-50 --color-zinc-500 --color-zinc-600 --color-zinc-700 --color-zinc-800 --color-zinc-900 --color-zinc-950 --container-2xl --container-2xs --container-3xl --container-3xs --container-4xl --container-5xl --container-6xl --container-7xl --container-lg --container-md --container-sm --container-xl --container-xs --default-font-family --default-font-feature-settings --default-font-variation-settings --default-mono-font-family --default-mono-font-feature-settings --default-mono-font-variation-settings --default-transition-duration --default-transition-timing-function --drop-shadow-2xl --drop-shadow-lg --drop-shadow-md --drop-shadow-sm --drop-shadow-xl --drop-shadow-xs --ease-in --ease-in-out --ease-out --font-mono --font-sans --font-serif --font-weight-black --font-weight-bold --font-weight-extrabold --font-weight-extralight --font-weight-light --font-weight-medium --font-weight-normal --font-weight-semibold --font-weight-thin --inset-shadow-2xs --inset-shadow-sm --inset-shadow-xs --leading-loose --leading-normal --leading-relaxed --leading-snug --leading-tight --perspective-distant --perspective-dramatic --perspective-midrange --perspective-near --perspective-normal --radius-2xl --radius-3xl --radius-4xl --radius-lg --radius-md --radius-sm --radius-xl --radius-xs --shadow-2xl --shadow-2xs --shadow-lg --shadow-md --shadow-sm --shadow-xl --shadow-xs --spacing --text-2xl --text-2xl--line-height --text-3xl --text-3xl--line-height --text-4xl --text-4xl--line-height --text-5xl --text-5xl--line-height --text-6xl --text-6xl--line-height --text-7xl --text-7xl--line-height --text-8xl --text-8xl--line-height --text-9xl --text-9xl--line-height --text-base --text-base--line-height --text-lg --text-lg--line-height --text-shadow-2xs --text-shadow-lg --text-shadow-md --text-shadow-sm --text-shadow-xs --text-sm --text-sm--line-height --text-xl --text-xl--line-height --text-xs --text-xs--line-height --tracking-normal --tracking-tight --tracking-tighter --tracking-wide --tracking-wider --tracking-widest";
 export {
   KIT_NAMES,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/testing/css-variables.generated.ts"],"sourcesContent":["// GENERATED by scripts/gen-kit-css-variables.mjs — do not edit by hand. Re-run it after\n// changing tokens.css or upgrading Tailwind; src/__tests__/token-vars-declared.test.ts\n// fails while this is stale.\n\n/** Every custom property tokens.css declares, `@theme inline` names and `--app-nav-h`\n *  left out (100 names). */\nexport const KIT_NAMES =\n  \"--bg-active --bg-hover --bg-inverse --bg-page --bg-surface --bg-surface-2 --border \" +\n  \"--border-strong --brand --brand-bg --brand-bg-hover --brand-contrast --brand-hover --brand-muted \" +\n  \"--breakpoint-3xl --chart-1 --chart-2 --chart-3 --chart-4 --chart-5 --chart-6 --chart-7 --chart-8 \" +\n  \"--chart-9 --danger --danger-bg --danger-border --danger-border-strong --danger-contrast \" +\n  \"--danger-hover --flyout-from --focus-ring-width --hue-blue --hue-blue-bg --hue-blue-border \" +\n  \"--hue-blue-contrast --hue-indigo --hue-indigo-bg --hue-indigo-border --hue-indigo-contrast \" +\n  \"--hue-orange --hue-orange-bg --hue-orange-border --hue-orange-contrast --hue-purple \" +\n  \"--hue-purple-bg --hue-purple-border --hue-purple-contrast --hue-teal --hue-teal-bg \" +\n  \"--hue-teal-border --hue-teal-contrast --info --info-bg --info-border --info-contrast --media-ink \" +\n  \"--media-scrim --media-scrim-hover --money-expense --money-expense-contrast --money-income \" +\n  \"--money-income-contrast --money-net --money-net-contrast --money-neutral \" +\n  \"--money-neutral-contrast --neutral --neutral-contrast --status-edited --status-error \" +\n  \"--status-pending --status-synced --success --success-bg --success-border --success-contrast \" +\n  \"--text-caption --text-inverse --text-micro --text-muted --text-placeholder --text-primary \" +\n  \"--text-secondary --toast-action-bg --toast-action-fg --toast-danger-bg --toast-danger-border \" +\n  \"--toast-info-bg --toast-info-border --toast-success-bg --toast-success-border --toast-warning-bg \" +\n  \"--toast-warning-border --warning --warning-bg --warning-border --warning-border-strong \" +\n  \"--warning-contrast --z-toast\";\n\n/** The theme variables of Tailwind 4.3.3's `theme.css` (413 names). */\nexport const TAILWIND_THEME_NAMES =\n  \"--animate-bounce --animate-ping --animate-pulse --animate-spin --aspect-video --blur-2xl \" +\n  \"--blur-3xl --blur-lg --blur-md --blur-sm --blur-xl --blur-xs --breakpoint-2xl --breakpoint-lg \" +\n  \"--breakpoint-md --breakpoint-sm --breakpoint-xl --color-amber-100 --color-amber-200 \" +\n  \"--color-amber-300 --color-amber-400 --color-amber-50 --color-amber-500 --color-amber-600 \" +\n  \"--color-amber-700 --color-amber-800 --color-amber-900 --color-amber-950 --color-black \" +\n  \"--color-blue-100 --color-blue-200 --color-blue-300 --color-blue-400 --color-blue-50 \" +\n  \"--color-blue-500 --color-blue-600 --color-blue-700 --color-blue-800 --color-blue-900 \" +\n  \"--color-blue-950 --color-cyan-100 --color-cyan-200 --color-cyan-300 --color-cyan-400 \" +\n  \"--color-cyan-50 --color-cyan-500 --color-cyan-600 --color-cyan-700 --color-cyan-800 \" +\n  \"--color-cyan-900 --color-cyan-950 --color-emerald-100 --color-emerald-200 --color-emerald-300 \" +\n  \"--color-emerald-400 --color-emerald-50 --color-emerald-500 --color-emerald-600 \" +\n  \"--color-emerald-700 --color-emerald-800 --color-emerald-900 --color-emerald-950 \" +\n  \"--color-fuchsia-100 --color-fuchsia-200 --color-fuchsia-300 --color-fuchsia-400 \" +\n  \"--color-fuchsia-50 --color-fuchsia-500 --color-fuchsia-600 --color-fuchsia-700 \" +\n  \"--color-fuchsia-800 --color-fuchsia-900 --color-fuchsia-950 --color-gray-100 --color-gray-200 \" +\n  \"--color-gray-300 --color-gray-400 --color-gray-50 --color-gray-500 --color-gray-600 \" +\n  \"--color-gray-700 --color-gray-800 --color-gray-900 --color-gray-950 --color-green-100 \" +\n  \"--color-green-200 --color-green-300 --color-green-400 --color-green-50 --color-green-500 \" +\n  \"--color-green-600 --color-green-700 --color-green-800 --color-green-900 --color-green-950 \" +\n  \"--color-indigo-100 --color-indigo-200 --color-indigo-300 --color-indigo-400 --color-indigo-50 \" +\n  \"--color-indigo-500 --color-indigo-600 --color-indigo-700 --color-indigo-800 --color-indigo-900 \" +\n  \"--color-indigo-950 --color-lime-100 --color-lime-200 --color-lime-300 --color-lime-400 \" +\n  \"--color-lime-50 --color-lime-500 --color-lime-600 --color-lime-700 --color-lime-800 \" +\n  \"--color-lime-900 --color-lime-950 --color-mauve-100 --color-mauve-200 --color-mauve-300 \" +\n  \"--color-mauve-400 --color-mauve-50 --color-mauve-500 --color-mauve-600 --color-mauve-700 \" +\n  \"--color-mauve-800 --color-mauve-900 --color-mauve-950 --color-mist-100 --color-mist-200 \" +\n  \"--color-mist-300 --color-mist-400 --color-mist-50 --color-mist-500 --color-mist-600 \" +\n  \"--color-mist-700 --color-mist-800 --color-mist-900 --color-mist-950 --color-neutral-100 \" +\n  \"--color-neutral-200 --color-neutral-300 --color-neutral-400 --color-neutral-50 \" +\n  \"--color-neutral-500 --color-neutral-600 --color-neutral-700 --color-neutral-800 \" +\n  \"--color-neutral-900 --color-neutral-950 --color-olive-100 --color-olive-200 --color-olive-300 \" +\n  \"--color-olive-400 --color-olive-50 --color-olive-500 --color-olive-600 --color-olive-700 \" +\n  \"--color-olive-800 --color-olive-900 --color-olive-950 --color-orange-100 --color-orange-200 \" +\n  \"--color-orange-300 --color-orange-400 --color-orange-50 --color-orange-500 --color-orange-600 \" +\n  \"--color-orange-700 --color-orange-800 --color-orange-900 --color-orange-950 --color-pink-100 \" +\n  \"--color-pink-200 --color-pink-300 --color-pink-400 --color-pink-50 --color-pink-500 \" +\n  \"--color-pink-600 --color-pink-700 --color-pink-800 --color-pink-900 --color-pink-950 \" +\n  \"--color-purple-100 --color-purple-200 --color-purple-300 --color-purple-400 --color-purple-50 \" +\n  \"--color-purple-500 --color-purple-600 --color-purple-700 --color-purple-800 --color-purple-900 \" +\n  \"--color-purple-950 --color-red-100 --color-red-200 --color-red-300 --color-red-400 \" +\n  \"--color-red-50 --color-red-500 --color-red-600 --color-red-700 --color-red-800 --color-red-900 \" +\n  \"--color-red-950 --color-rose-100 --color-rose-200 --color-rose-300 --color-rose-400 \" +\n  \"--color-rose-50 --color-rose-500 --color-rose-600 --color-rose-700 --color-rose-800 \" +\n  \"--color-rose-900 --color-rose-950 --color-sky-100 --color-sky-200 --color-sky-300 \" +\n  \"--color-sky-400 --color-sky-50 --color-sky-500 --color-sky-600 --color-sky-700 --color-sky-800 \" +\n  \"--color-sky-900 --color-sky-950 --color-slate-100 --color-slate-200 --color-slate-300 \" +\n  \"--color-slate-400 --color-slate-50 --color-slate-500 --color-slate-600 --color-slate-700 \" +\n  \"--color-slate-800 --color-slate-900 --color-slate-950 --color-stone-100 --color-stone-200 \" +\n  \"--color-stone-300 --color-stone-400 --color-stone-50 --color-stone-500 --color-stone-600 \" +\n  \"--color-stone-700 --color-stone-800 --color-stone-900 --color-stone-950 --color-taupe-100 \" +\n  \"--color-taupe-200 --color-taupe-300 --color-taupe-400 --color-taupe-50 --color-taupe-500 \" +\n  \"--color-taupe-600 --color-taupe-700 --color-taupe-800 --color-taupe-900 --color-taupe-950 \" +\n  \"--color-teal-100 --color-teal-200 --color-teal-300 --color-teal-400 --color-teal-50 \" +\n  \"--color-teal-500 --color-teal-600 --color-teal-700 --color-teal-800 --color-teal-900 \" +\n  \"--color-teal-950 --color-violet-100 --color-violet-200 --color-violet-300 --color-violet-400 \" +\n  \"--color-violet-50 --color-violet-500 --color-violet-600 --color-violet-700 --color-violet-800 \" +\n  \"--color-violet-900 --color-violet-950 --color-white --color-yellow-100 --color-yellow-200 \" +\n  \"--color-yellow-300 --color-yellow-400 --color-yellow-50 --color-yellow-500 --color-yellow-600 \" +\n  \"--color-yellow-700 --color-yellow-800 --color-yellow-900 --color-yellow-950 --color-zinc-100 \" +\n  \"--color-zinc-200 --color-zinc-300 --color-zinc-400 --color-zinc-50 --color-zinc-500 \" +\n  \"--color-zinc-600 --color-zinc-700 --color-zinc-800 --color-zinc-900 --color-zinc-950 \" +\n  \"--container-2xl --container-2xs --container-3xl --container-3xs --container-4xl --container-5xl \" +\n  \"--container-6xl --container-7xl --container-lg --container-md --container-sm --container-xl \" +\n  \"--container-xs --default-font-family --default-font-feature-settings \" +\n  \"--default-font-variation-settings --default-mono-font-family \" +\n  \"--default-mono-font-feature-settings --default-mono-font-variation-settings \" +\n  \"--default-transition-duration --default-transition-timing-function --drop-shadow-2xl \" +\n  \"--drop-shadow-lg --drop-shadow-md --drop-shadow-sm --drop-shadow-xl --drop-shadow-xs --ease-in \" +\n  \"--ease-in-out --ease-out --font-mono --font-sans --font-serif --font-weight-black \" +\n  \"--font-weight-bold --font-weight-extrabold --font-weight-extralight --font-weight-light \" +\n  \"--font-weight-medium --font-weight-normal --font-weight-semibold --font-weight-thin \" +\n  \"--inset-shadow-2xs --inset-shadow-sm --inset-shadow-xs --leading-loose --leading-normal \" +\n  \"--leading-relaxed --leading-snug --leading-tight --perspective-distant --perspective-dramatic \" +\n  \"--perspective-midrange --perspective-near --perspective-normal --radius-2xl --radius-3xl \" +\n  \"--radius-4xl --radius-lg --radius-md --radius-sm --radius-xl --radius-xs --shadow-2xl \" +\n  \"--shadow-2xs --shadow-lg --shadow-md --shadow-sm --shadow-xl --shadow-xs --spacing --text-2xl \" +\n  \"--text-2xl--line-height --text-3xl --text-3xl--line-height --text-4xl --text-4xl--line-height \" +\n  \"--text-5xl --text-5xl--line-height --text-6xl --text-6xl--line-height --text-7xl \" +\n  \"--text-7xl--line-height --text-8xl --text-8xl--line-height --text-9xl --text-9xl--line-height \" +\n  \"--text-base --text-base--line-height --text-lg --text-lg--line-height --text-shadow-2xs \" +\n  \"--text-shadow-lg --text-shadow-md --text-shadow-sm --text-shadow-xs --text-sm \" +\n  \"--text-sm--line-height --text-xl --text-xl--line-height --text-xs --text-xs--line-height \" +\n  \"--tracking-normal --tracking-tight --tracking-tighter --tracking-wide --tracking-wider \" +\n  \"--tracking-widest\";\n"],"mappings":";AAMO,MAAM,YACX;AAoBK,MAAM,uBACX;","names":[]}
+{"version":3,"sources":["../../src/testing/css-variables.generated.ts"],"sourcesContent":["// GENERATED by scripts/gen-kit-css-variables.mjs — do not edit by hand. Re-run it after\n// changing tokens.css or upgrading Tailwind; src/__tests__/token-vars-declared.test.ts\n// fails while this is stale.\n\n/** Every custom property tokens.css declares, `@theme inline` names and `--app-nav-h`\n *  left out (102 names). */\nexport const KIT_NAMES =\n  \"--bg-active --bg-hover --bg-inverse --bg-page --bg-surface --bg-surface-2 --border \" +\n  \"--border-strong --brand --brand-bg --brand-bg-hover --brand-contrast --brand-hover --brand-muted \" +\n  \"--breakpoint-3xl --chart-1 --chart-2 --chart-3 --chart-4 --chart-5 --chart-6 --chart-7 --chart-8 \" +\n  \"--chart-9 --chart-ink --chart-muted --danger --danger-bg --danger-border --danger-border-strong \" +\n  \"--danger-contrast --danger-hover --flyout-from --focus-ring-width --hue-blue --hue-blue-bg \" +\n  \"--hue-blue-border --hue-blue-contrast --hue-indigo --hue-indigo-bg --hue-indigo-border \" +\n  \"--hue-indigo-contrast --hue-orange --hue-orange-bg --hue-orange-border --hue-orange-contrast \" +\n  \"--hue-purple --hue-purple-bg --hue-purple-border --hue-purple-contrast --hue-teal --hue-teal-bg \" +\n  \"--hue-teal-border --hue-teal-contrast --info --info-bg --info-border --info-contrast --media-ink \" +\n  \"--media-scrim --media-scrim-hover --money-expense --money-expense-contrast --money-income \" +\n  \"--money-income-contrast --money-net --money-net-contrast --money-neutral \" +\n  \"--money-neutral-contrast --neutral --neutral-contrast --status-edited --status-error \" +\n  \"--status-pending --status-synced --success --success-bg --success-border --success-contrast \" +\n  \"--text-caption --text-inverse --text-micro --text-muted --text-placeholder --text-primary \" +\n  \"--text-secondary --toast-action-bg --toast-action-fg --toast-danger-bg --toast-danger-border \" +\n  \"--toast-info-bg --toast-info-border --toast-success-bg --toast-success-border --toast-warning-bg \" +\n  \"--toast-warning-border --warning --warning-bg --warning-border --warning-border-strong \" +\n  \"--warning-contrast --z-toast\";\n\n/** The theme variables of Tailwind 4.3.3's `theme.css` (413 names). */\nexport const TAILWIND_THEME_NAMES =\n  \"--animate-bounce --animate-ping --animate-pulse --animate-spin --aspect-video --blur-2xl \" +\n  \"--blur-3xl --blur-lg --blur-md --blur-sm --blur-xl --blur-xs --breakpoint-2xl --breakpoint-lg \" +\n  \"--breakpoint-md --breakpoint-sm --breakpoint-xl --color-amber-100 --color-amber-200 \" +\n  \"--color-amber-300 --color-amber-400 --color-amber-50 --color-amber-500 --color-amber-600 \" +\n  \"--color-amber-700 --color-amber-800 --color-amber-900 --color-amber-950 --color-black \" +\n  \"--color-blue-100 --color-blue-200 --color-blue-300 --color-blue-400 --color-blue-50 \" +\n  \"--color-blue-500 --color-blue-600 --color-blue-700 --color-blue-800 --color-blue-900 \" +\n  \"--color-blue-950 --color-cyan-100 --color-cyan-200 --color-cyan-300 --color-cyan-400 \" +\n  \"--color-cyan-50 --color-cyan-500 --color-cyan-600 --color-cyan-700 --color-cyan-800 \" +\n  \"--color-cyan-900 --color-cyan-950 --color-emerald-100 --color-emerald-200 --color-emerald-300 \" +\n  \"--color-emerald-400 --color-emerald-50 --color-emerald-500 --color-emerald-600 \" +\n  \"--color-emerald-700 --color-emerald-800 --color-emerald-900 --color-emerald-950 \" +\n  \"--color-fuchsia-100 --color-fuchsia-200 --color-fuchsia-300 --color-fuchsia-400 \" +\n  \"--color-fuchsia-50 --color-fuchsia-500 --color-fuchsia-600 --color-fuchsia-700 \" +\n  \"--color-fuchsia-800 --color-fuchsia-900 --color-fuchsia-950 --color-gray-100 --color-gray-200 \" +\n  \"--color-gray-300 --color-gray-400 --color-gray-50 --color-gray-500 --color-gray-600 \" +\n  \"--color-gray-700 --color-gray-800 --color-gray-900 --color-gray-950 --color-green-100 \" +\n  \"--color-green-200 --color-green-300 --color-green-400 --color-green-50 --color-green-500 \" +\n  \"--color-green-600 --color-green-700 --color-green-800 --color-green-900 --color-green-950 \" +\n  \"--color-indigo-100 --color-indigo-200 --color-indigo-300 --color-indigo-400 --color-indigo-50 \" +\n  \"--color-indigo-500 --color-indigo-600 --color-indigo-700 --color-indigo-800 --color-indigo-900 \" +\n  \"--color-indigo-950 --color-lime-100 --color-lime-200 --color-lime-300 --color-lime-400 \" +\n  \"--color-lime-50 --color-lime-500 --color-lime-600 --color-lime-700 --color-lime-800 \" +\n  \"--color-lime-900 --color-lime-950 --color-mauve-100 --color-mauve-200 --color-mauve-300 \" +\n  \"--color-mauve-400 --color-mauve-50 --color-mauve-500 --color-mauve-600 --color-mauve-700 \" +\n  \"--color-mauve-800 --color-mauve-900 --color-mauve-950 --color-mist-100 --color-mist-200 \" +\n  \"--color-mist-300 --color-mist-400 --color-mist-50 --color-mist-500 --color-mist-600 \" +\n  \"--color-mist-700 --color-mist-800 --color-mist-900 --color-mist-950 --color-neutral-100 \" +\n  \"--color-neutral-200 --color-neutral-300 --color-neutral-400 --color-neutral-50 \" +\n  \"--color-neutral-500 --color-neutral-600 --color-neutral-700 --color-neutral-800 \" +\n  \"--color-neutral-900 --color-neutral-950 --color-olive-100 --color-olive-200 --color-olive-300 \" +\n  \"--color-olive-400 --color-olive-50 --color-olive-500 --color-olive-600 --color-olive-700 \" +\n  \"--color-olive-800 --color-olive-900 --color-olive-950 --color-orange-100 --color-orange-200 \" +\n  \"--color-orange-300 --color-orange-400 --color-orange-50 --color-orange-500 --color-orange-600 \" +\n  \"--color-orange-700 --color-orange-800 --color-orange-900 --color-orange-950 --color-pink-100 \" +\n  \"--color-pink-200 --color-pink-300 --color-pink-400 --color-pink-50 --color-pink-500 \" +\n  \"--color-pink-600 --color-pink-700 --color-pink-800 --color-pink-900 --color-pink-950 \" +\n  \"--color-purple-100 --color-purple-200 --color-purple-300 --color-purple-400 --color-purple-50 \" +\n  \"--color-purple-500 --color-purple-600 --color-purple-700 --color-purple-800 --color-purple-900 \" +\n  \"--color-purple-950 --color-red-100 --color-red-200 --color-red-300 --color-red-400 \" +\n  \"--color-red-50 --color-red-500 --color-red-600 --color-red-700 --color-red-800 --color-red-900 \" +\n  \"--color-red-950 --color-rose-100 --color-rose-200 --color-rose-300 --color-rose-400 \" +\n  \"--color-rose-50 --color-rose-500 --color-rose-600 --color-rose-700 --color-rose-800 \" +\n  \"--color-rose-900 --color-rose-950 --color-sky-100 --color-sky-200 --color-sky-300 \" +\n  \"--color-sky-400 --color-sky-50 --color-sky-500 --color-sky-600 --color-sky-700 --color-sky-800 \" +\n  \"--color-sky-900 --color-sky-950 --color-slate-100 --color-slate-200 --color-slate-300 \" +\n  \"--color-slate-400 --color-slate-50 --color-slate-500 --color-slate-600 --color-slate-700 \" +\n  \"--color-slate-800 --color-slate-900 --color-slate-950 --color-stone-100 --color-stone-200 \" +\n  \"--color-stone-300 --color-stone-400 --color-stone-50 --color-stone-500 --color-stone-600 \" +\n  \"--color-stone-700 --color-stone-800 --color-stone-900 --color-stone-950 --color-taupe-100 \" +\n  \"--color-taupe-200 --color-taupe-300 --color-taupe-400 --color-taupe-50 --color-taupe-500 \" +\n  \"--color-taupe-600 --color-taupe-700 --color-taupe-800 --color-taupe-900 --color-taupe-950 \" +\n  \"--color-teal-100 --color-teal-200 --color-teal-300 --color-teal-400 --color-teal-50 \" +\n  \"--color-teal-500 --color-teal-600 --color-teal-700 --color-teal-800 --color-teal-900 \" +\n  \"--color-teal-950 --color-violet-100 --color-violet-200 --color-violet-300 --color-violet-400 \" +\n  \"--color-violet-50 --color-violet-500 --color-violet-600 --color-violet-700 --color-violet-800 \" +\n  \"--color-violet-900 --color-violet-950 --color-white --color-yellow-100 --color-yellow-200 \" +\n  \"--color-yellow-300 --color-yellow-400 --color-yellow-50 --color-yellow-500 --color-yellow-600 \" +\n  \"--color-yellow-700 --color-yellow-800 --color-yellow-900 --color-yellow-950 --color-zinc-100 \" +\n  \"--color-zinc-200 --color-zinc-300 --color-zinc-400 --color-zinc-50 --color-zinc-500 \" +\n  \"--color-zinc-600 --color-zinc-700 --color-zinc-800 --color-zinc-900 --color-zinc-950 \" +\n  \"--container-2xl --container-2xs --container-3xl --container-3xs --container-4xl --container-5xl \" +\n  \"--container-6xl --container-7xl --container-lg --container-md --container-sm --container-xl \" +\n  \"--container-xs --default-font-family --default-font-feature-settings \" +\n  \"--default-font-variation-settings --default-mono-font-family \" +\n  \"--default-mono-font-feature-settings --default-mono-font-variation-settings \" +\n  \"--default-transition-duration --default-transition-timing-function --drop-shadow-2xl \" +\n  \"--drop-shadow-lg --drop-shadow-md --drop-shadow-sm --drop-shadow-xl --drop-shadow-xs --ease-in \" +\n  \"--ease-in-out --ease-out --font-mono --font-sans --font-serif --font-weight-black \" +\n  \"--font-weight-bold --font-weight-extrabold --font-weight-extralight --font-weight-light \" +\n  \"--font-weight-medium --font-weight-normal --font-weight-semibold --font-weight-thin \" +\n  \"--inset-shadow-2xs --inset-shadow-sm --inset-shadow-xs --leading-loose --leading-normal \" +\n  \"--leading-relaxed --leading-snug --leading-tight --perspective-distant --perspective-dramatic \" +\n  \"--perspective-midrange --perspective-near --perspective-normal --radius-2xl --radius-3xl \" +\n  \"--radius-4xl --radius-lg --radius-md --radius-sm --radius-xl --radius-xs --shadow-2xl \" +\n  \"--shadow-2xs --shadow-lg --shadow-md --shadow-sm --shadow-xl --shadow-xs --spacing --text-2xl \" +\n  \"--text-2xl--line-height --text-3xl --text-3xl--line-height --text-4xl --text-4xl--line-height \" +\n  \"--text-5xl --text-5xl--line-height --text-6xl --text-6xl--line-height --text-7xl \" +\n  \"--text-7xl--line-height --text-8xl --text-8xl--line-height --text-9xl --text-9xl--line-height \" +\n  \"--text-base --text-base--line-height --text-lg --text-lg--line-height --text-shadow-2xs \" +\n  \"--text-shadow-lg --text-shadow-md --text-shadow-sm --text-shadow-xs --text-sm \" +\n  \"--text-sm--line-height --text-xl --text-xl--line-height --text-xs --text-xs--line-height \" +\n  \"--tracking-normal --tracking-tight --tracking-tighter --tracking-wide --tracking-wider \" +\n  \"--tracking-widest\";\n"],"mappings":";AAMO,MAAM,YACX;AAoBK,MAAM,uBACX;","names":[]}

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

@@ -1,23 +1,88 @@
+/** How many categorical slots `paletteFor` cycles through: anyplot's eight hues. Amber,
+ *  anyplot's ninth colour, is a semantic warning anchor and not a series slot. A preset
+ *  that carries more hues (Paul Tol's nine) still writes them as `--chart-N`, but the
+ *  by-index ramp wraps after eight, so the same series keeps the same colour whichever
+ *  preset is active. */
+export declare const PALETTE_SIZE = 8;
+/** anyplot's colour-vision-deficiency-optimal order over the eight slots — the order
+ *  that keeps the FIRST n series furthest apart under protan/deutan/tritan simulation.
+ *  An option (`paletteFor(i, { order: "cvd" })`), not the default: the default order is
+ *  anyplot's own slot order, so series 1 is always the green. */
+export declare const CVD_ORDER: readonly [0, 1, 7, 6, 4, 5, 2, 3];
+export interface PaletteForOptions {
+    /** `"slot"` (default): anyplot's slot order. `"cvd"`: {@link CVD_ORDER}. */
+    order?: "slot" | "cvd";
+}
 /** CVD-safe categorical colour for series `index`, as a theme-aware CSS var.
+ *
+ *  The first series is always slot 0 (`--chart-1`, anyplot's green), and the ramp
+ *  wraps after {@link PALETTE_SIZE}.
  *
  *  Wraps in both directions, the way `strokeDash` does: JS `%` keeps the sign,
- *  so `-1 % 9` is `-1` and the plain formula named `--chart-0`, a token that does not
+ *  so `-1 % 8` is `-1` and the plain formula named `--chart-0`, a token that does not
  *  exist — a series with no stroke at all. A fractional index is truncated, and one
  *  that is not a number (NaN, ±Infinity — an `indexOf` miss divided by something)
  *  takes the first colour rather than `var(--chart-NaN)`. */
-export declare function paletteFor(index: number): string;
+export declare function paletteFor(index: number, options?: PaletteForOptions): string;
 /** Semantic money colours, theme-aware via tokens. Pair with +/- and arrow
     cues at the call site so colour is never the only signal (CVD). */
 export declare const CHART_COLORS: {
     readonly income: "var(--money-income)";
     readonly expense: "var(--money-expense)";
     readonly net: "var(--money-net)";
+    readonly neutral: "var(--money-neutral)";
     readonly assigned: "var(--brand)";
     readonly activity: "var(--money-expense)";
+    /** A generic total line — not money-coloured, the chart's neutral ink. */
+    readonly total: "var(--chart-ink)";
+};
+/**
+ * What a chart draws that is NOT a series (anyplot's roles, 0.49). Two inks, which are
+ * the only chart colours that change between light and dark — the eight hues do not:
+ *
+ * - `other` / `rest` / `disabled` and confidence-`band` fills → the MUTED ink. A
+ *   treemap's "rest" bucket or a pie's "Other" slice takes this instead of wrapping
+ *   round to a hue the reader will match to a real series.
+ * - `total` / `baseline` / `outline` → the neutral INK.
+ */
+export declare const CHART_ROLES: {
+    readonly other: "var(--chart-muted)";
+    readonly rest: "var(--chart-muted)";
+    readonly disabled: "var(--chart-muted)";
+    readonly band: "var(--chart-muted)";
+    readonly total: "var(--chart-ink)";
+    readonly baseline: "var(--chart-ink)";
+    readonly outline: "var(--chart-ink)";
 };
+/** `--chart-ink` per theme, as hex (tokens.css holds the same two). */
+export declare const CHART_INK_HEX: {
+    readonly light: "#1a1a17";
+    readonly dark: "#f0efe8";
+};
+/** `--chart-muted` per theme, as hex (tokens.css holds the same two). */
+export declare const CHART_MUTED_HEX: {
+    readonly light: "#6b6a63";
+    readonly dark: "#a8a79f";
+};
+/** The 3:1 WCAG 1.4.11 asks of a filled graphical object against its surface. */
+export declare const EDGE_MIN_CONTRAST = 3;
+/**
+ * The 1px edge a FILLED mark (a bar, an area, a treemap tile) needs, or `undefined`.
+ *
+ * anyplot's answer to hues that sit under 3:1 on the ground (cyan, lime, lavender, ochre
+ * and green on cream; matte red and rose on the dark ground): outline the shape in ink,
+ * so its boundary is legible while the fill keeps the hue that identifies the series.
+ * Only those — a hue that clears 3:1 on every surface given stays unstroked, because an
+ * outline on every bar is noise.
+ *
+ * `fill` must be a measurable `#rgb`/`#rrggbb`; `surfaces` are the grounds the mark can
+ * sit on (the card and the page), and the WORST of them decides. Anything it cannot
+ * measure gets no edge rather than a guessed one.
+ */
+export declare function chartEdge(fill: string, surfaces: readonly string[], ink?: string): string | undefined;
 export declare const PALETTE_HEX: {
-    readonly light: readonly ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"];
-    readonly dark: readonly ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"];
+    readonly light: readonly ["#009e73", "#c475fd", "#4467a3", "#bd8233", "#ae3030", "#2abccd", "#954477", "#99b314"];
+    readonly dark: readonly ["#009e73", "#c475fd", "#4467a3", "#bd8233", "#ae3030", "#2abccd", "#954477", "#99b314"];
 };
 /** A heatmap's interpolation stops for one theme. Open string fields so any
     palette preset (not just the built-in default) can supply its own stops. */
@@ -30,22 +95,24 @@ export interface HeatStops {
     empty: string;
 }
 /** Diverging (variance: under←0→over) and sequential (spending intensity)
-    heatmap stops, per theme. Teal = under/good, amber = over/spend = bad. */
+    heatmap stops, per theme — anyplot's scales (0.49). Sequential runs anyplot green →
+    blue; diverging runs blue (under) ↔ paper/ink (0, the midpoint) ↔ matte red (over).
+    The hues are the same in both themes; only the midpoint flips with the ground. */
 export declare const HEATMAP_HEX: {
     readonly light: {
-        readonly neutral: "#f1e7d2";
-        readonly under: "#0b6650";
-        readonly over: "#9c6418";
-        readonly seqLow: "#f6ecd0";
-        readonly seqHigh: "#9c6418";
+        readonly neutral: "#faf8f1";
+        readonly under: "#4467a3";
+        readonly over: "#ae3030";
+        readonly seqLow: "#009e73";
+        readonly seqHigh: "#4467a3";
         readonly empty: "rgba(148,163,184,0.14)";
     };
     readonly dark: {
-        readonly neutral: "#363a5a";
-        readonly under: "#22c3b6";
-        readonly over: "#fbbf24";
-        readonly seqLow: "#3a2c14";
-        readonly seqHigh: "#fbbf24";
+        readonly neutral: "#1a1a17";
+        readonly under: "#4467a3";
+        readonly over: "#ae3030";
+        readonly seqLow: "#009e73";
+        readonly seqHigh: "#4467a3";
         readonly empty: "rgba(148,163,184,0.10)";
     };
 };

package/dist/theme/chart-palette.js

@@ -1,44 +1,64 @@
 "use client";
 import { contrast, parseHex as parseRgbHex } from "./color.js";
-const PALETTE_SIZE = 9;
-function paletteFor(index) {
+const PALETTE_SIZE = 8;
+const CVD_ORDER = [0, 1, 7, 6, 4, 5, 2, 3];
+function paletteFor(index, options) {
   const i = Number.isFinite(index) ? Math.trunc(index) : 0;
-  return `var(--chart-${(i % PALETTE_SIZE + PALETTE_SIZE) % PALETTE_SIZE + 1})`;
+  const position = (i % PALETTE_SIZE + PALETTE_SIZE) % PALETTE_SIZE;
+  const slot = options?.order === "cvd" ? CVD_ORDER[position] : position;
+  return `var(--chart-${slot + 1})`;
 }
 const CHART_COLORS = {
   income: "var(--money-income)",
   expense: "var(--money-expense)",
   net: "var(--money-net)",
+  neutral: "var(--money-neutral)",
   assigned: "var(--brand)",
-  activity: "var(--money-expense)"
+  activity: "var(--money-expense)",
+  /** A generic total line — not money-coloured, the chart's neutral ink. */
+  total: "var(--chart-ink)"
 };
+const CHART_ROLES = {
+  other: "var(--chart-muted)",
+  rest: "var(--chart-muted)",
+  disabled: "var(--chart-muted)",
+  band: "var(--chart-muted)",
+  total: "var(--chart-ink)",
+  baseline: "var(--chart-ink)",
+  outline: "var(--chart-ink)"
+};
+const CHART_INK_HEX = { light: "#1a1a17", dark: "#f0efe8" };
+const CHART_MUTED_HEX = { light: "#6b6a63", dark: "#a8a79f" };
+const EDGE_MIN_CONTRAST = 3;
+function chartEdge(fill, surfaces, ink = CHART_ROLES.outline) {
+  if (!parseRgbHex(fill)) return void 0;
+  const measurable = surfaces.filter((s) => parseRgbHex(s));
+  if (measurable.length === 0) return void 0;
+  const worst = Math.min(...measurable.map((s) => contrast(fill, s)));
+  return worst < EDGE_MIN_CONTRAST ? ink : void 0;
+}
+const IMPRINT_HEX = ["#009e73", "#c475fd", "#4467a3", "#bd8233", "#ae3030", "#2abccd", "#954477", "#99b314"];
 const PALETTE_HEX = {
-  light: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
-  dark: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"]
+  light: IMPRINT_HEX,
+  dark: IMPRINT_HEX
 };
 const HEATMAP_HEX = {
   light: {
-    neutral: "#f1e7d2",
-    // the cream surface itself, not a cool grey
-    under: "#0b6650",
-    // DEFAULT_PRESET.light.moneyIncome
-    over: "#9c6418",
-    // DEFAULT_PRESET.light.moneyExpense, warmed to the page
-    seqLow: "#f6ecd0",
-    seqHigh: "#9c6418",
+    neutral: "#faf8f1",
+    // anyplot's light paper — the diverging scale's 0
+    under: "#4467a3",
+    over: "#ae3030",
+    seqLow: "#009e73",
+    seqHigh: "#4467a3",
     empty: "rgba(148,163,184,0.14)"
   },
   dark: {
-    neutral: "#363a5a",
-    // one step above --border on the indigo-noir surface
-    under: "#22c3b6",
-    // DEFAULT_PRESET.dark.moneyIncome
-    // Brighter than dark.moneyExpense (#e4b035) on purpose: a gradient endpoint is
-    // meant to be the loudest thing in its scale, and it is a fill, not a figure.
-    over: "#fbbf24",
-    seqLow: "#3a2c14",
-    // dim amber, sits just above the page
-    seqHigh: "#fbbf24",
+    neutral: "#1a1a17",
+    // anyplot's ink — the diverging scale's 0 on the dark ground
+    under: "#4467a3",
+    over: "#ae3030",
+    seqLow: "#009e73",
+    seqHigh: "#4467a3",
     empty: "rgba(148,163,184,0.10)"
   }
 };
@@ -65,8 +85,15 @@ function clamp01(t) {
 }
 export {
   CHART_COLORS,
+  CHART_INK_HEX,
+  CHART_MUTED_HEX,
+  CHART_ROLES,
+  CVD_ORDER,
+  EDGE_MIN_CONTRAST,
   HEATMAP_HEX,
   PALETTE_HEX,
+  PALETTE_SIZE,
+  chartEdge,
   lerpHex,
   paletteFor,
   textOn

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/chart-palette.ts"],"sourcesContent":["// Chart colour system. Single source of truth lives in the design tokens\n// (:root / .dark in tokens.css): brand = indigo, money = teal/amber/purple,\n// chart-1..9 = Paul Tol \"Muted\" (CVD-safe across protan/deutan/tritan).\n// Returning CSS vars here makes every Recharts series theme-aware for free — the\n// SVG fill/stroke resolves --chart-N against the current light/dark token set.\n\nimport { contrast, parseHex as parseRgbHex } from \"./color\";\n\nconst PALETTE_SIZE = 9;\n\n/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var.\n *\n *  Wraps in both directions, the way `strokeDash` does: JS `%` keeps the sign,\n *  so `-1 % 9` is `-1` and the plain formula named `--chart-0`, a token that does not\n *  exist — a series with no stroke at all. A fractional index is truncated, and one\n *  that is not a number (NaN, ±Infinity — an `indexOf` miss divided by something)\n *  takes the first colour rather than `var(--chart-NaN)`. */\nexport function paletteFor(index: number): string {\n  const i = Number.isFinite(index) ? Math.trunc(index) : 0;\n  return `var(--chart-${(((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE) + 1})`;\n}\n\n/** Semantic money colours, theme-aware via tokens. Pair with +/- and arrow\n    cues at the call site so colour is never the only signal (CVD). */\nexport const CHART_COLORS = {\n  income: \"var(--money-income)\",\n  expense: \"var(--money-expense)\",\n  net: \"var(--money-net)\",\n  assigned: \"var(--brand)\",\n  activity: \"var(--money-expense)\",\n} as const;\n\n// ── Raw hex stops, by theme ────────────────────────────────────────────────\n// The heatmaps interpolate colours in JS (CSS vars can't be lerped), so they\n// need concrete hex per theme — i.e. the same colours DEFAULT_PRESET already\n// holds, written down a second time.\n//\n// They are duplicated rather than imported because these two objects are the whole\n// of the `@eifi1/ui-kit/chart` subpath's colour layer, and importing the preset bank\n// would pull every preset's full token set into that chunk to read two of them. What\n// keeps the copies together is `chart-palette.test.ts` — \"has not drifted from\n// DEFAULT_PRESET\" — which is not optional: they HAD drifted, five of the six light\n// heat stops, and the light `neutral` was still Tailwind's slate-100, a cool grey on\n// the warm cream page this theme has used since #328.\nexport const PALETTE_HEX = {\n  light: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n  dark: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n} as const;\n\n/** A heatmap's interpolation stops for one theme. Open string fields so any\n    palette preset (not just the built-in default) can supply its own stops. */\nexport interface HeatStops {\n  neutral: string;\n  under: string;\n  over: string;\n  seqLow: string;\n  seqHigh: string;\n  empty: string;\n}\n\n/** Diverging (variance: under←0→over) and sequential (spending intensity)\n    heatmap stops, per theme. Teal = under/good, amber = over/spend = bad. */\nexport const HEATMAP_HEX = {\n  light: {\n    neutral: \"#f1e7d2\", // the cream surface itself, not a cool grey\n    under: \"#0b6650\", // DEFAULT_PRESET.light.moneyIncome\n    over: \"#9c6418\", // DEFAULT_PRESET.light.moneyExpense, warmed to the page\n    seqLow: \"#f6ecd0\",\n    seqHigh: \"#9c6418\",\n    empty: \"rgba(148,163,184,0.14)\",\n  },\n  dark: {\n    neutral: \"#363a5a\", // one step above --border on the indigo-noir surface\n    under: \"#22c3b6\", // DEFAULT_PRESET.dark.moneyIncome\n    // Brighter than dark.moneyExpense (#e4b035) on purpose: a gradient endpoint is\n    // meant to be the loudest thing in its scale, and it is a fill, not a figure.\n    over: \"#fbbf24\",\n    seqLow: \"#3a2c14\", // dim amber, sits just above the page\n    seqHigh: \"#fbbf24\",\n    empty: \"rgba(148,163,184,0.10)\",\n  },\n} as const;\n\n/** Linear interpolate two #rrggbb hexes; `t` in [0,1]. Returns #rrggbb. */\nexport function lerpHex(a: string, b: string, t: number): string {\n  const pa = parseHex(a) ?? UNREADABLE;\n  const pb = parseHex(b) ?? UNREADABLE;\n  const c = (i: number) => Math.round(pa[i] + (pb[i] - pa[i]) * clamp01(t));\n  return `#${[c(0), c(1), c(2)].map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\n/** The two inks a cell/treemap label can be set in. Near-black and near-white rather\n    than #000/#fff: at full black-on-full-white the label stops looking like part of the\n    same type system as the rest of the page. */\nconst INK_DARK = \"#1a1a1a\";\nconst INK_LIGHT = \"#f8fafc\";\n\n/** Pick a legible text colour (near-black / near-white) for a solid hex fill, by\n    MEASURING both against it and keeping the one that wins.\n\n    This used to flip on Rec.601 luma > 0.6, which is a brightness heuristic and not a\n    contrast measure — the two disagree on six of the eighteen default chart hues, a\n    third of the ramp, and on each of those the label got the worse of the two inks.\n    `#44aa99` is the plainest case: luma calls it dark, so it took white, which measures\n    2.69:1 on it; near-black measures 6.18:1. keksdose measured this too and forked the\n    function locally for its treemap, leaving its other two call sites on this one.\n\n    A fill this cannot read gets `currentColor` — inherit, i.e. whatever the\n    surrounding text already uses. That is the only answer that is right on both\n    themes, because an unreadable fill is usually a translucent one (`HEATMAP_HEX.*\n    .empty` is an `rgba()` string, and the variance heatmap does pass it here for any\n    category with zero assigned and positive activity — a refund). Picking a constant\n    instead is what produced the earlier bug: the unparsed fill fell through to the\n    light ink, near-white on a near-white cell, and the figure was invisible. */\nexport function textOn(hex: string): string {\n  const rgb = parseRgbHex(hex);\n  if (!rgb) return \"currentColor\";\n  // Ties go to the dark ink: at equal measured contrast it is the one that keeps a\n  // small label looking like type rather than like a glow.\n  return contrast(rgb, INK_DARK) >= contrast(rgb, INK_LIGHT) ? INK_DARK : INK_LIGHT;\n}\n\n/** Mid-grey, for a stop {@link lerpHex} has to interpolate but cannot read. It has\n *  to return SOME valid colour, and a grey is the one that misleads least. */\nconst UNREADABLE: [number, number, number] = [0x80, 0x80, 0x80];\n\n/**\n * `#rgb` or `#rrggbb` to components, or **null** when it is neither.\n *\n * A tuple-shaped shim over `color.ts`'s parser, which is the same function and is\n * already the one `contrast` validates with — so {@link lerpHex} and {@link textOn}\n * cannot disagree about what counts as a colour.\n *\n * The **null** is the whole point of it. This used to `parseInt` whatever it was given\n * and hand the NaNs on, and both callers propagated them silently: {@link lerpHex}\n * produced the literal string `\"#nannannan\"`, and {@link textOn} fell through to the\n * LIGHT label colour.\n *\n * That is not hypothetical — a non-hex value ships in this very module.\n * `HEATMAP_HEX.*.empty` is an `rgba(…)` string, and the variance heatmap paints a\n * figure on an `empty` cell whenever a category has zero assigned and positive\n * activity (a refund). On the light theme the cell is near-white and the label came\n * back near-white: the number was there, and unreadable.\n */\nfunction parseHex(hex: string): [number, number, number] | null {\n  const rgb = parseRgbHex(hex);\n  return rgb ? [rgb.r, rgb.g, rgb.b] : null;\n}\n\nfunction clamp01(t: number): number {\n  return t < 0 ? 0 : t > 1 ? 1 : t;\n}\n"],"mappings":";AAMA,SAAS,UAAU,YAAY,mBAAmB;AAElD,MAAM,eAAe;AASd,SAAS,WAAW,OAAuB;AAChD,QAAM,IAAI,OAAO,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI;AACvD,SAAO,gBAAkB,IAAI,eAAgB,gBAAgB,eAAgB,CAAC;AAChF;AAIO,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,UAAU;AAAA,EACV,UAAU;AACZ;AAcO,MAAM,cAAc;AAAA,EACzB,OAAO,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,EACzG,MAAM,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAC1G;AAeO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL,SAAS;AAAA;AAAA,IACT,OAAO;AAAA;AAAA,IACP,MAAM;AAAA;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA;AAAA,IACT,OAAO;AAAA;AAAA;AAAA;AAAA,IAGP,MAAM;AAAA,IACN,QAAQ;AAAA;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AACF;AAGO,SAAS,QAAQ,GAAW,GAAW,GAAmB;AAC/D,QAAM,KAAK,SAAS,CAAC,KAAK;AAC1B,QAAM,KAAK,SAAS,CAAC,KAAK;AAC1B,QAAM,IAAI,CAAC,MAAc,KAAK,MAAM,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC;AACxE,SAAO,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AACpF;AAKA,MAAM,WAAW;AACjB,MAAM,YAAY;AAmBX,SAAS,OAAO,KAAqB;AAC1C,QAAM,MAAM,YAAY,GAAG;AAC3B,MAAI,CAAC,IAAK,QAAO;AAGjB,SAAO,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK,SAAS,IAAI,WAAW;AAC1E;AAIA,MAAM,aAAuC,CAAC,KAAM,KAAM,GAAI;AAoB9D,SAAS,SAAS,KAA8C;AAC9D,QAAM,MAAM,YAAY,GAAG;AAC3B,SAAO,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI;AACvC;AAEA,SAAS,QAAQ,GAAmB;AAClC,SAAO,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;AACjC;","names":[]}
+{"version":3,"sources":["../../src/theme/chart-palette.ts"],"sourcesContent":["// Chart colour system. Single source of truth lives in the design tokens\n// (:root / .dark in tokens.css): brand = indigo, money = teal/amber/purple,\n// chart-1..8 = anyplot's \"Imprint\" hues (https://anyplot.ai/palette, 0.49 — Paul Tol\n// \"Muted\" before, still selectable as the `paul-tol` preset).\n// Returning CSS vars here makes every Recharts series theme-aware for free — the\n// SVG fill/stroke resolves --chart-N against the current light/dark token set.\n\nimport { contrast, parseHex as parseRgbHex } from \"./color\";\n\n/** How many categorical slots `paletteFor` cycles through: anyplot's eight hues. Amber,\n *  anyplot's ninth colour, is a semantic warning anchor and not a series slot. A preset\n *  that carries more hues (Paul Tol's nine) still writes them as `--chart-N`, but the\n *  by-index ramp wraps after eight, so the same series keeps the same colour whichever\n *  preset is active. */\nexport const PALETTE_SIZE = 8;\n\n/** anyplot's colour-vision-deficiency-optimal order over the eight slots — the order\n *  that keeps the FIRST n series furthest apart under protan/deutan/tritan simulation.\n *  An option (`paletteFor(i, { order: \"cvd\" })`), not the default: the default order is\n *  anyplot's own slot order, so series 1 is always the green. */\nexport const CVD_ORDER = [0, 1, 7, 6, 4, 5, 2, 3] as const;\n\nexport interface PaletteForOptions {\n  /** `\"slot\"` (default): anyplot's slot order. `\"cvd\"`: {@link CVD_ORDER}. */\n  order?: \"slot\" | \"cvd\";\n}\n\n/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var.\n *\n *  The first series is always slot 0 (`--chart-1`, anyplot's green), and the ramp\n *  wraps after {@link PALETTE_SIZE}.\n *\n *  Wraps in both directions, the way `strokeDash` does: JS `%` keeps the sign,\n *  so `-1 % 8` is `-1` and the plain formula named `--chart-0`, a token that does not\n *  exist — a series with no stroke at all. A fractional index is truncated, and one\n *  that is not a number (NaN, ±Infinity — an `indexOf` miss divided by something)\n *  takes the first colour rather than `var(--chart-NaN)`. */\nexport function paletteFor(index: number, options?: PaletteForOptions): string {\n  const i = Number.isFinite(index) ? Math.trunc(index) : 0;\n  const position = ((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE;\n  const slot = options?.order === \"cvd\" ? CVD_ORDER[position] : position;\n  return `var(--chart-${slot + 1})`;\n}\n\n/** Semantic money colours, theme-aware via tokens. Pair with +/- and arrow\n    cues at the call site so colour is never the only signal (CVD). */\nexport const CHART_COLORS = {\n  income: \"var(--money-income)\",\n  expense: \"var(--money-expense)\",\n  net: \"var(--money-net)\",\n  neutral: \"var(--money-neutral)\",\n  assigned: \"var(--brand)\",\n  activity: \"var(--money-expense)\",\n  /** A generic total line — not money-coloured, the chart's neutral ink. */\n  total: \"var(--chart-ink)\",\n} as const;\n\n/**\n * What a chart draws that is NOT a series (anyplot's roles, 0.49). Two inks, which are\n * the only chart colours that change between light and dark — the eight hues do not:\n *\n * - `other` / `rest` / `disabled` and confidence-`band` fills → the MUTED ink. A\n *   treemap's \"rest\" bucket or a pie's \"Other\" slice takes this instead of wrapping\n *   round to a hue the reader will match to a real series.\n * - `total` / `baseline` / `outline` → the neutral INK.\n */\nexport const CHART_ROLES = {\n  other: \"var(--chart-muted)\",\n  rest: \"var(--chart-muted)\",\n  disabled: \"var(--chart-muted)\",\n  band: \"var(--chart-muted)\",\n  total: \"var(--chart-ink)\",\n  baseline: \"var(--chart-ink)\",\n  outline: \"var(--chart-ink)\",\n} as const;\n\n/** `--chart-ink` per theme, as hex (tokens.css holds the same two). */\nexport const CHART_INK_HEX = { light: \"#1a1a17\", dark: \"#f0efe8\" } as const;\n/** `--chart-muted` per theme, as hex (tokens.css holds the same two). */\nexport const CHART_MUTED_HEX = { light: \"#6b6a63\", dark: \"#a8a79f\" } as const;\n\n/** The 3:1 WCAG 1.4.11 asks of a filled graphical object against its surface. */\nexport const EDGE_MIN_CONTRAST = 3;\n\n/**\n * The 1px edge a FILLED mark (a bar, an area, a treemap tile) needs, or `undefined`.\n *\n * anyplot's answer to hues that sit under 3:1 on the ground (cyan, lime, lavender, ochre\n * and green on cream; matte red and rose on the dark ground): outline the shape in ink,\n * so its boundary is legible while the fill keeps the hue that identifies the series.\n * Only those — a hue that clears 3:1 on every surface given stays unstroked, because an\n * outline on every bar is noise.\n *\n * `fill` must be a measurable `#rgb`/`#rrggbb`; `surfaces` are the grounds the mark can\n * sit on (the card and the page), and the WORST of them decides. Anything it cannot\n * measure gets no edge rather than a guessed one.\n */\nexport function chartEdge(\n  fill: string,\n  surfaces: readonly string[],\n  ink: string = CHART_ROLES.outline,\n): string | undefined {\n  if (!parseRgbHex(fill)) return undefined;\n  const measurable = surfaces.filter((s) => parseRgbHex(s));\n  if (measurable.length === 0) return undefined;\n  const worst = Math.min(...measurable.map((s) => contrast(fill, s)));\n  return worst < EDGE_MIN_CONTRAST ? ink : undefined;\n}\n\n// ── Raw hex stops, by theme ────────────────────────────────────────────────\n// The heatmaps interpolate colours in JS (CSS vars can't be lerped), so they\n// need concrete hex per theme — i.e. the same colours DEFAULT_PRESET already\n// holds, written down a second time.\n//\n// They are duplicated rather than imported because these two objects are the whole\n// of the `@eifi1/ui-kit/chart` subpath's colour layer, and importing the preset bank\n// would pull every preset's full token set into that chunk to read two of them. What\n// keeps the copies together is `chart-palette.test.ts` — \"has not drifted from\n// DEFAULT_PRESET\" — which is not optional: they HAD drifted, five of the six light\n// heat stops, and the light `neutral` was still Tailwind's slate-100, a cool grey on\n// the warm cream page this theme has used since #328.\n//\n// 0.49: the same eight hues in both themes — anyplot does not re-tune a hue for the dark\n// ground, and neither does the kit any more; `chartEdge` outlines the two that fall\n// under 3:1 there (matte red, rose) instead of lifting them into different colours.\nconst IMPRINT_HEX = [\"#009e73\", \"#c475fd\", \"#4467a3\", \"#bd8233\", \"#ae3030\", \"#2abccd\", \"#954477\", \"#99b314\"] as const;\nexport const PALETTE_HEX = {\n  light: IMPRINT_HEX,\n  dark: IMPRINT_HEX,\n} as const;\n\n/** A heatmap's interpolation stops for one theme. Open string fields so any\n    palette preset (not just the built-in default) can supply its own stops. */\nexport interface HeatStops {\n  neutral: string;\n  under: string;\n  over: string;\n  seqLow: string;\n  seqHigh: string;\n  empty: string;\n}\n\n/** Diverging (variance: under←0→over) and sequential (spending intensity)\n    heatmap stops, per theme — anyplot's scales (0.49). Sequential runs anyplot green →\n    blue; diverging runs blue (under) ↔ paper/ink (0, the midpoint) ↔ matte red (over).\n    The hues are the same in both themes; only the midpoint flips with the ground. */\nexport const HEATMAP_HEX = {\n  light: {\n    neutral: \"#faf8f1\", // anyplot's light paper — the diverging scale's 0\n    under: \"#4467a3\",\n    over: \"#ae3030\",\n    seqLow: \"#009e73\",\n    seqHigh: \"#4467a3\",\n    empty: \"rgba(148,163,184,0.14)\",\n  },\n  dark: {\n    neutral: \"#1a1a17\", // anyplot's ink — the diverging scale's 0 on the dark ground\n    under: \"#4467a3\",\n    over: \"#ae3030\",\n    seqLow: \"#009e73\",\n    seqHigh: \"#4467a3\",\n    empty: \"rgba(148,163,184,0.10)\",\n  },\n} as const;\n\n/** Linear interpolate two #rrggbb hexes; `t` in [0,1]. Returns #rrggbb. */\nexport function lerpHex(a: string, b: string, t: number): string {\n  const pa = parseHex(a) ?? UNREADABLE;\n  const pb = parseHex(b) ?? UNREADABLE;\n  const c = (i: number) => Math.round(pa[i] + (pb[i] - pa[i]) * clamp01(t));\n  return `#${[c(0), c(1), c(2)].map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\n/** The two inks a cell/treemap label can be set in. Near-black and near-white rather\n    than #000/#fff: at full black-on-full-white the label stops looking like part of the\n    same type system as the rest of the page. */\nconst INK_DARK = \"#1a1a1a\";\nconst INK_LIGHT = \"#f8fafc\";\n\n/** Pick a legible text colour (near-black / near-white) for a solid hex fill, by\n    MEASURING both against it and keeping the one that wins.\n\n    This used to flip on Rec.601 luma > 0.6, which is a brightness heuristic and not a\n    contrast measure — the two disagree on six of the eighteen default chart hues, a\n    third of the ramp, and on each of those the label got the worse of the two inks.\n    `#44aa99` is the plainest case: luma calls it dark, so it took white, which measures\n    2.69:1 on it; near-black measures 6.18:1. keksdose measured this too and forked the\n    function locally for its treemap, leaving its other two call sites on this one.\n\n    A fill this cannot read gets `currentColor` — inherit, i.e. whatever the\n    surrounding text already uses. That is the only answer that is right on both\n    themes, because an unreadable fill is usually a translucent one (`HEATMAP_HEX.*\n    .empty` is an `rgba()` string, and the variance heatmap does pass it here for any\n    category with zero assigned and positive activity — a refund). Picking a constant\n    instead is what produced the earlier bug: the unparsed fill fell through to the\n    light ink, near-white on a near-white cell, and the figure was invisible. */\nexport function textOn(hex: string): string {\n  const rgb = parseRgbHex(hex);\n  if (!rgb) return \"currentColor\";\n  // Ties go to the dark ink: at equal measured contrast it is the one that keeps a\n  // small label looking like type rather than like a glow.\n  return contrast(rgb, INK_DARK) >= contrast(rgb, INK_LIGHT) ? INK_DARK : INK_LIGHT;\n}\n\n/** Mid-grey, for a stop {@link lerpHex} has to interpolate but cannot read. It has\n *  to return SOME valid colour, and a grey is the one that misleads least. */\nconst UNREADABLE: [number, number, number] = [0x80, 0x80, 0x80];\n\n/**\n * `#rgb` or `#rrggbb` to components, or **null** when it is neither.\n *\n * A tuple-shaped shim over `color.ts`'s parser, which is the same function and is\n * already the one `contrast` validates with — so {@link lerpHex} and {@link textOn}\n * cannot disagree about what counts as a colour.\n *\n * The **null** is the whole point of it. This used to `parseInt` whatever it was given\n * and hand the NaNs on, and both callers propagated them silently: {@link lerpHex}\n * produced the literal string `\"#nannannan\"`, and {@link textOn} fell through to the\n * LIGHT label colour.\n *\n * That is not hypothetical — a non-hex value ships in this very module.\n * `HEATMAP_HEX.*.empty` is an `rgba(…)` string, and the variance heatmap paints a\n * figure on an `empty` cell whenever a category has zero assigned and positive\n * activity (a refund). On the light theme the cell is near-white and the label came\n * back near-white: the number was there, and unreadable.\n */\nfunction parseHex(hex: string): [number, number, number] | null {\n  const rgb = parseRgbHex(hex);\n  return rgb ? [rgb.r, rgb.g, rgb.b] : null;\n}\n\nfunction clamp01(t: number): number {\n  return t < 0 ? 0 : t > 1 ? 1 : t;\n}\n"],"mappings":"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","names":[]}

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

@@ -25,6 +25,15 @@ export interface PalettePreset {
     dark: TokenSet;
 }
 export declare const DEFAULT_PRESET: PalettePreset;
+/**
+ * The 0.48 default: the same surfaces, brand and money, with Paul Tol's "Muted" nine
+ * as the chart ramp and the teal/amber heat stops that went with it. Selectable, no
+ * longer the default (0.49). `paletteFor` cycles eight, so its ninth hue (#aa4499) is
+ * reachable only as `var(--chart-9)`.
+ */
+export declare const PAUL_TOL_PRESET: PalettePreset;
+/** @deprecated 0.49 — use `DEFAULT_PRESET` (Imprint IS the default now); removed in 0.51.
+ *  A persisted `"imprint"` id resolves to it through `presetById`'s fallback. */
 export declare const IMPRINT_PRESET: PalettePreset;
 /**
  * Presets DERIVED rather than picked, by `derivePalette` from one brand colour each.