refactor: conditionally render 'oklch' color format based on Tailwind version

components/editor/code-panel.tsx

@@ -195,7 +195,7 @@ const CodePanel: React.FC<CodePanelProps> = ({ themeEditorState }) => {
           </SelectTrigger>
           <SelectContent>
             <SelectItem value="hsl">hsl</SelectItem>
-            <SelectItem value="oklch">oklch</SelectItem>
+            {tailwindVersion === "4" && <SelectItem value="oklch">oklch</SelectItem>}
             <SelectItem value="rgb">rgb</SelectItem>
             <SelectItem value="hex">hex</SelectItem>
           </SelectContent>

store/preferences-store.ts

@@ -4,6 +4,11 @@ import { ColorFormat } from "@/types";
 
 type PackageManager = "pnpm" | "npm" | "yarn" | "bun";
 
+const colorFormatsByVersion = {
+  "3": ["hex", "rgb", "hsl"] as const,
+  "4": ["hex", "rgb", "hsl", "oklch"] as const,
+};
+
 interface PreferencesStore {
   tailwindVersion: "3" | "4";
   colorFormat: ColorFormat;
@@ -11,23 +16,36 @@ interface PreferencesStore {
   setTailwindVersion: (version: "3" | "4") => void;
   setColorFormat: (format: ColorFormat) => void;
   setPackageManager: (pm: PackageManager) => void;
+  getAvailableColorFormats: () => readonly ColorFormat[];
 }
 
 export const usePreferencesStore = create<PreferencesStore>()(
   persist(
-    (set) => ({
+    (set, get) => ({
       tailwindVersion: "4",
       colorFormat: "oklch",
       packageManager: "pnpm",
       setTailwindVersion: (version: "3" | "4") => {
-        set({ tailwindVersion: version });
+        const currentFormat = get().colorFormat;
+        if (version === "3" && currentFormat === "oklch") {
+          set({ tailwindVersion: version, colorFormat: "hsl" });
+        } else {
+          set({ tailwindVersion: version });
+        }
       },
       setColorFormat: (format: ColorFormat) => {
-        set({ colorFormat: format });
+        const availableFormats = get().getAvailableColorFormats();
+        if (availableFormats.includes(format)) {
+          set({ colorFormat: format });
+        }
       },
       setPackageManager: (pm: PackageManager) => {
         set({ packageManager: pm });
       },
+      getAvailableColorFormats: () => {
+        const version = get().tailwindVersion as "3" | "4";
+        return colorFormatsByVersion[version];
+      },
     }),
     {
       name: "preferences-storage", // unique name for localStorage