feat: update create page

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

@@ -35,7 +35,7 @@ export function MenuAccentPicker({
               {currentAccent?.label}
             </div>
           </div>
-          <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">
+          <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.5">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="128"

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-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2"
+              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.5"
             />
           )}
         </PickerTrigger>

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

@@ -51,7 +51,7 @@ export function BasePicker({
           </div>
           {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!"
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 text-foreground select-none md:right-2.5 *:[svg]:size-4 *:[svg]:text-foreground!"
               dangerouslySetInnerHTML={{
                 __html: currentBase.meta.logo,
               }}

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

@@ -10,26 +10,46 @@ import {
 } from "@/registry/config"
 import { useIframeMessageListener } from "@/app/(create)/hooks/use-iframe-sync"
 import { FONTS } from "@/app/(create)/lib/fonts"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import {
+  type DesignSystemSearchParams,
+  useDesignSystemSearchParams,
+} from "@/app/(create)/lib/search-params"
 
 export function DesignSystemProvider({
   children,
 }: {
   children: React.ReactNode
 }) {
-  const [
-    { style, theme, font, baseColor, menuAccent, menuColor, radius },
-    setSearchParams,
-  ] = useDesignSystemSearchParams({
+  const [searchParams, setSearchParams] = useDesignSystemSearchParams({
     shallow: true, // No need to go through the server…
     history: "replace", // …or push updates into the iframe history.
   })
-  useIframeMessageListener("design-system-params", setSearchParams)
+  const [liveSearchParams, setLiveSearchParams] = React.useState(searchParams)
   const [isReady, setIsReady] = React.useState(false)
+  const { style, theme, font, baseColor, menuAccent, menuColor, radius } =
+    liveSearchParams
   const effectiveRadius = style === "lyra" ? "none" : radius
 
+  React.useEffect(() => {
+    setLiveSearchParams(searchParams)
+  }, [searchParams])
+
+  const handleDesignSystemMessage = React.useCallback(
+    (nextParams: DesignSystemSearchParams) => {
+      setLiveSearchParams(nextParams)
+      setSearchParams(nextParams)
+    },
+    [setSearchParams]
+  )
+
+  useIframeMessageListener("design-system-params", handleDesignSystemMessage)
+
   React.useEffect(() => {
     if (style === "lyra" && radius !== "none") {
+      setLiveSearchParams((prev) => ({
+        ...prev,
+        radius: "none",
+      }))
       setSearchParams({ radius: "none" as RadiusValue })
     }
   }, [style, radius, setSearchParams])

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-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2"
+            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.5"
             style={{ fontFamily: currentFont?.font.style.fontFamily }}
           >
             Aa

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-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2 *:[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.5 *:[svg]:text-foreground!">
             {logos[currentIconLibrary?.name as keyof typeof logos]}
           </div>
         </PickerTrigger>

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

@@ -52,7 +52,7 @@ export function MainMenu({ className }: React.ComponentProps<typeof Button>) {
         <PickerContent side="right" align="start" alignOffset={-8}>
           <PickerGroup>
             <PickerItem onClick={openActionMenu}>
-              Quick actions{" "}
+              Navigate...
               <PickerShortcut>{isMac ? "⌘P" : "Ctrl+P"}</PickerShortcut>
             </PickerItem>
             <PickerItem onClick={randomize}>

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

@@ -128,7 +128,7 @@ export function MenuColorPicker({
               {currentMenu?.label}
             </div>
           </div>
-          <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">
+          <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.5">
             {currentMenu?.icon}
           </div>
         </PickerTrigger>

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-40 shrink-0 touch-manipulation rounded-xl p-3 ring-1 ring-foreground/10 select-none hover:bg-muted focus-visible:ring-foreground/50 focus-visible:outline-none disabled:opacity-50 data-popup-open:bg-muted md:w-full md:rounded-lg md:p-2",
+        "relative w-40 shrink-0 touch-manipulation rounded-xl p-3 ring-1 ring-foreground/10 select-none hover:bg-muted focus-visible:ring-foreground/50 focus-visible:outline-none disabled:opacity-50 data-popup-open:bg-muted md:w-full md:rounded-lg md:px-2.5 md:py-2",
         className
       )}
       {...props}

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

@@ -42,7 +42,7 @@ export function RadiusPicker({
               {currentRadius?.label}
             </div>
           </div>
-          <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">
+          <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.5">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"

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-4 flex size-4 -translate-y-1/2 items-center justify-center select-none md:right-2">
+            <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.5">
               {React.cloneElement(currentStyle.icon, {
                 className: "size-4",
               })}

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-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2"
+              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.5"
             />
           )}
         </PickerTrigger>

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

@@ -23,6 +23,12 @@ export function useIframeMessageListener<
   messageType: MessageType,
   onMessage: (data: Extract<Message, { type: MessageType }>["data"]) => void
 ) {
+  const onMessageRef = React.useRef(onMessage)
+
+  React.useEffect(() => {
+    onMessageRef.current = onMessage
+  }, [onMessage])
+
   React.useEffect(() => {
     if (!isInIframe()) {
       return
@@ -30,7 +36,7 @@ export function useIframeMessageListener<
 
     const handleMessage = (event: MessageEvent) => {
       if (event.data.type === messageType) {
-        onMessage(event.data.data)
+        onMessageRef.current(event.data.data)
       }
     }
 
@@ -38,7 +44,7 @@ export function useIframeMessageListener<
     return () => {
       window.removeEventListener("message", handleMessage)
     }
-  }, [messageType, onMessage])
+  }, [messageType])
 }
 
 export function sendToIframe<

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

@@ -79,7 +79,7 @@ export function useRandom() {
     context.font = selectedFont
     context.radius = selectedRadius
 
-    setParams({
+    const nextParams = {
       style: selectedStyle,
       baseColor,
       theme: selectedTheme,
@@ -88,9 +88,23 @@ export function useRandom() {
       menuAccent: selectedMenuAccent,
       menuColor: selectedMenuColor,
       radius: selectedRadius,
-    })
+    }
+
+    // Keep the ref in sync so rapid repeats use the latest randomized state
+    // even before the URL state finishes committing.
+    paramsRef.current = {
+      ...paramsRef.current,
+      ...nextParams,
+    }
+
+    setParams(nextParams)
   }, [setParams, locks])
 
+  const randomizeRef = React.useRef(randomize)
+  React.useEffect(() => {
+    randomizeRef.current = randomize
+  }, [randomize])
+
   React.useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if ((e.key === "r" || e.key === "R") && !e.metaKey && !e.ctrlKey) {
@@ -104,7 +118,7 @@ export function useRandom() {
         }
 
         e.preventDefault()
-        randomize()
+        randomizeRef.current()
       }
     }
 
@@ -112,7 +126,7 @@ export function useRandom() {
     return () => {
       document.removeEventListener("keydown", down)
     }
-  }, [randomize])
+  }, [])
 
   return { randomize }
 }