@eifi1/ui-kit 0.10.0 → 0.12.0

package/dist/wizard/wizard-context.d.ts

@@ -15,5 +15,34 @@ interface WizardContextValue {
 }
 declare const WizardContextProvider: react.Provider<WizardContextValue | null>;
 declare function useWizardContext(): WizardContextValue;
+/**
+ * The wizard context, or `null` outside a `<StepperNav>`. For a hook that registers
+ * with the wizard when there is one and works without it — `useRhfWizardStep` in
+ * `@eifi1/ui-kit/rhf`, whose returned `validate` a custom nav can call itself.
+ */
+declare function useOptionalWizardContext(): WizardContextValue | null;
+/**
+ * Registers a plain validator for the mounted step — the counterpart to
+ * `useRhfWizardStep` (in `@eifi1/ui-kit/rhf`) for a step that gates on its own state
+ * (a hand-managed list of lines, a sum that has to balance) rather than a form.
+ *
+ * ```tsx
+ * useWizardStepValidate(() => ({ ok: lines.length >= 2, errors: { lines: t("…") } }));
+ * ```
+ *
+ * Next (and Finish) run it with the step's other validators; a `false` or a result
+ * with `ok: false` keeps the wizard where it is. `validate` is read through a ref, so
+ * an inline closure over the latest state registers exactly once. Throws outside a
+ * `<StepperNav>`, like {@link useWizardContext}: a validator with nothing to run it is
+ * a bug to hear about.
+ */
+declare function useWizardStepValidate(validate: () => ValidateResult | Promise<ValidateResult>): void;
+/**
+ * Disables the wizard's Next and Skip while `blocked` holds (tenant shares that do not
+ * add up to 100 %). Unlike {@link useWizardStepValidate}, which answers a click, this
+ * greys the button out before one. The gate is lifted again when the step unmounts, so
+ * the next step starts unblocked.
+ */
+declare function useWizardNextGate(blocked: boolean): void;
 
-export { WizardContextProvider, type WizardContextValue, useWizardContext };
+export { WizardContextProvider, type WizardContextValue, useOptionalWizardContext, useWizardContext, useWizardNextGate, useWizardStepValidate };

package/dist/wizard/wizard-context.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useEffect, useRef } from "react";
 const WizardContext = createContext(null);
 const WizardContextProvider = WizardContext.Provider;
 function useWizardContext() {
@@ -9,8 +9,29 @@ function useWizardContext() {
   }
   return ctx;
 }
+function useOptionalWizardContext() {
+  return useContext(WizardContext);
+}
+function useWizardStepValidate(validate) {
+  const { registerStepValidate } = useWizardContext();
+  const ref = useRef(validate);
+  useEffect(() => {
+    ref.current = validate;
+  });
+  useEffect(() => registerStepValidate(() => ref.current()), [registerStepValidate]);
+}
+function useWizardNextGate(blocked) {
+  const { setNextBlocked } = useWizardContext();
+  useEffect(() => {
+    setNextBlocked(blocked);
+    return () => setNextBlocked(false);
+  }, [blocked, setNextBlocked]);
+}
 export {
   WizardContextProvider,
-  useWizardContext
+  useOptionalWizardContext,
+  useWizardContext,
+  useWizardNextGate,
+  useWizardStepValidate
 };
 //# sourceMappingURL=wizard-context.js.map

