@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/components/server-wake.d.ts

@@ -1,51 +1,62 @@
-import * as react from 'react';
-import { ServerWakeWatcher, ServerWakeStage } from '../lib/server-wake.js';
-
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { ServerWakeStage, ServerWakeWatcher } from "../lib/server-wake.js";
+import { DEFAULT_SERVER_WAKE_LABELS } from "./server-wake-labels.js";
 /**
  * The visible half of the cold-start watchdog (`lib/server-wake.ts`), keksdose's
  * `app/server-wake-notice.tsx` lifted into the kit: after a couple of seconds of an
  * unanswered read it says the app is still loading, and after seven it says WHY — the
  * server sleeps when nobody is using it, and the first request has to start it again.
  *
- * Corner-anchored and non-blocking on purpose. The pages underneath already show their
- * own skeletons; what was missing is the explanation, not another overlay. Start
- * corner, above the phone's bottom nav, so it collides with neither the centred toasts
- * nor the nav bar — and above any FloatingActionButton it would otherwise cover
- * (kastlan's offline pill shares the corner; on a phone the notice spans both).
+ * Non-blocking on purpose. The pages underneath already show their own skeletons; what
+ * was missing is the explanation, not another overlay.
+ *
+ * **At the top, centred, and it takes no taps** (0.34, round C13; keksdose live #399:
+ * *"Move the notification to the top where it can be better seen and not block any
+ * sticky elements."*). Until 0.34 it sat in the bottom-start corner above the phone's
+ * nav — exactly where a phone keeps what floats: a register's action group, a
+ * FloatingActionButton, a dialog's sticky Create/Cancel footer — and a cold start is
+ * when that Create is wanted first. It rose above a FloatingActionButton it measured,
+ * but a sticky footer is not one. The top bar is the one band whose contents nobody
+ * needs while the server is still waking, and `pointer-events-none` lets a tap through
+ * to whatever the notice does cover: it is a status line with nothing in it to press.
+ * Below the status bar and inside the side insets of a notched phone (`safe-area-inset-*`);
+ * its width is in rem, so at the Large text size it is wider and wraps less, and the
+ * screen's edges still stop it. The toasts stay readable: a phone shows them at the
+ * bottom, and a desktop `TOASTER_OFFSET_TOP` (4rem) down, where they draw over a long
+ * notice rather than under it (`--z-toast` is above this `z-50`).
  *
  * Mount it next to the router, not inside the app layout, so it also covers the login
  * screen and the landing page — a cold start is at its most confusing exactly there,
  * before anything of the app is on screen.
  */
