@eifi1/ui-kit 0.18.0 → 0.19.0

package/dist/components/legal.d.ts

@@ -0,0 +1,84 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * The legal pages' shell — Imprint, Privacy Policy, Terms — for every app (Marcel,
+ * 2026-10-02: every app has them; docs/i18n-harmonization.md H10).
+ *
+ * keksdose and kastlan each carried the same shell, written twice: a back link, the
+ * title, a "closed beta, not yet reviewed by a lawyer" notice, sections of heading +
+ * running text, and kastlan's row of links to the three pages with the current one
+ * marked. Kurvenschmiede had none. The words stay in each app — they are the app's
+ * legal statements, reviewed under the `legal` area of the translation review — and
+ * only the shape moves here.
+ *
+ * A CONTENT COLUMN, not a page: keksdose shows its legal pages inside its public
+ * landing header and footer, kastlan inside `AuthLayout` (`width="wide" card={false}`,
+ * no title of its own). Both put this inside their chrome; a page-owning layout would
+ * have fought one of them.
+ */
+interface LegalLabels {
+    /** The accessible name of {@link LegalLinks}' `<nav>`. */
+    navLabel: string;
+}
+declare const DEFAULT_LEGAL_LABELS: LegalLabels;
+interface LegalLink {
+    href: string;
+    /** "Imprint", "Privacy Policy", "Terms" — the app's words. */
+    label: ReactNode;
+}
+interface LegalLinksProps {
+    links: readonly LegalLink[];
+    /** The page being shown; its link is marked `aria-current="page"`. Usually the
+     *  router's pathname. */
+    currentHref?: string;
+    /** `false` renders the links without the `<nav>` — inside `AuthLayout`'s `footer`,
+     *  which wraps its footer in a `<nav>` named by `footerLabel` already. Default true. */
+    nav?: boolean;
+    labels?: Partial<LegalLabels>;
+    className?: string;
+}
+/** The legal pages as a row of quiet links, the one you are on marked (kastlan's
+ *  `LegalLinks`). Wraps on a phone. */
+declare function LegalLinks({ links, currentHref, nav, labels: labelsProp, className }: LegalLinksProps): react.JSX.Element;
+interface LegalSectionProps {
+    heading: ReactNode;
+    /** Running text. Line breaks in it are kept (`white-space: pre-line`), so a
+     *  translation can hold an address or a list as plain lines. */
+    body?: string;
+    /** Anything richer than plain text — links, a list — after `body`. */
+    children?: ReactNode;
+    /** The section's `id`, for a link to it from elsewhere ("see §4"). */
+    id?: string;
+    /** The heading's element. Default `h2`, under the layout's `h1`. */
+    headingAs?: "h2" | "h3";
+}
+declare function LegalSection({ heading, body, children, id, headingAs: Heading }: LegalSectionProps): react.JSX.Element;
+interface LegalLayoutProps {
+    /** "Imprint", "Privacy Policy", "Terms". */
+    title: ReactNode;
+    /** Above the title — the app's "← Back" link (`<TextLink icon={ArrowLeft}>`), whose
+     *  target differs per app (keksdose's start page, kastlan's sign-in). */
+    back?: ReactNode;
+    /**
+     * A notice under the title, as a warning banner with `role="note"` — page furniture,
+     * not an alert. Both apps say their legal texts await a lawyer's review; keksdose's
+     * privacy page says something more precise than the others (its technical sections
+     * describe running code), so the notice is per page, not per layout.
+     */
+    notice?: ReactNode;
+    /** The sections — {@link LegalSection}s. */
+    children: ReactNode;
+    /** The three pages, linked at the end of the column with the current one marked.
+     *  Leave out when the page's chrome already shows them (kastlan's AuthLayout footer). */
+    links?: readonly LegalLink[];
+    currentHref?: string;
+    /** Default `h1`: the page's heading. */
+    headingAs?: "h1" | "h2";
+    /** Extra classes on the column — `px-0 py-0` inside a chrome that pads already. */
+    className?: string;
+    labels?: Partial<LegalLabels>;
+}
+declare function LegalLayout({ title, back, notice, children, links, currentHref, headingAs: Heading, className, labels, }: LegalLayoutProps): react.JSX.Element;
+
+export { DEFAULT_LEGAL_LABELS, type LegalLabels, LegalLayout, type LegalLayoutProps, type LegalLink, LegalLinks, type LegalLinksProps, LegalSection, type LegalSectionProps };

package/dist/components/legal.js

