@eifi1/ui-kit 0.51.7 → 0.52.0

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, RefreshCw, WifiOff } from \"lucide-react\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { EmptyState } from \"./empty-state\";\nimport { CopyButton } from \"./copy-button\";\nimport { Disclosure } from \"./disclosure\";\nimport { documentNavigation } from \"../lib/document-navigation\";\nimport { DEFAULT_ERROR_BOUNDARY_LABELS } from \"./error-boundary-labels\";\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\n// Defined in ./error-boundary-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ERROR_BOUNDARY_LABELS };\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(error: { name?: string | null; message?: string | null } | null | undefined): 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  /** The boundary's `placement` prop (\"app\", \"page\", \"widget\"): which boundary caught\n   *  it, so triage can tell a whole-app crash from one page's (keksdose G3b). */\n  placement?: 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.placement) lines.push(`Placement: ${report.placement}`);\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(\n  report: Pick<CrashReport, \"name\" | \"message\" | \"stack\"> & Pick<Partial<CrashReport>, \"placement\">,\n): string {\n  const frames = (report.stack ?? \"\").split(\"\\n\").slice(0, 4).join(\"|\");\n  // The placement is part of it (keksdose G3b): the same error caught by the page\n  // boundary and, after Try again fails, by the app boundary is two facts for triage.\n  const where = report.placement ? `${report.placement}::` : \"\";\n  return `${where}${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    documentNavigation.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  /** Which boundary this is — \"app\" at the root, \"page\" in the layout — carried into\n   *  the report (`placement`) and its fingerprint, so `onReport` needs no closure to say\n   *  where the crash was caught (keksdose G3b). */\n  placement?: 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?: LabelOverride<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(\n  details: ErrorBoundaryDetails,\n  componentStack: string | undefined,\n  props: ErrorBoundaryProps,\n): 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    placement: props.placement,\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?: LabelOverride<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\" : \"default\"} 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\" ? \"default\" : \"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-danger-strong bg-danger-soft px-3 py-2 text-start font-mono text-xs text-primary\"\n            >\n              {errorLine}\n            </p>\n          )}\n          {filing === \"filed\" && (\n            <p className=\"-mt-1 mb-1 basis-full text-xs\">{reference ? text.reportedAs(reference) : text.reported}</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-secondary\">\n                {reportText}\n              </pre>\n            </Disclosure>\n          )}\n        </>\n      }\n    />\n  );\n}\n"],"mappings":";AAsiBM,SAgFE,UAhFF,KAgFE,YAhFF;AAtiBN,SAAS,iBAAiB;AAE1B,SAAS,eAAe,WAAW,eAAe;AAClD,SAAS,oBAAwC;AACjD,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AACnC,SAAS,qCAAqC;AAgD9C,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,iBAAiB,OAAsF;AACrH,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;AA+CO,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,UAAW,OAAM,KAAK,cAAc,OAAO,SAAS,EAAE;AACjE,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,iBACd,QACQ;AACR,QAAM,UAAU,OAAO,SAAS,IAAI,MAAM,IAAI,EAAE,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG;AAGpE,QAAM,QAAQ,OAAO,YAAY,GAAG,OAAO,SAAS,OAAO;AAC3D,SAAO,GAAG,KAAK,GAAG,OAAO,IAAI,KAAK,OAAO,OAAO,KAAK,MAAM;AAC7D;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,uBAAmB,OAAO;AAAA,EAC5B,QAAQ;AAAA,EAER;AACF;AA6GA,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,YACP,SACA,gBACA,OACa;AACb,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,WAAW,MAAM;AAAA,IACjB;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,iCAAiC,sBAAY,KAAK,WAAW,SAAS,IAAI,KAAK,UAAS;AAAA,QAEtG,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,iFACZ,sBACH,GACF;AAAA,SAEJ;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/error-boundary.tsx"],"sourcesContent":["import { Component, useEffect } from \"react\";\nimport type { ErrorInfo, ReactNode } from \"react\";\nimport { AlertTriangle, RefreshCw, WifiOff } from \"lucide-react\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { EmptyState } from \"./empty-state\";\nimport { CopyButton } from \"./copy-button\";\nimport { Disclosure } from \"./disclosure\";\nimport { documentNavigation } from \"../lib/document-navigation\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { DEFAULT_ERROR_BOUNDARY_LABELS } from \"./error-boundary-labels\";\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\n// Defined in ./error-boundary-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ERROR_BOUNDARY_LABELS };\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(error: { name?: string | null; message?: string | null } | null | undefined): 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  /** The boundary's `placement` prop (\"app\", \"page\", \"widget\"): which boundary caught\n   *  it, so triage can tell a whole-app crash from one page's (keksdose G3b). */\n  placement?: 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.placement) lines.push(`Placement: ${report.placement}`);\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(\n  report: Pick<CrashReport, \"name\" | \"message\" | \"stack\"> & Pick<Partial<CrashReport>, \"placement\">,\n): string {\n  const frames = (report.stack ?? \"\").split(\"\\n\").slice(0, 4).join(\"|\");\n  // The placement is part of it (keksdose G3b): the same error caught by the page\n  // boundary and, after Try again fails, by the app boundary is two facts for triage.\n  const where = report.placement ? `${report.placement}::` : \"\";\n  return `${where}${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    documentNavigation.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  /** Which boundary this is — \"app\" at the root, \"page\" in the layout — carried into\n   *  the report (`placement`) and its fingerprint, so `onReport` needs no closure to say\n   *  where the crash was caught (keksdose G3b). */\n  placement?: 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?: LabelOverride<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(\n  details: ErrorBoundaryDetails,\n  componentStack: string | undefined,\n  props: ErrorBoundaryProps,\n): 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    placement: props.placement,\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?: LabelOverride<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  // The title and the hint, said once through an assertive region of their own (0.52,\n  // refactor audit 2026-10-30, DSP-17). `role=\"alert\"` on the whole box put the actions\n  // in it, so each later insertion was read out as news: \"Copy error report\" and\n  // \"Details\" on `componentDidCatch`'s second render, \"Reported as …\", and on opening\n  // Details both stacks of the crash report. EmptyState has no wrapper for title and\n  // hint alone, and a region mounted with its message is often missed anyway.\n  const alert = useAnnounce({ politeness: \"assertive\" });\n  const { announce } = alert;\n  const spoken = `${title}. ${hint}`;\n  useEffect(() => announce(spoken), [announce, spoken]);\n\n  const reloadButton = (\n    <Button key=\"reload\" variant={mode === \"error\" ? \"secondary\" : \"default\"} 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\" ? \"default\" : \"secondary\"} onClick={reset}>\n      {text.retry}\n    </Button>\n  );\n\n  return (\n    <>\n      <span {...alert.regionProps} />\n      <EmptyState\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-danger-strong bg-danger-soft px-3 py-2 text-start font-mono text-xs text-primary\"\n              >\n                {errorLine}\n              </p>\n            )}\n            {filing === \"filed\" && (\n              <p className=\"-mt-1 mb-1 basis-full text-xs\">{reference ? text.reportedAs(reference) : text.reported}</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-secondary\">\n                  {reportText}\n                </pre>\n              </Disclosure>\n            )}\n          </>\n        }\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{ui-labels.d.ts → field-base-labels.d.ts}

@@ -1,5 +1,3 @@
 import type { CharacterCountLabels, PasswordRevealLabels } from "./field-base.js";
-import type { TabsLabels } from "./tabs.js";
 export declare const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels;
 export declare const DEFAULT_CHARACTER_COUNT_LABELS: CharacterCountLabels;
-export declare const DEFAULT_TABS_LABELS: TabsLabels;

package/dist/components/{ui-labels.js → field-base-labels.js}

@@ -8,15 +8,8 @@ const DEFAULT_CHARACTER_COUNT_LABELS = {
   remaining: (left) => left === 1 ? "1 character left" : `${left} characters left`,
   limitReached: "Character limit reached"
 };
-const DEFAULT_TABS_LABELS = {
-  add: "Add tab",
-  remove: (tab) => `Remove ${tab}`,
-  more: "More tabs",
-  previous: "Previous tabs"
-};
 export {
   DEFAULT_CHARACTER_COUNT_LABELS,
-  DEFAULT_PASSWORD_REVEAL_LABELS,
-  DEFAULT_TABS_LABELS
+  DEFAULT_PASSWORD_REVEAL_LABELS
 };
-//# sourceMappingURL=ui-labels.js.map
+//# sourceMappingURL=field-base-labels.js.map

package/dist/components/field-base-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/field-base-labels.ts"],"sourcesContent":["// The English words of ./field-base, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./field-base re-exports them.\n//\n// Until 0.52 they shared ui-labels.ts with the tabs' words, named after the ui.tsx that\n// 0.34 split up (MOD-7, refactor audit 2026-10-30): one labels module per component now,\n// as every other `*-labels.ts` is.\n\nimport type { CharacterCountLabels, PasswordRevealLabels } from \"./field-base\";\n\nexport const DEFAULT_PASSWORD_REVEAL_LABELS: PasswordRevealLabels = {\n  show: \"Show password\",\n  hide: \"Hide password\",\n};\n\nexport const DEFAULT_CHARACTER_COUNT_LABELS: CharacterCountLabels = {\n  count: (used, max) => `${used} of ${max} characters`,\n  remaining: (left) => (left === 1 ? \"1 character left\" : `${left} characters left`),\n  limitReached: \"Character limit reached\",\n};\n"],"mappings":";AAUO,MAAM,iCAAuD;AAAA,EAClE,MAAM;AAAA,EACN,MAAM;AACR;AAEO,MAAM,iCAAuD;AAAA,EAClE,OAAO,CAAC,MAAM,QAAQ,GAAG,IAAI,OAAO,GAAG;AAAA,EACvC,WAAW,CAAC,SAAU,SAAS,IAAI,qBAAqB,GAAG,IAAI;AAAA,EAC/D,cAAc;AAChB;","names":[]}

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

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, ReactNode } from "react";
 import { type FieldHintParts } from "./field-parts.js";
