@cosmicdrift/kumiko-bundled-features 0.147.3 → 0.148.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-bundled-features",
-  "version": "0.147.3",
+  "version": "0.148.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>",
@@ -114,11 +114,11 @@
     "./step-dispatcher": "./src/step-dispatcher/index.ts"
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.147.3",
-    "@cosmicdrift/kumiko-framework": "0.147.3",
-    "@cosmicdrift/kumiko-headless": "0.147.3",
-    "@cosmicdrift/kumiko-renderer": "0.147.3",
-    "@cosmicdrift/kumiko-renderer-web": "0.147.3",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.148.0",
+    "@cosmicdrift/kumiko-framework": "0.148.0",
+    "@cosmicdrift/kumiko-headless": "0.148.0",
+    "@cosmicdrift/kumiko-renderer": "0.148.0",
+    "@cosmicdrift/kumiko-renderer-web": "0.148.0",
     "@mollie/api-client": "^4.5.0",
     "imapflow": "^1.3.3",
     "mailparser": "^3.9.8",

package/src/audit/__tests__/audit-screens.boot.test.ts

@@ -15,7 +15,7 @@ describe("audit log screen + handler access alignment", () => {
   test("audit-log screen is custom, access.admin-gated", () => {
     const audit = createAuditFeature();
     const screen = audit.screens[AUDIT_LOG_SCREEN_ID];
-    if (!screen || screen.type !== "custom") {
+    if (screen?.type !== "custom") {
       throw new Error(`expected a custom screen for ${AUDIT_LOG_SCREEN_ID}, got ${screen?.type}`);
     }
     if (!("access" in screen) || !screen.access || !("roles" in screen.access)) {
@@ -27,7 +27,7 @@ describe("audit log screen + handler access alignment", () => {
   test("audit-log-detail screen is custom, admin-gated, breadcrumb-linked to list", () => {
     const audit = createAuditFeature();
     const screen = audit.screens[AUDIT_LOG_DETAIL_SCREEN_ID];
-    if (!screen || screen.type !== "custom") {
+    if (screen?.type !== "custom") {
       throw new Error(
         `expected a custom screen for ${AUDIT_LOG_DETAIL_SCREEN_ID}, got ${screen?.type}`,
       );

package/src/auth-mfa/web/i18n.ts

@@ -7,6 +7,7 @@ import type { TranslationsByLocale } from "@cosmicdrift/kumiko-renderer";
 
 export const defaultTranslations: TranslationsByLocale = {
   de: {
+    "screen:auth-mfa-enable.title": "Zwei-Faktor-Authentifizierung",
     "auth.mfa.verify.title": "Zwei-Faktor-Bestätigung",
     "auth.mfa.verify.subtitle": "Gib den 6-stelligen Code aus deiner Authenticator-App ein.",
     "auth.mfa.verify.code": "Code",
@@ -36,6 +37,7 @@ export const defaultTranslations: TranslationsByLocale = {
     "auth.mfa.enable.success": "Zwei-Faktor-Authentifizierung ist jetzt aktiv.",
   },
   en: {
+    "screen:auth-mfa-enable.title": "Two-factor authentication",
     "auth.mfa.verify.title": "Two-factor verification",
     "auth.mfa.verify.subtitle": "Enter the 6-digit code from your authenticator app.",
     "auth.mfa.verify.code": "Code",

package/src/auth-mfa/web/mfa-enable-screen.tsx

@@ -39,7 +39,7 @@ export type MfaEnableScreenProps = { readonly embedded?: boolean };
 
 export function MfaEnableScreen({ embedded = false }: MfaEnableScreenProps = {}): ReactNode {
   const t = useTranslation();
-  const { Button, Banner, Field, Input, Card, Heading } = usePrimitives();
+  const { Button, Banner, Field, Input, Section, Heading } = usePrimitives();
   const dispatcher = useDispatcher();
   const session = useSession();
 
@@ -98,22 +98,43 @@ export function MfaEnableScreen({ embedded = false }: MfaEnableScreenProps = {})
       {error !== null && <Banner variant="error">{t(`auth.mfa.errors.${error}`)}</Banner>}
 
       {!setup && !enabled && (
-        <Card options={{ padded: true }} className="flex flex-col gap-3">
+        <Section
+          testId="mfa-enable-intro"
+          actions={
+            <Button
+              variant="primary"
+              onClick={() => void startSetup()}
+              loading={busy}
+              disabled={busy}
+            >
+              {t("auth.mfa.enable.start")}
+            </Button>
+          }
+        >
           <span className="text-sm text-muted-foreground">{t("auth.mfa.enable.intro")}</span>
-          <Button
-            variant="primary"
-            onClick={() => void startSetup()}
-            loading={busy}
-            disabled={busy}
-          >
-            {t("auth.mfa.enable.start")}
-          </Button>
-        </Card>
+        </Section>
       )}
 
       {setup && (
-        <Card options={{ padded: true }} className="flex flex-col gap-4">
-          <div className="flex flex-col gap-2">
+        <Section
+          testId="mfa-enable-setup"
+          actions={
+            <>
+              <Button variant="secondary" onClick={() => setSetup(null)} disabled={busy}>
+                {t("auth.mfa.enable.cancel")}
+              </Button>
+              <Button
+                variant="primary"
+                onClick={() => void confirmSetup()}
+                loading={busy}
+                disabled={busy || !acknowledged || code.length < 6}
+              >
+                {t("auth.mfa.enable.confirm")}
+              </Button>
+            </>
+          }
+        >
+          <div className="flex flex-col items-center gap-2 text-center">
             <span className="text-sm font-semibold">{t("auth.mfa.enable.scanTitle")}</span>
             {/* qrcode's own SVG string output, not user input — safe to inline */}
             <div
@@ -124,7 +145,7 @@ export function MfaEnableScreen({ embedded = false }: MfaEnableScreenProps = {})
             <span className="text-xs text-muted-foreground">
               {t("auth.mfa.enable.manualEntry")}
             </span>
-            <code className="block break-all rounded bg-muted px-3 py-2 font-mono text-sm">
+            <code className="inline-block break-all rounded bg-muted px-3 py-2 font-mono text-sm">
               {setup.secretParam}
             </code>
           </div>
@@ -159,21 +180,7 @@ export function MfaEnableScreen({ embedded = false }: MfaEnableScreenProps = {})
               autoComplete="one-time-code"
             />
           </Field>
-
-          <div className="flex justify-end gap-2">
-            <Button variant="secondary" onClick={() => setSetup(null)} disabled={busy}>
-              {t("auth.mfa.enable.cancel")}
-            </Button>
-            <Button
-              variant="primary"
-              onClick={() => void confirmSetup()}
-              loading={busy}
-              disabled={busy || !acknowledged || code.length < 6}
-            >
-              {t("auth.mfa.enable.confirm")}
-            </Button>
-          </div>
-        </Card>
+        </Section>
       )}
     </div>
   );