@cosmicdrift/kumiko-bundled-features 0.46.0 → 0.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.46.0",
+  "version": "0.48.0",
   "description": "Built-in features — tenant, user, auth, delivery. The stuff you'd rewrite anyway, already typed.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -40,6 +40,7 @@
     "./file-provider-inmemory": "./src/file-provider-inmemory/index.ts",
     "./files": "./src/files/index.ts",
     "./user-data-rights": "./src/user-data-rights/index.ts",
+    "./user-data-rights/web": "./src/user-data-rights/web/index.ts",
     "./user-data-rights-defaults": "./src/user-data-rights-defaults/index.ts",
     "./tenant": "./src/tenant/index.ts",
     "./tenant/constants": "./src/tenant/constants.ts",
@@ -76,11 +77,11 @@
     "./step-dispatcher": "./src/step-dispatcher/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.40.1",
-    "@cosmicdrift/kumiko-framework": "0.40.1",
-    "@cosmicdrift/kumiko-headless": "0.40.1",
-    "@cosmicdrift/kumiko-renderer": "0.40.1",
-    "@cosmicdrift/kumiko-renderer-web": "0.40.1",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.45.0",
+    "@cosmicdrift/kumiko-framework": "0.45.0",
+    "@cosmicdrift/kumiko-headless": "0.45.0",
+    "@cosmicdrift/kumiko-renderer": "0.45.0",
+    "@cosmicdrift/kumiko-renderer-web": "0.45.0",
     "@mollie/api-client": "^4.5.0",
     "@node-rs/argon2": "^2.0.2",
     "@types/nodemailer": "^8.0.0",

package/src/auth-email-password/web/__tests__/auth-shell.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, test } from "bun:test";
+import type { ReactNode } from "react";
+import { AuthCard, AuthShellProvider } from "../auth-form-primitives";
+import { renderWithProviders } from "./test-utils";
+
+describe("AuthCard / AuthShell", () => {
+  test("ohne Provider → Default-Fullscreen-Wrapper (rückwärtskompatibel)", () => {
+    const { container } = renderWithProviders(
+      <AuthCard title="Login">
+        <div data-testid="body">body</div>
+      </AuthCard>,
+    );
+    expect(container.querySelector(".min-h-screen")).not.toBeNull();
+    expect(container.querySelector(".max-w-sm")).not.toBeNull();
+    expect(container.querySelector("[data-testid=body]")).not.toBeNull();
+  });
+
+  test("mit Provider → App-Shell ersetzt Fullscreen-Wrapper, Card bleibt", () => {
+    function Shell({ card }: { readonly card: ReactNode }): ReactNode {
+      return <div data-testid="apex-chrome">{card}</div>;
+    }
+    const { container } = renderWithProviders(
+      <AuthShellProvider shell={(card) => <Shell card={card} />}>
+        <AuthCard title="Login">
+          <div data-testid="body">body</div>
+        </AuthCard>
+      </AuthShellProvider>,
+    );
+    expect(container.querySelector("[data-testid=apex-chrome]")).not.toBeNull();
+    expect(container.querySelector(".min-h-screen")).toBeNull();
+    // Card-Box (max-w-sm) + Inhalt bleiben — Shell wrappt nur, ersetzt nicht.
+    expect(container.querySelector(".max-w-sm")).not.toBeNull();
+    expect(container.querySelector("[data-testid=body]")).not.toBeNull();
+  });
+});

package/src/auth-email-password/web/auth-form-primitives.tsx

@@ -16,7 +16,33 @@
 //   parseUrlToken       — URL-Param-Helper (window.location.search).
 
 import { cn } from "@cosmicdrift/kumiko-renderer-web";
