@eifi1/ui-kit 0.15.4 → 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.
Files changed (98) hide show
  1. package/README.md +5 -5
  2. package/dist/chart.d.ts +2 -3
  3. package/dist/components/alert-banner.js +1 -1
  4. package/dist/components/alert-banner.js.map +1 -1
  5. package/dist/components/amount-input.d.ts +5 -3
  6. package/dist/components/amount-input.js +1 -1
  7. package/dist/components/amount-input.js.map +1 -1
  8. package/dist/components/button-group.d.ts +2 -3
  9. package/dist/components/calculator.d.ts +2 -3
  10. package/dist/components/checkbox.js +1 -1
  11. package/dist/components/checkbox.js.map +1 -1
  12. package/dist/components/choice-card.js +1 -1
  13. package/dist/components/choice-card.js.map +1 -1
  14. package/dist/components/copy-button.d.ts +2 -3
  15. package/dist/components/error-boundary.js +1 -1
  16. package/dist/components/error-boundary.js.map +1 -1
  17. package/dist/components/facing-pair.d.ts +2 -3
  18. package/dist/components/file-button.d.ts +2 -3
  19. package/dist/components/file-dropzone.d.ts +2 -3
  20. package/dist/components/file-dropzone.js +1 -1
  21. package/dist/components/file-dropzone.js.map +1 -1
  22. package/dist/components/form-actions.d.ts +2 -3
  23. package/dist/components/money-field.d.ts +2 -3
  24. package/dist/components/number-field.d.ts +2 -3
  25. package/dist/components/number-input.d.ts +2 -3
  26. package/dist/components/numpad-sheet.d.ts +2 -3
  27. package/dist/components/series-chart.d.ts +2 -3
  28. package/dist/components/settings-fields.d.ts +2 -3
  29. package/dist/components/text-link.d.ts +2 -3
  30. package/dist/components/time-input.d.ts +2 -3
  31. package/dist/components/ui.d.ts +2 -3
  32. package/dist/components/ui.js +7 -7
  33. package/dist/components/ui.js.map +1 -1
  34. package/dist/feedback/feedback-attachment.d.ts +2 -82
  35. package/dist/feedback/feedback-attachment.js +271 -54
  36. package/dist/feedback/feedback-attachment.js.map +1 -1
  37. package/dist/feedback/feedback-dialog.d.ts +2 -105
  38. package/dist/feedback/feedback-dialog.js +56 -25
  39. package/dist/feedback/feedback-dialog.js.map +1 -1
  40. package/dist/feedback/feedback-inbox.d.ts +1 -1
  41. package/dist/feedback/feedback-thread.d.ts +2 -2
  42. package/dist/feedback-attachment-BYAHJMOr.d.ts +289 -0
  43. package/dist/feedback.d.ts +1 -2
  44. package/dist/hooks/use-file-drop.d.ts +2 -3
  45. package/dist/i18n/defaults.d.ts +2 -3
  46. package/dist/i18n/kit-labels.d.ts +2 -3
  47. package/dist/i18n/locales/de-CH-informal.d.ts +2 -3
  48. package/dist/i18n/locales/de-CH.d.ts +2 -3
  49. package/dist/i18n/locales/de-informal.d.ts +2 -3
  50. package/dist/i18n/locales/de.d.ts +2 -3
  51. package/dist/i18n/locales/de.js +5 -1
  52. package/dist/i18n/locales/de.js.map +1 -1
  53. package/dist/i18n/locales/es.d.ts +2 -3
  54. package/dist/i18n/locales/es.js +5 -1
  55. package/dist/i18n/locales/es.js.map +1 -1
  56. package/dist/i18n/locales/fr.d.ts +2 -3
  57. package/dist/i18n/locales/fr.js +5 -1
  58. package/dist/i18n/locales/fr.js.map +1 -1
  59. package/dist/i18n/locales/hu.d.ts +2 -3
  60. package/dist/i18n/locales/hu.js +5 -1
  61. package/dist/i18n/locales/hu.js.map +1 -1
  62. package/dist/i18n/locales/it.d.ts +2 -3
  63. package/dist/i18n/locales/it.js +5 -1
  64. package/dist/i18n/locales/it.js.map +1 -1
  65. package/dist/i18n/locales/zh.d.ts +2 -3
  66. package/dist/i18n/locales/zh.js +5 -1
  67. package/dist/i18n/locales/zh.js.map +1 -1
  68. package/dist/index.d.ts +2 -3
  69. package/dist/{kit-labels-CnnBd-2N.d.ts → kit-labels-BD2F7sOz.d.ts} +2 -3
  70. package/dist/rhf/fields.d.ts +2 -3
  71. package/dist/rhf/form.d.ts +2 -3
  72. package/dist/rhf.d.ts +2 -3
  73. package/dist/shell/app-shell.d.ts +2 -3
  74. package/dist/shell/top-bar-brand.d.ts +2 -3
  75. package/dist/shell.d.ts +2 -3
  76. package/dist/theme/palette-derive.d.ts +3 -0
  77. package/dist/theme/palette-derive.js +7 -0
  78. package/dist/theme/palette-derive.js.map +1 -1
  79. package/dist/wizard/stepper-nav.d.ts +2 -3
  80. package/dist/wizard.d.ts +2 -3
  81. package/package.json +4 -2
  82. package/src/components/alert-banner.tsx +1 -1
  83. package/src/components/amount-input.tsx +8 -1
  84. package/src/components/checkbox.tsx +1 -1
  85. package/src/components/choice-card.tsx +1 -1
  86. package/src/components/error-boundary.tsx +1 -1
  87. package/src/components/file-dropzone.tsx +1 -1
  88. package/src/components/ui.tsx +7 -7
  89. package/src/feedback/feedback-attachment.tsx +441 -96
  90. package/src/feedback/feedback-dialog.tsx +147 -50
  91. package/src/i18n/locales/de.ts +4 -0
  92. package/src/i18n/locales/es.ts +4 -0
  93. package/src/i18n/locales/fr.ts +4 -0
  94. package/src/i18n/locales/hu.ts +4 -0
  95. package/src/i18n/locales/it.ts +4 -0
  96. package/src/i18n/locales/zh.ts +4 -0
  97. package/src/theme/palette-derive.ts +10 -0
  98. package/tokens.css +9 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/choice-card.tsx"],"sourcesContent":["import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef } from \"react\";\nimport type {\n ButtonHTMLAttributes,\n ChangeEvent,\n ComponentType,\n InputHTMLAttributes,\n MouseEvent,\n ReactElement,\n ReactNode,\n Ref,\n} from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n/**\n * A checkbox or a radio, presented as a bordered card: a title, a line of description,\n * an optional icon — and the whole card is the hit area.\n *\n * Kastlan built this twice by hand: the \"manage roles\" dialog wraps a `Checkbox` in a\n * bordered `<label>` per role, and the lease wizard's \"set up recurring rent\" option is\n * a `Checkbox` with `className=\"rounded-md border p-3\"`. Neither had a focus ring on\n * the card or a checked look beyond the 16px box, and the role picker's border stayed\n * grey whether the role was on or off.\n *\n * Still a native `<input>` underneath, for the reasons {@link Checkbox} gives: it\n * submits with its form, answers to `required`, and a radio set sharing a `name` gets\n * the browser's own arrow-key behaviour — which already flips in a right-to-left page.\n * The card is a `<label>` wrapped round it, so a click anywhere on the card lands on\n * the input; the input is NAMED by the title alone and DESCRIBED by the description,\n * so a screen reader does not read the whole card as its name.\n *\n * Checked is said three ways, none of them colour alone: the box's tick (or the\n * radio's dot), a heavier border, and the brand-tinted surface.\n */\n\nexport type ChoiceCardType = \"checkbox\" | \"radio\";\n\nexport interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"title\"> {\n /** \"checkbox\" (default) for an on/off option or one of several; \"radio\" for one of\n * a set — give every card of the set the same `name`, or use {@link ChoiceCardGroup}. */\n type?: ChoiceCardType;\n /** The option's name — the input's accessible name. */\n title: ReactNode;\n /** A line or two under the title. Attached with `aria-describedby`. */\n description?: ReactNode;\n /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n /** Checkbox only: \"some but not all\". See {@link CheckboxProps.indeterminate}. */\n indeterminate?: boolean;\n /** Paints the card and sets `aria-invalid` together. */\n invalid?: boolean;\n /** What is wrong, in the caller's words. Rendered in the card and attached with\n * `aria-describedby`; implies `invalid`. */\n error?: ReactNode;\n /** The checked state as a boolean. Fires alongside `onChange`, never instead of it. */\n onCheckedChange?: (checked: boolean) => void;\n /** Classes for the `<input>`. `className` styles the card. */\n inputClassName?: string;\n /**\n * Must be ticked to submit. Reaches the `<input>` as the native `required` (a\n * `<form>` refuses to submit without it, a screen reader announces \"required\"),\n * and draws the kit's `aria-hidden` star after the title — {@link Checkbox}'s\n * contract, down to writing the title WITHOUT a literal \"*\". Inside a\n * {@link ChoiceCardGroup} the star goes on the legend instead, once.\n */\n required?: boolean;\n}\n\n/** Set by {@link ChoiceCardGroup}: its legend carries the one required mark, so the\n * cards inside it draw none of their own. Private — not a prop a caller could set\n * by accident on a lone card. */\nconst InGroupContext = createContext(false);\n\n/** The kit's required mark — {@link Label}'s: `aria-hidden`, because the word is\n * announced from the control and a star read out in the name is only noise. */\nfunction RequiredMark() {\n return (\n <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n *\n </span>\n );\n}\n\n// The card. `has-[:checked]` and `has-[:focus-visible]` read the INPUT's state, so an\n// uncontrolled card (`defaultChecked`, a plain form) looks right with no React state.\nconst CARD =\n \"flex cursor-pointer items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-sm transition-colors \" +\n \"hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)] \" +\n \"has-[:checked]:border-[var(--brand)] has-[:checked]:bg-[var(--brand-bg)] has-[:checked]:ring-1 has-[:checked]:ring-[var(--brand)] \" +\n // The focus mark is the CARD's, not the 16px box's: the card is what was clicked and\n // what the eye is on. An OUTLINE rather than a ring, because the checked state already\n // spends the ring — two `ring-*` widths on one element are decided by stylesheet\n // order, and the loser would be the focus mark. Offset, so the two never merge.\n \"has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] \" +\n // Read from the input too, so a card disabled by its `<fieldset>` fades as well.\n \"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60\";\n\n// No hover offer on a card that cannot be changed.\nconst CARD_DISABLED = \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\";\n\nconst CARD_INVALID =\n \"border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] has-[:checked]:border-[var(--danger-border)] has-[:checked]:ring-[var(--danger-border)]\";\n\nconst BOX =\n \"peer size-4 shrink-0 appearance-none border border-[var(--border-strong)] bg-[var(--bg-surface)] transition-colors \" +\n \"checked:border-[var(--brand)] focus:outline-none disabled:cursor-not-allowed\";\nconst CHECKBOX = \"rounded-[4px] checked:bg-[var(--brand)]\";\n// A radio's dot is its BORDER: a 5px brand border round a surface-coloured 4px\n// centre. No glyph to lay over it, and it scales with the box.\nconst RADIO = \"rounded-full checked:border-[5px]\";\n\nexport const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function ChoiceCard(\n {\n type = \"checkbox\",\n title,\n description,\n icon: Icon,\n indeterminate = false,\n invalid,\n error,\n onCheckedChange,\n onChange,\n className,\n inputClassName,\n id,\n disabled,\n required,\n ...rest\n },\n ref,\n) {\n const inGroup = useContext(InGroupContext);\n const generated = useId();\n const inputId = id ?? generated;\n const titleId = `${inputId}-title`;\n const descriptionId = `${inputId}-description`;\n const errorId = `${inputId}-error`;\n const showDescription = hasMessage(description);\n const showError = hasMessage(error);\n const isInvalid = Boolean(invalid) || showError;\n const mixed = type === \"checkbox\" && indeterminate;\n\n const local = useRef<HTMLInputElement | null>(null);\n const setRef = useCallback(\n (node: HTMLInputElement | null) => {\n local.current = node;\n assignRef(ref, node);\n },\n [ref],\n );\n // After every render, as Checkbox does: a click clears the DOM property.\n useEffect(() => {\n if (local.current) local.current.indeterminate = mixed;\n });\n\n return (\n <label\n htmlFor={inputId}\n className={cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className)}\n >\n {/* A 20px cell, so the box centres on the title's first line (text-sm). */}\n <span className=\"relative flex h-5 shrink-0 items-center\">\n <input\n ref={setRef}\n id={inputId}\n disabled={disabled}\n required={required}\n {...rest}\n type={type}\n aria-labelledby={rest[\"aria-labelledby\"] ?? titleId}\n aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n aria-describedby={mergeDescribedBy(\n rest[\"aria-describedby\"],\n showDescription && descriptionId,\n showError && errorId,\n )}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n onCheckedChange?.(e.target.checked);\n }}\n className={cn(\n BOX,\n type === \"radio\" ? RADIO : CHECKBOX,\n mixed && \"border-[var(--brand)] bg-[var(--brand)]\",\n inputClassName,\n )}\n />\n {type === \"checkbox\" &&\n (mixed ? (\n <Minus\n aria-hidden\n strokeWidth={3}\n className=\"pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]\"\n />\n ) : (\n <Check\n aria-hidden\n strokeWidth={3}\n className=\"pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible\"\n />\n ))}\n </span>\n {Icon && <Icon aria-hidden className=\"mt-0.5 size-4 shrink-0 text-[var(--text-secondary)]\" />}\n <span className=\"min-w-0 flex-1\">\n <span\n id={titleId}\n // `select-none`: a double-click to toggle twice would otherwise select the words.\n className=\"block select-none text-sm font-medium leading-5 text-[var(--text-primary)]\"\n >\n {title}\n {required && !inGroup && <RequiredMark />}\n </span>\n {showDescription && (\n <span id={descriptionId} className=\"mt-0.5 block text-xs text-[var(--text-muted)]\">\n {description}\n </span>\n )}\n {showError && (\n <span id={errorId} className=\"mt-1 block text-[11px] leading-tight text-[var(--danger)]\">\n {error}\n </span>\n )}\n </span>\n </label>\n );\n});\nChoiceCard.displayName = \"ChoiceCard\";\n\n/* ── ActionCard ──────────────────────────────────────────────────────────── */\n\n/** The colour of {@link ActionCardProps.meta}. */\nexport type ActionCardMetaTone = \"muted\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst META_TONE: Record<ActionCardMetaTone, string> = {\n muted: \"text-[var(--text-muted)]\",\n warning: \"text-[var(--warning)]\",\n danger: \"text-[var(--danger)]\",\n info: \"text-[var(--info)]\",\n success: \"text-[var(--success)]\",\n};\n\n/** The colour of {@link ActionCardProps.icon}. `default` is the secondary text colour\n * the icon has always had; `brand` tints it (keksdose's privacy enrolment). */\nexport type ActionCardIconTone = \"default\" | \"muted\" | \"brand\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst ICON_TONE: Record<ActionCardIconTone, string> = {\n default: \"text-[var(--text-secondary)]\",\n ...META_TONE,\n brand: \"text-[var(--brand)]\",\n};\n\n/** What {@link ActionCardProps.renderLink} (and the provider's `linkComponent`) is\n * handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface ActionCardLinkProps {\n href: string;\n /** The card's whole look — keep it. */\n className: string;\n children: ReactNode;\n ref?: Ref<HTMLAnchorElement>;\n onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n id?: string;\n [key: `aria-${string}`]: string | boolean | number | undefined;\n [key: `data-${string}`]: unknown;\n}\n\nexport interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"title\"> {\n /** What the card does — the button's accessible name. */\n title: ReactNode;\n /** A line or two on what it means. Attached with `aria-describedby`. */\n description?: ReactNode;\n /**\n * What it costs, or what else to know — a third line, said as prose and not as fine\n * print (keksdose's custody choice: both options are legitimate and neither is free,\n * so a card listing only benefits would be selling rather than explaining). Attached\n * with `aria-describedby` after the description.\n */\n meta?: ReactNode;\n /** The meta line's colour. Default `muted`; keksdose's cost line is `warning`. */\n metaTone?: ActionCardMetaTone;\n /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n icon?: ChoiceCardProps[\"icon\"];\n /** The icon's colour. Default `default` (the secondary text colour). */\n iconTone?: ActionCardIconTone;\n /** Classes on the icon, after {@link iconTone} — a size, a tinted tile behind it. */\n iconClassName?: string;\n /**\n * Makes the card a LINK to another page rather than a button that acts: kastlan's\n * section tiles on the group overview (group-overview-page), each an icon, a name and\n * a line on what is there. A real `<a href>`, so a middle click opens it in a new\n * tab. A `disabled` card renders the inert button instead — a link cannot be\n * disabled. The ref then reaches the `<a>`.\n */\n href?: string;\n /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n * linkComponent>`, then a plain `<a>`. Ignored without `href`. */\n renderLink?: (props: ActionCardLinkProps) => ReactElement;\n}\n\n/**\n * A {@link ChoiceCard} that ACTS rather than holds a state: a `<button>` with the\n * card's icon, title and description, plus a `meta` line, that runs `onClick` the\n * moment it is pressed. keksdose's privacy enrolment (privacy-enroll-dialog:345,\n * `CustodyOption`) offers two custody modes this way — picking one IS the next step,\n * so there is no checked state to show and no \"Continue\" to press after it. With\n * `href` it is the same card as a link (kastlan's overview section tiles).\n *\n * A separate component rather than `ChoiceCard as=\"button\"`: a ChoiceCard is an\n * `<input>` (its ref, its `checked`, its form value), and a button shares none of it.\n * Named by the title alone and described by the rest, so a screen reader hears\n * \"Keep the key yourself, button\" and then the explanation, not one long name.\n */\nexport const ActionCard = forwardRef<HTMLButtonElement, ActionCardProps>(function ActionCard(\n {\n title,\n description,\n meta,\n metaTone = \"muted\",\n icon: Icon,\n iconTone = \"default\",\n iconClassName,\n href,\n renderLink,\n className,\n id,\n type = \"button\",\n ...rest\n },\n ref,\n) {\n const kitLink = useKitLink();\n const generated = useId();\n const baseId = id ?? generated;\n const titleId = `${baseId}-title`;\n const descriptionId = `${baseId}-description`;\n const metaId = `${baseId}-meta`;\n const showDescription = hasMessage(description);\n const showMeta = hasMessage(meta);\n const look = cn(\n \"flex w-full items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 text-start shadow-sm transition-colors\",\n \"hover:border-[var(--brand)] hover:bg-[var(--bg-hover)]\",\n // The outline, as on ChoiceCard: the card is what the eye is on.\n \"focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n \"disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-[var(--border)] disabled:hover:bg-[var(--bg-surface)]\",\n className,\n );\n const labelledBy = rest[\"aria-labelledby\"] ?? titleId;\n const describedBy = mergeDescribedBy(\n rest[\"aria-describedby\"],\n showDescription && descriptionId,\n showMeta && metaId,\n );\n const body = (\n <>\n {Icon && <Icon aria-hidden className={cn(\"mt-0.5 size-5 shrink-0\", ICON_TONE[iconTone], iconClassName)} />}\n <span className=\"min-w-0 flex-1 space-y-1\">\n <span id={titleId} className=\"block text-sm font-medium leading-5 text-[var(--text-primary)]\">\n {title}\n </span>\n {showDescription && (\n <span id={descriptionId} className=\"block text-sm text-[var(--text-secondary)]\">\n {description}\n </span>\n )}\n {showMeta && (\n <span id={metaId} className={cn(\"block text-sm\", META_TONE[metaTone])}>\n {meta}\n </span>\n )}\n </span>\n </>\n );\n\n if (href !== undefined && !rest.disabled) {\n // The button-only attributes stay behind; `aria-*`, `data-*` and handlers ride along.\n const {\n disabled: _disabled,\n form: _form,\n formAction: _formAction,\n name: _name,\n value: _value,\n onClick,\n ...anchorRest\n } = rest;\n const linkProps: ActionCardLinkProps = {\n ...(anchorRest as Partial<ActionCardLinkProps>),\n ref: ref as unknown as Ref<HTMLAnchorElement>,\n id,\n href,\n \"aria-labelledby\": labelledBy,\n \"aria-describedby\": describedBy,\n onClick: onClick as unknown as ActionCardLinkProps[\"onClick\"],\n className: look,\n children: body,\n };\n const render = pickLinkRenderer(renderLink, kitLink, href);\n if (render) return <RenderedActionLink render={render} {...linkProps} />;\n const { children: content, ...anchor } = linkProps;\n return <a {...anchor}>{content}</a>;\n }\n\n return (\n <button\n ref={ref}\n id={id}\n type={type}\n {...rest}\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n className={look}\n >\n {body}\n </button>\n );\n});\nActionCard.displayName = \"ActionCard\";\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedActionLink({\n render,\n ...props\n}: ActionCardLinkProps & { render: (props: ActionCardLinkProps) => ReactElement }) {\n return render(props);\n}\n\n/* ── ChoiceCardGroup ─────────────────────────────────────────────────────── */\n\nexport interface ChoiceCardOption<T extends string> {\n value: T;\n title: ReactNode;\n description?: ReactNode;\n icon?: ChoiceCardProps[\"icon\"];\n disabled?: boolean;\n}\n\ninterface ChoiceCardGroupBaseProps<T extends string> {\n options: ChoiceCardOption<T>[];\n /** The question the cards answer. Rendered as the fieldset's `<legend>`, which is\n * what names the group. Without one, pass `aria-label`. */\n legend?: ReactNode;\n \"aria-label\"?: string;\n /** Shared by every input — what a plain form submits under. Generated if omitted. */\n name?: string;\n /** Classes for the card grid. Default: one column, two from `sm` up. */\n className?: string;\n /** Classes for every card. */\n cardClassName?: string;\n disabled?: boolean;\n /** What is wrong with the answer as a whole. Rendered under the cards and attached\n * to the fieldset. */\n error?: ReactNode;\n /**\n * An answer is needed. Draws the required star after the `legend` (none without\n * one — the name then comes from `aria-label`, which has nowhere to draw it), and\n * reaches the inputs as the native `required`:\n * - radios: every radio of the set, which is how HTML marks a radio group — the\n * group is satisfied by any one of them, and each announces \"required\";\n * - checkboxes: every box while NONE is ticked, dropped from all of them once one\n * is — \"at least one\", which checkboxes cannot say natively. A form then refuses\n * to submit an empty set, and nothing is left demanding a second box.\n */\n required?: boolean;\n}\n\n/** One of the set: radios. `value` is `null` while nothing is chosen. */\nexport interface ChoiceCardSingleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n multiple?: false;\n value: T | null;\n onChange: (value: T) => void;\n}\n\n/** Any of the set: checkboxes. */\nexport interface ChoiceCardMultipleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n multiple: true;\n value: T[];\n onChange: (value: T[]) => void;\n}\n\nexport type ChoiceCardGroupProps<T extends string> =\n | ChoiceCardSingleProps<T>\n | ChoiceCardMultipleProps<T>;\n\n/**\n * A set of {@link ChoiceCard}s answering one question, in a `<fieldset>`.\n *\n * `multiple` picks the input: radios (one of the set, the browser's arrow keys\n * between them) or checkboxes (any of the set, Tab between them). The value is kept\n * in the order of `options`, not the order the boxes were ticked, so a list saved\n * from it does not depend on the order someone clicked in.\n */\nexport function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>) {\n const { options, legend, name, className, cardClassName, disabled, error, required } = props;\n const generated = useId();\n const groupName = name ?? generated;\n const errorId = `${generated}-error`;\n const showError = hasMessage(error);\n\n const isChecked = (v: T) => (props.multiple ? props.value.includes(v) : props.value === v);\n const toggle = (v: T, on: boolean) => {\n if (props.multiple) {\n const next = new Set(props.value);\n if (on) next.add(v);\n else next.delete(v);\n props.onChange(options.map((o) => o.value).filter((x) => next.has(x)));\n } else if (on) {\n props.onChange(v);\n }\n };\n\n return (\n <InGroupContext.Provider value={true}>\n <fieldset\n aria-label={props[\"aria-label\"]}\n aria-describedby={showError ? errorId : undefined}\n disabled={disabled}\n className=\"min-w-0\"\n >\n {legend !== undefined && (\n <legend className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n {legend}\n {required && <RequiredMark />}\n </legend>\n )}\n <div className={cn(\"grid gap-2 sm:grid-cols-2\", className)}>\n {options.map((o) => (\n <ChoiceCard\n key={o.value}\n type={props.multiple ? \"checkbox\" : \"radio\"}\n name={groupName}\n value={o.value}\n title={o.title}\n description={o.description}\n icon={o.icon}\n disabled={o.disabled}\n invalid={showError}\n required={required && (!props.multiple || props.value.length === 0) ? true : undefined}\n checked={isChecked(o.value)}\n onCheckedChange={(on) => toggle(o.value, on)}\n className={cardClassName}\n />\n ))}\n </div>\n {showError && (\n <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n {error}\n </p>\n )}\n </fieldset>\n </InGroupContext.Provider>\n );\n}\n"],"mappings":"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","names":["ChoiceCard","ActionCard"]}
