@cosmicdrift/kumiko-renderer-web 0.208.2 → 0.209.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.208.2",
+  "version": "0.209.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.208.2",
-    "@cosmicdrift/kumiko-headless": "0.208.2",
-    "@cosmicdrift/kumiko-renderer": "0.208.2",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.209.0",
+    "@cosmicdrift/kumiko-headless": "0.209.0",
+    "@cosmicdrift/kumiko-renderer": "0.209.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -64,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.208.2"
+    "@cosmicdrift/kumiko-locale-de": "0.209.0"
   },
   "repository": {
     "type": "git",

package/src/__tests__/kumiko-screen.test.tsx

@@ -1258,6 +1258,128 @@ describe("KumikoScreen", () => {
     expect(writeCalls[0]).toEqual({ type: "tasks:write:task:sync", payload: { all: true } });
   });
 
+  // toolbarActions kind:"drawer" (fw#2225): mounts the referenced actionForm
+  // in the Drawer primitive instead of navigating — reuses ActionFormBody
+  // (no second form renderer), so submit/cancel/field-rendering all go
+  // through the same RenderEdit path entityEdit/actionForm already use.
+  describe("entityList toolbarActions drawer-kind (fw#2225)", () => {
+    const noteForm: ActionFormScreenDefinition = {
+      id: "task-note",
+      type: "actionForm",
+      handler: "tasks:write:task:note",
+      fields: { note: { type: "text", required: true } },
+      layout: { sections: [{ fields: ["note"] }] },
+    };
+    const screenWithDrawer: EntityListScreenDefinition = {
+      id: "task-list",
+      type: "entityList",
+      entity: "task",
+      columns: ["title"],
+      toolbarActions: [
+        { kind: "drawer", id: "add-note", label: "actions.addNote", screen: "task-note" },
+      ],
+    };
+
+    test("Click opens the Drawer with the referenced actionForm's fields", async () => {
+      const dispatcher = makeDispatcher({
+        query: (async () => ({
+          isSuccess: true,
+          data: { rows: [{ id: "r1", title: "x", count: 0, done: false }], nextCursor: null },
+        })) as unknown as Dispatcher["query"],
+      });
+      const user = userEvent.setup();
+      render(
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [screenWithDrawer, noteForm] }}
+            qn="tasks:screen:task-list"
+          />
+        </DispatcherProvider>,
+      );
+      await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+      expect(screen.queryByTestId("field-note")).toBeNull();
+
+      await user.click(screen.getByTestId("render-list-toolbar-action-add-note"));
+      expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+      expect(screen.getByTestId("field-note")).toBeTruthy();
+    });
+
+    test("Successful submit calls the actionForm's handler, closes the Drawer, and reloads the list", async () => {
+      const writeCalls: { type: string; payload: unknown }[] = [];
+      let queryCallCount = 0;
+      const dispatcher = makeDispatcher({
+        query: (async () => {
+          queryCallCount += 1;
+          return { isSuccess: true, data: { rows: [], nextCursor: null } };
+        }) as unknown as Dispatcher["query"],
+        write: (async (type: string, payload: unknown) => {
+          writeCalls.push({ type, payload });
+          return { isSuccess: true, data: {} };
+        }) as unknown as Dispatcher["write"],
+      });
+      const user = userEvent.setup();
+      render(
+        <DispatcherProvider dispatcher={dispatcher}>
+          <KumikoScreen
+            schema={{ ...schema, screens: [screenWithDrawer, noteForm] }}
+            qn="tasks:screen:task-list"
+          />
+        </DispatcherProvider>,
+      );
+      await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+      await user.click(screen.getByTestId("render-list-toolbar-action-add-note"));
+      expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+      const queryCallsBeforeSubmit = queryCallCount;
+
+      // field-note's testId sits on the Field wrapper (label + errors +
+      // control), not the <input> itself — grab the actual control to type
+      // into it, same DOM-level approach as other RenderEdit field tests.
+      const noteInput = screen.getByTestId("field-note").querySelector("input");
+      if (noteInput === null) throw new Error("expected an <input> inside field-note");
+      fireEvent.change(noteInput, { target: { value: "hello" } });
+      fireEvent.click(screen.getByTestId("render-edit-submit"));
+
+      await waitFor(() => expect(writeCalls.length).toBe(1));
+      expect(writeCalls[0]?.type).toBe("tasks:write:task:note");
+      await waitFor(() => expect(screen.queryByTestId("render-edit-form")).toBeNull());
+      await waitFor(() => expect(queryCallCount).toBeGreaterThan(queryCallsBeforeSubmit));
+    });
+
+    // Mirrors kind:"navigate": access is enforced when the target renders,
+    // not by hiding the toolbar button — same as a role-gated navigate
+    // target still shows its button but denies the destination.
+    test("User without access to the target screen: button still triggers, but sees Access denied instead of the form", async () => {
+      const restrictedNoteForm: ActionFormScreenDefinition = {
+        ...noteForm,
+        access: { roles: ["Admin"] },
+      };
+      const dispatcher = makeDispatcher({
+        query: (async () => ({
+          isSuccess: true,
+          data: { rows: [{ id: "r1", title: "x", count: 0, done: false }], nextCursor: null },
+        })) as unknown as Dispatcher["query"],
+      });
+      const user = userEvent.setup();
+      render(
+        <DispatcherProvider dispatcher={dispatcher}>
+          <UserRolesProvider roles={["Viewer"]}>
+            <KumikoScreen
+              schema={{ ...schema, screens: [screenWithDrawer, restrictedNoteForm] }}
+              qn="tasks:screen:task-list"
+            />
+          </UserRolesProvider>
+        </DispatcherProvider>,
+      );
+      await waitFor(() => expect(screen.queryByTestId("kumiko-screen-loading")).toBeNull());
+
+      const button = screen.getByTestId("render-list-toolbar-action-add-note");
+      await user.click(button);
+
+      expect(screen.getByTestId("kumiko-toolbar-drawer-access-denied")).toBeTruthy();
+      expect(screen.queryByTestId("field-note")).toBeNull();
+    });
+  });
+
   // Tier 2.7c: Screen-Level filter wird vom Schema in den Query-
   // Payload propagiert. Drei Buckets ("scheduled" / "active" / "done")
   // teilen sich denselben Query-Handler — der Filter unterscheidet

