diff --git a/.changeset/config.json b/.changeset/config.json
index b309736542..bb1c0b6ec6 100644
--- a/.changeset/config.json
+++ b/.changeset/config.json
@@ -3,7 +3,9 @@
   "changelog": ["@changesets/changelog-github", {"repo": "sanity-io/plugins"}],
   "access": "public",
   "baseBranch": "main",
+  "format": "oxfmt",
   "privatePackages": false,
+  "bumpVersionsWithWorkspaceProtocolOnly": true,
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always",
     "onlyUpdatePeerDependentsWhenOutOfRange": true
diff --git a/.changeset/dashboard-widget-vercel-xstate.md b/.changeset/dashboard-widget-vercel-xstate.md
new file mode 100644
index 0000000000..f2a09b5e9b
--- /dev/null
+++ b/.changeset/dashboard-widget-vercel-xstate.md
@@ -0,0 +1,5 @@
+---
+"sanity-plugin-dashboard-widget-vercel": patch
+---
+
+Update `xstate` to ^5.33.2
diff --git a/.changeset/shared-deps-sanity-ui-icons-motion.md b/.changeset/shared-deps-sanity-ui-icons-motion.md
new file mode 100644
index 0000000000..0f066d4cbe
--- /dev/null
+++ b/.changeset/shared-deps-sanity-ui-icons-motion.md
@@ -0,0 +1,47 @@
+---
+"@sanity/assist": patch
+"@sanity/block-insert-picker": patch
+"@sanity/code-input": patch
+"@sanity/color-input": patch
+"@sanity/cross-dataset-duplicator": patch
+"@sanity/dashboard": patch
+"@sanity/debug-live-sync-tags": patch
+"@sanity/debug-preview-url-secret-plugin": patch
+"@sanity/document-internationalization": patch
+"@sanity/embeddings-index-ui": patch
+"@sanity/form-toolkit": patch
+"@sanity/google-maps-input": patch
+"@sanity/hierarchical-document-list": patch
+"@sanity/language-filter": patch
+"@sanity/orderable-document-list": patch
+"@sanity/personalization-plugin": patch
+"@sanity/rich-date-input": patch
+"@sanity/sanity-plugin-async-list": patch
+"@sanity/sfcc": patch
+"@sanity/studio-secrets": patch
+"@sanity/table": patch
+"@sanity/vercel-protection-bypass": patch
+"sanity-plugin-aprimo": patch
+"sanity-plugin-asset-source-unsplash": patch
+"sanity-plugin-bynder-input": patch
+"sanity-plugin-cloudinary": patch
+"sanity-plugin-dashboard-widget-document-list": patch
+"sanity-plugin-dashboard-widget-netlify": patch
+"sanity-plugin-dashboard-widget-vercel": patch
+"sanity-plugin-documents-pane": patch
+"sanity-plugin-google-translate": patch
+"sanity-plugin-graph-view": patch
+"sanity-plugin-hotspot-array": patch
+"sanity-plugin-iframe-pane": patch
+"sanity-plugin-internationalized-array": patch
+"sanity-plugin-markdown": patch
+"sanity-plugin-media": patch
+"sanity-plugin-mux-input": patch
+"sanity-plugin-shopify-assets": patch
+"sanity-plugin-utils": patch
+"sanity-plugin-workflow": patch
+"sanity-plugin-workspace-home": patch
+"sanity-translations-tab": patch
+---
+
+Raise the minimum versions of the `@sanity/ui` (4.2.7), `@sanity/icons` (5.2.2) and `motion` (13.4.4) dependencies the plugin uses
diff --git a/.changeset/themer-plugins-monorepo.md b/.changeset/themer-plugins-monorepo.md
new file mode 100644
index 0000000000..211d813d9a
--- /dev/null
+++ b/.changeset/themer-plugins-monorepo.md
@@ -0,0 +1,7 @@
+---
+"@sanity/themer": patch
+---
+
+author: @stipsan
+
+Move `@sanity/themer` from the sanity-io/ui monorepo to the Sanity plugins monorepo. The package builds to the same JavaScript and CSS, with the same exports and dependency ranges; issues and pull requests now go to [sanity-io/plugins](https://github.com/sanity-io/plugins).
diff --git a/.github/workflows/changesets-from-conventional-commits.yml b/.github/workflows/changesets-from-conventional-commits.yml
index d5fdd1dfdf..0718ccd3ce 100644
--- a/.github/workflows/changesets-from-conventional-commits.yml
+++ b/.github/workflows/changesets-from-conventional-commits.yml
@@ -1,7 +1,7 @@
-name: Add changeset to Renovate updates
+name: Add changeset from conventional commits
 
 on:
-  pull_request_target: # zizmor: ignore[dangerous-triggers] gated to renovate[bot]/squiggler-app[bot]; no PR code is checked out or executed in the reusable workflow
+  pull_request_target: # zizmor: ignore[dangerous-triggers] gated to renovate[bot]/squiggler-legacy[bot]/squiggler-app[bot]; no PR code is checked out or executed in the reusable workflow
     types: [opened, synchronize]
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
@@ -12,7 +12,7 @@ permissions:
 jobs:
   call:
     uses: sanity-io/.github/.github/workflows/changesets-from-conventional-commits.yml@main
-    if: github.event.pull_request.user.login == 'renovate[bot]' || github.event.pull_request.user.login == 'squiggler-app[bot]'
+    if: github.event.pull_request.user.login == 'renovate[bot]' || github.event.pull_request.user.login == 'squiggler-legacy[bot]' || github.event.pull_request.user.login == 'squiggler-app[bot]'
     secrets:
       ECOSPARK_APP_ID: ${{ secrets.ECOSPARK_APP_ID }}
       ECOSPARK_APP_PRIVATE_KEY: ${{ secrets.ECOSPARK_APP_PRIVATE_KEY }}
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 60e6d06aa0..add5bf3bd2 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -43,6 +43,37 @@ jobs:
       - name: Run Knip
         run: pnpm knip --reporter github-actions
 
+  storybook-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v7
+      - uses: ./.github/actions/setup
+      - name: Store Playwright's version
+        id: playwright-version
+        run: |
+          PLAYWRIGHT_VERSION=$(pnpm --filter plugins-storybook exec playwright --version | grep -oE '[0-9]+\.[0-9]+\.[0-9]+' | head -1)
+          echo "Playwright's version: $PLAYWRIGHT_VERSION"
+          echo "version=${PLAYWRIGHT_VERSION}" >> "$GITHUB_OUTPUT"
+      - name: Cache Playwright browsers for Playwright's version
+        id: cache-playwright-browsers
+        uses: actions/cache@v6
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ steps.playwright-version.outputs.version }}-playwright-browsers-chromium
+      - name: Install Playwright browsers
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: pnpm --filter plugins-storybook exec playwright install --with-deps chromium
+      - name: Install Playwright system deps (cache hit)
+        if: steps.cache-playwright-browsers.outputs.cache-hit == 'true'
+        run: pnpm --filter plugins-storybook exec playwright install-deps chromium
+      - run: pnpm test:browser
+      - uses: actions/upload-artifact@v7
+        if: failure()
+        with:
+          name: vitest-failure-screenshots
+          path: dev/storybook/**/__screenshots__/
+          if-no-files-found: ignore
+
   test_shards:
     name: Test (${{ matrix.shardIndex }}/${{ matrix.shardTotal }})
     runs-on: ubuntu-latest
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 0635f2893d..f5d9bff870 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -46,9 +46,6 @@ jobs:
           cache: pnpm
           check-latest: true
           node-version: lts/*
-      - name: Update npm to use trusted publishing (OIDC)
-        # npm 12 wraps `pnpm info --json`; @changesets/cli 3.0.1 does not unwrap it (changesets/changesets#2274)
-        run: npm install -g npm@11
       - run: pnpm install
       - name: Create Release Pull Request or Publish to npm
         uses: changesets/action@ae32849d5ba541f9ae29e40e22a623bc13562f51 # v2.1.2
diff --git a/.gitignore b/.gitignore
index e8f4c86ed1..5fc7c3a3ab 100644
--- a/.gitignore
+++ b/.gitignore
@@ -157,6 +157,13 @@ yalc.lock
 # Sanity Studio
 .sanity
 
+# Storybook
+storybook-static
+
+# Vitest browser mode failure screenshots and attachments
+__screenshots__
+.vitest-attachments
+
 # pnpm
 .pnpm-store
 
diff --git a/AGENTS.md b/AGENTS.md
index 57c7c985a8..d0777b2d8e 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -18,6 +18,8 @@ This guide is for AI agents working on this codebase. Follow these instructions
 | Cleanup e2e datasets | `pnpm e2e:cleanup`   |
 | Add changeset        | `pnpm changeset add` |
 | Start dev server     | `pnpm dev`           |
+| Start Storybook      | `pnpm dev:storybook` |
+| Run Storybook tests  | `pnpm test:browser`  |
 
 ## Environment Setup
 
@@ -74,6 +76,8 @@ pnpm test
 
 Every PR that changes published packages **must** include changesets. **Important:** Create a separate changeset file for each plugin you modify.
 
+The Changesets setup (`.changeset/config.json`, the `@changesets/*` versions, the `changeset`/`release` scripts and `.github/workflows/release.yml`) matches sanity-io/ui's; only the changelog `repo` differs. `"format": "oxfmt"` makes Changesets format the changesets and changelogs it writes with the repo's oxfmt config, and `"bumpVersionsWithWorkspaceProtocolOnly": true` keeps it from rewriting internal ranges that don't use `workspace:` (like the intentionally wide `sanity-plugin-internationalized-array` peer of `@sanity/sfcc`).
+
 #### Why Separate Changesets?
 
 Each plugin has its own changelog that consumers read. A combined changeset would pollute individual plugin changelogs with irrelevant information. For example, `@sanity/code-input`'s changelog should not mention workflow-specific changes.
@@ -210,12 +214,13 @@ Two things are required:
 
 The CI pipeline runs on every PR:
 
-| Job       | What it checks                                         |
-| --------- | ------------------------------------------------------ |
-| **build** | `pnpm build` - All packages compile successfully       |
-| **lint**  | `pnpm lint --format github` - Code passes oxlint       |
-| **knip**  | `pnpm knip` - No unused files, dependencies or exports |
-| **test**  | `pnpm test` - All tests pass (runs after build + lint) |
+| Job                | What it checks                                                 |
+| ------------------ | -------------------------------------------------------------- |
+| **build**          | `pnpm build` - All packages compile successfully               |
+| **lint**           | `pnpm lint --format github` - Code passes oxlint               |
+| **knip**           | `pnpm knip` - No unused files, dependencies or exports         |
+| **test**           | `pnpm test` - All tests pass (runs after build + lint)         |
+| **storybook-test** | `pnpm test:browser` - Every story renders in headless Chromium |
 
 Note on **knip**: in-file usage keeps an exported type "used" (`ignoreExportsUsedInFile`), so removing a type assertion or annotation that was the last reference to an exported type will make knip start flagging that export. Run `pnpm knip` after refactors that remove type references.
 
@@ -376,6 +381,10 @@ How it works:
 
 React profiling is already available in the development build from `pnpm dev`. `VERCEL_ENV` is listed in `dev/test-studio/turbo.jsonc` so Turbo cache keys differ between Vercel and non-Vercel builds.
 
+### Storybook
+
+`dev/storybook` is a React Storybook set up like sanity-io/ui's `apps/storybook`, next to the other dev apps, with stories in `dev/storybook/stories/<plugin>/` (see its `README.md`). `pnpm dev:storybook` serves it at `http://localhost:6006` without Sanity authentication, `pnpm test:browser` renders every story in headless Chromium through the Storybook Vitest addon (the `storybook-test` CI job), and `pnpm storybook:build` writes the static build to `dev/storybook/storybook-static`. Install the browser once with `pnpm --filter plugins-storybook exec playwright install chromium`. The preview imports `@sanity/ui/styles.css` because the published `@sanity/ui` dist doesn't import its own CSS, and it keeps the vanilla-extract Vite plugin because workspace plugins resolve to their `.css.ts` source. Like the other `dev/*` apps, it's skipped by `pretest` and the CI build job.
+
 ## Creating a New Plugin
 
 Use the generator:
@@ -558,6 +567,7 @@ The shared rules (plugins, options, categories, rules) live in the `@sanity/plug
 
 ```
 plugins/
+├── dev/storybook/        # React Storybook for plugin components (localhost:6006)
 ├── dev/test-studio/      # Test Sanity Studio (localhost:3333)
 ├── packages/@repo/       # Internal shared packages
 ├── packages/@sanity/     # Published tooling packages (e.g. @sanity/plugin-kit)
@@ -600,9 +610,10 @@ corepack enable
 
 ### Services
 
-| Service                  | Port | Purpose                                       |
-| ------------------------ | ---- | --------------------------------------------- |
-| Test Studio (`pnpm dev`) | 3333 | Local Sanity Studio for manual plugin testing |
+| Service                          | Port | Purpose                                         |
+| -------------------------------- | ---- | ----------------------------------------------- |
+| Test Studio (`pnpm dev`)         | 3333 | Local Sanity Studio for manual plugin testing   |
+| Storybook (`pnpm dev:storybook`) | 6006 | Plugin component stories, no Sanity auth needed |
 
 No Docker, databases, or other local services are required. CI-style verification (`pnpm lint`, `pnpm build`, `pnpm test run`) runs entirely in-process.
 
diff --git a/README.md b/README.md
index 19bd75c8b5..f266cba851 100644
--- a/README.md
+++ b/README.md
@@ -102,6 +102,7 @@ Sessions can be compared in the DevTools UI to diff bundle changes between build
 | [`@sanity/sfcc`](./plugins/@sanity/sfcc)                                                                 | Salesforce Commerce Cloud integration with synced product data      |
 | [`@sanity/studio-secrets`](./plugins/@sanity/studio-secrets)                                             | Manage Studio secrets at runtime                                    |
 | [`@sanity/table`](./plugins/@sanity/table)                                                               | Table schema type and input component for Sanity Studio             |
+| [`@sanity/themer`](./plugins/@sanity/themer)                                                             | Generate Studio themes from a few colors, with a themer Studio tool |
 | [`@sanity/vercel-protection-bypass`](./plugins/@sanity/vercel-protection-bypass)                         | Setup tool for Vercel Deployment Protection in previews             |
 | [`sanity-plugin-aprimo`](./plugins/sanity-plugin-aprimo)                                                 | Aprimo asset selector integration                                   |
 | [`sanity-plugin-asset-source-unsplash`](./plugins/sanity-plugin-asset-source-unsplash)                   | Use Unsplash images directly in Sanity Studio                       |
diff --git a/dev/storybook/.storybook/decorators/withSanityTheme.decorator.tsx b/dev/storybook/.storybook/decorators/withSanityTheme.decorator.tsx
new file mode 100644
index 0000000000..3221664d18
--- /dev/null
+++ b/dev/storybook/.storybook/decorators/withSanityTheme.decorator.tsx
@@ -0,0 +1,70 @@
+import {buildTheme, presets} from '@sanity/themer'
+import {Card, ThemeProvider} from '@sanity/ui'
+import type {RootTheme, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {DecoratorHelpers} from '@storybook/addon-themes'
+import type {Decorator} from '@storybook/react-vite'
+import {createGlobalStyle} from 'styled-components'
+
+const {initializeThemeState, pluckThemeFromContext} = DecoratorHelpers
+
+const GlobalStyle = createGlobalStyle`
+  body,
+  .docs-story {
+    background-color: ${
+      // oxlint-disable-next-line no-deprecated
+      ({theme}) => theme.sanity.color.base.bg
+    };
+  }
+`
+
+const presetThemes = new Map<string, RootTheme>()
+
+/** The theme `@sanity/themer` builds from the preset with the given slug, built once */
+function getPresetTheme(slug: string): RootTheme {
+  const cached = presetThemes.get(slug)
+  if (cached) return cached
+
+  const preset = presets.find((candidate) => candidate.slug === slug)
+  const theme = buildTheme(preset?.options)
+  presetThemes.set(slug, theme)
+
+  return theme
+}
+
+/**
+ * Story decorator which wraps all stories in a Sanity <ThemeProvider> with the theme that
+ * `buildTheme` from `@sanity/themer` generates from the preset picked in the toolbar, in the
+ * color scheme picked next to it.
+ *
+ * Stories are also wrapped in a <Card> for layout. Set the `padding` parameter to change (or
+ * remove, with `padding: 0`) the default padding – e.g. for stories that depend on exact
+ * viewport dimensions.
+ */
+export const withSanityTheme = ({
+  themes,
+  defaultTheme,
+}: {
+  themes: Record<string, string>
+  defaultTheme: string
+}): Decorator => {
+  initializeThemeState(Object.keys(themes), defaultTheme)
+
+  return (Story, context) => {
+    const selectedTheme = pluckThemeFromContext(context)
+    const {themeOverride} = context.parameters['themes'] ?? {}
+    const {padding = 4} = context.parameters
+    const preset = String(context.globals['preset'] ?? 'studio')
+
+    // oxlint-disable-next-line no-unsafe-type-assertion
+    const selected = (themeOverride || selectedTheme || defaultTheme) as ThemeColorSchemeKey
+
+    return (
+      <ThemeProvider scheme={selected} theme={getPresetTheme(preset)}>
+        <GlobalStyle />
+        <Card padding={padding}>
+          <Story />
+        </Card>
+      </ThemeProvider>
+    )
+  }
+}
diff --git a/dev/storybook/.storybook/main.ts b/dev/storybook/.storybook/main.ts
new file mode 100644
index 0000000000..9c82e9380e
--- /dev/null
+++ b/dev/storybook/.storybook/main.ts
@@ -0,0 +1,32 @@
+import {vanillaExtractPlugin} from '@sanity/vanilla-extract-vite-plugin'
+import type {StorybookConfig} from '@storybook/react-vite'
+import viteReact from '@vitejs/plugin-react'
+import {mergeConfig} from 'vite'
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-docs',
+    '@storybook/addon-links',
+    '@storybook/addon-themes',
+    '@storybook/addon-vitest',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  viteFinal(config) {
+    return mergeConfig(config, {
+      plugins: [
+        // `compiler` runs the React Compiler natively via `oxc-transform-react`
+        // (the Rust port) in the same pass as TypeScript/JSX — no babel
+        viteReact({compiler: {target: '19'}}),
+        // Workspace plugins resolve to their TypeScript source (dev `exports`),
+        // so their vanilla-extract `.css.ts` modules must be compiled here
+        vanillaExtractPlugin(),
+      ],
+    })
+  },
+}
+export default config
diff --git a/dev/storybook/.storybook/manager-head.html b/dev/storybook/.storybook/manager-head.html
new file mode 100644
index 0000000000..1cc63fd04c
--- /dev/null
+++ b/dev/storybook/.storybook/manager-head.html
@@ -0,0 +1,81 @@
+<!-- prettier-ignore -->
+<link rel="icon" href="https://www.sanity.io/static/images/favicons/favicon-96x96.png" sizes="96x96" type="image/png" />
+<!-- prettier-ignore -->
+<link rel="icon" href="https://www.sanity.io/static/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png" />
+<!-- prettier-ignore -->
+<link rel="icon" href="https://www.sanity.io/static/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png" />
+
+<style>
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2');
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+  }
+  .sidebar-subheading {
+    font-size: 13px !important;
+    font-weight: 500 !important;
+    letter-spacing: normal !important;
+    text-transform: capitalize !important;
+  }
+  /* Suppress the preview iframe's white background */
+  #storybook-preview-iframe {
+    background-color: transparent !important;
+  }
+</style>
diff --git a/dev/storybook/.storybook/manager.ts b/dev/storybook/.storybook/manager.ts
new file mode 100644
index 0000000000..bb13803002
--- /dev/null
+++ b/dev/storybook/.storybook/manager.ts
@@ -0,0 +1,11 @@
+import {addons} from 'storybook/manager-api'
+import {themes} from 'storybook/theming'
+
+addons.setConfig({
+  theme: {
+    ...themes.dark,
+    brandTitle: 'Sanity Plugins',
+    fontBase:
+      'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
+  },
+})
diff --git a/dev/storybook/.storybook/preview-head.html b/dev/storybook/.storybook/preview-head.html
new file mode 100644
index 0000000000..a13ed5c046
--- /dev/null
+++ b/dev/storybook/.storybook/preview-head.html
@@ -0,0 +1,79 @@
+<style>
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Regular.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Italic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Medium.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-MediumItalic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-SemiBold.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 600;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-SemiBoldItalic.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-Bold.woff2') format('woff2');
+  }
+  @font-face {
+    font-family: Inter;
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+    src: url('https://studio-static.sanity.io/Inter-BoldItalic.woff2') format('woff2');
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+  }
+  /* Make the preview body fill the viewport (like the app frame the components are designed
+     for), so that stories – and tests that click outside of them – behave predictably */
+  html,
+  body {
+    height: 100%;
+  }
+  /* Temporarily hide docs + story preloader skeletons, which currently show an unsightly flash when loading */
+  .sb-preparing-docs,
+  .sb-preparing-story {
+    display: none;
+  }
+  /* Hide all story overflow scrollbars on docs pages */
+  .docs-story > div {
+    overflow: hidden;
+  }
+</style>
diff --git a/dev/storybook/.storybook/preview.tsx b/dev/storybook/.storybook/preview.tsx
new file mode 100644
index 0000000000..756b296deb
--- /dev/null
+++ b/dev/storybook/.storybook/preview.tsx
@@ -0,0 +1,53 @@
+import '@sanity/ui/styles.css'
+import {presets} from '@sanity/themer'
+import type {Preview} from '@storybook/react-vite'
+import {themes} from 'storybook/theming'
+
+import {withSanityTheme} from './decorators/withSanityTheme.decorator'
+
+const preview: Preview = {
+  decorators: [
+    withSanityTheme({
+      themes: {light: 'light', dark: 'dark'},
+      defaultTheme: 'dark',
+    }),
+  ],
+  globalTypes: {
+    preset: {
+      description: 'The @sanity/themer preset that the theme is built from',
+      toolbar: {
+        title: 'Preset',
+        icon: 'paintbrush',
+        items: presets.map((preset) => ({value: preset.slug, title: preset.title})),
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    preset: 'studio',
+  },
+  parameters: {
+    actions: {argTypesRegex: '^on[A-Z].*'},
+    backgrounds: {disabled: true},
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    docs: {
+      theme: {
+        ...themes.dark,
+        fontBase: 'Inter, sans-serif',
+      },
+    },
+    layout: 'fullscreen',
+    options: {
+      storySort: {
+        order: ['themer', '*'],
+      },
+    },
+  },
+}
+
+export default preview
diff --git a/dev/storybook/README.md b/dev/storybook/README.md
new file mode 100644
index 0000000000..e69603b5b6
--- /dev/null
+++ b/dev/storybook/README.md
@@ -0,0 +1,23 @@
+# Sanity Plugins Storybook
+
+A React [Storybook](https://storybook.js.org) for the plugins in this monorepo, set up like the [Sanity UI Storybook](https://github.com/sanity-io/ui/tree/main/apps/storybook).
+
+```sh
+pnpm dev:storybook   # http://localhost:6006
+pnpm test:browser    # every story as a browser test
+pnpm storybook:build # static build in dev/storybook/storybook-static
+```
+
+## Storybook guidelines
+
+- Stories live in `stories/<plugin>/`, e.g. `stories/themer/` for `@sanity/themer`.
+- All stories must export either a named `Default` or `Basic` story.
+- Avoid creating custom titles for stories - these should be inferred via folder structure alone.
+- Where possible, stories should be kept as simple as possible with minimal custom / presentational props.
+- Prefer setting component values via storybook [args](https://storybook.js.org/docs/react/writing-stories/args) instead of passing them manually in props.
+- Stories import a plugin through its package name. Components that are not part of a plugin's public API (like the pieces of the `@sanity/themer` tool) are imported from the plugin's `src/` by relative path instead.
+
+## Things to note
+
+- All stories are wrapped with a [common decorator](https://storybook.js.org/docs/react/writing-stories/decorators#story-decorators) which wraps stories in both a `<ThemeProvider>` but also a `<Card>` with padding. The theme is built by `buildTheme` from `@sanity/themer`, from the preset picked in the toolbar next to the light/dark scheme toggle. Stories that depend on exact viewport dimensions can opt out of the padding with the `padding: 0` parameter.
+- Interaction tests are written as story `play` functions and run in a real browser with the [Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) (`pnpm test:browser`). Stories opt out of being tested with the `!test` tag. The Playwright-provided browser must be installed once via `pnpm --filter plugins-storybook exec playwright install chromium`.
diff --git a/dev/storybook/package.json b/dev/storybook/package.json
new file mode 100644
index 0000000000..6e108db104
--- /dev/null
+++ b/dev/storybook/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "plugins-storybook",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Storybook for the Sanity plugins",
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "type": "module",
+  "scripts": {
+    "build": "storybook build",
+    "dev": "storybook dev -p 6006",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "devDependencies": {
+    "@sanity/color": "catalog:",
+    "@sanity/icons": "catalog:",
+    "@sanity/themer": "workspace:*",
+    "@sanity/tsconfig": "catalog:",
+    "@sanity/ui": "catalog:",
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-links": "^10.6.0",
+    "@storybook/addon-themes": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vanilla-extract/css": "catalog:",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/browser-playwright": "^4.1.11",
+    "motion": "catalog:",
+    "oxc-transform-react": "catalog:",
+    "playwright": "^1.63.0",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "storybook": "^10.6.0",
+    "styled-components": "catalog:",
+    "vite": "^8.3.1",
+    "vitest": "catalog:"
+  }
+}
diff --git a/dev/storybook/stories/themer/theme/CanvasStory.tsx b/dev/storybook/stories/themer/theme/CanvasStory.tsx
new file mode 100644
index 0000000000..17264312ed
--- /dev/null
+++ b/dev/storybook/stories/themer/theme/CanvasStory.tsx
@@ -0,0 +1,282 @@
+import {
+  Box,
+  Card,
+  type CardTone,
+  Flex,
+  Grid,
+  Stack,
+  Text,
+  ThemeColorProvider,
+  useRootTheme,
+} from '@sanity/ui'
+import {
+  getContrastRatio,
+  mix,
+  parseColor,
+  rgbToHex,
+  type ThemeColorButton_v2,
+  type ThemeColorButtonMode_v2,
+  type ThemeColorButtonTone_v2,
+  type ThemeColorCard_v2,
+  type ThemeColorScheme_v2,
+  type ThemeColorSelectable_v2,
+  type ThemeColorSelectableTone_v2,
+  type ThemeColorState_v2,
+} from '@sanity/ui/theme'
+
+export function CanvasStory() {
+  const {theme} = useRootTheme()
+
+  return (
+    <Flex>
+      <ThemeColorProvider scheme="light">
+        <ColorScheme scheme={theme.v2!.color.light} />
+      </ThemeColorProvider>
+
+      <ThemeColorProvider scheme="dark">
+        <ColorScheme scheme={theme.v2!.color.dark} />
+      </ThemeColorProvider>
+    </Flex>
+  )
+}
+
+function ColorScheme(props: {scheme: ThemeColorScheme_v2}) {
+  const {scheme} = props
+
+  return (
+    <Flex direction="column" flex={1}>
+      <Color color={scheme.default} tone="default" />
+      <Color color={scheme.transparent} tone="transparent" />
+      <Color color={scheme.primary} tone="primary" />
+      <Color color={scheme.positive} tone="positive" />
+      <Color color={scheme.caution} tone="caution" />
+      <Color color={scheme.critical} tone="critical" />
+    </Flex>
+  )
+}
+
+function Color(props: {color: ThemeColorCard_v2; tone: CardTone}) {
+  const {color, tone} = props
+
+  return (
+    <Card padding={[3, 4]} tone={tone}>
+      <Stack gap={[3, 4]}>
+        <ColorBase color={color} />
+
+        <ColorButton color={color.button} />
+
+        <Box padding={2} style={{backgroundColor: color.input.default.enabled.bg}}>
+          <Text style={{color: 'inherit'}}>Input</Text>
+        </Box>
+
+        {/* @todo: remove use of `muted` here */}
+        <ColorSelectable color={color.selectable || color.muted} />
+
+        <Flex gap={1}>
+          <Box flex={1} style={{backgroundColor: color.avatar?.blue.bg, width: 25, height: 25}} />
+          <Box flex={1} style={{backgroundColor: color.avatar?.purple.bg, width: 25, height: 25}} />
+          <Box
+            flex={1}
+            style={{backgroundColor: color.avatar?.magenta.bg, width: 25, height: 25}}
+          />
+          <Box flex={1} style={{backgroundColor: color.avatar?.red.bg, width: 25, height: 25}} />
+          <Box flex={1} style={{backgroundColor: color.avatar?.yellow.bg, width: 25, height: 25}} />
+          <Box flex={1} style={{backgroundColor: color.avatar?.green.bg, width: 25, height: 25}} />
+          <Box flex={1} style={{backgroundColor: color.avatar?.cyan.bg, width: 25, height: 25}} />
+          <Box flex={1} style={{backgroundColor: color.avatar?.gray.bg, width: 25, height: 25}} />
+        </Flex>
+      </Stack>
+    </Card>
+  )
+}
+
+function ColorBase(props: {color: ThemeColorCard_v2}) {
+  const {color} = props
+
+  return (
+    <Stack
+      padding={3}
+      gap={2}
+      style={{
+        borderRadius: 3,
+        boxShadow: `inset 0 0 0 1px ${color.border}`,
+      }}
+    >
+      <Text>Text</Text>
+      <Text muted>Muted</Text>
+
+      <Text accent>Accent</Text>
+      <Text>
+        <a href="#">Link</a>
+      </Text>
+      <Text>
+        <code>Code</code>
+      </Text>
+      <div
+        style={{
+          height: 9,
+          background: `linear-gradient(to right, ${color.skeleton?.from}, ${color.skeleton?.to})`,
+        }}
+      />
+    </Stack>
+  )
+}
+
+function ColorButton(props: {color: ThemeColorButton_v2}) {
+  const {color} = props
+
+  return (
+    <Stack gap={3}>
+      <ColorButtonMode color={color.default} />
+      <ColorButtonMode color={color.ghost} />
+      <ColorButtonMode color={color.bleed} />
+    </Stack>
+  )
+}
+
+function ColorButtonMode(props: {color: ThemeColorButtonMode_v2}) {
+  const {color} = props
+
+  return (
+    <Stack gap={1}>
+      <Grid gridTemplateColumns={5} marginBottom={1} gap={1}>
+        <Box>
+          <Text align="center" muted size={1}>
+            Enabled
+          </Text>
+        </Box>
+        <Box>
+          <Text align="center" muted size={1}>
+            Hovered
+          </Text>
+        </Box>
+        <Box>
+          <Text align="center" muted size={1}>
+            Pressed
+          </Text>
+        </Box>
+        <Box>
+          <Text align="center" muted size={1}>
+            Selected
+          </Text>
+        </Box>
+        <Box>
+          <Text align="center" muted size={1}>
+            Disabled
+          </Text>
+        </Box>
+      </Grid>
+      <ColorGenericStates color={color.default} />
+      <ColorGenericStates color={color.primary} />
+      <ColorGenericStates color={color.positive} />
+      <ColorGenericStates color={color.caution} />
+      <ColorGenericStates color={color.critical} />
+    </Stack>
+  )
+}
+
+function ColorGenericStates(props: {color: ThemeColorButtonTone_v2}) {
+  const {color} = props
+
+  return (
+    <Grid gridTemplateColumns={5} gap={1}>
+      <ColorGenericState color={color.enabled} />
+      <ColorGenericState color={color.hovered} />
+      <ColorGenericState color={color.pressed} />
+      <ColorGenericState color={color.selected} />
+      <ColorGenericState color={color.disabled} />
+    </Grid>
+  )
+}
+
+function _contrast(baseBg: string, bg: string, fg: string) {
+  const baseBgRgb = parseColor(baseBg)
+  let bgRgb = parseColor(bg)
+
+  if (typeof bgRgb.a === 'number') {
+    bgRgb = mix(baseBgRgb, bgRgb, bgRgb.a)
+  }
+
+  return getContrastRatio(rgbToHex(bgRgb), fg)
+}
+
+function ColorGenericState(props: {color: ThemeColorState_v2}) {
+  const {color} = props
+
+  return (
+    <Stack
+      padding={2}
+      gap={2}
+      style={{
+        backgroundColor: color.bg,
+        color: color.fg,
+        border: `1px solid ${color.border}`,
+        borderRadius: 3,
+      }}
+    >
+      <Flex style={{border: `1px solid ${color.border}`}}>
+        <Box flex={1} padding={3} style={{backgroundColor: color.bg}}>
+          <Text align="center" size={1} style={{color: 'inherit'}}>
+            bg
+          </Text>
+        </Box>
+        <Box flex={1} padding={3} style={{backgroundColor: color.muted.bg}}>
+          <Text align="center" size={1} style={{color: 'inherit'}}>
+            bg2
+          </Text>
+        </Box>
+      </Flex>
+
+      <Text align="center" size={1} style={{color: 'inherit'}}>
+        Text &ndash; {_contrast(color.bg, color.bg, color.fg).toFixed(2)}
+      </Text>
+      <Text align="center" size={1} style={{color: color.muted.fg}}>
+        Muted &ndash; {_contrast(color.bg, color.bg, color.muted.fg).toFixed(2)}
+      </Text>
+      <Text align="center" size={1} style={{color: color.link.fg}}>
+        Link &ndash; {_contrast(color.bg, color.bg, color.link.fg).toFixed(2)}
+      </Text>
+      <Text align="center" size={1} style={{color: color.accent.fg}}>
+        Accent &ndash; {_contrast(color.bg, color.bg, color.accent.fg).toFixed(2)}
+      </Text>
+      <Text align="center" size={1} style={{color: color.code.fg}}>
+        <span style={{backgroundColor: color.code.bg}}>Code</span> &ndash;{' '}
+        {_contrast(color.bg, color.code.bg, color.code.fg).toFixed(2)}
+      </Text>
+      <div
+        style={{
+          height: 9,
+          background: `linear-gradient(to right, ${color.skeleton?.from}, ${color.skeleton?.to})`,
+        }}
+      />
+    </Stack>
+  )
+}
+
+function ColorSelectable(props: {color: ThemeColorSelectable_v2}) {
+  const {color} = props
+
+  return (
+    <Stack gap={1}>
+      <ColorSelectableTone color={color.default} />
+      <ColorSelectableTone color={color.primary} />
+      <ColorSelectableTone color={color.positive} />
+      <ColorSelectableTone color={color.caution} />
+      <ColorSelectableTone color={color.critical} />
+    </Stack>
+  )
+}
+
+function ColorSelectableTone(props: {color: ThemeColorSelectableTone_v2}) {
+  const {color} = props
+
+  return (
+    <Grid gridTemplateColumns={5} gap={1}>
+      <ColorGenericState color={color.enabled} />
+      <ColorGenericState color={color.hovered} />
+      <ColorGenericState color={color.pressed} />
+      <ColorGenericState color={color.selected} />
+      <ColorGenericState color={color.disabled} />
+    </Grid>
+  )
+}
diff --git a/dev/storybook/stories/themer/theme/DebugStory.tsx b/dev/storybook/stories/themer/theme/DebugStory.tsx
new file mode 100644
index 0000000000..bfbb52d075
--- /dev/null
+++ b/dev/storybook/stories/themer/theme/DebugStory.tsx
@@ -0,0 +1,273 @@
+import {CropIcon} from '@sanity/icons/Crop'
+import {Badge, Box, Flex, KBD, Stack, Text, useRootTheme} from '@sanity/ui'
+import {
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_STATE_TONES,
+  THEME_COLOR_STATES,
+  type ThemeColorCard_v2,
+  type ThemeColorCardToneKey,
+  type ThemeColorScheme_v2,
+  type ThemeColorSchemeKey,
+  type ThemeColorState_v2,
+} from '@sanity/ui/theme'
+import type {CSSProperties} from 'react'
+
+type CSSPropertiesWithCustomProperties = CSSProperties &
+  Record<`--${string}`, string | number | undefined>
+
+interface Features {
+  base: boolean
+  button: boolean
+  schemes: ThemeColorSchemeKey[]
+  selectable: boolean
+  tones: ThemeColorCardToneKey[]
+}
+
+const FEATURES: Features = {
+  base: true,
+  button: false,
+  schemes: ['light', 'dark'],
+  selectable: false,
+  tones: ['default'],
+}
+
+export function DebugStory() {
+  const {color} = useRootTheme().theme.v2!
+
+  return (
+    <Flex>
+      {FEATURES.schemes.map((scheme) => (
+        <DebugScheme features={FEATURES} key={scheme} scheme={color[scheme]} />
+      ))}
+    </Flex>
+  )
+}
+
+function DebugScheme(props: {features: Features; scheme: ThemeColorScheme_v2}) {
+  const {features, scheme} = props
+
+  return (
+    <Box flex={1} style={{backgroundColor: scheme.default.bg}}>
+      {features.tones.map((tone) => (
+        <DebugCard card={scheme[tone]} features={features} key={tone} />
+      ))}
+    </Box>
+  )
+}
+
+function DebugCard(props: {card: ThemeColorCard_v2; features: Features}) {
+  const {card, features} = props
+
+  return (
+    <Box style={getStateVars(card)}>
+      {features.base && <DebugState />}
+
+      {features.button && (
+        <Stack padding={2} gap={1}>
+          {THEME_COLOR_BUTTON_MODES.map((mode) => (
+            <Stack key={mode} gap={1}>
+              {THEME_COLOR_STATE_TONES.map((stateTone) => (
+                <Flex key={stateTone} gap={1}>
+                  {THEME_COLOR_STATES.map((state) => (
+                    <Box
+                      flex={1}
+                      key={state}
+                      style={getStateVars(card.button[mode][stateTone][state])}
+                    >
+                      <DebugState />
+                    </Box>
+                  ))}
+                </Flex>
+              ))}
+            </Stack>
+          ))}
+        </Stack>
+      )}
+
+      {features.selectable && (
+        <Stack padding={2} gap={1}>
+          {THEME_COLOR_STATE_TONES.map((stateTone) => (
+            <Flex key={stateTone} gap={1}>
+              {THEME_COLOR_STATES.map((state) => (
+                <Box flex={1} key={state} style={getStateVars(card.selectable[stateTone][state])}>
+                  <DebugState />
+                </Box>
+              ))}
+            </Flex>
+          ))}
+        </Stack>
+      )}
+    </Box>
+  )
+}
+
+const AVATAR_COLORS = [
+  'gray',
+  'red',
+  'orange',
+  'yellow',
+  'green',
+  'cyan',
+  'blue',
+  'purple',
+  'magenta',
+] as const
+
+function DebugState() {
+  return (
+    <Stack
+      overflow="auto"
+      padding={4}
+      gap={3}
+      style={{border: '1px solid var(--card-border-color)'}}
+    >
+      <Flex gap={3}>
+        <Text size={1}>Text</Text>
+        <Text size={1}>
+          <CropIcon />
+        </Text>
+      </Flex>
+      <Box padding={1} style={{backgroundColor: 'var(--card-muted-bg-color)'}}>
+        <Text muted size={1}>
+          Muted
+        </Text>
+      </Box>
+      <Text accent size={1}>
+        Accent
+      </Text>
+      <Text size={1}>
+        <a href="#" style={{color: 'var(--card-link-fg-color)'}}>
+          Link
+        </a>
+      </Text>
+      <Text size={1}>
+        <code>Code</code>
+      </Text>
+      <div>
+        <KBD>Cmd</KBD>
+      </div>
+      <Flex gap={1}>
+        {THEME_COLOR_STATE_TONES.map((stateTone) => (
+          <Box flex="none" key={stateTone}>
+            <Badge tone={stateTone}>{stateTone}</Badge>
+          </Box>
+        ))}
+      </Flex>
+      <div style={{borderBottom: '1px solid var(--card-border-color)'}} />
+      <Flex>
+        <Box
+          flex={1}
+          paddingBottom={3}
+          style={{backgroundColor: 'var(--card-skeleton-from-color)'}}
+        />
+        <Box
+          flex={1}
+          paddingBottom={3}
+          style={{backgroundColor: 'var(--card-skeleton-to-color)'}}
+        />
+      </Flex>
+      <Flex style={{gap: 1}}>
+        {AVATAR_COLORS.map((color) => (
+          <Box flex={1} key={color} overflow="hidden" padding={1} style={getAvatarStyle(color)}>
+            <Text size={1} weight="bold">
+              A
+            </Text>
+          </Box>
+        ))}
+      </Flex>
+    </Stack>
+  )
+}
+
+function getAvatarStyle(color: (typeof AVATAR_COLORS)[number]): CSSPropertiesWithCustomProperties {
+  return {
+    '--card-fg-color': `var(--card-avatar-${color}-fg-color)`,
+    'backgroundColor': `var(--card-avatar-${color}-bg-color)`,
+  }
+}
+
+function getStateVars(state: ThemeColorState_v2): CSSPropertiesWithCustomProperties {
+  return {
+    '--card-accent-fg-color': state.accent.fg,
+
+    '--card-avatar-gray-bg-color': state.avatar.gray.bg,
+    '--card-avatar-gray-fg-color': state.avatar.gray.fg,
+    '--card-avatar-red-bg-color': state.avatar.red.bg,
+    '--card-avatar-red-fg-color': state.avatar.red.fg,
+    '--card-avatar-orange-bg-color': state.avatar.orange.bg,
+    '--card-avatar-orange-fg-color': state.avatar.orange.fg,
+    '--card-avatar-yellow-bg-color': state.avatar.yellow.bg,
+    '--card-avatar-yellow-fg-color': state.avatar.yellow.fg,
+    '--card-avatar-green-bg-color': state.avatar.green.bg,
+    '--card-avatar-green-fg-color': state.avatar.green.fg,
+    '--card-avatar-cyan-bg-color': state.avatar.cyan.bg,
+    '--card-avatar-cyan-fg-color': state.avatar.cyan.fg,
+    '--card-avatar-blue-bg-color': state.avatar.blue.bg,
+    '--card-avatar-blue-fg-color': state.avatar.blue.fg,
+    '--card-avatar-purple-bg-color': state.avatar.purple.bg,
+    '--card-avatar-purple-fg-color': state.avatar.purple.fg,
+    '--card-avatar-magenta-bg-color': state.avatar.magenta.bg,
+    '--card-avatar-magenta-fg-color': state.avatar.magenta.fg,
+
+    '--card-badge-default-bg-color': state.badge.default.bg,
+    '--card-badge-default-dot-color': state.badge.default.dot,
+    '--card-badge-default-fg-color': state.badge.default.fg,
+    '--card-badge-default-icon-color': state.badge.default.icon,
+
+    '--card-badge-neutral-bg-color': state.badge.neutral.bg,
+    '--card-badge-neutral-dot-color': state.badge.neutral.dot,
+    '--card-badge-neutral-fg-color': state.badge.neutral.fg,
+    '--card-badge-neutral-icon-color': state.badge.neutral.icon,
+
+    '--card-badge-primary-bg-color': state.badge.primary.bg,
+    '--card-badge-primary-dot-color': state.badge.primary.dot,
+    '--card-badge-primary-fg-color': state.badge.primary.fg,
+    '--card-badge-primary-icon-color': state.badge.primary.icon,
+
+    '--card-badge-suggest-bg-color': state.badge.suggest.bg,
+    '--card-badge-suggest-dot-color': state.badge.suggest.dot,
+    '--card-badge-suggest-fg-color': state.badge.suggest.fg,
+    '--card-badge-suggest-icon-color': state.badge.suggest.icon,
+
+    '--card-badge-positive-bg-color': state.badge.positive.bg,
+    '--card-badge-positive-dot-color': state.badge.positive.dot,
+    '--card-badge-positive-fg-color': state.badge.positive.fg,
+    '--card-badge-positive-icon-color': state.badge.positive.icon,
+
+    '--card-badge-caution-bg-color': state.badge.caution.bg,
+    '--card-badge-caution-dot-color': state.badge.caution.dot,
+    '--card-badge-caution-fg-color': state.badge.caution.fg,
+    '--card-badge-caution-icon-color': state.badge.caution.icon,
+
+    '--card-badge-critical-bg-color': state.badge.critical.bg,
+    '--card-badge-critical-dot-color': state.badge.critical.dot,
+    '--card-badge-critical-fg-color': state.badge.critical.fg,
+    '--card-badge-critical-icon-color': state.badge.critical.icon,
+
+    '--card-bg-color': state.bg,
+
+    '--card-border-color': state.border,
+
+    '--card-code-bg-color': state.code.bg,
+    '--card-code-fg-color': state.code.fg,
+
+    '--card-fg-color': state.fg,
+
+    '--card-icon-color': state.icon,
+
+    '--card-kbd-bg-color': state.kbd.bg,
+    '--card-kbd-border-color': state.kbd.border,
+    '--card-kbd-fg-color': state.kbd.fg,
+
+    '--card-link-fg-color': state.link.fg,
+
+    '--card-muted-bg-color': state.muted.bg,
+    '--card-muted-fg-color': state.muted.fg,
+
+    '--card-skeleton-from-color': state.skeleton.from,
+    '--card-skeleton-to-color': state.skeleton.to,
+
+    'backgroundColor': 'var(--card-bg-color)',
+    'color': 'var(--card-fg-color)',
+  }
+}
diff --git a/dev/storybook/stories/themer/theme/Theme.stories.tsx b/dev/storybook/stories/themer/theme/Theme.stories.tsx
new file mode 100644
index 0000000000..f87469098c
--- /dev/null
+++ b/dev/storybook/stories/themer/theme/Theme.stories.tsx
@@ -0,0 +1,108 @@
+import {Box, Card, Tree, TreeItem, useRootTheme} from '@sanity/ui'
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+import {BuildStory} from './build/BuildStory'
+import {CanvasStory} from './CanvasStory'
+import {DebugStory} from './DebugStory'
+
+/**
+ * The theme that `buildTheme` from `@sanity/themer` generates from the preset picked in the
+ * toolbar, in both color schemes.
+ */
+const meta: Meta = {
+  parameters: {controls: {include: []}},
+}
+
+export default meta
+type Story = StoryObj
+
+export const Debug: Story = {
+  parameters: {padding: 0},
+  render: () => <DebugStory />,
+}
+
+export const Build: Story = {
+  parameters: {padding: 0},
+  render: () => <BuildStory />,
+  // The theme-builder preview renders an enormous DOM which crashes headless
+  // Chromium when it runs as a browser test
+  tags: ['!test'],
+}
+
+export const Canvas: Story = {
+  parameters: {padding: 0},
+  render: () => <CanvasStory />,
+  // The color canvas preview is too heavy to render within the browser test
+  // timeout
+  tags: ['!test'],
+}
+
+function ColorStory() {
+  const {theme} = useRootTheme()
+
+  // oxlint-disable-next-line no-deprecated
+  if (!theme.color) {
+    return null
+  }
+
+  return (
+    <Box padding={[4, 5, 6]}>
+      <Tree gap={1}>
+        {/* oxlint-disable-next-line no-deprecated */}
+        {Object.entries(theme.color).map(([key, value]) => (
+          <ColorGroup key={key} name={key} value={value} />
+        ))}
+      </Tree>
+    </Box>
+  )
+}
+
+function ColorGroup({name, value}: {name: string; value: Record<string, unknown>}) {
+  const entries = Object.entries(value)
+
+  return (
+    <TreeItem fontSize={1} padding={2} text={name}>
+      {entries.map(([key, value]) => {
+        if (value && typeof value === 'object') {
+          // oxlint-disable-next-line no-unsafe-type-assertion
+          return <ColorGroup key={key} name={key} value={value as Record<string, unknown>} />
+        }
+
+        if (typeof value !== 'string') {
+          return null
+        }
+
+        return <ColorPreview key={key} name={key} value={value} />
+      })}
+    </TreeItem>
+  )
+}
+
+function ColorPreview({name, value}: {name: string; value: string}) {
+  const text = (
+    <>
+      <Card
+        radius={2}
+        style={{
+          backgroundColor: value,
+          boxShadow: 'inset 0 0 0 1px var(--card-shadow-outline-color)',
+          display: 'inline-block',
+          height: 17,
+          width: 25,
+          margin: '0 8px -6px 0',
+          verticalAlign: 'top',
+        }}
+        tone="inherit"
+      />
+      {name} <code>{value}</code>
+    </>
+  )
+
+  return <TreeItem fontSize={1} padding={2} text={text} />
+}
+
+export const Color: Story = {
+  render: () => <ColorStory />,
+  // The color tree preview is too heavy to render as a browser test
+  tags: ['!test'],
+}
diff --git a/dev/storybook/stories/themer/theme/build/BuildStory.tsx b/dev/storybook/stories/themer/theme/build/BuildStory.tsx
new file mode 100644
index 0000000000..d01c0978f7
--- /dev/null
+++ b/dev/storybook/stories/themer/theme/build/BuildStory.tsx
@@ -0,0 +1,463 @@
+import {rem, useRootTheme, useTheme_v2} from '@sanity/ui'
+import {
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_INPUT_MODES,
+  THEME_COLOR_STATE_TONES,
+  type ThemeColorButtonTone_v2,
+  type ThemeColorCard_v2,
+  type ThemeColorCardToneKey,
+  type ThemeColorInputMode_v2,
+  type ThemeColorInputModeKey,
+  type ThemeColorState_v2,
+} from '@sanity/ui/theme'
+
+import {getCSSProps} from './helpers'
+import {Root} from './Root'
+
+export function BuildStory(): React.JSX.Element {
+  const {theme} = useRootTheme()
+
+  return (
+    <Root>
+      <div
+        style={{
+          display: 'flex',
+          ...getCSSProps({
+            // oxlint-disable-next-line no-deprecated
+            radius: theme.radius.map((r) => rem(r)),
+            // oxlint-disable-next-line no-deprecated
+            shadows: theme.shadows.map((s) =>
+              s
+                ? {
+                    umbra: s.umbra.join(' '),
+                    penumbra: s.penumbra.join(' '),
+                    ambient: s.ambient.join(' '),
+                  }
+                : {},
+            ),
+            // oxlint-disable-next-line no-deprecated
+            space: theme.space.map((s) => rem(s)),
+          }),
+        }}
+      >
+        <div style={{flex: 1}}>
+          {THEME_COLOR_CARD_TONES.map((baseTone) => (
+            <BaseTonePreview
+              baseTone={baseTone}
+              key={baseTone}
+              scheme="light"
+              theme={theme.v2!.color.light[baseTone]}
+            />
+          ))}
+        </div>
+        <div style={{flex: 1}}>
+          {THEME_COLOR_CARD_TONES.map((baseTone) => (
+            <BaseTonePreview
+              baseTone={baseTone}
+              key={baseTone}
+              scheme="dark"
+              theme={theme.v2!.color.dark[baseTone]}
+            />
+          ))}
+        </div>
+      </div>
+    </Root>
+  )
+}
+
+function BaseTonePreview(props: {
+  baseTone: ThemeColorCardToneKey
+  scheme: 'light' | 'dark'
+  theme: ThemeColorCard_v2
+}) {
+  const {baseTone, scheme, theme: color} = props
+  const theme = useTheme_v2()
+
+  return (
+    // oxlint-disable-next-line no-unsafe-type-assertion
+    <div className="base" style={getCSSProps(color as unknown as Record<string, unknown>)}>
+      <div
+        style={{
+          maxWidth: 600,
+          margin: 'auto',
+          padding: 'var(--space-4)',
+        }}
+      >
+        <pre style={{padding: 12}}>
+          color/{scheme}/{baseTone}
+        </pre>
+        <div style={{padding: 12}}>
+          <div
+            style={{
+              boxShadow: [
+                `0 0 0 ${theme.card.shadow.outline}px var(--shadow-outline)`,
+                `0 6px 8px -4px var(--shadow-umbra)`,
+                `0 12px 17px 2px var(--shadow-penumbra)`,
+                `0 5px 22px 4px var(--shadow-ambient)`,
+              ].join(', '),
+              padding: 'var(--space-3)',
+              borderRadius: 'var(--radius-2)',
+            }}
+          >
+            Shadow
+          </div>
+        </div>
+        <div style={{padding: 'var(--space-3)'}}>
+          <StatePreview theme={color.selectable.default.enabled} />
+        </div>
+        <div
+          style={{
+            padding: 'var(--space-3)',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 'var(--space-4)',
+          }}
+        >
+          {THEME_COLOR_INPUT_MODES.map((mode) => (
+            <InputPreview key={mode} mode={mode} theme={color.input[mode]} />
+          ))}
+        </div>
+        <div
+          style={{
+            marginTop: 'var(--space-4)',
+            padding: '1px 12px 12px 12px',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 'var(--space-4)',
+          }}
+        >
+          {THEME_COLOR_BUTTON_MODES.map((mode) => (
+            <div
+              key={mode}
+              style={{display: 'flex', flexDirection: 'column', gap: 'var(--space-1)'}}
+            >
+              {THEME_COLOR_STATE_TONES.map((tone) => {
+                return <ButtonPreview key={tone} theme={color.button[mode][tone]} />
+              })}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StatePreview(props: {theme: ThemeColorState_v2}) {
+  const {theme: card} = props
+
+  return (
+    <div
+      style={{
+        ...getCSSProps({card}),
+
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: -1,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          gap: 4,
+        }}
+      >
+        <div
+          className="card"
+          style={{
+            flex: 1,
+            padding: 'var(--space-2)',
+            display: 'flex',
+            gap: 'var(--space-1)',
+          }}
+          // oxlint-disable-next-line no-noninteractive-tabindex
+          tabIndex={0}
+        >
+          <div style={{flex: 'none'}}>Card</div>
+          <div className="icon" style={{flex: 'none'}}>
+            &copy;
+          </div>
+          <div className="muted-fg" style={{flex: 'none'}}>
+            m
+          </div>
+          <div className="accent-fg" style={{flex: 'none'}}>
+            a
+          </div>
+          <div className="link-fg" style={{flex: 'none'}}>
+            l
+          </div>
+          <div className="code" style={{flex: 'none'}}>
+            c
+          </div>
+          <div style={{flex: 'none'}}>
+            <CheckeredBackground />
+          </div>
+          <div style={{flex: 'none'}}>
+            <Skeleton />
+          </div>
+        </div>
+        <div
+          className="card selected"
+          style={{
+            flex: 1,
+            padding: 'var(--space-2)',
+            display: 'flex',
+            gap: 4,
+          }}
+        >
+          <div style={{flex: 'none'}}>Card</div>
+          <div className="icon" style={{flex: 'none'}}>
+            &copy;
+          </div>
+          <div className="muted-fg" style={{flex: 'none'}}>
+            m
+          </div>
+          <div className="accent-fg" style={{flex: 'none'}}>
+            a
+          </div>
+          <div className="link-fg" style={{flex: 'none'}}>
+            l
+          </div>
+          <div className="code" style={{flex: 'none'}}>
+            c
+          </div>
+          <div style={{flex: 'none'}}>
+            <CheckeredBackground />
+          </div>
+          <div style={{flex: 'none'}}>
+            <Skeleton />
+          </div>
+        </div>
+        <div
+          className="card disabled"
+          style={{
+            flex: 1,
+            padding: 'var(--space-2)',
+            display: 'flex',
+            gap: 4,
+          }}
+        >
+          <div style={{flex: 'none'}}>Card</div>
+          <div className="icon" style={{flex: 'none'}}>
+            &copy;
+          </div>
+          <div className="muted-fg" style={{flex: 'none'}}>
+            m
+          </div>
+          <div className="accent-fg" style={{flex: 'none'}}>
+            a
+          </div>
+          <div className="link-fg" style={{flex: 'none'}}>
+            l
+          </div>
+          <div className="code" style={{flex: 'none'}}>
+            c
+          </div>
+          <div style={{flex: 'none'}}>
+            <CheckeredBackground />
+          </div>
+          <div style={{flex: 'none'}}>
+            <Skeleton />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function ButtonPreview(props: {theme: ThemeColorButtonTone_v2}) {
+  const {theme: button} = props
+
+  return (
+    <div
+      style={{
+        ...getCSSProps({button}),
+
+        display: 'flex',
+        gap: 4,
+      }}
+    >
+      <div
+        className="button"
+        style={{flex: 1, padding: 'var(--space-2)', display: 'flex', gap: 4}}
+        // oxlint-disable-next-line no-noninteractive-tabindex
+        tabIndex={0}
+      >
+        <div style={{flex: 'none'}}>Button</div>
+        <div className="icon" style={{flex: 'none'}}>
+          &copy;
+        </div>
+        <div className="muted" style={{flex: 'none'}}>
+          m
+        </div>
+        <div className="accent" style={{flex: 'none'}}>
+          a
+        </div>
+        <div className="link" style={{flex: 'none'}}>
+          l
+        </div>
+        <div className="code" style={{flex: 'none'}}>
+          c
+        </div>
+        <div className="kbd" style={{flex: 'none'}}>
+          k
+        </div>
+        <div className="badge badge--default" style={{flex: 'none'}}>
+          b
+        </div>
+        <div style={{flex: 'none'}}>
+          <CheckeredBackground />
+        </div>
+        <div style={{flex: 'none'}}>
+          <Skeleton />
+        </div>
+      </div>
+      <div
+        className="button selected"
+        style={{flex: 1, padding: 'var(--space-2)', display: 'flex', gap: 4}}
+      >
+        <div style={{flex: 'none'}}>Button</div>
+        <div className="icon" style={{flex: 'none'}}>
+          &copy;
+        </div>
+        <div className="muted-fg" style={{flex: 'none'}}>
+          m
+        </div>
+        <div className="accent-fg" style={{flex: 'none'}}>
+          a
+        </div>
+        <div className="link-fg" style={{flex: 'none'}}>
+          l
+        </div>
+        <div className="code" style={{flex: 'none'}}>
+          c
+        </div>
+        <div style={{flex: 'none'}}>
+          <CheckeredBackground />
+        </div>
+        <div style={{flex: 'none'}}>
+          <Skeleton />
+        </div>
+      </div>
+      <div
+        className="button disabled"
+        style={{flex: 1, padding: 'var(--space-2)', display: 'flex', gap: 4}}
+      >
+        <div style={{flex: 'none'}}>Button</div>
+        <div className="icon" style={{flex: 'none'}}>
+          &copy;
+        </div>
+        <div className="muted-fg" style={{flex: 'none'}}>
+          m
+        </div>
+        <div className="accent-fg" style={{flex: 'none'}}>
+          a
+        </div>
+        <div className="link-fg" style={{flex: 'none'}}>
+          l
+        </div>
+        <div className="code" style={{flex: 'none'}}>
+          c
+        </div>
+        <div style={{flex: 'none'}}>
+          <CheckeredBackground />
+        </div>
+        <div style={{flex: 'none'}}>
+          <Skeleton />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function CheckeredBackground() {
+  return (
+    <div className="border" style={{display: 'flex', flexDirection: 'column'}}>
+      <div style={{display: 'flex'}}>
+        <div
+          style={{
+            width: 8,
+            height: 8,
+          }}
+        />
+        <div
+          className="bg2"
+          style={{
+            width: 8,
+            height: 8,
+          }}
+        />
+      </div>
+      <div style={{display: 'flex'}}>
+        <div
+          className="bg2"
+          style={{
+            width: 8,
+            height: 8,
+          }}
+        />
+        <div
+          style={{
+            width: 8,
+            height: 8,
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+function Skeleton() {
+  return (
+    <div className="border" style={{display: 'flex'}}>
+      <div
+        className="skeleton-from"
+        style={{
+          width: 8,
+          height: 16,
+        }}
+      />
+      <div
+        className="skeleton-to"
+        style={{
+          width: 8,
+          height: 16,
+        }}
+      />
+    </div>
+  )
+}
+
+function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInputMode_v2}) {
+  const {mode, theme: input} = props
+
+  return (
+    <div
+      style={{
+        ...getCSSProps({input}),
+
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 8,
+      }}
+    >
+      <div
+        className="input"
+        // oxlint-disable-next-line no-noninteractive-tabindex
+        tabIndex={0}
+      >
+        <span>Text ({mode})</span> <span className="placeholder">Placeholder</span>
+      </div>
+      <div
+        className="input readOnly"
+        // oxlint-disable-next-line no-noninteractive-tabindex
+        tabIndex={0}
+      >
+        <span>Text ({mode})</span>
+      </div>
+      <div className="input disabled">
+        <span>Text ({mode})</span>
+      </div>
+    </div>
+  )
+}
diff --git a/dev/storybook/stories/themer/theme/build/Root.tsx b/dev/storybook/stories/themer/theme/build/Root.tsx
new file mode 100644
index 0000000000..43ef815506
--- /dev/null
+++ b/dev/storybook/stories/themer/theme/build/Root.tsx
@@ -0,0 +1,367 @@
+import {getTheme_v2} from '@sanity/ui/theme'
+import {css, styled} from 'styled-components'
+
+export const Root = styled.div((props) => {
+  const {button, card, input} = getTheme_v2(props.theme)
+
+  return css`
+    background: #000;
+    font-family:
+      Inter,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
+    font-size: 13px;
+    line-height: 9px;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    user-select: none;
+
+    pre {
+      font: inherit;
+      font-family: 'SF Mono', Menlo, monospace;
+      margin: 0;
+      padding: 0;
+    }
+
+    .base {
+      background-color: var(--bg);
+      color: var(--fg);
+    }
+
+    .button {
+      --border-width: ${button.border.width}px;
+
+      --bg: var(--button-enabled-bg);
+      --fg: var(--button-enabled-fg);
+      --icon: var(--button-enabled-icon);
+      --border: var(--button-enabled-border);
+      --muted-bg: var(--button-enabled-muted-bg);
+      --muted-fg: var(--button-enabled-muted-fg);
+      --accent-fg: var(--button-enabled-accent-fg);
+      --link-fg: var(--button-enabled-link-fg);
+      --code-bg: var(--button-enabled-code-bg);
+      --code-fg: var(--button-enabled-code-fg);
+      --skeleton-from: var(--button-enabled-skeleton-from);
+      --skeleton-to: var(--button-enabled-skeleton-to);
+
+      background-color: var(--bg);
+      color: var(--fg);
+      box-shadow: inset 0 0 0 var(--border-width) var(--border);
+      text-align: center;
+      border-radius: var(--radius-2);
+      font-weight: 500;
+      cursor: default;
+      transition: box-shadow 50ms ease-in-out;
+      outline: none;
+      justify-content: center;
+      align-items: center;
+
+      &:hover {
+        --bg: var(--button-hovered-bg);
+        --fg: var(--button-hovered-fg);
+        --icon: var(--button-hovered-icon);
+        --border: var(--button-hovered-border);
+        --muted-bg: var(--button-hovered-muted-bg);
+        --muted-fg: var(--button-hovered-muted-fg);
+        --accent-fg: var(--button-hovered-accent-fg);
+        --link-fg: var(--button-hovered-link-fg);
+        --code-bg: var(--button-hovered-code-bg);
+        --code-fg: var(--button-hovered-code-fg);
+        --skeleton-from: var(--button-hovered-skeleton-from);
+        --skeleton-to: var(--button-hovered-skeleton-to);
+      }
+
+      &:focus-visible {
+        box-shadow:
+          inset 0 0 0 var(--border-width) var(--border),
+          0 0 0 1px var(--base-bg),
+          0 0 0 3px var(--focus-ring);
+
+        --bg: var(--button-hovered-bg);
+        --fg: var(--button-hovered-fg);
+        --icon: var(--button-hovered-icon);
+        --border: var(--button-hovered-border);
+        --muted-bg: var(--button-hovered-muted-bg);
+        --muted-fg: var(--button-hovered-muted-fg);
+        --accent-fg: var(--button-hovered-accent-fg);
+        --link-fg: var(--button-hovered-link-fg);
+        --code-bg: var(--button-hovered-code-bg);
+        --code-fg: var(--button-hovered-code-fg);
+        --skeleton-from: var(--button-hovered-skeleton-from);
+        --skeleton-to: var(--button-hovered-skeleton-to);
+      }
+
+      &:active {
+        --bg: var(--button-pressed-bg);
+        --fg: var(--button-pressed-fg);
+        --icon: var(--button-pressed-icon);
+        --border: var(--button-pressed-border);
+        --muted-bg: var(--button-pressed-muted-bg);
+        --muted-fg: var(--button-pressed-muted-fg);
+        --accent-fg: var(--button-pressed-accent-fg);
+        --link-fg: var(--button-pressed-link-fg);
+        --code-bg: var(--button-pressed-code-bg);
+        --code-fg: var(--button-pressed-code-fg);
+        --skeleton-from: var(--button-pressed-skeleton-from);
+        --skeleton-to: var(--button-pressed-skeleton-to);
+      }
+
+      &.selected {
+        --bg: var(--button-selected-bg);
+        --fg: var(--button-selected-fg);
+        --icon: var(--button-selected-icon);
+        --border: var(--button-selected-border);
+        --muted-bg: var(--button-selected-muted-bg);
+        --muted-fg: var(--button-selected-muted-fg);
+        --accent-fg: var(--button-selected-accent-fg);
+        --link-fg: var(--button-selected-link-fg);
+        --code-bg: var(--button-selected-code-bg);
+        --code-fg: var(--button-selected-code-fg);
+        --skeleton-from: var(--button-selected-skeleton-from);
+        --skeleton-to: var(--button-selected-skeleton-to);
+      }
+
+      &.disabled {
+        --bg: var(--button-disabled-bg);
+        --fg: var(--button-disabled-fg);
+        --icon: var(--button-disabled-icon);
+        --border: var(--button-disabled-border);
+        --muted-bg: var(--button-disabled-muted-bg);
+        --muted-fg: var(--button-disabled-muted-fg);
+        --accent-fg: var(--button-disabled-accent-fg);
+        --link-fg: var(--button-disabled-link-fg);
+        --code-bg: var(--button-disabled-code-bg);
+        --code-fg: var(--button-disabled-code-fg);
+        --skeleton-from: var(--button-disabled-skeleton-from);
+        --skeleton-to: var(--button-disabled-skeleton-to);
+      }
+    }
+
+    .card {
+      --border-width: ${card.border.width}px;
+
+      --bg: var(--card-enabled-bg);
+      --fg: var(--card-enabled-fg);
+      --icon: var(--card-enabled-icon);
+      --border: var(--card-enabled-border);
+      --muted-bg: var(--card-enabled-muted-bg);
+      --muted-fg: var(--card-enabled-muted-fg);
+      --accent-fg: var(--card-enabled-accent-fg);
+      --link-fg: var(--card-enabled-link-fg);
+      --code-bg: var(--card-enabled-code-bg);
+      --code-fg: var(--card-enabled-code-fg);
+      --kbd-bg: var(--card-enabled-kbd-bg);
+      --skeleton-from: var(--card-enabled-skeleton-from);
+      --skeleton-to: var(--card-enabled-skeleton-to);
+
+      background-color: var(--bg);
+      color: var(--fg);
+      box-shadow: inset 0 0 0 var(--border-width) var(--border);
+      border-radius: var(--radius-2);
+      font-weight: 500;
+      cursor: default;
+      transition: box-shadow 50ms ease-in-out;
+      outline: none;
+
+      &:hover {
+        --bg: var(--card-hovered-bg);
+        --fg: var(--card-hovered-fg);
+        --icon: var(--card-hovered-icon);
+        --border: var(--card-hovered-border);
+        --muted-bg: var(--card-hovered-muted-bg);
+        --muted-fg: var(--card-hovered-muted-fg);
+        --accent-fg: var(--card-hovered-accent-fg);
+        --link-fg: var(--card-hovered-link-fg);
+        --code-bg: var(--card-hovered-code-bg);
+        --code-fg: var(--card-hovered-code-fg);
+        --skeleton-from: var(--card-hovered-skeleton-from);
+        --skeleton-to: var(--card-hovered-skeleton-to);
+      }
+
+      &:focus-visible {
+        box-shadow:
+          inset 0 0 0 var(--border-width) var(--border),
+          0 0 0 1px var(--base-bg),
+          0 0 0 3px var(--focus-ring);
+
+        /* --bg: var(--card-hovered-bg);
+        --fg: var(--card-hovered-fg);
+        --icon: var(--card-hovered-icon);
+        --border: var(--card-hovered-border);
+        --muted-bg: var(--card-hovered-muted-bg);
+        --muted-fg: var(--card-hovered-muted-fg);
+        --accent-fg: var(--card-hovered-accent-fg);
+        --link-fg: var(--card-hovered-link-fg);
+        --code-bg: var(--card-hovered-code-bg);
+        --code-fg: var(--card-hovered-code-fg);
+        --skeleton-from: var(--card-hovered-skeleton-from);
+        --skeleton-to: var(--card-hovered-skeleton-to); */
+      }
+
+      &:active {
+        --bg: var(--card-pressed-bg);
+        --fg: var(--card-pressed-fg);
+        --icon: var(--card-pressed-icon);
+        --border: var(--card-pressed-border);
+        --muted-bg: var(--card-pressed-muted-bg);
+        --muted-fg: var(--card-pressed-muted-fg);
+        --accent-fg: var(--card-pressed-accent-fg);
+        --link-fg: var(--card-pressed-link-fg);
+        --code-bg: var(--card-pressed-code-bg);
+        --code-fg: var(--card-pressed-code-fg);
+        --skeleton-from: var(--card-pressed-skeleton-from);
+        --skeleton-to: var(--card-pressed-skeleton-to);
+      }
+
+      &.selected {
+        --bg: var(--card-selected-bg);
+        --fg: var(--card-selected-fg);
+        --icon: var(--card-selected-icon);
+        --border: var(--card-selected-border);
+        --muted-bg: var(--card-selected-muted-bg);
+        --muted-fg: var(--card-selected-muted-fg);
+        --accent-fg: var(--card-selected-accent-fg);
+        --link-fg: var(--card-selected-link-fg);
+        --code-bg: var(--card-selected-code-bg);
+        --code-fg: var(--card-selected-code-fg);
+        --skeleton-from: var(--card-selected-skeleton-from);
+        --skeleton-to: var(--card-selected-skeleton-to);
+      }
+
+      &.disabled {
+        --bg: var(--card-disabled-bg);
+        --fg: var(--card-disabled-fg);
+        --icon: var(--card-disabled-icon);
+        --border: var(--card-disabled-border);
+        --muted-bg: var(--card-disabled-muted-bg);
+        --muted-fg: var(--card-disabled-muted-fg);
+        --accent-fg: var(--card-disabled-accent-fg);
+        --link-fg: var(--card-disabled-link-fg);
+        --code-bg: var(--card-disabled-code-bg);
+        --code-fg: var(--card-disabled-code-fg);
+        --skeleton-from: var(--card-disabled-skeleton-from);
+        --skeleton-to: var(--card-disabled-skeleton-to);
+      }
+    }
+
+    .input {
+      background-color: var(--bg);
+      color: var(--fg);
+      padding: var(--space-3);
+      box-shadow: inset 0 0 0 ${input.border.width}px var(--border);
+      font-size: 16px;
+      line-height: 11px;
+      border-radius: var(--radius-2);
+      cursor: default;
+      transition: box-shadow 50ms ease-in-out;
+
+      .placeholder {
+        color: var(--placeholder);
+      }
+
+      --bg: var(--input-enabled-bg);
+      --bg2: var(--input-enabled-bg2);
+      --fg: var(--input-enabled-fg);
+      --border: var(--input-enabled-border);
+      --placeholder: var(--input-enabled-placeholder);
+
+      &:hover {
+        --bg: var(--input-hovered-bg);
+        --bg2: var(--input-hovered-bg2);
+        --fg: var(--input-hovered-fg);
+        --border: var(--input-hovered-border);
+        --placeholder: var(--input-hovered-placeholder);
+      }
+
+      &:focus,
+      &.readOnly:focus {
+        outline: none;
+        box-shadow: inset 0 0 0 1px var(--focus-ring);
+
+        --bg: var(--input-hovered-bg);
+        --bg2: var(--input-hovered-bg2);
+        --fg: var(--input-hovered-fg);
+        --border: var(--input-hovered-border);
+        --placeholder: var(--input-hovered-placeholder);
+      }
+
+      &.readOnly {
+        --bg: var(--input-read-only-bg);
+        --bg2: var(--input-read-only-bg2);
+        --fg: var(--input-read-only-fg);
+        --border: var(--input-read-only-border);
+        --placeholder: var(--input-read-only-placeholder);
+      }
+
+      &.disabled {
+        --bg: var(--input-disabled-bg);
+        --bg2: var(--input-disabled-bg2);
+        --fg: var(--input-disabled-fg);
+        --border: var(--input-disabled-border);
+        --placeholder: var(--input-disabled-placeholder);
+      }
+    }
+
+    .bg2 {
+      background-color: var(--muted-bg);
+    }
+
+    .border {
+      border: 1px solid var(--border);
+    }
+
+    .icon {
+      color: var(--icon);
+    }
+
+    .muted {
+      color: var(--muted-fg);
+    }
+
+    .accent {
+      color: var(--accent-fg);
+    }
+
+    .link {
+      color: var(--link-fg);
+    }
+
+    .code {
+      background-color: var(--code-bg);
+      color: var(--code-fg);
+    }
+
+    .kbd {
+      background-color: var(--kbd-bg);
+      color: var(--kbd-fg);
+    }
+
+    .badge {
+      background-color: var(--badge-bg);
+      color: var(--badge-fg);
+    }
+
+    .badge--default {
+      --badge-bg: var(--badge-default-bg);
+      --badge-fg: var(--badge-default-fg);
+      --badge-border: var(--badge-default-border);
+    }
+
+    .skeleton-from {
+      color: var(--skeleton-from);
+    }
+
+    .skeleton-to {
+      color: var(--skeleton-to);
+    }
+  `
+})
diff --git a/dev/storybook/stories/themer/theme/build/helpers.ts b/dev/storybook/stories/themer/theme/build/helpers.ts
new file mode 100644
index 0000000000..664edad80d
--- /dev/null
+++ b/dev/storybook/stories/themer/theme/build/helpers.ts
@@ -0,0 +1,48 @@
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === 'object' && !Array.isArray(value))
+}
+
+export function getCSSProps(value: Record<string, unknown>): Record<string, string> {
+  const entries = getCSSPropsEntries(value)
+
+  return Object.fromEntries(
+    entries.map((entry) => {
+      return [`--${entry.path.map(camelCaseToSnakeCase).join('-')}`, String(entry.value)]
+    }),
+  )
+}
+
+interface CSSPropEntry {
+  path: string[]
+  value: unknown
+}
+
+function getCSSPropsEntries(value: Record<string, unknown>, path: string[] = []): CSSPropEntry[] {
+  const entries: CSSPropEntry[] = []
+
+  for (const [key, val] of Object.entries(value)) {
+    if (key.startsWith('_')) continue
+
+    if (isRecord(val)) {
+      entries.push(...getCSSPropsEntries(val, [...path, key]))
+    } else if (Array.isArray(val)) {
+      entries.push(
+        ...val.map((d, idx) => {
+          if (isRecord(d)) {
+            entries.push(...getCSSPropsEntries(d, [...path, key, String(idx)]))
+          }
+
+          return {path: [...path, key, String(idx)], value: String(d)}
+        }),
+      )
+    } else {
+      entries.push({path: [...path, key], value: val})
+    }
+  }
+
+  return entries
+}
+
+function camelCaseToSnakeCase(value: string): string {
+  return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+}
diff --git a/dev/storybook/stories/themer/tokens/ColorPalette.tsx b/dev/storybook/stories/themer/tokens/ColorPalette.tsx
new file mode 100644
index 0000000000..5f58794c08
--- /dev/null
+++ b/dev/storybook/stories/themer/tokens/ColorPalette.tsx
@@ -0,0 +1,171 @@
+import {COLOR_HUES, COLOR_TINTS, type ColorHueKey} from '@sanity/color'
+import {buildPalette, type BuildThemeOptions, type GeneratedColorPalette} from '@sanity/themer'
+import {Box, Card, Flex, Grid, Heading, Stack, Text, useRootTheme} from '@sanity/ui'
+import {Code} from '@sanity/ui/code'
+import {getContrastRatio, hexToRgb, rgbToHsl} from '@sanity/ui/theme'
+import {ToastProvider, useToast} from '@sanity/ui/toast'
+import type {ReactNode} from 'react'
+import {styled} from 'styled-components'
+
+import {AA_CONTRAST_THRESHOLD, AAA_CONTRAST_THRESHOLD} from './contrast'
+
+function ucfirst(str: string) {
+  return str.slice(0, 1).toUpperCase() + str.slice(1)
+}
+
+/**
+ * The palette that `buildPalette` from `@sanity/themer` generates from the options for the color
+ * scheme the story renders in: `black` and `white` are the scheme's backgrounds, `blue` the accent
+ * scale and `gray` the text scale.
+ */
+export function ColorPalette(props: {options: BuildThemeOptions}): ReactNode {
+  const {options} = props
+  const {scheme} = useRootTheme()
+  const palette = buildPalette(options)[scheme]
+
+  return (
+    <ToastProvider>
+      <Card>
+        <Grid
+          gridTemplateColumns={[1, 1, 2, 3]}
+          gapX={[4, 4, 5]}
+          gapY={[5, 5, 6]}
+          padding={[4, 5, 6]}
+        >
+          <ColorHuePreview
+            hueKey="background"
+            palette={palette}
+            tints={[
+              {title: 'black', hex: palette.black},
+              {title: 'white', hex: palette.white},
+            ]}
+          />
+          {COLOR_HUES.map((hueKey) => (
+            <ColorHuePreview
+              hueKey={hueKey}
+              key={hueKey}
+              palette={palette}
+              tints={getTints(palette, hueKey)}
+            />
+          ))}
+        </Grid>
+      </Card>
+    </ToastProvider>
+  )
+}
+
+interface Tint {
+  title: string
+  hex: string
+}
+
+function getTints(palette: GeneratedColorPalette, hueKey: ColorHueKey): Tint[] {
+  return COLOR_TINTS.map((tintKey) => ({
+    title: `${hueKey} ${tintKey}`,
+    hex: palette[hueKey][tintKey],
+  }))
+}
+
+function ColorHuePreview(props: {hueKey: string; palette: GeneratedColorPalette; tints: Tint[]}) {
+  const {hueKey, palette, tints} = props
+
+  return (
+    <Box>
+      <Heading as="h2" size={1}>
+        {ucfirst(hueKey)}
+      </Heading>
+
+      <Stack marginTop={[3, 3, 4]} gap={1}>
+        {tints.map((tint) => (
+          <ColorTintPreview key={tint.title} palette={palette} tint={tint} />
+        ))}
+      </Stack>
+    </Box>
+  )
+}
+
+const ColorCard = styled(Card)<{$bg: string; $fg: string}>`
+  cursor: pointer;
+
+  --card-bg-color: ${({$bg}) => $bg};
+  --card-fg-color: ${({$fg}) => $fg};
+
+  &:not(:disabled):active,
+  &:not(:disabled):hover {
+    --card-bg-color: ${({$bg}) => $bg} !important;
+    --card-fg-color: ${({$fg}) => $fg} !important;
+  }
+`
+
+/** AA/AAA contrast badge, shown when the tint passes WCAG AA against the given scheme */
+function ContrastBadge(props: {contrast: number; scheme: 'dark' | 'light'}) {
+  const {contrast, scheme} = props
+
+  if (contrast < AA_CONTRAST_THRESHOLD) return null
+
+  return (
+    <Card padding={1} radius={1} scheme={scheme} style={{margin: '-3px 0'}}>
+      <Text size={0} weight="bold">
+        {contrast >= AAA_CONTRAST_THRESHOLD ? 'AAA' : 'AA'} &middot; {contrast.toFixed(1)}:1
+      </Text>
+    </Card>
+  )
+}
+
+function ColorTintPreview(props: {palette: GeneratedColorPalette; tint: Tint}) {
+  const {palette, tint} = props
+  const hsl = rgbToHsl(hexToRgb(tint.hex))
+  const toast = useToast()
+
+  // Against the backgrounds of the generated palette rather than stock black and white
+  const contrast = {
+    dark: getContrastRatio(tint.hex, palette.black),
+    light: getContrastRatio(tint.hex, palette.white),
+  }
+
+  const handleClick = () => {
+    navigator.clipboard.writeText(tint.hex).then(
+      () =>
+        toast.push({
+          title: (
+            <>
+              Copied {tint.title} (<code>{tint.hex}</code>) to clipboard
+            </>
+          ),
+        }),
+      () => toast.push({status: 'error', title: 'Could not write to clipboard'}),
+    )
+  }
+
+  return (
+    <ColorCard
+      $bg={tint.hex}
+      $fg={hsl.l < 50 ? palette.white : palette.black}
+      __unstable_focusRing
+      forwardedAs="button"
+      onClick={handleClick}
+      radius={2}
+    >
+      <Flex align="center" gap={2} padding={3}>
+        <Box flex={1}>
+          <Code size={1} style={{color: 'inherit'}}>
+            {tint.title}
+          </Code>
+        </Box>
+
+        {(contrast.dark >= AA_CONTRAST_THRESHOLD || contrast.light >= AA_CONTRAST_THRESHOLD) && (
+          <Flex gap={1}>
+            <ContrastBadge contrast={contrast.dark} scheme="dark" />
+            <ContrastBadge contrast={contrast.light} scheme="light" />
+          </Flex>
+        )}
+
+        <Box>
+          <Code size={1} style={{color: 'inherit'}}>
+            {tint.hex}
+          </Code>
+        </Box>
+      </Flex>
+    </ColorCard>
+  )
+}
diff --git a/dev/storybook/stories/themer/tokens/Palette.stories.tsx b/dev/storybook/stories/themer/tokens/Palette.stories.tsx
new file mode 100644
index 0000000000..3b8475c4a6
--- /dev/null
+++ b/dev/storybook/stories/themer/tokens/Palette.stories.tsx
@@ -0,0 +1,49 @@
+import {presets} from '@sanity/themer'
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+import {ColorPalette} from './ColorPalette'
+
+interface PaletteArgs {
+  accent?: string
+  text?: string
+  background?: string
+  contrast?: number
+}
+
+/**
+ * The `@sanity/color`-shaped palette that `buildPalette` from `@sanity/themer` generates, in the
+ * color scheme picked in the toolbar.
+ */
+const meta: Meta<PaletteArgs> = {
+  parameters: {controls: {include: []}, padding: 0},
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<PaletteArgs>
+
+/** The palette of the preset picked in the toolbar */
+export const Default: Story = {
+  render: (_args, {globals}) => {
+    const preset = presets.find((candidate) => candidate.slug === globals['preset'])
+
+    return <ColorPalette options={preset?.options ?? {}} />
+  },
+}
+
+/** A palette generated from the colors in the controls, for both schemes */
+export const Custom: Story = {
+  args: {
+    accent: '#1cb485',
+    text: '#5c9199',
+    contrast: 85,
+  },
+  argTypes: {
+    accent: {control: 'color'},
+    text: {control: 'color'},
+    background: {control: 'color'},
+    contrast: {control: {type: 'range', min: 15, max: 100, step: 1}},
+  },
+  parameters: {controls: {include: ['accent', 'text', 'background', 'contrast']}},
+  render: (args) => <ColorPalette options={{dark: args, light: args}} />,
+}
diff --git a/dev/storybook/stories/themer/tokens/contrast.ts b/dev/storybook/stories/themer/tokens/contrast.ts
new file mode 100644
index 0000000000..913bf3274a
--- /dev/null
+++ b/dev/storybook/stories/themer/tokens/contrast.ts
@@ -0,0 +1,8 @@
+/**
+ * WCAG 2.x contrast-ratio thresholds
+ * (https://www.w3.org/TR/WCAG22/#contrast-minimum), shared by the color token
+ * stories. The ratios compared against them are computed elsewhere, with
+ * `getContrastRatio` from `@sanity/ui/theme`.
+ */
+export const AA_CONTRAST_THRESHOLD = 4.5
+export const AAA_CONTRAST_THRESHOLD = 7
diff --git a/dev/storybook/stories/themer/tool/AnimatedColorWheelIcon.stories.tsx b/dev/storybook/stories/themer/tool/AnimatedColorWheelIcon.stories.tsx
new file mode 100644
index 0000000000..0d48c98ae6
--- /dev/null
+++ b/dev/storybook/stories/themer/tool/AnimatedColorWheelIcon.stories.tsx
@@ -0,0 +1,74 @@
+import {Button, Flex, Text} from '@sanity/ui'
+import type {Meta, StoryObj} from '@storybook/react-vite'
+import {animate, useMotionValue} from 'motion/react'
+import {useEffect} from 'react'
+
+import {AnimatedColorWheelIcon} from '../../../../../plugins/@sanity/themer/src/tool/AnimatedColorWheelIcon'
+import {ANIMATION_DURATION} from '../../../../../plugins/@sanity/themer/src/tool/colorWheel'
+
+interface WheelArgs {
+  progress: number
+}
+
+/**
+ * The color wheel of the themer tool's navbar toggle, which introduces the tool: the slices pop
+ * in with color one at a time, the wheel spins once, and the colors pop out again.
+ */
+const meta: Meta<WheelArgs> = {
+  parameters: {controls: {include: []}},
+}
+
+export default meta
+type Story = StoryObj<WheelArgs>
+
+function NavbarButton() {
+  const progress = useMotionValue(0)
+
+  const play = () => {
+    // A run in progress plays out, like on the Studio navbar
+    if (progress.isAnimating()) return
+
+    animate(progress, [0, 1], {duration: ANIMATION_DURATION, ease: 'linear'})
+  }
+
+  return (
+    <Flex align="center" gap={3}>
+      <Button
+        aria-label="Themer"
+        icon={<AnimatedColorWheelIcon progress={progress} />}
+        mode="bleed"
+        onMouseEnter={play}
+      />
+      <Text muted size={1}>
+        Hover the button to play the animation
+      </Text>
+    </Flex>
+  )
+}
+
+/** The navbar toggle, which plays the animation on hover */
+export const Default: Story = {
+  render: () => <NavbarButton />,
+}
+
+function WheelAtProgress(props: {progress: number}) {
+  const progress = useMotionValue(props.progress)
+
+  useEffect(() => {
+    progress.set(props.progress)
+  }, [progress, props.progress])
+
+  return (
+    <Text size={4}>
+      <AnimatedColorWheelIcon progress={progress} />
+    </Text>
+  )
+}
+
+/** The wheel at any point of the animation, from 0 to 1 */
+export const Progress: Story = {
+  args: {progress: 0.5},
+  argTypes: {progress: {control: {type: 'range', min: 0, max: 1, step: 0.01}}},
+  parameters: {controls: {include: ['progress']}},
+  render: (args) => <WheelAtProgress progress={args.progress} />,
+}
diff --git a/dev/storybook/stories/themer/tool/ThemeThumbnail.stories.tsx b/dev/storybook/stories/themer/tool/ThemeThumbnail.stories.tsx
new file mode 100644
index 0000000000..0096781a0e
--- /dev/null
+++ b/dev/storybook/stories/themer/tool/ThemeThumbnail.stories.tsx
@@ -0,0 +1,71 @@
+import {presets} from '@sanity/themer'
+import {Grid, Stack, Text} from '@sanity/ui'
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+import {ThemeThumbnail} from '../../../../../plugins/@sanity/themer/src/tool/ThemeThumbnail'
+
+interface ThumbnailArgs {
+  accent?: string
+  text?: string
+  contrast?: number
+  lightBackground?: string
+  darkBackground?: string
+}
+
+/**
+ * The theme cards of the themer tool: a tiny Studio in the theme, the light scheme on the left
+ * and the dark scheme on the right.
+ */
+const meta: Meta<ThumbnailArgs> = {
+  parameters: {controls: {include: []}},
+}
+
+export default meta
+type Story = StoryObj<ThumbnailArgs>
+
+/** Every preset, like the theme list in the tool's sidebar */
+export const Default: Story = {
+  render: () => (
+    <Grid gridTemplateColumns={[1, 2, 3, 4]} gap={4}>
+      {presets.map((preset) => (
+        <Stack gap={3} key={preset.slug}>
+          <ThemeThumbnail options={preset.options} />
+          <Text size={1} weight="medium">
+            {preset.title}
+          </Text>
+        </Stack>
+      ))}
+    </Grid>
+  ),
+}
+
+/** A theme built from the colors in the controls */
+export const Custom: Story = {
+  args: {
+    accent: '#f13009',
+    text: '#678e9a',
+    contrast: 85,
+    lightBackground: '#fcfdfd',
+    darkBackground: '#0e1315',
+  },
+  argTypes: {
+    accent: {control: 'color'},
+    text: {control: 'color'},
+    contrast: {control: {type: 'range', min: 15, max: 100, step: 1}},
+    lightBackground: {control: 'color'},
+    darkBackground: {control: 'color'},
+  },
+  parameters: {
+    controls: {include: ['accent', 'text', 'contrast', 'lightBackground', 'darkBackground']},
+  },
+  render: ({accent, text, contrast, lightBackground, darkBackground}) => (
+    <div style={{maxWidth: 480}}>
+      <ThemeThumbnail
+        options={{
+          light: {accent, text, contrast, background: lightBackground},
+          dark: {accent, text, contrast, background: darkBackground},
+        }}
+      />
+    </div>
+  ),
+}
diff --git a/dev/storybook/tsconfig.json b/dev/storybook/tsconfig.json
new file mode 100644
index 0000000000..3bc0083c45
--- /dev/null
+++ b/dev/storybook/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": ["@sanity/tsconfig/strictest"],
+  "include": ["./.storybook/**/*", "./stories", "./typings", "./vitest.config.ts"],
+  "exclude": ["node_modules", "storybook-static"],
+  "compilerOptions": {
+    // Stories import the parts of plugins that are not public API from their source
+    "rootDir": "../..",
+    "declaration": false,
+    "declarationMap": false,
+    "noUncheckedIndexedAccess": false
+  }
+}
diff --git a/dev/storybook/turbo.jsonc b/dev/storybook/turbo.jsonc
new file mode 100644
index 0000000000..a85b028656
--- /dev/null
+++ b/dev/storybook/turbo.jsonc
@@ -0,0 +1,13 @@
+{
+  "$schema": "https://turborepo.org/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    // Workspace plugins export ./src for monorepo consumption, so storybook build
+    // does not need their dist/. Use transit (not ^build) so Turbo still
+    // invalidates this cache when dependency source changes.
+    "build": {
+      "dependsOn": ["transit"],
+      "outputs": ["storybook-static/**"],
+    },
+  },
+}
diff --git a/dev/storybook/typings/styled-components.d.ts b/dev/storybook/typings/styled-components.d.ts
new file mode 100644
index 0000000000..6a7e824b4f
--- /dev/null
+++ b/dev/storybook/typings/styled-components.d.ts
@@ -0,0 +1,5 @@
+import {type Theme} from '@sanity/ui/theme'
+
+declare module 'styled-components' {
+  interface DefaultTheme extends Theme {}
+}
diff --git a/dev/storybook/vercel.json b/dev/storybook/vercel.json
new file mode 100644
index 0000000000..870e873a1c
--- /dev/null
+++ b/dev/storybook/vercel.json
@@ -0,0 +1,5 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "pnpm build",
+  "outputDirectory": "storybook-static"
+}
diff --git a/dev/storybook/vitest.config.ts b/dev/storybook/vitest.config.ts
new file mode 100644
index 0000000000..7258981410
--- /dev/null
+++ b/dev/storybook/vitest.config.ts
@@ -0,0 +1,27 @@
+import path from 'node:path'
+
+import {storybookTest} from '@storybook/addon-vitest/vitest-plugin'
+import {playwright} from '@vitest/browser-playwright'
+import {defineConfig} from 'vitest/config'
+
+export default defineConfig({
+  // Runs every story as a browser test, executing `play` interactions
+  plugins: [storybookTest({configDir: path.join(import.meta.dirname, '.storybook')})],
+  test: {
+    name: 'storybook',
+    // Run story files sequentially in a single iframe instead of one
+    // iframe per file. Parallel isolated iframes intermittently fail on
+    // resource-starved CI runners with "Failed to fetch dynamically
+    // imported module" / "Cannot connect to the iframe", per
+    // https://storybook.js.org/docs/writing-tests/integrations/vitest-addon#why-do-my-tests-fail-in-ci-with-failed-to-fetch-dynamically-imported-module-or-cannot-connect-to-the-iframe
+    isolate: false,
+    fileParallelism: false,
+    retry: process.env['CI'] ? 2 : 0,
+    browser: {
+      enabled: true,
+      headless: true,
+      provider: playwright(),
+      instances: [{browser: 'chromium'}],
+    },
+  },
+})
diff --git a/dev/test-studio/package.json b/dev/test-studio/package.json
index 6558d832f5..6059fdd35b 100644
--- a/dev/test-studio/package.json
+++ b/dev/test-studio/package.json
@@ -35,7 +35,7 @@
     "@sanity/sfcc": "workspace:*",
     "@sanity/studio-secrets": "workspace:*",
     "@sanity/table": "workspace:*",
-    "@sanity/themer": "^0.8.0",
+    "@sanity/themer": "workspace:*",
     "@sanity/ui": "catalog:",
     "@sanity/vanilla-extract-vite-plugin": "catalog:",
     "@sanity/vercel-protection-bypass": "workspace:*",
diff --git a/knip.jsonc b/knip.jsonc
index 8c74f23a7f..0d67e47636 100644
--- a/knip.jsonc
+++ b/knip.jsonc
@@ -136,6 +136,9 @@
     "plugins/@sanity/block-insert-picker": {
       "project": ["src/**/*.{ts,tsx}"],
     },
+    "plugins/@sanity/themer": {
+      "project": ["src/**/*.{ts,tsx}"],
+    },
     // add new plugin workspaces here
     "plugins/@sanity/embeddings-index-ui": {
       "project": ["src/**/*.{ts,tsx}"],
diff --git a/oxlint.config.ts b/oxlint.config.ts
index 1509d40595..d718b06559 100644
--- a/oxlint.config.ts
+++ b/oxlint.config.ts
@@ -5,9 +5,13 @@ import {defineConfig} from 'oxlint'
 // @sanity/plugin-kit config; only workspace-specific ignores and overrides belong here.
 export default defineConfig({
   extends: [sanityPluginKitOxlint],
+  // ESLint plugins loaded through oxlint's JS plugins support. Rules from these
+  // plugins are enabled per-file-pattern in `overrides`.
+  jsPlugins: ['eslint-plugin-storybook'],
   ignorePatterns: [
     // ignorePatterns do not propagate through extends, so spread the shared ones
     ...(sanityPluginKitOxlint.ignorePatterns ?? []),
+    '**/storybook-static/*',
     'turbo/generators/config.ts',
     // Illustrative docs referencing optional third-party form libraries
     // (formik, react-hook-form, @tanstack/react-form, zod); not built or published
@@ -176,5 +180,35 @@ export default defineConfig({
         'no-unnecessary-type-assertion': 'off',
       },
     },
+    {
+      // The CSF rule set from eslint-plugin-storybook's flat/recommended config,
+      // scoped to the same story file patterns (warn-level rules bumped to error
+      // to match the rest of this config, which also runs with denyWarnings).
+      files: ['**/*.stories.{js,jsx,mjs,cjs,ts,tsx}', '**/*.story.{js,jsx,mjs,cjs,ts,tsx}'],
+      rules: {
+        'storybook/await-interactions': 'error',
+        'storybook/context-in-play-function': 'error',
+        'storybook/default-exports': 'error',
+        'storybook/hierarchy-separator': 'error',
+        'storybook/no-redundant-story-name': 'error',
+        'storybook/no-renderer-packages': 'error',
+        'storybook/prefer-pascal-case': 'error',
+        'storybook/story-exports': 'error',
+        'storybook/use-storybook-expect': 'error',
+        'storybook/use-storybook-testing-library': 'error',
+      },
+    },
+    {
+      // no-uninstalled-addons resolves its packageJsonLocation option relative to
+      // the working directory (the repo root when run via `pnpm lint`), so point
+      // it at the storybook app's manifest where the addons are installed.
+      files: ['**/.storybook/main.{js,cjs,mjs,ts}'],
+      rules: {
+        'storybook/no-uninstalled-addons': [
+          'error',
+          {packageJsonLocation: './dev/storybook/package.json'},
+        ],
+      },
+    },
   ],
 })
diff --git a/package.json b/package.json
index 26776efc5f..d69c583424 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,10 @@
   "type": "module",
   "scripts": {
     "build": "turbo build",
+    "changeset": "changeset",
     "check:deps": "knip --dependencies",
     "dev": "pnpm turbo dev --filter=test-studio",
+    "dev:storybook": "pnpm --filter plugins-storybook dev",
     "devtools:test-studio": "pnpm devtools:test-studio:build && ENABLE_VITE_DEVTOOLS=true pnpm dev",
     "devtools:test-studio:build": "pnpm build && ENABLE_VITE_DEVTOOLS=true pnpm --filter=test-studio build",
     "e2e:build": "pnpm turbo build --filter=e2e-studio...",
@@ -28,14 +30,14 @@
     "pregenerate": "turbo run build --filter='./turbo/generators'",
     "pretest": "turbo run build --filter='!./dev/*'",
     "release": "changeset publish",
+    "storybook:build": "pnpm --filter plugins-storybook build",
     "test": "vitest",
+    "test:browser": "pnpm --filter plugins-storybook test",
     "test:e2e": "pnpm --filter e2e test",
     "turbo:fix": "pnpm dlx rimraf ./node_modules && pnpm install && pnpm turbo scan",
     "typegen": "pnpm --filter=test-studio run typegen && pnpm format"
   },
   "dependencies": {
-    "@changesets/changelog-github": "^1.0.0",
-    "@changesets/cli": "^3.0.1",
     "@sanity/plugin-kit": "workspace:*",
     "husky": "^9.1.7",
     "lint-staged": "^16.4.0",
@@ -49,7 +51,10 @@
     "vitest-package-exports": "^1.2.0"
   },
   "devDependencies": {
+    "@changesets/changelog-github": "^1.0.1",
+    "@changesets/cli": "^3.0.3",
     "@vitest/coverage-v8": "catalog:",
+    "eslint-plugin-storybook": "^10.6.0",
     "knip": "^6.33.0",
     "vercel": "^60.1.3"
   },
diff --git a/plugins/@sanity/themer/CHANGELOG.md b/plugins/@sanity/themer/CHANGELOG.md
new file mode 100644
index 0000000000..f81629570a
--- /dev/null
+++ b/plugins/@sanity/themer/CHANGELOG.md
@@ -0,0 +1,245 @@
+# @sanity/themer
+
+## 0.8.0
+
+### Minor Changes
+
+- [#3011](https://github.com/sanity-io/ui/pull/3011) [`4c20a30`](https://github.com/sanity-io/ui/commit/4c20a30ff5f9493306ac2914fa57e3289af23fd9) Thanks [@stipsan](https://github.com/stipsan)! - The themer tool's sidebar loads the first time it's needed instead of with the Studio: `@sanity/themer/tool` starts out with just the navbar toggle and the layout that applies the picked theme, and the theme list, the editor and the snippet dialog — with `react-refractor` and the other dependencies only they use — load on demand, starting as the pointer moves onto the navbar toggle or it gets focus. Pressed before they have loaded, the toggle's color wheel goes round, lap after lap, while the Studio stays as it is; from then on the sidebar stays mounted while closed, as before, and opens right away.
+
+- [#3012](https://github.com/sanity-io/ui/pull/3012) [`afbb0f0`](https://github.com/sanity-io/ui/commit/afbb0f04d98c4c06dd475522c23cf3d756d6c193) Thanks [@stipsan](https://github.com/stipsan)! - The themer tool introduces itself: the color wheel icon of its navbar toggle plays an animation on hover — the eight slices of the wheel pop in one at a time with the palette's hues in rainbow order, clockwise from 12 o'clock like the segments of a classic spinner, the wheel spins once as the 6 o'clock slice pops in, and the colors pop out the same way round, easing out from the speed the spin reached as if it kept turning for a second lap. Hovering the button plays it every time; hovering the Studio navbar plays it once per page load for anyone who has never opened the sidebar — opening it (from the topbar button or the narrow-screen menu) is remembered in `localStorage`, and the navbar stops introducing the tool. With `prefers-reduced-motion: reduce` the wheel keeps still and only the colors come and go. The navbar action also renders the toggle as a stable component instead of remounting it on every navbar render.
+
+### Patch Changes
+
+- [#3022](https://github.com/sanity-io/ui/pull/3022) [`3048289`](https://github.com/sanity-io/ui/commit/3048289c070a2bf5c81c3c8735f8b335214108b2) Thanks [@squiggler-app](https://github.com/apps/squiggler-app)! - fix(deps): update dependency motion to ^13.4.4
+- Updated dependencies [[`3048289`](https://github.com/sanity-io/ui/commit/3048289c070a2bf5c81c3c8735f8b335214108b2)]:
+  - @sanity/ui@4.2.7
+
+## 0.7.1
+
+### Patch Changes
+
+- [#3010](https://github.com/sanity-io/ui/pull/3010) [`ff01934`](https://github.com/sanity-io/ui/commit/ff0193453bb31a1ac31785cbdb33ff1996d77db1) Thanks [@stipsan](https://github.com/stipsan)! - `@sanity/themer/bundle.css` keeps its `color-scheme` declarations as authored: Lightning CSS no longer adds the `--lightningcss-light`/`--lightningcss-dark` custom properties of its `light-dark()` polyfill next to them. The stylesheet also ships unminified, so it reads cleanly when comparing published versions.
+
+- [#3015](https://github.com/sanity-io/ui/pull/3015) [`f17f4c0`](https://github.com/sanity-io/ui/commit/f17f4c05c44f6de632d34f95358f54b1b49e4d72) Thanks [@stipsan](https://github.com/stipsan)! - The themer tool's motions keep time with `view-transition-name`s the Studio gives its own elements — an avatar named so it moves as one piece instead of stretching along with the navbar's snapshot. Every view transition the layout starts now carries the `sanity-themer` transition type, and while one runs every group on the page shares the layout's duration and easing instead of the browser's default quarter second and `ease`, which left them out of step with the navbar; the Studio's own transitions keep their own.
+- Updated dependencies [[`0042a4a`](https://github.com/sanity-io/ui/commit/0042a4afa36f0055d02becd746d9e0d03d454d32)]:
+  - @sanity/themer-legacy@0.2.1
+
+## 0.7.0
+
+### Minor Changes
+
+- [#2995](https://github.com/sanity-io/ui/pull/2995) [`50ba94f`](https://github.com/sanity-io/ui/commit/50ba94f62a4d760ac59d1d51bd4fdba002234978) Thanks [@stipsan](https://github.com/stipsan)! - Themes can be shared as codes: "Copy to share" in a theme's menu puts a short code on the clipboard — the theme's title and the colors and contrasts of both schemes packed into bytes and base64url'd, one word of about 30 bytes plus the title — and the paste button in the list adds the theme from a code, straight from the clipboard where the browser allows and through a dialog otherwise; a code pasted anywhere in the Studio while the list shows is added too. Imported themes are applied right away without opening the editor. Applying another theme cross-fades the Studio and the sidebar to it, and with `prefers-reduced-motion: reduce` the tool runs no view transitions at all. The sidebar's buttons are sized like the Studio's own.
+
+## 0.6.1
+
+### Patch Changes
+
+- [#2996](https://github.com/sanity-io/ui/pull/2996) [`8cb631a`](https://github.com/sanity-io/ui/commit/8cb631ae86bdd75046e3abe7fca2213c5520b058) Thanks [@squiggler-app](https://github.com/apps/squiggler-app)! - fix(deps): update dependency motion to ^13.4.3
+- Updated dependencies [[`8cb631a`](https://github.com/sanity-io/ui/commit/8cb631ae86bdd75046e3abe7fca2213c5520b058)]:
+  - @sanity/ui@4.2.6
+
+## 0.6.0
+
+### Minor Changes
+
+- [#2984](https://github.com/sanity-io/ui/pull/2984) [`196ecf0`](https://github.com/sanity-io/ui/commit/196ecf01111f8216f4282858cd0c403aad2e0382) Thanks [@stipsan](https://github.com/stipsan)! - The themer tool's split preview keeps the Studio next to the sidebar in the appearance the Studio is set to — light or dark from the appearance menu, with the picked theme — and slides a copy in the opposite scheme in from off screen on the far side, through React's `ViewTransition`: the copy slides in without fading, the Studio it makes room for cross-fades between its two widths at full height, and the sidebar stays put. `@sanity/themer` now requires React 19.3 for this. The tool works on small screens too: the sidebar covers the Studio instead of standing next to it, the split preview stacks the two copies, and the theme cards flow into more columns when the sidebar is wide enough.
+
+- [#2987](https://github.com/sanity-io/ui/pull/2987) [`2660338`](https://github.com/sanity-io/ui/commit/26603386b585c6b567c0a4e036406081e2137240) Thanks [@stipsan](https://github.com/stipsan)! - The themer tool is styled with vanilla-extract instead of styled-components: its styles ship as the `@sanity/themer/bundle.css` stylesheet, which `@sanity/themer/tool` imports itself (the `node` export condition resolves it to a no-op shim), and `styled-components` is no longer a peer dependency. The sidebar header has its bottom border back and takes the height of the Studio navbar, so the two line up — whatever height the Studio version, breakpoint or a custom navbar gives it. The sidebar slides in from its edge and out to it, the way the split copy does on the far side, and closing it ends the split preview with it. With `prefers-reduced-motion: reduce` the sidebar and the split preview switch layouts without their view transitions animating. The theme cards drag into any order — across the grid too — with the others making room, the card menu moves a theme up or down, and the order persists; the grid flows into two columns from a third of the way into widening the sidebar instead of most of the way. Coming back to the list scrolls the applied theme into view. The sidebar stays mounted while closed (an `Activity`), so it keeps its state and opens warmed up, and the split copy is kept the same way while the sidebar is open.
+
+### Patch Changes
+
+- Updated dependencies [[`fde1653`](https://github.com/sanity-io/ui/commit/fde16533056cab695eb9ff0cd52db8c3c023ed25)]:
+  - @sanity/ui@4.2.5
+
+## 0.5.0
+
+### Minor Changes
+
+- [#2982](https://github.com/sanity-io/ui/pull/2982) [`fae7826`](https://github.com/sanity-io/ui/commit/fae7826a3d1741cf42e7b77b3f983fc41b572fe1) Thanks [@stipsan](https://github.com/stipsan)! - The themer tool can preview the Studio in light and dark side by side: the split-screen toggle in the sidebar header renders the whole Studio twice, light on the left and dark on the right, in sync while you navigate, and the editor marks both scheme cards as shown. The sidebar now sits next to the whole Studio, navbar included, rather than next to the active tool, so it renders once and stays put when the preview splits.
+
+### Patch Changes
+
+- [#2982](https://github.com/sanity-io/ui/pull/2982) [`fae7826`](https://github.com/sanity-io/ui/commit/fae7826a3d1741cf42e7b77b3f983fc41b572fe1) Thanks [@stipsan](https://github.com/stipsan)! - Themer tool polish: the editor's light and dark mode cards run edge to edge with only a border between them, in the sidebar's own scheme rather than each painted in the scheme it edits — the "Active" badge marks the scheme the Studio is showing — and the menu button on a theme card stays dark, as it sits on the dark half of the thumbnail.
+- Updated dependencies [[`0b080bd`](https://github.com/sanity-io/ui/commit/0b080bd4e378bf89b90ec1c22be8c741e9745a54)]:
+  - @sanity/themer-legacy@0.2.0
+
+## 0.4.0
+
+### Minor Changes
+
+- [#2955](https://github.com/sanity-io/ui/pull/2955) [`f2cd6b2`](https://github.com/sanity-io/ui/commit/f2cd6b290577ca8872e9893ad1f389b969510c5c) Thanks [@stipsan](https://github.com/stipsan)! - The themer tool can take a theme's colors from an image, on device: pick an image (or drop one on the editor's image palette card) and it is drawn onto a canvas and its palette extracted right there — vibrant, muted and their light and dark variants plus the dominant color, the way Sanity's image pipeline derives `metadata.palette` — without uploading anything. The vibrant color becomes the accent of both schemes — darkened or lightened along its hue until a button label reaches WCAG AA contrast on it — the muted one the text color, and the light and dark muted colors tint the backgrounds of their scheme. The palette stays with the theme: the image shows next to its swatches for the session, and a row of half-size previews offers the theme built around each swatch (muted, vibrant and their light and dark variants) plus an "I'm feeling lucky" button that picks an interesting one at random. The list has an "add a theme from an image" button next to "Add theme", which names the theme after the file.
+
+- [#2955](https://github.com/sanity-io/ui/pull/2955) [`f2cd6b2`](https://github.com/sanity-io/ui/commit/f2cd6b290577ca8872e9893ad1f389b969510c5c) Thanks [@stipsan](https://github.com/stipsan)! - **Breaking:** the root `buildTheme` and `buildPalette` options are grouped by color scheme, so the light and the dark scheme can differ in every color rather than only their background:
+
+  ```ts
+  // Before
+  buildTheme({accent: '#1cb485', text: '#5c9199', background: {dark: '#0d1415', light: '#fcfdfd'}})
+
+  // After
+  buildTheme({
+    light: {accent: '#1cb485', text: '#5c9199', background: '#fcfdfd'},
+    dark: {accent: '#1cb485', text: '#5c9199', background: '#0d1415'},
+  })
+  ```
+
+  Each scheme takes an optional `accent`, `text`, `background` and `contrast`, and both schemes are optional too: whatever is omitted falls back to the stock Studio colors, so `buildTheme({})` matches `buildTheme()` from `@sanity/ui/theme`. `buildPalette` returns a palette per scheme (`{light, dark}`), `presets` carry their colors per scheme, and passing the old flat shape throws a `TypeError` that points at the new one. The themer tool edits themes scheme by scheme — a light mode and a dark mode card with pickers and a contrast slider each, the scheme the Studio is showing marked as active — and its stored themes and legacy drafts are converted from the flat shape automatically.
+
+- [#2955](https://github.com/sanity-io/ui/pull/2955) [`f2cd6b2`](https://github.com/sanity-io/ui/commit/f2cd6b290577ca8872e9893ad1f389b969510c5c) Thanks [@stipsan](https://github.com/stipsan)! - Redesign the `themerTool` sidebar around themes rather than a single draft. The narrower sidebar lists the configured theme, the presets and your own themes in one column of cards, each with a tiny lo-fi preview of a Studio — navbar, document list and document form — in both color schemes at once, split like the "Auto" appearance preview in macOS, with the title below. Picking a card applies the theme live to the whole Studio. Each flow is now its own: add a theme (or duplicate a preset to start from it), edit your own themes with the accent/text/background pickers and the contrast slider, remove themes, and restore removed ones — removed presets and custom themes alike — from a dedicated view. The `buildTheme` snippet moved out of the sidebar into a dialog behind a header button, so the sidebar no longer resizes as the snippet changes. A draft from the previous version is migrated into a custom theme. The tool's state — the open sidebar, the flow it is in and the themes — is modeled as an XState machine, which adds `xstate` and `@xstate/react` (the versions the Studio already ships) to the package's dependencies.
+
+## 0.3.16
+
+### Patch Changes
+
+- [#2960](https://github.com/sanity-io/ui/pull/2960) [`5634e5f`](https://github.com/sanity-io/ui/commit/5634e5f2d19350ea373f530c2d461982b1d54f3d) Thanks [@stipsan](https://github.com/stipsan)! - Deprecate `@sanity/themer/legacy`: the legacy generator moved to the new `@sanity/themer-legacy` package, and the subpath now re-exports it unchanged (same functions, same generated colors). Import from `@sanity/themer-legacy` instead — the subpath will be removed in `@sanity/themer@1.0`.
+- Updated dependencies [[`a9fb87c`](https://github.com/sanity-io/ui/commit/a9fb87cad74344fa6d1600afd017431b884a7af7), [`5634e5f`](https://github.com/sanity-io/ui/commit/5634e5f2d19350ea373f530c2d461982b1d54f3d)]:
+  - @sanity/ui@4.2.4
+  - @sanity/themer-legacy@0.1.0
+
+## 0.3.15
+
+### Patch Changes
+
+- Updated dependencies [[`1d0e8de`](https://github.com/sanity-io/ui/commit/1d0e8de500c2f795830be0a9b57289e41620d257)]:
+  - @sanity/ui@4.2.3
+
+## 0.3.14
+
+### Patch Changes
+
+- Updated dependencies [[`5f3b645`](https://github.com/sanity-io/ui/commit/5f3b6455ec44974163a1604314e36930ddafb2c5)]:
+  - @sanity/ui@4.2.2
+
+## 0.3.13
+
+### Patch Changes
+
+- Updated dependencies [[`7766a79`](https://github.com/sanity-io/ui/commit/7766a79e611de375ad964c0c486f0e8b1883f2e1), [`63a6ca0`](https://github.com/sanity-io/ui/commit/63a6ca0dcfffd523e8f2ca8beae7a10aa7e2202d), [`9c7a1a7`](https://github.com/sanity-io/ui/commit/9c7a1a776494dc9d8dc4b26a34be56357d5e0421), [`7056449`](https://github.com/sanity-io/ui/commit/7056449f9137e7f0681bf247c82f11acec16524d), [`8c64db2`](https://github.com/sanity-io/ui/commit/8c64db2eeed2adf57adbec0b71aa8a637c5331b4)]:
+  - @sanity/ui@4.2.1
+  - @sanity/icons@5.2.2
+
+## 0.3.12
+
+### Patch Changes
+
+- Updated dependencies [[`0128e47`](https://github.com/sanity-io/ui/commit/0128e4725b37e11d305f454dab4e55d8840c5695), [`4b81730`](https://github.com/sanity-io/ui/commit/4b8173036ab1133a8ff6099ebbe5b48d08d2957f)]:
+  - @sanity/ui@4.2.0
+
+## 0.3.11
+
+### Patch Changes
+
+- Updated dependencies [[`c9141df`](https://github.com/sanity-io/ui/commit/c9141df70b3c230a625c9531f66c2f9cbd572ee3), [`340baad`](https://github.com/sanity-io/ui/commit/340baad921b81721763cafc646a70042eed68adb)]:
+  - @sanity/ui@4.1.1
+
+## 0.3.10
+
+### Patch Changes
+
+- Updated dependencies [[`b2e6cc1`](https://github.com/sanity-io/ui/commit/b2e6cc1377d8ecdbeb10be44c2539fecbb2d49da), [`7795b61`](https://github.com/sanity-io/ui/commit/7795b614dd3fbc77fa53a764ad81d11f4c3350be)]:
+  - @sanity/ui@4.1.0
+
+## 0.3.9
+
+### Patch Changes
+
+- Updated dependencies [[`7258b02`](https://github.com/sanity-io/ui/commit/7258b02024d233c4270c59a55f813574796006c5), [`80d25c2`](https://github.com/sanity-io/ui/commit/80d25c2e4ebb2b6bb5c82eded7b0329663da8759)]:
+  - @sanity/ui@4.0.7
+
+## 0.3.8
+
+### Patch Changes
+
+- Updated dependencies [[`2dc0627`](https://github.com/sanity-io/ui/commit/2dc06270810e696ebbc2aeb4729cf3eba7c7ec28), [`63ed976`](https://github.com/sanity-io/ui/commit/63ed97631eba7989a6d647a039dfc7df4abe143a)]:
+  - @sanity/ui@4.0.6
+
+## 0.3.7
+
+### Patch Changes
+
+- [#2737](https://github.com/sanity-io/ui/pull/2737) [`465b379`](https://github.com/sanity-io/ui/commit/465b379531cea0fefb668ccddcd319851802d1cd) Thanks [@stipsan](https://github.com/stipsan)! - Build the published dist with the React Compiler running on `oxc-transform-react` (the native Rust port, via `@sanity/tsdown-config`'s new `reactCompiler.transform: 'oxc'`) instead of `babel-plugin-react-compiler`. The output is functionally equivalent — the Rust port tracks the latest React Compiler release, so memo-cache slot allocation differs slightly in places.
+
+- Updated dependencies [[`465b379`](https://github.com/sanity-io/ui/commit/465b379531cea0fefb668ccddcd319851802d1cd)]:
+  - @sanity/ui@4.0.5
+
+## 0.3.6
+
+### Patch Changes
+
+- [#2729](https://github.com/sanity-io/ui/pull/2729) [`4f9e30f`](https://github.com/sanity-io/ui/commit/4f9e30f892f6f3fe7d7997280b1ba8b9e84c93d4) Thanks [@squiggler-app](https://github.com/apps/squiggler-app)! - fix(deps): update sanity monorepo to ^6.10.1
+
+- Updated dependencies [[`3970a7e`](https://github.com/sanity-io/ui/commit/3970a7e6dd0b4dc53d78eca6ed789cf92e39ad7a)]:
+  - @sanity/ui@4.0.4
+
+## 0.3.5
+
+### Patch Changes
+
+- Updated dependencies [[`e93ebeb`](https://github.com/sanity-io/ui/commit/e93ebebc030d3f6e4b6872496f8ccc30247138f6)]:
+  - @sanity/ui@4.0.3
+
+## 0.3.4
+
+### Patch Changes
+
+- Updated dependencies [[`adf0894`](https://github.com/sanity-io/ui/commit/adf0894ba356d15b2af522f4f86fe532b09b6f21)]:
+  - @sanity/ui@4.0.2
+
+## 0.3.3
+
+### Patch Changes
+
+- Updated dependencies [[`7dd3171`](https://github.com/sanity-io/ui/commit/7dd317198bd5c7826d5936b7303869c356f8a9af), [`55410de`](https://github.com/sanity-io/ui/commit/55410ded964ac0406c0441e0256d834c7cb5f2f6)]:
+  - @sanity/ui@4.0.1
+
+## 0.3.2
+
+### Patch Changes
+
+- Updated dependencies [[`6069d4e`](https://github.com/sanity-io/ui/commit/6069d4e61a01da3a5124a3c4f68e3c530497912d)]:
+  - @sanity/ui@4.0.0
+
+## 0.3.1
+
+### Patch Changes
+
+- [#2598](https://github.com/sanity-io/ui/pull/2598) [`aafba15`](https://github.com/sanity-io/ui/commit/aafba1501b03b76f6b2337e136f1d5db1ce4d16a) Thanks [@squiggler-app](https://github.com/apps/squiggler-app)! - fix(deps): update sanity monorepo to ^6.9.0
+
+- [#2629](https://github.com/sanity-io/ui/pull/2629) [`8109c67`](https://github.com/sanity-io/ui/commit/8109c678c5e04aa2acf51a8db4e85ac7b05a9f92) Thanks [@squiggler-app](https://github.com/apps/squiggler-app)! - fix(deps): update sanity monorepo to ^6.9.1
+
+- [#2632](https://github.com/sanity-io/ui/pull/2632) [`5207572`](https://github.com/sanity-io/ui/commit/52075727765ec68b2a718c0b9d9220feaf48df4f) Thanks [@stipsan](https://github.com/stipsan)! - fix(deps): update dependency styled-components to ^6.5.0
+
+  styled-components 6.5 tightens polymorphic call-site and `style` prop typing. Adjust `@sanity/ui` for the new checks: narrow `as` at `Box`/`VirtualList` call sites to avoid TS2589, align `Card`'s `$tone`/`$muted` with the values actually passed, and drop now-unnecessary assertions on `motion.create(Card)` wrappers.
+
+- Updated dependencies [[`df34007`](https://github.com/sanity-io/ui/commit/df34007552a4c195ab2eacce0aff7a7139624c6e), [`c3726c9`](https://github.com/sanity-io/ui/commit/c3726c9ce471cd793ca8d7731c2f433d206031d7), [`5207572`](https://github.com/sanity-io/ui/commit/52075727765ec68b2a718c0b9d9220feaf48df4f)]:
+  - @sanity/ui@3.5.2
+
+## 0.3.0
+
+### Minor Changes
+
+- [#2553](https://github.com/sanity-io/ui/pull/2553) [`e4bff6d`](https://github.com/sanity-io/ui/commit/e4bff6de1c5923107596c87bd54099a3816cd6ed) Thanks [@stipsan](https://github.com/stipsan)! - Widen `@sanity/themer` peer dependencies. `react` now allows `^18 || ^19`, `sanity` allows `^3 || ^4 || ^5 || ^6`, and `styled-components` allows `^5.2 || ^6`. This avoids peer dependency errors for consumers using only `@sanity/themer/legacy` as a migration path off the hosted themer.sanity.build service. These peer dependency ranges do not indicate whether `themerTool` itself will work.
+
+### Patch Changes
+
+- [#2543](https://github.com/sanity-io/ui/pull/2543) [`1af3fbd`](https://github.com/sanity-io/ui/commit/1af3fbd608a40718c9eb20dfd71c520550206a60) Thanks [@squiggler-app](https://github.com/apps/squiggler-app)! - fix(deps): update sanity monorepo to ^6.8.0
+
+## 0.2.1
+
+### Patch Changes
+
+- [#2497](https://github.com/sanity-io/ui/pull/2497) [`b9ed08d`](https://github.com/sanity-io/ui/commit/b9ed08de271bf5306b6bae48b843742eae461572) Thanks [@squiggler-app](https://github.com/apps/squiggler-app)! - fix(deps): update sanity monorepo to ^6.7.0
+
+- Updated dependencies [[`1ecf846`](https://github.com/sanity-io/ui/commit/1ecf846993c94f671856cb09e01caa93a3d7cece)]:
+  - @sanity/ui@3.5.1
+
+## 0.2.0
+
+### Minor Changes
+
+- [#2483](https://github.com/sanity-io/ui/pull/2483) [`818a93c`](https://github.com/sanity-io/ui/commit/818a93cc567cc9d39e5b9e462c3465efcf44ef92) Thanks [@stipsan](https://github.com/stipsan)! - Add a root `buildTheme` export that generates a Studio theme from a handful of colors — `accent` (required), `text`, `background.dark`/`background.light` and `contrast` — by replacing the `@sanity/color` palette that `buildTheme` from `@sanity/ui/theme` otherwise uses. Called with the stock colors it reproduces the stock theme exactly. `buildPalette` exposes the generated palette on its own, and `presets` ships the hosted Themer service presets translated to the new options. The `themerTool` Studio plugin now edits and previews these themes instead of the legacy ones (the `/legacy` subpath is unchanged).
+
+## 0.1.0
+
+### Minor Changes
+
+- [#2458](https://github.com/sanity-io/ui/pull/2458) [`45bac6a`](https://github.com/sanity-io/ui/commit/45bac6a6d1e79b65006966bf85f18dab9531942f) Thanks [@stipsan](https://github.com/stipsan)! - Introduce `@sanity/themer`, the npm migration path off the hosted Themer service (themer.sanity.build): `@sanity/themer/legacy` is a drop-in replacement for `https://themer.sanity.build/api/hues` URL imports — same `createTheme`/`hues`/`theme` exports, presets and generated colors, plus `buildThemeFromUrl` to migrate an existing URL import in one line.
diff --git a/plugins/@sanity/themer/README.md b/plugins/@sanity/themer/README.md
new file mode 100644
index 0000000000..8840f12ca2
--- /dev/null
+++ b/plugins/@sanity/themer/README.md
@@ -0,0 +1,86 @@
+# @sanity/themer
+
+Generate [Sanity Studio](https://www.sanity.io/studio) themes from a handful of colors.
+
+```sh
+npm install @sanity/themer
+```
+
+## Usage
+
+`buildTheme` builds the same type of theme as `buildTheme` from `@sanity/ui/theme` — ready for the `theme` property of a Studio config — but takes a handful of colors per color scheme instead of design tokens. Under the hood it only swaps out the color palette that `@sanity/ui/theme` otherwise fills with [`@sanity/color`](https://www.sanity.io/docs/color), once for each scheme:
+
+```ts
+import {buildTheme} from '@sanity/themer'
+import {defineConfig} from 'sanity'
+
+export const theme = buildTheme({
+  light: {
+    accent: '#f00',
+    text: '#727892',
+    background: '#ffffff',
+    contrast: 85, // 15–100
+  },
+  dark: {
+    accent: '#f66',
+    background: '#0d0e12',
+  },
+})
+
+export default defineConfig({
+  theme,
+  // ...rest of the config
+})
+```
+
+Everything is optional — both schemes, and every color in them. Whatever is omitted falls back to the stock Studio colors, so `buildTheme({})` matches `buildTheme()` from `@sanity/ui/theme` with no options exactly, and the two schemes are free to differ in every color rather than only their background:
+
+- `accent` replaces the `blue` scale of the scheme's palette, which Sanity UI uses for primary buttons, focus rings and links.
+- `text` replaces the `gray` scale — text, icons, borders and neutral surfaces. When omitted it is derived from `accent`: a mostly desaturated version of it, the way the stock gray carries a hint of the stock blue.
+- `background` replaces `black` in the dark scheme and `white` in the light scheme — the background that every other color of the scheme blends onto.
+- `contrast` controls how strongly text and borders separate from the accent. The default `85` uses the text color as-is; `100` removes its tint entirely (a high contrast scheme with no mixing of text and accent), and lower values blend more and more of the accent into the text scale, giving text and borders more color.
+
+A few ground rules keep the generated palettes usable: the accent and text colors cannot be too dark or too light (they would mess with the rest of their scales), the dark background is made darker until it has enough contrast with both of them (it can never be lighter than either), and the light background can never be darker than either.
+
+`buildPalette` returns the generated `@sanity/color`-shaped palettes (`{light, dark}`) without building a theme from them, and `presets` ships the hosted Themer service presets translated to `buildTheme` options:
+
+```ts
+import {buildTheme, presets} from '@sanity/themer'
+
+const verdant = presets.find((preset) => preset.slug === 'verdant')
+const theme = buildTheme(verdant.options)
+```
+
+## Studio tool
+
+`@sanity/themer/tool` adds a themer sidebar to the Studio for these themes. It lists the configured theme, the presets and your own themes, each previewed as a tiny Studio in both color schemes, and picking one applies it live to the whole Studio while you browse around — in the appearance the Studio is set to or, with the split-screen toggle in the sidebar header, twice: the Studio next to the sidebar keeps the appearance it is set to, and a copy in the opposite scheme slides in from off screen on the far side (or on top, on small screens, where the sidebar covers the Studio instead of standing next to it), through React's `ViewTransition` — which is why the tool requires React 19.3. The cards drag into any order (or move from their menu), which sticks between sessions, and a theme's menu copies it as a short code to share — paste a code into the list, or add it through the paste button, to get the theme in another Studio. Your own themes are edited scheme by scheme — a light mode and a dark mode card with accent/text/background pickers and a contrast slider each, the one the Studio is showing marked as active — add one from scratch, duplicate a preset to start from it, or take the colors from an image: its palette is read on device (the image is drawn onto a canvas and its vibrant and muted colors extracted right there, nothing is uploaded), the vibrant color becomes the accent (adjusted until a button label reads on it), the muted one the text color and the light and dark muted colors tint the backgrounds, and a row of variants previews the theme built around each swatch instead — with an "I'm feeling lucky" button that picks an interesting one. Themes can be removed and restored, and a dialog shows the `buildTheme` snippet that makes the applied theme permanent:
+
+```ts
+import {themerTool} from '@sanity/themer/tool'
+import {defineConfig} from 'sanity'
+
+export default defineConfig({
+  plugins: [themerTool()],
+  // ...rest of the config
+})
+```
+
+If the Studio already uses a `buildTheme` theme, pass the same options so the tool starts editing from them: `themerTool({config: {light: {accent: '#1cb485'}}})`.
+
+The tool's styles are a stylesheet, `@sanity/themer/bundle.css`, that `@sanity/themer/tool` imports itself — the Studio's bundler picks it up, nothing to add to the config. The sidebar's code loads the first time it's needed, starting as the pointer moves onto the navbar toggle — pressed before the code has arrived, the toggle's color wheel goes round until it has — so the tool adds little to the Studio's startup. The sidebar slides in from the edge (and closing it ends the split preview), its header takes the height of the Studio navbar so the two line up, and with `prefers-reduced-motion` the sidebar and the split preview switch layouts without animating.
+
+## Migrating from themer.sanity.build
+
+The npm migration path off the hosted Themer service ([themer.sanity.build](https://themer.sanity.build)) is [`@sanity/themer-legacy`](https://www.npmjs.com/package/@sanity/themer-legacy): the exact same generator, running locally.
+
+`@sanity/themer/legacy` still works as a deprecated re-export of that package until `@sanity/themer@1.0` removes it; import from `@sanity/themer-legacy` instead. Migrating a hosted URL import looks like this:
+
+```diff
+-import {theme} from 'https://themer.sanity.build/api/hues?preset=verdant&primary=22fca8'
++import {buildThemeFromUrl} from '@sanity/themer-legacy'
++const theme = buildThemeFromUrl('https://themer.sanity.build/api/hues?preset=verdant&primary=22fca8')
+```
+
+## License
+
+MIT © Sanity.io — see [LICENSE](https://github.com/sanity-io/plugins/blob/main/LICENSE)
diff --git a/plugins/@sanity/themer/package.json b/plugins/@sanity/themer/package.json
new file mode 100644
index 0000000000..1a8b427423
--- /dev/null
+++ b/plugins/@sanity/themer/package.json
@@ -0,0 +1,106 @@
+{
+  "name": "@sanity/themer",
+  "version": "0.8.0",
+  "description": "Generate Sanity Studio themes, and preview them with a Studio tool.",
+  "keywords": [
+    "sanity",
+    "studio",
+    "theme",
+    "themer",
+    "ui"
+  ],
+  "homepage": "https://github.com/sanity-io/plugins/tree/main/plugins/%40sanity/themer#readme",
+  "bugs": {
+    "url": "https://github.com/sanity-io/plugins/issues"
+  },
+  "license": "MIT",
+  "author": "Sanity.io <hello@sanity.io>",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/sanity-io/plugins.git",
+    "directory": "plugins/@sanity/themer"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "./dist/tool.js",
+    "*.css"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./legacy": "./src/legacy/index.ts",
+    "./tool": "./src/tool/index.ts",
+    "./bundle.css": {
+      "types": "./dist/bundle-css.d.ts",
+      "browser": "./dist/bundle.css",
+      "style": "./dist/bundle.css",
+      "node": "./dist/bundle-css.js",
+      "default": "./dist/bundle-css.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "exports": {
+      ".": "./dist/index.js",
+      "./legacy": "./dist/legacy.js",
+      "./tool": "./dist/tool.js",
+      "./bundle.css": {
+        "types": "./dist/bundle-css.d.ts",
+        "browser": "./dist/bundle.css",
+        "style": "./dist/bundle.css",
+        "node": "./dist/bundle-css.js",
+        "default": "./dist/bundle-css.js"
+      },
+      "./package.json": "./package.json"
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "prepack": "turbo run build"
+  },
+  "dependencies": {
+    "@sanity/color": "catalog:",
+    "@sanity/icons": "catalog:",
+    "@sanity/themer-legacy": "^0.2.1",
+    "@sanity/ui": "catalog:",
+    "@vanilla-extract/dynamic": "catalog:",
+    "@xstate/react": "catalog:",
+    "motion": "catalog:",
+    "react-refractor": "^4.0.0",
+    "refractor": "^5.0.0",
+    "scroll-into-view-if-needed": "catalog:",
+    "xstate": "catalog:"
+  },
+  "devDependencies": {
+    "@sanity/tsconfig": "catalog:",
+    "@sanity/tsdown-config": "catalog:",
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vanilla-extract/css": "catalog:",
+    "jsdom": "catalog:",
+    "lightningcss": "^1.33.0",
+    "oxc-transform-react": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "sanity": "catalog:",
+    "styled-components": "catalog:",
+    "tsdown": "catalog:"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "sanity": "^3 || ^4 || ^5 || ^6"
+  },
+  "peerDependenciesMeta": {
+    "sanity": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=20.19 <22 || >=22.12"
+  }
+}
diff --git a/plugins/@sanity/themer/src/index.test.ts b/plugins/@sanity/themer/src/index.test.ts
new file mode 100644
index 0000000000..a4b23ac628
--- /dev/null
+++ b/plugins/@sanity/themer/src/index.test.ts
@@ -0,0 +1,33 @@
+import {fileURLToPath} from 'node:url'
+
+import {expect, test} from 'vitest'
+import {getPackageExportsManifest} from 'vitest-package-exports'
+
+test('package exports', {timeout: 30_000}, async () => {
+  const manifest = await getPackageExportsManifest({
+    importMode: 'dist',
+    cwd: fileURLToPath(import.meta.url),
+  })
+
+  expect(manifest.exports).toMatchInlineSnapshot(`
+    {
+      ".": {
+        "buildPalette": "function",
+        "buildTheme": "function",
+        "presets": "object",
+      },
+      "./bundle.css": {},
+      "./legacy": {
+        "buildThemeFromUrl": "function",
+        "createTheme": "function",
+        "hues": "object",
+        "parseHuesFromUrl": "function",
+        "presets": "object",
+        "theme": "object",
+      },
+      "./tool": {
+        "themerTool": "function",
+      },
+    }
+  `)
+})
diff --git a/plugins/@sanity/themer/src/index.ts b/plugins/@sanity/themer/src/index.ts
new file mode 100644
index 0000000000..1e7de836ee
--- /dev/null
+++ b/plugins/@sanity/themer/src/index.ts
@@ -0,0 +1,8 @@
+export {
+  buildPalette,
+  type GeneratedColorPalette,
+  type GeneratedColorPalettes,
+} from './theme/buildPalette'
+export {buildTheme} from './theme/buildTheme'
+export type {BuildThemeOptions, SchemeThemeOptions} from './theme/options'
+export {presets, type ThemePreset} from './theme/presets'
diff --git a/plugins/@sanity/themer/src/legacy/index.ts b/plugins/@sanity/themer/src/legacy/index.ts
new file mode 100644
index 0000000000..b0aa17f60c
--- /dev/null
+++ b/plugins/@sanity/themer/src/legacy/index.ts
@@ -0,0 +1,96 @@
+// The legacy generator moved to `@sanity/themer-legacy`. Each member is
+// re-exported through its own declaration rather than `export {x} from`, so
+// the `@deprecated` tags survive into the bundled `.d.ts` and TypeScript
+// flags imports of them — plain re-exports carry no TSDoc of their own.
+import * as themerLegacy from '@sanity/themer-legacy'
+
+/**
+ * @deprecated Import `buildThemeFromUrl` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
+ * in `@sanity/themer@1.0`.
+ * @public
+ */
+export const buildThemeFromUrl: typeof themerLegacy.buildThemeFromUrl =
+  themerLegacy.buildThemeFromUrl
+
+/**
+ * @deprecated Import `createTheme` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
+ * in `@sanity/themer@1.0`.
+ * @public
+ */
+export const createTheme: typeof themerLegacy.createTheme = themerLegacy.createTheme
+
+/**
+ * @deprecated Import `parseHuesFromUrl` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
+ * in `@sanity/themer@1.0`.
+ * @public
+ */
+export const parseHuesFromUrl: typeof themerLegacy.parseHuesFromUrl = themerLegacy.parseHuesFromUrl
+
+/**
+ * @deprecated Import `hues` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
+ * in `@sanity/themer@1.0`.
+ * @public
+ */
+export const hues: typeof themerLegacy.hues = themerLegacy.hues
+
+/**
+ * @deprecated Import `theme` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
+ * in `@sanity/themer@1.0`.
+ * @public
+ */
+export const theme: typeof themerLegacy.theme = themerLegacy.theme
+
+/**
+ * @deprecated Import `presets` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` re-exports it unchanged for now and will be removed
+ * in `@sanity/themer@1.0`.
+ * @public
+ */
+export const presets: typeof themerLegacy.presets = themerLegacy.presets
+
+/**
+ * @deprecated Import `Hue` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
+ * @public
+ */
+export type Hue = themerLegacy.Hue
+
+/**
+ * @deprecated Import `HueMidPoint` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
+ * @public
+ */
+export type HueMidPoint = themerLegacy.HueMidPoint
+
+/**
+ * @deprecated Import `Hues` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
+ * @public
+ */
+export type Hues = themerLegacy.Hues
+
+/**
+ * @deprecated Import `LegacyTheme` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
+ * @public
+ */
+export type LegacyTheme = themerLegacy.LegacyTheme
+
+/**
+ * @deprecated Import `PartialHues` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
+ * @public
+ */
+export type PartialHues = themerLegacy.PartialHues
+
+/**
+ * @deprecated Import `ThemePreset` from `@sanity/themer-legacy` instead.
+ * `@sanity/themer/legacy` will be removed in `@sanity/themer@1.0`.
+ * @public
+ */
+export type ThemePreset = themerLegacy.ThemePreset
diff --git a/plugins/@sanity/themer/src/legacy/reexport.test.ts b/plugins/@sanity/themer/src/legacy/reexport.test.ts
new file mode 100644
index 0000000000..7e4d2c4aac
--- /dev/null
+++ b/plugins/@sanity/themer/src/legacy/reexport.test.ts
@@ -0,0 +1,27 @@
+// oxlint-disable no-deprecated -- the subpath under test is deprecated in favor of the package it re-exports
+import * as themerLegacy from '@sanity/themer-legacy'
+import {describe, expect, it} from 'vitest'
+
+import * as legacySubpath from './index'
+
+describe('@sanity/themer/legacy', () => {
+  it('re-exports the very same generator API as @sanity/themer-legacy', () => {
+    expect(legacySubpath.buildThemeFromUrl).toBe(themerLegacy.buildThemeFromUrl)
+    expect(legacySubpath.createTheme).toBe(themerLegacy.createTheme)
+    expect(legacySubpath.parseHuesFromUrl).toBe(themerLegacy.parseHuesFromUrl)
+    expect(legacySubpath.hues).toBe(themerLegacy.hues)
+    expect(legacySubpath.theme).toBe(themerLegacy.theme)
+    expect(legacySubpath.presets).toBe(themerLegacy.presets)
+  })
+
+  it('exports nothing but the generator API', () => {
+    expect(Object.keys(legacySubpath).sort()).toEqual([
+      'buildThemeFromUrl',
+      'createTheme',
+      'hues',
+      'parseHuesFromUrl',
+      'presets',
+      'theme',
+    ])
+  })
+})
diff --git a/plugins/@sanity/themer/src/lib/mix.ts b/plugins/@sanity/themer/src/lib/mix.ts
new file mode 100644
index 0000000000..f149632fdf
--- /dev/null
+++ b/plugins/@sanity/themer/src/lib/mix.ts
@@ -0,0 +1,13 @@
+/**
+ * Matches `#abc` and `#aabbcc` hex colors (the only formats the theme
+ * generators accept), same as the hosted Themer service did.
+ *
+ * The `mix` function this module was named for moved to `@sanity/themer-legacy`
+ * along with the legacy generator; `isColor` stays here for `theme/options.ts`
+ * and `tool/storage.ts`.
+ *
+ * @internal
+ */
+export function isColor(input: string): boolean {
+  return /^#(?:[0-9a-f]{3}){1,2}$/i.test(input)
+}
diff --git a/plugins/@sanity/themer/src/theme/buildPalette.ts b/plugins/@sanity/themer/src/theme/buildPalette.ts
new file mode 100644
index 0000000000..f3f55f0d87
--- /dev/null
+++ b/plugins/@sanity/themer/src/theme/buildPalette.ts
@@ -0,0 +1,267 @@
+import {
+  color,
+  COLOR_TINTS,
+  type ColorHueKey,
+  type ColorTintKey,
+  type ColorTints,
+} from '@sanity/color'
+import {type ThemeColorSchemeKey} from '@sanity/ui/theme'
+
+import {hexToHsl, type Hsl, hslToHex, mixHue, relativeLuminance} from './hsl'
+import {
+  type BuildThemeOptions,
+  DEFAULT_ACCENT,
+  DEFAULT_CONTRAST,
+  DEFAULT_TEXT,
+  MAXIMUM_CONTRAST,
+  MINIMUM_CONTRAST,
+  type ResolvedSchemeOptions,
+  resolveThemeOptions,
+} from './options'
+
+/**
+ * The lightness band the accent and text colors are clamped into — anchors
+ * outside it would squeeze most of their scale's tints into an
+ * indistinguishable sliver, messing with the rest of the scale.
+ */
+const MINIMUM_ANCHOR_LIGHTNESS = 0.25
+const MAXIMUM_ANCHOR_LIGHTNESS = 0.75
+
+/**
+ * The contrast ratio the dark background must reach against the 400 tints of
+ * the text and accent scales — the tints Sanity UI paints muted text and
+ * solid buttons with on dark backgrounds. The stock palette sits at ~6.8.
+ */
+const MINIMUM_DARK_BACKGROUND_CONTRAST = 4.5
+
+/** How much lightness each step of a background adjustment removes or adds */
+const BACKGROUND_LIGHTNESS_STEP = 0.005
+
+/**
+ * A color palette generated by {@link buildPalette}: the `palette` config of
+ * `buildTheme` from `@sanity/ui/theme`, with every color as a hex string.
+ *
+ * @public
+ */
+export type GeneratedColorPalette = {black: string; white: string} & Record<
+  ColorHueKey,
+  Record<ColorTintKey, string>
+>
+
+/**
+ * The palettes generated by {@link buildPalette} — one per color scheme.
+ *
+ * @public
+ */
+export type GeneratedColorPalettes = Record<ThemeColorSchemeKey, GeneratedColorPalette>
+
+/**
+ * Generates a Sanity UI color palette for each color scheme from the theme
+ * options: in each palette the scheme's accent color replaces the `blue`
+ * scale, its text color the `gray` scale, and the backgrounds replace `black`
+ * and `white`. All other hues keep their stock `@sanity/color` values. Called
+ * with the stock colors, both palettes come back as the stock palette
+ * byte-for-byte.
+ *
+ * ```ts
+ * import {buildPalette} from '@sanity/themer'
+ *
+ * const {light, dark} = buildPalette({light: {accent: '#556bfc'}})
+ * ```
+ *
+ * @public
+ */
+export function buildPalette(options: BuildThemeOptions = {}): GeneratedColorPalettes {
+  const resolved = resolveThemeOptions(options)
+
+  return {
+    dark: buildSchemePalette('dark', resolved.dark, resolved.light.background),
+    light: buildSchemePalette('light', resolved.light, resolved.dark.background),
+  }
+}
+
+/**
+ * Generates the palette of one scheme. The scheme's own background takes the
+ * slot the scheme paints with (`black` for dark, `white` for light), while
+ * the other slot — which a scheme only touches for a few inverted details —
+ * takes the other scheme's background, so the theme stays one palette.
+ */
+function buildSchemePalette(
+  key: ThemeColorSchemeKey,
+  scheme: ResolvedSchemeOptions,
+  otherBackground: string,
+): GeneratedColorPalette {
+  const accentAnchor = clampAnchorLightness(hexToHsl(scheme.accent))
+  const textAnchor = clampAnchorLightness(hexToHsl(scheme.text))
+  const grayAnchor = applyContrast(textAnchor, accentAnchor, scheme.contrast)
+
+  const blueTints = remapTints(color.blue, hexToHsl(DEFAULT_ACCENT), accentAnchor)
+  const grayTints = remapTints(color.gray, hexToHsl(DEFAULT_TEXT), grayAnchor)
+
+  const anchorLuminances = [
+    relativeLuminance(hslToHex(grayAnchor)),
+    relativeLuminance(hslToHex(accentAnchor)),
+  ]
+
+  const darkBackground = key === 'dark' ? scheme.background : otherBackground
+  const lightBackground = key === 'light' ? scheme.background : otherBackground
+
+  return {
+    black: darkenBackground(darkBackground, {
+      anchorLuminances,
+      tints: [grayTints['400'], blueTints['400']],
+    }),
+    white: lightenBackground(lightBackground, anchorLuminances),
+    gray: grayTints,
+    blue: blueTints,
+    purple: tintHexes(color.purple),
+    magenta: tintHexes(color.magenta),
+    red: tintHexes(color.red),
+    orange: tintHexes(color.orange),
+    yellow: tintHexes(color.yellow),
+    green: tintHexes(color.green),
+    cyan: tintHexes(color.cyan),
+  }
+}
+
+/**
+ * Mixes the accent color into the text color according to the contrast: 85
+ * applies the text color as-is, 100 removes its tint entirely, and lower
+ * values rotate and saturate it towards the accent.
+ */
+function applyContrast(text: Hsl, accent: Hsl, contrast: number): Hsl {
+  if (contrast === DEFAULT_CONTRAST) {
+    return text
+  }
+
+  if (contrast > DEFAULT_CONTRAST) {
+    const amount = (contrast - DEFAULT_CONTRAST) / (MAXIMUM_CONTRAST - DEFAULT_CONTRAST)
+
+    return {h: text.h, s: text.s * (1 - amount), l: text.l}
+  }
+
+  const amount = (DEFAULT_CONTRAST - contrast) / (DEFAULT_CONTRAST - MINIMUM_CONTRAST)
+
+  return {
+    h: mixHue(text.h, accent.h, amount),
+    s: text.s + (accent.s - text.s) * amount,
+    l: text.l,
+  }
+}
+
+/**
+ * Rebuilds a stock tint scale around a new anchor color, where `from` is the
+ * scale's stock 500 tint: hues rotate along, saturation scales
+ * proportionally, and lightness is remapped piecewise so the anchor takes the
+ * new lightness while the scale keeps spanning light to dark. When the anchor
+ * matches the stock one, every tint comes back unchanged.
+ */
+function remapTints(tints: ColorTints, from: Hsl, to: Hsl): Record<ColorTintKey, string> {
+  const rotation = to.h - from.h
+  const result: Partial<Record<ColorTintKey, string>> = {}
+
+  for (const tint of COLOR_TINTS) {
+    const value = hexToHsl(tints[tint].hex)
+
+    result[tint] = hslToHex({
+      h: value.h + rotation,
+      s: remapSaturation(value.s, from.s, to.s),
+      l: remapLightness(value.l, from.l, to.l),
+    })
+  }
+
+  // oxlint-disable-next-line no-unsafe-type-assertion -- the loop assigns every tint key
+  return result as Record<ColorTintKey, string>
+}
+
+function remapSaturation(value: number, from: number, to: number): number {
+  if (from === to) {
+    return value
+  }
+
+  return Math.min(1, value * (to / from))
+}
+
+function remapLightness(value: number, from: number, to: number): number {
+  if (from === to) {
+    return value
+  }
+
+  if (value <= from) {
+    return value * (to / from)
+  }
+
+  return to + ((value - from) * (1 - to)) / (1 - from)
+}
+
+function clampAnchorLightness(anchor: Hsl): Hsl {
+  const l = Math.min(MAXIMUM_ANCHOR_LIGHTNESS, Math.max(MINIMUM_ANCHOR_LIGHTNESS, anchor.l))
+
+  return l === anchor.l ? anchor : {...anchor, l}
+}
+
+/**
+ * Enforces the dark background rules: it can never be lighter than the text
+ * or accent colors, and it must reach enough contrast with the 400 tints of
+ * their scales — it is made darker until it does (or bottoms out at black).
+ */
+function darkenBackground(
+  hex: string,
+  rules: {anchorLuminances: number[]; tints: string[]},
+): string {
+  const maximumLuminance = Math.min(...rules.anchorLuminances)
+  const tintLuminances = rules.tints.map((tint) => relativeLuminance(tint))
+
+  const isDarkEnough = (background: string): boolean => {
+    const luminance = relativeLuminance(background)
+
+    return (
+      luminance < maximumLuminance &&
+      tintLuminances.every(
+        (tintLuminance) =>
+          (tintLuminance + 0.05) / (luminance + 0.05) >= MINIMUM_DARK_BACKGROUND_CONTRAST,
+      )
+    )
+  }
+
+  const {h, s, l} = hexToHsl(hex)
+  let lightness = l
+  let current = hex
+
+  while (!isDarkEnough(current) && lightness > 0) {
+    lightness = Math.max(0, lightness - BACKGROUND_LIGHTNESS_STEP)
+    current = hslToHex({h, s, l: lightness})
+  }
+
+  return current
+}
+
+/**
+ * Enforces the light background rule: it can never be darker than the text
+ * or accent colors — it is made lighter until it is (or tops out at white).
+ */
+function lightenBackground(hex: string, anchorLuminances: number[]): string {
+  const minimumLuminance = Math.max(...anchorLuminances)
+
+  const {h, s, l} = hexToHsl(hex)
+  let lightness = l
+  let current = hex
+
+  while (relativeLuminance(current) <= minimumLuminance && lightness < 1) {
+    lightness = Math.min(1, lightness + BACKGROUND_LIGHTNESS_STEP)
+    current = hslToHex({h, s, l: lightness})
+  }
+
+  return current
+}
+
+function tintHexes(tints: ColorTints): Record<ColorTintKey, string> {
+  const result: Partial<Record<ColorTintKey, string>> = {}
+
+  for (const tint of COLOR_TINTS) {
+    result[tint] = tints[tint].hex
+  }
+
+  // oxlint-disable-next-line no-unsafe-type-assertion -- the loop assigns every tint key
+  return result as Record<ColorTintKey, string>
+}
diff --git a/plugins/@sanity/themer/src/theme/buildTheme.ts b/plugins/@sanity/themer/src/theme/buildTheme.ts
new file mode 100644
index 0000000000..29a72076d0
--- /dev/null
+++ b/plugins/@sanity/themer/src/theme/buildTheme.ts
@@ -0,0 +1,72 @@
+import {
+  buildTheme as buildUITheme,
+  type RootTheme,
+  type ThemeColorSchemes_v2,
+  v0_v2,
+  v2_v0,
+} from '@sanity/ui/theme'
+
+import {buildPalette} from './buildPalette'
+import type {BuildThemeOptions} from './options'
+
+/**
+ * Generates a Studio theme from a handful of colors per color scheme, by
+ * replacing the color palette that the `buildTheme` from `@sanity/ui/theme`
+ * otherwise fills with `@sanity/color`: in each scheme the accent color
+ * replaces the `blue` scale (primary buttons, focus rings, links), the
+ * optional text color the `gray` scale (text, icons, borders), and the
+ * optional background replaces `black` (dark) or `white` (light). The result
+ * is the same type of theme that `@sanity/ui/theme` builds, ready for the
+ * `theme` property of a Studio config.
+ *
+ * ```ts
+ * import {buildTheme} from '@sanity/themer'
+ * import {defineConfig} from 'sanity'
+ *
+ * export const theme = buildTheme({
+ *   light: {
+ *     accent: '#556bfc',
+ *     text: '#727892', // optional — derived from `accent` when omitted
+ *     background: '#ffffff', // optional
+ *     contrast: 85, // optional, 15–100
+ *   },
+ *   dark: {
+ *     accent: '#556bfc',
+ *     background: '#0d0e12',
+ *   },
+ * })
+ *
+ * export default defineConfig({
+ *   theme,
+ *   // ...rest of the config
+ * })
+ * ```
+ *
+ * Every option is optional and falls back to the stock Studio colors: called
+ * with the stock colors — like the example — or with no options at all, it
+ * returns the exact same colors as `buildTheme()` from `@sanity/ui/theme`.
+ *
+ * @public
+ */
+export function buildTheme(options: BuildThemeOptions = {}): RootTheme {
+  const palettes = buildPalette(options)
+
+  // Sanity UI renders both schemes of a theme from one palette, so each
+  // scheme gets a theme of its own palette, and the two are composed into one
+  // theme that takes its light scheme from the one and its dark scheme from
+  // the other. The scheme getters keep Sanity UI's lazy rendering: a scheme is
+  // only computed once something reads it.
+  const light = v0_v2(buildUITheme({palette: palettes.light}))
+  const dark = v0_v2(buildUITheme({palette: palettes.dark}))
+
+  const color: ThemeColorSchemes_v2 = {
+    get light() {
+      return light.color.light
+    },
+    get dark() {
+      return dark.color.dark
+    },
+  }
+
+  return v2_v0({...light, color})
+}
diff --git a/plugins/@sanity/themer/src/theme/hsl.ts b/plugins/@sanity/themer/src/theme/hsl.ts
new file mode 100644
index 0000000000..639dd67ba7
--- /dev/null
+++ b/plugins/@sanity/themer/src/theme/hsl.ts
@@ -0,0 +1,137 @@
+/**
+ * Color math for the palette generator, kept at full float precision: unlike
+ * the HSL helpers in `@sanity/ui/theme`, nothing is rounded between the two
+ * conversions, so `hslToHex(hexToHsl(hex))` returns `hex` unchanged for every
+ * color. `buildTheme` relies on that to reproduce the stock `@sanity/color`
+ * palette byte-for-byte when it is called with the stock anchor colors.
+ */
+
+/**
+ * A color in HSL space: `h` in degrees within `[0, 360)`, `s` and `l` as
+ * fractions within `[0, 1]`.
+ *
+ * @internal
+ */
+export interface Hsl {
+  h: number
+  s: number
+  l: number
+}
+
+/** @internal */
+export function hexToHsl(hex: string): Hsl {
+  const [r, g, b] = parseHex(hex)
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const delta = max - min
+
+  const l = (max + min) / 2
+
+  if (delta === 0) {
+    return {h: 0, s: 0, l}
+  }
+
+  const s = delta / (1 - Math.abs(2 * l - 1))
+
+  let h: number
+
+  if (max === r) {
+    h = ((g - b) / delta) % 6
+  } else if (max === g) {
+    h = (b - r) / delta + 2
+  } else {
+    h = (r - g) / delta + 4
+  }
+
+  return {h: normalizeHue(h * 60), s, l}
+}
+
+/** @internal */
+export function hslToHex(hsl: Hsl): string {
+  const h = normalizeHue(hsl.h)
+  const s = clamp01(hsl.s)
+  const l = clamp01(hsl.l)
+
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+  const m = l - c / 2
+
+  let r = 0
+  let g = 0
+  let b = 0
+
+  if (h < 60) {
+    r = c
+    g = x
+  } else if (h < 120) {
+    r = x
+    g = c
+  } else if (h < 180) {
+    g = c
+    b = x
+  } else if (h < 240) {
+    g = x
+    b = c
+  } else if (h < 300) {
+    r = x
+    b = c
+  } else {
+    r = c
+    b = x
+  }
+
+  return `#${channelToHex(r + m)}${channelToHex(g + m)}${channelToHex(b + m)}`
+}
+
+/**
+ * Rotates `from` towards `to` along the shortest arc of the hue circle.
+ *
+ * @internal
+ */
+export function mixHue(from: number, to: number, amount: number): number {
+  const delta = ((((to - from) % 360) + 540) % 360) - 180
+
+  return normalizeHue(from + delta * amount)
+}
+
+/**
+ * The WCAG relative luminance of a hex color, between 0 (black) and 1 (white).
+ *
+ * @internal
+ */
+export function relativeLuminance(hex: string): number {
+  const [r, g, b] = parseHex(hex)
+
+  return 0.2126 * linearChannel(r) + 0.7152 * linearChannel(g) + 0.0722 * linearChannel(b)
+}
+
+function linearChannel(value: number): number {
+  return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4
+}
+
+/** Parses `#abc` and `#aabbcc` hex colors into channel fractions of 1 */
+function parseHex(hex: string): [number, number, number] {
+  const expanded =
+    hex.length === 4 ? `${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}` : hex.slice(1)
+
+  return [
+    parseInt(expanded.slice(0, 2), 16) / 255,
+    parseInt(expanded.slice(2, 4), 16) / 255,
+    parseInt(expanded.slice(4, 6), 16) / 255,
+  ]
+}
+
+function channelToHex(value: number): string {
+  return Math.round(clamp01(value) * 255)
+    .toString(16)
+    .padStart(2, '0')
+}
+
+function normalizeHue(hue: number): number {
+  return ((hue % 360) + 360) % 360
+}
+
+function clamp01(value: number): number {
+  return Math.min(1, Math.max(0, value))
+}
diff --git a/plugins/@sanity/themer/src/theme/options.ts b/plugins/@sanity/themer/src/theme/options.ts
new file mode 100644
index 0000000000..ee74ebfe32
--- /dev/null
+++ b/plugins/@sanity/themer/src/theme/options.ts
@@ -0,0 +1,206 @@
+import {black, blue, gray, white} from '@sanity/color'
+import {type ThemeColorSchemeKey} from '@sanity/ui/theme'
+
+import {isColor} from '../lib/mix'
+import {hexToHsl, hslToHex} from './hsl'
+
+/**
+ * The colors of one color scheme, for {@link BuildThemeOptions}. Every color
+ * is a hex color (`#rgb` or `#rrggbb`), and everything is optional: omitted
+ * options fall back to the stock Studio colors, so an empty object reproduces
+ * the stock scheme exactly.
+ *
+ * @public
+ */
+export interface SchemeThemeOptions {
+  /**
+   * The accent color — the brand color of the scheme. Replaces the `blue`
+   * scale of the palette, which Sanity UI uses for primary buttons, focus
+   * rings and links.
+   *
+   * The stock accent is `#556bfc` (`blue/500` of `@sanity/color`).
+   */
+  accent?: string
+
+  /**
+   * The background of the scheme — every other color of the scheme is
+   * blended onto it. The dark scheme's background replaces `black` in the
+   * palette and the light scheme's replaces `white`.
+   *
+   * It is kept far enough from the text and accent colors to stay usable:
+   * a dark background is made darker until it has enough contrast with them
+   * (it can never be lighter than either), and a light background can never
+   * be darker than either.
+   *
+   * The stock backgrounds are `#0d0e12` (dark) and `#ffffff` (light).
+   */
+  background?: string
+
+  /**
+   * How strongly text and borders separate from the accent color, between 15
+   * and 100. The default is 85, which uses the text color as-is. Above 85 the
+   * text scale loses its tint until it is fully neutral at 100 — a high
+   * contrast scheme with no mixing of the text and accent colors. Below 85
+   * more and more of the accent color mixes into the text scale, giving text
+   * and borders more color, until the scale fully adopts the accent hue and
+   * saturation at 15.
+   */
+  contrast?: number
+
+  /**
+   * The text color. Replaces the `gray` scale of the palette, which Sanity UI
+   * uses for text, icons, borders and neutral surfaces. When omitted, it is
+   * derived from the accent color: a mostly desaturated version of it, the
+   * way the stock `gray` scale carries a hint of the stock blue.
+   *
+   * The stock text color is `#727892` (`gray/500` of `@sanity/color`).
+   */
+  text?: string
+}
+
+/**
+ * Options for {@link buildTheme} and {@link buildPalette}: the colors of the
+ * dark and the light scheme, each with its own accent, text, background and
+ * contrast — so the two schemes can differ in more than their background.
+ * Both schemes are optional, and so is every color: whatever is omitted
+ * falls back to the stock Studio colors, so `buildTheme({})` matches
+ * `buildTheme()` from `@sanity/ui/theme` exactly.
+ *
+ * @public
+ */
+export interface BuildThemeOptions {
+  /** The colors of the dark scheme */
+  dark?: SchemeThemeOptions
+  /** The colors of the light scheme */
+  light?: SchemeThemeOptions
+}
+
+/**
+ * {@link SchemeThemeOptions} with every option filled in: colors normalized
+ * to lowercase `#rrggbb`, the text color derived from the accent when it was
+ * omitted, and the contrast clamped into its valid range.
+ *
+ * @internal
+ */
+export interface ResolvedSchemeOptions {
+  accent: string
+  background: string
+  contrast: number
+  text: string
+}
+
+/** {@link BuildThemeOptions} with both schemes resolved @internal */
+export type ResolvedThemeOptions = Record<ThemeColorSchemeKey, ResolvedSchemeOptions>
+
+/** The color schemes, in the order the tool presents them @internal */
+export const SCHEMES: ThemeColorSchemeKey[] = ['light', 'dark']
+
+/** The stock accent color — `blue/500` of `@sanity/color` @internal */
+export const DEFAULT_ACCENT: string = blue[500].hex
+
+/** The stock text color — `gray/500` of `@sanity/color` @internal */
+export const DEFAULT_TEXT: string = gray[500].hex
+
+/** The stock backgrounds — `black` and `white` of `@sanity/color` @internal */
+export const DEFAULT_BACKGROUND: Record<ThemeColorSchemeKey, string> = {
+  dark: black.hex,
+  light: white.hex,
+}
+
+/** The contrast that applies the text color as-is @internal */
+export const DEFAULT_CONTRAST = 85
+
+/** @internal */
+export const MINIMUM_CONTRAST = 15
+
+/** @internal */
+export const MAXIMUM_CONTRAST = 100
+
+/** The keys of the options shape before they were grouped by scheme */
+const FLAT_OPTION_KEYS = ['accent', 'text', 'background', 'contrast']
+
+/** @internal */
+export function resolveThemeOptions(options: BuildThemeOptions = {}): ResolvedThemeOptions {
+  if (FLAT_OPTION_KEYS.some((key) => key in options)) {
+    throw new TypeError(
+      'The `buildTheme` options are grouped by color scheme: pass `{light: {accent, text, background, contrast}, dark: {…}}` instead of one set of colors for both',
+    )
+  }
+
+  return {
+    dark: resolveSchemeOptions(options.dark ?? {}, 'dark'),
+    light: resolveSchemeOptions(options.light ?? {}, 'light'),
+  }
+}
+
+function resolveSchemeOptions(
+  options: SchemeThemeOptions,
+  scheme: ThemeColorSchemeKey,
+): ResolvedSchemeOptions {
+  const accent =
+    options.accent === undefined
+      ? DEFAULT_ACCENT
+      : normalizeColor(options.accent, `${scheme}.accent`)
+
+  return {
+    accent,
+    background:
+      options.background === undefined
+        ? DEFAULT_BACKGROUND[scheme]
+        : normalizeColor(options.background, `${scheme}.background`),
+    contrast: normalizeContrast(options.contrast, scheme),
+    text:
+      options.text === undefined
+        ? deriveTextColor(accent)
+        : normalizeColor(options.text, `${scheme}.text`),
+  }
+}
+
+/**
+ * Derives the text color from an accent color, keeping the relationship the
+ * stock palette has between `gray/500` and `blue/500`: the text color takes
+ * the accent's hue (offset the way the stock gray is offset from the stock
+ * blue), carries about an eighth of its saturation, and keeps the stock text
+ * lightness. Deriving from the stock accent returns the stock text color.
+ *
+ * @internal
+ */
+export function deriveTextColor(accent: string): string {
+  const accentHsl = hexToHsl(normalizeColor(accent, 'accent'))
+  const defaultAccent = hexToHsl(DEFAULT_ACCENT)
+  const defaultText = hexToHsl(DEFAULT_TEXT)
+
+  return hslToHex({
+    h: defaultText.h + (accentHsl.h - defaultAccent.h),
+    s: Math.min(1, defaultText.s * (accentHsl.s / defaultAccent.s)),
+    l: defaultText.l,
+  })
+}
+
+function normalizeColor(value: string, name: string): string {
+  if (typeof value !== 'string' || !isColor(value)) {
+    throw new TypeError(
+      `Invalid \`${name}\` color: ${JSON.stringify(value)} — expected a hex color like #556bfc`,
+    )
+  }
+
+  const lower = value.toLowerCase()
+
+  return lower.length === 4
+    ? `#${lower[1]}${lower[1]}${lower[2]}${lower[2]}${lower[3]}${lower[3]}`
+    : lower
+}
+
+function normalizeContrast(value: number | undefined, scheme: ThemeColorSchemeKey): number {
+  if (value === undefined) {
+    return DEFAULT_CONTRAST
+  }
+
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    throw new TypeError(
+      `Invalid \`${scheme}.contrast\`: ${JSON.stringify(value)} — expected a number between ${MINIMUM_CONTRAST} and ${MAXIMUM_CONTRAST}`,
+    )
+  }
+
+  return Math.min(MAXIMUM_CONTRAST, Math.max(MINIMUM_CONTRAST, value))
+}
diff --git a/plugins/@sanity/themer/src/theme/presets.ts b/plugins/@sanity/themer/src/theme/presets.ts
new file mode 100644
index 0000000000..f862f66f7f
--- /dev/null
+++ b/plugins/@sanity/themer/src/theme/presets.ts
@@ -0,0 +1,83 @@
+import type {BuildThemeOptions} from './options'
+
+/**
+ * A preset theme: a named set of {@link BuildThemeOptions} ready to pass to
+ * `buildTheme`.
+ *
+ * @public
+ */
+export interface ThemePreset {
+  slug: string
+  title: string
+  /** The preset's theme options, ready to pass to `buildTheme` */
+  options: BuildThemeOptions
+}
+
+/**
+ * The hosted Themer presets had one accent and one text color for both
+ * schemes, and a background per scheme
+ */
+function scheme(accent: string, text: string, backgrounds: {dark: string; light: string}) {
+  return {
+    dark: {accent, text, background: backgrounds.dark},
+    light: {accent, text, background: backgrounds.light},
+  } satisfies BuildThemeOptions
+}
+
+/**
+ * Preset themes for `buildTheme`, carried over from the hosted Themer service
+ * (themer.sanity.build) presets: each one maps the legacy preset's primary
+ * hue to `accent`, its default hue to `text` and its lightest/darkest colors
+ * to the backgrounds of the light and dark scheme.
+ *
+ * ```ts
+ * import {buildTheme, presets} from '@sanity/themer'
+ *
+ * const verdant = presets.find((preset) => preset.slug === 'verdant')
+ * const theme = buildTheme(verdant.options)
+ * ```
+ *
+ * @public
+ */
+export const presets: ThemePreset[] = [
+  {
+    slug: 'studio',
+    title: 'Studio',
+    options: {},
+  },
+  {
+    slug: 'dew',
+    title: 'Dew',
+    options: scheme('#d1a308', '#5e63b4', {dark: '#0d0d15', light: '#fcfcfd'}),
+  },
+  {
+    slug: 'pink-synth',
+    title: 'Pink Synth',
+    options: scheme('#ec4899', '#8b6584', {dark: '#171721', light: '#f7f2f5'}),
+  },
+  {
+    slug: 'pixel-art',
+    title: 'Pixel Art',
+    options: scheme('#f10784', '#57619c', {dark: '#0d0e15', light: '#fcfcfd'}),
+  },
+  {
+    slug: 'retro-colonial',
+    title: 'Retro Colonial',
+    options: scheme('#fa7a78', '#8bb9b5', {dark: '#0d1515', light: '#fcfdfd'}),
+  },
+  {
+    slug: 'rosabel',
+    title: 'Rosabel',
+    options: scheme('#ed2555', '#9d8966', {dark: '#15120d', light: '#fdfdfc'}),
+  },
+  {
+    slug: 'stereofidelic',
+    title: 'Stereofidelic',
+    options: scheme('#f13009', '#678e9a', {dark: '#0e1315', light: '#fcfdfd'}),
+  },
+  {
+    slug: 'verdant',
+    title: 'Verdant',
+    options: scheme('#1cb485', '#5c9199', {dark: '#0d1415', light: '#fcfdfd'}),
+  },
+]
diff --git a/plugins/@sanity/themer/src/theme/theme.test.ts b/plugins/@sanity/themer/src/theme/theme.test.ts
new file mode 100644
index 0000000000..93552aa153
--- /dev/null
+++ b/plugins/@sanity/themer/src/theme/theme.test.ts
@@ -0,0 +1,274 @@
+import {color, COLOR_HUES, COLOR_TINTS} from '@sanity/color'
+import {buildTheme as buildUITheme} from '@sanity/ui/theme'
+import {describe, expect, it} from 'vitest'
+
+import {buildPalette} from './buildPalette'
+import {buildTheme} from './buildTheme'
+import {hexToHsl, hslToHex, relativeLuminance} from './hsl'
+import {type BuildThemeOptions, deriveTextColor, resolveThemeOptions} from './options'
+import {presets} from './presets'
+
+/** The stock options, spelled out the way a Studio config would */
+const STOCK_OPTIONS: BuildThemeOptions = {
+  light: {accent: '#556bfc', text: '#727892', background: '#ffffff', contrast: 85},
+  dark: {accent: '#556bfc', text: '#727892', background: '#0d0e12', contrast: 85},
+}
+
+/** The same colors for both schemes, the way the flat options used to work */
+function both(scheme: {accent?: string; text?: string; contrast?: number}): BuildThemeOptions {
+  return {light: {...scheme}, dark: {...scheme}}
+}
+
+function forceTree(value: unknown): unknown {
+  // The themes are built out of lazy self-replacing getters — serializing
+  // forces every one of them into a comparable plain tree
+  return JSON.parse(JSON.stringify(value))
+}
+
+describe('hexToHsl/hslToHex', () => {
+  it('round-trips every color of the stock palette', () => {
+    const hexes = [color.black.hex, color.white.hex]
+
+    for (const hue of COLOR_HUES) {
+      for (const tint of COLOR_TINTS) {
+        hexes.push(color[hue][tint].hex)
+      }
+    }
+
+    for (const hex of hexes) {
+      expect(hslToHex(hexToHsl(hex)), hex).toBe(hex)
+    }
+  })
+
+  it('round-trips arbitrary colors', () => {
+    // A deterministic sweep across the RGB cube
+    for (let i = 0; i < 0xffffff; i += 3671) {
+      const hex = `#${i.toString(16).padStart(6, '0')}`
+
+      expect(hslToHex(hexToHsl(hex)), hex).toBe(hex)
+    }
+  })
+})
+
+describe('resolveThemeOptions', () => {
+  it('fills in the stock colors for whatever is omitted', () => {
+    expect(resolveThemeOptions({})).toEqual(STOCK_OPTIONS)
+    expect(resolveThemeOptions()).toEqual(STOCK_OPTIONS)
+    expect(resolveThemeOptions({light: {accent: '#E11D48'}}).light).toEqual({
+      accent: '#e11d48',
+      text: deriveTextColor('#e11d48'),
+      background: '#ffffff',
+      contrast: 85,
+    })
+    expect(resolveThemeOptions({light: {accent: '#e11d48'}}).dark).toEqual(STOCK_OPTIONS.dark)
+  })
+
+  it('points out the options shape from before they were grouped by scheme', () => {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- the old shape on purpose
+    expect(() => resolveThemeOptions({accent: '#556bfc'} as BuildThemeOptions)).toThrow(
+      /grouped by color scheme/,
+    )
+  })
+})
+
+describe('buildPalette', () => {
+  it('reproduces the stock palette in both schemes from the stock options', () => {
+    const palettes = buildPalette(STOCK_OPTIONS)
+
+    for (const palette of [palettes.light, palettes.dark]) {
+      expect(palette.black).toBe(color.black.hex)
+      expect(palette.white).toBe(color.white.hex)
+
+      for (const hue of COLOR_HUES) {
+        for (const tint of COLOR_TINTS) {
+          expect(palette[hue][tint], `${hue}/${tint}`).toBe(color[hue][tint].hex)
+        }
+      }
+    }
+  })
+
+  it('reproduces the stock palette from no options at all', () => {
+    expect(buildPalette()).toEqual(buildPalette(STOCK_OPTIONS))
+    expect(buildPalette({})).toEqual(buildPalette(STOCK_OPTIONS))
+    expect(buildPalette({light: {}, dark: {contrast: 85}})).toEqual(buildPalette(STOCK_OPTIONS))
+  })
+
+  it('places the accent at blue/500 and the text at gray/500 of each scheme', () => {
+    const {light, dark} = buildPalette({
+      light: {accent: '#e11d48', text: '#6b7280'},
+      dark: {accent: '#15803d', text: '#57619c'},
+    })
+
+    expect(light.blue['500']).toBe('#e11d48')
+    expect(light.gray['500']).toBe('#6b7280')
+    expect(dark.blue['500']).toBe('#15803d')
+    expect(dark.gray['500']).toBe('#57619c')
+  })
+
+  it('keeps the schemes apart', () => {
+    const {light, dark} = buildPalette({light: {accent: '#e11d48'}})
+
+    expect(light.blue['500']).toBe('#e11d48')
+    expect(dark.blue['500']).toBe(color.blue[500].hex)
+  })
+
+  it('derives the text color from the accent when omitted', () => {
+    const derived = buildPalette(both({accent: '#e11d48'}))
+    const explicit = buildPalette(both({accent: '#e11d48', text: deriveTextColor('#e11d48')}))
+
+    expect(derived).toEqual(explicit)
+  })
+
+  it('keeps the other hues at their stock values', () => {
+    const {light} = buildPalette({light: {accent: '#e11d48', text: '#6b7280'}})
+
+    for (const hue of ['purple', 'magenta', 'red', 'orange', 'yellow', 'green', 'cyan'] as const) {
+      for (const tint of COLOR_TINTS) {
+        expect(light[hue][tint], `${hue}/${tint}`).toBe(color[hue][tint].hex)
+      }
+    }
+  })
+
+  it('accepts short hex colors and uppercase hex colors', () => {
+    expect(buildPalette({light: {accent: '#F00'}}).light.blue['500']).toBe('#ff0000')
+    expect(buildPalette({light: {accent: '#FF0000'}}).light.blue['500']).toBe('#ff0000')
+  })
+
+  it('rejects invalid colors and contrasts', () => {
+    expect(() => buildPalette({light: {accent: 'red'}})).toThrow(TypeError)
+    expect(() => buildPalette({dark: {text: 'nope'}})).toThrow(TypeError)
+    expect(() => buildPalette({dark: {background: 'dark'}})).toThrow(TypeError)
+    expect(() => buildPalette({light: {contrast: Number.NaN}})).toThrow(TypeError)
+  })
+
+  it('clamps the accent and text lightness so they cannot mess with the scale', () => {
+    const {light} = buildPalette({light: {accent: '#eeeeff', text: '#f4f4f6'}})
+
+    expect(hexToHsl(light.blue['500']).l).toBeCloseTo(0.75, 2)
+    expect(hexToHsl(light.gray['500']).l).toBeCloseTo(0.75, 2)
+
+    const {dark} = buildPalette({dark: {accent: '#000411', text: '#0a0a10'}})
+
+    expect(hexToHsl(dark.blue['500']).l).toBeCloseTo(0.25, 2)
+    expect(hexToHsl(dark.gray['500']).l).toBeCloseTo(0.25, 2)
+  })
+
+  it('keeps every scale in light-to-dark tint order', () => {
+    const {light} = buildPalette({light: {accent: '#15803d', text: '#57619c', contrast: 40}})
+
+    for (const hue of ['gray', 'blue'] as const) {
+      for (let index = 1; index < COLOR_TINTS.length; index++) {
+        const lighter = hexToHsl(light[hue][COLOR_TINTS[index - 1]]).l
+        const darker = hexToHsl(light[hue][COLOR_TINTS[index]]).l
+
+        expect(lighter, `${hue}/${COLOR_TINTS[index]}`).toBeGreaterThan(darker)
+      }
+    }
+  })
+
+  it('darkens a dark background that gets too close to the text and accent', () => {
+    const {dark} = buildPalette({dark: {background: '#888888'}})
+    const background = relativeLuminance(dark.black)
+
+    expect(background).toBeLessThan(relativeLuminance('#888888'))
+    expect(background).toBeLessThan(relativeLuminance('#727892'))
+    expect(background).toBeLessThan(relativeLuminance('#556bfc'))
+
+    for (const tint of [dark.gray['400'], dark.blue['400']]) {
+      expect((relativeLuminance(tint) + 0.05) / (background + 0.05)).toBeGreaterThanOrEqual(4.5)
+    }
+  })
+
+  it('never lets the light background get darker than the text and accent', () => {
+    const {light} = buildPalette({light: {background: '#222222'}})
+    const background = relativeLuminance(light.white)
+
+    expect(background).toBeGreaterThan(relativeLuminance('#727892'))
+    expect(background).toBeGreaterThan(relativeLuminance('#556bfc'))
+  })
+
+  it('lends each scheme the background of the other for its inverted details', () => {
+    const {light, dark} = buildPalette({
+      light: {background: '#fcfdfd'},
+      dark: {background: '#0d1415'},
+    })
+
+    expect(light.white).toBe('#fcfdfd')
+    expect(light.black).toBe('#0d1415')
+    expect(dark.black).toBe('#0d1415')
+    expect(dark.white).toBe('#fcfdfd')
+  })
+
+  it('keeps the backgrounds of every preset untouched', () => {
+    for (const preset of presets) {
+      const resolved = resolveThemeOptions(preset.options)
+      const {light, dark} = buildPalette(preset.options)
+
+      expect(dark.black, `${preset.slug} dark`).toBe(resolved.dark.background)
+      expect(light.white, `${preset.slug} light`).toBe(resolved.light.background)
+    }
+  })
+})
+
+describe('contrast', () => {
+  it('removes every trace of the accent from the text scale at 100', () => {
+    const {light} = buildPalette({light: {contrast: 100}})
+
+    for (const tint of COLOR_TINTS) {
+      const hex = light.gray[tint]
+
+      expect(hex.slice(1, 3), `gray/${tint}`).toBe(hex.slice(3, 5))
+      expect(hex.slice(3, 5), `gray/${tint}`).toBe(hex.slice(5, 7))
+    }
+  })
+
+  it('makes the text scale adopt the accent hue and saturation at 15', () => {
+    const {light} = buildPalette({light: {accent: '#e11d48', contrast: 15}})
+    const accent = hexToHsl(light.blue['500'])
+    const text = hexToHsl(light.gray['500'])
+
+    expect(text.h).toBeCloseTo(accent.h, 0)
+    expect(text.s).toBeCloseTo(accent.s, 1)
+    // The text keeps its own lightness so it stays legible
+    expect(text.l).toBeCloseTo(hexToHsl(deriveTextColor('#e11d48')).l, 2)
+  })
+
+  it('blends more of the accent into the text scale the lower it gets', () => {
+    const saturationAt = (contrast: number) =>
+      hexToHsl(buildPalette({light: {contrast}}).light.gray['500']).s
+
+    expect(saturationAt(100)).toBeLessThan(saturationAt(85))
+    expect(saturationAt(85)).toBeLessThan(saturationAt(50))
+    expect(saturationAt(50)).toBeLessThan(saturationAt(15))
+  })
+
+  it('clamps the contrast into its 15–100 range', () => {
+    expect(buildPalette({dark: {contrast: -20}})).toEqual(buildPalette({dark: {contrast: 15}}))
+    expect(buildPalette({dark: {contrast: 250}})).toEqual(buildPalette({dark: {contrast: 100}}))
+  })
+})
+
+describe('buildTheme', () => {
+  it('matches buildTheme() from @sanity/ui/theme for the stock options', () => {
+    const expected = buildUITheme()
+
+    for (const actual of [buildTheme(STOCK_OPTIONS), buildTheme({}), buildTheme()]) {
+      // oxlint-disable-next-line no-deprecated -- the v0 colors are compared on purpose, they are what a Studio still consumes
+      expect(forceTree(actual.color)).toEqual(forceTree(expected.color))
+      expect(forceTree(actual.v2?.color)).toEqual(forceTree(expected.v2?.color))
+    }
+  })
+
+  it('takes each scheme from the palette of that scheme', () => {
+    const theme = buildTheme({light: {accent: '#e11d48'}, dark: {accent: '#15803d'}})
+    const light = buildUITheme({palette: buildPalette({light: {accent: '#e11d48'}}).light})
+    const dark = buildUITheme({palette: buildPalette({dark: {accent: '#15803d'}}).dark})
+
+    expect(forceTree(theme.v2?.color.light)).toEqual(forceTree(light.v2?.color.light))
+    expect(forceTree(theme.v2?.color.dark)).toEqual(forceTree(dark.v2?.color.dark))
+    expect(theme.v2?.color.light.default.button.default.primary.enabled.bg).toBe('#e11d48')
+    expect(theme.v2?.color.dark.default.button.default.primary.enabled.bg).not.toBe(
+      theme.v2?.color.light.default.button.default.primary.enabled.bg,
+    )
+  })
+})
diff --git a/plugins/@sanity/themer/src/tool/AnimatedColorWheelIcon.tsx b/plugins/@sanity/themer/src/tool/AnimatedColorWheelIcon.tsx
new file mode 100644
index 0000000000..4a832f2874
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/AnimatedColorWheelIcon.tsx
@@ -0,0 +1,93 @@
+import {usePrefersReducedMotion} from '@sanity/ui'
+import {motion, MotionValue, useTransform} from 'motion/react'
+
+import {isSliceFilled, SLICE_COLORS, SLICE_COUNT, wheelRotation} from './colorWheel'
+
+/**
+ * The geometry of `ColorWheelIcon` from `@sanity/icons`: a ring between two
+ * circles around the center of a 25×25 viewBox, cut into eight slices by the
+ * spokes of its outline path
+ */
+const CENTER = 12.5
+const OUTER_RADIUS = 8
+const INNER_RADIUS = 3.5
+const OUTLINE =
+  'M9.43853 5.10896L11.1606 9.26642M13.8394 15.7336L15.5615 19.891M15.7336 11.1606L19.891 9.43853M9.26642 13.8394L5.10896 15.5615M5.3139 9.52342L9.23359 11.147M15.7664 13.853L19.6861 15.4766M13.853 9.23359L15.4766 5.3139M9.52342 19.6861L11.147 15.7664M20.5 12.5C20.5 16.9183 16.9183 20.5 12.5 20.5C8.08172 20.5 4.5 16.9183 4.5 12.5C4.5 8.08172 8.08172 4.5 12.5 4.5C16.9183 4.5 20.5 8.08172 20.5 12.5ZM16 12.5C16 14.433 14.433 16 12.5 16C10.567 16 9 14.433 9 12.5C9 10.567 10.567 9 12.5 9C14.433 9 16 10.567 16 12.5Z'
+
+const SLICE_ANGLE = 360 / SLICE_COUNT
+
+/** A point on a circle around the center, at `degrees` clockwise from 3 o'clock */
+function point(radius: number, degrees: number): string {
+  const radians = (degrees * Math.PI) / 180
+
+  return `${CENTER + radius * Math.cos(radians)} ${CENTER + radius * Math.sin(radians)}`
+}
+
+/**
+ * The part of the ring a slice colors in: between its two spokes, from the
+ * inner circle out to the outer. The 12 o'clock slice is centered on 12, so
+ * it starts half a slice before it.
+ */
+function slicePath(index: number): string {
+  const start = index * SLICE_ANGLE - SLICE_ANGLE / 2 - 90
+  const end = start + SLICE_ANGLE
+
+  return [
+    `M${point(OUTER_RADIUS, start)}`,
+    `A${OUTER_RADIUS} ${OUTER_RADIUS} 0 0 1 ${point(OUTER_RADIUS, end)}`,
+    `L${point(INNER_RADIUS, end)}`,
+    `A${INNER_RADIUS} ${INNER_RADIUS} 0 0 0 ${point(INNER_RADIUS, start)}`,
+    'Z',
+  ].join('')
+}
+
+const SLICE_PATHS = SLICE_COLORS.map((_, index) => slicePath(index))
+
+/**
+ * A filled shape, not a stroked one: the icon styles of `@sanity/ui` force
+ * `vector-effect: non-scaling-stroke` on every path in an icon, which fills
+ * are none the wiser about
+ */
+function Slice(props: {index: number; progress: MotionValue<number>}) {
+  const {index, progress} = props
+  const opacity = useTransform(progress, (value) => (isSliceFilled(value, index) ? 1 : 0))
+
+  return <motion.path d={SLICE_PATHS[index]} fill={SLICE_COLORS[index]} style={{opacity}} />
+}
+
+/**
+ * The `ColorWheelIcon` of `@sanity/icons`, with an animation driven by
+ * `progress` (0–1): the slices pop in with color one at a time, clockwise
+ * from 12 o'clock like the segments of a classic spinner, the wheel spins once
+ * as the 6 o'clock slice pops in, and the colors pop out the same way round,
+ * carrying the spin's speed to a rest (see `colorWheel.ts`). At rest — at
+ * either end — it looks exactly like the icon it stands in for. With
+ * `prefers-reduced-motion: reduce` the wheel keeps still; only the colors come
+ * and go.
+ *
+ * @internal
+ */
+export function AnimatedColorWheelIcon(props: {progress: MotionValue<number>}) {
+  const {progress} = props
+  const prefersReducedMotion = usePrefersReducedMotion()
+  const rotate = useTransform(progress, (value) =>
+    prefersReducedMotion ? 0 : wheelRotation(value),
+  )
+
+  return (
+    <motion.svg
+      data-sanity-icon="color-wheel"
+      fill="none"
+      height="1em"
+      style={{rotate}}
+      viewBox="0 0 25 25"
+      width="1em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {SLICE_COLORS.map((color, index) => (
+        <Slice index={index} key={color} progress={progress} />
+      ))}
+      <path d={OUTLINE} stroke="currentColor" strokeLinejoin="round" strokeWidth={1.2} />
+    </motion.svg>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ImageFileButton.tsx b/plugins/@sanity/themer/src/tool/ImageFileButton.tsx
new file mode 100644
index 0000000000..118b0c54a8
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ImageFileButton.tsx
@@ -0,0 +1,41 @@
+import {ImageIcon} from '@sanity/icons/Image'
+import type {ButtonProps} from '@sanity/ui'
+import {useRef} from 'react'
+
+import {TooltipButton} from './TooltipButton'
+
+/**
+ * A button that opens the file picker for an image, and hands the chosen file
+ * over — the picker is a hidden file input, so nothing is uploaded anywhere.
+ *
+ * @internal
+ */
+export function ImageFileButton(
+  props: {onFile: (file: File) => void; tooltip: string} & Pick<
+    ButtonProps,
+    'disabled' | 'loading' | 'mode' | 'padding' | 'text' | 'width'
+  >,
+) {
+  const {onFile, ...buttonProps} = props
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  return (
+    <>
+      <TooltipButton {...buttonProps} icon={ImageIcon} onClick={() => inputRef.current?.click()} />
+      <input
+        accept="image/*"
+        hidden
+        onChange={(event) => {
+          const file = event.currentTarget.files?.[0]
+
+          // Picking the same file again should work, so the input forgets it
+          event.currentTarget.value = ''
+
+          if (file) onFile(file)
+        }}
+        ref={inputRef}
+        type="file"
+      />
+    </>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ImagePaletteSection.css.ts b/plugins/@sanity/themer/src/tool/ImagePaletteSection.css.ts
new file mode 100644
index 0000000000..8d68bcc86b
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ImagePaletteSection.css.ts
@@ -0,0 +1,126 @@
+import {createVar, style} from '@vanilla-extract/css'
+
+const TILE_SIZE = 24
+const TILE_GAP = 4
+
+/** The image spans both rows of tiles */
+const IMAGE_SIZE = TILE_SIZE * 2 + TILE_GAP
+
+/** The variant previews are the theme thumbnails, laid out at this width and scaled down */
+export const VARIANT_WIDTH = 144
+
+export const VARIANT_GAP = 8
+export const ROW_PADDING = 12
+
+/** The frame around a variant's thumbnail, on either side */
+export const VARIANT_FRAME = 4
+
+/** The width of one variant's thumbnail, set on the row once it is measured */
+export const variantWidth = createVar()
+
+/** How much a variant's thumbnail is scaled down from `VARIANT_WIDTH` */
+export const variantScale = createVar()
+
+export const paletteGrid = style({
+  display: 'grid',
+  gridTemplateColumns: `repeat(3, ${TILE_SIZE}px)`,
+  gridAutoRows: TILE_SIZE,
+  gap: TILE_GAP,
+  selectors: {
+    "&[data-with-image='true']": {
+      gridTemplateColumns: `${IMAGE_SIZE}px repeat(3, ${TILE_SIZE}px)`,
+    },
+  },
+})
+
+export const imageTile = style({
+  display: 'block',
+  gridRow: 'span 2',
+  width: IMAGE_SIZE,
+  height: IMAGE_SIZE,
+  borderRadius: 3,
+  objectFit: 'cover',
+  boxShadow: 'inset 0 0 0 1px var(--card-border-color)',
+})
+
+export const tile = style({
+  display: 'block',
+  borderRadius: 3,
+  boxShadow: 'inset 0 0 0 1px var(--card-border-color)',
+  selectors: {
+    "&[data-empty='true']": {
+      background:
+        'repeating-linear-gradient(-45deg, transparent 0 3px, var(--card-border-color) 3px 4px)',
+    },
+  },
+})
+
+/**
+ * The variants scroll sideways and snap into place, bleeding into the card's
+ * padding so the row runs from edge to edge
+ */
+export const variantRow = style({
+  display: 'flex',
+  gap: VARIANT_GAP,
+  margin: `0 -${ROW_PADDING}px`,
+  padding: `0 ${ROW_PADDING}px`,
+  overflowX: 'auto',
+  scrollSnapType: 'x mandatory',
+  scrollPaddingLeft: ROW_PADDING,
+  scrollbarWidth: 'thin',
+})
+
+export const variantButton = style({
+  'appearance': 'none',
+  'flex': 'none',
+  'display': 'block',
+  'boxSizing': 'border-box',
+  'width': `calc(${variantWidth} + ${VARIANT_FRAME * 2}px)`,
+  'margin': 0,
+  'padding': 0,
+  'border': 0,
+  'background': 'none',
+  'color': 'inherit',
+  'font': 'inherit',
+  'textAlign': 'center',
+  'cursor': 'pointer',
+  'scrollSnapAlign': 'start',
+  ':focus': {
+    outline: 'none',
+  },
+})
+
+/**
+ * Clips the scaled-down thumbnail to its visual size, with room for the ring
+ * — drawn inside the frame, like the theme cards', so the scrolling row
+ * never clips it
+ */
+export const variantFrame = style({
+  display: 'block',
+  boxSizing: 'border-box',
+  width: `calc(${variantWidth} + ${VARIANT_FRAME * 2}px)`,
+  height: `calc(${variantWidth} * 9 / 16 + ${VARIANT_FRAME * 2}px)`,
+  padding: VARIANT_FRAME,
+  borderRadius: 7,
+  overflow: 'hidden',
+  transition: 'box-shadow 100ms',
+  selectors: {
+    [`${variantButton}:hover &`]: {
+      boxShadow: 'inset 0 0 0 2px var(--card-border-color)',
+    },
+    [`${variantButton}[aria-pressed='true'] &`]: {
+      boxShadow: 'inset 0 0 0 2px var(--card-focus-ring-color)',
+    },
+    [`${variantButton}:focus-visible &`]: {
+      outline: '2px solid var(--card-focus-ring-color)',
+      outlineOffset: -2,
+    },
+  },
+})
+
+export const variantScaleBox = style({
+  display: 'block',
+  width: VARIANT_WIDTH,
+  transform: `scale(${variantScale})`,
+  transformOrigin: 'top left',
+})
diff --git a/plugins/@sanity/themer/src/tool/ImagePaletteSection.tsx b/plugins/@sanity/themer/src/tool/ImagePaletteSection.tsx
new file mode 100644
index 0000000000..bfae7e756c
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ImagePaletteSection.tsx
@@ -0,0 +1,271 @@
+import {SparklesIcon} from '@sanity/icons/Sparkles'
+import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+import {Tooltip} from '@sanity/ui/tooltip'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
+import {useEffect, useMemo, useRef, useState} from 'react'
+
+import type {BuildThemeOptions} from '../theme/options'
+import {ImageFileButton} from './ImageFileButton'
+import {
+  applyImagePalette,
+  currentImageVariant,
+  IMAGE_PALETTE_TITLES,
+  IMAGE_PALETTE_VARIANTS,
+  type ImagePalette,
+  type ImagePaletteKey,
+  type ImagePaletteVariant,
+} from './imagePalette'
+import {ThemeThumbnail} from './ThemeThumbnail'
+import {TooltipButton} from './TooltipButton'
+import {useImagePalette} from './useImagePalette'
+
+import {
+  imageTile,
+  paletteGrid,
+  ROW_PADDING,
+  tile,
+  VARIANT_FRAME,
+  VARIANT_GAP,
+  VARIANT_WIDTH,
+  variantButton,
+  variantFrame,
+  variantRow,
+  variantScale,
+  variantScaleBox,
+  variantWidth,
+} from './ImagePaletteSection.css'
+
+/** The swatches on display: the vibrant family over the muted one */
+const TILES: ImagePaletteKey[] = [
+  'vibrant',
+  'lightVibrant',
+  'darkVibrant',
+  'muted',
+  'lightMuted',
+  'darkMuted',
+]
+
+/**
+ * How many variants show at once: two and a half, so that the cut-off third
+ * one gives away that the row scrolls
+ */
+const VISIBLE_VARIANTS = 2.5
+
+/** The width of one variant, before the row has been measured */
+const FALLBACK_VARIANT_WIDTH = 58
+
+/**
+ * Takes the colors of a theme from an image, on device: the image is read
+ * into a canvas and its palette extracted right there — nothing is uploaded.
+ * Shows the image (while the session lasts) next to its palette, offers a
+ * theme variant built around each swatch as a small preview, and a lucky
+ * button that picks an interesting one.
+ *
+ * @internal
+ */
+export function ImagePaletteSection(props: {
+  imageUrl?: string
+  onPalette: (palette: ImagePalette, file: File) => void
+  onVariant: (variant: ImagePaletteVariant) => void
+  onLucky: () => void
+  options: BuildThemeOptions
+  palette?: ImagePalette
+}) {
+  const {imageUrl, onPalette, onVariant, onLucky, options, palette} = props
+  const {busy, pickImage} = useImagePalette(onPalette)
+  const [dragging, setDragging] = useState(false)
+  // `dragleave` also fires when the pointer crosses into a child, so the
+  // highlight tracks how deep the drag is rather than the last event
+  const dragDepth = useRef(0)
+  const current = palette ? currentImageVariant(options, palette) : null
+  const rowRef = useRef<HTMLDivElement | null>(null)
+  const [thumbnailWidth, setThumbnailWidth] = useState(FALLBACK_VARIANT_WIDTH)
+
+  // Size the variants to the row, so two and a half of them are in view
+  useEffect(() => {
+    const row = rowRef.current
+
+    if (!row) return undefined
+
+    const measure = () => {
+      const visible =
+        row.clientWidth - ROW_PADDING - (Math.ceil(VISIBLE_VARIANTS) - 1) * VARIANT_GAP
+
+      // Each variant is its thumbnail plus the frame on either side
+      setThumbnailWidth(Math.max(24, Math.floor(visible / VISIBLE_VARIANTS) - VARIANT_FRAME * 2))
+    }
+
+    measure()
+
+    const observer = new ResizeObserver(measure)
+
+    observer.observe(row)
+
+    return () => observer.disconnect()
+    // oxlint-disable-next-line react/exhaustive-effect-dependencies -- the row only renders with a palette, so a new palette has a new row to observe
+  }, [palette])
+
+  const variants = useMemo(() => {
+    if (!palette) return []
+
+    return IMAGE_PALETTE_VARIANTS.flatMap((variant) =>
+      palette[variant] === null
+        ? []
+        : [
+            {
+              variant,
+              title: IMAGE_PALETTE_TITLES[variant],
+              options: applyImagePalette(options, palette, variant),
+            },
+          ],
+    )
+  }, [options, palette])
+
+  return (
+    <Card
+      border
+      onDragEnter={(event) => {
+        event.preventDefault()
+        dragDepth.current++
+        setDragging(true)
+      }}
+      onDragLeave={() => {
+        dragDepth.current = Math.max(0, dragDepth.current - 1)
+
+        if (dragDepth.current === 0) setDragging(false)
+      }}
+      onDragOver={(event) => {
+        event.preventDefault()
+      }}
+      onDrop={(event) => {
+        event.preventDefault()
+        dragDepth.current = 0
+        setDragging(false)
+
+        const file = event.dataTransfer.files[0]
+
+        if (file) pickImage(file)
+      }}
+      padding={3}
+      radius={3}
+      tone={dragging ? 'primary' : 'default'}
+    >
+      <Stack gap={3}>
+        <Flex align="center" gap={2}>
+          <Box flex={1}>
+            <Text size={1} weight="medium">
+              Image palette
+            </Text>
+          </Box>
+          {palette && (
+            <ImageFileButton
+              loading={busy}
+              mode="bleed"
+              onFile={pickImage}
+              padding={2}
+              tooltip="Pick another image"
+            />
+          )}
+        </Flex>
+
+        {palette ? (
+          <>
+            <div className={paletteGrid} data-with-image={imageUrl !== undefined}>
+              {imageUrl && <img alt="" className={imageTile} src={imageUrl} />}
+              {TILES.map((key) => {
+                const hex = palette[key]
+                const title = IMAGE_PALETTE_TITLES[key]
+
+                return (
+                  <Tooltip
+                    animate
+                    content={
+                      <Text size={1}>
+                        {hex ? `${title} · ${hex}` : `No ${title.toLowerCase()} color`}
+                      </Text>
+                    }
+                    key={key}
+                    placement="bottom"
+                    portal
+                  >
+                    <span
+                      className={tile}
+                      data-empty={hex === null}
+                      style={{background: hex ?? undefined}}
+                    />
+                  </Tooltip>
+                )
+              })}
+            </div>
+
+            <Stack gap={2}>
+              <Text muted size={0}>
+                Pick the swatch to build the theme around
+              </Text>
+              <div
+                className={variantRow}
+                ref={rowRef}
+                style={assignInlineVars({
+                  [variantWidth]: `${thumbnailWidth}px`,
+                  [variantScale]: String(thumbnailWidth / VARIANT_WIDTH),
+                })}
+              >
+                {variants.map(({variant, title, options: variantOptions}) => (
+                  // oxlint-disable-next-line control-has-associated-label -- the title below the thumbnail is the label, deeper than the rule looks
+                  <button
+                    aria-pressed={variant === current}
+                    className={variantButton}
+                    key={variant}
+                    onClick={() => onVariant(variant)}
+                    type="button"
+                  >
+                    <span className={variantFrame}>
+                      <span className={variantScaleBox}>
+                        <ThemeThumbnail options={variantOptions} />
+                      </span>
+                    </span>
+                    <Box as="span" display="block" paddingTop={1}>
+                      <Text
+                        align="center"
+                        as="span"
+                        size={0}
+                        textOverflow="ellipsis"
+                        weight={variant === current ? 'medium' : 'regular'}
+                      >
+                        {title}
+                      </Text>
+                    </Box>
+                  </button>
+                ))}
+              </div>
+            </Stack>
+
+            <TooltipButton
+              icon={SparklesIcon}
+              mode="ghost"
+              onClick={onLucky}
+              text="I'm feeling lucky"
+              tooltip="Build the theme around a swatch that looks interesting"
+              width="fill"
+            />
+          </>
+        ) : (
+          <Stack gap={3}>
+            <Text muted size={0}>
+              Take the accent, text and background colors from an image — read on device, nothing is
+              uploaded.
+            </Text>
+            <ImageFileButton
+              loading={busy}
+              mode="ghost"
+              onFile={pickImage}
+              text="Pick an image"
+              tooltip="Take the colors from an image on your device"
+              width="fill"
+            />
+          </Stack>
+        )}
+      </Stack>
+    </Card>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/PasteThemeDialog.tsx b/plugins/@sanity/themer/src/tool/PasteThemeDialog.tsx
new file mode 100644
index 0000000000..0c2806ae62
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/PasteThemeDialog.tsx
@@ -0,0 +1,83 @@
+import {Button, Card, Dialog, Flex, Stack, Text, TextInput} from '@sanity/ui'
+import {useState} from 'react'
+
+import {useThemeCodes} from './useThemeCodes'
+
+/**
+ * Where a theme code someone shared gets pasted by hand — for browsers that
+ * do not hand the clipboard over, and for codes that are not on it.
+ *
+ * @internal
+ */
+export function PasteThemeDialog(props: {onClose: () => void}) {
+  const {onClose} = props
+  const {addThemeFromText} = useThemeCodes()
+  const [text, setText] = useState('')
+  const [invalid, setInvalid] = useState(false)
+
+  const add = () => {
+    if (addThemeFromText(text)) {
+      onClose()
+    } else {
+      setInvalid(true)
+    }
+  }
+
+  return (
+    <Dialog
+      animate
+      footer={
+        <Flex gap={2} justify="flex-end" padding={3}>
+          <Button mode="ghost" onClick={onClose} padding={2} text="Cancel" />
+          <Button
+            disabled={text.trim() === ''}
+            onClick={add}
+            padding={2}
+            text="Add theme"
+            tone="primary"
+          />
+        </Flex>
+      }
+      header="Add a shared theme"
+      id="themer-paste"
+      onClickOutside={onClose}
+      onClose={onClose}
+      width={0}
+    >
+      <form
+        onSubmit={(event) => {
+          event.preventDefault()
+          add()
+        }}
+      >
+        <Stack gap={3} padding={4}>
+          <Text muted size={1}>
+            Paste the code someone copied from their themer — the theme is added to your list and
+            applied.
+          </Text>
+          <TextInput
+            aria-describedby={invalid ? 'themer-paste-error' : undefined}
+            aria-invalid={invalid}
+            aria-label="Theme code"
+            autoFocus
+            customValidity={invalid ? 'That is not a theme code' : undefined}
+            fontSize={1}
+            onChange={(event) => {
+              setText(event.currentTarget.value)
+              setInvalid(false)
+            }}
+            placeholder="AQ…"
+            value={text}
+          />
+          {invalid && (
+            <Card id="themer-paste-error" padding={3} radius={2} role="alert" tone="critical">
+              <Text size={1}>
+                That is not a theme code — codes are one word, copied from a theme&apos;s menu.
+              </Text>
+            </Card>
+          )}
+        </Stack>
+      </form>
+    </Dialog>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/RemovedThemes.css.ts b/plugins/@sanity/themer/src/tool/RemovedThemes.css.ts
new file mode 100644
index 0000000000..fa858730e8
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/RemovedThemes.css.ts
@@ -0,0 +1,6 @@
+import {style} from '@vanilla-extract/css'
+
+/** A removed theme's thumbnail, dimmed to read as removed */
+export const removedThumbnail = style({
+  opacity: 0.6,
+})
diff --git a/plugins/@sanity/themer/src/tool/RemovedThemes.tsx b/plugins/@sanity/themer/src/tool/RemovedThemes.tsx
new file mode 100644
index 0000000000..cfcdf5f06a
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/RemovedThemes.tsx
@@ -0,0 +1,54 @@
+import {Box, Button, Flex, Stack, Text} from '@sanity/ui'
+
+import {useThemer} from './context'
+import {ScrollArea} from './ScrollArea'
+import {displayTitle} from './themes'
+import {ThemeThumbnail} from './ThemeThumbnail'
+
+import {removedThumbnail} from './RemovedThemes.css'
+
+/**
+ * The flow for restoring removed themes: the presets and custom themes the
+ * user took out of the list, each with a button to put it back — and, for
+ * custom themes, one to delete it for good. The machine leaves the flow once
+ * the last one is gone.
+ *
+ * @internal
+ */
+export function RemovedThemes() {
+  const {removed, send} = useThemer()
+
+  return (
+    <ScrollArea padding={3}>
+      <Stack gap={5}>
+        {removed.map((theme) => (
+          <Stack gap={3} key={theme.slug}>
+            <Box className={removedThumbnail}>
+              <ThemeThumbnail options={theme.options} />
+            </Box>
+            <Text align="center" size={1} textOverflow="ellipsis">
+              {displayTitle(theme.title)}
+            </Text>
+            <Flex gap={2} justify="center">
+              <Button
+                mode="ghost"
+                onClick={() => send({type: 'theme.restore', slug: theme.slug})}
+                padding={2}
+                text="Restore"
+              />
+              {theme.source === 'custom' && (
+                <Button
+                  mode="ghost"
+                  onClick={() => send({type: 'theme.delete', slug: theme.slug})}
+                  padding={2}
+                  text="Delete"
+                  tone="critical"
+                />
+              )}
+            </Flex>
+          </Stack>
+        ))}
+      </Stack>
+    </ScrollArea>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ResizableSidebar.css.ts b/plugins/@sanity/themer/src/tool/ResizableSidebar.css.ts
new file mode 100644
index 0000000000..e5d0a488eb
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ResizableSidebar.css.ts
@@ -0,0 +1,77 @@
+import {createContainer, createViewTransition, style} from '@vanilla-extract/css'
+
+/**
+ * The view transition group of the sidebar, which the split preview's
+ * transition (see `ThemerLayout.css.ts`) leaves alone: it never animates, and
+ * the Studio copies animating underneath never paint over it
+ */
+export const sidebarTransition = createViewTransition()
+
+/** The sidebar's content, which the content's layout queries — as wide as the sidebar itself */
+export const sidebarContent = createContainer()
+
+export const sidebar = style({
+  flex: 'none',
+  viewTransitionName: sidebarTransition,
+  selectors: {
+    // On small screens the sidebar covers the Studio instead of standing next to it
+    "&[data-overlay='true']": {
+      position: 'absolute',
+      inset: 0,
+      width: 'auto',
+    },
+  },
+})
+
+/**
+ * Draws the sidebar's border and gives the resize handle its card colors. It
+ * does not clip, so the handle can straddle the border — the content is
+ * clipped one level down instead.
+ */
+export const frame = style({
+  position: 'relative',
+})
+
+/**
+ * Clips the content, and is the container its layout queries: as wide as
+ * the sidebar, whether or not a scrollbar takes room inside — see the theme
+ * grid's columns in `ThemeList.css.ts`
+ */
+export const content = style({
+  containerType: 'inline-size',
+  containerName: sidebarContent,
+})
+
+/**
+ * The grab area along the sidebar's left edge. It straddles the border so it
+ * is easy to hit, and highlights while hovered, focused or dragged.
+ */
+export const resizeHandle = style({
+  'position': 'absolute',
+  'top': 0,
+  'bottom': 0,
+  'left': -3,
+  'zIndex': 1,
+  'width': 7,
+  'cursor': 'col-resize',
+  'touchAction': 'none',
+  '::after': {
+    content: '',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 2,
+    width: 3,
+    background: 'var(--card-focus-ring-color)',
+    opacity: 0,
+    transition: 'opacity 100ms',
+  },
+  ':focus': {
+    outline: 'none',
+  },
+  'selectors': {
+    "&:hover::after, &:focus-visible::after, &[data-dragging='true']::after": {
+      opacity: 1,
+    },
+  },
+})
diff --git a/plugins/@sanity/themer/src/tool/ResizableSidebar.tsx b/plugins/@sanity/themer/src/tool/ResizableSidebar.tsx
new file mode 100644
index 0000000000..224f21bbcb
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ResizableSidebar.tsx
@@ -0,0 +1,131 @@
+import {Box, Card, Layer} from '@sanity/ui'
+import {useCallback, useEffect, useRef, useState} from 'react'
+
+import {MAXIMUM_WIDTH, MINIMUM_WIDTH} from './sidebarWidth'
+import {ThemerSidebar} from './ThemerSidebar'
+
+import {content, frame, resizeHandle, sidebar} from './ResizableSidebar.css'
+
+/** How far one arrow key press resizes the sidebar */
+const KEYBOARD_STEP = 16
+
+const WIDTH_STORAGE_KEY = 'sanityStudio:themer:width'
+
+function clampWidth(width: number): number {
+  return Math.min(MAXIMUM_WIDTH, Math.max(MINIMUM_WIDTH, Math.round(width)))
+}
+
+function readStoredWidth(): number {
+  try {
+    const stored = Number(localStorage.getItem(WIDTH_STORAGE_KEY))
+
+    return Number.isFinite(stored) && stored > 0 ? clampWidth(stored) : MINIMUM_WIDTH
+  } catch {
+    return MINIMUM_WIDTH
+  }
+}
+
+function writeStoredWidth(width: number): void {
+  try {
+    if (width === MINIMUM_WIDTH) {
+      localStorage.removeItem(WIDTH_STORAGE_KEY)
+    } else {
+      localStorage.setItem(WIDTH_STORAGE_KEY, String(width))
+    }
+  } catch {
+    // Storage can be unavailable (e.g. private browsing) — the width just won't persist
+  }
+}
+
+/**
+ * The themer sidebar, in a layer along the right edge of the Studio. Its left
+ * edge drags (or arrow-keys) it wider, up to twice its default width — the
+ * width sticks between sessions. As an overlay (small screens) it covers the
+ * Studio edge to edge instead, with nothing to resize.
+ *
+ * @internal
+ */
+export default function ResizableSidebar(props: {overlay: boolean}) {
+  const {overlay} = props
+  const [width, setWidth] = useState(readStoredWidth)
+  const [dragging, setDragging] = useState(false)
+  const drag = useRef<{pointerId: number; startX: number; startWidth: number} | null>(null)
+
+  useEffect(() => writeStoredWidth(width), [width])
+
+  const handlePointerDown = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (event.button !== 0) return
+
+      event.preventDefault()
+      event.currentTarget.setPointerCapture(event.pointerId)
+      drag.current = {pointerId: event.pointerId, startX: event.clientX, startWidth: width}
+      setDragging(true)
+    },
+    [width],
+  )
+
+  const handlePointerMove = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    if (!drag.current || drag.current.pointerId !== event.pointerId) return
+
+    // The sidebar sits on the right, so dragging left makes it wider
+    setWidth(clampWidth(drag.current.startWidth - (event.clientX - drag.current.startX)))
+  }, [])
+
+  const handlePointerUp = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
+    if (!drag.current || drag.current.pointerId !== event.pointerId) return
+
+    drag.current = null
+    setDragging(false)
+  }, [])
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    const steps: Record<string, number> = {
+      ArrowLeft: KEYBOARD_STEP,
+      ArrowRight: -KEYBOARD_STEP,
+      Home: MAXIMUM_WIDTH,
+      End: -MAXIMUM_WIDTH,
+    }
+    const step = steps[event.key]
+
+    if (step === undefined) return
+
+    event.preventDefault()
+    setWidth((current) => clampWidth(current + step))
+  }, [])
+
+  return (
+    <Layer
+      className={sidebar}
+      data-overlay={overlay}
+      style={overlay ? undefined : {width}}
+      zOffset={100}
+    >
+      <Card borderLeft={!overlay} className={frame} height="fill">
+        {!overlay && (
+          <div
+            aria-label="Resize the themer"
+            className={resizeHandle}
+            aria-orientation="vertical"
+            aria-valuemax={MAXIMUM_WIDTH}
+            aria-valuemin={MINIMUM_WIDTH}
+            aria-valuenow={width}
+            data-dragging={dragging}
+            onDoubleClick={() => setWidth(MINIMUM_WIDTH)}
+            onKeyDown={handleKeyDown}
+            onPointerCancel={handlePointerUp}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+            // oxlint-disable-next-line prefer-tag-over-role -- a window splitter is a focusable, draggable separator, which an hr is not
+            role="separator"
+            tabIndex={0}
+          />
+        )}
+        <Box className={content} height="fill" overflow="hidden">
+          <ThemerSidebar />
+        </Box>
+      </Card>
+    </Layer>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ScrollArea.css.ts b/plugins/@sanity/themer/src/tool/ScrollArea.css.ts
new file mode 100644
index 0000000000..44ea16e6d5
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ScrollArea.css.ts
@@ -0,0 +1,6 @@
+import {style} from '@vanilla-extract/css'
+
+/** Always reserves the scrollbar's space, so the content never shifts */
+export const root = style({
+  scrollbarGutter: 'stable',
+})
diff --git a/plugins/@sanity/themer/src/tool/ScrollArea.tsx b/plugins/@sanity/themer/src/tool/ScrollArea.tsx
new file mode 100644
index 0000000000..dd5276ee26
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ScrollArea.tsx
@@ -0,0 +1,97 @@
+import {Box, useTheme_v2} from '@sanity/ui'
+import {createContext, useContext, useEffect, useMemo, useRef, useState} from 'react'
+
+import {root} from './ScrollArea.css'
+
+/** How far the content of a scroll area sits from its edges, in pixels */
+interface ScrollAreaInset {
+  left: number
+  right: number
+  bottom: number
+}
+
+const ScrollAreaInsetContext = createContext<ScrollAreaInset>({left: 0, right: 0, bottom: 0})
+
+/**
+ * The gutter the last scroll area measured. It is the same for every scroll
+ * area (the reserved gutter does not depend on the content), so the next one
+ * starts out with the right padding instead of shifting after its first
+ * measurement — which would also throw off anything scrolling into view as
+ * the content mounts.
+ */
+let lastGutter = 0
+
+/**
+ * The scrolling body of a sidebar flow. It always reserves the scrollbar's
+ * space, so the content does not shift when the list grows or shrinks past
+ * the point where it needs to scroll — and it takes that space out of its
+ * right padding, so the content stays centered rather than hugging the left.
+ * With overlay scrollbars there is no gutter and the padding stays even.
+ *
+ * @internal
+ */
+export function ScrollArea(props: {children: React.ReactNode; padding: number}) {
+  const {children, padding} = props
+  const {space} = useTheme_v2()
+  const ref = useRef<HTMLDivElement | null>(null)
+  const [gutter, setGutter] = useState(() => lastGutter)
+
+  useEffect(() => {
+    const element = ref.current
+
+    if (!element) return undefined
+
+    // The reserved gutter is the part of the box the content cannot use
+    const measure = () => {
+      lastGutter = element.offsetWidth - element.clientWidth
+      setGutter(lastGutter)
+    }
+
+    measure()
+
+    const observer = new ResizeObserver(measure)
+
+    observer.observe(element)
+
+    return () => observer.disconnect()
+  }, [])
+
+  const inset = useMemo<ScrollAreaInset>(
+    () => ({
+      left: space[padding],
+      right: Math.max(0, space[padding] - gutter),
+      bottom: space[padding],
+    }),
+    [gutter, padding, space],
+  )
+
+  return (
+    <Box
+      className={root}
+      flex={1}
+      overflow="auto"
+      padding={padding}
+      ref={ref}
+      style={{paddingRight: inset.right}}
+    >
+      <ScrollAreaInsetContext.Provider value={inset}>{children}</ScrollAreaInsetContext.Provider>
+    </Box>
+  )
+}
+
+/**
+ * Content that runs edge to edge in a scroll area — up to the scrollbar —
+ * instead of sitting inside its padding. It goes last: it runs down to the
+ * bottom edge too.
+ *
+ * @internal
+ */
+export function ScrollAreaBleed(props: {children: React.ReactNode}) {
+  const {left, right, bottom} = useContext(ScrollAreaInsetContext)
+
+  return (
+    <div style={{marginLeft: -left, marginRight: -right, marginBottom: -bottom}}>
+      {props.children}
+    </div>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ThemeCard.css.ts b/plugins/@sanity/themer/src/tool/ThemeCard.css.ts
new file mode 100644
index 0000000000..1410ea6372
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemeCard.css.ts
@@ -0,0 +1,73 @@
+import {style} from '@vanilla-extract/css'
+
+export const root = style({
+  position: 'relative',
+})
+
+/** A bare button, so that the thumbnail and the title can carry the styling */
+export const pickButton = style({
+  'appearance': 'none',
+  'display': 'block',
+  'boxSizing': 'border-box',
+  'width': '100%',
+  'margin': 0,
+  'padding': 0,
+  'border': 0,
+  'background': 'none',
+  'color': 'inherit',
+  'font': 'inherit',
+  'textAlign': 'center',
+  'cursor': 'pointer',
+  ':focus': {
+    outline: 'none',
+  },
+})
+
+/**
+ * Wraps the thumbnail with room for the ring that marks the applied theme —
+ * hovering shows a faint ring, the applied theme the focus ring color, and
+ * keyboard focus an outline. The rings are drawn inside the frame's padding,
+ * so nothing sticks out to be clipped by the scrolling list.
+ */
+export const frame = style({
+  display: 'block',
+  padding: 4,
+  borderRadius: 10,
+  transition: 'box-shadow 100ms',
+  selectors: {
+    [`${pickButton}:hover &`]: {
+      boxShadow: 'inset 0 0 0 2px var(--card-border-color)',
+    },
+    [`${pickButton}[aria-pressed='true'] &`]: {
+      boxShadow: 'inset 0 0 0 2px var(--card-focus-ring-color)',
+    },
+    [`${pickButton}:focus-visible &`]: {
+      outline: '2px solid var(--card-focus-ring-color)',
+      outlineOffset: -2,
+    },
+  },
+})
+
+/**
+ * The actions menu sits on the thumbnail's top right corner, like the actions
+ * of an image input, and only shows on hover, on keyboard focus, and while it
+ * is open — its popover is portaled, so an open menu does not count as focus
+ * within
+ */
+export const menuSlot = style({
+  position: 'absolute',
+  top: 10,
+  right: 10,
+  opacity: 0,
+  transition: 'opacity 100ms',
+  selectors: {
+    [`${root}:hover &, ${root}:focus-within &, &[data-visible='true']`]: {
+      opacity: 1,
+    },
+  },
+})
+
+/** The dark card behind the menu button sizes to the button, not the slot */
+export const menuCard = style({
+  display: 'inline-block',
+})
diff --git a/plugins/@sanity/themer/src/tool/ThemeCard.tsx b/plugins/@sanity/themer/src/tool/ThemeCard.tsx
new file mode 100644
index 0000000000..147360ac45
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemeCard.tsx
@@ -0,0 +1,180 @@
+import {ArrowDownIcon} from '@sanity/icons/ArrowDown'
+import {ArrowUpIcon} from '@sanity/icons/ArrowUp'
+import {CopyIcon} from '@sanity/icons/Copy'
+import {EditIcon} from '@sanity/icons/Edit'
+import {EllipsisHorizontalIcon} from '@sanity/icons/EllipsisHorizontal'
+import {ShareIcon} from '@sanity/icons/Share'
+import {TrashIcon} from '@sanity/icons/Trash'
+import {Box, Button, Card, Text, useRootTheme} from '@sanity/ui'
+import {Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui/menu'
+import {Tooltip} from '@sanity/ui/tooltip'
+import {Reorder, useDragControls} from 'motion/react'
+import {useRef, useState} from 'react'
+import scrollIntoView from 'scroll-into-view-if-needed'
+
+import {useThemer} from './context'
+import {displayTitle, type ThemerTheme} from './themes'
+import {ThemeThumbnail} from './ThemeThumbnail'
+import {useThemeCodes} from './useThemeCodes'
+
+import {frame, menuCard, menuSlot, pickButton, root} from './ThemeCard.css'
+
+/**
+ * Scrolls the applied theme's card into view when it is not already, as a
+ * ref: the list scrolls to it as it mounts — coming back from the editor or
+ * the removed themes — and when another theme gets applied
+ */
+function scrollRefIntoViewIfNeeded(node: HTMLElement | null) {
+  if (node) scrollIntoView(node, {block: 'nearest', scrollMode: 'if-needed'})
+}
+
+/**
+ * One theme in the list: the floating preview with the title below it, like
+ * an appearance option in macOS System Settings. Clicking it applies the
+ * theme to the whole Studio, dragging it moves the theme to another place in
+ * the list; its menu holds the move, edit, duplicate and remove flows that
+ * apply to the theme.
+ *
+ * @internal
+ */
+export function ThemeCard(props: {active: boolean; theme: ThemerTheme}) {
+  const {active, theme} = props
+  const {themes, send} = useThemer()
+  const {copyTheme} = useThemeCodes()
+  const {scheme} = useRootTheme()
+  const [menuOpen, setMenuOpen] = useState(false)
+  const dragControls = useDragControls()
+  // Letting go of a drag also clicks the card, and that click must not pick
+  const dragged = useRef(false)
+  const title = displayTitle(theme.title)
+  const index = themes.findIndex((candidate) => candidate.slug === theme.slug)
+
+  const moveTo = (to: number) => {
+    const order = themes.map((candidate) => candidate.slug)
+
+    order.splice(to, 0, ...order.splice(index, 1))
+    send({type: 'theme.reorder', order})
+  }
+
+  return (
+    <Reorder.Item
+      as="div"
+      className={root}
+      dragControls={dragControls}
+      dragListener={false}
+      onDragEnd={() => {
+        // The click lands before the next frame
+        requestAnimationFrame(() => {
+          dragged.current = false
+        })
+      }}
+      onDragStart={() => {
+        dragged.current = true
+      }}
+      ref={active ? scrollRefIntoViewIfNeeded : undefined}
+      value={theme.slug}
+      whileDrag={{scale: 1.04}}
+    >
+      <button
+        aria-pressed={active}
+        className={pickButton}
+        onClick={() => {
+          if (!dragged.current) send({type: 'theme.pick', slug: theme.slug})
+        }}
+        onPointerDown={(event) => {
+          // A mouse or pen drags the card off the button; a finger scrolls the
+          // list instead, and moves themes from the menu
+          if (event.pointerType !== 'touch') dragControls.start(event)
+        }}
+        type="button"
+      >
+        <span className={frame}>
+          <ThemeThumbnail options={theme.options} />
+        </span>
+        <Box as="span" display="block" paddingTop={2} paddingX={2}>
+          <Text
+            align="center"
+            as="span"
+            size={1}
+            textOverflow="ellipsis"
+            weight={active ? 'medium' : 'regular'}
+          >
+            {title}
+          </Text>
+        </Box>
+      </button>
+
+      {/* The tooltip wraps a card rather than the button: the menu button
+          clones its button to wire it up, which a tooltip in between would
+          swallow. The card keeps the button dark, as it sits on the dark
+          half of the thumbnail, while the menu opens in the sidebar's scheme */}
+      <div className={menuSlot} data-visible={menuOpen}>
+        <Tooltip animate content={<Text size={1}>Show more</Text>} placement="bottom" portal>
+          <Card className={menuCard} radius={2} scheme="dark">
+            <MenuButton
+              button={
+                <Button
+                  aria-label={`Show more for ${title}`}
+                  fontSize={1}
+                  icon={EllipsisHorizontalIcon}
+                  mode="ghost"
+                  padding={1}
+                  radius={2}
+                />
+              }
+              id={`themer-theme-${theme.slug}`}
+              menu={
+                <Menu>
+                  <MenuItem
+                    disabled={index <= 0}
+                    icon={ArrowUpIcon}
+                    onClick={() => moveTo(index - 1)}
+                    text="Move up"
+                  />
+                  <MenuItem
+                    disabled={index >= themes.length - 1}
+                    icon={ArrowDownIcon}
+                    onClick={() => moveTo(index + 1)}
+                    text="Move down"
+                  />
+                  <MenuDivider />
+                  {theme.source === 'custom' && (
+                    <MenuItem
+                      icon={EditIcon}
+                      onClick={() => send({type: 'theme.edit', slug: theme.slug})}
+                      text="Edit"
+                    />
+                  )}
+                  <MenuItem
+                    icon={CopyIcon}
+                    onClick={() => send({type: 'theme.duplicate', slug: theme.slug})}
+                    text={theme.source === 'custom' ? 'Duplicate' : 'Duplicate to edit'}
+                  />
+                  <MenuItem
+                    icon={ShareIcon}
+                    onClick={() => void copyTheme(theme)}
+                    text="Copy to share"
+                  />
+                  {theme.source !== 'config' && (
+                    <>
+                      <MenuDivider />
+                      <MenuItem
+                        icon={TrashIcon}
+                        onClick={() => send({type: 'theme.remove', slug: theme.slug})}
+                        text="Remove"
+                        tone="critical"
+                      />
+                    </>
+                  )}
+                </Menu>
+              }
+              onClose={() => setMenuOpen(false)}
+              onOpen={() => setMenuOpen(true)}
+              popover={{animate: true, placement: 'bottom-end', portal: true, scheme}}
+            />
+          </Card>
+        </Tooltip>
+      </div>
+    </Reorder.Item>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ThemeEditor.css.ts b/plugins/@sanity/themer/src/tool/ThemeEditor.css.ts
new file mode 100644
index 0000000000..b4a5de442c
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemeEditor.css.ts
@@ -0,0 +1,40 @@
+import {style} from '@vanilla-extract/css'
+
+/** A native color input, trimmed down to its swatch */
+export const swatch = style({
+  boxSizing: 'border-box',
+  flex: 'none',
+  width: 33,
+  height: 33,
+  padding: 0,
+  border: '1px solid var(--card-border-color)',
+  borderRadius: 4,
+  background: 'none',
+  cursor: 'pointer',
+  selectors: {
+    '&::-webkit-color-swatch-wrapper': {
+      padding: 0,
+    },
+    '&::-webkit-color-swatch': {
+      border: 'none',
+      borderRadius: 3,
+    },
+    '&::-moz-color-swatch': {
+      border: 'none',
+      borderRadius: 3,
+    },
+  },
+})
+
+/** A native range input, themed through `accent-color` */
+export const range = style({
+  display: 'block',
+  width: '100%',
+  margin: 0,
+  accentColor: 'var(--card-focus-ring-color)',
+})
+
+/** Lets the color row's text shrink and truncate instead of widening the row */
+export const colorRowText = style({
+  minWidth: 0,
+})
diff --git a/plugins/@sanity/themer/src/tool/ThemeEditor.tsx b/plugins/@sanity/themer/src/tool/ThemeEditor.tsx
new file mode 100644
index 0000000000..84acbf29f3
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemeEditor.tsx
@@ -0,0 +1,406 @@
+import {ResetIcon} from '@sanity/icons/Reset'
+import {TrashIcon} from '@sanity/icons/Trash'
+import {Badge, Box, Button, Card, Flex, Stack, Text, TextInput} from '@sanity/ui'
+import {type ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {useMemo} from 'react'
+import {useColorSchemeValue} from 'sanity'
+
+import {buildPalette, type GeneratedColorPalette} from '../theme/buildPalette'
+import {
+  type BuildThemeOptions,
+  type ResolvedSchemeOptions,
+  resolveThemeOptions,
+  SCHEMES,
+  type SchemeThemeOptions,
+} from '../theme/options'
+import {useThemer} from './context'
+import {
+  applyImagePalette,
+  currentImageVariant,
+  type ImagePalette,
+  type ImagePaletteVariant,
+  pickLuckyVariant,
+} from './imagePalette'
+import {ImagePaletteSection} from './ImagePaletteSection'
+import {ScrollArea, ScrollAreaBleed} from './ScrollArea'
+import {ThemeThumbnail} from './ThemeThumbnail'
+import {TooltipButton} from './TooltipButton'
+
+import {colorRowText, range, swatch} from './ThemeEditor.css'
+
+const SCHEME_TITLES: Record<ThemeColorSchemeKey, string> = {
+  dark: 'Dark mode',
+  light: 'Light mode',
+}
+
+/**
+ * Where the split preview shows a scheme: the Studio's own scheme stays next
+ * to the sidebar (or at the bottom, stacked on small screens), the other one
+ * takes the far side
+ */
+function splitHint(own: boolean, mobile: boolean): string {
+  if (mobile) return own ? 'Shown at the bottom' : 'Shown at the top'
+
+  return own ? 'Shown on the right, next to the themer' : 'Shown on the left'
+}
+
+const SCHEME_OPTION_KEYS: Array<keyof SchemeThemeOptions> = [
+  'accent',
+  'text',
+  'background',
+  'contrast',
+]
+
+/**
+ * `<input type="color">` paints the color into a shadow-DOM swatch that brings
+ * its own border and padding, which then sits inside ours as a second border.
+ * Stripping that chrome leaves the themed border as the only one.
+ */
+/**
+ * The flow for editing one of the user's own themes: its title, a live
+ * preview, and a card per color scheme with the accent/text/background
+ * pickers and the contrast slider of that scheme. Every change applies to the
+ * whole Studio right away — in the scheme the Studio is showing, or in both
+ * side by side in the split preview.
+ *
+ * @internal
+ */
+export function ThemeEditor(props: {focusTitle: boolean; slug: string}) {
+  const {focusTitle, slug} = props
+  const {themes, images, split, mobile, send} = useThemer()
+  const theme = themes.find((candidate) => candidate.slug === slug && candidate.source === 'custom')
+
+  // The machine only enters the edit flow for a listed custom theme, and
+  // leaves it as soon as the theme is removed or deleted
+  if (!theme) return null
+
+  const applyVariant = (variant: ImagePaletteVariant | null) => {
+    if (!theme.palette || variant === null) return
+
+    send({
+      type: 'theme.update',
+      slug,
+      options: applyImagePalette(theme.options, theme.palette, variant),
+    })
+  }
+
+  return (
+    <ThemeEditorForm
+      focusTitle={focusTitle}
+      imageUrl={images[slug]}
+      onDone={() => send({type: 'flow.list'})}
+      onLucky={() => {
+        if (!theme.palette) return
+
+        applyVariant(
+          pickLuckyVariant(theme.palette, {
+            exclude: currentImageVariant(theme.options, theme.palette),
+          }),
+        )
+      }}
+      onOptionsChange={(options) => send({type: 'theme.update', slug, options})}
+      onPalette={(palette, file) =>
+        send({
+          type: 'theme.update',
+          slug,
+          options: applyImagePalette(theme.options, palette),
+          palette,
+          imageUrl: URL.createObjectURL(file),
+        })
+      }
+      onRemove={() => send({type: 'theme.remove', slug})}
+      onTitleChange={(title) => send({type: 'theme.update', slug, title})}
+      onVariant={applyVariant}
+      options={theme.options}
+      palette={theme.palette}
+      split={split}
+      mobile={mobile}
+      title={theme.title}
+    />
+  )
+}
+
+// Split from `ThemeEditor` so that the derived values below can be hooks
+// while the editor bails out early when the theme is gone
+function ThemeEditorForm(props: {
+  focusTitle: boolean
+  imageUrl?: string
+  onDone: () => void
+  onLucky: () => void
+  onOptionsChange: (options: BuildThemeOptions) => void
+  onPalette: (palette: ImagePalette, file: File) => void
+  onRemove: () => void
+  onTitleChange: (title: string) => void
+  onVariant: (variant: ImagePaletteVariant) => void
+  options: BuildThemeOptions
+  palette?: ImagePalette
+  /** Whether the Studio shows in light and dark side by side */
+  split: boolean
+  /** Whether the split preview stacks, on a small screen */
+  mobile: boolean
+  title: string
+}) {
+  const {
+    focusTitle,
+    imageUrl,
+    onDone,
+    onLucky,
+    onOptionsChange,
+    onPalette,
+    onRemove,
+    onTitleChange,
+    onVariant,
+    options,
+    palette,
+    split,
+    mobile,
+    title,
+  } = props
+  // The scheme the Studio is showing, with the appearance setting resolved
+  const studioScheme = useColorSchemeValue()
+  const resolved = useMemo(() => resolveThemeOptions(options), [options])
+  const palettes = useMemo(() => buildPalette(options), [options])
+
+  const patchScheme = (scheme: ThemeColorSchemeKey, changes: Partial<SchemeThemeOptions>) => {
+    const values: SchemeThemeOptions = {...options[scheme], ...changes}
+
+    // Clearing an option means falling back to its default, which is its absence
+    for (const key of SCHEME_OPTION_KEYS) {
+      if (values[key] === undefined) delete values[key]
+    }
+
+    const next: BuildThemeOptions = {...options}
+
+    if (Object.keys(values).length === 0) {
+      delete next[scheme]
+    } else {
+      next[scheme] = values
+    }
+
+    onOptionsChange(next)
+  }
+
+  return (
+    <>
+      <ScrollArea padding={3}>
+        <Stack gap={4}>
+          <ThemeThumbnail options={options} />
+
+          <Stack gap={2}>
+            <Text size={1} weight="medium">
+              Title
+            </Text>
+            <TextInput
+              autoFocus={focusTitle}
+              fontSize={1}
+              onChange={(event) => onTitleChange(event.currentTarget.value)}
+              onFocus={focusTitle ? (event) => event.currentTarget.select() : undefined}
+              padding={2}
+              placeholder="Untitled theme"
+              value={title}
+            />
+          </Stack>
+
+          <ImagePaletteSection
+            imageUrl={imageUrl}
+            onLucky={onLucky}
+            onPalette={onPalette}
+            onVariant={onVariant}
+            options={options}
+            palette={palette}
+          />
+
+          <ScrollAreaBleed>
+            {SCHEMES.map((scheme) => (
+              <SchemeCard
+                active={split || scheme === studioScheme}
+                key={scheme}
+                onChange={(changes) => patchScheme(scheme, changes)}
+                options={options[scheme] ?? {}}
+                palette={palettes[scheme]}
+                resolved={resolved[scheme]}
+                scheme={scheme}
+                split={split}
+                splitHint={splitHint(scheme === studioScheme, mobile)}
+              />
+            ))}
+          </ScrollAreaBleed>
+        </Stack>
+      </ScrollArea>
+
+      <Card borderTop padding={3}>
+        <Flex gap={2}>
+          <TooltipButton
+            icon={TrashIcon}
+            mode="ghost"
+            onClick={onRemove}
+            text="Remove"
+            tone="critical"
+            tooltip="Remove the theme — it can be restored until it is deleted"
+          />
+          <Box flex={1} />
+          <Button mode="ghost" onClick={onDone} padding={2} text="Done" />
+        </Flex>
+      </Card>
+    </>
+  )
+}
+
+/**
+ * The colors of one scheme. The cards span the sidebar edge to edge, one
+ * after the other with a border between them, in the sidebar's own scheme —
+ * the swatches show the colors they edit. The scheme the Studio is showing is
+ * marked as active: its changes show up in the Studio right away, the other
+ * scheme's only once the appearance setting switches to it — or both are
+ * active, in the split preview.
+ */
+function SchemeCard(props: {
+  active: boolean
+  onChange: (changes: Partial<SchemeThemeOptions>) => void
+  options: SchemeThemeOptions
+  palette: GeneratedColorPalette
+  resolved: ResolvedSchemeOptions
+  scheme: ThemeColorSchemeKey
+  split: boolean
+  /** Where the split preview shows this scheme */
+  splitHint: string
+}) {
+  const {active, onChange, options, palette, resolved, scheme, split, splitHint} = props
+  const name = SCHEME_TITLES[scheme]
+
+  return (
+    <Card borderTop padding={3}>
+      <Stack gap={4}>
+        <Stack gap={2}>
+          <Flex align="center" gap={2}>
+            <Box flex={1}>
+              <Text size={1} weight="medium">
+                {name}
+              </Text>
+            </Box>
+            {active && (
+              <Badge fontSize={0} tone="primary">
+                Active
+              </Badge>
+            )}
+          </Flex>
+          <Text muted size={0}>
+            {split
+              ? splitHint
+              : active
+                ? 'Shown in the Studio right now'
+                : `Shown once the Studio appearance is ${scheme}`}
+          </Text>
+        </Stack>
+
+        <ColorRow
+          auto={options.accent === undefined}
+          autoLabel="default"
+          label={`${name} accent`}
+          onChange={(accent) => onChange({accent})}
+          onClear={() => onChange({accent: undefined})}
+          title="Accent"
+          value={resolved.accent}
+        />
+        <ColorRow
+          auto={options.text === undefined}
+          label={`${name} text`}
+          onChange={(text) => onChange({text})}
+          onClear={() => onChange({text: undefined})}
+          title="Text"
+          value={resolved.text}
+        />
+        <ColorRow
+          adjusted={scheme === 'dark' ? palette.black : palette.white}
+          auto={options.background === undefined}
+          label={`${name} background`}
+          onChange={(background) => onChange({background})}
+          onClear={() => onChange({background: undefined})}
+          title="Background"
+          value={resolved.background}
+        />
+
+        <Stack gap={3}>
+          <Flex align="center" gap={2}>
+            <Stack flex={1} gap={2}>
+              <Text size={1}>Contrast</Text>
+              <Text muted size={0}>
+                {resolved.contrast}
+                {options.contrast === undefined ? ' · auto' : ''}
+              </Text>
+            </Stack>
+            {options.contrast !== undefined && (
+              <TooltipButton
+                icon={ResetIcon}
+                mode="bleed"
+                onClick={() => onChange({contrast: undefined})}
+                padding={2}
+                tooltip="Reset to auto"
+              />
+            )}
+          </Flex>
+          <input
+            aria-label={`${name} contrast`}
+            className={range}
+            max={100}
+            min={15}
+            onChange={(event) => onChange({contrast: Number(event.currentTarget.value)})}
+            step={1}
+            type="range"
+            value={resolved.contrast}
+          />
+          <Text muted size={0}>
+            100 keeps text and borders neutral — lower values blend in the accent
+          </Text>
+        </Stack>
+      </Stack>
+    </Card>
+  )
+}
+
+/** One color of a scheme: a swatch with its value and an optional reset button */
+function ColorRow(props: {
+  /** The color the generator actually applied, when it may differ from the input */
+  adjusted?: string
+  /** Whether the value is derived or a default rather than explicitly set */
+  auto?: boolean
+  /** What the value is when it is not set: derived (`auto`) or the stock one (`default`) */
+  autoLabel?: 'auto' | 'default'
+  /** The accessible name of the picker */
+  label: string
+  onChange: (value: string) => void
+  onClear?: () => void
+  title: string
+  value: string
+}) {
+  const {adjusted, auto, autoLabel = 'auto', label, onChange, onClear, title, value} = props
+
+  return (
+    <Flex align="center" gap={2}>
+      <input
+        aria-label={label}
+        className={swatch}
+        onChange={(event) => onChange(event.currentTarget.value)}
+        type="color"
+        value={value}
+      />
+      <Stack className={colorRowText} flex={1} gap={2}>
+        <Text size={1}>{title}</Text>
+        <Text muted size={0} textOverflow="ellipsis">
+          {value}
+          {adjusted !== undefined && adjusted !== value ? ` → ${adjusted}` : ''}
+          {auto ? ` · ${autoLabel}` : ''}
+        </Text>
+      </Stack>
+      {onClear && !auto && (
+        <TooltipButton
+          icon={ResetIcon}
+          mode="bleed"
+          onClick={onClear}
+          padding={2}
+          tooltip={`Reset to ${autoLabel}`}
+        />
+      )}
+    </Flex>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ThemeList.css.ts b/plugins/@sanity/themer/src/tool/ThemeList.css.ts
new file mode 100644
index 0000000000..889faa3039
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemeList.css.ts
@@ -0,0 +1,39 @@
+import {style} from '@vanilla-extract/css'
+
+import {MAXIMUM_WIDTH, MINIMUM_WIDTH} from './sidebarWidth'
+
+import {sidebarContent} from './ResizableSidebar.css'
+
+const CARD_GAP = 16
+
+/**
+ * The theme cards flow into two columns once the sidebar has been dragged a
+ * third of the way from its narrowest to its widest. The breakpoints are
+ * container queries on the sidebar's content (`ResizableSidebar`), which is
+ * as wide as the sidebar itself.
+ */
+const TWO_COLUMNS_FROM = MINIMUM_WIDTH + (MAXIMUM_WIDTH - MINIMUM_WIDTH) * 0.3
+
+/** Three columns on the wider small screens the sidebar covers, where two would be huge */
+const THREE_COLUMNS_FROM = 480
+
+/**
+ * The columns share the width equally whatever the titles: a plain `1fr` may
+ * not shrink below a card's min-content width, and a card's title does not
+ * wrap, so one long title would widen its column past the sidebar
+ */
+const COLUMN = 'minmax(0, 1fr)'
+
+export const cardGrid = style({
+  'display': 'grid',
+  'gridTemplateColumns': COLUMN,
+  'gap': CARD_GAP,
+  '@container': {
+    [`${sidebarContent} (min-width: ${TWO_COLUMNS_FROM}px)`]: {
+      gridTemplateColumns: `repeat(2, ${COLUMN})`,
+    },
+    [`${sidebarContent} (min-width: ${THREE_COLUMNS_FROM}px)`]: {
+      gridTemplateColumns: `repeat(3, ${COLUMN})`,
+    },
+  },
+})
diff --git a/plugins/@sanity/themer/src/tool/ThemeList.tsx b/plugins/@sanity/themer/src/tool/ThemeList.tsx
new file mode 100644
index 0000000000..eae94f5eed
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemeList.tsx
@@ -0,0 +1,116 @@
+import {AddIcon} from '@sanity/icons/Add'
+import {ClipboardIcon} from '@sanity/icons/Clipboard'
+import {RestoreIcon} from '@sanity/icons/Restore'
+import {Box, Button, Card, Flex, Stack} from '@sanity/ui'
+import {MotionConfig, Reorder} from 'motion/react'
+import {useState} from 'react'
+
+import {useThemer} from './context'
+import {ImageFileButton} from './ImageFileButton'
+import {optionsFromImagePalette, titleFromFileName} from './imagePalette'
+import {PasteThemeDialog} from './PasteThemeDialog'
+import {ScrollArea} from './ScrollArea'
+import {ThemeCard} from './ThemeCard'
+import {TooltipButton} from './TooltipButton'
+import {useImagePalette} from './useImagePalette'
+import {usePasteThemeCodes, useThemeCodes} from './useThemeCodes'
+
+import {cardGrid} from './ThemeList.css'
+
+/**
+ * One column at the sidebar's default width; wider sidebars — and the
+ * overlay on small screens — fit more cards per row
+ */
+/**
+ * The flow for picking a theme: a grid of theme cards — the configured theme,
+ * the presets and the user's own themes — that drag into the order the user
+ * wants, with the entry points to the add and restore flows below. A theme
+ * code someone shared pastes right into the list, or through the paste button.
+ *
+ * @internal
+ */
+export function ThemeList() {
+  const {themes, removed, active, send} = useThemer()
+  const {addThemeFromClipboard} = useThemeCodes()
+  const [pasting, setPasting] = useState(false)
+
+  usePasteThemeCodes()
+
+  const {busy, pickImage} = useImagePalette((palette, file) =>
+    send({
+      type: 'theme.add',
+      title: titleFromFileName(file.name),
+      options: optionsFromImagePalette(palette),
+      palette,
+      imageUrl: URL.createObjectURL(file),
+    }),
+  )
+
+  return (
+    <>
+      <ScrollArea padding={3}>
+        <Stack gap={4}>
+          {/* The group tells a column from a grid by measuring the cards, and
+              lets go of the layout animations for users who prefer reduced motion */}
+          <MotionConfig reducedMotion="user">
+            <Reorder.Group
+              as="div"
+              className={cardGrid}
+              onReorder={(order: string[]) => send({type: 'theme.reorder', order})}
+              values={themes.map((theme) => theme.slug)}
+            >
+              {themes.map((theme) => (
+                <ThemeCard active={theme.slug === active.slug} key={theme.slug} theme={theme} />
+              ))}
+            </Reorder.Group>
+          </MotionConfig>
+          {/* Trails the list rather than sitting in the footer, so the footer
+              does not shift when the first theme gets removed */}
+          {removed.length > 0 && (
+            <Button
+              gap={2}
+              icon={RestoreIcon}
+              mode="bleed"
+              onClick={() => send({type: 'flow.removed'})}
+              padding={2}
+              text={`Show removed (${removed.length})`}
+              width="fill"
+            />
+          )}
+        </Stack>
+      </ScrollArea>
+
+      <Card borderTop padding={3}>
+        <Flex gap={2}>
+          <Box flex={1}>
+            <TooltipButton
+              icon={AddIcon}
+              mode="ghost"
+              onClick={() => send({type: 'theme.add'})}
+              text="Add theme"
+              tooltip="Add a theme based on the applied one"
+              width="fill"
+            />
+          </Box>
+          <ImageFileButton
+            loading={busy}
+            mode="ghost"
+            onFile={pickImage}
+            tooltip="Add a theme from the colors of an image"
+          />
+          <TooltipButton
+            icon={ClipboardIcon}
+            mode="ghost"
+            onClick={async () => {
+              // Straight from the clipboard where the browser allows; by hand otherwise
+              if ((await addThemeFromClipboard()) !== 'added') setPasting(true)
+            }}
+            tooltip="Add a theme from a code someone shared"
+          />
+        </Flex>
+      </Card>
+
+      {pasting && <PasteThemeDialog onClose={() => setPasting(false)} />}
+    </>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ThemePreview.css.ts b/plugins/@sanity/themer/src/tool/ThemePreview.css.ts
new file mode 100644
index 0000000000..b5fab79459
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemePreview.css.ts
@@ -0,0 +1,165 @@
+import {createVar, style, styleVariants} from '@vanilla-extract/css'
+
+/**
+ * The dark scheme covers the right side of the preview behind a diagonal cut,
+ * like the "Auto" appearance preview in macOS System Settings shows both
+ * schemes at once.
+ */
+const DARK_CLIP_PATH = 'polygon(58% 0, 100% 0, 100% 100%, 42% 100%)'
+
+/** The thickness of a line of text — bold enough to survive a half-size preview */
+const LINE = 4
+
+/**
+ * The colors a mockup paints with — only the ones the theme options change —
+ * assigned per color scheme from the theme it previews
+ */
+export const colors = {
+  bg: createVar(),
+  fg: createVar(),
+  mutedFg: createVar(),
+  border: createVar(),
+  accent: createVar(),
+  avatar: createVar(),
+  selectedBg: createVar(),
+  selectedFg: createVar(),
+  inputBg: createVar(),
+  inputBorder: createVar(),
+}
+
+export const root = style({
+  position: 'relative',
+  aspectRatio: '16 / 9',
+  overflow: 'hidden',
+})
+
+const studioBase = style({
+  position: 'absolute',
+  inset: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  background: colors.bg,
+})
+
+export const studio = styleVariants({
+  light: [studioBase],
+  dark: [studioBase, {clipPath: DARK_CLIP_PATH}],
+})
+
+export const navbar = style({
+  flex: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 5,
+  height: '18%',
+  padding: '0 5%',
+  borderBottom: `1px solid ${colors.border}`,
+})
+
+export const logo = style({
+  flex: 'none',
+  width: 8,
+  height: 8,
+  borderRadius: 2,
+  background: colors.accent,
+})
+
+export const spacer = style({
+  flex: 1,
+})
+
+export const avatar = style({
+  flex: 'none',
+  width: 8,
+  height: 8,
+  borderRadius: '50%',
+  background: colors.avatar,
+})
+
+export const body = style({
+  flex: 1,
+  display: 'flex',
+  minHeight: 0,
+})
+
+export const list = style({
+  flex: 'none',
+  display: 'flex',
+  flexDirection: 'column',
+  width: '36%',
+  borderRight: `1px solid ${colors.border}`,
+})
+
+export const listRow = style({
+  flex: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  height: '18%',
+  padding: '0 9%',
+  selectors: {
+    "&[data-selected='true']": {
+      background: colors.selectedBg,
+    },
+  },
+})
+
+export const pane = style({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  minWidth: 0,
+})
+
+export const form = style({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 7,
+  padding: '9% 8% 0',
+  minHeight: 0,
+  overflow: 'hidden',
+})
+
+export const field = style({
+  flex: 'none',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 3,
+})
+
+export const input = style({
+  height: 12,
+  borderRadius: 3,
+  background: colors.inputBg,
+  boxShadow: `inset 0 0 0 1px ${colors.inputBorder}`,
+})
+
+export const footer = style({
+  flex: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  height: '20%',
+  padding: '0 8%',
+  borderTop: `1px solid ${colors.border}`,
+})
+
+export const button = style({
+  width: '32%',
+  height: '50%',
+  borderRadius: 3,
+  background: colors.accent,
+})
+
+const lineBase = style({
+  flex: 'none',
+  height: LINE,
+  borderRadius: LINE / 2,
+})
+
+/** A line of text, in one of the text colors — its width is set inline */
+export const line = styleVariants({
+  fg: [lineBase, {background: colors.fg}],
+  muted: [lineBase, {background: colors.mutedFg}],
+  selected: [lineBase, {background: colors.selectedFg}],
+})
diff --git a/plugins/@sanity/themer/src/tool/ThemePreview.tsx b/plugins/@sanity/themer/src/tool/ThemePreview.tsx
new file mode 100644
index 0000000000..db972d13c1
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemePreview.tsx
@@ -0,0 +1,121 @@
+import {ThemeProvider, useTheme_v2} from '@sanity/ui'
+import {type ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
+import {useMemo} from 'react'
+
+import {buildTheme} from '../theme/buildTheme'
+import type {BuildThemeOptions} from '../theme/options'
+
+import {
+  avatar,
+  body,
+  button,
+  colors,
+  field,
+  footer,
+  form,
+  input,
+  line,
+  list,
+  listRow,
+  logo,
+  navbar,
+  pane,
+  root,
+  spacer,
+  studio,
+} from './ThemePreview.css'
+
+/** The document rows in the list pane — the widths of their title lines */
+const LIST_ROWS = ['62%', '46%', '70%', '52%']
+
+/** The fields in the document form — the widths of their labels */
+const FIELDS = ['32%', '24%']
+
+/**
+ * A tiny, lo-fi mockup of a Studio in the given theme — the navbar over the
+ * structure tool with a list of documents on the left and a document form on
+ * the right — in both color schemes at once: the light scheme on the left and
+ * the dark scheme on the right, split diagonally. It only paints colors the
+ * theme options change (backgrounds, text, borders, the accent) so that a
+ * glance shows what the theme does to the Studio — with few and bold enough
+ * elements to still read when scaled down to a thumbnail.
+ *
+ * @internal
+ */
+export function ThemePreview(props: {options: BuildThemeOptions}) {
+  const {options} = props
+  const theme = useMemo(() => buildTheme(options), [options])
+
+  return (
+    <div aria-hidden className={root}>
+      <ThemeProvider scheme="light" theme={theme} tone="default">
+        <MockStudio scheme="light" />
+      </ThemeProvider>
+      <ThemeProvider scheme="dark" theme={theme} tone="default">
+        <MockStudio scheme="dark" />
+      </ThemeProvider>
+    </div>
+  )
+}
+
+function MockStudio(props: {scheme: ThemeColorSchemeKey}) {
+  const {scheme} = props
+  const {color} = useTheme_v2()
+  const selected = color.selectable.default.selected
+  const inputColor = color.input.default.enabled
+
+  return (
+    <div
+      className={studio[scheme]}
+      style={assignInlineVars({
+        [colors.bg]: color.bg,
+        [colors.fg]: color.fg,
+        [colors.mutedFg]: color.muted.fg,
+        [colors.border]: color.border,
+        [colors.accent]: color.button.default.primary.enabled.bg,
+        [colors.avatar]: color.avatar.blue.bg,
+        [colors.selectedBg]: selected.bg,
+        [colors.selectedFg]: selected.fg,
+        [colors.inputBg]: inputColor.bg,
+        [colors.inputBorder]: inputColor.border,
+      })}
+    >
+      <div className={navbar}>
+        <div className={logo} />
+        <div className={line.fg} style={{width: '22%'}} />
+        <div className={spacer} />
+        <div className={avatar} />
+      </div>
+
+      <div className={body}>
+        <div className={list}>
+          {LIST_ROWS.map((width, index) => {
+            const isSelected = index === 1
+
+            return (
+              <div className={listRow} data-selected={isSelected} key={width}>
+                <div className={isSelected ? line.selected : line.muted} style={{width}} />
+              </div>
+            )
+          })}
+        </div>
+
+        <div className={pane}>
+          <div className={form}>
+            <div className={line.fg} style={{width: '45%'}} />
+            {FIELDS.map((width) => (
+              <div className={field} key={width}>
+                <div className={line.muted} style={{width}} />
+                <div className={input} />
+              </div>
+            ))}
+          </div>
+          <div className={footer}>
+            <div className={button} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ThemeSnippetDialog.tsx b/plugins/@sanity/themer/src/tool/ThemeSnippetDialog.tsx
new file mode 100644
index 0000000000..90801333b8
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemeSnippetDialog.tsx
@@ -0,0 +1,75 @@
+import {ClipboardIcon} from '@sanity/icons/Clipboard'
+import {Box, Button, Card, Dialog, Flex, Stack, Text} from '@sanity/ui'
+import {Code} from '@sanity/ui/code'
+import {useToast} from '@sanity/ui/toast'
+import {registerLanguage} from 'react-refractor'
+import typescript from 'refractor/typescript'
+
+import {createThemeSnippet} from './snippet'
+import {displayTitle, type ThemerTheme} from './themes'
+
+// `Code` only highlights languages the surrounding app has registered with
+// react-refractor, and the Studio registers its own set from an async import
+// during startup — a race this dialog keeps losing. Registering the one
+// language the snippet needs keeps it highlighted from the first render.
+registerLanguage(typescript)
+
+/**
+ * Shows the `buildTheme` snippet that makes a theme permanent, in a dialog so
+ * that it does not take up sidebar space or make the sidebar scroll as the
+ * snippet changes shape with the theme.
+ *
+ * @internal
+ */
+export function ThemeSnippetDialog(props: {onClose: () => void; theme: ThemerTheme}) {
+  const {onClose, theme} = props
+  const toast = useToast()
+  const snippet = createThemeSnippet(theme.options)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(snippet)
+      toast.push({status: 'success', title: 'Copied the theme to the clipboard'})
+    } catch {
+      toast.push({status: 'error', title: 'Could not copy the theme'})
+    }
+  }
+
+  return (
+    <Dialog
+      animate
+      footer={
+        <Flex gap={2} justify="flex-end" padding={3}>
+          <Button
+            gap={2}
+            icon={ClipboardIcon}
+            mode="ghost"
+            onClick={() => void handleCopy()}
+            padding={2}
+            text="Copy"
+          />
+        </Flex>
+      }
+      header="Add to your config"
+      id="themer-snippet"
+      onClickOutside={onClose}
+      onClose={onClose}
+      width={1}
+    >
+      <Box padding={4}>
+        <Stack gap={4}>
+          <Text muted size={1}>
+            Export this from <code>sanity.config.ts</code> and pass it as the <code>theme</code> of{' '}
+            <code>defineConfig</code> to make “{displayTitle(theme.title)}” the Studio theme without
+            this tool.
+          </Text>
+          <Card border overflow="auto" padding={3} radius={2} tone="transparent">
+            <Code language="ts" size={1}>
+              {snippet}
+            </Code>
+          </Card>
+        </Stack>
+      </Box>
+    </Dialog>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ThemeThumbnail.tsx b/plugins/@sanity/themer/src/tool/ThemeThumbnail.tsx
new file mode 100644
index 0000000000..7e4a672ac8
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemeThumbnail.tsx
@@ -0,0 +1,18 @@
+import {Card} from '@sanity/ui'
+
+import type {BuildThemeOptions} from '../theme/options'
+import {ThemePreview} from './ThemePreview'
+
+/**
+ * The floating preview card of a theme: the lo-fi studio mockup on a raised,
+ * rounded card, like the appearance previews in macOS System Settings.
+ *
+ * @internal
+ */
+export function ThemeThumbnail(props: {options: BuildThemeOptions}) {
+  return (
+    <Card overflow="hidden" radius={3} shadow={1}>
+      <ThemePreview options={props.options} />
+    </Card>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ThemerLayout.css.ts b/plugins/@sanity/themer/src/tool/ThemerLayout.css.ts
new file mode 100644
index 0000000000..9b3aa0ef52
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemerLayout.css.ts
@@ -0,0 +1,193 @@
+import {
+  createViewTransition,
+  globalStyle,
+  keyframes,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css'
+
+import {sidebarTransition} from './ResizableSidebar.css'
+
+/**
+ * The view transition classes of the split preview — what React puts in
+ * `view-transition-class`, which the pseudo-element rules below select on.
+ * Scoped identifiers, so nothing else on the page can mean the same.
+ */
+export const splitTransitionClasses = {
+  /** The Studio the user was looking at cross-fades between its two widths */
+  resize: createViewTransition('splitResize'),
+  /** The Studio and the panel cross-fade to another theme, in place */
+  crossfade: createViewTransition('themeCrossfade'),
+  /** The split copy slides in from the side, or out to it */
+  slideIn: createViewTransition('splitSlideIn'),
+  slideOut: createViewTransition('splitSlideOut'),
+  /** The split copy drops in from the top, or out to it, where the copies stack */
+  dropIn: createViewTransition('splitDropIn'),
+  dropOut: createViewTransition('splitDropOut'),
+}
+
+/** The view transition classes of the panel, which slides in from its edge and out to it */
+export const panelTransitionClasses = {
+  slideIn: createViewTransition('panelSlideIn'),
+  slideOut: createViewTransition('panelSlideOut'),
+}
+
+/**
+ * The transition type of the layout's motions — what `ThemerLayout` adds to
+ * every transition it starts, and React passes on to the view transition.
+ * `:active-view-transition-type()` tells the layout's transitions from any
+ * other on the page while they run.
+ */
+export const layoutTransitionType = 'sanity-themer'
+
+/** How long the layout's motions take, and how they ease — every group they move shares these */
+const motion = {
+  animationDuration: '320ms',
+  animationTimingFunction: 'cubic-bezier(0.2, 0, 0, 1)',
+}
+
+/** The layout's `Flex` positions the sidebar overlay on small screens */
+export const layout = style({
+  position: 'relative',
+})
+
+/** A copy of the Studio in a color scheme of its own, for `color-scheme` */
+export const studioScheme = styleVariants({
+  light: {colorScheme: 'light'},
+  dark: {colorScheme: 'dark'},
+})
+
+const slideIn = keyframes({from: {transform: 'translateX(-100%)'}})
+const slideOut = keyframes({to: {transform: 'translateX(-100%)'}})
+const dropIn = keyframes({from: {transform: 'translateY(-100%)'}})
+const dropOut = keyframes({to: {transform: 'translateY(-100%)'}})
+const slideInFromEnd = keyframes({from: {transform: 'translateX(100%)'}})
+const slideOutToEnd = keyframes({to: {transform: 'translateX(100%)'}})
+
+/**
+ * How the panel and the split preview animate, through React's view
+ * transitions: the panel slides in from its edge and the split copy from the
+ * far one — a transform, nothing fades — and out the same way; the Studio the
+ * user was looking at cross-fades between its two widths, its old and new
+ * snapshots stretched to the group's box so it keeps its height. Everything
+ * shares one duration and easing, so the edge a panel slides in on and the
+ * edge the Studio gives way with stay together.
+ */
+globalStyle(
+  [
+    `::view-transition-group(.${splitTransitionClasses.resize})`,
+    `::view-transition-old(.${splitTransitionClasses.resize})`,
+    `::view-transition-new(.${splitTransitionClasses.resize})`,
+    `::view-transition-new(.${splitTransitionClasses.slideIn})`,
+    `::view-transition-old(.${splitTransitionClasses.slideOut})`,
+    `::view-transition-new(.${splitTransitionClasses.dropIn})`,
+    `::view-transition-old(.${splitTransitionClasses.dropOut})`,
+    `::view-transition-new(.${panelTransitionClasses.slideIn})`,
+    `::view-transition-old(.${panelTransitionClasses.slideOut})`,
+    `::view-transition-old(.${splitTransitionClasses.crossfade})`,
+    `::view-transition-new(.${splitTransitionClasses.crossfade})`,
+  ].join(', '),
+  motion,
+)
+
+/**
+ * Whatever else on the page has a `view-transition-name` of its own — an
+ * avatar the Studio names so it moves as one piece instead of stretching
+ * along with the navbar's snapshot, say; names the Studio makes up as it
+ * renders, so the split copy's elements have names of their own — takes part
+ * in the layout's transitions too, as a group of its own that the browser
+ * moves and cross-fades from where it was to where it ends up: at its default
+ * quarter of a second and `ease`, out of step with the navbar it sits in.
+ * While one of the layout's transitions runs, every group keeps the layout's
+ * time instead. Only then: the Studio's own transitions are none of the
+ * layout's business and keep their own — and the layout's own groups, which
+ * the rules above set to the same time, are no different for it.
+ */
+globalStyle(
+  [
+    `:root:active-view-transition-type(${layoutTransitionType})::view-transition-group(*)`,
+    `:root:active-view-transition-type(${layoutTransitionType})::view-transition-old(*)`,
+    `:root:active-view-transition-type(${layoutTransitionType})::view-transition-new(*)`,
+  ].join(', '),
+  motion,
+)
+
+globalStyle(
+  [
+    `::view-transition-old(.${splitTransitionClasses.resize})`,
+    `::view-transition-new(.${splitTransitionClasses.resize})`,
+  ].join(', '),
+  {
+    inlineSize: '100%',
+    blockSize: '100%',
+    objectFit: 'fill',
+  },
+)
+
+globalStyle(`::view-transition-new(.${splitTransitionClasses.slideIn})`, {animationName: slideIn})
+globalStyle(`::view-transition-old(.${splitTransitionClasses.slideOut})`, {
+  animationName: slideOut,
+})
+globalStyle(`::view-transition-new(.${splitTransitionClasses.dropIn})`, {animationName: dropIn})
+globalStyle(`::view-transition-old(.${splitTransitionClasses.dropOut})`, {animationName: dropOut})
+globalStyle(`::view-transition-new(.${panelTransitionClasses.slideIn})`, {
+  animationName: slideInFromEnd,
+})
+globalStyle(`::view-transition-old(.${panelTransitionClasses.slideOut})`, {
+  animationName: slideOutToEnd,
+})
+
+/**
+ * While the split preview toggles, the sidebar — a group of its own, which
+ * `ResizableSidebar` names — does not animate at all: its new snapshot simply
+ * shows, stacked above the Studio copies where it covers the Studio (groups of
+ * elements that only exist in the new state, the arriving copy, would
+ * otherwise be stacked last, over it). While the panel itself opens or closes,
+ * or cross-fades to another theme, React names it instead, and the rules
+ * above apply.
+ *
+ */
+globalStyle(`::view-transition-group(${sidebarTransition})`, {zIndex: 1})
+globalStyle(
+  [
+    `::view-transition-group(${sidebarTransition})`,
+    `::view-transition-image-pair(${sidebarTransition})`,
+    `::view-transition-old(${sidebarTransition})`,
+    `::view-transition-new(${sidebarTransition})`,
+  ].join(', '),
+  {animation: 'none'},
+)
+
+/**
+ * Someone who prefers reduced motion sees no motion here: the layout does not
+ * start these transitions in the first place (see `ThemerLayout`), and should
+ * one run anyway — the preference changed after the layout read it, the
+ * Studio ran one of its own over these groups — none of their animations does
+ * anything, nor those of any other group the layout's transition moves: the
+ * new state simply shows.
+ */
+globalStyle(
+  ['group', 'image-pair', 'old', 'new']
+    .flatMap((part) => {
+      const groups = [
+        ...Object.values(splitTransitionClasses).map((className) => `.${className}`),
+        ...Object.values(panelTransitionClasses).map((className) => `.${className}`),
+        sidebarTransition,
+      ]
+      const selectors = groups.map((group) => `::view-transition-${part}(${group})`)
+
+      selectors.push(
+        `:root:active-view-transition-type(${layoutTransitionType})::view-transition-${part}(*)`,
+      )
+
+      return selectors
+    })
+    .join(', '),
+  {
+    '@media': {
+      '(prefers-reduced-motion: reduce)': {
+        animation: 'none',
+      },
+    },
+  },
+)
diff --git a/plugins/@sanity/themer/src/tool/ThemerLayout.tsx b/plugins/@sanity/themer/src/tool/ThemerLayout.tsx
new file mode 100644
index 0000000000..1e1b4d6509
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemerLayout.tsx
@@ -0,0 +1,369 @@
+import {Card, Flex, ThemeProvider, useMediaIndex} from '@sanity/ui'
+import {type RootTheme, type ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {useActor, useSelector} from '@xstate/react'
+import {Activity, lazy, useEffect, useMemo, useRef, useState, ViewTransition} from 'react'
+import {type LayoutProps, useColorSchemeValue} from 'sanity'
+
+import {buildTheme} from '../theme/buildTheme'
+import type {BuildThemeOptions} from '../theme/options'
+import {ThemerContext, type ThemerContextValue, type ThemerView} from './context'
+import {selectStoredState, type ThemerInput, themerMachine, type ThemerSnapshot} from './machine'
+import {readStoredState} from './storage'
+import {resolveThemes, type ThemerState} from './themes'
+import {usePrefersReducedMotion} from './usePrefersReducedMotion'
+import {useStudioNavbarHeight} from './useStudioNavbarHeight'
+import {useTypedDeferredValue} from './useTypedDeferredValue'
+
+import {
+  layout,
+  layoutTransitionType,
+  panelTransitionClasses,
+  splitTransitionClasses,
+  studioScheme,
+} from './ThemerLayout.css'
+
+/**
+ * Below this media index the Studio collapses its navbar into a drawer, and
+ * the themer follows suit: the sidebar covers the Studio instead of standing
+ * next to it, and the split preview stacks instead of sitting side by side.
+ */
+const MOBILE_MEDIA_INDEX = 1
+
+/**
+ * The sidebar — everything in it, from the theme list to the snippet dialog —
+ * loads the first time it opens. There is no `Suspense` boundary around it,
+ * so it must only ever mount from a deferred render: that keeps the Studio as
+ * it was while the code loads, with the navbar toggle showing the deferred
+ * value as pending, where an urgent render would suspend up to the Studio's
+ * own boundary and swap the whole Studio for its loading screen.
+ */
+const ResizableSidebar = lazy(() => import('./ResizableSidebar'))
+
+function sameStoredState(a: ThemerState, b: ThemerState): boolean {
+  return (
+    a.active === b.active && a.custom === b.custom && a.removed === b.removed && a.order === b.order
+  )
+}
+
+function selectView(snapshot: ThemerSnapshot): ThemerView {
+  const {editing} = snapshot.context
+
+  if (snapshot.matches({flow: 'edit'}) && editing) {
+    return {name: 'edit', slug: editing.slug, focusTitle: editing.focusTitle}
+  }
+
+  if (snapshot.matches({flow: 'removed'})) {
+    return {name: 'removed'}
+  }
+
+  return {name: 'list'}
+}
+
+function sameView(a: ThemerView, b: ThemerView): boolean {
+  if (a.name !== b.name) return false
+
+  return (
+    a.name !== 'edit' || b.name !== 'edit' || (a.slug === b.slug && a.focusTitle === b.focusTitle)
+  )
+}
+
+/**
+ * Wraps the whole Studio so that the theme picked in the themer sidebar
+ * applies everywhere while the user browses around, runs the themer machine
+ * that the navbar toggle and the sidebar share — the user's themes, which one
+ * is applied, which flow the sidebar is in and how the Studio is previewed —
+ * and renders the sidebar next to the Studio. The sidebar sits at the
+ * `layout` level rather than in `activeToolLayout` because the split preview
+ * renders the Studio twice, and the sidebar must not come along.
+ *
+ * The Studio next to the sidebar always follows the appearance setting
+ * (light/dark/system) and the picked theme like any other theme would. The
+ * split preview adds a second copy in the opposite scheme on the far side —
+ * or on top, on small screens — through React's view transitions (React
+ * 19.3), styled in `ThemerLayout.css.ts`.
+ *
+ * The machine says what shows and when the layout is in motion (its `panel`,
+ * `split` and `moving` tags); the layout defers what shows, which puts the
+ * panel's and the copy's mounts in a transition — what lets React animate
+ * them — and picks the view transition classes from the tags.
+ *
+ * Whatever else on the page has a `view-transition-name` — an avatar the
+ * Studio names so it moves as one piece — comes along in step: every
+ * transition the layout starts carries `layoutTransitionType`, which the
+ * stylesheet keys on to move every group in the layout's time (see
+ * `ThemerLayout.css.ts`).
+ *
+ * @internal
+ */
+export function ThemerLayout(props: LayoutProps & {baseOptions: BuildThemeOptions}) {
+  const {baseOptions, ...layoutProps} = props
+  const [input] = useState<ThemerInput>(() => ({baseOptions, stored: readStoredState()}))
+  const [snapshot, send, actorRef] = useActor(themerMachine, {input})
+  const stored = useSelector(actorRef, selectStoredState, sameStoredState)
+  const view = useSelector(actorRef, selectView, sameView)
+  const open = snapshot.hasTag('panel')
+  const split = snapshot.hasTag('split')
+  const moving = snapshot.hasTag('moving')
+  const switching = snapshot.hasTag('switching')
+  const {images} = snapshot.context
+  const mobile = useMediaIndex() <= MOBILE_MEDIA_INDEX
+  const studioRef = useRef<HTMLDivElement | null>(null)
+  const navbarHeight = useStudioNavbarHeight(studioRef)
+
+  // The machine publishes synchronously, which React does not animate. What
+  // shows is deferred: that renders the panel's and the copy's mounts in a
+  // transition — once the sidebar's own changes (the toggle's pressed state)
+  // have committed, so nothing in the sidebar changes while it runs. The
+  // transition carries the layout's type, which tells the stylesheet that the
+  // view transition running is the layout's. Someone who prefers reduced
+  // motion gets no view transition at all: nothing is deferred, so there is
+  // no transition render for React to animate, no boundary has a class, and
+  // what shows changes along with the machine — and should one run anyway,
+  // the stylesheet gives its animations nothing to do
+  const reduceMotion = usePrefersReducedMotion()
+  const deferredOpen = useTypedDeferredValue(reduceMotion ? null : open, layoutTransitionType)
+  const deferredSplit = useTypedDeferredValue(reduceMotion ? null : split, layoutTransitionType)
+  const shownOpen = deferredOpen ?? open
+  const shownSplit = deferredSplit ?? split
+
+  // The sidebar's content mounts the first time it opens — which is when its
+  // code loads — and stays mounted from then on. It goes by a deferred copy
+  // of whether it should be there, deferred even for reduced motion: the
+  // render that loads the code must never be an urgent one. With motion it
+  // arrives with the panel's own deferred reveal; without, in a panel that
+  // already shows, as an update no view transition animates. The two copies
+  // differ while the code loads, which the navbar toggle shows.
+  //
+  // It should be there while open, or once it has been: a sidebar closed
+  // again while its code loads is not mounted into the hidden panel, where
+  // the code could still be loading as a reduced-motion reopen — which is
+  // urgent — reveals it, and the Studio would give way to its loading screen
+  const [panelShown, setPanelShown] = useState(false)
+  const panelWanted = open || panelShown
+  const panelMounted = useTypedDeferredValue(panelWanted, layoutTransitionType)
+  if (panelMounted && !panelShown) setPanelShown(true)
+  const loading = panelWanted !== panelMounted
+
+  const {themes, removed, active} = useMemo(
+    () => resolveThemes(stored, baseOptions),
+    [stored, baseOptions],
+  )
+
+  // The theme identity must be stable between renders: it feeds the
+  // styled-components theme context for the whole Studio, and rebuilding it
+  // would re-render everything. Keying on the options object keeps it stable
+  // across unrelated changes, like renaming a theme.
+  const activeOptions = active.source === 'config' ? null : active.options
+  const theme = useMemo(
+    () => (activeOptions === null ? null : buildTheme(activeOptions)),
+    [activeOptions],
+  )
+
+  // The applied theme is deferred the same way, and the Studio and the panel
+  // cross-fade to it while the machine says a theme is being switched to —
+  // edits to the applied theme's colors render deferred too, which keeps the
+  // pickers responsive, but with nothing to animate them they simply show
+  const deferredTheme = useTypedDeferredValue(
+    reduceMotion ? undefined : theme,
+    layoutTransitionType,
+  )
+  const shownTheme = deferredTheme === undefined ? theme : deferredTheme
+
+  // The Studio paints the body with its configured theme from above this
+  // layout, and Safari tints its chrome from the body — so the applied theme
+  // has to reach the body too, in the scheme the Studio is showing
+  const scheme = useColorSchemeValue()
+  const oppositeScheme: ThemeColorSchemeKey = scheme === 'dark' ? 'light' : 'dark'
+
+  useEffect(() => {
+    const background = shownTheme?.v2?.color[scheme].default.bg
+
+    if (background === undefined) return undefined
+
+    const {style} = document.body
+    const previous = style.backgroundColor
+
+    style.backgroundColor = background
+
+    return () => {
+      style.backgroundColor = previous
+    }
+  }, [scheme, shownTheme])
+
+  // The machine releases the image of a palette as it is replaced or its
+  // theme deleted; whatever it still holds goes with the layout — the actor
+  // keeps its last snapshot once stopped
+  useEffect(
+    () => () => {
+      for (const url of Object.values(actorRef.getSnapshot().context.images)) {
+        URL.revokeObjectURL(url)
+      }
+    },
+    [actorRef],
+  )
+
+  const context = useMemo<ThemerContextValue>(
+    () => ({
+      baseOptions,
+      themes,
+      removed,
+      active,
+      images,
+      view,
+      open,
+      loading,
+      split,
+      mobile,
+      navbarHeight,
+      send,
+    }),
+    [
+      active,
+      baseOptions,
+      images,
+      loading,
+      mobile,
+      navbarHeight,
+      open,
+      removed,
+      send,
+      split,
+      themes,
+      view,
+    ],
+  )
+
+  const studio = layoutProps.renderDefault(layoutProps)
+
+  // Every view transition of the layout tells the machine its motion is under way
+  const transitioned = () => send({type: 'layout.transitioned'})
+
+  // What the view transitions do this render, from what the machine says
+  const classes = reduceMotion
+    ? {
+        copyEnter: 'none',
+        copyExit: 'none',
+        panelEnter: 'none',
+        panelExit: 'none',
+        update: 'none',
+        studioUpdate: 'none',
+      }
+    : {
+        copyEnter: mobile ? splitTransitionClasses.dropIn : splitTransitionClasses.slideIn,
+        copyExit: mobile ? splitTransitionClasses.dropOut : splitTransitionClasses.slideOut,
+        panelEnter: panelTransitionClasses.slideIn,
+        panelExit: panelTransitionClasses.slideOut,
+        // The copy and the panel cross-fade to another theme, in place
+        update: switching ? splitTransitionClasses.crossfade : 'none',
+        // The Studio too — unless it is giving way or taking room, which cross-fades as it goes
+        studioUpdate: moving
+          ? splitTransitionClasses.resize
+          : switching
+            ? splitTransitionClasses.crossfade
+            : 'none',
+      }
+
+  return (
+    <ThemerContext.Provider value={context}>
+      <Flex className={layout} direction={mobile ? 'column' : 'row'} height="fill" sizing="border">
+        {/* The opposite scheme comes first — on the far side of the sidebar,
+            or on top on small screens — so the Studio the user was looking at
+            stays where it is, mounted, in its own scheme. A whole second
+            Studio is too costly to keep around (its styled-components alone
+            insert CSS as they render), so it only exists while the sidebar is
+            open — hidden until the split shows, warmed up for the transition */}
+        {shownOpen && (
+          <Activity mode={shownSplit ? 'visible' : 'hidden'}>
+            <ViewTransition
+              key="opposite"
+              enter={classes.copyEnter}
+              exit={classes.copyExit}
+              onEnter={transitioned}
+              onExit={transitioned}
+              onUpdate={transitioned}
+              update={classes.update}
+            >
+              <StudioPreview
+                borderBottom={mobile}
+                borderRight={!mobile}
+                scheme={oppositeScheme}
+                theme={shownTheme}
+              >
+                {studio}
+              </StudioPreview>
+            </ViewTransition>
+          </Activity>
+        )}
+        {/* The Studio gives way and takes room while the machine says the
+            layout is moving, and cross-fades while it says a theme is being
+            switched to — the Studio updates in transitions of its own all the
+            time, and none of those may animate it. Once a transition is under
+            way the machine hears of it, and the Studio is its own again before
+            the next commit */}
+        <ViewTransition key="primary" onUpdate={transitioned} update={classes.studioUpdate}>
+          <StudioPreview ref={studioRef} theme={shownTheme}>
+            {studio}
+          </StudioPreview>
+        </ViewTransition>
+
+        {/* The sidebar is small and cheap: once it has opened it stays
+            mounted, hidden while closed, keeping its state and ready to show.
+            Until then its content is left out — hidden, it would be
+            pre-rendered, and its code loaded, as soon as the Studio renders */}
+        <Activity mode={shownOpen ? 'visible' : 'hidden'}>
+          <ViewTransition
+            key="panel"
+            enter={classes.panelEnter}
+            exit={classes.panelExit}
+            onEnter={transitioned}
+            onExit={transitioned}
+            onUpdate={transitioned}
+            update={classes.update}
+          >
+            <ThemeProvider theme={shownTheme ?? undefined}>
+              {panelMounted && <ResizableSidebar overlay={mobile} />}
+            </ThemeProvider>
+          </ViewTransition>
+        </Activity>
+      </Flex>
+    </ThemerContext.Provider>
+  )
+}
+
+/**
+ * One copy of the Studio, in the given color scheme — or, without one, in the
+ * scheme the Studio is showing. The configured theme (`null`) goes through
+ * the provider too, inheriting the Studio's, so picking a theme swaps it
+ * instead of remounting the Studio under a new provider.
+ *
+ * The two copies of the split preview share the router, the document store
+ * and every other provider above the layout — only the scheme differs — so
+ * they stay in sync while navigating. The `color-scheme` of a forced scheme
+ * keeps native form controls and scrollbars in step with it.
+ */
+function StudioPreview(props: {
+  borderBottom?: boolean
+  borderRight?: boolean
+  children: React.ReactNode
+  ref?: React.Ref<HTMLDivElement>
+  scheme?: ThemeColorSchemeKey
+  theme: RootTheme | null
+}) {
+  const {borderBottom, borderRight, children, ref, scheme, theme} = props
+
+  return (
+    <ThemeProvider scheme={scheme} theme={theme ?? undefined}>
+      <Card
+        borderBottom={borderBottom}
+        borderRight={borderRight}
+        className={scheme ? studioScheme[scheme] : undefined}
+        flex={1}
+        height="fill"
+        overflow="hidden"
+        ref={ref}
+      >
+        {children}
+      </Card>
+    </ThemeProvider>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/ThemerNavbar.tsx b/plugins/@sanity/themer/src/tool/ThemerNavbar.tsx
new file mode 100644
index 0000000000..40c9080b0e
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemerNavbar.tsx
@@ -0,0 +1,171 @@
+import {ColorWheelIcon} from '@sanity/icons/ColorWheel'
+import {Button, Text} from '@sanity/ui'
+import {Tooltip} from '@sanity/ui/tooltip'
+import {animate, useMotionValue} from 'motion/react'
+import {useCallback, useEffect, useState} from 'react'
+import {type NavbarProps} from 'sanity'
+
+import {AnimatedColorWheelIcon} from './AnimatedColorWheelIcon'
+import {ANIMATION_DURATION} from './colorWheel'
+import {type ThemerContextValue, useThemer} from './context'
+import {hasVisited, markVisited} from './storage'
+import {NAVBAR_SELECTOR} from './useStudioNavbarHeight'
+
+/**
+ * Starts loading the sidebar's code as the toggle is about to be pressed —
+ * the same import `React.lazy` makes, which then waits for this one
+ */
+function preloadSidebar() {
+  // A failed load is for the lazy import to report, as the sidebar opens
+  import('./ResizableSidebar').catch(() => {})
+}
+
+/**
+ * Opens or closes the sidebar — and notes the visit, which is what stops the
+ * navbar from introducing the tool
+ */
+function toggleSidebar(send: ThemerContextValue['send']) {
+  markVisited()
+  send({type: 'sidebar.toggle'})
+}
+
+/**
+ * Whether the navbar has had its one chance per page load to introduce the
+ * tool. Module state rather than component state on purpose: the button
+ * remounts with the navbar (switching workspaces, crossing the narrow-screen
+ * breakpoint) and renders once per Studio copy in the split preview, and none
+ * of those should earn another introduction — only loading the page again does.
+ */
+let introduced = false
+
+/**
+ * The topbar toggle, with an icon that plays its color wheel animation: on
+ * hovering the button, every time; on hovering the navbar it sits in, once —
+ * a "hey, look, new tool!" for anyone who has never opened the sidebar, which
+ * the visit noted by {@link toggleSidebar} ends for good; and lap after lap
+ * while the sidebar's code loads, the way a spinner would.
+ */
+function ThemerNavbarButton() {
+  const {open, loading, send} = useThemer()
+  const progress = useMotionValue(0)
+  // The button element comes through state rather than a ref: the tooltip
+  // wraps the button and hands the element on once it has rendered, which is
+  // after a plain ref would have been read
+  const [button, setButton] = useState<HTMLButtonElement | null>(null)
+
+  const play = useCallback(() => {
+    // A run in progress plays out — hovering again does not cut it short
+    if (progress.isAnimating()) return
+
+    animate(progress, [0, 1], {duration: ANIMATION_DURATION, ease: 'linear'})
+  }, [progress])
+
+  // Laps from wherever a hover's run has got to, so the wheel never jumps,
+  // and the lap in progress as the code arrives plays out: at rest, the wheel
+  // looks like the icon again
+  useEffect(() => {
+    if (!loading) return undefined
+
+    let looping = true
+    const lap = (from: number) => {
+      animate(progress, [from, 1], {
+        duration: (1 - from) * ANIMATION_DURATION,
+        ease: 'linear',
+        onComplete: () => {
+          if (looping) lap(0)
+        },
+      })
+    }
+
+    lap(progress.get())
+
+    return () => {
+      looping = false
+    }
+  }, [loading, progress])
+
+  useEffect(() => () => progress.stop(), [progress])
+
+  useEffect(() => {
+    const navbar = button?.closest(NAVBAR_SELECTOR)
+
+    if (!navbar || introduced) return undefined
+
+    const introduce = () => {
+      // Another navbar (the split preview's) may have had the chance meanwhile
+      if (introduced) return
+
+      introduced = true
+      // Checked as the pointer comes in, not up front: a click in between
+      // (on the button itself) counts
+      if (!hasVisited()) play()
+    }
+
+    navbar.addEventListener('mouseenter', introduce, {once: true})
+
+    return () => navbar.removeEventListener('mouseenter', introduce)
+  }, [button, play])
+
+  return (
+    <Tooltip animate content={<Text size={1}>Themer</Text>} portal>
+      <Button
+        aria-busy={loading}
+        aria-label="Themer"
+        // The wheel itself shows the load, where the `loading` prop would
+        // cover it with a spinner
+        disabled={loading}
+        icon={<AnimatedColorWheelIcon progress={progress} />}
+        mode="bleed"
+        onClick={() => toggleSidebar(send)}
+        onFocus={preloadSidebar}
+        onMouseEnter={() => {
+          preloadSidebar()
+          play()
+        }}
+        // The Studio's own navbar buttons go through a wrapper that pins them
+        // to this padding, where `@sanity/ui` defaults to a roomier 3
+        padding={2}
+        ref={setButton}
+        selected={open}
+      />
+    </Tooltip>
+  )
+}
+
+/**
+ * Adds the toggle that opens and closes the themer sidebar to the Studio
+ * navbar — an icon button with a tooltip in the top bar (like the Tasks
+ * toggle), and a regular titled action in the narrow-screen sidebar menu.
+ *
+ * In the split preview every Studio copy renders its own navbar, so the
+ * toggle shows up in both — they drive the same sidebar.
+ *
+ * @internal
+ */
+export function ThemerNavbar(props: NavbarProps) {
+  const {open, send} = useThemer()
+
+  return props.renderDefault({
+    ...props,
+    __internal_actions: [
+      ...(props.__internal_actions ?? []),
+      {
+        location: 'topbar',
+        name: 'themer-topbar',
+        // The component itself rather than a `() => <ThemerNavbarButton />`
+        // wrapper: the Studio renders `render` as a component, and a wrapper
+        // made anew on every render would remount the button each time —
+        // resetting its animation and its once-only introduction
+        render: ThemerNavbarButton,
+      },
+      {
+        icon: ColorWheelIcon,
+        location: 'sidebar',
+        name: 'themer-sidebar',
+        onAction: () => toggleSidebar(send),
+        selected: open,
+        title: 'Themer',
+      },
+    ],
+  })
+}
diff --git a/plugins/@sanity/themer/src/tool/ThemerSidebar.css.ts b/plugins/@sanity/themer/src/tool/ThemerSidebar.css.ts
new file mode 100644
index 0000000000..6b934e30a2
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemerSidebar.css.ts
@@ -0,0 +1,6 @@
+import {style} from '@vanilla-extract/css'
+
+/** Lets the title shrink and truncate instead of pushing the buttons out */
+export const title = style({
+  minWidth: 0,
+})
diff --git a/plugins/@sanity/themer/src/tool/ThemerSidebar.tsx b/plugins/@sanity/themer/src/tool/ThemerSidebar.tsx
new file mode 100644
index 0000000000..d73be6dc41
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/ThemerSidebar.tsx
@@ -0,0 +1,105 @@
+import {ArrowLeftIcon} from '@sanity/icons/ArrowLeft'
+import {CloseIcon} from '@sanity/icons/Close'
+import {CodeBlockIcon} from '@sanity/icons/CodeBlock'
+import {SplitVerticalIcon} from '@sanity/icons/SplitVertical'
+import {Box, Card, Flex, Text} from '@sanity/ui'
+import {useState} from 'react'
+
+import {useThemer} from './context'
+import {RemovedThemes} from './RemovedThemes'
+import {ThemeEditor} from './ThemeEditor'
+import {ThemeList} from './ThemeList'
+import {ThemeSnippetDialog} from './ThemeSnippetDialog'
+import {TooltipButton} from './TooltipButton'
+
+import {title} from './ThemerSidebar.css'
+
+const VIEW_TITLES = {
+  list: 'Themer',
+  edit: 'Edit theme',
+  removed: 'Removed themes',
+} as const
+
+/**
+ * The themer sidebar: a header that navigates between the flows and toggles
+ * the split preview, the flow itself — picking a theme, editing one, or
+ * restoring removed ones — and the dialog with the `buildTheme` snippet of
+ * the applied theme.
+ *
+ * @internal
+ */
+export function ThemerSidebar() {
+  const {active, split, view, navbarHeight, send} = useThemer()
+  const [snippetOpen, setSnippetOpen] = useState(false)
+  const inList = view.name === 'list'
+
+  return (
+    <Card height="fill">
+      <Flex direction="column" height="fill">
+        {/* The header sits next to the Studio navbar and takes its height, so
+            the two bottom borders line up — whatever height the Studio, its
+            breakpoint or a custom navbar gives it */}
+        <Card
+          borderBottom
+          padding={3}
+          sizing="border"
+          style={navbarHeight === null ? undefined : {height: navbarHeight}}
+        >
+          <Flex align="center" gap={1} height="fill">
+            {!inList && (
+              <TooltipButton
+                icon={ArrowLeftIcon}
+                mode="bleed"
+                onClick={() => send({type: 'flow.list'})}
+                padding={2}
+                tooltip="Back to the themes"
+              />
+            )}
+            <Box className={title} flex={1}>
+              <Text size={1} textOverflow="ellipsis" weight="semibold">
+                {VIEW_TITLES[view.name]}
+              </Text>
+            </Box>
+            {/* Packed without gaps, so the title still fits next to them at the
+                narrowest sidebar width */}
+            <Flex>
+              {view.name !== 'removed' && (
+                <>
+                  <TooltipButton
+                    aria-pressed={split}
+                    icon={SplitVerticalIcon}
+                    mode="bleed"
+                    onClick={() => send({type: 'preview.toggle'})}
+                    padding={2}
+                    selected={split}
+                    tooltip="Show light and dark side by side"
+                  />
+                  <TooltipButton
+                    icon={CodeBlockIcon}
+                    mode="bleed"
+                    onClick={() => setSnippetOpen(true)}
+                    padding={2}
+                    tooltip="Show the code for the applied theme"
+                  />
+                </>
+              )}
+              <TooltipButton
+                icon={CloseIcon}
+                mode="bleed"
+                onClick={() => send({type: 'sidebar.close'})}
+                padding={2}
+                tooltip="Close themer"
+              />
+            </Flex>
+          </Flex>
+        </Card>
+
+        {view.name === 'list' && <ThemeList />}
+        {view.name === 'edit' && <ThemeEditor focusTitle={view.focusTitle} slug={view.slug} />}
+        {view.name === 'removed' && <RemovedThemes />}
+      </Flex>
+
+      {snippetOpen && <ThemeSnippetDialog onClose={() => setSnippetOpen(false)} theme={active} />}
+    </Card>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/TooltipButton.tsx b/plugins/@sanity/themer/src/tool/TooltipButton.tsx
new file mode 100644
index 0000000000..0692c828b0
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/TooltipButton.tsx
@@ -0,0 +1,24 @@
+import {Button, type ButtonProps, Text} from '@sanity/ui'
+import {Tooltip} from '@sanity/ui/tooltip'
+
+/**
+ * A button with an animated tooltip instead of a `title` attribute, sized like
+ * the Studio's own buttons (`padding` and `gap` of 2). Icon-only buttons take
+ * the tooltip as their accessible name.
+ *
+ * @internal
+ */
+export function TooltipButton(props: ButtonProps & {tooltip: string}) {
+  const {tooltip, ...buttonProps} = props
+
+  return (
+    <Tooltip animate content={<Text size={1}>{tooltip}</Text>} placement="bottom" portal>
+      <Button
+        aria-label={buttonProps.text === undefined ? tooltip : undefined}
+        gap={2}
+        padding={2}
+        {...buttonProps}
+      />
+    </Tooltip>
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/colorWheel.test.ts b/plugins/@sanity/themer/src/tool/colorWheel.test.ts
new file mode 100644
index 0000000000..93a0a0614d
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/colorWheel.test.ts
@@ -0,0 +1,133 @@
+import {describe, expect, it} from 'vitest'
+
+import {
+  ANIMATION_DURATION,
+  isSliceFilled,
+  SLICE_COLORS,
+  SLICE_COUNT,
+  wheelRotation,
+} from './colorWheel'
+
+const SLICES = Array.from({length: SLICE_COUNT}, (_, index) => index)
+
+/** The acts the animation is made of: fill the top half, spin while filling the bottom half, clear */
+const TOTAL_ACTS = 2.5
+
+/** The progress at which each act ends */
+const TOP_HALF_FILLED = 1 / TOTAL_ACTS
+const SPUN = 2 / TOTAL_ACTS
+
+const STEPS = 20_000
+const STEP = 1 / STEPS
+
+/** The first progress, in steps of `STEP`, at which `predicate` holds */
+function firstProgress(predicate: (progress: number) => boolean): number {
+  for (let step = 0; step <= STEPS; step++) {
+    const progress = step / STEPS
+
+    if (predicate(progress)) return progress
+  }
+
+  throw new Error('never')
+}
+
+/** When a slice pops in */
+function fillTime(index: number): number {
+  return firstProgress((progress) => isSliceFilled(progress, index))
+}
+
+/** When a slice pops out again */
+function clearTime(index: number): number {
+  return firstProgress((progress) => progress >= SPUN && !isSliceFilled(progress, index))
+}
+
+function filledSlices(progress: number): number[] {
+  return SLICES.filter((index) => isSliceFilled(progress, index))
+}
+
+describe('color wheel animation', () => {
+  it('has a color of its own for every slice', () => {
+    expect(SLICE_COLORS).toHaveLength(SLICE_COUNT)
+    expect(new Set(SLICE_COLORS).size).toBe(SLICE_COUNT)
+  })
+
+  it('takes two and a half acts', () => {
+    expect(ANIMATION_DURATION).toBeCloseTo(0.55 * TOTAL_ACTS)
+  })
+
+  it('starts and ends with a blank, upright wheel', () => {
+    expect(wheelRotation(0)).toBe(0)
+    expect(wheelRotation(1)).toBe(0)
+    expect(filledSlices(0)).toEqual([])
+    expect(filledSlices(1)).toEqual([])
+  })
+
+  it('pops the slices in whole, one at a time, clockwise from 12 o’clock at a steady pace', () => {
+    // Four slices per act: the top half in the first, the bottom half in the second
+    const beat = TOP_HALF_FILLED / (SLICE_COUNT / 2)
+
+    for (const index of SLICES) {
+      const time = fillTime(index)
+
+      expect(time, `slice ${index}`).toBeCloseTo(index * beat, 3)
+      expect(filledSlices(time)).toEqual(SLICES.slice(0, index + 1))
+      expect(filledSlices(time - STEP)).toEqual(SLICES.slice(0, index))
+    }
+  })
+
+  it('stands still until the 6 o’clock slice pops in', () => {
+    const sixOClock = SLICE_COUNT / 2
+
+    expect(wheelRotation(TOP_HALF_FILLED / 2)).toBe(0)
+    expect(wheelRotation(TOP_HALF_FILLED)).toBe(0)
+    expect(filledSlices(TOP_HALF_FILLED)).toEqual(SLICES.slice(0, sixOClock))
+
+    const spinning = fillTime(sixOClock)
+
+    expect(spinning).toBeCloseTo(TOP_HALF_FILLED, 3)
+    expect(wheelRotation(spinning)).toBeGreaterThan(0)
+  })
+
+  it('spins up with a cubic ease-in while the bottom half pop in', () => {
+    const halfway = (TOP_HALF_FILLED + SPUN) / 2
+
+    expect(wheelRotation(halfway)).toBeCloseTo(360 * 0.5 ** 3)
+    // ...as the 9 o'clock slice pops in
+    expect(filledSlices(halfway - STEP)).toEqual(SLICES.slice(0, (SLICE_COUNT * 3) / 4))
+    expect(filledSlices(halfway + STEP)).toEqual(SLICES.slice(0, (SLICE_COUNT * 3) / 4 + 1))
+
+    // Back upright, at top speed, with every slice filled
+    expect(wheelRotation(SPUN - 1e-9)).toBeCloseTo(360)
+    expect(wheelRotation(SPUN)).toBe(0)
+    expect(filledSlices(SPUN)).toEqual(SLICES)
+  })
+
+  it('pops the slices out the same way round, on an ease-out that starts at the speed of the spin', () => {
+    // Where a cubic ease-out over a full turn, from the spin's top speed, is
+    // as it reaches each slice's leading edge
+    const easeOutTime = (index: number) =>
+      SPUN + (1 - Math.cbrt(1 - index / SLICE_COUNT)) / TOTAL_ACTS
+
+    let previousGap = 0
+
+    for (const index of SLICES) {
+      const time = clearTime(index)
+
+      expect(time, `slice ${index}`).toBeCloseTo(easeOutTime(index), 3)
+      expect(filledSlices(time)).toEqual(SLICES.slice(index + 1))
+      expect(wheelRotation(time)).toBe(0)
+
+      if (index > 0) {
+        const gap = time - clearTime(index - 1)
+
+        expect(gap, `gap before slice ${index}`).toBeGreaterThan(previousGap)
+        previousGap = gap
+      }
+    }
+  })
+
+  it('ends as the last slice pops out', () => {
+    expect(isSliceFilled(1 - STEP, SLICE_COUNT - 1)).toBe(true)
+    expect(isSliceFilled(1, SLICE_COUNT - 1)).toBe(false)
+  })
+})
diff --git a/plugins/@sanity/themer/src/tool/colorWheel.ts b/plugins/@sanity/themer/src/tool/colorWheel.ts
new file mode 100644
index 0000000000..284d0883df
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/colorWheel.ts
@@ -0,0 +1,89 @@
+import {blue, cyan, green, magenta, orange, purple, red, yellow} from '@sanity/color'
+
+/**
+ * The spokes of the color wheel icon (`ColorWheelIcon` from `@sanity/icons`)
+ * cut its ring into this many slices, one of them centered on 12 o'clock
+ */
+export const SLICE_COUNT = 8
+
+/**
+ * The colors the slices fill with, clockwise from 12 o'clock: the palette's
+ * hues in rainbow order, like a real color swatch
+ */
+export const SLICE_COLORS: readonly string[] = [
+  red[500].hex,
+  orange[500].hex,
+  yellow[400].hex,
+  green[500].hex,
+  cyan[500].hex,
+  blue[500].hex,
+  purple[500].hex,
+  magenta[500].hex,
+]
+
+/**
+ * The animation plays in acts of this length, in seconds. In the first act
+ * the top half of the slices pop in, one at a time like the segments of a
+ * classic spinner; in the second the wheel spins up while the bottom half pop
+ * in; in the third the colors pop out again as the spin's speed carries over
+ * into the clearing.
+ */
+const ACT_DURATION = 0.55
+
+/**
+ * The clearing would take a whole act to come to rest, but its last slice
+ * pops out as the clearing reaches that slice's leading edge — with nothing
+ * left to show, the animation ends there
+ */
+const CLEARING_ACTS = 1 - Math.cbrt(1 / SLICE_COUNT)
+
+const TOTAL_ACTS = 2 + CLEARING_ACTS
+
+/** How long the whole animation takes, in seconds */
+export const ANIMATION_DURATION = ACT_DURATION * TOTAL_ACTS
+
+function actAt(progress: number): number {
+  return progress * TOTAL_ACTS
+}
+
+/**
+ * How far the wheel has turned at `progress` (0–1), in degrees.
+ *
+ * It stands still while the top half of the slices pop in. As the 6 o'clock
+ * slice pops in it starts spinning — one full turn with a cubic ease-in, from
+ * rest to top speed as the bottom half pop in — and it stands still again the
+ * moment it is back upright: the clearing of {@link isSliceFilled} takes off
+ * at the speed the spin reached, as if the wheel kept turning and eased out
+ * over a second turn, so the two read as one movement.
+ */
+export function wheelRotation(progress: number): number {
+  const spin = actAt(progress) - 1
+
+  if (spin <= 0 || spin >= 1) return 0
+
+  return 360 * spin ** 3
+}
+
+/**
+ * Whether slice `index` (clockwise from 12 o'clock) shows its color at
+ * `progress` (0–1). A slice pops in whole as the fill reaches its leading
+ * edge, and pops out whole as the clearing does — stepped, never partial.
+ *
+ * The fill goes clockwise at a steady pace over the first two acts, half of
+ * the slices in each. The clearing follows in the third act, the same way
+ * round, on a cubic ease-out that starts at the speed the spin of
+ * {@link wheelRotation} ends with: the slices at first pop out as quickly as
+ * they were passing by, then ever more slowly.
+ */
+export function isSliceFilled(progress: number, index: number): boolean {
+  const act = actAt(progress)
+  const filling = (act * SLICE_COUNT) / 2
+
+  if (filling <= index) return false
+
+  const clearing = act - 2
+
+  if (clearing <= 0) return true
+
+  return (1 - (1 - clearing) ** 3) * SLICE_COUNT < index
+}
diff --git a/plugins/@sanity/themer/src/tool/context.ts b/plugins/@sanity/themer/src/tool/context.ts
new file mode 100644
index 0000000000..a666c59002
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/context.ts
@@ -0,0 +1,62 @@
+import {createContext, useContext} from 'react'
+
+import type {BuildThemeOptions} from '../theme/options'
+import type {ThemerEvent} from './machine'
+import type {ThemerTheme} from './themes'
+
+/**
+ * The flow the sidebar is in: picking a theme from the list, editing one of
+ * the user's own themes, or restoring removed ones.
+ *
+ * @internal
+ */
+export type ThemerView =
+  | {name: 'list'}
+  | {
+      name: 'edit'
+      slug: string
+      /** Whether the title input should take focus, for themes that were just created */
+      focusTitle: boolean
+    }
+  | {name: 'removed'}
+
+/** @internal */
+export interface ThemerContextValue {
+  /** The theme options the Studio's configured theme was generated from */
+  baseOptions: BuildThemeOptions
+  /** The themes to pick from, in list order */
+  themes: ThemerTheme[]
+  /** The removed themes, which can be restored */
+  removed: ThemerTheme[]
+  /** The applied theme */
+  active: ThemerTheme
+  /** Object URLs of the images themes took their palette from this session, by slug */
+  images: Record<string, string>
+  view: ThemerView
+  /** Whether the themer sidebar is open */
+  open: boolean
+  /** Whether the sidebar is on its way to opening for the first time, pending while its code loads */
+  loading: boolean
+  /** Whether the Studio shows twice side by side, in light and dark */
+  split: boolean
+  /** Whether the Studio is on a small screen, where the sidebar covers it and the split preview stacks */
+  mobile: boolean
+  /** The height of the Studio navbar, which the sidebar's header matches — `null` until it has rendered */
+  navbarHeight: number | null
+  /** Sends an event to the themer machine */
+  send: (event: ThemerEvent) => void
+}
+
+/** @internal */
+export const ThemerContext = createContext<ThemerContextValue | null>(null)
+
+/** @internal */
+export function useThemer(): ThemerContextValue {
+  const context = useContext(ThemerContext)
+
+  if (!context) {
+    throw new Error('useThemer must be used within the `themerTool` plugin')
+  }
+
+  return context
+}
diff --git a/plugins/@sanity/themer/src/tool/imageFile.ts b/plugins/@sanity/themer/src/tool/imageFile.ts
new file mode 100644
index 0000000000..3dc0e39f0f
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/imageFile.ts
@@ -0,0 +1,65 @@
+import type {PixelData} from './imagePalette'
+
+/**
+ * The longest side the image is scaled down to before its colors are read —
+ * a few thousand pixels are plenty for a palette, and keep it instant
+ */
+const SAMPLE_SIZE = 96
+
+/**
+ * Reads the pixels of an image file on device: the image is decoded, drawn
+ * onto a small canvas and read back, so nothing leaves the browser.
+ *
+ * @internal
+ */
+export async function readImagePixels(file: Blob): Promise<PixelData> {
+  const image = await decodeImage(file)
+
+  try {
+    const scale = Math.min(1, SAMPLE_SIZE / Math.max(image.width, image.height))
+    const width = Math.max(1, Math.round(image.width * scale))
+    const height = Math.max(1, Math.round(image.height * scale))
+    const canvas = document.createElement('canvas')
+
+    canvas.width = width
+    canvas.height = height
+
+    const context = canvas.getContext('2d', {willReadFrequently: true})
+
+    if (!context) throw new Error('Could not draw the image')
+
+    context.drawImage(image, 0, 0, width, height)
+
+    return {data: context.getImageData(0, 0, width, height).data, width, height}
+  } finally {
+    // Where `createImageBitmap` is missing, `ImageBitmap` may be too
+    if (typeof ImageBitmap !== 'undefined' && image instanceof ImageBitmap) image.close()
+  }
+}
+
+async function decodeImage(file: Blob): Promise<ImageBitmap | HTMLImageElement> {
+  if (typeof createImageBitmap === 'function') {
+    try {
+      return await createImageBitmap(file)
+    } catch {
+      // Some browsers cannot decode every format this way (e.g. SVG) — an
+      // image element handles whatever the browser can display
+    }
+  }
+
+  const url = URL.createObjectURL(file)
+
+  try {
+    return await new Promise<HTMLImageElement>((resolve, reject) => {
+      const image = new Image()
+
+      image.addEventListener('load', () => resolve(image), {once: true})
+      image.addEventListener('error', () => reject(new Error('Could not decode the image')), {
+        once: true,
+      })
+      image.src = url
+    })
+  } finally {
+    URL.revokeObjectURL(url)
+  }
+}
diff --git a/plugins/@sanity/themer/src/tool/imagePalette.test.ts b/plugins/@sanity/themer/src/tool/imagePalette.test.ts
new file mode 100644
index 0000000000..175d5a36f3
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/imagePalette.test.ts
@@ -0,0 +1,344 @@
+import {describe, expect, it} from 'vitest'
+
+import {relativeLuminance} from '../theme/hsl'
+import {
+  applyImagePalette,
+  currentImageVariant,
+  extractImagePalette,
+  type ImagePalette,
+  optionsFromImagePalette,
+  pickLuckyVariant,
+  type PixelData,
+  readableAccent,
+  titleFromFileName,
+} from './imagePalette'
+
+function contrast(a: string, b: string): number {
+  const [lighter, darker] = [relativeLuminance(a), relativeLuminance(b)].sort((x, y) => y - x)
+
+  return (lighter + 0.05) / (darker + 0.05)
+}
+
+/** Paints an image out of solid patches: `[hex, pixels, alpha?]` */
+function paint(patches: Array<[hex: string, pixels: number, alpha?: number]>): PixelData {
+  const total = patches.reduce((sum, [, pixels]) => sum + pixels, 0)
+  const data = new Uint8ClampedArray(total * 4)
+  let offset = 0
+
+  for (const [hex, pixels, alpha = 255] of patches) {
+    for (let index = 0; index < pixels; index++) {
+      data[offset] = parseInt(hex.slice(1, 3), 16)
+      data[offset + 1] = parseInt(hex.slice(3, 5), 16)
+      data[offset + 2] = parseInt(hex.slice(5, 7), 16)
+      data[offset + 3] = alpha
+      offset += 4
+    }
+  }
+
+  return {data, width: total, height: 1}
+}
+
+const EMPTY: ImagePalette = {
+  dominant: null,
+  vibrant: null,
+  lightVibrant: null,
+  darkVibrant: null,
+  muted: null,
+  lightMuted: null,
+  darkMuted: null,
+}
+
+describe('extractImagePalette', () => {
+  it('claims a swatch for each kind of color in the image', () => {
+    const palette = extractImagePalette(
+      paint([
+        ['#e11d48', 400], // vivid red, mid lightness
+        ['#f29cb0', 100], // vivid, light
+        ['#5c0a1d', 100], // vivid, dark
+        ['#7a7e8a', 300], // grayish, mid lightness
+        ['#c9cbd1', 200], // grayish, light
+        ['#3a3c42', 150], // grayish, dark
+      ]),
+    )
+
+    expect(palette).toEqual({
+      dominant: '#e11d48',
+      vibrant: '#e11d48',
+      lightVibrant: '#f29cb0',
+      darkVibrant: '#5c0a1d',
+      muted: '#7a7e8a',
+      lightMuted: '#c9cbd1',
+      darkMuted: '#3a3c42',
+    })
+  })
+
+  it('leaves out swatches the image has no color for', () => {
+    const palette = extractImagePalette(paint([['#7a7e8a', 10]]))
+
+    expect(palette).toEqual({...EMPTY, dominant: '#7a7e8a', muted: '#7a7e8a'})
+  })
+
+  it('never hands the same color to two swatches', () => {
+    const palette = extractImagePalette(
+      paint([
+        ['#e11d48', 10],
+        ['#7a7e8a', 5],
+      ]),
+    )
+    const claimed = Object.values(palette).filter((swatch) => swatch !== null)
+
+    expect(new Set(claimed).size).toBe(2)
+    expect(palette.vibrant).toBe('#e11d48')
+    expect(palette.muted).toBe('#7a7e8a')
+  })
+
+  it('prefers the color closest to a swatch, then the most common one', () => {
+    const palette = extractImagePalette(
+      paint([
+        ['#ff0000', 10], // the ideal vibrant color: fully saturated at mid lightness
+        ['#e11d48', 900], // most common, close to the ideal
+      ]),
+    )
+
+    expect(palette.vibrant).toBe('#ff0000')
+    expect(palette.dominant).toBe('#e11d48')
+  })
+
+  it('ignores transparent, near-black and near-white pixels', () => {
+    const palette = extractImagePalette(
+      paint([
+        ['#e11d48', 5],
+        ['#00ff00', 500, 10],
+        ['#050505', 500],
+        ['#fdfdfd', 500],
+      ]),
+    )
+
+    expect(palette.dominant).toBe('#e11d48')
+    expect(palette.vibrant).toBe('#e11d48')
+    expect(palette.lightVibrant).toBeNull()
+    expect(palette.darkMuted).toBeNull()
+  })
+
+  it('averages the pixels that land in the same bucket', () => {
+    const palette = extractImagePalette(
+      paint([
+        ['#e11d48', 1],
+        ['#e21e49', 1],
+        ['#e31f4a', 1],
+      ]),
+    )
+
+    expect(palette.dominant).toBe('#e21e49')
+  })
+
+  it('comes back empty for an empty image', () => {
+    expect(extractImagePalette({data: new Uint8ClampedArray(0), width: 0, height: 0})).toEqual(
+      EMPTY,
+    )
+    expect(extractImagePalette(paint([['#ffffff', 10]]))).toEqual(EMPTY)
+  })
+})
+
+describe('optionsFromImagePalette', () => {
+  const palette: ImagePalette = {
+    dominant: '#e11d48',
+    vibrant: '#e11d48',
+    lightVibrant: '#f29cb0',
+    darkVibrant: '#5c0a1d',
+    muted: '#7a7e8a',
+    lightMuted: '#c9cbd1',
+    darkMuted: '#3a3c42',
+  }
+
+  it('takes the accent and text from the vibrant and muted swatches, and tints the backgrounds', () => {
+    expect(optionsFromImagePalette(palette)).toEqual({
+      light: {accent: '#e11d48', text: '#7a7e8a', background: '#fbfbfb'},
+      // The red is a touch too dark for black button labels
+      dark: {accent: readableAccent('#e11d48', 'dark'), text: '#7a7e8a', background: '#1b1c20'},
+    })
+  })
+
+  it('falls back to the swatches of each scheme, and leaves out what the image lacks', () => {
+    expect(
+      optionsFromImagePalette({
+        ...palette,
+        vibrant: null,
+        muted: null,
+        lightMuted: null,
+        darkMuted: null,
+      }),
+    ).toEqual({
+      light: {accent: '#5c0a1d', background: '#fef7f9'},
+      dark: {accent: '#f29cb0', background: '#250d15'},
+    })
+    expect(optionsFromImagePalette({...EMPTY, dominant: '#7a7e8a'})).toEqual({
+      light: {accent: readableAccent('#7a7e8a', 'light')},
+      dark: {accent: '#7a7e8a'},
+    })
+    expect(optionsFromImagePalette(EMPTY)).toEqual({})
+  })
+})
+
+describe('variants', () => {
+  const palette: ImagePalette = {
+    dominant: '#e11d48',
+    vibrant: '#e11d48',
+    lightVibrant: '#f29cb0',
+    darkVibrant: '#5c0a1d',
+    muted: '#7a7e8a',
+    lightMuted: '#c9cbd1',
+    darkMuted: '#3a3c42',
+  }
+
+  it('builds the theme around the chosen swatch', () => {
+    const options = optionsFromImagePalette(palette, 'darkMuted')
+
+    expect(options.light?.accent).toBe('#3a3c42')
+    // Too dark for black button labels, so the dark scheme lightens it
+    expect(options.dark?.accent).toBe(readableAccent('#3a3c42', 'dark'))
+    expect(options.light?.text).toBe('#7a7e8a')
+    expect(currentImageVariant(options, palette)).toBe('darkMuted')
+    expect(currentImageVariant(optionsFromImagePalette(palette), palette)).toBe('vibrant')
+    expect(currentImageVariant({light: {accent: '#000000'}}, palette)).toBeNull()
+    expect(currentImageVariant({}, palette)).toBeNull()
+  })
+
+  it('falls back to the automatic accent when the chosen swatch is missing', () => {
+    expect(
+      optionsFromImagePalette({...palette, lightMuted: null}, 'lightMuted').light?.accent,
+    ).toBe('#e11d48')
+  })
+
+  it('feels lucky about interesting swatches, never the current one', () => {
+    // A random of 0 always lands on the first candidate
+    expect(pickLuckyVariant(palette, {random: () => 0})).toBe('muted')
+    expect(pickLuckyVariant(palette, {exclude: 'muted', random: () => 0})).toBe('vibrant')
+    // A random just under 1 lands on the last candidate
+    expect(pickLuckyVariant(palette, {random: () => 0.999})).toBe('darkVibrant')
+
+    const picks = new Set<string>()
+
+    for (let index = 0; index < 200; index++) {
+      picks.add(pickLuckyVariant(palette, {exclude: 'vibrant'}) ?? 'null')
+    }
+
+    expect(picks.has('vibrant')).toBe(false)
+    expect(picks.size).toBeGreaterThan(1)
+  })
+
+  it('weighs saturated, mid-lightness swatches heavier', () => {
+    let vivid = 0
+    let dull = 0
+
+    for (let index = 0; index < 400; index++) {
+      const pick = pickLuckyVariant({...EMPTY, vibrant: '#ff0000', lightMuted: '#e0e0e6'})
+
+      if (pick === 'vibrant') vivid++
+      if (pick === 'lightMuted') dull++
+    }
+
+    expect(vivid).toBeGreaterThan(dull)
+  })
+
+  it('has nothing to feel lucky about without swatches, and keeps a lone one', () => {
+    expect(pickLuckyVariant(EMPTY)).toBeNull()
+    expect(pickLuckyVariant({...EMPTY, muted: '#7a7e8a'}, {exclude: 'muted'})).toBe('muted')
+  })
+})
+
+describe('readableAccent', () => {
+  it('keeps accents that already read well on a button', () => {
+    expect(readableAccent('#e11d48', 'light')).toBe('#e11d48')
+    expect(readableAccent('#3a3c42', 'light')).toBe('#3a3c42')
+    expect(readableAccent('#f29cb0', 'dark')).toBe('#f29cb0')
+  })
+
+  it('darkens light scheme accents until white labels read, and lightens dark scheme ones for black labels', () => {
+    for (const hex of ['#f29cb0', '#c9cbd1', '#7a7e8a', '#a8f0c8', '#ffff00']) {
+      const light = readableAccent(hex, 'light')
+
+      expect(contrast(light, '#ffffff'), `${hex} light`).toBeGreaterThanOrEqual(4.5)
+      expect(relativeLuminance(light)).toBeLessThanOrEqual(relativeLuminance(hex))
+    }
+
+    for (const hex of ['#3a3c42', '#5c0a1d', '#e11d48', '#101010']) {
+      const dark = readableAccent(hex, 'dark')
+
+      expect(contrast(dark, '#000000'), `${hex} dark`).toBeGreaterThanOrEqual(4.5)
+      expect(relativeLuminance(dark)).toBeGreaterThanOrEqual(relativeLuminance(hex))
+    }
+  })
+
+  it('keeps the hue while adjusting', () => {
+    expect(readableAccent('#a8f0c8', 'light')).toMatch(/^#[0-9a-f]{6}$/)
+    expect(readableAccent('#a8f0c8', 'light')).not.toBe('#a8f0c8')
+  })
+
+  it('builds every variant readable on a button', () => {
+    const palette: ImagePalette = {
+      dominant: '#e11d48',
+      vibrant: '#e11d48',
+      lightVibrant: '#f29cb0',
+      darkVibrant: '#5c0a1d',
+      muted: '#7a7e8a',
+      lightMuted: '#c9cbd1',
+      darkMuted: '#3a3c42',
+    }
+
+    for (const variant of [
+      'muted',
+      'vibrant',
+      'lightMuted',
+      'lightVibrant',
+      'darkMuted',
+      'darkVibrant',
+    ] as const) {
+      const options = optionsFromImagePalette(palette, variant)
+
+      expect(contrast(options.light!.accent!, '#ffffff'), variant).toBeGreaterThanOrEqual(4.5)
+      expect(contrast(options.dark!.accent!, '#000000'), variant).toBeGreaterThanOrEqual(4.5)
+      expect(currentImageVariant(options, palette)).toBe(variant)
+    }
+  })
+})
+
+describe('applyImagePalette', () => {
+  it('replaces the colors scheme by scheme and keeps the rest', () => {
+    expect(
+      applyImagePalette(
+        {light: {accent: '#000000', contrast: 60}, dark: {contrast: 40}},
+        {...EMPTY, vibrant: '#e11d48'},
+      ),
+    ).toEqual({
+      light: {accent: '#e11d48', contrast: 60},
+      dark: {accent: readableAccent('#e11d48', 'dark'), contrast: 40},
+    })
+  })
+})
+
+describe('titleFromFileName', () => {
+  it('turns a file name into a title', () => {
+    expect(titleFromFileName('sunset-beach_2024.JPG')).toBe('sunset beach 2024')
+    expect(titleFromFileName('Logo.png')).toBe('Logo')
+    expect(titleFromFileName('.png')).toBe('Image theme')
+  })
+})
+
+describe('short hex swatches', () => {
+  it('tints backgrounds and adjusts accents from #rgb swatches too', () => {
+    const options = optionsFromImagePalette({
+      ...EMPTY,
+      vibrant: '#e14',
+      lightMuted: '#abc',
+      darkMuted: '#345',
+    })
+
+    expect(options.light?.background).toMatch(/^#[0-9a-f]{6}$/)
+    expect(options.dark?.background).toMatch(/^#[0-9a-f]{6}$/)
+    expect(options.light?.accent).toMatch(/^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/)
+    expect(applyImagePalette({}, {...EMPTY, lightMuted: '#abc'}).light?.background).toBe(
+      applyImagePalette({}, {...EMPTY, lightMuted: '#aabbcc'}).light?.background,
+    )
+  })
+})
diff --git a/plugins/@sanity/themer/src/tool/imagePalette.ts b/plugins/@sanity/themer/src/tool/imagePalette.ts
new file mode 100644
index 0000000000..4db4d25e12
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/imagePalette.ts
@@ -0,0 +1,498 @@
+import {type ThemeColorSchemeKey} from '@sanity/ui/theme'
+
+import {hexToHsl, hslToHex, relativeLuminance} from '../theme/hsl'
+import {
+  type BuildThemeOptions,
+  DEFAULT_BACKGROUND,
+  SCHEMES,
+  type SchemeThemeOptions,
+} from '../theme/options'
+
+/**
+ * The swatches of an image palette — the same set the Sanity image pipeline
+ * derives for uploaded assets (`metadata.palette`), extracted on device here.
+ *
+ * @internal
+ */
+export type ImagePaletteKey =
+  | 'dominant'
+  | 'vibrant'
+  | 'lightVibrant'
+  | 'darkVibrant'
+  | 'muted'
+  | 'lightMuted'
+  | 'darkMuted'
+
+/**
+ * An image palette: a hex color per swatch, or `null` when the image has no
+ * color that qualifies for it.
+ *
+ * @internal
+ */
+export type ImagePalette = Record<ImagePaletteKey, string | null>
+
+/** @internal */
+export const IMAGE_PALETTE_KEYS: ImagePaletteKey[] = [
+  'vibrant',
+  'lightVibrant',
+  'darkVibrant',
+  'muted',
+  'lightMuted',
+  'darkMuted',
+  'dominant',
+]
+
+/**
+ * The swatches a theme can be built around — every swatch but the dominant
+ * one, which only repeats one of them.
+ *
+ * @internal
+ */
+export type ImagePaletteVariant = Exclude<ImagePaletteKey, 'dominant'>
+
+/** The variants in the order the tool offers them @internal */
+export const IMAGE_PALETTE_VARIANTS: ImagePaletteVariant[] = [
+  'muted',
+  'vibrant',
+  'lightMuted',
+  'lightVibrant',
+  'darkMuted',
+  'darkVibrant',
+]
+
+/** @internal */
+export const IMAGE_PALETTE_TITLES: Record<ImagePaletteKey, string> = {
+  dominant: 'Dominant',
+  vibrant: 'Vibrant',
+  lightVibrant: 'Light vibrant',
+  darkVibrant: 'Dark vibrant',
+  muted: 'Muted',
+  lightMuted: 'Light muted',
+  darkMuted: 'Dark muted',
+}
+
+/** Pixels the way a canvas hands them out: rows of RGBA bytes @internal */
+export interface PixelData {
+  data: ArrayLike<number>
+  width: number
+  height: number
+}
+
+interface Bucket {
+  count: number
+  r: number
+  g: number
+  b: number
+}
+
+interface Candidate {
+  hex: string
+  population: number
+  saturation: number
+  lightness: number
+}
+
+/** What a swatch looks for: a lightness and saturation to aim at, within bounds */
+interface Target {
+  lightness: [target: number, min: number, max: number]
+  saturation: [target: number, min: number, max: number]
+}
+
+/**
+ * The swatch targets of the Vibrant algorithm (the one behind Sanity's image
+ * palettes), in the order they get to claim colors.
+ */
+const TARGETS: Array<[key: Exclude<ImagePaletteKey, 'dominant'>, target: Target]> = [
+  ['vibrant', {lightness: [0.5, 0.3, 0.7], saturation: [1, 0.35, 1]}],
+  ['lightVibrant', {lightness: [0.74, 0.55, 1], saturation: [1, 0.35, 1]}],
+  ['darkVibrant', {lightness: [0.26, 0, 0.45], saturation: [1, 0.35, 1]}],
+  ['muted', {lightness: [0.5, 0.3, 0.7], saturation: [0.3, 0, 0.4]}],
+  ['lightMuted', {lightness: [0.74, 0.55, 1], saturation: [0.3, 0, 0.4]}],
+  ['darkMuted', {lightness: [0.26, 0, 0.45], saturation: [0.3, 0, 0.4]}],
+]
+
+const SATURATION_WEIGHT = 3
+const LIGHTNESS_WEIGHT = 6.5
+const POPULATION_WEIGHT = 0.5
+
+/** Pixels this transparent are not part of the picture */
+const MINIMUM_ALPHA = 125
+
+/** Near-black and near-white pixels are backdrop rather than color */
+const MINIMUM_LIGHTNESS = 0.05
+const MAXIMUM_LIGHTNESS = 0.95
+
+/** How many of the 8 bits per channel survive the quantization */
+const QUANTIZE_BITS = 5
+
+/**
+ * Extracts the color palette of an image from its pixels, the way the Vibrant
+ * algorithm does: the colors are quantized into a coarse histogram, and each
+ * swatch claims the color that comes closest to its target lightness and
+ * saturation — weighted by how much of the image it covers — that no other
+ * swatch has claimed yet. The dominant swatch is simply the most common
+ * color. Runs anywhere pixels come from, so it can run on device.
+ *
+ * @internal
+ */
+export function extractImagePalette(pixels: PixelData): ImagePalette {
+  const candidates = quantize(pixels)
+  const palette: ImagePalette = {
+    dominant: null,
+    vibrant: null,
+    lightVibrant: null,
+    darkVibrant: null,
+    muted: null,
+    lightMuted: null,
+    darkMuted: null,
+  }
+
+  if (candidates.length === 0) return palette
+
+  const maximumPopulation = Math.max(...candidates.map((candidate) => candidate.population))
+  const claimed = new Set<string>()
+
+  for (const [key, target] of TARGETS) {
+    let best: Candidate | null = null
+    let bestScore = -Infinity
+
+    for (const candidate of candidates) {
+      if (claimed.has(candidate.hex) || !matchesTarget(candidate, target)) continue
+
+      const score = scoreCandidate(candidate, target, maximumPopulation)
+
+      if (score > bestScore) {
+        best = candidate
+        bestScore = score
+      }
+    }
+
+    if (best) {
+      palette[key] = best.hex
+      claimed.add(best.hex)
+    }
+  }
+
+  palette.dominant = candidates.reduce((most, candidate) =>
+    candidate.population > most.population ? candidate : most,
+  ).hex
+
+  return palette
+}
+
+/**
+ * Turns the pixels into a histogram of quantized colors, each averaged over
+ * the pixels it stands for, leaving out transparent pixels and the near-black
+ * and near-white ones that are backdrop rather than color.
+ */
+function quantize(pixels: PixelData): Candidate[] {
+  const {data} = pixels
+  const buckets = new Map<number, Bucket>()
+  const shift = 8 - QUANTIZE_BITS
+  const length = Math.min(data.length, pixels.width * pixels.height * 4)
+
+  for (let offset = 0; offset + 3 < length; offset += 4) {
+    const r = data[offset]
+    const g = data[offset + 1]
+    const b = data[offset + 2]
+    const a = data[offset + 3]
+
+    if (a < MINIMUM_ALPHA) continue
+
+    const lightness = (Math.max(r, g, b) + Math.min(r, g, b)) / 510
+
+    if (lightness < MINIMUM_LIGHTNESS || lightness > MAXIMUM_LIGHTNESS) continue
+
+    const key =
+      ((r >> shift) << (QUANTIZE_BITS * 2)) | ((g >> shift) << QUANTIZE_BITS) | (b >> shift)
+    const bucket = buckets.get(key)
+
+    if (bucket) {
+      bucket.count++
+      bucket.r += r
+      bucket.g += g
+      bucket.b += b
+    } else {
+      buckets.set(key, {count: 1, r, g, b})
+    }
+  }
+
+  const candidates: Candidate[] = []
+
+  for (const bucket of buckets.values()) {
+    const r = Math.round(bucket.r / bucket.count)
+    const g = Math.round(bucket.g / bucket.count)
+    const b = Math.round(bucket.b / bucket.count)
+    const {saturation, lightness} = saturationAndLightness(r, g, b)
+
+    candidates.push({hex: rgbToHex(r, g, b), population: bucket.count, saturation, lightness})
+  }
+
+  return candidates
+}
+
+function matchesTarget(candidate: Candidate, target: Target): boolean {
+  return (
+    candidate.lightness >= target.lightness[1] &&
+    candidate.lightness <= target.lightness[2] &&
+    candidate.saturation >= target.saturation[1] &&
+    candidate.saturation <= target.saturation[2]
+  )
+}
+
+function scoreCandidate(candidate: Candidate, target: Target, maximumPopulation: number): number {
+  return (
+    SATURATION_WEIGHT * (1 - Math.abs(candidate.saturation - target.saturation[0])) +
+    LIGHTNESS_WEIGHT * (1 - Math.abs(candidate.lightness - target.lightness[0])) +
+    POPULATION_WEIGHT * (candidate.population / maximumPopulation)
+  )
+}
+
+function saturationAndLightness(r: number, g: number, b: number) {
+  const max = Math.max(r, g, b) / 255
+  const min = Math.min(r, g, b) / 255
+  const lightness = (max + min) / 2
+  const delta = max - min
+  const saturation =
+    delta === 0 ? 0 : lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min)
+
+  return {saturation, lightness}
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return `#${[r, g, b].map((channel) => channel.toString(16).padStart(2, '0')).join('')}`
+}
+
+/** Reads `#rgb` and `#rrggbb` alike — stored palettes may hold either */
+function hexToRgb(hex: string): [number, number, number] {
+  const expanded =
+    hex.length === 4 ? `${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}` : hex.slice(1)
+
+  return [
+    parseInt(expanded.slice(0, 2), 16),
+    parseInt(expanded.slice(2, 4), 16),
+    parseInt(expanded.slice(4, 6), 16),
+  ]
+}
+
+/** Mixes `amount` of `color` into `base` */
+function tint(base: string, color: string, amount: number): string {
+  const [r1, g1, b1] = hexToRgb(base)
+  const [r2, g2, b2] = hexToRgb(color)
+
+  return rgbToHex(
+    Math.round(r1 + (r2 - r1) * amount),
+    Math.round(g1 + (g2 - g1) * amount),
+    Math.round(b1 + (b2 - b1) * amount),
+  )
+}
+
+/** How much of the palette tints each scheme's stock background */
+const BACKGROUND_TINT = {light: 0.08, dark: 0.3}
+
+/**
+ * The WCAG AA contrast for normal text — what a button label needs against
+ * the button. Sanity UI labels solid buttons in white on the accent's 500
+ * tint in the light scheme and in black on its 400 tint in the dark scheme
+ * (lighter than the accent, so an accent that passes against black passes
+ * there too).
+ */
+const MINIMUM_ACCENT_CONTRAST = 4.5
+const BUTTON_LABEL: Record<ThemeColorSchemeKey, string> = {light: '#ffffff', dark: '#000000'}
+const ACCENT_LIGHTNESS_STEP = 0.01
+
+function contrastRatio(a: string, b: string): number {
+  const [lighter, darker] = [relativeLuminance(a), relativeLuminance(b)].sort((x, y) => y - x)
+
+  return (lighter + 0.05) / (darker + 0.05)
+}
+
+/**
+ * Makes an accent readable as a button in the given scheme: a light scheme
+ * accent is darkened until white text on it reaches AA contrast, a dark
+ * scheme accent lightened until black text does — as far as the accent's
+ * hue and saturation allow. Accents that already pass come back untouched.
+ *
+ * @internal
+ */
+export function readableAccent(hex: string, scheme: ThemeColorSchemeKey): string {
+  const label = BUTTON_LABEL[scheme]
+  const {h, s} = hexToHsl(hex)
+  let {l} = hexToHsl(hex)
+  let current = hex
+
+  while (contrastRatio(current, label) < MINIMUM_ACCENT_CONTRAST) {
+    const next = scheme === 'light' ? l - ACCENT_LIGHTNESS_STEP : l + ACCENT_LIGHTNESS_STEP
+
+    if (next < 0 || next > 1) break
+
+    l = next
+    current = hslToHex({h, s, l})
+  }
+
+  return current
+}
+
+/** The accent a variant gives a scheme, made readable on a button */
+function variantAccent(
+  palette: ImagePalette,
+  variant: ImagePaletteVariant | null,
+  scheme: ThemeColorSchemeKey,
+): string | null {
+  const swatch =
+    (variant ? palette[variant] : null) ??
+    palette.vibrant ??
+    (scheme === 'light' ? palette.darkVibrant : palette.lightVibrant) ??
+    palette.dominant
+
+  return swatch === null ? null : readableAccent(swatch, scheme)
+}
+
+/**
+ * Derives theme options from an image palette: the accent of both schemes is
+ * the swatch of the chosen variant — or, without one, the vibrant swatch,
+ * each scheme falling back to the vibrant swatch of its own end of the scale —
+ * adjusted until it is readable as a button. The muted swatch becomes the text color, and the light and dark muted
+ * swatches tint the stock backgrounds of their scheme — enough to carry the
+ * image's tone without giving up a usable canvas. Whatever the palette lacks
+ * stays at the theme defaults.
+ *
+ * @internal
+ */
+export function optionsFromImagePalette(
+  palette: ImagePalette,
+  variant?: ImagePaletteVariant,
+): BuildThemeOptions {
+  const options: BuildThemeOptions = {}
+
+  const light = schemeFromPalette(
+    variantAccent(palette, variant ?? null, 'light'),
+    palette.muted ?? palette.darkMuted,
+    palette.lightMuted ?? palette.muted ?? palette.lightVibrant,
+    'light',
+  )
+  const dark = schemeFromPalette(
+    variantAccent(palette, variant ?? null, 'dark'),
+    palette.muted ?? palette.lightMuted,
+    palette.darkMuted ?? palette.muted ?? palette.darkVibrant,
+    'dark',
+  )
+
+  if (light) options.light = light
+  if (dark) options.dark = dark
+
+  return options
+}
+
+function schemeFromPalette(
+  accent: string | null,
+  text: string | null,
+  backgroundTint: string | null,
+  scheme: 'light' | 'dark',
+): SchemeThemeOptions | null {
+  const options: SchemeThemeOptions = {}
+
+  if (accent) options.accent = accent
+  if (text) options.text = text
+  if (backgroundTint) {
+    options.background = tint(DEFAULT_BACKGROUND[scheme], backgroundTint, BACKGROUND_TINT[scheme])
+  }
+
+  return Object.keys(options).length > 0 ? options : null
+}
+
+/**
+ * Applies an image palette to existing theme options: the colors the palette
+ * provides replace the current ones scheme by scheme, and whatever it does
+ * not touch — like the contrast — stays as it is.
+ *
+ * @internal
+ */
+export function applyImagePalette(
+  options: BuildThemeOptions,
+  palette: ImagePalette,
+  variant?: ImagePaletteVariant,
+): BuildThemeOptions {
+  const derived = optionsFromImagePalette(palette, variant)
+  const next: BuildThemeOptions = {...options}
+
+  for (const scheme of SCHEMES) {
+    if (derived[scheme]) next[scheme] = {...options[scheme], ...derived[scheme]}
+  }
+
+  return next
+}
+
+/**
+ * The variant a theme is built around: the one whose swatch is the theme's
+ * accent, or `null` when the accent comes from somewhere else.
+ *
+ * @internal
+ */
+export function currentImageVariant(
+  options: BuildThemeOptions,
+  palette: ImagePalette,
+): ImagePaletteVariant | null {
+  const accent = options.light?.accent
+
+  if (!accent) return null
+
+  return (
+    IMAGE_PALETTE_VARIANTS.find(
+      (variant) => palette[variant] !== null && variantAccent(palette, variant, 'light') === accent,
+    ) ?? null
+  )
+}
+
+/**
+ * How much a swatch has going for it as an accent: saturation first, then
+ * closeness to mid lightness — the range where an accent reads best.
+ */
+function interest(hex: string): number {
+  const {s, l} = hexToHsl(hex)
+
+  return 0.1 + 0.55 * s + 0.35 * (1 - Math.abs(l - 0.5) * 2)
+}
+
+/**
+ * Picks a variant for the "I'm feeling lucky" button: a random one, weighted
+ * by how interesting its swatch is as an accent, and never the one the theme
+ * already uses while there are others to pick from.
+ *
+ * @internal
+ */
+export function pickLuckyVariant(
+  palette: ImagePalette,
+  options: {exclude?: ImagePaletteVariant | null; random?: () => number} = {},
+): ImagePaletteVariant | null {
+  const {exclude = null, random = Math.random} = options
+  let candidates = IMAGE_PALETTE_VARIANTS.filter((variant) => palette[variant] !== null)
+
+  if (candidates.length > 1) {
+    candidates = candidates.filter((variant) => variant !== exclude)
+  }
+
+  if (candidates.length === 0) return null
+
+  const weights = candidates.map((variant) => interest(palette[variant]!))
+  const total = weights.reduce((sum, weight) => sum + weight, 0)
+  let pick = random() * total
+
+  for (const [index, variant] of candidates.entries()) {
+    pick -= weights[index]
+
+    if (pick < 0) return variant
+  }
+
+  return candidates.at(-1) ?? null
+}
+
+/** A theme title for the image a palette came from, e.g. `sunset-beach.jpg` → `sunset beach` @internal */
+export function titleFromFileName(name: string): string {
+  return (
+    name
+      .replace(/\.[^.]+$/, '')
+      .replace(/[-_]+/g, ' ')
+      .trim() || 'Image theme'
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/index.ts b/plugins/@sanity/themer/src/tool/index.ts
new file mode 100644
index 0000000000..c18104084a
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/index.ts
@@ -0,0 +1 @@
+export {themerTool, type ThemerToolOptions} from './plugin'
diff --git a/plugins/@sanity/themer/src/tool/machine.test.ts b/plugins/@sanity/themer/src/tool/machine.test.ts
new file mode 100644
index 0000000000..f8f4417d35
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/machine.test.ts
@@ -0,0 +1,524 @@
+import {afterEach, describe, expect, it, vi} from 'vitest'
+import {createActor, SimulatedClock} from 'xstate'
+
+import {presets} from '../theme/presets'
+import {MOTION_DURATION, selectStoredState, type ThemerInput, themerMachine} from './machine'
+import {
+  CONFIG_SLUG,
+  type CustomTheme,
+  initialThemerState,
+  resolveThemes,
+  type ThemerState,
+} from './themes'
+
+const baseOptions = {light: {accent: '#123456'}}
+const custom: CustomTheme = {slug: 'custom-1', title: 'Mine', options: {light: {accent: '#ff0000'}}}
+const verdant = presets.find((preset) => preset.slug === 'verdant')!
+
+/** The clock the layout motions run on, so tests can let them finish */
+const clock = new SimulatedClock()
+
+function start(stored: ThemerState = initialThemerState, input: Partial<ThemerInput> = {}) {
+  return createActor(themerMachine, {clock, input: {baseOptions, stored, ...input}}).start()
+}
+
+/** Lets a motion the layout never reports on run out */
+function settle() {
+  clock.increment(MOTION_DURATION)
+}
+
+function startWithCustom(overrides: Partial<ThemerState> = {}) {
+  return start({active: null, custom: [custom], removed: [], order: [], ...overrides})
+}
+
+describe('themerMachine', () => {
+  it('starts closed in the list with a single preview, from the stored state', () => {
+    const stored: ThemerState = {
+      active: 'verdant',
+      custom: [custom],
+      removed: ['dew'],
+      order: ['dew', 'verdant'],
+    }
+    const actor = start(stored)
+    const snapshot = actor.getSnapshot()
+
+    expect(snapshot.matches({sidebar: 'closed', flow: 'list', preview: 'single'})).toBe(true)
+    expect(selectStoredState(snapshot)).toEqual(stored)
+    expect(snapshot.context.baseOptions).toBe(baseOptions)
+    expect(snapshot.context.editing).toBeNull()
+  })
+
+  it('opens and closes the sidebar through a motion, without touching the flow', () => {
+    const actor = startWithCustom()
+
+    actor.send({type: 'theme.edit', slug: 'custom-1'})
+    actor.send({type: 'sidebar.toggle'})
+    // The panel shows from the first moment, and the layout is in motion
+    expect(actor.getSnapshot().matches({sidebar: 'opening', flow: 'edit'})).toBe(true)
+    expect(actor.getSnapshot().hasTag('panel')).toBe(true)
+    expect(actor.getSnapshot().hasTag('moving')).toBe(true)
+
+    settle()
+    expect(actor.getSnapshot().matches({sidebar: 'open', flow: 'edit'})).toBe(true)
+    expect(actor.getSnapshot().hasTag('moving')).toBe(false)
+
+    actor.send({type: 'sidebar.toggle'})
+    expect(actor.getSnapshot().matches({sidebar: 'closing', flow: 'edit'})).toBe(true)
+    expect(actor.getSnapshot().hasTag('panel')).toBe(false)
+    expect(actor.getSnapshot().hasTag('moving')).toBe(true)
+
+    // The layout reporting its transition ends the motion before the timer would
+    actor.send({type: 'layout.transitioned'})
+    expect(actor.getSnapshot().matches({sidebar: 'closed', flow: 'edit'})).toBe(true)
+    expect(actor.getSnapshot().hasTag('moving')).toBe(false)
+
+    // Toggling again mid-motion turns the motion around
+    actor.send({type: 'sidebar.toggle'})
+    actor.send({type: 'sidebar.close'})
+    expect(actor.getSnapshot().matches({sidebar: 'closing', flow: 'edit'})).toBe(true)
+    actor.send({type: 'sidebar.toggle'})
+    expect(actor.getSnapshot().matches({sidebar: 'opening', flow: 'edit'})).toBe(true)
+  })
+
+  it('splits the preview and back without touching the sidebar, the flow or the themes', () => {
+    const actor = startWithCustom({active: 'custom-1'})
+
+    actor.send({type: 'sidebar.toggle'})
+    actor.send({type: 'theme.edit', slug: 'custom-1'})
+    settle()
+    const stored = selectStoredState(actor.getSnapshot())
+
+    actor.send({type: 'preview.toggle'})
+    expect(actor.getSnapshot().matches({sidebar: 'open', flow: 'edit', preview: 'splitting'})).toBe(
+      true,
+    )
+    expect(actor.getSnapshot().hasTag('split')).toBe(true)
+    expect(actor.getSnapshot().hasTag('moving')).toBe(true)
+    expect(selectStoredState(actor.getSnapshot())).toEqual(stored)
+
+    settle()
+    expect(actor.getSnapshot().matches({preview: 'split'})).toBe(true)
+    expect(actor.getSnapshot().hasTag('moving')).toBe(false)
+
+    actor.send({type: 'preview.toggle'})
+    expect(actor.getSnapshot().matches({preview: 'unsplitting'})).toBe(true)
+    expect(actor.getSnapshot().hasTag('split')).toBe(false)
+
+    settle()
+    expect(actor.getSnapshot().matches({sidebar: 'open', flow: 'edit', preview: 'single'})).toBe(
+      true,
+    )
+  })
+
+  it('ends the split preview when the sidebar closes, from its header or the navbar', () => {
+    const actor = start()
+
+    actor.send({type: 'sidebar.toggle'})
+    actor.send({type: 'preview.toggle'})
+    settle()
+    actor.send({type: 'sidebar.close'})
+    // Both leave together
+    expect(actor.getSnapshot().matches({sidebar: 'closing', preview: 'unsplitting'})).toBe(true)
+    settle()
+    expect(actor.getSnapshot().matches({sidebar: 'closed', preview: 'single'})).toBe(true)
+
+    actor.send({type: 'sidebar.toggle'})
+    expect(actor.getSnapshot().hasTag('panel')).toBe(true)
+    expect(actor.getSnapshot().hasTag('split')).toBe(false)
+
+    // From the navbar too, even while the split is still arriving
+    actor.send({type: 'preview.toggle'})
+    actor.send({type: 'sidebar.toggle'})
+    expect(actor.getSnapshot().matches({sidebar: 'closing', preview: 'unsplitting'})).toBe(true)
+
+    // Opening the sidebar is not a way to split
+    actor.send({type: 'sidebar.toggle'})
+    expect(actor.getSnapshot().matches({sidebar: 'opening', preview: 'unsplitting'})).toBe(true)
+  })
+
+  describe('picking', () => {
+    it('is switching themes right after a pick, not after an edit', () => {
+      const actor = startWithCustom()
+
+      expect(actor.getSnapshot().hasTag('switching')).toBe(false)
+
+      actor.send({type: 'theme.pick', slug: 'custom-1'})
+      expect(actor.getSnapshot().hasTag('switching')).toBe(true)
+
+      actor.send({type: 'layout.transitioned'})
+      expect(actor.getSnapshot().hasTag('switching')).toBe(false)
+
+      actor.send({type: 'theme.update', slug: 'custom-1', options: {light: {accent: '#00ff00'}}})
+      expect(actor.getSnapshot().hasTag('switching')).toBe(false)
+
+      // Only what changes the applied theme is a switch: editing, duplicating or
+      // picking the applied one, adding a copy of it, or removing another theme
+      // leaves the Studio looking the same
+      actor.send({type: 'theme.edit', slug: 'custom-1'})
+      actor.send({type: 'theme.pick', slug: 'custom-1'})
+      actor.send({type: 'theme.duplicate', slug: 'custom-1'})
+      actor.send({type: 'theme.add'})
+      actor.send({type: 'theme.remove', slug: 'verdant'})
+      expect(actor.getSnapshot().hasTag('switching')).toBe(false)
+
+      actor.send({type: 'theme.add', options: {dark: {accent: '#0000ff'}}})
+      expect(actor.getSnapshot().hasTag('switching')).toBe(true)
+      actor.send({type: 'layout.transitioned'})
+
+      // Without word from the layout, the switch is over after the motion's duration
+      const applied = actor.getSnapshot().context.active!
+
+      actor.send({type: 'theme.remove', slug: applied})
+      expect(actor.getSnapshot().hasTag('switching')).toBe(true)
+      settle()
+      expect(actor.getSnapshot().hasTag('switching')).toBe(false)
+    })
+
+    it('applies a theme, and picking the configured theme applies nothing', () => {
+      const actor = start()
+
+      actor.send({type: 'theme.pick', slug: 'verdant'})
+      expect(actor.getSnapshot().context.active).toBe('verdant')
+
+      actor.send({type: 'theme.pick', slug: CONFIG_SLUG})
+      expect(actor.getSnapshot().context.active).toBeNull()
+    })
+  })
+
+  describe('adding', () => {
+    it('adds a theme based on the applied one and opens it in the editor', () => {
+      const actor = start({...initialThemerState, active: 'verdant'})
+
+      actor.send({type: 'theme.add'})
+
+      const {context} = actor.getSnapshot()
+
+      expect(actor.getSnapshot().matches({flow: 'edit'})).toBe(true)
+      expect(context.custom).toHaveLength(1)
+      expect(context.custom[0]).toMatchObject({title: 'Untitled theme', options: verdant.options})
+      expect(context.custom[0].slug).toMatch(/^custom-/)
+      expect(context.active).toBe(context.custom[0].slug)
+      expect(context.editing).toEqual({slug: context.custom[0].slug, focusTitle: true})
+    })
+
+    it('adds a theme from given colors, like the palette of an image, without asking for a title', () => {
+      const actor = start()
+      const palette = {
+        dominant: '#e11d48',
+        vibrant: '#e11d48',
+        lightVibrant: null,
+        darkVibrant: null,
+        muted: '#7a7e8a',
+        lightMuted: null,
+        darkMuted: null,
+      }
+
+      actor.send({
+        type: 'theme.add',
+        title: 'sunset beach',
+        options: {light: {accent: '#e11d48'}},
+        palette,
+      })
+
+      const {context} = actor.getSnapshot()
+
+      expect(actor.getSnapshot().matches({flow: 'edit'})).toBe(true)
+      expect(context.custom[0]).toMatchObject({
+        title: 'sunset beach',
+        options: {light: {accent: '#e11d48'}},
+        palette,
+      })
+      expect(context.editing).toEqual({slug: context.custom[0].slug, focusTitle: false})
+
+      actor.send({
+        type: 'theme.update',
+        slug: context.custom[0].slug,
+        options: {dark: {accent: '#7a7e8a'}},
+        palette: {...palette, vibrant: '#7a7e8a'},
+      })
+      expect(actor.getSnapshot().context.custom[0]).toMatchObject({
+        options: {dark: {accent: '#7a7e8a'}},
+        palette: {...palette, vibrant: '#7a7e8a'},
+      })
+    })
+
+    it('keeps the image of a theme for the session, and lets it go with the theme', () => {
+      const actor = start()
+      const palette = {
+        dominant: '#e11d48',
+        vibrant: '#e11d48',
+        lightVibrant: null,
+        darkVibrant: null,
+        muted: null,
+        lightMuted: null,
+        darkMuted: null,
+      }
+
+      const revoke = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => undefined)
+
+      actor.send({type: 'theme.add', title: 'sunset', palette, imageUrl: 'blob:one'})
+
+      const slug = actor.getSnapshot().context.custom[0].slug
+
+      expect(actor.getSnapshot().context.images).toEqual({[slug]: 'blob:one'})
+      expect(selectStoredState(actor.getSnapshot())).not.toHaveProperty('images')
+
+      // A new image releases the one it replaces
+      actor.send({type: 'theme.update', slug, palette, imageUrl: 'blob:two'})
+      expect(actor.getSnapshot().context.images).toEqual({[slug]: 'blob:two'})
+      expect(revoke.mock.calls).toEqual([['blob:one']])
+
+      actor.send({type: 'theme.update', slug: 'verdant', imageUrl: 'blob:nope'})
+      expect(actor.getSnapshot().context.images).toEqual({[slug]: 'blob:two'})
+
+      actor.send({type: 'theme.duplicate', slug})
+      const copy = actor.getSnapshot().context.custom[1]
+
+      expect(copy.palette).toEqual(palette)
+      expect(actor.getSnapshot().context.images).toEqual({[slug]: 'blob:two'})
+
+      actor.send({type: 'theme.remove', slug})
+      actor.send({type: 'theme.delete', slug})
+      expect(actor.getSnapshot().context.images).toEqual({})
+      expect(revoke.mock.calls).toEqual([['blob:one'], ['blob:two']])
+    })
+
+    it('duplicates listed and removed themes into the editor', () => {
+      const actor = startWithCustom({removed: ['custom-1']})
+
+      actor.send({type: 'theme.duplicate', slug: 'verdant'})
+
+      let {context} = actor.getSnapshot()
+
+      expect(actor.getSnapshot().matches({flow: 'edit'})).toBe(true)
+      expect(context.custom.at(-1)).toMatchObject({title: 'Verdant copy', options: verdant.options})
+      expect(context.editing).toEqual({slug: context.active, focusTitle: true})
+
+      actor.send({type: 'theme.duplicate', slug: 'custom-1'})
+      context = actor.getSnapshot().context
+      expect(context.custom.at(-1)).toMatchObject({title: 'Mine copy', options: custom.options})
+      expect(context.custom).toHaveLength(3)
+    })
+
+    it('does not open the editor when there is nothing to duplicate', () => {
+      const actor = start()
+
+      actor.send({type: 'theme.duplicate', slug: 'unknown'})
+
+      expect(actor.getSnapshot().matches({flow: 'list'})).toBe(true)
+      expect(actor.getSnapshot().context.custom).toEqual([])
+      expect(actor.getSnapshot().context.editing).toBeNull()
+    })
+  })
+
+  describe('editing', () => {
+    it('edits and applies custom themes only', () => {
+      const actor = startWithCustom()
+
+      actor.send({type: 'theme.edit', slug: 'verdant'})
+      expect(actor.getSnapshot().matches({flow: 'list'})).toBe(true)
+
+      actor.send({type: 'theme.edit', slug: 'custom-1'})
+      expect(actor.getSnapshot().matches({flow: 'edit'})).toBe(true)
+      expect(actor.getSnapshot().context.active).toBe('custom-1')
+      expect(actor.getSnapshot().context.editing).toEqual({slug: 'custom-1', focusTitle: false})
+    })
+
+    it('does not edit removed themes', () => {
+      const actor = startWithCustom({removed: ['custom-1']})
+
+      actor.send({type: 'theme.edit', slug: 'custom-1'})
+
+      expect(actor.getSnapshot().matches({flow: 'list'})).toBe(true)
+    })
+
+    it('updates a theme, keeping the options identity when only the title changes', () => {
+      const actor = startWithCustom()
+
+      actor.send({type: 'theme.update', slug: 'custom-1', title: 'Ours'})
+      expect(actor.getSnapshot().context.custom[0].title).toBe('Ours')
+      expect(actor.getSnapshot().context.custom[0].options).toBe(custom.options)
+
+      actor.send({type: 'theme.update', slug: 'custom-1', options: {dark: {accent: '#00ff00'}}})
+      expect(actor.getSnapshot().context.custom[0]).toEqual({
+        slug: 'custom-1',
+        title: 'Ours',
+        options: {dark: {accent: '#00ff00'}},
+      })
+
+      actor.send({type: 'theme.update', slug: 'verdant', title: 'Nope'})
+      expect(actor.getSnapshot().context.custom).toHaveLength(1)
+    })
+
+    it('leaves the editor when done, and when the theme is removed or deleted', () => {
+      const actor = startWithCustom()
+
+      actor.send({type: 'theme.edit', slug: 'custom-1'})
+      actor.send({type: 'flow.list'})
+      expect(actor.getSnapshot().matches({flow: 'list'})).toBe(true)
+      expect(actor.getSnapshot().context.editing).toBeNull()
+
+      actor.send({type: 'theme.edit', slug: 'custom-1'})
+      actor.send({type: 'theme.remove', slug: 'custom-1'})
+      expect(actor.getSnapshot().matches({flow: 'list'})).toBe(true)
+      expect(actor.getSnapshot().context.editing).toBeNull()
+      expect(actor.getSnapshot().context.active).toBeNull()
+
+      actor.send({type: 'theme.restore', slug: 'custom-1'})
+      actor.send({type: 'theme.edit', slug: 'custom-1'})
+      actor.send({type: 'theme.delete', slug: 'custom-1'})
+      expect(actor.getSnapshot().matches({flow: 'list'})).toBe(true)
+      expect(actor.getSnapshot().context.custom).toEqual([])
+    })
+
+    it('stays in the editor while other themes come and go', () => {
+      const actor = startWithCustom({active: 'custom-1'})
+
+      actor.send({type: 'theme.edit', slug: 'custom-1'})
+      actor.send({type: 'theme.remove', slug: 'verdant'})
+
+      expect(actor.getSnapshot().matches({flow: 'edit'})).toBe(true)
+      expect(actor.getSnapshot().context.active).toBe('custom-1')
+    })
+  })
+
+  describe('persisting', () => {
+    afterEach(() => {
+      vi.unstubAllGlobals()
+    })
+
+    it('writes the stored state on every change to it, and nothing else', () => {
+      const written: string[] = []
+
+      vi.stubGlobal('localStorage', {
+        getItem: () => null,
+        setItem: (_key: string, value: string) => void written.push(value),
+        removeItem: () => undefined,
+      })
+
+      const actor = startWithCustom()
+
+      // Once as it starts, which completes the migration of an earlier version's storage
+      expect(written).toHaveLength(1)
+      expect(JSON.parse(written[0])).toEqual(selectStoredState(actor.getSnapshot()))
+
+      actor.send({type: 'sidebar.toggle'})
+      actor.send({type: 'preview.toggle'})
+      expect(written).toHaveLength(1)
+
+      actor.send({type: 'theme.pick', slug: 'custom-1'})
+      expect(written).toHaveLength(2)
+      expect(JSON.parse(written[1])).toEqual(selectStoredState(actor.getSnapshot()))
+
+      actor.send({type: 'theme.reorder', order: ['custom-1', CONFIG_SLUG]})
+      actor.send({type: 'theme.remove', slug: 'custom-1'})
+      expect(written).toHaveLength(4)
+      expect(JSON.parse(written[3])).toEqual(selectStoredState(actor.getSnapshot()))
+    })
+  })
+
+  describe('importing', () => {
+    it('adds and applies a shared theme without opening the editor', () => {
+      const actor = start()
+
+      actor.send({type: 'sidebar.toggle'})
+      actor.send({type: 'theme.import', title: 'Shared', options: {dark: {accent: '#ff0000'}}})
+
+      const snapshot = actor.getSnapshot()
+      const stored = selectStoredState(snapshot)
+
+      expect(snapshot.hasTag('panel')).toBe(true)
+      expect(snapshot.matches({flow: 'list'})).toBe(true)
+      expect(stored.custom).toHaveLength(1)
+      expect(stored.custom[0]).toMatchObject({
+        title: 'Shared',
+        options: {dark: {accent: '#ff0000'}},
+      })
+      expect(stored.active).toBe(stored.custom[0].slug)
+      expect(snapshot.context.editing).toBeNull()
+    })
+  })
+
+  describe('rearranging', () => {
+    it('stores the order the listed themes were dragged into', () => {
+      const actor = startWithCustom()
+      const slugs = () =>
+        resolveThemes(actor.getSnapshot().context, baseOptions).themes.map((theme) => theme.slug)
+      const [first, second, ...rest] = slugs()
+
+      actor.send({type: 'theme.reorder', order: ['custom-1', second, first, ...rest.slice(0, -1)]})
+      expect(slugs()).toEqual(['custom-1', second, first, ...rest.slice(0, -1)])
+      expect(selectStoredState(actor.getSnapshot()).order).toEqual([
+        'custom-1',
+        second,
+        first,
+        ...rest.slice(0, -1),
+      ])
+    })
+
+    it('ignores slugs that are not listed, and keeps removed themes in line', () => {
+      const actor = startWithCustom({removed: ['dew'], order: ['dew', 'custom-1']})
+
+      actor.send({type: 'theme.reorder', order: ['verdant', 'unknown', 'dew', 'custom-1']})
+      expect(selectStoredState(actor.getSnapshot()).order).toEqual(['verdant', 'custom-1', 'dew'])
+
+      actor.send({type: 'theme.restore', slug: 'dew'})
+      expect(
+        resolveThemes(actor.getSnapshot().context, baseOptions)
+          .themes.slice(0, 3)
+          .map((theme) => theme.slug),
+      ).toEqual(['verdant', 'custom-1', 'dew'])
+    })
+  })
+
+  describe('removing and restoring', () => {
+    it('removes themes, falling back to the configured theme when the applied one goes', () => {
+      const actor = startWithCustom({active: 'custom-1'})
+
+      actor.send({type: 'theme.remove', slug: CONFIG_SLUG})
+      expect(actor.getSnapshot().context.removed).toEqual([])
+
+      actor.send({type: 'theme.remove', slug: 'verdant'})
+      expect(actor.getSnapshot().context.active).toBe('custom-1')
+
+      actor.send({type: 'theme.remove', slug: 'custom-1'})
+      actor.send({type: 'theme.remove', slug: 'custom-1'})
+      expect(selectStoredState(actor.getSnapshot())).toEqual({
+        active: null,
+        custom: [custom],
+        removed: ['verdant', 'custom-1'],
+        order: [],
+      })
+    })
+
+    it('only shows the removed themes while there are some', () => {
+      const actor = startWithCustom()
+
+      actor.send({type: 'flow.removed'})
+      expect(actor.getSnapshot().matches({flow: 'list'})).toBe(true)
+
+      actor.send({type: 'theme.remove', slug: 'verdant'})
+      actor.send({type: 'theme.remove', slug: 'custom-1'})
+      actor.send({type: 'flow.removed'})
+      expect(actor.getSnapshot().matches({flow: 'removed'})).toBe(true)
+
+      actor.send({type: 'theme.restore', slug: 'verdant'})
+      expect(actor.getSnapshot().matches({flow: 'removed'})).toBe(true)
+      expect(actor.getSnapshot().context.removed).toEqual(['custom-1'])
+
+      actor.send({type: 'theme.delete', slug: 'custom-1'})
+      expect(actor.getSnapshot().matches({flow: 'list'})).toBe(true)
+      expect(selectStoredState(actor.getSnapshot())).toEqual(initialThemerState)
+    })
+
+    it('deletes custom themes only', () => {
+      const actor = startWithCustom({active: 'custom-1', removed: ['custom-1']})
+
+      actor.send({type: 'theme.delete', slug: 'verdant'})
+      expect(actor.getSnapshot().context.removed).toEqual(['custom-1'])
+
+      actor.send({type: 'theme.delete', slug: 'custom-1'})
+      expect(selectStoredState(actor.getSnapshot())).toEqual(initialThemerState)
+    })
+  })
+})
diff --git a/plugins/@sanity/themer/src/tool/machine.ts b/plugins/@sanity/themer/src/tool/machine.ts
new file mode 100644
index 0000000000..99dd913698
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/machine.ts
@@ -0,0 +1,567 @@
+import {assign, not, or, setup, type SnapshotFrom, stateIn} from 'xstate'
+
+import type {BuildThemeOptions} from '../theme/options'
+import type {ImagePalette} from './imagePalette'
+import {writeStoredState} from './storage'
+import {
+  CONFIG_SLUG,
+  createCustomTheme,
+  duplicateTitle,
+  resolveThemes,
+  type ThemerState,
+  UNTITLED_THEME,
+} from './themes'
+
+/**
+ * How long the layout's motions — the panel's and the split preview's, and
+ * the cross-fade to another theme — are taken to last when the layout never
+ * says: it reports every view transition it starts, so this only ends a
+ * motion that has none (reduced motion, a browser without view transitions),
+ * where the `moving` and `switching` tags have nothing to affect. Generous,
+ * so that it never runs out before a slow deferred commit starts the real one.
+ *
+ * @internal
+ */
+export const MOTION_DURATION = 2000
+
+/** What the themer machine starts from @internal */
+export interface ThemerInput {
+  /** The theme options the Studio's configured theme was generated from */
+  baseOptions: BuildThemeOptions
+  /** The persisted state of an earlier session */
+  stored: ThemerState
+}
+
+/** @internal */
+export interface ThemerMachineContext extends ThemerState {
+  baseOptions: BuildThemeOptions
+  /** The theme open in the editor, while the `flow` is `edit` */
+  editing: {
+    slug: string
+    /** Whether the title input should take focus, for themes that were just created */
+    focusTitle: boolean
+  } | null
+  /**
+   * Object URLs of the images that themes took their palette from, by theme
+   * slug — kept for the session only, so the image can be shown right after
+   * it was picked
+   */
+  images: Record<string, string>
+}
+
+/** @internal */
+export type ThemerEvent =
+  | {type: 'sidebar.toggle'}
+  | {type: 'sidebar.close'}
+  /**
+   * A view transition of the layout is under way — the panel or the split copy
+   * arriving or leaving, the Studio giving way, taking room or cross-fading to
+   * another theme — and the layout is no longer `moving` or `switching` for
+   * the machine
+   */
+  | {type: 'layout.transitioned'}
+  /**
+   * Switches between showing the Studio once, in its own appearance, and
+   * twice side by side, in light and dark
+   */
+  | {type: 'preview.toggle'}
+  /** Applies a theme to the whole Studio */
+  | {type: 'theme.pick'; slug: string}
+  /**
+   * Adds a theme and opens it in the editor — based on the applied theme, or
+   * on the given title, options and image palette (e.g. from an image)
+   */
+  | {
+      type: 'theme.add'
+      title?: string
+      options?: BuildThemeOptions
+      palette?: ImagePalette
+      imageUrl?: string
+    }
+  /** Adds a copy of a theme and opens it in the editor */
+  | {type: 'theme.duplicate'; slug: string}
+  /** Adds a theme someone shared as a code, and applies it — staying in the list */
+  | {type: 'theme.import'; title: string; options: BuildThemeOptions}
+  /** Opens one of the user's own themes in the editor */
+  | {type: 'theme.edit'; slug: string}
+  | {
+      type: 'theme.update'
+      slug: string
+      title?: string
+      options?: BuildThemeOptions
+      palette?: ImagePalette
+      imageUrl?: string
+    }
+  /** Takes a theme out of the list — it can be restored until it is deleted */
+  | {type: 'theme.remove'; slug: string}
+  /** Puts a removed theme back in the list */
+  | {type: 'theme.restore'; slug: string}
+  /** Deletes one of the user's own themes for good */
+  | {type: 'theme.delete'; slug: string}
+  /** Rearranges the list: the slugs of the listed themes, in their new order */
+  | {type: 'theme.reorder'; order: string[]}
+  /** Back to picking a theme */
+  | {type: 'flow.list'}
+  /** On to restoring removed themes */
+  | {type: 'flow.removed'}
+
+function themesOf(context: ThemerMachineContext) {
+  return resolveThemes(context, context.baseOptions)
+}
+
+function revokeObjectUrl(url: string) {
+  if (typeof URL !== 'undefined' && typeof URL.revokeObjectURL === 'function') {
+    URL.revokeObjectURL(url)
+  }
+}
+
+/**
+ * The state of the themer tool: three parallel regions, whether the
+ * `sidebar` is open, which `flow` it is in — picking a theme from the `list`,
+ * `edit`ing one of the user's own themes, or restoring `removed` ones — and
+ * whether the `preview` shows the Studio once (`single`) or in light and dark
+ * side by side (`split`). The context carries the persisted state (the
+ * applied theme, the user's themes and what was removed) alongside what the
+ * flows need.
+ *
+ * The sidebar and the preview pass through `opening`/`closing` and
+ * `splitting`/`unsplitting` on their way, states tagged for the UI: `panel`
+ * and `split` say what shows (the panel from `opening` on, the split copy from
+ * `splitting` on), `moving` that the Studio is about to give way or take room
+ * — which is when, and only when, the layout lets a view transition animate
+ * it. A fourth region, `theme`, is `switching` (its tag) right after an event
+ * that applies another theme — picking one, adding, duplicating, importing or
+ * editing one, removing or deleting the applied one — when the layout
+ * cross-fades to it; edits to the applied theme's colors are not switches,
+ * they follow the pointer. These states last until the layout reports its
+ * transition under way — every boundary reports, the panel's and the copy's
+ * entering and leaving as much as the Studio's morphing — or for
+ * `MOTION_DURATION` when nothing animates.
+ *
+ * Theme operations are handled in every flow, and the flows leave on their
+ * own when they lose their subject: the editor when its theme is removed or
+ * deleted, and the removed view when its last theme is restored or deleted.
+ *
+ * @internal
+ */
+export const themerMachine = setup({
+  // XState reads `types` for their types only — the values are never used
+  types: {
+    // oxlint-disable-next-line no-unsafe-type-assertion -- type-level placeholder
+    context: {} as ThemerMachineContext,
+    // oxlint-disable-next-line no-unsafe-type-assertion -- type-level placeholder
+    events: {} as ThemerEvent,
+    // oxlint-disable-next-line no-unsafe-type-assertion -- type-level placeholder
+    input: {} as ThemerInput,
+  },
+  guards: {
+    isCustomTheme: ({context}, params: {slug: string}) =>
+      themesOf(context).themes.some(
+        (theme) => theme.slug === params.slug && theme.source === 'custom',
+      ),
+    isEditingListedTheme: ({context}) =>
+      context.editing !== null &&
+      themesOf(context).themes.some(
+        (theme) => theme.slug === context.editing?.slug && theme.source === 'custom',
+      ),
+    hasRemovedThemes: ({context}) => themesOf(context).removed.length > 0,
+    sidebarShown: or([stateIn({sidebar: 'opening'}), stateIn({sidebar: 'open'})]),
+    // Only another theme than the applied one changes anything to cross-fade to
+    isAnotherTheme: ({context}, params: {slug: string}) =>
+      params.slug !== (context.active ?? CONFIG_SLUG),
+    // Removing or deleting the applied theme is what changes the applied theme
+    isAppliedTheme: ({context}, params: {slug: string}) => params.slug === context.active,
+    // A theme added from given options (an image's) looks different from the applied one
+    hasOptions: (_, params: {options: BuildThemeOptions | undefined}) =>
+      params.options !== undefined,
+  },
+  actions: {
+    // The state that survives sessions is written as the machine starts — that
+    // completes the migration of what an earlier version stored — and on
+    // every change to it
+    persist: ({context}) => {
+      const {active, custom, removed, order} = context
+
+      writeStoredState({active, custom, removed, order})
+    },
+    // The image of a replaced palette or a deleted theme is released from memory
+    revokeImage: (_, params: {url: string | undefined}) => {
+      if (params.url) revokeObjectUrl(params.url)
+    },
+    pick: assign((_, params: {slug: string}) => ({
+      active: params.slug === CONFIG_SLUG ? null : params.slug,
+    })),
+    add: assign(
+      (
+        {context},
+        params: {
+          title?: string
+          options?: BuildThemeOptions
+          palette?: ImagePalette
+          imageUrl?: string
+        },
+      ) => {
+        const theme = createCustomTheme(
+          params.title ?? UNTITLED_THEME,
+          params.options ?? themesOf(context).active.options,
+          params.palette,
+        )
+
+        return {
+          active: theme.slug,
+          custom: [...context.custom, theme],
+          // A theme named after its image needs no renaming right away
+          editing: {slug: theme.slug, focusTitle: params.title === undefined},
+          images: params.imageUrl
+            ? {...context.images, [theme.slug]: params.imageUrl}
+            : context.images,
+        }
+      },
+    ),
+    import: assign(({context}, params: {title: string; options: BuildThemeOptions}) => {
+      const theme = createCustomTheme(params.title, params.options)
+
+      return {active: theme.slug, custom: [...context.custom, theme]}
+    }),
+    duplicate: assign(({context}, params: {slug: string}) => {
+      const {themes, removed} = themesOf(context)
+      const source = [...themes, ...removed].find((theme) => theme.slug === params.slug)
+
+      if (!source) return {}
+
+      const theme = createCustomTheme(duplicateTitle(source.title), source.options, source.palette)
+
+      return {
+        active: theme.slug,
+        custom: [...context.custom, theme],
+        editing: {slug: theme.slug, focusTitle: true},
+      }
+    }),
+    startEditing: assign((_, params: {slug: string}) => ({
+      active: params.slug,
+      editing: {slug: params.slug, focusTitle: false},
+    })),
+    stopEditing: assign({editing: null}),
+    update: assign(
+      (
+        {context},
+        params: {
+          slug: string
+          title?: string
+          options?: BuildThemeOptions
+          palette?: ImagePalette
+          imageUrl?: string
+        },
+      ) => ({
+        custom: context.custom.map((theme) => {
+          if (theme.slug !== params.slug) return theme
+
+          // Keep the options identity when only the title changes, so the
+          // applied theme is not rebuilt on every keystroke
+          return {
+            ...theme,
+            title: params.title ?? theme.title,
+            options: params.options ?? theme.options,
+            ...(params.palette ? {palette: params.palette} : {}),
+          }
+        }),
+        images:
+          params.imageUrl && context.custom.some((theme) => theme.slug === params.slug)
+            ? {...context.images, [params.slug]: params.imageUrl}
+            : context.images,
+      }),
+    ),
+    remove: assign(({context}, params: {slug: string}) => {
+      if (params.slug === CONFIG_SLUG || context.removed.includes(params.slug)) return {}
+
+      return {
+        active: context.active === params.slug ? null : context.active,
+        removed: [...context.removed, params.slug],
+      }
+    }),
+    restore: assign(({context}, params: {slug: string}) => ({
+      removed: context.removed.filter((slug) => slug !== params.slug),
+    })),
+    reorder: assign(({context}, params: {order: string[]}) => {
+      const listed = new Set(themesOf(context).themes.map((theme) => theme.slug))
+      const order = params.order.filter((slug) => listed.has(slug))
+
+      // The removed themes keep their place in line for when they are restored
+      return {
+        order: [...order, ...context.order.filter((slug) => !order.includes(slug))],
+      }
+    }),
+    delete: assign(({context}, params: {slug: string}) => {
+      if (!context.custom.some((theme) => theme.slug === params.slug)) return {}
+
+      const {[params.slug]: _deleted, ...images} = context.images
+
+      return {
+        active: context.active === params.slug ? null : context.active,
+        custom: context.custom.filter((theme) => theme.slug !== params.slug),
+        removed: context.removed.filter((slug) => slug !== params.slug),
+        images,
+      }
+    }),
+  },
+}).createMachine({
+  id: 'themer',
+  context: ({input}) => ({
+    ...input.stored,
+    baseOptions: input.baseOptions,
+    editing: null,
+    images: {},
+  }),
+  entry: 'persist',
+  type: 'parallel',
+  states: {
+    sidebar: {
+      initial: 'closed',
+      states: {
+        closed: {
+          on: {'sidebar.toggle': 'opening'},
+        },
+        opening: {
+          tags: ['panel', 'moving'],
+          after: {[MOTION_DURATION]: 'open'},
+          on: {
+            'layout.transitioned': 'open',
+            'sidebar.toggle': 'closing',
+            'sidebar.close': 'closing',
+          },
+        },
+        open: {
+          tags: ['panel'],
+          on: {'sidebar.toggle': 'closing', 'sidebar.close': 'closing'},
+        },
+        closing: {
+          tags: ['moving'],
+          after: {[MOTION_DURATION]: 'closed'},
+          on: {'layout.transitioned': 'closed', 'sidebar.toggle': 'opening'},
+        },
+      },
+    },
+    // The split preview belongs to a sidebar session: closing the sidebar —
+    // from its header or from the navbar — ends the split with it
+    preview: {
+      initial: 'single',
+      states: {
+        single: {
+          on: {'preview.toggle': 'splitting'},
+        },
+        splitting: {
+          tags: ['split', 'moving'],
+          after: {[MOTION_DURATION]: 'split'},
+          on: {
+            'layout.transitioned': 'split',
+            'preview.toggle': 'unsplitting',
+            'sidebar.close': 'unsplitting',
+            'sidebar.toggle': {guard: 'sidebarShown', target: 'unsplitting'},
+          },
+        },
+        split: {
+          tags: ['split'],
+          on: {
+            'preview.toggle': 'unsplitting',
+            'sidebar.close': 'unsplitting',
+            'sidebar.toggle': {guard: 'sidebarShown', target: 'unsplitting'},
+          },
+        },
+        unsplitting: {
+          tags: ['moving'],
+          after: {[MOTION_DURATION]: 'single'},
+          on: {'layout.transitioned': 'single', 'preview.toggle': 'splitting'},
+        },
+      },
+    },
+    theme: {
+      initial: 'applied',
+      states: {
+        // Only events that change what is applied count: adding a copy of the
+        // applied theme, editing or duplicating it, picking it again, or
+        // removing another theme leaves the Studio looking the same — with
+        // nothing to cross-fade, nothing would report the switch over, and the
+        // first edit that followed would cross-fade instead of following the
+        // pointer
+        applied: {
+          on: {
+            'theme.pick': {
+              guard: {type: 'isAnotherTheme', params: ({event}) => ({slug: event.slug})},
+              target: 'switching',
+            },
+            'theme.edit': {
+              guard: {type: 'isAnotherTheme', params: ({event}) => ({slug: event.slug})},
+              target: 'switching',
+            },
+            'theme.duplicate': {
+              guard: {type: 'isAnotherTheme', params: ({event}) => ({slug: event.slug})},
+              target: 'switching',
+            },
+            'theme.remove': {
+              guard: {type: 'isAppliedTheme', params: ({event}) => ({slug: event.slug})},
+              target: 'switching',
+            },
+            'theme.delete': {
+              guard: {type: 'isAppliedTheme', params: ({event}) => ({slug: event.slug})},
+              target: 'switching',
+            },
+            'theme.add': {
+              guard: {type: 'hasOptions', params: ({event}) => ({options: event.options})},
+              target: 'switching',
+            },
+            'theme.import': 'switching',
+          },
+        },
+        switching: {
+          tags: ['switching'],
+          after: {[MOTION_DURATION]: 'applied'},
+          on: {
+            'layout.transitioned': 'applied',
+            // Another switch starts the clock over
+            'theme.pick': {
+              guard: {type: 'isAnotherTheme', params: ({event}) => ({slug: event.slug})},
+              target: 'switching',
+              reenter: true,
+            },
+            'theme.edit': {
+              guard: {type: 'isAnotherTheme', params: ({event}) => ({slug: event.slug})},
+              target: 'switching',
+              reenter: true,
+            },
+            'theme.duplicate': {
+              guard: {type: 'isAnotherTheme', params: ({event}) => ({slug: event.slug})},
+              target: 'switching',
+              reenter: true,
+            },
+            'theme.remove': {
+              guard: {type: 'isAppliedTheme', params: ({event}) => ({slug: event.slug})},
+              target: 'switching',
+              reenter: true,
+            },
+            'theme.delete': {
+              guard: {type: 'isAppliedTheme', params: ({event}) => ({slug: event.slug})},
+              target: 'switching',
+              reenter: true,
+            },
+            'theme.add': {
+              guard: {type: 'hasOptions', params: ({event}) => ({options: event.options})},
+              target: 'switching',
+              reenter: true,
+            },
+            'theme.import': {target: 'switching', reenter: true},
+          },
+        },
+      },
+    },
+    flow: {
+      initial: 'list',
+      on: {
+        'theme.pick': {
+          actions: [{type: 'pick', params: ({event}) => ({slug: event.slug})}, 'persist'],
+        },
+        'theme.add': {
+          target: '.edit',
+          actions: [
+            {
+              type: 'add',
+              params: ({event}) => ({
+                title: event.title,
+                options: event.options,
+                palette: event.palette,
+                imageUrl: event.imageUrl,
+              }),
+            },
+            'persist',
+          ],
+        },
+        'theme.duplicate': {
+          target: '.edit',
+          actions: [{type: 'duplicate', params: ({event}) => ({slug: event.slug})}, 'persist'],
+        },
+        'theme.edit': {
+          target: '.edit',
+          guard: {type: 'isCustomTheme', params: ({event}) => ({slug: event.slug})},
+          actions: [{type: 'startEditing', params: ({event}) => ({slug: event.slug})}, 'persist'],
+        },
+        'theme.update': {
+          actions: [
+            // A new image replaces the one the theme had
+            {
+              type: 'revokeImage',
+              params: ({context, event}) => ({
+                url: event.imageUrl ? context.images[event.slug] : undefined,
+              }),
+            },
+            {
+              type: 'update',
+              params: ({event}) => ({
+                slug: event.slug,
+                title: event.title,
+                options: event.options,
+                palette: event.palette,
+                imageUrl: event.imageUrl,
+              }),
+            },
+            'persist',
+          ],
+        },
+        'theme.remove': {
+          actions: [{type: 'remove', params: ({event}) => ({slug: event.slug})}, 'persist'],
+        },
+        'theme.restore': {
+          actions: [{type: 'restore', params: ({event}) => ({slug: event.slug})}, 'persist'],
+        },
+        'theme.delete': {
+          actions: [
+            {
+              type: 'revokeImage',
+              params: ({context, event}) => ({url: context.images[event.slug]}),
+            },
+            {type: 'delete', params: ({event}) => ({slug: event.slug})},
+            'persist',
+          ],
+        },
+        'theme.reorder': {
+          actions: [{type: 'reorder', params: ({event}) => ({order: event.order})}, 'persist'],
+        },
+        'theme.import': {
+          actions: [
+            {
+              type: 'import',
+              params: ({event}) => ({title: event.title, options: event.options}),
+            },
+            'persist',
+          ],
+        },
+        'flow.list': '.list',
+        'flow.removed': {
+          target: '.removed',
+          guard: 'hasRemovedThemes',
+        },
+      },
+      states: {
+        list: {},
+        edit: {
+          exit: 'stopEditing',
+          // The theme being edited can go away — removed from the editor, or
+          // duplicated from a theme that does not exist — and then there is
+          // nothing left to edit
+          always: {guard: not('isEditingListedTheme'), target: 'list'},
+        },
+        removed: {
+          always: {guard: not('hasRemovedThemes'), target: 'list'},
+        },
+      },
+    },
+  },
+})
+
+/** @internal */
+export type ThemerSnapshot = SnapshotFrom<typeof themerMachine>
+
+/** The part of the machine context that is persisted between sessions @internal */
+export function selectStoredState(snapshot: ThemerSnapshot): ThemerState {
+  const {active, custom, removed, order} = snapshot.context
+
+  return {active, custom, removed, order}
+}
diff --git a/plugins/@sanity/themer/src/tool/options.ts b/plugins/@sanity/themer/src/tool/options.ts
new file mode 100644
index 0000000000..f40cf56ae4
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/options.ts
@@ -0,0 +1,63 @@
+import {
+  type BuildThemeOptions,
+  DEFAULT_ACCENT,
+  DEFAULT_BACKGROUND,
+  DEFAULT_CONTRAST,
+  deriveTextColor,
+  type ResolvedSchemeOptions,
+  resolveThemeOptions,
+  SCHEMES,
+  type SchemeThemeOptions,
+} from '../theme/options'
+
+/**
+ * Reduces theme options to the minimal object that recreates them through
+ * `buildTheme`: in each scheme the accent is dropped when it is the stock
+ * one, the text color when it matches the one derived from the accent, and
+ * the background and contrast when they match the defaults — and a scheme
+ * with nothing left is dropped altogether. Options that boil down to the
+ * stock Studio theme reduce to `null` — they need nothing from this package.
+ *
+ * @internal
+ */
+export function minimizeOptions(options: BuildThemeOptions): BuildThemeOptions | null {
+  const resolved = resolveThemeOptions(options)
+  const minimized: BuildThemeOptions = {}
+
+  for (const scheme of SCHEMES) {
+    const values = resolved[scheme]
+    const kept: SchemeThemeOptions = {}
+
+    if (values.accent !== DEFAULT_ACCENT) kept.accent = values.accent
+    if (values.text !== deriveTextColor(values.accent)) kept.text = values.text
+    if (values.background !== DEFAULT_BACKGROUND[scheme]) kept.background = values.background
+    if (values.contrast !== DEFAULT_CONTRAST) kept.contrast = values.contrast
+
+    if (Object.keys(kept).length > 0) minimized[scheme] = kept
+  }
+
+  return Object.keys(minimized).length === 0 ? null : minimized
+}
+
+/**
+ * Whether two sets of theme options generate the same theme, comparing their
+ * resolved forms so that derived and explicit values (and hex casing) don't
+ * matter.
+ *
+ * @internal
+ */
+export function sameOptions(a: BuildThemeOptions, b: BuildThemeOptions): boolean {
+  const left = resolveThemeOptions(a)
+  const right = resolveThemeOptions(b)
+
+  return SCHEMES.every((scheme) => sameScheme(left[scheme], right[scheme]))
+}
+
+function sameScheme(a: ResolvedSchemeOptions, b: ResolvedSchemeOptions): boolean {
+  return (
+    a.accent === b.accent &&
+    a.text === b.text &&
+    a.background === b.background &&
+    a.contrast === b.contrast
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/plugin.test.ts b/plugins/@sanity/themer/src/tool/plugin.test.ts
new file mode 100644
index 0000000000..d246481e5b
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/plugin.test.ts
@@ -0,0 +1,118 @@
+import {describe, expect, it, vi} from 'vitest'
+
+import {deriveTextColor} from '../theme/options'
+import {presets} from '../theme/presets'
+import {minimizeOptions, sameOptions} from './options'
+import {themerTool} from './plugin'
+import {createThemeSnippet} from './snippet'
+
+// Importing the real `sanity` package in a node test would resolve its
+// workspace dependencies (e.g. @sanity/icons) to untransformed .tsx source.
+// `definePlugin` only wraps the factory, so the mock returns it as-is.
+vi.mock('sanity', () => ({
+  definePlugin: (factory: unknown) => factory,
+  useColorSchemeValue: () => 'light',
+}))
+
+describe('themerTool', () => {
+  it('registers the studio components', () => {
+    const plugin = themerTool()
+
+    expect(plugin.name).toBe('@sanity/themer/tool')
+    expect(plugin.studio?.components?.layout).toBeTypeOf('function')
+    expect(plugin.studio?.components?.navbar).toBeTypeOf('function')
+    // The sidebar lives in the layout: an active tool layout override would
+    // render once per Studio copy in the split preview
+    expect(plugin.studio?.components?.activeToolLayout).toBeUndefined()
+  })
+})
+
+describe('minimizeOptions', () => {
+  it('reduces the stock options to nothing', () => {
+    expect(minimizeOptions({})).toBeNull()
+    expect(minimizeOptions({light: {accent: '#556bfc'}})).toBeNull()
+    expect(
+      minimizeOptions({
+        light: {accent: '#556bfc', text: '#727892', background: '#ffffff', contrast: 85},
+        dark: {accent: '#556bfc', text: '#727892', background: '#0d0e12', contrast: 85},
+      }),
+    ).toBeNull()
+  })
+
+  it('drops a text color that matches the derived one', () => {
+    expect(minimizeOptions({light: {accent: '#1cb485', text: deriveTextColor('#1cb485')}})).toEqual(
+      {light: {accent: '#1cb485'}},
+    )
+  })
+
+  it('keeps only what differs from the defaults in each scheme', () => {
+    expect(
+      minimizeOptions({
+        light: {accent: '#1CB485', text: '#5c9199', background: '#fcfdfd', contrast: 70},
+        dark: {accent: '#556bfc', background: '#0d0e12', contrast: 85},
+      }),
+    ).toEqual({
+      light: {accent: '#1cb485', text: '#5c9199', background: '#fcfdfd', contrast: 70},
+    })
+  })
+
+  it('round-trips every preset', () => {
+    for (const preset of presets) {
+      const minimized = minimizeOptions(preset.options) ?? {}
+
+      expect(sameOptions(minimized, preset.options), preset.slug).toBe(true)
+    }
+  })
+})
+
+describe('sameOptions', () => {
+  it('compares the resolved schemes', () => {
+    expect(sameOptions({}, {light: {accent: '#556BFC', contrast: 85}})).toBe(true)
+    expect(sameOptions({light: {accent: '#1cb485'}}, {dark: {accent: '#1cb485'}})).toBe(false)
+  })
+})
+
+describe('createThemeSnippet', () => {
+  it('points untouched options at buildTheme from @sanity/ui/theme', () => {
+    expect(createThemeSnippet({})).toBe(
+      "import {buildTheme} from '@sanity/ui/theme'\n\nexport const theme = buildTheme()\n",
+    )
+  })
+
+  it('serializes only what differs from the defaults, scheme by scheme', () => {
+    expect(
+      createThemeSnippet({
+        light: {accent: '#1cb485', text: '#5c9199', background: '#fcfdfd', contrast: 70},
+        dark: {accent: '#22fca8', background: '#0d1415'},
+      }),
+    ).toBe(
+      [
+        "import {buildTheme} from '@sanity/themer'",
+        '',
+        'export const theme = buildTheme({',
+        '  light: {',
+        "    accent: '#1cb485',",
+        "    text: '#5c9199',",
+        "    background: '#fcfdfd',",
+        '    contrast: 70,',
+        '  },',
+        "  dark: {accent: '#22fca8', background: '#0d1415'},",
+        '})',
+        '',
+      ].join('\n'),
+    )
+  })
+
+  it('leaves out a scheme that is all defaults', () => {
+    expect(createThemeSnippet({dark: {accent: '#1cb485'}, light: {contrast: 85}})).toBe(
+      [
+        "import {buildTheme} from '@sanity/themer'",
+        '',
+        'export const theme = buildTheme({',
+        "  dark: {accent: '#1cb485'},",
+        '})',
+        '',
+      ].join('\n'),
+    )
+  })
+})
diff --git a/plugins/@sanity/themer/src/tool/plugin.tsx b/plugins/@sanity/themer/src/tool/plugin.tsx
new file mode 100644
index 0000000000..9dd69078a1
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/plugin.tsx
@@ -0,0 +1,79 @@
+import {definePlugin, type LayoutProps} from 'sanity'
+
+import type {BuildThemeOptions} from '../theme/options'
+import {ThemerLayout} from './ThemerLayout'
+import {ThemerNavbar} from './ThemerNavbar'
+
+/**
+ * Options for the {@link themerTool} plugin.
+ *
+ * This is experimental and may change or be removed in any release without
+ * notice — use at your own risk.
+ *
+ * @alpha
+ */
+export interface ThemerToolOptions {
+  /**
+   * The `buildTheme` options that the Studio's configured theme was generated
+   * from — the themer starts editing from these, so pass the same object that
+   * the `theme` in the Studio config uses:
+   *
+   * ```ts
+   * const config: BuildThemeOptions = {light: {accent: '#1cb485'}, dark: {accent: '#22fca8'}}
+   *
+   * export default defineConfig({
+   *   theme: buildTheme(config),
+   *   plugins: [themerTool({config})],
+   * })
+   * ```
+   */
+  config?: BuildThemeOptions
+}
+
+/**
+ * A Studio plugin that adds a themer sidebar for `buildTheme` themes: a
+ * navbar toggle opens the sidebar next to the Studio, with a list of themes —
+ * the configured theme, the presets and your own — each previewed as a tiny
+ * Studio in both color schemes. Picking one applies it live to the whole
+ * Studio while you browse around; your own themes can be edited with
+ * accent/text/background pickers and a contrast slider per scheme, added,
+ * duplicated, given the colors of an image (its palette is read on device),
+ * removed and restored, and a dialog shows the `buildTheme` snippet that
+ * makes the applied theme permanent. Toggle between light and dark mode with
+ * the regular appearance menu — the preview follows it — or split the
+ * preview to see the whole Studio in light and dark side by side.
+ *
+ * ```ts
+ * import {themerTool} from '@sanity/themer/tool'
+ * import {defineConfig} from 'sanity'
+ *
+ * export default defineConfig({
+ *   plugins: [themerTool()],
+ *   // ...rest of the config
+ * })
+ * ```
+ *
+ * This is experimental and may change or be removed in any release without
+ * notice — use at your own risk.
+ *
+ * @alpha
+ */
+export const themerTool = definePlugin<ThemerToolOptions | void>((options) => {
+  // No options generate the stock theme, which is what a Studio without a
+  // `theme` in its config gets
+  const baseOptions = options?.config ?? {}
+
+  function ThemerLayoutWithOptions(props: LayoutProps) {
+    return <ThemerLayout {...props} baseOptions={baseOptions} />
+  }
+
+  return {
+    name: '@sanity/themer/tool',
+    studio: {
+      components: {
+        layout: ThemerLayoutWithOptions,
+        navbar: ThemerNavbar,
+      },
+    },
+  }
+})
diff --git a/plugins/@sanity/themer/src/tool/share.test.ts b/plugins/@sanity/themer/src/tool/share.test.ts
new file mode 100644
index 0000000000..7e22c396f6
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/share.test.ts
@@ -0,0 +1,71 @@
+import {describe, expect, it} from 'vitest'
+
+import {decodeTheme, encodeTheme, type SharedTheme} from './share'
+
+const full: SharedTheme = {
+  title: 'Verdant ✨',
+  options: {
+    light: {accent: '#1cb485', text: '#5c9199', background: '#fcfdfd', contrast: 70},
+    dark: {accent: '#22fca8', text: '#a7c3c9', background: '#0d1415', contrast: 100},
+  },
+}
+
+describe('theme codes', () => {
+  it('round-trips a theme', () => {
+    const code = encodeTheme(full)
+
+    expect(code).toMatch(/^[A-Za-z0-9_-]+$/)
+    expect(decodeTheme(code)).toEqual(full)
+  })
+
+  it('stays short: about 30 bytes for every color and contrast, plus the title', () => {
+    expect(encodeTheme(full).length).toBeLessThanOrEqual(44)
+    expect(encodeTheme({title: 'Dew', options: {light: {accent: '#f00'}}})).toHaveLength(11)
+  })
+
+  it('only carries the fields that are set, in either scheme', () => {
+    const sparse: SharedTheme = {
+      title: 'Sparse',
+      options: {dark: {background: '#000', contrast: 40}},
+    }
+
+    expect(decodeTheme(encodeTheme(sparse))).toEqual({
+      title: 'Sparse',
+      options: {dark: {background: '#000000', contrast: 40}},
+    })
+    expect(decodeTheme(encodeTheme({title: 'Bare', options: {}}))).toEqual({
+      title: 'Bare',
+      options: {},
+    })
+  })
+
+  it('expands short hex colors, rounds and clamps the contrast, and titles the untitled', () => {
+    const theme = decodeTheme(
+      encodeTheme({
+        title: '   ',
+        options: {light: {accent: '#ABC', contrast: 200.4}, dark: {contrast: 2}},
+      }),
+    )
+
+    expect(theme).toEqual({
+      title: 'Untitled theme',
+      options: {light: {accent: '#aabbcc', contrast: 100}, dark: {contrast: 15}},
+    })
+  })
+
+  it('finds the code in a pasted message', () => {
+    const code = encodeTheme(full)
+
+    expect(decodeTheme(`  here is my theme:\n${code}\nenjoy!`)).toEqual(full)
+    expect(decodeTheme(`https://example.com/${code}`)).toBeNull()
+  })
+
+  it('rejects what is not a code', () => {
+    for (const text of ['', 'hello', 'AQ', '{"title":"json"}', 'AQ8=', `${encodeTheme(full)}!`]) {
+      expect(decodeTheme(text)).toBeNull()
+    }
+
+    // A code whose flags promise more bytes than it has
+    expect(decodeTheme('Af8')).toBeNull()
+  })
+})
diff --git a/plugins/@sanity/themer/src/tool/share.ts b/plugins/@sanity/themer/src/tool/share.ts
new file mode 100644
index 0000000000..84c3b3fa68
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/share.ts
@@ -0,0 +1,161 @@
+import {isColor} from '../lib/mix'
+import {
+  type BuildThemeOptions,
+  MAXIMUM_CONTRAST,
+  MINIMUM_CONTRAST,
+  SCHEMES,
+  type SchemeThemeOptions,
+} from '../theme/options'
+import {displayTitle} from './themes'
+
+/** What a theme code carries: a theme's title and its options @internal */
+export interface SharedTheme {
+  title: string
+  options: BuildThemeOptions
+}
+
+/**
+ * The version of the code format, the first byte of every code — bumped if
+ * the layout below ever changes, so older codes can still be told apart
+ */
+const VERSION = 1
+
+/** The fields a scheme's options can set, in the order their bytes go */
+const FIELDS = ['accent', 'text', 'background', 'contrast'] as const
+
+/**
+ * Turns a theme into a short code to share in a message: `title`, and the
+ * colors and contrasts of both schemes, packed into bytes — one flag byte says
+ * which of the eight fields are set, each color is its three RGB bytes and a
+ * contrast one byte, and the title takes up the rest — then base64url'd, so
+ * it is one word without padding, safe in URLs and chat. A theme setting
+ * everything comes to about 30 bytes plus its title.
+ *
+ * @internal
+ */
+export function encodeTheme(theme: SharedTheme): string {
+  const bytes: number[] = [VERSION, 0]
+  let flags = 0
+
+  SCHEMES.forEach((scheme, schemeIndex) => {
+    const options: SchemeThemeOptions = theme.options[scheme] ?? {}
+
+    FIELDS.forEach((field, fieldIndex) => {
+      const value = options[field]
+
+      if (value === undefined) return
+
+      if (field === 'contrast') {
+        if (typeof value !== 'number' || !Number.isFinite(value)) return
+
+        bytes.push(Math.round(Math.min(MAXIMUM_CONTRAST, Math.max(MINIMUM_CONTRAST, value))))
+      } else {
+        if (typeof value !== 'string' || !isColor(value)) return
+
+        bytes.push(...rgbBytes(value))
+      }
+
+      flags |= 1 << (schemeIndex * FIELDS.length + fieldIndex)
+    })
+  })
+
+  bytes[1] = flags
+  bytes.push(...new TextEncoder().encode(theme.title.trim()))
+
+  return toBase64Url(Uint8Array.from(bytes))
+}
+
+/**
+ * Reads a theme back out of a code — as pasted, so surrounding whitespace and
+ * words around the code are fine: the first word that is a code counts. `null`
+ * when nothing in the text is one.
+ *
+ * @internal
+ */
+export function decodeTheme(text: string): SharedTheme | null {
+  for (const word of text.trim().split(/\s+/)) {
+    const theme = decodeCode(word)
+
+    if (theme) return theme
+  }
+
+  return null
+}
+
+function decodeCode(code: string): SharedTheme | null {
+  const bytes = fromBase64Url(code)
+
+  if (!bytes || bytes.length < 2 || bytes[0] !== VERSION) return null
+
+  const flags = bytes[1]
+  const options: BuildThemeOptions = {}
+  let offset = 2
+
+  for (const [schemeIndex, scheme] of SCHEMES.entries()) {
+    const schemeOptions: SchemeThemeOptions = {}
+
+    for (const [fieldIndex, field] of FIELDS.entries()) {
+      if (!(flags & (1 << (schemeIndex * FIELDS.length + fieldIndex)))) continue
+
+      if (field === 'contrast') {
+        if (offset + 1 > bytes.length) return null
+
+        schemeOptions.contrast = Math.min(
+          MAXIMUM_CONTRAST,
+          Math.max(MINIMUM_CONTRAST, bytes[offset]),
+        )
+        offset += 1
+      } else {
+        if (offset + 3 > bytes.length) return null
+
+        schemeOptions[field] = hexColor(bytes.subarray(offset, offset + 3))
+        offset += 3
+      }
+    }
+
+    if (Object.keys(schemeOptions).length > 0) options[scheme] = schemeOptions
+  }
+
+  let title: string
+
+  try {
+    title = new TextDecoder('utf-8', {fatal: true}).decode(bytes.subarray(offset))
+  } catch {
+    return null
+  }
+
+  return {title: displayTitle(title), options}
+}
+
+/** The three RGB bytes of a `#rgb` or `#rrggbb` color */
+function rgbBytes(color: string): number[] {
+  const hex = color.length === 4 ? color.slice(1).replaceAll(/./g, '$&$&') : color.slice(1)
+
+  return [0, 2, 4].map((start) => parseInt(hex.slice(start, start + 2), 16))
+}
+
+function hexColor(rgb: Uint8Array): string {
+  return `#${[...rgb].map((byte) => byte.toString(16).padStart(2, '0')).join('')}`
+}
+
+function toBase64Url(bytes: Uint8Array): string {
+  let binary = ''
+
+  for (const byte of bytes) binary += String.fromCharCode(byte)
+
+  return btoa(binary).replaceAll('+', '-').replaceAll('/', '_').replace(/=+$/, '')
+}
+
+function fromBase64Url(code: string): Uint8Array | null {
+  if (!/^[A-Za-z0-9_-]+$/.test(code)) return null
+
+  const base64 = code.replaceAll('-', '+').replaceAll('_', '/')
+
+  try {
+    return Uint8Array.from(atob(base64.padEnd(Math.ceil(base64.length / 4) * 4, '=')), (char) =>
+      char.charCodeAt(0),
+    )
+  } catch {
+    return null
+  }
+}
diff --git a/plugins/@sanity/themer/src/tool/sidebarWidth.ts b/plugins/@sanity/themer/src/tool/sidebarWidth.ts
new file mode 100644
index 0000000000..7d92c05f43
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/sidebarWidth.ts
@@ -0,0 +1,11 @@
+/**
+ * The narrowest the sidebar goes — and its default: narrow enough to leave the
+ * studio preview as much room as possible, while the themes stack in a single
+ * column of preview cards and the editor fits a swatch next to its label.
+ *
+ * @internal
+ */
+export const MINIMUM_WIDTH = 200
+
+/** Twice the default is as wide as the sidebar goes @internal */
+export const MAXIMUM_WIDTH = MINIMUM_WIDTH * 2
diff --git a/plugins/@sanity/themer/src/tool/snippet.ts b/plugins/@sanity/themer/src/tool/snippet.ts
new file mode 100644
index 0000000000..9867cbed6a
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/snippet.ts
@@ -0,0 +1,47 @@
+import {type BuildThemeOptions, SCHEMES, type SchemeThemeOptions} from '../theme/options'
+import {minimizeOptions} from './options'
+
+/**
+ * Serializes theme options into the `buildTheme` call to paste into
+ * `sanity.config.ts`, keeping only what differs from the derived defaults in
+ * each scheme.
+ *
+ * Options that boil down to the stock Studio theme need nothing from this
+ * package — so they serialize to a bare `buildTheme()` from `@sanity/ui/theme`
+ * instead.
+ *
+ * @internal
+ */
+export function createThemeSnippet(options: BuildThemeOptions): string {
+  const minimized = minimizeOptions(options)
+
+  if (minimized === null) {
+    return "import {buildTheme} from '@sanity/ui/theme'\n\nexport const theme = buildTheme()\n"
+  }
+
+  const lines: string[] = []
+
+  for (const scheme of SCHEMES) {
+    const values = minimized[scheme]
+
+    if (values) lines.push(serializeScheme(scheme, values))
+  }
+
+  return `import {buildTheme} from '@sanity/themer'\n\nexport const theme = buildTheme({\n${lines.join('\n')}\n})\n`
+}
+
+/** A scheme with up to two options fits on one line, more spread out */
+function serializeScheme(scheme: string, values: SchemeThemeOptions): string {
+  const entries: string[] = []
+
+  if (values.accent !== undefined) entries.push(`accent: '${values.accent}'`)
+  if (values.text !== undefined) entries.push(`text: '${values.text}'`)
+  if (values.background !== undefined) entries.push(`background: '${values.background}'`)
+  if (values.contrast !== undefined) entries.push(`contrast: ${values.contrast}`)
+
+  if (entries.length <= 2) {
+    return `  ${scheme}: {${entries.join(', ')}},`
+  }
+
+  return `  ${scheme}: {\n${entries.map((entry) => `    ${entry},`).join('\n')}\n  },`
+}
diff --git a/plugins/@sanity/themer/src/tool/storage.test.ts b/plugins/@sanity/themer/src/tool/storage.test.ts
new file mode 100644
index 0000000000..ee12a493bd
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/storage.test.ts
@@ -0,0 +1,261 @@
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {hasVisited, markVisited, readStoredState, writeStoredState} from './storage'
+import {initialThemerState, type ThemerState} from './themes'
+
+const STORAGE_KEY = 'sanityStudio:themer:state'
+const LEGACY_STORAGE_KEY = 'sanityStudio:themer:options'
+const VISITED_STORAGE_KEY = 'sanityStudio:themer:visited'
+
+function createMemoryStorage(): Storage {
+  const data = new Map<string, string>()
+
+  return {
+    get length() {
+      return data.size
+    },
+    clear: () => data.clear(),
+    getItem: (key) => data.get(key) ?? null,
+    key: (index) => [...data.keys()][index] ?? null,
+    removeItem: (key) => void data.delete(key),
+    setItem: (key, value) => void data.set(key, value),
+  }
+}
+
+describe('themer storage', () => {
+  beforeEach(() => {
+    vi.stubGlobal('localStorage', createMemoryStorage())
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('starts from the initial state', () => {
+    expect(readStoredState()).toEqual(initialThemerState)
+  })
+
+  it('round-trips the state', () => {
+    const state: ThemerState = {
+      active: 'custom-1',
+      custom: [
+        {
+          slug: 'custom-1',
+          title: 'Mine',
+          options: {
+            light: {accent: '#ff0000', text: '#333333', contrast: 70},
+            dark: {background: '#000000'},
+          },
+        },
+        {slug: 'custom-2', title: 'Stock', options: {}},
+      ],
+      removed: ['verdant', 'custom-1'],
+      order: ['custom-2', 'config', 'verdant'],
+    }
+
+    writeStoredState(state)
+
+    expect(readStoredState()).toEqual(state)
+  })
+
+  it('drops what it cannot use', () => {
+    localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({
+        active: 42,
+        custom: [
+          {
+            slug: 'custom-1',
+            title: 'Valid',
+            options: {light: {accent: '#FF0000', contrast: 500}, dark: {background: 'nope'}},
+          },
+          {slug: 'custom-1', title: 'Duplicate', options: {light: {accent: '#00ff00'}}},
+          {slug: 'verdant', title: 'Reserved slug', options: {light: {accent: '#00ff00'}}},
+          {slug: 'config', title: 'Reserved slug', options: {light: {accent: '#00ff00'}}},
+          {slug: 'custom-2', title: 'Stock', options: {}},
+          {slug: 'custom-3', title: '   ', options: {dark: {accent: '#00f', text: 'nope'}}},
+          {slug: 'custom-4', title: 'No options'},
+          'garbage',
+        ],
+        removed: ['verdant', 'verdant', 'unknown', 'config', 'custom-3', 7],
+        order: ['custom-3', 'unknown', 'dew', 'custom-3', 'custom-4', 'config', 3],
+      }),
+    )
+
+    expect(readStoredState()).toEqual({
+      active: null,
+      custom: [
+        {slug: 'custom-1', title: 'Valid', options: {light: {accent: '#ff0000', contrast: 100}}},
+        {slug: 'custom-2', title: 'Stock', options: {}},
+        {slug: 'custom-3', title: 'Untitled theme', options: {dark: {accent: '#00f'}}},
+      ],
+      removed: ['verdant', 'custom-3'],
+      order: ['custom-3', 'dew', 'config'],
+    })
+  })
+
+  it('keeps the image palette of a theme, dropping what is not a color', () => {
+    localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({
+        active: null,
+        custom: [
+          {
+            slug: 'custom-1',
+            title: 'From image',
+            options: {},
+            palette: {dominant: '#E11D48', vibrant: 'red', muted: null, extra: '#000000'},
+          },
+          {slug: 'custom-2', title: 'No colors', options: {}, palette: {vibrant: 'nope'}},
+          {slug: 'custom-3', title: 'No palette', options: {}, palette: 'garbage'},
+        ],
+        removed: [],
+      }),
+    )
+
+    expect(readStoredState().custom).toEqual([
+      {
+        slug: 'custom-1',
+        title: 'From image',
+        options: {},
+        palette: {
+          dominant: '#e11d48',
+          vibrant: null,
+          lightVibrant: null,
+          darkVibrant: null,
+          muted: null,
+          lightMuted: null,
+          darkMuted: null,
+        },
+      },
+      {slug: 'custom-2', title: 'No colors', options: {}},
+      {slug: 'custom-3', title: 'No palette', options: {}},
+    ])
+  })
+
+  it('falls back on corrupt storage', () => {
+    localStorage.setItem(STORAGE_KEY, '{not json')
+
+    expect(readStoredState()).toEqual(initialThemerState)
+  })
+
+  it('migrates the draft of earlier versions into a custom theme', () => {
+    localStorage.setItem(
+      LEGACY_STORAGE_KEY,
+      JSON.stringify({accent: '#1cb485', contrast: 70, background: {dark: '#0d1415'}}),
+    )
+
+    const state = readStoredState()
+
+    expect(state.custom).toHaveLength(1)
+    expect(state.custom[0]).toMatchObject({
+      title: 'Draft theme',
+      options: {
+        light: {accent: '#1cb485', contrast: 70},
+        dark: {accent: '#1cb485', contrast: 70, background: '#0d1415'},
+      },
+    })
+    expect(state.active).toBe(state.custom[0].slug)
+    expect(state.removed).toEqual([])
+    expect(state.order).toEqual([])
+
+    writeStoredState(state)
+
+    expect(localStorage.getItem(LEGACY_STORAGE_KEY)).toBeNull()
+    expect(readStoredState()).toEqual(state)
+  })
+
+  it('ignores an unusable legacy draft', () => {
+    localStorage.setItem(LEGACY_STORAGE_KEY, JSON.stringify({accent: 'blue'}))
+
+    expect(readStoredState()).toEqual(initialThemerState)
+  })
+
+  it('converts custom themes stored with the flat options of earlier versions', () => {
+    localStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({
+        active: 'custom-1',
+        custom: [
+          {
+            slug: 'custom-1',
+            title: 'Flat',
+            options: {accent: '#1cb485', text: '#5c9199', background: {light: '#fcfdfd'}},
+          },
+        ],
+        removed: [],
+      }),
+    )
+
+    expect(readStoredState().custom).toEqual([
+      {
+        slug: 'custom-1',
+        title: 'Flat',
+        options: {
+          light: {accent: '#1cb485', text: '#5c9199', background: '#fcfdfd'},
+          dark: {accent: '#1cb485', text: '#5c9199'},
+        },
+      },
+    ])
+  })
+})
+
+describe('themer visit', () => {
+  beforeEach(() => {
+    vi.stubGlobal('localStorage', createMemoryStorage())
+  })
+
+  afterEach(() => {
+    vi.unstubAllGlobals()
+  })
+
+  it('is not noted until the sidebar has been opened', () => {
+    expect(hasVisited()).toBe(false)
+
+    markVisited()
+
+    expect(hasVisited()).toBe(true)
+  })
+
+  it('keeps the time of the first visit', () => {
+    vi.useFakeTimers()
+
+    try {
+      vi.setSystemTime(new Date('2026-09-25T12:00:00.000Z'))
+      markVisited()
+      vi.setSystemTime(new Date('2026-09-26T12:00:00.000Z'))
+      markVisited()
+
+      expect(localStorage.getItem(VISITED_STORAGE_KEY)).toBe('2026-09-25T12:00:00.000Z')
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  it('counts any note as a visit', () => {
+    localStorage.setItem(VISITED_STORAGE_KEY, 'yes')
+
+    expect(hasVisited()).toBe(true)
+  })
+
+  it('does without storage', () => {
+    vi.stubGlobal('localStorage', undefined)
+
+    expect(hasVisited()).toBe(false)
+    expect(() => markVisited()).not.toThrow()
+  })
+
+  it('shrugs off storage that throws', () => {
+    const storage = createMemoryStorage()
+    const throwing = () => {
+      throw new Error('denied')
+    }
+
+    storage.getItem = throwing
+    storage.setItem = throwing
+    vi.stubGlobal('localStorage', storage)
+
+    expect(hasVisited()).toBe(false)
+    expect(() => markVisited()).not.toThrow()
+  })
+})
diff --git a/plugins/@sanity/themer/src/tool/storage.ts b/plugins/@sanity/themer/src/tool/storage.ts
new file mode 100644
index 0000000000..856be3a35c
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/storage.ts
@@ -0,0 +1,287 @@
+import {isColor} from '../lib/mix'
+import {
+  type BuildThemeOptions,
+  MAXIMUM_CONTRAST,
+  MINIMUM_CONTRAST,
+  SCHEMES,
+  type SchemeThemeOptions,
+} from '../theme/options'
+import {presets} from '../theme/presets'
+import {IMAGE_PALETTE_KEYS, type ImagePalette} from './imagePalette'
+import {
+  CONFIG_SLUG,
+  createCustomTheme,
+  type CustomTheme,
+  displayTitle,
+  initialThemerState,
+  type ThemerState,
+} from './themes'
+
+const STORAGE_KEY = 'sanityStudio:themer:state'
+
+/**
+ * Where earlier versions of the tool kept their single draft theme — it is
+ * migrated into a custom theme, so a draft survives the upgrade.
+ */
+const LEGACY_STORAGE_KEY = 'sanityStudio:themer:options'
+
+/** The title a draft from before themes had titles is imported under */
+const LEGACY_DRAFT_TITLE = 'Draft theme'
+
+/**
+ * Where it is noted that the sidebar has been opened at least once — until
+ * then, the navbar introduces the tool with an animation of its icon
+ */
+const VISITED_STORAGE_KEY = 'sanityStudio:themer:visited'
+
+function sanitizeColor(value: unknown): string | null {
+  return typeof value === 'string' && isColor(value) ? value.toLowerCase() : null
+}
+
+function sanitizeContrast(value: unknown): number | null {
+  return typeof value === 'number' && Number.isFinite(value)
+    ? Math.min(MAXIMUM_CONTRAST, Math.max(MINIMUM_CONTRAST, value))
+    : null
+}
+
+function sanitizeSchemeOptions(value: unknown): SchemeThemeOptions {
+  const options: SchemeThemeOptions = {}
+
+  if (!value || typeof value !== 'object') return options
+
+  const accent = sanitizeColor(Reflect.get(value, 'accent'))
+  const text = sanitizeColor(Reflect.get(value, 'text'))
+  const background = sanitizeColor(Reflect.get(value, 'background'))
+  const contrast = sanitizeContrast(Reflect.get(value, 'contrast'))
+
+  if (accent) options.accent = accent
+  if (text) options.text = text
+  if (background) options.background = background
+  if (contrast !== null) options.contrast = contrast
+
+  return options
+}
+
+/**
+ * Options from before they were grouped by scheme: one accent, text color and
+ * contrast for both schemes, and a background per scheme. Both schemes get
+ * the shared colors, so the theme keeps looking the same.
+ */
+function sanitizeFlatOptions(value: object): BuildThemeOptions | null {
+  const accent = sanitizeColor(Reflect.get(value, 'accent'))
+
+  if (!accent) return null
+
+  const shared: SchemeThemeOptions = {accent}
+  const text = sanitizeColor(Reflect.get(value, 'text'))
+  const contrast = sanitizeContrast(Reflect.get(value, 'contrast'))
+
+  if (text) shared.text = text
+  if (contrast !== null) shared.contrast = contrast
+
+  const backgrounds: unknown = Reflect.get(value, 'background')
+  const options: BuildThemeOptions = {}
+
+  for (const scheme of SCHEMES) {
+    const background =
+      backgrounds && typeof backgrounds === 'object'
+        ? sanitizeColor(Reflect.get(backgrounds, scheme))
+        : null
+
+    options[scheme] = background ? {...shared, background} : {...shared}
+  }
+
+  return options
+}
+
+function sanitizeOptions(value: unknown): BuildThemeOptions | null {
+  if (!value || typeof value !== 'object') return null
+
+  // The flat shape always had an accent, the scheme shape never has one at the top
+  if ('accent' in value) {
+    return sanitizeFlatOptions(value)
+  }
+
+  const options: BuildThemeOptions = {}
+
+  for (const scheme of SCHEMES) {
+    const schemeOptions = sanitizeSchemeOptions(Reflect.get(value, scheme))
+
+    if (Object.keys(schemeOptions).length > 0) options[scheme] = schemeOptions
+  }
+
+  return options
+}
+
+function isReservedSlug(slug: string): boolean {
+  return slug === CONFIG_SLUG || presets.some((preset) => preset.slug === slug)
+}
+
+function sanitizeCustomTheme(value: unknown): CustomTheme | null {
+  if (!value || typeof value !== 'object') return null
+
+  const slug: unknown = Reflect.get(value, 'slug')
+
+  if (typeof slug !== 'string' || !slug || isReservedSlug(slug)) return null
+
+  const options = sanitizeOptions(Reflect.get(value, 'options'))
+
+  if (!options) return null
+
+  const title: unknown = Reflect.get(value, 'title')
+  const palette = sanitizePalette(Reflect.get(value, 'palette'))
+
+  return {
+    slug,
+    title: displayTitle(typeof title === 'string' ? title : ''),
+    options,
+    ...(palette ? {palette} : {}),
+  }
+}
+
+function sanitizePalette(value: unknown): ImagePalette | null {
+  if (!value || typeof value !== 'object') return null
+
+  const palette: Partial<ImagePalette> = {}
+  let swatches = 0
+
+  for (const key of IMAGE_PALETTE_KEYS) {
+    const swatch = sanitizeColor(Reflect.get(value, key))
+
+    palette[key] = swatch
+    if (swatch) swatches++
+  }
+
+  // oxlint-disable-next-line no-unsafe-type-assertion -- the loop assigns every key
+  return swatches > 0 ? (palette as ImagePalette) : null
+}
+
+function sanitizeState(value: unknown): ThemerState {
+  if (!value || typeof value !== 'object') return initialThemerState
+
+  const custom: CustomTheme[] = []
+  const rawCustom: unknown = Reflect.get(value, 'custom')
+
+  if (Array.isArray(rawCustom)) {
+    for (const item of rawCustom) {
+      const theme = sanitizeCustomTheme(item)
+
+      if (theme && !custom.some((existing) => existing.slug === theme.slug)) {
+        custom.push(theme)
+      }
+    }
+  }
+
+  const removed: string[] = []
+  const rawRemoved: unknown = Reflect.get(value, 'removed')
+
+  if (Array.isArray(rawRemoved)) {
+    for (const slug of rawRemoved) {
+      const known =
+        typeof slug === 'string' &&
+        slug !== CONFIG_SLUG &&
+        (presets.some((preset) => preset.slug === slug) ||
+          custom.some((theme) => theme.slug === slug))
+
+      if (known && !removed.includes(slug)) removed.push(slug)
+    }
+  }
+
+  const order: string[] = []
+  const rawOrder: unknown = Reflect.get(value, 'order')
+
+  if (Array.isArray(rawOrder)) {
+    for (const slug of rawOrder) {
+      const known =
+        typeof slug === 'string' &&
+        (slug === CONFIG_SLUG ||
+          presets.some((preset) => preset.slug === slug) ||
+          custom.some((theme) => theme.slug === slug))
+
+      if (known && !order.includes(slug)) order.push(slug)
+    }
+  }
+
+  const rawActive: unknown = Reflect.get(value, 'active')
+
+  return {active: typeof rawActive === 'string' ? rawActive : null, custom, removed, order}
+}
+
+function readLegacyState(): ThemerState | null {
+  const raw = localStorage.getItem(LEGACY_STORAGE_KEY)
+
+  if (!raw) return null
+
+  const options = sanitizeOptions(JSON.parse(raw))
+
+  if (!options) return null
+
+  const theme = createCustomTheme(LEGACY_DRAFT_TITLE, options)
+
+  return {active: theme.slug, custom: [theme], removed: [], order: []}
+}
+
+/**
+ * Restores the themer state from localStorage, so the user's themes survive
+ * studio reloads. Falls back to the initial state when nothing usable is
+ * stored.
+ *
+ * @internal
+ */
+export function readStoredState(): ThemerState {
+  try {
+    if (typeof localStorage === 'undefined') return initialThemerState
+
+    const raw = localStorage.getItem(STORAGE_KEY)
+
+    if (raw) return sanitizeState(JSON.parse(raw))
+
+    return readLegacyState() ?? initialThemerState
+  } catch {
+    return initialThemerState
+  }
+}
+
+/** @internal */
+export function writeStoredState(state: ThemerState): void {
+  try {
+    if (typeof localStorage === 'undefined') return
+
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+    localStorage.removeItem(LEGACY_STORAGE_KEY)
+  } catch {
+    // Storage can be unavailable (e.g. private browsing) — themes just won't persist
+  }
+}
+
+/**
+ * Whether the themer sidebar has been opened before, in any session — the
+ * cue for the navbar to stop introducing the tool.
+ *
+ * @internal
+ */
+export function hasVisited(): boolean {
+  try {
+    return typeof localStorage !== 'undefined' && localStorage.getItem(VISITED_STORAGE_KEY) !== null
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Notes that the themer sidebar has been opened, keeping the time it first
+ * was.
+ *
+ * @internal
+ */
+export function markVisited(): void {
+  try {
+    if (typeof localStorage === 'undefined' || localStorage.getItem(VISITED_STORAGE_KEY) !== null) {
+      return
+    }
+
+    localStorage.setItem(VISITED_STORAGE_KEY, new Date().toISOString())
+  } catch {
+    // Storage can be unavailable (e.g. private browsing) — the tool is introduced again next time
+  }
+}
diff --git a/plugins/@sanity/themer/src/tool/themes.test.ts b/plugins/@sanity/themer/src/tool/themes.test.ts
new file mode 100644
index 0000000000..7479132839
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/themes.test.ts
@@ -0,0 +1,131 @@
+import {describe, expect, it} from 'vitest'
+
+import {DEFAULT_ACCENT} from '../theme/options'
+import {presets} from '../theme/presets'
+import {
+  CONFIG_SLUG,
+  createCustomTheme,
+  type CustomTheme,
+  displayTitle,
+  duplicateTitle,
+  initialThemerState,
+  resolveThemes,
+  type ThemerState,
+} from './themes'
+
+const verdant = presets.find((preset) => preset.slug === 'verdant')!
+const custom: CustomTheme = {slug: 'custom-1', title: 'Mine', options: {light: {accent: '#ff0000'}}}
+const stateWithCustom: ThemerState = {active: null, custom: [custom], removed: [], order: []}
+
+describe('resolveThemes', () => {
+  it('lists the configured theme, the presets and the custom themes in that order', () => {
+    const {themes, removed, active} = resolveThemes(stateWithCustom, {light: {accent: '#123456'}})
+
+    expect(themes.map((theme) => theme.slug)).toEqual([
+      CONFIG_SLUG,
+      ...presets.map((preset) => preset.slug),
+      'custom-1',
+    ])
+    expect(themes[0]).toMatchObject({title: 'Studio config', source: 'config'})
+    expect(themes[1].source).toBe('preset')
+    expect(themes.at(-1)).toMatchObject({...custom, source: 'custom'})
+    expect(removed).toEqual([])
+    expect(active).toBe(themes[0])
+  })
+
+  it('keeps the options identity of every theme', () => {
+    const {themes} = resolveThemes(stateWithCustom, verdant.options)
+
+    expect(themes[0].options).toBe(verdant.options)
+    expect(themes.find((theme) => theme.slug === 'dew')?.options).toBe(
+      presets.find((preset) => preset.slug === 'dew')?.options,
+    )
+    expect(themes.at(-1)?.options).toBe(custom.options)
+  })
+
+  it('hides presets that would only repeat the configured theme', () => {
+    const stock = resolveThemes(initialThemerState, {dark: {accent: DEFAULT_ACCENT}})
+
+    expect(stock.themes.some((theme) => theme.slug === 'studio')).toBe(false)
+
+    const configured = resolveThemes(initialThemerState, {
+      ...verdant.options,
+      light: {...verdant.options.light, accent: '#1CB485'},
+    })
+
+    expect(configured.themes.some((theme) => theme.slug === 'verdant')).toBe(false)
+    expect(configured.themes.some((theme) => theme.slug === 'studio')).toBe(true)
+  })
+
+  it('sets removed themes aside and falls back to the configured theme', () => {
+    const state: ThemerState = {
+      active: 'verdant',
+      custom: [custom],
+      removed: ['verdant', 'custom-1'],
+      order: [],
+    }
+    const {themes, removed, active} = resolveThemes(state, {light: {accent: '#123456'}})
+
+    expect(themes.some((theme) => theme.slug === 'verdant')).toBe(false)
+    expect(removed.map((theme) => theme.slug)).toEqual(['verdant', 'custom-1'])
+    expect(active.slug).toBe(CONFIG_SLUG)
+  })
+
+  it('arranges the themes in the stored order, the rest after them in default order', () => {
+    const {themes} = resolveThemes(
+      {...stateWithCustom, order: ['custom-1', 'dew', 'unknown', CONFIG_SLUG]},
+      {light: {accent: '#123456'}},
+    )
+    const slugs = themes.map((theme) => theme.slug)
+    const rest = presets.map((preset) => preset.slug).filter((slug) => slug !== 'dew')
+
+    expect(slugs).toEqual(['custom-1', 'dew', CONFIG_SLUG, ...rest])
+  })
+
+  it('keeps a removed theme in line for when it is restored', () => {
+    const state: ThemerState = {
+      ...stateWithCustom,
+      removed: ['dew'],
+      order: ['dew', 'custom-1', CONFIG_SLUG],
+    }
+    const {themes, removed} = resolveThemes(state, {light: {accent: '#123456'}})
+
+    expect(themes.slice(0, 2).map((theme) => theme.slug)).toEqual(['custom-1', CONFIG_SLUG])
+    expect(removed.map((theme) => theme.slug)).toEqual(['dew'])
+    expect(
+      resolveThemes({...state, removed: []}, {light: {accent: '#123456'}})
+        .themes.slice(0, 3)
+        .map((theme) => theme.slug),
+    ).toEqual(['dew', 'custom-1', CONFIG_SLUG])
+  })
+
+  it('applies the picked theme', () => {
+    const {active} = resolveThemes(
+      {...stateWithCustom, active: 'custom-1'},
+      {light: {accent: '#123456'}},
+    )
+
+    expect(active).toMatchObject({...custom, source: 'custom'})
+    expect(
+      resolveThemes({...stateWithCustom, active: 'unknown'}, {light: {accent: '#123456'}}).active
+        .slug,
+    ).toBe(CONFIG_SLUG)
+  })
+})
+
+describe('theme helpers', () => {
+  it('creates custom themes with slugs of their own', () => {
+    const created = createCustomTheme('Mine', {light: {accent: '#ff0000'}})
+
+    expect(created.slug).toMatch(/^custom-/)
+    expect(created).toMatchObject({title: 'Mine', options: {light: {accent: '#ff0000'}}})
+    expect(createCustomTheme('Other', {}).slug).not.toBe(created.slug)
+  })
+
+  it('titles duplicates and untitled themes', () => {
+    expect(duplicateTitle('Verdant')).toBe('Verdant copy')
+    expect(duplicateTitle('  ')).toBe('Untitled theme copy')
+    expect(displayTitle(' Mine ')).toBe('Mine')
+    expect(displayTitle('')).toBe('Untitled theme')
+  })
+})
diff --git a/plugins/@sanity/themer/src/tool/themes.ts b/plugins/@sanity/themer/src/tool/themes.ts
new file mode 100644
index 0000000000..d7d4ac91e1
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/themes.ts
@@ -0,0 +1,154 @@
+import type {BuildThemeOptions} from '../theme/options'
+import {presets} from '../theme/presets'
+import type {ImagePalette} from './imagePalette'
+import {sameOptions} from './options'
+
+/**
+ * Where a theme in the themer list comes from: the theme the Studio config
+ * was generated from, one of the presets defined in code, or one the user
+ * added in the tool. Only custom themes are editable — the others are
+ * duplicated into a custom theme first.
+ */
+type ThemerThemeSource = 'config' | 'preset' | 'custom'
+
+/** A theme the themer tool lists @internal */
+export interface ThemerTheme {
+  slug: string
+  title: string
+  options: BuildThemeOptions
+  source: ThemerThemeSource
+  /** The palette of the image the theme's colors were taken from, for custom themes */
+  palette?: ImagePalette
+}
+
+/** A theme the user added in the tool, as persisted @internal */
+export interface CustomTheme {
+  slug: string
+  title: string
+  options: BuildThemeOptions
+  /** The palette of the image the theme's colors were taken from */
+  palette?: ImagePalette
+}
+
+/** The persisted themer state @internal */
+export interface ThemerState {
+  /**
+   * The slug of the applied theme — `null` applies nothing on top of the
+   * Studio's configured theme
+   */
+  active: string | null
+  /** The themes the user added */
+  custom: CustomTheme[]
+  /** The slugs of the themes the user removed from the list */
+  removed: string[]
+  /**
+   * The slugs of the themes in the order the user arranged them — themes not
+   * in it (new presets, themes added since) follow in their default order
+   */
+  order: string[]
+}
+
+/** The slug of the theme the Studio config was generated from @internal */
+export const CONFIG_SLUG = 'config'
+
+/** The title of the theme the Studio config was generated from */
+const CONFIG_TITLE = 'Studio config'
+
+/** The title new themes start out with @internal */
+export const UNTITLED_THEME = 'Untitled theme'
+
+/** @internal */
+export const initialThemerState: ThemerState = {active: null, custom: [], removed: [], order: []}
+
+/** The themes the tool works with, derived from the persisted state @internal */
+export interface ResolvedThemes {
+  /** The themes to pick from, in list order */
+  themes: ThemerTheme[]
+  /** The removed themes, which can be restored */
+  removed: ThemerTheme[]
+  /** The applied theme */
+  active: ThemerTheme
+}
+
+/**
+ * Resolves the list of themes: the configured theme first, then the presets
+ * (minus the ones that would only repeat the configured theme), then the
+ * user's own themes — rearranged into the order the user dragged them into,
+ * with themes that order does not know about kept in that default order after
+ * the ones it does. Removed themes are set aside so they can be restored, and
+ * the active theme falls back to the configured one when its slug no longer
+ * resolves.
+ *
+ * @internal
+ */
+export function resolveThemes(state: ThemerState, baseOptions: BuildThemeOptions): ResolvedThemes {
+  const config: ThemerTheme = {
+    slug: CONFIG_SLUG,
+    title: CONFIG_TITLE,
+    options: baseOptions,
+    source: 'config',
+  }
+
+  const all: ThemerTheme[] = [config]
+
+  for (const preset of presets) {
+    if (!sameOptions(preset.options, baseOptions)) {
+      all.push({slug: preset.slug, title: preset.title, options: preset.options, source: 'preset'})
+    }
+  }
+
+  for (const theme of state.custom) {
+    all.push({
+      slug: theme.slug,
+      title: theme.title,
+      options: theme.options,
+      source: 'custom',
+      ...(theme.palette ? {palette: theme.palette} : {}),
+    })
+  }
+
+  const position = new Map(state.order.map((slug, index) => [slug, index]))
+  const rank = (theme: ThemerTheme) => position.get(theme.slug) ?? state.order.length
+
+  // A stable sort: the themes the order does not know about keep their default order
+  all.sort((a, b) => rank(a) - rank(b))
+
+  const removedSlugs = new Set(state.removed)
+  const themes = all.filter((theme) => !removedSlugs.has(theme.slug))
+  const removed = all.filter((theme) => removedSlugs.has(theme.slug))
+  const active = themes.find((theme) => theme.slug === state.active) ?? config
+
+  return {themes, removed, active}
+}
+
+/**
+ * Creates a custom theme with a slug that cannot collide with the presets or
+ * the configured theme.
+ *
+ * @internal
+ */
+export function createCustomTheme(
+  title: string,
+  options: BuildThemeOptions,
+  palette?: ImagePalette,
+): CustomTheme {
+  return {slug: `custom-${randomId()}`, title, options, ...(palette ? {palette} : {})}
+}
+
+/** The title of a duplicated theme @internal */
+export function duplicateTitle(title: string): string {
+  return `${displayTitle(title)} copy`
+}
+
+/** The title to show for a theme, falling back when the user cleared it @internal */
+export function displayTitle(title: string): string {
+  return title.trim() || UNTITLED_THEME
+}
+
+function randomId(): string {
+  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID()
+  }
+
+  return `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`
+}
diff --git a/plugins/@sanity/themer/src/tool/useImagePalette.ts b/plugins/@sanity/themer/src/tool/useImagePalette.ts
new file mode 100644
index 0000000000..2428226ef1
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/useImagePalette.ts
@@ -0,0 +1,71 @@
+import {useToast} from '@sanity/ui/toast'
+import {useCallback, useEffect, useRef, useState} from 'react'
+
+import {readImagePixels} from './imageFile'
+import {extractImagePalette, type ImagePalette} from './imagePalette'
+
+/**
+ * Extracts the palette of image files on device and hands it to `onPalette`,
+ * along with the file it came from. Failures end up as a toast.
+ *
+ * @internal
+ */
+export function useImagePalette(onPalette: (palette: ImagePalette, file: File) => void): {
+  busy: boolean
+  pickImage: (file: File) => void
+} {
+  const toast = useToast()
+  const [busy, setBusy] = useState(false)
+  const onPaletteRef = useRef(onPalette)
+  const mountedRef = useRef(true)
+  // Picks are numbered so that a slow earlier image cannot overwrite a later
+  // pick once its extraction finishes
+  const latestPickRef = useRef(0)
+
+  useEffect(() => {
+    onPaletteRef.current = onPalette
+  }, [onPalette])
+
+  useEffect(() => {
+    mountedRef.current = true
+
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
+  const pickImage = useCallback(
+    (file: File) => {
+      const pick = ++latestPickRef.current
+
+      setBusy(true)
+
+      // Whether this pick still matters: it is the latest one and the
+      // component that asked for it is still around
+      const isCurrent = () => mountedRef.current && latestPickRef.current === pick
+
+      const extract = async () => {
+        const palette = extractImagePalette(await readImagePixels(file))
+
+        if (!isCurrent()) return
+
+        if (Object.values(palette).every((swatch) => swatch === null)) {
+          toast.push({status: 'warning', title: 'Found no colors in that image'})
+        } else {
+          onPaletteRef.current(palette, file)
+        }
+      }
+
+      extract()
+        .catch(() => {
+          if (isCurrent()) toast.push({status: 'error', title: 'Could not read that image'})
+        })
+        .finally(() => {
+          if (isCurrent()) setBusy(false)
+        })
+    },
+    [toast],
+  )
+
+  return {busy, pickImage}
+}
diff --git a/plugins/@sanity/themer/src/tool/usePrefersReducedMotion.ts b/plugins/@sanity/themer/src/tool/usePrefersReducedMotion.ts
new file mode 100644
index 0000000000..8dceaba22a
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/usePrefersReducedMotion.ts
@@ -0,0 +1,29 @@
+import {useSyncExternalStore} from 'react'
+
+const QUERY = '(prefers-reduced-motion: reduce)'
+
+function subscribe(onChange: () => void): () => void {
+  const media = matchMedia(QUERY)
+
+  media.addEventListener('change', onChange)
+
+  return () => media.removeEventListener('change', onChange)
+}
+
+function getSnapshot(): boolean {
+  return matchMedia(QUERY).matches
+}
+
+function getServerSnapshot(): boolean {
+  return false
+}
+
+/**
+ * Whether the user prefers reduced motion — live, so that turning the
+ * setting on while the Studio is open takes effect right away.
+ *
+ * @internal
+ */
+export function usePrefersReducedMotion(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}
diff --git a/plugins/@sanity/themer/src/tool/useStudioNavbarHeight.ts b/plugins/@sanity/themer/src/tool/useStudioNavbarHeight.ts
new file mode 100644
index 0000000000..fe6bdaea5f
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/useStudioNavbarHeight.ts
@@ -0,0 +1,65 @@
+import {type RefObject, useEffect, useState} from 'react'
+
+/**
+ * The Studio navbar's root, the `Card` that draws its bottom border — its
+ * test id is stable and unique to the navbar, unlike its `data-ui` name
+ *
+ * @internal
+ */
+export const NAVBAR_SELECTOR = '[data-testid="studio-navbar"]'
+
+/**
+ * The height of the Studio navbar inside the given element, in pixels — kept
+ * up to date as the navbar renders, remounts and resizes, and `null` until
+ * there is one. The themer's header takes this height, so that its bottom
+ * border lines up with the navbar's whatever height the Studio version, its
+ * breakpoint or a custom navbar gives it.
+ *
+ * @internal
+ */
+export function useStudioNavbarHeight(ref: RefObject<HTMLElement | null>): number | null {
+  const [height, setHeight] = useState<number | null>(null)
+
+  useEffect(() => {
+    const root = ref.current
+
+    if (!root) return undefined
+
+    let navbar: Element | null = null
+    const resizeObserver = new ResizeObserver(() => {
+      if (navbar) setHeight(navbar.getBoundingClientRect().height)
+    })
+
+    // The navbar can render after the layout (the Studio suspends while it
+    // loads) and remount (switching workspaces), so it is looked up again
+    // whenever the Studio's DOM changes — cheap, as it sits near the top
+    const observeNavbar = () => {
+      const next = root.querySelector(NAVBAR_SELECTOR)
+
+      if (next === navbar) return
+
+      if (navbar) resizeObserver.unobserve(navbar)
+
+      navbar = next
+
+      if (navbar) {
+        resizeObserver.observe(navbar)
+        setHeight(navbar.getBoundingClientRect().height)
+      } else {
+        setHeight(null)
+      }
+    }
+
+    const mutationObserver = new MutationObserver(observeNavbar)
+
+    mutationObserver.observe(root, {childList: true, subtree: true})
+    observeNavbar()
+
+    return () => {
+      mutationObserver.disconnect()
+      resizeObserver.disconnect()
+    }
+  }, [ref])
+
+  return height
+}
diff --git a/plugins/@sanity/themer/src/tool/useThemeCodes.ts b/plugins/@sanity/themer/src/tool/useThemeCodes.ts
new file mode 100644
index 0000000000..e4489eb4c5
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/useThemeCodes.ts
@@ -0,0 +1,101 @@
+import {useToast} from '@sanity/ui/toast'
+import {useEffect} from 'react'
+
+import {useThemer} from './context'
+import {decodeTheme, encodeTheme, type SharedTheme} from './share'
+import {displayTitle} from './themes'
+
+/**
+ * Copying a theme as a code to share, and adding a theme from a code someone
+ * shared — with toasts telling how it went.
+ *
+ * @internal
+ */
+export function useThemeCodes(): {
+  copyTheme: (theme: SharedTheme) => Promise<void>
+  /** Adds the theme in the text, if there is one — the result says whether there was */
+  addThemeFromText: (text: string) => boolean
+  /** Adds the theme on the clipboard, if there is one and the browser hands the clipboard over */
+  addThemeFromClipboard: () => Promise<'added' | 'no-theme' | 'no-clipboard'>
+} {
+  const {send} = useThemer()
+  const toast = useToast()
+
+  const copyTheme = async (theme: SharedTheme) => {
+    const title = displayTitle(theme.title)
+
+    try {
+      await navigator.clipboard.writeText(encodeTheme(theme))
+      toast.push({
+        status: 'success',
+        title: `Copied ${title} as a code`,
+        description: 'Paste it in the themer of another Studio to add the theme there',
+      })
+    } catch {
+      toast.push({status: 'error', title: `Could not copy ${title}`})
+    }
+  }
+
+  const addThemeFromText = (text: string) => {
+    const theme = decodeTheme(text)
+
+    if (!theme) return false
+
+    send({type: 'theme.import', title: theme.title, options: theme.options})
+    toast.push({status: 'success', title: `Added ${theme.title}`})
+
+    return true
+  }
+
+  const addThemeFromClipboard = async () => {
+    let text: string
+
+    try {
+      text = await navigator.clipboard.readText()
+    } catch {
+      return 'no-clipboard'
+    }
+
+    return addThemeFromText(text) ? 'added' : 'no-theme'
+  }
+
+  return {copyTheme, addThemeFromText, addThemeFromClipboard}
+}
+
+/**
+ * Adds a theme pasted anywhere in the Studio while the themer's list is
+ * showing — pastes into inputs and other editable things are theirs.
+ *
+ * @internal
+ */
+export function usePasteThemeCodes(): void {
+  const {open, send} = useThemer()
+  const toast = useToast()
+
+  useEffect(() => {
+    if (!open) return undefined
+
+    const handlePaste = (event: ClipboardEvent) => {
+      if (isEditable(event.target)) return
+
+      const theme = decodeTheme(event.clipboardData?.getData('text/plain') ?? '')
+
+      if (!theme) return
+
+      event.preventDefault()
+      send({type: 'theme.import', title: theme.title, options: theme.options})
+      toast.push({status: 'success', title: `Added ${theme.title}`})
+    }
+
+    document.addEventListener('paste', handlePaste)
+
+    return () => document.removeEventListener('paste', handlePaste)
+  }, [open, send, toast])
+}
+
+function isEditable(target: EventTarget | null): boolean {
+  return (
+    target instanceof HTMLElement &&
+    (target.isContentEditable || target.matches('input, textarea, select'))
+  )
+}
diff --git a/plugins/@sanity/themer/src/tool/useTypedDeferredValue.test.tsx b/plugins/@sanity/themer/src/tool/useTypedDeferredValue.test.tsx
new file mode 100644
index 0000000000..75c86fe561
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/useTypedDeferredValue.test.tsx
@@ -0,0 +1,122 @@
+/** @vitest-environment jsdom */
+
+import {act, Suspense, use, useEffect, ViewTransition} from 'react'
+import {createRoot, type Root} from 'react-dom/client'
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
+
+import {useTypedDeferredValue} from './useTypedDeferredValue'
+
+declare global {
+  var IS_REACT_ACT_ENVIRONMENT: boolean
+}
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.append(container)
+  root = createRoot(container)
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  container.remove()
+})
+
+describe('useTypedDeferredValue', () => {
+  it('commits nothing of a value that changed back before its deferred render did', async () => {
+    const committed: boolean[] = []
+    let release = () => {}
+    const held = new Promise<void>((resolve) => {
+      release = resolve
+    })
+
+    // Holds the deferred render up, the way a slow one (mounting a whole
+    // Studio) would be, until the test lets go
+    function Hold() {
+      use(held)
+
+      return null
+    }
+
+    function Probe(props: {value: boolean}) {
+      const deferred = useTypedDeferredValue(props.value, 'test')
+
+      useEffect(() => {
+        committed.push(deferred)
+      })
+
+      return <Suspense fallback={null}>{deferred && <Hold />}</Suspense>
+    }
+
+    await act(async () => root.render(<Probe value={false} />))
+    await act(async () => root.render(<Probe value={true} />))
+    // The deferred render of `true` is held up — and the value changes back
+    await act(async () => root.render(<Probe value={false} />))
+    release()
+    await act(async () => {})
+
+    expect(committed).not.toContain(true)
+
+    // Nothing is held up anymore: the deferred value follows
+    await act(async () => root.render(<Probe value={true} />))
+
+    expect(committed.at(-1)).toBe(true)
+  })
+
+  it('gives the view transition of the deferred render its type', async () => {
+    const startViewTransition = vi.fn(
+      (options: {update: () => void | Promise<void>; types?: string[] | null}) => {
+        // Applies the DOM change straight away, as a browser would before capturing the new state
+        void options.update()
+
+        return {
+          finished: Promise.resolve(),
+          ready: Promise.resolve(),
+          skipTransition: () => {},
+          types: new Set(options.types ?? []),
+          updateCallbackDone: Promise.resolve(),
+        }
+      },
+    )
+
+    // What React reads of the document while it runs a view transition, and
+    // jsdom does not have
+    Object.defineProperty(document, 'startViewTransition', {
+      configurable: true,
+      value: startViewTransition,
+    })
+    Object.defineProperty(document, 'fonts', {
+      configurable: true,
+      value: {status: 'loaded'},
+    })
+    Element.prototype.getAnimations = () => []
+
+    function Probe(props: {value: boolean}) {
+      const deferred = useTypedDeferredValue(props.value, 'test-type')
+
+      return deferred ? (
+        <ViewTransition>
+          <div>shown</div>
+        </ViewTransition>
+      ) : null
+    }
+
+    try {
+      await act(async () => root.render(<Probe value={false} />))
+      await act(async () => root.render(<Probe value={true} />))
+      await act(async () => {})
+
+      expect(container.textContent).toBe('shown')
+      expect(startViewTransition).toHaveBeenCalledTimes(1)
+      expect(startViewTransition.mock.calls[0][0].types).toEqual(['test-type'])
+    } finally {
+      Reflect.deleteProperty(document, 'startViewTransition')
+      Reflect.deleteProperty(document, 'fonts')
+      Reflect.deleteProperty(Element.prototype, 'getAnimations')
+    }
+  })
+})
diff --git a/plugins/@sanity/themer/src/tool/useTypedDeferredValue.ts b/plugins/@sanity/themer/src/tool/useTypedDeferredValue.ts
new file mode 100644
index 0000000000..94b99bc56a
--- /dev/null
+++ b/plugins/@sanity/themer/src/tool/useTypedDeferredValue.ts
@@ -0,0 +1,37 @@
+import {addTransitionType, startTransition, useDeferredValue, useEffect, useState} from 'react'
+
+/**
+ * `useDeferredValue` with a transition type: the returned value lags behind
+ * `value` like a deferred one — rendered in a transition, which React
+ * animates — and the view transition React starts for it carries the given
+ * type (`document.startViewTransition({types})`), so a stylesheet tells it
+ * from any other transition on the page through
+ * `:active-view-transition-type()`.
+ *
+ * React only takes types from `startTransition`, and a deferred render is
+ * not one. So while the deferred value lags, a transition of the type joins
+ * it, with a state update of its own for the type to belong to: React renders
+ * every pending transition in one go, and the commit — the view transition
+ * — carries the types of all of them. The value itself stays with
+ * `useDeferredValue`, which reads the latest `value` as the deferred render
+ * runs: should `value` change back before that render commits, nothing
+ * changes and nothing animates — a queued state update would commit the
+ * stale value and animate it, only to animate back.
+ *
+ * @internal
+ */
+export function useTypedDeferredValue<T>(value: T, type: string): T {
+  const deferred = useDeferredValue(value)
+  const [, setTransitions] = useState(0)
+
+  useEffect(() => {
+    if (Object.is(deferred, value)) return
+
+    startTransition(() => {
+      addTransitionType(type)
+      setTransitions((count) => count + 1)
+    })
+  }, [deferred, type, value])
+
+  return deferred
+}
diff --git a/plugins/@sanity/themer/tsconfig.json b/plugins/@sanity/themer/tsconfig.json
new file mode 100644
index 0000000000..3da4ac866a
--- /dev/null
+++ b/plugins/@sanity/themer/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": ["@sanity/tsconfig/strictest"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["dist", "node_modules"],
+  "compilerOptions": {
+    "noUncheckedIndexedAccess": false
+  }
+}
diff --git a/plugins/@sanity/themer/tsdown.config.ts b/plugins/@sanity/themer/tsdown.config.ts
new file mode 100644
index 0000000000..69997703ed
--- /dev/null
+++ b/plugins/@sanity/themer/tsdown.config.ts
@@ -0,0 +1,34 @@
+import {defineConfig} from '@sanity/tsdown-config'
+import {Features} from 'lightningcss'
+import type {UserConfig} from 'tsdown'
+
+export default defineConfig({
+  entry: {
+    index: './src/index.ts',
+    legacy: './src/legacy/index.ts',
+    tool: './src/tool/index.ts',
+  },
+  // `target: '19'` emits `react/compiler-runtime` imports, which the React 19.3 peer range ships
+  reactCompiler: {target: '19', transform: 'oxc'},
+  // Extracts the CSS of the vanilla-extract `.css.ts` modules into
+  // `dist/bundle.css` and wires up the conditional `./bundle.css` export
+  // (`browser`/`style` resolve to the stylesheet, `node`/`default` to a no-op
+  // shim), like `@sanity/vision` ships its styles. The `tool` entry is the only
+  // one with styles, so it is the only one that gets the self-referential
+  // `import '@sanity/themer/bundle.css'` injected — which is why package.json
+  // lists `./dist/tool.js` in `sideEffects` next to `*.css`: flagged
+  // side-effect free, bundlers may bypass the entry and drop the bare CSS
+  // import with it before the stylesheet's own side-effect status is consulted
+  vanillaExtract: {
+    // Readable output keeps CSS diffs between published versions easy to review
+    minify: false,
+    lightningcss: {
+      // The `@sanity/browserslist-config` targets predate `light-dark()`, and
+      // Lightning CSS polyfills it with `--lightningcss-light`/`-dark` toggles
+      // added to every `color-scheme` declaration rather than by following the
+      // computed `color-scheme`, so both ship as authored instead. See
+      // https://github.com/parcel-bundler/lightningcss/issues/873
+      exclude: Features.LightDark,
+    },
+  },
+}) satisfies Promise<UserConfig | UserConfig[]>
diff --git a/plugins/@sanity/themer/vitest.config.ts b/plugins/@sanity/themer/vitest.config.ts
new file mode 100644
index 0000000000..280db82d16
--- /dev/null
+++ b/plugins/@sanity/themer/vitest.config.ts
@@ -0,0 +1,17 @@
+import {vanillaExtractPlugin} from '@sanity/vanilla-extract-vite-plugin'
+import {defineConfig} from 'vitest/config'
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  test: {
+    // Building whole themes and comparing every color in them takes several
+    // seconds with coverage on, as CI runs pull requests
+    testTimeout: 30_000,
+    setupFiles: ['@vanilla-extract/css/disableRuntimeStyles'],
+    server: {
+      deps: {
+        inline: ['vitest-package-exports'],
+      },
+    },
+  },
+})
diff --git a/plugins/sanity-plugin-dashboard-widget-vercel/package.json b/plugins/sanity-plugin-dashboard-widget-vercel/package.json
index 52a9be2cd2..eea18f74bd 100644
--- a/plugins/sanity-plugin-dashboard-widget-vercel/package.json
+++ b/plugins/sanity-plugin-dashboard-widget-vercel/package.json
@@ -46,12 +46,12 @@
     "@sanity/ui": "catalog:",
     "@sanity/uuid": "catalog:",
     "@tanstack/react-query": "^5.101.4",
-    "@xstate/react": "^6.1.0",
+    "@xstate/react": "catalog:",
     "object-hash": "3.0.0",
     "react-hook-form": "catalog:",
     "react-time-ago": "^7.4.4",
     "use-deep-compare-effect": "^1.8.1",
-    "xstate": "^5.32.5",
+    "xstate": "catalog:",
     "yup": "^0.32.11"
   },
   "devDependencies": {
diff --git a/plugins/sanity-plugin-mux-input/package.json b/plugins/sanity-plugin-mux-input/package.json
index f3db48a7a7..787b16ab74 100644
--- a/plugins/sanity-plugin-mux-input/package.json
+++ b/plugins/sanity-plugin-mux-input/package.json
@@ -54,7 +54,7 @@
     "react-is": "catalog:",
     "react-rx": "catalog:",
     "rxjs": "catalog:",
-    "scroll-into-view-if-needed": "^3.1.0",
+    "scroll-into-view-if-needed": "catalog:",
     "suspend-react": "catalog:",
     "swr": "^2.5.0",
     "type-fest": "^4.41.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0496478c42..4b98efb1fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -193,7 +193,7 @@ catalogs:
       specifier: ^3.0.8
       version: 3.0.8
     '@sanity/icons':
-      specifier: ^5.2.1
+      specifier: ^5.2.2
       version: 5.2.2
     '@sanity/image-url':
       specifier: ^2.1.1
@@ -214,14 +214,14 @@ catalogs:
       specifier: ^0.27.1
       version: 0.27.1
     '@sanity/ui':
-      specifier: ^4.0.7
+      specifier: ^4.2.7
       version: 4.2.7
     '@sanity/uuid':
       specifier: ^3.0.3
       version: 3.0.3
     '@sanity/vanilla-extract-vite-plugin':
-      specifier: ^0.2.17
-      version: 0.2.19
+      specifier: ^0.2.20
+      version: 0.2.20
     '@testing-library/jest-dom':
       specifier: ^7.0.1
       version: 7.0.1
@@ -255,6 +255,9 @@ catalogs:
     '@vitest/coverage-v8':
       specifier: ^4.1.11
       version: 4.1.11
+    '@xstate/react':
+      specifier: ^6.1.0
+      version: 6.1.0
     date-fns:
       specifier: ^4.4.0
       version: 4.4.0
@@ -271,7 +274,7 @@ catalogs:
       specifier: ^4.18.1
       version: 4.18.1
     motion:
-      specifier: ^13.1.0
+      specifier: ^13.4.4
       version: 13.4.4
     nanoid:
       specifier: ^6.0.1
@@ -312,6 +315,9 @@ catalogs:
     rxjs:
       specifier: ^7.8.2
       version: 7.8.2
+    scroll-into-view-if-needed:
+      specifier: ^3.1.0
+      version: 3.1.0
     styled-components:
       specifier: ^6.5.3
       version: 6.5.3
@@ -333,6 +339,9 @@ catalogs:
     vitest:
       specifier: ^4.1.11
       version: 4.1.11
+    xstate:
+      specifier: ^5.33.2
+      version: 5.33.2
 
 overrides:
   '@types/node': ^24.13.3
@@ -351,12 +360,6 @@ importers:
 
   .:
     dependencies:
-      '@changesets/changelog-github':
-        specifier: ^1.0.0
-        version: 1.0.1
-      '@changesets/cli':
-        specifier: ^3.0.1
-        version: 3.0.3
       '@sanity/plugin-kit':
         specifier: workspace:*
         version: link:packages/@sanity/plugin-kit
@@ -386,14 +389,23 @@ importers:
         version: 7.0.2
       vitest:
         specifier: 'catalog:'
-        version: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
+        version: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
       vitest-package-exports:
         specifier: ^1.2.0
         version: 1.2.0
     devDependencies:
+      '@changesets/changelog-github':
+        specifier: ^1.0.1
+        version: 1.0.1
+      '@changesets/cli':
+        specifier: ^3.0.3
+        version: 3.0.3
       '@vitest/coverage-v8':
         specifier: 'catalog:'
-        version: 4.1.11(vitest@4.1.11)
+        version: 4.1.11(@vitest/browser@4.1.11)(vitest@4.1.11)
+      eslint-plugin-storybook:
+        specifier: ^10.6.0
+        version: 10.6.0(eslint@10.11.0)(supports-color@10.2.2)(typescript@7.0.2)
       knip:
         specifier: ^6.33.0
         version: 6.38.0
@@ -435,6 +447,90 @@ importers:
         specifier: 'catalog:'
         version: 7.0.2
 
+  dev/storybook:
+    devDependencies:
+      '@sanity/color':
+        specifier: 'catalog:'
+        version: 3.0.8
+      '@sanity/icons':
+        specifier: 'catalog:'
+        version: 5.2.2(react@19.3.0)
+      '@sanity/themer':
+        specifier: workspace:*
+        version: link:../../plugins/@sanity/themer
+      '@sanity/tsconfig':
+        specifier: 'catalog:'
+        version: 2.2.1
+      '@sanity/ui':
+        specifier: 'catalog:'
+        version: 4.2.7(react-dom@19.3.0)(react@19.3.0)(styled-components@6.5.3)
+      '@sanity/vanilla-extract-vite-plugin':
+        specifier: 'catalog:'
+        version: 0.2.20(babel-plugin-macros@3.1.0)(vite@8.3.1)
+      '@storybook/addon-a11y':
+        specifier: ^10.6.0
+        version: 10.6.0(storybook@10.6.0)
+      '@storybook/addon-docs':
+        specifier: ^10.6.0
+        version: 10.6.0(@types/react-dom@19.3.0)(@types/react@19.3.0)(storybook@10.6.0)
+      '@storybook/addon-links':
+        specifier: ^10.6.0
+        version: 10.6.0(@types/react@19.3.0)(react@19.3.0)(storybook@10.6.0)
+      '@storybook/addon-themes':
+        specifier: ^10.6.0
+        version: 10.6.0(storybook@10.6.0)
+      '@storybook/addon-vitest':
+        specifier: ^10.6.0
+        version: 10.6.0(@vitest/browser-playwright@4.1.11)(@vitest/browser@4.1.11)(@vitest/runner@4.1.11)(react@19.3.0)(storybook@10.6.0)(vitest@4.1.11)
+      '@storybook/react-vite':
+        specifier: ^10.6.0
+        version: 10.6.0(@types/react-dom@19.3.0)(@types/react@19.3.0)(react-dom@19.3.0)(react@19.3.0)(storybook@10.6.0)(supports-color@10.2.2)(typescript@7.0.2)(vite@8.3.1)
+      '@types/node':
+        specifier: ^24.13.3
+        version: 24.19.0
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.3.0
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.3.0(@types/react@19.3.0)
+      '@vanilla-extract/css':
+        specifier: 'catalog:'
+        version: 1.21.2(babel-plugin-macros@3.1.0)
+      '@vitejs/plugin-react':
+        specifier: ^6.1.1
+        version: 6.1.1(@rolldown/plugin-babel@0.2.4)(oxc-transform-react@0.147.0)(vite@8.3.1)
+      '@vitest/browser-playwright':
+        specifier: ^4.1.11
+        version: 4.1.11(playwright@1.63.0)(vite@8.3.1)(vitest@4.1.11)
+      motion:
+        specifier: 'catalog:'
+        version: 13.4.4(react-dom@19.3.0)(react@19.3.0)
+      oxc-transform-react:
+        specifier: 'catalog:'
+        version: 0.147.0
+      playwright:
+        specifier: ^1.63.0
+        version: 1.63.0
+      react:
+        specifier: 'catalog:'
+        version: 19.3.0
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.3.0(react@19.3.0)
+      storybook:
+        specifier: ^10.6.0
+        version: 10.6.0(@types/react@19.3.0)(prettier@3.9.9)(react@19.3.0)
+      styled-components:
+        specifier: 'catalog:'
+        version: 6.5.3(react-dom@19.3.0)(react@19.3.0)
+      vite:
+        specifier: ^8.3.1
+        version: 8.3.1(@types/node@24.19.0)(@vitejs/devtools@0.4.12)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(yaml@2.9.1)
+      vitest:
+        specifier: 'catalog:'
+        version: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
+
   dev/test-studio:
     dependencies:
       '@sanity/assist':
@@ -507,14 +603,14 @@ importers:
         specifier: workspace:*
         version: link:../../plugins/@sanity/table
       '@sanity/themer':
-        specifier: ^0.8.0
-        version: 0.8.0(@types/react@19.3.0)(react-dom@19.3.0)(react@19.3.0)(sanity@6.17.0-next.108)(styled-components@6.5.3)
+        specifier: workspace:*
+        version: link:../../plugins/@sanity/themer
       '@sanity/ui':
         specifier: 'catalog:'
         version: 4.2.7(react-dom@19.3.0)(react@19.3.0)(styled-components@6.5.3)
       '@sanity/vanilla-extract-vite-plugin':
         specifier: 'catalog:'
-        version: 0.2.19(babel-plugin-macros@3.1.0)(vite@8.3.1)
+        version: 0.2.20(babel-plugin-macros@3.1.0)(vite@8.3.1)
       '@sanity/vercel-protection-bypass':
         specifier: workspace:*
         version: link:../../plugins/@sanity/vercel-protection-bypass
@@ -988,7 +1084,7 @@ importers:
         version: 0.27.1(@babel/core@7.29.7)(@rolldown/plugin-babel@0.2.4)(@types/node@24.19.0)(babel-plugin-macros@3.1.0)(oxc-transform-react@0.147.0)(tsdown@0.22.14)(typescript@7.0.2)(vite@8.3.1)
       '@sanity/vanilla-extract-vite-plugin':
         specifier: 'catalog:'
-        version: 0.2.19(babel-plugin-macros@3.1.0)(vite@8.3.1)
+        version: 0.2.20(babel-plugin-macros@3.1.0)(vite@8.3.1)
       '@types/lodash-es':
         specifier: 'catalog:'
         version: 4.17.12
@@ -1389,7 +1485,7 @@ importers:
         version: 0.27.1(@babel/core@7.29.7)(@rolldown/plugin-babel@0.2.4)(@types/node@24.19.0)(babel-plugin-macros@3.1.0)(oxc-transform-react@0.147.0)(tsdown@0.22.14)(typescript@7.0.2)(vite@8.3.1)
       '@sanity/vanilla-extract-vite-plugin':
         specifier: 'catalog:'
-        version: 0.2.19(babel-plugin-macros@3.1.0)(vite@8.3.1)
+        version: 0.2.20(babel-plugin-macros@3.1.0)(vite@8.3.1)
       '@types/google.maps':
         specifier: ^3.65.5
         version: 3.66.4
@@ -1941,6 +2037,88 @@ importers:
         specifier: 'catalog:'
         version: 0.22.14(@vitejs/devtools@0.4.12)(oxc-resolver@11.24.2)(publint@0.3.24)(tsx@4.23.15)(typescript@7.0.2)
 
+  plugins/@sanity/themer:
+    dependencies:
+      '@sanity/color':
+        specifier: 'catalog:'
+        version: 3.0.8
+      '@sanity/icons':
+        specifier: 'catalog:'
+        version: 5.2.2(react@19.3.0)
+      '@sanity/themer-legacy':
+        specifier: ^0.2.1
+        version: 0.2.1(react-dom@19.3.0)(react@19.3.0)(sanity@6.17.0-next.108)(styled-components@6.5.3)
+      '@sanity/ui':
+        specifier: 'catalog:'
+        version: 4.2.7(react-dom@19.3.0)(react@19.3.0)(styled-components@6.5.3)
+      '@vanilla-extract/dynamic':
+        specifier: 'catalog:'
+        version: 2.1.5
+      '@xstate/react':
+        specifier: 'catalog:'
+        version: 6.1.0(@types/react@19.3.0)(react@19.3.0)(xstate@5.33.2)
+      motion:
+        specifier: 'catalog:'
+        version: 13.4.4(react-dom@19.3.0)(react@19.3.0)
+      react-refractor:
+        specifier: ^4.0.0
+        version: 4.0.0(react@19.3.0)
+      refractor:
+        specifier: ^5.0.0
+        version: 5.0.0
+      sanity:
+        specifier: next
+        version: 6.17.0-next.108(@babel/core@7.29.7)(@babel/runtime@7.29.7)(@noble/hashes@2.4.0)(@rolldown/plugin-babel@0.2.4)(@types/node@24.19.0)(@types/react-dom@19.3.0)(@types/react@19.3.0)(@vitejs/devtools@0.4.12)(esbuild@0.28.2)(immer@11.1.18)(jiti@2.7.0)(oxc-transform-react@0.147.0)(oxfmt@0.63.0)(react-dom@19.3.0)(react@19.3.0)(rolldown@1.2.11)(styled-components@6.5.3)(supports-color@10.2.2)(tsx@4.23.15)(typescript@7.0.2)(vitest@4.1.11)
+      scroll-into-view-if-needed:
+        specifier: 'catalog:'
+        version: 3.1.0
+      xstate:
+        specifier: 'catalog:'
+        version: 5.33.2
+    devDependencies:
+      '@sanity/tsconfig':
+        specifier: 'catalog:'
+        version: 2.2.1
+      '@sanity/tsdown-config':
+        specifier: 'catalog:'
+        version: 0.27.1(@babel/core@7.29.7)(@rolldown/plugin-babel@0.2.4)(@types/node@24.19.0)(babel-plugin-macros@3.1.0)(oxc-transform-react@0.147.0)(tsdown@0.22.14)(typescript@7.0.2)(vite@8.3.1)
+      '@sanity/vanilla-extract-vite-plugin':
+        specifier: 'catalog:'
+        version: 0.2.20(babel-plugin-macros@3.1.0)(vite@8.3.1)
+      '@types/node':
+        specifier: ^24.13.3
+        version: 24.19.0
+      '@types/react':
+        specifier: 'catalog:'
+        version: 19.3.0
+      '@types/react-dom':
+        specifier: 'catalog:'
+        version: 19.3.0(@types/react@19.3.0)
+      '@vanilla-extract/css':
+        specifier: 'catalog:'
+        version: 1.21.2(babel-plugin-macros@3.1.0)
+      jsdom:
+        specifier: 'catalog:'
+        version: 29.1.1(@noble/hashes@2.4.0)
+      lightningcss:
+        specifier: ^1.33.0
+        version: 1.33.0
+      oxc-transform-react:
+        specifier: 'catalog:'
+        version: 0.147.0
+      react:
+        specifier: 'catalog:'
+        version: 19.3.0
+      react-dom:
+        specifier: 'catalog:'
+        version: 19.3.0(react@19.3.0)
+      styled-components:
+        specifier: 'catalog:'
+        version: 6.5.3(react-dom@19.3.0)(react@19.3.0)
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.22.14(@vitejs/devtools@0.4.12)(oxc-resolver@11.24.2)(publint@0.3.24)(tsx@4.23.15)(typescript@7.0.2)
+
   plugins/@sanity/vercel-protection-bypass:
     dependencies:
       '@sanity/icons':
@@ -2145,7 +2323,7 @@ importers:
         version: 0.27.1(@babel/core@7.29.7)(@rolldown/plugin-babel@0.2.4)(@types/node@24.19.0)(babel-plugin-macros@3.1.0)(oxc-transform-react@0.147.0)(tsdown@0.22.14)(typescript@7.0.2)(vite@8.3.1)
       '@sanity/vanilla-extract-vite-plugin':
         specifier: 'catalog:'
-        version: 0.2.19(babel-plugin-macros@3.1.0)(vite@8.3.1)
+        version: 0.2.20(babel-plugin-macros@3.1.0)(vite@8.3.1)
       '@types/node':
         specifier: ^24.13.3
         version: 24.19.0
@@ -2330,7 +2508,7 @@ importers:
         specifier: ^5.101.4
         version: 5.104.0(react@19.3.0)
       '@xstate/react':
-        specifier: ^6.1.0
+        specifier: 'catalog:'
         version: 6.1.0(@types/react@19.3.0)(react@19.3.0)(xstate@5.33.2)
       object-hash:
         specifier: 3.0.0
@@ -2348,7 +2526,7 @@ importers:
         specifier: ^1.8.1
         version: 1.8.1(react@19.3.0)
       xstate:
-        specifier: ^5.32.5
+        specifier: 'catalog:'
         version: 5.33.2
       yup:
         specifier: ^0.32.11
@@ -2964,7 +3142,7 @@ importers:
         specifier: next
         version: 6.17.0-next.108(@babel/core@7.29.7)(@babel/runtime@7.29.7)(@noble/hashes@2.4.0)(@rolldown/plugin-babel@0.2.4)(@types/node@24.19.0)(@types/react-dom@19.3.0)(@types/react@19.3.0)(@vitejs/devtools@0.4.12)(esbuild@0.28.2)(immer@11.1.18)(jiti@2.7.0)(oxc-transform-react@0.147.0)(oxfmt@0.63.0)(react-dom@19.3.0)(react@19.3.0)(rolldown@1.2.11)(styled-components@6.5.3)(supports-color@10.2.2)(tsx@4.23.15)(typescript@7.0.2)(vitest@4.1.11)
       scroll-into-view-if-needed:
-        specifier: ^3.1.0
+        specifier: 'catalog:'
         version: 3.1.0
       suspend-react:
         specifier: 'catalog:'
@@ -3244,7 +3422,7 @@ importers:
         version: 0.27.1(@babel/core@7.29.7)(@rolldown/plugin-babel@0.2.4)(@types/node@24.19.0)(babel-plugin-macros@3.1.0)(oxc-transform-react@0.147.0)(tsdown@0.22.14)(typescript@7.0.2)(vite@8.3.1)
       '@sanity/vanilla-extract-vite-plugin':
         specifier: 'catalog:'
-        version: 0.2.19(babel-plugin-macros@3.1.0)(vite@8.3.1)
+        version: 0.2.20(babel-plugin-macros@3.1.0)(vite@8.3.1)
       '@types/node':
         specifier: ^24.13.3
         version: 24.19.0
@@ -3372,7 +3550,7 @@ importers:
         version: 7.0.2
       vitest:
         specifier: 'catalog:'
-        version: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
+        version: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
 
   turbo/generators:
     devDependencies:
@@ -4344,6 +4522,9 @@ packages:
     resolution: {integrity: sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==}
     engines: {node: '>=18'}
 
+  '@blazediff/core@1.9.1':
+    resolution: {integrity: sha512-ehg3jIkYKulZh+8om/O25vkvSsXXwC+skXmyA87FFx6A/45eqOkZsBltMw/TVteb0mloiGT8oGRTcjRAz66zaA==}
+
   '@borewit/text-codec@0.2.2':
     resolution: {integrity: sha512-DDaRehssg1aNrH4+2hnj1B7vnUGEjU6OIlyRdkMd0aUdIUvKXrJfXsy8LVtXAy7DRvYVluWbMspsRhz2lcW0mQ==}
 
@@ -4360,6 +4541,9 @@ packages:
   '@bytecodealliance/preview2-shim@0.17.6':
     resolution: {integrity: sha512-n3cM88gTen5980UOBAD6xDcNNL3ocTK8keab21bpx1ONdA+ARj7uD1qoFxOWCyKlkpSi195FH+GeAut7Oc6zZw==}
 
+  '@cacheable/memory@2.2.0':
+    resolution: {integrity: sha512-CTLKqLItRCEixEAewD3/j9DB3/o96gpTPD4eJ1v+DGOlxZRZncRQkGYqqnAGCscYd6RNeXfGeiuCphsPtqyIfQ==}
+
   '@cacheable/utils@2.5.0':
     resolution: {integrity: sha512-buipgOVDkkPXNR5+xBpDw7Zk2n1EvU7qBJCNUcL7rhQ//kfpOXPAvQ511Os0vpLYJ1pZnvudNytkQt2hst3wqA==}
 
@@ -4650,18 +4834,30 @@ packages:
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
+  '@emnapi/core@1.11.0':
+    resolution: {integrity: sha512-l9Oo58x0HOP5znGzVhYW9U3e5wVuA4LAZU2AGezTmkhO1CgQRFDhDg4nneHsu/t3WniXg9QrG2nIXL/ZS8ln8Q==}
+
   '@emnapi/core@1.11.2':
     resolution: {integrity: sha512-TC8MkTuZUtcTSiFeuC0ksCh9QIJ5+F21MvZ4Wn4ORfYaFJ/0dsiudv5tVkejgwZlwQ39jL9WWDe2lz8x0WglOA==}
 
+  '@emnapi/core@1.9.2':
+    resolution: {integrity: sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==}
+
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
+  '@emnapi/runtime@1.11.0':
+    resolution: {integrity: sha512-55coeOFKHv1ywEcUXJtWU5f+Jr/W5tZDvZig8DLKSwUN1JpROQ4rk/SNOQiFWmaR/VKF4zuFyW1B8JduOSv6Pg==}
+
   '@emnapi/runtime@1.11.2':
     resolution: {integrity: sha512-kyOl3X0DuTiT1h2ft8r2fYO8JYtU9a9Xis/zBSiGArNaagCOWx90N1k2wxp18czFDH+OgcWGb5ZP/XMt3dcyPA==}
 
   '@emnapi/runtime@1.11.3':
     resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
 
+  '@emnapi/runtime@1.9.2':
+    resolution: {integrity: sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==}
+
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
@@ -5024,6 +5220,36 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@eslint-community/eslint-utils@4.10.1':
+    resolution: {integrity: sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.23.5':
+    resolution: {integrity: sha512-Y3kKLvC1dvTOT+oGlqNQ1XLqK6D1HU2YXPc52NmAlJZbMMWDzGYXMiPRJ8TYD39muD/OTjlZmNJ4ib7dvSrMBA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/config-helpers@0.7.0':
+    resolution: {integrity: sha512-DObd/KKUsU+FaFv4PLxSRenpXfQWmPXXP3pPZ6/K1PCrMu2vQpMDMuQe/BqYeoLcz8ro0bVDF1RxOJgfVEdhUw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/core@1.2.1':
+    resolution: {integrity: sha512-MwcE1P+AZ4C6DWlpin/OmOA54mmIZ/+xZuJiQd4SyB29oAJjN30UW9wkKNptW2ctp4cEsvhlLY/CsQ1uoHDloQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/object-schema@3.0.5':
+    resolution: {integrity: sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  '@eslint/plugin-kit@0.7.3':
+    resolution: {integrity: sha512-IkO+/KEUvwbVpiURZg+P7zF74z5Jxe0UgJxVni+RtoHQ6IZieXaO02kmadomap/q+l6bc/jdPGGqTjhuZnuz1Q==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   '@exodus/bytes@1.16.0':
     resolution: {integrity: sha512-IcpW84uEn3N7ETtNZMlxKhfl6Pec8rUNGOTBtWbK1FKhJxIFAptZyVrvVRVBimAJxJCgc3PxepxkdWWG4DVzfA==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
@@ -5140,6 +5366,26 @@ packages:
   '@huggingface/transformers@3.8.1':
     resolution: {integrity: sha512-tsTk4zVjImqdqjS8/AOZg2yNLd1z9S5v+7oUPpXaasDRwEDhB+xnglK1k5cad26lL5/ZIaeREgWWy0bs9y9pPA==}
 
+  '@humanfs/core@0.19.2':
+    resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.8':
+    resolution: {integrity: sha512-gE1eQNZ3R++kTzFUpdGlpmy8kDZD/MLyHqDwqjkVQI0JMdI1D51sy1H958PNXYkM2rAac7e5/CnIKZrHtPh3BQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/types@0.15.0':
+    resolution: {integrity: sha512-ZZ1w0aoQkwuUuC7Yf+7sdeaNfqQiiLcSRbfI08oAxqLtpXQr9AIVX7Ay7HLDuiLYAaFPu8oBYNq/QIi9URHJ3Q==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
   '@ibm-cloud/watsonx-ai@1.7.16':
     resolution: {integrity: sha512-ks7EI3TlrnZ6uKEIGemLHiBqOaqrA2dALNhC9Potl5CeajGNhF0n6eY30cNRvboDbuMRibw1iAtn7vnX4dzlwg==}
     engines: {node: '>=20.0.0'}
@@ -5602,6 +5848,15 @@ packages:
     resolution: {integrity: sha512-VwGZqqjAWPICTmxUZnbpEfO60LhPWzquik+bmyXGY7pYRn6diEvCI5i6Ca+J6o2y4vS73HrpuMTo2dOvUevH8w==}
     engines: {node: '>=12'}
 
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0':
+    resolution: {integrity: sha512-qvsTEwEFefhdirGOPnu9Wp6ChfIwy2dBCRuETU3uE+4cC+PFoxMSiiEhxk4lOluA34eARHA0OxqsEUYDqRMgeQ==}
+    peerDependencies:
+      typescript: '>= 4.3.x'
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -5623,6 +5878,12 @@ packages:
     peerDependencies:
       zod: ^4.0.0
 
+  '@keyv/bigmap@1.3.1':
+    resolution: {integrity: sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      keyv: ^5.6.0
+
   '@keyv/serialize@1.1.1':
     resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
 
@@ -5695,6 +5956,12 @@ packages:
       markdown-it:
         optional: true
 
+  '@mdx-js/react@3.1.1':
+    resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
+    peerDependencies:
+      '@types/react': '>=16'
+      react: '>=16'
+
   '@microsoft/api-extractor-model@7.33.13':
     resolution: {integrity: sha512-OVL/dDvHstFJMJb2amgI7S9p9wAVMyrt18R2aSBOP9tVAARWiEJAM3wVsgxXymMOvnvKO/np9X7PeJpNZv3eLg==}
     engines: {node: '>=20.9.0'}
@@ -6173,6 +6440,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    resolution: {integrity: sha512-0LC7ye4hvqbIKxAzThzvswgHLFu2AURKzYLeSVvLdu2TBOYWQDmHnTqPLeA597BcUCxiLqLsS4CJ5uoI5WYWCQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
   '@oxc-parser/binding-android-arm-eabi@0.129.0':
     resolution: {integrity: sha512-sG37CfXLlYXdDrggAFO/mKcO4w36piwf862xAZXIuf3nzKhWK1FvW4dqie+06++z+mDto2QeOQSvhyzBeK5jsQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6191,6 +6464,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    resolution: {integrity: sha512-b5jtVTH6AU5CJXHNdj7Jj9IEiR9yVjjnwHzPJhGyHGPdcsZSzBCkS9GBbV33niRMvKthDwQRFRJfI4a+k4PvYg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
   '@oxc-parser/binding-android-arm64@0.129.0':
     resolution: {integrity: sha512-DVyLFN2+S0VOhT6lm5++tFqlu3x2Njiby6y5DhTzjV5uRsZWpifsBn6+yjtwAxl105peEjs5BHE3ToBJuQjLTg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6209,6 +6488,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    resolution: {integrity: sha512-obCE8B7ISKkJidjlhv9xRGJPOSDG2Yu6PRga9Ruaz35uintHxbp1Ki/Yc71wx4rj3Edrm0a1kzG1TAwit0wFpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@oxc-parser/binding-darwin-arm64@0.129.0':
     resolution: {integrity: sha512-QeqThtB8qax4IL+NFBWgshudyKkj5c076L8vyd8PCEx7U1wHyIbH49MEQ5J5iURFhUW5jiFmdnLKEwyOo0GAJA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6227,6 +6512,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    resolution: {integrity: sha512-JL6Xb5IwPQT8rUzlpsX7E+AgfcdNklXNPFp8pjCQQ5MQOQo5rtEB2ui+3Hgg9Sn7Y9Egj6YOLLiHhLpdAe12Aw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@oxc-parser/binding-darwin-x64@0.129.0':
     resolution: {integrity: sha512-zn5+7nv4DlK4uFgblmhKm6xRV0QUHXOHyIDkjmhxJ53xSA9ahkb3pHNiHesNPXn/nK/VWU+C+Z6JYHdatZBh7g==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6245,6 +6536,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    resolution: {integrity: sha512-SDQ/3MQFw58fqQz3Z1PhSKFF3JoCF4gmlNjziDm8X02tTahCw0qJbd7FGPDKw1i4VTBZene9JPyC3mHtSvi+wA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
   '@oxc-parser/binding-freebsd-x64@0.129.0':
     resolution: {integrity: sha512-SPTcDBiHWlgRpWFC1jnoi0sBWqCw4DFR+4b8+dV+NAhUu2ONERWyIVIOCfcE9a8BlvZsDCuXf3l/x7wQUs1Rsw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6263,6 +6560,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    resolution: {integrity: sha512-Av+D1MIqzV0YMGPT9we2SIZaMKD7Cxs4CvXSx/yxaWHewZjYEjScpOf5igc8IILASViw4WTnjlwUdI1KzVtDHQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.129.0':
     resolution: {integrity: sha512-Rgc9+WNKLbc+chyDTXyyJ7gbgLo+ve27CrRnmIwGgucGflrBZbutge5jdPPegcgf46RrR4dkBbMCp0/x16mdig==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6281,6 +6584,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    resolution: {integrity: sha512-Cs2fdJ8cPpFdeebj6p4dag8A4+56hPvZ0AhQQzlaLswGz1tz7bXt1nETLeorrM9+AMcWFFkqxcXwDGfTVidY8g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm-musleabihf@0.129.0':
     resolution: {integrity: sha512-YtSsJ51VysXqlO8Cs2mWTyXvxBRemTHj4WDQjXwKl0SAxh+CVrEdXrdH+RnjxLj3JCUMFeYuHs5c+/DImfbKkg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6300,6 +6609,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    resolution: {integrity: sha512-qdOfTcT6SY8gsJrrV92uyEUyjqMGPpIB5JZUG6QN5dukYd+7/j0kX6MwK1DgQj39jtUYixxPiaRUiEN1+0CXgQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-arm64-gnu@0.129.0':
     resolution: {integrity: sha512-9oK8iQr9KtgI5JhaJ+5IwiQsXEo6NuasFgovtJGrdK/RxbA0bO4YKRvVY7M+8lozUCVz1U7XrFFODv3emIOPRA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6321,6 +6637,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    resolution: {integrity: sha512-EoTCZneNFU/P2qrpEM+RHmQwt+CvDkyGESG6qhr7KaegXLZwePfbrkCDfAk8/rhxbDUVGsZILX+2tqPzFtoFWA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   '@oxc-parser/binding-linux-arm64-musl@0.129.0':
     resolution: {integrity: sha512-GghE/bf9ZqgqZFxLacgP0ImVD6UiLKQOpvpgUoIsqjopu2ms/+p1L0d0Dv2Sck+8p0FbKS2WE3IjqmIlLbxJgA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6342,6 +6665,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    resolution: {integrity: sha512-zALjmZYgxFLHjXeudcDF0xFGNydTAtkAeXAr2EuC17ywCyFxcmQra4w0BMde0Yi/re4Bi4iwEoEXtYN7l6eBLQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-ppc64-gnu@0.129.0':
     resolution: {integrity: sha512-A2PW0UbERzKGV6fKX1zoe2Tkc1zVcEJSSPW9IUSKbZAPuPe+M5/5hTA+6fQbWmevabe2B3IDky66a1lFGjpBKA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6363,6 +6693,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    resolution: {integrity: sha512-fPP8M6zQLS7Jz7o9d5ArUSuAuSK3e+WCYVrCpdzeCOejidtZExJ9tjhDrAd3HEPqARBCPmdpqxESPFqy44vkBQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-riscv64-gnu@0.129.0':
     resolution: {integrity: sha512-omwxd9H+jrl1T72RI666k4ho7Eli2iHdELzf+dL0D+uXThNZXYJCbKjm5rK2hrHmDy4O+NWv7+khBrEkorLsgw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6384,6 +6721,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    resolution: {integrity: sha512-7IcC4Ao02oGpfnjt+X/oF4U2mllo2qoSkw5xxiXNKL9MCTsTiAC6616beOuehdxGcnz1bRoPC1RQ2f1GQDdN+g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
   '@oxc-parser/binding-linux-riscv64-musl@0.129.0':
     resolution: {integrity: sha512-v2hi8id+M8C0uY8uuG2t2a5vr8H9XyHXiHL12yMdMNtgn04nnM/8hlOGuoJuxVc07PhClNiaoSaY2eXehSRa7w==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6405,6 +6749,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    resolution: {integrity: sha512-pbXIhiNFHoqWeqDNLiJ9JkpHz1IM9k4DXa66x+1GTWMG7iLxtkXgE53iiuKSXwmk3zIYmaPVfBvgcAhS583K4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-s390x-gnu@0.129.0':
     resolution: {integrity: sha512-UXrdDyLh1Obgj5X+IVVXWoo5/FJbFsU8/uLQ/M9lkVUwBUKpRFxNEhzwBNv21qqdKgAh+pr2CCVD8J1JfRPsIQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6426,6 +6777,13 @@ packages:
     os: [linux]
     libc: [glibc]
 
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    resolution: {integrity: sha512-MYCguB9RvBvlSd6gbuNI7QwiLoCCAlGnlRJFPrzLI6U1/9wkC/WK6LtBAUln55H1Ctqw45PWmqrobKoMhsYQzQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-parser/binding-linux-x64-gnu@0.129.0':
     resolution: {integrity: sha512-hsL/3/kdX9FGLqOj8DR3Eki4Y6zO1i3+ZHhiPwX0hDt4n+18abkfUzePCv3h8SShprwCmwdxPnlrebZ5+MZ+cw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6447,6 +6805,13 @@ packages:
     os: [linux]
     libc: [musl]
 
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    resolution: {integrity: sha512-5eY0B/bxf1xIUxb4NOTvOI3KWtBQfPWYyKAzgcrCt0mDibSZygVpO1Pz8bkeiSZ5Jj9+M09dkggG3H8I5d0Uyg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@oxc-parser/binding-linux-x64-musl@0.129.0':
     resolution: {integrity: sha512-kdXvJ4crOeRld3vWl0J0VU4nmnT4pZ3lKGA5tZ1y0UPWsBtElDYd+jsz4lE36tpAbCiWm0M0PG0laUNBSE+Wlw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6467,6 +6832,12 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    resolution: {integrity: sha512-Gld0ajrFTUXNtdw20fVBuTQx66FA75nIVg+//pPfR3sXkuABB4mTBhl3r9JNzrJpgW//qiwxf0nWXUWGJSL3UQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@oxc-parser/binding-openharmony-arm64@0.129.0':
     resolution: {integrity: sha512-DusJfcK7EGwf9TEakB+z6SXCLdHGvDZ8U8882bzWb4oVrORHpbkFl9npS7cN3YC2axcVKoktbxZevS1nxVCKFw==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6484,6 +6855,11 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    resolution: {integrity: sha512-T6KVD7rhLzFlwGRXMnxUFfkCZD8FHnb968wVXW1mXzgRFc5RNXOBY2mPPDZ77x5Ln76ltLMgtPg0cOkU1NSrEQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
   '@oxc-parser/binding-wasm32-wasi@0.129.0':
     resolution: {integrity: sha512-Iie9CcII+ELSinKFnxTR15xhI9qriVivEhbFh3driRNbzms/5ioDAU0fwe8Mf1FEaz3n2FtiUVX0h0nwKLYk0A==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6495,6 +6871,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    resolution: {integrity: sha512-Ujvw4X+LD1CCGULcsQcvb4YNVoBGqt+JHgNNzGGaCImELiZLk477ifUH53gIbE7EKd933NdTi25JWEr9K2HwXw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@oxc-parser/binding-win32-arm64-msvc@0.129.0':
     resolution: {integrity: sha512-99kH1udLyrts+wGm+u0VhPbogkb2wxc/6J1XMKOpS6Kx5DjBWGRZZfBjfCGI3xKSInpYbZn4TLWLX1Q1GURYwg==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6513,6 +6895,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    resolution: {integrity: sha512-0cwxKO7KHQQQfo4Uf4B2SQrhgm+cJaP9OvFFhx52Tkg4bezsacu83GB2/In5bC415Ueeym+kXdnge/57rbSfTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
   '@oxc-parser/binding-win32-ia32-msvc@0.129.0':
     resolution: {integrity: sha512-tmSBR1A4yH697qV291xKyDe4OAWFchJ+cXf2wuipx/vK3n5d5Ej9MVLRtXlIcZ38n8qAjsF0/AnskaYgxM151A==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6531,6 +6919,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    resolution: {integrity: sha512-rOrnSQSCbhI2kowr9XxE7m9a8oQXnBHjnS6j95LxxAnEZ0+Fz20WlRXG4ondQb+ejjt2KOsa65sE6++L6kUd+w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@oxc-parser/binding-win32-x64-msvc@0.129.0':
     resolution: {integrity: sha512-Z1PbJvkPeLASIUxa3AnrQ5H+vv1K9zC0IGnQqoKfM0ZvsvCSe0d3u5m7d9iuy+HB7GrcElHuwKb0d0qFdtG0iA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -6549,6 +6943,9 @@ packages:
   '@oxc-project/types@0.121.0':
     resolution: {integrity: sha512-CGtOARQb9tyv7ECgdAlFxi0Fv7lmzvmlm2rpD/RdijOO9rfk/JvB1CjT8EnoD+tjna/IYgKKw3IV7objRb+aYw==}
 
+  '@oxc-project/types@0.127.0':
+    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
+
   '@oxc-project/types@0.129.0':
     resolution: {integrity: sha512-3oz8m3FGdr2nDXVqmFUw7jolKliC4MoyXYIG2c7gpjBnzUWQpUGIYcXYKxTdTi+N2jusvt610ckTMkxdwHkYEg==}
 
@@ -6558,104 +6955,207 @@ packages:
   '@oxc-project/types@0.151.0':
     resolution: {integrity: sha512-J1yXrIlNDZVzE3ada310xeAw7nH8yCAyLPuUIsjKatFPmfn5bS1oW+cM+QsGOtVWd5nhSpbwZWx/rue+r5Z+PA==}
 
+  '@oxc-resolver/binding-android-arm-eabi@11.21.2':
+    resolution: {integrity: sha512-xQoCRv+gKax9KTdwdaQNnAFOai8neay7g3jExDIORzhbrejwGSJaZNTdOJHR5ziLg2joMxOCMOFMo4zuxza2uQ==}
+    cpu: [arm]
+    os: [android]
+
   '@oxc-resolver/binding-android-arm-eabi@11.24.2':
     resolution: {integrity: sha512-y09e0L0SRI2OA2tUIrjBgoV3eH5hvUKXNkJqXmNo5V2WxIjyC7I7aJfRLMEVpA8yi95f90gFDvO0VMgrDw+vwA==}
     cpu: [arm]
     os: [android]
 
+  '@oxc-resolver/binding-android-arm64@11.21.2':
+    resolution: {integrity: sha512-HF5oiE2L05yInPYCFD/4uxSrEZW4SuIfn99Y6L1xnJnzl066JR+MJs2rIdstw8A2MPlAKH+13dpFPNycjqzvGg==}
+    cpu: [arm64]
+    os: [android]
+
   '@oxc-resolver/binding-android-arm64@11.24.2':
     resolution: {integrity: sha512-cl4icWaZFnLdg8m6qtnh5rBMuGbxc/ptStFHLeCNwr+2cZjkjNwQu/jYRS0CHlnPecOJMpuS5M6/BH+0J/YkEg==}
     cpu: [arm64]
     os: [android]
 
+  '@oxc-resolver/binding-darwin-arm64@11.21.2':
+    resolution: {integrity: sha512-UX4u49CVCAD8QZNELaW8eMGgMAGwFWYEPbvNsh+3r/gs4NX3KfpiACMVwRQT0EuH3uat9hM5Zl+Ppm9pJD8tgg==}
+    cpu: [arm64]
+    os: [darwin]
+
   '@oxc-resolver/binding-darwin-arm64@11.24.2':
     resolution: {integrity: sha512-At29QEMF6HajbQvgY8K6OXnHD1x9rad74xBEfmCB6ZqCGsdq75aK7tOYcTbOanMy8qdIBrfL3SMr3p/lfSlb9w==}
     cpu: [arm64]
     os: [darwin]
 
+  '@oxc-resolver/binding-darwin-x64@11.21.2':
+    resolution: {integrity: sha512-J9xPx7YBkrRmJ+xl561ztnMWEc1aOyjEIxBiGX1dVb3u7bGSnfObfcZk+Pd+uM0HZAPNsQ1xvD8j52A/uOSqNQ==}
+    cpu: [x64]
+    os: [darwin]
+
   '@oxc-resolver/binding-darwin-x64@11.24.2':
     resolution: {integrity: sha512-A5Kqr1EUj4oIL5CF4WRssq/o5P0Y11cwoFouMRmQ7YnC/A8V93nv1nb7aSU8HwcgmXropjLNkVTl4MN87cu28Q==}
     cpu: [x64]
     os: [darwin]
 
+  '@oxc-resolver/binding-freebsd-x64@11.21.2':
+    resolution: {integrity: sha512-fRlt7OvSaQkWj6+EDTVxawVxOlqJB2QSnBfkeCyK4RTvsGctbw3BiH2Tb7DzMs7bikc4BRBpvWP5zF9K8b54Zg==}
+    cpu: [x64]
+    os: [freebsd]
+
   '@oxc-resolver/binding-freebsd-x64@11.24.2':
     resolution: {integrity: sha512-R5xkRBRRz7ceH/P5Jrc6G7FmdUdgpLYyESFAUDVTNQ9K0sGPxcp4ljiwEwEqsvNcQ4sYbMRrWcHHBCu7ksAJVw==}
     cpu: [x64]
     os: [freebsd]
 
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.2':
+    resolution: {integrity: sha512-gK+vPUcPQITkGwBKpZGrcDHSlU6eDGl7AQacxS2CEKAZIBHWkOVFeJwLZ4tYnA1acJqRM5lt7yYwPCVqGHIJ7A==}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2':
     resolution: {integrity: sha512-k/RuYL4L/R58IBn3wT5ma3Wh4k62bp1eYCFRWCmMsasUOqL+H6sW0VGFadEzKWXFFlz+2uIMoeMk9ySSZJHgbg==}
     cpu: [arm]
     os: [linux]
 
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.2':
+    resolution: {integrity: sha512-L/Rgas7SrOKy/z7IH+HxSFRqVO4PuLDKLEGKvnhoCBBq3UJ0YzGBou3qMzaAGgkJwsIvX2pBF+7ojzfUhLiZxQ==}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-resolver/binding-linux-arm-musleabihf@11.24.2':
     resolution: {integrity: sha512-bnHAak3ujYfH5pKk4NieFNbvYvernfoQDgwLddbZ3OtMYrem87/qjlA+u+aKG0oZcqSLGCful/6/CEA+aeAgaA==}
     cpu: [arm]
     os: [linux]
 
+  '@oxc-resolver/binding-linux-arm64-gnu@11.21.2':
+    resolution: {integrity: sha512-CUEYvlX1Fk7E9kUMzuswru1J9HLxMwnpDeQGjQuI4ZH+iNCoa2X9T+pvyzrbsgl7WnIeTFTlNlHsRfVdf5g9/g==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-resolver/binding-linux-arm64-gnu@11.24.2':
     resolution: {integrity: sha512-vDT3KHgzYp47gmtNOqL2VNhCyl5Zv643eyxm//A68J8DeUGXrvD1pZFiaT4jSfe+RInfnn1R2yVHye4enx6RnA==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
+  '@oxc-resolver/binding-linux-arm64-musl@11.21.2':
+    resolution: {integrity: sha512-ViN1ZibQyxwC67GpoP33oo+S9UyUnkog13vzQb9+v9bCNvrVzJuk0MRdacjtv/9xfRMVF/eqHFyl8YOeykI10Q==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
   '@oxc-resolver/binding-linux-arm64-musl@11.24.2':
     resolution: {integrity: sha512-+kMlQvbzfyEYtu5FcjE4p+ttBLpKW4d/AsAsuE69BxV6V4twZJeIQZFfD8gh/wqglY0MkPSezWXQH0jBV13MUw==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.2':
+    resolution: {integrity: sha512-CU1sCqWnhGqYD5I1HedHk5pujrn7ssDkNB/AEQd/pd3D/EojVSgJUlpbafwIbyhia3PgIfkvdFpRPWSALzVumA==}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-resolver/binding-linux-ppc64-gnu@11.24.2':
     resolution: {integrity: sha512-shjfMhmZ3gq9fv/w7bi3PnZlgOPG+2QAOFf0BJF0EgBSIGZ6PMLN2zbGEblTUYB/NKVDRyYhE2ff3dJ1QqNPkA==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.2':
+    resolution: {integrity: sha512-jWVyZtIHca4Gb96x7dag+y69vlei7ffjrsveLkmf2ZhqEAz6ZSBnY1GWvgZUaZlwZP62A3xD092BW97Q5VGc+g==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-resolver/binding-linux-riscv64-gnu@11.24.2':
     resolution: {integrity: sha512-zGelwFR5oRo+b69k8Lrzun86DyUHzfKN6cnjbR9l7Z7NIRznOE/2ZvPa1IUKqAL2PzAXOdwkfVqNvO1H2RlpAw==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
+  '@oxc-resolver/binding-linux-riscv64-musl@11.21.2':
+    resolution: {integrity: sha512-LF29obFqNgBUgDX7rmUK7M4D0JQG5LxhYzn3xXmECcHU9aQAdWG7NiY052qybtesEdwHQXKNTWYQ7mTsybNvWg==}
+    cpu: [riscv64]
+    os: [linux]
+    libc: [musl]
+
   '@oxc-resolver/binding-linux-riscv64-musl@11.24.2':
     resolution: {integrity: sha512-qxZ1SWCXJY0eyhAlP6Lmo9F2Nrtx7EkYj9oCgL8apDPCwXwCEDA2U697bbT81JIc2IrVjxO4KX6WU2N+oN9Z4w==}
     cpu: [riscv64]
     os: [linux]
     libc: [musl]
 
+  '@oxc-resolver/binding-linux-s390x-gnu@11.21.2':
+    resolution: {integrity: sha512-+NYcm+cCHBbtdQQ3A4phQTSuVRYnNHz7wrl9XRAPEovcdoqi0mb1K5ZOl+jN54ZD+q1zz3V0vltbFJmzecJKmw==}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-resolver/binding-linux-s390x-gnu@11.24.2':
     resolution: {integrity: sha512-sGCecF3cx2DFlH4t/z7ApnOnXqN48p5p5mlHDEnHTAukQa2P+qMVE4CwyWE9W+q/m3QJ7kKfGrIjax31f44oFQ==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
+  '@oxc-resolver/binding-linux-x64-gnu@11.21.2':
+    resolution: {integrity: sha512-UQqZDdG2r2HhAOsZEgufkIWHPQ886IUyuJQkoZByvzhW8j51R4UNzGBJFkTiTnLhQnggwJRdJgFWK4uY6ZVIMw==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
   '@oxc-resolver/binding-linux-x64-gnu@11.24.2':
     resolution: {integrity: sha512-k/VlMMcSzMlahb3/fENM4rTlsJ0s3fFROA0KXPBmKggqmTSaE383sl8F3KCOXPLmVsYfW6hCitMhXCEtNeZxxg==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
+  '@oxc-resolver/binding-linux-x64-musl@11.21.2':
+    resolution: {integrity: sha512-3Q9PMRjalWkT6NZ4jfujuqTCFwoWErg3y3BnOgb544B8IMw4PktiwWOigMfOHNRLMghZeJ7hpfpZf4CP7rV7Og==}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
   '@oxc-resolver/binding-linux-x64-musl@11.24.2':
     resolution: {integrity: sha512-8hbnZyNi97b/8wapYaIF9+t9GmZKBW2vunaOc3h9HGJptH7b7XpvZqOTBSm/MpTjr7H497BlgOaSfLUdhmy2bw==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
+  '@oxc-resolver/binding-openharmony-arm64@11.21.2':
+    resolution: {integrity: sha512-Eljeq3ndtyKhM+Es8LITi4Zl2htzuRZcrPMF3kMCsrILztvU6AjZ3FuEhHHKobPUB9rMpzLpJP5bDqXI7r+iog==}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@oxc-resolver/binding-openharmony-arm64@11.24.2':
     resolution: {integrity: sha512-MvyGik3a6pVgZ0t/kWlbmFxFLmXQJwgLsY2eYFHLpy0wGwRbfzeIGgDwQ3kXqE30z+kSXennRkCrT7TUvkptNg==}
     cpu: [arm64]
     os: [openharmony]
 
+  '@oxc-resolver/binding-wasm32-wasi@11.21.2':
+    resolution: {integrity: sha512-HGDbNsIywqc4LxU38+CTJNnB/6BF7rheWOJ259b4eE0aEnelYblC8x+1tEd63bp31fYne63RQz9Jb4yVnC7Yig==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
   '@oxc-resolver/binding-wasm32-wasi@11.24.2':
     resolution: {integrity: sha512-vHcssMPwO08RTvj/c0iOBz90attxyG3wQJ0dTcyEQK43LRpcdLWZlV5feBhv6Isn6ahbQIzHbCgfa81+RiML0Q==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@oxc-resolver/binding-win32-arm64-msvc@11.21.2':
+    resolution: {integrity: sha512-iWx25CBEgH49iE9q5coEGI/jb1jl5kkCY9z6U5Og67xCkQ/WFMDc2J5U78+AE91SUxM2NqSLhJC8/PLfWnImww==}
+    cpu: [arm64]
+    os: [win32]
+
   '@oxc-resolver/binding-win32-arm64-msvc@11.24.2':
     resolution: {integrity: sha512-uokJqro2iBqkFvJdKQLP7d8/BUmFwESQFVmIJUQKj1Xn1a/LysJoe1vmeECLF5b3jsV8CAL5sEMJXX6SdK9Nhg==}
     cpu: [arm64]
     os: [win32]
 
+  '@oxc-resolver/binding-win32-x64-msvc@11.21.2':
+    resolution: {integrity: sha512-VPoCAhKvCQTlG7vxqaBXcmuvbh77BfnGXj8g0pbvVXpm1F/R8rDVwqIWcEbMzrI1JvJlm8v7T9uMVQb6UctMRg==}
+    cpu: [x64]
+    os: [win32]
+
   '@oxc-resolver/binding-win32-x64-msvc@11.24.2':
     resolution: {integrity: sha512-UqGPmo56KDfLlfXFAFIrNflHT8tFxWGEivWg3Zeyp4Uy2NlKN1FGPr6/BxcLGG3+kZ6Wp14g5Uj+n71boqZfiw==}
     cpu: [x64]
@@ -7217,6 +7717,9 @@ packages:
     resolution: {integrity: sha512-//0sR/cow/s4ICQaYoAobOl4aU8cjU6x/V24V7XkKotb9+O+3zySIYp146vpaobYHnxa4pZX8NkV54Z5AwbDKA==}
     engines: {node: '>=12'}
 
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
+
   '@portabletext/block-tools@5.2.0':
     resolution: {integrity: sha512-BX4LXt3hDU2wI2kufuMT3CNF88atdZuCSB+YXtjUF9hO/sZJhLG/IfK5pWV4GVoRIql9C6f2IBitxRSImG5NQQ==}
     engines: {node: '>=20.19 <22 || >=22.12'}
@@ -8129,16 +8632,6 @@ packages:
       styled-components:
         optional: true
 
-  '@sanity/themer@0.8.0':
-    resolution: {integrity: sha512-HWDpXLjR6l0pk9e7Fu+f9OW+i3ilHLkwu117Xqs3Q1aSF/Q8AWgP2t4UkFswsxvYOGkycJ1ULl8/nRJE4eP2hg==}
-    engines: {node: '>=20.19 <22 || >=22.12'}
-    peerDependencies:
-      react: ^19.3.0
-      sanity: ^3 || ^4 || ^5 || ^6
-    peerDependenciesMeta:
-      sanity:
-        optional: true
-
   '@sanity/tsconfig@2.2.1':
     resolution: {integrity: sha512-1HbvN+W2bWixgXQnvJ9rev5vJaSbN62d+r0Y2pN6XsK6/MP9JfVyF90elBuIrDENTGgVmxB403+gZow45wq+Pg==}
 
@@ -8198,8 +8691,8 @@ packages:
     resolution: {integrity: sha512-53UCtZ5jnaP9lSir0GAhQd+eXdkVnkG8LxRZ2z8ho3Apthji+tBLJxkUcgvTOxR6DvHHAL0eeowojef1FkaOEg==}
     engines: {node: '>=22.12'}
 
-  '@sanity/vanilla-extract-integration@0.1.19':
-    resolution: {integrity: sha512-rRHGpbd68EjFgevB4BPZHk/P+k65RxIwxaIGLAGspOibtQcku5HjorqJnIZe9RG+5FL4slleWUiZ296Vu1c8tA==}
+  '@sanity/vanilla-extract-integration@0.1.20':
+    resolution: {integrity: sha512-fIrclslCl0luZL0yEjMwo2l5+NMMw60KrQNCwTMkoZNPtUTj1hx8/silD4IclKrvsIOaVuUG80Qv7BT6muysow==}
     engines: {node: '>=20.19 <22 || >=22.12'}
 
   '@sanity/vanilla-extract-rolldown-plugin@0.4.8':
@@ -8217,8 +8710,8 @@ packages:
     peerDependencies:
       tsdown: ^0.22.5
 
-  '@sanity/vanilla-extract-vite-plugin@0.2.19':
-    resolution: {integrity: sha512-KK5oGiC+8yyT7mSJcLXV/58cB+mG1/LUg89VmOMmXBUAzKzYikCuyWHudaCB+2Xach6MVb2qI/+pLjPd0HyF7Q==}
+  '@sanity/vanilla-extract-vite-plugin@0.2.20':
+    resolution: {integrity: sha512-brZcEk/3S9vofEmolcvT9DPeZ+VPoCfT3ksQA1TsJvqBMyBL16kqh7ZgtDhqmByu/LzX2FkyuvsZOSCuZ4W44w==}
     engines: {node: '>=20.19 <22 || >=22.12'}
     peerDependencies:
       vite: ^8.0.0
@@ -8358,6 +8851,112 @@ packages:
   '@standard-schema/utils@0.3.0':
     resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
 
+  '@storybook/addon-a11y@10.6.0':
+    resolution: {integrity: sha512-Z/CZor/F8H74/+IoeLroEQXQoVxvmjVtUgATJ95KPBolHxMaHLXLsYU0wosIiiORxmfRCnpen5pQl1n4+pBWQw==}
+    peerDependencies:
+      storybook: ^10.6.0
+
+  '@storybook/addon-docs@10.6.0':
+    resolution: {integrity: sha512-Fk3rUQWeGyCfL170OkmRp6Ruyv7MHPb/xrKa6YNk7FlGmlVLi5tKzh2T/0J13vWEy8wiu2MV3IBu8iRsaUR+Cw==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@storybook/addon-links@10.6.0':
+    resolution: {integrity: sha512-kbGLPiA0yJ0pb/YM/K8O4N4aI7iQmCOoaOdpjLFJgCA2lVXKVIdZA49DaaNifWWr1dniwAw5eJdyLkVaqJO0Ag==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      react:
+        optional: true
+
+  '@storybook/addon-themes@10.6.0':
+    resolution: {integrity: sha512-PJtRtaCzKCAcouEqkHevMwv0aeQNsYWab4K/qszNGuSyFXxdcPQguKwmbB6Ajd/FxW+Of/mLXjRgpjrGVSgm1g==}
+    peerDependencies:
+      storybook: ^10.6.0
+
+  '@storybook/addon-vitest@10.6.0':
+    resolution: {integrity: sha512-GY2SwSXLNgyMqjQ59J7YTkEQTHdEbBMggOvbbuhuPUBhWo97OGSDCmn1UW3nXDZvkoWyWhF9T9628m1uei7FbA==}
+    peerDependencies:
+      '@vitest/browser': ^3.0.0 || ^4.0.0
+      '@vitest/browser-playwright': ^4.0.0
+      '@vitest/runner': ^3.0.0 || ^4.0.0
+      storybook: ^10.6.0
+      vitest: ^3.0.0 || ^4.0.0
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/runner':
+        optional: true
+      vitest:
+        optional: true
+
+  '@storybook/builder-vite@10.6.0':
+    resolution: {integrity: sha512-7zt8tYB6dnSO8fbjUz91MHexGDpf9HrLlA3FAmlVb+2ZL3eWUs499L3I6BDUymcWu7oW5WCBJlB8ERj8ZLLzig==}
+    peerDependencies:
+      storybook: ^10.6.0
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  '@storybook/global@5.0.0':
+    resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==}
+
+  '@storybook/icons@2.1.0':
+    resolution: {integrity: sha512-Fxh9vYpX9bQqFeHRiY8h2ApeRGDzRSMLwJwNZ/AIRqnyOKHxRKL+yFe+ctEkVJmuptRE9u1Hrn8ZZNHyfDKKNg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@storybook/react-dom-shim@10.6.0':
+    resolution: {integrity: sha512-ZE0l4xL6d00rKFeJhRDuh0t3r+/2ffhx47lIyaSWrTD5kuM3nDjKDxCIWwX4E3gLV+oNX8E1prXRMuEWJUJwJg==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@storybook/react-vite@10.6.0':
+    resolution: {integrity: sha512-nc1dqnmjGOcDJvPCkAn4Hmu1gi7dNHHoibNmlBp0d1adosejELZxuNjHBkPl/KxZjbzP3jljQHnHB/guxd8e2g==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.0
+      typescript: '>= 4.9.x'
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@storybook/react@10.6.0':
+    resolution: {integrity: sha512-0xfYYPRHcr5ta1hmXJCSezH4JGuUHJ+xVF9f1j+Y/MWEMOQE4wnaKWKsk/HLrDjZkT5hKfvmogt9b0yduP6zEQ==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      storybook: ^10.6.0
+      typescript: '>= 4.9.x'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+      typescript:
+        optional: true
+
   '@swc/core-darwin-arm64@1.16.2':
     resolution: {integrity: sha512-i/j0HNbnn79qnTVPicvay92Nark8fW8NQqn1e2mGERjUXNpBV0+SwQxlRpk2zBhn6laJ8PDI6Kn1nHZhnz3LCA==}
     engines: {node: '>=10'}
@@ -8478,6 +9077,10 @@ packages:
     resolution: {integrity: sha512-yzr2S9HyAIdhz2/6qHgbs665Q7PKVcDF05vsOlHPxG1mo36gKVesdYVeDLnXgfjJ03CrKRk08knc6+E/9m8v2Q==}
     engines: {node: '>=18'}
 
+  '@testing-library/jest-dom@6.9.1':
+    resolution: {integrity: sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
   '@testing-library/jest-dom@7.0.1':
     resolution: {integrity: sha512-oMDTC3oA+6CXSO2JZnvOI7CA6oVub6kij5ggk9ohwye5slmkwxYDXcPOVxgMw/RQlticjtO0C1RZkR97HgrWMw==}
     engines: {node: '>=22', npm: '>=6', yarn: '>=1'}
@@ -8579,6 +9182,18 @@ packages:
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
   '@types/caseless@0.12.5':
     resolution: {integrity: sha512-hWtVTC2q7hc7xZ/RLbxapMvDMgUnDvKvMOpKal4DrMyfGBUfB1oKaZlIRr6mJL+If3bAP6sV/QneGzF6tJjZDg==}
 
@@ -8600,6 +9215,12 @@ packages:
   '@types/dlv@1.1.5':
     resolution: {integrity: sha512-JHOWNfiWepAhfwlSw17kiWrWrk6od2dEQgHltJw9AS0JPFoLZJBge5+Dnil2NfdjAvJ/+vGSX60/BRW20PpUXw==}
 
+  '@types/doctrine@0.0.9':
+    resolution: {integrity: sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==}
+
+  '@types/esrecurse@4.3.1':
+    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
+
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
@@ -8645,6 +9266,9 @@ packages:
   '@types/mdurl@2.0.0':
     resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
 
+  '@types/mdx@2.0.14':
+    resolution: {integrity: sha512-T48PeuJtvLosNTPVhfnIp3i/n3a4g4Bad7YCq5k64D4u7NwDrAotikQ+5+sjtUvBmxCMlbo3dVL+C2dP0rWHzg==}
+
   '@types/ms@2.1.0':
     resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==}
 
@@ -8688,6 +9312,9 @@ packages:
   '@types/request@2.48.13':
     resolution: {integrity: sha512-FGJ6udDNUCjd19pp0Q3iTiDkwhYup7J8hpMW9c4k53NrccQFFWKRho6hvtPPEhnXWKvukfwAlB6DbDz4yhH5Gg==}
 
+  '@types/resolve@1.20.6':
+    resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
+
   '@types/retry@0.12.0':
     resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==}
 
@@ -8730,6 +9357,43 @@ packages:
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
+  '@typescript-eslint/project-service@8.70.1':
+    resolution: {integrity: sha512-62xOgboPfwc3/IgPSX/W6oQR3ZbF04194FPGUGH8HL8iLFHbt/456/8Ph1wLNUgVF+s94FlHoipBsz+v7+LMnA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/scope-manager@8.70.1':
+    resolution: {integrity: sha512-Pa0EeSeAusQc1WbjQMac+YfenewYTBu0KjgYvkUKwhXaHUKbFog23Dm/rp0DX/6tyYOQ3Xl1a+3EcFNZynGHCw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.70.1':
+    resolution: {integrity: sha512-jumze1fPI+sDOaM2TWGQdn39PDxTr7TZGeuyLkAbNyx2vtMT3uRnVKChN0hfht5V2TugphJzF6bYXvBcE09qqg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/types@8.70.1':
+    resolution: {integrity: sha512-Dm1ypdhhrGCTyyehxElhgJ6kgk8MVCv5qXdoOVqPr1uqk42jX8KjrZqhROvdShczA8qrDoYiOWn1ykWlx2k81Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.70.1':
+    resolution: {integrity: sha512-TU8PwyGN0PQJUcE96mw8eCQ44SmxGdQlJmlWakHaHQ15eIuuvye5yNtmh/i6oS88jzXVQB71xdNkbkB/fMwL0g==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/utils@8.70.1':
+    resolution: {integrity: sha512-Esgul8MsnKnRLdYU2Eb2cRV9bS5HJYtKj1ByJnOzzG2M58DGdSUQ1jUuILxipqcpB2h9WLrbD5GijIWUjX/Tqw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.1.0'
+
+  '@typescript-eslint/visitor-keys@8.70.1':
+    resolution: {integrity: sha512-Vwj9lUIW5Xq3wQ9w6gv3R86g1hMK8f2zNOdGTAgeXUMMXFK78G9ruCjjqutHMNJc0+CH7LYRnHeUB9IT8wFmcw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@typescript/typescript-aix-ppc64@7.0.2':
     resolution: {integrity: sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ==}
     engines: {node: '>=16.20.0'}
@@ -9144,6 +9808,17 @@ packages:
       oxc-transform-react:
         optional: true
 
+  '@vitest/browser-playwright@4.1.11':
+    resolution: {integrity: sha512-riLBxPqwnJ0lWs2DN2WeUfYeKLoAjbP2Xx8cLQdSddzMi20sksIa6K2mPz79DyMZKKVKH2ksOC2yJvtNcZg8cg==}
+    peerDependencies:
+      playwright: '*'
+      vitest: 4.1.11
+
+  '@vitest/browser@4.1.11':
+    resolution: {integrity: sha512-bwMovvAeuTFOK5kIFevw4VEf+1gVEICv4SYK4k3knJOxl6b1zEWud8mYKD73e1B0odAn174h1MofURy2TPWf3w==}
+    peerDependencies:
+      vitest: 4.1.11
+
   '@vitest/coverage-v8@4.1.11':
     resolution: {integrity: sha512-8MVGEFnJIcdGjcbfKmeq8z0pZHH0JlVtoVZH9Q/qwUp6wyFnEJUBMrw9DCaj+ra3vShGmhavjalMIhPNxZAUcw==}
     peerDependencies:
@@ -9153,6 +9828,9 @@ packages:
       '@vitest/browser':
         optional: true
 
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
+
   '@vitest/expect@4.1.11':
     resolution: {integrity: sha512-VX2x5vNJXET47KAFzwERI+KRMtTTCSWTfSMKsW7JsUsXV4psq++e3DvZpuTDOpHcxytiDs6p2nhVb2tVDiiUYw==}
 
@@ -9167,6 +9845,9 @@ packages:
       vite:
         optional: true
 
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
+
   '@vitest/pretty-format@4.1.11':
     resolution: {integrity: sha512-yiZzPbGTS9Sr/JpFl8zHrcIkAofNbFV6k21vIgQN/cY/oxZeXhJv5sc/MBJ5jFKWmWs+oJHw0UXLZjmf931+Vw==}
 
@@ -9176,9 +9857,15 @@ packages:
   '@vitest/snapshot@4.1.11':
     resolution: {integrity: sha512-pN7ikn1ON7h8ee4gIAp4AzyK+zBtJPzVbqOgu5LCEh4VaJVbPQcgYQYJIMGQPXVeJJq1fnfazis7a5pFNPahog==}
 
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
+
   '@vitest/spy@4.1.11':
     resolution: {integrity: sha512-apNa/prQy2qCeywhnixOHPRCgGNhvg7T4Dapfl1GahLp/R+uhBm5cPyFoNVyqsNd2h1nJxL6BqqdIjiABL60YA==}
 
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+
   '@vitest/utils@4.1.11':
     resolution: {integrity: sha512-zTCVGpyFsGWBhllOyKlTw/vnr6D9qxsfSDyfbyZmTyjHw5N/VuvzHpHoQjm2ZJzn4RJgx5w4r7V0er69CmLgPQ==}
 
@@ -9209,6 +9896,9 @@ packages:
   '@vue/shared@3.5.43':
     resolution: {integrity: sha512-uksS7YGMR5NZyr4JNq0Rp+QyLns0ueaz20KwzIPW9R0LH1Vnt4E+XUM29PNseEbf1www2gOuhuDi5AKOIXag9Q==}
 
+  '@webcontainer/env@1.1.1':
+    resolution: {integrity: sha512-6aN99yL695Hi9SuIk1oC88l9o0gmxL1nGWWQ/kNy81HigJ0FoaoTXpytCj6ItzgyCEwA9kF1wixsTuv5cjsgng==}
+
   '@workflow/serde@4.1.0-beta.2':
     resolution: {integrity: sha512-8kkeoQKLDaKXefjV5dbhBj2aErfKp1Mc4pb6tj8144cF+Em5SPbyMbyLCHp+BVrFfFVCBluCtMx+jjvaFVZGww==}
 
@@ -9291,8 +9981,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@yuku-parser/binding-android-arm64@0.10.2':
-    resolution: {integrity: sha512-2VPBU9fRGRAQ2xPAvghnec3oou5Nrxm2Bezhf+13UMspAxQSkF/32r+ySKXSwIPA5/RivumDJDxAxc301Sgicw==}
+  '@yuku-parser/binding-android-arm64@0.11.0':
+    resolution: {integrity: sha512-jqlfj6xjjhC/T81db1HMuzYrCy/rXqFWM0sHLQ63R93CfyApBVKVB8iK5siIaqw5wTs8sGEFN2mM09GNqM1R1g==}
     cpu: [arm64]
     os: [android]
 
@@ -9301,8 +9991,8 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@yuku-parser/binding-darwin-arm64@0.10.2':
-    resolution: {integrity: sha512-LD+PMZE51tCYTOss5HBkm3/AE39MvcMDBfWJx7A4yDcjfNbAQDnHZKtzSOuqrswx+TQHY0ws5xn6+fWOwtmfBA==}
+  '@yuku-parser/binding-darwin-arm64@0.11.0':
+    resolution: {integrity: sha512-kWwHiaiU7VcdFr0MOI+pWZ4NgRo0gGw1ycE5dvhlr6XLMR0YSL+Ov8MseCwGkzUtOZ8cyFCOeXOwCa7mjMffMQ==}
     cpu: [arm64]
     os: [darwin]
 
@@ -9311,8 +10001,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@yuku-parser/binding-darwin-x64@0.10.2':
-    resolution: {integrity: sha512-mmZ8cND+AoIIMRERyMinlg5ApHxP23B9jH2B5wT7T+dliPa9rubLxneB/SUjFwyUjGaFnB5G7t4YvpfbO5zbkQ==}
+  '@yuku-parser/binding-darwin-x64@0.11.0':
+    resolution: {integrity: sha512-Gy1pHdOWyXRJMbB0auuTTf+lbDOLuxWxqnU9cpf4vOrozfTDplXNrGuNbLgfZZ9UOgKz9iBnEx2YJ5fTbtvtLQ==}
     cpu: [x64]
     os: [darwin]
 
@@ -9321,8 +10011,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@yuku-parser/binding-freebsd-x64@0.10.2':
-    resolution: {integrity: sha512-gVIjaaIddbRfAhHlC8N809wQWml7mxfSVnzaLtzGXObTeFTPAg/YVnQXt1UOhPM1ah5eG/8Y0RUlNpB4GVe7eQ==}
+  '@yuku-parser/binding-freebsd-x64@0.11.0':
+    resolution: {integrity: sha512-QQ9kdjL/5IknqYYVlbBheQB8ibpbtCQH44KHnz0Iu9c+l4Cbml/bwtV8NntyDe7uOaTpjBbCzlYEdZinT5dw6A==}
     cpu: [x64]
     os: [freebsd]
 
@@ -9331,8 +10021,8 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@yuku-parser/binding-linux-arm-gnu@0.10.2':
-    resolution: {integrity: sha512-q/XPPQQAPdlw05aPj30ygBhekmQryGOwxVraBgApjKK8yY1kNQgqq6XCYLF1WHSee+lhxclrTO7W0/bt7dR1GA==}
+  '@yuku-parser/binding-linux-arm-gnu@0.11.0':
+    resolution: {integrity: sha512-F0MNggsSsLIqF1Os4joWikO5VUwmSSHIBUjVDOrJMllQODXfZfyEsLd9rMQbuvqUlXUr1qBMvjaHcJgnF/uaLA==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
@@ -9343,8 +10033,8 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@yuku-parser/binding-linux-arm-musl@0.10.2':
-    resolution: {integrity: sha512-A+Cb0I1hFF4wilTQpWs79k1aNnj4B2tkrHx3zsuUNF9BtVY2zPZ4yeQEM/zjXrS/qJlNMZVK9NrWJjwdpnTrfg==}
+  '@yuku-parser/binding-linux-arm-musl@0.11.0':
+    resolution: {integrity: sha512-2QfhRxHPO5hPkblvJNUMyB0PRw/az4Y0YuvLsbcpQtXqPQXL2kL0x8k1MPWtvrWQQPcezsHen3uIhe/2U82QaQ==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
@@ -9355,8 +10045,8 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@yuku-parser/binding-linux-arm64-gnu@0.10.2':
-    resolution: {integrity: sha512-aGNSzqIqqphFwAdIFwVvKIyXD1Iy3CxrEJVIZAT87Ecyi4vCmmDD2v2l9h+Gd3/wSy3JZlOI792LJbKAjyy9rQ==}
+  '@yuku-parser/binding-linux-arm64-gnu@0.11.0':
+    resolution: {integrity: sha512-6qRv2khbDlIYjWjWjkzxdJTkF4EGQvS+Q5WWwh1azACFUexzCr0gU5Krb/JxvQdTbO6sp9QM3Ybfa7iOD3qthg==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
@@ -9367,8 +10057,8 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@yuku-parser/binding-linux-arm64-musl@0.10.2':
-    resolution: {integrity: sha512-Ddl1sF0rtuCXyHGSOV6dcmdx+ETv1iD+IVFqQuOjzkJZWclxJxdBWX6ZJMRtTiGqGUTbqLEKiTXxpR/Bvqk+2A==}
+  '@yuku-parser/binding-linux-arm64-musl@0.11.0':
+    resolution: {integrity: sha512-3olnRYJgIHPtap+Ruc7wlC5Ex5uA2Y7mBECqDLmeUNv0VCt6LmSd5tem5HuItrwREVfPtTmuuFaStYbuE0/Amw==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
@@ -9379,8 +10069,8 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@yuku-parser/binding-linux-x64-gnu@0.10.2':
-    resolution: {integrity: sha512-/nlcpR6IF5U+0m5L9wvAIXeQa2DT+BXuvqKDsTcOTlcc0B4dHNyqE5hTXsS4hAyimpy2ZK8A1zMNF5hTrjg2cg==}
+  '@yuku-parser/binding-linux-x64-gnu@0.11.0':
+    resolution: {integrity: sha512-xOoQ/wX1CECcBu+u2uVdZ/5jQpDuyfpMST73AsZV/9rFXHMoV4dzpMvFL/LlcOt0ZvI+ec9dou1qHgLpuWE1gw==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
@@ -9391,8 +10081,8 @@ packages:
     os: [linux]
     libc: [glibc]
 
-  '@yuku-parser/binding-linux-x64-musl@0.10.2':
-    resolution: {integrity: sha512-GX80dxTQD/M/OryyuxJcFzFENzry3cDFPvCFTyWogNWQH3fSHfMrNfpwpl1YzMos1eV9NygK5GSDG7VArQlb4w==}
+  '@yuku-parser/binding-linux-x64-musl@0.11.0':
+    resolution: {integrity: sha512-rQfgYpctPVlFsEmEdJsgyV/gX38Pih8Jc+UDd5v2ae+Me0ufUSMsqbZAsFv/pYTqYw3ddF+/0UXoutEYbnnuUg==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
@@ -9403,8 +10093,8 @@ packages:
     os: [linux]
     libc: [musl]
 
-  '@yuku-parser/binding-win32-arm64@0.10.2':
-    resolution: {integrity: sha512-agePQBV4VHewiGU0ACSjscZ/hJd283f9JfAF19Gf1rI5+wy5tTgx4GS36i0b3xim15AQ4RCpDRosEvhLZ4zAOw==}
+  '@yuku-parser/binding-win32-arm64@0.11.0':
+    resolution: {integrity: sha512-kUhOMR/SKASx9vD+BOkduLQC8nO/0jBygIpnLHrqSwhZocCprtKyRUSiU1hjI9QfVKotmES3ViYY2FALrFsCYQ==}
     cpu: [arm64]
     os: [win32]
 
@@ -9413,8 +10103,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@yuku-parser/binding-win32-x64@0.10.2':
-    resolution: {integrity: sha512-s8//CMpgL5+y1lvDCdyh1rwGI5+ytDJywFJRe1vnhI7n0j+caxshNucurikYLLVeQ2SYFex6aPrzgQxkabBQRA==}
+  '@yuku-parser/binding-win32-x64@0.11.0':
+    resolution: {integrity: sha512-+aWJefFA/FBeL/SeC4nYmw3HB2kXWAYHTNY/BXi3N1ex/CVUPJHn3cCYK1T3M31nsO98ENqllNzWfv9arf6X0w==}
     cpu: [x64]
     os: [win32]
 
@@ -9423,8 +10113,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@yuku-toolchain/types@0.10.2':
-    resolution: {integrity: sha512-sSeo4SSSToiS+sSD+bwn/s94EEcaLJ7tG5LCp8gFYC1G5VzxzX7fqB6m9RU1yMD8KTpu6zdU/I1NlQf8hVBJ9Q==}
+  '@yuku-toolchain/types@0.11.0':
+    resolution: {integrity: sha512-AlxUWVHNBTty88DtOSKu77115kjo7i8pWICmiF4CK+6/hEvnOkcOTXVoLtDpko7f5UzVAZsTEm92MV6/KoBmWA==}
 
   '@yuku-toolchain/types@0.8.7':
     resolution: {integrity: sha512-2Z53dNxAJL6UvFoIrDZvYf3zlO8s4VJK4O2hhaB4mXVwwpX/7ajtss3cmfqKvamlNLWyt9FSWs4eoYdlbxpnHA==}
@@ -9457,6 +10147,11 @@ packages:
     peerDependencies:
       acorn: ^8
 
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
   acorn-loose@8.5.2:
     resolution: {integrity: sha512-PPvV6g8UGMGgjrMu+n/f9E/tCSkNQ2Y97eFvuVdJfG11+xdIeDcLyNdC8SHcrHbRqkfwLASdplyR6B6sKM1U4A==}
     engines: {node: '>=0.4.0'}
@@ -9513,6 +10208,9 @@ packages:
       ajv:
         optional: true
 
+  ajv@6.15.0:
+    resolution: {integrity: sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==}
+
   ajv@8.18.0:
     resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
 
@@ -9635,6 +10333,10 @@ packages:
     resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
     engines: {node: '>=4'}
 
+  ast-types@0.16.3:
+    resolution: {integrity: sha512-FvWoWYfSCM6kRxCSH+MGLHIKKGRL6A6AW7Zek2O32REPQRdg131428uRTKMBYAeRd3XXAaHDS60Wpri7CdKDrA==}
+    engines: {node: '>=4'}
+
   ast-v8-to-istanbul@1.0.7:
     resolution: {integrity: sha512-kFL68AG6ajd8fg248zwM9GQrUWEp79gsmjum34OEXjs4yHuUMZfYKwOLW9GMmB4oNvVrj+EAGxsP7ye2UR9UlA==}
 
@@ -9672,6 +10374,10 @@ packages:
   aws4@1.13.2:
     resolution: {integrity: sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==}
 
+  axe-core@4.13.0:
+    resolution: {integrity: sha512-UzGt8zg7Ny8djbYMhxl2zuEevVa7r2gJjYY5Lwr1xM7+XU2nd6CkIWFTVcCIbAP63vSz71NaVyyuSk9lHKcy0A==}
+    engines: {node: '>=4'}
+
   axios@1.20.0:
     resolution: {integrity: sha512-r8aOh8j9cGKpgQAqpzrUHnSIc6a59Y3Xf/cv8sy1DrHCkZHzQGEuoq1tARk6qSyDdtQGSDgpb9kFlruzPvrgwg==}
 
@@ -9887,6 +10593,9 @@ packages:
   cache-manager@7.2.9:
     resolution: {integrity: sha512-d4vceEyYe95gPxEyQchlEOH9vJlkNRW8G6gzFzzMTxJK9PahYMhC9chrEqgZN0HulROjgw3IzmWVNk7Q7ytiGw==}
 
+  cacheable@2.5.0:
+    resolution: {integrity: sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g==}
+
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
     engines: {node: '>= 0.4'}
@@ -9930,6 +10639,10 @@ packages:
     peerDependencies:
       react: '>=17.0.0'
 
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
   chai@6.2.2:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
@@ -9961,6 +10674,10 @@ packages:
   charenc@0.0.2:
     resolution: {integrity: sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==}
 
+  check-error@2.1.3:
+    resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
+    engines: {node: '>= 16'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -10466,10 +11183,17 @@ packages:
     resolution: {integrity: sha512-D/o0k3pCG1aI1cxb/dDiWmtMc4Rh7ZQBybXpfMsw9Rbtqwg8kUA9SpYkWcw0pAUjZSnPm8MluctiS0o68r69jQ==}
     engines: {node: '>= 16'}
 
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deep-extend@0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
 
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
   deep-object-diff@1.1.9:
     resolution: {integrity: sha512-Rn+RuwkmkDwCi2/oXOFS9Gsr5lJZu/yTGpK7wAaAIE75CC+LCGEZHpY6VQJa/RoJcrmaA/docWJZvYohlNkWPA==}
 
@@ -10585,6 +11309,10 @@ packages:
     resolution: {integrity: sha512-yw5D++UCIB6a033PvQaUvSpW2QuKW0+DOId763n0Q4z3brxS7G8oQr8yBQ1nQFkognKrAVrV6I55TLeU9cfXTg==}
     engines: {node: '>=16'}
 
+  doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
@@ -10920,6 +11648,37 @@ packages:
     engines: {node: '>=6.0'}
     hasBin: true
 
+  eslint-plugin-storybook@10.6.0:
+    resolution: {integrity: sha512-HK3yD5Nslv97buJ5JfT1xFkTOoyJgGIENmBoZZI3F8t2UpBzb/dHpKyCh5bQ8AvJWnhoM/WAtDNqyd9nq6xgcg==}
+    peerDependencies:
+      eslint: '>=8'
+
+  eslint-scope@9.1.2:
+    resolution: {integrity: sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@10.11.0:
+    resolution: {integrity: sha512-P7a6UEEqb9G95MYAtqkmsTbVXIYyzIfl6NGOIJk162PaahFxFyeGcrlXYFSiagECg4sEm8IseJdZBKR3rx6MsQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@11.2.0:
+    resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
@@ -10929,6 +11688,14 @@ packages:
     resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
     engines: {node: '>=0.10'}
 
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
   estraverse@5.3.0:
     resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
     engines: {node: '>=4.0'}
@@ -11055,6 +11822,12 @@ packages:
     resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
     engines: {node: '>=8.6.0'}
 
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
   fast-levenshtein@3.0.0:
     resolution: {integrity: sha512-hKKNajm46uNmTlhHSyZkmToAc56uZJwYq7yrciZjqOxnlfQwERDQJmHPUp7m1m9wx8vgOe8IaCKZ5Kv2k1DdCQ==}
 
@@ -11119,6 +11892,9 @@ packages:
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
     engines: {node: '>=18'}
 
+  file-entry-cache@11.1.5:
+    resolution: {integrity: sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==}
+
   file-selector@0.4.0:
     resolution: {integrity: sha512-iACCiXeMYOvZqlF1kTiYINzgepRBymz1wwjiuup9u9nayhb6g4fSwiyJ/6adli+EPwrWtpgQAh2PoS7HukEGEg==}
     engines: {node: '>= 10'}
@@ -11165,9 +11941,19 @@ packages:
     resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
     engines: {node: '>=6'}
 
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flat-cache@6.1.23:
+    resolution: {integrity: sha512-f++BY9pTk+983xK1FLzlLpmM0i0z+jHmx3QESGkURMXujQZz1k5wzwX6hjnQ8goaD0B+sYnDK1yZ6MTyZfUaqA==}
+
   flatbuffers@25.9.23:
     resolution: {integrity: sha512-MI1qs7Lo4Syw0EOzUl0xjs2lsoeqFku44KpngfIduHBYvzm8h2+7K8YMQh1JtVVVrUvhLpNwqVi4DERegUJhPQ==}
 
+  flatted@3.4.4:
+    resolution: {integrity: sha512-5+ybhBZANEJxaH3X5evAFatUxLfEHSr7n6kYJ+1Qd0mUqr4eu9gIf6GDbWHf8RJijHrjjO8G+la14SlL2SeS1Q==}
+
   float-tooltip@1.7.5:
     resolution: {integrity: sha512-/kXzuDnnBqyyWyhDMH7+PfP8J/oXiAavGzcRxASOMRHFuReDtofizLLJsf7nnDLAfEaMW4pVWaXrAjtnglpEkg==}
     engines: {node: '>=12'}
@@ -11392,6 +12178,10 @@ packages:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
   glob@10.5.0:
     resolution: {integrity: sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==}
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
@@ -11571,6 +12361,9 @@ packages:
   hookified@1.15.1:
     resolution: {integrity: sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==}
 
+  hookified@2.2.0:
+    resolution: {integrity: sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==}
+
   hosted-git-info@9.0.3:
     resolution: {integrity: sha512-Hc+ghLoSt6QaYZUv0WBiIvmMDZuZZ7oaDvdH8MbfOO4lOsxdXLEvuC6ePoGs9H1X9oCLyq6+NVN0MKqD+ydxyg==}
     engines: {node: ^20.17.0 || >=22.9.0}
@@ -11701,6 +12494,10 @@ packages:
     resolution: {integrity: sha512-vXoV9PjKHEednCUu01e98TkImxy67e3BJXbTIOmIq4Hyzw3IAwYRcuPkfeTzJzwyyts4kjuA73x+pWJLc4f86A==}
     engines: {node: ^22.18.0 || >=24.0.0}
 
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
   indent-string@4.0.0:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
     engines: {node: '>=8'}
@@ -12088,6 +12885,9 @@ packages:
     resolution: {integrity: sha512-+DWg8jCJG2TEnpy7kOm/7/AxaYoaRbjVB4LFZLySZlWn8exGs3A4OLJR966cVvU26N7X9TWxl+Jsw7dzAqKT6g==}
     engines: {node: '>=16'}
 
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
   json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
 
@@ -12097,6 +12897,9 @@ packages:
   json-schema@0.4.0:
     resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
 
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
   json-stable-stringify@1.3.0:
     resolution: {integrity: sha512-qtYiSSFlwot9XHtF9bD9c7rwKjr+RecWT//ZnPvSmEjpV5mmPOCN4j8UjY5hbjNkOwZ/jQv3J6R1/pL7RwgMsg==}
     engines: {node: '>= 0.4'}
@@ -12220,6 +13023,10 @@ packages:
     resolution: {integrity: sha512-KZ9W9nWDT7rF7Dazg8xyLHGLrmpgq2nVNFUckhqdW3szVP6YhCpp/RAnpmVExA9JvrMynjwSLVrEj3AepHR6ew==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
   lexorank@1.0.5:
     resolution: {integrity: sha512-K1B/Yr/gIU0wm68hk/yB0p/mv6xM3ShD5aci42vOwcjof8slG8Kpo3Q7+1WTv7DaRHKWRgLPqrFDt+4GtuFAtA==}
 
@@ -12328,6 +13135,10 @@ packages:
     resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
     engines: {node: '>=6'}
 
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
   lodash-es@4.18.1:
     resolution: {integrity: sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==}
 
@@ -12377,6 +13188,9 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
@@ -12409,6 +13223,9 @@ packages:
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
+  magic-string@1.4.2:
+    resolution: {integrity: sha512-vG+rjFRj1PqdIBozIxAGMjPlOhaVe+GXpbttY/iSK7rGcJRMlwNJO7dcUwmUqkymsFLJiNGI06t4D7Fr7yRC9g==}
+
   magicast@0.5.5:
     resolution: {integrity: sha512-UicdXN8zQ3JHlxVq+28afMXPr1z7WNY6+7EJnzTdQWkTAlMLF5fNCCKxJHBQwGaNGR11581EiQmQzx73+MvszA==}
 
@@ -12748,6 +13565,9 @@ packages:
   napi-build-utils@2.0.0:
     resolution: {integrity: sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==}
 
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
   natural@8.1.1:
     resolution: {integrity: sha512-Ucb+lsUcGxUqu3rn8cwHjT6gJQosO63nIX/aBQXB3+IDkNbFV7PuviysO+Rzz3aKn7PZhPj3bNF4PS9gDVjYCQ==}
     engines: {node: '>=0.4.10'}
@@ -13004,6 +13824,10 @@ packages:
     resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==}
     hasBin: true
 
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
   ora@9.4.1:
     resolution: {integrity: sha512-6VlU9MLXbjVQD04AZCMX28hVtA5bUoadvUqO76MUCVA0ilwJbMiHsITRPfyVm6p/BC0Av/BXMujx39WCe1LEqw==}
     engines: {node: '>=20'}
@@ -13027,6 +13851,10 @@ packages:
     resolution: {integrity: sha512-ek9o58+SCv6AV7nchiAcUJy1DNE2CC5WRdBcO0mF+W4oRjNQfPO7b3pLjTHSFECpHkKGOZSQxx3hk8viIL5YCg==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
+  oxc-parser@0.127.0:
+    resolution: {integrity: sha512-bkgD4qHlN7WxLdX8bLXdaU54TtQtAIg/ZBAfm0aje/mo3MRDo3P0hZSgr4U7O3xfX+fQmR5AP04JS/TGcZLcFA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
   oxc-parser@0.129.0:
     resolution: {integrity: sha512-S6eFI+VLkpyA+/Lf8z6qURjDV6Mgo74SLNznNopHTlQW3hedv2MB/z31kBRuBCCTqZN9HHdva0ojljEhPnBKFA==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -13035,6 +13863,9 @@ packages:
     resolution: {integrity: sha512-zwajKw1GUa57IOdafIS7/yOObGF2NihwIfZfs5yJTRprMSkiwhWOc/k+n8bwnUPbHr2/XsjfBO8KyTPaW3VpWg==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
+  oxc-resolver@11.21.2:
+    resolution: {integrity: sha512-w5tLwYN3Zo24w5EeWJjJWZOwhYqTtC8PS2B1tIt7BZUuqTIcU07sQValbDw+rq7+AuAGzOHklgK+ifsy4lpXfw==}
+
   oxc-resolver@11.24.2:
     resolution: {integrity: sha512-FY91FiDBj7ls5MsFS9jN3tjz2o0/zsdSsymlakySaBwVJZorHhkWyICLZMKxlu1R9vYo+sd3z1jwb4J8x7bNDw==}
 
@@ -13096,6 +13927,10 @@ packages:
     resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
     engines: {node: '>=6'}
 
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
   p-map@7.0.8:
     resolution: {integrity: sha512-MitaVsCuCFIvOLLPIU7NnfrZvS9H9h7kwMUkDo+T2pEISaJD48IV9S8iIdXB7PsvvdxyYcsSTTrr90XKsbulNw==}
     engines: {node: '>=18'}
@@ -13193,6 +14028,10 @@ packages:
     resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
     engines: {node: '>=4'}
 
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
   path-expression-matcher@1.6.2:
     resolution: {integrity: sha512-enSlaiat05iasnzmgNxRj8reFdj3puY2QpNgP1aPIaVfT6nn9ICuPoFlKHk8EN22HcwewshO+mN2DGbkCEOtqQ==}
     engines: {node: '>=14.0.0'}
@@ -13243,6 +14082,10 @@ packages:
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
   pdf-parse@2.4.5:
     resolution: {integrity: sha512-mHU89HGh7v+4u2ubfnevJ03lmPgQ5WU4CxAVmTSh/sxVTEDYd1er/dKS/A6vg77NX47KTEoihq8jZBLr8Cxuwg==}
     engines: {node: '>=20.16.0 <21 || >=22.3.0'}
@@ -13378,6 +14221,10 @@ packages:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
     engines: {node: '>=4'}
 
+  pngjs@7.0.0:
+    resolution: {integrity: sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow==}
+    engines: {node: '>=14.19.0'}
+
   polished@4.3.1:
     resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==}
     engines: {node: '>=10'}
@@ -13428,6 +14275,10 @@ packages:
     deprecated: No longer maintained. Please contact the author of the relevant native addon; alternatives are available.
     hasBin: true
 
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
   prettier@3.9.9:
     resolution: {integrity: sha512-Z/CJHIkdujO/OtN7nXUii0Rf3VT5SRuhjBA82Xvu2XhBUgX3nhP67T0LHceBdQLex7OOFGTox+Q5Yg8Jk2Qivg==}
     engines: {node: '>=14'}
@@ -13599,6 +14450,10 @@ packages:
     resolution: {integrity: sha512-RUOOOjHLhgR1MIQrCtnEqz/HJ1RMZBIN+REnpSUrfft2bXqXy69fwJASVziWExfFXsR1bCY0TznnHooNsCo0/w==}
     engines: {node: '>=0.10'}
 
+  qified@0.10.1:
+    resolution: {integrity: sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==}
+    engines: {node: '>=20'}
+
   qs@6.16.0:
     resolution: {integrity: sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==}
     engines: {node: '>=0.6'}
@@ -13676,6 +14531,15 @@ packages:
       '@types/react':
         optional: true
 
+  react-docgen-typescript@2.4.0:
+    resolution: {integrity: sha512-ZtAp5XTO5HRzQctjPU0ybY0RRCQO19X/8fxn3w7y2VVTUbGHDKULPTL4ky3vB05euSgG5NpALhEhDPvQ56wvXg==}
+    peerDependencies:
+      typescript: '>= 4.3.x'
+
+  react-docgen@8.0.4:
+    resolution: {integrity: sha512-gIYjtVTU4NCWZnb/LXVSWfClZXnjzX3+xxi69Tkfu4YsmYuqiOk8giLkKt/WwxWqh+U66CTh8Kqbha1uPv8/qQ==}
+    engines: {node: ^20.9.0 || >=22}
+
   react-dom@19.3.0:
     resolution: {integrity: sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==}
     peerDependencies:
@@ -13891,6 +14755,10 @@ packages:
     resolution: {integrity: sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==}
     engines: {node: '>= 20.19.0'}
 
+  recast@0.23.21:
+    resolution: {integrity: sha512-mFAyJq9vUbSTARLZUvAEf1z3YxlvAwswbmxMx2mPA/MSm4KmpwvwvhsH/NIrZhyOuwD60Lzyw2qh83uCbgTPYw==}
+    engines: {node: '>= 4'}
+
   redent@3.0.0:
     resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
     engines: {node: '>=8'}
@@ -14291,6 +15159,10 @@ packages:
   simple-wcswidth@1.1.2:
     resolution: {integrity: sha512-j7piyCjAeTDSjzTSQ7DokZtMNwNlEAyxqSZeCS+CXH7fJ4jx3FuJ/mTW3mE+6JLs4VJBbcll0Kjn+KXI5t21Iw==}
 
+  sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
+
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
@@ -14436,6 +15308,21 @@ packages:
     resolution: {integrity: sha512-I6GPS/E0zyieHehMRPQcqkiBMJKGgLta+1hREixhoLPqEA0AlVFiC43dl8uPpmkkeRdDMzYRWFWk5/l9x7nmNg==}
     engines: {node: '>=0.10.0'}
 
+  storybook@10.6.0:
+    resolution: {integrity: sha512-H48X6AURAFTpfN2zEux6vNesee5Oq8Gxj1IanYmblPZ218sfKSeyyerF1NC7GD7BrruoC8L4/cU0zII4y+d6zw==}
+    hasBin: true
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      prettier: ^2 || ^3
+      vite-plus: ^0.1.15 || ^0.2.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      prettier:
+        optional: true
+      vite-plus:
+        optional: true
+
   stream-events@1.0.5:
     resolution: {integrity: sha512-E1GUzBSgvct8Jsb3v2X15pjzN1tYebtbLaMg+eBOUOAxgbLoSbT2NS91ckc5lJD1KfLjId+jXJRgo0qnV5Nerg==}
 
@@ -14506,6 +15393,10 @@ packages:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
 
+  strip-indent@4.1.1:
+    resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
+    engines: {node: '>=12'}
+
   strip-json-comments@2.0.1:
     resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
     engines: {node: '>=0.10.0'}
@@ -14698,10 +15589,18 @@ packages:
     resolution: {integrity: sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw==}
     engines: {node: ^20.0.0 || >=22.0.0}
 
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
   tinyrainbow@3.1.1:
     resolution: {integrity: sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==}
     engines: {node: '>=14.0.0'}
 
+  tinyspy@4.0.6:
+    resolution: {integrity: sha512-u8KszXvGfU68hVcZpRHKG28T0krMuv2G5nDhiHaMLen/gIuFEgIJhaJuO69qjnXg5paSrbPMFfx3brNuN8eVSg==}
+    engines: {node: '>=14.0.0'}
+
   tldts-core@7.4.16:
     resolution: {integrity: sha512-MDolfaSJtlSK5Y0A1xl3277ekubZwobpBjugknDizI9O5Rm60a1m8k4ICK+MRsCDzPygT81mp3BBf5RKDlFRfA==}
 
@@ -14731,6 +15630,10 @@ packages:
   toposort@2.0.2:
     resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==}
 
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
   touch@3.1.1:
     resolution: {integrity: sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==}
     hasBin: true
@@ -14769,9 +15672,19 @@ packages:
   ts-algebra@2.0.0:
     resolution: {integrity: sha512-FPAhNPFMrkwz76P7cdjdmiShwMynZYN6SgOujD1urY4oNm80Ou9oMdmbR45LotcKOXoy7wSmHkRFE6Mxbrhefw==}
 
+  ts-api-utils@2.5.0:
+    resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
   ts-brand@0.2.0:
     resolution: {integrity: sha512-H5uo7OqMvd91D2EefFmltBP9oeNInNzWLAZUSt6coGDn8b814Eis6SnEtzyXORr9ccEb38PfzyiRVDacdkycSQ==}
 
+  ts-dedent@2.3.0:
+    resolution: {integrity: sha512-JfJeIHke7y2egdGGgRAvpCwYFUsHlM2gPcrVOxFkznt/4uzQ7HFmvE63iFHVLBJNDuyDOQgijDK/tXH/f6Msjg==}
+    engines: {node: '>=6.10'}
+
   ts-morph@12.0.0:
     resolution: {integrity: sha512-VHC8XgU2fFW7yO1f/b3mxKDje1vmyzFXHWzOYmKEkCEwcLjDtbdLgBQviqj4ZwP4MJkQtRo6Ha2I29lq/B+VxA==}
 
@@ -14834,6 +15747,10 @@ packages:
     resolution: {integrity: sha512-Yl9+ukxH+UmPtKidpDkjn82tvPoEvFNb9UACd9vUomN1Ft0cwl3rx0P8yC1D93W9EOsWRMjllvIDG8y25sFOog==}
     hasBin: true
 
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
   type-fest@0.13.1:
     resolution: {integrity: sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==}
     engines: {node: '>=10'}
@@ -14983,6 +15900,10 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
   unzipper@0.12.5:
     resolution: {integrity: sha512-tXYOi9R57Uj/2Z25SOs5RRSzq886MBQj2gY8dPL+xl/kv6s6SvByoKfAtvfVeEuhntWDgjd2o9p2lb4TVPAz0A==}
 
@@ -15310,6 +16231,9 @@ packages:
     resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
     engines: {node: '>=20'}
 
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
   whatwg-mimetype@5.0.0:
     resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
     engines: {node: '>=20'}
@@ -15365,6 +16289,10 @@ packages:
     resolution: {integrity: sha512-LZNJgPzfKR+/J3cHkxcpHKpKKvGfDZVPS4hfJCc4cCG0CgYzvlD6yE/S3CIL/Yt91ak327YCpiF/0MyeZHEHKA==}
     engines: {node: '>= 12.0.0'}
 
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
   wordnet-db@3.1.14:
     resolution: {integrity: sha512-zVyFsvE+mq9MCmwXUWHIcpfbrHHClZWZiVOzKSxNJruIcFn2RbY55zkhiAMMxM8zCVSmtNiViq8FsAZSFpMYag==}
     engines: {node: '>=0.6.0'}
@@ -15549,17 +16477,14 @@ packages:
   yoga-layout@3.2.1:
     resolution: {integrity: sha512-0LPOt3AxKqMdFBZA3HBAt/t/8vIKq7VaQYbuA8WxCgung+p9TVyKRYdpvCb80HcdTN2NkbIKbhNwKUfm3tQywQ==}
 
-  yuku-ast@0.10.2:
-    resolution: {integrity: sha512-UnG9mA6giglCvSErft2/40TVFX750Sj1xgwddPLpG7J7rlr/P1wPADg9G2RK+d/1tNLtRVoLdMMOMVBB9561TQ==}
-
   yuku-ast@0.8.7:
     resolution: {integrity: sha512-h6+4bDfyootiMB9vckk5uKo5r5j0GHrkr17FQTDNfEsFT3DWlN9uu1HJwQwc64pgmLCI945fWM3lbTIqxjT3GQ==}
 
   yuku-codegen@0.8.7:
     resolution: {integrity: sha512-adwDZSh8oVDzhE6Du9PwVWxcOxeV0e2EVhUuMKWfhSY4wkrDq9eqixlxFF3l/XGUV1E7UFzhpz9393MUumkyNw==}
 
-  yuku-parser@0.10.2:
-    resolution: {integrity: sha512-CgaU0/PPjCAIEZ3WQroosOxTY3eeKldAN3h+vk8pMNz4+jl1CZzBR4pW+K/rRPF112VooCL5FdjJoiMNjDrL2A==}
+  yuku-parser@0.11.0:
+    resolution: {integrity: sha512-CIhp3qvcfItVvcNotOEDxtP38Il3LDUbMepZQSfFW1ethwcj/2FuuSeWSc3MmVJP0lUKJySS+5nGKxdxE+aaIg==}
 
   yuku-parser@0.8.7:
     resolution: {integrity: sha512-vRD9nwt4L3aYpxNqeSC4WqLv58xrXef0Ong1Mc45CTXTIpvLafx7JO05sczmQZwdLEZvywrLOGdNC5+Rp5N1BQ==}
@@ -17938,6 +18863,8 @@ snapshots:
 
   '@bcoe/v8-coverage@1.0.2': {}
 
+  '@blazediff/core@1.9.1': {}
+
   '@borewit/text-codec@0.2.2':
     optional: true
 
@@ -17966,6 +18893,13 @@ snapshots:
 
   '@bytecodealliance/preview2-shim@0.17.6': {}
 
+  '@cacheable/memory@2.2.0':
+    dependencies:
+      '@cacheable/utils': 2.5.0
+      '@keyv/bigmap': 1.3.1(keyv@5.6.0)
+      hookified: 1.15.1
+      keyv: 5.6.0
+
   '@cacheable/utils@2.5.0':
     dependencies:
       hashery: 1.5.1
@@ -18368,17 +19302,34 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/core@1.11.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.2
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/core@1.11.2':
     dependencies:
       '@emnapi/wasi-threads': 1.2.2
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/core@1.9.2':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/runtime@1.10.0':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/runtime@1.11.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/runtime@1.11.2':
     dependencies:
       tslib: 2.8.1
@@ -18389,6 +19340,11 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/runtime@1.9.2':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
@@ -18623,6 +19579,36 @@ snapshots:
   '@esbuild/win32-x64@0.28.2':
     optional: true
 
+  '@eslint-community/eslint-utils@4.10.1(eslint@10.11.0)':
+    dependencies:
+      eslint: 10.11.0(jiti@2.7.0)(supports-color@10.2.2)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.23.5(supports-color@10.2.2)':
+    dependencies:
+      '@eslint/object-schema': 3.0.5
+      debug: 4.4.3(supports-color@10.2.2)
+      minimatch: 10.2.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.7.0':
+    dependencies:
+      '@eslint/core': 1.2.1
+
+  '@eslint/core@1.2.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/object-schema@3.0.5': {}
+
+  '@eslint/plugin-kit@0.7.3':
+    dependencies:
+      '@eslint/core': 1.2.1
+      levn: 0.4.1
+
   '@exodus/bytes@1.16.0(@noble/hashes@2.4.0)':
     optionalDependencies:
       '@noble/hashes': 2.4.0
@@ -18787,6 +19773,22 @@ snapshots:
       sharp: 0.34.5
     optional: true
 
+  '@humanfs/core@0.19.2':
+    dependencies:
+      '@humanfs/types': 0.15.0
+
+  '@humanfs/node@0.16.8':
+    dependencies:
+      '@humanfs/core': 0.19.2
+      '@humanfs/types': 0.15.0
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanfs/types@0.15.0': {}
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
   '@ibm-cloud/watsonx-ai@1.7.16(supports-color@10.2.2)':
     dependencies:
       form-data: 4.0.6
@@ -19181,6 +20183,14 @@ snapshots:
 
   '@isaacs/ttlcache@2.1.5': {}
 
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.7.0(typescript@7.0.2)(vite@8.3.1)':
+    dependencies:
+      glob: 13.0.6
+      react-docgen-typescript: 2.4.0(typescript@7.0.2)
+      vite: 8.3.1(@types/node@24.19.0)(@vitejs/devtools@0.4.12)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(yaml@2.9.1)
+    optionalDependencies:
+      typescript: 7.0.2
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.6.0
@@ -19204,6 +20214,12 @@ snapshots:
     dependencies:
       zod: 4.6.5
 
+  '@keyv/bigmap@1.3.1(keyv@5.6.0)':
+    dependencies:
+      hashery: 1.5.1
+      hookified: 1.15.1
+      keyv: 5.6.0
+
   '@keyv/serialize@1.1.1': {}
 
   '@kwsites/file-exists@1.1.1(supports-color@10.2.2)':
@@ -19308,6 +20324,12 @@ snapshots:
     optionalDependencies:
       markdown-it: 14.3.2
 
+  '@mdx-js/react@3.1.1(@types/react@19.3.0)(react@19.3.0)':
+    dependencies:
+      '@types/mdx': 2.0.14
+      '@types/react': 19.3.0
+      react: 19.3.0
+
   '@microsoft/api-extractor-model@7.33.13(@types/node@24.19.0)':
     dependencies:
       '@microsoft/tsdoc': 0.17.0
@@ -19581,6 +20603,13 @@ snapshots:
       '@tybys/wasm-util': 0.10.4
     optional: true
 
+  '@napi-rs/wasm-runtime@1.2.4(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)':
+    dependencies:
+      '@emnapi/core': 1.11.0
+      '@emnapi/runtime': 1.11.0
+      '@tybys/wasm-util': 0.10.4
+    optional: true
+
   '@napi-rs/wasm-runtime@1.2.4(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)':
     dependencies:
       '@emnapi/core': 1.11.2
@@ -19595,6 +20624,13 @@ snapshots:
       '@tybys/wasm-util': 0.10.4
     optional: true
 
+  '@napi-rs/wasm-runtime@1.2.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@tybys/wasm-util': 0.10.4
+    optional: true
+
   '@noble/ed25519@3.2.0': {}
 
   '@noble/hashes@2.4.0': {}
@@ -19867,6 +20903,9 @@ snapshots:
   '@oxc-parser/binding-android-arm-eabi@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-android-arm-eabi@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-android-arm-eabi@0.129.0':
     optional: true
 
@@ -19876,6 +20915,9 @@ snapshots:
   '@oxc-parser/binding-android-arm64@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-android-arm64@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-android-arm64@0.129.0':
     optional: true
 
@@ -19885,6 +20927,9 @@ snapshots:
   '@oxc-parser/binding-darwin-arm64@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-darwin-arm64@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-darwin-arm64@0.129.0':
     optional: true
 
@@ -19894,6 +20939,9 @@ snapshots:
   '@oxc-parser/binding-darwin-x64@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-darwin-x64@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-darwin-x64@0.129.0':
     optional: true
 
@@ -19903,6 +20951,9 @@ snapshots:
   '@oxc-parser/binding-freebsd-x64@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-freebsd-x64@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-freebsd-x64@0.129.0':
     optional: true
 
@@ -19912,6 +20963,9 @@ snapshots:
   '@oxc-parser/binding-linux-arm-gnueabihf@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.129.0':
     optional: true
 
@@ -19921,6 +20975,9 @@ snapshots:
   '@oxc-parser/binding-linux-arm-musleabihf@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm-musleabihf@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm-musleabihf@0.129.0':
     optional: true
 
@@ -19930,6 +20987,9 @@ snapshots:
   '@oxc-parser/binding-linux-arm64-gnu@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-gnu@0.129.0':
     optional: true
 
@@ -19939,6 +20999,9 @@ snapshots:
   '@oxc-parser/binding-linux-arm64-musl@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-musl@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-musl@0.129.0':
     optional: true
 
@@ -19948,6 +21011,9 @@ snapshots:
   '@oxc-parser/binding-linux-ppc64-gnu@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-linux-ppc64-gnu@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-ppc64-gnu@0.129.0':
     optional: true
 
@@ -19957,6 +21023,9 @@ snapshots:
   '@oxc-parser/binding-linux-riscv64-gnu@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-linux-riscv64-gnu@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-riscv64-gnu@0.129.0':
     optional: true
 
@@ -19966,6 +21035,9 @@ snapshots:
   '@oxc-parser/binding-linux-riscv64-musl@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-linux-riscv64-musl@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-riscv64-musl@0.129.0':
     optional: true
 
@@ -19975,6 +21047,9 @@ snapshots:
   '@oxc-parser/binding-linux-s390x-gnu@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-linux-s390x-gnu@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-s390x-gnu@0.129.0':
     optional: true
 
@@ -19984,6 +21059,9 @@ snapshots:
   '@oxc-parser/binding-linux-x64-gnu@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-gnu@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-gnu@0.129.0':
     optional: true
 
@@ -19993,6 +21071,9 @@ snapshots:
   '@oxc-parser/binding-linux-x64-musl@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-musl@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-musl@0.129.0':
     optional: true
 
@@ -20002,6 +21083,9 @@ snapshots:
   '@oxc-parser/binding-openharmony-arm64@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-openharmony-arm64@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-openharmony-arm64@0.129.0':
     optional: true
 
@@ -20016,6 +21100,13 @@ snapshots:
       - '@emnapi/runtime'
     optional: true
 
+  '@oxc-parser/binding-wasm32-wasi@0.127.0':
+    dependencies:
+      '@emnapi/core': 1.9.2
+      '@emnapi/runtime': 1.9.2
+      '@napi-rs/wasm-runtime': 1.2.4(@emnapi/core@1.9.2)(@emnapi/runtime@1.9.2)
+    optional: true
+
   '@oxc-parser/binding-wasm32-wasi@0.129.0':
     dependencies:
       '@emnapi/core': 1.10.0
@@ -20026,6 +21117,9 @@ snapshots:
   '@oxc-parser/binding-win32-arm64-msvc@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-win32-arm64-msvc@0.129.0':
     optional: true
 
@@ -20035,6 +21129,9 @@ snapshots:
   '@oxc-parser/binding-win32-ia32-msvc@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-win32-ia32-msvc@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-win32-ia32-msvc@0.129.0':
     optional: true
 
@@ -20044,6 +21141,9 @@ snapshots:
   '@oxc-parser/binding-win32-x64-msvc@0.121.0':
     optional: true
 
+  '@oxc-parser/binding-win32-x64-msvc@0.127.0':
+    optional: true
+
   '@oxc-parser/binding-win32-x64-msvc@0.129.0':
     optional: true
 
@@ -20054,60 +21154,117 @@ snapshots:
 
   '@oxc-project/types@0.121.0': {}
 
+  '@oxc-project/types@0.127.0': {}
+
   '@oxc-project/types@0.129.0': {}
 
   '@oxc-project/types@0.150.0': {}
 
   '@oxc-project/types@0.151.0': {}
 
+  '@oxc-resolver/binding-android-arm-eabi@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-android-arm-eabi@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-android-arm64@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-android-arm64@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-darwin-arm64@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-darwin-arm64@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-darwin-x64@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-darwin-x64@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-freebsd-x64@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-freebsd-x64@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-linux-arm-gnueabihf@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-linux-arm-musleabihf@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-linux-arm64-gnu@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-linux-arm64-gnu@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-linux-arm64-musl@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-linux-arm64-musl@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-linux-ppc64-gnu@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-linux-riscv64-gnu@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-linux-riscv64-musl@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-linux-riscv64-musl@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-linux-s390x-gnu@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-linux-s390x-gnu@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-linux-x64-gnu@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-linux-x64-gnu@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-linux-x64-musl@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-linux-x64-musl@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-openharmony-arm64@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-openharmony-arm64@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-wasm32-wasi@11.21.2':
+    dependencies:
+      '@emnapi/core': 1.11.0
+      '@emnapi/runtime': 1.11.0
+      '@napi-rs/wasm-runtime': 1.2.4(@emnapi/core@1.11.0)(@emnapi/runtime@1.11.0)
+    optional: true
+
   '@oxc-resolver/binding-wasm32-wasi@11.24.2':
     dependencies:
       '@emnapi/core': 1.11.2
@@ -20115,9 +21272,15 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.2.4(@emnapi/core@1.11.2)(@emnapi/runtime@1.11.2)
     optional: true
 
+  '@oxc-resolver/binding-win32-arm64-msvc@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-win32-arm64-msvc@11.24.2':
     optional: true
 
+  '@oxc-resolver/binding-win32-x64-msvc@11.21.2':
+    optional: true
+
   '@oxc-resolver/binding-win32-x64-msvc@11.24.2':
     optional: true
 
@@ -20408,6 +21571,8 @@ snapshots:
       '@pnpm/network.ca-file': 1.0.2
       config-chain: 1.1.13
 
+  '@polka/url@1.0.0-next.29': {}
+
   '@portabletext/block-tools@5.2.0(@types/react@19.3.0)(vitest@4.1.11)':
     dependencies:
       '@portabletext/html': 1.2.0
@@ -22022,27 +23187,6 @@ snapshots:
     transitivePeerDependencies:
       - react-dom
 
-  '@sanity/themer@0.8.0(@types/react@19.3.0)(react-dom@19.3.0)(react@19.3.0)(sanity@6.17.0-next.108)(styled-components@6.5.3)':
-    dependencies:
-      '@sanity/color': 3.0.8
-      '@sanity/icons': 5.2.2(react@19.3.0)
-      '@sanity/themer-legacy': 0.2.1(react-dom@19.3.0)(react@19.3.0)(sanity@6.17.0-next.108)(styled-components@6.5.3)
-      '@sanity/ui': 4.2.7(react-dom@19.3.0)(react@19.3.0)(styled-components@6.5.3)
-      '@vanilla-extract/dynamic': 2.1.5
-      '@xstate/react': 6.1.0(@types/react@19.3.0)(react@19.3.0)(xstate@5.33.2)
-      motion: 13.4.4(react-dom@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-refractor: 4.0.0(react@19.3.0)
-      refractor: 5.0.0
-      scroll-into-view-if-needed: 3.1.0
-      xstate: 5.33.2
-    optionalDependencies:
-      sanity: 6.17.0-next.108(@babel/core@7.29.7)(@babel/runtime@7.29.7)(@noble/hashes@2.4.0)(@rolldown/plugin-babel@0.2.4)(@types/node@24.19.0)(@types/react-dom@19.3.0)(@types/react@19.3.0)(@vitejs/devtools@0.4.12)(esbuild@0.28.2)(immer@11.1.18)(jiti@2.7.0)(oxc-transform-react@0.147.0)(oxfmt@0.63.0)(react-dom@19.3.0)(react@19.3.0)(rolldown@1.2.11)(styled-components@6.5.3)(supports-color@10.2.2)(tsx@4.23.15)(typescript@7.0.2)(vitest@4.1.11)
-    transitivePeerDependencies:
-      - '@types/react'
-      - react-dom
-      - styled-components
-
   '@sanity/tsconfig@2.2.1': {}
 
   '@sanity/tsdown-config@0.27.1(@babel/core@7.29.7)(@rolldown/plugin-babel@0.2.4)(@types/node@24.19.0)(babel-plugin-macros@3.1.0)(oxc-transform-react@0.147.0)(tsdown@0.22.14)(typescript@7.0.2)(vite@8.3.1)':
@@ -22163,18 +23307,18 @@ snapshots:
       - typescript
       - vitest
 
-  '@sanity/vanilla-extract-integration@0.1.19(babel-plugin-macros@3.1.0)':
+  '@sanity/vanilla-extract-integration@0.1.20(babel-plugin-macros@3.1.0)':
     dependencies:
       '@vanilla-extract/css': 1.21.2(babel-plugin-macros@3.1.0)
       javascript-stringify: 2.1.0
       rolldown: 1.2.11
-      yuku-parser: 0.10.2
+      yuku-parser: 0.11.0
     transitivePeerDependencies:
       - babel-plugin-macros
 
   '@sanity/vanilla-extract-rolldown-plugin@0.4.8(babel-plugin-macros@3.1.0)(rolldown@1.2.11)':
     dependencies:
-      '@sanity/vanilla-extract-integration': 0.1.19(babel-plugin-macros@3.1.0)
+      '@sanity/vanilla-extract-integration': 0.1.20(babel-plugin-macros@3.1.0)
       lightningcss: 1.33.0
     optionalDependencies:
       rolldown: 1.2.11
@@ -22189,9 +23333,9 @@ snapshots:
       - babel-plugin-macros
       - rolldown
 
-  '@sanity/vanilla-extract-vite-plugin@0.2.19(babel-plugin-macros@3.1.0)(vite@8.3.1)':
+  '@sanity/vanilla-extract-vite-plugin@0.2.20(babel-plugin-macros@3.1.0)(vite@8.3.1)':
     dependencies:
-      '@sanity/vanilla-extract-integration': 0.1.19(babel-plugin-macros@3.1.0)
+      '@sanity/vanilla-extract-integration': 0.1.20(babel-plugin-macros@3.1.0)
       '@vanilla-extract/css': 1.21.2(babel-plugin-macros@3.1.0)
       vite: 8.3.1(@types/node@24.19.0)(@vitejs/devtools@0.4.12)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(yaml@2.9.1)
     transitivePeerDependencies:
@@ -22467,7 +23611,114 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
-  '@standard-schema/utils@0.3.0': {}
+  '@standard-schema/utils@0.3.0': {}
+
+  '@storybook/addon-a11y@10.6.0(storybook@10.6.0)':
+    dependencies:
+      '@storybook/global': 5.0.0
+      axe-core: 4.13.0
+      storybook: 10.6.0(@types/react@19.3.0)(prettier@3.9.9)(react@19.3.0)
+
+  '@storybook/addon-docs@10.6.0(@types/react-dom@19.3.0)(@types/react@19.3.0)(storybook@10.6.0)':
+    dependencies:
+      '@mdx-js/react': 3.1.1(@types/react@19.3.0)(react@19.3.0)
+      '@storybook/icons': 2.1.0(react@19.3.0)
+      '@storybook/react-dom-shim': 10.6.0(@types/react-dom@19.3.0)(@types/react@19.3.0)(react-dom@19.3.0)(react@19.3.0)(storybook@10.6.0)
+      react: 19.3.0
+      react-dom: 19.3.0(react@19.3.0)
+      storybook: 10.6.0(@types/react@19.3.0)(prettier@3.9.9)(react@19.3.0)
+      ts-dedent: 2.3.0
+      unplugin: 2.3.11
+    optionalDependencies:
+      '@types/react': 19.3.0
+    transitivePeerDependencies:
+      - '@types/react-dom'
+
+  '@storybook/addon-links@10.6.0(@types/react@19.3.0)(react@19.3.0)(storybook@10.6.0)':
+    dependencies:
+      '@storybook/global': 5.0.0
+      storybook: 10.6.0(@types/react@19.3.0)(prettier@3.9.9)(react@19.3.0)
+    optionalDependencies:
+      '@types/react': 19.3.0
+      react: 19.3.0
+
+  '@storybook/addon-themes@10.6.0(storybook@10.6.0)':
+    dependencies:
+      storybook: 10.6.0(@types/react@19.3.0)(prettier@3.9.9)(react@19.3.0)
+      ts-dedent: 2.3.0
+
+  '@storybook/addon-vitest@10.6.0(@vitest/browser-playwright@4.1.11)(@vitest/browser@4.1.11)(@vitest/runner@4.1.11)(react@19.3.0)(storybook@10.6.0)(vitest@4.1.11)':
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 2.1.0(react@19.3.0)
+      storybook: 10.6.0(@types/react@19.3.0)(prettier@3.9.9)(react@19.3.0)
+    optionalDependencies:
+      '@vitest/browser': 4.1.11(vite@8.3.1)(vitest@4.1.11)
+      '@vitest/browser-playwright': 4.1.11(playwright@1.63.0)(vite@8.3.1)(vitest@4.1.11)
+      '@vitest/runner': 4.1.11
+      vitest: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
+    transitivePeerDependencies:
+      - react
+
+  '@storybook/builder-vite@10.6.0(storybook@10.6.0)(vite@8.3.1)':
+    dependencies:
+      storybook: 10.6.0(@types/react@19.3.0)(prettier@3.9.9)(react@19.3.0)
+      ts-dedent: 2.3.0
+      vite: 8.3.1(@types/node@24.19.0)(@vitejs/devtools@0.4.12)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(yaml@2.9.1)
+
+  '@storybook/global@5.0.0': {}
+
+  '@storybook/icons@2.1.0(react@19.3.0)':
+    dependencies:
+      react: 19.3.0
+
+  '@storybook/react-dom-shim@10.6.0(@types/react-dom@19.3.0)(@types/react@19.3.0)(react-dom@19.3.0)(react@19.3.0)(storybook@10.6.0)':
+    dependencies:
+      react: 19.3.0
+      react-dom: 19.3.0(react@19.3.0)
+      storybook: 10.6.0(@types/react@19.3.0)(prettier@3.9.9)(react@19.3.0)
+    optionalDependencies:
+      '@types/react': 19.3.0
+      '@types/react-dom': 19.3.0(@types/react@19.3.0)
+
+  '@storybook/react-vite@10.6.0(@types/react-dom@19.3.0)(@types/react@19.3.0)(react-dom@19.3.0)(react@19.3.0)(storybook@10.6.0)(supports-color@10.2.2)(typescript@7.0.2)(vite@8.3.1)':
+    dependencies:
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.7.0(typescript@7.0.2)(vite@8.3.1)
+      '@rollup/pluginutils': 5.4.0
+      '@storybook/builder-vite': 10.6.0(storybook@10.6.0)(vite@8.3.1)
+      '@storybook/react': 10.6.0(@types/react-dom@19.3.0)(@types/react@19.3.0)(react-dom@19.3.0)(react@19.3.0)(storybook@10.6.0)(supports-color@10.2.2)(typescript@7.0.2)
+      empathic: 2.1.0
+      magic-string: 1.4.2
+      react: 19.3.0
+      react-docgen: 8.0.4(supports-color@10.2.2)
+      react-dom: 19.3.0(react@19.3.0)
+      resolve: 1.22.12
+      storybook: 10.6.0(@types/react@19.3.0)(prettier@3.9.9)(react@19.3.0)
+      tsconfig-paths: 4.2.0
+      vite: 8.3.1(@types/node@24.19.0)(@vitejs/devtools@0.4.12)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(yaml@2.9.1)
+    optionalDependencies:
+      typescript: 7.0.2
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+      - rollup
+      - supports-color
+
+  '@storybook/react@10.6.0(@types/react-dom@19.3.0)(@types/react@19.3.0)(react-dom@19.3.0)(react@19.3.0)(storybook@10.6.0)(supports-color@10.2.2)(typescript@7.0.2)':
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/react-dom-shim': 10.6.0(@types/react-dom@19.3.0)(@types/react@19.3.0)(react-dom@19.3.0)(react@19.3.0)(storybook@10.6.0)
+      react: 19.3.0
+      react-docgen: 8.0.4(supports-color@10.2.2)
+      react-docgen-typescript: 2.4.0(typescript@7.0.2)
+      react-dom: 19.3.0(react@19.3.0)
+      storybook: 10.6.0(@types/react@19.3.0)(prettier@3.9.9)(react@19.3.0)
+    optionalDependencies:
+      '@types/react': 19.3.0
+      '@types/react-dom': 19.3.0(@types/react@19.3.0)
+      typescript: 7.0.2
+    transitivePeerDependencies:
+      - supports-color
 
   '@swc/core-darwin-arm64@1.16.2':
     optional: true
@@ -22565,6 +23816,15 @@ snapshots:
       picocolors: 1.1.1
       pretty-format: 27.5.1
 
+  '@testing-library/jest-dom@6.9.1':
+    dependencies:
+      '@adobe/css-tools': 4.5.0
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
   '@testing-library/jest-dom@7.0.1(@testing-library/dom@10.4.2)(vitest@4.1.11)':
     dependencies:
       '@adobe/css-tools': 4.5.0
@@ -22575,7 +23835,7 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
     optionalDependencies:
-      vitest: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
+      vitest: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
 
   '@testing-library/react@16.3.3(@testing-library/dom@10.4.2)(@types/react-dom@19.3.0)(@types/react@19.3.0)(react-dom@19.3.0)(react@19.3.0)':
     dependencies:
@@ -22653,6 +23913,27 @@ snapshots:
 
   '@types/aria-query@5.0.4': {}
 
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.9
+      '@babel/types': 7.29.8
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.8
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.9
+      '@babel/types': 7.29.8
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.8
+
   '@types/caseless@0.12.5': {}
 
   '@types/chai@5.2.3':
@@ -22677,6 +23958,10 @@ snapshots:
 
   '@types/dlv@1.1.5': {}
 
+  '@types/doctrine@0.0.9': {}
+
+  '@types/esrecurse@4.3.1': {}
+
   '@types/estree@1.0.9': {}
 
   '@types/event-source-polyfill@1.0.5': {}
@@ -22714,6 +23999,8 @@ snapshots:
 
   '@types/mdurl@2.0.0': {}
 
+  '@types/mdx@2.0.14': {}
+
   '@types/ms@2.1.0':
     optional: true
 
@@ -22759,6 +24046,8 @@ snapshots:
       '@types/tough-cookie': 4.0.5
       form-data: 2.5.6
 
+  '@types/resolve@1.20.6': {}
+
   '@types/retry@0.12.0':
     optional: true
 
@@ -22797,6 +24086,57 @@ snapshots:
     dependencies:
       '@types/node': 24.19.0
 
+  '@typescript-eslint/project-service@8.70.1(supports-color@10.2.2)(typescript@7.0.2)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.70.1(typescript@7.0.2)
+      '@typescript-eslint/types': 8.70.1
+      debug: 4.4.3(supports-color@10.2.2)
+      typescript: 7.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.70.1':
+    dependencies:
+      '@typescript-eslint/types': 8.70.1
+      '@typescript-eslint/visitor-keys': 8.70.1
+
+  '@typescript-eslint/tsconfig-utils@8.70.1(typescript@7.0.2)':
+    dependencies:
+      typescript: 7.0.2
+
+  '@typescript-eslint/types@8.70.1': {}
+
+  '@typescript-eslint/typescript-estree@8.70.1(supports-color@10.2.2)(typescript@7.0.2)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.70.1(supports-color@10.2.2)(typescript@7.0.2)
+      '@typescript-eslint/tsconfig-utils': 8.70.1(typescript@7.0.2)
+      '@typescript-eslint/types': 8.70.1
+      '@typescript-eslint/visitor-keys': 8.70.1
+      debug: 4.4.3(supports-color@10.2.2)
+      minimatch: 10.2.6
+      semver: 7.8.5
+      tinyglobby: 0.2.17
+      ts-api-utils: 2.5.0(typescript@7.0.2)
+      typescript: 7.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.70.1(eslint@10.11.0)(supports-color@10.2.2)(typescript@7.0.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.10.1(eslint@10.11.0)
+      '@typescript-eslint/scope-manager': 8.70.1
+      '@typescript-eslint/types': 8.70.1
+      '@typescript-eslint/typescript-estree': 8.70.1(supports-color@10.2.2)(typescript@7.0.2)
+      eslint: 10.11.0(jiti@2.7.0)(supports-color@10.2.2)
+      typescript: 7.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.70.1':
+    dependencies:
+      '@typescript-eslint/types': 8.70.1
+      eslint-visitor-keys: 5.0.1
+
   '@typescript/typescript-aix-ppc64@7.0.2':
     optional: true
 
@@ -23465,7 +24805,37 @@ snapshots:
       '@rolldown/plugin-babel': 0.2.4(@babel/core@7.29.7)(@babel/runtime@7.29.7)(rolldown@1.2.11)(vite@8.3.1)
       oxc-transform-react: 0.147.0
 
-  '@vitest/coverage-v8@4.1.11(vitest@4.1.11)':
+  '@vitest/browser-playwright@4.1.11(playwright@1.63.0)(vite@8.3.1)(vitest@4.1.11)':
+    dependencies:
+      '@vitest/browser': 4.1.11(vite@8.3.1)(vitest@4.1.11)
+      '@vitest/mocker': 4.1.11(vite@8.3.1)
+      playwright: 1.63.0
+      tinyrainbow: 3.1.1
+      vitest: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/browser@4.1.11(vite@8.3.1)(vitest@4.1.11)':
+    dependencies:
+      '@blazediff/core': 1.9.1
+      '@vitest/mocker': 4.1.11(vite@8.3.1)
+      '@vitest/utils': 4.1.11
+      magic-string: 0.30.21
+      pngjs: 7.0.0
+      sirv: 3.0.2
+      tinyrainbow: 3.1.1
+      vitest: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
+      ws: 8.22.0
+    transitivePeerDependencies:
+      - bufferutil
+      - msw
+      - utf-8-validate
+      - vite
+
+  '@vitest/coverage-v8@4.1.11(@vitest/browser@4.1.11)(vitest@4.1.11)':
     dependencies:
       '@bcoe/v8-coverage': 1.0.2
       '@vitest/utils': 4.1.11
@@ -23477,7 +24847,17 @@ snapshots:
       obug: 2.2.1
       std-env: 4.2.0
       tinyrainbow: 3.1.1
-      vitest: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
+      vitest: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
+    optionalDependencies:
+      '@vitest/browser': 4.1.11(vite@8.3.1)(vitest@4.1.11)
+
+  '@vitest/expect@3.2.4':
+    dependencies:
+      '@types/chai': 5.2.3
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
 
   '@vitest/expect@4.1.11':
     dependencies:
@@ -23496,6 +24876,10 @@ snapshots:
     optionalDependencies:
       vite: 8.3.1(@types/node@24.19.0)(@vitejs/devtools@0.4.12)(esbuild@0.28.2)(jiti@2.7.0)(tsx@4.23.15)(yaml@2.9.1)
 
+  '@vitest/pretty-format@3.2.4':
+    dependencies:
+      tinyrainbow: 2.0.0
+
   '@vitest/pretty-format@4.1.11':
     dependencies:
       tinyrainbow: 3.1.1
@@ -23512,8 +24896,18 @@ snapshots:
       magic-string: 0.30.21
       pathe: 2.0.3
 
+  '@vitest/spy@3.2.4':
+    dependencies:
+      tinyspy: 4.0.6
+
   '@vitest/spy@4.1.11': {}
 
+  '@vitest/utils@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+
   '@vitest/utils@4.1.11':
     dependencies:
       '@vitest/pretty-format': 4.1.11
@@ -23574,6 +24968,8 @@ snapshots:
 
   '@vue/shared@3.5.43': {}
 
+  '@webcontainer/env@1.1.1': {}
+
   '@workflow/serde@4.1.0-beta.2': {}
 
   '@xmldom/xmldom@0.8.15': {}
@@ -23624,79 +25020,79 @@ snapshots:
   '@yuku-codegen/binding-win32-x64@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-android-arm64@0.10.2':
+  '@yuku-parser/binding-android-arm64@0.11.0':
     optional: true
 
   '@yuku-parser/binding-android-arm64@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-darwin-arm64@0.10.2':
+  '@yuku-parser/binding-darwin-arm64@0.11.0':
     optional: true
 
   '@yuku-parser/binding-darwin-arm64@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-darwin-x64@0.10.2':
+  '@yuku-parser/binding-darwin-x64@0.11.0':
     optional: true
 
   '@yuku-parser/binding-darwin-x64@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-freebsd-x64@0.10.2':
+  '@yuku-parser/binding-freebsd-x64@0.11.0':
     optional: true
 
   '@yuku-parser/binding-freebsd-x64@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-linux-arm-gnu@0.10.2':
+  '@yuku-parser/binding-linux-arm-gnu@0.11.0':
     optional: true
 
   '@yuku-parser/binding-linux-arm-gnu@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-linux-arm-musl@0.10.2':
+  '@yuku-parser/binding-linux-arm-musl@0.11.0':
     optional: true
 
   '@yuku-parser/binding-linux-arm-musl@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-linux-arm64-gnu@0.10.2':
+  '@yuku-parser/binding-linux-arm64-gnu@0.11.0':
     optional: true
 
   '@yuku-parser/binding-linux-arm64-gnu@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-linux-arm64-musl@0.10.2':
+  '@yuku-parser/binding-linux-arm64-musl@0.11.0':
     optional: true
 
   '@yuku-parser/binding-linux-arm64-musl@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-linux-x64-gnu@0.10.2':
+  '@yuku-parser/binding-linux-x64-gnu@0.11.0':
     optional: true
 
   '@yuku-parser/binding-linux-x64-gnu@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-linux-x64-musl@0.10.2':
+  '@yuku-parser/binding-linux-x64-musl@0.11.0':
     optional: true
 
   '@yuku-parser/binding-linux-x64-musl@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-win32-arm64@0.10.2':
+  '@yuku-parser/binding-win32-arm64@0.11.0':
     optional: true
 
   '@yuku-parser/binding-win32-arm64@0.8.7':
     optional: true
 
-  '@yuku-parser/binding-win32-x64@0.10.2':
+  '@yuku-parser/binding-win32-x64@0.11.0':
     optional: true
 
   '@yuku-parser/binding-win32-x64@0.8.7':
     optional: true
 
-  '@yuku-toolchain/types@0.10.2': {}
+  '@yuku-toolchain/types@0.11.0': {}
 
   '@yuku-toolchain/types@0.8.7': {}
 
@@ -23724,6 +25120,10 @@ snapshots:
     dependencies:
       acorn: 8.18.0
 
+  acorn-jsx@5.3.2(acorn@8.18.0):
+    dependencies:
+      acorn: 8.18.0
+
   acorn-loose@8.5.2:
     dependencies:
       acorn: 8.18.0
@@ -23771,6 +25171,13 @@ snapshots:
     optionalDependencies:
       ajv: 8.20.0
 
+  ajv@6.15.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
   ajv@8.18.0:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -23883,6 +25290,10 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  ast-types@0.16.3:
+    dependencies:
+      tslib: 2.8.1
+
   ast-v8-to-istanbul@1.0.7:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
@@ -23911,6 +25322,8 @@ snapshots:
 
   aws4@1.13.2: {}
 
+  axe-core@4.13.0: {}
+
   axios@1.20.0(debug@4.4.3)(supports-color@10.2.2):
     dependencies:
       follow-redirects: 1.16.0(debug@4.4.3)
@@ -24179,6 +25592,14 @@ snapshots:
       '@cacheable/utils': 2.5.0
       keyv: 5.6.0
 
+  cacheable@2.5.0:
+    dependencies:
+      '@cacheable/memory': 2.2.0
+      '@cacheable/utils': 2.5.0
+      hookified: 1.15.1
+      keyv: 5.6.0
+      qified: 0.10.1
+
   call-bind-apply-helpers@1.0.2:
     dependencies:
       es-errors: 1.3.0
@@ -24222,6 +25643,14 @@ snapshots:
     dependencies:
       react: 19.3.0
 
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.3
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
   chai@6.2.2: {}
 
   chalk@4.1.2:
@@ -24243,6 +25672,8 @@ snapshots:
 
   charenc@0.0.2: {}
 
+  check-error@2.1.3: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -24736,8 +26167,12 @@ snapshots:
 
   deeks@3.2.1: {}
 
+  deep-eql@5.0.2: {}
+
   deep-extend@0.6.0: {}
 
+  deep-is@0.1.4: {}
+
   deep-object-diff@1.1.9: {}
 
   deepmerge@4.3.1: {}
@@ -24832,6 +26267,10 @@ snapshots:
 
   doc-path@4.1.4: {}
 
+  doctrine@3.0.0:
+    dependencies:
+      esutils: 2.0.3
+
   dom-accessibility-api@0.5.16: {}
 
   dom-accessibility-api@0.6.3: {}
@@ -25127,12 +26566,83 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
+  eslint-plugin-storybook@10.6.0(eslint@10.11.0)(supports-color@10.2.2)(typescript@7.0.2):
+    dependencies:
+      '@typescript-eslint/types': 8.70.1
+      '@typescript-eslint/utils': 8.70.1(eslint@10.11.0)(supports-color@10.2.2)(typescript@7.0.2)
+      eslint: 10.11.0(jiti@2.7.0)(supports-color@10.2.2)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  eslint-scope@9.1.2:
+    dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.9
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@5.0.1: {}
+
+  eslint@10.11.0(jiti@2.7.0)(supports-color@10.2.2):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.10.1(eslint@10.11.0)
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.23.5(supports-color@10.2.2)
+      '@eslint/config-helpers': 0.7.0
+      '@eslint/core': 1.2.1
+      '@eslint/plugin-kit': 0.7.3
+      '@humanfs/node': 0.16.8
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.9
+      ajv: 6.15.0
+      cross-spawn: 7.0.6
+      debug: 4.4.3(supports-color@10.2.2)
+      escape-string-regexp: 4.0.0
+      eslint-scope: 9.1.2
+      eslint-visitor-keys: 5.0.1
+      espree: 11.2.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 11.1.5
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      minimatch: 10.2.6
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.7.0
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@11.2.0:
+    dependencies:
+      acorn: 8.18.0
+      acorn-jsx: 5.3.2(acorn@8.18.0)
+      eslint-visitor-keys: 5.0.1
+
   esprima@4.0.1: {}
 
   esquery@1.6.0:
     dependencies:
       estraverse: 5.3.0
 
+  esquery@1.7.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
   estraverse@5.3.0: {}
 
   estree-walker@2.0.2: {}
@@ -25304,6 +26814,10 @@ snapshots:
       merge2: 1.4.1
       micromatch: 4.0.8
 
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
   fast-levenshtein@3.0.0:
     dependencies:
       fastest-levenshtein: 1.0.16
@@ -25371,6 +26885,10 @@ snapshots:
     dependencies:
       is-unicode-supported: 2.1.0
 
+  file-entry-cache@11.1.5:
+    dependencies:
+      flat-cache: 6.1.23
+
   file-selector@0.4.0:
     dependencies:
       tslib: 2.8.1
@@ -25424,9 +26942,22 @@ snapshots:
     dependencies:
       locate-path: 3.0.0
 
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@6.1.23:
+    dependencies:
+      cacheable: 2.5.0
+      flatted: 3.4.4
+      hookified: 1.15.1
+
   flatbuffers@25.9.23:
     optional: true
 
+  flatted@3.4.4: {}
+
   float-tooltip@1.7.5:
     dependencies:
       d3-selection: 3.0.0
@@ -25656,7 +27187,7 @@ snapshots:
     dependencies:
       undici: 7.30.0
     optionalDependencies:
-      vitest: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
+      vitest: 4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1)
 
   get-latest-version@6.0.1:
     dependencies:
@@ -25707,6 +27238,10 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
   glob@10.5.0:
     dependencies:
       foreground-child: 3.3.1
@@ -25960,6 +27495,8 @@ snapshots:
 
   hookified@1.15.1: {}
 
+  hookified@2.2.0: {}
+
   hosted-git-info@9.0.3:
     dependencies:
       lru-cache: 11.5.3
@@ -26127,6 +27664,8 @@ snapshots:
 
   import-without-cache@0.4.1: {}
 
+  imurmurhash@0.1.4: {}
+
   indent-string@4.0.0: {}
 
   indent-string@5.0.0: {}
@@ -26565,12 +28104,16 @@ snapshots:
       '@babel/runtime': 7.29.7
       ts-algebra: 2.0.0
 
+  json-schema-traverse@0.4.1: {}
+
   json-schema-traverse@1.0.0: {}
 
   json-schema-typed@8.0.2: {}
 
   json-schema@0.4.0: {}
 
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
   json-stable-stringify@1.3.0:
     dependencies:
       call-bind: 1.0.9
@@ -26713,6 +28256,11 @@ snapshots:
 
   leven@4.1.0: {}
 
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
   lexorank@1.0.5: {}
 
   lightningcss-android-arm64@1.33.0:
@@ -26804,6 +28352,10 @@ snapshots:
       p-locate: 3.0.0
       path-exists: 3.0.0
 
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
   lodash-es@4.18.1: {}
 
   lodash.debounce@4.0.8: {}
@@ -26858,6 +28410,8 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  loupe@3.2.1: {}
+
   lru-cache@10.4.3: {}
 
   lru-cache@11.5.3: {}
@@ -26886,6 +28440,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.6.0
 
+  magic-string@1.4.2:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.6.0
+
   magicast@0.5.5:
     dependencies:
       '@babel/parser': 7.29.9
@@ -27176,6 +28734,8 @@ snapshots:
 
   napi-build-utils@2.0.0: {}
 
+  natural-compare@1.4.0: {}
+
   natural@8.1.1(@opentelemetry/api@1.9.1)(gcp-metadata@8.1.4)(socks@2.8.10):
     dependencies:
       afinn-165: 2.0.2
@@ -27398,7 +28958,6 @@ snapshots:
       define-lazy-prop: 3.0.0
       is-inside-container: 1.0.0
       wsl-utils: 0.1.0
-    optional: true
 
   open@11.0.4:
     dependencies:
@@ -27432,6 +28991,15 @@ snapshots:
 
   opener@1.5.2: {}
 
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
   ora@9.4.1:
     dependencies:
       chalk: 5.6.2
@@ -27479,6 +29047,31 @@ snapshots:
       - '@emnapi/core'
       - '@emnapi/runtime'
 
+  oxc-parser@0.127.0:
+    dependencies:
+      '@oxc-project/types': 0.127.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.127.0
+      '@oxc-parser/binding-android-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-arm64': 0.127.0
+      '@oxc-parser/binding-darwin-x64': 0.127.0
+      '@oxc-parser/binding-freebsd-x64': 0.127.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.127.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.127.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.127.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.127.0
+      '@oxc-parser/binding-linux-x64-musl': 0.127.0
+      '@oxc-parser/binding-openharmony-arm64': 0.127.0
+      '@oxc-parser/binding-wasm32-wasi': 0.127.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.127.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.127.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.127.0
+
   oxc-parser@0.129.0:
     dependencies:
       '@oxc-project/types': 0.129.0
@@ -27528,6 +29121,28 @@ snapshots:
       '@oxc-parser/binding-win32-ia32-msvc': 0.150.0
       '@oxc-parser/binding-win32-x64-msvc': 0.150.0
 
+  oxc-resolver@11.21.2:
+    optionalDependencies:
+      '@oxc-resolver/binding-android-arm-eabi': 11.21.2
+      '@oxc-resolver/binding-android-arm64': 11.21.2
+      '@oxc-resolver/binding-darwin-arm64': 11.21.2
+      '@oxc-resolver/binding-darwin-x64': 11.21.2
+      '@oxc-resolver/binding-freebsd-x64': 11.21.2
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.21.2
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.21.2
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-arm64-musl': 11.21.2
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.21.2
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-x64-gnu': 11.21.2
+      '@oxc-resolver/binding-linux-x64-musl': 11.21.2
+      '@oxc-resolver/binding-openharmony-arm64': 11.21.2
+      '@oxc-resolver/binding-wasm32-wasi': 11.21.2
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.21.2
+      '@oxc-resolver/binding-win32-x64-msvc': 11.21.2
+
   oxc-resolver@11.24.2:
     optionalDependencies:
       '@oxc-resolver/binding-android-arm-eabi': 11.24.2
@@ -27671,6 +29286,10 @@ snapshots:
     dependencies:
       p-limit: 2.3.0
 
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
   p-map@7.0.8: {}
 
   p-queue-compat@1.0.225:
@@ -27773,6 +29392,8 @@ snapshots:
 
   path-exists@3.0.0: {}
 
+  path-exists@4.0.0: {}
+
   path-expression-matcher@1.6.2: {}
 
   path-is-absolute@1.0.1: {}
@@ -27807,6 +29428,8 @@ snapshots:
 
   pathe@2.0.3: {}
 
+  pathval@2.0.1: {}
+
   pdf-parse@2.4.5:
     dependencies:
       '@napi-rs/canvas': 0.1.80
@@ -27942,6 +29565,8 @@ snapshots:
 
   pluralize@8.0.0: {}
 
+  pngjs@7.0.0: {}
+
   polished@4.3.1:
     dependencies:
       '@babel/runtime': 7.29.7
@@ -27991,6 +29616,8 @@ snapshots:
       tar-fs: 2.1.5
       tunnel-agent: 0.6.0
 
+  prelude-ls@1.2.1: {}
+
   prettier@3.9.9: {}
 
   pretty-bytes@6.1.1: {}
@@ -28362,6 +29989,10 @@ snapshots:
 
   python-shell@5.0.0: {}
 
+  qified@0.10.1:
+    dependencies:
+      hookified: 2.2.0
+
   qs@6.16.0:
     dependencies:
       es-define-property: 1.0.1
@@ -28441,6 +30072,25 @@ snapshots:
       '@types/node': 24.19.0
       '@types/react': 19.3.0
 
+  react-docgen-typescript@2.4.0(typescript@7.0.2):
+    dependencies:
+      typescript: 7.0.2
+
+  react-docgen@8.0.4(supports-color@10.2.2):
+    dependencies:
+      '@babel/core': 7.29.7(supports-color@10.2.2)
+      '@babel/traverse': 7.29.8(supports-color@10.2.2)
+      '@babel/types': 7.29.8
+      '@types/babel__core': 7.20.5
+      '@types/babel__traverse': 7.28.0
+      '@types/doctrine': 0.0.9
+      '@types/resolve': 1.20.6
+      doctrine: 3.0.0
+      resolve: 1.22.12
+      strip-indent: 4.1.1
+    transitivePeerDependencies:
+      - supports-color
+
   react-dom@19.3.0(react@19.3.0):
     dependencies:
       react: 19.3.0
@@ -28655,6 +30305,14 @@ snapshots:
 
   readdirp@5.1.1: {}
 
+  recast@0.23.21:
+    dependencies:
+      ast-types: 0.16.3
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
   redent@3.0.0:
     dependencies:
       indent-string: 4.0.0
@@ -29607,6 +31265,12 @@ snapshots:
 
   simple-wcswidth@1.1.2: {}
 
+  sirv@3.0.2:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
   sisteransi@1.0.5: {}
 
   skills@1.7.0:
@@ -29744,6 +31408,33 @@ snapshots:
   stopwords-iso@1.1.0:
     optional: true
 
+  storybook@10.6.0(@types/react@19.3.0)(prettier@3.9.9)(react@19.3.0):
+    dependencies:
+      '@storybook/global': 5.0.0
+      '@storybook/icons': 2.1.0(react@19.3.0)
+      '@testing-library/dom': 10.4.2
+      '@testing-library/jest-dom': 6.9.1
+      '@testing-library/user-event': 14.6.7(@testing-library/dom@10.4.2)
+      '@vitest/expect': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@webcontainer/env': 1.1.1
+      esbuild: 0.28.2
+      jsonc-parser: 3.3.1
+      open: 10.2.0
+      oxc-parser: 0.127.0
+      oxc-resolver: 11.21.2
+      recast: 0.23.21
+      semver: 7.8.5
+      use-sync-external-store: 1.7.0(react@19.3.0)
+      ws: 8.22.0
+    optionalDependencies:
+      '@types/react': 19.3.0
+      prettier: 3.9.9
+    transitivePeerDependencies:
+      - bufferutil
+      - react
+      - utf-8-validate
+
   stream-events@1.0.5:
     dependencies:
       stubs: 3.0.0
@@ -29822,6 +31513,8 @@ snapshots:
     dependencies:
       min-indent: 1.0.1
 
+  strip-indent@4.1.1: {}
+
   strip-json-comments@2.0.1: {}
 
   strip-json-comments@5.0.3: {}
@@ -30050,8 +31743,12 @@ snapshots:
 
   tinypool@2.1.0: {}
 
+  tinyrainbow@2.0.0: {}
+
   tinyrainbow@3.1.1: {}
 
+  tinyspy@4.0.6: {}
+
   tldts-core@7.4.16: {}
 
   tldts@7.4.16:
@@ -30077,6 +31774,8 @@ snapshots:
 
   toposort@2.0.2: {}
 
+  totalist@3.0.1: {}
+
   touch@3.1.1: {}
 
   tough-cookie@4.1.4:
@@ -30110,8 +31809,14 @@ snapshots:
 
   ts-algebra@2.0.0: {}
 
+  ts-api-utils@2.5.0(typescript@7.0.2):
+    dependencies:
+      typescript: 7.0.2
+
   ts-brand@0.2.0: {}
 
+  ts-dedent@2.3.0: {}
+
   ts-morph@12.0.0:
     dependencies:
       '@ts-morph/common': 0.11.1
@@ -30176,6 +31881,10 @@ snapshots:
       '@turbo/windows-64': 2.10.9
       '@turbo/windows-arm64': 2.10.9
 
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
   type-fest@0.13.1:
     optional: true
 
@@ -30310,6 +32019,13 @@ snapshots:
 
   unpipe@1.0.0: {}
 
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.18.0
+      picomatch: 4.0.7
+      webpack-virtual-modules: 0.6.2
+
   unzipper@0.12.5:
     dependencies:
       bluebird: 3.7.2
@@ -30528,7 +32244,7 @@ snapshots:
       find-up-simple: 1.0.1
       pathe: 2.0.3
 
-  vitest@4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1):
+  vitest@4.1.11(@edge-runtime/vm@3.2.0)(@opentelemetry/api@1.9.1)(@types/node@24.19.0)(@vitest/browser-playwright@4.1.11)(@vitest/coverage-v8@4.1.11)(jsdom@29.1.1)(vite@8.3.1):
     dependencies:
       '@vitest/expect': 4.1.11
       '@vitest/mocker': 4.1.11(vite@8.3.1)
@@ -30554,7 +32270,8 @@ snapshots:
       '@edge-runtime/vm': 3.2.0
       '@opentelemetry/api': 1.9.1
       '@types/node': 24.19.0
-      '@vitest/coverage-v8': 4.1.11(vitest@4.1.11)
+      '@vitest/browser-playwright': 4.1.11(playwright@1.63.0)(vite@8.3.1)(vitest@4.1.11)
+      '@vitest/coverage-v8': 4.1.11(@vitest/browser@4.1.11)(vitest@4.1.11)
       jsdom: 29.1.1(@noble/hashes@2.4.0)
     transitivePeerDependencies:
       - msw
@@ -30594,6 +32311,8 @@ snapshots:
 
   webidl-conversions@8.0.1: {}
 
+  webpack-virtual-modules@0.6.2: {}
+
   whatwg-mimetype@5.0.0: {}
 
   whatwg-url@14.2.0:
@@ -30662,6 +32381,8 @@ snapshots:
       triple-beam: 1.4.1
       winston-transport: 4.9.0
 
+  word-wrap@1.2.5: {}
+
   wordnet-db@3.1.14:
     optional: true
 
@@ -30702,7 +32423,6 @@ snapshots:
   wsl-utils@0.1.0:
     dependencies:
       is-wsl: 3.1.1
-    optional: true
 
   wsl-utils@0.4.0:
     dependencies:
@@ -30816,10 +32536,6 @@ snapshots:
 
   yoga-layout@3.2.1: {}
 
-  yuku-ast@0.10.2:
-    dependencies:
-      '@yuku-toolchain/types': 0.10.2
-
   yuku-ast@0.8.7:
     dependencies:
       '@yuku-toolchain/types': 0.8.7
@@ -30841,23 +32557,22 @@ snapshots:
       '@yuku-codegen/binding-win32-arm64': 0.8.7
       '@yuku-codegen/binding-win32-x64': 0.8.7
 
-  yuku-parser@0.10.2:
+  yuku-parser@0.11.0:
     dependencies:
-      '@yuku-toolchain/types': 0.10.2
-      yuku-ast: 0.10.2
+      '@yuku-toolchain/types': 0.11.0
     optionalDependencies:
-      '@yuku-parser/binding-android-arm64': 0.10.2
-      '@yuku-parser/binding-darwin-arm64': 0.10.2
-      '@yuku-parser/binding-darwin-x64': 0.10.2
-      '@yuku-parser/binding-freebsd-x64': 0.10.2
-      '@yuku-parser/binding-linux-arm-gnu': 0.10.2
-      '@yuku-parser/binding-linux-arm-musl': 0.10.2
-      '@yuku-parser/binding-linux-arm64-gnu': 0.10.2
-      '@yuku-parser/binding-linux-arm64-musl': 0.10.2
-      '@yuku-parser/binding-linux-x64-gnu': 0.10.2
-      '@yuku-parser/binding-linux-x64-musl': 0.10.2
-      '@yuku-parser/binding-win32-arm64': 0.10.2
-      '@yuku-parser/binding-win32-x64': 0.10.2
+      '@yuku-parser/binding-android-arm64': 0.11.0
+      '@yuku-parser/binding-darwin-arm64': 0.11.0
+      '@yuku-parser/binding-darwin-x64': 0.11.0
+      '@yuku-parser/binding-freebsd-x64': 0.11.0
+      '@yuku-parser/binding-linux-arm-gnu': 0.11.0
+      '@yuku-parser/binding-linux-arm-musl': 0.11.0
+      '@yuku-parser/binding-linux-arm64-gnu': 0.11.0
+      '@yuku-parser/binding-linux-arm64-musl': 0.11.0
+      '@yuku-parser/binding-linux-x64-gnu': 0.11.0
+      '@yuku-parser/binding-linux-x64-musl': 0.11.0
+      '@yuku-parser/binding-win32-arm64': 0.11.0
+      '@yuku-parser/binding-win32-x64': 0.11.0
 
   yuku-parser@0.8.7:
     dependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 33c7841712..73d91a797d 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -28,7 +28,7 @@ catalog:
   '@sanity/asset-utils': ^2.3.0
   '@sanity/client': ^8.6.1
   '@sanity/color': ^3.0.8
-  '@sanity/icons': ^5.2.1
+  '@sanity/icons': ^5.2.2
   '@sanity/image-url': ^2.1.1
   '@sanity/mutator': ^6.16.0
   '@sanity/pkg-utils': ^12.3.4
@@ -38,10 +38,10 @@ catalog:
   '@sanity/tsconfig': ^2.2.1
   '@sanity/tsdown-config': ^0.27.1
   '@sanity/types': ^6.16.0
-  '@sanity/ui': ^4.0.7
+  '@sanity/ui': ^4.2.7
   '@sanity/util': ^6.16.0
   '@sanity/uuid': ^3.0.3
-  '@sanity/vanilla-extract-vite-plugin': ^0.2.17
+  '@sanity/vanilla-extract-vite-plugin': ^0.2.20
   '@sanity/vision': ^6.16.0
   '@testing-library/jest-dom': ^7.0.1
   '@testing-library/react': ^16.3.3
@@ -55,13 +55,14 @@ catalog:
   '@vanilla-extract/dynamic': ^2.1.5
   '@vis.gl/react-google-maps': ^1.9.0
   '@vitest/coverage-v8': ^4.1.11
+  '@xstate/react': ^6.1.0
   date-fns: ^4.4.0
   dequal: ^2.0.3
   groq: ^6.16.0
   jsdom: ^29.1.1
   lexorank: ^1.0.5
   lodash-es: ^4.18.1
-  motion: ^13.1.0
+  motion: ^13.4.4
   nanoid: ^6.0.1
   oxc-transform-react: ^0.147.0
   oxfmt: ^0.63.0
@@ -76,6 +77,7 @@ catalog:
   react-rx: ^4.2.5
   rxjs: ^7.8.2
   sanity: ^6.16.0
+  scroll-into-view-if-needed: ^3.1.0
   styled-components: ^6.5.3
   suspend-react: ^0.1.3
   tsdown: ^0.22.14
@@ -84,6 +86,7 @@ catalog:
   validate-npm-package-name: ^8.0.0
   video.js: ^7.21.7
   vitest: ^4.1.11
+  xstate: ^5.33.2
 
 catalogs:
   # Ranges used in `peerDependencies` (referenced as `catalog:peer`).