@cosmicdrift/kumiko-renderer-web 0.186.3 → 0.188.0

package/src/__tests__/test-utils.tsx

@@ -21,6 +21,7 @@ import {
 } from "@cosmicdrift/kumiko-headless";
 import {
   createStaticLocaleResolver,
+  type DraftStorage,
   kumikoDefaultTranslations,
   type LiveEventSubscriber,
   LiveEventsProvider,
@@ -163,4 +164,27 @@ export function createMockDispatcher(options: MockDispatcherOptions = {}): Dispa
   };
 }
 
+// ---------------------------------------------------------------------------
+// Fake-DraftStorage-Helper
+// ---------------------------------------------------------------------------
+
+/** In-memory DraftStorage for tests that need RenderEdit's create-mode
+ *  draftId to survive a same-tab remount (issue #1913) — the same role
+ *  `sessionStorage` plays for `createBrowserDraftStorage()` in production.
+ *  Fresh Map per call, so tests stay isolated from one another; wrap the
+ *  SAME instance around both renders of a "simulated reload" test to prove
+ *  persistence across the remount. */
+export function createFakeDraftStorage(): DraftStorage {
+  const store = new Map<string, string>();
+  return {
+    getDraftId: (screenId) => store.get(screenId) ?? null,
+    setDraftId: (screenId, draftId) => {
+      store.set(screenId, draftId);
+    },
+    clearDraftId: (screenId) => {
+      store.delete(screenId);
+    },
+  };
+}
+
 export * from "@testing-library/react";

package/src/__tests__/wizard-form-validation.test.tsx

@@ -0,0 +1,73 @@
+// fw#1910: the auto-wired entityEdit path never set RenderEdit's `schema`
+// prop, so the wizard's per-step "Next" validation was a no-op — a
+// required field left empty on step 1 still advanced to step 2. This test
+// covers the fix end to end (KumikoScreen → EntityEditCreateBody →
+// RenderEdit) with real DOM primitives, not a hand-rolled unit call.
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
+import { DispatcherProvider, KumikoScreen } from "@cosmicdrift/kumiko-renderer";
+import userEvent from "@testing-library/user-event";
+import { createMockDispatcher, render, screen } from "./test-utils";
+
+const profileEntity = {
+  fields: {
+    fullName: { type: "text", required: true },
+    email: { type: "text", required: false },
+  },
+} as unknown as EntityDefinition;
+
+const wizardScreen: EntityEditScreenDefinition = {
+  id: "profile-edit",
+  type: "entityEdit",
+  entity: "profile",
+  layout: {
+    mode: "wizard",
+    sections: [
+      { title: "Step 1", fields: ["fullName"] },
+      { title: "Step 2", fields: ["email"] },
+    ],
+  },
+};
+
+const schema: FeatureSchema = {
+  featureName: "demo",
+  entities: { profile: profileEntity },
+  screens: [wizardScreen],
+};
+
+function renderWizard() {
+  return render(
+    <DispatcherProvider dispatcher={createMockDispatcher()}>
+      <KumikoScreen schema={schema} qn="demo:screen:profile-edit" />
+    </DispatcherProvider>,
+  );
+}
+
+describe("entityEdit wizard — presence validation on Next (fw#1910)", () => {
+  test("empty required field blocks the step transition and shows a field error", async () => {
+    renderWizard();
+
+    await userEvent.click(screen.getByTestId("render-edit-wizard-next"));
+
+    expect(screen.getByTestId("render-edit-wizard-step-label").textContent).toContain("1");
+    expect(screen.getByTestId("field-fullName-errors")).toBeTruthy();
+    // Step 2's field never mounts — the transition was blocked.
+    expect(document.querySelector("#kumiko-edit-email")).toBeNull();
+  });
+
+  test("filling the required field allows Next to advance to step 2", async () => {
+    const { container } = renderWizard();
+
+    const fullNameInput = container.querySelector("#kumiko-edit-fullName");
+    expect(fullNameInput).toBeTruthy();
+    await userEvent.type(fullNameInput as Element, "Ada Lovelace");
+    await userEvent.click(screen.getByTestId("render-edit-wizard-next"));
+
+    expect(screen.getByTestId("render-edit-wizard-step-label").textContent).toContain("2");
+    expect(screen.queryByTestId("field-fullName-errors")).toBeNull();
+  });
+});

