fix: chart and input-otp lint errors

.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/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/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/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/slow-tools-relax.md

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

.changeset/spotty-plants-juggle.md

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

.changeset/tasty-walls-drum.md

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

.claude/settings.local.json

@@ -1,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-plugin/plugin.json

@@ -1,41 +0,0 @@
-{
-  "name": "shadcn",
-  "displayName": "shadcn/ui",
-  "version": "1.0.0",
-  "description": "UI component and design system framework. Search registries, install components as source code, and audit your project.",
-  "author": {
-    "name": "shadcn"
-  },
-  "homepage": "https://ui.shadcn.com",
-  "repository": "https://github.com/shadcn-ui/ui",
-  "license": "MIT",
-  "logo": "skills/shadcn/assets/shadcn.png",
-  "keywords": [
-    "shadcn",
-    "shadcn-ui",
-    "ui",
-    "components",
-    "tailwind",
-    "tailwindcss",
-    "radix",
-    "react",
-    "design-system",
-    "registry",
-    "mcp"
-  ],
-  "category": "developer-tools",
-  "tags": [
-    "ui",
-    "components",
-    "design-system",
-    "react",
-    "tailwind"
-  ],
-  "skills": "./skills/",
-  "mcpServers": {
-    "shadcn": {
-      "command": "npx",
-      "args": ["shadcn@latest", "mcp"]
-    }
-  }
-}

.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/FUNDING.yml

@@ -1,3 +0,0 @@
-# These are supported funding model platforms
-
-github: [shadcn]

.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/version-script-beta.js

@@ -0,0 +1,21 @@
+// ORIGINALLY FROM CLOUDFLARE WRANGLER:
+// https://github.com/cloudflare/wrangler2/blob/main/.github/version-script.js
+
+import { exec } from "child_process"
+import fs from "fs"
+
+const pkgJsonPath = "packages/shadcn/package.json"
+try {
+  const pkg = JSON.parse(fs.readFileSync(pkgJsonPath))
+  exec("git rev-parse --short HEAD", (err, stdout) => {
+    if (err) {
+      console.log(err)
+      process.exit(1)
+    }
+    pkg.version = "0.0.0-beta." + stdout.trim()
+    fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, "\t") + "\n")
+  })
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}

.github/version-script-prerelease.js

@@ -1,37 +0,0 @@
-import fs from "fs"
-
-const pkgJsonPath = "packages/shadcn/package.json"
-const channel = process.argv[2]
-const headSha = process.argv[3]
-
-if (!["beta", "rc"].includes(channel)) {
-  console.error(
-    `Expected prerelease channel to be "beta" or "rc", got "${channel}".`
-  )
-  process.exit(1)
-}
-
-if (!headSha) {
-  console.error("Expected pull request head SHA.")
-  process.exit(1)
-}
-
-try {
-  const pkg = JSON.parse(fs.readFileSync(pkgJsonPath, "utf8"))
-  const shortSha = headSha.trim().slice(0, 7)
-  const baseVersion = channel === "beta" ? "0.0.0" : pkg.version
-
-  if (channel === "rc" && baseVersion.includes("-")) {
-    console.error(
-      `Expected a stable planned version for rc, got "${baseVersion}".`
-    )
-    process.exit(1)
-  }
-
-  pkg.version = `${baseVersion}-${channel}.${shortSha}`
-  fs.writeFileSync(pkgJsonPath, JSON.stringify(pkg, null, "\t") + "\n")
-  console.log(`Prepared shadcn@${pkg.version}`)
-} catch (error) {
-  console.error(error)
-  process.exit(1)
-}

.github/workflows/code-check.yml

@@ -22,7 +22,7 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 10.33.4
+          version: 9.0.6
           run_install: false
 
       - name: Get pnpm store directory
@@ -58,7 +58,7 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 10.33.4
+          version: 9.0.6
           run_install: false
 
       - name: Get pnpm store directory
@@ -77,9 +77,6 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Build packages
-        run: pnpm --filter=shadcn build
-
       - run: pnpm format:check
 
   tsc:
@@ -99,7 +96,7 @@ jobs:
         name: Install pnpm
         id: pnpm-install
         with:
-          version: 10.33.4
+          version: 9.0.6
           run_install: false
 
       - name: Get pnpm store directory

.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

@@ -1,9 +1,9 @@
 # Adapted from create-t3-app.
