Add colour grading presets feature

src/components/ColorGradePresets.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+interface ColorPreset {
+  label: string;
+  brightness: number;
+  contrast: number;
+  saturation: number;
+}
+
+const PRESETS: ColorPreset[] = [
+  { label: "Natural", brightness: 0, contrast: 1, saturation: 1 },
+  { label: "Warm", brightness: 0.05, contrast: 1.05, saturation: 1.15 },
+  { label: "Cool", brightness: 0, contrast: 1.05, saturation: 0.9 },
+  { label: "Cinematic", brightness: -0.05, contrast: 1.2, saturation: 0.8 },
+  { label: "Vivid", brightness: 0, contrast: 1.1, saturation: 1.3 },
+  { label: "B&W", brightness: 0.15, contrast: 1.15, saturation: 0 },
+];
+
+interface Props {
+  brightness: number;
+  contrast: number;
+  saturation: number;
+  onChange: (patch: { brightness: number; contrast: number; saturation: number }) => void;
+}
+
+export default function ColorGradePresets({ brightness, contrast, saturation, onChange }: Props) {
+  const activePreset = PRESETS.find(
+    (p) => p.brightness === brightness && p.contrast === contrast && p.saturation === saturation
+  );
+
+  return (
+    <div className="flex flex-wrap gap-1.5 mb-3">
+      {PRESETS.map((preset) => {
+        const isActive = activePreset?.label === preset.label;
+        return (
+          <button
+            key={preset.label}
+            type="button"
+            onClick={() =>
+              onChange({
+                brightness: preset.brightness,
+                contrast: preset.contrast,
+                saturation: preset.saturation,
+              })
+            }
+            className={`px-2.5 py-1 rounded-md text-[11px] font-heading font-semibold transition-all ${
+              isActive
+                ? "bg-film-600 text-white"
+                : "bg-[var(--surface)] border border-[var(--border)] text-[var(--muted)] hover:border-film-400 hover:text-[var(--text)]"
+            }`}
+            aria-pressed={isActive}
+          >
+            {preset.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

src/components/VideoEditor.tsx

@@ -16,7 +16,7 @@ import ExportSettings from "./ExportSettings";
 import ExportOverlay from "./ExportOverlay";
 import DownloadResult from "./DownloadResult";
 import ImageOverlay from "./ImageOverlay"
-
+import ColorGradePresets from "./ColorGradePresets";
 import { cn } from "@/lib/utils";
 import {
   Layers, Crop, Scissors, RotateCw, Volume2,
@@ -64,37 +64,37 @@ function KeyboardShortcutsPanel() {
   const [open, setOpen] = useState(false);
 
   const shortcuts: { keys: React.ReactNode[]; label: string }[] = [
-  {
-    keys: [
-      <Kbd key="ctrl">Ctrl</Kbd>,
-      <span key="plus1" className="text-[var(--muted)] text-xs">+</span>,
-      <Kbd key="shift">Shift</Kbd>,
-      <span key="plus2" className="text-[var(--muted)] text-xs">+</span>,
-      <Kbd key="e">E</Kbd>
-    ],
-    label: "Export video",
-  },
-  {
-    keys: [<Kbd key="m">M</Kbd>],
-    label: "Toggle audio mute",
-  },
-  {
-    keys: [<Kbd key="r">R</Kbd>],
-    label: "Reset all settings",
-  },
-  {
-    keys: [<Kbd key="esc">Esc</Kbd>],
-    label: "Cancel export",
-  },
-  {
-    keys: [<Kbd key="1">1</Kbd>, <span key="dash" className="text-[var(--muted)] text-xs">–</span>, <Kbd key="9">9</Kbd>],
-    label: "Switch preset by index",
-  },
-  {
-    keys: [<Kbd key="question">?</Kbd>],
-    label: "Toggle this panel",
-  },
-];
+    {
+      keys: [
+        <Kbd key="ctrl">Ctrl</Kbd>,
+        <span key="plus1" className="text-[var(--muted)] text-xs">+</span>,
+        <Kbd key="shift">Shift</Kbd>,
+        <span key="plus2" className="text-[var(--muted)] text-xs">+</span>,
+        <Kbd key="e">E</Kbd>,
+      ],
+      label: "Export video",
+    },
+    {
+      keys: [<Kbd key="m">M</Kbd>],
+      label: "Toggle audio mute",
+    },
+    {
+      keys: [<Kbd key="r">R</Kbd>],
+      label: "Reset all settings",
+    },
+    {
+      keys: [<Kbd key="esc">Esc</Kbd>],
+      label: "Cancel export",
+    },
+    {
+      keys: [<Kbd key="1">1</Kbd>, <span key="dash" className="text-[var(--muted)] text-xs">–</span>, <Kbd key="9">9</Kbd>],
+      label: "Switch preset by index",
+    },
+    {
+      keys: [<Kbd key="question">?</Kbd>],
+      label: "Toggle this panel",
+    },
+  ];
 
   return (
     <div className="rounded-xl border border-[var(--border)] bg-[var(--surface)] animate-fade-in overflow-hidden">
@@ -295,6 +295,13 @@ export default function VideoEditor() {
                     title="Adjustments"
                     delay={175}
                   >
+                    <ColorGradePresets
+                      brightness={recipe.brightness}
+                      contrast={recipe.contrast}
+                      saturation={recipe.saturation}
+                      onChange={updateRecipe}
+                    />
+
                     <div className="space-y-5">
                       {/* Brightness */}
                       <div className="space-y-2">