@eifi1/ui-kit 0.4.0

package/README.md

@@ -0,0 +1,219 @@
+# @eifi1/ui-kit
+
+[![npm](https://img.shields.io/npm/v/@eifi1/ui-kit)](https://www.npmjs.com/package/@eifi1/ui-kit)
+
+The shared, app-agnostic design system for the sibling apps. Published to npm, so
+consumers install it like any other dependency — no submodule, no token, no
+`file:` path pointing into a neighbouring checkout.
+
+```bash
+npm install @eifi1/ui-kit
+```
+
+```ts
+import { Button, DataTable } from "@eifi1/ui-kit";
+import "@eifi1/ui-kit/tokens.css";
+```
+
+> Formerly `@hb/ui` in the `hb-ui` repository — `hb` was short for Household
+> Books, a name none of the current consumers share. GitHub redirects the old
+> repository URL, but the old package name is not published; update imports.
+
+Ships compiled ESM plus type declarations, built one output file per source
+module so consumers can still tree-shake it (see the `sideEffects` note in
+`package.json` — a bundling build would pull recharts into every consumer's
+entry chunk). Tailwind classes are emitted as-is; each app still compiles them
+with its own Tailwind config.
+
+## Install
+
+```bash
+npm install @eifi1/ui-kit
+```
+
+Versions are pinned in your lockfile like any dependency, so each app upgrades
+when it chooses. To work on the design system and an app together, use
+`npm link` or a workspace override rather than a `file:` path.
+
+`@eifi1/ui-kit` needs these installed in the consuming app: `react`, `react-dom` (required
+peers) and — only if you use the pieces that need them — `recharts` (the `chart`
+kit), `sonner` (`FileDropzone`), `react-router` (`DataTable` URL-sync + `AppShell`).
+It also pulls `clsx`, `tailwind-merge`, `lucide-react`, `zustand`, `flag-icons`.
+
+## Wiring
+
+### 1. Vite — dedupe shared singletons
+
+The package is a linked source package, so its imports must resolve to the app's
+single copy of these (two React/router/store instances break hooks and context):
+
+```ts
+// vite.config.ts
+resolve: {
+  dedupe: ["react", "react-dom", "zustand", "recharts", "sonner", "react-router"],
+}
+```
+
+### 2. Tailwind (v4) — tokens + source scan
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import "@eifi1/ui-kit/tokens.css";          /* design tokens, semantic utilities, chrome */
+@source "../../node_modules/@eifi1/ui-kit/src"; /* keep the class names @eifi1/ui-kit uses */
+```
+
+### 3. Theme + palette stores (own persistence keys)
+
+The stores are factories so each app namespaces its own `localStorage`:
+
+```ts
+import { createThemeStore, createPaletteStore } from "@eifi1/ui-kit";
+export const { useTheme, useApplyTheme } = createThemeStore("myapp-theme");
+export const { usePalette, useApplyPalette, useActiveTokenSet, useChartHex, useHeatStops } =
+  createPaletteStore("myapp-palette", useTheme);
+```
+
+Call `useApplyTheme()` + `useApplyPalette()` once near the root. For a no-flash
+first paint, apply the persisted theme class + token set before hydration (see
+Keksdose's `main.tsx` for the pattern, using `applyTokenSet`/`presetById`).
+
+## Tests
+
+```bash
+npm test          # vitest run
+npm run test:watch
+npm run typecheck
+```
+
+Vitest + jsdom, configured as a copy of the lead consumer's setup rather than a new
+dialect — so a test can move between this package and an app unchanged. The suite pins
+`TZ=Europe/Berlin`, which is load-bearing for `lib/dates.ts`: those helpers answer with
+the LOCAL calendar day, and on a UTC runner a broken UTC implementation and a correct
+local one agree.
+
+Start where the return on a line of test is highest and no DOM is needed — `lib/`,
+`theme/`, and the data-table's pure helpers. The house rule for a fix is that its
+regression test is **run against the old code first and observed to fail there**;
+a test written after the fix proves only that the fix is self-consistent.
+
+## What's exported
+
+- **Primitives / fields:** `cn`, `Button`, `Input`, `Select`, `Textarea`,
+  `FloatingField`, `FieldLabel`, `Card`, `Spinner`, `EmptyState`, `Tabs`, plus the
+  field-class constants (`FIELD_BASE`, `FIELD_TRIGGER`, `FLOATING_*`, …).
+- **Inputs / dropdowns:** `NumberInput`, `AmountInput`, `Combobox`, `MultiSelect`,
+  `CurrencySelect` (+ `CURRENCIES`, `getCurrency`, `CurrencyFlag`), dropdown
+  primitives (`useDropdown`, `useDropdownSearch`, `DropdownPanel`,
+  `DropdownSearchHeader`), `CalculatorButton`, the calc engine.
+- **Overlays / misc:** `Modal` (+ `useBackdropClose`), `Popover`, `HoverMenu`,
+  `Tooltip`, `AlertBanner`, `ToggleGroup`, `FileDropzone`, `GroupedPicker`,
+  `MiniCalendar`, `WizardStepper` (a bare two-step indicator — not the wizard
+  engine below), the `chart` kit.
+- **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`,
+  `PALETTE_HEX`, chart-colour helpers, and the store factories.
+- **Shell:** `TopBar`, `AppShell` (+ `AppShellNavItem`), `ThemeToggle`,
+  `PaletteMenu`, `LanguageMenu`, `TOPBAR_TRIGGER_CLASS`, `TOPBAR_MENU_ITEM_CLASS`.
+- **Feedback:** `FeedbackDialog` (the compose form) and the inbox parts —
+  `FeedbackStatus`/`FeedbackCategory` and their `*_META`/`*_ORDER` tables,
+  `nextFeedbackStatus`, `visibleFeedbackStatuses`, `selectableFeedbackStatuses`,
+  `feedbackCategoryRank`, `FeedbackStatusBadge`, `FeedbackStatusTransitions`,
+  `FeedbackCategoryBadge`, `FeedbackNoteEditor`, `FeedbackDetail`,
+  `FeedbackDetailSection`, `FeedbackProse`. The vocabulary, the transition policy
+  and the look; each app still wires its own API, columns, strings and
+  permissions — see the note at the top of `src/feedback/feedback-inbox.tsx`.
+- **Wizard:** the multi-step engine (`useWizard`, `WizardContextProvider`,
+  `useWizardContext`, `useRhfWizardStep`, `useWizardStepValidate`,
+  `useWizardNextGate`, `requiredFieldsValidator`), the chrome around it
+  (`StepperNav`, `WizardSummary`) and the parts its steps are built from
+  (`WizardStep`, `WizardField`, `WizardSelectField`) — plus the types
+  (`WizardStepConfig`, `UseWizardOptions`, `UseWizardReturn`, `StepStatus`,
+  `ValidateResult`, `FieldErrors`, `SummarySection`, `SummaryItem`,
+  `RequiredFieldSpec`) and the label table (`WizardLabels`,
+  `DEFAULT_WIZARD_LABELS`, `resolveWizardLabels`). See [Wizard](#wizard) below.
+- **Subpath:** date helpers at `@eifi1/ui-kit/dates`; stylesheet at `@eifi1/ui-kit/tokens.css`.
+
+## Forms / refs
+
+`Input`, `Select`, `Textarea` and `AmountInput` forward their `ref` to the
+underlying DOM element, so they work directly with react-hook-form:
+`<Input {...field} />` (from `Controller`/`register`) attaches RHF's ref, giving
+focus-and-scroll-to-error for free.
+
+## i18n
+
+The package carries no translation catalog. Components with user-facing text take
+**label props with English defaults** — pass your own translated strings:
+
+```tsx
+<MultiSelect allLabel={t("all")} searchLabel={t("search")} … />
+<DataTable labels={{ columns: t("table.columns"), presets: { today: t("today") }, … }} … />
+```
+
+## Wizard
+
+A multi-step form engine: a step machine with per-step validation gates, collected
+data, `?step=` URL sync, and skip/cancel handling — with the chrome (step
+indicator, nav bar, cancel confirmation) and a summary/review step on top.
+
+```tsx
+const wizard = useWizard<LeaseDraft>({
+  steps: [
+    { id: "unit", label: "Unit" },
+    { id: "tenants", label: "Tenants", validate: () => draft.tenants.length > 0 },
+    { id: "review", label: "Review" },
+  ],
+  onComplete: (data) => createLease(data),
+  onCancel: () => navigate(".."),
+});
+
+<WizardContextProvider
+  value={{
+    registerStepValidate: wizard.registerStepValidate,
+    setNextBlocked: wizard.setNextBlocked,
+  }}
+>
+  <StepperNav wizard={wizard} title="New lease">
+    <WizardStep>{/* the active step's fields */}</WizardStep>
+  </StepperNav>
+</WizardContextProvider>
+```
+
+A step gates forward navigation three ways, and `goNext` runs all of them:
+its `validate` in the config above, `useWizardStepValidate(fn)` for a step that
+checks by hand, and `useRhfWizardStep(form, onValid)` for a react-hook-form step
+(which also reports its own inline messages). `useWizardNextGate(blocked)`
+disables Next/Skip outright.
+
+Like the rest of the package it resolves **no strings**: a step carries a `label`
+node, and the chrome takes a `labels` object (`WizardLabels`, every key optional
+over an English default) — the same split `DataTable` and `TourProvider` use. An
+app with i18n wraps `useWizard`/`StepperNav`/`WizardSummary` once and maps its
+own keys; see Kastlan's `shared/components/wizard/app-wizard.tsx`.
+
+**Optional peers.** `react-hook-form` is needed only by `useRhfWizardStep`, and
+only as a type. `react-router` backs the `?step=` sync in `useWizard`. `sonner`
+carries the "fill in the required fields" toast and is imported dynamically, on
+that failure path only — pass `onValidationFailed` to route it elsewhere.
+
+## Shell
+
+`TopBar`/`AppShell` are composable chrome. Feed `AppShell` your nav items and pass
+a `TopBar` whose `actions` combine the shared controls (`ThemeToggle`,
+`PaletteMenu`, `LanguageMenu`) with your own app-owned menus (account, etc.):
+
+```tsx
+<AppShell nav={nav} footer={<Footer/>} topBar={
+  <TopBar brand={<Logo/>} actions={<>
+    <ThemeToggle mode={mode} onToggle={toggle} />
+    <PaletteMenu palettes={PALETTES} activeId={id} mode={mode} onSelect={setId} />
+    <LanguageMenu options={langs} current={lang} onChange={setLang} />
+    {/* app-owned menus */}
+  </>} />
+}>
+  <Outlet />
+</AppShell>
+```

package/dist/components/account-settings.d.ts

@@ -0,0 +1,71 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * App-agnostic account-settings SECTIONS (feedback #333). The presentation lives
+ * in @hb/ui; each app injects its own auth-API handlers + translated labels and
+ * arranges these next to its own app-specific cards (appearance, budgets, …).
+ * Every section is a self-contained <Card> owning its transient form state.
+ */
+interface ProfileSettingLabels {
+    title: string;
+    email: string;
+    role: string;
+    memberSince: string;
+    displayName: string;
+    save: string;
+}
+declare function ProfileSetting({ name, email, role, memberSince, value, onChange, onSave, saving, labels, }: {
+    name?: string | null;
+    email?: string | null;
+    role?: ReactNode;
+    memberSince?: ReactNode;
+    value: string;
+    onChange: (value: string) => void;
+    onSave: () => void;
+    saving?: boolean;
+    labels: ProfileSettingLabels;
+}): react.JSX.Element;
+interface PasswordSettingLabels {
+    title: string;
+    current: string;
+    next: string;
+    confirm: string;
+    submit: string;
+    tooShort: string;
+    mismatch: string;
+}
+declare function PasswordSetting({ onSubmit, pending, minLength, labels, }: {
+    /** Called with the validated (current, new) pair; return a promise to auto-clear on success. */
+    onSubmit: (currentPassword: string, newPassword: string) => void | Promise<unknown>;
+    pending?: boolean;
+    minLength?: number;
+    labels: PasswordSettingLabels;
+}): react.JSX.Element;
+interface TwoFactorSettingLabels {
+    status: string;
+    enabledText: string;
+    disabledText: string;
+    enable: string;
+    scanHint: string;
+    codeLabel: string;
+    verify: string;
+    disableSection: string;
+    password: string;
+    disable: string;
+}
+declare function TwoFactorSetting({ enabled, setup, onStartSetup, onEnable, onDisable, busy, labels, }: {
+    enabled: boolean;
+    /** QR + secret returned by the app's setup call; null before setup starts. */
+    setup: {
+        qrSvg: string;
+        secret: string;
+    } | null;
+    onStartSetup: () => void;
+    onEnable: (code: string) => void;
+    onDisable: (password: string, code: string) => void;
+    busy?: boolean;
+    labels: TwoFactorSettingLabels;
+}): react.JSX.Element;
+
+export { PasswordSetting, type PasswordSettingLabels, ProfileSetting, type ProfileSettingLabels, TwoFactorSetting, type TwoFactorSettingLabels };

package/dist/components/account-settings.js

@@ -0,0 +1,159 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Card, FIELD_WRITABLE_LOOK, Input } from "./ui.js";
+import { UserAvatar } from "./user-avatar.js";
+function ProfileSetting({
+  name,
+  email,
+  role,
+  memberSince,
+  value,
+  onChange,
+  onSave,
+  saving,
+  labels
+}) {
+  const dirty = value.trim().length > 0 && value.trim() !== (name ?? "");
+  return /* @__PURE__ */ jsxs(Card, { className: "p-4 space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(UserAvatar, { name, email, size: "lg" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.title }),
+        /* @__PURE__ */ jsx("div", { className: "truncate font-mono text-xs text-slate-500 dark:text-slate-400", children: email ?? "\u2014" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: labels.role }),
+      /* @__PURE__ */ jsx("span", { children: role ?? "\u2014" }),
+      /* @__PURE__ */ jsx("span", { className: "text-slate-500", children: labels.memberSince }),
+      /* @__PURE__ */ jsx("span", { children: memberSince ?? "\u2014" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: "display-name",
+        label: labels.displayName,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        maxLength: 120
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { onClick: onSave, disabled: !dirty || saving, children: labels.save })
+  ] });
+}
+function PasswordSetting({
+  onSubmit,
+  pending,
+  minLength = 8,
+  labels
+}) {
+  const [current, setCurrent] = useState("");
+  const [next, setNext] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [error, setError] = useState(null);
+  const submit = async () => {
+    if (next.length < minLength) {
+      setError(labels.tooShort);
+      return;
+    }
+    if (next !== confirm) {
+      setError(labels.mismatch);
+      return;
+    }
+    setError(null);
+    try {
+      await onSubmit(current, next);
+      setCurrent("");
+      setNext("");
+      setConfirm("");
+    } catch {
+    }
+  };
+  return /* @__PURE__ */ jsxs(Card, { className: "p-4 space-y-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.title }),
+    /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "current-password", label: labels.current, value: current, onChange: (e) => setCurrent(e.target.value) }),
+    /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "new-password", label: labels.next, value: next, onChange: (e) => setNext(e.target.value) }),
+    /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "new-password", label: labels.confirm, value: confirm, onChange: (e) => setConfirm(e.target.value) }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-rose-600 dark:text-rose-400", children: error }),
+    /* @__PURE__ */ jsx(Button, { onClick: () => void submit(), disabled: !current || !next || !confirm || pending, children: labels.submit })
+  ] });
+}
+function TwoFactorSetting({
+  enabled,
+  setup,
+  onStartSetup,
+  onEnable,
+  onDisable,
+  busy,
+  labels
+}) {
+  const [code, setCode] = useState("");
+  const [password, setPassword] = useState("");
+  const [otpReadonly, setOtpReadonly] = useState(true);
+  const onOtpFocus = () => setOtpReadonly(false);
+  return /* @__PURE__ */ jsxs(Card, { className: "p-4 space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+      labels.status,
+      ": ",
+      enabled ? labels.enabledText : labels.disabledText
+    ] }),
+    !enabled && !setup && /* @__PURE__ */ jsx(Button, { onClick: onStartSetup, disabled: busy, children: labels.enable }),
+    setup && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-600 dark:text-slate-400", children: labels.scanHint }),
+      /* @__PURE__ */ jsx("div", { className: "inline-block rounded-md bg-white p-2", children: /* @__PURE__ */ jsx("img", { alt: "QR", src: `data:image/svg+xml;base64,${setup.qrSvg}`, className: "h-48 w-48" }) }),
+      /* @__PURE__ */ jsx("div", { className: "break-all font-mono text-xs", children: setup.secret }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          inputMode: "numeric",
+          autoComplete: "one-time-code",
+          readOnly: otpReadonly,
+          inputClassName: FIELD_WRITABLE_LOOK,
+          onFocus: onOtpFocus,
+          maxLength: 8,
+          label: labels.codeLabel,
+          value: code,
+          onChange: (e) => setCode(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && code && !busy) {
+              e.preventDefault();
+              onEnable(code);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { onClick: () => onEnable(code), disabled: !code || busy, children: labels.verify })
+    ] }),
+    enabled && /* @__PURE__ */ jsxs("div", { className: "space-y-3 border-t border-slate-200 pt-3 dark:border-slate-700", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.disableSection }),
+      /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "current-password", label: labels.password, value: password, onChange: (e) => setPassword(e.target.value) }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          inputMode: "numeric",
+          autoComplete: "one-time-code",
+          readOnly: otpReadonly,
+          inputClassName: FIELD_WRITABLE_LOOK,
+          onFocus: onOtpFocus,
+          maxLength: 8,
+          label: labels.codeLabel,
+          value: code,
+          onChange: (e) => setCode(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && password && code && !busy) {
+              e.preventDefault();
+              onDisable(password, code);
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "danger", onClick: () => onDisable(password, code), disabled: !password || !code || busy, children: labels.disable })
+    ] })
+  ] });
+}
+export {
+  PasswordSetting,
+  ProfileSetting,
+  TwoFactorSetting
+};
+//# sourceMappingURL=account-settings.js.map