1
+ {"version":3,"sources":["../../src/components/choice-card.tsx"],"sourcesContent":["import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef } from \"react\";\nimport type {\n ButtonHTMLAttributes,\n ChangeEvent,\n ComponentType,\n InputHTMLAttributes,\n MouseEvent,\n ReactElement,\n ReactNode,\n Ref,\n} from \"react\";\nimport { Check, Minus } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n/**\n * A checkbox or a radio, presented as a bordered card: a title, a line of description,\n * an optional icon — and the whole card is the hit area.\n *\n * Kastlan built this twice by hand: the \"manage roles\" dialog wraps a `Checkbox` in a\n * bordered `<label>` per role, and the lease wizard's \"set up recurring rent\" option is\n * a `Checkbox` with `className=\"rounded-md border p-3\"`. Neither had a focus ring on\n * the card or a checked look beyond the 16px box, and the role picker's border stayed\n * grey whether the role was on or off.\n *\n * Still a native `<input>` underneath, for the reasons {@link Checkbox} gives: it\n * submits with its form, answers to `required`, and a radio set sharing a `name` gets\n * the browser's own arrow-key behaviour — which already flips in a right-to-left page.\n * The card is a `<label>` wrapped round it, so a click anywhere on the card lands on\n * the input; the input is NAMED by the title alone and DESCRIBED by the description,\n * so a screen reader does not read the whole card as its name.\n *\n * Checked is said three ways, none of them colour alone: the box's tick (or the\n * radio's dot), a heavier border, and the brand-tinted surface.\n */\n\nexport type ChoiceCardType = \"checkbox\" | \"radio\";\n\nexport interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"title\"> {\n /** \"checkbox\" (default) for an on/off option or one of several; \"radio\" for one of\n * a set — give every card of the set the same `name`, or use {@link ChoiceCardGroup}. */\n type?: ChoiceCardType;\n /** The option's name — the input's accessible name. */\n title: ReactNode;\n /** A line or two under the title. Attached with `aria-describedby`. */\n description?: ReactNode;\n /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n icon?: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n /** Checkbox only: \"some but not all\". See {@link CheckboxProps.indeterminate}. */\n indeterminate?: boolean;\n /** Paints the card and sets `aria-invalid` together. */\n invalid?: boolean;\n /** What is wrong, in the caller's words. Rendered in the card and attached with\n * `aria-describedby`; implies `invalid`. */\n error?: ReactNode;\n /** The checked state as a boolean. Fires alongside `onChange`, never instead of it. */\n onCheckedChange?: (checked: boolean) => void;\n /** Classes for the `<input>`. `className` styles the card. */\n inputClassName?: string;\n /**\n * Must be ticked to submit. Reaches the `<input>` as the native `required` (a\n * `<form>` refuses to submit without it, a screen reader announces \"required\"),\n * and draws the kit's `aria-hidden` star after the title — {@link Checkbox}'s\n * contract, down to writing the title WITHOUT a literal \"*\". Inside a\n * {@link ChoiceCardGroup} the star goes on the legend instead, once.\n */\n required?: boolean;\n}\n\n/** Set by {@link ChoiceCardGroup}: its legend carries the one required mark, so the\n * cards inside it draw none of their own. Private — not a prop a caller could set\n * by accident on a lone card. */\nconst InGroupContext = createContext(false);\n\n/** The kit's required mark — {@link Label}'s: `aria-hidden`, because the word is\n * announced from the control and a star read out in the name is only noise. */\nfunction RequiredMark() {\n return (\n <span aria-hidden className=\"ms-0.5 text-[var(--danger)]\">\n *\n </span>\n );\n}\n\n// The card. `has-[:checked]` and `has-[:focus-visible]` read the INPUT's state, so an\n// uncontrolled card (`defaultChecked`, a plain form) looks right with no React state.\nconst CARD =\n \"flex cursor-pointer items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-sm transition-colors \" +\n \"hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)] \" +\n \"has-[:checked]:border-[var(--brand)] has-[:checked]:bg-[var(--brand-bg)] has-[:checked]:ring-1 has-[:checked]:ring-[var(--brand)] \" +\n // The focus mark is the CARD's, not the 16px box's: the card is what was clicked and\n // what the eye is on. An OUTLINE rather than a ring, because the checked state already\n // spends the ring — two `ring-*` widths on one element are decided by stylesheet\n // order, and the loser would be the focus mark. Offset, so the two never merge.\n \"has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] \" +\n // Read from the input too, so a card disabled by its `<fieldset>` fades as well.\n \"has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60\";\n\n// No hover offer on a card that cannot be changed.\nconst CARD_DISABLED = \"hover:border-[var(--border)] hover:bg-[var(--bg-surface)]\";\n\nconst CARD_INVALID =\n \"border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] has-[:checked]:border-[var(--danger-border-strong)] has-[:checked]:ring-[var(--danger-border-strong)]\";\n\nconst BOX =\n \"peer size-4 shrink-0 appearance-none border border-[var(--border-strong)] bg-[var(--bg-surface)] transition-colors \" +\n \"checked:border-[var(--brand)] focus:outline-none disabled:cursor-not-allowed\";\nconst CHECKBOX = \"rounded-[4px] checked:bg-[var(--brand)]\";\n// A radio's dot is its BORDER: a 5px brand border round a surface-coloured 4px\n// centre. No glyph to lay over it, and it scales with the box.\nconst RADIO = \"rounded-full checked:border-[5px]\";\n\nexport const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function ChoiceCard(\n {\n type = \"checkbox\",\n title,\n description,\n icon: Icon,\n indeterminate = false,\n invalid,\n error,\n onCheckedChange,\n onChange,\n className,\n inputClassName,\n id,\n disabled,\n required,\n ...rest\n },\n ref,\n) {\n const inGroup = useContext(InGroupContext);\n const generated = useId();\n const inputId = id ?? generated;\n const titleId = `${inputId}-title`;\n const descriptionId = `${inputId}-description`;\n const errorId = `${inputId}-error`;\n const showDescription = hasMessage(description);\n const showError = hasMessage(error);\n const isInvalid = Boolean(invalid) || showError;\n const mixed = type === \"checkbox\" && indeterminate;\n\n const local = useRef<HTMLInputElement | null>(null);\n const setRef = useCallback(\n (node: HTMLInputElement | null) => {\n local.current = node;\n assignRef(ref, node);\n },\n [ref],\n );\n // After every render, as Checkbox does: a click clears the DOM property.\n useEffect(() => {\n if (local.current) local.current.indeterminate = mixed;\n });\n\n return (\n <label\n htmlFor={inputId}\n className={cn(CARD, disabled && CARD_DISABLED, isInvalid && CARD_INVALID, className)}\n >\n {/* A 20px cell, so the box centres on the title's first line (text-sm). */}\n <span className=\"relative flex h-5 shrink-0 items-center\">\n <input\n ref={setRef}\n id={inputId}\n disabled={disabled}\n required={required}\n {...rest}\n type={type}\n aria-labelledby={rest[\"aria-labelledby\"] ?? titleId}\n aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n aria-describedby={mergeDescribedBy(\n rest[\"aria-describedby\"],\n showDescription && descriptionId,\n showError && errorId,\n )}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n onCheckedChange?.(e.target.checked);\n }}\n className={cn(\n BOX,\n type === \"radio\" ? RADIO : CHECKBOX,\n mixed && \"border-[var(--brand)] bg-[var(--brand)]\",\n inputClassName,\n )}\n />\n {type === \"checkbox\" &&\n (mixed ? (\n <Minus\n aria-hidden\n strokeWidth={3}\n className=\"pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]\"\n />\n ) : (\n <Check\n aria-hidden\n strokeWidth={3}\n className=\"pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible\"\n />\n ))}\n </span>\n {Icon && <Icon aria-hidden className=\"mt-0.5 size-4 shrink-0 text-[var(--text-secondary)]\" />}\n <span className=\"min-w-0 flex-1\">\n <span\n id={titleId}\n // `select-none`: a double-click to toggle twice would otherwise select the words.\n className=\"block select-none text-sm font-medium leading-5 text-[var(--text-primary)]\"\n >\n {title}\n {required && !inGroup && <RequiredMark />}\n </span>\n {showDescription && (\n <span id={descriptionId} className=\"mt-0.5 block text-xs text-[var(--text-muted)]\">\n {description}\n </span>\n )}\n {showError && (\n <span id={errorId} className=\"mt-1 block text-[11px] leading-tight text-[var(--danger)]\">\n {error}\n </span>\n )}\n </span>\n </label>\n );\n});\nChoiceCard.displayName = \"ChoiceCard\";\n\n/* ── ActionCard ──────────────────────────────────────────────────────────── */\n\n/** The colour of {@link ActionCardProps.meta}. */\nexport type ActionCardMetaTone = \"muted\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst META_TONE: Record<ActionCardMetaTone, string> = {\n muted: \"text-[var(--text-muted)]\",\n warning: \"text-[var(--warning)]\",\n danger: \"text-[var(--danger)]\",\n info: \"text-[var(--info)]\",\n success: \"text-[var(--success)]\",\n};\n\n/** The colour of {@link ActionCardProps.icon}. `default` is the secondary text colour\n * the icon has always had; `brand` tints it (keksdose's privacy enrolment). */\nexport type ActionCardIconTone = \"default\" | \"muted\" | \"brand\" | \"warning\" | \"danger\" | \"info\" | \"success\";\n\nconst ICON_TONE: Record<ActionCardIconTone, string> = {\n default: \"text-[var(--text-secondary)]\",\n ...META_TONE,\n brand: \"text-[var(--brand)]\",\n};\n\n/** What {@link ActionCardProps.renderLink} (and the provider's `linkComponent`) is\n * handed. Spread it onto your router's link — `({ href, ...p }) => <Link to={href} {...p} />`. */\nexport interface ActionCardLinkProps {\n href: string;\n /** The card's whole look — keep it. */\n className: string;\n children: ReactNode;\n ref?: Ref<HTMLAnchorElement>;\n onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n id?: string;\n [key: `aria-${string}`]: string | boolean | number | undefined;\n [key: `data-${string}`]: unknown;\n}\n\nexport interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"title\"> {\n /** What the card does — the button's accessible name. */\n title: ReactNode;\n /** A line or two on what it means. Attached with `aria-describedby`. */\n description?: ReactNode;\n /**\n * What it costs, or what else to know — a third line, said as prose and not as fine\n * print (keksdose's custody choice: both options are legitimate and neither is free,\n * so a card listing only benefits would be selling rather than explaining). Attached\n * with `aria-describedby` after the description.\n */\n meta?: ReactNode;\n /** The meta line's colour. Default `muted`; keksdose's cost line is `warning`. */\n metaTone?: ActionCardMetaTone;\n /** A Lucide icon (or any component taking a `className`), shown at the card's start. */\n icon?: ChoiceCardProps[\"icon\"];\n /** The icon's colour. Default `default` (the secondary text colour). */\n iconTone?: ActionCardIconTone;\n /** Classes on the icon, after {@link iconTone} — a size, a tinted tile behind it. */\n iconClassName?: string;\n /**\n * Makes the card a LINK to another page rather than a button that acts: kastlan's\n * section tiles on the group overview (group-overview-page), each an icon, a name and\n * a line on what is there. A real `<a href>`, so a middle click opens it in a new\n * tab. A `disabled` card renders the inert button instead — a link cannot be\n * disabled. The ref then reaches the `<a>`.\n */\n href?: string;\n /** Your router's link for an in-app `href`. Default: the `<UiKitProvider\n * linkComponent>`, then a plain `<a>`. Ignored without `href`. */\n renderLink?: (props: ActionCardLinkProps) => ReactElement;\n}\n\n/**\n * A {@link ChoiceCard} that ACTS rather than holds a state: a `<button>` with the\n * card's icon, title and description, plus a `meta` line, that runs `onClick` the\n * moment it is pressed. keksdose's privacy enrolment (privacy-enroll-dialog:345,\n * `CustodyOption`) offers two custody modes this way — picking one IS the next step,\n * so there is no checked state to show and no \"Continue\" to press after it. With\n * `href` it is the same card as a link (kastlan's overview section tiles).\n *\n * A separate component rather than `ChoiceCard as=\"button\"`: a ChoiceCard is an\n * `<input>` (its ref, its `checked`, its form value), and a button shares none of it.\n * Named by the title alone and described by the rest, so a screen reader hears\n * \"Keep the key yourself, button\" and then the explanation, not one long name.\n */\nexport const ActionCard = forwardRef<HTMLButtonElement, ActionCardProps>(function ActionCard(\n {\n title,\n description,\n meta,\n metaTone = \"muted\",\n icon: Icon,\n iconTone = \"default\",\n iconClassName,\n href,\n renderLink,\n className,\n id,\n type = \"button\",\n ...rest\n },\n ref,\n) {\n const kitLink = useKitLink();\n const generated = useId();\n const baseId = id ?? generated;\n const titleId = `${baseId}-title`;\n const descriptionId = `${baseId}-description`;\n const metaId = `${baseId}-meta`;\n const showDescription = hasMessage(description);\n const showMeta = hasMessage(meta);\n const look = cn(\n \"flex w-full items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 text-start shadow-sm transition-colors\",\n \"hover:border-[var(--brand)] hover:bg-[var(--bg-hover)]\",\n // The outline, as on ChoiceCard: the card is what the eye is on.\n \"focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n \"disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-[var(--border)] disabled:hover:bg-[var(--bg-surface)]\",\n className,\n );\n const labelledBy = rest[\"aria-labelledby\"] ?? titleId;\n const describedBy = mergeDescribedBy(\n rest[\"aria-describedby\"],\n showDescription && descriptionId,\n showMeta && metaId,\n );\n const body = (\n <>\n {Icon && <Icon aria-hidden className={cn(\"mt-0.5 size-5 shrink-0\", ICON_TONE[iconTone], iconClassName)} />}\n <span className=\"min-w-0 flex-1 space-y-1\">\n <span id={titleId} className=\"block text-sm font-medium leading-5 text-[var(--text-primary)]\">\n {title}\n </span>\n {showDescription && (\n <span id={descriptionId} className=\"block text-sm text-[var(--text-secondary)]\">\n {description}\n </span>\n )}\n {showMeta && (\n <span id={metaId} className={cn(\"block text-sm\", META_TONE[metaTone])}>\n {meta}\n </span>\n )}\n </span>\n </>\n );\n\n if (href !== undefined && !rest.disabled) {\n // The button-only attributes stay behind; `aria-*`, `data-*` and handlers ride along.\n const {\n disabled: _disabled,\n form: _form,\n formAction: _formAction,\n name: _name,\n value: _value,\n onClick,\n ...anchorRest\n } = rest;\n const linkProps: ActionCardLinkProps = {\n ...(anchorRest as Partial<ActionCardLinkProps>),\n ref: ref as unknown as Ref<HTMLAnchorElement>,\n id,\n href,\n \"aria-labelledby\": labelledBy,\n \"aria-describedby\": describedBy,\n onClick: onClick as unknown as ActionCardLinkProps[\"onClick\"],\n className: look,\n children: body,\n };\n const render = pickLinkRenderer(renderLink, kitLink, href);\n if (render) return <RenderedActionLink render={render} {...linkProps} />;\n const { children: content, ...anchor } = linkProps;\n return <a {...anchor}>{content}</a>;\n }\n\n return (\n <button\n ref={ref}\n id={id}\n type={type}\n {...rest}\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n className={look}\n >\n {body}\n </button>\n );\n});\nActionCard.displayName = \"ActionCard\";\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedActionLink({\n render,\n ...props\n}: ActionCardLinkProps & { render: (props: ActionCardLinkProps) => ReactElement }) {\n return render(props);\n}\n\n/* ── ChoiceCardGroup ─────────────────────────────────────────────────────── */\n\nexport interface ChoiceCardOption<T extends string> {\n value: T;\n title: ReactNode;\n description?: ReactNode;\n icon?: ChoiceCardProps[\"icon\"];\n disabled?: boolean;\n}\n\ninterface ChoiceCardGroupBaseProps<T extends string> {\n options: ChoiceCardOption<T>[];\n /** The question the cards answer. Rendered as the fieldset's `<legend>`, which is\n * what names the group. Without one, pass `aria-label`. */\n legend?: ReactNode;\n \"aria-label\"?: string;\n /** Shared by every input — what a plain form submits under. Generated if omitted. */\n name?: string;\n /** Classes for the card grid. Default: one column, two from `sm` up. */\n className?: string;\n /** Classes for every card. */\n cardClassName?: string;\n disabled?: boolean;\n /** What is wrong with the answer as a whole. Rendered under the cards and attached\n * to the fieldset. */\n error?: ReactNode;\n /**\n * An answer is needed. Draws the required star after the `legend` (none without\n * one — the name then comes from `aria-label`, which has nowhere to draw it), and\n * reaches the inputs as the native `required`:\n * - radios: every radio of the set, which is how HTML marks a radio group — the\n * group is satisfied by any one of them, and each announces \"required\";\n * - checkboxes: every box while NONE is ticked, dropped from all of them once one\n * is — \"at least one\", which checkboxes cannot say natively. A form then refuses\n * to submit an empty set, and nothing is left demanding a second box.\n */\n required?: boolean;\n}\n\n/** One of the set: radios. `value` is `null` while nothing is chosen. */\nexport interface ChoiceCardSingleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n multiple?: false;\n value: T | null;\n onChange: (value: T) => void;\n}\n\n/** Any of the set: checkboxes. */\nexport interface ChoiceCardMultipleProps<T extends string> extends ChoiceCardGroupBaseProps<T> {\n multiple: true;\n value: T[];\n onChange: (value: T[]) => void;\n}\n\nexport type ChoiceCardGroupProps<T extends string> =\n | ChoiceCardSingleProps<T>\n | ChoiceCardMultipleProps<T>;\n\n/**\n * A set of {@link ChoiceCard}s answering one question, in a `<fieldset>`.\n *\n * `multiple` picks the input: radios (one of the set, the browser's arrow keys\n * between them) or checkboxes (any of the set, Tab between them). The value is kept\n * in the order of `options`, not the order the boxes were ticked, so a list saved\n * from it does not depend on the order someone clicked in.\n */\nexport function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>) {\n const { options, legend, name, className, cardClassName, disabled, error, required } = props;\n const generated = useId();\n const groupName = name ?? generated;\n const errorId = `${generated}-error`;\n const showError = hasMessage(error);\n\n const isChecked = (v: T) => (props.multiple ? props.value.includes(v) : props.value === v);\n const toggle = (v: T, on: boolean) => {\n if (props.multiple) {\n const next = new Set(props.value);\n if (on) next.add(v);\n else next.delete(v);\n props.onChange(options.map((o) => o.value).filter((x) => next.has(x)));\n } else if (on) {\n props.onChange(v);\n }\n };\n\n return (\n <InGroupContext.Provider value={true}>\n <fieldset\n aria-label={props[\"aria-label\"]}\n aria-describedby={showError ? errorId : undefined}\n disabled={disabled}\n className=\"min-w-0\"\n >\n {legend !== undefined && (\n <legend className=\"mb-2 text-sm font-medium text-[var(--text-primary)]\">\n {legend}\n {required && <RequiredMark />}\n </legend>\n )}\n <div className={cn(\"grid gap-2 sm:grid-cols-2\", className)}>\n {options.map((o) => (\n <ChoiceCard\n key={o.value}\n type={props.multiple ? \"checkbox\" : \"radio\"}\n name={groupName}\n value={o.value}\n title={o.title}\n description={o.description}\n icon={o.icon}\n disabled={o.disabled}\n invalid={showError}\n required={required && (!props.multiple || props.value.length === 0) ? true : undefined}\n checked={isChecked(o.value)}\n onCheckedChange={(on) => toggle(o.value, on)}\n className={cardClassName}\n />\n ))}\n </div>\n {showError && (\n <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n {error}\n </p>\n )}\n </fieldset>\n </InGroupContext.Provider>\n );\n}\n"],"mappings":"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","names":["ChoiceCard","ActionCard"]}
@@ -1,5 +1,5 @@
1
1
  import 'react';