package/src/app/create-app.tsx

@@ -16,6 +16,8 @@ import {
   CustomScreensProvider,
   DashboardBodyProvider,
   DispatcherProvider,
+  type DraftStorage,
+  DraftStorageProvider,
   type ExtensionSectionComponent,
   ExtensionSectionsProvider,
   type FeatureSchema,
@@ -47,6 +49,7 @@ import { UpdateChecker } from "../version/update-checker";
 import { createBrowserLocaleResolver } from "./browser-locale";
 import { type ClientFeatureDefinition, stackWrappers } from "./client-plugin";
 import { WebDashboardBody } from "./dashboard-body";
+import { createBrowserDraftStorage } from "./draft-storage";
 import { useBrowserNavApi } from "./nav";
 import { NavProvidersProvider } from "./nav-providers-context";
 import { type ResolverComponent, ResolversProvider } from "./resolvers-context";
@@ -133,6 +136,13 @@ export type CreateKumikoAppOptions = {
   readonly schema?: AppSchema | FeatureSchema;
   readonly rootId?: string;
   readonly dispatcher?: Dispatcher;
+  /** RenderEdit's create-mode draftId storage (issue #1913) — where a
+   *  same-tab reload finds which of several parallel create-sessions on a
+   *  screen to resume. Default: `createBrowserDraftStorage()`
+   *  (sessionStorage-backed). Apps that don't want any client-side draftId
+   *  persistence can pass a no-op impl; RenderEdit still resolves via its
+   *  `form-draft:query:list` mount-time fallback either way. */
+  readonly draftStorage?: DraftStorage;
   readonly screenQn?: string;
   readonly translate?: Translate;
   readonly onRowClick?: (row: ListRowViewModel, entityName: string) => void;
@@ -274,6 +284,7 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
   }
 
   const dispatcher = options.dispatcher ?? createLiveDispatcher();
+  const draftStorage = options.draftStorage ?? createBrowserDraftStorage();
   const primitives: PrimitivesRegistry = { ...defaultPrimitives, ...(options.primitives ?? {}) };
   const liveEvents = createEventSourceLiveEvents();
 
@@ -389,26 +400,28 @@ export function createKumikoApp(options: CreateKumikoAppOptions = {}): { readonl
         <PrimitivesProvider value={primitives}>
           <AppFeaturesProvider features={app.features}>
             <DispatcherProvider dispatcher={dispatcher}>
-              <LiveEventsProvider value={liveEvents}>
-                <DashboardBodyProvider value={WebDashboardBody}>
-                  <CustomScreensProvider value={customScreens}>
-                    <ColumnRenderersProvider value={columnRenderers}>
-                      <ContentEditorsProvider value={contentEditors}>
-                        <ExtensionSectionsProvider value={extensionSectionComponents}>
-                          <NavProvidersProvider value={navProviders} entities={navEntities}>
-                            <ResolversProvider resolvers={resolvers}>
-                              <ToastProvider>
-                                <UpdateChecker />
-                                {stackWrappers(providers, stackWrappers(gates, screenNode))}
-                              </ToastProvider>
-                            </ResolversProvider>
-                          </NavProvidersProvider>
-                        </ExtensionSectionsProvider>
-                      </ContentEditorsProvider>
-                    </ColumnRenderersProvider>
-                  </CustomScreensProvider>
-                </DashboardBodyProvider>
-              </LiveEventsProvider>
+              <DraftStorageProvider value={draftStorage}>
+                <LiveEventsProvider value={liveEvents}>
+                  <DashboardBodyProvider value={WebDashboardBody}>
+                    <CustomScreensProvider value={customScreens}>
+                      <ColumnRenderersProvider value={columnRenderers}>
+                        <ContentEditorsProvider value={contentEditors}>
+                          <ExtensionSectionsProvider value={extensionSectionComponents}>
+                            <NavProvidersProvider value={navProviders} entities={navEntities}>
+                              <ResolversProvider resolvers={resolvers}>
+                                <ToastProvider>
+                                  <UpdateChecker />
+                                  {stackWrappers(providers, stackWrappers(gates, screenNode))}
+                                </ToastProvider>
+                              </ResolversProvider>
+                            </NavProvidersProvider>
+                          </ExtensionSectionsProvider>
+                        </ContentEditorsProvider>
+                      </ColumnRenderersProvider>
+                    </CustomScreensProvider>
+                  </DashboardBodyProvider>
+                </LiveEventsProvider>
+              </DraftStorageProvider>
             </DispatcherProvider>
           </AppFeaturesProvider>
         </PrimitivesProvider>

package/src/app/draft-storage.ts

@@ -0,0 +1,59 @@
+// Browser-backed DraftStorage default for createKumikoApp (issue #1913).
+//
+// Persists a create-mode draftId per screen in `sessionStorage` — same-tab
+// scope only (deliberately, unlike browser-locale.ts's localStorage): the
+// draft row itself already survives a new tab / cleared storage via
+// RenderEdit's `form-draft:query:list` mount-time fallback, so this is only
+// about not losing the draftId on an accidental same-tab reload.
+
+import type { DraftStorage } from "@cosmicdrift/kumiko-renderer";
+
+export type CreateBrowserDraftStorageOptions = {
+  /** sessionStorage-key prefix, one entry per screenId gets appended.
+   *  Default: `"kumiko:draft-id:"`. */
+  readonly storagePrefix?: string;
+};
+
+function keyFor(prefix: string, screenId: string): string {
+  return `${prefix}${screenId}`;
+}
+
+/** Default DraftStorage when createKumikoApp boots without one. Guards every
+ *  sessionStorage call — Safari private mode and storage-disabled browsers
+ *  throw on access, and a lost draftId just falls back to the `list` resume
+ *  path (same UX as a genuinely cleared storage), not a broken form. */
+export function createBrowserDraftStorage(
+  options: CreateBrowserDraftStorageOptions = {},
+): DraftStorage {
+  const prefix = options.storagePrefix ?? "kumiko:draft-id:";
+  return {
+    getDraftId: (screenId) => {
+      if (typeof sessionStorage === "undefined") return null;
+      try {
+        return sessionStorage.getItem(keyFor(prefix, screenId));
+      } catch {
+        return null;
+      }
+    },
+    setDraftId: (screenId, draftId) => {
+      // skip: no sessionStorage in this environment (SSR, disabled) — the
+      // draftId just stays in-memory-only for this render.
+      if (typeof sessionStorage === "undefined") return;
+      try {
+        sessionStorage.setItem(keyFor(prefix, screenId), draftId);
+      } catch {
+        // Persistence failure isn't fatal — the draft stays usable in the
+        // current tab, only a reload would lose the draftId.
+      }
+    },
+    clearDraftId: (screenId) => {
+      // skip: no sessionStorage in this environment — nothing to clear.
+      if (typeof sessionStorage === "undefined") return;
+      try {
+        sessionStorage.removeItem(keyFor(prefix, screenId));
+      } catch {
+        // skip: nothing to clean up if storage is unreachable.
+      }
+    },
+  };
+}

package/src/index.ts

@@ -36,6 +36,8 @@ export type {
   PrimitivesProviderProps,
   PrimitivesRegistry,
   RadiusTokens,
+  RenderEditChangeState,
+  RenderEditControls,
   RenderEditProps,
   RenderFieldProps,
   RenderListProps,
@@ -93,6 +95,8 @@ export type { CreateKumikoAppOptions } from "./app/create-app";
 export { createKumikoApp } from "./app/create-app";
 export type { CreatePublicSurfaceOptions, PublicRoute } from "./app/create-public-surface";
 export { createPublicSurface } from "./app/create-public-surface";
+export type { CreateBrowserDraftStorageOptions } from "./app/draft-storage";
+export { createBrowserDraftStorage } from "./app/draft-storage";
 export type { KumikoLinkProps } from "./app/nav";
 export { KumikoLink, useBrowserNavApi } from "./app/nav";
 export { PlainContentEditor } from "./app/plain-content-editor";

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,32 @@ 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-44");
+  });
+
+  test("a money column is wider than a decimal/number column (framework#1880)", () => {
+    const columns: readonly EmbeddedListColumn[] = [
+      { field: "quantity", label: "Qty", type: "number", required: true, derived: false },
+      { field: "amount", label: "Amount", type: "money", required: false, derived: true },
+    ];
+    const rows = [{ quantity: 1, amount: 100 }];
+    renderWithLocale(<EmbeddedListInput {...baseProps({ columns, rows })} />);
+    const desktop = screen.getByTestId("lines-desktop");
+    const headers = desktop.querySelectorAll("th");
+    expect(headers[0]?.className).toContain("w-36");
+    expect(headers[1]?.className).toContain("w-44");
+  });
+});

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

