@cosmicdrift/kumiko-renderer-web 0.186.0 → 0.186.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.186.0",
+  "version": "0.186.2",
   "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.186.0",
-    "@cosmicdrift/kumiko-headless": "0.186.0",
-    "@cosmicdrift/kumiko-renderer": "0.186.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.186.2",
+    "@cosmicdrift/kumiko-headless": "0.186.2",
+    "@cosmicdrift/kumiko-renderer": "0.186.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",

package/src/__tests__/field-hide-label.test.tsx

@@ -0,0 +1,44 @@
+import { describe, expect, test } from "bun:test";
+import { defaultPrimitives } from "../primitives";
+import { render } from "./test-utils";
+
+const { Field } = defaultPrimitives;
+
+describe("DefaultField hideLabel (fw#1870)", () => {
+  test("hideLabel kollabiert das Label visuell zu sr-only", () => {
+    const view = render(
+      <Field id="f1" label="Maps to" hideLabel testId="field">
+        <input id="f1" />
+      </Field>,
+    );
+    expect(view.getByText("Maps to").className).toContain("sr-only");
+  });
+
+  test("Label bleibt per htmlFor mit dem Control verknüpft, auch versteckt", () => {
+    const view = render(
+      <Field id="f1" label="Maps to" hideLabel testId="field">
+        <input id="f1" />
+      </Field>,
+    );
+    expect(view.getByLabelText("Maps to")).toBeTruthy();
+  });
+
+  test("ohne hideLabel bleibt das Label sichtbar (kein sr-only)", () => {
+    const view = render(
+      <Field id="f1" label="Maps to" testId="field">
+        <input id="f1" />
+      </Field>,
+    );
+    expect(view.getByText("Maps to").className).not.toContain("sr-only");
+  });
+
+  test("hideLabel wirkt auch bei layout=inline (BooleanField-Pfad)", () => {
+    const view = render(
+      <Field id="f1" label="Maps to" layout="inline" hideLabel testId="field">
+        <input id="f1" type="checkbox" />
+      </Field>,
+    );
+    expect(view.getByText("Maps to").className).toContain("sr-only");
+    expect(view.getByLabelText("Maps to")).toBeTruthy();
+  });
+});

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__/embedded-list-input.test.tsx

@@ -107,6 +107,30 @@ describe("EmbeddedListInput — header + rows", () => {
   });
 });
 
