@eifi1/ui-kit 0.12.0 → 0.13.1

package/dist/components/error-boundary.js

@@ -1,15 +1,24 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Component } from "react";
-import { AlertTriangle } from "lucide-react";
+import { AlertTriangle, RefreshCw, WifiOff } from "lucide-react";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { Button, EmptyState } from "./ui.js";
+import { CopyButton } from "./copy-button.js";
 import { Disclosure } from "./disclosure.js";
 const DEFAULT_ERROR_BOUNDARY_LABELS = {
   title: "Something went wrong",
   message: "This part of the page could not be shown. Try again, or reload the page.",
   retry: "Try again",
-  details: "Error details"
+  details: "Error details",
+  reload: "Reload",
+  updateTitle: "A new version is available",
+  updateMessage: "Part of the app has changed since this page was loaded. Reload to get the new version.",
+  offlineTitle: "You\u2019re offline",
+  offlineMessage: "This page could not be loaded without a connection. Reconnect, then reload the page.",
+  copyReport: "Copy error report",
+  reported: "This error has been reported automatically.",
+  reportedAs: (reference) => `Reported as ${reference}`
 };
 function read(get) {
   try {
@@ -19,30 +28,192 @@ function read(get) {
     return void 0;
   }
 }
+function safeJson(value) {
+  try {
+    const json = JSON.stringify(value);
+    if (!json || json === "{}") return "";
+    return json.length > 500 ? `${json.slice(0, 499)}\u2026` : json;
+  } catch {
+    return "";
+  }
+}
 function describeThrown(error) {
   if (typeof error === "object" && error !== null) {
     const e = error;
+    const message = read(() => e.message) ?? "";
     return {
       name: read(() => e.name) ?? "Error",
-      message: read(() => e.message) ?? "",
+      // `throw { code: 500 }` has no message, and an empty line leaves crash triage with
+      // nothing (keksdose G3a; its old reporter filed `{"code":500}`). Such a value is
+      // quoted as JSON instead, capped, and never at the cost of a throw.
+      message: message || (error instanceof Error ? "" : safeJson(error)),
       stack: read(() => e.stack)
     };
   }
   return { name: "Error", message: read(() => error) ?? "" };
 }
-const CLEAR = { failed: false, error: null, details: null };
+function isChunkLoadError(error) {
+  try {
+    const s = `${error?.name ?? ""} ${error?.message ?? ""}`;
+    return /ChunkLoadError|dynamically imported module|module script failed|Loading chunk|Failed to fetch/i.test(s);
+  } catch {
+    return false;
+  }
+}
+function formatCrashReport(report) {
+  const lines = [
+    report.message ? `${report.name}: ${report.message}` : report.name,
+    `Page: ${report.page}`,
+    `Time: ${report.time}`,
+    `User agent: ${report.userAgent}`
+  ];
+  if (report.appVersion) lines.push(`App version: ${report.appVersion}`);
+  if (report.online === false) lines.push("Online: no");
+  for (const [key, value] of Object.entries(report.extras)) lines.push(`${key}: ${value}`);
+  if (report.stack) lines.push("", "Stack:", report.stack.trim());
+  if (report.componentStack) lines.push("", "Component stack:", report.componentStack.trim());
+  return lines.join("\n");
+}
+function crashFingerprint(report) {
+  const frames = (report.stack ?? "").split("\n").slice(0, 4).join("|");
+  return `${report.name}::${report.message}::${frames}`;
+}
+const NOT_FILED = { filed: false };
+const MAX_REPORTS_PER_PAGE_LOAD = 5;
+const filings = /* @__PURE__ */ new Map();
+function settle(out) {
+  try {
+    if (out && typeof out === "object") {
+      const o = out;
+      if (o.filed === false) return NOT_FILED;
+      const reference = typeof o.reference === "string" && o.reference ? o.reference : void 0;
+      return { filed: true, reference };
+    }
+    return { filed: true };
+  } catch {
+    return NOT_FILED;
+  }
+}
+function fileOnce(report, onReport) {
+  const key = crashFingerprint(report);
+  const known = filings.get(key);
+  if (known) return known;
+  if (filings.size >= MAX_REPORTS_PER_PAGE_LOAD) return Promise.resolve(NOT_FILED);
+  let filing;
+  try {
+    filing = Promise.resolve(onReport(report)).then(settle, () => NOT_FILED);
+  } catch {
+    filing = Promise.resolve(NOT_FILED);
+  }
+  filings.set(key, filing);
+  return filing;
+}
+function isOffline() {
+  try {
+    return typeof navigator !== "undefined" && navigator.onLine === false;
+  } catch {
+    return false;
+  }
+}
+function reloadPage() {
+  try {
+    window.location.reload();
+  } catch {
+  }
+}
+const CLEAR = {
+  failed: false,
+  error: null,
+  details: null,
+  report: null,
+  filing: "none",
+  reference: void 0
+};
 function keysChanged(a, b) {
   if (a === b) return false;
   if (!a || !b || a.length !== b.length) return true;
   return a.some((v, i) => !Object.is(v, b[i]));
 }
+function currentPage() {
+  try {
+    const { pathname, search } = window.location;
+    return { page: `${pathname}${search}`, path: pathname };
+  } catch {
+    return { page: "", path: "" };
+  }
+}
+function buildReport(details, componentStack, props) {
+  const { page, path } = currentPage();
+  const extras = {};
+  try {
+    const more = props.reportExtras?.();
+    if (more) for (const [k, v] of Object.entries(more)) extras[k] = String(v);
+  } catch {
+  }
+  let userAgent = "";
+  let online;
+  try {
+    userAgent = navigator.userAgent;
+    online = typeof navigator.onLine === "boolean" ? navigator.onLine : void 0;
+  } catch {
+  }
+  const report = {
+    name: details.name,
+    message: details.message,
+    stack: details.stack,
+    componentStack: componentStack ?? void 0,
+    page,
+    time: (/* @__PURE__ */ new Date()).toISOString(),
+    userAgent,
+    appVersion: props.appVersion,
+    online,
+    chunkLoad: isChunkLoadError(details),
+    extras
+  };
+  if (!props.redact) return report;
+  try {
+    return props.redact(report);
+  } catch {
+    return { ...report, page: path, extras: {} };
+  }
+}
 class ErrorBoundary extends Component {
   state = CLEAR;
+  /** Bumped by every catch and reset, so a filing that settles after the screen moved
+   *  on (Try again, a route change, a second crash) does not write into it. */
+  generation = 0;
+  /**
+   * Forget which crashes this page load has filed, and the count towards the cap.
+   *
+   * For tests: the dedupe lives in module scope because a page load is what it spans,
+   * and a test file is one page load — so without this, the sixth test that files a
+   * report finds the cap reached and `onReport` never called. Call it in `beforeEach`.
+   * Never needed in an app: a reload is the reset.
+   */
+  static forgetReports() {
+    filings.clear();
+  }
   static getDerivedStateFromError(error) {
-    return { failed: true, error, details: describeThrown(error) };
+    return { failed: true, error, details: describeThrown(error), report: null, filing: "none", reference: void 0 };
   }
   componentDidCatch(error, info) {
-    this.props.onError?.(error, info);
+    try {
+      this.props.onError?.(error, info);
+    } catch {
+    }
+    const details = this.state.details ?? describeThrown(error);
+    const report = buildReport(details, info.componentStack ?? void 0, this.props);
+    const { onReport } = this.props;
+    const willFile = onReport !== void 0 && !report.chunkLoad;
+    const generation = ++this.generation;
+    this.setState({ report, filing: willFile ? "pending" : "none", reference: void 0 });
+    if (!willFile) return;
+    void fileOnce(report, onReport).then((filing) => {
+      if (generation !== this.generation) return;
+      this.setState(
+        filing.filed ? { filing: "filed", reference: filing.reference } : { filing: "failed", reference: void 0 }
+      );
+    });
   }
   componentDidUpdate(prev, prevState) {
     if (this.state.failed && prevState.failed && keysChanged(prev.resetKeys, this.props.resetKeys)) {
@@ -50,21 +221,28 @@ class ErrorBoundary extends Component {
     }
   }
   reset = () => {
+    this.generation++;
     this.props.onReset?.();
     this.setState(CLEAR);
   };
   render() {
-    const { failed, error, details } = this.state;
+    const { failed, error, details, report, filing, reference } = this.state;
     if (!failed || !details) return this.props.children;
     const { fallback } = this.props;
-    if (typeof fallback === "function") return fallback({ error, details, reset: this.reset });
+    if (typeof fallback === "function") return fallback({ error, details, reset: this.reset, report });
     if (fallback !== void 0) return fallback;
     return /* @__PURE__ */ jsx(
       ErrorFallback,
       {
         details,
+        report,
+        filing,
+        reference,
         reset: this.reset,
-        showDetails: this.props.showDetails ?? false,
+        showMessage: this.props.showMessage ?? true,
+        showDetails: this.props.showDetails ?? true,
+        copyReport: this.props.copyReport ?? true,
+        actions: this.props.actions,
         headingAs: this.props.headingAs ?? "h2",
         className: this.props.className,
         labels: this.props.labels
@@ -74,31 +252,54 @@ class ErrorBoundary extends Component {
 }
 function ErrorFallback({
   details,
+  report,
+  filing,
+  reference,
   reset,
+  showMessage,
   showDetails,
+  copyReport,
+  actions,
   headingAs,
   className,
   labels
 }) {
   const text = useKitLabels("errorBoundary", DEFAULT_ERROR_BOUNDARY_LABELS, labels);
+  const chunk = isChunkLoadError(details);
+  const mode = isOffline() ? "offline" : chunk ? "update" : "error";
+  const title = mode === "offline" ? text.offlineTitle : mode === "update" ? text.updateTitle : text.title;
+  const hint = mode === "offline" ? text.offlineMessage : mode === "update" ? text.updateMessage : text.message;
+  const Icon = mode === "offline" ? WifiOff : mode === "update" ? RefreshCw : AlertTriangle;
+  const reportText = report ? formatCrashReport(report) : null;
+  const errorLine = details.message ? `${details.name}: ${details.message}` : details.name;
+  const reloadButton = /* @__PURE__ */ jsx(Button, { variant: mode === "error" ? "secondary" : "primary", onClick: reloadPage, children: text.reload }, "reload");
+  const retryButton = chunk ? null : /* @__PURE__ */ jsx(Button, { variant: mode === "error" ? "primary" : "secondary", onClick: reset, children: text.retry }, "retry");
   return /* @__PURE__ */ jsx(
     EmptyState,
     {
       role: "alert",
-      tone: "danger",
+      tone: mode === "error" ? "danger" : void 0,
       headingAs,
       className,
-      icon: /* @__PURE__ */ jsx(AlertTriangle, {}),
-      title: text.title,
-      hint: text.message,
+      icon: /* @__PURE__ */ jsx(Icon, {}),
+      title,
+      hint,
       action: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: reset, children: text.retry }),
-        showDetails && /* @__PURE__ */ jsx(Disclosure, { variant: "bare", title: text.details, className: "basis-full text-start", children: /* @__PURE__ */ jsxs("pre", { className: "max-h-60 overflow-auto whitespace-pre-wrap break-words text-xs text-[var(--text-secondary)]", children: [
-          details.message ? `${details.name}: ${details.message}` : details.name,
-          details.stack ? `
-
-${details.stack}` : null
-        ] }) })
+        showMessage && mode === "error" && // A quotation, not prose: left-aligned and monospaced, so it reads as the
+        // program's words and can be read out or screenshotted verbatim.
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            "data-error-message": "",
+            className: "-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-[var(--danger-border)] bg-[var(--danger-bg)] px-3 py-2 text-start font-mono text-xs text-[var(--text-primary)]",
+            children: errorLine
+          }
+        ),
+        filing === "filed" && /* @__PURE__ */ jsx("p", { className: "-mt-1 mb-1 basis-full text-xs", children: reference ? text.reportedAs(reference) : text.reported }),
+        mode === "error" ? [retryButton, reloadButton] : [reloadButton, retryButton],
+        copyReport && reportText !== null && filing !== "filed" && /* @__PURE__ */ jsx(CopyButton, { variant: "label", buttonVariant: "ghost", label: text.copyReport, text: reportText }),
+        actions,
+        showDetails && reportText !== null && /* @__PURE__ */ jsx(Disclosure, { variant: "bare", title: text.details, className: "basis-full text-start", children: /* @__PURE__ */ jsx("pre", { className: "max-h-60 overflow-auto whitespace-pre-wrap break-words text-xs text-[var(--text-secondary)]", children: reportText }) })
       ] })
     }
   );
