@eifi1/ui-kit 0.36.0 → 0.38.0

package/README.md

@@ -556,20 +556,20 @@ columns, strings and permissions (see the note at the top of `src/feedback/feedb
 
 <!-- BEGIN GENERATED: exports — node scripts/gen-export-inventory.mjs -->
 
-**1925 names from 313 modules** — 890 values and 1035 types. _Italic_ is a type-only export.
+**1966 names from 320 modules** — 910 values and 1056 types. _Italic_ is a type-only export.
 
 Generated from `dist/index.d.ts` by `node scripts/gen-export-inventory.mjs`; the count
 is pinned by `src/__tests__/public-surface.test.ts`. Do not edit between the markers.
 
 | Entry point | Names |
 |---|---|
-| `@eifi1/ui-kit` | 1925 |
+| `@eifi1/ui-kit` | 1966 |
 | `@eifi1/ui-kit/chart` | 92 |
 | `@eifi1/ui-kit/shell` | 77 |
 | `@eifi1/ui-kit/data-table` | 51 |
 | `@eifi1/ui-kit/wizard` | 24 |
 | `@eifi1/ui-kit/tour` | 7 |
-| `@eifi1/ui-kit/feedback` | 164 |
+| `@eifi1/ui-kit/feedback` | 201 |
 | `@eifi1/ui-kit/search` | 23 |
 | `@eifi1/ui-kit/dates` | 22 |
 | `@eifi1/ui-kit/table-text` | 14 |
@@ -856,7 +856,7 @@ re-slicing of it, never a second API.
 | `feedback/feedback-dialog` | `DEFAULT_FEEDBACK_DIALOG_LABELS`, `FeedbackDialog`, _`FeedbackAttachmentLabels`_, _`FeedbackCategoryOption`_, _`FeedbackDialogLabels`_, _`FeedbackDialogMultipleProps`_, _`FeedbackDialogProps`_, _`FeedbackDialogSingleProps`_, _`FeedbackDialogTextLabels`_, _`FeedbackMultipleSubmission`_, _`FeedbackSubmission`_, _`FeedbackSubmitHint`_ |
 | `feedback/feedback-inbox` | `FeedbackCategoryBadge`, `FeedbackDetail`, `FeedbackDetailSection`, `FeedbackNoteEditor`, `FeedbackProse`, `FeedbackStatusBadge`, `FeedbackStatusTransitions`, _`FeedbackNoteAttachment`_ |
 | `feedback/feedback-thread` | `ChatComposer`, `DEFAULT_FEEDBACK_COMPOSER_LABELS`, `DEFAULT_FEEDBACK_THREAD_LABELS`, `FeedbackThread`, _`ChatComposerHandle`_, _`ChatComposerLabels`_, _`ChatComposerProps`_, _`ChatComposerSlotContext`_, _`FeedbackComposerAttachment`_, _`FeedbackComposerHandle`_, _`FeedbackComposerLabels`_, _`FeedbackComposerProps`_, _`FeedbackComposerSlotContext`_, _`FeedbackThreadAttachment`_, _`FeedbackThreadEvent`_, _`FeedbackThreadItem`_, _`FeedbackThreadLabels`_, _`FeedbackThreadMessage`_, _`FeedbackThreadProps`_ |
-| `feedback/feedback-record` | `appendRework`, `attachmentName`, `FEEDBACK_ATTACHMENT_ACCEPT`, `FEEDBACK_AUTHOR_EDITABLE_STATUSES`, `FEEDBACK_AWAITING_STATUSES`, `FEEDBACK_PICKABLE_CATEGORIES`, `FEEDBACK_REWORKABLE_STATUSES`, `feedbackAttachmentLine`, `isImageAttachment`, `replaceDescription`, `reworkCount`, `splitBodyAttachments`, `splitDescription`, _`FeedbackContext`_, _`FeedbackEnvironment`_, _`FeedbackRecord`_ |
+| `feedback/feedback-record` | `appendRework`, `attachmentName`, `FEEDBACK_ATTACHMENT_ACCEPT`, `FEEDBACK_AUTHOR_EDITABLE_STATUSES`, `FEEDBACK_AWAITING_STATUSES`, `FEEDBACK_COMMENT_MAX`, `FEEDBACK_DECIDED_STATUSES`, `FEEDBACK_PICKABLE_CATEGORIES`, `FEEDBACK_REPLY_MAX`, `FEEDBACK_REWORKABLE_STATUSES`, `feedbackAttachmentLine`, `isImageAttachment`, `replaceDescription`, `reworkCount`, `splitBodyAttachments`, `splitDescription`, _`FeedbackContext`_, _`FeedbackEnvironment`_, _`FeedbackRecord`_ |
 | `feedback/feedback-labels` | `DEFAULT_FEEDBACK_CATEGORY_LABELS`, `DEFAULT_FEEDBACK_STATUS_LABELS`, `DEFAULT_FEEDBACK_TOAST_LABELS`, `useFeedbackCategoryLabels`, `useFeedbackStatusLabels`, `useFeedbackToastLabels`, _`FeedbackCategoryLabels`_, _`FeedbackStatusLabels`_, _`FeedbackToastLabels`_ |
 | `feedback/feedback-status-undo` | `FEEDBACK_UNDO_DURATION`, `useFeedbackStatusUndo`, _`FeedbackStatusChange`_, _`FeedbackStatusMutate`_, _`FeedbackStatusPatch`_, _`FeedbackStatusRow`_, _`FeedbackStatusUndoOptions`_ |
 | `feedback/feedback-swipe` | `DEFAULT_FEEDBACK_SWIPE`, `FEEDBACK_SWIPE_ACTIONS`, `feedbackSwipePlan`, _`FeedbackSwipeAction`_, _`FeedbackSwipeBinding`_, _`FeedbackSwipeOptions`_ |
@@ -867,6 +867,12 @@ re-slicing of it, never a second API.
 | `feedback/feedback-table` | `DEFAULT_FEEDBACK_PAGE_LABELS`, `FeedbackAwaitingToggle`, `feedbackColumns`, `FeedbackEmptyState`, `feedbackEnvironment`, `FeedbackMobileCard`, `feedbackMobileGroupBy`, `FeedbackSubject`, `feedbackSubmitter`, `feedbackSubmitterEmail`, `isFeedbackAwaiting`, `useFeedbackColumns`, `useFeedbackPageLabels`, `useFeedbackRenderDate`, _`FeedbackAwaitingToggleProps`_, _`FeedbackColumnsOptions`_, _`FeedbackEmptyStateProps`_, _`FeedbackMobileCardProps`_, _`FeedbackPageLabels`_, _`FeedbackRenderDate`_, _`FeedbackSubjectProps`_, _`FeedbackTableRow`_, _`UseFeedbackColumnsOptions`_ |
 | `feedback/feedback-row-detail` | `DEFAULT_FEEDBACK_DETAIL_LABELS`, `feedbackAttachmentUrls`, `feedbackPageHref`, `feedbackPagePath`, `feedbackPageUrl`, `FeedbackReworkSection`, `feedbackRowAccess`, `FeedbackRowDetail`, `useFeedbackDetailLabels`, _`FeedbackDetailLabels`_, _`FeedbackDetailPatch`_, _`FeedbackDetailUpdate`_, _`FeedbackReworkSectionProps`_, _`FeedbackRowAccess`_, _`FeedbackRowDetailProps`_, _`FeedbackUpload`_ |
 | `feedback/feedback-crash` | `createCrashReporter`, _`CrashFiling`_, _`CrashReportCreate`_, _`CrashReporter`_, _`CrashReporterOptions`_, _`CrashReportResponse`_ |
+| `feedback/feedback-public-switch` | `FeedbackPublicSwitch`, `feedbackPublicSwitchAllowed`, _`FeedbackPublicSwitchProps`_, _`FeedbackPublicSwitchRow`_, _`FeedbackPublicSwitchViewer`_ |
+| `feedback/feedback-public-list` | `DEFAULT_FEEDBACK_PUBLIC_LABELS`, `FeedbackPublicDetail`, `FeedbackPublicList`, `useFeedbackPublicLabels`, _`FeedbackPublicDetailProps`_, _`FeedbackPublicLabels`_, _`FeedbackPublicListProps`_ |
+| `feedback/feedback-public-types` | _`FeedbackComment`_, _`FeedbackPublicListItem`_, _`FeedbackPublicRecord`_, _`FeedbackPublicSort`_, _`FeedbackReply`_, _`FeedbackVoteState`_ |
+| `feedback/feedback-vote-button` | `DEFAULT_FEEDBACK_VOTE_LABELS`, `FeedbackVoteButton`, _`FeedbackVoteButtonProps`_, _`FeedbackVoteLabels`_ |
+| `feedback/feedback-comment-thread` | `DEFAULT_FEEDBACK_COMMENTS_LABELS`, `FeedbackCommentThread`, _`FeedbackCommentsLabels`_, _`FeedbackCommentThreadProps`_ |
+| `feedback/feedback-replies` | `DEFAULT_FEEDBACK_REPLIES_LABELS`, `FeedbackReplyComposer`, `feedbackReplyNudge`, `FeedbackReplyTimeline`, `useFeedbackRepliesLabels`, _`FeedbackRepliesLabels`_, _`FeedbackReplyComposerProps`_, _`FeedbackReplyTimelineProps`_ |
 | `feedback/feedback-vocabulary` | `FEEDBACK_CATEGORY_META`, `FEEDBACK_CATEGORY_ORDER`, `FEEDBACK_STATUS_META`, `FEEDBACK_STATUS_ORDER`, `feedbackCategoryRank`, `nextFeedbackStatus`, `selectableFeedbackStatuses`, `visibleFeedbackStatuses`, _`FeedbackCategory`_, _`FeedbackStatus`_ |
 
 ### wizard
@@ -971,6 +977,7 @@ re-slicing of it, never a second API.
 | `notifications/push-device-setting` | `PushDeviceSetting`, _`PushDeviceAction`_, _`PushDeviceSettingProps`_ |
 | `notifications/push-devices-setting` | `describeUserAgent`, `PushDevicesSetting`, _`PushDevicesSettingProps`_ |
 | `notifications/unsubscribe-panel` | `UnsubscribePanel`, `unsubscribeTokenType`, _`UnsubscribePanelProps`_ |
+| `notifications/feedback-notification-types` | `DEFAULT_FEEDBACK_NOTIFICATION_TYPES_LABELS`, `useFeedbackNotificationTypes`, _`FeedbackNotificationTypeId`_, _`FeedbackNotificationTypesLabels`_ |
 
 ### demo
 

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

@@ -127,7 +127,7 @@ export declare function useInlineHint(hint: ReactNode, withHelp?: boolean): Reac
  *
  * - `hint` is the fact, the caption under the field, on its `aria-describedby`;
  * - `help` is the help, a {@link HelpPopover} "?" on the label line (an unlabelled
- *   field's at its end edge, as a hint's), named "About <label>" (`common.aboutField`,
+ *   field's at its end edge, as a hint's), named "About “<label>”" (`common.aboutField`,
  *   from the label's text, else the `aria-label`, else `common.help`). Pass a
  *   `HelpPopover` as `help` to name it yourself ("What do the statuses mean?").
  *
@@ -140,7 +140,7 @@ export interface FieldHelpProps {
     /**
      * Help the field is usable without — why it exists, how to choose, what the options
      * mean — behind the field's one "?" on its label line: a {@link HelpPopover} named
-     * "About <label>" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).
+     * "About “<label>”" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).
      * Pass a `HelpPopover` to name it yourself. `hint` stays the visible fact: with `help`
      * set it is the caption under the field at every size, a `FieldHint` included.
      */
@@ -149,7 +149,7 @@ export interface FieldHelpProps {
 /**
  * A field's `help` as the "?" for its label line, or `undefined` when there is none. A
  * {@link HelpPopover} is used as it is (it carries its own name); anything else is put
- * in one named "About <name>" — `name` is the field's label, else its `aria-label`.
+ * in one named "About “<name>”" — `name` is the field's label, else its `aria-label`.
  */
 export declare function fieldHelpMark(help: ReactNode, name: ReactNode): ReactNode | undefined;
 /** What {@link useFieldHint} needs to draw a field's `help`. */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-parts.tsx"],"sourcesContent":["import { createContext, isValidElement, useContext, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { plainText } from \"../lib/plain-text\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { useInlineFacts } from \"../hooks/use-large-text\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { HelpPopover } from \"./help-popover\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/**\n * The pieces of a field's anatomy the kit's fields share — the static label, the hint\n * (caption or \"?\"), the caption and the error under a field, the label strip over a\n * bare group, the write lock on a control that saves itself, and the wiring under them\n * (`aria-describedby`, refs). Private to the package — not re-exported from the barrel,\n * except `FieldLabel` and `FLOATING_LABEL_STATIC`, which the barrel names (ui.tsx did until\n * 0.34 split it).\n *\n * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and\n * month pickers, whose trigger is a button in a wrapper of their own, and the groups\n * with no field box) sat beside this one with its own copies of `isTextHint` and the\n * caption class (keksdose K4: \"uniform field anatomy … today it is a patchwork\").\n *\n * Nothing here imports a field module: field-base, input, select and textarea import this, and so do the combobox family,\n * the pickers and the native choice controls — the lint's no-cycle rule holds it.\n */\n\n/* ── the wiring: descriptions and refs ─────────────────────────────────────── */\n\n/**\n * Ids to describe a control by, merged in reading order: whatever the caller already\n * pointed at (standing advice), then the caption or description, then the error (the\n * news). Merge, never replace — see {@link useFieldError}. An empty list is `undefined`,\n * never `\"\"`: a dangling attribute describes the control as nothing at all.\n *\n * Here since 0.34 (DUP-11, refactor audit 2026-10); `choice-parts.ts` held it, beside a\n * copy of the presence rule, for the native choice controls alone.\n */\nexport function mergeDescribedBy(...ids: Array<string | false | null | undefined>): string | undefined {\n  const list = ids.filter(Boolean);\n  return list.length ? list.join(\" \") : undefined;\n}\n\n// The ref plumbing lives in ../lib/refs since round 0.35 (Tooltip needs it, and this module\n// renders a Tooltip); the fields keep importing it from here.\nexport { assignRef, mergeRefs } from \"../lib/refs\";\n\n/* ── the static label ─────────────────────────────────────────────────────── */\n\n// The TYPE of the small static label, without any placement. Split out so the\n// label and anything sharing its line (see `hint` on {@link FloatingField}) are\n// laid out by one flex row instead of by two absolute offsets guessing at the\n// same baseline — which is what put dev#468's \"?\" three pixels above the word it\n// belongs to.\nexport const STATIC_LABEL_TYPE =\n  \"text-caption leading-tight text-muted peer-disabled:opacity-50\";\n\n/**\n * A field's label at Large and Extra large (0.33, docs/text-size-harmonization.md\n * §10.17): a static label ABOVE the field — the phone card's \"label above value\" (§4) —\n * not a label squeezed into the field's top strip, where a long one ended in \"…\". It\n * stops being absolute, so it wraps like any text (`truncate-until-large` beside it); it\n * takes the pointer, since nothing of the field lies under it any more; and the field\n * no longer reserves the strip for it (`FIELD_FLOATING_PAD`). In the first row of a box\n * that is a grid at Large ({@link LABEL_ABOVE_BOX}), wherever it sits in the DOM — a\n * floating label FOLLOWS its input, for `peer-*`. `large:` classes, so it costs no\n * render and is right on the first paint; Normal keeps the floating label.\n *\n * The placement only: a label element adds `large:block` (a `<span>` or `<label>` in\n * flow), a label ROW keeps its `flex`.\n */\nexport const LABEL_ABOVE_AT_LARGE =\n  \"large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto\";\n\n/**\n * The box a field's label is positioned in — {@link FloatingField}'s `relative` wrapper,\n * a date or month picker's root — at Large, while it holds a label above\n * ({@link LABEL_ABOVE_AT_LARGE}): one column, the label's row over the field's. The\n * field's own absolute parts in the box (a chevron, a clear ×, a reveal toggle, a\n * calculator) are placed in the second row, so their `top-1/2` and `inset-y-*` still\n * measure the FIELD and not label and field together; the label's own elements carry\n * `data-field-label` and stay in the first. Only on a box with a visible label: without\n * one the second row would be empty.\n */\nexport const LABEL_ABOVE_BOX =\n  \"large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2\";\n\n// A field that always has a value (select / dropdown trigger) keeps the label\n// permanently in the floated position — small, in the top strip, value below. At Large,\n// a label above the field (LABEL_ABOVE_AT_LARGE).\nexport const FLOATING_LABEL_STATIC = cn(\n  \"pointer-events-none absolute start-3 top-1\",\n  STATIC_LABEL_TYPE,\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n);\n\n/**\n * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a\n * button not a labelable input). Same placement as {@link FloatingField}'s static label,\n * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.\n */\nexport interface FieldLabelProps extends ComponentPropsWithRef<\"span\"> {\n  children: ReactNode;\n}\n\nexport function FieldLabel({ children, className, ...rest }: FieldLabelProps) {\n  return (\n    // `data-field-label`: a label of the box it stands in, kept in the first row at Large\n    // (LABEL_ABOVE_BOX).\n    <span data-field-label=\"\" {...rest} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </span>\n  );\n}\n\n/* ── hint ─────────────────────────────────────────────────────────────────── */\n\n/**\n * The \"?\" that explains a field, on the field's own label line (dev#468).\n *\n * Pass it to a labelled `Select` / `Input` as `hint`. It exists as a\n * component rather than as a snippet each form repeats because the previous\n * version was exactly that snippet — an absolutely-positioned button whose\n * `top-1.5` was one guess at where an 11px label sits — and the reporter's\n * follow-up was *\"question mark is not centered. Is it part of the hoc?\n * positioning problems seem quite frequently.\"* It was not part of the HOC. Now\n * it is, and there is one place left where the answer can be wrong.\n *\n * A `<button>` rather than a bare icon: hover alone puts the explanation out of\n * reach of a keyboard and of every touch device, and the tooltip shows on focus\n * too. The text is also its accessible name, so a screen reader gets it without\n * the bubble ever opening.\n *\n * For a FACT — a format, a limit, a consequence — which at Large and on a touch screen\n * becomes the field's caption ({@link useInlineHint}). Paragraph-long HELP the field is\n * usable without belongs in a `HelpPopover` instead (0.34, §10.23), which opens on a tap\n * and stays a \"?\" at every size.\n */\nexport interface FieldHintProps extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  /** The explanation. It is both the tooltip's text and, by default, the button's\n   *  accessible name, so a screen reader gets it without the bubble ever opening. */\n  label: string;\n  /** Default `\"start\"`: before the hint in the reading direction (the left in LTR, the\n   *  right in RTL). `left` / `right` stay physical. */\n  side?: TooltipSide;\n}\n\nexport function FieldHint({\n  label,\n  side = \"start\",\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: FieldHintProps) {\n  return (\n    // `tap=\"toggle\"` (0.25): the \"?\" exists only to explain, so a tap on a phone shows\n    // the bubble and the next tap hides it — the touch rule (no bubble left behind by a\n    // tap) would otherwise make it show nothing at all.\n    <Tooltip label={label} side={side} portal tap=\"toggle\">\n      <button\n        {...rest}\n        // `type` after the spread, not before. These render inside forms — that is the\n        // only place a field has a label line — and a hint that defaulted to `submit`\n        // because a caller spread a props object at it would save the form on a click\n        // meant to explain a field.\n        type=\"button\"\n        // The explanation names the button unless the caller says otherwise; passing\n        // `aria-label` is how you shorten it for a screen reader without shortening\n        // what the bubble shows.\n        aria-label={ariaLabel ?? label}\n        // Nothing to activate: the tooltip opens on hover and on focus, and a\n        // click that did something as well would be a second, undiscoverable\n        // behaviour on the same target.\n        onClick={(e) => e.preventDefault()}\n        // The kit's focus frame (0.32, §5): the \"?\" is a tab stop, and had no ring at all.\n        className={cn(\n          \"flex rounded-full text-placeholder transition-colors hover:text-secondary\",\n          FOCUS_RING,\n          className,\n        )}\n      >\n        <HelpCircle className=\"size-3.5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/**\n * A field's `hint` as the field should draw it here (0.32, docs/text-size-harmonization.md\n * §4 \"No fact only in a tooltip\"): at Large and Extra large, and on a touch screen, a\n * {@link FieldHint} becomes its own words — so the field shows them as its CAPTION under\n * the box, where they are read without hovering or tapping a 14 px \"?\". Anywhere else,\n * and for any other hint, the hint unchanged.\n *\n * A FieldHint only, on purpose (0.34, §10.23): a FieldHint is a FACT, and a fact stays\n * visible. Paragraph-long HELP — why, how, what the options mean; the field is usable\n * without it — goes in a `HelpPopover`, which this leaves on the label line at every\n * size: printed under the field it was the longest thing in the form (keksdose K3).\n *\n * The kit's fields call it through {@link useFieldHint} / {@link useFieldMessages}; a\n * field that resolves its own `hint` (an app's, or one of the kit's own outside this\n * file) calls it first and then treats the result as it treated a text hint.\n *\n * `withHelp` (round 0.36): the field has a `help`, whose \"?\" is the field's only one\n * ({@link fieldHelpMark}) — so a FieldHint is its words at EVERY size, not only at Large\n * and on touch.\n */\nexport function useInlineHint(hint: ReactNode, withHelp = false): ReactNode {\n  const inline = useInlineFacts();\n  if ((inline || withHelp) && isValidElement(hint) && hint.type === FieldHint) {\n    const words = (hint.props as FieldHintProps).label;\n    if (words) return words;\n  }\n  return hint;\n}\n\n/* ── help (round 0.36, docs/text-size-harmonization.md §4, §10.23) ─────────── */\n\n/**\n * The doc every field's `help` prop points at.\n *\n * A field may carry two kinds of words (§10.23): a FACT — a format, a limit, a\n * consequence — which stays visible, and HELP — why the field exists, how to choose,\n * what the options mean — which the field is usable without and which may sit behind a\n * \"?\". Until 0.36 a field had one slot, `hint`, so a field with both had to drop one or\n * print a paragraph (Kurvenschmiede's \"How it was measured\", round 0.36 H). Now:\n *\n * - `hint` is the fact, the caption under the field, on its `aria-describedby`;\n * - `help` is the help, a {@link HelpPopover} \"?\" on the label line (an unlabelled\n *   field's at its end edge, as a hint's), named \"About <label>\" (`common.aboutField`,\n *   from the label's text, else the `aria-label`, else `common.help`). Pass a\n *   `HelpPopover` as `help` to name it yourself (\"What do the statuses mean?\").\n *\n * The help's \"?\" is then the field's ONLY \"?\": a `FieldHint` passed as `hint` beside it\n * draws none of its own and shows its words as the caption at every size, as it does at\n * Large and on touch; any other `hint` is the caption too. Two \"?\" side by side would\n * look the same and open different things.\n */\nexport interface FieldHelpProps {\n  /**\n   * Help the field is usable without — why it exists, how to choose, what the options\n   * mean — behind the field's one \"?\" on its label line: a {@link HelpPopover} named\n   * \"About <label>\" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).\n   * Pass a `HelpPopover` to name it yourself. `hint` stays the visible fact: with `help`\n   * set it is the caption under the field at every size, a `FieldHint` included.\n   */\n  help?: ReactNode;\n}\n\n/**\n * The \"?\" for a field's `help` — the field's own name, \"About <label>\", in the reader's\n * language. A component so that a field without `help` asks the labels nothing.\n */\nfunction FieldHelp({ name, children }: { name: ReactNode; children: ReactNode }) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const text = plainText(name);\n  return <HelpPopover label={text === undefined ? common.help : common.aboutField(text)}>{children}</HelpPopover>;\n}\n\n/**\n * A field's `help` as the \"?\" for its label line, or `undefined` when there is none. A\n * {@link HelpPopover} is used as it is (it carries its own name); anything else is put\n * in one named \"About <name>\" — `name` is the field's label, else its `aria-label`.\n */\nexport function fieldHelpMark(help: ReactNode, name: ReactNode): ReactNode | undefined {\n  if (!hasContent(help)) return undefined;\n  if (isValidElement(help) && help.type === HelpPopover) return help;\n  return <FieldHelp name={name}>{help}</FieldHelp>;\n}\n\n/** What {@link useFieldHint} needs to draw a field's `help`. */\nexport interface FieldHelpSource {\n  /** The field's `help`. */\n  help?: ReactNode;\n  /** What names its \"?\": the field's label, else its `aria-label`. */\n  name?: ReactNode;\n}\n\n\n/**\n * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or\n * something for the label line (a {@link FieldHint} \"?\", or any other node).\n *\n * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of\n * strip shared with the label, and a sentence placed there ran over the label and into\n * the value; a \"?\" under the field would be a button floating free of the label it\n * explains.\n */\nexport function isTextHint(hint: ReactNode): hint is string | number {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\n/** The caption under a field — Select's and NumberInput's type, so every field's\n *  standing advice reads alike. */\nexport const FIELD_CAPTION_CLASS = \"mt-1 text-caption leading-tight text-muted\";\n\nexport interface FieldHintParts {\n  /** The caller's `aria-describedby` with the caption's id appended — standing\n   *  advice first; the error (the news) is appended after this by the field. */\n  describedBy: string | undefined;\n  /** The caption's id while there is one. */\n  captionId: string | undefined;\n  /** The caption itself — a text hint, or any hint beside a `help` — or `undefined`. */\n  captionText: ReactNode | undefined;\n  /** What rides the label line — the `help`'s \"?\" ({@link fieldHelpMark}), else a\n   *  non-text hint (a FieldHint) — or, on a field with no label line, the end edge\n   *  outside the box. `undefined` when there is none. */\n  labelHint: ReactNode | undefined;\n}\n\n/**\n * Whether a resolved `hint` goes under the field as its caption: text always (see\n * {@link isTextHint}); with a `help` beside it, whatever it is — the label line's \"?\"\n * is the help's (round 0.36, §4).\n */\nexport function isHintCaption(hint: ReactNode, withHelp: boolean): boolean {\n  return isTextHint(hint) || (withHelp && hasContent(hint));\n}\n\n/**\n * Split a field's `hint` into the caption under it (attached with `aria-describedby`)\n * or the \"?\" on its label line. See {@link isTextHint}. With a `help` ({@link\n * FieldHelpProps}), the help's \"?\" takes the label line and the hint is the caption.\n */\nexport function useFieldHint(\n  hintProp: ReactNode,\n  describedBy: string | undefined,\n  { help, name }: FieldHelpSource = {},\n): FieldHintParts {\n  const helpMark = fieldHelpMark(help, name);\n  const withHelp = helpMark !== undefined;\n  const hint = useInlineHint(hintProp, withHelp);\n  const captionId = useId();\n  const caption = isHintCaption(hint, withHelp);\n  return {\n    describedBy: caption ? mergeDescribedBy(describedBy, captionId) : describedBy,\n    captionId: caption ? captionId : undefined,\n    captionText: caption ? hint : undefined,\n    labelHint: helpMark ?? (!caption && hasContent(hint) ? hint : undefined),\n  };\n}\n\n/** The error line under a field — one type for every field's message (DUP-8, refactor\n *  audit 2026-10: ChipInput and FileDropzone printed theirs in `text-xs`). */\nexport const FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-danger\";\n\n/**\n * The message under a field that is wrong, and the wiring that attaches it.\n *\n * `invalid` paints the field (`FIELD_INVALID`) and sets `aria-invalid`, and there it\n * stopped: a field that announces \"invalid\" and nothing else has told a screen-reader\n * user only that they are stuck. The message was always on screen — a sibling `<p>`\n * beside the field — and never in the accessibility tree, because attaching it needs an\n * id on the message and an `aria-describedby` on the control, and no caller was going to\n * mint one by hand for every field on a form.\n *\n * Two rules the wiring has to keep:\n *\n *  - **Merge, never replace.** A field may already point at a hint (\"at least twelve\n *    characters\"). Overwriting that reference to say the field is wrong trades one half\n *    of the answer for the other — and it keeps the half the user has already read. The\n *    hint stays first: it is the standing advice, the error is the news.\n *  - **`invalid` keeps working alone**, for the forms whose message lives somewhere else\n *    entirely (a summary at the top of a dialog). There is nothing to point at then, and\n *    a dangling id describes the field as nothing at all.\n *\n * Deliberately NOT `role=\"alert\"`. `aria-describedby` is read when focus reaches the\n * control, which is where a field's own error is wanted; an alert would also interrupt\n * whatever is being read at the time, on every keystroke of a form that re-validates as\n * you type.\n *\n * Every field's since 0.34 (DUP-8, refactor audit 2026-10): it was ui.tsx's own, so the\n * combobox family restated it as `useComboboxFieldError` — without the fourth argument,\n * so Autocomplete announced a form library's `aria-invalid` and did not paint it — and\n * ten fields restated it inline.\n */\nexport function useFieldError(\n  error: ReactNode,\n  invalid: boolean | undefined,\n  describedBy: string | undefined,\n  /** The caller's own `aria-invalid`. A form library sets THIS (see `@eifi1/ui-kit/rhf`\n   *  `RhfField`), not our `invalid` prop — and a field that announces invalid should\n   *  look it too. */\n  ariaInvalid?: unknown,\n): { isInvalid: boolean; describedBy: string | undefined; errorEl: ReactNode } {\n  const errorId = useId();\n  const hasError = hasContent(error);\n  return {\n    /** A field carrying a message that says what is wrong with it IS wrong. */\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy: mergeDescribedBy(describedBy, hasError && errorId),\n    errorEl: hasError ? (\n      <p id={errorId} className={FIELD_ERROR_CLASS}>\n        {error}\n      </p>\n    ) : null,\n  };\n}\n\n/** The caption under a field, as {@link Select} draws its own. */\nexport function FieldCaption({ parts, className }: { parts: FieldHintParts; className?: string }) {\n  if (parts.captionText === undefined) return null;\n  return (\n    <p id={parts.captionId} className={cn(FIELD_CAPTION_CLASS, className)}>\n      {parts.captionText}\n    </p>\n  );\n}\n\n/**\n * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,\n * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.\n * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in\n * the row. At Large the ROW stands above the field, so the label inside it drops the\n * margin a label above takes alone (`large:mb-0`), and stays level with its \"?\".\n */\nexport const LABEL_IN_ROW = \"static min-w-0 large:mb-0\";\n\n/**\n * A static label and its \"?\" on one line, in the top strip of a field that lays out its\n * own label — the combobox family, which cannot use {@link FloatingField} because the\n * trigger, the anchored panel and the label hang off a box of their own.\n *\n * FloatingField's static row, with one difference: it stops at `end-9`, the column the\n * chevron (or the clear \"×\") takes, so a long label truncates before it rather than\n * putting the \"?\" on top of the chevron. The hint keeps its width; the label gives way.\n */\nexport function StaticLabelRow({ hint, children }: { hint: ReactNode; children: ReactNode }) {\n  return (\n    <div\n      data-field-label=\"\"\n      className={cn(\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n    >\n      {children}\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * A field with no label line and a FieldHint \"?\": the hint at the end edge, OUTSIDE the\n * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the\n * field is returned exactly as it was, so the wrapper costs nothing where it does not\n * apply.\n */\nexport function EndHintRow({\n  hint,\n  className,\n  children,\n}: {\n  hint: ReactNode | undefined;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (hint === undefined) return <>{children}</>;\n  return (\n    <div className={cn(\"flex items-center gap-1.5\", className)}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/* ── the write lock on a control that saves itself (keksdose K3) ───────────── */\n\nexport interface LockReason {\n  /** The reason in force — the lock's (with `commit` under a locked\n   *  `WriteLockProvider`), else the control's own `disabledReason`. */\n  reason: ReactNode;\n  /** There is a reason: the control is locked the focusable way. */\n  locked: boolean;\n  /** The id of the reason's hidden copy, for the control's `aria-describedby`. */\n  reasonId: string;\n}\n\n/**\n * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a\n * switch, a checkbox or a select that saves on change, a list row whose click writes.\n * The lock's reason wins over the control's own (`useCommitReason`).\n */\nexport function useLockReason(commit: CommitScope | undefined, disabledReason: ReactNode): LockReason {\n  const reason = useCommitReason(commit, disabledReason);\n  const reasonId = useId();\n  return { reason, locked: hasContent(reason), reasonId };\n}\n\n/**\n * A locked control and its reason — the kit's ONE frame for it, used by Button,\n * IconButton, Chip, Checkbox, Switch and every field that locks (DUP-3, refactor audit\n * 2026-10: Button's `ReasonFrame` and Chip's `ChipReasonFrame` were copies of it, and\n * only those two drew the line, so a field locked through `commit` kept its reason in a\n * tooltip on a phone while the Save beside it said it in words). Where it shows is\n * {@link DisabledReasonDisplay}'s: by default a LINE under the control at Large and on a\n * touch screen ({@link DisabledReasonLine}), the kit {@link Tooltip} otherwise.\n *\n * A component of its own so only a LOCKED control asks the text size and the pointer;\n * the hundreds of unlocked controls on a page subscribe to nothing.\n *\n * Tooltip form: the control in a FRAGMENT with a `hidden` copy of the reason for its\n * `aria-describedby`, so the Tooltip does not also clone its bubble's id into the\n * description — the same sentence twice would be read on every focus. Line form: the\n * line IS the description (it carries `reasonId`), and no bubble repeats what is on\n * screen.\n *\n * `className` is the wrapper's, which becomes the outermost element while locked — a\n * control moves its own layout classes here so a lock does not reflow the form.\n */\nexport function LockedReason({\n  lock,\n  display,\n  line: lineProp,\n  side,\n  portal,\n  className,\n  lineClassName,\n  children,\n}: {\n  /** The reason, and the id the control's `aria-describedby` names. */\n  lock: Pick<LockReason, \"reason\" | \"reasonId\">;\n  /** Where the reason shows — the control's `disabledReasonDisplay`. Default `\"auto\"`. */\n  display?: DisabledReasonDisplay;\n  /** The answer of a caller that asked {@link useDisabledReasonLine} for its own layout\n   *  already (Checkbox, Switch); wins over `display`. */\n  line?: boolean;\n  /** The bubble's side and portal — IconButton's `tooltipSide` / `tooltipPortal`. */\n  side?: TooltipSide;\n  portal?: boolean;\n  className?: string;\n  /** Classes for the line itself — a list row's padding, so the words line up with the\n   *  row's. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  const asked = useDisabledReasonLine(display);\n  if (lineProp ?? asked) {\n    return (\n      <DisabledReasonLine id={lock.reasonId} reason={lock.reason} className={className} lineClassName={lineClassName}>\n        {children}\n      </DisabledReasonLine>\n    );\n  }\n  return (\n    <Tooltip label={lock.reason} side={side} portal={portal} className={className}>\n      <>\n        {children}\n        <span id={lock.reasonId} hidden>\n          {lock.reason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n/* ── no fact only in a tooltip (0.32, docs/text-size-harmonization.md §4, §10.8) ── */\n\n/**\n * Where a control's `disabledReason` is shown (§4 \"No fact only in a tooltip\"):\n *\n * - `\"auto\"` (default): as a LINE under the control at Large and Extra large and on a\n *   touch screen (`useInlineFacts`) — the reader asked for bigger type, or cannot hover\n *   — and in the kit {@link Tooltip} otherwise, where a pointer can hover it open and\n *   the form keeps its rhythm. Inside {@link CompactControls} (a top bar, a dense row's\n *   inline actions) it stays the tooltip at every size: there is no room for a line.\n * - `\"line\"`: always the line — a form whose locked submit should say why at once.\n * - `\"tooltip\"`: always the tooltip — a place the caller knows has no room, and where\n *   the reason is also said elsewhere on the screen (a banner over the form).\n *\n * Either way the reason is the control's `aria-describedby`, so a screen reader hears\n * it on focus; the line IS that description (one copy), the tooltip keeps its hidden\n * copy as before.\n */\nexport type DisabledReasonDisplay = \"auto\" | \"line\" | \"tooltip\";\n\n/**\n * Marks a region where the controls must stay compact at every text size (§4, §10.8):\n * an IconButton keeps its icon alone (its `label` stays the name and the tooltip) and a\n * `disabledReason` stays in the tooltip rather than a line. AppShell puts its top bar\n * in one (\"the top bar keeps its essential icons\"); `RowActions` its inline icons.\n *\n * For a toolbar that has no room, not for a whole page: the contract asks that the icon\n * alone be rare. A dense row's actions belong in `RowActions`, which collapses them\n * into a \"⋯\" menu at Large instead.\n */\nexport const CompactControlsContext = createContext(false);\n\nexport function CompactControls({ children, compact = true }: { children: ReactNode; compact?: boolean }) {\n  return <CompactControlsContext.Provider value={compact}>{children}</CompactControlsContext.Provider>;\n}\n\n/** Whether a control's `disabledReason` is drawn as a line here — see\n *  {@link DisabledReasonDisplay}. For the kit's own controls (Button, IconButton, Chip,\n *  ToggleGroup) and an app's control that has a reason to give. */\nexport function useDisabledReasonLine(display: DisabledReasonDisplay = \"auto\"): boolean {\n  const compact = useContext(CompactControlsContext);\n  const inline = useInlineFacts();\n  if (display === \"line\") return true;\n  if (display === \"tooltip\") return false;\n  return inline && !compact;\n}\n\n/** The reason line's type: a field caption's ({@link FIELD_CAPTION_CLASS}), so a locked\n *  control's \"why\" reads like a field's standing advice. Capped, so a long reason under\n *  a small control wraps rather than widening its row without end. */\nexport const DISABLED_REASON_LINE_CLASS =\n  \"mt-1 block max-w-[20rem] text-caption leading-tight text-muted\";\n\n/**\n * A control and its `disabledReason` as a line under it — the `\"line\"` form of\n * {@link DisabledReasonDisplay}. The wrapper is the flex item now (`className`: the\n * control's own layout, e.g. `self-stretch`); `items-start` keeps the control its own\n * width, and a column parent still stretches the wrapper (FormActions' phone stack).\n * The line carries `id`, which the control's `aria-describedby` names.\n */\nexport function DisabledReasonLine({\n  id,\n  reason,\n  className,\n  lineClassName,\n  children,\n}: {\n  id: string;\n  reason: ReactNode;\n  className?: string;\n  /** Classes for the line itself (0.34) — a list row's padding, so its words start\n   *  where the row's do. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span data-slot=\"disabled-reason\" className={cn(\"inline-flex max-w-full flex-col items-start\", className)}>\n      {children}\n      <span id={id} className={cn(DISABLED_REASON_LINE_CLASS, lineClassName)}>\n        {reason}\n      </span>\n    </span>\n  );\n}\n\n/* ── groups ───────────────────────────────────────────────────────────────── */\n\n/**\n * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box\n * inside it keeps the native `required` (a form still refuses an empty set) but draws no\n * star of its own — four stars on four languages would read as four separate demands.\n * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.\n */\nexport const RequiredStarOnLegend = createContext(false);\n\n/* ── fields not built on FloatingField: pickers and bare groups ──────────── */\n\nexport interface FieldMessages {\n  /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */\n  isInvalid: boolean;\n  /** The caller's description, then the caption, then a lock's reason, then the error —\n   *  the standing advice before the news, as {@link useFieldError} orders them. */\n  describedBy: string | undefined;\n  /** The caption and the error, for under the field; `null` when there is neither. */\n  below: ReactNode;\n  /** What rides the LABEL line — the `help`'s \"?\", else a `FieldHint` — or `undefined`\n   *  when the hint is a caption and there is no help. */\n  labelHint: ReactNode;\n}\n\n/**\n * `hint` / `help` / `error` / `invalid` resolved the way `Select` resolves them —\n * {@link useFieldHint} and {@link useFieldError} together, for a field that draws what\n * goes under it in one place (a picker, a group, a field built on another).\n */\nexport function useFieldMessages({\n  hint,\n  help,\n  name,\n  error,\n  invalid,\n  describedBy,\n  ariaInvalid,\n  reasonId,\n}: FieldHelpSource & {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  describedBy?: string;\n  ariaInvalid?: unknown;\n  /** A lock's reason (`useLockReason`'s `reasonId`, while locked): described after the\n   *  caption and before the error, as on Select. */\n  reasonId?: string | false;\n}): FieldMessages {\n  const hintParts = useFieldHint(hint, describedBy, { help, name });\n  const field = useFieldError(error, invalid, mergeDescribedBy(hintParts.describedBy, reasonId), ariaInvalid);\n  return {\n    isInvalid: field.isInvalid,\n    describedBy: field.describedBy,\n    below:\n      hintParts.captionText !== undefined || field.errorEl !== null ? (\n        <>\n          <FieldCaption parts={hintParts} />\n          {field.errorEl}\n        </>\n      ) : null,\n    labelHint: hintParts.labelHint,\n  };\n}\n\n/**\n * The field and what is under it, as one box — `FieldGroup` in field-base.tsx, for the same\n * reasons written there. Nothing of its own while there is nothing under the field and\n * the caller passed no `error` key (the DOM is exactly what it was before these props);\n * once `error` is passed the box is kept even with no message, so the trigger is never\n * reparented — and remounted, losing focus — as the message comes and goes.\n */\nexport function FieldBox({\n  below,\n  reserve,\n  children,\n}: {\n  below: ReactNode;\n  reserve: boolean;\n  children: ReactNode;\n}) {\n  if (below === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {below}\n    </div>\n  );\n}\n\n/**\n * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a\n * `FieldHint`, the label and its \"?\" laid out on ONE flex row (dev#468: two absolute\n * offsets guessing at the same baseline put the \"?\" three pixels above its word).\n * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and\n * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a\n * long label truncates before it rather than putting the \"?\" on top of it.\n */\nexport function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {\n  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;\n  return (\n    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint\n    // over the row (and take the \"?\"'s hover) otherwise. Above the field at Large.\n    <div\n      data-field-label=\"\"\n      className={cn(\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n    >\n      <FieldLabel className={cn(LABEL_IN_ROW, \"max-w-full\")}>{label}</FieldLabel>\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * How tall the strip over a bare group is: 20px at Normal, for every group the kit\n * draws one over — ToggleGroup's `labelPlacement=\"strip\"`, SwatchPicker, IconPicker\n * and {@link FieldStrip} (whose `pad` named two heights until 0.34).\n *\n * The label ROW, not the label, is what has to fit (keksdose dev#593, kk K4, measured in\n * headless Chromium): it sits `top-1` (4px) and is as tall as the taller of the label\n * (11px `text-caption` in a `leading-tight` line, 13.75px) and its \"?\" (a 14px icon,\n * `size-3.5`) — so it ends 18px down. The strip has to be at least that:\n *\n *     label row: 4 + max(13.75, 14) = 18   ≤   strip: 20   (2px clear of the content)\n *\n * Until 0.34 a 16px strip (`\"field\"`) stood over the segmented group so that 16 + its\n * 26px box made a labelled Input's 42px (keksdose's `ClearedStatusPicker`, live #288 /\n * #431). The label and its \"?\" then crossed the group's top border by 2px — *\"the\n * question mark even interferes with it\"* (at 125 %: label row 424–438, border at 436).\n * The 4px come out of the group's segments instead (`STRIP_SEGMENT` in\n * toggle-group.tsx): 20 + 22 = 42. A tile, a map, a row of buttons — content with no\n * inset — needed the 20px already (keksdose's `FlagPicker` and location field, `pt-5`).\n *\n * Every term is rem, so the sum holds at any browser font size. At Large and Extra large\n * there is no strip: the label row stands above the content, in flow\n * ({@link LABEL_ABOVE_AT_LARGE}), and the padding goes (`large:pt-0` in\n * {@link LabelStrip}), so nothing lies under the label to cross.\n */\nexport const LABEL_STRIP_PAD = \"pt-5\";\n\n/**\n * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:\n * a segmented control or a row of swatches standing in a form row beside labelled\n * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the\n * type of a field's static label) without the group growing a field's border round\n * it. `id` goes on the label so the group can be `aria-labelledby` it.\n *\n * `relative` is load-bearing twice over: the row is positioned against it, and a\n * caller's `sr-only` label cannot escape it (sr-only-containment).\n *\n * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the\n * `role=\"group\"` its label names. The kit's own groups pass none, so their wrapper is\n * the bare box it was in 0.22.\n */\nexport function LabelStrip({\n  labelId,\n  label,\n  hint,\n  disabled,\n  className,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  labelId: string;\n  label: ReactNode;\n  /** What rides the label line beside the label — a resolved `labelHint`\n   *  ({@link useFieldMessages}), never a raw `hint`: a FieldHint is the caption at Large\n   *  and on touch, and the caller draws that under its group. */\n  hint?: ReactNode;\n  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */\n  disabled?: boolean;\n  children: ReactNode;\n}) {\n  return (\n    // At Large the row is a label above the group, in flow (0.33, §10.17), and the\n    // strip's padding goes: nothing lies under it any more.\n    <div {...rest} className={cn(\"relative min-w-0\", LABEL_STRIP_PAD, \"large:pt-0\", className)}>\n      <div\n        data-field-label=\"\"\n        className={cn(\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n      >\n        {/* `static`: FieldLabel positions itself absolutely; here the ROW is\n            positioned, so the label and its \"?\" are centred on one line by the flex\n            layout (dev#468). */}\n        <FieldLabel id={labelId} className={cn(LABEL_IN_ROW, \"max-w-full\", disabled && \"opacity-50\")}>\n          {label}\n        </FieldLabel>\n        {hasContent(hint) && <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/field-parts.tsx"],"sourcesContent":["import { createContext, isValidElement, useContext, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { plainText } from \"../lib/plain-text\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { useInlineFacts } from \"../hooks/use-large-text\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { HelpPopover } from \"./help-popover\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/**\n * The pieces of a field's anatomy the kit's fields share — the static label, the hint\n * (caption or \"?\"), the caption and the error under a field, the label strip over a\n * bare group, the write lock on a control that saves itself, and the wiring under them\n * (`aria-describedby`, refs). Private to the package — not re-exported from the barrel,\n * except `FieldLabel` and `FLOATING_LABEL_STATIC`, which the barrel names (ui.tsx did until\n * 0.34 split it).\n *\n * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and\n * month pickers, whose trigger is a button in a wrapper of their own, and the groups\n * with no field box) sat beside this one with its own copies of `isTextHint` and the\n * caption class (keksdose K4: \"uniform field anatomy … today it is a patchwork\").\n *\n * Nothing here imports a field module: field-base, input, select and textarea import this, and so do the combobox family,\n * the pickers and the native choice controls — the lint's no-cycle rule holds it.\n */\n\n/* ── the wiring: descriptions and refs ─────────────────────────────────────── */\n\n/**\n * Ids to describe a control by, merged in reading order: whatever the caller already\n * pointed at (standing advice), then the caption or description, then the error (the\n * news). Merge, never replace — see {@link useFieldError}. An empty list is `undefined`,\n * never `\"\"`: a dangling attribute describes the control as nothing at all.\n *\n * Here since 0.34 (DUP-11, refactor audit 2026-10); `choice-parts.ts` held it, beside a\n * copy of the presence rule, for the native choice controls alone.\n */\nexport function mergeDescribedBy(...ids: Array<string | false | null | undefined>): string | undefined {\n  const list = ids.filter(Boolean);\n  return list.length ? list.join(\" \") : undefined;\n}\n\n// The ref plumbing lives in ../lib/refs since round 0.35 (Tooltip needs it, and this module\n// renders a Tooltip); the fields keep importing it from here.\nexport { assignRef, mergeRefs } from \"../lib/refs\";\n\n/* ── the static label ─────────────────────────────────────────────────────── */\n\n// The TYPE of the small static label, without any placement. Split out so the\n// label and anything sharing its line (see `hint` on {@link FloatingField}) are\n// laid out by one flex row instead of by two absolute offsets guessing at the\n// same baseline — which is what put dev#468's \"?\" three pixels above the word it\n// belongs to.\nexport const STATIC_LABEL_TYPE =\n  \"text-caption leading-tight text-muted peer-disabled:opacity-50\";\n\n/**\n * A field's label at Large and Extra large (0.33, docs/text-size-harmonization.md\n * §10.17): a static label ABOVE the field — the phone card's \"label above value\" (§4) —\n * not a label squeezed into the field's top strip, where a long one ended in \"…\". It\n * stops being absolute, so it wraps like any text (`truncate-until-large` beside it); it\n * takes the pointer, since nothing of the field lies under it any more; and the field\n * no longer reserves the strip for it (`FIELD_FLOATING_PAD`). In the first row of a box\n * that is a grid at Large ({@link LABEL_ABOVE_BOX}), wherever it sits in the DOM — a\n * floating label FOLLOWS its input, for `peer-*`. `large:` classes, so it costs no\n * render and is right on the first paint; Normal keeps the floating label.\n *\n * The placement only: a label element adds `large:block` (a `<span>` or `<label>` in\n * flow), a label ROW keeps its `flex`.\n */\nexport const LABEL_ABOVE_AT_LARGE =\n  \"large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto\";\n\n/**\n * The box a field's label is positioned in — {@link FloatingField}'s `relative` wrapper,\n * a date or month picker's root — at Large, while it holds a label above\n * ({@link LABEL_ABOVE_AT_LARGE}): one column, the label's row over the field's. The\n * field's own absolute parts in the box (a chevron, a clear ×, a reveal toggle, a\n * calculator) are placed in the second row, so their `top-1/2` and `inset-y-*` still\n * measure the FIELD and not label and field together; the label's own elements carry\n * `data-field-label` and stay in the first. Only on a box with a visible label: without\n * one the second row would be empty.\n */\nexport const LABEL_ABOVE_BOX =\n  \"large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2\";\n\n// A field that always has a value (select / dropdown trigger) keeps the label\n// permanently in the floated position — small, in the top strip, value below. At Large,\n// a label above the field (LABEL_ABOVE_AT_LARGE).\nexport const FLOATING_LABEL_STATIC = cn(\n  \"pointer-events-none absolute start-3 top-1\",\n  STATIC_LABEL_TYPE,\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n);\n\n/**\n * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a\n * button not a labelable input). Same placement as {@link FloatingField}'s static label,\n * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.\n */\nexport interface FieldLabelProps extends ComponentPropsWithRef<\"span\"> {\n  children: ReactNode;\n}\n\nexport function FieldLabel({ children, className, ...rest }: FieldLabelProps) {\n  return (\n    // `data-field-label`: a label of the box it stands in, kept in the first row at Large\n    // (LABEL_ABOVE_BOX).\n    <span data-field-label=\"\" {...rest} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </span>\n  );\n}\n\n/* ── hint ─────────────────────────────────────────────────────────────────── */\n\n/**\n * The \"?\" that explains a field, on the field's own label line (dev#468).\n *\n * Pass it to a labelled `Select` / `Input` as `hint`. It exists as a\n * component rather than as a snippet each form repeats because the previous\n * version was exactly that snippet — an absolutely-positioned button whose\n * `top-1.5` was one guess at where an 11px label sits — and the reporter's\n * follow-up was *\"question mark is not centered. Is it part of the hoc?\n * positioning problems seem quite frequently.\"* It was not part of the HOC. Now\n * it is, and there is one place left where the answer can be wrong.\n *\n * A `<button>` rather than a bare icon: hover alone puts the explanation out of\n * reach of a keyboard and of every touch device, and the tooltip shows on focus\n * too. The text is also its accessible name, so a screen reader gets it without\n * the bubble ever opening.\n *\n * For a FACT — a format, a limit, a consequence — which at Large and on a touch screen\n * becomes the field's caption ({@link useInlineHint}). Paragraph-long HELP the field is\n * usable without belongs in a `HelpPopover` instead (0.34, §10.23), which opens on a tap\n * and stays a \"?\" at every size.\n */\nexport interface FieldHintProps extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  /** The explanation. It is both the tooltip's text and, by default, the button's\n   *  accessible name, so a screen reader gets it without the bubble ever opening. */\n  label: string;\n  /** Default `\"start\"`: before the hint in the reading direction (the left in LTR, the\n   *  right in RTL). `left` / `right` stay physical. */\n  side?: TooltipSide;\n}\n\nexport function FieldHint({\n  label,\n  side = \"start\",\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: FieldHintProps) {\n  return (\n    // `tap=\"toggle\"` (0.25): the \"?\" exists only to explain, so a tap on a phone shows\n    // the bubble and the next tap hides it — the touch rule (no bubble left behind by a\n    // tap) would otherwise make it show nothing at all.\n    <Tooltip label={label} side={side} portal tap=\"toggle\">\n      <button\n        {...rest}\n        // `type` after the spread, not before. These render inside forms — that is the\n        // only place a field has a label line — and a hint that defaulted to `submit`\n        // because a caller spread a props object at it would save the form on a click\n        // meant to explain a field.\n        type=\"button\"\n        // The explanation names the button unless the caller says otherwise; passing\n        // `aria-label` is how you shorten it for a screen reader without shortening\n        // what the bubble shows.\n        aria-label={ariaLabel ?? label}\n        // Nothing to activate: the tooltip opens on hover and on focus, and a\n        // click that did something as well would be a second, undiscoverable\n        // behaviour on the same target.\n        onClick={(e) => e.preventDefault()}\n        // The kit's focus frame (0.32, §5): the \"?\" is a tab stop, and had no ring at all.\n        className={cn(\n          \"flex rounded-full text-placeholder transition-colors hover:text-secondary\",\n          FOCUS_RING,\n          className,\n        )}\n      >\n        <HelpCircle className=\"size-3.5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/**\n * A field's `hint` as the field should draw it here (0.32, docs/text-size-harmonization.md\n * §4 \"No fact only in a tooltip\"): at Large and Extra large, and on a touch screen, a\n * {@link FieldHint} becomes its own words — so the field shows them as its CAPTION under\n * the box, where they are read without hovering or tapping a 14 px \"?\". Anywhere else,\n * and for any other hint, the hint unchanged.\n *\n * A FieldHint only, on purpose (0.34, §10.23): a FieldHint is a FACT, and a fact stays\n * visible. Paragraph-long HELP — why, how, what the options mean; the field is usable\n * without it — goes in a `HelpPopover`, which this leaves on the label line at every\n * size: printed under the field it was the longest thing in the form (keksdose K3).\n *\n * The kit's fields call it through {@link useFieldHint} / {@link useFieldMessages}; a\n * field that resolves its own `hint` (an app's, or one of the kit's own outside this\n * file) calls it first and then treats the result as it treated a text hint.\n *\n * `withHelp` (round 0.36): the field has a `help`, whose \"?\" is the field's only one\n * ({@link fieldHelpMark}) — so a FieldHint is its words at EVERY size, not only at Large\n * and on touch.\n */\nexport function useInlineHint(hint: ReactNode, withHelp = false): ReactNode {\n  const inline = useInlineFacts();\n  if ((inline || withHelp) && isValidElement(hint) && hint.type === FieldHint) {\n    const words = (hint.props as FieldHintProps).label;\n    if (words) return words;\n  }\n  return hint;\n}\n\n/* ── help (round 0.36, docs/text-size-harmonization.md §4, §10.23) ─────────── */\n\n/**\n * The doc every field's `help` prop points at.\n *\n * A field may carry two kinds of words (§10.23): a FACT — a format, a limit, a\n * consequence — which stays visible, and HELP — why the field exists, how to choose,\n * what the options mean — which the field is usable without and which may sit behind a\n * \"?\". Until 0.36 a field had one slot, `hint`, so a field with both had to drop one or\n * print a paragraph (Kurvenschmiede's \"How it was measured\", round 0.36 H). Now:\n *\n * - `hint` is the fact, the caption under the field, on its `aria-describedby`;\n * - `help` is the help, a {@link HelpPopover} \"?\" on the label line (an unlabelled\n *   field's at its end edge, as a hint's), named \"About “<label>”\" (`common.aboutField`,\n *   from the label's text, else the `aria-label`, else `common.help`). Pass a\n *   `HelpPopover` as `help` to name it yourself (\"What do the statuses mean?\").\n *\n * The help's \"?\" is then the field's ONLY \"?\": a `FieldHint` passed as `hint` beside it\n * draws none of its own and shows its words as the caption at every size, as it does at\n * Large and on touch; any other `hint` is the caption too. Two \"?\" side by side would\n * look the same and open different things.\n */\nexport interface FieldHelpProps {\n  /**\n   * Help the field is usable without — why it exists, how to choose, what the options\n   * mean — behind the field's one \"?\" on its label line: a {@link HelpPopover} named\n   * \"About “<label>”\" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).\n   * Pass a `HelpPopover` to name it yourself. `hint` stays the visible fact: with `help`\n   * set it is the caption under the field at every size, a `FieldHint` included.\n   */\n  help?: ReactNode;\n}\n\n/**\n * The \"?\" for a field's `help` — the field's own name, \"About “<label>”\", in the reader's\n * language. A component so that a field without `help` asks the labels nothing.\n */\nfunction FieldHelp({ name, children }: { name: ReactNode; children: ReactNode }) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const text = plainText(name);\n  return <HelpPopover label={text === undefined ? common.help : common.aboutField(text)}>{children}</HelpPopover>;\n}\n\n/**\n * A field's `help` as the \"?\" for its label line, or `undefined` when there is none. A\n * {@link HelpPopover} is used as it is (it carries its own name); anything else is put\n * in one named \"About “<name>”\" — `name` is the field's label, else its `aria-label`.\n */\nexport function fieldHelpMark(help: ReactNode, name: ReactNode): ReactNode | undefined {\n  if (!hasContent(help)) return undefined;\n  if (isValidElement(help) && help.type === HelpPopover) return help;\n  return <FieldHelp name={name}>{help}</FieldHelp>;\n}\n\n/** What {@link useFieldHint} needs to draw a field's `help`. */\nexport interface FieldHelpSource {\n  /** The field's `help`. */\n  help?: ReactNode;\n  /** What names its \"?\": the field's label, else its `aria-label`. */\n  name?: ReactNode;\n}\n\n\n/**\n * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or\n * something for the label line (a {@link FieldHint} \"?\", or any other node).\n *\n * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of\n * strip shared with the label, and a sentence placed there ran over the label and into\n * the value; a \"?\" under the field would be a button floating free of the label it\n * explains.\n */\nexport function isTextHint(hint: ReactNode): hint is string | number {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\n/** The caption under a field — Select's and NumberInput's type, so every field's\n *  standing advice reads alike. */\nexport const FIELD_CAPTION_CLASS = \"mt-1 text-caption leading-tight text-muted\";\n\nexport interface FieldHintParts {\n  /** The caller's `aria-describedby` with the caption's id appended — standing\n   *  advice first; the error (the news) is appended after this by the field. */\n  describedBy: string | undefined;\n  /** The caption's id while there is one. */\n  captionId: string | undefined;\n  /** The caption itself — a text hint, or any hint beside a `help` — or `undefined`. */\n  captionText: ReactNode | undefined;\n  /** What rides the label line — the `help`'s \"?\" ({@link fieldHelpMark}), else a\n   *  non-text hint (a FieldHint) — or, on a field with no label line, the end edge\n   *  outside the box. `undefined` when there is none. */\n  labelHint: ReactNode | undefined;\n}\n\n/**\n * Whether a resolved `hint` goes under the field as its caption: text always (see\n * {@link isTextHint}); with a `help` beside it, whatever it is — the label line's \"?\"\n * is the help's (round 0.36, §4).\n */\nexport function isHintCaption(hint: ReactNode, withHelp: boolean): boolean {\n  return isTextHint(hint) || (withHelp && hasContent(hint));\n}\n\n/**\n * Split a field's `hint` into the caption under it (attached with `aria-describedby`)\n * or the \"?\" on its label line. See {@link isTextHint}. With a `help` ({@link\n * FieldHelpProps}), the help's \"?\" takes the label line and the hint is the caption.\n */\nexport function useFieldHint(\n  hintProp: ReactNode,\n  describedBy: string | undefined,\n  { help, name }: FieldHelpSource = {},\n): FieldHintParts {\n  const helpMark = fieldHelpMark(help, name);\n  const withHelp = helpMark !== undefined;\n  const hint = useInlineHint(hintProp, withHelp);\n  const captionId = useId();\n  const caption = isHintCaption(hint, withHelp);\n  return {\n    describedBy: caption ? mergeDescribedBy(describedBy, captionId) : describedBy,\n    captionId: caption ? captionId : undefined,\n    captionText: caption ? hint : undefined,\n    labelHint: helpMark ?? (!caption && hasContent(hint) ? hint : undefined),\n  };\n}\n\n/** The error line under a field — one type for every field's message (DUP-8, refactor\n *  audit 2026-10: ChipInput and FileDropzone printed theirs in `text-xs`). */\nexport const FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-danger\";\n\n/**\n * The message under a field that is wrong, and the wiring that attaches it.\n *\n * `invalid` paints the field (`FIELD_INVALID`) and sets `aria-invalid`, and there it\n * stopped: a field that announces \"invalid\" and nothing else has told a screen-reader\n * user only that they are stuck. The message was always on screen — a sibling `<p>`\n * beside the field — and never in the accessibility tree, because attaching it needs an\n * id on the message and an `aria-describedby` on the control, and no caller was going to\n * mint one by hand for every field on a form.\n *\n * Two rules the wiring has to keep:\n *\n *  - **Merge, never replace.** A field may already point at a hint (\"at least twelve\n *    characters\"). Overwriting that reference to say the field is wrong trades one half\n *    of the answer for the other — and it keeps the half the user has already read. The\n *    hint stays first: it is the standing advice, the error is the news.\n *  - **`invalid` keeps working alone**, for the forms whose message lives somewhere else\n *    entirely (a summary at the top of a dialog). There is nothing to point at then, and\n *    a dangling id describes the field as nothing at all.\n *\n * Deliberately NOT `role=\"alert\"`. `aria-describedby` is read when focus reaches the\n * control, which is where a field's own error is wanted; an alert would also interrupt\n * whatever is being read at the time, on every keystroke of a form that re-validates as\n * you type.\n *\n * Every field's since 0.34 (DUP-8, refactor audit 2026-10): it was ui.tsx's own, so the\n * combobox family restated it as `useComboboxFieldError` — without the fourth argument,\n * so Autocomplete announced a form library's `aria-invalid` and did not paint it — and\n * ten fields restated it inline.\n */\nexport function useFieldError(\n  error: ReactNode,\n  invalid: boolean | undefined,\n  describedBy: string | undefined,\n  /** The caller's own `aria-invalid`. A form library sets THIS (see `@eifi1/ui-kit/rhf`\n   *  `RhfField`), not our `invalid` prop — and a field that announces invalid should\n   *  look it too. */\n  ariaInvalid?: unknown,\n): { isInvalid: boolean; describedBy: string | undefined; errorEl: ReactNode } {\n  const errorId = useId();\n  const hasError = hasContent(error);\n  return {\n    /** A field carrying a message that says what is wrong with it IS wrong. */\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy: mergeDescribedBy(describedBy, hasError && errorId),\n    errorEl: hasError ? (\n      <p id={errorId} className={FIELD_ERROR_CLASS}>\n        {error}\n      </p>\n    ) : null,\n  };\n}\n\n/** The caption under a field, as {@link Select} draws its own. */\nexport function FieldCaption({ parts, className }: { parts: FieldHintParts; className?: string }) {\n  if (parts.captionText === undefined) return null;\n  return (\n    <p id={parts.captionId} className={cn(FIELD_CAPTION_CLASS, className)}>\n      {parts.captionText}\n    </p>\n  );\n}\n\n/**\n * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,\n * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.\n * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in\n * the row. At Large the ROW stands above the field, so the label inside it drops the\n * margin a label above takes alone (`large:mb-0`), and stays level with its \"?\".\n */\nexport const LABEL_IN_ROW = \"static min-w-0 large:mb-0\";\n\n/**\n * A static label and its \"?\" on one line, in the top strip of a field that lays out its\n * own label — the combobox family, which cannot use {@link FloatingField} because the\n * trigger, the anchored panel and the label hang off a box of their own.\n *\n * FloatingField's static row, with one difference: it stops at `end-9`, the column the\n * chevron (or the clear \"×\") takes, so a long label truncates before it rather than\n * putting the \"?\" on top of the chevron. The hint keeps its width; the label gives way.\n */\nexport function StaticLabelRow({ hint, children }: { hint: ReactNode; children: ReactNode }) {\n  return (\n    <div\n      data-field-label=\"\"\n      className={cn(\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n    >\n      {children}\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * A field with no label line and a FieldHint \"?\": the hint at the end edge, OUTSIDE the\n * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the\n * field is returned exactly as it was, so the wrapper costs nothing where it does not\n * apply.\n */\nexport function EndHintRow({\n  hint,\n  className,\n  children,\n}: {\n  hint: ReactNode | undefined;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (hint === undefined) return <>{children}</>;\n  return (\n    <div className={cn(\"flex items-center gap-1.5\", className)}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/* ── the write lock on a control that saves itself (keksdose K3) ───────────── */\n\nexport interface LockReason {\n  /** The reason in force — the lock's (with `commit` under a locked\n   *  `WriteLockProvider`), else the control's own `disabledReason`. */\n  reason: ReactNode;\n  /** There is a reason: the control is locked the focusable way. */\n  locked: boolean;\n  /** The id of the reason's hidden copy, for the control's `aria-describedby`. */\n  reasonId: string;\n}\n\n/**\n * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a\n * switch, a checkbox or a select that saves on change, a list row whose click writes.\n * The lock's reason wins over the control's own (`useCommitReason`).\n */\nexport function useLockReason(commit: CommitScope | undefined, disabledReason: ReactNode): LockReason {\n  const reason = useCommitReason(commit, disabledReason);\n  const reasonId = useId();\n  return { reason, locked: hasContent(reason), reasonId };\n}\n\n/**\n * A locked control and its reason — the kit's ONE frame for it, used by Button,\n * IconButton, Chip, Checkbox, Switch and every field that locks (DUP-3, refactor audit\n * 2026-10: Button's `ReasonFrame` and Chip's `ChipReasonFrame` were copies of it, and\n * only those two drew the line, so a field locked through `commit` kept its reason in a\n * tooltip on a phone while the Save beside it said it in words). Where it shows is\n * {@link DisabledReasonDisplay}'s: by default a LINE under the control at Large and on a\n * touch screen ({@link DisabledReasonLine}), the kit {@link Tooltip} otherwise.\n *\n * A component of its own so only a LOCKED control asks the text size and the pointer;\n * the hundreds of unlocked controls on a page subscribe to nothing.\n *\n * Tooltip form: the control in a FRAGMENT with a `hidden` copy of the reason for its\n * `aria-describedby`, so the Tooltip does not also clone its bubble's id into the\n * description — the same sentence twice would be read on every focus. Line form: the\n * line IS the description (it carries `reasonId`), and no bubble repeats what is on\n * screen.\n *\n * `className` is the wrapper's, which becomes the outermost element while locked — a\n * control moves its own layout classes here so a lock does not reflow the form.\n */\nexport function LockedReason({\n  lock,\n  display,\n  line: lineProp,\n  side,\n  portal,\n  className,\n  lineClassName,\n  children,\n}: {\n  /** The reason, and the id the control's `aria-describedby` names. */\n  lock: Pick<LockReason, \"reason\" | \"reasonId\">;\n  /** Where the reason shows — the control's `disabledReasonDisplay`. Default `\"auto\"`. */\n  display?: DisabledReasonDisplay;\n  /** The answer of a caller that asked {@link useDisabledReasonLine} for its own layout\n   *  already (Checkbox, Switch); wins over `display`. */\n  line?: boolean;\n  /** The bubble's side and portal — IconButton's `tooltipSide` / `tooltipPortal`. */\n  side?: TooltipSide;\n  portal?: boolean;\n  className?: string;\n  /** Classes for the line itself — a list row's padding, so the words line up with the\n   *  row's. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  const asked = useDisabledReasonLine(display);\n  if (lineProp ?? asked) {\n    return (\n      <DisabledReasonLine id={lock.reasonId} reason={lock.reason} className={className} lineClassName={lineClassName}>\n        {children}\n      </DisabledReasonLine>\n    );\n  }\n  return (\n    <Tooltip label={lock.reason} side={side} portal={portal} className={className}>\n      <>\n        {children}\n        <span id={lock.reasonId} hidden>\n          {lock.reason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n/* ── no fact only in a tooltip (0.32, docs/text-size-harmonization.md §4, §10.8) ── */\n\n/**\n * Where a control's `disabledReason` is shown (§4 \"No fact only in a tooltip\"):\n *\n * - `\"auto\"` (default): as a LINE under the control at Large and Extra large and on a\n *   touch screen (`useInlineFacts`) — the reader asked for bigger type, or cannot hover\n *   — and in the kit {@link Tooltip} otherwise, where a pointer can hover it open and\n *   the form keeps its rhythm. Inside {@link CompactControls} (a top bar, a dense row's\n *   inline actions) it stays the tooltip at every size: there is no room for a line.\n * - `\"line\"`: always the line — a form whose locked submit should say why at once.\n * - `\"tooltip\"`: always the tooltip — a place the caller knows has no room, and where\n *   the reason is also said elsewhere on the screen (a banner over the form).\n *\n * Either way the reason is the control's `aria-describedby`, so a screen reader hears\n * it on focus; the line IS that description (one copy), the tooltip keeps its hidden\n * copy as before.\n */\nexport type DisabledReasonDisplay = \"auto\" | \"line\" | \"tooltip\";\n\n/**\n * Marks a region where the controls must stay compact at every text size (§4, §10.8):\n * an IconButton keeps its icon alone (its `label` stays the name and the tooltip) and a\n * `disabledReason` stays in the tooltip rather than a line. AppShell puts its top bar\n * in one (\"the top bar keeps its essential icons\"); `RowActions` its inline icons.\n *\n * For a toolbar that has no room, not for a whole page: the contract asks that the icon\n * alone be rare. A dense row's actions belong in `RowActions`, which collapses them\n * into a \"⋯\" menu at Large instead.\n */\nexport const CompactControlsContext = createContext(false);\n\nexport function CompactControls({ children, compact = true }: { children: ReactNode; compact?: boolean }) {\n  return <CompactControlsContext.Provider value={compact}>{children}</CompactControlsContext.Provider>;\n}\n\n/** Whether a control's `disabledReason` is drawn as a line here — see\n *  {@link DisabledReasonDisplay}. For the kit's own controls (Button, IconButton, Chip,\n *  ToggleGroup) and an app's control that has a reason to give. */\nexport function useDisabledReasonLine(display: DisabledReasonDisplay = \"auto\"): boolean {\n  const compact = useContext(CompactControlsContext);\n  const inline = useInlineFacts();\n  if (display === \"line\") return true;\n  if (display === \"tooltip\") return false;\n  return inline && !compact;\n}\n\n/** The reason line's type: a field caption's ({@link FIELD_CAPTION_CLASS}), so a locked\n *  control's \"why\" reads like a field's standing advice. Capped, so a long reason under\n *  a small control wraps rather than widening its row without end. */\nexport const DISABLED_REASON_LINE_CLASS =\n  \"mt-1 block max-w-[20rem] text-caption leading-tight text-muted\";\n\n/**\n * A control and its `disabledReason` as a line under it — the `\"line\"` form of\n * {@link DisabledReasonDisplay}. The wrapper is the flex item now (`className`: the\n * control's own layout, e.g. `self-stretch`); `items-start` keeps the control its own\n * width, and a column parent still stretches the wrapper (FormActions' phone stack).\n * The line carries `id`, which the control's `aria-describedby` names.\n */\nexport function DisabledReasonLine({\n  id,\n  reason,\n  className,\n  lineClassName,\n  children,\n}: {\n  id: string;\n  reason: ReactNode;\n  className?: string;\n  /** Classes for the line itself (0.34) — a list row's padding, so its words start\n   *  where the row's do. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span data-slot=\"disabled-reason\" className={cn(\"inline-flex max-w-full flex-col items-start\", className)}>\n      {children}\n      <span id={id} className={cn(DISABLED_REASON_LINE_CLASS, lineClassName)}>\n        {reason}\n      </span>\n    </span>\n  );\n}\n\n/* ── groups ───────────────────────────────────────────────────────────────── */\n\n/**\n * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box\n * inside it keeps the native `required` (a form still refuses an empty set) but draws no\n * star of its own — four stars on four languages would read as four separate demands.\n * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.\n */\nexport const RequiredStarOnLegend = createContext(false);\n\n/* ── fields not built on FloatingField: pickers and bare groups ──────────── */\n\nexport interface FieldMessages {\n  /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */\n  isInvalid: boolean;\n  /** The caller's description, then the caption, then a lock's reason, then the error —\n   *  the standing advice before the news, as {@link useFieldError} orders them. */\n  describedBy: string | undefined;\n  /** The caption and the error, for under the field; `null` when there is neither. */\n  below: ReactNode;\n  /** What rides the LABEL line — the `help`'s \"?\", else a `FieldHint` — or `undefined`\n   *  when the hint is a caption and there is no help. */\n  labelHint: ReactNode;\n}\n\n/**\n * `hint` / `help` / `error` / `invalid` resolved the way `Select` resolves them —\n * {@link useFieldHint} and {@link useFieldError} together, for a field that draws what\n * goes under it in one place (a picker, a group, a field built on another).\n */\nexport function useFieldMessages({\n  hint,\n  help,\n  name,\n  error,\n  invalid,\n  describedBy,\n  ariaInvalid,\n  reasonId,\n}: FieldHelpSource & {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  describedBy?: string;\n  ariaInvalid?: unknown;\n  /** A lock's reason (`useLockReason`'s `reasonId`, while locked): described after the\n   *  caption and before the error, as on Select. */\n  reasonId?: string | false;\n}): FieldMessages {\n  const hintParts = useFieldHint(hint, describedBy, { help, name });\n  const field = useFieldError(error, invalid, mergeDescribedBy(hintParts.describedBy, reasonId), ariaInvalid);\n  return {\n    isInvalid: field.isInvalid,\n    describedBy: field.describedBy,\n    below:\n      hintParts.captionText !== undefined || field.errorEl !== null ? (\n        <>\n          <FieldCaption parts={hintParts} />\n          {field.errorEl}\n        </>\n      ) : null,\n    labelHint: hintParts.labelHint,\n  };\n}\n\n/**\n * The field and what is under it, as one box — `FieldGroup` in field-base.tsx, for the same\n * reasons written there. Nothing of its own while there is nothing under the field and\n * the caller passed no `error` key (the DOM is exactly what it was before these props);\n * once `error` is passed the box is kept even with no message, so the trigger is never\n * reparented — and remounted, losing focus — as the message comes and goes.\n */\nexport function FieldBox({\n  below,\n  reserve,\n  children,\n}: {\n  below: ReactNode;\n  reserve: boolean;\n  children: ReactNode;\n}) {\n  if (below === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {below}\n    </div>\n  );\n}\n\n/**\n * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a\n * `FieldHint`, the label and its \"?\" laid out on ONE flex row (dev#468: two absolute\n * offsets guessing at the same baseline put the \"?\" three pixels above its word).\n * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and\n * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a\n * long label truncates before it rather than putting the \"?\" on top of it.\n */\nexport function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {\n  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;\n  return (\n    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint\n    // over the row (and take the \"?\"'s hover) otherwise. Above the field at Large.\n    <div\n      data-field-label=\"\"\n      className={cn(\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n    >\n      <FieldLabel className={cn(LABEL_IN_ROW, \"max-w-full\")}>{label}</FieldLabel>\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * How tall the strip over a bare group is: 20px at Normal, for every group the kit\n * draws one over — ToggleGroup's `labelPlacement=\"strip\"`, SwatchPicker, IconPicker\n * and {@link FieldStrip} (whose `pad` named two heights until 0.34).\n *\n * The label ROW, not the label, is what has to fit (keksdose dev#593, kk K4, measured in\n * headless Chromium): it sits `top-1` (4px) and is as tall as the taller of the label\n * (11px `text-caption` in a `leading-tight` line, 13.75px) and its \"?\" (a 14px icon,\n * `size-3.5`) — so it ends 18px down. The strip has to be at least that:\n *\n *     label row: 4 + max(13.75, 14) = 18   ≤   strip: 20   (2px clear of the content)\n *\n * Until 0.34 a 16px strip (`\"field\"`) stood over the segmented group so that 16 + its\n * 26px box made a labelled Input's 42px (keksdose's `ClearedStatusPicker`, live #288 /\n * #431). The label and its \"?\" then crossed the group's top border by 2px — *\"the\n * question mark even interferes with it\"* (at 125 %: label row 424–438, border at 436).\n * The 4px come out of the group's segments instead (`STRIP_SEGMENT` in\n * toggle-group.tsx): 20 + 22 = 42. A tile, a map, a row of buttons — content with no\n * inset — needed the 20px already (keksdose's `FlagPicker` and location field, `pt-5`).\n *\n * Every term is rem, so the sum holds at any browser font size. At Large and Extra large\n * there is no strip: the label row stands above the content, in flow\n * ({@link LABEL_ABOVE_AT_LARGE}), and the padding goes (`large:pt-0` in\n * {@link LabelStrip}), so nothing lies under the label to cross.\n */\nexport const LABEL_STRIP_PAD = \"pt-5\";\n\n/**\n * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:\n * a segmented control or a row of swatches standing in a form row beside labelled\n * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the\n * type of a field's static label) without the group growing a field's border round\n * it. `id` goes on the label so the group can be `aria-labelledby` it.\n *\n * `relative` is load-bearing twice over: the row is positioned against it, and a\n * caller's `sr-only` label cannot escape it (sr-only-containment).\n *\n * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the\n * `role=\"group\"` its label names. The kit's own groups pass none, so their wrapper is\n * the bare box it was in 0.22.\n */\nexport function LabelStrip({\n  labelId,\n  label,\n  hint,\n  disabled,\n  className,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  labelId: string;\n  label: ReactNode;\n  /** What rides the label line beside the label — a resolved `labelHint`\n   *  ({@link useFieldMessages}), never a raw `hint`: a FieldHint is the caption at Large\n   *  and on touch, and the caller draws that under its group. */\n  hint?: ReactNode;\n  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */\n  disabled?: boolean;\n  children: ReactNode;\n}) {\n  return (\n    // At Large the row is a label above the group, in flow (0.33, §10.17), and the\n    // strip's padding goes: nothing lies under it any more.\n    <div {...rest} className={cn(\"relative min-w-0\", LABEL_STRIP_PAD, \"large:pt-0\", className)}>\n      <div\n        data-field-label=\"\"\n        className={cn(\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n      >\n        {/* `static`: FieldLabel positions itself absolutely; here the ROW is\n            positioned, so the label and its \"?\" are centred on one line by the flex\n            layout (dev#468). */}\n        <FieldLabel id={labelId} className={cn(LABEL_IN_ROW, \"max-w-full\", disabled && \"opacity-50\")}>\n          {label}\n        </FieldLabel>\n        {hasContent(hint) && <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/help-popover.d.ts

@@ -35,7 +35,7 @@ export interface HelpPopoverProps {
  * **On a field: its `help`** (0.36, round 0.36 decision 1). Every kit field that takes a
  * `hint` takes a `help` beside it, and the `@eifi1/ui-kit/rhf` bindings too: pass the
  * help's words and the field draws this "?" on its label line (an unlabelled one at its
- * end edge, outside the box), named "About <label>" — or pass a HelpPopover to name it
+ * end edge, outside the box), named "About “<label>”" — or pass a HelpPopover to name it
  * yourself. `hint` stays the FACT, printed under the field; while `help` is set a
  * FieldHint there draws no "?" of its own, so the field has one. Passed as `hint`, as in
  * 0.34, it still rides the label line. It also stands on its own, beside a heading or a

