@eifi1/ui-kit 0.4.0

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

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { HoverMenu } from "../components/hover-menu.js";
+import { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from "./topbar-controls.js";
+import { Tooltip } from "../components/tooltip.js";
+function OptionSwitcherMenu({
+  icon,
+  ariaLabel,
+  title,
+  heading,
+  options,
+  value,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx(
+    HoverMenu,
+    {
+      ariaLabel,
+      trigger: ({ toggle }) => /* @__PURE__ */ jsx(Tooltip, { label: title, portal: true, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: toggle, "aria-label": ariaLabel, className: TOPBAR_TRIGGER_CLASS, children: icon }) }),
+      children: (close) => /* @__PURE__ */ jsxs("ul", { className: "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 }),
+        options.map((opt) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onSelect(opt.value);
+              close();
+            },
+            className: TOPBAR_MENU_ITEM_CLASS,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: opt.label }),
+              value === opt.value && /* @__PURE__ */ jsx(Check, { className: "size-4 text-slate-700 dark:text-slate-200" })
+            ]
+          }
+        ) }, opt.value))
+      ] })
+    }
+  );
+}
+export {
+  OptionSwitcherMenu
+};
+//# sourceMappingURL=option-switcher-menu.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,19 @@
+import * as react from 'react';
+
+interface RoleSwitcherProps<R extends string> {
+    roles: readonly R[];
+    value: R;
+    onChange: (role: R) => void;
+    ariaLabel?: string;
+    heading?: string;
+    title?: string;
+}
+/**
+ * A reusable user-role switcher (feedback #337): a thin wrapper over
+ * {@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.
+ */
+declare function RoleSwitcher<R extends string>({ roles, value, onChange, ariaLabel, heading, title, }: RoleSwitcherProps<R>): react.JSX.Element;
+
+export { RoleSwitcher, type RoleSwitcherProps };

package/dist/shell/role-switcher.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { FlaskConical } from "lucide-react";
+import { OptionSwitcherMenu } from "./option-switcher-menu.js";
+function RoleSwitcher({
+  roles,
+  value,
+  onChange,
+  ariaLabel = "Switch role",
+  heading,
+  title
+}) {
+  return /* @__PURE__ */ jsx(
+    OptionSwitcherMenu,
+    {
+      ariaLabel,
+      title: title ?? `Role: ${value}`,
+      heading,
+      icon: /* @__PURE__ */ jsx(FlaskConical, { className: "size-5 text-amber-500" }),
+      options: roles.map((r) => ({ value: r, label: r })),
+      value,
+      onSelect: onChange
+    }
+  );
+}
+export {
+  RoleSwitcher
+};
+//# sourceMappingURL=role-switcher.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,15 @@
+import * as react from 'react';
+import { 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.
+ */
+declare function TopBar({ brand, actions, className, }: {
+    brand: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}): react.JSX.Element;
+
+export { TopBar };

package/dist/shell/top-bar.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+function TopBar({
+  brand,
+  actions,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      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
+        // scroll and otherwise slid over the header while scrolling (feedback
+        // #320). Modals/tour (z-50/60) still sit above it.
+        "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",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: brand }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: actions })
+      ]
+    }
+  );
+}
+export {
+  TopBar
+};
+//# sourceMappingURL=top-bar.js.map

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

@@ -0,0 +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":[]}