package/dist/wizard/wizard-context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wizard/wizard-context.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { ValidateResult } from \"./types\";\n\nexport interface WizardContextValue {\n  /**\n   * Register a validator for the currently-mounted step. Returns an unregister\n   * fn (call it in a useEffect cleanup). `goNext` runs every registered\n   * validator for the active step (plus the step config's own `validate`),\n   * AND-combining the results — this replaces the per-page `useRef` +\n   * `validate: () => ref.current?.()` bridge each RHF step used to wire.\n   */\n  registerStepValidate: (\n    fn: () => ValidateResult | Promise<ValidateResult>,\n  ) => () => void;\n  /** Lets the mounted step disable Next/Skip (e.g. invalid tenant shares). */\n  setNextBlocked: (blocked: boolean) => void;\n}\n\nconst WizardContext = createContext<WizardContextValue | null>(null);\n\nexport const WizardContextProvider = WizardContext.Provider;\n\nexport function useWizardContext(): WizardContextValue {\n  const ctx = useContext(WizardContext);\n  if (!ctx) {\n    throw new Error(\"useWizardContext must be used within a <StepperNav>\");\n  }\n  return ctx;\n}\n"],"mappings":";AAAA,SAAS,eAAe,kBAAkB;AAkB1C,MAAM,gBAAgB,cAAyC,IAAI;AAE5D,MAAM,wBAAwB,cAAc;AAE5C,SAAS,mBAAuC;AACrD,QAAM,MAAM,WAAW,aAAa;AACpC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/wizard/wizard-context.tsx"],"sourcesContent":["import { createContext, useContext, useEffect, useRef } from \"react\";\nimport type { ValidateResult } from \"./types\";\n\nexport interface WizardContextValue {\n  /**\n   * Register a validator for the currently-mounted step. Returns an unregister\n   * fn (call it in a useEffect cleanup). `goNext` runs every registered\n   * validator for the active step (plus the step config's own `validate`),\n   * AND-combining the results — this replaces the per-page `useRef` +\n   * `validate: () => ref.current?.()` bridge each RHF step used to wire.\n   */\n  registerStepValidate: (\n    fn: () => ValidateResult | Promise<ValidateResult>,\n  ) => () => void;\n  /** Lets the mounted step disable Next/Skip (e.g. invalid tenant shares). */\n  setNextBlocked: (blocked: boolean) => void;\n}\n\nconst WizardContext = createContext<WizardContextValue | null>(null);\n\nexport const WizardContextProvider = WizardContext.Provider;\n\nexport function useWizardContext(): WizardContextValue {\n  const ctx = useContext(WizardContext);\n  if (!ctx) {\n    throw new Error(\"useWizardContext must be used within a <StepperNav>\");\n  }\n  return ctx;\n}\n\n/**\n * The wizard context, or `null` outside a `<StepperNav>`. For a hook that registers\n * with the wizard when there is one and works without it — `useRhfWizardStep` in\n * `@eifi1/ui-kit/rhf`, whose returned `validate` a custom nav can call itself.\n */\nexport function useOptionalWizardContext(): WizardContextValue | null {\n  return useContext(WizardContext);\n}\n\n/**\n * Registers a plain validator for the mounted step — the counterpart to\n * `useRhfWizardStep` (in `@eifi1/ui-kit/rhf`) for a step that gates on its own state\n * (a hand-managed list of lines, a sum that has to balance) rather than a form.\n *\n * ```tsx\n * useWizardStepValidate(() => ({ ok: lines.length >= 2, errors: { lines: t(\"…\") } }));\n * ```\n *\n * Next (and Finish) run it with the step's other validators; a `false` or a result\n * with `ok: false` keeps the wizard where it is. `validate` is read through a ref, so\n * an inline closure over the latest state registers exactly once. Throws outside a\n * `<StepperNav>`, like {@link useWizardContext}: a validator with nothing to run it is\n * a bug to hear about.\n */\nexport function useWizardStepValidate(\n  validate: () => ValidateResult | Promise<ValidateResult>,\n): void {\n  const { registerStepValidate } = useWizardContext();\n  const ref = useRef(validate);\n  useEffect(() => {\n    ref.current = validate;\n  });\n  useEffect(() => registerStepValidate(() => ref.current()), [registerStepValidate]);\n}\n\n/**\n * Disables the wizard's Next and Skip while `blocked` holds (tenant shares that do not\n * add up to 100 %). Unlike {@link useWizardStepValidate}, which answers a click, this\n * greys the button out before one. The gate is lifted again when the step unmounts, so\n * the next step starts unblocked.\n */\nexport function useWizardNextGate(blocked: boolean): void {\n  const { setNextBlocked } = useWizardContext();\n  useEffect(() => {\n    setNextBlocked(blocked);\n    return () => setNextBlocked(false);\n  }, [blocked, setNextBlocked]);\n}\n"],"mappings":";AAAA,SAAS,eAAe,YAAY,WAAW,cAAc;AAkB7D,MAAM,gBAAgB,cAAyC,IAAI;AAE5D,MAAM,wBAAwB,cAAc;AAE5C,SAAS,mBAAuC;AACrD,QAAM,MAAM,WAAW,aAAa;AACpC,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;AAOO,SAAS,2BAAsD;AACpE,SAAO,WAAW,aAAa;AACjC;AAiBO,SAAS,sBACd,UACM;AACN,QAAM,EAAE,qBAAqB,IAAI,iBAAiB;AAClD,QAAM,MAAM,OAAO,QAAQ;AAC3B,YAAU,MAAM;AACd,QAAI,UAAU;AAAA,EAChB,CAAC;AACD,YAAU,MAAM,qBAAqB,MAAM,IAAI,QAAQ,CAAC,GAAG,CAAC,oBAAoB,CAAC;AACnF;AAQO,SAAS,kBAAkB,SAAwB;AACxD,QAAM,EAAE,eAAe,IAAI,iBAAiB;AAC5C,YAAU,MAAM;AACd,mBAAe,OAAO;AACtB,WAAO,MAAM,eAAe,KAAK;AAAA,EACnC,GAAG,CAAC,SAAS,cAAc,CAAC;AAC9B;","names":[]}

