@newtonedev/editor 0.1.11 → 0.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/editor",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Shared color system editor for Newtone applications",
   "license": "MIT",
   "repository": {

package/src/components/sections/ColorsSection.tsx

@@ -11,7 +11,7 @@ import {
 import type { ColorMode } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 import type { ColorResult, DynamicRange } from "newtone";
-import type { DesaturationStrength, HueGradingStrength } from "newtone";
+import type { HueGradingStrength } from "newtone";
 import type { ConfiguratorState } from "@newtonedev/configurator";
 import type { ConfiguratorAction } from "@newtonedev/configurator";
 import {
@@ -400,37 +400,20 @@ export function ColorsSection({
         />
 
         {/* Desaturation */}
-        <div style={{ display: "flex", gap: 12, alignItems: "flex-end" }}>
-          <div style={{ flex: 1 }}>
-            <Select
-              options={STRENGTH_OPTIONS}
-              value={palette.desaturationStrength}
-              onValueChange={(strength) =>
-                dispatch({
-                  type: "SET_PALETTE_DESAT_STRENGTH",
-                  index: activePaletteIndex,
-                  strength: strength as DesaturationStrength,
-                })
-              }
-              label="Desaturation"
-            />
-          </div>
-          {palette.desaturationStrength !== "none" && (
-            <div style={{ paddingBottom: 2 }}>
-              <Toggle
-                value={palette.desaturationDirection === "dark"}
-                onValueChange={(v) =>
-                  dispatch({
-                    type: "SET_PALETTE_DESAT_DIRECTION",
-                    index: activePaletteIndex,
-                    direction: v ? "dark" : "light",
-                  })
-                }
-                label="Invert"
-              />
-            </div>
-          )}
-        </div>
+        <Slider
+          value={Math.round((palette.desaturation ?? 0) * 100)}
+          onValueChange={(v) =>
+            dispatch({
+              type: "SET_PALETTE_DESATURATION",
+              index: activePaletteIndex,
+              desaturation: v / 100,
+            })
+          }
+          min={-100}
+          max={100}
+          label="Desaturation"
+          editableValue
+        />
 
         {/* Hue Grading */}
         <div style={{ display: "flex", gap: 12, alignItems: "flex-end" }}>