-import type { ReactNode } from "react";
+import { createContext, type ReactNode, useContext } from "react";
+
+// Wrappt die zentrierte Auth-Card in ihre Umgebung. Default = Fullscreen-
+// zentriert (Standalone-Auth-Page). Eine Apex-/Marketing-Chrome reicht über
+// AuthShellProvider eine eigene Variante rein, ohne dass `min-h-screen` die
+// Chrome übermalt.
+export type AuthShellRenderer = (card: ReactNode) => ReactNode;
+
+const defaultAuthShell: AuthShellRenderer = (card) => (
+  <div className="min-h-screen flex items-center justify-center bg-background px-4">{card}</div>
+);
+
+const AuthShellContext = createContext<AuthShellRenderer | null>(null);
+
+export function AuthShellProvider({
+  shell,
+  children,
+}: {
+  readonly shell: AuthShellRenderer;
+  readonly children: ReactNode;
+}): ReactNode {
+  return <AuthShellContext.Provider value={shell}>{children}</AuthShellContext.Provider>;
+}
+
+export function useAuthShell(): AuthShellRenderer | null {
+  return useContext(AuthShellContext);
+}
 
 export type AuthCardProps = {
   readonly title?: string;
@@ -25,21 +51,19 @@ export type AuthCardProps = {
 };
 
 export function AuthCard({ title, subtitle, children }: AuthCardProps): ReactNode {
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-background px-4">
-      <div className="w-full max-w-sm rounded-lg border bg-card text-card-foreground shadow-sm">
-        {(title !== undefined || subtitle !== undefined) && (
-          <div className="flex flex-col space-y-1.5 p-6 pb-4">
-            {title !== undefined && (
-              <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
-            )}
-            {subtitle !== undefined && <p className="text-sm text-muted-foreground">{subtitle}</p>}
-          </div>
-        )}
-        {children}
-      </div>
+  const shell = useAuthShell() ?? defaultAuthShell;
+  const card = (
+    <div className="w-full max-w-sm rounded-lg border bg-card text-card-foreground shadow-sm">
+      {(title !== undefined || subtitle !== undefined) && (
+        <div className="flex flex-col space-y-1.5 p-6 pb-4">
+          {title !== undefined && <h1 className="text-xl font-semibold tracking-tight">{title}</h1>}
+          {subtitle !== undefined && <p className="text-sm text-muted-foreground">{subtitle}</p>}
+        </div>
+      )}
+      {children}
     </div>
   );
+  return shell(card);
 }
 
 // Primary-button-Style für anchor-Tags die wie ein Button aussehen

package/src/auth-email-password/web/index.ts

@@ -24,6 +24,8 @@ export {
   resetPassword,
   verifyEmail,
 } from "./auth-client";
+export type { AuthShellRenderer } from "./auth-form-primitives";
+export { AuthShellProvider, useAuthShell } from "./auth-form-primitives";
 export { makeAuthGate } from "./auth-gate";
 export type {
   EmailPasswordClientFeature,

package/src/user-data-rights/__tests__/anonymous-deletion.integration.test.ts

@@ -0,0 +1,281 @@
+// Anonymer, email-verifizierter Deletion-Flow (Apex, Lockout-sicher).
+//
+// Schritt 1 (request-deletion-by-email): anonym, enumeration-safe, signt ein
+// HMAC-Token + ruft den Verify-Mail-Callback. Schritt 2 (confirm-deletion-by-
+// token): anonym, verifiziert das Token + startet die Grace-Period.
+// Beweist end-to-end via echte /api/write-Calls OHNE Auth (anonymousAccess).
+
+import { afterAll, beforeAll, beforeEach, describe, expect, test } from "bun:test";
+import { insertOne, selectMany } from "@cosmicdrift/kumiko-framework/bun-db";
+import { createEventsTable, eventsTable } from "@cosmicdrift/kumiko-framework/event-store";
+import {
+  createTestUser,
+  setupTestStack,
+  type TestStack,
+  testTenantId,
+  unsafeCreateEntityTable,
+} from "@cosmicdrift/kumiko-framework/stack";
+import { resetTestTables } from "@cosmicdrift/kumiko-framework/testing";
+import {
+  createComplianceProfilesFeature,
+  tenantComplianceProfileEntity,
+  tenantComplianceProfileTable,
+} from "../../compliance-profiles";
+import { createDataRetentionFeature } from "../../data-retention";
+import { createSessionsFeature } from "../../sessions";
+import { USER_STATUS, userEntity, userTable } from "../../user";
+import { createUserFeature } from "../../user/feature";
+import { signDeletionToken } from "../deletion-token";
+import { createUserDataRightsFeature } from "../feature";
+import type { SendDeletionVerificationEmailFn } from "../handlers/request-deletion-by-email.write";
+
+const REQUEST_BY_EMAIL = "user-data-rights:write:request-deletion-by-email";
+const CONFIRM_BY_TOKEN = "user-data-rights:write:confirm-deletion-by-token";
+const DELETION_SECRET = "test-deletion-secret-0123456789abcdef";
+const VERIFY_URL = "https://app.example.test/delete-account/confirm";
+
+const tenantA = testTenantId(1);
+const aliceUser = createTestUser({ id: 42, tenantId: tenantA, roles: ["Member"] });
+const ALICE_EMAIL = "alice.anon@example.com";
+
+type VerifyArgs = Parameters<SendDeletionVerificationEmailFn>[0];
+const verifyCalls: VerifyArgs[] = [];
+const sendDeletionVerificationEmail: SendDeletionVerificationEmailFn = async (args) => {
+  verifyCalls.push(args);
+};
+
+let stack: TestStack;
+
+beforeAll(async () => {
+  stack = await setupTestStack({
+    features: [
+      createUserFeature(),
+      createDataRetentionFeature(),
+      createComplianceProfilesFeature(),
+      createSessionsFeature(),
+      createUserDataRightsFeature({
+        deletionTokenSecret: DELETION_SECRET,
+        deletionVerifyUrl: VERIFY_URL,
+        sendDeletionVerificationEmail,
+      }),
+    ],
+    anonymousAccess: { defaultTenantId: tenantA },
+  });
+  await unsafeCreateEntityTable(stack.db, userEntity);
+  await unsafeCreateEntityTable(stack.db, tenantComplianceProfileEntity);
+  await createEventsTable(stack.db);
+});
+
+afterAll(async () => {
+  await stack.cleanup();
+});
+
+beforeEach(async () => {
+  verifyCalls.length = 0;
+  await resetTestTables(stack.db, [userTable, tenantComplianceProfileTable, eventsTable]);
+});
+
+async function seedAlice(status: string = USER_STATUS.Active, email: string = ALICE_EMAIL) {
+  await insertOne(stack.db, userTable, {
+    id: aliceUser.id,
+    tenantId: tenantA,
+    email,
+    passwordHash: "hashed",
+    displayName: "Alice",
+    locale: "de",
+    emailVerified: true,
+    roles: '["Member"]',
+    status,
+    gracePeriodEnd: null,
+  });
+}
+
+function tokenFromLastVerifyCall(): string {
+  const url = new URL(verifyCalls[0]?.verifyUrl ?? "");
+  return url.searchParams.get("token") ?? "";
+}
+
+async function statusOf(): Promise<string | undefined> {
+  const rows = (await selectMany(stack.db, userTable, { id: aliceUser.id })) as Array<{
+    status: string;
+  }>;
+  return rows[0]?.status;
+}
+
+describe("anonymous deletion flow", () => {
+  test("request-by-email (anonym) für aktiven User → success + Verify-Mail mit Token", async () => {
+    await seedAlice();
+
+    const res = await stack.http.raw("POST", "/api/write", {
+      type: REQUEST_BY_EMAIL,
+      payload: { email: ALICE_EMAIL },
+    });
+    expect(res.status).toBe(200);
+    expect(((await res.json()) as { isSuccess: boolean }).isSuccess).toBe(true);
+
+    expect(verifyCalls).toHaveLength(1);
+    expect(verifyCalls[0]?.email).toBe(ALICE_EMAIL);
+    expect(verifyCalls[0]?.verifyUrl.startsWith(`${VERIFY_URL}?token=`)).toBe(true);
+    expect(tokenFromLastVerifyCall().length).toBeGreaterThan(0);
+    // Status noch NICHT geflipt — erst confirm startet die Grace-Period.
+    expect(await statusOf()).toBe(USER_STATUS.Active);
+  });
+
+  test("confirm-by-token (anonym) mit echtem Token → Grace-Period gestartet", async () => {
+    await seedAlice();
+    await stack.http.raw("POST", "/api/write", {
+      type: REQUEST_BY_EMAIL,
+      payload: { email: ALICE_EMAIL },
+    });
+    const token = tokenFromLastVerifyCall();
+
+    const res = await stack.http.raw("POST", "/api/write", {
+      type: CONFIRM_BY_TOKEN,
+      payload: { token },
+    });
+    expect(res.status).toBe(200);
+    const body = (await res.json()) as {
+      isSuccess: boolean;
+      data: { status: string; gracePeriodEnd: string };
+    };
+    expect(body.isSuccess).toBe(true);
+    expect(body.data.status).toBe(USER_STATUS.DeletionRequested);
+    expect(body.data.gracePeriodEnd.length).toBeGreaterThan(0);
+
+    // DB-State tatsächlich geflipt + gracePeriodEnd gesetzt.
+    const rows = (await selectMany(stack.db, userTable, { id: aliceUser.id })) as Array<{
+      status: string;
+      gracePeriodEnd: unknown;
+    }>;
+    expect(rows[0]?.status).toBe(USER_STATUS.DeletionRequested);
+    expect(rows[0]?.gracePeriodEnd).not.toBeNull();
+  });
+
+  test("confirm-replay (anonym): zweites Confirm mit gleichem Token → 422, Status unverändert", async () => {
+    await seedAlice();
+    await stack.http.raw("POST", "/api/write", {
+      type: REQUEST_BY_EMAIL,
+      payload: { email: ALICE_EMAIL },
+    });
+    const token = tokenFromLastVerifyCall();
+
+    const first = await stack.http.raw("POST", "/api/write", {
+      type: CONFIRM_BY_TOKEN,
+      payload: { token },
+    });
+    expect(first.status).toBe(200);
+    expect(await statusOf()).toBe(USER_STATUS.DeletionRequested);
+
+    // Token ist bewusst replaybar (kein single-use); die Replay-Sicherheit kommt
+    // allein aus dem Active-State-Guard — zweites Confirm trifft non-active → 422.
+    const second = await stack.http.raw("POST", "/api/write", {
+      type: CONFIRM_BY_TOKEN,
+      payload: { token },
+    });
+    expect(second.status).toBe(422);
+    expect(await statusOf()).toBe(USER_STATUS.DeletionRequested);
+  });
+
+  test("request-by-email für nicht-existente Email → success, KEINE Mail (enumeration-safe)", async () => {
+    await seedAlice();
+    const res = await stack.http.raw("POST", "/api/write", {
+      type: REQUEST_BY_EMAIL,
+      payload: { email: "ghost@example.com" },
+    });
+    expect(res.status).toBe(200);
+    expect(((await res.json()) as { isSuccess: boolean }).isSuccess).toBe(true);
+    expect(verifyCalls).toHaveLength(0);
+  });
+
+  test("request-by-email für non-active User → success, KEINE Mail", async () => {
+    await seedAlice(USER_STATUS.DeletionRequested);
+    const res = await stack.http.raw("POST", "/api/write", {
+      type: REQUEST_BY_EMAIL,
+      payload: { email: ALICE_EMAIL },
+    });
+    expect(res.status).toBe(200);
+    expect(((await res.json()) as { isSuccess: boolean }).isSuccess).toBe(true);
+    expect(verifyCalls).toHaveLength(0);
+  });
+
+  test("confirm mit Garbage-Token → 422, Status unverändert", async () => {
+    await seedAlice();
+    const res = await stack.http.raw("POST", "/api/write", {
+      type: CONFIRM_BY_TOKEN,
+      payload: { token: "not.a.realtoken" },
+    });
+    expect(res.status).toBe(422);
+    expect(await statusOf()).toBe(USER_STATUS.Active);
+  });
+
+  test("confirm mit falsch-signiertem Token → 422", async () => {
+    await seedAlice();
+    const { token } = signDeletionToken(aliceUser.id, 60, "the-wrong-secret-totally-different");
+    const res = await stack.http.raw("POST", "/api/write", {
+      type: CONFIRM_BY_TOKEN,
+      payload: { token },
+    });
+    expect(res.status).toBe(422);
+    expect(await statusOf()).toBe(USER_STATUS.Active);
+  });
+});
+
+describe("anonymous deletion flow — not configured (kein Secret)", () => {
+  let bareStack: TestStack;
+  const bareVerifyCalls: VerifyArgs[] = [];
+
+  beforeAll(async () => {
+    bareStack = await setupTestStack({
+      features: [
+        createUserFeature(),
+        createDataRetentionFeature(),
+        createComplianceProfilesFeature(),
+        createSessionsFeature(),
+        createUserDataRightsFeature({
+          sendDeletionVerificationEmail: async (args) => {
+            bareVerifyCalls.push(args);
+          },
+        }),
+      ],
+      anonymousAccess: { defaultTenantId: tenantA },
+    });
+    await unsafeCreateEntityTable(bareStack.db, userEntity);
+    await unsafeCreateEntityTable(bareStack.db, tenantComplianceProfileEntity);
+    await createEventsTable(bareStack.db);
+    await insertOne(bareStack.db, userTable, {
+      id: aliceUser.id,
+      tenantId: tenantA,
+      email: ALICE_EMAIL,
+      passwordHash: "hashed",
+      displayName: "Alice",
+      locale: "de",
+      emailVerified: true,
+      roles: '["Member"]',
+      status: USER_STATUS.Active,
+      gracePeriodEnd: null,
+    });
+  });
+
+  afterAll(async () => {
+    await bareStack.cleanup();
+  });
+
+  test("request-by-email ohne Secret → success no-op, KEINE Mail", async () => {
+    const res = await bareStack.http.raw("POST", "/api/write", {
+      type: REQUEST_BY_EMAIL,
+      payload: { email: ALICE_EMAIL },
+    });
+    expect(res.status).toBe(200);
+    expect(((await res.json()) as { isSuccess: boolean }).isSuccess).toBe(true);
+    expect(bareVerifyCalls).toHaveLength(0);
+  });
+
+  test("confirm ohne Secret → 422", async () => {
+    const { token } = signDeletionToken(aliceUser.id, 60, DELETION_SECRET);
+    const res = await bareStack.http.raw("POST", "/api/write", {
+      type: CONFIRM_BY_TOKEN,
+      payload: { token },
+    });
+    expect(res.status).toBe(422);
+  });
+});

package/src/user-data-rights/deletion-token.ts

@@ -0,0 +1,33 @@
+// Thin wrapper around the shared HMAC-signed-token primitive, pinning the
+// purpose to "deletion-request". Mirrors auth-email-password/reset-token.ts —
+// email-verified account deletion is an auth-adjacent proof-of-email-ownership
+// flow, so it reuses the same self-contained token mechanism (no DB row, no
+// Redis: the userId + expiry are baked into the signed token, single-use is
+// not required because the grace-period flip is idempotent on a non-active
+// user).
+
+import type { Temporal } from "temporal-polyfill";
+import { signToken, verifyToken } from "../auth-email-password";
+
+const DELETION_REQUEST_PURPOSE = "deletion-request";
+
+export type VerifyResult =
+  | { readonly ok: true; readonly userId: string; readonly expiresAtMs: number }
+  | { readonly ok: false; readonly reason: "malformed" | "bad_signature" | "expired" };
+
+export function signDeletionToken(
+  userId: string,
+  ttlMinutes: number,
+  secret: string,
+  now?: Temporal.Instant,
+): { token: string; expiresAt: Temporal.Instant } {
+  return signToken(userId, DELETION_REQUEST_PURPOSE, ttlMinutes, secret, now);
+}
+
+export function verifyDeletionToken(
+  token: string,
+  secret: string,
+  now?: Temporal.Instant,
+): VerifyResult {
+  return verifyToken(token, DELETION_REQUEST_PURPOSE, secret, now);
+}

package/src/user-data-rights/feature.ts

@@ -6,6 +6,7 @@ import {
 } from "@cosmicdrift/kumiko-framework/engine";
 import { createFileProviderForTenant } from "../file-foundation";
 import { cancelDeletionWrite } from "./handlers/cancel-deletion.write";
+import { createConfirmDeletionByTokenHandler } from "./handlers/confirm-deletion-by-token.write";
 import { downloadByJobQuery } from "./handlers/download-by-job.query";
 import { downloadByTokenQuery } from "./handlers/download-by-token.query";
 import { exportStatusQuery } from "./handlers/export-status.query";
@@ -16,6 +17,10 @@ import {
   createRequestDeletionHandler,
   type SendDeletionRequestedEmailFn,
 } from "./handlers/request-deletion.write";
+import {
+  createRequestDeletionByEmailHandler,
+  type SendDeletionVerificationEmailFn,
+} from "./handlers/request-deletion-by-email.write";
 import { requestExportWrite } from "./handlers/request-export.write";
 import { restrictAccountWrite } from "./handlers/restrict-account.write";
 import { createRunForgetCleanupHandler } from "./handlers/run-forget-cleanup.write";
@@ -80,12 +85,26 @@ export type UserDataRightsOptions = {
    *  userEmail+tenantIds PRE-tx und reicht sie ephemeral an die
    *  Callback-Implementation (siehe run-forget-cleanup.ts). */
   readonly sendDeletionExecutedEmail?: SendDeletionExecutedEmailFn;
+  /** Anonymer, email-verifizierter Apex-Deletion-Flow (Lockout-sicher).
+   *  HMAC-Secret zum Signieren des Verify-Tokens. Ohne Secret bleibt der
+   *  Flow deaktiviert (request-by-email antwortet still success, confirm-
+   *  by-token weist generisch ab). */
+  readonly deletionTokenSecret?: string;
+  /** Basis-URL des Apex-Confirm-Screens, z.B.
+   *  "https://app.example.com/delete-account/confirm". Der Handler hängt
+   *  `?token=<token>` an. Required wenn deletionTokenSecret gesetzt. */
+  readonly deletionVerifyUrl?: string;
+  /** Versand des Verify-Magic-Links (Schritt 1 des anonymen Flows).
+   *  Best-effort, app-author-wired. MUSS non-blocking sein (enqueue, z.B.
+   *  delivery.notify) — ein synchroner Send reintroduziert ein Timing-Oracle
+   *  für Account-Enumeration (siehe SendDeletionVerificationEmailFn-Doc). */
+  readonly sendDeletionVerificationEmail?: SendDeletionVerificationEmailFn;
 };
 
 export function createUserDataRightsFeature(opts: UserDataRightsOptions = {}): FeatureDefinition {
   return defineFeature("user-data-rights", (r) => {
     r.describe(
-      'Implements GDPR Art. 15 (access / `my-audit-log` query), Art. 17 (erasure / `request-deletion` + `cancel-deletion` + cron cleanup with grace period), Art. 18 (restriction / `restrict-account` + `lift-restriction`), and Art. 20 (portability / async `request-export` \u2192 ZIP via `file-foundation`, Magic-Link download) as first-class HTTP handlers and cron jobs. Each domain feature opts in by calling `r.useExtension(EXT_USER_DATA, "<entity>", { export, delete })` \u2014 the feature then orchestrates the export and forget pipelines across all registered hooks automatically. Requires `user`, `data-retention`, `compliance-profiles`, and `sessions`.',
+      'Implements GDPR Art. 15 (access / `my-audit-log` query), Art. 17 (erasure / `request-deletion` + `cancel-deletion`, plus the anonymous email-verified `request-deletion-by-email` + `confirm-deletion-by-token` flow for lockout-safe self-service, + cron cleanup with grace period), Art. 18 (restriction / `restrict-account` + `lift-restriction`), and Art. 20 (portability / async `request-export` \u2192 ZIP via `file-foundation`, Magic-Link download) as first-class HTTP handlers and cron jobs. Each domain feature opts in by calling `r.useExtension(EXT_USER_DATA, "<entity>", { export, delete })` \u2014 the feature then orchestrates the export and forget pipelines across all registered hooks automatically. Requires `user`, `data-retention`, `compliance-profiles`, and `sessions`.',
     );
     r.requires("user", "data-retention", "compliance-profiles", "sessions");
     r.usesApi("compliance.forTenant");
@@ -128,6 +147,28 @@ export function createUserDataRightsFeature(opts: UserDataRightsOptions = {}): F
     );
     r.writeHandler(cancelDeletionWrite);
 
+    // Anonymer, email-verifizierter Apex-Deletion-Flow (Lockout-sicher):
+    // request-by-email (Schritt 1, Magic-Link) + confirm-by-token (Schritt 2,
+    // startet dieselbe Grace-Period via startDeletionGracePeriod).
+    r.writeHandler(
+      createRequestDeletionByEmailHandler({
+        ...(opts.deletionTokenSecret !== undefined && {
+          deletionTokenSecret: opts.deletionTokenSecret,
+        }),
+        ...(opts.deletionVerifyUrl !== undefined && { deletionVerifyUrl: opts.deletionVerifyUrl }),
+        ...(opts.sendDeletionVerificationEmail !== undefined && {
+          sendDeletionVerificationEmail: opts.sendDeletionVerificationEmail,
+        }),
+      }),
+    );
+    r.writeHandler(
+      createConfirmDeletionByTokenHandler(
+        opts.deletionTokenSecret !== undefined
+          ? { deletionTokenSecret: opts.deletionTokenSecret }
+          : {},
+      ),
+    );
+
     // S2.U5b — Cleanup-Runner als privileged-Handler. Atom 5b: Wenn
     // sendDeletionExecutedEmail gesetzt, reicht der Handler den Callback
     // an runForgetCleanup weiter (Worker cached userEmail+tenantIds

package/src/user-data-rights/handlers/confirm-deletion-by-token.write.ts

@@ -0,0 +1,48 @@
+import { defineWriteHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { UnprocessableError, writeFailure } from "@cosmicdrift/kumiko-framework/errors";
+import { z } from "zod";
+import { USER_STATUS } from "../../user";
+import { verifyDeletionToken } from "../deletion-token";
+import { startDeletionGracePeriod } from "./deletion-grace-period";
+
+export type ConfirmDeletionByTokenOptions = {
+  readonly deletionTokenSecret?: string;
+};
+
+// Generischer 422 für jeden Token-Fehlerpfad (malformed / bad_signature /
+// expired / kein Secret) — kein Signal ob ein Token zu einem User gehört.
+function invalidToken(): UnprocessableError {
+  return new UnprocessableError("invalid_or_expired_token", {
+    details: { reason: "invalid_or_expired_token" },
+  });
+}
+
+// Anonymer Apex-Flow Schritt 2: Verify-Link-Target. Verifiziert das
+// HMAC-Token, extrahiert die userId und startet die Grace-Period über die
+// geteilte Logik. Idempotent: ein zweites Confirm trifft auf den bereits
+// geflippten (non-active) User → user_not_in_active_state, kein Schaden.
+export function createConfirmDeletionByTokenHandler(opts: ConfirmDeletionByTokenOptions = {}) {
+  return defineWriteHandler({
+    name: "confirm-deletion-by-token",
+    schema: z.object({ token: z.string().min(1) }),
+    access: { roles: ["anonymous", "Member", "User", "TenantAdmin", "SystemAdmin"] },
+    rateLimit: { per: "ip", limit: 10, windowSeconds: 60 },
+    handler: async (event, ctx) => {
+      if (!opts.deletionTokenSecret) return writeFailure(invalidToken());
+
+      const verified = verifyDeletionToken(event.payload.token, opts.deletionTokenSecret);
+      if (!verified.ok) return writeFailure(invalidToken());
+
+      const res = await startDeletionGracePeriod(ctx, verified.userId, event.user.tenantId);
+      if (!res.ok) return writeFailure(res.error);
+
+      return {
+        isSuccess: true as const,
+        data: {
+          status: USER_STATUS.DeletionRequested,
+          gracePeriodEnd: res.gracePeriodEnd.toString(),
+        },
+      };
+    },
+  });
+}

package/src/user-data-rights/handlers/deletion-grace-period.ts

@@ -0,0 +1,68 @@
+import { fetchOne, updateMany } from "@cosmicdrift/kumiko-framework/bun-db";
+import { addDurationSpec, type DurationSpec } from "@cosmicdrift/kumiko-framework/compliance";
+import { createSystemUser, type HandlerContext } from "@cosmicdrift/kumiko-framework/engine";
+import { UnprocessableError } from "@cosmicdrift/kumiko-framework/errors";
+import { getTemporal } from "@cosmicdrift/kumiko-framework/time";
+import { USER_STATUS, userTable } from "../../user";
+
+type Instant = InstanceType<ReturnType<typeof getTemporal>["Instant"]>;
+
+export type StartGracePeriodResult =
+  | { readonly ok: true; readonly gracePeriodEnd: Instant; readonly userEmail: string }
+  | { readonly ok: false; readonly error: UnprocessableError };
+
+// Flippt einen aktiven User auf DeletionRequested + setzt gracePeriodEnd aus
+// dem Compliance-Profile. Geteilt zwischen dem authentifizierten
+// request-deletion-Pfad (event.user) und dem anonymen confirm-by-token-Pfad
+// (userId aus verifiziertem Token) — eine Quelle für die Grace-Period-Logik.
+//
+// `complianceTenantId`: Tenant dessen Compliance-Profile die Grace-Dauer
+// liefert. Authenticated = aktiver Tenant des Users; anonym = Dispatch-Tenant
+// der Apex-Surface. Die User-Row ist tenant-agnostisch (Account-weite
+// Löschung), nur die Grace-Dauer ist tenant-konfiguriert.
+export async function startDeletionGracePeriod(
+  ctx: HandlerContext,
+  userId: string,
+  complianceTenantId: string,
+): Promise<StartGracePeriodResult> {
+  const userRow = await fetchOne<{ status: string; email: string }>(ctx.db.raw, userTable, {
+    id: userId,
+  });
+  if (!userRow) {
+    return {
+      ok: false,
+      error: new UnprocessableError("user_not_found", {
+        details: { reason: "user_not_found", userId },
+      }),
+    };
+  }
+  if (userRow["status"] !== USER_STATUS.Active) {
+    return {
+      ok: false,
+      error: new UnprocessableError("user_not_in_active_state", {
+        details: { reason: "user_not_in_active_state", currentStatus: userRow["status"] },
+      }),
+    };
+  }
+
+  // @cast-boundary engine-payload — queryAs liefert unknown, narrow auf den
+  // effektiven Profile-Shape (siehe request-deletion-Original).
+  const profile = (await ctx.queryAs(
+    createSystemUser(complianceTenantId),
+    "compliance-profiles:query:for-tenant",
+    {},
+  )) as { profile: { userRights: { gracePeriod: DurationSpec } } };
+
+  const gracePeriod = profile.profile.userRights.gracePeriod;
+  const T = getTemporal();
+  const gracePeriodEnd = addDurationSpec(T.Now.instant(), gracePeriod);
+
+  await updateMany(
+    ctx.db.raw,
+    userTable,
+    { status: USER_STATUS.DeletionRequested, gracePeriodEnd },
+    { id: userId },
+  );
+
+  return { ok: true, gracePeriodEnd, userEmail: userRow["email"] ?? "" };
+}

package/src/user-data-rights/handlers/request-deletion-by-email.write.ts

@@ -0,0 +1,94 @@
+import { fetchOne } from "@cosmicdrift/kumiko-framework/bun-db";
+import { defineWriteHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { z } from "zod";
+import { USER_STATUS, userTable } from "../../user";
+import { signDeletionToken } from "../deletion-token";
+
+// TTL des Verify-Links. 60 min — lang genug für einen Mail-Roundtrip,
+// kurz genug dass ein abgefangener Link nicht ewig gültig ist.
+const DELETION_VERIFY_TTL_MINUTES = 60;
+
+// Apex-Magic-Link-Versand für den anonymen Deletion-Request. Der Handler
+// gibt den Link NICHT zurück (content-Enumeration-Safety) — er ruft den
+// Callback direkt, analog sendDeletionRequestedEmail.
+//
+// WICHTIG (Timing-Oracle): Der Callback MUSS non-blocking sein (enqueue, z.B.
+// delivery.notify / Job), NICHT synchron senden. Er läuft nur im
+// existierenden-aktiven-User-Pfad; ein synchroner Send macht die
+// Response-Latenz für reale Accounts messbar länger als für nicht-existente
+// → Enumeration über Timing. Ein schnelles enqueue gleicht das praktisch aus.
+// Vollständige Timing-Angleichung (immer äquivalente Arbeit) ist v1-Follow-up.
+export type SendDeletionVerificationEmailFn = (args: {
+  readonly email: string;
+  readonly verifyUrl: string;
+  readonly expiresAt: string;
+}) => Promise<void>;
+
+export type RequestDeletionByEmailOptions = {
+  /** HMAC-Secret zum Signieren des Verify-Tokens. Ohne Secret ist der Flow
+   *  deaktiviert (Handler antwortet still mit success, kein Link). */
+  readonly deletionTokenSecret?: string;
+  /** Basis-URL des Apex-Confirm-Screens, z.B.
+   *  "https://app.example.com/delete-account/confirm". Der Handler hängt
+   *  `?token=<token>` an. Ohne URL kein Link. */
+  readonly deletionVerifyUrl?: string;
+  readonly sendDeletionVerificationEmail?: SendDeletionVerificationEmailFn;
+};
+
+// Anonymer Apex-Flow Schritt 1: "Account-Löschung beantragen" per Email.
+// DSGVO-relevant gerade wenn der User sich NICHT mehr einloggen kann
+// (Lockout). Email → Magic-Link → confirm-deletion-by-token.
+//
+// Enumeration-safe (content): antwortet IMMER mit derselben success-Shape,
+// egal ob die Email existiert, der User aktiv ist oder der Flow konfiguriert
+// ist. Ein Link wird nur für einen existierenden, aktiven User generiert.
+// Timing-Safety hängt am non-blocking Callback (siehe Type-Doc oben).
+export function createRequestDeletionByEmailHandler(opts: RequestDeletionByEmailOptions = {}) {
+  return defineWriteHandler({
+    name: "request-deletion-by-email",
+    schema: z.object({ email: z.email() }),
+    access: { roles: ["anonymous", "Member", "User", "TenantAdmin", "SystemAdmin"] },
+    // Defense-in-depth gegen Email-Probing auf dem anonymen Endpoint.
+    rateLimit: { per: "ip", limit: 10, windowSeconds: 60 },
+    handler: async (event, ctx) => {
+      const success = { isSuccess: true as const, data: { kind: "requested" as const } };
+
+      // not-configured-safe: ohne Secret/URL kein Link, aber gleiche Antwort.
+      if (!opts.deletionTokenSecret || !opts.deletionVerifyUrl) return success;
+
+      // userTable ist tenant-agnostisch (Account-weite Löschung) → ctx.db.raw.
+      const userRow = await fetchOne<{ id: string; status: string; email: string }>(
+        ctx.db.raw,
+        userTable,
+        { email: event.payload.email },
+      );
+      if (!userRow || userRow["status"] !== USER_STATUS.Active || !userRow["email"]) {
+        return success;
+      }
+
+      const { token, expiresAt } = signDeletionToken(
+        userRow["id"],
+        DELETION_VERIFY_TTL_MINUTES,
+        opts.deletionTokenSecret,
+      );
+      const verifyUrl = `${opts.deletionVerifyUrl}?token=${encodeURIComponent(token)}`;
+
+      if (opts.sendDeletionVerificationEmail) {
+        try {
+          await opts.sendDeletionVerificationEmail({
+            email: userRow["email"],
+            verifyUrl,
+            expiresAt: expiresAt.toString(),
+          });
+        } catch (err) {
+          // biome-ignore lint/suspicious/noConsole: operator-visibility for email-send-failure
+          console.warn(
+            `[user-data-rights:request-deletion-by-email] send failed err=${err instanceof Error ? err.message : String(err)}`,
+          );
+        }
+      }
+
+      return success;
+    },
+  });
+}

package/src/user-data-rights/handlers/request-deletion.write.ts

@@ -1,10 +1,8 @@
-import { fetchOne, updateMany } from "@cosmicdrift/kumiko-framework/bun-db";
-import { addDurationSpec, type DurationSpec } from "@cosmicdrift/kumiko-framework/compliance";
-import { createSystemUser, defineWriteHandler } from "@cosmicdrift/kumiko-framework/engine";
-import { UnprocessableError, writeFailure } from "@cosmicdrift/kumiko-framework/errors";
-import { getTemporal } from "@cosmicdrift/kumiko-framework/time";
+import { defineWriteHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { writeFailure } from "@cosmicdrift/kumiko-framework/errors";
 import { z } from "zod";
-import { USER_STATUS, userTable } from "../../user";
+import { USER_STATUS } from "../../user";
+import { startDeletionGracePeriod } from "./deletion-grace-period";
 
 // Atom 5b — Email-Notification beim deletion-requested-flip. Pattern:
 // password-reset-Callback aus auth-routes.ts. Best-effort — Throw beim
@@ -25,73 +23,23 @@ export type RequestDeletionOptions = {
 };
 
 // POST /api/user/request-deletion (S2.U5a) — DSGVO Art. 17 Forget-Antrag.
-// Flippt status=Active → deletionRequested, setzt gracePeriodEnd aus
-// Compliance-Profile. Account-weite Semantik (1 User-Row global), siehe
-// docs/plans/architecture/user-data-rights.md "Cross-Tenant-Semantik".
+// Flippt status=Active → deletionRequested, setzt gracePeriodEnd aus dem
+// Compliance-Profile (geteilte Logik: startDeletionGracePeriod). Account-
+// weite Semantik (1 User-Row global), siehe docs/plans/architecture/
+// user-data-rights.md "Cross-Tenant-Semantik".
 export function createRequestDeletionHandler(opts: RequestDeletionOptions = {}) {
   return defineWriteHandler({
     name: "request-deletion",
     schema: z.object({}),
     access: { openToAll: true },
     handler: async (event, ctx) => {
-      // ctx.db.raw (kein TenantDb-Wrapper) weil User-Entity tenant-agnostisch
-      // ist — siehe Plan-Doc Cross-Tenant-Section.
-      const userRow = await fetchOne<{ status: string; email: string }>(ctx.db.raw, userTable, {
-        id: event.user.id,
-      });
-
-      if (!userRow) {
-        return writeFailure(
-          new UnprocessableError("user_not_found", {
-            details: { reason: "user_not_found", userId: event.user.id },
-          }),
-        );
-      }
-
-      if (userRow["status"] !== USER_STATUS.Active) {
-        return writeFailure(
-          new UnprocessableError("user_not_in_active_state", {
-            details: {
-              reason: "user_not_in_active_state",
-              currentStatus: userRow["status"],
-            },
-          }),
-        );
-      }
-
-      // Compliance-Profile fuer gracePeriod via Cross-Feature-Query. Pattern:
-      // ctx.queryAs(user, qn, payload) — siehe auth-email-password/change-
-      // password.write.ts. @cast-boundary engine-bridge — queryAs liefert
-      // unknown, narrow auf den effektiven Profile-Shape.
-      const profile = (await ctx.queryAs(
-        createSystemUser(event.user.tenantId),
-        "compliance-profiles:query:for-tenant",
-        {},
-      )) as { profile: { userRights: { gracePeriod: DurationSpec } } }; // @cast-boundary engine-payload
-
-      // addDurationSpec deckt `{days}` und `{hours}` ab. App-Server-Clock
-      // ist authoritative — instant() customType nimmt Temporal.Instant
-      // direkt, kein SQL-interval-Bypass des Codecs.
-      const gracePeriod = profile.profile.userRights.gracePeriod;
-      const T = getTemporal();
-      const gracePeriodEnd = addDurationSpec(T.Now.instant(), gracePeriod);
-
-      await updateMany(
-        ctx.db.raw,
-        userTable,
-        {
-          status: USER_STATUS.DeletionRequested,
-          gracePeriodEnd,
-        },
-        { id: event.user.id },
-      );
+      const res = await startDeletionGracePeriod(ctx, event.user.id, event.user.tenantId);
+      if (!res.ok) return writeFailure(res.error);
+      const { gracePeriodEnd, userEmail } = res;
 
       // Best-effort Email-Notification. Send-Failure darf das Write nicht
-      // killen — siehe Type-Doc oben. console.warn ist die Operator-
-      // Sichtbarkeit; defineWriteHandler-Context fuehrt aktuell keinen
-      // structured-logger durch, Refactor-Kandidat wenn ctx.log threadet.
-      const userEmail = userRow["email"];
-      if (opts.sendDeletionRequestedEmail && userEmail && userEmail.length > 0) {
+      // killen — siehe Type-Doc oben.
+      if (opts.sendDeletionRequestedEmail && userEmail.length > 0) {
         try {
           await opts.sendDeletionRequestedEmail({
             userId: event.user.id,
@@ -108,8 +56,7 @@ export function createRequestDeletionHandler(opts: RequestDeletionOptions = {})
       }
 
       // Response liefert den absoluten gracePeriodEnd-Timestamp damit
-      // Frontend/Audit/Cleanup-Runner alle denselben Wert lesen — nicht
-      // den Input-`{days|hours}`, der ist Konfiguration nicht Result.
+      // Frontend/Audit/Cleanup-Runner alle denselben Wert lesen.
       return {
         isSuccess: true as const,
         data: {

package/src/user-data-rights/index.ts

@@ -1,4 +1,5 @@
 export { createUserDataRightsFeature, type UserDataRightsOptions } from "./feature";
+export type { SendDeletionVerificationEmailFn } from "./handlers/request-deletion-by-email.write";
 export type {
   SendExportFailedEmailFn,
   SendExportReadyEmailFn,

package/src/user-data-rights/web/__tests__/deletion-screens.test.tsx

@@ -0,0 +1,103 @@
+import { describe, expect, test } from "bun:test";
+import type { Dispatcher } from "@cosmicdrift/kumiko-headless";
+import {
+  createStaticLocaleResolver,
+  DispatcherProvider,
+  kumikoDefaultTranslations,
+  LocaleProvider,
+  PrimitivesProvider,
+} from "@cosmicdrift/kumiko-renderer";
+import { defaultPrimitives } from "@cosmicdrift/kumiko-renderer-web";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { ConfirmAccountDeletionScreen } from "../confirm-deletion-screen";
+import { defaultTranslations } from "../i18n";
+import { RequestAccountDeletionScreen } from "../request-deletion-screen";
+
+const resolver = createStaticLocaleResolver({ locale: "de" });
+
+type WriteCall = { readonly type: string; readonly payload: unknown };
+
+function makeDispatcher(ok: boolean, calls: WriteCall[]): Dispatcher {
+  // test-stub: die Screens rufen ausschließlich dispatcher.write — der Rest
+  // des Dispatcher-Contracts wird hier nicht gebraucht.
+  return {
+    write: async (type: string, payload: unknown) => {
+      calls.push({ type, payload });
+      return ok
+        ? { isSuccess: true, data: {} }
+        : { isSuccess: false, error: { reason: "invalid_or_expired_token", message: "nope" } };
+    },
+  } as unknown as Dispatcher;
+}
+
+function renderWith(ui: ReactElement, dispatcher: Dispatcher): void {
+  render(
+    <PrimitivesProvider value={defaultPrimitives}>
+      <LocaleProvider
+        resolver={resolver}
+        fallbackBundles={[defaultTranslations, kumikoDefaultTranslations]}
+      >
+        <DispatcherProvider dispatcher={dispatcher}>{ui}</DispatcherProvider>
+      </LocaleProvider>
+    </PrimitivesProvider>,
+  );
+}
+
+describe("RequestAccountDeletionScreen", () => {
+  test("Submit → write(request-deletion-by-email) + enumeration-safe Success", async () => {
+    const calls: WriteCall[] = [];
+    renderWith(<RequestAccountDeletionScreen />, makeDispatcher(true, calls));
+
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "a@b.com" } });
+    fireEvent.click(screen.getByRole("button"));
+
+    await waitFor(() => expect(screen.getByText(/Mail gesendet/)).toBeTruthy());
+    expect(calls).toHaveLength(1);
+    expect(calls[0]?.type).toBe("user-data-rights:write:request-deletion-by-email");
+    expect(calls[0]?.payload).toEqual({ email: "a@b.com" });
+  });
+
+  test("write-Failure → Error-Banner", async () => {
+    const calls: WriteCall[] = [];
+    renderWith(<RequestAccountDeletionScreen />, makeDispatcher(false, calls));
+
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "a@b.com" } });
+    fireEvent.click(screen.getByRole("button"));
+
+    await waitFor(() => expect(screen.getByText(/schief gegangen/)).toBeTruthy());
+    expect(screen.queryByText(/Mail gesendet/)).toBeNull();
+  });
+});
+
+describe("ConfirmAccountDeletionScreen", () => {
+  test("ohne ?token → missingToken, kein Confirm-Button", () => {
+    window.history.replaceState({}, "", "/delete-account/confirm");
+    renderWith(<ConfirmAccountDeletionScreen />, makeDispatcher(true, []));
+    expect(screen.getByText(/Kein Token/)).toBeTruthy();
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  test("mit ?token → Confirm dispatcht confirm-deletion-by-token + Success", async () => {
+    window.history.replaceState({}, "", "/delete-account/confirm?token=tok-123");
+    const calls: WriteCall[] = [];
+    renderWith(<ConfirmAccountDeletionScreen />, makeDispatcher(true, calls));
+
+    fireEvent.click(screen.getByRole("button"));
+
+    await waitFor(() => expect(screen.getByText(/vorgemerkt/)).toBeTruthy());
+    expect(calls).toHaveLength(1);
+    expect(calls[0]?.type).toBe("user-data-rights:write:confirm-deletion-by-token");
+    expect(calls[0]?.payload).toEqual({ token: "tok-123" });
+  });
+
+  test("write-Failure → invalidToken-Banner, kein Success", async () => {
+    window.history.replaceState({}, "", "/delete-account/confirm?token=bad");
+    renderWith(<ConfirmAccountDeletionScreen />, makeDispatcher(false, []));
+
+    fireEvent.click(screen.getByRole("button"));
+
+    await waitFor(() => expect(screen.getByText(/ungültig oder abgelaufen/)).toBeTruthy());
+    expect(screen.queryByText(/vorgemerkt/)).toBeNull();
+  });
+});

package/src/user-data-rights/web/confirm-deletion-screen.tsx

@@ -0,0 +1,85 @@
+// @runtime client
+// ConfirmAccountDeletionScreen — anonymer Apex-Screen Schritt 2. Liest das
+// `?token` aus der Verify-Link-URL und dispatcht beim Bestätigen
+// user-data-rights:write:confirm-deletion-by-token → startet die Grace-Period.
+//
+// App mountet den Screen unter der deletionVerifyUrl-Route (z.B.
+// /delete-account/confirm) via createPublicSurface.
+
+import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type ReactNode, useState } from "react";
+
+const CONFIRM_BY_TOKEN = "user-data-rights:write:confirm-deletion-by-token";
+
+type Phase = "idle" | "submitting" | "success" | "missing" | "invalid";
+
+function readToken(): string {
+  if (typeof window === "undefined") return "";
+  return new URLSearchParams(window.location.search).get("token") ?? "";
+}
+
+export type ConfirmAccountDeletionScreenProps = {
+  readonly title?: string;
+};
+
+export function ConfirmAccountDeletionScreen({
+  title,
+}: ConfirmAccountDeletionScreenProps): ReactNode {
+  const t = useTranslation();
+  const dispatcher = useDispatcher();
+  const { Button, Banner } = usePrimitives();
+  const [token] = useState(readToken);
+  const [phase, setPhase] = useState<Phase>(token.length > 0 ? "idle" : "missing");
+
+  const doConfirm = async (): Promise<void> => {
+    setPhase("submitting");
+    try {
+      const res = await dispatcher.write(CONFIRM_BY_TOKEN, { token });
+      setPhase(res.isSuccess ? "success" : "invalid");
+    } catch {
+      setPhase("invalid");
+    }
+  };
+
+  return (
+    <div className="w-full max-w-sm mx-auto rounded-lg border bg-card text-card-foreground shadow-sm">
+      <div className="flex flex-col space-y-1.5 p-6 pb-4">
+        <h1 className="text-xl font-semibold tracking-tight">
+          {title ?? t("userDataRights.deletion.confirm.title")}
+        </h1>
+      </div>
+      <div className="p-6 pt-0 flex flex-col gap-4">
+        {phase === "success" ? (
+          <Banner variant="info">
+            <p className="font-medium text-foreground">
+              {t("userDataRights.deletion.confirm.successTitle")}
+            </p>
+            <p className="mt-1">{t("userDataRights.deletion.confirm.successBody")}</p>
+          </Banner>
+        ) : phase === "missing" ? (
+          <Banner variant="error">{t("userDataRights.deletion.confirm.missingToken")}</Banner>
+        ) : (
+          <>
+            <p className="text-sm text-muted-foreground">
+              {t("userDataRights.deletion.confirm.intro")}
+            </p>
+            {phase === "invalid" && (
+              <Banner variant="error">{t("userDataRights.deletion.confirm.invalidToken")}</Banner>
+            )}
+            <Button
+              type="button"
+              variant="danger"
+              loading={phase === "submitting"}
+              disabled={phase === "submitting"}
+              onClick={() => void doConfirm()}
+            >
+              {phase === "submitting"
+                ? t("userDataRights.deletion.confirm.submitting")
+                : t("userDataRights.deletion.confirm.submit")}
+            </Button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/user-data-rights/web/i18n.ts

@@ -0,0 +1,60 @@
+// @runtime client
+// Default-Bundle für die Apex-Deletion-Screens. Apps hängen es als
+// Fallback-Bundle in den LocaleProvider (createPublicSurface clientFeatures
+// oder direkt) und können einzelne Keys überschreiben. Keys: `userDataRights.
+// deletion.<step>.<slug>`.
+
+import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+
+export const defaultTranslations: TranslationsByLocale = {
+  de: {
+    "userDataRights.deletion.request.title": "Account-Löschung beantragen",
+    "userDataRights.deletion.request.intro":
+      "Gib die E-Mail-Adresse deines Kontos ein. Falls ein Konto existiert, schicken wir dir einen Bestätigungs-Link zum Löschen.",
+    "userDataRights.deletion.request.email": "E-Mail",
+    "userDataRights.deletion.request.submit": "Bestätigungs-Link anfordern",
+    "userDataRights.deletion.request.submitting": "…",
+    "userDataRights.deletion.request.successTitle": "Mail gesendet",
+    "userDataRights.deletion.request.successBody":
+      "Falls die E-Mail in unserem System existiert, ist eine Nachricht mit einem Bestätigungs-Link unterwegs. Bitte schau in deinen Posteingang.",
+    "userDataRights.deletion.request.error": "Etwas ist schief gegangen. Bitte erneut versuchen.",
+    "userDataRights.deletion.confirm.title": "Account-Löschung bestätigen",
+    "userDataRights.deletion.confirm.intro":
+      "Mit dem Bestätigen startet die Lösch-Frist. Bis sie abläuft kannst du die Löschung im eingeloggten Account wieder abbrechen.",
+    "userDataRights.deletion.confirm.submit": "Löschung bestätigen",
+    "userDataRights.deletion.confirm.submitting": "…",
+    "userDataRights.deletion.confirm.successTitle": "Löschung vorgemerkt",
+    "userDataRights.deletion.confirm.successBody":
+      "Dein Account wird nach Ablauf der Frist gelöscht. Du kannst die Löschung bis dahin im eingeloggten Account abbrechen.",
+    "userDataRights.deletion.confirm.invalidToken":
+      "Der Link ist ungültig oder abgelaufen. Bitte fordere einen neuen an.",
+    "userDataRights.deletion.confirm.missingToken":
+      "Kein Token im Link gefunden. Bitte öffne den Link aus der E-Mail erneut.",
+    "userDataRights.deletion.confirm.error": "Etwas ist schief gegangen. Bitte erneut versuchen.",
+  },
+  en: {
+    "userDataRights.deletion.request.title": "Request account deletion",
+    "userDataRights.deletion.request.intro":
+      "Enter the email address of your account. If an account exists, we'll send you a confirmation link to delete it.",
+    "userDataRights.deletion.request.email": "Email",
+    "userDataRights.deletion.request.submit": "Request confirmation link",
+    "userDataRights.deletion.request.submitting": "…",
+    "userDataRights.deletion.request.successTitle": "Email sent",
+    "userDataRights.deletion.request.successBody":
+      "If the email exists in our system, a message with a confirmation link is on its way. Please check your inbox.",
+    "userDataRights.deletion.request.error": "Something went wrong. Please try again.",
+    "userDataRights.deletion.confirm.title": "Confirm account deletion",
+    "userDataRights.deletion.confirm.intro":
+      "Confirming starts the deletion grace period. Until it ends you can cancel the deletion from your logged-in account.",
+    "userDataRights.deletion.confirm.submit": "Confirm deletion",
+    "userDataRights.deletion.confirm.submitting": "…",
+    "userDataRights.deletion.confirm.successTitle": "Deletion scheduled",
+    "userDataRights.deletion.confirm.successBody":
+      "Your account will be deleted after the grace period. You can cancel the deletion from your logged-in account until then.",
+    "userDataRights.deletion.confirm.invalidToken":
+      "The link is invalid or expired. Please request a new one.",
+    "userDataRights.deletion.confirm.missingToken":
+      "No token found in the link. Please open the link from the email again.",
+    "userDataRights.deletion.confirm.error": "Something went wrong. Please try again.",
+  },
+};

package/src/user-data-rights/web/index.ts

@@ -0,0 +1,12 @@
+// @runtime client
+// Public exports für die Browser-Seite des user-data-rights Features —
+// die anonymen Apex-Deletion-Screens. Konsumiert via Sub-Path-Export
+// `@cosmicdrift/kumiko-bundled-features/user-data-rights/web`. Die Server-
+// Seite (defineFeature, Handler) lebt unter `.../user-data-rights` und hat
+// keine React-/DOM-Deps.
+
+export type { ConfirmAccountDeletionScreenProps } from "./confirm-deletion-screen";
+export { ConfirmAccountDeletionScreen } from "./confirm-deletion-screen";
+export { defaultTranslations } from "./i18n";
+export type { RequestAccountDeletionScreenProps } from "./request-deletion-screen";
+export { RequestAccountDeletionScreen } from "./request-deletion-screen";

package/src/user-data-rights/web/request-deletion-screen.tsx

@@ -0,0 +1,96 @@
+// @runtime client
+// RequestAccountDeletionScreen — anonymer Apex-Screen Schritt 1. Email-Form
+// → user-data-rights:write:request-deletion-by-email. Enumeration-safe: zeigt
+// unconditional ein "Falls Account existiert, Mail unterwegs"-Confirm, auch
+// wenn der Server intern erkannt hat dass die Email nicht existiert.
+//
+// App mountet den Screen unter einer Apex-Route (z.B. /delete-account) via
+// createPublicSurface; die Page-Shell liefert die Chrome.
+
+import { useDispatcher, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { type FormEvent, type ReactNode, useState } from "react";
+
+const REQUEST_BY_EMAIL = "user-data-rights:write:request-deletion-by-email";
+
+export type RequestAccountDeletionScreenProps = {
+  readonly title?: string;
+};
+
+export function RequestAccountDeletionScreen({
+  title,
+}: RequestAccountDeletionScreenProps): ReactNode {
+  const t = useTranslation();
+  const dispatcher = useDispatcher();
+  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const [email, setEmail] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [done, setDone] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const doSubmit = async (): Promise<void> => {
+    setSubmitting(true);
+    setError(null);
+    try {
+      const res = await dispatcher.write(REQUEST_BY_EMAIL, { email });
+      if (res.isSuccess) {
+        setDone(true);
+      } else {
+        setError(t("userDataRights.deletion.request.error"));
+      }
+    } catch {
+      setError(t("userDataRights.deletion.request.error"));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    void doSubmit();
+  };
+
+  return (
+    <div className="w-full max-w-sm mx-auto rounded-lg border bg-card text-card-foreground shadow-sm">
+      <div className="flex flex-col space-y-1.5 p-6 pb-4">
+        <h1 className="text-xl font-semibold tracking-tight">
+          {title ?? t("userDataRights.deletion.request.title")}
+        </h1>
+      </div>
+      {done ? (
+        <div className="p-6 pt-0">
+          <Banner variant="info">
+            <p className="font-medium text-foreground">
+              {t("userDataRights.deletion.request.successTitle")}
+            </p>
+            <p className="mt-1">{t("userDataRights.deletion.request.successBody")}</p>
+          </Banner>
+        </div>
+      ) : (
+        <div className="p-6 pt-0 flex flex-col gap-4">
+          <p className="text-sm text-muted-foreground">
+            {t("userDataRights.deletion.request.intro")}
+          </p>
+          <Form onSubmit={onSubmit}>
+            <Field id="delete-email" label={t("userDataRights.deletion.request.email")} required>
+              <Input
+                kind="text"
+                id="delete-email"
+                name="delete-email"
+                value={email}
+                onChange={setEmail}
+                disabled={submitting}
+                required
+              />
+            </Field>
+            {error !== null && <Banner variant="error">{error}</Banner>}
+            <Button type="submit" loading={submitting} disabled={submitting}>
+              {submitting
+                ? t("userDataRights.deletion.request.submitting")
+                : t("userDataRights.deletion.request.submit")}
+            </Button>
+          </Form>
+        </div>
+      )}
+    </div>
+  );
+}