Merge branch 'main' into shadcn/package-imports

chore(release): version packages

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["www", "v4"]
+  "ignore": ["v4", "tests"]
 }

.changeset/few-flies-fry.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add support for package imports

.claude/settings.local.json

@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm test:*)",
+      "Bash(npm run typecheck:*)",
+      "Bash(ls:*)",
+      "Bash(cat:*)",
+      "WebSearch",
+      "WebFetch(domain:github.com)"
+    ],
+    "deny": []
+  }
+}

.cursor/rules/registry-bases-parity.mdc

@@ -0,0 +1,22 @@
+---
+description: Keep registry base and radix trees in sync when editing shared UI
+globs: apps/v4/registry/bases/**/*
+alwaysApply: false
+---
+
+# Registry bases: Base UI ↔ Radix parity
+
+`apps/v4/registry/bases/base` and `apps/v4/registry/bases/radix` are **parallel registries**. Anything that exists in both trees for the same purpose (preview blocks, mirrored examples, shared card layouts, etc.) **must stay in sync**.
+
+## When editing
+
+- If you change a file under **`bases/base/...`**, apply the **same behavioral and visual change** to the matching path under **`bases/radix/...`** (and the reverse).
+- Only diverge where APIs differ (e.g. import paths like `@/registry/bases/base/ui/*` vs `@/registry/bases/radix/ui/*`, or Base UI vs Radix component props).
+- Do **not** update only one side unless the user explicitly asks for a single-base change.
+
+## Typical mirrored paths
+
+- `blocks/preview/**` — preview cards and blocks
+- Parallel `ui/*` components when both exist for the same component
+
+After edits, briefly confirm both trees were updated (or state why one side is intentionally unchanged).

.github/changeset-version.js

@@ -1,12 +1,12 @@
 // ORIGINALLY FROM CLOUDFLARE WRANGLER:
 // https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.js
 
-import { exec } from "child_process"
+import { execSync } from "child_process"
 
 // This script is used by the `release.yml` workflow to update the version of the packages being released.
-// The standard step is only to run `changeset version` but this does not update the package-lock.json file.
-// So we also run `npm install`, which does this update.
+// The standard step is only to run `changeset version` but this does not update the pnpm-lock.yaml file.
+// So we also run `pnpm install`, which does this update.
 // This is a workaround until this is handled automatically by `changeset version`.
 // See https://github.com/changesets/changesets/issues/421.
-exec("npx changeset version")
-exec("npm install")
+execSync("npx changeset version", { stdio: "inherit" })
+execSync("pnpm install --lockfile-only", { stdio: "inherit" })

.github/dependabot.yml

@@ -4,3 +4,43 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/astro-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/astro-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/next-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/next-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/react-router-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/react-router-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/start-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/start-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/vite-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/vite-monorepo"
+    schedule:
+      interval: "weekly"

.github/workflows/code-check.yml

@@ -77,6 +77,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build packages
+        run: pnpm --filter=shadcn build
+
       - run: pnpm format:check
 
   tsc:

.github/workflows/issue-stale.yml

@@ -18,15 +18,15 @@ jobs:
           repo-token: ${{ secrets.STALE_TOKEN }}
           ascending: true
           days-before-issue-close: 7
-          days-before-issue-stale: 365 # ~2 years
+          days-before-issue-stale: 365
           days-before-pr-stale: -1
           days-before-pr-close: -1
           remove-issue-stale-when-updated: true
           stale-issue-label: "stale?"
-          exempt-issue-labels: "roadmap,next,bug"
-          stale-issue-message: "This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you."
-          close-issue-message: "This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!"
-          operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
+          exempt-issue-labels: "roadmap,next"
+          stale-issue-message: "This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
+          close-issue-message: "This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)"
+          operations-per-run: 300
       - uses: actions/stale@v9
         id: pr-state
         name: "Mark stale PRs, close stale PRs"
@@ -36,10 +36,10 @@ jobs:
           days-before-issue-close: -1
           days-before-issue-stale: -1
           days-before-pr-close: 7
-          days-before-pr-stale: 365 # PRs with no activity in over 90 days will be marked as stale
+          days-before-pr-stale: 365
           remove-pr-stale-when-updated: true
-          exempt-pr-labels: "roadmap,nex,awaiting-approval,work-in-progress"
+          exempt-pr-labels: "roadmap,next,bug"
           stale-pr-label: "stale?"
-          stale-pr-message: "This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you."
-          close-pr-message: "This PR has been automatically closed due to one year of inactivity. Thank you for your understanding!"
-          operations-per-run: 300 # 1 operation per 100 issues, the rest is to label/comment/close
+          stale-pr-message: "This PR has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this PR is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)"
+          close-pr-message: "This PR has been automatically closed due to one year of inactivity. Thank you for your understanding! (This is an automated message)"
+          operations-per-run: 300

.github/workflows/prerelease.yml

@@ -7,6 +7,11 @@ on:
     types: [labeled]
     branches:
       - main
+
+permissions:
+  id-token: write
+  contents: read
+
 jobs:
   prerelease:
     if: |
@@ -18,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 
@@ -27,23 +32,22 @@ jobs:
         with:
           version: 9.0.6
 
-      - name: Use Node.js 18
-        uses: actions/setup-node@v3
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
           cache: "pnpm"
 
+      - name: Update npm for OIDC support
+        run: npm install -g npm@latest
+
       - name: Install NPM Dependencies
         run: pnpm install
 
       - name: Modify package.json version
         run: node .github/version-script-beta.js
 
-      - name: Authenticate to NPM
-        run: echo "//registry.npmjs.org/:_authToken=$NPM_ACCESS_TOKEN" >> packages/shadcn/.npmrc
-        env:
-          NPM_ACCESS_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
-
       - name: Publish Beta to NPM
         run: pnpm pub:beta
 

.github/workflows/release.yml

@@ -7,6 +7,11 @@ on:
     branches:
       - main
 
+permissions:
+  id-token: write
+  contents: write
+  pull-requests: write
+
 jobs:
   release:
     if: ${{ github.repository_owner == 'shadcn-ui' }}
@@ -23,13 +28,16 @@ jobs:
         with:
           version: 9.0.6
 
-      - name: Use Node.js 18
-        uses: actions/setup-node@v3
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
         with:
-          version: 9.0.6
-          node-version: 18
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
           cache: "pnpm"
 
+      - name: Update npm for OIDC support
+        run: npm install -g npm@latest
+
       - name: Install NPM Dependencies
         run: pnpm install
 
@@ -41,7 +49,7 @@ jobs:
 
       - name: Create Version PR or Publish to NPM
         id: changesets
-        uses: changesets/action@v1.4.1
+        uses: changesets/action@v1
         with:
           commit: "chore(release): version packages"
           title: "chore(release): version packages"
@@ -49,5 +57,4 @@ jobs:
           publish: npx changeset publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
           NODE_ENV: "production"

.github/workflows/test.yml

@@ -8,6 +8,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     name: pnpm test
+    env:
+      NEXT_PUBLIC_APP_URL: http://localhost:4000
+      NEXT_PUBLIC_V0_URL: https://v0.dev
     steps:
       - uses: actions/checkout@v3
         with:
@@ -16,7 +19,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 22
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm

.github/workflows/validate-registries.yml

@@ -0,0 +1,129 @@
+name: Validate Registries
+
+on:
+  pull_request:
+    paths:
+      - "apps/v4/public/r/registries.json"
+      - "apps/v4/registry/directory.json"
+  push:
+    branches:
+      - main
+    paths:
+      - "apps/v4/public/r/registries.json"
+      - "apps/v4/registry/directory.json"
+
+jobs:
+  check-registry-sync:
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    name: check-registry-sync
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Check changed files
+        id: changed
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          CHANGED_FILES=$(gh pr diff ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --name-only)
+
+          DIRECTORY_CHANGED=false
+          REGISTRIES_CHANGED=false
+
+          if echo "$CHANGED_FILES" | grep -q "^apps/v4/registry/directory.json$"; then
+            DIRECTORY_CHANGED=true
+          fi
+
+          if echo "$CHANGED_FILES" | grep -q "^apps/v4/public/r/registries.json$"; then
+            REGISTRIES_CHANGED=true
+          fi
+
+          echo "directory_changed=$DIRECTORY_CHANGED" >> $GITHUB_OUTPUT
+          echo "registries_changed=$REGISTRIES_CHANGED" >> $GITHUB_OUTPUT
+
+      - name: Flag missing registries.json update
+        if: steps.changed.outputs.directory_changed == 'true' && steps.changed.outputs.registries_changed == 'false'
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          gh pr edit ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --add-label "registries: invalid"
+          gh pr comment ${{ github.event.pull_request.number }} --repo ${{ github.repository }} --body "can you run \`pnpm registry:build\` and commit the json files please?"
+          exit 1
+
+  validate:
+    runs-on: ubuntu-latest
+    name: pnpm validate:registries
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Block reserved registry namespaces
+        env:
+          RESERVED_NAMESPACES: "@shadcn,@ui,@blocks,@components,@block,@component,@util,@utils,@registry,@lib,@hook,@hooks,@theme,@themes,@chart,@charts"
+        run: |
+          node <<'EOF'
+          const fs = require("node:fs")
+
+          const files = [
+            "apps/v4/public/r/registries.json",
+            "apps/v4/registry/directory.json",
+          ]
+          const reservedNamespaces = new Set(
+            process.env.RESERVED_NAMESPACES.split(",").filter(Boolean)
+          )
+
+          function readNames(filePath) {
+            return JSON.parse(fs.readFileSync(filePath, "utf8")).map(
+              (entry) => entry.name
+            )
+          }
+
+          const violations = files.flatMap((filePath) => {
+            return readNames(filePath)
+              .filter((name) => reservedNamespaces.has(name))
+              .map((name) => `${filePath}: ${name}`)
+          })
+
+          if (violations.length > 0) {
+            console.error("Reserved registry namespaces are not allowed:")
+
+            for (const violation of violations) {
+              console.error(`- ${violation}`)
+            }
+
+            process.exit(1)
+          }
+          EOF
+
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 9.0.6
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: |
+          echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Validate registries
+        run: pnpm --filter=v4 validate:registries

.gitignore

@@ -15,6 +15,7 @@ build
 
 # misc
 .DS_Store
+.eslintcache
 *.pem
 
 # debug
@@ -39,3 +40,8 @@ tsconfig.tsbuildinfo
 .idea
 .fleet
 .vscode
+
+.notes
+.playwright-mcp
+shadcn-workspace
+.codex-artifacts

.prettierignore

@@ -3,5 +3,6 @@ node_modules
 .next
 build
 .contentlayer
-apps/www/pages/api/registry.json
 **/fixtures
+deprecated
+apps/v4/registry/styles/**/*.css

.vscode/settings.json

@@ -3,15 +3,18 @@
     { "pattern": "apps/*/" },
     { "pattern": "packages/*/" }
   ],
-  "tailwindCSS.experimental.classRegex": [
-    ["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]?([^\"'`]+)[\"'`]?"],
-    ["cn\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-    // "cva\\(([^)]*)\\)",
-    // "[\"'`]([^\"'`]*).*?[\"'`]"
-  ],
+  "tailwindCSS.classFunctions": ["cva", "cn"],
   "vitest.debugExclude": [
     "<node_internals>/**",
     "**/node_modules/**",
     "**/fixtures/**"
-  ]
+  ],
+  "files.exclude": {
+    "deprecated": true
+  },
+  "search.exclude": {
+    "apps/v4/registry/radix-*": true,
+    "apps/v4/public/r/*": true,
+    "packages/shadcn/test/fixtures/*": true
+  }
 }

CONTRIBUTING.md

@@ -20,28 +20,25 @@ This repository is structured as follows:
 
 ```
 apps
-└── www
+└── v4
     ├── app
     ├── components
     ├── content
     └── registry
-        ├── default
-        │   ├── example
-        │   └── ui
-        └── new-york
+        └── new-york-v4
             ├── example
             └── ui
 packages
-└── cli
+└── shadcn
 ```
 
-| Path                  | Description                              |
-| --------------------- | ---------------------------------------- |
-| `apps/www/app`        | The Next.js application for the website. |
-| `apps/www/components` | The React components for the website.    |
-| `apps/www/content`    | The content for the website.             |
-| `apps/www/registry`   | The registry for the components.         |
-| `packages/cli`        | The `shadcn-ui` package.                 |
+| Path                 | Description                              |
+| -------------------- | ---------------------------------------- |
+| `apps/v4/app`        | The Next.js application for the website. |
+| `apps/v4/components` | The React components for the website.    |
+| `apps/v4/content`    | The content for the website.             |
+| `apps/v4/registry`   | The registry for the components.         |
+| `packages/shadcn`    | The `shadcn` package.                    |
 
 ## Development
 
@@ -82,32 +79,26 @@ You can use the `pnpm --filter=[WORKSPACE]` command to start the development pro
 1. To run the `ui.shadcn.com` website:
 
 ```bash
-pnpm --filter=www dev
+pnpm --filter=v4 dev
 ```
 
-2. To run the `shadcn-ui` package:
+2. To run the `shadcn` package:
 
 ```bash
-pnpm --filter=shadcn-ui dev
+pnpm --filter=shadcn dev
 ```
 
 ## Running the CLI Locally
 
 To run the CLI locally, you can follow the workflow:
 
-1. Start by running the registry (main site) to make sure the components are up to date:
+1. Start by running the dev server:
 
    ```bash
-   pnpm www:dev
+   pnpm dev
    ```
 
-2. Run the development script for the CLI:
-
-   ```bash
-   pnpm shadcn:dev
-   ```
-
-3. In another terminal tab, test the CLI by running:
+2. In another terminal tab, test the CLI by running:
 
    ```bash
    pnpm shadcn
@@ -119,36 +110,27 @@ To run the CLI locally, you can follow the workflow:
    pnpm shadcn <init | add | ...> -c ~/Desktop/my-app
    ```
 
-4. To run the tests for the CLI:
-
-   ```bash
-   pnpm --filter=shadcn test
-   ```
-
 This workflow ensures that you are running the most recent version of the registry and testing the CLI properly in your local environment.
 
 ## Documentation
 
-The documentation for this project is located in the `www` workspace. You can run the documentation locally by running the following command:
+The documentation for this project is located in the `v4` workspace. You can run the documentation locally by running the following command:
 
 ```bash
-pnpm --filter=www dev
+pnpm --filter=v4 dev
 ```
 
-Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/www/content/docs` directory.
+Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/v4/content/docs` directory.
 
 ## Components
 
-We use a registry system for developing components. You can find the source code for the components under `apps/www/registry`. The components are organized by styles.
+We use a registry system for developing components. You can find the source code for the components under `apps/v4/registry`. The components are organized by styles.
 
 ```bash
 apps
-└── www
+└── v4
     └── registry
-        ├── default
-        │   ├── example
-        │   └── ui
-        └── new-york
+        └── new-york-v4
             ├── example
             └── ui
 ```
@@ -157,7 +139,7 @@ When adding or modifying components, please ensure that:
 
 1. You make the changes for every style.
 2. You update the documentation.
-3. You run `pnpm build:registry` to update the registry.
+3. You run `pnpm registry:build` to update the registry.
 
 ## Commit Convention
 
@@ -196,9 +178,9 @@ If you have a request for a new component, please open a discussion on GitHub. W
 
 ## CLI
 
-The `shadcn-ui` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://ui.shadcn.com/docs/cli).
+The `shadcn` package is a CLI for adding components to your project. You can find the documentation for the CLI [here](https://ui.shadcn.com/docs/cli).
 
-Any changes to the CLI should be made in the `packages/cli` directory. If you can, it would be great if you could add tests for your changes.
+Any changes to the CLI should be made in the `packages/shadcn` directory. If you can, it would be great if you could add tests for your changes.
 
 ## Testing
 

README.md

@@ -1,12 +1,12 @@
 # shadcn/ui
 
-Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. **Use this to build your own component library**.
+A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code. **Use this to build your own component library**.
 
-![hero](apps/www/public/og.jpg)
+![hero](apps/v4/public/opengraph-image.png)
 
 ## Documentation
 
-Visit http://ui.shadcn.com/docs to view the documentation.
+Visit https://ui.shadcn.com/docs to view the documentation.
 
 ## Contributing
 
@@ -14,4 +14,4 @@ Please read the [contributing guide](/CONTRIBUTING.md).
 
 ## License
 
-Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
+Licensed under the [MIT license](./LICENSE.md).

SECURITY.md

@@ -6,4 +6,4 @@ We will investigate all legitimate reports and do our best to quickly fix the pr
 
 Our preference is that you make use of GitHub's private vulnerability reporting feature to disclose potential security vulnerabilities in our Open Source Software. 
 
-To do this, please visit the security tab of the repository and click the "Report a vulnerability" button.
+To do this, please visit the security tab of the repository and click the [Report a vulnerability](https://github.com/shadcn-ui/ui/security/advisories/new) button.

apps/v4/.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_V0_URL=https://v0.dev
+NEXT_PUBLIC_APP_URL=http://localhost:4000

apps/v4/.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
 
 # vercel
 .vercel

apps/v4/.prettierignore

@@ -5,3 +5,4 @@ build
 .contentlayer
 registry/__index__.tsx
 content/docs/components/calendar.mdx
+registry/styles/**/*.css

apps/v4/app/(app)/(root)/components/appearance-settings.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import * as React from "react"
+import { IconMinus, IconPlus } from "@tabler/icons-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "@/styles/radix-nova/ui/field"
+import { Input } from "@/styles/radix-nova/ui/input"
+import { RadioGroup, RadioGroupItem } from "@/styles/radix-nova/ui/radio-group"
+import { Switch } from "@/styles/radix-nova/ui/switch"
+
+export function AppearanceSettings() {
+  const [gpuCount, setGpuCount] = React.useState(8)
+
+  const handleGpuAdjustment = React.useCallback((adjustment: number) => {
+    setGpuCount((prevCount) =>
+      Math.max(1, Math.min(99, prevCount + adjustment))
+    )
+  }, [])
+
+  const handleGpuInputChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value, 10)
+      if (!isNaN(value) && value >= 1 && value <= 99) {
+        setGpuCount(value)
+      }
+    },
+    []
+  )
+
+  return (
+    <FieldSet>
+      <FieldGroup>
+        <FieldSet>
+          <FieldLegend>Compute Environment</FieldLegend>
+          <FieldDescription>
+            Select the compute environment for your cluster.
+          </FieldDescription>
+          <RadioGroup defaultValue="kubernetes">
+            <FieldLabel htmlFor="kubernetes-r2h">
+              <Field orientation="horizontal">
+                <FieldContent>
+                  <FieldTitle>Kubernetes</FieldTitle>
+                  <FieldDescription>
+                    Run GPU workloads on a K8s configured cluster. This is the
+                    default.
+                  </FieldDescription>
+                </FieldContent>
+                <RadioGroupItem
+                  value="kubernetes"
+                  id="kubernetes-r2h"
+                  aria-label="Kubernetes"
+                />
+              </Field>
+            </FieldLabel>
+            <FieldLabel htmlFor="vm-z4k">
+              <Field orientation="horizontal">
+                <FieldContent>
+                  <FieldTitle>Virtual Machine</FieldTitle>
+                  <FieldDescription>
+                    Access a VM configured cluster to run workloads. (Coming
+                    soon)
+                  </FieldDescription>
+                </FieldContent>
+                <RadioGroupItem
+                  value="vm"
+                  id="vm-z4k"
+                  aria-label="Virtual Machine"
+                />
+              </Field>
+            </FieldLabel>
+          </RadioGroup>
+        </FieldSet>
+        <FieldSeparator />
+        <Field orientation="horizontal">
+          <FieldContent>
+            <FieldLabel htmlFor="number-of-gpus-f6l">Number of GPUs</FieldLabel>
+            <FieldDescription>You can add more later.</FieldDescription>
+          </FieldContent>
+          <ButtonGroup>
+            <Input
+              id="number-of-gpus-f6l"
+              value={gpuCount}
+              onChange={handleGpuInputChange}
+              size={3}
+              className="h-7 w-14! font-mono"
+              maxLength={3}
+            />
+            <Button
+              variant="outline"
+              size="icon-sm"
+              type="button"
+              aria-label="Decrement"
+              onClick={() => handleGpuAdjustment(-1)}
+              disabled={gpuCount <= 1}
+            >
+              <IconMinus />
+            </Button>
+            <Button
+              variant="outline"
+              size="icon-sm"
+              type="button"
+              aria-label="Increment"
+              onClick={() => handleGpuAdjustment(1)}
+              disabled={gpuCount >= 99}
+            >
+              <IconPlus />
+            </Button>
+          </ButtonGroup>
+        </Field>
+        <FieldSeparator />
+        <Field orientation="horizontal">
+          <FieldContent>
+            <FieldLabel htmlFor="tinting">Wallpaper Tinting</FieldLabel>
+            <FieldDescription>
+              Allow the wallpaper to be tinted.
+            </FieldDescription>
+          </FieldContent>
+          <Switch id="tinting" defaultChecked />
+        </Field>
+      </FieldGroup>
+    </FieldSet>
+  )
+}

