@cosmicdrift/kumiko-renderer-web 0.185.0 → 0.186.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.185.0",
+  "version": "0.186.1",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -16,9 +16,9 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.185.0",
-    "@cosmicdrift/kumiko-headless": "0.185.0",
-    "@cosmicdrift/kumiko-renderer": "0.185.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.186.1",
+    "@cosmicdrift/kumiko-headless": "0.186.1",
+    "@cosmicdrift/kumiko-renderer": "0.186.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/primitives/__tests__/data-table-logic.test.ts

@@ -183,6 +183,13 @@ describe("defaultCellRender", () => {
     expect(result).not.toMatch(/[.,]\d\d$/);
   });
 
+  test("money → rehydrated { amount major, amountMinor } uses amountMinor (not major×100 wrong)", () => {
+    // rehydrateMoney (fw#1830): amount is major units, amountMinor is cents.
+    // formatMoney expects cents — using amount would show 100× too small.
+    const result = defaultCellRender({ amount: 119, currency: "EUR", amountMinor: 11900 }, "money");
+    expect(result.replace(/[^0-9]/g, "")).toBe("11900");
+  });
+
   test("money → unerwarteter Value-Shape fällt auf String zurück", () => {
     expect(defaultCellRender(45000, "money")).toBe("45000");
   });

package/src/primitives/__tests__/money-input.test.tsx

@@ -104,6 +104,23 @@ describe("MoneyInput — Render (Tier 2)", () => {
     expect(value).not.toContain("€");
   });
 
+  test("Focus selektiert den gesamten Draft (bewusstes Select-all-on-focus) — sonst hängt ein danach eingefügter Wert an statt sie zu ersetzen (#1856)", () => {
+    render(
+      <MoneyInput
+        id="amt"
+        name="amt"
+        value={1000}
+        onChange={() => {}}
+        currency="EUR"
+        locale="de-DE"
+      />,
+    );
+    fireEvent.focus(inputEl());
+    const input = inputEl();
+    expect(input.selectionStart).toBe(0);
+    expect(input.selectionEnd).toBe(input.value.length);
+  });
+
   test("Blur mit neuem Wert ruft onChange mit Minor-Units (Cents)", () => {
     const onChange = mock((_v: number | undefined) => {});
     render(

package/src/primitives/index.tsx

@@ -180,10 +180,12 @@ function DefaultBanner({
   actions,
   padded,
   testId,
+  id,
 }: BannerProps): ReactNode {
   const isError = variant === "error";
   const banner = (
     <div
+      id={id}
       data-testid={testId}
       role={isError ? "alert" : undefined}
       data-variant={variant}
@@ -1348,7 +1350,14 @@ export function isComponentRendererRef(renderer: unknown): { readonly name: stri
 // applyFormatSpec re-exported from headless (platform-agnostic).
 export { applyFormatSpec };
 
-function isMoneyValue(value: unknown): value is { amount: number; currency: string } {
+type MoneyCellValue = {
+  amount: number;
+  currency: string;
+  /** Exact integer cents from rehydrateMoney (fw#1830); preferred for display. */
+  amountMinor?: number;
+};
+
+function isMoneyValue(value: unknown): value is MoneyCellValue {
   return (
     typeof value === "object" &&
     value !== null &&
@@ -1383,7 +1392,12 @@ export function defaultCellRender(
     // falls back to guessLocale() (navigator.language), so the same amount
     // can render differently in a table vs. a form on the same screen.
     // Mid-term: pass the app locale down here too, analogous to render-field.
-    return formatMoney(value.amount, value.currency);
+    //
+    // formatMoney expects minor units. rehydrateMoney returns amount in MAJOR
+    // units plus amountMinor (cents). Prefer amountMinor when present; legacy
+    // shapes without it still carry cents in `amount`.
+    const minor = typeof value.amountMinor === "number" ? value.amountMinor : value.amount;
+    return formatMoney(minor, value.currency);
   }
   if (type === "select") {
     const raw = String(value);

package/src/primitives/money-input.tsx

@@ -15,7 +15,7 @@
 // Cent-genaue Steps will tippt halt im Focus-Modus.
 
 import { Minus, Plus } from "lucide-react";
-import { type FocusEvent, type ReactNode, useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn";
 
 export type MoneyInputProps = {
@@ -62,6 +62,7 @@ export function MoneyInput({
   // Raw-Edit-Buffer während Focus. Sonst würde jeder Tipp-Step durch
   // Math.round → format-Roundtrip jagen und der Cursor würde springen.
   const [draft, setDraft] = useState<string>("");
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const major = value === "" ? null : value / factor;
   const formatted = value === "" ? "" : formatMoney(value, currency, resolvedLocale);
@@ -79,11 +80,27 @@ export function MoneyInput({
 
   const editable = focused ? draft : toEditable(major);
 
-  const handleFocus = (_e: FocusEvent<HTMLInputElement>): void => {
+  const handleFocus = (): void => {
     setDraft(toEditable(major));
     setFocused(true);
   };
 
+  // Select-all-on-focus: deliberate, not just a Playwright accommodation.
+  // Focus always swaps the displayed value from the formatted string
+  // ("1.234,56 €") to the raw editable one ("1234,56"). Measured in a real
+  // browser: on this kind of value swap, the browser collapses the cursor
+  // to the *end* of the new value rather than preserving position — so
+  // without an explicit re-select, typing right after focus appends
+  // instead of replacing. That's what silently corrupted values set via
+  // Playwright's `.fill()` (framework#1856). It also matches standard
+  // money-input UX (immediate overtype on click), and sidesteps mapping a
+  // click position from the formatted view to the editable one, which has
+  // no well-defined equivalent once separators and the currency symbol
+  // are stripped.
+  useEffect(() => {
+    if (focused) inputRef.current?.select();
+  }, [focused]);
+
   const handleBlur = (): void => {
     setFocused(false);
     if (draft.trim() === "") {
@@ -103,6 +120,7 @@ export function MoneyInput({
   return (
     <div className="relative w-full">
       <input
+        ref={inputRef}
         id={id}
         name={name}
         type="text"