-import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "./ui-labels.js";
+import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "./field-base-labels.js";
 /**
  * The field base: what Input, Select and Textarea — and every kit field built on the same
  * look — share (0.34, MOD-2, refactor audit 2026-10). The `FIELD_*` classes, the floating
@@ -8,7 +8,8 @@ import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "
  * reveal and the character counter. The message under a wrong field is field-parts'
  * `useFieldError`, every field's.
  *
- * Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are
+ * Public through the barrel (src/index.ts) by name. `FieldGroup`, the counter and the
+ * placeholder helpers are
  * the three fields' shared parts (`@internal`), as are the Select's own classes and its
  * `SelectWidthFloor` (0.51).
  */
@@ -32,7 +33,7 @@ export declare const FIELD_BASE: string;
  *  cannot make the later one win. */
 export declare const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-surface [&[readonly]]:text-primary";
 export declare const FIELD_FLOATING_PAD = "pt-4 pb-1 large:py-2";
-export declare const FIELD_INVALID = "border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]";
+export declare const FIELD_INVALID = "border-danger-strong ring-1 contrast:ring-2 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]";
 export declare const FLOATING_INPUT_CLASS: string;
 /**
  * The PHONE display treatment (Keksdose feedback #176, carried across the entry

package/dist/components/field-base.js

@@ -11,13 +11,13 @@ import {
   LABEL_ABOVE_BOX,
   STATIC_LABEL_TYPE
 } from "./field-parts.js";
-import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "./ui-labels.js";
+import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "./field-base-labels.js";
 const FIELD_TOUCH_TEXT = "pointer-coarse:text-[length:max(0.875rem,16px)]";
-const FIELD_BASE = "block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand focus:ring-1 focus:ring-inset focus:ring-brand " + // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.
+const FIELD_BASE = "block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand focus:ring-1 contrast:focus:ring-2 focus:ring-inset focus:ring-brand " + // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.
 FIELD_TOUCH_TEXT + " disabled:cursor-default disabled:bg-surface-2 disabled:text-muted [&[readonly]]:bg-surface-2 [&[readonly]]:text-muted";
 const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-surface [&[readonly]]:text-primary";
 const FIELD_FLOATING_PAD = "pt-4 pb-1 large:py-2";
-const FIELD_INVALID = "border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]";
+const FIELD_INVALID = "border-danger-strong ring-1 contrast:ring-2 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]";
 const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, "peer placeholder:text-transparent");
 const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60";
 const FIELD_TRIGGER = cn(

package/dist/components/field-base.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-base.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  FieldCaption,\n  FLOATING_LABEL_STATIC,\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_ABOVE_BOX,\n  STATIC_LABEL_TYPE,\n  type FieldHintParts,\n} from \"./field-parts\";\nimport { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from \"./ui-labels\";\n\n/**\n * The field base: what Input, Select and Textarea — and every kit field built on the same\n * look — share (0.34, MOD-2, refactor audit 2026-10). The `FIELD_*` classes, the floating\n * label and its `FloatingField` box, `Label`, the chevron, and the words of the password\n * reveal and the character counter. The message under a wrong field is field-parts'\n * `useFieldError`, every field's.\n *\n * Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are\n * the three fields' shared parts (`@internal`), as are the Select's own classes and its\n * `SelectWidthFloor` (0.51).\n */\n\n/**\n * The 16 px floor on touch (docs/text-size-harmonization.md §10.1). iOS zooms the page\n * when a field under 16 px takes focus, and keksdose's `maximum-scale=1` — which stopped\n * it — goes so pinch zoom works again (WCAG 1.4.4). A zoomed page drops the keyboard\n * inset to 0 (§10.2), so the zoom would put a pinned editor footer behind the keyboard\n * (keksdose #154). So on a coarse pointer a field is at least 16 px, at every text size:\n * `max()` leaves Large and Extra large alone, where `text-sm` is already 17.5 / 21 px.\n *\n * In px on purpose: the threshold is the browser's, in CSS px, whatever the root size.\n * Font size only — the line height keeps `text-sm`'s ratio. Part of {@link FIELD_BASE};\n * add it to any other text-entry control whose type is below 16 px.\n */\nexport const FIELD_TOUCH_TEXT = \"pointer-coarse:text-[length:max(0.875rem,16px)]\";\n\nexport const FIELD_BASE =\n  \"block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand \" +\n  // The focus line, whole at fractional display scaling (K5 follow-up, keksdose run 78):\n  // at 125 % a 1px border covers 1.25 device pixels, and the sides that fall across a\n  // pixel boundary read half-strength. A 1px INSET ring in the focus colour beside it\n  // doubles the line inward — FIELD_INVALID's border-plus-ring (live #295), and the\n  // DatePicker stepper's fix (0.34) — so every side keeps one fully covered device\n  // pixel. Inset: nothing outside the field moves or is covered.\n  \"focus:ring-1 focus:ring-inset focus:ring-brand \" +\n  // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.\n  FIELD_TOUCH_TEXT +\n  \" \" +\n  // A field the user cannot change has to LOOK settled. Without this, `disabled`\n  // dimmed the floating label and nothing else — FIELD_BASE's own\n  // `text-primary` overrides the browser's grey — so a read-only value\n  // sat there at full body-text strength, indistinguishable from one you could retype\n  // (Keksdose dev#455/#474).\n  \"disabled:cursor-default disabled:bg-surface-2 disabled:text-muted \" +\n  // Same for a field that takes focus but refuses keys: `readOnly` is not\n  // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n  // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n  // mean that — see the two-factor code field, which uses it to block an autofill\n  // and drops it the moment you focus the field.\n  //\n  // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n  // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n  // everything that is not `:read-write`, and only editable inputs/textareas and\n  // contenteditable elements are `:read-write`. So `read-only:` matched every\n  // `<select>` in the app and every field-styled `<button>` built on this base —\n  // the native selects, the date trigger, the entity/currency/multi pickers — and\n  // painted them all in the \"you may not edit this\" grey. On one transaction form\n  // that made three different-looking families out of one field style: plain\n  // inputs, grey selects, grey trigger buttons.\n  \"[&[readonly]]:bg-surface-2 [&[readonly]]:text-muted\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n *  reason other than \"you may not edit this\". Attribute-scoped for the same reason\n *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n *  cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK = \"[&[readonly]]:bg-surface [&[readonly]]:text-primary\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2. At Large the label stands above the field (0.33, §10.17,\n// LABEL_ABOVE_AT_LARGE), so the strip goes and the field is FIELD_BASE's `py-2` again.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1 large:py-2\";\n\n// Error/required highlight for a field that is missing a value — a `--danger`\n// border and matching focus ring so the control itself shows what's wrong, not just\n// a note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, back when this was a hard-coded rose (full =\n// rgb(208,30,78)): left/top/bottom all 208, right 160 then 115 — the side that is\n// supposed to shout, at 55–77% of the others. A border plus a ring is 2 CSS px, so\n// whatever the fraction there is always one fully covered device pixel on every side\n// (re-measured: worst side 241). It is the GEOMETRY that carries that, not the hue,\n// so the fix survives a consumer re-pointing `--danger-border`.\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives.\nexport const FIELD_INVALID =\n  \"border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies in the\n * phone layout (`usePhoneLayout()`, `max-md:` at the text size in force) and the field\n * is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n *  - A hairline baseline. With the box gone something still has to say \"you can\n *    type here\"; it takes the brand colour on focus, where a bordered field would\n *    light its whole outline. Each edge is set exactly once (`border-x-0\n *    border-t-0 border-b`) so the rule can't hinge on utility order. On focus the\n *    line is doubled inward by an inset shadow on that edge alone — FIELD_BASE's\n *    inset ring, for the same reason (K5 follow-up: a 1px line reads half-strength at\n *    125 %) — where a ring would draw a box round the figure.\n *  - The muted placeholder colour, because a display field is usually empty at\n *    the moment it matters most and has nothing else to show.\n *  - The label, moved to `sr-only` rather than dropped: display type is legible\n *    to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n  \"block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\n//\n// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A\n// trigger with nothing chosen and no placeholder renders an EMPTY value span, an\n// empty span has no line box, and the trigger collapsed to its padding — 18px\n// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker\n// and MonthPicker had met the same thing as Keksdose live #294 and patched their\n// own span with a U+00A0). Here, on the shared class, it covers every trigger\n// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height\n// so it tracks whatever type the trigger is set in; the first child is the value\n// in every trigger here (the chevron and the clear button are absolute).\nexport const FIELD_TRIGGER = cn(\n  FIELD_BASE,\n  \"relative flex items-center justify-between gap-2 text-start hover:bg-hover\",\n  \"[&>:first-child]:min-h-[1lh]\",\n);\n\n/** An alias rather than an interface: the chevron adds nothing of its own to an\n *  `<svg>`'s props, and an interface declaring no members is the same type wearing a\n *  name that suggests otherwise. */\nexport type FieldChevronProps = Omit<ComponentPropsWithRef<\"svg\">, \"children\">;\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pe-9` on the trigger so the value can't run underneath. At the\n * inline END, not the right: a right-to-left form reads the value from the right,\n * and a chevron parked on top of its first word hid exactly the part that says\n * what was picked. */\nexport function FieldChevron({ className, ...rest }: FieldChevronProps) {\n  return (\n    <ChevronDown\n      {...rest}\n      // After the spread: the chevron is decoration beside a control that already has\n      // a name, and an `aria-hidden` a caller could switch off by accident is a second\n      // announcement of the same field.\n      aria-hidden\n      className={cn(\"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\", className)}\n    />\n  );\n}\n\n/** A native dropdown Select's dress: no native arrow, and `pe-9`, the room the\n *  {@link FieldChevron} takes. Shared with {@link SelectWidthFloor}. `@internal` */\nexport const SELECT_MENU_DRESS = \"appearance-none pe-9\";\n\n/** The compact Select (`size=\"sm\"`): the field's colours, a toolbar button's height.\n *  `py-0` and a fixed height rather than a smaller padding, so the box is 28px whatever\n *  line height the caller's type brings with it. Shared with {@link SelectWidthFloor}.\n *  `@internal` */\nexport const SELECT_SM = \"h-7 py-0 ps-2 pe-7 text-xs\";\n\n/**\n * The width an UNLABELLED Select needs to show the widest of `values` whole: an invisible,\n * zero-height line under it, in the select's own type, padding, chevron room and border\n * (the same classes), one value per line. Placed beside the Select in the box that sizes\n * it, it holds that box to the widest value, and the `w-full` select fills it. `@internal`\n *\n * Why it takes a sizer (0.51, Kurvenschmiede N5). A `<select>` with a percentage width\n * is a \"compressible\" element: its min-content contribution is ZERO (CSS Sizing 3\n * §5.2.2), so the auto table layout squeezes its column to the header, and beside a\n * `grow` column every other column IS squeezed to its min-content (data-table-fit.ts).\n * The user roster's role select stood 92px and read \"Meml…\" and \"Admi…\" (KS review,\n * 0.49 and 0.50). `min-width: max-content` on the select would hold it instead — but to\n * its widest OPTION, and an unavailable role's option carries its reason (\"Customer (owns\n * work)\", RoleSelect's `optionDisabledReason`): the column would widen for a text that is\n * never the selected value. So the caller says which values can be selected, in the\n * current language.\n */\nexport function SelectWidthFloor({ values, size = \"md\" }: { values: readonly string[]; size?: \"sm\" | \"md\" }) {\n  if (values.length === 0) return null;\n  return (\n    <span\n      aria-hidden\n      data-select-floor=\"\"\n      className={cn(\n        FIELD_BASE,\n        SELECT_MENU_DRESS,\n        size === \"sm\" && SELECT_SM,\n        // The horizontal box only: no height, no vertical padding or border, not painted.\n        \"invisible h-0 overflow-hidden border-y-0 py-0 whitespace-nowrap shadow-none\",\n      )}\n    >\n      {values.map((value, i) => (\n        // The value as generated content, not as text: it is laid out (and so measured)\n        // the same, but a test's `getByText(\"Member\")` still finds the one option, and a\n        // find-in-page or a copied row does not meet a word nobody sees.\n        <span key={i} data-value={value} className=\"block before:content-[attr(data-value)]\" />\n      ))}\n    </span>\n  );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the field's own surface, so no background chip and nothing to mismatch the card.\n//\n// At Large it is a static label ABOVE the field instead (0.33, §10.17): in flow, so it\n// wraps; always in its floated look, since there is no strip to float into and no\n// placeholder to stand in for; no transition, since it never moves.\nconst LABEL_FLOATED_AT_LARGE = \"large:text-caption large:leading-tight large:text-secondary large:transition-none\";\n\nexport const FLOATING_LABEL_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all\",\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n  LABEL_FLOATED_AT_LARGE,\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the end edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48). At Large the row stands\n// above the field, as the label alone does, and nothing at the end edge is under it.\nconst FLOATING_ROW_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all\",\n  \"max-w-[calc(100%-3rem)] text-sm text-placeholder\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_FLOATED_AT_LARGE,\n);\n\n/** The static label's row with its \"?\" at the field's end, in the top strip — and at\n *  Large above the field (LABEL_ABOVE_AT_LARGE). */\nconst STATIC_ROW_CLASS = cn(\n  \"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\",\n  LABEL_ABOVE_AT_LARGE,\n);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport interface FloatingFieldProps extends ComponentPropsWithRef<\"div\"> {\n  htmlFor?: string;\n  label?: ReactNode;\n  staticLabel?: boolean;\n  /** Keep the label in the accessibility tree but out of the layout — what\n   *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n   *  field left would have nothing to float in. */\n  srOnlyLabel?: boolean;\n  /** Something interactive that belongs to the LABEL rather than to the value —\n   *  in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n   *  with the label, so it is centred on the label's line by the layout instead\n   *  of by a hand-tuned `top-…`, and it can never drift when the type changes.\n   *\n   *  It rides an ANIMATED label too, and the two cases place it differently on\n   *  purpose. A static label has a field-wide strip to itself, so the hint sits\n   *  at the far end of it and a long label truncates into the gap. An animated\n   *  one belongs to a control with something at the end edge of the field — a\n   *  calculator, a stepper — so the hint follows the label instead, and it is\n   *  the label that gives way (steering-design feedback #48). */\n  hint?: ReactNode;\n  children: ReactNode;\n}\n\nexport function FloatingField({\n  className,\n  htmlFor,\n  label,\n  staticLabel,\n  srOnlyLabel,\n  hint,\n  children,\n  ...rest\n}: FloatingFieldProps) {\n  const withHint = hint !== undefined && !srOnlyLabel;\n  const atEnd = withHint && staticLabel;\n  // A label drawn over the field: at Large it stands above it instead (0.33, §10.17),\n  // in the first row of this box (LABEL_ABOVE_BOX), though it FOLLOWS the control in\n  // the DOM — `peer-*` reads the input before it.\n  const above = label !== undefined && !srOnlyLabel;\n  const labelEl = label !== undefined && (\n    <label\n      htmlFor={htmlFor}\n      // In the first row at Large, out of LABEL_ABOVE_BOX's rule for the field's parts.\n      data-field-label={above && !withHint ? \"\" : undefined}\n      className={\n        srOnlyLabel\n          ? \"sr-only\"\n          : atEnd\n            ? cn(\"pointer-events-none min-w-0 truncate-until-large\", STATIC_LABEL_TYPE)\n            : withHint\n              ? \"pointer-events-none min-w-0 truncate-until-large\"\n              : staticLabel\n                ? FLOATING_LABEL_STATIC\n                : FLOATING_LABEL_CLASS\n      }\n    >\n      {label}\n    </label>\n  );\n  return (\n    // `relative` is the whole contract of this wrapper — the floating label and every\n    // control that hangs off it (a reveal toggle, a chevron) are positioned against\n    // this box — so it is merged through `cn` after the spread rather than left where\n    // a caller's stray `className` or `style` could unset it. At Large, with a label\n    // above, a grid: the label's row over the field's, the field's parts in the latter.\n    <div {...rest} className={cn(\"relative\", above && LABEL_ABOVE_BOX, className)}>\n      {children}\n      {withHint ? (\n        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at\n        // the field's own end padding instead of running under the chevron.\n        // Animated: the row floats with the label and is only as wide as it needs\n        // to be. Either way the hint keeps its width (`shrink-0`) and the label\n        // is the one that gives way.\n        <div data-field-label=\"\" className={atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS}>\n          {labelEl}\n          <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n        </div>\n      ) : (\n        labelEl\n      )}\n    </div>\n  );\n}\n\nexport interface LabelProps extends ComponentPropsWithRef<\"label\"> {\n  /** Draw the required mark after the text. The mark is `aria-hidden`: what a\n   *  screen reader hears is the control's own `required` / `aria-required`, which\n   *  the caller still sets — a \"star\" read out as the last word of every name is\n   *  noise, and a control that is not marked required is not required however its\n   *  label looks. */\n  required?: boolean;\n  /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */\n  size?: \"sm\" | \"md\";\n  /** Dim the label with its control. A label ABOVE its field is not the field's\n   *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */\n  disabled?: boolean;\n}\n\n/**\n * The label ABOVE a field, for the places a floating label does not fit: a control\n * the kit did not render (a third-party picker, a range slider, a group of radios),\n * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels\n * above its fields throughout.\n *\n * A new component rather than a mode of {@link FieldLabel}, because the two share\n * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a\n * trigger's `relative` box and has to stay exactly that for every dropdown that\n * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,\n * that a click focuses the control through. Spacing below it belongs to the caller's\n * layout (`space-y-1.5` on the pair, typically), as it would for any block.\n */\nexport function Label({ required, size = \"md\", disabled, className, children, ...rest }: LabelProps) {\n  return (\n    <label\n      {...rest}\n      className={cn(\n        \"inline-flex items-center gap-0.5 font-medium leading-none text-primary\",\n        size === \"sm\" ? \"text-xs\" : \"text-sm\",\n        disabled && \"cursor-default opacity-50\",\n        className,\n      )}\n    >\n      {children}\n      {required && (\n        <span aria-hidden className=\"text-danger\">\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\n// The message under a field that is wrong, and the wiring that attaches it — `useFieldError`\n// — lives in field-parts since 0.34, every field's (DUP-8, refactor audit 2026-10).\n\n/**\n * @internal A field and its message as one box.\n *\n * The message cannot go INSIDE the field's own `relative` box. The password reveal\n * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on\n * whatever that box contains — put two lines of message in it and the chevron drifts\n * down out of the field, between the value and the text. So the field keeps its box\n * and this wraps the pair.\n *\n * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,\n * which is what keeps the prop additive: it is exactly the DOM it was before the prop\n * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a\n * caller's flex row. A field that DOES take `error` — the key is passed, whatever its\n * value — is wrapped for as long as it is mounted, message or not (`reserve`).\n *\n * It used to wrap only while a message showed, and that cost the control its\n * identity: a fragment and a `<div>` are different elements at the same spot in the\n * tree, so React threw the `<input>` away and mounted a new one every time the message\n * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled\n * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its\n * \"Wrong password\" on change, so the first keystroke of the retry dropped the user out\n * of the field. Keeping the box stops that; the field is never reparented.\n *\n * The other ways to keep it stable were worse. A box on EVERY field changes what every\n * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the\n * field would land on a child of the item instead of the item). A `display: contents`\n * box would keep the flex/grid item, but a contents box takes no margin, so a parent's\n * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password\n * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves\n * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box\n * whenever its message showed, so what changes is only that it keeps it while none\n * does; every such call site in the three apps sits in a block or a `space-y`/grid\n * stack where a full-width block box is the field's own size. The case it does change\n * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a\n * row): that caller already lost the sizing while a message showed, and now sees the\n * same box without one. Pass `error` only where a message can actually appear.\n *\n * `className` is NOT moved out here, for the same reason — it goes on the field, as it\n * always has, so the box cannot silently change what that prop styles.\n */\nexport function FieldGroup({\n  errorEl,\n  reserve = false,\n  children,\n}: {\n  errorEl: ReactNode;\n  /** The caller passed `error`: keep the box even while there is no message. */\n  reserve?: boolean;\n  children: ReactNode;\n}) {\n  if (errorEl === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {errorEl}\n    </div>\n  );\n}\n\n/** The two names the password reveal toggle can wear. See {@link Input}. */\nexport interface PasswordRevealLabels {\n  /** While the value is hidden — activating the toggle will show it. */\n  show: string;\n  /** While the value is shown. */\n  hide: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_REVEAL_LABELS };\n\n/**\n * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.\n * The visible \"12/80\" is digits and a slash and is not translated; these are the words\n * a screen reader gets instead of it.\n */\nexport interface CharacterCountLabels {\n  /** The counter as part of the field's description, read when focus reaches the\n   *  field: \"12 of 80 characters\". */\n  count: (used: number, max: number) => string;\n  /** Said once, politely, on entering the last stretch before the limit: \"8\n   *  characters left\". */\n  remaining: (left: number) => string;\n  /** Said once, politely, on reaching the limit. */\n  limitReached: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHARACTER_COUNT_LABELS };\n\n/** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter\n *  and the limit can never disagree about whether a field is full. */\nfunction textLength(value: unknown): number {\n  return value === undefined || value === null ? 0 : String(value).length;\n}\n\n/** @internal The counter's length: the controlled `value`'s, else what the field has been typed\n *  to (from `defaultValue` on). `track` is called from the field's change handler. */\nexport function useTypedLength(value: unknown, defaultValue: unknown) {\n  const [typed, setTyped] = useState(() => textLength(defaultValue));\n  return { used: value !== undefined ? textLength(value) : typed, track: (text: string) => setTyped(text.length) };\n}\n\ntype CountZone = \"ok\" | \"near\" | \"limit\";\n\n/** The last stretch before the limit: a tenth of it, at least 1 and at most 20 — \"8\n *  left\" of 80, and 20 of 2,000 rather than 200, which is not \"near\" in any sense a\n *  person typing means. */\nfunction nearLimitAt(max: number): number {\n  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));\n}\n\nfunction countZone(used: number, max: number): CountZone {\n  if (used >= max) return \"limit\";\n  return max - used <= nearLimitAt(max) ? \"near\" : \"ok\";\n}\n\n/**\n * @internal The live \"12/80\" under a field with `showCount` (keksdose K11: the admin broadcast,\n * support replies, canned replies and the handoff note each counted by hand, and one\n * announced every keystroke).\n *\n * Three channels, each saying only what it should:\n *  - the digits, `aria-hidden` — \"12 slash 80\" is not a sentence;\n *  - a `hidden` \"12 of 80 characters\" on the field's `aria-describedby`, so the count is\n *    read with the field when focus reaches it, and never while typing;\n *  - a polite live region that speaks ONCE per stretch: on entering the last tenth\n *    (\"8 characters left\") and on reaching the limit. A region that changed on every\n *    keystroke would talk over the user's own typing echo for the whole message.\n *    Nothing is said on mount: a stored note already near its limit is not news.\n */\nexport function CharacterCount({\n  id,\n  used,\n  max,\n  labels,\n  caption,\n}: {\n  id: string;\n  used: number;\n  max: number;\n  labels: CharacterCountLabels;\n  caption: ReactNode;\n}) {\n  const zone = countZone(used, max);\n  // What the live region holds, re-set only when the stretch changes — the previous\n  // render's zone kept in state, the pattern React documents for \"adjusting state when\n  // a prop changes\", so the region's text (and so the announcement) changes at most\n  // once per crossing.\n  const [said, setSaid] = useState<{ zone: CountZone; text: string }>({ zone, text: \"\" });\n  if (said.zone !== zone) {\n    setSaid({\n      zone,\n      text: zone === \"near\" ? labels.remaining(max - used) : zone === \"limit\" ? labels.limitReached : \"\",\n    });\n  }\n  return (\n    // `relative` holds the sr-only region (see sr-only-containment.test).\n    <div className=\"relative mt-1 flex items-start gap-2\">\n      <div className=\"min-w-0 flex-1\">{caption}</div>\n      <span\n        aria-hidden\n        className={cn(\n          \"shrink-0 text-caption leading-tight tabular-nums\",\n          zone === \"limit\" ? \"text-danger\" : zone === \"near\" ? \"text-warning\" : \"text-muted\",\n        )}\n      >\n        {used}/{max}\n      </span>\n      <span id={id} hidden>\n        {labels.count(used, max)}\n      </span>\n      <span role=\"status\" className=\"sr-only\">\n        {said.text}\n      </span>\n    </div>\n  );\n}\n\n/** @internal What goes under a text field: the caption (beside the counter, when there is one),\n *  then the error. `null` when there is nothing, so a field with none keeps exactly the\n *  DOM it had (see {@link FieldGroup}). */\nexport function fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode {\n  if (counter === null && hint.captionText === undefined && errorEl === null) return null;\n  return (\n    <>\n      {counter ?? <FieldCaption parts={hint} />}\n      {errorEl}\n    </>\n  );\n}\n\n/**\n * @internal kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has\n * floated out of its way — on focus — and transparent until then, while the label sits\n * where the placeholder would be. Without it the field forced `placeholder=\" \"` for the\n * float trick and dropped the caller's text without a word (kastlan's \"note\" field lost\n * its hint). `:placeholder-shown` still drives the float: it matches an empty field\n * whatever the placeholder's text is.\n */\nexport const FLOATING_PLACEHOLDER_ON_FOCUS = \"focus:placeholder:text-placeholder\";\n\n/** @internal A placeholder with something to show. `\"\"` and blanks are the float trick's own\n *  `\" \"`, never the caller's hint. */\nexport const hasPlaceholderText = (placeholder: string | undefined): placeholder is string =>\n  placeholder !== undefined && placeholder.trim() !== \"\";\n\n/** @internal The counter's words: the `characterCount` namespace — prop > `<UiKitProvider\n *  labels>` > English. One place, so the namespace is named once. */\nexport function useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels {\n  return useKitLabels(\"characterCount\", DEFAULT_CHARACTER_COUNT_LABELS, prop);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/field-base.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  FieldCaption,\n  FLOATING_LABEL_STATIC,\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_ABOVE_BOX,\n  STATIC_LABEL_TYPE,\n  type FieldHintParts,\n} from \"./field-parts\";\nimport { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from \"./field-base-labels\";\n\n/**\n * The field base: what Input, Select and Textarea — and every kit field built on the same\n * look — share (0.34, MOD-2, refactor audit 2026-10). The `FIELD_*` classes, the floating\n * label and its `FloatingField` box, `Label`, the chevron, and the words of the password\n * reveal and the character counter. The message under a wrong field is field-parts'\n * `useFieldError`, every field's.\n *\n * Public through the barrel (src/index.ts) by name. `FieldGroup`, the counter and the\n * placeholder helpers are\n * the three fields' shared parts (`@internal`), as are the Select's own classes and its\n * `SelectWidthFloor` (0.51).\n */\n\n/**\n * The 16 px floor on touch (docs/text-size-harmonization.md §10.1). iOS zooms the page\n * when a field under 16 px takes focus, and keksdose's `maximum-scale=1` — which stopped\n * it — goes so pinch zoom works again (WCAG 1.4.4). A zoomed page drops the keyboard\n * inset to 0 (§10.2), so the zoom would put a pinned editor footer behind the keyboard\n * (keksdose #154). So on a coarse pointer a field is at least 16 px, at every text size:\n * `max()` leaves Large and Extra large alone, where `text-sm` is already 17.5 / 21 px.\n *\n * In px on purpose: the threshold is the browser's, in CSS px, whatever the root size.\n * Font size only — the line height keeps `text-sm`'s ratio. Part of {@link FIELD_BASE};\n * add it to any other text-entry control whose type is below 16 px.\n */\nexport const FIELD_TOUCH_TEXT = \"pointer-coarse:text-[length:max(0.875rem,16px)]\";\n\nexport const FIELD_BASE =\n  \"block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand \" +\n  // The focus line, whole at fractional display scaling (K5 follow-up, keksdose run 78):\n  // at 125 % a 1px border covers 1.25 device pixels, and the sides that fall across a\n  // pixel boundary read half-strength. A 1px INSET ring in the focus colour beside it\n  // doubles the line inward — FIELD_INVALID's border-plus-ring (live #295), and the\n  // DatePicker stepper's fix (0.34) — so every side keeps one fully covered device\n  // pixel. Inset: nothing outside the field moves or is covered.\n  //\n  // Under More contrast the ring is 2px, so the line is 3px — what `--focus-ring-width`\n  // gives every `FOCUS_RING` there, and what `appearance.contrastHelp` promises (\"thickens\n  // focus frames\"); before 0.52 a text field kept its 2px (refactor audit 2026-10-30,\n  // DOC-2). Still inset, so nothing moves.\n  \"focus:ring-1 contrast:focus:ring-2 focus:ring-inset focus:ring-brand \" +\n  // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.\n  FIELD_TOUCH_TEXT +\n  \" \" +\n  // A field the user cannot change has to LOOK settled. Without this, `disabled`\n  // dimmed the floating label and nothing else — FIELD_BASE's own\n  // `text-primary` overrides the browser's grey — so a read-only value\n  // sat there at full body-text strength, indistinguishable from one you could retype\n  // (Keksdose dev#455/#474).\n  \"disabled:cursor-default disabled:bg-surface-2 disabled:text-muted \" +\n  // Same for a field that takes focus but refuses keys: `readOnly` is not\n  // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n  // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n  // mean that — see the two-factor code field, which uses it to block an autofill\n  // and drops it the moment you focus the field.\n  //\n  // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n  // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n  // everything that is not `:read-write`, and only editable inputs/textareas and\n  // contenteditable elements are `:read-write`. So `read-only:` matched every\n  // `<select>` in the app and every field-styled `<button>` built on this base —\n  // the native selects, the date trigger, the entity/currency/multi pickers — and\n  // painted them all in the \"you may not edit this\" grey. On one transaction form\n  // that made three different-looking families out of one field style: plain\n  // inputs, grey selects, grey trigger buttons.\n  \"[&[readonly]]:bg-surface-2 [&[readonly]]:text-muted\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n *  reason other than \"you may not edit this\". Attribute-scoped for the same reason\n *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n *  cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK = \"[&[readonly]]:bg-surface [&[readonly]]:text-primary\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2. At Large the label stands above the field (0.33, §10.17,\n// LABEL_ABOVE_AT_LARGE), so the strip goes and the field is FIELD_BASE's `py-2` again.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1 large:py-2\";\n\n// Error/required highlight for a field that is missing a value — a `--danger`\n// border and matching focus ring so the control itself shows what's wrong, not just\n// a note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, back when this was a hard-coded rose (full =\n// rgb(208,30,78)): left/top/bottom all 208, right 160 then 115 — the side that is\n// supposed to shout, at 55–77% of the others. A border plus a ring is 2 CSS px, so\n// whatever the fraction there is always one fully covered device pixel on every side\n// (re-measured: worst side 241). It is the GEOMETRY that carries that, not the hue,\n// so the fix survives a consumer re-pointing `--danger-border`.\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives. Under More contrast the ring is 2px, as FIELD_BASE's focus line (0.52, DOC-2).\nexport const FIELD_INVALID =\n  \"border-danger-strong ring-1 contrast:ring-2 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies in the\n * phone layout (`usePhoneLayout()`, `max-md:` at the text size in force) and the field\n * is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n *  - A hairline baseline. With the box gone something still has to say \"you can\n *    type here\"; it takes the brand colour on focus, where a bordered field would\n *    light its whole outline. Each edge is set exactly once (`border-x-0\n *    border-t-0 border-b`) so the rule can't hinge on utility order. On focus the\n *    line is doubled inward by an inset shadow on that edge alone — FIELD_BASE's\n *    inset ring, for the same reason (K5 follow-up: a 1px line reads half-strength at\n *    125 %) — where a ring would draw a box round the figure.\n *  - The muted placeholder colour, because a display field is usually empty at\n *    the moment it matters most and has nothing else to show.\n *  - The label, moved to `sr-only` rather than dropped: display type is legible\n *    to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n  \"block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\n//\n// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A\n// trigger with nothing chosen and no placeholder renders an EMPTY value span, an\n// empty span has no line box, and the trigger collapsed to its padding — 18px\n// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker\n// and MonthPicker had met the same thing as Keksdose live #294 and patched their\n// own span with a U+00A0). Here, on the shared class, it covers every trigger\n// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height\n// so it tracks whatever type the trigger is set in; the first child is the value\n// in every trigger here (the chevron and the clear button are absolute).\nexport const FIELD_TRIGGER = cn(\n  FIELD_BASE,\n  \"relative flex items-center justify-between gap-2 text-start hover:bg-hover\",\n  \"[&>:first-child]:min-h-[1lh]\",\n);\n\n/** An alias rather than an interface: the chevron adds nothing of its own to an\n *  `<svg>`'s props, and an interface declaring no members is the same type wearing a\n *  name that suggests otherwise. */\nexport type FieldChevronProps = Omit<ComponentPropsWithRef<\"svg\">, \"children\">;\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pe-9` on the trigger so the value can't run underneath. At the\n * inline END, not the right: a right-to-left form reads the value from the right,\n * and a chevron parked on top of its first word hid exactly the part that says\n * what was picked. */\nexport function FieldChevron({ className, ...rest }: FieldChevronProps) {\n  return (\n    <ChevronDown\n      {...rest}\n      // After the spread: the chevron is decoration beside a control that already has\n      // a name, and an `aria-hidden` a caller could switch off by accident is a second\n      // announcement of the same field.\n      aria-hidden\n      className={cn(\"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\", className)}\n    />\n  );\n}\n\n/** A native dropdown Select's dress: no native arrow, and `pe-9`, the room the\n *  {@link FieldChevron} takes. Shared with {@link SelectWidthFloor}. `@internal` */\nexport const SELECT_MENU_DRESS = \"appearance-none pe-9\";\n\n/** The compact Select (`size=\"sm\"`): the field's colours, a toolbar button's height.\n *  `py-0` and a fixed height rather than a smaller padding, so the box is 28px whatever\n *  line height the caller's type brings with it. Shared with {@link SelectWidthFloor}.\n *  `@internal` */\nexport const SELECT_SM = \"h-7 py-0 ps-2 pe-7 text-xs\";\n\n/**\n * The width an UNLABELLED Select needs to show the widest of `values` whole: an invisible,\n * zero-height line under it, in the select's own type, padding, chevron room and border\n * (the same classes), one value per line. Placed beside the Select in the box that sizes\n * it, it holds that box to the widest value, and the `w-full` select fills it. `@internal`\n *\n * Why it takes a sizer (0.51, Kurvenschmiede N5). A `<select>` with a percentage width\n * is a \"compressible\" element: its min-content contribution is ZERO (CSS Sizing 3\n * §5.2.2), so the auto table layout squeezes its column to the header, and beside a\n * `grow` column every other column IS squeezed to its min-content (data-table-fit.ts).\n * The user roster's role select stood 92px and read \"Meml…\" and \"Admi…\" (KS review,\n * 0.49 and 0.50). `min-width: max-content` on the select would hold it instead — but to\n * its widest OPTION, and an unavailable role's option carries its reason (\"Customer (owns\n * work)\", RoleSelect's `optionDisabledReason`): the column would widen for a text that is\n * never the selected value. So the caller says which values can be selected, in the\n * current language.\n */\nexport function SelectWidthFloor({ values, size = \"md\" }: { values: readonly string[]; size?: \"sm\" | \"md\" }) {\n  if (values.length === 0) return null;\n  return (\n    <span\n      aria-hidden\n      data-select-floor=\"\"\n      className={cn(\n        FIELD_BASE,\n        SELECT_MENU_DRESS,\n        size === \"sm\" && SELECT_SM,\n        // The horizontal box only: no height, no vertical padding or border, not painted.\n        \"invisible h-0 overflow-hidden border-y-0 py-0 whitespace-nowrap shadow-none\",\n      )}\n    >\n      {values.map((value, i) => (\n        // The value as generated content, not as text: it is laid out (and so measured)\n        // the same, but a test's `getByText(\"Member\")` still finds the one option, and a\n        // find-in-page or a copied row does not meet a word nobody sees.\n        <span key={i} data-value={value} className=\"block before:content-[attr(data-value)]\" />\n      ))}\n    </span>\n  );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the field's own surface, so no background chip and nothing to mismatch the card.\n//\n// At Large it is a static label ABOVE the field instead (0.33, §10.17): in flow, so it\n// wraps; always in its floated look, since there is no strip to float into and no\n// placeholder to stand in for; no transition, since it never moves.\nconst LABEL_FLOATED_AT_LARGE = \"large:text-caption large:leading-tight large:text-secondary large:transition-none\";\n\nexport const FLOATING_LABEL_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all\",\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n  LABEL_FLOATED_AT_LARGE,\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the end edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48). At Large the row stands\n// above the field, as the label alone does, and nothing at the end edge is under it.\nconst FLOATING_ROW_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all\",\n  \"max-w-[calc(100%-3rem)] text-sm text-placeholder\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_FLOATED_AT_LARGE,\n);\n\n/** The static label's row with its \"?\" at the field's end, in the top strip — and at\n *  Large above the field (LABEL_ABOVE_AT_LARGE). */\nconst STATIC_ROW_CLASS = cn(\n  \"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\",\n  LABEL_ABOVE_AT_LARGE,\n);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport interface FloatingFieldProps extends ComponentPropsWithRef<\"div\"> {\n  htmlFor?: string;\n  label?: ReactNode;\n  staticLabel?: boolean;\n  /** Keep the label in the accessibility tree but out of the layout — what\n   *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n   *  field left would have nothing to float in. */\n  srOnlyLabel?: boolean;\n  /** Something interactive that belongs to the LABEL rather than to the value —\n   *  in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n   *  with the label, so it is centred on the label's line by the layout instead\n   *  of by a hand-tuned `top-…`, and it can never drift when the type changes.\n   *\n   *  It rides an ANIMATED label too, and the two cases place it differently on\n   *  purpose. A static label has a field-wide strip to itself, so the hint sits\n   *  at the far end of it and a long label truncates into the gap. An animated\n   *  one belongs to a control with something at the end edge of the field — a\n   *  calculator, a stepper — so the hint follows the label instead, and it is\n   *  the label that gives way (steering-design feedback #48). */\n  hint?: ReactNode;\n  children: ReactNode;\n}\n\nexport function FloatingField({\n  className,\n  htmlFor,\n  label,\n  staticLabel,\n  srOnlyLabel,\n  hint,\n  children,\n  ...rest\n}: FloatingFieldProps) {\n  const withHint = hint !== undefined && !srOnlyLabel;\n  const atEnd = withHint && staticLabel;\n  // A label drawn over the field: at Large it stands above it instead (0.33, §10.17),\n  // in the first row of this box (LABEL_ABOVE_BOX), though it FOLLOWS the control in\n  // the DOM — `peer-*` reads the input before it.\n  const above = label !== undefined && !srOnlyLabel;\n  const labelEl = label !== undefined && (\n    <label\n      htmlFor={htmlFor}\n      // In the first row at Large, out of LABEL_ABOVE_BOX's rule for the field's parts.\n      data-field-label={above && !withHint ? \"\" : undefined}\n      className={\n        srOnlyLabel\n          ? \"sr-only\"\n          : atEnd\n            ? cn(\"pointer-events-none min-w-0 truncate-until-large\", STATIC_LABEL_TYPE)\n            : withHint\n              ? \"pointer-events-none min-w-0 truncate-until-large\"\n              : staticLabel\n                ? FLOATING_LABEL_STATIC\n                : FLOATING_LABEL_CLASS\n      }\n    >\n      {label}\n    </label>\n  );\n  return (\n    // `relative` is the whole contract of this wrapper — the floating label and every\n    // control that hangs off it (a reveal toggle, a chevron) are positioned against\n    // this box — so it is merged through `cn` after the spread rather than left where\n    // a caller's stray `className` or `style` could unset it. At Large, with a label\n    // above, a grid: the label's row over the field's, the field's parts in the latter.\n    <div {...rest} className={cn(\"relative\", above && LABEL_ABOVE_BOX, className)}>\n      {children}\n      {withHint ? (\n        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at\n        // the field's own end padding instead of running under the chevron.\n        // Animated: the row floats with the label and is only as wide as it needs\n        // to be. Either way the hint keeps its width (`shrink-0`) and the label\n        // is the one that gives way.\n        <div data-field-label=\"\" className={atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS}>\n          {labelEl}\n          <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n        </div>\n      ) : (\n        labelEl\n      )}\n    </div>\n  );\n}\n\nexport interface LabelProps extends ComponentPropsWithRef<\"label\"> {\n  /** Draw the required mark after the text. The mark is `aria-hidden`: what a\n   *  screen reader hears is the control's own `required` / `aria-required`, which\n   *  the caller still sets — a \"star\" read out as the last word of every name is\n   *  noise, and a control that is not marked required is not required however its\n   *  label looks. */\n  required?: boolean;\n  /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */\n  size?: \"sm\" | \"md\";\n  /** Dim the label with its control. A label ABOVE its field is not the field's\n   *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */\n  disabled?: boolean;\n}\n\n/**\n * The label ABOVE a field, for the places a floating label does not fit: a control\n * the kit did not render (a third-party picker, a range slider, a group of radios),\n * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels\n * above its fields throughout.\n *\n * A new component rather than a mode of {@link FieldLabel}, because the two share\n * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a\n * trigger's `relative` box and has to stay exactly that for every dropdown that\n * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,\n * that a click focuses the control through. Spacing below it belongs to the caller's\n * layout (`space-y-1.5` on the pair, typically), as it would for any block.\n */\nexport function Label({ required, size = \"md\", disabled, className, children, ...rest }: LabelProps) {\n  return (\n    <label\n      {...rest}\n      className={cn(\n        \"inline-flex items-center gap-0.5 font-medium leading-none text-primary\",\n        size === \"sm\" ? \"text-xs\" : \"text-sm\",\n        disabled && \"cursor-default opacity-50\",\n        className,\n      )}\n    >\n      {children}\n      {required && (\n        <span aria-hidden className=\"text-danger\">\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\n// The message under a field that is wrong, and the wiring that attaches it — `useFieldError`\n// — lives in field-parts since 0.34, every field's (DUP-8, refactor audit 2026-10).\n\n/**\n * @internal A field and its message as one box.\n *\n * The message cannot go INSIDE the field's own `relative` box. The password reveal\n * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on\n * whatever that box contains — put two lines of message in it and the chevron drifts\n * down out of the field, between the value and the text. So the field keeps its box\n * and this wraps the pair.\n *\n * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,\n * which is what keeps the prop additive: it is exactly the DOM it was before the prop\n * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a\n * caller's flex row. A field that DOES take `error` — the key is passed, whatever its\n * value — is wrapped for as long as it is mounted, message or not (`reserve`).\n *\n * It used to wrap only while a message showed, and that cost the control its\n * identity: a fragment and a `<div>` are different elements at the same spot in the\n * tree, so React threw the `<input>` away and mounted a new one every time the message\n * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled\n * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its\n * \"Wrong password\" on change, so the first keystroke of the retry dropped the user out\n * of the field. Keeping the box stops that; the field is never reparented.\n *\n * The other ways to keep it stable were worse. A box on EVERY field changes what every\n * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the\n * field would land on a child of the item instead of the item). A `display: contents`\n * box would keep the flex/grid item, but a contents box takes no margin, so a parent's\n * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password\n * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves\n * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box\n * whenever its message showed, so what changes is only that it keeps it while none\n * does; every such call site in the three apps sits in a block or a `space-y`/grid\n * stack where a full-width block box is the field's own size. The case it does change\n * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a\n * row): that caller already lost the sizing while a message showed, and now sees the\n * same box without one. Pass `error` only where a message can actually appear.\n *\n * `className` is NOT moved out here, for the same reason — it goes on the field, as it\n * always has, so the box cannot silently change what that prop styles.\n */\nexport function FieldGroup({\n  errorEl,\n  reserve = false,\n  children,\n}: {\n  errorEl: ReactNode;\n  /** The caller passed `error`: keep the box even while there is no message. */\n  reserve?: boolean;\n  children: ReactNode;\n}) {\n  if (errorEl === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {errorEl}\n    </div>\n  );\n}\n\n/** The two names the password reveal toggle can wear. See {@link Input}. */\nexport interface PasswordRevealLabels {\n  /** While the value is hidden — activating the toggle will show it. */\n  show: string;\n  /** While the value is shown. */\n  hide: string;\n}\n\n// Defined in ./field-base-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_REVEAL_LABELS };\n\n/**\n * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.\n * The visible \"12/80\" is digits and a slash and is not translated; these are the words\n * a screen reader gets instead of it.\n */\nexport interface CharacterCountLabels {\n  /** The counter as part of the field's description, read when focus reaches the\n   *  field: \"12 of 80 characters\". */\n  count: (used: number, max: number) => string;\n  /** Said once, politely, on entering the last stretch before the limit: \"8\n   *  characters left\". */\n  remaining: (left: number) => string;\n  /** Said once, politely, on reaching the limit. */\n  limitReached: string;\n}\n\n// Defined in ./field-base-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHARACTER_COUNT_LABELS };\n\n/** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter\n *  and the limit can never disagree about whether a field is full. */\nfunction textLength(value: unknown): number {\n  return value === undefined || value === null ? 0 : String(value).length;\n}\n\n/** @internal The counter's length: the controlled `value`'s, else what the field has been typed\n *  to (from `defaultValue` on). `track` is called from the field's change handler. */\nexport function useTypedLength(value: unknown, defaultValue: unknown) {\n  const [typed, setTyped] = useState(() => textLength(defaultValue));\n  return { used: value !== undefined ? textLength(value) : typed, track: (text: string) => setTyped(text.length) };\n}\n\ntype CountZone = \"ok\" | \"near\" | \"limit\";\n\n/** The last stretch before the limit: a tenth of it, at least 1 and at most 20 — \"8\n *  left\" of 80, and 20 of 2,000 rather than 200, which is not \"near\" in any sense a\n *  person typing means. */\nfunction nearLimitAt(max: number): number {\n  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));\n}\n\nfunction countZone(used: number, max: number): CountZone {\n  if (used >= max) return \"limit\";\n  return max - used <= nearLimitAt(max) ? \"near\" : \"ok\";\n}\n\n/**\n * @internal The live \"12/80\" under a field with `showCount` (keksdose K11: the admin broadcast,\n * support replies, canned replies and the handoff note each counted by hand, and one\n * announced every keystroke).\n *\n * Three channels, each saying only what it should:\n *  - the digits, `aria-hidden` — \"12 slash 80\" is not a sentence;\n *  - a `hidden` \"12 of 80 characters\" on the field's `aria-describedby`, so the count is\n *    read with the field when focus reaches it, and never while typing;\n *  - a polite live region that speaks ONCE per stretch: on entering the last tenth\n *    (\"8 characters left\") and on reaching the limit. A region that changed on every\n *    keystroke would talk over the user's own typing echo for the whole message.\n *    Nothing is said on mount: a stored note already near its limit is not news.\n */\nexport function CharacterCount({\n  id,\n  used,\n  max,\n  labels,\n  caption,\n}: {\n  id: string;\n  used: number;\n  max: number;\n  labels: CharacterCountLabels;\n  caption: ReactNode;\n}) {\n  const zone = countZone(used, max);\n  // What the live region holds, re-set only when the stretch changes — the previous\n  // render's zone kept in state, the pattern React documents for \"adjusting state when\n  // a prop changes\", so the region's text (and so the announcement) changes at most\n  // once per crossing.\n  const [said, setSaid] = useState<{ zone: CountZone; text: string }>({ zone, text: \"\" });\n  if (said.zone !== zone) {\n    setSaid({\n      zone,\n      text: zone === \"near\" ? labels.remaining(max - used) : zone === \"limit\" ? labels.limitReached : \"\",\n    });\n  }\n  return (\n    // `relative` holds the sr-only region (see sr-only-containment.test).\n    <div className=\"relative mt-1 flex items-start gap-2\">\n      <div className=\"min-w-0 flex-1\">{caption}</div>\n      <span\n        aria-hidden\n        className={cn(\n          \"shrink-0 text-caption leading-tight tabular-nums\",\n          zone === \"limit\" ? \"text-danger\" : zone === \"near\" ? \"text-warning\" : \"text-muted\",\n        )}\n      >\n        {used}/{max}\n      </span>\n      <span id={id} hidden>\n        {labels.count(used, max)}\n      </span>\n      <span role=\"status\" className=\"sr-only\">\n        {said.text}\n      </span>\n    </div>\n  );\n}\n\n/** @internal What goes under a text field: the caption (beside the counter, when there is one),\n *  then the error. `null` when there is nothing, so a field with none keeps exactly the\n *  DOM it had (see {@link FieldGroup}). */\nexport function fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode {\n  if (counter === null && hint.captionText === undefined && errorEl === null) return null;\n  return (\n    <>\n      {counter ?? <FieldCaption parts={hint} />}\n      {errorEl}\n    </>\n  );\n}\n\n/**\n * @internal kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has\n * floated out of its way — on focus — and transparent until then, while the label sits\n * where the placeholder would be. Without it the field forced `placeholder=\" \"` for the\n * float trick and dropped the caller's text without a word (kastlan's \"note\" field lost\n * its hint). `:placeholder-shown` still drives the float: it matches an empty field\n * whatever the placeholder's text is.\n */\nexport const FLOATING_PLACEHOLDER_ON_FOCUS = \"focus:placeholder:text-placeholder\";\n\n/** @internal A placeholder with something to show. `\"\"` and blanks are the float trick's own\n *  `\" \"`, never the caller's hint. */\nexport const hasPlaceholderText = (placeholder: string | undefined): placeholder is string =>\n  placeholder !== undefined && placeholder.trim() !== \"\";\n\n/** @internal The counter's words: the `characterCount` namespace — prop > `<UiKitProvider\n *  labels>` > English. One place, so the namespace is named once. */\nexport function useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels {\n  return useKitLabels(\"characterCount\", DEFAULT_CHARACTER_COUNT_LABELS, prop);\n}\n"],"mappings":"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","names":[]}

