@cosmicdrift/kumiko-bundled-features 0.68.0 → 0.70.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.68.0",
+  "version": "0.70.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>",
@@ -84,11 +84,11 @@
     "./step-dispatcher": "./src/step-dispatcher/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.68.0",
-    "@cosmicdrift/kumiko-framework": "0.68.0",
-    "@cosmicdrift/kumiko-headless": "0.68.0",
-    "@cosmicdrift/kumiko-renderer": "0.68.0",
-    "@cosmicdrift/kumiko-renderer-web": "0.68.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.70.0",
+    "@cosmicdrift/kumiko-framework": "0.70.0",
+    "@cosmicdrift/kumiko-headless": "0.70.0",
+    "@cosmicdrift/kumiko-renderer": "0.70.0",
+    "@cosmicdrift/kumiko-renderer-web": "0.70.0",
     "@mollie/api-client": "^4.5.0",
     "@node-rs/argon2": "^2.0.2",
     "@types/nodemailer": "^8.0.0",

package/src/config/__tests__/deserialize-value.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, test } from "bun:test";
+import { deserializeValue } from "../resolver";
+
+// deserializeValue is the read boundary for every config value: the DB stores
+// the JSON-encoded raw string, this turns it back into a typed primitive per the
+// key's declared `type`. The coercion has non-obvious paths worth pinning so a
+// refactor can't quietly change them: a stored value whose JSON type disagrees
+// with the declared type is NOT rejected — it is coerced (number via Number(),
+// boolean only via literal true / the string "true", text via String()).
+
+describe("deserializeValue", () => {
+  test("null raw short-circuits to undefined before any parse", () => {
+    expect(deserializeValue(null, "text")).toBeUndefined();
+    expect(deserializeValue(null, "number")).toBeUndefined();
+  });
+
+  test("invalid JSON throws (never returns a half-coerced value)", () => {
+    expect(() => deserializeValue("{not json", "text")).toThrow();
+    expect(() => deserializeValue("", "number")).toThrow();
+  });
+
+  describe("number", () => {
+    test("a JSON number passes through verbatim", () => {
+      expect(deserializeValue("42", "number")).toBe(42);
+      expect(deserializeValue("3.14", "number")).toBe(3.14);
+      expect(deserializeValue("0", "number")).toBe(0);
+      expect(deserializeValue("-5", "number")).toBe(-5);
+    });
+
+    test("a stringified number is coerced via Number() — not rejected", () => {
+      expect(deserializeValue('"42"', "number")).toBe(42);
+      expect(deserializeValue("true", "number")).toBe(1);
+    });
+
+    test("an uncoercible value yields NaN rather than throwing", () => {
+      expect(deserializeValue('"abc"', "number")).toBeNaN();
+    });
+  });
+
+  describe("boolean", () => {
+    test("a JSON boolean passes through verbatim", () => {
+      expect(deserializeValue("true", "boolean")).toBe(true);
+      expect(deserializeValue("false", "boolean")).toBe(false);
+    });
+
+    test('only the string "true" coerces truthy — every other non-boolean is false', () => {
+      expect(deserializeValue('"true"', "boolean")).toBe(true);
+      expect(deserializeValue('"false"', "boolean")).toBe(false);
+      expect(deserializeValue('"1"', "boolean")).toBe(false);
+      expect(deserializeValue("1", "boolean")).toBe(false);
+      expect(deserializeValue("0", "boolean")).toBe(false);
+    });
+  });
+
+  describe("text / select", () => {
+    test("a JSON string passes through verbatim", () => {
+      expect(deserializeValue('"hello"', "text")).toBe("hello");
+      expect(deserializeValue('"hello"', "select")).toBe("hello");
+    });
+
+    test("non-string JSON is stringified via String()", () => {
+      expect(deserializeValue("42", "text")).toBe("42");
+      expect(deserializeValue("true", "select")).toBe("true");
+      expect(deserializeValue("null", "text")).toBe("null");
+    });
+  });
+});

