feat(docs): work on theme picker

packages/docs/src/components/ColorPalette.svelte

@@ -39,9 +39,13 @@
     if (event.key === "Escape") {
       closeModal()
     } else if (event.key === "Enter") {
+      event.preventDefault()
       if (validateColor(inputValue)) {
-        value = inputValue
-        inputValue = ""
+        if (value !== inputValue) {
+          const v = inputValue
+          inputValue = ""
+          value = v
+        }
         closeModal()
       }
     }
@@ -62,30 +66,46 @@
 
   function handleDragEnd(color) {
     if (isDragging) {
-      value = color
-      inputValue = ""
+      if (value !== color) {
+        inputValue = ""
+        value = color
+      } else {
+        inputValue = color
+      }
       isDragging = false
       dragPreviewColor = null
     }
   }
 
   function handleGlobalMouseUp() {
     if (isDragging && dragPreviewColor) {
-      value = dragPreviewColor // Ensure value is updated if drag ends elsewhere
-      inputValue = ""
+      if (value !== dragPreviewColor) {
+        inputValue = ""
+        value = dragPreviewColor // Ensure value is updated if drag ends elsewhere
+      } else {
+        inputValue = dragPreviewColor
+      }
     }
     isDragging = false
     dragPreviewColor = null
   }
 
+  let inputDebounce = null
   function handleInput(event) {
-    const newValue = event.target.value
-    if (validateColor(newValue)) {
-      value = newValue
-      inputValue = ""
-    } else {
-      inputValue = newValue
+    if (inputDebounce != null) {
+      clearTimeout(inputDebounce)
     }
+    inputDebounce = setTimeout(() => {
+      inputDebounce = null
+
+      const newValue = event.target.value
+      if (validateColor(newValue) && value !== newValue) {
+        inputValue = ""
+        value = newValue
+      } else {
+        inputValue = newValue
+      }
+    }, 300)
   }
 
   function toggleModal() {
@@ -111,21 +131,23 @@
     onModalStateChange(false)
   }
 
-  $effect(() => {
-    untrack(() => {
-      if (value !== inputValue) {
-        updateColorState(value)
-      }
-    })
-    inputValue = value
+  $effect.pre(() => {
+    if (open) {
+      untrack(() => {
+        if (value !== inputValue) {
+          updateColorState(value)
+        }
+      })
+      inputValue = value
+    }
   })
 
   // Update inputValue when colorState changes
-  $effect(() => {
+  $effect.pre(() => {
     const newValue = generateColorValue()
 
     untrack(() => {
-      if (inputValue !== newValue) {
+      if (newValue != null && inputValue !== newValue) {
         if (!colorState.changed) {
           colorState.value = newValue
           inputValue = newValue
@@ -138,7 +160,10 @@
   // Get the color to display (preview during dragging, actual value otherwise)
   const displayColor = $derived(dragPreviewColor || value)
 
-  const colorName = $derived(colorDetails.find(([, color]) => color === inputValue)?.[0])
+  const colorName = $derived.by(() => {
+    const name = colorDetails.find(([, color]) => color === inputValue)?.[0]
+    return name === "zinc-50" ? "neutral-50" : name
+  })
   const colorPairsMap = $derived.by(() => {
     const map = {
       color: {},
@@ -268,7 +293,7 @@
 
       return `rgb(${colorState.rgb.r} ${colorState.rgb.g} ${colorState.rgb.b})`
     } catch {
-      return inputValue // Fallback to current value if conversion fails
+      return null
     }
   }
 </script>
@@ -406,9 +431,9 @@
             >
               <div
                 class="border-base-content/10 relative grid aspect-square w-5 place-items-center rounded-full border bg-transparent select-none sm:m-px sm:w-7"
-                class:[box-shadow:0_0_0_2px_white,0_0_0_4px_black]={displayColor === color}
-                class:outline-white={displayColor === color}
-                class:outline-offset-[-3px]={displayColor === color}
+                class:[box-shadow:0_0_0_2px_white,0_0_0_4px_black]={colorName === name}
+                class:outline-white={colorName === name}
+                class:outline-offset-[-3px]={colorName === name}
                 style:background-color={color}
               >
                 {#if initials != null}
@@ -514,17 +539,8 @@
               <input
                 type="text"
                 class="grow xl:font-mono xl:normal-nums"
-                bind:value={inputValue}
+                value={inputValue}
                 oninput={handleInput}
-                onkeydown={(event) => {
-                  if (event.key === "Enter") {
-                    event.preventDefault()
-                    if (validateColor(inputValue)) {
-                      value = inputValue
-                      closeModal()
-                    }
-                  }
-                }}
                 aria-label={`${name} value`}
               />
               {#if colorName}
@@ -554,7 +570,7 @@
   <div
     class="modal-backdrop"
     onclick={closeModal}
-    onkeydown={(e) => e.key === "Enter" && closeModal()}
+    onkeydown={handleKeydown}
     role="button"
     tabindex="0"
     aria-label="Close modal"

packages/docs/src/components/themegenerator/ThemeCSSModal.svelte

@@ -24,7 +24,8 @@
   }
 
   function handleThemeCSSInput(event) {
-    const newThemeData = parseThemeCSS(event.target.value, currentTheme)
+    themeCSS = event.target.value
+    const newThemeData = parseThemeCSS(themeCSS, currentTheme)
     if (newThemeData) {
       currentTheme = newThemeData
       if (currentTheme.type === "custom") {
@@ -114,7 +115,7 @@
       spellcheck="false"
       data-theme="dark"
       class="textarea textarea-border textarea-xs block h-96 min-h-80 w-full max-w-none resize-none font-mono"
-      bind:value={themeCSS}
+      value={themeCSS}
       oninput={handleThemeCSSInput}
     ></textarea>
   </div>

packages/docs/src/routes/(routes)/theme-generator/+page.svelte

@@ -98,18 +98,21 @@
   })
 
   const colorDetails = $derived(
-    Object.entries(data.tailwindcolors).map(([key, color]) => {
+    Object.entries(data.tailwindcolors).map(([keyTw, color]) => {
       const names = []
       const initials = []
-      for (const [key, themeColor] of Object.entries(currentTheme)) {
-        if (themeColor === color) {
-          names.push(key.replace("--color-", ""))
-          initials.push(data.colorInitials[key] || null)
+
+      if (keyTw !== "zinc-50") {
+        for (const [keyTheme, themeColor] of Object.entries(currentTheme)) {
+          if (themeColor === color) {
+            names.push(keyTheme.replace("--color-", ""))
+            initials.push(data.colorInitials[keyTheme] || null)
+          }
         }
       }
 
       return [
-        key,
+        keyTw,
         color,
         initials.length > 0 ? `${initials[0]}${initials.length > 1 ? "+" : ""}` : null,
         names,