2
- export { y as CopyButton, z as CopyButtonLabels, D as CopyButtonProps, J as DEFAULT_COPY_BUTTON_LABELS } from '../kit-labels-CnnBd-2N.js';
2
+ export { y as CopyButton, z as CopyButtonLabels, D as CopyButtonProps, J as DEFAULT_COPY_BUTTON_LABELS } from '../kit-labels-BD2F7sOz.js';
3
3
  import './tooltip.js';
4
4
  import './data-table-labels.js';
5
5
  import './mini-calendar.js';
@@ -29,8 +29,7 @@ import './dialog-frame.js';
29
29
  import './modal.js';
30
30
  import '../hooks/use-search-param-state.js';
31
31
  import './measured-grid.js';
32
- import '../feedback/feedback-attachment.js';
33
- import '../feedback/feedback-dialog.js';
32
+ import '../feedback-attachment-BYAHJMOr.js';
34
33
  import '../feedback/feedback-thread.js';
35
34
  import '../feedback/feedback-inbox.js';
36
35
  import './account-settings-labels.js';
@@ -295,7 +295,7 @@ function ErrorFallback({
295
295
  "p",
296
296
  {
297
297
  "data-error-message": "",
298
- 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)]",
298
+ 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)]",
299
299
  children: errorLine
300
300
  }
301
301
  ),
@@ -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":"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","names":[]}
@@ -6,7 +6,7 @@ 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-CnnBd-2N.js';
9
+ import '../kit-labels-BD2F7sOz.js';
10
10
  import './data-table-labels.js';
11
11
  import './mini-calendar.js';
12
12
  import './calendar-heatmap.js';
@@ -37,8 +37,7 @@ import './dialog-frame.js';
37
37
  import './modal.js';
38
38
  import '../hooks/use-search-param-state.js';
39
39
  import './measured-grid.js';
40
- import '../feedback/feedback-attachment.js';
41
- import '../feedback/feedback-dialog.js';
40
+ import '../feedback-attachment-BYAHJMOr.js';
42
41
  import '../feedback/feedback-thread.js';
43
42
  import '../feedback/feedback-inbox.js';
44
43
  import './account-settings-labels.js';
@@ -1,5 +1,5 @@
1
1
  import 'react';
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-CnnBd-2N.js';
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/feedback-attachment.js';
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 { af as FileRejection, bc as FilePickHandler, ae as FilePickerLabels } from '../kit-labels-CnnBd-2N.js';
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/feedback-attachment.js';
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 { 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-CnnBd-2N.js';
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/feedback-attachment.js';
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';