@cosmicdrift/kumiko-bundled-features 0.38.0 → 0.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.38.0",
+  "version": "0.39.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>",
@@ -48,6 +48,8 @@
     "./user": "./src/user/index.ts",
     "./user/seeding": "./src/user/seeding.ts",
     "./user/testing": "./src/user/testing.ts",
+    "./user-profile": "./src/user-profile/index.ts",
+    "./user-profile/web": "./src/user-profile/web/index.ts",
     "./auth-email-password": "./src/auth-email-password/index.ts",
     "./auth-email-password/constants": "./src/auth-email-password/constants.ts",
     "./auth-email-password/seeding": "./src/auth-email-password/seeding.ts",
@@ -74,10 +76,10 @@
     "./step-dispatcher": "./src/step-dispatcher/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.37.0",
-    "@cosmicdrift/kumiko-framework": "0.37.0",
-    "@cosmicdrift/kumiko-renderer": "0.37.0",
-    "@cosmicdrift/kumiko-renderer-web": "0.37.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.38.0",
+    "@cosmicdrift/kumiko-framework": "0.38.0",
+    "@cosmicdrift/kumiko-renderer": "0.38.0",
+    "@cosmicdrift/kumiko-renderer-web": "0.38.0",
     "@mollie/api-client": "^4.5.0",
     "@node-rs/argon2": "^2.0.2",
     "@types/nodemailer": "^8.0.0",

package/src/auth-email-password/i18n.ts

@@ -207,17 +207,7 @@ export const defaultTranslations: TranslationsByLocale = {
   },
 };
 
-/** Merged zwei TranslationsByLocale-Maps — der override gewinnt pro Key,
- *  die Locales werden zusammengeführt. Wird von emailPasswordClient()
- *  benutzt, um App-Overrides über die Defaults zu legen. */
-export function mergeTranslations(
-  base: TranslationsByLocale,
-  override: TranslationsByLocale,
-): TranslationsByLocale {
-  const locales = new Set([...Object.keys(base), ...Object.keys(override)]);
-  const merged: Record<string, Record<string, string>> = {};
-  for (const locale of locales) {
-    merged[locale] = { ...(base[locale] ?? {}), ...(override[locale] ?? {}) };
-  }
-  return merged;
-}
+// Kanonische Implementierung lebt jetzt im Renderer (neben
+// TranslationsByLocale) — Re-Export hält die bestehende Import-Surface
+// (auth-email-password/web) stabil.
+export { mergeTranslations } from "@cosmicdrift/kumiko-renderer";

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

@@ -5,7 +5,7 @@
 // `@cosmicdrift/kumiko-bundled-features/auth-email-password` und hat keine
 // React-/DOM-Deps. Trennung bleibt sauber so wie renderer vs renderer-web.
 
-export { defaultTranslations } from "../i18n";
+export { defaultTranslations, mergeTranslations } from "../i18n";
 export type {
   AuthTokenFailure,
   CurrentUserProfile,

package/src/user-profile/__tests__/change-email.integration.test.ts

@@ -0,0 +1,222 @@
+// user-profile change-email — Re-Auth + Uniqueness + Verified-Reset,
+// bewiesen über echten Login (alte Email 401, neue Email 200). Plus
+// QN-Pin der user-data-rights-Konstanten (Danger-Zone des ProfileScreen
+// dispatcht genau diese Strings).
+
+import { afterAll, beforeAll, beforeEach, describe, expect, test } from "bun:test";
+import { fetchOne } from "@cosmicdrift/kumiko-framework/bun-db";
+import type { TenantId } from "@cosmicdrift/kumiko-framework/engine";
+import { createEventsTable, eventsTable } from "@cosmicdrift/kumiko-framework/event-store";
+import {
+  createTestUser,
+  setupTestStack,
+  type TestStack,
+  TestUsers,
+  unsafeCreateEntityTable,
+  unsafePushTables,
+} from "@cosmicdrift/kumiko-framework/stack";
+import { expectErrorIncludes, resetTestTables } from "@cosmicdrift/kumiko-framework/testing";
+import { AuthErrors, AuthHandlers } from "../../auth-email-password/constants";
+import { createAuthEmailPasswordFeature } from "../../auth-email-password/feature";
+import { hashPassword } from "../../auth-email-password/password-hashing";
+import {
+  createComplianceProfilesFeature,
+  tenantComplianceProfileEntity,
+  tenantComplianceProfileTable,
+} from "../../compliance-profiles";
+import { createConfigFeature } from "../../config";
+import { configValuesTable } from "../../config/table";
+import { createDataRetentionFeature } from "../../data-retention";
+import { createSessionsFeature } from "../../sessions";
+import { createTenantFeature } from "../../tenant";
+import { tenantMembershipsTable } from "../../tenant/membership-table";
+import { tenantEntity } from "../../tenant/schema/tenant";
+import { seedTenantMembership } from "../../tenant/testing";
+import { UserErrors, UserHandlers, UserQueries } from "../../user";
+import { createUserFeature } from "../../user/feature";
+import { userEntity, userTable } from "../../user/schema/user";
+import { createUserDataRightsFeature } from "../../user-data-rights";
+import {
+  UserDataRightsHandlers,
+  UserProfileErrors,
+  UserProfileHandlers,
+  UserProfileQueries,
+} from "../constants";
+import { createUserProfileFeature } from "../feature";
+
+let stack: TestStack;
+
+const systemAdmin = TestUsers.systemAdmin;
+const TENANT: TenantId = "00000000-0000-4000-8000-000000000001" as TenantId; // @cast-boundary test-fixture
+
+beforeAll(async () => {
+  stack = await setupTestStack({
+    features: [
+      createConfigFeature(),
+      createUserFeature(),
+      createTenantFeature(),
+      createAuthEmailPasswordFeature(),
+      createDataRetentionFeature(),
+      createComplianceProfilesFeature(),
+      createSessionsFeature(),
+      createUserDataRightsFeature(),
+      createUserProfileFeature(),
+    ],
+    authConfig: {
+      membershipQuery: "tenant:query:memberships",
+      loginHandler: AuthHandlers.login,
+      loginErrorStatusMap: {
+        [AuthErrors.invalidCredentials]: 401,
+        [AuthErrors.noMembership]: 403,
+      },
+    },
+  });
+  await unsafeCreateEntityTable(stack.db, userEntity);
+  await unsafeCreateEntityTable(stack.db, tenantEntity);
+  await unsafeCreateEntityTable(stack.db, tenantComplianceProfileEntity);
+  await createEventsTable(stack.db);
+  await unsafePushTables(stack.db, { configValuesTable, tenantMembershipsTable });
+});
+
+afterAll(async () => {
+  await stack.cleanup();
+});
+
+beforeEach(async () => {
+  await resetTestTables(stack.db, [
+    userTable,
+    tenantMembershipsTable,
+    tenantComplianceProfileTable,
+    eventsTable,
+  ]);
+});
+
+async function seedLoginUser(opts: {
+  email: string;
+  password: string;
+}): Promise<{ id: string; tenantId: TenantId }> {
+  const hash = await hashPassword(opts.password);
+  const created = await stack.http.writeOk<{ id: string }>(
+    UserHandlers.create,
+    {
+      email: opts.email,
+      passwordHash: hash,
+      displayName: opts.email.split("@")[0] ?? "user",
+    },
+    systemAdmin,
+  );
+  await seedTenantMembership(stack.db, {
+    userId: created.id,
+    tenantId: TENANT,
+    roles: ["User"],
+  });
+  return { id: created.id, tenantId: TENANT };
+}
+
+describe("change-email happy path", () => {
+  test("re-auth ok → Login nur noch mit neuer Email, emailVerified=false", async () => {
+    const seed = await seedLoginUser({ email: "old@example.com", password: "secret-pw-1" });
+    const signedIn = createTestUser({ id: seed.id, tenantId: seed.tenantId, roles: ["User"] });
+
+    const result = await stack.http.writeOk<{ kind: string; email: string }>(
+      UserProfileHandlers.changeEmail,
+      { currentPassword: "secret-pw-1", newEmail: "New@Example.com" },
+      signedIn,
+    );
+    expect(result.kind).toBe("email-changed");
+    expect(result.email).toBe("new@example.com");
+
+    const row = (await fetchOne(stack.db, userTable, { id: seed.id })) as {
+      email: string;
+      emailVerified: boolean | null;
+    } | null;
+    expect(row?.email).toBe("new@example.com");
+    expect(row?.emailVerified).toBe(false);
+
+    const oldLogin = await stack.http.raw("POST", "/api/auth/login", {
+      email: "old@example.com",
+      password: "secret-pw-1",
+    });
+    expect(oldLogin.status).toBe(401);
+
+    const newLogin = await stack.http.raw("POST", "/api/auth/login", {
+      email: "new@example.com",
+      password: "secret-pw-1",
+    });
+    expect(newLogin.status).toBe(200);
+  });
+});
+
+describe("change-email guards", () => {
+  test("falsches Passwort → invalid_credentials, Email unverändert", async () => {
+    const seed = await seedLoginUser({ email: "guard@example.com", password: "secret-pw-1" });
+    const signedIn = createTestUser({ id: seed.id, tenantId: seed.tenantId, roles: ["User"] });
+
+    const error = await stack.http.writeErr(
+      UserProfileHandlers.changeEmail,
+      { currentPassword: "wrong", newEmail: "other@example.com" },
+      signedIn,
+    );
+    expectErrorIncludes(error, AuthErrors.invalidCredentials);
+
+    const row = (await fetchOne(stack.db, userTable, { id: seed.id })) as {
+      email: string;
+    } | null;
+    expect(row?.email).toBe("guard@example.com");
+  });
+
+  test("Email bereits vergeben → email_already_exists", async () => {
+    await seedLoginUser({ email: "taken@example.com", password: "secret-pw-2" });
+    const seed = await seedLoginUser({ email: "me@example.com", password: "secret-pw-1" });
+    const signedIn = createTestUser({ id: seed.id, tenantId: seed.tenantId, roles: ["User"] });
+
+    const error = await stack.http.writeErr(
+      UserProfileHandlers.changeEmail,
+      { currentPassword: "secret-pw-1", newEmail: "taken@example.com" },
+      signedIn,
+    );
+    expectErrorIncludes(error, UserErrors.emailAlreadyExists);
+  });
+
+  test("gleiche Email → email_unchanged", async () => {
+    const seed = await seedLoginUser({ email: "same@example.com", password: "secret-pw-1" });
+    const signedIn = createTestUser({ id: seed.id, tenantId: seed.tenantId, roles: ["User"] });
+
+    const error = await stack.http.writeErr(
+      UserProfileHandlers.changeEmail,
+      { currentPassword: "secret-pw-1", newEmail: "Same@example.com" },
+      signedIn,
+    );
+    expectErrorIncludes(error, UserProfileErrors.emailUnchanged);
+  });
+});
+
+describe("QN-Drift-Pins (client-Konstanten vs. Feature-Originale)", () => {
+  test("UserProfileQueries.me spiegelt UserQueries.me", () => {
+    // Der ProfileScreen darf das runtime-Barrel des user-Features nicht
+    // importieren (Runtime-Isolation) und pinnt die QN lokal — dieser
+    // Vergleich macht stillen Drift unmöglich.
+    expect(UserProfileQueries.me).toBe(UserQueries.me);
+  });
+});
+
+describe("danger-zone QN-Pin (ProfileScreen-Konstanten)", () => {
+  test("request-deletion + cancel-deletion sind unter den gepinnten QNs dispatchbar", async () => {
+    const seed = await seedLoginUser({ email: "danger@example.com", password: "secret-pw-1" });
+    const signedIn = createTestUser({ id: seed.id, tenantId: seed.tenantId, roles: ["User"] });
+
+    const requested = await stack.http.writeOk<{ status: string }>(
+      UserDataRightsHandlers.requestDeletion,
+      {},
+      signedIn,
+    );
+    expect(requested.status).toBe("deletionRequested");
+
+    const cancelled = await stack.http.writeOk<{ status: string }>(
+      UserDataRightsHandlers.cancelDeletion,
+      {},
+      signedIn,
+    );
+    expect(cancelled.status).toBe("active");
+  });
+});

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

@@ -0,0 +1,101 @@
+// 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.
+
+import { describe, expect, test } from "bun:test";
+import { createStore, type Dispatcher, type DispatcherStatus } from "@cosmicdrift/kumiko-headless";
+import {
+  createStaticLocaleResolver,
+  DispatcherProvider,
+  kumikoDefaultTranslations,
+  type LiveEventSubscriber,
+  LiveEventsProvider,
+  LocaleProvider,
+  PrimitivesProvider,
+  TokensProvider,
+} from "@cosmicdrift/kumiko-renderer";
+import { defaultPrimitives, defaultTokens } from "@cosmicdrift/kumiko-renderer-web";
+import { render, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { defaultTranslations } from "../i18n";
+import { ProfileScreen } from "../web/profile-screen";
+
+const stubLiveEvents: LiveEventSubscriber = () => () => {};
+const stubTokens = {
+  tokens: defaultTokens,
+  mode: "light" as const,
+  setMode: () => {},
+  toggleMode: () => {},
+};
+const stubResolver = createStaticLocaleResolver();
+
+function makeDispatcher(me: Record<string, unknown>): Dispatcher {
+  const statusStore = createStore<DispatcherStatus>("online");
+  return {
+    write: (async () => ({ isSuccess: true, data: {} })) as unknown as Dispatcher["write"],
+    query: (async () => ({ isSuccess: true, data: me })) as unknown as Dispatcher["query"],
+    batch: (async () => ({ isSuccess: true, results: [] })) as unknown as Dispatcher["batch"],
+    statusStore,
+    pendingWrites: () => [],
+    pendingFiles: () => [],
+  } as unknown as Dispatcher; // @cast-boundary test-stub
+}
+
+function renderProfile(me: Record<string, unknown>) {
+  const wrapper = ({ children }: { readonly children: ReactNode }): ReactNode => (
+    <TokensProvider value={stubTokens}>
+      <LocaleProvider
+        resolver={stubResolver}
+        fallbackBundles={[defaultTranslations, kumikoDefaultTranslations]}
+      >
+        <PrimitivesProvider value={defaultPrimitives}>
+          <LiveEventsProvider value={stubLiveEvents}>
+            <DispatcherProvider dispatcher={makeDispatcher(me)}>{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,
+};
+
+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();
+    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.");
+  });
+
+  test("deletionRequested: Frist-Banner + Abbrechen statt Lösch-Button", async () => {
+    const view = renderProfile({
+      ...activeMe,
+      status: "deletionRequested",
+      gracePeriodEnd: "2026-07-11T00:00:00Z",
+    });
+    await waitFor(() => {
+      if (view.queryByTestId("profile-screen") === null) throw new Error("not mounted yet");
+    });
+    const banner = view.getByTestId("profile-danger-requested");
+    expect(banner.textContent).toContain("2026-07-11");
+    expect(banner.textContent).not.toContain("{date}");
+    expect(view.queryByTestId("profile-danger-delete")).toBeNull();
+    expect(view.getByTestId("profile-danger-cancel")).toBeTruthy();
+    expect(view.container.textContent).not.toContain("profile.");
+  });
+});

