Merge branch 'main' into shadcn/package-imports

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>

.changeset/few-flies-fry.md

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

.claude/settings.local.json

@@ -9,6 +9,5 @@
       "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"]
-    }
-  }
-}

.github/workflows/prerelease-comment.yml

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

.github/workflows/prerelease.yml

@@ -0,0 +1,64 @@
+# Adapted from create-t3-app.
+
+name: Release - Beta
+
+on:
+  pull_request:
+    types: [labeled]
+    branches:
+      - main
+
+permissions:
+  id-token: write
+  contents: read
+
+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@v4
+        with:
+          fetch-depth: 0
+
+      - name: Use PNPM
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.0.6
+
+      - name: Use Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: "https://registry.npmjs.org"
+          cache: "pnpm"
+
+      - name: Update npm for OIDC support
+        run: npm install -g npm@latest
+
+      - name: Install NPM Dependencies
+        run: pnpm install
+
+      - name: Modify package.json version
+        run: node .github/version-script-beta.js
+
+      - name: Publish Beta to NPM
+        run: pnpm pub:beta
+
+      - name: get-npm-version
+        id: package-version
+        uses: martinbeentjes/npm-get-version-action@main
+        with:
+          path: packages/shadcn
+
+      - name: Upload packaged artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: npm-package-shadcn@${{ steps.package-version.outputs.current-version }}-pr-${{ github.event.number }} # encode the PR number into the artifact name
+          path: packages/shadcn/dist/index.js

.github/workflows/release.yml

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

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

@@ -39,9 +39,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
 

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

@@ -3,12 +3,15 @@ import Image from "next/image"
 import Link from "next/link"
 
 import { Announcement } from "@/components/announcement"
+import { ExamplesNav } from "@/components/examples-nav"
 import {
   PageActions,
   PageHeader,
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
+import { PageNav } from "@/components/page-nav"
+import { ThemeSelector } from "@/components/theme-selector"
 import { Button } from "@/registry/new-york-v4/ui/button"
 
 import { RootComponents } from "./components"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,30 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import { Separator } from "@/styles/base-sera/ui/separator"
-
-import { AssetDetails } from "./components/asset-details"
-import { AssetGrid } from "./components/asset-grid"
-import { PreviewHeader } from "./components/preview-header"
-import { ASSETS } from "./data"
-
-export function MediaLibrary() {
-  const [selectedId, setSelectedId] = React.useState<string>(ASSETS[0].id)
-
-  const selectedAsset = React.useMemo(
-    () => ASSETS.find((asset) => asset.id === selectedId) ?? ASSETS[0],
-    [selectedId]
-  )
-
-  return (
-    <div className="preview theme-taupe @container/preview w-full flex-1 bg-muted pt-4 font-sans ring-1 ring-foreground/5 [--gap:--spacing(4)] sm:pt-0 md:[--gap:--spacing(6)] xl:[--gap:--spacing(8)] 2xl:py-8 **:[.container]:px-(--gap)">
-      <PreviewHeader />
-      <Separator className="hidden sm:block" />
-      <div className="container grid grid-cols-1 items-start gap-(--gap) py-(--gap) xl:grid-cols-[minmax(0,1fr)_320px]">
-        <AssetGrid selectedId={selectedId} onSelect={setSelectedId} />
-        <AssetDetails asset={selectedAsset} />
-      </div>
-    </div>
-  )
-}

apps/v4/app/(app)/(styles)/sera/page.tsx

@@ -1,72 +0,0 @@
-import { type Metadata } from "next"
-import Link from "next/link"
-
-import {
-  PageActions,
-  PageHeader,
-  PageHeaderDescription,
-  PageHeaderHeading,
-} from "@/components/page-header"
-import { Button } from "@/styles/radix-sera/ui/button"
-
-import { AudienceAnalytics } from "./audience-analytics"
-import { LazyPreview } from "./components/lazy-preview"
-
-import "./style.css"
-
-import { ArrowRightIcon } from "lucide-react"
-
-import { ImagePreview } from "./components/image-preview"
-
-const title = "Introducing Sera"
-const description =
-  "Minimal. Editorial. Typographic. Underline Controls and Uppercase Headings. Shaped by Print Design Principles."
-
-export const metadata: Metadata = {
-  title,
-  description,
-  openGraph: {
-    title,
-    description,
-  },
-  twitter: {
-    card: "summary_large_image",
-    title,
-    description,
-  },
-}
-
-export default function SeraPage() {
-  return (
-    <>
-      <PageHeader>
-        <PageHeaderHeading className="font-(family-name:--font-playfair-display) text-[2.875rem] tracking-tight!">
-          {title}
-        </PageHeaderHeading>
-        <PageHeaderDescription className="max-w-2xl text-pretty md:text-balance">
-          {description}
-        </PageHeaderDescription>
-        <PageActions className="**:[.container]:justify-start">
-          <Button asChild size="sm">
-            <Link href="/create?preset=b4xFeBLg4O">
-              Open in shadcn/create
-              <ArrowRightIcon data-icon="inline-end" />
-            </Link>
-          </Button>
-        </PageActions>
-      </PageHeader>
-      <ImagePreview />
-      <div className="container-wrapper hidden flex-1 flex-col section-soft px-0 md:flex md:px-2 md:py-12">
-        <div className="container flex flex-1 flex-col gap-10 px-0 3xl:max-w-[2000px] md:px-6">
-          <AudienceAnalytics />
-          <LazyPreview name="articleDirectory" />
-          <LazyPreview name="emptyState" />
-          <LazyPreview name="editArticle" />
-          <LazyPreview name="mediaLibrary" />
-          <LazyPreview name="mediaLibraryTable" />
-        </div>
-      </div>
-      {/* <ThemeSwitcher /> */}
-    </>
-  )
-}

apps/v4/app/(app)/(styles)/sera/style.css

@@ -1,495 +0,0 @@
-@layer base {
-  .preview {
-    --font-sans: var(--font-noto-sans);
-    --font-heading: var(--font-playfair-display);
-    contain-intrinsic-size: auto 900px;
-    content-visibility: auto;
-  }
-
-  .theme-taupe {
-    --radius: 0;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.147 0.004 49.3);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.147 0.004 49.3);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.147 0.004 49.3);
-    --primary: oklch(0.214 0.009 43.1);
-    --primary-foreground: oklch(0.986 0.002 67.8);
-    --secondary: oklch(0.96 0.002 17.2);
-    --secondary-foreground: oklch(0.214 0.009 43.1);
-    --muted: oklch(0.96 0.002 17.2);
-    --muted-foreground: oklch(0.547 0.021 43.1);
-    --accent: oklch(0.96 0.002 17.2);
-    --accent-foreground: oklch(0.214 0.009 43.1);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0.005 34.3);
-    --input: oklch(0.922 0.005 34.3);
-    --ring: oklch(0.714 0.014 41.2);
-    --chart-1: oklch(0.868 0.007 39.5);
-    --chart-2: oklch(0.547 0.021 43.1);
-    --chart-3: oklch(0.438 0.017 39.3);
-    --chart-4: oklch(0.367 0.016 35.7);
-    --chart-5: oklch(0.268 0.011 36.5);
-    --sidebar: oklch(0.986 0.002 67.8);
-    --sidebar-foreground: oklch(0.147 0.004 49.3);
-    --sidebar-primary: oklch(0.214 0.009 43.1);
-    --sidebar-primary-foreground: oklch(0.986 0.002 67.8);
-    --sidebar-accent: oklch(0.96 0.002 17.2);
-    --sidebar-accent-foreground: oklch(0.214 0.009 43.1);
-    --sidebar-border: oklch(0.922 0.005 34.3);
-    --sidebar-ring: oklch(0.714 0.014 41.2);
-
-    .dark & {
-      --background: oklch(0.147 0.004 49.3);
-      --foreground: oklch(0.986 0.002 67.8);
-      --card: oklch(0.214 0.009 43.1);
-      --card-foreground: oklch(0.986 0.002 67.8);
-      --popover: oklch(0.214 0.009 43.1);
-      --popover-foreground: oklch(0.986 0.002 67.8);
-      --primary: oklch(0.922 0.005 34.3);
-      --primary-foreground: oklch(0.214 0.009 43.1);
-      --secondary: oklch(0.268 0.011 36.5);
-      --secondary-foreground: oklch(0.986 0.002 67.8);
-      --muted: oklch(0.268 0.011 36.5);
-      --muted-foreground: oklch(0.714 0.014 41.2);
-      --accent: oklch(0.268 0.011 36.5);
-      --accent-foreground: oklch(0.986 0.002 67.8);
-      --destructive: oklch(0.704 0.191 22.216);
-      --border: oklch(1 0 0 / 10%);
-      --input: oklch(1 0 0 / 15%);
-      --ring: oklch(0.547 0.021 43.1);
-      --chart-1: oklch(0.868 0.007 39.5);
-      --chart-2: oklch(0.547 0.021 43.1);
-      --chart-3: oklch(0.438 0.017 39.3);
-      --chart-4: oklch(0.367 0.016 35.7);
-      --chart-5: oklch(0.268 0.011 36.5);
-      --sidebar: oklch(0.214 0.009 43.1);
-      --sidebar-foreground: oklch(0.986 0.002 67.8);
-      --sidebar-primary: oklch(0.488 0.243 264.376);
-      --sidebar-primary-foreground: oklch(0.986 0.002 67.8);
-      --sidebar-accent: oklch(0.268 0.011 36.5);
-      --sidebar-accent-foreground: oklch(0.986 0.002 67.8);
-      --sidebar-border: oklch(1 0 0 / 10%);
-      --sidebar-ring: oklch(0.547 0.021 43.1);
-    }
-  }
-
-  .theme-neutral {
-    --radius: 0;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
-
-    .dark & {
-      --background: oklch(0.145 0 0);
-      --foreground: oklch(0.985 0 0);
-      --card: oklch(0.205 0 0);
-      --card-foreground: oklch(0.985 0 0);
-      --popover: oklch(0.205 0 0);
-      --popover-foreground: oklch(0.985 0 0);
-      --primary: oklch(0.922 0 0);
-      --primary-foreground: oklch(0.205 0 0);
-      --secondary: oklch(0.269 0 0);
-      --secondary-foreground: oklch(0.985 0 0);
-      --muted: oklch(0.269 0 0);
-      --muted-foreground: oklch(0.708 0 0);
-      --accent: oklch(0.269 0 0);
-      --accent-foreground: oklch(0.985 0 0);
-      --destructive: oklch(0.704 0.191 22.216);
-      --border: oklch(1 0 0 / 10%);
-      --input: oklch(1 0 0 / 15%);
-      --ring: oklch(0.556 0 0);
-      --chart-1: oklch(0.87 0 0);
-      --chart-2: oklch(0.556 0 0);
-      --chart-3: oklch(0.439 0 0);
-      --chart-4: oklch(0.371 0 0);
-      --chart-5: oklch(0.269 0 0);
-      --sidebar: oklch(0.205 0 0);
-      --sidebar-foreground: oklch(0.985 0 0);
-      --sidebar-primary: oklch(0.488 0.243 264.376);
-      --sidebar-primary-foreground: oklch(0.985 0 0);
-      --sidebar-accent: oklch(0.269 0 0);
-      --sidebar-accent-foreground: oklch(0.985 0 0);
-      --sidebar-border: oklch(1 0 0 / 10%);
-      --sidebar-ring: oklch(0.556 0 0);
-    }
-  }
-
-  .theme-stone {
-    --radius: 0;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.147 0.004 49.25);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.147 0.004 49.25);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.147 0.004 49.25);
-    --primary: oklch(0.216 0.006 56.043);
-    --primary-foreground: oklch(0.985 0.001 106.423);
-    --secondary: oklch(0.97 0.001 106.424);
-    --secondary-foreground: oklch(0.216 0.006 56.043);
-    --muted: oklch(0.97 0.001 106.424);
-    --muted-foreground: oklch(0.553 0.013 58.071);
-    --accent: oklch(0.97 0.001 106.424);
-    --accent-foreground: oklch(0.216 0.006 56.043);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.923 0.003 48.717);
-    --input: oklch(0.923 0.003 48.717);
-    --ring: oklch(0.709 0.01 56.259);
-    --chart-1: oklch(0.869 0.005 56.366);
-    --chart-2: oklch(0.553 0.013 58.071);
-    --chart-3: oklch(0.444 0.011 73.639);
-    --chart-4: oklch(0.374 0.01 67.558);
-    --chart-5: oklch(0.268 0.007 34.298);
-    --sidebar: oklch(0.985 0.001 106.423);
-    --sidebar-foreground: oklch(0.147 0.004 49.25);
-    --sidebar-primary: oklch(0.216 0.006 56.043);
-    --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-    --sidebar-accent: oklch(0.97 0.001 106.424);
-    --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
-    --sidebar-border: oklch(0.923 0.003 48.717);
-    --sidebar-ring: oklch(0.709 0.01 56.259);
-
-    .dark & {
-      --background: oklch(0.147 0.004 49.25);
-      --foreground: oklch(0.985 0.001 106.423);
-      --card: oklch(0.216 0.006 56.043);
-      --card-foreground: oklch(0.985 0.001 106.423);
-      --popover: oklch(0.216 0.006 56.043);
-      --popover-foreground: oklch(0.985 0.001 106.423);
-      --primary: oklch(0.923 0.003 48.717);
-      --primary-foreground: oklch(0.216 0.006 56.043);
-      --secondary: oklch(0.268 0.007 34.298);
-      --secondary-foreground: oklch(0.985 0.001 106.423);
-      --muted: oklch(0.268 0.007 34.298);
-      --muted-foreground: oklch(0.709 0.01 56.259);
-      --accent: oklch(0.268 0.007 34.298);
-      --accent-foreground: oklch(0.985 0.001 106.423);
-      --destructive: oklch(0.704 0.191 22.216);
-      --border: oklch(1 0 0 / 10%);
-      --input: oklch(1 0 0 / 15%);
-      --ring: oklch(0.553 0.013 58.071);
-      --chart-1: oklch(0.869 0.005 56.366);
-      --chart-2: oklch(0.553 0.013 58.071);
-      --chart-3: oklch(0.444 0.011 73.639);
-      --chart-4: oklch(0.374 0.01 67.558);
-      --chart-5: oklch(0.268 0.007 34.298);
-      --sidebar: oklch(0.216 0.006 56.043);
-      --sidebar-foreground: oklch(0.985 0.001 106.423);
-      --sidebar-primary: oklch(0.488 0.243 264.376);
-      --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-      --sidebar-accent: oklch(0.268 0.007 34.298);
-      --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
-      --sidebar-border: oklch(1 0 0 / 10%);
-      --sidebar-ring: oklch(0.553 0.013 58.071);
-    }
-  }
-
-  .theme-zinc {
-    --radius: 0;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.141 0.005 285.823);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.141 0.005 285.823);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.141 0.005 285.823);
-    --primary: oklch(0.21 0.006 285.885);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.967 0.001 286.375);
-    --secondary-foreground: oklch(0.21 0.006 285.885);
-    --muted: oklch(0.967 0.001 286.375);
-    --muted-foreground: oklch(0.552 0.016 285.938);
-    --accent: oklch(0.967 0.001 286.375);
-    --accent-foreground: oklch(0.21 0.006 285.885);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.92 0.004 286.32);
-    --input: oklch(0.92 0.004 286.32);
-    --ring: oklch(0.705 0.015 286.067);
-    --chart-1: oklch(0.871 0.006 286.286);
-    --chart-2: oklch(0.552 0.016 285.938);
-    --chart-3: oklch(0.442 0.017 285.786);
-    --chart-4: oklch(0.37 0.013 285.805);
-    --chart-5: oklch(0.274 0.006 286.033);
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.141 0.005 285.823);
-    --sidebar-primary: oklch(0.21 0.006 285.885);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.967 0.001 286.375);
-    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-    --sidebar-border: oklch(0.92 0.004 286.32);
-    --sidebar-ring: oklch(0.705 0.015 286.067);
-
-    .dark & {
-      --background: oklch(0.141 0.005 285.823);
-      --foreground: oklch(0.985 0 0);
-      --card: oklch(0.21 0.006 285.885);
-      --card-foreground: oklch(0.985 0 0);
-      --popover: oklch(0.21 0.006 285.885);
-      --popover-foreground: oklch(0.985 0 0);
-      --primary: oklch(0.92 0.004 286.32);
-      --primary-foreground: oklch(0.21 0.006 285.885);
-      --secondary: oklch(0.274 0.006 286.033);
-      --secondary-foreground: oklch(0.985 0 0);
-      --muted: oklch(0.274 0.006 286.033);
-      --muted-foreground: oklch(0.705 0.015 286.067);
-      --accent: oklch(0.274 0.006 286.033);
-      --accent-foreground: oklch(0.985 0 0);
-      --destructive: oklch(0.704 0.191 22.216);
-      --border: oklch(1 0 0 / 10%);
-      --input: oklch(1 0 0 / 15%);
-      --ring: oklch(0.552 0.016 285.938);
-      --chart-1: oklch(0.871 0.006 286.286);
-      --chart-2: oklch(0.552 0.016 285.938);
-      --chart-3: oklch(0.442 0.017 285.786);
-      --chart-4: oklch(0.37 0.013 285.805);
-      --chart-5: oklch(0.274 0.006 286.033);
-      --sidebar: oklch(0.21 0.006 285.885);
-      --sidebar-foreground: oklch(0.985 0 0);
-      --sidebar-primary: oklch(0.488 0.243 264.376);
-      --sidebar-primary-foreground: oklch(0.985 0 0);
-      --sidebar-accent: oklch(0.274 0.006 286.033);
-      --sidebar-accent-foreground: oklch(0.985 0 0);
-      --sidebar-border: oklch(1 0 0 / 10%);
-      --sidebar-ring: oklch(0.552 0.016 285.938);
-    }
-  }
-
-  .theme-mauve {
-    --radius: 0;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0.008 326);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0.008 326);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0.008 326);
-    --primary: oklch(0.212 0.019 322.12);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.96 0.003 325.6);
-    --secondary-foreground: oklch(0.212 0.019 322.12);
-    --muted: oklch(0.96 0.003 325.6);
-    --muted-foreground: oklch(0.542 0.034 322.5);
-    --accent: oklch(0.96 0.003 325.6);
-    --accent-foreground: oklch(0.212 0.019 322.12);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0.005 325.62);
-    --input: oklch(0.922 0.005 325.62);
-    --ring: oklch(0.711 0.019 323.02);
-    --chart-1: oklch(0.865 0.012 325.68);
-    --chart-2: oklch(0.542 0.034 322.5);
-    --chart-3: oklch(0.435 0.029 321.78);
-    --chart-4: oklch(0.364 0.029 323.89);
-    --chart-5: oklch(0.263 0.024 320.12);
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0.008 326);
-    --sidebar-primary: oklch(0.212 0.019 322.12);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.96 0.003 325.6);
-    --sidebar-accent-foreground: oklch(0.212 0.019 322.12);
-    --sidebar-border: oklch(0.922 0.005 325.62);
-    --sidebar-ring: oklch(0.711 0.019 323.02);
-
-    .dark & {
-      --background: oklch(0.145 0.008 326);
-      --foreground: oklch(0.985 0 0);
-      --card: oklch(0.212 0.019 322.12);
-      --card-foreground: oklch(0.985 0 0);
-      --popover: oklch(0.212 0.019 322.12);
-      --popover-foreground: oklch(0.985 0 0);
-      --primary: oklch(0.922 0.005 325.62);
-      --primary-foreground: oklch(0.212 0.019 322.12);
-      --secondary: oklch(0.263 0.024 320.12);
-      --secondary-foreground: oklch(0.985 0 0);
-      --muted: oklch(0.263 0.024 320.12);
-      --muted-foreground: oklch(0.711 0.019 323.02);
-      --accent: oklch(0.263 0.024 320.12);
-      --accent-foreground: oklch(0.985 0 0);
-      --destructive: oklch(0.704 0.191 22.216);
-      --border: oklch(1 0 0 / 10%);
-      --input: oklch(1 0 0 / 15%);
-      --ring: oklch(0.542 0.034 322.5);
-      --chart-1: oklch(0.865 0.012 325.68);
-      --chart-2: oklch(0.542 0.034 322.5);
-      --chart-3: oklch(0.435 0.029 321.78);
-      --chart-4: oklch(0.364 0.029 323.89);
-      --chart-5: oklch(0.263 0.024 320.12);
-      --sidebar: oklch(0.212 0.019 322.12);
-      --sidebar-foreground: oklch(0.985 0 0);
-      --sidebar-primary: oklch(0.488 0.243 264.376);
-      --sidebar-primary-foreground: oklch(0.985 0 0);
-      --sidebar-accent: oklch(0.263 0.024 320.12);
-      --sidebar-accent-foreground: oklch(0.985 0 0);
-      --sidebar-border: oklch(1 0 0 / 10%);
-      --sidebar-ring: oklch(0.542 0.034 322.5);
-    }
-  }
-
-  .theme-olive {
-    --radius: 0;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.153 0.006 107.1);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.153 0.006 107.1);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.153 0.006 107.1);
-    --primary: oklch(0.228 0.013 107.4);
-    --primary-foreground: oklch(0.988 0.003 106.5);
-    --secondary: oklch(0.966 0.005 106.5);
-    --secondary-foreground: oklch(0.228 0.013 107.4);
-    --muted: oklch(0.966 0.005 106.5);
-    --muted-foreground: oklch(0.58 0.031 107.3);
-    --accent: oklch(0.966 0.005 106.5);
-    --accent-foreground: oklch(0.228 0.013 107.4);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.93 0.007 106.5);
-    --input: oklch(0.93 0.007 106.5);
-    --ring: oklch(0.737 0.021 106.9);
-    --chart-1: oklch(0.88 0.011 106.6);
-    --chart-2: oklch(0.58 0.031 107.3);
-    --chart-3: oklch(0.466 0.025 107.3);
-    --chart-4: oklch(0.394 0.023 107.4);
-    --chart-5: oklch(0.286 0.016 107.4);
-    --sidebar: oklch(0.988 0.003 106.5);
-    --sidebar-foreground: oklch(0.153 0.006 107.1);
-    --sidebar-primary: oklch(0.228 0.013 107.4);
-    --sidebar-primary-foreground: oklch(0.988 0.003 106.5);
-    --sidebar-accent: oklch(0.966 0.005 106.5);
-    --sidebar-accent-foreground: oklch(0.228 0.013 107.4);
-    --sidebar-border: oklch(0.93 0.007 106.5);
-    --sidebar-ring: oklch(0.737 0.021 106.9);
-
-    .dark & {
-      --background: oklch(0.153 0.006 107.1);
-      --foreground: oklch(0.988 0.003 106.5);
-      --card: oklch(0.228 0.013 107.4);
-      --card-foreground: oklch(0.988 0.003 106.5);
-      --popover: oklch(0.228 0.013 107.4);
-      --popover-foreground: oklch(0.988 0.003 106.5);
-      --primary: oklch(0.93 0.007 106.5);
-      --primary-foreground: oklch(0.228 0.013 107.4);
-      --secondary: oklch(0.286 0.016 107.4);
-      --secondary-foreground: oklch(0.988 0.003 106.5);
-      --muted: oklch(0.286 0.016 107.4);
-      --muted-foreground: oklch(0.737 0.021 106.9);
-      --accent: oklch(0.286 0.016 107.4);
-      --accent-foreground: oklch(0.988 0.003 106.5);
-      --destructive: oklch(0.704 0.191 22.216);
-      --border: oklch(1 0 0 / 10%);
-      --input: oklch(1 0 0 / 15%);
-      --ring: oklch(0.58 0.031 107.3);
-      --chart-1: oklch(0.88 0.011 106.6);
-      --chart-2: oklch(0.58 0.031 107.3);
-      --chart-3: oklch(0.466 0.025 107.3);
-      --chart-4: oklch(0.394 0.023 107.4);
-      --chart-5: oklch(0.286 0.016 107.4);
-      --sidebar: oklch(0.228 0.013 107.4);
-      --sidebar-foreground: oklch(0.988 0.003 106.5);
-      --sidebar-primary: oklch(0.488 0.243 264.376);
-      --sidebar-primary-foreground: oklch(0.988 0.003 106.5);
-      --sidebar-accent: oklch(0.286 0.016 107.4);
-      --sidebar-accent-foreground: oklch(0.988 0.003 106.5);
-      --sidebar-border: oklch(1 0 0 / 10%);
-      --sidebar-ring: oklch(0.58 0.031 107.3);
-    }
-  }
-
-  .theme-mist {
-    --radius: 0;
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.148 0.004 228.8);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.148 0.004 228.8);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.148 0.004 228.8);
-    --primary: oklch(0.218 0.008 223.9);
-    --primary-foreground: oklch(0.987 0.002 197.1);
-    --secondary: oklch(0.963 0.002 197.1);
-    --secondary-foreground: oklch(0.218 0.008 223.9);
-    --muted: oklch(0.963 0.002 197.1);
-    --muted-foreground: oklch(0.56 0.021 213.5);
-    --accent: oklch(0.963 0.002 197.1);
-    --accent-foreground: oklch(0.218 0.008 223.9);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.925 0.005 214.3);
-    --input: oklch(0.925 0.005 214.3);
-    --ring: oklch(0.723 0.014 214.4);
-    --chart-1: oklch(0.872 0.007 219.6);
-    --chart-2: oklch(0.56 0.021 213.5);
-    --chart-3: oklch(0.45 0.017 213.2);
-    --chart-4: oklch(0.378 0.015 216);
-    --chart-5: oklch(0.275 0.011 216.9);
-    --sidebar: oklch(0.987 0.002 197.1);
-    --sidebar-foreground: oklch(0.148 0.004 228.8);
-    --sidebar-primary: oklch(0.218 0.008 223.9);
-    --sidebar-primary-foreground: oklch(0.987 0.002 197.1);
-    --sidebar-accent: oklch(0.963 0.002 197.1);
-    --sidebar-accent-foreground: oklch(0.218 0.008 223.9);
-    --sidebar-border: oklch(0.925 0.005 214.3);
-    --sidebar-ring: oklch(0.723 0.014 214.4);
-
-    .dark & {
-      --background: oklch(0.148 0.004 228.8);
-      --foreground: oklch(0.987 0.002 197.1);
-      --card: oklch(0.218 0.008 223.9);
-      --card-foreground: oklch(0.987 0.002 197.1);
-      --popover: oklch(0.218 0.008 223.9);
-      --popover-foreground: oklch(0.987 0.002 197.1);
-      --primary: oklch(0.925 0.005 214.3);
-      --primary-foreground: oklch(0.218 0.008 223.9);
-      --secondary: oklch(0.275 0.011 216.9);
-      --secondary-foreground: oklch(0.987 0.002 197.1);
-      --muted: oklch(0.275 0.011 216.9);
-      --muted-foreground: oklch(0.723 0.014 214.4);
-      --accent: oklch(0.275 0.011 216.9);
-      --accent-foreground: oklch(0.987 0.002 197.1);
-      --destructive: oklch(0.704 0.191 22.216);
-      --border: oklch(1 0 0 / 10%);
-      --input: oklch(1 0 0 / 15%);
-      --ring: oklch(0.56 0.021 213.5);
-      --chart-1: oklch(0.872 0.007 219.6);
-      --chart-2: oklch(0.56 0.021 213.5);
-      --chart-3: oklch(0.45 0.017 213.2);
-      --chart-4: oklch(0.378 0.015 216);
-      --chart-5: oklch(0.275 0.011 216.9);
-      --sidebar: oklch(0.218 0.008 223.9);
-      --sidebar-foreground: oklch(0.987 0.002 197.1);
-      --sidebar-primary: oklch(0.488 0.243 264.376);
-      --sidebar-primary-foreground: oklch(0.987 0.002 197.1);
-      --sidebar-accent: oklch(0.275 0.011 216.9);
-      --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
-      --sidebar-border: oklch(1 0 0 / 10%);
-      --sidebar-ring: oklch(0.56 0.021 213.5);
-    }
-  }
-}
-
-@utility font-heading {
-  font-family: var(--font-serif);
-}

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

