@eifi1/ui-kit 0.13.0 → 0.13.1

package/src/components/amount-input.tsx

@@ -158,6 +158,12 @@ interface AmountInputProps {
    * zero (12.345 → 12.35, -12.345 → -12.35) and happens when the figure settles: on
    * blur, on Enter, and on every result the calculator writes back. Keystrokes are left
    * alone, so "12.3" can still become "12.34".
+   *
+   * ⚠️ **A unit price or a rate needs `digits`.** The default is right for an amount of
+   * money and silently wrong for a price per unit: a fund's NAV of 123.4567 or fuel at
+   * 1.789 €/l is stored as 123.46 / 1.79, and no test fails (keksdose G2, a
+   * `Numeric(18,6)` holding price and a `Numeric(18,4)` unit price). Pass the column's
+   * scale: `digits={4}`, `digits={6}`.
    */
   digits?: number;
   /** The smallest amount the field settles on. A lower figure is raised to it when it
@@ -218,6 +224,36 @@ function decimalMark(locale: string | undefined): "," | "." {
   }
 }
 
+/**
+ * Which typed mark is the decimal one (keksdose G1). {@link sanitizeLive} folds every
+ * "," into ".", so on its own it read the German "1.234,56" as 1.23456 — and the
+ * settle then made that 1.23, final. This decides per operand, from the typist's own
+ * text, before that fold:
+ *
+ * - both marks present: the one that is not the locale's is grouping, and goes;
+ * - in a "," locale, only "." present: grouping when it cannot be a decimal as a
+ *   German reader writes it — twice ("1.234.567"), or in thousands shape ("1.234",
+ *   "12.500") — otherwise a decimal ("1.5", typed by a dot-decimal habit);
+ * - in a "." locale, only "," present: grouping when it appears twice ("1,234,567");
+ *   once it stays a decimal, because Swiss and German typists write "1,5" in a
+ *   de-CH form (kastlan 40) and a unit price "1,789" is a decimal.
+ *
+ * Only a keystroke's text comes through here. A calculator result is dot-decimal
+ * already, and "1.234" from `100/81.03…` is never a thousand.
+ */
+function normalizeTypedMarks(raw: string, mark: "," | "."): string {
+  const other = mark === "," ? "." : ",";
+  return raw.replace(/[0-9.,]+/g, (operand) => {
+    const hasMark = operand.includes(mark);
+    const count = operand.split(other).length - 1;
+    if (count === 0) return operand;
+    const grouping = hasMark
+      ? true
+      : count > 1 || (mark === "," && /^\d{1,3}(\.\d{3})+$/.test(operand));
+    return grouping ? operand.split(other).join("") : operand;
+  });
+}
+
 // The consuming app's ONE money palette (`--money-expense` / `--money-income`),
 // not a bespoke rose/emerald pairing: a figure being typed has to wear the same
 // colour the same figure will wear once it is a row in the table behind the form
@@ -310,7 +346,23 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
     // follows `Intl` rather than a guess about a country.
     const locale = useKitLocale();
     const mark = decimalMark(locale);
-    const display = mark === "," ? shown.replace(/\./g, ",") : shown;
+    // While the typist is typing, the field shows THEIR text ("1.234,5" stays exactly
+    // that), not the value re-spelt: re-spelling turned a grouping "." into a "," under
+    // their fingers, after which no rule could tell the two apart (keksdose G1). The
+    // draft is shown only while it still spells what the field holds; a value set from
+    // outside, a calculator result or a commit falls back to the derived spelling.
+    const [draft, setDraft] = useState<string | null>(null);
+    const derived = mark === "," ? shown.replace(/\./g, ",") : shown;
+    const draftAs = draft === null ? "" : sanitizeLive(normalizeTypedMarks(draft, mark));
+    const display =
+      draft === null
+        ? derived
+        : draftAs === shown
+          ? draft
+          : // The caller owns the sign: the typed "12" is shown as the "-12" it is.
+            signOwned && negative && `-${draftAs}` === shown
+            ? `-${draft}`
+            : derived;
     // Every route into the field — typing, the numpad sheet, the desktop
     // calculator, the blur/Enter commit — funnels through here, so the split is
     // written once and the four entry paths cannot drift.
@@ -345,7 +397,14 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
       }
       onChange(sign ? rest : text);
     };