package/src/__tests__/projection-detail.test.tsx

@@ -50,15 +50,62 @@ describe("KumikoScreen / projectionDetail", () => {
     );
 
     await waitFor(() => screen.getByTestId("render-edit-form"));
-    const userIdInput = screen.getByTestId("field-userId").querySelector("input");
-    expect(userIdInput?.value).toBe("user-42");
-    expect(userIdInput?.disabled).toBe(true);
+    // fw#2245: projectionDetail defaults to text display — a readOnly field
+    // renders its value as plain text, not a disabled Input.
+    expect(screen.getByTestId("field-userId").textContent).toContain("user-42");
+    expect(screen.getByTestId("field-userId").querySelector("input")).toBeNull();
 
     // hasEditableSection() reads readOnly on every field — projectionDetail
     // forces it hard in the shim, so RenderEdit must never draw a Save button.
     expect(screen.queryByTestId("render-edit-submit")).toBeNull();
   });
 
+  // fw#2245 Teil 4: synthesizeProjectionDetailEntity (projection-detail-shim.ts)
+  // stamps every field as type:"text" — the shim has no access to the query's
+  // real field types. field.renderer (Teil 1) is the only way this screen
+  // type reaches real per-type formatting; without it a timestamp field would
+  // render its raw ISO string. Mirrors the sessions bundled feature's actual
+  // session-detail screen (feature.ts).
+  test("field.renderer formats a value past the shim's synthesized type:'text' field", async () => {
+    const timestampScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      layout: {
+        sections: [
+          {
+            title: "Session",
+            fields: ["userId", { field: "createdAt", renderer: { format: "timestamp" } }],
+          },
+        ],
+      },
+    };
+    const timestampSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [timestampScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={timestampSchema}
+          qn="sessions:screen:session-detail"
+          entityId="sess-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    const rendered = screen.getByTestId("field-value-createdAt").textContent;
+    expect(rendered).not.toBe("2026-07-01T00:00:00Z");
+    expect(rendered).not.toBe("");
+  });
+
   // synthesizeProjectionDetailScreen rebuilds `layout` from `sections` alone
   // (structural readOnly:true proof) — a naive rebuild would drop sibling
   // layout fields like `width` (#1676).