@@ -0,0 +1,55 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { cn } from "../lib/cn.js";
+import { AlertBanner } from "./alert-banner.js";
+import { TextLink } from "./text-link.js";
+const DEFAULT_LEGAL_LABELS = {
+  navLabel: "Legal"
+};
+function LegalLinks({ links, currentHref, nav = true, labels: labelsProp, className }) {
+  const labels = useKitLabels("legal", DEFAULT_LEGAL_LABELS, labelsProp);
+  const items = links.map((link) => /* @__PURE__ */ jsx(TextLink, { href: link.href, tone: "muted", current: link.href === currentHref, children: link.label }, link.href));
+  if (!nav) return /* @__PURE__ */ jsx(Fragment, { children: items });
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": labels.navLabel,
+      className: cn("flex flex-wrap gap-x-4 gap-y-1 text-xs", className),
+      children: items
+    }
+  );
+}
+function LegalSection({ heading, body, children, id, headingAs: Heading = "h2" }) {
+  return /* @__PURE__ */ jsxs("section", { id, className: "scroll-mt-20", children: [
+    /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-[var(--text-primary)]", children: heading }),
+    body !== void 0 && /* @__PURE__ */ jsx("p", { className: "mt-2 whitespace-pre-line text-sm leading-relaxed text-[var(--text-secondary)]", children: body }),
+    children !== void 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm leading-relaxed text-[var(--text-secondary)]", children })
+  ] });
+}
+function LegalLayout({
+  title,
+  back,
+  notice,
+  children,
+  links,
+  currentHref,
+  headingAs: Heading = "h1",
+  className,
+  labels
+}) {
+  return /* @__PURE__ */ jsxs("article", { className: cn("mx-auto w-full max-w-3xl px-4 py-12", className), children: [
+    back !== void 0 && /* @__PURE__ */ jsx("div", { className: "mb-4 text-sm", children: back }),
+    /* @__PURE__ */ jsx(Heading, { className: "text-3xl font-bold tracking-tight text-[var(--text-primary)]", children: title }),
+    notice !== void 0 && notice !== null && /* @__PURE__ */ jsx(AlertBanner, { tone: "warning", role: "note", className: "mt-4", children: notice }),
+    /* @__PURE__ */ jsx("div", { className: "mt-8 space-y-8", children }),
+    links !== void 0 && links.length > 0 && /* @__PURE__ */ jsx(LegalLinks, { links, currentHref, labels, className: "mt-12 border-t border-[var(--border)] pt-4" })
+  ] });
+}
+export {
+  DEFAULT_LEGAL_LABELS,
+  LegalLayout,
+  LegalLinks,
+  LegalSection
+};
+//# sourceMappingURL=legal.js.map

