@eifi1/ui-kit 0.4.1 → 0.5.0

package/dist/shell/option-switcher-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/option-switcher-menu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\nimport { Tooltip } from \"../components/tooltip\";\n\nexport interface OptionSwitcherOption<T extends string> {\n  value: T;\n  label: ReactNode;\n}\n\n/**\n * A top-bar hover menu that switches between a small set of options, with a\n * check on the active one and an optional heading. Generic glue over\n * {@link HoverMenu} — e.g. a dev role/impersonation switcher, an environment\n * picker. Controlled: the app owns `value` and `onSelect`.\n */\nexport function OptionSwitcherMenu<T extends string>({\n  icon,\n  ariaLabel,\n  title,\n  heading,\n  options,\n  value,\n  onSelect,\n}: {\n  icon: ReactNode;\n  ariaLabel: string;\n  title?: string;\n  heading?: string;\n  options: OptionSwitcherOption<T>[];\n  value: T;\n  onSelect: (value: T) => void;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      trigger={({ toggle }) => (\n        <Tooltip label={title} portal>\n          <button type=\"button\" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>\n            {icon}\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && (\n            <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-slate-400 dark:text-slate-500\">\n              {heading}\n            </li>\n          )}\n          {options.map((opt) => (\n            <li key={opt.value}>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  onSelect(opt.value);\n                  close();\n                }}\n                className={TOPBAR_MENU_ITEM_CLASS}\n              >\n                <span>{opt.label}</span>\n                {value === opt.value && <Check className=\"size-4 text-slate-700 dark:text-slate-200\" />}\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":"AAuCU,cAeI,YAfJ;AAtCV,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAC7D,SAAS,eAAe;AAajB,SAAS,mBAAqC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,CAAC,EAAE,OAAO,MACjB,oBAAC,WAAQ,OAAO,OAAO,QAAM,MAC3B,8BAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,cAAY,WAAW,WAAW,sBACtE,gBACH,GACF;AAAA,MAGD,WAAC,UACA,qBAAC,QAAG,WAAU,QACX;AAAA,mBACC,oBAAC,QAAG,WAAU,kGACX,mBACH;AAAA,QAED,QAAQ,IAAI,CAAC,QACZ,oBAAC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,uBAAS,IAAI,KAAK;AAClB,oBAAM;AAAA,YACR;AAAA,YACA,WAAW;AAAA,YAEX;AAAA,kCAAC,UAAM,cAAI,OAAM;AAAA,cAChB,UAAU,IAAI,SAAS,oBAAC,SAAM,WAAU,6CAA4C;AAAA;AAAA;AAAA,QACvF,KAXO,IAAI,KAYb,CACD;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/option-switcher-menu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\nimport { Tooltip } from \"../components/tooltip\";\n\nexport interface OptionSwitcherOption<T extends string> {\n  value: T;\n  label: ReactNode;\n}\n\n/**\n * A top-bar hover menu that switches between a small set of options, with a\n * check on the active one and an optional heading. Generic glue over\n * {@link HoverMenu} — e.g. a dev role/impersonation switcher, an environment\n * picker. Controlled: the app owns `value` and `onSelect`.\n */\nexport function OptionSwitcherMenu<T extends string>({\n  icon,\n  ariaLabel,\n  title,\n  heading,\n  options,\n  value,\n  onSelect,\n}: {\n  icon: ReactNode;\n  ariaLabel: string;\n  title?: string;\n  heading?: string;\n  options: OptionSwitcherOption<T>[];\n  value: T;\n  onSelect: (value: T) => void;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      trigger={({ toggle }) => (\n        <Tooltip label={title} portal>\n          <button type=\"button\" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>\n            {icon}\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && (\n            <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n              {heading}\n            </li>\n          )}\n          {options.map((opt) => (\n            <li key={opt.value}>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  onSelect(opt.value);\n                  close();\n                }}\n                className={TOPBAR_MENU_ITEM_CLASS}\n              >\n                <span>{opt.label}</span>\n                {value === opt.value && <Check className=\"size-4 text-[var(--text-secondary)]\" />}\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":";AAuCU,cAeI,YAfJ;AAtCV,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAC7D,SAAS,eAAe;AAajB,SAAS,mBAAqC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,CAAC,EAAE,OAAO,MACjB,oBAAC,WAAQ,OAAO,OAAO,QAAM,MAC3B,8BAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,cAAY,WAAW,WAAW,sBACtE,gBACH,GACF;AAAA,MAGD,WAAC,UACA,qBAAC,QAAG,WAAU,QACX;AAAA,mBACC,oBAAC,QAAG,WAAU,8FACX,mBACH;AAAA,QAED,QAAQ,IAAI,CAAC,QACZ,oBAAC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,uBAAS,IAAI,KAAK;AAClB,oBAAM;AAAA,YACR;AAAA,YACA,WAAW;AAAA,YAEX;AAAA,kCAAC,UAAM,cAAI,OAAM;AAAA,cAChB,UAAU,IAAI,SAAS,oBAAC,SAAM,WAAU,uCAAsC;AAAA;AAAA;AAAA,QACjF,KAXO,IAAI,KAYb,CACD;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/shell/role-switcher.d.ts

@@ -4,8 +4,10 @@ interface RoleSwitcherProps<R extends string> {
     roles: readonly R[];
     value: R;
     onChange: (role: R) => void;
+    /** Default: `topBar.switchRole` from the {@link UiKitProvider}, else English. */
     ariaLabel?: string;
     heading?: string;
+    /** The trigger's tooltip. Default: `topBar.role(value)`. */
     title?: string;
 }
 /**
@@ -13,6 +15,10 @@ interface RoleSwitcherProps<R extends string> {
  * {@link OptionSwitcherMenu} with the standard flask icon, so an app drops it in
  * the top bar with just the role list + current value + a handler. Typically
  * dev-only / UI-only, but the app decides where and whether to render it.
+ *
+ * The flask wears `--warning` rather than a fixed `amber-500`: it is a caution
+ * marker — the app is not showing you your own role — and the token carries that
+ * amber across both themes instead of pinning one hue onto every palette.
  */
 declare function RoleSwitcher<R extends string>({ roles, value, onChange, ariaLabel, heading, title, }: RoleSwitcherProps<R>): react.JSX.Element;
 

