@eifi1/ui-kit 0.6.1 → 0.7.1

package/dist/shell/topbar-controls.js

@@ -6,7 +6,10 @@ import { HoverMenu } from "../components/hover-menu.js";
 import { Tooltip } from "../components/tooltip.js";
 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)]";
+const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
+function MenuHeading({ children }) {
+  return /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]", children });
+}
 function ThemeToggle({
   mode,
   onToggle,
@@ -52,7 +55,7 @@ function PaletteMenu({
         }
       ) }),
       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-[var(--text-placeholder)]", children: heading }),
+        heading && /* @__PURE__ */ jsx(MenuHeading, { children: heading }),
         palettes.map((p) => {
           const ts = p[mode];
           const swatches = [ts.bgPage, ts.brand, ts.moneyIncome, ts.moneyExpense, ts.moneyNet];
@@ -75,7 +78,7 @@ function PaletteMenu({
                     },
                     i
                   )) }),
-                  /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col text-left", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col text-start", children: [
                     /* @__PURE__ */ jsx("span", { className: "truncate", children: p.name }),
                     /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-[var(--text-placeholder)]", children: p.blurb })
                   ] })
@@ -93,7 +96,8 @@ function LanguageMenu({
   options,
   current,
   onChange,
-  ariaLabel
+  ariaLabel,
+  heading
 }) {
   const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { language: ariaLabel });
   const active = options.find((o) => o.code === current);
