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)

packages/shadcn/src/utils/transformers/index.ts

@@ -2,7 +2,6 @@ import { promises as fs } from "fs"
 import { tmpdir } from "os"
 import path from "path"
 import { registryBaseColorSchema } from "@/src/schema"
-import { type StyleMap } from "@/src/styles/create-style-map"
 import { Config } from "@/src/utils/get-config"
 import { transformCssVars } from "@/src/utils/transformers/transform-css-vars"
 import { transformIcons } from "@/src/utils/transformers/transform-icons"
@@ -23,7 +22,6 @@ export type TransformOpts = {
   baseColor?: z.infer<typeof registryBaseColorSchema>
   transformJsx?: boolean
   isRemote?: boolean
-  styleMap?: StyleMap
 }
 
 export type Transformer<Output = SourceFile> = (

packages/shadcn/src/utils/updaters/update-files.ts

@@ -3,7 +3,6 @@ import { tmpdir } from "os"
 import path, { basename } from "path"
 import { getRegistryBaseColor } from "@/src/registry/api"
 import { RegistryItem, registryItemFileSchema } from "@/src/schema"
-import { createStyleMap, type StyleMap } from "@/src/styles/create-style-map"
 import { isContentSame } from "@/src/utils/compare"
 import {
   findExistingEnvFile,
@@ -73,20 +72,6 @@ export async function updateFiles(
       : Promise.resolve(undefined),
   ])
 
-  // Build style map from the user's CSS for transformers that need it.
-  let styleMap: StyleMap | undefined
-  if (config.resolvedPaths.tailwindCss) {
-    try {
-      const cssContent = await fs.readFile(
-        config.resolvedPaths.tailwindCss,
-        "utf-8"
-      )
-      styleMap = createStyleMap(cssContent)
-    } catch {
-      // Ignore if CSS file is not found.
-    }
-  }
-
   let filesCreated: string[] = []
   let filesUpdated: string[] = []
   let filesSkipped: string[] = []
@@ -167,7 +152,6 @@ export async function updateFiles(
               baseColor,
               transformJsx: !config.tsx,
               isRemote: options.isRemote,
-              styleMap,
             },
             [
               transformImport,