-name: Write Prerelease comment
+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: |
@@ -32,13 +31,9 @@ jobs:
               const match = /^npm-package-shadcn@(.*?)-pr-(\d+)/.exec(artifact.name);
 
               if (match) {
-                const version = match[1];
-                const channel = version.includes("-rc.") ? "rc" : "beta";
                 require("fs").appendFileSync(
                   process.env.GITHUB_ENV,
-                  `\nPRERELEASE_PACKAGE_VERSION=${version}` +
-                  `\nPRERELEASE_CHANNEL=${channel}` +
-                  `\nPRERELEASE_LABEL=release: ${channel}` +
+                  `\nBETA_PACKAGE_VERSION=${match[1]}` +
                   `\nWORKFLOW_RUN_PR=${match[2]}` +
                   `\nWORKFLOW_RUN_ID=${context.payload.workflow_run.id}`
                 );
@@ -51,30 +46,20 @@ jobs:
         with:
           number: ${{ env.WORKFLOW_RUN_PR }}
           message: |
-            A new ${{ env.PRERELEASE_CHANNEL }} prerelease is available for testing:
+            A new prerelease is available for testing:
 
             ```sh
-            pnpm dlx shadcn@${{ env.PRERELEASE_PACKAGE_VERSION }}
+            pnpm dlx shadcn@${{ env.BETA_PACKAGE_VERSION }}
             ```
 
-            View on npm: https://www.npmjs.com/package/shadcn/v/${{ env.PRERELEASE_PACKAGE_VERSION }}
-
-      - name: "Remove the prerelease label once published"
-        uses: actions/github-script@v7
+      - name: "Remove the autorelease label once published"
+        uses: actions/github-script@v6
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
-            try {
-              await github.rest.issues.removeLabel({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: '${{ env.WORKFLOW_RUN_PR }}',
-                name: '${{ env.PRERELEASE_LABEL }}',
-              });
-            } catch (error) {
-              if (error.status !== 404) {
-                throw error;
-              }
-
-              core.info("The prerelease label was already removed.");
-            }
+            github.rest.issues.removeLabel({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: '${{ env.WORKFLOW_RUN_PR }}',
+              name: '🚀 autorelease',
+            });

.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,152 +2,34 @@
 
 name: Release
 
-run-name: ${{ github.event_name == 'pull_request' && format('Release Prerelease - 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, 'release: beta') || contains(github.event.pull_request.labels.*.name, 'release: rc')) }}"
-    name: Publish Prerelease to NPM
-    runs-on: ubuntu-latest
-    environment: Preview
-    permissions:
-      id-token: write
-      contents: read
-
-    steps:
-      - name: Select prerelease channel
-        id: prerelease
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const prereleaseLabels = [
-              { name: "release: beta", channel: "beta" },
-              { name: "release: rc", channel: "rc" },
-            ];
-            const labels = context.payload.pull_request.labels.map((label) => label.name);
-            const selectedLabels = prereleaseLabels.filter((label) =>
-              labels.includes(label.name)
-            );
-
-            if (selectedLabels.length !== 1) {
-              throw new Error(
-                `Expected exactly one prerelease label, found: ${
-                  selectedLabels.map((label) => label.name).join(", ") || "none"
-                }.`
-              );
-            }
-
-            const selected = selectedLabels[0];
-            const pullRequest = context.payload.pull_request;
-
-            if (
-              selected.channel === "rc" &&
-              (pullRequest.head.ref !== "changeset-release/main" ||
-                pullRequest.title !== "chore(release): version packages")
-            ) {
-              throw new Error(
-                "The release: rc label can only be used on the Changesets version PR from changeset-release/main."
-              );
-            }
-
-            core.setOutput("channel", selected.channel);
-            core.setOutput("label", selected.name);
-
-      - name: Checkout Repo
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ github.event.pull_request.head.sha }}
-
-      - name: Use PNPM
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10.33.4
-
-      - 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-prerelease.js ${{ steps.prerelease.outputs.channel }} ${{ github.event.pull_request.head.sha }}
-
-      - name: get-npm-version
-        id: package-version
-        uses: martinbeentjes/npm-get-version-action@main
-        with:
-          path: packages/shadcn
-
-      - name: Check package version on NPM
-        id: package-exists
-        run: |
-          if npm view "shadcn@${{ steps.package-version.outputs.current-version }}" version >/dev/null 2>&1; then
-            echo "exists=true" >> "$GITHUB_OUTPUT"
-          else
-            echo "exists=false" >> "$GITHUB_OUTPUT"
-          fi
-
-      - name: Publish Prerelease to NPM
-        if: ${{ steps.package-exists.outputs.exists == 'false' }}
-        run: pnpm pub:${{ steps.prerelease.outputs.channel }}
-
-      - name: Build packaged artifact
-        if: ${{ steps.package-exists.outputs.exists == 'true' }}
-        run: pnpm shadcn:build
-
-      - 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
 
       - name: Use PNPM
         uses: pnpm/action-setup@v4
         with:
-          version: 10.33.4
+          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
 
@@ -157,23 +39,15 @@ jobs:
       - name: Build the package
         run: pnpm shadcn:build
 
-      - name: Import GPG key
-        uses: crazy-max/ghaction-import-gpg@v6
-        with:
-          gpg_private_key: ${{ secrets.RELEASE_GPG_PRIVATE_KEY }}
-          git_user_signingkey: true
-          git_commit_gpgsign: true
-          git_tag_gpgsign: true
-
       - name: Create Version PR or Publish to NPM
         id: changesets
-        uses: changesets/action@v1
+        uses: changesets/action@v1.4.1
         with:
-          setupGitUser: false
           commit: "chore(release): version packages"
           title: "chore(release): version packages"
           version: node .github/changeset-version.js
           publish: npx changeset publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
           NODE_ENV: "production"

.github/workflows/signed-commits.yml

@@ -1,75 +0,0 @@
-name: Signed commits
-
-on:
-  pull_request_target:
-    types:
-      - opened
-      - reopened
-      - synchronize
-      - ready_for_review
-
-permissions:
-  pull-requests: write
-
-jobs:
-  signed-commits:
-    if: github.repository_owner == 'shadcn-ui'
-    runs-on: ubuntu-latest
-    name: Signed commits
-    steps:
-      - name: Check PR commits
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            const body = "Can you sign the commits please? See https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits. Thank you."
-
-            const { owner, repo } = context.repo
-            const pullNumber = context.payload.pull_request.number
-
-            const commits = await github.paginate(github.rest.pulls.listCommits, {
-              owner,
-              repo,
-              pull_number: pullNumber,
-              per_page: 100,
-            })
-
-            const unsignedCommits = commits.filter((commit) => {
-              return commit.commit.verification?.reason === "unsigned"
-            })
-
-            const comments = await github.paginate(github.rest.issues.listComments, {
-              owner,
-              repo,
-              issue_number: pullNumber,
-              per_page: 100,
-            })
-
-            const existingComments = comments.filter((comment) => {
-              return comment.user.type === "Bot" && comment.body.trim() === body
-            })
-
-            if (unsignedCommits.length > 0) {
-              core.info(`Found ${unsignedCommits.length} unsigned commits.`)
-
-              if (existingComments.length === 0) {
-                await github.rest.issues.createComment({
-                  owner,
-                  repo,
-                  issue_number: pullNumber,
-                  body,
-                })
-              }
-
-              return
-            }
-
-            core.info("All commits are signed.")
-
-            for (const comment of existingComments) {
-              await github.rest.issues.deleteComment({
-                owner,
-                repo,
-                comment_id: comment.id,
-              })
-            }

.github/workflows/templates.yml

@@ -1,314 +0,0 @@
-name: Templates
-
-on:
-  pull_request:
-    branches: ["*"]
-    paths:
-      - ".github/workflows/templates.yml"
-      - "apps/v4/registry/**"
-      - "package.json"
-      - "packages/shadcn/src/commands/add.ts"
-      - "packages/shadcn/src/commands/init.ts"
-      - "packages/shadcn/src/templates/**"
-      - "packages/shadcn/src/utils/create-project.ts"
-      - "packages/shadcn/src/utils/get-monorepo-info.ts"
-      - "packages/shadcn/src/utils/get-package-manager.ts"
-      - "pnpm-lock.yaml"
-      - "templates/**"
-
-jobs:
-  validate:
-    runs-on: ubuntu-latest
-    name: ${{ matrix.package-manager == 'pnpm' && format('pnpm {0}', matrix.pnpm-version) || matrix.package-manager }} ${{ matrix.template }}
-    permissions:
-      contents: read
-    timeout-minutes: 45
-    strategy:
-      fail-fast: false
-      matrix:
-        template: [next, vite, astro, start, react-router]
-        package-manager: [pnpm, bun, npm, yarn]
-        pnpm-version: [10.33.4, 11]
-        exclude:
-          - package-manager: bun
-            pnpm-version: 11
-          - package-manager: npm
-            pnpm-version: 11
-          - package-manager: yarn
-            pnpm-version: 11
-    env:
-      NEXT_PUBLIC_APP_URL: http://localhost:4000
-      NEXT_PUBLIC_V0_URL: https://v0.dev
-      REGISTRY_URL: http://localhost:4000/r
-      ROOT_PNPM_VERSION: 10.33.4
-      TEMPLATE_PNPM_VERSION: ${{ matrix.pnpm-version }}
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          persist-credentials: false
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-
-      - uses: pnpm/action-setup@v4
-        name: Install pnpm
-        id: pnpm-install
-        with:
-          version: ${{ env.ROOT_PNPM_VERSION }}
-          run_install: false
-
-      - name: Install Bun
-        uses: oven-sh/setup-bun@v2
-
-      - name: Install Yarn
-        if: matrix.package-manager == 'yarn'
-        run: |
-          corepack enable
-          COREPACK_ENABLE_PROJECT_SPEC=0 corepack prepare yarn@4.12.0 --activate
-
-      - name: Get pnpm store directory
-        id: pnpm-cache
-        run: |
-          echo "pnpm_cache_dir=$(pnpm store path)" >> "$GITHUB_OUTPUT"
-
-      - uses: actions/cache@v4
-        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: Build packages
-        run: |
-          pnpm --filter=shadcn build
-          pnpm --filter=v4 registry:build
-
-      - name: Validate templates
-        env:
-          TEMPLATE: ${{ matrix.template }}
-          TEMPLATE_PACKAGE_MANAGER: ${{ matrix.package-manager }}
-          SHADCN_TEMPLATE_DIR: ${{ github.workspace }}/templates
-        run: |
-          set -euo pipefail
-
-          root_pnpm="$(command -v pnpm)"
-          validation_script="$RUNNER_TEMP/validate-templates.sh"
-
-          cat > "$validation_script" <<'BASH'
-          set -euo pipefail
-
-          bin_dir="$RUNNER_TEMP/template-pnpm-bin"
-          mkdir -p "$bin_dir"
-
-          cat > "$bin_dir/pnpm" <<'PNPM'
-          #!/usr/bin/env bash
-          exec npx -y "pnpm@${TEMPLATE_PNPM_VERSION}" "$@"
-          PNPM
-          chmod +x "$bin_dir/pnpm"
-          export PATH="$bin_dir:$PATH"
-
-          echo "Using template pnpm $(pnpm --version)"
-
-          cli="$GITHUB_WORKSPACE/packages/shadcn/dist/index.js"
-          template_root="$RUNNER_TEMP/generated-template-${TEMPLATE_PACKAGE_MANAGER}-${TEMPLATE}"
-          rm -rf "$template_root"
-          mkdir -p "$template_root"
-
-          modes=(app monorepo)
-
-          has_script() {
-            node -e "const pkg = require('./package.json'); process.exit(pkg.scripts && pkg.scripts[process.argv[1]] ? 0 : 1)" "$1"
-          }
-
-          run_script_if_present() {
-            local script="$1"
-            if has_script "$script"; then
-              pnpm run "$script"
-            else
-              echo "No $script script found; skipping."
-            fi
-          }
-
-          validate_non_pnpm_project() {
-            local package_manager="$1"
-            local project_path="$2"
-            local check_workspace_protocol="$3"
-            local is_monorepo="$4"
-
-            cd "$project_path"
-            test ! -f pnpm-workspace.yaml
-            test ! -f pnpm-lock.yaml
-
-            EXPECTED_PACKAGE_MANAGER="$package_manager" \
-              CHECK_WORKSPACE_PROTOCOL="$check_workspace_protocol" \
-              IS_MONOREPO="$is_monorepo" \
-              node <<'NODE'
-          const fs = require("node:fs")
-          const path = require("node:path")
-
-          const expectedPackageManager = process.env.EXPECTED_PACKAGE_MANAGER
-          const checkWorkspaceProtocol =
-            process.env.CHECK_WORKSPACE_PROTOCOL === "true"
-          const isMonorepo = process.env.IS_MONOREPO === "true"
-          const pkg = JSON.parse(fs.readFileSync("package.json", "utf8"))
-
-          if (isMonorepo) {
-            const workspaces = pkg.workspaces ?? []
-
-            if (!Array.isArray(workspaces)) {
-              throw new Error("Expected package.json workspaces to be an array.")
-            }
-
-            if (workspaces.length === 0) {
-              throw new Error("Expected package.json workspaces to have entries.")
-            }
-
-            for (const workspace of ["sharp", "unrs-resolver", "esbuild"]) {
-              if (workspaces.includes(workspace)) {
-                throw new Error(`Unexpected workspace entry: ${workspace}`)
-              }
-            }
-
-            if (!pkg.packageManager?.startsWith(`${expectedPackageManager}@`)) {
-              throw new Error(
-                `Expected packageManager to use ${expectedPackageManager}, got ${pkg.packageManager}`
-              )
-            }
-          } else {
-            if (pkg.workspaces !== undefined) {
-              throw new Error("Did not expect package.json workspaces for app template.")
-            }
-
-            if (pkg.packageManager !== undefined) {
-              throw new Error(
-                `Did not expect packageManager for app template, got ${pkg.packageManager}`
-              )
-            }
-          }
-
-          if (checkWorkspaceProtocol) {
-            const packageJsonFiles = []
-            function collectPackageJsonFiles(dir) {
-              for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
-                if (entry.name === "node_modules") {
-                  continue
-                }
-
-                const fullPath = path.join(dir, entry.name)
-                if (entry.isDirectory()) {
-                  collectPackageJsonFiles(fullPath)
-                } else if (entry.name === "package.json") {
-                  packageJsonFiles.push(fullPath)
-                }
-              }
-            }
-
-            collectPackageJsonFiles(process.cwd())
-
-            for (const file of packageJsonFiles) {
-              const json = fs.readFileSync(file, "utf8")
-              if (json.includes("workspace:")) {
-                throw new Error(`Unexpected workspace: protocol in ${file}`)
-              }
-            }
-          }
-          NODE
-          }
-
-          for mode in "${modes[@]}"; do
-            project="test-${TEMPLATE}-${mode}-${TEMPLATE_PACKAGE_MANAGER}"
-            project_path="$template_root/$project"
-
-            echo "::group::${TEMPLATE} ${mode} ${TEMPLATE_PACKAGE_MANAGER}"
-            args=(
-              init
-              --defaults
-              --name "$project"
-              --template "$TEMPLATE"
-              --cwd "$template_root"
-              --silent
-            )
-
-            if [ "$mode" = "monorepo" ]; then
-              args+=(--monorepo)
-              is_monorepo="true"
-            else
-              args+=(--no-monorepo)
-              is_monorepo="false"
-            fi
-
-            case "$TEMPLATE_PACKAGE_MANAGER" in
-              pnpm)
-                SHADCN_TEMPLATE_DIR="$SHADCN_TEMPLATE_DIR" \
-                  REGISTRY_URL="$REGISTRY_URL" \
-                  npm_config_user_agent="pnpm/${TEMPLATE_PNPM_VERSION}" \
-                  node "$cli" "${args[@]}"
-
-                cd "$project_path"
-                pnpm install --frozen-lockfile
-                run_script_if_present typecheck
-                run_script_if_present build
-                ;;
-              bun)
-                (
-                  cd "$template_root"
-                  SHADCN_TEMPLATE_DIR="$SHADCN_TEMPLATE_DIR" \
-                    REGISTRY_URL="$REGISTRY_URL" \
-                    npm_config_user_agent="bun/$(bun --version)" \
-                    bunx --bun --package "$GITHUB_WORKSPACE/packages/shadcn" \
-                      shadcn "${args[@]}"
-                )
-                validate_non_pnpm_project \
-                  "bun" \
-                  "$project_path" \
-                  "false" \
-                  "$is_monorepo"
-                ;;
-              npm)
-                (
-                  cd "$template_root"
-                  SHADCN_TEMPLATE_DIR="$SHADCN_TEMPLATE_DIR" \
-                    REGISTRY_URL="$REGISTRY_URL" \
-                    npm_config_user_agent="npm/$(npm --version)" \
-                    npx --yes --package "$GITHUB_WORKSPACE/packages/shadcn" \
-                      shadcn "${args[@]}"
-                )
-                validate_non_pnpm_project \
-                  "npm" \
-                  "$project_path" \
-                  "true" \
-                  "$is_monorepo"
-                ;;
-              yarn)
-                (
-                  cd "$template_root"
-                  SHADCN_TEMPLATE_DIR="$SHADCN_TEMPLATE_DIR" \
-                    REGISTRY_URL="$REGISTRY_URL" \
-                    COREPACK_ENABLE_PROJECT_SPEC=0 \
-                    npm_config_user_agent="yarn/$(COREPACK_ENABLE_PROJECT_SPEC=0 yarn --version)" \
-                    yarn dlx --package "$GITHUB_WORKSPACE/packages/shadcn" \
-                      shadcn "${args[@]}"
-                )
-                validate_non_pnpm_project \
-                  "yarn" \
-                  "$project_path" \
-                  "false" \
-                  "$is_monorepo"
-                ;;
-            esac
-
-            echo "::endgroup::"
-          done
-          BASH
-
-          "$root_pnpm" exec start-server-and-test \
-            "$root_pnpm v4:dev" \
-            http://localhost:4000 \
-            "bash $validation_script"

.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,13 +16,13 @@ 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
         id: pnpm-install
         with:
-          version: 10.33.4
+          version: 9.0.6
           run_install: false
 
       - name: Get pnpm store directory
