feat(shadcn): remove npm flags

.changeset/brave-cheetahs-smile.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add support for TanStack Start

.changeset/cold-impalas-call.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+support for version detection in monorepo

.changeset/config.json

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

.changeset/cool-mails-bake.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+upgrade @antfu/ni

.changeset/curly-impalas-give.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+allow silent mode with npm

.changeset/curvy-taxis-help.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+do not add ring for v3

.changeset/few-houses-impress.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add theme vars support

.changeset/five-hounds-tell.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add tailwind version detection

.changeset/fluffy-years-knock.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add --base-color flag

.changeset/fresh-cherries-brush.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add support for tailwind v4

.changeset/great-olives-flow.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+default to css vars. add --no-css-variables

.changeset/green-eels-shout.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+cache registry calls

.changeset/large-timers-kneel.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+replace tailwindcss-animate with tw-animate-css

.changeset/metal-queens-hang.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+add --template flag

.changeset/new-cheetahs-dance.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+default for new-york for v4

.changeset/nine-llamas-sell.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+fix handling of sidebar colors

.changeset/ninety-needles-brake.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+do not overwrite user defined vars

.changeset/orange-papayas-relax.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+fix cn import bug in monorepo

.changeset/proud-snails-switch.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+filter out deprecated from --all

.changeset/quiet-grapes-poke.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add oklch base color

.changeset/serious-geese-reply.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+hotswap style for v4

.changeset/shaggy-months-tease.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+check for empty css vars

.changeset/six-queens-argue.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+only show deprecated for new projects

.changeset/slow-tools-relax.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add warning for deprecated components

.changeset/spotty-plants-juggle.md

@@ -0,0 +1,5 @@
+---
+"shadcn": patch
+---
+
+fix tanstack check

.changeset/tasty-walls-drum.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add support for route install for react-router and laravel

.claude/settings.local.json

@@ -1,13 +0,0 @@
-{
-  "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

@@ -1,22 +0,0 @@
----
-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 { execSync } from "child_process"
+import { exec } 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 pnpm-lock.yaml file.
-// So we also run `pnpm install`, which does this update.
+// 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.
 // This is a workaround until this is handled automatically by `changeset version`.
 // See https://github.com/changesets/changesets/issues/421.
-execSync("npx changeset version", { stdio: "inherit" })
-execSync("pnpm install --lockfile-only", { stdio: "inherit" })
+exec("npx changeset version")
+exec("npm install")

.github/dependabot.yml

@@ -1,46 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    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,9 +77,6 @@ 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
+          days-before-issue-stale: 365 # ~2 years
           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"
-          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
+          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
       - 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
+          days-before-pr-stale: 365 # PRs with no activity in over 90 days will be marked as stale
           remove-pr-stale-when-updated: true
-          exempt-pr-labels: "roadmap,next,bug"
+          exempt-pr-labels: "roadmap,nex,awaiting-approval,work-in-progress"
           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. (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
+          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

.github/workflows/prerelease.yml

@@ -7,11 +7,6 @@ on:
     types: [labeled]
     branches:
       - main
-
-permissions:
-  id-token: write
-  contents: read
-
 jobs:
   prerelease:
     if: |
@@ -23,7 +18,7 @@ jobs:
 
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
@@ -32,22 +27,23 @@ jobs:
         with:
           version: 9.0.6
 
-      - name: Use Node.js 20
-        uses: actions/setup-node@v4
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
         with:
-          node-version: 20
-          registry-url: "https://registry.npmjs.org"
+          node-version: 18
           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,11 +7,6 @@ on:
     branches:
       - main
 
-permissions:
-  id-token: write
-  contents: write
-  pull-requests: write
-
 jobs:
   release:
     if: ${{ github.repository_owner == 'shadcn-ui' }}
@@ -28,16 +23,13 @@ jobs:
         with:
           version: 9.0.6
 
-      - name: Use Node.js 20
-        uses: actions/setup-node@v4
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
         with:
-          node-version: 20
-          registry-url: "https://registry.npmjs.org"
+          version: 9.0.6
+          node-version: 18
           cache: "pnpm"
 
-      - name: Update npm for OIDC support
-        run: npm install -g npm@latest
-
       - name: Install NPM Dependencies
         run: pnpm install
 
@@ -49,7 +41,7 @@ jobs:
 
       - name: Create Version PR or Publish to NPM
         id: changesets
-        uses: changesets/action@v1
+        uses: changesets/action@v1.4.1
         with:
           commit: "chore(release): version packages"
           title: "chore(release): version packages"
@@ -57,4 +49,5 @@ 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,9 +8,6 @@ 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:
@@ -19,7 +16,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 22
+          node-version: 18
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm

.github/workflows/validate-registries.yml

@@ -1,129 +0,0 @@
-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,7 +15,6 @@ build
 
 # misc
 .DS_Store
-.eslintcache
 *.pem
 
 # debug
@@ -40,8 +39,3 @@ tsconfig.tsbuildinfo
 .idea
 .fleet
 .vscode
-
-.notes
-.playwright-mcp
-shadcn-workspace
-.codex-artifacts

.prettierignore

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

.vscode/settings.json

@@ -3,18 +3,15 @@
     { "pattern": "apps/*/" },
     { "pattern": "packages/*/" }
   ],
-  "tailwindCSS.classFunctions": ["cva", "cn"],
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]?([^\"'`]+)[\"'`]?"],
+    ["cn\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+    // "cva\\(([^)]*)\\)",
+    // "[\"'`]([^\"'`]*).*?[\"'`]"
+  ],
   "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,25 +20,28 @@ This repository is structured as follows:
 
 ```
 apps
-└── v4
+└── www
     ├── app
     ├── components
     ├── content
     └── registry
-        └── new-york-v4
+        ├── default
+        │   ├── example
+        │   └── ui
+        └── new-york
             ├── example
             └── ui
 packages
-└── shadcn
+└── cli
 ```
 
-| 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.                    |
+| 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.                 |
 
 ## Development
 