package/dist/wizard/wizard-step.d.ts

@@ -1,11 +1,26 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 
-/** The vertical rhythm one wizard step's content sits on. A component rather
- *  than a class string so every step in every app spaces its fields the same. */
-declare function WizardStep({ children, className, }: {
+interface WizardStepProps {
     children: ReactNode;
     className?: string;
-}): react.JSX.Element;
+    /**
+     * The step's heading ("Choose a unit"), drawn in the one style every step shares.
+     * kastlan's steps each hand-wrote `<h3 className="text-lg font-semibold">` (about
+     * sixteen of them: lease-picker-step, lease-unit-step, …), and a hand-written
+     * heading is one that drifts — a size here, a colour there. Omitted: no heading.
+     */
+    title?: ReactNode;
+    /** The line under the title: what the step asks for, or why. Rendered only with a
+     *  `title` or on its own when there is none. */
+    description?: ReactNode;
+    /** The heading's level. Default 3: the page has its `h1` and the wizard's own
+     *  chrome sits at `h2` (the review step, the cancel dialog), so a step is under it. */
+    headingLevel?: 2 | 3 | 4;
+}
+/** The vertical rhythm one wizard step's content sits on. A component rather
+ *  than a class string so every step in every app spaces its fields the same —
+ *  and, with `title` / `description`, heads them the same. */
+declare function WizardStep({ children, className, title, description, headingLevel, }: WizardStepProps): react.JSX.Element;
 
-export { WizardStep };
+export { WizardStep, type WizardStepProps };

package/dist/wizard/wizard-step.js