@@ -117,33 +121,36 @@ function LanguageMenu({
           ) : /* @__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-[var(--text-secondary)]" })
-            ]
-          }
-        ) }, lang.code);
-      }) })
+      children: (close) => /* @__PURE__ */ jsxs("ul", { className: "py-1", children: [
+        heading && /* @__PURE__ */ jsx(MenuHeading, { children: heading }),
+        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-[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\";\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":"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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. `text-start`, so a label that\n *  wraps aligns to the reading edge in RTL too. */\nexport const TOPBAR_MENU_ITEM_CLASS =\n  \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\";\n\n/** The small uppercase heading row the top-bar menus share (`heading`). */\nfunction MenuHeading({ children }: { children: string }) {\n  return (\n    <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n      {children}\n    </li>\n  );\n}\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 && <MenuHeading>{heading}</MenuHeading>}\n          {palettes.map((p) => {\n            const ts = p[mode];\n            const swatches = [ts.bgPage, ts.brand, ts.moneyIncome, ts.moneyExpense, ts.moneyNet];\n            return (\n              <li key={p.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onSelect(p.id);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"flex shrink-0 gap-0.5\">\n                      {/* Deliberately a neutral at 10% and not a token: this hairline\n                          sits on an ARBITRARY preset colour, so it has to read against\n                          whatever that preset paints, which no themed border does. */}\n                      {swatches.map((c, i) => (\n                        <span\n                          key={i}\n                          className=\"size-3.5 rounded-sm ring-1 ring-inset ring-black/10 dark:ring-white/10\"\n                          style={{ background: c }}\n                        />\n                      ))}\n                    </span>\n                    <span className=\"flex min-w-0 flex-col text-start\">\n                      <span className=\"truncate\">{p.name}</span>\n                      <span className=\"truncate text-[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  heading,\n}: {\n  options: LanguageOption[];\n  current: string | undefined;\n  onChange: (code: string) => void;\n  /** Default: `topBar.language` from the {@link UiKitProvider}, else English. */\n  ariaLabel?: string;\n  /** Optional small heading row above the list — as on `TopBarActionMenu`,\n   *  `OptionSwitcherMenu` and `PaletteMenu`. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { language: ariaLabel });\n  const active = options.find((o) => o.code === current);\n  return (\n    <HoverMenu\n      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          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {options.map((lang) => {\n            const isActive = lang.code === current;\n            return (\n              <li key={lang.code}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onChange(lang.code);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex items-center gap-2\">\n                    <span\n                      aria-hidden\n                      className={`fi fi-${lang.country} inline-block h-[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":"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","names":[]}

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

@@ -1,4 +1,10 @@
-/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var. */
+/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var.
+ *
+ *  Wraps in both directions, the way `strokeDash` does: JS `%` keeps the sign,
+ *  so `-1 % 9` is `-1` and the plain formula named `--chart-0`, a token that does not
+ *  exist — a series with no stroke at all. A fractional index is truncated, and one
+ *  that is not a number (NaN, ±Infinity — an `indexOf` miss divided by something)
+ *  takes the first colour rather than `var(--chart-NaN)`. */
 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). */

package/dist/theme/chart-palette.js

@@ -2,7 +2,8 @@
 import { contrast, parseHex as parseRgbHex } from "./color.js";
 const PALETTE_SIZE = 9;
 function paletteFor(index) {
-  return `var(--chart-${index % PALETTE_SIZE + 1})`;
+  const i = Number.isFinite(index) ? Math.trunc(index) : 0;
+  return `var(--chart-${(i % PALETTE_SIZE + PALETTE_SIZE) % PALETTE_SIZE + 1})`;
 }
 const CHART_COLORS = {
   income: "var(--money-income)",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/chart-palette.ts"],"sourcesContent":["// Chart colour system. Single source of truth lives in the design tokens\n// (:root / .dark in tokens.css): brand = indigo, money = teal/amber/purple,\n// chart-1..9 = Paul Tol \"Muted\" (CVD-safe across protan/deutan/tritan).\n// Returning CSS vars here makes every Recharts series theme-aware for free — the\n// SVG fill/stroke resolves --chart-N against the current light/dark token set.\n\nimport { contrast, parseHex as parseRgbHex } from \"./color\";\n\nconst PALETTE_SIZE = 9;\n\n/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var. */\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":[]}
+{"version":3,"sources":["../../src/theme/chart-palette.ts"],"sourcesContent":["// Chart colour system. Single source of truth lives in the design tokens\n// (:root / .dark in tokens.css): brand = indigo, money = teal/amber/purple,\n// chart-1..9 = Paul Tol \"Muted\" (CVD-safe across protan/deutan/tritan).\n// Returning CSS vars here makes every Recharts series theme-aware for free — the\n// SVG fill/stroke resolves --chart-N against the current light/dark token set.\n\nimport { contrast, parseHex as parseRgbHex } from \"./color\";\n\nconst PALETTE_SIZE = 9;\n\n/** CVD-safe categorical colour for series `index`, as a theme-aware CSS var.\n *\n *  Wraps in both directions, the way `strokeDash` does: JS `%` keeps the sign,\n *  so `-1 % 9` is `-1` and the plain formula named `--chart-0`, a token that does not\n *  exist — a series with no stroke at all. A fractional index is truncated, and one\n *  that is not a number (NaN, ±Infinity — an `indexOf` miss divided by something)\n *  takes the first colour rather than `var(--chart-NaN)`. */\nexport function paletteFor(index: number): string {\n  const i = Number.isFinite(index) ? Math.trunc(index) : 0;\n  return `var(--chart-${(((i % PALETTE_SIZE) + PALETTE_SIZE) % PALETTE_SIZE) + 1})`;\n}\n\n/** Semantic money colours, theme-aware via tokens. Pair with +/- and arrow\n    cues at the call site so colour is never the only signal (CVD). */\nexport const CHART_COLORS = {\n  income: \"var(--money-income)\",\n  expense: \"var(--money-expense)\",\n  net: \"var(--money-net)\",\n  assigned: \"var(--brand)\",\n  activity: \"var(--money-expense)\",\n} as const;\n\n// ── Raw hex stops, by theme ────────────────────────────────────────────────\n// The heatmaps interpolate colours in JS (CSS vars can't be lerped), so they\n// need concrete hex per theme — i.e. the same colours DEFAULT_PRESET already\n// holds, written down a second time.\n//\n// They are duplicated rather than imported because these two objects are the whole\n// of the `@eifi1/ui-kit/chart` subpath's colour layer, and importing the preset bank\n// would pull every preset's full token set into that chunk to read two of them. What\n// keeps the copies together is `chart-palette.test.ts` — \"has not drifted from\n// DEFAULT_PRESET\" — which is not optional: they HAD drifted, five of the six light\n// heat stops, and the light `neutral` was still Tailwind's slate-100, a cool grey on\n// the warm cream page this theme has used since #328.\nexport const PALETTE_HEX = {\n  light: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n  dark: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n} as const;\n\n/** A heatmap's interpolation stops for one theme. Open string fields so any\n    palette preset (not just the built-in default) can supply its own stops. */\nexport interface HeatStops {\n  neutral: string;\n  under: string;\n  over: string;\n  seqLow: string;\n  seqHigh: string;\n  empty: string;\n}\n\n/** Diverging (variance: under←0→over) and sequential (spending intensity)\n    heatmap stops, per theme. Teal = under/good, amber = over/spend = bad. */\nexport const HEATMAP_HEX = {\n  light: {\n    neutral: \"#f1e7d2\", // the cream surface itself, not a cool grey\n    under: \"#0b6650\", // DEFAULT_PRESET.light.moneyIncome\n    over: \"#9c6418\", // DEFAULT_PRESET.light.moneyExpense, warmed to the page\n    seqLow: \"#f6ecd0\",\n    seqHigh: \"#9c6418\",\n    empty: \"rgba(148,163,184,0.14)\",\n  },\n  dark: {\n    neutral: \"#363a5a\", // one step above --border on the indigo-noir surface\n    under: \"#22c3b6\", // DEFAULT_PRESET.dark.moneyIncome\n    // Brighter than dark.moneyExpense (#e4b035) on purpose: a gradient endpoint is\n    // meant to be the loudest thing in its scale, and it is a fill, not a figure.\n    over: \"#fbbf24\",\n    seqLow: \"#3a2c14\", // dim amber, sits just above the page\n    seqHigh: \"#fbbf24\",\n    empty: \"rgba(148,163,184,0.10)\",\n  },\n} as const;\n\n/** Linear interpolate two #rrggbb hexes; `t` in [0,1]. Returns #rrggbb. */\nexport function lerpHex(a: string, b: string, t: number): string {\n  const pa = parseHex(a) ?? UNREADABLE;\n  const pb = parseHex(b) ?? UNREADABLE;\n  const c = (i: number) => Math.round(pa[i] + (pb[i] - pa[i]) * clamp01(t));\n  return `#${[c(0), c(1), c(2)].map((v) => v.toString(16).padStart(2, \"0\")).join(\"\")}`;\n}\n\n/** The two inks a cell/treemap label can be set in. Near-black and near-white rather\n    than #000/#fff: at full black-on-full-white the label stops looking like part of the\n    same type system as the rest of the page. */\nconst INK_DARK = \"#1a1a1a\";\nconst INK_LIGHT = \"#f8fafc\";\n\n/** Pick a legible text colour (near-black / near-white) for a solid hex fill, by\n    MEASURING both against it and keeping the one that wins.\n\n    This used to flip on Rec.601 luma > 0.6, which is a brightness heuristic and not a\n    contrast measure — the two disagree on six of the eighteen default chart hues, a\n    third of the ramp, and on each of those the label got the worse of the two inks.\n    `#44aa99` is the plainest case: luma calls it dark, so it took white, which measures\n    2.69:1 on it; near-black measures 6.18:1. keksdose measured this too and forked the\n    function locally for its treemap, leaving its other two call sites on this one.\n\n    A fill this cannot read gets `currentColor` — inherit, i.e. whatever the\n    surrounding text already uses. That is the only answer that is right on both\n    themes, because an unreadable fill is usually a translucent one (`HEATMAP_HEX.*\n    .empty` is an `rgba()` string, and the variance heatmap does pass it here for any\n    category with zero assigned and positive activity — a refund). Picking a constant\n    instead is what produced the earlier bug: the unparsed fill fell through to the\n    light ink, near-white on a near-white cell, and the figure was invisible. */\nexport function textOn(hex: string): string {\n  const rgb = parseRgbHex(hex);\n  if (!rgb) return \"currentColor\";\n  // Ties go to the dark ink: at equal measured contrast it is the one that keeps a\n  // small label looking like type rather than like a glow.\n  return contrast(rgb, INK_DARK) >= contrast(rgb, INK_LIGHT) ? INK_DARK : INK_LIGHT;\n}\n\n/** Mid-grey, for a stop {@link lerpHex} has to interpolate but cannot read. It has\n *  to return SOME valid colour, and a grey is the one that misleads least. */\nconst UNREADABLE: [number, number, number] = [0x80, 0x80, 0x80];\n\n/**\n * `#rgb` or `#rrggbb` to components, or **null** when it is neither.\n *\n * A tuple-shaped shim over `color.ts`'s parser, which is the same function and is\n * already the one `contrast` validates with — so {@link lerpHex} and {@link textOn}\n * cannot disagree about what counts as a colour.\n *\n * The **null** is the whole point of it. This used to `parseInt` whatever it was given\n * and hand the NaNs on, and both callers propagated them silently: {@link lerpHex}\n * produced the literal string `\"#nannannan\"`, and {@link textOn} fell through to the\n * LIGHT label colour.\n *\n * That is not hypothetical — a non-hex value ships in this very module.\n * `HEATMAP_HEX.*.empty` is an `rgba(…)` string, and the variance heatmap paints a\n * figure on an `empty` cell whenever a category has zero assigned and positive\n * activity (a refund). On the light theme the cell is near-white and the label came\n * back near-white: the number was there, and unreadable.\n */\nfunction parseHex(hex: string): [number, number, number] | null {\n  const rgb = parseRgbHex(hex);\n  return rgb ? [rgb.r, rgb.g, rgb.b] : null;\n}\n\nfunction clamp01(t: number): number {\n  return t < 0 ? 0 : t > 1 ? 1 : t;\n}\n"],"mappings":";AAMA,SAAS,UAAU,YAAY,mBAAmB;AAElD,MAAM,eAAe;AASd,SAAS,WAAW,OAAuB;AAChD,QAAM,IAAI,OAAO,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI;AACvD,SAAO,gBAAkB,IAAI,eAAgB,gBAAgB,eAAgB,CAAC;AAChF;AAIO,MAAM,eAAe;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,KAAK;AAAA,EACL,UAAU;AAAA,EACV,UAAU;AACZ;AAcO,MAAM,cAAc;AAAA,EACzB,OAAO,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAAA,EACzG,MAAM,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAC1G;AAeO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,IACL,SAAS;AAAA;AAAA,IACT,OAAO;AAAA;AAAA,IACP,MAAM;AAAA;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA;AAAA,IACT,OAAO;AAAA;AAAA;AAAA;AAAA,IAGP,MAAM;AAAA,IACN,QAAQ;AAAA;AAAA,IACR,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AACF;AAGO,SAAS,QAAQ,GAAW,GAAW,GAAmB;AAC/D,QAAM,KAAK,SAAS,CAAC,KAAK;AAC1B,QAAM,KAAK,SAAS,CAAC,KAAK;AAC1B,QAAM,IAAI,CAAC,MAAc,KAAK,MAAM,GAAG,CAAC,KAAK,GAAG,CAAC,IAAI,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC;AACxE,SAAO,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;AACpF;AAKA,MAAM,WAAW;AACjB,MAAM,YAAY;AAmBX,SAAS,OAAO,KAAqB;AAC1C,QAAM,MAAM,YAAY,GAAG;AAC3B,MAAI,CAAC,IAAK,QAAO;AAGjB,SAAO,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK,SAAS,IAAI,WAAW;AAC1E;AAIA,MAAM,aAAuC,CAAC,KAAM,KAAM,GAAI;AAoB9D,SAAS,SAAS,KAA8C;AAC9D,QAAM,MAAM,YAAY,GAAG;AAC3B,SAAO,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,IAAI;AACvC;AAEA,SAAS,QAAQ,GAAmB;AAClC,SAAO,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI;AACjC;","names":[]}

package/dist/tour/tour.d.ts

@@ -1,7 +1,12 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-type TourPlacement = "top" | "right" | "bottom" | "left" | "center";
+/**
+ * `start`/`end` follow the reading direction (`end` is the right side in LTR and the
+ * left side in RTL) and are what a translated app wants. `left`/`right` stay physical
+ * for the steps that genuinely mean a screen side.
+ */
+type TourPlacement = "top" | "right" | "bottom" | "left" | "start" | "end" | "center";
 interface TourStep {
     /** CSS selector for the element to spotlight. Omit for a centered step
      *  (welcome/finish). If the target isn't found/visible, the step centers. */
@@ -14,13 +19,14 @@ interface TourStep {
     padding?: number;
     /** Where the card sits relative to the target. Omit for auto placement
      *  (below → above → centered). "center" ignores the target and centers on
-     *  screen. An explicit side flips to the opposite side if it would overflow,
-     *  then clamps into the viewport. */
+     *  screen. "start"/"end" are the logical sides and flip in RTL; "left"/"right"
+     *  are physical. An explicit side flips to the opposite side if it would
+     *  overflow, then clamps into the viewport. */
     placement?: TourPlacement;
     /** Advance only when the user clicks the spotlighted target itself (not the
      *  card's Next button). Requires `target`: the real control's own handler runs
-     *  first, then the tour steps forward on a microtask. The overlay stays
-     *  click-through to the target. */
+     *  first, then the tour steps forward on a microtask. The spotlight hole stays
+     *  click-through to the target; the rest of the page does not. */
     awaitClick?: boolean;
     /** Runs before the step is shown — e.g. navigate to a route, open a panel.
      *  May be async; the step waits for it, then locates the target. */

package/dist/tour/tour.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
   useCallback,
@@ -14,6 +14,7 @@ import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { Button } from "../components/ui.js";
 import { useFocusTrap } from "../hooks/use-focus-trap.js";
+import { dirOf, horizontalStep } from "../lib/direction.js";
 const DEFAULT_TOUR_LABELS = {
   next: "Next",
   back: "Back",
@@ -127,6 +128,8 @@ function TourOverlay({
   const isLast = index === steps.length - 1;
   const [rect, setRect] = useState(null);
   const [ready, setReady] = useState(false);
+  const [dir, setDir] = useState(() => dirOf(null));
+  const rootRef = useRef(null);
   useEffect(() => {
     let cancelled = false;
     let raf = 0;
@@ -136,6 +139,7 @@ function TourOverlay({
       await step.beforeStep?.();
       if (cancelled) return;
       if (!step.target) {
+        setDir(dirOf(null));
         setReady(true);
         return;
       }
@@ -147,11 +151,15 @@ function TourOverlay({
           el.scrollIntoView({ block: "center", behavior: "smooth" });
           const r = el.getBoundingClientRect();
           setRect({ top: r.top, left: r.left, width: r.width, height: r.height });
+          setDir(dirOf(el));
           setReady(true);
           return;
         }
         if (tries++ < 45) raf = requestAnimationFrame(find);
-        else setReady(true);
+        else {
+          setDir(dirOf(null));
+          setReady(true);
+        }
       };
       find();
     })();
@@ -191,14 +199,20 @@ function TourOverlay({
     const onKey = (e) => {
       if (e.key === "Escape") {
         onSkip();
-      } else if (e.key === "ArrowRight") {
+        return;
+      }
+      if (e.key === "Enter") {
+        if (step.awaitClick || ownsKey(e.target, "Enter")) return;
         e.preventDefault();
         onNext();
-      } else if (e.key === "Enter") {
-        if (step.awaitClick) return;
+        return;
+      }
+      if (ownsKey(e.target, e.key)) return;
+      const delta = horizontalStep(e.key, rootRef.current);
+      if (delta === 1) {
         e.preventDefault();
         onNext();
-      } else if (e.key === "ArrowLeft") {
+      } else if (delta === -1) {
         if (!isFirst) onPrev();
       }
     };
@@ -209,59 +223,110 @@ function TourOverlay({
   const pad = step.padding ?? 8;
   const spot = rect ? { top: rect.top - pad, left: rect.left - pad, width: rect.width + pad * 2, height: rect.height + pad * 2 } : null;
   return createPortal(
-    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none fixed inset-0 z-[60]", role: "dialog", "aria-modal": "true", "aria-label": step.title, children: [
-      spot ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "pointer-events-none fixed rounded-lg transition-all duration-200 ease-out",
-          style: {
-            top: spot.top,
-            left: spot.left,
-            width: spot.width,
-            height: spot.height,
-            // A two-tone frame, not a single translucent ring.
-            //
-            // The old treatment was `ring-2 ring-white/80` over a 55% scrim, and it
-            // "was barely visible" on the app's blue-tinted surfaces. Two reasons,
-            // and a single ring can't fix either: at 55% the surround stays bright
-            // enough that the un-dimmed hole barely reads AS a hole, and a 80%-white
-            // ring sitting on the edge of a light card is white-on-near-white.
-            //
-            // So: an opaque white band immediately around the target, a dark keyline
-            // outside it, then the scrim. Whatever the target's own colour is, one of
-            // the two bands is always in contrast with it and the other is always in
-            // contrast with the dimmed surround — there is no background that can
-            // swallow both. The blurred layer between them softens the step so the
-            // frame reads as lighting rather than as a pasted-on rectangle.
-            boxShadow: [
-              "0 0 0 3px rgba(255,255,255,0.98)",
-              "0 0 0 5px rgba(15,23,42,0.92)",
-              "0 0 18px 6px rgba(15,23,42,0.45)",
-              "0 0 0 9999px rgba(15,23,42,0.70)"
-            ].join(", ")
-          }
-        }
-      ) : /* @__PURE__ */ jsx("div", { className: "pointer-events-auto fixed inset-0 bg-black/70" }),
-      /* @__PURE__ */ jsx(
-        TourCard,
-        {
-          step,
-          index,
-          total: steps.length,
-          labels,
-          isFirst,
-          isLast,
-          rect: spot,
-          onBack: onPrev,
-          onNext,
-          onSkip
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: rootRef,
+        className: "pointer-events-none fixed inset-0 z-[60]",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": step.title,
+        dir,
+        children: [
+          spot && /* @__PURE__ */ jsx(SpotlightShields, { spot }),
+          spot ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-none fixed rounded-lg transition-all duration-200 ease-out",
+              style: {
+                top: spot.top,
+                left: spot.left,
+                width: spot.width,
+                height: spot.height,
+                // A two-tone frame, not a single translucent ring.
+                //
+                // The old treatment was `ring-2 ring-white/80` over a 55% scrim, and it
+                // "was barely visible" on the app's blue-tinted surfaces. Two reasons,
+                // and a single ring can't fix either: at 55% the surround stays bright
+                // enough that the un-dimmed hole barely reads AS a hole, and a 80%-white
+                // ring sitting on the edge of a light card is white-on-near-white.
+                //
+                // So: an opaque white band immediately around the target, a dark keyline
+                // outside it, then the scrim. Whatever the target's own colour is, one of
+                // the two bands is always in contrast with it and the other is always in
+                // contrast with the dimmed surround — there is no background that can
+                // swallow both. The blurred layer between them softens the step so the
+                // frame reads as lighting rather than as a pasted-on rectangle.
+                boxShadow: [
+                  "0 0 0 3px rgba(255,255,255,0.98)",
+                  "0 0 0 5px rgba(15,23,42,0.92)",
+                  "0 0 18px 6px rgba(15,23,42,0.45)",
+                  "0 0 0 9999px rgba(15,23,42,0.70)"
+                ].join(", ")
+              }
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "pointer-events-auto fixed inset-0 bg-black/70" }),
+          /* @__PURE__ */ jsx(
+            TourCard,
+            {
+              step,
+              index,
+              total: steps.length,
+              labels,
+              isFirst,
+              isLast,
+              rect: spot,
+              dir,
+              onBack: onPrev,
+              onNext,
+              onSkip
+            }
+          )
+        ]
+      }
+    ),
     document.body
   );
 }
-function placeCard(rect, cw, ch, vw, vh, m, placement) {
+function ownsKey(target, key) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  const tag = target.tagName;
+  if (tag === "TEXTAREA" || tag === "SELECT") return true;
+  if (tag === "INPUT") {
+    const type = target.type;
+    return key !== "Enter" || type !== "checkbox";
+  }
+  if (key !== "Enter") return false;
+  return tag === "BUTTON" || tag === "A" && target.hasAttribute("href") || target.getAttribute("role") === "button" || target.getAttribute("role") === "link";
+}
+function SpotlightShields({ spot }) {
+  const shield = "pointer-events-auto fixed";
+  const bottom = spot.top + spot.height;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { "data-tour-shield": "", className: shield, style: { top: 0, left: 0, right: 0, height: Math.max(0, spot.top) } }),
+    /* @__PURE__ */ jsx("div", { "data-tour-shield": "", className: shield, style: { top: bottom, left: 0, right: 0, bottom: 0 } }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-tour-shield": "",
+        className: shield,
+        style: { top: spot.top, left: 0, width: Math.max(0, spot.left), height: spot.height }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-tour-shield": "",
+        className: shield,
+        style: { top: spot.top, left: spot.left + spot.width, right: 0, height: spot.height }
+      }
+    )
+  ] });
+}
+function placeCard(rect, cw, ch, vw, vh, m, placement, dir = "ltr") {
+  if (placement === "start") placement = dir === "rtl" ? "right" : "left";
+  else if (placement === "end") placement = dir === "rtl" ? "left" : "right";
   if (!rect || placement === "center") {
     return { top: Math.max(m, (vh - ch) / 2), left: Math.max(m, (vw - cw) / 2) };
   }
@@ -300,6 +365,7 @@ function TourCard({
   isFirst,
   isLast,
   rect,
+  dir,
   onBack,
   onNext,
   onSkip
@@ -311,9 +377,9 @@ function TourCard({
     const card = ref.current;
     if (!card) return;
     setStyle(
-      placeCard(rect, card.offsetWidth, card.offsetHeight, window.innerWidth, window.innerHeight, 12, step.placement)
+      placeCard(rect, card.offsetWidth, card.offsetHeight, window.innerWidth, window.innerHeight, 12, step.placement, dir)
     );
-  }, [rect, index, step.placement]);
+  }, [rect, index, step.placement, dir]);
   return /* @__PURE__ */ jsxs(
     "div",
     {