package/dist/components/account-settings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/account-settings.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Button, Card, FIELD_WRITABLE_LOOK, Input } from \"./ui\";\nimport { UserAvatar } from \"./user-avatar\";\n\n/**\n * App-agnostic account-settings SECTIONS (feedback #333). The presentation lives\n * in @hb/ui; each app injects its own auth-API handlers + translated labels and\n * arranges these next to its own app-specific cards (appearance, budgets, …).\n * Every section is a self-contained <Card> owning its transient form state.\n */\n\nexport interface ProfileSettingLabels {\n  title: string;\n  email: string;\n  role: string;\n  memberSince: string;\n  displayName: string;\n  save: string;\n}\n\nexport function ProfileSetting({\n  name,\n  email,\n  role,\n  memberSince,\n  value,\n  onChange,\n  onSave,\n  saving,\n  labels,\n}: {\n  name?: string | null;\n  email?: string | null;\n  role?: ReactNode;\n  memberSince?: ReactNode;\n  value: string;\n  onChange: (value: string) => void;\n  onSave: () => void;\n  saving?: boolean;\n  labels: ProfileSettingLabels;\n}) {\n  const dirty = value.trim().length > 0 && value.trim() !== (name ?? \"\");\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"flex items-center gap-3\">\n        <UserAvatar name={name} email={email} size=\"lg\" />\n        <div className=\"min-w-0\">\n          <div className=\"text-sm font-medium\">{labels.title}</div>\n          <div className=\"truncate font-mono text-xs text-slate-500 dark:text-slate-400\">{email ?? \"—\"}</div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm\">\n        <span className=\"text-slate-500\">{labels.role}</span>\n        <span>{role ?? \"—\"}</span>\n        <span className=\"text-slate-500\">{labels.memberSince}</span>\n        <span>{memberSince ?? \"—\"}</span>\n      </div>\n      <Input\n        id=\"display-name\"\n        label={labels.displayName}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        maxLength={120}\n      />\n      <Button onClick={onSave} disabled={!dirty || saving}>\n        {labels.save}\n      </Button>\n    </Card>\n  );\n}\n\nexport interface PasswordSettingLabels {\n  title: string;\n  current: string;\n  next: string;\n  confirm: string;\n  submit: string;\n  tooShort: string;\n  mismatch: string;\n}\n\nexport function PasswordSetting({\n  onSubmit,\n  pending,\n  minLength = 8,\n  labels,\n}: {\n  /** Called with the validated (current, new) pair; return a promise to auto-clear on success. */\n  onSubmit: (currentPassword: string, newPassword: string) => void | Promise<unknown>;\n  pending?: boolean;\n  minLength?: number;\n  labels: PasswordSettingLabels;\n}) {\n  const [current, setCurrent] = useState(\"\");\n  const [next, setNext] = useState(\"\");\n  const [confirm, setConfirm] = useState(\"\");\n  const [error, setError] = useState<string | null>(null);\n\n  const submit = async () => {\n    if (next.length < minLength) {\n      setError(labels.tooShort);\n      return;\n    }\n    if (next !== confirm) {\n      setError(labels.mismatch);\n      return;\n    }\n    setError(null);\n    try {\n      await onSubmit(current, next);\n      setCurrent(\"\");\n      setNext(\"\");\n      setConfirm(\"\");\n    } catch {\n      // The app surfaces the failure (e.g. a toast); keep the fields for a retry.\n    }\n  };\n\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"text-sm font-medium\">{labels.title}</div>\n      <Input type=\"password\" autoComplete=\"current-password\" label={labels.current} value={current} onChange={(e) => setCurrent(e.target.value)} />\n      <Input type=\"password\" autoComplete=\"new-password\" label={labels.next} value={next} onChange={(e) => setNext(e.target.value)} />\n      <Input type=\"password\" autoComplete=\"new-password\" label={labels.confirm} value={confirm} onChange={(e) => setConfirm(e.target.value)} />\n      {error && <p className=\"text-xs text-rose-600 dark:text-rose-400\">{error}</p>}\n      <Button onClick={() => void submit()} disabled={!current || !next || !confirm || pending}>\n        {labels.submit}\n      </Button>\n    </Card>\n  );\n}\n\nexport interface TwoFactorSettingLabels {\n  status: string;\n  enabledText: string;\n  disabledText: string;\n  enable: string;\n  scanHint: string;\n  codeLabel: string;\n  verify: string;\n  disableSection: string;\n  password: string;\n  disable: string;\n}\n\nexport function TwoFactorSetting({\n  enabled,\n  setup,\n  onStartSetup,\n  onEnable,\n  onDisable,\n  busy,\n  labels,\n}: {\n  enabled: boolean;\n  /** QR + secret returned by the app's setup call; null before setup starts. */\n  setup: { qrSvg: string; secret: string } | null;\n  onStartSetup: () => void;\n  onEnable: (code: string) => void;\n  onDisable: (password: string, code: string) => void;\n  busy?: boolean;\n  labels: TwoFactorSettingLabels;\n}) {\n  const [code, setCode] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  // Browsers autofill one-time-code fields with the saved username; keep the\n  // field readOnly until focus to block that. It therefore has to keep the LOOK of\n  // an editable field (FIELD_WRITABLE_LOOK): this is the one place where readOnly\n  // does not mean \"you may not type here\", and without the opt-out the field would\n  // sit there greyed until the moment it is focused.\n  const [otpReadonly, setOtpReadonly] = useState(true);\n  const onOtpFocus = () => setOtpReadonly(false);\n\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"text-sm\">\n        {labels.status}: {enabled ? labels.enabledText : labels.disabledText}\n      </div>\n\n      {!enabled && !setup && (\n        <Button onClick={onStartSetup} disabled={busy}>\n          {labels.enable}\n        </Button>\n      )}\n\n      {setup && (\n        <div className=\"space-y-2\">\n          <div className=\"text-xs text-slate-600 dark:text-slate-400\">{labels.scanHint}</div>\n          <div className=\"inline-block rounded-md bg-white p-2\">\n            <img alt=\"QR\" src={`data:image/svg+xml;base64,${setup.qrSvg}`} className=\"h-48 w-48\" />\n          </div>\n          <div className=\"break-all font-mono text-xs\">{setup.secret}</div>\n          <Input\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            readOnly={otpReadonly}\n            inputClassName={FIELD_WRITABLE_LOOK}\n            onFocus={onOtpFocus}\n            maxLength={8}\n            label={labels.codeLabel}\n            value={code}\n            onChange={(e) => setCode(e.target.value)}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (e.key === \"Enter\" && code && !busy) {\n                e.preventDefault();\n                onEnable(code);\n              }\n            }}\n          />\n          <Button onClick={() => onEnable(code)} disabled={!code || busy}>\n            {labels.verify}\n          </Button>\n        </div>\n      )}\n\n      {enabled && (\n        <div className=\"space-y-3 border-t border-slate-200 pt-3 dark:border-slate-700\">\n          <div className=\"text-sm font-medium\">{labels.disableSection}</div>\n          <Input type=\"password\" autoComplete=\"current-password\" label={labels.password} value={password} onChange={(e) => setPassword(e.target.value)} />\n          <Input\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            readOnly={otpReadonly}\n            inputClassName={FIELD_WRITABLE_LOOK}\n            onFocus={onOtpFocus}\n            maxLength={8}\n            label={labels.codeLabel}\n            value={code}\n            onChange={(e) => setCode(e.target.value)}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (e.key === \"Enter\" && password && code && !busy) {\n                e.preventDefault();\n                onDisable(password, code);\n              }\n            }}\n          />\n          <Button variant=\"danger\" onClick={() => onDisable(password, code)} disabled={!password || !code || busy}>\n            {labels.disable}\n          </Button>\n        </div>\n      )}\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/alert-banner.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type AlertTone = "danger" | "warning" | "neutral";
+/** The tone's border + surface on their own — for a caller that already has a box
+ * with its own radius and padding (e.g. a Card). Remember to shave 1px off that
+ * padding for the colored tones, whose border is 2px wide. */
+declare function toneFrameClass(tone: AlertTone): string;
+/** Single source for the warning-callout frame (feedback #277): the tone's border
+ * and surface plus this component's own radius and padding, the latter
+ * compensating the 2px colored border so toggling tones never shifts layout. */
+declare function alertFrameClass(tone: AlertTone): string;
+/** Static warning/danger callout box with the shared frame and an icon. */
+declare function AlertBanner({ tone, className, children, }: {
+    tone?: Exclude<AlertTone, "neutral">;
+    className?: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+export { AlertBanner, type AlertTone, alertFrameClass, toneFrameClass };

package/dist/components/alert-banner.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle } from "lucide-react";
+import { cn } from "../lib/cn.js";
+const TONE_FRAME = {
+  danger: "border-2 border-rose-400 bg-rose-50 dark:border-rose-600 dark:bg-rose-900/20",
+  warning: "border-2 border-amber-300 bg-amber-50 dark:border-amber-700/60 dark:bg-amber-900/20",
+  neutral: "border border-slate-200 dark:border-slate-700"
+};
+function toneFrameClass(tone) {
+  return TONE_FRAME[tone];
+}
+function alertFrameClass(tone) {
+  const box = tone === "neutral" ? "rounded-md p-3" : "rounded-md p-[11px]";
+  return `${box} ${TONE_FRAME[tone]}`;
+}
+const TONE_TEXT = {
+  danger: "text-rose-900 dark:text-rose-100",
+  warning: "text-amber-900 dark:text-amber-200"
+};
+const TONE_ICON = {
+  danger: "text-rose-600 dark:text-rose-400",
+  warning: "text-amber-600 dark:text-amber-400"
+};
+function AlertBanner({
+  tone = "danger",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-2 text-sm", alertFrameClass(tone), TONE_TEXT[tone], className), children: [
+    /* @__PURE__ */ jsx(AlertTriangle, { className: cn("mt-0.5 size-4 shrink-0", TONE_ICON[tone]) }),
+    /* @__PURE__ */ jsx("span", { className: "flex-1", children })
+  ] });
+}
+export {
+  AlertBanner,
+  alertFrameClass,
+  toneFrameClass
+};
+//# sourceMappingURL=alert-banner.js.map