package/src/data-retention/__tests__/parse-override.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, spyOn, test } from "bun:test";
+import { parseRetentionOverrideOrNull } from "../_internal/parse-override";
+
+// parseRetentionOverrideOrNull is the read boundary for a tenant's stored
+// data-retention override (DSGVO-relevant policy in a config column). It must
+// never let a corrupt or schema-violating value reach the retention decision:
+// invalid JSON and schema drift both collapse to null (the resolver then falls
+// back to preset/entity defaults) AND surface one operator warning. The schema
+// itself is covered by override-schema.test.ts — this pins the parser's
+// defensive wrapping: empty guard, no-throw on corruption, drop-not-leak on drift.
+
+const parse = (raw: string | null) => parseRetentionOverrideOrNull(raw, "tenant-1", "test");
+
+describe("parseRetentionOverrideOrNull", () => {
+  test("null / empty / whitespace-only raw → null before any parse", () => {
+    expect(parse(null)).toBeNull();
+    expect(parse("")).toBeNull();
+    expect(parse("   ")).toBeNull();
+  });
+
+  test("a valid override returns the parsed, schema-checked object", () => {
+    expect(parse('{"keepFor":"30d","strategy":"hardDelete","reference":"completedAt"}')).toEqual({
+      keepFor: "30d",
+      strategy: "hardDelete",
+      reference: "completedAt",
+    });
+  });
+
+  test("empty object is a valid override (every field optional)", () => {
+    expect(parse("{}")).toEqual({});
+  });
+
+  test("corrupt JSON returns null without throwing", () => {
+    const warn = spyOn(console, "warn").mockImplementation(() => {});
+    expect(() => parse("{not json")).not.toThrow();
+    expect(parse("{not json")).toBeNull();
+    warn.mockRestore();
+  });
+
+  test("JSON that parses but violates the schema is dropped to null — never leaked through", () => {
+    const warn = spyOn(console, "warn").mockImplementation(() => {});
+    expect(parse('{"strategy":"delete"}')).toBeNull(); // enum drift
+    expect(parse('{"keepFor":"30days"}')).toBeNull(); // keepFor format drift
+    expect(parse('{"keepFor":42}')).toBeNull(); // wrong type
+    expect(parse('{"unknownKey":1}')).toBeNull(); // strict() rejects extra keys
+    warn.mockRestore();
+  });
+
+  test("each dropped value surfaces exactly one operator warning", () => {
+    const warn = spyOn(console, "warn").mockImplementation(() => {});
+    parse("{not json");
+    parse('{"strategy":"delete"}');
+    expect(warn).toHaveBeenCalledTimes(2);
+    warn.mockRestore();
+  });
+});

