Skip to content

feat(mosaic): prototype an internal modal host with useUserProfileModal - #9998

Draft
alexcarpenter wants to merge 6 commits into
mainfrom
carp/mosaic-modals
Draft

alexcarpenter wants to merge 6 commits into
mainfrom
carp/mosaic-modals

Conversation

@alexcarpenter

Copy link
Copy Markdown
Member

Description

Prototype of how Mosaic could manage modals, starting with UserProfile. This is internal plumbing only: nothing new is exported from @clerk/mosaic, MosaicProvider gains no props, and the exported UserButton is unchanged (it still calls clerk.openUserProfile).

  • One hook per surface, e.g. useUserProfileModal(config) → { open(payload?), close(), preload(), isOpen }.
  • MosaicProvider mounts an internal modal host, so neither components nor apps render dialogs themselves.
  • Modal content is lazy-loaded. preload() warms it (e.g. on hover), and a failed load shows a retry inside the dialog instead of taking down the app.
  • open({ page }) re-seeds the content, so callers can deep-link into a page.
  • The host keeps an internal defaults layer; exposing it through a public MosaicProvider prop is left as an it.todo.

The UserProfile content uses static demo data. Try it in swingset on the UserButton page, under "Profile modal": "Manage account", "Open security" and "Open integrations" (a custom page) all open the same modal.

Known gaps before this could be public: localized loading/error text, an accessible dialog name while loading, forwarding the remaining profile props, and moving the organization profile and create-organization modals onto the host.

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: internal prototype

@vercel

vercel Bot commented Sep 30, 2026 •

Copy link
Copy Markdown

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

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

Request Review

@changeset-bot

changeset-bot Bot commented Sep 30, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: d5cb0af

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

coderabbitai Bot commented Sep 30, 2026

Copy link
Copy Markdown
Contributor

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

pkg-pr-new Bot commented Sep 30, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-google-signin

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/mosaic

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: d5cb0af

This branch was successfully deployed

2 active deployments
Preview – swingset — d5cb0af2 Deployed Sep 30, 2026 by vercel[bot]
Preview – clerk-js-sandbox — d5cb0af2 Deployed Sep 30, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant