[maxyinger]

Description

Adds a studio to swingset for recording Mosaic components and code edits as videos for social posts and docs. It is dev-only: the middleware returns 404 for /studio, /template, /capture and /recorder outside next dev.

• /template?showcase=<slug>: the workbench. A step list on the left, the stage in the middle, and layout, format, badge, scheme and grid controls on the right, built from Mosaic components.
• /capture/<slug>: the bare stage that plays a showcase for recording. It takes ?format=landscape|square|portrait, ?scheme=dark, ?badges=both|logo|none, ?step=N&hold and ?loop=0.
• /recorder: records human cursor paths, which the stage cursor replays.

A showcase is a View, an optional code(state) and a list of steps. Each step sets a layout (component, code or split), a partial state and cursor actions: click, hover, drag, scroll and type. The code panel animates edits as a two-line diff. Showcases included:

• UserButton display types (full → condensed → avatar only → accounts only)
• UserProfile opened from the UserButton, adding an authenticator app
• Button variants and UserButton variations as annotated spec sheets

The root layout moves into the (explorer) and (clerk) route groups so the (studio) group can render its own document. Swingset's other pages are unchanged.

Two Mosaic fixes surfaced while recording, in their own commit with patch changesets:

• Clickable Item rows (for example the 2-step verification method picker) kept the browser's default button background and border in apps without a CSS reset, because null StyleX defaults wiped the base values.
• Profile dialogs lost their shadow and edge on every side, because the popup's overflow: clip cut off anything the surface painted outside its box.

Skills: studio (authoring showcases), studio-ideas, studio-ideas-refresh and studio-promote (packaging a recording for posting).

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 30, 2026 11:06pm UTC
swingset	Ready	Preview	Oct 30, 2026 11:06pm UTC

[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.}

[changeset-bot]

🦋 Changeset detected

Latest commit: f72bc5e

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/mosaic	Patch
@clerk/swingset	Patch

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

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-biometrics

npm i https://pkg.pr.new/@clerk/expo-biometrics@10562

@clerk/expo-google-signin

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

@clerk/expo-native-components

npm i https://pkg.pr.new/@clerk/expo-native-components@10562

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/mosaic

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: f72bc5e