feat(mosaic): animate contact list reorders in the user profile

[maxyinger]

Description

Emails and phone numbers in the user profile's account section are now listed primary first, and every change to the list is animated.

Each row sits in a grid slot whose single track transitions between 1fr and 0fr, with the row's content fading and scaling inside a clip layer. Adding a row expands its slot; removing one collapses it. A reorder plays a collapse and an expand at once with one shared duration and curve, so the card's height is constant on every frame. The row becoming primary keeps its element and rides up while the rows it passes collapse above it and expand below it, through the new useReorderKeys hook (usePresenceList keeps the outgoing copy in place until its exit finishes). The entering track's start value comes from @starting-style, so both halves of a reorder resolve in the same style pass.

A set-primary request that outlasts a short delay marks the row busy and pulses the rows in a staggered wave, using the same spin-delay thresholds as SubmitButton; the reorder waits until the pulse has shown for its minimum. Under prefers-reduced-motion, every change is a cut, and an exiting row is hidden in the same commit its replacement mounts.

Section.Group no longer clips its overflow. useListRemovalFocus only unregisters a trigger it registered, since a row's outgoing copy unmounts after its replacement registers. The motion skill reference gains sections on reordering a vertical list and on the loading wave.

The "Multiple accounts" story starts with five emails, and a new "Set primary pending" story uses a slow request to show the wave.

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
clerk-js-sandbox	Ready	Preview	Sep 30, 2026 10:21pm UTC
swingset	Ready	Preview	Sep 30, 2026 10:21pm UTC

[changeset-bot]

🦋 Changeset detected

Latest commit: 4eb30c7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Autopilot is currently an internal CodeRabbit preview.

---

_{Comment @coderabbitai help to get the list of available commands.}

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@10005

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@10005

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@10005

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@10005

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10005

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10005

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10005

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@10005

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10005

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@10005

@clerk/express

npm i https://pkg.pr.new/@clerk/express@10005

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@10005

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10005

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@10005

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10005

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@10005

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@10005

@clerk/react

npm i https://pkg.pr.new/@clerk/react@10005

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@10005

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@10005

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@10005

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@10005

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10005

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@10005

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@10005

commit: 4eb30c7