@cosmicdrift/kumiko-renderer 0.215.6 → 0.215.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.215.6",
+  "version": "0.215.7",
   "description": "Platform-agnostic React renderer for Kumiko screens. Contains the shared logic — primitives-contract, hooks, KumikoScreen, navigation & SSE abstractions — that any platform-specific renderer (web, native) composes. No DOM, no EventSource, no react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -15,8 +15,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.215.6",
-    "@cosmicdrift/kumiko-headless": "0.215.6",
+    "@cosmicdrift/kumiko-framework": "0.215.7",
+    "@cosmicdrift/kumiko-headless": "0.215.7",
     "react": "^19.2.6",
     "temporal-polyfill": "^0.3.2",
     "zod": "^4.4.3"
@@ -25,7 +25,7 @@
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
     "jsdom": "^29.1.1",
-    "@cosmicdrift/kumiko-locale-de": "0.215.6"
+    "@cosmicdrift/kumiko-locale-de": "0.215.7"
   },
   "repository": {
     "type": "git",

package/src/app/__tests__/list-filter-facets.test.tsx

@@ -238,4 +238,100 @@ describe("projectionList filter + facets (fw#2224)", () => {
       filters: [{ field: "active", op: "in", value: [true] }],
     });
   });
+
+  // fw#2373: labels without a translation key must pass through unchanged —
+  // otherwise shipping translate() alone regresses Members filters to raw keys
+  // when locale packs are missing.
+  test("projection facet labels without a translation key pass through unchanged", async () => {
+    queryCalls = [];
+    capturedProps = undefined;
+    const screen: ProjectionListScreenDefinition = {
+      id: "member-list",
+      type: "projectionList",
+      query: "ledger:query:member:list",
+      columns: ["tier", "active"],
+      facets: [
+        {
+          field: "tier",
+          type: "select",
+          label: "ledger.member.tier",
+          options: [
+            { value: "gold", label: "ledger.member.tier.gold" },
+            { value: "silver", label: "ledger.member.tier.silver" },
+          ],
+        },
+        {
+          field: "active",
+          type: "boolean",
+          label: "ledger.member.active",
+          trueLabel: "ledger.member.active.true",
+          falseLabel: "ledger.member.active.false",
+        },
+      ],
+    };
+    const schema: FeatureSchema = {
+      featureName: "ledger",
+      entities: {},
+      screens: [screen],
+    } as FeatureSchema;
+
+    renderScreen(schema, "ledger:screen:member-list");
+
+    await waitFor(() => expect(capturedProps).toBeDefined());
+    const props = getCapturedProps();
+    if (props === undefined) throw new Error("DataTable was not rendered");
+    expect(props.filterFacets).toEqual([
+      {
+        field: "tier",
+        label: "ledger.member.tier",
+        options: [
+          { value: "gold", label: "ledger.member.tier.gold" },
+          { value: "silver", label: "ledger.member.tier.silver" },
+        ],
+      },
+      {
+        field: "active",
+        label: "ledger.member.active",
+        options: [
+          { value: "true", label: "ledger.member.active.true" },
+          { value: "false", label: "ledger.member.active.false" },
+        ],
+      },
+    ]);
+  });
+
+  test("projection facet labels resolve when a translation key exists", async () => {
+    queryCalls = [];
+    capturedProps = undefined;
+    const screen: ProjectionListScreenDefinition = {
+      id: "member-list",
+      type: "projectionList",
+      query: "ledger:query:member:list",
+      columns: ["tier"],
+      facets: [
+        {
+          field: "tier",
+          type: "select",
+          label: "kumiko.actions.save",
+          options: [{ value: "gold", label: "kumiko.actions.cancel" }],
+        },
+      ],
+    };
+    const schema: FeatureSchema = {
+      featureName: "ledger",
+      entities: {},
+      screens: [screen],
+    } as FeatureSchema;
+
+    renderScreen(schema, "ledger:screen:member-list");
+
+    await waitFor(() => expect(capturedProps).toBeDefined());
+    const props = getCapturedProps();
+    if (props === undefined) throw new Error("DataTable was not rendered");
+    const facet = props.filterFacets?.[0];
+    expect(facet?.label).not.toBe("kumiko.actions.save");
+    expect(facet?.options?.[0]?.label).not.toBe("kumiko.actions.cancel");
+    expect(typeof facet?.label).toBe("string");
+    expect(facet?.label.length).toBeGreaterThan(0);
+  });
 });

package/src/app/kumiko-screen.tsx

