@eifi1/ui-kit 0.33.1 → 0.34.0

package/dist/components/one-time-code-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/one-time-code-input.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, FocusEvent, InputHTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { FIELD_BASE, FIELD_INVALID, FIELD_WRITABLE_LOOK, FLOATING_INPUT_CLASS, FloatingField } from \"./ui\";\n\n/**\n * The field for a verification code — the six digits an authenticator app shows, or the\n * ones a sign-in mail or SMS carries.\n *\n * Asked for by kastlan (input audit, item 3) and keksdose (K8) for the sign-in\n * verification step, and already written twice by hand inside {@link TwoFactorSetting}.\n * The three copies agreed on `inputMode=\"numeric\"` and `autoComplete=\"one-time-code\"`\n * and on nothing else: kastlan's login stripped non-digits and capped at six, keksdose's\n * capped at eight and kept whatever was typed, and the settings card kept everything,\n * spaces included — so \"123 456\" pasted from an authenticator that groups its digits\n * reached the server with the space in it.\n *\n * ONE FIELD, NOT SIX BOXES. The six-box look is the fashionable one, and every part of\n * it works against the two ways a code actually arrives. A paste lands in ONE input,\n * so the boxes need a paste handler that spreads it; the platform's own code autofill\n * (iOS and macOS offer the code from Messages and Mail above the keyboard, Android's\n * keyboards do the same) fills the ONE field marked `one-time-code`, so the boxes need\n * that field to exist anyway, hidden; and a screen reader hears six unlabelled inputs\n * of one character each. One text field gets all three right for free.\n *\n * WHAT IT DOES TO THE TEXT:\n *  - **Digits only**, as a STRING. A code may start with 0, and a number field would\n *    drop it (\"012345\" → 12345) — kastlan's login says as much in a comment. Every\n *    character that is not a digit is dropped as it arrives, so the spaces and dashes\n *    of \"123 456\" and \"123-456\" go, whether typed or pasted. Full-width digits (what a\n *    Chinese input method types: \"１２３\") are folded to ASCII first (NFKC).\n *  - **No `maxLength` attribute.** The browser applies it BEFORE the change event, so\n *    pasting \"123 456\" into a `maxLength={6}` field kept \"123 45\" and the cleaning saw\n *    one digit short. The length is enforced here instead, after the cleaning: a field\n *    that is full refuses another digit, as `maxLength` would.\n *  - **A paste that is a whole code replaces the field**, wherever the caret is: a\n *    person pasting six digits means \"this is the code\", not \"insert these into the\n *    stale one\".\n *  - **The caret stays put** when a character is dropped, rather than jumping to the\n *    end as a controlled input does when its value is put back.\n *\n * `onComplete` fires when an edit — a keystroke, a paste, the platform's autofill —\n * makes the code `length` digits long. It is a notification, nothing more: the field\n * never submits a form on its own. Whether a full code verifies at once is the app's\n * call (a sign-in step may; a \"turn off two-factor\" form that also wants a password\n * should not). It does not fire for a value set from outside.\n *\n * `label`, `hint` and `error` read as on every kit field: a floating label, a text hint\n * as a caption under the field (a {@link FieldHint} \"?\" rides the label line instead),\n * the error under that, both attached through `aria-describedby` after the caller's own.\n */\nexport interface OneTimeCodeInputProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"inputMode\" | \"autoComplete\" | \"maxLength\" | \"pattern\"\n  > {\n  /** The digits so far — a string, so leading zeros survive. */\n  value: string;\n  /** The cleaned code after every edit: digits only, never longer than `length`. */\n  onChange: (code: string) => void;\n  /** How many digits the code has. Default 6. The field refuses digits past it. */\n  length?: number;\n  /** Called with the code when an edit makes it `length` digits long. Never submits\n   *  anything itself. */\n  onComplete?: (code: string) => void;\n  /** The floating label, as on {@link Input}. Without one, name the field with\n   *  `aria-label` or `aria-labelledby` (kastlan's login points it at its prompt). */\n  label?: ReactNode;\n  /** Plain text: a caption under the field, attached with `aria-describedby`. Anything\n   *  else (a {@link FieldHint}): on the label line — or at the field's end edge when\n   *  there is no label. The rule {@link Select}'s `hint` follows. */\n  hint?: ReactNode;\n  /** What is wrong (\"That code has expired\"). Rendered under the field, attached with\n   *  `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** Paint the field invalid and set `aria-invalid` without a message of its own. */\n  invalid?: boolean;\n  /** Classes for the `<input>`; `className` styles the field's wrapper once it has a\n   *  label, the `<input>` itself when it has none — as on {@link Input}. */\n  inputClassName?: string;\n  /**\n   * Keep the field `readOnly` until it first takes focus.\n   *\n   * A browser that has a login saved for the site fills it in on load — and on a page\n   * where the code field is the only text field near a password field, it can take the\n   * code field for the username and write the address into it. A read-only field is\n   * never autofilled, and focus is the moment a person (or the platform's code\n   * suggestion, which needs a focused field anyway) starts to use it. So the field\n   * stays read-only until then, and only until then.\n   *\n   * It keeps the LOOK of an editable field throughout ({@link FIELD_WRITABLE_LOOK}):\n   * this is the one place where read-only does not mean \"you may not type here\", and\n   * without the opt-out the field would sit there greyed until it is clicked.\n   *\n   * {@link TwoFactorSetting} has always done this — its code fields share a page with\n   * the current-password field of the disable form — and keeps doing it through this\n   * prop. Off by default, because it is a trade: a field that is read-only at the\n   * moment focus lands can be announced as read-only by a screen reader, and on some\n   * mobile browsers it does not raise the keyboard until a second tap. Turn it on where\n   * a saved login actually lands in the field.\n   */\n  readOnlyUntilFocus?: boolean;\n}\n\n// The error line under a field — the type of `ui.tsx`'s (module-private) one, so this\n// field's message is indistinguishable from an Input's.\nconst FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-[var(--danger)]\";\nconst FIELD_CAPTION_CLASS = \"mt-1 text-caption leading-tight text-[var(--text-muted)]\";\n\n// Equal-width digits, spaced a little apart, so a code reads — and compares against the\n// authenticator's screen — digit by digit.\nconst CODE_TYPE = \"tabular-nums tracking-widest\";\n\n/** The ASCII digits in `text`, in order. NFKC folds full-width digits (\"１\") to \"1\". */\nfunction digitsOf(text: string): string {\n  return text.normalize(\"NFKC\").replace(/\\D/g, \"\");\n}\n\nexport const OneTimeCodeInput = forwardRef<HTMLInputElement, OneTimeCodeInputProps>(\n  function OneTimeCodeInput(props, ref) {\n    const {\n      value,\n      onChange,\n      length = 6,\n      onComplete,\n      label,\n      hint,\n      error,\n      invalid: invalidProp,\n      className,\n      inputClassName,\n      readOnlyUntilFocus = false,\n      readOnly,\n      id,\n      placeholder,\n      onFocus,\n      onPaste,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-invalid\": ariaInvalid,\n      ...rest\n    } = props;\n    // A length below one is no code at all; a fractional one is a typo.\n    const size = Math.max(1, Math.floor(length) || 1);\n    const generatedId = useId();\n    const fieldId = id ?? generatedId;\n    const hintId = useId();\n    const errorId = useId();\n    // Text is a caption under the field; a FieldHint rides the label line. See `hint`.\n    const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n    const hasError = hasMessage(error);\n    // Passed at all — even as `undefined` — the field keeps its box, so the `<input>` is\n    // never re-parented (and never loses focus) when a message comes or goes. See\n    // `FieldGroup` in ui.tsx.\n    const reserve = \"error\" in props || \"hint\" in props;\n    const describedBy = mergeDescribedBy(ariaDescribedBy, textHint && hintId, hasError && errorId);\n    const invalid = Boolean(invalidProp) || hasError || ariaInvalid === true || ariaInvalid === \"true\";\n    const labelled = label !== undefined;\n\n    // Focused once = in use; the guard is down for good from then on (see the prop).\n    const [focusedOnce, setFocusedOnce] = useState(false);\n    const guarding = readOnlyUntilFocus && !focusedOnce;\n\n    const commit = (next: string) => {\n      if (next === value) return;\n      onChange(next);\n      if (next.length === size) onComplete?.(next);\n    };\n\n    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n      const input = e.currentTarget;\n      const raw = input.value;\n      const cleaned = digitsOf(raw);\n      // Past the length: a full field refuses the digit (what `maxLength` does), a\n      // partial one keeps the first `size` — a paste longer than the room left.\n      const refused = cleaned.length > size && value.length >= size;\n      const next = refused ? value : cleaned.slice(0, size);\n      if (next !== raw) {\n        // Write the cleaned text back NOW, with the caret where the typist left it.\n        // React would otherwise put its value back after this handler, and setting an\n        // input's value moves the caret to the end — so a space typed mid-code threw\n        // the caret to the last digit. React finds the DOM already agreeing and leaves\n        // it alone.\n        const caret = input.selectionStart ?? raw.length;\n        const at = refused\n          ? Math.max(0, caret - (raw.length - value.length))\n          : Math.min(digitsOf(raw.slice(0, caret)).length, next.length);\n        input.value = next;\n        try {\n          input.setSelectionRange(at, at);\n        } catch {\n          /* not every input type has a selection; a text field does */\n        }\n      }\n      commit(next);\n    };\n\n    const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n      onPaste?.(e);\n      // A read-only field still receives the event; it must not take the code.\n      if (e.defaultPrevented || readOnly || guarding || rest.disabled) return;\n      const pasted = digitsOf(e.clipboardData.getData(\"text\"));\n      // Anything else — a few digits into a partial code — is an ordinary insertion,\n      // and the change handler cleans it.\n      if (pasted.length !== size) return;\n      e.preventDefault();\n      commit(pasted);\n    };\n\n    const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n      if (guarding) setFocusedOnce(true);\n      onFocus?.(e);\n    };\n\n    const input = (\n      <input\n        ref={ref}\n        id={labelled ? fieldId : id}\n        {...rest}\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"one-time-code\"\n        // The numeric keypad's older cue, for the browsers that predate `inputMode`.\n        // The value is digits only, so it can never fail the pattern.\n        pattern=\"[0-9]*\"\n        // A labelled field's placeholder is a single space: it drives the floating\n        // label's `placeholder-shown` trick. Unlabelled, the caller's (\"000000\") shows.\n        placeholder={labelled ? \" \" : placeholder}\n        value={value}\n        readOnly={readOnly || guarding}\n        onChange={handleChange}\n        onPaste={handlePaste}\n        onFocus={handleFocus}\n        aria-invalid={invalid || undefined}\n        aria-describedby={describedBy}\n        className={cn(\n          labelled ? FLOATING_INPUT_CLASS : FIELD_BASE,\n          CODE_TYPE,\n          // Read-only for the guard's sake only: keep the editable look. A caller's\n          // own `readOnly` keeps FIELD_BASE's settled grey, as everywhere else.\n          guarding && !readOnly && FIELD_WRITABLE_LOOK,\n          !labelled && className,\n          inputClassName,\n          invalid && FIELD_INVALID,\n        )}\n      />\n    );\n\n    const nonTextHint = hasMessage(hint) && !textHint;\n    let field: ReactNode;\n    if (labelled) {\n      field = (\n        <FloatingField className={className} htmlFor={fieldId} label={label} hint={nonTextHint ? hint : undefined}>\n          {input}\n        </FloatingField>\n      );\n    } else if (nonTextHint) {\n      // No label line to ride: the \"?\" goes at the field's end edge, outside the box —\n      // where an unlabelled Select puts it.\n      field = (\n        <div className=\"flex items-center gap-1.5\">\n          <div className=\"min-w-0 flex-1\">{input}</div>\n          <span className=\"flex shrink-0 items-center\">{hint}</span>\n        </div>\n      );\n    } else {\n      field = input;\n    }\n\n    if (!textHint && !hasError && !reserve) return field;\n    return (\n      <div>\n        {field}\n        {textHint && (\n          <p id={hintId} className={FIELD_CAPTION_CLASS}>\n            {hint}\n          </p>\n        )}\n        {hasError && (\n          <p id={errorId} className={FIELD_ERROR_CLASS}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\nOneTimeCodeInput.displayName = \"OneTimeCodeInput\";\n"],"mappings":"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","names":["OneTimeCodeInput","input"]}
+{"version":3,"sources":["../../src/components/one-time-code-input.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ChangeEvent, ClipboardEvent, FocusEvent, InputHTMLAttributes, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { EndHintRow, FieldCaption, useFieldError, useFieldHint } from \"./field-parts\";\nimport {\n  FIELD_BASE,\n  FIELD_INVALID,\n  FIELD_WRITABLE_LOOK,\n  FLOATING_INPUT_CLASS,\n  FloatingField,\n} from \"./field-base\";\n\n/**\n * The field for a verification code — the six digits an authenticator app shows, or the\n * ones a sign-in mail or SMS carries.\n *\n * Asked for by kastlan (input audit, item 3) and keksdose (K8) for the sign-in\n * verification step, and already written twice by hand inside {@link TwoFactorSetting}.\n * The three copies agreed on `inputMode=\"numeric\"` and `autoComplete=\"one-time-code\"`\n * and on nothing else: kastlan's login stripped non-digits and capped at six, keksdose's\n * capped at eight and kept whatever was typed, and the settings card kept everything,\n * spaces included — so \"123 456\" pasted from an authenticator that groups its digits\n * reached the server with the space in it.\n *\n * ONE FIELD, NOT SIX BOXES. The six-box look is the fashionable one, and every part of\n * it works against the two ways a code actually arrives. A paste lands in ONE input,\n * so the boxes need a paste handler that spreads it; the platform's own code autofill\n * (iOS and macOS offer the code from Messages and Mail above the keyboard, Android's\n * keyboards do the same) fills the ONE field marked `one-time-code`, so the boxes need\n * that field to exist anyway, hidden; and a screen reader hears six unlabelled inputs\n * of one character each. One text field gets all three right for free.\n *\n * WHAT IT DOES TO THE TEXT:\n *  - **Digits only**, as a STRING. A code may start with 0, and a number field would\n *    drop it (\"012345\" → 12345) — kastlan's login says as much in a comment. Every\n *    character that is not a digit is dropped as it arrives, so the spaces and dashes\n *    of \"123 456\" and \"123-456\" go, whether typed or pasted. Full-width digits (what a\n *    Chinese input method types: \"１２３\") are folded to ASCII first (NFKC).\n *  - **No `maxLength` attribute.** The browser applies it BEFORE the change event, so\n *    pasting \"123 456\" into a `maxLength={6}` field kept \"123 45\" and the cleaning saw\n *    one digit short. The length is enforced here instead, after the cleaning: a field\n *    that is full refuses another digit, as `maxLength` would.\n *  - **A paste that is a whole code replaces the field**, wherever the caret is: a\n *    person pasting six digits means \"this is the code\", not \"insert these into the\n *    stale one\".\n *  - **The caret stays put** when a character is dropped, rather than jumping to the\n *    end as a controlled input does when its value is put back.\n *\n * `onComplete` fires when an edit — a keystroke, a paste, the platform's autofill —\n * makes the code `length` digits long. It is a notification, nothing more: the field\n * never submits a form on its own. Whether a full code verifies at once is the app's\n * call (a sign-in step may; a \"turn off two-factor\" form that also wants a password\n * should not). It does not fire for a value set from outside.\n *\n * `label`, `hint` and `error` read as on every kit field: a floating label, a text hint\n * as a caption under the field (a {@link FieldHint} \"?\" rides the label line instead),\n * the error under that, both attached through `aria-describedby` after the caller's own.\n */\nexport interface OneTimeCodeInputProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"inputMode\" | \"autoComplete\" | \"maxLength\" | \"pattern\"\n  > {\n  /** The digits so far — a string, so leading zeros survive. */\n  value: string;\n  /** The cleaned code after every edit: digits only, never longer than `length`. */\n  onChange: (code: string) => void;\n  /** How many digits the code has. Default 6. The field refuses digits past it. */\n  length?: number;\n  /** Called with the code when an edit makes it `length` digits long. Never submits\n   *  anything itself. */\n  onComplete?: (code: string) => void;\n  /** The floating label, as on {@link Input}. Without one, name the field with\n   *  `aria-label` or `aria-labelledby` (kastlan's login points it at its prompt). */\n  label?: ReactNode;\n  /** Plain text: a caption under the field, attached with `aria-describedby`. Anything\n   *  else (a {@link FieldHint}): on the label line — or at the field's end edge when\n   *  there is no label. The rule {@link Select}'s `hint` follows. */\n  hint?: ReactNode;\n  /** What is wrong (\"That code has expired\"). Rendered under the field, attached with\n   *  `aria-describedby`, and implies `invalid`. */\n  error?: ReactNode;\n  /** Paint the field invalid and set `aria-invalid` without a message of its own. */\n  invalid?: boolean;\n  /** Classes for the `<input>`; `className` styles the field's wrapper once it has a\n   *  label, the `<input>` itself when it has none — as on {@link Input}. */\n  inputClassName?: string;\n  /**\n   * Keep the field `readOnly` until it first takes focus.\n   *\n   * A browser that has a login saved for the site fills it in on load — and on a page\n   * where the code field is the only text field near a password field, it can take the\n   * code field for the username and write the address into it. A read-only field is\n   * never autofilled, and focus is the moment a person (or the platform's code\n   * suggestion, which needs a focused field anyway) starts to use it. So the field\n   * stays read-only until then, and only until then.\n   *\n   * It keeps the LOOK of an editable field throughout ({@link FIELD_WRITABLE_LOOK}):\n   * this is the one place where read-only does not mean \"you may not type here\", and\n   * without the opt-out the field would sit there greyed until it is clicked.\n   *\n   * {@link TwoFactorSetting} has always done this — its code fields share a page with\n   * the current-password field of the disable form — and keeps doing it through this\n   * prop. Off by default, because it is a trade: a field that is read-only at the\n   * moment focus lands can be announced as read-only by a screen reader, and on some\n   * mobile browsers it does not raise the keyboard until a second tap. Turn it on where\n   * a saved login actually lands in the field.\n   */\n  readOnlyUntilFocus?: boolean;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n// Equal-width digits, spaced a little apart, so a code reads — and compares against the\n// authenticator's screen — digit by digit.\nconst CODE_TYPE = \"tabular-nums tracking-widest\";\n\n/** The ASCII digits in `text`, in order. NFKC folds full-width digits (\"１\") to \"1\". */\nfunction digitsOf(text: string): string {\n  return text.normalize(\"NFKC\").replace(/\\D/g, \"\");\n}\n\nexport function OneTimeCodeInput(props: OneTimeCodeInputProps) {\n  const {\n    ref,\n    value,\n    onChange,\n    length = 6,\n    onComplete,\n    label,\n    hint,\n    error,\n    invalid: invalidProp,\n    className,\n    inputClassName,\n    readOnlyUntilFocus = false,\n    readOnly,\n    id,\n    placeholder,\n    onFocus,\n    onPaste,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...rest\n  } = props;\n  // A length below one is no code at all; a fractional one is a typo.\n  const size = Math.max(1, Math.floor(length) || 1);\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  // Text is a caption under the field; a FieldHint rides the label line, and is that\n  // caption at Large and on touch (§4). See `hint`. Through useFieldHint and\n  // useFieldError since 0.34, not copies of their rules (DUP-2, DUP-8).\n  const hintParts = useFieldHint(hint, ariaDescribedBy);\n  const {\n    isInvalid: invalid,\n    describedBy,\n    errorEl,\n  } = useFieldError(error, invalidProp, hintParts.describedBy, ariaInvalid);\n  // Passed at all — even as `undefined` — the field keeps its box, so the `<input>` is\n  // never re-parented (and never loses focus) when a message comes or goes. See\n  // `FieldGroup` in field-base.tsx.\n  const reserve = \"error\" in props || \"hint\" in props;\n  const labelled = label !== undefined;\n\n  // Focused once = in use; the guard is down for good from then on (see the prop).\n  const [focusedOnce, setFocusedOnce] = useState(false);\n  const guarding = readOnlyUntilFocus && !focusedOnce;\n\n  const commit = (next: string) => {\n    if (next === value) return;\n    onChange(next);\n    if (next.length === size) onComplete?.(next);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const input = e.currentTarget;\n    const raw = input.value;\n    const cleaned = digitsOf(raw);\n    // Past the length: a full field refuses the digit (what `maxLength` does), a\n    // partial one keeps the first `size` — a paste longer than the room left.\n    const refused = cleaned.length > size && value.length >= size;\n    const next = refused ? value : cleaned.slice(0, size);\n    if (next !== raw) {\n      // Write the cleaned text back NOW, with the caret where the typist left it.\n      // React would otherwise put its value back after this handler, and setting an\n      // input's value moves the caret to the end — so a space typed mid-code threw\n      // the caret to the last digit. React finds the DOM already agreeing and leaves\n      // it alone.\n      const caret = input.selectionStart ?? raw.length;\n      const at = refused\n        ? Math.max(0, caret - (raw.length - value.length))\n        : Math.min(digitsOf(raw.slice(0, caret)).length, next.length);\n      input.value = next;\n      try {\n        input.setSelectionRange(at, at);\n      } catch {\n        /* not every input type has a selection; a text field does */\n      }\n    }\n    commit(next);\n  };\n\n  const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {\n    onPaste?.(e);\n    // A read-only field still receives the event; it must not take the code.\n    if (e.defaultPrevented || readOnly || guarding || rest.disabled) return;\n    const pasted = digitsOf(e.clipboardData.getData(\"text\"));\n    // Anything else — a few digits into a partial code — is an ordinary insertion,\n    // and the change handler cleans it.\n    if (pasted.length !== size) return;\n    e.preventDefault();\n    commit(pasted);\n  };\n\n  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n    if (guarding) setFocusedOnce(true);\n    onFocus?.(e);\n  };\n\n  const input = (\n    <input\n      ref={ref}\n      id={labelled ? fieldId : id}\n      {...rest}\n      type=\"text\"\n      inputMode=\"numeric\"\n      autoComplete=\"one-time-code\"\n      // The numeric keypad's older cue, for the browsers that predate `inputMode`.\n      // The value is digits only, so it can never fail the pattern.\n      pattern=\"[0-9]*\"\n      // A labelled field's placeholder is a single space: it drives the floating\n      // label's `placeholder-shown` trick. Unlabelled, the caller's (\"000000\") shows.\n      placeholder={labelled ? \" \" : placeholder}\n      value={value}\n      readOnly={readOnly || guarding}\n      onChange={handleChange}\n      onPaste={handlePaste}\n      onFocus={handleFocus}\n      aria-invalid={invalid || undefined}\n      aria-describedby={describedBy}\n      className={cn(\n        labelled ? FLOATING_INPUT_CLASS : FIELD_BASE,\n        CODE_TYPE,\n        // Read-only for the guard's sake only: keep the editable look. A caller's\n        // own `readOnly` keeps FIELD_BASE's settled grey, as everywhere else.\n        guarding && !readOnly && FIELD_WRITABLE_LOOK,\n        !labelled && className,\n        inputClassName,\n        invalid && FIELD_INVALID,\n      )}\n    />\n  );\n\n  const field: ReactNode = labelled ? (\n    <FloatingField className={className} htmlFor={fieldId} label={label} hint={hintParts.labelHint}>\n      {input}\n    </FloatingField>\n  ) : (\n    // No label line to ride: a \"?\" goes at the field's end edge, outside the box —\n    // where an unlabelled Select puts it.\n    <EndHintRow hint={hintParts.labelHint}>{input}</EndHintRow>\n  );\n\n  if (hintParts.captionText === undefined && errorEl === null && !reserve) return field;\n  return (\n    <div>\n      {field}\n      <FieldCaption parts={hintParts} />\n      {errorEl}\n    </div>\n  );\n}\n"],"mappings":"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","names":["input"]}

