@hyperframes/studio 0.7.37 → 0.7.39

package/src/components/editor/propertyPanelColorGradingControls.tsx

@@ -1,19 +1,20 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import {
   HF_COLOR_GRADING_PRESETS,
   normalizeHfColorGrading,
   type HfColorGradingAdjustKey,
+  type HfColorGradingDetailKey,
+  type HfColorGradingEffectKey,
   type NormalizedHfColorGrading,
 } from "@hyperframes/core/color-grading";
-import { Minus, Plus, RotateCcw } from "../../icons/SystemIcons";
+import { ChevronDown, ChevronRight, Plus, X } from "../../icons/SystemIcons";
 import { LUT_EXT } from "../../utils/mediaTypes";
 import { LABEL } from "./propertyPanelHelpers";
+import { ColorGradingSliderControl } from "./propertyPanelColorGradingSlider";
 
 const LUT_UPLOAD_DIR = "assets/luts";
-const SLIDER_THUMB_SIZE = 10;
-const SLIDER_THUMB_RADIUS = SLIDER_THUMB_SIZE / 2;
 
-const SLIDERS: Array<{
+const ADJUST_SLIDERS: Array<{
   key: HfColorGradingAdjustKey;
   label: string;
   min: number;
@@ -34,254 +35,133 @@ const SLIDERS: Array<{
     suffix: "%",
   },
   { key: "shadows", label: "Shadows", min: -100, max: 100, step: 1, scale: 100, suffix: "%" },
-  { key: "whites", label: "Whites", min: -100, max: 100, step: 1, scale: 100, suffix: "%" },
-  { key: "blacks", label: "Blacks", min: -100, max: 100, step: 1, scale: 100, suffix: "%" },
+  {
+    key: "whites",
+    label: "White Point",
+    min: -100,
+    max: 100,
+    step: 1,
+    scale: 100,
+    suffix: "%",
+  },
+  {
+    key: "blacks",
+    label: "Black Point",
+    min: -100,
+    max: 100,
+    step: 1,
+    scale: 100,
+    suffix: "%",
+  },
   { key: "temperature", label: "Warmth", min: -100, max: 100, step: 1, scale: 100, suffix: "%" },
   { key: "tint", label: "Tint", min: -100, max: 100, step: 1, scale: 100, suffix: "%" },
+  { key: "vibrance", label: "Vibrance", min: -100, max: 100, step: 1, scale: 100, suffix: "%" },
   { key: "saturation", label: "Saturation", min: -100, max: 100, step: 1, scale: 100, suffix: "%" },
 ];
 
-function clampNumber(value: number, min: number, max: number): number {
-  if (!Number.isFinite(value)) return min;
-  return Math.min(max, Math.max(min, value));
-}
-
-function formatNumericInput(value: number, scale: number): string {
-  const scaled = value / scale;
-  return scale === 100 ? scaled.toFixed(2) : String(Math.round(scaled));
-}
-
-function parseNumericInput(value: string, scale: number): number | null {
-  const parsed = Number(value);
-  if (!Number.isFinite(parsed)) return null;
-  return parsed * scale;
-}
-
-function tickPercent(value: number, min: number, max: number): number {
-  if (max <= min) return 0;
-  return ((value - min) / (max - min)) * 100;
-}
-
-function ColorGradingSliderControl({
-  label,
-  value,
-  min,
-  max,
-  step,
-  neutral = min,
-  scale = 1,
-  suffix = "",
-  displayValue,
-  disabled,
-  onCommit,
-  onReset,
-}: {
+const DETAIL_SLIDERS: Array<{
+  key: HfColorGradingDetailKey;
   label: string;
-  value: number;
   min: number;
   max: number;
   step: number;
-  neutral?: number;
-  scale?: number;
-  suffix?: string;
-  displayValue: string;
-  disabled?: boolean;
-  onCommit: (nextValue: number) => void;
-  onReset?: () => void;
-}) {
-  const [draftState, setDraftState] = useState<{ value: number; source: number } | null>(null);
-  const [inputDraft, setInputDraft] = useState<{ value: string; source: number } | null>(null);
-  const commitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const valueRef = useRef(value);
-  valueRef.current = value;
-
-  useEffect(
-    () => () => {
-      if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
-    },
-    [],
-  );
-
-  const clampDraft = useCallback(
-    (nextValue: number) => clampNumber(nextValue, min, max),
-    [max, min],
-  );
-
-  const setLocalDraft = useCallback(
-    (nextValue: number) => {
-      const clamped = clampDraft(nextValue);
-      const source = valueRef.current;
-      setDraftState({ value: clamped, source });
-      setInputDraft({ value: formatNumericInput(clamped, scale), source });
-      return clamped;
-    },
-    [clampDraft, scale],
-  );
-
-  const commitDraft = useCallback(
-    (nextValue: number) => {
-      const clamped = setLocalDraft(nextValue);
-      if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
-      if (clamped !== valueRef.current) onCommit(clamped);
-    },
-    [onCommit, setLocalDraft],
-  );
-
-  const scheduleCommit = useCallback(
-    (nextValue: number) => {
-      const clamped = setLocalDraft(nextValue);
-      if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
-      commitTimerRef.current = setTimeout(() => {
-        if (clamped !== valueRef.current) onCommit(clamped);
-      }, 40);
-    },
-    [onCommit, setLocalDraft],
-  );
-
-  const draft = draftState?.source === value ? draftState.value : value;
-  const inputValue =
-    inputDraft?.source === value ? inputDraft.value : formatNumericInput(draft, scale);
-
-  const commitInputDraft = useCallback(() => {
-    const parsed = parseNumericInput(inputValue, scale);
-    if (parsed === null) {
-      setInputDraft(null);
-      return;
-    }
-    commitDraft(parsed);
-  }, [commitDraft, inputValue, scale]);
+  scale: number;
+  suffix: string;
+  defaultValue?: number;
+}> = [
+  { key: "vignette", label: "Vignette", min: 0, max: 100, step: 1, scale: 100, suffix: "%" },
+  {
+    key: "vignetteMidpoint",
+    label: "Midpoint",
+    min: 0,
+    max: 100,
+    step: 1,
+    scale: 100,
+    suffix: "%",
+    defaultValue: 50,
+  },
+  {
+    key: "vignetteRoundness",
+    label: "Roundness",
+    min: -100,
+    max: 100,
+    step: 1,
+    scale: 100,
+    suffix: "%",
+  },
+  {
+    key: "vignetteFeather",
+    label: "Feather",
+    min: 0,
+    max: 100,
+    step: 1,
+    scale: 100,
+    suffix: "%",
+    defaultValue: 65,
+  },
+  { key: "grain", label: "Grain", min: 0, max: 100, step: 1, scale: 100, suffix: "%" },
+  {
+    key: "grainSize",
+    label: "Grain Size",
+    min: 0,
+    max: 100,
+    step: 1,
+    scale: 100,
+    suffix: "%",
+    defaultValue: 25,
+  },
+  {
+    key: "grainRoughness",
+    label: "Roughness",
+    min: 0,
+    max: 100,
+    step: 1,
+    scale: 100,
+    suffix: "%",
+    defaultValue: 50,
+  },
+];
 
-  const nudge = useCallback(
-    (direction: -1 | 1) => {
-      commitDraft(draft + step * direction);
-    },
-    [commitDraft, draft, step],
-  );
+type DetailSlider = (typeof DETAIL_SLIDERS)[number];
+type SliderSettings = {
+  active?: boolean;
+  label: string;
+  onClick: () => void;
+};
 
-  const range = max - min;
-  const valuePercent = range === 0 ? 0 : ((draft - min) / range) * 100;
-  const neutralPercent = range === 0 ? 0 : ((neutral - min) / range) * 100;
-  const fillLeft = Math.min(valuePercent, neutralPercent);
-  const fillWidth = Math.abs(valuePercent - neutralPercent);
-  const ticks = Array.from(new Set([min, neutral, max])).sort((a, b) => a - b);
+const EFFECT_SLIDERS: Array<{
+  key: HfColorGradingEffectKey;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  scale: number;
+  suffix: string;
+}> = [
+  { key: "blur", label: "Blur", min: 0, max: 100, step: 1, scale: 100, suffix: "%" },
+  { key: "pixelate", label: "Pixelate", min: 0, max: 100, step: 1, scale: 100, suffix: "%" },
+];
 
-  return (
-    <div className="grid min-w-0 gap-1.5 rounded-md bg-panel-input/30 p-2">
-      <div className="flex min-w-0 items-center gap-1.5">
-        <span className={`${LABEL} min-w-0 flex-1 truncate`}>{label}</span>
-        {onReset && (
-          <button
-            type="button"
-            disabled={disabled}
-            aria-label={`Reset ${label}`}
-            onClick={(event) => {
-              event.stopPropagation();
-              onReset();
-            }}
-            className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded text-panel-text-5 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
-            title={`Reset ${label}`}
-          >
-            <RotateCcw size={11} />
-          </button>
-        )}
-      </div>
+const AMOUNT_DETAIL_SLIDERS = DETAIL_SLIDERS.filter(
+  (slider) => slider.key === "vignette" || slider.key === "grain",
+);
+const VIGNETTE_TUNE_SLIDERS = DETAIL_SLIDERS.filter(
+  (slider) =>
+    slider.key === "vignetteMidpoint" ||
+    slider.key === "vignetteRoundness" ||
+    slider.key === "vignetteFeather",
+);
+const GRAIN_TUNE_SLIDERS = DETAIL_SLIDERS.filter(
+  (slider) => slider.key === "grainSize" || slider.key === "grainRoughness",
+);
 
-      <div className="relative h-7 min-w-0">
-        <div
-          data-color-grading-slider-track="true"
-          className="pointer-events-none absolute inset-y-0 z-0"
-          style={{ left: SLIDER_THUMB_RADIUS, right: SLIDER_THUMB_RADIUS }}
-        >
-          {ticks.map((tick) => (
-            <div
-              key={tick}
-              data-color-grading-slider-tick="true"
-              className="absolute top-1/2 h-3 w-px -translate-y-1/2 bg-panel-text-3"
-              style={{ left: `${tickPercent(tick, min, max)}%` }}
-              title={String(tick / scale)}
-            />
-          ))}
-          <div className="absolute left-0 right-0 top-1/2 z-10 h-0.5 -translate-y-1/2 rounded-full bg-panel-border" />
-          <div
-            className="absolute top-1/2 z-20 h-0.5 -translate-y-1/2 rounded-full bg-studio-accent"
-            style={{ left: `${fillLeft}%`, width: `${fillWidth}%` }}
-          />
-        </div>
-        <input
-          type="range"
-          min={min}
-          max={max}
-          step={step}
-          value={draft}
-          disabled={disabled}
-          aria-label={label}
-          onChange={(event) => scheduleCommit(Number(event.currentTarget.value))}
-          onMouseUp={() => commitDraft(draft)}
-          onTouchEnd={() => commitDraft(draft)}
-          onBlur={() => commitDraft(draft)}
-          className="hf-color-grading-range absolute left-0 right-0 top-1/2 z-30 min-w-0 w-full -translate-y-1/2"
-          title={displayValue}
-        />
-      </div>
+function normalizedDefaultValue(slider: { defaultValue?: number; scale: number }): number {
+  return (slider.defaultValue ?? 0) / slider.scale;
+}
 
-      <div className="flex min-w-0 items-center justify-end gap-1.5">
-        <div className="flex flex-shrink-0 items-center rounded-md bg-panel-input px-1.5 py-1">
-          <input
-            type="number"
-            value={inputValue}
-            min={min / scale}
-            max={max / scale}
-            step={step / scale}
-            disabled={disabled}
-            onChange={(event) =>
-              setInputDraft({ value: event.currentTarget.value, source: valueRef.current })
-            }
-            onBlur={commitInputDraft}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                event.currentTarget.blur();
-                return;
-              }
-              if (event.key === "ArrowUp") {
-                event.preventDefault();
-                nudge(1);
-                return;
-              }
-              if (event.key === "ArrowDown") {
-                event.preventDefault();
-                nudge(-1);
-              }
-            }}
-            className="hf-color-grading-number h-5 w-[38px] bg-transparent text-right text-[11px] font-medium tabular-nums text-panel-text-1 outline-none disabled:cursor-not-allowed"
-            title={displayValue}
-          />
-          {suffix && <span className="ml-0.5 text-[10px] text-panel-text-5">{suffix}</span>}
-        </div>
-        <div className="flex flex-shrink-0 overflow-hidden rounded-md bg-panel-input">
-          <button
-            type="button"
-            disabled={disabled}
-            aria-label={`Decrease ${label}`}
-            onClick={() => nudge(-1)}
-            className="flex h-7 w-5 items-center justify-center text-panel-text-4 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
-            title={`Decrease ${label}`}
-          >
-            <Minus size={11} />
-          </button>
-          <button
-            type="button"
-            disabled={disabled}
-            aria-label={`Increase ${label}`}
-            onClick={() => nudge(1)}
-            className="flex h-7 w-5 items-center justify-center border-l border-panel-border text-panel-text-4 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
-            title={`Increase ${label}`}
-          >
-            <Plus size={11} />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
+function visibleIntensity(grading: NormalizedHfColorGrading): number {
+  // Earlier drafts could persist 0% strength; the next manual edit should revive visible grading.
+  return grading.intensity === 0 ? 1 : grading.intensity;
 }
 
 export function ColorGradingControls({
@@ -296,21 +176,37 @@ export function ColorGradingControls({
   onCommitColorGrading: (nextGrading: NormalizedHfColorGrading) => void;
 }) {
   const lutInputRef = useRef<HTMLInputElement>(null);
+  const [lutOpen, setLutOpen] = useState(false);
+  const [detailSettings, setDetailSettings] = useState<"vignette" | "grain" | null>(null);
   const lutAssets = useMemo(
     () => assets.filter((asset) => LUT_EXT.test(asset)).sort((a, b) => a.localeCompare(b)),
     [assets],
   );
   const selectedLut = grading.lut?.src ?? "";
   const selectedProjectLut = selectedLut ? (selectedLut.split("/").pop() ?? selectedLut) : null;
+  const detailSettingsSliders =
+    detailSettings === "vignette" ? VIGNETTE_TUNE_SLIDERS : GRAIN_TUNE_SLIDERS;
+  const vignetteSettingsActive = VIGNETTE_TUNE_SLIDERS.some(
+    (slider) => Math.abs(grading.details[slider.key] - normalizedDefaultValue(slider)) > 0.0001,
+  );
+  const grainSettingsActive = GRAIN_TUNE_SLIDERS.some(
+    (slider) => Math.abs(grading.details[slider.key] - normalizedDefaultValue(slider)) > 0.0001,
+  );
 
   const applyPreset = (preset: string) => {
-    const next = normalizeHfColorGrading({ preset, intensity: 1 });
+    const next = normalizeHfColorGrading({ preset, intensity: 1, lut: grading.lut });
     if (next) onCommitColorGrading(next);
   };
+  const updateFilterIntensity = (value: number) => {
+    onCommitColorGrading({
+      ...grading,
+      intensity: value / 100,
+    });
+  };
   const applyLut = (src: string | null, intensity = 1) => {
     onCommitColorGrading({
       ...grading,
-      intensity: 1,
+      intensity: visibleIntensity(grading),
       lut: src ? { src, intensity } : null,
     });
   };
@@ -324,9 +220,48 @@ export function ColorGradingControls({
     const firstLut = uploaded.find((asset) => LUT_EXT.test(asset));
     if (firstLut) applyLut(firstLut, 1);
   };
+  const commitDetailSlider = (slider: DetailSlider, next: number) => {
+    onCommitColorGrading({
+      ...grading,
+      intensity: visibleIntensity(grading),
+      details: {
+        ...grading.details,
+        [slider.key]: next / slider.scale,
+      },
+    });
+  };
+  const resetDetailSlider = (slider: DetailSlider) => {
+    onCommitColorGrading({
+      ...grading,
+      intensity: visibleIntensity(grading),
+      details: {
+        ...grading.details,
+        [slider.key]: normalizedDefaultValue(slider),
+      },
+    });
+  };
+  const renderDetailSlider = (slider: DetailSlider, settings?: SliderSettings) => {
+    const value = Math.round(grading.details[slider.key] * slider.scale);
+    return (
+      <ColorGradingSliderControl
+        key={slider.key}
+        label={slider.label}
+        value={value}
+        min={slider.min}
+        max={slider.max}
+        step={slider.step}
+        neutral={slider.defaultValue ?? 0}
+        suffix={slider.suffix}
+        displayValue={`${value}%`}
+        settings={settings}
+        onCommit={(next) => commitDetailSlider(slider, next)}
+        onReset={() => resetDetailSlider(slider)}
+      />
+    );
+  };
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       <label className="grid min-w-0 gap-1.5">
         <span className={LABEL}>Preset</span>
         <select
@@ -341,97 +276,125 @@ export function ColorGradingControls({
           ))}
         </select>
       </label>
+      <ColorGradingSliderControl
+        label="Preset strength"
+        value={Math.round(grading.intensity * 100)}
+        min={0}
+        max={100}
+        step={1}
+        neutral={0}
+        suffix="%"
+        displayValue={`${Math.round(grading.intensity * 100)}%`}
+        onCommit={updateFilterIntensity}
+        onReset={() => updateFilterIntensity(100)}
+      />
 
-      <div className="grid min-w-0 gap-1.5">
-        <span className={LABEL}>LUT Filter</span>
-        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_28px] gap-2">
-          <select
-            value={selectedLut}
-            onChange={(event) => {
-              const nextSrc = event.target.value;
-              applyLut(
-                nextSrc || null,
-                nextSrc && grading.lut?.src === nextSrc ? grading.lut.intensity : 1,
-              );
-            }}
-            className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-[11px] font-medium text-panel-text-1 outline-none"
-            title="Uploaded .cube LUT filter"
-          >
-            <option value="">None</option>
-            {lutAssets.length > 0 && (
-              <optgroup label="Uploaded LUTs">
-                {lutAssets.map((asset) => (
-                  <option key={asset} value={asset}>
-                    {asset.split("/").pop() ?? asset}
-                  </option>
-                ))}
-              </optgroup>
-            )}
-          </select>
-          <button
-            type="button"
-            disabled={!onImportAssets}
-            onClick={(event) => {
-              event.stopPropagation();
-              lutInputRef.current?.click();
-            }}
-            className="flex h-8 w-8 items-center justify-center rounded-md bg-panel-input text-panel-text-4 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
-            title="Import .cube LUT"
-            aria-label="Import .cube LUT"
-          >
-            <Plus size={13} />
-          </button>
-          <input
-            ref={lutInputRef}
-            type="file"
-            accept=".cube"
-            multiple
-            className="hidden"
-            onChange={(event) => {
-              void importLuts(event.currentTarget.files);
-              event.currentTarget.value = "";
-            }}
-          />
-        </div>
-        {grading.lut && (
-          <div className="grid gap-2">
-            {selectedProjectLut && (
-              <div className="flex min-w-0 items-start gap-2 text-[10px] leading-4 text-panel-text-3">
-                <span className="mt-[5px] h-1.5 w-1.5 flex-shrink-0 rounded-full bg-studio-accent" />
-                <span className="min-w-0">
-                  <span className="font-medium text-panel-text-2">Uploaded LUT</span>
-                  {` · ${selectedProjectLut}`}
-                </span>
+      <div className="min-w-0 rounded-md border border-panel-border/70 bg-panel-input/15">
+        <button
+          type="button"
+          className="flex h-8 w-full min-w-0 items-center gap-1.5 px-2 text-left text-[11px] font-medium text-panel-text-3 transition-colors hover:bg-panel-hover/60 hover:text-panel-text-1"
+          onClick={() => setLutOpen((value) => !value)}
+          aria-expanded={lutOpen}
+        >
+          {lutOpen ? (
+            <ChevronDown size={11} className="flex-shrink-0 text-panel-text-5" />
+          ) : (
+            <ChevronRight size={11} className="flex-shrink-0 text-panel-text-5" />
+          )}
+          <span className="min-w-0 flex-1 truncate">Custom LUT</span>
+          {grading.lut && (
+            <span className="h-1.5 w-1.5 flex-shrink-0 rounded-full bg-studio-accent" />
+          )}
+        </button>
+        {lutOpen && (
+          <div className="grid gap-1.5 border-t border-panel-border/60 p-1.5">
+            <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_28px] gap-2">
+              <select
+                value={selectedLut}
+                onChange={(event) => {
+                  const nextSrc = event.target.value;
+                  applyLut(
+                    nextSrc || null,
+                    nextSrc && grading.lut?.src === nextSrc ? grading.lut.intensity : 1,
+                  );
+                }}
+                className="w-full min-w-0 rounded-md bg-panel-input px-3 py-2 text-[11px] font-medium text-panel-text-1 outline-none"
+                title="Uploaded .cube LUT"
+              >
+                <option value="">None</option>
+                {lutAssets.length > 0 && (
+                  <optgroup label="Uploaded LUTs">
+                    {lutAssets.map((asset) => (
+                      <option key={asset} value={asset}>
+                        {asset.split("/").pop() ?? asset}
+                      </option>
+                    ))}
+                  </optgroup>
+                )}
+              </select>
+              <button
+                type="button"
+                disabled={!onImportAssets}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  lutInputRef.current?.click();
+                }}
+                className="flex h-8 w-8 items-center justify-center rounded-md bg-panel-input text-panel-text-4 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
+                title="Import .cube LUT"
+                aria-label="Import .cube LUT"
+              >
+                <Plus size={13} />
+              </button>
+              <input
+                ref={lutInputRef}
+                type="file"
+                accept=".cube"
+                multiple
+                className="hidden"
+                onChange={(event) => {
+                  void importLuts(event.currentTarget.files);
+                  event.currentTarget.value = "";
+                }}
+              />
+            </div>
+            {grading.lut && (
+              <div className="grid gap-2">
+                {selectedProjectLut && (
+                  <div className="flex min-w-0 items-start gap-2 text-[10px] leading-4 text-panel-text-3">
+                    <span className="mt-[5px] h-1.5 w-1.5 flex-shrink-0 rounded-full bg-studio-accent" />
+                    <span className="min-w-0 flex-1 truncate" title={selectedProjectLut}>
+                      <span className="font-medium text-panel-text-2">Uploaded LUT</span>
+                      {` · ${selectedProjectLut}`}
+                    </span>
+                  </div>
+                )}
+                <ColorGradingSliderControl
+                  label="LUT Strength"
+                  value={Math.round((grading.lut.intensity ?? 1) * 100)}
+                  min={0}
+                  max={100}
+                  step={1}
+                  neutral={0}
+                  suffix="%"
+                  displayValue={`${Math.round((grading.lut.intensity ?? 1) * 100)}%`}
+                  onCommit={updateLutIntensity}
+                  onReset={() => updateLutIntensity(100)}
+                />
               </div>
             )}
-            <ColorGradingSliderControl
-              label="LUT Strength"
-              value={Math.round((grading.lut.intensity ?? 1) * 100)}
-              min={0}
-              max={100}
-              step={1}
-              neutral={0}
-              suffix="%"
-              displayValue={`${Math.round((grading.lut.intensity ?? 1) * 100)}%`}
-              onCommit={updateLutIntensity}
-              onReset={() => updateLutIntensity(100)}
-            />
           </div>
         )}
       </div>
 
-      <div className="grid min-w-0 grid-cols-2 gap-3">
-        {SLIDERS.map((slider, index) => {
-          const value = grading.adjust[slider.key] * slider.scale;
-          const isExposure = slider.key === "exposure";
-          return (
-            <div
-              key={slider.key}
-              className={
-                SLIDERS.length % 2 === 1 && index === SLIDERS.length - 1 ? "col-span-2" : ""
-              }
-            >
+      <div className="grid min-w-0 gap-1.5">
+        <span className={LABEL}>Adjust</span>
+        <div className="grid min-w-0 grid-cols-2 gap-1.5">
+          {ADJUST_SLIDERS.map((slider) => {
+            const value = grading.adjust[slider.key] * slider.scale;
+            const isExposure = slider.key === "exposure";
+            return (
               <ColorGradingSliderControl
+                key={slider.key}
                 label={slider.label}
                 value={Math.round(value)}
                 min={slider.min}
@@ -448,7 +411,7 @@ export function ColorGradingControls({
                 onCommit={(next) => {
                   onCommitColorGrading({
                     ...grading,
-                    intensity: 1,
+                    intensity: visibleIntensity(grading),
                     adjust: {
                       ...grading.adjust,
                       [slider.key]: next / slider.scale,
@@ -458,7 +421,7 @@ export function ColorGradingControls({
                 onReset={() => {
                   onCommitColorGrading({
                     ...grading,
-                    intensity: 1,
+                    intensity: visibleIntensity(grading),
                     adjust: {
                       ...grading.adjust,
                       [slider.key]: 0,
@@ -466,9 +429,88 @@ export function ColorGradingControls({
                   });
                 }}
               />
+            );
+          })}
+        </div>
+      </div>
+
+      <div className="grid min-w-0 gap-1.5">
+        <span className={LABEL}>Finishing</span>
+        <div className="grid min-w-0 grid-cols-2 gap-1.5">
+          {AMOUNT_DETAIL_SLIDERS.map((slider) =>
+            renderDetailSlider(slider, {
+              active: slider.key === "vignette" ? vignetteSettingsActive : grainSettingsActive,
+              label: `${slider.label} settings`,
+              onClick: () =>
+                setDetailSettings((current) =>
+                  current === slider.key ? null : (slider.key as "vignette" | "grain"),
+                ),
+            }),
+          )}
+        </div>
+        {detailSettings && (
+          <div className="grid min-w-0 gap-1.5 rounded-md border border-panel-border bg-panel-input/40 p-1.5 shadow-xl shadow-black/20">
+            <div className="flex min-w-0 items-center gap-2 px-0.5">
+              <span className={`${LABEL} min-w-0 flex-1 truncate`}>
+                {detailSettings === "vignette" ? "Vignette settings" : "Grain settings"}
+              </span>
+              <button
+                type="button"
+                aria-label="Close settings"
+                title="Close settings"
+                onClick={() => setDetailSettings(null)}
+                className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded text-panel-text-5 transition-colors hover:bg-panel-hover hover:text-panel-text-1"
+              >
+                <X size={11} />
+              </button>
+            </div>
+            <div className="grid min-w-0 grid-cols-2 gap-1.5">
+              {detailSettingsSliders.map((slider) => renderDetailSlider(slider))}
             </div>
-          );
-        })}
+          </div>
+        )}
+      </div>
+
+      <div className="grid min-w-0 gap-1.5">
+        <span className={LABEL}>Effects</span>
+        <div className="grid min-w-0 grid-cols-2 gap-1.5">
+          {EFFECT_SLIDERS.map((slider) => {
+            const value = grading.effects[slider.key] * slider.scale;
+            return (
+              <ColorGradingSliderControl
+                key={slider.key}
+                label={slider.label}
+                value={Math.round(value)}
+                min={slider.min}
+                max={slider.max}
+                step={slider.step}
+                neutral={0}
+                suffix={slider.suffix}
+                displayValue={`${Math.round(value)}%`}
+                onCommit={(next) => {
+                  onCommitColorGrading({
+                    ...grading,
+                    intensity: visibleIntensity(grading),
+                    effects: {
+                      ...grading.effects,
+                      [slider.key]: next / slider.scale,
+                    },
+                  });
+                }}
+                onReset={() => {
+                  onCommitColorGrading({
+                    ...grading,
+                    intensity: visibleIntensity(grading),
+                    effects: {
+                      ...grading.effects,
+                      [slider.key]: 0,
+                    },
+                  });
+                }}
+              />
+            );
+          })}
+        </div>
       </div>
     </div>
   );