From 5dd9efe5558667c8d230c9ed37bc3013c544e7fa Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Tue, 14 Jul 2026 01:06:52 -0700
Subject: [PATCH 1/8] fix(studio): resolve 8 confirmed adversarial-review
 findings across the flat-inspector stack
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes issues raised in the Deepwork re-review of #2120-#2190 that weren't
covered by #2225's earlier fix pass:

- useColorGradingController: reset grading/compare/mediaMetadata state (and
  cancel pending persist/status timers) when selection changes to a
  different element — this hook is called unconditionally on every render
  (unlike legacy ColorGradingSection, remounted via a selectionIdentityKey
  React key), so switching selection reused the previous element's state.
- useColorGradingController: stop permanently caching a non-OK
  /media/metadata response as null — a transient server error poisoned the
  HDR banner for that asset for the whole page lifetime.
- FlatSelectRow: preserve a valid authored value outside the preset list
  (e.g. mix-blend-mode: difference, an arbitrary object-position) instead of
  silently misrepresenting it as the first preset — touching the control
  would overwrite real persisted state.
- FlatSlider: the throttled trailing commit now reads onCommit through a
  ref updated every render instead of closing over it at schedule time — a
  caller whose onCommit spreads other current state (Grade's per-detail
  commits) could otherwise have a delayed commit revert whatever the user
  changed on a different control in the same 40ms window.
- FlatSlider: flush a still-queued trailing commit on unmount instead of
  dropping it, and disable the reset button when the slider itself is
  disabled.
- FlatSlider: add touch-action: none to the track so touch drags don't
  compete with page scroll.
- FlatColorGradingAccessory: clean up the compare-hold's window listeners
  on unmount, not only on release — switching selection mid-hold used to
  leak them.
- Align (flat Text): re-clicking the option already visually active for a
  logical start/end value no longer rewrites it to the physical left/right,
  preserving RTL semantics.
- FlatSegmentedRow: give every option an accessible name and aria-pressed
  state — two visually-identical glyph buttons (upright/italic "A") had no
  way to be told apart by assistive tech.
- PropertyPanelFlat: the panel body falls back to its own scroll when the
  collapsed group headers alone exceed the available height, so groups
  can't become permanently unreachable in a short pane.

New regression tests for all of the above; full studio suite at the known
pre-existing baseline (55 failures unrelated to this stack).
---
 .../components/editor/PropertyPanelFlat.tsx   |   2 +-
 .../propertyPanelFlatColorGradingSection.tsx  |  16 +-
 .../editor/propertyPanelFlatLayoutSection.tsx |   4 +-
 .../editor/propertyPanelFlatMaskInsetRows.tsx | 102 +++++++++++
 .../propertyPanelFlatPrimitives.test.tsx      | 172 +++++++++++++++++-
 .../editor/propertyPanelFlatPrimitives.tsx    |  42 ++++-
 .../editor/propertyPanelFlatStyleSections.tsx | 102 +----------
 .../propertyPanelFlatTextSection.test.tsx     |  28 ++-
 .../editor/propertyPanelFlatTextSection.tsx   |  26 ++-
 .../editor/useColorGradingController.test.ts  | 135 ++++++++++++--
 .../editor/useColorGradingController.ts       |  63 ++++++-
 11 files changed, 550 insertions(+), 142 deletions(-)
 create mode 100644 packages/studio/src/components/editor/propertyPanelFlatMaskInsetRows.tsx

