Fix tracking empty preset code in init routes

Guard against tracking an empty preset value in both /init and /init/v0
routes. When no valid preset code is in the URL, getPresetCode encodes
one from the parsed config params. The conditional spread ensures an
empty string never reaches analytics.

https://claude.ai/code/session_018Mm7WJAaSUGSqamSm3RiyC

.gitignore

@@ -15,7 +15,6 @@ build
 
 # misc
 .DS_Store
-.eslintcache
 *.pem
 
 # debug
@@ -44,4 +43,3 @@ tsconfig.tsbuildinfo
 .notes
 .playwright-mcp
 shadcn-workspace
-.codex-artifacts

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

@@ -1,10 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { IconMinus, IconPlus } from "@tabler/icons-react"
-
-import { Button } from "@/styles/radix-nova/ui/button"
-import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import {
   Field,
   FieldContent,
@@ -15,10 +13,11 @@ import {
   FieldSeparator,
   FieldSet,
   FieldTitle,
-} from "@/styles/radix-nova/ui/field"
-import { Input } from "@/styles/radix-nova/ui/input"
-import { RadioGroup, RadioGroupItem } from "@/styles/radix-nova/ui/radio-group"
-import { Switch } from "@/styles/radix-nova/ui/switch"
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
+import { RadioGroup, RadioGroupItem } from "@/examples/radix/ui/radio-group"
+import { Switch } from "@/examples/radix/ui/switch"
+import { IconMinus, IconPlus } from "@tabler/icons-react"
 
 export function AppearanceSettings() {
   const [gpuCount, setGpuCount] = React.useState(8)

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

@@ -1,20 +1,8 @@
 "use client"
 
 import * as React from "react"
-import {
-  ArchiveIcon,
-  ArrowLeftIcon,
-  CalendarPlusIcon,
-  ClockIcon,
-  ListFilterIcon,
-  MailCheckIcon,
-  MoreHorizontalIcon,
-  TagIcon,
-  Trash2Icon,
-} from "lucide-react"
-
-import { Button } from "@/styles/radix-nova/ui/button"
-import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -27,7 +15,18 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/styles/radix-nova/ui/dropdown-menu"
+} from "@/examples/radix/ui/dropdown-menu"
+import {
+  ArchiveIcon,
+  ArrowLeftIcon,
+  CalendarPlusIcon,
+  ClockIcon,
+  ListFilterIcon,
+  MailCheckIcon,
+  MoreHorizontalIcon,
+  TagIcon,
+  Trash2Icon,
+} from "lucide-react"
 
 export function ButtonGroupDemo() {
   const [label, setLabel] = React.useState("personal")

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

@@ -1,21 +1,20 @@
 "use client"
 
 import * as React from "react"
-import { AudioLinesIcon, PlusIcon } from "lucide-react"
-
-import { Button } from "@/styles/radix-nova/ui/button"
-import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/styles/radix-nova/ui/input-group"
+} from "@/examples/radix/ui/input-group"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/styles/radix-nova/ui/tooltip"
+} from "@/examples/radix/ui/tooltip"
+import { AudioLinesIcon, PlusIcon } from "lucide-react"
 
 export function ButtonGroupInputGroup() {
   const [voiceEnabled, setVoiceEnabled] = React.useState(false)

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

@@ -1,10 +1,9 @@
 "use client"
 
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
 
-import { Button } from "@/styles/radix-nova/ui/button"
-import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
-
 export function ButtonGroupNested() {
   return (
     <ButtonGroup>

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

@@ -1,14 +1,13 @@
-import { BotIcon, ChevronDownIcon } from "lucide-react"
-
-import { Button } from "@/styles/radix-nova/ui/button"
-import { ButtonGroup } from "@/styles/radix-nova/ui/button-group"
+import { Button } from "@/examples/radix/ui/button"
+import { ButtonGroup } from "@/examples/radix/ui/button-group"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/styles/radix-nova/ui/popover"
-import { Separator } from "@/styles/radix-nova/ui/separator"
-import { Textarea } from "@/styles/radix-nova/ui/textarea"
+} from "@/examples/radix/ui/popover"
+import { Separator } from "@/examples/radix/ui/separator"
+import { Textarea } from "@/examples/radix/ui/textarea"
+import { BotIcon, ChevronDownIcon } from "lucide-react"
 
 export function ButtonGroupPopover() {
   return (

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

@@ -1,12 +1,10 @@
-import { PlusIcon } from "lucide-react"
-
 import {
   Avatar,
   AvatarFallback,
   AvatarGroup,
   AvatarImage,
-} from "@/styles/radix-nova/ui/avatar"
-import { Button } from "@/styles/radix-nova/ui/button"
+} from "@/examples/radix/ui/avatar"
+import { Button } from "@/examples/radix/ui/button"
 import {
   Empty,
   EmptyContent,
@@ -14,7 +12,8 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/styles/radix-nova/ui/empty"
+} from "@/examples/radix/ui/empty"
+import { PlusIcon } from "lucide-react"
 
 export function EmptyAvatarGroup() {
   return (

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

@@ -1,5 +1,5 @@
-import { Checkbox } from "@/styles/radix-nova/ui/checkbox"
-import { Field, FieldLabel } from "@/styles/radix-nova/ui/field"
+import { Checkbox } from "@/examples/radix/ui/checkbox"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
 
 export function FieldCheckbox() {
   return (

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

@@ -1,5 +1,5 @@
-import { Button } from "@/styles/radix-nova/ui/button"
-import { Checkbox } from "@/styles/radix-nova/ui/checkbox"
+import { Button } from "@/examples/radix/ui/button"
+import { Checkbox } from "@/examples/radix/ui/checkbox"
 import {
   Field,
   FieldDescription,
@@ -8,8 +8,8 @@ import {
   FieldLegend,
   FieldSeparator,
   FieldSet,
-} from "@/styles/radix-nova/ui/field"
-import { Input } from "@/styles/radix-nova/ui/input"
+} from "@/examples/radix/ui/field"
+import { Input } from "@/examples/radix/ui/input"
 import {
   Select,
   SelectContent,
@@ -17,8 +17,8 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/styles/radix-nova/ui/select"
-import { Textarea } from "@/styles/radix-nova/ui/textarea"
+} from "@/examples/radix/ui/select"
+import { Textarea } from "@/examples/radix/ui/textarea"
 
 export function FieldDemo() {
   return (

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

@@ -1,5 +1,5 @@
-import { Card, CardContent } from "@/styles/radix-nova/ui/card"
-import { Checkbox } from "@/styles/radix-nova/ui/checkbox"
+import { Card, CardContent } from "@/examples/radix/ui/card"
+import { Checkbox } from "@/examples/radix/ui/checkbox"
 import {
   Field,
   FieldDescription,
@@ -8,7 +8,7 @@ import {
   FieldLegend,
   FieldSet,
   FieldTitle,
-} from "@/styles/radix-nova/ui/field"
+} from "@/examples/radix/ui/field"
 
 const options = [
   {

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

@@ -1,13 +1,8 @@
 "use client"
 
 import { useState } from "react"
-
-import {
-  Field,
-  FieldDescription,
-  FieldTitle,
-} from "@/styles/radix-nova/ui/field"
-import { Slider } from "@/styles/radix-nova/ui/slider"
+import { Field, FieldDescription, FieldTitle } from "@/examples/radix/ui/field"
+import { Slider } from "@/examples/radix/ui/slider"
 
 export function FieldSlider() {
   const [value, setValue] = useState([200, 800])

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

@@ -1,4 +1,4 @@
-import { FieldSeparator } from "@/styles/radix-nova/ui/field"
+import { FieldSeparator } from "@/examples/radix/ui/field"
 
 import { AppearanceSettings } from "./appearance-settings"
 import { ButtonGroupDemo } from "./button-group-demo"

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

@@ -1,20 +1,19 @@
 "use client"
 
 import * as React from "react"
-import { IconInfoCircle, IconStar } from "@tabler/icons-react"
-
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/styles/radix-nova/ui/input-group"
-import { Label } from "@/styles/radix-nova/ui/label"
+} from "@/examples/radix/ui/input-group"
+import { Label } from "@/examples/radix/ui/label"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/styles/radix-nova/ui/popover"
+} from "@/examples/radix/ui/popover"
+import { IconInfoCircle, IconStar } from "@tabler/icons-react"
 
 export function InputGroupButtonExample() {
   const [isFavorite, setIsFavorite] = React.useState(false)

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

@@ -1,12 +1,9 @@
-import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
-import { ArrowUpIcon, Search } from "lucide-react"
-
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/styles/radix-nova/ui/dropdown-menu"
+} from "@/examples/radix/ui/dropdown-menu"
 import {
   InputGroup,
   InputGroupAddon,
@@ -14,13 +11,15 @@ import {
   InputGroupInput,
   InputGroupText,
   InputGroupTextarea,
-} from "@/styles/radix-nova/ui/input-group"
-import { Separator } from "@/styles/radix-nova/ui/separator"
+} from "@/examples/radix/ui/input-group"
+import { Separator } from "@/examples/radix/ui/separator"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/styles/radix-nova/ui/tooltip"
+} from "@/examples/radix/ui/tooltip"
+import { IconCheck, IconInfoCircle, IconPlus } from "@tabler/icons-react"
+import { ArrowUpIcon, Search } from "lucide-react"
 
 export function InputGroupDemo() {
   return (
@@ -89,7 +88,7 @@ export function InputGroupDemo() {
         <InputGroupInput placeholder="@shadcn" />
         <InputGroupAddon align="inline-end">
           <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
-            <IconCheck className="size-3 text-background" />
+            <IconCheck className="size-3 text-white" />
           </div>
         </InputGroupAddon>
       </InputGroup>

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

@@ -1,6 +1,4 @@
-import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
-
-import { Button } from "@/styles/radix-nova/ui/button"
+import { Button } from "@/examples/radix/ui/button"
 import {
   Item,
   ItemActions,
@@ -8,7 +6,8 @@ import {
   ItemDescription,
   ItemMedia,
   ItemTitle,
-} from "@/styles/radix-nova/ui/item"
+} from "@/examples/radix/ui/item"
+import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
 
 export function ItemDemo() {
   return (

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

@@ -1,24 +1,8 @@
 "use client"
 
 import { useMemo, useState } from "react"
-import {
-  IconApps,
-  IconArrowUp,
-  IconAt,
-  IconBook,
-  IconCircleDashedPlus,
-  IconPaperclip,
-  IconPlus,
-  IconWorld,
-  IconX,
-} from "@tabler/icons-react"
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/styles/radix-nova/ui/avatar"
-import { Badge } from "@/styles/radix-nova/ui/badge"
+import { Avatar, AvatarFallback, AvatarImage } from "@/examples/radix/ui/avatar"
+import { Badge } from "@/examples/radix/ui/badge"
 import {
   Command,
   CommandEmpty,
@@ -26,7 +10,7 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/styles/radix-nova/ui/command"
+} from "@/examples/radix/ui/command"
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -39,25 +23,36 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/styles/radix-nova/ui/dropdown-menu"
-import { Field, FieldLabel } from "@/styles/radix-nova/ui/field"
+} from "@/examples/radix/ui/dropdown-menu"
+import { Field, FieldLabel } from "@/examples/radix/ui/field"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupTextarea,
-} from "@/styles/radix-nova/ui/input-group"
+} from "@/examples/radix/ui/input-group"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/styles/radix-nova/ui/popover"
-import { Switch } from "@/styles/radix-nova/ui/switch"
+} from "@/examples/radix/ui/popover"
+import { Switch } from "@/examples/radix/ui/switch"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/styles/radix-nova/ui/tooltip"
+} from "@/examples/radix/ui/tooltip"
+import {
+  IconApps,
+  IconArrowUp,
+  IconAt,
+  IconBook,
+  IconCircleDashedPlus,
+  IconPaperclip,
+  IconPlus,
+  IconWorld,
+  IconX,
+} from "@tabler/icons-react"
 
 const SAMPLE_DATA = {
   mentionable: [

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

@@ -1,5 +1,5 @@
-import { Badge } from "@/styles/radix-nova/ui/badge"
-import { Spinner } from "@/styles/radix-nova/ui/spinner"
+import { Badge } from "@/examples/radix/ui/badge"
+import { Spinner } from "@/examples/radix/ui/spinner"
 
 export function SpinnerBadge() {
   return (

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

@@ -1,4 +1,4 @@
-import { Button } from "@/styles/radix-nova/ui/button"
+import { Button } from "@/examples/radix/ui/button"
 import {
   Empty,
   EmptyContent,
@@ -6,8 +6,8 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/styles/radix-nova/ui/empty"
-import { Spinner } from "@/styles/radix-nova/ui/spinner"
+} from "@/examples/radix/ui/empty"
+import { Spinner } from "@/examples/radix/ui/spinner"
 
 export function SpinnerEmpty() {
   return (

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

@@ -63,7 +63,11 @@ export default function IndexPage() {
           </Button>
         </PageActions>
       </PageHeader>
-      <div className="container-wrapper flex-1 pb-6">
+      <PageNav className="hidden md:flex">
+        <ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
+        <ThemeSelector className="mr-4 hidden md:flex" />
+      </PageNav>
+      <div className="container-wrapper flex-1 section-soft pb-6">
         <div className="container overflow-hidden">
           <section className="-mx-4 w-[160vw] overflow-hidden rounded-lg border border-border/50 md:hidden md:w-[150vw]">
             <Image

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

@@ -56,7 +56,7 @@ export default function BlocksLayout({
             <a href="#blocks">Browse Blocks</a>
           </Button>
           <Button asChild variant="ghost" size="sm">
-            <Link href="/docs/components">View Components</Link>
+            <Link href="/docs/blocks">Add a block</Link>
           </Button>
         </PageActions>
       </PageHeader>

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

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

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

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

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

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

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

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

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

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

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

@@ -1,17 +1,15 @@
 import Link from "next/link"
+import { Button } from "@/examples/radix/ui/button"
 import { mdxComponents } from "@/mdx-components"
 import { IconRss } from "@tabler/icons-react"
 
 import { getChangelogPages, type ChangelogPageData } from "@/lib/changelog"
 import { absoluteUrl } from "@/lib/utils"
 import { OpenInV0Cta } from "@/components/open-in-v0-cta"
-import { Button } from "@/styles/radix-nova/ui/button"
 
 export const revalidate = false
 export const dynamic = "force-static"
 
-const NUMBER_OF_LATEST_PAGES = 2
-
 export function generateMetadata() {
   return {
     title: "Changelog",
@@ -36,8 +34,8 @@ export function generateMetadata() {
 
 export default function ChangelogPage() {
   const pages = getChangelogPages()
-  const latestPages = pages.slice(0, NUMBER_OF_LATEST_PAGES)
-  const olderPages = pages.slice(NUMBER_OF_LATEST_PAGES)
+  const latestPages = pages.slice(0, 5)
+  const olderPages = pages.slice(5)
 
   return (
     <div
@@ -46,7 +44,7 @@ export default function ChangelogPage() {
     >
       <div className="flex min-w-0 flex-1 flex-col">
         <div className="h-(--top-spacing) shrink-0" />
-        <div className="mx-auto flex w-full max-w-160 min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
+        <div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
           <div className="flex flex-col gap-2">
             <div className="flex items-center justify-between">
               <h1 className="scroll-m-24 text-4xl font-semibold tracking-tight sm:text-3xl">

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

@@ -1,11 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { IconMinus, IconPlus } from "@tabler/icons-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-import { Button } from "@/styles/base-nova/ui-rtl/button"
-import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
+import { Button } from "@/examples/base/ui-rtl/button"
+import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
 import {
   Field,
   FieldContent,
@@ -16,13 +13,13 @@ import {
   FieldSeparator,
   FieldSet,
   FieldTitle,
-} from "@/styles/base-nova/ui-rtl/field"
-import { Input } from "@/styles/base-nova/ui-rtl/input"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/styles/base-nova/ui-rtl/radio-group"
-import { Switch } from "@/styles/base-nova/ui-rtl/switch"
+} from "@/examples/base/ui-rtl/field"
+import { Input } from "@/examples/base/ui-rtl/input"
+import { RadioGroup, RadioGroupItem } from "@/examples/base/ui-rtl/radio-group"
+import { Switch } from "@/examples/base/ui-rtl/switch"
+import { IconMinus, IconPlus } from "@tabler/icons-react"
+
+import { useLanguageContext } from "@/components/language-selector"
 
 const translations = {
   ar: {

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

@@ -1,21 +1,8 @@
 "use client"
 
 import * as React from "react"
-import {
-  ArchiveIcon,
-  ArrowLeftIcon,
-  CalendarPlusIcon,
-  ClockIcon,
-  ListFilterIcon,
-  MailCheckIcon,
-  MoreHorizontalIcon,
-  TagIcon,
-  Trash2Icon,
-} from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-import { Button } from "@/styles/base-nova/ui-rtl/button"
-import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
+import { Button } from "@/examples/base/ui-rtl/button"
+import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -29,7 +16,20 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/styles/base-nova/ui-rtl/dropdown-menu"
+} from "@/examples/base/ui-rtl/dropdown-menu"
+import {
+  ArchiveIcon,
+  ArrowLeftIcon,
+  CalendarPlusIcon,
+  ClockIcon,
+  ListFilterIcon,
+  MailCheckIcon,
+  MoreHorizontalIcon,
+  TagIcon,
+  Trash2Icon,
+} from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
 
 const translations = {
   ar: {

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

@@ -1,22 +1,22 @@
 "use client"
 
 import * as React from "react"
-import { AudioLinesIcon, PlusIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-import { Button } from "@/styles/base-nova/ui-rtl/button"
-import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
+import { Button } from "@/examples/base/ui-rtl/button"
+import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/styles/base-nova/ui-rtl/input-group"
+} from "@/examples/base/ui-rtl/input-group"
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/styles/base-nova/ui-rtl/tooltip"
+} from "@/examples/base/ui-rtl/tooltip"
+import { AudioLinesIcon, PlusIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
 
 const translations = {
   ar: {

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

@@ -1,10 +1,10 @@
 "use client"
 
+import { Button } from "@/examples/base/ui-rtl/button"
+import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
 import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react"
 
 import { useLanguageContext } from "@/components/language-selector"
-import { Button } from "@/styles/base-nova/ui-rtl/button"
-import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
 
 const translations = {
   ar: {

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

@@ -1,17 +1,17 @@
 "use client"
 
-import { BotIcon, ChevronDownIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-import { Button } from "@/styles/base-nova/ui-rtl/button"
-import { ButtonGroup } from "@/styles/base-nova/ui-rtl/button-group"
+import { Button } from "@/examples/base/ui-rtl/button"
+import { ButtonGroup } from "@/examples/base/ui-rtl/button-group"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/styles/base-nova/ui-rtl/popover"
-import { Separator } from "@/styles/base-nova/ui-rtl/separator"
-import { Textarea } from "@/styles/base-nova/ui-rtl/textarea"
+} from "@/examples/base/ui-rtl/popover"
+import { Separator } from "@/examples/base/ui-rtl/separator"
+import { Textarea } from "@/examples/base/ui-rtl/textarea"
+import { BotIcon, ChevronDownIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
 
 const translations = {
   ar: {

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

@@ -1,15 +1,12 @@
 "use client"
 
-import { PlusIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
 import {
   Avatar,
   AvatarFallback,
   AvatarGroup,
   AvatarImage,
-} from "@/styles/base-nova/ui-rtl/avatar"
-import { Button } from "@/styles/base-nova/ui-rtl/button"
+} from "@/examples/base/ui-rtl/avatar"
+import { Button } from "@/examples/base/ui-rtl/button"
 import {
   Empty,
   EmptyContent,
@@ -17,7 +14,10 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/styles/base-nova/ui-rtl/empty"
+} from "@/examples/base/ui-rtl/empty"
+import { PlusIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
 
 const translations = {
   ar: {

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

@@ -1,8 +1,9 @@
 "use client"
 
+import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
+import { Field, FieldLabel } from "@/examples/base/ui-rtl/field"
+
 import { useLanguageContext } from "@/components/language-selector"
-import { Checkbox } from "@/styles/base-nova/ui-rtl/checkbox"
-import { Field, FieldLabel } from "@/styles/base-nova/ui-rtl/field"
 
 const translations = {
   ar: {

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

@@ -1,8 +1,7 @@
 "use client"
 
-import { useLanguageContext } from "@/components/language-selector"
-import { Button } from "@/styles/base-nova/ui-rtl/button"
-import { Checkbox } from "@/styles/base-nova/ui-rtl/checkbox"
+import { Button } from "@/examples/base/ui-rtl/button"
+import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
 import {
   Field,
   FieldDescription,
@@ -11,8 +10,8 @@ import {
   FieldLegend,
   FieldSeparator,
   FieldSet,
-} from "@/styles/base-nova/ui-rtl/field"
-import { Input } from "@/styles/base-nova/ui-rtl/input"
+} from "@/examples/base/ui-rtl/field"
+import { Input } from "@/examples/base/ui-rtl/input"
 import {
   Select,
   SelectContent,
@@ -20,8 +19,10 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/styles/base-nova/ui-rtl/select"
-import { Textarea } from "@/styles/base-nova/ui-rtl/textarea"
+} from "@/examples/base/ui-rtl/select"
+import { Textarea } from "@/examples/base/ui-rtl/textarea"
+
+import { useLanguageContext } from "@/components/language-selector"
 
 const translations = {
   ar: {
@@ -139,7 +140,7 @@ export function FieldDemo() {
               <div className="grid grid-cols-2 gap-4">
                 <Field>
                   <FieldLabel htmlFor="rtl-exp-month">{t.month}</FieldLabel>
-                  <Select defaultValue="">
+                  <Select defaultValue="" items={months}>
                     <SelectTrigger id="rtl-exp-month">
                       <SelectValue placeholder="MM" />
                     </SelectTrigger>
@@ -156,7 +157,7 @@ export function FieldDemo() {
                 </Field>
                 <Field>
                   <FieldLabel htmlFor="rtl-exp-year">{t.year}</FieldLabel>
-                  <Select defaultValue="">
+                  <Select defaultValue="" items={years}>
                     <SelectTrigger id="rtl-exp-year">
                       <SelectValue placeholder="YYYY" />
                     </SelectTrigger>

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

@@ -1,8 +1,7 @@
 "use client"
 
-import { useLanguageContext } from "@/components/language-selector"
-import { Card, CardContent } from "@/styles/base-nova/ui-rtl/card"
-import { Checkbox } from "@/styles/base-nova/ui-rtl/checkbox"
+import { Card, CardContent } from "@/examples/base/ui-rtl/card"
+import { Checkbox } from "@/examples/base/ui-rtl/checkbox"
 import {
   Field,
   FieldDescription,
@@ -11,7 +10,9 @@ import {
   FieldLegend,
   FieldSet,
   FieldTitle,
-} from "@/styles/base-nova/ui-rtl/field"
+} from "@/examples/base/ui-rtl/field"
+
+import { useLanguageContext } from "@/components/language-selector"
 
 const translations = {
   ar: {

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

@@ -1,14 +1,14 @@
 "use client"
 
 import { useState } from "react"
-
-import { useLanguageContext } from "@/components/language-selector"
 import {
   Field,
   FieldDescription,
   FieldTitle,
-} from "@/styles/base-nova/ui-rtl/field"
-import { Slider } from "@/styles/base-nova/ui-rtl/slider"
+} from "@/examples/base/ui-rtl/field"
+import { Slider } from "@/examples/base/ui-rtl/slider"
+
+import { useLanguageContext } from "@/components/language-selector"
 
 const translations = {
   ar: {

apps/v4/app/(app)/examples/rtl/components/index.tsx

@@ -1,12 +1,13 @@
 "use client"
 
+import { DirectionProvider } from "@/examples/base/ui-rtl/direction"
+import { FieldSeparator } from "@/examples/base/ui-rtl/field"
+
 import {
   LanguageProvider,
   LanguageSelector,
   useLanguageContext,
 } from "@/components/language-selector"
-import { DirectionProvider } from "@/styles/base-nova/ui-rtl/direction"
-import { FieldSeparator } from "@/styles/base-nova/ui-rtl/field"
 
 import { AppearanceSettings } from "./appearance-settings"
 import { ButtonGroupDemo } from "./button-group-demo"

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

@@ -1,21 +1,21 @@
 "use client"
 
 import * as React from "react"
-import { IconInfoCircle, IconStar } from "@tabler/icons-react"
-
-import { useLanguageContext } from "@/components/language-selector"
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
   InputGroupInput,
-} from "@/styles/base-nova/ui-rtl/input-group"
-import { Label } from "@/styles/base-nova/ui-rtl/label"
+} from "@/examples/base/ui-rtl/input-group"
+import { Label } from "@/examples/base/ui-rtl/label"
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/styles/base-nova/ui-rtl/popover"
+} from "@/examples/base/ui-rtl/popover"
+import { IconInfoCircle, IconStar } from "@tabler/icons-react"
+
+import { useLanguageContext } from "@/components/language-selector"
 
 const translations = {
   ar: {

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

@@ -1,5 +1,25 @@
 "use client"
 
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui-rtl/dropdown-menu"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "@/examples/base/ui-rtl/input-group"
+import { Separator } from "@/examples/base/ui-rtl/separator"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui-rtl/tooltip"
 import {
   IconCheck,
   IconChevronDown,
@@ -9,26 +29,6 @@ import {
 import { ArrowUpIcon, Search } from "lucide-react"
 
 import { useLanguageContext } from "@/components/language-selector"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/styles/base-nova/ui-rtl/dropdown-menu"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@/styles/base-nova/ui-rtl/input-group"
-import { Separator } from "@/styles/base-nova/ui-rtl/separator"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/styles/base-nova/ui-rtl/tooltip"
 
 const translations = {
   ar: {

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

@@ -1,9 +1,6 @@
 "use client"
 
-import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
-
-import { useLanguageContext } from "@/components/language-selector"
-import { Button } from "@/styles/base-nova/ui-rtl/button"
+import { Button } from "@/examples/base/ui-rtl/button"
 import {
   Item,
   ItemActions,
@@ -11,7 +8,10 @@ import {
   ItemDescription,
   ItemMedia,
   ItemTitle,
-} from "@/styles/base-nova/ui-rtl/item"
+} from "@/examples/base/ui-rtl/item"
+import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
+
+import { useLanguageContext } from "@/components/language-selector"
 
 const translations = {
   ar: {

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

@@ -1,6 +1,47 @@
 "use client"
 
 import { useMemo, useState } from "react"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/examples/base/ui-rtl/avatar"
+import { Badge } from "@/examples/base/ui-rtl/badge"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/examples/base/ui-rtl/command"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/examples/base/ui-rtl/dropdown-menu"
+import { Field, FieldLabel } from "@/examples/base/ui-rtl/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupTextarea,
+} from "@/examples/base/ui-rtl/input-group"
+import { Popover, PopoverContent } from "@/examples/base/ui-rtl/popover"
+import { Switch } from "@/examples/base/ui-rtl/switch"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/examples/base/ui-rtl/tooltip"
 import {
   IconApps,
   IconArrowUp,
@@ -14,47 +55,6 @@ import {
 } from "@tabler/icons-react"
 
 import { useLanguageContext } from "@/components/language-selector"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/styles/base-nova/ui-rtl/avatar"
-import { Badge } from "@/styles/base-nova/ui-rtl/badge"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/styles/base-nova/ui-rtl/command"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/styles/base-nova/ui-rtl/dropdown-menu"
-import { Field, FieldLabel } from "@/styles/base-nova/ui-rtl/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupTextarea,
-} from "@/styles/base-nova/ui-rtl/input-group"
-import { Popover, PopoverContent } from "@/styles/base-nova/ui-rtl/popover"
-import { Switch } from "@/styles/base-nova/ui-rtl/switch"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/styles/base-nova/ui-rtl/tooltip"
 
 const translations = {
   ar: {

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

@@ -1,8 +1,9 @@
 "use client"
 
+import { Badge } from "@/examples/base/ui-rtl/badge"
+import { Spinner } from "@/examples/base/ui-rtl/spinner"
+
 import { useLanguageContext } from "@/components/language-selector"
-import { Badge } from "@/styles/base-nova/ui-rtl/badge"
-import { Spinner } from "@/styles/base-nova/ui-rtl/spinner"
 
 const translations = {
   ar: {

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

@@ -1,7 +1,6 @@
 "use client"
 
-import { useLanguageContext } from "@/components/language-selector"
-import { Button } from "@/styles/base-nova/ui-rtl/button"
+import { Button } from "@/examples/base/ui-rtl/button"
 import {
   Empty,
   EmptyContent,
@@ -9,8 +8,10 @@ import {
   EmptyHeader,
   EmptyMedia,
   EmptyTitle,
-} from "@/styles/base-nova/ui-rtl/empty"
-import { Spinner } from "@/styles/base-nova/ui-rtl/spinner"
+} from "@/examples/base/ui-rtl/empty"
+import { Spinner } from "@/examples/base/ui-rtl/spinner"
+
+import { useLanguageContext } from "@/components/language-selector"
 
 const translations = {
   ar: {

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

@@ -5,10 +5,10 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div
       data-slot="layout"
-      className="group/layout relative z-10 flex min-h-svh flex-col bg-background has-data-[slot=designer]:h-svh has-data-[slot=designer]:overflow-hidden"
+      className="relative z-10 flex min-h-svh flex-col bg-background"
     >
       <SiteHeader />
-      <main className="flex min-h-0 flex-1 flex-col">{children}</main>
+      <main className="flex flex-1 flex-col">{children}</main>
       <SiteFooter />
     </div>
   )

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

@@ -0,0 +1,64 @@
+import { type Metadata } from "next"
+import Link from "next/link"
+
+import { Announcement } from "@/components/announcement"
+import {
+  PageActions,
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+import { Button } from "@/registry/new-york-v4/ui/button"
+
+const title = "Pick a Color. Make it yours."
+const description =
+  "Try our hand-picked themes. Copy and paste them into your project. New theme editor coming soon."
+
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [
+      {
+        url: `/og?title=${encodeURIComponent(
+          title
+        )}&description=${encodeURIComponent(description)}`,
+      },
+    ],
+  },
+}
+
+export default function ThemesLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div>
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading>{title}</PageHeaderHeading>
+        <PageHeaderDescription>{description}</PageHeaderDescription>
+        <PageActions>
+          <Button asChild size="sm">
+            <a href="#themes">Browse Themes</a>
+          </Button>
+          <Button asChild variant="ghost" size="sm">
+            <Link href="/docs/theming">Documentation</Link>
+          </Button>
+        </PageActions>
+      </PageHeader>
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { CardsDemo } from "@/components/cards"
+import { ThemeCustomizer } from "@/components/theme-customizer"
+
+export const dynamic = "force-static"
+export const revalidate = false
+
+export default function ThemesPage() {
+  return (
+    <>
+      <div id="themes" className="container-wrapper scroll-mt-20">
+        <div className="container flex items-center justify-between gap-8 px-6 py-4 md:px-8">
+          <ThemeCustomizer />
+        </div>
+      </div>
+      <div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
+        <div className="container flex flex-1 flex-col theme-container">
+          <CardsDemo />
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -1,7 +1,7 @@
 "use client"
 
 import { MENU_ACCENTS, type MenuAccentValue } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -9,8 +9,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function MenuAccentPicker({
   isMobile,

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

@@ -1,8 +1,6 @@
 "use client"
 
 import Script from "next/script"
-import { type RegistryItem } from "shadcn/schema"
-
 import {
   Command,
   CommandDialog,
@@ -11,8 +9,10 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/styles/base-nova/ui/command"
-import { useActionMenu } from "@/app/(app)/create/hooks/use-action-menu"
+} from "@/examples/base/ui/command"
+import { type RegistryItem } from "shadcn/schema"
+
+import { useActionMenu } from "@/app/(create)/hooks/use-action-menu"
 
 export const CMD_K_FORWARD_TYPE = "cmd-k-forward"
 

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

@@ -4,7 +4,7 @@ import * as React from "react"
 
 import { useMounted } from "@/hooks/use-mounted"
 import { BASE_COLORS, type BaseColorName } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -12,8 +12,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function BaseColorPicker({
   isMobile,

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

@@ -10,8 +10,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function BasePicker({
   isMobile,

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

@@ -8,7 +8,7 @@ import {
   getThemesForBaseColor,
   type ChartColorName,
 } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -17,8 +17,8 @@ import {
   PickerRadioItem,
   PickerSeparator,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function ChartColorPicker({
   isMobile,

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

@@ -1,11 +1,11 @@
 "use client"
 
 import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
 
 import { cn } from "@/lib/utils"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
-import { Button } from "@/styles/base-nova/ui/button"
-import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
+import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
 
 export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
   const presetCode = usePresetCode()

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

@@ -1,43 +1,35 @@
 "use client"
 
 import * as React from "react"
-import dynamic from "next/dynamic"
-import { type RegistryItem } from "shadcn/schema"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { getThemesForBaseColor, STYLES } from "@/registry/config"
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
-} from "@/styles/base-nova/ui/card"
-import { FieldGroup, FieldSeparator } from "@/styles/base-nova/ui/field"
-import { MenuAccentPicker } from "@/app/(app)/create/components/accent-picker"
-import { ActionMenu } from "@/app/(app)/create/components/action-menu"
-import { BaseColorPicker } from "@/app/(app)/create/components/base-color-picker"
-import { BasePicker } from "@/app/(app)/create/components/base-picker"
-import { ChartColorPicker } from "@/app/(app)/create/components/chart-color-picker"
-import { CopyPreset } from "@/app/(app)/create/components/copy-preset"
-import { FontPicker } from "@/app/(app)/create/components/font-picker"
-import { IconLibraryPicker } from "@/app/(app)/create/components/icon-library-picker"
-import { MainMenu } from "@/app/(app)/create/components/main-menu"
-import { MenuColorPicker } from "@/app/(app)/create/components/menu-picker"
-import { RadiusPicker } from "@/app/(app)/create/components/radius-picker"
-import { RandomButton } from "@/app/(app)/create/components/random-button"
-import { ResetDialog } from "@/app/(app)/create/components/reset-button"
-import { StylePicker } from "@/app/(app)/create/components/style-picker"
-import { ThemePicker } from "@/app/(app)/create/components/theme-picker"
-import { V0Button } from "@/app/(app)/create/components/v0-button"
-import { FONT_HEADING_OPTIONS, FONTS } from "@/app/(app)/create/lib/fonts"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/examples/base/ui/card"
+import { FieldGroup, FieldSeparator } from "@/examples/base/ui/field"
+import { type RegistryItem } from "shadcn/schema"
 
-// Only visible when user clicks "Create Project".
-const ProjectForm = dynamic(() =>
-  import("@/app/(app)/create/components/project-form").then(
-    (m) => m.ProjectForm
-  )
-)
+import { useIsMobile } from "@/hooks/use-mobile"
+import { getThemesForBaseColor, STYLES } from "@/registry/config"
+import { MenuAccentPicker } from "@/app/(create)/components/accent-picker"
+import { ActionMenu } from "@/app/(create)/components/action-menu"
+import { BaseColorPicker } from "@/app/(create)/components/base-color-picker"
+import { BasePicker } from "@/app/(create)/components/base-picker"
+import { ChartColorPicker } from "@/app/(create)/components/chart-color-picker"
+import { CopyPreset } from "@/app/(create)/components/copy-preset"
+import { FontPicker } from "@/app/(create)/components/font-picker"
+import { IconLibraryPicker } from "@/app/(create)/components/icon-library-picker"
+import { MainMenu } from "@/app/(create)/components/main-menu"
+import { MenuColorPicker } from "@/app/(create)/components/menu-picker"
+import { RadiusPicker } from "@/app/(create)/components/radius-picker"
+import { RandomButton } from "@/app/(create)/components/random-button"
+import { ResetDialog } from "@/app/(create)/components/reset-button"
+import { StylePicker } from "@/app/(create)/components/style-picker"
+import { ThemePicker } from "@/app/(create)/components/theme-picker"
+import { V0Button } from "@/app/(create)/components/v0-button"
+import { FONT_HEADING_OPTIONS, FONTS } from "@/app/(create)/lib/fonts"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function Customizer({
   itemsByBase,
@@ -64,6 +56,7 @@ export function Customizer({
       </CardHeader>
       <CardContent className="no-scrollbar min-h-0 flex-1 overflow-x-auto overflow-y-hidden md:overflow-y-auto">
         <FieldGroup className="flex-row gap-2.5 py-px **:data-[slot=field-separator]:-mx-4 **:data-[slot=field-separator]:w-auto md:flex-col md:gap-3.25">
+          {isMobile && <BasePicker isMobile={isMobile} anchorRef={anchorRef} />}
           <StylePicker
             styles={STYLES}
             isMobile={isMobile}
@@ -98,18 +91,14 @@ export function Customizer({
           <FieldSeparator className="hidden md:block" />
           <MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
           <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
-          {isMobile && <BasePicker isMobile={isMobile} anchorRef={anchorRef} />}
         </FieldGroup>
       </CardContent>
-      <CardFooter className="flex min-w-0 gap-2 md:flex-col md:rounded-b-none md:**:[button,a]:w-full">
+      <CardFooter className="flex min-w-0 gap-2 md:flex-col md:**:[button,a]:w-full">
         <CopyPreset className="flex-1 md:flex-none" />
         <RandomButton className="flex-1 md:flex-none" />
         <ActionMenu itemsByBase={itemsByBase} />
         <ResetDialog />
       </CardFooter>
-      <CardFooter className="-mt-3 hidden min-w-0 gap-2 md:flex md:flex-col md:**:[button,a]:w-full">
-        <ProjectForm />
-      </CardFooter>
     </Card>
   )
 }

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

@@ -7,12 +7,12 @@ import {
   DEFAULT_CONFIG,
   type DesignSystemConfig,
 } from "@/registry/config"
-import { useIframeMessageListener } from "@/app/(app)/create/hooks/use-iframe-sync"
-import { FONTS } from "@/app/(app)/create/lib/fonts"
+import { useIframeMessageListener } from "@/app/(create)/hooks/use-iframe-sync"
+import { FONTS } from "@/app/(create)/lib/fonts"
 import {
   useDesignSystemSearchParams,
   type DesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/lib/search-params"
 
 const THEME_STYLE_ELEMENT_ID = "design-system-theme-vars"
 const MANAGED_BODY_CLASS_PREFIXES = ["style-", "base-color-"] as const

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

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -12,12 +12,12 @@ import {
   PickerRadioItem,
   PickerSeparator,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { FONTS } from "@/app/(app)/create/lib/fonts"
+} from "@/app/(create)/components/picker"
+import { FONTS } from "@/app/(create)/lib/fonts"
 import {
   useDesignSystemSearchParams,
   type DesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/lib/search-params"
 
 type FontPickerOption = {
   name: string
@@ -97,7 +97,7 @@ export function FontPicker({
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-xs text-muted-foreground">{label}</div>
-            <div className="line-clamp-1 max-w-[80%] truncate text-sm font-medium text-foreground">
+            <div className="text-sm font-medium text-foreground">
               {displayFontName}
             </div>
           </div>

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

@@ -1,11 +1,11 @@
 "use client"
 
 import Script from "next/script"
+import { Button } from "@/examples/base/ui/button"
 import { Redo02Icon, Undo02Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
-import { Button } from "@/styles/base-nova/ui/button"
-import { useHistory } from "@/app/(app)/create/hooks/use-history"
+import { useHistory } from "@/app/(create)/hooks/use-history"
 
 export const UNDO_FORWARD_TYPE = "undo-forward"
 export const REDO_FORWARD_TYPE = "redo-forward"

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import { iconLibraries, type IconLibraryName } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -11,8 +11,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 const logos = {
   lucide: (

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

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

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

@@ -2,16 +2,11 @@
 
 import * as React from "react"
 import Link from "next/link"
-import { ChevronRightIcon } from "lucide-react"
-import { type RegistryItem } from "shadcn/schema"
-
-import { cn } from "@/lib/utils"
-import { type Base } from "@/registry/bases"
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/styles/base-nova/ui/collapsible"
+} from "@/examples/base/ui/collapsible"
 import {
   Sidebar,
   SidebarContent,
@@ -20,9 +15,14 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "@/styles/base-nova/ui/sidebar"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
-import { groupItemsByType } from "@/app/(app)/create/lib/utils"
+} from "@/examples/base/ui/sidebar"
+import { ChevronRightIcon } from "lucide-react"
+import { type RegistryItem } from "shadcn/schema"
+
+import { cn } from "@/lib/utils"
+import { type Base } from "@/registry/bases"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { groupItemsByType } from "@/app/(create)/lib/utils"
 
 const cachedGroupedItems = React.cache(
   (items: Pick<RegistryItem, "name" | "title" | "type">[]) => {

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

@@ -7,10 +7,7 @@ import {
 import { HugeiconsIcon } from "@hugeicons/react"
 
 import { cn } from "@/lib/utils"
-import {
-  useLocks,
-  type LockableParam,
-} from "@/app/(app)/create/hooks/use-locks"
+import { useLocks, type LockableParam } from "@/app/(create)/hooks/use-locks"
 
 export function LockButton({
   param,

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

@@ -1,11 +1,11 @@
 "use client"
 
 import * as React from "react"
+import { type Button } from "@/examples/base/ui/button"
 import { Menu09Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
 import { cn } from "@/lib/utils"
-import { type Button } from "@/styles/base-nova/ui/button"
 import {
   Picker,
   PickerContent,
@@ -14,12 +14,12 @@ import {
   PickerSeparator,
   PickerShortcut,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useActionMenuTrigger } from "@/app/(app)/create/hooks/use-action-menu"
-import { useHistory } from "@/app/(app)/create/hooks/use-history"
-import { useRandom } from "@/app/(app)/create/hooks/use-random"
-import { useReset } from "@/app/(app)/create/hooks/use-reset"
-import { useThemeToggle } from "@/app/(app)/create/hooks/use-theme-toggle"
+} from "@/app/(create)/components/picker"
+import { useActionMenuTrigger } from "@/app/(create)/hooks/use-action-menu"
+import { useHistory } from "@/app/(create)/hooks/use-history"
+import { useRandom } from "@/app/(create)/hooks/use-random"
+import { useReset } from "@/app/(create)/hooks/use-reset"
+import { useThemeToggle } from "@/app/(create)/hooks/use-theme-toggle"
 
 const APPLE_PLATFORM_REGEX = /Mac|iPhone|iPad|iPod/
 
@@ -73,7 +73,7 @@ export function MainMenu({ className }: React.ComponentProps<typeof Button>) {
             </PickerItem>
             <PickerSeparator />
             <PickerItem onClick={() => setShowResetDialog(true)}>
-              Reset <PickerShortcut>⇧R</PickerShortcut>
+              Reset
             </PickerItem>
           </PickerGroup>
         </PickerContent>

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

@@ -7,7 +7,7 @@ import { useTheme } from "next-themes"
 
 import { useMounted } from "@/hooks/use-mounted"
 import { type MenuColorValue } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -17,11 +17,11 @@ import {
   PickerRadioItem,
   PickerSeparator,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
+} from "@/app/(create)/components/picker"
 import {
   isTranslucentMenuColor,
   useDesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/lib/search-params"
 
 type ColorChoice = "default" | "inverted"
 type SurfaceChoice = "solid" | "translucent"
@@ -104,7 +104,7 @@ export function MenuColorPicker({
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
             <div className="text-xs text-muted-foreground">Menu</div>
-            <div className="line-clamp-1 max-w-[80%] truncate text-sm font-medium text-foreground">
+            <div className="line-clamp-1 text-sm font-medium text-foreground">
               {currentMenu?.label}
             </div>
           </div>

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

@@ -2,10 +2,10 @@
 
 import * as React from "react"
 import Script from "next/script"
+import { Button } from "@/examples/base/ui/button"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/styles/base-nova/ui/button"
-import { useThemeToggle } from "@/app/(app)/create/hooks/use-theme-toggle"
+import { useThemeToggle } from "@/app/(create)/hooks/use-theme-toggle"
 
 export const DARK_MODE_FORWARD_TYPE = "dark-mode-forward"
 

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

@@ -4,7 +4,7 @@ import * as React from "react"
 import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 
 import { cn } from "@/registry/bases/base/lib/utils"
-import { IconPlaceholder } from "@/app/(app)/create/components/icon-placeholder"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 function Picker({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
@@ -19,7 +19,7 @@ function PickerTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
     <MenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
       className={cn(
-        "relative w-36 shrink-0 touch-manipulation rounded-xl p-3 ring-1 ring-foreground/10 select-none hover:bg-muted focus-visible:ring-foreground/50 focus-visible:outline-none disabled:opacity-50 data-popup-open:bg-muted md:w-full md:rounded-lg md:px-2.5 md:py-2",
+        "relative w-40 shrink-0 touch-manipulation rounded-xl p-3 ring-1 ring-foreground/10 select-none hover:bg-muted focus-visible:ring-foreground/50 focus-visible:outline-none disabled:opacity-50 data-popup-open:bg-muted md:w-full md:rounded-lg md:px-2.5 md:py-2",
         className
       )}
       {...props}

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

@@ -4,7 +4,7 @@ import * as React from "react"
 import { useRouter } from "next/navigation"
 import { generateRandomPreset, isPresetCode } from "shadcn/preset"
 
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function PresetHandler() {
   const router = useRouter()

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

@@ -10,8 +10,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function PresetPicker({
   presets,
@@ -112,6 +112,13 @@ export function PresetPicker({
                   closeOnClick={isMobile}
                 >
                   <div className="flex items-center gap-2">
+                    {style?.icon && (
+                      <div className="flex size-4 shrink-0 items-center justify-center">
+                        {React.cloneElement(style.icon, {
+                          className: "size-4",
+                        })}
+                      </div>
+                    )}
                     {preset.description}
                   </div>
                 </PickerRadioItem>

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

@@ -2,20 +2,18 @@
 
 import * as React from "react"
 
-import { CMD_K_FORWARD_TYPE } from "@/app/(app)/create/components/action-menu"
+import { CMD_K_FORWARD_TYPE } from "@/app/(create)/components/action-menu"
 import {
   REDO_FORWARD_TYPE,
   UNDO_FORWARD_TYPE,
-} from "@/app/(app)/create/components/history-buttons"
-import { DARK_MODE_FORWARD_TYPE } from "@/app/(app)/create/components/mode-switcher"
-import { PreviewSwitcher } from "@/app/(app)/create/components/preview-switcher"
-import { RANDOMIZE_FORWARD_TYPE } from "@/app/(app)/create/components/random-button"
-import { sendToIframe } from "@/app/(app)/create/hooks/use-iframe-sync"
-import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset"
+} from "@/app/(create)/components/history-buttons"
+import { DARK_MODE_FORWARD_TYPE } from "@/app/(create)/components/mode-switcher"
+import { RANDOMIZE_FORWARD_TYPE } from "@/app/(create)/components/random-button"
+import { sendToIframe } from "@/app/(create)/hooks/use-iframe-sync"
 import {
   serializeDesignSystemSearchParams,
   useDesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/lib/search-params"
 
 // Hoisted — avoids recreating on every message event. (js-hoist-regexp)
 const MAC_REGEX = /Mac|iPhone|iPad|iPod/
@@ -72,15 +70,6 @@ function handleMessage(event: MessageEvent) {
         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", {
@@ -148,7 +137,6 @@ export function Preview() {
           title="Preview"
         />
       </div>
-      <PreviewSwitcher />
     </div>
   )
 }

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

@@ -1,14 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Copy01Icon, Globe02Icon, Tick02Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import { cn } from "@/lib/utils"
-import { useConfig } from "@/hooks/use-config"
-import { copyToClipboardWithMeta } from "@/components/copy-button"
-import { BASES, type BaseName } from "@/registry/config"
-import { Button } from "@/styles/base-nova/ui/button"
+import { Button } from "@/examples/base/ui/button"
 import {
   Dialog,
   DialogContent,
@@ -17,7 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@/styles/base-nova/ui/dialog"
+} from "@/examples/base/ui/dialog"
 import {
   Field,
   FieldContent,
@@ -27,26 +20,33 @@ import {
   FieldSeparator,
   FieldSet,
   FieldTitle,
-} from "@/styles/base-nova/ui/field"
-import { RadioGroup, RadioGroupItem } from "@/styles/base-nova/ui/radio-group"
-import { Switch } from "@/styles/base-nova/ui/switch"
+} from "@/examples/base/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/base/ui/radio-group"
+import { Switch } from "@/examples/base/ui/switch"
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@/styles/base-nova/ui/tabs"
-import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
+} from "@/examples/base/ui/tabs"
+import { Copy01Icon, Globe02Icon, Tick02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { cn } from "@/lib/utils"
+import { useConfig } from "@/hooks/use-config"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { BASES, type BaseName } from "@/registry/config"
+import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
 import {
   useDesignSystemSearchParams,
   type DesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/lib/search-params"
 import {
   getFramework,
   getTemplateValue,
   NO_MONOREPO_FRAMEWORKS,
   TEMPLATES,
-} from "@/app/(app)/create/lib/templates"
+} from "@/app/(create)/lib/templates"
 
 const TURBOREPO_LOGO =
   '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Turborepo</title><path d="M11.9906 4.1957c-4.2998 0-7.7981 3.501-7.7981 7.8043s3.4983 7.8043 7.7981 7.8043c4.2999 0 7.7982-3.501 7.7982-7.8043s-3.4983-7.8043-7.7982-7.8043m0 11.843c-2.229 0-4.0356-1.8079-4.0356-4.0387s1.8065-4.0387 4.0356-4.0387S16.0262 9.7692 16.0262 12s-1.8065 4.0388-4.0356 4.0388m.6534-13.1249V0C18.9726.3386 24 5.5822 24 12s-5.0274 11.66-11.356 12v-2.9139c4.7167-.3372 8.4516-4.2814 8.4516-9.0861s-3.735-8.749-8.4516-9.0861M5.113 17.9586c-1.2502-1.4446-2.0562-3.2845-2.2-5.3046H0c.151 2.8266 1.2808 5.3917 3.051 7.3668l2.0606-2.0622zM11.3372 24v-2.9139c-2.02-.1439-3.8584-.949-5.3019-2.2018l-2.0606 2.0623c1.975 1.773 4.538 2.9022 7.361 3.0534z"/></svg>'
@@ -130,7 +130,7 @@ export function ProjectForm({
       <DialogTrigger render={<Button className={cn(className)} />}>
         Create Project
       </DialogTrigger>
-      <DialogContent className="dark no-scrollbar max-h-[calc(100svh-2rem)] overflow-y-auto rounded-2xl p-6 shadow-xl **:data-[slot=field-separator]:h-2 sm:max-w-sm">
+      <DialogContent className="dark no-scrollbar max-h-[calc(100svh-2rem)] overflow-y-auto rounded-2xl border-0 bg-neutral-800 p-6 text-foreground shadow-xl ring-1 ring-neutral-950/80 backdrop-blur-xl [--border:var(--color-neutral-700)]! sm:max-w-sm">
         <DialogHeader>
           <DialogTitle>Create Project</DialogTitle>
           <DialogDescription>
@@ -209,7 +209,7 @@ export function ProjectForm({
                   packageManager: value as PackageManager,
                 }))
               }}
-              className="min-w-0 gap-0 overflow-hidden rounded-xl border-0 ring-1 ring-border"
+              className="min-w-0 gap-0 overflow-hidden rounded-xl border-0 bg-neutral-950/20 ring-1 ring-neutral-950/80 dark:bg-neutral-900/50 dark:ring-neutral-700/50"
             >
               <div className="flex items-center gap-2 py-1 pr-1.5 pl-1">
                 <TabsList className="bg-transparent font-mono">
@@ -242,7 +242,7 @@ export function ProjectForm({
               {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="relative overflow-hidden border-t border-neutral-700/50 bg-neutral-900/50 px-3 py-3 text-neutral-100">
                       <div className="no-scrollbar overflow-x-auto">
                         <code className="font-mono text-sm whitespace-nowrap">
                           {cmd}

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import { RADII, type RadiusValue } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -12,8 +12,8 @@ import {
   PickerRadioItem,
   PickerSeparator,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function RadiusPicker({
   isMobile,

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

@@ -1,13 +1,12 @@
 "use client"
 
 import Script from "next/script"
+import { Button } from "@/examples/base/ui/button"
 import { DiceFaces05Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/styles/base-nova/ui/button"
-import { useRandom } from "@/app/(app)/create/hooks/use-random"
-import { RESET_FORWARD_TYPE } from "@/app/(app)/create/hooks/use-reset"
+import { useRandom } from "@/app/(create)/hooks/use-random"
 
 export const RANDOMIZE_FORWARD_TYPE = "randomize-forward"
 
@@ -41,7 +40,7 @@ export function RandomizeScript() {
       dangerouslySetInnerHTML={{
         __html: `
             (function() {
-              // Forward r key (shuffle) and Shift+R (reset).
+              // Forward R key
               document.addEventListener('keydown', function(e) {
                 if ((e.key === 'r' || e.key === 'R') && !e.metaKey && !e.ctrlKey) {
                   if (
@@ -54,11 +53,8 @@ export function RandomizeScript() {
                   }
                   e.preventDefault();
                   if (window.parent && window.parent !== window) {
-                    var type = e.shiftKey
-                      ? '${RESET_FORWARD_TYPE}'
-                      : '${RANDOMIZE_FORWARD_TYPE}';
                     window.parent.postMessage({
-                      type: type,
+                      type: '${RANDOMIZE_FORWARD_TYPE}',
                       key: e.key
                     }, '*');
                   }

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

@@ -9,8 +9,9 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/styles/base-nova/ui/alert-dialog"
-import { useReset } from "@/app/(app)/create/hooks/use-reset"
+} from "@/examples/base/ui/alert-dialog"
+
+import { useReset } from "@/app/(create)/hooks/use-reset"
 
 export function ResetDialog() {
   const { showResetDialog, setShowResetDialog, confirmReset } = useReset()

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

@@ -1,13 +1,13 @@
 "use client"
 
 import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
 import { Share03Icon, Tick02Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
 import { copyToClipboardWithMeta } from "@/components/copy-button"
-import { Button } from "@/styles/base-nova/ui/button"
-import { usePresetCode } from "@/app/(app)/create/hooks/use-design-system"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function ShareButton() {
   const [params] = useDesignSystemSearchParams()

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

@@ -3,7 +3,7 @@
 import * as React from "react"
 
 import { type Style, type StyleName } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -11,8 +11,8 @@ import {
   PickerRadioGroup,
   PickerRadioItem,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function StylePicker({
   styles,

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

@@ -4,7 +4,7 @@ import * as React from "react"
 
 import { useMounted } from "@/hooks/use-mounted"
 import { BASE_COLORS, type Theme, type ThemeName } from "@/registry/config"
-import { LockButton } from "@/app/(app)/create/components/lock-button"
+import { LockButton } from "@/app/(create)/components/lock-button"
 import {
   Picker,
   PickerContent,
@@ -13,8 +13,8 @@ import {
   PickerRadioItem,
   PickerSeparator,
   PickerTrigger,
-} from "@/app/(app)/create/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/components/picker"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function ThemePicker({
   themes,

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

@@ -1,14 +1,14 @@
 "use client"
 
 import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import { Skeleton } from "@/examples/base/ui/skeleton"
 
 import { cn } from "@/lib/utils"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { useMounted } from "@/hooks/use-mounted"
 import { Icons } from "@/components/icons"
-import { Button } from "@/styles/base-nova/ui/button"
-import { Skeleton } from "@/styles/base-nova/ui/skeleton"
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function V0Button({ className }: { className?: string }) {
   const [params] = useDesignSystemSearchParams()

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

@@ -1,9 +1,7 @@
 "use client"
 
 import * as React from "react"
-
-import { Icons } from "@/components/icons"
-import { Button } from "@/styles/base-nova/ui/button"
+import { Button } from "@/examples/base/ui/button"
 import {
   Dialog,
   DialogClose,
@@ -12,7 +10,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/styles/base-nova/ui/dialog"
+} from "@/examples/base/ui/dialog"
+
+import { Icons } from "@/components/icons"
 
 const STORAGE_KEY = "shadcn-create-welcome-dialog"
 

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

@@ -1,7 +1,7 @@
 import { Suspense } from "react"
 
-import { HistoryProvider } from "@/app/(app)/create/hooks/use-history"
-import { LocksProvider } from "@/app/(app)/create/hooks/use-locks"
+import { HistoryProvider } from "@/app/(create)/hooks/use-history"
+import { LocksProvider } from "@/app/(create)/hooks/use-locks"
 
 export default function CreateLayout({
   children,

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

@@ -1,21 +1,13 @@
-import { Suspense } from "react"
 import { type Metadata } from "next"
-import dynamic from "next/dynamic"
 
 import { siteConfig } from "@/lib/config"
 import { absoluteUrl } from "@/lib/utils"
-import { Skeleton } from "@/styles/base-nova/ui/skeleton"
-import { Customizer } from "@/app/(app)/create/components/customizer"
-import { PresetHandler } from "@/app/(app)/create/components/preset-handler"
-import { Preview } from "@/app/(app)/create/components/preview"
-import { getAllItems } from "@/app/(app)/create/lib/api"
-
-// Only shown on first visit (checks localStorage).
-const WelcomeDialog = dynamic(() =>
-  import("@/app/(app)/create/components/welcome-dialog").then(
-    (m) => m.WelcomeDialog
-  )
-)
+import { SiteHeader } from "@/components/site-header"
+import { Customizer } from "@/app/(create)/components/customizer"
+import { PresetHandler } from "@/app/(create)/components/preset-handler"
+import { Preview } from "@/app/(create)/components/preview"
+import { WelcomeDialog } from "@/app/(create)/components/welcome-dialog"
+import { getAllItems } from "@/app/(create)/lib/api"
 
 export const metadata: Metadata = {
   title: "New Project",
@@ -46,29 +38,24 @@ export const metadata: Metadata = {
   },
 }
 
-export default function CreatePage() {
+export default async function CreatePage() {
+  const itemsByBase = await getAllItems()
+
   return (
-    <div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-hidden section-soft [--customizer-width:--spacing(48)] [--gap:--spacing(4)] md:[--gap:--spacing(6)] 2xl:[--customizer-width:--spacing(56)]">
-      <div
+    <div
+      data-slot="layout"
+      className="group/layout relative z-10 flex h-svh flex-col overflow-hidden section-soft [--customizer-width:--spacing(56)] [--gap:--spacing(4)] md:[--gap:--spacing(6)]"
+    >
+      <SiteHeader />
+      <main
         data-slot="designer"
         className="flex min-h-0 flex-1 flex-col gap-(--gap) p-(--gap) pt-[calc(var(--gap)*0.25)] md:flex-row-reverse"
       >
         <Preview />
-        <Suspense
-          fallback={
-            <Skeleton className="isolate min-h-[151px] w-full self-start rounded-2xl md:h-full md:max-h-full md:min-h-0 md:w-(--customizer-width)" />
-          }
-        >
-          <CustomizerLoader />
-        </Suspense>
-      </div>
-      <PresetHandler />
-      <WelcomeDialog />
+        <Customizer itemsByBase={itemsByBase} />
+        <PresetHandler />
+        <WelcomeDialog />
+      </main>
     </div>
   )
 }
-
-async function CustomizerLoader() {
-  const itemsByBase = await getAllItems()
-  return <Customizer itemsByBase={itemsByBase} />
-}

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

@@ -4,8 +4,8 @@ import * as React from "react"
 import { type RegistryItem } from "shadcn/schema"
 import useSWR from "swr"
 
-import { useDesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
-import { groupItemsByType } from "@/app/(app)/create/lib/utils"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { groupItemsByType } from "@/app/(create)/lib/utils"
 
 const ACTION_MENU_OPEN_KEY = "create:action-menu-open"
 

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

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

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

@@ -1,8 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Suspense } from "react"
-import { useRouter, useSearchParams } from "next/navigation"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 
 type HistoryContextValue = {
   canGoBack: boolean
@@ -13,27 +12,11 @@ type HistoryContextValue = {
 
 const HistoryContext = React.createContext<HistoryContextValue | null>(null)
 
-// Reads useSearchParams() in its own Suspense boundary so the
-// provider never blanks out children while search params resolve.
-function PresetSync({
-  onPresetChange,
-}: {
-  onPresetChange: (preset: string) => void
-}) {
-  const searchParams = useSearchParams()
-  const preset = searchParams.get("preset") ?? ""
-
-  React.useEffect(() => {
-    onPresetChange(preset)
-  }, [preset, onPresetChange])
-
-  return null
-}
-
 export function HistoryProvider({ children }: { children: React.ReactNode }) {
   const router = useRouter()
-
-  const [preset, setPreset] = React.useState("")
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const preset = searchParams.get("preset") ?? ""
 
   const entriesRef = React.useRef<string[]>([preset])
   const indexRef = React.useRef(0)
@@ -43,10 +26,6 @@ export function HistoryProvider({ children }: { children: React.ReactNode }) {
   const [index, setIndex] = React.useState(0)
   const [maxIndex, setMaxIndex] = React.useState(0)
 
-  const onPresetChange = React.useCallback((nextPreset: string) => {
-    setPreset(nextPreset)
-  }, [])
-
   React.useEffect(() => {
     if (isNavigatingRef.current) {
       isNavigatingRef.current = false
@@ -88,10 +67,9 @@ export function HistoryProvider({ children }: { children: React.ReactNode }) {
     } else {
       params.delete("preset")
     }
-    const pathname = window.location.pathname
     const query = params.toString()
     router.replace(query ? `${pathname}?${query}` : pathname)
-  }, [router])
+  }, [pathname, router])
 
   const goForward = React.useCallback(() => {
     if (indexRef.current >= maxIndexRef.current) {
@@ -110,10 +88,9 @@ export function HistoryProvider({ children }: { children: React.ReactNode }) {
     } else {
       params.delete("preset")
     }
-    const pathname = window.location.pathname
     const query = params.toString()
     router.replace(query ? `${pathname}?${query}` : pathname)
-  }, [router])
+  }, [pathname, router])
 
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
@@ -156,14 +133,7 @@ export function HistoryProvider({ children }: { children: React.ReactNode }) {
     [canGoBack, canGoForward, goBack, goForward]
   )
 
-  return (
-    <HistoryContext value={value}>
-      <Suspense>
-        <PresetSync onPresetChange={onPresetChange} />
-      </Suspense>
-      {children}
-    </HistoryContext>
-  )
+  return <HistoryContext value={value}>{children}</HistoryContext>
 }
 
 export function useHistory() {

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

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import type { DesignSystemSearchParams } from "@/app/(app)/create/lib/search-params"
+import type { DesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 type ParentToIframeMessage = {
   type: "design-system-params"

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

@@ -24,15 +24,10 @@ const LocksContext = React.createContext<LocksContextValue | null>(null)
 
 export function LocksProvider({ children }: { children: React.ReactNode }) {
   const [locks, setLocks] = React.useState<Set<LockableParam>>(new Set())
-  const locksRef = React.useRef(locks)
-  React.useEffect(() => {
-    locksRef.current = locks
-  }, [locks])
 
-  // Stable callback — reads from ref so it doesn't change on every lock toggle.
   const isLocked = React.useCallback(
-    (param: LockableParam) => locksRef.current.has(param),
-    []
+    (param: LockableParam) => locks.has(param),
+    [locks]
   )
 
   const toggleLock = React.useCallback((param: LockableParam) => {

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

@@ -12,17 +12,17 @@ import {
   STYLES,
   type FontHeadingValue,
 } from "@/registry/config"
-import { useLocks } from "@/app/(app)/create/hooks/use-locks"
-import { FONTS } from "@/app/(app)/create/lib/fonts"
+import { useLocks } from "@/app/(create)/hooks/use-locks"
+import { FONTS } from "@/app/(create)/lib/fonts"
 import {
   applyBias,
   RANDOMIZE_BIASES,
   type RandomizeContext,
-} from "@/app/(app)/create/lib/randomize-biases"
+} from "@/app/(create)/lib/randomize-biases"
 import {
   isTranslucentMenuColor,
   useDesignSystemSearchParams,
-} from "@/app/(app)/create/lib/search-params"
+} from "@/app/(create)/lib/search-params"
 
 function randomItem<T>(array: readonly T[]): T {
   return array[Math.floor(Math.random() * array.length)]
@@ -156,7 +156,7 @@ export function useRandom() {
 
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
-      if (e.key === "r" && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
+      if ((e.key === "r" || e.key === "R") && !e.metaKey && !e.ctrlKey) {
         if (
           (e.target instanceof HTMLElement && e.target.isContentEditable) ||
           e.target instanceof HTMLInputElement ||

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

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import useSWR from "swr"
+
+import { DEFAULT_CONFIG } from "@/registry/config"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+const RESET_DIALOG_KEY = "create:reset-dialog-open"
+
+export function useReset() {
+  const [params, setParams] = useDesignSystemSearchParams()
+  const { data: showResetDialog = false, mutate: setShowResetDialogData } =
+    useSWR<boolean>(RESET_DIALOG_KEY, {
+      fallbackData: false,
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+      revalidateOnReconnect: false,
+    })
+
+  const reset = React.useCallback(() => {
+    setParams({
+      base: params.base,
+      style: DEFAULT_CONFIG.style,
+      baseColor: DEFAULT_CONFIG.baseColor,
+      theme: DEFAULT_CONFIG.theme,
+      chartColor: DEFAULT_CONFIG.chartColor,
+      iconLibrary: DEFAULT_CONFIG.iconLibrary,
+      font: DEFAULT_CONFIG.font,
+      fontHeading: DEFAULT_CONFIG.fontHeading,
+      menuAccent: DEFAULT_CONFIG.menuAccent,
+      menuColor: DEFAULT_CONFIG.menuColor,
+      radius: DEFAULT_CONFIG.radius,
+      template: DEFAULT_CONFIG.template,
+      item: "preview",
+    })
+  }, [setParams, params.base])
+
+  const handleShowResetDialogChange = React.useCallback(
+    (open: boolean) => {
+      void setShowResetDialogData(open, { revalidate: false })
+    },
+    [setShowResetDialogData]
+  )
+
+  const confirmReset = React.useCallback(() => {
+    reset()
+    void setShowResetDialogData(false, { revalidate: false })
+  }, [reset, setShowResetDialogData])
+
+  return {
+    reset,
+    showResetDialog,
+    setShowResetDialog: handleShowResetDialogChange,
+    confirmReset,
+  }
+}

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

@@ -4,7 +4,7 @@ import {
   designSystemConfigSchema,
   type DesignSystemConfig,
 } from "@/registry/config"
-import { resolvePresetOverrides } from "@/app/(app)/create/lib/preset-query"
+import { resolvePresetOverrides } from "@/app/(create)/lib/preset-query"
 
 // Parses design system config from URL search params.
 export function parseDesignSystemConfig(searchParams: URLSearchParams) {

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

@@ -4,8 +4,8 @@ import { isPresetCode } from "shadcn/preset"
 import { registryItemSchema } from "shadcn/schema"
 
 import { buildRegistryBase } from "@/registry/config"
-import { getPresetCode } from "@/app/(app)/create/lib/preset-code"
 import { parseDesignSystemConfig } from "@/app/(create)/init/parse-config"
+import { getPresetCode } from "@/app/(create)/lib/preset-code"
 
 export async function GET(request: NextRequest) {
   try {
@@ -38,7 +38,7 @@ export async function GET(request: NextRequest) {
     if (searchParams.get("track") === "1") {
       track("create_app", {
         ...result.data,
-        preset: presetCode,
+        ...(presetCode && { preset: presetCode }),
       })
     }
 

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

@@ -2,9 +2,9 @@ import { after, NextResponse, type NextRequest } from "next/server"
 import { track } from "@vercel/analytics/server"
 import { isPresetCode } from "shadcn/preset"
 
-import { getPresetCode } from "@/app/(app)/create/lib/preset-code"
-import { buildV0Payload } from "@/app/(app)/create/lib/v0"
 import { parseDesignSystemConfig } from "@/app/(create)/init/parse-config"
+import { getPresetCode } from "@/app/(create)/lib/preset-code"
+import { buildV0Payload } from "@/app/(create)/lib/v0"
 
 export async function GET(request: NextRequest) {
   try {
@@ -25,7 +25,7 @@ export async function GET(request: NextRequest) {
     after(() => {
       track("create_open_in_v0", {
         ...result.data,
-        preset: presetCode,
+        ...(presetCode && { preset: presetCode }),
       })
     })
 

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

@@ -6,7 +6,7 @@ import { BASES, getThemesForBaseColor, type BaseName } from "@/registry/config"
 import {
   ALLOWED_ITEM_TYPES,
   EXCLUDED_ITEMS,
-} from "@/app/(app)/create/lib/constants"
+} from "@/app/(create)/lib/constants"
 
 export async function getItemsForBase(base: BaseName) {
   const { Index } = await import("@/registry/bases/__index__")

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

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

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

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