@cosmicdrift/kumiko-bundled-features 0.240.0 → 0.241.0

package/src/user-profile/i18n.ts

@@ -1,17 +1,16 @@
 // @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 })`.
-// `auth.errors.invalidCredentials` + `user.errors.emailAlreadyExists`
-// sind hier gedoppelt, damit der Screen auch ohne die jeweiligen
-// Feature-Bundles vollständig übersetzt.
+// Default bundles for the `profile` screen. userProfileClient() hangs this
+// in the LocaleProvider as a fallback bundle — apps override individual keys
+// via `userProfileClient({ translations })`.
+// `auth.errors.invalidCredentials` + `user.errors.emailAlreadyExists` are
+// duplicated here so the screen stays fully translated even without those
+// features' own bundles.
 
 import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
 
 export const defaultTranslations: TranslationsByLocale = {
   en: {
-    "profile.title": "Profile",
-    "profile.loading": "Loading…",
+    "screen:profile.title": "Profile",
 
     "profile.email.title": "Email address",
     "profile.email.current": "Current email",
@@ -32,13 +31,10 @@ export const defaultTranslations: TranslationsByLocale = {
     "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.gracePeriodEnd": "Deletion 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.",

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

@@ -1,10 +1,19 @@
 // @runtime client
-import { mergeTranslations, type TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
+import {
+  type ExtensionSectionComponent,
+  mergeTranslations,
+  type TranslationsByLocale,
+} from "@cosmicdrift/kumiko-renderer";
 import type { ComponentType, ReactNode } from "react";
+import {
+  CHANGE_EMAIL_SECTION_EXTENSION_NAME,
+  CHANGE_PASSWORD_SECTION_EXTENSION_NAME,
+} from "../constants";
 import { defaultTranslations } from "../i18n";
+import { ChangeEmailSection, ChangePasswordSection } from "./profile-screen";
 
 export type UserProfileClientOptions = {
-  /** Key-weise Overrides über die Default-Bundles (de/en). */
+  /** Per-key overrides on top of the default bundles (de/en). */
   readonly translations?: TranslationsByLocale;
 };
 
@@ -13,16 +22,24 @@ export type UserProfileClientFeature = {
   readonly providers: readonly ComponentType<{ children: ReactNode }>[];
   readonly gates: readonly ComponentType<{ children: ReactNode }>[];
   readonly translations: TranslationsByLocale;
+  readonly extensionSectionComponents: Readonly<Record<string, ExtensionSectionComponent>>;
 };
 
-// Liefert nur Translations — der ProfileScreen selbst wird von der App
-// als custom-Screen registriert (__component: "UserProfileScreen"),
-// damit Nav-Platzierung + Access bei der App bleiben.
+// Supplies the ChangeEmail/ChangePassword extension components for the
+// declarative `profile` projectionDetail screen (fw#2312, ../feature.ts,
+// registered there server-side) plus the default translations. Apps add it
+// via createKumikoApp({ clientFeatures: [userProfileClient()] }) and place
+// the screen (id "profile") via r.nav — the screen itself has no r.nav of
+// its own, same as user-data-rights' privacy-center.
 export function userProfileClient(options?: UserProfileClientOptions): UserProfileClientFeature {
   return {
     name: "user-profile",
     providers: [],
     gates: [],
     translations: mergeTranslations(defaultTranslations, options?.translations ?? {}),
+    extensionSectionComponents: {
+      [CHANGE_EMAIL_SECTION_EXTENSION_NAME]: ChangeEmailSection,
+      [CHANGE_PASSWORD_SECTION_EXTENSION_NAME]: ChangePasswordSection,
+    },
   };
 }

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

@@ -3,4 +3,4 @@ export {
   type UserProfileClientOptions,
   userProfileClient,
 } from "./client-plugin";
-export { ProfileScreen } from "./profile-screen";
+export { ChangeEmailSection, ChangePasswordSection } from "./profile-screen";

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

@@ -1,29 +1,23 @@
 // @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" } } })
+// Change-password and change-email sections for the declarative `profile`
+// projectionDetail screen (fw#2312, ../feature.ts). Both keep re-auth flows
+// a declarative action can't express, so they stay React `EditExtensionSection`
+// components; account deletion moved to declarative fields/actions on the
+// screen itself — same split as user-data-rights' privacy-center
+// (../../user-data-rights/web/privacy-center-screen.tsx), which this file
+// mirrors.
 
 import {
+  type ExtensionSectionProps,
   useDispatcher,
   usePrimitives,
-  useQuery,
   useTranslation,
 } from "@cosmicdrift/kumiko-renderer";
-import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
+import { BareFormProvider } from "@cosmicdrift/kumiko-renderer-web";
 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";
-
-type MeRow = {
-  readonly id: string;
-  readonly email: string;
-  readonly status?: string;
-  readonly gracePeriodEnd?: string | null;
-};
+import { UserProfileHandlers } from "../constants";
 
 type SectionStatus =
   | { kind: "idle" }
@@ -31,21 +25,13 @@ type SectionStatus =
   | { kind: "success"; messageKey: string }
   | { kind: "error"; messageKey: string };
 
-// Dispatcher-Failures tragen i18nKey nur wenn der Handler einen setzt —
-// Boundary-Read mit generischem Fallback.
+// Dispatcher failures carry an i18nKey only when the handler sets one —
+// boundary read with a generic 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";
 }
 
-// Date-only slice of the raw ISO instant — the time/Z part is noise to the user.
-// Pure string-slice: no Date API (no-date-api guard), universal (RN+Web). Empty → "—".
-export function formatDeletionDate(iso: string | null | undefined): string {
-  if (!iso) return "—";
-  const tIndex = iso.indexOf("T");
-  return tIndex > 0 ? iso.slice(0, tIndex) : iso;
-}
-
 function StatusBanner({ status }: { readonly status: SectionStatus }): ReactNode {
   const t = useTranslation();
   const { Banner } = usePrimitives();
@@ -58,7 +44,12 @@ function StatusBanner({ status }: { readonly status: SectionStatus }): ReactNode
   return null;
 }
 
-function ChangePasswordSection(): ReactNode {
+// Mounted by the renderer's ExtensionSectionMount (already wrapped in
+// <Section title={...} testId="section-extension-...">) — takes no props of
+// its own. BareFormProvider keeps <Form> from rendering a second card/title
+// inside that Section (same pattern as AuthCard, see
+// auth-email-password/web/auth-form-primitives.tsx).
+export function ChangePasswordSection(): ReactNode {
   const t = useTranslation();
   const { Form, Field, Input, Button } = usePrimitives();
   const dispatcher = useDispatcher();
@@ -91,71 +82,74 @@ function ChangePasswordSection(): ReactNode {
 
   const submitting = status.kind === "submitting";
   return (
-    <Form
-      testId="profile-password"
-      title={t("profile.password.title")}
-      onSubmit={onSubmit}
-      actions={
-        <Button type="submit" disabled={submitting} testId="profile-password-submit">
-          {t("profile.password.submit")}
-        </Button>
-      }
-    >
-      <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} />
-    </Form>
+    <BareFormProvider>
+      <Form
+        testId="profile-password"
+        onSubmit={onSubmit}
+        actions={
+          <Button type="submit" disabled={submitting} testId="profile-password-submit">
+            {t("profile.password.submit")}
+          </Button>
+        }
+      >
+        <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} />
+      </Form>
+    </BareFormProvider>
   );
 }
 
-function ChangeEmailSection({
-  me,
-  onChanged,
-}: {
-  readonly me: MeRow;
-  readonly onChanged: () => void;
-}): ReactNode {
+// Mounted by the renderer's ExtensionSectionMount analogous to
+// ChangePasswordSection above. `values.email` is the host projectionDetail's
+// current `me` row (seeded from the `user:query:user:me` query, ../feature.ts)
+// — ExtensionSectionProps carries no refetch hook, so a successful change
+// pushes the new address back into the host form via `patch` instead of
+// relying on a full-screen refetch to un-stale the "current email" line.
+export function ChangeEmailSection({ values, patch }: ExtensionSectionProps): ReactNode {
   const t = useTranslation();
-  const { Form, Field, Input, Button } = usePrimitives();
+  const { Form, Field, Input, Button, Text } = usePrimitives();
   const dispatcher = useDispatcher();
   const [newEmail, setNewEmail] = useState("");
   const [currentPassword, setCurrentPassword] = useState("");
   const [status, setStatus] = useState<SectionStatus>({ kind: "idle" });
 
+  const currentEmail = typeof values?.["email"] === "string" ? values["email"] : "";
+
   const onSubmit = (): void => {
     void (async () => {
       setStatus({ kind: "submitting" });
@@ -167,10 +161,10 @@ function ChangeEmailSection({
         setStatus({ kind: "error", messageKey: failureKey(res.error) });
         return;
       }
-      // Verification-Mail an die neue Adresse. Der Wechsel ist bereits
-      // persistiert → ein Versand-Fehler darf den Erfolg nicht umkehren, wird
-      // aber NICHT verschluckt (sonst wartet der User auf eine Mail, die nie
-      // kommt). Die Success-Message verspricht entsprechend keinen Versand.
+      // Verification mail to the new address. The change is already
+      // persisted → a send failure must not reverse the success, but it is
+      // NOT swallowed (otherwise the user waits for a mail that never
+      // arrives). The success message accordingly promises no send.
       try {
         const verification = await requestEmailVerification(newEmail);
         if (!verification.ok) {
@@ -185,191 +179,54 @@ function ChangeEmailSection({
           `[user-profile] email changed but the verification email send threw: ${err instanceof Error ? err.message : String(err)}`,
         );
       }
+      patch?.({ email: newEmail });
       setNewEmail("");
       setCurrentPassword("");
       setStatus({ kind: "success", messageKey: "profile.email.success" });
-      onChanged();
     })();
   };
 
   const submitting = status.kind === "submitting";
   return (
-    <Form
-      testId="profile-email"
-      title={t("profile.email.title")}
-      onSubmit={onSubmit}
-      subtitle={
-        <span data-testid="profile-email-current">
-          {t("profile.email.current")}: {me.email}
-        </span>
-      }
-      actions={
-        <Button type="submit" disabled={submitting} testId="profile-email-submit">
-          {t("profile.email.submit")}
-        </Button>
-      }
-    >
-      <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} />
-    </Form>
-  );
-}
-
-function DangerZoneSection({
-  me,
-  onChanged,
-}: {
-  readonly me: MeRow;
-  readonly onChanged: () => void;
-}): ReactNode {
-  const t = useTranslation();
-  const { Button, Banner, Dialog, Card } = usePrimitives();
-  // Card.slots.title always renders <h3> — with the page's <h1> (variant="page")
-  // as this screen's only other heading, that skips <h2> (607/4). An explicit
-  // header slot with a real <h2> keeps the levels contiguous; layout mirrors
-  // DefaultCard's own default-header markup.
-  const dangerZoneHeader = (
-    <div className="flex flex-wrap items-start justify-between gap-3 px-6 pt-6 pb-4">
-      <h2 className="text-base font-semibold leading-none tracking-tight">
-        {t("profile.danger.title")}
-      </h2>
-    </div>
-  );
-  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();
-  };
-
-  const footer = deletionRequested ? (
-    <Button
-      variant="secondary"
-      onClick={() => void cancelDeletion()}
-      testId="profile-danger-cancel"
-    >
-      {t("profile.danger.cancelDeletion")}
-    </Button>
-  ) : (
-    <Button variant="danger" onClick={() => setDialogOpen(true)} testId="profile-danger-delete">
-      {t("profile.danger.delete")}
-    </Button>
-  );
-
-  return (
-    <Card
-      testId="profile-danger"
-      className="border-destructive/40"
-      slots={{ header: dangerZoneHeader, footer }}
-    >
-      <div className="flex flex-col gap-4">
-        {deletionRequested ? (
-          <>
-            <Banner variant="error" testId="profile-danger-requested">
-              {t("profile.danger.requested", {
-                date: formatDeletionDate(me.gracePeriodEnd),
-              })}
-            </Banner>
-            <StatusBanner status={status} />
-          </>
-        ) : (
-          <>
-            <p className="text-sm text-muted-foreground">{t("profile.danger.explainer")}</p>
-            <StatusBanner status={status} />
-            <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"
-            />
-          </>
-        )}
-      </div>
-    </Card>
-  );
-}
-
-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">
-        {t("profile.loading")}
-      </Banner>
-    );
-  }
-
-  const refetch = (): void => {
-    void meQuery.refetch?.();
-  };
-
-  return (
-    <FormScreenShell className="flex flex-col gap-6" testId="profile-screen">
-      <Heading variant="page">{t("profile.title")}</Heading>
-      {/* The two short account forms share a row from md up; the
-          danger zone stays full width below. */}
-      <div className="grid gap-6 md:grid-cols-2">
-        <ChangeEmailSection me={me} onChanged={refetch} />
-        <ChangePasswordSection />
-      </div>
-      <DangerZoneSection me={me} onChanged={refetch} />
-    </FormScreenShell>
+    <BareFormProvider>
+      <Form
+        testId="profile-email"
+        onSubmit={onSubmit}
+        actions={
+          <Button type="submit" disabled={submitting} testId="profile-email-submit">
+            {t("profile.email.submit")}
+          </Button>
+        }
+      >
+        <Text variant="muted" testId="profile-email-current">
+          {t("profile.email.current")}: {currentEmail}
+        </Text>
+        <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} />
+      </Form>
+    </BareFormProvider>
   );
 }

package/src/admin-shell/web/overview-layout.tsx

@@ -1,69 +0,0 @@
-// @runtime client
-import { usePrimitives } from "@cosmicdrift/kumiko-renderer";
-import { FormScreenShell } from "@cosmicdrift/kumiko-renderer-web";
-import type { ReactNode } from "react";
-
-export type OverviewCard = {
-  readonly label: string;
-  readonly value: string;
-  readonly hint?: string;
-  /** When true and hint is set, render an attention Banner inside the card. */
-  readonly attention?: boolean;
-};
-
-export type OverviewState =
-  | { readonly kind: "loading" }
-  | { readonly kind: "error"; readonly message: string }
-  | { readonly kind: "ready"; readonly cards: readonly OverviewCard[] };
-
-export function OverviewLayout({
-  testId,
-  title,
-  state,
-  loadingLabel,
-  columns = 3,
-}: {
-  readonly testId: string;
-  readonly title: string;
-  readonly state: OverviewState;
-  readonly loadingLabel: string;
-  readonly columns?: 2 | 3;
-}): ReactNode {
-  const { Banner, Card, Heading, Text } = usePrimitives();
-  const gridClass = columns === 2 ? "sm:grid-cols-2" : "sm:grid-cols-3";
-
-  return (
-    <FormScreenShell testId={testId} className="flex flex-col gap-6">
-      <Heading variant="page">{title}</Heading>
-
-      {state.kind === "loading" && (
-        <Text variant="small" testId={`${testId}-loading`}>
-          {loadingLabel}
-        </Text>
-      )}
-
-      {state.kind === "error" && (
-        <Banner variant="error" testId={`${testId}-error`}>
-          {state.message}
-        </Banner>
-      )}
-
-      {state.kind === "ready" && (
-        <div className={`grid grid-cols-1 gap-4 ${gridClass}`}>
-          {state.cards.map((card) => (
-            <Card key={card.label} testId={`${testId}-card`} slots={{ title: card.label }}>
-              <div className="flex flex-col gap-2" data-overview-card={card.label}>
-                <span className="text-3xl font-semibold tabular-nums">{card.value}</span>
-                {card.attention === true && card.hint !== undefined ? (
-                  <Banner variant="error">{card.hint}</Banner>
-                ) : (
-                  card.hint !== undefined && <Text variant="small">{card.hint}</Text>
-                )}
-              </div>
-            </Card>
-          ))}
-        </div>
-      )}
-    </FormScreenShell>
-  );
-}

package/src/admin-shell/web/overview-query.ts

@@ -1,15 +0,0 @@
-// @runtime client
-import type { Dispatcher, QueryResult } from "@cosmicdrift/kumiko-headless";
-import { isOverviewQueryAllowed, type OverviewWorkspaceKind } from "../overview-allowlist";
-
-export async function overviewQuery<T>(
-  kind: OverviewWorkspaceKind,
-  dispatcher: Dispatcher,
-  queryName: string,
-  payload: Record<string, unknown>,
-): Promise<QueryResult<T>> {
-  if (!isOverviewQueryAllowed(kind, queryName)) {
-    throw new Error(`admin-shell:overview query not allowlisted: ${queryName}`);
-  }
-  return dispatcher.query<T>(queryName, payload);
-}