package/src/managed-pages/__tests__/branding-coerce.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, test } from "bun:test";
+import { type BrandingTokens, EMPTY_BRANDING } from "../../page-render";
+import { coerceBranding } from "../branding";
+
+// coerceBranding is the IO boundary for the branding query's wire response:
+// untrusted `unknown` → BrandingTokens with no `as` cast. Every missing or
+// non-string field must collapse to "" so a malformed/empty response renders
+// the unbranded default rather than throwing — and an attacker-controlled
+// non-string (e.g. a logoUrl object) can never leak through as a live render
+// token. Exercised only indirectly by the integration path before this.
+
+describe("coerceBranding", () => {
+  const FULL: BrandingTokens = {
+    title: "Acme",
+    description: "We make things",
+    siteUrl: "https://acme.test",
+    accentColor: "#abcdef",
+    logoUrl: "https://acme.test/logo.png",
+    layoutPreset: "wide",
+    customCss: ":root{--brand:1}",
+  };
+
+  test("passes a fully-populated response through verbatim", () => {
+    expect(coerceBranding({ ...FULL })).toEqual(FULL);
+  });
+
+  test("null / undefined / primitives collapse to EMPTY_BRANDING", () => {
+    for (const bad of [null, undefined, "string", 42, true, Symbol("x")]) {
+      expect(coerceBranding(bad)).toEqual(EMPTY_BRANDING);
+    }
+  });
+
+  test("empty object yields the all-empty token set", () => {
+    expect(coerceBranding({})).toEqual(EMPTY_BRANDING);
+  });
+
+  test("missing fields fall back to '' (partial response)", () => {
+    expect(coerceBranding({ title: "Acme", logoUrl: "https://acme.test/l.png" })).toEqual({
+      ...EMPTY_BRANDING,
+      title: "Acme",
+      logoUrl: "https://acme.test/l.png",
+    });
+  });
+
+  test("non-string field values are dropped to '' — never stringified or leaked", () => {
+    const hostile = {
+      title: 123,
+      description: null,
+      siteUrl: { toString: () => "https://evil.test" },
+      accentColor: ["#fff"],
+      logoUrl: true,
+      layoutPreset: undefined,
+      customCss: { malicious: "body{}" },
+    };
+    expect(coerceBranding(hostile)).toEqual(EMPTY_BRANDING);
+  });
+
+  test("one hostile non-string field does not poison its valid siblings", () => {
+    const result = coerceBranding({ ...FULL, logoUrl: { href: "javascript:alert(1)" } });
+    expect(result.logoUrl).toBe("");
+    expect(result.title).toBe("Acme");
+    expect(result.siteUrl).toBe("https://acme.test");
+  });
+
+  test("unknown extra keys are ignored — only the known tokens are extracted", () => {
+    const result = coerceBranding({ ...FULL, evil: "<script>", extra: 1 });
+    expect(result).toEqual(FULL);
+    expect(Object.keys(result).sort()).toEqual(Object.keys(EMPTY_BRANDING).sort());
+  });
+
+  test("inherited (non-own) properties are not picked up", () => {
+    const withInheritedTitle = Object.create({ title: "from-prototype" });
+    expect(coerceBranding(withInheritedTitle)).toEqual(EMPTY_BRANDING);
+  });
+
+  test("array input is treated as a fieldless object → all-empty tokens", () => {
+    expect(coerceBranding(["title", "x"])).toEqual(EMPTY_BRANDING);
+  });
+});

package/src/tags/web/tag-section.tsx

