feat(mosaic): animate the connection description in the user profile

[maxyinger]

Description

Adds Section.CollapsibleDescription, a description line that opens and closes on the content it is given, and gives the connected accounts and Web3 wallets sections one row per provider that switches between its offered and connected states in place. Connecting a provider expands its identifier or address into the same row that offered "Connect"; removing the connection collapses it out again and the row offers "Connect" once more, without the row remounting or moving.

The part. It follows the measured-height variant of the row recipe that Field.Message and Section.Error use (feedbackStyles.collapse / message, useMessageHeight, useHeldMessage): the track transitions height from the measured var at --cl-duration-slow, on --cl-ease-enter opening and --cl-ease-in-out closing; the text fades in after a fast delay and out at fast on --cl-ease-exit, leaving the flow pinned to the bottom so the last content rides the moving edge until the row has closed. Reduced motion cuts the height and keeps the fade. The gap var is set to Section.Content's row gap, so a closed description costs nothing and an open one sits exactly where a plain Section.Description does. Content present when the part first mounts shows at once, with the first frame's transition: none kept so the measured var landing after mount cannot start a transition; a description that opens later enters from its starting style. truncate keeps the text to one line with an ellipsis, with title carrying the full value. The plain Section.Description is unchanged.

Two details worth knowing when reading the styles:

• The wrapper sizes its row track max-content. A truncating text child has overflow: hidden, which gives a grid item no automatic minimum size, so an auto track would follow the wrapper's animated height instead of the text and the measurement would read 0.
• The text element declares no text-wrap: in current browsers text-wrap sets text-wrap-mode, which overrides the truncation's white-space: nowrap.

The rows. Each section view used to render connected items and providers to connect as two lists of different row components, so connecting swapped one row for another. Each now renders one ordered list through useProviderRows (hooks/use-provider-rows.ts): a connected item takes its provider's id as its key when that provider is no longer offered, so the row that offered "Connect" is the row that shows the connection and vice versa; a further item of the same provider (a second MetaMask wallet) and an item whose provider is still offered (an unverified wallet) keep their own id; a key is held for as long as its item is present; and useStableOrder keeps rows where they were first shown, connected items first. The models now set providerId (the strategy) on UserProfileConnectedAccount and UserProfileWeb3Wallet, which the swingset fixtures already carried. UserProfileConnectedAccountRowView and UserProfileWeb3WalletRowView each take account / wallet or provider and render the same Section.Row, media and label either way, with the description, the badges, the Connect button or the menu, and every Section.Error switching in place. A removal trigger registers with useListRemovalFocus only while its row is connected.

The badges in these two labels (Disconnected, Primary, Unverified) keep their current cut; giving them the small-element enter/exit would mean sharing the contact rows' SlotItem and badge styles, which belong with the row-motion work on profile-list-row-motion.

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	Oct 13, 2026 10:22pm UTC
swingset	Ready	Preview	Oct 13, 2026 10:22pm UTC

[changeset-bot]

🦋 Changeset detected

Latest commit: 532d1a4

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

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

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