@cosmicdrift/kumiko-bundled-features 0.240.0 → 0.241.0

package/src/user-profile/__tests__/profile-screen.boot.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, test } from "bun:test";
+import { validateBoot } from "@cosmicdrift/kumiko-framework/engine";
+import { createFilesFeature } from "@cosmicdrift/kumiko-framework/files";
+import { createAuthEmailPasswordFeature } from "../../auth-email-password/feature";
+import { authFoundationFeature } from "../../auth-foundation";
+import { createComplianceProfilesFeature } from "../../compliance-profiles/feature";
+import { createConfigFeature } from "../../config/feature";
+import { createDataRetentionFeature } from "../../data-retention/feature";
+import { createSessionsFeature } from "../../sessions/feature";
+import { createTenantFeature } from "../../tenant/feature";
+import { createUserFeature } from "../../user/feature";
+import { createUserDataRightsFeature } from "../../user-data-rights/feature";
+import { createUserDataRightsDefaultsFeature } from "../../user-data-rights-defaults/feature";
+import { createUserProfileFeature } from "../feature";
+
+// fw#2312 — the `profile` screen converted from a custom React component to
+// a declarative projectionDetail (change-password/change-email stay
+// EditExtensionSection components, deletion is fields+actions). `validateBoot`
+// below proves the screen clears every boot-validator rule for
+// projectionDetail extension sections (entityName set, contributesToFormSubmit
+// not true, action handlers resolve) — same pattern as user-data-rights'
+// privacy-center screen (inspector-screens.boot.test.ts), which this mirrors.
+describe("user-profile screen (fw#2312 projectionDetail conversion)", () => {
+  const features = [
+    createConfigFeature(),
+    createUserFeature(),
+    createTenantFeature(),
+    createAuthEmailPasswordFeature(),
+    createDataRetentionFeature(),
+    createComplianceProfilesFeature(),
+    authFoundationFeature,
+    createSessionsFeature(),
+    createFilesFeature(),
+    createUserDataRightsFeature(),
+    createUserDataRightsDefaultsFeature(),
+    createUserProfileFeature(),
+  ];
+
+  test("the assembled feature set boot-validates", () => {
+    expect(() => validateBoot(features)).not.toThrow();
+  });
+
+  test("is a projectionDetail bound to the user's own `me` query", () => {
+    const f = createUserProfileFeature();
+    const screen = f.screens["profile"];
+    expect(screen?.type).toBe("projectionDetail");
+    if (screen?.type === "projectionDetail") {
+      expect(screen.query).toBe("user:query:user:me");
+      expect(screen.access).toEqual({ openToAll: true });
+    }
+  });
+
+  test("change-email/change-password are self-persisting extensions scoped to `user`", () => {
+    const f = createUserProfileFeature();
+    const screen = f.screens["profile"];
+    if (screen?.type !== "projectionDetail") throw new Error("expected projectionDetail");
+    const extensionSections = screen.layout.sections.filter((s) => s.kind === "extension");
+    expect(extensionSections).toHaveLength(2);
+    for (const section of extensionSections) {
+      expect(section.entityName).toBe("user");
+      expect(section.contributesToFormSubmit).not.toBe(true);
+    }
+  });
+
+  test("gracePeriodEnd is hidden unless a deletion is actually pending", () => {
+    const f = createUserProfileFeature();
+    const screen = f.screens["profile"];
+    if (screen?.type !== "projectionDetail") throw new Error("expected projectionDetail");
+    const graceField = screen.layout.sections
+      .flatMap((s) => ("fields" in s ? s.fields : []))
+      .find((field) => typeof field === "object" && field.field === "gracePeriodEnd");
+    expect(typeof graceField === "object" ? graceField.visible : undefined).toEqual({
+      field: "status",
+      eq: "deletionRequested",
+    });
+  });
+
+  test("request-deletion/cancel-deletion actions dispatch user-data-rights handlers with the original confirm+visibility rules", () => {
+    const f = createUserProfileFeature();
+    const screen = f.screens["profile"];
+    if (screen?.type !== "projectionDetail") throw new Error("expected projectionDetail");
+    const byId = Object.fromEntries((screen.actions ?? []).map((a) => [a.id, a]));
+
+    expect(byId["request-deletion"]).toMatchObject({
+      handler: "user-data-rights:write:request-deletion",
+      confirm: "profile.danger.dialogDescription",
+      visible: { field: "status", ne: "deletionRequested" },
+      style: "danger",
+    });
+    // Cancel has no confirm — the pre-#2312 custom screen executed it directly.
+    expect(byId["cancel-deletion"]).toMatchObject({
+      handler: "user-data-rights:write:cancel-deletion",
+      visible: { field: "status", eq: "deletionRequested" },
+    });
+    expect((byId["cancel-deletion"] as { readonly confirm?: string }).confirm).toBeUndefined();
+  });
+});