@@ -168,7 +168,7 @@ export function TagSection({
   };
 
   return (
-    <div data-testid="tags-section">
+    <div data-testid="tags-section" className="flex flex-col gap-4">
       <Field id="tags-section-select" label={t("tags.section.label")}>
         <Input
           kind="combobox"
@@ -184,26 +184,32 @@ export function TagSection({
         />
       </Field>
 
-      {/* ponytail: separate create row — the shared combobox has no create-on-type
-          affordance. Fold create into the dropdown's Command.Empty if/when the
-          renderer-web combobox grows a freeSolo/onCreate prop. */}
-      <Field id="tags-section-new" label={t("tags.section.newLabel")}>
-        <Input
-          kind="text"
-          id="tags-section-new"
-          name="newTag"
-          value={newName}
-          onChange={setNewName}
-        />
-      </Field>
-      <Button
-        variant="secondary"
-        disabled={busy || newName.trim() === ""}
-        onClick={() => createAndAssign()}
-        testId="tags-section-create"
-      >
-        {busy ? t("tags.section.working") : t("tags.section.create")}
-      </Button>
+      {/* Inline create-row: das Label-Input wächst, der Add-Button sitzt
+          rechts daneben (items-end → bündig zur Input-Unterkante).
+          ponytail: separate row, weil die Combobox keine create-on-type-
+          Affordance hat. Fold-in, wenn der renderer-web-Combobox ein
+          freeSolo/onCreate-Prop bekommt. */}
+      <div className="flex items-end gap-2">
+        <div className="flex-1">
+          <Field id="tags-section-new" label={t("tags.section.newLabel")}>
+            <Input
+              kind="text"
+              id="tags-section-new"
+              name="newTag"
+              value={newName}
+              onChange={setNewName}
+            />
+          </Field>
+        </div>
+        <Button
+          variant="secondary"
+          disabled={busy || newName.trim() === ""}
+          onClick={() => createAndAssign()}
+          testId="tags-section-create"
+        >
+          {busy ? t("tags.section.working") : t("tags.section.create")}
+        </Button>
+      </div>
 
       {errorKey !== null && (
         <Banner variant="error" testId="tags-section-action-error">

package/src/template-resolver/__tests__/conformance.integration.test.ts

@@ -9,6 +9,7 @@ import { createTemplateResolverApi, TemplateNotFoundError } from "../api";
 import { createTemplateResolverFeature } from "../feature";
 import { templateResourceEntity } from "../table";
 import {
+  assertConsumerHandlesMissingResourceKeys,
   assertConsumerHandlesNotFound,
   runTemplateConsumerConformance,
   type TemplateConsumer,
@@ -62,6 +63,24 @@ describe("template-resolver :: conformance harness", () => {
     ).rejects.toThrow("expected TemplateNotFoundError, received Error");
   });
 
+  // 446#1: a consumer whose resolveResources throws a non-TypeError used to
+  // fall through the catch and pass — the assertion was effectively a no-op.
+  test("harness detects a consumer that throws (non-TypeError) on missing resource keys", async () => {
+    const badConsumer: TemplateConsumer = {
+      resolve: (args) => createTemplateResolverApi(db).resolveTemplate(args),
+      resolveResources: async () => {
+        throw new Error("blew up on a missing key instead of degrading");
+      },
+    };
+
+    await expect(
+      assertConsumerHandlesMissingResourceKeys(badConsumer, {
+        getDb: () => db,
+        tenantId: TENANT_A,
+      }),
+    ).rejects.toThrow("threw unexpectedly");
+  });
+
   test("conformant consumer propagates TemplateNotFoundError", async () => {
     const apiConsumer: TemplateConsumer = {
       resolve: (args) => createTemplateResolverApi(db).resolveTemplate(args),

package/src/template-resolver/testing.ts

@@ -169,6 +169,12 @@ export async function assertConsumerHandlesMissingResourceKeys(
         `resolveResources threw TypeError (unhandled missing key?): ${err.message}`,
       );
     }
+    // Any other throw means the consumer did not handle missing keys
+    // gracefully. Falling through here silently passed the assertion — a
+    // broken consumer looked conformant.
+    throw new ConformanceAssertionError(
+      `resolveResources threw unexpectedly (should handle missing keys gracefully): ${err.message}`,
+    );
   }
 }
 

package/src/user-data-rights/__tests__/read-users-rebuild-survives-lifecycle.integration.test.ts

@@ -220,8 +220,9 @@ describe("#494 :: read_users-Rebuild bewahrt Lifecycle-State", () => {
     // Bestand wieder in den divergenten Live-State bringen (der Rebuild hat ihn
     // auf Active gesetzt) und den Reconcile laufen lassen.
     await updateMany(stack.db, userTable, { status: USER_STATUS.Restricted }, { id: created.id });
-    const backfilled = await backfillUserLifecycleEvents(stack.db);
+    const { backfilled, failed } = await backfillUserLifecycleEvents(stack.db);
     expect(backfilled).toBeGreaterThanOrEqual(1);
+    expect(failed).toEqual([]);
 
     // Jetzt traegt das Event-Log den State -> Rebuild bewahrt ihn.
     await rebuildProjection(USER_PROJECTION, { db: stack.db, registry });

package/src/user-data-rights/lib/update-user-lifecycle.ts

@@ -73,7 +73,12 @@ export async function updateUserLifecycle(
 // user.updated an — harmlos, last-write-wins beim Replay).
 // ponytail: full read_users-Scan, in JS gefiltert — einmalige Migration, kein
 // Index/Streaming noetig. Bei Millionen-Rows: batchen.
-export async function backfillUserLifecycleEvents(conn: DbRunner): Promise<number> {
+export type BackfillResult = {
+  readonly backfilled: number;
+  readonly failed: ReadonlyArray<{ readonly id: string; readonly error: string }>;
+};
+
+export async function backfillUserLifecycleEvents(conn: DbRunner): Promise<BackfillResult> {
   const rows = (await selectMany(conn, userTable, {})) as Array<{
     id: string;
     status: string;
@@ -82,6 +87,7 @@ export async function backfillUserLifecycleEvents(conn: DbRunner): Promise<numbe
   }>;
 
   let backfilled = 0;
+  const failed: Array<{ id: string; error: string }> = [];
   for (const row of rows) {
     const divergent =
       row.status !== USER_STATUS.Active ||
@@ -89,12 +95,19 @@ export async function backfillUserLifecycleEvents(conn: DbRunner): Promise<numbe
       row.pendingDeletionRequestId != null;
     if (!divergent) continue;
 
-    await updateUserLifecycle(conn, row.id, {
-      status: row.status,
-      gracePeriodEnd: row.gracePeriodEnd,
-      pendingDeletionRequestId: row.pendingDeletionRequestId,
-    });
-    backfilled++;
+    // One bad row must not abort the run: the rows after it would then never
+    // get their user.updated event and stay vulnerable to the rebuild wipe
+    // (DSGVO-Datenverlust). Collect failures, finish the estate, report them.
+    try {
+      await updateUserLifecycle(conn, row.id, {
+        status: row.status,
+        gracePeriodEnd: row.gracePeriodEnd,
+        pendingDeletionRequestId: row.pendingDeletionRequestId,
+      });
+      backfilled++;
+    } catch (e) {
+      failed.push({ id: row.id, error: e instanceof Error ? e.message : String(e) });
+    }
   }
-  return backfilled;
+  return { backfilled, failed };
 }

package/src/user-data-rights/web/privacy-center-screen.tsx

@@ -121,6 +121,9 @@ function ExportSection(): ReactNode {
       <p className="text-sm text-muted-foreground">
         {t("userDataRights.privacyCenter.export.intro")}
       </p>
+      {statusQuery.error && (
+        <Banner variant="error">{t("userDataRights.privacyCenter.errors.generic")}</Banner>
+      )}
       {inProgress && (
         <Banner variant="info" testId="privacy-export-pending">
           {t("userDataRights.privacyCenter.export.pending")}
@@ -189,7 +192,7 @@ function AuditSection(): ReactNode {
       {logQuery.error && (
         <Banner variant="error">{t("userDataRights.privacyCenter.errors.generic")}</Banner>
       )}
-      {rows.length === 0 ? (
+      {logQuery.error ? null : rows.length === 0 ? (
         <p className="text-sm text-muted-foreground" data-testid="privacy-audit-empty">
           {t("userDataRights.privacyCenter.audit.empty")}
         </p>

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

@@ -80,6 +80,12 @@ describe("ProfileScreen", () => {
     expect(view.getByTestId("profile-danger-delete")).toBeTruthy();
     // Echte i18n: kein einziger roher Key im sichtbaren Text.
     expect(view.container.textContent).not.toContain("profile.");
+    // Card-Standard: jede Konto-Section ist GENAU eine Card (self + descendants)
+    // — nicht mehr das alte <section bg-card> um eine Form-Card = doppelt.
+    const cardCount = (el: Element): number =>
+      (el.matches(".bg-card") ? 1 : 0) + el.querySelectorAll(".bg-card").length;
+    expect(cardCount(view.getByTestId("profile-email"))).toBe(1);
+    expect(cardCount(view.getByTestId("profile-password"))).toBe(1);
   });
 
   test("deletionRequested: Frist-Banner + Abbrechen statt Lösch-Button", async () => {
@@ -113,7 +119,7 @@ describe("ProfileScreen", () => {
     try {
       const view = renderProfile(activeMe);
       await waitFor(() => {
-        if (view.queryByTestId("profile-email-form") === null) throw new Error("not mounted yet");
+        if (view.queryByTestId("profile-email") === null) throw new Error("not mounted yet");
       });
 
       const emailInput = view.container.querySelector<HTMLInputElement>("#profile-new-email");
@@ -121,7 +127,7 @@ describe("ProfileScreen", () => {
       if (!emailInput || !pwInput) throw new Error("email form inputs not found");
       fireEvent.change(emailInput, { target: { value: "new@example.com" } });
       fireEvent.change(pwInput, { target: { value: "current-pw" } });
-      fireEvent.submit(view.getByTestId("profile-email-form"));
+      fireEvent.click(view.getByTestId("profile-email-submit"));
 
       // De-Swallow: der fehlgeschlagene Verification-Versand wird geloggt.
       await waitFor(() => {

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

@@ -12,7 +12,7 @@ import {
   useQuery,
   useTranslation,
 } from "@cosmicdrift/kumiko-renderer";
-import { type FormEvent, type ReactNode, useState } from "react";
+import { 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";
@@ -61,15 +61,14 @@ function StatusBanner({ status }: { readonly status: SectionStatus }): ReactNode
 
 function ChangePasswordSection(): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Heading } = usePrimitives();
+  const { Section, Field, Input, Button } = 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();
+  const onSubmit = (): void => {
     void (async () => {
       if (newPassword !== confirm) {
         setStatus({ kind: "error", messageKey: "profile.password.mismatch" });
@@ -93,54 +92,53 @@ function ChangePasswordSection(): ReactNode {
 
   const submitting = status.kind === "submitting";
   return (
-    <section
-      data-testid="profile-password"
-      className="flex flex-col gap-4 rounded-lg border bg-card p-6"
-    >
-      <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">
+    <Section
+      testId="profile-password"
+      title={t("profile.password.title")}
+      actions={
+        <Button onClick={() => onSubmit()} disabled={submitting} testId="profile-password-submit">
           {t("profile.password.submit")}
         </Button>
-      </Form>
-    </section>
+      }
+    >
+      <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} />
+    </Section>
   );
 }
 
@@ -152,14 +150,13 @@ function ChangeEmailSection({
   readonly onChanged: () => void;
 }): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button, Heading } = usePrimitives();
+  const { Section, Field, Input, Button } = 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();
+  const onSubmit = (): void => {
     void (async () => {
       setStatus({ kind: "submitting" });
       const res = await dispatcher.write(UserProfileHandlers.changeEmail, {
@@ -197,45 +194,46 @@ function ChangeEmailSection({
 
   const submitting = status.kind === "submitting";
   return (
-    <section
-      data-testid="profile-email"
-      className="flex flex-col gap-4 rounded-lg border bg-card p-6"
-    >
-      <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">
+    <Section
+      testId="profile-email"
+      title={t("profile.email.title")}
+      subtitle={
+        <span data-testid="profile-email-current">
+          {t("profile.email.current")}: {me.email}
+        </span>
+      }
+      actions={
+        <Button onClick={() => onSubmit()} disabled={submitting} testId="profile-email-submit">
           {t("profile.email.submit")}
         </Button>
-      </Form>
-    </section>
+      }
+    >
+      <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} />
+    </Section>
   );
 }
 
@@ -349,10 +347,14 @@ export function ProfileScreen(): ReactNode {
   };
 
   return (
-    <div className="p-6 flex flex-col gap-6 max-w-2xl" data-testid="profile-screen">
+    <div className="flex max-w-5xl flex-col gap-6 p-6" data-testid="profile-screen">
       <Heading variant="page">{t("profile.title")}</Heading>
-      <ChangeEmailSection me={me} onChanged={refetch} />
-      <ChangePasswordSection />
+      {/* Die zwei kurzen Konto-Forms teilen sich eine Reihe (md+); die
+          Danger-Zone bleibt volle Breite darunter. */}
+      <div className="grid items-start gap-6 md:grid-cols-2">
+        <ChangeEmailSection me={me} onChanged={refetch} />
+        <ChangePasswordSection />
+      </div>
       <DangerZoneSection me={me} onChanged={refetch} />
     </div>
   );