@hyperframes/studio 0.6.106 → 0.6.108

package/src/hooks/useDomEditSession.ts

@@ -203,6 +203,7 @@ export function useDomEditSession({
     resolveImportedFontAsset,
     handleDomStyleCommit,
     handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
     handleDomTextCommit,
     handleDomTextFieldStyleCommit,
@@ -265,8 +266,6 @@ export function useDomEditSession({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
   } = useDomEditWiring({
-    // Pre-existing prop-drilling clone (same param set forwarded to
-    // useDomEditWiring); surfaced by this PR's adjacent edits, not introduced.
     // fallow-ignore-next-line code-duplication
     projectId,
     activeCompPath,
@@ -374,6 +373,7 @@ export function useDomEditSession({
     clearDomSelection,
     handleDomStyleCommit,
     handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
     handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit,

package/src/hooks/useDomEditTextCommits.ts

@@ -43,6 +43,33 @@ export interface UseDomEditTextCommitsParams {
   resolveImportedFontAsset: (fontFamilyValue: string) => ImportedFontAsset | null;
 }
 
+function applyPreviewAttribute(
+  doc: Document | null | undefined,
+  selection: DomEditSelection,
+  activeCompPath: string | null,
+  attr: string,
+  value: string | null,
+  options: { prefixData?: boolean; removeFalse?: boolean } = {},
+): void {
+  if (!doc) return;
+  const el = findElementForSelection(doc, selection, activeCompPath);
+  if (!el) return;
+  const fullAttr = options.prefixData && !attr.startsWith("data-") ? `data-${attr}` : attr;
+  if (value === null || value === "" || (options.removeFalse && value === "false")) {
+    el.removeAttribute(fullAttr);
+  } else {
+    el.setAttribute(fullAttr, value);
+  }
+}
+
+interface DataAttributeCommitOptions {
+  label: string;
+  coalescePrefix: string;
+  skipRefresh: boolean;
+  warningMessage: string;
+  refreshAfter?: boolean;
+}
+
 // ── Hook ──
 
 export function useDomEditTextCommits({
@@ -114,29 +141,33 @@ export function useDomEditTextCommits({
     ],
   );
 
-  const handleDomAttributeCommit = useCallback(
-    async (attr: string, value: string) => {
+  const commitDataAttribute = useCallback(
+    async (attr: string, value: string | null, options: DataAttributeCommitOptions) => {
       if (!domEditSelection) return;
       const iframe = previewIframeRef.current;
-      const doc = iframe?.contentDocument;
-      if (doc) {
-        const el = findElementForSelection(doc, domEditSelection, activeCompPath);
-        if (el) el.setAttribute(`data-${attr}`, value);
-      }
+      applyPreviewAttribute(
+        iframe?.contentDocument,
+        domEditSelection,
+        activeCompPath,
+        attr,
+        value,
+        {
+          prefixData: true,
+        },
+      );
       const op: PatchOperation = { type: "attribute", property: attr, value };
       try {
         await persistDomEditOperations(domEditSelection, [op], {
-          label: `Edit ${attr.replace(/-/g, " ")}`,
-          coalesceKey: `attr:${attr}:${getDomEditTargetKey(domEditSelection)}`,
-          skipRefresh: false,
+          label: options.label,
+          coalesceKey: `${options.coalescePrefix}:${attr}:${getDomEditTargetKey(domEditSelection)}`,
+          skipRefresh: options.skipRefresh,
         });
       } catch (err) {
-        console.warn(
-          "[Studio] Attribute persist failed:",
-          err instanceof Error ? err.message : err,
-        );
+        console.warn(options.warningMessage, err instanceof Error ? err.message : err);
+      }
+      if (options.refreshAfter) {
+        refreshDomEditSelectionFromPreview(domEditSelection);
       }
-      refreshDomEditSelectionFromPreview(domEditSelection);
     },
     [
       activeCompPath,
@@ -147,21 +178,45 @@ export function useDomEditTextCommits({
     ],
   );
 
+  const handleDomAttributeCommit = useCallback(
+    async (attr: string, value: string) => {
+      await commitDataAttribute(attr, value, {
+        label: `Edit ${attr.replace(/-/g, " ")}`,
+        coalescePrefix: "attr",
+        skipRefresh: false,
+        warningMessage: "[Studio] Attribute persist failed:",
+        refreshAfter: true,
+      });
+    },
+    [commitDataAttribute],
+  );
+
+  const handleDomAttributeLiveCommit = useCallback(
+    async (attr: string, value: string | null) => {
+      await commitDataAttribute(attr, value, {
+        label: `Edit ${attr.replace(/^(data-)?/, "").replace(/-/g, " ")}`,
+        coalescePrefix: "attr-live",
+        skipRefresh: true,
+        warningMessage: "[Studio] Live attribute persist failed:",
+      });
+    },
+    [commitDataAttribute],
+  );
+
   const handleDomHtmlAttributeCommit = useCallback(
     async (attr: string, value: string | null) => {
       if (!domEditSelection) return;
       const iframe = previewIframeRef.current;
-      const doc = iframe?.contentDocument;
-      if (doc) {
-        const el = findElementForSelection(doc, domEditSelection, activeCompPath);
-        if (el) {
-          if (value === null || value === "" || value === "false") {
-            el.removeAttribute(attr);
-          } else {
-            el.setAttribute(attr, value);
-          }
-        }
-      }
+      applyPreviewAttribute(
+        iframe?.contentDocument,
+        domEditSelection,
+        activeCompPath,
+        attr,
+        value,
+        {
+          removeFalse: true,
+        },
+      );
       const op: PatchOperation = { type: "html-attribute", property: attr, value };
       try {
         await persistDomEditOperations(domEditSelection, [op], {
@@ -395,6 +450,7 @@ export function useDomEditTextCommits({
   return {
     handleDomStyleCommit,
     handleDomAttributeCommit,
+    handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
     handleDomTextCommit,
     commitDomTextFields,

package/src/hooks/useDomEditWiring.ts

@@ -98,6 +98,7 @@ export interface UseDomEditWiringParams {
 
 // fallow-ignore-next-line complexity
 export function useDomEditWiring({
+  // fallow-ignore-next-line code-duplication
   projectId,
   activeCompPath,
   domEditSelection,

package/src/hooks/useDomSelection.ts

@@ -176,9 +176,7 @@ export function useDomSelection({
       if (nextSelection) {
         if (options?.revealPanel !== false) {
           setRightCollapsed(false);
-          if (rightPanelTab !== "layers") {
-            setRightPanelTab("design");
-          }
+          setRightPanelTab("design");
         }
         const nextSelectedTimelineId = findMatchingTimelineElementId(
           nextSelection,
@@ -190,13 +188,7 @@ export function useDomSelection({
 
       setSelectedTimelineElementId(null);
     },
-    [
-      setSelectedTimelineElementId,
-      timelineElements,
-      setRightCollapsed,
-      setRightPanelTab,
-      rightPanelTab,
-    ],
+    [setSelectedTimelineElementId, timelineElements, setRightCollapsed, setRightPanelTab],
   );
 
   const clearDomSelection = useCallback(() => {

package/src/hooks/useGsapAnimationOps.ts

@@ -40,10 +40,14 @@ export function useGsapAnimationOps({
         animationId,
         properties: { duration: updates.duration, ease: updates.ease, position: updates.position },
       };
+      // coalesceKey groups rapid meta edits into one history entry. Request
+      // serialization is now handled per-file at the commitMutation chokepoint
+      // (useGsapScriptCommits), so no per-op serializeKey is needed here.
+      const metaKey = `gsap:${animationId}:meta`;
       commitMutationSafely(
         selection,
         { type: "update-meta", animationId, updates },
-        { label: "Edit GSAP animation", coalesceKey: `gsap:${animationId}:meta`, shadowGsapOp },
+        { label: "Edit GSAP animation", coalesceKey: metaKey, shadowGsapOp },
       );
       if (sdkSession) runShadowGsapTween(sdkSession, shadowGsapOp);
     },

package/src/hooks/useGsapKeyframeOps.ts

@@ -1,5 +1,6 @@
 import { useCallback } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { ShadowKeyframeOp } from "../utils/sdkShadowGsapKeyframe";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { executeOptimistic } from "../utils/optimisticUpdate";
 import type { KeyframeCacheEntry } from "../player/store/playerStore";
@@ -58,6 +59,13 @@ export function useGsapKeyframeOps({
         percentage,
         properties: { [property]: value },
       };
+      // Shadow op (gsap_keyframe): SDK equivalent diffed via the commit chokepoint.
+      const shadowKeyframeOp: ShadowKeyframeOp = {
+        kind: "add",
+        animationId,
+        percentage,
+        properties: { [property]: value },
+      };
       void executeOptimisticKeyframeCacheUpdate({
         sourceFile,
         elementId: selection.id,
@@ -71,6 +79,7 @@ export function useGsapKeyframeOps({
           commitMutation(selection, mutation, {
             label: `Add keyframe at ${percentage}%`,
             softReload: true,
+            shadowKeyframeOp,
           }),
       }).catch((error) => {
         trackGsapSaveFailure(error, selection, mutation, `Add keyframe at ${percentage}%`);
@@ -86,10 +95,16 @@ export function useGsapKeyframeOps({
       percentage: number,
       properties: Record<string, number | string>,
     ) => {
+      const shadowKeyframeOp: ShadowKeyframeOp = {
+        kind: "add",
+        animationId,
+        percentage,
+        properties,
+      };
       return commitMutation(
         selection,
         { type: "add-keyframe", animationId, percentage, properties },
-        { label: `Add keyframe at ${percentage}%`, softReload: true },
+        { label: `Add keyframe at ${percentage}%`, softReload: true, shadowKeyframeOp },
       );
     },
     [commitMutation],
@@ -99,6 +114,10 @@ export function useGsapKeyframeOps({
     (selection: DomEditSelection, animationId: string, percentage: number) => {
       const sourceFile = selection.sourceFile || activeCompPath || "index.html";
       const mutation = { type: "remove-keyframe", animationId, percentage };
+      // Shadow op (gsap_keyframe): SDK has no %-based removeGsapKeyframe on main,
+      // so the runner resolves percentage → keyframeIndex against the pre-op
+      // script and no-ops on ambiguity (duplicate-percentage keyframes).
+      const shadowKeyframeOp: ShadowKeyframeOp = { kind: "remove", animationId, percentage };
       void executeOptimisticKeyframeCacheUpdate({
         sourceFile,
         elementId: selection.id,
@@ -112,6 +131,7 @@ export function useGsapKeyframeOps({
           commitMutation(selection, mutation, {
             label: `Remove keyframe at ${percentage}%`,
             softReload: true,
+            shadowKeyframeOp,
           }),
       }).catch((error) => {
         trackGsapSaveFailure(error, selection, mutation, `Remove keyframe at ${percentage}%`);

package/src/hooks/useGsapScriptCommits.ts

@@ -1,9 +1,11 @@
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { applySoftReload } from "../utils/gsapSoftReload";
 import { resolveGsapFidelityArgs, runShadowGsapFidelity } from "../utils/sdkShadowGsapFidelity";
+import { runShadowGsapKeyframeFidelity } from "../utils/sdkShadowGsapKeyframe";
 import { updateKeyframeCacheFromParsed } from "./gsapKeyframeCacheHelpers";
+import { createKeyedSerializer } from "./serializeByKey";
 import {
   GsapMutationHttpError,
   formatGsapMutationRejectionToast,
@@ -45,10 +47,16 @@ async function mutateGsapScript(
 // oxfmt-ignore
 // fallow-ignore-next-line complexity
 export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession }: GsapScriptCommitsParams) {
+  // Serializer for per-key commits (options.serializeKey). Keyed by
+  // `gsap:${animationId}:meta`, it chains a meta commit onto the prior one for
+  // the same animationId so their POSTs can't interleave — which is what made
+  // the shadow fidelity diff pair an op with a stale server result and report
+  // false ease mismatches. Held in a ref so the chain survives re-renders.
+  const serializerRef = useRef(createKeyedSerializer());
   // Pre-existing complexity (server mutate + history + reload branches); this PR
   // adds only a guarded shadow-fidelity dispatch.
   // fallow-ignore-next-line complexity
-  const commitMutation = useCallback(async (selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => {
+  const runCommit = useCallback(async (selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => {
     const pid = projectIdRef.current;
     if (!pid) return;
     const unsafeFields = findUnsafeMutationValues(mutation);
@@ -70,9 +78,10 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     domEditSaveTimestampRef.current = Date.now();
     // Shadow value fidelity: diff the SDK's GSAP writer output against the
     // server's, from the same pre-op file. Fire-and-forget; server authoritative.
-    // Only meta-level ops carry shadowGsapOp today (add / update-meta / delete via
-    // useGsapAnimationOps). Per-property and keyframe handlers (useGsapPropertyDebounce,
-    // useGsapKeyframeOps) intentionally don't synthesize one yet — deferred follow-up.
+    // Meta-level ops carry shadowGsapOp (add / update-meta / delete via
+    // useGsapAnimationOps); keyframe ops carry shadowKeyframeOp (add/remove via
+    // useGsapKeyframeOps, handled by the gsap_keyframe block below). Per-property
+    // handlers (useGsapPropertyDebounce) don't synthesize one yet — deferred follow-up.
     // scriptText is null when the composition has no GSAP script; nothing to diff.
     const fidelityArgs = resolveGsapFidelityArgs(
       sdkSession,
@@ -83,6 +92,12 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     if (fidelityArgs) {
       void runShadowGsapFidelity(fidelityArgs.before, fidelityArgs.op, fidelityArgs.serverScript);
     }
+    // Keyframe value fidelity (gsap_keyframe): same serialize-diff approach, but
+    // the SDK has no keyframe reader so there is no live-existence path — the diff
+    // is the only signal. Guarded on a live session + both scripts to diff.
+    if (sdkSession && options.shadowKeyframeOp && result.before != null && result.scriptText != null) {
+      void runShadowGsapKeyframeFidelity(result.before, options.shadowKeyframeOp, result.scriptText);
+    }
     if (result.before != null && result.after != null) {
       await editHistory.recordEdit({ label: options.label, kind: "manual", coalesceKey: options.coalesceKey, files: { [targetPath]: { before: result.before, after: result.after } } });
     }
@@ -97,6 +112,19 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     }
     onCacheInvalidate();
   }, [projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession]);
+  // Every GSAP-script commit is a read-modify-write of one file. Overlapping
+  // commits to the SAME file (any op type, any animation) interleave server-side
+  // and make the shadow fidelity diff pair an op with a stale server result —
+  // the false ease/value mismatches this serializer exists to prevent. So
+  // serialize per target file by default; an explicit serializeKey overrides.
+  const commitMutation = useCallback(
+    (selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => {
+      const file = selection.sourceFile || activeCompPath || "index.html";
+      const key = options.serializeKey ?? `gsap-file:${file}`;
+      return serializerRef.current(key, () => runCommit(selection, mutation, options));
+    },
+    [runCommit, activeCompPath],
+  );
   const trackGsapSaveFailure = useGsapSaveFailureTelemetry(activeCompPath);
   const commitMutationSafely = useSafeGsapCommitMutation(commitMutation, trackGsapSaveFailure, showToast);
   const propertyOps = useGsapPropertyDebounce(commitMutationSafely);

package/src/hooks/usePanelLayout.ts

@@ -1,5 +1,9 @@
 import { useState, useCallback, useRef } from "react";
-import type { RightPanelTab } from "../utils/studioHelpers";
+import type {
+  RightInspectorPane,
+  RightInspectorPanes,
+  RightPanelTab,
+} from "../utils/studioHelpers";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../utils/studioUiPreferences";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 
@@ -8,6 +12,11 @@ export interface InitialPanelLayoutState {
   rightPanelTab?: RightPanelTab | null;
 }
 
+function getInitialRightInspectorPanes(tab?: RightPanelTab | null): RightInspectorPanes {
+  if (tab === "layers") return { layers: true, design: false };
+  return { layers: false, design: true };
+}
+
 export function usePanelLayout(initialState?: InitialPanelLayoutState) {
   const [leftWidth, setLeftWidth] = useState(240);
   const [rightWidth, setRightWidth] = useState(400);
@@ -18,6 +27,9 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
   const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>(
     initialState?.rightPanelTab ?? "renders",
   );
+  const [rightInspectorPanes, setRightInspectorPanes] = useState<RightInspectorPanes>(() =>
+    getInitialRightInspectorPanes(initialState?.rightPanelTab),
+  );
   const panelDragRef = useRef<{
     side: "left" | "right";
     startX: number;
@@ -67,12 +79,23 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
 
   const trackedSetRightPanelTab = useCallback(
     (tab: RightPanelTab) => {
+      if (tab === "design" || tab === "layers") {
+        setRightInspectorPanes((panes) => ({ ...panes, [tab]: true }));
+      }
       setRightPanelTab(tab);
       trackStudioEvent("tab_switch", { panel: "right_panel", tab });
     },
     [setRightPanelTab],
   );
 
+  const toggleRightInspectorPane = useCallback((pane: RightInspectorPane) => {
+    setRightInspectorPanes((panes) => {
+      const next = { ...panes, [pane]: !panes[pane] };
+      if (!next.design && !next.layers) return panes;
+      return next;
+    });
+  }, []);
+
   return {
     leftWidth,
     setLeftWidth,
@@ -83,6 +106,8 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
     setRightCollapsed,
     rightPanelTab,
     setRightPanelTab: trackedSetRightPanelTab,
+    rightInspectorPanes,
+    toggleRightInspectorPane,
     toggleLeftSidebar,
     handlePanelResizeStart,
     handlePanelResizeMove,

package/src/hooks/useStudioContextValue.ts

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useRef, useState, type DragEvent } from "react";
 import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
 import type { StudioContextValue } from "../contexts/StudioContext";
+import type { RightInspectorPanes } from "../utils/studioHelpers";
 
 interface StudioContextInput {
   projectId: string;
@@ -70,14 +71,18 @@ export interface InspectorState {
 
 export function useInspectorState(
   rightPanelTab: string,
+  rightInspectorPanes: RightInspectorPanes,
   rightCollapsed: boolean,
   isPlaying: boolean,
   isGestureRecording?: boolean,
 ): InspectorState {
   // fallow-ignore-next-line complexity
   return useMemo(() => {
-    const layersPanelActive = STUDIO_INSPECTOR_PANELS_ENABLED && rightPanelTab === "layers";
-    const designPanelActive = STUDIO_INSPECTOR_PANELS_ENABLED && rightPanelTab === "design";
+    const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
+    const layersPanelActive =
+      STUDIO_INSPECTOR_PANELS_ENABLED && inspectorTabActive && rightInspectorPanes.layers;
+    const designPanelActive =
+      STUDIO_INSPECTOR_PANELS_ENABLED && inspectorTabActive && rightInspectorPanes.design;
     const inspectorPanelActive = layersPanelActive || designPanelActive;
     return {
       layersPanelActive,
@@ -88,7 +93,7 @@ export function useInspectorState(
       shouldShowSelectedDomBounds:
         inspectorPanelActive && !rightCollapsed && !isPlaying && !isGestureRecording,
     };
-  }, [rightPanelTab, rightCollapsed, isPlaying, isGestureRecording]);
+  }, [rightPanelTab, rightInspectorPanes, rightCollapsed, isPlaying, isGestureRecording]);
 }
 
 // fallow-ignore-next-line complexity

package/src/icons/SystemIcons.tsx

@@ -8,8 +8,10 @@ import {
   ArrowsOutCardinal,
   MusicNote,
   Palette as PhPalette,
+  Minus as PhMinus,
   Plus as PhPlus,
   Square as PhSquare,
+  SquareSplitVertical as PhSquareSplitVertical,
   TextT,
   X as PhX,
   Lightning,
@@ -43,8 +45,10 @@ export const MessageSquare = makeIcon(ChatCenteredText);
 export const Move = makeIcon(ArrowsOutCardinal);
 export const Music = makeIcon(MusicNote);
 export const Palette = makeIcon(PhPalette);
+export const Minus = makeIcon(PhMinus);
 export const Plus = makeIcon(PhPlus);
 export const Square = makeIcon(PhSquare);
+export const Compare = makeIcon(PhSquareSplitVertical);
 export const Type = makeIcon(TextT);
 export const X = makeIcon(PhX);
 export const Zap = makeIcon(Lightning);

package/src/player/lib/timelineDOM.test.ts

@@ -36,6 +36,25 @@ describe("parseTimelineFromDOM — hfId from data-hf-id", () => {
     expect(plain).toBeDefined();
     expect(plain?.hfId).toBeUndefined();
   });
+
+  it("ignores runtime-owned color grading canvases with timing attributes", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="root">
+        <img id="photo" class="clip" data-start="0" data-duration="5" />
+        <canvas
+          class="__hf_color_grading_canvas__"
+          data-hf-color-grading-canvas="true"
+          data-hyperframes-ignore
+          data-start="0"
+          data-duration="5"
+        ></canvas>
+      </div>
+    `);
+
+    const elements = parseTimelineFromDOM(doc, 10);
+
+    expect(elements.map((el) => el.tag)).toEqual(["img"]);
+  });
 });
 
 describe("createImplicitTimelineLayersFromDOM — hfId from data-hf-id", () => {
@@ -52,4 +71,21 @@ describe("createImplicitTimelineLayersFromDOM — hfId from data-hf-id", () => {
     expect(layer).toBeDefined();
     expect(layer?.hfId).toBe("hf-xyz789");
   });
+
+  it("ignores runtime-owned color grading canvases as implicit layers", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="root" data-duration="5">
+        <img id="photo" class="clip" data-start="0" data-duration="5" />
+        <canvas
+          class="__hf_color_grading_canvas__"
+          data-hf-color-grading-canvas="true"
+          data-hyperframes-ignore
+        ></canvas>
+      </div>
+    `);
+
+    const layers = createImplicitTimelineLayersFromDOM(doc, 5);
+
+    expect(layers).toEqual([]);
+  });
 });

package/src/player/lib/timelineDOM.ts

@@ -22,6 +22,7 @@ import {
   buildTimelineElementKey,
   buildTimelineElementIdentity,
   getTimelineElementIdentity,
+  isTimelineIgnoredElement,
 } from "./timelineElementHelpers";
 
 // Re-export helpers that were previously public from this module so that
@@ -230,6 +231,7 @@ export function parseTimelineFromDOM(doc: Document, rootDuration: number): Timel
 
   nodes.forEach((node) => {
     if (node === rootComp) return;
+    if (isTimelineIgnoredElement(node)) return;
     const el = node as HTMLElement;
     const startStr = el.getAttribute("data-start");
     if (startStr == null) return;

package/src/player/lib/timelineElementHelpers.ts

@@ -23,6 +23,19 @@ function readDurationAttribute(el: Element | null | undefined): number {
   return isFinitePositive(duration) ? duration : 0;
 }
 
+export function isTimelineIgnoredElement(el: Element): boolean {
+  return Boolean(
+    el.closest(
+      [
+        "[data-hyperframes-ignore]",
+        "[data-hyperframes-picker-ignore]",
+        "[data-hf-ignore]",
+        "[data-hf-color-grading-canvas]",
+      ].join(","),
+    ),
+  );
+}
+
 export function readTimelineDurationFromDocument(doc: Document | null | undefined): number {
   if (!doc) return 0;
   const rootDuration = readDurationAttribute(doc.querySelector("[data-composition-id]"));
@@ -30,6 +43,7 @@ export function readTimelineDurationFromDocument(doc: Document | null | undefine
 
   let maxEnd = 0;
   for (const node of Array.from(doc.querySelectorAll("[data-start]"))) {
+    if (isTimelineIgnoredElement(node)) continue;
     const start = Number.parseFloat(node.getAttribute("data-start") ?? "");
     const duration = readDurationAttribute(node);
     if (!Number.isFinite(start) || start < 0 || duration <= 0) continue;
@@ -241,7 +255,9 @@ export function getTimelineElementIdentity(element: TimelineElement): string {
 
 function getTimelineDomNodes(doc: Document): Element[] {
   const rootComp = doc.querySelector("[data-composition-id]");
-  return Array.from(doc.querySelectorAll("[data-start]")).filter((node) => node !== rootComp);
+  return Array.from(doc.querySelectorAll("[data-start]")).filter(
+    (node) => node !== rootComp && !isTimelineIgnoredElement(node),
+  );
 }
 
 function numbersNearlyEqual(a: number, b: number): boolean {
@@ -295,6 +311,7 @@ export function findTimelineDomNodeForClip(
 
 export function isImplicitTimelineLayerCandidate(root: Element, el: Element): el is HTMLElement {
   if (!isHtmlElement(el)) return false;
+  if (isTimelineIgnoredElement(el)) return false;
   if (el.parentElement !== root) return false;
   const tagName = el.tagName.toLowerCase();
   if (IMPLICIT_TIMELINE_LAYER_SKIP_TAGS.has(tagName)) return false;