test: implement fuzzing

.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

.changeset/warm-fans-protect.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add theme prop to registry-item schema

.claude/settings.local.json

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

.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-comment.yml

@@ -3,7 +3,7 @@ name: Write Beta Release comment
 
 on:
   workflow_run:
-    workflows: ["Release"]
+    workflows: ["Release - Beta"]
     types:
       - completed
 
@@ -11,13 +11,12 @@ jobs:
   comment:
     if: |
       github.repository_owner == 'shadcn-ui' &&
-      github.event.workflow_run.event == 'pull_request' &&
-      github.event.workflow_run.conclusion == 'success'
+      ${{ github.event.workflow_run.conclusion == 'success' }}
     runs-on: ubuntu-latest
     name: Write comment to the PR
     steps:
       - name: "Comment on PR"
-        uses: actions/github-script@v7
+        uses: actions/github-script@v6
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
@@ -54,7 +53,7 @@ jobs:
             ```
 
       - name: "Remove the autorelease label once published"
-        uses: actions/github-script@v7
+        uses: actions/github-script@v6
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |

.github/workflows/prerelease.yml

@@ -0,0 +1,60 @@
+# Adapted from create-t3-app.
+
+name: Release - Beta
+
+on:
+  pull_request:
+    types: [labeled]
+    branches:
+      - main
+jobs:
+  prerelease:
+    if: |
+      github.repository_owner == 'shadcn-ui' &&
+      contains(github.event.pull_request.labels.*.name, '🚀 autorelease')
+    name: Build & Publish a beta release to NPM
+    runs-on: ubuntu-latest
+    environment: Preview
+
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Use PNPM
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.0.6
+
+      - name: Use Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - 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
+
+      - name: get-npm-version
+        id: package-version
+        uses: martinbeentjes/npm-get-version-action@main
+        with:
+          path: packages/shadcn
+
+      - name: Upload packaged artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
+          path: packages/shadcn/dist/index.js

.github/workflows/release.yml

@@ -2,81 +2,19 @@
 
 name: Release
 
-run-name: ${{ github.event_name == 'pull_request' && format('Release Beta - PR {0}', github.event.number) || 'Release Stable' }}
-
 on:
-  pull_request:
-    types: [labeled]
-    branches:
-      - main
   push:
     branches:
       - main
 
 jobs:
-  prerelease:
-    if: ${{ github.event_name == 'pull_request' && github.repository_owner == 'shadcn-ui' && contains(github.event.pull_request.labels.*.name, '🚀 autorelease') }}
-    name: Publish Beta to NPM
-    runs-on: ubuntu-latest
-    environment: Preview
-    permissions:
-      id-token: write
-      contents: read
-
-    steps:
-      - name: Checkout Repo
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Use PNPM
-        uses: pnpm/action-setup@v4
-        with:
-          version: 9.0.6
-
-      - name: Use Node.js 20
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          registry-url: "https://registry.npmjs.org"
-          cache: "pnpm"
-
-      - name: Update npm for OIDC support
-        run: npm install -g npm@latest
-
-      - name: Install NPM Dependencies
-        run: pnpm install
-
-      - name: Modify package.json version
-        run: node .github/version-script-beta.js
-
-      - name: Publish Beta to NPM
-        run: pnpm pub:beta
-
-      - name: get-npm-version
-        id: package-version
-        uses: martinbeentjes/npm-get-version-action@main
-        with:
-          path: packages/shadcn
-
-      - name: Upload packaged artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
-          path: packages/shadcn/dist/index.js
-
   release:
-    if: ${{ github.event_name == 'push' && github.repository_owner == 'shadcn-ui' }}
-    name: Create Version PR or Publish Stable Release
+    if: ${{ github.repository_owner == 'shadcn-ui' }}
+    name: Create a PR for release workflow
     runs-on: ubuntu-latest
-    permissions:
-      id-token: write
-      contents: write
-      pull-requests: write
-
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
@@ -85,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
 
@@ -106,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"
@@ -114,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
@@ -39,9 +36,6 @@ jobs:
           key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
-      - name: Install Bun
-        uses: oven-sh/setup-bun@v2
-
       - name: Install dependencies
         run: pnpm install
 

.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,90 +0,0 @@
-import { type Metadata } from "next"
-import Image from "next/image"
-import Link from "next/link"
-
-import { Announcement } from "@/components/announcement"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-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)/(styles)/sera/article-directory/components/article-directory.tsx

@@ -1,216 +0,0 @@
-"use client"
-
-import { ChevronLeftIcon, ChevronRightIcon, SearchIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Badge } from "@/styles/base-sera/ui/badge"
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-sera/ui/card"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/styles/base-sera/ui/input-group"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-} from "@/styles/base-sera/ui/pagination"
-import { Progress, ProgressValue } from "@/styles/base-sera/ui/progress"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/styles/base-sera/ui/table"
-
-const ARTICLE_ROWS = [
-  {
-    title: "The Future of Sustainable Architecture",
-    wordProgress: "1.4k / 2.6k words",
-    author: "Elena Rostova",
-    issue: "Summer 2024",
-    status: "in-revision",
-    statusLabel: "In revision",
-    progress: 45,
-  },
-  {
-    title: "Brutalism's Second Act",
-    wordProgress: "2.1k / 2.5k words",
-    author: "Marcus Chen",
-    issue: "Summer 2024",
-    status: "final-edit",
-    statusLabel: "Final edit",
-    progress: 90,
-  },
-  {
-    title: "The Typography of Public Spaces",
-    wordProgress: "0.5k / 1.5k words",
-    author: "Sarah Jenkins",
-    issue: "Autumn 2024",
-    status: "drafting",
-    statusLabel: "Drafting",
-    progress: 20,
-  },
-  {
-    title: "Rethinking Urban Canopies",
-    wordProgress: "1.8k / 1.8k words",
-    author: "David O'Connor",
-    issue: "Summer 2024",
-    status: "published",
-    statusLabel: "Published",
-    progress: 100,
-  },
-  {
-    title: "Light, Glass, and the Modern Museum",
-    wordProgress: "1.2k / 2.0k words",
-    author: "Amara Osei",
-    issue: "Autumn 2024",
-    status: "in-revision",
-    statusLabel: "In revision",
-    progress: 55,
-  },
-  {
-    title: "Concrete Utopias: Housing in the 21st Century",
-    wordProgress: "3.0k / 3.0k words",
-    author: "Tomás Herrera",
-    issue: "Summer 2024",
-    status: "published",
-    statusLabel: "Published",
-    progress: 100,
-  },
-  {
-    title: "Designing for Silence",
-    wordProgress: "0.8k / 2.2k words",
-    author: "Ingrid Solberg",
-    issue: "Winter 2024",
-    status: "drafting",
-    statusLabel: "Drafting",
-    progress: 30,
-  },
-  {
-    title: "The Invisible Infrastructure of Cities",
-    wordProgress: "2.4k / 2.8k words",
-    author: "James Whitfield",
-    issue: "Autumn 2024",
-    status: "final-edit",
-    statusLabel: "Final edit",
-    progress: 85,
-  },
-] as const
-
-const STATUS_BADGE_VARIANT = {
-  "in-revision": "outline",
-  "final-edit": "default",
-  drafting: "ghost",
-  published: "secondary",
-} as const
-
-const STATUS_DOT_CLASSNAME = {
-  "in-revision": "bg-amber-600/80",
-  "final-edit": "bg-foreground/90",
-  drafting: "bg-muted-foreground/60",
-  published: "bg-emerald-600/80",
-}
-
-export function ArticleDirectory() {
-  return (
-    <Card>
-      <CardHeader>
-        <InputGroup>
-          <InputGroupAddon>
-            <SearchIcon />
-          </InputGroupAddon>
-          <InputGroupInput type="search" placeholder="Search articles..." />
-        </InputGroup>
-      </CardHeader>
-      <CardContent>
-        <Table>
-          <TableHeader>
-            <TableRow className="hover:bg-transparent">
-              <TableHead>Title</TableHead>
-              <TableHead className="w-[170px]">Author</TableHead>
-              <TableHead className="w-[150px]">Issue</TableHead>
-              <TableHead className="w-[180px]">Status</TableHead>
-              <TableHead className="w-[140px]">Progress</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {ARTICLE_ROWS.map((row) => (
-              <TableRow key={row.title}>
-                <TableCell>
-                  <div className="flex flex-col gap-1">
-                    <p className="font-heading text-xl tracking-tight text-foreground">
-                      {row.title}
-                    </p>
-                    <p className="text-xs text-muted-foreground">
-                      {row.wordProgress}
-                    </p>
-                  </div>
-                </TableCell>
-                <TableCell>{row.author}</TableCell>
-                <TableCell>{row.issue}</TableCell>
-                <TableCell>
-                  <Badge variant={STATUS_BADGE_VARIANT[row.status]}>
-                    <span
-                      className={cn(
-                        "size-1.5 rounded-full",
-                        STATUS_DOT_CLASSNAME[row.status]
-                      )}
-                    />
-                    {row.statusLabel}
-                  </Badge>
-                </TableCell>
-                <TableCell>
-                  <Progress
-                    value={row.progress}
-                    aria-label={`${row.progress}% complete`}
-                    className="flex flex-row-reverse items-center **:data-[slot=progress-track]:w-16"
-                  >
-                    <ProgressValue>
-                      {(formattedValue) => `${formattedValue}`}
-                    </ProgressValue>
-                  </Progress>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </CardContent>
-      <CardFooter>
-        <Pagination>
-          <PaginationContent>
-            <PaginationItem>
-              <PaginationLink
-                href="#"
-                size="icon-sm"
-                aria-label="Previous page"
-              >
-                <ChevronLeftIcon className="cn-rtl-flip" />
-              </PaginationLink>
-            </PaginationItem>
-            {[1, 2, 3].map((page) => (
-              <PaginationItem key={page}>
-                <PaginationLink href="#" size="icon-sm" isActive={page === 1}>
-                  {page}
-                </PaginationLink>
-              </PaginationItem>
-            ))}
-            <PaginationItem>
-              <PaginationLink href="#" size="icon-sm" aria-label="Next page">
-                <ChevronRightIcon className="cn-rtl-flip" />
-              </PaginationLink>
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(styles)/sera/article-directory/components/preview-header.tsx

@@ -1,47 +0,0 @@
-import { ArrowLeftIcon, PlusIcon } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/styles/base-sera/ui/breadcrumb"
-import { Button } from "@/styles/base-sera/ui/button"
-import { ButtonGroup } from "@/styles/base-sera/ui/button-group"
-
-export function PreviewHeader() {
-  return (
-    <header>
-      <div className="container flex flex-col items-center justify-center gap-(--gap) py-(--gap) sm:flex-row sm:justify-between">
-        <div className="flex flex-col gap-2 text-center sm:text-left">
-          <Breadcrumb>
-            <BreadcrumbList className="justify-center md:justify-start">
-              <BreadcrumbItem>
-                <BreadcrumbLink
-                  href="#"
-                  className="inline-flex items-center gap-1.5"
-                >
-                  <ArrowLeftIcon className="size-3" />
-                  Editorial Dashboard
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <h1 className="line-clamp-1 font-heading text-3xl tracking-wide uppercase md:text-3xl lg:text-4xl">
-            Article Directory
-          </h1>
-        </div>
-        <div>
-          <ButtonGroup className="gap-2 sm:ml-auto md:gap-4">
-            <Button>
-              <PlusIcon data-icon="inline-start" />
-              New Article
-            </Button>
-          </ButtonGroup>
-        </div>
-      </div>
-    </header>
-  )
-}

apps/v4/app/(app)/(styles)/sera/article-directory/index.tsx

@@ -1,16 +0,0 @@
-import { Separator } from "@/styles/base-sera/ui/separator"
-
-import { ArticleDirectory as ArticleDirectoryList } from "./components/article-directory"
-import { PreviewHeader } from "./components/preview-header"
-
-export function ArticleDirectory() {
-  return (
-    <div className="preview theme-taupe @container/preview w-full flex-1 bg-muted pt-4 font-sans ring-1 ring-foreground/5 [--gap:--spacing(4)] sm:pt-0 md:[--gap:--spacing(6)] xl:[--gap:--spacing(8)] 2xl:py-8 **:[.container]:px-(--gap)">
-      <PreviewHeader />
-      <Separator className="hidden sm:block" />
-      <div className="container py-(--gap)">
-        <ArticleDirectoryList />
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/(styles)/sera/audience-analytics/components/demographics.tsx

@@ -1,56 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { MoveRightIcon } from "lucide-react"
-
-import { Button } from "@/styles/base-sera/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-sera/ui/card"
-import {
-  Progress,
-  ProgressLabel,
-  ProgressValue,
-} from "@/styles/base-sera/ui/progress"
-
-const DEMOGRAPHIC_DATA = [
-  { age: "18 - 24", percentage: 22 },
-  { age: "25 - 34", percentage: 64 },
-  { age: "35 - 44", percentage: 12 },
-  { age: "45+", percentage: 5 },
-]
-
-export function Demographics({ ...props }: React.ComponentProps<typeof Card>) {
-  return (
-    <Card {...props}>
-      <CardHeader>
-        <CardTitle className="text-2xl">Demographics</CardTitle>
-        <CardDescription>Reader Profile</CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-10">
-        {DEMOGRAPHIC_DATA.map((item) => (
-          <Progress
-            key={item.age}
-            value={item.percentage}
-            aria-label={item.age}
-          >
-            <ProgressLabel>{item.age}</ProgressLabel>
-            <ProgressValue>
-              {(formattedValue) => `${formattedValue}`}
-            </ProgressValue>
-          </Progress>
-        ))}
-      </CardContent>
-      <CardFooter>
-        <Button variant="link" className="w-full">
-          View all source <MoveRightIcon data-icon="inline-end" />
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(styles)/sera/audience-analytics/components/metrics-grid.tsx

@@ -1,93 +0,0 @@
-import { TrendingDownIcon, TrendingUpIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-sera/ui/card"
-
-type Metric = {
-  label: string
-  value: string
-  comparison: string
-  change: string
-  trend: "up" | "down"
-}
-
-const METRIC_CARDS: Metric[] = [
-  {
-    label: "Total visitors",
-    value: "248.5k",
-    comparison: "12.4%",
-    change: "vs last period",
-    trend: "up",
-  },
-  {
-    label: "Unique readers",
-    value: "182.1k",
-    comparison: "8.7%",
-    change: "vs last period",
-    trend: "up",
-  },
-  {
-    label: "Avg. time on page",
-    value: "3m 42s",
-    comparison: "1.2%",
-    change: "vs last period",
-    trend: "down",
-  },
-  {
-    label: "Bounce rate",
-    value: "42.8%",
-    comparison: "3.5%",
-    change: "vs last period",
-    trend: "down",
-  },
-]
-
-export function MetricsGrid() {
-  return (
-    <>
-      {METRIC_CARDS.map((metric) => (
-        <MetricCard
-          key={metric.label}
-          metric={metric}
-          className="col-span-full md:col-span-6 lg:col-span-3"
-        />
-      ))}
-    </>
-  )
-}
-
-function MetricCard({
-  metric,
-  className,
-}: {
-  metric: Metric
-  className: string
-}) {
-  return (
-    <Card className={cn("gap-0", className)}>
-      <CardContent className="flex flex-col gap-2">
-        <CardDescription className="text-xs uppercase">
-          {metric.label}
-        </CardDescription>
-        <CardTitle className="text-5xl tracking-tight lowercase">
-          {metric.value}
-        </CardTitle>
-        <CardDescription>
-          {metric.trend === "up" ? (
-            <TrendingUpIcon className="inline-block size-2.5 text-muted-foreground" />
-          ) : (
-            <TrendingDownIcon className="inline-block size-2.5 text-muted-foreground" />
-          )}{" "}
-          <span className="text-foreground">{metric.comparison}</span>{" "}
-          <span>{metric.change}</span>
-        </CardDescription>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(styles)/sera/audience-analytics/components/preview-header.tsx

@@ -1,103 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ChevronDownIcon, DownloadIcon } from "lucide-react"
-
-import { Button } from "@/styles/base-sera/ui/button"
-import { ButtonGroup } from "@/styles/base-sera/ui/button-group"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-} from "@/styles/base-sera/ui/dropdown-menu"
-
-const EXPORT_DATE_OPTIONS = [
-  {
-    label: "Last 7 days",
-    value: "last-7-days",
-  },
-  {
-    label: "Last 30 days",
-    value: "last-30-days",
-  },
-  {
-    label: "This month",
-    value: "this-month",
-  },
-  {
-    label: "Last month",
-    value: "last-month",
-  },
-]
-
-export function PreviewHeader() {
-  const [selectedDateRange, setSelectedDateRange] =
-    React.useState("last-30-days")
-
-  const selectedDateRangeLabel = React.useMemo(() => {
-    const selectedOption = EXPORT_DATE_OPTIONS.find(
-      (option) => option.value === selectedDateRange
-    )
-
-    if (!selectedOption) {
-      return "Last 30 days"
-    }
-
-    return selectedOption.label
-  }, [selectedDateRange])
-
-  return (
-    <header>
-      <div className="container flex flex-col items-center justify-center gap-(--gap) py-(--gap) sm:flex-row sm:justify-between">
-        <div className="flex flex-col gap-2 text-center sm:text-left">
-          <h1 className="line-clamp-1 font-heading text-3xl tracking-wide uppercase md:text-3xl lg:text-4xl">
-            Audience Analytics
-          </h1>
-          <div className="line-clamp-1 text-sm font-medium tracking-wider text-muted-foreground uppercase">
-            Editorial Performance Dashboard
-          </div>
-        </div>
-        <ButtonGroup className="gap-2 sm:ml-auto md:gap-4">
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              render={
-                <Button
-                  variant="outline"
-                  className="bg-background hover:bg-background/80 data-popup-open:bg-background"
-                />
-              }
-            >
-              {selectedDateRangeLabel}{" "}
-              <ChevronDownIcon data-icon="inline-end" />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuGroup>
-                <DropdownMenuRadioGroup
-                  value={selectedDateRange}
-                  onValueChange={setSelectedDateRange}
-                >
-                  {EXPORT_DATE_OPTIONS.map((option) => (
-                    <DropdownMenuRadioItem
-                      key={option.value}
-                      value={option.value}
-                    >
-                      {option.label}
-                    </DropdownMenuRadioItem>
-                  ))}
-                </DropdownMenuRadioGroup>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <Button>
-            <DownloadIcon data-icon="inline-start" />
-            <span className="lg:hidden">Export</span>
-            <span className="hidden lg:inline">Export Report</span>
-          </Button>
-        </ButtonGroup>
-      </div>
-    </header>
-  )
-}

apps/v4/app/(app)/(styles)/sera/audience-analytics/components/top-editorial.tsx

@@ -1,257 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ArrowDownIcon, MoreHorizontalIcon } from "lucide-react"
-
-import { Button } from "@/styles/base-sera/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-sera/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/styles/base-sera/ui/dropdown-menu"
-import { Spinner } from "@/styles/base-sera/ui/spinner"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/styles/base-sera/ui/table"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/styles/base-sera/ui/toggle-group"
-
-type EditorialMetric = "views" | "time" | "shares"
-
-type EditorialRow = {
-  rank: number
-  title: string
-  author: string
-  published: string
-  pageviews: string
-  avgTime: string
-}
-
-const METRIC_LABEL: Record<EditorialMetric, string> = {
-  views: "VIEWS",
-  time: "TIME",
-  shares: "SHARES",
-}
-
-const EDITORIAL_ROWS: EditorialRow[] = [
-  {
-    rank: 1,
-    title: "The New Vanguard of Minimalist Architecture",
-    author: "Elena Rostova",
-    published: "Oct 12",
-    pageviews: "45.2k",
-    avgTime: "04:15",
-  },
-  {
-    rank: 2,
-    title: "Autumn Sartorial Code: Deconstructed Classics",
-    author: "Julian Vance",
-    published: "Oct 05",
-    pageviews: "38.9k",
-    avgTime: "03:42",
-  },
-  {
-    rank: 3,
-    title: "Interview: Director Sofia Coppola on The Aesthetics of Isolation",
-    author: "Marcus Trent",
-    published: "Sep 28",
-    pageviews: "31.4k",
-    avgTime: "06:20",
-  },
-  {
-    rank: 4,
-    title: "Sourcing Ceramics from Kyoto's Oldest Kilns",
-    author: "Sarah Lin",
-    published: "Oct 18",
-    pageviews: "22.1k",
-    avgTime: "02:55",
-  },
-  {
-    rank: 5,
-    title: "Field Notes from Copenhagen Design Week",
-    author: "Noah Bennett",
-    published: "Oct 21",
-    pageviews: "19.7k",
-    avgTime: "03:18",
-  },
-  {
-    rank: 6,
-    title: "A Studio Visit with Milan's Most Elusive Lighting Designer",
-    author: "Claire Duval",
-    published: "Oct 09",
-    pageviews: "17.4k",
-    avgTime: "04:02",
-  },
-  {
-    rank: 7,
-    title: "Collecting the New Avant-Garde in Contemporary Furniture",
-    author: "Tommy Rhodes",
-    published: "Sep 30",
-    pageviews: "15.9k",
-    avgTime: "03:36",
-  },
-  {
-    rank: 8,
-    title: "Inside Lisbon's Quiet Culinary Renaissance",
-    author: "Amara Iqbal",
-    published: "Oct 14",
-    pageviews: "14.2k",
-    avgTime: "05:08",
-  },
-  {
-    rank: 9,
-    title: "Why Slow Interiors Are Defining the Next Luxury Wave",
-    author: "Henry Vale",
-    published: "Oct 03",
-    pageviews: "12.7k",
-    avgTime: "03:11",
-  },
-  {
-    rank: 10,
-    title: "The Return of Print: Independent Magazine Covers to Watch",
-    author: "Mina Okafor",
-    published: "Sep 26",
-    pageviews: "11.3k",
-    avgTime: "02:49",
-  },
-]
-
-type TopEditorialProps = React.ComponentProps<typeof Card> & {
-  selectedMetric?: EditorialMetric
-}
-
-export function TopEditorial({
-  selectedMetric = "views",
-  ...props
-}: TopEditorialProps) {
-  const [visibleCount, setVisibleCount] = React.useState(5)
-  const [isLoadingMore, setIsLoadingMore] = React.useState(false)
-  const hasMoreRows = visibleCount < EDITORIAL_ROWS.length
-  const visibleRows = EDITORIAL_ROWS.slice(0, visibleCount)
-
-  const handleLoadMore = React.useCallback(() => {
-    if (!hasMoreRows || isLoadingMore) {
-      return
-    }
-
-    setIsLoadingMore(true)
-
-    window.setTimeout(() => {
-      setVisibleCount(EDITORIAL_ROWS.length)
-      setIsLoadingMore(false)
-    }, 2000)
-  }, [hasMoreRows, isLoadingMore])
-
-  return (
-    <Card {...props}>
-      <CardHeader>
-        <div className="flex flex-col gap-(--gap) sm:flex-row">
-          <div className="flex flex-col gap-1.5">
-            <CardTitle className="text-2xl">Top Editorials</CardTitle>
-            <CardDescription>Ranked by engagement</CardDescription>
-          </div>
-          <ToggleGroup
-            aria-label="Top editorials metric selector"
-            value={[selectedMetric]}
-            variant="outline"
-            className="w-full sm:ml-auto sm:w-fit"
-          >
-            {(["views", "time", "shares"] as const).map((metric) => {
-              return (
-                <ToggleGroupItem key={metric} value={metric} className="flex-1">
-                  {METRIC_LABEL[metric]}
-                </ToggleGroupItem>
-              )
-            })}
-          </ToggleGroup>
-        </div>
-      </CardHeader>
-      <CardContent className="flex-1 **:data-[slot=table-container]:no-scrollbar **:data-[slot=table-container]:overflow-y-hidden">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>#</TableHead>
-              <TableHead>Title</TableHead>
-              <TableHead>Published</TableHead>
-              <TableHead>Page Views</TableHead>
-              <TableHead>Read Time</TableHead>
-              <TableHead className="text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {visibleRows.map((row) => (
-              <TableRow key={row.rank}>
-                <TableCell className="translate-y-1 align-text-top">
-                  {row.rank}
-                </TableCell>
-                <TableCell>
-                  <div className="flex flex-col gap-2">
-                    <p className="font-heading text-xl tracking-tight text-foreground">
-                      {row.title}
-                    </p>
-                    <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
-                      By {row.author}
-                    </p>
-                  </div>
-                </TableCell>
-                <TableCell>{row.published}</TableCell>
-                <TableCell>{row.pageviews}</TableCell>
-                <TableCell>{row.avgTime}</TableCell>
-                <TableCell className="text-right">
-                  <DropdownMenu>
-                    <DropdownMenuTrigger
-                      render={<Button variant="ghost" size="icon-xs" />}
-                      aria-label={`Open actions for ${row.title}`}
-                    >
-                      <MoreHorizontalIcon />
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <DropdownMenuItem>Edit</DropdownMenuItem>
-                      <DropdownMenuItem>Publish</DropdownMenuItem>
-                      <DropdownMenuItem variant="destructive">
-                        Delete
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </CardContent>
-      <CardFooter className="justify-center">
-        {hasMoreRows ? (
-          <Button
-            type="button"
-            variant="outline"
-            onClick={handleLoadMore}
-            disabled={isLoadingMore}
-          >
-            Load more content{" "}
-            {isLoadingMore ? (
-              <Spinner data-icon="inline-end" />
-            ) : (
-              <ArrowDownIcon data-icon="inline-end" />
-            )}
-          </Button>
-        ) : null}
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(styles)/sera/audience-analytics/components/traffic-overview-deferred.tsx

@@ -1,57 +0,0 @@
-"use client"
-
-import * as React from "react"
-import dynamic from "next/dynamic"
-
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-sera/ui/card"
-
-const TrafficOverviewContent = dynamic(
-  () => import("./traffic-overview").then((mod) => mod.TrafficOverview),
-  {
-    ssr: false,
-    loading: () => <TrafficOverviewFallback />,
-  }
-)
-
-export function TrafficOverviewDeferred({
-  className,
-  ...props
-}: React.ComponentProps<typeof Card>) {
-  return (
-    <div className={className}>
-      <TrafficOverviewContent {...props} />
-    </div>
-  )
-}
-
-function TrafficOverviewFallback() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="text-2xl">Traffic Overview</CardTitle>
-        <CardDescription>
-          Traffic for the last 30 days has increased by 12.4% compared to the
-          previous period.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div
-          aria-hidden="true"
-          className="flex h-82 w-full flex-col justify-end gap-6 overflow-hidden bg-muted/40 p-5"
-        >
-          <div className="h-px w-full bg-border" />
-          <div className="h-px w-full bg-border" />
-          <div className="h-px w-full bg-border" />
-          <div className="h-px w-full bg-border" />
-          <div className="h-px w-full bg-border" />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(styles)/sera/audience-analytics/components/traffic-overview.tsx

@@ -1,155 +0,0 @@
-"use client"
-
-import { TrendingUpIcon } from "lucide-react"
-import {
-  CartesianGrid,
-  Line,
-  LineChart,
-  ReferenceDot,
-  XAxis,
-  YAxis,
-} from "recharts"
-
-import { Badge } from "@/styles/base-sera/ui/badge"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-sera/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/styles/base-sera/ui/chart"
-
-const TRAFFIC_OVERVIEW_DATA = [
-  { date: "2025-10-01", views: 2600, unique: 1600 },
-  { date: "2025-10-04", views: 4500, unique: 3000 },
-  { date: "2025-10-08", views: 3500, unique: 2500 },
-  { date: "2025-10-10", views: 6400, unique: 4500 },
-  { date: "2025-10-13", views: 5400, unique: 4000 },
-  { date: "2025-10-15", views: 8300, unique: 6500 },
-  { date: "2025-10-17", views: 7400, unique: 6000 },
-  { date: "2025-10-18", views: 9240, unique: 7105 },
-  { date: "2025-10-22", views: 7700, unique: 6400 },
-  { date: "2025-10-26", views: 8800, unique: 7000 },
-  { date: "2025-10-29", views: 9800, unique: 8400 },
-]
-
-const TRAFFIC_CHART_CONFIG = {
-  views: {
-    label: "Views",
-    theme: {
-      light: "var(--chart-5)",
-      dark: "var(--chart-1)",
-    },
-  },
-  unique: {
-    label: "Unique",
-    theme: {
-      light: "var(--chart-1)",
-      dark: "var(--chart-2)",
-    },
-  },
-} satisfies ChartConfig
-
-const X_AXIS_DATE_FORMATTER = new Intl.DateTimeFormat("en-US", {
-  month: "short",
-  day: "numeric",
-  timeZone: "UTC",
-})
-
-function formatYAxisTick(value: number) {
-  if (value === 0) {
-    return "0"
-  }
-
-  if (value % 1000 === 0) {
-    return `${value / 1000}k`
-  }
-
-  return `${value / 1000}k`
-}
-
-function formatXAxisTick(value: string) {
-  const date = new Date(`${value}T00:00:00Z`)
-
-  if (Number.isNaN(date.getTime())) {
-    return value
-  }
-
-  return X_AXIS_DATE_FORMATTER.format(date)
-}
-
-export function TrafficOverview({
-  ...props
-}: React.ComponentProps<typeof Card>) {
-  return (
-    <Card {...props}>
-      <CardHeader>
-        <CardTitle className="text-2xl">Traffic Overview</CardTitle>
-        <CardDescription>
-          Traffic for the last 30 days has increased by 12.4% compared to the
-          previous period.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={TRAFFIC_CHART_CONFIG} className="h-82 w-full">
-          <LineChart data={TRAFFIC_OVERVIEW_DATA}>
-            <CartesianGrid
-              vertical={false}
-              strokeDasharray="3 6"
-              stroke="var(--border)"
-            />
-            <XAxis
-              dataKey="date"
-              tickLine={false}
-              axisLine={false}
-              interval="preserveStartEnd"
-              tickMargin={10}
-              tickFormatter={formatXAxisTick}
-            />
-            <YAxis
-              tickLine={false}
-              axisLine={false}
-              width={44}
-              domain={[0, 10000]}
-              ticks={[0, 2500, 5000, 7500, 10000]}
-              tickFormatter={formatYAxisTick}
-              hide
-            />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <Line
-              type="linear"
-              dataKey="views"
-              stroke="var(--color-views)"
-              strokeWidth={2.2}
-              dot={false}
-              activeDot={{ r: 3.5, fill: "var(--color-views)" }}
-            />
-            <Line
-              type="linear"
-              dataKey="unique"
-              stroke="var(--color-unique)"
-              strokeWidth={2}
-              strokeDasharray="4 6"
-              dot={false}
-              activeDot={false}
-            />
-            <ReferenceDot
-              x="2025-10-18"
-              y={9240}
-              r={2.5}
-              fill="var(--color-views)"
-              stroke="var(--color-views)"
-            />
-          </LineChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(styles)/sera/audience-analytics/index.tsx

@@ -1,22 +0,0 @@
-import { Separator } from "@/styles/base-sera/ui/separator"
-
-import { Demographics } from "./components/demographics"
-import { MetricsGrid } from "./components/metrics-grid"
-import { PreviewHeader } from "./components/preview-header"
-import { TopEditorial } from "./components/top-editorial"
-import { TrafficOverviewDeferred } from "./components/traffic-overview-deferred"
-
-export function AudienceAnalytics() {
-  return (
-    <div className="preview theme-taupe @container/preview w-full flex-1 bg-muted pt-4 font-sans ring-1 ring-foreground/5 [--gap:--spacing(4)] sm:pt-0 md:[--gap:--spacing(6)] xl:[--gap:--spacing(8)] 2xl:py-8 **:[.container]:px-(--gap)">
-      <PreviewHeader />
-      <Separator className="hidden sm:block" />
-      <div className="container grid grid-cols-12 gap-(--gap) py-(--gap)">
-        <MetricsGrid />
-        <TrafficOverviewDeferred className="col-span-full md:col-span-6 lg:col-span-8" />
-        <Demographics className="col-span-full md:col-span-6 lg:col-span-4" />
-        <TopEditorial className="col-span-full" />
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/(styles)/sera/components/image-preview.tsx

@@ -1,46 +0,0 @@
-import Image from "next/image"
-
-import { cn } from "@/lib/utils"
-
-export function ImagePreview() {
-  return (
-    <div className="mt-8 flex flex-col overflow-hidden md:hidden">
-      <ImagePreviewItem name="sera-01" />
-      <ImagePreviewItem name="sera-03" />
-      <ImagePreviewItem name="sera-02" />
-      <ImagePreviewItem name="sera-06" />
-    </div>
-  )
-}
-
-function ImagePreviewItem({
-  name,
-  className,
-}: {
-  name: string
-  className?: string
-}) {
-  return (
-    <div
-      className={cn(
-        "theme-taupe overflow-hidden bg-muted px-4 py-2 first:pt-4 last:pb-4",
-        className
-      )}
-    >
-      <Image
-        src={`/images/${name}-light.png`}
-        alt={name}
-        width={1440}
-        height={900}
-        className="dark:hidden"
-      />
-      <Image
-        src={`/images/${name}-dark.png`}
-        alt={name}
-        width={1440}
-        height={900}
-        className="hidden dark:block"
-      />
-    </div>
-  )
-}

apps/v4/app/(app)/(styles)/sera/components/lazy-preview.tsx

@@ -1,148 +0,0 @@
-"use client"
-
-import * as React from "react"
-import dynamic from "next/dynamic"
-
-type LazyPreviewName =
-  | "articleDirectory"
-  | "emptyState"
-  | "editArticle"
-  | "mediaLibrary"
-  | "mediaLibraryTable"
-
-const PREVIEW_MIN_HEIGHTS: Record<LazyPreviewName, number> = {
-  articleDirectory: 760,
-  emptyState: 560,
-  editArticle: 980,
-  mediaLibrary: 880,
-  mediaLibraryTable: 980,
-}
-
-const ArticleDirectoryPreview = dynamic(
-  () => import("../article-directory").then((mod) => mod.ArticleDirectory),
-  {
-    ssr: false,
-    loading: () => (
-      <PreviewPlaceholder minHeight={PREVIEW_MIN_HEIGHTS.articleDirectory} />
-    ),
-  }
-)
-
-const EmptyStatePreview = dynamic(
-  () => import("../empty-state").then((mod) => mod.EmptyState),
-  {
-    ssr: false,
-    loading: () => (
-      <PreviewPlaceholder minHeight={PREVIEW_MIN_HEIGHTS.emptyState} />
-    ),
-  }
-)
-
-const EditArticlePreview = dynamic(
-  () => import("../edit-article").then((mod) => mod.EditArticle),
-  {
-    ssr: false,
-    loading: () => (
-      <PreviewPlaceholder minHeight={PREVIEW_MIN_HEIGHTS.editArticle} />
-    ),
-  }
-)
-
-const MediaLibraryPreview = dynamic(
-  () => import("../media-library").then((mod) => mod.MediaLibrary),
-  {
-    ssr: false,
-    loading: () => (
-      <PreviewPlaceholder minHeight={PREVIEW_MIN_HEIGHTS.mediaLibrary} />
-    ),
-  }
-)
-
-const MediaLibraryTablePreview = dynamic(
-  () => import("../media-library-table").then((mod) => mod.MediaLibraryTable),
-  {
-    ssr: false,
-    loading: () => (
-      <PreviewPlaceholder minHeight={PREVIEW_MIN_HEIGHTS.mediaLibraryTable} />
-    ),
-  }
-)
-
-const PREVIEW_COMPONENTS: Record<LazyPreviewName, React.ComponentType> = {
-  articleDirectory: ArticleDirectoryPreview,
-  emptyState: EmptyStatePreview,
-  editArticle: EditArticlePreview,
-  mediaLibrary: MediaLibraryPreview,
-  mediaLibraryTable: MediaLibraryTablePreview,
-}
-
-export function LazyPreview({ name }: { name: LazyPreviewName }) {
-  const containerRef = React.useRef<HTMLDivElement>(null)
-  const [shouldRender, setShouldRender] = React.useState(false)
-  const PreviewComponent = PREVIEW_COMPONENTS[name]
-
-  React.useEffect(() => {
-    if (shouldRender) {
-      return
-    }
-
-    const container = containerRef.current
-
-    if (!container || !("IntersectionObserver" in window)) {
-      setShouldRender(true)
-      return
-    }
-
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (!entries.some((entry) => entry.isIntersecting)) {
-          return
-        }
-
-        setShouldRender(true)
-        observer.disconnect()
-      },
-      {
-        rootMargin: "800px 0px",
-      }
-    )
-
-    observer.observe(container)
-
-    return () => observer.disconnect()
-  }, [shouldRender])
-
-  return (
-    <div ref={containerRef}>
-      {shouldRender ? (
-        <PreviewComponent />
-      ) : (
-        <PreviewPlaceholder minHeight={PREVIEW_MIN_HEIGHTS[name]} />
-      )}
-    </div>
-  )
-}
-
-function PreviewPlaceholder({ minHeight }: { minHeight: number }) {
-  return (
-    <div
-      aria-hidden="true"
-      className="preview theme-taupe @container/preview w-full flex-1 bg-muted p-4 font-sans ring-1 ring-foreground/5 [--gap:--spacing(4)] sm:p-6 md:[--gap:--spacing(6)] xl:[--gap:--spacing(8)]"
-      style={{ minHeight }}
-    >
-      <div className="container flex flex-col gap-(--gap) py-(--gap)">
-        <div className="flex items-center justify-between gap-4">
-          <div className="flex flex-col gap-3">
-            <div className="h-5 w-44 bg-background/80" />
-            <div className="h-3 w-56 max-w-full bg-background/60" />
-          </div>
-          <div className="hidden h-8 w-28 bg-background/70 sm:block" />
-        </div>
-        <div className="grid grid-cols-1 gap-(--gap) md:grid-cols-3">
-          <div className="min-h-48 bg-background/70 md:col-span-2" />
-          <div className="min-h-48 bg-background/70" />
-        </div>
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/(styles)/sera/components/theme-switcher.tsx

@@ -1,59 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const THEME_OPTIONS = [
-  { label: "Taupe", value: "theme-taupe" },
-  { label: "Neutral", value: "theme-neutral" },
-  { label: "Stone", value: "theme-stone" },
-  { label: "Zinc", value: "theme-zinc" },
-  { label: "Mauve", value: "theme-mauve" },
-  { label: "Olive", value: "theme-olive" },
-  { label: "Mist", value: "theme-mist" },
-] as const
-
-const DEFAULT_THEME = "theme-taupe"
-
-function applyThemeToPreviews(theme: string) {
-  const previewElements = document.querySelectorAll<HTMLElement>(".preview")
-
-  previewElements.forEach((element) => {
-    THEME_OPTIONS.forEach((option) => {
-      element.classList.remove(option.value)
-    })
-
-    element.classList.add(theme)
-  })
-}
-
-export function ThemeSwitcher() {
-  const [theme, setTheme] = React.useState<string>(DEFAULT_THEME)
-
-  React.useEffect(() => {
-    applyThemeToPreviews(theme)
-  }, [theme])
-
-  return (
-    <div className="fixed inset-x-0 bottom-8 z-50 flex justify-center px-4">
-      <div className="w-full max-w-[60vw] rounded-full border-0 bg-neutral-950/50 p-1.5 shadow-xl backdrop-blur-xl sm:max-w-fit">
-        <div className="no-scrollbar flex snap-x snap-mandatory items-center overflow-x-auto">
-          {THEME_OPTIONS.map((option) => (
-            <button
-              data-active={theme === option.value}
-              key={option.value}
-              type="button"
-              onClick={() => {
-                setTheme(option.value)
-              }}
-              className="shrink-0 snap-center rounded-full px-3 py-1.5 text-sm font-medium text-neutral-300 outline-hidden transition-colors select-none hover:text-neutral-100 data-active:bg-neutral-500 data-active:text-neutral-100"
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/(styles)/sera/edit-article/components/editor-workspace.tsx

@@ -1,337 +0,0 @@
-"use client"
-
-import {
-  AlignCenterIcon,
-  AlignLeftIcon,
-  AlignRightIcon,
-  BoldIcon,
-  ChevronDownIcon,
-  Code2Icon,
-  Heading1Icon,
-  Heading2Icon,
-  Heading3Icon,
-  ImageIcon,
-  ItalicIcon,
-  LinkIcon,
-  ListIcon,
-  ListOrderedIcon,
-  RedoIcon,
-  StrikethroughIcon,
-  TypeIcon,
-  UnderlineIcon,
-  UndoIcon,
-} from "lucide-react"
-
-import { Button } from "@/styles/base-sera/ui/button"
-import {
-  ButtonGroup,
-  ButtonGroupSeparator,
-} from "@/styles/base-sera/ui/button-group"
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-sera/ui/card"
-import { Checkbox } from "@/styles/base-sera/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/styles/base-sera/ui/dropdown-menu"
-import {
-  Field,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from "@/styles/base-sera/ui/field"
-import { Input } from "@/styles/base-sera/ui/input"
-import {
-  Progress,
-  ProgressLabel,
-  ProgressValue,
-} from "@/styles/base-sera/ui/progress"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/styles/base-sera/ui/select"
-import { Textarea } from "@/styles/base-sera/ui/textarea"
-
-type Milestone = {
-  name: string
-  complete: boolean
-  note?: string
-}
-
-const MILESTONES: Milestone[] = [
-  {
-    name: "Outline & Commissioning",
-    complete: true,
-  },
-  {
-    name: "First Draft Submitted",
-    complete: true,
-  },
-  {
-    name: "Review & Revisions",
-    complete: false,
-    note: "Waiting on editor",
-  },
-  {
-    name: "Final Copy Edit",
-    complete: false,
-  },
-  {
-    name: "Art Direction & Layout",
-    complete: false,
-  },
-]
-
-const ISSUES = [
-  { label: "Spring Issue 2024", value: "spring-2024" },
-  { label: "Summer Issue 2024", value: "summer-2024" },
-  { label: "Autumn Issue 2024", value: "autumn-2024" },
-  { label: "Winter Issue 2024", value: "winter-2024" },
-]
-
-export function EditorWorkspace() {
-  return (
-    <div className="grid grid-cols-1 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_300px]">
-      <section className="flex flex-col border border-border/70 bg-background">
-        <div className="flex border-b p-2">
-          <ButtonGroup>
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                render={
-                  <Button variant="ghost" size="sm">
-                    Normal Text
-                    <ChevronDownIcon data-icon="inline-end" />
-                  </Button>
-                }
-              />
-              <DropdownMenuContent>
-                <DropdownMenuItem>
-                  <TypeIcon />
-                  Normal Text
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Heading1Icon />
-                  Heading 1
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Heading2Icon />
-                  Heading 2
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Heading3Icon />
-                  Heading 3
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <ListIcon />
-                  Bullet List
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <ListOrderedIcon />
-                  Numbered List
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <ButtonGroupSeparator className="mx-2 data-vertical:h-4 data-vertical:self-center" />
-            <Button variant="ghost" size="icon-sm" aria-label="Bold">
-              <BoldIcon />
-            </Button>
-            <Button variant="ghost" size="icon-sm" aria-label="Italic">
-              <ItalicIcon />
-            </Button>
-            <Button variant="ghost" size="icon-sm" aria-label="Underline">
-              <UnderlineIcon />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              aria-label="Strikethrough"
-              className="hidden md:flex"
-            >
-              <StrikethroughIcon />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              aria-label="Code"
-              className="hidden md:flex"
-            >
-              <Code2Icon />
-            </Button>
-            <ButtonGroupSeparator className="mx-2 hidden md:flex data-vertical:h-4 data-vertical:self-center" />
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              aria-label="Align Left"
-              className="hidden md:flex"
-            >
-              <AlignLeftIcon />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              aria-label="Align Center"
-              className="hidden md:flex"
-            >
-              <AlignCenterIcon />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              aria-label="Align Right"
-              className="hidden md:flex"
-            >
-              <AlignRightIcon />
-            </Button>
-            <ButtonGroupSeparator className="mx-2 hidden md:flex data-vertical:h-4 data-vertical:self-center" />
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              aria-label="Link"
-              className="hidden md:flex"
-            >
-              <LinkIcon />
-            </Button>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              aria-label="Image"
-              className="hidden md:flex"
-            >
-              <ImageIcon />
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup className="ml-auto">
-            <Button variant="ghost" size="icon-sm" aria-label="Undo">
-              <UndoIcon />
-            </Button>
-            <Button variant="ghost" size="icon-sm" aria-label="Redo">
-              <RedoIcon />
-            </Button>
-          </ButtonGroup>
-        </div>
-        <div className="mx-auto flex max-w-2xl flex-1 flex-col gap-8 px-10 py-10 leading-loose md:px-14 lg:py-18">
-          <h1 className="font-heading text-4xl leading-12 font-medium tracking-wide uppercase">
-            The Future of Sustainable Architecture
-          </h1>
-          <p>
-            As cities continue to expand at an unprecedented rate, the
-            architectural paradigm is shifting from mere expansion to
-            sustainable integration. The concrete jungles of the 20th century
-            are making way for structures that breathe, adapt, and give back to
-            their environments.
-          </p>
-          <p>
-            Historically, urban development has been a zero-sum game with
-            nature.
-          </p>
-          <h2 className="font-heading text-2xl tracking-wide uppercase">
-            The Living Building Challenge
-          </h2>
-          <p>
-            Sterling&apos;s latest project in downtown Seattle is a testament to
-            this new philosophy. &quot;We are no longer designing static
-            structures,&quot; Sterling explained during a recent site visit.
-            &quot;We are engineering localized ecosystems.&quot;
-          </p>
-          <p>
-            The building features a facade of responsive biomaterials that
-            adjust their porosity based on humidity and temperature,
-            significantly reducing the need for artificial climate control.
-            Rainwater is not merely channeled away but captured, filtered
-            through a series of integrated rooftop wetlands, and reused within
-            the building&apos;s greywater system.
-          </p>
-          <p className="text-sm text-muted-foreground">
-            This shift requires more than just innovative materials; it demands
-            a fundamental change in how we value space. Check with engineering
-            team for specific stats.
-          </p>
-        </div>
-      </section>
-      <aside className="grid grid-cols-12 gap-(--gap) xl:flex xl:flex-col">
-        <Card className="col-span-full md:col-span-6 lg:col-span-4">
-          <CardHeader>
-            <CardTitle>Article Details</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <FieldGroup>
-              <Field>
-                <FieldLabel>Issue</FieldLabel>
-                <Select items={ISSUES} defaultValue="summer-2024">
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectGroup>
-                      {ISSUES.map((issue) => (
-                        <SelectItem key={issue.value} value={issue.value}>
-                          {issue.label}
-                        </SelectItem>
-                      ))}
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-              </Field>
-              <Field>
-                <FieldLabel>Author</FieldLabel>
-                <Input defaultValue="Elena Rostova" />
-              </Field>
-            </FieldGroup>
-          </CardContent>
-        </Card>
-        <Card className="col-span-full md:col-span-6 lg:col-span-4">
-          <CardHeader>
-            <CardTitle>Publication Flow</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <FieldGroup>
-              <FieldSet>
-                <FieldLegend>Required Milestones</FieldLegend>
-                <Field>
-                  {MILESTONES.map((milestone) => (
-                    <Field key={milestone.name} orientation="horizontal">
-                      <Checkbox
-                        defaultChecked={milestone.complete}
-                        name={milestone.name}
-                        id={milestone.name}
-                      />
-                      <FieldLabel htmlFor={milestone.name}>
-                        {milestone.name}
-                      </FieldLabel>
-                    </Field>
-                  ))}
-                </Field>
-              </FieldSet>
-              <Field>
-                <FieldLabel>Add note for editor</FieldLabel>
-                <Textarea placeholder="This article needs to be revised for clarity and accuracy." />
-              </Field>
-            </FieldGroup>
-          </CardContent>
-        </Card>
-        <Card className="col-span-full lg:col-span-4">
-          <CardHeader>
-            <CardTitle>Word Count</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <Progress value={70}>
-              <ProgressLabel>1,402 / 2,000 words</ProgressLabel>
-              <ProgressValue />
-            </Progress>
-          </CardContent>
-        </Card>
-      </aside>
-    </div>
-  )
-}

apps/v4/app/(app)/(styles)/sera/edit-article/components/preview-header.tsx

@@ -1,45 +0,0 @@
-import { ArrowLeftIcon, ExternalLinkIcon } from "lucide-react"
-
-import { Badge } from "@/styles/base-sera/ui/badge"
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-} from "@/styles/base-sera/ui/breadcrumb"
-import { Button } from "@/styles/base-sera/ui/button"
-import { ButtonGroup } from "@/styles/base-sera/ui/button-group"
-
-export function PreviewHeader() {
-  return (
-    <header>
-      <div className="container flex flex-col items-center justify-center gap-(--gap) py-(--gap) sm:flex-row sm:justify-between">
-        <div className="flex flex-col gap-2 text-center sm:text-left">
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink href="#" className="flex items-center gap-1.5">
-                  <ArrowLeftIcon className="size-3.5" />
-                  Back to articles
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <h1 className="line-clamp-1 font-heading text-3xl tracking-wide uppercase md:text-3xl lg:text-4xl">
-            EDIT ARTICLE
-          </h1>
-        </div>
-        <ButtonGroup className="gap-2 md:gap-4">
-          <Badge title="2 minutes ago">Autosaved</Badge>
-          <ButtonGroup className="gap-2 md:gap-4">
-            <Button variant="link">
-              Preview
-              <ExternalLinkIcon data-icon="inline-end" />
-            </Button>
-            <Button>Submit Draft</Button>
-          </ButtonGroup>
-        </ButtonGroup>
-      </div>
-    </header>
-  )
-}

apps/v4/app/(app)/(styles)/sera/edit-article/index.tsx

@@ -1,16 +0,0 @@
-import { Separator } from "@/styles/base-sera/ui/separator"
-
-import { EditorWorkspace } from "./components/editor-workspace"
-import { PreviewHeader } from "./components/preview-header"
-
-export function EditArticle() {
-  return (
-    <div className="preview theme-taupe @container/preview w-full flex-1 bg-muted pt-4 font-sans ring-1 ring-foreground/5 [--gap:--spacing(4)] sm:pt-0 md:[--gap:--spacing(6)] xl:[--gap:--spacing(8)] 2xl:py-8 **:[.container]:px-(--gap)">
-      <PreviewHeader />
-      <Separator className="hidden sm:block" />
-      <div className="container py-(--gap)">
-        <EditorWorkspace />
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/(styles)/sera/empty-state/components/empty-directory.tsx

@@ -1,95 +0,0 @@
-import { FileTextIcon, PlusIcon } from "lucide-react"
-
-import { Badge } from "@/styles/base-sera/ui/badge"
-import { Button } from "@/styles/base-sera/ui/button"
-import { Card, CardContent } from "@/styles/base-sera/ui/card"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/styles/base-sera/ui/empty"
-import { Separator } from "@/styles/base-sera/ui/separator"
-
-type Stage = {
-  id: string
-  label: string
-  description: string
-  dotClassName: string
-}
-
-const STAGES: Stage[] = [
-  {
-    id: "drafting",
-    label: "Drafting",
-    description:
-      "Start the writing process. Articles here are works in progress, visible only to editors and authors.",
-    dotClassName: "bg-amber-600",
-  },
-  {
-    id: "in-revision",
-    label: "In Revision",
-    description:
-      "Content undergoing editorial review. Track changes and word counts as pieces take shape.",
-    dotClassName: "bg-orange-700",
-  },
-  {
-    id: "final-edit",
-    label: "Final Edit",
-    description:
-      "The final polish before publication. Ensure all styling and factual checks are complete.",
-    dotClassName: "bg-foreground",
-  },
-]
-
-export function EmptyDirectory() {
-  return (
-    <Card className="py-24">
-      <CardContent className="flex flex-col items-center gap-10">
-        <Empty className="min-h-96">
-          <EmptyHeader>
-            <EmptyMedia
-              variant="icon"
-              className="size-14 rounded-full bg-muted/70 text-muted-foreground"
-            >
-              <FileTextIcon className="size-5" />
-            </EmptyMedia>
-            <EmptyTitle className="font-heading text-2xl tracking-normal normal-case">
-              A Blank Canvas
-            </EmptyTitle>
-            <EmptyDescription>
-              Your editorial directory is currently empty. Start building your
-              publication&apos;s next issue by drafting the first piece.
-            </EmptyDescription>
-          </EmptyHeader>
-          <EmptyContent>
-            <Button>
-              <PlusIcon data-icon="inline-start" />
-              Create first article
-            </Button>
-          </EmptyContent>
-        </Empty>
-        <Separator className="max-w-2xl" />
-        <div className="grid w-full max-w-2xl grid-cols-1 gap-8 sm:grid-cols-3">
-          {STAGES.map((stage) => (
-            <div key={stage.id} className="flex flex-col gap-2">
-              <Badge>
-                <span
-                  aria-hidden
-                  className={`size-1.5 rounded-full ${stage.dotClassName}`}
-                />
-
-                {stage.label}
-              </Badge>
-              <p className="text-xs leading-relaxed text-muted-foreground">
-                {stage.description}
-              </p>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(styles)/sera/empty-state/components/preview-header.tsx

@@ -1,37 +0,0 @@
-import { ArrowLeftIcon, PlusIcon } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-} from "@/styles/base-sera/ui/breadcrumb"
-import { Button } from "@/styles/base-sera/ui/button"
-
-export function PreviewHeader() {
-  return (
-    <header>
-      <div className="container flex flex-col items-center justify-center gap-(--gap) py-(--gap) sm:flex-row sm:justify-between">
-        <div className="flex flex-col gap-2 text-center sm:text-left">
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink href="#" className="flex items-center gap-1.5">
-                  <ArrowLeftIcon className="size-3.5" />
-                  Editorial Dashboard
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <h1 className="line-clamp-1 font-heading text-3xl tracking-wide uppercase md:text-3xl lg:text-4xl">
-            Article Directory
-          </h1>
-        </div>
-        <Button className="sm:ml-auto">
-          <PlusIcon data-icon="inline-start" />
-          New Article
-        </Button>
-      </div>
-    </header>
-  )
-}

apps/v4/app/(app)/(styles)/sera/empty-state/index.tsx

@@ -1,16 +0,0 @@
-import { Separator } from "@/styles/base-sera/ui/separator"
-
-import { EmptyDirectory } from "./components/empty-directory"
-import { PreviewHeader } from "./components/preview-header"
-
-export function EmptyState() {
-  return (
-    <div className="preview theme-taupe @container/preview w-full flex-1 bg-muted pt-4 font-sans ring-1 ring-foreground/5 [--gap:--spacing(4)] sm:pt-0 md:[--gap:--spacing(6)] xl:[--gap:--spacing(8)] 2xl:py-8 **:[.container]:px-(--gap)">
-      <PreviewHeader />
-      <Separator className="hidden sm:block" />
-      <div className="container py-(--gap)">
-        <EmptyDirectory />
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/(styles)/sera/media-library-table/components/asset-table.tsx

@@ -1,211 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  FileTextIcon,
-  ImageIcon,
-  MoreVerticalIcon,
-  SearchIcon,
-  VideoIcon,
-} from "lucide-react"
-
-import { Badge } from "@/styles/base-sera/ui/badge"
-import { Button } from "@/styles/base-sera/ui/button"
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-sera/ui/card"
-import { Checkbox } from "@/styles/base-sera/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/styles/base-sera/ui/dropdown-menu"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/styles/base-sera/ui/input-group"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/styles/base-sera/ui/pagination"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/styles/base-sera/ui/table"
-
-import { ASSETS, type AssetType } from "../../media-library/data"
-
-function AssetTypeIcon({
-  type,
-  className,
-}: {
-  type: AssetType
-  className?: string
-}) {
-  if (type === "MP4") {
-    return <VideoIcon className={className} />
-  }
-
-  if (type === "PDF") {
-    return <FileTextIcon className={className} />
-  }
-
-  return <ImageIcon className={className} />
-}
-
-export function AssetTable() {
-  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(
-    new Set(["1"])
-  )
-
-  const toggleSelection = React.useCallback((id: string) => {
-    setSelectedIds((previous) => {
-      const next = new Set(previous)
-
-      if (next.has(id)) {
-        next.delete(id)
-      } else {
-        next.add(id)
-      }
-
-      return next
-    })
-  }, [])
-
-  return (
-    <Card>
-      <CardHeader>
-        <InputGroup className="w-full">
-          <InputGroupAddon>
-            <SearchIcon />
-          </InputGroupAddon>
-          <InputGroupInput placeholder="Search files, tags, or metadata..." />
-        </InputGroup>
-      </CardHeader>
-      <CardContent className="px-0 py-0">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-10 pl-6" aria-label="Select" />
-              <TableHead className="w-20" aria-label="Preview" />
-              <TableHead>Filename</TableHead>
-              <TableHead>Type</TableHead>
-              <TableHead>Dimensions</TableHead>
-              <TableHead>Size</TableHead>
-              <TableHead>Uploaded By</TableHead>
-              <TableHead>Date</TableHead>
-              <TableHead className="w-10 pr-6" aria-label="Actions" />
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {ASSETS.map((asset) => {
-              const isSelected = selectedIds.has(asset.id)
-
-              return (
-                <TableRow
-                  key={asset.id}
-                  data-state={isSelected ? "selected" : undefined}
-                  className="cursor-pointer"
-                  onClick={() => toggleSelection(asset.id)}
-                >
-                  <TableCell className="pl-6">
-                    <Checkbox
-                      checked={isSelected}
-                      aria-label={`Select ${asset.name}`}
-                      onClick={(event) => event.stopPropagation()}
-                      onCheckedChange={() => toggleSelection(asset.id)}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    <div className="relative flex aspect-4/3 w-16 items-center justify-center bg-muted/60 ring-1 ring-border/70 ring-inset">
-                      {asset.duration ? (
-                        <span className="absolute right-1 bottom-1 bg-foreground/90 px-1 text-[0.5rem] font-semibold tracking-wider text-background">
-                          {asset.duration}
-                        </span>
-                      ) : null}
-                      <AssetTypeIcon
-                        type={asset.type}
-                        className="size-4 text-muted-foreground/60"
-                      />
-                    </div>
-                  </TableCell>
-                  <TableCell className="text-sm font-medium text-foreground">
-                    {asset.name}
-                  </TableCell>
-                  <TableCell>
-                    <Badge
-                      variant="outline"
-                      className="border px-2 py-0.5 text-[0.625rem]"
-                    >
-                      {asset.type}
-                    </Badge>
-                  </TableCell>
-                  <TableCell className="text-sm">{asset.dimensions}</TableCell>
-                  <TableCell className="text-sm">{asset.size}</TableCell>
-                  <TableCell>{asset.uploadedBy}</TableCell>
-                  <TableCell className="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
-                    {asset.date}
-                  </TableCell>
-                  <TableCell className="pr-6 text-right">
-                    <DropdownMenu>
-                      <DropdownMenuTrigger
-                        render={<Button variant="ghost" size="icon-xs" />}
-                        aria-label={`Open actions for ${asset.name}`}
-                        onClick={(event) => event.stopPropagation()}
-                      >
-                        <MoreVerticalIcon />
-                      </DropdownMenuTrigger>
-                      <DropdownMenuContent align="end">
-                        <DropdownMenuItem>Preview</DropdownMenuItem>
-                        <DropdownMenuItem>Download</DropdownMenuItem>
-                        <DropdownMenuItem variant="destructive">
-                          Delete
-                        </DropdownMenuItem>
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                  </TableCell>
-                </TableRow>
-              )
-            })}
-          </TableBody>
-        </Table>
-      </CardContent>
-      <CardFooter className="justify-center py-4">
-        <Pagination>
-          <PaginationContent>
-            <PaginationItem>
-              <PaginationPrevious href="#" text="" />
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#" isActive>
-                1
-              </PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#">2</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#">3</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationNext href="#" text="" />
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(styles)/sera/media-library-table/components/filter-library.tsx

@@ -1,233 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { addDays, format } from "date-fns"
-import { CalendarIcon, FilterIcon, XIcon } from "lucide-react"
-import { type DateRange } from "react-day-picker"
-
-import { Button } from "@/styles/base-sera/ui/button"
-import { Calendar } from "@/styles/base-sera/ui/calendar"
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-sera/ui/card"
-import { Checkbox } from "@/styles/base-sera/ui/checkbox"
-import {
-  Combobox,
-  ComboboxChip,
-  ComboboxChips,
-  ComboboxChipsInput,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxItem,
-  ComboboxList,
-  ComboboxValue,
-  useComboboxAnchor,
-} from "@/styles/base-sera/ui/combobox"
-import {
-  Field,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from "@/styles/base-sera/ui/field"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/styles/base-sera/ui/popover"
-import { RadioGroup, RadioGroupItem } from "@/styles/base-sera/ui/radio-group"
-import { Slider } from "@/styles/base-sera/ui/slider"
-
-const FILE_TYPES = [
-  {
-    id: "images",
-    label: "Images (JPEG, PNG, WEBP)",
-    defaultChecked: true,
-  },
-  {
-    id: "video",
-    label: "Video (MP4, MOV)",
-    defaultChecked: false,
-  },
-  {
-    id: "documents",
-    label: "Documents (PDF)",
-    defaultChecked: false,
-  },
-  {
-    id: "audio",
-    label: "Audio (MP3, WAV)",
-    defaultChecked: false,
-  },
-]
-
-const DATE_OPTIONS = [
-  { value: "any", label: "Any time" },
-  { value: "24h", label: "Past 24 hours" },
-  { value: "week", label: "Past week" },
-  { value: "month", label: "Past month" },
-]
-
-const TAGS = [
-  "architecture",
-  "brutalism",
-  "ceramics",
-  "design-week",
-  "editorial",
-  "exterior",
-  "film",
-  "food",
-  "furniture",
-  "interior",
-  "kyoto",
-  "minimalism",
-  "print",
-  "sustainability",
-  "summer-issue",
-  "video",
-] as const
-
-export function FilterLibrary() {
-  const tagAnchor = useComboboxAnchor()
-  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
-    from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
-    to: addDays(
-      new Date(new Date().getFullYear(), new Date().getMonth(), 1),
-      21
-    ),
-  })
-
-  return (
-    <Card>
-      <CardHeader className="border-b">
-        <CardTitle>Filter Library</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>File Type</FieldLegend>
-            <Field>
-              {FILE_TYPES.map((type) => (
-                <Field key={type.id} orientation="horizontal">
-                  <Checkbox id={type.id} defaultChecked={type.defaultChecked} />
-                  <FieldLabel htmlFor={type.id}>{type.label}</FieldLabel>
-                </Field>
-              ))}
-            </Field>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>Date Uploaded</FieldLegend>
-            <RadioGroup defaultValue="any">
-              {DATE_OPTIONS.map((option) => (
-                <Field key={option.value} orientation="horizontal">
-                  <RadioGroupItem
-                    value={option.value}
-                    id={`date-${option.value}`}
-                  />
-                  <FieldLabel htmlFor={`date-${option.value}`}>
-                    {option.label}
-                  </FieldLabel>
-                </Field>
-              ))}
-            </RadioGroup>
-          </FieldSet>
-          <Field>
-            <FieldLabel htmlFor="custom-range">Custom Range</FieldLabel>
-            <Popover>
-              <PopoverTrigger
-                render={
-                  <Button
-                    variant="outline"
-                    id="custom-range"
-                    className="w-full"
-                  />
-                }
-              >
-                <CalendarIcon data-icon="inline-start" />
-                {dateRange?.from ? (
-                  dateRange.to ? (
-                    <>
-                      {format(dateRange.from, "LLL dd, y")} –{" "}
-                      {format(dateRange.to, "LLL dd, y")}
-                    </>
-                  ) : (
-                    format(dateRange.from, "LLL dd, y")
-                  )
-                ) : (
-                  <span>Pick a date range</span>
-                )}
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="end">
-                <Calendar
-                  mode="range"
-                  defaultMonth={dateRange?.from}
-                  selected={dateRange}
-                  onSelect={setDateRange}
-                  numberOfMonths={2}
-                />
-              </PopoverContent>
-            </Popover>
-          </Field>
-          <FieldSet>
-            <FieldLegend>File Size</FieldLegend>
-            <div className="flex flex-col gap-3">
-              <div className="flex items-center justify-between text-xs font-medium tracking-wider text-muted-foreground uppercase">
-                <span>0 MB</span>
-                <span>500+ MB</span>
-              </div>
-              <Slider defaultValue={[0, 60]} max={100} step={1} />
-              <div className="flex items-center justify-between text-xs font-medium">
-                <span>Min: 0 MB</span>
-                <span>Max: 300 MB</span>
-              </div>
-            </div>
-          </FieldSet>
-          <FieldSet>
-            <FieldLegend>Tags</FieldLegend>
-            <Field>
-              <Combobox
-                multiple
-                autoHighlight
-                items={TAGS}
-                defaultValue={["architecture", "brutalism"]}
-              >
-                <ComboboxChips ref={tagAnchor}>
-                  <ComboboxValue>
-                    {(values) => (
-                      <React.Fragment>
-                        {values.map((value: string) => (
-                          <ComboboxChip key={value}>{value}</ComboboxChip>
-                        ))}
-                        <ComboboxChipsInput placeholder="Filter by tag..." />
-                      </React.Fragment>
-                    )}
-                  </ComboboxValue>
-                </ComboboxChips>
-                <ComboboxContent anchor={tagAnchor}>
-                  <ComboboxEmpty>No tags found.</ComboboxEmpty>
-                  <ComboboxList>
-                    {(item) => (
-                      <ComboboxItem key={item} value={item}>
-                        {item}
-                      </ComboboxItem>
-                    )}
-                  </ComboboxList>
-                </ComboboxContent>
-              </Combobox>
-            </Field>
-          </FieldSet>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter className="flex flex-col gap-2 border-t">
-        <Button className="w-full">Apply Filters</Button>
-        <Button variant="ghost" className="w-full">
-          Reset
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(styles)/sera/media-library-table/components/preview-header.tsx

@@ -1,47 +0,0 @@
-import { ArrowLeftIcon, SlidersHorizontalIcon, UploadIcon } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-} from "@/styles/base-sera/ui/breadcrumb"
-import { Button } from "@/styles/base-sera/ui/button"
-import { ButtonGroup } from "@/styles/base-sera/ui/button-group"
-
-export function PreviewHeader() {
-  return (
-    <header>
-      <div className="container flex flex-col items-center justify-center gap-(--gap) py-(--gap) sm:flex-row sm:justify-between">
-        <div className="flex flex-col gap-2 text-center sm:text-left">
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink href="#" className="flex items-center gap-1.5">
-                  <ArrowLeftIcon className="size-3.5" />
-                  Asset management
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <h1 className="line-clamp-1 font-heading text-3xl tracking-wide uppercase md:text-3xl lg:text-4xl">
-            Media Library
-          </h1>
-        </div>
-        <ButtonGroup className="gap-2 sm:ml-auto md:gap-4">
-          <Button
-            variant="outline"
-            className="bg-background hover:bg-background/80"
-          >
-            <SlidersHorizontalIcon data-icon="inline-start" />
-            Filters
-          </Button>
-          <Button>
-            <UploadIcon data-icon="inline-start" />
-            Upload Assets
-          </Button>
-        </ButtonGroup>
-      </div>
-    </header>
-  )
-}

apps/v4/app/(app)/(styles)/sera/media-library-table/index.tsx

@@ -1,18 +0,0 @@
-import { Separator } from "@/styles/base-sera/ui/separator"
-
-import { AssetTable } from "./components/asset-table"
-import { FilterLibrary } from "./components/filter-library"
-import { PreviewHeader } from "./components/preview-header"
-
-export function MediaLibraryTable() {
-  return (
-    <div className="preview theme-taupe @container/preview w-full flex-1 bg-muted pt-4 font-sans ring-1 ring-foreground/5 [--gap:--spacing(4)] sm:pt-0 md:[--gap:--spacing(6)] xl:[--gap:--spacing(8)] 2xl:py-8 **:[.container]:px-(--gap)">
-      <PreviewHeader />
-      <Separator className="hidden sm:block" />
-      <div className="container grid grid-cols-1 items-start gap-(--gap) py-(--gap) xl:grid-cols-[minmax(0,1fr)_320px]">
-        <AssetTable />
-        <FilterLibrary />
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/(styles)/sera/media-library/components/asset-details.tsx

@@ -1,110 +0,0 @@
-import {
-  DownloadIcon,
-  FileTextIcon,
-  ImageIcon,
-  PlusIcon,
-  VideoIcon,
-} from "lucide-react"
-
-import { Badge } from "@/styles/base-sera/ui/badge"
-import { Button } from "@/styles/base-sera/ui/button"
-import { Card, CardContent, CardFooter } from "@/styles/base-sera/ui/card"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemTitle,
-} from "@/styles/base-sera/ui/item"
-import { Separator } from "@/styles/base-sera/ui/separator"
-
-import { type Asset, type AssetType } from "../data"
-
-const TYPE_LABEL: Record<AssetType, string> = {
-  JPEG: "Image / JPEG",
-  PNG: "Image / PNG",
-  WEBP: "Image / WEBP",
-  MP4: "Video / MP4",
-  PDF: "Document / PDF",
-}
-
-export function AssetDetails({ asset }: { asset: Asset }) {
-  return (
-    <Card className="gap-0">
-      <CardContent className="flex flex-col gap-6">
-        <div className="flex aspect-5/4 items-center justify-center bg-muted/60 text-muted-foreground/60 ring-1 ring-border/70 ring-inset">
-          {asset.type === "MP4" ? (
-            <VideoIcon className="size-8" />
-          ) : asset.type === "PDF" ? (
-            <FileTextIcon className="size-8" />
-          ) : (
-            <ImageIcon className="size-8" />
-          )}
-        </div>
-        <h2 className="line-clamp-2 font-heading text-xl tracking-wide">
-          {asset.name}
-        </h2>
-        <Separator />
-        <dl className="flex flex-col gap-5 text-sm">
-          <div className="flex flex-col gap-1.5">
-            <dt className="text-[0.625rem] font-semibold tracking-widest text-muted-foreground uppercase">
-              Asset Type
-            </dt>
-            <dd>{TYPE_LABEL[asset.type]}</dd>
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div className="flex flex-col gap-1.5">
-              <dt className="text-[0.625rem] font-semibold tracking-widest text-muted-foreground uppercase">
-                Dimensions
-              </dt>
-              <dd>{asset.dimensions}</dd>
-            </div>
-            <div className="flex flex-col gap-1.5">
-              <dt className="text-[0.625rem] font-semibold tracking-widest text-muted-foreground uppercase">
-                File Size
-              </dt>
-              <dd>{asset.size}</dd>
-            </div>
-          </div>
-        </dl>
-        <Separator />
-        <div className="flex flex-col gap-3">
-          <div className="flex items-center justify-between">
-            <h3 className="text-[0.625rem] font-semibold tracking-widest text-muted-foreground uppercase">
-              Tags
-            </h3>
-            <Button variant="ghost" size="icon-xs" aria-label="Add tag">
-              <PlusIcon />
-            </Button>
-          </div>
-          <div className="flex flex-wrap gap-x-4 gap-y-2">
-            {asset.tags.map((tag) => (
-              <Badge key={tag}>{tag}</Badge>
-            ))}
-          </div>
-        </div>
-        <Separator />
-        <div className="flex flex-col gap-3">
-          <h3 className="text-[0.625rem] font-semibold tracking-widest text-muted-foreground uppercase">
-            Used In
-          </h3>
-          <div className="flex flex-col gap-2">
-            {asset.usedIn.map((usage) => (
-              <Item key={usage.title} variant="outline">
-                <ItemContent>
-                  <ItemTitle>{usage.title}</ItemTitle>
-                  <ItemDescription>{usage.role}</ItemDescription>
-                </ItemContent>
-              </Item>
-            ))}
-          </div>
-        </div>
-      </CardContent>
-      <CardFooter className="mt-6 border-t pt-6">
-        <Button className="w-full">
-          <DownloadIcon data-icon="inline-start" />
-          Download
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(styles)/sera/media-library/components/asset-grid.tsx

@@ -1,160 +0,0 @@
-"use client"
-
-import {
-  CheckIcon,
-  FileTextIcon,
-  ImageIcon,
-  SearchIcon,
-  VideoIcon,
-} from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Badge } from "@/styles/base-sera/ui/badge"
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-sera/ui/card"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/styles/base-sera/ui/input-group"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-} from "@/styles/base-sera/ui/pagination"
-
-import { ASSETS, type Asset, type AssetType } from "../data"
-
-function AssetTypeIcon({
-  type,
-  className,
-}: {
-  type: AssetType
-  className?: string
-}) {
-  if (type === "MP4") {
-    return <VideoIcon className={className} />
-  }
-
-  if (type === "PDF") {
-    return <FileTextIcon className={className} />
-  }
-
-  return <ImageIcon className={className} />
-}
-
-export function AssetGrid({
-  selectedId,
-  onSelect,
-}: {
-  selectedId: string
-  onSelect: (id: string) => void
-}) {
-  return (
-    <Card>
-      <CardHeader>
-        <InputGroup className="w-full">
-          <InputGroupAddon>
-            <SearchIcon />
-          </InputGroupAddon>
-          <InputGroupInput placeholder="Search files, tags, or metadata..." />
-        </InputGroup>
-      </CardHeader>
-      <CardContent>
-        <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
-          {ASSETS.map((asset) => (
-            <AssetGridItem
-              key={asset.id}
-              asset={asset}
-              selected={asset.id === selectedId}
-              onSelect={() => onSelect(asset.id)}
-            />
-          ))}
-        </div>
-      </CardContent>
-      <CardFooter className="justify-center">
-        <Pagination>
-          <PaginationContent>
-            <PaginationItem>
-              <PaginationPrevious href="#" />
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#" isActive>
-                1
-              </PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#">2</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationLink href="#">3</PaginationLink>
-            </PaginationItem>
-            <PaginationItem>
-              <PaginationNext href="#" />
-            </PaginationItem>
-          </PaginationContent>
-        </Pagination>
-      </CardFooter>
-    </Card>
-  )
-}
-
-function AssetGridItem({
-  asset,
-  selected,
-  onSelect,
-}: {
-  asset: Asset
-  selected: boolean
-  onSelect: () => void
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onSelect}
-      aria-pressed={selected}
-      className="group flex flex-col gap-2.5 text-left outline-none focus-visible:[&>div:first-child]:ring-2 focus-visible:[&>div:first-child]:ring-ring"
-    >
-      <div
-        className={cn(
-          "relative flex aspect-4/3 items-center justify-center bg-muted/60 ring-1 ring-border/70 transition-shadow ring-inset group-hover:ring-foreground/40",
-          selected && "ring-2 ring-foreground group-hover:ring-foreground"
-        )}
-      >
-        {selected ? (
-          <div className="absolute top-2 left-2 flex size-5 items-center justify-center bg-foreground text-background">
-            <CheckIcon className="size-3" />
-          </div>
-        ) : null}
-        <Badge
-          variant="outline"
-          className="absolute top-2 right-2 border bg-background px-2 py-1 text-[0.625rem]"
-        >
-          {asset.type}
-        </Badge>
-        {asset.duration ? (
-          <Badge className="absolute bottom-2 left-2 bg-foreground px-2 py-1 text-background">
-            {asset.duration}
-          </Badge>
-        ) : null}
-        <AssetTypeIcon
-          type={asset.type}
-          className="size-7 text-muted-foreground/60"
-        />
-      </div>
-      <div className="flex flex-col gap-0.5 px-0.5">
-        <p className="line-clamp-1 text-sm font-medium">{asset.name}</p>
-        <p className="text-[0.625rem] font-semibold tracking-wider text-muted-foreground uppercase">
-          {asset.date} · {asset.size}
-        </p>
-      </div>
-    </button>
-  )
-}

apps/v4/app/(app)/(styles)/sera/media-library/components/preview-header.tsx

@@ -1,47 +0,0 @@
-import { ArrowLeftIcon, SlidersHorizontalIcon, UploadIcon } from "lucide-react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-} from "@/styles/base-sera/ui/breadcrumb"
-import { Button } from "@/styles/base-sera/ui/button"
-import { ButtonGroup } from "@/styles/base-sera/ui/button-group"
-
-export function PreviewHeader() {
-  return (
-    <header>
-      <div className="container flex flex-col items-center justify-center gap-(--gap) py-(--gap) sm:flex-row sm:justify-between">
-        <div className="flex flex-col gap-2 text-center sm:text-left">
-          <Breadcrumb>
-            <BreadcrumbList>
-              <BreadcrumbItem>
-                <BreadcrumbLink href="#" className="flex items-center gap-1.5">
-                  <ArrowLeftIcon className="size-3.5" />
-                  Asset management
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-            </BreadcrumbList>
-          </Breadcrumb>
-          <h1 className="line-clamp-1 font-heading text-3xl tracking-wide uppercase md:text-3xl lg:text-4xl">
-            Media Library
-          </h1>
-        </div>
-        <ButtonGroup className="gap-2 sm:ml-auto md:gap-4">
-          <Button
-            variant="outline"
-            className="bg-background hover:bg-background/80"
-          >
-            <SlidersHorizontalIcon data-icon="inline-start" />
-            Filters
-          </Button>
-          <Button>
-            <UploadIcon data-icon="inline-start" />
-            Upload Assets
-          </Button>
-        </ButtonGroup>
-      </div>
-    </header>
-  )
-}

apps/v4/app/(app)/(styles)/sera/media-library/data.ts

@@ -1,188 +0,0 @@
-export type AssetType = "JPEG" | "PNG" | "WEBP" | "MP4" | "PDF"
-
-export type Asset = {
-  id: string
-  name: string
-  date: string
-  size: string
-  type: AssetType
-  dimensions: string
-  duration?: string
-  uploadedBy: string
-  uploadedByInitials: string
-  uploadedOn: string
-  tags: string[]
-  usedIn: { title: string; role: string }[]
-}
-
-export const ASSETS: Asset[] = [
-  {
-    id: "1",
-    name: "brutalism-facade-01.jpg",
-    date: "Oct 24",
-    size: "4.2 MB",
-    type: "JPEG",
-    dimensions: "4000 × 3000",
-    uploadedBy: "Marcus Chen",
-    uploadedByInitials: "MC",
-    uploadedOn: "Oct 24, 2024",
-    tags: ["architecture", "brutalism", "exterior", "summer-issue"],
-    usedIn: [
-      { title: "Brutalism's Second Act", role: "Cover Image" },
-      { title: "Autumn Sartorial Code", role: "Inline Gallery" },
-    ],
-  },
-  {
-    id: "2",
-    name: "brutalism-interior-raw.jpg",
-    date: "Oct 24",
-    size: "3.8 MB",
-    type: "JPEG",
-    dimensions: "3800 × 2850",
-    uploadedBy: "Marcus Chen",
-    uploadedByInitials: "MC",
-    uploadedOn: "Oct 24, 2024",
-    tags: ["architecture", "brutalism", "interior"],
-    usedIn: [{ title: "Brutalism's Second Act", role: "Inline Gallery" }],
-  },
-  {
-    id: "3",
-    name: "seattle-living-building-diagram.png",
-    date: "Oct 22",
-    size: "1.1 MB",
-    type: "PNG",
-    dimensions: "2000 × 1500",
-    uploadedBy: "Sarah Jenkins",
-    uploadedByInitials: "SJ",
-    uploadedOn: "Oct 22, 2024",
-    tags: ["diagram", "sustainability", "seattle"],
-    usedIn: [
-      { title: "The Future of Sustainable Architecture", role: "Diagram" },
-    ],
-  },
-  {
-    id: "4",
-    name: "interview-sofia-coppola-clip1.mp4",
-    date: "Oct 18",
-    size: "45.0 MB",
-    type: "MP4",
-    dimensions: "1920 × 1080",
-    duration: "0:45",
-    uploadedBy: "Emma Ross",
-    uploadedByInitials: "ER",
-    uploadedOn: "Oct 18, 2024",
-    tags: ["video", "interview", "film"],
-    usedIn: [{ title: "The Aesthetics of Isolation", role: "Featured Video" }],
-  },
-  {
-    id: "5",
-    name: "kyoto-kilns-pottery-detail.jpg",
-    date: "Oct 15",
-    size: "5.6 MB",
-    type: "JPEG",
-    dimensions: "4500 × 3000",
-    uploadedBy: "Marcus Chen",
-    uploadedByInitials: "MC",
-    uploadedOn: "Oct 15, 2024",
-    tags: ["ceramics", "kyoto", "craft"],
-    usedIn: [{ title: "Kyoto's Oldest Kilns", role: "Hero Image" }],
-  },
-  {
-    id: "6",
-    name: "copenhagen-design-week-street.jpg",
-    date: "Oct 12",
-    size: "3.2 MB",
-    type: "JPEG",
-    dimensions: "3600 × 2400",
-    uploadedBy: "Noah Bennett",
-    uploadedByInitials: "NB",
-    uploadedOn: "Oct 12, 2024",
-    tags: ["copenhagen", "design-week", "street"],
-    usedIn: [{ title: "Field Notes from Copenhagen", role: "Inline Gallery" }],
-  },
-  {
-    id: "7",
-    name: "minimalist-chair-render.webp",
-    date: "Oct 10",
-    size: "0.8 MB",
-    type: "WEBP",
-    dimensions: "2400 × 1600",
-    uploadedBy: "Claire Duval",
-    uploadedByInitials: "CD",
-    uploadedOn: "Oct 10, 2024",
-    tags: ["furniture", "minimalism", "render"],
-    usedIn: [{ title: "The New Vanguard", role: "Product Shot" }],
-  },
-  {
-    id: "8",
-    name: "autumn-issue-style-guide.pdf",
-    date: "Oct 05",
-    size: "12.4 MB",
-    type: "PDF",
-    dimensions: "N/A",
-    uploadedBy: "Emma Ross",
-    uploadedByInitials: "ER",
-    uploadedOn: "Oct 05, 2024",
-    tags: ["guidelines", "internal", "autumn"],
-    usedIn: [{ title: "Autumn Issue 2024", role: "Reference" }],
-  },
-  {
-    id: "9",
-    name: "milan-lighting-studio-visit.jpg",
-    date: "Oct 09",
-    size: "6.1 MB",
-    type: "JPEG",
-    dimensions: "5200 × 3466",
-    uploadedBy: "Claire Duval",
-    uploadedByInitials: "CD",
-    uploadedOn: "Oct 09, 2024",
-    tags: ["milan", "lighting", "studio"],
-    usedIn: [
-      { title: "Milan's Most Elusive Lighting Designer", role: "Hero Image" },
-    ],
-  },
-  {
-    id: "10",
-    name: "lisbon-culinary-scene-raw.webp",
-    date: "Oct 14",
-    size: "2.4 MB",
-    type: "WEBP",
-    dimensions: "3000 × 2000",
-    uploadedBy: "Amara Iqbal",
-    uploadedByInitials: "AI",
-    uploadedOn: "Oct 14, 2024",
-    tags: ["lisbon", "food", "editorial"],
-    usedIn: [
-      { title: "Lisbon's Quiet Culinary Renaissance", role: "Inline Gallery" },
-    ],
-  },
-  {
-    id: "11",
-    name: "print-magazine-covers-mo...",
-    date: "Sep 26",
-    size: "8.9 MB",
-    type: "PNG",
-    dimensions: "3200 × 2400",
-    uploadedBy: "Mina Okafor",
-    uploadedByInitials: "MO",
-    uploadedOn: "Sep 26, 2024",
-    tags: ["print", "magazine", "covers"],
-    usedIn: [{ title: "The Return of Print", role: "Cover Image" }],
-  },
-  {
-    id: "12",
-    name: "avant-garde-furniture-trailer.mp4",
-    date: "Sep 30",
-    size: "78.2 MB",
-    type: "MP4",
-    dimensions: "3840 × 2160",
-    duration: "1:12",
-    uploadedBy: "Tommy Rhodes",
-    uploadedByInitials: "TR",
-    uploadedOn: "Sep 30, 2024",
-    tags: ["video", "furniture", "trailer"],
-    usedIn: [
-      { title: "Collecting the New Avant-Garde", role: "Featured Video" },
-    ],
-  },
-]