@hyperframes/studio 0.7.58 → 0.7.60

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"

package/src/components/editor/propertyPanelColorGradingSlider.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Minus, Plus, RotateCcw, Settings } from "../../icons/SystemIcons";
 import { LABEL } from "./propertyPanelHelpers";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 
 const SLIDER_THUMB_SIZE = 10;
 const SLIDER_THUMB_RADIUS = SLIDER_THUMB_SIZE / 2;
@@ -59,9 +60,11 @@ export function ColorGradingSliderControl({
     onClick: () => void;
   };
 }) {
+  const track = useTrackDesignInput();
   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 interactionChangedRef = useRef(false);
   const valueRef = useRef(value);
   valueRef.current = value;
 
@@ -92,9 +95,13 @@ export function ColorGradingSliderControl({
     (nextValue: number) => {
       const clamped = setLocalDraft(nextValue);
       if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+      if (interactionChangedRef.current) {
+        interactionChangedRef.current = false;
+        track("slider", label);
+      }
       if (clamped !== valueRef.current) onCommit(clamped);
     },
-    [onCommit, setLocalDraft],
+    [label, onCommit, setLocalDraft, track],
   );
 
   const scheduleCommit = useCallback(
@@ -115,6 +122,7 @@ export function ColorGradingSliderControl({
   const commitInputDraft = useCallback(() => {
     const parsed = parseNumericInput(inputValue, scale);
     if (parsed === null) {
+      interactionChangedRef.current = false;
       setInputDraft(null);
       return;
     }
@@ -123,6 +131,7 @@ export function ColorGradingSliderControl({
 
   const nudge = useCallback(
     (direction: -1 | 1) => {
+      interactionChangedRef.current = true;
       commitDraft(draft + step * direction);
     },
     [commitDraft, draft, step],
@@ -166,6 +175,7 @@ export function ColorGradingSliderControl({
             aria-label={`Reset ${label}`}
             onClick={(event) => {
               event.stopPropagation();
+              track("button", `Reset ${label}`);
               onReset();
             }}
             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 disabled:cursor-not-allowed disabled:opacity-40"
@@ -205,7 +215,10 @@ export function ColorGradingSliderControl({
           value={draft}
           disabled={disabled}
           aria-label={label}
-          onChange={(event) => scheduleCommit(Number(event.currentTarget.value))}
+          onChange={(event) => {
+            interactionChangedRef.current = true;
+            scheduleCommit(Number(event.currentTarget.value));
+          }}
           onMouseUp={() => commitDraft(draft)}
           onTouchEnd={() => commitDraft(draft)}
           onBlur={() => commitDraft(draft)}
@@ -223,9 +236,10 @@ export function ColorGradingSliderControl({
             max={max / scale}
             step={step / scale}
             disabled={disabled}
-            onChange={(event) =>
-              setInputDraft({ value: event.currentTarget.value, source: valueRef.current })
-            }
+            onChange={(event) => {
+              interactionChangedRef.current = true;
+              setInputDraft({ value: event.currentTarget.value, source: valueRef.current });
+            }}
             onBlur={commitInputDraft}
             onKeyDown={(event) => {
               if (event.key === "Enter") {

package/src/components/editor/propertyPanelFill.tsx

@@ -16,6 +16,7 @@ import {
   SliderControl,
 } from "./propertyPanelPrimitives";
 import { ColorField } from "./propertyPanelColor";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 
 /* ------------------------------------------------------------------ */
 /*  Asset path helpers                                                 */
@@ -87,6 +88,7 @@ export function ImageFillField({
   onCommit: (nextValue: string) => void;
   onImportAssets?: (files: FileList) => Promise<string[]>;
 }) {
+  const track = useTrackDesignInput();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [uploading, setUploading] = useState(false);
   const imageAssets = useMemo(() => assets.filter((a) => IMAGE_EXT.test(a)), [assets]);
@@ -102,7 +104,10 @@ export function ImageFillField({
     try {
       const uploaded = await onImportAssets(files);
       const nextImage = uploaded.find((a) => IMAGE_EXT.test(a));
-      if (nextImage) onCommit(`url("${toProjectRootAssetPath(nextImage)}")`);
+      if (nextImage) {
+        track("button", "Upload image");
+        onCommit(`url("${toProjectRootAssetPath(nextImage)}")`);
+      }
     } finally {
       setUploading(false);
     }
@@ -156,6 +161,7 @@ export function ImageFillField({
                 disabled={disabled}
                 onChange={(e) => {
                   const next = e.target.value;
+                  track("select", "Project asset");
                   if (!next) {
                     onCommit("none");
                     return;
@@ -205,6 +211,7 @@ export function GradientField({
   disabled?: boolean;
   onCommit: (nextValue: string) => void;
 }) {
+  const track = useTrackDesignInput();
   const previewRef = useRef<HTMLDivElement | null>(null);
   const parsed = parseGradient(value) ?? buildDefaultGradientModel(fallbackColor);
 
@@ -226,11 +233,13 @@ export function GradientField({
               ? Math.min(100, (parsed.stops.at(-1)?.position ?? 90) + 10)
               : 100,
           );
+    track("button", "Add gradient stop");
     commit(nextGradient);
   };
 
   const removeStop = (index: number) => {
     if (parsed.stops.length <= 2) return;
+    track("button", `Remove gradient stop ${index + 1}`);
     commit({ ...parsed, stops: parsed.stops.filter((_, i) => i !== index) });
   };
 
@@ -263,6 +272,7 @@ export function GradientField({
         </div>
         <div className="flex min-w-0 flex-wrap items-center gap-2">
           <SegmentedControl
+            trackName="Gradient type"
             disabled={disabled}
             value={parsed.kind}
             onChange={(next) => patch({ kind: next as GradientModel["kind"] })}
@@ -277,7 +287,10 @@ export function GradientField({
               type="checkbox"
               checked={parsed.repeating}
               disabled={disabled}
-              onChange={(e) => patch({ repeating: e.target.checked })}
+              onChange={(e) => {
+                track("toggle", "Repeat gradient");
+                patch({ repeating: e.target.checked });
+              }}
               className="h-4 w-4 rounded border-neutral-700 bg-neutral-950 text-panel-accent focus:ring-panel-accent"
             />
             Repeat
@@ -285,15 +298,16 @@ export function GradientField({
           <button
             type="button"
             disabled={disabled}
-            onClick={() =>
+            onClick={() => {
+              track("button", "Reverse gradient");
               commit({
                 ...parsed,
                 stops: [...parsed.stops].reverse().map((stop) => ({
                   ...stop,
                   position: 100 - stop.position,
                 })),
-              })
-            }
+              });
+            }}
             className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-600"
           >
             <RotateCcw size={12} />
@@ -306,6 +320,7 @@ export function GradientField({
         <div className="grid gap-1.5">
           <span className={LABEL}>{parsed.kind === "linear" ? "Angle" : "Start angle"}</span>
           <SliderControl
+            trackName={parsed.kind === "linear" ? "Angle" : "Start angle"}
             value={parsed.angle}
             min={0}
             max={360}
@@ -342,6 +357,7 @@ export function GradientField({
           <div className="grid min-w-0 gap-1.5">
             <span className={LABEL}>Center X</span>
             <SliderControl
+              trackName="Center X"
               value={parsed.centerX}
               min={0}
               max={100}
@@ -355,6 +371,7 @@ export function GradientField({
           <div className="grid min-w-0 gap-1.5">
             <span className={LABEL}>Center Y</span>
             <SliderControl
+              trackName="Center Y"
               value={parsed.centerY}
               min={0}
               max={100}