@@ -954,22 +954,31 @@ function resolveEntityFacetSpecs(
 
 // projectionList adapter — a projectionList has no entity/i18n convention to
 // derive labels from, so ListFacetSpec carries every label explicitly
-// (fw#2224); this just reshapes it into the same ResolvedFacetSpec the
-// entityList adapter produces.
+// (fw#2224). Labels may be raw display strings or i18n keys; run them
+// through translate like entity facets (passthrough when the key is missing).
 function resolveProjectionFacetSpecs(
   facets: readonly ListFacetSpec[] | undefined,
+  translate: Translate,
 ): ResolvedFacetSpec[] {
   if (facets === undefined) return [];
   return facets.map((facet) =>
     facet.type === "select"
-      ? { field: facet.field, type: "select", label: facet.label, options: facet.options }
+      ? {
+          field: facet.field,
+          type: "select",
+          label: translate(facet.label),
+          options: facet.options.map((opt) => ({
+            value: opt.value,
+            label: translate(opt.label),
+          })),
+        }
       : {
           field: facet.field,
           type: "boolean",
-          label: facet.label,
+          label: translate(facet.label),
           options: [
-            { value: "true", label: facet.trueLabel },
-            { value: "false", label: facet.falseLabel },
+            { value: "true", label: translate(facet.trueLabel) },
+            { value: "false", label: translate(facet.falseLabel) },
           ],
         },
   );
@@ -1618,10 +1627,14 @@ function ProjectionListBody({
   const usePager = paginated && (screen.pagination ?? "pages") === "pages";
 
   // Facets (fw#2224) — a projectionList has no entity, so screen.facets is
-  // the only field inventory; resolveProjectionFacetSpecs reshapes its
-  // explicit labels into the same ResolvedFacetSpec the entityList adapter
-  // produces, so both feed the same buildFilterFacets/buildFilterPayload.
-  const facetSpecs = useMemo(() => resolveProjectionFacetSpecs(screen.facets), [screen.facets]);
+  // the only field inventory; resolveProjectionFacetSpecs reshapes +
+  // translates its explicit labels into the same ResolvedFacetSpec the
+  // entityList adapter produces, so both feed the same
+  // buildFilterFacets/buildFilterPayload.
+  const facetSpecs = useMemo(
+    () => resolveProjectionFacetSpecs(screen.facets, effectiveTranslate),
+    [screen.facets, effectiveTranslate],
+  );
   const filterPayload = useMemo(
     () =>
       buildFilterPayload(

package/src/components/__tests__/render-edit-action-button.test.tsx

@@ -0,0 +1,168 @@
+import { describe, expect, test } from "bun:test";
+import { fireEvent, render, screen as rtlScreen, waitFor } from "@testing-library/react";
+import type { ComponentType } from "react";
+import type { ButtonProps, DialogProps } from "../../primitives";
+import { RenderEditActionButton } from "../render-edit-action-button";
+import type { RenderEditAction } from "../render-edit-types";
+
+const TestButton: ComponentType<ButtonProps> = ({ children, onClick, testId, type, loading }) => (
+  <button
+    type={type ?? "button"}
+    data-testid={testId}
+    data-loading={loading ? "1" : "0"}
+    onClick={() => {
+      void onClick?.();
+    }}
+  >
+    {children}
+  </button>
+);
+
+const TestDialog: ComponentType<DialogProps> = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel,
+  variant,
+  onConfirm,
+  testId,
+}) =>
+  open ? (
+    <div data-testid={testId} data-variant={variant ?? "default"}>
+      <span data-testid={`${testId}-title`}>{title}</span>
+      {description !== undefined && (
+        <span data-testid={`${testId}-description`}>{description}</span>
+      )}
+      <button type="button" data-testid={`${testId}-confirm`} onClick={() => void onConfirm()}>
+        {confirmLabel ?? "Confirm"}
+      </button>
+      <button type="button" data-testid={`${testId}-cancel`} onClick={() => onOpenChange(false)}>
+        Cancel
+      </button>
+    </div>
+  ) : null;
+
+function renderAction(action: RenderEditAction, onError: (text: string | null) => void = () => {}) {
+  return render(
+    <RenderEditActionButton
+      action={action}
+      Button={TestButton}
+      Dialog={TestDialog}
+      onError={onError}
+    />,
+  );
+}
+
+describe("RenderEditActionButton", () => {
+  test("secondary action without confirm runs onPress immediately", async () => {
+    let pressed = 0;
+    renderAction({
+      id: "ping",
+      label: "Ping",
+      onPress: async () => {
+        pressed += 1;
+      },
+    });
+
+    expect(rtlScreen.queryByTestId("render-edit-action-ping-dialog")).toBeNull();
+    fireEvent.click(rtlScreen.getByTestId("render-edit-action-ping"));
+    await waitFor(() => expect(pressed).toBe(1));
+  });
+
+  test("explicit confirm text opens dialog; confirm runs onPress, cancel does not", async () => {
+    let pressed = 0;
+    renderAction({
+      id: "archive",
+      label: "Archive",
+      confirm: "Really archive?",
+      confirmLabel: "Yes, archive",
+      onPress: async () => {
+        pressed += 1;
+      },
+    });
+
+    fireEvent.click(rtlScreen.getByTestId("render-edit-action-archive"));
+    expect(rtlScreen.getByTestId("render-edit-action-archive-dialog")).toBeTruthy();
+    expect(rtlScreen.getByTestId("render-edit-action-archive-dialog-description").textContent).toBe(
+      "Really archive?",
+    );
+    expect(rtlScreen.getByTestId("render-edit-action-archive-dialog-confirm").textContent).toBe(
+      "Yes, archive",
+    );
+
+    fireEvent.click(rtlScreen.getByTestId("render-edit-action-archive-dialog-cancel"));
+    expect(rtlScreen.queryByTestId("render-edit-action-archive-dialog")).toBeNull();
+    expect(pressed).toBe(0);
+
+    fireEvent.click(rtlScreen.getByTestId("render-edit-action-archive"));
+    fireEvent.click(rtlScreen.getByTestId("render-edit-action-archive-dialog-confirm"));
+    await waitFor(() => expect(pressed).toBe(1));
+  });
+
+  test("danger style forces confirm dialog even without confirm text", async () => {
+    let pressed = 0;
+    renderAction({
+      id: "delete",
+      label: "Delete",
+      style: "danger",
+      onPress: async () => {
+        pressed += 1;
+      },
+    });
+
+    fireEvent.click(rtlScreen.getByTestId("render-edit-action-delete"));
+    const dialog = rtlScreen.getByTestId("render-edit-action-delete-dialog");
+    expect(dialog.getAttribute("data-variant")).toBe("danger");
+    expect(rtlScreen.queryByTestId("render-edit-action-delete-dialog-description")).toBeNull();
+    expect(pressed).toBe(0);
+
+    fireEvent.click(rtlScreen.getByTestId("render-edit-action-delete-dialog-confirm"));
+    await waitFor(() => expect(pressed).toBe(1));
+  });
+
+  test("onPress failure reports via onError", async () => {
+    const errors: Array<string | null> = [];
+    renderAction(
+      {
+        id: "boom",
+        label: "Boom",
+        onPress: async () => {
+          throw new Error("action exploded");
+        },
+      },
+      (text) => {
+        errors.push(text);
+      },
+    );
+
+    fireEvent.click(rtlScreen.getByTestId("render-edit-action-boom"));
+    await waitFor(() => expect(errors).toContain("action exploded"));
+    expect(errors[0]).toBeNull();
+  });
+
+  test("sets loading while onPress is in flight", async () => {
+    let resolvePress!: () => void;
+    const pressPromise = new Promise<void>((resolve) => {
+      resolvePress = resolve;
+    });
+    renderAction({
+      id: "slow",
+      label: "Slow",
+      onPress: () => pressPromise,
+    });
+
+    fireEvent.click(rtlScreen.getByTestId("render-edit-action-slow"));
+    await waitFor(() =>
+      expect(rtlScreen.getByTestId("render-edit-action-slow").getAttribute("data-loading")).toBe(
+        "1",
+      ),
+    );
+    resolvePress();
+    await waitFor(() =>
+      expect(rtlScreen.getByTestId("render-edit-action-slow").getAttribute("data-loading")).toBe(
+        "0",
+      ),
+    );
+  });
+});

package/src/components/__tests__/render-edit-submit-actions.test.tsx

@@ -0,0 +1,300 @@
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import type { DispatcherError, SubmitResult } from "@cosmicdrift/kumiko-headless";
+import { fireEvent, render, screen as rtlScreen, waitFor } from "@testing-library/react";
+import type { ComponentType, ReactNode } from "react";
+import { buildFormSchema } from "../../app/form-schema";
+import { createStaticLocaleResolver, LocaleProvider } from "../../i18n";
+import { kumikoDefaultTranslations } from "../../i18n-defaults";
+import {
+  type BannerProps,
+  type CorePrimitives,
+  PrimitivesProvider,
+  type SectionProps,
+  type TextProps,
+} from "../../primitives";
+import { RenderEdit, type RenderEditAction, type RenderEditProps } from "../render-edit";
+
+type Values = { name: string };
+
+const passChildren = ({ children }: { readonly children?: ReactNode }): ReactNode => children;
+
+const noop = () => {};
+
+const renderSection: ComponentType<SectionProps> = ({ testId, children }) => (
+  <div data-testid={testId}>{children}</div>
+);
+
+const testButton: ComponentType<{
+  children?: ReactNode;
+  onClick?: () => void;
+  testId?: string;
+  type?: "button" | "submit";
+  disabled?: boolean;
+}> = ({ children, onClick, testId, type, disabled }) => (
+  <button type={type ?? "button"} data-testid={testId} onClick={onClick} disabled={disabled}>
+    {children}
+  </button>
+);
+
+const testForm: ComponentType<{
+  children?: ReactNode;
+  actions?: ReactNode;
+  onSubmit?: () => void;
+}> = ({ children, actions, onSubmit }) => (
+  <form
+    onSubmit={(e) => {
+      e.preventDefault();
+      onSubmit?.();
+    }}
+  >
+    {children}
+    {actions}
+  </form>
+);
+
+const testInput: ComponentType<{
+  name?: string;
+  value?: unknown;
+  onChange?: (v: unknown) => void;
+}> = ({ name = "field", value, onChange }) => (
+  <input
+    aria-label={name}
+    data-testid={`input-${name}`}
+    value={typeof value === "string" ? value : ""}
+    onChange={(e) => onChange?.(e.target.value)}
+  />
+);
+
+const testBanner: ComponentType<BannerProps> = ({ children, testId }) => (
+  <div data-testid={testId}>{children}</div>
+);
+
+const testText: ComponentType<TextProps> = ({ children, testId }) => (
+  <span data-testid={testId}>{children}</span>
+);
+
+function testPrimitives(): CorePrimitives {
+  return {
+    Button: testButton,
+    Banner: testBanner,
+    Field: passChildren,
+    Input: testInput,
+    DataTable: noop,
+    Form: testForm,
+    Section: renderSection,
+    Card: passChildren,
+    Grid: passChildren,
+    GridCell: passChildren,
+    Text: testText,
+    Heading: noop,
+    Dialog: noop,
+    Modal: noop,
+    Lightbox: noop,
+    ConfigSourceBadge: noop,
+    ConfigCascadeView: noop,
+    Link: noop,
+  } as unknown as CorePrimitives;
+}
+
+function buildEntity(required = false): EntityDefinition {
+  return {
+    fields: {
+      name: {
+        type: "text",
+        maxLength: 200,
+        required,
+        searchable: false,
+        sortable: false,
+      },
+    },
+  };
+}
+
+function renderEdit(
+  screen: EntityEditScreenDefinition,
+  overrides: Partial<RenderEditProps<Values>> = {},
+  entity: EntityDefinition = buildEntity(),
+) {
+  return render(
+    <LocaleProvider
+      resolver={createStaticLocaleResolver({ locale: "en-US" })}
+      fallbackBundles={[kumikoDefaultTranslations]}
+    >
+      <PrimitivesProvider value={testPrimitives()}>
+        <RenderEdit
+          screen={screen}
+          entity={entity}
+          featureName="contacts"
+          initial={{ name: "" }}
+          {...overrides}
+        />
+      </PrimitivesProvider>
+    </LocaleProvider>,
+  );
+}
+
+const oneFieldScreen: EntityEditScreenDefinition = {
+  id: "contact-edit",
+  type: "entityEdit",
+  entity: "contact",
+  layout: { sections: [{ title: "Main", fields: ["name"] }] },
+};
+
+const writeFailure: DispatcherError = {
+  code: "conflict",
+  httpStatus: 409,
+  i18nKey: "errors.conflict",
+  message: "conflict",
+};
+
+describe("RenderEdit — submit path", () => {
+  test("changing a field and saving calls onSubmit with a successful result", async () => {
+    let submitted: SubmitResult<unknown> | undefined;
+    renderEdit(oneFieldScreen, {
+      customSubmit: async () => ({
+        validationBlocked: false,
+        isSuccess: true,
+        data: { id: "n1" },
+      }),
+      onSubmit: (result) => {
+        submitted = result;
+      },
+    });
+
+    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "Ferdinand" } });
+    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(submitted).toBeDefined());
+    expect(submitted?.isSuccess).toBe(true);
+  });
+
+  test("submit stays disabled while the form is unchanged and enables after edits", async () => {
+    const view = renderEdit(oneFieldScreen, {
+      customSubmit: async () => ({ validationBlocked: false, isSuccess: true, data: {} }),
+      onSubmit: () => {
+        throw new Error("must not fire while disabled");
+      },
+    });
+
+    const save = rtlScreen.getByTestId("render-edit-submit") as HTMLButtonElement;
+    expect(save.disabled).toBe(true);
+    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "X" } });
+    await waitFor(() => expect(save.disabled).toBe(false));
+    view.unmount();
+  });
+
+  test("failed customSubmit surfaces the form-error banner and notifies onSubmit", async () => {
+    let submitted: SubmitResult<unknown> | undefined;
+    let customCalls = 0;
+    renderEdit(oneFieldScreen, {
+      customSubmit: async () => {
+        customCalls += 1;
+        return { validationBlocked: false, isSuccess: false, error: writeFailure };
+      },
+      onSubmit: (result) => {
+        submitted = result;
+      },
+    });
+
+    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "Ferdinand" } });
+    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(rtlScreen.getByTestId("render-edit-form-error")).toBeTruthy());
+    // LocaleProvider resolves i18nKey → human copy; pin the error code via onSubmit.
+    expect(rtlScreen.getByTestId("render-edit-form-error-key").textContent?.length).toBeGreaterThan(
+      0,
+    );
+    expect(customCalls).toBe(1);
+    expect(submitted).toEqual({
+      validationBlocked: false,
+      isSuccess: false,
+      error: writeFailure,
+    });
+  });
+
+  test("schema validation blocks customSubmit and notifies validationBlocked", async () => {
+    let submitted: SubmitResult<unknown> | undefined;
+    let customCalls = 0;
+    const entity = buildEntity(true);
+    // RenderEdit only validates when a schema is passed (kumiko-screen builds it
+    // via buildFormSchema). Without it, entity.required is display-only here.
+    render(
+      <LocaleProvider
+        resolver={createStaticLocaleResolver({ locale: "en-US" })}
+        fallbackBundles={[kumikoDefaultTranslations]}
+      >
+        <PrimitivesProvider value={testPrimitives()}>
+          <RenderEdit
+            screen={oneFieldScreen}
+            entity={entity}
+            featureName="contacts"
+            initial={{ name: "seed" }}
+            schema={buildFormSchema(entity, oneFieldScreen)}
+            customSubmit={async () => {
+              customCalls += 1;
+              return { validationBlocked: false, isSuccess: true, data: {} };
+            }}
+            onSubmit={(result) => {
+              submitted = result;
+            }}
+          />
+        </PrimitivesProvider>
+      </LocaleProvider>,
+    );
+
+    // Clear the required field; form stays dirty vs initial "seed".
+    fireEvent.change(rtlScreen.getByLabelText(/name/i), { target: { value: "" } });
+    await waitFor(() =>
+      expect((rtlScreen.getByTestId("render-edit-submit") as HTMLButtonElement).disabled).toBe(
+        false,
+      ),
+    );
+    fireEvent.click(rtlScreen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(submitted).toBeDefined());
+    expect(submitted).toEqual({ validationBlocked: true, isSuccess: false });
+    expect(customCalls).toBe(0);
+  });
+});
+
+describe("RenderEdit — custom actions", () => {
+  test("renders an action button and runs its handler on click", async () => {
+    let pressed = 0;
+    const actions: readonly RenderEditAction[] = [
+      {
+        id: "ping",
+        label: "Ping",
+        onPress: async () => {
+          pressed += 1;
+        },
+      },
+    ];
+    renderEdit(oneFieldScreen, { actions });
+
+    fireEvent.click(rtlScreen.getByTestId("render-edit-action-ping"));
+    await waitFor(() => expect(pressed).toBe(1));
+  });
+
+  test("action handler failure shows the action-error banner", async () => {
+    const actions: readonly RenderEditAction[] = [
+      {
+        id: "boom",
+        label: "Boom",
+        onPress: async () => {
+          throw new Error("action exploded");
+        },
+      },
+    ];
+    renderEdit(oneFieldScreen, { actions });
+
+    fireEvent.click(rtlScreen.getByTestId("render-edit-action-boom"));
+    await waitFor(() => expect(rtlScreen.getByTestId("render-edit-action-error")).toBeTruthy());
+    expect(rtlScreen.getByTestId("render-edit-action-error").textContent).toContain(
+      "action exploded",
+    );
+  });
+});