package/dist/components/field-sync-labels.d.ts

@@ -1,2 +1,3 @@
 import type { FieldSyncLabels } from "./field-sync.js";
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export declare const DEFAULT_FIELD_SYNC_LABELS: FieldSyncLabels;

package/dist/components/field-sync-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-sync-labels.ts"],"sourcesContent":["// The English words of ./field-sync, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./field-sync re-exports them.\n\nimport type { FieldSyncLabels } from \"./field-sync\";\n\nexport const DEFAULT_FIELD_SYNC_LABELS: FieldSyncLabels = {\n  synced: \"Saved\",\n  edited: \"Unsaved changes\",\n  pending: \"Saving…\",\n  error: \"Could not save\",\n  retry: \"Retry\",\n};\n"],"mappings":";AAMO,MAAM,4BAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/components/field-sync-labels.ts"],"sourcesContent":["// The English words of ./field-sync, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./field-sync re-exports them.\n\nimport type { FieldSyncLabels } from \"./field-sync\";\n\n/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */\nexport const DEFAULT_FIELD_SYNC_LABELS: FieldSyncLabels = {\n  synced: \"Saved\",\n  edited: \"Unsaved changes\",\n  pending: \"Saving…\",\n  error: \"Could not save\",\n  retry: \"Retry\",\n};\n"],"mappings":";AAOO,MAAM,4BAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT;","names":[]}

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

