@eifi1/ui-kit 0.4.0 → 0.4.1

package/README.md

@@ -113,7 +113,7 @@ a test written after the fix proves only that the fix is self-consistent.
 - **Data table:** `DataTable` (+ `DataTableColumn`, `FilterState`, `SortState`,
   `ServerPagination`), `Pagination`, filter/sort helpers, `DataTableLabels`.
 - **Theme:** `TokenSet`, `PalettePreset`, `DEFAULT_PRESET`, `ALTERNATIVE_PRESETS`,
-  `PALETTES`, `presetById`, `applyTokenSet`, `clearTokenSet`, `TOKEN_VARS`,
+  `PALETTES`, `presetById`, `applyTokenSet`,
   `PALETTE_HEX`, chart-colour helpers, and the store factories.
 - **Shell:** `TopBar`, `AppShell` (+ `AppShellNavItem`), `ThemeToggle`,
   `PaletteMenu`, `LanguageMenu`, `TOPBAR_TRIGGER_CLASS`, `TOPBAR_MENU_ITEM_CLASS`.

package/dist/components/combobox-core.js

@@ -29,7 +29,8 @@ function useComboboxCore({
   const close = () => setOpen(false);
   const placement = useAnchoredPanel(triggerRef, open);
   const rect = placement.rect;
-  useOutsideClick([triggerRef, panelRef], close, open);
+  const isPhone = useMediaQuery(PHONE_QUERY, false);
+  useOutsideClick([triggerRef, panelRef], close, open && !isPhone);
   useEscapeKey(close, open);
   useEffect(() => {
     if (!open) return;

package/dist/components/combobox-core.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/combobox-core.tsx"],"sourcesContent":["import { Fragment, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  Dispatch,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n  SetStateAction,\n} from \"react\";\nimport { Check, Plus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PHONE_QUERY } from \"./ui\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { useAnchoredPanel, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\n\nexport interface ComboOption<V extends string | number> {\n  value: V;\n  label: string;\n  sublabel?: string;\n  icon?: ReactNode;\n  /**\n   * Section this option belongs to. Where a consumer renders it as a heading with the\n   * members indented beneath — {@link InlineEntityCombobox} does — this is a genuine\n   * grouping, not decoration: the name appears once per section rather than trailing\n   * every row in small grey type, which is barely legible on a phone (feedback #136).\n   * Searchable like `sublabel`.\n   */\n  group?: string;\n}\n\nexport interface ComboboxCoreOptions<V extends string | number> {\n  /** Already-loaded options (client-side filtered), also used to resolve labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and race-safe; stale responses are ignored. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag, OR-ed with the internal async state. */\n  loading?: boolean;\n}\n\nexport interface ComboboxCore<V extends string | number> {\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  panelRef: RefObject<HTMLDivElement | null>;\n  inputRef: RefObject<HTMLInputElement | null>;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  query: string;\n  setQuery: Dispatch<SetStateAction<string>>;\n  active: number;\n  setActive: Dispatch<SetStateAction<number>>;\n  results: ComboOption<V>[];\n  busy: boolean;\n  rect: AnchorRect | null;\n  /** Where the dropdown goes, clamped to the visible viewport (feedback #135). */\n  placement: AnchoredPanel;\n  cacheRef: RefObject<Map<V, ComboOption<V>>>;\n  resolve: (v: V) => ComboOption<V> | null;\n}\n\n/**\n * Shared plumbing for the entity pickers: open/query/active state, portalled\n * anchoring + outside-click/Escape dismissal, focus-on-open, a debounced\n * race-safe async (or client-side) result list, and a label cache so a selected\n * value still renders its label after the async list has moved on. The single-\n * and multi-value comboboxes render their triggers on top of this and share\n * {@link ComboboxPanel} for the dropdown.\n */\nexport function useComboboxCore<V extends string | number>({\n  options,\n  loadOptions,\n  loading,\n}: ComboboxCoreOptions<V>): ComboboxCore<V> {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [active, setActive] = useState(0);\n\n  const isAsync = typeof loadOptions === \"function\";\n  const [asyncResults, setAsyncResults] = useState<ComboOption<V>[]>([]);\n  const [asyncLoading, setAsyncLoading] = useState(false);\n  const loadRef = useRef(loadOptions);\n  loadRef.current = loadOptions;\n  const reqId = useRef(0);\n\n  const close = () => setOpen(false);\n  // Placement, not just the anchor rect: the panel has to dodge the on-screen\n  // keyboard its own search box summons (feedback #135).\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  useOutsideClick([triggerRef, panelRef], close, open);\n  useEscapeKey(close, open);\n\n  // Reset the query + focus the search box each time the panel opens.\n  useEffect(() => {\n    if (!open) return;\n    setQuery(\"\");\n    const id = requestAnimationFrame(() => inputRef.current?.focus());\n    return () => cancelAnimationFrame(id);\n  }, [open]);\n\n  // Debounced, race-safe async search (only when loadOptions is provided).\n  useEffect(() => {\n    if (!open || !isAsync) return;\n    const id = ++reqId.current;\n    setAsyncLoading(true);\n    const run = async () => {\n      try {\n        const r = await loadRef.current!(query);\n        if (reqId.current === id) setAsyncResults(r);\n      } finally {\n        if (reqId.current === id) setAsyncLoading(false);\n      }\n    };\n    const t = setTimeout(run, query ? 150 : 0);\n    return () => clearTimeout(t);\n  }, [query, open, isAsync]);\n\n  const clientResults = useMemo(() => {\n    if (isAsync) return [];\n    const src = options ?? [];\n    const q = query.trim().toLowerCase();\n    if (!q) return src;\n    return src.filter(\n      (o) => o.label.toLowerCase().includes(q) || (o.sublabel ?? \"\").toLowerCase().includes(q),\n    );\n  }, [isAsync, options, query]);\n\n  const results = isAsync ? asyncResults : clientResults;\n  const busy = Boolean(loading) || (isAsync && asyncLoading);\n\n  // Accumulate every option we've seen so a selected value can render its label\n  // even after the async list has moved on to other query results.\n  const cacheRef = useRef(new Map<V, ComboOption<V>>());\n  useEffect(() => {\n    for (const o of options ?? []) cacheRef.current.set(o.value, o);\n    for (const o of results) cacheRef.current.set(o.value, o);\n  }, [options, results]);\n  const resolve = (v: V): ComboOption<V> | null =>\n    options?.find((o) => o.value === v) ?? cacheRef.current.get(v) ?? null;\n\n  // Reset the highlighted row whenever the visible set changes.\n  useEffect(() => {\n    setActive(0);\n  }, [query, open]);\n\n  return {\n    triggerRef,\n    panelRef,\n    inputRef,\n    open,\n    setOpen,\n    query,\n    setQuery,\n    active,\n    setActive,\n    results,\n    busy,\n    rect,\n    placement,\n    cacheRef,\n    resolve,\n  };\n}\n\n/**\n * The portalled dropdown (search header + result rows + optional create row)\n * shared by the single- and multi-value comboboxes. Left-aligned to the trigger\n * and sized to its width; `multi` swaps the trailing check for a leading\n * checkbox. `onChoose` decides whether to close (single) or stay open (multi).\n */\nexport function ComboboxPanel<V extends string | number>({\n  core,\n  searchPlaceholder,\n  emptyLabel,\n  multi,\n  isSelected,\n  onChoose,\n  showCreate,\n  onCreate,\n  createContent,\n  sheetTitle,\n  closeLabel,\n}: {\n  core: ComboboxCore<V>;\n  searchPlaceholder?: string;\n  emptyLabel: string;\n  multi?: boolean;\n  isSelected: (v: V) => boolean;\n  onChoose: (o: ComboOption<V>) => void;\n  showCreate: boolean;\n  onCreate: () => void;\n  createContent: ReactNode;\n  /** What the sheet calls itself on a phone — the field's label. Ignored on\n   *  desktop, where the panel sits under the field that already says it. */\n  sheetTitle?: ReactNode;\n  closeLabel?: string;\n}) {\n  const { rect, placement, panelRef, inputRef, query, setQuery, results, busy, active, setActive } =\n    core;\n  // The phone gets a full-screen sheet instead of an anchored panel (live #200).\n  // Same core, same results, same handlers — only the container differs, so the\n  // two presentations cannot drift in what they offer.\n  const isPhone = useMediaQuery(PHONE_QUERY, false);\n  const rowCount = results.length + (showCreate ? 1 : 0);\n\n  const onKeyDown = (e: ReactKeyboardEvent) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((i) => Math.min(i + 1, rowCount - 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((i) => Math.max(i - 1, 0));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (active < results.length) onChoose(results[active]);\n      else if (showCreate) onCreate();\n    }\n  };\n\n  if (!core.open || typeof document === \"undefined\") return null;\n\n  const list = (\n    <ul\n      role=\"listbox\"\n      aria-multiselectable={multi}\n      className={cn(\"min-h-0 flex-1 overflow-y-auto py-1\", isPhone && \"flex-none\")}\n    >\n      {busy && results.length === 0 && (\n        <li className=\"px-3 py-2 text-sm text-slate-500 dark:text-slate-400\">…</li>\n      )}\n      {!busy && results.length === 0 && !showCreate && (\n        <li className=\"px-3 py-2 text-sm text-slate-500 dark:text-slate-400\">{emptyLabel}</li>\n      )}\n      {results.map((o, i) => {\n        const selected = isSelected(o.value);\n        // One heading per group rather than a grey suffix on every row (#136), and\n        // the thing the native <select>'s <optgroup> used to give the account\n        // picker for free (live #200). `results` keeps its source order, so a\n        // boundary is simply \"different from the row above\".\n        const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n        return (\n          // Keyed by group AND value: an option may deliberately appear twice —\n          // Keksdose repeats recently-used categories in a \"Recent\" group at the\n          // top (live #203) — and a bare value key would collide.\n          <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n            {startsGroup && (\n              <li\n                role=\"presentation\"\n                className={cn(\n                  \"font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400\",\n                  isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-[11px] first:pt-1\",\n                )}\n              >\n                {o.group}\n              </li>\n            )}\n          <li role=\"option\" aria-selected={selected}>\n            <button\n              type=\"button\"\n              onMouseDown={(e) => {\n                e.preventDefault();\n                onChoose(o);\n              }}\n              onMouseEnter={() => setActive(i)}\n              className={cn(\n                isPhone\n                  ? SHEET_ROW_CLASS\n                  : \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm\",\n                i === active && !isPhone\n                  ? \"bg-slate-100 dark:bg-slate-800\"\n                  : !isPhone && \"hover:bg-slate-50 dark:hover:bg-slate-800\",\n              )}\n            >\n              {multi && (\n                <span\n                  className={cn(\n                    \"flex size-4 shrink-0 items-center justify-center rounded border\",\n                    selected\n                      ? \"border-slate-900 bg-slate-900 text-white dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900\"\n                      : \"border-slate-300 bg-white dark:border-slate-600 dark:bg-slate-900\",\n                  )}\n                >\n                  {selected && <Check className=\"size-3\" />}\n                </span>\n              )}\n              {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n              <span className=\"min-w-0 flex-1\">\n                <span className=\"block truncate text-slate-900 dark:text-slate-100\">{o.label}</span>\n                {o.sublabel && (\n                  <span className=\"block truncate text-xs text-slate-400 dark:text-slate-500\">\n                    {o.sublabel}\n                  </span>\n                )}\n              </span>\n              {!multi && selected && <Check className=\"size-4 shrink-0 text-sky-600 dark:text-sky-400\" />}\n            </button>\n          </li>\n          </Fragment>\n        );\n      })}\n      {showCreate && (\n        <li role=\"option\" aria-selected={active === results.length}>\n          <button\n            type=\"button\"\n            onMouseDown={(e) => {\n              e.preventDefault();\n              onCreate();\n            }}\n            onMouseEnter={() => setActive(results.length)}\n            className={cn(\n              isPhone\n                ? SHEET_ROW_CLASS\n                : \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm\",\n              \"text-slate-700 dark:text-slate-200\",\n              active === results.length && !isPhone\n                ? \"bg-slate-100 dark:bg-slate-800\"\n                : !isPhone && \"hover:bg-slate-50 dark:hover:bg-slate-800\",\n            )}\n          >\n            <Plus className=\"size-4 shrink-0\" />\n            <span className=\"truncate\">{createContent}</span>\n          </button>\n        </li>\n      )}\n    </ul>\n  );\n\n  if (isPhone) {\n    return (\n      <PickerSheet\n        open\n        onClose={() => core.setOpen(false)}\n        title={sheetTitle}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchPlaceholder}\n        inputRef={inputRef}\n        closeLabel={closeLabel}\n      >\n        <div onKeyDown={onKeyDown}>{list}</div>\n      </PickerSheet>\n    );\n  }\n\n  if (!rect) return null;\n\n  return createPortal(\n    <div\n      ref={panelRef}\n      onKeyDown={onKeyDown}\n      // `placement` keeps the panel inside the region actually on screen: on a phone\n      // the search box below pulls up the keyboard, and a panel pinned under a\n      // low trigger would otherwise sit entirely behind it (feedback #135).\n      style={{\n        position: \"fixed\",\n        top: placement.top,\n        left: rect.left,\n        width: rect.width,\n        minWidth: 220,\n        maxHeight: placement.maxHeight,\n      }}\n      className=\"z-50 flex flex-col rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\"\n    >\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={setQuery}\n        inputRef={inputRef}\n        placeholder={searchPlaceholder}\n      />\n      {/* One list, two containers: the desktop panel and the phone sheet render\n          the same rows through the same handlers (live #200). */}\n      {list}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/combobox-core.tsx"],"sourcesContent":["import { Fragment, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  Dispatch,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n  SetStateAction,\n} from \"react\";\nimport { Check, Plus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DropdownSearchHeader } from \"./dropdown\";\nimport { PickerSheet, SHEET_ROW_CLASS } from \"./picker-sheet\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { PHONE_QUERY } from \"./ui\";\nimport { type AnchorRect } from \"../hooks/use-anchored-rect\";\nimport { useAnchoredPanel, type AnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\n\nexport interface ComboOption<V extends string | number> {\n  value: V;\n  label: string;\n  sublabel?: string;\n  icon?: ReactNode;\n  /**\n   * Section this option belongs to. Where a consumer renders it as a heading with the\n   * members indented beneath — {@link InlineEntityCombobox} does — this is a genuine\n   * grouping, not decoration: the name appears once per section rather than trailing\n   * every row in small grey type, which is barely legible on a phone (feedback #136).\n   * Searchable like `sublabel`.\n   */\n  group?: string;\n}\n\nexport interface ComboboxCoreOptions<V extends string | number> {\n  /** Already-loaded options (client-side filtered), also used to resolve labels. */\n  options?: ComboOption<V>[];\n  /** Async option source, debounced and race-safe; stale responses are ignored. */\n  loadOptions?: (query: string) => Promise<ComboOption<V>[]>;\n  /** External loading flag, OR-ed with the internal async state. */\n  loading?: boolean;\n}\n\nexport interface ComboboxCore<V extends string | number> {\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  panelRef: RefObject<HTMLDivElement | null>;\n  inputRef: RefObject<HTMLInputElement | null>;\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  query: string;\n  setQuery: Dispatch<SetStateAction<string>>;\n  active: number;\n  setActive: Dispatch<SetStateAction<number>>;\n  results: ComboOption<V>[];\n  busy: boolean;\n  rect: AnchorRect | null;\n  /** Where the dropdown goes, clamped to the visible viewport (feedback #135). */\n  placement: AnchoredPanel;\n  cacheRef: RefObject<Map<V, ComboOption<V>>>;\n  resolve: (v: V) => ComboOption<V> | null;\n}\n\n/**\n * Shared plumbing for the entity pickers: open/query/active state, portalled\n * anchoring + outside-click/Escape dismissal, focus-on-open, a debounced\n * race-safe async (or client-side) result list, and a label cache so a selected\n * value still renders its label after the async list has moved on. The single-\n * and multi-value comboboxes render their triggers on top of this and share\n * {@link ComboboxPanel} for the dropdown.\n */\nexport function useComboboxCore<V extends string | number>({\n  options,\n  loadOptions,\n  loading,\n}: ComboboxCoreOptions<V>): ComboboxCore<V> {\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [active, setActive] = useState(0);\n\n  const isAsync = typeof loadOptions === \"function\";\n  const [asyncResults, setAsyncResults] = useState<ComboOption<V>[]>([]);\n  const [asyncLoading, setAsyncLoading] = useState(false);\n  const loadRef = useRef(loadOptions);\n  loadRef.current = loadOptions;\n  const reqId = useRef(0);\n\n  const close = () => setOpen(false);\n  // Placement, not just the anchor rect: the panel has to dodge the on-screen\n  // keyboard its own search box summons (feedback #135).\n  const placement = useAnchoredPanel(triggerRef, open);\n  const rect = placement.rect;\n  // Outside-click dismissal belongs to the ANCHORED panel, and only to it. On a\n  // phone `ComboboxPanel` renders a full-screen `PickerSheet` instead (live #200),\n  // portalled to <body> and carrying its own ways out — the close X, Escape, and\n  // Back through `useOverlayHistory` — so there is no outside left to press.\n  //\n  // Leaving the listener on there was not merely redundant, it was the bug:\n  // `panelRef` is attached to the desktop panel alone, so with the sheet up every\n  // press inside it answered \"outside\". While `useOutsideClick` listened for\n  // `mousedown` the rows survived by accident — they commit on `onMouseDown` too,\n  // and won the race — but `pointerdown` PRECEDES `mousedown`, so the sheet closed\n  // at finger-down and the commit landed on an unmounted tree: a tapped row kept the\n  // old value, and tapping the search box or the X was equally fatal. `PickerSheet`\n  // stops `mousedown` for exactly this reason, but that guard was written for\n  // `useDropdown`'s listener and never covered this hook.\n  const isPhone = useMediaQuery(PHONE_QUERY, false);\n  useOutsideClick([triggerRef, panelRef], close, open && !isPhone);\n  useEscapeKey(close, open);\n\n  // Reset the query + focus the search box each time the panel opens.\n  useEffect(() => {\n    if (!open) return;\n    setQuery(\"\");\n    const id = requestAnimationFrame(() => inputRef.current?.focus());\n    return () => cancelAnimationFrame(id);\n  }, [open]);\n\n  // Debounced, race-safe async search (only when loadOptions is provided).\n  useEffect(() => {\n    if (!open || !isAsync) return;\n    const id = ++reqId.current;\n    setAsyncLoading(true);\n    const run = async () => {\n      try {\n        const r = await loadRef.current!(query);\n        if (reqId.current === id) setAsyncResults(r);\n      } finally {\n        if (reqId.current === id) setAsyncLoading(false);\n      }\n    };\n    const t = setTimeout(run, query ? 150 : 0);\n    return () => clearTimeout(t);\n  }, [query, open, isAsync]);\n\n  const clientResults = useMemo(() => {\n    if (isAsync) return [];\n    const src = options ?? [];\n    const q = query.trim().toLowerCase();\n    if (!q) return src;\n    return src.filter(\n      (o) => o.label.toLowerCase().includes(q) || (o.sublabel ?? \"\").toLowerCase().includes(q),\n    );\n  }, [isAsync, options, query]);\n\n  const results = isAsync ? asyncResults : clientResults;\n  const busy = Boolean(loading) || (isAsync && asyncLoading);\n\n  // Accumulate every option we've seen so a selected value can render its label\n  // even after the async list has moved on to other query results.\n  const cacheRef = useRef(new Map<V, ComboOption<V>>());\n  useEffect(() => {\n    for (const o of options ?? []) cacheRef.current.set(o.value, o);\n    for (const o of results) cacheRef.current.set(o.value, o);\n  }, [options, results]);\n  const resolve = (v: V): ComboOption<V> | null =>\n    options?.find((o) => o.value === v) ?? cacheRef.current.get(v) ?? null;\n\n  // Reset the highlighted row whenever the visible set changes.\n  useEffect(() => {\n    setActive(0);\n  }, [query, open]);\n\n  return {\n    triggerRef,\n    panelRef,\n    inputRef,\n    open,\n    setOpen,\n    query,\n    setQuery,\n    active,\n    setActive,\n    results,\n    busy,\n    rect,\n    placement,\n    cacheRef,\n    resolve,\n  };\n}\n\n/**\n * The portalled dropdown (search header + result rows + optional create row)\n * shared by the single- and multi-value comboboxes. Left-aligned to the trigger\n * and sized to its width; `multi` swaps the trailing check for a leading\n * checkbox. `onChoose` decides whether to close (single) or stay open (multi).\n */\nexport function ComboboxPanel<V extends string | number>({\n  core,\n  searchPlaceholder,\n  emptyLabel,\n  multi,\n  isSelected,\n  onChoose,\n  showCreate,\n  onCreate,\n  createContent,\n  sheetTitle,\n  closeLabel,\n}: {\n  core: ComboboxCore<V>;\n  searchPlaceholder?: string;\n  emptyLabel: string;\n  multi?: boolean;\n  isSelected: (v: V) => boolean;\n  onChoose: (o: ComboOption<V>) => void;\n  showCreate: boolean;\n  onCreate: () => void;\n  createContent: ReactNode;\n  /** What the sheet calls itself on a phone — the field's label. Ignored on\n   *  desktop, where the panel sits under the field that already says it. */\n  sheetTitle?: ReactNode;\n  closeLabel?: string;\n}) {\n  const { rect, placement, panelRef, inputRef, query, setQuery, results, busy, active, setActive } =\n    core;\n  // The phone gets a full-screen sheet instead of an anchored panel (live #200).\n  // Same core, same results, same handlers — only the container differs, so the\n  // two presentations cannot drift in what they offer.\n  const isPhone = useMediaQuery(PHONE_QUERY, false);\n  const rowCount = results.length + (showCreate ? 1 : 0);\n\n  const onKeyDown = (e: ReactKeyboardEvent) => {\n    if (e.key === \"ArrowDown\") {\n      e.preventDefault();\n      setActive((i) => Math.min(i + 1, rowCount - 1));\n    } else if (e.key === \"ArrowUp\") {\n      e.preventDefault();\n      setActive((i) => Math.max(i - 1, 0));\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      if (active < results.length) onChoose(results[active]);\n      else if (showCreate) onCreate();\n    }\n  };\n\n  if (!core.open || typeof document === \"undefined\") return null;\n\n  const list = (\n    <ul\n      role=\"listbox\"\n      aria-multiselectable={multi}\n      className={cn(\"min-h-0 flex-1 overflow-y-auto py-1\", isPhone && \"flex-none\")}\n    >\n      {busy && results.length === 0 && (\n        <li className=\"px-3 py-2 text-sm text-slate-500 dark:text-slate-400\">…</li>\n      )}\n      {!busy && results.length === 0 && !showCreate && (\n        <li className=\"px-3 py-2 text-sm text-slate-500 dark:text-slate-400\">{emptyLabel}</li>\n      )}\n      {results.map((o, i) => {\n        const selected = isSelected(o.value);\n        // One heading per group rather than a grey suffix on every row (#136), and\n        // the thing the native <select>'s <optgroup> used to give the account\n        // picker for free (live #200). `results` keeps its source order, so a\n        // boundary is simply \"different from the row above\".\n        const startsGroup = o.group != null && o.group !== results[i - 1]?.group;\n        return (\n          // Keyed by group AND value: an option may deliberately appear twice —\n          // Keksdose repeats recently-used categories in a \"Recent\" group at the\n          // top (live #203) — and a bare value key would collide.\n          <Fragment key={`${o.group ?? \"\"}|${String(o.value)}`}>\n            {startsGroup && (\n              <li\n                role=\"presentation\"\n                className={cn(\n                  \"font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400\",\n                  isPhone ? \"px-4 pb-1 pt-3 text-xs\" : \"px-3 pb-0.5 pt-2 text-[11px] first:pt-1\",\n                )}\n              >\n                {o.group}\n              </li>\n            )}\n          <li role=\"option\" aria-selected={selected}>\n            <button\n              type=\"button\"\n              onMouseDown={(e) => {\n                e.preventDefault();\n                onChoose(o);\n              }}\n              onMouseEnter={() => setActive(i)}\n              className={cn(\n                isPhone\n                  ? SHEET_ROW_CLASS\n                  : \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm\",\n                i === active && !isPhone\n                  ? \"bg-slate-100 dark:bg-slate-800\"\n                  : !isPhone && \"hover:bg-slate-50 dark:hover:bg-slate-800\",\n              )}\n            >\n              {multi && (\n                <span\n                  className={cn(\n                    \"flex size-4 shrink-0 items-center justify-center rounded border\",\n                    selected\n                      ? \"border-slate-900 bg-slate-900 text-white dark:border-slate-100 dark:bg-slate-100 dark:text-slate-900\"\n                      : \"border-slate-300 bg-white dark:border-slate-600 dark:bg-slate-900\",\n                  )}\n                >\n                  {selected && <Check className=\"size-3\" />}\n                </span>\n              )}\n              {o.icon && <span className=\"shrink-0\">{o.icon}</span>}\n              <span className=\"min-w-0 flex-1\">\n                <span className=\"block truncate text-slate-900 dark:text-slate-100\">{o.label}</span>\n                {o.sublabel && (\n                  <span className=\"block truncate text-xs text-slate-400 dark:text-slate-500\">\n                    {o.sublabel}\n                  </span>\n                )}\n              </span>\n              {!multi && selected && <Check className=\"size-4 shrink-0 text-sky-600 dark:text-sky-400\" />}\n            </button>\n          </li>\n          </Fragment>\n        );\n      })}\n      {showCreate && (\n        <li role=\"option\" aria-selected={active === results.length}>\n          <button\n            type=\"button\"\n            onMouseDown={(e) => {\n              e.preventDefault();\n              onCreate();\n            }}\n            onMouseEnter={() => setActive(results.length)}\n            className={cn(\n              isPhone\n                ? SHEET_ROW_CLASS\n                : \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm\",\n              \"text-slate-700 dark:text-slate-200\",\n              active === results.length && !isPhone\n                ? \"bg-slate-100 dark:bg-slate-800\"\n                : !isPhone && \"hover:bg-slate-50 dark:hover:bg-slate-800\",\n            )}\n          >\n            <Plus className=\"size-4 shrink-0\" />\n            <span className=\"truncate\">{createContent}</span>\n          </button>\n        </li>\n      )}\n    </ul>\n  );\n\n  if (isPhone) {\n    return (\n      <PickerSheet\n        open\n        onClose={() => core.setOpen(false)}\n        title={sheetTitle}\n        query={query}\n        onQueryChange={setQuery}\n        searchPlaceholder={searchPlaceholder}\n        inputRef={inputRef}\n        closeLabel={closeLabel}\n      >\n        <div onKeyDown={onKeyDown}>{list}</div>\n      </PickerSheet>\n    );\n  }\n\n  if (!rect) return null;\n\n  return createPortal(\n    <div\n      ref={panelRef}\n      onKeyDown={onKeyDown}\n      // `placement` keeps the panel inside the region actually on screen: on a phone\n      // the search box below pulls up the keyboard, and a panel pinned under a\n      // low trigger would otherwise sit entirely behind it (feedback #135).\n      style={{\n        position: \"fixed\",\n        top: placement.top,\n        left: rect.left,\n        width: rect.width,\n        minWidth: 220,\n        maxHeight: placement.maxHeight,\n      }}\n      className=\"z-50 flex flex-col rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\"\n    >\n      <DropdownSearchHeader\n        query={query}\n        onQueryChange={setQuery}\n        inputRef={inputRef}\n        placeholder={searchPlaceholder}\n      />\n      {/* One list, two containers: the desktop panel and the phone sheet render\n          the same rows through the same handlers (live #200). */}\n      {list}\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/dropdown.d.ts

@@ -23,9 +23,30 @@ import { ReactNode, RefObject } from 'react';
  * is for the ONE case where a second entry would be wrong: a caller whose panel is
  * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at
  * {@link PHONE_QUERY}, and two entries would cost two Back presses to close one sheet.
+ *
+ * ## One outside-click rule for the whole package
+ *
+ * This hand-rolled a second document listener, on `mousedown`, months after
+ * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to
+ * `pointerdown` for a reason that applies here word for word: on a touch platform
+ * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged
+ * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker
+ * and both comboboxes all dismiss through this. Two copies of one rule is one copy
+ * too many; this now delegates, so the package has a single answer to "what is an
+ * outside press".
+ *
+ * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and
+ * fills the screen, so it has no outside — and being portalled to `<body>`, it is
+ * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read
+ * every tap in it as a press outside and close it at finger-down. The sheet's own
+ * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot
+ * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same
+ * question — "is this caller's panel a sheet?" — and the one caller that answers yes
+ * already says so; they are separate props so a future caller can answer them apart.
  */
-declare function useDropdown<T extends HTMLElement = HTMLDivElement>({ backCloses, }?: {
+declare function useDropdown<T extends HTMLElement = HTMLDivElement>({ backCloses, panelIsSheet, }?: {
     backCloses?: boolean;
+    panelIsSheet?: boolean;
 }): {
     open: boolean;
     setOpen: react.Dispatch<react.SetStateAction<boolean>>;

package/dist/components/dropdown.js

@@ -3,25 +3,19 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Search } from "lucide-react";
 import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
+import { useOutsideClick } from "../hooks/use-dismiss.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { cn } from "../lib/cn.js";
 function useDropdown({
-  backCloses = true
+  backCloses = true,
+  panelIsSheet = !backCloses
 } = {}) {
   const [open, setOpen] = useState(false);
   const wrapperRef = useRef(null);
   const panelRef = useRef(null);
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e) => {
-      const target = e.target;
-      const inside = (wrapperRef.current?.contains(target) ?? false) || (panelRef.current?.contains(target) ?? false);
-      if (!inside) setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
-  useOverlayHistory(open && backCloses, useCallback(() => setOpen(false), []));
+  const close = useCallback(() => setOpen(false), []);
+  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);
+  useOverlayHistory(open && backCloses, close);
   return { open, setOpen, wrapperRef, panelRef };
 }
 function useDropdownSearch() {

package/dist/components/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,\n * CurrencySelect, AmountInput's currency picker, Combobox). Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * {@link PHONE_QUERY}, and two entries would cost two Back presses to close one sheet.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n}: { backCloses?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      const target = e.target as Node;\n      const inside =\n        (wrapperRef.current?.contains(target) ?? false) ||\n        (panelRef.current?.contains(target) ?? false);\n      if (!inside) setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, useCallback(() => setOpen(false), []));\n  return { open, setOpen, wrapperRef, panelRef };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef } = useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef };\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n}: {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n}) {\n  return (\n    <div className=\"flex items-center gap-2 border-b border-slate-100 dark:border-slate-800 px-2 py-1.5\">\n      <Search className=\"size-4 text-slate-400 dark:text-slate-500\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        placeholder={placeholder}\n        className=\"w-full bg-transparent text-sm outline-none placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500\"\n      />\n    </div>\n  );\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `right-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"right\",\n  children,\n}: {\n  header?: ReactNode;\n  empty?: boolean;\n  className?: string;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting. */\n  align?: \"left\" | \"right\";\n  children: ReactNode;\n}) {\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul className=\"overflow-y-auto py-1\">\n        {children}\n        {empty && <li className=\"px-3 py-2 text-sm text-slate-500 dark:text-slate-400\">—</li>}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      <div\n        ref={panelRef}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped exactly as `Popover` clamps: the panel may leave the trigger's edge to\n  // stay on screen, because a list half off the viewport is the bug this exists for.\n  const wanted = align === \"right\" ? rect.right - width : rect.left;\n  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);\n  return createPortal(\n    <div\n      ref={panelRef}\n      style={{ position: \"fixed\", top: anchored.top, left, width, maxHeight: anchored.maxHeight }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,\n * CurrencySelect, AmountInput's currency picker, Combobox). Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * {@link PHONE_QUERY}, and two entries would cost two Back presses to close one sheet.\n *\n * ## One outside-click rule for the whole package\n *\n * This hand-rolled a second document listener, on `mousedown`, months after\n * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to\n * `pointerdown` for a reason that applies here word for word: on a touch platform\n * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged\n * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker\n * and both comboboxes all dismiss through this. Two copies of one rule is one copy\n * too many; this now delegates, so the package has a single answer to \"what is an\n * outside press\".\n *\n * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and\n * fills the screen, so it has no outside — and being portalled to `<body>`, it is\n * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read\n * every tap in it as a press outside and close it at finger-down. The sheet's own\n * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot\n * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same\n * question — \"is this caller's panel a sheet?\" — and the one caller that answers yes\n * already says so; they are separate props so a future caller can answer them apart.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n}: { backCloses?: boolean; panelIsSheet?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const close = useCallback(() => setOpen(false), []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, close);\n  return { open, setOpen, wrapperRef, panelRef };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef } = useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef };\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n}: {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n}) {\n  return (\n    <div className=\"flex items-center gap-2 border-b border-slate-100 dark:border-slate-800 px-2 py-1.5\">\n      <Search className=\"size-4 text-slate-400 dark:text-slate-500\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        placeholder={placeholder}\n        className=\"w-full bg-transparent text-sm outline-none placeholder:text-slate-400 dark:text-slate-100 dark:placeholder:text-slate-500\"\n      />\n    </div>\n  );\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `right-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"right\",\n  children,\n}: {\n  header?: ReactNode;\n  empty?: boolean;\n  className?: string;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting. */\n  align?: \"left\" | \"right\";\n  children: ReactNode;\n}) {\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul className=\"overflow-y-auto py-1\">\n        {children}\n        {empty && <li className=\"px-3 py-2 text-sm text-slate-500 dark:text-slate-400\">—</li>}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      <div\n        ref={panelRef}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped exactly as `Popover` clamps: the panel may leave the trigger's edge to\n  // stay on screen, because a list half off the viewport is the bug this exists for.\n  const wanted = align === \"right\" ? rect.right - width : rect.left;\n  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);\n  return createPortal(\n    <div\n      ref={panelRef}\n      style={{ position: \"fixed\", top: anchored.top, left, width, maxHeight: anchored.maxHeight }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"AAsGI,SAmEA,UAlEE,KADF;AAtGJ,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAEzD,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,UAAU;AA6CZ,SAAS,YAAoD;AAAA,EAClE,aAAa;AAAA,EACb,eAAe,CAAC;AAClB,IAAsD,CAAC,GAAG;AACxD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,aAAa,OAAU,IAAI;AAKjC,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,QAAQ,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAClD,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,QAAQ,CAAC,YAAY;AAGpE,oBAAkB,QAAQ,YAAY,KAAK;AAC3C,SAAO,EAAE,MAAM,SAAS,YAAY,SAAS;AAC/C;AAMO,SAAS,oBAA4D;AAC1E,QAAM,EAAE,MAAM,SAAS,YAAY,SAAS,IAAI,YAAe;AAC/D,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,WAAW,OAAyB,IAAI;AAC9C,YAAU,MAAM;AACd,QAAI,MAAM;AAER,eAAS,EAAE;AACX,4BAAsB,MAAM,SAAS,SAAS,MAAM,CAAC;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AACT,SAAO,EAAE,MAAM,SAAS,YAAY,UAAU,OAAO,UAAU,SAAS;AAC1E;AAGO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACE,qBAAC,SAAI,WAAU,uFACb;AAAA,wBAAC,UAAO,WAAU,6CAA4C;AAAA,IAC9D;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,QAC7C;AAAA,QACA,WAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;AA8BO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AACF,GAaG;AACD,QAAM,WAAW,iBAAiB,aAAa,WAAW,QAAQ,SAAS,CAAC;AAC5E,QAAM,OACJ,iCACG;AAAA;AAAA,IAID,qBAAC,QAAG,WAAU,wBACX;AAAA;AAAA,MACA,SAAS,oBAAC,QAAG,WAAU,wDAAuD,oBAAC;AAAA,OAClF;AAAA,KACF;AAGF,MAAI,CAAC,WAAW;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,KAAM,QAAO;AAGlB,QAAM,SAAS,UAAU,UAAU,KAAK,QAAQ,QAAQ,KAAK;AAC7D,QAAM,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,OAAO,aAAa,QAAQ,CAAC;AACxE,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAO,EAAE,UAAU,SAAS,KAAK,SAAS,KAAK,MAAM,OAAO,WAAW,SAAS,UAAU;AAAA,QAC1F,WAAW;AAAA,UACT;AAAA;AAAA;AAAA,UAGA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX;AACF;AAGA,MAAM,YAA2C,EAAE,SAAS,KAAK;","names":[]}

package/dist/components/file-dropzone.d.ts

@@ -1,14 +1,32 @@
 import * as react from 'react';
 
 /** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml).
- * Validation failures toast `invalidMessage`; the chosen file is echoed with
- * its size, otherwise `emptyLabel` + `hint` describe what to drop. */
-declare function FileDropzone({ file, onFileSelected, accept, isValid, invalidMessage, dropLabel, browseLabel, emptyLabel, hint, }: {
+ * Validation failures surface `invalidMessage` (a `sonner` toast by default, see
+ * `onInvalid`); the chosen file is echoed with its size, otherwise `emptyLabel` +
+ * `hint` describe what to drop. */
+declare function FileDropzone({ file, onFileSelected, accept, isValid, invalidMessage, onInvalid, dropLabel, browseLabel, emptyLabel, hint, }: {
     file: File | null;
     onFileSelected: (file: File) => void;
     accept: string;
     isValid: (file: File) => boolean;
     invalidMessage: string;
+    /**
+     * How to surface {@link invalidMessage}. Defaults to a `sonner` toast — an
+     * optional peer, imported only when a file is actually rejected. Pass your own to
+     * route it somewhere else, or a no-op to silence it. The same escape hatch, for
+     * the same reason, as `useWizard`'s `onValidationFailed`.
+     *
+     * It exists so this module does not import `sonner` STATICALLY. `package.json`
+     * declares that peer `optional`, and the barrel re-exports this file — so a
+     * top-level `import { toast } from "sonner"` made the claim false for everybody:
+     * in an app that installed `@hb/ui` without sonner, `import { Button } from
+     * "@hb/ui"` failed to resolve and `tsc --noEmit` failed on the missing types,
+     * without a FileDropzone anywhere in it. Both current consumers happen to depend
+     * on sonner, which is why nothing broke and why the contradiction survived:
+     * `use-wizard.ts` had already answered the identical question the other way, in
+     * writing, two modules over.
+     */
+    onInvalid?: (file: File) => void;
     dropLabel: string;
     browseLabel: string;
     emptyLabel: string;

package/dist/components/file-dropzone.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { toast } from "sonner";
 import { Upload } from "lucide-react";
 import { Button } from "./ui.js";
 import { cn } from "../lib/cn.js";
@@ -10,6 +9,7 @@ function FileDropzone({
   accept,
   isValid,
   invalidMessage,
+  onInvalid,
   dropLabel,
   browseLabel,
   emptyLabel,
@@ -20,7 +20,11 @@ function FileDropzone({
   const acceptFile = (f) => {
     if (!f) return;
     if (!isValid(f)) {
-      toast.error(invalidMessage);
+      if (onInvalid) {
+        onInvalid(f);
+      } else {
+        void import("sonner").then(({ toast }) => toast.error(invalidMessage));
+      }
       return;
     }
     onFileSelected(f);

package/dist/components/file-dropzone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { toast } from \"sonner\";\nimport { Upload } from \"lucide-react\";\nimport { Button } from \"./ui\";\nimport { cn } from \"../lib/cn\";\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml).\n * Validation failures toast `invalidMessage`; the chosen file is echoed with\n * its size, otherwise `emptyLabel` + `hint` describe what to drop. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  accept,\n  isValid,\n  invalidMessage,\n  dropLabel,\n  browseLabel,\n  emptyLabel,\n  hint,\n}: {\n  file: File | null;\n  onFileSelected: (file: File) => void;\n  accept: string;\n  isValid: (file: File) => boolean;\n  invalidMessage: string;\n  dropLabel: string;\n  browseLabel: string;\n  emptyLabel: string;\n  hint: string;\n}) {\n  const [dragOver, setDragOver] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const acceptFile = (f: File | undefined | null) => {\n    if (!f) return;\n    if (!isValid(f)) {\n      toast.error(invalidMessage);\n      return;\n    }\n    onFileSelected(f);\n  };\n\n  return (\n    <div\n      onDragEnter={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragOver={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        e.dataTransfer.dropEffect = \"copy\";\n        if (!dragOver && e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragLeave={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.currentTarget.contains(e.relatedTarget as Node)) return;\n        setDragOver(false);\n      }}\n      onDrop={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        setDragOver(false);\n        acceptFile(e.dataTransfer.files?.[0]);\n      }}\n      onClick={() => fileInputRef.current?.click()}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          fileInputRef.current?.click();\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={dropLabel}\n      className={cn(\n        \"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n        dragOver\n          ? \"border-slate-500 bg-slate-100 dark:border-slate-300 dark:bg-slate-800\"\n          : \"border-slate-300 hover:border-slate-400 dark:border-slate-700 dark:hover:border-slate-500\",\n      )}\n    >\n      <Upload className=\"size-5 text-slate-500 dark:text-slate-400\" />\n      <div className=\"text-sm text-slate-700 dark:text-slate-200\">\n        {file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n      </div>\n      <div className=\"text-xs text-slate-500 dark:text-slate-400\">\n        {file ? `${Math.round(file.size / 1024)} KB` : hint}\n      </div>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={(e) => {\n          e.stopPropagation();\n          fileInputRef.current?.click();\n        }}\n      >\n        {browseLabel}\n      </Button>\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={accept}\n        onChange={(e) => acceptFile(e.target.files?.[0])}\n        className=\"sr-only\"\n      />\n    </div>\n  );\n}\n"],"mappings":"AA2CI,SAyCE,KAzCF;AA3CJ,SAAS,QAAQ,gBAAgB;AACjC,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,UAAU;AAKZ,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,eAAe,OAAyB,IAAI;AAElD,QAAM,aAAa,CAAC,MAA+B;AACjD,QAAI,CAAC,EAAG;AACR,QAAI,CAAC,QAAQ,CAAC,GAAG;AACf,YAAM,MAAM,cAAc;AAC1B;AAAA,IACF;AACA,mBAAe,CAAC;AAAA,EAClB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,CAAC,MAAM;AAClB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,YAAI,EAAE,aAAa,MAAM,SAAS,OAAO,EAAG,aAAY,IAAI;AAAA,MAC9D;AAAA,MACA,YAAY,CAAC,MAAM;AACjB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,UAAE,aAAa,aAAa;AAC5B,YAAI,CAAC,YAAY,EAAE,aAAa,MAAM,SAAS,OAAO,EAAG,aAAY,IAAI;AAAA,MAC3E;AAAA,MACA,aAAa,CAAC,MAAM;AAClB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,YAAI,EAAE,cAAc,SAAS,EAAE,aAAqB,EAAG;AACvD,oBAAY,KAAK;AAAA,MACnB;AAAA,MACA,QAAQ,CAAC,MAAM;AACb,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,oBAAY,KAAK;AACjB,mBAAW,EAAE,aAAa,QAAQ,CAAC,CAAC;AAAA,MACtC;AAAA,MACA,SAAS,MAAM,aAAa,SAAS,MAAM;AAAA,MAC3C,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,eAAe;AACjB,uBAAa,SAAS,MAAM;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,WACI,0EACA;AAAA,MACN;AAAA,MAEA;AAAA,4BAAC,UAAO,WAAU,6CAA4C;AAAA,QAC9D,oBAAC,SAAI,WAAU,8CACZ,iBAAO,oBAAC,UAAK,WAAU,eAAe,eAAK,MAAK,IAAU,YAC7D;AAAA,QACA,oBAAC,SAAI,WAAU,8CACZ,iBAAO,GAAG,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,QAAQ,MACjD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,SAAS,CAAC,MAAM;AACd,gBAAE,gBAAgB;AAClB,2BAAa,SAAS,MAAM;AAAA,YAC9B;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL;AAAA,YACA,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,QAAQ,CAAC,CAAC;AAAA,YAC/C,WAAU;AAAA;AAAA,QACZ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { Upload } from \"lucide-react\";\nimport { Button } from \"./ui\";\nimport { cn } from \"../lib/cn\";\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml).\n * Validation failures surface `invalidMessage` (a `sonner` toast by default, see\n * `onInvalid`); the chosen file is echoed with its size, otherwise `emptyLabel` +\n * `hint` describe what to drop. */\nexport function FileDropzone({\n  file,\n  onFileSelected,\n  accept,\n  isValid,\n  invalidMessage,\n  onInvalid,\n  dropLabel,\n  browseLabel,\n  emptyLabel,\n  hint,\n}: {\n  file: File | null;\n  onFileSelected: (file: File) => void;\n  accept: string;\n  isValid: (file: File) => boolean;\n  invalidMessage: string;\n  /**\n   * How to surface {@link invalidMessage}. Defaults to a `sonner` toast — an\n   * optional peer, imported only when a file is actually rejected. Pass your own to\n   * route it somewhere else, or a no-op to silence it. The same escape hatch, for\n   * the same reason, as `useWizard`'s `onValidationFailed`.\n   *\n   * It exists so this module does not import `sonner` STATICALLY. `package.json`\n   * declares that peer `optional`, and the barrel re-exports this file — so a\n   * top-level `import { toast } from \"sonner\"` made the claim false for everybody:\n   * in an app that installed `@hb/ui` without sonner, `import { Button } from\n   * \"@hb/ui\"` failed to resolve and `tsc --noEmit` failed on the missing types,\n   * without a FileDropzone anywhere in it. Both current consumers happen to depend\n   * on sonner, which is why nothing broke and why the contradiction survived:\n   * `use-wizard.ts` had already answered the identical question the other way, in\n   * writing, two modules over.\n   */\n  onInvalid?: (file: File) => void;\n  dropLabel: string;\n  browseLabel: string;\n  emptyLabel: string;\n  hint: string;\n}) {\n  const [dragOver, setDragOver] = useState(false);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n\n  const acceptFile = (f: File | undefined | null) => {\n    if (!f) return;\n    if (!isValid(f)) {\n      if (onInvalid) {\n        onInvalid(f);\n      } else {\n        // sonner is an optional peer: imported here, on the failure path only, so an\n        // app that never trips this never has to install it. Not awaited — nothing\n        // downstream depends on the toast having appeared, and the handlers that\n        // reach this are DOM events.\n        void import(\"sonner\").then(({ toast }) => toast.error(invalidMessage));\n      }\n      return;\n    }\n    onFileSelected(f);\n  };\n\n  return (\n    <div\n      onDragEnter={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragOver={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        e.dataTransfer.dropEffect = \"copy\";\n        if (!dragOver && e.dataTransfer.types.includes(\"Files\")) setDragOver(true);\n      }}\n      onDragLeave={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (e.currentTarget.contains(e.relatedTarget as Node)) return;\n        setDragOver(false);\n      }}\n      onDrop={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        setDragOver(false);\n        acceptFile(e.dataTransfer.files?.[0]);\n      }}\n      onClick={() => fileInputRef.current?.click()}\n      onKeyDown={(e) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          fileInputRef.current?.click();\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n      aria-label={dropLabel}\n      className={cn(\n        \"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n        dragOver\n          ? \"border-slate-500 bg-slate-100 dark:border-slate-300 dark:bg-slate-800\"\n          : \"border-slate-300 hover:border-slate-400 dark:border-slate-700 dark:hover:border-slate-500\",\n      )}\n    >\n      <Upload className=\"size-5 text-slate-500 dark:text-slate-400\" />\n      <div className=\"text-sm text-slate-700 dark:text-slate-200\">\n        {file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n      </div>\n      <div className=\"text-xs text-slate-500 dark:text-slate-400\">\n        {file ? `${Math.round(file.size / 1024)} KB` : hint}\n      </div>\n      <Button\n        type=\"button\"\n        variant=\"secondary\"\n        onClick={(e) => {\n          e.stopPropagation();\n          fileInputRef.current?.click();\n        }}\n      >\n        {browseLabel}\n      </Button>\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept={accept}\n        onChange={(e) => acceptFile(e.target.files?.[0])}\n        className=\"sr-only\"\n      />\n    </div>\n  );\n}\n"],"mappings":"AAqEI,SAyCE,KAzCF;AArEJ,SAAS,QAAQ,gBAAgB;AACjC,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,UAAU;AAMZ,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GA2BG;AACD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,eAAe,OAAyB,IAAI;AAElD,QAAM,aAAa,CAAC,MAA+B;AACjD,QAAI,CAAC,EAAG;AACR,QAAI,CAAC,QAAQ,CAAC,GAAG;AACf,UAAI,WAAW;AACb,kBAAU,CAAC;AAAA,MACb,OAAO;AAKL,aAAK,OAAO,QAAQ,EAAE,KAAK,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,cAAc,CAAC;AAAA,MACvE;AACA;AAAA,IACF;AACA,mBAAe,CAAC;AAAA,EAClB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa,CAAC,MAAM;AAClB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,YAAI,EAAE,aAAa,MAAM,SAAS,OAAO,EAAG,aAAY,IAAI;AAAA,MAC9D;AAAA,MACA,YAAY,CAAC,MAAM;AACjB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,UAAE,aAAa,aAAa;AAC5B,YAAI,CAAC,YAAY,EAAE,aAAa,MAAM,SAAS,OAAO,EAAG,aAAY,IAAI;AAAA,MAC3E;AAAA,MACA,aAAa,CAAC,MAAM;AAClB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,YAAI,EAAE,cAAc,SAAS,EAAE,aAAqB,EAAG;AACvD,oBAAY,KAAK;AAAA,MACnB;AAAA,MACA,QAAQ,CAAC,MAAM;AACb,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,oBAAY,KAAK;AACjB,mBAAW,EAAE,aAAa,QAAQ,CAAC,CAAC;AAAA,MACtC;AAAA,MACA,SAAS,MAAM,aAAa,SAAS,MAAM;AAAA,MAC3C,WAAW,CAAC,MAAM;AAChB,YAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,YAAE,eAAe;AACjB,uBAAa,SAAS,MAAM;AAAA,QAC9B;AAAA,MACF;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,WACI,0EACA;AAAA,MACN;AAAA,MAEA;AAAA,4BAAC,UAAO,WAAU,6CAA4C;AAAA,QAC9D,oBAAC,SAAI,WAAU,8CACZ,iBAAO,oBAAC,UAAK,WAAU,eAAe,eAAK,MAAK,IAAU,YAC7D;AAAA,QACA,oBAAC,SAAI,WAAU,8CACZ,iBAAO,GAAG,KAAK,MAAM,KAAK,OAAO,IAAI,CAAC,QAAQ,MACjD;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,SAAS,CAAC,MAAM;AACd,gBAAE,gBAAgB;AAClB,2BAAa,SAAS,MAAM;AAAA,YAC9B;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,MAAK;AAAA,YACL;AAAA,YACA,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,QAAQ,CAAC,CAAC;AAAA,YAC/C,WAAU;AAAA;AAAA,QACZ;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/number-input.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
+import { NumberPadSheetLabels } from './numpad-sheet.js';
 
 interface NumberInputProps {
     value: string;
@@ -13,11 +14,17 @@ interface NumberInputProps {
     label?: ReactNode;
     ariaLabel?: string;
     /** Names for the calculator this field renders — its trigger, and the controls
-     *  inside the popover. English defaults, so a host that does not translate is
-     *  unaffected. */
+     *  inside the popover — and for the numpad sheet it opens on a phone. English
+     *  defaults, so a host that does not translate is unaffected.
+     *
+     *  `pad` is not optional plumbing: this field renders a {@link NumberPadSheet}
+     *  exactly as {@link AmountInput} does, but had no way to pass it anything, so
+     *  the SAME keypad announced itself in German when a money field opened it and in
+     *  English when a goal target did. */
     labels?: {
         calculatorTrigger?: string;
         calculator?: CalculatorButtonLabels;
+        pad?: NumberPadSheetLabels;
     };
     placeholder?: string;
     disabled?: boolean;

package/dist/components/number-input.js

@@ -103,7 +103,16 @@ function NumberInput({
             }
           )
         ] }),
-        showNumpad && /* @__PURE__ */ jsx(NumberPadSheet, { value, onChange, onDone: () => inputRef.current?.blur(), label })
+        showNumpad && /* @__PURE__ */ jsx(
+          NumberPadSheet,
+          {
+            value,
+            onChange,
+            onDone: () => inputRef.current?.blur(),
+            label,
+            labels: labels?.pad
+          }
+        )
       ]
     }
   );

package/dist/components/number-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet } from \"./numpad-sheet\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, sanitizeLive } from \"../lib/calc\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\n\ninterface NumberInputProps {\n  value: string;\n  /** Fired on every keystroke with the raw text (comma → dot, operators kept so\n   * a typed expression survives). */\n  onChange: (value: string) => void;\n  /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur\n   * fields so the save always sees the resolved number, never \"10+5\". */\n  onCommit?: (value: string) => void;\n  label?: ReactNode;\n  ariaLabel?: string;\n  /** Names for the calculator this field renders — its trigger, and the controls\n   *  inside the popover. English defaults, so a host that does not translate is\n   *  unaffected. */\n  labels?: { calculatorTrigger?: string; calculator?: CalculatorButtonLabels };\n  placeholder?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  /** Wrapper class. */\n  className?: string;\n  /** Overrides the input's own styling (merged after the field base). */\n  inputClassName?: string;\n  id?: string;\n  /** Show the calculator-popover trigger (default true). Set false for fields in\n   * an ephemeral close-on-blur editor, where clicking the icon would blur away\n   * and tear the editor down before the popover could open — inline typing\n   * (e.g. \"200+50\" → Enter) still evaluates there. */\n  calculator?: boolean;\n  /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field\n   *  chrome dropped. The currency-free half of the same treatment `AmountInput`\n   *  carries, for a dialog whose whole point is the one number (a budget goal's\n   *  target); not for a field among many, and never for the compact inline\n   *  editors this control also serves. */\n  variant?: \"field\" | \"display\";\n  /** A {@link FieldHint} \"?\" on the label's own line, beside the label rather\n   *  than at the far end of the strip — the far end is where the calculator\n   *  lives, and a hint placed there landed on top of it (steering-design\n   *  feedback #48). */\n  hint?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * A static unit shown at the field's right edge — \"%\", \"kg\", \"km/h\".\n   *\n   * The read-out half of {@link AmountInput}'s currency chip, and it exists for the\n   * same reason that one does: a unit belongs to the FIELD, not to the text, so\n   * typing it is a way to get it into the value. Keksdose had a percentage spelled\n   * three different ways across three screens — `<Input type=\"number\" step=\"0.01\">`\n   * for a loan rate, `step=\"0.1\"` for a tax rate, `inputMode=\"decimal\"` for a VAT\n   * rate — and none of the three showed a \"%\" anywhere near the box, so what the\n   * digits meant was a question the label alone had to answer.\n   *\n   * `aria-hidden`, like the currency read-out: it is a property of the field that\n   * the label already names (\"Interest rate (%)\"), and announcing it again after\n   * every value reads as part of the number.\n   */\n  suffix?: ReactNode;\n}\n\n/**\n * A numeric text field with a built-in calculator: type a calculation straight\n * in (e.g. \"12+5\", evaluated on blur/Enter) or click the trailing calculator\n * icon for a keypad. String `value`/`onChange` contract, mirroring\n * {@link AmountInput} — the currency-free counterpart for budgets, goals,\n * invoice totals and split lines.\n */\nexport function NumberInput({\n  value,\n  onChange,\n  onCommit,\n  label,\n  ariaLabel,\n  labels,\n  placeholder,\n  disabled,\n  autoFocus,\n  className,\n  inputClassName,\n  id,\n  calculator = true,\n  variant = \"field\",\n  hint,\n  invalid,\n  suffix,\n}: NumberInputProps) {\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  const labelled = label !== undefined;\n  // On phones we suppress the OS keyboard (inputMode=\"none\" below) for our own\n  // calculator numpad, so the desktop popover trigger is hidden (feedback #334).\n  const isMobile = useMediaQuery(PHONE_QUERY, false);\n  const asDisplay = isMobile && variant === \"display\";\n  const showCalc = calculator && !disabled && !isMobile;\n  const [focused, setFocused] = useState(false);\n  // On mobile, focusing opens the numpad bottom sheet instead of the native\n  // keyboard (#334); the ref lets its \"Done\" blur → commit + close.\n  const showNumpad = isMobile && !disabled && focused;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const commit = () => {\n    const next = commitExpression(value);\n    if (next !== value) onChange(next);\n    onCommit?.(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") commit();\n  };\n\n  return (\n    <FloatingField\n      className={cn(\"w-full\", className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={hint}\n    >\n      <input\n        ref={inputRef}\n        id={fieldId}\n        aria-label={ariaLabel}\n        type=\"text\"\n        // Mobile: suppress the OS keyboard so the numpad sheet owns entry (field\n        // keeps focus/caret); desktop keeps the native decimal keypad.\n        inputMode={isMobile ? \"none\" : \"decimal\"}\n        autoComplete=\"off\"\n        autoFocus={autoFocus}\n        disabled={disabled}\n        // Display mode has no floating label to feed the blank-placeholder trick,\n        // and an empty borderless figure shows nothing — so it keeps whatever\n        // placeholder the caller gave, falling back to a zero to aim at.\n        placeholder={asDisplay ? (placeholder ?? \"0\") : labelled ? \" \" : placeholder}\n        value={value}\n        onChange={(e) => onChange(sanitizeLive(e.target.value))}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        // The right-padding sits last so it always wins over an inputClassName that\n        // sets its own px. Both trailing controls can be on at once, so the room\n        // they need is reserved together rather than by whichever happens to render:\n        // the calculator is ~36px and a short unit ~24px, and a field that reserved\n        // only one of them would let the digits run under the other.\n        className={cn(\n          asDisplay\n            ? cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\")\n            : labelled\n              ? FLOATING_INPUT_CLASS\n              : FIELD_BASE,\n          inputClassName,\n          showCalc && suffix !== undefined ? \"pr-16\" : showCalc ? \"pr-9\" : suffix !== undefined ? \"pr-8\" : undefined,\n          invalid && FIELD_INVALID,\n        )}\n      />\n      {(showCalc || suffix !== undefined) && (\n        // One flex track for both, so the unit and the calculator sit side by side\n        // instead of stacking on the same corner — AmountInput's arrangement, which\n        // has carried a chip and a calculator together since #430.\n        <div className=\"absolute inset-y-0 right-0 flex items-center\">\n          {showCalc && (\n            <CalculatorButton\n              value={value}\n              onChange={onChange}\n              className=\"self-stretch px-2.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {suffix !== undefined && (\n            <span\n              aria-hidden\n              className=\"pointer-events-none pr-3 text-xs font-medium text-slate-500 dark:text-slate-400\"\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n      {showNumpad && (\n        <NumberPadSheet value={value} onChange={onChange} onDone={() => inputRef.current?.blur()} label={label} />\n      )}\n    </FloatingField>\n  );\n}\n"],"mappings":"AA6HM,cA4CE,YA5CF;AA7HN,SAAS,OAAO,QAAQ,gBAAgB;AAExC,SAAS,wBAAqD;AAC9D,SAAS,sBAAsB;AAC/B,SAAS,YAAY,eAAe,eAAe,sBAAsB,eAAe,mBAAmB;AAC3G,SAAS,UAAU;AACnB,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,qBAAqB;AAmEvB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,UAAU;AAG3B,QAAM,WAAW,cAAc,aAAa,KAAK;AACjD,QAAM,YAAY,YAAY,YAAY;AAC1C,QAAM,WAAW,cAAc,CAAC,YAAY,CAAC;AAC7C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAG5C,QAAM,aAAa,YAAY,CAAC,YAAY;AAC5C,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,iBAAiB,KAAK;AACnC,QAAI,SAAS,MAAO,UAAS,IAAI;AACjC,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,YAAY,CAAC,MAAuC;AACxD,QAAI,EAAE,QAAQ,QAAS,QAAO;AAAA,EAChC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,SAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,cAAY;AAAA,YACZ,MAAK;AAAA,YAGL,WAAW,WAAW,SAAS;AAAA,YAC/B,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAIA,aAAa,YAAa,eAAe,MAAO,WAAW,MAAM;AAAA,YACjE;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAAA,YACtD,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,QAAQ,MAAM;AACZ,qBAAO;AACP,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAc,WAAW;AAAA,YAMzB,WAAW;AAAA,cACT,YACI,GAAG,eAAe,kEAAkE,IACpF,WACE,uBACA;AAAA,cACN;AAAA,cACA,YAAY,WAAW,SAAY,UAAU,WAAW,SAAS,WAAW,SAAY,SAAS;AAAA,cACjG,WAAW;AAAA,YACb;AAAA;AAAA,QACF;AAAA,SACE,YAAY,WAAW;AAAA;AAAA;AAAA,QAIvB,qBAAC,SAAI,WAAU,gDACZ;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,WAAU;AAAA,cACV,WAAW,QAAQ;AAAA,cACnB,QAAQ,QAAQ;AAAA;AAAA,UAClB;AAAA,UAED,WAAW,UACV;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAED,cACC,oBAAC,kBAAe,OAAc,UAAoB,QAAQ,MAAM,SAAS,SAAS,KAAK,GAAG,OAAc;AAAA;AAAA;AAAA,EAE5G;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, sanitizeLive } from \"../lib/calc\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\n\ninterface NumberInputProps {\n  value: string;\n  /** Fired on every keystroke with the raw text (comma → dot, operators kept so\n   * a typed expression survives). */\n  onChange: (value: string) => void;\n  /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur\n   * fields so the save always sees the resolved number, never \"10+5\". */\n  onCommit?: (value: string) => void;\n  label?: ReactNode;\n  ariaLabel?: string;\n  /** Names for the calculator this field renders — its trigger, and the controls\n   *  inside the popover — and for the numpad sheet it opens on a phone. English\n   *  defaults, so a host that does not translate is unaffected.\n   *\n   *  `pad` is not optional plumbing: this field renders a {@link NumberPadSheet}\n   *  exactly as {@link AmountInput} does, but had no way to pass it anything, so\n   *  the SAME keypad announced itself in German when a money field opened it and in\n   *  English when a goal target did. */\n  labels?: {\n    calculatorTrigger?: string;\n    calculator?: CalculatorButtonLabels;\n    pad?: NumberPadSheetLabels;\n  };\n  placeholder?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  /** Wrapper class. */\n  className?: string;\n  /** Overrides the input's own styling (merged after the field base). */\n  inputClassName?: string;\n  id?: string;\n  /** Show the calculator-popover trigger (default true). Set false for fields in\n   * an ephemeral close-on-blur editor, where clicking the icon would blur away\n   * and tear the editor down before the popover could open — inline typing\n   * (e.g. \"200+50\" → Enter) still evaluates there. */\n  calculator?: boolean;\n  /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field\n   *  chrome dropped. The currency-free half of the same treatment `AmountInput`\n   *  carries, for a dialog whose whole point is the one number (a budget goal's\n   *  target); not for a field among many, and never for the compact inline\n   *  editors this control also serves. */\n  variant?: \"field\" | \"display\";\n  /** A {@link FieldHint} \"?\" on the label's own line, beside the label rather\n   *  than at the far end of the strip — the far end is where the calculator\n   *  lives, and a hint placed there landed on top of it (steering-design\n   *  feedback #48). */\n  hint?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * A static unit shown at the field's right edge — \"%\", \"kg\", \"km/h\".\n   *\n   * The read-out half of {@link AmountInput}'s currency chip, and it exists for the\n   * same reason that one does: a unit belongs to the FIELD, not to the text, so\n   * typing it is a way to get it into the value. Keksdose had a percentage spelled\n   * three different ways across three screens — `<Input type=\"number\" step=\"0.01\">`\n   * for a loan rate, `step=\"0.1\"` for a tax rate, `inputMode=\"decimal\"` for a VAT\n   * rate — and none of the three showed a \"%\" anywhere near the box, so what the\n   * digits meant was a question the label alone had to answer.\n   *\n   * `aria-hidden`, like the currency read-out: it is a property of the field that\n   * the label already names (\"Interest rate (%)\"), and announcing it again after\n   * every value reads as part of the number.\n   */\n  suffix?: ReactNode;\n}\n\n/**\n * A numeric text field with a built-in calculator: type a calculation straight\n * in (e.g. \"12+5\", evaluated on blur/Enter) or click the trailing calculator\n * icon for a keypad. String `value`/`onChange` contract, mirroring\n * {@link AmountInput} — the currency-free counterpart for budgets, goals,\n * invoice totals and split lines.\n */\nexport function NumberInput({\n  value,\n  onChange,\n  onCommit,\n  label,\n  ariaLabel,\n  labels,\n  placeholder,\n  disabled,\n  autoFocus,\n  className,\n  inputClassName,\n  id,\n  calculator = true,\n  variant = \"field\",\n  hint,\n  invalid,\n  suffix,\n}: NumberInputProps) {\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  const labelled = label !== undefined;\n  // On phones we suppress the OS keyboard (inputMode=\"none\" below) for our own\n  // calculator numpad, so the desktop popover trigger is hidden (feedback #334).\n  const isMobile = useMediaQuery(PHONE_QUERY, false);\n  const asDisplay = isMobile && variant === \"display\";\n  const showCalc = calculator && !disabled && !isMobile;\n  const [focused, setFocused] = useState(false);\n  // On mobile, focusing opens the numpad bottom sheet instead of the native\n  // keyboard (#334); the ref lets its \"Done\" blur → commit + close.\n  const showNumpad = isMobile && !disabled && focused;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const commit = () => {\n    const next = commitExpression(value);\n    if (next !== value) onChange(next);\n    onCommit?.(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") commit();\n  };\n\n  return (\n    <FloatingField\n      className={cn(\"w-full\", className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={hint}\n    >\n      <input\n        ref={inputRef}\n        id={fieldId}\n        aria-label={ariaLabel}\n        type=\"text\"\n        // Mobile: suppress the OS keyboard so the numpad sheet owns entry (field\n        // keeps focus/caret); desktop keeps the native decimal keypad.\n        inputMode={isMobile ? \"none\" : \"decimal\"}\n        autoComplete=\"off\"\n        autoFocus={autoFocus}\n        disabled={disabled}\n        // Display mode has no floating label to feed the blank-placeholder trick,\n        // and an empty borderless figure shows nothing — so it keeps whatever\n        // placeholder the caller gave, falling back to a zero to aim at.\n        placeholder={asDisplay ? (placeholder ?? \"0\") : labelled ? \" \" : placeholder}\n        value={value}\n        onChange={(e) => onChange(sanitizeLive(e.target.value))}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        // The right-padding sits last so it always wins over an inputClassName that\n        // sets its own px. Both trailing controls can be on at once, so the room\n        // they need is reserved together rather than by whichever happens to render:\n        // the calculator is ~36px and a short unit ~24px, and a field that reserved\n        // only one of them would let the digits run under the other.\n        className={cn(\n          asDisplay\n            ? cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\")\n            : labelled\n              ? FLOATING_INPUT_CLASS\n              : FIELD_BASE,\n          inputClassName,\n          showCalc && suffix !== undefined ? \"pr-16\" : showCalc ? \"pr-9\" : suffix !== undefined ? \"pr-8\" : undefined,\n          invalid && FIELD_INVALID,\n        )}\n      />\n      {(showCalc || suffix !== undefined) && (\n        // One flex track for both, so the unit and the calculator sit side by side\n        // instead of stacking on the same corner — AmountInput's arrangement, which\n        // has carried a chip and a calculator together since #430.\n        <div className=\"absolute inset-y-0 right-0 flex items-center\">\n          {showCalc && (\n            <CalculatorButton\n              value={value}\n              onChange={onChange}\n              className=\"self-stretch px-2.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {suffix !== undefined && (\n            <span\n              aria-hidden\n              className=\"pointer-events-none pr-3 text-xs font-medium text-slate-500 dark:text-slate-400\"\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n      {showNumpad && (\n        <NumberPadSheet\n          value={value}\n          onChange={onChange}\n          onDone={() => inputRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n        />\n      )}\n    </FloatingField>\n  );\n}\n"],"mappings":"AAsIM,cA4CE,YA5CF;AAtIN,SAAS,OAAO,QAAQ,gBAAgB;AAExC,SAAS,wBAAqD;AAC9D,SAAS,sBAAiD;AAC1D,SAAS,YAAY,eAAe,eAAe,sBAAsB,eAAe,mBAAmB;AAC3G,SAAS,UAAU;AACnB,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,qBAAqB;AA4EvB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,UAAU;AAG3B,QAAM,WAAW,cAAc,aAAa,KAAK;AACjD,QAAM,YAAY,YAAY,YAAY;AAC1C,QAAM,WAAW,cAAc,CAAC,YAAY,CAAC;AAC7C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAG5C,QAAM,aAAa,YAAY,CAAC,YAAY;AAC5C,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,iBAAiB,KAAK;AACnC,QAAI,SAAS,MAAO,UAAS,IAAI;AACjC,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,YAAY,CAAC,MAAuC;AACxD,QAAI,EAAE,QAAQ,QAAS,QAAO;AAAA,EAChC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,SAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,cAAY;AAAA,YACZ,MAAK;AAAA,YAGL,WAAW,WAAW,SAAS;AAAA,YAC/B,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAIA,aAAa,YAAa,eAAe,MAAO,WAAW,MAAM;AAAA,YACjE;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAAA,YACtD,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,QAAQ,MAAM;AACZ,qBAAO;AACP,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAc,WAAW;AAAA,YAMzB,WAAW;AAAA,cACT,YACI,GAAG,eAAe,kEAAkE,IACpF,WACE,uBACA;AAAA,cACN;AAAA,cACA,YAAY,WAAW,SAAY,UAAU,WAAW,SAAS,WAAW,SAAY,SAAS;AAAA,cACjG,WAAW;AAAA,YACb;AAAA;AAAA,QACF;AAAA,SACE,YAAY,WAAW;AAAA;AAAA;AAAA,QAIvB,qBAAC,SAAI,WAAU,gDACZ;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,WAAU;AAAA,cACV,WAAW,QAAQ;AAAA,cACnB,QAAQ,QAAQ;AAAA;AAAA,UAClB;AAAA,UAED,WAAW,UACV;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAED,cACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,QAAQ,MAAM,SAAS,SAAS,KAAK;AAAA,YACrC;AAAA,YACA,QAAQ,QAAQ;AAAA;AAAA,QAClB;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/numpad-sheet.d.ts

@@ -19,12 +19,18 @@ import { ReactNode } from 'react';
  * the root keeps the host input focused (caret stays, keyboard stays hidden) as
  * the user taps keys; the buttons' `onClick` still fires.
  */
-/** Screen-reader names for the pad itself and its three non-digit keys. */
+/** Names for the pad itself and its four non-digit keys. The first four are
+ *  screen-reader names; `done` is the one string here that is READ OFF THE SCREEN —
+ *  the brand-filled primary button — and it was a hardcoded English literal while
+ *  its three neighbours each took an override, so a German phone showed "Done"
+ *  among German labels with no prop able to change it. */
 interface NumberPadSheetLabels {
     pad?: string;
     backspace?: string;
     clear?: string;
     equals?: string;
+    /** Visible text on the primary key, not an `aria-label`. */
+    done?: string;
 }
 declare function NumberPadSheet({ value, onChange, onDone, label, labels, }: {
     value: string;
@@ -37,8 +43,9 @@ declare function NumberPadSheet({ value, onChange, onDone, label, labels, }: {
     /** Optional field label, echoed in the sheet header so the user still knows
      * which field they're editing when the sheet covers it. */
     label?: ReactNode;
-    /** Screen-reader names for the pad itself and its three non-digit keys. The
-     * digits and operators need none — their visible glyph IS the name. */
+    /** Names for the pad itself and its four non-digit keys — screen-reader names,
+     * except `done`, which is the visible text on the primary key. The digits and
+     * operators need none: their visible glyph IS the name. */
     labels?: NumberPadSheetLabels;
 }): react.ReactPortal;
 

package/dist/components/numpad-sheet.js

@@ -87,7 +87,7 @@ function NumberPadSheet({
               type: "button",
               onClick: onDone,
               className: cn(PAD_BTN, "col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] active:bg-[var(--brand-hover)]"),
-              children: "Done"
+              children: labels?.done ?? "Done"
             }
           )
         ] })

package/dist/components/numpad-sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/numpad-sheet.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport { Delete } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { evaluateExpression, formatResult, sanitizeLive } from \"../lib/calc\";\n\n/**\n * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to\n * the desktop {@link CalculatorButton} popover, and the replacement for the old\n * under-the-field operator bar (`MathKeys`, feedback #334).\n *\n * A native app (YNAB) can swap the system keyboard for its own keypad; a PWA\n * cannot — but it CAN suppress the OS keyboard with `inputMode=\"none\"` on the\n * host field and paint its own keypad in the freed space. So the host input keeps\n * real focus/caret/selection + the existing value/commit contract, while this\n * sheet drives it: digits + operators + a live `= …` preview, evaluated through\n * the shared {@link evaluateExpression} engine. Desktop is untouched (it keeps the\n * native keyboard and the calculator popover); the host gates this to mobile.\n *\n * Buttons commit through the host's `onChange`/blur, so the sheet is stateless —\n * the field text is the single source of truth. `onPointerDown` preventDefault on\n * the root keeps the host input focused (caret stays, keyboard stays hidden) as\n * the user taps keys; the buttons' `onClick` still fires.\n */\n/** Screen-reader names for the pad itself and its three non-digit keys. */\nexport interface NumberPadSheetLabels {\n  pad?: string;\n  backspace?: string;\n  clear?: string;\n  equals?: string;\n}\n\ntype PadKey =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean }\n  | { kind: \"back\" };\n\n// Insert chars that survive `sanitizeLive` (it keeps `× ÷` and ASCII `+ - * /`\n// but strips the unicode minus `−`, so minus inserts an ASCII \"-\" while showing\n// the nicer glyph). The evaluator normalises `× ÷` back to `* /`.\nconst PAD_KEYS: PadKey[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"-\", accent: true },\n  { kind: \"ins\", label: \".\", ins: \".\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true },\n];\n\nconst PAD_BTN =\n  \"flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none active:scale-[0.97]\";\nconst PAD_DIGIT = \"bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]\";\nconst PAD_ACCENT = \"bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]\";\n\nexport function NumberPadSheet({\n  value,\n  onChange,\n  onDone,\n  label,\n  labels,\n}: {\n  value: string;\n  /** Fired with the raw (sanitised) field text on every key — same contract as\n   * the host field's own `onChange`. */\n  onChange: (value: string) => void;\n  /** Fired on \"Done\": the host blurs the input, which commits (evaluates) and\n   * unmounts the sheet via its existing blur handler. */\n  onDone: () => void;\n  /** Optional field label, echoed in the sheet header so the user still knows\n   * which field they're editing when the sheet covers it. */\n  label?: ReactNode;\n  /** Screen-reader names for the pad itself and its three non-digit keys. The\n   * digits and operators need none — their visible glyph IS the name. */\n  labels?: NumberPadSheetLabels;\n}) {\n  // NO `useBodyScrollLock`, and that is the point of the control (Keksdose live\n  // #317: *\"Background not scrollable when the amount input calculator field is\n  // open\"*).\n  //\n  // This sheet is a KEYBOARD, not a dialog. It is opened by focusing a field and\n  // exists only because a PWA cannot swap the system keyboard for its own — so it\n  // suppresses the OS keyboard with `inputMode=\"none\"` and paints itself in the\n  // freed space. An OS keyboard does not freeze the page behind it; it takes the\n  // bottom of the screen and leaves you free to scroll what is left, which is how\n  // you reach the field you are typing into when the keys cover it.\n  //\n  // Locking here made the page unreachable at exactly the moment it matters most:\n  // correcting a receipt total against the running line sum, where the figure you\n  // are comparing against sits below the keypad. The other four holders of that\n  // hook are all modal — `Modal`, `PickerSheet`, `FullBleedDialog`, the DataTable\n  // row dialog — and they stay locked, because for them the page behind is not\n  // part of the task.\n  //\n  // The pad still does not scroll ITSELF away under a stray drag: the root's\n  // `onPointerDown` preventDefault (below) keeps the host input focused and eats\n  // the gesture on the sheet, so a touch that starts on a key is not a page scroll.\n\n  const result = evaluateExpression(value);\n  const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : \"\";\n\n  const insert = (ch: string) => onChange(sanitizeLive(value + ch));\n  const backspace = () => onChange(value.slice(0, -1));\n  const clearAll = () => onChange(\"\");\n  const equals = () => {\n    if (result !== null) onChange(formatResult(result));\n  };\n\n  const sheet = (\n    <div\n      role=\"group\"\n      aria-label={labels?.pad ?? \"Number pad\"}\n      // Keep the host input focused when tapping the pad: preventDefault on\n      // pointerdown blocks the focus/blur, while the buttons' click still fires.\n      onPointerDown={(e) => e.preventDefault()}\n      className=\"fixed inset-x-0 bottom-0 z-50 border-t border-[var(--border)] bg-[var(--bg-surface)] px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]\"\n      style={{ paddingBottom: \"max(0.5rem, env(safe-area-inset-bottom))\" }}\n    >\n      {/* Header display: which field + the running expression and live result, so\n          the value stays visible even when the sheet covers the field. */}\n      <div className=\"flex items-end justify-between gap-3 px-2 pb-2\">\n        {label != null && (\n          <span className=\"truncate pb-1 text-xs font-medium text-[var(--money-neutral)]\">{label}</span>\n        )}\n        <div className=\"ml-auto min-w-0 text-right\">\n          <div className=\"truncate font-mono text-lg leading-tight text-[var(--text-primary)]\">{value || \"0\"}</div>\n          <div className=\"h-4 font-mono text-xs text-[var(--money-neutral)]\">{preview}</div>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {PAD_KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels?.backspace ?? \"Backspace\"}\n              onClick={backspace}\n              className={cn(PAD_BTN, PAD_ACCENT)}\n            >\n              <Delete className=\"size-5\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.label}\n              onClick={() => insert(key.ins)}\n              className={cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n      </div>\n\n      <div className=\"mt-1.5 grid grid-cols-4 gap-1.5\">\n        <button type=\"button\" aria-label={labels?.clear ?? \"Clear\"} onClick={clearAll} className={cn(PAD_BTN, PAD_ACCENT)}>\n          C\n        </button>\n        <button type=\"button\" aria-label={labels?.equals ?? \"Equals\"} onClick={equals} className={cn(PAD_BTN, PAD_ACCENT)}>\n          =\n        </button>\n        <button\n          type=\"button\"\n          onClick={onDone}\n          className={cn(PAD_BTN, \"col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] active:bg-[var(--brand-hover)]\")}\n        >\n          Done\n        </button>\n      </div>\n    </div>\n  );\n\n  return createPortal(sheet, document.body);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/numpad-sheet.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport { Delete } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { evaluateExpression, formatResult, sanitizeLive } from \"../lib/calc\";\n\n/**\n * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to\n * the desktop {@link CalculatorButton} popover, and the replacement for the old\n * under-the-field operator bar (`MathKeys`, feedback #334).\n *\n * A native app (YNAB) can swap the system keyboard for its own keypad; a PWA\n * cannot — but it CAN suppress the OS keyboard with `inputMode=\"none\"` on the\n * host field and paint its own keypad in the freed space. So the host input keeps\n * real focus/caret/selection + the existing value/commit contract, while this\n * sheet drives it: digits + operators + a live `= …` preview, evaluated through\n * the shared {@link evaluateExpression} engine. Desktop is untouched (it keeps the\n * native keyboard and the calculator popover); the host gates this to mobile.\n *\n * Buttons commit through the host's `onChange`/blur, so the sheet is stateless —\n * the field text is the single source of truth. `onPointerDown` preventDefault on\n * the root keeps the host input focused (caret stays, keyboard stays hidden) as\n * the user taps keys; the buttons' `onClick` still fires.\n */\n/** Names for the pad itself and its four non-digit keys. The first four are\n *  screen-reader names; `done` is the one string here that is READ OFF THE SCREEN —\n *  the brand-filled primary button — and it was a hardcoded English literal while\n *  its three neighbours each took an override, so a German phone showed \"Done\"\n *  among German labels with no prop able to change it. */\nexport interface NumberPadSheetLabels {\n  pad?: string;\n  backspace?: string;\n  clear?: string;\n  equals?: string;\n  /** Visible text on the primary key, not an `aria-label`. */\n  done?: string;\n}\n\ntype PadKey =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean }\n  | { kind: \"back\" };\n\n// Insert chars that survive `sanitizeLive` (it keeps `× ÷` and ASCII `+ - * /`\n// but strips the unicode minus `−`, so minus inserts an ASCII \"-\" while showing\n// the nicer glyph). The evaluator normalises `× ÷` back to `* /`.\nconst PAD_KEYS: PadKey[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"-\", accent: true },\n  { kind: \"ins\", label: \".\", ins: \".\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true },\n];\n\nconst PAD_BTN =\n  \"flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none active:scale-[0.97]\";\nconst PAD_DIGIT = \"bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]\";\nconst PAD_ACCENT = \"bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]\";\n\nexport function NumberPadSheet({\n  value,\n  onChange,\n  onDone,\n  label,\n  labels,\n}: {\n  value: string;\n  /** Fired with the raw (sanitised) field text on every key — same contract as\n   * the host field's own `onChange`. */\n  onChange: (value: string) => void;\n  /** Fired on \"Done\": the host blurs the input, which commits (evaluates) and\n   * unmounts the sheet via its existing blur handler. */\n  onDone: () => void;\n  /** Optional field label, echoed in the sheet header so the user still knows\n   * which field they're editing when the sheet covers it. */\n  label?: ReactNode;\n  /** Names for the pad itself and its four non-digit keys — screen-reader names,\n   * except `done`, which is the visible text on the primary key. The digits and\n   * operators need none: their visible glyph IS the name. */\n  labels?: NumberPadSheetLabels;\n}) {\n  // NO `useBodyScrollLock`, and that is the point of the control (Keksdose live\n  // #317: *\"Background not scrollable when the amount input calculator field is\n  // open\"*).\n  //\n  // This sheet is a KEYBOARD, not a dialog. It is opened by focusing a field and\n  // exists only because a PWA cannot swap the system keyboard for its own — so it\n  // suppresses the OS keyboard with `inputMode=\"none\"` and paints itself in the\n  // freed space. An OS keyboard does not freeze the page behind it; it takes the\n  // bottom of the screen and leaves you free to scroll what is left, which is how\n  // you reach the field you are typing into when the keys cover it.\n  //\n  // Locking here made the page unreachable at exactly the moment it matters most:\n  // correcting a receipt total against the running line sum, where the figure you\n  // are comparing against sits below the keypad. The other four holders of that\n  // hook are all modal — `Modal`, `PickerSheet`, `FullBleedDialog`, the DataTable\n  // row dialog — and they stay locked, because for them the page behind is not\n  // part of the task.\n  //\n  // The pad still does not scroll ITSELF away under a stray drag: the root's\n  // `onPointerDown` preventDefault (below) keeps the host input focused and eats\n  // the gesture on the sheet, so a touch that starts on a key is not a page scroll.\n\n  const result = evaluateExpression(value);\n  const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : \"\";\n\n  const insert = (ch: string) => onChange(sanitizeLive(value + ch));\n  const backspace = () => onChange(value.slice(0, -1));\n  const clearAll = () => onChange(\"\");\n  const equals = () => {\n    if (result !== null) onChange(formatResult(result));\n  };\n\n  const sheet = (\n    <div\n      role=\"group\"\n      aria-label={labels?.pad ?? \"Number pad\"}\n      // Keep the host input focused when tapping the pad: preventDefault on\n      // pointerdown blocks the focus/blur, while the buttons' click still fires.\n      onPointerDown={(e) => e.preventDefault()}\n      className=\"fixed inset-x-0 bottom-0 z-50 border-t border-[var(--border)] bg-[var(--bg-surface)] px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]\"\n      style={{ paddingBottom: \"max(0.5rem, env(safe-area-inset-bottom))\" }}\n    >\n      {/* Header display: which field + the running expression and live result, so\n          the value stays visible even when the sheet covers the field. */}\n      <div className=\"flex items-end justify-between gap-3 px-2 pb-2\">\n        {label != null && (\n          <span className=\"truncate pb-1 text-xs font-medium text-[var(--money-neutral)]\">{label}</span>\n        )}\n        <div className=\"ml-auto min-w-0 text-right\">\n          <div className=\"truncate font-mono text-lg leading-tight text-[var(--text-primary)]\">{value || \"0\"}</div>\n          <div className=\"h-4 font-mono text-xs text-[var(--money-neutral)]\">{preview}</div>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {PAD_KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels?.backspace ?? \"Backspace\"}\n              onClick={backspace}\n              className={cn(PAD_BTN, PAD_ACCENT)}\n            >\n              <Delete className=\"size-5\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.label}\n              onClick={() => insert(key.ins)}\n              className={cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n      </div>\n\n      <div className=\"mt-1.5 grid grid-cols-4 gap-1.5\">\n        <button type=\"button\" aria-label={labels?.clear ?? \"Clear\"} onClick={clearAll} className={cn(PAD_BTN, PAD_ACCENT)}>\n          C\n        </button>\n        <button type=\"button\" aria-label={labels?.equals ?? \"Equals\"} onClick={equals} className={cn(PAD_BTN, PAD_ACCENT)}>\n          =\n        </button>\n        <button\n          type=\"button\"\n          onClick={onDone}\n          className={cn(PAD_BTN, \"col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] active:bg-[var(--brand-hover)]\")}\n        >\n          {labels?.done ?? \"Done\"}\n        </button>\n      </div>\n    </div>\n  );\n\n  return createPortal(sheet, document.body);\n}\n"],"mappings":"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","names":[]}

package/dist/components/user-avatar.d.ts

@@ -1,7 +1,16 @@
 import * as react from 'react';
 
 /** Initials from a display name (first + last) or, failing that, an email —
- *  e.g. "Marcel Eifert" → "ME", "marcel@x.com" → "MA". App-agnostic. */
+ *  e.g. "Marcel Eifert" → "ME", "marcel@x.com" → "MA". App-agnostic.
+ *
+ *  "Failing that" means BLANK, not merely absent. This was `name ?? email ?? "?"`,
+ *  and `??` falls through on null/undefined alone — so an empty or whitespace-only
+ *  display name short-circuited the email it had in hand and landed on the guard
+ *  below, returning "?" for a user whose address says "MA" perfectly well. Keksdose
+ *  cannot reach it (its `display_name` has `min_length=1`), but this is exported as
+ *  app-agnostic, and any consumer whose profile name is optional free text got a wall
+ *  of "?" chips. The guard is what shows the empty case was foreseen; it just
+ *  answered it at the wrong end. */
 declare function avatarInitials(name?: string | null, email?: string | null): string;
 declare const AVATAR_SIZES: {
     readonly sm: "size-7 text-[11px]";

package/dist/components/user-avatar.js

@@ -1,8 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 function avatarInitials(name, email) {
-  const source = (name ?? email ?? "?").trim();
-  if (!source) return "?";
+  const source = [name, email].map((s) => s?.trim()).find(Boolean) ?? "?";
   const parts = source.split(/\s+/).filter(Boolean);
   if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
   return source.slice(0, 2).toUpperCase();

package/dist/components/user-avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/user-avatar.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\n\n/** Initials from a display name (first + last) or, failing that, an email —\n *  e.g. \"Marcel Eifert\" → \"ME\", \"marcel@x.com\" → \"MA\". App-agnostic. */\nexport function avatarInitials(name?: string | null, email?: string | null): string {\n  const source = (name ?? email ?? \"?\").trim();\n  if (!source) return \"?\";\n  const parts = source.split(/\\s+/).filter(Boolean);\n  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();\n  return source.slice(0, 2).toUpperCase();\n}\n\nconst AVATAR_SIZES = {\n  sm: \"size-7 text-[11px]\",\n  md: \"size-8 text-xs\",\n  lg: \"size-12 text-base\",\n} as const;\n\nexport interface UserAvatarProps {\n  name?: string | null;\n  email?: string | null;\n  size?: keyof typeof AVATAR_SIZES;\n  className?: string;\n}\n\n/**\n * A round initials avatar — the common user chip shared across apps (feedback\n * #333). Purely presentational; wrap it in a button for the account menu trigger.\n */\nexport function UserAvatar({ name, email, size = \"md\", className }: UserAvatarProps) {\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-full bg-slate-900 font-semibold text-white dark:bg-slate-100 dark:text-slate-900\",\n        AVATAR_SIZES[size],\n        className,\n      )}\n    >\n      {avatarInitials(name, email)}\n    </span>\n  );\n}\n"],"mappings":"AA+BI;AA/BJ,SAAS,UAAU;AAIZ,SAAS,eAAe,MAAsB,OAA+B;AAClF,QAAM,UAAU,QAAQ,SAAS,KAAK,KAAK;AAC3C,MAAI,CAAC,OAAQ,QAAO;AACpB,QAAM,QAAQ,OAAO,MAAM,KAAK,EAAE,OAAO,OAAO;AAChD,MAAI,MAAM,UAAU,EAAG,SAAQ,MAAM,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,EAAE,CAAC,GAAG,YAAY;AACtE,SAAO,OAAO,MAAM,GAAG,CAAC,EAAE,YAAY;AACxC;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAaO,SAAS,WAAW,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,GAAoB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA,aAAa,IAAI;AAAA,QACjB;AAAA,MACF;AAAA,MAEC,yBAAe,MAAM,KAAK;AAAA;AAAA,EAC7B;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/user-avatar.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\n\n/** Initials from a display name (first + last) or, failing that, an email —\n *  e.g. \"Marcel Eifert\" → \"ME\", \"marcel@x.com\" → \"MA\". App-agnostic.\n *\n *  \"Failing that\" means BLANK, not merely absent. This was `name ?? email ?? \"?\"`,\n *  and `??` falls through on null/undefined alone — so an empty or whitespace-only\n *  display name short-circuited the email it had in hand and landed on the guard\n *  below, returning \"?\" for a user whose address says \"MA\" perfectly well. Keksdose\n *  cannot reach it (its `display_name` has `min_length=1`), but this is exported as\n *  app-agnostic, and any consumer whose profile name is optional free text got a wall\n *  of \"?\" chips. The guard is what shows the empty case was foreseen; it just\n *  answered it at the wrong end. */\nexport function avatarInitials(name?: string | null, email?: string | null): string {\n  const source = [name, email].map((s) => s?.trim()).find(Boolean) ?? \"?\";\n  const parts = source.split(/\\s+/).filter(Boolean);\n  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();\n  return source.slice(0, 2).toUpperCase();\n}\n\nconst AVATAR_SIZES = {\n  sm: \"size-7 text-[11px]\",\n  md: \"size-8 text-xs\",\n  lg: \"size-12 text-base\",\n} as const;\n\nexport interface UserAvatarProps {\n  name?: string | null;\n  email?: string | null;\n  size?: keyof typeof AVATAR_SIZES;\n  className?: string;\n}\n\n/**\n * A round initials avatar — the common user chip shared across apps (feedback\n * #333). Purely presentational; wrap it in a button for the account menu trigger.\n */\nexport function UserAvatar({ name, email, size = \"md\", className }: UserAvatarProps) {\n  return (\n    <span\n      aria-hidden\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-full bg-slate-900 font-semibold text-white dark:bg-slate-100 dark:text-slate-900\",\n        AVATAR_SIZES[size],\n        className,\n      )}\n    >\n      {avatarInitials(name, email)}\n    </span>\n  );\n}\n"],"mappings":"AAuCI;AAvCJ,SAAS,UAAU;AAaZ,SAAS,eAAe,MAAsB,OAA+B;AAClF,QAAM,SAAS,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,KAAK,OAAO,KAAK;AACpE,QAAM,QAAQ,OAAO,MAAM,KAAK,EAAE,OAAO,OAAO;AAChD,MAAI,MAAM,UAAU,EAAG,SAAQ,MAAM,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,EAAE,CAAC,GAAG,YAAY;AACtE,SAAO,OAAO,MAAM,GAAG,CAAC,EAAE,YAAY;AACxC;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAaO,SAAS,WAAW,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,GAAoB;AACnF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA,aAAa,IAAI;AAAA,QACjB;AAAA,MACF;AAAA,MAEC,yBAAe,MAAM,KAAK;AAAA;AAAA,EAC7B;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export { useOverlayHistory } from './hooks/use-overlay-history.js';
 export { OVERLAY_EXIT_MS, useCloseTransition } from './hooks/use-close-transition.js';
 export { RowSwipeOptions, RowSwipeReturn, SwipeStage, useRowSwipe } from './hooks/use-row-swipe.js';
 export { CHART_COLORS, HEATMAP_HEX, HeatStops, PALETTE_HEX, lerpHex, paletteFor, textOn } from './theme/chart-palette.js';
-export { ALTERNATIVE_PRESETS, DEFAULT_PRESET, IMPRINT_PRESET, PALETTES, PalettePreset, TOKEN_VARS, TokenSet, applyTokenSet, clearTokenSet, presetById } from './theme/palette-presets.js';
+export { ALTERNATIVE_PRESETS, DEFAULT_PRESET, IMPRINT_PRESET, PALETTES, PalettePreset, TokenSet, applyTokenSet, presetById } from './theme/palette-presets.js';
 export { ThemeMode, ThemePreference, ThemeState, ThemeStore, applyPersistedTheme, createThemeStore } from './theme/theme-store.js';
 export { PaletteStore, applyPersistedPalette, createPaletteStore } from './theme/palette-store.js';
 export { Button, ButtonVariant, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, EmptyState, FIELD_BASE, FIELD_DISPLAY, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, FLOATING_LABEL_STATIC, FieldChevron, FieldHint, FieldLabel, FloatingField, IconButton, Input, PHONE_QUERY, Select, Spinner, Tabs, TabsProps, Textarea, buttonClasses } from './components/ui.js';

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

@@ -30,10 +30,19 @@ declare const ALTERNATIVE_PRESETS: PalettePreset[];
 declare const IMPRINT_PRESET: PalettePreset;
 declare const PALETTES: PalettePreset[];
 declare function presetById(id: string): PalettePreset;
-declare const TOKEN_VARS: readonly ["--bg-page", "--bg-surface", "--bg-surface-2", "--border", "--text-primary", "--text-secondary", "--text-muted", "--brand", "--brand-hover", "--brand-contrast", "--money-income", "--money-expense", "--money-net", "--money-neutral", "--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5", "--chart-6", "--chart-7", "--chart-8", "--chart-9"];
-/** Write a token set onto an element's inline style as CSS custom properties. */
+/**
+ * Write a token set onto an element's inline style as CSS custom properties.
+ *
+ * This is the only writer, and there is no un-writer: `presetById` falls back to
+ * `DEFAULT_PRESET` and this then writes the full set, so returning to the default
+ * APPLIES it rather than clearing anything. A `clearTokenSet` and the hand-kept
+ * 24-name `TOKEN_VARS` list it looped over used to live here, both exported, both
+ * called by nobody in either consumer — a second copy of these property names with
+ * nothing comparing the two, so adding a token here and forgetting it there would
+ * have been silent and only a dead function would have noticed. The list is gone;
+ * the test beside this asserts instead that every field of a `TokenSet` reaches the
+ * element, which is what that list was standing in for.
+ */
 declare function applyTokenSet(el: HTMLElement, t: TokenSet): void;
-/** Remove all preset overrides so the tokens.css :root/.dark defaults take over. */
-declare function clearTokenSet(el: HTMLElement): void;
 
-export { ALTERNATIVE_PRESETS, DEFAULT_PRESET, IMPRINT_PRESET, PALETTES, type PalettePreset, TOKEN_VARS, type TokenSet, applyTokenSet, clearTokenSet, presetById };
+export { ALTERNATIVE_PRESETS, DEFAULT_PRESET, IMPRINT_PRESET, PALETTES, type PalettePreset, type TokenSet, applyTokenSet, presetById };

package/dist/theme/palette-presets.js

@@ -382,31 +382,6 @@ const PALETTES = [DEFAULT_PRESET, IMPRINT_PRESET];
 function presetById(id) {
   return PALETTES.find((p) => p.id === id) ?? DEFAULT_PRESET;
 }
-const TOKEN_VARS = [
-  "--bg-page",
-  "--bg-surface",
-  "--bg-surface-2",
-  "--border",
-  "--text-primary",
-  "--text-secondary",
-  "--text-muted",
-  "--brand",
-  "--brand-hover",
-  "--brand-contrast",
-  "--money-income",
-  "--money-expense",
-  "--money-net",
-  "--money-neutral",
-  "--chart-1",
-  "--chart-2",
-  "--chart-3",
-  "--chart-4",
-  "--chart-5",
-  "--chart-6",
-  "--chart-7",
-  "--chart-8",
-  "--chart-9"
-];
 function applyTokenSet(el, t) {
   el.style.setProperty("--bg-page", t.bgPage);
   el.style.setProperty("--bg-surface", t.bgSurface);
@@ -424,17 +399,12 @@ function applyTokenSet(el, t) {
   el.style.setProperty("--money-neutral", t.moneyNeutral);
   t.chart.forEach((c, i) => el.style.setProperty(`--chart-${i + 1}`, c));
 }
-function clearTokenSet(el) {
-  for (const v of TOKEN_VARS) el.style.removeProperty(v);
-}
 export {
   ALTERNATIVE_PRESETS,
   DEFAULT_PRESET,
   IMPRINT_PRESET,
   PALETTES,
-  TOKEN_VARS,
   applyTokenSet,
-  clearTokenSet,
   presetById
 };
 //# sourceMappingURL=palette-presets.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/palette-presets.ts"],"sourcesContent":["// Appearance presets — the single source of truth for the \"palette switcher\"\n// (feedback #307). Each preset is a full set of design-token values for BOTH\n// light and dark, covering the page/surface backgrounds, the brand accent, the\n// semantic money trio and the 9-colour categorical chart palette, plus the\n// heatmap stops. A preset is applied at runtime by writing these as CSS custom\n// properties onto <html> (see palette-store.ts), which instantly re-skins every\n// token-driven surface and chart. The two heatmaps and the treemap interpolate\n// concrete hex in JS, so they read the same values from here via the hooks in\n// palette-store.\n//\n// The alternative presets below were designed + accessibility-vetted as a set\n// (each is CVD-safe across protan/deutan/tritan, money is never red/green, and\n// text/background contrast clears WCAG AA on both themes). To promote one to the\n// app-wide default, copy its values into the :root/.dark blocks in tokens.css\n// (the default preset here mirrors those exactly).\n\nimport type { HeatStops } from \"./chart-palette\";\n\nexport interface TokenSet {\n  // Backgrounds & chrome\n  bgPage: string;\n  bgSurface: string;\n  bgSurface2: string;\n  border: string;\n  textPrimary: string;\n  // The two quieter text roles. Derived per preset by blending `textPrimary` toward\n  // that preset's own surfaces until the contrast against the WORST of bgPage /\n  // bgSurface / bgSurface2 hits 7:1 and 4.8:1 — so both clear WCAG AA for normal text\n  // (4.5:1) on every surface they can land on, and both inherit the preset's warmth\n  // instead of importing a cool grey from Tailwind's palette.\n  textSecondary: string;\n  textMuted: string;\n  // Interactive brand accent\n  brand: string;\n  brandHover: string;\n  brandContrast: string;\n  // Semantic money (never red/green — CVD-safe, paired with +/- cues elsewhere)\n  moneyIncome: string;\n  moneyExpense: string;\n  moneyNet: string;\n  moneyNeutral: string;\n  // Categorical chart series (Paul Tol \"Muted\" by default — CVD-safe), exactly 9\n  chart: string[];\n  // Heatmap interpolation stops (variance diverging + spending sequential)\n  heat: HeatStops;\n}\n\nexport interface PalettePreset {\n  id: string;\n  name: string;\n  blurb: string;\n  light: TokenSet;\n  dark: TokenSet;\n}\n\n// The shipped default (feedback #328): SOLAR-DUSK warm light + INDIGO-NOIR deep\n// dark surfaces — the two curated presets the user picked per mode — but with a\n// SINGLE unified brand accent (indigo) across both modes rather than each\n// preset's own accent (the user asked for the brand accent to stay the same).\n// So the light block is Solar Dusk with its teal brand overridden to indigo, and\n// the dark block is Indigo Noir (already indigo). The money trio\n// (income/expense/net) drives the chart bars and stays palette-driven so those\n// semantic colours adapt to each mode's contrast (best practice — feedback #328).\nexport const DEFAULT_PRESET: PalettePreset = {\n  id: \"default\",\n  name: \"Default\",\n  blurb: \"Solar-dusk light · indigo-noir dark\",\n  light: {\n    // Solar Dusk (light) surfaces, with the brand unified to indigo (see above).\n    bgPage: \"#ede3cf\",\n    bgSurface: \"#f6ecd9\",\n    bgSurface2: \"#f3ead6\",\n    border: \"#e2d6bd\",\n    textPrimary: \"#463f33\",\n    textSecondary: \"#50493c\",\n    textMuted: \"#696153\",\n    brand: \"#4f46e5\",\n    brandHover: \"#4338ca\",\n    brandContrast: \"#ffffff\",\n    moneyIncome: \"#0b6650\",\n    moneyExpense: \"#9c6418\",\n    moneyNet: \"#7a4fa3\",\n    moneyNeutral: \"#6b6453\",\n    chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n    heat: {\n      neutral: \"#f1e7d2\",\n      under: \"#0b6650\",\n      over: \"#9c6418\",\n      seqLow: \"#f6ecd0\",\n      seqHigh: \"#9c6418\",\n      empty: \"rgba(148,163,184,0.14)\",\n    },\n  },\n  dark: {\n    // Indigo Noir (dark)\n    bgPage: \"#0e0f1c\",\n    bgSurface: \"#181a2c\",\n    bgSurface2: \"#21243a\",\n    border: \"#2e3252\",\n    textPrimary: \"#e6e8f4\",\n    textSecondary: \"#adafbe\",\n    textMuted: \"#8d90a0\",\n    brand: \"#8b93f8\",\n    brandHover: \"#aab1fb\",\n    brandContrast: \"#16182b\",\n    moneyIncome: \"#22c3b6\",\n    // Amber-400 (#fbbf24) sat at OKLab L 0.84 while every other dark token lives\n    // at 0.68–0.74, so outflows outshouted the inflows they are paired with. Same\n    // hue and chroma, pulled to L 0.785 (dev#434). The heat stops below keep the\n    // brighter amber on purpose: a gradient endpoint is meant to be the loudest\n    // thing in its scale, and it is a fill, not a figure.\n    moneyExpense: \"#e4b035\",\n    moneyNet: \"#b39aef\",\n    moneyNeutral: \"#9aa1bd\",\n    chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n    heat: {\n      neutral: \"#363a5a\",\n      under: \"#22c3b6\",\n      over: \"#fbbf24\",\n      seqLow: \"#3a2c14\",\n      seqHigh: \"#fbbf24\",\n      empty: \"rgba(148,163,184,0.10)\",\n    },\n  },\n};\n\n// Vetted alternatives to preview (CVD-safe, WCAG-AA on both themes).\nexport const ALTERNATIVE_PRESETS: PalettePreset[] = [\n  {\n    id: \"warm-paper\",\n    name: \"Warm Paper\",\n    blurb: \"Cream paper · warm charcoal\",\n    light: {\n      bgPage: \"#ece5d6\",\n      bgSurface: \"#f5efe3\",\n      bgSurface2: \"#efe9dc\",\n      border: \"#e2dcce\",\n      textPrimary: \"#2b2622\",\n      textSecondary: \"#4f4a44\",\n      textMuted: \"#68625b\",\n      brand: \"#9a5b34\",\n      brandHover: \"#824827\",\n      brandContrast: \"#fdf8f2\",\n      moneyIncome: \"#0e7490\",\n      moneyExpense: \"#8f3f0a\",\n      moneyNet: \"#7c4dab\",\n      moneyNeutral: \"#6b6258\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#efe9dc\",\n        under: \"#0e7490\",\n        over: \"#b45309\",\n        seqLow: \"#fbeed2\",\n        seqHigh: \"#b45309\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#211e1a\",\n      bgSurface: \"#2a2622\",\n      bgSurface2: \"#322d27\",\n      border: \"#3d372f\",\n      textPrimary: \"#e8e2d6\",\n      textSecondary: \"#bfb9af\",\n      textMuted: \"#9e998f\",\n      brand: \"#e0986a\",\n      brandHover: \"#ecae85\",\n      brandContrast: \"#2a1c10\",\n      moneyIncome: \"#4dd4c4\",\n      moneyExpense: \"#fbbf3a\",\n      moneyNet: \"#bfa0e0\",\n      moneyNeutral: \"#a39a8c\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#cf6488\", \"#cc78be\"],\n      heat: {\n        neutral: \"#3a352e\",\n        under: \"#4dd4c4\",\n        over: \"#fbbf3a\",\n        seqLow: \"#2c2014\",\n        seqHigh: \"#fbbf3a\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"nord-frost\",\n    name: \"Nord Frost\",\n    blurb: \"Cool snow · polar night\",\n    light: {\n      bgPage: \"#e2e7ef\",\n      bgSurface: \"#f0f3f8\",\n      bgSurface2: \"#e1e6ee\",\n      border: \"#d3dae6\",\n      textPrimary: \"#2e3440\",\n      textSecondary: \"#454b56\",\n      textMuted: \"#5e636e\",\n      brand: \"#3b6ea5\",\n      brandHover: \"#305a86\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0f8060\",\n      moneyExpense: \"#b8431a\",\n      moneyNet: \"#6b4fa0\",\n      moneyNeutral: \"#5b6577\",\n      chart: [\"#3a6ea5\", \"#56b6c2\", \"#2f7d4f\", \"#cdb52f\", \"#d05f7a\", \"#9a3f93\", \"#4d4bbf\", \"#dd6a2c\", \"#7a8aa8\"],\n      heat: {\n        neutral: \"#e1e6ee\",\n        under: \"#0f8060\",\n        over: \"#b8431a\",\n        seqLow: \"#f0f3f7\",\n        seqHigh: \"#a14708\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#242933\",\n      bgSurface: \"#2e3440\",\n      bgSurface2: \"#3b4252\",\n      border: \"#434c5e\",\n      textPrimary: \"#eceff4\",\n      textSecondary: \"#d4d7de\",\n      textMuted: \"#afb3bc\",\n      brand: \"#88c0d0\",\n      brandHover: \"#a3d4e0\",\n      brandContrast: \"#1c2027\",\n      moneyIncome: \"#4ecf9c\",\n      moneyExpense: \"#e8a24f\",\n      moneyNet: \"#caa0e0\",\n      moneyNeutral: \"#9aa5b8\",\n      chart: [\"#7fb4e6\", \"#5ec9d6\", \"#5cc483\", \"#dccb6b\", \"#e87e96\", \"#bd6fce\", \"#9389f2\", \"#ef8f4a\", \"#8693ad\"],\n      heat: {\n        neutral: \"#3b4252\",\n        under: \"#4ecf9c\",\n        over: \"#e8a24f\",\n        seqLow: \"#33373f\",\n        seqHigh: \"#e8a24f\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"indigo-noir\",\n    name: \"Indigo Noir\",\n    blurb: \"Crisp light · deep indigo\",\n    light: {\n      bgPage: \"#e8eaf2\",\n      bgSurface: \"#f6f7fb\",\n      bgSurface2: \"#eef1f8\",\n      border: \"#dadfeb\",\n      textPrimary: \"#1b1f2e\",\n      textSecondary: \"#494d5a\",\n      textMuted: \"#626572\",\n      brand: \"#4338ca\",\n      brandHover: \"#3730a3\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0c6478\",\n      moneyExpense: \"#b45309\",\n      moneyNet: \"#7c3aed\",\n      moneyNeutral: \"#5b6478\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#eef1f7\",\n        under: \"#0c6478\",\n        over: \"#b45309\",\n        seqLow: \"#fdeed4\",\n        seqHigh: \"#b45309\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#0e0f1c\",\n      bgSurface: \"#181a2c\",\n      bgSurface2: \"#21243a\",\n      border: \"#2e3252\",\n      textPrimary: \"#e6e8f4\",\n      textSecondary: \"#adafbe\",\n      textMuted: \"#8d90a0\",\n      brand: \"#8b93f8\",\n      brandHover: \"#aab1fb\",\n      brandContrast: \"#16182b\",\n      moneyIncome: \"#22c3b6\",\n      // Kept byte-identical to DEFAULT_PRESET.dark, which IS this preset (dev#434).\n      moneyExpense: \"#e4b035\",\n      moneyNet: \"#b39aef\",\n      moneyNeutral: \"#9aa1bd\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n      heat: {\n        neutral: \"#363a5a\",\n        under: \"#22c3b6\",\n        over: \"#fbbf24\",\n        seqLow: \"#3a2c14\",\n        seqHigh: \"#fbbf24\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"solar-dusk\",\n    name: \"Solar Dusk\",\n    blurb: \"Solarized warmth, easy on the eyes\",\n    light: {\n      bgPage: \"#ede3cf\",\n      bgSurface: \"#f6ecd9\",\n      bgSurface2: \"#f3ead6\",\n      border: \"#e2d6bd\",\n      textPrimary: \"#463f33\",\n      textSecondary: \"#50493c\",\n      textMuted: \"#696153\",\n      brand: \"#2c6979\",\n      brandHover: \"#1f515f\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0b6650\",\n      moneyExpense: \"#9c6418\",\n      moneyNet: \"#7a4fa3\",\n      moneyNeutral: \"#6b6453\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#f1e7d2\",\n        under: \"#0b6650\",\n        over: \"#9c6418\",\n        seqLow: \"#f6ecd0\",\n        seqHigh: \"#9c6418\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#0e1a1f\",\n      bgSurface: \"#15272e\",\n      bgSurface2: \"#1d333c\",\n      border: \"#2a4750\",\n      textPrimary: \"#d6cdb8\",\n      textSecondary: \"#c2bdab\",\n      textMuted: \"#9c9d91\",\n      brand: \"#5fb8cc\",\n      brandHover: \"#82cfe0\",\n      brandContrast: \"#0a161a\",\n      moneyIncome: \"#22b884\",\n      moneyExpense: \"#f0b94e\",\n      moneyNet: \"#bfa0e0\",\n      moneyNeutral: \"#9aa3a0\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#c873c0\"],\n      heat: {\n        neutral: \"#26424b\",\n        under: \"#22b884\",\n        over: \"#f0b94e\",\n        seqLow: \"#1f3138\",\n        seqHigh: \"#f0b94e\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"zinc-mono\",\n    name: \"Zinc Mono\",\n    blurb: \"True-neutral chrome · data pops\",\n    light: {\n      bgPage: \"#ececec\",\n      bgSurface: \"#f7f7f7\",\n      bgSurface2: \"#f4f4f5\",\n      border: \"#e4e4e7\",\n      textPrimary: \"#18181b\",\n      textSecondary: \"#4e4e50\",\n      textMuted: \"#676769\",\n      brand: \"#1d4ed8\",\n      brandHover: \"#1e40af\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0e7490\",\n      moneyExpense: \"#cf4310\",\n      moneyNet: \"#7c3aed\",\n      moneyNeutral: \"#52525b\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#f4f4f5\",\n        under: \"#0e7490\",\n        over: \"#cf4310\",\n        seqLow: \"#fdeede\",\n        seqHigh: \"#cf4310\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#09090b\",\n      bgSurface: \"#18181b\",\n      bgSurface2: \"#27272a\",\n      border: \"#3f3f46\",\n      textPrimary: \"#f4f4f5\",\n      textSecondary: \"#b2b2b3\",\n      textMuted: \"#929294\",\n      brand: \"#60a5fa\",\n      brandHover: \"#93c5fd\",\n      brandContrast: \"#0b1220\",\n      moneyIncome: \"#22d3ee\",\n      moneyExpense: \"#f97316\",\n      moneyNet: \"#c4b5fd\",\n      moneyNeutral: \"#a1a1aa\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n      heat: {\n        neutral: \"#3f3f46\",\n        under: \"#22d3ee\",\n        over: \"#f97316\",\n        seqLow: \"#3a2410\",\n        seqHigh: \"#f97316\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n];\n\n// ── \"Imprint\" chart hues (feedback #119) ──────────────────────────────────────\n// anyplot's categorical palette (https://anyplot.ai/palette), by a colleague of\n// Marcel's. 8 hues + an amber semantic anchor, derived from Wong 2011 by a\n// Petroff-style max-min ΔE search in CAM02-UCS with Machado 2009 CVD simulation —\n// the same lineage as our default Paul Tol \"Muted\", one generation on, and tuned\n// for exactly the warm cream paper our light theme uses.\n//\n// This preset is DEFAULT_PRESET with ONLY the 9 categorical chart hues swapped;\n// surfaces, brand and the semantic money trio stay put, because those were their\n// own deliberate decisions (#307/#328) and are not what the palette is for. The\n// heatmap stops likewise stay teal/amber: they encode under/over, and imprint's\n// own diverging ramp is red↔blue, which would fight the money semantics.\n//\n// Measured on our surfaces (CIEDE2000, Machado severity-100, 8 like-for-like\n// slots on the cream light surface #f6ecd9) — neither palette dominates:\n//   Paul Tol Muted  min-contrast 1.38 · worst-CVD ΔE00 11.8 · normal ΔE00 16.1\n//   imprint         min-contrast 1.95 · worst-CVD ΔE00  7.2 · normal ΔE00 22.2\n// i.e. imprint is punchier and has no near-invisible pale slot (Tol's #88ccee\n// sits at 1.5:1 on cream), while Tol separates better under colour-vision\n// deficiency. So this ships as a CHOICE, not as a new default.\n//\n// The dark set keeps imprint's hues verbatim except matte-red and rose, whose\n// lightness is lifted (oklch L 0.50→0.55) because verbatim they land at 2.67:1\n// and 2.76:1 on our deep-indigo dark surface — under WCAG 2.1 SC 1.4.11's 3:1\n// non-text minimum. Lifted they clear it at 3.30:1 / 3.28:1. anyplot documents\n// the same shortfall on their own dark ground and answers it with a stroke halo;\n// lifting keeps the fix in the token layer instead of every chart component.\nconst IMPRINT_HUES_LIGHT = [\n  \"#009E73\", // brand green   — first series\n  \"#C475FD\", // lavender      — creative\n  \"#4467A3\", // blue          — cool / info\n  \"#BD8233\", // ochre         — earth / commodity\n  \"#AE3030\", // matte red     — bad / loss / error\n  \"#2ABCCD\", // cyan          — sky / tech-cool\n  \"#954477\", // rose          — wellness / health\n  \"#99B314\", // lime          — growth / nature\n  \"#DDCC77\", // amber         — anyplot's semantic anchor, used here as slot 9\n];\nconst IMPRINT_HUES_DARK = [\n  \"#009E73\",\n  \"#C475FD\",\n  \"#4467A3\",\n  \"#BD8233\",\n  \"#BF413E\", // matte red, L-lifted for our dark surface\n  \"#2ABCCD\",\n  \"#A25083\", // rose, L-lifted for our dark surface\n  \"#99B314\",\n  \"#DDCC77\",\n];\n\nexport const IMPRINT_PRESET: PalettePreset = {\n  id: \"imprint\",\n  name: \"Imprint\",\n  blurb: \"Colourblind-safe chart hues by anyplot.ai\",\n  light: { ...DEFAULT_PRESET.light, chart: IMPRINT_HUES_LIGHT },\n  dark: { ...DEFAULT_PRESET.dark, chart: IMPRINT_HUES_DARK },\n};\n\n// The full-theme switcher from #307 stayed retired (feedback #328) — the default\n// is still the single source of truth for surfaces, brand and money, and\n// ALTERNATIVE_PRESETS above remains a reference bank only. What IS selectable is\n// the categorical chart ramp (feedback #119), so these two presets are the live\n// set; presetById falls back to the default for any stale persisted id.\nexport const PALETTES: PalettePreset[] = [DEFAULT_PRESET, IMPRINT_PRESET];\n\nexport function presetById(id: string): PalettePreset {\n  return PALETTES.find((p) => p.id === id) ?? DEFAULT_PRESET;\n}\n\n// The CSS custom properties a preset writes onto <html>. Also used to clear the\n// overrides when returning to the default.\nexport const TOKEN_VARS = [\n  \"--bg-page\",\n  \"--bg-surface\",\n  \"--bg-surface-2\",\n  \"--border\",\n  \"--text-primary\",\n  \"--text-secondary\",\n  \"--text-muted\",\n  \"--brand\",\n  \"--brand-hover\",\n  \"--brand-contrast\",\n  \"--money-income\",\n  \"--money-expense\",\n  \"--money-net\",\n  \"--money-neutral\",\n  \"--chart-1\",\n  \"--chart-2\",\n  \"--chart-3\",\n  \"--chart-4\",\n  \"--chart-5\",\n  \"--chart-6\",\n  \"--chart-7\",\n  \"--chart-8\",\n  \"--chart-9\",\n] as const;\n\n/** Write a token set onto an element's inline style as CSS custom properties. */\nexport function applyTokenSet(el: HTMLElement, t: TokenSet): void {\n  el.style.setProperty(\"--bg-page\", t.bgPage);\n  el.style.setProperty(\"--bg-surface\", t.bgSurface);\n  el.style.setProperty(\"--bg-surface-2\", t.bgSurface2);\n  el.style.setProperty(\"--border\", t.border);\n  el.style.setProperty(\"--text-primary\", t.textPrimary);\n  el.style.setProperty(\"--text-secondary\", t.textSecondary);\n  el.style.setProperty(\"--text-muted\", t.textMuted);\n  el.style.setProperty(\"--brand\", t.brand);\n  el.style.setProperty(\"--brand-hover\", t.brandHover);\n  el.style.setProperty(\"--brand-contrast\", t.brandContrast);\n  el.style.setProperty(\"--money-income\", t.moneyIncome);\n  el.style.setProperty(\"--money-expense\", t.moneyExpense);\n  el.style.setProperty(\"--money-net\", t.moneyNet);\n  el.style.setProperty(\"--money-neutral\", t.moneyNeutral);\n  t.chart.forEach((c, i) => el.style.setProperty(`--chart-${i + 1}`, c));\n}\n\n/** Remove all preset overrides so the tokens.css :root/.dark defaults take over. */\nexport function clearTokenSet(el: HTMLElement): void {\n  for (const v of TOKEN_VARS) el.style.removeProperty(v);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/theme/palette-presets.ts"],"sourcesContent":["// Appearance presets — the single source of truth for the \"palette switcher\"\n// (feedback #307). Each preset is a full set of design-token values for BOTH\n// light and dark, covering the page/surface backgrounds, the brand accent, the\n// semantic money trio and the 9-colour categorical chart palette, plus the\n// heatmap stops. A preset is applied at runtime by writing these as CSS custom\n// properties onto <html> (see palette-store.ts), which instantly re-skins every\n// token-driven surface and chart. The two heatmaps and the treemap interpolate\n// concrete hex in JS, so they read the same values from here via the hooks in\n// palette-store.\n//\n// The alternative presets below were designed + accessibility-vetted as a set\n// (each is CVD-safe across protan/deutan/tritan, money is never red/green, and\n// text/background contrast clears WCAG AA on both themes). To promote one to the\n// app-wide default, copy its values into the :root/.dark blocks in tokens.css\n// (the default preset here mirrors those exactly).\n\nimport type { HeatStops } from \"./chart-palette\";\n\nexport interface TokenSet {\n  // Backgrounds & chrome\n  bgPage: string;\n  bgSurface: string;\n  bgSurface2: string;\n  border: string;\n  textPrimary: string;\n  // The two quieter text roles. Derived per preset by blending `textPrimary` toward\n  // that preset's own surfaces until the contrast against the WORST of bgPage /\n  // bgSurface / bgSurface2 hits 7:1 and 4.8:1 — so both clear WCAG AA for normal text\n  // (4.5:1) on every surface they can land on, and both inherit the preset's warmth\n  // instead of importing a cool grey from Tailwind's palette.\n  textSecondary: string;\n  textMuted: string;\n  // Interactive brand accent\n  brand: string;\n  brandHover: string;\n  brandContrast: string;\n  // Semantic money (never red/green — CVD-safe, paired with +/- cues elsewhere)\n  moneyIncome: string;\n  moneyExpense: string;\n  moneyNet: string;\n  moneyNeutral: string;\n  // Categorical chart series (Paul Tol \"Muted\" by default — CVD-safe), exactly 9\n  chart: string[];\n  // Heatmap interpolation stops (variance diverging + spending sequential)\n  heat: HeatStops;\n}\n\nexport interface PalettePreset {\n  id: string;\n  name: string;\n  blurb: string;\n  light: TokenSet;\n  dark: TokenSet;\n}\n\n// The shipped default (feedback #328): SOLAR-DUSK warm light + INDIGO-NOIR deep\n// dark surfaces — the two curated presets the user picked per mode — but with a\n// SINGLE unified brand accent (indigo) across both modes rather than each\n// preset's own accent (the user asked for the brand accent to stay the same).\n// So the light block is Solar Dusk with its teal brand overridden to indigo, and\n// the dark block is Indigo Noir (already indigo). The money trio\n// (income/expense/net) drives the chart bars and stays palette-driven so those\n// semantic colours adapt to each mode's contrast (best practice — feedback #328).\nexport const DEFAULT_PRESET: PalettePreset = {\n  id: \"default\",\n  name: \"Default\",\n  blurb: \"Solar-dusk light · indigo-noir dark\",\n  light: {\n    // Solar Dusk (light) surfaces, with the brand unified to indigo (see above).\n    bgPage: \"#ede3cf\",\n    bgSurface: \"#f6ecd9\",\n    bgSurface2: \"#f3ead6\",\n    border: \"#e2d6bd\",\n    textPrimary: \"#463f33\",\n    textSecondary: \"#50493c\",\n    textMuted: \"#696153\",\n    brand: \"#4f46e5\",\n    brandHover: \"#4338ca\",\n    brandContrast: \"#ffffff\",\n    moneyIncome: \"#0b6650\",\n    moneyExpense: \"#9c6418\",\n    moneyNet: \"#7a4fa3\",\n    moneyNeutral: \"#6b6453\",\n    chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n    heat: {\n      neutral: \"#f1e7d2\",\n      under: \"#0b6650\",\n      over: \"#9c6418\",\n      seqLow: \"#f6ecd0\",\n      seqHigh: \"#9c6418\",\n      empty: \"rgba(148,163,184,0.14)\",\n    },\n  },\n  dark: {\n    // Indigo Noir (dark)\n    bgPage: \"#0e0f1c\",\n    bgSurface: \"#181a2c\",\n    bgSurface2: \"#21243a\",\n    border: \"#2e3252\",\n    textPrimary: \"#e6e8f4\",\n    textSecondary: \"#adafbe\",\n    textMuted: \"#8d90a0\",\n    brand: \"#8b93f8\",\n    brandHover: \"#aab1fb\",\n    brandContrast: \"#16182b\",\n    moneyIncome: \"#22c3b6\",\n    // Amber-400 (#fbbf24) sat at OKLab L 0.84 while every other dark token lives\n    // at 0.68–0.74, so outflows outshouted the inflows they are paired with. Same\n    // hue and chroma, pulled to L 0.785 (dev#434). The heat stops below keep the\n    // brighter amber on purpose: a gradient endpoint is meant to be the loudest\n    // thing in its scale, and it is a fill, not a figure.\n    moneyExpense: \"#e4b035\",\n    moneyNet: \"#b39aef\",\n    moneyNeutral: \"#9aa1bd\",\n    chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n    heat: {\n      neutral: \"#363a5a\",\n      under: \"#22c3b6\",\n      over: \"#fbbf24\",\n      seqLow: \"#3a2c14\",\n      seqHigh: \"#fbbf24\",\n      empty: \"rgba(148,163,184,0.10)\",\n    },\n  },\n};\n\n// Vetted alternatives to preview (CVD-safe, WCAG-AA on both themes).\nexport const ALTERNATIVE_PRESETS: PalettePreset[] = [\n  {\n    id: \"warm-paper\",\n    name: \"Warm Paper\",\n    blurb: \"Cream paper · warm charcoal\",\n    light: {\n      bgPage: \"#ece5d6\",\n      bgSurface: \"#f5efe3\",\n      bgSurface2: \"#efe9dc\",\n      border: \"#e2dcce\",\n      textPrimary: \"#2b2622\",\n      textSecondary: \"#4f4a44\",\n      textMuted: \"#68625b\",\n      brand: \"#9a5b34\",\n      brandHover: \"#824827\",\n      brandContrast: \"#fdf8f2\",\n      moneyIncome: \"#0e7490\",\n      moneyExpense: \"#8f3f0a\",\n      moneyNet: \"#7c4dab\",\n      moneyNeutral: \"#6b6258\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#efe9dc\",\n        under: \"#0e7490\",\n        over: \"#b45309\",\n        seqLow: \"#fbeed2\",\n        seqHigh: \"#b45309\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#211e1a\",\n      bgSurface: \"#2a2622\",\n      bgSurface2: \"#322d27\",\n      border: \"#3d372f\",\n      textPrimary: \"#e8e2d6\",\n      textSecondary: \"#bfb9af\",\n      textMuted: \"#9e998f\",\n      brand: \"#e0986a\",\n      brandHover: \"#ecae85\",\n      brandContrast: \"#2a1c10\",\n      moneyIncome: \"#4dd4c4\",\n      moneyExpense: \"#fbbf3a\",\n      moneyNet: \"#bfa0e0\",\n      moneyNeutral: \"#a39a8c\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#cf6488\", \"#cc78be\"],\n      heat: {\n        neutral: \"#3a352e\",\n        under: \"#4dd4c4\",\n        over: \"#fbbf3a\",\n        seqLow: \"#2c2014\",\n        seqHigh: \"#fbbf3a\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"nord-frost\",\n    name: \"Nord Frost\",\n    blurb: \"Cool snow · polar night\",\n    light: {\n      bgPage: \"#e2e7ef\",\n      bgSurface: \"#f0f3f8\",\n      bgSurface2: \"#e1e6ee\",\n      border: \"#d3dae6\",\n      textPrimary: \"#2e3440\",\n      textSecondary: \"#454b56\",\n      textMuted: \"#5e636e\",\n      brand: \"#3b6ea5\",\n      brandHover: \"#305a86\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0f8060\",\n      moneyExpense: \"#b8431a\",\n      moneyNet: \"#6b4fa0\",\n      moneyNeutral: \"#5b6577\",\n      chart: [\"#3a6ea5\", \"#56b6c2\", \"#2f7d4f\", \"#cdb52f\", \"#d05f7a\", \"#9a3f93\", \"#4d4bbf\", \"#dd6a2c\", \"#7a8aa8\"],\n      heat: {\n        neutral: \"#e1e6ee\",\n        under: \"#0f8060\",\n        over: \"#b8431a\",\n        seqLow: \"#f0f3f7\",\n        seqHigh: \"#a14708\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#242933\",\n      bgSurface: \"#2e3440\",\n      bgSurface2: \"#3b4252\",\n      border: \"#434c5e\",\n      textPrimary: \"#eceff4\",\n      textSecondary: \"#d4d7de\",\n      textMuted: \"#afb3bc\",\n      brand: \"#88c0d0\",\n      brandHover: \"#a3d4e0\",\n      brandContrast: \"#1c2027\",\n      moneyIncome: \"#4ecf9c\",\n      moneyExpense: \"#e8a24f\",\n      moneyNet: \"#caa0e0\",\n      moneyNeutral: \"#9aa5b8\",\n      chart: [\"#7fb4e6\", \"#5ec9d6\", \"#5cc483\", \"#dccb6b\", \"#e87e96\", \"#bd6fce\", \"#9389f2\", \"#ef8f4a\", \"#8693ad\"],\n      heat: {\n        neutral: \"#3b4252\",\n        under: \"#4ecf9c\",\n        over: \"#e8a24f\",\n        seqLow: \"#33373f\",\n        seqHigh: \"#e8a24f\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"indigo-noir\",\n    name: \"Indigo Noir\",\n    blurb: \"Crisp light · deep indigo\",\n    light: {\n      bgPage: \"#e8eaf2\",\n      bgSurface: \"#f6f7fb\",\n      bgSurface2: \"#eef1f8\",\n      border: \"#dadfeb\",\n      textPrimary: \"#1b1f2e\",\n      textSecondary: \"#494d5a\",\n      textMuted: \"#626572\",\n      brand: \"#4338ca\",\n      brandHover: \"#3730a3\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0c6478\",\n      moneyExpense: \"#b45309\",\n      moneyNet: \"#7c3aed\",\n      moneyNeutral: \"#5b6478\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#eef1f7\",\n        under: \"#0c6478\",\n        over: \"#b45309\",\n        seqLow: \"#fdeed4\",\n        seqHigh: \"#b45309\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#0e0f1c\",\n      bgSurface: \"#181a2c\",\n      bgSurface2: \"#21243a\",\n      border: \"#2e3252\",\n      textPrimary: \"#e6e8f4\",\n      textSecondary: \"#adafbe\",\n      textMuted: \"#8d90a0\",\n      brand: \"#8b93f8\",\n      brandHover: \"#aab1fb\",\n      brandContrast: \"#16182b\",\n      moneyIncome: \"#22c3b6\",\n      // Kept byte-identical to DEFAULT_PRESET.dark, which IS this preset (dev#434).\n      moneyExpense: \"#e4b035\",\n      moneyNet: \"#b39aef\",\n      moneyNeutral: \"#9aa1bd\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n      heat: {\n        neutral: \"#363a5a\",\n        under: \"#22c3b6\",\n        over: \"#fbbf24\",\n        seqLow: \"#3a2c14\",\n        seqHigh: \"#fbbf24\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"solar-dusk\",\n    name: \"Solar Dusk\",\n    blurb: \"Solarized warmth, easy on the eyes\",\n    light: {\n      bgPage: \"#ede3cf\",\n      bgSurface: \"#f6ecd9\",\n      bgSurface2: \"#f3ead6\",\n      border: \"#e2d6bd\",\n      textPrimary: \"#463f33\",\n      textSecondary: \"#50493c\",\n      textMuted: \"#696153\",\n      brand: \"#2c6979\",\n      brandHover: \"#1f515f\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0b6650\",\n      moneyExpense: \"#9c6418\",\n      moneyNet: \"#7a4fa3\",\n      moneyNeutral: \"#6b6453\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#f1e7d2\",\n        under: \"#0b6650\",\n        over: \"#9c6418\",\n        seqLow: \"#f6ecd0\",\n        seqHigh: \"#9c6418\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#0e1a1f\",\n      bgSurface: \"#15272e\",\n      bgSurface2: \"#1d333c\",\n      border: \"#2a4750\",\n      textPrimary: \"#d6cdb8\",\n      textSecondary: \"#c2bdab\",\n      textMuted: \"#9c9d91\",\n      brand: \"#5fb8cc\",\n      brandHover: \"#82cfe0\",\n      brandContrast: \"#0a161a\",\n      moneyIncome: \"#22b884\",\n      moneyExpense: \"#f0b94e\",\n      moneyNet: \"#bfa0e0\",\n      moneyNeutral: \"#9aa3a0\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#c873c0\"],\n      heat: {\n        neutral: \"#26424b\",\n        under: \"#22b884\",\n        over: \"#f0b94e\",\n        seqLow: \"#1f3138\",\n        seqHigh: \"#f0b94e\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n  {\n    id: \"zinc-mono\",\n    name: \"Zinc Mono\",\n    blurb: \"True-neutral chrome · data pops\",\n    light: {\n      bgPage: \"#ececec\",\n      bgSurface: \"#f7f7f7\",\n      bgSurface2: \"#f4f4f5\",\n      border: \"#e4e4e7\",\n      textPrimary: \"#18181b\",\n      textSecondary: \"#4e4e50\",\n      textMuted: \"#676769\",\n      brand: \"#1d4ed8\",\n      brandHover: \"#1e40af\",\n      brandContrast: \"#ffffff\",\n      moneyIncome: \"#0e7490\",\n      moneyExpense: \"#cf4310\",\n      moneyNet: \"#7c3aed\",\n      moneyNeutral: \"#52525b\",\n      chart: [\"#332288\", \"#88ccee\", \"#44aa99\", \"#117733\", \"#999933\", \"#ddcc77\", \"#cc6677\", \"#882255\", \"#aa4499\"],\n      heat: {\n        neutral: \"#f4f4f5\",\n        under: \"#0e7490\",\n        over: \"#cf4310\",\n        seqLow: \"#fdeede\",\n        seqHigh: \"#cf4310\",\n        empty: \"rgba(148,163,184,0.14)\",\n      },\n    },\n    dark: {\n      bgPage: \"#09090b\",\n      bgSurface: \"#18181b\",\n      bgSurface2: \"#27272a\",\n      border: \"#3f3f46\",\n      textPrimary: \"#f4f4f5\",\n      textSecondary: \"#b2b2b3\",\n      textMuted: \"#929294\",\n      brand: \"#60a5fa\",\n      brandHover: \"#93c5fd\",\n      brandContrast: \"#0b1220\",\n      moneyIncome: \"#22d3ee\",\n      moneyExpense: \"#f97316\",\n      moneyNet: \"#c4b5fd\",\n      moneyNeutral: \"#a1a1aa\",\n      chart: [\"#7e72d6\", \"#9fd8f2\", \"#5fc4b0\", \"#3fa45f\", \"#bfbf5e\", \"#e8dda0\", \"#e08c9a\", \"#c25a78\", \"#cc78be\"],\n      heat: {\n        neutral: \"#3f3f46\",\n        under: \"#22d3ee\",\n        over: \"#f97316\",\n        seqLow: \"#3a2410\",\n        seqHigh: \"#f97316\",\n        empty: \"rgba(148,163,184,0.10)\",\n      },\n    },\n  },\n];\n\n// ── \"Imprint\" chart hues (feedback #119) ──────────────────────────────────────\n// anyplot's categorical palette (https://anyplot.ai/palette), by a colleague of\n// Marcel's. 8 hues + an amber semantic anchor, derived from Wong 2011 by a\n// Petroff-style max-min ΔE search in CAM02-UCS with Machado 2009 CVD simulation —\n// the same lineage as our default Paul Tol \"Muted\", one generation on, and tuned\n// for exactly the warm cream paper our light theme uses.\n//\n// This preset is DEFAULT_PRESET with ONLY the 9 categorical chart hues swapped;\n// surfaces, brand and the semantic money trio stay put, because those were their\n// own deliberate decisions (#307/#328) and are not what the palette is for. The\n// heatmap stops likewise stay teal/amber: they encode under/over, and imprint's\n// own diverging ramp is red↔blue, which would fight the money semantics.\n//\n// Measured on our surfaces (CIEDE2000, Machado severity-100, 8 like-for-like\n// slots on the cream light surface #f6ecd9) — neither palette dominates:\n//   Paul Tol Muted  min-contrast 1.38 · worst-CVD ΔE00 11.8 · normal ΔE00 16.1\n//   imprint         min-contrast 1.95 · worst-CVD ΔE00  7.2 · normal ΔE00 22.2\n// i.e. imprint is punchier and has no near-invisible pale slot (Tol's #88ccee\n// sits at 1.5:1 on cream), while Tol separates better under colour-vision\n// deficiency. So this ships as a CHOICE, not as a new default.\n//\n// The dark set keeps imprint's hues verbatim except matte-red and rose, whose\n// lightness is lifted (oklch L 0.50→0.55) because verbatim they land at 2.67:1\n// and 2.76:1 on our deep-indigo dark surface — under WCAG 2.1 SC 1.4.11's 3:1\n// non-text minimum. Lifted they clear it at 3.30:1 / 3.28:1. anyplot documents\n// the same shortfall on their own dark ground and answers it with a stroke halo;\n// lifting keeps the fix in the token layer instead of every chart component.\nconst IMPRINT_HUES_LIGHT = [\n  \"#009E73\", // brand green   — first series\n  \"#C475FD\", // lavender      — creative\n  \"#4467A3\", // blue          — cool / info\n  \"#BD8233\", // ochre         — earth / commodity\n  \"#AE3030\", // matte red     — bad / loss / error\n  \"#2ABCCD\", // cyan          — sky / tech-cool\n  \"#954477\", // rose          — wellness / health\n  \"#99B314\", // lime          — growth / nature\n  \"#DDCC77\", // amber         — anyplot's semantic anchor, used here as slot 9\n];\nconst IMPRINT_HUES_DARK = [\n  \"#009E73\",\n  \"#C475FD\",\n  \"#4467A3\",\n  \"#BD8233\",\n  \"#BF413E\", // matte red, L-lifted for our dark surface\n  \"#2ABCCD\",\n  \"#A25083\", // rose, L-lifted for our dark surface\n  \"#99B314\",\n  \"#DDCC77\",\n];\n\nexport const IMPRINT_PRESET: PalettePreset = {\n  id: \"imprint\",\n  name: \"Imprint\",\n  blurb: \"Colourblind-safe chart hues by anyplot.ai\",\n  light: { ...DEFAULT_PRESET.light, chart: IMPRINT_HUES_LIGHT },\n  dark: { ...DEFAULT_PRESET.dark, chart: IMPRINT_HUES_DARK },\n};\n\n// The full-theme switcher from #307 stayed retired (feedback #328) — the default\n// is still the single source of truth for surfaces, brand and money, and\n// ALTERNATIVE_PRESETS above remains a reference bank only. What IS selectable is\n// the categorical chart ramp (feedback #119), so these two presets are the live\n// set; presetById falls back to the default for any stale persisted id.\nexport const PALETTES: PalettePreset[] = [DEFAULT_PRESET, IMPRINT_PRESET];\n\nexport function presetById(id: string): PalettePreset {\n  return PALETTES.find((p) => p.id === id) ?? DEFAULT_PRESET;\n}\n\n/**\n * Write a token set onto an element's inline style as CSS custom properties.\n *\n * This is the only writer, and there is no un-writer: `presetById` falls back to\n * `DEFAULT_PRESET` and this then writes the full set, so returning to the default\n * APPLIES it rather than clearing anything. A `clearTokenSet` and the hand-kept\n * 24-name `TOKEN_VARS` list it looped over used to live here, both exported, both\n * called by nobody in either consumer — a second copy of these property names with\n * nothing comparing the two, so adding a token here and forgetting it there would\n * have been silent and only a dead function would have noticed. The list is gone;\n * the test beside this asserts instead that every field of a `TokenSet` reaches the\n * element, which is what that list was standing in for.\n */\nexport function applyTokenSet(el: HTMLElement, t: TokenSet): void {\n  el.style.setProperty(\"--bg-page\", t.bgPage);\n  el.style.setProperty(\"--bg-surface\", t.bgSurface);\n  el.style.setProperty(\"--bg-surface-2\", t.bgSurface2);\n  el.style.setProperty(\"--border\", t.border);\n  el.style.setProperty(\"--text-primary\", t.textPrimary);\n  el.style.setProperty(\"--text-secondary\", t.textSecondary);\n  el.style.setProperty(\"--text-muted\", t.textMuted);\n  el.style.setProperty(\"--brand\", t.brand);\n  el.style.setProperty(\"--brand-hover\", t.brandHover);\n  el.style.setProperty(\"--brand-contrast\", t.brandContrast);\n  el.style.setProperty(\"--money-income\", t.moneyIncome);\n  el.style.setProperty(\"--money-expense\", t.moneyExpense);\n  el.style.setProperty(\"--money-net\", t.moneyNet);\n  el.style.setProperty(\"--money-neutral\", t.moneyNeutral);\n  t.chart.forEach((c, i) => el.style.setProperty(`--chart-${i + 1}`, c));\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives.",
@@ -33,7 +33,7 @@
   "peerDependencies": {
     "react": ">=19",
     "react-dom": ">=19",
-    "react-router": "^8.3.0",
+    "react-router": ">=7",
     "recharts": ">=3",
     "sonner": ">=2"
   },