package/dist/components/help-popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/help-popover.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport type { RemLength } from \"../hooks/use-breakpoint\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Popover } from \"./popover\";\n\n/** {@link HelpPopover}'s props. */\nexport interface HelpPopoverProps {\n  /**\n   * Names the \"?\" and the panel — a short question (\"What do the statuses mean?\") or\n   * \"About <field>\" (\"About the settlement date\"), in the reader's language. Required:\n   * a \"?\" named \"?\" tells a screen reader nothing about what it opens. Not the help\n   * itself, which is `children`.\n   */\n  label: string;\n  /** The help: a paragraph, or a few. Rendered in the panel at body size. */\n  children: ReactNode;\n  /** The panel's width — {@link Popover}'s `width`. Default `\"20rem\"`, a paragraph's\n   *  measure; it follows the text size and never exceeds the viewport. */\n  width?: number | RemLength;\n  /** Classes for the \"?\" button. */\n  className?: string;\n}\n\n/** A paragraph's measure: 320 px at Normal, in rem so it grows with the text size. */\nconst HELP_WIDTH: RemLength = \"20rem\";\n\n/**\n * A \"?\" whose HELP opens on a tap, a click or Enter — for a paragraph too long to print\n * under a field (0.34, keksdose K3, live #400: *\"Remove the long text and move it behind\n * a clickable notice like a circle\"*).\n *\n * **Help, not a fact** (docs/text-size-harmonization.md §10.23). {@link FieldHint} is\n * the \"?\" for a FACT — a format, a limit, a consequence — and since 0.32 it turns into\n * its own words under the field at Large and on a touch screen (`useInlineHint`, §4 \"No\n * fact only in a tooltip\"), because a fact a reader cannot reach is a fact they do not\n * have. That rule stays. This part is for HELP: why the field exists, how to choose,\n * what the options mean — text the field is usable without. Printed inline it was the\n * longest thing in keksdose's transaction form (four statuses, ~500 characters, on every\n * new row on a phone). `useInlineHint` turns only a FieldHint into a caption, so this\n * one stays on the label line at every size.\n *\n * **On a field: its `help`** (0.36, round 0.36 decision 1). Every kit field that takes a\n * `hint` takes a `help` beside it, and the `@eifi1/ui-kit/rhf` bindings too: pass the\n * help's words and the field draws this \"?\" on its label line (an unlabelled one at its\n * end edge, outside the box), named \"About <label>\" — or pass a HelpPopover to name it\n * yourself. `hint` stays the FACT, printed under the field; while `help` is set a\n * FieldHint there draws no \"?\" of its own, so the field has one. Passed as `hint`, as in\n * 0.34, it still rides the label line. It also stands on its own, beside a heading or a\n * column title.\n *\n * **A popover, not a tooltip**: a tooltip bubble is for a line, and opens on hover a\n * finger never makes. This is the kit {@link Popover}: it opens and closes on a tap or a\n * click (and on Enter or Space, as any button does), closes on Escape and on a press\n * outside, and takes the focus into its panel and gives it back to the \"?\" on close. The\n * panel is a `dialog` named by `label` and described by the help, so a screen reader\n * reads both on opening. The \"?\" says `aria-expanded` and `aria-haspopup=\"dialog\"`.\n *\n * **\"?\" rather than \"!\"**: it answers a question (\"what is the difference between\n * accepted and cleared?\", keksdose live #247); \"!\" is a warning.\n *\n * ```tsx\n * <Select label=\"Status\" hint=\"Cleared and reconciled rows are locked.\" help={\n *   <HelpPopover label=\"What do the statuses mean?\">\n *     Pending: … Accepted: … Cleared: … Reconciled: …\n *   </HelpPopover>\n * } … />\n * ```\n */\nexport function HelpPopover({ label, children, width = HELP_WIDTH, className }: HelpPopoverProps) {\n  const panelId = useId();\n  const bodyId = useId();\n  return (\n    <Popover\n      width={width}\n      panelId={panelId}\n      // The panel is named by the question and described by the answer, so focus moving\n      // into it reads both.\n      aria-label={label}\n      aria-describedby={bodyId}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          // Never `submit`: the \"?\" sits on a field's label line, inside a form.\n          type=\"button\"\n          aria-label={label}\n          aria-expanded={open}\n          aria-haspopup=\"dialog\"\n          aria-controls={open ? panelId : undefined}\n          onClick={(e) => {\n            // The \"?\" sits in a label strip: the press is the \"?\"'s, not the field's.\n            e.preventDefault();\n            toggle();\n          }}\n          // FieldHint's look, so the two marks read as one family on a label line; the\n          // open one holds its hover colour while its panel shows.\n          className={cn(\n            \"flex rounded-full text-placeholder transition-colors hover:text-secondary\",\n            open && \"text-secondary\",\n            FOCUS_RING,\n            className,\n          )}\n        >\n          <HelpCircle aria-hidden className=\"size-3.5\" />\n        </button>\n      )}\n    >\n      {() => (\n        <div id={bodyId} className=\"space-y-2 text-sm leading-snug text-primary\">\n          {children}\n        </div>\n      )}\n    </Popover>\n  );\n}\n"],"mappings":";AAyGU;AAzGV,SAAS,aAAa;AAEtB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAEnB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAqBxB,MAAM,aAAwB;AA4CvB,SAAS,YAAY,EAAE,OAAO,UAAU,QAAQ,YAAY,UAAU,GAAqB;AAChG,QAAM,UAAU,MAAM;AACtB,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAGA,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB,SAAS,CAAC,EAAE,MAAM,QAAQ,IAAI,MAC5B;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UAEA,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,iBAAe;AAAA,UACf,iBAAc;AAAA,UACd,iBAAe,OAAO,UAAU;AAAA,UAChC,SAAS,CAAC,MAAM;AAEd,cAAE,eAAe;AACjB,mBAAO;AAAA,UACT;AAAA,UAGA,WAAW;AAAA,YACT;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,cAAW,eAAW,MAAC,WAAU,YAAW;AAAA;AAAA,MAC/C;AAAA,MAGD,gBACC,oBAAC,SAAI,IAAI,QAAQ,WAAU,+CACxB,UACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/help-popover.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport type { RemLength } from \"../hooks/use-breakpoint\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Popover } from \"./popover\";\n\n/** {@link HelpPopover}'s props. */\nexport interface HelpPopoverProps {\n  /**\n   * Names the \"?\" and the panel — a short question (\"What do the statuses mean?\") or\n   * \"About <field>\" (\"About the settlement date\"), in the reader's language. Required:\n   * a \"?\" named \"?\" tells a screen reader nothing about what it opens. Not the help\n   * itself, which is `children`.\n   */\n  label: string;\n  /** The help: a paragraph, or a few. Rendered in the panel at body size. */\n  children: ReactNode;\n  /** The panel's width — {@link Popover}'s `width`. Default `\"20rem\"`, a paragraph's\n   *  measure; it follows the text size and never exceeds the viewport. */\n  width?: number | RemLength;\n  /** Classes for the \"?\" button. */\n  className?: string;\n}\n\n/** A paragraph's measure: 320 px at Normal, in rem so it grows with the text size. */\nconst HELP_WIDTH: RemLength = \"20rem\";\n\n/**\n * A \"?\" whose HELP opens on a tap, a click or Enter — for a paragraph too long to print\n * under a field (0.34, keksdose K3, live #400: *\"Remove the long text and move it behind\n * a clickable notice like a circle\"*).\n *\n * **Help, not a fact** (docs/text-size-harmonization.md §10.23). {@link FieldHint} is\n * the \"?\" for a FACT — a format, a limit, a consequence — and since 0.32 it turns into\n * its own words under the field at Large and on a touch screen (`useInlineHint`, §4 \"No\n * fact only in a tooltip\"), because a fact a reader cannot reach is a fact they do not\n * have. That rule stays. This part is for HELP: why the field exists, how to choose,\n * what the options mean — text the field is usable without. Printed inline it was the\n * longest thing in keksdose's transaction form (four statuses, ~500 characters, on every\n * new row on a phone). `useInlineHint` turns only a FieldHint into a caption, so this\n * one stays on the label line at every size.\n *\n * **On a field: its `help`** (0.36, round 0.36 decision 1). Every kit field that takes a\n * `hint` takes a `help` beside it, and the `@eifi1/ui-kit/rhf` bindings too: pass the\n * help's words and the field draws this \"?\" on its label line (an unlabelled one at its\n * end edge, outside the box), named \"About “<label>”\" — or pass a HelpPopover to name it\n * yourself. `hint` stays the FACT, printed under the field; while `help` is set a\n * FieldHint there draws no \"?\" of its own, so the field has one. Passed as `hint`, as in\n * 0.34, it still rides the label line. It also stands on its own, beside a heading or a\n * column title.\n *\n * **A popover, not a tooltip**: a tooltip bubble is for a line, and opens on hover a\n * finger never makes. This is the kit {@link Popover}: it opens and closes on a tap or a\n * click (and on Enter or Space, as any button does), closes on Escape and on a press\n * outside, and takes the focus into its panel and gives it back to the \"?\" on close. The\n * panel is a `dialog` named by `label` and described by the help, so a screen reader\n * reads both on opening. The \"?\" says `aria-expanded` and `aria-haspopup=\"dialog\"`.\n *\n * **\"?\" rather than \"!\"**: it answers a question (\"what is the difference between\n * accepted and cleared?\", keksdose live #247); \"!\" is a warning.\n *\n * ```tsx\n * <Select label=\"Status\" hint=\"Cleared and reconciled rows are locked.\" help={\n *   <HelpPopover label=\"What do the statuses mean?\">\n *     Pending: … Accepted: … Cleared: … Reconciled: …\n *   </HelpPopover>\n * } … />\n * ```\n */\nexport function HelpPopover({ label, children, width = HELP_WIDTH, className }: HelpPopoverProps) {\n  const panelId = useId();\n  const bodyId = useId();\n  return (\n    <Popover\n      width={width}\n      panelId={panelId}\n      // The panel is named by the question and described by the answer, so focus moving\n      // into it reads both.\n      aria-label={label}\n      aria-describedby={bodyId}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          // Never `submit`: the \"?\" sits on a field's label line, inside a form.\n          type=\"button\"\n          aria-label={label}\n          aria-expanded={open}\n          aria-haspopup=\"dialog\"\n          aria-controls={open ? panelId : undefined}\n          onClick={(e) => {\n            // The \"?\" sits in a label strip: the press is the \"?\"'s, not the field's.\n            e.preventDefault();\n            toggle();\n          }}\n          // FieldHint's look, so the two marks read as one family on a label line; the\n          // open one holds its hover colour while its panel shows.\n          className={cn(\n            \"flex rounded-full text-placeholder transition-colors hover:text-secondary\",\n            open && \"text-secondary\",\n            FOCUS_RING,\n            className,\n          )}\n        >\n          <HelpCircle aria-hidden className=\"size-3.5\" />\n        </button>\n      )}\n    >\n      {() => (\n        <div id={bodyId} className=\"space-y-2 text-sm leading-snug text-primary\">\n          {children}\n        </div>\n      )}\n    </Popover>\n  );\n}\n"],"mappings":";AAyGU;AAzGV,SAAS,aAAa;AAEtB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAEnB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAqBxB,MAAM,aAAwB;AA4CvB,SAAS,YAAY,EAAE,OAAO,UAAU,QAAQ,YAAY,UAAU,GAAqB;AAChG,QAAM,UAAU,MAAM;AACtB,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAGA,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB,SAAS,CAAC,EAAE,MAAM,QAAQ,IAAI,MAC5B;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UAEA,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,iBAAe;AAAA,UACf,iBAAc;AAAA,UACd,iBAAe,OAAO,UAAU;AAAA,UAChC,SAAS,CAAC,MAAM;AAEd,cAAE,eAAe;AACjB,mBAAO;AAAA,UACT;AAAA,UAGA,WAAW;AAAA,YACT;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,cAAW,eAAW,MAAC,WAAU,YAAW;AAAA;AAAA,MAC/C;AAAA,MAGD,gBACC,oBAAC,SAAI,IAAI,QAAQ,WAAU,+CACxB,UACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

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