package/src/components/render-edit-action-button.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from "react";
+import { useState } from "react";
+import type { usePrimitives } from "../primitives";
+import type { RenderEditAction } from "./render-edit-types";
+
+export function RenderEditActionButton({
+  action,
+  Button,
+  Dialog,
+  onError,
+}: {
+  readonly action: RenderEditAction;
+  readonly Button: ReturnType<typeof usePrimitives>["Button"];
+  readonly Dialog: ReturnType<typeof usePrimitives>["Dialog"];
+  readonly onError: (text: string | null) => void;
+}): ReactNode {
+  const [busy, setBusy] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+
+  const trigger = async (): Promise<void> => {
+    setBusy(true);
+    onError(null);
+    try {
+      await action.onPress();
+    } catch (e) {
+      onError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const variant = action.style ?? "secondary";
+  // Same rule as RowActionWriteHandler: "danger" forces a confirm even
+  // without an explicit confirm key.
+  const needsConfirm = action.confirm !== undefined || action.style === "danger";
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant={variant}
+        loading={busy}
+        onClick={() => {
+          if (needsConfirm) {
+            setConfirmOpen(true);
+          } else {
+            void trigger();
+          }
+        }}
+        testId={`render-edit-action-${action.id}`}
+      >
+        {action.label}
+      </Button>
+      <Dialog
+        open={confirmOpen}
+        onOpenChange={setConfirmOpen}
+        title={action.label}
+        {...(action.confirm !== undefined && { description: action.confirm })}
+        confirmLabel={action.confirmLabel ?? action.label}
+        {...(action.style === "danger" && { variant: "danger" as const })}
+        onConfirm={trigger}
+        testId={`render-edit-action-${action.id}-dialog`}
+      />
+    </>
+  );
+}

package/src/components/render-edit-types.ts

@@ -0,0 +1,164 @@
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import type {
+  FormSnapshot,
+  FormValues,
+  SubmitResult,
+  Translate,
+} from "@cosmicdrift/kumiko-headless";
+import type { ReactNode } from "react";
+import type { z } from "zod";
+
+export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
+  readonly screen: EntityEditScreenDefinition;
+  readonly entity: EntityDefinition;
+  readonly featureName: string;
+  readonly initial: TValues;
+  /** Real entity id for extension-section mounts (set-value UI). Mount AND
+   *  persistExtensions resolve it via `resolveExtensionEntityId(entityIdProp,
+   *  vm.id)` — the same value, so the section doesn't mount editable against
+   *  one id while persist writes against another (or none at all).
+   *  Omitting (undefined) = fallback to `vm.id` (= values["id"]), which the
+   *  update form carries for the existing row. Explicit `null` = "no entity"
+   *  (create mode / no extension persistence). */
+  readonly entityId?: string | null;
+  /** Already-persisted extension values (e.g. `record.customFields`) for
+   *  extension-section mounts. Lets the section display its current stock
+   *  during edit. Only the update body provides this. */
+  readonly extensionInitialValues?: Readonly<Record<string, unknown>>;
+  /** Standard single-write submit path. Ignored when `customSubmit` is set
+   *  (configEdit screens dispatch multiple writes per submit, where a single
+   *  writeCommand makes no sense). */
+  readonly writeCommand?: string;
+  /** Override for the submit pipeline. When set, runs controller.validate()
+   *  and then customSubmit(snapshot) instead of controller.submit(). On
+   *  success the form state rebases so that isUnchanged/isDirty become false
+   *  again — without that, save button and banner stay stale. */
+  readonly customSubmit?: (snapshot: FormSnapshot<TValues>) => Promise<SubmitResult<unknown>>;
+  readonly translate?: Translate;
+  readonly ctx?: TCtx;
+  readonly schema?: z.ZodType;
+  readonly onSubmit?: (result: SubmitResult<unknown>) => void;
+  readonly payloadMode?: "values" | "changes";
+  readonly buildPayload?: (snapshot: FormSnapshot<TValues>) => unknown;
+  readonly onDelete?: () => Promise<void> | void;
+  readonly onCancel?: () => void;
+  readonly onReload?: () => void;
+  /** Copy-link action (issue #912) — only set in update mode (create mode
+   *  has no entity id yet, hence no permalink). The callback is already fully
+   *  bound (URL building + clipboard happen outside, in
+   *  `@cosmicdrift/kumiko-renderer-web`'s RoutedScreen — this platform-neutral
+   *  package must not touch `navigator`/`window`, see
+   *  guard-renderer-boundaries). undefined = no button. */
+  readonly onCopyLink?: () => Promise<void> | void;
+  /** Header action buttons, rendered before the built-in copy-link/
+   *  delete/cancel/save controls. Each callback is already fully
+   *  bound (screen-type/nav/dispatcher resolution happens in the caller,
+   *  same split as `onCopyLink`) — RenderEdit only wires the button, its
+   *  busy state and its confirm dialog. */
+  readonly actions?: readonly RenderEditAction[];
+  /** i18n key for the submit button. Default: "kumiko.actions.save".
+   *  Action forms (tier 2.7d) pass their screen.submitLabel here so that
+   *  "Save" can be replaced by domain-specific strings ("Approve" /
+   *  "Dispatch" / etc.). */
+  readonly submitLabel?: string;
+  /** Per-field extra content inline after the label (e.g.
+   *  ConfigSourceBadge). Called with the field name, returns a ReactNode or
+   *  undefined. */
+  readonly labelAppendix?: (fieldName: string) => ReactNode | undefined;
+  /** Per-field extra content below the input (e.g. ConfigCascadeView).
+   *  Called with the field name, returns a ReactNode or undefined. */
+  readonly fieldAppendix?: (fieldName: string) => ReactNode | undefined;
+  /** Controlled mode (issue #1887): fires on every values-snapshot change
+   *  (typing, `patch(...)` from outside) with the current values. `changes`
+   *  is the delta against the initial values — same semantics as
+   *  `payloadMode: "changes"` — so a caller never overwrites unseen fields.
+   *  `valid` is a pure dry-run parse against `schema` (not a
+   *  `controller.validate()` call), so it does not paint field errors into
+   *  the UI and can diverge from the currently rendered `snapshot.errors` —
+   *  always `true` without `schema`. A caller that patches a fresh object
+   *  reference on every call must not do so unconditionally: `setValues` is
+   *  a no-op when the merged value is reference-equal to the current one,
+   *  so only a converging patch settles instead of looping. Without this
+   *  prop, existing behavior is unchanged. `onControlsReady` is guaranteed
+   *  to have already fired by the time the mount-time `onChange` call
+   *  happens, so a caller patching dependent fields from inside `onChange`
+   *  never has to guard against `controls` being undefined. */
+  readonly onChange?: (state: RenderEditChangeState<TValues>) => void;
+  /** Controlled mode (issue #1887): called once after mount, hands the
+   *  caller `patch`/`validate`/`getValues` bound to this RenderEdit
+   *  instance — addressable from outside without a remount. `patch` merges
+   *  only the given keys (existing `controller.setValues` semantics),
+   *  values on unmentioned fields stay untouched. `validate` runs without a
+   *  write and reports field issues via `snapshot.errors` on the field
+   *  itself rather than as a summary banner. Without this prop, existing
+   *  behavior is unchanged. */
+  readonly onControlsReady?: (controls: RenderEditControls<TValues>) => void;
+  /** Renders only these fields (by `field` name from the layout) — section
+   *  order, title, and visibility still come from the layout, so the caller
+   *  doesn't duplicate its shape. A section with no fields left after
+   *  filtering is dropped entirely (not rendered empty). Submit validation
+   *  is scoped to the actually-rendered fields the same way — a required
+   *  field outside this list doesn't block submit. Omitting this prop keeps
+   *  unchanged behavior. Read once at mount for `controller.submit()`'s
+   *  validation scope (the underlying `useForm` controller is mount-lived);
+   *  rendering and `controls.validate()` do stay reactive to later changes. */
+  readonly fields?: readonly string[];
+  /** Locked state (issue #1896): every rendered field and the submit button
+   *  go visibly inactive, no write possible. For cases where input becomes
+   *  moot — e.g. Solon's editor pointing at an existing record instead of
+   *  creating a new one. Extension sections are out of scope: RenderEdit has
+   *  no way to force-disable an arbitrary registered component. Omitting
+   *  this prop keeps unchanged behavior.
+   *
+   *  ponytail: direct-consumer only — kumiko-screen.tsx's RenderEdit call
+   *  sites pass explicit prop lists without a spread and never forward
+   *  `disabled`, so a screen-driven app can't set the locked state today.
+   *  Upgrade path if that's needed: thread a screen-spec flag through to
+   *  `EntityEditCreateBody`/`EntityEditEditBody`. */
+  readonly disabled?: boolean;
+  /** Renders the fields without RenderEdit's own action bar (save, cancel,
+   *  delete, copy-link). For hosts that put those controls into their own
+   *  chrome — a drawer footer, a wizard shell — and drive the write through
+   *  `onControlsReady`'s `submit`. Omitting this prop keeps unchanged
+   *  behavior. */
+  readonly hideActions?: boolean;
+  /** "form" (default) — every field renders as its Input widget, disabled
+   *  when `field.readOnly`, unchanged behavior. "text" renders a
+   *  `field.readOnly` field as plain text instead of a disabled Input
+   *  (ProjectionDetailBody's read view, fw#2245) — editable fields are
+   *  unaffected either way, so this only changes forms that already have
+   *  readOnly fields. */
+  readonly valueDisplay?: "form" | "text";
+};
+
+export type RenderEditAction = {
+  readonly id: string;
+  readonly label: string;
+  readonly onPress: () => void | Promise<void>;
+  readonly style?: "primary" | "secondary" | "danger";
+  readonly confirm?: string;
+  readonly confirmLabel?: string;
+};
+
+export type RenderEditChangeState<TValues extends FormValues> = {
+  readonly values: TValues;
+  readonly changes: Partial<TValues>;
+  readonly dirty: boolean;
+  readonly valid: boolean;
+  readonly submitting: boolean;
+};
+
+export type RenderEditControls<TValues extends FormValues> = {
+  readonly patch: (partial: Partial<TValues>) => void;
+  readonly validate: () => boolean;
+  readonly getValues: () => TValues;
+  /** Runs the same pipeline the built-in save button runs: validation,
+   *  `customSubmit`/`writeCommand`, extension-section persistence, draft
+   *  discard, state rebase. Unlike the button it carries no unchanged-form
+   *  guard — a host showing a pre-filled proposal must be able to accept it
+   *  untouched. */
+  readonly submit: () => Promise<void>;
+};