@@ -47,12 +47,13 @@ const FOCUSABLE_SELECTOR = "input:not([type=hidden]), button, [tabindex]";
 
 function columnWidthClass(type: EmbeddedListCellType): string {
   switch (type) {
-    case "money":
     case "number":
     case "decimal":
     case "date":
       return "w-36";
-    // Wider than a bare date — carries a date field plus a time input.
+    // Wider than a bare number: MoneyInput appends stepper buttons, timestamp
+    // carries a date field plus a time input.
+    case "money":
     case "timestamp":
       return "w-44";
     case "boolean":
@@ -473,7 +474,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

@@ -31,6 +31,7 @@ import {
   type HeadingProps,
   type InputProps,
   type LinkProps,
+  type ProgressProps,
   type SectionProps,
   type TextProps,
   useColumnRenderer,
@@ -80,6 +81,7 @@ import { Input as UiInput } from "../ui/input";
 import { Label as UiLabel } from "../ui/label";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
 import { Textarea } from "../ui/textarea";
+import { ProgressBar } from "../widgets/progress-bar";
 import { ComboboxInput } from "./combobox";
 import { DateInput } from "./date-input";
 import { DefaultDialog } from "./dialog";
@@ -623,6 +625,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 +648,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 +758,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 +773,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 +795,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 +819,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 +1304,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 +1324,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 +1339,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 +1471,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 +1490,7 @@ function DataTableCell({
   type,
   renderer,
   optionLabels,
+  onChange,
 }: DataTableCellProps): ReactNode {
   const componentRef = isComponentRendererRef(renderer);
   const ResolvedComponent = useColumnRenderer(componentRef?.name);
@@ -1473,7 +1503,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
@@ -1831,6 +1868,10 @@ function DefaultLink({
   );
 }
 
+function DefaultProgress({ value, testId }: ProgressProps): ReactNode {
+  return <ProgressBar value={value} testId={testId} />;
+}
+
 function DefaultHeading({ variant = "page", children, testId }: HeadingProps): ReactNode {
   // Page-Heading = h1, sehr selten in einer App (max 1 pro Screen).
   // Section-Heading = h2 mit uppercase + muted-foreground — derselbe
@@ -1924,4 +1965,5 @@ export const defaultPrimitives: CorePrimitives = {
   ConfigSourceBadge: DefaultConfigSourceBadge,
   ConfigCascadeView: DefaultConfigCascadeView,
   Link: DefaultLink,
+  Progress: DefaultProgress,
 };