@@ -106,6 +307,9 @@ ${details.stack}` : null
 export {
   DEFAULT_ERROR_BOUNDARY_LABELS,
   ErrorBoundary,
-  describeThrown
+  crashFingerprint,
+  describeThrown,
+  formatCrashReport,
+  isChunkLoadError
 };
 //# sourceMappingURL=error-boundary.js.map

package/dist/components/error-boundary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/error-boundary.tsx"],"sourcesContent":["import { Component } from \"react\";\nimport type { ErrorInfo, ReactNode } from \"react\";\nimport { AlertTriangle } from \"lucide-react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, EmptyState } from \"./ui\";\nimport { Disclosure } from \"./disclosure\";\n\n/** The words of the default fallback. */\nexport interface ErrorBoundaryLabels {\n  /** The fallback's heading. */\n  title: string;\n  /** The line under it. */\n  message: string;\n  /** The button that clears the error and renders the children again. */\n  retry: string;\n  /** The disclosure that opens the error's own text (`showDetails`). */\n  details: string;\n}\n\nexport const DEFAULT_ERROR_BOUNDARY_LABELS: ErrorBoundaryLabels = {\n  title: \"Something went wrong\",\n  message: \"This part of the page could not be shown. Try again, or reload the page.\",\n  retry: \"Try again\",\n  details: \"Error details\",\n};\n\n/**\n * What was thrown, as flat strings, read ONCE when it arrives.\n *\n * React stores whatever was thrown, hostile or not — `throw { get message() { throw … } }`,\n * `throw { name: Symbol() }`, `throw undefined` — and reading one of those during the\n * fallback's own render would throw INSIDE the boundary, escalating to the next one up\n * (keksdose's error-boundary.tsx learned this as feedback #160: at the app level there is\n * none, and the result is the white screen the boundary exists to prevent).\n */\nexport interface ErrorBoundaryDetails {\n  name: string;\n  message: string;\n  stack?: string;\n}\n\nfunction read(get: () => unknown): string | undefined {\n  try {\n    const v = get();\n    return typeof v === \"string\" ? v : v === undefined || v === null ? undefined : String(v);\n  } catch {\n    return undefined;\n  }\n}\n\n/** {@link ErrorBoundaryDetails} of any thrown value, without ever throwing. */\nexport function describeThrown(error: unknown): ErrorBoundaryDetails {\n  if (typeof error === \"object\" && error !== null) {\n    const e = error as { name?: unknown; message?: unknown; stack?: unknown };\n    return {\n      name: read(() => e.name) ?? \"Error\",\n      message: read(() => e.message) ?? \"\",\n      stack: read(() => e.stack),\n    };\n  }\n  return { name: \"Error\", message: read(() => error) ?? \"\" };\n}\n\n/** What a render-prop `fallback` is handed. */\nexport interface ErrorBoundaryFallbackProps {\n  /** The thrown value, as it was thrown. Read it with care — see {@link describeThrown}. */\n  error: unknown;\n  details: ErrorBoundaryDetails;\n  /** Clear the error and render the children again. */\n  reset: () => void;\n}\n\nexport interface ErrorBoundaryProps {\n  children?: ReactNode;\n  /** Replaces the default fallback: a node, or a render function handed the error and\n   *  a `reset`. */\n  fallback?: ReactNode | ((props: ErrorBoundaryFallbackProps) => ReactNode);\n  /** Called once per caught error — log it, file a crash report. */\n  onError?: (error: unknown, info: ErrorInfo) => void;\n  /** Called when the error is cleared, by Retry, `reset` or a `resetKeys` change —\n   *  drop a cache, refetch. */\n  onReset?: () => void;\n  /**\n   * When any of these changes (compared with `Object.is`) AFTER an error was caught, the\n   * error is cleared and the children render again — a change in the same update that\n   * threw does not count (it is what the error was shown under) — pass the route path so leaving a broken page does not\n   * carry its fallback to the next one (keksdose's `resetKey`).\n   */\n  resetKeys?: ReadonlyArray<unknown>;\n  /** A disclosure under the message with the error's name, message and stack — for an\n   *  internal tool, or while developing. Off by default: a stack means nothing to a user. */\n  showDetails?: boolean;\n  /** The default fallback's heading level. Default `h2`: the fallback often IS the page. */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** Classes for the default fallback's box (`m-8 min-h-[400px]`, kastlan). */\n  className?: string;\n  labels?: Partial<ErrorBoundaryLabels>;\n}\n\ninterface ErrorBoundaryState {\n  /** A flag of its own, so `throw undefined` is still an error shown. */\n  failed: boolean;\n  error: unknown;\n  details: ErrorBoundaryDetails | null;\n}\n\nconst CLEAR: ErrorBoundaryState = { failed: false, error: null, details: null };\n\nfunction keysChanged(a: ReadonlyArray<unknown> | undefined, b: ReadonlyArray<unknown> | undefined): boolean {\n  if (a === b) return false;\n  if (!a || !b || a.length !== b.length) return true;\n  return a.some((v, i) => !Object.is(v, b[i]));\n}\n\n/**\n * Catch a render error below it and show a fallback instead of an empty page.\n *\n * kastlan (shared/components/error-boundary.tsx) and keksdose (app/error-boundary.tsx)\n * each built one on `EmptyState tone=\"danger\"`: a warning glyph, a title, a line of\n * explanation and a Retry. This is that fallback, translated through the provider\n * (`errorBoundary.*`), with the hooks an app hangs its own behaviour on — `onError`\n * for the crash report, `resetKeys` for the route change, `fallback` for anything else.\n *\n * The fallback is `role=\"alert\"`: a page replaced by an error is news, and a reader\n * that was on it is told.\n */\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state: ErrorBoundaryState = CLEAR;\n\n  static getDerivedStateFromError(error: unknown): Partial<ErrorBoundaryState> {\n    return { failed: true, error, details: describeThrown(error) };\n  }\n\n  componentDidCatch(error: unknown, info: ErrorInfo): void {\n    this.props.onError?.(error, info);\n  }\n\n  componentDidUpdate(prev: ErrorBoundaryProps, prevState: ErrorBoundaryState): void {\n    // Only a change AFTER the error was caught clears it (react-error-boundary's rule).\n    // `prevState.failed` is false in the update that caught it: that update may well be\n    // the one that changed the keys too — a navigation to a page that throws, with\n    // `resetKeys={[pathname]}` — and resetting then would fire `onReset` for nothing and\n    // render the failing child a second time. From then on `prev.resetKeys` are the\n    // keys the error was shown under, so any change clears it.\n    if (this.state.failed && prevState.failed && keysChanged(prev.resetKeys, this.props.resetKeys)) {\n      this.reset();\n    }\n  }\n\n  reset = (): void => {\n    this.props.onReset?.();\n    this.setState(CLEAR);\n  };\n\n  render(): ReactNode {\n    const { failed, error, details } = this.state;\n    if (!failed || !details) return this.props.children;\n    const { fallback } = this.props;\n    if (typeof fallback === \"function\") return fallback({ error, details, reset: this.reset });\n    if (fallback !== undefined) return fallback;\n    return (\n      <ErrorFallback\n        details={details}\n        reset={this.reset}\n        showDetails={this.props.showDetails ?? false}\n        headingAs={this.props.headingAs ?? \"h2\"}\n        className={this.props.className}\n        labels={this.props.labels}\n      />\n    );\n  }\n}\n\nfunction ErrorFallback({\n  details,\n  reset,\n  showDetails,\n  headingAs,\n  className,\n  labels,\n}: {\n  details: ErrorBoundaryDetails;\n  reset: () => void;\n  showDetails: boolean;\n  headingAs: NonNullable<ErrorBoundaryProps[\"headingAs\"]>;\n  className?: string;\n  labels?: Partial<ErrorBoundaryLabels>;\n}) {\n  const text = useKitLabels(\"errorBoundary\", DEFAULT_ERROR_BOUNDARY_LABELS, labels);\n  return (\n    <EmptyState\n      role=\"alert\"\n      tone=\"danger\"\n      headingAs={headingAs}\n      className={className}\n      icon={<AlertTriangle />}\n      title={text.title}\n      hint={text.message}\n      action={\n        <>\n          <Button variant=\"secondary\" onClick={reset}>\n            {text.retry}\n          </Button>\n          {showDetails && (\n            <Disclosure variant=\"bare\" title={text.details} className=\"basis-full text-start\">\n              <pre className=\"max-h-60 overflow-auto whitespace-pre-wrap break-words text-xs text-[var(--text-secondary)]\">\n                {details.message ? `${details.name}: ${details.message}` : details.name}\n                {details.stack ? `\\n\\n${details.stack}` : null}\n              </pre>\n            </Disclosure>\n          )}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":";AAiKM,SAsCE,UAtCF,KA4CQ,YA5CR;AAjKN,SAAS,iBAAiB;AAE1B,SAAS,qBAAqB;AAC9B,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,kBAAkB;AACnC,SAAS,kBAAkB;AAcpB,MAAM,gCAAqD;AAAA,EAChE,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX;AAiBA,SAAS,KAAK,KAAwC;AACpD,MAAI;AACF,UAAM,IAAI,IAAI;AACd,WAAO,OAAO,MAAM,WAAW,IAAI,MAAM,UAAa,MAAM,OAAO,SAAY,OAAO,CAAC;AAAA,EACzF,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAGO,SAAS,eAAe,OAAsC;AACnE,MAAI,OAAO,UAAU,YAAY,UAAU,MAAM;AAC/C,UAAM,IAAI;AACV,WAAO;AAAA,MACL,MAAM,KAAK,MAAM,EAAE,IAAI,KAAK;AAAA,MAC5B,SAAS,KAAK,MAAM,EAAE,OAAO,KAAK;AAAA,MAClC,OAAO,KAAK,MAAM,EAAE,KAAK;AAAA,IAC3B;AAAA,EACF;AACA,SAAO,EAAE,MAAM,SAAS,SAAS,KAAK,MAAM,KAAK,KAAK,GAAG;AAC3D;AA6CA,MAAM,QAA4B,EAAE,QAAQ,OAAO,OAAO,MAAM,SAAS,KAAK;AAE9E,SAAS,YAAY,GAAuC,GAAgD;AAC1G,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,CAAC,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,OAAQ,QAAO;AAC9C,SAAO,EAAE,KAAK,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;AAC7C;AAcO,MAAM,sBAAsB,UAAkD;AAAA,EACnF,QAA4B;AAAA,EAE5B,OAAO,yBAAyB,OAA6C;AAC3E,WAAO,EAAE,QAAQ,MAAM,OAAO,SAAS,eAAe,KAAK,EAAE;AAAA,EAC/D;AAAA,EAEA,kBAAkB,OAAgB,MAAuB;AACvD,SAAK,MAAM,UAAU,OAAO,IAAI;AAAA,EAClC;AAAA,EAEA,mBAAmB,MAA0B,WAAqC;AAOhF,QAAI,KAAK,MAAM,UAAU,UAAU,UAAU,YAAY,KAAK,WAAW,KAAK,MAAM,SAAS,GAAG;AAC9F,WAAK,MAAM;AAAA,IACb;AAAA,EACF;AAAA,EAEA,QAAQ,MAAY;AAClB,SAAK,MAAM,UAAU;AACrB,SAAK,SAAS,KAAK;AAAA,EACrB;AAAA,EAEA,SAAoB;AAClB,UAAM,EAAE,QAAQ,OAAO,QAAQ,IAAI,KAAK;AACxC,QAAI,CAAC,UAAU,CAAC,QAAS,QAAO,KAAK,MAAM;AAC3C,UAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,QAAI,OAAO,aAAa,WAAY,QAAO,SAAS,EAAE,OAAO,SAAS,OAAO,KAAK,MAAM,CAAC;AACzF,QAAI,aAAa,OAAW,QAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,KAAK;AAAA,QACZ,aAAa,KAAK,MAAM,eAAe;AAAA,QACvC,WAAW,KAAK,MAAM,aAAa;AAAA,QACnC,WAAW,KAAK,MAAM;AAAA,QACtB,QAAQ,KAAK,MAAM;AAAA;AAAA,IACrB;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,OAAO,aAAa,iBAAiB,+BAA+B,MAAM;AAChF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAM,oBAAC,iBAAc;AAAA,MACrB,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,QACE,iCACE;AAAA,4BAAC,UAAO,SAAQ,aAAY,SAAS,OAClC,eAAK,OACR;AAAA,QACC,eACC,oBAAC,cAAW,SAAQ,QAAO,OAAO,KAAK,SAAS,WAAU,yBACxD,+BAAC,SAAI,WAAU,+FACZ;AAAA,kBAAQ,UAAU,GAAG,QAAQ,IAAI,KAAK,QAAQ,OAAO,KAAK,QAAQ;AAAA,UAClE,QAAQ,QAAQ;AAAA;AAAA,EAAO,QAAQ,KAAK,KAAK;AAAA,WAC5C,GACF;AAAA,SAEJ;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/error-boundary.tsx"],"sourcesContent":["import { Component } from \"react\";\nimport type { ErrorInfo, ReactNode } from \"react\";\nimport { AlertTriangle, RefreshCw, WifiOff } from \"lucide-react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, EmptyState } from \"./ui\";\nimport { CopyButton } from \"./copy-button\";\nimport { Disclosure } from \"./disclosure\";\n\n/** The words of the default fallback. */\nexport interface ErrorBoundaryLabels {\n  /** The fallback's heading. */\n  title: string;\n  /** The line under it. */\n  message: string;\n  /** The button that clears the error and renders the children again. */\n  retry: string;\n  /** The disclosure that opens the full error report (`showDetails`). */\n  details: string;\n  /** The button that reloads the whole page (0.13). */\n  reload: string;\n  /** Heading when a lazy chunk failed to load while online — a deploy replaced the\n   *  files this page was built from (0.13). */\n  updateTitle: string;\n  updateMessage: string;\n  /** Heading when the browser says it is offline (0.13). */\n  offlineTitle: string;\n  offlineMessage: string;\n  /** The copy button's words: what it copies is the plain-text report (0.13). */\n  copyReport: string;\n  /** Shown once `onReport` has filed the crash and returned no reference (0.13). */\n  reported: string;\n  /** Shown once `onReport` has filed the crash under a reference — rendered as the\n   *  app returned it, so return `\"#123\"` if the hash belongs to it (0.13). */\n  reportedAs: (reference: string) => string;\n}\n\nexport const DEFAULT_ERROR_BOUNDARY_LABELS: ErrorBoundaryLabels = {\n  title: \"Something went wrong\",\n  message: \"This part of the page could not be shown. Try again, or reload the page.\",\n  retry: \"Try again\",\n  details: \"Error details\",\n  reload: \"Reload\",\n  updateTitle: \"A new version is available\",\n  updateMessage: \"Part of the app has changed since this page was loaded. Reload to get the new version.\",\n  offlineTitle: \"You’re offline\",\n  offlineMessage: \"This page could not be loaded without a connection. Reconnect, then reload the page.\",\n  copyReport: \"Copy error report\",\n  reported: \"This error has been reported automatically.\",\n  reportedAs: (reference) => `Reported as ${reference}`,\n};\n\n/**\n * What was thrown, as flat strings, read ONCE when it arrives.\n *\n * React stores whatever was thrown, hostile or not — `throw { get message() { throw … } }`,\n * `throw { name: Symbol() }`, `throw undefined` — and reading one of those during the\n * fallback's own render would throw INSIDE the boundary, escalating to the next one up\n * (keksdose's error-boundary.tsx learned this as feedback #160: at the app level there is\n * none, and the result is the white screen the boundary exists to prevent).\n */\nexport interface ErrorBoundaryDetails {\n  name: string;\n  message: string;\n  stack?: string;\n}\n\nfunction read(get: () => unknown): string | undefined {\n  try {\n    const v = get();\n    return typeof v === \"string\" ? v : v === undefined || v === null ? undefined : String(v);\n  } catch {\n    return undefined;\n  }\n}\n\n/** `JSON.stringify` that never throws (a cycle, a BigInt, a hostile getter) and never\n *  returns more than 500 characters. \"\" when there is nothing to say. */\nfunction safeJson(value: unknown): string {\n  try {\n    const json = JSON.stringify(value);\n    if (!json || json === \"{}\") return \"\";\n    return json.length > 500 ? `${json.slice(0, 499)}…` : json;\n  } catch {\n    return \"\";\n  }\n}\n\n/** {@link ErrorBoundaryDetails} of any thrown value, without ever throwing. */\nexport function describeThrown(error: unknown): ErrorBoundaryDetails {\n  if (typeof error === \"object\" && error !== null) {\n    const e = error as { name?: unknown; message?: unknown; stack?: unknown };\n    const message = read(() => e.message) ?? \"\";\n    return {\n      name: read(() => e.name) ?? \"Error\",\n      // `throw { code: 500 }` has no message, and an empty line leaves crash triage with\n      // nothing (keksdose G3a; its old reporter filed `{\"code\":500}`). Such a value is\n      // quoted as JSON instead, capped, and never at the cost of a throw.\n      message: message || (error instanceof Error ? \"\" : safeJson(error)),\n      stack: read(() => e.stack),\n    };\n  }\n  return { name: \"Error\", message: read(() => error) ?? \"\" };\n}\n\n/**\n * Is this a failed lazy import — a route chunk that did not arrive?\n *\n * Two causes, and neither is a bug in the page: the device is offline and the chunk was\n * never cached, or a deploy replaced the hashed files the running page still points at.\n * Both are cured by a reload and by nothing else — `React.lazy` caches the rejected\n * import, so Try again re-throws the same error without fetching. The patterns are\n * keksdose's (crash-report.ts), which covers Vite (\"dynamically imported module\",\n * \"module script failed\"), webpack (\"ChunkLoadError\", \"Loading chunk\") and the bare\n * `fetch` failure a service worker hands back.\n *\n * Never throws: it runs inside the fallback's own render, where a throw is a white\n * screen. An error it cannot read is not a chunk failure.\n */\nexport function isChunkLoadError(\n  error: { name?: string | null; message?: string | null } | null | undefined,\n): boolean {\n  try {\n    const s = `${error?.name ?? \"\"} ${error?.message ?? \"\"}`;\n    return /ChunkLoadError|dynamically imported module|module script failed|Loading chunk|Failed to fetch/i.test(s);\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Everything a crash report carries, read once when the boundary catches.\n *\n * Plain strings only, so it survives `JSON.stringify` into an app's crash endpoint as is\n * and {@link formatCrashReport} can print it without a single guard. The wording of the\n * printed report is English on purpose: it is read by whoever fixes the bug, not by the\n * user who copies it, and a report in nine languages cannot be searched.\n */\nexport interface CrashReport {\n  /** The thrown value's `name` (\"TypeError\"), \"Error\" for a non-object. */\n  name: string;\n  message: string;\n  stack?: string;\n  /** React's component stack from `componentDidCatch` — the part that names the\n   *  component, which a minified JS stack no longer does. */\n  componentStack?: string;\n  /** `pathname + search` at the moment of the crash. The search may carry what the\n   *  user typed — see `redact`. */\n  page: string;\n  /** ISO 8601, UTC. */\n  time: string;\n  userAgent: string;\n  /** The boundary's `appVersion` prop. */\n  appVersion?: string;\n  /** `navigator.onLine` at the moment of the crash; left out where there is none. */\n  online?: boolean;\n  /** {@link isChunkLoadError} of the thrown value. Such a crash is never handed to\n   *  `onReport` — it is a deploy or a dropped connection, not a defect — but it is\n   *  still in the copied report. */\n  chunkLoad: boolean;\n  /** The boundary's `reportExtras()`, stringified. */\n  extras: Record<string, string>;\n}\n\n/**\n * The report as one plain-text block — what the copy button puts on the clipboard and\n * the details disclosure shows.\n *\n * lenkbank's layout, because that is the one that was already being pasted into\n * feedback messages: the error line first (it is what a search for the bug matches),\n * then where / when / what, then the two stacks.\n */\nexport function formatCrashReport(report: CrashReport): string {\n  const lines = [\n    report.message ? `${report.name}: ${report.message}` : report.name,\n    `Page: ${report.page}`,\n    `Time: ${report.time}`,\n    `User agent: ${report.userAgent}`,\n  ];\n  if (report.appVersion) lines.push(`App version: ${report.appVersion}`);\n  if (report.online === false) lines.push(\"Online: no\");\n  for (const [key, value] of Object.entries(report.extras)) lines.push(`${key}: ${value}`);\n  if (report.stack) lines.push(\"\", \"Stack:\", report.stack.trim());\n  if (report.componentStack) lines.push(\"\", \"Component stack:\", report.componentStack.trim());\n  return lines.join(\"\\n\");\n}\n\n/**\n * A key for \"the same crash again\": the error's name and message and the first frames\n * of its stack.\n *\n * Page-load local, not a server-side grouping key (keksdose's crash-report.ts draws the\n * same line): its only job is to stop one page load filing one bug twice — React's dev\n * StrictMode, a Try again that crashes again, a render loop that trips the boundary many\n * times a second. The page and the time are left out on purpose: the same bug on two\n * routes is still one bug.\n */\nexport function crashFingerprint(report: Pick<CrashReport, \"name\" | \"message\" | \"stack\">): string {\n  const frames = (report.stack ?? \"\").split(\"\\n\").slice(0, 4).join(\"|\");\n  return `${report.name}::${report.message}::${frames}`;\n}\n\n/**\n * What `onReport` may resolve with. `{ reference }` is shown (\"Reported as …\");\n * nothing (or `{}`) means filed without one. `{ filed: false }` says the app decided NOT\n * to file (a demo session, a hot-reload artefact, a report buffered for later): the\n * screen then claims nothing and keeps the copy button — claiming a report that was\n * never sent is the same false statement as hiding one that was.\n */\nexport type CrashReportResult = { reference?: string; filed?: boolean } | void;\n\ninterface Filing {\n  filed: boolean;\n  reference?: string;\n}\n\nconst NOT_FILED: Filing = { filed: false };\n\n/** A render loop can trip a boundary dozens of times a second with a different message\n *  each time (a counter in it); without a ceiling the first bad deploy files hundreds of\n *  rows. keksdose's number. */\nconst MAX_REPORTS_PER_PAGE_LOAD = 5;\n\n/** Fingerprint → the one filing for it in this page load. Module scope IS the page\n *  load: a reload starts it empty. A duplicate gets the first filing's promise, so the\n *  second screen shows the same reference instead of claiming nothing. */\nconst filings = new Map<string, Promise<Filing>>();\n\nfunction settle(out: unknown): Filing {\n  try {\n    if (out && typeof out === \"object\") {\n      const o = out as { filed?: unknown; reference?: unknown };\n      if (o.filed === false) return NOT_FILED;\n      const reference = typeof o.reference === \"string\" && o.reference ? o.reference : undefined;\n      return { filed: true, reference };\n    }\n    return { filed: true };\n  } catch {\n    return NOT_FILED;\n  }\n}\n\n/** Hand the report to the app, once per fingerprint per page load, and never throw —\n *  not for a synchronous throw, a rejection, or a hostile thenable. */\nfunction fileOnce(report: CrashReport, onReport: (report: CrashReport) => unknown): Promise<Filing> {\n  const key = crashFingerprint(report);\n  const known = filings.get(key);\n  if (known) return known;\n  if (filings.size >= MAX_REPORTS_PER_PAGE_LOAD) return Promise.resolve(NOT_FILED);\n  let filing: Promise<Filing>;\n  try {\n    filing = Promise.resolve(onReport(report)).then(settle, () => NOT_FILED);\n  } catch {\n    filing = Promise.resolve(NOT_FILED);\n  }\n  // Claimed before the first await: two catches in the same tick (StrictMode) must not\n  // both get past the lookup above.\n  filings.set(key, filing);\n  return filing;\n}\n\nfunction isOffline(): boolean {\n  try {\n    return typeof navigator !== \"undefined\" && navigator.onLine === false;\n  } catch {\n    return false;\n  }\n}\n\nfunction reloadPage(): void {\n  try {\n    window.location.reload();\n  } catch {\n    /* nothing left to do from here */\n  }\n}\n\n/** What a render-prop `fallback` is handed. */\nexport interface ErrorBoundaryFallbackProps {\n  /** The thrown value, as it was thrown. Read it with care — see {@link describeThrown}. */\n  error: unknown;\n  details: ErrorBoundaryDetails;\n  /** Clear the error and render the children again. */\n  reset: () => void;\n  /** The crash report, once `componentDidCatch` has built it (null on the very first\n   *  render of the fallback, which happens before it). Already `redact`ed. */\n  report: CrashReport | null;\n}\n\nexport interface ErrorBoundaryProps {\n  children?: ReactNode;\n  /** Replaces the default fallback: a node, or a render function handed the error and\n   *  a `reset`. The same rule applies to it as to the default: see the component docs. */\n  fallback?: ReactNode | ((props: ErrorBoundaryFallbackProps) => ReactNode);\n  /** Called once per caught error with the raw value — log it. A throw from it is\n   *  swallowed: the boundary is the last thing standing. For filing a report, prefer\n   *  `onReport`, which gets the finished report, dedupe and the reference on screen. */\n  onError?: (error: unknown, info: ErrorInfo) => void;\n  /** Called when the error is cleared, by Try again, `reset` or a `resetKeys` change —\n   *  drop a cache, refetch. */\n  onReset?: () => void;\n  /**\n   * When any of these changes (compared with `Object.is`) AFTER an error was caught, the\n   * error is cleared and the children render again — a change in the same update that\n   * threw does not count (it is what the error was shown under) — pass the route path so leaving a broken page does not\n   * carry its fallback to the next one (keksdose's `resetKey`).\n   */\n  resetKeys?: ReadonlyArray<unknown>;\n  /** Quote the error's `name: message` in a monospace box under the hint. Default on\n   *  (0.13): three sentences true of every crash identify none of them, and the one\n   *  line that does is what a user can read out or screenshot (lenkbank P7). Not shown\n   *  for a chunk-load / offline screen, where the message is a URL that explains\n   *  nothing the title does not. */\n  showMessage?: boolean;\n  /** A collapsed disclosure holding the full plain-text report. Default on since 0.13\n   *  (it was an opt-in showing name, message and stack): closed, it costs one line, and\n   *  it is where a support conversation asks the user to look. */\n  showDetails?: boolean;\n  /** The copy button for the plain-text report (the kit's CopyButton, which says when\n   *  the clipboard refused). Default on. Hidden once `onReport` has filed the crash —\n   *  there is nothing left to paste anywhere — and shown again whenever it did not. */\n  copyReport?: boolean;\n  /** The app's version, printed in the report — the first question on every crash. */\n  appVersion?: string;\n  /** More `key: value` lines for the report, read when the boundary catches (a tenant\n   *  id, the feature flags). A throw from it is swallowed and the lines are left out. */\n  reportExtras?: () => Record<string, string>;\n  /**\n   * Rewrite the report before anything sees it: the screen, the clipboard and\n   * `onReport` all get the returned one.\n   *\n   * THE REPORT IS STRUCTURE, NEVER CONTENT — and only the app knows which of its query\n   * params hold content. keksdose's register put the free-text search in `?q=` and payee\n   * names in the `f.*` filters, and its crash channel sent them in the clear to a column\n   * every admin reads (crash-report.ts `safeUrl`). The cure there is an ALLOW-list, so a\n   * param added later is dropped until somebody decides otherwise — rebuild `page`\n   * from `new URL(r.page, location.origin)`, keeping only the listed `searchParams`.\n   * `extras` are the app's own and need no second pass. A throw from `redact` falls\n   * back to the pathname alone and no extras — failing closed.\n   *\n   * The same holds inside `onReport`, which is the other place to do it: clamp fields\n   * to what the endpoint accepts, drop what it must not store. The kit cannot know.\n   */\n  redact?: (report: CrashReport) => CrashReport;\n  /**\n   * File the report automatically. Called from `componentDidCatch`, at most once per\n   * {@link crashFingerprint} per page load (and at most five times in all), never for a\n   * chunk-load error. It can NOT throw into the boundary: a synchronous throw and a\n   * rejection both read as \"not filed\", and the copy button stays.\n   *\n   * Resolve with `{ reference }` and the screen says \"Reported as …\" instead of the copy\n   * button; see {@link CrashReportResult} for \"filed without a reference\" and \"decided not\n   * to file\". Whatever the app's reporter does, it must do without the router, the query\n   * client or the auth store's hooks — a bare `fetch` with `keepalive`, so it survives\n   * the reload the user is about to press (keksdose crash-report.ts `post`).\n   */\n  onReport?: (report: CrashReport) => Promise<CrashReportResult> | CrashReportResult;\n  /** The app's own escape hatches, beside Reload / Try again — keksdose's \"Clear local\n   *  data\" for a poisoned persisted cache that no in-app action could otherwise break.\n   *  A full-width hint under it: wrap it in `<div className=\"basis-full\">`. */\n  actions?: ReactNode;\n  /** The default fallback's heading level. Default `h2`: the fallback often IS the page. */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** Classes for the default fallback's box (`m-8 min-h-[400px]`, kastlan). */\n  className?: string;\n  labels?: Partial<ErrorBoundaryLabels>;\n}\n\ntype FilingState = \"none\" | \"pending\" | \"filed\" | \"failed\";\n\ninterface ErrorBoundaryState {\n  /** A flag of its own, so `throw undefined` is still an error shown. */\n  failed: boolean;\n  error: unknown;\n  details: ErrorBoundaryDetails | null;\n  report: CrashReport | null;\n  filing: FilingState;\n  reference: string | undefined;\n}\n\nconst CLEAR: ErrorBoundaryState = {\n  failed: false,\n  error: null,\n  details: null,\n  report: null,\n  filing: \"none\",\n  reference: undefined,\n};\n\nfunction keysChanged(a: ReadonlyArray<unknown> | undefined, b: ReadonlyArray<unknown> | undefined): boolean {\n  if (a === b) return false;\n  if (!a || !b || a.length !== b.length) return true;\n  return a.some((v, i) => !Object.is(v, b[i]));\n}\n\nfunction currentPage(): { page: string; path: string } {\n  try {\n    const { pathname, search } = window.location;\n    return { page: `${pathname}${search}`, path: pathname };\n  } catch {\n    return { page: \"\", path: \"\" };\n  }\n}\n\nfunction buildReport(details: ErrorBoundaryDetails, componentStack: string | undefined, props: ErrorBoundaryProps): CrashReport {\n  const { page, path } = currentPage();\n  const extras: Record<string, string> = {};\n  try {\n    const more = props.reportExtras?.();\n    if (more) for (const [k, v] of Object.entries(more)) extras[k] = String(v);\n  } catch {\n    /* documented: the lines are left out */\n  }\n  let userAgent = \"\";\n  let online: boolean | undefined;\n  try {\n    userAgent = navigator.userAgent;\n    online = typeof navigator.onLine === \"boolean\" ? navigator.onLine : undefined;\n  } catch {\n    /* no navigator (SSR, a worker test) */\n  }\n  const report: CrashReport = {\n    name: details.name,\n    message: details.message,\n    stack: details.stack,\n    componentStack: componentStack ?? undefined,\n    page,\n    time: new Date().toISOString(),\n    userAgent,\n    appVersion: props.appVersion,\n    online,\n    chunkLoad: isChunkLoadError(details),\n    extras,\n  };\n  if (!props.redact) return report;\n  try {\n    return props.redact(report);\n  } catch {\n    // Fail closed: an app that asked for redaction must not get the unredacted page.\n    return { ...report, page: path, extras: {} };\n  }\n}\n\n/**\n * Catch a render error below it and show ONE crash screen instead of an empty page.\n *\n * The three apps each built one. kastlan's and keksdose's sat on `EmptyState\n * tone=\"danger\"`; lenkbank's quoted the error and offered a plain-text report to copy;\n * keksdose's filed the crash itself, told a lazy-chunk failure apart as \"offline\", and\n * offered \"clear local data\" when a poisoned cache made Retry useless (feedback #160).\n * This is all of that, so the apps reduce to\n * `<ErrorBoundary resetKeys={[pathname]} appVersion={__VERSION__} />` plus, for an app\n * with a crash endpoint, `onReport` and `actions`:\n *\n * - the error's `name: message`, quoted (`showMessage`);\n * - Try again (reset the boundary) AND Reload (the page) — Try again alone re-renders\n *   the same subtree from the same state, which a deterministic crash survives;\n * - a chunk-load error or an offline browser gets its own title and Reload first\n *   (\"A new version is available\" / \"You're offline\");\n * - the copy button and the report in a disclosure; `onReport` for filing it, deduped\n *   per page load, with its reference on screen.\n *\n * THE RULE for this fallback — and for a `fallback` or `actions` an app passes in: it\n * must not depend on the router, the query client or the auth store. A crash is exactly\n * when those may be what broke, and a fallback that throws escalates to the next\n * boundary up — at the app level there is none, and the user gets the white screen this\n * exists to prevent. So no `useNavigate`, no `useQuery`, no `useAuth()` in it; reload\n * with `window.location`, not the router. The kit's own label hooks are the one context\n * it does read (`errorBoundary.*` from `UiKitProvider`), and they degrade to the English\n * defaults when there is no provider above — which is why the app-level boundary may\n * sit OUTSIDE the provider and still render.\n *\n * The fallback is `role=\"alert\"`: a page replaced by an error is news, and a reader\n * that was on it is told.\n */\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {\n  state: ErrorBoundaryState = CLEAR;\n\n  /** Bumped by every catch and reset, so a filing that settles after the screen moved\n   *  on (Try again, a route change, a second crash) does not write into it. */\n  private generation = 0;\n\n  /**\n   * Forget which crashes this page load has filed, and the count towards the cap.\n   *\n   * For tests: the dedupe lives in module scope because a page load is what it spans,\n   * and a test file is one page load — so without this, the sixth test that files a\n   * report finds the cap reached and `onReport` never called. Call it in `beforeEach`.\n   * Never needed in an app: a reload is the reset.\n   */\n  static forgetReports(): void {\n    filings.clear();\n  }\n\n  static getDerivedStateFromError(error: unknown): Partial<ErrorBoundaryState> {\n    return { failed: true, error, details: describeThrown(error), report: null, filing: \"none\", reference: undefined };\n  }\n\n  componentDidCatch(error: unknown, info: ErrorInfo): void {\n    try {\n      this.props.onError?.(error, info);\n    } catch {\n      /* documented: a logger must not take the fallback down */\n    }\n    const details = this.state.details ?? describeThrown(error);\n    const report = buildReport(details, info.componentStack ?? undefined, this.props);\n    const { onReport } = this.props;\n    const willFile = onReport !== undefined && !report.chunkLoad;\n    const generation = ++this.generation;\n    this.setState({ report, filing: willFile ? \"pending\" : \"none\", reference: undefined });\n    if (!willFile) return;\n    void fileOnce(report, onReport).then((filing) => {\n      if (generation !== this.generation) return;\n      this.setState(\n        filing.filed ? { filing: \"filed\", reference: filing.reference } : { filing: \"failed\", reference: undefined },\n      );\n    });\n  }\n\n  componentDidUpdate(prev: ErrorBoundaryProps, prevState: ErrorBoundaryState): void {\n    // Only a change AFTER the error was caught clears it (react-error-boundary's rule).\n    // `prevState.failed` is false in the update that caught it: that update may well be\n    // the one that changed the keys too — a navigation to a page that throws, with\n    // `resetKeys={[pathname]}` — and resetting then would fire `onReset` for nothing and\n    // render the failing child a second time. From then on `prev.resetKeys` are the\n    // keys the error was shown under, so any change clears it.\n    if (this.state.failed && prevState.failed && keysChanged(prev.resetKeys, this.props.resetKeys)) {\n      this.reset();\n    }\n  }\n\n  reset = (): void => {\n    this.generation++;\n    this.props.onReset?.();\n    this.setState(CLEAR);\n  };\n\n  render(): ReactNode {\n    const { failed, error, details, report, filing, reference } = this.state;\n    if (!failed || !details) return this.props.children;\n    const { fallback } = this.props;\n    if (typeof fallback === \"function\") return fallback({ error, details, reset: this.reset, report });\n    if (fallback !== undefined) return fallback;\n    return (\n      <ErrorFallback\n        details={details}\n        report={report}\n        filing={filing}\n        reference={reference}\n        reset={this.reset}\n        showMessage={this.props.showMessage ?? true}\n        showDetails={this.props.showDetails ?? true}\n        copyReport={this.props.copyReport ?? true}\n        actions={this.props.actions}\n        headingAs={this.props.headingAs ?? \"h2\"}\n        className={this.props.className}\n        labels={this.props.labels}\n      />\n    );\n  }\n}\n\nfunction ErrorFallback({\n  details,\n  report,\n  filing,\n  reference,\n  reset,\n  showMessage,\n  showDetails,\n  copyReport,\n  actions,\n  headingAs,\n  className,\n  labels,\n}: {\n  details: ErrorBoundaryDetails;\n  report: CrashReport | null;\n  filing: FilingState;\n  reference: string | undefined;\n  reset: () => void;\n  showMessage: boolean;\n  showDetails: boolean;\n  copyReport: boolean;\n  actions?: ReactNode;\n  headingAs: NonNullable<ErrorBoundaryProps[\"headingAs\"]>;\n  className?: string;\n  labels?: Partial<ErrorBoundaryLabels>;\n}) {\n  const text = useKitLabels(\"errorBoundary\", DEFAULT_ERROR_BOUNDARY_LABELS, labels);\n  const chunk = isChunkLoadError(details);\n  // Offline first, as keksdose has it: offline, a chunk failure is the connection, and\n  // any other crash most likely a request that could not be made — either way \"reload\n  // once you are back\" is the advice, and \"a new version\" would be a false one.\n  const mode = isOffline() ? \"offline\" : chunk ? \"update\" : \"error\";\n  const title = mode === \"offline\" ? text.offlineTitle : mode === \"update\" ? text.updateTitle : text.title;\n  const hint = mode === \"offline\" ? text.offlineMessage : mode === \"update\" ? text.updateMessage : text.message;\n  const Icon = mode === \"offline\" ? WifiOff : mode === \"update\" ? RefreshCw : AlertTriangle;\n  const reportText = report ? formatCrashReport(report) : null;\n  const errorLine = details.message ? `${details.name}: ${details.message}` : details.name;\n\n  const reloadButton = (\n    <Button key=\"reload\" variant={mode === \"error\" ? \"secondary\" : \"primary\"} onClick={reloadPage}>\n      {text.reload}\n    </Button>\n  );\n  // Not after a chunk failure: `React.lazy` keeps the rejected import, so Try again\n  // could only throw the same error again.\n  const retryButton = chunk ? null : (\n    <Button key=\"retry\" variant={mode === \"error\" ? \"primary\" : \"secondary\"} onClick={reset}>\n      {text.retry}\n    </Button>\n  );\n\n  return (\n    <EmptyState\n      role=\"alert\"\n      tone={mode === \"error\" ? \"danger\" : undefined}\n      headingAs={headingAs}\n      className={className}\n      icon={<Icon />}\n      title={title}\n      hint={hint}\n      action={\n        <>\n          {showMessage && mode === \"error\" && (\n            // A quotation, not prose: left-aligned and monospaced, so it reads as the\n            // program's words and can be read out or screenshotted verbatim.\n            <p\n              data-error-message=\"\"\n              className=\"-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-[var(--danger-border)] bg-[var(--danger-bg)] px-3 py-2 text-start font-mono text-xs text-[var(--text-primary)]\"\n            >\n              {errorLine}\n            </p>\n          )}\n          {filing === \"filed\" && (\n            <p className=\"-mt-1 mb-1 basis-full text-xs\">\n              {reference ? text.reportedAs(reference) : text.reported}\n            </p>\n          )}\n          {mode === \"error\" ? [retryButton, reloadButton] : [reloadButton, retryButton]}\n          {copyReport && reportText !== null && filing !== \"filed\" && (\n            <CopyButton variant=\"label\" buttonVariant=\"ghost\" label={text.copyReport} text={reportText} />\n          )}\n          {actions}\n          {showDetails && reportText !== null && (\n            <Disclosure variant=\"bare\" title={text.details} className=\"basis-full text-start\">\n              <pre className=\"max-h-60 overflow-auto whitespace-pre-wrap break-words text-xs text-[var(--text-secondary)]\">\n                {reportText}\n              </pre>\n            </Disclosure>\n          )}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":";AA+hBM,SAgFE,UAhFF,KAgFE,YAhFF;AA/hBN,SAAS,iBAAiB;AAE1B,SAAS,eAAe,WAAW,eAAe;AAClD,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,kBAAkB;AACnC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AA8BpB,MAAM,gCAAqD;AAAA,EAChE,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY,CAAC,cAAc,eAAe,SAAS;AACrD;AAiBA,SAAS,KAAK,KAAwC;AACpD,MAAI;AACF,UAAM,IAAI,IAAI;AACd,WAAO,OAAO,MAAM,WAAW,IAAI,MAAM,UAAa,MAAM,OAAO,SAAY,OAAO,CAAC;AAAA,EACzF,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAIA,SAAS,SAAS,OAAwB;AACxC,MAAI;AACF,UAAM,OAAO,KAAK,UAAU,KAAK;AACjC,QAAI,CAAC,QAAQ,SAAS,KAAM,QAAO;AACnC,WAAO,KAAK,SAAS,MAAM,GAAG,KAAK,MAAM,GAAG,GAAG,CAAC,WAAM;AAAA,EACxD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAGO,SAAS,eAAe,OAAsC;AACnE,MAAI,OAAO,UAAU,YAAY,UAAU,MAAM;AAC/C,UAAM,IAAI;AACV,UAAM,UAAU,KAAK,MAAM,EAAE,OAAO,KAAK;AACzC,WAAO;AAAA,MACL,MAAM,KAAK,MAAM,EAAE,IAAI,KAAK;AAAA;AAAA;AAAA;AAAA,MAI5B,SAAS,YAAY,iBAAiB,QAAQ,KAAK,SAAS,KAAK;AAAA,MACjE,OAAO,KAAK,MAAM,EAAE,KAAK;AAAA,IAC3B;AAAA,EACF;AACA,SAAO,EAAE,MAAM,SAAS,SAAS,KAAK,MAAM,KAAK,KAAK,GAAG;AAC3D;AAgBO,SAAS,iBACd,OACS;AACT,MAAI;AACF,UAAM,IAAI,GAAG,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,EAAE;AACtD,WAAO,iGAAiG,KAAK,CAAC;AAAA,EAChH,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AA4CO,SAAS,kBAAkB,QAA6B;AAC7D,QAAM,QAAQ;AAAA,IACZ,OAAO,UAAU,GAAG,OAAO,IAAI,KAAK,OAAO,OAAO,KAAK,OAAO;AAAA,IAC9D,SAAS,OAAO,IAAI;AAAA,IACpB,SAAS,OAAO,IAAI;AAAA,IACpB,eAAe,OAAO,SAAS;AAAA,EACjC;AACA,MAAI,OAAO,WAAY,OAAM,KAAK,gBAAgB,OAAO,UAAU,EAAE;AACrE,MAAI,OAAO,WAAW,MAAO,OAAM,KAAK,YAAY;AACpD,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,OAAO,MAAM,EAAG,OAAM,KAAK,GAAG,GAAG,KAAK,KAAK,EAAE;AACvF,MAAI,OAAO,MAAO,OAAM,KAAK,IAAI,UAAU,OAAO,MAAM,KAAK,CAAC;AAC9D,MAAI,OAAO,eAAgB,OAAM,KAAK,IAAI,oBAAoB,OAAO,eAAe,KAAK,CAAC;AAC1F,SAAO,MAAM,KAAK,IAAI;AACxB;AAYO,SAAS,iBAAiB,QAAiE;AAChG,QAAM,UAAU,OAAO,SAAS,IAAI,MAAM,IAAI,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG;AACpE,SAAO,GAAG,OAAO,IAAI,KAAK,OAAO,OAAO,KAAK,MAAM;AACrD;AAgBA,MAAM,YAAoB,EAAE,OAAO,MAAM;AAKzC,MAAM,4BAA4B;AAKlC,MAAM,UAAU,oBAAI,IAA6B;AAEjD,SAAS,OAAO,KAAsB;AACpC,MAAI;AACF,QAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,YAAM,IAAI;AACV,UAAI,EAAE,UAAU,MAAO,QAAO;AAC9B,YAAM,YAAY,OAAO,EAAE,cAAc,YAAY,EAAE,YAAY,EAAE,YAAY;AACjF,aAAO,EAAE,OAAO,MAAM,UAAU;AAAA,IAClC;AACA,WAAO,EAAE,OAAO,KAAK;AAAA,EACvB,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAIA,SAAS,SAAS,QAAqB,UAA6D;AAClG,QAAM,MAAM,iBAAiB,MAAM;AACnC,QAAM,QAAQ,QAAQ,IAAI,GAAG;AAC7B,MAAI,MAAO,QAAO;AAClB,MAAI,QAAQ,QAAQ,0BAA2B,QAAO,QAAQ,QAAQ,SAAS;AAC/E,MAAI;AACJ,MAAI;AACF,aAAS,QAAQ,QAAQ,SAAS,MAAM,CAAC,EAAE,KAAK,QAAQ,MAAM,SAAS;AAAA,EACzE,QAAQ;AACN,aAAS,QAAQ,QAAQ,SAAS;AAAA,EACpC;AAGA,UAAQ,IAAI,KAAK,MAAM;AACvB,SAAO;AACT;AAEA,SAAS,YAAqB;AAC5B,MAAI;AACF,WAAO,OAAO,cAAc,eAAe,UAAU,WAAW;AAAA,EAClE,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,aAAmB;AAC1B,MAAI;AACF,WAAO,SAAS,OAAO;AAAA,EACzB,QAAQ;AAAA,EAER;AACF;AAyGA,MAAM,QAA4B;AAAA,EAChC,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEA,SAAS,YAAY,GAAuC,GAAgD;AAC1G,MAAI,MAAM,EAAG,QAAO;AACpB,MAAI,CAAC,KAAK,CAAC,KAAK,EAAE,WAAW,EAAE,OAAQ,QAAO;AAC9C,SAAO,EAAE,KAAK,CAAC,GAAG,MAAM,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;AAC7C;AAEA,SAAS,cAA8C;AACrD,MAAI;AACF,UAAM,EAAE,UAAU,OAAO,IAAI,OAAO;AACpC,WAAO,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,IAAI,MAAM,SAAS;AAAA,EACxD,QAAQ;AACN,WAAO,EAAE,MAAM,IAAI,MAAM,GAAG;AAAA,EAC9B;AACF;AAEA,SAAS,YAAY,SAA+B,gBAAoC,OAAwC;AAC9H,QAAM,EAAE,MAAM,KAAK,IAAI,YAAY;AACnC,QAAM,SAAiC,CAAC;AACxC,MAAI;AACF,UAAM,OAAO,MAAM,eAAe;AAClC,QAAI,KAAM,YAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,IAAI,EAAG,QAAO,CAAC,IAAI,OAAO,CAAC;AAAA,EAC3E,QAAQ;AAAA,EAER;AACA,MAAI,YAAY;AAChB,MAAI;AACJ,MAAI;AACF,gBAAY,UAAU;AACtB,aAAS,OAAO,UAAU,WAAW,YAAY,UAAU,SAAS;AAAA,EACtE,QAAQ;AAAA,EAER;AACA,QAAM,SAAsB;AAAA,IAC1B,MAAM,QAAQ;AAAA,IACd,SAAS,QAAQ;AAAA,IACjB,OAAO,QAAQ;AAAA,IACf,gBAAgB,kBAAkB;AAAA,IAClC;AAAA,IACA,OAAM,oBAAI,KAAK,GAAE,YAAY;AAAA,IAC7B;AAAA,IACA,YAAY,MAAM;AAAA,IAClB;AAAA,IACA,WAAW,iBAAiB,OAAO;AAAA,IACnC;AAAA,EACF;AACA,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,MAAI;AACF,WAAO,MAAM,OAAO,MAAM;AAAA,EAC5B,QAAQ;AAEN,WAAO,EAAE,GAAG,QAAQ,MAAM,MAAM,QAAQ,CAAC,EAAE;AAAA,EAC7C;AACF;AAkCO,MAAM,sBAAsB,UAAkD;AAAA,EACnF,QAA4B;AAAA;AAAA;AAAA,EAIpB,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUrB,OAAO,gBAAsB;AAC3B,YAAQ,MAAM;AAAA,EAChB;AAAA,EAEA,OAAO,yBAAyB,OAA6C;AAC3E,WAAO,EAAE,QAAQ,MAAM,OAAO,SAAS,eAAe,KAAK,GAAG,QAAQ,MAAM,QAAQ,QAAQ,WAAW,OAAU;AAAA,EACnH;AAAA,EAEA,kBAAkB,OAAgB,MAAuB;AACvD,QAAI;AACF,WAAK,MAAM,UAAU,OAAO,IAAI;AAAA,IAClC,QAAQ;AAAA,IAER;AACA,UAAM,UAAU,KAAK,MAAM,WAAW,eAAe,KAAK;AAC1D,UAAM,SAAS,YAAY,SAAS,KAAK,kBAAkB,QAAW,KAAK,KAAK;AAChF,UAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,UAAM,WAAW,aAAa,UAAa,CAAC,OAAO;AACnD,UAAM,aAAa,EAAE,KAAK;AAC1B,SAAK,SAAS,EAAE,QAAQ,QAAQ,WAAW,YAAY,QAAQ,WAAW,OAAU,CAAC;AACrF,QAAI,CAAC,SAAU;AACf,SAAK,SAAS,QAAQ,QAAQ,EAAE,KAAK,CAAC,WAAW;AAC/C,UAAI,eAAe,KAAK,WAAY;AACpC,WAAK;AAAA,QACH,OAAO,QAAQ,EAAE,QAAQ,SAAS,WAAW,OAAO,UAAU,IAAI,EAAE,QAAQ,UAAU,WAAW,OAAU;AAAA,MAC7G;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,mBAAmB,MAA0B,WAAqC;AAOhF,QAAI,KAAK,MAAM,UAAU,UAAU,UAAU,YAAY,KAAK,WAAW,KAAK,MAAM,SAAS,GAAG;AAC9F,WAAK,MAAM;AAAA,IACb;AAAA,EACF;AAAA,EAEA,QAAQ,MAAY;AAClB,SAAK;AACL,SAAK,MAAM,UAAU;AACrB,SAAK,SAAS,KAAK;AAAA,EACrB;AAAA,EAEA,SAAoB;AAClB,UAAM,EAAE,QAAQ,OAAO,SAAS,QAAQ,QAAQ,UAAU,IAAI,KAAK;AACnE,QAAI,CAAC,UAAU,CAAC,QAAS,QAAO,KAAK,MAAM;AAC3C,UAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,QAAI,OAAO,aAAa,WAAY,QAAO,SAAS,EAAE,OAAO,SAAS,OAAO,KAAK,OAAO,OAAO,CAAC;AACjG,QAAI,aAAa,OAAW,QAAO;AACnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,KAAK;AAAA,QACZ,aAAa,KAAK,MAAM,eAAe;AAAA,QACvC,aAAa,KAAK,MAAM,eAAe;AAAA,QACvC,YAAY,KAAK,MAAM,cAAc;AAAA,QACrC,SAAS,KAAK,MAAM;AAAA,QACpB,WAAW,KAAK,MAAM,aAAa;AAAA,QACnC,WAAW,KAAK,MAAM;AAAA,QACtB,QAAQ,KAAK,MAAM;AAAA;AAAA,IACrB;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAaG;AACD,QAAM,OAAO,aAAa,iBAAiB,+BAA+B,MAAM;AAChF,QAAM,QAAQ,iBAAiB,OAAO;AAItC,QAAM,OAAO,UAAU,IAAI,YAAY,QAAQ,WAAW;AAC1D,QAAM,QAAQ,SAAS,YAAY,KAAK,eAAe,SAAS,WAAW,KAAK,cAAc,KAAK;AACnG,QAAM,OAAO,SAAS,YAAY,KAAK,iBAAiB,SAAS,WAAW,KAAK,gBAAgB,KAAK;AACtG,QAAM,OAAO,SAAS,YAAY,UAAU,SAAS,WAAW,YAAY;AAC5E,QAAM,aAAa,SAAS,kBAAkB,MAAM,IAAI;AACxD,QAAM,YAAY,QAAQ,UAAU,GAAG,QAAQ,IAAI,KAAK,QAAQ,OAAO,KAAK,QAAQ;AAEpF,QAAM,eACJ,oBAAC,UAAoB,SAAS,SAAS,UAAU,cAAc,WAAW,SAAS,YAChF,eAAK,UADI,QAEZ;AAIF,QAAM,cAAc,QAAQ,OAC1B,oBAAC,UAAmB,SAAS,SAAS,UAAU,YAAY,aAAa,SAAS,OAC/E,eAAK,SADI,OAEZ;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAM,SAAS,UAAU,WAAW;AAAA,MACpC;AAAA,MACA;AAAA,MACA,MAAM,oBAAC,QAAK;AAAA,MACZ;AAAA,MACA;AAAA,MACA,QACE,iCACG;AAAA,uBAAe,SAAS;AAAA;AAAA,QAGvB;AAAA,UAAC;AAAA;AAAA,YACC,sBAAmB;AAAA,YACnB,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,QAED,WAAW,WACV,oBAAC,OAAE,WAAU,iCACV,sBAAY,KAAK,WAAW,SAAS,IAAI,KAAK,UACjD;AAAA,QAED,SAAS,UAAU,CAAC,aAAa,YAAY,IAAI,CAAC,cAAc,WAAW;AAAA,QAC3E,cAAc,eAAe,QAAQ,WAAW,WAC/C,oBAAC,cAAW,SAAQ,SAAQ,eAAc,SAAQ,OAAO,KAAK,YAAY,MAAM,YAAY;AAAA,QAE7F;AAAA,QACA,eAAe,eAAe,QAC7B,oBAAC,cAAW,SAAQ,QAAO,OAAO,KAAK,SAAS,WAAU,yBACxD,8BAAC,SAAI,WAAU,+FACZ,sBACH,GACF;AAAA,SAEJ;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/field-sync.js

@@ -49,32 +49,35 @@ function useFieldSync({
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
-  const flush = useCallback(async () => {
-    if (inFlightRef.current) return;
-    const next = draftRef.current;
-    if (equalsRef.current(next, savedRef.current)) return;
-    inFlightRef.current = true;
-    setState("pending");
-    setError(null);
-    try {
-      await onSaveRef.current(next);
-      savedRef.current = next;
-      inFlightRef.current = false;
-      if (!mountedRef.current) return;
-      if (equalsRef.current(draftRef.current, next)) {
-        setState("synced");
-      } else {
-        setState("edited");
-        void flush();
+  const flush = useCallback(() => {
+    const run = async () => {
+      if (inFlightRef.current) return;
+      const next = draftRef.current;
+      if (equalsRef.current(next, savedRef.current)) return;
+      inFlightRef.current = true;
+      setState("pending");
+      setError(null);
+      try {
+        await onSaveRef.current(next);
+        savedRef.current = next;
+        inFlightRef.current = false;
+        if (!mountedRef.current) return;
+        if (equalsRef.current(draftRef.current, next)) {
+          setState("synced");
+        } else {
+          setState("edited");
+          void run();
+        }
+      } catch (cause) {
+        inFlightRef.current = false;
+        const err = toError(cause);
+        onErrorRef.current?.(err);
+        if (!mountedRef.current) return;
+        setState("error");
+        setError(err);
       }
-    } catch (cause) {
-      inFlightRef.current = false;
-      const err = toError(cause);
-      onErrorRef.current?.(err);
-      if (!mountedRef.current) return;
-      setState("error");
-      setError(err);
-    }
+    };
+    return run();
   }, []);
   const setValue = useCallback(
     (next) => {
@@ -187,69 +190,73 @@ function FieldSyncRow({
   const isError = state === "error";
   const text = isError ? error?.message?.trim() ? error.message : l.error : l[state];
   const retry = onRetry ?? sync.retry;
-  const previous = useRef(state);
+  const [previous, setPrevious] = useState(state);
   const [justSaved, setJustSaved] = useState(false);
+  if (state !== previous) {
+    setPrevious(state);
+    setJustSaved(state === "synced" && previous === "pending");
+  }
   useEffect(() => {
-    const was = previous.current;
-    previous.current = state;
-    if (state === "synced" && was === "pending") {
-      setJustSaved(true);
-      const t = setTimeout(() => setJustSaved(false), savedMs);
-      return () => clearTimeout(t);
-    }
-    if (state !== "synced") setJustSaved(false);
-  }, [state, savedMs]);
+    if (!justSaved) return;
+    const t = setTimeout(() => setJustSaved(false), savedMs);
+    return () => clearTimeout(t);
+  }, [justSaved, savedMs]);
   const shown = state === "synced" ? justSaved ? "synced" : null : state;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-field-sync": state,
-      className: cn(
-        // `relative` for the icon and for the sr-only live region's containing block.
-        "relative [&_:is(input,select,textarea)]:pe-9",
-        shown && FIELD_SYNC_FRAME[shown],
-        className
-      ),
-      onBlur: saveOnBlur ? (e) => {
-        if (!e.currentTarget.contains(e.relatedTarget)) sync.save();
-      } : void 0,
-      children: [
-        children,
-        /* @__PURE__ */ jsxs("span", { className: "pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3", children: [
-          state === "edited" && /* @__PURE__ */ jsx(PencilLine, { "aria-hidden": true, className: "size-4 text-[var(--status-edited)]" }),
-          state === "pending" && /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-4 animate-spin text-[var(--status-pending)] motion-reduce:animate-none" }),
-          state === "synced" && /* @__PURE__ */ jsx(
-            Check,
-            {
-              "aria-hidden": true,
-              className: cn(
-                "size-4 text-[var(--status-synced)] transition-opacity duration-500 motion-reduce:transition-none",
-                justSaved ? "opacity-100" : "opacity-0"
-              )
-            }
-          ),
-          isError && /* @__PURE__ */ jsx(Tooltip, { label: text, portal: true, redact: true, children: /* @__PURE__ */ jsx(
-            "button",
+  return (
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- not an interaction:
+       `onBlur` listens for focus leaving the row's own controls (which are the
+       interactive elements) to save; the wrapper itself is never focused. */
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-field-sync": state,
+        className: cn(
+          // `relative` for the icon and for the sr-only live region's containing block.
+          "relative [&_:is(input,select,textarea)]:pe-9",
+          shown && FIELD_SYNC_FRAME[shown],
+          className
+        ),
+        onBlur: saveOnBlur ? (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) sync.save();
+        } : void 0,
+        children: [
+          children,
+          /* @__PURE__ */ jsxs("span", { className: "pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3", children: [
+            state === "edited" && /* @__PURE__ */ jsx(PencilLine, { "aria-hidden": true, className: "size-4 text-[var(--status-edited)]" }),
+            state === "pending" && /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-4 animate-spin text-[var(--status-pending)] motion-reduce:animate-none" }),
+            state === "synced" && /* @__PURE__ */ jsx(
+              Check,
+              {
+                "aria-hidden": true,
+                className: cn(
+                  "size-4 text-[var(--status-synced)] transition-opacity duration-500 motion-reduce:transition-none",
+                  justSaved ? "opacity-100" : "opacity-0"
+                )
+              }
+            ),
+            isError && /* @__PURE__ */ jsx(Tooltip, { label: text, portal: true, redact: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: retry,
+                "aria-label": l.retry,
+                className: "pointer-events-auto flex rounded-full text-[var(--status-error)] focus-visible:outline-2 focus-visible:outline-offset-2",
+                children: /* @__PURE__ */ jsx(AlertCircle, { "aria-hidden": true, className: "size-4" })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "span",
             {
-              type: "button",
-              onClick: retry,
-              "aria-label": l.retry,
-              className: "pointer-events-auto flex rounded-full text-[var(--status-error)] focus-visible:outline-2 focus-visible:outline-offset-2",
-              children: /* @__PURE__ */ jsx(AlertCircle, { "aria-hidden": true, className: "size-4" })
+              role: isError ? "alert" : "status",
+              "aria-live": isError ? "assertive" : "polite",
+              className: "sr-only",
+              children: shown === null ? "" : text
             }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            role: isError ? "alert" : "status",
-            "aria-live": isError ? "assertive" : "polite",
-            className: "sr-only",
-            children: shown === null ? "" : text
-          }
-        )
-      ]
-    }
+          )
+        ]
+      }
+    )
   );
 }
 export {