@@ -16,7 +16,7 @@ import type { CommitScope } from "./write-lock.js";
  */
 /** The props both fields take and this engine reads. */
 export interface NumericFieldProps extends FieldHelpProps {
-    /** What names the `help` "?" — "About <label>" — with the `aria-label`. */
+    /** What names the `help` "?" — "About “<label>”" — with the `aria-label`. */
     label?: ReactNode;
     hint?: ReactNode;
     error?: ReactNode;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/numeric-field.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport {\n  mergeDescribedBy,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type FieldHelpProps,\n  type FieldHintParts,\n  type LockReason,\n} from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * The engine NumberInput and AmountInput share (DUP-10, refactor audit 2026-10): the\n * lock, the hint and its caption, the error, the `aria-describedby` order, the typist's\n * draft and what the field shows, the calculator and the phone's numpad, and the room\n * its end controls take. They were two copies of it, and each fix had to be made twice —\n * some reached only one: NumberInput measured its end controls (keksdose live #367) and\n * took a `locale`, AmountInput did neither; the 0.32 FieldHint caption reached\n * AmountInput two releases late.\n *\n * Each field keeps what is its own: the settle (money's minor unit and `min`/`max`\n * against NumberInput's \"what was typed\"), the caller-owned sign, and its trailing\n * controls. Package-private — not re-exported from the barrel.\n */\n\n/** The props both fields take and this engine reads. */\nexport interface NumericFieldProps extends FieldHelpProps {\n  /** What names the `help` \"?\" — \"About <label>\" — with the `aria-label`. */\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  disabled?: boolean;\n  disabledReason?: ReactNode;\n  commit?: CommitScope;\n  /** Show the desktop calculator trigger. Default `true`. */\n  calculator?: boolean;\n  variant?: \"field\" | \"display\";\n  locale?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n}\n\nexport interface NumericFieldOptions {\n  /** The field's own settle, dot-decimal in and out — AmountInput's minor unit and\n   *  `min` / `max`; NumberInput's identity (it never rounds). */\n  settle: (text: string) => string;\n  /** What the field shows while no typed draft stands, dot-decimal, given whether it\n   *  has focus — spelt in the locale's mark here (`derived`). */\n  display: (focused: boolean) => string;\n}\n\nexport interface NumericField {\n  /** The write lock: focusable, `readOnly`, nothing changes or commits. */\n  lock: LockReason;\n  locked: boolean;\n  /** Natively `disabled`: `disabled`, and no lock — a reason wins over it. */\n  off: boolean;\n  /** The hint, split into the caption under the field and the label line's \"?\". */\n  hint: FieldHintParts;\n  /** `invalid`, a message, or a form library's `aria-invalid`. */\n  isInvalid: boolean;\n  /** The caller's ids, the caption, a lock's reason, the error — Select's order. */\n  describedBy: string | undefined;\n  /** The message under the field, or `null`. */\n  errorEl: ReactNode;\n  /** The phone layout: the numpad sheet replaces the keyboard and the calculator. */\n  isMobile: boolean;\n  /** `variant=\"display\"`, on a phone. */\n  asDisplay: boolean;\n  showCalc: boolean;\n  showNumpad: boolean;\n  focused: boolean;\n  setFocused: (focused: boolean) => void;\n  /** The locale's decimal mark — the field's `locale`, else the provider's. */\n  mark: \",\" | \".\";\n  /** The typist's own text while a figure is typed, else `null`. */\n  draft: string | null;\n  setDraft: (draft: string | null) => void;\n  /** `display(focused)` in the locale's mark. */\n  derived: string;\n  /** The draft, while it still says what `canonical` (dot-decimal) says and holds\n   *  nothing the field would drop — see `showsTyped`; else `null`. */\n  typedFor: (canonical: string) => string | null;\n  /** A keystroke's raw text: kept as the draft, and read as a number reads it —\n   *  grouping off, dot-decimal. */\n  read: (raw: string) => string;\n  settle: (text: string) => string;\n}\n\nexport function useNumericField(props: NumericFieldProps, { settle, display }: NumericFieldOptions): NumericField {\n  const lock = useLockReason(props.commit, props.disabledReason);\n  const locked = lock.locked;\n  // §4: a FieldHint is the caption at Large and on touch, as on every field.\n  // A `help` is the label line's one \"?\" and turns the hint into the caption (0.36).\n  const hint = useFieldHint(props.hint, props[\"aria-describedby\"], {\n    help: props.help,\n    name: props.label ?? props[\"aria-label\"],\n  });\n  // The standing advice first, the news second: the caller's ids, the caption, the\n  // error — a lock's reason between the last two, as on Select.\n  const field = useFieldError(\n    props.error,\n    props.invalid,\n    mergeDescribedBy(hint.describedBy, locked && lock.reasonId),\n    props[\"aria-invalid\"],\n  );\n  // On phones the OS keyboard is suppressed (`inputMode=\"none\"`) for the kit's numpad\n  // sheet, so the desktop calculator trigger is hidden (feedback #334). A locked field\n  // offers neither: their result would be a value.\n  const isMobile = usePhoneLayout();\n  const [focused, setFocused] = useState(false);\n  const mark = decimalMark(useKitLocale(props.locale));\n  const [draft, setDraft] = useState<string | null>(null);\n  return {\n    lock,\n    locked,\n    off: Boolean(props.disabled) && !locked,\n    hint,\n    isInvalid: field.isInvalid,\n    describedBy: field.describedBy,\n    errorEl: field.errorEl,\n    isMobile,\n    asDisplay: isMobile && props.variant === \"display\",\n    showCalc: (props.calculator ?? true) && !props.disabled && !locked && !isMobile,\n    showNumpad: isMobile && !props.disabled && !locked && focused,\n    focused,\n    setFocused,\n    mark,\n    draft,\n    setDraft,\n    derived: localizeMark(display(focused), mark),\n    typedFor: (canonical) => (draft !== null && showsTyped(draft, mark, canonical) ? draft : null),\n    read: (raw) => {\n      setDraft(raw);\n      return readTyped(raw, mark);\n    },\n    settle,\n  };\n}\n\n/**\n * The measured width of a field's end controls (keksdose live #367), and the ref for\n * their track: `null` before the first measurement and wherever there is no layout\n * (jsdom), where the field keeps its class fallback. A `ResizeObserver` calls back once\n * on `observe`, and again whenever the controls change size (a chip's code, a translated\n * label, the text size). A pair, so the width reads as the plain number it is.\n */\nexport function useEndWidth(present: boolean): [RefObject<HTMLDivElement | null>, number | null] {\n  const ref = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!present || !el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const measured = el.getBoundingClientRect().width;\n      setWidth(measured > 0 ? Math.ceil(measured) : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [present]);\n  return [ref, width];\n}\n"],"mappings":";AAAA,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,aAAa,cAAc,WAAW,kBAAkB;AACjE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAmFA,SAAS,gBAAgB,OAA0B,EAAE,QAAQ,QAAQ,GAAsC;AAChH,QAAM,OAAO,cAAc,MAAM,QAAQ,MAAM,cAAc;AAC7D,QAAM,SAAS,KAAK;AAGpB,QAAM,OAAO,aAAa,MAAM,MAAM,MAAM,kBAAkB,GAAG;AAAA,IAC/D,MAAM,MAAM;AAAA,IACZ,MAAM,MAAM,SAAS,MAAM,YAAY;AAAA,EACzC,CAAC;AAGD,QAAM,QAAQ;AAAA,IACZ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,iBAAiB,KAAK,aAAa,UAAU,KAAK,QAAQ;AAAA,IAC1D,MAAM,cAAc;AAAA,EACtB;AAIA,QAAM,WAAW,eAAe;AAChC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,OAAO,YAAY,aAAa,MAAM,MAAM,CAAC;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,KAAK,QAAQ,MAAM,QAAQ,KAAK,CAAC;AAAA,IACjC;AAAA,IACA,WAAW,MAAM;AAAA,IACjB,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM;AAAA,IACf;AAAA,IACA,WAAW,YAAY,MAAM,YAAY;AAAA,IACzC,WAAW,MAAM,cAAc,SAAS,CAAC,MAAM,YAAY,CAAC,UAAU,CAAC;AAAA,IACvE,YAAY,YAAY,CAAC,MAAM,YAAY,CAAC,UAAU;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,aAAa,QAAQ,OAAO,GAAG,IAAI;AAAA,IAC5C,UAAU,CAAC,cAAe,UAAU,QAAQ,WAAW,OAAO,MAAM,SAAS,IAAI,QAAQ;AAAA,IACzF,MAAM,CAAC,QAAQ;AACb,eAAS,GAAG;AACZ,aAAO,UAAU,KAAK,IAAI;AAAA,IAC5B;AAAA,IACA;AAAA,EACF;AACF;AASO,SAAS,YAAY,SAAqE;AAC/F,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,WAAW,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAC9D,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,YAAM,WAAW,GAAG,sBAAsB,EAAE;AAC5C,eAAS,WAAW,IAAI,KAAK,KAAK,QAAQ,IAAI,IAAI;AAAA,IACpD,CAAC;AACD,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AACZ,SAAO,CAAC,KAAK,KAAK;AACpB;","names":[]}
+{"version":3,"sources":["../../src/components/numeric-field.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ReactNode, RefObject } from \"react\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport {\n  mergeDescribedBy,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n  type FieldHelpProps,\n  type FieldHintParts,\n  type LockReason,\n} from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\n\n/**\n * The engine NumberInput and AmountInput share (DUP-10, refactor audit 2026-10): the\n * lock, the hint and its caption, the error, the `aria-describedby` order, the typist's\n * draft and what the field shows, the calculator and the phone's numpad, and the room\n * its end controls take. They were two copies of it, and each fix had to be made twice —\n * some reached only one: NumberInput measured its end controls (keksdose live #367) and\n * took a `locale`, AmountInput did neither; the 0.32 FieldHint caption reached\n * AmountInput two releases late.\n *\n * Each field keeps what is its own: the settle (money's minor unit and `min`/`max`\n * against NumberInput's \"what was typed\"), the caller-owned sign, and its trailing\n * controls. Package-private — not re-exported from the barrel.\n */\n\n/** The props both fields take and this engine reads. */\nexport interface NumericFieldProps extends FieldHelpProps {\n  /** What names the `help` \"?\" — \"About “<label>”\" — with the `aria-label`. */\n  label?: ReactNode;\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  disabled?: boolean;\n  disabledReason?: ReactNode;\n  commit?: CommitScope;\n  /** Show the desktop calculator trigger. Default `true`. */\n  calculator?: boolean;\n  variant?: \"field\" | \"display\";\n  locale?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n}\n\nexport interface NumericFieldOptions {\n  /** The field's own settle, dot-decimal in and out — AmountInput's minor unit and\n   *  `min` / `max`; NumberInput's identity (it never rounds). */\n  settle: (text: string) => string;\n  /** What the field shows while no typed draft stands, dot-decimal, given whether it\n   *  has focus — spelt in the locale's mark here (`derived`). */\n  display: (focused: boolean) => string;\n}\n\nexport interface NumericField {\n  /** The write lock: focusable, `readOnly`, nothing changes or commits. */\n  lock: LockReason;\n  locked: boolean;\n  /** Natively `disabled`: `disabled`, and no lock — a reason wins over it. */\n  off: boolean;\n  /** The hint, split into the caption under the field and the label line's \"?\". */\n  hint: FieldHintParts;\n  /** `invalid`, a message, or a form library's `aria-invalid`. */\n  isInvalid: boolean;\n  /** The caller's ids, the caption, a lock's reason, the error — Select's order. */\n  describedBy: string | undefined;\n  /** The message under the field, or `null`. */\n  errorEl: ReactNode;\n  /** The phone layout: the numpad sheet replaces the keyboard and the calculator. */\n  isMobile: boolean;\n  /** `variant=\"display\"`, on a phone. */\n  asDisplay: boolean;\n  showCalc: boolean;\n  showNumpad: boolean;\n  focused: boolean;\n  setFocused: (focused: boolean) => void;\n  /** The locale's decimal mark — the field's `locale`, else the provider's. */\n  mark: \",\" | \".\";\n  /** The typist's own text while a figure is typed, else `null`. */\n  draft: string | null;\n  setDraft: (draft: string | null) => void;\n  /** `display(focused)` in the locale's mark. */\n  derived: string;\n  /** The draft, while it still says what `canonical` (dot-decimal) says and holds\n   *  nothing the field would drop — see `showsTyped`; else `null`. */\n  typedFor: (canonical: string) => string | null;\n  /** A keystroke's raw text: kept as the draft, and read as a number reads it —\n   *  grouping off, dot-decimal. */\n  read: (raw: string) => string;\n  settle: (text: string) => string;\n}\n\nexport function useNumericField(props: NumericFieldProps, { settle, display }: NumericFieldOptions): NumericField {\n  const lock = useLockReason(props.commit, props.disabledReason);\n  const locked = lock.locked;\n  // §4: a FieldHint is the caption at Large and on touch, as on every field.\n  // A `help` is the label line's one \"?\" and turns the hint into the caption (0.36).\n  const hint = useFieldHint(props.hint, props[\"aria-describedby\"], {\n    help: props.help,\n    name: props.label ?? props[\"aria-label\"],\n  });\n  // The standing advice first, the news second: the caller's ids, the caption, the\n  // error — a lock's reason between the last two, as on Select.\n  const field = useFieldError(\n    props.error,\n    props.invalid,\n    mergeDescribedBy(hint.describedBy, locked && lock.reasonId),\n    props[\"aria-invalid\"],\n  );\n  // On phones the OS keyboard is suppressed (`inputMode=\"none\"`) for the kit's numpad\n  // sheet, so the desktop calculator trigger is hidden (feedback #334). A locked field\n  // offers neither: their result would be a value.\n  const isMobile = usePhoneLayout();\n  const [focused, setFocused] = useState(false);\n  const mark = decimalMark(useKitLocale(props.locale));\n  const [draft, setDraft] = useState<string | null>(null);\n  return {\n    lock,\n    locked,\n    off: Boolean(props.disabled) && !locked,\n    hint,\n    isInvalid: field.isInvalid,\n    describedBy: field.describedBy,\n    errorEl: field.errorEl,\n    isMobile,\n    asDisplay: isMobile && props.variant === \"display\",\n    showCalc: (props.calculator ?? true) && !props.disabled && !locked && !isMobile,\n    showNumpad: isMobile && !props.disabled && !locked && focused,\n    focused,\n    setFocused,\n    mark,\n    draft,\n    setDraft,\n    derived: localizeMark(display(focused), mark),\n    typedFor: (canonical) => (draft !== null && showsTyped(draft, mark, canonical) ? draft : null),\n    read: (raw) => {\n      setDraft(raw);\n      return readTyped(raw, mark);\n    },\n    settle,\n  };\n}\n\n/**\n * The measured width of a field's end controls (keksdose live #367), and the ref for\n * their track: `null` before the first measurement and wherever there is no layout\n * (jsdom), where the field keeps its class fallback. A `ResizeObserver` calls back once\n * on `observe`, and again whenever the controls change size (a chip's code, a translated\n * label, the text size). A pair, so the width reads as the plain number it is.\n */\nexport function useEndWidth(present: boolean): [RefObject<HTMLDivElement | null>, number | null] {\n  const ref = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState<number | null>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!present || !el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const measured = el.getBoundingClientRect().width;\n      setWidth(measured > 0 ? Math.ceil(measured) : null);\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [present]);\n  return [ref, width];\n}\n"],"mappings":";AAAA,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,sBAAsB;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,aAAa,cAAc,WAAW,kBAAkB;AACjE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAmFA,SAAS,gBAAgB,OAA0B,EAAE,QAAQ,QAAQ,GAAsC;AAChH,QAAM,OAAO,cAAc,MAAM,QAAQ,MAAM,cAAc;AAC7D,QAAM,SAAS,KAAK;AAGpB,QAAM,OAAO,aAAa,MAAM,MAAM,MAAM,kBAAkB,GAAG;AAAA,IAC/D,MAAM,MAAM;AAAA,IACZ,MAAM,MAAM,SAAS,MAAM,YAAY;AAAA,EACzC,CAAC;AAGD,QAAM,QAAQ;AAAA,IACZ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,iBAAiB,KAAK,aAAa,UAAU,KAAK,QAAQ;AAAA,IAC1D,MAAM,cAAc;AAAA,EACtB;AAIA,QAAM,WAAW,eAAe;AAChC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,OAAO,YAAY,aAAa,MAAM,MAAM,CAAC;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,KAAK,QAAQ,MAAM,QAAQ,KAAK,CAAC;AAAA,IACjC;AAAA,IACA,WAAW,MAAM;AAAA,IACjB,aAAa,MAAM;AAAA,IACnB,SAAS,MAAM;AAAA,IACf;AAAA,IACA,WAAW,YAAY,MAAM,YAAY;AAAA,IACzC,WAAW,MAAM,cAAc,SAAS,CAAC,MAAM,YAAY,CAAC,UAAU,CAAC;AAAA,IACvE,YAAY,YAAY,CAAC,MAAM,YAAY,CAAC,UAAU;AAAA,IACtD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,aAAa,QAAQ,OAAO,GAAG,IAAI;AAAA,IAC5C,UAAU,CAAC,cAAe,UAAU,QAAQ,WAAW,OAAO,MAAM,SAAS,IAAI,QAAQ;AAAA,IACzF,MAAM,CAAC,QAAQ;AACb,eAAS,GAAG;AACZ,aAAO,UAAU,KAAK,IAAI;AAAA,IAC5B;AAAA,IACA;AAAA,EACF;AACF;AASO,SAAS,YAAY,SAAqE;AAC/F,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,WAAW,CAAC,MAAM,OAAO,mBAAmB,YAAa;AAC9D,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,YAAM,WAAW,GAAG,sBAAsB,EAAE;AAC5C,eAAS,WAAW,IAAI,KAAK,KAAK,QAAQ,IAAI,IAAI;AAAA,IACpD,CAAC;AACD,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,OAAO,CAAC;AACZ,SAAO,CAAC,KAAK,KAAK;AACpB;","names":[]}

package/dist/eslint/index.js

@@ -47,7 +47,7 @@ const roleUtilities = {
     };
   }
 };