package/dist/components/legal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/legal.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { AlertBanner } from \"./alert-banner\";\nimport { TextLink } from \"./text-link\";\n\n/**\n * The legal pages' shell — Imprint, Privacy Policy, Terms — for every app (Marcel,\n * 2026-10-02: every app has them; docs/i18n-harmonization.md H10).\n *\n * keksdose and kastlan each carried the same shell, written twice: a back link, the\n * title, a \"closed beta, not yet reviewed by a lawyer\" notice, sections of heading +\n * running text, and kastlan's row of links to the three pages with the current one\n * marked. Kurvenschmiede had none. The words stay in each app — they are the app's\n * legal statements, reviewed under the `legal` area of the translation review — and\n * only the shape moves here.\n *\n * A CONTENT COLUMN, not a page: keksdose shows its legal pages inside its public\n * landing header and footer, kastlan inside `AuthLayout` (`width=\"wide\" card={false}`,\n * no title of its own). Both put this inside their chrome; a page-owning layout would\n * have fought one of them.\n */\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\nexport interface LegalLabels {\n  /** The accessible name of {@link LegalLinks}' `<nav>`. */\n  navLabel: string;\n}\n\nexport const DEFAULT_LEGAL_LABELS: LegalLabels = {\n  navLabel: \"Legal\",\n};\n\n// ── Links ─────────────────────────────────────────────────────────────────────\n\nexport interface LegalLink {\n  href: string;\n  /** \"Imprint\", \"Privacy Policy\", \"Terms\" — the app's words. */\n  label: ReactNode;\n}\n\nexport interface LegalLinksProps {\n  links: readonly LegalLink[];\n  /** The page being shown; its link is marked `aria-current=\"page\"`. Usually the\n   *  router's pathname. */\n  currentHref?: string;\n  /** `false` renders the links without the `<nav>` — inside `AuthLayout`'s `footer`,\n   *  which wraps its footer in a `<nav>` named by `footerLabel` already. Default true. */\n  nav?: boolean;\n  labels?: Partial<LegalLabels>;\n  className?: string;\n}\n\n/** The legal pages as a row of quiet links, the one you are on marked (kastlan's\n *  `LegalLinks`). Wraps on a phone. */\nexport function LegalLinks({ links, currentHref, nav = true, labels: labelsProp, className }: LegalLinksProps) {\n  const labels = useKitLabels(\"legal\", DEFAULT_LEGAL_LABELS, labelsProp);\n  const items = links.map((link) => (\n    <TextLink key={link.href} href={link.href} tone=\"muted\" current={link.href === currentHref}>\n      {link.label}\n    </TextLink>\n  ));\n  if (!nav) return <>{items}</>;\n  return (\n    <nav\n      aria-label={labels.navLabel}\n      className={cn(\"flex flex-wrap gap-x-4 gap-y-1 text-xs\", className)}\n    >\n      {items}\n    </nav>\n  );\n}\n\n// ── Section ───────────────────────────────────────────────────────────────────\n\nexport interface LegalSectionProps {\n  heading: ReactNode;\n  /** Running text. Line breaks in it are kept (`white-space: pre-line`), so a\n   *  translation can hold an address or a list as plain lines. */\n  body?: string;\n  /** Anything richer than plain text — links, a list — after `body`. */\n  children?: ReactNode;\n  /** The section's `id`, for a link to it from elsewhere (\"see §4\"). */\n  id?: string;\n  /** The heading's element. Default `h2`, under the layout's `h1`. */\n  headingAs?: \"h2\" | \"h3\";\n}\n\nexport function LegalSection({ heading, body, children, id, headingAs: Heading = \"h2\" }: LegalSectionProps) {\n  return (\n    <section id={id} className=\"scroll-mt-20\">\n      <Heading className=\"text-lg font-semibold text-[var(--text-primary)]\">{heading}</Heading>\n      {body !== undefined && (\n        <p className=\"mt-2 whitespace-pre-line text-sm leading-relaxed text-[var(--text-secondary)]\">{body}</p>\n      )}\n      {children !== undefined && (\n        <div className=\"mt-2 text-sm leading-relaxed text-[var(--text-secondary)]\">{children}</div>\n      )}\n    </section>\n  );\n}\n\n// ── Layout ────────────────────────────────────────────────────────────────────\n\nexport interface LegalLayoutProps {\n  /** \"Imprint\", \"Privacy Policy\", \"Terms\". */\n  title: ReactNode;\n  /** Above the title — the app's \"← Back\" link (`<TextLink icon={ArrowLeft}>`), whose\n   *  target differs per app (keksdose's start page, kastlan's sign-in). */\n  back?: ReactNode;\n  /**\n   * A notice under the title, as a warning banner with `role=\"note\"` — page furniture,\n   * not an alert. Both apps say their legal texts await a lawyer's review; keksdose's\n   * privacy page says something more precise than the others (its technical sections\n   * describe running code), so the notice is per page, not per layout.\n   */\n  notice?: ReactNode;\n  /** The sections — {@link LegalSection}s. */\n  children: ReactNode;\n  /** The three pages, linked at the end of the column with the current one marked.\n   *  Leave out when the page's chrome already shows them (kastlan's AuthLayout footer). */\n  links?: readonly LegalLink[];\n  currentHref?: string;\n  /** Default `h1`: the page's heading. */\n  headingAs?: \"h1\" | \"h2\";\n  /** Extra classes on the column — `px-0 py-0` inside a chrome that pads already. */\n  className?: string;\n  labels?: Partial<LegalLabels>;\n}\n\nexport function LegalLayout({\n  title,\n  back,\n  notice,\n  children,\n  links,\n  currentHref,\n  headingAs: Heading = \"h1\",\n  className,\n  labels,\n}: LegalLayoutProps) {\n  return (\n    <article className={cn(\"mx-auto w-full max-w-3xl px-4 py-12\", className)}>\n      {back !== undefined && <div className=\"mb-4 text-sm\">{back}</div>}\n      <Heading className=\"text-3xl font-bold tracking-tight text-[var(--text-primary)]\">{title}</Heading>\n      {notice !== undefined && notice !== null && (\n        <AlertBanner tone=\"warning\" role=\"note\" className=\"mt-4\">\n          {notice}\n        </AlertBanner>\n      )}\n      <div className=\"mt-8 space-y-8\">{children}</div>\n      {links !== undefined && links.length > 0 && (\n        <LegalLinks links={links} currentHref={currentHref} labels={labels} className=\"mt-12 border-t border-[var(--border)] pt-4\" />\n      )}\n    </article>\n  );\n}\n"],"mappings":";AA4DI,SAIe,UAJf,KAgCA,YAhCA;AA1DJ,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AA0BlB,MAAM,uBAAoC;AAAA,EAC/C,UAAU;AACZ;AAwBO,SAAS,WAAW,EAAE,OAAO,aAAa,MAAM,MAAM,QAAQ,YAAY,UAAU,GAAoB;AAC7G,QAAM,SAAS,aAAa,SAAS,sBAAsB,UAAU;AACrE,QAAM,QAAQ,MAAM,IAAI,CAAC,SACvB,oBAAC,YAAyB,MAAM,KAAK,MAAM,MAAK,SAAQ,SAAS,KAAK,SAAS,aAC5E,eAAK,SADO,KAAK,IAEpB,CACD;AACD,MAAI,CAAC,IAAK,QAAO,gCAAG,iBAAM;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,OAAO;AAAA,MACnB,WAAW,GAAG,0CAA0C,SAAS;AAAA,MAEhE;AAAA;AAAA,EACH;AAEJ;AAiBO,SAAS,aAAa,EAAE,SAAS,MAAM,UAAU,IAAI,WAAW,UAAU,KAAK,GAAsB;AAC1G,SACE,qBAAC,aAAQ,IAAQ,WAAU,gBACzB;AAAA,wBAAC,WAAQ,WAAU,oDAAoD,mBAAQ;AAAA,IAC9E,SAAS,UACR,oBAAC,OAAE,WAAU,iFAAiF,gBAAK;AAAA,IAEpG,aAAa,UACZ,oBAAC,SAAI,WAAU,6DAA6D,UAAS;AAAA,KAEzF;AAEJ;AA8BO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AAAA,EACrB;AAAA,EACA;AACF,GAAqB;AACnB,SACE,qBAAC,aAAQ,WAAW,GAAG,uCAAuC,SAAS,GACpE;AAAA,aAAS,UAAa,oBAAC,SAAI,WAAU,gBAAgB,gBAAK;AAAA,IAC3D,oBAAC,WAAQ,WAAU,gEAAgE,iBAAM;AAAA,IACxF,WAAW,UAAa,WAAW,QAClC,oBAAC,eAAY,MAAK,WAAU,MAAK,QAAO,WAAU,QAC/C,kBACH;AAAA,IAEF,oBAAC,SAAI,WAAU,kBAAkB,UAAS;AAAA,IACzC,UAAU,UAAa,MAAM,SAAS,KACrC,oBAAC,cAAW,OAAc,aAA0B,QAAgB,WAAU,8CAA6C;AAAA,KAE/H;AAEJ;","names":[]}