package/src/user-profile/constants.ts

@@ -0,0 +1,27 @@
+// @runtime client
+// Reine String-Konstanten — client-markiert, damit der ProfileScreen
+// (web/) sie importieren darf; runtime-Code (handlers/feature) darf
+// client-Dateien ohnehin ziehen.
+
+export const USER_PROFILE_FEATURE = "user-profile" 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.
+export const UserProfileQueries = {
+  me: "user:query:user:me",
+} as const;
+
+export const UserDataRightsHandlers = {
+  requestDeletion: "user-data-rights:write:request-deletion",
+  cancelDeletion: "user-data-rights:write:cancel-deletion",
+} as const;
+
+export const UserProfileErrors = {
+  emailUnchanged: "email_unchanged",
+} as const;

package/src/user-profile/feature.ts

@@ -0,0 +1,26 @@
+import { defineFeature, type FeatureDefinition } from "@cosmicdrift/kumiko-framework/engine";
+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 " +
+        "(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`, and `user-data-rights`.",
+    );
+    r.requires("user");
+    r.requires("auth-email-password");
+    r.requires("user-data-rights");
+
+    const handlers = {
+      changeEmail: r.writeHandler(changeEmailWrite),
+    };
+
+    return { handlers };
+  });
+}

package/src/user-profile/handlers/change-email.write.ts

