@hyperframes/studio 0.7.71 → 0.7.73

package/src/components/editor/propertyPanelFlatColorGradingSection.tsx

@@ -1,153 +1,40 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import {
-  HF_COLOR_GRADING_PRESETS,
-  isHfColorGradingActive,
+  HF_COLOR_GRADING_GRADE_PRESETS,
   normalizeHfColorGrading,
+  serializeHfColorGrading,
   type HfColorGradingAdjustKey,
   type HfColorGradingDetailKey,
-  type HfColorGradingEffectKey,
   type NormalizedHfColorGrading,
 } from "@hyperframes/core/color-grading";
-import { Compare, Plus, RotateCcw, Settings } from "../../icons/SystemIcons";
+import { Plus, Settings } from "../../icons/SystemIcons";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { LUT_EXT } from "../../utils/mediaTypes";
-import { FlatSelectRow, FlatSlider } from "./propertyPanelFlatPrimitives";
-import { resolveValueTier } from "./propertyPanelValueTier";
-import type { ColorGradingControllerState, MediaMetadata } from "./useColorGradingController";
-
-const STATUS_DOT_CLASS: Record<ColorGradingControllerState["runtimeStatus"]["state"], string> = {
-  active: "bg-emerald-400",
-  pending: "bg-amber-300",
-  unavailable: "bg-red-400",
-  missing: "bg-panel-text-5",
-  inactive: "bg-panel-text-5",
-};
-
-export function FlatColorGradingAccessory({
-  state,
-}: {
-  state: Pick<
-    ColorGradingControllerState,
-    "grading" | "compareEnabled" | "runtimeStatus" | "commitCompare" | "resetGrading"
-  >;
-}) {
-  const track = useTrackDesignInput();
-  const { grading, compareEnabled, runtimeStatus, commitCompare, resetGrading } = state;
-  const gradingActive = isHfColorGradingActive(grading);
-  // Tracks the active hold's cleanup so it can be torn down on unmount too —
-  // without this, switching selection away mid-hold (unmounting this
-  // accessory) leaves the pointerup/pointercancel/blur listeners registered
-  // on `window` forever, each holding a closure over the old commitCompare.
-  const releaseRef = useRef<(() => void) | null>(null);
-  useEffect(
-    () => () => {
-      releaseRef.current?.();
-      releaseRef.current = null;
-    },
-    [],
-  );
-
-  return (
-    <span className="flex items-center gap-2.5">
-      <button
-        type="button"
-        aria-pressed={compareEnabled}
-        aria-label="Hold to show original"
-        disabled={!gradingActive}
-        onPointerDown={(e) => {
-          if (!gradingActive) return;
-          e.preventDefault();
-          e.stopPropagation();
-          track("button", "Compare original");
-          commitCompare(true);
-          const release = () => {
-            commitCompare(false);
-            window.removeEventListener("pointerup", release);
-            window.removeEventListener("pointercancel", release);
-            window.removeEventListener("blur", release);
-            releaseRef.current = null;
-          };
-          releaseRef.current = release;
-          window.addEventListener("pointerup", release);
-          window.addEventListener("pointercancel", release);
-          window.addEventListener("blur", release);
-        }}
-        onBlur={() => {
-          if (compareEnabled) commitCompare(false);
-        }}
-        onKeyDown={(e) => {
-          if (!gradingActive || (e.key !== " " && e.key !== "Enter")) return;
-          e.preventDefault();
-          if (!compareEnabled) {
-            track("button", "Compare original");
-            commitCompare(true);
-          }
-        }}
-        onKeyUp={(e) => {
-          if (!gradingActive || (e.key !== " " && e.key !== "Enter")) return;
-          e.preventDefault();
-          commitCompare(false);
-        }}
-        title="Hold to show original"
-        className="flex-shrink-0 text-panel-text-3 hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
-      >
-        <Compare size={12} />
-      </button>
-      <span className="flex min-w-0 items-center gap-1" title={runtimeStatus.message}>
-        <span
-          data-flat-grade-status-dot="true"
-          title={runtimeStatus.message}
-          className={`h-[5px] w-[5px] flex-shrink-0 rounded-full ${STATUS_DOT_CLASS[runtimeStatus.state]}`}
-        />
-        <span
-          data-flat-grade-status-message="true"
-          className="max-w-[84px] truncate text-[9px] text-panel-text-4"
-        >
-          {runtimeStatus.message}
-        </span>
-      </span>
-      <button
-        type="button"
-        data-flat-grade-reset="true"
-        title="Reset color grading"
-        onClick={(e) => {
-          e.stopPropagation();
-          track("button", "Reset color grading");
-          resetGrading();
-        }}
-        className="flex-shrink-0 text-panel-text-3 hover:text-panel-text-1"
-      >
-        <RotateCcw size={12} />
-      </button>
-    </span>
-  );
-}
-
-const PRESET_OPTIONS = HF_COLOR_GRADING_PRESETS.map((p) => ({ value: p.id, label: p.label }));
-
-const ADJUST_SLIDERS: Array<{
-  key: HfColorGradingAdjustKey;
-  label: string;
-  min: number;
-  max: number;
-  step: number;
-}> = [
-  { key: "exposure", label: "Exposure", min: -200, max: 200, step: 5 },
-  { key: "contrast", label: "Contrast", min: -100, max: 100, step: 1 },
-  { key: "highlights", label: "Highlights", min: -100, max: 100, step: 1 },
-  { key: "shadows", label: "Shadows", min: -100, max: 100, step: 1 },
-  { key: "whites", label: "White Point", min: -100, max: 100, step: 1 },
-  { key: "blacks", label: "Black Point", min: -100, max: 100, step: 1 },
-  { key: "temperature", label: "Warmth", min: -100, max: 100, step: 1 },
-  { key: "tint", label: "Tint", min: -100, max: 100, step: 1 },
-  { key: "vibrance", label: "Vibrance", min: -100, max: 100, step: 1 },
-  { key: "saturation", label: "Saturation", min: -100, max: 100, step: 1 },
-];
+import { FLAT_PREVIEW_GRID, FlatSlider } from "./propertyPanelFlatPrimitives";
+import type {
+  ColorGradingControllerState,
+  ColorGradingPresetPreviews,
+  ColorGradingPreviewOptions,
+  MediaMetadata,
+} from "./useColorGradingController";
+import { presetPreviewHandlers } from "./propertyPanelPresetPreview";
+import { ColorCurves } from "./propertyPanelColorCurves";
+import {
+  COLOR_GRADING_ADJUST_SLIDERS,
+  COLOR_GRADING_DETAIL_SLIDERS,
+  colorGradingWithAdjust,
+  colorGradingWithDetail,
+  createColorGradingActions,
+  GRAIN_TUNE_SLIDERS,
+  normalizedColorGradingDefault,
+  VIGNETTE_TUNE_SLIDERS,
+  visibleColorGradingIntensity,
+} from "./propertyPanelColorGradingControls";
+import { PropertyPanelColorScopes } from "./propertyPanelColorScopes";
+import { PropertyPanelColorSecondary } from "./propertyPanelColorSecondary";
+import { ColorWheels } from "./propertyPanelColorWheels";
 