@@ -128,6 +175,106 @@ describe("KumikoScreen / projectionDetail", () => {
 
     await waitFor(() => screen.getByTestId("kumiko-screen-record-missing"));
   });
+
+  // fw#2245: a projectionDetail has no write path — its footer is Cancel-only
+  // and defaults to shown (pre-fw#2245 behavior) so existing screens without
+  // an explicit opt-in keep working; `hideActions: true` turns it off without
+  // losing back-navigation (shell-breadcrumb.ts also resolves listScreenId
+  // for this screen type, independent of the footer — see shell-breadcrumb.test.ts).
+  test("shows Cancel by default when listScreenId is set", async () => {
+    const withListScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      listScreenId: "session-list",
+    };
+    const withListSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [withListScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={withListSchema}
+          qn="sessions:screen:session-detail"
+          entityId="sess-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-cancel"));
+  });
+
+  test("hideActions:true hides the Cancel button", async () => {
+    const hiddenActionsScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      listScreenId: "session-list",
+      hideActions: true,
+    };
+    const hiddenActionsSchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [hiddenActionsScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={hiddenActionsSchema}
+          qn="sessions:screen:session-detail"
+          entityId="sess-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    expect(screen.queryByTestId("render-edit-cancel")).toBeNull();
+  });
+
+  test("valueDisplay:'form' opts back into the disabled-Input look", async () => {
+    const formDisplayScreen: ProjectionDetailScreenDefinition = {
+      ...detailScreen,
+      valueDisplay: "form",
+    };
+    const formDisplaySchema: FeatureSchema = {
+      featureName: "sessions",
+      entities: {},
+      screens: [formDisplayScreen],
+    };
+    const dispatcher: Dispatcher = createMockDispatcher({
+      query: (async () => ({
+        isSuccess: true,
+        data: { userId: "user-42", createdAt: "2026-07-01T00:00:00Z" },
+      })) as unknown as Dispatcher["query"],
+    });
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen
+          schema={formDisplaySchema}
+          qn="sessions:screen:session-detail"
+          entityId="sess-1"
+        />
+      </DispatcherProvider>,
+    );
+
+    await waitFor(() => screen.getByTestId("render-edit-form"));
+    const userIdInput = screen.getByTestId("field-userId").querySelector("input");
+    expect(userIdInput?.value).toBe("user-42");
+    expect(userIdInput?.disabled).toBe(true);
+  });
 });
 
 // fw#2166: `relatedList` sections run their own query against the shown