package/dist/shell/topbar-action-menu.d.ts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a
+ * `link` navigates via react-router, and a `divider` draws a rule. Non-divider
+ * rows close the menu automatically when chosen. `kind` may be omitted for
+ * actions, keeping the common case terse.
+ */
+type TopBarMenuEntry = {
+    kind?: "action";
+    key: string;
+    icon?: ReactNode;
+    label: ReactNode;
+    trailing?: ReactNode;
+    onSelect: () => void;
+} | {
+    kind: "link";
+    key: string;
+    icon?: ReactNode;
+    label: ReactNode;
+    trailing?: ReactNode;
+    to: string;
+} | {
+    kind: "divider";
+    key: string;
+};
+/**
+ * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,
+ * with an optional uppercase heading and divider rules. Generic glue over the
+ * shared top-bar chrome — e.g. the feedback launcher or the guided-tours menu —
+ * so those call sites describe their rows as data instead of rebuilding the
+ * trigger + list markup. For a checkmarked value-switcher use
+ * {@link OptionSwitcherMenu} instead.
+ */
+declare function TopBarActionMenu({ icon, ariaLabel, heading, entries, panelClassName, }: {
+    icon: ReactNode;
+    ariaLabel: string;
+    heading?: string;
+    entries: TopBarMenuEntry[];
+    panelClassName?: string;
+}): react.JSX.Element;
+
+export { TopBarActionMenu, type TopBarMenuEntry };

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

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router";
+import { cn } from "../lib/cn.js";
+import { HoverMenu } from "../components/hover-menu.js";
+import { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from "./topbar-controls.js";
+function TopBarActionMenu({
+  icon,
+  ariaLabel,
+  heading,
+  entries,
+  panelClassName
+}) {
+  return /* @__PURE__ */ jsx(
+    HoverMenu,
+    {
+      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 }),
+        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);
+          }
+          const content = /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center gap-2", children: [
+            entry.icon,
+            entry.label,
+            entry.trailing && /* @__PURE__ */ jsx("span", { className: "ml-auto pl-2", children: entry.trailing })
+          ] });
+          return /* @__PURE__ */ jsx("li", { children: entry.kind === "link" ? /* @__PURE__ */ jsx(Link, { to: entry.to, onClick: close, className: TOPBAR_MENU_ITEM_CLASS, children: content }) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                entry.onSelect();
+                close();
+              },
+              className: TOPBAR_MENU_ITEM_CLASS,
+              children: content
+            }
+          ) }, entry.key);
+        })
+      ] })
+    }
+  );
+}
+export {
+  TopBarActionMenu
+};
+//# sourceMappingURL=topbar-action-menu.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,54 @@
+import * as react from 'react';
+import { PalettePreset } from '../theme/palette-presets.js';
+import { ThemeMode } from '../theme/theme-store.js';
+import '../theme/chart-palette.js';
+import 'zustand/middleware';
+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";
+/** 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";
+/** 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;
+    ariaLabel?: string;
+    title?: string;
+    className?: string;
+}): react.JSX.Element;
+/** Appearance-preset switcher: a hover menu of palette presets with per-theme
+ *  colour swatches. Controlled — the app owns the active id and applies it. */
+declare function PaletteMenu({ palettes, activeId, mode, onSelect, ariaLabel, heading, }: {
+    palettes: PalettePreset[];
+    activeId: string;
+    mode: ThemeMode;
+    onSelect: (id: string) => void;
+    ariaLabel?: string;
+    /** Optional small heading row above the list. */
+    heading?: string;
+}): react.JSX.Element;
+interface LanguageOption {
+    code: string;
+    label: string;
+    /** ISO 3166-1 alpha-2 country code (lowercase) for the flag-icons flag. */
+    country: string;
+}
+/** Language switcher: a hover menu of options with flags and a check on the
+ *  active one. Controlled — the app owns the current code and change handler.
+ *
+ *  The trigger is the *active* option's flag, not an icon: lucide's `Languages`
+ *  glyph (文A) is the same mark Chrome puts in the omnibox for "translate this
+ *  page", so it read as machine-translation rather than "pick the UI language"
+ *  (Keksdose feedback #121). The flag also shows which language is currently on,
+ *  which no icon can, and costs the same width on a crowded mobile bar. A globe
+ *  covers the case where `current` matches nothing in `options`. */
+declare function LanguageMenu({ options, current, onChange, ariaLabel, }: {
+    options: LanguageOption[];
+    current: string | undefined;
+    onChange: (code: string) => void;
+    ariaLabel?: string;
+}): react.JSX.Element;
+
+export { LanguageMenu, type LanguageOption, PaletteMenu, TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS, ThemeToggle };

package/dist/shell/topbar-controls.js