package/dist/components/money-field.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ComponentProps, Ref } from 'react';
 import { AmountInput } from './amount-input.js';
 import './calculator.js';
-import '../kit-labels-CPbsjlXr.js';
+import '../kit-labels-D1J2_jyD.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -54,6 +54,7 @@ import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
+import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
 import '../data-table-3mi2R3so.js';
@@ -62,6 +63,8 @@ import './swipeable-row.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 './numpad-sheet.js';
 
 type AmountInputProps = ComponentProps<typeof AmountInput>;

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

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import { NumberInput } from './number-input.js';
 import './calculator.js';
-import '../kit-labels-CPbsjlXr.js';
+import '../kit-labels-D1J2_jyD.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -54,6 +54,7 @@ import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
+import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
 import '../data-table-3mi2R3so.js';
@@ -62,6 +63,8 @@ import './swipeable-row.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 './numpad-sheet.js';
 
 type NumberInputProps = ComponentProps<typeof NumberInput>;

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

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
 import { NumberPadSheetLabels } from './numpad-sheet.js';
-import '../kit-labels-CPbsjlXr.js';
+import '../kit-labels-D1J2_jyD.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -54,6 +54,7 @@ import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
+import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
 import '../data-table-3mi2R3so.js';
@@ -62,6 +63,8 @@ import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
 
 interface NumberInputProps {
     value: string;

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

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { C as CalculatorLabels } from '../kit-labels-CPbsjlXr.js';
+import { C as CalculatorLabels } from '../kit-labels-D1J2_jyD.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -52,6 +52,7 @@ import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
+import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
 import '../data-table-3mi2R3so.js';
@@ -60,6 +61,8 @@ import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
 
 /**
  * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to

package/dist/components/series-chart.d.ts

@@ -5,7 +5,7 @@ import { LegendEntry } from './toggle-legend.js';
 import { SeriesChartLabels } from './series-chart-labels.js';
 import { TimeTickUnit } from './series-chart-ticks.js';
 import { SeriesChartAxisBudget } from './series-chart-budget.js';
-import { x as ChartTooltipPlacement } from '../kit-labels-CPbsjlXr.js';
+import { x as ChartTooltipPlacement } from '../kit-labels-D1J2_jyD.js';
 import 'recharts';
 import './data-table-labels.js';
 import './mini-calendar.js';
@@ -57,6 +57,7 @@ import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
+import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
 import '../data-table-3mi2R3so.js';
@@ -65,6 +66,8 @@ import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
 
 interface SeriesChartSeries {
     /** The row key this line reads — and the `--color-<key>` it is painted with, so it

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

@@ -10,7 +10,8 @@ import { ServerWakeWatcher, ServerWakeStage } from '../lib/server-wake.js';
  * 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.
+ * 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).
  *
  * 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,
@@ -43,7 +44,8 @@ interface ServerWakeNoticeProps {
      */
     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}. */