@@ -1,11 +1,24 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
+const HEADING = { 2: "h2", 3: "h3", 4: "h4" };
 function WizardStep({
   children,
-  className
+  className,
+  title,
+  description,
+  headingLevel = 3
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("space-y-6", className), children });
+  const hasTitle = title !== void 0 && title !== null && title !== false && title !== "";
+  const hasDescription = description !== void 0 && description !== null && description !== false && description !== "";
+  const Heading = HEADING[headingLevel];
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-6", className), children: [
+    (hasTitle || hasDescription) && /* @__PURE__ */ jsxs("div", { "data-slot": "wizard-step-header", className: "space-y-1", children: [
+      hasTitle && /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-[var(--text-primary)]", children: title }),
+      hasDescription && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-muted)]", children: description })
+    ] }),
+    children
+  ] });
 }
 export {
   WizardStep

package/dist/wizard/wizard-step.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wizard/wizard-step.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/** The vertical rhythm one wizard step's content sits on. A component rather\n *  than a class string so every step in every app spaces its fields the same. */\nexport function WizardStep({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) {\n  return <div className={cn(\"space-y-6\", className)}>{children}</div>;\n}\n"],"mappings":";AAYS;AAXT,SAAS,UAAU;AAIZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AACF,GAGG;AACD,SAAO,oBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GAAI,UAAS;AAC/D;","names":[]}
+{"version":3,"sources":["../../src/wizard/wizard-step.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface WizardStepProps {\n  children: ReactNode;\n  className?: string;\n  /**\n   * The step's heading (\"Choose a unit\"), drawn in the one style every step shares.\n   * kastlan's steps each hand-wrote `<h3 className=\"text-lg font-semibold\">` (about\n   * sixteen of them: lease-picker-step, lease-unit-step, …), and a hand-written\n   * heading is one that drifts — a size here, a colour there. Omitted: no heading.\n   */\n  title?: ReactNode;\n  /** The line under the title: what the step asks for, or why. Rendered only with a\n   *  `title` or on its own when there is none. */\n  description?: ReactNode;\n  /** The heading's level. Default 3: the page has its `h1` and the wizard's own\n   *  chrome sits at `h2` (the review step, the cancel dialog), so a step is under it. */\n  headingLevel?: 2 | 3 | 4;\n}\n\nconst HEADING = { 2: \"h2\", 3: \"h3\", 4: \"h4\" } as const;\n\n/** The vertical rhythm one wizard step's content sits on. A component rather\n *  than a class string so every step in every app spaces its fields the same —\n *  and, with `title` / `description`, heads them the same. */\nexport function WizardStep({\n  children,\n  className,\n  title,\n  description,\n  headingLevel = 3,\n}: WizardStepProps) {\n  const hasTitle = title !== undefined && title !== null && title !== false && title !== \"\";\n  const hasDescription =\n    description !== undefined && description !== null && description !== false && description !== \"\";\n  const Heading = HEADING[headingLevel];\n  return (\n    <div className={cn(\"space-y-6\", className)}>\n      {(hasTitle || hasDescription) && (\n        <div data-slot=\"wizard-step-header\" className=\"space-y-1\">\n          {hasTitle && (\n            <Heading className=\"text-lg font-semibold text-[var(--text-primary)]\">{title}</Heading>\n          )}\n          {hasDescription && <p className=\"text-sm text-[var(--text-muted)]\">{description}</p>}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAwCQ,SAEI,KAFJ;AAvCR,SAAS,UAAU;AAoBnB,MAAM,UAAU,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,KAAK;AAKrC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,GAAoB;AAClB,QAAM,WAAW,UAAU,UAAa,UAAU,QAAQ,UAAU,SAAS,UAAU;AACvF,QAAM,iBACJ,gBAAgB,UAAa,gBAAgB,QAAQ,gBAAgB,SAAS,gBAAgB;AAChG,QAAM,UAAU,QAAQ,YAAY;AACpC,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACrC;AAAA,iBAAY,mBACZ,qBAAC,SAAI,aAAU,sBAAqB,WAAU,aAC3C;AAAA,kBACC,oBAAC,WAAQ,WAAU,oDAAoD,iBAAM;AAAA,MAE9E,kBAAkB,oBAAC,OAAE,WAAU,oCAAoC,uBAAY;AAAA,OAClF;AAAA,IAED;AAAA,KACH;AAEJ;","names":[]}

package/dist/wizard.d.ts

@@ -1,11 +1,59 @@
 export { DEFAULT_WIZARD_LABELS, FieldErrors, StepStatus, SummaryItem, SummarySection, UseWizardOptions, UseWizardReturn, ValidateResult, WizardLabels, WizardStepConfig, WizardUrlSync, resolveWizardLabels } from './wizard/types.js';
 export { useWizard } from './wizard/use-wizard.js';
-export { WizardContextProvider, WizardContextValue, useWizardContext } from './wizard/wizard-context.js';
+export { WizardContextProvider, WizardContextValue, useOptionalWizardContext, useWizardContext, useWizardNextGate, useWizardStepValidate } from './wizard/wizard-context.js';
 export { RequiredFieldSpec, requiredFieldsValidator } from './wizard/validation.js';
-export { WizardStep } from './wizard/wizard-step.js';
+export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './components/ui.js';
+import './kit-labels-v3biUF1L.js';
+import './components/data-table-labels.js';
+import './components/mini-calendar.js';
+import './components/calendar-heatmap.js';
+import './components/popover.js';
+import './components/chip.js';
+import 'lucide-react';
+import './components/field-sync.js';
 import './components/tooltip.js';
 import './hooks/use-anchored-rect.js';
+import './lib/clipping.js';
+import './tour/tour.js';
+import './search/command-palette.js';
+import './search/global-search.js';
+import './search/search-index.js';
+import './components/month-picker.js';
+import './components/page-contents.js';
+import './components/series-chart-labels.js';
+import './components/pie-chart-labels.js';
+import './components/sparkline.js';
+import './components/stat-tile.js';
+import './components/signature-pad.js';
+import './components/password-strength.js';
+import './components/danger-confirm.js';
+import './components/swatch-picker.js';
+import './components/tile-radio.js';
+import './components/icon-picker.js';
+import './components/dialog-frame.js';
+import './components/modal.js';
+import './hooks/use-search-param-state.js';
+import './components/measured-grid.js';
+import './feedback/feedback-attachment.js';
+import './feedback/feedback-dialog.js';
+import './feedback/feedback-thread.js';
+import './feedback/feedback-inbox.js';
+import './components/account-settings-labels.js';
+import './components/confirm-dialog.js';
+import './components/floating-panel.js';
+import './components/bulk-action-bar.js';
+import './components/list.js';
+import './components/breadcrumbs.js';
+import './components/toast.js';
+import './components/description-list.js';
+import './components/line-items.js';
+import './components/progress-bar.js';
+import './components/signed-amount.js';
+import './components/error-boundary.js';
+import './components/authed-image.js';
+import './hooks/use-authed-src.js';
+import './components/image-grid.js';
+import './components/lightbox.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "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. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/chart.ts

@@ -20,3 +20,7 @@ export * from "./components/chart-zoom";
 export * from "./components/toggle-legend";
 export * from "./components/facing-pair";
 export * from "./components/series-chart-labels";
+
+// The part-to-whole chart (donut / pie) — moved here from kastlan's dashboard and reports.
+export * from "./components/pie-chart";
+export * from "./components/pie-chart-labels";

package/src/components/account-settings-labels.ts

@@ -0,0 +1,190 @@
+import { useMemo } from "react";
+import { useKitLabelOverrides } from "../i18n/kit-labels";
+
+/**
+ * The `accountSettings` namespace of `<UiKitProvider labels>`: one record per section —
+ * `profile`, `password`, `twoFactor`, `passkeys` — each merged key by key, so an app
+ * can translate `accountSettings.twoFactor.scanHint` alone.
+ *
+ * Before 0.12.0 every section took a REQUIRED `labels` prop and had no English of its
+ * own, so each app spelled out 30-odd keys at the call site and still hard-coded some
+ * (kastlan's profile page passed `email: "Email"` in English to a German page). The
+ * prop stays, now partial, and wins over the provider as everywhere else in the kit.
+ *
+ * Its own module, beside the components rather than in them, so `PasskeysSetting`
+ * (its own file) and the older three read one tree without importing each other.
+ */
+
+export interface ProfileSettingLabels {
+  title: string;
+  email: string;
+  role: string;
+  memberSince: string;
+  displayName: string;
+  save: string;
+}
+
+export interface PasswordSettingLabels {
+  title: string;
+  current: string;
+  next: string;
+  confirm: string;
+  submit: string;
+  tooShort: string;
+  mismatch: string;
+}
+
+export interface TwoFactorSettingLabels {
+  status: string;
+  enabledText: string;
+  disabledText: string;
+  enable: string;
+  scanHint: string;
+  codeLabel: string;
+  verify: string;
+  disableSection: string;
+  password: string;
+  disable: string;
+  /**
+   * Alt text for the setup QR code, which shipped as a hardcoded `alt="QR"`.
+   *
+   * OPTIONAL, like the two keys below, and not because it matters less: this interface
+   * is annotated at consumer call sites (`const LABELS: TwoFactorSettingLabels = {…}`),
+   * so a new REQUIRED key is a compile error in every app on the next `npm update` —
+   * the additive-API rule in the README. Each falls back to the provider's
+   * `accountSettings.twoFactor`, then English.
+   */
+  qrAlt?: string;
+  /** The line over the manual-entry key, for a phone that cannot scan its own screen. */
+  secretHint?: string;
+  /** The copy button beside that key. */
+  copySecret?: string;
+}
+
+export interface PasskeysSettingLabels {
+  title: string;
+  /** The line under the title saying what a passkey is for. */
+  description: string;
+  empty: string;
+  loading: string;
+  /** Accessible name of the list. */
+  list: string;
+  nameLabel: string;
+  namePlaceholder: string;
+  add: string;
+  /** The add button while the app's WebAuthn ceremony runs — the OS prompt is open. */
+  adding: string;
+  rename: string;
+  /** The row's rename button, named for its passkey — it starts with `rename`, the
+   *  visible text, so voice control finds it by what it says. */
+  renameItem: (name: string) => string;
+  /** Accessible name of the inline rename field. */
+  renameField: (name: string) => string;
+  save: string;
+  cancel: string;
+  delete: string;
+  /** The row's delete button, named for its passkey (see `renameItem`). */
+  deleteItem: (name: string) => string;
+  /** The inline question a delete asks first. */
+  deleteConfirm: (name: string) => string;
+  /** The destructive button that answers it. */
+  confirmDelete: string;
+  /** `date` arrives formatted in the provider's locale. */
+  created: (date: string) => string;
+  lastUsed: (date: string) => string;
+  neverUsed: string;
+}
+
+export interface AccountSettingsLabels {
+  profile: ProfileSettingLabels;
+  password: PasswordSettingLabels;
+  twoFactor: Required<TwoFactorSettingLabels>;
+  passkeys: PasskeysSettingLabels;
+}
+
+export const DEFAULT_ACCOUNT_SETTINGS_LABELS: AccountSettingsLabels = {
+  profile: {
+    title: "Profile",
+    email: "Email",
+    role: "Role",
+    memberSince: "Member since",
+    displayName: "Display name",
+    save: "Save",
+  },
+  password: {
+    title: "Change password",
+    current: "Current password",
+    next: "New password",
+    confirm: "Confirm new password",
+    submit: "Change password",
+    tooShort: "The new password is too short.",
+    mismatch: "The passwords don’t match.",
+  },
+  twoFactor: {
+    status: "Two-factor authentication",
+    enabledText: "On",
+    disabledText: "Off",
+    enable: "Set up two-factor authentication",
+    scanHint: "Scan this code with your authenticator app, then enter the code it shows.",
+    codeLabel: "Verification code",
+    verify: "Verify and turn on",
+    disableSection: "Turn off two-factor authentication",
+    password: "Current password",
+    disable: "Turn off",
+    // Unchanged from the fallback it had before the namespace (i18n-labels.test pins it).
+    qrAlt: "QR code",
+    secretHint: "Can’t scan it? Enter this key in the app instead:",
+    copySecret: "Copy key",
+  },
+  passkeys: {
+    title: "Passkeys",
+    description: "Sign in with your fingerprint, face or device PIN instead of a password.",
+    empty: "No passkeys yet",
+    loading: "Loading passkeys…",
+    list: "Your passkeys",
+    nameLabel: "Name (optional)",
+    namePlaceholder: "e.g. Laptop, Phone",
+    add: "Add passkey",
+    adding: "Waiting for your device…",
+    rename: "Rename",
+    renameItem: (name) => `Rename ${name}`,
+    renameField: (name) => `New name for ${name}`,
+    save: "Save",
+    cancel: "Cancel",
+    delete: "Delete",
+    deleteItem: (name) => `Delete ${name}`,
+    deleteConfirm: (name) => `Delete “${name}”? It can no longer be used to sign in.`,
+    confirmDelete: "Delete passkey",
+    created: (date) => `Added ${date}`,
+    lastUsed: (date) => `Last used ${date}`,
+    neverUsed: "Never used",
+  },
+};
+
+/**
+ * One section of the namespace, resolved: English, then the provider's
+ * `accountSettings.<section>`, then the component's own `labels` prop. An `undefined`
+ * in either source is skipped, so a prop object built from optional values cannot
+ * blank out a default.
+ */
+export function useAccountSettingsLabels<K extends keyof AccountSettingsLabels>(
+  section: K,
+  prop?: Partial<AccountSettingsLabels[K]>,
+): AccountSettingsLabels[K] {
+  const fromProvider = useKitLabelOverrides("accountSettings")?.[section] as
+    | Partial<AccountSettingsLabels[K]>
+    | undefined;
+  return useMemo(
+    () => ({
+      ...DEFAULT_ACCOUNT_SETTINGS_LABELS[section],
+      ...definedOnly(fromProvider),
+      ...definedOnly(prop),
+    }),
+    [section, fromProvider, prop],
+  );
+}
+
+function definedOnly<T extends object>(value: T | undefined): Partial<T> {
+  if (!value) return {};
+  return Object.fromEntries(Object.entries(value).filter(([, v]) => v !== undefined)) as Partial<T>;
+}