-    const commit = () => handleText(settle(commitExpression(shown)));
+    const commit = () => {
+      setDraft(null);
+      handleText(settle(commitExpression(shown)));
+    };
+    const typed = (raw: string) => {
+      setDraft(raw);
+      handleText(normalizeTypedMarks(raw, mark));
+    };
     const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();
     // The chip the currency list hangs off (Keksdose dev#548). It is portalled now, so
     // the panel needs a real trigger rect rather than a relative parent — see
@@ -404,7 +463,7 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
           // only the app knows the locale's decimal separator.
           placeholder={asDisplay ? (placeholder ?? "0") : label !== undefined ? " " : placeholder}
           value={display}
-          onChange={(e) => handleText(e.target.value)}
+          onChange={(e) => typed(e.target.value)}
           onFocus={() => setFocused(true)}
           onBlur={() => {
             commit();
@@ -472,7 +531,10 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
               // The mark the field shows, as NumberInput hands its calculator; the
               // evaluator reads either, and its result comes back dot-decimal.
               value={display}
-              onChange={(result, expression) => handleText(settle(result), expression)}
+              onChange={(result, expression) => {
+                setDraft(null);
+                handleText(settle(result), expression);
+              }}
               className="px-1.5"
               ariaLabel={labels?.calculatorTrigger}
               labels={labels?.calculator}
@@ -554,10 +616,14 @@ export const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(
         </div>
         {showNumpad && (
           <NumberPadSheet
-            // Localised like the field it mirrors; its keys come back through
-            // `sanitizeLive`, so the "." key and a "," both land as a dot.
+            // Localised like the field it mirrors. Keys are typing, read by the
+            // locale's marks like the keyboard's; "=" is a result, dot-decimal.
             value={display}
-            onChange={handleText}
+            onChange={typed}
+            onResult={(result) => {
+              setDraft(null);
+              handleText(result);
+            }}
             onDone={() => innerRef.current?.blur()}
             label={label}
             labels={labels?.pad}

package/src/components/error-boundary.tsx

@@ -73,13 +73,29 @@ function read(get: () => unknown): string | undefined {
   }
 }
 
+/** `JSON.stringify` that never throws (a cycle, a BigInt, a hostile getter) and never
+ *  returns more than 500 characters. "" when there is nothing to say. */
+function safeJson(value: unknown): string {
+  try {
+    const json = JSON.stringify(value);
+    if (!json || json === "{}") return "";
+    return json.length > 500 ? `${json.slice(0, 499)}…` : json;
+  } catch {
+    return "";
+  }
+}
+
 /** {@link ErrorBoundaryDetails} of any thrown value, without ever throwing. */
 export function describeThrown(error: unknown): ErrorBoundaryDetails {
   if (typeof error === "object" && error !== null) {
     const e = error as { name?: unknown; message?: unknown; stack?: unknown };
+    const message = read(() => e.message) ?? "";
     return {
       name: read(() => e.name) ?? "Error",
-      message: read(() => e.message) ?? "",
+      // `throw { code: 500 }` has no message, and an empty line leaves crash triage with
+      // nothing (keksdose G3a; its old reporter filed `{"code":500}`). Such a value is
+      // quoted as JSON instead, capped, and never at the cost of a throw.
+      message: message || (error instanceof Error ? "" : safeJson(error)),
       stack: read(() => e.stack),
     };
   }

package/src/components/numpad-sheet.tsx

@@ -100,15 +100,20 @@ export function NumberPadSheet({
   label,
   labels,
   decimalMark = ".",
+  onResult,
 }: {
   value: string;
   /** Fired with the raw (sanitised) field text on every key — same contract as
    * the host field's own `onChange`. */
   onChange: (value: string) => void;
   /** The glyph on the decimal key — "," where the host shows a comma (AmountInput
-   *  in fr-CH, kastlan 40). The key still inserts a dot; the host's text is dot-form
-   *  underneath and `sanitizeLive` reads either. */
+   *  in fr-CH, kastlan 40). With "," the key inserts a comma and the text is handed
+   *  back unsanitized, for the host to read by its locale (keksdose G1). */
   decimalMark?: "." | ",";
+  /** "=": the evaluated result, dot-decimal. Default `onChange`. A host that reads
+   *  typed text by the locale's marks takes it apart from keystrokes, since a result
+   *  like "1.234" is a decimal and never a grouped thousand. */
+  onResult?: (value: string) => void;
   /** Fired on "Done": the host blurs the input, which commits (evaluates) and
    * unmounts the sheet via its existing blur handler. */
   onDone: () => void;
@@ -185,11 +190,15 @@ export function NumberPadSheet({
   const result = evaluateExpression(value);
   const preview = result !== null && formatResult(result) !== value.trim() ? `= ${formatResult(result)}` : "";
 
-  const insert = (ch: string) => onChange(sanitizeLive(value + ch));
+  // With a "," mark the host keeps the typist's own text (AmountInput, keksdose G1):
+  // the key inserts the comma it shows, and the host, not this pad, decides which mark
+  // is the decimal one — sanitizing here would fold a grouping "." into a decimal.
+  const insert = (ch: string) =>
+    onChange(decimalMark === "," ? value + (ch === "." ? "," : ch) : sanitizeLive(value + ch));
   const backspace = () => onChange(value.slice(0, -1));
   const clearAll = () => onChange("");
   const equals = () => {
-    if (result !== null) onChange(formatResult(result));
+    if (result !== null) (onResult ?? onChange)(formatResult(result));
   };
 
   const sheet = (

package/src/components/text.tsx

@@ -58,7 +58,8 @@ export type SectionLabelVariant = "plain" | "band";
 
 /** The band's own type and box, per size — spelled out rather than merged over
  *  {@link SECTION_LABEL_CLASS}, so the result does not hang on tailwind-merge telling
- *  a font-size `text-[…]` from a colour `text-[var(…)]`. */
+ *  a font-size arbitrary `text-` value from a colour one. (Not spelt out as class
+ *  names here: Tailwind scans comments, and a literal one broke the showcase CSS.) */
 const SECTION_LABEL_BAND_CLASS: Record<SectionLabelSize, string> = {
   xs: "text-[10px]",
   md: "text-[11px]",

package/src/lib/format.ts

@@ -115,7 +115,9 @@ function numberOptions(o: FormatNumberBaseOptions): Intl.NumberFormatOptions {
 }
 
 function isMissing(value: number | null | undefined): value is null | undefined {
-  return value === null || value === undefined || Number.isNaN(value);
+  // ±Infinity too (lenkbank, adopting 0.13): a division by zero upstream is a missing
+  // figure, and "∞" printed in a money or measurement column reads like data.
+  return value === null || value === undefined || !Number.isFinite(value);
 }
 
 /** A number in `locale`: "1,234.5", "1.234,5", "1’234.5" — with `unit`, "3.400 N". */

package/src/rhf/fields.tsx

@@ -545,7 +545,9 @@ export type RhfMoneyFieldProps<
   /** What an emptied field stores when `valueAs` is `"number"`. Default `null`. */
   emptyValue?: null | "";
   /** Decimals the amount settles to on blur, Enter or a calculator result. Default:
-   *  the currency's minor unit (CHF 2, JPY 0). See {@link AmountInput}'s `digits`. */
+   *  the currency's minor unit (CHF 2, JPY 0). ⚠️ A unit price or a rate needs its
+   *  column's scale here (`digits={4}` for 1.789 €/l), or it is stored rounded to
+   *  cents without a word (keksdose G2). See {@link AmountInput}'s `digits`. */
   digits?: number;
   /** Clamp the settled amount (a release capped at the deposit's balance). Validate
    *  with `rules` as well if a clamp needs explaining. */