feat(ui): formalize the Mosaic Profile surface and add a Drawer

[maxyinger]

Description

Formalizes the user page's ad-hoc sidebar/container into a generic Mosaic Profile surface, shared by the user profile and, later, the organization profile and their merge. Direction check-in, not review-ready.

Profile (components/profile/): Root / Nav / NavItem / PageTitle / Content / Page. Compositional internally; UserProfileView is the prop-driven shell on top (activePage, pages, customPages, pageOrder, onPageChange), with the derivation in user-profile.layout.ts. Fixed height standalone and inline (45rem), full-screen on a phone, filled by the popup in a modal. The dialog size panel is renamed profile, with card parity: the popup positions, the surface paints.

Compact navigation: below 48rem of its own width the tablist leaves the column for a bottom sheet. Profile.PageTitle (the h3 every page renders) becomes the trigger — <h3><button>Account ⌄</button></h3> — with the caret vertical-align: middle, so it centres on the x-height. Width is measured on the root rather than queried, since where the one tablist renders is a DOM decision.

Drawer (components/drawer/): the first styled consumer of the headless drawer. Prompt's surface, flush sides and bottom, --cl-radius-2xl top corners, grip, bottom bleed for the rubber band, motion composed from the headless vars, nested scrim inside a modal dialog.

Also: Branding hoisted out of Card and shared; --cl-shadow-card token consumed by Card and the profile frame; ids are apiKeys; custom-page types moved to user-profile.types.ts.

Headless fixes:

• useRender emits state attributes before other props. Chrome flushes style on a tabindex write to the focused element, and data-selected landing after it left a CSS anchor with nothing to anchor to for one recalc, so a [data-selected]-anchored mark only transitioned in one direction.
• Drawer drag: the inner-scroll walk stops at the document (a scrolled page vetoed every drag); upward drags at rest rubber-band unless inner content can scroll; swipe vars are mirrored onto the backdrop; a release reaching only window ends the gesture, and closing resets it.

Swingset: Profile and Drawer pages (with a Customized example of CSS-only anchor-positioned selected/hover marks), user-page renamed user-profile.

Austin's #9508 organization rough-in will be rebuilt on Profile rather than rebased.

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

https://claude.ai/code/session_01UNzajPkZEavBH31fpxG7sx

[vercel]

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

Project	Deployment	Actions	Updated
swingset	Ready	Preview	Sep 3, 2026 11:13pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
clerk-js-sandbox	Skipped		Sep 3, 2026 11:13pm UTC

[changeset-bot]

🦋 Changeset detected

Latest commit: 5e24fef

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

---

_{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@9652

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-google-signin

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 5e24fef