feat(ui): rough in the user-profile account section flow

Adds the view layer for every action on the account section that opens a
dialog: adding and verifying an email address or phone number, removing one,
promoting one to primary, and editing the name, username and profile picture.
That is the whole of `UserProfileAccountSection`, which is what the flow is
named for — the intent is one flow per section, each named after the section
component it drives.

The views are pure. Each branches on a snapshot and sends events back, holding
no flow state of its own, so the layer that decides when a step changes can be
swapped without touching them. Today that layer is a simulated backend in
swingset, with configurable latency, injected failures and a reverification
gate; later it is a state machine and its Clerk controller. Every delay in the
harness maps to an invoke, every branch to a guard.

Legacy `packages/ui/src/components/UserProfile` is the spec. All three email
verification strategies are covered, since the instance picks between them
rather than the user: a code, an email link with its own waiting screen and
throttled resend, and enterprise SSO. Set-as-primary gains a confirmation it
does not have today, where its pending and failed states can live.

The dialog chrome, the reverification challenge and the shared flow types sit
apart from the account-specific dialogs, since the next section's flow will
reuse them.

Inputs Mosaic does not have yet — the code field, the country picker, the file
picker, the unattributed-error banner, and the dialog header/body/footer — are
hand-rolled and marked with TODOs naming their replacements.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: maxyinger

.changeset/user-profile-contact-flow-rough-in.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/components/DocsViewer.tsx

@@ -15,6 +15,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
   },
   'user-profile': {
     'user-page': dynamic(() => import('../stories/user-page.mdx')),
+    'user-profile-account-section-flow': dynamic(() => import('../stories/user-profile-account-section-flow.mdx')),
     'user-profile-profile-panel': dynamic(() => import('../stories/user-profile-profile-panel.mdx')),
     'user-profile-security-panel': dynamic(() => import('../stories/user-profile-security-panel.mdx')),
     'user-profile-billing-panel': dynamic(() => import('../stories/user-profile-billing-panel.mdx')),

packages/swingset/src/lib/registry.ts

@@ -107,6 +107,12 @@ import {
   meta as userProfileAccountSectionMeta,
   MultipleAccounts as UserProfileAccountSectionMultipleAccounts,
 } from '../stories/user-profile-account-section.stories';
+import {
+  Default as UserProfileAccountSectionFlowDefault,
+  meta as userProfileAccountSectionFlowMeta,
+  ProfileStates as UserProfileAccountSectionFlowProfileStates,
+  States as UserProfileAccountSectionFlowStates,
+} from '../stories/user-profile-account-section-flow.stories';
 import {
   Default as UserProfileActiveDevicesSectionDefault,
   meta as userProfileActiveDevicesSectionMeta,
@@ -291,6 +297,12 @@ const userPageModule: StoryModule = {
   meta: userPageMeta,
   Default: UserPageDefault,
 };
+const userProfileAccountSectionFlowModule: StoryModule = {
+  meta: userProfileAccountSectionFlowMeta,
+  Default: UserProfileAccountSectionFlowDefault,
+  States: UserProfileAccountSectionFlowStates,
+  ProfileStates: UserProfileAccountSectionFlowProfileStates,
+};
 
 const userProfileAccountSectionModule: StoryModule = {
   meta: userProfileAccountSectionMeta,
@@ -359,6 +371,7 @@ export const registry: StoryModule[] = [
   userButtonModule,
   // User Profile
   userPageModule,
+  userProfileAccountSectionFlowModule,
   // User Profile · Panels
   userProfileProfilePanelModule,
   userProfileSecurityPanelModule,