Refactor adjustment nodes to use ParameterSlider for enhanced UI and functionality

- Replaced SliderRow components with ParameterSlider in color-adjust, curves, detail-adjust, and light-adjust nodes for improved user interaction.
- Updated minimum width and height configurations for adjustment nodes to accommodate new slider designs.
- Enhanced node templates and default dimensions to reflect the changes in adjustment node sizes.
- Improved state management and data handling for slider values in adjustment nodes.

components/canvas/nodes/base-node-wrapper.tsx

@@ -39,10 +39,10 @@ const RESIZE_CONFIGS: Record<string, ResizeConfig> = {
   "ai-image": { minWidth: 200, minHeight: 208, keepAspectRatio: false },
   compare: { minWidth: 300, minHeight: 200 },
   prompt: { minWidth: 260, minHeight: 220 },
-  curves: { minWidth: 240, minHeight: 320 },
-  "color-adjust": { minWidth: 240, minHeight: 360 },
-  "light-adjust": { minWidth: 240, minHeight: 360 },
-  "detail-adjust": { minWidth: 240, minHeight: 360 },
+  curves: { minWidth: 300, minHeight: 620 },
+  "color-adjust": { minWidth: 300, minHeight: 760 },
+  "light-adjust": { minWidth: 300, minHeight: 860 },
+  "detail-adjust": { minWidth: 300, minHeight: 820 },
   render: { minWidth: 260, minHeight: 300, keepAspectRatio: true },
   text: { minWidth: 220, minHeight: 90 },
   note: { minWidth: 200, minHeight: 90 },

components/canvas/nodes/color-adjust-node.tsx

@@ -10,9 +10,13 @@ import type { Id } from "@/convex/_generated/dataModel";
 import { useAuthQuery } from "@/hooks/use-auth-query";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
-import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
 import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
 import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
+import {
+  ParameterSlider,
+  type SliderConfig,
+  type SliderValue,
+} from "@/src/components/tool-ui/parameter-slider";
 import {
   cloneAdjustmentData,
   DEFAULT_COLOR_ADJUST_DATA,
@@ -80,6 +84,71 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
   };
 
   const builtinOptions = useMemo(() => Object.entries(COLOR_PRESETS), []);
+  const sliderConfigs = useMemo<SliderConfig[]>(
+    () => [
+      {
+        id: "hue",
+        label: "Hue",
+        min: -180,
+        max: 180,
+        value: DEFAULT_COLOR_ADJUST_DATA.hsl.hue,
+      },
+      {
+        id: "saturation",
+        label: "Saturation",
+        min: -100,
+        max: 100,
+        value: DEFAULT_COLOR_ADJUST_DATA.hsl.saturation,
+      },
+      {
+        id: "luminance",
+        label: "Luminance",
+        min: -100,
+        max: 100,
+        value: DEFAULT_COLOR_ADJUST_DATA.hsl.luminance,
+      },
+      {
+        id: "temperature",
+        label: "Temperature",
+        min: -100,
+        max: 100,
+        value: DEFAULT_COLOR_ADJUST_DATA.temperature,
+      },
+      {
+        id: "tint",
+        label: "Tint",
+        min: -100,
+        max: 100,
+        value: DEFAULT_COLOR_ADJUST_DATA.tint,
+      },
+      {
+        id: "vibrance",
+        label: "Vibrance",
+        min: -100,
+        max: 100,
+        value: DEFAULT_COLOR_ADJUST_DATA.vibrance,
+      },
+    ],
+    [],
+  );
+  const sliderValues = useMemo<SliderValue[]>(
+    () => [
+      { id: "hue", value: localData.hsl.hue },
+      { id: "saturation", value: localData.hsl.saturation },
+      { id: "luminance", value: localData.hsl.luminance },
+      { id: "temperature", value: localData.temperature },
+      { id: "tint", value: localData.tint },
+      { id: "vibrance", value: localData.vibrance },
+    ],
+    [
+      localData.hsl.hue,
+      localData.hsl.luminance,
+      localData.hsl.saturation,
+      localData.temperature,
+      localData.tint,
+      localData.vibrance,
+    ],
+  );
 
   const applyPresetValue = (value: string) => {
     if (value === "custom") {
@@ -126,7 +195,7 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
       selected={selected}
       status={data._status}
       statusMessage={data._statusMessage}
-      className="min-w-[240px] border-cyan-500/30"
+      className="min-w-[300px] border-cyan-500/30"
     >
       <Handle
         type="target"
@@ -177,74 +246,36 @@ export default function ColorAdjustNode({ id, data, selected, width }: NodeProps
           currentParams={localData}
         />
 
-        <div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
-          <SliderRow
-            label="Hue"
-            value={localData.hsl.hue}
-            min={-180}
-            max={180}
-            onChange={(value) =>
-              updateData((current) => ({
-                ...current,
-                hsl: { ...current.hsl, hue: value },
-                preset: null,
-              }))
+        <ParameterSlider
+          id={`${id}-color-adjust-params`}
+          className="min-w-0 max-w-none"
+          sliders={sliderConfigs}
+          values={sliderValues}
+          fillClassName="bg-cyan-500/35 dark:bg-cyan-400/35"
+          handleClassName="bg-cyan-500 dark:bg-cyan-400"
+          trackClassName="bg-cyan-500/10 dark:bg-cyan-500/15"
+          onChange={(values) => {
+            const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
+            updateData((current) => ({
+              ...current,
+              hsl: {
+                ...current.hsl,
+                hue: valueById.get("hue") ?? current.hsl.hue,
+                saturation: valueById.get("saturation") ?? current.hsl.saturation,
+                luminance: valueById.get("luminance") ?? current.hsl.luminance,
+              },
+              temperature: valueById.get("temperature") ?? current.temperature,
+              tint: valueById.get("tint") ?? current.tint,
+              vibrance: valueById.get("vibrance") ?? current.vibrance,
+              preset: null,
+            }));
+          }}
+          onAction={async (actionId) => {
+            if (actionId === "apply") {
+              queueSave();
             }
-          />
-          <SliderRow
-            label="Saturation"
-            value={localData.hsl.saturation}
-            min={-100}
-            max={100}
-            onChange={(value) =>
-              updateData((current) => ({
-                ...current,
-                hsl: { ...current.hsl, saturation: value },
-                preset: null,
-              }))
-            }
-          />
-          <SliderRow
-            label="Luminance"
-            value={localData.hsl.luminance}
-            min={-100}
-            max={100}
-            onChange={(value) =>
-              updateData((current) => ({
-                ...current,
-                hsl: { ...current.hsl, luminance: value },
-                preset: null,
-              }))
-            }
-          />
-          <SliderRow
-            label="Temperature"
-            value={localData.temperature}
-            min={-100}
-            max={100}
-            onChange={(value) =>
-              updateData((current) => ({ ...current, temperature: value, preset: null }))
-            }
-          />
-          <SliderRow
-            label="Tint"
-            value={localData.tint}
-            min={-100}
-            max={100}
-            onChange={(value) =>
-              updateData((current) => ({ ...current, tint: value, preset: null }))
-            }
-          />
-          <SliderRow
-            label="Vibrance"
-            value={localData.vibrance}
-            min={-100}
-            max={100}
-            onChange={(value) =>
-              updateData((current) => ({ ...current, vibrance: value, preset: null }))
-            }
-          />
-        </div>
+          }}
+        />
       </div>
 
       <Handle

components/canvas/nodes/curves-node.tsx

@@ -10,9 +10,13 @@ import type { Id } from "@/convex/_generated/dataModel";
 import { useAuthQuery } from "@/hooks/use-auth-query";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
-import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
 import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
 import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
+import {
+  ParameterSlider,
+  type SliderConfig,
+  type SliderValue,
+} from "@/src/components/tool-ui/parameter-slider";
 import {
   cloneAdjustmentData,
   DEFAULT_CURVES_DATA,
@@ -80,6 +84,42 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
   };
 
   const builtinOptions = useMemo(() => Object.entries(CURVE_PRESETS), []);
+  const sliderConfigs = useMemo<SliderConfig[]>(
+    () => [
+      {
+        id: "black-point",
+        label: "Black Point",
+        min: 0,
+        max: 255,
+        value: DEFAULT_CURVES_DATA.levels.blackPoint,
+      },
+      {
+        id: "white-point",
+        label: "White Point",
+        min: 0,
+        max: 255,
+        value: DEFAULT_CURVES_DATA.levels.whitePoint,
+      },
+      {
+        id: "gamma",
+        label: "Gamma",
+        min: 0.1,
+        max: 3,
+        step: 0.01,
+        precision: 2,
+        value: DEFAULT_CURVES_DATA.levels.gamma,
+      },
+    ],
+    [],
+  );
+  const sliderValues = useMemo<SliderValue[]>(
+    () => [
+      { id: "black-point", value: localData.levels.blackPoint },
+      { id: "white-point", value: localData.levels.whitePoint },
+      { id: "gamma", value: localData.levels.gamma },
+    ],
+    [localData.levels.blackPoint, localData.levels.gamma, localData.levels.whitePoint],
+  );
 
   const applyPresetValue = (value: string) => {
     if (value === "custom") {
@@ -127,7 +167,7 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
       selected={selected}
       status={data._status}
       statusMessage={data._statusMessage}
-      className="min-w-[240px] border-emerald-500/30"
+      className="min-w-[300px] border-emerald-500/30"
     >
       <Handle
         type="target"
@@ -178,48 +218,33 @@ export default function CurvesNode({ id, data, selected, width }: NodeProps<Curv
           currentParams={localData}
         />
 
-        <div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
-          <SliderRow
-            label="Black Point"
-            value={localData.levels.blackPoint}
-            min={0}
-            max={255}
-            onChange={(value) =>
-              updateData((current) => ({
-                ...current,
-                levels: { ...current.levels, blackPoint: value },
-                preset: null,
-              }))
+        <ParameterSlider
+          id={`${id}-curves-params`}
+          className="min-w-0 max-w-none"
+          sliders={sliderConfigs}
+          values={sliderValues}
+          fillClassName="bg-emerald-500/35 dark:bg-emerald-400/35"
+          handleClassName="bg-emerald-500 dark:bg-emerald-400"
+          trackClassName="bg-emerald-500/10 dark:bg-emerald-500/15"
+          onChange={(values) => {
+            const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
+            updateData((current) => ({
+              ...current,
+              levels: {
+                ...current.levels,
+                blackPoint: valueById.get("black-point") ?? current.levels.blackPoint,
+                whitePoint: valueById.get("white-point") ?? current.levels.whitePoint,
+                gamma: valueById.get("gamma") ?? current.levels.gamma,
+              },
+              preset: null,
+            }));
+          }}
+          onAction={async (actionId) => {
+            if (actionId === "apply") {
+              queueSave();
             }
-          />
-          <SliderRow
-            label="White Point"
-            value={localData.levels.whitePoint}
-            min={0}
-            max={255}
-            onChange={(value) =>
-              updateData((current) => ({
-                ...current,
-                levels: { ...current.levels, whitePoint: value },
-                preset: null,
-              }))
-            }
-          />
-          <SliderRow
-            label="Gamma"
-            value={localData.levels.gamma}
-            min={0.1}
-            max={3}
-            step={0.01}
-            onChange={(value) =>
-              updateData((current) => ({
-                ...current,
-                levels: { ...current.levels, gamma: value },
-                preset: null,
-              }))
-            }
-          />
-        </div>
+          }}
+        />
       </div>
 
       <Handle

components/canvas/nodes/detail-adjust-node.tsx

@@ -10,9 +10,13 @@ import type { Id } from "@/convex/_generated/dataModel";
 import { useAuthQuery } from "@/hooks/use-auth-query";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
-import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
 import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
 import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
+import {
+  ParameterSlider,
+  type SliderConfig,
+  type SliderValue,
+} from "@/src/components/tool-ui/parameter-slider";
 import {
   cloneAdjustmentData,
   DEFAULT_DETAIL_ADJUST_DATA,
@@ -80,6 +84,82 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
   };
 
   const builtinOptions = useMemo(() => Object.entries(DETAIL_PRESETS), []);
+  const sliderConfigs = useMemo<SliderConfig[]>(
+    () => [
+      {
+        id: "sharpen-amount",
+        label: "Sharpen",
+        min: 0,
+        max: 500,
+        value: DEFAULT_DETAIL_ADJUST_DATA.sharpen.amount,
+      },
+      {
+        id: "sharpen-radius",
+        label: "Radius",
+        min: 0.5,
+        max: 5,
+        step: 0.01,
+        precision: 2,
+        value: DEFAULT_DETAIL_ADJUST_DATA.sharpen.radius,
+      },
+      {
+        id: "sharpen-threshold",
+        label: "Threshold",
+        min: 0,
+        max: 255,
+        value: DEFAULT_DETAIL_ADJUST_DATA.sharpen.threshold,
+      },
+      {
+        id: "clarity",
+        label: "Clarity",
+        min: -100,
+        max: 100,
+        value: DEFAULT_DETAIL_ADJUST_DATA.clarity,
+      },
+      {
+        id: "denoise-luminance",
+        label: "Denoise Luma",
+        min: 0,
+        max: 100,
+        value: DEFAULT_DETAIL_ADJUST_DATA.denoise.luminance,
+      },
+      {
+        id: "denoise-color",
+        label: "Denoise Color",
+        min: 0,
+        max: 100,
+        value: DEFAULT_DETAIL_ADJUST_DATA.denoise.color,
+      },
+      {
+        id: "grain-amount",
+        label: "Grain",
+        min: 0,
+        max: 100,
+        value: DEFAULT_DETAIL_ADJUST_DATA.grain.amount,
+      },
+    ],
+    [],
+  );
+  const sliderValues = useMemo<SliderValue[]>(
+    () => [
+      { id: "sharpen-amount", value: localData.sharpen.amount },
+      { id: "sharpen-radius", value: localData.sharpen.radius },
+      { id: "sharpen-threshold", value: localData.sharpen.threshold },
+      { id: "clarity", value: localData.clarity },
+      { id: "denoise-luminance", value: localData.denoise.luminance },
+      { id: "denoise-color", value: localData.denoise.color },
+      { id: "grain-amount", value: localData.grain.amount },
+    ],
+    [
+      localData.clarity,
+      localData.denoise.color,
+      localData.denoise.luminance,
+      localData.grain.amount,
+      localData.sharpen.amount,
+      localData.sharpen.radius,
+      localData.sharpen.threshold,
+    ],
+  );
 
   const applyPresetValue = (value: string) => {
     if (value === "custom") {
@@ -126,7 +206,7 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
       selected={selected}
       status={data._status}
       statusMessage={data._statusMessage}
-      className="min-w-[240px] border-indigo-500/30"
+      className="min-w-[300px] border-indigo-500/30"
     >
       <Handle
         type="target"
@@ -177,15 +257,43 @@ export default function DetailAdjustNode({ id, data, selected, width }: NodeProp
           currentParams={localData}
         />
 
-        <div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
-          <SliderRow label="Sharpen" value={localData.sharpen.amount} min={0} max={500} onChange={(value) => updateData((current) => ({ ...current, sharpen: { ...current.sharpen, amount: value }, preset: null }))} />
-          <SliderRow label="Radius" value={localData.sharpen.radius} min={0.5} max={5} step={0.01} onChange={(value) => updateData((current) => ({ ...current, sharpen: { ...current.sharpen, radius: value }, preset: null }))} />
-          <SliderRow label="Threshold" value={localData.sharpen.threshold} min={0} max={255} onChange={(value) => updateData((current) => ({ ...current, sharpen: { ...current.sharpen, threshold: value }, preset: null }))} />
-          <SliderRow label="Clarity" value={localData.clarity} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, clarity: value, preset: null }))} />
-          <SliderRow label="Denoise Luma" value={localData.denoise.luminance} min={0} max={100} onChange={(value) => updateData((current) => ({ ...current, denoise: { ...current.denoise, luminance: value }, preset: null }))} />
-          <SliderRow label="Denoise Color" value={localData.denoise.color} min={0} max={100} onChange={(value) => updateData((current) => ({ ...current, denoise: { ...current.denoise, color: value }, preset: null }))} />
-          <SliderRow label="Grain" value={localData.grain.amount} min={0} max={100} onChange={(value) => updateData((current) => ({ ...current, grain: { ...current.grain, amount: value }, preset: null }))} />
-        </div>
+        <ParameterSlider
+          id={`${id}-detail-adjust-params`}
+          className="min-w-0 max-w-none"
+          sliders={sliderConfigs}
+          values={sliderValues}
+          fillClassName="bg-indigo-500/35 dark:bg-indigo-400/35"
+          handleClassName="bg-indigo-500 dark:bg-indigo-400"
+          trackClassName="bg-indigo-500/10 dark:bg-indigo-500/15"
+          onChange={(values) => {
+            const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
+            updateData((current) => ({
+              ...current,
+              sharpen: {
+                ...current.sharpen,
+                amount: valueById.get("sharpen-amount") ?? current.sharpen.amount,
+                radius: valueById.get("sharpen-radius") ?? current.sharpen.radius,
+                threshold: valueById.get("sharpen-threshold") ?? current.sharpen.threshold,
+              },
+              clarity: valueById.get("clarity") ?? current.clarity,
+              denoise: {
+                ...current.denoise,
+                luminance: valueById.get("denoise-luminance") ?? current.denoise.luminance,
+                color: valueById.get("denoise-color") ?? current.denoise.color,
+              },
+              grain: {
+                ...current.grain,
+                amount: valueById.get("grain-amount") ?? current.grain.amount,
+              },
+              preset: null,
+            }));
+          }}
+          onAction={async (actionId) => {
+            if (actionId === "apply") {
+              queueSave();
+            }
+          }}
+        />
       </div>
 
       <Handle

components/canvas/nodes/light-adjust-node.tsx

@@ -10,9 +10,13 @@ import type { Id } from "@/convex/_generated/dataModel";
 import { useAuthQuery } from "@/hooks/use-auth-query";
 import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
 import { useCanvasSync } from "@/components/canvas/canvas-sync-context";
-import { SliderRow } from "@/components/canvas/nodes/adjustment-controls";
 import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
 import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
+import {
+  ParameterSlider,
+  type SliderConfig,
+  type SliderValue,
+} from "@/src/components/tool-ui/parameter-slider";
 import {
   cloneAdjustmentData,
   DEFAULT_LIGHT_ADJUST_DATA,
@@ -80,6 +84,93 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
   };
 
   const builtinOptions = useMemo(() => Object.entries(LIGHT_PRESETS), []);
+  const sliderConfigs = useMemo<SliderConfig[]>(
+    () => [
+      {
+        id: "brightness",
+        label: "Brightness",
+        min: -100,
+        max: 100,
+        value: DEFAULT_LIGHT_ADJUST_DATA.brightness,
+      },
+      {
+        id: "contrast",
+        label: "Contrast",
+        min: -100,
+        max: 100,
+        value: DEFAULT_LIGHT_ADJUST_DATA.contrast,
+      },
+      {
+        id: "exposure",
+        label: "Exposure",
+        min: -5,
+        max: 5,
+        step: 0.01,
+        precision: 2,
+        value: DEFAULT_LIGHT_ADJUST_DATA.exposure,
+      },
+      {
+        id: "highlights",
+        label: "Highlights",
+        min: -100,
+        max: 100,
+        value: DEFAULT_LIGHT_ADJUST_DATA.highlights,
+      },
+      {
+        id: "shadows",
+        label: "Shadows",
+        min: -100,
+        max: 100,
+        value: DEFAULT_LIGHT_ADJUST_DATA.shadows,
+      },
+      {
+        id: "whites",
+        label: "Whites",
+        min: -100,
+        max: 100,
+        value: DEFAULT_LIGHT_ADJUST_DATA.whites,
+      },
+      {
+        id: "blacks",
+        label: "Blacks",
+        min: -100,
+        max: 100,
+        value: DEFAULT_LIGHT_ADJUST_DATA.blacks,
+      },
+      {
+        id: "vignette-amount",
+        label: "Vignette",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        precision: 2,
+        value: DEFAULT_LIGHT_ADJUST_DATA.vignette.amount,
+      },
+    ],
+    [],
+  );
+  const sliderValues = useMemo<SliderValue[]>(
+    () => [
+      { id: "brightness", value: localData.brightness },
+      { id: "contrast", value: localData.contrast },
+      { id: "exposure", value: localData.exposure },
+      { id: "highlights", value: localData.highlights },
+      { id: "shadows", value: localData.shadows },
+      { id: "whites", value: localData.whites },
+      { id: "blacks", value: localData.blacks },
+      { id: "vignette-amount", value: localData.vignette.amount },
+    ],
+    [
+      localData.blacks,
+      localData.brightness,
+      localData.contrast,
+      localData.exposure,
+      localData.highlights,
+      localData.shadows,
+      localData.vignette.amount,
+      localData.whites,
+    ],
+  );
 
   const applyPresetValue = (value: string) => {
     if (value === "custom") {
@@ -126,7 +217,7 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
       selected={selected}
       status={data._status}
       statusMessage={data._statusMessage}
-      className="min-w-[240px] border-amber-500/30"
+      className="min-w-[300px] border-amber-500/30"
     >
       <Handle
         type="target"
@@ -177,16 +268,38 @@ export default function LightAdjustNode({ id, data, selected, width }: NodeProps
           currentParams={localData}
         />
 
-        <div className="space-y-2 rounded-md border border-border/80 bg-background/70 p-2">
-          <SliderRow label="Brightness" value={localData.brightness} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, brightness: value, preset: null }))} />
-          <SliderRow label="Contrast" value={localData.contrast} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, contrast: value, preset: null }))} />
-          <SliderRow label="Exposure" value={localData.exposure} min={-5} max={5} step={0.01} onChange={(value) => updateData((current) => ({ ...current, exposure: value, preset: null }))} />
-          <SliderRow label="Highlights" value={localData.highlights} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, highlights: value, preset: null }))} />
-          <SliderRow label="Shadows" value={localData.shadows} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, shadows: value, preset: null }))} />
-          <SliderRow label="Whites" value={localData.whites} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, whites: value, preset: null }))} />
-          <SliderRow label="Blacks" value={localData.blacks} min={-100} max={100} onChange={(value) => updateData((current) => ({ ...current, blacks: value, preset: null }))} />
-          <SliderRow label="Vignette" value={localData.vignette.amount} min={0} max={1} step={0.01} onChange={(value) => updateData((current) => ({ ...current, vignette: { ...current.vignette, amount: value }, preset: null }))} />
-        </div>
+        <ParameterSlider
+          id={`${id}-light-adjust-params`}
+          className="min-w-0 max-w-none"
+          sliders={sliderConfigs}
+          values={sliderValues}
+          fillClassName="bg-amber-500/35 dark:bg-amber-400/35"
+          handleClassName="bg-amber-500 dark:bg-amber-400"
+          trackClassName="bg-amber-500/10 dark:bg-amber-500/15"
+          onChange={(values) => {
+            const valueById = new Map(values.map((entry) => [entry.id, entry.value]));
+            updateData((current) => ({
+              ...current,
+              brightness: valueById.get("brightness") ?? current.brightness,
+              contrast: valueById.get("contrast") ?? current.contrast,
+              exposure: valueById.get("exposure") ?? current.exposure,
+              highlights: valueById.get("highlights") ?? current.highlights,
+              shadows: valueById.get("shadows") ?? current.shadows,
+              whites: valueById.get("whites") ?? current.whites,
+              blacks: valueById.get("blacks") ?? current.blacks,
+              vignette: {
+                ...current.vignette,
+                amount: valueById.get("vignette-amount") ?? current.vignette.amount,
+              },
+              preset: null,
+            }));
+          }}
+          onAction={async (actionId) => {
+            if (actionId === "apply") {
+              queueSave();
+            }
+          }}
+        />
       </div>
 
       <Handle