@@ -0,0 +1,152 @@
+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";
+function ThemeToggle({
+  mode,
+  onToggle,
+  ariaLabel,
+  title,
+  className
+}) {
+  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,
+      className: cn(TOPBAR_TRIGGER_CLASS, className),
+      children: /* @__PURE__ */ jsx(Icon, { className: "size-5" })
+    }
+  ) });
+}
+function PaletteMenu({
+  palettes,
+  activeId,
+  mode,
+  onSelect,
+  ariaLabel = "Appearance preset",
+  heading
+}) {
+  const activeName = palettes.find((p) => p.id === activeId)?.name ?? activeId;
+  return /* @__PURE__ */ jsx(
+    HoverMenu,
+    {
+      ariaLabel,
+      trigger: ({ toggle }) => /* @__PURE__ */ jsx(Tooltip, { label: activeName, portal: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: toggle,
+          "aria-label": ariaLabel,
+          className: TOPBAR_TRIGGER_CLASS,
+          children: /* @__PURE__ */ jsx(Palette, { className: "size-5 text-violet-500" })
+        }
+      ) }),
+      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 }),
+        palettes.map((p) => {
+          const ts = p[mode];
+          const swatches = [ts.bgPage, ts.brand, ts.moneyIncome, ts.moneyExpense, ts.moneyNet];
+          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onSelect(p.id);
+                close();
+              },
+              className: TOPBAR_MENU_ITEM_CLASS,
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex shrink-0 gap-0.5", children: swatches.map((c, i) => /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "size-3.5 rounded-sm ring-1 ring-inset ring-black/10 dark:ring-white/10",
+                      style: { background: c }
+                    },
+                    i
+                  )) }),
+                  /* @__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 })
+                  ] })
+                ] }),
+                activeId === p.id && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-slate-700 dark:text-slate-200" })
+              ]
+            }
+          ) }, p.id);
+        })
+      ] })
+    }
+  );
+}
+function LanguageMenu({
+  options,
+  current,
+  onChange,
+  ariaLabel = "Language"
+}) {
+  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(
+        "button",
+        {
+          type: "button",
+          onClick: toggle,
+          "aria-label": ariaLabel,
+          className: TOPBAR_TRIGGER_CLASS,
+          children: active ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              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)]`
+            }
+          ) : /* @__PURE__ */ jsx(Globe, { className: "size-5" })
+        }
+      ) }),
+      children: (close) => /* @__PURE__ */ jsx("ul", { className: "py-1", children: options.map((lang) => {
+        const isActive = lang.code === current;
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onChange(lang.code);
+              close();
+            },
+            className: TOPBAR_MENU_ITEM_CLASS,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    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)]`
+                  }
+                ),
+                lang.label
+              ] }),
+              isActive && /* @__PURE__ */ jsx(Check, { className: "size-4 text-slate-700 dark:text-slate-200" })
+            ]
+          }
+        ) }, lang.code);
+      }) })
+    }
+  );
+}
+export {
+  LanguageMenu,
+  PaletteMenu,
+  TOPBAR_MENU_ITEM_CLASS,
+  TOPBAR_TRIGGER_CLASS,
+  ThemeToggle
+};
+//# sourceMappingURL=topbar-controls.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,60 @@
+/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var. */
+declare function paletteFor(index: number): 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). */
+declare const CHART_COLORS: {
+    readonly income: "var(--money-income)";
+    readonly expense: "var(--money-expense)";
+    readonly net: "var(--money-net)";
+    readonly assigned: "var(--brand)";
+    readonly activity: "var(--money-expense)";
+};
+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"];
+};
+/** 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. */
+interface HeatStops {
+    neutral: string;
+    under: string;
+    over: string;
+    seqLow: string;
+    seqHigh: string;
+    empty: string;
+}
+/** Diverging (variance: under←0→over) and sequential (spending intensity)
+    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 empty: "rgba(148,163,184,0.14)";
+    };
+    readonly dark: {
+        readonly neutral: "#334155";
+        readonly under: "#2dd4bf";
+        readonly over: "#fbbf24";
+        readonly seqLow: "#3f2d10";
+        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.
+
+    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. */
+declare function textOn(hex: string): string;
+
+export { CHART_COLORS, HEATMAP_HEX, type HeatStops, PALETTE_HEX, lerpHex, paletteFor, textOn };

package/dist/theme/chart-palette.js

@@ -0,0 +1,79 @@
+const PALETTE_SIZE = 9;
+function paletteFor(index) {
+  return `var(--chart-${index % PALETTE_SIZE + 1})`;
+}
+const CHART_COLORS = {
+  income: "var(--money-income)",
+  expense: "var(--money-expense)",
+  net: "var(--money-net)",
+  assigned: "var(--brand)",
+  activity: "var(--money-expense)"
+};
+const PALETTE_HEX = {
+  light: ["#332288", "#88ccee", "#44aa99", "#117733", "#999933", "#ddcc77", "#cc6677", "#882255", "#aa4499"],
+  dark: ["#7e72d6", "#9fd8f2", "#5fc4b0", "#3fa45f", "#bfbf5e", "#e8dda0", "#e08c9a", "#c25a78", "#cc78be"]
+};
+const HEATMAP_HEX = {
+  light: {
+    neutral: "#f1f5f9",
+    // slate-100
+    under: "#0f766e",
+    // teal-700
+    over: "#b45309",
+    // amber-700
+    seqLow: "#fef3c7",
+    // amber-100
+    seqHigh: "#b45309",
+    // amber-700
+    empty: "rgba(148,163,184,0.14)"
+  },
+  dark: {
+    neutral: "#334155",
+    // slate-700
+    under: "#2dd4bf",
+    // teal-400
+    over: "#fbbf24",
+    // amber-400
+    seqLow: "#3f2d10",
+    // dim amber, sits just above slate-950
+    seqHigh: "#fbbf24",
+    // amber-400
+    empty: "rgba(148,163,184,0.10)"
+  }
+};
+function lerpHex(a, b, t) {
+  const pa = parseHex(a) ?? UNREADABLE;
+  const pb = parseHex(b) ?? UNREADABLE;
+  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("")}`;
+}
+function textOn(hex) {
+  const rgb = parseHex(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";
+}
+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)
+  ];
+}
+function clamp01(t) {
+  return t < 0 ? 0 : t > 1 ? 1 : t;
+}
+export {
+  CHART_COLORS,
+  HEATMAP_HEX,
+  PALETTE_HEX,
+  lerpHex,
+  paletteFor,
+  textOn
+};
+//# sourceMappingURL=chart-palette.js.map