@@ -0,0 +1,83 @@
+import { access, createSystemUser, defineWriteHandler } from "@cosmicdrift/kumiko-framework/engine";
+import { UnprocessableError, writeFailure } from "@cosmicdrift/kumiko-framework/errors";
+import { getAggregateStreamTenant } from "@cosmicdrift/kumiko-framework/event-store";
+import { z } from "zod";
+import { AuthErrors, verifyPassword } from "../../auth-email-password";
+import { USER_FEATURE, UserErrors, UserHandlers, UserQueries } from "../../user";
+import { UserProfileErrors } from "../constants";
+
+// Gleiche Failure-Shape wie auth-email-password (anti-enumeration):
+// dessen errors.ts ist nicht Teil des Feature-Barrels, der Reason-Code
+// + i18nKey sind aber stabile Public-API.
+function invalidCredentials() {
+  return writeFailure(
+    new UnprocessableError(AuthErrors.invalidCredentials, {
+      i18nKey: "auth.errors.invalidCredentials",
+    }),
+  );
+}
+
+// Change-email — authenticated, self-only. Der User bestätigt mit seinem
+// aktuellen Passwort (Re-Auth wie change-password); die neue Adresse wird
+// via ctx.writeAs(system) gegen den user-update-Handler geschrieben, weil
+// `email` field-level privileged ist und bei Self-Updates sonst silent
+// gestrippt würde. emailVerified flippt auf false — die App triggert
+// anschließend den Verification-Flow (request-email-verification ist
+// public; der ProfileScreen ruft ihn nach Erfolg auf).
+export const changeEmailWrite = defineWriteHandler({
+  name: "change-email",
+  schema: z.object({
+    currentPassword: z.string().min(1),
+    newEmail: z.email(),
+  }),
+  access: { roles: access.authenticated },
+  handler: async (event, ctx) => {
+    const systemUser = createSystemUser(event.user.tenantId);
+
+    const me = (await ctx.queryAs(systemUser, UserQueries.findForAuth, {
+      id: event.user.id,
+    })) as { id: string; email: string; passwordHash: string | null; version: number } | null; // @cast-boundary db-runner
+
+    if (!me?.passwordHash) {
+      return invalidCredentials();
+    }
+
+    const passwordOk = await verifyPassword(me.passwordHash, event.payload.currentPassword);
+    if (!passwordOk) {
+      return invalidCredentials();
+    }
+
+    const newEmail = event.payload.newEmail.toLowerCase();
+    if (newEmail === me.email.toLowerCase()) {
+      return writeFailure(
+        new UnprocessableError(UserProfileErrors.emailUnchanged, {
+          i18nKey: "profile.errors.emailUnchanged",
+        }),
+      );
+    }
+
+    const existing = await ctx.queryAs(systemUser, UserQueries.findForAuth, { email: newEmail });
+    if (existing !== null) {
+      return writeFailure(
+        new UnprocessableError(UserErrors.emailAlreadyExists, {
+          i18nKey: "user.errors.emailAlreadyExists",
+        }),
+      );
+    }
+
+    // Stream-Tenant-Auflösung wie in change-password: das user-Aggregate
+    // ist systemScope, sein Event-Stream kann in einem anderen Tenant
+    // liegen als die Session — optimistic locking braucht den echten.
+    const streamTenant = await getAggregateStreamTenant(ctx.db.raw, event.user.id, USER_FEATURE);
+    const writer = createSystemUser(streamTenant ?? event.user.tenantId);
+
+    const writeRes = await ctx.writeAs(writer, UserHandlers.update, {
+      id: me.id,
+      version: me.version,
+      changes: { email: newEmail, emailVerified: false },
+    });
+    if (!writeRes.isSuccess) return writeRes;
+
+    return { isSuccess: true, data: { kind: "email-changed", email: newEmail } };
+  },
+});