package/src/components/render-edit.tsx

@@ -1,5 +1,4 @@
 import type {
-  EntityDefinition,
   EntityEditScreenDefinition,
   FieldCondition,
 } from "@cosmicdrift/kumiko-framework/ui-types";
@@ -15,14 +14,21 @@ import type {
   EditSectionViewModel,
   FieldConditions,
   FieldIssue,
-  FormSnapshot,
   FormValues,
   SubmitResult,
-  Translate,
 } from "@cosmicdrift/kumiko-headless";
 import { computeEditViewModel } from "@cosmicdrift/kumiko-headless";
+import { RenderEditActionButton } from "./render-edit-action-button";
+import type { RenderEditProps } from "./render-edit-types";
+
+export type {
+  RenderEditAction,
+  RenderEditChangeState,
+  RenderEditControls,
+  RenderEditProps,
+} from "./render-edit-types";
+
 import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { z } from "zod";
 import { ExtensionFormRegistryProvider, useExtensionFormHost } from "../app/extension-form-submit";
 import { extensionSectionName, useExtensionSectionComponent } from "../app/extension-sections";
 import { useOptionalDispatcher } from "../context/dispatcher-context";
@@ -94,160 +100,6 @@ function mintDraftId(): string {
 // der dieselbe Primitives-Registry füllt kriegt das Form ohne weitere
 // Änderungen.
 
-export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
-  readonly screen: EntityEditScreenDefinition;
-  readonly entity: EntityDefinition;
-  readonly featureName: string;
-  readonly initial: TValues;
-  /** Echte entity-id für extension-section-Mounts (Set-Value-UI). Mount UND
-   *  persistExtensions lösen sie über `resolveExtensionEntityId(entityIdProp,
-   *  vm.id)` auf — denselben Wert, damit die Section nicht editierbar gegen eine
-   *  id mountet während Persist gegen eine andere (oder gar nicht) schreibt.
-   *  Weglassen (undefined) = Fallback auf `vm.id` (= values["id"]), das das
-   *  Update-Form für die bestehende Row trägt. Explizites `null` = "keine
-   *  entity" (create-mode / keine extension-Persistenz). */
-  readonly entityId?: string | null;
-  /** Bereits gespeicherte Extension-Werte (z.B. `record.customFields`) für
-   *  extension-section-Mounts. Erlaubt der Section, den Bestand beim Edit
-   *  anzuzeigen. Nur der Update-Body liefert das. */
-  readonly extensionInitialValues?: Readonly<Record<string, unknown>>;
-  /** Standard single-write Submit-Pfad. Ignoriert wenn `customSubmit`
-   *  gesetzt ist (configEdit-Screens dispatchen mehrere Writes pro
-   *  Submit, da macht writeCommand keinen Sinn). */
-  readonly writeCommand?: string;
-  /** Override für die Submit-Pipeline. Wenn gesetzt, läuft erst
-   *  controller.validate() und dann customSubmit(snapshot) statt
-   *  controller.submit(). On-success rebased der Form-State so dass
-   *  isUnchanged/isDirty wieder false werden — ohne das blieben
-   *  Save-Button und Banner stale. */
-  readonly customSubmit?: (snapshot: FormSnapshot<TValues>) => Promise<SubmitResult<unknown>>;
-  readonly translate?: Translate;
-  readonly ctx?: TCtx;
-  readonly schema?: z.ZodType;
-  readonly onSubmit?: (result: SubmitResult<unknown>) => void;
-  readonly payloadMode?: "values" | "changes";
-  readonly buildPayload?: (snapshot: FormSnapshot<TValues>) => unknown;
-  readonly onDelete?: () => Promise<void> | void;
-  readonly onCancel?: () => void;
-  readonly onReload?: () => void;
-  /** Copy-Link-Action (Issue #912) — nur in update-mode gesetzt (create-mode
-   *  hat noch keine entity-id, also keinen Permalink). Der Callback ist
-   *  bereits vollständig gebunden (URL-Bau + Clipboard passiert außerhalb,
-   *  in `@cosmicdrift/kumiko-renderer-web`'s RoutedScreen — dieses
-   *  platform-neutrale Package darf kein `navigator`/`window` anfassen,
-   *  siehe guard-renderer-boundaries). undefined = kein Button. */
-  readonly onCopyLink?: () => Promise<void> | void;
-  /** Header action buttons, rendered before the built-in copy-link/
-   *  delete/cancel/save controls. Each callback is already fully
-   *  bound (screen-type/nav/dispatcher resolution happens in the caller,
-   *  same split as `onCopyLink`) — RenderEdit only wires the button, its
-   *  busy state and its confirm dialog. */
-  readonly actions?: readonly RenderEditAction[];
-  /** i18n-key für den Submit-Button. Default: "kumiko.actions.save".
-   *  Action-Forms (Tier 2.7d) übergeben hier ihren screen.submitLabel,
-   *  damit "Speichern" durch domain-spezifischere Strings ersetzt
-   *  werden kann ("Genehmigen" / "Versenden" / etc.). */
-  readonly submitLabel?: string;
-  /** Pro-Field-Zusatz-Inhalt inline nach dem Label (z.B. ConfigSourceBadge).
-   *  Wird mit dem Field-Namen aufgerufen, returnt ReactNode oder
-   *  undefined. */
-  readonly labelAppendix?: (fieldName: string) => ReactNode | undefined;
-  /** Pro-Field-Zusatz-Inhalt unter dem Input (z.B. ConfigCascadeView).
-   *  Wird mit dem Field-Namen aufgerufen, returnt ReactNode oder
-   *  undefined. */
-  readonly fieldAppendix?: (fieldName: string) => ReactNode | undefined;
-  /** Controlled mode (issue #1887): fires on every values-snapshot change
-   *  (typing, `patch(...)` from outside) with the current values. `changes`
-   *  is the delta against the initial values — same semantics as
-   *  `payloadMode: "changes"` — so a caller never overwrites unseen fields.
-   *  `valid` is a pure dry-run parse against `schema` (not a
-   *  `controller.validate()` call), so it does not paint field errors into
-   *  the UI and can diverge from the currently rendered `snapshot.errors` —
-   *  always `true` without `schema`. A caller that patches a fresh object
-   *  reference on every call must not do so unconditionally: `setValues` is
-   *  a no-op when the merged value is reference-equal to the current one,
-   *  so only a converging patch settles instead of looping. Without this
-   *  prop, existing behavior is unchanged. `onControlsReady` is guaranteed
-   *  to have already fired by the time the mount-time `onChange` call
-   *  happens, so a caller patching dependent fields from inside `onChange`
-   *  never has to guard against `controls` being undefined. */
-  readonly onChange?: (state: RenderEditChangeState<TValues>) => void;
-  /** Controlled mode (issue #1887): called once after mount, hands the
-   *  caller `patch`/`validate`/`getValues` bound to this RenderEdit
-   *  instance — addressable from outside without a remount. `patch` merges
-   *  only the given keys (existing `controller.setValues` semantics),
-   *  values on unmentioned fields stay untouched. `validate` runs without a
-   *  write and reports field issues via `snapshot.errors` on the field
-   *  itself rather than as a summary banner. Without this prop, existing
-   *  behavior is unchanged. */
-  readonly onControlsReady?: (controls: RenderEditControls<TValues>) => void;
-  /** Renders only these fields (by `field` name from the layout) — section
-   *  order, title, and visibility still come from the layout, so the caller
-   *  doesn't duplicate its shape. A section with no fields left after
-   *  filtering is dropped entirely (not rendered empty). Submit validation
-   *  is scoped to the actually-rendered fields the same way — a required
-   *  field outside this list doesn't block submit. Omitting this prop keeps
-   *  unchanged behavior. Read once at mount for `controller.submit()`'s
-   *  validation scope (the underlying `useForm` controller is mount-lived);
-   *  rendering and `controls.validate()` do stay reactive to later changes. */
-  readonly fields?: readonly string[];
-  /** Locked state (issue #1896): every rendered field and the submit button
-   *  go visibly inactive, no write possible. For cases where input becomes
-   *  moot — e.g. Solon's editor pointing at an existing record instead of
-   *  creating a new one. Extension sections are out of scope: RenderEdit has
-   *  no way to force-disable an arbitrary registered component. Omitting
-   *  this prop keeps unchanged behavior.
-   *
-   *  ponytail: direct-consumer only — kumiko-screen.tsx's RenderEdit call
-   *  sites pass explicit prop lists without a spread and never forward
-   *  `disabled`, so a screen-driven app can't set the locked state today.
-   *  Upgrade path if that's needed: thread a screen-spec flag through to
-   *  `EntityEditCreateBody`/`EntityEditEditBody`. */
-  readonly disabled?: boolean;
-  /** Renders the fields without RenderEdit's own action bar (save, cancel,
-   *  delete, copy-link). For hosts that put those controls into their own
-   *  chrome — a drawer footer, a wizard shell — and drive the write through
-   *  `onControlsReady`'s `submit`. Omitting this prop keeps unchanged
-   *  behavior. */
-  readonly hideActions?: boolean;
-  /** "form" (default) — every field renders as its Input widget, disabled
-   *  when `field.readOnly`, unchanged behavior. "text" renders a
-   *  `field.readOnly` field as plain text instead of a disabled Input
-   *  (ProjectionDetailBody's read view, fw#2245) — editable fields are
-   *  unaffected either way, so this only changes forms that already have
-   *  readOnly fields. */
-  readonly valueDisplay?: "form" | "text";
-};
-
-export type RenderEditAction = {
-  readonly id: string;
-  readonly label: string;
-  readonly onPress: () => void | Promise<void>;
-  readonly style?: "primary" | "secondary" | "danger";
-  readonly confirm?: string;
-  readonly confirmLabel?: string;
-};
-
-export type RenderEditChangeState<TValues extends FormValues> = {
-  readonly values: TValues;
-  readonly changes: Partial<TValues>;
-  readonly dirty: boolean;
-  readonly valid: boolean;
-  readonly submitting: boolean;
-};
-
-export type RenderEditControls<TValues extends FormValues> = {
-  readonly patch: (partial: Partial<TValues>) => void;
-  readonly validate: () => boolean;
-  readonly getValues: () => TValues;
-  /** Runs the same pipeline the built-in save button runs: validation,
-   *  `customSubmit`/`writeCommand`, extension-section persistence, draft
-   *  discard, state rebase. Unlike the button it carries no unchanged-form
-   *  guard — a host showing a pre-filled proposal must be able to accept it
-   *  untouched. */
-  readonly submit: () => Promise<void>;
-};
-
 function toConditionValue<TValues extends FormValues, TCtx>(
   cond: FieldCondition,
 ): NonNullable<FieldConditions<TValues, TCtx>["visible"]> {
@@ -342,68 +194,6 @@ function ExtensionSectionMount({
 // render-list.tsx's ToolbarActionView (each RenderEditAction is
 // independently bound by the caller, there is no shared trigger pipeline
 // to hook into like the built-in onDelete/onSubmit paths have).
-function RenderEditActionButton({
-  action,
-  Button,
-  Dialog,
-  onError,
-}: {
-  readonly action: RenderEditAction;
-  readonly Button: ReturnType<typeof usePrimitives>["Button"];
-  readonly Dialog: ReturnType<typeof usePrimitives>["Dialog"];
-  readonly onError: (text: string | null) => void;
-}): ReactNode {
-  const [busy, setBusy] = useState(false);
-  const [confirmOpen, setConfirmOpen] = useState(false);
-
-  const trigger = async (): Promise<void> => {
-    setBusy(true);
-    onError(null);
-    try {
-      await action.onPress();
-    } catch (e) {
-      onError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setBusy(false);
-    }
-  };
-
-  const variant = action.style ?? "secondary";
-  // Same rule as RowActionWriteHandler: "danger" forces a confirm even
-  // without an explicit confirm key.
-  const needsConfirm = action.confirm !== undefined || action.style === "danger";
-
-  return (
-    <>
-      <Button
-        type="button"
-        variant={variant}
-        loading={busy}
-        onClick={() => {
-          if (needsConfirm) {
-            setConfirmOpen(true);
-          } else {
-            void trigger();
-          }
-        }}
-        testId={`render-edit-action-${action.id}`}
-      >
-        {action.label}
-      </Button>
-      <Dialog
-        open={confirmOpen}
-        onOpenChange={setConfirmOpen}
-        title={action.label}
-        {...(action.confirm !== undefined && { description: action.confirm })}
-        confirmLabel={action.confirmLabel ?? action.label}
-        {...(action.style === "danger" && { variant: "danger" as const })}
-        onConfirm={trigger}
-        testId={`render-edit-action-${action.id}-dialog`}
-      />
-    </>
-  );
-}
-
 export function RenderEdit<TValues extends FormValues, TCtx = unknown>(
   props: RenderEditProps<TValues, TCtx>,
 ): ReactNode {