apps/v4/app/(app)/(root)/components/button-group-demo.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import * as React from "react"
+import {
+  ArchiveIcon,
+  ArrowLeftIcon,
+  CalendarPlusIcon,
+  ClockIcon,
+  ListFilterIcon,
+  MailCheckIcon,
+  MoreHorizontalIcon,
+  TagIcon,
+  Trash2Icon,
+} from "lucide-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/styles/radix-nova/ui/dropdown-menu"
+
+export function ButtonGroupDemo() {
+  const [label, setLabel] = React.useState("personal")
+
+  return (
+    <ButtonGroup>
+      <ButtonGroup className="hidden sm:flex">
+        <Button variant="outline" size="icon-sm" aria-label="Go Back">
+          <ArrowLeftIcon />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="sm">
+          Archive
+        </Button>
+        <Button variant="outline" size="sm">
+          Report
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="sm">
+          Snooze
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="icon-sm" aria-label="More Options">
+              <MoreHorizontalIcon />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <MailCheckIcon />
+                Mark as Read
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <ArchiveIcon />
+                Archive
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <ClockIcon />
+                Snooze
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CalendarPlusIcon />
+                Add to Calendar
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <ListFilterIcon />
+                Add to List
+              </DropdownMenuItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <TagIcon />
+                  Label As...
+                </DropdownMenuSubTrigger>
+                <DropdownMenuSubContent>
+                  <DropdownMenuRadioGroup
+                    value={label}
+                    onValueChange={setLabel}
+                  >
+                    <DropdownMenuRadioItem value="personal">
+                      Personal
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="work">
+                      Work
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="other">
+                      Other
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuSubContent>
+              </DropdownMenuSub>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem variant="destructive">
+                <Trash2Icon />
+                Trash
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}

apps/v4/app/(app)/(root)/components/button-group-input-group.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import { AudioLinesIcon, PlusIcon } from "lucide-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/styles/radix-nova/ui/input-group"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/styles/radix-nova/ui/tooltip"
+
+export function ButtonGroupInputGroup() {
+  const [voiceEnabled, setVoiceEnabled] = React.useState(false)
+  return (
+    <ButtonGroup className="[--radius:9999rem]">
+      <ButtonGroup>
+        <Button variant="outline" size="icon" aria-label="Add">
+          <PlusIcon />
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup className="flex-1">
+        <InputGroup>
+          <InputGroupInput
+            placeholder={
+              voiceEnabled ? "Record and send audio..." : "Send a message..."
+            }
+            disabled={voiceEnabled}
+          />
+          <InputGroupAddon align="inline-end">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <InputGroupButton
+                  onClick={() => setVoiceEnabled(!voiceEnabled)}
+                  data-active={voiceEnabled}
+                  className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
+                  aria-pressed={voiceEnabled}
+                  size="icon-xs"
+                  aria-label="Voice Mode"
+                >
+                  <AudioLinesIcon />
+                </InputGroupButton>
+              </TooltipTrigger>
+              <TooltipContent>Voice Mode</TooltipContent>
+            </Tooltip>
+          </InputGroupAddon>
+        </InputGroup>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}

apps/v4/app/(app)/(root)/components/button-group-nested.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
+
+export function ButtonGroupNested() {
+  return (
+    <ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="sm">
+          1
+        </Button>
+        <Button variant="outline" size="sm">
+          2
+        </Button>
+        <Button variant="outline" size="sm">
+          3
+        </Button>
+      </ButtonGroup>
+      <ButtonGroup>
+        <Button variant="outline" size="icon-sm" aria-label="Previous">
+          <ArrowLeftIcon />
+        </Button>
+        <Button variant="outline" size="icon-sm" aria-label="Next">
+          <ArrowRightIcon />
+        </Button>
+      </ButtonGroup>
+    </ButtonGroup>
+  )
+}

apps/v4/app/(app)/(root)/components/button-group-popover.tsx

@@ -0,0 +1,45 @@
+import { BotIcon, ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/styles/radix-nova/ui/popover"
+import { Separator } from "@/styles/radix-nova/ui/separator"
+import { Textarea } from "@/styles/radix-nova/ui/textarea"
+
+export function ButtonGroupPopover() {
+  return (
+    <ButtonGroup>
+      <Button variant="outline" size="sm">
+        <BotIcon /> Copilot
+      </Button>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="icon-sm" aria-label="Open Popover">
+            <ChevronDownIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="end" className="gap-0 rounded-xl p-0 text-sm">
+          <div className="px-4 py-3">
+            <div className="text-sm font-medium">Agent Tasks</div>
+          </div>
+          <Separator />
+          <div className="p-4 text-sm *:[p:not(:last-child)]:mb-2">
+            <Textarea
+              placeholder="Describe your task in natural language."
+              className="mb-4 resize-none"
+            />
+            <p className="font-medium">Start a new task with Copilot</p>
+            <p className="text-muted-foreground">
+              Describe your task in natural language. Copilot will work in the
+              background and open a pull request for your review.
+            </p>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </ButtonGroup>
+  )
+}

apps/v4/app/(app)/(root)/components/empty-avatar-group.tsx

@@ -0,0 +1,58 @@
+import { PlusIcon } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/styles/radix-nova/ui/avatar"
+import { Button } from "@/styles/radix-nova/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/styles/radix-nova/ui/empty"
+
+export function EmptyAvatarGroup() {
+  return (
+    <Empty className="flex-none border py-10">
+      <EmptyHeader>
+        <EmptyMedia>
+          <AvatarGroup className="grayscale">
+            <Avatar>
+              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <Avatar>
+              <AvatarImage
+                src="https://github.com/maxleiter.png"
+                alt="@maxleiter"
+              />
+              <AvatarFallback>LR</AvatarFallback>
+            </Avatar>
+            <Avatar>
+              <AvatarImage
+                src="https://github.com/evilrabbit.png"
+                alt="@evilrabbit"
+              />
+              <AvatarFallback>ER</AvatarFallback>
+            </Avatar>
+          </AvatarGroup>
+        </EmptyMedia>
+        <EmptyTitle>No Team Members</EmptyTitle>
+        <EmptyDescription>
+          Invite your team to collaborate on this project.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button size="sm">
+          <PlusIcon />
+          Invite Members
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}

apps/v4/app/(app)/(root)/components/empty-input-group.tsx

@@ -0,0 +1,43 @@
+import { SearchIcon } from "lucide-react"
+
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/registry/new-york-v4/ui/empty"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/registry/new-york-v4/ui/input-group"
+import { Kbd } from "@/registry/new-york-v4/ui/kbd"
+
+export function EmptyInputGroup() {
+  return (
+    <Empty>
+      <EmptyHeader>
+        <EmptyTitle>404 - Not Found</EmptyTitle>
+        <EmptyDescription>
+          The page you&apos;re looking for doesn&apos;t exist. Try searching for
+          what you need below.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <InputGroup className="w-3/4">
+          <InputGroupInput placeholder="Try searching for pages..." />
+          <InputGroupAddon>
+            <SearchIcon />
+          </InputGroupAddon>
+          <InputGroupAddon align="inline-end">
+            <Kbd>/</Kbd>
+          </InputGroupAddon>
+        </InputGroup>
+        <EmptyDescription>
+          Need help? <a href="#">Contact support</a>
+        </EmptyDescription>
+      </EmptyContent>
+    </Empty>
+  )
+}

apps/v4/app/(app)/(root)/components/field-checkbox.tsx

@@ -0,0 +1,15 @@
+import { Checkbox } from "@/styles/radix-nova/ui/checkbox"
+import { Field, FieldLabel } from "@/styles/radix-nova/ui/field"
+
+export function FieldCheckbox() {
+  return (
+    <FieldLabel htmlFor="checkbox-demo">
+      <Field orientation="horizontal">
+        <Checkbox id="checkbox-demo" defaultChecked />
+        <FieldLabel htmlFor="checkbox-demo" className="line-clamp-1">
+          I agree to the terms and conditions
+        </FieldLabel>
+      </Field>
+    </FieldLabel>
+  )
+}

apps/v4/app/(app)/(root)/components/field-choice-card.tsx

@@ -0,0 +1,62 @@
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSet,
+  FieldTitle,
+} from "@/registry/new-york-v4/ui/field"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/new-york-v4/ui/radio-group"
+
+export function FieldChoiceCard() {
+  return (
+    <div className="w-full max-w-md">
+      <FieldGroup>
+        <FieldSet>
+          <FieldLabel htmlFor="compute-environment-p8w">
+            Compute Environment
+          </FieldLabel>
+          <FieldDescription>
+            Select the compute environment for your cluster.
+          </FieldDescription>
+          <RadioGroup defaultValue="kubernetes">
+            <FieldLabel htmlFor="kubernetes-r2h">
+              <Field orientation="horizontal">
+                <RadioGroupItem
+                  value="kubernetes"
+                  id="kubernetes-r2h"
+                  aria-label="Kubernetes"
+                />
+                <FieldContent>
+                  <FieldTitle>Kubernetes</FieldTitle>
+                  <FieldDescription>
+                    Run GPU workloads on a K8s configured cluster.
+                  </FieldDescription>
+                </FieldContent>
+              </Field>
+            </FieldLabel>
+            <FieldLabel htmlFor="vm-z4k">
+              <Field orientation="horizontal">
+                <RadioGroupItem
+                  value="vm"
+                  id="vm-z4k"
+                  aria-label="Virtual Machine"
+                />
+                <FieldContent>
+                  <FieldTitle>Virtual Machine</FieldTitle>
+                  <FieldDescription>
+                    Access a VM configured cluster to run workloads.
+                  </FieldDescription>
+                </FieldContent>
+              </Field>
+            </FieldLabel>
+          </RadioGroup>
+        </FieldSet>
+      </FieldGroup>
+    </div>
+  )
+}

apps/v4/app/(app)/(root)/components/field-demo.tsx

@@ -0,0 +1,158 @@
+import { Button } from "@/styles/radix-nova/ui/button"
+import { Checkbox } from "@/styles/radix-nova/ui/checkbox"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+} from "@/styles/radix-nova/ui/field"
+import { Input } from "@/styles/radix-nova/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/styles/radix-nova/ui/select"
+import { Textarea } from "@/styles/radix-nova/ui/textarea"
+
+export function FieldDemo() {
+  return (
+    <div className="w-full max-w-md rounded-xl border p-6">
+      <form>
+        <FieldGroup>
+          <FieldSet>
+            <FieldLegend>Payment Method</FieldLegend>
+            <FieldDescription>
+              All transactions are secure and encrypted
+            </FieldDescription>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="checkout-7j9-card-name-43j">
+                  Name on Card
+                </FieldLabel>
+                <Input
+                  id="checkout-7j9-card-name-43j"
+                  placeholder="John Doe"
+                  required
+                />
+              </Field>
+              <div className="grid grid-cols-3 gap-4">
+                <Field className="col-span-2">
+                  <FieldLabel htmlFor="checkout-7j9-card-number-uw1">
+                    Card Number
+                  </FieldLabel>
+                  <Input
+                    id="checkout-7j9-card-number-uw1"
+                    placeholder="1234 5678 9012 3456"
+                    required
+                  />
+                  <FieldDescription>
+                    Enter your 16-digit number.
+                  </FieldDescription>
+                </Field>
+                <Field className="col-span-1">
+                  <FieldLabel htmlFor="checkout-7j9-cvv">CVV</FieldLabel>
+                  <Input id="checkout-7j9-cvv" placeholder="123" required />
+                </Field>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <Field>
+                  <FieldLabel htmlFor="checkout-7j9-exp-month-ts6">
+                    Month
+                  </FieldLabel>
+                  <Select defaultValue="">
+                    <SelectTrigger id="checkout-7j9-exp-month-ts6">
+                      <SelectValue placeholder="MM" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="01">01</SelectItem>
+                        <SelectItem value="02">02</SelectItem>
+                        <SelectItem value="03">03</SelectItem>
+                        <SelectItem value="04">04</SelectItem>
+                        <SelectItem value="05">05</SelectItem>
+                        <SelectItem value="06">06</SelectItem>
+                        <SelectItem value="07">07</SelectItem>
+                        <SelectItem value="08">08</SelectItem>
+                        <SelectItem value="09">09</SelectItem>
+                        <SelectItem value="10">10</SelectItem>
+                        <SelectItem value="11">11</SelectItem>
+                        <SelectItem value="12">12</SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+                <Field>
+                  <FieldLabel htmlFor="checkout-7j9-exp-year-f59">
+                    Year
+                  </FieldLabel>
+                  <Select defaultValue="">
+                    <SelectTrigger id="checkout-7j9-exp-year-f59">
+                      <SelectValue placeholder="YYYY" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectGroup>
+                        <SelectItem value="2024">2024</SelectItem>
+                        <SelectItem value="2025">2025</SelectItem>
+                        <SelectItem value="2026">2026</SelectItem>
+                        <SelectItem value="2027">2027</SelectItem>
+                        <SelectItem value="2028">2028</SelectItem>
+                        <SelectItem value="2029">2029</SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                </Field>
+              </div>
+            </FieldGroup>
+          </FieldSet>
+          <FieldSeparator />
+          <FieldSet>
+            <FieldLegend>Billing Address</FieldLegend>
+            <FieldDescription>
+              The billing address associated with your payment method
+            </FieldDescription>
+            <FieldGroup>
+              <Field orientation="horizontal">
+                <Checkbox
+                  id="checkout-7j9-same-as-shipping-wgm"
+                  defaultChecked
+                />
+                <FieldLabel
+                  htmlFor="checkout-7j9-same-as-shipping-wgm"
+                  className="font-normal"
+                >
+                  Same as shipping address
+                </FieldLabel>
+              </Field>
+            </FieldGroup>
+          </FieldSet>
+          <FieldSeparator />
+          <FieldSet>
+            <FieldGroup>
+              <Field>
+                <FieldLabel htmlFor="checkout-7j9-optional-comments">
+                  Comments
+                </FieldLabel>
+                <Textarea
+                  id="checkout-7j9-optional-comments"
+                  placeholder="Add any additional comments"
+                />
+              </Field>
+            </FieldGroup>
+          </FieldSet>
+          <Field orientation="horizontal">
+            <Button type="submit">Submit</Button>
+            <Button variant="outline" type="button">
+              Cancel
+            </Button>
+          </Field>
+        </FieldGroup>
+      </form>
+    </div>
+  )
+}

apps/v4/app/(app)/(root)/components/field-hear.tsx

@@ -0,0 +1,72 @@
+import { Card, CardContent } from "@/styles/radix-nova/ui/card"
+import { Checkbox } from "@/styles/radix-nova/ui/checkbox"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+  FieldTitle,
+} from "@/styles/radix-nova/ui/field"
+
+const options = [
+  {
+    label: "Social Media",
+    value: "social-media",
+  },
+
+  {
+    label: "Search Engine",
+    value: "search-engine",
+  },
+  {
+    label: "Referral",
+    value: "referral",
+  },
+  {
+    label: "Other",
+    value: "other",
+  },
+]
+
+export function FieldHear() {
+  return (
+    <Card className="py-4 shadow-none">
+      <CardContent className="px-4">
+        <form>
+          <FieldGroup>
+            <FieldSet className="gap-4">
+              <FieldLegend>How did you hear about us?</FieldLegend>
+              <FieldDescription className="line-clamp-1">
+                Select the option that best describes how you heard about us.
+              </FieldDescription>
+              <FieldGroup className="flex flex-row flex-wrap gap-2 [--radius:9999rem]">
+                {options.map((option) => (
+                  <FieldLabel
+                    htmlFor={option.value}
+                    key={option.value}
+                    className="w-fit!"
+                  >
+                    <Field
+                      orientation="horizontal"
+                      className="gap-1.5 overflow-hidden px-3! py-1.5! transition-all duration-100 ease-linear group-has-data-[state=checked]/field-label:px-2!"
+                    >
+                      <Checkbox
+                        value={option.value}
+                        id={option.value}
+                        defaultChecked={option.value === "social-media"}
+                        className="-ml-6 -translate-x-1 rounded-full transition-all duration-100 ease-linear data-[state=checked]:ml-0 data-[state=checked]:translate-x-0"
+                      />
+                      <FieldTitle>{option.label}</FieldTitle>
+                    </Field>
+                  </FieldLabel>
+                ))}
+              </FieldGroup>
+            </FieldSet>
+          </FieldGroup>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}

apps/v4/app/(app)/(root)/components/field-slider.tsx

@@ -0,0 +1,35 @@
+"use client"
+
+import { useState } from "react"
+
+import {
+  Field,
+  FieldDescription,
+  FieldTitle,
+} from "@/styles/radix-nova/ui/field"
+import { Slider } from "@/styles/radix-nova/ui/slider"
+
+export function FieldSlider() {
+  const [value, setValue] = useState([200, 800])
+  return (
+    <div className="w-full max-w-md">
+      <Field>
+        <FieldTitle>Price Range</FieldTitle>
+        <FieldDescription>
+          Set your budget range ($
+          <span className="font-medium tabular-nums">{value[0]}</span> -{" "}
+          <span className="font-medium tabular-nums">{value[1]}</span>).
+        </FieldDescription>
+        <Slider
+          value={value}
+          onValueChange={setValue}
+          max={1000}
+          min={0}
+          step={10}
+          className="mt-2 w-full"
+          aria-label="Price Range"
+        />
+      </Field>
+    </div>
+  )
+}

apps/v4/app/(app)/(root)/components/index.tsx

@@ -0,0 +1,52 @@
+import { FieldSeparator } from "@/styles/radix-nova/ui/field"
+
+import { AppearanceSettings } from "./appearance-settings"
+import { ButtonGroupDemo } from "./button-group-demo"
+import { ButtonGroupInputGroup } from "./button-group-input-group"
+import { ButtonGroupNested } from "./button-group-nested"
+import { ButtonGroupPopover } from "./button-group-popover"
+import { EmptyAvatarGroup } from "./empty-avatar-group"
+import { FieldCheckbox } from "./field-checkbox"
+import { FieldDemo } from "./field-demo"
+import { FieldHear } from "./field-hear"
+import { FieldSlider } from "./field-slider"
+import { InputGroupButtonExample } from "./input-group-button"
+import { InputGroupDemo } from "./input-group-demo"
+import { ItemDemo } from "./item-demo"
+import { NotionPromptForm } from "./notion-prompt-form"
+import { SpinnerBadge } from "./spinner-badge"
+import { SpinnerEmpty } from "./spinner-empty"
+
+export function RootComponents() {
+  return (
+    <div className="mx-auto grid gap-8 py-1 theme-container md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
+      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
+        <FieldDemo />
+      </div>
+      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
+        <EmptyAvatarGroup />
+        <SpinnerBadge />
+        <ButtonGroupInputGroup />
+        <FieldSlider />
+        <InputGroupDemo />
+      </div>
+      <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
+        <InputGroupButtonExample />
+        <ItemDemo />
+        <FieldSeparator className="my-4">Appearance Settings</FieldSeparator>
+        <AppearanceSettings />
+      </div>
+      <div className="order-first flex flex-col gap-6 lg:hidden xl:order-last xl:flex *:[div]:w-full *:[div]:max-w-full">
+        <NotionPromptForm />
+        <ButtonGroupDemo />
+        <FieldCheckbox />
+        <div className="flex justify-between gap-4">
+          <ButtonGroupNested />
+          <ButtonGroupPopover />
+        </div>
+        <FieldHear />
+        <SpinnerEmpty />
+      </div>
+    </div>
+  )
+}

apps/v4/app/(app)/(root)/components/input-group-button.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import { IconInfoCircle, IconStar } from "@tabler/icons-react"
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/styles/radix-nova/ui/input-group"
+import { Label } from "@/styles/radix-nova/ui/label"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/styles/radix-nova/ui/popover"
+
+export function InputGroupButtonExample() {
+  const [isFavorite, setIsFavorite] = React.useState(false)
+
+  return (
+    <div className="grid w-full max-w-sm gap-6">
+      <Label htmlFor="input-secure-19" className="sr-only">
+        Input Secure
+      </Label>
+      <InputGroup className="[--radius:9999px]">
+        <InputGroupInput id="input-secure-19" className="pl-0.5!" />
+        <Popover>
+          <PopoverTrigger asChild>
+            <InputGroupAddon>
+              <InputGroupButton
+                variant="secondary"
+                size="icon-xs"
+                aria-label="Info"
+              >
+                <IconInfoCircle />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </PopoverTrigger>
+          <PopoverContent
+            align="start"
+            alignOffset={10}
+            className="flex flex-col gap-1 rounded-xl text-sm"
+          >
+            <p className="font-medium">Your connection is not secure.</p>
+            <p>You should not enter any sensitive information on this site.</p>
+          </PopoverContent>
+        </Popover>
+        <InputGroupAddon className="pl-1! text-muted-foreground">
+          https://
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            onClick={() => setIsFavorite(!isFavorite)}
+            size="icon-xs"
+            aria-label="Favorite"
+          >
+            <IconStar
+              data-favorite={isFavorite}
+              className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
+            />
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}

apps/v4/app/(app)/(root)/components/input-group-demo.tsx

@@ -0,0 +1,98 @@
+import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
+import { ArrowUpIcon, Search } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/styles/radix-nova/ui/dropdown-menu"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/styles/radix-nova/ui/input-group"
+import { Separator } from "@/styles/radix-nova/ui/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/styles/radix-nova/ui/tooltip"
+
+export function InputGroupDemo() {
+  return (
+    <div className="grid w-full max-w-sm gap-6">
+      <InputGroup>
+        <InputGroupInput placeholder="Search..." />
+        <InputGroupAddon>
+          <Search />
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupInput placeholder="example.com" className="pl-1!" />
+        <InputGroupAddon>
+          <InputGroupText>https://</InputGroupText>
+        </InputGroupAddon>
+        <InputGroupAddon align="inline-end">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <InputGroupButton
+                className="rounded-full"
+                size="icon-xs"
+                aria-label="Info"
+              >
+                <IconInfoCircle />
+              </InputGroupButton>
+            </TooltipTrigger>
+            <TooltipContent>This is content in a tooltip.</TooltipContent>
+          </Tooltip>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupTextarea placeholder="Ask, Search or Chat..." />
+        <InputGroupAddon align="block-end">
+          <InputGroupButton
+            variant="outline"
+            className="rounded-full"
+            size="icon-xs"
+            aria-label="Add"
+          >
+            <IconPlus />
+          </InputGroupButton>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <InputGroupButton variant="ghost">Auto</InputGroupButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent side="top" align="start">
+              <DropdownMenuItem>Auto</DropdownMenuItem>
+              <DropdownMenuItem>Agent</DropdownMenuItem>
+              <DropdownMenuItem>Manual</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <InputGroupText className="ml-auto">52% used</InputGroupText>
+          <Separator orientation="vertical" className="h-4!" />
+          <InputGroupButton
+            variant="default"
+            className="rounded-full"
+            size="icon-xs"
+          >
+            <ArrowUpIcon />
+            <span className="sr-only">Send</span>
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupInput placeholder="@shadcn" />
+        <InputGroupAddon align="inline-end">
+          <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
+            <IconCheck className="size-3 text-background" />
+          </div>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}

apps/v4/app/(app)/(root)/components/input-group-textarea.tsx

@@ -0,0 +1,46 @@
+import {
+  IconBrandJavascript,
+  IconCopy,
+  IconCornerDownLeft,
+  IconRefresh,
+} from "@tabler/icons-react"
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/registry/new-york-v4/ui/input-group"
+
+export function InputGroupTextareaExample() {
+  return (
+    <div className="grid w-full max-w-md gap-4">
+      <InputGroup>
+        <InputGroupTextarea
+          id="textarea-code-32"
+          placeholder="console.log('Hello, world!');"
+          className="min-h-[180px]"
+        />
+        <InputGroupAddon align="block-end" className="border-t">
+          <InputGroupText>Line 1, Column 1</InputGroupText>
+          <InputGroupButton size="sm" className="ml-auto" variant="default">
+            Run <IconCornerDownLeft />
+          </InputGroupButton>
+        </InputGroupAddon>
+        <InputGroupAddon align="block-start" className="border-b">
+          <InputGroupText className="font-mono font-medium">
+            <IconBrandJavascript />
+            script.js
+          </InputGroupText>
+          <InputGroupButton className="ml-auto">
+            <IconRefresh />
+          </InputGroupButton>
+          <InputGroupButton variant="ghost">
+            <IconCopy />
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}

apps/v4/app/(app)/(root)/components/item-avatar.tsx

@@ -0,0 +1,78 @@
+import { Plus } from "lucide-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/new-york-v4/ui/avatar"
+import { Button } from "@/registry/new-york-v4/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/registry/new-york-v4/ui/item"
+
+export function ItemAvatar() {
+  return (
+    <div className="flex w-full max-w-lg flex-col gap-6">
+      <Item variant="outline" className="hidden">
+        <ItemMedia>
+          <Avatar className="size-10">
+            <AvatarImage src="https://github.com/maxleiter.png" />
+            <AvatarFallback>LR</AvatarFallback>
+          </Avatar>
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Max Leiter</ItemTitle>
+          <ItemDescription>Last seen 5 months ago</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button
+            size="icon-sm"
+            variant="outline"
+            className="rounded-full"
+            aria-label="Invite"
+          >
+            <Plus />
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia>
+          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
+            <Avatar className="hidden sm:flex">
+              <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+              <AvatarFallback>CN</AvatarFallback>
+            </Avatar>
+            <Avatar className="hidden sm:flex">
+              <AvatarImage
+                src="https://github.com/maxleiter.png"
+                alt="@maxleiter"
+              />
+              <AvatarFallback>LR</AvatarFallback>
+            </Avatar>
+            <Avatar>
+              <AvatarImage
+                src="https://github.com/evilrabbit.png"
+                alt="@evilrabbit"
+              />
+              <AvatarFallback>ER</AvatarFallback>
+            </Avatar>
+          </div>
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>No Team Members</ItemTitle>
+          <ItemDescription>Invite your team to collaborate.</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm" variant="outline">
+            Invite
+          </Button>
+        </ItemActions>
+      </Item>
+    </div>
+  )
+}

apps/v4/app/(app)/(root)/components/item-demo.tsx

@@ -0,0 +1,42 @@
+import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
+
+import { Button } from "@/styles/radix-nova/ui/button"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@/styles/radix-nova/ui/item"
+
+export function ItemDemo() {
+  return (
+    <div className="flex w-full max-w-md flex-col gap-6">
+      <Item variant="outline">
+        <ItemContent>
+          <ItemTitle>Two-factor authentication</ItemTitle>
+          <ItemDescription className="text-pretty xl:hidden 2xl:block">
+            Verify via email or phone number.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button size="sm">Enable</Button>
+        </ItemActions>
+      </Item>
+      <Item variant="outline" size="sm" asChild>
+        <a href="#">
+          <ItemMedia>
+            <BadgeCheckIcon className="size-5" />
+          </ItemMedia>
+          <ItemContent>
+            <ItemTitle>Your profile has been verified.</ItemTitle>
+          </ItemContent>
+          <ItemActions>
+            <ChevronRightIcon className="size-4" />
+          </ItemActions>
+        </a>
+      </Item>
+    </div>
+  )
+}

apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx

@@ -0,0 +1,453 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import {
+  IconApps,
+  IconArrowUp,
+  IconAt,
+  IconBook,
+  IconCircleDashedPlus,
+  IconPaperclip,
+  IconPlus,
+  IconWorld,
+  IconX,
+} from "@tabler/icons-react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/styles/radix-nova/ui/avatar"
+import { Badge } from "@/styles/radix-nova/ui/badge"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/styles/radix-nova/ui/command"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/styles/radix-nova/ui/dropdown-menu"
+import { Field, FieldLabel } from "@/styles/radix-nova/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@/styles/radix-nova/ui/input-group"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/styles/radix-nova/ui/popover"
+import { Switch } from "@/styles/radix-nova/ui/switch"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/styles/radix-nova/ui/tooltip"
+
+const SAMPLE_DATA = {
+  mentionable: [
+    {
+      type: "page",
+      title: "Meeting Notes",
+      image: "📝",
+    },
+    {
+      type: "page",
+      title: "Project Dashboard",
+      image: "📊",
+    },
+    {
+      type: "page",
+      title: "Ideas & Brainstorming",
+      image: "💡",
+    },
+    {
+      type: "page",
+      title: "Calendar & Events",
+      image: "📅",
+    },
+    {
+      type: "page",
+      title: "Documentation",
+      image: "📚",
+    },
+    {
+      type: "page",
+      title: "Goals & Objectives",
+      image: "🎯",
+    },
+    {
+      type: "page",
+      title: "Budget Planning",
+      image: "💰",
+    },
+    {
+      type: "page",
+      title: "Team Directory",
+      image: "👥",
+    },
+    {
+      type: "page",
+      title: "Technical Specs",
+      image: "🔧",
+    },
+    {
+      type: "page",
+      title: "Analytics Report",
+      image: "📈",
+    },
+    {
+      type: "user",
+      title: "shadcn",
+      image: "https://github.com/shadcn.png",
+      workspace: "Workspace",
+    },
+    {
+      type: "user",
+      title: "maxleiter",
+      image: "https://github.com/maxleiter.png",
+      workspace: "Workspace",
+    },
+    {
+      type: "user",
+      title: "evilrabbit",
+      image: "https://github.com/evilrabbit.png",
+      workspace: "Workspace",
+    },
+  ],
+  models: [
+    {
+      name: "Auto",
+    },
+    {
+      name: "Agent Mode",
+      badge: "Beta",
+    },
+    {
+      name: "Plan Mode",
+    },
+  ],
+}
+
+function MentionableIcon({
+  item,
+}: {
+  item: (typeof SAMPLE_DATA.mentionable)[0]
+}) {
+  return item.type === "page" ? (
+    <span className="flex size-4 items-center justify-center">
+      {item.image}
+    </span>
+  ) : (
+    <Avatar className="size-4">
+      <AvatarImage src={item.image} />
+      <AvatarFallback>{item.title[0]}</AvatarFallback>
+    </Avatar>
+  )
+}
+
+export function NotionPromptForm() {
+  const [mentions, setMentions] = useState<string[]>([])
+  const [mentionPopoverOpen, setMentionPopoverOpen] = useState(false)
+  const [modelPopoverOpen, setModelPopoverOpen] = useState(false)
+  const [selectedModel, setSelectedModel] = useState<
+    (typeof SAMPLE_DATA.models)[0]
+  >(SAMPLE_DATA.models[0])
+  const [scopeMenuOpen, setScopeMenuOpen] = useState(false)
+
+  const grouped = useMemo(() => {
+    return SAMPLE_DATA.mentionable.reduce(
+      (acc, item) => {
+        const isAvailable = !mentions.includes(item.title)
+
+        if (isAvailable) {
+          if (!acc[item.type]) {
+            acc[item.type] = []
+          }
+          acc[item.type].push(item)
+        }
+        return acc
+      },
+      {} as Record<string, typeof SAMPLE_DATA.mentionable>
+    )
+  }, [mentions])
+
+  const hasMentions = mentions.length > 0
+
+  return (
+    <form>
+      <Field>
+        <FieldLabel htmlFor="notion-prompt" className="sr-only">
+          Prompt
+        </FieldLabel>
+        <InputGroup className="rounded-xl">
+          <InputGroupTextarea
+            id="notion-prompt"
+            placeholder="Ask, search, or make anything..."
+          />
+          <InputGroupAddon align="block-start" className="pt-3">
+            <Popover
+              open={mentionPopoverOpen}
+              onOpenChange={setMentionPopoverOpen}
+            >
+              <Tooltip>
+                <TooltipTrigger
+                  asChild
+                  onFocusCapture={(e) => e.stopPropagation()}
+                >
+                  <PopoverTrigger asChild>
+                    <InputGroupButton
+                      variant="outline"
+                      size={!hasMentions ? "sm" : "icon-sm"}
+                      className="transition-transform"
+                    >
+                      <IconAt /> {!hasMentions && "Add context"}
+                    </InputGroupButton>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <TooltipContent>Mention a person, page, or date</TooltipContent>
+              </Tooltip>
+              <PopoverContent className="p-0" align="start">
+                <Command>
+                  <CommandInput placeholder="Search pages..." />
+                  <CommandList>
+                    <CommandEmpty>No pages found</CommandEmpty>
+                    {Object.entries(grouped).map(([type, items]) => (
+                      <CommandGroup
+                        key={type}
+                        heading={type === "page" ? "Pages" : "Users"}
+                      >
+                        {items.map((item) => (
+                          <CommandItem
+                            key={item.title}
+                            value={item.title}
+                            onSelect={(currentValue) => {
+                              setMentions((prev) => [...prev, currentValue])
+                              setMentionPopoverOpen(false)
+                            }}
+                            className="rounded-lg"
+                          >
+                            <MentionableIcon item={item} />
+                            {item.title}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    ))}
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
+              {mentions.map((mention) => {
+                const item = SAMPLE_DATA.mentionable.find(
+                  (item) => item.title === mention
+                )
+
+                if (!item) {
+                  return null
+                }
+
+                return (
+                  <InputGroupButton
+                    key={mention}
+                    size="sm"
+                    variant="secondary"
+                    className="rounded-full pl-2!"
+                    onClick={() => {
+                      setMentions((prev) => prev.filter((m) => m !== mention))
+                    }}
+                  >
+                    <MentionableIcon item={item} />
+                    {item.title}
+                    <IconX />
+                  </InputGroupButton>
+                )
+              })}
+            </div>
+          </InputGroupAddon>
+          <InputGroupAddon align="block-end" className="gap-1">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <InputGroupButton
+                  size="icon-sm"
+                  className="rounded-full"
+                  aria-label="Attach file"
+                >
+                  <IconPaperclip />
+                </InputGroupButton>
+              </TooltipTrigger>
+              <TooltipContent>Attach file</TooltipContent>
+            </Tooltip>
+            <DropdownMenu
+              open={modelPopoverOpen}
+              onOpenChange={setModelPopoverOpen}
+            >
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <InputGroupButton size="sm" className="rounded-full">
+                      {selectedModel.name}
+                    </InputGroupButton>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent>Select AI model</TooltipContent>
+              </Tooltip>
+              <DropdownMenuContent
+                side="top"
+                align="start"
+                className="min-w-48"
+              >
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                    Select Agent Mode
+                  </DropdownMenuLabel>
+                  {SAMPLE_DATA.models.map((model) => (
+                    <DropdownMenuCheckboxItem
+                      key={model.name}
+                      checked={model.name === selectedModel.name}
+                      onCheckedChange={(checked) => {
+                        if (checked) {
+                          setSelectedModel(model)
+                        }
+                      }}
+                      className="pl-2 *:[span:first-child]:right-2 *:[span:first-child]:left-auto"
+                    >
+                      {model.name}
+                      {model.badge && (
+                        <Badge
+                          variant="secondary"
+                          className="h-5 rounded-sm bg-blue-100 px-1 text-xs text-blue-800 dark:bg-blue-900 dark:text-blue-100"
+                        >
+                          {model.badge}
+                        </Badge>
+                      )}
+                    </DropdownMenuCheckboxItem>
+                  ))}
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <DropdownMenu open={scopeMenuOpen} onOpenChange={setScopeMenuOpen}>
+              <DropdownMenuTrigger asChild>
+                <InputGroupButton size="sm" className="rounded-full">
+                  <IconWorld /> All Sources
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent side="top" align="end" className="w-72">
+                <DropdownMenuGroup>
+                  <DropdownMenuItem
+                    asChild
+                    onSelect={(e) => e.preventDefault()}
+                  >
+                    <label htmlFor="web-search">
+                      <IconWorld /> Web Search{" "}
+                      <Switch
+                        id="web-search"
+                        className="ml-auto"
+                        defaultChecked
+                      />
+                    </label>
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem
+                    asChild
+                    onSelect={(e) => e.preventDefault()}
+                  >
+                    <label htmlFor="apps">
+                      <IconApps /> Apps and Integrations
+                      <Switch id="apps" className="ml-auto" defaultChecked />
+                    </label>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <IconCircleDashedPlus /> All Sources I can access
+                  </DropdownMenuItem>
+                  <DropdownMenuSub>
+                    <DropdownMenuSubTrigger>
+                      <Avatar className="size-4">
+                        <AvatarImage src="https://github.com/shadcn.png" />
+                        <AvatarFallback>CN</AvatarFallback>
+                      </Avatar>
+                      shadcn
+                    </DropdownMenuSubTrigger>
+                    <DropdownMenuSubContent className="w-72 p-0 [--radius:1rem]">
+                      <Command>
+                        <CommandInput
+                          placeholder="Find or use knowledge in..."
+                          autoFocus
+                        />
+                        <CommandList>
+                          <CommandEmpty>No knowledge found</CommandEmpty>
+                          <CommandGroup>
+                            {SAMPLE_DATA.mentionable
+                              .filter((item) => item.type === "user")
+                              .map((user) => (
+                                <CommandItem
+                                  key={user.title}
+                                  value={user.title}
+                                  onSelect={() => {
+                                    // Handle user selection here
+                                    console.log("Selected user:", user.title)
+                                  }}
+                                >
+                                  <Avatar className="size-4">
+                                    <AvatarImage src={user.image} />
+                                    <AvatarFallback>
+                                      {user.title[0]}
+                                    </AvatarFallback>
+                                  </Avatar>
+                                  {user.title}{" "}
+                                  <span className="text-muted-foreground">
+                                    - {user.workspace}
+                                  </span>
+                                </CommandItem>
+                              ))}
+                          </CommandGroup>
+                        </CommandList>
+                      </Command>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuSub>
+                  <DropdownMenuItem>
+                    <IconBook /> Help Center
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    <IconPlus /> Connect Apps
+                  </DropdownMenuItem>
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
+                    We&apos;ll only search in the sources selected here.
+                  </DropdownMenuLabel>
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <InputGroupButton
+              aria-label="Send"
+              className="ml-auto rounded-full"
+              variant="default"
+              size="icon-sm"
+            >
+              <IconArrowUp />
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </form>
+  )
+}

apps/v4/app/(app)/(root)/components/spinner-badge.tsx

@@ -0,0 +1,21 @@
+import { Badge } from "@/styles/radix-nova/ui/badge"
+import { Spinner } from "@/styles/radix-nova/ui/spinner"
+
+export function SpinnerBadge() {
+  return (
+    <div className="flex items-center gap-2">
+      <Badge>
+        <Spinner />
+        Syncing
+      </Badge>
+      <Badge variant="secondary">
+        <Spinner />
+        Updating
+      </Badge>
+      <Badge variant="outline">
+        <Spinner />
+        Loading
+      </Badge>
+    </div>
+  )
+}

apps/v4/app/(app)/(root)/components/spinner-empty.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@/styles/radix-nova/ui/button"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/styles/radix-nova/ui/empty"
+import { Spinner } from "@/styles/radix-nova/ui/spinner"
+
+export function SpinnerEmpty() {
+  return (
+    <Empty className="w-full border md:p-6">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <Spinner />
+        </EmptyMedia>
+        <EmptyTitle>Processing your request</EmptyTitle>
+        <EmptyDescription>
+          Please wait while we process your request. Do not refresh the page.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button variant="outline" size="sm">
+          Cancel
+        </Button>
+      </EmptyContent>
+    </Empty>
+  )
+}

apps/v4/app/(app)/(root)/page.tsx

@@ -1,9 +1,8 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Image from "next/image"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"
-import { CardsDemo } from "@/components/cards"
 import { ExamplesNav } from "@/components/examples-nav"
 import {
   PageActions,
@@ -15,9 +14,11 @@ import { PageNav } from "@/components/page-nav"
 import { ThemeSelector } from "@/components/theme-selector"
 import { Button } from "@/registry/new-york-v4/ui/button"
 
-const title = "Build your Component Library"
+import { RootComponents } from "./components"
+
+const title = "The Foundation for your Design System"
 const description =
-  "A set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code."
+  "A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code."
 
 export const dynamic = "force-static"
 export const revalidate = false
@@ -51,24 +52,20 @@ export default function IndexPage() {
     <div className="flex flex-1 flex-col">
       <PageHeader>
         <Announcement />
-        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
         <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
-          <Button asChild size="sm">
-            <Link href="/docs/installation">Get Started</Link>
+          <Button asChild size="sm" className="h-[31px] rounded-lg">
+            <Link href="/create">New Project</Link>
           </Button>
-          <Button asChild size="sm" variant="ghost">
-            <Link href="/blocks">Browse Blocks</Link>
+          <Button asChild size="sm" variant="ghost" className="rounded-lg">
+            <Link href="/docs/components">View Components</Link>
           </Button>
         </PageActions>
       </PageHeader>
-      <PageNav className="hidden md:flex">
-        <ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
-        <ThemeSelector className="mr-4 hidden md:flex" />
-      </PageNav>
-      <div className="container-wrapper section-soft flex-1 pb-6">
+      <div className="container-wrapper flex-1 pb-6">
         <div className="container overflow-hidden">
-          <section className="border-border/50 -mx-4 w-[160vw] overflow-hidden rounded-lg border md:hidden md:w-[150vw]">
+          <section className="-mx-4 w-[160vw] overflow-hidden rounded-lg border border-border/50 md:hidden md:w-[150vw]">
             <Image
               src="/r/styles/new-york-v4/dashboard-01-light.png"
               width={1400}
@@ -86,8 +83,8 @@ export default function IndexPage() {
               priority
             />
           </section>
-          <section className="theme-container hidden md:block">
-            <CardsDemo />
+          <section className="hidden theme-container md:block">
+            <RootComponents />
           </section>
         </div>
       </div>

apps/v4/app/(app)/blocks/[...categories]/page.tsx

@@ -1,6 +1,7 @@
 import { getAllBlockIds } from "@/lib/blocks"
+import { registryCategories } from "@/lib/categories"
 import { BlockDisplay } from "@/components/block-display"
-import { registryCategories } from "@/registry/registry-categories"
+import { getActiveStyle } from "@/registry/_legacy-styles"
 
 export const revalidate = false
 export const dynamic = "force-static"
@@ -17,13 +18,16 @@ export default async function BlocksPage({
 }: {
   params: Promise<{ categories?: string[] }>
 }) {
-  const { categories = [] } = await params
+  const [{ categories = [] }, activeStyle] = await Promise.all([
+    params,
+    getActiveStyle(),
+  ])
   const blocks = await getAllBlockIds(["registry:block"], categories)
 
   return (
     <div className="flex flex-col gap-12 md:gap-24">
       {blocks.map((name) => (
-        <BlockDisplay name={name} key={name} />
+        <BlockDisplay name={name} key={name} styleName={activeStyle.name} />
       ))}
     </div>
   )

apps/v4/app/(app)/blocks/layout.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"
@@ -56,7 +56,7 @@ export default function BlocksLayout({
             <a href="#blocks">Browse Blocks</a>
           </Button>
           <Button asChild variant="ghost" size="sm">
-            <Link href="/docs/blocks">Add a block</Link>
+            <Link href="/docs/components">View Components</Link>
           </Button>
         </PageActions>
       </PageHeader>
@@ -71,7 +71,7 @@ export default function BlocksLayout({
           <Link href="/blocks/sidebar">Browse all blocks</Link>
         </Button>
       </PageNav>
-      <div className="container-wrapper section-soft flex-1 md:py-12">
+      <div className="container-wrapper flex-1 section-soft md:py-12">
         <div className="container">{children}</div>
       </div>
     </>

apps/v4/app/(app)/blocks/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link"
 
 import { BlockDisplay } from "@/components/block-display"
+import { getActiveStyle } from "@/registry/_legacy-styles"
 import { Button } from "@/registry/new-york-v4/ui/button"
 
 export const dynamic = "force-static"
@@ -15,10 +16,12 @@ const FEATURED_BLOCKS = [
 ]
 
 export default async function BlocksPage() {
+  const activeStyle = await getActiveStyle()
+
   return (
     <div className="flex flex-col gap-12 md:gap-24">
       {FEATURED_BLOCKS.map((name) => (
-        <BlockDisplay name={name} key={name} />
+        <BlockDisplay name={name} key={name} styleName={activeStyle.name} />
       ))}
       <div className="container-wrapper">
         <div className="container flex justify-center py-6">

apps/v4/app/(app)/charts/[type]/page.tsx

@@ -2,7 +2,12 @@ import * as React from "react"
 import { notFound } from "next/navigation"
 
 import { cn } from "@/lib/utils"
-import { ChartDisplay } from "@/components/chart-display"
+import {
+  ChartDisplay,
+  getCachedRegistryItem,
+  getChartHighlightedCode,
+} from "@/components/chart-display"
+import { getActiveStyle } from "@/registry/_legacy-styles"
 import { charts } from "@/app/(app)/charts/charts"
 
 export const revalidate = false
@@ -41,6 +46,27 @@ export default async function ChartPage({ params }: ChartPageProps) {
 
   const chartType = type as ChartType
   const chartList = charts[chartType]
+  const activeStyle = await getActiveStyle()
+
+  // Prefetch all chart data in parallel for better performance.
+  // Charts are rendered via iframes, so we only need the metadata and highlighted code.
+  const chartDataPromises = chartList.map(async (chart) => {
+    const registryItem = await getCachedRegistryItem(chart.id, activeStyle.name)
+    if (!registryItem) return null
+
+    const highlightedCode = await getChartHighlightedCode(
+      registryItem.files?.[0]?.content ?? ""
+    )
+    if (!highlightedCode) return null
+
+    return {
+      ...registryItem,
+      highlightedCode,
+      fullWidth: chart.fullWidth,
+    }
+  })
+
+  const prefetchedCharts = await Promise.all(chartDataPromises)
 
   return (
     <div className="grid flex-1 gap-12 lg:gap-24">
@@ -49,15 +75,14 @@ export default async function ChartPage({ params }: ChartPageProps) {
       </h2>
       <div className="grid flex-1 scroll-mt-20 items-stretch gap-10 md:grid-cols-2 md:gap-6 lg:grid-cols-3 xl:gap-10">
         {Array.from({ length: 12 }).map((_, index) => {
-          const chart = chartList[index]
+          const chart = prefetchedCharts[index]
           return chart ? (
             <ChartDisplay
-              key={chart.id}
-              name={chart.id}
+              key={chart.name}
+              chart={chart}
+              style={activeStyle.name}
               className={cn(chart.fullWidth && "md:col-span-2 lg:col-span-3")}
-            >
-              <chart.component />
-            </ChartDisplay>
+            />
           ) : (
             <div
               key={`empty-${index}`}

apps/v4/app/(app)/charts/charts.tsx

@@ -1,4 +1,4 @@
-import * as React from "react"
+import type * as React from "react"
 
 import { ChartAreaAxes } from "@/registry/new-york-v4/charts/chart-area-axes"
 import { ChartAreaDefault } from "@/registry/new-york-v4/charts/chart-area-default"

apps/v4/app/(app)/charts/layout.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"
@@ -63,9 +63,8 @@ export default function ChartsLayout({
       </PageHeader>
       <PageNav id="charts">
         <ChartsNav />
-        <ThemeSelector className="mr-4 hidden md:flex" />
       </PageNav>
-      <div className="container-wrapper section-soft flex-1">
+      <div className="container-wrapper flex-1">
         <div className="container pb-6">
           <section className="theme-container">{children}</section>
         </div>

apps/v4/app/(app)/colors/layout.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import { type Metadata } from "next"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"
@@ -62,7 +62,7 @@ export default function ColorsLayout({
       <div className="hidden">
         <div className="container-wrapper">
           <div className="container flex items-center justify-between gap-8 py-4">
-            <ColorsNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
+            <ColorsNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
           </div>
         </div>
       </div>

apps/v4/app/(app)/create/components/accent-picker.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import { MENU_ACCENTS, type MenuAccentValue } from "@/registry/config"
+import { LockButton } from "@/app/(app)/create/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+export function MenuAccentPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentAccent = MENU_ACCENTS.find(
+    (accent) => accent.value === params.menuAccent
+  )
+
+  return (
+    <div className="group/picker relative pr-3 md:pr-0">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Menu Accent</div>
+            <div className="text-sm font-medium text-foreground">
+              {currentAccent?.label}
+            </div>
+          </div>
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="128"
+              height="128"
+              viewBox="0 0 24 24"
+              fill="none"
+              className="size-4 text-foreground"
+            >
+              <path
+                d="M19 12.1294L12.9388 18.207C11.1557 19.9949 10.2641 20.8889 9.16993 20.9877C8.98904 21.0041 8.80705 21.0041 8.62616 20.9877C7.53195 20.8889 6.64039 19.9949 4.85726 18.207L2.83687 16.1811C1.72104 15.0622 1.72104 13.2482 2.83687 12.1294M19 12.1294L10.9184 4.02587M19 12.1294H2.83687M10.9184 4.02587L2.83687 12.1294M10.9184 4.02587L8.89805 2"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                data-accent={currentAccent?.value}
+                className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
+              ></path>
+              <path
+                d="M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 20 17 20 17C20 17 22 18.8954 22 20Z"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                data-accent={currentAccent?.value}
+                className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
+              ></path>
+            </svg>
+          </div>
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+        >
+          <PickerRadioGroup
+            value={currentAccent?.value}
+            onValueChange={(value) => {
+              setParams({ menuAccent: value as MenuAccentValue })
+            }}
+          >
+            <PickerGroup>
+              {MENU_ACCENTS.map((accent) => (
+                <PickerRadioItem
+                  key={accent.value}
+                  value={accent.value}
+                  closeOnClick={isMobile}
+                  disabled={
+                    accent.value === "bold" &&
+                    (params.menuColor === "default-translucent" ||
+                      params.menuColor === "inverted-translucent")
+                  }
+                >
+                  {accent.label}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="menuAccent"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
+      />
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/action-menu.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import Script from "next/script"
+import { type RegistryItem } from "shadcn/schema"
+
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/styles/base-nova/ui/command"
+import { useActionMenu } from "@/app/(app)/create/hooks/use-action-menu"
+
+export const CMD_K_FORWARD_TYPE = "cmd-k-forward"
+
+export function ActionMenu({
+  itemsByBase,
+}: {
+  itemsByBase: Record<string, Pick<RegistryItem, "name" | "title" | "type">[]>
+}) {
+  const {
+    activeRegistryName,
+    getCommandValue,
+    groups,
+    handleSelect,
+    open,
+    setOpen,
+  } = useActionMenu(itemsByBase)
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen} className="animate-none!">
+      <Command loop>
+        <CommandInput placeholder="Search" />
+        <CommandList>
+          <CommandEmpty>No items found.</CommandEmpty>
+          <CommandGroup>
+            {groups.map((group) =>
+              group.items.map((item) => (
+                <CommandItem
+                  key={item.id}
+                  value={getCommandValue(item)}
+                  data-checked={activeRegistryName === item.registryName}
+                  className="px-2"
+                  onSelect={() => {
+                    handleSelect(item.registryName)
+                  }}
+                >
+                  {item.label}
+                </CommandItem>
+              ))
+            )}
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </CommandDialog>
+  )
+}
+
+export function ActionMenuScript() {
+  return (
+    <Script
+      id="design-system-listener"
+      strategy="beforeInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+            (function() {
+              // Forward Cmd/Ctrl + K (and P) to parent
+              document.addEventListener('keydown', function(e) {
+                if ((e.key === 'k' || e.key === 'p') && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({
+                      type: '${CMD_K_FORWARD_TYPE}',
+                      key: e.key
+                    }, '*');
+                  }
+                }
+              });
+
+            })();
+          `,
+      }}
+    />
+  )
+}

apps/v4/app/(app)/create/components/base-color-picker.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+
+import { useMounted } from "@/hooks/use-mounted"
+import { BASE_COLORS, type BaseColorName } from "@/registry/config"
+import { LockButton } from "@/app/(app)/create/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+export function BaseColorPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const mounted = useMounted()
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentBaseColor = React.useMemo(
+    () => BASE_COLORS.find((baseColor) => baseColor.name === params.baseColor),
+    [params.baseColor]
+  )
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Base Color</div>
+            <div className="text-sm font-medium text-foreground">
+              {currentBaseColor?.title}
+            </div>
+          </div>
+          {mounted && (
+            <div
+              style={
+                {
+                  "--color":
+                    currentBaseColor?.cssVars?.dark?.["muted-foreground"],
+                } as React.CSSProperties
+              }
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2.5"
+            />
+          )}
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+        >
+          <PickerRadioGroup
+            value={currentBaseColor?.name}
+            onValueChange={(value) => {
+              setParams({ baseColor: value as BaseColorName })
+            }}
+          >
+            <PickerGroup>
+              {BASE_COLORS.map((baseColor) => (
+                <PickerRadioItem
+                  key={baseColor.name}
+                  value={baseColor.name}
+                  closeOnClick={isMobile}
+                >
+                  {baseColor.title}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="baseColor"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
+      />
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/base-picker.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import * as React from "react"
+
+import { BASES } from "@/registry/config"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+export function BasePicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentBase = React.useMemo(
+    () => BASES.find((base) => base.name === params.base),
+    [params.base]
+  )
+
+  const handleValueChange = React.useCallback(
+    (value: string) => {
+      const newBase = BASES.find((base) => base.name === value)
+      if (!newBase) {
+        return
+      }
+
+      setParams({ base: newBase.name })
+    },
+    [setParams]
+  )
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Base</div>
+            <div className="text-sm font-medium text-foreground">
+              {currentBase?.title}
+            </div>
+          </div>
+          {currentBase?.meta?.logo && (
+            <div
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 text-foreground select-none md:right-2.5 *:[svg]:size-4 *:[svg]:text-foreground!"
+              dangerouslySetInnerHTML={{
+                __html: currentBase.meta.logo,
+              }}
+            />
+          )}
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+        >
+          <PickerRadioGroup
+            value={currentBase?.name}
+            onValueChange={handleValueChange}
+          >
+            <PickerGroup>
+              {BASES.map((base) => (
+                <PickerRadioItem
+                  key={base.name}
+                  value={base.name}
+                  closeOnClick={isMobile}
+                >
+                  {base.title}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/chart-color-picker.tsx

@@ -0,0 +1,136 @@
+"use client"
+
+import * as React from "react"
+
+import { useMounted } from "@/hooks/use-mounted"
+import {
+  BASE_COLORS,
+  getThemesForBaseColor,
+  type ChartColorName,
+} from "@/registry/config"
+import { LockButton } from "@/app/(app)/create/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+export function ChartColorPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const mounted = useMounted()
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const availableChartColors = React.useMemo(
+    () => getThemesForBaseColor(params.baseColor),
+    [params.baseColor]
+  )
+
+  const currentChartColor = React.useMemo(
+    () =>
+      availableChartColors.find((theme) => theme.name === params.chartColor),
+    [availableChartColors, params.chartColor]
+  )
+
+  const currentChartColorIsBaseColor = React.useMemo(
+    () => BASE_COLORS.find((baseColor) => baseColor.name === params.chartColor),
+    [params.chartColor]
+  )
+
+  React.useEffect(() => {
+    if (!currentChartColor && availableChartColors.length > 0) {
+      setParams({ chartColor: availableChartColors[0].name })
+    }
+  }, [currentChartColor, availableChartColors, setParams])
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Chart Color</div>
+            <div className="text-sm font-medium text-foreground">
+              {currentChartColor?.title}
+            </div>
+          </div>
+          {mounted && (
+            <div
+              style={
+                {
+                  "--color":
+                    currentChartColor?.cssVars?.dark?.[
+                      currentChartColorIsBaseColor
+                        ? "muted-foreground"
+                        : "primary"
+                    ],
+                } as React.CSSProperties
+              }
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2.5"
+            />
+          )}
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+          className="max-h-92"
+        >
+          <PickerRadioGroup
+            value={currentChartColor?.name}
+            onValueChange={(value) => {
+              setParams({ chartColor: value as ChartColorName })
+            }}
+          >
+            <PickerGroup>
+              {availableChartColors
+                .filter((theme) =>
+                  BASE_COLORS.find((baseColor) => baseColor.name === theme.name)
+                )
+                .map((theme) => (
+                  <PickerRadioItem
+                    key={theme.name}
+                    value={theme.name}
+                    closeOnClick={isMobile}
+                  >
+                    {theme.title}
+                  </PickerRadioItem>
+                ))}
+            </PickerGroup>
+            <PickerSeparator />
+            <PickerGroup>
+              {availableChartColors
+                .filter(
+                  (theme) =>
+                    !BASE_COLORS.find(
+                      (baseColor) => baseColor.name === theme.name
+                    )
+                )
+                .map((theme) => (
+                  <PickerRadioItem
+                    key={theme.name}
+                    value={theme.name}
+                    closeOnClick={isMobile}
+                  >
+                    {theme.title}
+                  </PickerRadioItem>
+                ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="chartColor"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
+      />
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/copy-preset.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Button } from "@/styles/base-nova/ui/button"
+import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
+
+export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
+  const presetCode = usePresetCode()
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const handleCopy = React.useCallback(() => {
+    copyToClipboardWithMeta(`--preset ${presetCode}`, {
+      name: "copy_preset_command",
+      properties: {
+        preset: presetCode,
+      },
+    })
+    setHasCopied(true)
+  }, [presetCode])
+
+  return (
+    <Button
+      variant="outline"
+      onClick={handleCopy}
+      className={cn(
+        "touch-manipulation bg-transparent! px-2! py-0! text-sm! transition-none select-none hover:bg-muted! pointer-coarse:h-10!",
+        className
+      )}
+    >
+      <span>{hasCopied ? "Copied" : `--preset ${presetCode}`}</span>
+    </Button>
+  )
+}

apps/v4/app/(app)/create/components/customizer.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import * as React from "react"
+import dynamic from "next/dynamic"
+import { type RegistryItem } from "shadcn/schema"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { getThemesForBaseColor, STYLES } from "@/registry/config"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/styles/base-nova/ui/card"
+import { FieldGroup, FieldSeparator } from "@/styles/base-nova/ui/field"
+import { MenuAccentPicker } from "@/app/(app)/create/components/accent-picker"
+import { ActionMenu } from "@/app/(app)/create/components/action-menu"
+import { BaseColorPicker } from "@/app/(app)/create/components/base-color-picker"
+import { BasePicker } from "@/app/(app)/create/components/base-picker"
+import { ChartColorPicker } from "@/app/(app)/create/components/chart-color-picker"
+import { CopyPreset } from "@/app/(app)/create/components/copy-preset"
+import { FontPicker } from "@/app/(app)/create/components/font-picker"
+import { IconLibraryPicker } from "@/app/(app)/create/components/icon-library-picker"
+import { MainMenu } from "@/app/(app)/create/components/main-menu"
+import { MenuColorPicker } from "@/app/(app)/create/components/menu-picker"
+import { RadiusPicker } from "@/app/(app)/create/components/radius-picker"
+import { RandomButton } from "@/app/(app)/create/components/random-button"
+import { ResetDialog } from "@/app/(app)/create/components/reset-button"
+import { StylePicker } from "@/app/(app)/create/components/style-picker"
+import { ThemePicker } from "@/app/(app)/create/components/theme-picker"
+import { V0Button } from "@/app/(app)/create/components/v0-button"
+import { FONT_HEADING_OPTIONS, FONTS } from "@/app/(app)/create/lib/fonts"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+// Only visible when user clicks "Create Project".
+const ProjectForm = dynamic(() =>
+  import("@/app/(app)/create/components/project-form").then(
+    (m) => m.ProjectForm
+  )
+)
+
+export function Customizer({
+  itemsByBase,
+}: {
+  itemsByBase: Record<string, Pick<RegistryItem, "name" | "title" | "type">[]>
+}) {
+  const [params] = useDesignSystemSearchParams()
+  const isMobile = useIsMobile()
+  const anchorRef = React.useRef<HTMLDivElement | null>(null)
+
+  const availableThemes = React.useMemo(
+    () => getThemesForBaseColor(params.baseColor),
+    [params.baseColor]
+  )
+
+  return (
+    <Card
+      className="dark top-24 right-12 isolate z-10 max-h-full min-h-0 w-full self-start rounded-2xl bg-card/90 shadow-xl backdrop-blur-xl md:w-(--customizer-width)"
+      ref={anchorRef}
+      size="sm"
+    >
+      <CardHeader className="hidden items-center justify-between gap-2 border-b group-data-reversed/layout:flex-row-reverse md:flex">
+        <MainMenu />
+      </CardHeader>
+      <CardContent className="no-scrollbar min-h-0 flex-1 overflow-x-auto overflow-y-hidden md:overflow-y-auto">
+        <FieldGroup className="flex-row gap-2.5 py-px **:data-[slot=field-separator]:-mx-4 **:data-[slot=field-separator]:w-auto md:flex-col md:gap-3.25">
+          <StylePicker
+            styles={STYLES}
+            isMobile={isMobile}
+            anchorRef={anchorRef}
+          />
+          <FieldSeparator className="hidden md:block" />
+          <BaseColorPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <ThemePicker
+            themes={availableThemes}
+            isMobile={isMobile}
+            anchorRef={anchorRef}
+          />
+          <ChartColorPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <FieldSeparator className="hidden md:block" />
+          <FontPicker
+            label="Heading"
+            param="fontHeading"
+            fonts={FONT_HEADING_OPTIONS}
+            isMobile={isMobile}
+            anchorRef={anchorRef}
+          />
+          <FontPicker
+            label="Font"
+            param="font"
+            fonts={FONTS}
+            isMobile={isMobile}
+            anchorRef={anchorRef}
+          />
+          <FieldSeparator className="hidden md:block" />
+          <IconLibraryPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <RadiusPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <FieldSeparator className="hidden md:block" />
+          <MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
+          <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
+          {isMobile && <BasePicker isMobile={isMobile} anchorRef={anchorRef} />}
+        </FieldGroup>
+      </CardContent>
+      <CardFooter className="flex min-w-0 gap-2 md:flex-col md:rounded-b-none md:**:[button,a]:w-full">
+        <CopyPreset className="flex-1 md:flex-none" />
+        <RandomButton className="flex-1 md:flex-none" />
+        <ActionMenu itemsByBase={itemsByBase} />
+        <ResetDialog />
+      </CardFooter>
+      <CardFooter className="-mt-3 hidden min-w-0 gap-2 md:flex md:flex-col md:**:[button,a]:w-full">
+        <ProjectForm />
+      </CardFooter>
+    </Card>
+  )
+}

apps/v4/app/(app)/create/components/design-system-provider.tsx

@@ -0,0 +1,307 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  buildRegistryTheme,
+  DEFAULT_CONFIG,
+  type DesignSystemConfig,
+} from "@/registry/config"
+import { useIframeMessageListener } from "@/app/(app)/create/hooks/use-iframe-sync"
+import { FONTS } from "@/app/(app)/create/lib/fonts"
+import {
+  useDesignSystemSearchParams,
+  type DesignSystemSearchParams,
+} from "@/app/(app)/create/lib/search-params"
+
+const THEME_STYLE_ELEMENT_ID = "design-system-theme-vars"
+const MANAGED_BODY_CLASS_PREFIXES = ["style-", "base-color-"] as const
+
+type RegistryThemeCssVars = NonNullable<
+  ReturnType<typeof buildRegistryTheme>["cssVars"]
+>
+
+function removeManagedBodyClasses(body: Element) {
+  for (const className of Array.from(body.classList)) {
+    if (
+      MANAGED_BODY_CLASS_PREFIXES.some((prefix) => className.startsWith(prefix))
+    ) {
+      body.classList.remove(className)
+    }
+  }
+}
+
+function buildCssRule(selector: string, cssVars?: Record<string, string>) {
+  const declarations = Object.entries(cssVars ?? {})
+    .filter(([, value]) => Boolean(value))
+    .map(([key, value]) => `  --${key}: ${value};`)
+    .join("\n")
+
+  if (!declarations) {
+    return `${selector} {}\n`
+  }
+
+  return `${selector} {\n${declarations}\n}\n`
+}
+
+function buildThemeCssText(cssVars: RegistryThemeCssVars) {
+  return [
+    buildCssRule(":root", {
+      ...(cssVars.theme ?? {}),
+      ...(cssVars.light ?? {}),
+    }),
+    buildCssRule(".dark", cssVars.dark),
+  ].join("\n")
+}
+
+export function DesignSystemProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [searchParams, setSearchParams] = useDesignSystemSearchParams({
+    shallow: true, // No need to go through the server…
+    history: "replace", // …or push updates into the iframe history.
+  })
+  const [isReady, setIsReady] = React.useState(false)
+  const {
+    style,
+    theme,
+    font,
+    fontHeading,
+    baseColor,
+    chartColor,
+    menuAccent,
+    menuColor,
+    radius,
+  } = searchParams
+  const effectiveRadius = style === "lyra" ? "none" : radius
+  const selectedFont = React.useMemo(
+    () => FONTS.find((fontOption) => fontOption.value === font),
+    [font]
+  )
+  const selectedHeadingFont = React.useMemo(() => {
+    if (fontHeading === "inherit" || fontHeading === font) {
+      return selectedFont
+    }
+
+    return FONTS.find((fontOption) => fontOption.value === fontHeading)
+  }, [font, fontHeading, selectedFont])
+  const initialFontSansRef = React.useRef<string | null>(null)
+  const initialFontHeadingRef = React.useRef<string | null>(null)
+
+  React.useEffect(() => {
+    initialFontSansRef.current =
+      document.documentElement.style.getPropertyValue("--font-sans")
+    initialFontHeadingRef.current =
+      document.documentElement.style.getPropertyValue("--font-heading")
+
+    return () => {
+      removeManagedBodyClasses(document.body)
+      document.getElementById(THEME_STYLE_ELEMENT_ID)?.remove()
+
+      if (initialFontSansRef.current) {
+        document.documentElement.style.setProperty(
+          "--font-sans",
+          initialFontSansRef.current
+        )
+      } else {
+        document.documentElement.style.removeProperty("--font-sans")
+      }
+
+      if (initialFontHeadingRef.current) {
+        document.documentElement.style.setProperty(
+          "--font-heading",
+          initialFontHeadingRef.current
+        )
+      } else {
+        document.documentElement.style.removeProperty("--font-heading")
+      }
+    }
+  }, [])
+
+  const handleDesignSystemMessage = React.useCallback(
+    (nextParams: DesignSystemSearchParams) => {
+      setSearchParams(nextParams)
+    },
+    [setSearchParams]
+  )
+
+  useIframeMessageListener("design-system-params", handleDesignSystemMessage)
+
+  React.useEffect(() => {
+    if (style === "lyra" && radius !== "none") {
+      setSearchParams({ radius: "none" })
+    }
+  }, [style, radius, setSearchParams])
+
+  // Use useLayoutEffect for synchronous style updates to prevent flash.
+  React.useLayoutEffect(() => {
+    if (!style || !theme || !font || !baseColor) {
+      return
+    }
+
+    const body = document.body
+
+    // Iterate over a snapshot so removals do not affect traversal.
+    removeManagedBodyClasses(body)
+    body.classList.add(`style-${style}`, `base-color-${baseColor}`)
+
+    // Update font.
+    // Always set --font-sans for the preview so the selected font is visible.
+    // The font type (sans/serif/mono) is metadata for the CLI updater.
+    if (selectedFont) {
+      document.documentElement.style.setProperty(
+        "--font-sans",
+        selectedFont.font.style.fontFamily
+      )
+    }
+
+    if (selectedHeadingFont) {
+      document.documentElement.style.setProperty(
+        "--font-heading",
+        selectedHeadingFont.font.style.fontFamily
+      )
+    }
+
+    setIsReady(true)
+  }, [
+    style,
+    theme,
+    font,
+    fontHeading,
+    baseColor,
+    selectedFont,
+    selectedHeadingFont,
+  ])
+
+  const registryTheme = React.useMemo(() => {
+    if (!baseColor || !theme || !menuAccent || !effectiveRadius) {
+      return null
+    }
+
+    const config: DesignSystemConfig = {
+      ...DEFAULT_CONFIG,
+      baseColor,
+      theme,
+      chartColor,
+      menuAccent,
+      radius: effectiveRadius,
+    }
+
+    return buildRegistryTheme(config)
+  }, [baseColor, theme, chartColor, menuAccent, effectiveRadius])
+
+  // Use useLayoutEffect for synchronous CSS var updates.
+  React.useLayoutEffect(() => {
+    if (!registryTheme || !registryTheme.cssVars) {
+      return
+    }
+
+    let styleElement = document.getElementById(
+      THEME_STYLE_ELEMENT_ID
+    ) as HTMLStyleElement | null
+
+    if (!styleElement) {
+      styleElement = document.createElement("style")
+      styleElement.id = THEME_STYLE_ELEMENT_ID
+      document.head.appendChild(styleElement)
+    }
+
+    styleElement.textContent = buildThemeCssText(registryTheme.cssVars)
+  }, [registryTheme])
+
+  // Handle menu color inversion by adding/removing dark class to elements with cn-menu-target.
+  // useLayoutEffect to apply classes synchronously before paint, avoiding flash.
+  React.useLayoutEffect(() => {
+    if (!menuColor) {
+      return
+    }
+
+    const isInvertedMenu =
+      menuColor === "inverted" || menuColor === "inverted-translucent"
+    const isTranslucentMenu =
+      menuColor === "default-translucent" ||
+      menuColor === "inverted-translucent"
+    let frameId = 0
+
+    const updateMenuElements = () => {
+      const allElements = document.querySelectorAll<HTMLElement>(
+        ".cn-menu-target, [data-menu-translucent]"
+      )
+
+      if (allElements.length === 0) {
+        return
+      }
+
+      // Disable transitions while toggling classes.
+      allElements.forEach((element) => {
+        element.style.transition = "none"
+      })
+
+      allElements.forEach((element) => {
+        if (element.classList.contains("cn-menu-target")) {
+          if (isInvertedMenu) {
+            element.classList.add("dark")
+          } else {
+            element.classList.remove("dark")
+          }
+        }
+
+        // When translucent is enabled, move from data-attr to class so styles apply.
+        // When disabled, move back to a data-attr so the element stays queryable
+        // for future toggles without losing its identity as a menu element.
+        if (isTranslucentMenu) {
+          element.classList.add("cn-menu-translucent")
+          element.removeAttribute("data-menu-translucent")
+        } else if (element.classList.contains("cn-menu-translucent")) {
+          element.classList.remove("cn-menu-translucent")
+          element.setAttribute("data-menu-translucent", "")
+        }
+      })
+
+      // Force a reflow, then re-enable transitions.
+      void document.body.offsetHeight
+      allElements.forEach((element) => {
+        element.style.transition = ""
+      })
+    }
+
+    const scheduleMenuUpdate = () => {
+      if (frameId) {
+        return
+      }
+
+      frameId = window.requestAnimationFrame(() => {
+        frameId = 0
+        updateMenuElements()
+      })
+    }
+
+    // Update existing menu elements.
+    updateMenuElements()
+
+    // Watch for new menu elements being added to the DOM.
+    const observer = new MutationObserver(() => {
+      scheduleMenuUpdate()
+    })
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    })
+
+    return () => {
+      observer.disconnect()
+      if (frameId) {
+        window.cancelAnimationFrame(frameId)
+      }
+    }
+  }, [menuColor])
+
+  if (!isReady) {
+    return null
+  }
+
+  return <>{children}</>
+}

apps/v4/app/(app)/create/components/font-picker.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+
+import { LockButton } from "@/app/(app)/create/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerLabel,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import { FONTS } from "@/app/(app)/create/lib/fonts"
+import {
+  useDesignSystemSearchParams,
+  type DesignSystemSearchParams,
+} from "@/app/(app)/create/lib/search-params"
+
+type FontPickerOption = {
+  name: string
+  value: string
+  type: string
+  font: {
+    style: {
+      fontFamily: string
+    }
+  } | null
+}
+
+export function FontPicker({
+  label,
+  param,
+  fonts,
+  isMobile,
+  anchorRef,
+}: {
+  label: string
+  param: "font" | "fontHeading"
+  fonts: readonly FontPickerOption[]
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+  const currentValue = param === "font" ? params.font : params.fontHeading
+  const handleFontChange = React.useCallback(
+    (value: string) => {
+      setParams({
+        [param]: value,
+      } as Partial<DesignSystemSearchParams>)
+    },
+    [param, setParams]
+  )
+
+  const currentFont = React.useMemo(
+    () => fonts.find((font) => font.value === currentValue),
+    [fonts, currentValue]
+  )
+  const currentBodyFont = React.useMemo(
+    () => FONTS.find((font) => font.value === params.font),
+    [params.font]
+  )
+  const inheritsBodyFont = param === "fontHeading" && currentValue === "inherit"
+  const displayFontName = inheritsBodyFont
+    ? currentBodyFont?.name
+    : currentFont?.name
+  const inheritFontLabel = currentBodyFont ? currentBodyFont.name : "Body font"
+  const groupedFonts = React.useMemo(() => {
+    const pickerFonts =
+      param === "fontHeading"
+        ? fonts.filter((font) => font.value !== "inherit")
+        : fonts
+    const groups = new Map<string, FontPickerOption[]>()
+
+    for (const font of pickerFonts) {
+      const existing = groups.get(font.type)
+      if (existing) {
+        existing.push(font)
+        continue
+      }
+
+      groups.set(font.type, [font])
+    }
+
+    return Array.from(groups.entries()).map(([type, items]) => ({
+      type,
+      label: `${type.charAt(0).toUpperCase()}${type.slice(1)}`,
+      items,
+    }))
+  }, [fonts, param])
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">{label}</div>
+            <div className="line-clamp-1 max-w-[80%] truncate text-sm font-medium text-foreground">
+              {displayFontName}
+            </div>
+          </div>
+          <div
+            className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5"
+            style={{
+              fontFamily:
+                currentFont?.font?.style.fontFamily ??
+                currentBodyFont?.font.style.fontFamily,
+            }}
+          >
+            Aa
+          </div>
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+          className="max-h-96"
+        >
+          <PickerRadioGroup
+            value={currentValue}
+            onValueChange={handleFontChange}
+          >
+            {param === "fontHeading" ? (
+              <>
+                <PickerGroup>
+                  <PickerRadioItem value="inherit" closeOnClick={isMobile}>
+                    {inheritFontLabel}
+                  </PickerRadioItem>
+                </PickerGroup>
+                <PickerSeparator />
+              </>
+            ) : null}
+            {groupedFonts.map((group) => (
+              <PickerGroup key={group.type}>
+                <PickerLabel>{group.label}</PickerLabel>
+                {group.items.map((font) => (
+                  <PickerRadioItem
+                    key={font.value}
+                    value={font.value}
+                    closeOnClick={isMobile}
+                  >
+                    {font.name}
+                  </PickerRadioItem>
+                ))}
+              </PickerGroup>
+            ))}
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param={param}
+        className="absolute top-1/2 right-8 -translate-y-1/2"
+      />
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/history-buttons.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import Script from "next/script"
+import { Redo02Icon, Undo02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { Button } from "@/styles/base-nova/ui/button"
+import { useHistory } from "@/app/(app)/create/hooks/use-history"
+
+export const UNDO_FORWARD_TYPE = "undo-forward"
+export const REDO_FORWARD_TYPE = "redo-forward"
+
+export function HistoryButtons() {
+  const { canGoBack, canGoForward, goBack, goForward } = useHistory()
+
+  return (
+    <div className="flex items-center gap-1">
+      <Button
+        variant="ghost"
+        size="icon"
+        title="Undo"
+        disabled={!canGoBack}
+        onClick={goBack}
+      >
+        <HugeiconsIcon icon={Undo02Icon} />
+        <span className="sr-only">Undo</span>
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        title="Redo"
+        disabled={!canGoForward}
+        onClick={goForward}
+      >
+        <HugeiconsIcon icon={Redo02Icon} />
+        <span className="sr-only">Redo</span>
+      </Button>
+    </div>
+  )
+}
+
+export function HistoryScript() {
+  return (
+    <Script
+      id="history-listener"
+      strategy="beforeInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+            (function() {
+              document.addEventListener('keydown', function(e) {
+                if (!e.metaKey && !e.ctrlKey) return;
+                if (
+                  (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+                  e.target instanceof HTMLInputElement ||
+                  e.target instanceof HTMLTextAreaElement ||
+                  e.target instanceof HTMLSelectElement
+                ) {
+                  return;
+                }
+                var key = e.key.toLowerCase();
+                if ((key === 'z' && e.shiftKey) || (key === 'y' && e.ctrlKey)) {
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({ type: '${REDO_FORWARD_TYPE}' }, '*');
+                  }
+                } else if (key === 'z') {
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({ type: '${UNDO_FORWARD_TYPE}' }, '*');
+                  }
+                }
+              });
+            })();
+          `,
+      }}
+    />
+  )
+}

apps/v4/app/(app)/create/components/icon-library-picker.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import * as React from "react"
+
+import { iconLibraries, type IconLibraryName } from "@/registry/config"
+import { LockButton } from "@/app/(app)/create/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+const logos = {
+  lucide: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke="currentColor"
+        d="M14 12a4 4 0 0 0-8 0 8 8 0 1 0 16 0 11.97 11.97 0 0 0-4-8.944"
+      />
+      <path
+        stroke="currentColor"
+        d="M10 12a4 4 0 0 0 8 0 8 8 0 1 0-16 0 11.97 11.97 0 0 0 4.063 9"
+      />
+    </svg>
+  ),
+  tabler: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      fill="none"
+      viewBox="0 0 32 32"
+    >
+      <path
+        fill="currentColor"
+        d="M31.288 7.107A8.83 8.83 0 0 0 24.893.712a55.9 55.9 0 0 0-17.786 0A8.83 8.83 0 0 0 .712 7.107a55.9 55.9 0 0 0 0 17.786 8.83 8.83 0 0 0 6.395 6.395c5.895.95 11.89.95 17.786 0a8.83 8.83 0 0 0 6.395-6.395c.95-5.895.95-11.89 0-17.786"
+      />
+      <path
+        fill="#fff"
+        d="m17.884 9.076 1.5-2.488 6.97 6.977-2.492 1.494zm-7.96 3.127 7.814-.909 3.91 3.66-.974 7.287-9.582 2.159a3.06 3.06 0 0 1-2.17-.329l5.244-4.897c.91.407 2.003.142 2.587-.626.584-.77.488-1.818-.226-2.484s-1.84-.755-2.664-.21c-.823.543-1.107 1.562-.67 2.412l-5.245 4.89a2.53 2.53 0 0 1-.339-2.017z"
+      />
+    </svg>
+  ),
+  hugeicons: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="128"
+      height="128"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+    >
+      <path d="M2 9.5H22" stroke="currentColor"></path>
+      <path
+        d="M20.5 9.5H3.5L4.23353 15.3682C4.59849 18.2879 4.78097 19.7477 5.77343 20.6239C6.76589 21.5 8.23708 21.5 11.1795 21.5H12.8205C15.7629 21.5 17.2341 21.5 18.2266 20.6239C19.219 19.7477 19.4015 18.2879 19.7665 15.3682L20.5 9.5Z"
+        stroke="currentColor"
+      ></path>
+      <path
+        d="M5 9C5 5.41015 8.13401 2.5 12 2.5C15.866 2.5 19 5.41015 19 9"
+        stroke="currentColor"
+      ></path>
+    </svg>
+  ),
+  phosphor: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      width="32"
+      height="32"
+    >
+      <path fill="none" d="M0 0h32v32H0z" />
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M9 5h9v16H9zm9 16v9a9 9 0 0 1-9-9M9 5l9 16m0 0h1a8 8 0 0 0 0-16h-1"
+      />
+    </svg>
+  ),
+  remixicon: (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="24"
+      height="24"
+      fill="currentColor"
+    >
+      <path d="M12 2C17.5228 2 22 6.47715 22 12C22 15.3137 19.3137 18 16 18C12.6863 18 10 15.3137 10 12C10 11.4477 9.55228 11 9 11C8.44772 11 8 11.4477 8 12C8 16.4183 11.5817 20 16 20C16.8708 20 17.7084 19.8588 18.4932 19.6016C16.7458 21.0956 14.4792 22 12 22C6.6689 22 2.3127 17.8283 2.0166 12.5713C2.23647 9.45772 4.83048 7 8 7C11.3137 7 14 9.68629 14 13C14 13.5523 14.4477 14 15 14C15.5523 14 16 13.5523 16 13C16 8.58172 12.4183 5 8 5C6.50513 5 5.1062 5.41032 3.90918 6.12402C5.72712 3.62515 8.67334 2 12 2Z" />
+    </svg>
+  ),
+}
+
+export function IconLibraryPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentIconLibrary = React.useMemo(
+    () => iconLibraries[params.iconLibrary as keyof typeof iconLibraries],
+    [params.iconLibrary]
+  )
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Icon Library</div>
+            <div className="text-sm font-medium text-foreground">
+              {currentIconLibrary?.title}
+            </div>
+          </div>
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5 *:[svg]:text-foreground!">
+            {logos[currentIconLibrary?.name as keyof typeof logos]}
+          </div>
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+        >
+          <PickerRadioGroup
+            value={currentIconLibrary?.name}
+            onValueChange={(value) => {
+              setParams({ iconLibrary: value as IconLibraryName })
+            }}
+          >
+            <PickerGroup>
+              {Object.values(iconLibraries).map((iconLibrary) => (
+                <PickerRadioItem
+                  key={iconLibrary.name}
+                  value={iconLibrary.name}
+                  closeOnClick={isMobile}
+                >
+                  {iconLibrary.title}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="iconLibrary"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
+      />
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/icon-placeholder.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { lazy, Suspense } from "react"
+import { SquareIcon } from "lucide-react"
+import type { IconLibraryName } from "shadcn/icons"
+
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+const IconLucide = lazy(() =>
+  import("@/registry/icons/icon-lucide").then((mod) => ({
+    default: mod.IconLucide,
+  }))
+)
+
+const IconTabler = lazy(() =>
+  import("@/registry/icons/icon-tabler").then((mod) => ({
+    default: mod.IconTabler,
+  }))
+)
+
+const IconHugeicons = lazy(() =>
+  import("@/registry/icons/icon-hugeicons").then((mod) => ({
+    default: mod.IconHugeicons,
+  }))
+)
+
+const IconPhosphor = lazy(() =>
+  import("@/registry/icons/icon-phosphor").then((mod) => ({
+    default: mod.IconPhosphor,
+  }))
+)
+
+const IconRemixicon = lazy(() =>
+  import("@/registry/icons/icon-remixicon").then((mod) => ({
+    default: mod.IconRemixicon,
+  }))
+)
+
+// Preload all icon renderer modules so switching libraries is instant.
+// These warm the browser module cache; React.lazy resolves immediately
+// for modules that are already loaded.
+void import("@/registry/icons/icon-lucide")
+void import("@/registry/icons/icon-tabler")
+void import("@/registry/icons/icon-hugeicons")
+void import("@/registry/icons/icon-phosphor")
+void import("@/registry/icons/icon-remixicon")
+
+export function IconPlaceholder({
+  ...props
+}: {
+  [K in IconLibraryName]: string
+} & React.ComponentProps<"svg">) {
+  const [{ iconLibrary }] = useDesignSystemSearchParams()
+  const iconName = props[iconLibrary]
+
+  if (!iconName) {
+    return null
+  }
+
+  return (
+    <Suspense fallback={<SquareIcon {...props} />}>
+      {iconLibrary === "lucide" && <IconLucide name={iconName} {...props} />}
+      {iconLibrary === "tabler" && <IconTabler name={iconName} {...props} />}
+      {iconLibrary === "hugeicons" && (
+        <IconHugeicons name={iconName} {...props} />
+      )}
+      {iconLibrary === "phosphor" && (
+        <IconPhosphor name={iconName} {...props} />
+      )}
+      {iconLibrary === "remixicon" && (
+        <IconRemixicon name={iconName} {...props} />
+      )}
+    </Suspense>
+  )
+}

apps/v4/app/(app)/create/components/item-explorer.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react"
+import Link from "next/link"
+import { ChevronRightIcon } from "lucide-react"
+import { type RegistryItem } from "shadcn/schema"
+
+import { cn } from "@/lib/utils"
+import { type Base } from "@/registry/bases"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/styles/base-nova/ui/collapsible"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/styles/base-nova/ui/sidebar"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { groupItemsByType } from "@/app/(app)/create/lib/utils"
+
+const cachedGroupedItems = React.cache(
+  (items: Pick<RegistryItem, "name" | "title" | "type">[]) => {
+    return groupItemsByType(items)
+  }
+)
+
+export function ItemExplorer({
+  base,
+  items,
+}: {
+  base: Base["name"]
+  items: Pick<RegistryItem, "name" | "title" | "type">[]
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const groupedItems = React.useMemo(() => cachedGroupedItems(items), [items])
+
+  const currentItem = React.useMemo(
+    () => items.find((item) => item.name === params.item) ?? null,
+    [items, params.item]
+  )
+
+  return (
+    <Sidebar
+      className="sticky z-30 hidden h-full overscroll-none bg-transparent xl:flex"
+      collapsible="none"
+    >
+      <SidebarContent className="-mx-1 no-scrollbar overflow-x-hidden">
+        {groupedItems.map((group) => (
+          <Collapsible
+            key={group.type}
+            defaultOpen
+            className="group/collapsible"
+          >
+            <SidebarGroup className="px-1 py-0">
+              <CollapsibleTrigger className="flex w-full items-center gap-1 py-1.5 text-[0.8rem] font-medium [&[data-state=open]>svg]:rotate-90">
+                <ChevronRightIcon className="size-3.5 text-muted-foreground transition-transform" />
+                <span>{group.title}</span>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarGroupContent>
+                  <SidebarMenu className="relative ml-1.5 border-l border-border/50 pl-2">
+                    {group.items.map((item, index) => (
+                      <SidebarMenuItem key={item.name} className="relative">
+                        <div
+                          className={cn(
+                            "absolute top-1/2 -left-2 h-px w-2 border-t border-border/50",
+                            index === group.items.length - 1 && "bg-sidebar"
+                          )}
+                        />
+                        {index === group.items.length - 1 && (
+                          <div className="absolute top-1/2 -bottom-1 -left-2.5 w-1 bg-sidebar" />
+                        )}
+                        <SidebarMenuButton
+                          onClick={() => setParams({ item: item.name })}
+                          className="relative h-[26px] w-fit cursor-pointer overflow-visible border border-transparent text-[0.8rem] font-normal after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md data-[active=true]:border-accent data-[active=true]:bg-accent 3xl:fixed:w-full 3xl:fixed:max-w-48"
+                          data-active={item.name === currentItem?.name}
+                          isActive={item.name === currentItem?.name}
+                        >
+                          {item.title}
+                          <span className="absolute inset-0 flex w-(--sidebar-width) bg-transparent" />
+                        </SidebarMenuButton>
+                        <Link
+                          href={`/preview/${base}/${item.name}`}
+                          prefetch
+                          className="sr-only"
+                          tabIndex={-1}
+                        >
+                          {item.title}
+                        </Link>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </CollapsibleContent>
+            </SidebarGroup>
+          </Collapsible>
+        ))}
+      </SidebarContent>
+    </Sidebar>
+  )
+}

apps/v4/app/(app)/create/components/lock-button.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import {
+  SquareLock01Icon,
+  SquareUnlock01Icon,
+} from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { cn } from "@/lib/utils"
+import {
+  useLocks,
+  type LockableParam,
+} from "@/app/(app)/create/hooks/use-locks"
+
+export function LockButton({
+  param,
+  className,
+}: {
+  param: LockableParam
+  className?: string
+}) {
+  const { isLocked, toggleLock } = useLocks()
+  const locked = isLocked(param)
+
+  return (
+    <button
+      type="button"
+      title={locked ? "Unlock" : "Lock"}
+      aria-label={locked ? "Unlock" : "Lock"}
+      onClick={() => toggleLock(param)}
+      data-locked={locked}
+      className={cn(
+        "flex size-4 cursor-pointer items-center justify-center rounded opacity-0 ring-foreground/60 transition-opacity outline-none group-focus-within/picker:opacity-100 group-hover/picker:opacity-100 focus:opacity-100 focus-visible:ring-1 data-[locked=true]:opacity-100 pointer-coarse:hidden",
+        className
+      )}
+    >
+      <HugeiconsIcon
+        icon={locked ? SquareLock01Icon : SquareUnlock01Icon}
+        strokeWidth={2}
+        className="size-5 text-foreground"
+      />
+    </button>
+  )
+}

apps/v4/app/(app)/create/components/main-menu.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { Menu09Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { cn } from "@/lib/utils"
+import { type Button } from "@/styles/base-nova/ui/button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerItem,
+  PickerSeparator,
+  PickerShortcut,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import { useActionMenuTrigger } from "@/app/(app)/create/hooks/use-action-menu"
+import { useHistory } from "@/app/(app)/create/hooks/use-history"
+import { useRandom } from "@/app/(app)/create/hooks/use-random"
+import { useReset } from "@/app/(app)/create/hooks/use-reset"
+import { useThemeToggle } from "@/app/(app)/create/hooks/use-theme-toggle"
+
+const APPLE_PLATFORM_REGEX = /Mac|iPhone|iPad|iPod/
+
+export function MainMenu({ className }: React.ComponentProps<typeof Button>) {
+  const [isMac, setIsMac] = React.useState(false)
+  const { canGoBack, canGoForward, goBack, goForward } = useHistory()
+  const { openActionMenu } = useActionMenuTrigger()
+  const { randomize } = useRandom()
+  const { toggleTheme } = useThemeToggle()
+  const { setShowResetDialog } = useReset()
+
+  React.useEffect(() => {
+    const platform = navigator.platform
+    const userAgent = navigator.userAgent
+    setIsMac(APPLE_PLATFORM_REGEX.test(platform || userAgent))
+  }, [])
+
+  return (
+    <React.Fragment>
+      <Picker>
+        <PickerTrigger
+          className={cn(
+            "flex items-center justify-between gap-2 rounded-lg px-1.75 ring-1 ring-foreground/10 focus-visible:ring-1",
+            className
+          )}
+        >
+          <span className="font-medium">Menu</span>
+          <HugeiconsIcon icon={Menu09Icon} strokeWidth={2} className="size-5" />
+        </PickerTrigger>
+        <PickerContent side="right" align="start" alignOffset={-8}>
+          <PickerGroup>
+            <PickerItem onClick={openActionMenu}>
+              Navigate...
+              <PickerShortcut>{isMac ? "⌘P" : "Ctrl+P"}</PickerShortcut>
+            </PickerItem>
+            <PickerItem onClick={randomize}>
+              Shuffle <PickerShortcut>R</PickerShortcut>
+            </PickerItem>
+            <PickerItem onClick={toggleTheme}>
+              Light/Dark <PickerShortcut>D</PickerShortcut>
+            </PickerItem>
+          </PickerGroup>
+          <PickerSeparator />
+          <PickerGroup>
+            <PickerItem onClick={goBack} disabled={!canGoBack}>
+              Undo <PickerShortcut>{isMac ? "⌘Z" : "Ctrl+Z"}</PickerShortcut>
+            </PickerItem>
+            <PickerItem onClick={goForward} disabled={!canGoForward}>
+              Redo{" "}
+              <PickerShortcut>{isMac ? "⇧⌘Z" : "Ctrl+Shift+Z"}</PickerShortcut>
+            </PickerItem>
+            <PickerSeparator />
+            <PickerItem onClick={() => setShowResetDialog(true)}>
+              Reset <PickerShortcut>⇧R</PickerShortcut>
+            </PickerItem>
+          </PickerGroup>
+        </PickerContent>
+      </Picker>
+    </React.Fragment>
+  )
+}

apps/v4/app/(app)/create/components/menu-picker.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import * as React from "react"
+import { Menu02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+import { useTheme } from "next-themes"
+
+import { useMounted } from "@/hooks/use-mounted"
+import { type MenuColorValue } from "@/registry/config"
+import { LockButton } from "@/app/(app)/create/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerLabel,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import {
+  isTranslucentMenuColor,
+  useDesignSystemSearchParams,
+} from "@/app/(app)/create/lib/search-params"
+
+type ColorChoice = "default" | "inverted"
+type SurfaceChoice = "solid" | "translucent"
+
+function getMenuColorValue(
+  color: ColorChoice,
+  translucent: boolean
+): MenuColorValue {
+  if (color === "default") {
+    return translucent ? "default-translucent" : "default"
+  }
+
+  return translucent ? "inverted-translucent" : "inverted"
+}
+
+const MENU_OPTIONS: { value: MenuColorValue; label: string }[] = [
+  { value: "default", label: "Default / Solid" },
+  { value: "default-translucent", label: "Default / Translucent" },
+  { value: "inverted", label: "Inverted / Solid" },
+  { value: "inverted-translucent", label: "Inverted / Translucent" },
+]
+
+export function MenuColorPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+  const { resolvedTheme } = useTheme()
+  const mounted = useMounted()
+  const lastSolidMenuAccentRef = React.useRef(params.menuAccent)
+  const isDark = mounted && resolvedTheme === "dark"
+  const currentMenu = MENU_OPTIONS.find(
+    (menu) => menu.value === params.menuColor
+  )
+  const colorChoice: ColorChoice =
+    params.menuColor === "inverted" ||
+    params.menuColor === "inverted-translucent"
+      ? "inverted"
+      : "default"
+  const surfaceChoice: SurfaceChoice =
+    params.menuColor === "default-translucent" ||
+    params.menuColor === "inverted-translucent"
+      ? "translucent"
+      : "solid"
+
+  React.useEffect(() => {
+    if (surfaceChoice === "solid") {
+      lastSolidMenuAccentRef.current = params.menuAccent
+    }
+  }, [params.menuAccent, surfaceChoice])
+
+  const setColor = (color: ColorChoice) => {
+    const nextMenuColor = getMenuColorValue(
+      color,
+      surfaceChoice === "translucent"
+    )
+
+    setParams({
+      menuColor: nextMenuColor,
+      ...(isTranslucentMenuColor(nextMenuColor) && { menuAccent: "subtle" }),
+    })
+  }
+
+  const setSurface = (choice: SurfaceChoice) => {
+    const isTranslucent = choice === "translucent"
+    const nextMenuColor = getMenuColorValue(colorChoice, isTranslucent)
+
+    setParams({
+      menuColor: nextMenuColor,
+      menuAccent: isTranslucent ? "subtle" : lastSolidMenuAccentRef.current,
+    })
+  }
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Menu</div>
+            <div className="line-clamp-1 max-w-[80%] truncate text-sm font-medium text-foreground">
+              {currentMenu?.label}
+            </div>
+          </div>
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5">
+            <HugeiconsIcon
+              icon={Menu02Icon}
+              strokeWidth={2}
+              className="size-4"
+            />
+          </div>
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+        >
+          <PickerGroup>
+            <PickerLabel>Color</PickerLabel>
+            <PickerRadioGroup
+              value={colorChoice}
+              onValueChange={(value) => {
+                setColor(value as ColorChoice)
+              }}
+            >
+              <PickerRadioItem value="default" closeOnClick={isMobile}>
+                Default
+              </PickerRadioItem>
+              <PickerRadioItem
+                value="inverted"
+                closeOnClick={isMobile}
+                disabled={isDark}
+              >
+                Inverted
+              </PickerRadioItem>
+            </PickerRadioGroup>
+          </PickerGroup>
+          <PickerSeparator />
+          <PickerGroup>
+            <PickerLabel>Appearance</PickerLabel>
+            <PickerRadioGroup
+              value={surfaceChoice}
+              onValueChange={(value) => {
+                setSurface(value as SurfaceChoice)
+              }}
+            >
+              <PickerRadioItem value="solid" closeOnClick={isMobile}>
+                Solid
+              </PickerRadioItem>
+              <PickerRadioItem value="translucent" closeOnClick={isMobile}>
+                Translucent
+              </PickerRadioItem>
+            </PickerRadioGroup>
+          </PickerGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="menuColor"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
+      />
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/mode-switcher.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import Script from "next/script"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-nova/ui/button"
+import { useThemeToggle } from "@/app/(app)/create/hooks/use-theme-toggle"
+
+export const DARK_MODE_FORWARD_TYPE = "dark-mode-forward"
+
+export function ModeSwitcher({
+  variant = "ghost",
+  className,
+}: {
+  variant?: React.ComponentProps<typeof Button>["variant"]
+  className?: React.ComponentProps<typeof Button>["className"]
+}) {
+  const { toggleTheme } = useThemeToggle()
+
+  return (
+    <Button
+      variant={variant}
+      size="icon"
+      className={cn("group/toggle extend-touch-target", className)}
+      onClick={toggleTheme}
+      id="mode-switcher-button"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4.5"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+        <path d="M12 3l0 18" />
+        <path d="M12 9l4.65 -4.65" />
+        <path d="M12 14.3l7.37 -7.37" />
+        <path d="M12 19.6l8.85 -8.85" />
+      </svg>
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
+
+export function DarkModeScript() {
+  return (
+    <Script
+      id="dark-mode-listener"
+      strategy="beforeInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+            (function() {
+              // Forward D key
+              document.addEventListener('keydown', function(e) {
+                if ((e.key === 'd' || e.key === 'D') && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                  if (
+                    (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+                    e.target instanceof HTMLInputElement ||
+                    e.target instanceof HTMLTextAreaElement ||
+                    e.target instanceof HTMLSelectElement
+                  ) {
+                    return;
+                  }
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({
+                      type: '${DARK_MODE_FORWARD_TYPE}',
+                      key: e.key
+                    }, '*');
+                  }
+                }
+              });
+
+            })();
+          `,
+      }}
+    />
+  )
+}

apps/v4/app/(app)/create/components/picker.tsx

@@ -0,0 +1,293 @@
+"use client"
+
+import * as React from "react"
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
+
+import { cn } from "@/registry/bases/base/lib/utils"
+import { IconPlaceholder } from "@/app/(app)/create/components/icon-placeholder"
+
+function Picker({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function PickerPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function PickerTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
+  return (
+    <MenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      className={cn(
+        "relative w-36 shrink-0 touch-manipulation rounded-xl p-3 ring-1 ring-foreground/10 select-none hover:bg-muted focus-visible:ring-foreground/50 focus-visible:outline-none disabled:opacity-50 data-popup-open:bg-muted md:w-full md:rounded-lg md:px-2.5 md:py-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PickerContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 20,
+  anchor,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "anchor"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        anchor={anchor}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn(
+            "cn-menu-target z-50 no-scrollbar max-h-(--available-height) w-[calc(var(--available-width)-(--spacing(6)))] min-w-32 origin-(--transform-origin) translate-y-2 overflow-x-hidden overflow-y-auto rounded-xl border-0 bg-neutral-950/80 p-1.5 text-neutral-100 ring-1 ring-neutral-950/80 backdrop-blur-xl outline-none md:w-52 dark:bg-neutral-800/90 dark:ring-neutral-700/50 data-closed:overflow-hidden",
+            className
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+      <div className="absolute inset-y-0 right-0 left-62 z-40 bg-transparent" />
+    </MenuPrimitive.Portal>
+  )
+}
+
+function PickerGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function PickerLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-xs font-medium text-neutral-400 data-inset:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PickerItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium outline-hidden select-none **:text-neutral-100 focus:bg-neutral-600 focus:text-neutral-100 focus:**:text-neutral-100 data-inset:pl-8 dark:focus:bg-neutral-700/80 pointer-coarse:gap-3 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PickerSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function PickerSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent/95 focus:text-accent-foreground focus:ring-1 focus:ring-foreground/20 not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-open:bg-accent/95 data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <IconPlaceholder
+        lucide="ChevronRightIcon"
+        tabler="IconChevronRight"
+        hugeicons="ArrowRight01Icon"
+        phosphor="CaretRightIcon"
+        remixicon="RiArrowRightSLine"
+        className="ml-auto"
+      />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function PickerSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof PickerContent>) {
+  return (
+    <PickerContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "w-auto min-w-[96px] rounded-md bg-popover/90 p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 backdrop-blur-xs duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function PickerCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent/95 focus:text-accent-foreground focus:ring-1 focus:ring-foreground/20 focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex items-center justify-center">
+        <MenuPrimitive.CheckboxItemIndicator>
+          <IconPlaceholder
+            lucide="CheckIcon"
+            tabler="IconCheck"
+            hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
+            remixicon="RiCheckLine"
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function PickerRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function PickerRadioItem({
+  className,
+  children,
+  ...props
+}: MenuPrimitive.RadioItem.Props) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm font-medium outline-hidden select-none **:text-neutral-100 focus:bg-neutral-600 focus:text-neutral-100 focus:**:text-neutral-100 data-inset:pl-8 dark:focus:bg-neutral-700/80 pointer-coarse:gap-3 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <IconPlaceholder
+            lucide="CheckIcon"
+            tabler="IconCheck"
+            hugeicons="Tick02Icon"
+            phosphor="CheckIcon"
+            remixicon="RiCheckLine"
+            className="size-4 pointer-coarse:size-5"
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function PickerSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn(
+        "-mx-1.5 my-1.5 h-px bg-neutral-600 dark:bg-neutral-700",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function PickerShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-neutral-400! group-focus/dropdown-menu-item:text-neutral-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Picker,
+  PickerPortal,
+  PickerTrigger,
+  PickerContent,
+  PickerGroup,
+  PickerLabel,
+  PickerItem,
+  PickerCheckboxItem,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerShortcut,
+  PickerSub,
+  PickerSubTrigger,
+  PickerSubContent,
+}

apps/v4/app/(app)/create/components/preset-handler.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { generateRandomPreset, isPresetCode } from "shadcn/preset"
+
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+export function PresetHandler() {
+  const router = useRouter()
+  const [params, setParams] = useDesignSystemSearchParams()
+  const hasConverted = React.useRef(false)
+
+  React.useEffect(() => {
+    if (params.preset === "random") {
+      router.replace(`/create?preset=${generateRandomPreset()}`)
+    }
+  }, [params.preset, router])
+
+  React.useEffect(() => {
+    if (hasConverted.current) {
+      return
+    }
+    hasConverted.current = true
+
+    if (!params.preset || params.preset === "random") {
+      return
+    }
+
+    if (isPresetCode(params.preset)) {
+      return
+    }
+
+    setParams({ base: params.base })
+  }, [params.preset, params.base, setParams])
+
+  return null
+}

apps/v4/app/(app)/create/components/preset-picker.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+
+import { STYLES, type Preset } from "@/registry/config"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+export function PresetPicker({
+  presets,
+  isMobile,
+  anchorRef,
+}: {
+  presets: readonly Preset[]
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentPreset = React.useMemo(() => {
+    return presets.find(
+      (preset) =>
+        preset.base === params.base &&
+        preset.style === params.style &&
+        preset.baseColor === params.baseColor &&
+        preset.theme === params.theme &&
+        preset.chartColor === params.chartColor &&
+        preset.iconLibrary === params.iconLibrary &&
+        preset.font === params.font &&
+        preset.fontHeading === params.fontHeading &&
+        preset.menuAccent === params.menuAccent &&
+        preset.menuColor === params.menuColor &&
+        preset.radius === params.radius
+    )
+  }, [
+    presets,
+    params.base,
+    params.style,
+    params.baseColor,
+    params.theme,
+    params.chartColor,
+    params.iconLibrary,
+    params.font,
+    params.fontHeading,
+    params.menuAccent,
+    params.menuColor,
+    params.radius,
+  ])
+
+  // Filter presets for current base only
+  const currentBasePresets = React.useMemo(() => {
+    return presets.filter((preset) => preset.base === params.base)
+  }, [presets, params.base])
+
+  const handlePresetChange = (value: string) => {
+    const preset = presets.find((p) => p.title === value)
+    if (!preset) {
+      return
+    }
+
+    // Update all params including base.
+    setParams({
+      base: preset.base,
+      style: preset.style,
+      baseColor: preset.baseColor,
+      theme: preset.theme,
+      chartColor: preset.chartColor,
+      iconLibrary: preset.iconLibrary,
+      font: preset.font,
+      fontHeading: preset.fontHeading,
+      menuAccent: preset.menuAccent,
+      menuColor: preset.menuColor,
+      radius: preset.radius,
+      custom: false,
+    })
+  }
+
+  return (
+    <Picker>
+      <PickerTrigger>
+        <div className="flex flex-col justify-start text-left">
+          <div className="text-xs text-muted-foreground">Preset</div>
+          <div className="line-clamp-1 text-sm font-medium text-foreground">
+            {currentPreset?.description ?? "Custom"}
+          </div>
+        </div>
+      </PickerTrigger>
+      <PickerContent
+        anchor={isMobile ? anchorRef : undefined}
+        side={isMobile ? "top" : "right"}
+        align={isMobile ? "center" : "start"}
+        className="md:w-72"
+      >
+        <PickerRadioGroup
+          value={currentPreset?.title ?? ""}
+          onValueChange={handlePresetChange}
+        >
+          <PickerGroup>
+            {currentBasePresets.map((preset) => {
+              const style = STYLES.find((s) => s.name === preset.style)
+              return (
+                <PickerRadioItem
+                  key={preset.title}
+                  value={preset.title}
+                  closeOnClick={isMobile}
+                >
+                  <div className="flex items-center gap-2">
+                    {preset.description}
+                  </div>
+                </PickerRadioItem>
+              )
+            })}
+          </PickerGroup>
+        </PickerRadioGroup>
+      </PickerContent>
+    </Picker>
+  )
+}

apps/v4/app/(app)/create/components/preview-style.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+export function PreviewStyle() {
+  return (
+    <style jsx global>{`
+      html {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    `}</style>
+  )
+}

apps/v4/app/(app)/create/components/preview-switcher.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { Button } from "@/registry/new-york-v4/ui/button"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+const PREVIEW_ITEMS = [
+  { label: "01", value: "preview-02" },
+  { label: "02", value: "preview" },
+]
+
+export function PreviewSwitcher() {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const isPreview =
+    params.item === "preview" || params.item.startsWith("preview-0")
+
+  if (!isPreview) {
+    return null
+  }
+
+  return (
+    <div className="dark absolute right-3 bottom-3 z-20 flex items-center gap-1 rounded-xl bg-card/90 p-1 shadow-xl backdrop-blur-xl">
+      {PREVIEW_ITEMS.map((item) => (
+        <Button
+          key={item.value}
+          variant="ghost"
+          size="sm"
+          data-active={params.item === item.value}
+          className="h-7 min-w-8 cursor-pointer rounded-lg px-2.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground"
+          onClick={() => setParams({ item: item.value })}
+        >
+          {item.label}
+        </Button>
+      ))}
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/preview.tsx

@@ -0,0 +1,154 @@
+"use client"
+
+import * as React from "react"
+
+import { CMD_K_FORWARD_TYPE } from "@/app/(app)/create/components/action-menu"
+import {
+  REDO_FORWARD_TYPE,
+  UNDO_FORWARD_TYPE,
+} from "@/app/(app)/create/components/history-buttons"
+import { DARK_MODE_FORWARD_TYPE } from "@/app/(app)/create/components/mode-switcher"
+import { PreviewSwitcher } from "@/app/(app)/create/components/preview-switcher"
+import { RANDOMIZE_FORWARD_TYPE } from "@/app/(app)/create/components/random-button"
+import { sendToIframe } from "@/app/(app)/create/hooks/use-iframe-sync"
+import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset"
+import {
+  serializeDesignSystemSearchParams,
+  useDesignSystemSearchParams,
+} from "@/app/(app)/create/lib/search-params"
+
+// Hoisted — avoids recreating on every message event. (js-hoist-regexp)
+const MAC_REGEX = /Mac|iPhone|iPad|iPod/
+
+// Hoisted — only uses module-level constants, no component state. (rendering-hoist-jsx)
+function handleMessage(event: MessageEvent) {
+  if (
+    typeof window === "undefined" ||
+    event.origin !== window.location.origin
+  ) {
+    return
+  }
+
+  const type = event.data.type
+  if (type === CMD_K_FORWARD_TYPE) {
+    const isMac = MAC_REGEX.test(navigator.userAgent)
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: event.data.key || "k",
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === RANDOMIZE_FORWARD_TYPE) {
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: event.data.key || "r",
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === UNDO_FORWARD_TYPE) {
+    const isMac = MAC_REGEX.test(navigator.userAgent)
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "z",
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === REDO_FORWARD_TYPE) {
+    const isMac = MAC_REGEX.test(navigator.userAgent)
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "z",
+        shiftKey: true,
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === RESET_FORWARD_TYPE) {
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "R",
+        shiftKey: true,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === DARK_MODE_FORWARD_TYPE) {
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: event.data.key || "d",
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  }
+}
+
+export function Preview() {
+  const [params] = useDesignSystemSearchParams()
+  const iframeRef = React.useRef<HTMLIFrameElement>(null)
+
+  React.useEffect(() => {
+    const iframe = iframeRef.current
+    if (!iframe) {
+      return
+    }
+
+    const sendParams = () => {
+      sendToIframe(iframe, "design-system-params", params)
+    }
+
+    if (iframe.contentWindow) {
+      sendParams()
+    }
+
+    iframe.addEventListener("load", sendParams)
+    return () => {
+      iframe.removeEventListener("load", sendParams)
+    }
+  }, [params])
+
+  React.useEffect(() => {
+    window.addEventListener("message", handleMessage)
+    return () => {
+      window.removeEventListener("message", handleMessage)
+    }
+  }, [])
+
+  const iframeSrc = React.useMemo(() => {
+    // The iframe src needs to include the serialized design system params
+    // for the initial load, but not be reactive to them as it would cause
+    // full-iframe reloads on every param change (flashes & loss of state).
+    // Further updates of the search params will be sent to the iframe
+    // via a postMessage channel, for it to sync its own history onto the host's.
+    return serializeDesignSystemSearchParams(
+      `/preview/${params.base}/${params.item}`,
+      params
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params.base, params.item])
+
+  return (
+    <div className="relative flex flex-1 flex-col justify-center overflow-hidden rounded-2xl ring ring-foreground/10 md:ring-muted dark:ring-foreground/10">
+      <div className="relative z-0 mx-auto flex w-full flex-1 flex-col overflow-hidden">
+        <div className="absolute inset-0 bg-muted dark:bg-muted/30" />
+        <iframe
+          key={params.base + params.item}
+          ref={iframeRef}
+          src={iframeSrc}
+          className="z-10 size-full flex-1"
+          title="Preview"
+        />
+      </div>
+      <PreviewSwitcher />
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/project-form.tsx

@@ -0,0 +1,375 @@
+"use client"
+
+import * as React from "react"
+import { Copy01Icon, Globe02Icon, Tick02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { cn } from "@/lib/utils"
+import { useConfig } from "@/hooks/use-config"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { BASES, type BaseName } from "@/registry/config"
+import { Button } from "@/styles/base-nova/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/styles/base-nova/ui/dialog"
+import {
+  Field,
+  FieldContent,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "@/styles/base-nova/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/styles/base-nova/ui/radio-group"
+import { Switch } from "@/styles/base-nova/ui/switch"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/styles/base-nova/ui/tabs"
+import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
+import {
+  useDesignSystemSearchParams,
+  type DesignSystemSearchParams,
+} from "@/app/(app)/create/lib/search-params"
+import {
+  getFramework,
+  getTemplateValue,
+  NO_MONOREPO_FRAMEWORKS,
+  TEMPLATES,
+} from "@/app/(app)/create/lib/templates"
+
+const TURBOREPO_LOGO =
+  '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Turborepo</title><path d="M11.9906 4.1957c-4.2998 0-7.7981 3.501-7.7981 7.8043s3.4983 7.8043 7.7981 7.8043c4.2999 0 7.7982-3.501 7.7982-7.8043s-3.4983-7.8043-7.7982-7.8043m0 11.843c-2.229 0-4.0356-1.8079-4.0356-4.0387s1.8065-4.0387 4.0356-4.0387S16.0262 9.7692 16.0262 12s-1.8065 4.0388-4.0356 4.0388m.6534-13.1249V0C18.9726.3386 24 5.5822 24 12s-5.0274 11.66-11.356 12v-2.9139c4.7167-.3372 8.4516-4.2814 8.4516-9.0861s-3.735-8.749-8.4516-9.0861M5.113 17.9586c-1.2502-1.4446-2.0562-3.2845-2.2-5.3046H0c.151 2.8266 1.2808 5.3917 3.051 7.3668l2.0606-2.0622zM11.3372 24v-2.9139c-2.02-.1439-3.8584-.949-5.3019-2.2018l-2.0606 2.0623c1.975 1.773 4.538 2.9022 7.361 3.0534z"/></svg>'
+const ORIGIN = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:4000"
+const IS_LOCAL_DEV = ORIGIN.includes("localhost")
+const SHADCN_VERSION = process.env.NEXT_PUBLIC_RC ? "@rc" : "@latest"
+const PACKAGE_MANAGERS = ["pnpm", "npm", "yarn", "bun"] as const
+type PackageManager = (typeof PACKAGE_MANAGERS)[number]
+
+export function ProjectForm({
+  className,
+}: React.ComponentProps<typeof Button>) {
+  const [open, setOpen] = React.useState(false)
+  const [params, setParams] = useDesignSystemSearchParams()
+  const presetCode = usePresetCode()
+  const [config, setConfig] = useConfig()
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  const packageManager = (config.packageManager || "pnpm") as PackageManager
+  const framework = React.useMemo(
+    () => getFramework(params.template ?? "next"),
+    [params.template]
+  )
+  const isMonorepo = React.useMemo(
+    () => params.template?.endsWith("-monorepo") ?? false,
+    [params.template]
+  )
+
+  const hasMonorepo = !NO_MONOREPO_FRAMEWORKS.includes(
+    framework as (typeof NO_MONOREPO_FRAMEWORKS)[number]
+  )
+
+  const commands = React.useMemo(() => {
+    const presetFlag = ` --preset ${presetCode}`
+    const baseFlag = params.base !== "radix" ? ` --base ${params.base}` : ""
+    const templateFlag = ` --template ${framework}`
+    const monorepoFlag = isMonorepo ? " --monorepo" : ""
+    const rtlFlag = params.rtl ? " --rtl" : ""
+    const flags = `${presetFlag}${baseFlag}${templateFlag}${monorepoFlag}${rtlFlag}`
+
+    return IS_LOCAL_DEV
+      ? {
+          pnpm: `shadcn init${flags}`,
+          npm: `shadcn init${flags}`,
+          yarn: `shadcn init${flags}`,
+          bun: `shadcn init${flags}`,
+        }
+      : {
+          pnpm: `pnpm dlx shadcn${SHADCN_VERSION} init${flags}`,
+          npm: `npx shadcn${SHADCN_VERSION} init${flags}`,
+          yarn: `yarn dlx shadcn${SHADCN_VERSION} init${flags}`,
+          bun: `bunx --bun shadcn${SHADCN_VERSION} init${flags}`,
+        }
+  }, [framework, isMonorepo, params.base, params.rtl, presetCode])
+
+  const command = commands[packageManager]
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const handleCopy = React.useCallback(() => {
+    const properties: Record<string, string> = {
+      command,
+    }
+    if (params.template) {
+      properties.template = params.template
+    }
+    copyToClipboardWithMeta(command, {
+      name: "copy_npm_command",
+      properties,
+    })
+    setHasCopied(true)
+  }, [command, params.template])
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger render={<Button className={cn(className)} />}>
+        Create Project
+      </DialogTrigger>
+      <DialogContent className="dark no-scrollbar max-h-[calc(100svh-2rem)] overflow-y-auto rounded-2xl p-6 shadow-xl **:data-[slot=field-separator]:h-2 sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Create Project</DialogTitle>
+          <DialogDescription>
+            Pick a template and configure your project.
+          </DialogDescription>
+        </DialogHeader>
+        <div>
+          <FieldGroup>
+            <FieldSeparator className="-mx-6" />
+            <Field className="-mt-2 gap-3">
+              <FieldLabel>Template</FieldLabel>
+              <TemplateGrid template={params.template} setParams={setParams} />
+            </Field>
+            <FieldSeparator className="-mx-6" />
+            <Field className="-mt-2">
+              <FieldLabel>Base</FieldLabel>
+              <BaseGrid base={params.base} setParams={setParams} />
+            </Field>
+            <FieldSeparator className="-mx-6" />
+            <FieldSet>
+              <FieldLegend variant="label" className="sr-only">
+                Options
+              </FieldLegend>
+              <Field
+                orientation="horizontal"
+                data-disabled={hasMonorepo ? undefined : "true"}
+              >
+                <FieldLabel htmlFor="monorepo">
+                  <span
+                    className="size-4 text-neutral-100 [&_svg]:size-4 [&_svg]:fill-current"
+                    dangerouslySetInnerHTML={{
+                      __html: TURBOREPO_LOGO,
+                    }}
+                  />
+                  Create a monorepo
+                </FieldLabel>
+                <Switch
+                  id="monorepo"
+                  checked={params.template?.endsWith("-monorepo") ?? false}
+                  disabled={!hasMonorepo}
+                  onCheckedChange={(checked) => {
+                    const framework = getFramework(params.template ?? "next")
+                    setParams({
+                      template: getTemplateValue(
+                        framework,
+                        checked === true
+                      ) as typeof params.template,
+                    })
+                  }}
+                />
+              </Field>
+              <FieldSeparator className="-mx-6" />
+              <Field orientation="horizontal">
+                <FieldLabel htmlFor="rtl">
+                  <HugeiconsIcon icon={Globe02Icon} className="size-4" />
+                  Enable RTL support
+                </FieldLabel>
+                <Switch
+                  id="rtl"
+                  checked={params.rtl}
+                  onCheckedChange={(checked) =>
+                    setParams({ rtl: checked === true })
+                  }
+                />
+              </Field>
+            </FieldSet>
+          </FieldGroup>
+        </div>
+        <DialogFooter className="-mx-6 -mb-6 min-w-0">
+          <div className="flex w-full min-w-0 flex-col gap-3">
+            <Tabs
+              value={packageManager}
+              onValueChange={(value) => {
+                setConfig((prev) => ({
+                  ...prev,
+                  packageManager: value as PackageManager,
+                }))
+              }}
+              className="min-w-0 gap-0 overflow-hidden rounded-xl border-0 ring-1 ring-border"
+            >
+              <div className="flex items-center gap-2 py-1 pr-1.5 pl-1">
+                <TabsList className="bg-transparent font-mono">
+                  {PACKAGE_MANAGERS.map((manager) => {
+                    return (
+                      <TabsTrigger
+                        key={manager}
+                        value={manager}
+                        className="py-0 leading-none data-[state=active]:shadow-none"
+                      >
+                        {manager}
+                      </TabsTrigger>
+                    )
+                  })}
+                </TabsList>
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  className="ml-auto"
+                  onClick={handleCopy}
+                >
+                  {hasCopied ? (
+                    <HugeiconsIcon icon={Tick02Icon} />
+                  ) : (
+                    <HugeiconsIcon icon={Copy01Icon} />
+                  )}
+                  <span className="sr-only">Copy command</span>
+                </Button>
+              </div>
+              {Object.entries(commands).map(([key, cmd]) => {
+                return (
+                  <TabsContent key={key} value={key}>
+                    <div className="relative overflow-hidden border-t bg-popover p-3">
+                      <div className="no-scrollbar overflow-x-auto">
+                        <code className="font-mono text-sm whitespace-nowrap">
+                          {cmd}
+                        </code>
+                      </div>
+                    </div>
+                  </TabsContent>
+                )
+              })}
+            </Tabs>
+            <Button onClick={handleCopy} className="h-9 w-full">
+              {hasCopied ? "Copied" : "Copy Command"}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const TemplateGrid = React.memo(function TemplateGrid({
+  template,
+  setParams,
+}: {
+  template: DesignSystemSearchParams["template"]
+  setParams: ReturnType<typeof useDesignSystemSearchParams>[1]
+}) {
+  const isMonorepo = template?.endsWith("-monorepo") ?? false
+  const framework = getFramework(template ?? "next")
+
+  const handleTemplateChange = React.useCallback(
+    (value: string) => {
+      setParams({
+        template: getTemplateValue(
+          value,
+          isMonorepo
+        ) as DesignSystemSearchParams["template"],
+      })
+    },
+    [isMonorepo, setParams]
+  )
+
+  return (
+    <RadioGroup
+      value={framework}
+      onValueChange={handleTemplateChange}
+      className="grid grid-cols-2 gap-2"
+    >
+      {TEMPLATES.map((item) => (
+        <FieldLabel
+          key={item.value}
+          htmlFor={`template-${item.value}`}
+          className="block w-full"
+        >
+          <Field
+            orientation="horizontal"
+            className="w-full rounded-md transition-colors duration-150 hover:bg-neutral-700/45"
+          >
+            <FieldContent className="flex flex-row items-center gap-2 px-2.5 py-1.5">
+              <div
+                className="size-4 text-neutral-100 [&_svg]:size-4 *:[svg]:text-neutral-100!"
+                dangerouslySetInnerHTML={{
+                  __html: item.logo,
+                }}
+              ></div>
+              <FieldTitle>{item.title}</FieldTitle>
+            </FieldContent>
+            <RadioGroupItem
+              value={item.value}
+              id={`template-${item.value}`}
+              className="sr-only absolute"
+            />
+          </Field>
+        </FieldLabel>
+      ))}
+    </RadioGroup>
+  )
+})
+
+const BaseGrid = React.memo(function BaseGrid({
+  base,
+  setParams,
+}: {
+  base: DesignSystemSearchParams["base"]
+  setParams: ReturnType<typeof useDesignSystemSearchParams>[1]
+}) {
+  const handleBaseChange = React.useCallback(
+    (value: string) => {
+      setParams({ base: value as BaseName })
+    },
+    [setParams]
+  )
+
+  return (
+    <RadioGroup
+      value={base}
+      onValueChange={handleBaseChange}
+      aria-label="Base"
+      className="grid grid-cols-2 gap-2"
+    >
+      {BASES.map((item) => (
+        <FieldLabel
+          key={item.name}
+          htmlFor={`base-${item.name}`}
+          className="block w-full"
+        >
+          <Field
+            orientation="horizontal"
+            className="w-full rounded-md transition-colors duration-150 hover:bg-neutral-700/45"
+          >
+            <FieldContent className="flex flex-row items-center gap-2 px-2.5 py-1.5">
+              <div
+                className="size-4 text-neutral-100 [&_svg]:size-4 *:[svg]:text-neutral-100!"
+                dangerouslySetInnerHTML={{
+                  __html: item.meta?.logo ?? "",
+                }}
+              />
+              <FieldTitle>{item.title}</FieldTitle>
+            </FieldContent>
+            <RadioGroupItem
+              value={item.name}
+              id={`base-${item.name}`}
+              className="sr-only absolute"
+            />
+          </Field>
+        </FieldLabel>
+      ))}
+    </RadioGroup>
+  )
+})

apps/v4/app/(app)/create/components/radius-picker.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import * as React from "react"
+
+import { RADII, type RadiusValue } from "@/registry/config"
+import { LockButton } from "@/app/(app)/create/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+export function RadiusPicker({
+  isMobile,
+  anchorRef,
+}: {
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+  const isRadiusLocked = params.style === "lyra"
+  const selectedRadiusName = isRadiusLocked ? "none" : params.radius
+
+  const currentRadius = RADII.find(
+    (radius) => radius.name === selectedRadiusName
+  )
+  const defaultRadius = RADII.find((radius) => radius.name === "default")
+  const otherRadii = RADII.filter((radius) => radius.name !== "default")
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger disabled={isRadiusLocked}>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Radius</div>
+            <div className="text-sm font-medium text-foreground">
+              {currentRadius?.label}
+            </div>
+          </div>
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base text-foreground select-none md:right-2.5">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              className="text-foreground"
+            >
+              <path
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M4 20v-5C4 8.925 8.925 4 15 4h5"
+              />
+            </svg>
+          </div>
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+        >
+          <PickerRadioGroup
+            value={currentRadius?.name}
+            onValueChange={(value) => {
+              if (isRadiusLocked) {
+                return
+              }
+              setParams({ radius: value as RadiusValue })
+            }}
+          >
+            <PickerGroup>
+              {defaultRadius && (
+                <PickerRadioItem
+                  key={defaultRadius.name}
+                  value={defaultRadius.name}
+                  closeOnClick={isMobile}
+                >
+                  {defaultRadius.label}
+                </PickerRadioItem>
+              )}
+            </PickerGroup>
+            <PickerSeparator />
+            <PickerGroup>
+              {otherRadii.map((radius) => (
+                <PickerRadioItem
+                  key={radius.name}
+                  value={radius.name}
+                  closeOnClick={isMobile}
+                >
+                  {radius.label}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="radius"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
+      />
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/random-button.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import Script from "next/script"
+import { DiceFaces05Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/styles/base-nova/ui/button"
+import { useRandom } from "@/app/(app)/create/hooks/use-random"
+import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset"
+
+export const RANDOMIZE_FORWARD_TYPE = "randomize-forward"
+
+export function RandomButton({
+  variant = "outline",
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { randomize } = useRandom()
+
+  return (
+    <Button
+      variant={variant}
+      onClick={randomize}
+      className={cn(
+        "touch-manipulation bg-transparent! px-2! py-0! text-sm! transition-none select-none hover:bg-muted! pointer-coarse:h-10!",
+        className
+      )}
+      {...props}
+    >
+      <span className="w-full text-center font-medium">Shuffle</span>
+    </Button>
+  )
+}
+
+export function RandomizeScript() {
+  return (
+    <Script
+      id="randomize-listener"
+      strategy="beforeInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+            (function() {
+              // Forward r key (shuffle) and Shift+R (reset).
+              document.addEventListener('keydown', function(e) {
+                if ((e.key === 'r' || e.key === 'R') && !e.metaKey && !e.ctrlKey) {
+                  if (
+                    (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+                    e.target instanceof HTMLInputElement ||
+                    e.target instanceof HTMLTextAreaElement ||
+                    e.target instanceof HTMLSelectElement
+                  ) {
+                    return;
+                  }
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    var type = e.shiftKey
+                      ? '${RESET_FORWARD_TYPE}'
+                      : '${RANDOMIZE_FORWARD_TYPE}';
+                    window.parent.postMessage({
+                      type: type,
+                      key: e.key
+                    }, '*');
+                  }
+                }
+              });
+
+            })();
+          `,
+      }}
+    />
+  )
+}

apps/v4/app/(app)/create/components/reset-button.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/styles/base-nova/ui/alert-dialog"
+import { useReset } from "@/app/(app)/create/hooks/use-reset"
+
+export function ResetDialog() {
+  const { showResetDialog, setShowResetDialog, confirmReset } = useReset()
+
+  return (
+    <AlertDialog open={showResetDialog} onOpenChange={setShowResetDialog}>
+      <AlertDialogContent size="sm">
+        <AlertDialogHeader>
+          <AlertDialogTitle>Reset to defaults?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will reset all customization options to their default values.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={confirmReset}>Reset</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

apps/v4/app/(app)/create/components/share-button.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Share03Icon, Tick02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { Button } from "@/styles/base-nova/ui/button"
+import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+export function ShareButton() {
+  const [params] = useDesignSystemSearchParams()
+  const presetCode = usePresetCode()
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  const shareUrl = React.useMemo(() => {
+    const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"
+    return `${origin}/create?preset=${presetCode}&item=${params.item}`
+  }, [presetCode, params.item])
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const handleCopy = React.useCallback(() => {
+    copyToClipboardWithMeta(shareUrl, {
+      name: "copy_create_share_url",
+      properties: {
+        url: shareUrl,
+      },
+    })
+    setHasCopied(true)
+  }, [shareUrl])
+
+  return (
+    <Button variant="outline" className="hidden md:flex" onClick={handleCopy}>
+      {hasCopied ? (
+        <HugeiconsIcon
+          icon={Tick02Icon}
+          strokeWidth={2}
+          data-icon="inline-start"
+        />
+      ) : (
+        <HugeiconsIcon
+          icon={Share03Icon}
+          strokeWidth={2}
+          data-icon="inline-start"
+        />
+      )}
+      Share
+    </Button>
+  )
+}

apps/v4/app/(app)/create/components/style-picker.tsx

@@ -0,0 +1,79 @@
+"use client"
+
+import * as React from "react"
+
+import { type Style, type StyleName } from "@/registry/config"
+import { LockButton } from "@/app/(app)/create/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+export function StylePicker({
+  styles,
+  isMobile,
+  anchorRef,
+}: {
+  styles: readonly Style[]
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentStyle = styles.find((style) => style.name === params.style)
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Style</div>
+            <div className="text-sm font-medium text-foreground">
+              {currentStyle?.title}
+            </div>
+          </div>
+          {currentStyle?.icon && (
+            <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center select-none md:right-2.5">
+              {React.cloneElement(currentStyle.icon, {
+                className: "size-4",
+              })}
+            </div>
+          )}
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+        >
+          <PickerRadioGroup
+            value={currentStyle?.name}
+            onValueChange={(value) => {
+              setParams({ style: value as StyleName })
+            }}
+          >
+            <PickerGroup>
+              {styles.map((style) => (
+                <PickerRadioItem
+                  value={style.name}
+                  key={style.name}
+                  closeOnClick={isMobile}
+                >
+                  {style.title}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="style"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
+      />
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/theme-picker.tsx

@@ -0,0 +1,130 @@
+"use client"
+
+import * as React from "react"
+
+import { useMounted } from "@/hooks/use-mounted"
+import { BASE_COLORS, type Theme, type ThemeName } from "@/registry/config"
+import { LockButton } from "@/app/(app)/create/components/lock-button"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerRadioGroup,
+  PickerRadioItem,
+  PickerSeparator,
+  PickerTrigger,
+} from "@/app/(app)/create/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+export function ThemePicker({
+  themes,
+  isMobile,
+  anchorRef,
+}: {
+  themes: readonly Theme[]
+  isMobile: boolean
+  anchorRef: React.RefObject<HTMLDivElement | null>
+}) {
+  const mounted = useMounted()
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const currentTheme = React.useMemo(
+    () => themes.find((theme) => theme.name === params.theme),
+    [themes, params.theme]
+  )
+
+  const currentThemeIsBaseColor = React.useMemo(
+    () => BASE_COLORS.find((baseColor) => baseColor.name === params.theme),
+    [params.theme]
+  )
+
+  React.useEffect(() => {
+    if (!currentTheme && themes.length > 0) {
+      setParams({ theme: themes[0].name })
+    }
+  }, [currentTheme, themes, setParams])
+
+  return (
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Theme</div>
+            <div className="text-sm font-medium text-foreground">
+              {currentTheme?.title}
+            </div>
+          </div>
+          {mounted && (
+            <div
+              style={
+                {
+                  "--color":
+                    currentTheme?.cssVars?.dark?.[
+                      currentThemeIsBaseColor ? "muted-foreground" : "primary"
+                    ],
+                } as React.CSSProperties
+              }
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2.5"
+            />
+          )}
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
+          className="max-h-92"
+        >
+          <PickerRadioGroup
+            value={currentTheme?.name}
+            onValueChange={(value) => {
+              setParams({ theme: value as ThemeName })
+            }}
+          >
+            <PickerGroup>
+              {themes
+                .filter((theme) =>
+                  BASE_COLORS.find((baseColor) => baseColor.name === theme.name)
+                )
+                .map((theme) => {
+                  return (
+                    <PickerRadioItem
+                      key={theme.name}
+                      value={theme.name}
+                      closeOnClick={isMobile}
+                    >
+                      {theme.title}
+                    </PickerRadioItem>
+                  )
+                })}
+            </PickerGroup>
+            <PickerSeparator />
+            <PickerGroup>
+              {themes
+                .filter(
+                  (theme) =>
+                    !BASE_COLORS.find(
+                      (baseColor) => baseColor.name === theme.name
+                    )
+                )
+                .map((theme) => {
+                  return (
+                    <PickerRadioItem
+                      key={theme.name}
+                      value={theme.name}
+                      closeOnClick={isMobile}
+                    >
+                      {theme.title}
+                    </PickerRadioItem>
+                  )
+                })}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+      <LockButton
+        param="theme"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
+      />
+    </div>
+  )
+}

apps/v4/app/(app)/create/components/v0-button.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { useIsMobile } from "@/hooks/use-mobile"
+import { useMounted } from "@/hooks/use-mounted"
+import { Icons } from "@/components/icons"
+import { Button } from "@/styles/base-nova/ui/button"
+import { Skeleton } from "@/styles/base-nova/ui/skeleton"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+export function V0Button({ className }: { className?: string }) {
+  const [params] = useDesignSystemSearchParams()
+  const isMobile = useIsMobile()
+  const isMounted = useMounted()
+
+  const url = React.useMemo(() => {
+    const searchParams = new URLSearchParams()
+
+    if (params.preset) {
+      searchParams.set("preset", params.preset)
+    }
+
+    searchParams.set("base", params.base)
+
+    return `${process.env.NEXT_PUBLIC_APP_URL}/init/v0?${searchParams.toString()}`
+  }, [params.preset, params.base])
+
+  const title = React.useMemo(() => {
+    return params.base && params.style
+      ? `New ${params.base}-${params.style} project`
+      : "New Project"
+  }, [params.base, params.style])
+
+  if (!isMounted) {
+    return <Skeleton className="h-8 w-24 rounded-lg" />
+  }
+
+  return (
+    <Button
+      nativeButton={false}
+      role="link"
+      variant={isMobile ? "default" : "outline"}
+      className={cn("h-[31px] gap-1 rounded-lg", className)}
+      render={
+        <a
+          href={`${process.env.NEXT_PUBLIC_V0_URL}/chat/api/open?url=${url}&title=${title}`}
+          target="_blank"
+        />
+      }
+    >
+      <span>Open in</span>
+      <Icons.v0 className="size-5" data-icon="inline-end" />
+    </Button>
+  )
+}

apps/v4/app/(app)/create/components/welcome-dialog.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+
+import { Icons } from "@/components/icons"
+import { Button } from "@/styles/base-nova/ui/button"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/styles/base-nova/ui/dialog"
+
+const STORAGE_KEY = "shadcn-create-welcome-dialog"
+
+export function WelcomeDialog() {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    const dismissed = localStorage.getItem(STORAGE_KEY)
+    if (!dismissed) {
+      setIsOpen(true)
+    }
+  }, [])
+
+  // Stable callback — avoids re-creation on every render. (rerender-functional-setstate)
+  const handleOpenChange = React.useCallback((open: boolean) => {
+    setIsOpen(open)
+    if (!open) {
+      localStorage.setItem(STORAGE_KEY, "true")
+    }
+  }, [])
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="dialog-ring max-w-92 min-w-0 gap-0 overflow-hidden rounded-xl p-0 sm:max-w-sm dark:bg-neutral-900"
+      >
+        <div className="flex aspect-[2/1.2] w-full items-center justify-center rounded-t-xl bg-neutral-950 text-center text-neutral-100 sm:aspect-2/1">
+          <div className="font-mono text-2xl font-bold">
+            <Icons.logo className="size-12" />
+          </div>
+        </div>
+        <DialogHeader className="gap-1 p-4">
+          <DialogTitle className="text-left text-base">
+            Build your own shadcn/ui
+          </DialogTitle>
+          <DialogDescription className="text-left leading-relaxed text-foreground">
+            Customize everything from the ground up. Pick your component
+            library, font, color scheme, and more.
+          </DialogDescription>
+          <DialogDescription className="mt-2 text-left leading-relaxed font-medium text-foreground">
+            Available for all major React frameworks.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="m-0">
+          <DialogClose render={<Button className="w-full" />}>
+            Get Started
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

apps/v4/app/(app)/create/hooks/use-action-menu.ts

@@ -0,0 +1,142 @@
+"use client"
+
+import * as React from "react"
+import { type RegistryItem } from "shadcn/schema"
+import useSWR from "swr"
+
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { groupItemsByType } from "@/app/(app)/create/lib/utils"
+
+const ACTION_MENU_OPEN_KEY = "create:action-menu-open"
+
+type ActionMenuItem = {
+  id: string
+  type: string
+  label: string
+  registryName: string
+}
+
+type ActionMenuGroup = {
+  type: string
+  title: string
+  items: ActionMenuItem[]
+}
+
+type ActionMenuSourceItem = Pick<RegistryItem, "name" | "title" | "type">
+
+const SEARCH_KEYWORDS: Record<string, string> = {
+  "registry:block": "block blocks component components",
+  "registry:item": "item items component components",
+}
+
+function sortRegistryGroups(groups: ReturnType<typeof groupItemsByType>) {
+  return [...groups].sort((a, b) => {
+    if (a.type === b.type) {
+      return a.title.localeCompare(b.title)
+    }
+    if (a.type === "registry:block") {
+      return -1
+    }
+    if (b.type === "registry:block") {
+      return 1
+    }
+    return a.title.localeCompare(b.title)
+  })
+}
+
+export function useActionMenu(
+  itemsByBase: Record<string, ActionMenuSourceItem[]>
+) {
+  const [params, setParams] = useDesignSystemSearchParams()
+  const { data: open = false, mutate: setOpenData } = useSWR<boolean>(
+    ACTION_MENU_OPEN_KEY,
+    {
+      fallbackData: false,
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+      revalidateOnReconnect: false,
+    }
+  )
+
+  const groups = React.useMemo<ActionMenuGroup[]>(() => {
+    const currentBaseItems = itemsByBase?.[params.base] ?? []
+    const sortedRegistryGroups = sortRegistryGroups(
+      groupItemsByType(currentBaseItems)
+    )
+
+    return sortedRegistryGroups.map((group) => ({
+      type: group.type,
+      title: group.title,
+      items: group.items.map((item) => ({
+        id: `${group.type}:${item.name}`,
+        type: group.type,
+        label: item.title ?? item.name,
+        registryName: item.name,
+      })),
+    }))
+  }, [itemsByBase, params.base])
+
+  const activeRegistryName = params.item
+
+  const handleSelect = React.useCallback(
+    (registryName: string) => {
+      setParams({ item: registryName })
+      void setOpenData(false, { revalidate: false })
+    },
+    [setOpenData, setParams]
+  )
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      void setOpenData(nextOpen, { revalidate: false })
+    },
+    [setOpenData]
+  )
+
+  const getCommandValue = React.useCallback((item: ActionMenuItem) => {
+    const keywords = SEARCH_KEYWORDS[item.type] ?? item.type.replace(":", " ")
+    return `${item.label ?? ""} ${keywords}`.trim()
+  }, [])
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "p" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        void setOpenData((currentOpen = false) => !currentOpen, {
+          revalidate: false,
+        })
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => {
+      document.removeEventListener("keydown", down)
+    }
+  }, [setOpenData])
+
+  return {
+    activeRegistryName,
+    getCommandValue,
+    groups,
+    handleSelect,
+    open,
+    setOpen: handleOpenChange,
+  }
+}
+
+export function useActionMenuTrigger() {
+  const { mutate: setOpenData } = useSWR<boolean>(ACTION_MENU_OPEN_KEY, {
+    fallbackData: false,
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    revalidateOnReconnect: false,
+  })
+
+  const openActionMenu = React.useCallback(() => {
+    void setOpenData(true, { revalidate: false })
+  }, [setOpenData])
+
+  return {
+    openActionMenu,
+  }
+}

apps/v4/app/(app)/create/hooks/use-design-system.ts

@@ -0,0 +1,11 @@
+"use client"
+
+import { getPresetCode } from "@/app/(app)/create/lib/preset-code"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+// Returns the canonical preset code derived from the current search params.
+export function usePresetCode() {
+  const [params] = useDesignSystemSearchParams()
+
+  return getPresetCode(params)
+}

apps/v4/app/(app)/create/hooks/use-history.tsx

@@ -0,0 +1,175 @@
+"use client"
+
+import * as React from "react"
+import { Suspense } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+
+type HistoryContextValue = {
+  canGoBack: boolean
+  canGoForward: boolean
+  goBack: () => void
+  goForward: () => void
+}
+
+const HistoryContext = React.createContext<HistoryContextValue | null>(null)
+
+// Reads useSearchParams() in its own Suspense boundary so the
+// provider never blanks out children while search params resolve.
+function PresetSync({
+  onPresetChange,
+}: {
+  onPresetChange: (preset: string) => void
+}) {
+  const searchParams = useSearchParams()
+  const preset = searchParams.get("preset") ?? ""
+
+  React.useEffect(() => {
+    onPresetChange(preset)
+  }, [preset, onPresetChange])
+
+  return null
+}
+
+export function HistoryProvider({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+
+  const [preset, setPreset] = React.useState("")
+
+  const entriesRef = React.useRef<string[]>([preset])
+  const indexRef = React.useRef(0)
+  const maxIndexRef = React.useRef(0)
+  const isNavigatingRef = React.useRef(false)
+
+  const [index, setIndex] = React.useState(0)
+  const [maxIndex, setMaxIndex] = React.useState(0)
+
+  const onPresetChange = React.useCallback((nextPreset: string) => {
+    setPreset(nextPreset)
+  }, [])
+
+  React.useEffect(() => {
+    if (isNavigatingRef.current) {
+      isNavigatingRef.current = false
+      return
+    }
+
+    if (preset === entriesRef.current[indexRef.current]) {
+      return
+    }
+
+    const nextEntries = entriesRef.current.slice(0, indexRef.current + 1)
+    nextEntries.push(preset)
+    entriesRef.current = nextEntries
+
+    const nextIndex = nextEntries.length - 1
+    indexRef.current = nextIndex
+    maxIndexRef.current = nextIndex
+    setIndex(nextIndex)
+    setMaxIndex(nextIndex)
+  }, [preset])
+
+  const canGoBack = index > 0
+  const canGoForward = index < maxIndex
+
+  const goBack = React.useCallback(() => {
+    if (indexRef.current <= 0) {
+      return
+    }
+
+    isNavigatingRef.current = true
+    const nextIndex = indexRef.current - 1
+    indexRef.current = nextIndex
+    setIndex(nextIndex)
+
+    const targetPreset = entriesRef.current[nextIndex]
+    const params = new URLSearchParams(window.location.search)
+    if (targetPreset) {
+      params.set("preset", targetPreset)
+    } else {
+      params.delete("preset")
+    }
+    const pathname = window.location.pathname
+    const query = params.toString()
+    router.replace(query ? `${pathname}?${query}` : pathname)
+  }, [router])
+
+  const goForward = React.useCallback(() => {
+    if (indexRef.current >= maxIndexRef.current) {
+      return
+    }
+
+    isNavigatingRef.current = true
+    const nextIndex = indexRef.current + 1
+    indexRef.current = nextIndex
+    setIndex(nextIndex)
+
+    const targetPreset = entriesRef.current[nextIndex]
+    const params = new URLSearchParams(window.location.search)
+    if (targetPreset) {
+      params.set("preset", targetPreset)
+    } else {
+      params.delete("preset")
+    }
+    const pathname = window.location.pathname
+    const query = params.toString()
+    router.replace(query ? `${pathname}?${query}` : pathname)
+  }, [router])
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (!e.metaKey && !e.ctrlKey) {
+        return
+      }
+
+      if (
+        (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+        e.target instanceof HTMLInputElement ||
+        e.target instanceof HTMLTextAreaElement ||
+        e.target instanceof HTMLSelectElement
+      ) {
+        return
+      }
+
+      const key = e.key.toLowerCase()
+
+      if ((key === "z" && e.shiftKey) || (key === "y" && e.ctrlKey)) {
+        e.preventDefault()
+        goForward()
+        return
+      }
+
+      if (key === "z") {
+        e.preventDefault()
+        goBack()
+      }
+    }
+
+    document.addEventListener("keydown", down)
+
+    return () => {
+      document.removeEventListener("keydown", down)
+    }
+  }, [goBack, goForward])
+
+  const value = React.useMemo(
+    () => ({ canGoBack, canGoForward, goBack, goForward }),
+    [canGoBack, canGoForward, goBack, goForward]
+  )
+
+  return (
+    <HistoryContext value={value}>
+      <Suspense>
+        <PresetSync onPresetChange={onPresetChange} />
+      </Suspense>
+      {children}
+    </HistoryContext>
+  )
+}
+
+export function useHistory() {
+  const context = React.useContext(HistoryContext)
+  if (!context) {
+    throw new Error("useHistory must be used within HistoryProvider")
+  }
+  return context
+}

apps/v4/app/(app)/create/hooks/use-iframe-sync.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from "react"
+
+import type { DesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+type ParentToIframeMessage = {
+  type: "design-system-params"
+  data: DesignSystemSearchParams
+}
+
+export const isInIframe = () => {
+  if (typeof window === "undefined") {
+    return false
+  }
+  return window.self !== window.top
+}
+
+export function useIframeMessageListener<
+  Message extends ParentToIframeMessage,
+  MessageType extends Message["type"],
+>(
+  messageType: MessageType,
+  onMessage: (data: Extract<Message, { type: MessageType }>["data"]) => void
+) {
+  const onMessageRef = React.useRef(onMessage)
+
+  React.useEffect(() => {
+    onMessageRef.current = onMessage
+  }, [onMessage])
+
+  React.useEffect(() => {
+    if (!isInIframe()) {
+      return
+    }
+
+    const handleMessage = (event: MessageEvent) => {
+      if (event.data.type === messageType) {
+        onMessageRef.current(event.data.data)
+      }
+    }
+
+    window.addEventListener("message", handleMessage)
+    return () => {
+      window.removeEventListener("message", handleMessage)
+    }
+  }, [messageType])
+}
+
+export function sendToIframe<
+  Message extends ParentToIframeMessage,
+  MessageType extends Message["type"],
+>(
+  iframe: HTMLIFrameElement | null,
+  messageType: MessageType,
+  data: Extract<Message, { type: MessageType }>["data"]
+) {
+  if (!iframe?.contentWindow) {
+    return
+  }
+
+  iframe.contentWindow.postMessage(
+    {
+      type: messageType,
+      data,
+    },
+    "*"
+  )
+}

apps/v4/app/(app)/create/hooks/use-locks.tsx

@@ -0,0 +1,64 @@
+"use client"
+
+import * as React from "react"
+
+export type LockableParam =
+  | "style"
+  | "baseColor"
+  | "theme"
+  | "chartColor"
+  | "iconLibrary"
+  | "font"
+  | "fontHeading"
+  | "menuAccent"
+  | "menuColor"
+  | "radius"
+
+type LocksContextValue = {
+  locks: Set<LockableParam>
+  isLocked: (param: LockableParam) => boolean
+  toggleLock: (param: LockableParam) => void
+}
+
+const LocksContext = React.createContext<LocksContextValue | null>(null)
+
+export function LocksProvider({ children }: { children: React.ReactNode }) {
+  const [locks, setLocks] = React.useState<Set<LockableParam>>(new Set())
+  const locksRef = React.useRef(locks)
+  React.useEffect(() => {
+    locksRef.current = locks
+  }, [locks])
+
+  // Stable callback — reads from ref so it doesn't change on every lock toggle.
+  const isLocked = React.useCallback(
+    (param: LockableParam) => locksRef.current.has(param),
+    []
+  )
+
+  const toggleLock = React.useCallback((param: LockableParam) => {
+    setLocks((prev) => {
+      const next = new Set(prev)
+      if (next.has(param)) {
+        next.delete(param)
+      } else {
+        next.add(param)
+      }
+      return next
+    })
+  }, [])
+
+  const value = React.useMemo(
+    () => ({ locks, isLocked, toggleLock }),
+    [locks, isLocked, toggleLock]
+  )
+
+  return <LocksContext value={value}>{children}</LocksContext>
+}
+
+export function useLocks() {
+  const context = React.useContext(LocksContext)
+  if (!context) {
+    throw new Error("useLocks must be used within LocksProvider")
+  }
+  return context
+}

apps/v4/app/(app)/create/hooks/use-random.tsx

@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  BASE_COLORS,
+  getThemesForBaseColor,
+  iconLibraries,
+  MENU_ACCENTS,
+  MENU_COLORS,
+  RADII,
+  STYLES,
+  type FontHeadingValue,
+} from "@/registry/config"
+import { useLocks } from "@/app/(app)/create/hooks/use-locks"
+import { FONTS } from "@/app/(app)/create/lib/fonts"
+import {
+  applyBias,
+  RANDOMIZE_BIASES,
+  type RandomizeContext,
+} from "@/app/(app)/create/lib/randomize-biases"
+import {
+  isTranslucentMenuColor,
+  useDesignSystemSearchParams,
+} from "@/app/(app)/create/lib/search-params"
+
+function randomItem<T>(array: readonly T[]): T {
+  return array[Math.floor(Math.random() * array.length)]
+}
+
+export function useRandom() {
+  const { locks } = useLocks()
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const paramsRef = React.useRef(params)
+  React.useEffect(() => {
+    paramsRef.current = params
+  }, [params])
+
+  const randomize = React.useCallback(() => {
+    const selectedStyle = locks.has("style")
+      ? paramsRef.current.style
+      : randomItem(STYLES).name
+
+    const context: RandomizeContext = {
+      style: selectedStyle,
+    }
+
+    const availableBaseColors = applyBias(
+      BASE_COLORS,
+      context,
+      RANDOMIZE_BIASES.baseColors
+    )
+    const baseColor = locks.has("baseColor")
+      ? paramsRef.current.baseColor
+      : randomItem(availableBaseColors).name
+    context.baseColor = baseColor
+
+    const availableThemes = getThemesForBaseColor(baseColor)
+    const availableFonts = applyBias(FONTS, context, RANDOMIZE_BIASES.fonts)
+    const availableRadii = applyBias(RADII, context, RANDOMIZE_BIASES.radius)
+
+    const selectedTheme = locks.has("theme")
+      ? paramsRef.current.theme
+      : randomItem(availableThemes).name
+    context.theme = selectedTheme
+
+    const availableChartColors = applyBias(
+      getThemesForBaseColor(baseColor),
+      context,
+      RANDOMIZE_BIASES.chartColors
+    )
+    const selectedChartColor = locks.has("chartColor")
+      ? paramsRef.current.chartColor
+      : randomItem(availableChartColors).name
+    context.chartColor = selectedChartColor
+    const selectedFont = locks.has("font")
+      ? paramsRef.current.font
+      : randomItem(availableFonts).value
+    context.font = selectedFont
+
+    // Pick heading font: ~70% inherit, ~30% distinct with cross-category contrast.
+    let selectedFontHeading: FontHeadingValue
+    if (locks.has("fontHeading")) {
+      selectedFontHeading = paramsRef.current.fontHeading
+    } else if (Math.random() < 0.7) {
+      selectedFontHeading = "inherit"
+    } else {
+      const bodyType = availableFonts.find(
+        (f) => f.value === selectedFont
+      )?.type
+      const contrastFonts = availableFonts.filter(
+        (f) => f.type !== bodyType && f.value !== selectedFont
+      )
+      selectedFontHeading = (
+        contrastFonts.length > 0
+          ? randomItem(contrastFonts)
+          : randomItem(availableFonts)
+      ).value as FontHeadingValue
+    }
+    const selectedRadius = locks.has("radius")
+      ? paramsRef.current.radius
+      : randomItem(availableRadii).name
+    const selectedIconLibrary = locks.has("iconLibrary")
+      ? paramsRef.current.iconLibrary
+      : randomItem(Object.values(iconLibraries)).name
+    const lockedMenuAccent = locks.has("menuAccent")
+      ? paramsRef.current.menuAccent
+      : undefined
+    const availableMenuColors =
+      !locks.has("menuColor") && lockedMenuAccent === "bold"
+        ? MENU_COLORS.filter((menuColor) => {
+            return !isTranslucentMenuColor(menuColor.value)
+          })
+        : MENU_COLORS
+    const selectedMenuColor = locks.has("menuColor")
+      ? paramsRef.current.menuColor
+      : randomItem(availableMenuColors).value
+    const selectedMenuAccent =
+      locks.has("menuAccent") || isTranslucentMenuColor(selectedMenuColor)
+        ? paramsRef.current.menuAccent === "bold" &&
+          isTranslucentMenuColor(selectedMenuColor)
+          ? "subtle"
+          : paramsRef.current.menuAccent
+        : randomItem(MENU_ACCENTS).value
+
+    context.radius = selectedRadius
+
+    const nextParams = {
+      style: selectedStyle,
+      baseColor,
+      theme: selectedTheme,
+      chartColor: selectedChartColor,
+      iconLibrary: selectedIconLibrary,
+      font: selectedFont,
+      fontHeading: selectedFontHeading,
+      menuAccent: selectedMenuAccent,
+      menuColor: selectedMenuColor,
+      radius: selectedRadius,
+    }
+
+    // Keep the ref in sync so rapid repeats use the latest randomized state
+    // even before the URL state finishes committing.
+    paramsRef.current = {
+      ...paramsRef.current,
+      ...nextParams,
+    }
+
+    setParams(nextParams)
+  }, [setParams, locks])
+
+  const randomizeRef = React.useRef(randomize)
+  React.useEffect(() => {
+    randomizeRef.current = randomize
+  }, [randomize])
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "r" && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
+        e.preventDefault()
+        randomizeRef.current()
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => {
+      document.removeEventListener("keydown", down)
+    }
+  }, [])
+
+  return { randomize }
+}

apps/v4/app/(app)/create/hooks/use-reset.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import useSWR from "swr"
+
+import { DEFAULT_CONFIG, PRESETS } from "@/registry/config"
+import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+
+const RESET_DIALOG_KEY = "create:reset-dialog-open"
+export const RESET_FORWARD_TYPE = "reset-forward"
+
+export function useReset() {
+  const [params, setParams] = useDesignSystemSearchParams()
+  const { data: showResetDialog = false, mutate: setShowResetDialogData } =
+    useSWR<boolean>(RESET_DIALOG_KEY, {
+      fallbackData: false,
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+      revalidateOnReconnect: false,
+    })
+
+  const reset = React.useCallback(() => {
+    const preset =
+      PRESETS.find(
+        (preset) => preset.base === params.base && preset.style === params.style
+      ) ?? DEFAULT_CONFIG
+
+    setParams({
+      base: params.base,
+      style: params.style,
+      baseColor: preset.baseColor,
+      theme: preset.theme,
+      chartColor: preset.chartColor,
+      iconLibrary: preset.iconLibrary,
+      font: preset.font,
+      fontHeading: preset.fontHeading,
+      menuAccent: preset.menuAccent,
+      menuColor: preset.menuColor,
+      radius: preset.radius,
+      template: DEFAULT_CONFIG.template,
+      item: params.item,
+    })
+  }, [setParams, params.base, params.style, params.item])
+
+  const handleShowResetDialogChange = React.useCallback(
+    (open: boolean) => {
+      void setShowResetDialogData(open, { revalidate: false })
+    },
+    [setShowResetDialogData]
+  )
+
+  const confirmReset = React.useCallback(() => {
+    reset()
+    void setShowResetDialogData(false, { revalidate: false })
+  }, [reset, setShowResetDialogData])
+
+  const showResetDialogRef = React.useRef(showResetDialog)
+  React.useEffect(() => {
+    showResetDialogRef.current = showResetDialog
+  }, [showResetDialog])
+
+  const confirmResetRef = React.useRef(confirmReset)
+  React.useEffect(() => {
+    confirmResetRef.current = confirmReset
+  }, [confirmReset])
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "R" && e.shiftKey && !e.metaKey && !e.ctrlKey) {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
+        e.preventDefault()
+
+        // If the dialog is already open, confirm the reset.
+        if (showResetDialogRef.current) {
+          confirmResetRef.current()
+          return
+        }
+
+        handleShowResetDialogChange(true)
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => {
+      document.removeEventListener("keydown", down)
+    }
+  }, [handleShowResetDialogChange])
+
+  return {
+    reset,
+    showResetDialog,
+    setShowResetDialog: handleShowResetDialogChange,
+    confirmReset,
+  }
+}

apps/v4/app/(app)/create/hooks/use-theme-toggle.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { useMetaColor } from "@/hooks/use-meta-color"
+
+export function useThemeToggle() {
+  const { setTheme, resolvedTheme } = useTheme()
+  const { setMetaColor, metaColor } = useMetaColor()
+
+  React.useEffect(() => {
+    setMetaColor(metaColor)
+  }, [metaColor, setMetaColor])
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+  }, [resolvedTheme, setTheme])
+
+  // Listen for the D key to toggle theme.
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (
+        (e.key === "d" || e.key === "D") &&
+        !e.metaKey &&
+        !e.ctrlKey &&
+        !e.altKey
+      ) {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
+        e.preventDefault()
+        toggleTheme()
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [toggleTheme])
+
+  return { toggleTheme }
+}

apps/v4/app/(app)/create/layout.tsx

@@ -0,0 +1,18 @@
+import { Suspense } from "react"
+
+import { HistoryProvider } from "@/app/(app)/create/hooks/use-history"
+import { LocksProvider } from "@/app/(app)/create/hooks/use-locks"
+
+export default function CreateLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <LocksProvider>
+      <Suspense>
+        <HistoryProvider>{children}</HistoryProvider>
+      </Suspense>
+    </LocksProvider>
+  )
+}

apps/v4/app/(app)/create/lib/api.ts

@@ -0,0 +1,72 @@
+import "server-only"
+
+import { registryItemSchema } from "shadcn/schema"
+
+import { BASES, getThemesForBaseColor, type BaseName } from "@/registry/config"
+import {
+  ALLOWED_ITEM_TYPES,
+  EXCLUDED_ITEMS,
+} from "@/app/(app)/create/lib/constants"
+
+export async function getItemsForBase(base: BaseName) {
+  const { Index } = await import("@/registry/bases/__index__")
+  const index = Index[base]
+
+  if (!index) {
+    return []
+  }
+
+  return Object.values(index).filter(
+    (item) =>
+      ALLOWED_ITEM_TYPES.includes(item.type) &&
+      !EXCLUDED_ITEMS.includes(item.name)
+  )
+}
+
+export async function getBaseItem(name: string, base: BaseName) {
+  const { Index } = await import("@/registry/bases/__index__")
+  const index = Index[base]
+
+  if (!index?.[name] || EXCLUDED_ITEMS.includes(name)) {
+    return null
+  }
+
+  return registryItemSchema.parse(index[name])
+}
+
+export async function getBaseComponent(name: string, base: BaseName) {
+  const { Index } = await import("@/registry/bases/__index__")
+  const index = Index[base]
+
+  if (!index?.[name] || EXCLUDED_ITEMS.includes(name)) {
+    return null
+  }
+
+  return index[name].component
+}
+
+export async function getAllItems() {
+  const entries = await Promise.all(
+    BASES.map(async (base) => {
+      const items = await getItemsForBase(base.name as BaseName)
+      const filtered: Pick<
+        NonNullable<(typeof items)[number]>,
+        "name" | "title" | "type"
+      >[] = []
+      for (const item of items) {
+        if (item !== null && !/\d+$/.test(item.name)) {
+          filtered.push({
+            name: item.name,
+            title: item.title,
+            type: item.type,
+          })
+        }
+      }
+      return [base.name, filtered] as const
+    })
+  )
+  return Object.fromEntries(entries)
+}
+
+// Re-export for server-side use.
+export { getThemesForBaseColor }

apps/v4/app/(app)/create/lib/constants.ts

@@ -0,0 +1,3 @@
+export const ALLOWED_ITEM_TYPES = ["registry:block", "registry:example"]
+
+export const EXCLUDED_ITEMS = ["component-example"]

apps/v4/app/(app)/create/lib/fonts.ts

@@ -0,0 +1,233 @@
+import {
+  DM_Sans,
+  Figtree,
+  Geist,
+  Geist_Mono,
+  IBM_Plex_Sans,
+  Instrument_Sans,
+  Inter,
+  JetBrains_Mono,
+  Lora,
+  Manrope,
+  Merriweather,
+  Montserrat,
+  Noto_Sans,
+  Noto_Serif,
+  Nunito_Sans,
+  Outfit,
+  Oxanium,
+  Playfair_Display,
+  Public_Sans,
+  Raleway,
+  Roboto,
+  Roboto_Slab,
+  Source_Sans_3,
+  Space_Grotesk,
+} from "next/font/google"
+
+import { FONT_DEFINITIONS, type FontName } from "@/lib/font-definitions"
+
+type PreviewFont = ReturnType<typeof Inter>
+
+const geistSans = Geist({
+  subsets: ["latin"],
+  variable: "--font-geist-sans",
+})
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+})
+
+const notoSans = Noto_Sans({
+  subsets: ["latin"],
+  variable: "--font-noto-sans",
+})
+
+const nunitoSans = Nunito_Sans({
+  subsets: ["latin"],
+  variable: "--font-nunito-sans",
+})
+
+const figtree = Figtree({
+  subsets: ["latin"],
+  variable: "--font-figtree",
+})
+
+const roboto = Roboto({
+  subsets: ["latin"],
+  variable: "--font-roboto",
+})
+
+const raleway = Raleway({
+  subsets: ["latin"],
+  variable: "--font-raleway",
+})
+
+const dmSans = DM_Sans({
+  subsets: ["latin"],
+  variable: "--font-dm-sans",
+})
+
+const publicSans = Public_Sans({
+  subsets: ["latin"],
+  variable: "--font-public-sans",
+})
+
+const outfit = Outfit({
+  subsets: ["latin"],
+  variable: "--font-outfit",
+})
+
+const oxanium = Oxanium({
+  subsets: ["latin"],
+  variable: "--font-oxanium",
+})
+
+const manrope = Manrope({
+  subsets: ["latin"],
+  variable: "--font-manrope",
+})
+
+const spaceGrotesk = Space_Grotesk({
+  subsets: ["latin"],
+  variable: "--font-space-grotesk",
+})
+
+const montserrat = Montserrat({
+  subsets: ["latin"],
+  variable: "--font-montserrat",
+})
+
+const ibmPlexSans = IBM_Plex_Sans({
+  subsets: ["latin"],
+  variable: "--font-ibm-plex-sans",
+})
+
+const sourceSans3 = Source_Sans_3({
+  subsets: ["latin"],
+  variable: "--font-source-sans-3",
+})
+
+const instrumentSans = Instrument_Sans({
+  subsets: ["latin"],
+  variable: "--font-instrument-sans",
+})
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-jetbrains-mono",
+})
+
+const geistMono = Geist_Mono({
+  subsets: ["latin"],
+  variable: "--font-geist-mono",
+})
+
+const notoSerif = Noto_Serif({
+  subsets: ["latin"],
+  variable: "--font-noto-serif",
+})
+
+const robotoSlab = Roboto_Slab({
+  subsets: ["latin"],
+  variable: "--font-roboto-slab",
+})
+
+const merriweather = Merriweather({
+  subsets: ["latin"],
+  variable: "--font-merriweather",
+})
+
+const lora = Lora({
+  subsets: ["latin"],
+  variable: "--font-lora",
+})
+
+const playfairDisplay = Playfair_Display({
+  subsets: ["latin"],
+  variable: "--font-playfair-display",
+})
+
+const PREVIEW_FONTS = {
+  geist: geistSans,
+  inter,
+  "noto-sans": notoSans,
+  "nunito-sans": nunitoSans,
+  figtree,
+  roboto,
+  raleway,
+  "dm-sans": dmSans,
+  "public-sans": publicSans,
+  outfit,
+  oxanium,
+  manrope,
+  "space-grotesk": spaceGrotesk,
+  montserrat,
+  "ibm-plex-sans": ibmPlexSans,
+  "source-sans-3": sourceSans3,
+  "instrument-sans": instrumentSans,
+  "jetbrains-mono": jetbrainsMono,
+  "geist-mono": geistMono,
+  "noto-serif": notoSerif,
+  "roboto-slab": robotoSlab,
+  merriweather,
+  lora,
+  "playfair-display": playfairDisplay,
+} satisfies Record<FontName, PreviewFont>
+
+function createFontOption(name: FontName) {
+  const definition = FONT_DEFINITIONS.find((font) => font.name === name)
+
+  if (!definition) {
+    throw new Error(`Unknown font definition: ${name}`)
+  }
+
+  return {
+    name: definition.title,
+    value: definition.name,
+    font: PREVIEW_FONTS[name],
+    type: definition.type,
+  } as const
+}
+
+export const FONTS = [
+  createFontOption("geist"),
+  createFontOption("inter"),
+  createFontOption("noto-sans"),
+  createFontOption("nunito-sans"),
+  createFontOption("figtree"),
+  createFontOption("roboto"),
+  createFontOption("raleway"),
+  createFontOption("dm-sans"),
+  createFontOption("public-sans"),
+  createFontOption("outfit"),
+  createFontOption("oxanium"),
+  createFontOption("manrope"),
+  createFontOption("space-grotesk"),
+  createFontOption("montserrat"),
+  createFontOption("ibm-plex-sans"),
+  createFontOption("source-sans-3"),
+  createFontOption("instrument-sans"),
+  createFontOption("geist-mono"),
+  createFontOption("jetbrains-mono"),
+  createFontOption("noto-serif"),
+  createFontOption("roboto-slab"),
+  createFontOption("merriweather"),
+  createFontOption("lora"),
+  createFontOption("playfair-display"),
+] as const
+
+export type Font = (typeof FONTS)[number]
+
+export const FONT_HEADING_OPTIONS = [
+  {
+    name: "Inherit",
+    value: "inherit",
+    font: null,
+    type: "default",
+  },
+  ...FONTS,
+] as const
+
+export type FontHeadingOption = (typeof FONT_HEADING_OPTIONS)[number]

apps/v4/app/(app)/create/lib/merge-theme.ts

@@ -0,0 +1,32 @@
+import { registryItemSchema, type RegistryItem } from "shadcn/schema"
+
+import { BASE_COLORS, THEMES } from "@/registry/config"
+
+export function buildTheme(baseColorName: string, themeName: string) {
+  const baseColor = BASE_COLORS.find((c) => c.name === baseColorName)
+  const theme = THEMES.find((t) => t.name === themeName)
+
+  if (!baseColor || !theme) {
+    throw new Error(
+      `Base color "${baseColorName}" or theme "${themeName}" not found`
+    )
+  }
+
+  const mergedTheme: RegistryItem = {
+    name: `${baseColor.name}-${theme.name}`,
+    title: `${baseColor.title} ${theme.title}`,
+    type: "registry:theme",
+    cssVars: {
+      light: {
+        ...baseColor.cssVars?.light,
+        ...theme.cssVars?.light,
+      },
+      dark: {
+        ...baseColor.cssVars?.dark,
+        ...theme.cssVars?.dark,
+      },
+    },
+  }
+
+  return registryItemSchema.parse(mergedTheme)
+}

apps/v4/app/(app)/create/lib/preset-code.ts

@@ -0,0 +1,34 @@
+import { encodePreset, type PresetConfig } from "shadcn/preset"
+
+import { type DesignSystemConfig } from "@/registry/config"
+
+type PresetCodeConfig = Pick<
+  DesignSystemConfig,
+  | "style"
+  | "baseColor"
+  | "theme"
+  | "chartColor"
+  | "iconLibrary"
+  | "font"
+  | "fontHeading"
+  | "radius"
+  | "menuAccent"
+  | "menuColor"
+>
+
+export function getPresetCode(config: PresetCodeConfig) {
+  const presetConfig: Partial<PresetConfig> = {
+    style: config.style as PresetConfig["style"],
+    baseColor: config.baseColor as PresetConfig["baseColor"],
+    theme: config.theme as PresetConfig["theme"],
+    chartColor: config.chartColor as PresetConfig["chartColor"],
+    iconLibrary: config.iconLibrary as PresetConfig["iconLibrary"],
+    font: config.font as PresetConfig["font"],
+    fontHeading: config.fontHeading as PresetConfig["fontHeading"],
+    radius: config.radius as PresetConfig["radius"],
+    menuAccent: config.menuAccent as PresetConfig["menuAccent"],
+    menuColor: config.menuColor as PresetConfig["menuColor"],
+  }
+
+  return encodePreset(presetConfig)
+}

apps/v4/app/(app)/create/lib/preset-query.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest"
+
+import { resolvePresetOverrides } from "./preset-query"
+
+describe("resolvePresetOverrides", () => {
+  it("prefers explicit fontHeading and chartColor query params", () => {
+    const overrides = resolvePresetOverrides(
+      new URLSearchParams("fontHeading=playfair-display&chartColor=emerald"),
+      {
+        theme: "neutral",
+        chartColor: "blue",
+        fontHeading: "inherit",
+      }
+    )
+
+    expect(overrides).toEqual({
+      fontHeading: "playfair-display",
+      chartColor: "emerald",
+    })
+  })
+
+  it("falls back to decoded preset values when no overrides are present", () => {
+    const overrides = resolvePresetOverrides(new URLSearchParams(), {
+      theme: "neutral",
+      chartColor: "blue",
+      fontHeading: "inherit",
+    })
+
+    expect(overrides).toEqual({
+      fontHeading: "inherit",
+      chartColor: "blue",
+    })
+  })
+})

apps/v4/app/(app)/create/lib/preset-query.ts

@@ -0,0 +1,30 @@
+import { V1_CHART_COLOR_MAP, type PresetConfig } from "shadcn/preset"
+
+import { type ChartColorName, type FontHeadingValue } from "@/registry/config"
+
+type SearchParamsLike = Pick<URLSearchParams, "get" | "has">
+
+export function resolvePresetOverrides(
+  searchParams: SearchParamsLike,
+  decoded: Pick<PresetConfig, "theme" | "chartColor" | "fontHeading">
+) {
+  const hasFontHeadingOverride = searchParams.has("fontHeading")
+  const hasChartColorOverride = searchParams.has("chartColor")
+
+  const fontHeading = hasFontHeadingOverride
+    ? ((searchParams.get("fontHeading") ??
+        decoded.fontHeading) as FontHeadingValue)
+    : decoded.fontHeading
+
+  const chartColor = hasChartColorOverride
+    ? ((searchParams.get("chartColor") ??
+        decoded.chartColor ??
+        V1_CHART_COLOR_MAP[decoded.theme] ??
+        decoded.theme) as ChartColorName)
+    : (decoded.chartColor ?? V1_CHART_COLOR_MAP[decoded.theme] ?? decoded.theme)
+
+  return {
+    fontHeading,
+    chartColor,
+  }
+}

apps/v4/app/(app)/create/lib/randomize-biases.ts

@@ -0,0 +1,108 @@
+import type {
+  BaseColor,
+  BaseColorName,
+  Radius,
+  StyleName,
+  Theme,
+  ThemeName,
+} from "@/registry/config"
+
+import { type FONTS } from "./fonts"
+
+export type RandomizeContext = {
+  style?: StyleName
+  baseColor?: BaseColorName
+  theme?: ThemeName
+  chartColor?: string
+  iconLibrary?: string
+  font?: string
+  menuAccent?: string
+  menuColor?: string
+  radius?: string
+}
+
+export type BiasFilter<T> = (
+  items: readonly T[],
+  context: RandomizeContext
+) => readonly T[]
+
+export type RandomizeBiases = {
+  baseColors?: BiasFilter<BaseColor>
+  chartColors?: BiasFilter<Theme>
+  fonts?: BiasFilter<(typeof FONTS)[number]>
+  radius?: BiasFilter<Radius>
+}
+
+// Theme → chart color pairings for randomization.
+const CHART_COLOR_PAIRINGS: Record<string, string[]> = {
+  red: ["teal", "sky"],
+  orange: ["teal", "blue"],
+  amber: ["cyan", "indigo"],
+  yellow: ["sky", "violet"],
+  lime: ["indigo", "pink"],
+  green: ["purple", "rose"],
+  emerald: ["purple", "red"],
+  teal: ["fuchsia", "red"],
+  cyan: ["rose", "amber"],
+  sky: ["red", "yellow"],
+  blue: ["orange", "yellow"],
+  indigo: ["amber", "yellow"],
+  violet: ["yellow", "lime"],
+  purple: ["green", "lime"],
+  fuchsia: ["lime", "teal"],
+  pink: ["green", "cyan"],
+  rose: ["emerald", "sky"],
+}
+
+/**
+ * Configuration for randomization biases.
+ * Add biases here to influence random selection based on context.
+ */
+export const RANDOMIZE_BIASES: RandomizeBiases = {
+  baseColors: (baseColors) => {
+    return baseColors.filter((c) => c.name !== "gray")
+  },
+  fonts: (fonts, context) => {
+    // When style is lyra, only use mono fonts.
+    if (context.style === "lyra") {
+      return fonts.filter((font) => font.value === "jetbrains-mono")
+    }
+
+    return fonts
+  },
+  radius: (radii, context) => {
+    // When style is lyra, always use "none" radius.
+    if (context.style === "lyra") {
+      return radii.filter((radius) => radius.name === "none")
+    }
+
+    return radii
+  },
+  chartColors: (chartColors, context) => {
+    // When theme has a pairing, restrict chart colors to the paired values.
+    const pairing = context.theme ? CHART_COLOR_PAIRINGS[context.theme] : null
+    if (pairing) {
+      const filtered = chartColors.filter((c) => pairing.includes(c.name))
+      if (filtered.length > 0) {
+        return filtered
+      }
+    }
+
+    return chartColors
+  },
+}
+
+/**
+ * Applies biases to a list of items based on the current context.
+ */
+export function applyBias<T>(
+  items: readonly T[],
+  context: RandomizeContext,
+  biasFilter?: BiasFilter<T>
+): readonly T[] {
+  if (!biasFilter) {
+    return items
+  }
+
+  return biasFilter(items, context)
+}

apps/v4/app/(app)/create/lib/search-params.ts

@@ -0,0 +1,309 @@
+import * as React from "react"
+import { useSearchParams } from "next/navigation"
+import { useQueryStates } from "nuqs"
+import {
+  createLoader,
+  createSerializer,
+  parseAsBoolean,
+  parseAsInteger,
+  parseAsString,
+  parseAsStringLiteral,
+  type inferParserType,
+  type Options,
+} from "nuqs/server"
+import { decodePreset, isPresetCode } from "shadcn/preset"
+
+import {
+  BASE_COLORS,
+  BASES,
+  DEFAULT_CONFIG,
+  getThemesForBaseColor,
+  iconLibraries,
+  MENU_ACCENTS,
+  MENU_COLORS,
+  RADII,
+  STYLES,
+  THEMES,
+  type BaseColorName,
+  type BaseName,
+  type ChartColorName,
+  type FontHeadingValue,
+  type FontValue,
+  type IconLibraryName,
+  type MenuAccentValue,
+  type MenuColorValue,
+  type RadiusValue,
+  type StyleName,
+  type ThemeName,
+} from "@/registry/config"
+import { FONTS } from "@/app/(app)/create/lib/fonts"
+import { getPresetCode } from "@/app/(app)/create/lib/preset-code"
+import { resolvePresetOverrides } from "@/app/(app)/create/lib/preset-query"
+
+const designSystemSearchParams = {
+  preset: parseAsString.withDefault("b0"),
+  base: parseAsStringLiteral<BaseName>(BASES.map((b) => b.name)).withDefault(
+    DEFAULT_CONFIG.base
+  ),
+  item: parseAsString.withDefault("preview-02").withOptions({ shallow: true }),
+  iconLibrary: parseAsStringLiteral<IconLibraryName>(
+    Object.values(iconLibraries).map((i) => i.name)
+  ).withDefault(DEFAULT_CONFIG.iconLibrary),
+  style: parseAsStringLiteral<StyleName>(STYLES.map((s) => s.name)).withDefault(
+    DEFAULT_CONFIG.style
+  ),
+  theme: parseAsStringLiteral<ThemeName>(THEMES.map((t) => t.name)).withDefault(
+    DEFAULT_CONFIG.theme
+  ),
+  chartColor: parseAsStringLiteral<ChartColorName>(
+    THEMES.map((t) => t.name)
+  ).withDefault(DEFAULT_CONFIG.chartColor ?? "neutral"),
+  font: parseAsStringLiteral<FontValue>(FONTS.map((f) => f.value)).withDefault(
+    DEFAULT_CONFIG.font
+  ),
+  fontHeading: parseAsStringLiteral<FontHeadingValue>([
+    "inherit",
+    ...FONTS.map((f) => f.value),
+  ]).withDefault(DEFAULT_CONFIG.fontHeading),
+  baseColor: parseAsStringLiteral<BaseColorName>(
+    BASE_COLORS.map((b) => b.name)
+  ).withDefault(DEFAULT_CONFIG.baseColor),
+  menuAccent: parseAsStringLiteral<MenuAccentValue>(
+    MENU_ACCENTS.map((a) => a.value)
+  ).withDefault(DEFAULT_CONFIG.menuAccent),
+  menuColor: parseAsStringLiteral<MenuColorValue>(
+    MENU_COLORS.map((m) => m.value)
+  ).withDefault(DEFAULT_CONFIG.menuColor),
+  radius: parseAsStringLiteral<RadiusValue>(
+    RADII.map((r) => r.name)
+  ).withDefault("default"),
+  template: parseAsStringLiteral([
+    "next",
+    "next-monorepo",
+    "start",
+    "start-monorepo",
+    "react-router",
+    "react-router-monorepo",
+    "vite",
+    "vite-monorepo",
+    "astro",
+    "astro-monorepo",
+    "laravel",
+  ] as const).withDefault("next"),
+  rtl: parseAsBoolean.withDefault(false),
+  size: parseAsInteger.withDefault(100),
+  custom: parseAsBoolean.withDefault(false),
+}
+
+// Design system param keys that get encoded into the preset code.
+const DESIGN_SYSTEM_KEYS = [
+  "style",
+  "baseColor",
+  "theme",
+  "chartColor",
+  "iconLibrary",
+  "font",
+  "fontHeading",
+  "radius",
+  "menuAccent",
+  "menuColor",
+] as const
+
+function normalizeFontHeading(
+  font: FontValue,
+  fontHeading: FontHeadingValue
+): FontHeadingValue {
+  // Persist "same as body" as an explicit inherit sentinel so the body font
+  // can change later without freezing headings to a concrete previous value.
+  return fontHeading === font ? "inherit" : fontHeading
+}
+
+// Non-design-system keys that get passed through as-is.
+// `base` is not encoded in preset codes — it's an architectural choice, not visual.
+const NON_DESIGN_SYSTEM_KEYS = [
+  "base",
+  "item",
+  "preset",
+  "template",
+  "rtl",
+  "size",
+  "custom",
+] as const
+
+export const loadDesignSystemSearchParams = createLoader(
+  designSystemSearchParams
+)
+
+export const serializeDesignSystemSearchParams = createSerializer(
+  designSystemSearchParams
+)
+
+export type DesignSystemSearchParams = inferParserType<
+  typeof designSystemSearchParams
+>
+
+export function isTranslucentMenuColor(
+  menuColor?: MenuColorValue | null
+): menuColor is "default-translucent" | "inverted-translucent" {
+  return (
+    menuColor === "default-translucent" || menuColor === "inverted-translucent"
+  )
+}
+
+function normalizePartialDesignSystemParams(
+  params: Partial<DesignSystemSearchParams>
+): Partial<DesignSystemSearchParams> {
+  if (
+    params.menuAccent === "bold" &&
+    isTranslucentMenuColor(params.menuColor ?? undefined)
+  ) {
+    return {
+      ...params,
+      menuAccent: "subtle",
+    }
+  }
+
+  return params
+}
+
+function normalizeDesignSystemParams(
+  params: DesignSystemSearchParams
+): DesignSystemSearchParams {
+  let result = {
+    ...params,
+    fontHeading: normalizeFontHeading(params.font, params.fontHeading),
+  }
+
+  // Validate theme and chartColor against baseColor.
+  if (result.baseColor) {
+    const available = getThemesForBaseColor(result.baseColor)
+    const themeValid = available.some((t) => t.name === result.theme)
+    const chartColorValid = available.some((t) => t.name === result.chartColor)
+
+    if (!themeValid || !chartColorValid) {
+      const fallback = (available[0]?.name ?? result.baseColor) as ThemeName
+      result = {
+        ...result,
+        ...(!themeValid && { theme: fallback }),
+        ...(!chartColorValid && { chartColor: fallback as ChartColorName }),
+      }
+    }
+  }
+
+  if (
+    result.menuAccent === "bold" &&
+    isTranslucentMenuColor(result.menuColor)
+  ) {
+    return {
+      ...result,
+      menuAccent: "subtle",
+    }
+  }
+
+  return result
+}
+
+// If preset param exists, decode it and overlay on raw params.
+// V1 presets don't encode chartColor — fall back to the colored
+// theme that base-color themes originally borrowed charts from.
+type SearchParamsLike = Pick<URLSearchParams, "get" | "has">
+
+function resolvePresetParams(
+  rawParams: DesignSystemSearchParams,
+  searchParams: SearchParamsLike
+) {
+  if (rawParams.preset && isPresetCode(rawParams.preset)) {
+    const decoded = decodePreset(rawParams.preset)
+    if (decoded) {
+      const presetOverrides = resolvePresetOverrides(searchParams, decoded)
+      return normalizeDesignSystemParams({
+        ...decoded,
+        ...presetOverrides,
+        base: rawParams.base,
+        item: rawParams.item,
+        preset: rawParams.preset,
+        template: rawParams.template,
+        rtl: rawParams.rtl,
+        size: rawParams.size,
+        custom: rawParams.custom,
+      })
+    }
+  }
+  return normalizeDesignSystemParams(rawParams)
+}
+
+// Wraps nuqs useQueryStates with transparent preset encoding/decoding.
+// - Reads: if ?preset=CODE is in the URL, decodes it and returns individual values.
+// - Writes: when design system params are set, encodes them into a preset code.
+export function useDesignSystemSearchParams(options: Options = {}) {
+  const searchParams = useSearchParams()
+  const [rawParams, rawSetParams] = useQueryStates(designSystemSearchParams, {
+    shallow: false,
+    history: "push",
+    ...options,
+  })
+
+  const params = React.useMemo(
+    () => resolvePresetParams(rawParams, searchParams),
+    [rawParams, searchParams]
+  )
+
+  // Use ref so setParams callback stays stable across renders.
+  const paramsRef = React.useRef(params)
+  React.useEffect(() => {
+    paramsRef.current = params
+  }, [params])
+
+  type RawSetParamsInput = Parameters<typeof rawSetParams>[0]
+
+  const setParams = React.useCallback(
+    (
+      updates:
+        | Partial<DesignSystemSearchParams>
+        | ((
+            old: DesignSystemSearchParams
+          ) => Partial<DesignSystemSearchParams>),
+      setOptions?: Options
+    ) => {
+      const resolvedUpdates = normalizePartialDesignSystemParams(
+        typeof updates === "function" ? updates(paramsRef.current) : updates
+      )
+
+      const hasDesignSystemUpdate = DESIGN_SYSTEM_KEYS.some(
+        (key) => key in resolvedUpdates
+      )
+
+      if (!hasDesignSystemUpdate) {
+        // No design system change, pass through directly.
+        return rawSetParams(resolvedUpdates as RawSetParamsInput, setOptions)
+      }
+
+      // Merge current decoded values with updates.
+      const merged = normalizeDesignSystemParams({
+        ...paramsRef.current,
+        ...resolvedUpdates,
+      })
+      // Encode design system fields into a preset code.
+      // Cast needed: merged values may include null from nuqs resets,
+      // but encodePreset handles missing values by falling back to defaults.
+      const code = getPresetCode(merged)
+      // Build update: set preset, clear individual DS params from URL.
+      const rawUpdate: Record<string, unknown> = { preset: code }
+      for (const key of DESIGN_SYSTEM_KEYS) {
+        rawUpdate[key] = null
+      }
+
+      // Pass through non-DS params that were explicitly in the update.
+      for (const key of NON_DESIGN_SYSTEM_KEYS) {
+        if (key in resolvedUpdates) {
+          rawUpdate[key] = (resolvedUpdates as Record<string, unknown>)[key]
+        }
+      }
+
+      return rawSetParams(rawUpdate as RawSetParamsInput, setOptions)
+    },
+    [rawSetParams]
+  )
+
+  return [params, setParams] as const
+}