@@ -187,8 +334,7 @@ describe("KumikoScreen / projectionDetail relatedList section (fw#2166)", () =>
 
     // The shim's isFieldsEditSection flip must not regress the structural
     // readOnly proof from the first test above.
-    const userIdInput = screen.getByTestId("field-userId").querySelector("input");
-    expect(userIdInput?.disabled).toBe(true);
+    expect(screen.getByTestId("field-userId").querySelector("input")).toBeNull();
     expect(screen.queryByTestId("render-edit-submit")).toBeNull();
 
     const relatedCall = calls.find((c) => c.type === "sessions:query:user-session:payments");

package/src/__tests__/projection-list-actions.test.tsx

@@ -1,5 +1,8 @@
 import { describe, expect, mock, test } from "bun:test";
-import type { ProjectionListScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
+import type {
+  ActionFormScreenDefinition,
+  ProjectionListScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
 import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
 import type { FeatureSchema } from "@cosmicdrift/kumiko-renderer";
 import { DispatcherProvider, KumikoScreen } from "@cosmicdrift/kumiko-renderer";
@@ -129,3 +132,72 @@ describe("projectionList writeHandler-Actions", () => {
     expect(await screen.findByText("maintenance sync failed")).toBeTruthy();
   });
 });
+
+// toolbarActions kind:"drawer" (fw#2225) — same shared ToolbarDrawerHost as
+// entityList, wired into ProjectionListBody's toolbarActions builder.
+describe("projectionList toolbarActions drawer-kind (fw#2225)", () => {
+  const noteForm: ActionFormScreenDefinition = {
+    id: "maintenance-note",
+    type: "actionForm",
+    handler: "status:write:maintenance:note",
+    fields: { note: { type: "text", required: true } },
+    layout: { sections: [{ fields: ["note"] }] },
+  };
+  const screenWithDrawer: ProjectionListScreenDefinition = {
+    ...projectionScreen,
+    toolbarActions: [
+      {
+        kind: "drawer",
+        id: "add-note",
+        label: "status:action:add-note",
+        screen: "maintenance-note",
+      },
+    ],
+  };
+  const drawerSchema: FeatureSchema = {
+    featureName: "status",
+    entities: {},
+    screens: [screenWithDrawer, noteForm],
+  };
+
+  test("Click opens the Drawer; submit dispatches the handler, closes the Drawer, and reloads the list", async () => {
+    let queryCallCount = 0;
+    const write = mock(async (_type: string, _payload: unknown) => ({
+      isSuccess: true,
+      data: {},
+    }));
+    const dispatcher: Dispatcher = {
+      ...createMockDispatcher({
+        query: (async () => {
+          queryCallCount += 1;
+          return {
+            isSuccess: true,
+            data: { rows: [{ id: "m1", name: "DB-Upgrade" }], nextCursor: null },
+          };
+        }) as unknown as Dispatcher["query"],
+      }),
+      write: write as unknown as Dispatcher["write"],
+    };
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <KumikoScreen schema={drawerSchema} qn="status:screen:maintenance-list" />
+      </DispatcherProvider>,
+    );
+    await waitFor(() => expect(screen.getByText("DB-Upgrade")).toBeTruthy());
+    expect(screen.queryByTestId("field-note")).toBeNull();
+
+    fireEvent.click(screen.getByTestId("render-list-toolbar-action-add-note"));
+    expect(screen.getByTestId("render-edit-form")).toBeTruthy();
+    const queryCallsBeforeSubmit = queryCallCount;
+
+    const noteInput = screen.getByTestId("field-note").querySelector("input");
+    if (noteInput === null) throw new Error("expected an <input> inside field-note");
+    fireEvent.change(noteInput, { target: { value: "hello" } });
+    fireEvent.click(screen.getByTestId("render-edit-submit"));
+
+    await waitFor(() => expect(write).toHaveBeenCalledTimes(1));
+    expect(write.mock.calls[0]?.[0]).toBe("status:write:maintenance:note");
+    await waitFor(() => expect(screen.queryByTestId("render-edit-form")).toBeNull());
+    await waitFor(() => expect(queryCallCount).toBeGreaterThan(queryCallsBeforeSubmit));
+  });
+});

package/src/__tests__/render-edit-value-display.test.tsx