@@ -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,84 +0,0 @@
-name: Validate Registries
-
-on:
-  pull_request:
-    paths:
-      - "apps/v4/registry/directory.json"
-  push:
-    branches:
-      - main
-    paths:
-      - "apps/v4/registry/directory.json"
-
-jobs:
-  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 file = "apps/v4/registry/directory.json"
-          const reservedNamespaces = new Set(
-            process.env.RESERVED_NAMESPACES.split(",").filter(Boolean)
-          )
-
-          function readNames() {
-            return JSON.parse(fs.readFileSync(file, "utf8")).map(
-              (entry) => entry.name
-            )
-          }
-
-          const violations = readNames()
-            .filter((name) => reservedNamespaces.has(name))
-            .map((name) => `${file}: ${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: 10.33.4
-          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,9 +39,3 @@ tsconfig.tsbuildinfo
 .idea
 .fleet
 .vscode
-
-.notes
-.playwright-mcp
-.playwright-cli
-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,12 +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.
-
-See [`apps/v4/registry/README.md`](apps/v4/registry/README.md) for how the
-registry pipeline is structured and for the faster targeted build modes
-(`--style`, `--registry`, `--examples`, `--indexes`) you can use while
-iterating locally. Always run the full `pnpm registry:build` before committing.
+3. You run `pnpm build:registry` to update the registry.
 
 ## Commit Convention
 
@@ -183,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)/cards/account-access.tsx

@@ -1,94 +0,0 @@
-import {
-  AlertCircleIcon,
-  ArrowRight01Icon,
-  SquareLock02Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import { Button } from "@/styles/base-rhea/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-import { Field, FieldGroup, FieldLabel } from "@/styles/base-rhea/ui/field"
-import { Input } from "@/styles/base-rhea/ui/input"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-  ItemTitle,
-} from "@/styles/base-rhea/ui/item"
-
-export function AccountAccess() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Account Access</CardTitle>
-        <CardDescription>
-          Update your credentials or re-authenticate.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="email-address">Email Address</FieldLabel>
-            <Input
-              id="email-address"
-              type="email"
-              placeholder="artist@studio.inc"
-            />
-          </Field>
-          <Field>
-            <div className="flex items-center justify-between">
-              <FieldLabel htmlFor="current-password">
-                Current Password
-              </FieldLabel>
-              <a
-                href="#"
-                className="text-xs font-medium tracking-wider text-muted-foreground uppercase hover:text-foreground"
-              >
-                Forgot?
-              </a>
-            </div>
-            <Input
-              id="current-password"
-              type="password"
-              placeholder="••••••••••••••••••••••••"
-            />
-          </Field>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter className="flex-col gap-4">
-        <Button className="w-full">
-          <HugeiconsIcon icon={SquareLock02Icon} strokeWidth={2} />
-          Update Security
-        </Button>
-        <Item variant="muted" render={<a href="#" />}>
-          <ItemMedia variant="icon">
-            <HugeiconsIcon
-              icon={AlertCircleIcon}
-              className="text-destructive"
-              strokeWidth={2}
-            />
-          </ItemMedia>
-          <ItemContent>
-            <ItemTitle>Danger Zone</ItemTitle>
-            <ItemDescription className="line-clamp-1">
-              Archive account and remove catalog
-            </ItemDescription>
-          </ItemContent>
-          <HugeiconsIcon
-            icon={ArrowRight01Icon}
-            className="size-4"
-            strokeWidth={2}
-          />
-        </Item>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/analytics-card.tsx

@@ -1,46 +0,0 @@
-import { Badge } from "@/styles/base-rhea/ui/badge"
-import { Button } from "@/styles/base-rhea/ui/button"
-import {
-  Card,
-  CardAction,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-
-const areaPath = "M0 52L18 40L36 46L54 70L72 50L100 49V86H0Z"
-const strokePath = "M0 52L18 40L36 46L54 70L72 50L100 49"
-
-export function AnalyticsCard() {
-  return (
-    <Card className="mx-auto w-full max-w-sm data-[size=sm]:pb-0" size="sm">
-      <CardHeader>
-        <CardTitle>Analytics</CardTitle>
-        <CardDescription>
-          418.2K Visitors <Badge>+10%</Badge>
-        </CardDescription>
-        <CardAction>
-          <Button variant="outline" size="sm">
-            View Analytics
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <svg
-        viewBox="0 0 100 86"
-        preserveAspectRatio="none"
-        className="aspect-[1/0.35] w-full text-chart-1"
-        role="img"
-        aria-label="Visitor trend"
-      >
-        <path d={areaPath} fill="currentColor" opacity="0.28" />
-        <path
-          d={strokePath}
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          vectorEffect="non-scaling-stroke"
-        />
-      </svg>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/claimable-balance.tsx

@@ -1,75 +0,0 @@
-import { Badge } from "@/styles/base-rhea/ui/badge"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-import { Item, ItemContent } from "@/styles/base-rhea/ui/item"
-import { Separator } from "@/styles/base-rhea/ui/separator"
-
-const netRoyalties = 1248.75
-const processingFee = 37.46
-const totalClaimable = netRoyalties - processingFee
-
-const formatCurrency = (amount: number) =>
-  amount.toLocaleString("en-US", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  })
-
-export function ClaimableBalance() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardDescription>Claimable Balance</CardDescription>
-        <CardTitle className="text-4xl tabular-nums">
-          ${formatCurrency(totalClaimable)}
-        </CardTitle>
-        <Badge variant="outline">
-          <span className="size-2 rounded-full bg-yellow-500" />
-          Pending Setup
-        </Badge>
-      </CardHeader>
-      <CardContent className="flex flex-1 flex-col justify-end">
-        <Item variant="muted" className="flex-col items-stretch">
-          <ItemContent className="gap-3">
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">
-                Net Royalties
-              </span>
-              <span className="text-sm font-medium tabular-nums">
-                ${formatCurrency(netRoyalties)}
-              </span>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">
-                Processing Fee
-              </span>
-              <span className="text-sm font-medium tabular-nums">
-                -${formatCurrency(processingFee)}
-              </span>
-            </div>
-            <Separator />
-            <div className="flex items-center justify-between">
-              <span className="text-sm text-muted-foreground">
-                Total Ready to Claim
-              </span>
-              <span className="text-sm font-semibold tabular-nums">
-                ${formatCurrency(totalClaimable)} USD
-              </span>
-            </div>
-          </ItemContent>
-        </Item>
-      </CardContent>
-      <CardFooter>
-        <CardDescription>
-          Once your bank is connected, balances over $10.00 are automatically
-          eligible for monthly distribution on the 15th of each month.
-        </CardDescription>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/contribution-history.tsx

@@ -1,88 +0,0 @@
-import { Badge } from "@/styles/base-rhea/ui/badge"
-import { Button } from "@/styles/base-rhea/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-import { Item, ItemContent, ItemDescription } from "@/styles/base-rhea/ui/item"
-
-const chartData = [
-  { month: "Dec", amount: 800 },
-  { month: "Jan", amount: 1100 },
-  { month: "Feb", amount: 900 },
-  { month: "Mar", amount: 1300 },
-  { month: "Apr", amount: 750 },
-  { month: "May", amount: 1400 },
-]
-
-export function ContributionHistory() {
-  const maxAmount = Math.max(...chartData.map((item) => item.amount))
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Contribution History</CardTitle>
-        <CardDescription>Last 6 months of activity</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div
-          className="flex h-[200px] w-full items-end gap-3"
-          role="img"
-          aria-label="Last 6 months of contribution activity"
-        >
-          {chartData.map((item) => (
-            <div
-              key={item.month}
-              className="flex h-full flex-1 flex-col justify-end gap-2"
-            >
-              <div
-                className="min-h-2 rounded-t-md bg-chart-2"
-                style={{ height: `${(item.amount / maxAmount) * 100}%` }}
-              />
-              <span className="text-center text-xs text-muted-foreground">
-                {item.month}
-              </span>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-      <CardContent>
-        <div className="grid w-full grid-cols-1 gap-3 xl:grid-cols-2">
-          <Item variant="muted" className="flex-col items-stretch">
-            <ItemContent className="gap-1">
-              <ItemDescription className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
-                Upcoming
-              </ItemDescription>
-              <span className="cn-font-heading text-base font-semibold">
-                May 2024
-              </span>
-              <span className="text-sm text-muted-foreground">Scheduled</span>
-            </ItemContent>
-          </Item>
-          <Item
-            variant="muted"
-            className="hidden flex-col items-stretch xl:flex"
-          >
-            <ItemContent className="gap-1">
-              <ItemDescription className="text-xs font-medium tracking-wider text-muted-foreground uppercase">
-                Savings Plan
-              </ItemDescription>
-              <span className="cn-font-heading text-base font-semibold">
-                Accelerated
-              </span>
-              <span className="text-sm text-muted-foreground">Recurring</span>
-            </ItemContent>
-          </Item>
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">View Full Report</Button>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/dividend-income.tsx

@@ -1,116 +0,0 @@
-import { Cancel01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import { Button } from "@/styles/base-rhea/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemTitle,
-} from "@/styles/base-rhea/ui/item"
-
-const HOLDINGS = [
-  {
-    name: "Vanguard",
-    shares: "450 Shares",
-    amount: "$1,842.10",
-    data: [
-      { q: "Q1", value: 380 },
-      { q: "Q2", value: 420 },
-      { q: "Q3", value: 390 },
-      { q: "Q4", value: 652 },
-    ],
-  },
-  {
-    name: "S&P 500 VOO",
-    shares: "112 Shares",
-    amount: "$928.40",
-    data: [
-      { q: "Q1", value: 180 },
-      { q: "Q2", value: 210 },
-      { q: "Q3", value: 320 },
-      { q: "Q4", value: 218 },
-    ],
-  },
-  {
-    name: "Apple AAPL",
-    shares: "85 Shares",
-    amount: "$340.00",
-    data: [
-      { q: "Q1", value: 60 },
-      { q: "Q2", value: 70 },
-      { q: "Q3", value: 120 },
-      { q: "Q4", value: 90 },
-    ],
-  },
-  {
-    name: "Realty Income",
-    shares: "320 Shares",
-    amount: "$1,139.50",
-    data: [
-      { q: "Q1", value: 240 },
-      { q: "Q2", value: 260 },
-      { q: "Q3", value: 280 },
-      { q: "Q4", value: 360 },
-    ],
-  },
-]
-
-export function DividendIncome() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Q2 Dividend Income</CardTitle>
-        <CardDescription>
-          Quarterly dividend payouts across your portfolio holdings.
-        </CardDescription>
-        <CardAction>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="bg-muted"
-            aria-label="Dismiss dividend income"
-          >
-            <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} />
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <ItemGroup>
-          {HOLDINGS.map((holding) => (
-            <Item key={holding.name} role="listitem" variant="muted">
-              <ItemContent>
-                <ItemTitle>{holding.name}</ItemTitle>
-                <ItemDescription>{holding.shares}</ItemDescription>
-              </ItemContent>
-              <div
-                className="hidden h-8 w-24 items-end gap-1 md:flex"
-                role="img"
-                aria-label={`${holding.name} quarterly dividends`}
-              >
-                {holding.data.map((item) => (
-                  <div
-                    key={item.q}
-                    className="min-h-1 flex-1 rounded-t-sm bg-chart-2"
-                    style={{
-                      height: `${(item.value / Math.max(...holding.data.map((point) => point.value))) * 100}%`,
-                    }}
-                  />
-                ))}
-              </div>
-            </Item>
-          ))}
-        </ItemGroup>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/empty-distribute-track.tsx

@@ -1,37 +0,0 @@
-import { Add01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import { Button } from "@/styles/base-rhea/ui/button"
-import { Card, CardContent } from "@/styles/base-rhea/ui/card"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/styles/base-rhea/ui/empty"
-
-export function EmptyDistributeTrack() {
-  return (
-    <Card>
-      <CardContent>
-        <Empty className="p-4">
-          <EmptyMedia variant="icon">
-            <HugeiconsIcon icon={Add01Icon} strokeWidth={2} />
-          </EmptyMedia>
-          <EmptyHeader>
-            <EmptyTitle>Distribute Track</EmptyTitle>
-            <EmptyDescription>
-              Upload your first master to start reaching listeners on Spotify,
-              Apple Music, and more.
-            </EmptyDescription>
-          </EmptyHeader>
-          <EmptyContent>
-            <Button>Create Release</Button>
-          </EmptyContent>
-        </Empty>
-      </CardContent>
-    </Card>
-  )
-}

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

@@ -1,117 +0,0 @@
-import { AccountAccess } from "./account-access"
-import { AnalyticsCard } from "./analytics-card"
-import { ClaimableBalance } from "./claimable-balance"
-import { ContributionHistory } from "./contribution-history"
-import { DividendIncome } from "./dividend-income"
-import { EmptyDistributeTrack } from "./empty-distribute-track"
-import { NewMilestone } from "./new-milestone"
-import { NotificationSettings } from "./notification-settings"
-import { Payments } from "./payments"
-import { PayoutThreshold } from "./payout-threshold"
-import { PowerUsage } from "./power-usage"
-import { QrConnect } from "./qr-connect"
-import { SavingsTargets } from "./savings-targets"
-import { SidebarNav } from "./sidebar-nav"
-import { AccountAccess as SkeletonAccountAccess } from "./skeleton/account-access"
-import { AnalyticsCard as SkeletonAnalyticsCard } from "./skeleton/analytics-card"
-import { ClaimableBalance as SkeletonClaimableBalance } from "./skeleton/claimable-balance"
-import { ContributionHistory as SkeletonContributionHistory } from "./skeleton/contribution-history"
-import { DividendIncome as SkeletonDividendIncome } from "./skeleton/dividend-income"
-import { EmptyDistributeTrack as SkeletonEmptyDistributeTrack } from "./skeleton/empty-distribute-track"
-import { NewMilestone as SkeletonNewMilestone } from "./skeleton/new-milestone"
-import { NotificationSettings as SkeletonNotificationSettings } from "./skeleton/notification-settings"
-import { Payments as SkeletonPayments } from "./skeleton/payments"
-import { PayoutThreshold as SkeletonPayoutThreshold } from "./skeleton/payout-threshold"
-import { PowerUsage as SkeletonPowerUsage } from "./skeleton/power-usage"
-import { QrConnect as SkeletonQrConnect } from "./skeleton/qr-connect"
-import { SavingsTargets as SkeletonSavingsTargets } from "./skeleton/savings-targets"
-import { TransferFunds as SkeletonTransferFunds } from "./skeleton/transfer-funds"
-import { UIElements as SkeletonUIElements } from "./skeleton/ui-elements"
-import { TransferFunds } from "./transfer-funds"
-import { UIElements } from "./ui-elements"
-
-function CardsSkeletonRails() {
-  return (
-    <div
-      aria-hidden="true"
-      className="pointer-events-none absolute inset-x-0 top-12 z-10 hidden min-[2200px]:block [&_[data-slot=skeleton]:nth-child(even)]:hidden"
-    >
-      <div className="absolute top-0 left-[calc(50%-950px-var(--rail-width)-var(--gap))] grid w-(--rail-width) grid-cols-[repeat(2,var(--rail-column))] gap-(--gap) opacity-50 [--rail-column:20rem] [--rail-width:calc(var(--rail-column)*2+var(--gap))]">
-        <div className="flex flex-col gap-(--gap)">
-          <SkeletonContributionHistory />
-          <SkeletonClaimableBalance />
-          <SkeletonDividendIncome />
-          <SkeletonPayoutThreshold />
-        </div>
-        <div className="flex flex-col gap-(--gap)">
-          <SkeletonUIElements />
-          <SkeletonSavingsTargets />
-          <SkeletonNewMilestone />
-          <SkeletonPayoutThreshold />
-          <SkeletonAccountAccess />
-        </div>
-      </div>
-      <div className="absolute top-0 right-[calc(50%-950px-var(--rail-width)-var(--gap))] grid w-(--rail-width) grid-cols-[repeat(2,var(--rail-column))] gap-(--gap) opacity-50 [--rail-column:20rem] [--rail-width:calc(var(--rail-column)*2+var(--gap))]">
-        <div className="flex flex-col gap-(--gap)">
-          <SkeletonNewMilestone />
-          <SkeletonPayoutThreshold />
-          <SkeletonAccountAccess />
-          <SkeletonQrConnect />
-          <SkeletonTransferFunds />
-          <SkeletonPayments />
-          <SkeletonEmptyDistributeTrack />
-        </div>
-        <div className="flex flex-col gap-(--gap)">
-          <SkeletonQrConnect />
-          <SkeletonTransferFunds />
-          <SkeletonPayments />
-          <SkeletonEmptyDistributeTrack />
-          <SkeletonAnalyticsCard />
-          <SkeletonNotificationSettings />
-          <SkeletonPowerUsage />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export function CardsDemo() {
-  return (
-    <div
-      data-slot="demo"
-      className="theme-neutral relative flex w-full max-w-none flex-col gap-(--gap) overflow-hidden bg-muted p-12 pb-0! [--gap:--spacing(8)] 3xl:[--gap:--spacing(8)] min-[1900px]:p-12 min-[1900px]:[--gap:--spacing(10)]! lg:p-6 lg:[--gap:--spacing(6)] dark:bg-background"
-    >
-      <CardsSkeletonRails />
-      <div className="relative z-10 mx-auto grid gap-(--gap) **:data-[slot=card]:w-full min-[1400px]:grid-cols-4! min-[1900px]:grid-cols-5! md:max-w-3xl md:grid-cols-2 lg:max-w-none lg:grid-cols-3 xl:max-w-[1600px] 2xl:max-w-[1900px]">
-        <div className="flex flex-col items-start gap-(--gap)">
-          <UIElements />
-          <SidebarNav />
-          <SavingsTargets />
-        </div>
-        <div className="hidden flex-col gap-(--gap) lg:flex">
-          <ContributionHistory />
-          <ClaimableBalance />
-          <DividendIncome />
-        </div>
-        <div className="hidden flex-col gap-(--gap) 3xl:flex!">
-          <NewMilestone />
-          <PayoutThreshold />
-          <AccountAccess />
-        </div>
-        <div className="hidden flex-col gap-(--gap) md:flex">
-          <QrConnect />
-          <TransferFunds />
-          <Payments />
-        </div>
-        <div className="hidden flex-col gap-(--gap) min-[1400px]:flex">
-          <EmptyDistributeTrack />
-          <AnalyticsCard />
-          <NotificationSettings />
-          <PowerUsage />
-        </div>
-      </div>
-      <div className="absolute inset-x-0 top-0 z-1 h-120 bg-linear-to-b from-background via-muted to-transparent dark:hidden" />
-      <div className="absolute inset-x-0 bottom-0 z-20 h-48 bg-linear-to-t from-background via-muted/80 to-transparent lg:h-80 xl:h-64 dark:via-background/80" />
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/cards/new-milestone.tsx

@@ -1,52 +0,0 @@
-import { Button } from "@/styles/base-rhea/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-import { Field, FieldGroup, FieldLabel } from "@/styles/base-rhea/ui/field"
-import { Input } from "@/styles/base-rhea/ui/input"
-
-export function NewMilestone() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Set a new milestone</CardTitle>
-        <CardDescription>
-          Define your financial target and we&apos;ll help you pace your
-          savings.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="goal-name">Goal Name</FieldLabel>
-            <Input
-              id="goal-name"
-              placeholder="e.g. New Car, Home Downpayment"
-            />
-          </Field>
-          <div className="grid grid-cols-2 gap-3">
-            <Field>
-              <FieldLabel htmlFor="target-amount">Target Amount</FieldLabel>
-              <Input id="target-amount" defaultValue="$15,000" />
-            </Field>
-            <Field>
-              <FieldLabel htmlFor="target-date">Target Date</FieldLabel>
-              <Input id="target-date" defaultValue="Dec 2025" />
-            </Field>
-          </div>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <Button className="w-full">Create Goal</Button>
-        <Button variant="outline" className="w-full">
-          Cancel
-        </Button>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/notification-settings.tsx

@@ -1,76 +0,0 @@
-import { Button } from "@/styles/base-rhea/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-import { Checkbox } from "@/styles/base-rhea/ui/checkbox"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-} from "@/styles/base-rhea/ui/field"
-
-const NOTIFICATIONS = [
-  {
-    id: "transactions",
-    label: "Transaction alerts",
-    description: "Deposits, withdrawals, and transfers.",
-    defaultChecked: true,
-  },
-  {
-    id: "security",
-    label: "Security alerts",
-    description: "Login attempts and account changes.",
-    defaultChecked: true,
-  },
-  {
-    id: "goals",
-    label: "Goal milestones",
-    description: "Updates at 25%, 50%, 75%, and 100%.",
-    defaultChecked: false,
-  },
-  {
-    id: "market",
-    label: "Market updates",
-    description: "Daily portfolio summary and price alerts.",
-    defaultChecked: false,
-  },
-]
-
-export function NotificationSettings() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Notifications</CardTitle>
-        <CardDescription>
-          Choose which email and push alerts you want to receive.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          {NOTIFICATIONS.map((n) => (
-            <Field key={n.id} orientation="horizontal">
-              <Checkbox
-                id={`notify-${n.id}`}
-                defaultChecked={n.defaultChecked}
-              />
-              <FieldContent>
-                <FieldLabel htmlFor={`notify-${n.id}`}>{n.label}</FieldLabel>
-                <FieldDescription>{n.description}</FieldDescription>
-              </FieldContent>
-            </Field>
-          ))}
-        </FieldGroup>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Save Preferences</Button>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/payments.tsx

@@ -1,139 +0,0 @@
-import {
-  ArrowRight01Icon,
-  Calendar03Icon,
-  MoreHorizontalCircle01Icon,
-  RefreshIcon,
-  Settings01Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/styles/base-rhea/ui/breadcrumb"
-import { Button } from "@/styles/base-rhea/ui/button"
-import { Card, CardContent, CardHeader } from "@/styles/base-rhea/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/styles/base-rhea/ui/dropdown-menu"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemMedia,
-  ItemTitle,
-} from "@/styles/base-rhea/ui/item"
-
-export function Payments() {
-  return (
-    <Card>
-      <CardHeader className="flex flex-col gap-3">
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href="#">Home</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <DropdownMenu>
-                <DropdownMenuTrigger
-                  render={
-                    <Button
-                      size="icon-sm"
-                      variant="ghost"
-                      aria-label="Account options"
-                    />
-                  }
-                >
-                  <HugeiconsIcon
-                    icon={MoreHorizontalCircle01Icon}
-                    strokeWidth={2}
-                  />
-                  <span className="sr-only">Account options</span>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start">
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem>Profile</DropdownMenuItem>
-                    <DropdownMenuItem>Statements</DropdownMenuItem>
-                    <DropdownMenuItem>Documents</DropdownMenuItem>
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>Payments</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      </CardHeader>
-      <CardContent>
-        <ItemGroup>
-          <div role="listitem" className="w-full">
-            <Item variant="muted" render={<a href="#" />}>
-              <ItemMedia variant="icon">
-                <HugeiconsIcon icon={Settings01Icon} strokeWidth={2} />
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>Change transfer limit</ItemTitle>
-                <ItemDescription>
-                  Adjust how much you can send from your balance.
-                </ItemDescription>
-              </ItemContent>
-              <HugeiconsIcon
-                icon={ArrowRight01Icon}
-                className="size-4 shrink-0 text-muted-foreground"
-                strokeWidth={2}
-              />
-            </Item>
-          </div>
-          <div role="listitem" className="w-full">
-            <Item variant="muted" render={<a href="#" />}>
-              <ItemMedia variant="icon">
-                <HugeiconsIcon icon={Calendar03Icon} strokeWidth={2} />
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>Scheduled transfers</ItemTitle>
-                <ItemDescription>
-                  Set up a transfer to send at a later date.
-                </ItemDescription>
-              </ItemContent>
-              <HugeiconsIcon
-                icon={ArrowRight01Icon}
-                className="size-4 shrink-0 text-muted-foreground"
-                strokeWidth={2}
-              />
-            </Item>
-          </div>
-          <div role="listitem" className="w-full">
-            <Item variant="muted" render={<a href="#" />}>
-              <ItemMedia variant="icon">
-                <HugeiconsIcon icon={RefreshIcon} strokeWidth={2} />
-              </ItemMedia>
-              <ItemContent>
-                <ItemTitle>Recurring card payments</ItemTitle>
-                <ItemDescription>
-                  Manage your repeated card transactions.
-                </ItemDescription>
-              </ItemContent>
-              <HugeiconsIcon
-                icon={ArrowRight01Icon}
-                className="size-4 shrink-0 text-muted-foreground"
-                strokeWidth={2}
-              />
-            </Item>
-          </div>
-        </ItemGroup>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/payout-threshold.tsx

@@ -1,112 +0,0 @@
-import { Cancel01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import { Button } from "@/styles/base-rhea/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-} from "@/styles/base-rhea/ui/field"
-import { Progress } from "@/styles/base-rhea/ui/progress"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/styles/base-rhea/ui/select"
-import { Textarea } from "@/styles/base-rhea/ui/textarea"
-
-const CURRENCIES = [
-  { label: "USD — United States Dollar", value: "usd" },
-  { label: "EUR — Euro", value: "eur" },
-  { label: "GBP — British Pound", value: "gbp" },
-  { label: "JPY — Japanese Yen", value: "jpy" },
-]
-
-export function PayoutThreshold() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Payout Threshold</CardTitle>
-        <CardDescription>
-          Set the minimum balance required before a payout is triggered.
-        </CardDescription>
-        <CardAction>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="bg-muted"
-            aria-label="Dismiss payout threshold"
-          >
-            <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} />
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="preferred-currency">
-              Preferred Currency
-            </FieldLabel>
-            <Select items={CURRENCIES} defaultValue="usd">
-              <SelectTrigger id="preferred-currency" className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {CURRENCIES.map((item) => (
-                    <SelectItem key={item.value} value={item.value}>
-                      {item.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </Field>
-          <Field>
-            <div className="flex items-baseline justify-between">
-              <FieldLabel id="min-payout-label">
-                Minimum Payout Amount
-              </FieldLabel>
-              <span className="text-2xl font-semibold tabular-nums">
-                $2500.00
-              </span>
-            </div>
-            <Progress
-              value={25}
-              aria-labelledby="min-payout-label"
-              aria-valuetext="$2,500 of $10,000"
-            />
-            <div className="flex items-center justify-between">
-              <FieldDescription>$50 (MIN)</FieldDescription>
-              <FieldDescription>$10,000 (MAX)</FieldDescription>
-            </div>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="payout-notes">Notes</FieldLabel>
-            <Textarea
-              id="payout-notes"
-              placeholder="Add any notes for this payout configuration..."
-              className="min-h-[100px]"
-            />
-          </Field>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Save Threshold</Button>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/power-usage.tsx

@@ -1,67 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-import { Separator } from "@/styles/base-rhea/ui/separator"
-
-const chartData = [
-  { hour: "6a", usage: 1.2 },
-  { hour: "8a", usage: 2.8 },
-  { hour: "10a", usage: 3.1 },
-  { hour: "12p", usage: 2.4 },
-  { hour: "2p", usage: 3.4 },
-  { hour: "4p", usage: 2.9 },
-  { hour: "6p", usage: 3.8 },
-  { hour: "8p", usage: 3.2 },
-]
-
-export function PowerUsage() {
-  const maxUsage = Math.max(...chartData.map((item) => item.usage))
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Power Usage</CardTitle>
-        <CardDescription>Whole Home</CardDescription>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <div
-          className="flex h-[140px] w-full items-end gap-2"
-          role="img"
-          aria-label="Power usage by hour"
-        >
-          {chartData.map((item) => (
-            <div
-              key={item.hour}
-              className="flex h-full flex-1 flex-col justify-end gap-1.5"
-            >
-              <div
-                className="min-h-2 rounded-t bg-chart-2"
-                style={{ height: `${(item.usage / maxUsage) * 100}%` }}
-              />
-              <span className="text-center text-xs text-muted-foreground">
-                {item.hour}
-              </span>
-            </div>
-          ))}
-        </div>
-        <Separator />
-        <div className="grid grid-cols-2 gap-4">
-          <div className="flex flex-col gap-0.5">
-            <span className="text-sm text-muted-foreground">
-              Currently Using
-            </span>
-            <span className="text-lg font-semibold tabular-nums">3.4 kW</span>
-          </div>
-          <div className="flex flex-col gap-0.5">
-            <span className="text-sm text-muted-foreground">Solar Gen</span>
-            <span className="text-lg font-semibold tabular-nums">+1.2 kW</span>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/qr-connect.tsx

@@ -1,64 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-
-const qrCells = [
-  "111111100101101111111",
-  "100000101001001000001",
-  "101110101111101011101",
-  "101110100100001011101",
-  "101110101010101011101",
-  "100000100111001000001",
-  "111111101010101111111",
-  "000000001101000000000",
-  "101011111001111010110",
-  "010100001110010101001",
-  "111010111011101111010",
-  "001101000101000010101",
-  "110111101111010111011",
-  "000000001001010001010",
-  "111111101101111101001",
-  "100000100010001001111",
-  "101110101011101110100",
-  "101110100110100010011",
-  "101110101000111101110",
-  "100000101101000011001",
-  "111111101011101101111",
-]
-
-export function QrConnect() {
-  return (
-    <Card>
-      <CardContent className="flex justify-center pt-6">
-        <div className="rounded-xl border bg-white p-4">
-          <svg
-            viewBox="0 0 21 21"
-            className="size-40 text-black"
-            role="img"
-            aria-label="Connect device QR code"
-            shapeRendering="crispEdges"
-          >
-            <rect width="21" height="21" fill="white" />
-            {qrCells.map((row, y) =>
-              [...row].map((cell, x) =>
-                cell === "1" ? (
-                  <rect key={`${x}-${y}`} x={x} y={y} width="1" height="1" />
-                ) : null
-              )
-            )}
-          </svg>
-        </div>
-      </CardContent>
-      <CardHeader className="text-center">
-        <CardTitle>Scan to connect your mobile device</CardTitle>
-        <CardDescription className="text-balance">
-          Open the Ledger mobile app and scan this code to link your device.
-        </CardDescription>
-      </CardHeader>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/savings-targets.tsx

@@ -1,81 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemFooter,
-  ItemGroup,
-} from "@/styles/base-rhea/ui/item"
-import { Progress } from "@/styles/base-rhea/ui/progress"
-
-export function SavingsTargets() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Savings Targets</CardTitle>
-        <CardDescription>
-          Active milestones for 2024 across your portfolio. Monitor how close
-          you are to each savings goal.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ItemGroup className="gap-3">
-          <Item
-            role="listitem"
-            variant="muted"
-            className="flex-col items-stretch"
-          >
-            <ItemContent className="gap-3">
-              <ItemDescription className="cn-font-heading text-xs font-medium tracking-wider text-muted-foreground uppercase">
-                Retirement
-              </ItemDescription>
-              <span className="text-3xl font-semibold tabular-nums">
-                $420,000
-              </span>
-              <Progress value={65} aria-label="Retirement savings progress" />
-            </ItemContent>
-            <ItemFooter>
-              <span className="text-sm text-muted-foreground">
-                65% achieved
-              </span>
-              <span className="text-sm font-medium tabular-nums">$273,000</span>
-            </ItemFooter>
-          </Item>
-          <Item
-            role="listitem"
-            variant="muted"
-            className="flex-col items-stretch"
-          >
-            <ItemContent className="gap-3">
-              <ItemDescription className="cn-font-heading text-xs font-medium tracking-wider text-muted-foreground uppercase">
-                Real Estate
-              </ItemDescription>
-              <span className="text-3xl font-semibold tabular-nums">
-                $85,000
-              </span>
-              <Progress value={32} aria-label="Real estate savings progress" />
-            </ItemContent>
-            <ItemFooter>
-              <span className="text-sm text-muted-foreground">
-                32% achieved
-              </span>
-              <span className="text-sm font-medium tabular-nums">$27,200</span>
-            </ItemFooter>
-          </Item>
-        </ItemGroup>
-      </CardContent>
-      <CardFooter>
-        <CardDescription className="text-center">
-          You have not met your targets for this year.
-        </CardDescription>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/sidebar-nav.tsx

@@ -1,218 +0,0 @@
-import * as React from "react"
-import {
-  ActivityIcon,
-  Analytics01Icon,
-  AnalyticsUpIcon,
-  ArrowDataTransferHorizontalIcon,
-  BankIcon,
-  BookOpen02Icon,
-  Calendar03Icon,
-  ChartBarLineIcon,
-  CreditCardIcon,
-  File02Icon,
-  Globe02Icon,
-  HelpCircleIcon,
-  Message01Icon,
-  Notification03Icon,
-  PaintBoardIcon,
-  PieChartIcon,
-  ShieldIcon,
-  Target02Icon,
-  UserIcon,
-  Wallet01Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import { cn } from "@/lib/utils"
-import { Card } from "@/styles/base-rhea/ui/card"
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarProvider,
-} from "@/styles/base-rhea/ui/sidebar"
-
-function SidebarSection({
-  label,
-  children,
-  className,
-}: {
-  label: string
-  children: React.ReactNode
-  className?: string
-}) {
-  return (
-    <Card className={cn("w-full overflow-hidden rounded-3xl py-0", className)}>
-      <SidebarProvider className="min-h-0">
-        <Sidebar collapsible="none" className="w-full bg-transparent">
-          <SidebarContent className="gap-0 overflow-hidden">
-            <SidebarGroup>
-              <SidebarGroupLabel>{label}</SidebarGroupLabel>
-              <SidebarGroupContent>
-                <SidebarMenu className="gap-1">{children}</SidebarMenu>
-              </SidebarGroupContent>
-            </SidebarGroup>
-          </SidebarContent>
-        </Sidebar>
-      </SidebarProvider>
-    </Card>
-  )
-}
-
-export function SidebarNav() {
-  return (
-    <div className="grid w-full grid-cols-2 gap-4 xl:gap-6">
-      <SidebarSection
-        label="Overview"
-        className="xl:col-start-1 xl:row-start-2"
-      >
-        <SidebarMenuItem>
-          <SidebarMenuButton isActive>
-            <HugeiconsIcon icon={Analytics01Icon} strokeWidth={2} />
-            Analytics
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon
-              icon={ArrowDataTransferHorizontalIcon}
-              strokeWidth={2}
-            />
-            Transactions
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={AnalyticsUpIcon} strokeWidth={2} />
-            Investments
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={BankIcon} strokeWidth={2} />
-            Accounts
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={PieChartIcon} strokeWidth={2} />
-            Spending
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarSection>
-
-      <SidebarSection
-        label="Planning"
-        className="xl:col-start-1 xl:row-start-1"
-      >
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={File02Icon} strokeWidth={2} />
-            Documents
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={Wallet01Icon} strokeWidth={2} />
-            Budget
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={ChartBarLineIcon} strokeWidth={2} />
-            Reports
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={Target02Icon} strokeWidth={2} />
-            Goals
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={Calendar03Icon} strokeWidth={2} />
-            Calendar
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarSection>
-
-      <SidebarSection
-        label="Support"
-        className="flex xl:col-start-2 xl:row-start-1"
-      >
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={HelpCircleIcon} strokeWidth={2} />
-            Help Center
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={BookOpen02Icon} strokeWidth={2} />
-            Docs
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={Message01Icon} strokeWidth={2} />
-            Contact Us
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={ActivityIcon} strokeWidth={2} />
-            Status
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={Globe02Icon} strokeWidth={2} />
-            Community
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarSection>
-
-      <SidebarSection
-        label="Account"
-        className="flex xl:col-start-2 xl:row-start-2"
-      >
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={UserIcon} strokeWidth={2} />
-            Profile
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton isActive>
-            <HugeiconsIcon icon={CreditCardIcon} strokeWidth={2} />
-            Billing
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={Notification03Icon} strokeWidth={2} />
-            Notifications
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={ShieldIcon} strokeWidth={2} />
-            Security
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-        <SidebarMenuItem>
-          <SidebarMenuButton>
-            <HugeiconsIcon icon={PaintBoardIcon} strokeWidth={2} />
-            Appearance
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarSection>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/account-access.tsx

@@ -1,35 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-export function AccountAccess() {
-  return (
-    <Card>
-      <CardHeader className="gap-2">
-        <Skeleton className="h-5 w-36 rounded-md" />
-        <Skeleton className="h-4 w-64 rounded-md" />
-      </CardHeader>
-      <CardContent className="flex flex-col gap-6">
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-3 w-24 rounded-md" />
-          <Skeleton className="h-9 w-full rounded-lg" />
-        </div>
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center justify-between">
-            <Skeleton className="h-3 w-32 rounded-md" />
-            <Skeleton className="h-3 w-12 rounded-md" />
-          </div>
-          <Skeleton className="h-9 w-full rounded-lg" />
-        </div>
-      </CardContent>
-      <CardFooter className="flex-col gap-4">
-        <Skeleton className="h-9 w-full rounded-lg" />
-        <Skeleton className="h-14 w-full rounded-xl" />
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/analytics-card.tsx

@@ -1,17 +0,0 @@
-import { Card, CardAction, CardHeader } from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-export function AnalyticsCard() {
-  return (
-    <Card className="mx-auto w-full max-w-sm data-[size=sm]:pb-0" size="sm">
-      <CardHeader className="gap-2">
-        <Skeleton className="h-5 w-24 rounded-md" />
-        <Skeleton className="h-4 w-40 rounded-md" />
-        <CardAction>
-          <Skeleton className="h-7 w-28 rounded-lg" />
-        </CardAction>
-      </CardHeader>
-      <Skeleton className="mx-6 mb-6 aspect-[1/0.35] w-auto rounded-lg" />
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/claimable-balance.tsx

@@ -1,41 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-export function ClaimableBalance() {
-  return (
-    <Card>
-      <CardHeader className="gap-3">
-        <Skeleton className="h-4 w-36 rounded-md" />
-        <Skeleton className="h-12 w-56 rounded-lg" />
-        <Skeleton className="h-6 w-32 rounded-full" />
-      </CardHeader>
-      <CardContent className="flex flex-1 flex-col justify-end">
-        <div className="flex flex-col gap-3 rounded-xl bg-muted p-4">
-          <div className="flex items-center justify-between">
-            <Skeleton className="h-4 w-28 rounded-md bg-muted-foreground/15" />
-            <Skeleton className="h-4 w-20 rounded-md bg-muted-foreground/15" />
-          </div>
-          <div className="flex items-center justify-between">
-            <Skeleton className="h-4 w-32 rounded-md bg-muted-foreground/15" />
-            <Skeleton className="h-4 w-16 rounded-md bg-muted-foreground/15" />
-          </div>
-          <Skeleton className="h-px w-full rounded-none bg-muted-foreground/15" />
-          <div className="flex items-center justify-between">
-            <Skeleton className="h-4 w-36 rounded-md bg-muted-foreground/15" />
-            <Skeleton className="h-4 w-24 rounded-md bg-muted-foreground/15" />
-          </div>
-        </div>
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <Skeleton className="h-3 w-full rounded-md" />
-        <Skeleton className="h-3 w-11/12 rounded-md" />
-        <Skeleton className="h-3 w-3/4 rounded-md" />
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/contribution-history.tsx

@@ -1,53 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-const bars = [60, 80, 65, 95, 50, 100]
-
-export function ContributionHistory() {
-  return (
-    <Card>
-      <CardHeader className="gap-2">
-        <Skeleton className="h-5 w-44 rounded-md" />
-        <Skeleton className="h-4 w-52 rounded-md" />
-      </CardHeader>
-      <CardContent>
-        <div className="flex h-[200px] w-full items-end gap-3">
-          {bars.map((height, i) => (
-            <div
-              key={i}
-              className="flex h-full flex-1 flex-col justify-end gap-2"
-            >
-              <Skeleton
-                className="w-full rounded-t-md rounded-b-none"
-                style={{ height: `${height}%` }}
-              />
-              <Skeleton className="mx-auto h-3 w-6 rounded-md" />
-            </div>
-          ))}
-        </div>
-      </CardContent>
-      <CardContent>
-        <div className="grid w-full grid-cols-1 gap-3 xl:grid-cols-2">
-          <div className="flex flex-col gap-2 rounded-xl bg-muted p-4">
-            <Skeleton className="h-3 w-20 rounded-md bg-muted-foreground/15" />
-            <Skeleton className="h-5 w-28 rounded-md bg-muted-foreground/15" />
-            <Skeleton className="h-3 w-24 rounded-md bg-muted-foreground/15" />
-          </div>
-          <div className="hidden flex-col gap-2 rounded-xl bg-muted p-4 xl:flex">
-            <Skeleton className="h-3 w-24 rounded-md bg-muted-foreground/15" />
-            <Skeleton className="h-5 w-32 rounded-md bg-muted-foreground/15" />
-            <Skeleton className="h-3 w-28 rounded-md bg-muted-foreground/15" />
-          </div>
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Skeleton className="h-9 w-full rounded-lg" />
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/dividend-income.tsx

@@ -1,49 +0,0 @@
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardHeader,
-} from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-const rows = [0, 1, 2, 3]
-const miniBars = [40, 60, 80, 50]
-
-export function DividendIncome() {
-  return (
-    <Card>
-      <CardHeader className="gap-2">
-        <Skeleton className="h-5 w-48 rounded-md" />
-        <Skeleton className="h-4 w-64 rounded-md" />
-        <CardAction>
-          <Skeleton className="size-8 rounded-md" />
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <div className="flex flex-col gap-2">
-          {rows.map((row) => (
-            <div
-              key={row}
-              className="flex items-center gap-3 rounded-xl bg-muted p-3"
-            >
-              <div className="flex flex-1 flex-col gap-2">
-                <Skeleton className="h-4 w-28 rounded-md bg-muted-foreground/15" />
-                <Skeleton className="h-3 w-20 rounded-md bg-muted-foreground/15" />
-              </div>
-              <div className="hidden h-8 w-24 items-end gap-1 md:flex">
-                {miniBars.map((h, i) => (
-                  <Skeleton
-                    key={i}
-                    className="flex-1 rounded-t-sm rounded-b-none bg-muted-foreground/15"
-                    style={{ height: `${h}%` }}
-                  />
-                ))}
-              </div>
-              <Skeleton className="hidden h-4 w-16 rounded-md bg-muted-foreground/15 md:block" />
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/empty-distribute-track.tsx

@@ -1,20 +0,0 @@
-import { Card, CardContent } from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-export function EmptyDistributeTrack() {
-  return (
-    <Card>
-      <CardContent>
-        <div className="flex flex-col items-center gap-4 p-4">
-          <Skeleton className="size-12 rounded-xl" />
-          <div className="flex flex-col items-center gap-2">
-            <Skeleton className="h-5 w-40 rounded-md" />
-            <Skeleton className="h-3 w-64 rounded-md" />
-            <Skeleton className="h-3 w-48 rounded-md" />
-          </div>
-          <Skeleton className="h-9 w-32 rounded-lg" />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/index.tsx

@@ -1,56 +0,0 @@
-import { AccountAccess } from "./account-access"
-import { AnalyticsCard } from "./analytics-card"
-import { ClaimableBalance } from "./claimable-balance"
-import { ContributionHistory } from "./contribution-history"
-import { DividendIncome } from "./dividend-income"
-import { EmptyDistributeTrack } from "./empty-distribute-track"
-import { NewMilestone } from "./new-milestone"
-import { NotificationSettings } from "./notification-settings"
-import { Payments } from "./payments"
-import { PayoutThreshold } from "./payout-threshold"
-import { PowerUsage } from "./power-usage"
-import { QrConnect } from "./qr-connect"
-import { SavingsTargets } from "./savings-targets"
-import { SidebarNav } from "./sidebar-nav"
-import { TransferFunds } from "./transfer-funds"
-import { UIElements } from "./ui-elements"
-
-export function CardsSkeletonDemo() {
-  return (
-    <div
-      data-slot="demo"
-      className="theme-neutral relative flex w-full max-w-none flex-col gap-(--gap) bg-muted p-12 pb-0! [--gap:--spacing(8)] 3xl:[--gap:--spacing(8)] min-[1900px]:[--gap:--spacing(10)]! lg:p-8 lg:[--gap:--spacing(6)] xl:p-12 dark:bg-muted/30"
-    >
-      <div className="relative z-10 mx-auto grid gap-(--gap) **:data-[slot=card]:w-full min-[1900px]:grid-cols-5! md:max-w-3xl md:grid-cols-2 lg:max-w-none lg:grid-cols-3 xl:max-w-[1600px] xl:grid-cols-4 2xl:max-w-[1900px]">
-        <div className="flex flex-col items-start gap-(--gap)">
-          <UIElements />
-          <SidebarNav />
-          <SavingsTargets />
-        </div>
-        <div className="hidden flex-col gap-(--gap) lg:flex">
-          <ContributionHistory />
-          <ClaimableBalance />
-          <DividendIncome />
-        </div>
-        <div className="hidden flex-col gap-(--gap) 3xl:flex!">
-          <NewMilestone />
-          <PayoutThreshold />
-          <AccountAccess />
-        </div>
-        <div className="hidden flex-col gap-(--gap) md:flex">
-          <QrConnect />
-          <TransferFunds />
-          <Payments />
-        </div>
-        <div className="hidden flex-col gap-(--gap) xl:flex">
-          <EmptyDistributeTrack />
-          <AnalyticsCard />
-          <NotificationSettings />
-          <PowerUsage />
-        </div>
-      </div>
-      <div className="absolute inset-x-0 top-0 z-1 h-80 bg-linear-to-b from-background via-muted to-transparent dark:via-muted/30" />
-      <div className="absolute inset-x-0 bottom-0 z-20 h-80 bg-linear-to-t from-background via-muted to-transparent dark:via-muted/30" />
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/new-milestone.tsx

@@ -1,38 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-export function NewMilestone() {
-  return (
-    <Card>
-      <CardHeader className="gap-2">
-        <Skeleton className="h-5 w-44 rounded-md" />
-        <Skeleton className="h-4 w-72 rounded-md" />
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-3 w-20 rounded-md" />
-          <Skeleton className="h-9 w-full rounded-lg" />
-        </div>
-        <div className="grid grid-cols-2 gap-3">
-          <div className="flex flex-col gap-2">
-            <Skeleton className="h-3 w-24 rounded-md" />
-            <Skeleton className="h-9 w-full rounded-lg" />
-          </div>
-          <div className="flex flex-col gap-2">
-            <Skeleton className="h-3 w-20 rounded-md" />
-            <Skeleton className="h-9 w-full rounded-lg" />
-          </div>
-        </div>
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <Skeleton className="h-9 w-full rounded-lg" />
-        <Skeleton className="h-9 w-full rounded-lg" />
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/notification-settings.tsx

@@ -1,34 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-const rows = [0, 1, 2, 3]
-
-export function NotificationSettings() {
-  return (
-    <Card>
-      <CardHeader className="gap-2">
-        <Skeleton className="h-5 w-32 rounded-md" />
-        <Skeleton className="h-4 w-64 rounded-md" />
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        {rows.map((row) => (
-          <div key={row} className="flex items-start gap-3">
-            <Skeleton className="size-4 rounded-sm" />
-            <div className="flex flex-1 flex-col gap-2">
-              <Skeleton className="h-4 w-40 rounded-md" />
-              <Skeleton className="h-3 w-56 rounded-md" />
-            </div>
-          </div>
-        ))}
-      </CardContent>
-      <CardFooter>
-        <Skeleton className="h-9 w-full rounded-lg" />
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/payments.tsx

@@ -1,37 +0,0 @@
-import { Card, CardContent, CardHeader } from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-const rows = [0, 1, 2]
-
-export function Payments() {
-  return (
-    <Card>
-      <CardHeader className="flex flex-col gap-3">
-        <div className="flex items-center gap-2">
-          <Skeleton className="h-4 w-12 rounded-md" />
-          <Skeleton className="size-1.5 rounded-full" />
-          <Skeleton className="size-7 rounded-md" />
-          <Skeleton className="size-1.5 rounded-full" />
-          <Skeleton className="h-4 w-20 rounded-md" />
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="flex flex-col gap-2">
-          {rows.map((row) => (
-            <div
-              key={row}
-              className="flex items-center gap-3 rounded-xl bg-muted p-3"
-            >
-              <Skeleton className="size-9 rounded-lg bg-muted-foreground/15" />
-              <div className="flex flex-1 flex-col gap-2">
-                <Skeleton className="h-4 w-40 rounded-md bg-muted-foreground/15" />
-                <Skeleton className="h-3 w-56 rounded-md bg-muted-foreground/15" />
-              </div>
-              <Skeleton className="size-4 rounded-md bg-muted-foreground/15" />
-            </div>
-          ))}
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/payout-threshold.tsx

@@ -1,43 +0,0 @@
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-export function PayoutThreshold() {
-  return (
-    <Card>
-      <CardHeader className="gap-2">
-        <Skeleton className="h-5 w-44 rounded-md" />
-        <Skeleton className="h-4 w-72 rounded-md" />
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-3 w-32 rounded-md" />
-          <Skeleton className="h-9 w-full rounded-lg" />
-        </div>
-        <div className="flex flex-col gap-3">
-          <div className="flex items-baseline justify-between">
-            <Skeleton className="h-3 w-40 rounded-md" />
-            <Skeleton className="h-7 w-24 rounded-md" />
-          </div>
-          <Skeleton className="h-2 w-full rounded-full" />
-          <div className="flex items-center justify-between">
-            <Skeleton className="h-3 w-16 rounded-md" />
-            <Skeleton className="h-3 w-20 rounded-md" />
-          </div>
-        </div>
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-3 w-16 rounded-md" />
-          <Skeleton className="h-[100px] w-full rounded-lg" />
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Skeleton className="h-9 w-full rounded-lg" />
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/power-usage.tsx

@@ -1,54 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-const bars = [30, 70, 80, 60, 90, 75, 100, 85]
-
-export function PowerUsage() {
-  return (
-    <Card>
-      <CardHeader className="gap-2">
-        <Skeleton className="h-5 w-32 rounded-md" />
-        <Skeleton className="h-4 w-24 rounded-md" />
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <div className="flex h-[140px] w-full items-end gap-2">
-          {bars.map((height, i) => (
-            <div
-              key={i}
-              className="flex h-full flex-1 flex-col justify-end gap-1.5"
-            >
-              <Skeleton
-                className="w-full rounded-t rounded-b-none"
-                style={{ height: `${height}%` }}
-              />
-              <Skeleton className="mx-auto h-3 w-5 rounded-md" />
-            </div>
-          ))}
-        </div>
-        <Skeleton className="h-px w-full rounded-none" />
-        <div className="grid grid-cols-2 gap-4">
-          <div className="flex flex-col gap-1.5">
-            <Skeleton className="h-3 w-28 rounded-md" />
-            <Skeleton className="h-5 w-20 rounded-md" />
-          </div>
-          <div className="flex flex-col gap-1.5">
-            <Skeleton className="h-3 w-20 rounded-md" />
-            <Skeleton className="h-5 w-24 rounded-md" />
-          </div>
-        </div>
-      </CardContent>
-      <CardFooter className="flex-col items-start gap-2">
-        <Skeleton className="h-3 w-24 rounded-md" />
-        <div className="flex w-full items-center gap-2">
-          <Skeleton className="h-2 flex-1 rounded-full" />
-          <Skeleton className="h-3 w-10 rounded-md" />
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/qr-connect.tsx

@@ -1,17 +0,0 @@
-import { Card, CardContent, CardHeader } from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-export function QrConnect() {
-  return (
-    <Card>
-      <CardContent className="flex justify-center pt-6">
-        <Skeleton className="size-44 rounded-xl" />
-      </CardContent>
-      <CardHeader className="items-center gap-2 text-center">
-        <Skeleton className="h-5 w-56 rounded-md" />
-        <Skeleton className="h-4 w-64 rounded-md" />
-        <Skeleton className="h-4 w-48 rounded-md" />
-      </CardHeader>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/savings-targets.tsx

@@ -1,44 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-const rows = [0, 1]
-
-export function SavingsTargets() {
-  return (
-    <Card>
-      <CardHeader className="gap-2">
-        <Skeleton className="h-5 w-36 rounded-md" />
-        <div className="flex flex-col gap-1.5">
-          <Skeleton className="h-4 w-full max-w-64 rounded-md" />
-          <Skeleton className="h-4 w-48 rounded-md" />
-        </div>
-      </CardHeader>
-      <CardContent>
-        <div className="flex flex-col gap-3">
-          {rows.map((row) => (
-            <div
-              key={row}
-              className="flex flex-col gap-3 rounded-xl bg-muted p-4"
-            >
-              <Skeleton className="h-3 w-24 rounded-md bg-muted-foreground/15" />
-              <Skeleton className="h-8 w-36 rounded-md bg-muted-foreground/15" />
-              <Skeleton className="h-2 w-full rounded-full bg-muted-foreground/15" />
-              <div className="flex items-center justify-between">
-                <Skeleton className="h-3 w-24 rounded-md bg-muted-foreground/15" />
-                <Skeleton className="h-3 w-20 rounded-md bg-muted-foreground/15" />
-              </div>
-            </div>
-          ))}
-        </div>
-      </CardContent>
-      <CardFooter className="justify-center">
-        <Skeleton className="h-3 w-56 rounded-md" />
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/sidebar-nav.tsx

@@ -1,39 +0,0 @@
-import { Card } from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-const groupA = [0, 1, 2, 3, 4]
-const groupB = [0, 1, 2, 3, 4]
-
-function NavSkeleton({ groups }: { groups: number[][] }) {
-  return (
-    <div className="flex flex-col gap-1 p-2">
-      {groups.map((items, gi) => (
-        <div key={gi} className="flex flex-col gap-1 px-2 py-1.5">
-          <Skeleton className="mb-1 h-3 w-20 rounded-md" />
-          {items.map((item) => (
-            <div key={item} className="flex items-center gap-2 px-2 py-2">
-              <Skeleton className="size-4 rounded-md" />
-              <Skeleton className="h-3 w-24 rounded-md" />
-            </div>
-          ))}
-          {gi < groups.length - 1 && (
-            <Skeleton className="my-1 h-px w-full rounded-none" />
-          )}
-        </div>
-      ))}
-    </div>
-  )
-}
-
-export function SidebarNav() {
-  return (
-    <div className="grid w-full items-start gap-4 xl:grid-cols-2 xl:gap-6">
-      <Card className="w-full overflow-hidden rounded-3xl py-0">
-        <NavSkeleton groups={[groupA, groupB]} />
-      </Card>
-      <Card className="hidden w-full overflow-hidden rounded-3xl py-0 xl:flex">
-        <NavSkeleton groups={[groupA, groupB]} />
-      </Card>
-    </div>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/transfer-funds.tsx

@@ -1,55 +0,0 @@
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardFooter,
-  CardHeader,
-} from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-export function TransferFunds() {
-  return (
-    <Card>
-      <CardHeader className="gap-2">
-        <Skeleton className="h-5 w-36 rounded-md" />
-        <Skeleton className="h-4 w-64 rounded-md" />
-        <CardAction>
-          <Skeleton className="size-8 rounded-md" />
-        </CardAction>
-      </CardHeader>
-      <CardContent className="flex flex-col gap-4">
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-3 w-32 rounded-md" />
-          <Skeleton className="h-9 w-full rounded-lg" />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-3 w-24 rounded-md" />
-          <Skeleton className="h-9 w-full rounded-lg" />
-        </div>
-        <div className="flex flex-col gap-2">
-          <Skeleton className="h-3 w-20 rounded-md" />
-          <Skeleton className="h-9 w-full rounded-lg" />
-        </div>
-        <div className="flex flex-col gap-3 rounded-xl bg-muted p-4">
-          <div className="flex items-center justify-between">
-            <Skeleton className="h-4 w-28 rounded-md bg-muted-foreground/15" />
-            <Skeleton className="h-4 w-24 rounded-md bg-muted-foreground/15" />
-          </div>
-          <Skeleton className="h-px w-full rounded-none bg-muted-foreground/15" />
-          <div className="flex items-center justify-between">
-            <Skeleton className="h-4 w-28 rounded-md bg-muted-foreground/15" />
-            <Skeleton className="h-4 w-12 rounded-md bg-muted-foreground/15" />
-          </div>
-          <Skeleton className="h-px w-full rounded-none bg-muted-foreground/15" />
-          <div className="flex items-center justify-between">
-            <Skeleton className="h-4 w-24 rounded-md bg-muted-foreground/15" />
-            <Skeleton className="h-4 w-20 rounded-md bg-muted-foreground/15" />
-          </div>
-        </div>
-      </CardContent>
-      <CardFooter>
-        <Skeleton className="h-9 w-full rounded-lg" />
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/skeleton/ui-elements.tsx

@@ -1,45 +0,0 @@
-import { Card, CardContent } from "@/styles/base-rhea/ui/card"
-import { Skeleton } from "@/styles/base-rhea/ui/skeleton"
-
-export function UIElements() {
-  return (
-    <Card className="w-full">
-      <CardContent className="flex flex-col gap-6">
-        <Skeleton className="h-8 w-full rounded-2xl" />
-        <div className="flex flex-wrap gap-2">
-          <Skeleton className="h-9 w-20 rounded-lg" />
-          <Skeleton className="h-9 w-24 rounded-lg" />
-          <Skeleton className="h-9 w-20 rounded-lg" />
-        </div>
-        <div className="flex flex-col gap-3">
-          <Skeleton className="h-9 w-full rounded-lg" />
-          <Skeleton className="h-20 w-full rounded-lg" />
-        </div>
-        <div className="flex items-center gap-2">
-          <div className="flex gap-2">
-            <Skeleton className="h-5 w-12 rounded-full" />
-            <Skeleton className="h-5 w-16 rounded-full" />
-            <Skeleton className="hidden h-5 w-14 rounded-full 4xl:block" />
-          </div>
-          <div className="ml-auto flex gap-3">
-            <Skeleton className="size-4 rounded-full" />
-            <Skeleton className="size-4 rounded-full" />
-          </div>
-          <div className="flex gap-3">
-            <Skeleton className="size-4 rounded-sm" />
-            <Skeleton className="hidden size-4 rounded-sm 4xl:block" />
-          </div>
-          <Skeleton className="ml-auto h-5 w-9 rounded-full 4xl:hidden" />
-        </div>
-        <div className="flex items-center gap-4">
-          <Skeleton className="h-9 w-24 rounded-lg" />
-          <div className="flex">
-            <Skeleton className="h-9 w-28 rounded-l-lg rounded-r-none" />
-            <Skeleton className="ml-px h-9 w-9 rounded-l-none rounded-r-lg" />
-          </div>
-          <Skeleton className="ml-auto hidden h-5 w-9 rounded-full 4xl:block" />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/transfer-funds.tsx

@@ -1,139 +0,0 @@
-import { Cancel01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import { Button } from "@/styles/base-rhea/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/styles/base-rhea/ui/card"
-import { Field, FieldGroup, FieldLabel } from "@/styles/base-rhea/ui/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-  InputGroupText,
-} from "@/styles/base-rhea/ui/input-group"
-import { Item, ItemContent } from "@/styles/base-rhea/ui/item"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/styles/base-rhea/ui/select"
-import { Separator } from "@/styles/base-rhea/ui/separator"
-
-const FROM_ACCOUNTS = [
-  { label: "Main Checking (··8402) — $12,450.00", value: "checking" },
-  { label: "Business (··7731) — $8,920.00", value: "business" },
-]
-
-const TO_ACCOUNTS = [
-  { label: "High Yield Savings (··1192) — $42,100.00", value: "savings" },
-  { label: "Investment (··3349) — $18,200.00", value: "investment" },
-]
-
-export function TransferFunds() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Transfer Funds</CardTitle>
-        <CardDescription>
-          Move money between your connected accounts.
-        </CardDescription>
-        <CardAction>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="bg-muted"
-            aria-label="Dismiss transfer funds"
-          >
-            <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} />
-          </Button>
-        </CardAction>
-      </CardHeader>
-      <CardContent>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="transfer-amount">
-              Amount to Transfer
-            </FieldLabel>
-            <InputGroup>
-              <InputGroupAddon>
-                <InputGroupText>$</InputGroupText>
-              </InputGroupAddon>
-              <InputGroupInput id="transfer-amount" defaultValue="1,200.00" />
-            </InputGroup>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="from-account">From Account</FieldLabel>
-            <Select items={FROM_ACCOUNTS} defaultValue="checking">
-              <SelectTrigger id="from-account" className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {FROM_ACCOUNTS.map((item) => (
-                    <SelectItem key={item.value} value={item.value}>
-                      {item.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="to-account">To Account</FieldLabel>
-            <Select items={TO_ACCOUNTS} defaultValue="savings">
-              <SelectTrigger id="to-account" className="w-full">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectGroup>
-                  {TO_ACCOUNTS.map((item) => (
-                    <SelectItem key={item.value} value={item.value}>
-                      {item.label}
-                    </SelectItem>
-                  ))}
-                </SelectGroup>
-              </SelectContent>
-            </Select>
-          </Field>
-          <Item variant="muted" className="flex-col items-stretch">
-            <ItemContent className="gap-3">
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">
-                  Estimated arrival
-                </span>
-                <span className="text-sm font-medium">Today, Apr 14</span>
-              </div>
-              <Separator />
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-muted-foreground">
-                  Transaction fee
-                </span>
-                <span className="text-sm font-medium tabular-nums">$0.00</span>
-              </div>
-              <Separator />
-              <div className="flex items-center justify-between">
-                <span className="text-sm font-medium">Total amount</span>
-                <span className="text-sm font-semibold tabular-nums">
-                  $1,200.00
-                </span>
-              </div>
-            </ItemContent>
-          </Item>
-        </FieldGroup>
-      </CardContent>
-      <CardFooter>
-        <Button className="w-full">Confirm Transfer</Button>
-      </CardFooter>
-    </Card>
-  )
-}

apps/v4/app/(app)/(root)/cards/ui-elements.tsx

@@ -1,176 +0,0 @@
-"use client"
-
-import {
-  ArrowRight02Icon,
-  ArrowUp01Icon,
-  Search01Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/styles/base-rhea/ui/alert-dialog"
-import { Badge } from "@/styles/base-rhea/ui/badge"
-import { Button } from "@/styles/base-rhea/ui/button"
-import { ButtonGroup } from "@/styles/base-rhea/ui/button-group"
-import { Card, CardContent } from "@/styles/base-rhea/ui/card"
-import { Checkbox } from "@/styles/base-rhea/ui/checkbox"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/styles/base-rhea/ui/dropdown-menu"
-import { Field, FieldGroup } from "@/styles/base-rhea/ui/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-  InputGroupText,
-} from "@/styles/base-rhea/ui/input-group"
-import { RadioGroup, RadioGroupItem } from "@/styles/base-rhea/ui/radio-group"
-import { Switch } from "@/styles/base-rhea/ui/switch"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/styles/base-rhea/ui/tabs"
-import { Textarea } from "@/styles/base-rhea/ui/textarea"
-
-export function UIElements() {
-  return (
-    <Card className="w-full">
-      <CardContent className="flex flex-col gap-6">
-        <div className="flex gap-2">
-          <Button>
-            Button{" "}
-            <HugeiconsIcon
-              icon={ArrowRight02Icon}
-              strokeWidth={2}
-              data-icon="inline-end"
-            />
-          </Button>
-          <Button variant="secondary">Secondary</Button>
-          <Button variant="outline">Outline</Button>
-        </div>
-        <FieldGroup>
-          <Field>
-            <InputGroup>
-              <InputGroupInput placeholder="Name" />
-              <InputGroupAddon align="inline-end">
-                <InputGroupText>
-                  <HugeiconsIcon icon={Search01Icon} strokeWidth={2} />
-                </InputGroupText>
-              </InputGroupAddon>
-            </InputGroup>
-          </Field>
-          <Field className="flex-1">
-            <Textarea placeholder="Message" className="resize-none" />
-          </Field>
-        </FieldGroup>
-        <div className="flex items-center gap-2">
-          <div className="flex gap-2">
-            <Badge>Badge</Badge>
-            <Badge variant="secondary">Secondary</Badge>
-            <Badge variant="outline" className="hidden 4xl:flex">
-              Outline
-            </Badge>
-          </div>
-          <RadioGroup
-            defaultValue="apple"
-            className="ml-auto flex w-fit gap-3"
-            aria-label="Fruit preference"
-          >
-            <RadioGroupItem value="apple" aria-label="Apple" />
-            <RadioGroupItem value="banana" aria-label="Banana" />
-          </RadioGroup>
-          <div className="flex gap-3">
-            <Checkbox defaultChecked aria-label="Enable email alerts" />
-            <Checkbox
-              className="hidden 4xl:flex"
-              aria-label="Enable push alerts"
-            />
-          </div>
-          <Switch
-            defaultChecked
-            className="flex 4xl:hidden"
-            aria-label="Enable compact notifications"
-          />
-        </div>
-        <div className="flex items-center gap-4">
-          <AlertDialog>
-            <AlertDialogTrigger render={<Button variant="outline" />}>
-              <span className="hidden md:flex style-sera:md:hidden">
-                Alert Dialog
-              </span>
-              <span className="flex md:hidden style-sera:md:flex">Dialog</span>
-            </AlertDialogTrigger>
-            <AlertDialogContent size="sm">
-              <AlertDialogHeader>
-                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
-                <AlertDialogDescription>
-                  Do you want to allow the USB accessory to connect to this
-                  device and your data?
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
-                <AlertDialogAction>Allow</AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-          <ButtonGroup className="ml-auto">
-            <Button variant="outline">
-              <span className="style-sera:hidden">Button Group</span>
-              <span className="hidden style-sera:block">Group</span>
-            </Button>
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                render={
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    aria-label="Open quick actions"
-                  />
-                }
-              >
-                <HugeiconsIcon icon={ArrowUp01Icon} strokeWidth={2} />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" side="top" className="w-40">
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>
-                  <DropdownMenuItem>Mute Conversation</DropdownMenuItem>
-                  <DropdownMenuItem>Mark as Read</DropdownMenuItem>
-                  <DropdownMenuItem>Block User</DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem variant="destructive">
-                    Delete Conversation
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </ButtonGroup>
-          <Switch
-            defaultChecked
-            className="hidden 4xl:flex"
-            aria-label="Enable advanced setting"
-          />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}

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 { IconArrowRight } from "@tabler/icons-react"
-
-import { Announcement } from "@/components/announcement"
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { Button } from "@/styles/radix-nova/ui/button"
-
-import { CardsDemo } from "./cards"
-
-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 className="md:**:[.container]:pb-8 lg:**:[.container]:pb-12">
-        <Announcement />
-        <PageHeaderHeading className="max-w-4xl">{title}</PageHeaderHeading>
-        <PageHeaderDescription>{description}</PageHeaderDescription>
-        <PageActions>
-          <Button asChild className="h-[31px] rounded-lg">
-            <Link href="/create?preset=b27GcrRo">
-              Build Your Own <IconArrowRight data-icon="inline-end" />
-            </Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      <div className="container-wrapper flex-1 p-0">
-        <div className="container overflow-hidden md:px-0 lg:max-w-none">
-          <section className="-mx-4 w-[140vw] overflow-hidden md:hidden">
-            <Image
-              src="/images/full-light.png"
-              width={2560}
-              height={2764}
-              alt="Dashboard"
-              className="block h-auto w-full dark:hidden"
-              priority
-            />
-            <Image
-              src="/images/full-dark.png"
-              width={2560}
-              height={2764}
-              alt="Dashboard"
-              className="hidden h-auto w-full dark:block"
-              priority
-            />
-          </section>
-          <section className="hidden md:block">
-            <CardsDemo />
-          </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>
-  )
-}