update: UX of slider in theme builder

packages/palette/.gitignore

@@ -22,4 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
 .vercel

packages/palette/.vercel/README.txt

@@ -1,11 +0,0 @@
-> Why do I have a folder named ".vercel" in my project?
-The ".vercel" folder is created when you link a directory to a Vercel project.
-
-> What does the "project.json" file contain?
-The "project.json" file contains:
-- The ID of the Vercel project that you linked ("projectId")
-- The ID of the user or team your Vercel project is owned by ("orgId")
-
-> Should I commit the ".vercel" folder?
-No, you should not share the ".vercel" folder with anyone.
-Upon creation, it will be automatically added to your ".gitignore" file.

packages/palette/.vercel/project.json

@@ -1 +0,0 @@
-{"projectId":"prj_a2fcj6ZRTyTlllCd2rFJm7kPLEOc","orgId":"team_DiIY95BaFppaGJqqgrXYNt5O","projectName":"cvsa-theme"}

packages/palette/package.json

@@ -6,7 +6,8 @@
 	"scripts": {
 		"dev": "vite --port 8832",
 		"build": "tsc -b && vite build",
-		"preview": "vite preview --port 8832"
+		"preview": "vite preview --port 8832",
+		"deploy": "bunx --bun vercel --prod"
 	},
 	"dependencies": {
 		"@material/material-color-utilities": "^0.3.0",
@@ -37,6 +38,7 @@
 		"typescript": "~5.9.3",
 		"typescript-eslint": "^8.45.0",
 		"unocss": "^66.5.2",
+		"vercel": "^50.1.3",
 		"vite": "^7.1.7"
 	}
 }

packages/palette/src/components/Picker/Slider.tsx

@@ -45,10 +45,6 @@ export const Slider = ({ useP3, channel, color, onChange, i18nProvider }: Slider
 	};
 
 	const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-		const value = parseFloat(e.target.value);
-		if (value > maxValue[channel]) onChange(maxValue[channel]);
-		else if (value < 0 || isNaN(value)) onChange(0);
-		else onChange(value);
 		setValue(e.target.value);
 	};
 
@@ -146,7 +142,11 @@ export const Slider = ({ useP3, channel, color, onChange, i18nProvider }: Slider
 					max={maxValue[channel]}
 					step={10 ** -precision[channel]}
 					value={color[channel]}
-					onChange={onInputChange}
+					onClick={(e) => {
+						e.preventDefault();
+						const newValue = getValueFromPosition(e.clientX);
+						handleOnChange(newValue);
+					}}
 					className="absolute z-5 inset-0 w-full h-full opacity-0 cursor-pointer"
 				/>
 				<Handle

packages/palette/vite.config.ts

@@ -5,13 +5,11 @@ import { defineConfig } from "vite";
 // https://vite.dev/config/
 export default defineConfig({
 	plugins: [
-		//@ts-expect-error
 		react({
 			babel: {
 				plugins: [["babel-plugin-react-compiler"]],
 			},
 		}),
-		//@ts-expect-error
 		UnoCSS(),
 	],
 });