package/dist/components/page-contents-labels.d.ts

@@ -0,0 +1,2 @@
+import type { PageContentsLabels } from "./page-contents.js";
+export declare const DEFAULT_PAGE_CONTENTS_LABELS: PageContentsLabels;

package/dist/components/page-contents-labels.js

@@ -0,0 +1,8 @@
+"use client";
+const DEFAULT_PAGE_CONTENTS_LABELS = {
+  title: "On this page"
+};
+export {
+  DEFAULT_PAGE_CONTENTS_LABELS
+};
+//# sourceMappingURL=page-contents-labels.js.map

package/dist/components/page-contents-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/page-contents-labels.ts"],"sourcesContent":["// The English words of ./page-contents, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./page-contents re-exports them.\n\nimport type { PageContentsLabels } from \"./page-contents\";\n\nexport const DEFAULT_PAGE_CONTENTS_LABELS: PageContentsLabels = {\n  title: \"On this page\",\n};\n"],"mappings":";AAMO,MAAM,+BAAmD;AAAA,EAC9D,OAAO;AACT;","names":[]}

package/dist/components/page-contents.d.ts

@@ -1,6 +1,6 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { DEFAULT_PAGE_CONTENTS_LABELS } from "./page-contents-labels.js";
 /**
  * "On this page": a page's own table of contents, with the section being read marked.
  *
@@ -16,19 +16,19 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
  * works with any router, including a hash router where `#id` alone would be read as a
  * route.
  */