package/src/user-profile/i18n.ts

@@ -0,0 +1,83 @@
+// @runtime client
+// Default-Bundles für den ProfileScreen. Werden vom userProfileClient()
+// als Fallback-Bundle in den LocaleProvider gehängt — Apps überschreiben
+// einzelne Keys via `userProfileClient({ translations: { de: { … } } })`.
+// `auth.errors.invalidCredentials` + `user.errors.emailAlreadyExists`
+// sind hier gedoppelt, damit der Screen auch ohne die jeweiligen
+// Feature-Bundles vollständig übersetzt.
+
+import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+
+export const defaultTranslations: TranslationsByLocale = {
+  de: {
+    "profile.title": "Profil",
+
+    "profile.email.title": "E-Mail-Adresse",
+    "profile.email.current": "Aktuelle E-Mail",
+    "profile.email.new": "Neue E-Mail",
+    "profile.email.currentPassword": "Aktuelles Passwort",
+    "profile.email.submit": "E-Mail ändern",
+    "profile.email.success":
+      "E-Mail geändert. Wir haben einen Bestätigungslink an die neue Adresse geschickt.",
+
+    "profile.password.title": "Passwort",
+    "profile.password.old": "Aktuelles Passwort",
+    "profile.password.new": "Neues Passwort",
+    "profile.password.confirm": "Neues Passwort bestätigen",
+    "profile.password.submit": "Passwort ändern",
+    "profile.password.success": "Passwort geändert.",
+    "profile.password.mismatch": "Die Passwörter stimmen nicht überein.",
+
+    "profile.danger.title": "Konto löschen",
+    "profile.danger.explainer":
+      "Dein Konto wird nach einer Frist endgültig gelöscht. Bis dahin kannst du die Löschung jederzeit abbrechen.",
+    "profile.danger.delete": "Konto löschen",
+    "profile.danger.dialogTitle": "Konto wirklich löschen?",
+    "profile.danger.dialogDescription":
+      "Nach Ablauf der Frist werden deine Daten endgültig gelöscht. Bis dahin kannst du die Löschung abbrechen.",
+    "profile.danger.requested":
+      "Löschung beantragt — dein Konto wird am {date} endgültig gelöscht.",
+    "profile.danger.cancelDeletion": "Löschung abbrechen",
+    "profile.danger.cancelSuccess": "Löschung abgebrochen. Dein Konto bleibt bestehen.",
+
+    "profile.errors.generic": "Etwas ist schiefgegangen.",
+    "profile.errors.emailUnchanged": "Das ist bereits deine E-Mail-Adresse.",
+    "user.errors.emailAlreadyExists": "Diese E-Mail-Adresse wird bereits verwendet.",
+    "auth.errors.invalidCredentials": "E-Mail oder Passwort falsch.",
+  },
+  en: {
+    "profile.title": "Profile",
+
+    "profile.email.title": "Email address",
+    "profile.email.current": "Current email",
+    "profile.email.new": "New email",
+    "profile.email.currentPassword": "Current password",
+    "profile.email.submit": "Change email",
+    "profile.email.success": "Email changed. We sent a verification link to the new address.",
+
+    "profile.password.title": "Password",
+    "profile.password.old": "Current password",
+    "profile.password.new": "New password",
+    "profile.password.confirm": "Confirm new password",
+    "profile.password.submit": "Change password",
+    "profile.password.success": "Password changed.",
+    "profile.password.mismatch": "Passwords do not match.",
+
+    "profile.danger.title": "Delete account",
+    "profile.danger.explainer":
+      "Your account will be permanently deleted after a grace period. Until then you can cancel the deletion at any time.",
+    "profile.danger.delete": "Delete account",
+    "profile.danger.dialogTitle": "Really delete your account?",
+    "profile.danger.dialogDescription":
+      "After the grace period your data will be permanently deleted. Until then you can cancel.",
+    "profile.danger.requested":
+      "Deletion requested — your account will be permanently deleted on {date}.",
+    "profile.danger.cancelDeletion": "Cancel deletion",
+    "profile.danger.cancelSuccess": "Deletion cancelled. Your account stays.",
+
+    "profile.errors.generic": "Something went wrong.",
+    "profile.errors.emailUnchanged": "That is already your email address.",
+    "user.errors.emailAlreadyExists": "This email address is already in use.",
+    "auth.errors.invalidCredentials": "Email or password incorrect.",
+  },
+};