+     *  offset is an inline style, so move it vertically with {@link navOffset}. Either
+     *  way it rises above a visible FloatingActionButton under it. */
     className?: string;
 }
 /**

package/dist/components/server-wake.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useSyncExternalStore } from "react";
+import { useLayoutEffect, useRef, useState, 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";
@@ -14,16 +15,36 @@ 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 }) {
   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: `calc(max(${navOffset === void 0 ? "var(--app-nav-h, 0px)" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 1rem)`
+    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,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/server-wake.tsx"],"sourcesContent":["import { useSyncExternalStore } from \"react\";\nimport type { CSSProperties } from \"react\";\n\nimport { useKitLabels } 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 \"./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.\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}. */\n  className?: string;\n}\n\nconst px = (v: string | number) => (typeof v === \"number\" ? `${v}px` : v);\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 style: CSSProperties = {\n    bottom: `calc(max(${navOffset === undefined ? \"var(--app-nav-h, 0px)\" : px(navOffset)}, env(safe-area-inset-bottom, 0px)) + 1rem)`,\n  };\n\n  return (\n    <div\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":";AAoHgB;AApHhB,SAAS,4BAA4B;AAGrC,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAE3B,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AA4BjB,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;AAwBA,MAAM,KAAK,CAAC,MAAwB,OAAO,MAAM,WAAW,GAAG,CAAC,OAAO;AAShE,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,QAAuB;AAAA,IAC3B,QAAQ,YAAY,cAAc,SAAY,0BAA0B,GAAG,SAAS,CAAC;AAAA,EACvF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,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 { 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":[]}

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

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { aQ as SelectProps } from '../kit-labels-CPbsjlXr.js';
+import { aQ as SelectProps } from '../kit-labels-D1J2_jyD.js';
 import { ThemePreference } from '../theme/theme-store.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
@@ -53,6 +53,7 @@ import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
+import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
 import '../data-table-3mi2R3so.js';
@@ -61,6 +62,8 @@ import './swipeable-row.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 'zustand/middleware';
 import 'zustand';
 

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

@@ -1,7 +1,7 @@
 import 'react';
 import './account-chips.js';
 import './dialog-frame.js';
-export { U as DEFAULT_SHARE_CARD_LABELS, aR as ShareAddRequest, aS as ShareCandidate, aT as ShareCard, aU as ShareCardLabels, aV as ShareCardProps, aW as ShareDialog, aX as ShareDialogProps, aY as ShareGrantee, aZ as SharePanel, a_ as SharePanelProps, a$ as SharePendingGrant, b0 as ShareRole } from '../kit-labels-CPbsjlXr.js';
+export { U as DEFAULT_SHARE_CARD_LABELS, aR as ShareAddRequest, aS as ShareCandidate, aT as ShareCard, aU as ShareCardLabels, aV as ShareCardProps, aW as ShareDialog, aX as ShareDialogProps, aY as ShareGrantee, aZ as SharePanel, a_ as SharePanelProps, a$ as SharePendingGrant, b0 as ShareRole } from '../kit-labels-D1J2_jyD.js';
 import 'lucide-react';
 import '../lib/format.js';
 import './chip.js';
