@eifi1/ui-kit 0.15.3 → 0.15.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -10
- package/dist/chart.d.ts +50 -1
- package/dist/components/alert-banner.js +1 -1
- package/dist/components/alert-banner.js.map +1 -1
- package/dist/components/amount-input.d.ts +5 -3
- package/dist/components/amount-input.js +6 -11
- package/dist/components/amount-input.js.map +1 -1
- package/dist/components/button-group.d.ts +2 -3
- package/dist/components/calculator.d.ts +2 -3
- package/dist/components/chart.d.ts +16 -1
- package/dist/components/chart.js +65 -37
- package/dist/components/chart.js.map +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/chip.d.ts +8 -2
- package/dist/components/chip.js +12 -3
- package/dist/components/chip.js.map +1 -1
- package/dist/components/choice-card.js +1 -1
- package/dist/components/choice-card.js.map +1 -1
- package/dist/components/copy-button.d.ts +2 -3
- package/dist/components/error-boundary.js +1 -1
- package/dist/components/error-boundary.js.map +1 -1
- package/dist/components/facing-pair.d.ts +50 -0
- package/dist/components/file-button.d.ts +2 -3
- package/dist/components/file-dropzone.d.ts +2 -3
- package/dist/components/file-dropzone.js +1 -1
- package/dist/components/file-dropzone.js.map +1 -1
- package/dist/components/form-actions.d.ts +2 -3
- package/dist/components/form-actions.js +9 -1
- package/dist/components/form-actions.js.map +1 -1
- package/dist/components/money-field.d.ts +2 -3
- package/dist/components/number-field.d.ts +2 -3
- package/dist/components/number-input.d.ts +2 -3
- package/dist/components/number-input.js +17 -3
- package/dist/components/number-input.js.map +1 -1
- package/dist/components/numpad-sheet.d.ts +2 -3
- package/dist/components/series-chart.d.ts +78 -1
- package/dist/components/series-chart.js +74 -13
- package/dist/components/series-chart.js.map +1 -1
- package/dist/components/settings-fields.d.ts +2 -3
- package/dist/components/text-link.d.ts +2 -3
- package/dist/components/time-input.d.ts +2 -3
- package/dist/components/ui.d.ts +2 -3
- package/dist/components/ui.js +7 -7
- package/dist/components/ui.js.map +1 -1
- package/dist/feedback/feedback-attachment.d.ts +2 -82
- package/dist/feedback/feedback-attachment.js +271 -54
- package/dist/feedback/feedback-attachment.js.map +1 -1
- package/dist/feedback/feedback-dialog.d.ts +2 -105
- package/dist/feedback/feedback-dialog.js +56 -25
- package/dist/feedback/feedback-dialog.js.map +1 -1
- package/dist/feedback/feedback-inbox.d.ts +1 -1
- package/dist/feedback/feedback-thread.d.ts +2 -2
- package/dist/feedback-attachment-BYAHJMOr.d.ts +289 -0
- package/dist/feedback.d.ts +1 -2
- package/dist/hooks/use-file-drop.d.ts +2 -3
- package/dist/i18n/defaults.d.ts +2 -3
- package/dist/i18n/kit-labels.d.ts +2 -3
- package/dist/i18n/kit-labels.js +8 -2
- package/dist/i18n/kit-labels.js.map +1 -1
- package/dist/i18n/locales/de-CH-informal.d.ts +2 -3
- package/dist/i18n/locales/de-CH.d.ts +2 -3
- package/dist/i18n/locales/de-informal.d.ts +2 -3
- package/dist/i18n/locales/de.d.ts +2 -3
- package/dist/i18n/locales/de.js +5 -1
- package/dist/i18n/locales/de.js.map +1 -1
- package/dist/i18n/locales/es.d.ts +2 -3
- package/dist/i18n/locales/es.js +5 -1
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.d.ts +2 -3
- package/dist/i18n/locales/fr.js +5 -1
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hu.d.ts +2 -3
- package/dist/i18n/locales/hu.js +5 -1
- package/dist/i18n/locales/hu.js.map +1 -1
- package/dist/i18n/locales/it.d.ts +2 -3
- package/dist/i18n/locales/it.js +5 -1
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/zh.d.ts +2 -3
- package/dist/i18n/locales/zh.js +5 -1
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/index.d.ts +4 -5
- package/dist/{kit-labels-BHfRBbHs.d.ts → kit-labels-BD2F7sOz.d.ts} +15 -5
- package/dist/lib/format.d.ts +15 -1
- package/dist/lib/format.js +16 -0
- package/dist/lib/format.js.map +1 -1
- package/dist/rhf/fields.d.ts +2 -3
- package/dist/rhf/form.d.ts +2 -3
- package/dist/rhf.d.ts +2 -3
- package/dist/shell/app-shell.d.ts +2 -3
- package/dist/shell/top-bar-brand.d.ts +2 -3
- package/dist/shell.d.ts +2 -3
- package/dist/theme/palette-derive.d.ts +3 -0
- package/dist/theme/palette-derive.js +7 -0
- package/dist/theme/palette-derive.js.map +1 -1
- package/dist/wizard/stepper-nav.d.ts +2 -3
- package/dist/wizard.d.ts +2 -3
- package/package.json +4 -2
- package/src/components/alert-banner.tsx +1 -1
- package/src/components/amount-input.tsx +16 -14
- package/src/components/chart.tsx +102 -41
- package/src/components/checkbox.tsx +1 -1
- package/src/components/chip.tsx +29 -4
- package/src/components/choice-card.tsx +1 -1
- package/src/components/error-boundary.tsx +1 -1
- package/src/components/file-dropzone.tsx +1 -1
- package/src/components/form-actions.tsx +9 -1
- package/src/components/number-input.tsx +22 -2
- package/src/components/series-chart.tsx +122 -20
- package/src/components/ui.tsx +7 -7
- package/src/feedback/feedback-attachment.tsx +441 -96
- package/src/feedback/feedback-dialog.tsx +147 -50
- package/src/i18n/kit-labels.tsx +19 -1
- package/src/i18n/locales/de.ts +4 -0
- package/src/i18n/locales/es.ts +4 -0
- package/src/i18n/locales/fr.ts +4 -0
- package/src/i18n/locales/hu.ts +4 -0
- package/src/i18n/locales/it.ts +4 -0
- package/src/i18n/locales/zh.ts +4 -0
- package/src/lib/format.ts +30 -0
- package/src/theme/palette-derive.ts +10 -0
- package/tokens.css +9 -1
|
@@ -1 +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 } from \"../i18n/kit-labels\";\nimport { Button, EmptyState } from \"./ui\";\nimport { CopyButton } from \"./copy-button\";\nimport { Disclosure } from \"./disclosure\";\nimport { documentNavigation } from \"../lib/document-navigation\";\n\n/** The words of the default fallback. */\nexport interface ErrorBoundaryLabels {\n /** The fallback's heading. */\n title: string;\n /** The line under it. */\n message: string;\n /** The button that clears the error and renders the children again. */\n retry: string;\n /** The disclosure that opens the full error report (`showDetails`). */\n details: string;\n /** The button that reloads the whole page (0.13). */\n reload: string;\n /** Heading when a lazy chunk failed to load while online — a deploy replaced the\n * files this page was built from (0.13). */\n updateTitle: string;\n updateMessage: string;\n /** Heading when the browser says it is offline (0.13). */\n offlineTitle: string;\n offlineMessage: string;\n /** The copy button's words: what it copies is the plain-text report (0.13). */\n copyReport: string;\n /** Shown once `onReport` has filed the crash and returned no reference (0.13). */\n reported: string;\n /** Shown once `onReport` has filed the crash under a reference — rendered as the\n * app returned it, so return `\"#123\"` if the hash belongs to it (0.13). */\n reportedAs: (reference: string) => string;\n}\n\nexport const DEFAULT_ERROR_BOUNDARY_LABELS: ErrorBoundaryLabels = {\n title: \"Something went wrong\",\n message: \"This part of the page could not be shown. Try again, or reload the page.\",\n retry: \"Try again\",\n details: \"Error details\",\n reload: \"Reload\",\n updateTitle: \"A new version is available\",\n updateMessage: \"Part of the app has changed since this page was loaded. Reload to get the new version.\",\n offlineTitle: \"You’re offline\",\n offlineMessage: \"This page could not be loaded without a connection. Reconnect, then reload the page.\",\n copyReport: \"Copy error report\",\n reported: \"This error has been reported automatically.\",\n reportedAs: (reference) => `Reported as ${reference}`,\n};\n\n/**\n * What was thrown, as flat strings, read ONCE when it arrives.\n *\n * React stores whatever was thrown, hostile or not — `throw { get message() { throw … } }`,\n * `throw { name: Symbol() }`, `throw undefined` — and reading one of those during the\n * fallback's own render would throw INSIDE the boundary, escalating to the next one up\n * (keksdose's error-boundary.tsx learned this as feedback #160: at the app level there is\n * none, and the result is the white screen the boundary exists to prevent).\n */\nexport interface ErrorBoundaryDetails {\n name: string;\n message: string;\n stack?: string;\n}\n\nfunction read(get: () => unknown): string | undefined {\n try {\n const v = get();\n return typeof v === \"string\" ? v : v === undefined || v === null ? undefined : String(v);\n } catch {\n return undefined;\n }\n}\n\n/** `JSON.stringify` that never throws (a cycle, a BigInt, a hostile getter) and never\n * returns more than 500 characters. \"\" when there is nothing to say. */\nfunction safeJson(value: unknown): string {\n try {\n const json = JSON.stringify(value);\n if (!json || json === \"{}\") return \"\";\n return json.length > 500 ? `${json.slice(0, 499)}…` : json;\n } catch {\n return \"\";\n }\n}\n\n/** {@link ErrorBoundaryDetails} of any thrown value, without ever throwing. */\nexport function describeThrown(error: unknown): ErrorBoundaryDetails {\n if (typeof error === \"object\" && error !== null) {\n const e = error as { name?: unknown; message?: unknown; stack?: unknown };\n const message = read(() => e.message) ?? \"\";\n return {\n name: read(() => e.name) ?? \"Error\",\n // `throw { code: 500 }` has no message, and an empty line leaves crash triage with\n // nothing (keksdose G3a; its old reporter filed `{\"code\":500}`). Such a value is\n // quoted as JSON instead, capped, and never at the cost of a throw.\n message: message || (error instanceof Error ? \"\" : safeJson(error)),\n stack: read(() => e.stack),\n };\n }\n return { name: \"Error\", message: read(() => error) ?? \"\" };\n}\n\n/**\n * Is this a failed lazy import — a route chunk that did not arrive?\n *\n * Two causes, and neither is a bug in the page: the device is offline and the chunk was\n * never cached, or a deploy replaced the hashed files the running page still points at.\n * Both are cured by a reload and by nothing else — `React.lazy` caches the rejected\n * import, so Try again re-throws the same error without fetching. The patterns are\n * keksdose's (crash-report.ts), which covers Vite (\"dynamically imported module\",\n * \"module script failed\"), webpack (\"ChunkLoadError\", \"Loading chunk\") and the bare\n * `fetch` failure a service worker hands back.\n *\n * Never throws: it runs inside the fallback's own render, where a throw is a white\n * screen. An error it cannot read is not a chunk failure.\n */\nexport function isChunkLoadError(\n error: { name?: string | null; message?: string | null } | null | undefined,\n): boolean {\n try {\n const s = `${error?.name ?? \"\"} ${error?.message ?? \"\"}`;\n return /ChunkLoadError|dynamically imported module|module script failed|Loading chunk|Failed to fetch/i.test(s);\n } catch {\n return false;\n }\n}\n\n/**\n * Everything a crash report carries, read once when the boundary catches.\n *\n * Plain strings only, so it survives `JSON.stringify` into an app's crash endpoint as is\n * and {@link formatCrashReport} can print it without a single guard. The wording of the\n * printed report is English on purpose: it is read by whoever fixes the bug, not by the\n * user who copies it, and a report in nine languages cannot be searched.\n */\nexport interface CrashReport {\n /** The thrown value's `name` (\"TypeError\"), \"Error\" for a non-object. */\n name: string;\n message: string;\n stack?: string;\n /** React's component stack from `componentDidCatch` — the part that names the\n * component, which a minified JS stack no longer does. */\n componentStack?: string;\n /** `pathname + search` at the moment of the crash. The search may carry what the\n * user typed — see `redact`. */\n page: string;\n /** ISO 8601, UTC. */\n time: string;\n userAgent: string;\n /** The boundary's `appVersion` prop. */\n appVersion?: string;\n /** 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?: Partial<ErrorBoundaryLabels>;\n}\n\ntype FilingState = \"none\" | \"pending\" | \"filed\" | \"failed\";\n\ninterface ErrorBoundaryState {\n /** A flag of its own, so `throw undefined` is still an error shown. */\n failed: boolean;\n error: unknown;\n details: ErrorBoundaryDetails | null;\n report: CrashReport | null;\n filing: FilingState;\n reference: string | undefined;\n}\n\nconst CLEAR: ErrorBoundaryState = {\n failed: false,\n error: null,\n details: null,\n report: null,\n filing: \"none\",\n reference: undefined,\n};\n\nfunction keysChanged(a: ReadonlyArray<unknown> | undefined, b: ReadonlyArray<unknown> | undefined): boolean {\n if (a === b) return false;\n if (!a || !b || a.length !== b.length) return true;\n return a.some((v, i) => !Object.is(v, b[i]));\n}\n\nfunction currentPage(): { page: string; path: string } {\n try {\n const { pathname, search } = window.location;\n return { page: `${pathname}${search}`, path: pathname };\n } catch {\n return { page: \"\", path: \"\" };\n }\n}\n\nfunction buildReport(details: ErrorBoundaryDetails, componentStack: string | undefined, props: ErrorBoundaryProps): CrashReport {\n const { page, path } = currentPage();\n const extras: Record<string, string> = {};\n try {\n const more = props.reportExtras?.();\n if (more) for (const [k, v] of Object.entries(more)) extras[k] = String(v);\n } catch {\n /* documented: the lines are left out */\n }\n let userAgent = \"\";\n let online: boolean | undefined;\n try {\n userAgent = navigator.userAgent;\n online = typeof navigator.onLine === \"boolean\" ? navigator.onLine : undefined;\n } catch {\n /* no navigator (SSR, a worker test) */\n }\n const report: CrashReport = {\n name: details.name,\n message: details.message,\n stack: details.stack,\n componentStack: componentStack ?? undefined,\n page,\n time: new Date().toISOString(),\n userAgent,\n appVersion: props.appVersion,\n 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?: Partial<ErrorBoundaryLabels>;\n}) {\n const text = useKitLabels(\"errorBoundary\", DEFAULT_ERROR_BOUNDARY_LABELS, labels);\n const chunk = isChunkLoadError(details);\n // Offline first, as keksdose has it: offline, a chunk failure is the connection, and\n // any other crash most likely a request that could not be made — either way \"reload\n // once you are back\" is the advice, and \"a new version\" would be a false one.\n const mode = isOffline() ? \"offline\" : chunk ? \"update\" : \"error\";\n const title = mode === \"offline\" ? text.offlineTitle : mode === \"update\" ? text.updateTitle : text.title;\n const hint = mode === \"offline\" ? text.offlineMessage : mode === \"update\" ? text.updateMessage : text.message;\n const Icon = mode === \"offline\" ? WifiOff : mode === \"update\" ? RefreshCw : AlertTriangle;\n const reportText = report ? formatCrashReport(report) : null;\n const errorLine = details.message ? `${details.name}: ${details.message}` : details.name;\n\n const reloadButton = (\n <Button key=\"reload\" variant={mode === \"error\" ? \"secondary\" : \"primary\"} onClick={reloadPage}>\n {text.reload}\n </Button>\n );\n // Not after a chunk failure: `React.lazy` keeps the rejected import, so Try again\n // could only throw the same error again.\n const retryButton = chunk ? null : (\n <Button key=\"retry\" variant={mode === \"error\" ? \"primary\" : \"secondary\"} onClick={reset}>\n {text.retry}\n </Button>\n );\n\n return (\n <EmptyState\n role=\"alert\"\n tone={mode === \"error\" ? \"danger\" : undefined}\n headingAs={headingAs}\n className={className}\n icon={<Icon />}\n title={title}\n hint={hint}\n action={\n <>\n {showMessage && mode === \"error\" && (\n // A quotation, not prose: left-aligned and monospaced, so it reads as the\n // program's words and can be read out or screenshotted verbatim.\n <p\n data-error-message=\"\"\n className=\"-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-[var(--danger-border)] bg-[var(--danger-bg)] px-3 py-2 text-start font-mono text-xs text-[var(--text-primary)]\"\n >\n {errorLine}\n </p>\n )}\n {filing === \"filed\" && (\n <p className=\"-mt-1 mb-1 basis-full text-xs\">\n {reference ? text.reportedAs(reference) : text.reported}\n </p>\n )}\n {mode === \"error\" ? [retryButton, reloadButton] : [reloadButton, retryButton]}\n {copyReport && reportText !== null && filing !== \"filed\" && (\n <CopyButton variant=\"label\" buttonVariant=\"ghost\" label={text.copyReport} text={reportText} />\n )}\n {actions}\n {showDetails && reportText !== null && (\n <Disclosure variant=\"bare\" title={text.details} className=\"basis-full text-start\">\n <pre className=\"max-h-60 overflow-auto whitespace-pre-wrap break-words text-xs text-[var(--text-secondary)]\">\n {reportText}\n </pre>\n </Disclosure>\n )}\n </>\n }\n />\n );\n}\n"],"mappings":"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","names":[]}
|
|
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 } from \"../i18n/kit-labels\";\nimport { Button, EmptyState } from \"./ui\";\nimport { CopyButton } from \"./copy-button\";\nimport { Disclosure } from \"./disclosure\";\nimport { documentNavigation } from \"../lib/document-navigation\";\n\n/** The words of the default fallback. */\nexport interface ErrorBoundaryLabels {\n /** The fallback's heading. */\n title: string;\n /** The line under it. */\n message: string;\n /** The button that clears the error and renders the children again. */\n retry: string;\n /** The disclosure that opens the full error report (`showDetails`). */\n details: string;\n /** The button that reloads the whole page (0.13). */\n reload: string;\n /** Heading when a lazy chunk failed to load while online — a deploy replaced the\n * files this page was built from (0.13). */\n updateTitle: string;\n updateMessage: string;\n /** Heading when the browser says it is offline (0.13). */\n offlineTitle: string;\n offlineMessage: string;\n /** The copy button's words: what it copies is the plain-text report (0.13). */\n copyReport: string;\n /** Shown once `onReport` has filed the crash and returned no reference (0.13). */\n reported: string;\n /** Shown once `onReport` has filed the crash under a reference — rendered as the\n * app returned it, so return `\"#123\"` if the hash belongs to it (0.13). */\n reportedAs: (reference: string) => string;\n}\n\nexport const DEFAULT_ERROR_BOUNDARY_LABELS: ErrorBoundaryLabels = {\n title: \"Something went wrong\",\n message: \"This part of the page could not be shown. Try again, or reload the page.\",\n retry: \"Try again\",\n details: \"Error details\",\n reload: \"Reload\",\n updateTitle: \"A new version is available\",\n updateMessage: \"Part of the app has changed since this page was loaded. Reload to get the new version.\",\n offlineTitle: \"You’re offline\",\n offlineMessage: \"This page could not be loaded without a connection. Reconnect, then reload the page.\",\n copyReport: \"Copy error report\",\n reported: \"This error has been reported automatically.\",\n reportedAs: (reference) => `Reported as ${reference}`,\n};\n\n/**\n * What was thrown, as flat strings, read ONCE when it arrives.\n *\n * React stores whatever was thrown, hostile or not — `throw { get message() { throw … } }`,\n * `throw { name: Symbol() }`, `throw undefined` — and reading one of those during the\n * fallback's own render would throw INSIDE the boundary, escalating to the next one up\n * (keksdose's error-boundary.tsx learned this as feedback #160: at the app level there is\n * none, and the result is the white screen the boundary exists to prevent).\n */\nexport interface ErrorBoundaryDetails {\n name: string;\n message: string;\n stack?: string;\n}\n\nfunction read(get: () => unknown): string | undefined {\n try {\n const v = get();\n return typeof v === \"string\" ? v : v === undefined || v === null ? undefined : String(v);\n } catch {\n return undefined;\n }\n}\n\n/** `JSON.stringify` that never throws (a cycle, a BigInt, a hostile getter) and never\n * returns more than 500 characters. \"\" when there is nothing to say. */\nfunction safeJson(value: unknown): string {\n try {\n const json = JSON.stringify(value);\n if (!json || json === \"{}\") return \"\";\n return json.length > 500 ? `${json.slice(0, 499)}…` : json;\n } catch {\n return \"\";\n }\n}\n\n/** {@link ErrorBoundaryDetails} of any thrown value, without ever throwing. */\nexport function describeThrown(error: unknown): ErrorBoundaryDetails {\n if (typeof error === \"object\" && error !== null) {\n const e = error as { name?: unknown; message?: unknown; stack?: unknown };\n const message = read(() => e.message) ?? \"\";\n return {\n name: read(() => e.name) ?? \"Error\",\n // `throw { code: 500 }` has no message, and an empty line leaves crash triage with\n // nothing (keksdose G3a; its old reporter filed `{\"code\":500}`). Such a value is\n // quoted as JSON instead, capped, and never at the cost of a throw.\n message: message || (error instanceof Error ? \"\" : safeJson(error)),\n stack: read(() => e.stack),\n };\n }\n return { name: \"Error\", message: read(() => error) ?? \"\" };\n}\n\n/**\n * Is this a failed lazy import — a route chunk that did not arrive?\n *\n * Two causes, and neither is a bug in the page: the device is offline and the chunk was\n * never cached, or a deploy replaced the hashed files the running page still points at.\n * Both are cured by a reload and by nothing else — `React.lazy` caches the rejected\n * import, so Try again re-throws the same error without fetching. The patterns are\n * keksdose's (crash-report.ts), which covers Vite (\"dynamically imported module\",\n * \"module script failed\"), webpack (\"ChunkLoadError\", \"Loading chunk\") and the bare\n * `fetch` failure a service worker hands back.\n *\n * Never throws: it runs inside the fallback's own render, where a throw is a white\n * screen. An error it cannot read is not a chunk failure.\n */\nexport function isChunkLoadError(\n error: { name?: string | null; message?: string | null } | null | undefined,\n): boolean {\n try {\n const s = `${error?.name ?? \"\"} ${error?.message ?? \"\"}`;\n return /ChunkLoadError|dynamically imported module|module script failed|Loading chunk|Failed to fetch/i.test(s);\n } catch {\n return false;\n }\n}\n\n/**\n * Everything a crash report carries, read once when the boundary catches.\n *\n * Plain strings only, so it survives `JSON.stringify` into an app's crash endpoint as is\n * and {@link formatCrashReport} can print it without a single guard. The wording of the\n * printed report is English on purpose: it is read by whoever fixes the bug, not by the\n * user who copies it, and a report in nine languages cannot be searched.\n */\nexport interface CrashReport {\n /** The thrown value's `name` (\"TypeError\"), \"Error\" for a non-object. */\n name: string;\n message: string;\n stack?: string;\n /** React's component stack from `componentDidCatch` — the part that names the\n * component, which a minified JS stack no longer does. */\n componentStack?: string;\n /** `pathname + search` at the moment of the crash. The search may carry what the\n * user typed — see `redact`. */\n page: string;\n /** ISO 8601, UTC. */\n time: string;\n userAgent: string;\n /** The boundary's `appVersion` prop. */\n appVersion?: string;\n /** 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?: Partial<ErrorBoundaryLabels>;\n}\n\ntype FilingState = \"none\" | \"pending\" | \"filed\" | \"failed\";\n\ninterface ErrorBoundaryState {\n /** A flag of its own, so `throw undefined` is still an error shown. */\n failed: boolean;\n error: unknown;\n details: ErrorBoundaryDetails | null;\n report: CrashReport | null;\n filing: FilingState;\n reference: string | undefined;\n}\n\nconst CLEAR: ErrorBoundaryState = {\n failed: false,\n error: null,\n details: null,\n report: null,\n filing: \"none\",\n reference: undefined,\n};\n\nfunction keysChanged(a: ReadonlyArray<unknown> | undefined, b: ReadonlyArray<unknown> | undefined): boolean {\n if (a === b) return false;\n if (!a || !b || a.length !== b.length) return true;\n return a.some((v, i) => !Object.is(v, b[i]));\n}\n\nfunction currentPage(): { page: string; path: string } {\n try {\n const { pathname, search } = window.location;\n return { page: `${pathname}${search}`, path: pathname };\n } catch {\n return { page: \"\", path: \"\" };\n }\n}\n\nfunction buildReport(details: ErrorBoundaryDetails, componentStack: string | undefined, props: ErrorBoundaryProps): CrashReport {\n const { page, path } = currentPage();\n const extras: Record<string, string> = {};\n try {\n const more = props.reportExtras?.();\n if (more) for (const [k, v] of Object.entries(more)) extras[k] = String(v);\n } catch {\n /* documented: the lines are left out */\n }\n let userAgent = \"\";\n let online: boolean | undefined;\n try {\n userAgent = navigator.userAgent;\n online = typeof navigator.onLine === \"boolean\" ? navigator.onLine : undefined;\n } catch {\n /* no navigator (SSR, a worker test) */\n }\n const report: CrashReport = {\n name: details.name,\n message: details.message,\n stack: details.stack,\n componentStack: componentStack ?? undefined,\n page,\n time: new Date().toISOString(),\n userAgent,\n appVersion: props.appVersion,\n 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?: Partial<ErrorBoundaryLabels>;\n}) {\n const text = useKitLabels(\"errorBoundary\", DEFAULT_ERROR_BOUNDARY_LABELS, labels);\n const chunk = isChunkLoadError(details);\n // Offline first, as keksdose has it: offline, a chunk failure is the connection, and\n // any other crash most likely a request that could not be made — either way \"reload\n // once you are back\" is the advice, and \"a new version\" would be a false one.\n const mode = isOffline() ? \"offline\" : chunk ? \"update\" : \"error\";\n const title = mode === \"offline\" ? text.offlineTitle : mode === \"update\" ? text.updateTitle : text.title;\n const hint = mode === \"offline\" ? text.offlineMessage : mode === \"update\" ? text.updateMessage : text.message;\n const Icon = mode === \"offline\" ? WifiOff : mode === \"update\" ? RefreshCw : AlertTriangle;\n const reportText = report ? formatCrashReport(report) : null;\n const errorLine = details.message ? `${details.name}: ${details.message}` : details.name;\n\n const reloadButton = (\n <Button key=\"reload\" variant={mode === \"error\" ? \"secondary\" : \"primary\"} onClick={reloadPage}>\n {text.reload}\n </Button>\n );\n // Not after a chunk failure: `React.lazy` keeps the rejected import, so Try again\n // could only throw the same error again.\n const retryButton = chunk ? null : (\n <Button key=\"retry\" variant={mode === \"error\" ? \"primary\" : \"secondary\"} onClick={reset}>\n {text.retry}\n </Button>\n );\n\n return (\n <EmptyState\n role=\"alert\"\n tone={mode === \"error\" ? \"danger\" : undefined}\n headingAs={headingAs}\n className={className}\n icon={<Icon />}\n title={title}\n hint={hint}\n action={\n <>\n {showMessage && mode === \"error\" && (\n // A quotation, not prose: left-aligned and monospaced, so it reads as the\n // program's words and can be read out or screenshotted verbatim.\n <p\n data-error-message=\"\"\n className=\"-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-[var(--danger-border-strong)] bg-[var(--danger-bg)] px-3 py-2 text-start font-mono text-xs text-[var(--text-primary)]\"\n >\n {errorLine}\n </p>\n )}\n {filing === \"filed\" && (\n <p className=\"-mt-1 mb-1 basis-full text-xs\">\n {reference ? text.reportedAs(reference) : text.reported}\n </p>\n )}\n {mode === \"error\" ? [retryButton, reloadButton] : [reloadButton, retryButton]}\n {copyReport && reportText !== null && filing !== \"filed\" && (\n <CopyButton variant=\"label\" buttonVariant=\"ghost\" label={text.copyReport} text={reportText} />\n )}\n {actions}\n {showDetails && reportText !== null && (\n <Disclosure variant=\"bare\" title={text.details} className=\"basis-full text-start\">\n <pre className=\"max-h-60 overflow-auto whitespace-pre-wrap break-words text-xs text-[var(--text-secondary)]\">\n {reportText}\n </pre>\n </Disclosure>\n )}\n </>\n }\n />\n );\n}\n"],"mappings":";AA8iBM,SAgFE,UAhFF,KAgFE,YAhFF;AA9iBN,SAAS,iBAAiB;AAE1B,SAAS,eAAe,WAAW,eAAe;AAClD,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,kBAAkB;AACnC,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,0BAA0B;AA8B5B,MAAM,gCAAqD;AAAA,EAChE,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,eAAe;AAAA,EACf,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY,CAAC,cAAc,eAAe,SAAS;AACrD;AAiBA,SAAS,KAAK,KAAwC;AACpD,MAAI;AACF,UAAM,IAAI,IAAI;AACd,WAAO,OAAO,MAAM,WAAW,IAAI,MAAM,UAAa,MAAM,OAAO,SAAY,OAAO,CAAC;AAAA,EACzF,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAIA,SAAS,SAAS,OAAwB;AACxC,MAAI;AACF,UAAM,OAAO,KAAK,UAAU,KAAK;AACjC,QAAI,CAAC,QAAQ,SAAS,KAAM,QAAO;AACnC,WAAO,KAAK,SAAS,MAAM,GAAG,KAAK,MAAM,GAAG,GAAG,CAAC,WAAM;AAAA,EACxD,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAGO,SAAS,eAAe,OAAsC;AACnE,MAAI,OAAO,UAAU,YAAY,UAAU,MAAM;AAC/C,UAAM,IAAI;AACV,UAAM,UAAU,KAAK,MAAM,EAAE,OAAO,KAAK;AACzC,WAAO;AAAA,MACL,MAAM,KAAK,MAAM,EAAE,IAAI,KAAK;AAAA;AAAA;AAAA;AAAA,MAI5B,SAAS,YAAY,iBAAiB,QAAQ,KAAK,SAAS,KAAK;AAAA,MACjE,OAAO,KAAK,MAAM,EAAE,KAAK;AAAA,IAC3B;AAAA,EACF;AACA,SAAO,EAAE,MAAM,SAAS,SAAS,KAAK,MAAM,KAAK,KAAK,GAAG;AAC3D;AAgBO,SAAS,iBACd,OACS;AACT,MAAI;AACF,UAAM,IAAI,GAAG,OAAO,QAAQ,EAAE,IAAI,OAAO,WAAW,EAAE;AACtD,WAAO,iGAAiG,KAAK,CAAC;AAAA,EAChH,QAAQ;AACN,WAAO;AAAA,EACT;AACF;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,YAAY,SAA+B,gBAAoC,OAAwC;AAC9H,QAAM,EAAE,MAAM,KAAK,IAAI,YAAY;AACnC,QAAM,SAAiC,CAAC;AACxC,MAAI;AACF,UAAM,OAAO,MAAM,eAAe;AAClC,QAAI,KAAM,YAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,IAAI,EAAG,QAAO,CAAC,IAAI,OAAO,CAAC;AAAA,EAC3E,QAAQ;AAAA,EAER;AACA,MAAI,YAAY;AAChB,MAAI;AACJ,MAAI;AACF,gBAAY,UAAU;AACtB,aAAS,OAAO,UAAU,WAAW,YAAY,UAAU,SAAS;AAAA,EACtE,QAAQ;AAAA,EAER;AACA,QAAM,SAAsB;AAAA,IAC1B,MAAM,QAAQ;AAAA,IACd,SAAS,QAAQ;AAAA,IACjB,OAAO,QAAQ;AAAA,IACf,gBAAgB,kBAAkB;AAAA,IAClC;AAAA,IACA,OAAM,oBAAI,KAAK,GAAE,YAAY;AAAA,IAC7B;AAAA,IACA,YAAY,MAAM;AAAA,IAClB,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,iCACV,sBAAY,KAAK,WAAW,SAAS,IAAI,KAAK,UACjD;AAAA,QAED,SAAS,UAAU,CAAC,aAAa,YAAY,IAAI,CAAC,cAAc,WAAW;AAAA,QAC3E,cAAc,eAAe,QAAQ,WAAW,WAC/C,oBAAC,cAAW,SAAQ,SAAQ,eAAc,SAAQ,OAAO,KAAK,YAAY,MAAM,YAAY;AAAA,QAE7F;AAAA,QACA,eAAe,eAAe,QAC7B,oBAAC,cAAW,SAAQ,QAAO,OAAO,KAAK,SAAS,WAAU,yBACxD,8BAAC,SAAI,WAAU,+FACZ,sBACH,GACF;AAAA,SAEJ;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
|
@@ -6,6 +6,56 @@ import './series-chart-labels.js';
|
|
|
6
6
|
import './toggle-legend.js';
|
|
7
7
|
import './series-chart-ticks.js';
|
|
8
8
|
import './series-chart-budget.js';
|
|
9
|
+
import '../kit-labels-BD2F7sOz.js';
|
|
10
|
+
import './data-table-labels.js';
|
|
11
|
+
import './mini-calendar.js';
|
|
12
|
+
import './calendar-heatmap.js';
|
|
13
|
+
import './popover.js';
|
|
14
|
+
import './chip.js';
|
|
15
|
+
import 'lucide-react';
|
|
16
|
+
import './field-sync.js';
|
|
17
|
+
import './tooltip.js';
|
|
18
|
+
import '../hooks/use-anchored-rect.js';
|
|
19
|
+
import '../lib/clipping.js';
|
|
20
|
+
import '../wizard/types.js';
|
|
21
|
+
import '../tour/tour.js';
|
|
22
|
+
import '../search/command-palette.js';
|
|
23
|
+
import '../search/global-search.js';
|
|
24
|
+
import '../search/search-index.js';
|
|
25
|
+
import './month-picker.js';
|
|
26
|
+
import './page-contents.js';
|
|
27
|
+
import './pie-chart-labels.js';
|
|
28
|
+
import './sparkline.js';
|
|
29
|
+
import './stat-tile.js';
|
|
30
|
+
import './signature-pad.js';
|
|
31
|
+
import './password-strength.js';
|
|
32
|
+
import './danger-confirm.js';
|
|
33
|
+
import './swatch-picker.js';
|
|
34
|
+
import './tile-radio.js';
|
|
35
|
+
import './icon-picker.js';
|
|
36
|
+
import './dialog-frame.js';
|
|
37
|
+
import './modal.js';
|
|
38
|
+
import '../hooks/use-search-param-state.js';
|
|
39
|
+
import './measured-grid.js';
|
|
40
|
+
import '../feedback-attachment-BYAHJMOr.js';
|
|
41
|
+
import '../feedback/feedback-thread.js';
|
|
42
|
+
import '../feedback/feedback-inbox.js';
|
|
43
|
+
import './account-settings-labels.js';
|
|
44
|
+
import './confirm-dialog.js';
|
|
45
|
+
import './floating-panel.js';
|
|
46
|
+
import './bulk-action-bar.js';
|
|
47
|
+
import './list.js';
|
|
48
|
+
import './breadcrumbs.js';
|
|
49
|
+
import './toast.js';
|
|
50
|
+
import './description-list.js';
|
|
51
|
+
import './line-items.js';
|
|
52
|
+
import './progress-bar.js';
|
|
53
|
+
import './signed-amount.js';
|
|
54
|
+
import './error-boundary.js';
|
|
55
|
+
import './authed-image.js';
|
|
56
|
+
import '../hooks/use-authed-src.js';
|
|
57
|
+
import './image-grid.js';
|
|
58
|
+
import './lightbox.js';
|
|
9
59
|
|
|
10
60
|
/** Which chart of a facing pair. Physical, like the axes: charts do not mirror in RTL. */
|
|
11
61
|
type FacingSide = "left" | "right";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
export {
|
|
2
|
+
export { N as DEFAULT_FILE_PICKER_LABELS, ab as FileButton, ac as FileButtonProps, bc as FilePickHandler, ae as FilePickerLabels, af as FileRejection, ag as FileRejectionReason, ah as FileScreenOptions, aZ as UseFilePickerOptions, a_ as UseFilePickerReturn, bd as formatAccept, be as judgePick, b1 as matchesAccept, bf as screenFiles, bg as summariseRejections, b4 as useFilePicker } from '../kit-labels-BD2F7sOz.js';
|
|
3
3
|
import './data-table-labels.js';
|
|
4
4
|
import './mini-calendar.js';
|
|
5
5
|
import './calendar-heatmap.js';
|
|
@@ -31,8 +31,7 @@ import './dialog-frame.js';
|
|
|
31
31
|
import './modal.js';
|
|
32
32
|
import '../hooks/use-search-param-state.js';
|
|
33
33
|
import './measured-grid.js';
|
|
34
|
-
import '../feedback
|
|
35
|
-
import '../feedback/feedback-dialog.js';
|
|
34
|
+
import '../feedback-attachment-BYAHJMOr.js';
|
|
36
35
|
import '../feedback/feedback-thread.js';
|
|
37
36
|
import '../feedback/feedback-inbox.js';
|
|
38
37
|
import './account-settings-labels.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { af as FileRejection, bc as FilePickHandler, ae as FilePickerLabels } from '../kit-labels-BD2F7sOz.js';
|
|
4
4
|
import './data-table-labels.js';
|
|
5
5
|
import './mini-calendar.js';
|
|
6
6
|
import './calendar-heatmap.js';
|
|
@@ -32,8 +32,7 @@ import './dialog-frame.js';
|
|
|
32
32
|
import './modal.js';
|
|
33
33
|
import '../hooks/use-search-param-state.js';
|
|
34
34
|
import './measured-grid.js';
|
|
35
|
-
import '../feedback
|
|
36
|
-
import '../feedback/feedback-dialog.js';
|
|
35
|
+
import '../feedback-attachment-BYAHJMOr.js';
|
|
37
36
|
import '../feedback/feedback-thread.js';
|
|
38
37
|
import '../feedback/feedback-inbox.js';
|
|
39
38
|
import './account-settings-labels.js';
|
|
@@ -147,7 +147,7 @@ function FileDropzone({
|
|
|
147
147
|
// danger border until the next good pick.
|
|
148
148
|
// Inert zones keep the resting hairline and lose the hover pull: a border that
|
|
149
149
|
// answers the pointer promises a drop the zone will refuse.
|
|
150
|
-
disabled ? "cursor-not-allowed border-[var(--border)] opacity-60" : busy ? "cursor-progress border-[var(--border)]" : dragOver ? "cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]" : showError ? "cursor-pointer border-[var(--danger-border)]" : "cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]",
|
|
150
|
+
disabled ? "cursor-not-allowed border-[var(--border)] opacity-60" : busy ? "cursor-progress border-[var(--border)]" : dragOver ? "cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]" : showError ? "cursor-pointer border-[var(--danger-border-strong)]" : "cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]",
|
|
151
151
|
className
|
|
152
152
|
),
|
|
153
153
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { Upload, X } from \"lucide-react\";\nimport { Button, IconButton, Spinner } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n DEFAULT_FILE_PICKER_LABELS,\n formatAccept,\n judgePick,\n screenFiles,\n summariseRejections,\n} from \"./file-button\";\nimport type { FilePickHandler, FilePickerLabels, FileRejection } from \"./file-button\";\nimport { useDragTarget } from \"../hooks/use-file-drop\";\nimport { toast } from \"./toast\";\n\n/**\n * Where a refused file's message goes.\n *\n * - `\"toast\"` — a `sonner` toast (the 0.5 behaviour, kept as the default for a caller\n * that handles nothing itself so no existing dropzone goes quiet on upgrade).\n * - `\"inline\"` — under the drop target, in the danger colour, tied to it with\n * `aria-describedby` (plus `data-invalid` for styling), and spoken through a live\n * region. Cleared by the next accepted pick.\n * - `\"none\"` — nothing visible; the caller shows it from `onReject` / `onInvalid`.\n * Still spoken, so a host rendering it should not ALSO make it `role=\"alert\"`.\n */\nexport type FileDropzoneRejectionFeedback = \"toast\" | \"inline\" | \"none\";\n\n/** What a custom {@link FileDropzoneProps.renderBody} is handed. */\nexport interface FileDropzoneState {\n /** A file drag is over the zone right now. */\n dragOver: boolean;\n disabled: boolean;\n busy: boolean;\n /** What is chosen: `files` in multiple mode, `[file]` or `[]` in single mode. */\n files: readonly File[];\n /** The inline refusal, when `rejectionFeedback=\"inline\"` has one to show. */\n error: string | null;\n /** Open the system picker — for a body that brings its own trigger (a second\n * \"Take photo\" button). Does nothing while `disabled` or `busy`. */\n open: () => void;\n /** The resolved `filePicker` strings, so a custom body speaks the same language. */\n labels: FilePickerLabels;\n}\n\n/**\n * `onInvalid` is omitted from the `<div>` attributes and kept as this component's own.\n * The DOM event of that name belongs to form validation and takes a `FormEvent`; this\n * one takes the rejected `File`, and the kit's meaning is the one every caller already\n * writes. Everything else a `<div>` takes reaches the root — which carries\n * `role=\"group\"` named by `dropLabel`, so that is also where an `aria-label` or an\n * `aria-describedby` belongs.\n *\n * Two modes. SINGLE (the default, and all of 0.5): `file` + `onFileSelected`. MULTIPLE\n * (`multiple`): `files` + `onFilesSelected`. They are optional rather than a union so\n * `FileDropzoneProps` stays an interface a caller can extend; a single-mode pick also\n * reaches `onFilesSelected` as a one-element array, so one handler can serve both.\n */\nexport interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onInvalid\"> {\n /** Single mode: the chosen file, echoed with its size. */\n file?: File | null;\n /** Single mode: called with the accepted file. */\n onFileSelected?: (file: File) => void;\n /** Take several files per pick or drop. Without it a drop of several keeps the first. */\n multiple?: boolean;\n /** Multiple mode: the chosen files, listed in the zone. */\n files?: readonly File[];\n /** Every accepted file of one pick, in order. Never called with an empty array. */\n onFilesSelected?: (files: File[]) => void;\n /**\n * Show a remove button inside the zone once something is chosen (kastlan asked for\n * it: the only way to un-choose a file was to reload). Single mode: removes the file.\n * Multiple mode: a \"remove all\" button. The host clears its own state here — the\n * zone is controlled. Focus moves to the Browse button, and the removal is announced.\n */\n onClear?: () => void;\n /** Multiple mode: a remove button per listed file. */\n onRemove?: (file: File, index: number) => void;\n accept: string;\n /**\n * The caller's check. Optional since 0.6: without it the zone checks `accept` itself\n * (a drop ignores the dialog's filter). With it, `accept` is NOT re-checked — every\n * 0.5 caller's `isValid` is its own type check, and doubling it could refuse a file\n * the caller accepts (a `.zip` the OS labelled `application/octet-stream`).\n */\n isValid?: (file: File) => boolean;\n /** The message for an `isValid` refusal. Defaults to `labels.rejectedInvalid`. */\n invalidMessage?: string;\n /** Bytes; larger files are refused. */\n maxSize?: number;\n /** Multiple mode: files one pick may add. Pass what is LEFT for a running cap. */\n maxFiles?: number;\n /**\n * Called once per refused file. The 0.5 hook, kept as it was; {@link onReject}\n * carries the reason and the translated message as well.\n *\n * Its existence used to be what switched the toast off, and it still does (see\n * {@link rejectionFeedback}). The toast is the kit's `toast`, which loads `sonner`\n * lazily: it is an OPTIONAL peer, and a static import here once broke\n * `import { Button }` for every app without it (see `optional-peer-imports.test.tsx`).\n */\n onInvalid?: (file: File) => void;\n /** Every refused file of one pick, with its reason and message. */\n onReject?: (rejections: FileRejection[]) => void;\n /** The whole pick at once, before any of the above — return `false` to refuse all\n * of it (see {@link FilePickHandler}). A refused pick selects nothing; its one\n * message (`labels.rejectedPick`) goes where `rejectionFeedback` says. */\n onPick?: FilePickHandler;\n /** See {@link FileDropzoneRejectionFeedback}. Defaults to `\"toast\"` when neither\n * `onInvalid` nor `onReject` is given, `\"none\"` when one is. */\n rejectionFeedback?: FileDropzoneRejectionFeedback;\n /** Per-instance overrides of the `filePicker` label namespace. */\n labels?: Partial<FilePickerLabels>;\n /** The dropzone's accessible name. A caller's own `aria-label` wins over it — see\n * the root element below. Optional since 0.8, like the three below: each falls back\n * to its `filePicker` string from `<UiKitProvider labels>`, then to English. They\n * were required, so every call site passed four strings through `t()` by hand, and a\n * zone nested in a kit component (the feedback form) had no call site to pass them. */\n dropLabel?: string;\n /** Default `filePicker.browse`. */\n browseLabel?: string;\n /** What the zone says while nothing is chosen. Default `filePicker.empty` /\n * `emptyMultiple`. */\n emptyLabel?: string;\n /** The second line, e.g. what may be dropped. Default `filePicker.hint(accept)`. */\n hint?: string;\n /**\n * Not taking files: no drop, no picker, no remove buttons; `aria-disabled` on the\n * group. keksdose locks its invoice zone while another form holds unsaved changes,\n * and hand-rolled the whole zone to be able to (invoice-upload.tsx, \"Locked\").\n */\n disabled?: boolean;\n /**\n * Working on what it was given — an upload, an OCR pass. Inert like `disabled`, plus\n * `aria-busy`, a spinner in place of the upload icon, and `filePicker.busy` as the\n * text. The other half of why keksdose's invoice zone was hand-rolled.\n */\n busy?: boolean;\n /**\n * Replace the zone's body — the icon, the text and the chosen-file list — with your\n * own, given the zone's state: keksdose's spinner-plus-\"uploading\", its multi-shot\n * hint (\"several photos are possible\"), a second trigger for the camera.\n *\n * The Browse button, the inline error and the live regions stay: Browse is the\n * keyboard path, and a body that forgot it would leave the zone unreachable without\n * a pointer. A click on a control inside the body does not also open the picker.\n */\n renderBody?: (state: FileDropzoneState) => ReactNode;\n /** Extra classes for the dropzone's root. */\n className?: string;\n}\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml) and\n * kastlan's document forms. Refusals go to `onReject`/`onInvalid` and to\n * `rejectionFeedback`; the chosen file(s) are echoed with their size, otherwise\n * `emptyLabel` + `hint` describe what to drop. For a trigger with no drop area, see\n * `FileButton`. */\nexport function FileDropzone({\n file,\n onFileSelected,\n multiple,\n files,\n onFilesSelected,\n onClear,\n onRemove,\n accept,\n isValid,\n invalidMessage,\n maxSize,\n maxFiles,\n onInvalid,\n onReject,\n onPick,\n rejectionFeedback,\n labels: labelsProp,\n dropLabel: dropLabelProp,\n browseLabel: browseLabelProp,\n emptyLabel: emptyLabelProp,\n hint: hintProp,\n disabled,\n busy,\n renderBody,\n className,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": describedByProp,\n ...rest\n}: FileDropzoneProps) {\n const [error, setError] = useState<string | null>(null);\n const inert = Boolean(disabled || busy);\n // State rather than a ref: `open` is handed to `renderBody` during render, and a\n // function that reads a ref there is exactly what the refs rule cannot prove safe.\n const [fileInput, setFileInput] = useState<HTMLInputElement | null>(null);\n const browseRef = useRef<HTMLButtonElement>(null);\n const errorId = useId();\n // The size through the kit's `file.size` label (the provider's locale by default).\n // This was `${n / 1024} KB`: ASCII digits, an English unit, and a binary kilobyte\n // mislabelled as a decimal one, all in one template literal.\n const fileText = useKitFileLabels();\n const labels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labelsProp);\n // Two regions, two urgencies: a pick or a removal is news, a refusal is a failure.\n // The echoed file name is only text in the zone, and text changing somewhere on the\n // page is not announced by itself.\n const status = useAnnounce();\n const alert = useAnnounce({ politeness: \"assertive\" });\n const feedback: FileDropzoneRejectionFeedback =\n rejectionFeedback ?? (onInvalid || onReject ? \"none\" : \"toast\");\n const dropLabel = dropLabelProp ?? labels.dropzone;\n const browseLabel = browseLabelProp ?? labels.browse;\n const emptyLabel = emptyLabelProp ?? (multiple ? labels.emptyMultiple : labels.empty);\n const hint = hintProp ?? labels.hint(formatAccept(accept));\n\n const acceptFiles = (list: ArrayLike<File> | null | undefined) => {\n if (inert || !list || list.length === 0) return;\n const all = Array.from(list);\n const picked = multiple ? all : all.slice(0, 1);\n const { accepted, rejected } = screenFiles(\n picked,\n {\n accept: isValid ? undefined : accept,\n maxSize,\n maxFiles: multiple ? maxFiles : undefined,\n isValid,\n invalidMessage,\n },\n labels,\n fileText.size,\n );\n const stands = judgePick(onPick, accepted, rejected);\n if (stands && accepted.length > 0) {\n setError(null);\n if (multiple) {\n onFilesSelected?.(accepted);\n } else {\n onFileSelected?.(accepted[0]);\n onFilesSelected?.(accepted);\n }\n status.announce(labels.selected(accepted.length, accepted[0].name));\n }\n if (!stands || rejected.length > 0) {\n for (const r of rejected) onInvalid?.(r.file);\n if (rejected.length > 0) onReject?.(rejected);\n const message = stands\n ? summariseRejections(rejected, labels)\n : labels.rejectedPick(picked.length);\n if (feedback === \"toast\") {\n // The kit's `toast`, which loads sonner (an optional peer) lazily, so an app\n // that never trips this never has to install it. Nothing downstream depends\n // on the toast having appeared. The toaster is a live region, so this path\n // does not announce a second time.\n toast.error(message);\n } else {\n if (feedback === \"inline\") setError(message);\n alert.announce(message);\n }\n }\n };\n\n // The remove buttons unmount with the file they removed, and focus would fall to\n // <body>. Browse is where the next action (pick again) starts.\n const afterRemoval = (message: string) => {\n browseRef.current?.focus();\n status.announce(message);\n };\n\n // The enter/leave counter lives in the shared hook: the boolean this was flickered\n // across every child of the zone in Safari, whose drag events carry no\n // `relatedTarget` to tell a move onto a child from a real leave.\n const { dropProps, isOver: dragOver } = useDragTarget<HTMLDivElement>({\n disabled: inert,\n onDropFiles: acceptFiles,\n });\n const open = () => {\n if (!inert) fileInput?.click();\n };\n\n const chosen: readonly File[] = multiple ? (files ?? []) : file ? [file] : [];\n const showError = feedback === \"inline\" && error !== null;\n const describedBy = cn(describedByProp, showError && errorId) || undefined;\n\n return (\n <>\n {/* A named group, NOT a `role=\"button\"`. It was one, with real buttons (Browse,\n the remove buttons) inside it: nested interactive controls, which ARIA forbids\n because a button's children are presentational — a screen reader either read\n the zone as one opaque button or skipped the inner ones, and the zone was an\n extra Tab stop that did what Browse does. Now the keyboard path is Browse, a\n real button; the zone keeps its drop target and its click-anywhere for a\n pointer, which is a convenience on top of Browse rather than the only way in. */}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- the click is a pointer shortcut for Browse, see above */}\n <div\n // `...rest` first: every handler below is the drop gesture itself.\n {...rest}\n {...dropProps}\n // Pointer only; every control inside stops its own click from reaching here\n // (and one in a custom body is skipped below). The keyboard equivalent is the\n // Browse button, so no key handler belongs on a group.\n onClick={(e) => {\n if (fromControl(e)) return;\n open();\n }}\n role=\"group\"\n // The DOM spelling wins over `dropLabel`, which stays the name for every caller\n // that passes no `aria-label` — i.e. all of them today. Standardising on\n // `aria-label` (audit §api-design) does not get to silently rename an existing\n // required prop.\n aria-label={ariaLabel ?? dropLabel}\n // No `aria-invalid`: ARIA does not allow it on `role=\"group\"`. The message is\n // reached through the description instead, and spoken when it appears.\n aria-describedby={describedBy}\n data-invalid={showError || undefined}\n aria-disabled={disabled || undefined}\n aria-busy={busy || undefined}\n data-drag-over={dragOver || undefined}\n className={cn(\n // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,\n // which Tailwind implements as `position: absolute` — so without a positioned\n // ancestor its containing block is the INITIAL one, and it is laid out at its\n // own offset from the top of the document. Nothing looks wrong, because the\n // input is 1x1 and clipped; what breaks is the page height. On a long page\n // every escaped sr-only element extends `documentElement.scrollHeight` to its\n // own offset, which produces a second, whole-document scrollbar alongside the\n // app shell's own — one that scrolls past the end of the content into nothing.\n // Measured on the showcase: body 900px, document 47,919px.\n \"relative flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n // Three states out of two border tokens: the target rests on the plain\n // hairline, hover pulls it to `--border-strong`, and a live drag keeps that\n // border and adds the `--bg-active` wash on top — so \"let go here\" still reads\n // one step louder than \"you are over it\". A refusal shown inline takes the\n // danger border until the next good pick.\n // Inert zones keep the resting hairline and lose the hover pull: a border that\n // answers the pointer promises a drop the zone will refuse.\n disabled\n ? \"cursor-not-allowed border-[var(--border)] opacity-60\"\n : busy\n ? \"cursor-progress border-[var(--border)]\"\n : dragOver\n ? \"cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]\"\n : showError\n ? \"cursor-pointer border-[var(--danger-border)]\"\n : \"cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]\",\n className,\n )}\n >\n {renderBody ? (\n renderBody({\n dragOver,\n disabled: Boolean(disabled),\n busy: Boolean(busy),\n files: chosen,\n error: showError ? error : null,\n open,\n labels,\n })\n ) : busy ? (\n <>\n {/* `label={null}`: the zone is `aria-busy` and the line below says the\n same in words; a spoken \"Loading\" would only run into it. */}\n <Spinner label={null} className=\"size-5\" />\n <div className=\"text-sm text-[var(--text-secondary)]\">{labels.busy}</div>\n </>\n ) : (\n <>\n <Upload aria-hidden className=\"size-5 text-[var(--text-muted)]\" />\n {multiple && chosen.length > 0 ? (\n <ul className=\"flex w-full max-w-sm flex-col gap-1 text-start\">\n {chosen.map((f, i) => (\n <li\n // Name + size + position: two files may share a name, and the index\n // alone would re-key every row below a removal.\n key={`${f.name}-${f.size}-${i}`}\n className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\"\n >\n <span className=\"min-w-0 flex-1 truncate font-medium\">{f.name}</span>\n <span className=\"shrink-0 text-xs text-[var(--text-muted)]\">{fileText.size(f.size)}</span>\n {onRemove && (\n <IconButton\n type=\"button\"\n size=\"sm\"\n disabled={inert}\n aria-label={labels.remove(f.name)}\n onClick={(e) => {\n e.stopPropagation();\n onRemove(f, i);\n afterRemoval(labels.removed(f.name));\n }}\n >\n <X aria-hidden />\n </IconButton>\n )}\n </li>\n ))}\n </ul>\n ) : (\n <>\n <div className=\"flex items-center gap-1 text-sm text-[var(--text-secondary)]\">\n {/* `!multiple`: in multiple mode an empty `files` list is \"nothing chosen\",\n whatever a stray `file` prop says — it used to show that file's name. */}\n {!multiple && file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n {!multiple && file && onClear && (\n <IconButton\n type=\"button\"\n size=\"sm\"\n disabled={inert}\n aria-label={labels.remove(file.name)}\n onClick={(e) => {\n e.stopPropagation();\n onClear();\n afterRemoval(labels.removed(file.name));\n }}\n >\n <X aria-hidden />\n </IconButton>\n )}\n </div>\n <div className=\"text-xs text-[var(--text-muted)]\">\n {file && !multiple ? fileText.size(file.size) : hint}\n </div>\n </>\n )}\n </>\n )}\n <div className=\"flex flex-wrap items-center justify-center gap-2\">\n <Button\n ref={browseRef}\n type=\"button\"\n variant=\"secondary\"\n disabled={inert}\n onClick={(e) => {\n e.stopPropagation();\n open();\n }}\n >\n {browseLabel}\n </Button>\n {multiple && chosen.length > 0 && onClear && (\n <Button\n type=\"button\"\n variant=\"ghost\"\n disabled={inert}\n onClick={(e) => {\n e.stopPropagation();\n onClear();\n afterRemoval(labels.cleared);\n }}\n >\n {labels.clearAll}\n </Button>\n )}\n </div>\n {showError && (\n <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n {error}\n </p>\n )}\n <input\n ref={setFileInput}\n type=\"file\"\n accept={accept}\n multiple={multiple}\n disabled={inert}\n onChange={(e) => {\n // Copy, THEN reset: `files` is a live view of the value, and without the\n // reset picking the same file a second time fires no `change` at all —\n // the retry after a failed upload silently did nothing (kastlan).\n const picked = Array.from(e.currentTarget.files ?? []);\n e.currentTarget.value = \"\";\n acceptFiles(picked);\n }}\n // Clicks are forwarded here programmatically; one reaching the zone's own\n // handler again would open the dialog a second time.\n onClick={(e) => e.stopPropagation()}\n className=\"sr-only\"\n />\n </div>\n {/* Outside the zone, where they have always been (the zone used to be a\n `role=\"button\"`, whose content is presentational). `sr-only-fixed`, so they\n need no positioned ancestor. */}\n <span {...status.regionProps} />\n <span {...alert.regionProps} />\n </>\n );\n}\n\n/** A click that landed on a control inside the zone (a custom body's own button, a\n * link in the hint) is that control's, not a request to open the picker. */\nfunction fromControl(e: MouseEvent<HTMLElement>): boolean {\n const target = e.target as Element | null;\n const control = target?.closest?.(\"button, a[href], input, select, textarea, label, [role='button']\");\n return Boolean(control && control !== e.currentTarget && e.currentTarget.contains(control));\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/file-dropzone.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { Upload, X } from \"lucide-react\";\nimport { Button, IconButton, Spinner } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitFileLabels, useKitLabels } from \"../i18n/kit-labels\";\nimport {\n DEFAULT_FILE_PICKER_LABELS,\n formatAccept,\n judgePick,\n screenFiles,\n summariseRejections,\n} from \"./file-button\";\nimport type { FilePickHandler, FilePickerLabels, FileRejection } from \"./file-button\";\nimport { useDragTarget } from \"../hooks/use-file-drop\";\nimport { toast } from \"./toast\";\n\n/**\n * Where a refused file's message goes.\n *\n * - `\"toast\"` — a `sonner` toast (the 0.5 behaviour, kept as the default for a caller\n * that handles nothing itself so no existing dropzone goes quiet on upgrade).\n * - `\"inline\"` — under the drop target, in the danger colour, tied to it with\n * `aria-describedby` (plus `data-invalid` for styling), and spoken through a live\n * region. Cleared by the next accepted pick.\n * - `\"none\"` — nothing visible; the caller shows it from `onReject` / `onInvalid`.\n * Still spoken, so a host rendering it should not ALSO make it `role=\"alert\"`.\n */\nexport type FileDropzoneRejectionFeedback = \"toast\" | \"inline\" | \"none\";\n\n/** What a custom {@link FileDropzoneProps.renderBody} is handed. */\nexport interface FileDropzoneState {\n /** A file drag is over the zone right now. */\n dragOver: boolean;\n disabled: boolean;\n busy: boolean;\n /** What is chosen: `files` in multiple mode, `[file]` or `[]` in single mode. */\n files: readonly File[];\n /** The inline refusal, when `rejectionFeedback=\"inline\"` has one to show. */\n error: string | null;\n /** Open the system picker — for a body that brings its own trigger (a second\n * \"Take photo\" button). Does nothing while `disabled` or `busy`. */\n open: () => void;\n /** The resolved `filePicker` strings, so a custom body speaks the same language. */\n labels: FilePickerLabels;\n}\n\n/**\n * `onInvalid` is omitted from the `<div>` attributes and kept as this component's own.\n * The DOM event of that name belongs to form validation and takes a `FormEvent`; this\n * one takes the rejected `File`, and the kit's meaning is the one every caller already\n * writes. Everything else a `<div>` takes reaches the root — which carries\n * `role=\"group\"` named by `dropLabel`, so that is also where an `aria-label` or an\n * `aria-describedby` belongs.\n *\n * Two modes. SINGLE (the default, and all of 0.5): `file` + `onFileSelected`. MULTIPLE\n * (`multiple`): `files` + `onFilesSelected`. They are optional rather than a union so\n * `FileDropzoneProps` stays an interface a caller can extend; a single-mode pick also\n * reaches `onFilesSelected` as a one-element array, so one handler can serve both.\n */\nexport interface FileDropzoneProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onInvalid\"> {\n /** Single mode: the chosen file, echoed with its size. */\n file?: File | null;\n /** Single mode: called with the accepted file. */\n onFileSelected?: (file: File) => void;\n /** Take several files per pick or drop. Without it a drop of several keeps the first. */\n multiple?: boolean;\n /** Multiple mode: the chosen files, listed in the zone. */\n files?: readonly File[];\n /** Every accepted file of one pick, in order. Never called with an empty array. */\n onFilesSelected?: (files: File[]) => void;\n /**\n * Show a remove button inside the zone once something is chosen (kastlan asked for\n * it: the only way to un-choose a file was to reload). Single mode: removes the file.\n * Multiple mode: a \"remove all\" button. The host clears its own state here — the\n * zone is controlled. Focus moves to the Browse button, and the removal is announced.\n */\n onClear?: () => void;\n /** Multiple mode: a remove button per listed file. */\n onRemove?: (file: File, index: number) => void;\n accept: string;\n /**\n * The caller's check. Optional since 0.6: without it the zone checks `accept` itself\n * (a drop ignores the dialog's filter). With it, `accept` is NOT re-checked — every\n * 0.5 caller's `isValid` is its own type check, and doubling it could refuse a file\n * the caller accepts (a `.zip` the OS labelled `application/octet-stream`).\n */\n isValid?: (file: File) => boolean;\n /** The message for an `isValid` refusal. Defaults to `labels.rejectedInvalid`. */\n invalidMessage?: string;\n /** Bytes; larger files are refused. */\n maxSize?: number;\n /** Multiple mode: files one pick may add. Pass what is LEFT for a running cap. */\n maxFiles?: number;\n /**\n * Called once per refused file. The 0.5 hook, kept as it was; {@link onReject}\n * carries the reason and the translated message as well.\n *\n * Its existence used to be what switched the toast off, and it still does (see\n * {@link rejectionFeedback}). The toast is the kit's `toast`, which loads `sonner`\n * lazily: it is an OPTIONAL peer, and a static import here once broke\n * `import { Button }` for every app without it (see `optional-peer-imports.test.tsx`).\n */\n onInvalid?: (file: File) => void;\n /** Every refused file of one pick, with its reason and message. */\n onReject?: (rejections: FileRejection[]) => void;\n /** The whole pick at once, before any of the above — return `false` to refuse all\n * of it (see {@link FilePickHandler}). A refused pick selects nothing; its one\n * message (`labels.rejectedPick`) goes where `rejectionFeedback` says. */\n onPick?: FilePickHandler;\n /** See {@link FileDropzoneRejectionFeedback}. Defaults to `\"toast\"` when neither\n * `onInvalid` nor `onReject` is given, `\"none\"` when one is. */\n rejectionFeedback?: FileDropzoneRejectionFeedback;\n /** Per-instance overrides of the `filePicker` label namespace. */\n labels?: Partial<FilePickerLabels>;\n /** The dropzone's accessible name. A caller's own `aria-label` wins over it — see\n * the root element below. Optional since 0.8, like the three below: each falls back\n * to its `filePicker` string from `<UiKitProvider labels>`, then to English. They\n * were required, so every call site passed four strings through `t()` by hand, and a\n * zone nested in a kit component (the feedback form) had no call site to pass them. */\n dropLabel?: string;\n /** Default `filePicker.browse`. */\n browseLabel?: string;\n /** What the zone says while nothing is chosen. Default `filePicker.empty` /\n * `emptyMultiple`. */\n emptyLabel?: string;\n /** The second line, e.g. what may be dropped. Default `filePicker.hint(accept)`. */\n hint?: string;\n /**\n * Not taking files: no drop, no picker, no remove buttons; `aria-disabled` on the\n * group. keksdose locks its invoice zone while another form holds unsaved changes,\n * and hand-rolled the whole zone to be able to (invoice-upload.tsx, \"Locked\").\n */\n disabled?: boolean;\n /**\n * Working on what it was given — an upload, an OCR pass. Inert like `disabled`, plus\n * `aria-busy`, a spinner in place of the upload icon, and `filePicker.busy` as the\n * text. The other half of why keksdose's invoice zone was hand-rolled.\n */\n busy?: boolean;\n /**\n * Replace the zone's body — the icon, the text and the chosen-file list — with your\n * own, given the zone's state: keksdose's spinner-plus-\"uploading\", its multi-shot\n * hint (\"several photos are possible\"), a second trigger for the camera.\n *\n * The Browse button, the inline error and the live regions stay: Browse is the\n * keyboard path, and a body that forgot it would leave the zone unreachable without\n * a pointer. A click on a control inside the body does not also open the picker.\n */\n renderBody?: (state: FileDropzoneState) => ReactNode;\n /** Extra classes for the dropzone's root. */\n className?: string;\n}\n\n/** Drag-and-drop file picker shared by the import wizards (YNAB zip, CAMT xml) and\n * kastlan's document forms. Refusals go to `onReject`/`onInvalid` and to\n * `rejectionFeedback`; the chosen file(s) are echoed with their size, otherwise\n * `emptyLabel` + `hint` describe what to drop. For a trigger with no drop area, see\n * `FileButton`. */\nexport function FileDropzone({\n file,\n onFileSelected,\n multiple,\n files,\n onFilesSelected,\n onClear,\n onRemove,\n accept,\n isValid,\n invalidMessage,\n maxSize,\n maxFiles,\n onInvalid,\n onReject,\n onPick,\n rejectionFeedback,\n labels: labelsProp,\n dropLabel: dropLabelProp,\n browseLabel: browseLabelProp,\n emptyLabel: emptyLabelProp,\n hint: hintProp,\n disabled,\n busy,\n renderBody,\n className,\n \"aria-label\": ariaLabel,\n \"aria-describedby\": describedByProp,\n ...rest\n}: FileDropzoneProps) {\n const [error, setError] = useState<string | null>(null);\n const inert = Boolean(disabled || busy);\n // State rather than a ref: `open` is handed to `renderBody` during render, and a\n // function that reads a ref there is exactly what the refs rule cannot prove safe.\n const [fileInput, setFileInput] = useState<HTMLInputElement | null>(null);\n const browseRef = useRef<HTMLButtonElement>(null);\n const errorId = useId();\n // The size through the kit's `file.size` label (the provider's locale by default).\n // This was `${n / 1024} KB`: ASCII digits, an English unit, and a binary kilobyte\n // mislabelled as a decimal one, all in one template literal.\n const fileText = useKitFileLabels();\n const labels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labelsProp);\n // Two regions, two urgencies: a pick or a removal is news, a refusal is a failure.\n // The echoed file name is only text in the zone, and text changing somewhere on the\n // page is not announced by itself.\n const status = useAnnounce();\n const alert = useAnnounce({ politeness: \"assertive\" });\n const feedback: FileDropzoneRejectionFeedback =\n rejectionFeedback ?? (onInvalid || onReject ? \"none\" : \"toast\");\n const dropLabel = dropLabelProp ?? labels.dropzone;\n const browseLabel = browseLabelProp ?? labels.browse;\n const emptyLabel = emptyLabelProp ?? (multiple ? labels.emptyMultiple : labels.empty);\n const hint = hintProp ?? labels.hint(formatAccept(accept));\n\n const acceptFiles = (list: ArrayLike<File> | null | undefined) => {\n if (inert || !list || list.length === 0) return;\n const all = Array.from(list);\n const picked = multiple ? all : all.slice(0, 1);\n const { accepted, rejected } = screenFiles(\n picked,\n {\n accept: isValid ? undefined : accept,\n maxSize,\n maxFiles: multiple ? maxFiles : undefined,\n isValid,\n invalidMessage,\n },\n labels,\n fileText.size,\n );\n const stands = judgePick(onPick, accepted, rejected);\n if (stands && accepted.length > 0) {\n setError(null);\n if (multiple) {\n onFilesSelected?.(accepted);\n } else {\n onFileSelected?.(accepted[0]);\n onFilesSelected?.(accepted);\n }\n status.announce(labels.selected(accepted.length, accepted[0].name));\n }\n if (!stands || rejected.length > 0) {\n for (const r of rejected) onInvalid?.(r.file);\n if (rejected.length > 0) onReject?.(rejected);\n const message = stands\n ? summariseRejections(rejected, labels)\n : labels.rejectedPick(picked.length);\n if (feedback === \"toast\") {\n // The kit's `toast`, which loads sonner (an optional peer) lazily, so an app\n // that never trips this never has to install it. Nothing downstream depends\n // on the toast having appeared. The toaster is a live region, so this path\n // does not announce a second time.\n toast.error(message);\n } else {\n if (feedback === \"inline\") setError(message);\n alert.announce(message);\n }\n }\n };\n\n // The remove buttons unmount with the file they removed, and focus would fall to\n // <body>. Browse is where the next action (pick again) starts.\n const afterRemoval = (message: string) => {\n browseRef.current?.focus();\n status.announce(message);\n };\n\n // The enter/leave counter lives in the shared hook: the boolean this was flickered\n // across every child of the zone in Safari, whose drag events carry no\n // `relatedTarget` to tell a move onto a child from a real leave.\n const { dropProps, isOver: dragOver } = useDragTarget<HTMLDivElement>({\n disabled: inert,\n onDropFiles: acceptFiles,\n });\n const open = () => {\n if (!inert) fileInput?.click();\n };\n\n const chosen: readonly File[] = multiple ? (files ?? []) : file ? [file] : [];\n const showError = feedback === \"inline\" && error !== null;\n const describedBy = cn(describedByProp, showError && errorId) || undefined;\n\n return (\n <>\n {/* A named group, NOT a `role=\"button\"`. It was one, with real buttons (Browse,\n the remove buttons) inside it: nested interactive controls, which ARIA forbids\n because a button's children are presentational — a screen reader either read\n the zone as one opaque button or skipped the inner ones, and the zone was an\n extra Tab stop that did what Browse does. Now the keyboard path is Browse, a\n real button; the zone keeps its drop target and its click-anywhere for a\n pointer, which is a convenience on top of Browse rather than the only way in. */}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions -- the click is a pointer shortcut for Browse, see above */}\n <div\n // `...rest` first: every handler below is the drop gesture itself.\n {...rest}\n {...dropProps}\n // Pointer only; every control inside stops its own click from reaching here\n // (and one in a custom body is skipped below). The keyboard equivalent is the\n // Browse button, so no key handler belongs on a group.\n onClick={(e) => {\n if (fromControl(e)) return;\n open();\n }}\n role=\"group\"\n // The DOM spelling wins over `dropLabel`, which stays the name for every caller\n // that passes no `aria-label` — i.e. all of them today. Standardising on\n // `aria-label` (audit §api-design) does not get to silently rename an existing\n // required prop.\n aria-label={ariaLabel ?? dropLabel}\n // No `aria-invalid`: ARIA does not allow it on `role=\"group\"`. The message is\n // reached through the description instead, and spoken when it appears.\n aria-describedby={describedBy}\n data-invalid={showError || undefined}\n aria-disabled={disabled || undefined}\n aria-busy={busy || undefined}\n data-drag-over={dragOver || undefined}\n className={cn(\n // `relative` is load-bearing, not cosmetic. The file input below is `sr-only`,\n // which Tailwind implements as `position: absolute` — so without a positioned\n // ancestor its containing block is the INITIAL one, and it is laid out at its\n // own offset from the top of the document. Nothing looks wrong, because the\n // input is 1x1 and clipped; what breaks is the page height. On a long page\n // every escaped sr-only element extends `documentElement.scrollHeight` to its\n // own offset, which produces a second, whole-document scrollbar alongside the\n // app shell's own — one that scrolls past the end of the content into nothing.\n // Measured on the showcase: body 900px, document 47,919px.\n \"relative flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed px-4 py-6 text-center transition-colors\",\n // Three states out of two border tokens: the target rests on the plain\n // hairline, hover pulls it to `--border-strong`, and a live drag keeps that\n // border and adds the `--bg-active` wash on top — so \"let go here\" still reads\n // one step louder than \"you are over it\". A refusal shown inline takes the\n // danger border until the next good pick.\n // Inert zones keep the resting hairline and lose the hover pull: a border that\n // answers the pointer promises a drop the zone will refuse.\n disabled\n ? \"cursor-not-allowed border-[var(--border)] opacity-60\"\n : busy\n ? \"cursor-progress border-[var(--border)]\"\n : dragOver\n ? \"cursor-pointer border-[var(--border-strong)] bg-[var(--bg-active)]\"\n : showError\n ? \"cursor-pointer border-[var(--danger-border-strong)]\"\n : \"cursor-pointer border-[var(--border)] hover:border-[var(--border-strong)]\",\n className,\n )}\n >\n {renderBody ? (\n renderBody({\n dragOver,\n disabled: Boolean(disabled),\n busy: Boolean(busy),\n files: chosen,\n error: showError ? error : null,\n open,\n labels,\n })\n ) : busy ? (\n <>\n {/* `label={null}`: the zone is `aria-busy` and the line below says the\n same in words; a spoken \"Loading\" would only run into it. */}\n <Spinner label={null} className=\"size-5\" />\n <div className=\"text-sm text-[var(--text-secondary)]\">{labels.busy}</div>\n </>\n ) : (\n <>\n <Upload aria-hidden className=\"size-5 text-[var(--text-muted)]\" />\n {multiple && chosen.length > 0 ? (\n <ul className=\"flex w-full max-w-sm flex-col gap-1 text-start\">\n {chosen.map((f, i) => (\n <li\n // Name + size + position: two files may share a name, and the index\n // alone would re-key every row below a removal.\n key={`${f.name}-${f.size}-${i}`}\n className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\"\n >\n <span className=\"min-w-0 flex-1 truncate font-medium\">{f.name}</span>\n <span className=\"shrink-0 text-xs text-[var(--text-muted)]\">{fileText.size(f.size)}</span>\n {onRemove && (\n <IconButton\n type=\"button\"\n size=\"sm\"\n disabled={inert}\n aria-label={labels.remove(f.name)}\n onClick={(e) => {\n e.stopPropagation();\n onRemove(f, i);\n afterRemoval(labels.removed(f.name));\n }}\n >\n <X aria-hidden />\n </IconButton>\n )}\n </li>\n ))}\n </ul>\n ) : (\n <>\n <div className=\"flex items-center gap-1 text-sm text-[var(--text-secondary)]\">\n {/* `!multiple`: in multiple mode an empty `files` list is \"nothing chosen\",\n whatever a stray `file` prop says — it used to show that file's name. */}\n {!multiple && file ? <span className=\"font-medium\">{file.name}</span> : emptyLabel}\n {!multiple && file && onClear && (\n <IconButton\n type=\"button\"\n size=\"sm\"\n disabled={inert}\n aria-label={labels.remove(file.name)}\n onClick={(e) => {\n e.stopPropagation();\n onClear();\n afterRemoval(labels.removed(file.name));\n }}\n >\n <X aria-hidden />\n </IconButton>\n )}\n </div>\n <div className=\"text-xs text-[var(--text-muted)]\">\n {file && !multiple ? fileText.size(file.size) : hint}\n </div>\n </>\n )}\n </>\n )}\n <div className=\"flex flex-wrap items-center justify-center gap-2\">\n <Button\n ref={browseRef}\n type=\"button\"\n variant=\"secondary\"\n disabled={inert}\n onClick={(e) => {\n e.stopPropagation();\n open();\n }}\n >\n {browseLabel}\n </Button>\n {multiple && chosen.length > 0 && onClear && (\n <Button\n type=\"button\"\n variant=\"ghost\"\n disabled={inert}\n onClick={(e) => {\n e.stopPropagation();\n onClear();\n afterRemoval(labels.cleared);\n }}\n >\n {labels.clearAll}\n </Button>\n )}\n </div>\n {showError && (\n <p id={errorId} className=\"text-xs text-[var(--danger)]\">\n {error}\n </p>\n )}\n <input\n ref={setFileInput}\n type=\"file\"\n accept={accept}\n multiple={multiple}\n disabled={inert}\n onChange={(e) => {\n // Copy, THEN reset: `files` is a live view of the value, and without the\n // reset picking the same file a second time fires no `change` at all —\n // the retry after a failed upload silently did nothing (kastlan).\n const picked = Array.from(e.currentTarget.files ?? []);\n e.currentTarget.value = \"\";\n acceptFiles(picked);\n }}\n // Clicks are forwarded here programmatically; one reaching the zone's own\n // handler again would open the dialog a second time.\n onClick={(e) => e.stopPropagation()}\n className=\"sr-only\"\n />\n </div>\n {/* Outside the zone, where they have always been (the zone used to be a\n `role=\"button\"`, whose content is presentational). `sr-only-fixed`, so they\n need no positioned ancestor. */}\n <span {...status.regionProps} />\n <span {...alert.regionProps} />\n </>\n );\n}\n\n/** A click that landed on a control inside the zone (a custom body's own button, a\n * link in the hint) is that control's, not a request to open the picker. */\nfunction fromControl(e: MouseEvent<HTMLElement>): boolean {\n const target = e.target as Element | null;\n const control = target?.closest?.(\"button, a[href], input, select, textarea, label, [role='button']\");\n return Boolean(control && control !== e.currentTarget && e.currentTarget.contains(control));\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
export {
|
|
2
|
+
export { O as DEFAULT_FORM_ACTIONS_LABELS, ak as FormActions, al as FormActionsAlign, am as FormActionsDestructive, an as FormActionsLabels, ao as FormActionsPlacement, ap as FormActionsProps } from '../kit-labels-BD2F7sOz.js';
|
|
3
3
|
import './data-table-labels.js';
|
|
4
4
|
import './mini-calendar.js';
|
|
5
5
|
import './calendar-heatmap.js';
|
|
@@ -31,8 +31,7 @@ import './dialog-frame.js';
|
|
|
31
31
|
import './modal.js';
|
|
32
32
|
import '../hooks/use-search-param-state.js';
|
|
33
33
|
import './measured-grid.js';
|
|
34
|
-
import '../feedback
|
|
35
|
-
import '../feedback/feedback-dialog.js';
|
|
34
|
+
import '../feedback-attachment-BYAHJMOr.js';
|
|
36
35
|
import '../feedback/feedback-thread.js';
|
|
37
36
|
import '../feedback/feedback-inbox.js';
|
|
38
37
|
import './account-settings-labels.js';
|
|
@@ -63,7 +63,15 @@ function FormActions({
|
|
|
63
63
|
"data-slot": "form-actions",
|
|
64
64
|
"data-placement": placement,
|
|
65
65
|
...rest,
|
|
66
|
-
style: placement === "sticky" ? {
|
|
66
|
+
style: placement === "sticky" ? {
|
|
67
|
+
paddingBottom: "max(0.75rem, env(safe-area-inset-bottom))",
|
|
68
|
+
// On the phone's bottom nav, not behind it (keksdose live #361): `bottom-0`
|
|
69
|
+
// pinned the row under AppShell's nav, which covers the page's last ~56px.
|
|
70
|
+
// `--app-nav-h` is the nav's measured height (0px from md up, and outside an
|
|
71
|
+
// AppShell); the 1px overlaps the two top borders into one line.
|
|
72
|
+
bottom: "max(0px, calc(var(--app-nav-h, 0px) - 1px))",
|
|
73
|
+
...style
|
|
74
|
+
} : style,
|
|
67
75
|
className: cn("flex flex-wrap items-center gap-2", ALIGN_CLASS[justify], PLACEMENT_CLASS[placement], className),
|
|
68
76
|
children: [
|
|
69
77
|
start && /* @__PURE__ */ jsx("div", { className: "me-auto flex items-center gap-2", children: start }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/form-actions.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, Spinner, type ButtonVariant } from \"./ui\";\n\n/** The words {@link FormActions} renders on its own behalf — the `form` namespace. */\nexport interface FormActionsLabels {\n save: string;\n cancel: string;\n}\n\nexport const DEFAULT_FORM_ACTIONS_LABELS: FormActionsLabels = {\n save: \"Save\",\n cancel: \"Cancel\",\n};\n\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\n/**\n * Where the row sits:\n * - `inline` (default): under the form's last field, `pt-4` above it.\n * - `sticky`: stuck to the bottom of the scrolling page or pane, on the surface\n * colour with a rule above, clear of the phone's home indicator — for a long form\n * whose Save should not be a scroll away.\n * - `dialog`: no spacing of its own, for a dialog's footer slot (DialogFrame,\n * FullBleedDialog's `footer`), which already pads and rules it.\n */\nexport type FormActionsPlacement = \"inline\" | \"sticky\" | \"dialog\";\n\n/** The start-side action of {@link FormActionsProps.destructive}, as data. */\nexport interface FormActionsDestructive {\n label: ReactNode;\n onClick: () => void;\n disabled?: boolean;\n /** See Button's `disabledReason`. */\n disabledReason?: ReactNode;\n}\n\nconst ALIGN_CLASS: Record<FormActionsAlign, string> = {\n start: \"justify-start\",\n center: \"justify-center\",\n end: \"justify-end\",\n between: \"justify-between\",\n};\n\nconst PLACEMENT_CLASS: Record<FormActionsPlacement, string> = {\n inline: \"pt-4\",\n sticky: \"sticky bottom-0 z-10 border-t border-[var(--border)] bg-[var(--bg-surface)] pt-3\",\n dialog: \"\",\n};\n\nexport interface FormActionsProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n /** Called by Cancel. Omitted: no Cancel button (a form that only saves). */\n onCancel?: () => void;\n /**\n * Given: the save button is `type=\"button\"` and calls this — for a dialog or a row\n * that saves from a handler. Omitted: it is `type=\"submit\"` and submits the\n * enclosing `<form>` (or the one named by {@link form}).\n */\n onSubmit?: () => void;\n /** The save button's text. Default `form.save` from the provider, else \"Save\". */\n submitLabel?: ReactNode;\n /** The cancel button's text. Default `form.cancel` from the provider, else \"Cancel\". */\n cancelLabel?: ReactNode;\n /** The save button's text while `pending` (\"Saving…\"). Default: `submitLabel`. */\n pendingLabel?: ReactNode;\n /**\n * The save is running: a spinner in the save button, `aria-busy` on it, and the\n * button disabled, so a second click cannot send the form twice. Cancel stays\n * usable.\n */\n pending?: boolean;\n /** Disable save for a reason of the form's own (an unbalanced entry). */\n submitDisabled?: boolean;\n /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */\n submitDisabledReason?: ReactNode;\n /** The save button's variant. Default `brand`; `danger` for a save that destroys\n * (kastlan's `destructive` flag on its own FormActions). */\n submitVariant?: ButtonVariant;\n /**\n * A destructive action at the START of the row, apart from Save and Cancel — the\n * \"Delete\" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger\n * button, or an element of your own (a {@link DangerConfirm}, say). With it the row\n * is `between`-aligned unless `align` says otherwise.\n */\n destructive?: ReactNode | FormActionsDestructive;\n /** Horizontal alignment. Default `end` (`between` with a `destructive` action). */\n align?: FormActionsAlign;\n /** See {@link FormActionsPlacement}. Default `inline`. */\n placement?: FormActionsPlacement;\n /** The `id` of the `<form>` the save button submits, when the row is rendered\n * outside it (a dialog's footer slot). */\n form?: string;\n /** Extra actions, placed before Cancel. */\n children?: ReactNode;\n}\n\nfunction isDestructiveData(value: unknown): value is FormActionsDestructive {\n return typeof value === \"object\" && value !== null && !isValidElement(value) && \"onClick\" in value;\n}\n\n/**\n * The Save / Cancel row every form, wizard-step form and dialog ends in — kastlan's\n * `FormActions`, with the labels from the provider, a pending state and a place for\n * the destructive action.\n *\n * ```tsx\n * <form onSubmit={form.handleSubmit(save)}>\n * …\n * <FormActions onCancel={close} pending={mutation.isPending} />\n * </form>\n * ```\n *\n * The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`\n * so the button's name stays its text; `aria-busy` is what says it is working.\n */\nexport function FormActions({\n onCancel,\n onSubmit,\n submitLabel,\n cancelLabel,\n pendingLabel,\n pending = false,\n submitDisabled = false,\n submitDisabledReason,\n submitVariant = \"brand\",\n destructive,\n align,\n placement = \"inline\",\n form,\n children,\n className,\n style,\n ...rest\n}: FormActionsProps) {\n const labels = useKitLabels(\"form\", DEFAULT_FORM_ACTIONS_LABELS);\n const hasDestructive = destructive !== undefined && destructive !== null && destructive !== false;\n const justify = align ?? (hasDestructive ? \"between\" : \"end\");\n const start = !hasDestructive ? null : isDestructiveData(destructive) ? (\n <Button\n type=\"button\"\n variant=\"ghost\"\n tone=\"danger\"\n onClick={destructive.onClick}\n disabled={destructive.disabled}\n disabledReason={destructive.disabledReason}\n >\n {destructive.label}\n </Button>\n ) : (\n destructive\n );\n const saveLabel = submitLabel ?? labels.save;\n\n return (\n <div\n data-slot=\"form-actions\"\n data-placement={placement}\n {...rest}\n style={\n placement === \"sticky\"\n ? {
|
|
1
|
+
{"version":3,"sources":["../../src/components/form-actions.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button, Spinner, type ButtonVariant } from \"./ui\";\n\n/** The words {@link FormActions} renders on its own behalf — the `form` namespace. */\nexport interface FormActionsLabels {\n save: string;\n cancel: string;\n}\n\nexport const DEFAULT_FORM_ACTIONS_LABELS: FormActionsLabels = {\n save: \"Save\",\n cancel: \"Cancel\",\n};\n\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\n/**\n * Where the row sits:\n * - `inline` (default): under the form's last field, `pt-4` above it.\n * - `sticky`: stuck to the bottom of the scrolling page or pane, on the surface\n * colour with a rule above, clear of the phone's home indicator — for a long form\n * whose Save should not be a scroll away.\n * - `dialog`: no spacing of its own, for a dialog's footer slot (DialogFrame,\n * FullBleedDialog's `footer`), which already pads and rules it.\n */\nexport type FormActionsPlacement = \"inline\" | \"sticky\" | \"dialog\";\n\n/** The start-side action of {@link FormActionsProps.destructive}, as data. */\nexport interface FormActionsDestructive {\n label: ReactNode;\n onClick: () => void;\n disabled?: boolean;\n /** See Button's `disabledReason`. */\n disabledReason?: ReactNode;\n}\n\nconst ALIGN_CLASS: Record<FormActionsAlign, string> = {\n start: \"justify-start\",\n center: \"justify-center\",\n end: \"justify-end\",\n between: \"justify-between\",\n};\n\nconst PLACEMENT_CLASS: Record<FormActionsPlacement, string> = {\n inline: \"pt-4\",\n sticky: \"sticky bottom-0 z-10 border-t border-[var(--border)] bg-[var(--bg-surface)] pt-3\",\n dialog: \"\",\n};\n\nexport interface FormActionsProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n /** Called by Cancel. Omitted: no Cancel button (a form that only saves). */\n onCancel?: () => void;\n /**\n * Given: the save button is `type=\"button\"` and calls this — for a dialog or a row\n * that saves from a handler. Omitted: it is `type=\"submit\"` and submits the\n * enclosing `<form>` (or the one named by {@link form}).\n */\n onSubmit?: () => void;\n /** The save button's text. Default `form.save` from the provider, else \"Save\". */\n submitLabel?: ReactNode;\n /** The cancel button's text. Default `form.cancel` from the provider, else \"Cancel\". */\n cancelLabel?: ReactNode;\n /** The save button's text while `pending` (\"Saving…\"). Default: `submitLabel`. */\n pendingLabel?: ReactNode;\n /**\n * The save is running: a spinner in the save button, `aria-busy` on it, and the\n * button disabled, so a second click cannot send the form twice. Cancel stays\n * usable.\n */\n pending?: boolean;\n /** Disable save for a reason of the form's own (an unbalanced entry). */\n submitDisabled?: boolean;\n /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */\n submitDisabledReason?: ReactNode;\n /** The save button's variant. Default `brand`; `danger` for a save that destroys\n * (kastlan's `destructive` flag on its own FormActions). */\n submitVariant?: ButtonVariant;\n /**\n * A destructive action at the START of the row, apart from Save and Cancel — the\n * \"Delete\" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger\n * button, or an element of your own (a {@link DangerConfirm}, say). With it the row\n * is `between`-aligned unless `align` says otherwise.\n */\n destructive?: ReactNode | FormActionsDestructive;\n /** Horizontal alignment. Default `end` (`between` with a `destructive` action). */\n align?: FormActionsAlign;\n /** See {@link FormActionsPlacement}. Default `inline`. */\n placement?: FormActionsPlacement;\n /** The `id` of the `<form>` the save button submits, when the row is rendered\n * outside it (a dialog's footer slot). */\n form?: string;\n /** Extra actions, placed before Cancel. */\n children?: ReactNode;\n}\n\nfunction isDestructiveData(value: unknown): value is FormActionsDestructive {\n return typeof value === \"object\" && value !== null && !isValidElement(value) && \"onClick\" in value;\n}\n\n/**\n * The Save / Cancel row every form, wizard-step form and dialog ends in — kastlan's\n * `FormActions`, with the labels from the provider, a pending state and a place for\n * the destructive action.\n *\n * ```tsx\n * <form onSubmit={form.handleSubmit(save)}>\n * …\n * <FormActions onCancel={close} pending={mutation.isPending} />\n * </form>\n * ```\n *\n * The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`\n * so the button's name stays its text; `aria-busy` is what says it is working.\n */\nexport function FormActions({\n onCancel,\n onSubmit,\n submitLabel,\n cancelLabel,\n pendingLabel,\n pending = false,\n submitDisabled = false,\n submitDisabledReason,\n submitVariant = \"brand\",\n destructive,\n align,\n placement = \"inline\",\n form,\n children,\n className,\n style,\n ...rest\n}: FormActionsProps) {\n const labels = useKitLabels(\"form\", DEFAULT_FORM_ACTIONS_LABELS);\n const hasDestructive = destructive !== undefined && destructive !== null && destructive !== false;\n const justify = align ?? (hasDestructive ? \"between\" : \"end\");\n const start = !hasDestructive ? null : isDestructiveData(destructive) ? (\n <Button\n type=\"button\"\n variant=\"ghost\"\n tone=\"danger\"\n onClick={destructive.onClick}\n disabled={destructive.disabled}\n disabledReason={destructive.disabledReason}\n >\n {destructive.label}\n </Button>\n ) : (\n destructive\n );\n const saveLabel = submitLabel ?? labels.save;\n\n return (\n <div\n data-slot=\"form-actions\"\n data-placement={placement}\n {...rest}\n style={\n placement === \"sticky\"\n ? {\n paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\",\n // On the phone's bottom nav, not behind it (keksdose live #361): `bottom-0`\n // pinned the row under AppShell's nav, which covers the page's last ~56px.\n // `--app-nav-h` is the nav's measured height (0px from md up, and outside an\n // AppShell); the 1px overlaps the two top borders into one line.\n bottom: \"max(0px, calc(var(--app-nav-h, 0px) - 1px))\",\n ...style,\n }\n : style\n }\n className={cn(\"flex flex-wrap items-center gap-2\", ALIGN_CLASS[justify], PLACEMENT_CLASS[placement], className)}\n >\n {start && <div className=\"me-auto flex items-center gap-2\">{start}</div>}\n <div className=\"flex flex-wrap items-center gap-2\">\n {children}\n {onCancel && (\n <Button type=\"button\" variant=\"secondary\" onClick={onCancel}>\n {cancelLabel ?? labels.cancel}\n </Button>\n )}\n <Button\n type={onSubmit ? \"button\" : \"submit\"}\n form={form}\n onClick={onSubmit}\n variant={submitVariant}\n disabled={pending || submitDisabled}\n disabledReason={pending ? undefined : submitDisabledReason}\n aria-busy={pending || undefined}\n >\n {pending && <Spinner label={null} className=\"size-4\" />}\n {pending && pendingLabel !== undefined ? pendingLabel : saveLabel}\n </Button>\n </div>\n </div>\n );\n}\n"],"mappings":";AA4II,cA2CI,YA3CJ;AA5IJ,SAAS,sBAAsB;AAE/B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,QAAQ,eAAmC;AAQ7C,MAAM,8BAAiD;AAAA,EAC5D,MAAM;AAAA,EACN,QAAQ;AACV;AAwBA,MAAM,cAAgD;AAAA,EACpD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AACX;AAEA,MAAM,kBAAwD;AAAA,EAC5D,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AACV;AAgDA,SAAS,kBAAkB,OAAiD;AAC1E,SAAO,OAAO,UAAU,YAAY,UAAU,QAAQ,CAAC,eAAe,KAAK,KAAK,aAAa;AAC/F;AAiBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,SAAS,aAAa,QAAQ,2BAA2B;AAC/D,QAAM,iBAAiB,gBAAgB,UAAa,gBAAgB,QAAQ,gBAAgB;AAC5F,QAAM,UAAU,UAAU,iBAAiB,YAAY;AACvD,QAAM,QAAQ,CAAC,iBAAiB,OAAO,kBAAkB,WAAW,IAClE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,SAAS,YAAY;AAAA,MACrB,UAAU,YAAY;AAAA,MACtB,gBAAgB,YAAY;AAAA,MAE3B,sBAAY;AAAA;AAAA,EACf,IAEA;AAEF,QAAM,YAAY,eAAe,OAAO;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,kBAAgB;AAAA,MACf,GAAG;AAAA,MACJ,OACE,cAAc,WACV;AAAA,QACE,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,QAKf,QAAQ;AAAA,QACR,GAAG;AAAA,MACL,IACA;AAAA,MAEN,WAAW,GAAG,qCAAqC,YAAY,OAAO,GAAG,gBAAgB,SAAS,GAAG,SAAS;AAAA,MAE7G;AAAA,iBAAS,oBAAC,SAAI,WAAU,mCAAmC,iBAAM;AAAA,QAClE,qBAAC,SAAI,WAAU,qCACZ;AAAA;AAAA,UACA,YACC,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,SAAS,UAChD,yBAAe,OAAO,QACzB;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,WAAW,WAAW;AAAA,cAC5B;AAAA,cACA,SAAS;AAAA,cACT,SAAS;AAAA,cACT,UAAU,WAAW;AAAA,cACrB,gBAAgB,UAAU,SAAY;AAAA,cACtC,aAAW,WAAW;AAAA,cAErB;AAAA,2BAAW,oBAAC,WAAQ,OAAO,MAAM,WAAU,UAAS;AAAA,gBACpD,WAAW,iBAAiB,SAAY,eAAe;AAAA;AAAA;AAAA,UAC1D;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -2,7 +2,7 @@ import * as react from 'react';
|
|
|
2
2
|
import { ComponentProps, Ref } from 'react';
|
|
3
3
|
import { AmountInput } from './amount-input.js';
|
|
4
4
|
import './calculator.js';
|
|
5
|
-
import '../kit-labels-
|
|
5
|
+
import '../kit-labels-BD2F7sOz.js';
|
|
6
6
|
import './data-table-labels.js';
|
|
7
7
|
import './mini-calendar.js';
|
|
8
8
|
import './calendar-heatmap.js';
|
|
@@ -34,8 +34,7 @@ import './dialog-frame.js';
|
|
|
34
34
|
import './modal.js';
|
|
35
35
|
import '../hooks/use-search-param-state.js';
|
|
36
36
|
import './measured-grid.js';
|
|
37
|
-
import '../feedback
|
|
38
|
-
import '../feedback/feedback-dialog.js';
|
|
37
|
+
import '../feedback-attachment-BYAHJMOr.js';
|
|
39
38
|
import '../feedback/feedback-thread.js';
|
|
40
39
|
import '../feedback/feedback-inbox.js';
|
|
41
40
|
import './account-settings-labels.js';
|
|
@@ -2,7 +2,7 @@ import * as react from 'react';
|
|
|
2
2
|
import { ComponentProps, ReactNode } from 'react';
|
|
3
3
|
import { NumberInput } from './number-input.js';
|
|
4
4
|
import './calculator.js';
|
|
5
|
-
import '../kit-labels-
|
|
5
|
+
import '../kit-labels-BD2F7sOz.js';
|
|
6
6
|
import './data-table-labels.js';
|
|
7
7
|
import './mini-calendar.js';
|
|
8
8
|
import './calendar-heatmap.js';
|
|
@@ -34,8 +34,7 @@ import './dialog-frame.js';
|
|
|
34
34
|
import './modal.js';
|
|
35
35
|
import '../hooks/use-search-param-state.js';
|
|
36
36
|
import './measured-grid.js';
|
|
37
|
-
import '../feedback
|
|
38
|
-
import '../feedback/feedback-dialog.js';
|
|
37
|
+
import '../feedback-attachment-BYAHJMOr.js';
|
|
39
38
|
import '../feedback/feedback-thread.js';
|
|
40
39
|
import '../feedback/feedback-inbox.js';
|
|
41
40
|
import './account-settings-labels.js';
|
|
@@ -2,7 +2,7 @@ import * as react from 'react';
|
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { CalculatorButtonLabels } from './calculator.js';
|
|
4
4
|
import { NumberPadSheetLabels } from './numpad-sheet.js';
|
|
5
|
-
import '../kit-labels-
|
|
5
|
+
import '../kit-labels-BD2F7sOz.js';
|
|
6
6
|
import './data-table-labels.js';
|
|
7
7
|
import './mini-calendar.js';
|
|
8
8
|
import './calendar-heatmap.js';
|
|
@@ -34,8 +34,7 @@ import './dialog-frame.js';
|
|
|
34
34
|
import './modal.js';
|
|
35
35
|
import '../hooks/use-search-param-state.js';
|
|
36
36
|
import './measured-grid.js';
|
|
37
|
-
import '../feedback
|
|
38
|
-
import '../feedback/feedback-dialog.js';
|
|
37
|
+
import '../feedback-attachment-BYAHJMOr.js';
|
|
39
38
|
import '../feedback/feedback-thread.js';
|
|
40
39
|
import '../feedback/feedback-inbox.js';
|
|
41
40
|
import './account-settings-labels.js';
|