package/dist/shell/role-switcher.js

@@ -1,21 +1,24 @@
+"use client";
 import { jsx } from "react/jsx-runtime";
 import { FlaskConical } from "lucide-react";
 import { OptionSwitcherMenu } from "./option-switcher-menu.js";
+import { DEFAULT_TOP_BAR_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 function RoleSwitcher({
   roles,
   value,
   onChange,
-  ariaLabel = "Switch role",
+  ariaLabel,
   heading,
   title
 }) {
+  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { switchRole: ariaLabel });
   return /* @__PURE__ */ jsx(
     OptionSwitcherMenu,
     {
-      ariaLabel,
-      title: title ?? `Role: ${value}`,
+      ariaLabel: labels.switchRole,
+      title: title ?? labels.role(value),
       heading,
-      icon: /* @__PURE__ */ jsx(FlaskConical, { className: "size-5 text-amber-500" }),
+      icon: /* @__PURE__ */ jsx(FlaskConical, { className: "size-5 text-[var(--warning)]" }),
       options: roles.map((r) => ({ value: r, label: r })),
       value,
       onSelect: onChange

package/dist/shell/role-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/role-switcher.tsx"],"sourcesContent":["import { FlaskConical } from \"lucide-react\";\nimport { OptionSwitcherMenu } from \"./option-switcher-menu\";\n\nexport interface RoleSwitcherProps<R extends string> {\n  roles: readonly R[];\n  value: R;\n  onChange: (role: R) => void;\n  ariaLabel?: string;\n  heading?: string;\n  title?: string;\n}\n\n/**\n * A reusable user-role switcher (feedback #337): a thin wrapper over\n * {@link OptionSwitcherMenu} with the standard flask icon, so an app drops it in\n * the top bar with just the role list + current value + a handler. Typically\n * dev-only / UI-only, but the app decides where and whether to render it.\n */\nexport function RoleSwitcher<R extends string>({\n  roles,\n  value,\n  onChange,\n  ariaLabel = \"Switch role\",\n  heading,\n  title,\n}: RoleSwitcherProps<R>) {\n  return (\n    <OptionSwitcherMenu<R>\n      ariaLabel={ariaLabel}\n      title={title ?? `Role: ${value}`}\n      heading={heading}\n      icon={<FlaskConical className=\"size-5 text-amber-500\" />}\n      options={roles.map((r) => ({ value: r, label: r }))}\n      value={value}\n      onSelect={onChange}\n    />\n  );\n}\n"],"mappings":"AA+BY;AA/BZ,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AAiB5B,SAAS,aAA+B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAyB;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,SAAS,SAAS,KAAK;AAAA,MAC9B;AAAA,MACA,MAAM,oBAAC,gBAAa,WAAU,yBAAwB;AAAA,MACtD,SAAS,MAAM,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,EAAE,EAAE;AAAA,MAClD;AAAA,MACA,UAAU;AAAA;AAAA,EACZ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/role-switcher.tsx"],"sourcesContent":["import { FlaskConical } from \"lucide-react\";\nimport { OptionSwitcherMenu } from \"./option-switcher-menu\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface RoleSwitcherProps<R extends string> {\n  roles: readonly R[];\n  value: R;\n  onChange: (role: R) => void;\n  /** Default: `topBar.switchRole` from the {@link UiKitProvider}, else English. */\n  ariaLabel?: string;\n  heading?: string;\n  /** The trigger's tooltip. Default: `topBar.role(value)`. */\n  title?: string;\n}\n\n/**\n * A reusable user-role switcher (feedback #337): a thin wrapper over\n * {@link OptionSwitcherMenu} with the standard flask icon, so an app drops it in\n * the top bar with just the role list + current value + a handler. Typically\n * dev-only / UI-only, but the app decides where and whether to render it.\n *\n * The flask wears `--warning` rather than a fixed `amber-500`: it is a caution\n * marker — the app is not showing you your own role — and the token carries that\n * amber across both themes instead of pinning one hue onto every palette.\n */\nexport function RoleSwitcher<R extends string>({\n  roles,\n  value,\n  onChange,\n  ariaLabel,\n  heading,\n  title,\n}: RoleSwitcherProps<R>) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { switchRole: ariaLabel });\n  return (\n    <OptionSwitcherMenu<R>\n      ariaLabel={labels.switchRole}\n      title={title ?? labels.role(value)}\n      heading={heading}\n      icon={<FlaskConical className=\"size-5 text-[var(--warning)]\" />}\n      options={roles.map((r) => ({ value: r, label: r }))}\n      value={value}\n      onSelect={onChange}\n    />\n  );\n}\n"],"mappings":";AAuCY;AAvCZ,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,wBAAwB,oBAAoB;AAuB9C,SAAS,aAA+B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,SAAS,aAAa,UAAU,wBAAwB,EAAE,YAAY,UAAU,CAAC;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,OAAO,SAAS,OAAO,KAAK,KAAK;AAAA,MACjC;AAAA,MACA,MAAM,oBAAC,gBAAa,WAAU,gCAA+B;AAAA,MAC7D,SAAS,MAAM,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,EAAE,EAAE;AAAA,MAClD;AAAA,MACA,UAAU;AAAA;AAAA,EACZ;AAEJ;","names":[]}

package/dist/shell/top-bar.d.ts

@@ -1,15 +1,23 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
 /**
- * The sticky app header frame: a `brand` slot on the left and an `actions` slot
- * on the right (theme/palette/language controls, account menu, etc.). Domain-free
- * — each app composes its own actions from the shared controls plus its own menus.
+ * `extends ComponentPropsWithoutRef<"header">` because this IS the `<header>`, and it is
+ * the `sticky top-0` element itself: a consumer cannot wrap it to add an attribute
+ * without the sticking moving to the wrapper. The one that matters most is `aria-label`
+ * — a `<header>` is a `banner` landmark, and a landmark with no name is how two of them
+ * become indistinguishable in a screen reader's landmark list.
  */