package/dist/components/alert-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { AlertTriangle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\n\nexport type AlertTone = \"danger\" | \"warning\" | \"neutral\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-rose-400 bg-rose-50 dark:border-rose-600 dark:bg-rose-900/20\",\n  warning: \"border-2 border-amber-300 bg-amber-50 dark:border-amber-700/60 dark:bg-amber-900/20\",\n  neutral: \"border border-slate-200 dark:border-slate-700\",\n};\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout. */\nexport function alertFrameClass(tone: AlertTone): string {\n  const box = tone === \"neutral\" ? \"rounded-md p-3\" : \"rounded-md p-[11px]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\nconst TONE_TEXT: Record<Exclude<AlertTone, \"neutral\">, string> = {\n  danger: \"text-rose-900 dark:text-rose-100\",\n  warning: \"text-amber-900 dark:text-amber-200\",\n};\n\nconst TONE_ICON: Record<Exclude<AlertTone, \"neutral\">, string> = {\n  danger: \"text-rose-600 dark:text-rose-400\",\n  warning: \"text-amber-600 dark:text-amber-400\",\n};\n\n/** Static warning/danger callout box with the shared frame and an icon. */\nexport function AlertBanner({\n  tone = \"danger\",\n  className,\n  children,\n}: {\n  tone?: Exclude<AlertTone, \"neutral\">;\n  className?: string;\n  children: ReactNode;\n}) {\n  return (\n    <div className={cn(\"flex items-start gap-2 text-sm\", alertFrameClass(tone), TONE_TEXT[tone], className)}>\n      <AlertTriangle className={cn(\"mt-0.5 size-4 shrink-0\", TONE_ICON[tone])} />\n      <span className=\"flex-1\">{children}</span>\n    </div>\n  );\n}\n"],"mappings":"AA6DI,SACE,KADF;AA5DJ,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AAiBnB,MAAM,aAAwC;AAAA,EAC5C,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AACX;AAKO,SAAS,eAAe,MAAyB;AACtD,SAAO,WAAW,IAAI;AACxB;AAKO,SAAS,gBAAgB,MAAyB;AACvD,QAAM,MAAM,SAAS,YAAY,mBAAmB;AACpD,SAAO,GAAG,GAAG,IAAI,WAAW,IAAI,CAAC;AACnC;AAEA,MAAM,YAA2D;AAAA,EAC/D,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,MAAM,YAA2D;AAAA,EAC/D,QAAQ;AAAA,EACR,SAAS;AACX;AAGO,SAAS,YAAY;AAAA,EAC1B,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,SAAI,WAAW,GAAG,kCAAkC,gBAAgB,IAAI,GAAG,UAAU,IAAI,GAAG,SAAS,GACpG;AAAA,wBAAC,iBAAc,WAAW,GAAG,0BAA0B,UAAU,IAAI,CAAC,GAAG;AAAA,IACzE,oBAAC,UAAK,WAAU,UAAU,UAAS;AAAA,KACrC;AAEJ;","names":[]}

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