@@ -56,6 +56,9 @@ import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
+import './legal.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';

package/dist/components/text-link.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactElement, ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, KeyboardEvent } from 'react';
 import { LucideIcon } from 'lucide-react';
-import { aF as KitLinkComponent } from '../kit-labels-CPbsjlXr.js';
+import { aF as KitLinkComponent } from '../kit-labels-D1J2_jyD.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -52,6 +52,7 @@ import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
+import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
 import '../data-table-3mi2R3so.js';
@@ -60,6 +61,8 @@ import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
 
 /**
  * An `href` that leaves the app: a scheme (`https:`, `mailto:`, `tel:`) or a

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

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { aE as InputProps } from '../kit-labels-CPbsjlXr.js';
+import { aE as InputProps } from '../kit-labels-D1J2_jyD.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -51,6 +51,7 @@ import '../hooks/use-authed-src.js';
 import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
+import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
 import '../data-table-3mi2R3so.js';
@@ -59,6 +60,8 @@ import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
+import './translation-review-labels.js';
+import '../lib/translation-review.js';
 
 /**
  * A time of day, as a `"HH:mm"` string (`"HH:mm:ss"` once `step` asks for seconds).

package/dist/components/translation-review-editor.d.ts

@@ -0,0 +1,56 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { TranslationRow, TranslationReviewWrite, TranslationReviewKey } from '../lib/translation-review.js';
+import { TranslationReviewLabels } from './translation-review-labels.js';
+
+/** A callback may return a promise: resolve and the editor closes, reject and it stays
+ *  open with the error. */
+type MaybePromise = void | Promise<unknown>;
+interface TranslationReviewEditorProps {
+    row: TranslationRow;
+    /** The reference language's own name ("English", "Deutsch") — the app's choice of
+     *  reference, so the app's word for it. */
+    referenceLabel: ReactNode;
+    /** The reviewed language's own name ("Français"). */
+    localeLabel: ReactNode;
+    /** Store a verdict. Left out (or `readOnly`): the editor shows the row and its last
+     *  verdict, with no fields and no actions. */
+    onSave?: (write: TranslationReviewWrite) => MaybePromise;
+    /** Clear the verdict — back to unreviewed. Left out: no reset button. */
+    onClear?: (key: TranslationReviewKey) => MaybePromise;
+    /** The Cancel button — and called after a save or a reset resolves, so the panel
+     *  that opened the editor closes it. */
+    onClose?: () => void;
+    /** Look, do not touch: a locale the viewer may read but not review. */
+    readOnly?: boolean;
+    /** How the verdict's date reads. Default: the kit's `formatDate`, medium, in the
+     *  provider's locale. */
+    formatDate?: (iso: string) => string;
+    /** Turns a rejection into words. Default {@link TranslationReviewLabels.failed}. */
+    formatError?: (error: unknown) => ReactNode;
+    className?: string;
+    labels?: Partial<TranslationReviewLabels>;
+}
+/**
+ * One string, opened: the reference beside the translation, what changed since the last
+ * verdict, what a machine can see is wrong (the placeholders), and the two things a
+ * reviewer can say about it — keksdose's and kastlan's `translation-review-editor.tsx`.
+ *
+ * "Better wording" opens on the CURRENT text rather than empty, because the usual
+ * correction is a word or an ending, and retyping a sentence to change one word is how
+ * new mistakes get in. It is sent only with "Needs a change" — approving says the text is
+ * fine as it stands. A "Needs a change" with neither a note nor a different wording tells
+ * whoever fixes it nothing, so it takes one of the two.
+ *
+ * A MISSING string (kastlan: the locale lacks the key) cannot be approved — there is
+ * nothing to approve. Its field starts empty and is the translation to add; the verdict
+ * is NEEDS_CHANGE on the empty text, which the export hands a developer as the string to
+ * add.
+ *
+ * Every action waits for its callback: the buttons hold while the promise is out, a
+ * resolution closes the editor through `onClose`, and a rejection keeps it open with what
+ * was typed and the error under the buttons.
+ */
+declare function TranslationReviewEditor({ row, referenceLabel, localeLabel, onSave, onClear, onClose, readOnly, formatDate: formatDateProp, formatError, className, labels: labelsProp, }: TranslationReviewEditorProps): react.JSX.Element;
+
+export { TranslationReviewEditor, type TranslationReviewEditorProps };