@structured-id/ui-core 1.3.0 → 3.0.0

package/README.md

@@ -1,23 +1,34 @@
 # @structured-id/ui-core
 
-Shared UI package for StructuredID applications. Provides Vue 3 composables, Pinia stores, protobuf-ts generated clients, and reusable components.
+Shared UI package for StructuredID applications: Vue 3 composables, Pinia stores and reusable components over the generated clients of [`@structured-id/proto`](https://www.npmjs.com/package/@structured-id/proto).
 
 ## What's Inside
 
-- **Proto clients** -- gRPC-Web clients generated from [proto](https://github.com/structured-id/proto) via protobuf-ts
-- **Composables** -- `createAuth` (password ceremonies over an injected ZKPP client), `useAuthApi`, `useAccountApi`, `useIdentityApi`, `useSecurityLevel`
+- **Composables** -- `createAuth` (password ceremonies over an injected ZKPP client), `useAuthApi`, `useAccountApi`, `useIdentityApi`, `useSecurityLevel`, transport setup (`initGrpc`, `initAccountApi`)
 - **Components** -- `SidLoginForm`, `SidRegistrationForm`, `SidMfaChallenge`, `SidPrincipalInput`, profile management pages
-- **Utilities** -- `normalizePrincipal`, `detectLoginInputType`, validators, formatters
+- **Utilities** -- `normalizePrincipal`, `detectLoginInputType`, `rpcRefusal`, validators, formatters
+
+The generated messages and clients, the `google.rpc` error model and the gRPC-web / WebTransport transport live in `@structured-id/proto`; import them from there (`@structured-id/proto/sid/v1/identity/identity.client`, `@structured-id/proto/transport`).
+
+### Migration from the previous exports
+
+The root no longer re-exports generated clients, messages or enums, and the
+`./proto` subpath is removed. Import those symbols from their schema modules in
+`@structured-id/proto`. The `./browser-vp` prototype subpath is also removed;
+this package does not provide a replacement browser-presentation implementation.
+The Vue composables and components keep their UI package owners.
 
 ## Usage
 
 ```ts
 import { getTransport, initGrpc } from "@structured-id/ui-core";
 import { SidLoginForm, createAuth } from "@structured-id/ui-core/profile";
-import { loadZkppClient } from "@structured-id/opaque-zkpp";
+import { IdentityServiceClient } from "@structured-id/proto/sid/v1/identity/identity.client";
+import { loadZkppClient } from "@structured-id/opaque";
 
 // Initialize gRPC transport
 initGrpc({ baseUrl: "http://localhost:9080" });
+const identity = new IdentityServiceClient(getTransport());
 
 // Password ceremonies (register, login, change, reset) on the app's client
 const { login } = createAuth(() => loadZkppClient());
@@ -25,25 +36,26 @@ const { login } = createAuth(() => loadZkppClient());
 
 ## Development
 
+The package ships its TypeScript and Vue sources; the consuming application's
+bundler (Vite under Quasar) compiles them, so there is no build step.
+
 ```bash
 yarn install
-yarn build       # Build library
 yarn test        # Run tests (vitest)
 yarn typecheck   # vue-tsc --noEmit
+node ci/check-package.mjs # Pack and build an external Vue/Vite consumer
 ```
 
 ## Architecture
 
 ```
 src/
-  composables/     # Vue 3 composition API
+  composables/     # Vue 3 composition API, transport setup
   stores/          # Pinia stores (auth)
   profile/         # Profile components and composables
     components/    # SidLoginForm, SidRegistrationForm, SidMfaChallenge
     composables/   # createAuth, useAuthApi, useAccountApi, useIdentityApi
-  utils/           # normalizePrincipal, validators, formatters
-  generated/       # protobuf-ts generated clients (do not edit)
-  proto/           # Proto definitions submodule
+  utils/           # normalizePrincipal, rpcRefusal, validators, formatters
 ```
 
 ## License

package/package.json

@@ -1,30 +1,22 @@
 {
   "name": "@structured-id/ui-core",
-  "version": "1.3.0",
+  "version": "3.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "description": "Shared UI package for StructuredID — proto clients, Vue 3 composables, Pinia stores, components.",
+  "description": "Shared UI package for StructuredID: Vue 3 composables, Pinia stores and components over the @structured-id/proto clients.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/structured-id/ui-core.git"
   },
   "homepage": "https://github.com/structured-id/ui-core",
   "bugs": "https://github.com/structured-id/ui-core/issues",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "types": "./src/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./src/index.ts",
-      "require": "./dist/index.cjs"
-    },
-    "./proto": {
-      "types": "./src/generated/index.d.ts",
-      "import": "./src/generated/index.js"
+      "import": "./src/index.ts"
     },
     "./components": {
       "import": "./src/components/index.ts"
@@ -32,59 +24,49 @@
     "./quasar": {
       "import": "./src/quasar/index.ts"
     },
-    "./browser-vp": {
-      "types": "./dist/browser-vp/index.d.ts",
-      "import": "./dist/browser-vp/index.js",
-      "require": "./dist/browser-vp/index.cjs"
-    },
     "./profile": {
       "import": "./src/profile/index.ts"
     }
   },
   "files": [
-    "dist",
     "src"
   ],
   "scripts": {
-    "generate": "buf generate --template buf.gen.yaml",
-    "build": "tsup",
-    "dev": "tsup --watch",
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint src/",
     "format": "prettier --write \"src/**/*.{ts,vue}\"",
     "test": "vitest run",
-    "test:watch": "vitest",
-    "prepublishOnly": "yarn generate && yarn build"
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@protobuf-ts/grpcweb-transport": "^2.11.1",
     "@protobuf-ts/runtime": "^2.11.1",
     "@protobuf-ts/runtime-rpc": "^2.11.1",
-    "libphonenumber-js": "^1.12.39"
+    "@structured-id/proto": "^0.2.0",
+    "libphonenumber-js": "^1.13.15"
   },
   "devDependencies": {
-    "@bufbuild/buf": "^1.47.0",
-    "@protobuf-ts/plugin": "^2.11.1",
-    "@vitejs/plugin-vue": "^6.0.5",
-    "@vue/compiler-dom": "^3.5.31",
-    "@vue/test-utils": "^2.4.6",
-    "eslint": "^9",
-    "jsdom": "^29.0.1",
-    "pinia": "^2.1.0",
-    "prettier": "^3.0.0",
-    "tsup": "^8.5.0",
-    "typescript": "^5.3.0",
-    "typescript-eslint": "^8.57.0",
-    "vitest": "^1.0.0",
-    "vue": "^3.4.0",
-    "vue-router": "^4.2.0",
-    "vue-tsc": "^2.0.0"
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vue/compiler-dom": "^3.5.43",
+    "@vue/devtools-api": "^8.2.1",
+    "@vue/test-utils": "^2.5.1",
+    "eslint": "^10.12.0",
+    "jsdom": "^30.1.2",
+    "pinia": "^4.0.3",
+    "prettier": "^3.9.9",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.71.1",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.3",
+    "vue": "^3.5.43",
+    "vue-router": "^5.4.0",
+    "vue-tsc": "^3.3.12"
   },
   "peerDependencies": {
-    "pinia": "^2.1.0",
+    "pinia": "^4.0.3",
     "quasar": "^2.17.0",
-    "vue": "^3.4.0",
-    "vue-router": "^4.2.0"
+    "vue": "^3.5.43",
+    "vue-router": "^5.4.0"
   },
   "peerDependenciesMeta": {
     "quasar": {

package/src/components/SidStatusBadge.vue

@@ -7,11 +7,7 @@
  */
 
 export type BadgeVariant =
-  | "active"
-  | "inactive"
-  | "pending"
-  | "error"
-  | "warning";
+  "active" | "inactive" | "pending" | "error" | "warning";
 
 const props = withDefaults(
   defineProps<{

package/src/composables/useAccountTransport.test.ts

@@ -12,7 +12,8 @@ const created: Array<{
 }> = [];
 
 vi.mock("@protobuf-ts/grpcweb-transport", () => ({
-  GrpcWebFetchTransport: vi.fn().mockImplementation((options) => {
+  // Called with `new`: a constructor mock must be a `function`, not an arrow.
+  GrpcWebFetchTransport: vi.fn().mockImplementation(function (options) {
     created.push(options);
     return { type: "grpc-web-transport" };
   }),

package/src/composables/useGrpc.test.ts

@@ -5,32 +5,35 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 // ---------------------------------------------------------------------------
 
 const mockAdaptiveInit = vi
-  .fn<[], Promise<void>>()
+  .fn<() => Promise<void>>()
   .mockResolvedValue(undefined);
 const mockAdaptiveClose = vi.fn();
 const mockAdaptiveActiveTransport = vi
-  .fn<[], string>()
+  .fn<() => string>()
   .mockReturnValue("grpc-web");
 
-vi.mock("../transport/adaptive", () => ({
-  AdaptiveRpcTransport: vi.fn().mockImplementation(() => ({
-    init: mockAdaptiveInit,
-    close: mockAdaptiveClose,
-    get activeTransport() {
-      return mockAdaptiveActiveTransport();
-    },
-  })),
+vi.mock("@structured-id/proto/transport", () => ({
+  // Constructor mocks are `function`s: they are called with `new`.
+  AdaptiveRpcTransport: vi.fn().mockImplementation(function () {
+    return {
+      init: mockAdaptiveInit,
+      close: mockAdaptiveClose,
+      get activeTransport() {
+        return mockAdaptiveActiveTransport();
+      },
+    };
+  }),
 }));
 
 vi.mock("@protobuf-ts/grpcweb-transport", () => ({
-  GrpcWebFetchTransport: vi
-    .fn()
-    .mockImplementation(() => ({ type: "grpc-web-transport" })),
+  GrpcWebFetchTransport: vi.fn().mockImplementation(function () {
+    return { type: "grpc-web-transport" };
+  }),
 }));
 
 // Import AFTER mocks
 import { GrpcWebFetchTransport } from "@protobuf-ts/grpcweb-transport";
-import { AdaptiveRpcTransport } from "../transport/adaptive";
+import { AdaptiveRpcTransport } from "@structured-id/proto/transport";
 import {
   initGrpc,
   getTransport,

package/src/composables/useGrpc.ts

@@ -2,8 +2,10 @@ import { GrpcWebFetchTransport } from "@protobuf-ts/grpcweb-transport";
 import type { RpcTransport } from "@protobuf-ts/runtime-rpc";
 import { ref, type Ref } from "vue";
 import type { GrpcConfig } from "../types/auth";
-import { AdaptiveRpcTransport } from "../transport/adaptive";
-import type { TransportType } from "../transport/adaptive";
+import {
+  AdaptiveRpcTransport,
+  type TransportType,
+} from "@structured-id/proto/transport";
 
 /** Shared RPC transport instance (gRPC-web or AdaptiveRpcTransport). */
 let _transport: RpcTransport | null = null;

package/src/index.ts

@@ -69,123 +69,5 @@ export type { AuthState, SessionInfo, GrpcConfig } from "./types";
 // i18n key constants
 export { AUTH_KEYS, COMMON_KEYS } from "./i18n";
 
-// Generated proto clients and types
-export { AuthServiceClient } from "./generated/sid/v1/authn/auth.client";
-export { IdentityServiceClient } from "./generated/sid/v1/identity/identity.client";
-export { AccountServiceClient } from "./generated/sid/v1/account/account.client";
-export { UpstreamServiceClient } from "./generated/sid/v1/federation/upstream.client";
-export { EnrollmentServiceClient } from "./generated/sid/v1/admin/enrollment.client";
-export type { InstanceStatus } from "./generated/sid/v1/admin/enrollment";
-
-// Re-export commonly used proto types
-export type {
-  OpaqueLoginStartRequest,
-  OpaqueLoginStartResponse,
-  OpaqueLoginFinishRequest,
-  OpaqueLoginFinishResponse,
-  OpaqueRegistrationStartRequest,
-  OpaqueRegistrationStartResponse,
-  OpaqueRegistrationFinishRequest,
-  OpaqueRegistrationFinishResponse,
-  MfaVerifyResponse,
-  TotpEnrollmentChallenge,
-  FinishTotpEnrollmentResponse,
-  ResendSmsMfaResponse,
-  GenerateRecoveryCodesResponse,
-  VerifyOtpResponse,
-  ResendOtpResponse,
-  VerifyPhoneResponse,
-  ConfirmIdpLinkResponse,
-  UserOrganization,
-  ListUserOrganizationsResponse,
-  SelectOrganizationResponse,
-  GetTermsResponse,
-  AcceptTermsResponse,
-  CibaConsentResponse,
-  VerifyCaptchaResponse,
-  DynamicPrompt,
-  DynamicPromptField,
-  SubmitDynamicPromptResponse,
-  StepUpChallenge,
-  CompleteStepUpResponse,
-  DeleteMfaCredentialResponse,
-  ConfirmAccountDeletionResponse,
-  SubmitDeviceUserCodeResponse,
-  OAuth2AuthorizeResponse,
-  WebAuthnAuthenticationStartResponse,
-  WebAuthnAuthenticationFinishResponse,
-  WebAuthnRegistrationStartResponse,
-  WebAuthnRegistrationFinishResponse,
-  RequestMagicLinkResponse,
-  VerifyMagicLinkResponse,
-  RequestPasswordResetResponse,
-  VerifyPasswordResetResponse,
-  ExecutePasswordResetResponse,
-  CompletePasswordResetResponse,
-  OpaqueZkppRegistrationStartResponse,
-  OpaqueZkppRegistrationFinishResponse,
-  PasswordChangeChallengeResponse,
-  PasswordChangeExecuteResponse,
-  PasswordChangeFinishResponse,
-} from "./generated/sid/v1/authn/auth";
-
-// Password operations: the history evaluator and the proof the finish carries
-export { PasswordHistoryEvaluatorServiceClient } from "./generated/sid/v1/authn/password_history.client";
-export type {
-  PasswordHistoryContext,
-  PasswordHistoryDomain,
-  PasswordHistoryEvaluation,
-  PasswordHistoryEvaluationProof,
-  PasswordRegistrationProof,
-} from "./generated/sid/v1/authn/password_history";
-export type { PasswordOperationId } from "./generated/sid/v1/ids/ids";
-
-export type {
-  Profile,
-  Session,
-  Credential,
-  Principal,
-} from "./generated/sid/v1/identity/identity";
-
-export { StepUpMethod } from "./generated/sid/v1/authn/auth";
-
-export {
-  ProfileStatus,
-  PrincipalType,
-  CredentialType,
-  AuthenticatorAttachment,
-} from "./generated/sid/v1/identity/identity";
-
-export type {
-  ConsentInfo,
-  ClaimConsent,
-  ActivityEvent,
-  ListConsentsResponse,
-  GetConsentDetailResponse,
-  ListActivityEventsResponse,
-  LinkedAccount,
-  ListLinkedAccountsResponse,
-  LinkAccountResponse,
-  ReauthenticateLinkResponse,
-  AvailableApp,
-  ListAvailableAppsResponse,
-  LaunchAppResponse,
-  PasswordlessStatus,
-  DisablePasswordlessResponse,
-} from "./generated/sid/v1/account/account";
-
-export {
-  ConsentStatus,
-  ClaimType,
-  ClaimConsentStatus,
-  ActivityEventStatus,
-  LinkedAccountTrustCategory,
-  LinkedAccountStatus,
-} from "./generated/sid/v1/account/account";
-
-export type { EnabledProviderInfo } from "./generated/sid/v1/federation/upstream";
-
-export { Timestamp } from "./generated/google/protobuf/timestamp";
-
-// Browser VP — import from '@structured-id/ui-core/browser-vp'
-// Separate entry point: WebAuthn PRF, IndexedDB, VP creation (browser-only APIs)
+// Generated clients and messages come from '@structured-id/proto'
+// (e.g. '@structured-id/proto/sid/v1/identity/identity.client').

package/src/profile/components/ConsentManager.vue

@@ -66,7 +66,11 @@
 </template>
 
 <script setup lang="ts">
-import { type ConsentInfo, ConsentStatus, Timestamp } from "../../index";
+import {
+  type ConsentInfo,
+  ConsentStatus,
+} from "@structured-id/proto/sid/v1/account/account";
+import { Timestamp } from "@structured-id/proto/google/protobuf/timestamp";
 
 defineProps<{
   consents: ConsentInfo[];

package/src/profile/components/ProfileEditor.vue

@@ -86,7 +86,7 @@
 
 <script setup lang="ts">
 import { reactive, computed, watch } from "vue";
-import type { Profile } from "../../index";
+import type { Profile } from "@structured-id/proto/sid/v1/identity/identity";
 
 const props = withDefaults(
   defineProps<{

package/src/profile/components/SecuritySettings.vue

@@ -96,7 +96,11 @@
 </template>
 
 <script setup lang="ts">
-import { type Credential, CredentialType, Timestamp } from "../../index";
+import {
+  type Credential,
+  CredentialType,
+} from "@structured-id/proto/sid/v1/identity/identity";
+import { Timestamp } from "@structured-id/proto/google/protobuf/timestamp";
 import type { FactorCategory } from "../composables/useSecurityLevel";
 
 defineProps<{

package/src/profile/components/SessionList.vue

@@ -49,7 +49,8 @@
 </template>
 
 <script setup lang="ts">
-import { type Session, Timestamp } from "../../index";
+import type { Session } from "@structured-id/proto/sid/v1/identity/identity";
+import { Timestamp } from "@structured-id/proto/google/protobuf/timestamp";
 
 defineProps<{
   sessions: Session[];

package/src/profile/components/SidRegistrationForm.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { mount } from "@vue/test-utils";
+import { flushPromises, mount } from "@vue/test-utils";
 import SidRegistrationForm from "./SidRegistrationForm.vue";
 
 const quasarStubs = {
@@ -22,6 +22,13 @@ const quasarStubs = {
       '<input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" />',
   },
   "q-btn": { template: '<button type="submit"><slot /></button>' },
+  "sid-password-ceremony": {
+    name: "SidPasswordCeremony",
+    props: ["outcome", "refusedText", "length", "fields"],
+    emits: ["settled"],
+    template:
+      '<div class="ceremony" :data-outcome="outcome" :data-refused="refusedText" :data-length="length" :data-fields="fields" />',
+  },
   "sid-principal-input": {
     props: ["modelValue", "disable", "label"],
     emits: ["update:modelValue", "update:principal-type"],
@@ -89,6 +96,23 @@ describe("SidRegistrationForm", () => {
     expect(w.findAll("input")).toHaveLength(3);
   });
 
+  // The ceremony folds as many rows as the form had password fields.
+  it("gives the ceremony the form's password fields", async () => {
+    for (const [showConfirmPassword, fields] of [
+      [true, "2"],
+      [false, "1"],
+    ] as const) {
+      const w = mountForm({ claimRequired: false, showConfirmPassword });
+      const inputs = w.findAll("input");
+      await inputs[0].setValue("owner@example.com");
+      for (const input of inputs.slice(1))
+        await input.setValue("Secret-Pass-123");
+      await w.find("form").trigger("submit");
+      await flushPromises();
+      expect(w.find(".ceremony").attributes("data-fields")).toBe(fields);
+    }
+  });
+
   // The pasted token reaches registerFn trimmed, and no invite code with it.
   it("submits the trimmed claim token", async () => {
     registerFn.mockClear();
@@ -125,6 +149,154 @@ describe("SidRegistrationForm", () => {
     );
   });
 
+  // While the registration runs the ceremony stands in for the fields; the
+  // account is announced only once its closing animation has played, and the
+  // form then settles on its success text, without the fields.
+  it("shows the ceremony and announces success after it settles", async () => {
+    let finish: () => void = () => {};
+    registerFn.mockImplementationOnce(
+      () => new Promise<void>((resolve) => (finish = resolve)),
+    );
+    const w = mountForm();
+    const [principal, password, confirm] = w.findAll("input");
+    await principal.setValue("user@example.com");
+    await password.setValue("Secret-Pass-123");
+    await confirm.setValue("Secret-Pass-123");
+    await w.find("form").trigger("submit");
+
+    const ceremony = w.find(".ceremony");
+    expect(ceremony.attributes("data-outcome")).toBe("running");
+    expect(ceremony.attributes("data-length")).toBe("15");
+    expect(w.find("form").isVisible()).toBe(false);
+
+    finish();
+    await flushPromises();
+    expect(w.find(".ceremony").attributes("data-outcome")).toBe("accepted");
+    expect(w.emitted("success")).toBeUndefined();
+    w.findComponent({ name: "SidPasswordCeremony" }).vm.$emit(
+      "settled",
+      "accepted",
+    );
+    expect(w.emitted("success")).toHaveLength(1);
+    await flushPromises();
+    expect(w.find(".ceremony").exists()).toBe(false);
+    expect(w.text()).toContain("Account created. Signing you in");
+    expect(w.find("form").isVisible()).toBe(false);
+  });
+
+  // A refusal names its reason in the ceremony, then gives the fields back
+  // with the reason above them.
+  it("gives the fields back with the reason after a refusal", async () => {
+    registerFn.mockRejectedValueOnce(new Error("This identifier is taken"));
+    const w = mountForm();
+    const [principal, password, confirm] = w.findAll("input");
+    await principal.setValue("user@example.com");
+    await password.setValue("Secret-Pass-123");
+    await confirm.setValue("Secret-Pass-123");
+    await w.find("form").trigger("submit");
+    await flushPromises();
+
+    const ceremony = w.find(".ceremony");
+    expect(ceremony.attributes("data-outcome")).toBe("refused");
+    expect(ceremony.attributes("data-refused")).toBe(
+      "This identifier is taken",
+    );
+    w.findComponent({ name: "SidPasswordCeremony" }).vm.$emit(
+      "settled",
+      "refused",
+    );
+    await flushPromises();
+    expect(w.find(".ceremony").exists()).toBe(false);
+    expect(w.find("form").isVisible()).toBe(true);
+    expect(w.text()).toContain("This identifier is taken");
+    expect(w.emitted("error")).toHaveLength(1);
+  });
+
+  // An application that draws its own progress keeps the `progress` slot:
+  // it replaces the ceremony and receives the progress while the operation
+  // runs. The final report comes right before the operation resolves, so
+  // the slot keeps it for a painted frame; with no closing animation to wait
+  // for, the form then announces the result.
+  it("lets a progress slot stand in for the ceremony", async () => {
+    const frames: FrameRequestCallback[] = [];
+    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) =>
+      frames.push(cb),
+    );
+    const paint = async () => {
+      for (const cb of frames.splice(0)) cb(0);
+      await flushPromises();
+    };
+    let report: (p: { fraction: number; label: string }) => void = () => {};
+    let finish: () => void = () => {};
+    registerFn.mockImplementationOnce(
+      (_id, _pw, _extras, onProgress) =>
+        new Promise<void>((resolve) => {
+          report = onProgress;
+          finish = () => {
+            onProgress({ fraction: 1, label: "Done" });
+            resolve();
+          };
+        }),
+    );
+    const w = mount(SidRegistrationForm, {
+      props: { registerFn },
+      global: { stubs: quasarStubs },
+      slots: {
+        progress: `<template #progress="{ progress }">
+          <div class="own-gauge">{{ progress?.label }}</div>
+        </template>`,
+      },
+    });
+    const [principal, password, confirm] = w.findAll("input");
+    await principal.setValue("user@example.com");
+    await password.setValue("Secret-Pass-123");
+    await confirm.setValue("Secret-Pass-123");
+    await w.find("form").trigger("submit");
+
+    report({ fraction: 0.4, label: "Building the proof" });
+    await flushPromises();
+    expect(w.find(".ceremony").exists()).toBe(false);
+    expect(w.find(".own-gauge").text()).toBe("Building the proof");
+
+    finish();
+    await flushPromises();
+    expect(w.find(".own-gauge").text()).toBe("Done");
+    expect(w.emitted("success")).toBeUndefined();
+
+    await paint();
+    await paint();
+    expect(w.emitted("success")).toHaveLength(1);
+    expect(w.find(".own-gauge").exists()).toBe(false);
+    expect(w.text()).toContain("Account created. Signing you in");
+    vi.unstubAllGlobals();
+  });
+
+  // A background tab may never run animation frames: the result is still
+  // announced, once, after a short timer, so a parent's sign-in or
+  // navigation is never held back by a paint that does not come.
+  it("announces the result without animation frames", async () => {
+    vi.useFakeTimers();
+    vi.stubGlobal("requestAnimationFrame", () => 0);
+    registerFn.mockResolvedValueOnce(undefined);
+    const w = mount(SidRegistrationForm, {
+      props: { registerFn },
+      global: { stubs: quasarStubs },
+      slots: { progress: `<div class="own-gauge" />` },
+    });
+    const [principal, password, confirm] = w.findAll("input");
+    await principal.setValue("user@example.com");
+    await password.setValue("Secret-Pass-123");
+    await confirm.setValue("Secret-Pass-123");
+    await w.find("form").trigger("submit");
+    await flushPromises();
+    expect(w.emitted("success")).toBeUndefined();
+
+    await vi.advanceTimersByTimeAsync(1000);
+    expect(w.emitted("success")).toHaveLength(1);
+    vi.unstubAllGlobals();
+    vi.useRealTimers();
+  });
+
   it("renders footer slot", () => {
     const w = mount(SidRegistrationForm, {
       props: { registerFn },