@@ -0,0 +1,117 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { CalculatorButtonLabels } from './calculator.js';
+import { NumberPadSheetLabels } from './numpad-sheet.js';
+
+interface AmountInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    currency?: string;
+    onCurrencyChange?: (code: string) => void;
+    placeholder?: string;
+    label?: ReactNode;
+    disabled?: boolean;
+    /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
+    invalid?: boolean;
+    className?: string;
+    id?: string;
+    ariaLabel?: string;
+    /** Every user-facing string this component and the two it composes own, so a
+     *  translating host can supply its own. The package carries no translation
+     *  catalog (see the README) — English defaults, each key optional, so the other
+     *  consumer apps are unaffected. `currency` names the picker chip and is
+     *  suffixed with the selected code; the rest are pass-through. */
+    labels?: {
+        currency?: string;
+        currencySearch?: string;
+        /** Names the calculator TRIGGER this component renders. `calculator` below
+         *  names the controls inside the popover it opens. */
+        calculatorTrigger?: string;
+        pad?: NumberPadSheetLabels;
+        calculator?: CalculatorButtonLabels;
+    };
+    /** Focus the field on mount — on mobile this also opens the numpad sheet, so a
+     *  new-transaction form can jump straight to amount entry (feedback #70). */
+    autoFocus?: boolean;
+    /**
+     * Tint the typed figure by what it will DO (Keksdose feedback #167).
+     *
+     * The direction is chosen with a toggle beside the field rather than typed, so
+     * the digits alone say nothing about which way the money goes — on the one screen
+     * where getting that backwards is the expensive mistake. Colour says it
+     * continuously, and it costs no layout. It stays the MAIN indication (live #201
+     * rework: *"The main indication shall still be the color"*); {@link negative}
+     * renders the sign as a second, quieter signal in front of the figure.
+     *
+     * Never the ONLY signal: the toggle it mirrors is right there, labelled, so this
+     * is reinforcement rather than the sole carrier of the meaning.
+     */
+    tone?: "neutral" | "outflow" | "inflow";
+    /**
+     * The SIGN of the figure, owned by the caller's direction control (Keksdose live
+     * #201 rework: *"Outflow should be negative and inflow positive … the sign shall
+     * be displayed but not necessarily be typed in"*).
+     *
+     * `value` stays the MAGNITUDE. The minus is glued on at render time and stripped
+     * off again before anything is reported back, so the caller never sees its own
+     * prefix echoed and no code path can end up applying it twice. That is the whole
+     * cure: there is exactly ONE place the sign lives, and it is not the text.
+     *
+     * Because it is rendered rather than stored it cannot be deleted (the next render
+     * puts it back), a select-all-and-retype keeps the direction, and the caret needs
+     * no minding.
+     */
+    negative?: boolean;
+    /**
+     * A sign the user TYPED, or a calculation that resolved to a signed number.
+     *
+     * SET, never flip. A "-" means *"this is an outflow"*, so typing it twice says the
+     * same thing twice — which is exactly what the rework asks for (*"Subtracting
+     * values twice resulting in inflow -> outflow and back to inflow seems not
+     * reasonable"*). "+" says the other direction.
+     *
+     * Its presence is what ARMS the whole sign behaviour. A field with no direction
+     * control — an account's starting balance, a loan payment, a holding's cost —
+     * passes neither prop and keeps a text that is the whole truth, minus included.
+     */
+    onNegativeChange?: (negative: boolean) => void;
+    /**
+     * How the field presents itself ON A PHONE (Keksdose feedback #176).
+     *
+     * `"field"` (default) is the labelled, bordered input used everywhere else.
+     *
+     * `"display"` keeps every mechanic — the same `<input>`, the same numpad sheet,
+     * the same currency picker, the same commit/blur contract — and only drops the
+     * chrome: no border, no fill, no floating label, the figure set at display size.
+     * On a form whose whole point is one number, a bordered `text-sm` box draws the
+     * amount at the same weight as the memo beside it; this makes it the headline
+     * instead. It stays fully editable — the underline and the caret are what say so.
+     *
+     * Phone-only by construction: it keys off the same breakpoint as the numpad, so
+     * from `md` up the field is byte-for-byte the normal one and a desktop grid keeps
+     * its column rhythm.
+     */
+    variant?: "field" | "display";
+    /**
+     * Where the figure sits in its row, for `variant="display"` only (Keksdose
+     * feedback #176 rework).
+     *
+     * `"start"` (default) keeps it flush left, in the reading column the fields
+     * below it share — and it is what the entry forms use, because a figure that
+     * starts at a known edge is legible at any width: when the value outgrows the
+     * field, the digits that scroll out of sight are the trailing ones, not the
+     * magnitude (Keksdose feedback #430 rework).
+     *
+     * `"center"` makes it a centred headline. It centres in the width that REMAINS
+     * after the trailing currency control, not in the whole box: the control is
+     * pinned to the right edge, so a plain `text-center` would centre the figure
+     * under it and the last digits would sit behind the chip. This used to mirror
+     * the control's reservation onto the left instead, which centred correctly but
+     * spent twice the control's width on padding — fatal on a 375px screen, where
+     * it left a 36px figure 16px to live in.
+     */
+    align?: "start" | "center";
+}
+declare const AmountInput: react.ForwardRefExoticComponent<AmountInputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { AmountInput };