@@ -0,0 +1,101 @@
+import { describe, expect, test } from "bun:test";
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { RenderEdit } from "@cosmicdrift/kumiko-renderer";
+import { render, screen } from "./test-utils";
+
+// fw#2245 Teil 2: `RenderEditProps.valueDisplay` — "text" renders a
+// field.readOnly field as formatted plain text instead of a disabled Input.
+// Confined by construction: the prop defaults to "form" (old behavior)
+// at this generic component, ProjectionDetailBody is the only caller that
+// passes "text" by default (kumiko-screen.tsx) — every other RenderEdit
+// caller in the ecosystem keeps the disabled-Input look unless it opts in.
+
+const accountEntity = {
+  fields: {
+    name: { type: "text" },
+    active: { type: "boolean" },
+    balance: { type: "money" },
+  },
+} as unknown as EntityDefinition;
+
+function makeScreen(): EntityEditScreenDefinition {
+  return {
+    id: "accounts:screen:account-detail",
+    type: "entityEdit",
+    entity: "account",
+    layout: {
+      sections: [
+        {
+          fields: [
+            "name",
+            { field: "active", readOnly: true },
+            { field: "balance", readOnly: true },
+          ],
+        },
+      ],
+    },
+  };
+}
+
+const noopSubmit = async (): Promise<{
+  readonly isSuccess: true;
+  readonly validationBlocked: false;
+  readonly data: undefined;
+}> => ({ isSuccess: true, validationBlocked: false, data: undefined });
+
+describe("RenderEdit valueDisplay (fw#2245)", () => {
+  test('default ("form") keeps readOnly fields as disabled Inputs — unaffected callers stay unchanged', () => {
+    render(
+      <RenderEdit
+        screen={makeScreen()}
+        entity={accountEntity}
+        featureName="accounts"
+        initial={{ name: "Ada", active: true, balance: { amount: 12.5 } }}
+        customSubmit={noopSubmit}
+      />,
+    );
+
+    const activeInput = screen.getByTestId("field-active").querySelector("input");
+    expect(activeInput).not.toBeNull();
+    expect(activeInput?.disabled).toBe(true);
+  });
+
+  test('"text" renders readOnly fields as formatted plain text, no Input in the DOM', () => {
+    render(
+      <RenderEdit
+        screen={makeScreen()}
+        entity={accountEntity}
+        featureName="accounts"
+        initial={{ name: "Ada", active: true, balance: { amount: 12.5 } }}
+        customSubmit={noopSubmit}
+        valueDisplay="text"
+      />,
+    );
+
+    expect(screen.getByTestId("field-active").querySelector("input")).toBeNull();
+    expect(screen.getByTestId("field-value-active").textContent).toBe("✓");
+
+    expect(screen.getByTestId("field-balance").querySelector("input")).toBeNull();
+    expect(screen.getByTestId("field-value-balance").textContent).toContain("12.50");
+  });
+
+  test('"text" still leaves editable (non-readOnly) fields as live Inputs', () => {
+    render(
+      <RenderEdit
+        screen={makeScreen()}
+        entity={accountEntity}
+        featureName="accounts"
+        initial={{ name: "Ada", active: true, balance: { amount: 12.5 } }}
+        customSubmit={noopSubmit}
+        valueDisplay="text"
+      />,
+    );
+
+    const nameInput = screen.getByTestId("field-name").querySelector("input");
+    expect(nameInput).not.toBeNull();
+    expect(nameInput?.value).toBe("Ada");
+  });
+});

package/src/__tests__/render-field-renderer.test.tsx

