@eifi1/ui-kit 0.4.0 → 0.5.0

package/dist/components/number-input.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef, useState } from "react";
 import { CalculatorButton } from "./calculator.js";
@@ -98,12 +99,21 @@ function NumberInput({
             "span",
             {
               "aria-hidden": true,
-              className: "pointer-events-none pr-3 text-xs font-medium text-slate-500 dark:text-slate-400",
+              className: "pointer-events-none pr-3 text-xs font-medium text-[var(--text-muted)]",
               children: suffix
             }
           )
         ] }),
-        showNumpad && /* @__PURE__ */ jsx(NumberPadSheet, { value, onChange, onDone: () => inputRef.current?.blur(), label })
+        showNumpad && /* @__PURE__ */ jsx(
+          NumberPadSheet,
+          {
+            value,
+            onChange,
+            onDone: () => inputRef.current?.blur(),
+            label,
+            labels: labels?.pad
+          }
+        )
       ]
     }
   );

package/dist/components/number-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet } from \"./numpad-sheet\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, sanitizeLive } from \"../lib/calc\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\n\ninterface NumberInputProps {\n  value: string;\n  /** Fired on every keystroke with the raw text (comma → dot, operators kept so\n   * a typed expression survives). */\n  onChange: (value: string) => void;\n  /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur\n   * fields so the save always sees the resolved number, never \"10+5\". */\n  onCommit?: (value: string) => void;\n  label?: ReactNode;\n  ariaLabel?: string;\n  /** Names for the calculator this field renders — its trigger, and the controls\n   *  inside the popover. English defaults, so a host that does not translate is\n   *  unaffected. */\n  labels?: { calculatorTrigger?: string; calculator?: CalculatorButtonLabels };\n  placeholder?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  /** Wrapper class. */\n  className?: string;\n  /** Overrides the input's own styling (merged after the field base). */\n  inputClassName?: string;\n  id?: string;\n  /** Show the calculator-popover trigger (default true). Set false for fields in\n   * an ephemeral close-on-blur editor, where clicking the icon would blur away\n   * and tear the editor down before the popover could open — inline typing\n   * (e.g. \"200+50\" → Enter) still evaluates there. */\n  calculator?: boolean;\n  /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field\n   *  chrome dropped. The currency-free half of the same treatment `AmountInput`\n   *  carries, for a dialog whose whole point is the one number (a budget goal's\n   *  target); not for a field among many, and never for the compact inline\n   *  editors this control also serves. */\n  variant?: \"field\" | \"display\";\n  /** A {@link FieldHint} \"?\" on the label's own line, beside the label rather\n   *  than at the far end of the strip — the far end is where the calculator\n   *  lives, and a hint placed there landed on top of it (steering-design\n   *  feedback #48). */\n  hint?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * A static unit shown at the field's right edge — \"%\", \"kg\", \"km/h\".\n   *\n   * The read-out half of {@link AmountInput}'s currency chip, and it exists for the\n   * same reason that one does: a unit belongs to the FIELD, not to the text, so\n   * typing it is a way to get it into the value. Keksdose had a percentage spelled\n   * three different ways across three screens — `<Input type=\"number\" step=\"0.01\">`\n   * for a loan rate, `step=\"0.1\"` for a tax rate, `inputMode=\"decimal\"` for a VAT\n   * rate — and none of the three showed a \"%\" anywhere near the box, so what the\n   * digits meant was a question the label alone had to answer.\n   *\n   * `aria-hidden`, like the currency read-out: it is a property of the field that\n   * the label already names (\"Interest rate (%)\"), and announcing it again after\n   * every value reads as part of the number.\n   */\n  suffix?: ReactNode;\n}\n\n/**\n * A numeric text field with a built-in calculator: type a calculation straight\n * in (e.g. \"12+5\", evaluated on blur/Enter) or click the trailing calculator\n * icon for a keypad. String `value`/`onChange` contract, mirroring\n * {@link AmountInput} — the currency-free counterpart for budgets, goals,\n * invoice totals and split lines.\n */\nexport function NumberInput({\n  value,\n  onChange,\n  onCommit,\n  label,\n  ariaLabel,\n  labels,\n  placeholder,\n  disabled,\n  autoFocus,\n  className,\n  inputClassName,\n  id,\n  calculator = true,\n  variant = \"field\",\n  hint,\n  invalid,\n  suffix,\n}: NumberInputProps) {\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  const labelled = label !== undefined;\n  // On phones we suppress the OS keyboard (inputMode=\"none\" below) for our own\n  // calculator numpad, so the desktop popover trigger is hidden (feedback #334).\n  const isMobile = useMediaQuery(PHONE_QUERY, false);\n  const asDisplay = isMobile && variant === \"display\";\n  const showCalc = calculator && !disabled && !isMobile;\n  const [focused, setFocused] = useState(false);\n  // On mobile, focusing opens the numpad bottom sheet instead of the native\n  // keyboard (#334); the ref lets its \"Done\" blur → commit + close.\n  const showNumpad = isMobile && !disabled && focused;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const commit = () => {\n    const next = commitExpression(value);\n    if (next !== value) onChange(next);\n    onCommit?.(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") commit();\n  };\n\n  return (\n    <FloatingField\n      className={cn(\"w-full\", className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={hint}\n    >\n      <input\n        ref={inputRef}\n        id={fieldId}\n        aria-label={ariaLabel}\n        type=\"text\"\n        // Mobile: suppress the OS keyboard so the numpad sheet owns entry (field\n        // keeps focus/caret); desktop keeps the native decimal keypad.\n        inputMode={isMobile ? \"none\" : \"decimal\"}\n        autoComplete=\"off\"\n        autoFocus={autoFocus}\n        disabled={disabled}\n        // Display mode has no floating label to feed the blank-placeholder trick,\n        // and an empty borderless figure shows nothing — so it keeps whatever\n        // placeholder the caller gave, falling back to a zero to aim at.\n        placeholder={asDisplay ? (placeholder ?? \"0\") : labelled ? \" \" : placeholder}\n        value={value}\n        onChange={(e) => onChange(sanitizeLive(e.target.value))}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        // The right-padding sits last so it always wins over an inputClassName that\n        // sets its own px. Both trailing controls can be on at once, so the room\n        // they need is reserved together rather than by whichever happens to render:\n        // the calculator is ~36px and a short unit ~24px, and a field that reserved\n        // only one of them would let the digits run under the other.\n        className={cn(\n          asDisplay\n            ? cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\")\n            : labelled\n              ? FLOATING_INPUT_CLASS\n              : FIELD_BASE,\n          inputClassName,\n          showCalc && suffix !== undefined ? \"pr-16\" : showCalc ? \"pr-9\" : suffix !== undefined ? \"pr-8\" : undefined,\n          invalid && FIELD_INVALID,\n        )}\n      />\n      {(showCalc || suffix !== undefined) && (\n        // One flex track for both, so the unit and the calculator sit side by side\n        // instead of stacking on the same corner — AmountInput's arrangement, which\n        // has carried a chip and a calculator together since #430.\n        <div className=\"absolute inset-y-0 right-0 flex items-center\">\n          {showCalc && (\n            <CalculatorButton\n              value={value}\n              onChange={onChange}\n              className=\"self-stretch px-2.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {suffix !== undefined && (\n            <span\n              aria-hidden\n              className=\"pointer-events-none pr-3 text-xs font-medium text-slate-500 dark:text-slate-400\"\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n      {showNumpad && (\n        <NumberPadSheet value={value} onChange={onChange} onDone={() => inputRef.current?.blur()} label={label} />\n      )}\n    </FloatingField>\n  );\n}\n"],"mappings":"AA6HM,cA4CE,YA5CF;AA7HN,SAAS,OAAO,QAAQ,gBAAgB;AAExC,SAAS,wBAAqD;AAC9D,SAAS,sBAAsB;AAC/B,SAAS,YAAY,eAAe,eAAe,sBAAsB,eAAe,mBAAmB;AAC3G,SAAS,UAAU;AACnB,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,qBAAqB;AAmEvB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,UAAU;AAG3B,QAAM,WAAW,cAAc,aAAa,KAAK;AACjD,QAAM,YAAY,YAAY,YAAY;AAC1C,QAAM,WAAW,cAAc,CAAC,YAAY,CAAC;AAC7C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAG5C,QAAM,aAAa,YAAY,CAAC,YAAY;AAC5C,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,iBAAiB,KAAK;AACnC,QAAI,SAAS,MAAO,UAAS,IAAI;AACjC,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,YAAY,CAAC,MAAuC;AACxD,QAAI,EAAE,QAAQ,QAAS,QAAO;AAAA,EAChC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,SAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,cAAY;AAAA,YACZ,MAAK;AAAA,YAGL,WAAW,WAAW,SAAS;AAAA,YAC/B,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAIA,aAAa,YAAa,eAAe,MAAO,WAAW,MAAM;AAAA,YACjE;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAAA,YACtD,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,QAAQ,MAAM;AACZ,qBAAO;AACP,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAc,WAAW;AAAA,YAMzB,WAAW;AAAA,cACT,YACI,GAAG,eAAe,kEAAkE,IACpF,WACE,uBACA;AAAA,cACN;AAAA,cACA,YAAY,WAAW,SAAY,UAAU,WAAW,SAAS,WAAW,SAAY,SAAS;AAAA,cACjG,WAAW;AAAA,YACb;AAAA;AAAA,QACF;AAAA,SACE,YAAY,WAAW;AAAA;AAAA;AAAA,QAIvB,qBAAC,SAAI,WAAU,gDACZ;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,WAAU;AAAA,cACV,WAAW,QAAQ;AAAA,cACnB,QAAQ,QAAQ;AAAA;AAAA,UAClB;AAAA,UAED,WAAW,UACV;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAED,cACC,oBAAC,kBAAe,OAAc,UAAoB,QAAQ,MAAM,SAAS,SAAS,KAAK,GAAG,OAAc;AAAA;AAAA;AAAA,EAE5G;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/number-input.tsx"],"sourcesContent":["import { useId, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FloatingField, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { commitExpression, sanitizeLive } from \"../lib/calc\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\n\ninterface NumberInputProps {\n  value: string;\n  /** Fired on every keystroke with the raw text (comma → dot, operators kept so\n   * a typed expression survives). */\n  onChange: (value: string) => void;\n  /** Fired on blur/Enter with the *evaluated* value — use this for save-on-blur\n   * fields so the save always sees the resolved number, never \"10+5\". */\n  onCommit?: (value: string) => void;\n  label?: ReactNode;\n  ariaLabel?: string;\n  /** Names for the calculator this field renders — its trigger, and the controls\n   *  inside the popover — and for the numpad sheet it opens on a phone. Overrides\n   *  for THIS field only: both resolve the `calculator` namespace of\n   *  `<UiKitProvider labels>` themselves, then fall back to English.\n   *\n   *  `pad` is not optional plumbing: this field renders a {@link NumberPadSheet}\n   *  exactly as {@link AmountInput} does, but had no way to pass it anything, so\n   *  the SAME keypad announced itself in German when a money field opened it and in\n   *  English when a goal target did. */\n  labels?: {\n    calculatorTrigger?: string;\n    calculator?: CalculatorButtonLabels;\n    pad?: NumberPadSheetLabels;\n  };\n  placeholder?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  /** Wrapper class. */\n  className?: string;\n  /** Overrides the input's own styling (merged after the field base). */\n  inputClassName?: string;\n  id?: string;\n  /** Show the calculator-popover trigger (default true). Set false for fields in\n   * an ephemeral close-on-blur editor, where clicking the icon would blur away\n   * and tear the editor down before the popover could open — inline typing\n   * (e.g. \"200+50\" → Enter) still evaluates there. */\n  calculator?: boolean;\n  /** {@link FIELD_DISPLAY} — on a phone, the figure at display size with the field\n   *  chrome dropped. The currency-free half of the same treatment `AmountInput`\n   *  carries, for a dialog whose whole point is the one number (a budget goal's\n   *  target); not for a field among many, and never for the compact inline\n   *  editors this control also serves. */\n  variant?: \"field\" | \"display\";\n  /** A {@link FieldHint} \"?\" on the label's own line, beside the label rather\n   *  than at the far end of the strip — the far end is where the calculator\n   *  lives, and a hint placed there landed on top of it (steering-design\n   *  feedback #48). */\n  hint?: ReactNode;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /**\n   * A static unit shown at the field's right edge — \"%\", \"kg\", \"km/h\".\n   *\n   * The read-out half of {@link AmountInput}'s currency chip, and it exists for the\n   * same reason that one does: a unit belongs to the FIELD, not to the text, so\n   * typing it is a way to get it into the value. Keksdose had a percentage spelled\n   * three different ways across three screens — `<Input type=\"number\" step=\"0.01\">`\n   * for a loan rate, `step=\"0.1\"` for a tax rate, `inputMode=\"decimal\"` for a VAT\n   * rate — and none of the three showed a \"%\" anywhere near the box, so what the\n   * digits meant was a question the label alone had to answer.\n   *\n   * `aria-hidden`, like the currency read-out: it is a property of the field that\n   * the label already names (\"Interest rate (%)\"), and announcing it again after\n   * every value reads as part of the number.\n   */\n  suffix?: ReactNode;\n}\n\n/**\n * A numeric text field with a built-in calculator: type a calculation straight\n * in (e.g. \"12+5\", evaluated on blur/Enter) or click the trailing calculator\n * icon for a keypad. String `value`/`onChange` contract, mirroring\n * {@link AmountInput} — the currency-free counterpart for budgets, goals,\n * invoice totals and split lines.\n */\nexport function NumberInput({\n  value,\n  onChange,\n  onCommit,\n  label,\n  ariaLabel,\n  labels,\n  placeholder,\n  disabled,\n  autoFocus,\n  className,\n  inputClassName,\n  id,\n  calculator = true,\n  variant = \"field\",\n  hint,\n  invalid,\n  suffix,\n}: NumberInputProps) {\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\n  const labelled = label !== undefined;\n  // On phones we suppress the OS keyboard (inputMode=\"none\" below) for our own\n  // calculator numpad, so the desktop popover trigger is hidden (feedback #334).\n  const isMobile = useMediaQuery(PHONE_QUERY, false);\n  const asDisplay = isMobile && variant === \"display\";\n  const showCalc = calculator && !disabled && !isMobile;\n  const [focused, setFocused] = useState(false);\n  // On mobile, focusing opens the numpad bottom sheet instead of the native\n  // keyboard (#334); the ref lets its \"Done\" blur → commit + close.\n  const showNumpad = isMobile && !disabled && focused;\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const commit = () => {\n    const next = commitExpression(value);\n    if (next !== value) onChange(next);\n    onCommit?.(next);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\") commit();\n  };\n\n  return (\n    <FloatingField\n      className={cn(\"w-full\", className)}\n      htmlFor={fieldId}\n      label={label}\n      srOnlyLabel={asDisplay}\n      hint={hint}\n    >\n      <input\n        ref={inputRef}\n        id={fieldId}\n        aria-label={ariaLabel}\n        type=\"text\"\n        // Mobile: suppress the OS keyboard so the numpad sheet owns entry (field\n        // keeps focus/caret); desktop keeps the native decimal keypad.\n        inputMode={isMobile ? \"none\" : \"decimal\"}\n        autoComplete=\"off\"\n        autoFocus={autoFocus}\n        disabled={disabled}\n        // Display mode has no floating label to feed the blank-placeholder trick,\n        // and an empty borderless figure shows nothing — so it keeps whatever\n        // placeholder the caller gave, falling back to a zero to aim at.\n        placeholder={asDisplay ? (placeholder ?? \"0\") : labelled ? \" \" : placeholder}\n        value={value}\n        onChange={(e) => onChange(sanitizeLive(e.target.value))}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          commit();\n          setFocused(false);\n        }}\n        onKeyDown={onKeyDown}\n        aria-invalid={invalid || undefined}\n        // The right-padding sits last so it always wins over an inputClassName that\n        // sets its own px. Both trailing controls can be on at once, so the room\n        // they need is reserved together rather than by whichever happens to render:\n        // the calculator is ~36px and a short unit ~24px, and a field that reserved\n        // only one of them would let the digits run under the other.\n        className={cn(\n          asDisplay\n            ? cn(FIELD_DISPLAY, \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\")\n            : labelled\n              ? FLOATING_INPUT_CLASS\n              : FIELD_BASE,\n          inputClassName,\n          showCalc && suffix !== undefined ? \"pr-16\" : showCalc ? \"pr-9\" : suffix !== undefined ? \"pr-8\" : undefined,\n          invalid && FIELD_INVALID,\n        )}\n      />\n      {(showCalc || suffix !== undefined) && (\n        // One flex track for both, so the unit and the calculator sit side by side\n        // instead of stacking on the same corner — AmountInput's arrangement, which\n        // has carried a chip and a calculator together since #430.\n        <div className=\"absolute inset-y-0 right-0 flex items-center\">\n          {showCalc && (\n            <CalculatorButton\n              value={value}\n              onChange={onChange}\n              className=\"self-stretch px-2.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {suffix !== undefined && (\n            <span\n              aria-hidden\n              className=\"pointer-events-none pr-3 text-xs font-medium text-[var(--text-muted)]\"\n            >\n              {suffix}\n            </span>\n          )}\n        </div>\n      )}\n      {showNumpad && (\n        <NumberPadSheet\n          value={value}\n          onChange={onChange}\n          onDone={() => inputRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n        />\n      )}\n    </FloatingField>\n  );\n}\n"],"mappings":";AAuIM,cA4CE,YA5CF;AAvIN,SAAS,OAAO,QAAQ,gBAAgB;AAExC,SAAS,wBAAqD;AAC9D,SAAS,sBAAiD;AAC1D,SAAS,YAAY,eAAe,eAAe,sBAAsB,eAAe,mBAAmB;AAC3G,SAAS,UAAU;AACnB,SAAS,kBAAkB,oBAAoB;AAC/C,SAAS,qBAAqB;AA6EvB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,cAAc,MAAM;AAC1B,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,UAAU;AAG3B,QAAM,WAAW,cAAc,aAAa,KAAK;AACjD,QAAM,YAAY,YAAY,YAAY;AAC1C,QAAM,WAAW,cAAc,CAAC,YAAY,CAAC;AAC7C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAG5C,QAAM,aAAa,YAAY,CAAC,YAAY;AAC5C,QAAM,WAAW,OAAyB,IAAI;AAE9C,QAAM,SAAS,MAAM;AACnB,UAAM,OAAO,iBAAiB,KAAK;AACnC,QAAI,SAAS,MAAO,UAAS,IAAI;AACjC,eAAW,IAAI;AAAA,EACjB;AAEA,QAAM,YAAY,CAAC,MAAuC;AACxD,QAAI,EAAE,QAAQ,QAAS,QAAO;AAAA,EAChC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,SAAS;AAAA,MACT;AAAA,MACA,aAAa;AAAA,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,IAAI;AAAA,YACJ,cAAY;AAAA,YACZ,MAAK;AAAA,YAGL,WAAW,WAAW,SAAS;AAAA,YAC/B,cAAa;AAAA,YACb;AAAA,YACA;AAAA,YAIA,aAAa,YAAa,eAAe,MAAO,WAAW,MAAM;AAAA,YACjE;AAAA,YACA,UAAU,CAAC,MAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAAA,YACtD,SAAS,MAAM,WAAW,IAAI;AAAA,YAC9B,QAAQ,MAAM;AACZ,qBAAO;AACP,yBAAW,KAAK;AAAA,YAClB;AAAA,YACA;AAAA,YACA,gBAAc,WAAW;AAAA,YAMzB,WAAW;AAAA,cACT,YACI,GAAG,eAAe,kEAAkE,IACpF,WACE,uBACA;AAAA,cACN;AAAA,cACA,YAAY,WAAW,SAAY,UAAU,WAAW,SAAS,WAAW,SAAY,SAAS;AAAA,cACjG,WAAW;AAAA,YACb;AAAA;AAAA,QACF;AAAA,SACE,YAAY,WAAW;AAAA;AAAA;AAAA,QAIvB,qBAAC,SAAI,WAAU,gDACZ;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,WAAU;AAAA,cACV,WAAW,QAAQ;AAAA,cACnB,QAAQ,QAAQ;AAAA;AAAA,UAClB;AAAA,UAED,WAAW,UACV;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QAED,cACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,QAAQ,MAAM,SAAS,SAAS,KAAK;AAAA,YACrC;AAAA,YACA,QAAQ,QAAQ;AAAA;AAAA,QAClB;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/numpad-sheet.d.ts

@@ -1,5 +1,23 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { CalculatorLabels } from '../i18n/kit-labels.js';
+import './data-table-labels.js';
+import './mini-calendar.js';
+import './popover.js';
+import './chip.js';
+import 'lucide-react';
+import './field-sync.js';
+import './ui.js';
+import '../wizard/types.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import './month-picker.js';
+import './page-contents.js';
+import './series-chart-labels.js';
+import './sparkline.js';
+import './stat-tile.js';
+import './signature-pad.js';
+import './password-strength.js';
 
 /**
  * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to
@@ -19,12 +37,19 @@ import { ReactNode } from 'react';
  * the root keeps the host input focused (caret stays, keyboard stays hidden) as
  * the user taps keys; the buttons' `onClick` still fires.
  */
-/** Screen-reader names for the pad itself and its three non-digit keys. */
-interface NumberPadSheetLabels {
+/** Names for the pad itself and its four non-digit keys. The first four are
+ *  screen-reader names; `done` is the one string here that is READ OFF THE SCREEN —
+ *  the brand-filled primary button — and it was a hardcoded English literal while
+ *  its three neighbours each took an override, so a German phone showed "Done"
+ *  among German labels with no prop able to change it. */
+interface NumberPadSheetLabels extends Partial<CalculatorLabels> {
+    /** The pad's own name — the `calculator.panel` key under its older name here. */
     pad?: string;
     backspace?: string;
     clear?: string;
     equals?: string;
+    /** Visible text on the primary key, not an `aria-label`. */
+    done?: string;
 }
 declare function NumberPadSheet({ value, onChange, onDone, label, labels, }: {
     value: string;
@@ -37,8 +62,11 @@ declare function NumberPadSheet({ value, onChange, onDone, label, labels, }: {
     /** Optional field label, echoed in the sheet header so the user still knows
      * which field they're editing when the sheet covers it. */
     label?: ReactNode;
-    /** Screen-reader names for the pad itself and its three non-digit keys. The
-     * digits and operators need none — their visible glyph IS the name. */
+    /** Names for the pad itself and its non-digit keys — screen-reader names, except
+     * `done`, which is the visible text on the primary key. Merged over `calculator`
+     * from `<UiKitProvider labels>`: this is the same keypad as `CalculatorButton`'s,
+     * on a phone, and one translation covers both. Digits need no name — their glyph
+     * IS the name; the operators do (see {@link CalculatorLabels.plus}). */
     labels?: NumberPadSheetLabels;
 }): react.ReactPortal;
 

package/dist/components/numpad-sheet.js

@@ -1,27 +1,34 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { Delete } from "lucide-react";
+import { useMemo } from "react";
 import { cn } from "../lib/cn.js";
+import { useEscapeKey } from "../hooks/use-dismiss.js";
 import { evaluateExpression, formatResult, sanitizeLive } from "../lib/calc.js";
+import {
+  DEFAULT_CALCULATOR_LABELS,
+  useKitLabels
+} from "../i18n/kit-labels.js";
 const PAD_KEYS = [
   { kind: "ins", label: "7", ins: "7" },
   { kind: "ins", label: "8", ins: "8" },
   { kind: "ins", label: "9", ins: "9" },
-  { kind: "ins", label: "\xF7", ins: "\xF7", accent: true },
+  { kind: "ins", label: "\xF7", ins: "\xF7", accent: true, name: "divide" },
   { kind: "ins", label: "4", ins: "4" },
   { kind: "ins", label: "5", ins: "5" },
   { kind: "ins", label: "6", ins: "6" },
-  { kind: "ins", label: "\xD7", ins: "\xD7", accent: true },
+  { kind: "ins", label: "\xD7", ins: "\xD7", accent: true, name: "times" },
   { kind: "ins", label: "1", ins: "1" },
   { kind: "ins", label: "2", ins: "2" },
   { kind: "ins", label: "3", ins: "3" },
-  { kind: "ins", label: "\u2212", ins: "-", accent: true },
-  { kind: "ins", label: ".", ins: "." },
+  { kind: "ins", label: "\u2212", ins: "-", accent: true, name: "minus" },
+  { kind: "ins", label: ".", ins: ".", name: "decimal" },
   { kind: "ins", label: "0", ins: "0" },
   { kind: "back" },
-  { kind: "ins", label: "+", ins: "+", accent: true }
+  { kind: "ins", label: "+", ins: "+", accent: true, name: "plus" }
 ];
-const PAD_BTN = "flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none active:scale-[0.97]";
+const PAD_BTN = "flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)] active:scale-[0.97]";
 const PAD_DIGIT = "bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]";
 const PAD_ACCENT = "bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]";
 function NumberPadSheet({
@@ -31,6 +38,13 @@ function NumberPadSheet({
   label,
   labels
 }) {
+  const fromProps = useMemo(() => {
+    if (!labels) return void 0;
+    const { pad, ...rest } = labels;
+    return pad === void 0 ? rest : { ...rest, panel: pad };
+  }, [labels]);
+  const text = useKitLabels("calculator", DEFAULT_CALCULATOR_LABELS, fromProps);
+  useEscapeKey(onDone);
   const result = evaluateExpression(value);
   const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : "";
   const insert = (ch) => onChange(sanitizeLive(value + ch));
@@ -43,7 +57,7 @@ function NumberPadSheet({
     "div",
     {
       role: "group",
-      "aria-label": labels?.pad ?? "Number pad",
+      "aria-label": text.panel,
       onPointerDown: (e) => e.preventDefault(),
       className: "fixed inset-x-0 bottom-0 z-50 border-t border-[var(--border)] bg-[var(--bg-surface)] px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]",
       style: { paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" },
@@ -60,7 +74,7 @@ function NumberPadSheet({
             "button",
             {
               type: "button",
-              "aria-label": labels?.backspace ?? "Backspace",
+              "aria-label": text.backspace,
               onClick: backspace,
               className: cn(PAD_BTN, PAD_ACCENT),
               children: /* @__PURE__ */ jsx(Delete, { className: "size-5" })
@@ -70,7 +84,7 @@ function NumberPadSheet({
             "button",
             {
               type: "button",
-              "aria-label": key.label,
+              "aria-label": key.name ? text[key.name] : key.label,
               onClick: () => insert(key.ins),
               className: cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT),
               children: key.label
@@ -79,15 +93,18 @@ function NumberPadSheet({
           )
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "mt-1.5 grid grid-cols-4 gap-1.5", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels?.clear ?? "Clear", onClick: clearAll, className: cn(PAD_BTN, PAD_ACCENT), children: "C" }),
-          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels?.equals ?? "Equals", onClick: equals, className: cn(PAD_BTN, PAD_ACCENT), children: "=" }),
+          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": text.clear, onClick: clearAll, className: cn(PAD_BTN, PAD_ACCENT), children: "C" }),
+          /* @__PURE__ */ jsx("button", { type: "button", "aria-label": text.equals, onClick: equals, className: cn(PAD_BTN, PAD_ACCENT), children: "=" }),
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: onDone,
-              className: cn(PAD_BTN, "col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] active:bg-[var(--brand-hover)]"),
-              children: "Done"
+              className: cn(
+                PAD_BTN,
+                "col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] focus-visible:ring-[var(--brand-contrast)] active:bg-[var(--brand-hover)]"
+              ),
+              children: text.done
             }
           )
         ] })

package/dist/components/numpad-sheet.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/numpad-sheet.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport { Delete } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { evaluateExpression, formatResult, sanitizeLive } from \"../lib/calc\";\n\n/**\n * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to\n * the desktop {@link CalculatorButton} popover, and the replacement for the old\n * under-the-field operator bar (`MathKeys`, feedback #334).\n *\n * A native app (YNAB) can swap the system keyboard for its own keypad; a PWA\n * cannot — but it CAN suppress the OS keyboard with `inputMode=\"none\"` on the\n * host field and paint its own keypad in the freed space. So the host input keeps\n * real focus/caret/selection + the existing value/commit contract, while this\n * sheet drives it: digits + operators + a live `= …` preview, evaluated through\n * the shared {@link evaluateExpression} engine. Desktop is untouched (it keeps the\n * native keyboard and the calculator popover); the host gates this to mobile.\n *\n * Buttons commit through the host's `onChange`/blur, so the sheet is stateless —\n * the field text is the single source of truth. `onPointerDown` preventDefault on\n * the root keeps the host input focused (caret stays, keyboard stays hidden) as\n * the user taps keys; the buttons' `onClick` still fires.\n */\n/** Screen-reader names for the pad itself and its three non-digit keys. */\nexport interface NumberPadSheetLabels {\n  pad?: string;\n  backspace?: string;\n  clear?: string;\n  equals?: string;\n}\n\ntype PadKey =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean }\n  | { kind: \"back\" };\n\n// Insert chars that survive `sanitizeLive` (it keeps `× ÷` and ASCII `+ - * /`\n// but strips the unicode minus `−`, so minus inserts an ASCII \"-\" while showing\n// the nicer glyph). The evaluator normalises `× ÷` back to `* /`.\nconst PAD_KEYS: PadKey[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"-\", accent: true },\n  { kind: \"ins\", label: \".\", ins: \".\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true },\n];\n\nconst PAD_BTN =\n  \"flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none active:scale-[0.97]\";\nconst PAD_DIGIT = \"bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]\";\nconst PAD_ACCENT = \"bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]\";\n\nexport function NumberPadSheet({\n  value,\n  onChange,\n  onDone,\n  label,\n  labels,\n}: {\n  value: string;\n  /** Fired with the raw (sanitised) field text on every key — same contract as\n   * the host field's own `onChange`. */\n  onChange: (value: string) => void;\n  /** Fired on \"Done\": the host blurs the input, which commits (evaluates) and\n   * unmounts the sheet via its existing blur handler. */\n  onDone: () => void;\n  /** Optional field label, echoed in the sheet header so the user still knows\n   * which field they're editing when the sheet covers it. */\n  label?: ReactNode;\n  /** Screen-reader names for the pad itself and its three non-digit keys. The\n   * digits and operators need none — their visible glyph IS the name. */\n  labels?: NumberPadSheetLabels;\n}) {\n  // NO `useBodyScrollLock`, and that is the point of the control (Keksdose live\n  // #317: *\"Background not scrollable when the amount input calculator field is\n  // open\"*).\n  //\n  // This sheet is a KEYBOARD, not a dialog. It is opened by focusing a field and\n  // exists only because a PWA cannot swap the system keyboard for its own — so it\n  // suppresses the OS keyboard with `inputMode=\"none\"` and paints itself in the\n  // freed space. An OS keyboard does not freeze the page behind it; it takes the\n  // bottom of the screen and leaves you free to scroll what is left, which is how\n  // you reach the field you are typing into when the keys cover it.\n  //\n  // Locking here made the page unreachable at exactly the moment it matters most:\n  // correcting a receipt total against the running line sum, where the figure you\n  // are comparing against sits below the keypad. The other four holders of that\n  // hook are all modal — `Modal`, `PickerSheet`, `FullBleedDialog`, the DataTable\n  // row dialog — and they stay locked, because for them the page behind is not\n  // part of the task.\n  //\n  // The pad still does not scroll ITSELF away under a stray drag: the root's\n  // `onPointerDown` preventDefault (below) keeps the host input focused and eats\n  // the gesture on the sheet, so a touch that starts on a key is not a page scroll.\n\n  const result = evaluateExpression(value);\n  const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : \"\";\n\n  const insert = (ch: string) => onChange(sanitizeLive(value + ch));\n  const backspace = () => onChange(value.slice(0, -1));\n  const clearAll = () => onChange(\"\");\n  const equals = () => {\n    if (result !== null) onChange(formatResult(result));\n  };\n\n  const sheet = (\n    <div\n      role=\"group\"\n      aria-label={labels?.pad ?? \"Number pad\"}\n      // Keep the host input focused when tapping the pad: preventDefault on\n      // pointerdown blocks the focus/blur, while the buttons' click still fires.\n      onPointerDown={(e) => e.preventDefault()}\n      className=\"fixed inset-x-0 bottom-0 z-50 border-t border-[var(--border)] bg-[var(--bg-surface)] px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]\"\n      style={{ paddingBottom: \"max(0.5rem, env(safe-area-inset-bottom))\" }}\n    >\n      {/* Header display: which field + the running expression and live result, so\n          the value stays visible even when the sheet covers the field. */}\n      <div className=\"flex items-end justify-between gap-3 px-2 pb-2\">\n        {label != null && (\n          <span className=\"truncate pb-1 text-xs font-medium text-[var(--money-neutral)]\">{label}</span>\n        )}\n        <div className=\"ml-auto min-w-0 text-right\">\n          <div className=\"truncate font-mono text-lg leading-tight text-[var(--text-primary)]\">{value || \"0\"}</div>\n          <div className=\"h-4 font-mono text-xs text-[var(--money-neutral)]\">{preview}</div>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {PAD_KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={labels?.backspace ?? \"Backspace\"}\n              onClick={backspace}\n              className={cn(PAD_BTN, PAD_ACCENT)}\n            >\n              <Delete className=\"size-5\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.label}\n              onClick={() => insert(key.ins)}\n              className={cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n      </div>\n\n      <div className=\"mt-1.5 grid grid-cols-4 gap-1.5\">\n        <button type=\"button\" aria-label={labels?.clear ?? \"Clear\"} onClick={clearAll} className={cn(PAD_BTN, PAD_ACCENT)}>\n          C\n        </button>\n        <button type=\"button\" aria-label={labels?.equals ?? \"Equals\"} onClick={equals} className={cn(PAD_BTN, PAD_ACCENT)}>\n          =\n        </button>\n        <button\n          type=\"button\"\n          onClick={onDone}\n          className={cn(PAD_BTN, \"col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] active:bg-[var(--brand-hover)]\")}\n        >\n          Done\n        </button>\n      </div>\n    </div>\n  );\n\n  return createPortal(sheet, document.body);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/numpad-sheet.tsx"],"sourcesContent":["import { createPortal } from \"react-dom\";\nimport { Delete } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useEscapeKey } from \"../hooks/use-dismiss\";\nimport { evaluateExpression, formatResult, sanitizeLive } from \"../lib/calc\";\nimport {\n  DEFAULT_CALCULATOR_LABELS,\n  useKitLabels,\n  type CalculatorLabels,\n} from \"../i18n/kit-labels\";\n\n/**\n * A full calculator keypad rendered as a bottom sheet — the mobile counterpart to\n * the desktop {@link CalculatorButton} popover, and the replacement for the old\n * under-the-field operator bar (`MathKeys`, feedback #334).\n *\n * A native app (YNAB) can swap the system keyboard for its own keypad; a PWA\n * cannot — but it CAN suppress the OS keyboard with `inputMode=\"none\"` on the\n * host field and paint its own keypad in the freed space. So the host input keeps\n * real focus/caret/selection + the existing value/commit contract, while this\n * sheet drives it: digits + operators + a live `= …` preview, evaluated through\n * the shared {@link evaluateExpression} engine. Desktop is untouched (it keeps the\n * native keyboard and the calculator popover); the host gates this to mobile.\n *\n * Buttons commit through the host's `onChange`/blur, so the sheet is stateless —\n * the field text is the single source of truth. `onPointerDown` preventDefault on\n * the root keeps the host input focused (caret stays, keyboard stays hidden) as\n * the user taps keys; the buttons' `onClick` still fires.\n */\n/** Names for the pad itself and its four non-digit keys. The first four are\n *  screen-reader names; `done` is the one string here that is READ OFF THE SCREEN —\n *  the brand-filled primary button — and it was a hardcoded English literal while\n *  its three neighbours each took an override, so a German phone showed \"Done\"\n *  among German labels with no prop able to change it. */\nexport interface NumberPadSheetLabels extends Partial<CalculatorLabels> {\n  /** The pad's own name — the `calculator.panel` key under its older name here. */\n  pad?: string;\n  backspace?: string;\n  clear?: string;\n  equals?: string;\n  /** Visible text on the primary key, not an `aria-label`. */\n  done?: string;\n}\n\ntype PadKey =\n  | { kind: \"ins\"; label: string; ins: string; accent?: boolean; name?: PadKeyName }\n  | { kind: \"back\" };\n\n/** The {@link CalculatorLabels} key naming a non-digit key; digits are their glyph. */\ntype PadKeyName = \"plus\" | \"minus\" | \"times\" | \"divide\" | \"decimal\";\n\n// Insert chars that survive `sanitizeLive` (it keeps `× ÷` and ASCII `+ - * /`\n// but strips the unicode minus `−`, so minus inserts an ASCII \"-\" while showing\n// the nicer glyph). The evaluator normalises `× ÷` back to `* /`.\nconst PAD_KEYS: PadKey[] = [\n  { kind: \"ins\", label: \"7\", ins: \"7\" },\n  { kind: \"ins\", label: \"8\", ins: \"8\" },\n  { kind: \"ins\", label: \"9\", ins: \"9\" },\n  { kind: \"ins\", label: \"÷\", ins: \"÷\", accent: true, name: \"divide\" },\n  { kind: \"ins\", label: \"4\", ins: \"4\" },\n  { kind: \"ins\", label: \"5\", ins: \"5\" },\n  { kind: \"ins\", label: \"6\", ins: \"6\" },\n  { kind: \"ins\", label: \"×\", ins: \"×\", accent: true, name: \"times\" },\n  { kind: \"ins\", label: \"1\", ins: \"1\" },\n  { kind: \"ins\", label: \"2\", ins: \"2\" },\n  { kind: \"ins\", label: \"3\", ins: \"3\" },\n  { kind: \"ins\", label: \"−\", ins: \"-\", accent: true, name: \"minus\" },\n  { kind: \"ins\", label: \".\", ins: \".\", name: \"decimal\" },\n  { kind: \"ins\", label: \"0\", ins: \"0\" },\n  { kind: \"back\" },\n  { kind: \"ins\", label: \"+\", ins: \"+\", accent: true, name: \"plus\" },\n];\n\n/** Every key's shape — including the thing this pad used to delete without replacing.\n *\n *  `focus:outline-none` alone is not a style choice, it is the removal of the only\n *  signal a keyboard user has; on a 4×4 grid of identical tiles it leaves no way at all\n *  to tell which key Enter is about to press (the audit's §a11y, and the same defect as\n *  the dropdown search box).\n *\n *  `focus-visible` and `ring-inset`, for the two reasons {@link ToggleGroup} already\n *  writes down. This is a touch control first, and a plain `focus:` ring paints itself\n *  on every TAP, because a tap focuses the button. And the keys sit 6px apart, which is\n *  thinner than an outward ring plus the neighbour it would spill onto — inset keeps the\n *  ring inside the key it describes.\n *\n *  --brand rather than --border-strong: the operator keys are filled with --border, and\n *  a ring in the colour of the thing it surrounds is not an indicator. */\nconst PAD_BTN =\n  \"flex h-14 items-center justify-center rounded-lg text-lg font-medium transition-transform select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)] active:scale-[0.97]\";\nconst PAD_DIGIT = \"bg-[var(--bg-surface-2)] text-[var(--text-primary)] active:bg-[var(--border)]\";\nconst PAD_ACCENT = \"bg-[var(--border)] text-[var(--text-primary)] active:bg-[var(--bg-surface-2)]\";\n\nexport function NumberPadSheet({\n  value,\n  onChange,\n  onDone,\n  label,\n  labels,\n}: {\n  value: string;\n  /** Fired with the raw (sanitised) field text on every key — same contract as\n   * the host field's own `onChange`. */\n  onChange: (value: string) => void;\n  /** Fired on \"Done\": the host blurs the input, which commits (evaluates) and\n   * unmounts the sheet via its existing blur handler. */\n  onDone: () => void;\n  /** Optional field label, echoed in the sheet header so the user still knows\n   * which field they're editing when the sheet covers it. */\n  label?: ReactNode;\n  /** Names for the pad itself and its non-digit keys — screen-reader names, except\n   * `done`, which is the visible text on the primary key. Merged over `calculator`\n   * from `<UiKitProvider labels>`: this is the same keypad as `CalculatorButton`'s,\n   * on a phone, and one translation covers both. Digits need no name — their glyph\n   * IS the name; the operators do (see {@link CalculatorLabels.plus}). */\n  labels?: NumberPadSheetLabels;\n}) {\n  // `pad` is this sheet's older spelling of `panel`, so it is folded in as that.\n  const fromProps = useMemo(() => {\n    if (!labels) return undefined;\n    const { pad, ...rest } = labels;\n    return pad === undefined ? rest : { ...rest, panel: pad };\n  }, [labels]);\n  const text = useKitLabels(\"calculator\", DEFAULT_CALCULATOR_LABELS, fromProps);\n\n  // NO `useBodyScrollLock`, and that is the point of the control (Keksdose live\n  // #317: *\"Background not scrollable when the amount input calculator field is\n  // open\"*).\n  //\n  // This sheet is a KEYBOARD, not a dialog. It is opened by focusing a field and\n  // exists only because a PWA cannot swap the system keyboard for its own — so it\n  // suppresses the OS keyboard with `inputMode=\"none\"` and paints itself in the\n  // freed space. An OS keyboard does not freeze the page behind it; it takes the\n  // bottom of the screen and leaves you free to scroll what is left, which is how\n  // you reach the field you are typing into when the keys cover it.\n  //\n  // Locking here made the page unreachable at exactly the moment it matters most:\n  // correcting a receipt total against the running line sum, where the figure you\n  // are comparing against sits below the keypad. The other four holders of that\n  // hook are all modal — `Modal`, `PickerSheet`, `FullBleedDialog`, the DataTable\n  // row dialog — and they stay locked, because for them the page behind is not\n  // part of the task.\n  //\n  // The pad still does not scroll ITSELF away under a stray drag: the root's\n  // `onPointerDown` preventDefault (below) keeps the host input focused and eats\n  // the gesture on the sheet, so a touch that starts on a key is not a page scroll.\n\n  // ── NO focus trap either, and for a harder reason than the scroll lock ────────\n  //\n  // Wave 3 put `useFocusTrap` on every overlay in this package. This one is the\n  // exception, and it is not an oversight to be tidied up later: a trap here would\n  // DELETE THE COMPONENT IT WAS PROTECTING. Both hosts render the pad with\n  // `showNumpad = isMobile && !disabled && focused`, where `focused` is the host\n  // input's own focus state. Moving focus into the pad blurs that input, the host\n  // sets `focused` false, and the pad unmounts — on mount, before a single key can be\n  // pressed. The blur also COMMITS, so the trap would evaluate a half-typed\n  // expression on the way out.\n  //\n  // That is the contract, not an accident of it. This sheet exists because a PWA\n  // cannot swap the system keyboard for its own: the host keeps real focus, caret and\n  // selection while `inputMode=\"none\"` suppresses the OS keys, and the root's\n  // `onPointerDown` preventDefault below is there for the same reason. The pad is\n  // `role=\"group\"`, not a dialog. A keyboard does not trap focus; it is what you type\n  // WITH.\n  //\n  // What was genuinely missing is a way OUT that is not a tap. `useEscapeKey` and not\n  // a handler on the sheet, because the sheet never has the focus a keydown would\n  // bubble from — the host does, and the host is not this component. Escape does what\n  // the Done key does rather than cancelling, because committing on blur is the\n  // host's contract and a cancel would have to be the host's to offer.\n  //\n  // The limit, since it is better written down than discovered: inside a `Modal` the\n  // dialog's own Escape handler sits on the focus path and stops the event before a\n  // document listener sees it, so there the press closes the dialog — which it did\n  // before this line existed too, and which takes the pad with it either way.\n  useEscapeKey(onDone);\n\n  const result = evaluateExpression(value);\n  const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : \"\";\n\n  const insert = (ch: string) => onChange(sanitizeLive(value + ch));\n  const backspace = () => onChange(value.slice(0, -1));\n  const clearAll = () => onChange(\"\");\n  const equals = () => {\n    if (result !== null) onChange(formatResult(result));\n  };\n\n  const sheet = (\n    <div\n      role=\"group\"\n      aria-label={text.panel}\n      // Keep the host input focused when tapping the pad: preventDefault on\n      // pointerdown blocks the focus/blur, while the buttons' click still fires.\n      onPointerDown={(e) => e.preventDefault()}\n      className=\"fixed inset-x-0 bottom-0 z-50 border-t border-[var(--border)] bg-[var(--bg-surface)] px-2 pt-2 shadow-[0_-4px_24px_rgba(0,0,0,0.12)]\"\n      style={{ paddingBottom: \"max(0.5rem, env(safe-area-inset-bottom))\" }}\n    >\n      {/* Header display: which field + the running expression and live result, so\n          the value stays visible even when the sheet covers the field. */}\n      <div className=\"flex items-end justify-between gap-3 px-2 pb-2\">\n        {label != null && (\n          <span className=\"truncate pb-1 text-xs font-medium text-[var(--money-neutral)]\">{label}</span>\n        )}\n        <div className=\"ml-auto min-w-0 text-right\">\n          <div className=\"truncate font-mono text-lg leading-tight text-[var(--text-primary)]\">{value || \"0\"}</div>\n          <div className=\"h-4 font-mono text-xs text-[var(--money-neutral)]\">{preview}</div>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-4 gap-1.5\">\n        {PAD_KEYS.map((key, i) =>\n          key.kind === \"back\" ? (\n            <button\n              key=\"back\"\n              type=\"button\"\n              aria-label={text.backspace}\n              onClick={backspace}\n              className={cn(PAD_BTN, PAD_ACCENT)}\n            >\n              <Delete className=\"size-5\" />\n            </button>\n          ) : (\n            <button\n              key={`${key.ins}-${i}`}\n              type=\"button\"\n              aria-label={key.name ? text[key.name] : key.label}\n              onClick={() => insert(key.ins)}\n              className={cn(PAD_BTN, key.accent ? PAD_ACCENT : PAD_DIGIT)}\n            >\n              {key.label}\n            </button>\n          ),\n        )}\n      </div>\n\n      <div className=\"mt-1.5 grid grid-cols-4 gap-1.5\">\n        <button type=\"button\" aria-label={text.clear} onClick={clearAll} className={cn(PAD_BTN, PAD_ACCENT)}>\n          C\n        </button>\n        <button type=\"button\" aria-label={text.equals} onClick={equals} className={cn(PAD_BTN, PAD_ACCENT)}>\n          =\n        </button>\n        <button\n          type=\"button\"\n          onClick={onDone}\n          // The one key whose own fill is --brand, so it rings in the colour that fill\n          // was chosen to be legible against instead (tailwind-merge keeps the later\n          // ring colour). A --brand ring here would be present in the DOM and invisible\n          // on screen, which is the defect this change exists to fix.\n          className={cn(\n            PAD_BTN,\n            \"col-span-2 bg-[var(--brand)] text-[var(--brand-contrast)] focus-visible:ring-[var(--brand-contrast)] active:bg-[var(--brand-hover)]\",\n          )}\n        >\n          {text.done}\n        </button>\n      </div>\n    </div>\n  );\n\n  return createPortal(sheet, document.body);\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,90 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+/**
+ * "On this page": a page's own table of contents, with the section being read marked.
+ *
+ * Three parts, because an app needs them separately:
+ *
+ *   - {@link useScrollSpy} — which section is current, from the headings' positions in
+ *     a scroll container. No markup; usable for anything that follows the reader.
+ *   - {@link PageContents} — the list. `variant="rail"` for beside the page,
+ *     `variant="disclosure"` for a collapsed block under the title on narrow screens.
+ *   - {@link PageContentsLayout} — the page with the rail sticky on one side of it.
+ *
+ * Domain-free: the app supplies the entries and how an entry links (`hrefFor`), so it
+ * works with any router, including a hash router where `#id` alone would be read as a
+ * route.
+ */
+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 {
+    /** The heading above the list, and the landmark's accessible name. */
+    title: string;
+}
+declare const DEFAULT_PAGE_CONTENTS_LABELS: PageContentsLabels;
+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;
+    /**
+     * How far down the scroller the "reading line" sits, as a fraction of its height.
+     * A section becomes current once its heading passes above it, and stays current
+     * until the next heading does — so a long section keeps its entry marked while it
+     * is being read, not only while its heading is on screen. Default 0.15: close to
+     * the top, so a short section followed by another does not hand its mark to the
+     * next one the moment it is scrolled to.
+     */
+    line?: number;
+}
+/**
+ * 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"> {
+    items: PageContentsItem[];
+    /** The current entry — typically `useScrollSpy(items.map(i => i.id), …)`. */
+    activeId?: string | null;
+    /** The link for an entry. Default `#id`; under a hash router build it with the
+     *  router (react-router's `useHref({ hash: id })` gives `#/page#id`). */
+    hrefFor?: (id: string) => string;
+    /** `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>;
+}
+/**
+ * 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"> {
+    /** What goes in the rail — typically a `<PageContents variant="rail">`. */
+    contents: ReactNode;
+    /**
+     * Which side of the page the rail sits on: `start` is the left in a left-to-right
+     * language (next to the app's own sidebar, so both navigations are in one place),
+     * `end` the right (the documentation-site convention, clear of the sidebar). Logical,
+     * so both flip in a right-to-left UI.
+     */
+    position?: "start" | "end";
+    children: ReactNode;
+}
+/**
+ * The page with a sticky contents rail beside it, from `xl` (1280px) up. Below that
+ * the rail would squeeze the content, so it is not rendered there — pair it with a
+ * `<PageContents variant="disclosure" className="xl:hidden">` in the page.
+ *
+ * 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 };

package/dist/components/page-contents.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+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"
+};
+function useScrollSpy(ids, options = {}) {
+  const { root = null, line = 0.15 } = options;
+  const [current, setCurrent] = useState(null);
+  const key = ids.join("\0");
+  useEffect(() => {
+    if (ids.length === 0) return;
+    const scroller = root ?? window;
+    const measure = () => {
+      const top = root ? root.getBoundingClientRect().top : 0;
+      const height = root ? root.clientHeight : window.innerHeight;
+      const reading = top + height * line;
+      let next = ids[0];
+      for (const id of ids) {
+        const el = document.getElementById(id);
+        if (el && el.getBoundingClientRect().top <= reading) next = id;
+      }
+      const atEnd = root ? root.scrollTop + root.clientHeight >= root.scrollHeight - 2 : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;
+      const scrolled = root ? root.scrollTop : window.scrollY;
+      if (atEnd && scrolled > 0) next = ids[ids.length - 1];
+      setCurrent(next);
+    };
+    let frame = 0;
+    const onScroll = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    };
+    measure();
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      cancelAnimationFrame(frame);
+      scroller.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [key, root, line]);
+  return current;
+}
+function PageContents({
+  items,
+  activeId,
+  hrefFor = (id) => `#${id}`,
+  variant = "rail",
+  labels,
+  className,
+  ...rest
+}) {
+  const l = useKitLabels("pageContents", DEFAULT_PAGE_CONTENTS_LABELS, labels);
+  const listRef = useRef(null);
+  const [clicked, setClicked] = useState(null);
+  useEffect(() => {
+    if (!clicked) return;
+    const release = () => setClicked(null);
+    window.addEventListener("wheel", release, { passive: true, once: true });
+    window.addEventListener("touchmove", release, { passive: true, once: true });
+    window.addEventListener("keydown", release, { once: true });
+    return () => {
+      window.removeEventListener("wheel", release);
+      window.removeEventListener("touchmove", release);
+      window.removeEventListener("keydown", release);
+    };
+  }, [clicked]);
+  const shown = clicked ?? activeId;
+  useEffect(() => {
+    if (!shown || variant !== "rail") return;
+    listRef.current?.querySelector(`[data-entry="${CSS.escape(shown)}"]`)?.scrollIntoView?.({ block: "nearest" });
+  }, [shown, variant]);
+  if (items.length === 0) return null;
+  const list = /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: listRef,
+      className: cn(
+        "space-y-0.5 border-s border-[var(--border)]",
+        variant === "rail" && "max-h-[calc(100dvh-10rem)] overflow-y-auto [scrollbar-width:thin]"
+      ),
+      children: items.map((item) => {
+        const current = item.id === shown;
+        return /* @__PURE__ */ jsx("li", { "data-entry": item.id, children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: hrefFor(item.id),
+            title: variant === "rail" && typeof item.label === "string" ? item.label : void 0,
+            "aria-current": current ? "location" : void 0,
+            onClick: () => setClicked(item.id),
+            className: cn(
+              "-ms-px block border-s-2 py-1 pe-1 text-[13px] leading-snug transition-colors duration-150",
+              variant === "rail" && "truncate",
+              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)]"
+            ),
+            children: item.label
+          }
+        ) }, item.id);
+      })
+    }
+  );
+  if (variant === "disclosure") {
+    return /* @__PURE__ */ jsxs(
+      "details",
+      {
+        className: cn(
+          "group rounded-md border border-[var(--border)] bg-[var(--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: [
+            l.title,
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                "aria-hidden": true,
+                className: "size-4 transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("nav", { ...rest, "aria-label": l.title, className: "border-t border-[var(--border)] px-2 py-2", children: list })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("nav", { ...rest, "aria-label": l.title, className, children: [
+    /* @__PURE__ */ jsx("p", { className: "mb-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]", children: l.title }),
+    list
+  ] });
+}
+function PageContentsLayout({
+  contents,
+  position = "start",
+  children,
+  className,
+  ...rest
+}) {
+  const rail = /* @__PURE__ */ jsx("aside", { className: "hidden xl:block", children: /* @__PURE__ */ jsx("div", { className: "sticky top-6", children: contents }) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "xl:grid xl:gap-10",
+        // `fit-content(22rem)`: the rail is as wide as its longest entry, up to 22rem.
+        // A fixed 13rem broke "Select — unlabelled, labelled, invalid, disabled" over
+        // three lines beside a page with room to spare; an index you scan should read
+        // one entry per line.
+        position === "start" ? "xl:grid-cols-[fit-content(22rem)_minmax(0,1fr)]" : "xl:grid-cols-[minmax(0,1fr)_fit-content(22rem)]",
+        className
+      ),
+      children: [
+        position === "start" && rail,
+        /* @__PURE__ */ jsx("div", { className: "min-w-0", children }),
+        position === "end" && rail
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_PAGE_CONTENTS_LABELS,
+  PageContents,
+  PageContentsLayout,
+  useScrollSpy
+};
+//# sourceMappingURL=page-contents.js.map

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

@@ -0,0 +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              // One line per entry in the rail; past 22rem the ellipsis takes over and\n              // the full text is on hover. The disclosure has the page's width and wraps.\n              title={variant === \"rail\" && typeof item.label === \"string\" ? item.label : undefined}\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-[13px] leading-snug transition-colors duration-150\",\n                variant === \"rail\" && \"truncate\",\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-[11px] 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":"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","names":[]}