package/src/user-profile/__tests__/profile-screen.test.tsx

@@ -1,7 +1,13 @@
-// Render-Test gegen echte i18n-Bundles (Welle-1-Prinzip: fängt fehlende
-// Keys — der Screen darf nie rohe "profile.*"-Keys zeigen). Provider-
-// Wrapper analog renderer-web/test-utils, hier lokal weil die
-// Dependency-Richtung renderer-web → bundled-features verbietet.
+// Render test against the real i18n bundles (catches missing keys — the
+// sections must never show raw "profile.*" keys). Provider wrapper mirrors
+// renderer-web/test-utils, duplicated locally because the renderer-web →
+// bundled-features dependency direction is forbidden.
+//
+// fw#2312: the `profile` screen is no longer a React component (ProfileScreen)
+// — it's a declarative projectionDetail (feature.ts, boot-tested in
+// profile-screen.boot.test.ts). Only change-email/change-password stay
+// EditExtensionSection components (re-auth flows a declarative action can't
+// express); the danger zone is fields + actions.
 
 import { describe, expect, spyOn, test } from "bun:test";
 import { createStore, type Dispatcher, type DispatcherStatus } from "@cosmicdrift/kumiko-headless";
@@ -19,7 +25,7 @@ import { defaultPrimitives, defaultTokens } from "@cosmicdrift/kumiko-renderer-w
 import { fireEvent, render, waitFor } from "@testing-library/react";
 import type { ReactNode } from "react";
 import { defaultTranslations } from "../i18n";
