@cosmicdrift/kumiko-renderer-web 0.186.2 → 0.187.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.186.2",
+  "version": "0.187.0",
   "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.2",
-    "@cosmicdrift/kumiko-headless": "0.186.2",
-    "@cosmicdrift/kumiko-renderer": "0.186.2",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.187.0",
+    "@cosmicdrift/kumiko-headless": "0.187.0",
+    "@cosmicdrift/kumiko-renderer": "0.187.0",
     "@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__/primitives.test.tsx

@@ -8,7 +8,9 @@
 // abhängen werden.
 
 import { describe, expect, mock, test } from "bun:test";
+import { type ColumnRendererProps, ColumnRenderersProvider } from "@cosmicdrift/kumiko-renderer";
 import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
 import { defaultPrimitives, END_LABEL_MIN_ROWS } from "../primitives";
 import { PageSection, Stack } from "../primitives/layout";
 import { fireEvent, render, screen } from "./test-utils";
@@ -876,6 +878,125 @@ describe("DataTable", () => {
       expect(onRowClick).not.toHaveBeenCalled();
     });
   });
+
+  describe("highlighted column", () => {
+    const cols = [
+      { field: "name", label: "Name", type: "string", sortable: false },
+      { field: "y2026", label: "2026", type: "number", sortable: false, highlighted: true },
+    ] as const;
+    const oneRow = [{ id: "r1", values: { name: "Alice", y2026: 42 } }];
+
+    test("marks header + cell of the highlighted column, leaves others alone", () => {
+      render(<DataTable columns={cols} rows={oneRow} />);
+      expect(screen.getByTestId("column-y2026").getAttribute("data-highlighted")).toBe("true");
+      expect(screen.getByTestId("column-name").getAttribute("data-highlighted")).toBeNull();
+      expect(screen.getByTestId("cell-r1-y2026").getAttribute("data-highlighted")).toBe("true");
+      expect(screen.getByTestId("cell-r1-name").getAttribute("data-highlighted")).toBeNull();
+    });
+  });
+
+  describe("testId overrides", () => {
+    const cols = [{ field: "name", label: "Name", type: "string", sortable: false }] as const;
+    const oneRow = [{ id: "r1", values: { name: "Alice" } }];
+
+    test("getRowTestId/getCellTestId override the row-<id>/cell-<id>-<field> defaults", () => {
+      render(
+        <DataTable
+          columns={cols}
+          rows={oneRow}
+          getRowTestId={(row) => `own-row-${row.id}`}
+          getCellTestId={(row, field) => `own-cell-${row.id}-${field}`}
+        />,
+      );
+      expect(screen.getByTestId("own-row-r1")).not.toBeNull();
+      expect(screen.getByTestId("own-cell-r1-name")).not.toBeNull();
+      expect(screen.queryByTestId("row-r1")).toBeNull();
+    });
+
+    test("without overrides, defaults stay row-<id>/cell-<id>-<field>", () => {
+      render(<DataTable columns={cols} rows={oneRow} />);
+      expect(screen.getByTestId("row-r1")).not.toBeNull();
+      expect(screen.getByTestId("cell-r1-name")).not.toBeNull();
+    });
+  });
+
+  describe("onCellChange (editable cell)", () => {
+    function EditableSwatch({ value, column, onChange }: ColumnRendererProps): ReactNode {
+      return (
+        <input
+          data-testid={`edit-${column.field}`}
+          value={String(value)}
+          onChange={(e) => onChange?.(e.target.value)}
+        />
+      );
+    }
+
+    test("column-renderer receives onChange bound to (rowId, field, value) when onCellChange is set", () => {
+      const onCellChange = mock();
+      const cols = [
+        {
+          field: "name",
+          label: "Name",
+          type: "string",
+          sortable: false,
+          renderer: { react: { __component: "EditableSwatch" } },
+        },
+      ] as const;
+      render(
+        <ColumnRenderersProvider value={{ EditableSwatch }}>
+          <DataTable
+            columns={cols}
+            rows={[{ id: "r1", values: { name: "Alice" } }]}
+            onCellChange={onCellChange}
+          />
+        </ColumnRenderersProvider>,
+      );
+      fireEvent.change(screen.getByTestId("edit-name"), { target: { value: "Bob" } });
+      expect(onCellChange).toHaveBeenCalledWith("r1", "name", "Bob");
+    });
+
+    test("without onCellChange, the component renderer gets no onChange (read-only)", () => {
+      const cols = [
+        {
+          field: "name",
+          label: "Name",
+          type: "string",
+          sortable: false,
+          renderer: { react: { __component: "EditableSwatch" } },
+        },
+      ] as const;
+      render(
+        <ColumnRenderersProvider value={{ EditableSwatch }}>
+          <DataTable columns={cols} rows={[{ id: "r1", values: { name: "Alice" } }]} />
+        </ColumnRenderersProvider>,
+      );
+      // onChange is undefined → EditableSwatch's onChange?.(...) is a no-op;
+      // rendering itself must still succeed (no crash) with a stable value.
+      expect((screen.getByTestId("edit-name") as HTMLInputElement).value).toBe("Alice");
+    });
+
+    test("format-spec renderer ignores onCellChange — no crash, plain formatted text", () => {
+      const onCellChange = mock();
+      const cols = [
+        {
+          field: "amount",
+          label: "Amount",
+          type: "number",
+          sortable: false,
+          renderer: { format: "currency", symbol: "€" },
+        },
+      ] as const;
+      render(
+        <DataTable
+          columns={cols}
+          rows={[{ id: "r1", values: { amount: 42 } }]}
+          onCellChange={onCellChange}
+        />,
+      );
+      expect(screen.getByTestId("cell-r1-amount").textContent).toBe("42 €");
+      expect(onCellChange).not.toHaveBeenCalled();
+    });
+  });
 });
 
 describe("Form", () => {

package/src/primitives/__tests__/date-parse.test.ts

@@ -6,7 +6,16 @@
 
 import { describe, expect, test } from "bun:test";
 import { Temporal } from "temporal-polyfill";
-import { formatDateForInput, parseIso, parseTypedDate, toIso } from "../date-parse";
+import {
+  formatDateForInput,
+  formatDatePlaceholder,
+  parseIso,
+  parseTypedDate,
+  toIso,
+} from "../date-parse";
+
+const dePlaceholderLetters = { year: "J", month: "M", day: "T" };
+const enPlaceholderLetters = { year: "Y", month: "M", day: "D" };
 
 describe("parseIso", () => {
   test("valid yyyy-mm-dd → PlainDate (no TZ conversion)", () => {
@@ -135,3 +144,19 @@ describe("formatDateForInput", () => {
     if (roundtrip !== undefined) expect(toIso(roundtrip)).toBe("2026-04-25");
   });
 });
+
+// #1865: placeholder shows the locale's format pattern, not a hardcoded
+// example date that reads as an already-filled-in value.
+describe("formatDatePlaceholder", () => {
+  test("de-DE → day.month.year pattern with dot separator", () => {
+    expect(formatDatePlaceholder("de-DE", dePlaceholderLetters)).toBe("TT.MM.JJJJ");
+  });
+
+  test("en-US → month/day/year pattern with slash separator", () => {
+    expect(formatDatePlaceholder("en-US", enPlaceholderLetters)).toBe("MM/DD/YYYY");
+  });
+
+  test("en-GB → day/month/year pattern with slash separator", () => {
+    expect(formatDatePlaceholder("en-GB", enPlaceholderLetters)).toBe("DD/MM/YYYY");
+  });
+});

package/src/primitives/__tests__/embedded-list-input.test.tsx

@@ -605,3 +605,19 @@ describe("EmbeddedListInput — currency (#1839)", () => {
     expect(totals.textContent).toContain("€");
   });
 });
+
+describe("EmbeddedListInput — desktop table width (solon#107)", () => {
+  test("the table keeps min-w-max so columns don't shrink below their width classes", () => {
+    const rows = [{ description: "A", quantity: 1, amount: 100 }];
+    renderWithLocale(<EmbeddedListInput {...baseProps({ rows })} />);
+    const desktop = screen.getByTestId("lines-desktop");
+    const table = desktop.querySelector("table");
+    if (table === null) throw new Error("expected a <table> in the desktop layout");
+    expect(table.className).toContain("min-w-max");
+
+    const headers = desktop.querySelectorAll("th");
+    expect(headers[0]?.className).toContain("min-w-[10rem]");
+    expect(headers[1]?.className).toContain("w-36");
+    expect(headers[2]?.className).toContain("w-36");
+  });
+});

package/src/primitives/date-field.tsx

@@ -12,7 +12,14 @@ import { type ReactNode, useState } from "react";
 import { Temporal } from "temporal-polyfill";
 import { cn } from "../lib/cn";
 import { CalendarPopover } from "./calendar-popover";
-import { formatDateForInput, guessLocale, parseIso, parseTypedDate, toIso } from "./date-parse";
+import {
+  formatDateForInput,
+  formatDatePlaceholder,
+  guessLocale,
+  parseIso,
+  parseTypedDate,
+  toIso,
+} from "./date-parse";
 
 // CalendarPopover wraps react-day-picker, which only accepts native Date
 // objects — the PlainDate↔Date boundary conversion stays confined to
@@ -98,10 +105,11 @@ export function DateField({
         disabled={disabled}
         required={required}
         aria-invalid={hasError === true ? true : undefined}
-        placeholder={formatDateForInput(
-          Temporal.PlainDate.from({ year: 2026, month: 12, day: 31 }),
-          resolvedLocale,
-        )}
+        placeholder={formatDatePlaceholder(resolvedLocale, {
+          year: t("kumiko.field.dateField.placeholderYear"),
+          month: t("kumiko.field.dateField.placeholderMonth"),
+          day: t("kumiko.field.dateField.placeholderDay"),
+        })}
         onChange={(e) => {
           setDraft(e.target.value);
           commitTyped(e.target.value);

package/src/primitives/date-parse.ts

@@ -71,19 +71,23 @@ export function formatDateForInput(d: Temporal.PlainDate, locale: string): strin
 
 type DateSlot = "y" | "m" | "d";
 
-// Field order of the numeric locale format. de → [d,m,y], en-US →
-// [m,d,y], ISO-like locales → [y,m,d]. formatToParts runs over an epoch-
-// millis number instead of a Date object (guard-compliant) — timeZone:
+// Shared by localeDateOrder and formatDatePlaceholder — both need the
+// locale's numeric formatToParts breakdown of the same reference date.
+// epoch-millis input instead of a Date object (guard-compliant); timeZone:
 // "UTC" keeps the reference from shifting to the 1st depending on the
 // browser's TZ.
-function localeDateOrder(locale: string): readonly DateSlot[] {
+function localeDateParts(locale: string): Intl.DateTimeFormatPart[] {
   const refEpochMillis = activeTemporal()
     .PlainDate.from({ year: 2026, month: 1, day: 2 })
     .toZonedDateTime("UTC").epochMilliseconds;
+  return new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).formatToParts(refEpochMillis);
+}
+
+// Field order of the numeric locale format. de → [d,m,y], en-US →
+// [m,d,y], ISO-like locales → [y,m,d].
+function localeDateOrder(locale: string): readonly DateSlot[] {
   const order: DateSlot[] = [];
-  for (const part of new Intl.DateTimeFormat(locale, { timeZone: "UTC" }).formatToParts(
-    refEpochMillis,
-  )) {
+  for (const part of localeDateParts(locale)) {
     if (part.type === "year") order.push("y");
     else if (part.type === "month") order.push("m");
     else if (part.type === "day") order.push("d");
@@ -91,6 +95,25 @@ function localeDateOrder(locale: string): readonly DateSlot[] {
   return order;
 }
 
+// Locale-shaped placeholder pattern, e.g. de "TT.MM.JJJJ", en-US
+// "MM/DD/YYYY", en-GB "DD/MM/YYYY". Slot order and separator both come
+// from formatToParts — nothing hardcoded per locale. `letters` is one
+// character per slot (from i18n); repeated to the slot's digit count
+// (day/month 2, year 4).
+export function formatDatePlaceholder(
+  locale: string,
+  letters: { readonly year: string; readonly month: string; readonly day: string },
+): string {
+  return localeDateParts(locale)
+    .map((part) => {
+      if (part.type === "year") return letters.year.repeat(4);
+      if (part.type === "month") return letters.month.repeat(2);
+      if (part.type === "day") return letters.day.repeat(2);
+      return part.value;
+    })
+    .join("");
+}
+
 // Typed input → PlainDate. Accepts ISO (yyyy-mm-dd) directly, plus three
 // numeric tokens in locale order with any separator (".", "/", "-", " ").
 // Two-digit years → 2000s. Partial/invalid input → undefined (caller

package/src/primitives/embedded-list-input.tsx

@@ -473,7 +473,8 @@ export function EmbeddedListInput({
       {!isMobile && (
         <div data-testid={testIdFor("desktop")} className="hidden md:block">
           <div className="overflow-hidden rounded-lg border bg-card">
-            <Table>
+            {/* w-full on Table's <table> would shrink columns below columnWidthClass; min-w-max keeps declared widths and lets the wrapper scroll instead */}
+            <Table className="min-w-max">
               <TableHeader className="bg-muted">
                 <TableRow className="hover:bg-transparent">
                   {columns.map((column) => (

package/src/primitives/index.tsx

@@ -623,6 +623,9 @@ function DefaultDataTable({
   onFilterChange,
   onFilterReset,
   testId,
+  onCellChange,
+  getRowTestId,
+  getCellTestId,
 }: DataTableProps): ReactNode {
   // Toolbar-Wrapper: gemeinsamer Container für Toolbar+Tabelle damit
   // beide visuell zusammengehören. Toolbar ist NICHT sticky — Lists
@@ -643,7 +646,18 @@ function DefaultDataTable({
       // Page-Background (z.B. Cream) matchen Listen sonst nicht die Cards.
       <div className="overflow-hidden rounded-lg border bg-card">
         <Table data-testid={testId}>
-          {tableInner(columns, rows, onRowClick, sort, onSortChange, rowActions, rowActionMode)}
+          {tableInner(
+            columns,
+            rows,
+            onRowClick,
+            sort,
+            onSortChange,
+            rowActions,
+            rowActionMode,
+            onCellChange,
+            getRowTestId,
+            getCellTestId,
+          )}
         </Table>
       </div>
     );
@@ -742,6 +756,9 @@ function tableInner(
   onSortChange?: DataTableProps["onSortChange"],
   rowActions?: DataTableProps["rowActions"],
   rowActionMode?: DataTableProps["rowActionMode"],
+  onCellChange?: DataTableProps["onCellChange"],
+  getRowTestId?: DataTableProps["getRowTestId"],
+  getCellTestId?: DataTableProps["getCellTestId"],
 ): ReactNode {
   const hasActions = rowActions !== undefined && rowActions.length > 0;
   return (
@@ -754,6 +771,7 @@ function tableInner(
               field={col.field}
               label={col.label}
               sortable={col.sortable === true}
+              highlighted={col.highlighted === true}
               {...(sort !== undefined && sort !== null && { sort })}
               {...(onSortChange !== undefined && { onSortChange })}
             />
@@ -775,20 +793,21 @@ function tableInner(
         {rows.map((row) => (
           <TableRow
             key={row.id}
-            data-testid={`row-${row.id}`}
+            data-testid={getRowTestId?.(row) ?? `row-${row.id}`}
             onClick={onRowClick !== undefined ? () => onRowClick(row) : undefined}
             className={cn(onRowClick !== undefined && "cursor-pointer")}
           >
             {columns.map((col) => (
               <TableCell
                 key={col.field}
-                data-testid={`cell-${row.id}-${col.field}`}
+                data-testid={getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`}
+                data-highlighted={col.highlighted === true ? "true" : undefined}
                 // Cells truncaten lange Werte mit ellipsis statt umzu-
                 // brechen — Lists bleiben einzeilig + scannbar (Linear-
                 // Pattern). max-w-xs gibt eine vernünftige Default-
                 // Obergrenze; der Table-Container scrollt horizontal
                 // falls die Summe der Spalten zu breit wird.
-                className="max-w-xs truncate"
+                className={cn("max-w-xs truncate", col.highlighted === true && "bg-accent/40")}
                 title={cellTitle(row.values[col.field])}
               >
                 <DataTableCell
@@ -798,6 +817,9 @@ function tableInner(
                   type={col.type}
                   renderer={col.renderer}
                   {...(col.optionLabels !== undefined && { optionLabels: col.optionLabels })}
+                  {...(onCellChange !== undefined && {
+                    onChange: (value: unknown) => onCellChange(row.id, col.field, value),
+                  })}
                 />
               </TableCell>
             ))}
@@ -1280,12 +1302,14 @@ function SortableHeader({
   field,
   label,
   sortable,
+  highlighted,
   sort,
   onSortChange,
 }: {
   readonly field: string;
   readonly label: string;
   readonly sortable: boolean;
+  readonly highlighted?: boolean;
   readonly sort?: DataTableSort;
   readonly onSortChange?: (next: DataTableSort | null) => void;
 }): ReactNode {
@@ -1298,7 +1322,8 @@ function SortableHeader({
       <TableHead
         data-testid={`column-${field}`}
         data-sortable={sortable === true ? true : undefined}
-        className="px-4 text-muted-foreground"
+        data-highlighted={highlighted === true ? "true" : undefined}
+        className={cn("px-4 text-muted-foreground", highlighted === true && "bg-accent/40")}
       >
         {label}
       </TableHead>
@@ -1312,8 +1337,9 @@ function SortableHeader({
     <TableHead
       data-testid={`column-${field}`}
       data-sortable="true"
+      data-highlighted={highlighted === true ? "true" : undefined}
       aria-sort={ariaSort}
-      className="px-4 text-muted-foreground"
+      className={cn("px-4 text-muted-foreground", highlighted === true && "bg-accent/40")}
     >
       <button
         type="button"
@@ -1443,6 +1469,7 @@ type DataTableCellProps = {
   readonly type: string;
   readonly renderer?: unknown;
   readonly optionLabels?: Readonly<Record<string, string>>;
+  readonly onChange?: (value: unknown) => void;
 };
 
 // Cell-Renderer als Component (statt reiner Funktion) damit der
@@ -1461,6 +1488,7 @@ function DataTableCell({
   type,
   renderer,
   optionLabels,
+  onChange,
 }: DataTableCellProps): ReactNode {
   const componentRef = isComponentRendererRef(renderer);
   const ResolvedComponent = useColumnRenderer(componentRef?.name);
@@ -1473,7 +1501,14 @@ function DataTableCell({
   }
   if (componentRef !== undefined) {
     if (ResolvedComponent !== undefined) {
-      return <ResolvedComponent value={value} row={row} column={{ field }} />;
+      return (
+        <ResolvedComponent
+          value={value}
+          row={row}
+          column={{ field }}
+          {...(onChange !== undefined && { onChange })}
+        />
+      );
     }
     // Renderer im Schema referenziert, aber client-side kein Map-Eintrag —
     // typischer Fall: clientFeatures.columnRenderers vergessen oder