@hyperframes/studio 0.7.57 → 0.7.59

package/src/components/editor/propertyPanel3dTransform.tsx

@@ -5,6 +5,7 @@ import { MetricField } from "./propertyPanelPrimitives";
 import { KeyframeNavigation } from "./KeyframeNavigation";
 import { formatPxMetricValue, parsePxMetricValue, RESPONSIVE_GRID } from "./propertyPanelHelpers";
 import { Transform3DCube, type CubePose } from "./Transform3DCube";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 
 // translateZ only foreshortens under a perspective lens. Rather than hardcode one
 // (an arbitrary px value reads wrong at different canvas sizes), derive it from the
@@ -71,6 +72,7 @@ function Cube3dControl({
   onKeyframe?: () => void;
   keyframed?: boolean;
 }) {
+  const track = useTrackDesignInput();
   const pose: CubePose = {
     rotationX: gsapRuntimeValues.rotationX ?? 0,
     rotationY: gsapRuntimeValues.rotationY ?? 0,
@@ -96,6 +98,7 @@ function Cube3dControl({
     }
     const axes = Object.keys(changedProps);
     if (axes.length === 0) return;
+    track("slider", "3D rotation pose");
     // ONE keyframe for the whole pose change — avoids per-axis commits racing into
     // adjacent duplicate keyframes.
     void onCommitAnimatedProperties(element, changedProps);
@@ -111,6 +114,7 @@ function Cube3dControl({
       scale: 1,
       transformPerspective: 0,
     };
+    track("button", "Reset 3D transform");
     void onCommitAnimatedProperties(element, identity);
   };
   // Immediate element feedback while dragging — set the live transform without a
@@ -168,6 +172,7 @@ function Cube3dControl({
             }
             // One commit for all props so the writes can't race read-modify-write on
             // the same script (which dropped a prop and reverted after a seek).
+            track("slider", "3D depth");
             void onCommitAnimatedProperties(element, props);
           }}
           onRecenter={recenter}

package/src/components/editor/propertyPanelColor.test.tsx

@@ -0,0 +1,28 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ColorField } from "./propertyPanelColor";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("ColorField flat trigger", () => {
+  it("renders label and value inline with a small swatch, no boxed border", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(<ColorField flat label="Color" value="rgb(255, 176, 32)" onCommit={vi.fn()} />);
+    });
+    const trigger = host.querySelector<HTMLButtonElement>('[data-flat-color-trigger="true"]');
+    expect(trigger).not.toBeNull();
+    expect(trigger?.className).not.toContain("border-neutral-800");
+    expect(host.textContent).toContain("Color");
+    act(() => root.unmount());
+  });
+});

package/src/components/editor/propertyPanelColor.tsx

@@ -11,6 +11,7 @@ import {
 } from "./colorValue";
 import { resolveFloatingPanelPosition, type FloatingPosition } from "./floatingPanel";
 import { colorFromCss, FIELD, LABEL } from "./propertyPanelHelpers";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 
 const COLOR_PICKER_SIZE = { width: 292, height: 386 };
 