@@ -0,0 +1,121 @@
+import { describe, expect, test } from "bun:test";
+import type {
+  EditFieldSpec,
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import {
+  type ColumnRendererProps,
+  ColumnRenderersProvider,
+  RenderEdit,
+} from "@cosmicdrift/kumiko-renderer";
+import type { ReactElement, ReactNode } from "react";
+import { render, screen } from "./test-utils";
+
+// fw#2245 Teil 1: `EditFieldSpec.renderer` (kumiko-types/src/screen.ts) is
+// validated and survives into the ViewModel (headless/view-model/edit.ts)
+// but render-field.tsx never read it — the same FieldRenderer mechanism
+// that already works for relatedList/entityList columns (render-list.tsx,
+// see render-list-column-renderer.test.tsx) was a no-op for header fields.
+
+const invoiceEntity = {
+  fields: {
+    title: { type: "text" },
+    status: { type: "text" },
+  },
+} as unknown as EntityDefinition;
+
+function makeScreen(statusField: EditFieldSpec): EntityEditScreenDefinition {
+  return {
+    id: "invoices:screen:invoice-detail",
+    type: "entityEdit",
+    entity: "invoice",
+    layout: {
+      sections: [{ fields: ["title", statusField] }],
+    },
+  };
+}
+
+const noopSubmit = async (): Promise<{
+  readonly isSuccess: true;
+  readonly validationBlocked: false;
+  readonly data: undefined;
+}> => ({ isSuccess: true, validationBlocked: false, data: undefined });
+
+function StatusBadge({ value, row, column }: ColumnRendererProps): ReactNode {
+  return (
+    <span data-testid="status-badge">
+      <span data-testid="status-badge-value">{String(value)}</span>
+      <span data-testid="status-badge-field">{column.field}</span>
+      <span data-testid="status-badge-row-title">{String(row["title"] ?? "")}</span>
+    </span>
+  );
+}
+
+function withRenderers(ui: ReactNode, map: Record<string, typeof StatusBadge>): ReactElement {
+  return <ColumnRenderersProvider value={map}>{ui}</ColumnRenderersProvider>;
+}
+
+describe("RenderField — field.renderer on a readOnly head field (fw#2245)", () => {
+  test("FormatSpec renderer formats the value instead of a disabled Input", () => {
+    render(
+      <RenderEdit
+        screen={makeScreen({
+          field: "status",
+          readOnly: true,
+          renderer: { format: "currency", symbol: "€" },
+        })}
+        entity={invoiceEntity}
+        featureName="invoices"
+        initial={{ title: "Alpha", status: "42" }}
+        customSubmit={noopSubmit}
+      />,
+    );
+
+    expect(screen.getByTestId("field-value-status").textContent).toBe("42 €");
+    expect(screen.getByTestId("field-status").querySelector("input")).toBeNull();
+  });
+
+  test("__component renderer mounts the registry component with value+row+column", () => {
+    render(
+      withRenderers(
+        <RenderEdit
+          screen={makeScreen({
+            field: "status",
+            readOnly: true,
+            renderer: { react: { __component: "StatusBadge" } },
+          })}
+          entity={invoiceEntity}
+          featureName="invoices"
+          initial={{ title: "Alpha", status: "shipped" }}
+          customSubmit={noopSubmit}
+        />,
+        { StatusBadge },
+      ),
+    );
+
+    expect(screen.getByTestId("status-badge")).toBeTruthy();
+    expect(screen.getByTestId("status-badge-value").textContent).toBe("shipped");
+    expect(screen.getByTestId("status-badge-field").textContent).toBe("status");
+    expect(screen.getByTestId("status-badge-row-title").textContent).toBe("Alpha");
+  });
+
+  // A renderer isn't an editable widget — applying it to an editable field
+  // would silently make that field un-editable. The gate is `field.readOnly`,
+  // not "renderer is set".
+  test("renderer on an editable field is ignored — the field keeps its editable Input", () => {
+    render(
+      <RenderEdit
+        screen={makeScreen({ field: "status", renderer: { format: "currency", symbol: "€" } })}
+        entity={invoiceEntity}
+        featureName="invoices"
+        initial={{ title: "Alpha", status: "42" }}
+        customSubmit={noopSubmit}
+      />,
+    );
+
+    const input = screen.getByTestId("field-status").querySelector("input");
+    expect(input).not.toBeNull();
+    expect(input?.value).toBe("42");
+  });
+});

package/src/layout/__tests__/shell-breadcrumb.test.ts

@@ -76,6 +76,32 @@ describe("resolveDetailBreadcrumb", () => {
     ]);
   });
 
