feat: color grading

apps/ui/src/components/editor/color-grading/color-grading-panel.tsx

@@ -11,6 +11,8 @@
 import type {
   ColorGrading,
   ColorSpace,
+  Gamut,
+  ToneMapping,
   PrimaryCorrection,
   ColorWheels,
   Curves,
@@ -145,7 +147,13 @@ export function ColorGradingPanel({
 
   // Update a CST node
   const handleUpdateCstNode = useCallback(
-    (updates: { from_space?: ColorSpace; to_space?: ColorSpace }) => {
+    (updates: {
+      from_space?: ColorSpace;
+      to_space?: ColorSpace;
+      from_gamut?: Gamut;
+      to_gamut?: Gamut;
+      tone_mapping?: ToneMapping;
+    }) => {
       if (!selectedNode || selectedNode.type !== "ColorSpaceTransform") return;
 
       const newNodes = grading.nodes.map((node) => {
@@ -227,6 +235,9 @@ export function ColorGradingPanel({
             mix: 1,
             from_space: "SLog3",
             to_space: "Srgb",
+            from_gamut: "Rec709",
+            to_gamut: "Rec709",
+            tone_mapping: "Simple",
           };
           break;
         default:
@@ -545,7 +556,13 @@ interface NodeParameterEditorProps {
   onUpdatePrimary: (key: keyof PrimaryCorrection, value: number | [number, number, number]) => void;
   onUpdateColorWheels: (updates: Partial<ColorWheels>) => void;
   onUpdateCurves: (curves: Curves) => void;
-  onUpdateCst: (updates: { from_space?: ColorSpace; to_space?: ColorSpace }) => void;
+  onUpdateCst: (updates: {
+    from_space?: ColorSpace;
+    to_space?: ColorSpace;
+    from_gamut?: Gamut;
+    to_gamut?: Gamut;
+    tone_mapping?: ToneMapping;
+  }) => void;
   onUpdateLut: (updates: Partial<LutReference>) => void;
   onUpdateQualifier: (key: keyof HslQualifier, value: number | boolean) => void;
   onUpdateQualifierCorrection: (
@@ -645,6 +662,9 @@ function NodeParameterEditor({
             <CstProperties
               fromSpace={node.from_space}
               toSpace={node.to_space}
+              fromGamut={node.from_gamut ?? "Rec709"}
+              toGamut={node.to_gamut ?? "Rec709"}
+              toneMapping={node.tone_mapping ?? "None"}
               onChange={onUpdateCst}
             />
           )}

apps/ui/src/components/editor/color-grading/cst-properties.tsx

@@ -1,8 +1,11 @@
 /**
  * Color Space Transform node properties editor.
+ *
+ * Allows separate selection of transfer function (gamma curve)
+ * and gamut (color primaries) for source and target.
  */
 
-import type { ColorSpace } from "@tooscut/render-engine";
+import type { ColorSpace, Gamut, ToneMapping } from "@tooscut/render-engine";
 
 import {
   Select,
@@ -14,6 +17,7 @@ import {
   SelectValue,
 } from "../../ui/select";
 
+// Transfer function options (gamma curves)
 const STANDARD_OPTIONS: { value: ColorSpace; label: string }[] = [
   { value: "Srgb", label: "sRGB" },
   { value: "Linear", label: "Linear" },
@@ -33,23 +37,98 @@ const LOG_OPTIONS: { value: ColorSpace; label: string }[] = [
   { value: "RedLog3G10", label: "RED Log3G10" },
 ];
 
+// Gamut (color primaries) options
+const STANDARD_GAMUT_OPTIONS: { value: Gamut; label: string }[] = [
+  { value: "Rec709", label: "Rec.709 / sRGB" },
+  { value: "DciP3", label: "DCI-P3 (D65)" },
+  { value: "Rec2020", label: "Rec.2020" },
+];
+
+const CAMERA_GAMUT_OPTIONS: { value: Gamut; label: string }[] = [
+  { value: "SGamut", label: "Sony S-Gamut" },
+  { value: "SGamut3", label: "Sony S-Gamut3" },
+  { value: "SGamut3Cine", label: "Sony S-Gamut3.Cine" },
+  { value: "ArriWideGamut", label: "ARRI Wide Gamut" },
+  { value: "VGamut", label: "Panasonic V-Gamut" },
+  { value: "BmdWideGamut", label: "BMD Wide Gamut" },
+  { value: "RedWideGamut", label: "RED Wide Gamut" },
+];
+
+const ACES_GAMUT_OPTIONS: { value: Gamut; label: string }[] = [
+  { value: "AcesCgAp1", label: "ACES AP1 (ACEScg)" },
+];
+
+const TONE_MAPPING_OPTIONS: { value: ToneMapping; label: string }[] = [
+  { value: "None", label: "None" },
+  { value: "Simple", label: "Simple" },
+];
+
 interface CstPropertiesProps {
   fromSpace: ColorSpace;
   toSpace: ColorSpace;
-  onChange: (updates: { from_space?: ColorSpace; to_space?: ColorSpace }) => void;
+  fromGamut: Gamut;
+  toGamut: Gamut;
+  toneMapping: ToneMapping;
+  onChange: (updates: {
+    from_space?: ColorSpace;
+    to_space?: ColorSpace;
+    from_gamut?: Gamut;
+    to_gamut?: Gamut;
+    tone_mapping?: ToneMapping;
+  }) => void;
 }
 
-export function CstProperties({ fromSpace, toSpace, onChange }: CstPropertiesProps) {
+export function CstProperties({
+  fromSpace,
+  toSpace,
+  fromGamut,
+  toGamut,
+  toneMapping,
+  onChange,
+}: CstPropertiesProps) {
   return (
     <div className="space-y-3">
-      <div>
-        <label className="mb-1 block text-xs text-muted-foreground">From</label>
-        <ColorSpaceSelect value={fromSpace} onValueChange={(v) => onChange({ from_space: v })} />
+      <div className="text-xs font-medium text-muted-foreground">Transfer Function</div>
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <label className="mb-1 block text-xs text-muted-foreground">From</label>
+          <ColorSpaceSelect value={fromSpace} onValueChange={(v) => onChange({ from_space: v })} />
+        </div>
+        <div>
+          <label className="mb-1 block text-xs text-muted-foreground">To</label>
+          <ColorSpaceSelect value={toSpace} onValueChange={(v) => onChange({ to_space: v })} />
+        </div>
       </div>
-      <div>
-        <label className="mb-1 block text-xs text-muted-foreground">To</label>
-        <ColorSpaceSelect value={toSpace} onValueChange={(v) => onChange({ to_space: v })} />
+      <div className="text-xs font-medium text-muted-foreground">Color Gamut</div>
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <label className="mb-1 block text-xs text-muted-foreground">From</label>
+          <GamutSelect value={fromGamut} onValueChange={(v) => onChange({ from_gamut: v })} />
+        </div>
+        <div>
+          <label className="mb-1 block text-xs text-muted-foreground">To</label>
+          <GamutSelect value={toGamut} onValueChange={(v) => onChange({ to_gamut: v })} />
+        </div>
       </div>
+      <div className="text-xs font-medium text-muted-foreground">Tone Mapping</div>
+      <Select
+        value={toneMapping}
+        onValueChange={(v) => {
+          if (v) onChange({ tone_mapping: v as ToneMapping });
+        }}
+        items={TONE_MAPPING_OPTIONS}
+      >
+        <SelectTrigger size="sm" className="w-full">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {TONE_MAPPING_OPTIONS.map((opt) => (
+            <SelectItem key={opt.value} value={opt.value}>
+              {opt.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
     </div>
   );
 }
@@ -101,3 +180,51 @@ function ColorSpaceSelect({
     </Select>
   );
 }
+
+function GamutSelect({
+  value,
+  onValueChange,
+}: {
+  value: Gamut;
+  onValueChange: (value: Gamut) => void;
+}) {
+  return (
+    <Select
+      value={value}
+      onValueChange={(v) => {
+        if (v) onValueChange(v as Gamut);
+      }}
+      items={[...STANDARD_GAMUT_OPTIONS, ...CAMERA_GAMUT_OPTIONS, ...ACES_GAMUT_OPTIONS]}
+    >
+      <SelectTrigger size="sm" className="w-full">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Standard</SelectLabel>
+          {STANDARD_GAMUT_OPTIONS.map((opt) => (
+            <SelectItem key={opt.value} value={opt.value}>
+              {opt.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Camera</SelectLabel>
+          {CAMERA_GAMUT_OPTIONS.map((opt) => (
+            <SelectItem key={opt.value} value={opt.value}>
+              {opt.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>ACES</SelectLabel>
+          {ACES_GAMUT_OPTIONS.map((opt) => (
+            <SelectItem key={opt.value} value={opt.value}>
+              {opt.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}