-interface PageContentsItem {
+export interface PageContentsItem {
     /** The id of the heading the entry jumps to. */
     id: string;
     label: ReactNode;
     /** 2 indents the entry under the one before it. */
     level?: 1 | 2;
 }
-interface PageContentsLabels {
+export interface PageContentsLabels {
     /** The heading above the list, and the landmark's accessible name. */
     title: string;
 }
-declare const DEFAULT_PAGE_CONTENTS_LABELS: PageContentsLabels;
-interface UseScrollSpyOptions {
+export { DEFAULT_PAGE_CONTENTS_LABELS };
+export interface UseScrollSpyOptions {
     /** The element that scrolls. Defaults to the viewport. In `AppShell`, pass its
      *  `<main>` — it is the page's scroll container from `md` up. */
     root?: Element | null;
@@ -46,8 +46,8 @@ interface UseScrollSpyOptions {
  * The id of the section being read: the last of `ids` whose element has scrolled
  * above the reading line — or the first, before any has.
  */
-declare function useScrollSpy(ids: readonly string[], options?: UseScrollSpyOptions): string | null;
-interface PageContentsProps extends Omit<ComponentPropsWithoutRef<"nav">, "children"> {
+export declare function useScrollSpy(ids: readonly string[], options?: UseScrollSpyOptions): string | null;
+export interface PageContentsProps extends Omit<ComponentPropsWithRef<"nav">, "children"> {
     items: PageContentsItem[];
     /** The current entry — typically `useScrollSpy(items.map(i => i.id), …)`. */
     activeId?: string | null;
@@ -57,15 +57,15 @@ interface PageContentsProps extends Omit<ComponentPropsWithoutRef<"nav">, "child
     /** `rail` — a list beside the page. `disclosure` — collapsed under a summary line,
      *  for narrow screens where a rail has no room. */
     variant?: "rail" | "disclosure";
-    labels?: Partial<PageContentsLabels>;
+    labels?: LabelOverride<PageContentsLabels>;
 }
 /**
  * The list itself. The current entry gets a brand bar on the list's rule, the brand
  * colour, and `aria-current="location"` — the marker documentation sites use, and the
  * one a screen reader announces.
  */
-declare function PageContents({ items, activeId, hrefFor, variant, labels, className, ...rest }: PageContentsProps): react.JSX.Element | null;
-interface PageContentsLayoutProps extends ComponentPropsWithoutRef<"div"> {
+export declare function PageContents({ items, activeId, hrefFor, variant, labels, className, ...rest }: PageContentsProps): import("react").JSX.Element | null;
+export interface PageContentsLayoutProps extends ComponentPropsWithRef<"div"> {
     /** What goes in the rail — typically a `<PageContents variant="rail">`. */
     contents: ReactNode;
     /**
@@ -85,6 +85,4 @@ interface PageContentsLayoutProps extends ComponentPropsWithoutRef<"div"> {
  * The rail is `sticky top-6`, which sticks inside the nearest scroll container — the
  * viewport, or `AppShell`'s `<main>`.
  */
-declare function PageContentsLayout({ contents, position, children, className, ...rest }: PageContentsLayoutProps): react.JSX.Element;
-
-export { DEFAULT_PAGE_CONTENTS_LABELS, PageContents, type PageContentsItem, type PageContentsLabels, PageContentsLayout, type PageContentsLayoutProps, type PageContentsProps, type UseScrollSpyOptions, useScrollSpy };
+export declare function PageContentsLayout({ contents, position, children, className, ...rest }: PageContentsLayoutProps): import("react").JSX.Element;

package/dist/components/page-contents.js

@@ -4,9 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
-const DEFAULT_PAGE_CONTENTS_LABELS = {
-  title: "On this page"
-};
+import { DEFAULT_PAGE_CONTENTS_LABELS } from "./page-contents-labels.js";
 function useScrollSpy(ids, options = {}) {
   const { root = null, line = 0.15 } = options;
   const [current, setCurrent] = useState(null);
@@ -79,7 +77,7 @@ function PageContents({
     {
       ref: listRef,
       className: cn(
-        "space-y-0.5 border-s border-[var(--border)]",
+        "space-y-0.5 border-s border-subtle",
         variant === "rail" && "max-h-[calc(100dvh-10rem)] overflow-y-auto [scrollbar-width:thin]"
       ),
       children: items.map((item) => {
@@ -94,7 +92,7 @@ function PageContents({
               "-ms-px block border-s-2 py-1 pe-1 text-[0.8125rem] leading-snug transition-colors duration-150",
               variant === "rail" && "[overflow-wrap:anywhere]",
               item.level === 2 ? "ps-6" : "ps-3",
-              current ? "border-[var(--brand)] font-medium text-[var(--brand)]" : "border-transparent text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-primary)]"
+              current ? "border-brand font-medium text-brand" : "border-transparent text-muted hover:border-strong hover:text-primary"
             ),
             children: item.label
           }
@@ -107,11 +105,11 @@ function PageContents({
       "details",
       {
         className: cn(
-          "group rounded-md border border-[var(--border)] bg-[var(--bg-surface)]",
+          "group rounded-md border border-subtle bg-surface",
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-[var(--text-secondary)] [&::-webkit-details-marker]:hidden", children: [
+          /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-secondary [&::-webkit-details-marker]:hidden", children: [
             l.title,
             /* @__PURE__ */ jsx(
               ChevronDown,
@@ -121,13 +119,13 @@ function PageContents({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("nav", { ...rest, "aria-label": l.title, className: "border-t border-[var(--border)] px-2 py-2", children: list })
+          /* @__PURE__ */ jsx("nav", { ...rest, "aria-label": l.title, className: "border-t border-subtle px-2 py-2", children: list })
         ]
       }
     );
   }
   return /* @__PURE__ */ jsxs("nav", { ...rest, "aria-label": l.title, className, children: [
-    /* @__PURE__ */ jsx("p", { className: "mb-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]", children: l.title }),
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-caption font-semibold uppercase tracking-wide text-muted", children: l.title }),
     list
   ] });
 }

package/dist/components/page-contents.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/page-contents.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * \"On this page\": a page's own table of contents, with the section being read marked.\n *\n * Three parts, because an app needs them separately:\n *\n *   - {@link useScrollSpy} — which section is current, from the headings' positions in\n *     a scroll container. No markup; usable for anything that follows the reader.\n *   - {@link PageContents} — the list. `variant=\"rail\"` for beside the page,\n *     `variant=\"disclosure\"` for a collapsed block under the title on narrow screens.\n *   - {@link PageContentsLayout} — the page with the rail sticky on one side of it.\n *\n * Domain-free: the app supplies the entries and how an entry links (`hrefFor`), so it\n * works with any router, including a hash router where `#id` alone would be read as a\n * route.\n */\n\nexport interface PageContentsItem {\n  /** The id of the heading the entry jumps to. */\n  id: string;\n  label: ReactNode;\n  /** 2 indents the entry under the one before it. */\n  level?: 1 | 2;\n}\n\nexport interface PageContentsLabels {\n  /** The heading above the list, and the landmark's accessible name. */\n  title: string;\n}\n\nexport const DEFAULT_PAGE_CONTENTS_LABELS: PageContentsLabels = {\n  title: \"On this page\",\n};\n\nexport interface UseScrollSpyOptions {\n  /** The element that scrolls. Defaults to the viewport. In `AppShell`, pass its\n   *  `<main>` — it is the page's scroll container from `md` up. */\n  root?: Element | null;\n  /**\n   * How far down the scroller the \"reading line\" sits, as a fraction of its height.\n   * A section becomes current once its heading passes above it, and stays current\n   * until the next heading does — so a long section keeps its entry marked while it\n   * is being read, not only while its heading is on screen. Default 0.15: close to\n   * the top, so a short section followed by another does not hand its mark to the\n   * next one the moment it is scrolled to.\n   */\n  line?: number;\n}\n\n/**\n * The id of the section being read: the last of `ids` whose element has scrolled\n * above the reading line — or the first, before any has.\n */\nexport function useScrollSpy(ids: readonly string[], options: UseScrollSpyOptions = {}): string | null {\n  const { root = null, line = 0.15 } = options;\n  const [current, setCurrent] = useState<string | null>(null);\n  const key = ids.join(\"\\u0000\");\n\n  useEffect(() => {\n    if (ids.length === 0) return;\n    const scroller: Element | Window = root ?? window;\n    const measure = () => {\n      const top = root ? root.getBoundingClientRect().top : 0;\n      const height = root ? root.clientHeight : window.innerHeight;\n      const reading = top + height * line;\n      let next = ids[0];\n      for (const id of ids) {\n        const el = document.getElementById(id);\n        if (el && el.getBoundingClientRect().top <= reading) next = id;\n      }\n      // At the very bottom the last sections may never reach the line; the reader\n      // who scrolled to the end is reading the end.\n      const atEnd = root\n        ? root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n        : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;\n      const scrolled = root ? root.scrollTop : window.scrollY;\n      if (atEnd && scrolled > 0) next = ids[ids.length - 1];\n      setCurrent(next);\n    };\n    let frame = 0;\n    const onScroll = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(measure);\n    };\n    measure();\n    scroller.addEventListener(\"scroll\", onScroll, { passive: true });\n    window.addEventListener(\"resize\", onScroll);\n    return () => {\n      cancelAnimationFrame(frame);\n      scroller.removeEventListener(\"scroll\", onScroll);\n      window.removeEventListener(\"resize\", onScroll);\n    };\n    // `key` stands for `ids`: a new array with the same entries is the same list.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key, root, line]);\n\n  return current;\n}\n\nexport interface PageContentsProps extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  items: PageContentsItem[];\n  /** The current entry — typically `useScrollSpy(items.map(i => i.id), …)`. */\n  activeId?: string | null;\n  /** The link for an entry. Default `#id`; under a hash router build it with the\n   *  router (react-router's `useHref({ hash: id })` gives `#/page#id`). */\n  hrefFor?: (id: string) => string;\n  /** `rail` — a list beside the page. `disclosure` — collapsed under a summary line,\n   *  for narrow screens where a rail has no room. */\n  variant?: \"rail\" | \"disclosure\";\n  labels?: Partial<PageContentsLabels>;\n}\n\n/**\n * The list itself. The current entry gets a brand bar on the list's rule, the brand\n * colour, and `aria-current=\"location\"` — the marker documentation sites use, and the\n * one a screen reader announces.\n */\nexport function PageContents({\n  items,\n  activeId,\n  hrefFor = (id) => `#${id}`,\n  variant = \"rail\",\n  labels,\n  className,\n  ...rest\n}: PageContentsProps) {\n  const l = useKitLabels(\"pageContents\", DEFAULT_PAGE_CONTENTS_LABELS, labels);\n  const listRef = useRef<HTMLUListElement>(null);\n  // The entry just clicked is the current one until the reader scrolls on their own.\n  // Without this, jumping to a short section near the end of a page marks whichever\n  // later section the jump also carried past the reading line — you click one entry\n  // and another lights up.\n  const [clicked, setClicked] = useState<string | null>(null);\n  useEffect(() => {\n    if (!clicked) return;\n    const release = () => setClicked(null);\n    // A user scroll — wheel, touch, keys — releases it; the programmatic scroll the\n    // jump itself causes does not fire these.\n    window.addEventListener(\"wheel\", release, { passive: true, once: true });\n    window.addEventListener(\"touchmove\", release, { passive: true, once: true });\n    window.addEventListener(\"keydown\", release, { once: true });\n    return () => {\n      window.removeEventListener(\"wheel\", release);\n      window.removeEventListener(\"touchmove\", release);\n      window.removeEventListener(\"keydown\", release);\n    };\n  }, [clicked]);\n  const shown = clicked ?? activeId;\n\n  // Keep the current entry in view when the list is taller than the window.\n  useEffect(() => {\n    if (!shown || variant !== \"rail\") return;\n    listRef.current\n      ?.querySelector<HTMLElement>(`[data-entry=\"${CSS.escape(shown)}\"]`)\n      ?.scrollIntoView?.({ block: \"nearest\" });\n  }, [shown, variant]);\n\n  if (items.length === 0) return null;\n\n  const list = (\n    <ul\n      ref={listRef}\n      className={cn(\n        \"space-y-0.5 border-s border-[var(--border)]\",\n        variant === \"rail\" && \"max-h-[calc(100dvh-10rem)] overflow-y-auto [scrollbar-width:thin]\",\n      )}\n    >\n      {items.map((item) => {\n        const current = item.id === shown;\n        return (\n          <li key={item.id} data-entry={item.id}>\n            <a\n              href={hrefFor(item.id)}\n              // Entries WRAP in the rail rather than truncate: a cut-off heading needed a\n              // native `title` to be read at all, which a keyboard never sees and which\n              // broke keksdose's one-tooltip rule (dev#523).\n              aria-current={current ? \"location\" : undefined}\n              onClick={() => setClicked(item.id)}\n              className={cn(\n                \"-ms-px block border-s-2 py-1 pe-1 text-[0.8125rem] leading-snug transition-colors duration-150\",\n                variant === \"rail\" && \"[overflow-wrap:anywhere]\",\n                item.level === 2 ? \"ps-6\" : \"ps-3\",\n                current\n                  ? \"border-[var(--brand)] font-medium text-[var(--brand)]\"\n                  : \"border-transparent text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-primary)]\",\n              )}\n            >\n              {item.label}\n            </a>\n          </li>\n        );\n      })}\n    </ul>\n  );\n\n  if (variant === \"disclosure\") {\n    return (\n      <details\n        className={cn(\n          \"group rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\",\n          className,\n        )}\n      >\n        <summary className=\"flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-[var(--text-secondary)] [&::-webkit-details-marker]:hidden\">\n          {l.title}\n          <ChevronDown\n            aria-hidden\n            className=\"size-4 transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none\"\n          />\n        </summary>\n        <nav {...rest} aria-label={l.title} className=\"border-t border-[var(--border)] px-2 py-2\">\n          {list}\n        </nav>\n      </details>\n    );\n  }\n\n  return (\n    <nav {...rest} aria-label={l.title} className={className}>\n      <p className=\"mb-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]\">\n        {l.title}\n      </p>\n      {list}\n    </nav>\n  );\n}\n\nexport interface PageContentsLayoutProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** What goes in the rail — typically a `<PageContents variant=\"rail\">`. */\n  contents: ReactNode;\n  /**\n   * Which side of the page the rail sits on: `start` is the left in a left-to-right\n   * language (next to the app's own sidebar, so both navigations are in one place),\n   * `end` the right (the documentation-site convention, clear of the sidebar). Logical,\n   * so both flip in a right-to-left UI.\n   */\n  position?: \"start\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * The page with a sticky contents rail beside it, from `xl` (1280px) up. Below that\n * the rail would squeeze the content, so it is not rendered there — pair it with a\n * `<PageContents variant=\"disclosure\" className=\"xl:hidden\">` in the page.\n *\n * The rail is `sticky top-6`, which sticks inside the nearest scroll container — the\n * viewport, or `AppShell`'s `<main>`.\n */\nexport function PageContentsLayout({\n  contents,\n  position = \"start\",\n  children,\n  className,\n  ...rest\n}: PageContentsLayoutProps) {\n  // In DOM order on its side, not moved there with `order`: Tab and a screen reader\n  // follow the source, and a rail painted on the left but read after the page would\n  // put the page's index at its end.\n  const rail = (\n    <aside className=\"hidden xl:block\">\n      <div className=\"sticky top-6\">{contents}</div>\n    </aside>\n  );\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"xl:grid xl:gap-10\",\n        // `fit-content(22rem)`: the rail is as wide as its longest entry, up to 22rem.\n        // A fixed 13rem broke \"Select — unlabelled, labelled, invalid, disabled\" over\n        // three lines beside a page with room to spare; an index you scan should read\n        // one entry per line.\n        position === \"start\"\n          ? \"xl:grid-cols-[fit-content(22rem)_minmax(0,1fr)]\"\n          : \"xl:grid-cols-[minmax(0,1fr)_fit-content(22rem)]\",\n        className,\n      )}\n    >\n      {position === \"start\" && rail}\n      <div className=\"min-w-0\">{children}</div>\n      {position === \"end\" && rail}\n    </div>\n  );\n}\n"],"mappings":";AAgLY,cAgCJ,YAhCI;AAhLZ,SAAS,WAAW,QAAQ,gBAAgB;AAE5C,SAAS,mBAAmB;AAC5B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AA+BtB,MAAM,+BAAmD;AAAA,EAC9D,OAAO;AACT;AAqBO,SAAS,aAAa,KAAwB,UAA+B,CAAC,GAAkB;AACrG,QAAM,EAAE,OAAO,MAAM,OAAO,KAAK,IAAI;AACrC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,IAAI;AAC1D,QAAM,MAAM,IAAI,KAAK,IAAQ;AAE7B,YAAU,MAAM;AACd,QAAI,IAAI,WAAW,EAAG;AACtB,UAAM,WAA6B,QAAQ;AAC3C,UAAM,UAAU,MAAM;AACpB,YAAM,MAAM,OAAO,KAAK,sBAAsB,EAAE,MAAM;AACtD,YAAM,SAAS,OAAO,KAAK,eAAe,OAAO;AACjD,YAAM,UAAU,MAAM,SAAS;AAC/B,UAAI,OAAO,IAAI,CAAC;AAChB,iBAAW,MAAM,KAAK;AACpB,cAAM,KAAK,SAAS,eAAe,EAAE;AACrC,YAAI,MAAM,GAAG,sBAAsB,EAAE,OAAO,QAAS,QAAO;AAAA,MAC9D;AAGA,YAAM,QAAQ,OACV,KAAK,YAAY,KAAK,gBAAgB,KAAK,eAAe,IAC1D,OAAO,UAAU,OAAO,eAAe,SAAS,gBAAgB,eAAe;AACnF,YAAM,WAAW,OAAO,KAAK,YAAY,OAAO;AAChD,UAAI,SAAS,WAAW,EAAG,QAAO,IAAI,IAAI,SAAS,CAAC;AACpD,iBAAW,IAAI;AAAA,IACjB;AACA,QAAI,QAAQ;AACZ,UAAM,WAAW,MAAM;AACrB,2BAAqB,KAAK;AAC1B,cAAQ,sBAAsB,OAAO;AAAA,IACvC;AACA,YAAQ;AACR,aAAS,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;AAC/D,WAAO,iBAAiB,UAAU,QAAQ;AAC1C,WAAO,MAAM;AACX,2BAAqB,KAAK;AAC1B,eAAS,oBAAoB,UAAU,QAAQ;AAC/C,aAAO,oBAAoB,UAAU,QAAQ;AAAA,IAC/C;AAAA,EAGF,GAAG,CAAC,KAAK,MAAM,IAAI,CAAC;AAEpB,SAAO;AACT;AAoBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,UAAU,CAAC,OAAO,IAAI,EAAE;AAAA,EACxB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,IAAI,aAAa,gBAAgB,8BAA8B,MAAM;AAC3E,QAAM,UAAU,OAAyB,IAAI;AAK7C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAwB,IAAI;AAC1D,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,UAAU,MAAM,WAAW,IAAI;AAGrC,WAAO,iBAAiB,SAAS,SAAS,EAAE,SAAS,MAAM,MAAM,KAAK,CAAC;AACvE,WAAO,iBAAiB,aAAa,SAAS,EAAE,SAAS,MAAM,MAAM,KAAK,CAAC;AAC3E,WAAO,iBAAiB,WAAW,SAAS,EAAE,MAAM,KAAK,CAAC;AAC1D,WAAO,MAAM;AACX,aAAO,oBAAoB,SAAS,OAAO;AAC3C,aAAO,oBAAoB,aAAa,OAAO;AAC/C,aAAO,oBAAoB,WAAW,OAAO;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AACZ,QAAM,QAAQ,WAAW;AAGzB,YAAU,MAAM;AACd,QAAI,CAAC,SAAS,YAAY,OAAQ;AAClC,YAAQ,SACJ,cAA2B,gBAAgB,IAAI,OAAO,KAAK,CAAC,IAAI,GAChE,iBAAiB,EAAE,OAAO,UAAU,CAAC;AAAA,EAC3C,GAAG,CAAC,OAAO,OAAO,CAAC;AAEnB,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,OACJ;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,YAAY,UAAU;AAAA,MACxB;AAAA,MAEC,gBAAM,IAAI,CAAC,SAAS;AACnB,cAAM,UAAU,KAAK,OAAO;AAC5B,eACE,oBAAC,QAAiB,cAAY,KAAK,IACjC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,QAAQ,KAAK,EAAE;AAAA,YAIrB,gBAAc,UAAU,aAAa;AAAA,YACrC,SAAS,MAAM,WAAW,KAAK,EAAE;AAAA,YACjC,WAAW;AAAA,cACT;AAAA,cACA,YAAY,UAAU;AAAA,cACtB,KAAK,UAAU,IAAI,SAAS;AAAA,cAC5B,UACI,0DACA;AAAA,YACN;AAAA,YAEC,eAAK;AAAA;AAAA,QACR,KAlBO,KAAK,EAmBd;AAAA,MAEJ,CAAC;AAAA;AAAA,EACH;AAGF,MAAI,YAAY,cAAc;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,+BAAC,aAAQ,WAAU,4JAChB;AAAA,cAAE;AAAA,YACH;AAAA,cAAC;AAAA;AAAA,gBACC,eAAW;AAAA,gBACX,WAAU;AAAA;AAAA,YACZ;AAAA,aACF;AAAA,UACA,oBAAC,SAAK,GAAG,MAAM,cAAY,EAAE,OAAO,WAAU,6CAC3C,gBACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAK,GAAG,MAAM,cAAY,EAAE,OAAO,WAClC;AAAA,wBAAC,OAAE,WAAU,oFACV,YAAE,OACL;AAAA,IACC;AAAA,KACH;AAEJ;AAuBO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAI1B,QAAM,OACJ,oBAAC,WAAM,WAAU,mBACf,8BAAC,SAAI,WAAU,gBAAgB,oBAAS,GAC1C;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,aAAa,UACT,oDACA;AAAA,QACJ;AAAA,MACF;AAAA,MAEC;AAAA,qBAAa,WAAW;AAAA,QACzB,oBAAC,SAAI,WAAU,WAAW,UAAS;AAAA,QAClC,aAAa,SAAS;AAAA;AAAA;AAAA,EACzB;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/page-contents.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_PAGE_CONTENTS_LABELS } from \"./page-contents-labels\";\n\n/**\n * \"On this page\": a page's own table of contents, with the section being read marked.\n *\n * Three parts, because an app needs them separately:\n *\n *   - {@link useScrollSpy} — which section is current, from the headings' positions in\n *     a scroll container. No markup; usable for anything that follows the reader.\n *   - {@link PageContents} — the list. `variant=\"rail\"` for beside the page,\n *     `variant=\"disclosure\"` for a collapsed block under the title on narrow screens.\n *   - {@link PageContentsLayout} — the page with the rail sticky on one side of it.\n *\n * Domain-free: the app supplies the entries and how an entry links (`hrefFor`), so it\n * works with any router, including a hash router where `#id` alone would be read as a\n * route.\n */\n\nexport interface PageContentsItem {\n  /** The id of the heading the entry jumps to. */\n  id: string;\n  label: ReactNode;\n  /** 2 indents the entry under the one before it. */\n  level?: 1 | 2;\n}\n\nexport interface PageContentsLabels {\n  /** The heading above the list, and the landmark's accessible name. */\n  title: string;\n}\n\n// Defined in ./page-contents-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PAGE_CONTENTS_LABELS };\n\nexport interface UseScrollSpyOptions {\n  /** The element that scrolls. Defaults to the viewport. In `AppShell`, pass its\n   *  `<main>` — it is the page's scroll container from `md` up. */\n  root?: Element | null;\n  /**\n   * How far down the scroller the \"reading line\" sits, as a fraction of its height.\n   * A section becomes current once its heading passes above it, and stays current\n   * until the next heading does — so a long section keeps its entry marked while it\n   * is being read, not only while its heading is on screen. Default 0.15: close to\n   * the top, so a short section followed by another does not hand its mark to the\n   * next one the moment it is scrolled to.\n   */\n  line?: number;\n}\n\n/**\n * The id of the section being read: the last of `ids` whose element has scrolled\n * above the reading line — or the first, before any has.\n */\nexport function useScrollSpy(ids: readonly string[], options: UseScrollSpyOptions = {}): string | null {\n  const { root = null, line = 0.15 } = options;\n  const [current, setCurrent] = useState<string | null>(null);\n  const key = ids.join(\"\\u0000\");\n\n  useEffect(() => {\n    if (ids.length === 0) return;\n    const scroller: Element | Window = root ?? window;\n    const measure = () => {\n      const top = root ? root.getBoundingClientRect().top : 0;\n      const height = root ? root.clientHeight : window.innerHeight;\n      const reading = top + height * line;\n      let next = ids[0];\n      for (const id of ids) {\n        const el = document.getElementById(id);\n        if (el && el.getBoundingClientRect().top <= reading) next = id;\n      }\n      // At the very bottom the last sections may never reach the line; the reader\n      // who scrolled to the end is reading the end.\n      const atEnd = root\n        ? root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n        : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;\n      const scrolled = root ? root.scrollTop : window.scrollY;\n      if (atEnd && scrolled > 0) next = ids[ids.length - 1];\n      setCurrent(next);\n    };\n    let frame = 0;\n    const onScroll = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(measure);\n    };\n    measure();\n    scroller.addEventListener(\"scroll\", onScroll, { passive: true });\n    window.addEventListener(\"resize\", onScroll);\n    return () => {\n      cancelAnimationFrame(frame);\n      scroller.removeEventListener(\"scroll\", onScroll);\n      window.removeEventListener(\"resize\", onScroll);\n    };\n    // `key` stands for `ids`: a new array with the same entries is the same list.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key, root, line]);\n\n  return current;\n}\n\nexport interface PageContentsProps extends Omit<ComponentPropsWithRef<\"nav\">, \"children\"> {\n  items: PageContentsItem[];\n  /** The current entry — typically `useScrollSpy(items.map(i => i.id), …)`. */\n  activeId?: string | null;\n  /** The link for an entry. Default `#id`; under a hash router build it with the\n   *  router (react-router's `useHref({ hash: id })` gives `#/page#id`). */\n  hrefFor?: (id: string) => string;\n  /** `rail` — a list beside the page. `disclosure` — collapsed under a summary line,\n   *  for narrow screens where a rail has no room. */\n  variant?: \"rail\" | \"disclosure\";\n  labels?: LabelOverride<PageContentsLabels>;\n}\n\n/**\n * The list itself. The current entry gets a brand bar on the list's rule, the brand\n * colour, and `aria-current=\"location\"` — the marker documentation sites use, and the\n * one a screen reader announces.\n */\nexport function PageContents({\n  items,\n  activeId,\n  hrefFor = (id) => `#${id}`,\n  variant = \"rail\",\n  labels,\n  className,\n  ...rest\n}: PageContentsProps) {\n  const l = useKitLabels(\"pageContents\", DEFAULT_PAGE_CONTENTS_LABELS, labels);\n  const listRef = useRef<HTMLUListElement>(null);\n  // The entry just clicked is the current one until the reader scrolls on their own.\n  // Without this, jumping to a short section near the end of a page marks whichever\n  // later section the jump also carried past the reading line — you click one entry\n  // and another lights up.\n  const [clicked, setClicked] = useState<string | null>(null);\n  useEffect(() => {\n    if (!clicked) return;\n    const release = () => setClicked(null);\n    // A user scroll — wheel, touch, keys — releases it; the programmatic scroll the\n    // jump itself causes does not fire these.\n    window.addEventListener(\"wheel\", release, { passive: true, once: true });\n    window.addEventListener(\"touchmove\", release, { passive: true, once: true });\n    window.addEventListener(\"keydown\", release, { once: true });\n    return () => {\n      window.removeEventListener(\"wheel\", release);\n      window.removeEventListener(\"touchmove\", release);\n      window.removeEventListener(\"keydown\", release);\n    };\n  }, [clicked]);\n  const shown = clicked ?? activeId;\n\n  // Keep the current entry in view when the list is taller than the window.\n  useEffect(() => {\n    if (!shown || variant !== \"rail\") return;\n    listRef.current\n      ?.querySelector<HTMLElement>(`[data-entry=\"${CSS.escape(shown)}\"]`)\n      ?.scrollIntoView?.({ block: \"nearest\" });\n  }, [shown, variant]);\n\n  if (items.length === 0) return null;\n\n  const list = (\n    <ul\n      ref={listRef}\n      className={cn(\n        \"space-y-0.5 border-s border-subtle\",\n        variant === \"rail\" && \"max-h-[calc(100dvh-10rem)] overflow-y-auto [scrollbar-width:thin]\",\n      )}\n    >\n      {items.map((item) => {\n        const current = item.id === shown;\n        return (\n          <li key={item.id} data-entry={item.id}>\n            <a\n              href={hrefFor(item.id)}\n              // Entries WRAP in the rail rather than truncate: a cut-off heading needed a\n              // native `title` to be read at all, which a keyboard never sees and which\n              // broke keksdose's one-tooltip rule (dev#523).\n              aria-current={current ? \"location\" : undefined}\n              onClick={() => setClicked(item.id)}\n              className={cn(\n                \"-ms-px block border-s-2 py-1 pe-1 text-[0.8125rem] leading-snug transition-colors duration-150\",\n                variant === \"rail\" && \"[overflow-wrap:anywhere]\",\n                item.level === 2 ? \"ps-6\" : \"ps-3\",\n                current\n                  ? \"border-brand font-medium text-brand\"\n                  : \"border-transparent text-muted hover:border-strong hover:text-primary\",\n              )}\n            >\n              {item.label}\n            </a>\n          </li>\n        );\n      })}\n    </ul>\n  );\n\n  if (variant === \"disclosure\") {\n    return (\n      <details\n        className={cn(\n          \"group rounded-md border border-subtle bg-surface\",\n          className,\n        )}\n      >\n        <summary className=\"flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-secondary [&::-webkit-details-marker]:hidden\">\n          {l.title}\n          <ChevronDown\n            aria-hidden\n            className=\"size-4 transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none\"\n          />\n        </summary>\n        <nav {...rest} aria-label={l.title} className=\"border-t border-subtle px-2 py-2\">\n          {list}\n        </nav>\n      </details>\n    );\n  }\n\n  return (\n    <nav {...rest} aria-label={l.title} className={className}>\n      <p className=\"mb-2 text-caption font-semibold uppercase tracking-wide text-muted\">\n        {l.title}\n      </p>\n      {list}\n    </nav>\n  );\n}\n\nexport interface PageContentsLayoutProps extends ComponentPropsWithRef<\"div\"> {\n  /** What goes in the rail — typically a `<PageContents variant=\"rail\">`. */\n  contents: ReactNode;\n  /**\n   * Which side of the page the rail sits on: `start` is the left in a left-to-right\n   * language (next to the app's own sidebar, so both navigations are in one place),\n   * `end` the right (the documentation-site convention, clear of the sidebar). Logical,\n   * so both flip in a right-to-left UI.\n   */\n  position?: \"start\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * The page with a sticky contents rail beside it, from `xl` (1280px) up. Below that\n * the rail would squeeze the content, so it is not rendered there — pair it with a\n * `<PageContents variant=\"disclosure\" className=\"xl:hidden\">` in the page.\n *\n * The rail is `sticky top-6`, which sticks inside the nearest scroll container — the\n * viewport, or `AppShell`'s `<main>`.\n */\nexport function PageContentsLayout({\n  contents,\n  position = \"start\",\n  children,\n  className,\n  ...rest\n}: PageContentsLayoutProps) {\n  // In DOM order on its side, not moved there with `order`: Tab and a screen reader\n  // follow the source, and a rail painted on the left but read after the page would\n  // put the page's index at its end.\n  const rail = (\n    <aside className=\"hidden xl:block\">\n      <div className=\"sticky top-6\">{contents}</div>\n    </aside>\n  );\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"xl:grid xl:gap-10\",\n        // `fit-content(22rem)`: the rail is as wide as its longest entry, up to 22rem.\n        // A fixed 13rem broke \"Select — unlabelled, labelled, invalid, disabled\" over\n        // three lines beside a page with room to spare; an index you scan should read\n        // one entry per line.\n        position === \"start\"\n          ? \"xl:grid-cols-[fit-content(22rem)_minmax(0,1fr)]\"\n          : \"xl:grid-cols-[minmax(0,1fr)_fit-content(22rem)]\",\n        className,\n      )}\n    >\n      {position === \"start\" && rail}\n      <div className=\"min-w-0\">{children}</div>\n      {position === \"end\" && rail}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/page-header.d.ts

@@ -1,6 +1,4 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-
+import type { ComponentPropsWithRef, ReactNode } from "react";
 /**
  * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a
  * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).
@@ -14,20 +12,20 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
  * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is
  * not.
  */
-type PageHeaderSize = "sm" | "compact" | "md";
+export type PageHeaderSize = "sm" | "compact" | "md";
 /**
  * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both
  * layouts are one row: title block at the start, actions at the end.
  */
-type PageHeaderMobileLayout = "stacked" | "inline";
+export type PageHeaderMobileLayout = "stacked" | "inline";
 /**
  * Where the actions sit on the title block's height, in the one row the header is from
  * `sm` up (and on a phone too when {@link PageHeaderMobileLayout} is `inline`, the only
  * layout that has a row there). Unset keeps each layout's own: `start` for `stacked`,
  * `center` for `inline`.
  */
-type PageHeaderActionsAlign = "start" | "center" | "end";
-interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+export type PageHeaderActionsAlign = "start" | "center" | "end";
+export interface PageHeaderProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
     title: ReactNode;
     /** A sentence under the title. */
     description?: ReactNode;
@@ -102,6 +100,10 @@ interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
      * The full title stays in the DOM as the heading's text, so a screen reader and the
      * document outline read all of it. There is deliberately no native `title` tooltip:
      * the kit does not use them (not on touch, not on keyboard focus, not styled).
+     *
+     * At Normal only: from Large up the title wraps (`truncate-until-large`, text size
+     * §10.17; round 0.34 T1), as nothing is cut at Large — the actions then share the row
+     * with a taller title block.
      */
     truncateTitle?: boolean;
 }
@@ -116,6 +118,4 @@ interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title">
  * than fit a phone's width, instead of running off it. No outer margin: the page's
  * own rhythm (`space-y-*`, a grid gap) places it.
  */
-declare function PageHeader({ title, description, actions, breadcrumbs, eyebrow, as, size, mobileLayout, secondaryActions, actionsAlign, truncateTitle, className, ...rest }: PageHeaderProps): react.JSX.Element;
-
-export { PageHeader, type PageHeaderActionsAlign, type PageHeaderMobileLayout, type PageHeaderProps, type PageHeaderSize };
+export declare function PageHeader({ title, description, actions, breadcrumbs, eyebrow, as, size, mobileLayout, secondaryActions, actionsAlign, truncateTitle, className, ...rest }: PageHeaderProps): import("react").JSX.Element;

package/dist/components/page-header.js

@@ -73,14 +73,14 @@ function PageHeader({
               Heading,
               {
                 className: cn(
-                  truncateTitle ? "truncate" : "break-words",
-                  "text-[var(--text-primary)]",
+                  truncateTitle ? "truncate-until-large" : "break-words",
+                  "text-primary",
                   TITLE[size]
                 ),
                 children: title
               }
             ),
-            description != null && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--text-muted)]", children: description })
+            description != null && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted", children: description })
           ] }),
           actions != null && /* @__PURE__ */ jsx(
             "div",

package/dist/components/page-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_CLASS } from \"./text\";\n\n/**\n * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a\n * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).\n *\n * `compact` (0.13) is keksdose's page title (keksdose F4): `text-xl font-semibold` at\n * EVERY width — budgets, rules, accounts, transactions and budget pages all write\n * exactly that `<h1>` by hand. It is `md`'s phone size without `md`'s step up to\n * `text-2xl` on a wider screen, and without its `tracking-tight`, which keksdose's\n * titles never had. A word and not a letter for the reason `ProgressBar`'s `slim` is\n * one: the letters are taken in order, and there is none between `sm` and `md` — an\n * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is\n * not.\n */\nexport type PageHeaderSize = \"sm\" | \"compact\" | \"md\";\n\nconst TITLE: Record<PageHeaderSize, string> = {\n  sm: \"text-lg font-semibold\",\n  compact: \"text-xl font-semibold\",\n  md: \"text-xl font-semibold tracking-tight sm:text-2xl\",\n};\n\n/**\n * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both\n * layouts are one row: title block at the start, actions at the end.\n */\nexport type PageHeaderMobileLayout = \"stacked\" | \"inline\";\n\n/**\n * `stacked` at Large and Extra large on a phone (0.32.2, kastlan's 0.32.1 report;\n * docs/text-size-harmonization.md §4, as FormActions does): the actions take the full\n * width, one under the other. Side by side in 240 px of layout, two buttons each wrapped\n * their label onto three lines. `large:max-sm:`, the scaled phone width, so Normal and\n * every wider screen keep their row; `inline` is for actions known to fit, and stays.\n */\nconst STACK_ACTIONS_AT_LARGE =\n  \"large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full\";\n\nconst ROW: Record<PageHeaderMobileLayout, string> = {\n  stacked: \"flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\",\n  inline: \"flex-row items-center justify-between gap-2 sm:gap-4\",\n};\n\n/**\n * Where the actions sit on the title block's height, in the one row the header is from\n * `sm` up (and on a phone too when {@link PageHeaderMobileLayout} is `inline`, the only\n * layout that has a row there). Unset keeps each layout's own: `start` for `stacked`,\n * `center` for `inline`.\n */\nexport type PageHeaderActionsAlign = \"start\" | \"center\" | \"end\";\n\n/** Applied to the ROW, so the title block and the actions are aligned against each\n *  other on one cross axis. 0.14.0 put `self-*` on the actions box alone, which moved\n *  nothing when the actions were the taller item — they already filled the row, and\n *  the title stayed at the top (keksdose H2, reports-page's two-line labelled\n *  CurrencySelect). Per layout, because `stacked` is a column on a phone, where\n *  `items-center` would centre everything HORIZONTALLY — so it aligns from `sm` up. */\nconst ROW_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, string>> = {\n  stacked: { start: \"sm:items-start\", center: \"sm:items-center\", end: \"sm:items-end\" },\n  inline: { start: \"items-start\", center: \"items-center\", end: \"items-end\" },\n};\n\nexport interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  title: ReactNode;\n  /** A sentence under the title. */\n  description?: ReactNode;\n  /** Buttons for the page — \"New\", \"Export\". At the title's end from `sm` up; under it,\n   *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */\n  actions?: ReactNode;\n  /** A `Breadcrumbs` trail, drawn above everything else. */\n  breadcrumbs?: ReactNode;\n  /** A small uppercase line above the title — the section or the kind of record\n   *  (\"Building\", \"Settings\"). The section-label type. */\n  eyebrow?: ReactNode;\n  /** The title's element. Default `h1`: a page has one, and this is it. `h2` for a\n   *  header inside a page that already has its `h1` (a tab's own header). */\n  as?: \"h1\" | \"h2\" | \"h3\";\n  size?: PageHeaderSize;\n  /**\n   * `stacked` (default): on a phone the actions drop under the title and wrap, so a\n   * row of three buttons never pushes the title off the screen.\n   *\n   * `inline`: the actions stay beside the title on a phone too, vertically centred on\n   * it — keksdose's headers (transactions-page.tsx:515, `flex items-center\n   * justify-between gap-2`), which carry one or two icon-sized controls and were tuned\n   * for the phone in live #263. Adopting `PageHeader` must not undo that tuning, so the\n   * row stays a row (keksdose F4). The actions do NOT wrap or shrink here: `inline` is\n   * for a header whose actions are known to fit beside a phone-width title (an icon\n   * button, a month picker); a long title wraps to make room for them instead.\n   */\n  mobileLayout?: PageHeaderMobileLayout;\n  /**\n   * A second group of actions that gets its OWN full-width row under the header on a\n   * phone, and joins the actions' row from `sm` up, between the title and\n   * {@link actions}.\n   *\n   * keksdose's budget page (budget-page.tsx, feedback #60) is the case: title and month\n   * navigation on row 1, the fold/unfold toggles on row 2 on a phone — \"two tidy rows\n   * instead of the old ragged justify-between overflow\" — and one row, title | toggles |\n   * month nav, on a wider screen. It builds that by hand with a wrapping flex row and\n   * swapped order utilities; adopting `PageHeader` (keksdose G6b) must not lose it.\n   * There: `actions` is the month navigation, this is the toggles.\n   *\n   * The DOM order is title, `actions`, `secondaryActions` — the phone's visual order,\n   * and the one a screen reader and the Tab key follow at every width. From `sm` up the\n   * two groups swap places visually only, which keeps the page's primary control (the\n   * month) at the row's end, where keksdose had it, and first in reading order. The\n   * breakpoint is `sm`, the one {@link mobileLayout} switches at, not keksdose's `md`:\n   * one header, one breakpoint.\n   */\n  secondaryActions?: ReactNode;\n  /**\n   * The actions' vertical alignment against the title block — see\n   * {@link PageHeaderActionsAlign}. Unset keeps the layout's own.\n   *\n   * keksdose's reports page (reports-page.tsx, keksdose G8) carries a LABELLED\n   * `CurrencySelect` as its action: a field with its label on top is taller than the\n   * title, and `stacked`'s default top alignment hangs it from the title's cap height\n   * with its control well below the title's line. `center` sets it on the title's\n   * middle, as that page's hand-written `items-center` row did. It aligns the whole row\n   * (title block and actions against each other), since 0.14.1: 0.14.0 moved only the\n   * actions box, which did nothing when the actions were the taller item (keksdose H2).\n   */\n  actionsAlign?: PageHeaderActionsAlign;\n  /**\n   * One line, cut with an ellipsis, instead of the default breaking of a long word onto\n   * as many lines as it needs.\n   *\n   * keksdose's payees page (payees-page.tsx, live #263, keksdose G6a) wraps its title in\n   * its own truncating span so a long name gives way to the `inline` header's actions\n   * instead of pushing them. This is that span's behaviour on the heading itself; the\n   * title block is already allowed to shrink below its content, which is what lets the\n   * cut happen inside a flex row.\n   *\n   * The full title stays in the DOM as the heading's text, so a screen reader and the\n   * document outline read all of it. There is deliberately no native `title` tooltip:\n   * the kit does not use them (not on touch, not on keyboard focus, not styled).\n   */\n  truncateTitle?: boolean;\n}\n\n/**\n * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the\n * page's actions.\n *\n * kastlan's (shared/components/display/page-header.tsx) is the model — title and\n * description on one side, actions on the other, stacked on a phone — and this adds\n * what its pages kept writing around it: a trail above, an eyebrow, a `ReactNode`\n * title (a status chip beside the name), and actions that WRAP when there are more\n * than fit a phone's width, instead of running off it. No outer margin: the page's\n * own rhythm (`space-y-*`, a grid gap) places it.\n */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  breadcrumbs,\n  eyebrow,\n  as = \"h1\",\n  size = \"md\",\n  mobileLayout = \"stacked\",\n  secondaryActions,\n  actionsAlign,\n  truncateTitle = false,\n  className,\n  ...rest\n}: PageHeaderProps) {\n  const Heading = as as ElementType;\n  const hasSecondary = secondaryActions != null;\n  const wrapsSecondary = hasSecondary && mobileLayout === \"inline\";\n  const align = actionsAlign != null ? ROW_ALIGN[mobileLayout][actionsAlign] : undefined;\n  // keksdose H1: in `inline` the title block could shrink below its longest word, and\n  // `break-words` then split \"Monatsbudget\" into \"Monatsbudg\" / \"et\" beside the actions.\n  // Unless it truncates, the title keeps its longest word (min-content) and the ROW\n  // wraps instead: actions that do not fit go to a line of their own, as the app's old\n  // `flex-wrap` header did.\n  const keepsWords = mobileLayout === \"inline\" && !truncateTitle;\n  // keksdose, after H1: once the actions have wrapped below the title, the phone's\n  // header was THREE rows — title / actions / secondary — where the app's old header\n  // shared the second row between the month nav and the toggles (~48px of phone\n  // height). So the secondary group's full-width basis (G6b: a row of its own) is\n  // dropped exactly when the actions already sit below the title; then it joins their\n  // row if it fits, and wraps under them if not. While the actions share the title's\n  // row, nothing changes: the secondary group never climbs onto the title's row.\n  //\n  // CSS cannot see \"the previous item wrapped\", so it is measured — by a\n  // ResizeObserver, whose first callback runs on `observe`. It is stable: the\n  // secondary group comes after the actions, so its basis cannot move them. No\n  // ResizeObserver (jsdom) or no layout keeps the basis, the 0.14.0 layout.\n  const measuresWrap = keepsWords && hasSecondary && actions != null;\n  const titleRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWrapped, setActionsWrapped] = useState(false);\n  useLayoutEffect(() => {\n    const titleBox = titleRef.current;\n    const actionsBox = actionsRef.current;\n    if (!measuresWrap || !titleBox || !actionsBox || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const t = titleBox.getBoundingClientRect();\n      const a = actionsBox.getBoundingClientRect();\n      // Unmeasured (display: none, no layout): keep the full-width basis.\n      setActionsWrapped(t.height > 0 && a.height > 0 && a.top >= t.bottom - 1);\n    });\n    observer.observe(titleBox);\n    observer.observe(actionsBox);\n    if (titleBox.parentElement) observer.observe(titleBox.parentElement);\n    return () => observer.disconnect();\n  }, [measuresWrap]);\n  return (\n    <div {...rest} className={cn(\"flex min-w-0 flex-col gap-2\", className)}>\n      {breadcrumbs}\n      {/* With a second group, `inline` wraps so that group's full-width basis puts it\n          on a row of its own on a phone (`stacked` is a column there already, and a\n          basis would size a column item's HEIGHT); from `sm` up the row stops wrapping\n          and the order utilities seat it between the title and the actions. Without\n          one, nothing changes. */}\n      <div\n        className={cn(\n          \"flex min-w-0\",\n          ROW[mobileLayout],\n          keepsWords ? \"flex-wrap\" : wrapsSecondary && \"flex-wrap sm:flex-nowrap\",\n          align,\n        )}\n      >\n        <div ref={titleRef} className={cn(\"flex-1\", keepsWords ? \"min-w-min\" : \"min-w-0\")}>\n          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, \"mb-1\")}>{eyebrow}</p>}\n          <Heading\n            className={cn(\n              truncateTitle ? \"truncate\" : \"break-words\",\n              \"text-[var(--text-primary)]\",\n              TITLE[size],\n            )}\n          >\n            {title}\n          </Heading>\n          {description != null && <p className=\"mt-1 text-sm text-[var(--text-muted)]\">{description}</p>}\n        </div>\n        {actions != null && (\n          <div\n            ref={actionsRef}\n            className={cn(\n              \"flex shrink-0 flex-wrap items-center gap-2\",\n              hasSecondary && \"sm:order-2\",\n              mobileLayout === \"stacked\" && STACK_ACTIONS_AT_LARGE,\n            )}\n          >\n            {actions}\n          </div>\n        )}\n        {hasSecondary && (\n          <div\n            className={cn(\n              \"flex flex-wrap items-center gap-2 sm:order-1 sm:shrink-0\",\n              wrapsSecondary && (measuresWrap && actionsWrapped ? \"sm:basis-auto\" : \"basis-full sm:basis-auto\"),\n            )}\n          >\n            {secondaryActions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAoOQ,SACsB,KADtB;AApOR,SAAS,iBAAiB,QAAQ,gBAAgB;AAElD,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAiBpC,MAAM,QAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAeA,MAAM,yBACJ;AAEF,MAAM,MAA8C;AAAA,EAClD,SAAS;AAAA,EACT,QAAQ;AACV;AAgBA,MAAM,YAAoF;AAAA,EACxF,SAAS,EAAE,OAAO,kBAAkB,QAAQ,mBAAmB,KAAK,eAAe;AAAA,EACnF,QAAQ,EAAE,OAAO,eAAe,QAAQ,gBAAgB,KAAK,YAAY;AAC3E;AA4FO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU;AAChB,QAAM,eAAe,oBAAoB;AACzC,QAAM,iBAAiB,gBAAgB,iBAAiB;AACxD,QAAM,QAAQ,gBAAgB,OAAO,UAAU,YAAY,EAAE,YAAY,IAAI;AAM7E,QAAM,aAAa,iBAAiB,YAAY,CAAC;AAajD,QAAM,eAAe,cAAc,gBAAgB,WAAW;AAC9D,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,kBAAgB,MAAM;AACpB,UAAM,WAAW,SAAS;AAC1B,UAAM,aAAa,WAAW;AAC9B,QAAI,CAAC,gBAAgB,CAAC,YAAY,CAAC,cAAc,OAAO,mBAAmB,YAAa;AACxF,UAAM,WAAW,IAAI,eAAe,MAAM;AACxC,YAAM,IAAI,SAAS,sBAAsB;AACzC,YAAM,IAAI,WAAW,sBAAsB;AAE3C,wBAAkB,EAAE,SAAS,KAAK,EAAE,SAAS,KAAK,EAAE,OAAO,EAAE,SAAS,CAAC;AAAA,IACzE,CAAC;AACD,aAAS,QAAQ,QAAQ;AACzB,aAAS,QAAQ,UAAU;AAC3B,QAAI,SAAS,cAAe,UAAS,QAAQ,SAAS,aAAa;AACnE,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,YAAY,CAAC;AACjB,SACE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,+BAA+B,SAAS,GAClE;AAAA;AAAA,IAMD;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,IAAI,YAAY;AAAA,UAChB,aAAa,cAAc,kBAAkB;AAAA,UAC7C;AAAA,QACF;AAAA,QAEA;AAAA,+BAAC,SAAI,KAAK,UAAU,WAAW,GAAG,UAAU,aAAa,cAAc,SAAS,GAC7E;AAAA,uBAAW,QAAQ,oBAAC,OAAE,WAAW,GAAG,oBAAoB,IAAI,MAAM,GAAI,mBAAQ;AAAA,YAC/E;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT,gBAAgB,aAAa;AAAA,kBAC7B;AAAA,kBACA,MAAM,IAAI;AAAA,gBACZ;AAAA,gBAEC;AAAA;AAAA,YACH;AAAA,YACC,eAAe,QAAQ,oBAAC,OAAE,WAAU,yCAAyC,uBAAY;AAAA,aAC5F;AAAA,UACC,WAAW,QACV;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,WAAW;AAAA,gBACT;AAAA,gBACA,gBAAgB;AAAA,gBAChB,iBAAiB,aAAa;AAAA,cAChC;AAAA,cAEC;AAAA;AAAA,UACH;AAAA,UAED,gBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,mBAAmB,gBAAgB,iBAAiB,kBAAkB;AAAA,cACxE;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_CLASS } from \"./text\";\n\n/**\n * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a\n * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).\n *\n * `compact` (0.13) is keksdose's page title (keksdose F4): `text-xl font-semibold` at\n * EVERY width — budgets, rules, accounts, transactions and budget pages all write\n * exactly that `<h1>` by hand. It is `md`'s phone size without `md`'s step up to\n * `text-2xl` on a wider screen, and without its `tracking-tight`, which keksdose's\n * titles never had. A word and not a letter for the reason `ProgressBar`'s `slim` is\n * one: the letters are taken in order, and there is none between `sm` and `md` — an\n * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is\n * not.\n */\nexport type PageHeaderSize = \"sm\" | \"compact\" | \"md\";\n\nconst TITLE: Record<PageHeaderSize, string> = {\n  sm: \"text-lg font-semibold\",\n  compact: \"text-xl font-semibold\",\n  md: \"text-xl font-semibold tracking-tight sm:text-2xl\",\n};\n\n/**\n * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both\n * layouts are one row: title block at the start, actions at the end.\n */\nexport type PageHeaderMobileLayout = \"stacked\" | \"inline\";\n\n/**\n * `stacked` at Large and Extra large on a phone (0.32.2, kastlan's 0.32.1 report;\n * docs/text-size-harmonization.md §4, as FormActions does): the actions take the full\n * width, one under the other. Side by side in 240 px of layout, two buttons each wrapped\n * their label onto three lines. `large:max-sm:`, the scaled phone width, so Normal and\n * every wider screen keep their row; `inline` is for actions known to fit, and stays.\n */\nconst STACK_ACTIONS_AT_LARGE =\n  \"large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full\";\n\nconst ROW: Record<PageHeaderMobileLayout, string> = {\n  stacked: \"flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\",\n  inline: \"flex-row items-center justify-between gap-2 sm:gap-4\",\n};\n\n/**\n * Where the actions sit on the title block's height, in the one row the header is from\n * `sm` up (and on a phone too when {@link PageHeaderMobileLayout} is `inline`, the only\n * layout that has a row there). Unset keeps each layout's own: `start` for `stacked`,\n * `center` for `inline`.\n */\nexport type PageHeaderActionsAlign = \"start\" | \"center\" | \"end\";\n\n/** Applied to the ROW, so the title block and the actions are aligned against each\n *  other on one cross axis. 0.14.0 put `self-*` on the actions box alone, which moved\n *  nothing when the actions were the taller item — they already filled the row, and\n *  the title stayed at the top (keksdose H2, reports-page's two-line labelled\n *  CurrencySelect). Per layout, because `stacked` is a column on a phone, where\n *  `items-center` would centre everything HORIZONTALLY — so it aligns from `sm` up. */\nconst ROW_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, string>> = {\n  stacked: { start: \"sm:items-start\", center: \"sm:items-center\", end: \"sm:items-end\" },\n  inline: { start: \"items-start\", center: \"items-center\", end: \"items-end\" },\n};\n\nexport interface PageHeaderProps extends Omit<ComponentPropsWithRef<\"div\">, \"title\"> {\n  title: ReactNode;\n  /** A sentence under the title. */\n  description?: ReactNode;\n  /** Buttons for the page — \"New\", \"Export\". At the title's end from `sm` up; under it,\n   *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */\n  actions?: ReactNode;\n  /** A `Breadcrumbs` trail, drawn above everything else. */\n  breadcrumbs?: ReactNode;\n  /** A small uppercase line above the title — the section or the kind of record\n   *  (\"Building\", \"Settings\"). The section-label type. */\n  eyebrow?: ReactNode;\n  /** The title's element. Default `h1`: a page has one, and this is it. `h2` for a\n   *  header inside a page that already has its `h1` (a tab's own header). */\n  as?: \"h1\" | \"h2\" | \"h3\";\n  size?: PageHeaderSize;\n  /**\n   * `stacked` (default): on a phone the actions drop under the title and wrap, so a\n   * row of three buttons never pushes the title off the screen.\n   *\n   * `inline`: the actions stay beside the title on a phone too, vertically centred on\n   * it — keksdose's headers (transactions-page.tsx:515, `flex items-center\n   * justify-between gap-2`), which carry one or two icon-sized controls and were tuned\n   * for the phone in live #263. Adopting `PageHeader` must not undo that tuning, so the\n   * row stays a row (keksdose F4). The actions do NOT wrap or shrink here: `inline` is\n   * for a header whose actions are known to fit beside a phone-width title (an icon\n   * button, a month picker); a long title wraps to make room for them instead.\n   */\n  mobileLayout?: PageHeaderMobileLayout;\n  /**\n   * A second group of actions that gets its OWN full-width row under the header on a\n   * phone, and joins the actions' row from `sm` up, between the title and\n   * {@link actions}.\n   *\n   * keksdose's budget page (budget-page.tsx, feedback #60) is the case: title and month\n   * navigation on row 1, the fold/unfold toggles on row 2 on a phone — \"two tidy rows\n   * instead of the old ragged justify-between overflow\" — and one row, title | toggles |\n   * month nav, on a wider screen. It builds that by hand with a wrapping flex row and\n   * swapped order utilities; adopting `PageHeader` (keksdose G6b) must not lose it.\n   * There: `actions` is the month navigation, this is the toggles.\n   *\n   * The DOM order is title, `actions`, `secondaryActions` — the phone's visual order,\n   * and the one a screen reader and the Tab key follow at every width. From `sm` up the\n   * two groups swap places visually only, which keeps the page's primary control (the\n   * month) at the row's end, where keksdose had it, and first in reading order. The\n   * breakpoint is `sm`, the one {@link mobileLayout} switches at, not keksdose's `md`:\n   * one header, one breakpoint.\n   */\n  secondaryActions?: ReactNode;\n  /**\n   * The actions' vertical alignment against the title block — see\n   * {@link PageHeaderActionsAlign}. Unset keeps the layout's own.\n   *\n   * keksdose's reports page (reports-page.tsx, keksdose G8) carries a LABELLED\n   * `CurrencySelect` as its action: a field with its label on top is taller than the\n   * title, and `stacked`'s default top alignment hangs it from the title's cap height\n   * with its control well below the title's line. `center` sets it on the title's\n   * middle, as that page's hand-written `items-center` row did. It aligns the whole row\n   * (title block and actions against each other), since 0.14.1: 0.14.0 moved only the\n   * actions box, which did nothing when the actions were the taller item (keksdose H2).\n   */\n  actionsAlign?: PageHeaderActionsAlign;\n  /**\n   * One line, cut with an ellipsis, instead of the default breaking of a long word onto\n   * as many lines as it needs.\n   *\n   * keksdose's payees page (payees-page.tsx, live #263, keksdose G6a) wraps its title in\n   * its own truncating span so a long name gives way to the `inline` header's actions\n   * instead of pushing them. This is that span's behaviour on the heading itself; the\n   * title block is already allowed to shrink below its content, which is what lets the\n   * cut happen inside a flex row.\n   *\n   * The full title stays in the DOM as the heading's text, so a screen reader and the\n   * document outline read all of it. There is deliberately no native `title` tooltip:\n   * the kit does not use them (not on touch, not on keyboard focus, not styled).\n   *\n   * At Normal only: from Large up the title wraps (`truncate-until-large`, text size\n   * §10.17; round 0.34 T1), as nothing is cut at Large — the actions then share the row\n   * with a taller title block.\n   */\n  truncateTitle?: boolean;\n}\n\n/**\n * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the\n * page's actions.\n *\n * kastlan's (shared/components/display/page-header.tsx) is the model — title and\n * description on one side, actions on the other, stacked on a phone — and this adds\n * what its pages kept writing around it: a trail above, an eyebrow, a `ReactNode`\n * title (a status chip beside the name), and actions that WRAP when there are more\n * than fit a phone's width, instead of running off it. No outer margin: the page's\n * own rhythm (`space-y-*`, a grid gap) places it.\n */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  breadcrumbs,\n  eyebrow,\n  as = \"h1\",\n  size = \"md\",\n  mobileLayout = \"stacked\",\n  secondaryActions,\n  actionsAlign,\n  truncateTitle = false,\n  className,\n  ...rest\n}: PageHeaderProps) {\n  const Heading = as as ElementType;\n  const hasSecondary = secondaryActions != null;\n  const wrapsSecondary = hasSecondary && mobileLayout === \"inline\";\n  const align = actionsAlign != null ? ROW_ALIGN[mobileLayout][actionsAlign] : undefined;\n  // keksdose H1: in `inline` the title block could shrink below its longest word, and\n  // `break-words` then split \"Monatsbudget\" into \"Monatsbudg\" / \"et\" beside the actions.\n  // Unless it truncates, the title keeps its longest word (min-content) and the ROW\n  // wraps instead: actions that do not fit go to a line of their own, as the app's old\n  // `flex-wrap` header did.\n  const keepsWords = mobileLayout === \"inline\" && !truncateTitle;\n  // keksdose, after H1: once the actions have wrapped below the title, the phone's\n  // header was THREE rows — title / actions / secondary — where the app's old header\n  // shared the second row between the month nav and the toggles (~48px of phone\n  // height). So the secondary group's full-width basis (G6b: a row of its own) is\n  // dropped exactly when the actions already sit below the title; then it joins their\n  // row if it fits, and wraps under them if not. While the actions share the title's\n  // row, nothing changes: the secondary group never climbs onto the title's row.\n  //\n  // CSS cannot see \"the previous item wrapped\", so it is measured — by a\n  // ResizeObserver, whose first callback runs on `observe`. It is stable: the\n  // secondary group comes after the actions, so its basis cannot move them. No\n  // ResizeObserver (jsdom) or no layout keeps the basis, the 0.14.0 layout.\n  const measuresWrap = keepsWords && hasSecondary && actions != null;\n  const titleRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWrapped, setActionsWrapped] = useState(false);\n  useLayoutEffect(() => {\n    const titleBox = titleRef.current;\n    const actionsBox = actionsRef.current;\n    if (!measuresWrap || !titleBox || !actionsBox || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const t = titleBox.getBoundingClientRect();\n      const a = actionsBox.getBoundingClientRect();\n      // Unmeasured (display: none, no layout): keep the full-width basis.\n      setActionsWrapped(t.height > 0 && a.height > 0 && a.top >= t.bottom - 1);\n    });\n    observer.observe(titleBox);\n    observer.observe(actionsBox);\n    if (titleBox.parentElement) observer.observe(titleBox.parentElement);\n    return () => observer.disconnect();\n  }, [measuresWrap]);\n  return (\n    <div {...rest} className={cn(\"flex min-w-0 flex-col gap-2\", className)}>\n      {breadcrumbs}\n      {/* With a second group, `inline` wraps so that group's full-width basis puts it\n          on a row of its own on a phone (`stacked` is a column there already, and a\n          basis would size a column item's HEIGHT); from `sm` up the row stops wrapping\n          and the order utilities seat it between the title and the actions. Without\n          one, nothing changes. */}\n      <div\n        className={cn(\n          \"flex min-w-0\",\n          ROW[mobileLayout],\n          keepsWords ? \"flex-wrap\" : wrapsSecondary && \"flex-wrap sm:flex-nowrap\",\n          align,\n        )}\n      >\n        <div ref={titleRef} className={cn(\"flex-1\", keepsWords ? \"min-w-min\" : \"min-w-0\")}>\n          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, \"mb-1\")}>{eyebrow}</p>}\n          <Heading\n            className={cn(\n              truncateTitle ? \"truncate-until-large\" : \"break-words\",\n              \"text-primary\",\n              TITLE[size],\n            )}\n          >\n            {title}\n          </Heading>\n          {description != null && <p className=\"mt-1 text-sm text-muted\">{description}</p>}\n        </div>\n        {actions != null && (\n          <div\n            ref={actionsRef}\n            className={cn(\n              \"flex shrink-0 flex-wrap items-center gap-2\",\n              hasSecondary && \"sm:order-2\",\n              mobileLayout === \"stacked\" && STACK_ACTIONS_AT_LARGE,\n            )}\n          >\n            {actions}\n          </div>\n        )}\n        {hasSecondary && (\n          <div\n            className={cn(\n              \"flex flex-wrap items-center gap-2 sm:order-1 sm:shrink-0\",\n              wrapsSecondary && (measuresWrap && actionsWrapped ? \"sm:basis-auto\" : \"basis-full sm:basis-auto\"),\n            )}\n          >\n            {secondaryActions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/password-strength-labels.d.ts

@@ -0,0 +1,2 @@
+import type { PasswordStrengthLabels } from "./password-strength.js";
+export declare const DEFAULT_PASSWORD_STRENGTH_LABELS: PasswordStrengthLabels;

package/dist/components/password-strength-labels.js

@@ -0,0 +1,21 @@
+"use client";
+const DEFAULT_PASSWORD_STRENGTH_LABELS = {
+  tooShort: "Too short",
+  weak: "Weak",
+  fair: "Fair",
+  good: "Good",
+  strong: "Strong",
+  announcement: (level) => `Password strength: ${level}`,
+  ruleLength: (minLength) => `At least ${minLength} characters`,
+  ruleCase: "Upper and lower case",
+  ruleDigit: "A number",
+  ruleSymbol: "A symbol",
+  optional: (rule) => `${rule} (optional)`,
+  met: "Met:",
+  notMet: "Not met:",
+  tooLong: (maxBytes) => `At most ${maxBytes} characters (accents and emoji count for more than one).`
+};
+export {
+  DEFAULT_PASSWORD_STRENGTH_LABELS
+};
+//# sourceMappingURL=password-strength-labels.js.map

package/dist/components/password-strength-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/password-strength-labels.ts"],"sourcesContent":["// The English words of ./password-strength, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./password-strength re-exports them.\n\nimport type { PasswordStrengthLabels } from \"./password-strength\";\n\nexport const DEFAULT_PASSWORD_STRENGTH_LABELS: PasswordStrengthLabels = {\n  tooShort: \"Too short\",\n  weak: \"Weak\",\n  fair: \"Fair\",\n  good: \"Good\",\n  strong: \"Strong\",\n  announcement: (level) => `Password strength: ${level}`,\n  ruleLength: (minLength) => `At least ${minLength} characters`,\n  ruleCase: \"Upper and lower case\",\n  ruleDigit: \"A number\",\n  ruleSymbol: \"A symbol\",\n  optional: (rule) => `${rule} (optional)`,\n  met: \"Met:\",\n  notMet: \"Not met:\",\n  tooLong: (maxBytes) =>\n    `At most ${maxBytes} characters (accents and emoji count for more than one).`,\n};\n"],"mappings":";AAMO,MAAM,mCAA2D;AAAA,EACtE,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc,CAAC,UAAU,sBAAsB,KAAK;AAAA,EACpD,YAAY,CAAC,cAAc,YAAY,SAAS;AAAA,EAChD,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU,CAAC,SAAS,GAAG,IAAI;AAAA,EAC3B,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS,CAAC,aACR,WAAW,QAAQ;AACvB;","names":[]}

package/dist/components/password-strength.d.ts

@@ -1,6 +1,6 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef } from 'react';
-
+import type { ComponentPropsWithRef } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { DEFAULT_PASSWORD_STRENGTH_LABELS } from "./password-strength-labels.js";
 /**
  * The bar, the word and the advisory checklist under a field where someone is
  * CHOOSING a secret.
@@ -28,21 +28,21 @@ import { ComponentPropsWithoutRef } from 'react';
  * ships it; a host that does can pass its scorer as `score` and keep the rest.
  */
 /** 0 = too short (or empty), 4 = strong. */
-type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;
-type PasswordRuleId = "length" | "case" | "digit" | "symbol";
-interface PasswordRule {
+export type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;
+export type PasswordRuleId = "length" | "case" | "digit" | "symbol";
+export interface PasswordRule {
     id: PasswordRuleId;
     met: boolean;
     /** Only `length` is required; the rest are suggestions. */
     required: boolean;
 }
-interface PasswordScoreOptions {
+export interface PasswordScoreOptions {
     /** The length below which a secret is "too short", whatever else it has. Keep it
      *  in step with the server's own minimum. Default 8. */
     minLength?: number;
 }
 /** The checklist's rules, evaluated. Pure; the order is the order they are shown in. */
-declare function passwordRules(value: string, { minLength }?: PasswordScoreOptions): PasswordRule[];
+export declare function passwordRules(value: string, { minLength }?: PasswordScoreOptions): PasswordRule[];
 /**
  * A 0–4 strength bucket. Length dominates, because it genuinely dominates real-world
  * guessing cost: one step each at `minLength`, `minLength + 4` and `minLength + 8`,
@@ -51,11 +51,11 @@ declare function passwordRules(value: string, { minLength }?: PasswordScoreOptio
  * One addition over Keksdose's curve: a secret with fewer than four DISTINCT
  * characters caps at 1. Sixteen `a`s are long, and nothing about them is strong.
  */
-declare function scorePassword(value: string, options?: PasswordScoreOptions): PasswordStrengthScore;
+export declare function scorePassword(value: string, options?: PasswordScoreOptions): PasswordStrengthScore;
 /** UTF-8 byte length — what a bcrypt-style ceiling counts. "ü" is two, an emoji four. */
-declare function passwordByteLength(value: string): number;
+export declare function passwordByteLength(value: string): number;
 /** Every string the meter renders or speaks. */
-interface PasswordStrengthLabels {
+export interface PasswordStrengthLabels {
     /** The five level names, shown beside the bar. Score 0 … 4. */
     tooShort: string;
     weak: string;
@@ -77,8 +77,8 @@ interface PasswordStrengthLabels {
     /** Shown when the value is over `maxBytes`, given that ceiling. */
     tooLong: (maxBytes: number) => string;
 }
-declare const DEFAULT_PASSWORD_STRENGTH_LABELS: PasswordStrengthLabels;
-interface PasswordStrengthMeterProps extends ComponentPropsWithoutRef<"div"> {
+export { DEFAULT_PASSWORD_STRENGTH_LABELS };
+export interface PasswordStrengthMeterProps extends ComponentPropsWithRef<"div"> {
     /** The secret being chosen. Nothing visible renders while it is empty. */
     value: string;
     /** Replace the built-in scorer (e.g. with zxcvbn's `score`). Must be pure. */
@@ -95,12 +95,10 @@ interface PasswordStrengthMeterProps extends ComponentPropsWithoutRef<"div"> {
      */
     maxBytes?: number;
     /** User-facing strings; see {@link PasswordStrengthLabels}. */
-    labels?: Partial<PasswordStrengthLabels>;
+    labels?: LabelOverride<PasswordStrengthLabels>;
 }
 /**
  * Render directly under the password field. To have the field itself describe its
  * strength, give this an `id` and point the input's `aria-describedby` at it.
  */
-declare function PasswordStrengthMeter({ value, score: scoreProp, minLength, showRequirements, maxBytes, labels: labelsProp, className, ...rest }: PasswordStrengthMeterProps): react.JSX.Element;
-
-export { DEFAULT_PASSWORD_STRENGTH_LABELS, type PasswordRule, type PasswordRuleId, type PasswordScoreOptions, type PasswordStrengthLabels, PasswordStrengthMeter, type PasswordStrengthMeterProps, type PasswordStrengthScore, passwordByteLength, passwordRules, scorePassword };
+export declare function PasswordStrengthMeter({ value, score: scoreProp, minLength, showRequirements, maxBytes, labels: labelsProp, className, ...rest }: PasswordStrengthMeterProps): import("react").JSX.Element;