@@ -16,8 +16,16 @@ import { DEFAULT_FIELD_SYNC_LABELS } from "./field-sync-labels.js";
  * because the state is useful without the dot — a form can disable its submit
  * button while any field is `pending`, and a router can block navigation while
  * any field is `edited`.
+ *
+ * Deprecated in 0.52 as a whole, removed in 0.53 (decision 4 of the refactor audit
+ * 2026-10-30, MOD-5): no app renders it or calls the hook — 483 lines and a namespace in
+ * seven catalogues that only this package's tests and showcase read. An app that wants
+ * it keeps a copy of this file.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.
  */
 export type FieldSyncState = "synced" | "edited" | "pending" | "error";
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export interface FieldSyncLabels {
     synced: string;
     edited: string;
@@ -27,6 +35,7 @@ export interface FieldSyncLabels {
     retry: string;
 }
 export { DEFAULT_FIELD_SYNC_LABELS };
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export interface UseFieldSyncOptions<T> {
     /** What the database currently holds. Changing it re-seeds a CLEAN field. */
     value: T;
@@ -45,6 +54,7 @@ export interface UseFieldSyncOptions<T> {
     /** Called once per rejected save, with whatever `onSave` threw. */
     onError?: (error: Error) => void;
 }
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export interface UseFieldSyncReturn<T> {
     /** The draft — bind this to the input, not the `value` option. */
     value: T;
@@ -78,8 +88,11 @@ export interface UseFieldSyncReturn<T> {
  *      may be gone — a row scrolled out of a virtualised table, a closed dialog.
  *   4. **`onSave` is read through a ref**, so an inline arrow — which every call
  *      site will pass — does not restart the debounce on every render.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.
  */
 export declare function useFieldSync<T>({ value, onSave, debounceMs, equals, onError, }: UseFieldSyncOptions<T>): UseFieldSyncReturn<T>;
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export interface FieldSyncIndicatorProps {
     state: FieldSyncState;
     /** The failure. Its message becomes the tooltip when `state === "error"`. */
@@ -108,6 +121,8 @@ export interface FieldSyncIndicatorProps {
  * The state is also announced: the wrapper is a polite live region, so a screen
  * reader hears "Saving…" then "Saved" without the user going looking. `error` is
  * assertive instead — a failed write is worth interrupting for.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.
  */
 export declare function FieldSyncIndicator({ state, error, labels, showLabel, onRetry, className, }: FieldSyncIndicatorProps): import("react").JSX.Element;
 /**
@@ -126,10 +141,15 @@ export declare function FieldSyncIndicator({ state, error, labels, showLabel, on
  * colour does not.
  *
  * Every class is a literal so Tailwind's scanner can see it.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.
  */
 export declare const FIELD_SYNC_FRAME: Record<FieldSyncState, string>;
-/** How long the green "saved" frame and check stay after a save lands, in ms. */
+/** How long the green "saved" frame and check stay after a save lands, in ms.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export declare const FIELD_SYNC_SAVED_MS = 1500;
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export interface FieldSyncRowProps<T> extends Omit<FieldSyncIndicatorProps, "state" | "error" | "showLabel"> {
     sync: UseFieldSyncReturn<T>;
     children: ReactNode;
@@ -160,5 +180,7 @@ export interface FieldSyncRowProps<T> extends Omit<FieldSyncIndicatorProps, "sta
  * always in the DOM as a live region — polite for the ordinary states, assertive for
  * a failure. The input gets end padding for the icon whether or not one is showing,
  * so the text never reflows when the state changes.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.
  */
 export declare function FieldSyncRow<T>({ sync, children, className, labels, onRetry, saveOnBlur, savedMs, }: FieldSyncRowProps<T>): import("react").JSX.Element;