+  // fw#2245: projectionDetail has no entity for `listFromEntity` to pair
+  // against — listScreenId is its only back-navigation source, same role it
+  // plays for `custom` above. Matters once a screen hides its RenderEdit
+  // action-bar footer (hideActions) and has no entityList rowAction either.
+  test("projectionDetail uses listScreenId", () => {
+    const screens: ScreenDefinition[] = [
+      {
+        id: "session-list",
+        type: "projectionList",
+        query: "sessions:query:user-session:list",
+        columns: ["userId"],
+      },
+      {
+        id: "session-detail",
+        type: "projectionDetail",
+        query: "sessions:query:user-session:detail",
+        listScreenId: "session-list",
+        layout: { sections: [{ fields: ["userId"] }] },
+      },
+    ];
+    expect(resolveDetailBreadcrumb(screens, "session-detail", t)).toEqual([
+      { label: "screen:session-list.title", screenId: "session-list" },
+      { label: "screen:session-detail.title" },
+    ]);
+  });
+
   test("unknown screen returns undefined", () => {
     expect(resolveDetailBreadcrumb([], "missing", t)).toBeUndefined();
   });

package/src/layout/shell-breadcrumb.ts

@@ -33,7 +33,18 @@ export function resolveDetailBreadcrumb(
       ? screens.find((s) => lastSegment(s.id) === detail.listScreenId)
       : undefined;
 
-  const list = listFromRowAction ?? listFromEntity ?? listFromCustomParent;
+  // projectionDetail has no entity to pair with an entityList (unlike
+  // entityEdit above) — `listScreenId` is its only back-navigation source.
+  // Needed so the breadcrumb still offers "back" when a screen hides its
+  // RenderEdit action-bar footer (fw#2245's `hideActions`) and isn't
+  // reachable via a listFromRowAction either.
+  const listFromProjectionDetailParent =
+    detail.type === "projectionDetail" && detail.listScreenId !== undefined
+      ? screens.find((s) => lastSegment(s.id) === detail.listScreenId)
+      : undefined;
+
+  const list =
+    listFromRowAction ?? listFromEntity ?? listFromCustomParent ?? listFromProjectionDetailParent;
   if (list === undefined) {
     return [{ label: t(screenTitleKey(detailScreenId)) }];
   }

package/src/primitives/drawer.tsx

@@ -0,0 +1,28 @@
+// Bare content shell for hosting self-contained widgets (own submit/cancel
+// buttons) in a slide-in side panel — same "no footer buttons of its own"
+// contract as DefaultModal, delegating to the richer widgets/drawer.tsx
+// Drawer (resize/backdrop/side are widget-only concerns, not exposed
+// through the platform-neutral CorePrimitives.Drawer contract).
+
+import type { DrawerProps } from "@cosmicdrift/kumiko-renderer";
+import type { ReactNode } from "react";
+import { Drawer } from "../widgets/drawer";
+
+export function DefaultDrawer({
+  open,
+  onOpenChange,
+  title,
+  children,
+  testId,
+}: DrawerProps): ReactNode {
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange} title={title} testId={testId}>
+      {/* React re-parents portal content into the enclosing React tree for
+          event bubbling (it only escapes the DOM tree, not the fiber tree) —
+          without stopping it here, submitting the hosted actionForm would
+          also bubble into an ancestor <form>'s onSubmit if the drawer was
+          opened from inside one (same fix as DefaultModal, fw#1681). */}
+      <div onSubmit={(e) => e.stopPropagation()}>{children}</div>
+    </Drawer>
+  );
+}

package/src/primitives/index.tsx

@@ -89,6 +89,7 @@ import { StepBar } from "../widgets/step-bar";
 import { ComboboxInput } from "./combobox";
 import { DateInput } from "./date-input";
 import { DefaultDialog } from "./dialog";
+import { DefaultDrawer } from "./drawer";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -2043,6 +2044,7 @@ export const defaultPrimitives: CorePrimitives = {
   Heading: DefaultHeading,
   Dialog: DefaultDialog,
   Modal: DefaultModal,
+  Drawer: DefaultDrawer,
   Lightbox: DefaultLightbox,
   ConfigSourceBadge: DefaultConfigSourceBadge,
   ConfigCascadeView: DefaultConfigCascadeView,