feat(mosaic): notch the user avatar around its nested organization mark

[alexcarpenter]

Description

Stacked on #9807.

When an account leads the UserButton and works in an organization, the organization mark nests on the account avatar. This cuts a notch out of the avatar around that mark: the mark's own rounded square, 1px larger on every side, so a uniform gap of background separates the two, and the avatar's outline is filleted where the notch meets its edge so it never comes to a point. The notch is a CSS mask built from an SVG path in spacing units, so it scales with the avatar's size and mirrors under dir="rtl".

An avatar-only trigger now rings the avatar itself on focus rather than its box, since with the mark overhanging the lead the box is neither round nor square. The nested mark's radius uses the --cl-radius-sm token instead of a literal.

Also adds a No organizations section and story to the Swingset docs: an account that belongs to no organization, leading the surface by its identifier with only the gear in the header.

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:

[changeset-bot]

🦋 Changeset detected

Latest commit: 993a6ed

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

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Team

Run ID: 3171973a-6614-4ca0-8f97-8bf5a969fdc4

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

[vercel]

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

Project	Deployment	Actions	Updated
clerk-js-sandbox	Ready	Preview	Sep 18, 2026 9:51pm UTC
swingset	Ready	Preview	Sep 18, 2026 9:51pm UTC