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 90d7ed8698..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)}
         />
       ),
@@ -516,7 +519,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/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/propertyPanelFlatColorGradingSection.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx
index bf128ca0a2..db615065e9 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 }));
@@ -274,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 }));
@@ -607,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 a02c2f0d3a..ed42e6d3e9 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);
@@ -298,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(
@@ -344,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;
@@ -510,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/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/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/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 6fb1dad09d..7e44834366 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;
@@ -89,8 +88,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 +104,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", () => {
@@ -411,6 +429,163 @@ 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());
+  });
+
+  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());
+  });
+
+  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", () => {
@@ -554,6 +729,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(
@@ -631,6 +930,103 @@ 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());
+  });
+
+  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", () => {
@@ -670,6 +1066,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(
@@ -728,44 +1146,28 @@ describe("FlatSelectRow — label/value options", () => {
     expect(options).toEqual(["normal", "multiply", "screen"]);
     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", () => {
+  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(
-      <FlatToggle label="Loop" checked={false} disabled onChange={onChange} />,
+      <FlatSelectRow
+        label="Blend"
+        value="difference"
+        options={["normal", "multiply", "screen", "overlay"]}
+        tier="explicitCustom"
+        onChange={onChange}
+      />,
     );
-    const pill = host.querySelector<HTMLButtonElement>('[data-flat-toggle="true"]');
-    expect(pill?.disabled).toBe(true);
-    act(() => pill?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    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());
   });
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index 49faeebaa6..d8b1752d7c 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,37 @@ 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;
+  // 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;
+  // 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);
+  // 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;
@@ -294,7 +331,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 +360,7 @@ export function FlatSlider({
     lastCommitAtRef.current = Date.now();
     if (nextDraft !== lastCommittedRef.current) {
       lastCommittedRef.current = nextDraft;
-      onCommit(nextDraft);
+      onCommitRef.current(nextDraft);
     }
   };
   const scheduleCommit = (nextDraft: number) => {
@@ -333,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">
@@ -346,10 +406,13 @@ 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;
           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);
@@ -363,6 +426,7 @@ export function FlatSlider({
         }}
         onPointerUp={(e) => {
           if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+            explicitReleaseRef.current = true;
             e.currentTarget.releasePointerCapture(e.pointerId);
           }
           if (disabled) return;
@@ -377,19 +441,55 @@ export function FlatSlider({
           commitDraft(stepped);
         }}
         onPointerCancel={(e) => {
-          draggingRef.current = false;
-          if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-            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) {
+            // 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;
         }}
         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 && (
@@ -429,8 +529,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>
@@ -441,115 +542,4 @@ export function FlatSlider({
   );
 }
 
-/* ------------------------------------------------------------------ */
-/*  FlatSelectRow — label/value row backed by a native <select>        */
-/* ------------------------------------------------------------------ */
-
-export function FlatSelectRow({
-  label,
-  value,
-  options,
-  tier,
-  disabled,
-  onChange,
-  onReset,
-}: {
-  label: 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,
-  );
-  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}
-            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) => (
-              <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"
-            onClick={onReset}
-            className="flex-shrink-0 text-panel-text-3 opacity-0 transition-opacity hover:text-panel-text-1 group-hover:opacity-100"
-          >
-            <RotateCcw size={11} />
-          </button>
-        )}
-      </span>
-    </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>
-  );
-}
+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>
+  );
+}
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/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/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/propertyPanelTypes.ts b/packages/studio/src/components/editor/propertyPanelTypes.ts
index 833264e018..12b3cb136f 100644
--- a/packages/studio/src/components/editor/propertyPanelTypes.ts
+++ b/packages/studio/src/components/editor/propertyPanelTypes.ts
@@ -33,7 +33,17 @@ 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>;
+  /** 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,
+    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 5529003925..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(() => {
@@ -53,35 +59,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 +109,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);
@@ -115,15 +135,284 @@ describe("useColorGradingController", () => {
     vi.useRealTimers();
   });
 
+  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);
+    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("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("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, state } = renderHook(vi.fn());
+    const { root, getState } = renderHook(vi.fn());
+    act(() => {
+      getState().commitColorGrading(freshPopGrading());
+    });
+    act(() => {
+      getState().resetGrading();
+    });
+    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("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(
+      onSetAttributeLive,
+      makeElement({ id: "s1-bg" }),
+    );
     act(() => {
-      state.commitColorGrading(freshPopGrading());
+      getState().commitColorGrading(freshPopGrading());
     });
+    // 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(() => {
-      state.resetGrading();
+      vi.advanceTimersByTime(200);
     });
-    expect(state.grading.preset).toBe("neutral");
+    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).toHaveBeenCalledTimes(1);
     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..d35d60c10c 100644
--- a/packages/studio/src/components/editor/useColorGradingController.ts
+++ b/packages/studio/src/components/editor/useColorGradingController.ts
@@ -12,7 +12,8 @@ import {
   trackStudioPendingEdit,
 } from "../../utils/studioPendingEdits";
 import type { DomEditSelection } from "./domEditing";
-import { stripQueryAndHash } from "./propertyPanelHelpers";
+import { selectionIdentityKey, stripQueryAndHash } from "./propertyPanelHelpers";
+import { bumpDomEditCommitVersion } from "../../hooks/domEditCommitRunner";
 import {
   acceptStudioRuntimeMessage,
   postRuntimeControlMessage,
@@ -168,7 +169,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,
@@ -189,13 +194,92 @@ 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);
+  // 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
+  // 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);
-  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. 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;
+    const freshGrading = readColorGradingFromElement(element);
+    latestGradingRef.current = freshGrading;
+    confirmedGradingRef.current = freshGrading;
+    setGrading(freshGrading);
+    setCompareEnabled(false);
+    compareEnabledRef.current = false;
+    setApplyScope("source-file");
+    setApplyBusy(false);
+    setRuntimeStatus({ state: "pending", message: "Waiting for runtime" });
+    setMediaMetadata(null);
+  }
+
+  // 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(() => {
+    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;
+      }
+      if (pendingPersistValueRef.current === undefined) return;
+      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
+  }, [identityKey]);
+
   const target = useMemo(
     (): HfColorGradingTarget => ({
       id: element.id ?? null,
@@ -225,18 +309,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]);
@@ -257,11 +352,61 @@ 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,
+      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
+      // 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;
+        }
+        // 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.
+      // `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,
+          () => applySettled(false),
+        ),
+      );
+    },
+    [],
+  );
 
   const flushPendingPersist = useCallback(() => {
     if (persistTimerRef.current) {
@@ -270,9 +415,30 @@ 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;
-    return persistColorGradingValue(value);
-  }, [persistColorGradingValue]);
+    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
+    // 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,
+      attemptIdentityKey,
+      isLatestAttempt,
+      onSetAttributeLive,
+    );
+  }, [onSetAttributeLive, persistColorGradingValue]);
 
   useEffect(() => addStudioPendingEditFlushListener(flushPendingPersist), [flushPendingPersist]);
 
@@ -356,14 +522,40 @@ export function useColorGradingController({
       pendingPersistValueRef.current = isHfColorGradingActive(nextGrading)
         ? 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
+      // 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;
+        pendingPersistIdentityRef.current = null;
         persistTimerRef.current = null;
-        void persistColorGradingValue(value ?? null);
+        void persistColorGradingValue(
+          value ?? null,
+          attemptedGrading,
+          attemptIdentityKey,
+          isLatestAttempt,
+          onSetAttributeLive,
+        );
       }, 350);
     },
-    [persistColorGradingValue, postColorGrading, postCompare, scheduleRuntimeStatusRefresh],
+    [
+      onSetAttributeLive,
+      persistColorGradingValue,
+      postColorGrading,
+      postCompare,
+      scheduleRuntimeStatusRefresh,
+    ],
   );
 
   const commitCompare = useCallback(
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/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/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 34d7a15995..0c3e7a39c7 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 {
@@ -57,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,
@@ -128,6 +148,7 @@ export function useDomEditAttributeCommits({
         onError: (error) => reportDomEditPersistFailure(domEditSelection, [op], error, showToast),
         shouldResync: () => isLatestCommit() && !!options.refreshAfter,
         resync: () => refreshDomEditSelectionFromPreview(domEditSelection),
+        onSettled: options.onSettled,
       });
     },
     [
@@ -140,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, {
@@ -153,11 +273,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],
@@ -223,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..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>;
@@ -523,6 +372,7 @@ export function useDomEditCommits({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
@@ -585,6 +435,7 @@ export function useDomEditCommits({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
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")),
+  );
+}
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