@mindlogic-ai/logician-ui 5.0.0-alpha.2 → 5.0.0-alpha.21

package/src/components/CountBadge/CountBadge.usage.mdx

@@ -0,0 +1,215 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as CountBadgeStories from './CountBadge.stories';
+
+<Meta of={CountBadgeStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# CountBadge
+
+A small coral-red count of things that are waiting for the reader: unread
+messages, new notifications.
+
+## When to use
+
+- An unread or pending count next to a nav item, a tab or a list row.
+- On an icon-only button, such as the notification bell.
+- `dot` when there is something new but the number does not matter.
+
+## When not to use
+
+- A total or a quantity (파일 128개, 멤버 42명) → plain text. Coral says "this
+  needs you"; a total does not.
+- A status or a label → `Badge`.
+- Something the reader can select or remove → `Tag`.
+
+## Variants and what they mean
+
+</En>
+
+<Ko>
+
+# CountBadge
+
+읽지 않은 메시지나 새 알림처럼 사용자를 기다리는 항목의 개수를 보여 주는 작은
+코럴 레드 배지입니다.
+
+## 언제 쓰나요
+
+- 메뉴 항목, 탭, 목록 행 옆에 읽지 않았거나 처리할 항목의 개수를 보여 줄 때.
+- 알림 종 같은 아이콘 버튼 위에 개수를 올릴 때.
+- 새 소식이 있다는 것만 중요하고 개수는 중요하지 않을 때는 `dot`을 씁니다.
+
+## 언제 쓰지 않나요
+
+- 전체 개수나 수량(파일 128개, 멤버 42명)은 일반 글자로 씁니다. 코럴은 "확인이
+  필요함"이라는 뜻인데, 전체 개수에는 그런 뜻이 없습니다.
+- 상태나 라벨은 `Badge`를 씁니다.
+- 사용자가 고르거나 지울 수 있다면 `Tag`를 씁니다.
+
+## 변형과 뜻
+
+</Ko>
+
+<ArgTypes of={CountBadgeStories} include={['count', 'max', 'dot', 'showZero', 'label', 'size']} />
+
+<En>
+
+| Form | Shows | Notes |
+| --- | --- | --- |
+| Number (default) | `count`, capped at `max` (99 → `99+`) | Renders nothing for 0 unless `showZero` |
+| `dot` | A circle with no number | Hidden from assistive tech unless it has a `label`; with a `count` of 0 it disappears |
+
+Sizes `sm` / `md` (default) / `lg` are 16 / 18 / 22 px tall. Digits are
+tabular, so the badge does not change width as the number changes.
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+| 형태 | 보이는 것 | 참고 |
+| --- | --- | --- |
+| 숫자(기본) | `count`, `max`에서 잘림(99 → `99+`) | `showZero`가 없으면 0일 때 아무것도 그리지 않음 |
+| `dot` | 숫자 없는 점 | `label`이 없으면 보조 기술에서 숨겨짐. `count`가 0이면 사라짐 |
+
+크기 `sm` / `md`(기본) / `lg`의 높이는 16 / 18 / 22px입니다. 숫자 폭이 고정되어 있어
+숫자가 바뀌어도 배지 폭이 흔들리지 않습니다.
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={CountBadgeStories.InContext} />
+<Verdict
+  kind="do"
+  en="Next to a nav item, give the badge a label that says what it counts. The screen reader hears 읽지 않은 메시지 12개 instead of a bare 12."
+  ko="메뉴 항목 옆에서는 무엇의 개수인지 알려 주는 label을 붙입니다. 화면 낭독기는 '12' 대신 '읽지 않은 메시지 12개'라고 읽습니다."
+/>
+
+<Canvas of={CountBadgeStories.OnIconButton} />
+<Verdict
+  kind="do"
+  en="On an icon-only button, put the count in the button's aria-label and leave the badge unlabelled. The button's aria-label replaces everything inside it."
+  ko="아이콘 버튼에서는 개수를 버튼의 aria-label에 넣고 배지에는 label을 달지 않습니다. 버튼의 aria-label이 안에 든 내용을 모두 대신합니다."
+/>
+
+<Canvas of={CountBadgeStories.DontCountForTotals} />
+<Verdict
+  kind="dont"
+  en="Use a count badge for totals. Three coral badges in a list read as three things that need attention."
+  ko="전체 개수에 CountBadge를 쓰지 마세요. 목록에 코럴 배지가 세 개 있으면 확인할 일이 세 가지 있는 것처럼 읽힙니다."
+/>
+
+<Canvas of={CountBadgeStories.DoTotalsAsText} />
+<Verdict
+  kind="do"
+  en="Write totals as muted text with the unit."
+  ko="전체 개수는 단위를 붙여 흐린 글자로 씁니다."
+/>
+
+<En>
+
+## Content
+
+- Numbers only; the unit and meaning go in `label` or the surrounding text.
+- Keep the default `max` of 99 unless the exact number above it matters to the
+  reader.
+- Write `label` as a complete phrase with the full number: "읽지 않은 알림
+  120개", even when the badge shows `99+`.
+
+## Accessibility
+
+What CountBadge does for you:
+
+- With a `label`, the visible number is hidden from assistive tech and the
+  label is read instead, so `99+` is announced as the real count.
+- A `dot` without a `label` is `aria-hidden`; with one it is an `img` with that
+  name.
+- It renders as a `<span>`, so it is valid inside a button or link
+  (`ACCESSIBILITY.md` §5, KWCAG 5.4.1.1).
+- `count.fg` on `count.bg` passes the contrast audit in both modes
+  (WCAG 1.4.3).
+
+What you still have to do:
+
+- **Give it a `label` when the number alone makes no sense**, in a nav item or a
+  list row (WCAG 1.1.1).
+- **On an icon-only button, put the count in the button's `aria-label`**
+  (WCAG 4.1.2). A `label` on the badge there is never announced.
+- The badge does not announce changes. If a new count matters while the reader
+  is on the page, announce it through a polite live region (`role="status"`)
+  as well (WCAG 4.1.3).
+
+## Tokens
+
+The table is generated from `CountBadge.styles.ts` and the theme.
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 숫자만 씁니다. 단위와 뜻은 `label`이나 주변 글자에 담습니다.
+- 99보다 큰 정확한 숫자가 사용자에게 중요하지 않다면 기본 `max` 99를 그대로 둡니다.
+- `label`은 실제 숫자를 넣은 완전한 구절로 씁니다. 배지에 `99+`가 보여도 "읽지 않은
+  알림 120개"라고 씁니다.
+
+## 접근성
+
+CountBadge가 알아서 하는 일
+
+- `label`이 있으면 보이는 숫자는 보조 기술에서 숨기고 label을 대신 읽습니다. 그래서
+  `99+`가 실제 개수로 읽힙니다.
+- `label`이 없는 `dot`은 `aria-hidden`이고, label이 있으면 그 이름을 가진 `img`가
+  됩니다.
+- `<span>`으로 그려지므로 버튼이나 링크 안에 넣어도 됩니다(`ACCESSIBILITY.md` §5,
+  KWCAG 5.4.1.1).
+- `count.bg` 위의 `count.fg`는 라이트·다크 모두 대비 감사를 통과합니다(WCAG 1.4.3).
+
+직접 챙겨야 하는 일
+
+- **숫자만으로 뜻이 통하지 않는다면 `label`을 붙입니다.** 메뉴 항목이나 목록 행 옆이
+  그렇습니다(WCAG 1.1.1).
+- **아이콘 버튼에서는 개수를 버튼의 `aria-label`에 넣습니다**(WCAG 4.1.2). 그 자리에서
+  배지의 `label`은 읽히지 않습니다.
+- 배지는 숫자가 바뀌어도 알려 주지 않습니다. 사용자가 화면을 보는 동안 새 개수가
+  중요하다면, 공손한 라이브 영역(`role="status"`)으로도 알립니다(WCAG 4.1.3).
+
+## 토큰
+
+아래 표는 `CountBadge.styles.ts`와 테마에서 자동으로 만듭니다.
+
+</Ko>
+
+<Canvas of={CountBadgeStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **Badge**: a status or an attribute.
+- **Tag**: a label the reader can select or remove.
+- **IconButton**: where the bell and its count live.
+- **Foundations/Brand & colour usage**: coral only for send, run, the
+  AI-working mark and counts.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **Badge**: 상태나 속성.
+- **Tag**: 사용자가 고르거나 지울 수 있는 라벨.
+- **IconButton**: 알림 종과 그 개수가 놓이는 곳.
+- **Foundations/Brand & colour usage**: 코럴은 전송, 실행, AI 작업 표시, 개수에만
+  씁니다.
+
+</Ko>

package/src/components/CountUp/CountUp.usage.mdx

@@ -0,0 +1,107 @@
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle } from '../../guidelines/_components/Lang';
+import * as CountUpStories from './CountUp.stories';
+
+<Meta of={CountUpStories} name="Usage" />
+
+<LangToggle />
+
+<En>
+
+# CountUp
+
+Counts a number up (or down) to `to`, for a balance that just grew, a total
+that just settled, or a KPI that just loaded.
+
+</En>
+
+<Ko>
+
+# CountUp
+
+숫자를 `to`까지 세어 올리거나 내립니다. 방금 늘어난 잔액, 방금 확정된 합계, 방금 불러온
+지표에 씁니다.
+
+</Ko>
+
+<Canvas of={CountUpStories.Default} />
+
+<En>
+
+## When to use
+
+- Credits added after a purchase, counting from the old balance to the new one.
+- The headline number on a stat card when the dashboard first loads
+  (`from={0}`).
+- A score on a result screen, with `delayMs` so it starts after the screen has
+  arrived.
+
+## When not to use
+
+- Numbers in tables, lists or running text that did not just change → plain
+  text. A count is a flourish on a number that is already known.
+- Values that update all the time (live usage, a timer) → plain text. Every
+  update would start a new count.
+- Only emphasis is needed, not the change itself → `Pulse`.
+
+## Reduced motion and accessibility
+
+- With `prefers-reduced-motion: reduce` the final value renders immediately,
+  and `onEnd` still fires.
+- The text changes on every frame while counting. Do not put CountUp inside an
+  `aria-live` region, or a screen reader may read intermediate values. If the
+  new value must be announced, announce the final number separately
+  (WCAG 4.1.3).
+- It renders a single `<span>` with tabular figures and wraps nothing, so it
+  is safe inside a heading, a button or running text.
+- The default `durationMs` is `motion.slower` (700ms). Longer counts make
+  people wait for a number the screen already knows.
+
+## Props
+
+`format` receives every intermediate value; the default rounds and groups
+digits with commas. Later changes to `to` count on from wherever the last count
+landed.
+
+</En>
+
+<Ko>
+
+## 언제 쓰나요
+
+- 구매 뒤 추가된 크레딧을, 이전 잔액에서 새 잔액까지 세어 올릴 때.
+- 대시보드를 처음 열 때 통계 카드의 큰 숫자(`from={0}`).
+- 결과 화면의 점수. 화면이 다 들어온 뒤에 세도록 `delayMs`를 줍니다.
+
+## 언제 쓰지 않나요
+
+- 방금 바뀌지 않은 표, 목록, 본문 속 숫자는 그냥 글자로 씁니다. 세어 올리는 효과는 이미
+  알려진 숫자에 더하는 장식입니다.
+- 실시간 사용량이나 타이머처럼 계속 바뀌는 값도 그냥 글자로 씁니다. 바뀔 때마다 새로
+  세기 시작합니다.
+- 바뀌는 과정이 아니라 강조만 필요하다면 `Pulse`를 씁니다.
+
+## 동작 줄이기와 접근성
+
+- `prefers-reduced-motion: reduce`에서는 최종 값이 바로 나타나고, `onEnd`도 그대로
+  호출됩니다.
+- 세는 동안 글자가 매 프레임 바뀝니다. CountUp을 `aria-live` 영역 안에 두지 마세요.
+  화면 낭독기가 중간 값을 읽을 수 있습니다. 새 값을 알려야 한다면 최종 숫자를 따로
+  알립니다(WCAG 4.1.3).
+- 고정 폭 숫자로 된 `<span>` 하나만 그리고 아무것도 감싸지 않으므로, 제목, 버튼, 본문
+  안에 넣어도 됩니다.
+- `durationMs` 기본값은 `motion.slower`(700ms)입니다. 이보다 길면 화면이 이미 아는
+  숫자를 사용자가 기다리게 됩니다.
+
+## 속성
+
+`format`은 중간 값마다 호출되며, 기본값은 반올림한 뒤 쉼표로 자릿수를 묶습니다. 나중에
+`to`가 바뀌면 마지막으로 멈춘 값에서 이어서 셉니다.
+
+</Ko>
+
+<ArgTypes
+  of={CountUpStories}
+  include={['to', 'from', 'durationMs', 'delayMs', 'format', 'onEnd']}
+/>

package/src/components/DatePicker/DatePicker.usage.mdx

@@ -0,0 +1,177 @@
+import { Canvas, Meta } from '@storybook/blocks';
+
+import { En, Ko, LangToggle, Verdict } from '../../guidelines/_components/Lang';
+import * as RangeStories from './RangeDatePicker.stories';
+
+<Meta title="Components/DatePicker/Usage" />
+
+<LangToggle />
+
+<En>
+
+# SingleDatePicker, RangeDatePicker
+
+A button that opens a calendar for picking one date, or a start and end date.
+
+## When to use
+
+- `RangeDatePicker`: a period to filter by: audit logs, API key usage, group
+  usage.
+- `SingleDatePicker`: one day, such as an expiry date or a scheduled send.
+
+## When not to use
+
+- A whole month or a range of months → `MonthPicker`.
+- A date the user knows by heart and types faster than they click, such as a
+  date of birth → `Input` with a clear format.
+- A handful of preset periods (last 7 days, last 30 days) → `SegmentedControl`
+  or `SelectField`, optionally next to a range picker for "custom".
+
+## Props
+
+Both wrap `chakra-dayzed-datepicker`; its props pass through.
+`SingleDatePicker` takes `date` and `onDateChange(date)`; `RangeDatePicker`
+takes `selectedDates` and `onDateChange(dates)`. Month and weekday names and
+the default `configs.dateFormat` follow the provider language. The trigger is
+a secondary `Button` with a calendar icon; style it with
+`propsConfigs.triggerBtnProps`. The calendar is portalled (`usePortal`
+defaults to `true`).
+
+## Do / Don't
+
+</En>
+
+<Ko>
+
+# SingleDatePicker, RangeDatePicker
+
+버튼을 누르면 달력이 열리고, 날짜 하나나 시작일과 종료일을 고릅니다.
+
+## 언제 쓰나요
+
+- `RangeDatePicker`: 감사 로그, API 키 사용량, 그룹 사용량처럼 기간으로 거를 때.
+- `SingleDatePicker`: 만료일이나 예약 발송일처럼 하루를 고를 때.
+
+## 언제 쓰지 않나요
+
+- 한 달이나 여러 달의 범위는 `MonthPicker`를 씁니다.
+- 생년월일처럼 외우고 있어서 누르는 것보다 입력이 빠른 날짜는 형식을 분명히 적은
+  `Input`을 씁니다.
+- 최근 7일, 최근 30일 같은 정해진 기간 몇 개는 `SegmentedControl`이나
+  `SelectField`를 쓰고, 필요하면 "직접 지정"용으로 기간 선택기를 옆에 둡니다.
+
+## 속성
+
+둘 다 `chakra-dayzed-datepicker`를 감싸며, 그 속성이 그대로 전달됩니다.
+`SingleDatePicker`는 `date`와 `onDateChange(date)`를, `RangeDatePicker`는
+`selectedDates`와 `onDateChange(dates)`를 받습니다. 월과 요일 이름, 기본
+`configs.dateFormat`은 프로바이더의 언어를 따릅니다. 트리거는 달력 아이콘이 있는
+secondary `Button`이고, 모양은 `propsConfigs.triggerBtnProps`로 바꿉니다. 달력은
+포털로 그려집니다(`usePortal` 기본값 `true`).
+
+## 이렇게 하세요 / 이렇게 하지 마세요
+
+</Ko>
+
+<Canvas of={RangeStories.DoLabelledRange} />
+<Verdict
+  kind="do"
+  en="Label the filter and start from a sensible default range, so the page shows data before anyone touches the picker."
+  ko="필터에 라벨을 붙이고 알맞은 기본 기간으로 시작합니다. 그래야 선택기를 건드리기 전에도 화면에 데이터가 보입니다."
+/>
+
+<Canvas of={RangeStories.DontEmptyTrigger} />
+<Verdict
+  kind="dont"
+  en="Leave the trigger empty with no label. It shows only an icon, and a screen reader hears a button with no name."
+  ko="라벨 없이 빈 트리거를 두지 마세요. 아이콘만 보이고, 화면 낭독기에는 이름 없는 버튼으로 들립니다."
+/>
+
+<En>
+
+## Content
+
+- Label the period (조회 기간, 만료일), not the action (날짜 선택).
+- Leave the date format to the default for the language unless the screen
+  already uses another one.
+
+## Accessibility
+
+What the pickers do for you:
+
+- The trigger is a real `button`, reachable with Tab, and the selected date
+  is its text.
+- The calendar's day buttons and their keyboard behaviour come from
+  `chakra-dayzed-datepicker`. Check them with a keyboard on your screen before
+  relying on them (WCAG 2.1.1).
+
+What you still have to do:
+
+- **Name the trigger.** Its accessible name is the date text only, and it is
+  empty when nothing is picked. Put it in `FieldRow` with a label, and give
+  the button an `aria-label` through `propsConfigs.triggerBtnProps` when it
+  can be empty (WCAG 4.1.2; KWCAG 5.3.4.1 레이블 제공).
+- Keep an `Input` route for dates far from today; paging month by month to a
+  date years away is slow for everyone.
+
+## Tokens
+
+The trigger reads the secondary `Button` tokens. The calendar reads:
+
+</En>
+
+<Ko>
+
+## 문구
+
+- 동작(날짜 선택)이 아니라 기간의 이름(조회 기간, 만료일)을 라벨로 씁니다.
+- 화면이 이미 다른 형식을 쓰고 있지 않다면 날짜 형식은 언어별 기본값을 그대로 씁니다.
+
+## 접근성
+
+선택기가 알아서 하는 일
+
+- 트리거는 실제 `button`이라 Tab으로 갈 수 있고, 고른 날짜가 버튼의 글자가 됩니다.
+- 달력의 날짜 버튼과 키보드 동작은 `chakra-dayzed-datepicker`가 제공합니다. 화면에
+  쓰기 전에 키보드로 직접 확인합니다(WCAG 2.1.1).
+
+직접 챙겨야 하는 일
+
+- **트리거에 이름을 붙입니다.** 접근 가능한 이름은 날짜 글자뿐이라 아무것도 고르지
+  않으면 비어 있습니다. 라벨이 있는 `FieldRow`에 넣고, 비어 있을 수 있다면
+  `propsConfigs.triggerBtnProps`로 버튼에 `aria-label`을 줍니다(WCAG 4.1.2, KWCAG
+  5.3.4.1 레이블 제공).
+- 오늘과 멀리 떨어진 날짜는 `Input`으로도 넣을 수 있게 합니다. 몇 년 떨어진 날짜까지 한
+  달씩 넘기는 것은 누구에게나 느립니다.
+
+## 토큰
+
+트리거는 secondary `Button`의 토큰을 씁니다. 달력은 아래 토큰을 씁니다.
+
+</Ko>
+
+<Canvas of={RangeStories.UsageTokens} sourceState="none" />
+
+<En>
+
+## Related
+
+- **MonthPicker**: months and month ranges.
+- **SegmentedControl** / **SelectField**: preset periods.
+- **FieldRow**: the label.
+- Live examples: <code>Components/DatePicker/SingleDatePicker</code> and
+  <code>RangeDatePicker</code>.
+
+</En>
+
+<Ko>
+
+## 관련 컴포넌트
+
+- **MonthPicker**: 월과 월 범위.
+- **SegmentedControl** / **SelectField**: 정해진 기간.
+- **FieldRow**: 라벨.
+- 실제 예시: <code>Components/DatePicker/SingleDatePicker</code>와
+  <code>RangeDatePicker</code>.
+
+</Ko>

package/src/components/DatePicker/RangeDatePicker.stories.tsx

@@ -5,6 +5,9 @@ import { useState } from 'react';
 import { formatDateByLocale } from '@/utils/formatDateByLocale';
 
 import { Text } from '../Typography';
+import { T } from '../../guidelines/_components/Lang';
+import { TokenTable } from '../../guidelines/_components/TokenTable';
+import { FieldRow } from '../Form';
 import { RangeDatePicker } from './RangeDatePicker';
 
 const meta = {
@@ -15,7 +18,7 @@ const meta = {
       new Date(),
       new Date(),
     ]);
-  
+
     return (
       <>
         <Box mb={2}>
@@ -31,11 +34,92 @@ const meta = {
         </Text>
       </>
     );
-  }
+  },
 } satisfies Meta<typeof RangeDatePicker>;
 
 export default meta;
 
 type Story = StoryObj<typeof RangeDatePicker>;
 