-interface ServerWakeLabels {
+export interface ServerWakeLabels {
     /** Past `slowMs` (2 s): a warm server would have answered by now. */
     slow: string;
     /** Past `wakingMs` (7 s): the explanation. `appName` is the notice's prop; without
      *  one the sentence says "the app". */
     waking: (appName?: string) => string;
 }
-declare const DEFAULT_SERVER_WAKE_LABELS: ServerWakeLabels;
+export { DEFAULT_SERVER_WAKE_LABELS };
 /** The watcher's current stage, re-rendering on every change. Default: the shared
  *  {@link serverWake} instance. */
-declare function useServerWakeStage(watcher?: ServerWakeWatcher): ServerWakeStage;
-interface ServerWakeNoticeProps {
+export declare function useServerWakeStage(watcher?: ServerWakeWatcher): ServerWakeStage;
+export interface ServerWakeNoticeProps {
     /** Default: the shared {@link serverWake} instance. Pass the app's own when it was
      *  made with {@link createServerWake} (e.g. to watch the login POST too). */
     watcher?: ServerWakeWatcher;
     /** Named in the `waking` sentence ("…when nobody is using Keksdose…"). Default: the
      *  label says "the app". */
     appName?: string;
-    labels?: Partial<ServerWakeLabels>;
+    labels?: LabelOverride<ServerWakeLabels>;
     /**
-     * The height to keep clear at the bottom — AppShell's bottom nav. Default: its
-     * measured `--app-nav-h` (0px from `md` up and on pages without a shell, such as the
-     * login screen), so nothing has to be passed under an AppShell. The safe area is
-     * respected either way, and a 1rem gap is added. Numbers are px.
+     * @deprecated 0.34 — drop it; removed in 0.35. The notice sits at the TOP of the
+     * screen since 0.34, so there is no bottom nav to clear and this does nothing. It was
+     * the height kept clear at the bottom (AppShell's `--app-nav-h`).
      */
     navOffset?: string | number;
-    /** Extra classes on the fixed anchor — a different width or `start-*`. The bottom
-     *  offset is an inline style, so move it vertically with {@link navOffset}. Either
-     *  way it rises above a visible FloatingActionButton under it. */
+    /** Extra classes on the fixed anchor — a different width (`max-w-*`), or another
+     *  `top-*` for an app that wants it under its top bar rather than over it. Merged, so
+     *  a class given here replaces the kit's of the same kind. */
     className?: string;
 }
 /**
@@ -55,6 +66,4 @@ interface ServerWakeNoticeProps {
  * so the region waits empty and the banner appears inside it. keksdose's notice
  * mounted the region and the words at once.
  */
-declare function ServerWakeNotice({ watcher, appName, labels: labelsProp, navOffset, className }: ServerWakeNoticeProps): react.JSX.Element;
-
-export { DEFAULT_SERVER_WAKE_LABELS, type ServerWakeLabels, ServerWakeNotice, type ServerWakeNoticeProps, useServerWakeStage };
+export declare function ServerWakeNotice({ watcher, appName, labels: labelsProp, className }: ServerWakeNoticeProps): import("react").JSX.Element;

package/dist/components/server-wake.js

@@ -1,57 +1,37 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useSyncExternalStore } from "react";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { cn } from "../lib/cn.js";
-import { clearanceAbove, subscribeFloating } from "../lib/floating-stack.js";
 import { serverWake } from "../lib/server-wake.js";
 import { AlertBanner } from "./alert-banner.js";
-import { Spinner } from "./ui.js";
-const DEFAULT_SERVER_WAKE_LABELS = {
-  slow: "Still loading \u2014 this is taking longer than usual.",
-  waking: (appName) => `The server goes to sleep when nobody is using ${appName ?? "the app"}, so the first request after a break has to start it again. That can take a moment \u2014 nothing is lost, the page fills in by itself.`
-};
+import { Spinner } from "./spinner.js";
+import { DEFAULT_SERVER_WAKE_LABELS } from "./server-wake-labels.js";
 function useServerWakeStage(watcher = serverWake) {
   return useSyncExternalStore(watcher.subscribe, watcher.getStage, () => "idle");
 }
-const px = (v) => typeof v === "number" ? `${v}px` : v;
-const STACK_GAP = "0.5rem";
-function useFloatingClearance(anchor, stage) {
-  const [clearance, setClearance] = useState(null);
-  useLayoutEffect(() => {
-    if (stage === "idle") return;
-    const measure = () => setClearance(clearanceAbove(anchor.current));
-    measure();
-    const unsubscribe = subscribeFloating(measure);
-    window.addEventListener("resize", measure);
-    return () => {
-      unsubscribe();
-      window.removeEventListener("resize", measure);
-    };
-  }, [anchor, stage]);
-  return stage === "idle" ? null : clearance;
-}
-function ServerWakeNotice({ watcher, appName, labels: labelsProp, navOffset, className }) {
+function ServerWakeNotice({ watcher, appName, labels: labelsProp, className }) {
   const labels = useKitLabels("serverWake", DEFAULT_SERVER_WAKE_LABELS, labelsProp);
   const stage = useServerWakeStage(watcher);
   const waking = stage === "waking";
-  const anchor = useRef(null);
-  const clearance = useFloatingClearance(anchor, stage);
-  const base = `calc(max(${navOffset === void 0 ? "var(--app-nav-h, 0px)" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 1rem)`;
-  const style = {
-    bottom: clearance === null ? base : `max(${base}, calc(${clearance}px + ${STACK_GAP}))`
-  };
   return /* @__PURE__ */ jsx(
     "div",
     {
-      ref: anchor,
       role: "status",
       "aria-live": "polite",
       "data-stage": stage,
-      style,
       className: cn(
-        "fixed start-4 z-50 max-w-[min(24rem,calc(100vw-2rem))]",
-        stage === "idle" && "pointer-events-none",
+        // Centred at the top (keksdose live #399): `left`/`right` hold it inside the
+        // side insets of a notched phone held sideways, `w-fit` + `mx-auto` centre it
+        // between them, and `top` puts it under the status bar.
+        "fixed z-50 mx-auto w-fit max-w-[24rem]",
+        "top-[calc(env(safe-area-inset-top,0px)+0.375rem)]",
+        "left-[max(1rem,env(safe-area-inset-left,0px))] right-[max(1rem,env(safe-area-inset-right,0px))]",
+        // No taps, ever: a status line has nothing in it to press, and whatever it
+        // covers — the top bar's buttons, a page's own header — must still answer
+        // underneath it. A link or button inside would take its taps back (none today:
+        // the labels are text), so the rule cannot quietly disable a control later.
+        "pointer-events-none [&_:is(a,button)]:pointer-events-auto",
         className
       ),
       children: stage !== "idle" && // `elevated`: OPAQUE in both themes (keksdose live #209) — the notice that

package/dist/components/server-wake.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/server-wake.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState, useSyncExternalStore } from \"react\";\nimport type { CSSProperties, RefObject } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { clearanceAbove, subscribeFloating } from \"../lib/floating-stack\";\nimport { serverWake } from \"../lib/server-wake\";\nimport type { ServerWakeStage, ServerWakeWatcher } from \"../lib/server-wake\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { Spinner } from \"./ui\";\n\n/**\n * The visible half of the cold-start watchdog (`lib/server-wake.ts`), keksdose's\n * `app/server-wake-notice.tsx` lifted into the kit: after a couple of seconds of an\n * unanswered read it says the app is still loading, and after seven it says WHY — the\n * server sleeps when nobody is using it, and the first request has to start it again.\n *\n * Corner-anchored and non-blocking on purpose. The pages underneath already show their\n * own skeletons; what was missing is the explanation, not another overlay. Start\n * corner, above the phone's bottom nav, so it collides with neither the centred toasts\n * nor the nav bar — and above any FloatingActionButton it would otherwise cover\n * (kastlan's offline pill shares the corner; on a phone the notice spans both).\n *\n * Mount it next to the router, not inside the app layout, so it also covers the login\n * screen and the landing page — a cold start is at its most confusing exactly there,\n * before anything of the app is on screen.\n */\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\nexport interface ServerWakeLabels {\n  /** Past `slowMs` (2 s): a warm server would have answered by now. */\n  slow: string;\n  /** Past `wakingMs` (7 s): the explanation. `appName` is the notice's prop; without\n   *  one the sentence says \"the app\". */\n  waking: (appName?: string) => string;\n}\n\nexport const DEFAULT_SERVER_WAKE_LABELS: ServerWakeLabels = {\n  slow: \"Still loading — this is taking longer than usual.\",\n  waking: (appName) =>\n    `The server goes to sleep when nobody is using ${appName ?? \"the app\"}, so the first request after a break has to start it again. That can take a moment — nothing is lost, the page fills in by itself.`,\n};\n\n// ── Hook ──────────────────────────────────────────────────────────────────────\n\n/** The watcher's current stage, re-rendering on every change. Default: the shared\n *  {@link serverWake} instance. */\nexport function useServerWakeStage(watcher: ServerWakeWatcher = serverWake): ServerWakeStage {\n  // The server snapshot is `idle`: nothing is in flight while the HTML is rendered.\n  return useSyncExternalStore(watcher.subscribe, watcher.getStage, () => \"idle\");\n}\n\n// ── Notice ────────────────────────────────────────────────────────────────────\n\nexport interface ServerWakeNoticeProps {\n  /** Default: the shared {@link serverWake} instance. Pass the app's own when it was\n   *  made with {@link createServerWake} (e.g. to watch the login POST too). */\n  watcher?: ServerWakeWatcher;\n  /** Named in the `waking` sentence (\"…when nobody is using Keksdose…\"). Default: the\n   *  label says \"the app\". */\n  appName?: string;\n  labels?: Partial<ServerWakeLabels>;\n  /**\n   * The height to keep clear at the bottom — AppShell's bottom nav. Default: its\n   * measured `--app-nav-h` (0px from `md` up and on pages without a shell, such as the\n   * login screen), so nothing has to be passed under an AppShell. The safe area is\n   * respected either way, and a 1rem gap is added. Numbers are px.\n   */\n  navOffset?: string | number;\n  /** Extra classes on the fixed anchor — a different width or `start-*`. The bottom\n   *  offset is an inline style, so move it vertically with {@link navOffset}. Either\n   *  way it rises above a visible FloatingActionButton under it. */\n  className?: string;\n}\n\nconst px = (v: string | number) => (typeof v === \"number\" ? `${v}px` : v);\n\n/** Gap between the notice and a floating control it stacks above. */\nconst STACK_GAP = \"0.5rem\";\n\n/**\n * How far off the bottom the notice must sit to clear the FloatingActionButtons under\n * it (`lib/floating-stack.ts`), re-measured when one appears, goes, resizes or the\n * viewport does — or `null` while it is idle or nothing is under it. kastlan 0.18.\n */\nfunction useFloatingClearance(anchor: RefObject<HTMLDivElement | null>, stage: ServerWakeStage): number | null {\n  const [clearance, setClearance] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    if (stage === \"idle\") return;\n    const measure = () => setClearance(clearanceAbove(anchor.current));\n    measure();\n    const unsubscribe = subscribeFloating(measure);\n    window.addEventListener(\"resize\", measure);\n    return () => {\n      unsubscribe();\n      window.removeEventListener(\"resize\", measure);\n    };\n  }, [anchor, stage]);\n  // Idle, the last measurement is stale and nothing shows anyway.\n  return stage === \"idle\" ? null : clearance;\n}\n\n/**\n * Renders nothing visible while idle. The LIVE REGION, though, is always mounted: a\n * `role=\"status\"` element inserted together with its text is announced unreliably\n * (several screen readers only speak changes to a region they already knew about),\n * so the region waits empty and the banner appears inside it. keksdose's notice\n * mounted the region and the words at once.\n */\nexport function ServerWakeNotice({ watcher, appName, labels: labelsProp, navOffset, className }: ServerWakeNoticeProps) {\n  const labels = useKitLabels(\"serverWake\", DEFAULT_SERVER_WAKE_LABELS, labelsProp);\n  const stage = useServerWakeStage(watcher);\n  const waking = stage === \"waking\";\n  const anchor = useRef<HTMLDivElement>(null);\n  const clearance = useFloatingClearance(anchor, stage);\n  const base = `calc(max(${navOffset === undefined ? \"var(--app-nav-h, 0px)\" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 1rem)`;\n  const style: CSSProperties = {\n    bottom: clearance === null ? base : `max(${base}, calc(${clearance}px + ${STACK_GAP}))`,\n  };\n\n  return (\n    <div\n      ref={anchor}\n      role=\"status\"\n      aria-live=\"polite\"\n      data-stage={stage}\n      style={style}\n      // `pointer-events-none` on the empty anchor: a fixed box, even an empty one, is not\n      // allowed to swallow a tap on what it sits over.\n      className={cn(\n        \"fixed start-4 z-50 max-w-[min(24rem,calc(100vw-2rem))]\",\n        stage === \"idle\" && \"pointer-events-none\",\n        className,\n      )}\n    >\n      {stage !== \"idle\" && (\n        // `elevated`: OPAQUE in both themes (keksdose live #209) — the notice that\n        // explains a stall is read over whatever stalled, and a translucent dark tint\n        // let the page's own text show through it. A box banner is role-less, so the\n        // wrapper above stays the one live region.\n        <AlertBanner\n          tone={waking ? \"warning\" : \"neutral\"}\n          size=\"sm\"\n          elevated\n          // `label={null}`: a Spinner is its own `role=\"status\"` saying \"Loading…\" —\n          // nested here, a second live region and a second announcement ahead of the\n          // words that actually explain the wait. Here it is decoration.\n          icon={<Spinner label={null} className=\"h-3.5 w-3.5\" />}\n        >\n          {waking ? labels.waking(appName) : labels.slow}\n        </AlertBanner>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoJgB;AApJhB,SAAS,iBAAiB,QAAQ,UAAU,4BAA4B;AAGxE,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,gBAAgB,yBAAyB;AAClD,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AA6BjB,MAAM,6BAA+C;AAAA,EAC1D,MAAM;AAAA,EACN,QAAQ,CAAC,YACP,iDAAiD,WAAW,SAAS;AACzE;AAMO,SAAS,mBAAmB,UAA6B,YAA6B;AAE3F,SAAO,qBAAqB,QAAQ,WAAW,QAAQ,UAAU,MAAM,MAAM;AAC/E;AAyBA,MAAM,KAAK,CAAC,MAAwB,OAAO,MAAM,WAAW,GAAG,CAAC,OAAO;AAGvE,MAAM,YAAY;AAOlB,SAAS,qBAAqB,QAA0C,OAAuC;AAC7G,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,kBAAgB,MAAM;AACpB,QAAI,UAAU,OAAQ;AACtB,UAAM,UAAU,MAAM,aAAa,eAAe,OAAO,OAAO,CAAC;AACjE,YAAQ;AACR,UAAM,cAAc,kBAAkB,OAAO;AAC7C,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,MAAM;AACX,kBAAY;AACZ,aAAO,oBAAoB,UAAU,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SAAO,UAAU,SAAS,OAAO;AACnC;AASO,SAAS,iBAAiB,EAAE,SAAS,SAAS,QAAQ,YAAY,WAAW,UAAU,GAA0B;AACtH,QAAM,SAAS,aAAa,cAAc,4BAA4B,UAAU;AAChF,QAAM,QAAQ,mBAAmB,OAAO;AACxC,QAAM,SAAS,UAAU;AACzB,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,YAAY,qBAAqB,QAAQ,KAAK;AACpD,QAAM,OAAO,YAAY,cAAc,SAAY,0BAA0B,GAAG,SAAS,CAAC;AAC1F,QAAM,QAAuB;AAAA,IAC3B,QAAQ,cAAc,OAAO,OAAO,OAAO,IAAI,UAAU,SAAS,QAAQ,SAAS;AAAA,EACrF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ;AAAA,MAGA,WAAW;AAAA,QACT;AAAA,QACA,UAAU,UAAU;AAAA,QACpB;AAAA,MACF;AAAA,MAEC,oBAAU;AAAA;AAAA;AAAA;AAAA,MAKT;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,SAAS,YAAY;AAAA,UAC3B,MAAK;AAAA,UACL,UAAQ;AAAA,UAIR,MAAM,oBAAC,WAAQ,OAAO,MAAM,WAAU,eAAc;AAAA,UAEnD,mBAAS,OAAO,OAAO,OAAO,IAAI,OAAO;AAAA;AAAA,MAC5C;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/server-wake.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\n\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { serverWake } from \"../lib/server-wake\";\nimport type { ServerWakeStage, ServerWakeWatcher } from \"../lib/server-wake\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { Spinner } from \"./spinner\";\nimport { DEFAULT_SERVER_WAKE_LABELS } from \"./server-wake-labels\";\n\n/**\n * The visible half of the cold-start watchdog (`lib/server-wake.ts`), keksdose's\n * `app/server-wake-notice.tsx` lifted into the kit: after a couple of seconds of an\n * unanswered read it says the app is still loading, and after seven it says WHY — the\n * server sleeps when nobody is using it, and the first request has to start it again.\n *\n * Non-blocking on purpose. The pages underneath already show their own skeletons; what\n * was missing is the explanation, not another overlay.\n *\n * **At the top, centred, and it takes no taps** (0.34, round C13; keksdose live #399:\n * *\"Move the notification to the top where it can be better seen and not block any\n * sticky elements.\"*). Until 0.34 it sat in the bottom-start corner above the phone's\n * nav — exactly where a phone keeps what floats: a register's action group, a\n * FloatingActionButton, a dialog's sticky Create/Cancel footer — and a cold start is\n * when that Create is wanted first. It rose above a FloatingActionButton it measured,\n * but a sticky footer is not one. The top bar is the one band whose contents nobody\n * needs while the server is still waking, and `pointer-events-none` lets a tap through\n * to whatever the notice does cover: it is a status line with nothing in it to press.\n * Below the status bar and inside the side insets of a notched phone (`safe-area-inset-*`);\n * its width is in rem, so at the Large text size it is wider and wraps less, and the\n * screen's edges still stop it. The toasts stay readable: a phone shows them at the\n * bottom, and a desktop `TOASTER_OFFSET_TOP` (4rem) down, where they draw over a long\n * notice rather than under it (`--z-toast` is above this `z-50`).\n *\n * Mount it next to the router, not inside the app layout, so it also covers the login\n * screen and the landing page — a cold start is at its most confusing exactly there,\n * before anything of the app is on screen.\n */\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\nexport interface ServerWakeLabels {\n  /** Past `slowMs` (2 s): a warm server would have answered by now. */\n  slow: string;\n  /** Past `wakingMs` (7 s): the explanation. `appName` is the notice's prop; without\n   *  one the sentence says \"the app\". */\n  waking: (appName?: string) => string;\n}\n\n// Defined in ./server-wake-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_SERVER_WAKE_LABELS };\n\n// ── Hook ──────────────────────────────────────────────────────────────────────\n\n/** The watcher's current stage, re-rendering on every change. Default: the shared\n *  {@link serverWake} instance. */\nexport function useServerWakeStage(watcher: ServerWakeWatcher = serverWake): ServerWakeStage {\n  // The server snapshot is `idle`: nothing is in flight while the HTML is rendered.\n  return useSyncExternalStore(watcher.subscribe, watcher.getStage, () => \"idle\");\n}\n\n// ── Notice ────────────────────────────────────────────────────────────────────\n\nexport interface ServerWakeNoticeProps {\n  /** Default: the shared {@link serverWake} instance. Pass the app's own when it was\n   *  made with {@link createServerWake} (e.g. to watch the login POST too). */\n  watcher?: ServerWakeWatcher;\n  /** Named in the `waking` sentence (\"…when nobody is using Keksdose…\"). Default: the\n   *  label says \"the app\". */\n  appName?: string;\n  labels?: LabelOverride<ServerWakeLabels>;\n  /**\n   * @deprecated 0.34 — drop it; removed in 0.35. The notice sits at the TOP of the\n   * screen since 0.34, so there is no bottom nav to clear and this does nothing. It was\n   * the height kept clear at the bottom (AppShell's `--app-nav-h`).\n   */\n  navOffset?: string | number;\n  /** Extra classes on the fixed anchor — a different width (`max-w-*`), or another\n   *  `top-*` for an app that wants it under its top bar rather than over it. Merged, so\n   *  a class given here replaces the kit's of the same kind. */\n  className?: string;\n}\n\n/**\n * Renders nothing visible while idle. The LIVE REGION, though, is always mounted: a\n * `role=\"status\"` element inserted together with its text is announced unreliably\n * (several screen readers only speak changes to a region they already knew about),\n * so the region waits empty and the banner appears inside it. keksdose's notice\n * mounted the region and the words at once.\n */\nexport function ServerWakeNotice({ watcher, appName, labels: labelsProp, className }: ServerWakeNoticeProps) {\n  const labels = useKitLabels(\"serverWake\", DEFAULT_SERVER_WAKE_LABELS, labelsProp);\n  const stage = useServerWakeStage(watcher);\n  const waking = stage === \"waking\";\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      data-stage={stage}\n      className={cn(\n        // Centred at the top (keksdose live #399): `left`/`right` hold it inside the\n        // side insets of a notched phone held sideways, `w-fit` + `mx-auto` centre it\n        // between them, and `top` puts it under the status bar.\n        \"fixed z-50 mx-auto w-fit max-w-[24rem]\",\n        \"top-[calc(env(safe-area-inset-top,0px)+0.375rem)]\",\n        \"left-[max(1rem,env(safe-area-inset-left,0px))] right-[max(1rem,env(safe-area-inset-right,0px))]\",\n        // No taps, ever: a status line has nothing in it to press, and whatever it\n        // covers — the top bar's buttons, a page's own header — must still answer\n        // underneath it. A link or button inside would take its taps back (none today:\n        // the labels are text), so the rule cannot quietly disable a control later.\n        \"pointer-events-none [&_:is(a,button)]:pointer-events-auto\",\n        className,\n      )}\n    >\n      {stage !== \"idle\" && (\n        // `elevated`: OPAQUE in both themes (keksdose live #209) — the notice that\n        // explains a stall is read over whatever stalled, and a translucent dark tint\n        // let the page's own text show through it. A box banner is role-less, so the\n        // wrapper above stays the one live region.\n        <AlertBanner\n          tone={waking ? \"warning\" : \"neutral\"}\n          size=\"sm\"\n          elevated\n          // `label={null}`: a Spinner is its own `role=\"status\"` saying \"Loading…\" —\n          // nested here, a second live region and a second announcement ahead of the\n          // words that actually explain the wait. Here it is decoration.\n          icon={<Spinner label={null} className=\"h-3.5 w-3.5\" />}\n        >\n          {waking ? labels.waking(appName) : labels.slow}\n        </AlertBanner>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA+HgB;AA/HhB,SAAS,4BAA4B;AAErC,SAAS,oBAAwC;AACjD,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,kCAAkC;AAgDpC,SAAS,mBAAmB,UAA6B,YAA6B;AAE3F,SAAO,qBAAqB,QAAQ,WAAW,QAAQ,UAAU,MAAM,MAAM;AAC/E;AA+BO,SAAS,iBAAiB,EAAE,SAAS,SAAS,QAAQ,YAAY,UAAU,GAA0B;AAC3G,QAAM,SAAS,aAAa,cAAc,4BAA4B,UAAU;AAChF,QAAM,QAAQ,mBAAmB,OAAO;AACxC,QAAM,SAAS,UAAU;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA,QAIT;AAAA,QACA;AAAA,QACA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,oBAAU;AAAA;AAAA;AAAA;AAAA,MAKT;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,SAAS,YAAY;AAAA,UAC3B,MAAK;AAAA,UACL,UAAQ;AAAA,UAIR,MAAM,oBAAC,WAAQ,OAAO,MAAM,WAAU,eAAc;AAAA,UAEnD,mBAAS,OAAO,OAAO,OAAO,IAAI,OAAO;AAAA;AAAA,MAC5C;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

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

@@ -1,106 +1,11 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { f8 as SelectProps } from '../delete-account-setting-DiPX4Vue.js';
-import { ToggleGroupBaseProps } from './toggle-group.js';
-import { ThemePreference } from '../theme/theme-store.js';
-import { TextSize } from '../theme/text-size.js';
-import { ContrastMode } from '../theme/contrast.js';
-import { AppearanceLabels } from './appearance-labels.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './write-lock.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import './month-picker.js';
-import './page-contents.js';
-import './series-chart-labels.js';
-import './pie-chart-labels.js';
-import './sparkline.js';
-import './signature-pad.js';
-import './password-strength.js';
-import './swatch-picker.js';
-import './tile-radio.js';
-import './icon-picker.js';
-import './dialog-frame.js';
-import './modal.js';
-import '../hooks/use-search-param-state.js';
-import './measured-grid.js';
-import './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import './reauth-dialog.js';
-import './server-wake.js';
-import '../lib/server-wake.js';
-import './translation-review-labels.js';
-import '../lib/translation-review.js';
-import './country-select.js';
-import './inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import './sign-chip.js';
-import './column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import './focus-ring.js';
-
+import type { ReactNode } from "react";
+import type { SelectProps } from "./select.js";
+import type { ToggleGroupBaseProps } from "./toggle-group.js";
+import type { ThemePreference } from "../theme/theme-store.js";
+import type { TextSize } from "../theme/text-size.js";
+import type { ContrastMode } from "../theme/contrast.js";
+import type { AppearanceLabels } from "./appearance-labels.js";
+import type { LabelOverride } from "../i18n/kit-labels.js";
 /**
  * App-agnostic settings-field components (feedback #333): the language + theme
  * controls that every app's settings page needs — and, since 0.32, the text size and
@@ -116,8 +21,11 @@ import './focus-ring.js';
  * itself because no caller of this wants the event. The rest — `disabled`, `required`,
  * `invalid`, `error`, a `data-tour` anchor — passes straight through, which is what makes
  * this a settings FIELD rather than a fixed widget.
+ *
+ * The `Select` half of {@link ThemeSettingProps}; until 0.34 it carried that name, which
+ * left the toggle out of the type the component is documented by (API-9).
  */
-interface ThemeSettingProps extends Omit<SelectProps, "value" | "onChange" | "children"> {
+export interface ThemeSettingSelectProps extends Omit<SelectProps, "value" | "onChange" | "children"> {
     /** The `Select` (default). See {@link ThemeSettingToggleProps} for `"toggle"`. */
     variant?: "select";
     value: ThemePreference;
@@ -147,7 +55,7 @@ interface ThemeSettingProps extends Omit<SelectProps, "value" | "onChange" | "ch
  * system-dark device a control bound to the mode shows "dark" and cannot say "follow the
  * system" (keksdose's control, §8).
  */
-interface ThemeSettingToggleProps extends Omit<ToggleGroupBaseProps<ThemePreference>, "options" | "label" | "ariaLabel"> {
+export interface ThemeSettingToggleProps extends Omit<ToggleGroupBaseProps<ThemePreference>, "options" | "label"> {
     variant: "toggle";
     value: ThemePreference;
     onChange: (value: ThemePreference) => void;
@@ -165,26 +73,48 @@ interface ThemeSettingToggleProps extends Omit<ToggleGroupBaseProps<ThemePrefere
     };
     id?: string;
 }
-declare function ThemeSetting(props: ThemeSettingProps | ThemeSettingToggleProps): react.JSX.Element;
-/** See {@link ThemeSettingProps}: a `Select`'s props with the value and the change
+/**
+ * What {@link ThemeSetting} takes: the select ({@link ThemeSettingSelectProps}, the
+ * default) or the segmented control ({@link ThemeSettingToggleProps}, `variant="toggle"`)
+ * — the union, as {@link ProfileSettingProps} is (API-9).
+ */
+export type ThemeSettingProps = ThemeSettingSelectProps | ThemeSettingToggleProps;
+export declare function ThemeSetting(props: ThemeSettingProps): import("react").JSX.Element;
+/** See {@link ThemeSettingSelectProps}: a `Select`'s props with the value and the change
  *  handler re-typed to the language CODE the caller stores. */
-interface LanguageSettingProps extends Omit<SelectProps, "value" | "onChange" | "children"> {
+export interface LanguageSettingProps extends Omit<SelectProps, "value" | "onChange" | "children" | "multiple"> {
+    /** The reader's language: one of the rows' codes — or any tag, shown as the row it
+     *  resolves to ({@link LanguageSelect}'s rule). */
     value: string;
     onChange: (code: string) => void;
     label: ReactNode;
+    /**
+     * The languages to offer, in order, and each one's text: {@link languageOptions}' rows
+     * as they come (the registry's names), or the app's own words for a code — keksdose's
+     * "Deutsch (Schweiz)". The text is the language's name in itself, as on every
+     * switcher, and each option carries that language's `lang`. A code the kit's registry
+     * does not know is not listed: the registry is where its `lang` comes from.
+     */
     options: {
         code: string;
         label: string;
     }[];
     id?: string;
 }
-declare function LanguageSetting({ value, onChange, label, options, id, ...rest }: LanguageSettingProps): react.JSX.Element;
+/**
+ * The settings row for the reader's own language: a {@link LanguageSelect} over the rows
+ * the app hands in (0.34, refactor audit 2026-10, API-7). It was a bare `Select` over the
+ * same rows, so the three apps' language pickers lacked what LanguageSelect gives every
+ * option — its `lang`, by which a screen reader says "Français" in French — and showed a
+ * stored `de-AT` as nothing in particular rather than as the one German.
+ */
+export declare function LanguageSetting({ options, ...rest }: LanguageSettingProps): import("react").JSX.Element;
 /**
  * What {@link TextSizeSetting} and {@link ContrastSetting} take: a {@link ToggleGroup}'s
  * props — `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the
  * options and the value, which they own, as {@link ThemeSettingToggleProps} does.
  */
-type AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, "options" | "label" | "ariaLabel"> & {
+type AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, "options" | "label"> & {
     value: T;
     onChange: (value: T) => void;
     /**
@@ -194,9 +124,9 @@ type AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, "op
      */
     label?: ReactNode;
     /** The `appearance` namespace, for this instance. */
-    labels?: Partial<AppearanceLabels>;
+    labels?: LabelOverride<AppearanceLabels>;
 };
-type TextSizeSettingProps = AppearanceToggleProps<TextSize>;
+export type TextSizeSettingProps = AppearanceToggleProps<TextSize>;
 /**
  * The text size (0.32, docs/text-size-harmonization.md §6): Normal, Large, Extra large as
  * one segmented control, in the core `appearance` group after the theme. Bind it to the
@@ -207,8 +137,8 @@ type TextSizeSettingProps = AppearanceToggleProps<TextSize>;
  * phone the group has 240 px, and "Extra large" cut to "Extra l…" would be the one
  * setting that cannot read its own value.
  */
-declare function TextSizeSetting({ value, onChange, label, labels: labelsProp, overflow, ...rest }: TextSizeSettingProps): react.JSX.Element;
-type ContrastSettingProps = AppearanceToggleProps<ContrastMode>;
+export declare function TextSizeSetting({ value, onChange, label, labels: labelsProp, overflow, ...rest }: TextSizeSettingProps): import("react").JSX.Element;
+export type ContrastSettingProps = AppearanceToggleProps<ContrastMode>;
 /**
  * More contrast (0.32, §5, §6): System, Standard, More as one segmented control, beside
  * the text size. Bind it to the stored MODE, "system" included — never to whether more
@@ -216,6 +146,5 @@ type ContrastSettingProps = AppearanceToggleProps<ContrastMode>;
  * "More" and could not say "follow the device" (the theme's lesson, §8 of the settings
  * contract). `useAccountAppearance().contrast` is that mode.
  */
-declare function ContrastSetting({ value, onChange, label, labels: labelsProp, overflow, ...rest }: ContrastSettingProps): react.JSX.Element;
-
-export { ContrastSetting, type ContrastSettingProps, LanguageSetting, type LanguageSettingProps, TextSizeSetting, type TextSizeSettingProps, ThemeSetting, type ThemeSettingProps, type ThemeSettingToggleProps };
+export declare function ContrastSetting({ value, onChange, label, labels: labelsProp, overflow, ...rest }: ContrastSettingProps): import("react").JSX.Element;
+export {};

package/dist/components/settings-fields.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Select } from "./ui.js";
+import { Select } from "./select.js";
 import { ToggleGroup } from "./toggle-group.js";
 import { TEXT_SIZES } from "../theme/text-size.js";
 import { CONTRAST_MODES } from "../theme/contrast.js";
 import { useAppearanceLabels } from "./appearance-labels.js";
+import { LanguageSelect } from "./language-select.js";
 function ThemeSetting(props) {
   if (props.variant === "toggle") {
     const { variant: _variant2, value: value2, onChange: onChange2, label: label2, optionLabels: optionLabels2, overflow = "wrap", ...rest2 } = props;
@@ -41,8 +42,17 @@ function ThemeSetting(props) {
     }
   );
 }
-function LanguageSetting({ value, onChange, label, options, id, ...rest }) {
-  return /* @__PURE__ */ jsx(Select, { ...rest, id, label, value, onChange: (e) => onChange(e.target.value), children: options.map((o) => /* @__PURE__ */ jsx("option", { value: o.code, children: o.label }, o.code)) });
+function LanguageSetting({ options, ...rest }) {
+  const text = new Map(options.map((option) => [option.code, option.label]));
+  return /* @__PURE__ */ jsx(
+    LanguageSelect,
+    {
+      ...rest,
+      codes: options.map((option) => option.code),
+      optionLabel: (language) => text.get(language.code) ?? language.nativeName,
+      optionLang: "own"
+    }
+  );
 }
 function TextSizeSetting({ value, onChange, label, labels: labelsProp, overflow = "wrap", ...rest }) {
   const labels = useAppearanceLabels(labelsProp);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/settings-fields.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"./ui\";\nimport type { SelectProps } from \"./ui\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport type { ToggleGroupBaseProps } from \"./toggle-group\";\nimport type { ThemePreference } from \"../theme/theme-store\";\nimport { TEXT_SIZES } from \"../theme/text-size\";\nimport type { TextSize } from \"../theme/text-size\";\nimport { CONTRAST_MODES } from \"../theme/contrast\";\nimport type { ContrastMode } from \"../theme/contrast\";\nimport { useAppearanceLabels } from \"./appearance-labels\";\nimport type { AppearanceLabels } from \"./appearance-labels\";\n\n/**\n * App-agnostic settings-field components (feedback #333): the language + theme\n * controls that every app's settings page needs — and, since 0.32, the text size and\n * the contrast (docs/text-size-harmonization.md §6), whose words are the kit's own\n * `appearance` namespace — so they live in @hb/ui and the app just supplies the\n * current value, a change handler and translated labels.\n * The app owns WHERE these render (its own settings page) and any app-specific\n * fields around them.\n */\n\n/**\n * Everything a {@link Select} takes, minus the two this component owns: the value is a\n * {@link ThemePreference} rather than a string, and `onChange` hands over the preference\n * itself because no caller of this wants the event. The rest — `disabled`, `required`,\n * `invalid`, `error`, a `data-tour` anchor — passes straight through, which is what makes\n * this a settings FIELD rather than a fixed widget.\n */\nexport interface ThemeSettingProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\"> {\n  /** The `Select` (default). See {@link ThemeSettingToggleProps} for `\"toggle\"`. */\n  variant?: \"select\";\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  label: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\n/**\n * `variant=\"toggle\"` (0.31.0, docs/settings-harmonization.md §2.8): the three choices as\n * one segmented control instead of a select — system, light and dark side by side, the\n * choice visible without opening anything, in every app (keksdose offered light and dark\n * only; its store already knew \"system\"). A {@link ToggleGroup}'s props pass through —\n * `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the options\n * and the value, which this owns.\n *\n * The options wrap rather than truncate (`overflow=\"wrap\"`), as in its two siblings\n * {@link TextSizeSetting} and {@link ContrastSetting} (0.32.1, Kurvenschmiede's 0.32\n * report: \"Syst… Li… D…\" in a card at Extra large on a 360 px phone).\n *\n * Bind it to the PREFERENCE (`\"system\"` included), never to the resolved mode: on a\n * system-dark device a control bound to the mode shows \"dark\" and cannot say \"follow the\n * system\" (keksdose's control, §8).\n */\nexport interface ThemeSettingToggleProps\n  extends Omit<ToggleGroupBaseProps<ThemePreference>, \"options\" | \"label\" | \"ariaLabel\"> {\n  variant: \"toggle\";\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  /**\n   * Names the group: the field's label, or the label above it (`labelPlacement`). Leave\n   * it out inside a card already titled \"Theme\" and name the group with `aria-label` or\n   * `aria-labelledby` instead, so the card does not say \"Theme\" twice.\n   */\n  label?: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\nexport function ThemeSetting(props: ThemeSettingProps | ThemeSettingToggleProps) {\n  if (props.variant === \"toggle\") {\n    const { variant: _variant, value, onChange, label, optionLabels, overflow = \"wrap\", ...rest } = props;\n    return (\n      <ToggleGroup<ThemePreference>\n        {...rest}\n        overflow={overflow}\n        label={label}\n        value={value}\n        onChange={onChange}\n        options={[\n          { value: \"system\", label: optionLabels.system },\n          { value: \"light\", label: optionLabels.light },\n          { value: \"dark\", label: optionLabels.dark },\n        ]}\n      />\n    );\n  }\n  const { variant: _variant, value, onChange, label, optionLabels, id, ...rest } = props;\n  return (\n    <Select\n      {...rest}\n      id={id}\n      label={label}\n      value={value}\n      onChange={(e) => onChange(e.target.value as ThemePreference)}\n    >\n      <option value=\"system\">{optionLabels.system}</option>\n      <option value=\"light\">{optionLabels.light}</option>\n      <option value=\"dark\">{optionLabels.dark}</option>\n    </Select>\n  );\n}\n\n/** See {@link ThemeSettingProps}: a `Select`'s props with the value and the change\n *  handler re-typed to the language CODE the caller stores. */\nexport interface LanguageSettingProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\"> {\n  value: string;\n  onChange: (code: string) => void;\n  label: ReactNode;\n  options: { code: string; label: string }[];\n  id?: string;\n}\n\nexport function LanguageSetting({ value, onChange, label, options, id, ...rest }: LanguageSettingProps) {\n  return (\n    <Select {...rest} id={id} label={label} value={value} onChange={(e) => onChange(e.target.value)}>\n      {options.map((o) => (\n        <option key={o.code} value={o.code}>\n          {o.label}\n        </option>\n      ))}\n    </Select>\n  );\n}\n\n/**\n * What {@link TextSizeSetting} and {@link ContrastSetting} take: a {@link ToggleGroup}'s\n * props — `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the\n * options and the value, which they own, as {@link ThemeSettingToggleProps} does.\n */\ntype AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, \"options\" | \"label\" | \"ariaLabel\"> & {\n  value: T;\n  onChange: (value: T) => void;\n  /**\n   * The field's visible label. Leave it out inside a row already titled with the\n   * setting's name: the group is then named by `aria-label` / `aria-labelledby` if\n   * given, else by the kit's own word (\"Text size\", \"Contrast\").\n   */\n  label?: ReactNode;\n  /** The `appearance` namespace, for this instance. */\n  labels?: Partial<AppearanceLabels>;\n};\n\nexport type TextSizeSettingProps = AppearanceToggleProps<TextSize>;\n\n/**\n * The text size (0.32, docs/text-size-harmonization.md §6): Normal, Large, Extra large as\n * one segmented control, in the core `appearance` group after the theme. Bind it to the\n * size IN FORCE — `useAccountAppearance().textSize` — and hand a pick to its\n * `pickTextSize`, which stores the device's choice and, signed in, the account's.\n *\n * The options wrap rather than truncate (`overflow=\"wrap\"`): at Extra large on a 360 px\n * phone the group has 240 px, and \"Extra large\" cut to \"Extra l…\" would be the one\n * setting that cannot read its own value.\n */\nexport function TextSizeSetting({ value, onChange, label, labels: labelsProp, overflow = \"wrap\", ...rest }: TextSizeSettingProps) {\n  const labels = useAppearanceLabels(labelsProp);\n  const named = label !== undefined && label !== null && label !== false;\n  return (\n    <ToggleGroup<TextSize>\n      {...rest}\n      aria-label={named || rest[\"aria-labelledby\"] ? rest[\"aria-label\"] : (rest[\"aria-label\"] ?? labels.textSize)}\n      label={label}\n      overflow={overflow}\n      value={value}\n      onChange={onChange}\n      options={TEXT_SIZES.map((size) => ({ value: size, label: labels.textSizes[size] }))}\n    />\n  );\n}\n\nexport type ContrastSettingProps = AppearanceToggleProps<ContrastMode>;\n\n/**\n * More contrast (0.32, §5, §6): System, Standard, More as one segmented control, beside\n * the text size. Bind it to the stored MODE, \"system\" included — never to whether more\n * contrast is on at the moment, or a device that asks for more contrast would show\n * \"More\" and could not say \"follow the device\" (the theme's lesson, §8 of the settings\n * contract). `useAccountAppearance().contrast` is that mode.\n */\nexport function ContrastSetting({ value, onChange, label, labels: labelsProp, overflow = \"wrap\", ...rest }: ContrastSettingProps) {\n  const labels = useAppearanceLabels(labelsProp);\n  const named = label !== undefined && label !== null && label !== false;\n  return (\n    <ToggleGroup<ContrastMode>\n      {...rest}\n      aria-label={named || rest[\"aria-labelledby\"] ? rest[\"aria-label\"] : (rest[\"aria-label\"] ?? labels.contrast)}\n      label={label}\n      overflow={overflow}\n      value={value}\n      onChange={onChange}\n      options={CONTRAST_MODES.map((mode) => ({ value: mode, label: labels.contrastModes[mode] }))}\n    />\n  );\n}\n"],"mappings":";AA8EM,cAgBF,YAhBE;AA7EN,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAG5B,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB;AAE/B,SAAS,2BAA2B;AAgE7B,SAAS,aAAa,OAAoD;AAC/E,MAAI,MAAM,YAAY,UAAU;AAC9B,UAAM,EAAE,SAASA,WAAU,OAAAC,QAAO,UAAAC,WAAU,OAAAC,QAAO,cAAAC,eAAc,WAAW,QAAQ,GAAGC,MAAK,IAAI;AAChG,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAGA;AAAA,QACJ;AAAA,QACA,OAAOF;AAAA,QACP,OAAOF;AAAA,QACP,UAAUC;AAAA,QACV,SAAS;AAAA,UACP,EAAE,OAAO,UAAU,OAAOE,cAAa,OAAO;AAAA,UAC9C,EAAE,OAAO,SAAS,OAAOA,cAAa,MAAM;AAAA,UAC5C,EAAE,OAAO,QAAQ,OAAOA,cAAa,KAAK;AAAA,QAC5C;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,QAAM,EAAE,SAAS,UAAU,OAAO,UAAU,OAAO,cAAc,IAAI,GAAG,KAAK,IAAI;AACjF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAwB;AAAA,MAE3D;AAAA,4BAAC,YAAO,OAAM,UAAU,uBAAa,QAAO;AAAA,QAC5C,oBAAC,YAAO,OAAM,SAAS,uBAAa,OAAM;AAAA,QAC1C,oBAAC,YAAO,OAAM,QAAQ,uBAAa,MAAK;AAAA;AAAA;AAAA,EAC1C;AAEJ;AAaO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,SAAS,IAAI,GAAG,KAAK,GAAyB;AACtG,SACE,oBAAC,UAAQ,GAAG,MAAM,IAAQ,OAAc,OAAc,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK,GAC3F,kBAAQ,IAAI,CAAC,MACZ,oBAAC,YAAoB,OAAO,EAAE,MAC3B,YAAE,SADQ,EAAE,IAEf,CACD,GACH;AAEJ;AAgCO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,QAAQ,YAAY,WAAW,QAAQ,GAAG,KAAK,GAAyB;AAChI,QAAM,SAAS,oBAAoB,UAAU;AAC7C,QAAM,QAAQ,UAAU,UAAa,UAAU,QAAQ,UAAU;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,SAAS,KAAK,iBAAiB,IAAI,KAAK,YAAY,IAAK,KAAK,YAAY,KAAK,OAAO;AAAA,MAClG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAW,IAAI,CAAC,UAAU,EAAE,OAAO,MAAM,OAAO,OAAO,UAAU,IAAI,EAAE,EAAE;AAAA;AAAA,EACpF;AAEJ;AAWO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,QAAQ,YAAY,WAAW,QAAQ,GAAG,KAAK,GAAyB;AAChI,QAAM,SAAS,oBAAoB,UAAU;AAC7C,QAAM,QAAQ,UAAU,UAAa,UAAU,QAAQ,UAAU;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,SAAS,KAAK,iBAAiB,IAAI,KAAK,YAAY,IAAK,KAAK,YAAY,KAAK,OAAO;AAAA,MAClG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,eAAe,IAAI,CAAC,UAAU,EAAE,OAAO,MAAM,OAAO,OAAO,cAAc,IAAI,EAAE,EAAE;AAAA;AAAA,EAC5F;AAEJ;","names":["_variant","value","onChange","label","optionLabels","rest"]}
+{"version":3,"sources":["../../src/components/settings-fields.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Select } from \"./select\";\nimport type { SelectProps } from \"./select\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport type { ToggleGroupBaseProps } from \"./toggle-group\";\nimport type { ThemePreference } from \"../theme/theme-store\";\nimport { TEXT_SIZES } from \"../theme/text-size\";\nimport type { TextSize } from \"../theme/text-size\";\nimport { CONTRAST_MODES } from \"../theme/contrast\";\nimport type { ContrastMode } from \"../theme/contrast\";\nimport { useAppearanceLabels } from \"./appearance-labels\";\nimport type { AppearanceLabels } from \"./appearance-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { LanguageSelect } from \"./language-select\";\nimport type { KitLanguageCode } from \"../i18n/languages\";\n\n/**\n * App-agnostic settings-field components (feedback #333): the language + theme\n * controls that every app's settings page needs — and, since 0.32, the text size and\n * the contrast (docs/text-size-harmonization.md §6), whose words are the kit's own\n * `appearance` namespace — so they live in @hb/ui and the app just supplies the\n * current value, a change handler and translated labels.\n * The app owns WHERE these render (its own settings page) and any app-specific\n * fields around them.\n */\n\n/**\n * Everything a {@link Select} takes, minus the two this component owns: the value is a\n * {@link ThemePreference} rather than a string, and `onChange` hands over the preference\n * itself because no caller of this wants the event. The rest — `disabled`, `required`,\n * `invalid`, `error`, a `data-tour` anchor — passes straight through, which is what makes\n * this a settings FIELD rather than a fixed widget.\n *\n * The `Select` half of {@link ThemeSettingProps}; until 0.34 it carried that name, which\n * left the toggle out of the type the component is documented by (API-9).\n */\nexport interface ThemeSettingSelectProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\"> {\n  /** The `Select` (default). See {@link ThemeSettingToggleProps} for `\"toggle\"`. */\n  variant?: \"select\";\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  label: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\n/**\n * `variant=\"toggle\"` (0.31.0, docs/settings-harmonization.md §2.8): the three choices as\n * one segmented control instead of a select — system, light and dark side by side, the\n * choice visible without opening anything, in every app (keksdose offered light and dark\n * only; its store already knew \"system\"). A {@link ToggleGroup}'s props pass through —\n * `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the options\n * and the value, which this owns.\n *\n * The options wrap rather than truncate (`overflow=\"wrap\"`), as in its two siblings\n * {@link TextSizeSetting} and {@link ContrastSetting} (0.32.1, Kurvenschmiede's 0.32\n * report: \"Syst… Li… D…\" in a card at Extra large on a 360 px phone).\n *\n * Bind it to the PREFERENCE (`\"system\"` included), never to the resolved mode: on a\n * system-dark device a control bound to the mode shows \"dark\" and cannot say \"follow the\n * system\" (keksdose's control, §8).\n */\nexport interface ThemeSettingToggleProps\n  extends Omit<ToggleGroupBaseProps<ThemePreference>, \"options\" | \"label\"> {\n  variant: \"toggle\";\n  value: ThemePreference;\n  onChange: (value: ThemePreference) => void;\n  /**\n   * Names the group: the field's label, or the label above it (`labelPlacement`). Leave\n   * it out inside a card already titled \"Theme\" and name the group with `aria-label` or\n   * `aria-labelledby` instead, so the card does not say \"Theme\" twice.\n   */\n  label?: ReactNode;\n  /** Translated option labels. */\n  optionLabels: { system: string; light: string; dark: string };\n  id?: string;\n}\n\n/**\n * What {@link ThemeSetting} takes: the select ({@link ThemeSettingSelectProps}, the\n * default) or the segmented control ({@link ThemeSettingToggleProps}, `variant=\"toggle\"`)\n * — the union, as {@link ProfileSettingProps} is (API-9).\n */\nexport type ThemeSettingProps = ThemeSettingSelectProps | ThemeSettingToggleProps;\n\nexport function ThemeSetting(props: ThemeSettingProps) {\n  if (props.variant === \"toggle\") {\n    const { variant: _variant, value, onChange, label, optionLabels, overflow = \"wrap\", ...rest } = props;\n    return (\n      <ToggleGroup<ThemePreference>\n        {...rest}\n        overflow={overflow}\n        label={label}\n        value={value}\n        onChange={onChange}\n        options={[\n          { value: \"system\", label: optionLabels.system },\n          { value: \"light\", label: optionLabels.light },\n          { value: \"dark\", label: optionLabels.dark },\n        ]}\n      />\n    );\n  }\n  const { variant: _variant, value, onChange, label, optionLabels, id, ...rest } = props;\n  return (\n    <Select\n      {...rest}\n      id={id}\n      label={label}\n      value={value}\n      onChange={(e) => onChange(e.target.value as ThemePreference)}\n    >\n      <option value=\"system\">{optionLabels.system}</option>\n      <option value=\"light\">{optionLabels.light}</option>\n      <option value=\"dark\">{optionLabels.dark}</option>\n    </Select>\n  );\n}\n\n/** See {@link ThemeSettingSelectProps}: a `Select`'s props with the value and the change\n *  handler re-typed to the language CODE the caller stores. */\nexport interface LanguageSettingProps\n  extends Omit<SelectProps, \"value\" | \"onChange\" | \"children\" | \"multiple\"> {\n  /** The reader's language: one of the rows' codes — or any tag, shown as the row it\n   *  resolves to ({@link LanguageSelect}'s rule). */\n  value: string;\n  onChange: (code: string) => void;\n  label: ReactNode;\n  /**\n   * The languages to offer, in order, and each one's text: {@link languageOptions}' rows\n   * as they come (the registry's names), or the app's own words for a code — keksdose's\n   * \"Deutsch (Schweiz)\". The text is the language's name in itself, as on every\n   * switcher, and each option carries that language's `lang`. A code the kit's registry\n   * does not know is not listed: the registry is where its `lang` comes from.\n   */\n  options: { code: string; label: string }[];\n  id?: string;\n}\n\n/**\n * The settings row for the reader's own language: a {@link LanguageSelect} over the rows\n * the app hands in (0.34, refactor audit 2026-10, API-7). It was a bare `Select` over the\n * same rows, so the three apps' language pickers lacked what LanguageSelect gives every\n * option — its `lang`, by which a screen reader says \"Français\" in French — and showed a\n * stored `de-AT` as nothing in particular rather than as the one German.\n */\nexport function LanguageSetting({ options, ...rest }: LanguageSettingProps) {\n  const text = new Map(options.map((option) => [option.code, option.label]));\n  return (\n    <LanguageSelect\n      {...rest}\n      codes={options.map((option) => option.code as KitLanguageCode)}\n      optionLabel={(language) => text.get(language.code) ?? language.nativeName}\n      optionLang=\"own\"\n    />\n  );\n}\n\n/**\n * What {@link TextSizeSetting} and {@link ContrastSetting} take: a {@link ToggleGroup}'s\n * props — `labelPlacement`, `disabledReason`, `commit`, `size`, `overflow` — minus the\n * options and the value, which they own, as {@link ThemeSettingToggleProps} does.\n */\ntype AppearanceToggleProps<T extends string> = Omit<ToggleGroupBaseProps<T>, \"options\" | \"label\"> & {\n  value: T;\n  onChange: (value: T) => void;\n  /**\n   * The field's visible label. Leave it out inside a row already titled with the\n   * setting's name: the group is then named by `aria-label` / `aria-labelledby` if\n   * given, else by the kit's own word (\"Text size\", \"Contrast\").\n   */\n  label?: ReactNode;\n  /** The `appearance` namespace, for this instance. */\n  labels?: LabelOverride<AppearanceLabels>;\n};\n\nexport type TextSizeSettingProps = AppearanceToggleProps<TextSize>;\n\n/**\n * The text size (0.32, docs/text-size-harmonization.md §6): Normal, Large, Extra large as\n * one segmented control, in the core `appearance` group after the theme. Bind it to the\n * size IN FORCE — `useAccountAppearance().textSize` — and hand a pick to its\n * `pickTextSize`, which stores the device's choice and, signed in, the account's.\n *\n * The options wrap rather than truncate (`overflow=\"wrap\"`): at Extra large on a 360 px\n * phone the group has 240 px, and \"Extra large\" cut to \"Extra l…\" would be the one\n * setting that cannot read its own value.\n */\nexport function TextSizeSetting({ value, onChange, label, labels: labelsProp, overflow = \"wrap\", ...rest }: TextSizeSettingProps) {\n  const labels = useAppearanceLabels(labelsProp);\n  const named = label !== undefined && label !== null && label !== false;\n  return (\n    <ToggleGroup<TextSize>\n      {...rest}\n      aria-label={named || rest[\"aria-labelledby\"] ? rest[\"aria-label\"] : (rest[\"aria-label\"] ?? labels.textSize)}\n      label={label}\n      overflow={overflow}\n      value={value}\n      onChange={onChange}\n      options={TEXT_SIZES.map((size) => ({ value: size, label: labels.textSizes[size] }))}\n    />\n  );\n}\n\nexport type ContrastSettingProps = AppearanceToggleProps<ContrastMode>;\n\n/**\n * More contrast (0.32, §5, §6): System, Standard, More as one segmented control, beside\n * the text size. Bind it to the stored MODE, \"system\" included — never to whether more\n * contrast is on at the moment, or a device that asks for more contrast would show\n * \"More\" and could not say \"follow the device\" (the theme's lesson, §8 of the settings\n * contract). `useAccountAppearance().contrast` is that mode.\n */\nexport function ContrastSetting({ value, onChange, label, labels: labelsProp, overflow = \"wrap\", ...rest }: ContrastSettingProps) {\n  const labels = useAppearanceLabels(labelsProp);\n  const named = label !== undefined && label !== null && label !== false;\n  return (\n    <ToggleGroup<ContrastMode>\n      {...rest}\n      aria-label={named || rest[\"aria-labelledby\"] ? rest[\"aria-label\"] : (rest[\"aria-label\"] ?? labels.contrast)}\n      label={label}\n      overflow={overflow}\n      value={value}\n      onChange={onChange}\n      options={CONTRAST_MODES.map((mode) => ({ value: mode, label: labels.contrastModes[mode] }))}\n    />\n  );\n}\n"],"mappings":";AA2FM,cAgBF,YAhBE;AA1FN,SAAS,cAAc;AAEvB,SAAS,mBAAmB;AAG5B,SAAS,kBAAkB;AAE3B,SAAS,sBAAsB;AAE/B,SAAS,2BAA2B;AAGpC,SAAS,sBAAsB;AA0ExB,SAAS,aAAa,OAA0B;AACrD,MAAI,MAAM,YAAY,UAAU;AAC9B,UAAM,EAAE,SAASA,WAAU,OAAAC,QAAO,UAAAC,WAAU,OAAAC,QAAO,cAAAC,eAAc,WAAW,QAAQ,GAAGC,MAAK,IAAI;AAChG,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAGA;AAAA,QACJ;AAAA,QACA,OAAOF;AAAA,QACP,OAAOF;AAAA,QACP,UAAUC;AAAA,QACV,SAAS;AAAA,UACP,EAAE,OAAO,UAAU,OAAOE,cAAa,OAAO;AAAA,UAC9C,EAAE,OAAO,SAAS,OAAOA,cAAa,MAAM;AAAA,UAC5C,EAAE,OAAO,QAAQ,OAAOA,cAAa,KAAK;AAAA,QAC5C;AAAA;AAAA,IACF;AAAA,EAEJ;AACA,QAAM,EAAE,SAAS,UAAU,OAAO,UAAU,OAAO,cAAc,IAAI,GAAG,KAAK,IAAI;AACjF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAwB;AAAA,MAE3D;AAAA,4BAAC,YAAO,OAAM,UAAU,uBAAa,QAAO;AAAA,QAC5C,oBAAC,YAAO,OAAM,SAAS,uBAAa,OAAM;AAAA,QAC1C,oBAAC,YAAO,OAAM,QAAQ,uBAAa,MAAK;AAAA;AAAA;AAAA,EAC1C;AAEJ;AA6BO,SAAS,gBAAgB,EAAE,SAAS,GAAG,KAAK,GAAyB;AAC1E,QAAM,OAAO,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,CAAC,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC;AACzE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO,QAAQ,IAAI,CAAC,WAAW,OAAO,IAAuB;AAAA,MAC7D,aAAa,CAAC,aAAa,KAAK,IAAI,SAAS,IAAI,KAAK,SAAS;AAAA,MAC/D,YAAW;AAAA;AAAA,EACb;AAEJ;AAgCO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,QAAQ,YAAY,WAAW,QAAQ,GAAG,KAAK,GAAyB;AAChI,QAAM,SAAS,oBAAoB,UAAU;AAC7C,QAAM,QAAQ,UAAU,UAAa,UAAU,QAAQ,UAAU;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,SAAS,KAAK,iBAAiB,IAAI,KAAK,YAAY,IAAK,KAAK,YAAY,KAAK,OAAO;AAAA,MAClG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,WAAW,IAAI,CAAC,UAAU,EAAE,OAAO,MAAM,OAAO,OAAO,UAAU,IAAI,EAAE,EAAE;AAAA;AAAA,EACpF;AAEJ;AAWO,SAAS,gBAAgB,EAAE,OAAO,UAAU,OAAO,QAAQ,YAAY,WAAW,QAAQ,GAAG,KAAK,GAAyB;AAChI,QAAM,SAAS,oBAAoB,UAAU;AAC7C,QAAM,QAAQ,UAAU,UAAa,UAAU,QAAQ,UAAU;AACjE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,SAAS,KAAK,iBAAiB,IAAI,KAAK,YAAY,IAAK,KAAK,YAAY,KAAK,OAAO;AAAA,MAClG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,eAAe,IAAI,CAAC,UAAU,EAAE,OAAO,MAAM,OAAO,OAAO,cAAc,IAAI,EAAE,EAAE;AAAA;AAAA,EAC5F;AAEJ;","names":["_variant","value","onChange","label","optionLabels","rest"]}

package/dist/components/share-card-labels.d.ts

@@ -0,0 +1,2 @@
+import type { ShareCardLabels } from "./share-card.js";
+export declare const DEFAULT_SHARE_CARD_LABELS: ShareCardLabels;

package/dist/components/share-card-labels.js

@@ -0,0 +1,29 @@
+"use client";
+const DEFAULT_SHARE_CARD_LABELS = {
+  dialogTitle: "Share",
+  close: "Close",
+  email: "Email address",
+  emailOptional: "Email address (optional)",
+  emailPlaceholder: "name@example.com",
+  invalidEmail: "Enter a complete email address.",
+  role: "Role",
+  roleOf: (name) => `Role of ${name}`,
+  add: "Share",
+  whoHasAccess: "Who has access",
+  nobodyYet: "Nobody else has access yet.",
+  pending: "Pending",
+  openInvite: "Open invite link",
+  copyLink: "Copy link",
+  team: "Team",
+  teamHint: (name) => `Everyone in ${name} gets access.`,
+  remove: "Remove access",
+  removeConfirm: (name) => `Remove access for ${name}?`,
+  revokePending: "Withdraw invitation",
+  revokePendingConfirm: (name) => `Withdraw the invitation for ${name}?`,
+  failed: "That did not work. Please try again.",
+  loading: "Loading\u2026"
+};
+export {
+  DEFAULT_SHARE_CARD_LABELS
+};
+//# sourceMappingURL=share-card-labels.js.map

package/dist/components/share-card-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/share-card-labels.ts"],"sourcesContent":["// The English words of ./share-card, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./share-card re-exports them.\n\nimport type { ShareCardLabels } from \"./share-card\";\n\nexport const DEFAULT_SHARE_CARD_LABELS: ShareCardLabels = {\n  dialogTitle: \"Share\",\n  close: \"Close\",\n  email: \"Email address\",\n  emailOptional: \"Email address (optional)\",\n  emailPlaceholder: \"name@example.com\",\n  invalidEmail: \"Enter a complete email address.\",\n  role: \"Role\",\n  roleOf: (name) => `Role of ${name}`,\n  add: \"Share\",\n  whoHasAccess: \"Who has access\",\n  nobodyYet: \"Nobody else has access yet.\",\n  pending: \"Pending\",\n  openInvite: \"Open invite link\",\n  copyLink: \"Copy link\",\n  team: \"Team\",\n  teamHint: (name) => `Everyone in ${name} gets access.`,\n  remove: \"Remove access\",\n  removeConfirm: (name) => `Remove access for ${name}?`,\n  revokePending: \"Withdraw invitation\",\n  revokePendingConfirm: (name) => `Withdraw the invitation for ${name}?`,\n  failed: \"That did not work. Please try again.\",\n  loading: \"Loading…\",\n};\n"],"mappings":";AAMO,MAAM,4BAA6C;AAAA,EACxD,aAAa;AAAA,EACb,OAAO;AAAA,EACP,OAAO;AAAA,EACP,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,MAAM;AAAA,EACN,QAAQ,CAAC,SAAS,WAAW,IAAI;AAAA,EACjC,KAAK;AAAA,EACL,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU,CAAC,SAAS,eAAe,IAAI;AAAA,EACvC,QAAQ;AAAA,EACR,eAAe,CAAC,SAAS,qBAAqB,IAAI;AAAA,EAClD,eAAe;AAAA,EACf,sBAAsB,CAAC,SAAS,+BAA+B,IAAI;AAAA,EACnE,QAAQ;AAAA,EACR,SAAS;AACX;","names":[]}