package/src/user-profile/index.ts

@@ -0,0 +1,11 @@
+// Bewusst OHNE i18n-Export: das Server-Barrel muss von Server-Samples
+// ohne jsx-tsconfig kompilierbar bleiben (i18n zieht kumiko-renderer →
+// .tsx). Translations kommen via ./web (userProfileClient).
+export {
+  USER_PROFILE_FEATURE,
+  UserDataRightsHandlers,
+  UserProfileErrors,
+  UserProfileHandlers,
+  UserProfileQueries,
+} from "./constants";
+export { createUserProfileFeature } from "./feature";

package/src/user-profile/web/client-plugin.ts

@@ -0,0 +1,28 @@
+// @runtime client
+import { mergeTranslations, type TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+import type { ComponentType, ReactNode } from "react";
+import { defaultTranslations } from "../i18n";
+
+export type UserProfileClientOptions = {
+  /** Key-weise Overrides über die Default-Bundles (de/en). */
+  readonly translations?: TranslationsByLocale;
+};
+
+export type UserProfileClientFeature = {
+  readonly name: "user-profile";
+  readonly providers: readonly ComponentType<{ children: ReactNode }>[];
+  readonly gates: readonly ComponentType<{ children: ReactNode }>[];
+  readonly translations: TranslationsByLocale;
+};
+
+// Liefert nur Translations — der ProfileScreen selbst wird von der App
+// als custom-Screen registriert (__component: "UserProfileScreen"),
+// damit Nav-Platzierung + Access bei der App bleiben.
+export function userProfileClient(options?: UserProfileClientOptions): UserProfileClientFeature {
+  return {
+    name: "user-profile",
+    providers: [],
+    gates: [],
+    translations: mergeTranslations(defaultTranslations, options?.translations ?? {}),
+  };
+}

package/src/user-profile/web/index.ts

@@ -0,0 +1,6 @@
+export {
+  type UserProfileClientFeature,
+  type UserProfileClientOptions,
+  userProfileClient,
+} from "./client-plugin";
+export { ProfileScreen } from "./profile-screen";

package/src/user-profile/web/profile-screen.tsx

@@ -0,0 +1,326 @@
+// @runtime client
+// ProfileScreen — Self-Service-Kontoseite: Passwort ändern, E-Mail
+// ändern (mit Re-Auth + anschließendem Verification-Mail-Trigger),
+// Konto löschen / Löschung abbrechen (user-data-rights Grace-Period).
+// Apps registrieren die Komponente als custom-Screen:
+//   r.screen({ id: "profile", type: "custom",
+//     renderer: { react: { __component: "UserProfileScreen" } } })
+
+import {
+  useDispatcher,
+  usePrimitives,
+  useQuery,
+  useTranslation,
+} from "@cosmicdrift/kumiko-renderer";
+import { type FormEvent, type ReactNode, useState } from "react";
+import { AuthHandlers } from "../../auth-email-password/constants";
+import { requestEmailVerification } from "../../auth-email-password/web";
+import { UserDataRightsHandlers, UserProfileHandlers, UserProfileQueries } from "../constants";
+
+type MeRow = {
+  readonly id: string;
+  readonly email: string;
+  readonly status?: string;
+  readonly gracePeriodEnd?: string | null;
+};
+
+type SectionStatus =
+  | { kind: "idle" }
+  | { kind: "submitting" }
+  | { kind: "success"; messageKey: string }
+  | { kind: "error"; messageKey: string };
+
+// Dispatcher-Failures tragen i18nKey nur wenn der Handler einen setzt —
+// Boundary-Read mit generischem Fallback.
+function failureKey(error: unknown): string {
+  const key = (error as { i18nKey?: unknown } | null)?.i18nKey; // @cast-boundary dispatcher-error
+  return typeof key === "string" ? key : "profile.errors.generic";
+}
+
+function StatusBanner({ status }: { readonly status: SectionStatus }): ReactNode {
+  const t = useTranslation();
+  const { Banner } = usePrimitives();
+  if (status.kind === "success") {
+    return <Banner variant="info">{t(status.messageKey)}</Banner>;
+  }
+  if (status.kind === "error") {
+    return <Banner variant="error">{t(status.messageKey)}</Banner>;
+  }
+  return null;
+}
+
+function ChangePasswordSection(): ReactNode {
+  const t = useTranslation();
+  const { Form, Field, Input, Button, Heading } = usePrimitives();
+  const dispatcher = useDispatcher();
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [status, setStatus] = useState<SectionStatus>({ kind: "idle" });
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    void (async () => {
+      if (newPassword !== confirm) {
+        setStatus({ kind: "error", messageKey: "profile.password.mismatch" });
+        return;
+      }
+      setStatus({ kind: "submitting" });
+      const res = await dispatcher.write(AuthHandlers.changePassword, {
+        oldPassword,
+        newPassword,
+      });
+      if (!res.isSuccess) {
+        setStatus({ kind: "error", messageKey: failureKey(res.error) });
+        return;
+      }
+      setOldPassword("");
+      setNewPassword("");
+      setConfirm("");
+      setStatus({ kind: "success", messageKey: "profile.password.success" });
+    })();
+  };
+
+  const submitting = status.kind === "submitting";
+  return (
+    <section data-testid="profile-password" className="flex flex-col gap-4">
+      <Heading variant="section">{t("profile.password.title")}</Heading>
+      <Form onSubmit={onSubmit} testId="profile-password-form">
+        <Field id="profile-old-password" label={t("profile.password.old")} required>
+          <Input
+            kind="password"
+            id="profile-old-password"
+            name="profile-old-password"
+            value={oldPassword}
+            onChange={setOldPassword}
+            disabled={submitting}
+            required
+            autoComplete="current-password"
+          />
+        </Field>
+        <Field id="profile-new-password" label={t("profile.password.new")} required>
+          <Input
+            kind="password"
+            id="profile-new-password"
+            name="profile-new-password"
+            value={newPassword}
+            onChange={setNewPassword}
+            disabled={submitting}
+            required
+            autoComplete="new-password"
+          />
+        </Field>
+        <Field id="profile-confirm-password" label={t("profile.password.confirm")} required>
+          <Input
+            kind="password"
+            id="profile-confirm-password"
+            name="profile-confirm-password"
+            value={confirm}
+            onChange={setConfirm}
+            disabled={submitting}
+            required
+            autoComplete="new-password"
+          />
+        </Field>
+        <StatusBanner status={status} />
+        <Button type="submit" disabled={submitting} testId="profile-password-submit">
+          {t("profile.password.submit")}
+        </Button>
+      </Form>
+    </section>
+  );
+}
+
+function ChangeEmailSection({
+  me,
+  onChanged,
+}: {
+  readonly me: MeRow;
+  readonly onChanged: () => void;
+}): ReactNode {
+  const t = useTranslation();
+  const { Form, Field, Input, Button, Heading } = usePrimitives();
+  const dispatcher = useDispatcher();
+  const [newEmail, setNewEmail] = useState("");
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [status, setStatus] = useState<SectionStatus>({ kind: "idle" });
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    void (async () => {
+      setStatus({ kind: "submitting" });
+      const res = await dispatcher.write(UserProfileHandlers.changeEmail, {
+        currentPassword,
+        newEmail,
+      });
+      if (!res.isSuccess) {
+        setStatus({ kind: "error", messageKey: failureKey(res.error) });
+        return;
+      }
+      // Verification-Mail an die neue Adresse — silent-success wie beim
+      // Login-Resend; ein Fehler hier darf den Email-Wechsel nicht als
+      // gescheitert anzeigen (der Wechsel ist bereits persistiert).
+      await requestEmailVerification(newEmail).catch(() => undefined);
+      setNewEmail("");
+      setCurrentPassword("");
+      setStatus({ kind: "success", messageKey: "profile.email.success" });
+      onChanged();
+    })();
+  };
+
+  const submitting = status.kind === "submitting";
+  return (
+    <section data-testid="profile-email" className="flex flex-col gap-4">
+      <Heading variant="section">{t("profile.email.title")}</Heading>
+      <p className="text-sm text-muted-foreground" data-testid="profile-email-current">
+        {t("profile.email.current")}: {me.email}
+      </p>
+      <Form onSubmit={onSubmit} testId="profile-email-form">
+        <Field id="profile-new-email" label={t("profile.email.new")} required>
+          <Input
+            kind="email"
+            id="profile-new-email"
+            name="profile-new-email"
+            value={newEmail}
+            onChange={setNewEmail}
+            disabled={submitting}
+            required
+            autoComplete="email"
+          />
+        </Field>
+        <Field id="profile-email-password" label={t("profile.email.currentPassword")} required>
+          <Input
+            kind="password"
+            id="profile-email-password"
+            name="profile-email-password"
+            value={currentPassword}
+            onChange={setCurrentPassword}
+            disabled={submitting}
+            required
+            autoComplete="current-password"
+          />
+        </Field>
+        <StatusBanner status={status} />
+        <Button type="submit" disabled={submitting} testId="profile-email-submit">
+          {t("profile.email.submit")}
+        </Button>
+      </Form>
+    </section>
+  );
+}
+
+function DangerZoneSection({
+  me,
+  onChanged,
+}: {
+  readonly me: MeRow;
+  readonly onChanged: () => void;
+}): ReactNode {
+  const t = useTranslation();
+  const { Button, Banner, Dialog, Heading } = usePrimitives();
+  const dispatcher = useDispatcher();
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [status, setStatus] = useState<SectionStatus>({ kind: "idle" });
+
+  const deletionRequested = me.status === "deletionRequested";
+
+  const requestDeletion = async (): Promise<void> => {
+    const res = await dispatcher.write(UserDataRightsHandlers.requestDeletion, {});
+    if (!res.isSuccess) {
+      setStatus({ kind: "error", messageKey: failureKey(res.error) });
+      return;
+    }
+    setStatus({ kind: "idle" });
+    onChanged();
+  };
+
+  const cancelDeletion = async (): Promise<void> => {
+    const res = await dispatcher.write(UserDataRightsHandlers.cancelDeletion, {});
+    if (!res.isSuccess) {
+      setStatus({ kind: "error", messageKey: failureKey(res.error) });
+      return;
+    }
+    setStatus({ kind: "success", messageKey: "profile.danger.cancelSuccess" });
+    onChanged();
+  };
+
+  return (
+    <section data-testid="profile-danger" className="flex flex-col gap-4">
+      <Heading variant="section">{t("profile.danger.title")}</Heading>
+      {deletionRequested ? (
+        <>
+          <Banner variant="error" testId="profile-danger-requested">
+            {t("profile.danger.requested", {
+              date: me.gracePeriodEnd ?? "—",
+            })}
+          </Banner>
+          <StatusBanner status={status} />
+          <Button
+            variant="secondary"
+            onClick={() => void cancelDeletion()}
+            testId="profile-danger-cancel"
+          >
+            {t("profile.danger.cancelDeletion")}
+          </Button>
+        </>
+      ) : (
+        <>
+          <p className="text-sm text-muted-foreground">{t("profile.danger.explainer")}</p>
+          <StatusBanner status={status} />
+          <Button
+            variant="danger"
+            onClick={() => setDialogOpen(true)}
+            testId="profile-danger-delete"
+          >
+            {t("profile.danger.delete")}
+          </Button>
+          <Dialog
+            open={dialogOpen}
+            onOpenChange={setDialogOpen}
+            title={t("profile.danger.dialogTitle")}
+            description={t("profile.danger.dialogDescription")}
+            variant="danger"
+            confirmLabel={t("profile.danger.delete")}
+            onConfirm={requestDeletion}
+            testId="profile-danger-dialog"
+          />
+        </>
+      )}
+    </section>
+  );
+}
+
+export function ProfileScreen(): ReactNode {
+  const t = useTranslation();
+  const { Banner, Heading } = usePrimitives();
+  const meQuery = useQuery<MeRow | null>(UserProfileQueries.me, {});
+
+  if (meQuery.error) {
+    return (
+      <Banner padded variant="error" testId="profile-error">
+        {meQuery.error.i18nKey}
+      </Banner>
+    );
+  }
+  const me = meQuery.data;
+  if (me === null || me === undefined) {
+    return (
+      <Banner padded variant="loading" testId="profile-loading">
+        Loading…
+      </Banner>
+    );
+  }
+
+  const refetch = (): void => {
+    void meQuery.refetch?.();
+  };
+
+  return (
+    <div className="p-6 flex flex-col gap-10 max-w-xl" data-testid="profile-screen">
+      <Heading variant="page">{t("profile.title")}</Heading>
+      <ChangeEmailSection me={me} onChanged={refetch} />
+      <ChangePasswordSection />
+      <DangerZoneSection me={me} onChanged={refetch} />
+    </div>
+  );
+}