@hyperframes/studio 0.7.71 → 0.7.73

package/src/components/editor/PropertyPanelFlat.tsx

@@ -23,6 +23,15 @@ import {
   FlatColorGradingAccessory,
   FlatColorGradingSection,
 } from "./propertyPanelFlatColorGradingSection";
+import {
+  activeColorGradingEffectCount,
+  FlatEffectsAccessory,
+  FlatEffectsSection,
+} from "./propertyPanelFlatEffectsSection";
+import {
+  deriveMediaOverlayPlacement,
+  FlatOverlaysSection,
+} from "./propertyPanelFlatOverlaysSection";
 
 type EditingSections = ReturnType<typeof resolveEditingSections>;
 
@@ -34,11 +43,7 @@ type FlatGroupDescriptor = {
   content: ReactNode;
 };
 
-// Type-only fallback for the Motion effect-card callbacks. Used solely to
-// satisfy FlatMotionSection's required-callback shape when the effect list is
-// gated off (showEffects === false, so none of these are ever invoked). Keeps
-// the gated-off path free of `!` non-null assertions — the real, narrowed
-// handlers flow through only when the double-gate below passes.
+// Required callback shape for the gated-off Motion effect list.
 const EMPTY_GSAP_EFFECT_HANDLERS = {
   onAddAnimation: () => {},
   onUpdateProperty: () => {},
@@ -48,15 +53,7 @@ const EMPTY_GSAP_EFFECT_HANDLERS = {
   onRemoveProperty: () => {},
 };
 
-/**
- * The flat "Ledger" inspector shell (design_handoff_studio_inspector).
- *
- * Extracted from PropertyPanel so that file stays under the 600-LOC gate
- * (same one-directional-import precedent as FlatTextSection). Rendered only
- * when STUDIO_FLAT_INSPECTOR_ENABLED is on; owns the one-open group state.
- *
- * The Text/Style/Layout/Motion/Media/Grade groups share the one-open accordion.
- */
+/** The flat inspector shell with one shared open-group state. */
 // fallow-ignore-next-line complexity
 export function PropertyPanelFlat({
   element,
@@ -93,6 +90,7 @@ export function PropertyPanelFlat({
   onAskAgent,
   onToggleElementHidden,
   onImportAssets,
+  onAddMediaOverlay,
   onImportFonts,
   recordingState,
   recordingDuration,
@@ -113,10 +111,7 @@ export function PropertyPanelFlat({
   currentTime,
   animIdForProp,
   gsapRuntimeValues,
-  // Renamed: PropertyPanel.tsx still computes/passes these for its own legacy
-  // (non-flat) panel, but the flat path recomputes its own basis below via
-  // deriveElementTiming so it agrees with Motion's Timing row — ignore the
-  // parent's naive `elDuration ?? 1` fallback.
+  // The flat path derives timing consistently with its Motion section.
   elStart: _elStart,
   elDuration: _elDuration,
   onCommitAnimatedProperty,
@@ -164,6 +159,7 @@ export function PropertyPanelFlat({
   | "onAskAgent"
   | "onToggleElementHidden"
   | "onImportAssets"
+  | "onAddMediaOverlay"
   | "onImportFonts"
   | "fontAssets"
   | "gsapAnimations"
@@ -187,9 +183,6 @@ export function PropertyPanelFlat({
   | "recordingDuration"
   | "onToggleRecording"
 > &
-  // Layout-group values (Plan 3a Task 5). All are derived locals or handlers in
-  // PropertyPanel; compose their exact shapes from FlatLayoutSection's own props
-  // via Pick so a signature change there propagates here instead of drifting.
   Pick<
     Parameters<typeof FlatLayoutSection>[0],
     | "displayX"
@@ -227,12 +220,7 @@ export function PropertyPanelFlat({
     onCopyElementInfo: () => void;
     currentTime: number;
   }) {
-  // Lazy initializer: pick whichever group actually renders for this element
-  // (Text if text-editable, else Style if style-editable, else none open) so a
-  // style-only element doesn't start with everything collapsed. Only runs on
-  // mount — PropertyPanel.tsx keys <PropertyPanelFlat> by element identity so
-  // switching the selection re-mounts this component and re-derives the
-  // default instead of preserving stale state across unrelated elements.
+  // PropertyPanel keys this component by selection, so the default is per element.
   const [openGroupId, setOpenGroupId] = useState<string>(() =>
     isTextEditableSelection(element)
       ? "text"
@@ -243,33 +231,16 @@ export function PropertyPanelFlat({
           : "layout",
   );
 
-  // Tracks which group(s) are actively transitioning this toggle cycle, so
-  // their header/body gets the fast entrance animation (hf-flat-group-enter)
-  // and no one else's does. Deliberately NOT derived from remounting alone:
-  // FlatGroupHeader instances are keyed by group id and React normally
-  // preserves them across re-renders, but toggling a non-adjacent group still
-  // shifts the untouched collapsed siblings between the before/after-open
-  // slices below, and Chromium restarts a CSS animation on that kind of
-  // position shift even though nothing about the sibling actually changed.
-  // Gating on these ids (cleared shortly after the 120ms CSS animation
-  // finishes) keeps the animation scoped to only the groups that actually
-  // just toggled. Two ids, not one: the clicked (newly-opening/closing) group
-  // AND whichever group was open immediately before the click and got
-  // implicitly closed by it — both freshly-mounted headers need to animate.
+  // Animate only the groups that changed during this toggle cycle.
   const [justToggledIds, setJustToggledIds] = useState<string[]>([]);
   const justToggledTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const panelBodyRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     return () => {
       if (justToggledTimeoutRef.current) clearTimeout(justToggledTimeoutRef.current);
     };
   }, []);
 
-  // Grade group state. Called unconditionally (React rules-of-hooks) even when
-  // sections.colorGrading is false — unlike the legacy ColorGradingSection,
-  // which is only mounted when the section is active, PropertyPanelFlat is not
-  // remounted per-section so the hook must run every render. Shares one state
-  // object between the group's header accessory (compare/status/reset) and its
-  // body (the FlatColorGradingSection controls).
   const colorGradingController = useColorGradingController({
     projectId,
     element,
@@ -281,9 +252,7 @@ export function PropertyPanelFlat({
   const isTextEditable = isTextEditableSelection(element);
   const elementKind = sections.media ? "media" : element.textFields.length > 0 ? "text" : "other";
   const toggleOpen = (groupId: string) => {
-    // Capture what was open BEFORE this click (this render's closure over
-    // openGroupId), so the group that's about to be implicitly closed can be
-    // tracked too — not just the one the user clicked.
+    const isOpening = openGroupId !== groupId;
     const previousOpenGroupId = openGroupId;
     setOpenGroupId((current) => (current === groupId ? "" : groupId));
     const implicitlyClosedId =
@@ -291,34 +260,20 @@ export function PropertyPanelFlat({
     setJustToggledIds(implicitlyClosedId ? [groupId, implicitlyClosedId] : [groupId]);
     if (justToggledTimeoutRef.current) clearTimeout(justToggledTimeoutRef.current);
     justToggledTimeoutRef.current = setTimeout(() => setJustToggledIds([]), 200);
+    if (isOpening) {
+      requestAnimationFrame(() =>
+        panelBodyRef.current
+          ?.querySelector<HTMLElement>('[data-flat-group-open="true"]')
+          ?.scrollIntoView?.({ block: "start" }),
+      );
+    }
   };
-  // Basis for the Layout keyframe gutter (X/Y/W/H/Angle + 3D Transform) —
-  // must agree with Motion's Timing row (FlatTimingRow), which infers the
-  // range from animations when there's no explicit data-duration. Computed
-  // here (not threaded from PropertyPanel) both to keep that file under its
-  // 600-LOC gate and because element/gsapAnimations are already in scope.
   const { start: elStart, duration: elDuration } = deriveElementTiming(element, gsapAnimations);
-  // Trivial percentage→time seek, derived here rather than threaded from
-  // PropertyPanel (keeps that file under its 600-LOC gate).
   const seekFromKfPct = (pct: number) => onSeekToTime?.(elStart + (pct / 100) * elDuration);
-  // Playhead position within the SAME corrected elStart/elDuration basis as
-  // seekFromKfPct above — recomputed here (not threaded as `currentPct` from
-  // PropertyPanel, which still derives it against its own naive basis for the
-  // legacy panel) so KeyframeNavigation's diamond active-state and prev/next
-  // arrow targeting agree with where a keyframe click actually seeks to
-  // (follow-up fix to 684ec4e87, which corrected the seek basis but left this
-  // one still naive).
+  // Use the same timing basis for seeking and active keyframe state.
   const currentPct = elDuration > 0 ? ((currentTime - elStart) / elDuration) * 100 : 0;
 
-  // Motion group double-gate — reproduces the legacy PropertyPanel gate exactly:
-  //  • Timing (sections.timing) shows via resolveEditingSections, same as today.
-  //  • The effect-card list shows only when STUDIO_GSAP_PANEL_ENABLED is on AND
-  //    all five edit handlers are present (identical to PropertyPanel's legacy
-  //    `<GsapAnimationSection>` guard).
-  // Computing the narrowed handler bundle inside the `&&`-guarded ternary lets
-  // TypeScript prove each handler non-undefined without a `!` assertion; the
-  // noop bundle only fills the type when the gate is off (never invoked, since
-  // FlatMotionSection guards every call behind showEffects).
+  // Match the legacy Motion gate while preserving TypeScript narrowing.
   const showMotionTiming = Boolean(sections.timing);
   const gsapEffectHandlers =
     STUDIO_GSAP_PANEL_ENABLED &&
@@ -347,9 +302,6 @@ export function PropertyPanelFlat({
   const showMotionEffects = gsapEffectHandlers !== null;
   const showMotionGroup = showMotionTiming || showMotionEffects;
 
-  // Ordered group descriptors — one per FlatGroup this panel renders, gated by
-  // the same conditions the inline JSX used. Split below into before-open/
-  // open/after-open regions for the one-open accordion.
   const groups: FlatGroupDescriptor[] = [];
   if (isTextEditable) {
     groups.push({
@@ -372,8 +324,6 @@ export function PropertyPanelFlat({
     });
   }
   if (showEditableSections) {
-    // Number.isFinite guard (not `|| 1`): opacity 0 is a real value — an
-    // invisible element must summarize as 0%, not 100%.
     const opacityValue = parseFloat(styles.opacity ?? "1");
     const opacityPct = Math.round((Number.isFinite(opacityValue) ? opacityValue : 1) * 100);
     groups.push({
@@ -398,8 +348,6 @@ export function PropertyPanelFlat({
     groups.push({
       id: "layout",
       title: "Layout",
-      // No scrub accessory: FlatRow/CommitField has no pointer-drag scrubbing
-      // (wheel/arrow keys only) — advertising "drag values to scrub" here lies.
       summary: `${formatPxMetricValue(displayX)},${formatPxMetricValue(displayY)} · ${Math.round(displayW)}×${Math.round(displayH)}`,
       content: (
         <FlatLayoutSection
@@ -470,15 +418,57 @@ export function PropertyPanelFlat({
           assets={assets}
           onImportAssets={onImportAssets}
           onCommitColorGrading={colorGradingController.commitColorGrading}
+          onPreviewColorGrading={colorGradingController.previewColorGrading}
           applyScope={colorGradingController.applyScope}
           applyBusy={colorGradingController.applyBusy}
           onSetApplyScope={colorGradingController.setApplyScope}
           onApplyToScope={() => void colorGradingController.applyToScope()}
           onApplyScopeAvailable={Boolean(onApplyColorGradingScope)}
           mediaMetadata={colorGradingController.mediaMetadata}
+          presetPreviews={colorGradingController.presetPreviews}
+          onRequestPresetPreviews={colorGradingController.requestPresetPreviews}
+          captureGradedFrame={colorGradingController.captureGradedFrame}
+        />
+      ),
+    });
+    const activeEffects = activeColorGradingEffectCount(colorGradingController.grading);
+    const effectsProps = {
+      grading: colorGradingController.grading,
+      onCommitColorGrading: colorGradingController.commitColorGrading,
+    };
+    groups.push({
+      id: "effects",
+      title: "Effects",
+      accessory: <FlatEffectsAccessory {...effectsProps} />,
+      summary: activeEffects ? `${activeEffects} active` : "none",
+      content: (
+        <FlatEffectsSection
+          {...effectsProps}
+          previews={colorGradingController.effectPreviews}
+          presetPreviews={colorGradingController.presetPreviews}
+          onPreviewColorGrading={colorGradingController.previewColorGrading}
+          onRequestEffectPreviews={colorGradingController.requestEffectPreviews}
+          onRequestPresetPreviews={colorGradingController.requestPresetPreviews}
         />
       ),
     });
+    if (onAddMediaOverlay) {
+      groups.push({
+        id: "overlays",
+        title: "Overlays",
+        summary: "add layer",
+        content: (
+          <FlatOverlaysSection
+            onAddOverlay={(blockName) =>
+              onAddMediaOverlay(
+                blockName,
+                deriveMediaOverlayPlacement(element, { start: elStart, duration: elDuration }),
+              )
+            }
+          />
+        ),
+      });
+    }
   }
   if (sections.media) {
     groups.push({
@@ -499,13 +489,6 @@ export function PropertyPanelFlat({
     });
   }
 
-  // Fixed-headers + scrollable-open-section layout (design_handoff
-  // scrollable-open-section, replaces the prior sticky-stacking mechanism):
-  // collapsed headers before/after the open group render in normal document
-  // flow and never move. Only the open group's own body content scrolls, in
-  // a dedicated region between the two fixed header stacks. When no group is
-  // open, every group is just a collapsed header — there's no scrollable
-  // middle region at all, since nothing is expanded.
   const openIndex = groups.findIndex((g) => g.id === openGroupId);
   const beforeOpen = openIndex === -1 ? groups : groups.slice(0, openIndex);
   const openGroup = openIndex === -1 ? null : groups[openIndex];
@@ -532,7 +515,11 @@ export function PropertyPanelFlat({
             showUngroup={Boolean(onUngroup && element.dataAttributes["hf-group"] != null)}
           />
         </DesignPanelInputProvider>
-        <div data-flat-panel-body="true" className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+        <div
+          ref={panelBodyRef}
+          data-flat-panel-body="true"
+          className="flex min-h-0 flex-1 flex-col overflow-y-auto"
+        >
           {beforeOpen.map((g) => (
             <DesignPanelInputProvider key={g.id} section={slugifyDesignInput(g.title)}>
               <FlatGroupHeader
@@ -546,7 +533,7 @@ export function PropertyPanelFlat({
           ))}
           {openGroup && (
             <DesignPanelInputProvider section={slugifyDesignInput(openGroup.title)}>
-              <div data-flat-group-open="true" className="flex min-h-0 flex-1 flex-col">
+              <div data-flat-group-open="true" className="flex min-h-[180px] flex-none flex-col">
                 <FlatGroupHeader
                   title={openGroup.title}
                   isOpen

package/src/components/editor/colorGradingFrameAnalysis.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from "vitest";
+import {
+  normalizeHfColorGrading,
+  type HfColorGradingSecondary,
+} from "@hyperframes/core/color-grading";
+import {
+  analyzeColorGradingFrame,
+  buildColorGradingSecondaryMatte,
+  colorGradingSecondaryMask,
+  sampleColorGradingSecondary,
+} from "./colorGradingFrameAnalysis";
+
+function pixels(...rgba: number[]): Uint8ClampedArray {
+  return new Uint8ClampedArray(rgba);
+}
+
+function secondaryKey(key: HfColorGradingSecondary["key"]) {
+  const secondary = normalizeHfColorGrading({
+    secondaries: [{ key, correction: {} }],
+  })?.secondaries?.[0];
+  if (!secondary) throw new Error("Expected a normalized secondary");
+  return secondary.key;
+}
+
+describe("colorGradingFrameAnalysis", () => {
+  it("places black and white at the Rec.709 scope endpoints", () => {
+    const result = analyzeColorGradingFrame(pixels(0, 0, 0, 255, 255, 255, 255, 255), 2, 1);
+
+    expect(result.histogram[0]).toBe(255);
+    expect(result.histogram[255]).toBe(255);
+    expect(result.waveform[255]).toBe(255);
+    expect(result.waveform[256]).toBe(255);
+    expect(result.parade.reduce((sum, value) => sum + value, 0)).toBe(6 * 255);
+  });
+
+  it("alpha-weights all scopes and excludes transparent pixels", () => {
+    const result = analyzeColorGradingFrame(pixels(0, 0, 0, 0, 255, 255, 255, 64), 2, 1);
+
+    expect(result.histogram.reduce((sum, value) => sum + value, 0)).toBe(64);
+    expect(result.waveform.reduce((sum, value) => sum + value, 0)).toBe(64);
+    expect(result.parade.reduce((sum, value) => sum + value, 0)).toBe(3 * 64);
+    expect(result.vectorscope.reduce((sum, value) => sum + value, 0)).toBe(64);
+  });
+
+  it("averages hue circularly when an eyedropper sample crosses red", () => {
+    const sampled = sampleColorGradingSecondary(
+      pixels(255, 0, 10, 255, 255, 10, 0, 255),
+      2,
+      1,
+      0.5,
+      0,
+      1,
+    );
+
+    expect(sampled).not.toBeNull();
+    if (!sampled) throw new Error("Expected a sample");
+    expect(Math.min(sampled.hue.center, 360 - sampled.hue.center)).toBeLessThan(3);
+    expect(sampled.hue.range).toBe(18);
+  });
+
+  it("does not invent a hue qualifier for a neutral sample", () => {
+    const sampled = sampleColorGradingSecondary(pixels(128, 128, 128, 255), 1, 1, 0, 0);
+
+    expect(sampled?.hue).toEqual({ center: 0, range: 180, softness: 0 });
+    expect(sampled?.saturation.max).toBeCloseTo(0.2);
+  });
+
+  it("matches the runtime softness on saturation and luma feather edges", () => {
+    const saturationKey = secondaryKey({
+      hue: { center: 0, range: 180, softness: 0 },
+      saturation: { min: 0.5, max: 1, softness: 0.4 },
+      luma: { min: 0, max: 1, softness: 0 },
+    });
+    const lumaKey = secondaryKey({
+      hue: { center: 0, range: 180, softness: 0 },
+      saturation: { min: 0, max: 1, softness: 0 },
+      luma: { min: 0.5, max: 1, softness: 0.4 },
+    });
+
+    expect(colorGradingSecondaryMask(255, 204, 204, saturationKey)).toBeCloseTo(0.15625, 5);
+    expect(colorGradingSecondaryMask(51, 51, 51, lumaKey)).toBeCloseTo(0.15625, 5);
+  });
+
+  it("builds an alpha-preserving black-and-white selection matte", () => {
+    const key = secondaryKey({
+      hue: { center: 0, range: 15, softness: 0 },
+      saturation: { min: 0.5, max: 1, softness: 0 },
+      luma: { min: 0, max: 1, softness: 0 },
+    });
+    const matte = buildColorGradingSecondaryMatte(
+      pixels(255, 0, 0, 255, 0, 255, 0, 128, 0, 0, 0, 0),
+      3,
+      1,
+      key,
+    );
+
+    expect([...matte.slice(0, 4)]).toEqual([255, 255, 255, 255]);
+    expect([...matte.slice(4, 8)]).toEqual([0, 0, 0, 128]);
+    expect([...matte.slice(8, 12)]).toEqual([0, 0, 0, 0]);
+  });
+});

package/src/components/editor/colorGradingFrameAnalysis.ts

@@ -0,0 +1,203 @@
+import {
+  calculateHfColorGradingSecondaryMask,
+  type NormalizedHfColorGradingSecondary,
+} from "@hyperframes/core/color-grading";
+import { clampNumber } from "../../utils/studioHelpers";
+
+const BYTE_MAX = 255;
+const SCOPE_SIZE = 256;
+
+export type ColorGradingScopeMode = "histogram" | "waveform" | "parade" | "vectorscope";
+
+export interface ColorGradingScopeAnalysis {
+  width: number;
+  histogram: Uint32Array;
+  waveform: Uint32Array;
+  parade: Uint32Array;
+  vectorscope: Uint32Array;
+}
+
+export async function readColorGradingFramePixels(frame: {
+  dataUrl: string;
+  width: number;
+  height: number;
+}): Promise<Uint8ClampedArray | null> {
+  const image = new Image();
+  image.src = frame.dataUrl;
+  await image.decode();
+  const canvas = document.createElement("canvas");
+  canvas.width = frame.width;
+  canvas.height = frame.height;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) return null;
+  context.drawImage(image, 0, 0, frame.width, frame.height);
+  return context.getImageData(0, 0, frame.width, frame.height).data;
+}
+
+function rec709Luma(red: number, green: number, blue: number): number {
+  return red * 0.2126 + green * 0.7152 + blue * 0.0722;
+}
+
+function rgbToHsv(red: number, green: number, blue: number) {
+  const max = Math.max(red, green, blue);
+  const min = Math.min(red, green, blue);
+  const chroma = max - min;
+  let hue = 0;
+  if (chroma > 0) {
+    if (max === red) hue = ((green - blue) / chroma) % 6;
+    else if (max === green) hue = (blue - red) / chroma + 2;
+    else hue = (red - green) / chroma + 4;
+    hue = (hue * 60 + 360) % 360;
+  }
+  return {
+    hue,
+    saturation: max === 0 ? 0 : chroma / max,
+    value: max,
+  };
+}
+
+export function colorGradingSecondaryMask(
+  red: number,
+  green: number,
+  blue: number,
+  key: NormalizedHfColorGradingSecondary["key"],
+): number {
+  const hsv = rgbToHsv(red / BYTE_MAX, green / BYTE_MAX, blue / BYTE_MAX);
+  return calculateHfColorGradingSecondaryMask(
+    hsv.hue,
+    hsv.saturation,
+    rec709Luma(red / BYTE_MAX, green / BYTE_MAX, blue / BYTE_MAX),
+    key,
+  );
+}
+
+export function buildColorGradingSecondaryMatte(
+  pixels: Uint8ClampedArray,
+  width: number,
+  height: number,
+  key: NormalizedHfColorGradingSecondary["key"],
+): Uint8ClampedArray {
+  const matte = new Uint8ClampedArray(width * height * 4);
+  for (let offset = 0; offset < pixels.length; offset += 4) {
+    const alpha = pixels[offset + 3] ?? 0;
+    const mask =
+      alpha === 0
+        ? 0
+        : colorGradingSecondaryMask(
+            pixels[offset] ?? 0,
+            pixels[offset + 1] ?? 0,
+            pixels[offset + 2] ?? 0,
+            key,
+          );
+    const value = Math.round(mask * BYTE_MAX);
+    matte[offset] = value;
+    matte[offset + 1] = value;
+    matte[offset + 2] = value;
+    matte[offset + 3] = alpha;
+  }
+  return matte;
+}
+
+function pixelOffset(width: number, x: number, y: number): number {
+  return (y * width + x) * 4;
+}
+
+function byteIndex(value: number): number {
+  return Math.round(clampNumber(value, 0, 1) * BYTE_MAX);
+}
+
+export function analyzeColorGradingFrame(
+  pixels: Uint8ClampedArray,
+  width: number,
+  height: number,
+): ColorGradingScopeAnalysis {
+  const histogram = new Uint32Array(SCOPE_SIZE);
+  const waveform = new Uint32Array(width * SCOPE_SIZE);
+  const parade = new Uint32Array(width * SCOPE_SIZE * 3);
+  const vectorscope = new Uint32Array(SCOPE_SIZE * SCOPE_SIZE);
+
+  for (let y = 0; y < height; y += 1) {
+    for (let x = 0; x < width; x += 1) {
+      const offset = pixelOffset(width, x, y);
+      const alpha = pixels[offset + 3] ?? 0;
+      if (alpha === 0) continue;
+      const red = (pixels[offset] ?? 0) / BYTE_MAX;
+      const green = (pixels[offset + 1] ?? 0) / BYTE_MAX;
+      const blue = (pixels[offset + 2] ?? 0) / BYTE_MAX;
+      const normalizedLuma = rec709Luma(red, green, blue);
+      const luma = byteIndex(normalizedLuma);
+      histogram[luma] += alpha;
+      waveform[x * SCOPE_SIZE + (BYTE_MAX - luma)] += alpha;
+      parade[x * SCOPE_SIZE + (BYTE_MAX - byteIndex(red))] += alpha;
+      parade[width * SCOPE_SIZE + x * SCOPE_SIZE + (BYTE_MAX - byteIndex(green))] += alpha;
+      parade[width * SCOPE_SIZE * 2 + x * SCOPE_SIZE + (BYTE_MAX - byteIndex(blue))] += alpha;
+
+      const chromaBlue = (blue - normalizedLuma) / 1.8556;
+      const chromaRed = (red - normalizedLuma) / 1.5748;
+      const vectorX = byteIndex(chromaBlue + 0.5);
+      const vectorY = BYTE_MAX - byteIndex(chromaRed + 0.5);
+      vectorscope[vectorY * SCOPE_SIZE + vectorX] += alpha;
+    }
+  }
+
+  return { width, histogram, waveform, parade, vectorscope };
+}
+
+export function sampleColorGradingSecondary(
+  pixels: Uint8ClampedArray,
+  width: number,
+  height: number,
+  x: number,
+  y: number,
+  radius = 2,
+): NormalizedHfColorGradingSecondary["key"] | null {
+  const minX = clampNumber(Math.floor(x) - radius, 0, width - 1);
+  const maxX = clampNumber(Math.floor(x) + radius, 0, width - 1);
+  const minY = clampNumber(Math.floor(y) - radius, 0, height - 1);
+  const maxY = clampNumber(Math.floor(y) + radius, 0, height - 1);
+  let hueX = 0;
+  let hueY = 0;
+  let saturation = 0;
+  let luma = 0;
+  let weight = 0;
+
+  for (let sampleY = minY; sampleY <= maxY; sampleY += 1) {
+    for (let sampleX = minX; sampleX <= maxX; sampleX += 1) {
+      const offset = pixelOffset(width, sampleX, sampleY);
+      const alpha = (pixels[offset + 3] ?? 0) / BYTE_MAX;
+      if (alpha === 0) continue;
+      const red = (pixels[offset] ?? 0) / BYTE_MAX;
+      const green = (pixels[offset + 1] ?? 0) / BYTE_MAX;
+      const blue = (pixels[offset + 2] ?? 0) / BYTE_MAX;
+      const hsv = rgbToHsv(red, green, blue);
+      const hueRadians = (hsv.hue * Math.PI) / 180;
+      const hueWeight = hsv.saturation * alpha;
+      hueX += Math.cos(hueRadians) * hueWeight;
+      hueY += Math.sin(hueRadians) * hueWeight;
+      saturation += hsv.saturation * alpha;
+      luma += rec709Luma(red, green, blue) * alpha;
+      weight += alpha;
+    }
+  }
+
+  if (weight === 0) return null;
+  const averageHue = ((Math.atan2(hueY, hueX) * 180) / Math.PI + 360) % 360;
+  const averageSaturation = saturation / weight;
+  const averageLuma = luma / weight;
+  const neutralSample = averageSaturation < 0.02;
+  return {
+    hue: neutralSample
+      ? { center: 0, range: 180, softness: 0 }
+      : { center: averageHue, range: 18, softness: 12 },
+    saturation: {
+      min: clampNumber(averageSaturation - 0.2, 0, 1),
+      max: clampNumber(averageSaturation + 0.2, 0, 1),
+      softness: 0.1,
+    },
+    luma: {
+      min: clampNumber(averageLuma - 0.2, 0, 1),
+      max: clampNumber(averageLuma + 0.2, 0, 1),
+      softness: 0.1,
+    },
+  };
+}

package/src/components/editor/colorGradingScopePatch.test.ts

@@ -5,15 +5,15 @@ describe("patchMediaColorGradingInHtml", () => {
   it("adds color grading to video and image tags only", () => {
     const { html, count } = patchMediaColorGradingInHtml(
       `<div><video id="v"></video><img id="i" /><audio id="a"></audio></div>`,
-      `{"preset":"warm-daylight"}`,
+      `{"preset":"clean-studio"}`,
     );
 
     expect(count).toBe(2);
     expect(html).toContain(
-      `video id="v" data-color-grading="{&quot;preset&quot;:&quot;warm-daylight&quot;}"`,
+      `video id="v" data-color-grading="{&quot;preset&quot;:&quot;clean-studio&quot;}"`,
     );
     expect(html).toContain(
-      `img id="i" data-color-grading="{&quot;preset&quot;:&quot;warm-daylight&quot;}"`,
+      `img id="i" data-color-grading="{&quot;preset&quot;:&quot;clean-studio&quot;}"`,
     );
     expect(html).toContain(`<audio id="a"></audio>`);
   });