-declare function TopBar({ brand, actions, className, }: {
+interface TopBarProps extends ComponentPropsWithoutRef<"header"> {
     brand: ReactNode;
     actions?: ReactNode;
     className?: string;
-}): react.JSX.Element;
+}
+/**
+ * The sticky app header frame: a `brand` slot on the left and an `actions` slot
+ * on the right (theme/palette/language controls, account menu, etc.). Domain-free
+ * — each app composes its own actions from the shared controls plus its own menus.
+ */
+declare function TopBar({ brand, actions, className, ...rest }: TopBarProps): react.JSX.Element;
 
-export { TopBar };
+export { TopBar, type TopBarProps };

package/dist/shell/top-bar.js

@@ -1,13 +1,11 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
-function TopBar({
-  brand,
-  actions,
-  className
-}) {
+function TopBar({ brand, actions, className, ...rest }) {
   return /* @__PURE__ */ jsxs(
     "header",
     {
+      ...rest,
       className: cn(
         // z-40 keeps the app header above sticky page content — notably the
         // expanded transaction editor (z-30), which on mobile shares the page

package/dist/shell/top-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/top-bar.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * The sticky app header frame: a `brand` slot on the left and an `actions` slot\n * on the right (theme/palette/language controls, account menu, etc.). Domain-free\n * — each app composes its own actions from the shared controls plus its own menus.\n */\nexport function TopBar({\n  brand,\n  actions,\n  className,\n}: {\n  brand: ReactNode;\n  actions?: ReactNode;\n  className?: string;\n}) {\n  return (\n    <header\n      className={cn(\n        // z-40 keeps the app header above sticky page content — notably the\n        // expanded transaction editor (z-30), which on mobile shares the page\n        // scroll and otherwise slid over the header while scrolling (feedback\n        // #320). Modals/tour (z-50/60) still sit above it.\n        \"sticky top-0 z-40 flex h-12 items-center justify-between gap-2 border-b border-[var(--border)] bg-[var(--bg-surface)] px-3 md:px-6\",\n        className,\n      )}\n    >\n      <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>\n      <div className=\"flex items-center gap-1\">{actions}</div>\n    </header>\n  );\n}\n"],"mappings":"AAkBI,SAUE,KAVF;AAjBJ,SAAS,UAAU;AAOZ,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAU,mCAAmC,iBAAM;AAAA,QACxD,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA;AAAA;AAAA,EACpD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/top-bar.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * `extends ComponentPropsWithoutRef<\"header\">` because this IS the `<header>`, and it is\n * the `sticky top-0` element itself: a consumer cannot wrap it to add an attribute\n * without the sticking moving to the wrapper. The one that matters most is `aria-label`\n * — a `<header>` is a `banner` landmark, and a landmark with no name is how two of them\n * become indistinguishable in a screen reader's landmark list.\n */\nexport interface TopBarProps extends ComponentPropsWithoutRef<\"header\"> {\n  brand: ReactNode;\n  actions?: ReactNode;\n  className?: string;\n}\n\n/**\n * The sticky app header frame: a `brand` slot on the left and an `actions` slot\n * on the right (theme/palette/language controls, account menu, etc.). Domain-free\n * — each app composes its own actions from the shared controls plus its own menus.\n */\nexport function TopBar({ brand, actions, className, ...rest }: TopBarProps) {\n  return (\n    <header\n      {...rest}\n      className={cn(\n        // z-40 keeps the app header above sticky page content — notably the\n        // expanded transaction editor (z-30), which on mobile shares the page\n        // scroll and otherwise slid over the header while scrolling (feedback\n        // #320). Modals/tour (z-50/60) still sit above it.\n        \"sticky top-0 z-40 flex h-12 items-center justify-between gap-2 border-b border-[var(--border)] bg-[var(--bg-surface)] px-3 md:px-6\",\n        className,\n      )}\n    >\n      <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>\n      <div className=\"flex items-center gap-1\">{actions}</div>\n    </header>\n  );\n}\n"],"mappings":";AAuBI,SAWE,KAXF;AAtBJ,SAAS,UAAU;AAoBZ,SAAS,OAAO,EAAE,OAAO,SAAS,WAAW,GAAG,KAAK,GAAgB;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAU,mCAAmC,iBAAM;AAAA,QACxD,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA;AAAA;AAAA,EACpD;AAEJ;","names":[]}

package/dist/shell/topbar-action-menu.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Link } from "react-router";
 import { cn } from "../lib/cn.js";
@@ -16,10 +17,10 @@ function TopBarActionMenu({
       ariaLabel,
       trigger: ({ toggle }) => /* @__PURE__ */ jsx("button", { type: "button", onClick: toggle, "aria-label": ariaLabel, className: TOPBAR_TRIGGER_CLASS, children: icon }),
       children: (close) => /* @__PURE__ */ jsxs("ul", { className: cn("py-1", panelClassName), children: [
-        heading && /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-slate-400 dark:text-slate-500", children: heading }),
+        heading && /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]", children: heading }),
         entries.map((entry) => {
           if (entry.kind === "divider") {
-            return /* @__PURE__ */ jsx("li", { className: "my-1 border-t border-slate-100 dark:border-slate-800" }, entry.key);
+            return /* @__PURE__ */ jsx("li", { className: "my-1 border-t border-[var(--border)]" }, entry.key);
           }
           const content = /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center gap-2", children: [
             entry.icon,

package/dist/shell/topbar-action-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\n\n/**\n * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a\n * `link` navigates via react-router, and a `divider` draws a rule. Non-divider\n * rows close the menu automatically when chosen. `kind` may be omitted for\n * actions, keeping the common case terse.\n */\nexport type TopBarMenuEntry =\n  | { kind?: \"action\"; key: string; icon?: ReactNode; label: ReactNode; trailing?: ReactNode; onSelect: () => void }\n  | { kind: \"link\"; key: string; icon?: ReactNode; label: ReactNode; trailing?: ReactNode; to: string }\n  | { kind: \"divider\"; key: string };\n\n/**\n * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,\n * with an optional uppercase heading and divider rules. Generic glue over the\n * shared top-bar chrome — e.g. the feedback launcher or the guided-tours menu —\n * so those call sites describe their rows as data instead of rebuilding the\n * trigger + list markup. For a checkmarked value-switcher use\n * {@link OptionSwitcherMenu} instead.\n */\nexport function TopBarActionMenu({\n  icon,\n  ariaLabel,\n  heading,\n  entries,\n  panelClassName,\n}: {\n  icon: ReactNode;\n  ariaLabel: string;\n  heading?: string;\n  entries: TopBarMenuEntry[];\n  panelClassName?: string;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      trigger={({ toggle }) => (\n        <button type=\"button\" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>\n          {icon}\n        </button>\n      )}\n    >\n      {(close) => (\n        <ul className={cn(\"py-1\", panelClassName)}>\n          {heading && (\n            <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-slate-400 dark:text-slate-500\">\n              {heading}\n            </li>\n          )}\n          {entries.map((entry) => {\n            if (entry.kind === \"divider\") {\n              return <li key={entry.key} className=\"my-1 border-t border-slate-100 dark:border-slate-800\" />;\n            }\n            const content = (\n              <span className=\"flex w-full items-center gap-2\">\n                {entry.icon}\n                {entry.label}\n                {entry.trailing && <span className=\"ml-auto pl-2\">{entry.trailing}</span>}\n              </span>\n            );\n            return (\n              <li key={entry.key}>\n                {entry.kind === \"link\" ? (\n                  <Link to={entry.to} onClick={close} className={TOPBAR_MENU_ITEM_CLASS}>\n                    {content}\n                  </Link>\n                ) : (\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      entry.onSelect();\n                      close();\n                    }}\n                    className={TOPBAR_MENU_ITEM_CLASS}\n                  >\n                    {content}\n                  </button>\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":"AA0CQ,cAiBM,YAjBN;AAzCR,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAqBtD,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,CAAC,EAAE,OAAO,MACjB,oBAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,cAAY,WAAW,WAAW,sBACtE,gBACH;AAAA,MAGD,WAAC,UACA,qBAAC,QAAG,WAAW,GAAG,QAAQ,cAAc,GACrC;AAAA,mBACC,oBAAC,QAAG,WAAU,kGACX,mBACH;AAAA,QAED,QAAQ,IAAI,CAAC,UAAU;AACtB,cAAI,MAAM,SAAS,WAAW;AAC5B,mBAAO,oBAAC,QAAmB,WAAU,0DAArB,MAAM,GAAsE;AAAA,UAC9F;AACA,gBAAM,UACJ,qBAAC,UAAK,WAAU,kCACb;AAAA,kBAAM;AAAA,YACN,MAAM;AAAA,YACN,MAAM,YAAY,oBAAC,UAAK,WAAU,gBAAgB,gBAAM,UAAS;AAAA,aACpE;AAEF,iBACE,oBAAC,QACE,gBAAM,SAAS,SACd,oBAAC,QAAK,IAAI,MAAM,IAAI,SAAS,OAAO,WAAW,wBAC5C,mBACH,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM;AACb,sBAAM,SAAS;AACf,sBAAM;AAAA,cACR;AAAA,cACA,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,KAfK,MAAM,GAiBf;AAAA,QAEJ,CAAC;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\n\n/**\n * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a\n * `link` navigates via react-router, and a `divider` draws a rule. Non-divider\n * rows close the menu automatically when chosen. `kind` may be omitted for\n * actions, keeping the common case terse.\n */\nexport type TopBarMenuEntry =\n  | { kind?: \"action\"; key: string; icon?: ReactNode; label: ReactNode; trailing?: ReactNode; onSelect: () => void }\n  | { kind: \"link\"; key: string; icon?: ReactNode; label: ReactNode; trailing?: ReactNode; to: string }\n  | { kind: \"divider\"; key: string };\n\n/**\n * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,\n * with an optional uppercase heading and divider rules. Generic glue over the\n * shared top-bar chrome — e.g. the feedback launcher or the guided-tours menu —\n * so those call sites describe their rows as data instead of rebuilding the\n * trigger + list markup. For a checkmarked value-switcher use\n * {@link OptionSwitcherMenu} instead.\n */\nexport function TopBarActionMenu({\n  icon,\n  ariaLabel,\n  heading,\n  entries,\n  panelClassName,\n}: {\n  icon: ReactNode;\n  ariaLabel: string;\n  heading?: string;\n  entries: TopBarMenuEntry[];\n  panelClassName?: string;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      trigger={({ toggle }) => (\n        <button type=\"button\" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>\n          {icon}\n        </button>\n      )}\n    >\n      {(close) => (\n        <ul className={cn(\"py-1\", panelClassName)}>\n          {heading && (\n            <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n              {heading}\n            </li>\n          )}\n          {entries.map((entry) => {\n            if (entry.kind === \"divider\") {\n              return <li key={entry.key} className=\"my-1 border-t border-[var(--border)]\" />;\n            }\n            const content = (\n              <span className=\"flex w-full items-center gap-2\">\n                {entry.icon}\n                {entry.label}\n                {entry.trailing && <span className=\"ml-auto pl-2\">{entry.trailing}</span>}\n              </span>\n            );\n            return (\n              <li key={entry.key}>\n                {entry.kind === \"link\" ? (\n                  <Link to={entry.to} onClick={close} className={TOPBAR_MENU_ITEM_CLASS}>\n                    {content}\n                  </Link>\n                ) : (\n                  <button\n                    type=\"button\"\n                    onClick={() => {\n                      entry.onSelect();\n                      close();\n                    }}\n                    className={TOPBAR_MENU_ITEM_CLASS}\n                  >\n                    {content}\n                  </button>\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":";AA0CQ,cAiBM,YAjBN;AAzCR,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAqBtD,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,CAAC,EAAE,OAAO,MACjB,oBAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,cAAY,WAAW,WAAW,sBACtE,gBACH;AAAA,MAGD,WAAC,UACA,qBAAC,QAAG,WAAW,GAAG,QAAQ,cAAc,GACrC;AAAA,mBACC,oBAAC,QAAG,WAAU,8FACX,mBACH;AAAA,QAED,QAAQ,IAAI,CAAC,UAAU;AACtB,cAAI,MAAM,SAAS,WAAW;AAC5B,mBAAO,oBAAC,QAAmB,WAAU,0CAArB,MAAM,GAAsD;AAAA,UAC9E;AACA,gBAAM,UACJ,qBAAC,UAAK,WAAU,kCACb;AAAA,kBAAM;AAAA,YACN,MAAM;AAAA,YACN,MAAM,YAAY,oBAAC,UAAK,WAAU,gBAAgB,gBAAM,UAAS;AAAA,aACpE;AAEF,iBACE,oBAAC,QACE,gBAAM,SAAS,SACd,oBAAC,QAAK,IAAI,MAAM,IAAI,SAAS,OAAO,WAAW,wBAC5C,mBACH,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM;AACb,sBAAM,SAAS;AACf,sBAAM;AAAA,cACR;AAAA,cACA,WAAW;AAAA,cAEV;AAAA;AAAA,UACH,KAfK,MAAM,GAiBf;AAAA,QAEJ,CAAC;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/shell/topbar-controls.d.ts

@@ -7,13 +7,14 @@ import 'zustand';
 
 /** Shared square icon-button styling for top-bar triggers, so app-owned controls
  *  (account/feedback menus) line up with the shared ones. */
-declare const TOPBAR_TRIGGER_CLASS = "size-9 rounded-md flex items-center justify-center text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-slate-300 dark:hover:text-white dark:hover:bg-slate-800";
+declare const TOPBAR_TRIGGER_CLASS = "size-9 rounded-md flex items-center justify-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]";
 /** Shared row styling for the top-bar hover-menu items. */
-declare const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-left text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800";
+declare const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-left text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
 /** Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode. */
 declare function ThemeToggle({ mode, onToggle, ariaLabel, title, className, }: {
     mode: ThemeMode;
     onToggle: () => void;
+    /** Default: `topBar.theme` from the {@link UiKitProvider}, else English. */
     ariaLabel?: string;
     title?: string;
     className?: string;
@@ -25,6 +26,7 @@ declare function PaletteMenu({ palettes, activeId, mode, onSelect, ariaLabel, he
     activeId: string;
     mode: ThemeMode;
     onSelect: (id: string) => void;
+    /** Default: `topBar.palette` from the {@link UiKitProvider}, else English. */
     ariaLabel?: string;
     /** Optional small heading row above the list. */
     heading?: string;
@@ -48,6 +50,7 @@ declare function LanguageMenu({ options, current, onChange, ariaLabel, }: {
     options: LanguageOption[];
     current: string | undefined;
     onChange: (code: string) => void;
+    /** Default: `topBar.language` from the {@link UiKitProvider}, else English. */
     ariaLabel?: string;
 }): react.JSX.Element;
 

package/dist/shell/topbar-controls.js

@@ -1,10 +1,12 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Globe, Moon, Palette, Sun } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { HoverMenu } from "../components/hover-menu.js";
 import { Tooltip } from "../components/tooltip.js";
-const TOPBAR_TRIGGER_CLASS = "size-9 rounded-md flex items-center justify-center text-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-slate-300 dark:hover:text-white dark:hover:bg-slate-800";
-const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-left text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800";
+import { DEFAULT_TOP_BAR_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+const TOPBAR_TRIGGER_CLASS = "size-9 rounded-md flex items-center justify-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]";
+const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-left text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
 function ThemeToggle({
   mode,
   onToggle,
@@ -12,13 +14,14 @@ function ThemeToggle({
   title,
   className
 }) {
+  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { theme: ariaLabel });
   const Icon = mode === "dark" ? Moon : Sun;
   return /* @__PURE__ */ jsx(Tooltip, { label: title, portal: true, children: /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       onClick: onToggle,
-      "aria-label": ariaLabel,
+      "aria-label": labels.theme,
       className: cn(TOPBAR_TRIGGER_CLASS, className),
       children: /* @__PURE__ */ jsx(Icon, { className: "size-5" })
     }
@@ -29,26 +32,27 @@ function PaletteMenu({
   activeId,
   mode,
   onSelect,
-  ariaLabel = "Appearance preset",
+  ariaLabel,
   heading
 }) {
+  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { palette: ariaLabel });
   const activeName = palettes.find((p) => p.id === activeId)?.name ?? activeId;
   return /* @__PURE__ */ jsx(
     HoverMenu,
     {
-      ariaLabel,
+      ariaLabel: labels.palette,
       trigger: ({ toggle }) => /* @__PURE__ */ jsx(Tooltip, { label: activeName, portal: true, children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           onClick: toggle,
-          "aria-label": ariaLabel,
+          "aria-label": labels.palette,
           className: TOPBAR_TRIGGER_CLASS,
-          children: /* @__PURE__ */ jsx(Palette, { className: "size-5 text-violet-500" })
+          children: /* @__PURE__ */ jsx(Palette, { className: "size-5 text-[var(--chart-1)]" })
         }
       ) }),
       children: (close) => /* @__PURE__ */ jsxs("ul", { className: "w-60 py-1", children: [
-        heading && /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-slate-400 dark:text-slate-500", children: heading }),
+        heading && /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]", children: heading }),
         palettes.map((p) => {
           const ts = p[mode];
           const swatches = [ts.bgPage, ts.brand, ts.moneyIncome, ts.moneyExpense, ts.moneyNet];
@@ -73,10 +77,10 @@ function PaletteMenu({
                   )) }),
                   /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col text-left", children: [
                     /* @__PURE__ */ jsx("span", { className: "truncate", children: p.name }),
-                    /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-slate-400 dark:text-slate-500", children: p.blurb })
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-[var(--text-placeholder)]", children: p.blurb })
                   ] })
                 ] }),
-                activeId === p.id && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-slate-700 dark:text-slate-200" })
+                activeId === p.id && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-[var(--text-secondary)]" })
               ]
             }
           ) }, p.id);
@@ -89,19 +93,20 @@ function LanguageMenu({
   options,
   current,
   onChange,
-  ariaLabel = "Language"
+  ariaLabel
 }) {
+  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { language: ariaLabel });
   const active = options.find((o) => o.code === current);
   return /* @__PURE__ */ jsx(
     HoverMenu,
     {
-      ariaLabel,
-      trigger: ({ toggle }) => /* @__PURE__ */ jsx(Tooltip, { label: active?.label ?? ariaLabel, portal: true, children: /* @__PURE__ */ jsx(
+      ariaLabel: labels.language,
+      trigger: ({ toggle }) => /* @__PURE__ */ jsx(Tooltip, { label: active?.label ?? labels.language, portal: true, children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           onClick: toggle,
-          "aria-label": ariaLabel,
+          "aria-label": labels.language,
           className: TOPBAR_TRIGGER_CLASS,
           children: active ? /* @__PURE__ */ jsx(
             "span",
@@ -134,7 +139,7 @@ function LanguageMenu({
                 ),
                 lang.label
               ] }),
-              isActive && /* @__PURE__ */ jsx(Check, { className: "size-4 text-slate-700 dark:text-slate-200" })
+              isActive && /* @__PURE__ */ jsx(Check, { className: "size-4 text-[var(--text-secondary)]" })
             ]
           }
         ) }, lang.code);

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\";\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-slate-600 hover:text-slate-900 hover:bg-slate-100 dark:text-slate-300 dark:hover:text-white dark:hover:bg-slate-800\";\n\n/** Shared row styling for the top-bar hover-menu items. */\nexport const TOPBAR_MENU_ITEM_CLASS =\n  \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-left text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800\";\n\n/** Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode. */\nexport function ThemeToggle({\n  mode,\n  onToggle,\n  ariaLabel,\n  title,\n  className,\n}: {\n  mode: ThemeMode;\n  onToggle: () => void;\n  ariaLabel?: string;\n  title?: string;\n  className?: string;\n}) {\n  const Icon = mode === \"dark\" ? Moon : Sun;\n  return (\n    <Tooltip label={title} portal>\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-label={ariaLabel}\n        className={cn(TOPBAR_TRIGGER_CLASS, className)}\n      >\n        <Icon className=\"size-5\" />\n      </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  ariaLabel = \"Appearance preset\",\n  heading,\n}: {\n  palettes: PalettePreset[];\n  activeId: string;\n  mode: ThemeMode;\n  onSelect: (id: string) => void;\n  ariaLabel?: string;\n  /** Optional small heading row above the list. */\n  heading?: string;\n}) {\n  const activeName = palettes.find((p) => p.id === activeId)?.name ?? activeId;\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      trigger={({ toggle }) => (\n        <Tooltip label={activeName} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={ariaLabel}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            <Palette className=\"size-5 text-violet-500\" />\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"w-60 py-1\">\n          {heading && (\n            <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-slate-400 dark:text-slate-500\">\n              {heading}\n            </li>\n          )}\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                      {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-left\">\n                      <span className=\"truncate\">{p.name}</span>\n                      <span className=\"truncate text-[11px] text-slate-400 dark:text-slate-500\">\n                        {p.blurb}\n                      </span>\n                    </span>\n                  </span>\n                  {activeId === p.id && (\n                    <Check className=\"size-4 shrink-0 text-slate-700 dark:text-slate-200\" />\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  ariaLabel = \"Language\",\n}: {\n  options: LanguageOption[];\n  current: string | undefined;\n  onChange: (code: string) => void;\n  ariaLabel?: string;\n}) {\n  const active = options.find((o) => o.code === current);\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      trigger={({ toggle }) => (\n        <Tooltip label={active?.label ?? ariaLabel} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={ariaLabel}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {active ? (\n              <span\n                aria-hidden\n                className={`fi fi-${active.country} inline-block h-[15px] 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          {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-[15px] 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-slate-700 dark:text-slate-200\" />}\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\";\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-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\";\n\n/** Shared row styling for the top-bar hover-menu items. */\nexport const TOPBAR_MENU_ITEM_CLASS =\n  \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-left text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\";\n\n/** Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode. */\nexport function ThemeToggle({\n  mode,\n  onToggle,\n  ariaLabel,\n  title,\n  className,\n}: {\n  mode: ThemeMode;\n  onToggle: () => void;\n  /** Default: `topBar.theme` from the {@link UiKitProvider}, else English. */\n  ariaLabel?: string;\n  title?: string;\n  className?: string;\n}) {\n  // This had no default at all, so a toggle rendered without `ariaLabel` 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  return (\n    <Tooltip label={title} portal>\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-label={labels.theme}\n        className={cn(TOPBAR_TRIGGER_CLASS, className)}\n      >\n        <Icon className=\"size-5\" />\n      </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  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  ariaLabel?: 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      ariaLabel={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 && (\n            <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n              {heading}\n            </li>\n          )}\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-left\">\n                      <span className=\"truncate\">{p.name}</span>\n                      <span className=\"truncate text-[11px] text-[var(--text-placeholder)]\">\n                        {p.blurb}\n                      </span>\n                    </span>\n                  </span>\n                  {activeId === p.id && (\n                    <Check className=\"size-4 shrink-0 text-[var(--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  ariaLabel,\n}: {\n  options: LanguageOption[];\n  current: string | undefined;\n  onChange: (code: string) => void;\n  /** Default: `topBar.language` from the {@link UiKitProvider}, else English. */\n  ariaLabel?: 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      ariaLabel={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-[15px] 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          {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-[15px] 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-[var(--text-secondary)]\" />}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":";AA4CQ,cAiFY,YAjFZ;AA5CR,SAAS,OAAO,OAAO,MAAM,SAAS,WAAW;AACjD,SAAS,UAAU;AACnB,SAAS,iBAAiB;AAG1B,SAAS,eAAe;AACxB,SAAS,wBAAwB,oBAAoB;AAI9C,MAAM,uBACX;AAGK,MAAM,yBACX;AAGK,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AAGD,QAAM,SAAS,aAAa,UAAU,wBAAwB,EAAE,OAAO,UAAU,CAAC;AAClF,QAAM,OAAO,SAAS,SAAS,OAAO;AACtC,SACE,oBAAC,WAAQ,OAAO,OAAO,QAAM,MAC3B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY,OAAO;AAAA,MACnB,WAAW,GAAG,sBAAsB,SAAS;AAAA,MAE7C,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,EAC3B,GACF;AAEJ;AAIO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,SAAS,aAAa,UAAU,wBAAwB,EAAE,SAAS,UAAU,CAAC;AACpF,QAAM,aAAa,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ,GAAG,QAAQ;AACpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,SAAS,CAAC,EAAE,OAAO,MACjB,oBAAC,WAAQ,OAAO,YAAY,QAAM,MAChC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,cAAY,OAAO;AAAA,UACnB,WAAW;AAAA,UAOX,8BAAC,WAAQ,WAAU,gCAA+B;AAAA;AAAA,MACpD,GACF;AAAA,MAGD,WAAC,UACA,qBAAC,QAAG,WAAU,aACX;AAAA,mBACC,oBAAC,QAAG,WAAU,8FACX,mBACH;AAAA,QAED,SAAS,IAAI,CAAC,MAAM;AACnB,gBAAM,KAAK,EAAE,IAAI;AACjB,gBAAM,WAAW,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,cAAc,GAAG,QAAQ;AACnF,iBACE,oBAAC,QACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM;AACb,yBAAS,EAAE,EAAE;AACb,sBAAM;AAAA,cACR;AAAA,cACA,WAAW;AAAA,cAEX;AAAA,qCAAC,UAAK,WAAU,mCACd;AAAA,sCAAC,UAAK,WAAU,yBAIb,mBAAS,IAAI,CAAC,GAAG,MAChB;AAAA,oBAAC;AAAA;AAAA,sBAEC,WAAU;AAAA,sBACV,OAAO,EAAE,YAAY,EAAE;AAAA;AAAA,oBAFlB;AAAA,kBAGP,CACD,GACH;AAAA,kBACA,qBAAC,UAAK,WAAU,mCACd;AAAA,wCAAC,UAAK,WAAU,YAAY,YAAE,MAAK;AAAA,oBACnC,oBAAC,UAAK,WAAU,uDACb,YAAE,OACL;AAAA,qBACF;AAAA,mBACF;AAAA,gBACC,aAAa,EAAE,MACd,oBAAC,SAAM,WAAU,gDAA+C;AAAA;AAAA;AAAA,UAEpE,KAhCO,EAAE,EAiCX;AAAA,QAEJ,CAAC;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;AAkBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,SAAS,aAAa,UAAU,wBAAwB,EAAE,UAAU,UAAU,CAAC;AACrF,QAAM,SAAS,QAAQ,KAAK,CAAC,MAAM,EAAE,SAAS,OAAO;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,SAAS,CAAC,EAAE,OAAO,MACjB,oBAAC,WAAQ,OAAO,QAAQ,SAAS,OAAO,UAAU,QAAM,MACtD;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,cAAY,OAAO;AAAA,UACnB,WAAW;AAAA,UAEV,mBACC;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAW,SAAS,OAAO,OAAO;AAAA;AAAA,UACpC,IAEA,oBAAC,SAAM,WAAU,UAAS;AAAA;AAAA,MAE9B,GACF;AAAA,MAGD,WAAC,UACA,oBAAC,QAAG,WAAU,QACX,kBAAQ,IAAI,CAAC,SAAS;AACrB,cAAM,WAAW,KAAK,SAAS;AAC/B,eACE,oBAAC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,uBAAS,KAAK,IAAI;AAClB,oBAAM;AAAA,YACR;AAAA,YACA,WAAW;AAAA,YAEX;AAAA,mCAAC,UAAK,WAAU,2BACd;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAW;AAAA,oBACX,WAAW,SAAS,KAAK,OAAO;AAAA;AAAA,gBAClC;AAAA,gBACC,KAAK;AAAA,iBACR;AAAA,cACC,YAAY,oBAAC,SAAM,WAAU,uCAAsC;AAAA;AAAA;AAAA,QACtE,KAjBO,KAAK,IAkBd;AAAA,MAEJ,CAAC,GACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/shell.d.ts

@@ -0,0 +1,13 @@
+export { LanguageMenu, LanguageOption, PaletteMenu, TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS, ThemeToggle } from './shell/topbar-controls.js';
+export { TopBar, TopBarProps } from './shell/top-bar.js';
+export { AppShell, AppShellNavItem, AppShellProps, AppShellSubItem } from './shell/app-shell.js';
+export { OptionSwitcherMenu, OptionSwitcherOption } from './shell/option-switcher-menu.js';
+export { RoleSwitcher, RoleSwitcherProps } from './shell/role-switcher.js';
+export { TopBarActionMenu, TopBarMenuEntry } from './shell/topbar-action-menu.js';
+import 'react';
+import './theme/palette-presets.js';
+import './theme/chart-palette.js';
+import './theme/theme-store.js';
+import 'zustand/middleware';
+import 'zustand';
+import 'lucide-react';

package/dist/shell.js

@@ -0,0 +1,8 @@
+"use client";
+export * from "./shell/topbar-controls.js";
+export * from "./shell/top-bar.js";
+export * from "./shell/app-shell.js";
+export * from "./shell/option-switcher-menu.js";
+export * from "./shell/role-switcher.js";
+export * from "./shell/topbar-action-menu.js";
+//# sourceMappingURL=shell.js.map

package/dist/shell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shell.ts"],"sourcesContent":["// `@eifi1/ui-kit/shell` — the composable app chrome.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: AppShell renders NavLink and TopBarActionMenu renders Link.\nexport * from \"./shell/topbar-controls\";\nexport * from \"./shell/top-bar\";\nexport * from \"./shell/app-shell\";\nexport * from \"./shell/option-switcher-menu\";\nexport * from \"./shell/role-switcher\";\nexport * from \"./shell/topbar-action-menu\";\n"],"mappings":";AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

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

@@ -27,34 +27,41 @@ interface HeatStops {
     heatmap stops, per theme. Teal = under/good, amber = over/spend = bad. */
 declare const HEATMAP_HEX: {
     readonly light: {
-        readonly neutral: "#f1f5f9";
-        readonly under: "#0f766e";
-        readonly over: "#b45309";
-        readonly seqLow: "#fef3c7";
-        readonly seqHigh: "#b45309";
+        readonly neutral: "#f1e7d2";
+        readonly under: "#0b6650";
+        readonly over: "#9c6418";
+        readonly seqLow: "#f6ecd0";
+        readonly seqHigh: "#9c6418";
         readonly empty: "rgba(148,163,184,0.14)";
     };
     readonly dark: {
-        readonly neutral: "#334155";
-        readonly under: "#2dd4bf";
+        readonly neutral: "#363a5a";
+        readonly under: "#22c3b6";
         readonly over: "#fbbf24";
-        readonly seqLow: "#3f2d10";
+        readonly seqLow: "#3a2c14";
         readonly seqHigh: "#fbbf24";
         readonly empty: "rgba(148,163,184,0.10)";
     };
 };
 /** Linear interpolate two #rrggbb hexes; `t` in [0,1]. Returns #rrggbb. */
 declare function lerpHex(a: string, b: string, t: number): string;
-/** Pick a legible text colour (near-black / near-white) for a solid hex fill,
-    flipping by perceived luminance so cell/treemap labels keep contrast.
+/** Pick a legible text colour (near-black / near-white) for a solid hex fill, by
+    MEASURING both against it and keeping the one that wins.
+
+    This used to flip on Rec.601 luma > 0.6, which is a brightness heuristic and not a
+    contrast measure — the two disagree on six of the eighteen default chart hues, a
+    third of the ramp, and on each of those the label got the worse of the two inks.
+    `#44aa99` is the plainest case: luma calls it dark, so it took white, which measures
+    2.69:1 on it; near-black measures 6.18:1. keksdose measured this too and forked the
+    function locally for its treemap, leaving its other two call sites on this one.
 
     A fill this cannot read gets `currentColor` — inherit, i.e. whatever the
     surrounding text already uses. That is the only answer that is right on both
     themes, because an unreadable fill is usually a translucent one (`HEATMAP_HEX.*
     .empty` is an `rgba()` string, and the variance heatmap does pass it here for any
     category with zero assigned and positive activity — a refund). Picking a constant
-    instead is what produced the bug: `NaN > 0.6` is false, so the label came back
-    near-white on a near-white cell and the figure was invisible. */
+    instead is what produced the earlier bug: the unparsed fill fell through to the
+    light ink, near-white on a near-white cell, and the figure was invisible. */
 declare function textOn(hex: string): string;
 
 export { CHART_COLORS, HEATMAP_HEX, type HeatStops, PALETTE_HEX, lerpHex, paletteFor, textOn };

package/dist/theme/chart-palette.js

@@ -1,3 +1,5 @@
+"use client";
+import { contrast, parseHex as parseRgbHex } from "./color.js";
 const PALETTE_SIZE = 9;
 function paletteFor(index) {
   return `var(--chart-${index % PALETTE_SIZE + 1})`;
@@ -15,29 +17,27 @@ const PALETTE_HEX = {
 };
 const HEATMAP_HEX = {
   light: {
-    neutral: "#f1f5f9",
-    // slate-100
-    under: "#0f766e",
-    // teal-700
-    over: "#b45309",
-    // amber-700
-    seqLow: "#fef3c7",
-    // amber-100
-    seqHigh: "#b45309",
-    // amber-700
+    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",
     empty: "rgba(148,163,184,0.14)"
   },
   dark: {
-    neutral: "#334155",
-    // slate-700
-    under: "#2dd4bf",
-    // teal-400
+    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",
-    // amber-400
-    seqLow: "#3f2d10",
-    // dim amber, sits just above slate-950
+    seqLow: "#3a2c14",
+    // dim amber, sits just above the page
     seqHigh: "#fbbf24",
-    // amber-400
     empty: "rgba(148,163,184,0.10)"
   }
 };
@@ -47,23 +47,17 @@ function lerpHex(a, b, t) {
   const c = (i) => Math.round(pa[i] + (pb[i] - pa[i]) * clamp01(t));
   return `#${[c(0), c(1), c(2)].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
 }
+const INK_DARK = "#1a1a1a";
+const INK_LIGHT = "#f8fafc";
 function textOn(hex) {
-  const rgb = parseHex(hex);
+  const rgb = parseRgbHex(hex);
   if (!rgb) return "currentColor";
-  const [r, g, b] = rgb;
-  const luma = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luma > 0.6 ? "#1a1a1a" : "#f8fafc";
+  return contrast(rgb, INK_DARK) >= contrast(rgb, INK_LIGHT) ? INK_DARK : INK_LIGHT;
 }
 const UNREADABLE = [128, 128, 128];
 function parseHex(hex) {
-  const h = hex.startsWith("#") ? hex.slice(1) : hex;
-  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
-  if (!/^[0-9a-fA-F]{6}$/.test(full)) return null;
-  return [
-    parseInt(full.slice(0, 2), 16),
-    parseInt(full.slice(2, 4), 16),
-    parseInt(full.slice(4, 6), 16)
-  ];
+  const rgb = parseRgbHex(hex);
+  return rgb ? [rgb.r, rgb.g, rgb.b] : null;
 }
 function clamp01(t) {
   return t < 0 ? 0 : t > 1 ? 1 : t;

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