-import { formatDeletionDate, ProfileScreen } from "../web/profile-screen";
+import { ChangeEmailSection, ChangePasswordSection } from "../web/profile-screen";
 
 const stubLiveEvents: LiveEventSubscriber = () => () => {};
 const stubTokens = {
@@ -30,11 +36,15 @@ const stubTokens = {
 };
 const stubResolver = createStaticLocaleResolver();
 
-function makeDispatcher(me: Record<string, unknown>): Dispatcher {
+function makeDispatcher(writes: Array<{ type: string; payload: unknown }>): Dispatcher {
   const statusStore = createStore<DispatcherStatus>("online");
+  const write = (async (type: string, payload: unknown) => {
+    writes.push({ type, payload });
+    return { isSuccess: true, data: {} };
+  }) as unknown as Dispatcher["write"];
   return {
-    write: (async () => ({ isSuccess: true, data: {} })) as unknown as Dispatcher["write"],
-    query: (async () => ({ isSuccess: true, data: me })) as unknown as Dispatcher["query"],
+    write,
+    query: (async () => ({ isSuccess: true, data: null })) as unknown as Dispatcher["query"],
     batch: (async () => ({ isSuccess: true, results: [] })) as unknown as Dispatcher["batch"],
     statusStore,
     async *stream() {},
@@ -43,8 +53,8 @@ function makeDispatcher(me: Record<string, unknown>): Dispatcher {
   } as unknown as Dispatcher; // @cast-boundary test-stub
 }
 
-function renderProfile(me: Record<string, unknown>) {
-  const wrapper = ({ children }: { readonly children: ReactNode }): ReactNode => (
+function withProviders(writes: Array<{ type: string; payload: unknown }>) {
+  return ({ children }: { readonly children: ReactNode }): ReactNode => (
     <TokensProvider value={stubTokens}>
       <LocaleProvider
         resolver={stubResolver}
@@ -52,100 +62,93 @@ function renderProfile(me: Record<string, unknown>) {
       >
         <PrimitivesProvider value={defaultPrimitives}>
           <LiveEventsProvider value={stubLiveEvents}>
-            <DispatcherProvider dispatcher={makeDispatcher(me)}>{children}</DispatcherProvider>
+            <DispatcherProvider dispatcher={makeDispatcher(writes)}>{children}</DispatcherProvider>
           </LiveEventsProvider>
         </PrimitivesProvider>
       </LocaleProvider>
     </TokensProvider>
   );
-  return render(<ProfileScreen />, { wrapper });
 }
 
-const activeMe = {
-  id: "00000000-0000-4000-8000-000000000042",
-  email: "marc@example.com",
-  status: "active",
-  gracePeriodEnd: null,
-};
+function renderChangeEmailSection(email: string) {
+  const writes: Array<{ type: string; payload: unknown }> = [];
+  const patchCalls: Array<Readonly<Record<string, unknown>>> = [];
+  const patch = (partial: Readonly<Record<string, unknown>>): void => {
+    patchCalls.push(partial);
+  };
+  // ChangeEmailSection renders no Section/title of its own in production
+  // (the renderer's ExtensionSectionMount supplies that) — a plain testId
+  // wrapper here is test-only scaffolding to detect "mounted".
+  const view = render(
+    <div data-testid="change-email-root">
+      <ChangeEmailSection entityName="user" entityId={null} values={{ email }} patch={patch} />
+    </div>,
+    { wrapper: withProviders(writes) },
+  );
+  return { view, writes, patchCalls };
+}
 
-describe("ProfileScreen", () => {
-  test("aktiver User: alle drei Sektionen, Texte übersetzt (keine rohen Keys)", async () => {
-    const view = renderProfile(activeMe);
-    await waitFor(() => {
-      if (view.queryByTestId("profile-screen") === null) throw new Error("not mounted yet");
-    });
-    expect(view.getByTestId("profile-email")).toBeTruthy();
-    expect(view.getByTestId("profile-password")).toBeTruthy();
-    expect(view.getByTestId("profile-danger")).toBeTruthy();
-    // 607/4: page heading is <h1> (Heading variant="page") — the danger-zone
-    // title must be <h2>, not Card's default <h3>, so the levels don't skip.
-    expect(view.getByTestId("profile-danger").querySelector("h2")).not.toBeNull();
-    expect(view.getByTestId("profile-danger").querySelector("h3")).toBeNull();
-    expect(view.getByTestId("profile-email-current").textContent).toContain("marc@example.com");
-    expect(view.getByTestId("profile-danger-delete")).toBeTruthy();
-    // Echte i18n: kein einziger roher Key im sichtbaren Text.
-    expect(view.container.textContent).not.toContain("profile.");
-    // Card-Standard: jede Konto-Section ist GENAU eine Card (self + descendants)
-    // — nicht mehr das alte <section bg-card> um eine Form-Card = doppelt.
-    const cardCount = (el: Element): number =>
-      (el.matches(".bg-card") ? 1 : 0) + el.querySelectorAll(".bg-card").length;
-    expect(cardCount(view.getByTestId("profile-email"))).toBe(1);
-    expect(cardCount(view.getByTestId("profile-password"))).toBe(1);
+function renderChangePasswordSection() {
+  const writes: Array<{ type: string; payload: unknown }> = [];
+  const view = render(
+    <div data-testid="change-password-root">
+      <ChangePasswordSection />
+    </div>,
+    { wrapper: withProviders(writes) },
+  );
+  return { view, writes };
+}
+
+async function waitForMount(view: ReturnType<typeof render>, testId: string): Promise<void> {
+  await waitFor(() => {
+    if (view.queryByTestId(testId) === null) throw new Error("not mounted yet");
   });
+}
 
-  test("Passwort- und Email-Section rendern auf einem echten <form> (Enter-to-submit, Password-Manager-Boundary) (555/1)", async () => {
-    const view = renderProfile(activeMe);
-    await waitFor(() => {
-      if (view.queryByTestId("profile-screen") === null) throw new Error("not mounted yet");
-    });
-    expect(view.getByTestId("profile-password").tagName).toBe("FORM");
+describe("ChangeEmailSection", () => {
+  test("renders on a real <form> (Enter-to-submit, password-manager boundary), shows the current email, no raw i18n keys", async () => {
+    const { view } = renderChangeEmailSection("marc@example.com");
+    await waitForMount(view, "change-email-root");
     expect(view.getByTestId("profile-email").tagName).toBe("FORM");
+    expect(view.getByTestId("profile-email-current").textContent).toContain("marc@example.com");
+    expect(view.container.textContent).not.toContain("profile.");
   });
 
-  test("email/password row stretches equal-height cards instead of grid's items-start default (fw#2656)", async () => {
-    const view = renderProfile(activeMe);
+  test("submits change-email with currentPassword + newEmail, patches the host's email on success", async () => {
+    const { view, writes, patchCalls } = renderChangeEmailSection("old@example.com");
+    await waitForMount(view, "profile-email");
+
+    const emailInput = view.container.querySelector<HTMLInputElement>("#profile-new-email");
+    const pwInput = view.container.querySelector<HTMLInputElement>("#profile-email-password");
+    if (!emailInput || !pwInput) throw new Error("email form inputs not found");
+    fireEvent.change(emailInput, { target: { value: "new@example.com" } });
+    fireEvent.change(pwInput, { target: { value: "current-pw" } });
+    fireEvent.click(view.getByTestId("profile-email-submit"));
+
     await waitFor(() => {
-      if (view.queryByTestId("profile-screen") === null) throw new Error("not mounted yet");
+      if (writes.length === 0) throw new Error("no write dispatched yet");
     });
-    const row = view.getByTestId("profile-email").parentElement;
-    expect(row?.className).toContain("grid");
-    expect(row?.className).toContain("md:grid-cols-2");
-    expect(row?.className).not.toContain("items-start");
-  });
-
-  test("deletionRequested: Frist-Banner + Abbrechen statt Lösch-Button", async () => {
-    const view = renderProfile({
-      ...activeMe,
-      status: "deletionRequested",
-      gracePeriodEnd: "2026-07-11T00:00:00Z",
+    expect(writes[0]).toEqual({
+      type: "user-profile:write:change-email",
+      payload: { currentPassword: "current-pw", newEmail: "new@example.com" },
     });
     await waitFor(() => {
-      if (view.queryByTestId("profile-screen") === null) throw new Error("not mounted yet");
+      if (patchCalls.length === 0) throw new Error("patch not called yet");
     });
-    const banner = view.getByTestId("profile-danger-requested");
-    expect(banner.textContent).toContain("2026-07-11");
-    expect(banner.textContent).not.toContain("{date}");
-    // #322/2: nur der Datums-Teil, kein roher ISO-Zeitstempel mehr.
-    expect(banner.textContent).not.toContain("T00:00");
-    expect(banner.textContent).not.toContain(":00:00");
-    expect(view.queryByTestId("profile-danger-delete")).toBeNull();
-    expect(view.getByTestId("profile-danger-cancel")).toBeTruthy();
-    expect(view.container.textContent).not.toContain("profile.");
+    expect(patchCalls[0]).toEqual({ email: "new@example.com" });
   });
 
-  // #322/3: nach erfolgreichem Email-Wechsel triggert der Screen den
-  // Verification-Versand. Schlägt der fehl, darf der Erfolg nicht umkehren —
-  // aber der Fehler wird nicht mehr stumm verschluckt (sonst wartet der User
-  // auf eine Mail, die nie kommt) und die Success-Message verspricht keinen
-  // Versand mehr.
-  test("email change: verification-send failure is surfaced (not swallowed), change still succeeds", async () => {
+  // #322/3: after a successful email change, the section triggers the
+  // verification-mail send. A failure there must not reverse the success —
+  // but it's no longer silently swallowed (otherwise the user waits for a
+  // mail that never arrives) and the success message no longer promises a
+  // send.
+  test("verification-send failure is surfaced (not swallowed), change still succeeds", async () => {
     const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
     const fetchSpy = spyOn(globalThis, "fetch").mockRejectedValue(new Error("no network in test"));
     try {
-      const view = renderProfile(activeMe);
-      await waitFor(() => {
-        if (view.queryByTestId("profile-email") === null) throw new Error("not mounted yet");
-      });
+      const { view } = renderChangeEmailSection("old@example.com");
+      await waitForMount(view, "profile-email");
 
       const emailInput = view.container.querySelector<HTMLInputElement>("#profile-new-email");
       const pwInput = view.container.querySelector<HTMLInputElement>("#profile-email-password");
@@ -154,16 +157,16 @@ describe("ProfileScreen", () => {
       fireEvent.change(pwInput, { target: { value: "current-pw" } });
       fireEvent.click(view.getByTestId("profile-email-submit"));
 
-      // De-Swallow: der fehlgeschlagene Verification-Versand wird geloggt.
+      // De-swallow: the failed verification-mail send is logged.
       await waitFor(() => {
         const warned = warnSpy.mock.calls.some((c) => String(c[0]).includes("[user-profile]"));
         if (!warned) throw new Error("verification-send failure not surfaced");
       });
-      // Wechsel bleibt erfolgreich: das Eingabefeld wird zurückgesetzt.
+      // The change still succeeds: the input field is cleared.
       await waitFor(() => {
         if (emailInput.value !== "") throw new Error("email input not cleared after success");
       });
-      // Die Success-Message verspricht keinen Link-Versand mehr.
+      // The success message no longer promises a link send.
       expect(view.container.textContent).not.toContain("verification link");
       expect(view.container.textContent).not.toContain("Bestätigungslink");
     } finally {
@@ -172,19 +175,17 @@ describe("ProfileScreen", () => {
     }
   });
 
-  // #472/1: der Server antwortet auf den Verification-Versand mit ok:false
-  // (z.B. 4xx) OHNE zu werfen. Das ist ein anderer Zweig als das catch oben —
-  // er muss eigenständig geloggt werden, der Wechsel bleibt erfolgreich.
-  test("email change: verification-send rejected by server (ok:false) is surfaced", async () => {
+  // #472/1: the server answers the verification-mail send with ok:false
+  // (e.g. 4xx) WITHOUT throwing. That's a different branch than the catch
+  // above — it must be logged on its own, and the change still succeeds.
+  test("verification-send rejected by server (ok:false) is surfaced", async () => {
     const warnSpy = spyOn(console, "warn").mockImplementation(() => {});
     const fetchSpy = spyOn(globalThis, "fetch").mockResolvedValue(
       new Response("{}", { status: 400 }),
     );
     try {
-      const view = renderProfile(activeMe);
-      await waitFor(() => {
-        if (view.queryByTestId("profile-email") === null) throw new Error("not mounted yet");
-      });
+      const { view } = renderChangeEmailSection("old@example.com");
+      await waitForMount(view, "profile-email");
 
       const emailInput = view.container.querySelector<HTMLInputElement>("#profile-new-email");
       const pwInput = view.container.querySelector<HTMLInputElement>("#profile-email-password");
@@ -193,14 +194,13 @@ describe("ProfileScreen", () => {
       fireEvent.change(pwInput, { target: { value: "current-pw" } });
       fireEvent.click(view.getByTestId("profile-email-submit"));
 
-      // Der ok:false-Zweig loggt SEINE Message ("could not be sent"),
-      // nicht die des catch-Zweigs ("send threw").
+      // The ok:false branch logs ITS OWN message ("could not be sent"),
+      // not the catch branch's ("send threw").
       await waitFor(() => {
         const hit = warnSpy.mock.calls.some((c) => String(c[0]).includes("could not be sent"));
         if (!hit) throw new Error("ok:false verification failure not surfaced");
       });
       expect(warnSpy.mock.calls.some((c) => String(c[0]).includes("send threw"))).toBe(false);
-      // Wechsel bleibt erfolgreich: das Eingabefeld wird zurückgesetzt.
       await waitFor(() => {
         if (emailInput.value !== "") throw new Error("email input not cleared after success");
       });
@@ -211,18 +211,54 @@ describe("ProfileScreen", () => {
   });
 });
 
-describe("formatDeletionDate", () => {
-  test("ISO instant → date part only (strips time + Z)", () => {
-    expect(formatDeletionDate("2026-07-11T00:00:00.000Z")).toBe("2026-07-11");
+describe("ChangePasswordSection", () => {
+  test("renders on a real <form>, no raw i18n keys", async () => {
+    const { view } = renderChangePasswordSection();
+    await waitForMount(view, "change-password-root");
+    expect(view.getByTestId("profile-password").tagName).toBe("FORM");
+    expect(view.container.textContent).not.toContain("profile.");
   });
 
-  test("null / undefined / empty → em dash", () => {
-    expect(formatDeletionDate(null)).toBe("—");
-    expect(formatDeletionDate(undefined)).toBe("—");
-    expect(formatDeletionDate("")).toBe("—");
+  test("mismatched confirm password blocks the submit (no write dispatched)", async () => {
+    const { view, writes } = renderChangePasswordSection();
+    await waitForMount(view, "profile-password");
+
+    const oldPw = view.container.querySelector<HTMLInputElement>("#profile-old-password");
+    const newPw = view.container.querySelector<HTMLInputElement>("#profile-new-password");
+    const confirmPw = view.container.querySelector<HTMLInputElement>("#profile-confirm-password");
+    if (!oldPw || !newPw || !confirmPw) throw new Error("password form inputs not found");
+    fireEvent.change(oldPw, { target: { value: "current-pw" } });
+    fireEvent.change(newPw, { target: { value: "new-pw-1" } });
+    fireEvent.change(confirmPw, { target: { value: "new-pw-2" } });
+    fireEvent.click(view.getByTestId("profile-password-submit"));
+
+    await waitFor(() => {
+      if (!view.container.textContent?.includes("do not match")) {
+        throw new Error("mismatch error not shown yet");
+      }
+    });
+    expect(writes).toHaveLength(0);
   });
 
-  test("date-only string without time → returned as-is", () => {
-    expect(formatDeletionDate("2026-07-11")).toBe("2026-07-11");
+  test("matching passwords dispatch change-password with old/new", async () => {
+    const { view, writes } = renderChangePasswordSection();
+    await waitForMount(view, "profile-password");
+
+    const oldPw = view.container.querySelector<HTMLInputElement>("#profile-old-password");
+    const newPw = view.container.querySelector<HTMLInputElement>("#profile-new-password");
+    const confirmPw = view.container.querySelector<HTMLInputElement>("#profile-confirm-password");
+    if (!oldPw || !newPw || !confirmPw) throw new Error("password form inputs not found");
+    fireEvent.change(oldPw, { target: { value: "current-pw" } });
+    fireEvent.change(newPw, { target: { value: "new-pw-1" } });
+    fireEvent.change(confirmPw, { target: { value: "new-pw-1" } });
+    fireEvent.click(view.getByTestId("profile-password-submit"));
+
+    await waitFor(() => {
+      if (writes.length === 0) throw new Error("no write dispatched yet");
+    });
+    expect(writes[0]).toEqual({
+      type: "auth-email-password:write:change-password",
+      payload: { oldPassword: "current-pw", newPassword: "new-pw-1" },
+    });
   });
 });

package/src/user-profile/changes.json

@@ -1,4 +1,11 @@
 [
+  {
+    "version": "0.241.0",
+    "type": "breaking",
+    "title": "user-profile now registers its own profile screen (id user-profile:screen:profile); app-side profile screen registrations must be removed (fw#2312).",
+    "detail": "`profile` is now a declarative `projectionDetail` screen bound to `user:query:user:me` instead of a custom React component: change-password and change-email stay `EditExtensionSection` components (re-auth flows a declarative action can't express), account deletion (request/cancel via `user-data-rights`, grace period) is now fully declarative fields + `actions: RowAction[]`, preserving the original confirm dialog and `visible: {field, eq/ne}` toggle 1:1. `userProfileClient()` now registers the two extension-section components via `extensionSectionComponents` instead of exposing a `ProfileScreen` component for apps to place in a `components` map. `ProfileScreen` is a dead export. New exports: `ChangeEmailSection`, `ChangePasswordSection` (the two surviving extension components, importable for tests but not meant to be placed manually). Known UI regression, accepted for this pass (same trade-off as `privacy-center`): the deletion confirm-dialog title is now always the action's `label`; the dynamically composed grace-period banner sentence is gone, replaced by a plain `gracePeriodEnd` date field; there is no cancel-deletion success toast.",
+    "migration": "The bundled feature now registers the `profile` screen itself (id `user-profile:screen:profile`) — an app's own `profile` custom-screen registration collides on boot with a duplicate short-id error. Delete the app-side registration entirely: `r.screen({ id: \"profile\", type: \"custom\", renderer: { react: { __component: \"UserProfileScreen\" } }, access: { openToAll: true } })` has no replacement to write, just remove the call. If you have an `r.nav({ screen: \"profile\" })` (or any other reference to the app-local `profile` screen id), repoint it at `\"user-profile:screen:profile\"`. Also remove `components: { UserProfileScreen: ProfileScreen }` from your renderer/client setup and the now-unused `ProfileScreen` import — the client no longer exposes that component. Known affected consumers (not modified here, out of this PR's scope): `money-horse` (`src/features/money-horse/feature.ts:286-292`) and `offlot-app` (`src/features/account/feature.ts:24-30`) both currently register their own `profile` custom screen this way."
+  },
   {
     "version": "0.123.2",
     "type": "fix",

package/src/user-profile/constants.ts

@@ -1,18 +1,26 @@
 // @runtime client
-// Reine String-Konstanten — client-markiert, damit der ProfileScreen
-// (web/) sie importieren darf; runtime-Code (handlers/feature) darf
-// client-Dateien ohnehin ziehen.
+// Plain string constants — client-marked so web/profile-screen.tsx can
+// import them; runtime code (handlers/feature) may pull client files anyway.
 
 export const USER_PROFILE_FEATURE = "user-profile" as const;
 
+export const PROFILE_SCREEN_ID = "profile" as const;
+
+// EditExtensionSection `__component` markers (fw#2312) — change-password and
+// change-email stay React components (re-auth flows a declarative action
+// can't express); deletion moved to declarative fields/actions on the screen
+// itself (feature.ts), same split as user-data-rights' privacy-center.
+export const CHANGE_EMAIL_SECTION_EXTENSION_NAME = "UserProfileChangeEmailSection" as const;
+export const CHANGE_PASSWORD_SECTION_EXTENSION_NAME = "UserProfileChangePasswordSection" as const;
+
 export const UserProfileHandlers = {
   changeEmail: "user-profile:write:change-email",
 } as const;
 
-// Fremde QNs die der ProfileScreen dispatcht, hier gepinnt statt als
-// Magic-Strings im Screen (und statt runtime-Barrel-Imports, die die
-// Runtime-Isolation verletzen würden). Drift-Schutz: der Integration-
-// Test vergleicht sie gegen die Original-Konstanten der Features.
+// Foreign QNs the profile screen dispatches, pinned here instead of as
+// magic strings in the screen (and instead of runtime-barrel imports, which
+// would violate runtime isolation). Drift guard: the integration test
+// compares these against the owning features' original constants.
 export const UserProfileQueries = {
   me: "user:query:user:me",
 } as const;

package/src/user-profile/feature.ts

@@ -1,19 +1,28 @@
 import { defineFeature, type FeatureDefinition } from "@cosmicdrift/kumiko-framework/engine";
+import {
+  CHANGE_EMAIL_SECTION_EXTENSION_NAME,
+  CHANGE_PASSWORD_SECTION_EXTENSION_NAME,
+  PROFILE_SCREEN_ID,
+  UserDataRightsHandlers,
+  UserProfileQueries,
+} from "./constants";
 import { changeEmailWrite } from "./handlers/change-email.write";
 
 export function createUserProfileFeature(): FeatureDefinition {
   return defineFeature("user-profile", (r) => {
     r.describe(
-      "Self-service account page building blocks: a `change-email` write handler " +
+      "Self-service account page (fw#2312: declarative `projectionDetail` bound to " +
+        "the signed-in user's own `me` row) plus its `change-email` write handler " +
         "(re-auth via current password, uniqueness check, resets emailVerified and " +
-        "expects the app to trigger the verification flow) plus the ProfileScreen " +
-        "web component that composes change-password (auth-email-password), " +
-        "change-email and account deletion (user-data-rights request/cancel with " +
-        "grace period) into one screen. Apps register the screen as " +
-        '`type: "custom"` with `__component: "UserProfileScreen"`. Requires `user`, ' +
-        "`auth-email-password`, `user-data-rights`, and `user-data-rights-defaults` " +
-        "(so the GDPR boot-validator finds export/delete hooks for `user`'s PII " +
-        "fields once user-data-rights is mounted).",
+        "expects the app to trigger the verification flow). Change-password and " +
+        "change-email stay custom `EditExtensionSection` components (re-auth flows a " +
+        "declarative action can't express); account deletion (user-data-rights " +
+        "request/cancel with grace period) is declarative fields + actions. Apps " +
+        'place the screen (id "profile") in their logged-in area via r.nav — no ' +
+        '`type: "custom"` / `__component` registration needed on the app side ' +
+        "anymore. Requires `user`, `auth-email-password`, `user-data-rights`, and " +
+        "`user-data-rights-defaults` (so the GDPR boot-validator finds export/delete " +
+        "hooks for `user`'s PII fields once user-data-rights is mounted).",
     );
     r.uiHints({
       displayLabel: "User Profile · Self-Service",
@@ -29,6 +38,84 @@ export function createUserProfileFeature(): FeatureDefinition {
       changeEmail: r.writeHandler(changeEmailWrite),
     };
 
+    // Boot-validator requires a "screen:<id>.title" key per r.screen() —
+    // kept inline (not imported from ./i18n) so feature.ts, part of the
+    // server barrel, stays importable from a server-only sample without a
+    // jsx tsconfig (i18n.ts pulls @cosmicdrift/kumiko-renderer's types, see
+    // index.ts). "Profile" is duplicated in i18n.ts's client bundle.
+    r.translations({ keys: { "screen:profile.title": { en: "Profile" } } });
+
+    // Self-service account screen: change-email/change-password stay
+    // self-persisting extension sections (re-auth, own dispatcher writes —
+    // contributesToFormSubmit omitted since projectionDetail has no form
+    // submit of its own, see the boot-validator's check for that). Deletion
+    // is declarative fields + actions, same split as user-data-rights'
+    // privacy-center screen (../user-data-rights/feature.ts) which this
+    // mirrors 1:1 for the confirm/visible semantics. access is openToAll
+    // because no app role name is portable; the per-user handlers enforce
+    // auth server-side.
+    r.screen({
+      id: PROFILE_SCREEN_ID,
+      type: "projectionDetail",
+      query: UserProfileQueries.me,
+      singleton: true,
+      access: { openToAll: true },
+      description:
+        "Self-service account page: change password, change email (with re-auth and " +
+        "a verification-mail follow-up), and request or cancel account deletion " +
+        "(user-data-rights grace period).",
+      fieldLabels: {
+        gracePeriodEnd: "profile.danger.gracePeriodEnd",
+      },
+      layout: {
+        sections: [
+          {
+            kind: "extension",
+            title: "profile.email.title",
+            component: { react: { __component: CHANGE_EMAIL_SECTION_EXTENSION_NAME } },
+            entityName: "user",
+          },
+          {
+            kind: "extension",
+            title: "profile.password.title",
+            component: { react: { __component: CHANGE_PASSWORD_SECTION_EXTENSION_NAME } },
+            entityName: "user",
+          },
+          {
+            title: "profile.danger.title",
+            description: "profile.danger.explainer",
+            // gracePeriodEnd is only meaningful once a deletion is actually
+            // pending — hide it instead of showing an empty date when status
+            // isn't deletionRequested (same rule as privacy-center).
+            fields: [
+              {
+                field: "gracePeriodEnd",
+                renderer: { format: "date" as const },
+                visible: { field: "status", eq: "deletionRequested" },
+              },
+            ],
+          },
+        ],
+      },
+      actions: [
+        {
+          id: "request-deletion",
+          label: "profile.danger.delete",
+          handler: UserDataRightsHandlers.requestDeletion,
+          confirm: "profile.danger.dialogDescription",
+          visible: { field: "status", ne: "deletionRequested" },
+          style: "danger",
+        },
+        {
+          id: "cancel-deletion",
+          label: "profile.danger.cancelDeletion",
+          handler: UserDataRightsHandlers.cancelDeletion,
+          visible: { field: "status", eq: "deletionRequested" },
+          style: "secondary",
+        },
+      ],
+    });
+
     return { handlers };
   });
 }