-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 { FlatColorGradingAccessory } from "./propertyPanelFlatColorGradingAccessory";
 
 function formatAdjustValue(key: HfColorGradingAdjustKey, rawPercent: number): string {
   if (key === "exposure") {
@@ -157,35 +44,17 @@ function formatAdjustValue(key: HfColorGradingAdjustKey, rawPercent: number): st
   return `${Math.round(rawPercent)}%`;
 }
 
-const DETAIL_SLIDERS: Array<{
-  key: HfColorGradingDetailKey;
-  label: string;
-  defaultValue: number;
-}> = [
-  { key: "vignette", label: "Vignette", defaultValue: 0 },
-  { key: "vignetteMidpoint", label: "Midpoint", defaultValue: 0.5 },
-  { key: "vignetteRoundness", label: "Roundness", defaultValue: 0 },
-  { key: "vignetteFeather", label: "Feather", defaultValue: 0.65 },
-  { key: "grain", label: "Grain", defaultValue: 0 },
-  { key: "grainSize", label: "Grain Size", defaultValue: 0.25 },
-  { key: "grainRoughness", label: "Roughness", defaultValue: 0.5 },
-];
 const detailByKey = (key: HfColorGradingDetailKey) => {
-  const spec = DETAIL_SLIDERS.find((d) => d.key === key);
+  const spec = COLOR_GRADING_DETAIL_SLIDERS.find((candidate) => candidate.key === key);
   if (!spec) throw new Error(`Unknown color grading detail key: ${key}`);
   return spec;
 };
-const VIGNETTE_TUNE_KEYS: HfColorGradingDetailKey[] = [
-  "vignetteMidpoint",
-  "vignetteRoundness",
-  "vignetteFeather",
-];
-const GRAIN_TUNE_KEYS: HfColorGradingDetailKey[] = ["grainSize", "grainRoughness"];
 
-const EFFECT_SLIDERS: Array<{ key: HfColorGradingEffectKey; label: string }> = [
-  { key: "blur", label: "Blur" },
-  { key: "pixelate", label: "Pixelate" },
-];
+function resolveColorGrading(grading: Parameters<typeof normalizeHfColorGrading>[0]) {
+  const resolved = normalizeHfColorGrading(grading);
+  if (!resolved) throw new Error("Missing resolved color grading");
+  return resolved;
+}
 
 function HdrBanner({ metadata }: { metadata: MediaMetadata | null }) {
   if (metadata?.color.dynamicRange !== "hdr") return null;
@@ -231,23 +100,34 @@ export function FlatColorGradingSection({
   assets,
   onImportAssets,
   onCommitColorGrading,
+  onPreviewColorGrading,
   applyScope,
   applyBusy,
   onSetApplyScope,
   onApplyToScope,
   onApplyScopeAvailable,
   mediaMetadata,
+  presetPreviews,
+  onRequestPresetPreviews,
+  captureGradedFrame,
 }: {
   grading: NormalizedHfColorGrading;
   assets: string[];
   onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
   onCommitColorGrading: (next: NormalizedHfColorGrading) => void;
+  onPreviewColorGrading: (
+    next: NormalizedHfColorGrading | null,
+    options?: ColorGradingPreviewOptions,
+  ) => void;
   applyScope: "source-file" | "project";
   applyBusy: boolean;
   onSetApplyScope: (scope: "source-file" | "project") => void;
   onApplyToScope: () => void;
   onApplyScopeAvailable: boolean;
   mediaMetadata: MediaMetadata | null;
+  presetPreviews: ColorGradingPresetPreviews;
+  onRequestPresetPreviews: () => void;
+  captureGradedFrame: ColorGradingControllerState["captureGradedFrame"];
 }) {
   const track = useTrackDesignInput();
   const lutInputRef = useRef<HTMLInputElement>(null);
@@ -259,59 +139,65 @@ export function FlatColorGradingSection({
   );
   const lut = grading.lut;
   const selectedLutName = lut?.src ? (lut.src.split("/").pop() ?? lut.src) : null;
+  const resolvedGrading = useMemo(() => resolveColorGrading(grading), [grading]);
+  const secondaryInputGrading = useMemo(
+    () =>
+      resolveColorGrading({
+        intensity: 1,
+        adjust: resolvedGrading.adjust,
+        wheels: resolvedGrading.wheels,
+        curves: resolvedGrading.curves,
+        hueCurves: resolvedGrading.hueCurves,
+        colorSpace: resolvedGrading.colorSpace,
+      }),
+    [
+      resolvedGrading.adjust,
+      resolvedGrading.colorSpace,
+      resolvedGrading.curves,
+      resolvedGrading.hueCurves,
+      resolvedGrading.wheels,
+    ],
+  );
+  const actions = createColorGradingActions(grading, onCommitColorGrading);
+  const scopesRefreshKey = useMemo(() => serializeHfColorGrading(grading), [grading]);
 
-  const applyPreset = (presetId: string) => {
-    const next = normalizeHfColorGrading({ preset: presetId, intensity: 1, lut: grading.lut });
-    if (next) onCommitColorGrading(next);
-  };
-  const updateIntensity = (value: number) => {
-    onCommitColorGrading({ ...grading, intensity: value / 100 });
-  };
-  const applyLut = (src: string | null, intensity = 1) => {
-    onCommitColorGrading({
-      ...grading,
-      intensity: visibleIntensity(grading),
-      lut: src ? { src, intensity } : null,
-    });
-  };
-  const importLuts = async (files: FileList | null) => {
-    if (!files?.length || !onImportAssets) return;
-    const uploaded = await onImportAssets(files, "assets/luts");
-    const firstLut = uploaded.find((asset) => LUT_EXT.test(asset));
-    if (firstLut) {
-      track("button", "Import LUT");
-      applyLut(firstLut, 1);
-    }
+  useEffect(() => {
+    if (presetPreviews.status === "idle") onRequestPresetPreviews();
+  }, [onRequestPresetPreviews, presetPreviews.status]);
+
+  const resolvePreset = (presetId: string) => {
+    const resolved = normalizeHfColorGrading({ preset: presetId, lut: grading.lut });
+    return resolved
+      ? {
+          ...resolved,
+          effects: grading.effects,
+          palette: grading.palette,
+        }
+      : grading;
   };
 
+  useEffect(() => () => onPreviewColorGrading(null), [onPreviewColorGrading]);
+
   const renderDetailSlider = (key: HfColorGradingDetailKey) => {
     const spec = detailByKey(key);
     const value = grading.details[key];
-    const isSet = Math.abs(value - spec.defaultValue) > 1e-4;
+    const defaultValue = normalizedColorGradingDefault(spec);
+    const isSet = Math.abs(value - defaultValue) > 1e-4;
     return (
       <FlatSlider
         key={key}
         label={spec.label}
-        value={Math.round(value * 100)}
-        min={key === "vignetteRoundness" ? -100 : 0}
-        max={100}
+        value={Math.round(value * spec.scale)}
+        min={spec.min}
+        max={spec.max}
+        step={spec.step}
         tier={isSet ? "explicitCustom" : "default"}
-        displayValue={`${Math.round(value * 100)}%`}
+        displayValue={`${Math.round(value * spec.scale)}${spec.suffix}`}
         centerTick={key === "vignetteRoundness"}
         onCommit={(next) =>
-          onCommitColorGrading({
-            ...grading,
-            intensity: visibleIntensity(grading),
-            details: { ...grading.details, [key]: next / 100 },
-          })
-        }
-        onReset={() =>
-          onCommitColorGrading({
-            ...grading,
-            intensity: visibleIntensity(grading),
-            details: { ...grading.details, [key]: spec.defaultValue },
-          })
+          onCommitColorGrading(colorGradingWithDetail(grading, key, next / spec.scale))
         }
+        onReset={() => onCommitColorGrading(colorGradingWithDetail(grading, key, defaultValue))}
       />
     );
   };
@@ -319,31 +205,177 @@ export function FlatColorGradingSection({
   return (
     <div className="space-y-1.5">
       <HdrBanner metadata={mediaMetadata} />
-      <div data-flat-grade-preset="true" className="flex min-h-[30px] items-center justify-between">
-        <span className="text-[11px] text-panel-text-2">Preset</span>
-        <FlatSelectRow
-          label=""
-          ariaLabel="Preset"
-          value={grading.preset ?? "neutral"}
-          options={PRESET_OPTIONS}
-          tier={resolveValueTier(
-            grading.preset === "neutral" ? undefined : (grading.preset ?? undefined),
-            "neutral",
-          )}
-          onChange={applyPreset}
-        />
+      <PropertyPanelColorScopes
+        captureFrame={() => captureGradedFrame()}
+        refreshKey={scopesRefreshKey}
+      />
+      <div data-flat-grade-presets="true" className="space-y-1.5">
+        {presetPreviews.status === "unavailable" && (
+          <button
+            type="button"
+            onClick={onRequestPresetPreviews}
+            className="text-[10px] font-medium text-panel-accent hover:text-panel-accent/80"
+          >
+            Retry look previews
+          </button>
+        )}
+        <div data-flat-grade-preset-group="presets" className={FLAT_PREVIEW_GRID}>
+          {HF_COLOR_GRADING_GRADE_PRESETS.map((preset) => {
+            const label = preset.label;
+            const selected = grading.preset === preset.id;
+            const preview = presetPreviews.images[preset.id];
+            return (
+              <button
+                key={preset.id}
+                type="button"
+                data-flat-grade-preset={preset.id}
+                aria-pressed={selected}
+                {...presetPreviewHandlers({
+                  id: preset.id,
+                  label,
+                  resolve: () => resolvePreset(preset.id),
+                  onPreview: onPreviewColorGrading,
+                  onCommit: onCommitColorGrading,
+                  onTrack: (name) => track("button", `Apply ${name}`),
+                })}
+                className={`min-w-0 overflow-hidden border text-left text-[10px] transition-colors ${
+                  selected
+                    ? "border-panel-accent bg-panel-accent/10 text-panel-text-0"
+                    : "border-panel-hairline bg-panel-bg-soft text-panel-text-3 hover:border-panel-border-input hover:text-panel-text-1"
+                }`}
+              >
+                <span
+                  data-flat-grade-preview-frame={preset.id}
+                  className="flex w-full items-center justify-center overflow-hidden bg-black/20"
+                  style={{ aspectRatio: `${presetPreviews.width} / ${presetPreviews.height}` }}
+                >
+                  {preview ? (
+                    <img
+                      data-flat-grade-preview={preset.id}
+                      src={preview}
+                      alt=""
+                      draggable={false}
+                      className="block h-full w-full object-contain"
+                    />
+                  ) : (
+                    <span
+                      data-flat-grade-preview-placeholder={presetPreviews.status}
+                      className="h-full w-full bg-panel-bg-soft"
+                    />
+                  )}
+                </span>
+                <span className="block truncate px-2 py-1.5">{label}</span>
+              </button>
+            );
+          })}
+        </div>
       </div>
       <FlatSlider
-        label="Strength"
+        label="Amount"
         value={Math.round(grading.intensity * 100)}
         min={0}
         max={100}
         tier={grading.intensity === 1 ? "default" : "explicitCustom"}
         displayValue={`${Math.round(grading.intensity * 100)}%`}
-        onCommit={updateIntensity}
-        onReset={() => updateIntensity(100)}
+        onCommit={actions.setIntensityPercent}
+        onReset={() => actions.setIntensityPercent(100)}
       />
 
+      <div className="space-y-0.5 border-t border-panel-hairline pt-1.5">
+        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+          Primary
+        </div>
+        {COLOR_GRADING_ADJUST_SLIDERS.map((slider) => {
+          const rawPercent = grading.adjust[slider.key] * slider.scale;
+          const isSet = Math.abs(grading.adjust[slider.key]) > 1e-6;
+          return (
+            <div key={slider.key} data-flat-grade-adjust="true">
+              <FlatSlider
+                label={slider.label}
+                value={rawPercent}
+                min={slider.min}
+                max={slider.max}
+                step={slider.step}
+                tier={isSet ? "explicitCustom" : "default"}
+                displayValue={formatAdjustValue(slider.key, rawPercent)}
+                centerTick
+                onCommit={(next) =>
+                  onCommitColorGrading(
+                    colorGradingWithAdjust(grading, slider.key, next / slider.scale),
+                  )
+                }
+                onReset={() => onCommitColorGrading(colorGradingWithAdjust(grading, slider.key, 0))}
+              />
+            </div>
+          );
+        })}
+      </div>
+
+      <div className="space-y-1.5 border-t border-panel-hairline pt-1.5">
+        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+          Color wheels
+        </div>
+        <ColorWheels
+          value={resolvedGrading.wheels}
+          onPreview={(wheels) =>
+            onPreviewColorGrading({
+              ...grading,
+              intensity: visibleColorGradingIntensity(grading),
+              wheels,
+            })
+          }
+          onCommit={(wheels) =>
+            onCommitColorGrading({
+              ...grading,
+              intensity: visibleColorGradingIntensity(grading),
+              wheels,
+            })
+          }
+        />
+      </div>
+
+      <div className="space-y-1.5 border-t border-panel-hairline pt-1.5">
+        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+          Curves
+        </div>
+        <ColorCurves
+          value={{ curves: resolvedGrading.curves, hueCurves: resolvedGrading.hueCurves }}
+          onPreview={({ curves, hueCurves }) =>
+            onPreviewColorGrading({
+              ...grading,
+              intensity: visibleColorGradingIntensity(grading),
+              curves,
+              hueCurves,
+            })
+          }
+          onCommit={({ curves, hueCurves }) =>
+            onCommitColorGrading({
+              ...grading,
+              intensity: visibleColorGradingIntensity(grading),
+              curves,
+              hueCurves,
+            })
+          }
+        />
+      </div>
+
+      <div className="space-y-1.5 border-t border-panel-hairline pt-1.5">
+        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
+          Secondary color
+        </div>
+        <PropertyPanelColorSecondary
+          secondaries={resolvedGrading.secondaries}
+          captureFrame={() => captureGradedFrame({ grading: secondaryInputGrading })}
+          onCommit={(secondaries) =>
+            onCommitColorGrading({
+              ...grading,
+              intensity: visibleColorGradingIntensity(grading),
+              secondaries,
+            })
+          }
+        />
+      </div>
+
       <div className="border-t border-panel-hairline pt-1.5">
         <button
           type="button"
@@ -375,7 +407,7 @@ export function FlatColorGradingSection({
                 onChange={(e) => {
                   const src = e.target.value;
                   track("select", "Custom LUT");
-                  applyLut(src || null, src && lut?.src === src ? lut.intensity : 1);
+                  actions.applyLut(src || null, src && lut?.src === src ? lut.intensity : 1);
                 }}
                 className="border-b border-panel-border-input/50 bg-transparent font-mono text-[10px] text-panel-text-3 outline-none hover:border-panel-border-input"
               >
@@ -401,7 +433,9 @@ export function FlatColorGradingSection({
                 accept=".cube"
                 className="hidden"
                 onChange={(e) => {
-                  void importLuts(e.currentTarget.files);
+                  void actions.importLut(e.currentTarget.files, onImportAssets, () =>
+                    track("button", "Import LUT"),
+                  );
                   e.currentTarget.value = "";
                 }}
               />
@@ -414,55 +448,17 @@ export function FlatColorGradingSection({
                 max={100}
                 tier={lut.intensity === 1 ? "default" : "explicitCustom"}
                 displayValue={`${Math.round((lut.intensity ?? 1) * 100)}%`}
-                onCommit={(v) => applyLut(lut.src, v / 100)}
-                onReset={() => applyLut(lut.src, 1)}
+                onCommit={(v) => actions.applyLut(lut.src, v / 100)}
+                onReset={() => actions.applyLut(lut.src, 1)}
               />
             )}
           </div>
         )}
       </div>
 
-      <div className="space-y-0.5 border-t border-panel-hairline pt-1.5">
-        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
-          Adjust
-        </div>
-        {ADJUST_SLIDERS.map((slider) => {
-          const rawPercent = grading.adjust[slider.key] * 100;
-          const isSet = Math.abs(grading.adjust[slider.key]) > 1e-6;
-          return (
-            <div key={slider.key} data-flat-grade-adjust="true">
-              <FlatSlider
-                label={slider.label}
-                value={rawPercent}
-                min={slider.min}
-                max={slider.max}
-                step={slider.step}
-                tier={isSet ? "explicitCustom" : "default"}
-                displayValue={formatAdjustValue(slider.key, rawPercent)}
-                centerTick
-                onCommit={(next) =>
-                  onCommitColorGrading({
-                    ...grading,
-                    intensity: visibleIntensity(grading),
-                    adjust: { ...grading.adjust, [slider.key]: next / 100 },
-                  })
-                }
-                onReset={() =>
-                  onCommitColorGrading({
-                    ...grading,
-                    intensity: visibleIntensity(grading),
-                    adjust: { ...grading.adjust, [slider.key]: 0 },
-                  })
-                }
-              />
-            </div>
-          );
-        })}
-      </div>
-
       <div className="space-y-1.5 border-t border-panel-hairline pt-1.5">
         <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
-          Finishing
+          Finish
         </div>
         <div className="flex items-center gap-1.5">
           <div className="flex-1">{renderDetailSlider("vignette")}</div>
@@ -490,49 +486,13 @@ export function FlatColorGradingSection({
         </div>
         {detailSettingsOpen && (
           <div className="space-y-0.5 border-l-2 border-panel-border-input pl-2.5">
-            {(detailSettingsOpen === "vignette" ? VIGNETTE_TUNE_KEYS : GRAIN_TUNE_KEYS).map(
-              renderDetailSlider,
+            {(detailSettingsOpen === "vignette" ? VIGNETTE_TUNE_SLIDERS : GRAIN_TUNE_SLIDERS).map(
+              (slider) => renderDetailSlider(slider.key),
             )}
           </div>
         )}
       </div>
 
-      <div className="space-y-0.5 border-t border-panel-hairline pt-1.5">
-        <div className="mb-1 text-[9px] font-semibold uppercase tracking-[0.12em] text-panel-text-5">
-          Effects
-        </div>
-        {EFFECT_SLIDERS.map((slider) => {
-          const value = grading.effects[slider.key];
-          const isSet = value > 1e-6;
-          return (
-            <div key={slider.key} data-flat-grade-effect="true">
-              <FlatSlider
-                label={slider.label}
-                value={Math.round(value * 100)}
-                min={0}
-                max={100}
-                tier={isSet ? "explicitCustom" : "default"}
-                displayValue={`${Math.round(value * 100)}%`}
-                onCommit={(next) =>
-                  onCommitColorGrading({
-                    ...grading,
-                    intensity: visibleIntensity(grading),
-                    effects: { ...grading.effects, [slider.key]: next / 100 },
-                  })
-                }
-                onReset={() =>
-                  onCommitColorGrading({
-                    ...grading,
-                    intensity: visibleIntensity(grading),
-                    effects: { ...grading.effects, [slider.key]: 0 },
-                  })
-                }
-              />
-            </div>
-          );
-        })}
-      </div>
-
       {onApplyScopeAvailable && (
         <div className="flex items-center justify-between gap-2 border-t border-panel-hairline pt-1.5">
           <span className="flex items-center gap-1.5 text-[11px] text-panel-text-2">