@@ -121,13 +122,16 @@ export function ColorField({
   label,
   value,
   disabled,
+  flat,
   onCommit,
 }: {
   label: string;
   value: string;
   disabled?: boolean;
+  flat?: boolean;
   onCommit: (nextValue: string) => void;
 }) {
+  const track = useTrackDesignInput();
   const buttonRef = useRef<HTMLButtonElement | null>(null);
   const panelRef = useRef<HTMLDivElement | null>(null);
   const [open, setOpen] = useState(false);
@@ -201,7 +205,9 @@ export function ColorField({
   const commitColor = (nextColor: ParsedColor) => {
     setDraftColor(nextColor);
     setHexDraft(toHexColor(nextColor).toUpperCase());
-    onCommit(formatCssColor(nextColor));
+    const nextValue = formatCssColor(nextColor);
+    if (nextValue !== value) track("color", label);
+    onCommit(nextValue);
   };
 
   const commitHsv = (nextHsv: { hue?: number; saturation?: number; value?: number }) => {
@@ -349,6 +355,30 @@ export function ColorField({
     }
   };
 
+  if (flat) {
+    return (
+      <div className="flex min-h-[30px] items-center justify-between">
+        <span className="text-[11px] text-panel-text-2">{label}</span>
+        <button
+          type="button"
+          data-flat-color-trigger="true"
+          disabled={disabled}
+          aria-label={`Pick ${label.toLowerCase()} color`}
+          ref={buttonRef}
+          onClick={openPicker}
+          className="flex items-center gap-2 disabled:cursor-not-allowed"
+        >
+          <span
+            className="h-4 w-4 flex-shrink-0 rounded-[4px]"
+            style={{ backgroundColor: value || "transparent" }}
+          />
+          <span className="font-mono text-[11px] text-panel-text-0">{value}</span>
+        </button>
+        {picker}
+      </div>
+    );
+  }
+
   return (
     <div className="grid min-w-0 gap-1.5">
       <span className={LABEL}>{label}</span>

package/src/components/editor/propertyPanelColorGradingControls.tsx

@@ -11,6 +11,7 @@ import { ChevronDown, ChevronRight, Plus, X } from "../../icons/SystemIcons";
 import { LUT_EXT } from "../../utils/mediaTypes";
 import { LABEL } from "./propertyPanelHelpers";
 import { ColorGradingSliderControl } from "./propertyPanelColorGradingSlider";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 
 const LUT_UPLOAD_DIR = "assets/luts";
 
@@ -175,6 +176,7 @@ export function ColorGradingControls({
   onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
   onCommitColorGrading: (nextGrading: NormalizedHfColorGrading) => void;
 }) {
+  const track = useTrackDesignInput();
   const lutInputRef = useRef<HTMLInputElement>(null);
   const [lutOpen, setLutOpen] = useState(false);
   const [detailSettings, setDetailSettings] = useState<"vignette" | "grain" | null>(null);
@@ -195,7 +197,10 @@ export function ColorGradingControls({
 
   const applyPreset = (preset: string) => {
     const next = normalizeHfColorGrading({ preset, intensity: 1, lut: grading.lut });
-    if (next) onCommitColorGrading(next);
+    if (next) {
+      track("select", "Preset");
+      onCommitColorGrading(next);
+    }
   };
   const updateFilterIntensity = (value: number) => {
     onCommitColorGrading({
@@ -218,7 +223,10 @@ export function ColorGradingControls({
     if (!files?.length || !onImportAssets) return;
     const uploaded = await onImportAssets(files, LUT_UPLOAD_DIR);
     const firstLut = uploaded.find((asset) => LUT_EXT.test(asset));
-    if (firstLut) applyLut(firstLut, 1);
+    if (firstLut) {
+      track("button", "Import LUT");
+      applyLut(firstLut, 1);
+    }
   };
   const commitDetailSlider = (slider: DetailSlider, next: number) => {
     onCommitColorGrading({
@@ -313,6 +321,7 @@ export function ColorGradingControls({
                 value={selectedLut}
                 onChange={(event) => {
                   const nextSrc = event.target.value;
+                  track("select", "Custom LUT");
                   applyLut(
                     nextSrc || null,
                     nextSrc && grading.lut?.src === nextSrc ? grading.lut.intensity : 1,

package/src/components/editor/propertyPanelColorGradingSection.tsx

@@ -1,159 +1,15 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type PointerEvent as ReactPointerEvent,
-  type RefObject,
-} from "react";
-import {
-  HF_COLOR_GRADING_ATTR,
-  isHfColorGradingActive,
-  normalizeHfColorGrading,
-  serializeHfColorGrading,
-  type HfColorGradingTarget,
-  type NormalizedHfColorGrading,
-} from "@hyperframes/core/color-grading";
+import { type PointerEvent as ReactPointerEvent, type RefObject } from "react";
+import { isHfColorGradingActive } from "@hyperframes/core/color-grading";
 import { Compare, Palette, RotateCcw } from "../../icons/SystemIcons";
-import {
-  addStudioPendingEditFlushListener,
-  trackStudioPendingEdit,
-} from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
 import { ColorGradingControls } from "./propertyPanelColorGradingControls";
-import { stripQueryAndHash } from "./propertyPanelHelpers";
 import { Section } from "./propertyPanelPrimitives";
 import {
-  acceptStudioRuntimeMessage,
-  postRuntimeControlMessage,
-} from "../../player/lib/runtimeProtocol";
-
-const COLOR_GRADING_DATA_KEY = HF_COLOR_GRADING_ATTR.replace(/^data-/, "");
-const RUNTIME_STATUS_REFRESH_DELAYS = [50, 250, 1000, 2500] as const;
-const MEDIA_METADATA_CACHE = new Map<string, MediaMetadata | null>();
-
-interface RuntimeColorGradingStatus {
-  state: "missing" | "inactive" | "pending" | "active" | "unavailable";
-  message: string;
-}
-
-interface MediaMetadata {
-  kind: "video" | "image" | "audio" | "unknown";
-  color: {
-    dynamicRange: "hdr" | "sdr" | "unknown";
-    hdrTransfer: "pq" | "hlg" | "unknown" | null;
-    label: string;
-    isHdr: boolean;
-    codecName?: string;
-    profile?: string;
-    pixelFormat?: string;
-    colorSpace?: string;
-    colorTransfer?: string;
-    colorPrimaries?: string;
-  };
-  probeError?: string;
-}
-
-interface MediaMetadataResponse {
-  path: string;
-  metadata: MediaMetadata;
-}
-
-function stripPreviewAssetPath(src: string, projectId: string): string | null {
-  let pathname = src;
-  try {
-    pathname = new URL(src, window.location.href).pathname;
-  } catch {
-    return null;
-  }
-  const projectMarker = `/api/projects/${encodeURIComponent(projectId)}/preview/`;
-  const genericMarker = "/preview/";
-  const marker = pathname.includes(projectMarker) ? projectMarker : genericMarker;
-  const index = pathname.indexOf(marker);
-  if (index < 0) return null;
-  const assetPath = decodeURIComponent(pathname.slice(index + marker.length)).replace(/^\/+/, "");
-  if (!assetPath || assetPath.startsWith("comp/")) return null;
-  return assetPath;
-}
-
-// fallow-ignore-next-line complexity
-function resolveProjectAssetPath(
-  sourceFile: string,
-  src: string,
-  projectId: string,
-): string | null {
-  const trimmed = stripQueryAndHash(src.trim());
-  if (!trimmed || /^(?:data:|blob:)/i.test(trimmed)) return null;
-  if (/^https?:\/\//i.test(trimmed)) return stripPreviewAssetPath(trimmed, projectId);
-  if (trimmed.startsWith("/")) {
-    return stripPreviewAssetPath(trimmed, projectId);
-  }
-
-  const sourceDir = sourceFile.includes("/")
-    ? sourceFile.slice(0, sourceFile.lastIndexOf("/"))
-    : "";
-  const parts = `${sourceDir}/${trimmed}`.split("/");
-  const normalized: string[] = [];
-  for (const part of parts) {
-    if (!part || part === ".") continue;
-    if (part === "..") {
-      normalized.pop();
-      continue;
-    }
-    normalized.push(part);
-  }
-  return normalized.join("/") || null;
-}
-
-function selectedMediaAssetPath(element: DomEditSelection, projectId: string): string | null {
-  if (element.tagName !== "video" && element.tagName !== "img") return null;
-  const media = element.element as HTMLImageElement | HTMLVideoElement;
-  const src = media.getAttribute("src") || media.currentSrc || "";
-  return resolveProjectAssetPath(element.sourceFile || "index.html", src, projectId);
-}
-
-function defaultColorGrading(): NormalizedHfColorGrading {
-  const grading = normalizeHfColorGrading("neutral");
-  if (!grading) throw new Error("Missing neutral color grading preset");
-  return grading;
-}
-
-function readColorGradingFromElement(element: DomEditSelection): NormalizedHfColorGrading {
-  return (
-    normalizeHfColorGrading(element.dataAttributes[COLOR_GRADING_DATA_KEY]) ?? defaultColorGrading()
-  );
-}
-
-function toBridgeColorGrading(grading: NormalizedHfColorGrading): unknown {
-  if (!isHfColorGradingActive(grading)) return null;
-  const { enabled: _enabled, ...bridgeGrading } = grading;
-  return bridgeGrading;
-}
-
-function readRuntimeColorGradingStatus(
-  iframe: HTMLIFrameElement | null | undefined,
-  target: HfColorGradingTarget,
-): RuntimeColorGradingStatus {
-  try {
-    const win = iframe?.contentWindow as
-      | (Window & {
-          __hf?: {
-            colorGrading?: {
-              getStatus?: (
-                target: HfColorGradingTarget | string | null | undefined,
-              ) => RuntimeColorGradingStatus;
-            };
-          };
-        })
-      | null
-      | undefined;
-    const status = win?.__hf?.colorGrading?.getStatus?.(target);
-    return status ?? { state: "pending", message: "Waiting for runtime" };
-  } catch {
-    return { state: "unavailable", message: "Preview unavailable" };
-  }
-}
+  useColorGradingController,
+  type MediaMetadata,
+  type RuntimeColorGradingStatus,
+} from "./useColorGradingController";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 
 function StatusPill({ status }: { status: RuntimeColorGradingStatus }) {
   const dotClass =
@@ -213,10 +69,12 @@ function HoldBeforeButton({
   disabled: boolean;
   onHoldChange: (holding: boolean) => void;
 }) {
+  const track = useTrackDesignInput();
   const startHold = (event: ReactPointerEvent<HTMLButtonElement>) => {
     if (disabled) return;
     event.preventDefault();
     event.stopPropagation();
+    track("toggle", "Compare original");
     onHoldChange(true);
     const release = () => {
       onHoldChange(false);
@@ -250,7 +108,10 @@ function HoldBeforeButton({
       onKeyDown={(event) => {
         if (disabled || (event.key !== " " && event.key !== "Enter")) return;
         event.preventDefault();
-        if (!active) onHoldChange(true);
+        if (!active) {
+          track("toggle", "Compare original");
+          onHoldChange(true);
+        }
       }}
       onKeyUp={(event) => {
         if (disabled || (event.key !== " " && event.key !== "Enter")) return;
@@ -283,222 +144,36 @@ export function ColorGradingSection({
   assets: string[];
   previewIframeRef?: RefObject<HTMLIFrameElement | null>;
   onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
-  onSetAttributeLive: (attr: string, value: string | null) => void | Promise<void>;
+  onSetAttributeLive: (
+    attr: string,
+    value: string | null,
+    onSettled?: (ok: boolean) => void,
+  ) => void | Promise<void>;
   onApplyScope?: (
     scope: "source-file" | "project",
     value: string | null,
   ) => Promise<{ changedFiles: number; changedElements: number }>;
 }) {
-  const [grading, setGrading] = useState(() => readColorGradingFromElement(element));
-  const [compareEnabled, setCompareEnabled] = useState(false);
-  const [applyScope, setApplyScope] = useState<"source-file" | "project">("source-file");
-  const [applyBusy, setApplyBusy] = useState(false);
-  const [runtimeStatus, setRuntimeStatus] = useState<RuntimeColorGradingStatus>(() => ({
-    state: "pending",
-    message: "Waiting for runtime",
-  }));
-  const selectedAssetPath = useMemo(
-    () => selectedMediaAssetPath(element, projectId),
-    [element, projectId],
-  );
-  const [mediaMetadata, setMediaMetadata] = useState<MediaMetadata | null>(null);
-  const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const pendingPersistValueRef = useRef<string | null | undefined>(undefined);
-  const statusTimersRef = useRef<number[]>([]);
-  const onSetAttributeLiveRef = useRef(onSetAttributeLive);
-  const latestGradingRef = useRef(grading);
-  const compareEnabledRef = useRef(compareEnabled);
-  onSetAttributeLiveRef.current = onSetAttributeLive;
-  latestGradingRef.current = grading;
-  compareEnabledRef.current = compareEnabled;
-  const target = useMemo(
-    (): HfColorGradingTarget => ({
-      id: element.id ?? null,
-      hfId: element.hfId ?? null,
-      selector: element.selector ?? null,
-      selectorIndex: element.selectorIndex ?? null,
-    }),
-    [element.hfId, element.id, element.selector, element.selectorIndex],
-  );
-
-  const refreshRuntimeStatus = useCallback(() => {
-    setRuntimeStatus(readRuntimeColorGradingStatus(previewIframeRef?.current, target));
-  }, [previewIframeRef, target]);
-
-  useEffect(() => {
-    setMediaMetadata(null);
-    if (!selectedAssetPath) return;
-    const cacheKey = `${projectId}:${selectedAssetPath}`;
-    if (MEDIA_METADATA_CACHE.has(cacheKey)) {
-      setMediaMetadata(MEDIA_METADATA_CACHE.get(cacheKey) ?? null);
-      return;
-    }
-    const controller = new AbortController();
-    fetch(
-      `/api/projects/${encodeURIComponent(projectId)}/media/metadata?path=${encodeURIComponent(
-        selectedAssetPath,
-      )}`,
-      { signal: controller.signal },
-    )
-      .then((response) => (response.ok ? response.json() : null))
-      .then((data: MediaMetadataResponse | null) => {
-        if (controller.signal.aborted) return;
-        const metadata = data?.metadata ?? null;
-        MEDIA_METADATA_CACHE.set(cacheKey, metadata);
-        setMediaMetadata(metadata);
-      })
-      .catch(() => {
-        if (!controller.signal.aborted) MEDIA_METADATA_CACHE.set(cacheKey, null);
-      });
-    return () => controller.abort();
-  }, [projectId, selectedAssetPath]);
-
-  const clearStatusTimers = useCallback(() => {
-    for (const timer of statusTimersRef.current) clearTimeout(timer);
-    statusTimersRef.current = [];
-  }, []);
-
-  const scheduleRuntimeStatusRefresh = useCallback(() => {
-    clearStatusTimers();
-    statusTimersRef.current = RUNTIME_STATUS_REFRESH_DELAYS.map((delay) =>
-      window.setTimeout(refreshRuntimeStatus, delay),
-    );
-  }, [clearStatusTimers, refreshRuntimeStatus]);
-
-  useEffect(() => {
-    refreshRuntimeStatus();
-  }, [refreshRuntimeStatus]);
-
-  const persistColorGradingValue = useCallback((value: string | null) => {
-    return trackStudioPendingEdit(
-      onSetAttributeLiveRef.current(COLOR_GRADING_DATA_KEY, value ?? null),
-    );
-  }, []);
-
-  const flushPendingPersist = useCallback(() => {
-    if (persistTimerRef.current) {
-      clearTimeout(persistTimerRef.current);
-      persistTimerRef.current = null;
-    }
-    if (pendingPersistValueRef.current === undefined) return undefined;
-    const value = pendingPersistValueRef.current;
-    pendingPersistValueRef.current = undefined;
-    return persistColorGradingValue(value);
-  }, [persistColorGradingValue]);
-
-  useEffect(() => addStudioPendingEditFlushListener(flushPendingPersist), [flushPendingPersist]);
-
-  useEffect(() => {
-    return () => {
-      clearStatusTimers();
-      void flushPendingPersist();
-    };
-  }, [clearStatusTimers, flushPendingPersist]);
-
-  const postColorGrading = useCallback(
-    (nextGrading: NormalizedHfColorGrading) => {
-      postRuntimeControlMessage(previewIframeRef?.current?.contentWindow, "set-color-grading", {
-        target,
-        grading: toBridgeColorGrading(nextGrading),
-      });
-    },
-    [previewIframeRef, target],
-  );
-
-  const postCompare = useCallback(
-    (enabled: boolean) => {
-      postRuntimeControlMessage(
-        previewIframeRef?.current?.contentWindow,
-        "set-color-grading-compare",
-        {
-          target,
-          compare: { enabled, position: 1, lineWidth: 0 },
-        },
-      );
-    },
-    [previewIframeRef, target],
-  );
-
-  useEffect(() => {
-    const iframe = previewIframeRef?.current;
-    if (!iframe) return;
-    const refreshAndReplay = () => {
-      const nextGrading = latestGradingRef.current;
-      const active = isHfColorGradingActive(nextGrading);
-      if (active) postColorGrading(nextGrading);
-      postCompare(compareEnabledRef.current && active);
-      scheduleRuntimeStatusRefresh();
-    };
-    const onMessage = (event: MessageEvent) => {
-      if (event.source !== iframe.contentWindow) return;
-      const data = event.data as { source?: unknown; type?: unknown } | null;
-      if (data?.source !== "hf-preview" || data.type !== "ready") return;
-      if (!acceptStudioRuntimeMessage(data)) return;
-      refreshAndReplay();
-    };
-    iframe.addEventListener("load", refreshAndReplay);
-    window.addEventListener("message", onMessage);
-    const timer = window.setTimeout(refreshAndReplay, 80);
-    return () => {
-      iframe.removeEventListener("load", refreshAndReplay);
-      window.removeEventListener("message", onMessage);
-      window.clearTimeout(timer);
-    };
-  }, [postColorGrading, postCompare, previewIframeRef, scheduleRuntimeStatusRefresh]);
-
-  useEffect(
-    () => () => {
-      postCompare(false);
-    },
-    [postCompare],
-  );
-
-  const commitColorGrading = useCallback(
-    (nextGrading: NormalizedHfColorGrading) => {
-      setGrading(nextGrading);
-      setRuntimeStatus({ state: "pending", message: "Updating shader" });
-      postColorGrading(nextGrading);
-      const active = isHfColorGradingActive(nextGrading);
-      if (compareEnabledRef.current) {
-        postCompare(active);
-        if (!active) setCompareEnabled(false);
-      }
-      scheduleRuntimeStatusRefresh();
-      if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
-      pendingPersistValueRef.current = isHfColorGradingActive(nextGrading)
-        ? serializeHfColorGrading(nextGrading)
-        : null;
-      persistTimerRef.current = setTimeout(() => {
-        const value = pendingPersistValueRef.current;
-        pendingPersistValueRef.current = undefined;
-        persistTimerRef.current = null;
-        void persistColorGradingValue(value ?? null);
-      }, 350);
-    },
-    [persistColorGradingValue, postColorGrading, postCompare, scheduleRuntimeStatusRefresh],
-  );
-
-  const commitCompare = useCallback(
-    (enabled: boolean) => {
-      const nextEnabled = enabled && isHfColorGradingActive(grading);
-      setCompareEnabled(nextEnabled);
-      if (nextEnabled) postColorGrading(grading);
-      postCompare(nextEnabled);
-      scheduleRuntimeStatusRefresh();
-    },
-    [grading, postColorGrading, postCompare, scheduleRuntimeStatusRefresh],
-  );
-
-  const applyToScope = useCallback(async () => {
-    if (!onApplyScope || applyBusy) return;
-    setApplyBusy(true);
-    try {
-      const value = isHfColorGradingActive(grading) ? serializeHfColorGrading(grading) : null;
-      await onApplyScope(applyScope, value);
-    } finally {
-      setApplyBusy(false);
-    }
-  }, [applyBusy, applyScope, grading, onApplyScope]);
+  const track = useTrackDesignInput();
+  const {
+    grading,
+    compareEnabled,
+    applyScope,
+    applyBusy,
+    runtimeStatus,
+    mediaMetadata,
+    commitColorGrading,
+    commitCompare,
+    setApplyScope,
+    applyToScope,
+    resetGrading,
+  } = useColorGradingController({
+    projectId,
+    element,
+    previewIframeRef,
+    onSetAttributeLive,
+    onApplyScope,
+  });
 
   return (
     <Section
@@ -516,7 +191,8 @@ export function ColorGradingSection({
             type="button"
             onClick={(event) => {
               event.stopPropagation();
-              commitColorGrading(defaultColorGrading());
+              track("button", "Reset color grading");
+              resetGrading();
             }}
             className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded text-panel-text-4 transition-colors hover:bg-panel-hover hover:text-panel-text-1"
             title="Reset color grading"
@@ -537,7 +213,10 @@ export function ColorGradingSection({
         <div className="mt-4 grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-2">
           <select
             value={applyScope}
-            onChange={(event) => setApplyScope(event.currentTarget.value as typeof applyScope)}
+            onChange={(event) => {
+              track("select", "Apply scope");
+              setApplyScope(event.currentTarget.value as typeof applyScope);
+            }}
             disabled={applyBusy}
             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 disabled:cursor-not-allowed disabled:opacity-50"
             title="Choose where to copy these color grading settings"
@@ -550,6 +229,7 @@ export function ColorGradingSection({
             disabled={applyBusy}
             onClick={(event) => {
               event.stopPropagation();
+              track("button", "Apply color grading scope");
               void applyToScope();
             }}
             className="h-8 rounded-md bg-panel-input px-3 text-[11px] font-medium text-panel-text-2 transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-50"