-export const Basic: Story = {}
+export const Basic: Story = {};
+// ───────────────────────── Usage-page specimens ─────────────────────────
+// Pulled into `DatePicker.usage.mdx` with <Canvas of={…} />. Hidden (`!dev`).
+
+export const DoLabelledRange: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Do: a labelled filter with a default range',
+  render: () => {
+    const [dates, setDates] = useState<Date[]>([
+      new Date(2026, 9, 1),
+      new Date(2026, 9, 22),
+    ]);
+    return (
+      <Box maxW="360px">
+        <FieldRow label="조회 기간">
+          <RangeDatePicker selectedDates={dates} onDateChange={setDates} />
+        </FieldRow>
+      </Box>
+    );
+  },
+};
+
+export const DontEmptyTrigger: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: "Usage / Don't: an empty trigger with no label",
+  render: () => {
+    const [dates, setDates] = useState<Date[]>([]);
+    return <RangeDatePicker selectedDates={dates} onDateChange={setDates} />;
+  },
+};
+
+/** Tokens the calendar reads, as written in `RangeDatePicker.tsx`. */
+export const UsageTokens: Story = {
+  tags: ['!dev'],
+  parameters: { layout: 'padded' },
+  name: 'Usage / Tokens',
+  render: () => (
+    <TokenTable
+      rows={[
+        {
+          token: 'primary.main',
+          use: (
+            <T
+              en="Selected day; month arrows"
+              ko="선택한 날짜, 월 이동 화살표"
+            />
+          ),
+        },
+        {
+          token: 'fg.onPrimary',
+          use: <T en="Selected day number" ko="선택한 날짜 숫자" />,
+        },
+        {
+          token: 'primary.selected',
+          use: <T en="Days inside the range" ko="기간 안의 날짜" />,
+        },
+        {
+          token: 'primary.wash',
+          use: <T en="Day on hover" ko="마우스를 올린 날짜" />,
+        },
+        {
+          token: 'border.strong',
+          use: <T en="Today outline" ko="오늘 표시 테두리" />,
+        },
+        { token: 'fg.muted', use: <T en="Weekday names" ko="요일 이름" /> },
+        {
+          token: 'fg.subtle',
+          use: (
+            <T en="Calendar icon in the trigger" ko="트리거의 달력 아이콘" />
+          ),
+        },
+        { token: 'bg.surface', use: <T en="Calendar panel" ko="달력 패널" /> },
+        {
+          token: 'border.default',
+          use: <T en="Calendar panel border" ko="달력 패널 테두리" />,
+        },
+      ]}
+    />
+  ),
+};

package/src/components/ErrorFallback/ErrorFallback.types.ts

@@ -1,9 +1,15 @@
 export interface ErrorFallbackProps {
+  /** The caught error. Its `message` is shown as is; a translated default when empty. */
   error: Error | null;
+  /** ID shown for support; generated (`ERR-…`) when missing. */
   errorId?: string;
+  /** ISO time for the copied report only; the card shows the render time. */
   timestamp?: string;
+  /** Where it failed, shown and copied; "unknown" (translated) when missing. */
   componentName?: string;
+  /** Shown and copied; "anonymous" (translated) when missing. */
   userId?: string;
+  /** Called by the "try again" button, e.g. the error boundary's reset. */
   onErrorReset?: () => void;
 }