@@ -79,26 +82,32 @@ You can use the `pnpm --filter=[WORKSPACE]` command to start the development pro
 1. To run the `ui.shadcn.com` website:
 
 ```bash
-pnpm --filter=v4 dev
+pnpm --filter=www dev
 ```
 
-2. To run the `shadcn` package:
+2. To run the `shadcn-ui` package:
 
 ```bash
-pnpm --filter=shadcn dev
+pnpm --filter=shadcn-ui dev
 ```
 
 ## Running the CLI Locally
 
 To run the CLI locally, you can follow the workflow:
 
-1. Start by running the dev server:
+1. Start by running the registry (main site) to make sure the components are up to date:
 
    ```bash
-   pnpm dev
+   pnpm www:dev
    ```
 
-2. In another terminal tab, test the CLI by running:
+2. Run the development script for the CLI:
+
+   ```bash
+   pnpm shadcn:dev
+   ```
+
+3. In another terminal tab, test the CLI by running:
 
    ```bash
    pnpm shadcn
@@ -110,27 +119,36 @@ 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 `v4` workspace. You can run the documentation locally by running the following command:
+The documentation for this project is located in the `www` workspace. You can run the documentation locally by running the following command:
 
 ```bash
-pnpm --filter=v4 dev
+pnpm --filter=www dev
 ```
 
-Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/v4/content/docs` directory.
+Documentation is written using [MDX](https://mdxjs.com). You can find the documentation files in the `apps/www/content/docs` directory.
 
 ## Components
 
-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.
+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.
 
 ```bash
 apps
-└── v4
+└── www
     └── registry
-        └── new-york-v4
+        ├── default
+        │   ├── example
+        │   └── ui
+        └── new-york
             ├── example
             └── ui
 ```
@@ -139,7 +157,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 registry:build` to update the registry.
+3. You run `pnpm build:registry` to update the registry.
 
 ## Commit Convention
 
@@ -178,9 +196,9 @@ If you have a request for a new component, please open a discussion on GitHub. W
 
 ## 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).
+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).
 
-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.
+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.
 
 ## Testing
 

README.md

@@ -1,12 +1,12 @@
 # shadcn/ui
 
-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**.
+Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. **Use this to build your own component library**.
 
-![hero](apps/v4/public/opengraph-image.png)
+![hero](apps/www/public/og.jpg)
 
 ## Documentation
 
-Visit https://ui.shadcn.com/docs to view the documentation.
+Visit http://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](./LICENSE.md).
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).

SECURITY.md

@@ -1,9 +0,0 @@
-# Security Policy
-
-If you believe you have found a security vulnerability, we encourage you to let us know right away.
-
-We will investigate all legitimate reports and do our best to quickly fix the problem.
-
-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](https://github.com/shadcn-ui/ui/security/advisories/new) button.

apps/v4/.env.example

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

apps/v4/.gitignore

@@ -32,7 +32,6 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
-!.env.example
 
 # vercel
 .vercel
@@ -40,9 +39,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-
-# generated content
-.contentlayer
-.content-collections
-.source

apps/v4/.prettierignore

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

apps/v4/__registry__/.autogenerated

@@ -0,0 +1 @@
+// The content of this directory is autogenerated by the registry server.

apps/v4/__registry__/README.md

@@ -0,0 +1 @@
+> Files inside this directory is autogenerated by `./scripts/build-registry.ts`. **Do not edit them manually.** - shadcn

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

@@ -1,135 +0,0 @@
-"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

@@ -1,120 +0,0 @@
-"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

@@ -1,58 +0,0 @@
-"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

@@ -1,32 +0,0 @@
-"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

@@ -1,45 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,35 +0,0 @@
-"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

@@ -1,52 +0,0 @@
-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

@@ -1,68 +0,0 @@
-"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

@@ -1,98 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,78 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,453 +0,0 @@
-"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

@@ -1,21 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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,93 +0,0 @@
-import { type Metadata } from "next"
-import Image from "next/image"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import { ExamplesNav } from "@/components/examples-nav"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { PageNav } from "@/components/page-nav"
-import { ThemeSelector } from "@/components/theme-selector"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-import { RootComponents } from "./components"
-
-const title = "The Foundation for your Design System"
-const description =
-  "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
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-}
-
-export default function IndexPage() {
-  return (
-    <div className="flex flex-1 flex-col">
-      <PageHeader>
-        <Announcement />
-        <PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild size="sm" className="h-[31px] rounded-lg">
-            <Link href="/create">New Project</Link>
-          </Button>
-          <Button asChild size="sm" variant="ghost" className="rounded-lg">
-            <Link href="/docs/components">View Components</Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      <div className="container-wrapper flex-1 pb-6">
-        <div className="container overflow-hidden">
-          <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}
-              height={875}
-              alt="Dashboard"
-              className="block dark:hidden"
-              priority
-            />
-            <Image
-              src="/r/styles/new-york-v4/dashboard-01-dark.png"
-              width={1400}
-              height={875}
-              alt="Dashboard"
-              className="hidden dark:block"
-              priority
-            />
-          </section>
-          <section className="hidden theme-container md:block">
-            <RootComponents />
-          </section>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,34 +0,0 @@
-import { getAllBlockIds } from "@/lib/blocks"
-import { registryCategories } from "@/lib/categories"
-import { BlockDisplay } from "@/components/block-display"
-import { getActiveStyle } from "@/registry/_legacy-styles"
-
-export const revalidate = false
-export const dynamic = "force-static"
-export const dynamicParams = false
-
-export async function generateStaticParams() {
-  return registryCategories.map((category) => ({
-    categories: [category.slug],
-  }))
-}
-
-export default async function BlocksPage({
-  params,
-}: {
-  params: Promise<{ categories?: string[] }>
-}) {
-  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} styleName={activeStyle.name} />
-      ))}
-    </div>
-  )
-}

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

@@ -1,79 +0,0 @@
-import { type Metadata } from "next"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import { BlocksNav } from "@/components/blocks-nav"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { PageNav } from "@/components/page-nav"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-const title = "Building Blocks for the Web"
-const description =
-  "Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever."
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-}
-
-export default function BlocksLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <>
-      <PageHeader>
-        <Announcement />
-        <PageHeaderHeading>{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild size="sm">
-            <a href="#blocks">Browse Blocks</a>
-          </Button>
-          <Button asChild variant="ghost" size="sm">
-            <Link href="/docs/components">View Components</Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      <PageNav id="blocks">
-        <BlocksNav />
-        <Button
-          asChild
-          variant="secondary"
-          size="sm"
-          className="mr-7 hidden shadow-none lg:flex"
-        >
-          <Link href="/blocks/sidebar">Browse all blocks</Link>
-        </Button>
-      </PageNav>
-      <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,35 +0,0 @@
-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"
-export const revalidate = false
-
-const FEATURED_BLOCKS = [
-  "dashboard-01",
-  "sidebar-07",
-  "sidebar-03",
-  "login-03",
-  "login-04",
-]
-
-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} styleName={activeStyle.name} />
-      ))}
-      <div className="container-wrapper">
-        <div className="container flex justify-center py-6">
-          <Button asChild variant="outline">
-            <Link href="/blocks/sidebar">Browse more blocks</Link>
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,96 +0,0 @@
-import * as React from "react"
-import { notFound } from "next/navigation"
-
-import { cn } from "@/lib/utils"
-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
-export const dynamic = "force-static"
-export const dynamicParams = false
-
-interface ChartPageProps {
-  params: Promise<{
-    type: string
-  }>
-}
-
-const chartTypes = [
-  "area",
-  "bar",
-  "line",
-  "pie",
-  "radar",
-  "radial",
-  "tooltip",
-] as const
-type ChartType = (typeof chartTypes)[number]
-
-export async function generateStaticParams() {
-  return chartTypes.map((type) => ({
-    type,
-  }))
-}
-
-export default async function ChartPage({ params }: ChartPageProps) {
-  const { type } = await params
-
-  if (!chartTypes.includes(type as ChartType)) {
-    return notFound()
-  }
-
-  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">
-      <h2 className="sr-only">
-        {type.charAt(0).toUpperCase() + type.slice(1)} Charts
-      </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 = prefetchedCharts[index]
-          return chart ? (
-            <ChartDisplay
-              key={chart.name}
-              chart={chart}
-              style={activeStyle.name}
-              className={cn(chart.fullWidth && "md:col-span-2 lg:col-span-3")}
-            />
-          ) : (
-            <div
-              key={`empty-${index}`}
-              className="hidden aspect-square w-full rounded-lg border border-dashed xl:block"
-            />
-          )
-        })}
-      </div>
-    </div>
-  )
-}

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

@@ -1,275 +1,76 @@
-import type * as React from "react"
+export { ChartAreaDefault } from "@/registry/new-york-v4/charts/chart-area-default"
+export { ChartAreaLinear } from "@/registry/new-york-v4/charts/chart-area-linear"
+export { ChartAreaStep } from "@/registry/new-york-v4/charts/chart-area-step"
+export { ChartAreaLegend } from "@/registry/new-york-v4/charts/chart-area-legend"
+export { ChartAreaStacked } from "@/registry/new-york-v4/charts/chart-area-stacked"
+export { ChartAreaStackedExpand } from "@/registry/new-york-v4/charts/chart-area-stacked-expand"
+export { ChartAreaIcons } from "@/registry/new-york-v4/charts/chart-area-icons"
+export { ChartAreaGradient } from "@/registry/new-york-v4/charts/chart-area-gradient"
+export { ChartAreaAxes } from "@/registry/new-york-v4/charts/chart-area-axes"
+export { ChartAreaInteractive } from "@/registry/new-york-v4/charts/chart-area-interactive"
 
-import { ChartAreaAxes } from "@/registry/new-york-v4/charts/chart-area-axes"
-import { ChartAreaDefault } from "@/registry/new-york-v4/charts/chart-area-default"
-import { ChartAreaGradient } from "@/registry/new-york-v4/charts/chart-area-gradient"
-import { ChartAreaIcons } from "@/registry/new-york-v4/charts/chart-area-icons"
-import { ChartAreaInteractive } from "@/registry/new-york-v4/charts/chart-area-interactive"
-import { ChartAreaLegend } from "@/registry/new-york-v4/charts/chart-area-legend"
-import { ChartAreaLinear } from "@/registry/new-york-v4/charts/chart-area-linear"
-import { ChartAreaStacked } from "@/registry/new-york-v4/charts/chart-area-stacked"
-import { ChartAreaStackedExpand } from "@/registry/new-york-v4/charts/chart-area-stacked-expand"
-import { ChartAreaStep } from "@/registry/new-york-v4/charts/chart-area-step"
-import { ChartBarActive } from "@/registry/new-york-v4/charts/chart-bar-active"
-import { ChartBarDefault } from "@/registry/new-york-v4/charts/chart-bar-default"
-import { ChartBarHorizontal } from "@/registry/new-york-v4/charts/chart-bar-horizontal"
-import { ChartBarInteractive } from "@/registry/new-york-v4/charts/chart-bar-interactive"
-import { ChartBarLabel } from "@/registry/new-york-v4/charts/chart-bar-label"
-import { ChartBarLabelCustom } from "@/registry/new-york-v4/charts/chart-bar-label-custom"
-import { ChartBarMixed } from "@/registry/new-york-v4/charts/chart-bar-mixed"
-import { ChartBarMultiple } from "@/registry/new-york-v4/charts/chart-bar-multiple"
-import { ChartBarNegative } from "@/registry/new-york-v4/charts/chart-bar-negative"
-import { ChartBarStacked } from "@/registry/new-york-v4/charts/chart-bar-stacked"
-import { ChartLineDefault } from "@/registry/new-york-v4/charts/chart-line-default"
-import { ChartLineDots } from "@/registry/new-york-v4/charts/chart-line-dots"
-import { ChartLineDotsColors } from "@/registry/new-york-v4/charts/chart-line-dots-colors"
-import { ChartLineDotsCustom } from "@/registry/new-york-v4/charts/chart-line-dots-custom"
-import { ChartLineInteractive } from "@/registry/new-york-v4/charts/chart-line-interactive"
-import { ChartLineLabel } from "@/registry/new-york-v4/charts/chart-line-label"
-import { ChartLineLabelCustom } from "@/registry/new-york-v4/charts/chart-line-label-custom"
-import { ChartLineLinear } from "@/registry/new-york-v4/charts/chart-line-linear"
-import { ChartLineMultiple } from "@/registry/new-york-v4/charts/chart-line-multiple"
-import { ChartLineStep } from "@/registry/new-york-v4/charts/chart-line-step"
-import { ChartPieDonut } from "@/registry/new-york-v4/charts/chart-pie-donut"
-import { ChartPieDonutActive } from "@/registry/new-york-v4/charts/chart-pie-donut-active"
-import { ChartPieDonutText } from "@/registry/new-york-v4/charts/chart-pie-donut-text"
-import { ChartPieInteractive } from "@/registry/new-york-v4/charts/chart-pie-interactive"
-import { ChartPieLabel } from "@/registry/new-york-v4/charts/chart-pie-label"
-import { ChartPieLabelCustom } from "@/registry/new-york-v4/charts/chart-pie-label-custom"
-import { ChartPieLabelList } from "@/registry/new-york-v4/charts/chart-pie-label-list"
-import { ChartPieLegend } from "@/registry/new-york-v4/charts/chart-pie-legend"
-import { ChartPieSeparatorNone } from "@/registry/new-york-v4/charts/chart-pie-separator-none"
-import { ChartPieSimple } from "@/registry/new-york-v4/charts/chart-pie-simple"
-import { ChartPieStacked } from "@/registry/new-york-v4/charts/chart-pie-stacked"
-import { ChartRadarDefault } from "@/registry/new-york-v4/charts/chart-radar-default"
-import { ChartRadarDots } from "@/registry/new-york-v4/charts/chart-radar-dots"
-import { ChartRadarGridCircle } from "@/registry/new-york-v4/charts/chart-radar-grid-circle"
-import { ChartRadarGridCircleFill } from "@/registry/new-york-v4/charts/chart-radar-grid-circle-fill"
-import { ChartRadarGridCircleNoLines } from "@/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines"
-import { ChartRadarGridCustom } from "@/registry/new-york-v4/charts/chart-radar-grid-custom"
-import { ChartRadarGridFill } from "@/registry/new-york-v4/charts/chart-radar-grid-fill"
-import { ChartRadarGridNone } from "@/registry/new-york-v4/charts/chart-radar-grid-none"
-import { ChartRadarIcons } from "@/registry/new-york-v4/charts/chart-radar-icons"
-import { ChartRadarLabelCustom } from "@/registry/new-york-v4/charts/chart-radar-label-custom"
-import { ChartRadarLegend } from "@/registry/new-york-v4/charts/chart-radar-legend"
-import { ChartRadarLinesOnly } from "@/registry/new-york-v4/charts/chart-radar-lines-only"
-import { ChartRadarMultiple } from "@/registry/new-york-v4/charts/chart-radar-multiple"
-import { ChartRadarRadius } from "@/registry/new-york-v4/charts/chart-radar-radius"
-import { ChartRadialGrid } from "@/registry/new-york-v4/charts/chart-radial-grid"
-import { ChartRadialLabel } from "@/registry/new-york-v4/charts/chart-radial-label"
-import { ChartRadialShape } from "@/registry/new-york-v4/charts/chart-radial-shape"
-import { ChartRadialSimple } from "@/registry/new-york-v4/charts/chart-radial-simple"
-import { ChartRadialStacked } from "@/registry/new-york-v4/charts/chart-radial-stacked"
-import { ChartRadialText } from "@/registry/new-york-v4/charts/chart-radial-text"
-import { ChartTooltipAdvanced } from "@/registry/new-york-v4/charts/chart-tooltip-advanced"
-import { ChartTooltipDefault } from "@/registry/new-york-v4/charts/chart-tooltip-default"
-import { ChartTooltipFormatter } from "@/registry/new-york-v4/charts/chart-tooltip-formatter"
-import { ChartTooltipIcons } from "@/registry/new-york-v4/charts/chart-tooltip-icons"
-import { ChartTooltipIndicatorLine } from "@/registry/new-york-v4/charts/chart-tooltip-indicator-line"
-import { ChartTooltipIndicatorNone } from "@/registry/new-york-v4/charts/chart-tooltip-indicator-none"
-import { ChartTooltipLabelCustom } from "@/registry/new-york-v4/charts/chart-tooltip-label-custom"
-import { ChartTooltipLabelFormatter } from "@/registry/new-york-v4/charts/chart-tooltip-label-formatter"
-import { ChartTooltipLabelNone } from "@/registry/new-york-v4/charts/chart-tooltip-label-none"
+export { ChartBarDefault } from "@/registry/new-york-v4/charts/chart-bar-default"
+export { ChartBarHorizontal } from "@/registry/new-york-v4/charts/chart-bar-horizontal"
+export { ChartBarMultiple } from "@/registry/new-york-v4/charts/chart-bar-multiple"
+export { ChartBarStacked } from "@/registry/new-york-v4/charts/chart-bar-stacked"
+export { ChartBarLabel } from "@/registry/new-york-v4/charts/chart-bar-label"
+export { ChartBarLabelCustom } from "@/registry/new-york-v4/charts/chart-bar-label-custom"
+export { ChartBarMixed } from "@/registry/new-york-v4/charts/chart-bar-mixed"
+export { ChartBarActive } from "@/registry/new-york-v4/charts/chart-bar-active"
+export { ChartBarNegative } from "@/registry/new-york-v4/charts/chart-bar-negative"
+export { ChartBarInteractive } from "@/registry/new-york-v4/charts/chart-bar-interactive"
 
-type ChartComponent = React.ComponentType
+export { ChartLineDefault } from "@/registry/new-york-v4/charts/chart-line-default"
+export { ChartLineLinear } from "@/registry/new-york-v4/charts/chart-line-linear"
+export { ChartLineStep } from "@/registry/new-york-v4/charts/chart-line-step"
+export { ChartLineMultiple } from "@/registry/new-york-v4/charts/chart-line-multiple"
+export { ChartLineDots } from "@/registry/new-york-v4/charts/chart-line-dots"
+export { ChartLineDotsCustom } from "@/registry/new-york-v4/charts/chart-line-dots-custom"
+export { ChartLineDotsColors } from "@/registry/new-york-v4/charts/chart-line-dots-colors"
+export { ChartLineLabel } from "@/registry/new-york-v4/charts/chart-line-label"
+export { ChartLineLabelCustom } from "@/registry/new-york-v4/charts/chart-line-label-custom"
+export { ChartLineInteractive } from "@/registry/new-york-v4/charts/chart-line-interactive"
 
-interface ChartItem {
-  id: string
-  component: ChartComponent
-  fullWidth?: boolean
-}
+export { ChartPieSimple } from "@/registry/new-york-v4/charts/chart-pie-simple"
+export { ChartPieSeparatorNone } from "@/registry/new-york-v4/charts/chart-pie-separator-none"
+export { ChartPieLabel } from "@/registry/new-york-v4/charts/chart-pie-label"
+export { ChartPieLabelCustom } from "@/registry/new-york-v4/charts/chart-pie-label-custom"
+export { ChartPieLabelList } from "@/registry/new-york-v4/charts/chart-pie-label-list"
+export { ChartPieLegend } from "@/registry/new-york-v4/charts/chart-pie-legend"
+export { ChartPieDonut } from "@/registry/new-york-v4/charts/chart-pie-donut"
+export { ChartPieDonutActive } from "@/registry/new-york-v4/charts/chart-pie-donut-active"
+export { ChartPieDonutText } from "@/registry/new-york-v4/charts/chart-pie-donut-text"
+export { ChartPieStacked } from "@/registry/new-york-v4/charts/chart-pie-stacked"
+export { ChartPieInteractive } from "@/registry/new-york-v4/charts/chart-pie-interactive"
 
-interface ChartGroups {
-  area: ChartItem[]
-  bar: ChartItem[]
-  line: ChartItem[]
-  pie: ChartItem[]
-  radar: ChartItem[]
-  radial: ChartItem[]
-  tooltip: ChartItem[]
-}
+export { ChartRadarDefault } from "@/registry/new-york-v4/charts/chart-radar-default"
+export { ChartRadarDots } from "@/registry/new-york-v4/charts/chart-radar-dots"
+export { ChartRadarLinesOnly } from "@/registry/new-york-v4/charts/chart-radar-lines-only"
+export { ChartRadarLabelCustom } from "@/registry/new-york-v4/charts/chart-radar-label-custom"
+export { ChartRadarGridCustom } from "@/registry/new-york-v4/charts/chart-radar-grid-custom"
+export { ChartRadarGridNone } from "@/registry/new-york-v4/charts/chart-radar-grid-none"
+export { ChartRadarGridCircle } from "@/registry/new-york-v4/charts/chart-radar-grid-circle"
+export { ChartRadarGridCircleNoLines } from "@/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines"
+export { ChartRadarGridCircleFill } from "@/registry/new-york-v4/charts/chart-radar-grid-circle-fill"
+export { ChartRadarGridFill } from "@/registry/new-york-v4/charts/chart-radar-grid-fill"
+export { ChartRadarMultiple } from "@/registry/new-york-v4/charts/chart-radar-multiple"
+export { ChartRadarLegend } from "@/registry/new-york-v4/charts/chart-radar-legend"
+export { ChartRadarIcons } from "@/registry/new-york-v4/charts/chart-radar-icons"
+export { ChartRadarRadius } from "@/registry/new-york-v4/charts/chart-radar-radius"
 
-export const charts: ChartGroups = {
-  area: [
-    {
-      id: "chart-area-interactive",
-      component: ChartAreaInteractive,
-      fullWidth: true,
-    },
-    { id: "chart-area-default", component: ChartAreaDefault },
-    { id: "chart-area-linear", component: ChartAreaLinear },
-    { id: "chart-area-step", component: ChartAreaStep },
-    { id: "chart-area-legend", component: ChartAreaLegend },
-    { id: "chart-area-stacked", component: ChartAreaStacked },
-    { id: "chart-area-stacked-expand", component: ChartAreaStackedExpand },
-    { id: "chart-area-icons", component: ChartAreaIcons },
-    { id: "chart-area-gradient", component: ChartAreaGradient },
-    { id: "chart-area-axes", component: ChartAreaAxes },
-  ],
-  bar: [
-    {
-      id: "chart-bar-interactive",
-      component: ChartBarInteractive,
-      fullWidth: true,
-    },
-    { id: "chart-bar-default", component: ChartBarDefault },
-    { id: "chart-bar-horizontal", component: ChartBarHorizontal },
-    { id: "chart-bar-multiple", component: ChartBarMultiple },
-    { id: "chart-bar-stacked", component: ChartBarStacked },
-    { id: "chart-bar-label", component: ChartBarLabel },
-    { id: "chart-bar-label-custom", component: ChartBarLabelCustom },
-    { id: "chart-bar-mixed", component: ChartBarMixed },
-    { id: "chart-bar-active", component: ChartBarActive },
-    { id: "chart-bar-negative", component: ChartBarNegative },
-  ],
-  line: [
-    {
-      id: "chart-line-interactive",
-      component: ChartLineInteractive,
-      fullWidth: true,
-    },
-    { id: "chart-line-default", component: ChartLineDefault },
-    { id: "chart-line-linear", component: ChartLineLinear },
-    { id: "chart-line-step", component: ChartLineStep },
-    { id: "chart-line-multiple", component: ChartLineMultiple },
-    { id: "chart-line-dots", component: ChartLineDots },
-    { id: "chart-line-dots-custom", component: ChartLineDotsCustom },
-    { id: "chart-line-dots-colors", component: ChartLineDotsColors },
-    { id: "chart-line-label", component: ChartLineLabel },
-    { id: "chart-line-label-custom", component: ChartLineLabelCustom },
-  ],
-  pie: [
-    { id: "chart-pie-simple", component: ChartPieSimple },
-    { id: "chart-pie-separator-none", component: ChartPieSeparatorNone },
-    { id: "chart-pie-label", component: ChartPieLabel },
-    { id: "chart-pie-label-custom", component: ChartPieLabelCustom },
-    { id: "chart-pie-label-list", component: ChartPieLabelList },
-    { id: "chart-pie-legend", component: ChartPieLegend },
-    { id: "chart-pie-donut", component: ChartPieDonut },
-    { id: "chart-pie-donut-active", component: ChartPieDonutActive },
-    { id: "chart-pie-donut-text", component: ChartPieDonutText },
-    { id: "chart-pie-stacked", component: ChartPieStacked },
-    { id: "chart-pie-interactive", component: ChartPieInteractive },
-  ],
-  radar: [
-    { id: "chart-radar-default", component: ChartRadarDefault },
-    { id: "chart-radar-dots", component: ChartRadarDots },
-    { id: "chart-radar-lines-only", component: ChartRadarLinesOnly },
-    { id: "chart-radar-label-custom", component: ChartRadarLabelCustom },
-    { id: "chart-radar-grid-custom", component: ChartRadarGridCustom },
-    { id: "chart-radar-grid-none", component: ChartRadarGridNone },
-    { id: "chart-radar-grid-circle", component: ChartRadarGridCircle },
-    {
-      id: "chart-radar-grid-circle-no-lines",
-      component: ChartRadarGridCircleNoLines,
-    },
-    { id: "chart-radar-grid-circle-fill", component: ChartRadarGridCircleFill },
-    { id: "chart-radar-grid-fill", component: ChartRadarGridFill },
-    { id: "chart-radar-multiple", component: ChartRadarMultiple },
-    { id: "chart-radar-legend", component: ChartRadarLegend },
-    { id: "chart-radar-icons", component: ChartRadarIcons },
-    { id: "chart-radar-radius", component: ChartRadarRadius },
-  ],
-  radial: [
-    { id: "chart-radial-simple", component: ChartRadialSimple },
-    { id: "chart-radial-label", component: ChartRadialLabel },
-    { id: "chart-radial-grid", component: ChartRadialGrid },
-    { id: "chart-radial-text", component: ChartRadialText },
-    { id: "chart-radial-shape", component: ChartRadialShape },
-    { id: "chart-radial-stacked", component: ChartRadialStacked },
-  ],
-  tooltip: [
-    { id: "chart-tooltip-default", component: ChartTooltipDefault },
-    {
-      id: "chart-tooltip-indicator-line",
-      component: ChartTooltipIndicatorLine,
-    },
-    {
-      id: "chart-tooltip-indicator-none",
-      component: ChartTooltipIndicatorNone,
-    },
-    { id: "chart-tooltip-label-custom", component: ChartTooltipLabelCustom },
-    {
-      id: "chart-tooltip-label-formatter",
-      component: ChartTooltipLabelFormatter,
-    },
-    { id: "chart-tooltip-label-none", component: ChartTooltipLabelNone },
-    { id: "chart-tooltip-formatter", component: ChartTooltipFormatter },
-    { id: "chart-tooltip-icons", component: ChartTooltipIcons },
-    { id: "chart-tooltip-advanced", component: ChartTooltipAdvanced },
-  ],
-}
+export { ChartRadialSimple } from "@/registry/new-york-v4/charts/chart-radial-simple"
+export { ChartRadialLabel } from "@/registry/new-york-v4/charts/chart-radial-label"
+export { ChartRadialGrid } from "@/registry/new-york-v4/charts/chart-radial-grid"
+export { ChartRadialText } from "@/registry/new-york-v4/charts/chart-radial-text"
+export { ChartRadialShape } from "@/registry/new-york-v4/charts/chart-radial-shape"
+export { ChartRadialStacked } from "@/registry/new-york-v4/charts/chart-radial-stacked"
 
-// Export individual components for backward compatibility
-export {
-  ChartAreaDefault,
-  ChartAreaLinear,
-  ChartAreaStep,
-  ChartAreaLegend,
-  ChartAreaStacked,
-  ChartAreaStackedExpand,
-  ChartAreaIcons,
-  ChartAreaGradient,
-  ChartAreaAxes,
-  ChartAreaInteractive,
-  ChartBarDefault,
-  ChartBarHorizontal,
-  ChartBarMultiple,
-  ChartBarStacked,
-  ChartBarLabel,
-  ChartBarLabelCustom,
-  ChartBarMixed,
-  ChartBarActive,
-  ChartBarNegative,
-  ChartBarInteractive,
-  ChartLineDefault,
-  ChartLineLinear,
-  ChartLineStep,
-  ChartLineMultiple,
-  ChartLineDots,
-  ChartLineDotsCustom,
-  ChartLineDotsColors,
-  ChartLineLabel,
-  ChartLineLabelCustom,
-  ChartLineInteractive,
-  ChartPieSimple,
-  ChartPieSeparatorNone,
-  ChartPieLabel,
-  ChartPieLabelCustom,
-  ChartPieLabelList,
-  ChartPieLegend,
-  ChartPieDonut,
-  ChartPieDonutActive,
-  ChartPieDonutText,
-  ChartPieStacked,
-  ChartPieInteractive,
-  ChartRadarDefault,
-  ChartRadarDots,
-  ChartRadarLinesOnly,
-  ChartRadarLabelCustom,
-  ChartRadarGridCustom,
-  ChartRadarGridNone,
-  ChartRadarGridCircle,
-  ChartRadarGridCircleNoLines,
-  ChartRadarGridCircleFill,
-  ChartRadarGridFill,
-  ChartRadarMultiple,
-  ChartRadarLegend,
-  ChartRadarIcons,
-  ChartRadarRadius,
-  ChartRadialSimple,
-  ChartRadialLabel,
-  ChartRadialGrid,
-  ChartRadialText,
-  ChartRadialShape,
-  ChartRadialStacked,
-  ChartTooltipDefault,
-  ChartTooltipIndicatorLine,
-  ChartTooltipIndicatorNone,
-  ChartTooltipLabelCustom,
-  ChartTooltipLabelFormatter,
-  ChartTooltipLabelNone,
-  ChartTooltipFormatter,
-  ChartTooltipIcons,
-  ChartTooltipAdvanced,
-}
+export { ChartTooltipDefault } from "@/registry/new-york-v4/charts/chart-tooltip-default"
+export { ChartTooltipIndicatorLine } from "@/registry/new-york-v4/charts/chart-tooltip-indicator-line"
+export { ChartTooltipIndicatorNone } from "@/registry/new-york-v4/charts/chart-tooltip-indicator-none"
+export { ChartTooltipLabelCustom } from "@/registry/new-york-v4/charts/chart-tooltip-label-custom"
+export { ChartTooltipLabelFormatter } from "@/registry/new-york-v4/charts/chart-tooltip-label-formatter"
+export { ChartTooltipLabelNone } from "@/registry/new-york-v4/charts/chart-tooltip-label-none"
+export { ChartTooltipFormatter } from "@/registry/new-york-v4/charts/chart-tooltip-formatter"
+export { ChartTooltipIcons } from "@/registry/new-york-v4/charts/chart-tooltip-icons"
+export { ChartTooltipAdvanced } from "@/registry/new-york-v4/charts/chart-tooltip-advanced"

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

@@ -1,74 +0,0 @@
-import { type Metadata } from "next"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import { ChartsNav } from "@/components/charts-nav"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { PageNav } from "@/components/page-nav"
-import { ThemeSelector } from "@/components/theme-selector"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-const title = "Beautiful Charts & Graphs"
-const description =
-  "A collection of ready-to-use chart components built with Recharts. From basic charts to rich data displays, copy and paste into your apps."
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-}
-
-export default function ChartsLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <>
-      <PageHeader>
-        <Announcement />
-        <PageHeaderHeading>{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild size="sm">
-            <a href="#charts">Browse Charts</a>
-          </Button>
-          <Button asChild variant="ghost" size="sm">
-            <Link href="/docs/components/chart">Documentation</Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      <PageNav id="charts">
-        <ChartsNav />
-      </PageNav>
-      <div className="container-wrapper flex-1">
-        <div className="container pb-6">
-          <section className="theme-container">{children}</section>
-        </div>
-      </div>
-    </>
-  )
-}

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

@@ -0,0 +1,20 @@
+import { ComponentWrapper } from "@/components/component-wrapper"
+import * as Charts from "@/app/(app)/charts/charts"
+
+export default function ChartsPage() {
+  return (
+    <div className="grid flex-1 grid-cols-3 items-start gap-4 p-4 2xl:grid-cols-4">
+      {Object.entries(Charts)
+        .sort()
+        .map(([key, Component]) => (
+          <ComponentWrapper
+            key={key}
+            name={key}
+            className="w-auto data-[name=chartareainteractive]:col-span-3 data-[name=chartbarinteractive]:col-span-3 data-[name=chartlineinteractive]:col-span-3 **:data-[slot=card]:w-full"
+          >
+            <Component />
+          </ComponentWrapper>
+        ))}
+    </div>
+  )
+}

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

@@ -1,78 +0,0 @@
-import { type Metadata } from "next"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import { ColorsNav } from "@/components/colors-nav"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { Button } from "@/registry/new-york-v4/ui/button"
-
-const title = "Tailwind Colors in Every Format"
-const description =
-  "The complete Tailwind color palette in HEX, RGB, HSL, CSS variables, and classes. Ready to copy and paste into your project."
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    images: [
-      {
-        url: `/og?title=${encodeURIComponent(
-          title
-        )}&description=${encodeURIComponent(description)}`,
-      },
-    ],
-  },
-}
-
-export default function ColorsLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <div>
-      <PageHeader>
-        <Announcement />
-        <PageHeaderHeading>{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild size="sm">
-            <a href="#colors">Browse Colors</a>
-          </Button>
-          <Button asChild variant="ghost" size="sm">
-            <Link href="/docs/theming">Documentation</Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      <div className="hidden">
-        <div className="container-wrapper">
-          <div className="container flex items-center justify-between gap-8 py-4">
-            <ColorsNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
-          </div>
-        </div>
-      </div>
-      <div className="container-wrapper">
-        <div className="container py-6">
-          <section id="colors" className="scroll-mt-20">
-            {children}
-          </section>
-        </div>
-      </div>
-    </div>
-  )
-}

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

@@ -1,17 +0,0 @@
-import { getColors } from "@/lib/colors"
-import { ColorPalette } from "@/components/color-palette"
-
-export const dynamic = "force-static"
-export const revalidate = false
-
-export default function ColorsPage() {
-  const colors = getColors()
-
-  return (
-    <div className="grid gap-8 lg:gap-16 xl:gap-20">
-      {colors.map((colorPalette) => (
-        <ColorPalette key={colorPalette.name} colorPalette={colorPalette} />
-      ))}
-    </div>
-  )
-}

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

@@ -1,104 +0,0 @@
-"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

@@ -1,88 +0,0 @@
-"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

@@ -1,86 +0,0 @@
-"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

@@ -1,86 +0,0 @@
-"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

@@ -1,136 +0,0 @@
-"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

@@ -1,45 +0,0 @@
-"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)
-  const label = hasCopied ? "Copied" : `--preset ${presetCode}`
-
-  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}
-      title={label}
-      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 className="block min-w-0 truncate">{label}</span>
-    </Button>
-  )
-}

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

@@ -1,119 +0,0 @@
-"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 { OpenPreset } from "@/app/(app)/create/components/open-preset"
-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 { 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="min-w-0 flex-1 md:flex-none" />
-        <OpenPreset
-          className="max-w-20 min-w-0 flex-1 sm:max-w-none md:flex-none"
-          label={isMobile ? "Open" : "Open Preset"}
-        />
-        <RandomButton className="max-w-20 min-w-0 flex-1 sm:max-w-none 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

@@ -1,307 +0,0 @@
-"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

@@ -1,158 +0,0 @@
-"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

@@ -1,78 +0,0 @@
-"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

@@ -1,171 +0,0 @@
-"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

@@ -1,75 +0,0 @@
-"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

@@ -1,108 +0,0 @@
-"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

@@ -1,44 +0,0 @@
-"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

@@ -1,88 +0,0 @@
-"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 { useOpenPresetTrigger } from "@/app/(app)/create/hooks/use-open-preset"
-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 { openPreset } = useOpenPresetTrigger()
-  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={openPreset}>
-              Open Preset... <PickerShortcut>O</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

@@ -1,169 +0,0 @@
-"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

@@ -1,87 +0,0 @@
-"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/open-preset.tsx

@@ -1,200 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Script from "next/script"
-
-import { cn } from "@/lib/utils"
-import { useIsMobile } from "@/hooks/use-mobile"
-import { Button } from "@/styles/base-nova/ui/button"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/styles/base-nova/ui/dialog"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/styles/base-nova/ui/drawer"
-import { Field, FieldContent, FieldLabel } from "@/styles/base-nova/ui/field"
-import { Input } from "@/styles/base-nova/ui/input"
-import {
-  OPEN_PRESET_FORWARD_TYPE,
-  useOpenPreset,
-} from "@/app/(app)/create/hooks/use-open-preset"
-import { parsePresetInput } from "@/app/(app)/create/lib/parse-preset-input"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
-
-const PRESET_EXAMPLE = "b2D0wqNxT"
-const PRESET_TITLE = "Open Preset"
-const PRESET_DESCRIPTION = "Paste a preset code to load a saved configuration."
-
-export function OpenPreset({
-  className,
-  label = "Open Preset",
-}: React.ComponentProps<typeof Button> & {
-  label?: string
-}) {
-  const [input, setInput] = React.useState("")
-  const [, setParams] = useDesignSystemSearchParams()
-  const isMobile = useIsMobile()
-  const { open, setOpen } = useOpenPreset()
-
-  const nextPreset = React.useMemo(() => parsePresetInput(input), [input])
-  const isInvalid = input.trim().length > 0 && nextPreset === null
-
-  const handleOpenChange = React.useCallback(
-    (nextOpen: boolean) => {
-      setOpen(nextOpen)
-
-      if (!nextOpen) {
-        setInput("")
-      }
-    },
-    [setOpen]
-  )
-
-  const handleSubmit = React.useCallback(
-    (event: React.FormEvent<HTMLFormElement>) => {
-      event.preventDefault()
-
-      if (!nextPreset) {
-        return
-      }
-
-      setParams({ preset: nextPreset })
-      handleOpenChange(false)
-    },
-    [handleOpenChange, nextPreset, setParams]
-  )
-
-  const triggerClassName = cn(
-    "touch-manipulation bg-transparent! px-2! py-0! text-sm! transition-none select-none hover:bg-muted! pointer-coarse:h-10!",
-    className
-  )
-
-  const desktopTrigger = (
-    <Button variant="outline" className={triggerClassName} />
-  )
-
-  const fields = (
-    <Field data-invalid={isInvalid || undefined}>
-      <FieldLabel htmlFor="preset-code" className="sr-only">
-        Preset code
-      </FieldLabel>
-      <FieldContent>
-        <Input
-          id="preset-code"
-          value={input}
-          onChange={(event) => setInput(event.target.value)}
-          placeholder={`${PRESET_EXAMPLE} or --preset ${PRESET_EXAMPLE}`}
-          autoCapitalize="none"
-          autoCorrect="off"
-          spellCheck={false}
-          aria-invalid={isInvalid}
-          className="h-10 md:h-8"
-        />
-      </FieldContent>
-    </Field>
-  )
-
-  if (isMobile) {
-    return (
-      <Drawer open={open} onOpenChange={handleOpenChange}>
-        <DrawerTrigger asChild>
-          <Button variant="outline" className={triggerClassName}>
-            {label}
-          </Button>
-        </DrawerTrigger>
-        <DrawerContent className="dark rounded-t-2xl!">
-          <DrawerHeader>
-            <DrawerTitle className="text-xl">{PRESET_TITLE}</DrawerTitle>
-            <DrawerDescription>{PRESET_DESCRIPTION}</DrawerDescription>
-          </DrawerHeader>
-          <form onSubmit={handleSubmit}>
-            <div className="px-4 py-2">{fields}</div>
-            <DrawerFooter>
-              <Button type="submit" className="h-10" disabled={!nextPreset}>
-                Open
-              </Button>
-              <DrawerClose asChild>
-                <Button variant="outline" type="button" className="h-10">
-                  Cancel
-                </Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </form>
-        </DrawerContent>
-      </Drawer>
-    )
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogTrigger render={desktopTrigger}>{label}</DialogTrigger>
-      <DialogContent className="dark">
-        <form onSubmit={handleSubmit}>
-          <DialogHeader>
-            <DialogTitle>{PRESET_TITLE}</DialogTitle>
-            <DialogDescription>{PRESET_DESCRIPTION}</DialogDescription>
-          </DialogHeader>
-          <div className="py-4">{fields}</div>
-          <DialogFooter>
-            <DialogClose render={<Button variant="outline" type="button" />}>
-              Cancel
-            </DialogClose>
-            <Button type="submit" disabled={!nextPreset}>
-              Open
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export function OpenPresetScript() {
-  return (
-    <Script
-      id="open-preset-listener"
-      strategy="beforeInteractive"
-      dangerouslySetInnerHTML={{
-        __html: `
-            (function() {
-              // Forward O key.
-              document.addEventListener('keydown', function(e) {
-                if (e.key === 'o' && !e.shiftKey && !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: '${OPEN_PRESET_FORWARD_TYPE}',
-                      key: e.key
-                    }, '*');
-                  }
-                }
-              });
-
-            })();
-          `,
-      }}
-    />
-  )
-}

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

@@ -1,293 +0,0 @@
-"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

@@ -1,38 +0,0 @@
-"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
-}