diff --git a/apps/v4/app/(create)/components/accent-picker.tsx b/apps/v4/app/(create)/components/accent-picker.tsx
index 4df93b8104..992c5b6217 100644
--- a/apps/v4/app/(create)/components/accent-picker.tsx
+++ b/apps/v4/app/(create)/components/accent-picker.tsx
@@ -26,7 +26,7 @@ export function MenuAccentPicker({
   )
 
   return (
-    <div className="group/picker relative">
+    <div className="group/picker relative pr-3 md:pr-0">
       <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
@@ -35,7 +35,7 @@ export function MenuAccentPicker({
               {currentAccent?.label}
             </div>
           </div>
-          <div className="pointer-events-none absolute top-1/2 right-2 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="128"
@@ -78,7 +78,11 @@ export function MenuAccentPicker({
           >
             <PickerGroup>
               {MENU_ACCENTS.map((accent) => (
-                <PickerRadioItem key={accent.value} value={accent.value}>
+                <PickerRadioItem
+                  key={accent.value}
+                  value={accent.value}
+                  closeOnClick={isMobile}
+                >
                   {accent.label}
                 </PickerRadioItem>
               ))}
diff --git a/apps/v4/app/(create)/components/base-color-picker.tsx b/apps/v4/app/(create)/components/base-color-picker.tsx
index 5d9e0ba2f6..053dd53981 100644
--- a/apps/v4/app/(create)/components/base-color-picker.tsx
+++ b/apps/v4/app/(create)/components/base-color-picker.tsx
@@ -48,7 +48,7 @@ export function BaseColorPicker({
                     currentBaseColor?.cssVars?.dark?.["muted-foreground"],
                 } as React.CSSProperties
               }
-              className="pointer-events-none absolute top-1/2 right-2 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none"
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2"
             />
           )}
         </PickerTrigger>
@@ -65,7 +65,11 @@ export function BaseColorPicker({
           >
             <PickerGroup>
               {BASE_COLORS.map((baseColor) => (
-                <PickerRadioItem key={baseColor.name} value={baseColor.name}>
+                <PickerRadioItem
+                  key={baseColor.name}
+                  value={baseColor.name}
+                  closeOnClick={isMobile}
+                >
                   {baseColor.title}
                 </PickerRadioItem>
               ))}
diff --git a/apps/v4/app/(create)/components/base-picker.tsx b/apps/v4/app/(create)/components/base-picker.tsx
index 67838f8b7f..c63de06dc7 100644
--- a/apps/v4/app/(create)/components/base-picker.tsx
+++ b/apps/v4/app/(create)/components/base-picker.tsx
@@ -40,41 +40,47 @@ export function BasePicker({
   )
 
   return (
-    <Picker>
-      <PickerTrigger>
-        <div className="flex flex-col justify-start text-left">
-          <div className="text-xs text-muted-foreground">Base</div>
-          <div className="text-sm font-medium text-foreground">
-            {currentBase?.title}
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Base</div>
+            <div className="text-sm font-medium text-foreground">
+              {currentBase?.title}
+            </div>
           </div>
-        </div>
-        {currentBase?.meta?.logo && (
-          <div
-            className="pointer-events-none absolute top-1/2 right-2 size-4 -translate-y-1/2 text-foreground select-none *:[svg]:size-4 *:[svg]:text-foreground!"
-            dangerouslySetInnerHTML={{
-              __html: currentBase.meta.logo,
-            }}
-          />
-        )}
-      </PickerTrigger>
-      <PickerContent
-        anchor={isMobile ? anchorRef : undefined}
-        side={isMobile ? "top" : "right"}
-        align={isMobile ? "center" : "start"}
-      >
-        <PickerRadioGroup
-          value={currentBase?.name}
-          onValueChange={handleValueChange}
+          {currentBase?.meta?.logo && (
+            <div
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 text-foreground select-none md:right-2 *:[svg]:size-4 *:[svg]:text-foreground!"
+              dangerouslySetInnerHTML={{
+                __html: currentBase.meta.logo,
+              }}
+            />
+          )}
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
         >
-          <PickerGroup>
-            {BASES.map((base) => (
-              <PickerRadioItem key={base.name} value={base.name}>
-                {base.title}
-              </PickerRadioItem>
-            ))}
-          </PickerGroup>
-        </PickerRadioGroup>
-      </PickerContent>
-    </Picker>
+          <PickerRadioGroup
+            value={currentBase?.name}
+            onValueChange={handleValueChange}
+          >
+            <PickerGroup>
+              {BASES.map((base) => (
+                <PickerRadioItem
+                  key={base.name}
+                  value={base.name}
+                  closeOnClick={isMobile}
+                >
+                  {base.title}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+    </div>
   )
 }
diff --git a/apps/v4/app/(create)/components/copy-preset.tsx b/apps/v4/app/(create)/components/copy-preset.tsx
index 591955a049..0bcdc04112 100644
--- a/apps/v4/app/(create)/components/copy-preset.tsx
+++ b/apps/v4/app/(create)/components/copy-preset.tsx
@@ -2,8 +2,6 @@
 
 import * as React from "react"
 import { Button } from "@/examples/base/ui/button"
-import { Copy01Icon, Tick02Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
 
 import { cn } from "@/lib/utils"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
@@ -35,17 +33,11 @@ export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
       variant="outline"
       onClick={handleCopy}
       className={cn(
-        "justify-between font-mono text-xs transition-none",
+        "font-mono text-[0.825rem] transition-none pointer-coarse:h-10! pointer-coarse:text-sm!",
         className
       )}
     >
-      <span>--preset {presetCode}</span>
-      <HugeiconsIcon
-        icon={hasCopied ? Tick02Icon : Copy01Icon}
-        strokeWidth={2}
-        data-icon="inline-end"
-        className="size-3"
-      />
+      <span>{hasCopied ? "Copied" : `--preset ${presetCode}`}</span>
     </Button>
   )
 }
diff --git a/apps/v4/app/(create)/components/customizer.tsx b/apps/v4/app/(create)/components/customizer.tsx
index 2a2b795215..3f1815c23b 100644
--- a/apps/v4/app/(create)/components/customizer.tsx
+++ b/apps/v4/app/(create)/components/customizer.tsx
@@ -29,6 +29,7 @@ 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 { FONTS } from "@/app/(create)/lib/fonts"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
@@ -48,16 +49,17 @@ export function Customizer({
 
   return (
     <Card
-      className="dark top-24 right-12 isolate z-10 max-h-full min-h-0 gap-0 self-start rounded-2xl bg-card/90 backdrop-blur-xl md:w-(--customizer-width)"
+      className="dark top-24 right-12 isolate z-10 max-h-full min-h-0 w-full self-start rounded-2xl bg-card/90 shadow-xl backdrop-blur-xl md:w-(--customizer-width)"
       ref={anchorRef}
       size="sm"
     >
-      <CardHeader className="flex items-center justify-between gap-2 border-b px-3! group-data-reversed/layout:flex-row-reverse">
-        <CopyPreset />
-        <MainMenu className="ring-1 ring-foreground/10" />
+      <CardHeader className="hidden items-center justify-between gap-2 border-b group-data-reversed/layout:flex-row-reverse md:flex">
+        <CopyPreset className="flex-1 px-1.5!" />
+        <MainMenu className="rounded-lg ring-1 ring-foreground/10" />
       </CardHeader>
-      <CardContent className="no-scrollbar min-h-0 flex-1 overflow-y-auto">
-        <FieldGroup className="gap-3.5 py-px">
+      <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 md:flex-col md:gap-3.5">
+          <RandomButton />
           <BasePicker isMobile={isMobile} anchorRef={anchorRef} />
           <StylePicker
             styles={STYLES}
@@ -77,8 +79,10 @@ export function Customizer({
           <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
         </FieldGroup>
       </CardContent>
-      <CardFooter className="flex min-w-0 flex-col gap-2">
-        <ProjectForm className="w-full" />
+      <CardFooter className="flex min-w-0 gap-2 md:flex-col md:**:[button,a]:w-full">
+        <CopyPreset className="max-w-42 flex-1 md:hidden" />
+        <V0Button className="ml-auto max-w-42 flex-1 shrink-0 md:max-w-full md:flex-none" />
+        <ProjectForm />
         <ActionMenu itemsByBase={itemsByBase} />
         <ResetDialog />
       </CardFooter>
diff --git a/apps/v4/app/(create)/components/font-picker.tsx b/apps/v4/app/(create)/components/font-picker.tsx
index f0ce353561..f271e9e01a 100644
--- a/apps/v4/app/(create)/components/font-picker.tsx
+++ b/apps/v4/app/(create)/components/font-picker.tsx
@@ -69,7 +69,7 @@ export function FontPicker({
             </div>
           </div>
           <div
-            className="pointer-events-none absolute top-1/2 right-2 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none"
+            className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2"
             style={{ fontFamily: currentFont?.font.style.fontFamily }}
           >
             Aa
@@ -91,7 +91,11 @@ export function FontPicker({
               <PickerGroup key={group.type}>
                 <PickerLabel>{group.label}</PickerLabel>
                 {group.items.map((font) => (
-                  <PickerRadioItem key={font.value} value={font.value}>
+                  <PickerRadioItem
+                    key={font.value}
+                    value={font.value}
+                    closeOnClick={isMobile}
+                  >
                     {font.name}
                   </PickerRadioItem>
                 ))}
diff --git a/apps/v4/app/(create)/components/icon-library-picker.tsx b/apps/v4/app/(create)/components/icon-library-picker.tsx
index f4b06834a0..e5f80727ac 100644
--- a/apps/v4/app/(create)/components/icon-library-picker.tsx
+++ b/apps/v4/app/(create)/components/icon-library-picker.tsx
@@ -133,7 +133,7 @@ export function IconLibraryPicker({
               {currentIconLibrary?.title}
             </div>
           </div>
-          <div className="pointer-events-none absolute top-1/2 right-2 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none *:[svg]:text-foreground!">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2 *:[svg]:text-foreground!">
             {logos[currentIconLibrary?.name as keyof typeof logos]}
           </div>
         </PickerTrigger>
@@ -153,6 +153,7 @@ export function IconLibraryPicker({
                 <PickerRadioItem
                   key={iconLibrary.name}
                   value={iconLibrary.name}
+                  closeOnClick={isMobile}
                 >
                   {iconLibrary.title}
                 </PickerRadioItem>
diff --git a/apps/v4/app/(create)/components/menu-picker.tsx b/apps/v4/app/(create)/components/menu-picker.tsx
index 31d954878a..2b442e2c10 100644
--- a/apps/v4/app/(create)/components/menu-picker.tsx
+++ b/apps/v4/app/(create)/components/menu-picker.tsx
@@ -71,7 +71,7 @@ const MENU_OPTIONS = [
         viewBox="0 0 24 24"
         fill="none"
         role="img"
-        className="size-4 fill-foreground text-foreground"
+        className="size-4 fill-background"
       >
         <path
           d="M2 11.5C2 7.02166 2 4.78249 3.39124 3.39124C4.78249 2 7.02166 2 11.5 2C15.9783 2 18.2175 2 19.6088 3.39124C21 4.78249 21 7.02166 21 11.5C21 15.9783 21 18.2175 19.6088 19.6088C18.2175 21 15.9783 21 11.5 21C7.02166 21 4.78249 21 3.39124 19.6088C2 18.2175 2 15.9783 2 11.5Z"
@@ -80,21 +80,21 @@ const MENU_OPTIONS = [
         />
         <path
           d="M8.5 11.5L14.5001 11.5"
-          stroke="var(--background)"
+          stroke="var(--foreground)"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M9.5 15H13.5"
-          stroke="var(--background)"
+          stroke="var(--foreground)"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M7.5 8H15.5"
-          stroke="var(--background)"
+          stroke="var(--foreground)"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -128,7 +128,7 @@ export function MenuColorPicker({
               {currentMenu?.label}
             </div>
           </div>
-          <div className="pointer-events-none absolute top-1/2 right-2 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2">
             {currentMenu?.icon}
           </div>
         </PickerTrigger>
@@ -145,7 +145,11 @@ export function MenuColorPicker({
           >
             <PickerGroup>
               {MENU_OPTIONS.map((menu) => (
-                <PickerRadioItem key={menu.value} value={menu.value}>
+                <PickerRadioItem
+                  key={menu.value}
+                  value={menu.value}
+                  closeOnClick={isMobile}
+                >
                   {menu.label}
                 </PickerRadioItem>
               ))}
diff --git a/apps/v4/app/(create)/components/picker.tsx b/apps/v4/app/(create)/components/picker.tsx
index 4d79706ee5..e30b54fb3e 100644
--- a/apps/v4/app/(create)/components/picker.tsx
+++ b/apps/v4/app/(create)/components/picker.tsx
@@ -19,7 +19,7 @@ function PickerTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
     <MenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
       className={cn(
-        "relative w-full shrink-0 touch-manipulation rounded-xl p-2 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",
+        "relative w-40 shrink-0 touch-manipulation rounded-xl p-4 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:p-2",
         className
       )}
       {...props}
@@ -53,7 +53,7 @@ function PickerContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            "cn-menu-target z-50 no-scrollbar max-h-(--available-height) w-[calc(var(--available-width)-(--spacing(3.5)))] min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border-0 bg-neutral-950/80 p-1.5 text-neutral-100 ring-1 ring-neutral-950/80 backdrop-blur-xl outline-none md:w-52 dark:bg-neutral-800/90 dark:ring-neutral-700/50 data-closed:overflow-hidden",
+            "cn-menu-target z-50 no-scrollbar max-h-(--available-height) w-[calc(var(--available-width)-(--spacing(6)))] min-w-32 origin-(--transform-origin) translate-y-2 overflow-x-hidden overflow-y-auto rounded-xl border-0 bg-neutral-950/80 p-1.5 text-neutral-100 ring-1 ring-neutral-950/80 backdrop-blur-xl outline-none md:w-52 dark:bg-neutral-800/90 dark:ring-neutral-700/50 data-closed:overflow-hidden",
             className
           )}
           {...props}
diff --git a/apps/v4/app/(create)/components/preset-picker.tsx b/apps/v4/app/(create)/components/preset-picker.tsx
index 01d7abcdea..d30129acaa 100644
--- a/apps/v4/app/(create)/components/preset-picker.tsx
+++ b/apps/v4/app/(create)/components/preset-picker.tsx
@@ -100,7 +100,11 @@ export function PresetPicker({
             {currentBasePresets.map((preset) => {
               const style = STYLES.find((s) => s.name === preset.style)
               return (
-                <PickerRadioItem key={preset.title} value={preset.title}>
+                <PickerRadioItem
+                  key={preset.title}
+                  value={preset.title}
+                  closeOnClick={isMobile}
+                >
                   <div className="flex items-center gap-2">
                     {style?.icon && (
                       <div className="flex size-4 shrink-0 items-center justify-center">
diff --git a/apps/v4/app/(create)/components/preview.tsx b/apps/v4/app/(create)/components/preview.tsx
index bc55f188e4..c3f76f093c 100644
--- a/apps/v4/app/(create)/components/preview.tsx
+++ b/apps/v4/app/(create)/components/preview.tsx
@@ -119,7 +119,7 @@ export function Preview() {
   }, [params.base, params.item])
 
   return (
-    <div className="relative flex flex-1 flex-col justify-center overflow-hidden rounded-2xl ring ring-foreground/10">
+    <div className="relative flex flex-1 flex-col justify-center overflow-hidden rounded-2xl ring ring-foreground/10 md:ring-transparent dark:ring-foreground/10">
       <div className="relative z-0 mx-auto flex w-full flex-1 flex-col overflow-hidden">
         <div className="absolute inset-0 bg-muted dark:bg-muted/30" />
         <iframe
diff --git a/apps/v4/app/(create)/components/project-form.tsx b/apps/v4/app/(create)/components/project-form.tsx
index 16e77362b8..0ffbc09948 100644
--- a/apps/v4/app/(create)/components/project-form.tsx
+++ b/apps/v4/app/(create)/components/project-form.tsx
@@ -125,7 +125,14 @@ export function ProjectForm({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger
-        render={<Button className={cn("hidden md:flex", className)} />}
+        render={
+          <Button
+            className={cn(
+              "hidden md:flex pointer-coarse:h-10! pointer-coarse:text-sm!",
+              className
+            )}
+          />
+        }
       >
         Create Project
       </DialogTrigger>
diff --git a/apps/v4/app/(create)/components/radius-picker.tsx b/apps/v4/app/(create)/components/radius-picker.tsx
index eb1f4fe20f..a0c7428045 100644
--- a/apps/v4/app/(create)/components/radius-picker.tsx
+++ b/apps/v4/app/(create)/components/radius-picker.tsx
@@ -42,7 +42,7 @@ export function RadiusPicker({
               {currentRadius?.label}
             </div>
           </div>
-          <div className="pointer-events-none absolute top-1/2 right-2 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base text-foreground select-none">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base text-foreground select-none md:right-2">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -80,6 +80,7 @@ export function RadiusPicker({
                 <PickerRadioItem
                   key={defaultRadius.name}
                   value={defaultRadius.name}
+                  closeOnClick={isMobile}
                 >
                   {defaultRadius.label}
                 </PickerRadioItem>
@@ -88,7 +89,11 @@ export function RadiusPicker({
             <PickerSeparator />
             <PickerGroup>
               {otherRadii.map((radius) => (
-                <PickerRadioItem key={radius.name} value={radius.name}>
+                <PickerRadioItem
+                  key={radius.name}
+                  value={radius.name}
+                  closeOnClick={isMobile}
+                >
                   {radius.label}
                 </PickerRadioItem>
               ))}
diff --git a/apps/v4/app/(create)/components/random-button.tsx b/apps/v4/app/(create)/components/random-button.tsx
index 85cf0b9d00..ea0160c40e 100644
--- a/apps/v4/app/(create)/components/random-button.tsx
+++ b/apps/v4/app/(create)/components/random-button.tsx
@@ -5,22 +5,36 @@ 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 { useRandom } from "@/app/(create)/hooks/use-random"
 
 export const RANDOMIZE_FORWARD_TYPE = "randomize-forward"
 
 export function RandomButton({
   variant = "outline",
+  className,
   ...props
 }: React.ComponentProps<typeof Button>) {
   const { randomize } = useRandom()
 
   return (
-    <Button variant={variant} onClick={randomize} {...props}>
+    <Button
+      variant={variant}
+      onClick={randomize}
+      className={cn(
+        "h-17! w-42 touch-manipulation justify-between rounded-xl bg-transparent! p-4 text-sm! select-none md:hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex touch-manipulation flex-col justify-start text-left">
+        <div className="text-xs text-muted-foreground">Shuffle</div>
+        <div className="text-sm font-medium text-foreground">Try Random</div>
+      </div>
       <HugeiconsIcon
         icon={DiceFaces05Icon}
         strokeWidth={2}
-        className="size-4"
+        className="size-5"
       />
     </Button>
   )
diff --git a/apps/v4/app/(create)/components/style-picker.tsx b/apps/v4/app/(create)/components/style-picker.tsx
index 778d9ec8ef..643dd0b86d 100644
--- a/apps/v4/app/(create)/components/style-picker.tsx
+++ b/apps/v4/app/(create)/components/style-picker.tsx
@@ -38,7 +38,7 @@ export function StylePicker({
             </div>
           </div>
           {currentStyle?.icon && (
-            <div className="pointer-events-none absolute top-1/2 right-2 flex size-4 -translate-y-1/2 items-center justify-center select-none">
+            <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center select-none md:right-2">
               {React.cloneElement(currentStyle.icon, {
                 className: "size-4",
               })}
@@ -58,7 +58,11 @@ export function StylePicker({
           >
             <PickerGroup>
               {styles.map((style) => (
-                <PickerRadioItem value={style.name} key={style.name}>
+                <PickerRadioItem
+                  value={style.name}
+                  key={style.name}
+                  closeOnClick={isMobile}
+                >
                   {style.title}
                 </PickerRadioItem>
               ))}
diff --git a/apps/v4/app/(create)/components/theme-picker.tsx b/apps/v4/app/(create)/components/theme-picker.tsx
index fb8655285a..532d2ecd1e 100644
--- a/apps/v4/app/(create)/components/theme-picker.tsx
+++ b/apps/v4/app/(create)/components/theme-picker.tsx
@@ -64,7 +64,7 @@ export function ThemePicker({
                     ],
                 } as React.CSSProperties
               }
-              className="pointer-events-none absolute top-1/2 right-2 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none"
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2"
             />
           )}
         </PickerTrigger>
@@ -87,7 +87,11 @@ export function ThemePicker({
                 )
                 .map((theme) => {
                   return (
-                    <PickerRadioItem key={theme.name} value={theme.name}>
+                    <PickerRadioItem
+                      key={theme.name}
+                      value={theme.name}
+                      closeOnClick={isMobile}
+                    >
                       {theme.title}
                     </PickerRadioItem>
                   )
@@ -104,7 +108,11 @@ export function ThemePicker({
                 )
                 .map((theme) => {
                   return (
-                    <PickerRadioItem key={theme.name} value={theme.name}>
+                    <PickerRadioItem
+                      key={theme.name}
+                      value={theme.name}
+                      closeOnClick={isMobile}
+                    >
                       {theme.title}
                     </PickerRadioItem>
                   )
diff --git a/apps/v4/app/(create)/components/v0-button.tsx b/apps/v4/app/(create)/components/v0-button.tsx
index af5dd2a56f..5a4f28048c 100644
--- a/apps/v4/app/(create)/components/v0-button.tsx
+++ b/apps/v4/app/(create)/components/v0-button.tsx
@@ -3,11 +3,6 @@
 import * as React from "react"
 import { Button } from "@/examples/base/ui/button"
 import { Skeleton } from "@/examples/base/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/examples/base/ui/tooltip"
 
 import { cn } from "@/lib/utils"
 import { useIsMobile } from "@/hooks/use-mobile"
@@ -20,7 +15,6 @@ export function V0Button({ className }: { className?: string }) {
   const isMobile = useIsMobile()
   const isMounted = useMounted()
 
-  // Memoize to avoid string concatenation on every render. (rerender-derived-state)
   const url = React.useMemo(
     () =>
       `${process.env.NEXT_PUBLIC_APP_URL}/create/v0?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&item=${params.item}`,
@@ -48,7 +42,7 @@ export function V0Button({ className }: { className?: string }) {
       role="link"
       variant={isMobile ? "default" : "outline"}
       className={cn(
-        "w-24 gap-1 data-[variant=default]:h-[31px] lg:w-8 xl:w-24",
+        "gap-1 pointer-coarse:h-10! pointer-coarse:text-sm!",
         className
       )}
       render={
diff --git a/apps/v4/app/(create)/create/page.tsx b/apps/v4/app/(create)/create/page.tsx
index 66a1d3c5bb..0eaa09e80f 100644
--- a/apps/v4/app/(create)/create/page.tsx
+++ b/apps/v4/app/(create)/create/page.tsx
@@ -1,5 +1,4 @@
 import { type Metadata } from "next"
-import { Agentation } from "agentation"
 
 import { siteConfig } from "@/lib/config"
 import { absoluteUrl } from "@/lib/utils"
@@ -69,18 +68,17 @@ export default async function CreatePage() {
   return (
     <div
       data-slot="layout"
-      className="group/layout relative z-10 flex h-screen flex-col overflow-hidden section-soft [--customizer-width:--spacing(56)] [--gap:--spacing(6)]"
+      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 w-full flex-1 flex-row gap-(--gap) p-(--gap) pt-3 group-data-reversed/layout:flex-row-reverse"
+        className="flex min-h-0 flex-1 flex-col gap-(--gap) p-(--gap) pt-[calc(var(--gap)*0.25)] md:flex-row-reverse"
       >
-        <Customizer itemsByBase={itemsByBase} />
         <Preview />
+        <Customizer itemsByBase={itemsByBase} />
         <PresetHandler />
         <WelcomeDialog />
-        {process.env.NODE_ENV === "development" && <Agentation />}
       </main>
     </div>
   )
diff --git a/apps/v4/components/copy-button.tsx b/apps/v4/components/copy-button.tsx
index f7d4b5c2fc..8dbffcad0d 100644
--- a/apps/v4/components/copy-button.tsx
+++ b/apps/v4/components/copy-button.tsx
@@ -7,11 +7,61 @@ import { trackEvent, type Event } from "@/lib/events"
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york-v4/ui/button"
 
-export function copyToClipboardWithMeta(value: string, event?: Event) {
-  navigator.clipboard.writeText(value)
+function legacyCopyToClipboard(value: string) {
+  const textArea = document.createElement("textarea")
+  textArea.value = value
+  textArea.setAttribute("readonly", "")
+  textArea.style.position = "fixed"
+  textArea.style.opacity = "0"
+  textArea.style.pointerEvents = "none"
+
+  document.body.appendChild(textArea)
+  textArea.focus()
+  textArea.select()
+  textArea.setSelectionRange(0, value.length)
+
+  let hasCopied = false
+  try {
+    hasCopied = document.execCommand("copy")
+  } catch {
+    hasCopied = false
+  }
+
+  document.body.removeChild(textArea)
+  return hasCopied
+}
+
+export async function copyToClipboardWithMeta(value: string, event?: Event) {
+  if (typeof window === "undefined") {
+    return false
+  }
+
+  if (!value) {
+    return false
+  }
+
+  let hasCopied = false
+
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(value)
+      hasCopied = true
+    } catch {
+      hasCopied = legacyCopyToClipboard(value)
+    }
+  } else {
+    hasCopied = legacyCopyToClipboard(value)
+  }
+
+  if (!hasCopied) {
+    return false
+  }
+
   if (event) {
     trackEvent(event)
   }
+
+  return true
 }
 
 export function CopyButton({
@@ -45,8 +95,8 @@ export function CopyButton({
         "absolute top-3 right-2 z-10 size-7 bg-code hover:opacity-100 focus-visible:opacity-100",
         className
       )}
-      onClick={() => {
-        copyToClipboardWithMeta(
+      onClick={async () => {
+        const hasCopied = await copyToClipboardWithMeta(
           value,
           event
             ? {
@@ -57,7 +107,10 @@ export function CopyButton({
               }
             : undefined
         )
-        setHasCopied(true)
+
+        if (hasCopied) {
+          setHasCopied(true)
+        }
       }}
       {...props}
     >
diff --git a/apps/v4/hooks/use-copy-to-clipboard.ts b/apps/v4/hooks/use-copy-to-clipboard.ts
index 366942f063..b63dc4d27a 100644
--- a/apps/v4/hooks/use-copy-to-clipboard.ts
+++ b/apps/v4/hooks/use-copy-to-clipboard.ts
@@ -2,6 +2,30 @@
 
 import * as React from "react"
 
+function legacyCopyToClipboard(value: string) {
+  const textArea = document.createElement("textarea")
+  textArea.value = value
+  textArea.setAttribute("readonly", "")
+  textArea.style.position = "fixed"
+  textArea.style.opacity = "0"
+  textArea.style.pointerEvents = "none"
+
+  document.body.appendChild(textArea)
+  textArea.focus()
+  textArea.select()
+  textArea.setSelectionRange(0, value.length)
+
+  let hasCopied = false
+  try {
+    hasCopied = document.execCommand("copy")
+  } catch {
+    hasCopied = false
+  }
+
+  document.body.removeChild(textArea)
+  return hasCopied
+}
+
 export function useCopyToClipboard({
   timeout = 2000,
   onCopy,
@@ -11,26 +35,45 @@ export function useCopyToClipboard({
 } = {}) {
   const [isCopied, setIsCopied] = React.useState(false)
 
-  const copyToClipboard = (value: string) => {
-    if (typeof window === "undefined" || !navigator.clipboard.writeText) {
-      return
+  const copyToClipboard = async (value: string) => {
+    if (typeof window === "undefined") {
+      return false
     }
 
-    if (!value) return
+    if (!value) {
+      return false
+    }
 
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true)
+    let hasCopied = false
 
-      if (onCopy) {
-        onCopy()
+    if (navigator.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(value)
+        hasCopied = true
+      } catch {
+        hasCopied = legacyCopyToClipboard(value)
       }
+    } else {
+      hasCopied = legacyCopyToClipboard(value)
+    }
 
-      if (timeout !== 0) {
-        setTimeout(() => {
-          setIsCopied(false)
-        }, timeout)
-      }
-    }, console.error)
+    if (!hasCopied) {
+      return false
+    }
+
+    setIsCopied(true)
+
+    if (onCopy) {
+      onCopy()
+    }
+
+    if (timeout !== 0) {
+      setTimeout(() => {
+        setIsCopied(false)
+      }, timeout)
+    }
+
+    return true
   }
 
   return { isCopied, copyToClipboard }
diff --git a/apps/v4/public/r/styles/base-lyra/example.json b/apps/v4/public/r/styles/base-lyra/example.json
index 98b74b7513..82b9af35b0 100644
--- a/apps/v4/public/r/styles/base-lyra/example.json
+++ b/apps/v4/public/r/styles/base-lyra/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-lyra/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/preview.json b/apps/v4/public/r/styles/base-lyra/preview.json
index 9c1052ae33..0cc345308f 100644
--- a/apps/v4/public/r/styles/base-lyra/preview.json
+++ b/apps/v4/public/r/styles/base-lyra/preview.json
@@ -34,7 +34,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/preview/index.tsx",
-      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-lyra/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-lyra/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-lyra/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-lyra/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-lyra/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-lyra/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-lyra/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-lyra/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-lyra/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-lyra/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-lyra/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-lyra/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-lyra/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-lyra/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-lyra/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-lyra/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-lyra/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-lyra/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-lyra/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-lyra/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-lyra/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-lyra/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-lyra/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-lyra/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-lyra/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-lyra/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-lyra/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-lyra/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-lyra/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-lyra/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-lyra/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-lyra/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]\">\n      <div\n        className=\"grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <UIElements />\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-lyra/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-lyra/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-lyra/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-lyra/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-lyra/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-lyra/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-lyra/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-lyra/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-lyra/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-lyra/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-lyra/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-lyra/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-lyra/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-lyra/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-lyra/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-lyra/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-lyra/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-lyra/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-lyra/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-lyra/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-lyra/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-lyra/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-lyra/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-lyra/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-lyra/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-lyra/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-lyra/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-lyra/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-lyra/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-lyra/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-lyra/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-lyra/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <div className=\"hidden md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/example.json b/apps/v4/public/r/styles/base-maia/example.json
index 9168319109..b931f5494c 100644
--- a/apps/v4/public/r/styles/base-maia/example.json
+++ b/apps/v4/public/r/styles/base-maia/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-maia/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/preview.json b/apps/v4/public/r/styles/base-maia/preview.json
index cd35e4f6d5..65390c7a38 100644
--- a/apps/v4/public/r/styles/base-maia/preview.json
+++ b/apps/v4/public/r/styles/base-maia/preview.json
@@ -34,7 +34,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/preview/index.tsx",
-      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-maia/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-maia/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-maia/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-maia/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-maia/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-maia/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-maia/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-maia/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-maia/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-maia/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-maia/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-maia/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-maia/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-maia/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-maia/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-maia/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-maia/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-maia/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-maia/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-maia/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-maia/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-maia/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-maia/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-maia/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-maia/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-maia/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-maia/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-maia/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-maia/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-maia/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-maia/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-maia/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]\">\n      <div\n        className=\"grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <UIElements />\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-maia/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-maia/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-maia/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-maia/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-maia/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-maia/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-maia/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-maia/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-maia/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-maia/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-maia/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-maia/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-maia/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-maia/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-maia/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-maia/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-maia/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-maia/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-maia/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-maia/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-maia/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-maia/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-maia/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-maia/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-maia/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-maia/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-maia/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-maia/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-maia/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-maia/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-maia/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-maia/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <div className=\"hidden md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/example.json b/apps/v4/public/r/styles/base-mira/example.json
index a156e1a33e..afb2faf9b1 100644
--- a/apps/v4/public/r/styles/base-mira/example.json
+++ b/apps/v4/public/r/styles/base-mira/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-mira/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/preview.json b/apps/v4/public/r/styles/base-mira/preview.json
index b9c97c0f5d..bbad17284a 100644
--- a/apps/v4/public/r/styles/base-mira/preview.json
+++ b/apps/v4/public/r/styles/base-mira/preview.json
@@ -34,7 +34,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/preview/index.tsx",
-      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-mira/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-mira/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-mira/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-mira/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-mira/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-mira/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-mira/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-mira/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-mira/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-mira/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-mira/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-mira/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-mira/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-mira/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-mira/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-mira/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-mira/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-mira/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-mira/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-mira/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-mira/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-mira/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-mira/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-mira/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-mira/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-mira/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-mira/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-mira/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-mira/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-mira/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-mira/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-mira/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]\">\n      <div\n        className=\"grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <UIElements />\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-mira/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-mira/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-mira/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-mira/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-mira/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-mira/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-mira/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-mira/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-mira/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-mira/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-mira/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-mira/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-mira/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-mira/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-mira/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-mira/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-mira/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-mira/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-mira/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-mira/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-mira/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-mira/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-mira/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-mira/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-mira/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-mira/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-mira/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-mira/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-mira/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-mira/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-mira/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-mira/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <div className=\"hidden md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/example.json b/apps/v4/public/r/styles/base-nova/example.json
index ac8b5a5026..cc9fa80776 100644
--- a/apps/v4/public/r/styles/base-nova/example.json
+++ b/apps/v4/public/r/styles/base-nova/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-nova/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/preview.json b/apps/v4/public/r/styles/base-nova/preview.json
index 3fca6fbeaa..6ab0064581 100644
--- a/apps/v4/public/r/styles/base-nova/preview.json
+++ b/apps/v4/public/r/styles/base-nova/preview.json
@@ -34,7 +34,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/preview/index.tsx",
-      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-nova/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-nova/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-nova/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-nova/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-nova/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-nova/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-nova/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-nova/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-nova/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-nova/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-nova/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-nova/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-nova/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-nova/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-nova/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-nova/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-nova/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-nova/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-nova/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-nova/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-nova/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-nova/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-nova/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-nova/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-nova/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-nova/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-nova/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-nova/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-nova/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-nova/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-nova/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-nova/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]\">\n      <div\n        className=\"grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <UIElements />\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-nova/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-nova/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-nova/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-nova/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-nova/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-nova/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-nova/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-nova/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-nova/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-nova/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-nova/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-nova/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-nova/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-nova/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-nova/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-nova/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-nova/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-nova/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-nova/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-nova/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-nova/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-nova/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-nova/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-nova/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-nova/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-nova/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-nova/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-nova/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-nova/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-nova/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-nova/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-nova/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <div className=\"hidden md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/example.json b/apps/v4/public/r/styles/base-vega/example.json
index 923e4741b4..78617efed4 100644
--- a/apps/v4/public/r/styles/base-vega/example.json
+++ b/apps/v4/public/r/styles/base-vega/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-vega/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/preview.json b/apps/v4/public/r/styles/base-vega/preview.json
index 4e01d87d0f..81b72036b5 100644
--- a/apps/v4/public/r/styles/base-vega/preview.json
+++ b/apps/v4/public/r/styles/base-vega/preview.json
@@ -34,7 +34,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/preview/index.tsx",
-      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-vega/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-vega/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-vega/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-vega/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-vega/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-vega/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-vega/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-vega/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-vega/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-vega/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-vega/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-vega/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-vega/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-vega/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-vega/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-vega/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-vega/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-vega/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-vega/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-vega/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-vega/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-vega/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-vega/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-vega/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-vega/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-vega/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-vega/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-vega/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-vega/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-vega/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-vega/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-vega/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]\">\n      <div\n        className=\"grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <UIElements />\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-vega/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-vega/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-vega/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-vega/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-vega/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-vega/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-vega/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-vega/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-vega/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-vega/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-vega/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-vega/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-vega/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-vega/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-vega/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-vega/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-vega/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-vega/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-vega/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-vega/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-vega/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-vega/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-vega/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-vega/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-vega/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-vega/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-vega/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-vega/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-vega/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-vega/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-vega/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-vega/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <div className=\"hidden md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/example.json b/apps/v4/public/r/styles/radix-lyra/example.json
index ac0834bbd0..5384d66e3d 100644
--- a/apps/v4/public/r/styles/radix-lyra/example.json
+++ b/apps/v4/public/r/styles/radix-lyra/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/preview.json b/apps/v4/public/r/styles/radix-lyra/preview.json
index 7f32fa0711..521800907d 100644
--- a/apps/v4/public/r/styles/radix-lyra/preview.json
+++ b/apps/v4/public/r/styles/radix-lyra/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/preview/index.tsx",
-      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-lyra/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-lyra/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-lyra/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-lyra/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-lyra/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-lyra/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-lyra/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-lyra/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-lyra/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-lyra/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-lyra/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-lyra/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-lyra/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-lyra/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-lyra/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-lyra/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-lyra/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-lyra/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-lyra/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-lyra/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-lyra/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-lyra/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-lyra/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-lyra/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-lyra/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-lyra/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-lyra/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-lyra/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-lyra/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-lyra/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-lyra/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-lyra/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]\">\n      <div\n        className=\"grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <UIElements />\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-lyra/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-lyra/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-lyra/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-lyra/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-lyra/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-lyra/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-lyra/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-lyra/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-lyra/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-lyra/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-lyra/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-lyra/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-lyra/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-lyra/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-lyra/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-lyra/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-lyra/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-lyra/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-lyra/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-lyra/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-lyra/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-lyra/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-lyra/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-lyra/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-lyra/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-lyra/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-lyra/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-lyra/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-lyra/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-lyra/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-lyra/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-lyra/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <div className=\"hidden md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/example.json b/apps/v4/public/r/styles/radix-maia/example.json
index 95495e14be..dc811b2c69 100644
--- a/apps/v4/public/r/styles/radix-maia/example.json
+++ b/apps/v4/public/r/styles/radix-maia/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-maia/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/preview.json b/apps/v4/public/r/styles/radix-maia/preview.json
index ee802020a6..0fc5bcb98f 100644
--- a/apps/v4/public/r/styles/radix-maia/preview.json
+++ b/apps/v4/public/r/styles/radix-maia/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/preview/index.tsx",
-      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-maia/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-maia/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-maia/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-maia/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-maia/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-maia/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-maia/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-maia/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-maia/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-maia/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-maia/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-maia/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-maia/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-maia/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-maia/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-maia/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-maia/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-maia/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-maia/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-maia/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-maia/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-maia/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-maia/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-maia/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-maia/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-maia/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-maia/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-maia/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-maia/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-maia/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-maia/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-maia/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]\">\n      <div\n        className=\"grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <UIElements />\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-maia/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-maia/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-maia/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-maia/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-maia/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-maia/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-maia/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-maia/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-maia/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-maia/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-maia/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-maia/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-maia/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-maia/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-maia/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-maia/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-maia/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-maia/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-maia/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-maia/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-maia/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-maia/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-maia/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-maia/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-maia/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-maia/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-maia/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-maia/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-maia/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-maia/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-maia/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-maia/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <div className=\"hidden md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/example.json b/apps/v4/public/r/styles/radix-mira/example.json
index 13e8cccc3a..f5185377ab 100644
--- a/apps/v4/public/r/styles/radix-mira/example.json
+++ b/apps/v4/public/r/styles/radix-mira/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-mira/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/preview.json b/apps/v4/public/r/styles/radix-mira/preview.json
index 5d66425aa3..8c6d1dce29 100644
--- a/apps/v4/public/r/styles/radix-mira/preview.json
+++ b/apps/v4/public/r/styles/radix-mira/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/preview/index.tsx",
-      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-mira/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-mira/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-mira/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-mira/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-mira/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-mira/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-mira/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-mira/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-mira/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-mira/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-mira/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-mira/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-mira/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-mira/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-mira/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-mira/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-mira/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-mira/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-mira/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-mira/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-mira/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-mira/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-mira/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-mira/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-mira/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-mira/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-mira/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-mira/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-mira/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-mira/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-mira/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-mira/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]\">\n      <div\n        className=\"grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <UIElements />\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-mira/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-mira/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-mira/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-mira/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-mira/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-mira/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-mira/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-mira/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-mira/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-mira/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-mira/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-mira/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-mira/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-mira/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-mira/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-mira/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-mira/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-mira/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-mira/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-mira/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-mira/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-mira/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-mira/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-mira/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-mira/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-mira/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-mira/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-mira/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-mira/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-mira/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-mira/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-mira/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <div className=\"hidden md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/example.json b/apps/v4/public/r/styles/radix-nova/example.json
index 68dc2e2577..7ac5390a4c 100644
--- a/apps/v4/public/r/styles/radix-nova/example.json
+++ b/apps/v4/public/r/styles/radix-nova/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-nova/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/preview.json b/apps/v4/public/r/styles/radix-nova/preview.json
index 2a4ab89032..07166831b4 100644
--- a/apps/v4/public/r/styles/radix-nova/preview.json
+++ b/apps/v4/public/r/styles/radix-nova/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/preview/index.tsx",
-      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-nova/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-nova/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-nova/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-nova/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-nova/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-nova/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-nova/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-nova/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-nova/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-nova/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-nova/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-nova/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-nova/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-nova/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-nova/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-nova/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-nova/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-nova/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-nova/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-nova/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-nova/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-nova/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-nova/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-nova/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-nova/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-nova/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-nova/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-nova/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-nova/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-nova/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-nova/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-nova/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]\">\n      <div\n        className=\"grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <UIElements />\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-nova/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-nova/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-nova/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-nova/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-nova/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-nova/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-nova/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-nova/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-nova/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-nova/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-nova/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-nova/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-nova/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-nova/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-nova/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-nova/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-nova/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-nova/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-nova/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-nova/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-nova/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-nova/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-nova/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-nova/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-nova/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-nova/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-nova/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-nova/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-nova/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-nova/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-nova/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-nova/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <div className=\"hidden md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/example.json b/apps/v4/public/r/styles/radix-vega/example.json
index 92d41020b0..b485ae8a35 100644
--- a/apps/v4/public/r/styles/radix-vega/example.json
+++ b/apps/v4/public/r/styles/radix-vega/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-vega/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/preview.json b/apps/v4/public/r/styles/radix-vega/preview.json
index 2b75c021bb..27155a9c15 100644
--- a/apps/v4/public/r/styles/radix-vega/preview.json
+++ b/apps/v4/public/r/styles/radix-vega/preview.json
@@ -33,7 +33,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/preview/index.tsx",
-      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-vega/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-vega/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-vega/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-vega/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-vega/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-vega/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-vega/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-vega/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-vega/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-vega/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-vega/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-vega/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-vega/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-vega/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-vega/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-vega/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-vega/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-vega/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-vega/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-vega/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-vega/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-vega/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-vega/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-vega/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-vega/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-vega/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-vega/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-vega/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-vega/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-vega/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-vega/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-vega/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]\">\n      <div\n        className=\"grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <UIElements />\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-vega/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-vega/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-vega/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-vega/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-vega/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-vega/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-vega/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-vega/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-vega/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-vega/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-vega/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-vega/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-vega/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-vega/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-vega/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-vega/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-vega/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-vega/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-vega/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-vega/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-vega/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-vega/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-vega/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-vega/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-vega/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-vega/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-vega/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-vega/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-vega/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-vega/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-vega/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-vega/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col\">\n          <IconPreviewGrid />\n          <div className=\"hidden md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/templates/astro-app.tar.gz b/apps/v4/public/r/templates/astro-app.tar.gz
index dde3333894..f3cdc0de90 100644
Binary files a/apps/v4/public/r/templates/astro-app.tar.gz and b/apps/v4/public/r/templates/astro-app.tar.gz differ
diff --git a/apps/v4/public/r/templates/astro-monorepo.tar.gz b/apps/v4/public/r/templates/astro-monorepo.tar.gz
index e80dc667f0..bf91e16d9c 100644
Binary files a/apps/v4/public/r/templates/astro-monorepo.tar.gz and b/apps/v4/public/r/templates/astro-monorepo.tar.gz differ
diff --git a/apps/v4/public/r/templates/next-app.tar.gz b/apps/v4/public/r/templates/next-app.tar.gz
index a42cbf74fa..2fdf3d4dde 100644
Binary files a/apps/v4/public/r/templates/next-app.tar.gz and b/apps/v4/public/r/templates/next-app.tar.gz differ
diff --git a/apps/v4/public/r/templates/next-monorepo.tar.gz b/apps/v4/public/r/templates/next-monorepo.tar.gz
index d0a3f2ca45..3fc668c2a9 100644
Binary files a/apps/v4/public/r/templates/next-monorepo.tar.gz and b/apps/v4/public/r/templates/next-monorepo.tar.gz differ
diff --git a/apps/v4/public/r/templates/react-router-app.tar.gz b/apps/v4/public/r/templates/react-router-app.tar.gz
index c4f0a938b9..41207cfd9c 100644
Binary files a/apps/v4/public/r/templates/react-router-app.tar.gz and b/apps/v4/public/r/templates/react-router-app.tar.gz differ
diff --git a/apps/v4/public/r/templates/react-router-monorepo.tar.gz b/apps/v4/public/r/templates/react-router-monorepo.tar.gz
index 9a09fffd99..ef372aad50 100644
Binary files a/apps/v4/public/r/templates/react-router-monorepo.tar.gz and b/apps/v4/public/r/templates/react-router-monorepo.tar.gz differ
diff --git a/apps/v4/public/r/templates/start-app.tar.gz b/apps/v4/public/r/templates/start-app.tar.gz
index 8c7ed70079..d0e85235c2 100644
Binary files a/apps/v4/public/r/templates/start-app.tar.gz and b/apps/v4/public/r/templates/start-app.tar.gz differ
diff --git a/apps/v4/public/r/templates/start-monorepo.tar.gz b/apps/v4/public/r/templates/start-monorepo.tar.gz
index 1056728b32..63b7a0f1ad 100644
Binary files a/apps/v4/public/r/templates/start-monorepo.tar.gz and b/apps/v4/public/r/templates/start-monorepo.tar.gz differ
diff --git a/apps/v4/public/r/templates/vite-app.tar.gz b/apps/v4/public/r/templates/vite-app.tar.gz
index 4e04c6a051..a6a129e64e 100644
Binary files a/apps/v4/public/r/templates/vite-app.tar.gz and b/apps/v4/public/r/templates/vite-app.tar.gz differ
diff --git a/apps/v4/public/r/templates/vite-monorepo.tar.gz b/apps/v4/public/r/templates/vite-monorepo.tar.gz
index cb89430f5f..221b3eeb81 100644
Binary files a/apps/v4/public/r/templates/vite-monorepo.tar.gz and b/apps/v4/public/r/templates/vite-monorepo.tar.gz differ
diff --git a/apps/v4/registry/bases/base/blocks/preview/index.tsx b/apps/v4/registry/bases/base/blocks/preview/index.tsx
index 39d1a116aa..f9efe40ead 100644
--- a/apps/v4/registry/bases/base/blocks/preview/index.tsx
+++ b/apps/v4/registry/bases/base/blocks/preview/index.tsx
@@ -35,20 +35,25 @@ import { WeeklyFitnessSummary } from "@/registry/bases/base/blocks/preview/cards
 
 export default function PreviewExample() {
   return (
-    <div className="overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]">
+    <div className="overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]">
       <div
-        className="grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)"
+        className="grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)"
         data-slot="capture-target"
       >
         <div className="flex flex-col">
           <StyleOverview />
+          <div className="md:hidden">
+            <UIElements />
+          </div>
           <CodespacesCard />
           <BarVisualizerCard />
           <Invoice />
         </div>
         <div className="flex flex-col">
           <IconPreviewGrid />
-          <UIElements />
+          <div className="hidden w-full md:flex">
+            <UIElements />
+          </div>
           <ObservabilityCard />
           <Visitors />
           <Shortcuts />
diff --git a/apps/v4/registry/bases/base/components/example.tsx b/apps/v4/registry/bases/base/components/example.tsx
index cf547b5abf..1f83f1df9f 100644
--- a/apps/v4/registry/bases/base/components/example.tsx
+++ b/apps/v4/registry/bases/base/components/example.tsx
@@ -2,7 +2,7 @@ import { cn } from "@/registry/bases/base/lib/utils"
 
 function ExampleWrapper({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div className="w-full bg-background">
+    <div className="w-full bg-muted dark:bg-background">
       <div
         data-slot="example-wrapper"
         className={cn(
@@ -43,7 +43,7 @@ function Example({
       <div
         data-slot="example-content"
         className={cn(
-          "flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full",
+          "flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full",
           className
         )}
       >
diff --git a/apps/v4/registry/bases/radix/blocks/preview/index.tsx b/apps/v4/registry/bases/radix/blocks/preview/index.tsx
index 42d7de37ef..14ca5bd317 100644
--- a/apps/v4/registry/bases/radix/blocks/preview/index.tsx
+++ b/apps/v4/registry/bases/radix/blocks/preview/index.tsx
@@ -35,20 +35,25 @@ import { WeeklyFitnessSummary } from "@/registry/bases/radix/blocks/preview/card
 
 export default function PreviewExample() {
   return (
-    <div className="overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(10)] 3xl:[--gap:--spacing(12)]">
+    <div className="overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]">
       <div
-        className="grid w-[3000px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) dark:bg-background *:[div]:gap-(--gap)"
+        className="grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)"
         data-slot="capture-target"
       >
         <div className="flex flex-col">
           <StyleOverview />
+          <div className="md:hidden">
+            <UIElements />
+          </div>
           <CodespacesCard />
           <BarVisualizerCard />
           <Invoice />
         </div>
         <div className="flex flex-col">
           <IconPreviewGrid />
-          <UIElements />
+          <div className="hidden w-full md:flex">
+            <UIElements />
+          </div>
           <ObservabilityCard />
           <Visitors />
           <Shortcuts />
diff --git a/apps/v4/registry/bases/radix/components/example.tsx b/apps/v4/registry/bases/radix/components/example.tsx
index 6e5f58bd93..559bcedab2 100644
--- a/apps/v4/registry/bases/radix/components/example.tsx
+++ b/apps/v4/registry/bases/radix/components/example.tsx
@@ -2,7 +2,7 @@ import { cn } from "@/registry/bases/radix/lib/utils"
 
 function ExampleWrapper({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div className="w-full bg-background">
+    <div className="w-full bg-muted dark:bg-background">
       <div
         data-slot="example-wrapper"
         className={cn(
@@ -42,7 +42,7 @@ function Example({
       <div
         data-slot="example-content"
         className={cn(
-          "flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed bg-background p-4 text-foreground sm:p-6 *:[div:not([class*='w-'])]:w-full",
+          "flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full",
           className
         )}
       >