+describe("EmbeddedListInput — desktop/mobile are mutually exclusive mounts (#1854)", () => {
+  const rows = [{ description: "Widget A", quantity: 2, amount: 1000 }];
+
+  test("desktop viewport mounts only the table, not the card layout", () => {
+    renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
+    expect(screen.getByTestId("lines-desktop")).toBeTruthy();
+    expect(screen.queryByTestId("lines-mobile")).toBeNull();
+    expect(document.querySelectorAll('[data-cell-id="lines-0-amount"]').length).toBe(1);
+  });
+
+  test("mobile viewport mounts only the card layout, not the table", () => {
+    const originalWidth = window.innerWidth;
+    window.innerWidth = 500;
+    try {
+      renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
+      expect(screen.getByTestId("lines-mobile")).toBeTruthy();
+      expect(screen.queryByTestId("lines-desktop")).toBeNull();
+      expect(document.querySelectorAll('[data-cell-id="lines-0-amount"]').length).toBe(1);
+    } finally {
+      window.innerWidth = originalWidth;
+    }
+  });
+});
+
 describe("EmbeddedListInput — row mutation callbacks", () => {
   const rows = [
     { description: "A", quantity: 1, amount: 100 },

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/embedded-list-input.tsx

@@ -4,9 +4,13 @@
 // and reports interaction (cell edits, row add/remove/duplicate/move,
 // paste).
 //
-// Two parallel layouts (table for md+, cards below md) are mounted at
-// the same time and toggled via Tailwind's `hidden`/`md:hidden` — cheaper
-// than a JS media-query and keeps SSR/hydration output stable.
+// Only one of the two layouts (table for md+, cards below md) is mounted
+// at a time, picked via useIsMobile — mounting both and toggling with
+// `hidden`/`md:hidden` left two live inputs per cell sharing one DOM id
+// (#1854). useIsMobile reports `false` for the first render regardless of
+// viewport, so the `hidden md:block` / `md:hidden` classes stay on the
+// wrapper divs too: on a phone that first (wrong) render is desktop but
+// CSS-hidden, not a visible flash of the wrong layout.
 
 import type { FieldIssue } from "@cosmicdrift/kumiko-headless";
 import type {
@@ -31,6 +35,7 @@ import { Button as UiButton } from "../ui/button";
 import { Checkbox } from "../ui/checkbox";
 import { Input as UiInput } from "../ui/input";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
+import { useIsMobile } from "../ui/use-mobile";
 import { ComboboxInput } from "./combobox";
 import { DateInput } from "./date-input";
 import { formatMoney, MoneyInput } from "./money-input";
@@ -369,6 +374,7 @@ export function EmbeddedListInput({
   // callers/tests that predate #1839) keep getting the same "EUR" this
   // component always hardcoded.
   const effectiveCurrency = currency ?? "EUR";
+  const isMobile = useIsMobile();
   const containerRef = useRef<HTMLDivElement>(null);
   const [pendingFocusCellId, setPendingFocusCellId] = useState<string | undefined>(undefined);
 
@@ -464,120 +470,224 @@ export function EmbeddedListInput({
   return (
     <div ref={containerRef} data-testid={testId}>
       {/* ---- Desktop: table ---- */}
-      <div data-testid={testIdFor("desktop")} className="hidden md:block">
-        <div className="overflow-hidden rounded-lg border bg-card">
-          <Table>
-            <TableHeader className="bg-muted">
-              <TableRow className="hover:bg-transparent">
-                {columns.map((column) => (
-                  <TableHead
-                    key={column.field}
-                    className={cn(columnWidthClass(column.type), columnAlignClass(column.type))}
-                  >
-                    {column.label}
-                  </TableHead>
-                ))}
-                {showControls && <TableHead className="w-px text-right" aria-label="Actions" />}
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {rows.map((row, rowIndex) => {
-                const isLastRow = rowIndex === rows.length - 1;
-                const rowIssuesForRow = rowIssues?.[rowIndex];
-                return (
-                  <Fragment
-                    // biome-ignore lint/suspicious/noArrayIndexKey: rows have no caller-guaranteed stable id; every cell is fully controlled (value+onChange), so reordering doesn't rely on DOM node identity surviving between renders.
-                    key={rowIndex}
-                  >
-                    <TableRow data-testid={testIdFor(`row-${rowIndex}`)}>
-                      {columns.map((column, columnIndex) => {
-                        const isLastCell = isLastRow && columnIndex === columns.length - 1;
-                        const issues = cellIssues?.[`${rowIndex}.${column.field}`];
-                        return (
-                          <TableCell
-                            key={column.field}
-                            data-testid={testIdFor(`cell-${rowIndex}-${column.field}`)}
-                            className={columnWidthClass(column.type)}
-                            onPaste={
-                              onPasteCells !== undefined
-                                ? handlePaste(rowIndex, columnIndex)
-                                : undefined
-                            }
-                            onKeyDown={isLastCell ? handleLastCellKeyDown : undefined}
-                          >
-                            {renderCellControl({
-                              cellId: cellId(rowIndex, column.field),
-                              column,
-                              value: row[column.field],
-                              disabled: disabled === true,
-                              onChange: (value) => onCellChange(rowIndex, column.field, value),
-                              currency: effectiveCurrency,
-                            })}
+      {!isMobile && (
+        <div data-testid={testIdFor("desktop")} className="hidden md:block">
+          <div className="overflow-hidden rounded-lg border bg-card">
+            <Table>
+              <TableHeader className="bg-muted">
+                <TableRow className="hover:bg-transparent">
+                  {columns.map((column) => (
+                    <TableHead
+                      key={column.field}
+                      className={cn(columnWidthClass(column.type), columnAlignClass(column.type))}
+                    >
+                      {column.label}
+                    </TableHead>
+                  ))}
+                  {showControls && <TableHead className="w-px text-right" aria-label="Actions" />}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {rows.map((row, rowIndex) => {
+                  const isLastRow = rowIndex === rows.length - 1;
+                  const rowIssuesForRow = rowIssues?.[rowIndex];
+                  return (
+                    <Fragment
+                      // biome-ignore lint/suspicious/noArrayIndexKey: rows have no caller-guaranteed stable id; every cell is fully controlled (value+onChange), so reordering doesn't rely on DOM node identity surviving between renders.
+                      key={rowIndex}
+                    >
+                      <TableRow data-testid={testIdFor(`row-${rowIndex}`)}>
+                        {columns.map((column, columnIndex) => {
+                          const isLastCell = isLastRow && columnIndex === columns.length - 1;
+                          const issues = cellIssues?.[`${rowIndex}.${column.field}`];
+                          return (
+                            <TableCell
+                              key={column.field}
+                              data-testid={testIdFor(`cell-${rowIndex}-${column.field}`)}
+                              className={columnWidthClass(column.type)}
+                              onPaste={
+                                onPasteCells !== undefined
+                                  ? handlePaste(rowIndex, columnIndex)
+                                  : undefined
+                              }
+                              onKeyDown={isLastCell ? handleLastCellKeyDown : undefined}
+                            >
+                              {renderCellControl({
+                                cellId: cellId(rowIndex, column.field),
+                                column,
+                                value: row[column.field],
+                                disabled: disabled === true,
+                                onChange: (value) => onCellChange(rowIndex, column.field, value),
+                                currency: effectiveCurrency,
+                              })}
+                              <IssueMessages
+                                issues={issues}
+                                testId={testIdFor(`cell-${rowIndex}-${column.field}-errors`)}
+                              />
+                            </TableCell>
+                          );
+                        })}
+                        {showControls && (
+                          <TableCell className="text-right">
+                            <RowActions
+                              rowIndex={rowIndex}
+                              rowsLength={rows.length}
+                              minItems={minItems}
+                              maxItems={maxItems}
+                              onDuplicateRow={onDuplicateRow}
+                              onMoveRow={onMoveRow}
+                              onRemoveRow={onRemoveRow}
+                              duplicateLabel={duplicateLabel}
+                              moveUpLabel={moveUpLabel}
+                              moveDownLabel={moveDownLabel}
+                              removeLabel={removeLabel}
+                              testIdPrefix={testIdFor(`row-${rowIndex}`)}
+                            />
+                          </TableCell>
+                        )}
+                      </TableRow>
+                      {rowIssuesForRow !== undefined && rowIssuesForRow.length > 0 && (
+                        <TableRow>
+                          <TableCell colSpan={columns.length + (showControls ? 1 : 0)}>
                             <IssueMessages
-                              issues={issues}
-                              testId={testIdFor(`cell-${rowIndex}-${column.field}-errors`)}
+                              issues={rowIssuesForRow}
+                              testId={testIdFor(`row-${rowIndex}-issues`)}
                             />
                           </TableCell>
-                        );
-                      })}
-                      {showControls && (
-                        <TableCell className="text-right">
-                          <RowActions
-                            rowIndex={rowIndex}
-                            rowsLength={rows.length}
-                            minItems={minItems}
-                            maxItems={maxItems}
-                            onDuplicateRow={onDuplicateRow}
-                            onMoveRow={onMoveRow}
-                            onRemoveRow={onRemoveRow}
-                            duplicateLabel={duplicateLabel}
-                            moveUpLabel={moveUpLabel}
-                            moveDownLabel={moveDownLabel}
-                            removeLabel={removeLabel}
-                            testIdPrefix={testIdFor(`row-${rowIndex}`)}
-                          />
-                        </TableCell>
+                        </TableRow>
                       )}
-                    </TableRow>
-                    {rowIssuesForRow !== undefined && rowIssuesForRow.length > 0 && (
-                      <TableRow>
-                        <TableCell colSpan={columns.length + (showControls ? 1 : 0)}>
-                          <IssueMessages
-                            issues={rowIssuesForRow}
-                            testId={testIdFor(`row-${rowIndex}-issues`)}
-                          />
-                        </TableCell>
-                      </TableRow>
-                    )}
-                  </Fragment>
-                );
-              })}
-              {showControls && (
-                <TableRow className="hover:bg-transparent">
-                  <TableCell colSpan={columns.length + 1} className="p-2">
-                    <UiButton
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={onAddRow}
-                      disabled={addDisabled}
-                      data-testid={testIdFor("add")}
+                    </Fragment>
+                  );
+                })}
+                {showControls && (
+                  <TableRow className="hover:bg-transparent">
+                    <TableCell colSpan={columns.length + 1} className="p-2">
+                      <UiButton
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        onClick={onAddRow}
+                        disabled={addDisabled}
+                        data-testid={testIdFor("add")}
+                      >
+                        <Plus className="size-4" aria-hidden="true" />
+                        {addLabel}
+                      </UiButton>
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+            {hasTotals && (
+              <div
+                data-testid={testIdFor("totals")}
+                className="flex flex-wrap items-center justify-end gap-6 border-t bg-muted/30 px-4 py-3 text-sm"
+              >
+                {totals.map((total) => (
+                  <div key={total.field} className="flex items-baseline gap-2">
+                    <span className="text-muted-foreground">{total.label}</span>
+                    <span className="font-medium tabular-nums">
+                      {formatTotalValue(total, columns, effectiveCurrency)}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          <IssueMessages issues={listIssues} testId={testIdFor("list-issues")} />
+        </div>
+      )}
+
+      {/* ---- Mobile: cards ---- */}
+      {isMobile && (
+        <div data-testid={testIdFor("mobile")} className="md:hidden flex flex-col gap-3">
+          {rows.map((row, rowIndex) => {
+            const isLastRow = rowIndex === rows.length - 1;
+            const rowIssuesForRow = rowIssues?.[rowIndex];
+            return (
+              <div
+                // biome-ignore lint/suspicious/noArrayIndexKey: rows have no caller-guaranteed stable id; every cell is fully controlled (value+onChange), so reordering doesn't rely on DOM node identity surviving between renders.
+                key={rowIndex}
+                data-testid={testIdFor(`row-${rowIndex}`)}
+                className="flex flex-col gap-3 rounded-lg border bg-card p-4"
+              >
+                {columns.map((column, columnIndex) => {
+                  const isLastCell = isLastRow && columnIndex === columns.length - 1;
+                  const issues = cellIssues?.[`${rowIndex}.${column.field}`];
+                  return (
+                    // biome-ignore lint/a11y/noStaticElementInteractions: paste/keydown are delegated from the focusable cell control rendered inside, not direct interaction on this wrapper div.
+                    <div
+                      key={column.field}
+                      className="flex flex-col gap-1"
+                      onPaste={
+                        onPasteCells !== undefined ? handlePaste(rowIndex, columnIndex) : undefined
+                      }
+                      onKeyDown={isLastCell ? handleLastCellKeyDown : undefined}
                     >
-                      <Plus className="size-4" aria-hidden="true" />
-                      {addLabel}
-                    </UiButton>
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
+                      <span className="text-xs font-medium text-muted-foreground">
+                        {column.label}
+                      </span>
+                      {renderCellControl({
+                        cellId: cellId(rowIndex, column.field),
+                        column,
+                        value: row[column.field],
+                        disabled: disabled === true,
+                        onChange: (value) => onCellChange(rowIndex, column.field, value),
+                        currency: effectiveCurrency,
+                      })}
+                      <IssueMessages
+                        issues={issues}
+                        testId={testIdFor(`cell-${rowIndex}-${column.field}-errors`)}
+                      />
+                    </div>
+                  );
+                })}
+                {rowIssuesForRow !== undefined && rowIssuesForRow.length > 0 && (
+                  <IssueMessages
+                    issues={rowIssuesForRow}
+                    testId={testIdFor(`row-${rowIndex}-issues`)}
+                  />
+                )}
+                {showControls && (
+                  <div className="flex items-center justify-end gap-1 border-t pt-3">
+                    <RowActions
+                      rowIndex={rowIndex}
+                      rowsLength={rows.length}
+                      minItems={minItems}
+                      maxItems={maxItems}
+                      onDuplicateRow={onDuplicateRow}
+                      onMoveRow={onMoveRow}
+                      onRemoveRow={onRemoveRow}
+                      duplicateLabel={duplicateLabel}
+                      moveUpLabel={moveUpLabel}
+                      moveDownLabel={moveDownLabel}
+                      removeLabel={removeLabel}
+                      testIdPrefix={testIdFor(`row-${rowIndex}`)}
+                    />
+                  </div>
+                )}
+              </div>
+            );
+          })}
+          {showControls && (
+            <UiButton
+              type="button"
+              variant="outline"
+              onClick={onAddRow}
+              disabled={addDisabled}
+              data-testid={testIdFor("add")}
+            >
+              <Plus className="size-4" aria-hidden="true" />
+              {addLabel}
+            </UiButton>
+          )}
           {hasTotals && (
             <div
               data-testid={testIdFor("totals")}
-              className="flex flex-wrap items-center justify-end gap-6 border-t bg-muted/30 px-4 py-3 text-sm"
+              className="flex flex-col gap-2 rounded-lg border bg-muted/30 p-4 text-sm"
             >
               {totals.map((total) => (
-                <div key={total.field} className="flex items-baseline gap-2">
+                <div key={total.field} className="flex items-center justify-between">
                   <span className="text-muted-foreground">{total.label}</span>
                   <span className="font-medium tabular-nums">
                     {formatTotalValue(total, columns, effectiveCurrency)}
@@ -586,109 +696,9 @@ export function EmbeddedListInput({
               ))}
             </div>
           )}
+          <IssueMessages issues={listIssues} testId={testIdFor("list-issues")} />
         </div>
-        <IssueMessages issues={listIssues} testId={testIdFor("list-issues")} />
-      </div>
-
-      {/* ---- Mobile: cards ---- */}
-      <div data-testid={testIdFor("mobile")} className="md:hidden flex flex-col gap-3">
-        {rows.map((row, rowIndex) => {
-          const isLastRow = rowIndex === rows.length - 1;
-          const rowIssuesForRow = rowIssues?.[rowIndex];
-          return (
-            <div
-              // biome-ignore lint/suspicious/noArrayIndexKey: rows have no caller-guaranteed stable id; every cell is fully controlled (value+onChange), so reordering doesn't rely on DOM node identity surviving between renders.
-              key={rowIndex}
-              data-testid={testIdFor(`row-${rowIndex}`)}
-              className="flex flex-col gap-3 rounded-lg border bg-card p-4"
-            >
-              {columns.map((column, columnIndex) => {
-                const isLastCell = isLastRow && columnIndex === columns.length - 1;
-                const issues = cellIssues?.[`${rowIndex}.${column.field}`];
-                return (
-                  // biome-ignore lint/a11y/noStaticElementInteractions: paste/keydown are delegated from the focusable cell control rendered inside, not direct interaction on this wrapper div.
-                  <div
-                    key={column.field}
-                    className="flex flex-col gap-1"
-                    onPaste={
-                      onPasteCells !== undefined ? handlePaste(rowIndex, columnIndex) : undefined
-                    }
-                    onKeyDown={isLastCell ? handleLastCellKeyDown : undefined}
-                  >
-                    <span className="text-xs font-medium text-muted-foreground">
-                      {column.label}
-                    </span>
-                    {renderCellControl({
-                      cellId: cellId(rowIndex, column.field),
-                      column,
-                      value: row[column.field],
-                      disabled: disabled === true,
-                      onChange: (value) => onCellChange(rowIndex, column.field, value),
-                      currency: effectiveCurrency,
-                    })}
-                    <IssueMessages
-                      issues={issues}
-                      testId={testIdFor(`cell-${rowIndex}-${column.field}-errors`)}
-                    />
-                  </div>
-                );
-              })}
-              {rowIssuesForRow !== undefined && rowIssuesForRow.length > 0 && (
-                <IssueMessages
-                  issues={rowIssuesForRow}
-                  testId={testIdFor(`row-${rowIndex}-issues`)}
-                />
-              )}
-              {showControls && (
-                <div className="flex items-center justify-end gap-1 border-t pt-3">
-                  <RowActions
-                    rowIndex={rowIndex}
-                    rowsLength={rows.length}
-                    minItems={minItems}
-                    maxItems={maxItems}
-                    onDuplicateRow={onDuplicateRow}
-                    onMoveRow={onMoveRow}
-                    onRemoveRow={onRemoveRow}
-                    duplicateLabel={duplicateLabel}
-                    moveUpLabel={moveUpLabel}
-                    moveDownLabel={moveDownLabel}
-                    removeLabel={removeLabel}
-                    testIdPrefix={testIdFor(`row-${rowIndex}`)}
-                  />
-                </div>
-              )}
-            </div>
-          );
-        })}
-        {showControls && (
-          <UiButton
-            type="button"
-            variant="outline"
-            onClick={onAddRow}
-            disabled={addDisabled}
-            data-testid={testIdFor("add")}
-          >
-            <Plus className="size-4" aria-hidden="true" />
-            {addLabel}
-          </UiButton>
-        )}
-        {hasTotals && (
-          <div
-            data-testid={testIdFor("totals")}
-            className="flex flex-col gap-2 rounded-lg border bg-muted/30 p-4 text-sm"
-          >
-            {totals.map((total) => (
-              <div key={total.field} className="flex items-center justify-between">
-                <span className="text-muted-foreground">{total.label}</span>
-                <span className="font-medium tabular-nums">
-                  {formatTotalValue(total, columns, effectiveCurrency)}
-                </span>
-              </div>
-            ))}
-          </div>
-        )}
-        <IssueMessages issues={listIssues} testId={testIdFor("list-issues")} />
-      </div>
+      )}
     </div>
   );
 }

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}
@@ -215,12 +217,19 @@ function DefaultField({
   fieldAppendix,
   children,
   layout,
+  hideLabel,
   testId,
 }: FieldProps): ReactNode {
   const t = useTranslation();
   const hasError = issues !== undefined && issues.length > 0;
   const labelEl = (
-    <UiLabel htmlFor={id} className={hasError ? "text-destructive" : "text-foreground"}>
+    <UiLabel
+      htmlFor={id}
+      className={cn(
+        hasError ? "text-destructive" : "text-foreground",
+        hideLabel === true && "sr-only",
+      )}
+    >
       {label}
       {required === true && <span className="ml-0.5 text-destructive">*</span>}
     </UiLabel>
@@ -1348,7 +1357,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 +1399,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"

package/src/widgets/form-fields.tsx

@@ -9,6 +9,7 @@ export interface NumberFieldProps {
   readonly onChange: (v: number | undefined) => void;
   readonly required?: boolean;
   readonly disabled?: boolean;
+  readonly hideLabel?: boolean;
   readonly testId?: string;
 }
 
@@ -24,11 +25,12 @@ export function NumberField({
   onChange,
   required,
   disabled,
+  hideLabel,
   testId,
 }: NumberFieldProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
-    <Field id={id} label={label} required={required} testId={testId}>
+    <Field id={id} label={label} required={required} hideLabel={hideLabel} testId={testId}>
       <Input
         kind="number"
         id={id}
@@ -54,6 +56,7 @@ interface FieldBase {
   readonly name: string;
   readonly required?: boolean;
   readonly disabled?: boolean;
+  readonly hideLabel?: boolean;
   readonly testId?: string;
 }
 
@@ -75,11 +78,12 @@ export function TextField({
   disabled,
   placeholder,
   autoComplete,
+  hideLabel,
   testId,
 }: TextFieldProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
-    <Field id={id} label={label} required={required} testId={testId}>
+    <Field id={id} label={label} required={required} hideLabel={hideLabel} testId={testId}>
       <Input
         kind="text"
         id={id}
@@ -113,11 +117,12 @@ export function SelectField({
   options,
   required,
   disabled,
+  hideLabel,
   testId,
 }: SelectFieldProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
-    <Field id={id} label={label} required={required} testId={testId}>
+    <Field id={id} label={label} required={required} hideLabel={hideLabel} testId={testId}>
       <Input
         kind="select"
         id={id}
@@ -150,11 +155,12 @@ export function DateField({
   max,
   required,
   disabled,
+  hideLabel,
   testId,
 }: DateFieldProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
-    <Field id={id} label={label} required={required} testId={testId}>
+    <Field id={id} label={label} required={required} hideLabel={hideLabel} testId={testId}>
       <Input
         kind="date"
         id={id}
@@ -184,11 +190,19 @@ export function BooleanField({
   onChange,
   required,
   disabled,
+  hideLabel,
   testId,
 }: BooleanFieldProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
-    <Field id={id} label={label} required={required} layout="inline" testId={testId}>
+    <Field
+      id={id}
+      label={label}
+      required={required}
+      layout="inline"
+      hideLabel={hideLabel}
+      testId={testId}
+    >
       <Input
         kind="boolean"
         id={id}
@@ -218,11 +232,12 @@ export function TextareaField({
   rows,
   required,
   disabled,
+  hideLabel,
   testId,
 }: TextareaFieldProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
-    <Field id={id} label={label} required={required} testId={testId}>
+    <Field id={id} label={label} required={required} hideLabel={hideLabel} testId={testId}>
       <Input
         kind="textarea"
         id={id}
@@ -257,11 +272,12 @@ export function RangeField({
   step,
   required,
   disabled,
+  hideLabel,
   testId,
 }: RangeFieldProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
-    <Field id={id} label={label} required={required} testId={testId}>
+    <Field id={id} label={label} required={required} hideLabel={hideLabel} testId={testId}>
       <Input
         kind="range"
         id={id}
@@ -304,11 +320,12 @@ export function FileField({
   fieldName,
   required,
   disabled,
+  hideLabel,
   testId,
 }: FileFieldProps): ReactNode {
   const { Field, Input } = usePrimitives();
   return (
-    <Field id={id} label={label} required={required} testId={testId}>
+    <Field id={id} label={label} required={required} hideLabel={hideLabel} testId={testId}>
       <Input
         kind={variant}
         id={id}