@@ -10,7 +10,6 @@ import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
 export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
   const presetCode = usePresetCode()
   const [hasCopied, setHasCopied] = React.useState(false)
-  const label = hasCopied ? "Copied" : `--preset ${presetCode}`
 
   React.useEffect(() => {
     if (hasCopied) {
@@ -33,13 +32,12 @@ export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
     <Button
       variant="outline"
       onClick={handleCopy}
-      title={label}
       className={cn(
         "touch-manipulation bg-transparent! px-2! py-0! text-sm! transition-none select-none hover:bg-muted! pointer-coarse:h-10!",
         className
       )}
     >
-      <span className="block min-w-0 truncate">{label}</span>
+      <span>{hasCopied ? "Copied" : `--preset ${presetCode}`}</span>
     </Button>
   )
 }

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

@@ -23,12 +23,12 @@ import { FontPicker } from "@/app/(app)/create/components/font-picker"
 import { IconLibraryPicker } from "@/app/(app)/create/components/icon-library-picker"
 import { MainMenu } from "@/app/(app)/create/components/main-menu"
 import { MenuColorPicker } from "@/app/(app)/create/components/menu-picker"
-import { OpenPreset } from "@/app/(app)/create/components/open-preset"
 import { RadiusPicker } from "@/app/(app)/create/components/radius-picker"
 import { RandomButton } from "@/app/(app)/create/components/random-button"
 import { ResetDialog } from "@/app/(app)/create/components/reset-button"
 import { StylePicker } from "@/app/(app)/create/components/style-picker"
 import { ThemePicker } from "@/app/(app)/create/components/theme-picker"
+import { V0Button } from "@/app/(app)/create/components/v0-button"
 import { FONT_HEADING_OPTIONS, FONTS } from "@/app/(app)/create/lib/fonts"
 import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
 
@@ -102,12 +102,8 @@ export function Customizer({
         </FieldGroup>
       </CardContent>
       <CardFooter className="flex min-w-0 gap-2 md:flex-col md:rounded-b-none md:**:[button,a]:w-full">
-        <CopyPreset className="min-w-0 flex-1 md:flex-none" />
-        <OpenPreset
-          className="max-w-20 min-w-0 flex-1 sm:max-w-none md:flex-none"
-          label={isMobile ? "Open" : "Open Preset"}
-        />
-        <RandomButton className="max-w-20 min-w-0 flex-1 sm:max-w-none md:flex-none" />
+        <CopyPreset className="flex-1 md:flex-none" />
+        <RandomButton className="flex-1 md:flex-none" />
         <ActionMenu itemsByBase={itemsByBase} />
         <ResetDialog />
       </CardFooter>

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

@@ -5,7 +5,6 @@ import * as React from "react"
 import {
   buildRegistryTheme,
   DEFAULT_CONFIG,
-  POINTER_CURSOR_SELECTOR,
   type DesignSystemConfig,
 } from "@/registry/config"
 import { useIframeMessageListener } from "@/app/(app)/create/hooks/use-iframe-sync"
@@ -17,12 +16,6 @@ import {
 
 const THEME_STYLE_ELEMENT_ID = "design-system-theme-vars"
 const MANAGED_BODY_CLASS_PREFIXES = ["style-", "base-color-"] as const
-const POINTER_CURSOR_CSS = `@layer base {
-  ${POINTER_CURSOR_SELECTOR} {
-    cursor: pointer;
-  }
-}
-`
 
 type RegistryThemeCssVars = NonNullable<
   ReturnType<typeof buildRegistryTheme>["cssVars"]
@@ -51,17 +44,14 @@ function buildCssRule(selector: string, cssVars?: Record<string, string>) {
   return `${selector} {\n${declarations}\n}\n`
 }
 
-function buildThemeCssText(cssVars: RegistryThemeCssVars, pointer: boolean) {
+function buildThemeCssText(cssVars: RegistryThemeCssVars) {
   return [
     buildCssRule(":root", {
       ...(cssVars.theme ?? {}),
       ...(cssVars.light ?? {}),
     }),
     buildCssRule(".dark", cssVars.dark),
-    pointer ? POINTER_CURSOR_CSS : "",
-  ]
-    .filter(Boolean)
-    .join("\n")
+  ].join("\n")
 }
 
 export function DesignSystemProvider({
@@ -83,7 +73,6 @@ export function DesignSystemProvider({
     chartColor,
     menuAccent,
     menuColor,
-    pointer,
     radius,
   } = searchParams
   const effectiveRadius = style === "lyra" ? "none" : radius
@@ -141,7 +130,7 @@ export function DesignSystemProvider({
   useIframeMessageListener("design-system-params", handleDesignSystemMessage)
 
   React.useEffect(() => {
-    if (style === "lyra" || (style === "sera" && radius !== "none")) {
+    if (style === "lyra" && radius !== "none") {
       setSearchParams({ radius: "none" })
     }
   }, [style, radius, setSearchParams])
@@ -219,8 +208,8 @@ export function DesignSystemProvider({
       document.head.appendChild(styleElement)
     }
 
-    styleElement.textContent = buildThemeCssText(registryTheme.cssVars, pointer)
-  }, [registryTheme, pointer])
+    styleElement.textContent = buildThemeCssText(registryTheme.cssVars)
+  }, [registryTheme])
 
   // Handle menu color inversion by adding/removing dark class to elements with cn-menu-target.
   // useLayoutEffect to apply classes synchronously before paint, avoiding flash.

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

@@ -17,7 +17,6 @@ import {
 } from "@/app/(app)/create/components/picker"
 import { useActionMenuTrigger } from "@/app/(app)/create/hooks/use-action-menu"
 import { useHistory } from "@/app/(app)/create/hooks/use-history"
-import { useOpenPresetTrigger } from "@/app/(app)/create/hooks/use-open-preset"
 import { useRandom } from "@/app/(app)/create/hooks/use-random"
 import { useReset } from "@/app/(app)/create/hooks/use-reset"
 import { useThemeToggle } from "@/app/(app)/create/hooks/use-theme-toggle"
@@ -28,7 +27,6 @@ export function MainMenu({ className }: React.ComponentProps<typeof Button>) {
   const [isMac, setIsMac] = React.useState(false)
   const { canGoBack, canGoForward, goBack, goForward } = useHistory()
   const { openActionMenu } = useActionMenuTrigger()
-  const { openPreset } = useOpenPresetTrigger()
   const { randomize } = useRandom()
   const { toggleTheme } = useThemeToggle()
   const { setShowResetDialog } = useReset()
@@ -57,9 +55,6 @@ export function MainMenu({ className }: React.ComponentProps<typeof Button>) {
               Navigate...
               <PickerShortcut>{isMac ? "⌘P" : "Ctrl+P"}</PickerShortcut>
             </PickerItem>
-            <PickerItem onClick={openPreset}>
-              Open Preset... <PickerShortcut>O</PickerShortcut>
-            </PickerItem>
             <PickerItem onClick={randomize}>
               Shuffle <PickerShortcut>R</PickerShortcut>
             </PickerItem>

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

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

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

@@ -11,7 +11,6 @@ import { DARK_MODE_FORWARD_TYPE } from "@/app/(app)/create/components/mode-switc
 import { PreviewSwitcher } from "@/app/(app)/create/components/preview-switcher"
 import { RANDOMIZE_FORWARD_TYPE } from "@/app/(app)/create/components/random-button"
 import { sendToIframe } from "@/app/(app)/create/hooks/use-iframe-sync"
-import { OPEN_PRESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-open-preset"
 import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset"
 import {
   serializeDesignSystemSearchParams,
@@ -21,6 +20,78 @@ import {
 // Hoisted — avoids recreating on every message event. (js-hoist-regexp)
 const MAC_REGEX = /Mac|iPhone|iPad|iPod/
 
+// Hoisted — only uses module-level constants, no component state. (rendering-hoist-jsx)
+function handleMessage(event: MessageEvent) {
+  if (
+    typeof window === "undefined" ||
+    event.origin !== window.location.origin
+  ) {
+    return
+  }
+
+  const type = event.data.type
+  if (type === CMD_K_FORWARD_TYPE) {
+    const isMac = MAC_REGEX.test(navigator.userAgent)
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: event.data.key || "k",
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === RANDOMIZE_FORWARD_TYPE) {
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: event.data.key || "r",
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === UNDO_FORWARD_TYPE) {
+    const isMac = MAC_REGEX.test(navigator.userAgent)
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "z",
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === REDO_FORWARD_TYPE) {
+    const isMac = MAC_REGEX.test(navigator.userAgent)
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "z",
+        shiftKey: true,
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === RESET_FORWARD_TYPE) {
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "R",
+        shiftKey: true,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === DARK_MODE_FORWARD_TYPE) {
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: event.data.key || "d",
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  }
+}
+
 export function Preview() {
   const [params] = useDesignSystemSearchParams()
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
@@ -46,89 +117,6 @@ export function Preview() {
   }, [params])
 
   React.useEffect(() => {
-    const handleMessage = (event: MessageEvent) => {
-      const iframeWindow = iframeRef.current?.contentWindow
-      if (
-        !iframeWindow ||
-        event.origin !== window.location.origin ||
-        event.source !== iframeWindow ||
-        !event.data ||
-        typeof event.data !== "object"
-      ) {
-        return
-      }
-
-      const type = event.data.type
-      if (type === CMD_K_FORWARD_TYPE) {
-        const isMac = MAC_REGEX.test(navigator.userAgent)
-        document.dispatchEvent(
-          new KeyboardEvent("keydown", {
-            key: event.data.key || "k",
-            metaKey: isMac,
-            ctrlKey: !isMac,
-            bubbles: true,
-            cancelable: true,
-          })
-        )
-      } else if (type === RANDOMIZE_FORWARD_TYPE) {
-        document.dispatchEvent(
-          new KeyboardEvent("keydown", {
-            key: event.data.key || "r",
-            bubbles: true,
-            cancelable: true,
-          })
-        )
-      } else if (type === OPEN_PRESET_FORWARD_TYPE) {
-        document.dispatchEvent(
-          new KeyboardEvent("keydown", {
-            key: event.data.key || "o",
-            bubbles: true,
-            cancelable: true,
-          })
-        )
-      } else if (type === UNDO_FORWARD_TYPE) {
-        const isMac = MAC_REGEX.test(navigator.userAgent)
-        document.dispatchEvent(
-          new KeyboardEvent("keydown", {
-            key: "z",
-            metaKey: isMac,
-            ctrlKey: !isMac,
-            bubbles: true,
-            cancelable: true,
-          })
-        )
-      } else if (type === REDO_FORWARD_TYPE) {
-        const isMac = MAC_REGEX.test(navigator.userAgent)
-        document.dispatchEvent(
-          new KeyboardEvent("keydown", {
-            key: "z",
-            shiftKey: true,
-            metaKey: isMac,
-            ctrlKey: !isMac,
-            bubbles: true,
-            cancelable: true,
-          })
-        )
-      } else if (type === RESET_FORWARD_TYPE) {
-        document.dispatchEvent(
-          new KeyboardEvent("keydown", {
-            key: "R",
-            shiftKey: true,
-            bubbles: true,
-            cancelable: true,
-          })
-        )
-      } else if (type === DARK_MODE_FORWARD_TYPE) {
-        document.dispatchEvent(
-          new KeyboardEvent("keydown", {
-            key: event.data.key || "d",
-            bubbles: true,
-            cancelable: true,
-          })
-        )
-      }
-    }
-
     window.addEventListener("message", handleMessage)
     return () => {
       window.removeEventListener("message", handleMessage)

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

@@ -1,36 +1,26 @@
 "use client"
 
 import * as React from "react"
-import {
-  Copy01Icon,
-  Globe02Icon,
-  HandPointingRight04Icon,
-  Tick02Icon,
-} from "@hugeicons/core-free-icons"
+import { Copy01Icon, Globe02Icon, Tick02Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
 import { cn } from "@/lib/utils"
 import { useConfig } from "@/hooks/use-config"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
-import {
-  BASES,
-  buildThemeForPreset,
-  DEFAULT_CONFIG,
-  type BaseName,
-  type DesignSystemConfig,
-} from "@/registry/config"
+import { BASES, type BaseName } from "@/registry/config"
 import { Button } from "@/styles/base-nova/ui/button"
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogFooter,
   DialogHeader,
+  DialogTitle,
   DialogTrigger,
 } from "@/styles/base-nova/ui/dialog"
 import {
   Field,
   FieldContent,
-  FieldDescription,
   FieldGroup,
   FieldLabel,
   FieldLegend,
@@ -46,10 +36,6 @@ import {
   TabsList,
   TabsTrigger,
 } from "@/styles/base-nova/ui/tabs"
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/styles/base-nova/ui/toggle-group"
 import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
 import {
   useDesignSystemSearchParams,
@@ -70,54 +56,6 @@ const SHADCN_VERSION = process.env.NEXT_PUBLIC_RC ? "@rc" : "@latest"
 const PACKAGE_MANAGERS = ["pnpm", "npm", "yarn", "bun"] as const
 type PackageManager = (typeof PACKAGE_MANAGERS)[number]
 
-const APPLY_MODES = [
-  {
-    value: "full",
-    title: "Full preset",
-    description:
-      "Everything from the preset, including components, theme, and fonts.",
-    flag: null,
-    label: "full preset",
-  },
-  {
-    value: "theme",
-    title: "Theme only",
-    description:
-      "Theme tokens only, like colors, radii, and shadows. Components stay as they are.",
-    flag: "--only theme",
-    label: "--only theme",
-  },
-  {
-    value: "font",
-    title: "Fonts only",
-    description:
-      "Only preset fonts for body and headings. Components stay as they are.",
-    flag: "--only font",
-    label: "--only font",
-  },
-] as const
-type ApplyMode = (typeof APPLY_MODES)[number]["value"]
-type ProjectFormTab = "new-project" | "existing-project" | "theme"
-type CopyTarget = "command" | "apply" | "theme"
-type ThemeCssVars = NonNullable<
-  ReturnType<typeof buildThemeForPreset>["cssVars"]
->
-
-function formatCssVarsRule(selector: string, cssVars?: Record<string, string>) {
-  const declarations = Object.entries(cssVars ?? {})
-    .map(([key, value]) => `  --${key}: ${value};`)
-    .join("\n")
-
-  return `${selector} {\n${declarations}\n}`
-}
-
-function formatThemeCss(cssVars: ThemeCssVars) {
-  return [
-    formatCssVarsRule(":root", cssVars.light),
-    formatCssVarsRule(".dark", cssVars.dark),
-  ].join("\n\n")
-}
-
 export function ProjectForm({
   className,
 }: React.ComponentProps<typeof Button>) {
@@ -125,12 +63,7 @@ export function ProjectForm({
   const [params, setParams] = useDesignSystemSearchParams()
   const presetCode = usePresetCode()
   const [config, setConfig] = useConfig()
-  const [copiedTarget, setCopiedTarget] = React.useState<CopyTarget | null>(
-    null
-  )
-  const [applyMode, setApplyMode] = React.useState<ApplyMode>("full")
-  const [activeTab, setActiveTab] =
-    React.useState<ProjectFormTab>("new-project")
+  const [hasCopied, setHasCopied] = React.useState(false)
 
   const packageManager = (config.packageManager || "pnpm") as PackageManager
   const framework = React.useMemo(
@@ -152,8 +85,7 @@ export function ProjectForm({
     const templateFlag = ` --template ${framework}`
     const monorepoFlag = isMonorepo ? " --monorepo" : ""
     const rtlFlag = params.rtl ? " --rtl" : ""
-    const pointerFlag = params.pointer ? " --pointer" : ""
-    const flags = `${presetFlag}${baseFlag}${templateFlag}${monorepoFlag}${rtlFlag}${pointerFlag}`
+    const flags = `${presetFlag}${baseFlag}${templateFlag}${monorepoFlag}${rtlFlag}`
 
     return IS_LOCAL_DEV
       ? {
@@ -168,96 +100,16 @@ export function ProjectForm({
           yarn: `yarn dlx shadcn${SHADCN_VERSION} init${flags}`,
           bun: `bunx --bun shadcn${SHADCN_VERSION} init${flags}`,
         }
-  }, [
-    framework,
-    isMonorepo,
-    params.base,
-    params.pointer,
-    params.rtl,
-    presetCode,
-  ])
+  }, [framework, isMonorepo, params.base, params.rtl, presetCode])
 
   const command = commands[packageManager]
 
-  const applyCommands = React.useMemo(() => {
-    const presetFlag = ` --preset ${presetCode}`
-    const onlyFlag =
-      applyMode === "theme"
-        ? " --only theme"
-        : applyMode === "font"
-          ? " --only font"
-          : ""
-    const flags = `${presetFlag}${onlyFlag}`
-
-    return IS_LOCAL_DEV
-      ? {
-          pnpm: `shadcn apply${flags}`,
-          npm: `shadcn apply${flags}`,
-          yarn: `shadcn apply${flags}`,
-          bun: `shadcn apply${flags}`,
-        }
-      : {
-          pnpm: `pnpm dlx shadcn${SHADCN_VERSION} apply${flags}`,
-          npm: `npx shadcn${SHADCN_VERSION} apply${flags}`,
-          yarn: `yarn dlx shadcn${SHADCN_VERSION} apply${flags}`,
-          bun: `bunx --bun shadcn${SHADCN_VERSION} apply${flags}`,
-        }
-  }, [applyMode, presetCode])
-
-  const applyCommand = applyCommands[packageManager]
-  const themeConfig = React.useMemo<DesignSystemConfig>(() => {
-    const isRadiusLocked = params.style === "lyra" || params.style === "sera"
-
-    return {
-      ...DEFAULT_CONFIG,
-      base: params.base,
-      style: params.style,
-      baseColor: params.baseColor,
-      theme: params.theme,
-      chartColor: params.chartColor,
-      iconLibrary: params.iconLibrary,
-      font: params.font,
-      fontHeading: params.fontHeading,
-      menuAccent: params.menuAccent,
-      menuColor: params.menuColor,
-      radius: isRadiusLocked ? "none" : params.radius,
-      template: params.template,
-      rtl: params.rtl,
-      pointer: params.pointer,
-    }
-  }, [
-    params.base,
-    params.baseColor,
-    params.chartColor,
-    params.font,
-    params.fontHeading,
-    params.iconLibrary,
-    params.menuAccent,
-    params.menuColor,
-    params.pointer,
-    params.radius,
-    params.rtl,
-    params.style,
-    params.template,
-    params.theme,
-  ])
-
-  const themeCss = React.useMemo(() => {
-    const theme = buildThemeForPreset(themeConfig)
-
-    if (!theme.cssVars) {
-      return ""
-    }
-
-    return formatThemeCss(theme.cssVars)
-  }, [themeConfig])
-
   React.useEffect(() => {
-    if (copiedTarget) {
-      const timer = setTimeout(() => setCopiedTarget(null), 2000)
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
       return () => clearTimeout(timer)
     }
-  }, [copiedTarget])
+  }, [hasCopied])
 
   const handleCopy = React.useCallback(() => {
     const properties: Record<string, string> = {
@@ -270,316 +122,142 @@ export function ProjectForm({
       name: "copy_npm_command",
       properties,
     })
-    setCopiedTarget("command")
+    setHasCopied(true)
   }, [command, params.template])
 
-  const handleCopyApply = React.useCallback(() => {
-    copyToClipboardWithMeta(applyCommand, {
-      name: "copy_apply_command",
-      properties: {
-        command: applyCommand,
-        applyMode,
-      },
-    })
-    setCopiedTarget("apply")
-  }, [applyCommand, applyMode])
-
-  const handleCopyTheme = React.useCallback(() => {
-    copyToClipboardWithMeta(themeCss, {
-      name: "copy_theme_code",
-      properties: {
-        preset: presetCode,
-        baseColor: params.baseColor,
-        theme: params.theme,
-        format: "css",
-      },
-    })
-    setCopiedTarget("theme")
-  }, [params.baseColor, params.theme, presetCode, themeCss])
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger render={<Button className={cn(className)} />}>
-        Get Code
+        Create Project
       </DialogTrigger>
-      <DialogContent className="dark top-[64px] no-scrollbar flex max-h-[calc(100svh-2rem)] translate-y-0 flex-col rounded-2xl p-0 shadow-xl **:data-[slot=dialog-close]:top-4.5 **:data-[slot=dialog-close]:right-4 **:data-[slot=field-separator]:h-2 sm:max-w-md">
-        <div className="flex min-w-0 flex-1 flex-col gap-0 overflow-hidden rounded-2xl">
-          <DialogHeader className="border-b px-6 py-5">
-            <ToggleGroup
-              value={[activeTab]}
-              onValueChange={(values) =>
-                setActiveTab((values[0] as typeof activeTab) ?? "new-project")
-              }
-              aria-label="Project type"
-              spacing={2}
-              className="**:data-[slot=toggle-group-item]:data-pressed:bg-neutral-700/70"
-            >
-              <ToggleGroupItem value="new-project">New Project</ToggleGroupItem>
-              <ToggleGroupItem value="existing-project">
-                Existing Project
-              </ToggleGroupItem>
-              <ToggleGroupItem value="theme">Theme</ToggleGroupItem>
-            </ToggleGroup>
-          </DialogHeader>
-          {activeTab === "new-project" && (
-            <div className="no-scrollbar overflow-y-auto">
-              <FieldGroup className="px-6 py-4">
-                <Field className="gap-3">
-                  <FieldLabel>Template</FieldLabel>
-                  <TemplateGrid
-                    template={params.template}
-                    setParams={setParams}
+      <DialogContent className="dark no-scrollbar max-h-[calc(100svh-2rem)] overflow-y-auto rounded-2xl p-6 shadow-xl **:data-[slot=field-separator]:h-2 sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Create Project</DialogTitle>
+          <DialogDescription>
+            Pick a template and configure your project.
+          </DialogDescription>
+        </DialogHeader>
+        <div>
+          <FieldGroup>
+            <FieldSeparator className="-mx-6" />
+            <Field className="-mt-2 gap-3">
+              <FieldLabel>Template</FieldLabel>
+              <TemplateGrid template={params.template} setParams={setParams} />
+            </Field>
+            <FieldSeparator className="-mx-6" />
+            <Field className="-mt-2">
+              <FieldLabel>Base</FieldLabel>
+              <BaseGrid base={params.base} setParams={setParams} />
+            </Field>
+            <FieldSeparator className="-mx-6" />
+            <FieldSet>
+              <FieldLegend variant="label" className="sr-only">
+                Options
+              </FieldLegend>
+              <Field
+                orientation="horizontal"
+                data-disabled={hasMonorepo ? undefined : "true"}
+              >
+                <FieldLabel htmlFor="monorepo">
+                  <span
+                    className="size-4 text-neutral-100 [&_svg]:size-4 [&_svg]:fill-current"
+                    dangerouslySetInnerHTML={{
+                      __html: TURBOREPO_LOGO,
+                    }}
                   />
-                </Field>
-                <FieldSeparator className="-mx-6" />
-                <Field>
-                  <FieldLabel>Base</FieldLabel>
-                  <BaseGrid base={params.base} setParams={setParams} />
-                </Field>
-                <FieldSeparator className="-mx-6" />
-                <FieldSet>
-                  <FieldLegend variant="label" className="sr-only">
-                    Options
-                  </FieldLegend>
-                  <Field orientation="horizontal">
-                    <FieldLabel htmlFor="pointer">
-                      <HugeiconsIcon
-                        icon={HandPointingRight04Icon}
-                        className="size-4 -rotate-90"
-                      />
-                      Use pointer on buttons
-                    </FieldLabel>
-                    <Switch
-                      id="pointer"
-                      checked={params.pointer}
-                      onCheckedChange={(checked) =>
-                        setParams({ pointer: checked === true })
-                      }
-                    />
-                  </Field>
-                  <FieldSeparator className="-mx-6" />
-                  <Field
-                    orientation="horizontal"
-                    data-disabled={hasMonorepo ? undefined : "true"}
-                  >
-                    <FieldLabel htmlFor="monorepo">
-                      <span
-                        className="size-4 text-neutral-100 [&_svg]:size-4 [&_svg]:fill-current"
-                        dangerouslySetInnerHTML={{
-                          __html: TURBOREPO_LOGO,
-                        }}
-                      />
-                      Create a monorepo
-                    </FieldLabel>
-                    <Switch
-                      id="monorepo"
-                      checked={params.template?.endsWith("-monorepo") ?? false}
-                      disabled={!hasMonorepo}
-                      onCheckedChange={(checked) => {
-                        const framework = getFramework(
-                          params.template ?? "next"
-                        )
-                        setParams({
-                          template: getTemplateValue(
-                            framework,
-                            checked === true
-                          ) as typeof params.template,
-                        })
-                      }}
-                    />
-                  </Field>
-                  <FieldSeparator className="-mx-6" />
-                  <Field orientation="horizontal">
-                    <FieldLabel htmlFor="rtl">
-                      <HugeiconsIcon icon={Globe02Icon} className="size-4" />
-                      Enable RTL support
-                    </FieldLabel>
-                    <Switch
-                      id="rtl"
-                      checked={params.rtl}
-                      onCheckedChange={(checked) =>
-                        setParams({ rtl: checked === true })
-                      }
-                    />
-                  </Field>
-                </FieldSet>
-              </FieldGroup>
-              <DialogFooter className="m-0 min-w-0 p-6">
-                <div className="flex w-full min-w-0 flex-col gap-3">
-                  <Tabs
-                    value={packageManager}
-                    onValueChange={(value) => {
-                      setConfig((prev) => ({
-                        ...prev,
-                        packageManager: value as PackageManager,
-                      }))
-                    }}
-                    className="min-w-0 gap-0 overflow-hidden rounded-xl border-0 ring-1 ring-border"
-                  >
-                    <div className="flex items-center gap-2 py-1 pr-1.5 pl-1">
-                      <TabsList className="bg-transparent font-mono">
-                        {PACKAGE_MANAGERS.map((manager) => {
-                          return (
-                            <TabsTrigger
-                              key={manager}
-                              value={manager}
-                              className="py-0 leading-none data-[state=active]:shadow-none"
-                            >
-                              {manager}
-                            </TabsTrigger>
-                          )
-                        })}
-                      </TabsList>
-                      <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        className="ml-auto"
-                        onClick={handleCopy}
-                      >
-                        {copiedTarget === "command" ? (
-                          <HugeiconsIcon icon={Tick02Icon} />
-                        ) : (
-                          <HugeiconsIcon icon={Copy01Icon} />
-                        )}
-                        <span className="sr-only">Copy command</span>
-                      </Button>
-                    </div>
-                    {Object.entries(commands).map(([key, cmd]) => {
-                      return (
-                        <TabsContent key={key} value={key}>
-                          <div className="relative overflow-hidden border-t bg-popover p-3">
-                            <div className="no-scrollbar overflow-x-auto">
-                              <code className="font-mono text-sm whitespace-nowrap">
-                                {cmd}
-                              </code>
-                            </div>
-                          </div>
-                        </TabsContent>
-                      )
-                    })}
-                  </Tabs>
-                  <Button onClick={handleCopy} className="h-9 w-full">
-                    {copiedTarget === "command" ? "Copied" : "Copy Command"}
-                  </Button>
-                </div>
-              </DialogFooter>
-            </div>
-          )}
-          {activeTab === "existing-project" && (
-            <div className="no-scrollbar overflow-y-auto">
-              <FieldGroup className="px-6 py-4">
-                <FieldSet className="gap-3">
-                  <FieldLegend variant="label">Apply Preset</FieldLegend>
-                  <FieldDescription>
-                    Pick which parts of the preset to apply.
-                  </FieldDescription>
-                  <ApplyModeGrid mode={applyMode} setMode={setApplyMode} />
-                </FieldSet>
-              </FieldGroup>
-              <DialogFooter className="m-0 min-w-0 p-6">
-                <div className="flex w-full min-w-0 flex-col gap-3">
-                  <Tabs
-                    value={packageManager}
-                    onValueChange={(value) => {
-                      setConfig((prev) => ({
-                        ...prev,
-                        packageManager: value as PackageManager,
-                      }))
-                    }}
-                    className="min-w-0 gap-0 overflow-hidden rounded-xl border-0 ring-1 ring-border"
-                  >
-                    <div className="flex items-center gap-2 py-1 pr-1.5 pl-1">
-                      <TabsList className="bg-transparent font-mono">
-                        {PACKAGE_MANAGERS.map((manager) => {
-                          return (
-                            <TabsTrigger
-                              key={manager}
-                              value={manager}
-                              className="py-0 leading-none data-[state=active]:shadow-none"
-                            >
-                              {manager}
-                            </TabsTrigger>
-                          )
-                        })}
-                      </TabsList>
-                      <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        className="ml-auto"
-                        onClick={handleCopyApply}
-                      >
-                        {copiedTarget === "apply" ? (
-                          <HugeiconsIcon icon={Tick02Icon} />
-                        ) : (
-                          <HugeiconsIcon icon={Copy01Icon} />
-                        )}
-                        <span className="sr-only">Copy command</span>
-                      </Button>
-                    </div>
-                    {Object.entries(applyCommands).map(([key, cmd]) => {
-                      return (
-                        <TabsContent key={key} value={key}>
-                          <div className="relative overflow-hidden border-t bg-popover p-3">
-                            <div className="no-scrollbar overflow-x-auto">
-                              <code className="font-mono text-sm whitespace-nowrap">
-                                {cmd}
-                              </code>
-                            </div>
-                          </div>
-                        </TabsContent>
-                      )
-                    })}
-                  </Tabs>
-                  <Button onClick={handleCopyApply} className="h-9 w-full">
-                    {copiedTarget === "apply" ? "Copied" : "Copy Command"}
-                  </Button>
-                </div>
-              </DialogFooter>
-            </div>
-          )}
-          {activeTab === "theme" && (
-            <div className="no-scrollbar overflow-y-auto">
-              <FieldGroup className="min-w-0 px-6 py-4">
-                <FieldSet className="min-w-0 gap-3">
-                  <FieldLegend variant="label">Theme Tokens</FieldLegend>
-                  <FieldDescription>
-                    Copy the CSS variables for this preset.
-                  </FieldDescription>
-                  <div className="w-full min-w-0 overflow-hidden rounded-xl border-0 ring-1 ring-border">
-                    <div className="flex items-center gap-2 py-1 pr-1.5 pl-3">
-                      <div className="min-w-0 truncate font-mono text-sm text-muted-foreground">
-                        globals.css
-                      </div>
-                      <Button
-                        size="icon-sm"
-                        variant="ghost"
-                        className="ml-auto"
-                        onClick={handleCopyTheme}
-                      >
-                        {copiedTarget === "theme" ? (
-                          <HugeiconsIcon icon={Tick02Icon} />
-                        ) : (
-                          <HugeiconsIcon icon={Copy01Icon} />
-                        )}
-                        <span className="sr-only">Copy theme</span>
-                      </Button>
-                    </div>
-                    <div className="relative no-scrollbar max-h-[45svh] overflow-auto border-t bg-popover p-3">
-                      <pre className="min-w-max font-mono leading-normal whitespace-pre">
-                        <code>{themeCss}</code>
-                      </pre>
-                    </div>
-                  </div>
-                </FieldSet>
-              </FieldGroup>
-              <DialogFooter className="m-0 min-w-0 p-6">
-                <Button onClick={handleCopyTheme} className="h-9 w-full">
-                  {copiedTarget === "theme" ? "Copied" : "Copy Theme"}
-                </Button>
-              </DialogFooter>
-            </div>
-          )}
+                  Create a monorepo
+                </FieldLabel>
+                <Switch
+                  id="monorepo"
+                  checked={params.template?.endsWith("-monorepo") ?? false}
+                  disabled={!hasMonorepo}
+                  onCheckedChange={(checked) => {
+                    const framework = getFramework(params.template ?? "next")
+                    setParams({
+                      template: getTemplateValue(
+                        framework,
+                        checked === true
+                      ) as typeof params.template,
+                    })
+                  }}
+                />
+              </Field>
+              <FieldSeparator className="-mx-6" />
+              <Field orientation="horizontal">
+                <FieldLabel htmlFor="rtl">
+                  <HugeiconsIcon icon={Globe02Icon} className="size-4" />
+                  Enable RTL support
+                </FieldLabel>
+                <Switch
+                  id="rtl"
+                  checked={params.rtl}
+                  onCheckedChange={(checked) =>
+                    setParams({ rtl: checked === true })
+                  }
+                />
+              </Field>
+            </FieldSet>
+          </FieldGroup>
         </div>
+        <DialogFooter className="-mx-6 -mb-6 min-w-0">
+          <div className="flex w-full min-w-0 flex-col gap-3">
+            <Tabs
+              value={packageManager}
+              onValueChange={(value) => {
+                setConfig((prev) => ({
+                  ...prev,
+                  packageManager: value as PackageManager,
+                }))
+              }}
+              className="min-w-0 gap-0 overflow-hidden rounded-xl border-0 ring-1 ring-border"
+            >
+              <div className="flex items-center gap-2 py-1 pr-1.5 pl-1">
+                <TabsList className="bg-transparent font-mono">
+                  {PACKAGE_MANAGERS.map((manager) => {
+                    return (
+                      <TabsTrigger
+                        key={manager}
+                        value={manager}
+                        className="py-0 leading-none data-[state=active]:shadow-none"
+                      >
+                        {manager}
+                      </TabsTrigger>
+                    )
+                  })}
+                </TabsList>
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  className="ml-auto"
+                  onClick={handleCopy}
+                >
+                  {hasCopied ? (
+                    <HugeiconsIcon icon={Tick02Icon} />
+                  ) : (
+                    <HugeiconsIcon icon={Copy01Icon} />
+                  )}
+                  <span className="sr-only">Copy command</span>
+                </Button>
+              </div>
+              {Object.entries(commands).map(([key, cmd]) => {
+                return (
+                  <TabsContent key={key} value={key}>
+                    <div className="relative overflow-hidden border-t bg-popover p-3">
+                      <div className="no-scrollbar overflow-x-auto">
+                        <code className="font-mono text-sm whitespace-nowrap">
+                          {cmd}
+                        </code>
+                      </div>
+                    </div>
+                  </TabsContent>
+                )
+              })}
+            </Tabs>
+            <Button onClick={handleCopy} className="h-9 w-full">
+              {hasCopied ? "Copied" : "Copy Command"}
+            </Button>
+          </div>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   )
@@ -644,34 +322,6 @@ const TemplateGrid = React.memo(function TemplateGrid({
   )
 })
 
-const ApplyModeGrid = React.memo(function ApplyModeGrid({
-  mode,
-  setMode,
-}: {
-  mode: ApplyMode
-  setMode: (mode: ApplyMode) => void
-}) {
-  return (
-    <RadioGroup
-      value={mode}
-      onValueChange={(value) => setMode(value as ApplyMode)}
-      aria-label="Apply"
-    >
-      {APPLY_MODES.map((option) => (
-        <FieldLabel key={option.value} htmlFor={`apply-${option.value}`}>
-          <Field orientation="horizontal">
-            <RadioGroupItem value={option.value} id={`apply-${option.value}`} />
-            <FieldContent>
-              <FieldTitle>{option.title}</FieldTitle>
-              <FieldDescription>{option.description}</FieldDescription>
-            </FieldContent>
-          </Field>
-        </FieldLabel>
-      ))}
-    </RadioGroup>
-  )
-})
-
 const BaseGrid = React.memo(function BaseGrid({
   base,
   setParams,

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

@@ -23,7 +23,7 @@ export function RadiusPicker({
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
   const [params, setParams] = useDesignSystemSearchParams()
-  const isRadiusLocked = params.style === "lyra" || params.style === "sera"
+  const isRadiusLocked = params.style === "lyra"
   const selectedRadiusName = isRadiusLocked ? "none" : params.radius
 
   const currentRadius = RADII.find(

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

@@ -28,7 +28,7 @@ export function RandomButton({
       )}
       {...props}
     >
-      <span className="w-full truncate text-center font-medium">Shuffle</span>
+      <span className="w-full text-center font-medium">Shuffle</span>
     </Button>
   )
 }

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

@@ -16,17 +16,8 @@ export function ShareButton() {
 
   const shareUrl = React.useMemo(() => {
     const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"
-    const searchParams = new URLSearchParams({
-      preset: presetCode,
-      item: params.item,
-    })
-
-    if (params.pointer) {
-      searchParams.set("pointer", "true")
-    }
-
-    return `${origin}/create?${searchParams.toString()}`
-  }, [params.item, params.pointer, presetCode])
+    return `${origin}/create?preset=${presetCode}&item=${params.item}`
+  }, [presetCode, params.item])
 
   React.useEffect(() => {
     if (hasCopied) {

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

@@ -1,81 +0,0 @@
-"use client"
-
-import * as React from "react"
-import useSWR from "swr"
-
-const OPEN_PRESET_KEY = "create:open-preset-open"
-export const OPEN_PRESET_FORWARD_TYPE = "open-preset-forward"
-
-function isEditableTarget(target: EventTarget | null) {
-  return (
-    (target instanceof HTMLElement && target.isContentEditable) ||
-    target instanceof HTMLInputElement ||
-    target instanceof HTMLTextAreaElement ||
-    target instanceof HTMLSelectElement
-  )
-}
-
-export function useOpenPreset() {
-  const { data: open = false, mutate: setOpenData } = useSWR<boolean>(
-    OPEN_PRESET_KEY,
-    {
-      fallbackData: false,
-      revalidateOnFocus: false,
-      revalidateIfStale: false,
-      revalidateOnReconnect: false,
-    }
-  )
-
-  const handleOpenChange = React.useCallback(
-    (nextOpen: boolean) => {
-      void setOpenData(nextOpen, { revalidate: false })
-    },
-    [setOpenData]
-  )
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (
-        e.key === "o" &&
-        !e.shiftKey &&
-        !e.metaKey &&
-        !e.ctrlKey &&
-        !e.altKey
-      ) {
-        if (isEditableTarget(e.target)) {
-          return
-        }
-
-        e.preventDefault()
-        void setOpenData(true, { revalidate: false })
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => {
-      document.removeEventListener("keydown", down)
-    }
-  }, [setOpenData])
-
-  return {
-    open,
-    setOpen: handleOpenChange,
-  }
-}
-
-export function useOpenPresetTrigger() {
-  const { mutate: setOpenData } = useSWR<boolean>(OPEN_PRESET_KEY, {
-    fallbackData: false,
-    revalidateOnFocus: false,
-    revalidateIfStale: false,
-    revalidateOnReconnect: false,
-  })
-
-  const openPreset = React.useCallback(() => {
-    void setOpenData(true, { revalidate: false })
-  }, [setOpenData])
-
-  return {
-    openPreset,
-  }
-}

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

@@ -1,12 +1,10 @@
 import {
   DM_Sans,
-  EB_Garamond,
   Figtree,
   Geist,
   Geist_Mono,
   IBM_Plex_Sans,
   Instrument_Sans,
-  Instrument_Serif,
   Inter,
   JetBrains_Mono,
   Lora,
@@ -151,17 +149,6 @@ const playfairDisplay = Playfair_Display({
   variable: "--font-playfair-display",
 })
 
-const ebGaramond = EB_Garamond({
-  subsets: ["latin"],
-  variable: "--font-eb-garamond",
-})
-
-const instrumentSerif = Instrument_Serif({
-  subsets: ["latin"],
-  weight: "400",
-  variable: "--font-instrument-serif",
-})
-
 const PREVIEW_FONTS = {
   geist: geistSans,
   inter,
@@ -187,8 +174,6 @@ const PREVIEW_FONTS = {
   merriweather,
   lora,
   "playfair-display": playfairDisplay,
-  "eb-garamond": ebGaramond,
-  "instrument-serif": instrumentSerif,
 } satisfies Record<FontName, PreviewFont>
 
 function createFontOption(name: FontName) {
@@ -231,8 +216,6 @@ export const FONTS = [
   createFontOption("merriweather"),
   createFontOption("lora"),
   createFontOption("playfair-display"),
-  createFontOption("eb-garamond"),
-  createFontOption("instrument-serif"),
 ] as const
 
 export type Font = (typeof FONTS)[number]

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

@@ -1,17 +0,0 @@
-import { describe, expect, it } from "vitest"
-
-import { parsePresetInput } from "./parse-preset-input"
-
-describe("parsePresetInput", () => {
-  it("accepts a raw preset code", () => {
-    expect(parsePresetInput("b0")).toBe("b0")
-  })
-
-  it("accepts a --preset flag", () => {
-    expect(parsePresetInput(" --preset b0 ")).toBe("b0")
-  })
-
-  it("rejects invalid preset input", () => {
-    expect(parsePresetInput("open sesame")).toBeNull()
-  })
-})

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

@@ -1,15 +0,0 @@
-import { isPresetCode } from "shadcn/preset"
-
-const PRESET_FLAG_PATTERN = /^--preset\b\s+(.+)$/i
-
-export function parsePresetInput(value: string) {
-  const input = value.trim()
-
-  if (!input) {
-    return null
-  }
-
-  const preset = input.match(PRESET_FLAG_PATTERN)?.[1]?.trim() ?? input
-
-  return isPresetCode(preset) ? preset : null
-}

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

@@ -91,7 +91,6 @@ const designSystemSearchParams = {
     "laravel",
   ] as const).withDefault("next"),
   rtl: parseAsBoolean.withDefault(false),
-  pointer: parseAsBoolean.withDefault(false),
   size: parseAsInteger.withDefault(100),
   custom: parseAsBoolean.withDefault(false),
 }
@@ -127,7 +126,6 @@ const NON_DESIGN_SYSTEM_KEYS = [
   "preset",
   "template",
   "rtl",
-  "pointer",
   "size",
   "custom",
 ] as const
@@ -226,7 +224,6 @@ function resolvePresetParams(
         preset: rawParams.preset,
         template: rawParams.template,
         rtl: rawParams.rtl,
-        pointer: rawParams.pointer,
         size: rawParams.size,
         custom: rawParams.custom,
       })

apps/v4/app/(app)/docs/[[...slug]]/page.tsx

@@ -4,7 +4,6 @@ import { mdxComponents } from "@/mdx-components"
 import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"
 import { findNeighbour } from "fumadocs-core/page-tree"
 
-import { replaceComponentsList } from "@/lib/llm"
 import { source } from "@/lib/source"
 import { absoluteUrl } from "@/lib/utils"
 import { DocsBaseSwitcher } from "@/components/docs-base-switcher"
@@ -84,7 +83,7 @@ export default async function Page(props: {
   const neighbours = isChangelog
     ? { previous: null, next: null }
     : findNeighbour(source.pageTree, page.url)
-  const raw = replaceComponentsList(await page.data.getText("raw"))
+  const raw = await page.data.getText("raw")
 
   return (
     <div

apps/v4/app/(app)/docs/changelog/page.tsx

@@ -10,7 +10,7 @@ import { Button } from "@/styles/radix-nova/ui/button"
 export const revalidate = false
 export const dynamic = "force-static"
 
-const NUMBER_OF_LATEST_PAGES = 5
+const NUMBER_OF_LATEST_PAGES = 2
 
 export function generateMetadata() {
   return {

apps/v4/app/(app)/llm/[[...slug]]/route.ts

@@ -6,8 +6,6 @@ import { source } from "@/lib/source"
 import { getActiveStyle, type Style } from "@/registry/_legacy-styles"
 
 export const revalidate = false
-export const dynamic = "force-static"
-export const dynamicParams = true
 
 function getStyleFromSlug(slug: string[] | undefined, fallbackStyle: string) {
   // Detect base from URL: /docs/components/base/... or /docs/components/radix/...
@@ -49,5 +47,5 @@ export async function GET(
 }
 
 export function generateStaticParams() {
-  return []
+  return source.generateParams()
 }

apps/v4/app/(create)/init/parse-config.test.ts

@@ -3,51 +3,6 @@ import { describe, expect, it } from "vitest"
 import { parseDesignSystemConfig } from "./parse-config"
 
 describe("parseDesignSystemConfig", () => {
-  it("defaults pointer to false when omitted", () => {
-    const result = parseDesignSystemConfig(
-      new URLSearchParams(
-        "base=base&style=sera&baseColor=taupe&theme=taupe&iconLibrary=lucide&font=noto-sans&rtl=false&menuAccent=subtle&menuColor=default&radius=default&fontHeading=playfair-display&template=vite&track=1"
-      )
-    )
-
-    expect(result.success).toBe(true)
-    if (!result.success) {
-      throw new Error(result.error)
-    }
-
-    expect(result.data.pointer).toBe(false)
-  })
-
-  it("parses pointer=true", () => {
-    const result = parseDesignSystemConfig(
-      new URLSearchParams(
-        "base=base&style=sera&baseColor=taupe&theme=taupe&iconLibrary=lucide&font=noto-sans&rtl=false&pointer=true&menuAccent=subtle&menuColor=default&radius=default&fontHeading=playfair-display&template=vite&track=1"
-      )
-    )
-
-    expect(result.success).toBe(true)
-    if (!result.success) {
-      throw new Error(result.error)
-    }
-
-    expect(result.data.pointer).toBe(true)
-  })
-
-  it("defaults missing chartColor from the selected theme", () => {
-    const result = parseDesignSystemConfig(
-      new URLSearchParams(
-        "base=base&style=sera&baseColor=taupe&theme=taupe&iconLibrary=lucide&font=noto-sans&rtl=false&menuAccent=subtle&menuColor=default&radius=default&fontHeading=playfair-display&template=vite&track=1"
-      )
-    )
-
-    expect(result.success).toBe(true)
-    if (!result.success) {
-      throw new Error(result.error)
-    }
-
-    expect(result.data.chartColor).toBe("taupe")
-  })
-
   it("honors explicit fontHeading and chartColor overrides when a preset is present", () => {
     const result = parseDesignSystemConfig(
       new URLSearchParams(
@@ -63,17 +18,4 @@ describe("parseDesignSystemConfig", () => {
     expect(result.data.fontHeading).toBe("playfair-display")
     expect(result.data.chartColor).toBe("emerald")
   })
-
-  it("keeps pointer outside preset decoding", () => {
-    const result = parseDesignSystemConfig(
-      new URLSearchParams("preset=a0&pointer=true")
-    )
-
-    expect(result.success).toBe(true)
-    if (!result.success) {
-      throw new Error(result.error)
-    }
-
-    expect(result.data.pointer).toBe(true)
-  })
 })

apps/v4/app/(create)/init/parse-config.ts

@@ -23,7 +23,6 @@ export function parseDesignSystemConfig(searchParams: URLSearchParams) {
       base: searchParams.get("base") ?? "radix",
       template: searchParams.get("template") ?? undefined,
       rtl: searchParams.get("rtl") === "true",
-      pointer: searchParams.get("pointer") === "true",
     }
   } else {
     configInput = {
@@ -40,7 +39,6 @@ export function parseDesignSystemConfig(searchParams: URLSearchParams) {
       radius: searchParams.get("radius"),
       template: searchParams.get("template") ?? undefined,
       rtl: searchParams.get("rtl") === "true",
-      pointer: searchParams.get("pointer") === "true",
     }
   }
 

apps/v4/app/(create)/init/route.test.ts

@@ -1,74 +0,0 @@
-import { describe, expect, it } from "vitest"
-
-import {
-  buildRegistryBase,
-  DEFAULT_CONFIG,
-  POINTER_CURSOR_SELECTOR,
-} from "@/registry/config"
-
-import { GET } from "./route"
-
-function createRequest(search = "") {
-  const searchParams = new URLSearchParams(
-    Object.entries(DEFAULT_CONFIG).map(([key, value]) => [key, String(value)])
-  )
-  const url = new URL(`http://localhost:4000/init${search}`)
-
-  for (const [key, value] of url.searchParams) {
-    searchParams.set(key, value)
-  }
-
-  return {
-    nextUrl: new URL(`http://localhost:4000/init?${searchParams}`),
-  } as Parameters<typeof GET>[0]
-}
-
-describe("GET /init", () => {
-  it("returns the full registry base when only is omitted", async () => {
-    const response = await GET(createRequest())
-    const json = await response.json()
-
-    expect(response.status).toBe(200)
-    expect(json).toEqual(buildRegistryBase(DEFAULT_CONFIG))
-    expect(json.css["@layer base"][POINTER_CURSOR_SELECTOR]).toBeUndefined()
-  })
-
-  it("returns pointer cursor css when pointer is enabled", async () => {
-    const response = await GET(createRequest("?pointer=true"))
-    const json = await response.json()
-
-    expect(response.status).toBe(200)
-    expect(json.css["@layer base"][POINTER_CURSOR_SELECTOR]).toEqual({
-      cursor: "pointer",
-    })
-  })
-
-  it("returns a sparse registry base when only is provided", async () => {
-    const response = await GET(createRequest("?only=theme"))
-    const json = await response.json()
-
-    expect(response.status).toBe(200)
-    expect(json.type).toBe("registry:base")
-    expect(json.config).toEqual({
-      menuColor: "default",
-      menuAccent: "subtle",
-      tailwind: {
-        baseColor: "neutral",
-      },
-    })
-    expect(json.cssVars.light).toBeDefined()
-    expect(json.cssVars.light.radius).toBe("0.625rem")
-    expect(json.dependencies).toBeUndefined()
-    expect(json.registryDependencies).toBeUndefined()
-  })
-
-  it("rejects unsupported only values", async () => {
-    const response = await GET(createRequest("?only=icon"))
-    const json = await response.json()
-
-    expect(response.status).toBe(400)
-    expect(json.error).toBe(
-      "Invalid only value. Use one or more of: theme, font"
-    )
-  })
-})

apps/v4/app/(create)/init/route.ts

@@ -3,11 +3,7 @@ import { track } from "@vercel/analytics/server"
 import { isPresetCode } from "shadcn/preset"
 import { registryItemSchema } from "shadcn/schema"
 
-import {
-  buildPartialRegistryBase,
-  buildRegistryBase,
-  parseRegistryBaseParts,
-} from "@/registry/config"
+import { buildRegistryBase } from "@/registry/config"
 import { getPresetCode } from "@/app/(app)/create/lib/preset-code"
 import { parseDesignSystemConfig } from "@/app/(create)/init/parse-config"
 
@@ -20,20 +16,13 @@ export async function GET(request: NextRequest) {
       return NextResponse.json({ error: result.error }, { status: 400 })
     }
 
-    const onlyResult = parseRegistryBaseParts(searchParams.get("only"))
-    if (!onlyResult.success) {
-      return NextResponse.json({ error: onlyResult.error }, { status: 400 })
-    }
-
     const rawPreset = searchParams.get("preset")
     const presetCode =
       rawPreset && isPresetCode(rawPreset)
         ? rawPreset
         : getPresetCode(result.data)
 
-    const registryBase = onlyResult.parts
-      ? buildPartialRegistryBase(result.data, onlyResult.parts)
-      : buildRegistryBase(result.data)
+    const registryBase = buildRegistryBase(result.data)
     const parseResult = registryItemSchema.safeParse(registryBase)
 
     if (!parseResult.success) {

apps/v4/app/(create)/preview/[base]/[name]/page.tsx

@@ -5,21 +5,22 @@ import { notFound } from "next/navigation"
 import { siteConfig } from "@/lib/config"
 import { absoluteUrl } from "@/lib/utils"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
-import { BASES, type Base } from "@/registry/config"
+import { BASES, type Base, type BaseName } from "@/registry/config"
 import { ActionMenuScript } from "@/app/(app)/create/components/action-menu"
 import { DesignSystemProvider } from "@/app/(app)/create/components/design-system-provider"
 import { HistoryScript } from "@/app/(app)/create/components/history-buttons"
 import { DarkModeScript } from "@/app/(app)/create/components/mode-switcher"
-import { OpenPresetScript } from "@/app/(app)/create/components/open-preset"
 import { PreviewStyle } from "@/app/(app)/create/components/preview-style"
 import { RandomizeScript } from "@/app/(app)/create/components/random-button"
-import { getBaseComponent, getBaseItem } from "@/app/(app)/create/lib/api"
+import {
+  getBaseComponent,
+  getBaseItem,
+  getItemsForBase,
+} from "@/app/(app)/create/lib/api"
 
 export const revalidate = false
 export const dynamic = "force-static"
-export const dynamicParams = true
-
-const STATIC_PREVIEW_ITEMS = ["preview", "preview-02"] as const
+export const dynamicParams = false
 
 function PreventScrollOnFocusScript() {
   return (
@@ -94,12 +95,19 @@ export async function generateMetadata({
 }
 
 export async function generateStaticParams() {
-  return BASES.flatMap((base) =>
-    STATIC_PREVIEW_ITEMS.map((name) => ({
-      base: base.name,
-      name,
-    }))
-  )
+  const params: Array<{ base: string; name: string }> = []
+
+  for (const base of BASES) {
+    const items = await getItemsForBase(base.name as BaseName)
+    for (const item of items) {
+      params.push({
+        base: base.name,
+        name: item.name,
+      })
+    }
+  }
+
+  return params
 }
 
 export default async function BlockPage({
@@ -131,7 +139,6 @@ export default async function BlockPage({
       <PreventScrollOnFocusScript />
       <PreviewStyle />
       <ActionMenuScript />
-      <OpenPresetScript />
       <RandomizeScript />
       <HistoryScript />
       <DarkModeScript />

apps/v4/app/globals.css

@@ -9,7 +9,6 @@
 @import "../registry/styles/style-maia.css" layer(base);
 @import "../registry/styles/style-mira.css" layer(base);
 @import "../registry/styles/style-luma.css" layer(base);
-@import "../registry/styles/style-sera.css" layer(base);
 
 @custom-variant style-vega (&:where(.style-vega *));
 @custom-variant style-nova (&:where(.style-nova *));
@@ -17,7 +16,6 @@
 @custom-variant style-maia (&:where(.style-maia *));
 @custom-variant style-mira (&:where(.style-mira *));
 @custom-variant style-luma (&:where(.style-luma *));
-@custom-variant style-sera (&:where(.style-sera *));
 
 @custom-variant dark (&:is(.dark *));
 @custom-variant fixed (&:is(.layout-fixed *));

apps/v4/components/announcement.tsx

@@ -7,7 +7,7 @@ export function Announcement() {
   return (
     <Badge asChild variant="secondary" className="bg-muted">
       <Link href="/docs/changelog">
-        New preset commands <ArrowRightIcon />
+        Introducing Luma <ArrowRightIcon />
       </Link>
     </Badge>
   )

apps/v4/components/directory-add-button.tsx

@@ -6,7 +6,7 @@ import { IconCheck, IconCopy, IconPlus } from "@tabler/icons-react"
 import { useConfig } from "@/hooks/use-config"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
-import { Button } from "@/styles/base-nova/ui/button"
+import { Button } from "@/registry/new-york-v4/ui/button"
 import {
   Dialog,
   DialogClose,
@@ -15,7 +15,8 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/styles/base-nova/ui/dialog"
+  DialogTrigger,
+} from "@/registry/new-york-v4/ui/dialog"
 import {
   Drawer,
   DrawerClose,
@@ -24,74 +25,42 @@ import {
   DrawerFooter,
   DrawerHeader,
   DrawerTitle,
-} from "@/styles/base-nova/ui/drawer"
+  DrawerTrigger,
+} from "@/registry/new-york-v4/ui/drawer"
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@/styles/base-nova/ui/tabs"
+} from "@/registry/new-york-v4/ui/tabs"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/styles/base-nova/ui/tooltip"
-
-const DirectoryAddContext = React.createContext<{
-  open: (registry: { name: string }) => void
-}>({
-  open: () => {},
-})
-
-export function useDirectoryAdd() {
-  return React.useContext(DirectoryAddContext)
-}
+} from "@/registry/new-york-v4/ui/tooltip"
 
 export function DirectoryAddButton({
   registry,
 }: {
   registry: { name: string }
-}) {
-  const { open } = useDirectoryAdd()
-
-  return (
-    <Button
-      size="sm"
-      variant="outline"
-      className="relative z-10"
-      onClick={() => open(registry)}
-    >
-      Add <IconPlus />
-    </Button>
-  )
-}
-
-export function DirectoryAddProvider({
-  children,
-}: {
-  children: React.ReactNode
 }) {
   const [config, setConfig] = useConfig()
   const [hasCopied, setHasCopied] = React.useState(false)
-  const [isOpen, setIsOpen] = React.useState(false)
-  const [selectedRegistry, setSelectedRegistry] = React.useState<{
-    name: string
-  } | null>(null)
+  const [open, setOpen] = React.useState(false)
   const isMobile = useIsMobile()
 
   const packageManager = config.packageManager || "pnpm"
 
   const commands = React.useMemo(() => {
-    if (!selectedRegistry) return null
     return {
-      pnpm: `pnpm dlx shadcn@latest registry add ${selectedRegistry.name}`,
-      npm: `npx shadcn@latest registry add ${selectedRegistry.name}`,
-      yarn: `yarn dlx shadcn@latest registry add ${selectedRegistry.name}`,
-      bun: `bunx --bun shadcn@latest registry add ${selectedRegistry.name}`,
+      pnpm: `pnpm dlx shadcn@latest registry add ${registry.name}`,
+      npm: `npx shadcn@latest registry add ${registry.name}`,
+      yarn: `yarn dlx shadcn@latest registry add ${registry.name}`,
+      bun: `bunx --bun shadcn@latest registry add ${registry.name}`,
     }
-  }, [selectedRegistry])
+  }, [registry.name])
 
-  const command = commands?.[packageManager] ?? ""
+  const command = commands[packageManager]
 
   React.useEffect(() => {
     if (hasCopied) {
@@ -105,23 +74,19 @@ export function DirectoryAddProvider({
       name: "copy_registry_add_command",
       properties: {
         command,
-        registry: selectedRegistry?.name ?? "",
+        registry: registry.name,
       },
     })
     setHasCopied(true)
-  }, [command, selectedRegistry?.name])
+  }, [command, registry.name])
 
-  const contextValue = React.useMemo(
-    () => ({
-      open: (registry: { name: string }) => {
-        setSelectedRegistry(registry)
-        setIsOpen(true)
-      },
-    }),
-    []
+  const Trigger = (
+    <Button size="sm" variant="outline" className="relative z-10">
+      Add <IconPlus />
+    </Button>
   )
 
-  const Content = commands ? (
+  const Content = (
     <Tabs
       value={packageManager}
       onValueChange={(value) => {
@@ -130,28 +95,30 @@ export function DirectoryAddProvider({
           packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
         })
       }}
-      className="gap-0 overflow-hidden rounded-xl border"
+      className="gap-0 overflow-hidden rounded-lg border"
     >
-      <div className="flex items-center gap-2 border-b p-1.5">
-        <TabsList className="h-auto *:data-[slot=tabs-trigger]:pt-0">
+      <div className="flex items-center gap-2 border-b p-2">
+        <TabsList className="h-auto rounded-none bg-transparent p-0 font-mono *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none! *:data-[slot=tabs-trigger]:data-[state=active]:border-input">
           <TabsTrigger value="pnpm">pnpm</TabsTrigger>
           <TabsTrigger value="npm">npm</TabsTrigger>
           <TabsTrigger value="yarn">yarn</TabsTrigger>
           <TabsTrigger value="bun">bun</TabsTrigger>
         </TabsList>
         <Tooltip>
-          <TooltipTrigger
-            render={
-              <Button
-                size="icon-sm"
-                variant="ghost"
-                className="ml-auto"
-                onClick={handleCopy}
-              />
-            }
-          >
-            {hasCopied ? <IconCheck /> : <IconCopy />}
-            <span className="sr-only">Copy command</span>
+          <TooltipTrigger asChild>
+            <Button
+              size="icon-sm"
+              variant="ghost"
+              className="ml-auto size-7 rounded-lg"
+              onClick={handleCopy}
+            >
+              {hasCopied ? (
+                <IconCheck className="size-4" />
+              ) : (
+                <IconCopy className="size-4" />
+              )}
+              <span className="sr-only">Copy command</span>
+            </Button>
           </TooltipTrigger>
           <TooltipContent>
             {hasCopied ? "Copied!" : "Copy command"}
@@ -168,48 +135,47 @@ export function DirectoryAddProvider({
         </TabsContent>
       ))}
     </Tabs>
-  ) : null
+  )
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>{Trigger}</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Add Registry</DrawerTitle>
+            <DrawerDescription>
+              Run this command to add {registry.name} to your project.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="px-4">{Content}</div>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button size="sm">Done</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    )
+  }
 
   return (
-    <DirectoryAddContext value={contextValue}>
-      {children}
-      {isMobile ? (
-        <Drawer open={isOpen} onOpenChange={setIsOpen}>
-          <DrawerContent>
-            <DrawerHeader>
-              <DrawerTitle>Add Registry</DrawerTitle>
-              <DrawerDescription>
-                Run this command to add {selectedRegistry?.name} to your
-                project.
-              </DrawerDescription>
-            </DrawerHeader>
-            <div className="px-4">{Content}</div>
-            <DrawerFooter>
-              <DrawerClose asChild>
-                <Button size="sm">Done</Button>
-              </DrawerClose>
-            </DrawerFooter>
-          </DrawerContent>
-        </Drawer>
-      ) : (
-        <Dialog open={isOpen} onOpenChange={setIsOpen}>
-          <DialogContent className="animate-none! sm:max-w-md">
-            <DialogHeader>
-              <DialogTitle>Add Registry</DialogTitle>
-              <DialogDescription>
-                Run this command to add {selectedRegistry?.name} to your
-                project.
-              </DialogDescription>
-            </DialogHeader>
-            {Content}
-            <DialogFooter>
-              <DialogClose render={<Button size="sm" variant="outline" />}>
-                Done
-              </DialogClose>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      )}
-    </DirectoryAddContext>
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>{Trigger}</DialogTrigger>
+      <DialogContent className="dialog-ring animate-none! rounded-xl sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Add Registry</DialogTitle>
+          <DialogDescription>
+            Run this command to add {registry.name} to your project.
+          </DialogDescription>
+        </DialogHeader>
+        {Content}
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button size="sm">Done</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   )
 }

apps/v4/components/directory-list.tsx

@@ -1,20 +1,12 @@
 "use client"
 
 import * as React from "react"
-import { usePathname } from "next/navigation"
-import {
-  IconArrowUpRight,
-  IconChevronLeft,
-  IconChevronRight,
-} from "@tabler/icons-react"
+import { IconArrowUpRight } from "@tabler/icons-react"
 
-import { cn } from "@/lib/utils"
 import { useSearchRegistry } from "@/hooks/use-search-registry"
-import {
-  DirectoryAddButton,
-  DirectoryAddProvider,
-} from "@/components/directory-add-button"
-import { Button, buttonVariants } from "@/styles/base-nova/ui/button"
+import { DirectoryAddButton } from "@/components/directory-add-button"
+import globalRegistries from "@/registry/directory.json"
+import { Button } from "@/registry/new-york-v4/ui/button"
 import {
   Item,
   ItemActions,
@@ -25,16 +17,9 @@ import {
   ItemMedia,
   ItemSeparator,
   ItemTitle,
-} from "@/styles/base-nova/ui/item"
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-} from "@/styles/base-nova/ui/pagination"
-import { Skeleton } from "@/styles/base-nova/ui/skeleton"
+} from "@/registry/new-york-v4/ui/item"
 
-import { SearchDirectory } from "./directory-search"
+import { SearchDirectory } from "./search-directory"
 
 function getHomepageUrl(homepage: string) {
   const url = new URL(homepage)
@@ -44,308 +29,55 @@ function getHomepageUrl(homepage: string) {
   return url.toString()
 }
 
-function getPageHref(pathname: string, query: string, page: number) {
-  const searchParams = new URLSearchParams()
-
-  if (query) {
-    searchParams.set("q", query)
-  }
-
-  if (page > 1) {
-    searchParams.set("page", page.toString())
-  }
-
-  const search = searchParams.toString()
-
-  return search ? `${pathname}?${search}` : pathname
-}
-
-function getPageNumbers(current: number, total: number) {
-  if (total <= 7) {
-    return Array.from({ length: total }, (_, i) => i + 1) as (
-      | number
-      | "ellipsis"
-    )[]
-  }
-
-  const pages: (number | "ellipsis")[] = [1]
-
-  // Show ellipsis or page 2 directly if only one number would be hidden.
-  if (current > 4) {
-    pages.push("ellipsis")
-  } else if (current >= 4) {
-    pages.push(2)
-  }
-
-  const start = Math.max(2, current - 1)
-  const end = Math.min(total - 1, current + 1)
-  for (let i = start; i <= end; i++) {
-    pages.push(i)
-  }
-
-  // Show ellipsis or second-to-last page directly if only one number would be hidden.
-  if (current < total - 3) {
-    pages.push("ellipsis")
-  } else if (current <= total - 3) {
-    pages.push(total - 1)
-  }
-
-  pages.push(total)
-
-  return pages
-}
-
-type DirectoryPaginationLinkProps = React.ComponentProps<"a"> & {
-  isActive?: boolean
-  size?: React.ComponentProps<typeof Button>["size"]
-}
-
-function DirectoryPaginationLink({
-  className,
-  isActive,
-  size = "icon",
-  ...props
-}: DirectoryPaginationLinkProps) {
-  return (
-    <a
-      aria-current={isActive ? "page" : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
-      className={cn(
-        buttonVariants({
-          variant: isActive ? "outline" : "ghost",
-          size,
-        }),
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DirectoryPaginationPrevious({
-  className,
-  text = "Previous",
-  ...props
-}: DirectoryPaginationLinkProps & { text?: string }) {
-  return (
-    <DirectoryPaginationLink
-      aria-label="Go to previous page"
-      size="default"
-      className={cn("pl-1.5!", className)}
-      {...props}
-    >
-      <IconChevronLeft className="cn-rtl-flip size-4" />
-      <span className="hidden sm:block">{text}</span>
-    </DirectoryPaginationLink>
-  )
-}
-
-function DirectoryPaginationNext({
-  className,
-  text = "Next",
-  ...props
-}: DirectoryPaginationLinkProps & { text?: string }) {
-  return (
-    <DirectoryPaginationLink
-      aria-label="Go to next page"
-      size="default"
-      className={cn("pr-1.5!", className)}
-      {...props}
-    >
-      <span className="hidden sm:block">{text}</span>
-      <IconChevronRight className="cn-rtl-flip size-4" />
-    </DirectoryPaginationLink>
-  )
-}
-
 export function DirectoryList() {
-  const pathname = usePathname()
-  const {
-    isLoading,
-    paginatedRegistries,
-    page,
-    query,
-    registries,
-    totalPages,
-    setPage,
-    setQuery,
-  } = useSearchRegistry()
-  const previousHref =
-    page > 1 ? getPageHref(pathname, query, page - 1) : undefined
-  const nextHref =
-    page < totalPages ? getPageHref(pathname, query, page + 1) : undefined
-
-  const handlePageChange = React.useCallback(
-    (
-      event: React.MouseEvent<HTMLAnchorElement>,
-      targetPage: number,
-      disabled = false
-    ) => {
-      if (
-        event.defaultPrevented ||
-        event.button !== 0 ||
-        event.metaKey ||
-        event.ctrlKey ||
-        event.shiftKey ||
-        event.altKey
-      ) {
-        return
-      }
-
-      if (disabled || targetPage === page) {
-        event.preventDefault()
-        return
-      }
-
-      event.preventDefault()
-      void setPage(targetPage)
-    },
-    [page, setPage]
-  )
+  const { registries } = useSearchRegistry()
 
   return (
-    <DirectoryAddProvider>
-      <div className="mt-6">
-        {isLoading ? (
-          <DirectoryListSkeleton />
-        ) : (
-          <>
-            <SearchDirectory
-              query={query}
-              registriesCount={registries.length}
-              setQuery={setQuery}
-            />
-            <ItemGroup className="my-8">
-              {paginatedRegistries.map((registry, index) => (
-                <React.Fragment key={registry.name}>
-                  <Item className="group/item relative gap-6 px-0">
-                    <ItemMedia
-                      variant="image"
-                      dangerouslySetInnerHTML={{ __html: registry.logo }}
-                      className="grayscale *:[svg]:size-8 *:[svg]:fill-foreground"
-                    />
-                    <ItemContent>
-                      <ItemTitle>
-                        <a
-                          href={getHomepageUrl(registry.homepage)}
-                          target="_blank"
-                          rel="noopener noreferrer external"
-                          className="group flex items-center gap-1"
-                        >
-                          {registry.name}{" "}
-                          <IconArrowUpRight className="size-4 opacity-0 group-hover:opacity-100" />
-                        </a>
-                      </ItemTitle>
-                      {registry.description && (
-                        <ItemDescription className="text-pretty">
-                          {registry.description}
-                        </ItemDescription>
-                      )}
-                    </ItemContent>
-                    <ItemActions className="relative z-10 hidden self-start sm:flex">
-                      <DirectoryAddButton registry={registry} />
-                    </ItemActions>
-                    <ItemFooter className="justify-start pl-16 sm:hidden">
-                      <Button size="sm" variant="outline">
-                        View <IconArrowUpRight />
-                      </Button>
-                      <DirectoryAddButton registry={registry} />
-                    </ItemFooter>
-                  </Item>
-                  {index < paginatedRegistries.length - 1 && (
-                    <ItemSeparator className="my-1" />
-                  )}
-                </React.Fragment>
-              ))}
-            </ItemGroup>
-            {totalPages > 1 && (
-              <Pagination>
-                <PaginationContent>
-                  <PaginationItem>
-                    <DirectoryPaginationPrevious
-                      href={previousHref}
-                      aria-disabled={page <= 1 || undefined}
-                      tabIndex={page <= 1 ? -1 : undefined}
-                      onClick={(event) =>
-                        handlePageChange(event, page - 1, page <= 1)
-                      }
-                      className={cn(
-                        page <= 1
-                          ? "pointer-events-none opacity-50"
-                          : "cursor-pointer"
-                      )}
-                    />
-                  </PaginationItem>
-                  {getPageNumbers(page, totalPages).map((p, i) =>
-                    p === "ellipsis" ? (
-                      <PaginationItem key={`ellipsis-${i}`}>
-                        <PaginationEllipsis />
-                      </PaginationItem>
-                    ) : (
-                      <PaginationItem key={p}>
-                        <DirectoryPaginationLink
-                          href={getPageHref(pathname, query, p)}
-                          isActive={p === page}
-                          onClick={(event) => handlePageChange(event, p)}
-                          className="cursor-pointer"
-                        >
-                          {p}
-                        </DirectoryPaginationLink>
-                      </PaginationItem>
-                    )
-                  )}
-                  <PaginationItem>
-                    <DirectoryPaginationNext
-                      href={nextHref}
-                      aria-disabled={page >= totalPages || undefined}
-                      tabIndex={page >= totalPages ? -1 : undefined}
-                      onClick={(event) =>
-                        handlePageChange(event, page + 1, page >= totalPages)
-                      }
-                      className={cn(
-                        page >= totalPages
-                          ? "pointer-events-none opacity-50"
-                          : "cursor-pointer"
-                      )}
-                    />
-                  </PaginationItem>
-                </PaginationContent>
-              </Pagination>
-            )}
-          </>
-        )}
-      </div>
-    </DirectoryAddProvider>
-  )
-}
-
-function DirectoryListSkeleton() {
-  return (
-    <>
-      <Skeleton className="h-8 w-full rounded-lg" />
+    <div className="mt-6">
+      <SearchDirectory />
       <ItemGroup className="my-8">
-        {Array.from({ length: 10 }, (_, index) => (
+        {registries.map((registry, index) => (
           <React.Fragment key={index}>
-            <Item className="relative items-start gap-6 px-0">
-              <Skeleton className="size-8 rounded-lg" />
+            <Item className="group/item relative gap-6 px-0">
+              <ItemMedia
+                variant="image"
+                dangerouslySetInnerHTML={{ __html: registry.logo }}
+                className="grayscale *:[svg]:size-8 *:[svg]:fill-foreground"
+              />
               <ItemContent>
-                <Skeleton className="h-4 w-32 sm:w-40" />
-                <Skeleton className="mt-1.5 h-4 w-full max-w-md" />
-                <Skeleton className="mt-1 h-4 w-3/4 max-w-sm" />
+                <ItemTitle>
+                  <a
+                    href={getHomepageUrl(registry.homepage)}
+                    target="_blank"
+                    rel="noopener noreferrer external"
+                    className="group flex items-center gap-1"
+                  >
+                    {registry.name}{" "}
+                    <IconArrowUpRight className="size-4 opacity-0 group-hover:opacity-100" />
+                  </a>
+                </ItemTitle>
+                {registry.description && (
+                  <ItemDescription className="text-pretty">
+                    {registry.description}
+                  </ItemDescription>
+                )}
               </ItemContent>
-              <ItemActions className="hidden self-start sm:flex">
-                <Skeleton className="h-7 w-16 rounded-lg" />
+              <ItemActions className="relative z-10 hidden self-start sm:flex">
+                <DirectoryAddButton registry={registry} />
               </ItemActions>
-              <ItemFooter className="justify-start gap-2 pl-16 sm:hidden">
-                <Skeleton className="h-9 w-20 rounded-lg" />
-                <Skeleton className="h-9 w-24 rounded-lg" />
+              <ItemFooter className="justify-start pl-16 sm:hidden">
+                <Button size="sm" variant="outline">
+                  View <IconArrowUpRight />
+                </Button>
+                <DirectoryAddButton registry={registry} />
               </ItemFooter>
             </Item>
-            {index < 9 && <ItemSeparator className="my-1" />}
+            {index < globalRegistries.length - 1 && (
+              <ItemSeparator className="my-1" />
+            )}
           </React.Fragment>
         ))}
       </ItemGroup>
-    </>
+    </div>
   )
 }

apps/v4/components/search-directory.tsx

@@ -1,24 +1,23 @@
-"use client"
-
+import * as React from "react"
 import { Search, X } from "lucide-react"
 
-import { Field } from "@/styles/base-nova/ui/field"
+import { useSearchRegistry } from "@/hooks/use-search-registry"
+import { Field } from "@/registry/new-york-v4/ui/field"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/styles/base-nova/ui/input-group"
+} from "@/registry/new-york-v4/ui/input-group"
+
+export const SearchDirectory = () => {
+  const { query, registries, setQuery } = useSearchRegistry()
+
+  const onQueryChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    setQuery(value)
+  }
 
-export function SearchDirectory({
-  query,
-  registriesCount,
-  setQuery,
-}: {
-  query: string
-  registriesCount: number
-  setQuery: (value: string | null) => void
-}) {
   return (
     <Field>
       <InputGroup>
@@ -26,15 +25,14 @@ export function SearchDirectory({
           <Search />
         </InputGroupAddon>
         <InputGroupInput
-          className="h-full"
           placeholder="Search"
           value={query}
-          onChange={(e) => setQuery(e.target.value)}
+          onChange={onQueryChange}
         />
         <InputGroupAddon align="inline-end">
           <span className="text-muted-foreground tabular-nums sm:text-xs">
-            {registriesCount}{" "}
-            {registriesCount === 1 ? "registry" : "registries"}
+            {registries.length}{" "}
+            {registries.length === 1 ? "registry" : "registries"}
           </span>
         </InputGroupAddon>
         <InputGroupAddon

apps/v4/components/tailwind-indicator.tsx

@@ -1,4 +1,4 @@
-const SHOW = true
+const SHOW = false
 
 export function TailwindIndicator({
   forceMount = false,

apps/v4/content/docs/(root)/cli.mdx

@@ -39,8 +39,6 @@ Options:
   --no-monorepo              skip the monorepo prompt.
   --rtl                      enable RTL support.
   --no-rtl                   disable RTL support.
-  --pointer                  enable pointer cursor for buttons.
-  --no-pointer               disable pointer cursor for buttons.
   --reinstall                re-install existing UI components.
   --no-reinstall             do not re-install existing UI components.
   -h, --help                 display help for command
@@ -92,17 +90,9 @@ Options:
 Use the `apply` command to apply a preset to an existing project.
 
 ```bash
-npx shadcn@latest apply a2r6bw
+npx shadcn@latest apply --preset a2r6bw
 ```
 
-You can apply only the theme or fonts from a preset without reinstalling UI components:
-
-```bash
-npx shadcn@latest apply a2r6bw --only theme
-```
-
-Supported values for `--only` are `theme` and `font`.
-
 **Options**
 
 ```bash
@@ -115,7 +105,6 @@ Arguments:
 
 Options:
   --preset <preset>  preset configuration to apply
-  --only [parts]     apply only parts of a preset: theme, font
   -y, --yes          skip confirmation prompt. (default: false)
   -c, --cwd <cwd>    the working directory. defaults to the current directory.
   -s, --silent       mute output. (default: false)
@@ -124,110 +113,6 @@ Options:
 
 ---
 
-## preset
-
-Use the `preset` command to inspect preset codes and resolve the preset for an existing project.
-
-```bash
-npx shadcn@latest preset decode a2r6bw
-```
-
-### preset decode
-
-Use `preset decode` to decode a preset code.
-
-```bash
-npx shadcn@latest preset decode a2r6bw
-```
-
-**Options**
-
-```bash
-Usage: shadcn preset decode [options] <code>
-
-decode a preset code
-
-Arguments:
-  code        the preset code to decode
-
-Options:
-  --json      output as JSON. (default: false)
-  -h, --help  display help for command
-```
-
-### preset resolve
-
-Use `preset resolve` to resolve the preset from the current project.
-
-```bash
-npx shadcn@latest preset resolve
-```
-
-The `preset info` command is an alias for `preset resolve`:
-
-```bash
-npx shadcn@latest preset info
-```
-
-**Options**
-
-```bash
-Usage: shadcn preset resolve|info [options]
-
-resolve a preset from your project
-
-Options:
-  -c, --cwd <cwd>  the working directory. defaults to the current directory.
-  --json            output as JSON. (default: false)
-  -h, --help        display help for command
-```
-
-### preset url
-
-Use `preset url` to print the create URL for a preset code.
-
-```bash
-npx shadcn@latest preset url a2r6bw
-```
-
-**Options**
-
-```bash
-Usage: shadcn preset url [options] <code>
-
-get the create URL for a preset code
-
-Arguments:
-  code        the preset code
-
-Options:
-  -h, --help  display help for command
-```
-
-### preset open
-
-Use `preset open` to open a preset code in the browser.
-
-```bash
-npx shadcn@latest preset open a2r6bw
-```
-
-**Options**
-
-```bash
-Usage: shadcn preset open [options] <code>
-
-open a preset code in the browser
-
-Arguments:
-  code        the preset code
-
-Options:
-  -h, --help  display help for command
-```
-
----
-
 ## view
 
 Use the `view` command to view items from the registry before installing them.

apps/v4/content/docs/(root)/components-json.mdx

@@ -176,9 +176,9 @@ Recommended setup for a single-package app:
 ```json title="package.json"
 {
   "imports": {
-    "#components/*": "./src/components/*.tsx",
-    "#lib/*": "./src/lib/*.ts",
-    "#hooks/*": "./src/hooks/*.ts"
+    "#components/*": "./src/components/*",
+    "#lib/*": "./src/lib/*",
+    "#hooks/*": "./src/hooks/*"
   }
 }
 ```
@@ -211,11 +211,9 @@ provides the runtime and TypeScript resolution for those `#...` specifiers.
 The matched `imports` target also controls whether generated `#...` imports keep
 file extensions:
 
-- `"#components/*": "./src/components/*"` preserves source extensions and can
-  generate imports like
+- `"#components/*": "./src/components/*"` can generate imports like
   `#components/button.tsx`
-- `"#components/*": "./src/components/*.tsx"` strips source extensions and
-  generates imports like
+- `"#components/*": "./src/components/*.tsx"` generates imports like
   `#components/button`
 
 For monorepos, see the <Link href="/docs/monorepo">monorepo docs</Link>. Local
@@ -223,8 +221,6 @@ workspace aliases can use `package.json#imports`, while shared workspace
 imports such as `@workspace/ui/components` are resolved from the target
 package's `exports`.
 
-For framework-specific setup, see the [package imports guide](/docs/package-imports).
-
 ### aliases.utils
 
 Import alias for your utility functions.

apps/v4/content/docs/(root)/directory.mdx

@@ -3,9 +3,14 @@ title: Registry Directory
 description: Discover community registries for shadcn/ui components and blocks.
 ---
 
+import { TriangleAlertIcon } from "lucide-react"
+
 These registries are built into the CLI with no additional configuration required. To add a component, run: `npx shadcn add @<registry>/<component>`.
 
-<Callout className="bg-muted font-semibold">
+<Callout
+  type="warning"
+  className="border-amber-200 bg-amber-50 font-semibold dark:border-amber-900 dark:bg-amber-950"
+>
   Community registries are maintained by third-party developers. Always review
   code on installation to ensure it meets your security and quality standards.
 </Callout>

apps/v4/content/docs/(root)/figma.mdx

@@ -10,6 +10,7 @@ description: Every component recreated in Figma. With customizable props, typogr
 
 ## Free
 
+- [Obra shadcn/ui](https://www.figma.com/community/file/1514746685758799870/obra-shadcn-ui) by [Obra Studio](https://obra.studio/) - Carefully crafted shadcn/ui kit, MIT licensed, maintained by team of designers, with free design to code plugin
 - [shadcn/ui components](https://www.figma.com/community/file/1342715840824755935) by [Sitsiilia Bergmann](https://x.com/sitsiilia) - A well-structured component library aligned with the shadcn component system, regularly maintained.
 - [shadcn/ui design system](https://www.figma.com/community/file/1203061493325953101) by [Pietro Schirano](https://twitter.com/skirano) - A design companion for shadcn/ui. Each component was painstakingly crafted to perfectly match the code implementation.
 
@@ -19,4 +20,3 @@ description: Every component recreated in Figma. With customizable props, typogr
 - [shadcncraft Design System](https://shadcncraft.com) - Production-ready shadcn/ui kit with Pro React blocks and 1:1 Figma alignment. Design and ship faster with tweakcn theming, AI-assisted workflows, and Figma to React export, built for real product UIs.
 - [shadcn/studio UI Kit](https://shadcnstudio.com/figma) - Accelerate design & development with a shadcn/ui compatible Figma kit with updated components, 550+ blocks, 10+ templates, 20+ themes, and an AI tool that converts designs into shadcn/ui code.
 - [Shadcnblocks.com](https://www.shadcnblocks.com) - A Premium Shadcn Figma UI Kit with components, 500+ pro blocks, shadcn theme variables, light/dark mode and Figma MCP ready.
-- [Obra shadcn/ui Pro](https://shadcn.obra.studio/products/obra-shadcn-ui-pro) by [Obra Studio](https://obra.studio/) - Focused on designers who need to get work done — the best designer experience for shadcn/ui within Figma. variable consistency with shadcn, plus custom components, Pro blocks, and a design-to-code plugin.

apps/v4/content/docs/(root)/meta.json

@@ -4,13 +4,13 @@
     "index",
     "[Installation](/docs/installation)",
     "components-json",
-    "package-imports",
     "theming",
     "[Dark Mode](/docs/dark-mode)",
     "[RTL](/docs/rtl)",
     "[CLI](/docs/cli)",
     "monorepo",
     "skills",
+    "v0",
     "javascript",
     "blocks",
     "figma",

apps/v4/content/docs/(root)/monorepo.mdx

@@ -189,9 +189,7 @@ For example, an app workspace can use local package imports:
   "private": true,
   "type": "module",
   "imports": {
-    "#components/*": "./src/components/*.tsx",
-    "#lib/*": "./src/lib/*.ts",
-    "#hooks/*": "./src/hooks/*.ts"
+    "#*": "./src/*"
   },
   "dependencies": {
     "@workspace/ui": "workspace:*"
@@ -219,9 +217,7 @@ And the shared UI package can expose its install targets with `exports`:
   "private": true,
   "type": "module",
   "imports": {
-    "#components/*": "./src/components/*.tsx",
-    "#lib/*": "./src/lib/*.ts",
-    "#hooks/*": "./src/hooks/*.ts"
+    "#*": "./src/*"
   },
   "exports": {
     "./globals.css": "./src/styles/globals.css",
@@ -250,5 +246,3 @@ In this setup:
   `@workspace/ui/...`
 - files added inside `packages/ui` use the package-local `#...` aliases
 - the shared package must export any path referenced by another workspace
-
-For framework-specific package import setup, see the [package imports guide](/docs/package-imports).

apps/v4/content/docs/(root)/package-imports.mdx

@@ -1,234 +0,0 @@
----
-title: Package Imports
-description: Configure shadcn/ui with package.json imports.
----
-
-The `shadcn` CLI supports [package imports](https://nodejs.org/api/packages.html#imports)
-for installing components, rewriting imports, and resolving third-party
-registries.
-
-Package imports let you use private `#...` import aliases from your
-`package.json` instead of `compilerOptions.paths` in `tsconfig.json`.
-
-## Example
-
-You configure `imports` in your `package.json`:
-
-```json title="package.json" showLineNumbers
-{
-  "imports": {
-    "#components/*": "./src/components/*.tsx",
-    "#lib/*": "./src/lib/*.ts",
-    "#hooks/*": "./src/hooks/*.ts"
-  }
-}
-```
-
-Then import generated components using `#...` specifiers:
-
-```tsx
-import { Button } from "#components/ui/button"
-import { cn } from "#lib/utils"
-```
-
-<Callout className="mt-6">
-  Package import specifiers must start with `#`. Use TypeScript 5 or later with
-  `moduleResolution: "bundler"` and `resolvePackageJsonImports: true`.
-</Callout>
-
-## App
-
-For Next.js, Vite, and TanStack Start apps that install
-components into the same workspace.
-
-<Steps>
-
-### Configure `package.json`
-
-Add imports for the shadcn/ui install targets.
-
-```json title="package.json" showLineNumbers
-{
-  "imports": {
-    "#components/*": "./src/components/*.tsx",
-    "#lib/*": "./src/lib/*.ts",
-    "#hooks/*": "./src/hooks/*.ts"
-  }
-}
-```
-
-If your app does not use a `src` directory, remove `src/` from the targets. For
-example:
-
-```json title="package.json" showLineNumbers
-{
-  "imports": {
-    "#components/*": "./components/*.tsx",
-    "#lib/*": "./lib/*.ts",
-    "#hooks/*": "./hooks/*.ts"
-  }
-}
-```
-
-### Configure TypeScript
-
-Enable package import resolution.
-
-```json title="tsconfig.json" showLineNumbers
-{
-  "compilerOptions": {
-    "moduleResolution": "bundler",
-    "resolvePackageJsonImports": true
-  }
-}
-```
-
-You do not need `compilerOptions.paths` for these aliases.
-
-### Configure `components.json`
-
-Use the same `#...` roots in `components.json`.
-
-```json title="components.json" showLineNumbers
-{
-  "aliases": {
-    "components": "#components",
-    "ui": "#components/ui",
-    "lib": "#lib",
-    "hooks": "#hooks",
-    "utils": "#lib/utils"
-  }
-}
-```
-
-The `ui` alias uses `#components/ui`. It is still covered by the
-`#components/*` import in `package.json`.
-
-The `utils` alias uses `#lib/utils`. It is covered by `#lib/*`, so you do not
-need a separate `#utils` import.
-
-</Steps>
-
-## Monorepo
-
-In a monorepo, use package imports for files inside each package and package
-exports for files shared across workspaces.
-
-For an app workspace:
-
-```json title="apps/web/package.json" showLineNumbers
-{
-  "name": "web",
-  "private": true,
-  "imports": {
-    "#components/*": "./src/components/*.tsx",
-    "#lib/*": "./src/lib/*.ts",
-    "#hooks/*": "./src/hooks/*.ts"
-  },
-  "dependencies": {
-    "@workspace/ui": "workspace:*"
-  }
-}
-```
-
-```json title="apps/web/components.json" showLineNumbers
-{
-  "aliases": {
-    "components": "#components",
-    "ui": "@workspace/ui/components",
-    "lib": "#lib",
-    "hooks": "#hooks",
-    "utils": "@workspace/ui/lib/utils"
-  }
-}
-```
-
-For the shared UI package:
-
-```json title="packages/ui/package.json" showLineNumbers
-{
-  "name": "@workspace/ui",
-  "private": true,
-  "imports": {
-    "#components/*": "./src/components/*.tsx",
-    "#lib/*": "./src/lib/*.ts",
-    "#hooks/*": "./src/hooks/*.ts"
-  },
-  "exports": {
-    "./globals.css": "./src/styles/globals.css",
-    "./components/*": "./src/components/*.tsx",
-    "./lib/*": "./src/lib/*.ts",
-    "./hooks/*": "./src/hooks/*.ts"
-  }
-}
-```
-
-```json title="packages/ui/components.json" showLineNumbers
-{
-  "aliases": {
-    "components": "#components",
-    "ui": "#components",
-    "lib": "#lib",
-    "hooks": "#hooks",
-    "utils": "#lib/utils"
-  }
-}
-```
-
-When you run `add` from `apps/web`, app-local files use `#...` imports and
-shared UI files are imported from `@workspace/ui`.
-
-```tsx
-import { Button } from "@workspace/ui/components/button"
-import { LoginForm } from "#components/login-form"
-```
-
-## File extensions
-
-The target pattern in `package.json#imports` controls whether generated imports
-include file extensions.
-
-```json title="package.json" showLineNumbers
-{
-  "imports": {
-    "#components/*": "./src/components/*.tsx"
-  }
-}
-```
-
-This generates imports without extensions:
-
-```tsx
-import { Button } from "#components/ui/button"
-```
-
-If you use a target without the extension:
-
-```json title="package.json" showLineNumbers
-{
-  "imports": {
-    "#components/*": "./src/components/*"
-  }
-}
-```
-
-The generated import keeps the source extension:
-
-```tsx
-import { Button } from "#components/ui/button.tsx"
-```
-
-For most apps, use the extension in the target pattern.
-
-## Troubleshooting
-
-If TypeScript cannot resolve a `#...` import, check that:
-
-- the specifier starts with `#`
-- the `imports` entry is in the nearest `package.json`
-- `moduleResolution` is set to `bundler`
-- `resolvePackageJsonImports` is enabled
-- the matching target exists after components are added
-
-If a component is installed but imports still point to `@/...`, check that
-`components.json` uses the same `#...` aliases as your package imports.

apps/v4/content/docs/changelog/2026-03-cli-v4.mdx

@@ -116,7 +116,7 @@ npx shadcn@latest docs combobox
 
 combobox
   - docs      https://ui.shadcn.com/docs/components/radix/combobox
-  - examples  https://ui.shadcn.com/code/apps/v4/registry/bases/radix/examples/combobox-example.tsx
+  - examples  https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx
   - api       https://base-ui.com/react/components/combobox
 ```
 

apps/v4/content/docs/changelog/2026-04-partial-preset-apply.mdx

@@ -1,35 +0,0 @@
----
-title: April 2026 - Partial Preset Apply
-description: Apply only the theme or fonts from a preset while keeping your existing components.
-date: 2026-04-22
----
-
-You can now selectively apply a preset.
-
-Say someone shares a preset with you and you already have your own components, but you like the theme or the fonts. Now you can apply just that.
-
-Keep your components. Apply only what you want.
-
-```bash
-# Apply the full preset.
-npx shadcn@latest apply --preset b2D0vQ7G4
-
-# Apply only the theme.
-npx shadcn@latest apply --preset b2D0vQ7G4 --only theme
-
-# Apply only the fonts.
-npx shadcn@latest apply --preset b2D0vQ7G4 --only font
-
-# Apply theme and fonts.
-npx shadcn@latest apply --preset b2D0vQ7G4 --only theme,font
-```
-
-The default behavior is unchanged. Running `shadcn apply --preset <preset>` still applies the full preset.
-
-Partial preset apply currently supports `theme` and `font`.
-
-<Button asChild size="sm">
-  <Link href="/create" className="mt-6 no-underline!">
-    Try a Preset
-  </Link>
-</Button>

apps/v4/content/docs/changelog/2026-04-pointer-cursor.mdx

@@ -1,24 +0,0 @@
----
-title: April 2026 - Pointer Cursor
-description: Add cursor pointer behavior for buttons during project setup.
-date: 2026-04-25
----
-
-You can now enable `cursor: pointer` for buttons when initializing a project.
-
-```bash
-npx shadcn@latest init --pointer
-```
-
-This adds the following CSS to your global CSS file:
-
-```css title="globals.css"
-@layer base {
-  button:not(:disabled),
-  [role="button"]:not(:disabled) {
-    cursor: pointer;
-  }
-}
-```
-
-The `--pointer` option is not part of preset codes. It is applied as a project setup option, similar to `--rtl`.

apps/v4/content/docs/changelog/2026-04-preset-commands.mdx

@@ -1,93 +0,0 @@
----
-title: April 2026 - shadcn preset
-description: Decode, share, open, and resolve preset codes from the shadcn CLI.
-date: 2026-04-28
----
-
-We added `shadcn preset` commands for working with preset codes.
-
-## Decode a preset
-
-You can decode a preset code to see exactly what it contains:
-
-```bash
-npx shadcn@latest preset decode b5owWMfJ8l
-```
-
-```txt
-Preset
-  code         b5owWMfJ8l
-  version      b
-  style        mira
-  baseColor    mauve
-  theme        mauve
-  chartColor   amber
-  iconLibrary  hugeicons
-  font         inter
-  fontHeading  oxanium
-  radius       large
-  menuAccent   subtle
-  menuColor    inverted-translucent
-  url          https://ui.shadcn.com/create?preset=b5owWMfJ8l
-```
-
-## Resolve from a project
-
-Use `preset resolve` in an existing project to see the preset that matches your current configuration.
-
-```bash
-npx shadcn@latest preset resolve
-```
-
-```txt
-Preset
-  code         b5Kc6P0Vc
-  version      b
-  style        luma
-  baseColor    olive
-  theme        lime
-  chartColor   sky
-  iconLibrary  hugeicons
-  font         geist
-  fontHeading  inherit
-  radius       default
-  menuAccent   subtle
-  menuColor    default
-  url          https://ui.shadcn.com/create?preset=b5Kc6P0Vc
-```
-
-It works with monorepos too:
-
-```bash
-npx shadcn@latest preset resolve -c apps/web
-```
-
-## Share or open
-
-Use `preset url` when you need a shareable link:
-
-```bash
-npx shadcn@latest preset url b5owWMfJ8l
-```
-
-```txt
-https://ui.shadcn.com/create?preset=b5owWMfJ8l
-```
-
-Use `preset open` to open the preset on shadcn/create for customization:
-
-```bash
-npx shadcn@latest preset open b5owWMfJ8l
-```
-
-```txt
-Opening https://ui.shadcn.com/create?preset=b5owWMfJ8l in your browser.
-```
-
-This makes presets easier to inspect, share, and hand off to coding agents without manually decoding codes or building URLs.
-
-<Button asChild size="sm">
-  <Link href="/create" className="mt-6 no-underline!">
-    Try a Preset
-  </Link>
-</Button>

apps/v4/content/docs/changelog/2026-04-sera.mdx

@@ -1,37 +0,0 @@
----
-title: April 2026 - Introducing Sera
-description: Minimal. Editorial. Typographic. Underline Controls and Uppercase Headings. Shaped by Print Design Principles.
-date: 2026-04-16
----
-
-Introducing Sera, a new shadcn/ui style. Minimal. Editorial. Typographic. Underline Controls and Uppercase Headings. Shaped by Print Design Principles.
-
-<a href="/create?preset=b4xFeBLg4O">
-  <Image
-    src="/images/sera-01-light.png"
-    width="2160"
-    height="1832"
-    alt="Sera style preview"
-    className="mt-6 w-full overflow-hidden rounded-lg border dark:hidden"
-  />
-  <Image
-    src="/images/sera-01-dark.png"
-    width="2160"
-    height="1832"
-    alt="Sera style preview"
-    className="mt-6 hidden w-full overflow-hidden rounded-lg border shadow-sm dark:block"
-  />
-  <span className="sr-only">Try Sera in shadcn/create</span>
-</a>
-
-Sera is a typography-first style built on print design principles. It pairs serif headings with sans-serif body text, uses square corners, uppercase tracking, and underlined controls to create an editorial feel for your app.
-
-Like the other new styles, Sera goes beyond theming. It changes the geometry, spacing, and feel of the components so your app starts from a different visual baseline.
-
-Available now in [shadcn/create](/create) for both Radix and Base UI.
-
-<Button asChild size="sm">
-  <Link href="/create?preset=b4xFeBLg4O" className="mt-6 no-underline!">
-    Try Sera
-  </Link>
-</Button>

apps/v4/content/docs/changelog/2026-04-shadcn-apply.mdx

@@ -1,21 +0,0 @@
----
-title: April 2026 - shadcn apply
-description: Switch presets in existing projects without starting over.
-date: 2026-04-08
----
-
-We added `shadcn apply` so you can switch presets in an existing project without starting over.
-
-When you run `npx shadcn@latest apply` in an existing project, we apply a new preset, reinstall your existing components, and update your theme, colors, CSS variables, fonts, and icons.
-
-```bash
-npx shadcn@latest apply --preset b2D0vQ7G4
-```
-
-The CLI keeps the current base and RTL settings from your existing project, even when the preset URL was generated with different values.
-
-<Button asChild size="sm">
-  <Link href="/create" className="mt-6 no-underline!">
-    Try a Preset
-  </Link>
-</Button>

apps/v4/content/docs/changelog/2026-05-package-imports-target-aliases.mdx

@@ -1,63 +0,0 @@
----
-title: May 2026 - Package Imports and Target Aliases
-description: Configure shadcn/ui with package.json imports and portable registry target aliases.
-date: 2026-05-05
----
-
-We've added support for package imports and aliases in `files.target` in `shadcn@4.7.0`.
-
-## Package imports
-
-The `shadcn` CLI now supports `package.json#imports` for installing components,
-rewriting imports, and resolving third-party registries. You can use private
-`#...` import aliases from your `package.json` instead of relying only on
-`compilerOptions.paths` in `tsconfig.json`.
-
-```json title="package.json" showLineNumbers
-{
-  "imports": {
-    "#components/*": "./src/components/*.tsx",
-    "#lib/*": "./src/lib/*.ts",
-    "#hooks/*": "./src/hooks/*.ts"
-  }
-}
-```
-
-Then use the same roots in `components.json`:
-
-```json title="components.json" showLineNumbers
-{
-  "aliases": {
-    "components": "#components",
-    "ui": "#components/ui",
-    "lib": "#lib",
-    "hooks": "#hooks",
-    "utils": "#lib/utils"
-  }
-}
-```
-
-This also works in monorepos where app-local files use package imports and
-shared UI files are imported from workspace package exports.
-
-See the [package imports guide](/docs/package-imports) for setup details.
-
-## Target aliases
-
-Registry items can now use target aliases in `files[].target` to install files
-under the user's configured shadcn directories. For example, the following registry item will install the `prompt-input.tsx` file under the `ui/ai` directory.
-
-```json title="example.json" showLineNumbers
-{
-  "files": [
-    {
-      "path": "registry/default/ai/prompt-input.tsx",
-      "type": "registry:ui",
-      "target": "@ui/ai/prompt-input.tsx"
-    }
-  ]
-}
-```
-
-See the [registry examples](/docs/registry/examples#target-placeholders) for
-more details.

apps/v4/content/docs/changelog/2026-05-registry-include.mdx

@@ -1,120 +0,0 @@
----
-title: May 2026 - Registry Include and Validate
-description: Organize and validate source registries.
-date: 2026-05-20
----
-
-This release adds two updates for registry authors:
-
-- `include` for composing large source registries from multiple `registry.json`
-  files.
-- `shadcn registry validate` for checking source registries before publishing.
-
-This makes it easier to maintain source and dynamic registries without keeping
-one large `registry.json` file by hand.
-
-Registry authors can now organize a large source registry across multiple
-`registry.json` files and compose them with `shadcn build`.
-
-```txt /registry.json/
-registry.json
-components
-└── ui
-    ├── button.tsx
-    ├── input.tsx
-    └── registry.json
-hooks
-├── registry.json
-├── use-media-query.ts
-└── use-toggle.ts
-```
-
-{/* prettier-ignore */}
-```json title="registry.json" showLineNumbers {6-7}
-{
-  "$schema": "https://ui.shadcn.com/schema/registry.json",
-  "name": "acme",
-  "homepage": "https://acme.com",
-  "include": [
-    "components/ui/registry.json",
-    "hooks/registry.json"
-  ]
-}
-```
-
-Included `registry.json` files are valid registry files for composition and may
-omit `name` and `homepage`. Only the root `registry.json` must define the
-registry metadata.
-
-```json title="components/ui/registry.json" showLineNumbers
-{
-  "$schema": "https://ui.shadcn.com/schema/registry.json",
-  "items": [
-    {
-      "name": "button",
-      "type": "registry:ui",
-      "files": [
-        {
-          "path": "button.tsx",
-          "type": "registry:ui"
-        }
-      ]
-    }
-  ]
-}
-```
-
-## Build output
-
-`shadcn build` resolves included registries and writes a flattened
-`registry.json` without `include`. Item file paths are preserved from the root
-registry, so a file declared in `components/ui/registry.json` is written as
-`components/ui/button.tsx` in the built registry item.
-
-## Validate your registry
-
-You can now validate a source registry before publishing or serving it.
-
-```bash
-npx shadcn registry validate
-```
-
-Validation runs against the source registry files directly. You do not need to
-run `shadcn build` first.
-
-The command checks the root `registry.json`, included registry files, item
-schema errors, duplicate item names, include rules, and local item file paths.
-Validation reports all actionable errors it can find in one run.
-
-## Registry loaders
-
-The `shadcn/registry` package also exports `loadRegistry` and
-`loadRegistryItem` for dynamic registry routes.
-
-```ts title="app/r/registry.json/route.ts" showLineNumbers
-import { loadRegistry } from "shadcn/registry"
-
-export async function GET() {
-  const registry = await loadRegistry()
-
-  return Response.json(registry)
-}
-```
-
-```ts title="app/r/[name].json/route.ts" showLineNumbers
-import { loadRegistryItem } from "shadcn/registry"
-
-export async function GET(
-  _: Request,
-  { params }: { params: Promise<{ name: string }> }
-) {
-  const { name } = await params
-  const item = await loadRegistryItem(name)
-
-  return Response.json(item)
-}
-```
-
-See the [registry.json documentation](/docs/registry/registry-json#include) and
-[getting started guide](/docs/registry/getting-started#structure-your-registry)
-for more details.

apps/v4/content/docs/components/base/button.mdx

@@ -66,8 +66,6 @@ Tailwind v4 [switched](https://tailwindcss.com/docs/upgrade-guide#buttons-use-th
 
 If you want to keep the `cursor: pointer` behavior, add the following code to your CSS file:
 
-You can also enable this during project setup with `npx shadcn@latest init --pointer`.
-
 ```css showLineNumbers title="globals.css"
 @layer base {
   button:not(:disabled),

apps/v4/content/docs/components/base/field.mdx

@@ -156,7 +156,7 @@ The `Field` family is designed for composing accessible forms. A typical field i
 
 ## Form
 
-See the [Form](/docs/forms) documentation for building forms with the `Field` component and [React Hook Form](/docs/forms/react-hook-form), [Tanstack Form](/docs/forms/tanstack-form), or [Formisch](/docs/forms/formisch).
+See the [Form](/docs/forms) documentation for building forms with the `Field` component and [React Hook Form](/docs/forms/react-hook-form) or [Tanstack Form](/docs/forms/tanstack-form).
 
 ## Examples
 

apps/v4/content/docs/components/base/toggle-group.mdx

@@ -129,9 +129,3 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
 ## API Reference
 
 See the [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group#api-reference) documentation.
-
-## Changelog
-
-### 2026-05-17 Default Spacing
-
-Changed the default `spacing` from `0` to `2` so toggle groups render with space between items by default. Use `spacing={0}` for connected items.

apps/v4/content/docs/components/radix/button.mdx

@@ -66,8 +66,6 @@ Tailwind v4 [switched](https://tailwindcss.com/docs/upgrade-guide#buttons-use-th
 
 If you want to keep the `cursor: pointer` behavior, add the following code to your CSS file:
 
-You can also enable this during project setup with `npx shadcn@latest init --pointer`.
-
 ```css showLineNumbers title="globals.css"
 @layer base {
   button:not(:disabled),

apps/v4/content/docs/components/radix/field.mdx

@@ -156,7 +156,7 @@ The `Field` family is designed for composing accessible forms. A typical field i
 
 ## Form
 
-See the [Form](/docs/forms) documentation for building forms with the `Field` component and [React Hook Form](/docs/forms/react-hook-form), [Tanstack Form](/docs/forms/tanstack-form), or [Formisch](/docs/forms/formisch).
+See the [Form](/docs/forms) documentation for building forms with the `Field` component and [React Hook Form](/docs/forms/react-hook-form) or [Tanstack Form](/docs/forms/tanstack-form).
 
 ## Examples
 

apps/v4/content/docs/components/radix/toggle-group.mdx

@@ -129,9 +129,3 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
 ## API Reference
 
 See the [Radix Toggle Group](https://www.radix-ui.com/docs/primitives/components/toggle-group#api-reference) documentation.
-
-## Changelog
-
-### 2026-05-17 Default Spacing
-
-Changed the default `spacing` from `0` to `2` so toggle groups render with space between items by default. Use `spacing={0}` for connected items.

apps/v4/content/docs/dark-mode/meta.json

@@ -1,4 +1,4 @@
 {
   "title": "Dark mode",
-  "pages": ["index", "next", "vite", "astro", "remix", "tanstack-start"]
+  "pages": ["index", "next", "vite", "astro", "remix"]
 }

apps/v4/content/docs/dark-mode/tanstack-start.mdx

@@ -1,191 +0,0 @@
----
-title: TanStack Start
-description: Adding dark mode to your TanStack Start app.
----
-
-<Steps>
-
-### Create a theme provider
-
-TanStack Start uses `ScriptOnce` from `@tanstack/react-router` to inject a script that runs before React hydrates, preventing flash of unstyled content (FOUC).
-
-```tsx title="components/theme-provider.tsx" showLineNumbers
-import { createContext, useContext, useEffect, useState } from "react"
-import { ScriptOnce } from "@tanstack/react-router"
-
-type Theme = "dark" | "light" | "system"
-
-type ThemeProviderProps = {
-  children: React.ReactNode
-  defaultTheme?: Theme
-  storageKey?: string
-}
-
-type ThemeProviderState = {
-  theme: Theme
-  setTheme: (theme: Theme) => void
-}
-
-function getThemeScript(storageKey: string, defaultTheme: Theme) {
-  const key = JSON.stringify(storageKey)
-  const fallback = JSON.stringify(defaultTheme)
-
-  return `(function(){try{var t=localStorage.getItem(${key});if(t!=='light'&&t!=='dark'&&t!=='system'){t=${fallback}}var d=matchMedia('(prefers-color-scheme: dark)').matches;var r=t==='system'?(d?'dark':'light'):t;var e=document.documentElement;e.classList.add(r);e.style.colorScheme=r}catch(e){}})();`
-}
-
-const ThemeProviderContext = createContext<ThemeProviderState>({
-  theme: "system",
-  setTheme: () => {},
-})
-
-function applyTheme(theme: Theme) {
-  const root = document.documentElement
-  root.classList.remove("light", "dark")
-
-  const resolved =
-    theme === "system"
-      ? window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "dark"
-        : "light"
-      : theme
-
-  root.classList.add(resolved)
-  root.style.colorScheme = resolved
-}
-
-export function ThemeProvider({
-  children,
-  defaultTheme = "system",
-  storageKey = "theme",
-}: ThemeProviderProps) {
-  const [theme, setThemeState] = useState<Theme>(defaultTheme)
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    const stored = localStorage.getItem(storageKey)
-    setThemeState(
-      stored === "light" || stored === "dark" || stored === "system"
-        ? stored
-        : defaultTheme
-    )
-    setMounted(true)
-  }, [defaultTheme, storageKey])
-
-  useEffect(() => {
-    if (!mounted) return
-    applyTheme(theme)
-  }, [theme, mounted])
-
-  useEffect(() => {
-    if (!mounted || theme !== "system") return
-
-    const media = window.matchMedia("(prefers-color-scheme: dark)")
-    const onChange = () => applyTheme("system")
-    media.addEventListener("change", onChange)
-    return () => media.removeEventListener("change", onChange)
-  }, [theme, mounted])
-
-  const setTheme = (next: Theme) => {
-    localStorage.setItem(storageKey, next)
-    setThemeState(next)
-  }
-
-  return (
-    <ThemeProviderContext value={{ theme, setTheme }}>
-      <ScriptOnce>{getThemeScript(storageKey, defaultTheme)}</ScriptOnce>
-      {children}
-    </ThemeProviderContext>
-  )
-}
-
-export function useTheme() {
-  const context = useContext(ThemeProviderContext)
-  if (context === undefined)
-    throw new Error("useTheme must be used within a ThemeProvider")
-  return context
-}
-```
-
-### Wrap your root layout
-
-Add the `ThemeProvider` to your root layout and add the `suppressHydrationWarning` prop to the `html` tag.
-
-```tsx {8,19,24-26} title="src/routes/__root.tsx" showLineNumbers
-import {
-  createRootRoute,
-  HeadContent,
-  Outlet,
-  Scripts,
-} from "@tanstack/react-router"
-
-import { ThemeProvider } from "@/components/theme-provider"
-
-export const Route = createRootRoute({
-  head: () => ({
-    // ...
-  }),
-  component: RootComponent,
-})
-
-function RootComponent() {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        <HeadContent />
-      </head>
-      <body>
-        <ThemeProvider defaultTheme="system" storageKey="theme">
-          <Outlet />
-        </ThemeProvider>
-        <Scripts />
-      </body>
-    </html>
-  )
-}
-```
-
-### Add a mode toggle
-
-Place a mode toggle on your site to toggle between light and dark mode.
-
-```tsx title="components/mode-toggle.tsx" showLineNumbers
-import { Moon, Sun } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { useTheme } from "@/components/theme-provider"
-
-export function ModeToggle() {
-  const { setTheme } = useTheme()
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("system")}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-```
-
-</Steps>

apps/v4/content/docs/forms/formisch.mdx

@@ -1,669 +0,0 @@
----
-title: Formisch
-description: Build forms in React using Formisch and Valibot.
-links:
-  doc: https://formisch.dev
----
-
-import { InfoIcon } from "lucide-react"
-
-This guide covers building forms with [Formisch](https://formisch.dev), the lightweight, schema-first, and fully type-safe form library for React. We'll create forms with the `<Field />` component, validate them with Valibot schemas, handle errors, and ensure accessibility.
-
-## Demo
-
-We'll build the following form. It has a simple text input and a textarea. On submit, we'll validate the form data and display any errors.
-
-<Callout icon={<InfoIcon />}>
-  **Note:** For the purpose of this demo, we have intentionally disabled browser
-  validation to show how schema validation and form errors work in Formisch. It
-  is recommended to add basic browser validation in your production code.
-</Callout>
-
-<ComponentPreview
-  name="form-formisch-demo"
-  className="sm:[&_.preview]:h-[700px]"
-  chromeLessOnMobile
-/>
-
-## Approach
-
-This form leverages Formisch for headless, schema-first form handling. We'll build our form using the `<Field />` component, which gives you **complete flexibility over the markup and styling**.
-
-- Uses Formisch's `useForm` hook for form state management.
-- `<Form />` component to wrap the native `<form>` element with submit handling.
-- `<Field />` render-prop component for controlled inputs.
-- Schema validation using [Valibot](https://valibot.dev).
-- Type-safe field paths inferred from the schema.
-
-## Form Methods
-
-Formisch exposes form operations as **top-level functions** rather than methods on a form object. Import only what you need:
-
-```ts
-import { getInput, insert, reset, submit } from "@formisch/react"
-```
-
-Every method follows the same signature: the **first parameter is always the form store**, and the **second parameter (if necessary) is always a config object**.
-
-```ts
-// Read a field value
-const email = getInput(form, { path: ["email"] })
-
-// Reset the form with new initial values
-reset(form, { initialInput: { email: "", password: "" } })
-
-// Move an item in a field array
-move(form, { path: ["items"], from: 0, to: 3 })
-```
-
-This design keeps the API flexible and consistent across all methods. You'll see the same `(form, config)` shape used throughout this guide for reading state (`getInput`, `getErrors`), writing state (`setInput`, `setErrors`), form control (`submit`, `validate`, `focus`), and array operations (`insert`, `remove`, `move`, `swap`, `replace`). See the [full methods reference](https://formisch.dev/react/guides/form-methods) for details.
-
-## Anatomy
-
-Here's a basic example of a form using the `<Field />` component from Formisch and the shadcn `<Field />` component.
-
-```tsx showLineNumbers {3-21}
-<Form of={form} onSubmit={handleSubmit}>
-  <FieldGroup>
-    <FormischField of={form} path={["title"]}>
-      {(field) => (
-        <Field data-invalid={field.errors !== null}>
-          <FieldLabel htmlFor="form-title">Bug Title</FieldLabel>
-          <Input
-            {...field.props}
-            id="form-title"
-            value={field.input}
-            aria-invalid={field.errors !== null}
-            placeholder="Login button not working on mobile"
-            autoComplete="off"
-          />
-          <FieldDescription>
-            Provide a concise title for your bug report.
-          </FieldDescription>
-          {field.errors && (
-            <FieldError errors={field.errors.map((message) => ({ message }))} />
-          )}
-        </Field>
-      )}
-    </FormischField>
-  </FieldGroup>
-</Form>
-```
-
-<Callout icon={<InfoIcon />}>
-  **Note:** Formisch ships its own `Field` component. To avoid a name clash with
-  the shadcn `Field`, the examples below import the Formisch one as
-  `FormischField` and keep the shadcn `Field` under its original name. In your
-  own code you can alias either side — just be consistent.
-</Callout>
-
-## Form
-
-### Create a form schema
-
-We'll start by defining the shape of our form using a Valibot schema. Formisch infers all input and output types directly from this schema.
-
-```tsx showLineNumbers title="form.tsx"
-import * as v from "valibot"
-
-const FormSchema = v.object({
-  title: v.pipe(
-    v.string(),
-    v.minLength(5, "Bug title must be at least 5 characters."),
-    v.maxLength(32, "Bug title must be at most 32 characters.")
-  ),
-  description: v.pipe(
-    v.string(),
-    v.minLength(20, "Description must be at least 20 characters."),
-    v.maxLength(100, "Description must be at most 100 characters.")
-  ),
-})
-```
-
-### Set up the form
-
-Next, we'll use the `useForm` hook from Formisch to create our form instance. The schema is passed directly to `useForm` — there is no resolver step.
-
-```tsx showLineNumbers title="form.tsx" {1-2,21-25}
-import { Form, Field as FormischField, useForm } from "@formisch/react"
-import type { SubmitHandler } from "@formisch/react"
-import * as v from "valibot"
-
-const FormSchema = v.object({
-  title: v.pipe(
-    v.string(),
-    v.minLength(5, "Bug title must be at least 5 characters."),
-    v.maxLength(32, "Bug title must be at most 32 characters.")
-  ),
-  description: v.pipe(
-    v.string(),
-    v.minLength(20, "Description must be at least 20 characters."),
-    v.maxLength(100, "Description must be at most 100 characters.")
-  ),
-})
-
-export function BugReportForm() {
-  const form = useForm({
-    schema: FormSchema,
-    initialInput: {
-      title: "",
-      description: "",
-    },
-  })
-
-  const handleSubmit: SubmitHandler<typeof FormSchema> = (output) => {
-    // Do something with the validated form values.
-    console.log(output)
-  }
-
-  return (
-    <Form of={form} onSubmit={handleSubmit}>
-      {/* ... */}
-      {/* Build the form here */}
-      {/* ... */}
-    </Form>
-  )
-}
-```
-
-The `<Form />` component wraps a native `<form>` element. It calls `event.preventDefault()`, runs validation, and only invokes `onSubmit` when the data is valid. The `output` you receive is fully typed from the schema.
-
-### Build the form
-
-We can now build the form using the `<Field />` component from Formisch and the shadcn `<Field />` component.
-
-<ComponentSource
-  src="/registry/new-york-v4/examples/form-formisch-demo.tsx"
-  title="form.tsx"
-/>
-
-### Done
-
-That's it. You now have a fully accessible form with client-side validation.
-
-When you submit the form, the `handleSubmit` function will be called with the validated form data. If the form data is invalid, Formisch will populate `field.errors` for each invalid field and the UI will display them.
-
-## Validation
-
-### Client-side Validation
-
-Formisch validates your form data using the Valibot schema you pass to `useForm`. There is no resolver — the schema is the single source of truth for both runtime validation and static types.
-
-```tsx showLineNumbers title="form.tsx" {1,3-6,11}
-import { useForm } from "@formisch/react"
-
-const FormSchema = v.object({
-  title: v.string(),
-  description: v.optional(v.string()),
-})
-
-export function ExampleForm() {
-  const form = useForm({
-    schema: FormSchema,
-    initialInput: {
-      title: "",
-      description: "",
-    },
-  })
-}
-```
-
-### Validation Modes
-
-Formisch separates the **first** validation from **subsequent** validations. You configure them with the `validate` and `revalidate` options on `useForm`.
-
-```tsx showLineNumbers title="form.tsx" {3-4}
-const form = useForm({
-  schema: FormSchema,
-  validate: "blur",
-  revalidate: "input",
-})
-```
-
-| Option       | Value       | Description                                                     |
-| ------------ | ----------- | --------------------------------------------------------------- |
-| `validate`   | `"submit"`  | Validate on form submission (default).                          |
-| `validate`   | `"blur"`    | Validate when a field loses focus.                              |
-| `validate`   | `"input"`   | Validate on every input change.                                 |
-| `validate`   | `"initial"` | Validate immediately on form creation.                          |
-| `revalidate` | `"input"`   | Revalidate on every input change after the first run (default). |
-| `revalidate` | `"blur"`    | Revalidate on blur after the first run.                         |
-| `revalidate` | `"submit"`  | Revalidate only on form submission.                             |
-
-## Displaying Errors
-
-Display errors next to the field using `<FieldError />`. Formisch returns errors as an array of strings, so map them to the shape `<FieldError />` expects. For styling and accessibility:
-
-- Add the `data-invalid` prop to the `<Field />` component.
-- Add the `aria-invalid` prop to the form control such as `<Input />`, `<SelectTrigger />`, `<Checkbox />`, etc.
-
-```tsx showLineNumbers title="form.tsx" {3,10,12-14}
-<FormischField of={form} path={["email"]}>
-  {(field) => (
-    <Field data-invalid={field.errors !== null}>
-      <FieldLabel htmlFor="form-email">Email</FieldLabel>
-      <Input
-        {...field.props}
-        id="form-email"
-        value={field.input}
-        type="email"
-        aria-invalid={field.errors !== null}
-      />
-      {field.errors && (
-        <FieldError errors={field.errors.map((message) => ({ message }))} />
-      )}
-    </Field>
-  )}
-</FormischField>
-```
-
-## Working with Different Field Types
-
-Formisch exposes two ways to bind a field to an element:
-
-- **Native HTML elements** (like `<Input />` and `<Textarea />`) — spread `field.props` and provide `value={field.input}`. Formisch wires up `name`, `ref`, `onChange`, `onBlur`, and `onFocus` for you.
-- **Component-library inputs** (like Radix-based `<Select />`, `<Checkbox />`, `<RadioGroup />`, `<Switch />`) — read the value from `field.input` and call `field.onChange(value)` to update it.
-
-### Input
-
-- For input fields, spread `field.props` and provide `value={field.input}`.
-- To show errors, add the `aria-invalid` prop to the `<Input />` component and the `data-invalid` prop to the `<Field />` component.
-
-<ComponentPreview
-  name="form-formisch-input"
-  className="sm:[&_.preview]:h-[700px]"
-  chromeLessOnMobile
-/>
-
-```tsx showLineNumbers title="form.tsx" {5-8}
-<FormischField of={form} path={["username"]}>
-  {(field) => (
-    <Field data-invalid={field.errors !== null}>
-      <FieldLabel htmlFor="form-username">Username</FieldLabel>
-      <Input
-        {...field.props}
-        id="form-username"
-        value={field.input}
-        aria-invalid={field.errors !== null}
-      />
-      {field.errors && (
-        <FieldError errors={field.errors.map((message) => ({ message }))} />
-      )}
-    </Field>
-  )}
-</FormischField>
-```
-
-### Textarea
-
-- For textarea fields, spread `field.props` and provide `value={field.input}`.
-- To show errors, add the `aria-invalid` prop to the `<Textarea />` component and the `data-invalid` prop to the `<Field />` component.
-
-<ComponentPreview
-  name="form-formisch-textarea"
-  className="sm:[&_.preview]:h-[700px]"
-  chromeLessOnMobile
-/>
-
-```tsx showLineNumbers title="form.tsx" {7-10}
-<FormischField of={form} path={["about"]}>
-  {(field) => (
-    <Field data-invalid={field.errors !== null}>
-      <FieldLabel htmlFor="form-about">More about you</FieldLabel>
-      <Textarea
-        {...field.props}
-        id="form-about"
-        value={field.input}
-        aria-invalid={field.errors !== null}
-        placeholder="I'm a software engineer..."
-        className="min-h-[120px]"
-      />
-      <FieldDescription>
-        Tell us more about yourself. This will be used to help us personalize
-        your experience.
-      </FieldDescription>
-      {field.errors && (
-        <FieldError errors={field.errors.map((message) => ({ message }))} />
-      )}
-    </Field>
-  )}
-</FormischField>
-```
-
-### Select
-
-- For select components, read `field.input` and call `field.onChange` from `<Select />`'s `onValueChange`.
-- To show errors, add the `aria-invalid` prop to the `<SelectTrigger />` component and the `data-invalid` prop to the `<Field />` component.
-
-<ComponentPreview
-  name="form-formisch-select"
-  className="sm:[&_.preview]:h-[500px]"
-  chromeLessOnMobile
-/>
-
-```tsx showLineNumbers title="form.tsx" {15-19}
-<FormischField of={form} path={["language"]}>
-  {(field) => (
-    <Field orientation="responsive" data-invalid={field.errors !== null}>
-      <FieldContent>
-        <FieldLabel htmlFor="form-language">Spoken Language</FieldLabel>
-        <FieldDescription>
-          For best results, select the language you speak.
-        </FieldDescription>
-        {field.errors && (
-          <FieldError errors={field.errors.map((message) => ({ message }))} />
-        )}
-      </FieldContent>
-      <Select value={field.input} onValueChange={field.onChange}>
-        <SelectTrigger
-          id="form-language"
-          aria-invalid={field.errors !== null}
-          className="min-w-[120px]"
-        >
-          <SelectValue placeholder="Select" />
-        </SelectTrigger>
-        <SelectContent position="item-aligned">
-          <SelectItem value="auto">Auto</SelectItem>
-          <SelectItem value="en">English</SelectItem>
-        </SelectContent>
-      </Select>
-    </Field>
-  )}
-</FormischField>
-```
-
-### Checkbox
-
-- For checkbox arrays, read `field.input` and update it from `onCheckedChange` using `field.onChange`.
-- To show errors, add the `aria-invalid` prop to the `<Checkbox />` component and the `data-invalid` prop to the `<Field />` component.
-- Remember to add `data-slot="checkbox-group"` to the `<FieldGroup />` component for proper styling and spacing.
-
-<ComponentPreview
-  name="form-formisch-checkbox"
-  className="sm:[&_.preview]:h-[700px]"
-  chromeLessOnMobile
-/>
-
-```tsx showLineNumbers title="form.tsx" {16,19-25}
-<FormischField of={form} path={["tasks"]}>
-  {(field) => (
-    <FieldSet>
-      <FieldLegend variant="label">Tasks</FieldLegend>
-      <FieldDescription>
-        Get notified when tasks you&apos;ve created have updates.
-      </FieldDescription>
-      <FieldGroup data-slot="checkbox-group">
-        {tasks.map((task) => (
-          <Field
-            key={task.id}
-            orientation="horizontal"
-            data-invalid={field.errors !== null}
-          >
-            <Checkbox
-              id={`form-checkbox-${task.id}`}
-              aria-invalid={field.errors !== null}
-              checked={field.input?.includes(task.id) ?? false}
-              onCheckedChange={(checked) => {
-                const current = field.input ?? []
-                field.onChange(
-                  checked === true
-                    ? [...current, task.id]
-                    : current.filter((value) => value !== task.id)
-                )
-              }}
-            />
-            <FieldLabel
-              htmlFor={`form-checkbox-${task.id}`}
-              className="font-normal"
-            >
-              {task.label}
-            </FieldLabel>
-          </Field>
-        ))}
-      </FieldGroup>
-      {field.errors && (
-        <FieldError errors={field.errors.map((message) => ({ message }))} />
-      )}
-    </FieldSet>
-  )}
-</FormischField>
-```
-
-### Radio Group
-
-- For radio groups, read `field.input` and call `field.onChange` from `onValueChange`.
-- To show errors, add the `aria-invalid` prop to the `<RadioGroupItem />` component and the `data-invalid` prop to the `<Field />` component.
-
-<ComponentPreview
-  name="form-formisch-radiogroup"
-  className="sm:[&_.preview]:h-[700px]"
-  chromeLessOnMobile
-/>
-
-```tsx showLineNumbers title="form.tsx" {9-13,21}
-<FormischField of={form} path={["plan"]}>
-  {(field) => (
-    <FieldSet>
-      <FieldLegend>Plan</FieldLegend>
-      <FieldDescription>
-        You can upgrade or downgrade your plan at any time.
-      </FieldDescription>
-      <RadioGroup value={field.input} onValueChange={field.onChange}>
-        {plans.map((plan) => (
-          <FieldLabel key={plan.id} htmlFor={`form-radiogroup-${plan.id}`}>
-            <Field
-              orientation="horizontal"
-              data-invalid={field.errors !== null}
-            >
-              <FieldContent>
-                <FieldTitle>{plan.title}</FieldTitle>
-                <FieldDescription>{plan.description}</FieldDescription>
-              </FieldContent>
-              <RadioGroupItem
-                value={plan.id}
-                id={`form-radiogroup-${plan.id}`}
-                aria-invalid={field.errors !== null}
-              />
-            </Field>
-          </FieldLabel>
-        ))}
-      </RadioGroup>
-      {field.errors && (
-        <FieldError errors={field.errors.map((message) => ({ message }))} />
-      )}
-    </FieldSet>
-  )}
-</FormischField>
-```
-
-### Switch
-
-- For switches, read `field.input` and call `field.onChange` from `onCheckedChange`.
-- To show errors, add the `aria-invalid` prop to the `<Switch />` component and the `data-invalid` prop to the `<Field />` component.
-
-<ComponentPreview
-  name="form-formisch-switch"
-  className="sm:[&_.preview]:h-[500px]"
-  chromeLessOnMobile
-/>
-
-```tsx showLineNumbers title="form.tsx" {15-19}
-<FormischField of={form} path={["twoFactor"]}>
-  {(field) => (
-    <Field orientation="horizontal" data-invalid={field.errors !== null}>
-      <FieldContent>
-        <FieldLabel htmlFor="form-twoFactor">
-          Multi-factor authentication
-        </FieldLabel>
-        <FieldDescription>
-          Enable multi-factor authentication to secure your account.
-        </FieldDescription>
-        {field.errors && (
-          <FieldError errors={field.errors.map((message) => ({ message }))} />
-        )}
-      </FieldContent>
-      <Switch
-        id="form-twoFactor"
-        checked={field.input ?? false}
-        onCheckedChange={field.onChange}
-        aria-invalid={field.errors !== null}
-      />
-    </Field>
-  )}
-</FormischField>
-```
-
-### Complex Forms
-
-Here is an example of a more complex form with multiple fields and validation.
-
-<ComponentPreview
-  name="form-formisch-complex"
-  className="sm:[&_.preview]:h-[1300px]"
-  chromeLessOnMobile
-/>
-
-## Resetting the Form
-
-Formisch exposes a top-level `reset` function. Pass the form store to reset it to its initial input.
-
-```tsx showLineNumbers
-<Button type="button" variant="outline" onClick={() => reset(form)}>
-  Reset
-</Button>
-```
-
-You can also reset to new initial values, or reset while keeping the user's current input:
-
-```tsx showLineNumbers
-// Reset to a fresh set of initial values
-reset(form, { initialInput: { title: "", description: "" } })
-
-// Sync the baseline to new server data, but keep the user's edits
-reset(form, { initialInput: serverData, keepInput: true })
-```
-
-## Array Fields
-
-Formisch provides a `<FieldArray />` component and a set of helper functions for managing dynamic array fields. Use it whenever you need to add, remove, or reorder items.
-
-<ComponentPreview
-  name="form-formisch-array"
-  className="sm:[&_.preview]:h-[700px]"
-  chromeLessOnMobile
-/>
-
-### Using FieldArray
-
-`<FieldArray />` follows the same render-prop pattern as `<Field />`. Its `items` array contains a stable key per item that you should use as the React `key`.
-
-```tsx showLineNumbers title="form.tsx" {1,7-22}
-import {
-  Field as FormischField,
-  FieldArray,
-  insert,
-  remove,
-} from "@formisch/react"
-
-export function ExampleForm() {
-  // ... form config
-
-  return (
-    <FieldArray of={form} path={["emails"]}>
-      {(fieldArray) => (
-        <FieldGroup className="gap-4">
-          {fieldArray.items.map((item, index) => (
-            <FormischField
-              key={item}
-              of={form}
-              path={["emails", index, "address"]}
-            >
-              {(field) => /* ... */}
-            </FormischField>
-          ))}
-        </FieldGroup>
-      )}
-    </FieldArray>
-  )
-}
-```
-
-### Array Field Structure
-
-Wrap your array fields in a `<FieldSet />` with a `<FieldLegend />` and `<FieldDescription />`.
-
-```tsx showLineNumbers title="form.tsx"
-<FieldSet className="gap-4">
-  <FieldLegend variant="label">Email Addresses</FieldLegend>
-  <FieldDescription>
-    Add up to 5 email addresses where we can contact you.
-  </FieldDescription>
-  <FieldGroup className="gap-4">{/* Array items go here */}</FieldGroup>
-</FieldSet>
-```
-
-### Adding Items
-
-Use the `insert` function to add new items to the array. By default new items are appended to the end. You can also pass an `at` index to insert at a specific position.
-
-```tsx showLineNumbers title="form.tsx"
-<Button
-  type="button"
-  variant="outline"
-  size="sm"
-  onClick={() =>
-    insert(form, { path: ["emails"], initialInput: { address: "" } })
-  }
-  disabled={fieldArray.items.length >= 5}
->
-  Add Email Address
-</Button>
-```
-
-### Removing Items
-
-Use the `remove` function with an `at` index to remove items from the array.
-
-```tsx showLineNumbers title="form.tsx"
-import { remove } from "@formisch/react"
-
-{
-  fieldArray.items.length > 1 && (
-    <InputGroupAddon align="inline-end">
-      <InputGroupButton
-        type="button"
-        variant="ghost"
-        size="icon-xs"
-        onClick={() => remove(form, { path: ["emails"], at: index })}
-        aria-label={`Remove email ${index + 1}`}
-      >
-        <XIcon />
-      </InputGroupButton>
-    </InputGroupAddon>
-  )
-}
-```
-
-Formisch also exposes `move`, `swap`, and `replace` for reordering and replacing items. They follow the same `(form, config)` signature.
-
-### Array Validation
-
-Use Valibot's `array` and pipeline validators to constrain array fields.
-
-```tsx showLineNumbers title="form.tsx"
-const FormSchema = v.object({
-  emails: v.pipe(
-    v.array(
-      v.object({
-        address: v.pipe(
-          v.string(),
-          v.nonEmpty("Enter an email address."),
-          v.email("Enter a valid email address.")
-        ),
-      })
-    ),
-    v.minLength(1, "Add at least one email address."),
-    v.maxLength(5, "You can add up to 5 email addresses.")
-  ),
-})
-```

apps/v4/content/docs/forms/index.mdx

@@ -25,24 +25,6 @@ Start by selecting your framework. Then follow the instructions to learn how to
     </svg>
     <p className="mt-2 font-medium">TanStack Form</p>
   </LinkedCard>
-  <LinkedCard href="/docs/forms/formisch">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
-      className="size-10"
-      fill="currentColor"
-    >
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="20"
-        d="M90.9 291.7 49 299.4v125.5l193.3 63.8 221-63.8V304.7l-62-13.7m-352.2 8.6 193.2 53.6V488m221-183.2-221.1 48.4m-171-67.7 147.5 47 212.7-48.3L437 76 271.9 25 72.1 66.3Zm1-219.3L220.5 118l-1.8 214m1.8-214.3 216.2-41.6m-84.4 159.6-.9 1.9c-5.2 11.3-16.2 34.8-33.5 35.5h-1a22 22 0 0 1-9.7-2.2 26 26 0 0 1-7.4-5.5c-4.3-4.4-7.4-10-10-14.5q-1.2-2.4-2.7-4.7a54 54 0 0 0 21.7 4.1 74 74 0 0 0 23.6-4 70 70 0 0 0 11.4-5 64 64 0 0 0 8.5-5.6M247.6 168c19.5-20.8 34.8-12.3 36-18.4 1.5-7-12.2-7.7-22.2-2.6s-18 17.7-13.8 21m101.2-33.2c1.6 2.6 8.7-1.6 19.5-1.2s15.8 5.7 18 4.1-4.6-14.7-17.1-15.2-22 9.7-20.4 12.3m21.2 16.3c9.4.6 17.1 12.8 16.1 27.6s-10.4 25.9-19.8 25.2-17.1-12.9-16.1-27.7 10.4-25.8 19.8-25.1m-97.4 19c11 1.2 19 15.1 17.4 30.5s-12.3 27.4-23.4 26.2-19-15-17.4-30.5 12.3-27.3 23.4-26.2"
-      />
-    </svg>
-    <p className="mt-2 font-medium">Formisch</p>
-  </LinkedCard>
   <LinkedCard href="#" className="border border-dashed bg-transparent">
     <svg
       role="img"

apps/v4/content/docs/forms/meta.json

@@ -1,3 +1,3 @@
 {
-  "pages": ["react-hook-form", "tanstack-form", "formisch"]
+  "pages": ["react-hook-form", "tanstack-form"]
 }

apps/v4/content/docs/installation/manual.mdx

@@ -41,9 +41,9 @@ Choose one of the following alias setups.
 ```json title="package.json" showLineNumbers
 {
   "imports": {
-    "#components/*": "./src/components/*.tsx",
-    "#lib/*": "./src/lib/*.ts",
-    "#hooks/*": "./src/hooks/*.ts"
+    "#components/*": "./src/components/*",
+    "#lib/*": "./src/lib/*",
+    "#hooks/*": "./src/hooks/*"
   }
 }
 ```
@@ -59,8 +59,8 @@ Choose one of the following alias setups.
 
 The `@` alias is a preference. You can use other aliases if you want. If you
 use `package.json#imports`, keep the matching alias roots in `components.json`.
-See the <Link href="/docs/package-imports">package imports guide</Link> for
-framework-specific setup.
+See the <Link href="/docs/components-json">components.json docs</Link> for the
+matching aliases and package imports behavior.
 
 ### Configure styles
 

apps/v4/content/docs/registry/examples.mdx

@@ -309,94 +309,6 @@ A `registry:hook` item is a custom React hook.
 }
 ```
 
-## Target Placeholders
-
-Use `files[].target` placeholders when a registry item should install files
-under the user's configured shadcn directories. The available placeholders are
-`@components/`, `@ui/`, `@lib/` and `@hooks/`.
-
-The placeholders are resolved from `components.json`, so the same registry item
-works in projects using `@/`, custom TypeScript aliases, package imports or
-workspace package exports.
-
-Anything after the placeholder is preserved. For example,
-`@ui/ai/prompt-input.tsx` installs under the user's configured `ui` directory
-at `ai/prompt-input.tsx`.
-
-```json title="alias-child.json" showLineNumbers {9,15,21}
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "alias-child",
-  "type": "registry:item",
-  "files": [
-    {
-      "path": "registry/new-york/alias/target-alias-button.tsx",
-      "type": "registry:ui",
-      "target": "@ui/target-alias-button.tsx",
-      "content": "..."
-    },
-    {
-      "path": "registry/new-york/alias/target-alias-helper.ts",
-      "type": "registry:lib",
-      "target": "@lib/target-alias-helper.ts",
-      "content": "..."
-    },
-    {
-      "path": "registry/new-york/alias/prompt-input.tsx",
-      "type": "registry:ui",
-      "target": "@ui/ai/prompt-input.tsx",
-      "content": "..."
-    }
-  ]
-}
-```
-
-Registry dependencies can use target placeholders too. In the following example,
-the child item installs a UI component and a helper, while the parent item
-installs an app component and a hook.
-
-```json title="alias-parent.json" showLineNumbers {7,13}
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "alias-parent",
-  "type": "registry:item",
-  "registryDependencies": ["https://example.com/r/alias-child.json"],
-  "files": [
-    {
-      "path": "registry/new-york/alias/target-alias-panel.tsx",
-      "type": "registry:component",
-      "target": "@components/target-alias-panel.tsx",
-      "content": "..."
-    },
-    {
-      "path": "registry/new-york/alias/use-target-alias.ts",
-      "type": "registry:hook",
-      "target": "@hooks/use-target-alias.ts",
-      "content": "..."
-    }
-  ]
-}
-```
-
-The `target` controls where the file is written, even when it differs from the
-file `type`.
-
-```json title="type-mismatch.json" showLineNumbers {9}
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "type-mismatch",
-  "type": "registry:item",
-  "files": [
-    {
-      "path": "registry/new-york/example/format-date.ts",
-      "type": "registry:ui",
-      "target": "@lib/format-date.ts",
-      "content": "..."
-    }
-  ]
-}
-```
-
 ## registry:font
 
 ### Custom font