-const VERSION = true ? "0.36.0" : "0.0.0-source";
+const VERSION = true ? "0.38.0" : "0.0.0-source";
 const recommended = {
   name: "@eifi1/ui-kit/recommended",
   // Not the tests, as check:tokens skips the kit's: a test names the old class to assert it

package/dist/eslint/role-utilities.d.ts

@@ -26,10 +26,42 @@ export type RoleProperty = keyof typeof ROLE_NAMESPACES;
 export type RoleUtilityTable = {
     readonly [P in RoleProperty]: Readonly<Record<string, readonly string[]>>;
 };
+/** One `--<namespace>-<name>: <value>;` of the `@theme inline` block. */
+export interface ThemeInlineDeclaration {
+    /** The theme variable without its dashes: `text-color-muted`, `ring-width-focus`. */
+    variable: string;
+    /** The property whose namespace it is in; `null` for a namespace ROLE_NAMESPACES lacks. */
+    property: RoleProperty | null;
+    /** The name after the namespace, `muted`; `null` with `property`. */
+    name: string | null;
+    /** The utility it makes: `text-muted`, `ring-focus` (a width is `ring-*` like a colour). */
+    utility: string | null;
+    /** The token the value reads, `--text-muted`; `null` unless the value is a bare `var()`. */
+    token: string | null;
+    /** The value as written, trimmed. */
+    value: string;
+}
+/** The `@theme inline` block: where it stands, and every declaration in it in block order. */
+export interface ThemeInlineBlock {
+    /** Its first and one-past-last offset in `stripCssComments(css)`, not in `css`. */
+    start: number;
+    end: number;
+    declarations: ThemeInlineDeclaration[];
+}
+/** `css` without its comments: a declaration commented out is not one. */
+export declare function stripCssComments(css: string): string;
+/**
+ * tokens.css's `@theme inline` block, read once for every reader: the table below, and
+ * the README's (scripts/gen-styling-inventory.mjs), which fails on a `property: null`
+ * where the table leaves it out. `null` when there is no such block — the role utilities
+ * are gone, or this parser is. Theme blocks hold only declarations, so the first `}`
+ * closes it; no namespace is another's prefix, so the first that fits is the one.
+ */
+export declare function parseThemeInline(css: string): ThemeInlineBlock | null;
 /**
  * The table `tokens.css` declares: every `--<namespace>-<name>: var(--<token>)` in its
- * `@theme inline` block, in block order. `null` when there is no such block — the role
- * utilities are gone, or this parser is.
+ * `@theme inline` block, in block order, each property present (in ROLE_NAMESPACES' order)
+ * even when it has none. `null` when there is no such block.
  */
 export declare function roleUtilitiesFromCss(css: string): RoleUtilityTable | null;
 export interface RoleClassHit {

package/dist/eslint/role-utilities.js

@@ -11,15 +11,34 @@ const ROLE_NAMESPACES = {
   "ring-width": "ring-width",
   "outline-width": "outline-width"
 };
+function stripCssComments(css) {
+  return css.replace(/\/\*[\s\S]*?\*\//g, "");
+}
+const PROPERTIES = Object.keys(ROLE_NAMESPACES);
+function parseThemeInline(css) {
+  const block = /@theme\s+inline\s*\{([^}]*)\}/.exec(stripCssComments(css));
+  if (!block) return null;
+  const declarations = [...block[1].matchAll(/--([a-z0-9-]+)\s*:\s*([^;]+);/g)].map(([, variable, raw]) => {
+    const value = raw.trim();
+    const property = PROPERTIES.find((p) => variable.startsWith(`${ROLE_NAMESPACES[p]}-`)) ?? null;
+    const name = property && variable.slice(ROLE_NAMESPACES[property].length + 1);
+    return {
+      variable,
+      property,
+      name,
+      utility: property && `${property.replace(/-width$/, "")}-${name}`,
+      token: /^var\((--[a-z0-9-]+)\)$/.exec(value)?.[1] ?? null,
+      value
+    };
+  });
+  return { start: block.index, end: block.index + block[0].length, declarations };
+}
 function roleUtilitiesFromCss(css) {
-  const theme = /@theme inline\s*\{([^}]*)\}/.exec(css.replace(/\/\*[\s\S]*?\*\//g, ""))?.[1];
-  if (theme === void 0) return null;
-  const table = {};
-  for (const prop of Object.keys(ROLE_NAMESPACES)) {
-    const names = {};
-    const declared = new RegExp(`--${ROLE_NAMESPACES[prop]}-([a-z0-9-]+)\\s*:\\s*var\\((--[a-z0-9-]+)\\)`, "g");
-    for (const [, name, token] of theme.matchAll(declared)) (names[token] ??= []).push(name);
-    table[prop] = names;
+  const block = parseThemeInline(css);
+  if (!block) return null;
+  const table = Object.fromEntries(PROPERTIES.map((p) => [p, {}]));
+  for (const { property, name, token } of block.declarations) {
+    if (property && name && token) (table[property][token] ??= []).push(name);
   }
   return table;
 }
@@ -38,6 +57,8 @@ function findRoleClasses(text, table) {
 export {
   ROLE_NAMESPACES,
   findRoleClasses,
-  roleUtilitiesFromCss
+  parseThemeInline,
+  roleUtilitiesFromCss,
+  stripCssComments
 };
 //# sourceMappingURL=role-utilities.js.map

package/dist/eslint/role-utilities.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/eslint/role-utilities.ts"],"sourcesContent":["// Which `[var(--token)]` classes have a role utility, and what it is called — the one\n// definition `@eifi1/ui-kit/eslint`'s `role-utilities` rule and `npm run check:tokens`\n// (scripts/check-token-discipline.mjs) both read (round 0.35 R5, Kurvenschmiede's Q6).\n//\n// The table itself is role-utilities.generated.ts, re-rendered from tokens.css's\n// `@theme inline` block by scripts/gen-role-utilities.mjs with the parser below; the\n// check fails while it is stale. So tokens.css stays the source: a role that gains a\n// utility there is flagged in the kit and in the apps from the next release on.\n//\n// This module imports NOTHING, and its TypeScript is erasable only (no enum, no\n// namespace, no parameter property): the check imports it from source under Node's type\n// stripping, before any build, and the plugin ships it to an app's ESLint, which is\n// plain Node with no React and no stylesheet.\n\n/**\n * The properties a role utility exists for, each with the Tailwind theme namespace it is\n * declared in. `ring-width` and `outline-width` are a width typed `length:` —\n * `ring-[length:var(--focus-ring-width)]` is `ring-focus`. `divide-*` and the side borders\n * (`border-t-*`, `border-x-*` …) read `border`'s, as Tailwind does.\n */\nexport const ROLE_NAMESPACES = {\n  text: \"text-color\",\n  bg: \"background-color\",\n  border: \"border-color\",\n  ring: \"ring-color\",\n  \"ring-offset\": \"ring-offset-color\",\n  outline: \"outline-color\",\n  fill: \"fill\",\n  stroke: \"stroke\",\n  \"ring-width\": \"ring-width\",\n  \"outline-width\": \"outline-width\",\n} as const;\n\nexport type RoleProperty = keyof typeof ROLE_NAMESPACES;\n\n/**\n * Per property, each token that has a role utility → the utility's name after the\n * property's prefix: `border: { \"--border\": [\"subtle\"] }` is `border-subtle`. A list,\n * because nothing stops two names from reading one token; one name is a fix, several a\n * choice.\n */\nexport type RoleUtilityTable = {\n  readonly [P in RoleProperty]: Readonly<Record<string, readonly string[]>>;\n};\n\n/**\n * The table `tokens.css` declares: every `--<namespace>-<name>: var(--<token>)` in its\n * `@theme inline` block, in block order. `null` when there is no such block — the role\n * utilities are gone, or this parser is.\n */\nexport function roleUtilitiesFromCss(css: string): RoleUtilityTable | null {\n  const theme = /@theme inline\\s*\\{([^}]*)\\}/.exec(css.replace(/\\/\\*[\\s\\S]*?\\*\\//g, \"\"))?.[1];\n  if (theme === undefined) return null;\n  const table = {} as Record<RoleProperty, Record<string, string[]>>;\n  for (const prop of Object.keys(ROLE_NAMESPACES) as RoleProperty[]) {\n    const names: Record<string, string[]> = {};\n    const declared = new RegExp(`--${ROLE_NAMESPACES[prop]}-([a-z0-9-]+)\\\\s*:\\\\s*var\\\\((--[a-z0-9-]+)\\\\)`, \"g\");\n    for (const [, name, token] of theme.matchAll(declared)) (names[token] ??= []).push(name);\n    table[prop] = names;\n  }\n  return table;\n}\n\n/**\n * `text-[var(--text-muted)]`, `hover:bg-[var(--bg-hover)]`, `border-t-[var(--border)]`,\n * `focus-visible:ring-[var(--brand)]/40`, `ring-offset-[var(--bg-surface)]`,\n * `ring-[length:var(--focus-ring-width)]`. Preceded by a start, a space, a quote or a\n * variant's colon, which the match does not include — nor the variants before it or an\n * opacity or `!` after it — so replacing the match keeps all of them.\n */\nconst ROLE_CLASS =\n  /(?<=^|[\\s\"'`:])(text|bg|border(?:-[xytrblse])?|divide|ring-offset|ring|outline|fill|stroke)-\\[(length:)?var\\((--[a-zA-Z0-9-]+)\\)\\]/g;\n\nexport interface RoleClassHit {\n  /** Where the class starts in the scanned text, after its variants. */\n  index: number;\n  /** The class as written, without variants or opacity: `border-t-[var(--border)]`. */\n  found: string;\n  /** The role utilities that paint the same: `[\"border-t-subtle\"]`. */\n  utilities: string[];\n}\n\n/**\n * Every `[var(--token)]` class in `text` whose token has a role utility on that property.\n * A token with no utility there (`text-[var(--chart-1)]`, `--status-*`,\n * `bg-[var(--border)]` as a divider's fill) is not a hit: `[var(--…)]` is right for it.\n */\nexport function findRoleClasses(text: string, table: RoleUtilityTable): RoleClassHit[] {\n  if (!text.includes(\"var(--\")) return [];\n  const hits: RoleClassHit[] = [];\n  for (const m of text.matchAll(ROLE_CLASS)) {\n    const [found, prop, length, token] = m;\n    // `border-t` and `divide` read `border`'s names; a `length:` hint reads the widths.\n    const key = length ? `${prop}-width` : prop.startsWith(\"border-\") || prop === \"divide\" ? \"border\" : prop;\n    const names = (table as Partial<Record<string, Readonly<Record<string, readonly string[]>>>>)[key]?.[token];\n    if (names?.length) hits.push({ index: m.index, found, utilities: names.map((name) => `${prop}-${name}`) });\n  }\n  return hits;\n}\n"],"mappings":";AAoBO,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,eAAe;AAAA,EACf,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AACnB;AAmBO,SAAS,qBAAqB,KAAsC;AACzE,QAAM,QAAQ,8BAA8B,KAAK,IAAI,QAAQ,qBAAqB,EAAE,CAAC,IAAI,CAAC;AAC1F,MAAI,UAAU,OAAW,QAAO;AAChC,QAAM,QAAQ,CAAC;AACf,aAAW,QAAQ,OAAO,KAAK,eAAe,GAAqB;AACjE,UAAM,QAAkC,CAAC;AACzC,UAAM,WAAW,IAAI,OAAO,KAAK,gBAAgB,IAAI,CAAC,iDAAiD,GAAG;AAC1G,eAAW,CAAC,EAAE,MAAM,KAAK,KAAK,MAAM,SAAS,QAAQ,EAAG,EAAC,MAAM,KAAK,MAAM,CAAC,GAAG,KAAK,IAAI;AACvF,UAAM,IAAI,IAAI;AAAA,EAChB;AACA,SAAO;AACT;AASA,MAAM,aACJ;AAgBK,SAAS,gBAAgB,MAAc,OAAyC;AACrF,MAAI,CAAC,KAAK,SAAS,QAAQ,EAAG,QAAO,CAAC;AACtC,QAAM,OAAuB,CAAC;AAC9B,aAAW,KAAK,KAAK,SAAS,UAAU,GAAG;AACzC,UAAM,CAAC,OAAO,MAAM,QAAQ,KAAK,IAAI;AAErC,UAAM,MAAM,SAAS,GAAG,IAAI,WAAW,KAAK,WAAW,SAAS,KAAK,SAAS,WAAW,WAAW;AACpG,UAAM,QAAS,MAA+E,GAAG,IAAI,KAAK;AAC1G,QAAI,OAAO,OAAQ,MAAK,KAAK,EAAE,OAAO,EAAE,OAAO,OAAO,WAAW,MAAM,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,IAAI,EAAE,EAAE,CAAC;AAAA,EAC3G;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/eslint/role-utilities.ts"],"sourcesContent":["// Which `[var(--token)]` classes have a role utility, and what it is called — the one\n// definition `@eifi1/ui-kit/eslint`'s `role-utilities` rule and `npm run check:tokens`\n// (scripts/check-token-discipline.mjs) both read (round 0.35 R5, Kurvenschmiede's Q6).\n//\n// The table itself is role-utilities.generated.ts, re-rendered from tokens.css's\n// `@theme inline` block by scripts/gen-role-utilities.mjs with the parser below; the\n// check fails while it is stale. So tokens.css stays the source: a role that gains a\n// utility there is flagged in the kit and in the apps from the next release on. The\n// README's role-utility table (scripts/gen-styling-inventory.mjs) reads the block with\n// the same parser since 0.37, so the README, the check and the plugin cannot disagree.\n//\n// This module imports NOTHING, and its TypeScript is erasable only (no enum, no\n// namespace, no parameter property): the check imports it from source under Node's type\n// stripping, before any build, and the plugin ships it to an app's ESLint, which is\n// plain Node with no React and no stylesheet.\n\n/**\n * The properties a role utility exists for, each with the Tailwind theme namespace it is\n * declared in. `ring-width` and `outline-width` are a width typed `length:` —\n * `ring-[length:var(--focus-ring-width)]` is `ring-focus`. `divide-*` and the side borders\n * (`border-t-*`, `border-x-*` …) read `border`'s, as Tailwind does.\n */\nexport const ROLE_NAMESPACES = {\n  text: \"text-color\",\n  bg: \"background-color\",\n  border: \"border-color\",\n  ring: \"ring-color\",\n  \"ring-offset\": \"ring-offset-color\",\n  outline: \"outline-color\",\n  fill: \"fill\",\n  stroke: \"stroke\",\n  \"ring-width\": \"ring-width\",\n  \"outline-width\": \"outline-width\",\n} as const;\n\nexport type RoleProperty = keyof typeof ROLE_NAMESPACES;\n\n/**\n * Per property, each token that has a role utility → the utility's name after the\n * property's prefix: `border: { \"--border\": [\"subtle\"] }` is `border-subtle`. A list,\n * because nothing stops two names from reading one token; one name is a fix, several a\n * choice.\n */\nexport type RoleUtilityTable = {\n  readonly [P in RoleProperty]: Readonly<Record<string, readonly string[]>>;\n};\n\n/** One `--<namespace>-<name>: <value>;` of the `@theme inline` block. */\nexport interface ThemeInlineDeclaration {\n  /** The theme variable without its dashes: `text-color-muted`, `ring-width-focus`. */\n  variable: string;\n  /** The property whose namespace it is in; `null` for a namespace ROLE_NAMESPACES lacks. */\n  property: RoleProperty | null;\n  /** The name after the namespace, `muted`; `null` with `property`. */\n  name: string | null;\n  /** The utility it makes: `text-muted`, `ring-focus` (a width is `ring-*` like a colour). */\n  utility: string | null;\n  /** The token the value reads, `--text-muted`; `null` unless the value is a bare `var()`. */\n  token: string | null;\n  /** The value as written, trimmed. */\n  value: string;\n}\n\n/** The `@theme inline` block: where it stands, and every declaration in it in block order. */\nexport interface ThemeInlineBlock {\n  /** Its first and one-past-last offset in `stripCssComments(css)`, not in `css`. */\n  start: number;\n  end: number;\n  declarations: ThemeInlineDeclaration[];\n}\n\n/** `css` without its comments: a declaration commented out is not one. */\nexport function stripCssComments(css: string): string {\n  return css.replace(/\\/\\*[\\s\\S]*?\\*\\//g, \"\");\n}\n\nconst PROPERTIES = Object.keys(ROLE_NAMESPACES) as RoleProperty[];\n\n/**\n * tokens.css's `@theme inline` block, read once for every reader: the table below, and\n * the README's (scripts/gen-styling-inventory.mjs), which fails on a `property: null`\n * where the table leaves it out. `null` when there is no such block — the role utilities\n * are gone, or this parser is. Theme blocks hold only declarations, so the first `}`\n * closes it; no namespace is another's prefix, so the first that fits is the one.\n */\nexport function parseThemeInline(css: string): ThemeInlineBlock | null {\n  const block = /@theme\\s+inline\\s*\\{([^}]*)\\}/.exec(stripCssComments(css));\n  if (!block) return null;\n  const declarations = [...block[1].matchAll(/--([a-z0-9-]+)\\s*:\\s*([^;]+);/g)].map(([, variable, raw]) => {\n    const value = raw.trim();\n    const property = PROPERTIES.find((p) => variable.startsWith(`${ROLE_NAMESPACES[p]}-`)) ?? null;\n    const name = property && variable.slice(ROLE_NAMESPACES[property].length + 1);\n    return {\n      variable,\n      property,\n      name,\n      utility: property && `${property.replace(/-width$/, \"\")}-${name}`,\n      token: /^var\\((--[a-z0-9-]+)\\)$/.exec(value)?.[1] ?? null,\n      value,\n    };\n  });\n  return { start: block.index, end: block.index + block[0].length, declarations };\n}\n\n/**\n * The table `tokens.css` declares: every `--<namespace>-<name>: var(--<token>)` in its\n * `@theme inline` block, in block order, each property present (in ROLE_NAMESPACES' order)\n * even when it has none. `null` when there is no such block.\n */\nexport function roleUtilitiesFromCss(css: string): RoleUtilityTable | null {\n  const block = parseThemeInline(css);\n  if (!block) return null;\n  const table = Object.fromEntries(PROPERTIES.map((p) => [p, {}])) as Record<RoleProperty, Record<string, string[]>>;\n  for (const { property, name, token } of block.declarations) {\n    if (property && name && token) (table[property][token] ??= []).push(name);\n  }\n  return table;\n}\n\n/**\n * `text-[var(--text-muted)]`, `hover:bg-[var(--bg-hover)]`, `border-t-[var(--border)]`,\n * `focus-visible:ring-[var(--brand)]/40`, `ring-offset-[var(--bg-surface)]`,\n * `ring-[length:var(--focus-ring-width)]`. Preceded by a start, a space, a quote or a\n * variant's colon, which the match does not include — nor the variants before it or an\n * opacity or `!` after it — so replacing the match keeps all of them.\n */\nconst ROLE_CLASS =\n  /(?<=^|[\\s\"'`:])(text|bg|border(?:-[xytrblse])?|divide|ring-offset|ring|outline|fill|stroke)-\\[(length:)?var\\((--[a-zA-Z0-9-]+)\\)\\]/g;\n\nexport interface RoleClassHit {\n  /** Where the class starts in the scanned text, after its variants. */\n  index: number;\n  /** The class as written, without variants or opacity: `border-t-[var(--border)]`. */\n  found: string;\n  /** The role utilities that paint the same: `[\"border-t-subtle\"]`. */\n  utilities: string[];\n}\n\n/**\n * Every `[var(--token)]` class in `text` whose token has a role utility on that property.\n * A token with no utility there (`text-[var(--chart-1)]`, `--status-*`,\n * `bg-[var(--border)]` as a divider's fill) is not a hit: `[var(--…)]` is right for it.\n */\nexport function findRoleClasses(text: string, table: RoleUtilityTable): RoleClassHit[] {\n  if (!text.includes(\"var(--\")) return [];\n  const hits: RoleClassHit[] = [];\n  for (const m of text.matchAll(ROLE_CLASS)) {\n    const [found, prop, length, token] = m;\n    // `border-t` and `divide` read `border`'s names; a `length:` hint reads the widths.\n    const key = length ? `${prop}-width` : prop.startsWith(\"border-\") || prop === \"divide\" ? \"border\" : prop;\n    const names = (table as Partial<Record<string, Readonly<Record<string, readonly string[]>>>>)[key]?.[token];\n    if (names?.length) hits.push({ index: m.index, found, utilities: names.map((name) => `${prop}-${name}`) });\n  }\n  return hits;\n}\n"],"mappings":";AAsBO,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,eAAe;AAAA,EACf,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AACnB;AAuCO,SAAS,iBAAiB,KAAqB;AACpD,SAAO,IAAI,QAAQ,qBAAqB,EAAE;AAC5C;AAEA,MAAM,aAAa,OAAO,KAAK,eAAe;AASvC,SAAS,iBAAiB,KAAsC;AACrE,QAAM,QAAQ,gCAAgC,KAAK,iBAAiB,GAAG,CAAC;AACxE,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,eAAe,CAAC,GAAG,MAAM,CAAC,EAAE,SAAS,gCAAgC,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM;AACvG,UAAM,QAAQ,IAAI,KAAK;AACvB,UAAM,WAAW,WAAW,KAAK,CAAC,MAAM,SAAS,WAAW,GAAG,gBAAgB,CAAC,CAAC,GAAG,CAAC,KAAK;AAC1F,UAAM,OAAO,YAAY,SAAS,MAAM,gBAAgB,QAAQ,EAAE,SAAS,CAAC;AAC5E,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,YAAY,GAAG,SAAS,QAAQ,WAAW,EAAE,CAAC,IAAI,IAAI;AAAA,MAC/D,OAAO,0BAA0B,KAAK,KAAK,IAAI,CAAC,KAAK;AAAA,MACrD;AAAA,IACF;AAAA,EACF,CAAC;AACD,SAAO,EAAE,OAAO,MAAM,OAAO,KAAK,MAAM,QAAQ,MAAM,CAAC,EAAE,QAAQ,aAAa;AAChF;AAOO,SAAS,qBAAqB,KAAsC;AACzE,QAAM,QAAQ,iBAAiB,GAAG;AAClC,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,QAAQ,OAAO,YAAY,WAAW,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AAC/D,aAAW,EAAE,UAAU,MAAM,MAAM,KAAK,MAAM,cAAc;AAC1D,QAAI,YAAY,QAAQ,MAAO,EAAC,MAAM,QAAQ,EAAE,KAAK,MAAM,CAAC,GAAG,KAAK,IAAI;AAAA,EAC1E;AACA,SAAO;AACT;AASA,MAAM,aACJ;AAgBK,SAAS,gBAAgB,MAAc,OAAyC;AACrF,MAAI,CAAC,KAAK,SAAS,QAAQ,EAAG,QAAO,CAAC;AACtC,QAAM,OAAuB,CAAC;AAC9B,aAAW,KAAK,KAAK,SAAS,UAAU,GAAG;AACzC,UAAM,CAAC,OAAO,MAAM,QAAQ,KAAK,IAAI;AAErC,UAAM,MAAM,SAAS,GAAG,IAAI,WAAW,KAAK,WAAW,SAAS,KAAK,SAAS,WAAW,WAAW;AACpG,UAAM,QAAS,MAA+E,GAAG,IAAI,KAAK;AAC1G,QAAI,OAAO,OAAQ,MAAK,KAAK,EAAE,OAAO,EAAE,OAAO,OAAO,WAAW,MAAM,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,IAAI,EAAE,EAAE,CAAC;AAAA,EAC3G;AACA,SAAO;AACT;","names":[]}