fix

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

@@ -203,6 +203,9 @@ export function DesignSystemProvider({
           }
         }
 
+        // When translucent is enabled, move from data-attr to class so styles apply.
+        // When disabled, move back to a data-attr so the element stays queryable
+        // for future toggles without losing its identity as a menu element.
         if (isTranslucentMenu) {
           element.classList.add("cn-menu-translucent")
           element.removeAttribute("data-menu-translucent")

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

@@ -26,11 +26,6 @@ import {
 type ColorChoice = "default" | "inverted"
 type SurfaceChoice = "solid" | "translucent"
 
-type MenuItemConfig = {
-  value: MenuColorValue
-  label: string
-}
-
 function getMenuColorValue(
   color: ColorChoice,
   translucent: boolean
@@ -42,13 +37,12 @@ function getMenuColorValue(
   return translucent ? "inverted-translucent" : "inverted"
 }
 
-const MENU_ITEMS: MenuItemConfig[] = [
+const MENU_OPTIONS: { value: MenuColorValue; label: string }[] = [
   { value: "default", label: "Default / Solid" },
   { value: "default-translucent", label: "Default / Translucent" },
   { value: "inverted", label: "Inverted / Solid" },
   { value: "inverted-translucent", label: "Inverted / Translucent" },
 ]
-const ALL_OPTIONS = MENU_ITEMS
 
 export function MenuColorPicker({
   isMobile,
@@ -62,7 +56,7 @@ export function MenuColorPicker({
   const mounted = useMounted()
   const lastSolidMenuAccentRef = React.useRef(params.menuAccent)
   const isDark = mounted && resolvedTheme === "dark"
-  const currentMenu = ALL_OPTIONS.find(
+  const currentMenu = MENU_OPTIONS.find(
     (menu) => menu.value === params.menuColor
   )
   const colorChoice: ColorChoice =
@@ -109,7 +103,7 @@ export function MenuColorPicker({
       <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
-            <div className="text-xs text-muted-foreground">Menu </div>
+            <div className="text-xs text-muted-foreground">Menu</div>
             <div className="text-sm font-medium text-foreground">
               {currentMenu?.label}
             </div>

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

@@ -169,13 +169,16 @@ export function useDesignSystemSearchParams(options: Options = {}) {
   })
 
   // If preset param exists, decode it and overlay on raw params.
-  const params =
-    rawParams.preset && isPresetCode(rawParams.preset)
-      ? normalizeDesignSystemParams({
-          ...rawParams,
-          ...(decodePreset(rawParams.preset) ?? {}),
-        })
-      : normalizeDesignSystemParams(rawParams)
+  const params = React.useMemo(
+    () =>
+      rawParams.preset && isPresetCode(rawParams.preset)
+        ? normalizeDesignSystemParams({
+            ...rawParams,
+            ...(decodePreset(rawParams.preset) ?? {}),
+          })
+        : normalizeDesignSystemParams(rawParams),
+    [rawParams]
+  )
 
   // Use ref so setParams callback stays stable across renders.
   const paramsRef = React.useRef(params)