diff --git a/packages/studio/src/components/editor/PropertyPanelFlat.tsx b/packages/studio/src/components/editor/PropertyPanelFlat.tsx
index 90d7ed8698..fe914267d9 100644
--- a/packages/studio/src/components/editor/PropertyPanelFlat.tsx
+++ b/packages/studio/src/components/editor/PropertyPanelFlat.tsx
@@ -516,7 +516,7 @@ export function PropertyPanelFlat({
         onUngroup={onUngroup}
         showUngroup={Boolean(onUngroup && element.dataAttributes["hf-group"] != null)}
       />
-      <div data-flat-panel-body="true" className="flex min-h-0 flex-1 flex-col overflow-hidden">
+      <div data-flat-panel-body="true" className="flex min-h-0 flex-1 flex-col overflow-y-auto">
         {beforeOpen.map((g) => (
           <FlatGroupHeader
             key={g.id}
diff --git a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
index a02c2f0d3a..3018bcf1ff 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
   HF_COLOR_GRADING_PRESETS,
   isHfColorGradingActive,
@@ -32,6 +32,18 @@ export function FlatColorGradingAccessory({
 }) {
   const { grading, compareEnabled, runtimeStatus, commitCompare, resetGrading } = state;
   const gradingActive = isHfColorGradingActive(grading);
+  // Tracks the active hold's cleanup so it can be torn down on unmount too —
+  // without this, switching selection away mid-hold (unmounting this
+  // accessory) leaves the pointerup/pointercancel/blur listeners registered
+  // on `window` forever, each holding a closure over the old commitCompare.
+  const releaseRef = useRef<(() => void) | null>(null);
+  useEffect(
+    () => () => {
+      releaseRef.current?.();
+      releaseRef.current = null;
+    },
+    [],
+  );
 
   return (
     <span className="flex items-center gap-2.5">
@@ -50,7 +62,9 @@ export function FlatColorGradingAccessory({
             window.removeEventListener("pointerup", release);
             window.removeEventListener("pointercancel", release);
             window.removeEventListener("blur", release);
+            releaseRef.current = null;
           };
+          releaseRef.current = release;
           window.addEventListener("pointerup", release);
           window.addEventListener("pointercancel", release);
           window.addEventListener("blur", release);
diff --git a/packages/studio/src/components/editor/propertyPanelFlatLayoutSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatLayoutSection.tsx
index 0c7b0a2e4d..60988350e4 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatLayoutSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatLayoutSection.tsx
@@ -203,8 +203,8 @@ export function LayoutFlexBlock({
       <FlatSegmentedRow
         label="Direction"
         options={[
-          { key: "row", node: "→ Row", active: direction === "row" },
-          { key: "column", node: "Column", active: direction === "column" },
+          { key: "row", node: "→ Row", label: "Row", active: direction === "row" },
+          { key: "column", node: "Column", label: "Column", active: direction === "column" },
         ]}
         disabled={disabled}
         onChange={(next) => void onSetStyle("flex-direction", next)}
diff --git a/packages/studio/src/components/editor/propertyPanelFlatMaskInsetRows.tsx b/packages/studio/src/components/editor/propertyPanelFlatMaskInsetRows.tsx
new file mode 100644
index 0000000000..1dfb77cb71
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelFlatMaskInsetRows.tsx
@@ -0,0 +1,102 @@
+import {
+  buildInsetClipPathSides,
+  buildInsetClipPathValue,
+  formatNumericValue,
+  formatPxMetricValue,
+  getClipPathInsetPx,
+  inferClipPathPreset,
+  parseInsetClipPathSides,
+  parsePxMetricValue,
+  type ClipPathInsetSides,
+} from "./propertyPanelHelpers";
+import { FlatSlider } from "./propertyPanelFlatPrimitives";
+import { MetricField } from "./propertyPanelPrimitives";
+
+/* ------------------------------------------------------------------ */
+/*  Flat Mask inset — uniform slider + per-side fields                 */
+/*  (split out of propertyPanelFlatStyleSections.tsx to stay under the */
+/*  600-line file-size gate)                                           */
+/* ------------------------------------------------------------------ */
+
+export function FlatMaskInsetRows({
+  clipPathValue,
+  radiusValue,
+  disabled,
+  onSetStyle,
+}: {
+  clipPathValue: string;
+  radiusValue: number;
+  disabled: boolean;
+  onSetStyle: (prop: string, value: string) => void | Promise<void>;
+}) {
+  const clipPathPreset = inferClipPathPreset(clipPathValue);
+  const parsedClipInsets = parseInsetClipPathSides(clipPathValue);
+  const clipInsetValue = getClipPathInsetPx(clipPathValue);
+  const clipInsetSides = parsedClipInsets ?? {
+    top: clipInsetValue,
+    right: clipInsetValue,
+    bottom: clipInsetValue,
+    left: clipInsetValue,
+    radius: radiusValue,
+  };
+  const showClipInsetSides = clipPathPreset === "inset" || parsedClipInsets != null;
+
+  const commitClipInsetSide = (side: keyof ClipPathInsetSides, nextValue: string) => {
+    const next = parsePxMetricValue(nextValue);
+    if (next == null) return;
+    const sides: ClipPathInsetSides = {
+      top: clipInsetSides.top,
+      right: clipInsetSides.right,
+      bottom: clipInsetSides.bottom,
+      left: clipInsetSides.left,
+    };
+    sides[side] = next;
+    void onSetStyle("clip-path", buildInsetClipPathSides(sides, clipInsetSides.radius));
+  };
+
+  return (
+    <>
+      <FlatSlider
+        label="Mask inset"
+        value={clipInsetValue}
+        min={0}
+        max={Math.max(120, Math.ceil(clipInsetValue))}
+        step={1}
+        tier={clipInsetValue > 0 ? "explicitCustom" : "default"}
+        displayValue={`${formatNumericValue(clipInsetValue)}px`}
+        disabled={disabled}
+        onCommit={(next) =>
+          void onSetStyle("clip-path", buildInsetClipPathValue(next, radiusValue))
+        }
+      />
+      {showClipInsetSides && (
+        <div className="grid grid-cols-4 gap-2">
+          <MetricField
+            label="T"
+            value={formatPxMetricValue(clipInsetSides.top)}
+            disabled={disabled}
+            onCommit={(next) => commitClipInsetSide("top", next)}
+          />
+          <MetricField
+            label="R"
+            value={formatPxMetricValue(clipInsetSides.right)}
+            disabled={disabled}
+            onCommit={(next) => commitClipInsetSide("right", next)}
+          />
+          <MetricField
+            label="B"
+            value={formatPxMetricValue(clipInsetSides.bottom)}
+            disabled={disabled}
+            onCommit={(next) => commitClipInsetSide("bottom", next)}
+          />
+          <MetricField
+            label="L"
+            value={formatPxMetricValue(clipInsetSides.left)}
+            disabled={disabled}
+            onCommit={(next) => commitClipInsetSide("left", next)}
+          />
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
index 6fb1dad09d..09b1e1038d 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
@@ -89,8 +89,8 @@ describe("FlatSegmentedRow", () => {
       <FlatSegmentedRow
         label="Align"
         options={[
-          { key: "left", node: "L", active: false },
-          { key: "right", node: "R", active: true },
+          { key: "left", node: "L", label: "left", active: false },
+          { key: "right", node: "R", label: "right", active: true },
         ]}
         onChange={onChange}
       />,
@@ -105,6 +105,25 @@ describe("FlatSegmentedRow", () => {
     expect(onChange).toHaveBeenCalledWith("left");
     act(() => root.unmount());
   });
+
+  it("gives each option an accessible name and pressed state — glyphs alone (e.g. two 'A' buttons) aren't a valid accessible name", () => {
+    const { host, root } = renderInto(
+      <FlatSegmentedRow
+        label="Case · Style"
+        options={[
+          { key: "normal", node: "A", label: "upright", active: true },
+          { key: "italic", node: "A", label: "italic", active: false },
+        ]}
+        onChange={vi.fn()}
+      />,
+    );
+    const options = host.querySelectorAll<HTMLButtonElement>('[data-flat-segment="true"]');
+    expect(options[0]?.getAttribute("aria-label")).toBe("upright");
+    expect(options[0]?.getAttribute("aria-pressed")).toBe("true");
+    expect(options[1]?.getAttribute("aria-label")).toBe("italic");
+    expect(options[1]?.getAttribute("aria-pressed")).toBe("false");
+    act(() => root.unmount());
+  });
 });
 
 describe("FlatGroupHeader", () => {
@@ -554,6 +573,130 @@ describe("FlatSlider — Grade extensions", () => {
     act(() => root.unmount());
   });
 
+  it("disables the reset button when the slider itself is disabled", () => {
+    const onReset = vi.fn();
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Exposure"
+        value={20}
+        min={0}
+        max={100}
+        tier="explicitCustom"
+        displayValue="20"
+        disabled
+        onReset={onReset}
+        onCommit={vi.fn()}
+      />,
+    );
+    const resetButton = host.querySelector<HTMLButtonElement>('[data-flat-slider-reset="true"]');
+    expect(resetButton?.disabled).toBe(true);
+    act(() => resetButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onReset).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("a trailing throttled commit uses the current render's onCommit, not the one captured when it was scheduled", () => {
+    vi.useFakeTimers();
+    const onCommitA = vi.fn();
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Exposure"
+        value={0}
+        min={-100}
+        max={100}
+        tier="explicitCustom"
+        displayValue="0"
+        onCommit={onCommitA}
+      />,
+    );
+    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
+    if (!track) throw new Error("expected a track element");
+    Object.defineProperty(track, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 200, top: 0, height: 20, right: 200, bottom: 20 }),
+    });
+    act(() => {
+      // Leading-edge commit fires synchronously with onCommitA (clientX 150
+      // on a -100..100 track maps to 50, distinct from the initial value 0).
+      track.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, clientX: 150, pointerId: 1 }),
+      );
+    });
+    expect(onCommitA).toHaveBeenCalledTimes(1);
+    act(() => {
+      // Within the 40ms throttle window — queues a trailing commit (to 80,
+      // distinct from the just-committed 50) instead of firing immediately.
+      track.dispatchEvent(
+        new PointerEvent("pointermove", { bubbles: true, clientX: 180, pointerId: 1 }),
+      );
+    });
+    expect(onCommitA).toHaveBeenCalledTimes(1);
+    // Simulate the real-world race: something else causes this slider to
+    // re-render with a NEW onCommit closure before the queued timer fires
+    // (e.g. Grade's per-detail onCommit spreads the render-time whole
+    // grading object, so a different control committing in between produces
+    // a fresh closure). The stale closure must not win.
+    const onCommitB = vi.fn();
+    act(() => {
+      root.render(
+        <FlatSlider
+          label="Exposure"
+          value={0}
+          min={-100}
+          max={100}
+          tier="explicitCustom"
+          displayValue="0"
+          onCommit={onCommitB}
+        />,
+      );
+    });
+    act(() => {
+      vi.advanceTimersByTime(45);
+    });
+    expect(onCommitB).toHaveBeenCalledTimes(1);
+    expect(onCommitB).toHaveBeenCalledWith(80);
+    expect(onCommitA).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
+  it("flushes a still-queued trailing commit on unmount instead of dropping it", () => {
+    vi.useFakeTimers();
+    const onCommit = vi.fn();
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Opacity"
+        value={5}
+        min={0}
+        max={100}
+        tier="explicitCustom"
+        displayValue="5%"
+        onCommit={onCommit}
+      />,
+    );
+    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
+    if (!track) throw new Error("expected a track element");
+    Object.defineProperty(track, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 200, top: 0, height: 20, right: 200, bottom: 20 }),
+    });
+    act(() => {
+      track.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, clientX: 20, pointerId: 1 }),
+      );
+    });
+    expect(onCommit).toHaveBeenCalledTimes(1);
+    act(() => {
+      // Queues a trailing commit that never gets to fire before unmount.
+      track.dispatchEvent(
+        new PointerEvent("pointermove", { bubbles: true, clientX: 160, pointerId: 1 }),
+      );
+    });
+    expect(onCommit).toHaveBeenCalledTimes(1);
+    act(() => root.unmount());
+    expect(onCommit).toHaveBeenCalledTimes(2);
+    expect(onCommit).toHaveBeenNthCalledWith(2, 80);
+    vi.useRealTimers();
+  });
+
   it("supports keyboard operation: focusable, arrow keys step, Home/End clamp to range", () => {
     const onCommit = vi.fn();
     const { host, root } = renderInto(
@@ -728,6 +871,31 @@ describe("FlatSelectRow — label/value options", () => {
     expect(options).toEqual(["normal", "multiply", "screen"]);
     act(() => root.unmount());
   });
+
+  it("preserves a valid authored value outside the preset list instead of misrepresenting it as the first option", () => {
+    const onChange = vi.fn();
+    const { host, root } = renderInto(
+      <FlatSelectRow
+        label="Blend"
+        value="difference"
+        options={["normal", "multiply", "screen", "overlay"]}
+        tier="explicitCustom"
+        onChange={onChange}
+      />,
+    );
+    const select = host.querySelector<HTMLSelectElement>("select");
+    // A native <select> whose `value` matches no <option> falls back to
+    // selectedIndex 0 — silently showing "normal" as selected even though
+    // the real persisted value is "difference". The row must add an option
+    // for the current value so it's genuinely representable.
+    expect(select?.value).toBe("difference");
+    const options = Array.from(host.querySelectorAll("option")).map((o) => o.textContent);
+    expect(options).toContain("difference");
+    // And reselecting the (still-present) first preset must be an explicit
+    // user choice, not something that already happened silently.
+    expect(onChange).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
 });
 
 describe("FlatToggle", () => {
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index 49faeebaa6..df7120b2c6 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -87,6 +87,10 @@ export function FlatRow({
 export interface FlatSegmentOption {
   key: string;
   node: ReactNode;
+  /** Accessible name — the glyph alone (e.g. two indistinguishable "A"
+   *  buttons for upright vs. italic) isn't a valid accessible name on its
+   *  own. */
+  label: string;
   active: boolean;
 }
 
@@ -114,6 +118,8 @@ export function FlatSegmentedRow({
             <button
               type="button"
               data-flat-segment="true"
+              aria-label={option.label}
+              aria-pressed={option.active}
               disabled={disabled}
               onClick={() => onChange(option.key)}
               className={`px-1.5 py-1 text-[11px] transition-colors disabled:cursor-not-allowed ${
@@ -286,6 +292,14 @@ export function FlatSlider({
   // prop, so the release flush must dedupe against what we just sent, not
   // against the stale prop, or the same value commits twice.
   const lastCommittedRef = useRef(value);
+  // Always the current render's onCommit — read inside the throttle timer
+  // instead of closing over the callback at schedule time. A caller whose
+  // onCommit spreads other current state (e.g. Grade's "...grading, details:
+  // {...}") would otherwise let a queued trailing commit fire ~40ms later
+  // with a stale snapshot and silently revert whatever the user changed on a
+  // different control in between.
+  const onCommitRef = useRef(onCommit);
+  onCommitRef.current = onCommit;
 
   useEffect(() => {
     if (draggingRef.current) return;
@@ -294,7 +308,14 @@ export function FlatSlider({
   }, [value]);
   useEffect(
     () => () => {
-      if (commitTimerRef.current) clearTimeout(commitTimerRef.current);
+      if (commitTimerRef.current) {
+        clearTimeout(commitTimerRef.current);
+        // Flush rather than drop a still-queued edit — this only fires if the
+        // component unmounts mid-drag (e.g. selection changes away), and
+        // silently discarding the user's last dragged position would look
+        // like data loss.
+        if (pendingRef.current !== null) onCommitRef.current(pendingRef.current);
+      }
     },
     [],
   );
@@ -316,7 +337,7 @@ export function FlatSlider({
     lastCommitAtRef.current = Date.now();
     if (nextDraft !== lastCommittedRef.current) {
       lastCommittedRef.current = nextDraft;
-      onCommit(nextDraft);
+      onCommitRef.current(nextDraft);
     }
   };
   const scheduleCommit = (nextDraft: number) => {
@@ -346,6 +367,7 @@ export function FlatSlider({
         aria-valuemax={max}
         aria-disabled={disabled}
         tabIndex={disabled ? -1 : 0}
+        style={{ touchAction: "none" }}
         className={`relative h-5 flex-1 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
         onPointerDown={(e) => {
           if (disabled) return;
@@ -429,8 +451,9 @@ export function FlatSlider({
               type="button"
               data-flat-slider-reset="true"
               title="Remove — fall back to default"
+              disabled={disabled}
               onClick={onReset}
-              className="text-panel-text-3 hover:text-panel-text-1"
+              className="text-panel-text-3 hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
             >
               <RotateCcw size={11} />
             </button>
@@ -465,6 +488,17 @@ export function FlatSelectRow({
   const normalizedOptions = options.map((option) =>
     typeof option === "string" ? { value: option, label: option } : option,
   );
+  // A valid authored value outside the preset list (e.g. a `mix-blend-mode`
+  // or `object-position` this row doesn't offer as a preset) must not be
+  // silently misrepresented as the first option — the native <select> falls
+  // back to selectedIndex 0 when `value` matches no <option>, and reselecting
+  // that visible-but-wrong preset overwrites the real persisted value. Prepend
+  // the current value so it's always representable, matching legacy
+  // `SelectField`'s same guard.
+  const renderedOptions =
+    value && !normalizedOptions.some((option) => option.value === value)
+      ? [{ value, label: value }, ...normalizedOptions]
+      : normalizedOptions;
   return (
     <div className="group flex min-h-[30px] items-center justify-between">
       <span className={`text-[11px] ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
@@ -476,7 +510,7 @@ export function FlatSelectRow({
             onChange={(e) => onChange(e.target.value)}
             className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-none disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`}
           >
-            {normalizedOptions.map((option) => (
+            {renderedOptions.map((option) => (
               <option key={option.value} value={option.value}>
                 {option.label}
               </option>
diff --git a/packages/studio/src/components/editor/propertyPanelFlatStyleSections.tsx b/packages/studio/src/components/editor/propertyPanelFlatStyleSections.tsx
index 6dbc093164..d3103b570c 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatStyleSections.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatStyleSections.tsx
@@ -11,24 +11,19 @@ import {
 import {
   buildBoxShadowPresetValue,
   buildClipPathValue,
-  buildInsetClipPathSides,
-  buildInsetClipPathValue,
   buildStrokeStyleUpdates,
   buildStrokeWidthStyleUpdates,
   extractBackgroundImageUrl,
   formatNumericValue,
   formatPxMetricValue,
-  getClipPathInsetPx,
   getCssFilterFunctionPx,
   inferBoxShadowPreset,
   inferClipPathPreset,
   normalizePanelPxValue,
-  parseInsetClipPathSides,
   parseNumericValue,
   parsePxMetricValue,
   setCssFilterFunctionPx,
   type BoxShadowPreset,
-  type ClipPathInsetSides,
 } from "./propertyPanelHelpers";
 import {
   FlatRow,
@@ -36,7 +31,7 @@ import {
   FlatSelectRow,
   FlatSlider,
 } from "./propertyPanelFlatPrimitives";
-import { MetricField } from "./propertyPanelPrimitives";
+import { FlatMaskInsetRows } from "./propertyPanelFlatMaskInsetRows";
 import { resolveValueTier } from "./propertyPanelValueTier";
 import { ColorField } from "./propertyPanelColor";
 import { GradientField, ImageFillField } from "./propertyPanelFill";
@@ -96,9 +91,14 @@ function FlatFillFields({
       <FlatSegmentedRow
         label="Fill"
         options={[
-          { key: "Solid", node: "Solid", active: preferredFillMode === "Solid" },
-          { key: "Gradient", node: "Gradient", active: preferredFillMode === "Gradient" },
-          { key: "Image", node: "Image", active: preferredFillMode === "Image" },
+          { key: "Solid", node: "Solid", label: "Solid", active: preferredFillMode === "Solid" },
+          {
+            key: "Gradient",
+            node: "Gradient",
+            label: "Gradient",
+            active: preferredFillMode === "Gradient",
+          },
+          { key: "Image", node: "Image", label: "Image", active: preferredFillMode === "Image" },
         ]}
         disabled={styleEditingDisabled}
         onChange={handleFillModeChange}
@@ -435,90 +435,6 @@ function FlatOverflowMaskRows({
   );
 }
 
-// Flat Mask inset — uniform slider + per-side fields.
-function FlatMaskInsetRows({
-  clipPathValue,
-  radiusValue,
-  disabled,
-  onSetStyle,
-}: {
-  clipPathValue: string;
-  radiusValue: number;
-  disabled: boolean;
-  onSetStyle: (prop: string, value: string) => void | Promise<void>;
-}) {
-  const clipPathPreset = inferClipPathPreset(clipPathValue);
-  const parsedClipInsets = parseInsetClipPathSides(clipPathValue);
-  const clipInsetValue = getClipPathInsetPx(clipPathValue);
-  const clipInsetSides = parsedClipInsets ?? {
-    top: clipInsetValue,
-    right: clipInsetValue,
-    bottom: clipInsetValue,
-    left: clipInsetValue,
-    radius: radiusValue,
-  };
-  const showClipInsetSides = clipPathPreset === "inset" || parsedClipInsets != null;
-
-  const commitClipInsetSide = (side: keyof ClipPathInsetSides, nextValue: string) => {
-    const next = parsePxMetricValue(nextValue);
-    if (next == null) return;
-    const sides: ClipPathInsetSides = {
-      top: clipInsetSides.top,
-      right: clipInsetSides.right,
-      bottom: clipInsetSides.bottom,
-      left: clipInsetSides.left,
-    };
-    sides[side] = next;
-    void onSetStyle("clip-path", buildInsetClipPathSides(sides, clipInsetSides.radius));
-  };
-
-  return (
-    <>
-      <FlatSlider
-        label="Mask inset"
-        value={clipInsetValue}
-        min={0}
-        max={Math.max(120, Math.ceil(clipInsetValue))}
-        step={1}
-        tier={clipInsetValue > 0 ? "explicitCustom" : "default"}
-        displayValue={`${formatNumericValue(clipInsetValue)}px`}
-        disabled={disabled}
-        onCommit={(next) =>
-          void onSetStyle("clip-path", buildInsetClipPathValue(next, radiusValue))
-        }
-      />
-      {showClipInsetSides && (
-        <div className="grid grid-cols-4 gap-2">
-          <MetricField
-            label="T"
-            value={formatPxMetricValue(clipInsetSides.top)}
-            disabled={disabled}
-            onCommit={(next) => commitClipInsetSide("top", next)}
-          />
-          <MetricField
-            label="R"
-            value={formatPxMetricValue(clipInsetSides.right)}
-            disabled={disabled}
-            onCommit={(next) => commitClipInsetSide("right", next)}
-          />
-          <MetricField
-            label="B"
-            value={formatPxMetricValue(clipInsetSides.bottom)}
-            disabled={disabled}
-            onCommit={(next) => commitClipInsetSide("bottom", next)}
-          />
-          <MetricField
-            label="L"
-            value={formatPxMetricValue(clipInsetSides.left)}
-            disabled={disabled}
-            onCommit={(next) => commitClipInsetSide("left", next)}
-          />
-        </div>
-      )}
-    </>
-  );
-}
-
 /* ------------------------------------------------------------------ */
 /*  Flat Opacity slider                                                */
 /* ------------------------------------------------------------------ */
diff --git a/packages/studio/src/components/editor/propertyPanelFlatTextSection.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatTextSection.test.tsx
index 32e009d79d..ef2ced01b7 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatTextSection.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatTextSection.test.tsx
@@ -210,7 +210,7 @@ describe("FlatTextFieldEditor controls", () => {
     act(() => root.unmount());
   });
 
-  it("lights up 'right' for text-align: end and commits the concrete 'right' value on click", () => {
+  it("lights up 'right' for text-align: end but re-clicking it is a no-op — preserves the logical value", () => {
     const onSetTextFieldStyle = vi.fn();
     const { host, root } = renderInto(
       <FlatTextSection
@@ -227,8 +227,32 @@ describe("FlatTextFieldEditor controls", () => {
     const rightButton = alignButtons.find((button) => button.textContent === "R");
     expect(rightButton).not.toBeUndefined();
     expect(rightButton?.className).toContain("border-panel-accent");
+    // Clicking the option that's already visually active for "end" must NOT
+    // rewrite it to the physical "right" — that would destroy the logical
+    // semantics and break RTL content, where "end" and "right" differ.
     act(() => rightButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-    expect(onSetTextFieldStyle).toHaveBeenCalledWith("a", "text-align", "right");
+    expect(onSetTextFieldStyle).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("commits a genuine align change away from a logical value", () => {
+    const onSetTextFieldStyle = vi.fn();
+    const { host, root } = renderInto(
+      <FlatTextSection
+        element={makeSingleFieldElement({ computedStyles: { "text-align": "end" } })}
+        styles={{}}
+        fontAssets={[]}
+        onSetText={vi.fn()}
+        onSetTextFieldStyle={onSetTextFieldStyle}
+        onAddTextField={vi.fn()}
+        onRemoveTextField={vi.fn()}
+      />,
+    );
+    const alignButtons = segmentedRowButtons(host, "Align");
+    const centerButton = alignButtons.find((button) => button.textContent === "C");
+    expect(centerButton).not.toBeUndefined();
+    act(() => centerButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onSetTextFieldStyle).toHaveBeenCalledWith("a", "text-align", "center");
     act(() => root.unmount());
   });
 
diff --git a/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
index 3d8979f770..8f8d046d46 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
@@ -33,10 +33,10 @@ const ALIGN_OPTIONS = [
 ];
 
 const CASE_OPTIONS = [
-  { key: "none", node: "–" },
-  { key: "uppercase", node: "AG" },
-  { key: "lowercase", node: "ag" },
-  { key: "capitalize", node: "Ag" },
+  { key: "none", label: "none", node: "–" },
+  { key: "uppercase", label: "uppercase", node: "AG" },
+  { key: "lowercase", label: "lowercase", node: "ag" },
+  { key: "capitalize", label: "capitalize", node: "Ag" },
 ];
 
 function FlatTextFieldEditor({
@@ -167,12 +167,23 @@ function FlatTextFieldEditor({
         options={ALIGN_OPTIONS.map((option) => ({
           key: option.key,
           node: option.node,
+          label: option.label,
           active:
             align === option.key ||
             (option.key === "left" && align === "start") ||
             (option.key === "right" && align === "end"),
         }))}
-        onChange={(next) => onSetTextFieldStyle(field.key, "text-align", next)}
+        onChange={(next) => {
+          // Re-clicking the option that's already visually active for a
+          // logical value (authored "start"/"end") must not rewrite it to
+          // the physical "left"/"right" — that destroys the logical
+          // semantics and is wrong for RTL content. Only write when the
+          // user actually picked a different alignment.
+          if ((next === "left" && align === "start") || (next === "right" && align === "end")) {
+            return;
+          }
+          onSetTextFieldStyle(field.key, "text-align", next);
+        }}
       />
       <FlatSegmentedRow
         label="Case · Style"
@@ -180,10 +191,11 @@ function FlatTextFieldEditor({
           ...CASE_OPTIONS.map((option) => ({
             key: option.key,
             node: option.node,
+            label: option.label,
             active: textTransform === option.key,
           })),
-          { key: "normal", node: "A", active: fontStyle === "normal" },
-          { key: "italic", node: "A", active: fontStyle === "italic" },
+          { key: "normal", node: "A", label: "upright", active: fontStyle === "normal" },
+          { key: "italic", node: "A", label: "italic", active: fontStyle === "italic" },
         ]}
         spacerAfterIndex={2}
         onChange={(next) => {
diff --git a/packages/studio/src/components/editor/useColorGradingController.test.ts b/packages/studio/src/components/editor/useColorGradingController.test.ts
index 5529003925..e3fdf5379e 100644
--- a/packages/studio/src/components/editor/useColorGradingController.test.ts
+++ b/packages/studio/src/components/editor/useColorGradingController.test.ts
@@ -53,35 +53,48 @@ function makeElement(overrides: Partial<DomEditSelection> = {}): DomEditSelectio
 function HookHost({
   onState,
   onSetAttributeLive,
+  element,
 }: {
   onState: (state: ReturnType<typeof useColorGradingController>) => void;
   onSetAttributeLive: (attr: string, value: string | null) => void;
+  element: DomEditSelection;
 }) {
   const state = useColorGradingController({
     projectId: "proj",
-    element: makeElement(),
+    element,
     onSetAttributeLive,
   });
   onState(state);
   return null;
 }
 
-function renderHook(onSetAttributeLive: (attr: string, value: string | null) => void) {
+function renderHook(
+  onSetAttributeLive: (attr: string, value: string | null) => void,
+  initialElement: DomEditSelection = makeElement(),
+) {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
   let latest: ReturnType<typeof useColorGradingController> | undefined;
-  act(() => {
-    root.render(
-      React.createElement(HookHost, {
-        onState: (s: ReturnType<typeof useColorGradingController>) => (latest = s),
-        onSetAttributeLive,
-      }),
-    );
-  });
+  const renderWith = (element: DomEditSelection) => {
+    act(() => {
+      root.render(
+        React.createElement(HookHost, {
+          onState: (s: ReturnType<typeof useColorGradingController>) => (latest = s),
+          onSetAttributeLive,
+          element,
+        }),
+      );
+    });
+  };
+  renderWith(initialElement);
   return {
     root,
-    get state() {
+    rerenderWithElement: renderWith,
+    // A method, not a getter — `const { state } = renderHook(...)` would
+    // destructure a getter into a one-time snapshot, silently going stale
+    // after the first state change. Call `.getState()` fresh every time.
+    getState(): ReturnType<typeof useColorGradingController> {
       if (!latest) throw new Error("hook did not render");
       return latest;
     },
@@ -90,19 +103,20 @@ function renderHook(onSetAttributeLive: (attr: string, value: string | null) =>
 
 describe("useColorGradingController", () => {
   it("starts with the neutral (inactive) grading and idle compare state", () => {
-    const { root, state } = renderHook(vi.fn());
-    expect(state.grading.preset).toBe("neutral");
-    expect(state.compareEnabled).toBe(false);
+    const { root, getState } = renderHook(vi.fn());
+    expect(getState().grading.preset).toBe("neutral");
+    expect(getState().compareEnabled).toBe(false);
     act(() => root.unmount());
   });
 
   it("commitColorGrading updates grading state synchronously and schedules a debounced persist", async () => {
     vi.useFakeTimers();
     const onSetAttributeLive = vi.fn();
-    const { root, state } = renderHook(onSetAttributeLive);
+    const { root, getState } = renderHook(onSetAttributeLive);
     act(() => {
-      state.commitColorGrading(freshPopGrading());
+      getState().commitColorGrading(freshPopGrading());
     });
+    expect(getState().grading.preset).toBe("fresh-pop");
     expect(onSetAttributeLive).not.toHaveBeenCalled();
     act(() => {
       vi.advanceTimersByTime(400);
@@ -116,14 +130,95 @@ describe("useColorGradingController", () => {
   });
 
   it("resetGrading returns to the neutral preset", () => {
-    const { root, state } = renderHook(vi.fn());
+    const { root, getState } = renderHook(vi.fn());
     act(() => {
-      state.commitColorGrading(freshPopGrading());
+      getState().commitColorGrading(freshPopGrading());
     });
     act(() => {
-      state.resetGrading();
+      getState().resetGrading();
     });
-    expect(state.grading.preset).toBe("neutral");
+    expect(getState().grading.preset).toBe("neutral");
     act(() => root.unmount());
   });
+
+  it("resets grading/compare state when selection changes to a different element", () => {
+    const { root, getState, rerenderWithElement } = renderHook(
+      vi.fn(),
+      makeElement({ id: "s1-bg" }),
+    );
+    act(() => {
+      getState().commitColorGrading(freshPopGrading());
+    });
+    expect(getState().grading.preset).toBe("fresh-pop");
+    // A different element, with no persisted grading of its own — without a
+    // reset, this hook (unlike the legacy component it was extracted from,
+    // which remounts via a `key={selectionIdentityKey}`) would keep showing
+    // the previous element's grading.
+    rerenderWithElement(makeElement({ id: "s2-bg" }));
+    expect(getState().grading.preset).toBe("neutral");
+    act(() => root.unmount());
+  });
+
+  it("cancels a pending persist scheduled for the previous element when selection changes before it flushes", () => {
+    vi.useFakeTimers();
+    const onSetAttributeLive = vi.fn();
+    const { root, getState, rerenderWithElement } = renderHook(
+      onSetAttributeLive,
+      makeElement({ id: "s1-bg" }),
+    );
+    act(() => {
+      getState().commitColorGrading(freshPopGrading());
+    });
+    // Switch selection before the 350ms debounce flushes — the queued write
+    // targeted the OLD element and must not land on whatever is selected now.
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+    rerenderWithElement(makeElement({ id: "s2-bg" }));
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    expect(onSetAttributeLive).not.toHaveBeenCalled();
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
+  it("does not permanently cache a non-OK media/metadata response — the next mount retries", async () => {
+    const videoWithSrc = () => {
+      const el = document.createElement("video");
+      el.setAttribute("src", "clip.mp4");
+      return el;
+    };
+    const fetchMock = vi
+      .fn()
+      .mockResolvedValueOnce({ ok: false } as Response)
+      .mockResolvedValueOnce({
+        ok: true,
+        json: () =>
+          Promise.resolve({ metadata: { kind: "video", color: { dynamicRange: "hdr" } } }),
+      } as unknown as Response);
+    vi.stubGlobal("fetch", fetchMock);
+
+    const first = renderHook(vi.fn(), makeElement({ id: "retry-asset", element: videoWithSrc() }));
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(first.getState().mediaMetadata).toBeNull();
+    act(() => first.root.unmount());
+
+    // A second, independent mount for the SAME asset path — if the failed
+    // response had been cached, this would never re-fetch and mediaMetadata
+    // would stay null forever.
+    const second = renderHook(
+      vi.fn(),
+      makeElement({ id: "retry-asset-2", element: videoWithSrc() }),
+    );
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(second.getState().mediaMetadata?.color.dynamicRange).toBe("hdr");
+    act(() => second.root.unmount());
+    vi.unstubAllGlobals();
+  });
 });
diff --git a/packages/studio/src/components/editor/useColorGradingController.ts b/packages/studio/src/components/editor/useColorGradingController.ts
index 41f1f99f7b..4710e906a6 100644
--- a/packages/studio/src/components/editor/useColorGradingController.ts
+++ b/packages/studio/src/components/editor/useColorGradingController.ts
@@ -12,7 +12,7 @@ import {
   trackStudioPendingEdit,
 } from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
-import { stripQueryAndHash } from "./propertyPanelHelpers";
+import { selectionIdentityKey, stripQueryAndHash } from "./propertyPanelHelpers";
 import {
   acceptStudioRuntimeMessage,
   postRuntimeControlMessage,
@@ -196,6 +196,38 @@ export function useColorGradingController({
   onSetAttributeLiveRef.current = onSetAttributeLive;
   latestGradingRef.current = grading;
   compareEnabledRef.current = compareEnabled;
+
+  // Reset all per-element state when the selection changes to a different
+  // element — unlike the legacy ColorGradingSection (remounted via a
+  // `key={selectionIdentityKey(element)}` from its parent), this hook is
+  // called unconditionally on every render, so nothing naturally remounts it.
+  // Without this, switching selection reuses the previous element's grading/
+  // compare/mediaMetadata state and can commit stale pending work onto the
+  // new target. Adjusting state during render (comparing against a ref) is
+  // React's documented pattern for this — it resolves in the same render
+  // pass instead of flashing the stale state for one frame via useEffect.
+  const identityKey = selectionIdentityKey(element);
+  const identityKeyRef = useRef(identityKey);
+  if (identityKeyRef.current !== identityKey) {
+    identityKeyRef.current = identityKey;
+    if (persistTimerRef.current) {
+      clearTimeout(persistTimerRef.current);
+      persistTimerRef.current = null;
+    }
+    pendingPersistValueRef.current = undefined;
+    for (const timer of statusTimersRef.current) clearTimeout(timer);
+    statusTimersRef.current = [];
+    const freshGrading = readColorGradingFromElement(element);
+    latestGradingRef.current = freshGrading;
+    setGrading(freshGrading);
+    setCompareEnabled(false);
+    compareEnabledRef.current = false;
+    setApplyScope("source-file");
+    setApplyBusy(false);
+    setRuntimeStatus({ state: "pending", message: "Waiting for runtime" });
+    setMediaMetadata(null);
+  }
+
   const target = useMemo(
     (): HfColorGradingTarget => ({
       id: element.id ?? null,
@@ -225,18 +257,29 @@ export function useColorGradingController({
       )}`,
       { signal: controller.signal },
     )
-      .then((response) => (response.ok ? response.json() : null))
-      .then((data: MediaMetadataResponse | null) => {
+      .then(async (response) => {
+        if (!response.ok) return { ok: false as const };
+        const data: MediaMetadataResponse | null = await response.json();
+        return { ok: true as const, metadata: data?.metadata ?? null };
+      })
+      .then((result) => {
         if (controller.signal.aborted) return;
-        const metadata = data?.metadata ?? null;
-        MEDIA_METADATA_CACHE.set(cacheKey, metadata);
-        setMediaMetadata(metadata);
+        // Only cache a definitive answer from a successful response — a non-OK
+        // status is a transient/server failure, not a stable "no metadata"
+        // result, and caching it would suppress the HDR banner for this asset
+        // for the page's whole lifetime. Leave the key absent so the next
+        // selection retries.
+        if (!result.ok) {
+          setMediaMetadata(null);
+          return;
+        }
+        MEDIA_METADATA_CACHE.set(cacheKey, result.metadata);
+        setMediaMetadata(result.metadata);
       })
       .catch(() => {
-        // Don't cache a transient fetch failure — a cached null would suppress
-        // the HDR banner for this asset for the page's whole lifetime. Leave the
-        // key absent so the next selection retries. (A successful response with
-        // no metadata still caches null above, which IS a stable answer.)
+        // Same reasoning as the non-OK branch above: don't cache a network-
+        // level fetch failure either.
+        if (!controller.signal.aborted) setMediaMetadata(null);
       });
     return () => controller.abort();
   }, [projectId, selectedAssetPath]);

From 1deb0dc97066edcb56bbc05e8b8269f4fd22a6e1 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Tue, 14 Jul 2026 02:14:21 -0700
Subject: [PATCH 2/8] fix(studio): resolve the 4 cumulative blockers from the
 #2416 tip re-review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes the Deepwork tip re-review's four remaining blockers plus its
additive findings:

- selectionIdentityKey: add sourceFile as a 5th identity component. The
  same local id/selector can legitimately recur across different
  composition files (host vs. an inlined sub-composition, or two unrelated
  sub-comps) — without sourceFile, those collided onto the same identity
  key and reused stale controller state across a selection change that
  should have reset it.
- useColorGradingController: flush (not discard) a pending Grade edit when
  selection changes before the 350ms debounce fires. The prior fix
  correctly stopped it from landing on the WRONG (new) target, but
  cancelling outright silently dropped the user's in-flight edit instead of
  writing it to the element it was authored for — using the
  onSetAttributeLive closure captured for the outgoing render, which
  (via commitDataAttribute's own useCallback deps) is still bound to the
  outgoing selection.
- useColorGradingController: revert to the last confirmed-good grading when
  a persist rejects, instead of leaving the optimistic (never-actually-
  saved) value showing indefinitely. Tracks a separate
  confirmedGradingRef, updated only on a successful persist.
- FlatSelectRow: disable the reset button when the row itself is disabled
  (it previously ignored disabled entirely, same class of bug as the
  FlatSlider reset button fixed earlier) and give the underlying <select>
  an aria-label from the row's label text.
- FlatSlider: handle lostpointercapture the same as pointercancel — capture
  can be lost without either firing first (another element steals it, or
  the browser reclaims it for a scroll/touch gesture), which previously
  left the dragging flag stuck and the knob permanently unable to sync to
  external value changes.

New regression tests for all of the above; full studio suite still at the
known pre-existing baseline (55 failures unrelated to this stack).
---
 .../propertyPanelFlatPrimitives.test.tsx      | 70 +++++++++++++++++++
 .../editor/propertyPanelFlatPrimitives.tsx    | 12 +++-
 .../components/editor/propertyPanelHelpers.ts | 10 ++-
 .../editor/useColorGradingController.test.ts  | 58 +++++++++++++--
 .../editor/useColorGradingController.ts       | 61 ++++++++++++++--
 5 files changed, 196 insertions(+), 15 deletions(-)

diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
index 09b1e1038d..dda93de0db 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
@@ -774,6 +774,54 @@ describe("FlatSlider — Grade extensions", () => {
     expect(track.getAttribute("aria-valuenow")).toBe("80");
     act(() => root.unmount());
   });
+
+  it("resets the dragging state on lostpointercapture even without a prior pointerup/pointercancel", () => {
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Opacity"
+        value={10}
+        min={0}
+        max={100}
+        tier="explicitCustom"
+        displayValue="10%"
+        onCommit={vi.fn()}
+      />,
+    );
+    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
+    if (!track) throw new Error("expected a track element");
+    Object.defineProperty(track, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
+    });
+    act(() => {
+      track.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, clientX: 30, pointerId: 1 }),
+      );
+    });
+    expect(track.getAttribute("aria-valuenow")).toBe("30");
+    act(() => {
+      // Capture lost WITHOUT a pointerup/pointercancel first — e.g. another
+      // element steals it, or the browser reclaims it for a scroll gesture.
+      track.dispatchEvent(new Event("lostpointercapture", { bubbles: true }));
+    });
+    act(() => {
+      root.render(
+        <FlatSlider
+          label="Opacity"
+          value={99}
+          min={0}
+          max={100}
+          tier="explicitCustom"
+          displayValue="99%"
+          onCommit={vi.fn()}
+        />,
+      );
+    });
+    // If lostpointercapture hadn't cleared the dragging flag, this external
+    // value change would be silently ignored (mid-drag echo suppression)
+    // forever — the knob would be stuck at 30.
+    expect(track.getAttribute("aria-valuenow")).toBe("99");
+    act(() => root.unmount());
+  });
 });
 
 describe("FlatSelectRow", () => {
@@ -813,6 +861,28 @@ describe("FlatSelectRow", () => {
     act(() => root.unmount());
   });
 
+  it("disables the reset button (and gives the select an accessible name) when the row itself is disabled", () => {
+    const onReset = vi.fn();
+    const { host, root } = renderInto(
+      <FlatSelectRow
+        label="Shadow"
+        value="soft"
+        options={["none", "soft", "lift", "glow"]}
+        tier="explicitCustom"
+        disabled
+        onChange={vi.fn()}
+        onReset={onReset}
+      />,
+    );
+    const select = host.querySelector<HTMLSelectElement>("select");
+    expect(select?.getAttribute("aria-label")).toBe("Shadow");
+    const reset = host.querySelector<HTMLButtonElement>('[data-flat-select-reset="true"]');
+    expect(reset?.disabled).toBe(true);
+    act(() => reset?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onReset).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
   it("fires onChange when the select value changes", () => {
     const onChange = vi.fn();
     const { host, root } = renderInto(
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index df7120b2c6..7e5afca272 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -404,6 +404,14 @@ export function FlatSlider({
             e.currentTarget.releasePointerCapture(e.pointerId);
           }
         }}
+        onLostPointerCapture={() => {
+          // Capture can be lost without either pointerup or pointercancel
+          // firing first (e.g. another element steals it, or the browser
+          // reclaims it for a scroll/touch gesture) — without this,
+          // draggingRef stays stuck true and the knob permanently stops
+          // syncing to the committed value prop.
+          draggingRef.current = false;
+        }}
         onKeyDown={(e) => {
           if (disabled) return;
           const next = sliderKeyTarget(e.key, draft, min, max, step);
@@ -507,6 +515,7 @@ export function FlatSelectRow({
           <select
             value={value}
             disabled={disabled}
+            aria-label={label || undefined}
             onChange={(e) => onChange(e.target.value)}
             className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-none disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`}
           >
@@ -531,8 +540,9 @@ export function FlatSelectRow({
             type="button"
             data-flat-select-reset="true"
             title="Remove — fall back to default"
+            disabled={disabled}
             onClick={onReset}
-            className="flex-shrink-0 text-panel-text-3 opacity-0 transition-opacity hover:text-panel-text-1 group-hover:opacity-100"
+            className="flex-shrink-0 text-panel-text-3 opacity-0 transition-opacity hover:text-panel-text-1 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-40"
           >
             <RotateCcw size={11} />
           </button>
diff --git a/packages/studio/src/components/editor/propertyPanelHelpers.ts b/packages/studio/src/components/editor/propertyPanelHelpers.ts
index 13500fa1cd..8fcb0ce988 100644
--- a/packages/studio/src/components/editor/propertyPanelHelpers.ts
+++ b/packages/studio/src/components/editor/propertyPanelHelpers.ts
@@ -30,18 +30,22 @@ export function isSelectedElementHidden(
 }
 
 /**
- * 4-part element identity for keying panel remounts on selection change —
+ * 5-part element identity for keying panel remounts on selection change —
  * id or selector alone collides for id-less same-selector siblings, leaving
- * mount-initialized state pointed at the previous element.
+ * mount-initialized state pointed at the previous element. sourceFile is
+ * required too: the same local id/selector can legitimately recur across
+ * different composition files (host vs. an inlined sub-composition, or two
+ * unrelated sub-comps), and without it those collide onto the same key.
  */
 export function selectionIdentityKey(
-  element: Pick<DomEditSelection, "id" | "hfId" | "selector" | "selectorIndex">,
+  element: Pick<DomEditSelection, "id" | "hfId" | "selector" | "selectorIndex" | "sourceFile">,
 ): string {
   return [
     element.id ?? "",
     element.hfId ?? "",
     element.selector ?? "",
     String(element.selectorIndex ?? ""),
+    element.sourceFile ?? "",
   ].join("|");
 }
 
diff --git a/packages/studio/src/components/editor/useColorGradingController.test.ts b/packages/studio/src/components/editor/useColorGradingController.test.ts
index e3fdf5379e..e9284a52b2 100644
--- a/packages/studio/src/components/editor/useColorGradingController.test.ts
+++ b/packages/studio/src/components/editor/useColorGradingController.test.ts
@@ -129,6 +129,30 @@ describe("useColorGradingController", () => {
     vi.useRealTimers();
   });
 
+  it("reverts to the last confirmed-good grading when a persist rejects", async () => {
+    vi.useFakeTimers();
+    const onSetAttributeLive = vi.fn().mockRejectedValue(new Error("disk full"));
+    const { root, getState } = renderHook(onSetAttributeLive);
+    act(() => {
+      getState().commitColorGrading(freshPopGrading());
+    });
+    expect(getState().grading.preset).toBe("fresh-pop");
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    // The rejection settles on a microtask, not a timer — flush it.
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    // Reverted to "neutral" (the last confirmed-good value, from before this
+    // commit) instead of permanently showing "fresh-pop" as if it had saved.
+    expect(getState().grading.preset).toBe("neutral");
+    expect(getState().runtimeStatus.state).toBe("unavailable");
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
   it("resetGrading returns to the neutral preset", () => {
     const { root, getState } = renderHook(vi.fn());
     act(() => {
@@ -159,7 +183,25 @@ describe("useColorGradingController", () => {
     act(() => root.unmount());
   });
 
-  it("cancels a pending persist scheduled for the previous element when selection changes before it flushes", () => {
+  it("also resets when the same local id/selector recurs in a different source file", () => {
+    // Same id, same selector, same selectorIndex — only sourceFile differs.
+    // Without sourceFile in the identity key, this would collide with the
+    // first element (e.g. host composition vs. an inlined sub-composition,
+    // or two unrelated sub-comps that happen to share a local id).
+    const { root, getState, rerenderWithElement } = renderHook(
+      vi.fn(),
+      makeElement({ id: "bg", sourceFile: "index.html" }),
+    );
+    act(() => {
+      getState().commitColorGrading(freshPopGrading());
+    });
+    expect(getState().grading.preset).toBe("fresh-pop");
+    rerenderWithElement(makeElement({ id: "bg", sourceFile: "sub-comp.html" }));
+    expect(getState().grading.preset).toBe("neutral");
+    act(() => root.unmount());
+  });
+
+  it("flushes — rather than discards — a pending persist for the previous element when selection changes before it fires", () => {
     vi.useFakeTimers();
     const onSetAttributeLive = vi.fn();
     const { root, getState, rerenderWithElement } = renderHook(
@@ -169,16 +211,24 @@ describe("useColorGradingController", () => {
     act(() => {
       getState().commitColorGrading(freshPopGrading());
     });
-    // Switch selection before the 350ms debounce flushes — the queued write
-    // targeted the OLD element and must not land on whatever is selected now.
+    // Switch selection before the 350ms debounce fires — the in-flight edit
+    // must be written immediately (targeting the OUTGOING element's own
+    // commit callback), not silently dropped just because a debounce timer
+    // hadn't elapsed yet.
     act(() => {
       vi.advanceTimersByTime(200);
     });
     rerenderWithElement(makeElement({ id: "s2-bg" }));
+    expect(onSetAttributeLive).toHaveBeenCalledTimes(1);
+    const [attr, value] = onSetAttributeLive.mock.calls[0] as [string, string];
+    expect(attr).toBe("color-grading");
+    expect(value).toContain("fresh-pop");
+    // And it must not ALSO fire again once the (now-cleared) original timer
+    // window would have elapsed.
     act(() => {
       vi.advanceTimersByTime(400);
     });
-    expect(onSetAttributeLive).not.toHaveBeenCalled();
+    expect(onSetAttributeLive).toHaveBeenCalledTimes(1);
     act(() => root.unmount());
     vi.useRealTimers();
   });
diff --git a/packages/studio/src/components/editor/useColorGradingController.ts b/packages/studio/src/components/editor/useColorGradingController.ts
index 4710e906a6..d2aa587152 100644
--- a/packages/studio/src/components/editor/useColorGradingController.ts
+++ b/packages/studio/src/components/editor/useColorGradingController.ts
@@ -189,10 +189,22 @@ export function useColorGradingController({
   const [mediaMetadata, setMediaMetadata] = useState<MediaMetadata | null>(null);
   const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pendingPersistValueRef = useRef<string | null | undefined>(undefined);
+  const pendingPersistGradingRef = useRef<NormalizedHfColorGrading | null>(null);
+  // The last grading value actually confirmed saved — distinct from `grading`
+  // (the optimistic value shown immediately on commit). A rejected persist
+  // reverts to this instead of leaving the UI permanently showing a value
+  // that was never written.
+  const confirmedGradingRef = useRef(grading);
   const statusTimersRef = useRef<number[]>([]);
   const onSetAttributeLiveRef = useRef(onSetAttributeLive);
   const latestGradingRef = useRef(grading);
   const compareEnabledRef = useRef(compareEnabled);
+  // Captured before reassignment below — still bound to whatever selection
+  // was current on the PREVIOUS render. `commitDataAttribute` (the eventual
+  // callee) closes over `domEditSelection` in its own useCallback deps, so a
+  // selection change mints an entirely new `onSetAttributeLive` closure; this
+  // stale reference is exactly what still targets the outgoing element.
+  const previousOnSetAttributeLive = onSetAttributeLiveRef.current;
   onSetAttributeLiveRef.current = onSetAttributeLive;
   latestGradingRef.current = grading;
   compareEnabledRef.current = compareEnabled;
@@ -214,11 +226,22 @@ export function useColorGradingController({
       clearTimeout(persistTimerRef.current);
       persistTimerRef.current = null;
     }
+    // Flush — don't discard — a still-pending edit for the OUTGOING element.
+    // Cancelling the debounce without writing would silently drop whatever
+    // the user just changed; targeting it at the callback bound to the OLD
+    // selection (captured above) keeps it from landing on the new element.
+    if (pendingPersistValueRef.current !== undefined) {
+      trackStudioPendingEdit(
+        previousOnSetAttributeLive(COLOR_GRADING_DATA_KEY, pendingPersistValueRef.current),
+      );
+    }
     pendingPersistValueRef.current = undefined;
+    pendingPersistGradingRef.current = null;
     for (const timer of statusTimersRef.current) clearTimeout(timer);
     statusTimersRef.current = [];
     const freshGrading = readColorGradingFromElement(element);
     latestGradingRef.current = freshGrading;
+    confirmedGradingRef.current = freshGrading;
     setGrading(freshGrading);
     setCompareEnabled(false);
     compareEnabledRef.current = false;
@@ -300,11 +323,30 @@ export function useColorGradingController({
     refreshRuntimeStatus();
   }, [refreshRuntimeStatus]);
 
-  const persistColorGradingValue = useCallback((value: string | null) => {
-    return trackStudioPendingEdit(
-      onSetAttributeLiveRef.current(COLOR_GRADING_DATA_KEY, value ?? null),
-    );
-  }, []);
+  const persistColorGradingValue = useCallback(
+    (value: string | null, attemptedGrading: NormalizedHfColorGrading) => {
+      const result = onSetAttributeLiveRef.current(COLOR_GRADING_DATA_KEY, value ?? null);
+      return trackStudioPendingEdit(
+        Promise.resolve(result).then(
+          () => {
+            confirmedGradingRef.current = attemptedGrading;
+          },
+          () => {
+            // Persist failed — the optimistic grading was never actually
+            // saved. Revert to the last confirmed-good value instead of
+            // leaving the control showing an unsaved state as if it succeeded.
+            // Handled here (not rethrown) — nothing downstream awaits this
+            // promise's rejection; callers fire it with `void`.
+            const reverted = confirmedGradingRef.current;
+            latestGradingRef.current = reverted;
+            setGrading(reverted);
+            setRuntimeStatus({ state: "unavailable", message: "Save failed — reverted" });
+          },
+        ),
+      );
+    },
+    [],
+  );
 
   const flushPendingPersist = useCallback(() => {
     if (persistTimerRef.current) {
@@ -313,8 +355,10 @@ export function useColorGradingController({
     }
     if (pendingPersistValueRef.current === undefined) return undefined;
     const value = pendingPersistValueRef.current;
+    const attemptedGrading = pendingPersistGradingRef.current ?? latestGradingRef.current;
     pendingPersistValueRef.current = undefined;
-    return persistColorGradingValue(value);
+    pendingPersistGradingRef.current = null;
+    return persistColorGradingValue(value, attemptedGrading);
   }, [persistColorGradingValue]);
 
   useEffect(() => addStudioPendingEditFlushListener(flushPendingPersist), [flushPendingPersist]);
@@ -399,11 +443,14 @@ export function useColorGradingController({
       pendingPersistValueRef.current = isHfColorGradingActive(nextGrading)
         ? serializeHfColorGrading(nextGrading)
         : null;
+      pendingPersistGradingRef.current = nextGrading;
       persistTimerRef.current = setTimeout(() => {
         const value = pendingPersistValueRef.current;
+        const attemptedGrading = pendingPersistGradingRef.current ?? nextGrading;
         pendingPersistValueRef.current = undefined;
+        pendingPersistGradingRef.current = null;
         persistTimerRef.current = null;
-        void persistColorGradingValue(value ?? null);
+        void persistColorGradingValue(value ?? null, attemptedGrading);
       }, 350);
     },
     [persistColorGradingValue, postColorGrading, postCompare, scheduleRuntimeStatusRefresh],

From 539e027b605a6ce35ea5462f56d59ec540ed79a1 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Tue, 14 Jul 2026 11:52:49 -0700
Subject: [PATCH 3/8] fix(studio): wire Grade rollback through the real commit
 path, scope async completions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes two of the three adversarial findings from the second #2416 tip
re-review; the third is a pre-existing runtime-protocol gap, explained in
the PR thread rather than patched here.

- The Grade rollback added in the previous commit could never fire through
  the real Studio callback: runDomEditCommit (the shared commit runner used
  by every data-attribute commit, not just Grade) catches persist failures
  internally and always resolves, reporting outcome only via its own
  onError side effect. A caller awaiting the promise never sees a
  rejection, so the revert-on-reject logic was dead code against the
  actual app. Added an optional onSettled(ok) callback to
  DomEditCommitRunnerConfig (purely additive — every existing caller that
  doesn't pass it is unaffected) and threaded it through
  commitDataAttribute -> handleDomAttributeLiveCommit -> the
  onSetAttributeLive prop type (now accepts an optional 3rd argument)  ->
  useColorGradingController, which now drives the revert from the real
  signal. The promise-rejection path stays as a fallback for any other
  implementation of onSetAttributeLive that rejects instead.

- Selection flushing performed a real side effect (writing the outgoing
  element's pending edit) during the render-phase identity-reset block.
  Adjusting STATE during render (comparing against a ref) is React's
  documented pattern, but it doesn't license actual I/O — React can invoke
  render more than once per commit, which could double-fire or misorder
  the write. The reset block now only enqueues the flush (a pure ref
  write); a new effect keyed on the identity performs it after commit.

- Async persist completions (both the onSettled callback and its promise-
  rejection fallback) now capture the identity key the attempt was made
  for and check it against the CURRENT identity before touching
  confirmedGradingRef/grading/runtimeStatus. Without this, a persist that
  settles after selection has moved on to a THIRD element could clobber
  that element's freshly-reset state with a result that belongs to an
  element no longer selected.

Not fixed here: the runtime Grade target (HfColorGradingTarget, used by
core's resolveTarget to find the DOM element inside the preview iframe)
has no source-file/composition-scope discriminator, matching the same gap
selectionIdentityKey had before this stack — but fixing it means changing
a wire-protocol type shared across core/player/studio and the legacy
ColorGradingSection too. hfId (checked first, before id/selector) is
minted uniquely per element at parse time in the common case, so this is
a narrow residual risk for hfId-less same-selector elements across
different source files, not a regression introduced by this stack.
Flagged as a follow-up in the PR thread.

New/updated regression tests: real onSettled(false) path (distinct from
the promise-rejection fallback), and a stale in-flight persist settling
after selection has moved on twice more. Full studio suite still at the
known pre-existing 55-failure baseline, zero regressions.
---
 .../propertyPanelColorGradingSection.tsx      |  6 +-
 .../components/editor/propertyPanelTypes.ts   |  6 +-
 .../editor/useColorGradingController.test.ts  | 80 ++++++++++++++-
 .../editor/useColorGradingController.ts       | 99 ++++++++++++++-----
 .../studio/src/hooks/domEditCommitRunner.ts   | 11 +++
 .../src/hooks/useDomEditAttributeCommits.ts   |  5 +-
 6 files changed, 179 insertions(+), 28 deletions(-)

diff --git a/packages/studio/src/components/editor/propertyPanelColorGradingSection.tsx b/packages/studio/src/components/editor/propertyPanelColorGradingSection.tsx
index d37425181e..7331cba4ef 100644
--- a/packages/studio/src/components/editor/propertyPanelColorGradingSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelColorGradingSection.tsx
@@ -138,7 +138,11 @@ 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,
diff --git a/packages/studio/src/components/editor/propertyPanelTypes.ts b/packages/studio/src/components/editor/propertyPanelTypes.ts
index 833264e018..ba862349f9 100644
--- a/packages/studio/src/components/editor/propertyPanelTypes.ts
+++ b/packages/studio/src/components/editor/propertyPanelTypes.ts
@@ -33,7 +33,11 @@ export interface PropertyPanelProps {
   onUngroup?: () => void;
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
-  onSetAttributeLive: (attr: string, value: string | null) => void | Promise<void>;
+  onSetAttributeLive: (
+    attr: string,
+    value: string | null,
+    onSettled?: (ok: boolean) => void,
+  ) => void | Promise<void>;
   onApplyColorGradingScope?: (
     scope: "source-file" | "project",
     value: string | null,
diff --git a/packages/studio/src/components/editor/useColorGradingController.test.ts b/packages/studio/src/components/editor/useColorGradingController.test.ts
index e9284a52b2..a871ca15cc 100644
--- a/packages/studio/src/components/editor/useColorGradingController.test.ts
+++ b/packages/studio/src/components/editor/useColorGradingController.test.ts
@@ -129,7 +129,37 @@ describe("useColorGradingController", () => {
     vi.useRealTimers();
   });
 
-  it("reverts to the last confirmed-good grading when a persist rejects", async () => {
+  it("reverts to the last confirmed-good grading via the real onSettled(false) signal (matches runDomEditCommit, which never rejects)", async () => {
+    // The actual Studio commit runner (runDomEditCommit) catches persist
+    // failures internally and always resolves — it reports outcome only
+    // through the onSettled callback passed as the 3rd argument. A mock
+    // that only rejects would validate a path the real callback never takes.
+    vi.useFakeTimers();
+    const onSetAttributeLive = vi.fn(
+      (_attr: string, _value: string | null, onSettled?: (ok: boolean) => void) => {
+        onSettled?.(false);
+        return Promise.resolve();
+      },
+    );
+    const { root, getState } = renderHook(onSetAttributeLive);
+    act(() => {
+      getState().commitColorGrading(freshPopGrading());
+    });
+    expect(getState().grading.preset).toBe("fresh-pop");
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(getState().grading.preset).toBe("neutral");
+    expect(getState().runtimeStatus.state).toBe("unavailable");
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
+  it("reverts to the last confirmed-good grading when a persist rejects (fallback for a non-onSettled implementation)", async () => {
     vi.useFakeTimers();
     const onSetAttributeLive = vi.fn().mockRejectedValue(new Error("disk full"));
     const { root, getState } = renderHook(onSetAttributeLive);
@@ -153,6 +183,54 @@ describe("useColorGradingController", () => {
     vi.useRealTimers();
   });
 
+  it("a stale in-flight persist result does not touch state after selection has moved on to a THIRD element", async () => {
+    vi.useFakeTimers();
+    let resolveA: (() => void) | undefined;
+    let capturedOnSettledA: ((ok: boolean) => void) | undefined;
+    const onSetAttributeLive = vi.fn(
+      (_attr: string, _value: string | null, onSettled?: (ok: boolean) => void) => {
+        capturedOnSettledA = onSettled;
+        return new Promise<void>((resolve) => {
+          resolveA = resolve;
+        });
+      },
+    );
+    const { root, getState, rerenderWithElement } = renderHook(
+      onSetAttributeLive,
+      makeElement({ id: "s1-bg" }),
+    );
+    act(() => {
+      getState().commitColorGrading(freshPopGrading());
+    });
+    // Let the debounce fire while still on s1-bg — the persist call is now
+    // genuinely in flight (its promise won't settle until resolveA() below).
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    expect(onSetAttributeLive).toHaveBeenCalledTimes(1);
+
+    // Selection moves twice more while s1-bg's persist is still pending.
+    rerenderWithElement(makeElement({ id: "s2-bg" }));
+    rerenderWithElement(makeElement({ id: "s3-bg" }));
+    expect(getState().grading.preset).toBe("neutral"); // s3-bg's own fresh state
+
+    // NOW the stale s1-bg persist finally settles as a failure.
+    act(() => {
+      capturedOnSettledA?.(false);
+      resolveA?.();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+
+    // s3-bg's state must be untouched by a result that belongs to s1-bg.
+    expect(getState().grading.preset).toBe("neutral");
+    expect(getState().runtimeStatus.state).not.toBe("unavailable");
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
   it("resetGrading returns to the neutral preset", () => {
     const { root, getState } = renderHook(vi.fn());
     act(() => {
diff --git a/packages/studio/src/components/editor/useColorGradingController.ts b/packages/studio/src/components/editor/useColorGradingController.ts
index d2aa587152..ebbcefbafa 100644
--- a/packages/studio/src/components/editor/useColorGradingController.ts
+++ b/packages/studio/src/components/editor/useColorGradingController.ts
@@ -168,7 +168,11 @@ export function useColorGradingController({
   projectId: string;
   element: DomEditSelection;
   previewIframeRef?: RefObject<HTMLIFrameElement | null>;
-  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,
@@ -190,6 +194,12 @@ export function useColorGradingController({
   const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pendingPersistValueRef = useRef<string | null | undefined>(undefined);
   const pendingPersistGradingRef = useRef<NormalizedHfColorGrading | null>(null);
+  // Populated (pure ref write only) during the render-phase identity-change
+  // reset below; the actual write happens in an effect, never during render.
+  const queuedOutgoingFlushRef = useRef<{
+    setAttributeLive: typeof onSetAttributeLive;
+    value: string | null;
+  } | null>(null);
   // The last grading value actually confirmed saved — distinct from `grading`
   // (the optimistic value shown immediately on commit). A rejected persist
   // reverts to this instead of leaving the UI permanently showing a value
@@ -216,8 +226,11 @@ export function useColorGradingController({
   // Without this, switching selection reuses the previous element's grading/
   // compare/mediaMetadata state and can commit stale pending work onto the
   // new target. Adjusting state during render (comparing against a ref) is
-  // React's documented pattern for this — it resolves in the same render
-  // pass instead of flashing the stale state for one frame via useEffect.
+  // React's documented pattern for STATE updates specifically — resolving in
+  // the same render pass instead of flashing stale state for one frame. It
+  // does NOT license side effects: only pure ref/state writes happen in this
+  // block. The actual outgoing-element flush is enqueued here and performed
+  // in the effect below, after commit.
   const identityKey = selectionIdentityKey(element);
   const identityKeyRef = useRef(identityKey);
   if (identityKeyRef.current !== identityKey) {
@@ -231,9 +244,10 @@ export function useColorGradingController({
     // the user just changed; targeting it at the callback bound to the OLD
     // selection (captured above) keeps it from landing on the new element.
     if (pendingPersistValueRef.current !== undefined) {
-      trackStudioPendingEdit(
-        previousOnSetAttributeLive(COLOR_GRADING_DATA_KEY, pendingPersistValueRef.current),
-      );
+      queuedOutgoingFlushRef.current = {
+        setAttributeLive: previousOnSetAttributeLive,
+        value: pendingPersistValueRef.current,
+      };
     }
     pendingPersistValueRef.current = undefined;
     pendingPersistGradingRef.current = null;
@@ -251,6 +265,18 @@ export function useColorGradingController({
     setMediaMetadata(null);
   }
 
+  // Performs the outgoing-element flush queued above — deliberately in an
+  // effect (post-commit), not inline in the render-phase block, since
+  // writing to disk is a real side effect and must not run during render
+  // (React may call render more than once per commit without this code ever
+  // becoming visible).
+  useEffect(() => {
+    const queued = queuedOutgoingFlushRef.current;
+    if (!queued) return;
+    queuedOutgoingFlushRef.current = null;
+    trackStudioPendingEdit(queued.setAttributeLive(COLOR_GRADING_DATA_KEY, queued.value));
+  }, [identityKey]);
+
   const target = useMemo(
     (): HfColorGradingTarget => ({
       id: element.id ?? null,
@@ -324,24 +350,44 @@ export function useColorGradingController({
   }, [refreshRuntimeStatus]);
 
   const persistColorGradingValue = useCallback(
-    (value: string | null, attemptedGrading: NormalizedHfColorGrading) => {
-      const result = onSetAttributeLiveRef.current(COLOR_GRADING_DATA_KEY, value ?? null);
+    (
+      value: string | null,
+      attemptedGrading: NormalizedHfColorGrading,
+      attemptIdentityKey: string,
+    ) => {
+      // Selection may move on to a different element while this is in
+      // flight — the identity-reset block already gave THAT element its own
+      // confirmedGradingRef baseline, so a result arriving for an element
+      // we've left must not touch its state.
+      const applySettled = (ok: boolean) => {
+        if (identityKeyRef.current !== attemptIdentityKey) return;
+        if (ok) {
+          confirmedGradingRef.current = attemptedGrading;
+          return;
+        }
+        // Persist failed — the optimistic grading was never actually saved.
+        // Revert to the last confirmed-good value instead of leaving the
+        // control showing an unsaved state as if it succeeded.
+        const reverted = confirmedGradingRef.current;
+        latestGradingRef.current = reverted;
+        setGrading(reverted);
+        setRuntimeStatus({ state: "unavailable", message: "Save failed — reverted" });
+      };
+      // `onSettled` is the real signal — the underlying commit runner
+      // (runDomEditCommit) intentionally swallows persist failures so a
+      // caller `await`-ing this promise never sees a rejection; a rejection
+      // handler here alone would be dead code against the actual Studio
+      // callback. The `.catch` below is a fallback for any OTHER
+      // implementation of onSetAttributeLive that rejects instead.
+      const result = onSetAttributeLiveRef.current(
+        COLOR_GRADING_DATA_KEY,
+        value ?? null,
+        applySettled,
+      );
       return trackStudioPendingEdit(
         Promise.resolve(result).then(
-          () => {
-            confirmedGradingRef.current = attemptedGrading;
-          },
-          () => {
-            // Persist failed — the optimistic grading was never actually
-            // saved. Revert to the last confirmed-good value instead of
-            // leaving the control showing an unsaved state as if it succeeded.
-            // Handled here (not rethrown) — nothing downstream awaits this
-            // promise's rejection; callers fire it with `void`.
-            const reverted = confirmedGradingRef.current;
-            latestGradingRef.current = reverted;
-            setGrading(reverted);
-            setRuntimeStatus({ state: "unavailable", message: "Save failed — reverted" });
-          },
+          () => undefined,
+          () => applySettled(false),
         ),
       );
     },
@@ -358,7 +404,7 @@ export function useColorGradingController({
     const attemptedGrading = pendingPersistGradingRef.current ?? latestGradingRef.current;
     pendingPersistValueRef.current = undefined;
     pendingPersistGradingRef.current = null;
-    return persistColorGradingValue(value, attemptedGrading);
+    return persistColorGradingValue(value, attemptedGrading, identityKeyRef.current);
   }, [persistColorGradingValue]);
 
   useEffect(() => addStudioPendingEditFlushListener(flushPendingPersist), [flushPendingPersist]);
@@ -444,13 +490,18 @@ export function useColorGradingController({
         ? serializeHfColorGrading(nextGrading)
         : null;
       pendingPersistGradingRef.current = nextGrading;
+      // Captured now (edit time), not read fresh inside the timer — the
+      // timer fires 350ms later and may run after selection has already
+      // moved on, at which point identityKeyRef.current would no longer
+      // describe the element this edit was actually made for.
+      const attemptIdentityKey = identityKeyRef.current;
       persistTimerRef.current = setTimeout(() => {
         const value = pendingPersistValueRef.current;
         const attemptedGrading = pendingPersistGradingRef.current ?? nextGrading;
         pendingPersistValueRef.current = undefined;
         pendingPersistGradingRef.current = null;
         persistTimerRef.current = null;
-        void persistColorGradingValue(value ?? null, attemptedGrading);
+        void persistColorGradingValue(value ?? null, attemptedGrading, attemptIdentityKey);
       }, 350);
     },
     [persistColorGradingValue, postColorGrading, postCompare, scheduleRuntimeStatusRefresh],
diff --git a/packages/studio/src/hooks/domEditCommitRunner.ts b/packages/studio/src/hooks/domEditCommitRunner.ts
index 9e11e6e3ca..516e6b4632 100644
--- a/packages/studio/src/hooks/domEditCommitRunner.ts
+++ b/packages/studio/src/hooks/domEditCommitRunner.ts
@@ -7,6 +7,15 @@ interface DomEditCommitRunnerConfig {
   onError: (error: unknown) => void;
   shouldResync: () => boolean;
   resync: () => void | Promise<void>;
+  /**
+   * Reports success/failure without changing this function's own resolve-
+   * always contract — `persist` failures are handled here (revert + onError)
+   * and never rethrown, so callers awaiting `runDomEditCommit` can't observe
+   * failure via rejection. A caller that needs to react to a specific
+   * commit's outcome (e.g. reverting its OWN optimistic state) can pass this
+   * instead of relying on a rejection that will never come.
+   */
+  onSettled?: (ok: boolean) => void;
 }
 
 interface CommitVersionRef {
@@ -34,11 +43,13 @@ export async function runDomEditCommit(config: DomEditCommitRunnerConfig): Promi
 
   try {
     await config.persist();
+    config.onSettled?.(true);
   } catch (error) {
     if (config.shouldRevert(error)) {
       config.revert();
     }
     config.onError(error);
+    config.onSettled?.(false);
   }
 
   if (!config.shouldResync()) return;
diff --git a/packages/studio/src/hooks/useDomEditAttributeCommits.ts b/packages/studio/src/hooks/useDomEditAttributeCommits.ts
index 34d7a15995..12aa8ff0a8 100644
--- a/packages/studio/src/hooks/useDomEditAttributeCommits.ts
+++ b/packages/studio/src/hooks/useDomEditAttributeCommits.ts
@@ -25,6 +25,7 @@ interface DataAttributeCommitOptions {
   coalescePrefix: string;
   skipRefresh: boolean;
   refreshAfter?: boolean;
+  onSettled?: (ok: boolean) => void;
 }
 
 function resolveFullAttrName(attr: string, prefixData: boolean | undefined): string {
@@ -128,6 +129,7 @@ export function useDomEditAttributeCommits({
         onError: (error) => reportDomEditPersistFailure(domEditSelection, [op], error, showToast),
         shouldResync: () => isLatestCommit() && !!options.refreshAfter,
         resync: () => refreshDomEditSelectionFromPreview(domEditSelection),
+        onSettled: options.onSettled,
       });
     },
     [
@@ -153,11 +155,12 @@ export function useDomEditAttributeCommits({
   );
 
   const handleDomAttributeLiveCommit = useCallback(
-    async (attr: string, value: string | null) => {
+    async (attr: string, value: string | null, onSettled?: (ok: boolean) => void) => {
       await commitDataAttribute(attr, value, {
         label: `Edit ${attr.replace(/^(data-)?/, "").replace(/-/g, " ")}`,
         coalescePrefix: "attr-live",
         skipRefresh: true,
+        onSettled,
       });
     },
     [commitDataAttribute],

From e07f1405f6be5b9bcf0f38060fb27d6333a43b44 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Tue, 14 Jul 2026 12:20:47 -0700
Subject: [PATCH 4/8] fix(studio): version-scope Grade persist, flush pending
 edits via effect cleanup not render
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes three of the adversarial findings from the third #2416 tip
re-review:

- Grade rollback was identity-scoped but not attempt-scoped: two edits on
  the SAME element (e.g. drag Exposure, then Contrast, before Exposure's
  persist settles) could have the earlier edit's late completion stamp
  confirmedGradingRef with its now-superseded value, or revert `grading`
  out from under the newer optimistic edit. Added a monotonic per-commit
  version via the existing bumpDomEditCommitVersion primitive (the same
  one the DOM-attribute commit runner uses for the identical race) —
  persistColorGradingValue now checks both identity AND "is this still the
  latest attempt for this element" before applying any effect.

- The render-phase identity-reset block consumed shared mutable state
  (clearing the pending-persist timer, reading and nulling
  pendingPersistValueRef) directly during render. Adjusting STATE during
  render this way is React's documented pattern and safe to repeat, but
  consuming a ref this way is not: if React discarded/interrupted that
  specific render before it committed, the timer would already be
  cancelled and the pending value already nulled, with no corresponding
  effect ever running to compensate, silently losing the edit. Replaced
  with the idiomatic pattern for "clean up a per-identity resource when it
  changes" — a useEffect keyed on identityKey whose CLEANUP performs the
  cancellation/flush. A cleanup only ever runs for the effect instance
  that actually committed, closing the gap entirely. The render-phase
  block now only performs pure, idempotent state resets.

- FlatSelectRow's Preset row passes label="" (the visible "Preset" text is
  a sibling span, to avoid rendering it twice) which left the underlying
  <select> with no accessible name at all. Added a dedicated `ariaLabel`
  prop, distinct from the visible `label`, so a caller can supply a name
  without a duplicate visible label.

Also hardened FlatSlider's lostpointercapture handling: it now resyncs
the draft directly from a latestValueRef immediately, instead of only
clearing the dragging flag and waiting for the separate [value]-keyed
effect to notice — closing a narrow ordering gap where a value change
arriving while still dragging, followed by capture loss with no further
render, could otherwise leave the knob stuck.

propertyPanelFlatPrimitives.tsx crossed the 600-line file-size gate after
these changes; extracted FlatToggle (and its tests) into their own files,
matching the FlatMaskInsetRows precedent from an earlier commit in this
stack.

New/updated regression tests: same-element version race, Preset select's
aria-label. Full studio suite still at the known pre-existing 55-failure
baseline, zero regressions.
---
 ...pertyPanelFlatColorGradingSection.test.tsx |   4 +
 .../propertyPanelFlatColorGradingSection.tsx  |   1 +
 .../editor/propertyPanelFlatMediaSection.tsx  |   3 +-
 .../propertyPanelFlatPrimitives.test.tsx      |  91 +++++++-------
 .../editor/propertyPanelFlatPrimitives.tsx    |  71 ++++-------
 .../editor/propertyPanelFlatToggle.test.tsx   |  63 ++++++++++
 .../editor/propertyPanelFlatToggle.tsx        |  47 +++++++
 .../editor/useColorGradingController.test.ts  |  66 ++++++++++
 .../editor/useColorGradingController.ts       | 118 ++++++++++--------
 9 files changed, 318 insertions(+), 146 deletions(-)
 create mode 100644 packages/studio/src/components/editor/propertyPanelFlatToggle.test.tsx
 create mode 100644 packages/studio/src/components/editor/propertyPanelFlatToggle.tsx

diff --git a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx
index bf128ca0a2..9899dcd9d5 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx
@@ -238,6 +238,10 @@ describe("FlatColorGradingSection — Preset + LUT", () => {
     );
     if (!presetSelect) throw new Error("expected a preset select");
     expect(presetSelect.value).toBe("neutral");
+    // The visible "Preset" label is a sibling span outside FlatSelectRow
+    // (label="" there, to avoid rendering it twice) — the select still
+    // needs its own accessible name via the dedicated ariaLabel prop.
+    expect(presetSelect.getAttribute("aria-label")).toBe("Preset");
     act(() => {
       presetSelect.value = "fresh-pop";
       presetSelect.dispatchEvent(new Event("change", { bubbles: true }));
diff --git a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
index 3018bcf1ff..80c6547592 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
@@ -312,6 +312,7 @@ export function FlatColorGradingSection({
         <span className="text-[11px] text-panel-text-2">Preset</span>
         <FlatSelectRow
           label=""
+          ariaLabel="Preset"
           value={grading.preset ?? "neutral"}
           options={PRESET_OPTIONS}
           tier={resolveValueTier(
diff --git a/packages/studio/src/components/editor/propertyPanelFlatMediaSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatMediaSection.tsx
index b3bcca8334..c63ef12019 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatMediaSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatMediaSection.tsx
@@ -9,7 +9,8 @@ import {
   parseNumericValue,
   stripQueryAndHash,
 } from "./propertyPanelHelpers";
-import { FlatSelectRow, FlatSlider, FlatToggle } from "./propertyPanelFlatPrimitives";
+import { FlatSelectRow, FlatSlider } from "./propertyPanelFlatPrimitives";
+import { FlatToggle } from "./propertyPanelFlatToggle";
 
 // fallow-ignore-next-line complexity
 export function FlatMediaSection({
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
index dda93de0db..ed30efc249 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
@@ -9,7 +9,6 @@ import {
   FlatSegmentedRow,
   FlatSelectRow,
   FlatSlider,
-  FlatToggle,
 } from "./propertyPanelFlatPrimitives";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -822,6 +821,55 @@ describe("FlatSlider — Grade extensions", () => {
     expect(track.getAttribute("aria-valuenow")).toBe("99");
     act(() => root.unmount());
   });
+
+  it("resyncs immediately from the latest value on lostpointercapture, even when the value changed WHILE still dragging", () => {
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Opacity"
+        value={10}
+        min={0}
+        max={100}
+        tier="explicitCustom"
+        displayValue="10%"
+        onCommit={vi.fn()}
+      />,
+    );
+    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
+    if (!track) throw new Error("expected a track element");
+    Object.defineProperty(track, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
+    });
+    act(() => {
+      track.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, clientX: 30, pointerId: 1 }),
+      );
+    });
+    expect(track.getAttribute("aria-valuenow")).toBe("30");
+    // Value changes to 99 WHILE still dragging — the [value] sync effect
+    // must skip it (draggingRef is still true), so draft stays at 30.
+    act(() => {
+      root.render(
+        <FlatSlider
+          label="Opacity"
+          value={99}
+          min={0}
+          max={100}
+          tier="explicitCustom"
+          displayValue="99%"
+          onCommit={vi.fn()}
+        />,
+      );
+    });
+    expect(track.getAttribute("aria-valuenow")).toBe("30");
+    act(() => {
+      // Capture lost with NO further render afterward — if the resync
+      // depended on a subsequent [value] effect run rather than reading
+      // latestValueRef directly, this would leave the knob stuck at 30.
+      track.dispatchEvent(new Event("lostpointercapture", { bubbles: true }));
+    });
+    expect(track.getAttribute("aria-valuenow")).toBe("99");
+    act(() => root.unmount());
+  });
 });
 
 describe("FlatSelectRow", () => {
@@ -967,44 +1015,3 @@ describe("FlatSelectRow — label/value options", () => {
     act(() => root.unmount());
   });
 });
-
-describe("FlatToggle", () => {
-  it("renders the off state with a dim label and dim knob, and fires onChange(true) on click", () => {
-    const onChange = vi.fn();
-    const { host, root } = renderInto(
-      <FlatToggle label="Loop" checked={false} onChange={onChange} />,
-    );
-    const label = host.querySelector('[data-flat-toggle-label="true"]');
-    expect(label?.className).toContain("text-panel-text-3");
-    const pill = host.querySelector<HTMLButtonElement>('[data-flat-toggle="true"]');
-    expect(pill).not.toBeNull();
-    act(() => pill?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-    expect(onChange).toHaveBeenCalledWith(true);
-    act(() => root.unmount());
-  });
-
-  it("renders the on state with an emphasized label and mint knob, and fires onChange(false) on click", () => {
-    const onChange = vi.fn();
-    const { host, root } = renderInto(<FlatToggle label="Loop" checked onChange={onChange} />);
-    const label = host.querySelector('[data-flat-toggle-label="true"]');
-    expect(label?.className).toContain("text-panel-text-2");
-    const knob = host.querySelector('[data-flat-toggle-knob="true"]');
-    expect(knob?.className).toContain("bg-panel-accent");
-    const pill = host.querySelector<HTMLButtonElement>('[data-flat-toggle="true"]');
-    act(() => pill?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-    expect(onChange).toHaveBeenCalledWith(false);
-    act(() => root.unmount());
-  });
-
-  it("does not fire onChange when disabled", () => {
-    const onChange = vi.fn();
-    const { host, root } = renderInto(
-      <FlatToggle label="Loop" checked={false} disabled onChange={onChange} />,
-    );
-    const pill = host.querySelector<HTMLButtonElement>('[data-flat-toggle="true"]');
-    expect(pill?.disabled).toBe(true);
-    act(() => pill?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-    expect(onChange).not.toHaveBeenCalled();
-    act(() => root.unmount());
-  });
-});
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index 7e5afca272..3b463002d5 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -300,6 +300,11 @@ export function FlatSlider({
   // different control in between.
   const onCommitRef = useRef(onCommit);
   onCommitRef.current = onCommit;
+  // Always this render's committed value — read directly (not via the
+  // effect below) by onLostPointerCapture, so the resync there doesn't
+  // depend on ordering between the native event and the [value] effect.
+  const latestValueRef = useRef(value);
+  latestValueRef.current = value;
 
   useEffect(() => {
     if (draggingRef.current) return;
@@ -407,10 +412,16 @@ export function FlatSlider({
         onLostPointerCapture={() => {
           // Capture can be lost without either pointerup or pointercancel
           // firing first (e.g. another element steals it, or the browser
-          // reclaims it for a scroll/touch gesture) — without this,
-          // draggingRef stays stuck true and the knob permanently stops
-          // syncing to the committed value prop.
+          // reclaims it for a scroll/touch gesture). Resync immediately and
+          // directly from latestValueRef, rather than only clearing
+          // draggingRef and waiting for the [value] effect to notice —
+          // that effect depends on `value` actually changing again to
+          // re-run, so if this event and any concurrent value update are
+          // ordered unfavorably, the knob could otherwise stay stuck at
+          // its mid-drag position indefinitely.
           draggingRef.current = false;
+          setDraft(latestValueRef.current);
+          lastCommittedRef.current = latestValueRef.current;
         }}
         onKeyDown={(e) => {
           if (disabled) return;
@@ -478,6 +489,7 @@ export function FlatSlider({
 
 export function FlatSelectRow({
   label,
+  ariaLabel,
   value,
   options,
   tier,
@@ -486,6 +498,11 @@ export function FlatSelectRow({
   onReset,
 }: {
   label: string;
+  /** Accessible name when a caller renders the visible label OUTSIDE this
+   *  row (label="" to avoid a duplicate) — e.g. Grade's "Preset" row, which
+   *  shows its own label span and would otherwise leave the <select>
+   *  unnamed. Falls back to `label` when omitted. */
+  ariaLabel?: string;
   value: string;
   options: Array<string | { value: string; label: string }>;
   tier: PropertyValueTier;
@@ -515,7 +532,7 @@ export function FlatSelectRow({
           <select
             value={value}
             disabled={disabled}
-            aria-label={label || undefined}
+            aria-label={ariaLabel || label || undefined}
             onChange={(e) => onChange(e.target.value)}
             className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-none disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`}
           >
@@ -551,49 +568,3 @@ export function FlatSelectRow({
     </div>
   );
 }
-
-/* ------------------------------------------------------------------ */
-/*  FlatToggle — 24×14 pill switch                                     */
-/* ------------------------------------------------------------------ */
-
-export function FlatToggle({
-  label,
-  checked,
-  disabled,
-  onChange,
-}: {
-  label: string;
-  checked: boolean;
-  disabled?: boolean;
-  onChange: (next: boolean) => void;
-}) {
-  return (
-    <div className="flex min-h-[30px] items-center justify-between">
-      <span
-        data-flat-toggle-label="true"
-        className={`text-[11px] ${checked ? "text-panel-text-2" : "text-panel-text-3"}`}
-      >
-        {label}
-      </span>
-      <button
-        type="button"
-        data-flat-toggle="true"
-        role="switch"
-        aria-checked={checked}
-        aria-label={label}
-        disabled={disabled}
-        onClick={() => onChange(!checked)}
-        className={`relative h-[14px] w-6 flex-shrink-0 rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
-          checked ? "bg-panel-accent/35" : "bg-panel-hover"
-        }`}
-      >
-        <span
-          data-flat-toggle-knob="true"
-          className={`absolute top-0.5 h-2.5 w-2.5 rounded-full transition-all ${
-            checked ? "right-0.5 bg-panel-accent" : "left-0.5 bg-panel-text-4"
-          }`}
-        />
-      </button>
-    </div>
-  );
-}
diff --git a/packages/studio/src/components/editor/propertyPanelFlatToggle.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatToggle.test.tsx
new file mode 100644
index 0000000000..e169569375
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelFlatToggle.test.tsx
@@ -0,0 +1,63 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FlatToggle } from "./propertyPanelFlatToggle";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function renderInto(node: React.ReactElement) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(node);
+  });
+  return { host, root };
+}
+
+describe("FlatToggle", () => {
+  it("renders the off state with a dim label and dim knob, and fires onChange(true) on click", () => {
+    const onChange = vi.fn();
+    const { host, root } = renderInto(
+      <FlatToggle label="Loop" checked={false} onChange={onChange} />,
+    );
+    const label = host.querySelector('[data-flat-toggle-label="true"]');
+    expect(label?.className).toContain("text-panel-text-3");
+    const pill = host.querySelector<HTMLButtonElement>('[data-flat-toggle="true"]');
+    expect(pill).not.toBeNull();
+    act(() => pill?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onChange).toHaveBeenCalledWith(true);
+    act(() => root.unmount());
+  });
+
+  it("renders the on state with an emphasized label and mint knob, and fires onChange(false) on click", () => {
+    const onChange = vi.fn();
+    const { host, root } = renderInto(<FlatToggle label="Loop" checked onChange={onChange} />);
+    const label = host.querySelector('[data-flat-toggle-label="true"]');
+    expect(label?.className).toContain("text-panel-text-2");
+    const knob = host.querySelector('[data-flat-toggle-knob="true"]');
+    expect(knob?.className).toContain("bg-panel-accent");
+    const pill = host.querySelector<HTMLButtonElement>('[data-flat-toggle="true"]');
+    act(() => pill?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onChange).toHaveBeenCalledWith(false);
+    act(() => root.unmount());
+  });
+
+  it("does not fire onChange when disabled", () => {
+    const onChange = vi.fn();
+    const { host, root } = renderInto(
+      <FlatToggle label="Loop" checked={false} disabled onChange={onChange} />,
+    );
+    const pill = host.querySelector<HTMLButtonElement>('[data-flat-toggle="true"]');
+    expect(pill?.disabled).toBe(true);
+    act(() => pill?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onChange).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+});
diff --git a/packages/studio/src/components/editor/propertyPanelFlatToggle.tsx b/packages/studio/src/components/editor/propertyPanelFlatToggle.tsx
new file mode 100644
index 0000000000..5094306464
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelFlatToggle.tsx
@@ -0,0 +1,47 @@
+/* ------------------------------------------------------------------ */
+/*  FlatToggle — 24×14 pill switch                                     */
+/*  (split out of propertyPanelFlatPrimitives.tsx to stay under the    */
+/*  600-line file-size gate)                                           */
+/* ------------------------------------------------------------------ */
+
+export function FlatToggle({
+  label,
+  checked,
+  disabled,
+  onChange,
+}: {
+  label: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (next: boolean) => void;
+}) {
+  return (
+    <div className="flex min-h-[30px] items-center justify-between">
+      <span
+        data-flat-toggle-label="true"
+        className={`text-[11px] ${checked ? "text-panel-text-2" : "text-panel-text-3"}`}
+      >
+        {label}
+      </span>
+      <button
+        type="button"
+        data-flat-toggle="true"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
+        disabled={disabled}
+        onClick={() => onChange(!checked)}
+        className={`relative h-[14px] w-6 flex-shrink-0 rounded-full transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+          checked ? "bg-panel-accent/35" : "bg-panel-hover"
+        }`}
+      >
+        <span
+          data-flat-toggle-knob="true"
+          className={`absolute top-0.5 h-2.5 w-2.5 rounded-full transition-all ${
+            checked ? "right-0.5 bg-panel-accent" : "left-0.5 bg-panel-text-4"
+          }`}
+        />
+      </button>
+    </div>
+  );
+}
diff --git a/packages/studio/src/components/editor/useColorGradingController.test.ts b/packages/studio/src/components/editor/useColorGradingController.test.ts
index a871ca15cc..5e74587e6f 100644
--- a/packages/studio/src/components/editor/useColorGradingController.test.ts
+++ b/packages/studio/src/components/editor/useColorGradingController.test.ts
@@ -13,6 +13,12 @@ function freshPopGrading() {
   return next;
 }
 
+function naturalLiftGrading() {
+  const next = normalizeHfColorGrading({ preset: "natural-lift", intensity: 1 });
+  if (!next) throw new Error("expected natural-lift preset to normalize");
+  return next;
+}
+
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
@@ -231,6 +237,66 @@ describe("useColorGradingController", () => {
     vi.useRealTimers();
   });
 
+  it("a stale in-flight persist for edit A does not clobber edit B's state — SAME element, no selection change", async () => {
+    vi.useFakeTimers();
+    let resolveA: (() => void) | undefined;
+    let capturedOnSettledA: ((ok: boolean) => void) | undefined;
+    const onSetAttributeLive = vi
+      .fn()
+      // Edit A (fresh-pop): captures its onSettled and never resolves until
+      // resolveA() is called below — simulates a slow persist.
+      .mockImplementationOnce(
+        (_attr: string, _value: string | null, onSettled?: (ok: boolean) => void) => {
+          capturedOnSettledA = onSettled;
+          return new Promise<void>((resolve) => {
+            resolveA = resolve;
+          });
+        },
+      )
+      // Edit B (natural-lift): settles immediately and successfully.
+      .mockImplementationOnce(
+        (_attr: string, _value: string | null, onSettled?: (ok: boolean) => void) => {
+          onSettled?.(true);
+          return Promise.resolve();
+        },
+      );
+    const { root, getState } = renderHook(onSetAttributeLive);
+
+    act(() => {
+      getState().commitColorGrading(freshPopGrading());
+    });
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    expect(onSetAttributeLive).toHaveBeenCalledTimes(1); // A's persist now in flight
+
+    // B commits on the SAME element before A's persist has settled.
+    act(() => {
+      getState().commitColorGrading(naturalLiftGrading());
+    });
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    expect(onSetAttributeLive).toHaveBeenCalledTimes(2); // B's persist has already settled (mock resolves sync)
+    expect(getState().grading.preset).toBe("natural-lift");
+
+    // NOW A's stale persist finally settles as a FAILURE — must not revert
+    // `grading` (which now correctly shows B's newer edit) back to the
+    // pre-A baseline ("neutral"), and must not stamp confirmedGradingRef
+    // with A's now-superseded attempt on success either.
+    act(() => {
+      capturedOnSettledA?.(false);
+      resolveA?.();
+    });
+    await act(async () => {
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    expect(getState().grading.preset).toBe("natural-lift");
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
   it("resetGrading returns to the neutral preset", () => {
     const { root, getState } = renderHook(vi.fn());
     act(() => {
diff --git a/packages/studio/src/components/editor/useColorGradingController.ts b/packages/studio/src/components/editor/useColorGradingController.ts
index ebbcefbafa..38aa939cfc 100644
--- a/packages/studio/src/components/editor/useColorGradingController.ts
+++ b/packages/studio/src/components/editor/useColorGradingController.ts
@@ -13,6 +13,7 @@ import {
 } from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
 import { selectionIdentityKey, stripQueryAndHash } from "./propertyPanelHelpers";
+import { bumpDomEditCommitVersion } from "../../hooks/domEditCommitRunner";
 import {
   acceptStudioRuntimeMessage,
   postRuntimeControlMessage,
@@ -194,65 +195,45 @@ export function useColorGradingController({
   const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pendingPersistValueRef = useRef<string | null | undefined>(undefined);
   const pendingPersistGradingRef = useRef<NormalizedHfColorGrading | null>(null);
-  // Populated (pure ref write only) during the render-phase identity-change
-  // reset below; the actual write happens in an effect, never during render.
-  const queuedOutgoingFlushRef = useRef<{
-    setAttributeLive: typeof onSetAttributeLive;
-    value: string | null;
-  } | null>(null);
   // The last grading value actually confirmed saved — distinct from `grading`
   // (the optimistic value shown immediately on commit). A rejected persist
   // reverts to this instead of leaving the UI permanently showing a value
   // that was never written.
   const confirmedGradingRef = useRef(grading);
+  // Monotonic per-commit version — guards against TWO edits on the SAME
+  // element racing (not just a selection change). If edit A's persist is
+  // still in flight when edit B commits, A's eventual settle must not stamp
+  // confirmedGradingRef with its now-superseded value or revert `grading`
+  // out from under B's newer optimistic state.
+  const gradingVersionRef = useRef(0);
   const statusTimersRef = useRef<number[]>([]);
   const onSetAttributeLiveRef = useRef(onSetAttributeLive);
   const latestGradingRef = useRef(grading);
   const compareEnabledRef = useRef(compareEnabled);
-  // Captured before reassignment below — still bound to whatever selection
-  // was current on the PREVIOUS render. `commitDataAttribute` (the eventual
-  // callee) closes over `domEditSelection` in its own useCallback deps, so a
-  // selection change mints an entirely new `onSetAttributeLive` closure; this
-  // stale reference is exactly what still targets the outgoing element.
-  const previousOnSetAttributeLive = onSetAttributeLiveRef.current;
   onSetAttributeLiveRef.current = onSetAttributeLive;
   latestGradingRef.current = grading;
   compareEnabledRef.current = compareEnabled;
 
-  // Reset all per-element state when the selection changes to a different
+  // Reset all per-element STATE when the selection changes to a different
   // element — unlike the legacy ColorGradingSection (remounted via a
   // `key={selectionIdentityKey(element)}` from its parent), this hook is
   // called unconditionally on every render, so nothing naturally remounts it.
   // Without this, switching selection reuses the previous element's grading/
-  // compare/mediaMetadata state and can commit stale pending work onto the
-  // new target. Adjusting state during render (comparing against a ref) is
-  // React's documented pattern for STATE updates specifically — resolving in
-  // the same render pass instead of flashing stale state for one frame. It
-  // does NOT license side effects: only pure ref/state writes happen in this
-  // block. The actual outgoing-element flush is enqueued here and performed
-  // in the effect below, after commit.
+  // compare/mediaMetadata state. Adjusting state during render (comparing
+  // against a ref) is React's documented pattern for STATE updates
+  // specifically — it resolves in the same render pass instead of flashing
+  // stale state for one frame, and is safe to repeat if React discards and
+  // re-runs this render, since every value here is a pure function of
+  // `element`. It must NOT be used for side effects or for consuming
+  // shared mutable state (like the pending-persist timer/value) — a
+  // discarded render would have already consumed them with no corresponding
+  // effect ever running to compensate. That part happens below, in an
+  // effect's cleanup, which is guaranteed to run only for a render that
+  // actually committed.
   const identityKey = selectionIdentityKey(element);
   const identityKeyRef = useRef(identityKey);
   if (identityKeyRef.current !== identityKey) {
     identityKeyRef.current = identityKey;
-    if (persistTimerRef.current) {
-      clearTimeout(persistTimerRef.current);
-      persistTimerRef.current = null;
-    }
-    // Flush — don't discard — a still-pending edit for the OUTGOING element.
-    // Cancelling the debounce without writing would silently drop whatever
-    // the user just changed; targeting it at the callback bound to the OLD
-    // selection (captured above) keeps it from landing on the new element.
-    if (pendingPersistValueRef.current !== undefined) {
-      queuedOutgoingFlushRef.current = {
-        setAttributeLive: previousOnSetAttributeLive,
-        value: pendingPersistValueRef.current,
-      };
-    }
-    pendingPersistValueRef.current = undefined;
-    pendingPersistGradingRef.current = null;
-    for (const timer of statusTimersRef.current) clearTimeout(timer);
-    statusTimersRef.current = [];
     const freshGrading = readColorGradingFromElement(element);
     latestGradingRef.current = freshGrading;
     confirmedGradingRef.current = freshGrading;
@@ -265,16 +246,29 @@ export function useColorGradingController({
     setMediaMetadata(null);
   }
 
-  // Performs the outgoing-element flush queued above — deliberately in an
-  // effect (post-commit), not inline in the render-phase block, since
-  // writing to disk is a real side effect and must not run during render
-  // (React may call render more than once per commit without this code ever
-  // becoming visible).
+  // Flushes — never discards — a still-pending edit when selection moves to
+  // a different element, and cancels the debounce timer. Implemented as an
+  // effect CLEANUP (not the render-phase block above, and not a queued ref
+  // consumed by a separate effect): a cleanup only ever runs for the
+  // specific effect instance that actually committed for `identityKey`, so
+  // there's no window where a discarded/interrupted render could have
+  // already consumed pendingPersistValueRef without this ever running to
+  // compensate. The cleanup's closure captures onSetAttributeLive/target
+  // bound to the OUTGOING identity, since it runs before the next effect
+  // instance (for the NEW identity) is established.
   useEffect(() => {
-    const queued = queuedOutgoingFlushRef.current;
-    if (!queued) return;
-    queuedOutgoingFlushRef.current = null;
-    trackStudioPendingEdit(queued.setAttributeLive(COLOR_GRADING_DATA_KEY, queued.value));
+    return () => {
+      if (persistTimerRef.current) {
+        clearTimeout(persistTimerRef.current);
+        persistTimerRef.current = null;
+      }
+      if (pendingPersistValueRef.current === undefined) return;
+      const value = pendingPersistValueRef.current;
+      pendingPersistValueRef.current = undefined;
+      pendingPersistGradingRef.current = null;
+      trackStudioPendingEdit(onSetAttributeLive(COLOR_GRADING_DATA_KEY, value));
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- identityKey is the intended trigger; see comment above
   }, [identityKey]);
 
   const target = useMemo(
@@ -354,13 +348,18 @@ export function useColorGradingController({
       value: string | null,
       attemptedGrading: NormalizedHfColorGrading,
       attemptIdentityKey: string,
+      isLatestAttempt: () => boolean,
     ) => {
-      // Selection may move on to a different element while this is in
-      // flight — the identity-reset block already gave THAT element its own
-      // confirmedGradingRef baseline, so a result arriving for an element
-      // we've left must not touch its state.
+      // Two guards, not one: identity (selection moved to a DIFFERENT
+      // element — that element already got its own confirmedGradingRef
+      // baseline from the reset block) and version (a NEWER edit landed on
+      // the SAME element — e.g. the user dragged Exposure, then Contrast,
+      // before Exposure's persist settled; Exposure settling afterward must
+      // not stamp confirmedGradingRef with its now-superseded value or
+      // revert `grading` out from under Contrast's newer optimistic state).
       const applySettled = (ok: boolean) => {
         if (identityKeyRef.current !== attemptIdentityKey) return;
+        if (!isLatestAttempt()) return;
         if (ok) {
           confirmedGradingRef.current = attemptedGrading;
           return;
@@ -404,7 +403,11 @@ export function useColorGradingController({
     const attemptedGrading = pendingPersistGradingRef.current ?? latestGradingRef.current;
     pendingPersistValueRef.current = undefined;
     pendingPersistGradingRef.current = null;
-    return persistColorGradingValue(value, attemptedGrading, identityKeyRef.current);
+    // A direct flush (unmount / explicit "flush all pending edits") reads
+    // pendingPersistValueRef synchronously right now, not a stored version
+    // from an earlier commit — there's nothing else it could be racing
+    // against, so it's trivially "the latest attempt" by construction.
+    return persistColorGradingValue(value, attemptedGrading, identityKeyRef.current, () => true);
   }, [persistColorGradingValue]);
 
   useEffect(() => addStudioPendingEditFlushListener(flushPendingPersist), [flushPendingPersist]);
@@ -495,13 +498,22 @@ export function useColorGradingController({
       // moved on, at which point identityKeyRef.current would no longer
       // describe the element this edit was actually made for.
       const attemptIdentityKey = identityKeyRef.current;
+      // Bumps a monotonic version and hands back a checker bound to THIS
+      // specific commit — reused from the same primitive the DOM-attribute
+      // commit runner uses for the identical same-target-rapid-edits race.
+      const isLatestAttempt = bumpDomEditCommitVersion(gradingVersionRef);
       persistTimerRef.current = setTimeout(() => {
         const value = pendingPersistValueRef.current;
         const attemptedGrading = pendingPersistGradingRef.current ?? nextGrading;
         pendingPersistValueRef.current = undefined;
         pendingPersistGradingRef.current = null;
         persistTimerRef.current = null;
-        void persistColorGradingValue(value ?? null, attemptedGrading, attemptIdentityKey);
+        void persistColorGradingValue(
+          value ?? null,
+          attemptedGrading,
+          attemptIdentityKey,
+          isLatestAttempt,
+        );
       }, 350);
     },
     [persistColorGradingValue, postColorGrading, postCompare, scheduleRuntimeStatusRefresh],

From fc70d5f3310b25d7088d351375d1824202814f16 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Tue, 14 Jul 2026 12:55:28 -0700
Subject: [PATCH 5/8] fix(studio): guard slider release reentrancy, scope Grade
 persist to schedule-time callback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes the four blockers from the #2416 re-review at head d6a40c38b:

- FlatSlider's onPointerUp calls releasePointerCapture() explicitly, which
  fires lostpointercapture SYNCHRONOUSLY in real browsers — the prior
  unconditional onLostPointerCapture resync ran mid-onPointerUp, flipping
  draggingRef false before onPointerUp's own check, silently dropping every
  normal drag-release's final commitDraft(). happy-dom doesn't replicate the
  synchronous cascade, so this shipped without a failing test. Added an
  explicitReleaseRef flag set right before each deliberate
  releasePointerCapture() call so onLostPointerCapture can tell "our own
  release, caller's logic already handles it" apart from a genuine external
  capture loss. Added a regression test that monkey-patches
  releasePointerCapture to reproduce the real-browser ordering.

- persistColorGradingValue read onSetAttributeLiveRef.current (reassigned
  every render) instead of the callback live when the debounced edit was
  scheduled — a timer for element A firing after a re-render for element B
  would wrongly call B's callback with A's data. Removed the ref; the
  callback is now an explicit parameter captured by commitColorGrading's own
  closure (added to its useCallback deps) and threaded through to
  persistColorGradingValue and flushPendingPersist.

- flushPendingPersist passed () => true as its isLatestAttempt checker,
  bypassing the per-commit version guard entirely. Now calls
  bumpDomEditCommitVersion(gradingVersionRef) like a regular debounced
  commit, so a newer edit landing before the flushed write settles still
  wins the race.

- The selection-identity cleanup effect stopped clearing statusTimersRef
  during an earlier refactor — stale RUNTIME_STATUS_REFRESH_DELAYS timers
  for an outgoing element could fire after switching selection and stamp
  the new element's runtimeStatus with the old element's answer. Restored
  the clear in the same effect cleanup.

Also gave the Custom LUT and "Copy grade to" scope <select> controls
aria-labels — both had their visible text in a sibling span/text node, so
neither had an accessible name.

Full studio suite still at the known pre-existing 55-failure baseline
(variablePromoteIntegration, useGsapPropertyDebounce, sdkCutover(Parity),
sdkResolverShadow), zero new regressions. Typecheck, oxlint, oxfmt clean.
---
 ...pertyPanelFlatColorGradingSection.test.tsx |  8 +++
 .../propertyPanelFlatColorGradingSection.tsx  |  2 +
 .../propertyPanelFlatPrimitives.test.tsx      | 44 +++++++++++++++
 .../editor/propertyPanelFlatPrimitives.tsx    | 40 +++++++++++---
 .../editor/useColorGradingController.ts       | 55 ++++++++++++++-----
 5 files changed, 126 insertions(+), 23 deletions(-)

diff --git a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx
index 9899dcd9d5..db615065e9 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx
@@ -278,6 +278,7 @@ describe("FlatColorGradingSection — Preset + LUT", () => {
     act(() => lutToggle?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
     const lutSelect = host.querySelector<HTMLSelectElement>('[data-flat-grade-lut-select="true"]');
     if (!lutSelect) throw new Error("expected a LUT catalog select");
+    expect(lutSelect.getAttribute("aria-label")).toBe("Custom LUT");
     act(() => {
       lutSelect.value = "assets/luts/cool.cube";
       lutSelect.dispatchEvent(new Event("change", { bubbles: true }));
@@ -611,4 +612,11 @@ describe("FlatColorGradingSection — HDR banner and Apply scope", () => {
     expect(onApplyToScope).toHaveBeenCalledTimes(1);
     act(() => root.unmount());
   });
+
+  it("gives the Copy-grade-to scope select an accessible name — the visible text sits in a sibling span, not a <label>", () => {
+    const { host, root } = renderInto(<FlatColorGradingSection {...neutralPropsBase()} />);
+    const scopeSelect = host.querySelector<HTMLSelectElement>('[aria-label="Copy grade to"]');
+    expect(scopeSelect).not.toBeNull();
+    act(() => root.unmount());
+  });
 });
diff --git a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
index 80c6547592..ed42e6d3e9 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.tsx
@@ -359,6 +359,7 @@ export function FlatColorGradingSection({
               </span>
               <select
                 data-flat-grade-lut-select="true"
+                aria-label="Custom LUT"
                 value={lut?.src ?? ""}
                 onChange={(e) => {
                   const src = e.target.value;
@@ -525,6 +526,7 @@ export function FlatColorGradingSection({
           <span className="flex items-center gap-1.5 text-[11px] text-panel-text-2">
             Copy grade to
             <select
+              aria-label="Copy grade to"
               value={applyScope}
               onChange={(e) => onSetApplyScope(e.target.value as "source-file" | "project")}
               disabled={applyBusy}
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
index ed30efc249..9346704b87 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
@@ -429,6 +429,50 @@ describe("FlatSlider", () => {
     expect(onCommit).not.toHaveBeenCalled();
     act(() => root.unmount());
   });
+
+  it("still commits the release position when releasePointerCapture synchronously fires lostpointercapture (real-browser behavior happy-dom doesn't replicate)", () => {
+    const onCommit = vi.fn();
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Opacity"
+        value={10}
+        min={0}
+        max={100}
+        tier="explicitCustom"
+        displayValue="10%"
+        onCommit={onCommit}
+      />,
+    );
+    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
+    if (!track) throw new Error("expected a track element");
+    Object.defineProperty(track, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
+    });
+    // Real browsers fire lostpointercapture SYNCHRONOUSLY, mid-call, when
+    // releasePointerCapture() is invoked — happy-dom does not replicate this,
+    // so patch it in to reproduce the exact reentrancy hazard onPointerUp
+    // must guard against.
+    const originalRelease = track.releasePointerCapture.bind(track);
+    track.releasePointerCapture = (pointerId: number) => {
+      originalRelease(pointerId);
+      track.dispatchEvent(new Event("lostpointercapture", { bubbles: true }));
+    };
+    act(() => {
+      track.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, clientX: 30, pointerId: 1 }),
+      );
+    });
+    act(() => {
+      track.dispatchEvent(
+        new PointerEvent("pointerup", { bubbles: true, clientX: 80, pointerId: 1 }),
+      );
+    });
+    // The real release position (80), not a rollback to the pre-drag value (10)
+    // caused by onLostPointerCapture resyncing mid-handler.
+    expect(onCommit).toHaveBeenLastCalledWith(80);
+    expect(track.getAttribute("aria-valuenow")).toBe("80");
+    act(() => root.unmount());
+  });
 });
 
 describe("FlatSlider — Grade extensions", () => {
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index 3b463002d5..21572a51d7 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -305,6 +305,19 @@ export function FlatSlider({
   // depend on ordering between the native event and the [value] effect.
   const latestValueRef = useRef(value);
   latestValueRef.current = value;
+  // releasePointerCapture() (called explicitly below in onPointerUp/
+  // onPointerCancel) fires lostpointercapture SYNCHRONOUSLY in real
+  // browsers — i.e. onLostPointerCapture runs mid-onPointerUp, BEFORE
+  // onPointerUp's own draggingRef check and final commitDraft. Without this
+  // flag, a NORMAL release would have onLostPointerCapture reset
+  // draggingRef/draft to the stale value first, making onPointerUp's own
+  // "if (!draggingRef.current) return" bail out and silently drop the
+  // real final-position commit. Set right before each explicit release
+  // call so onLostPointerCapture can tell "our own release, the caller's
+  // own logic already handles it" apart from a genuine EXTERNAL capture
+  // loss (another element steals it, or the browser reclaims it for a
+  // scroll/touch gesture) where no other handler is about to run.
+  const explicitReleaseRef = useRef(false);
 
   useEffect(() => {
     if (draggingRef.current) return;
@@ -390,6 +403,7 @@ export function FlatSlider({
         }}
         onPointerUp={(e) => {
           if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+            explicitReleaseRef.current = true;
             e.currentTarget.releasePointerCapture(e.pointerId);
           }
           if (disabled) return;
@@ -406,19 +420,27 @@ export function FlatSlider({
         onPointerCancel={(e) => {
           draggingRef.current = false;
           if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+            explicitReleaseRef.current = true;
             e.currentTarget.releasePointerCapture(e.pointerId);
           }
         }}
         onLostPointerCapture={() => {
-          // Capture can be lost without either pointerup or pointercancel
-          // firing first (e.g. another element steals it, or the browser
-          // reclaims it for a scroll/touch gesture). Resync immediately and
-          // directly from latestValueRef, rather than only clearing
-          // draggingRef and waiting for the [value] effect to notice —
-          // that effect depends on `value` actually changing again to
-          // re-run, so if this event and any concurrent value update are
-          // ordered unfavorably, the knob could otherwise stay stuck at
-          // its mid-drag position indefinitely.
+          if (explicitReleaseRef.current) {
+            // Our own onPointerUp/onPointerCancel just released capture —
+            // their own logic already handles (or intentionally leaves)
+            // draggingRef/draft correctly. Resyncing here too would race
+            // onPointerUp's still-pending final commitDraft(stepped) below
+            // this call, since draggingRef flipping false would make its
+            // own "if (!draggingRef.current) return" bail out first.
+            explicitReleaseRef.current = false;
+            return;
+          }
+          // A genuine EXTERNAL capture loss (another element steals it, or
+          // the browser reclaims it for a scroll/touch gesture) — no other
+          // handler is about to run, so resync immediately and directly
+          // from latestValueRef rather than only clearing draggingRef and
+          // waiting for the [value] effect to notice (that effect depends
+          // on `value` actually changing again to re-run).
           draggingRef.current = false;
           setDraft(latestValueRef.current);
           lastCommittedRef.current = latestValueRef.current;
diff --git a/packages/studio/src/components/editor/useColorGradingController.ts b/packages/studio/src/components/editor/useColorGradingController.ts
index 38aa939cfc..19921f9f1f 100644
--- a/packages/studio/src/components/editor/useColorGradingController.ts
+++ b/packages/studio/src/components/editor/useColorGradingController.ts
@@ -207,10 +207,8 @@ export function useColorGradingController({
   // out from under B's newer optimistic state.
   const gradingVersionRef = useRef(0);
   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;
 
@@ -258,6 +256,12 @@ export function useColorGradingController({
   // instance (for the NEW identity) is established.
   useEffect(() => {
     return () => {
+      // Stale runtime-status timers scheduled for the OUTGOING element must
+      // not fire after this: readRuntimeColorGradingStatus closes over
+      // `target`, so an old timer firing post-switch would stamp the NEW
+      // element's runtimeStatus with the OLD element's answer.
+      for (const timer of statusTimersRef.current) clearTimeout(timer);
+      statusTimersRef.current = [];
       if (persistTimerRef.current) {
         clearTimeout(persistTimerRef.current);
         persistTimerRef.current = null;
@@ -349,6 +353,11 @@ export function useColorGradingController({
       attemptedGrading: NormalizedHfColorGrading,
       attemptIdentityKey: string,
       isLatestAttempt: () => boolean,
+      setAttributeLive: (
+        attr: string,
+        value: string | null,
+        onSettled?: (ok: boolean) => void,
+      ) => void | Promise<void>,
     ) => {
       // Two guards, not one: identity (selection moved to a DIFFERENT
       // element — that element already got its own confirmedGradingRef
@@ -378,11 +387,12 @@ export function useColorGradingController({
       // handler here alone would be dead code against the actual Studio
       // callback. The `.catch` below is a fallback for any OTHER
       // implementation of onSetAttributeLive that rejects instead.
-      const result = onSetAttributeLiveRef.current(
-        COLOR_GRADING_DATA_KEY,
-        value ?? null,
-        applySettled,
-      );
+      // `setAttributeLive` is passed in by the caller rather than read from a
+      // ref: a debounced persist for element A must call the callback that
+      // was live when A's edit was SCHEDULED, not whatever the ref holds by
+      // the time the timer fires — a "latest" ref would let a stale timer
+      // wrongly target a since-selected element B's callback.
+      const result = setAttributeLive(COLOR_GRADING_DATA_KEY, value ?? null, applySettled);
       return trackStudioPendingEdit(
         Promise.resolve(result).then(
           () => undefined,
@@ -403,12 +413,22 @@ export function useColorGradingController({
     const attemptedGrading = pendingPersistGradingRef.current ?? latestGradingRef.current;
     pendingPersistValueRef.current = undefined;
     pendingPersistGradingRef.current = null;
-    // A direct flush (unmount / explicit "flush all pending edits") reads
-    // pendingPersistValueRef synchronously right now, not a stored version
-    // from an earlier commit — there's nothing else it could be racing
-    // against, so it's trivially "the latest attempt" by construction.
-    return persistColorGradingValue(value, attemptedGrading, identityKeyRef.current, () => true);
-  }, [persistColorGradingValue]);
+    // A flush cancels the pending debounce timer above, so this becomes the
+    // one-and-only in-flight attempt for this element — bump the version so
+    // it still registers as "the latest attempt" against the same guard a
+    // regular debounced commit uses, instead of unconditionally claiming
+    // that title. Without this, a newer edit landing after the flush starts
+    // but before it settles would have its own eventual settle silently
+    // lose the version race to this unconditionally-"latest" flush.
+    const isLatestAttempt = bumpDomEditCommitVersion(gradingVersionRef);
+    return persistColorGradingValue(
+      value,
+      attemptedGrading,
+      identityKeyRef.current,
+      isLatestAttempt,
+      onSetAttributeLive,
+    );
+  }, [onSetAttributeLive, persistColorGradingValue]);
 
   useEffect(() => addStudioPendingEditFlushListener(flushPendingPersist), [flushPendingPersist]);
 
@@ -513,10 +533,17 @@ export function useColorGradingController({
           attemptedGrading,
           attemptIdentityKey,
           isLatestAttempt,
+          onSetAttributeLive,
         );
       }, 350);
     },
-    [persistColorGradingValue, postColorGrading, postCompare, scheduleRuntimeStatusRefresh],
+    [
+      onSetAttributeLive,
+      persistColorGradingValue,
+      postColorGrading,
+      postCompare,
+      scheduleRuntimeStatusRefresh,
+    ],
   );
 
   const commitCompare = useCallback(

From 28304be74a450afc27882e8cb6af05074876dffc Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Tue, 14 Jul 2026 13:19:07 -0700
Subject: [PATCH 6/8] fix(studio): cancel FlatSlider drags on Escape and
 right-click
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A fresh full-stack re-review checked 15 PR heads independently. Cross-
checked all 9 remaining claims against the actual current tip:

- #2120 (id/selector key qualification, Hide All no-op/race, variable
  parity), #2121 (opacity-zero fallback), #2122 (GSAP preview sibling
  resolution, scrub-label), #2124/#2126 (negative metadata cache), and
  the keyboard-access half of #2121/#2186 were all already fixed by a
  later commit in this same stack (65954c380, PR #2225) — the reviewed
  heads predate it. Verified each in the current source rather than
  taking the isolated-head review at face value.

- #2186's "no ESC/right-click cancel during drag" was the one claim that
  held up: FlatSlider had keyboard arrow-key support but no way to abort
  an in-progress pointer drag. Escape now reverts to the pre-drag value
  and releases pointer capture; a right-click (contextmenu) during a drag
  does the same instead of committing whatever position the pointer last
  reached while the native context menu opens over the slider. Both go
  through commitDraft (not just a visual reset) since the drag's leading-
  edge commit in onPointerDown may already have applied an intermediate
  value that needs actually undoing, not just hiding.

propertyPanelFlatPrimitives.tsx crossed the 600-line file-size gate after
this change; extracted FlatSelectRow into its own file, matching the
FlatToggle/FlatMaskInsetRows precedent from earlier in this stack.

New regression tests for Escape-cancel and contextmenu-cancel. Full
studio suite still at the known pre-existing 55-failure baseline, zero
new regressions. Typecheck/oxlint/oxfmt clean.
---
 .../propertyPanelFlatPrimitives.test.tsx      |  80 ++++++++++++
 .../editor/propertyPanelFlatPrimitives.tsx    | 122 ++++++------------
 .../editor/propertyPanelFlatSelectRow.tsx     |  92 +++++++++++++
 3 files changed, 209 insertions(+), 85 deletions(-)
 create mode 100644 packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx

diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
index 9346704b87..fabb286a39 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
@@ -473,6 +473,86 @@ describe("FlatSlider", () => {
     expect(track.getAttribute("aria-valuenow")).toBe("80");
     act(() => root.unmount());
   });
+
+  it("Escape during a drag reverts to the pre-drag value and releases pointer capture, instead of leaving the last dragged-to position committed", () => {
+    const onCommit = vi.fn();
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Opacity"
+        value={10}
+        min={0}
+        max={100}
+        tier="explicitCustom"
+        displayValue="10%"
+        onCommit={onCommit}
+      />,
+    );
+    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
+    if (!track) throw new Error("expected a track element");
+    Object.defineProperty(track, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
+    });
+    act(() => {
+      track.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, clientX: 30, pointerId: 1 }),
+      );
+    });
+    // The leading-edge commit already applied the dragged-to value (30).
+    expect(onCommit).toHaveBeenLastCalledWith(30);
+    act(() => {
+      track.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+      );
+    });
+    expect(onCommit).toHaveBeenLastCalledWith(10);
+    expect(track.getAttribute("aria-valuenow")).toBe("10");
+    expect(track.hasPointerCapture(1)).toBe(false);
+    // A subsequent pointermove for the now-released pointer must not resume
+    // the cancelled drag.
+    onCommit.mockClear();
+    act(() => {
+      track.dispatchEvent(
+        new PointerEvent("pointermove", { bubbles: true, clientX: 80, pointerId: 1 }),
+      );
+    });
+    expect(onCommit).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("right-click (contextmenu) during a drag cancels it and reverts to the pre-drag value, instead of committing the last dragged-to position", () => {
+    const onCommit = vi.fn();
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Opacity"
+        value={10}
+        min={0}
+        max={100}
+        tier="explicitCustom"
+        displayValue="10%"
+        onCommit={onCommit}
+      />,
+    );
+    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
+    if (!track) throw new Error("expected a track element");
+    Object.defineProperty(track, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
+    });
+    act(() => {
+      track.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, clientX: 65, pointerId: 1 }),
+      );
+    });
+    expect(onCommit).toHaveBeenLastCalledWith(65);
+    const contextMenuEvent = new MouseEvent("contextmenu", { bubbles: true, cancelable: true });
+    act(() => {
+      track.dispatchEvent(contextMenuEvent);
+    });
+    expect(contextMenuEvent.defaultPrevented).toBe(true);
+    expect(onCommit).toHaveBeenLastCalledWith(10);
+    expect(track.getAttribute("aria-valuenow")).toBe("10");
+    expect(track.hasPointerCapture(1)).toBe(false);
+    act(() => root.unmount());
+  });
 });
 
 describe("FlatSlider — Grade extensions", () => {
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index 21572a51d7..86205546cd 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -318,6 +318,11 @@ export function FlatSlider({
   // loss (another element steals it, or the browser reclaims it for a
   // scroll/touch gesture) where no other handler is about to run.
   const explicitReleaseRef = useRef(false);
+  // The committed value when the current drag began — Escape and right-click
+  // both cancel an in-progress drag by reverting to this, not by leaving
+  // whatever position the pointer last reached committed.
+  const dragStartValueRef = useRef(value);
+  const activePointerIdRef = useRef<number | null>(null);
 
   useEffect(() => {
     if (draggingRef.current) return;
@@ -372,6 +377,22 @@ export function FlatSlider({
       }, 40 - elapsed);
     }
   };
+  // Reverts to the pre-drag value instead of leaving whatever position the
+  // pointer last reached committed — the drag's own leading-edge commit (in
+  // onPointerDown) may already have applied an intermediate value, so this
+  // must go through commitDraft (not just a visual setDraft) to actually
+  // undo it.
+  const cancelDrag = (target: HTMLDivElement) => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    const pointerId = activePointerIdRef.current;
+    if (pointerId !== null && target.hasPointerCapture(pointerId)) {
+      explicitReleaseRef.current = true;
+      target.releasePointerCapture(pointerId);
+    }
+    setDraft(dragStartValueRef.current);
+    commitDraft(dragStartValueRef.current);
+  };
 
   return (
     <div className="flex min-h-[28px] items-center gap-2.5">
@@ -390,6 +411,8 @@ export function FlatSlider({
         onPointerDown={(e) => {
           if (disabled) return;
           draggingRef.current = true;
+          dragStartValueRef.current = latestValueRef.current;
+          activePointerIdRef.current = e.pointerId;
           e.currentTarget.setPointerCapture(e.pointerId);
           const stepped = stepFromClientX(e.clientX, e.currentTarget.getBoundingClientRect());
           setDraft(stepped);
@@ -447,12 +470,25 @@ export function FlatSlider({
         }}
         onKeyDown={(e) => {
           if (disabled) return;
+          if (e.key === "Escape" && draggingRef.current) {
+            e.preventDefault();
+            cancelDrag(e.currentTarget);
+            return;
+          }
           const next = sliderKeyTarget(e.key, draft, min, max, step);
           if (next === null) return;
           e.preventDefault();
           setDraft(next);
           commitDraft(next);
         }}
+        onContextMenu={(e) => {
+          // Right-click during a drag must cancel it (revert to the pre-drag
+          // value), not leave the last dragged-to position committed while
+          // the native context menu opens on top of the slider.
+          if (!draggingRef.current) return;
+          e.preventDefault();
+          cancelDrag(e.currentTarget);
+        }}
       >
         <div className="absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 rounded-full bg-panel-hover">
           {centerTick && (
@@ -505,88 +541,4 @@ export function FlatSlider({
   );
 }
 
-/* ------------------------------------------------------------------ */
-/*  FlatSelectRow — label/value row backed by a native <select>        */
-/* ------------------------------------------------------------------ */
-
-export function FlatSelectRow({
-  label,
-  ariaLabel,
-  value,
-  options,
-  tier,
-  disabled,
-  onChange,
-  onReset,
-}: {
-  label: string;
-  /** Accessible name when a caller renders the visible label OUTSIDE this
-   *  row (label="" to avoid a duplicate) — e.g. Grade's "Preset" row, which
-   *  shows its own label span and would otherwise leave the <select>
-   *  unnamed. Falls back to `label` when omitted. */
-  ariaLabel?: string;
-  value: string;
-  options: Array<string | { value: string; label: string }>;
-  tier: PropertyValueTier;
-  disabled?: boolean;
-  onChange: (nextValue: string) => void;
-  onReset?: () => void;
-}) {
-  const normalizedOptions = options.map((option) =>
-    typeof option === "string" ? { value: option, label: option } : option,
-  );
-  // A valid authored value outside the preset list (e.g. a `mix-blend-mode`
-  // or `object-position` this row doesn't offer as a preset) must not be
-  // silently misrepresented as the first option — the native <select> falls
-  // back to selectedIndex 0 when `value` matches no <option>, and reselecting
-  // that visible-but-wrong preset overwrites the real persisted value. Prepend
-  // the current value so it's always representable, matching legacy
-  // `SelectField`'s same guard.
-  const renderedOptions =
-    value && !normalizedOptions.some((option) => option.value === value)
-      ? [{ value, label: value }, ...normalizedOptions]
-      : normalizedOptions;
-  return (
-    <div className="group flex min-h-[30px] items-center justify-between">
-      <span className={`text-[11px] ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
-      <span className="flex items-center gap-2">
-        <label className="flex items-center gap-1.5">
-          <select
-            value={value}
-            disabled={disabled}
-            aria-label={ariaLabel || label || undefined}
-            onChange={(e) => onChange(e.target.value)}
-            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-none disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`}
-          >
-            {renderedOptions.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-          <svg
-            width="10"
-            height="10"
-            viewBox="0 0 10 10"
-            fill="currentColor"
-            className="flex-shrink-0 text-panel-text-5"
-          >
-            <path d="M2 3l3 4 3-4z" />
-          </svg>
-        </label>
-        {tier === "explicitCustom" && onReset && (
-          <button
-            type="button"
-            data-flat-select-reset="true"
-            title="Remove — fall back to default"
-            disabled={disabled}
-            onClick={onReset}
-            className="flex-shrink-0 text-panel-text-3 opacity-0 transition-opacity hover:text-panel-text-1 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-40"
-          >
-            <RotateCcw size={11} />
-          </button>
-        )}
-      </span>
-    </div>
-  );
-}
+export { FlatSelectRow } from "./propertyPanelFlatSelectRow";
diff --git a/packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx b/packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx
new file mode 100644
index 0000000000..f3ef5cc6d8
--- /dev/null
+++ b/packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx
@@ -0,0 +1,92 @@
+import { RotateCcw } from "../../icons/SystemIcons";
+import {
+  VALUE_TIER_LABEL_CLASS,
+  VALUE_TIER_VALUE_CLASS,
+  type PropertyValueTier,
+} from "./propertyPanelValueTier";
+
+/* ------------------------------------------------------------------ */
+/*  FlatSelectRow — label/value row backed by a native <select>        */
+/* ------------------------------------------------------------------ */
+
+export function FlatSelectRow({
+  label,
+  ariaLabel,
+  value,
+  options,
+  tier,
+  disabled,
+  onChange,
+  onReset,
+}: {
+  label: string;
+  /** Accessible name when a caller renders the visible label OUTSIDE this
+   *  row (label="" to avoid a duplicate) — e.g. Grade's "Preset" row, which
+   *  shows its own label span and would otherwise leave the <select>
+   *  unnamed. Falls back to `label` when omitted. */
+  ariaLabel?: string;
+  value: string;
+  options: Array<string | { value: string; label: string }>;
+  tier: PropertyValueTier;
+  disabled?: boolean;
+  onChange: (nextValue: string) => void;
+  onReset?: () => void;
+}) {
+  const normalizedOptions = options.map((option) =>
+    typeof option === "string" ? { value: option, label: option } : option,
+  );
+  // A valid authored value outside the preset list (e.g. a `mix-blend-mode`
+  // or `object-position` this row doesn't offer as a preset) must not be
+  // silently misrepresented as the first option — the native <select> falls
+  // back to selectedIndex 0 when `value` matches no <option>, and reselecting
+  // that visible-but-wrong preset overwrites the real persisted value. Prepend
+  // the current value so it's always representable, matching legacy
+  // `SelectField`'s same guard.
+  const renderedOptions =
+    value && !normalizedOptions.some((option) => option.value === value)
+      ? [{ value, label: value }, ...normalizedOptions]
+      : normalizedOptions;
+  return (
+    <div className="group flex min-h-[30px] items-center justify-between">
+      <span className={`text-[11px] ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
+      <span className="flex items-center gap-2">
+        <label className="flex items-center gap-1.5">
+          <select
+            value={value}
+            disabled={disabled}
+            aria-label={ariaLabel || label || undefined}
+            onChange={(e) => onChange(e.target.value)}
+            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-none disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`}
+          >
+            {renderedOptions.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="currentColor"
+            className="flex-shrink-0 text-panel-text-5"
+          >
+            <path d="M2 3l3 4 3-4z" />
+          </svg>
+        </label>
+        {tier === "explicitCustom" && onReset && (
+          <button
+            type="button"
+            data-flat-select-reset="true"
+            title="Remove — fall back to default"
+            disabled={disabled}
+            onClick={onReset}
+            className="flex-shrink-0 text-panel-text-3 opacity-0 transition-opacity hover:text-panel-text-1 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            <RotateCcw size={11} />
+          </button>
+        )}
+      </span>
+    </div>
+  );
+}

From e820e18092e6fa96404af38b194f9682f78b6070 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Tue, 14 Jul 2026 15:25:43 -0700
Subject: [PATCH 7/8] fix(studio): atomic timing pin, expanded-list Hide All,
 repeated-host matching, pointercancel revert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes real bugs from two independent re-reviews (#2225 @ 65954c3804,
#2416 @ beaf4ffbf6):

- FlatTimingRow's pinRange committed a pinned start+duration range through
  TWO sequential onSetAttribute calls. Each resolves domEditSelection fresh
  from current hook state, so a selection change between the two awaits
  could misdirect the second write at the newly-selected element instead of
  the one being edited, and a failure of just the second call left the pair
  half-applied (inconsistent inferred/explicit state). Added
  commitDataAttributes/handleDomAttributesCommit (mirroring
  onCommitAnimatedProperties's same-shaped fix for GSAP property batches):
  one PatchOperation[] persist call against an explicit, caller-supplied
  selection — not the "current" one — threaded through as the new optional
  onSetAttributes prop. pinRange uses it when provided, falls back to the
  old sequential behavior otherwise.

- Hide All silently dropped nested sub-composition children: a selection
  inside a sub-comp with no timeline-store entry of its own resolves to a
  virtual `sourceFile#domId` key (the fallback branch exists so the
  expansion hook can later resolve it via clipParentMap), but
  toggleTimelineElementHidden only searched the RAW store list, which never
  contains that key. useTimelineElementVisibilityEditing now resolves
  against useExpandedTimelineElements() instead, matching the track-based
  toggle's existing approach — the expanded list synthesizes a real,
  patchable TimelineElement (matching key/domId/sourceFile) for each visible
  child whenever its host is currently expanded.

- Two composition hosts importing the same sub-composition collapsed to
  the first one: findMatchingTimelineElementId ORed domId/selector/
  compositionSrc matches with equal priority in a single per-element scan,
  so `.find()` could stop at an EARLIER, unrelated host that merely shared
  the compositionSrc, before the scan ever reached the correct domId/
  selector match further down the list. Restructured to try domId, then
  selector, across the WHOLE list first; compositionSrc-only matching is
  now a true last resort for when neither identifies a specific element.

- FlatSlider's native pointercancel handler (a platform-level gesture abort
  — scroll/touch takeover, pen leaving range) manually duplicated the
  pointer-capture release logic instead of calling cancelDrag, so it never
  reverted to the pre-drag value — leaving whatever intermediate position
  the pointer last reached committed, unlike the Escape/right-click paths
  added in the previous round. Now calls cancelDrag directly.

- useColorGradingController's flushPendingPersist read identityKeyRef.current
  fresh at flush time rather than a value snapshotted when the edit was
  scheduled. Defensive fix: added pendingPersistIdentityRef, set alongside
  pendingPersistValueRef in commitColorGrading, read by flushPendingPersist
  instead of the live ref — closes the gap regardless of how unlikely the
  actual race is given the identity-cleanup effect's existing eager-flush
  behavior.

Two prior findings re-verified as already fixed further up this same
Graphite stack (not re-fixed here, per established stack-order handling):
metadata-cache negative-caching (267cdfce1) and cross-file
selectionIdentityKey (6f40e03a1), both landing after #2225's reviewed head.

StudioRightPanel.tsx crossed the 600-line file-size gate after wiring the
new onSetAttributes prop through; extracted the inspector split-pane resize
handlers (previously inlined) into their own useInspectorSplitResize hook.

New regression tests: repeated-composition-host resolution, atomic vs.
fallback pinRange commit paths, pointercancel revert. Full studio suite
still at the known pre-existing 55-failure baseline, zero new regressions.
Typecheck/oxlint/oxfmt clean.
---
 .../src/components/StudioRightPanel.tsx       |  59 ++-------
 .../components/editor/PropertyPanelFlat.tsx   |   3 +
 .../propertyPanelFlatMotionSection.test.tsx   |  53 ++++++++
 .../editor/propertyPanelFlatMotionSection.tsx |  31 ++++-
 .../propertyPanelFlatPrimitives.test.tsx      |  33 +++++
 .../editor/propertyPanelFlatPrimitives.tsx    |  11 +-
 .../components/editor/propertyPanelTypes.ts   |   6 +
 .../editor/useColorGradingController.ts       |  14 ++-
 .../studio/src/contexts/DomEditContext.tsx    |   4 +
 .../src/hooks/timelineTrackVisibility.ts      |  16 ++-
 .../src/hooks/useDomEditAttributeCommits.ts   | 119 ++++++++++++++++++
 .../studio/src/hooks/useDomEditCommits.ts     |   2 +
 .../studio/src/hooks/useDomEditSession.ts     |   2 +
 .../studio/src/hooks/useDomEditTextCommits.ts |  23 ++--
 .../src/hooks/useInspectorSplitResize.ts      |  51 ++++++++
 .../studio/src/hooks/useTimelineEditing.ts    |   1 -
 .../studio/src/utils/studioHelpers.test.ts    |  45 +++++++
 packages/studio/src/utils/studioHelpers.ts    |  37 +++---
 18 files changed, 424 insertions(+), 86 deletions(-)
 create mode 100644 packages/studio/src/hooks/useInspectorSplitResize.ts

diff --git a/packages/studio/src/components/StudioRightPanel.tsx b/packages/studio/src/components/StudioRightPanel.tsx
index 6be062963c..ed17525c14 100644
--- a/packages/studio/src/components/StudioRightPanel.tsx
+++ b/packages/studio/src/components/StudioRightPanel.tsx
@@ -1,12 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type MutableRefObject,
-  type PointerEvent as ReactPointerEvent,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, type MutableRefObject } from "react";
 import { PropertyPanel } from "./editor/PropertyPanel";
 import { LayersPanel } from "./editor/LayersPanel";
 import { CaptionPropertyPanel } from "../captions/components/CaptionPropertyPanel";
@@ -39,9 +31,7 @@ import {
 } from "./studioColorGradingScope";
 import type { BackgroundRemovalProgress } from "./editor/propertyPanelTypes";
 import { timelineKeysForSelections, type ToggleHiddenHandler } from "../utils/studioHelpers";
-
-const MIN_INSPECTOR_SPLIT_PERCENT = 20;
-const MAX_INSPECTOR_SPLIT_PERCENT = 75;
+import { useInspectorSplitResize } from "../hooks/useInspectorSplitResize";
 
 export interface StudioRightPanelProps {
   designPanelActive: boolean;
@@ -115,6 +105,7 @@ export function StudioRightPanel({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
@@ -184,13 +175,13 @@ export function StudioRightPanel({
     coalesceKey: activeCompPath ? `slideshow-notes:${activeCompPath}` : "slideshow-notes",
   });
 
-  const [layersPanePercent, setLayersPanePercent] = useState(40);
-  const splitContainerRef = useRef<HTMLDivElement>(null);
-  const splitDragRef = useRef<{
-    startY: number;
-    startPercent: number;
-    height: number;
-  } | null>(null);
+  const {
+    layersPanePercent,
+    splitContainerRef,
+    handleInspectorSplitResizeStart,
+    handleInspectorSplitResizeMove,
+    handleInspectorSplitResizeEnd,
+  } = useInspectorSplitResize();
   const backgroundRemovalAbortRef = useRef<AbortController | null>(null);
 
   useEffect(
@@ -231,35 +222,6 @@ export function StudioRightPanel({
     toggleRightInspectorPane(pane);
   };
 
-  const handleInspectorSplitResizeStart = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      event.preventDefault();
-      event.currentTarget.setPointerCapture(event.pointerId);
-      const height = splitContainerRef.current?.getBoundingClientRect().height ?? 0;
-      splitDragRef.current = {
-        startY: event.clientY,
-        startPercent: layersPanePercent,
-        height,
-      };
-    },
-    [layersPanePercent],
-  );
-
-  const handleInspectorSplitResizeMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
-    const drag = splitDragRef.current;
-    if (!drag || drag.height <= 0) return;
-    const deltaPercent = ((event.clientY - drag.startY) / drag.height) * 100;
-    const next = Math.min(
-      MAX_INSPECTOR_SPLIT_PERCENT,
-      Math.max(MIN_INSPECTOR_SPLIT_PERCENT, drag.startPercent + deltaPercent),
-    );
-    setLayersPanePercent(next);
-  }, []);
-
-  const handleInspectorSplitResizeEnd = useCallback(() => {
-    splitDragRef.current = null;
-  }, []);
-
   const handleApplyColorGradingScope = useCallback(
     async (scope: ColorGradingScope, value: string | null) =>
       applyColorGradingScopeUpdate({
@@ -375,6 +337,7 @@ export function StudioRightPanel({
         onUngroup={handleUngroupSelection}
         onSetStyle={handleDomStyleCommit}
         onSetAttribute={handleDomAttributeCommit}
+        onSetAttributes={handleDomAttributesCommit}
         onSetAttributeLive={handleDomAttributeLiveCommit}
         onApplyColorGradingScope={handleApplyColorGradingScope}
         onSetHtmlAttribute={handleDomHtmlAttributeCommit}
diff --git a/packages/studio/src/components/editor/PropertyPanelFlat.tsx b/packages/studio/src/components/editor/PropertyPanelFlat.tsx
index fe914267d9..ac90cfba79 100644
--- a/packages/studio/src/components/editor/PropertyPanelFlat.tsx
+++ b/packages/studio/src/components/editor/PropertyPanelFlat.tsx
@@ -77,6 +77,7 @@ export function PropertyPanelFlat({
   onUngroup,
   onSetStyle,
   onSetAttribute,
+  onSetAttributes,
   onSetAttributeLive,
   onApplyColorGradingScope,
   onSetHtmlAttribute,
@@ -145,6 +146,7 @@ export function PropertyPanelFlat({
   | "onUngroup"
   | "onSetStyle"
   | "onSetAttribute"
+  | "onSetAttributes"
   | "onSetAttributeLive"
   | "onApplyColorGradingScope"
   | "onSetHtmlAttribute"
@@ -440,6 +442,7 @@ export function PropertyPanelFlat({
           multipleTimelines={gsapMultipleTimelines}
           unsupportedTimelinePattern={gsapUnsupportedTimelinePattern}
           onSetAttribute={onSetAttribute}
+          onSetAttributes={onSetAttributes}
           {...(gsapEffectHandlers ?? EMPTY_GSAP_EFFECT_HANDLERS)}
         />
       ),
diff --git a/packages/studio/src/components/editor/propertyPanelFlatMotionSection.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatMotionSection.test.tsx
index 2f5a47357e..60eb2458af 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatMotionSection.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatMotionSection.test.tsx
@@ -101,6 +101,59 @@ describe("FlatTimingRow", () => {
     expect(onSetAttribute).toHaveBeenCalledWith("start", "10.00");
     act(() => root.unmount());
   });
+
+  it("pins an inferred range through ONE atomic onSetAttributes call when provided, instead of two sequential onSetAttribute calls", async () => {
+    const onSetAttribute = vi.fn();
+    const onSetAttributes = vi.fn().mockResolvedValue(undefined);
+    const element = baseElement({ dataAttributes: { start: "0", duration: "0" } });
+    const { host, root } = renderInto(
+      <FlatTimingRow
+        element={element}
+        animations={[{ position: 2, duration: 3 } as never]}
+        onSetAttribute={onSetAttribute}
+        onSetAttributes={onSetAttributes}
+      />,
+    );
+    // Range is inferred (start=2, duration=3) — editing Start alone must pin
+    // the WHOLE range (both attrs), not just data-start.
+    const startInput = host.querySelectorAll("input")[0];
+    if (!startInput) throw new Error("expected a Start input");
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!;
+    await act(async () => {
+      setter.call(startInput, "5s");
+      startInput.dispatchEvent(new Event("input", { bubbles: true }));
+      startInput.dispatchEvent(new Event("focusout", { bubbles: true }));
+      await Promise.resolve();
+    });
+    expect(onSetAttributes).toHaveBeenCalledTimes(1);
+    expect(onSetAttributes).toHaveBeenCalledWith(element, { start: "5.00", duration: "3.00" });
+    expect(onSetAttribute).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  it("falls back to two sequential onSetAttribute calls to pin an inferred range when onSetAttributes is not provided", async () => {
+    const onSetAttribute = vi.fn().mockResolvedValue(undefined);
+    const element = baseElement({ dataAttributes: { start: "0", duration: "0" } });
+    const { host, root } = renderInto(
+      <FlatTimingRow
+        element={element}
+        animations={[{ position: 2, duration: 3 } as never]}
+        onSetAttribute={onSetAttribute}
+      />,
+    );
+    const startInput = host.querySelectorAll("input")[0];
+    if (!startInput) throw new Error("expected a Start input");
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")!.set!;
+    await act(async () => {
+      setter.call(startInput, "5s");
+      startInput.dispatchEvent(new Event("input", { bubbles: true }));
+      startInput.dispatchEvent(new Event("focusout", { bubbles: true }));
+      await Promise.resolve();
+    });
+    expect(onSetAttribute).toHaveBeenNthCalledWith(1, "start", "5.00");
+    expect(onSetAttribute).toHaveBeenNthCalledWith(2, "duration", "3.00");
+    act(() => root.unmount());
+  });
 });
 
 describe("FlatMotionSection", () => {
diff --git a/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx
index 83c17cf6b4..f457979c68 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx
@@ -13,10 +13,17 @@ export function FlatTimingRow({
   element,
   animations = [],
   onSetAttribute,
+  onSetAttributes,
 }: {
   element: DomEditSelection;
   animations?: GsapAnimation[];
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
+  /** Commits start+duration together in ONE atomic persist call, bound to
+   *  THIS render's `element` explicitly — not whatever is "currently"
+   *  selected by the time the call resolves. Falls back to two sequential
+   *  `onSetAttribute` calls (with the same non-atomicity/misdirection risk
+   *  documented below) when the caller doesn't wire it up. */
+  onSetAttributes?: (selection: DomEditSelection, attrs: Record<string, string>) => Promise<void>;
 }) {
   const { start, duration, inferred: derived } = deriveElementTiming(element, animations);
   const end = start + duration;
@@ -25,10 +32,19 @@ export function FlatTimingRow({
   // WHOLE displayed range: writing only data-duration flips inference off and
   // drops start to data-start-or-0 (the clip silently shifts), and writing only
   // data-start is ignored while duration is still inferred (the edit looks
-  // dead). Pin both attributes, sequentially, so the display never jumps.
+  // dead). Pin both attributes in ONE atomic commit bound to THIS element —
+  // two sequential `onSetAttribute` calls would each resolve `domEditSelection`
+  // fresh from current hook state, so a selection change between the two
+  // awaits could misdirect the second write at the newly-selected element, and
+  // a failure of just the second call would leave the pair half-applied.
   const pinRange = async (nextStart: number, nextDuration: number) => {
-    await onSetAttribute("start", nextStart.toFixed(2));
-    await onSetAttribute("duration", nextDuration.toFixed(2));
+    const attrs = { start: nextStart.toFixed(2), duration: nextDuration.toFixed(2) };
+    if (onSetAttributes) {
+      await onSetAttributes(element, attrs);
+      return;
+    }
+    await onSetAttribute("start", attrs.start);
+    await onSetAttribute("duration", attrs.duration);
   };
 
   const commitStart = (nextValue: string) => {
@@ -92,6 +108,7 @@ export function FlatMotionSection({
   multipleTimelines,
   unsupportedTimelinePattern,
   onSetAttribute,
+  onSetAttributes,
   onAddAnimation,
   ...callbacks
 }: {
@@ -102,6 +119,7 @@ export function FlatMotionSection({
   multipleTimelines?: boolean;
   unsupportedTimelinePattern?: boolean;
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
+  onSetAttributes?: (selection: DomEditSelection, attrs: Record<string, string>) => Promise<void>;
   onAddAnimation: (method: "to" | "from" | "set" | "fromTo") => void;
 } & GsapAnimationEditCallbacks) {
   const [addMenuOpen, setAddMenuOpen] = useState(false);
@@ -109,7 +127,12 @@ export function FlatMotionSection({
   return (
     <div className="space-y-3">
       {showTiming && (
-        <FlatTimingRow element={element} animations={animations} onSetAttribute={onSetAttribute} />
+        <FlatTimingRow
+          element={element}
+          animations={animations}
+          onSetAttribute={onSetAttribute}
+          onSetAttributes={onSetAttributes}
+        />
       )}
       {showEffects && (
         <>
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
index fabb286a39..7e44834366 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
@@ -553,6 +553,39 @@ describe("FlatSlider", () => {
     expect(track.hasPointerCapture(1)).toBe(false);
     act(() => root.unmount());
   });
+
+  it("a native pointercancel during a drag reverts to the pre-drag value, instead of leaving the last dragged-to position committed", () => {
+    const onCommit = vi.fn();
+    const { host, root } = renderInto(
+      <FlatSlider
+        label="Opacity"
+        value={10}
+        min={0}
+        max={100}
+        tier="explicitCustom"
+        displayValue="10%"
+        onCommit={onCommit}
+      />,
+    );
+    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
+    if (!track) throw new Error("expected a track element");
+    Object.defineProperty(track, "getBoundingClientRect", {
+      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
+    });
+    act(() => {
+      track.dispatchEvent(
+        new PointerEvent("pointerdown", { bubbles: true, clientX: 65, pointerId: 1 }),
+      );
+    });
+    expect(onCommit).toHaveBeenLastCalledWith(65);
+    act(() => {
+      track.dispatchEvent(new PointerEvent("pointercancel", { bubbles: true, pointerId: 1 }));
+    });
+    expect(onCommit).toHaveBeenLastCalledWith(10);
+    expect(track.getAttribute("aria-valuenow")).toBe("10");
+    expect(track.hasPointerCapture(1)).toBe(false);
+    act(() => root.unmount());
+  });
 });
 
 describe("FlatSlider — Grade extensions", () => {
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index 86205546cd..d8b1752d7c 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -441,11 +441,12 @@ export function FlatSlider({
           commitDraft(stepped);
         }}
         onPointerCancel={(e) => {
-          draggingRef.current = false;
-          if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-            explicitReleaseRef.current = true;
-            e.currentTarget.releasePointerCapture(e.pointerId);
-          }
+          // A native pointercancel means the platform aborted the gesture (a
+          // scroll/touch takeover, pen leaving range, etc.) — that must cancel
+          // the drag the same way Escape/right-click do (revert to the
+          // pre-drag value), not just stop dragging and leave whatever
+          // intermediate position the pointer last reached committed.
+          cancelDrag(e.currentTarget);
         }}
         onLostPointerCapture={() => {
           if (explicitReleaseRef.current) {
diff --git a/packages/studio/src/components/editor/propertyPanelTypes.ts b/packages/studio/src/components/editor/propertyPanelTypes.ts
index ba862349f9..12b3cb136f 100644
--- a/packages/studio/src/components/editor/propertyPanelTypes.ts
+++ b/packages/studio/src/components/editor/propertyPanelTypes.ts
@@ -33,6 +33,12 @@ export interface PropertyPanelProps {
   onUngroup?: () => void;
   onSetStyle: (prop: string, value: string) => void | Promise<void>;
   onSetAttribute: (attr: string, value: string) => void | Promise<void>;
+  /** Commits several data-* attributes on the SAME element in ONE atomic
+   *  persist call — e.g. a pinned timing range's start+duration together, so
+   *  a selection change or a partial failure mid-commit can't misdirect one
+   *  of the two writes or leave them half-applied. Falls back to sequential
+   *  `onSetAttribute` calls where omitted. */
+  onSetAttributes?: (selection: DomEditSelection, attrs: Record<string, string>) => Promise<void>;
   onSetAttributeLive: (
     attr: string,
     value: string | null,
diff --git a/packages/studio/src/components/editor/useColorGradingController.ts b/packages/studio/src/components/editor/useColorGradingController.ts
index 19921f9f1f..d35d60c10c 100644
--- a/packages/studio/src/components/editor/useColorGradingController.ts
+++ b/packages/studio/src/components/editor/useColorGradingController.ts
@@ -195,6 +195,10 @@ export function useColorGradingController({
   const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const pendingPersistValueRef = useRef<string | null | undefined>(undefined);
   const pendingPersistGradingRef = useRef<NormalizedHfColorGrading | null>(null);
+  // Identity the pending edit was made FOR, snapshotted at schedule time —
+  // read by a global flush instead of identityKeyRef.current, which may no
+  // longer describe this edit's element by the time the flush runs.
+  const pendingPersistIdentityRef = useRef<string | null>(null);
   // The last grading value actually confirmed saved — distinct from `grading`
   // (the optimistic value shown immediately on commit). A rejected persist
   // reverts to this instead of leaving the UI permanently showing a value
@@ -270,6 +274,7 @@ export function useColorGradingController({
       const value = pendingPersistValueRef.current;
       pendingPersistValueRef.current = undefined;
       pendingPersistGradingRef.current = null;
+      pendingPersistIdentityRef.current = null;
       trackStudioPendingEdit(onSetAttributeLive(COLOR_GRADING_DATA_KEY, value));
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps -- identityKey is the intended trigger; see comment above
@@ -411,8 +416,13 @@ export function useColorGradingController({
     if (pendingPersistValueRef.current === undefined) return undefined;
     const value = pendingPersistValueRef.current;
     const attemptedGrading = pendingPersistGradingRef.current ?? latestGradingRef.current;
+    // Snapshotted at schedule time, not identityKeyRef.current read fresh
+    // here — an async flush could otherwise tag the attempt with whatever
+    // identity is "current" by then, not the one this edit was made for.
+    const attemptIdentityKey = pendingPersistIdentityRef.current ?? identityKeyRef.current;
     pendingPersistValueRef.current = undefined;
     pendingPersistGradingRef.current = null;
+    pendingPersistIdentityRef.current = null;
     // A flush cancels the pending debounce timer above, so this becomes the
     // one-and-only in-flight attempt for this element — bump the version so
     // it still registers as "the latest attempt" against the same guard a
@@ -424,7 +434,7 @@ export function useColorGradingController({
     return persistColorGradingValue(
       value,
       attemptedGrading,
-      identityKeyRef.current,
+      attemptIdentityKey,
       isLatestAttempt,
       onSetAttributeLive,
     );
@@ -513,6 +523,7 @@ export function useColorGradingController({
         ? serializeHfColorGrading(nextGrading)
         : null;
       pendingPersistGradingRef.current = nextGrading;
+      pendingPersistIdentityRef.current = identityKeyRef.current;
       // Captured now (edit time), not read fresh inside the timer — the
       // timer fires 350ms later and may run after selection has already
       // moved on, at which point identityKeyRef.current would no longer
@@ -527,6 +538,7 @@ export function useColorGradingController({
         const attemptedGrading = pendingPersistGradingRef.current ?? nextGrading;
         pendingPersistValueRef.current = undefined;
         pendingPersistGradingRef.current = null;
+        pendingPersistIdentityRef.current = null;
         persistTimerRef.current = null;
         void persistColorGradingValue(
           value ?? null,
diff --git a/packages/studio/src/contexts/DomEditContext.tsx b/packages/studio/src/contexts/DomEditContext.tsx
index bd1593efef..37d461608a 100644
--- a/packages/studio/src/contexts/DomEditContext.tsx
+++ b/packages/studio/src/contexts/DomEditContext.tsx
@@ -16,6 +16,7 @@ export interface DomEditActionsValue extends Pick<
   | "handleDomAttributeCommit"
   | "handleDomAttributeLiveCommit"
   | "handleDomHtmlAttributeCommit"
+  | "handleDomAttributesCommit"
   | "handleDomPathOffsetCommit"
   | "handleDomGroupPathOffsetCommit"
   | "handleDomZIndexReorderCommit"
@@ -138,6 +139,7 @@ export function DomEditProvider({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,
@@ -224,6 +226,7 @@ export function DomEditProvider({
       handleDomAttributeCommit,
       handleDomAttributeLiveCommit,
       handleDomHtmlAttributeCommit,
+      handleDomAttributesCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,
@@ -291,6 +294,7 @@ export function DomEditProvider({
       handleDomAttributeCommit,
       handleDomAttributeLiveCommit,
       handleDomHtmlAttributeCommit,
+      handleDomAttributesCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,
diff --git a/packages/studio/src/hooks/timelineTrackVisibility.ts b/packages/studio/src/hooks/timelineTrackVisibility.ts
index db3c9f1432..f305226c92 100644
--- a/packages/studio/src/hooks/timelineTrackVisibility.ts
+++ b/packages/studio/src/hooks/timelineTrackVisibility.ts
@@ -63,7 +63,7 @@ interface UseTimelineTrackVisibilityEditingInput extends Omit<
 
 interface UseTimelineElementVisibilityEditingInput extends Omit<
   ToggleTimelineElementHiddenInput,
-  "projectId" | "elementKey" | "hidden" | "previewIframe"
+  "projectId" | "elementKey" | "hidden" | "previewIframe" | "timelineElements"
 > {
   projectIdRef: ReadonlyRef<string | null>;
   previewIframeRef: ReadonlyRef<HTMLIFrameElement | null>;
@@ -322,7 +322,6 @@ export function useTimelineTrackVisibilityEditing({
 export function useTimelineElementVisibilityEditing({
   projectIdRef,
   activeCompPath,
-  timelineElements,
   showToast,
   writeProjectFile,
   recordEdit,
@@ -335,6 +334,15 @@ export function useTimelineElementVisibilityEditing({
   elementKey: string | readonly string[],
   hidden: boolean,
 ) => Promise<void> {
+  // Resolve against the EXPANDED rows, not the raw store list — a nested
+  // sub-composition child has no entry of its own in the raw list (only its
+  // host does), so an elementKey for such a child (the
+  // `sourceFile#domId`-shaped virtual key `resolveTimelineIdForSelection`
+  // falls back to) would never match anything there and Hide All would
+  // silently no-op for it. The expanded list synthesizes a real, patchable
+  // TimelineElement (with matching key/domId/sourceFile) for each visible
+  // child whenever its host is currently expanded.
+  const expandedElements = useExpandedTimelineElements();
   return useCallback(
     async (elementKey: string | readonly string[], hidden: boolean) => {
       if (isRecordingRef?.current) {
@@ -347,7 +355,7 @@ export function useTimelineElementVisibilityEditing({
         await toggleTimelineElementHidden({
           projectId: pid,
           activeCompPath,
-          timelineElements,
+          timelineElements: expandedElements,
           elementKey,
           hidden,
           previewIframe: previewIframeRef.current,
@@ -366,7 +374,7 @@ export function useTimelineElementVisibilityEditing({
     },
     [
       activeCompPath,
-      timelineElements,
+      expandedElements,
       previewIframeRef,
       writeProjectFile,
       recordEdit,
diff --git a/packages/studio/src/hooks/useDomEditAttributeCommits.ts b/packages/studio/src/hooks/useDomEditAttributeCommits.ts
index 12aa8ff0a8..0c3e7a39c7 100644
--- a/packages/studio/src/hooks/useDomEditAttributeCommits.ts
+++ b/packages/studio/src/hooks/useDomEditAttributeCommits.ts
@@ -58,6 +58,25 @@ interface CapturedAttributeElement {
   previousValue: string | null;
 }
 
+interface CapturedMultiAttributeElement {
+  element: HTMLElement;
+  previousValues: Map<string, string | null>;
+}
+
+function captureMultiAttributeElement(
+  doc: Document | null | undefined,
+  selection: DomEditSelection,
+  activeCompPath: string | null,
+  fullAttrs: string[],
+): CapturedMultiAttributeElement | null {
+  const el = findPreviewAttributeElement(doc, selection, activeCompPath);
+  if (!el) return null;
+  const previousValues = new Map(
+    fullAttrs.map((fullAttr) => [fullAttr, el.getAttribute(fullAttr)]),
+  );
+  return { element: el, previousValues };
+}
+
 function captureAttributeElement(
   doc: Document | null | undefined,
   selection: DomEditSelection,
@@ -142,6 +161,105 @@ export function useDomEditAttributeCommits({
     ],
   );
 
+  // Commits several data-* attributes on the SAME element in ONE persist call
+  // — needed when two attributes together describe a single logical value
+  // (e.g. a pinned timing range's start+duration): committing them through two
+  // separate sequential `commitDataAttribute` calls leaves a window where the
+  // second call resolves `domEditSelection` fresh from current hook state, so
+  // a selection change between the two awaits would misdirect it at the
+  // NEWLY selected element instead of the one being edited, and a failure of
+  // just the second call would leave the two attributes in an inconsistent
+  // half-applied state. Bundling them into one `PatchOperation[]` against an
+  // explicit, caller-supplied `selection` (not the "current" one) closes both
+  // gaps — matching `onCommitAnimatedProperties`'s same-shaped fix for GSAP
+  // property batches.
+  const commitDataAttributes = useCallback(
+    async (
+      selection: DomEditSelection,
+      attrs: Record<string, string | null>,
+      options: DataAttributeCommitOptions,
+    ) => {
+      const iframe = previewIframeRef.current;
+      const entries = Object.entries(attrs).map(([attr, value]) => ({
+        attr,
+        fullAttr: resolveFullAttrName(attr, true),
+        value,
+      }));
+      const commitKey = `${options.coalescePrefix}:${entries
+        .map((entry) => entry.attr)
+        .sort()
+        .join(",")}:${getDomEditTargetKey(selection)}`;
+      const isLatestCommit = bumpDomEditCommitMapVersion(
+        domAttributeCommitVersionRef.current,
+        commitKey,
+      );
+      const ops: PatchOperation[] = entries.map((entry) => ({
+        type: "attribute",
+        property: entry.attr,
+        value: entry.value,
+      }));
+      let captured: CapturedMultiAttributeElement | null = null;
+
+      await runDomEditCommit({
+        capture: () => {
+          captured = captureMultiAttributeElement(
+            iframe?.contentDocument,
+            selection,
+            activeCompPath,
+            entries.map((entry) => entry.fullAttr),
+          );
+        },
+        apply: () => {
+          if (!captured) return;
+          for (const entry of entries) {
+            const nextValue = entry.value === null || entry.value === "" ? null : entry.value;
+            setOrRemovePreviewAttribute(captured.element, entry.fullAttr, nextValue);
+          }
+        },
+        persist: () =>
+          persistDomEditOperations(selection, ops, {
+            label: options.label,
+            coalesceKey: commitKey,
+            skipRefresh: options.skipRefresh,
+          }),
+        shouldRevert: () => isLatestCommit(),
+        revert: () => {
+          if (!captured) return;
+          for (const entry of entries) {
+            setOrRemovePreviewAttribute(
+              captured.element,
+              entry.fullAttr,
+              captured.previousValues.get(entry.fullAttr) ?? null,
+            );
+          }
+        },
+        onError: (error) => reportDomEditPersistFailure(selection, ops, error, showToast),
+        shouldResync: () => isLatestCommit() && !!options.refreshAfter,
+        resync: () => refreshDomEditSelectionFromPreview(selection),
+        onSettled: options.onSettled,
+      });
+    },
+    [
+      activeCompPath,
+      persistDomEditOperations,
+      refreshDomEditSelectionFromPreview,
+      showToast,
+      previewIframeRef,
+    ],
+  );
+
+  const handleDomAttributesCommit = useCallback(
+    async (selection: DomEditSelection, attrs: Record<string, string>) => {
+      await commitDataAttributes(selection, attrs, {
+        label: "Edit timing",
+        coalescePrefix: "attrs",
+        skipRefresh: false,
+        refreshAfter: true,
+      });
+    },
+    [commitDataAttributes],
+  );
+
   const handleDomAttributeCommit = useCallback(
     async (attr: string, value: string) => {
       await commitDataAttribute(attr, value, {
@@ -226,5 +344,6 @@ export function useDomEditAttributeCommits({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
   };
 }
diff --git a/packages/studio/src/hooks/useDomEditCommits.ts b/packages/studio/src/hooks/useDomEditCommits.ts
index 8af3729b1a..6f5fb56dde 100644
--- a/packages/studio/src/hooks/useDomEditCommits.ts
+++ b/packages/studio/src/hooks/useDomEditCommits.ts
@@ -523,6 +523,7 @@ export function useDomEditCommits({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
@@ -585,6 +586,7 @@ export function useDomEditCommits({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
diff --git a/packages/studio/src/hooks/useDomEditSession.ts b/packages/studio/src/hooks/useDomEditSession.ts
index fa1b8a9ce7..ee1a3ea52f 100644
--- a/packages/studio/src/hooks/useDomEditSession.ts
+++ b/packages/studio/src/hooks/useDomEditSession.ts
@@ -229,6 +229,7 @@ export function useDomEditSession({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
@@ -529,6 +530,7 @@ export function useDomEditSession({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit: handleGsapAwareGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,
diff --git a/packages/studio/src/hooks/useDomEditTextCommits.ts b/packages/studio/src/hooks/useDomEditTextCommits.ts
index cbce289123..7111356279 100644
--- a/packages/studio/src/hooks/useDomEditTextCommits.ts
+++ b/packages/studio/src/hooks/useDomEditTextCommits.ts
@@ -145,15 +145,19 @@ export function useDomEditTextCommits({
   const domTextCommitVersionRef = useRef(0);
   const domStyleCommitVersionRef = useRef(new Map<string, number>());
 
-  const { handleDomAttributeCommit, handleDomAttributeLiveCommit, handleDomHtmlAttributeCommit } =
-    useDomEditAttributeCommits({
-      activeCompPath,
-      previewIframeRef,
-      showToast,
-      domEditSelection,
-      refreshDomEditSelectionFromPreview,
-      persistDomEditOperations,
-    });
+  const {
+    handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
+    handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
+  } = useDomEditAttributeCommits({
+    activeCompPath,
+    previewIframeRef,
+    showToast,
+    domEditSelection,
+    refreshDomEditSelectionFromPreview,
+    persistDomEditOperations,
+  });
 
   const handleDomStyleCommit = useCallback(
     async (property: string, value: string) => {
@@ -471,6 +475,7 @@ export function useDomEditTextCommits({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
diff --git a/packages/studio/src/hooks/useInspectorSplitResize.ts b/packages/studio/src/hooks/useInspectorSplitResize.ts
new file mode 100644
index 0000000000..a286563886
--- /dev/null
+++ b/packages/studio/src/hooks/useInspectorSplitResize.ts
@@ -0,0 +1,51 @@
+import { useCallback, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+
+const MIN_INSPECTOR_SPLIT_PERCENT = 20;
+const MAX_INSPECTOR_SPLIT_PERCENT = 75;
+
+export function useInspectorSplitResize() {
+  const [layersPanePercent, setLayersPanePercent] = useState(40);
+  const splitContainerRef = useRef<HTMLDivElement>(null);
+  const splitDragRef = useRef<{
+    startY: number;
+    startPercent: number;
+    height: number;
+  } | null>(null);
+
+  const handleInspectorSplitResizeStart = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      const height = splitContainerRef.current?.getBoundingClientRect().height ?? 0;
+      splitDragRef.current = {
+        startY: event.clientY,
+        startPercent: layersPanePercent,
+        height,
+      };
+    },
+    [layersPanePercent],
+  );
+
+  const handleInspectorSplitResizeMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const drag = splitDragRef.current;
+    if (!drag || drag.height <= 0) return;
+    const deltaPercent = ((event.clientY - drag.startY) / drag.height) * 100;
+    const next = Math.min(
+      MAX_INSPECTOR_SPLIT_PERCENT,
+      Math.max(MIN_INSPECTOR_SPLIT_PERCENT, drag.startPercent + deltaPercent),
+    );
+    setLayersPanePercent(next);
+  }, []);
+
+  const handleInspectorSplitResizeEnd = useCallback(() => {
+    splitDragRef.current = null;
+  }, []);
+
+  return {
+    layersPanePercent,
+    splitContainerRef,
+    handleInspectorSplitResizeStart,
+    handleInspectorSplitResizeMove,
+    handleInspectorSplitResizeEnd,
+  };
+}
diff --git a/packages/studio/src/hooks/useTimelineEditing.ts b/packages/studio/src/hooks/useTimelineEditing.ts
index 44b680af69..b2c316eea1 100644
--- a/packages/studio/src/hooks/useTimelineEditing.ts
+++ b/packages/studio/src/hooks/useTimelineEditing.ts
@@ -360,7 +360,6 @@ export function useTimelineEditing({
   const handleToggleElementHidden = useTimelineElementVisibilityEditing({
     projectIdRef,
     activeCompPath,
-    timelineElements,
     showToast,
     writeProjectFile,
     recordEdit,
diff --git a/packages/studio/src/utils/studioHelpers.test.ts b/packages/studio/src/utils/studioHelpers.test.ts
index 1a4c0f29a6..db1b401639 100644
--- a/packages/studio/src/utils/studioHelpers.test.ts
+++ b/packages/studio/src/utils/studioHelpers.test.ts
@@ -48,6 +48,51 @@ describe("findMatchingTimelineElementId", () => {
   it("returns null for an unmatched element in index.html", () => {
     expect(findMatchingTimelineElementId({ id: "ghost", sourceFile: "index.html" }, [])).toBe(null);
   });
+
+  it("resolves the correct repeated composition host by domId, not the first host sharing the same compositionSrc", () => {
+    // Two hosts import the SAME sub-composition — only compositionSrc alone
+    // can't tell them apart, but each still has its own domId (as any
+    // element does). Selecting the SECOND host must not collapse to the
+    // first one just because an earlier, unrelated element also happens to
+    // share its compositionSrc.
+    const els = [
+      el({ id: "host-a", domId: "host-a", sourceFile: "index.html", compositionSrc: "scene.html" }),
+      el({ id: "host-b", domId: "host-b", sourceFile: "index.html", compositionSrc: "scene.html" }),
+    ];
+    expect(
+      findMatchingTimelineElementId(
+        {
+          id: "host-b",
+          sourceFile: "index.html",
+          compositionSrc: "scene.html",
+          isCompositionHost: true,
+        },
+        els,
+      ),
+    ).toBe("host-b");
+  });
+
+  it("falls back to compositionSrc-only matching when the host selection has neither a domId nor a selector", () => {
+    const els = [
+      el({
+        id: "host-only",
+        domId: undefined,
+        sourceFile: "index.html",
+        compositionSrc: "scene.html",
+      }),
+    ];
+    expect(
+      findMatchingTimelineElementId(
+        {
+          id: undefined,
+          sourceFile: "index.html",
+          compositionSrc: "scene.html",
+          isCompositionHost: true,
+        },
+        els,
+      ),
+    ).toBe("host-only");
+  });
 });
 
 describe("findTimelineIdByAncestor", () => {
diff --git a/packages/studio/src/utils/studioHelpers.ts b/packages/studio/src/utils/studioHelpers.ts
index 7d166b89af..fbe04bbf99 100644
--- a/packages/studio/src/utils/studioHelpers.ts
+++ b/packages/studio/src/utils/studioHelpers.ts
@@ -161,25 +161,34 @@ function matchesBySelector(selection: ElementMatchSelection, element: TimelineEl
   );
 }
 
-function elementMatchesSelection(
-  selection: ElementMatchSelection,
-  element: TimelineElement,
-  selectionSourceFile: string,
-): boolean {
-  return (
-    matchesByDomId(selection, element, selectionSourceFile) ||
-    matchesByCompositionHost(selection, element) ||
-    matchesBySelector(selection, element)
-  );
-}
-
 export function findMatchingTimelineElementId(
   selection: ElementMatchSelection,
   elements: TimelineElement[],
 ): string | null {
   const selectionSourceFile = selection.sourceFile || "index.html";
-  const match = elements.find((el) => elementMatchesSelection(selection, el, selectionSourceFile));
-  if (match) return match.key ?? match.id;
+  // Priority matters, not just "any of the three": a composition-host
+  // selection always carries its OWN id/selector too (computed generically
+  // for any element), so two repeated hosts sharing the same compositionSrc
+  // are still individually addressable by id/selector. Checking
+  // matchesByCompositionHost with equal priority in a single OR-per-element
+  // scan let `.find()` stop at an EARLIER, unrelated host that merely shares
+  // the compositionSrc, before the scan ever reached the correct id/selector
+  // match further down the list — collapsing every repeated host to the
+  // first one. Try id, then selector, across the WHOLE list first; only fall
+  // back to the coarser compositionSrc-only match when neither identifies a
+  // specific element.
+  const byId = selection.id
+    ? elements.find((el) => matchesByDomId(selection, el, selectionSourceFile))
+    : undefined;
+  if (byId) return byId.key ?? byId.id;
+
+  const bySelector = selection.selector
+    ? elements.find((el) => matchesBySelector(selection, el))
+    : undefined;
+  if (bySelector) return bySelector.key ?? bySelector.id;
+
+  const byHost = elements.find((el) => matchesByCompositionHost(selection, el));
+  if (byHost) return byHost.key ?? byHost.id;
 
   // Child inside a sub-composition: return a qualified ID so the expansion
   // hook can resolve the child via clipParentMap even though no timeline

From 07cfc4c191707833a900c7a1fe1d8e590ed2639c Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Tue, 14 Jul 2026 16:27:53 -0700
Subject: [PATCH 8/8] fix(studio): shrink useDomEditCommits.ts under the
 file-size gate
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CI's file-size check (which diffs against origin/main, not per-commit like
the local lefthook gate) flagged useDomEditCommits.ts at 602 lines. Extracted
the standalone atomic-patch-batch helpers (formatUnsafeFieldList,
getErrorDetail, readErrorResponseBody, formatPatchRejectionMessage,
patchElementBatches, batchesAreInlineStyleOnly,
AtomicElementPatchConvergenceError) into useDomEditCommitsHelpers.ts — none
of them close over hook state, so this is a pure move. useDomEditCommits.ts
is now 451 lines.

Typecheck/oxlint/oxfmt clean; useDomEditCommits.test.tsx (28 tests) and the
full studio suite unaffected.
---
 .../studio/src/hooks/useDomEditCommits.ts     | 171 +-----------------
 .../src/hooks/useDomEditCommitsHelpers.ts     | 158 ++++++++++++++++
 2 files changed, 168 insertions(+), 161 deletions(-)
 create mode 100644 packages/studio/src/hooks/useDomEditCommitsHelpers.ts

diff --git a/packages/studio/src/hooks/useDomEditCommits.ts b/packages/studio/src/hooks/useDomEditCommits.ts
index 6f5fb56dde..2f8e435d9f 100644
--- a/packages/studio/src/hooks/useDomEditCommits.ts
+++ b/packages/studio/src/hooks/useDomEditCommits.ts
@@ -12,11 +12,7 @@ import {
 import { buildDomEditPatchTarget, type DomEditSelection } from "../components/editor/domEditing";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
-import type {
-  CommitDomEditPatchBatches,
-  DomEditPatchBatch,
-  PersistDomEditOperations,
-} from "./domEditCommitTypes";
+import type { CommitDomEditPatchBatches, PersistDomEditOperations } from "./domEditCommitTypes";
 import type { PatchOperation } from "../utils/sourcePatcher";
 import {
   DomEditPersistUnsafeValueError,
@@ -27,30 +23,15 @@ import { useDomEditPositionPatchCommit } from "./useDomEditPositionPatchCommit";
 import { useDomEditTextCommits } from "./useDomEditTextCommits";
 import { useDomGeometryCommits } from "./useDomGeometryCommits";
 import { useElementLifecycleOps } from "./useElementLifecycleOps";
-import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
-
-// ── Helpers ──
-
-function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
-  return fields.map((field) => field.path).join(", ");
-}
-
-function getErrorDetail(error: unknown): string {
-  return error instanceof Error ? error.message : String(error);
-}
-
-async function readErrorResponseBody(
-  response: Response,
-): Promise<{ error?: string; fields?: string[] } | null> {
-  const contentType = response.headers.get("content-type") ?? "";
-  if (!contentType.includes("application/json")) return null;
-  return (await response.json().catch(() => null)) as { error?: string; fields?: string[] } | null;
-}
-
-function formatPatchRejectionMessage(body: { error?: string; fields?: string[] } | null): string {
-  if (!body?.error) return "Couldn't save edit";
-  return `Couldn't save edit: ${body.error}${formatFieldsSuffix(body.fields)}`;
-}
+import {
+  AtomicElementPatchConvergenceError,
+  batchesAreInlineStyleOnly,
+  formatPatchRejectionMessage,
+  formatUnsafeFieldList,
+  getErrorDetail,
+  patchElementBatches,
+  readErrorResponseBody,
+} from "./useDomEditCommitsHelpers";
 
 interface RecordEditInput {
   label: string;
@@ -60,138 +41,6 @@ interface RecordEditInput {
   files: Record<string, { before: string; after: string }>;
 }
 
-/** Human-readable identifier for a batch patch target (for the unmatched warning). */
-function describeBatchPatchTarget(patch: DomEditPatchBatch["patches"][number]): string {
-  return patch.target.id ?? patch.target.hfId ?? patch.target.selector ?? "(unaddressed)";
-}
-
-/**
- * Surface server-reported unmatched patches. The server atomically refuses the
- * whole multi-file gesture; the caller uses `durable: false` to roll back and
- * reload, so report the refusal without turning it into a second failure.
- */
-function reportUnmatchedBatchPatches(batch: DomEditPatchBatch, matched: boolean[]): void {
-  const unmatchedIds = batch.patches
-    .filter((_, index) => matched[index] === false)
-    .map(describeBatchPatchTarget);
-  if (unmatchedIds.length === 0) return;
-  console.warn(
-    `[studio] z-index reorder: server could not match ${unmatchedIds.length} patch target(s) in ` +
-      `${batch.sourceFile} (the whole z-order gesture will revert on reload):`,
-    unmatchedIds.join(", "),
-  );
-  trackStudioSaveFailure({
-    source: "dom_edit",
-    error: new Error(`Batch patch target(s) unmatched: ${unmatchedIds.join(", ")}`),
-    filePath: batch.sourceFile,
-    mutationType: "z-reorder-unmatched",
-  });
-}
-
-interface AtomicElementPatchFile {
-  sourceFile: string;
-  changed: boolean;
-  matched?: boolean[];
-  before: string;
-  after: string;
-}
-
-class AtomicElementPatchConvergenceError extends Error {
-  constructor(message: string, options?: { cause?: unknown }) {
-    super(message, options);
-    this.name = "AtomicElementPatchConvergenceError";
-  }
-}
-
-// Keep the atomic response contract in one guard so callers do not compose validity.
-// fallow-ignore-next-line complexity
-function isAtomicElementPatchFile(value: unknown): value is AtomicElementPatchFile {
-  return (
-    typeof value === "object" &&
-    value !== null &&
-    "sourceFile" in value &&
-    typeof value.sourceFile === "string" &&
-    "changed" in value &&
-    typeof value.changed === "boolean" &&
-    (!("matched" in value) ||
-      (Array.isArray(value.matched) &&
-        value.matched.every((matched) => typeof matched === "boolean"))) &&
-    "before" in value &&
-    typeof value.before === "string" &&
-    "after" in value &&
-    typeof value.after === "string" &&
-    value.changed === (value.before !== value.after)
-  );
-}
-
-// This is the single client owner for dispatching and validating the aggregate
-// atomic endpoint. Splitting validation from the request would weaken that wire contract.
-// fallow-ignore-next-line complexity
-async function patchElementBatches(projectId: string, batches: DomEditPatchBatch[]) {
-  const body = JSON.stringify({ batches });
-  try {
-    const response = await fetch(
-      `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element-batches`,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body,
-      },
-    );
-    if (!response.ok) {
-      const rejection = await readErrorResponseBody(response);
-      throw new StudioSaveHttpError(formatPatchRejectionMessage(rejection), response.status);
-    }
-    const result: unknown = await response.json().catch(() => null);
-    if (
-      typeof result !== "object" ||
-      result === null ||
-      !("durable" in result) ||
-      typeof result.durable !== "boolean" ||
-      !("files" in result) ||
-      !Array.isArray(result.files) ||
-      result.files.length !== batches.length ||
-      !result.files.every(isAtomicElementPatchFile) ||
-      (!result.durable && result.files.some((file) => file.changed))
-    ) {
-      throw new StudioSaveHttpError("Invalid atomic element patch response", 502);
-    }
-    const files = result.files.map((file, index) => {
-      const batch = batches[index];
-      const matched = file.matched ?? [];
-      if (
-        !batch ||
-        file.sourceFile !== batch.sourceFile ||
-        (matched.length !== 0 && matched.length !== batch.patches.length)
-      ) {
-        throw new StudioSaveHttpError("Invalid atomic element patch response", 502);
-      }
-      reportUnmatchedBatchPatches(batch, matched);
-      return {
-        ...file,
-        matched,
-        allMatched: matched.length === batch.patches.length && matched.every(Boolean),
-      };
-    });
-    return { durable: result.durable, files };
-  } catch (error) {
-    throw new AtomicElementPatchConvergenceError(getErrorDetail(error), { cause: error });
-  }
-}
-
-/**
- * A batch is reload-skippable only when it is style-only: every operation is an
- * `inline-style` write. The z-reorder commit applies those exact styles to the
- * live iframe DOM synchronously, so persisting them adds nothing the preview
- * doesn't already show. Any other op type (attribute / text-content / …) can
- * have server-side semantics the live DOM hasn't mirrored — reload for those.
- */
-function batchesAreInlineStyleOnly(batches: DomEditPatchBatch[]): boolean {
-  return batches.every((batch) =>
-    batch.patches.every((patch) => patch.operations.every((op) => op.type === "inline-style")),
-  );
-}
-
 export interface UseDomEditCommitsParams {
   activeCompPath: string | null;
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
diff --git a/packages/studio/src/hooks/useDomEditCommitsHelpers.ts b/packages/studio/src/hooks/useDomEditCommitsHelpers.ts
new file mode 100644
index 0000000000..dd82aff581
--- /dev/null
+++ b/packages/studio/src/hooks/useDomEditCommitsHelpers.ts
@@ -0,0 +1,158 @@
+import { StudioSaveHttpError, trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
+import type { DomEditPatchBatch } from "./domEditCommitTypes";
+import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
+
+export function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
+  return fields.map((field) => field.path).join(", ");
+}
+
+export function getErrorDetail(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+export async function readErrorResponseBody(
+  response: Response,
+): Promise<{ error?: string; fields?: string[] } | null> {
+  const contentType = response.headers.get("content-type") ?? "";
+  if (!contentType.includes("application/json")) return null;
+  return (await response.json().catch(() => null)) as { error?: string; fields?: string[] } | null;
+}
+
+export function formatPatchRejectionMessage(
+  body: { error?: string; fields?: string[] } | null,
+): string {
+  if (!body?.error) return "Couldn't save edit";
+  return `Couldn't save edit: ${body.error}${formatFieldsSuffix(body.fields)}`;
+}
+
+/** Human-readable identifier for a batch patch target (for the unmatched warning). */
+function describeBatchPatchTarget(patch: DomEditPatchBatch["patches"][number]): string {
+  return patch.target.id ?? patch.target.hfId ?? patch.target.selector ?? "(unaddressed)";
+}
+
+/**
+ * Surface server-reported unmatched patches. The server atomically refuses the
+ * whole multi-file gesture; the caller uses `durable: false` to roll back and
+ * reload, so report the refusal without turning it into a second failure.
+ */
+function reportUnmatchedBatchPatches(batch: DomEditPatchBatch, matched: boolean[]): void {
+  const unmatchedIds = batch.patches
+    .filter((_, index) => matched[index] === false)
+    .map(describeBatchPatchTarget);
+  if (unmatchedIds.length === 0) return;
+  console.warn(
+    `[studio] z-index reorder: server could not match ${unmatchedIds.length} patch target(s) in ` +
+      `${batch.sourceFile} (the whole z-order gesture will revert on reload):`,
+    unmatchedIds.join(", "),
+  );
+  trackStudioSaveFailure({
+    source: "dom_edit",
+    error: new Error(`Batch patch target(s) unmatched: ${unmatchedIds.join(", ")}`),
+    filePath: batch.sourceFile,
+    mutationType: "z-reorder-unmatched",
+  });
+}
+
+interface AtomicElementPatchFile {
+  sourceFile: string;
+  changed: boolean;
+  matched?: boolean[];
+  before: string;
+  after: string;
+}
+
+export class AtomicElementPatchConvergenceError extends Error {
+  constructor(message: string, options?: { cause?: unknown }) {
+    super(message, options);
+    this.name = "AtomicElementPatchConvergenceError";
+  }
+}
+
+// Keep the atomic response contract in one guard so callers do not compose validity.
+// fallow-ignore-next-line complexity
+function isAtomicElementPatchFile(value: unknown): value is AtomicElementPatchFile {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "sourceFile" in value &&
+    typeof value.sourceFile === "string" &&
+    "changed" in value &&
+    typeof value.changed === "boolean" &&
+    (!("matched" in value) ||
+      (Array.isArray(value.matched) &&
+        value.matched.every((matched) => typeof matched === "boolean"))) &&
+    "before" in value &&
+    typeof value.before === "string" &&
+    "after" in value &&
+    typeof value.after === "string" &&
+    value.changed === (value.before !== value.after)
+  );
+}
+
+// This is the single client owner for dispatching and validating the aggregate
+// atomic endpoint. Splitting validation from the request would weaken that wire contract.
+// fallow-ignore-next-line complexity
+export async function patchElementBatches(projectId: string, batches: DomEditPatchBatch[]) {
+  const body = JSON.stringify({ batches });
+  try {
+    const response = await fetch(
+      `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element-batches`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body,
+      },
+    );
+    if (!response.ok) {
+      const rejection = await readErrorResponseBody(response);
+      throw new StudioSaveHttpError(formatPatchRejectionMessage(rejection), response.status);
+    }
+    const result: unknown = await response.json().catch(() => null);
+    if (
+      typeof result !== "object" ||
+      result === null ||
+      !("durable" in result) ||
+      typeof result.durable !== "boolean" ||
+      !("files" in result) ||
+      !Array.isArray(result.files) ||
+      result.files.length !== batches.length ||
+      !result.files.every(isAtomicElementPatchFile) ||
+      (!result.durable && result.files.some((file) => file.changed))
+    ) {
+      throw new StudioSaveHttpError("Invalid atomic element patch response", 502);
+    }
+    const files = result.files.map((file, index) => {
+      const batch = batches[index];
+      const matched = file.matched ?? [];
+      if (
+        !batch ||
+        file.sourceFile !== batch.sourceFile ||
+        (matched.length !== 0 && matched.length !== batch.patches.length)
+      ) {
+        throw new StudioSaveHttpError("Invalid atomic element patch response", 502);
+      }
+      reportUnmatchedBatchPatches(batch, matched);
+      return {
+        ...file,
+        matched,
+        allMatched: matched.length === batch.patches.length && matched.every(Boolean),
+      };
+    });
+    return { durable: result.durable, files };
+  } catch (error) {
+    throw new AtomicElementPatchConvergenceError(getErrorDetail(error), { cause: error });
+  }
+}
+
+/**
+ * A batch is reload-skippable only when it is style-only: every operation is an
+ * `inline-style` write. The z-reorder commit applies those exact styles to the
+ * live iframe DOM synchronously, so persisting them adds nothing the preview
+ * doesn't already show. Any other op type (attribute / text-content / …) can
+ * have server-side semantics the live DOM hasn't mirrored — reload for those.
+ */
+export function batchesAreInlineStyleOnly(batches: DomEditPatchBatch[]): boolean {
+  return batches.every((batch) =>
+    batch.patches.every((patch) => patch.operations.every((op) => op.type === "inline-style")),
+  );
+}