@hyperframes/studio 0.6.0-alpha.9 → 0.6.1

package/src/player/lib/timelineDOM.ts

@@ -0,0 +1,373 @@
+/**
+ * Higher-level timeline DOM operations: element factories, DOM-to-element
+ * parsing, timeline merging, and standalone composition helpers.
+ *
+ * Preview iframe utilities (normaliseViewport, autoHeal, unmute, resolveIframe,
+ * buildMissingCompositionElements) live in timelineIframeHelpers.ts.
+ *
+ * Pure functions (no React, no store reads) — testable in isolation.
+ */
+
+import type { TimelineElement } from "../store/playerStore";
+import type { ClipManifestClip } from "./playbackTypes";
+import {
+  resolveMediaElement,
+  applyMediaMetadataFromElement,
+  getTimelineElementDisplayLabel,
+  getImplicitTimelineLayerLabel,
+  isImplicitTimelineLayerCandidate,
+  getTimelineElementSelector,
+  getTimelineElementSourceFile,
+  getTimelineElementSelectorIndex,
+  buildTimelineElementKey,
+  buildTimelineElementIdentity,
+  getTimelineElementIdentity,
+} from "./timelineElementHelpers";
+
+// Re-export helpers that were previously public from this module so that
+// existing import sites (hook + tests) don't need to change.
+export {
+  readTimelineDurationFromDocument,
+  resolveMediaElement,
+  applyMediaMetadataFromElement,
+  getTimelineElementSelector,
+  getTimelineElementSourceFile,
+  getTimelineElementSelectorIndex,
+  buildTimelineElementIdentity,
+  getTimelineElementIdentity,
+  findTimelineDomNodeForClip,
+} from "./timelineElementHelpers";
+
+// Re-export iframe helpers so the hook can keep a single import source.
+export {
+  normalizePreviewViewport,
+  autoHealMissingCompositionIds,
+  unmutePreviewMedia,
+  resolveIframe,
+  buildMissingCompositionElements,
+} from "./timelineIframeHelpers";
+
+// ---------------------------------------------------------------------------
+// TimelineElement factories
+// ---------------------------------------------------------------------------
+
+export function createTimelineElementFromManifestClip(params: {
+  clip: ClipManifestClip;
+  fallbackIndex: number;
+  doc?: Document | null;
+  hostEl?: Element | null;
+}): TimelineElement {
+  const { clip, fallbackIndex, doc } = params;
+  let hostEl = params.hostEl ?? null;
+  const label = getTimelineElementDisplayLabel({
+    id: clip.id,
+    label: clip.label,
+    tag: clip.tagName || clip.kind,
+  });
+
+  let domId: string | undefined;
+  let selector: string | undefined;
+  let selectorIndex: number | undefined;
+  let sourceFile: string | undefined;
+
+  if (hostEl) {
+    domId = hostEl.id || undefined;
+    selector = getTimelineElementSelector(hostEl);
+    selectorIndex =
+      doc && selector ? getTimelineElementSelectorIndex(doc, hostEl, selector) : undefined;
+    sourceFile = getTimelineElementSourceFile(hostEl);
+  }
+
+  const identity = buildTimelineElementIdentity({
+    preferredId: clip.id,
+    label,
+    fallbackIndex,
+    domId,
+    selector,
+    selectorIndex,
+    sourceFile,
+  });
+  const entry: TimelineElement = {
+    id: identity.id,
+    label,
+    key: identity.key,
+    tag: clip.tagName || clip.kind,
+    start: clip.start,
+    duration: clip.duration,
+    track: clip.track,
+    domId,
+    selector,
+    selectorIndex,
+    sourceFile,
+  };
+
+  if (hostEl) {
+    applyMediaMetadataFromElement(entry, hostEl);
+  }
+  if (clip.assetUrl) entry.src = clip.assetUrl;
+  if (clip.kind === "composition" && clip.compositionId) {
+    let resolvedSrc = clip.compositionSrc;
+    if (!resolvedSrc) {
+      hostEl = doc?.querySelector(`[data-composition-id="${clip.compositionId}"]`) ?? hostEl;
+      resolvedSrc =
+        hostEl?.getAttribute("data-composition-src") ??
+        hostEl?.getAttribute("data-composition-file") ??
+        null;
+    }
+    if (resolvedSrc) {
+      entry.compositionSrc = resolvedSrc;
+    } else if (hostEl) {
+      const innerVideo = hostEl.querySelector("video[src]");
+      if (innerVideo) {
+        entry.src = innerVideo.getAttribute("src") || undefined;
+        entry.tag = "video";
+      }
+    }
+    if (hostEl) {
+      entry.domId = hostEl.id || undefined;
+      entry.selector = getTimelineElementSelector(hostEl);
+      entry.selectorIndex =
+        doc && entry.selector
+          ? getTimelineElementSelectorIndex(doc, hostEl, entry.selector)
+          : undefined;
+      entry.sourceFile = getTimelineElementSourceFile(hostEl);
+      const nextIdentity = buildTimelineElementIdentity({
+        preferredId: clip.id,
+        label,
+        fallbackIndex,
+        domId: entry.domId,
+        selector: entry.selector,
+        selectorIndex: entry.selectorIndex,
+        sourceFile: entry.sourceFile,
+      });
+      entry.id = nextIdentity.id;
+      entry.key = nextIdentity.key;
+    }
+  }
+
+  return entry;
+}
+
+export function createImplicitTimelineLayersFromDOM(
+  doc: Document,
+  rootDuration: number,
+  existingElements: readonly TimelineElement[] = [],
+): TimelineElement[] {
+  if (!Number.isFinite(rootDuration) || rootDuration <= 0) return [];
+  const rootComp = doc.querySelector("[data-composition-id]");
+  if (!rootComp) return [];
+
+  const existingKeys = new Set(existingElements.map(getTimelineElementIdentity));
+  const maxTrack = existingElements.reduce(
+    (max, element) => Math.max(max, Number.isFinite(element.track) ? element.track : 0),
+    -1,
+  );
+  const layers: TimelineElement[] = [];
+
+  for (const child of Array.from(rootComp.children)) {
+    if (!isImplicitTimelineLayerCandidate(rootComp, child)) continue;
+
+    const selector = getTimelineElementSelector(child);
+    if (!selector) continue;
+    const selectorIndex = getTimelineElementSelectorIndex(doc, child, selector);
+    const sourceFile = getTimelineElementSourceFile(child);
+    const label = getImplicitTimelineLayerLabel(child);
+    const identity = buildTimelineElementIdentity({
+      preferredId: child.id || null,
+      label,
+      fallbackIndex: existingElements.length + layers.length,
+      domId: child.id || undefined,
+      selector,
+      selectorIndex,
+      sourceFile,
+    });
+    if (existingKeys.has(identity.key) || existingKeys.has(identity.id)) continue;
+
+    layers.push({
+      domId: child.id || undefined,
+      duration: rootDuration,
+      id: identity.id,
+      key: identity.key,
+      label,
+      selector,
+      selectorIndex,
+      sourceFile,
+      start: 0,
+      tag: child.tagName.toLowerCase(),
+      timingSource: "implicit",
+      track: maxTrack + 1 + layers.length,
+    });
+  }
+
+  return layers;
+}
+
+/**
+ * Parse [data-start] elements from a Document into TimelineElement[].
+ * Shared helper — used by onIframeLoad fallback, handleMessage, and enrichMissingCompositions.
+ */
+export function parseTimelineFromDOM(doc: Document, rootDuration: number): TimelineElement[] {
+  const rootComp = doc.querySelector("[data-composition-id]");
+  const nodes = doc.querySelectorAll("[data-start]");
+  const els: TimelineElement[] = [];
+  let trackCounter = 0;
+
+  nodes.forEach((node) => {
+    if (node === rootComp) return;
+    const el = node as HTMLElement;
+    const startStr = el.getAttribute("data-start");
+    if (startStr == null) return;
+    const start = parseFloat(startStr);
+    if (isNaN(start)) return;
+    if (Number.isFinite(rootDuration) && rootDuration > 0 && start >= rootDuration) return;
+
+    const tagLower = el.tagName.toLowerCase();
+    let dur = 0;
+    const durStr = el.getAttribute("data-duration");
+    if (durStr != null) dur = parseFloat(durStr);
+    if (isNaN(dur) || dur <= 0) dur = Math.max(0, rootDuration - start);
+    if (Number.isFinite(rootDuration) && rootDuration > 0) {
+      dur = Math.min(dur, Math.max(0, rootDuration - start));
+    }
+    if (!Number.isFinite(dur) || dur <= 0) return;
+
+    const trackStr = el.getAttribute("data-track-index");
+    const track = trackStr != null ? parseInt(trackStr, 10) : trackCounter++;
+    const compId = el.getAttribute("data-composition-id");
+    const selector = getTimelineElementSelector(el);
+    const sourceFile = getTimelineElementSourceFile(el);
+    const selectorIndex = getTimelineElementSelectorIndex(doc, el, selector);
+    const label = getTimelineElementDisplayLabel({
+      id: el.id || compId || null,
+      label: el.getAttribute("data-timeline-label") ?? el.getAttribute("data-label"),
+      tag: tagLower,
+    });
+    const identity = buildTimelineElementIdentity({
+      preferredId: el.id || compId || null,
+      label,
+      fallbackIndex: els.length,
+      domId: el.id || undefined,
+      selector,
+      selectorIndex,
+      sourceFile,
+    });
+    const entry: TimelineElement = {
+      id: identity.id,
+      label,
+      key: identity.key,
+      tag: tagLower,
+      start,
+      duration: dur,
+      track: isNaN(track) ? 0 : track,
+      domId: el.id || undefined,
+      selector,
+      selectorIndex,
+      sourceFile,
+      timingSource: "authored",
+    };
+
+    const mediaEl = resolveMediaElement(el);
+    if (mediaEl) {
+      if (mediaEl.tagName === "IMG") {
+        entry.tag = "img";
+      }
+      const src = mediaEl.getAttribute("src");
+      if (src) entry.src = src;
+      const vol = el.getAttribute("data-volume") ?? mediaEl.getAttribute("data-volume");
+      if (vol) entry.volume = parseFloat(vol);
+      applyMediaMetadataFromElement(entry, el);
+    }
+
+    // Sub-compositions
+    const compSrc =
+      el.getAttribute("data-composition-src") || el.getAttribute("data-composition-file");
+    if (compSrc) {
+      entry.compositionSrc = compSrc;
+    } else if (compId && compId !== rootComp?.getAttribute("data-composition-id")) {
+      // Inline composition — expose inner video for thumbnails
+      const innerVideo = el.querySelector("video[src]");
+      if (innerVideo) {
+        entry.src = innerVideo.getAttribute("src") || undefined;
+        entry.tag = "video";
+      }
+    }
+
+    els.push(entry);
+  });
+
+  return [...els, ...createImplicitTimelineLayersFromDOM(doc, rootDuration, els)];
+}
+
+// ---------------------------------------------------------------------------
+// Merge helpers
+// ---------------------------------------------------------------------------
+
+export function mergeTimelineElementsPreservingDowngrades(
+  currentElements: TimelineElement[],
+  nextElements: TimelineElement[],
+  currentDuration: number,
+  nextDuration: number,
+): TimelineElement[] {
+  const safeCurrentDuration = Number.isFinite(currentDuration) ? currentDuration : 0;
+  const safeNextDuration = Number.isFinite(nextDuration) ? nextDuration : 0;
+
+  if (
+    currentElements.length === 0 ||
+    nextElements.length >= currentElements.length ||
+    safeNextDuration > safeCurrentDuration
+  ) {
+    return nextElements;
+  }
+
+  const nextIdentities = new Set(nextElements.map(getTimelineElementIdentity));
+  const preserved = currentElements.filter(
+    (element) => !nextIdentities.has(getTimelineElementIdentity(element)),
+  );
+  if (preserved.length === 0) return nextElements;
+  return [...nextElements, ...preserved];
+}
+
+// ---------------------------------------------------------------------------
+// Standalone composition helpers
+// ---------------------------------------------------------------------------
+
+export function resolveStandaloneRootCompositionSrc(iframeSrc: string): string | undefined {
+  const compPathMatch = iframeSrc.match(/\/preview\/comp\/(.+?)(?:\?|$)/);
+  return compPathMatch ? decodeURIComponent(compPathMatch[1]) : undefined;
+}
+
+export function buildStandaloneRootTimelineElement(params: {
+  compositionId: string;
+  tagName: string;
+  rootDuration: number;
+  iframeSrc: string;
+  selector?: string;
+  selectorIndex?: number;
+}): TimelineElement | null {
+  if (!Number.isFinite(params.rootDuration) || params.rootDuration <= 0) return null;
+
+  const compositionSrc = resolveStandaloneRootCompositionSrc(params.iframeSrc);
+
+  return {
+    id: params.compositionId,
+    label: getTimelineElementDisplayLabel({
+      id: params.compositionId,
+      tag: params.tagName,
+    }),
+    key: buildTimelineElementKey({
+      id: params.compositionId,
+      fallbackIndex: 0,
+      selector: params.selector,
+      selectorIndex: params.selectorIndex,
+      sourceFile: compositionSrc,
+    }),
+    tag: params.tagName.toLowerCase() || "div",
+    start: 0,
+    duration: params.rootDuration,
+    track: 0,
+    compositionSrc,
+    selector: params.selector,
+    selectorIndex: params.selectorIndex,
+    sourceFile: compositionSrc,
+  };
+}

package/src/player/lib/timelineElementHelpers.ts

@@ -0,0 +1,303 @@
+/**
+ * Low-level helpers for building and identifying TimelineElement objects.
+ *
+ * Covers: duration reading, media-element metadata extraction, selector/key/
+ * identity builders, DOM node lookup, and implicit layer detection. These are
+ * intentionally dependency-free (no store, no hooks) so they can be used in
+ * both the React hook and test environments.
+ */
+
+import type { TimelineElement } from "../store/playerStore";
+import type { ClipManifestClip } from "./playbackTypes";
+import { isFinitePositive } from "./playbackAdapter";
+
+// ---------------------------------------------------------------------------
+// Duration attribute helpers
+// ---------------------------------------------------------------------------
+
+export function readDurationAttribute(el: Element | null | undefined): number {
+  if (!el) return 0;
+  const duration =
+    Number.parseFloat(el.getAttribute("data-duration") ?? "") ||
+    Number.parseFloat(el.getAttribute("data-hf-authored-duration") ?? "");
+  return isFinitePositive(duration) ? duration : 0;
+}
+
+export function readTimelineDurationFromDocument(doc: Document | null | undefined): number {
+  if (!doc) return 0;
+  const rootDuration = readDurationAttribute(doc.querySelector("[data-composition-id]"));
+  if (rootDuration > 0) return rootDuration;
+
+  let maxEnd = 0;
+  for (const node of Array.from(doc.querySelectorAll("[data-start]"))) {
+    const start = Number.parseFloat(node.getAttribute("data-start") ?? "");
+    const duration = readDurationAttribute(node);
+    if (!Number.isFinite(start) || start < 0 || duration <= 0) continue;
+    maxEnd = Math.max(maxEnd, start + duration);
+  }
+  return maxEnd;
+}
+
+// ---------------------------------------------------------------------------
+// DOM element type guards
+// ---------------------------------------------------------------------------
+
+export function isHtmlElement(el: Element): el is HTMLElement {
+  const HtmlElementCtor = el.ownerDocument.defaultView?.HTMLElement ?? globalThis.HTMLElement;
+  return typeof HtmlElementCtor !== "undefined" && el instanceof HtmlElementCtor;
+}
+
+export function resolveMediaElement(el: Element): HTMLMediaElement | HTMLImageElement | null {
+  const win = el.ownerDocument.defaultView ?? window;
+  const MediaElementCtor = win.HTMLMediaElement ?? globalThis.HTMLMediaElement;
+  const ImageElementCtor = win.HTMLImageElement ?? globalThis.HTMLImageElement;
+  if (el instanceof MediaElementCtor || el instanceof ImageElementCtor) return el;
+  const candidate = el.querySelector("video, audio, img");
+  return candidate instanceof MediaElementCtor || candidate instanceof ImageElementCtor
+    ? candidate
+    : null;
+}
+
+export function applyMediaMetadataFromElement(entry: TimelineElement, el: Element): void {
+  const mediaStartAttr = el.getAttribute("data-playback-start")
+    ? "playback-start"
+    : el.getAttribute("data-media-start")
+      ? "media-start"
+      : undefined;
+  const mediaStartValue =
+    el.getAttribute("data-playback-start") ?? el.getAttribute("data-media-start");
+  if (mediaStartValue != null) {
+    const playbackStart = parseFloat(mediaStartValue);
+    if (Number.isFinite(playbackStart)) entry.playbackStart = playbackStart;
+  }
+  if (mediaStartAttr) entry.playbackStartAttr = mediaStartAttr;
+
+  const mediaEl = resolveMediaElement(el);
+  if (!mediaEl) return;
+
+  entry.tag = mediaEl.tagName.toLowerCase();
+  const src = mediaEl.getAttribute("src");
+  if (src) entry.src = src;
+
+  const win = mediaEl.ownerDocument.defaultView ?? window;
+  const MediaElementCtor = win.HTMLMediaElement ?? globalThis.HTMLMediaElement;
+  if (typeof MediaElementCtor === "undefined" || !(mediaEl instanceof MediaElementCtor)) return;
+
+  const sourceDurationAttr =
+    el.getAttribute("data-source-duration") ?? mediaEl.getAttribute("data-source-duration");
+  const sourceDuration = sourceDurationAttr ? parseFloat(sourceDurationAttr) : mediaEl.duration;
+  if (Number.isFinite(sourceDuration) && sourceDuration > 0) {
+    entry.sourceDuration = sourceDuration;
+  }
+
+  const playbackRate = mediaEl.defaultPlaybackRate;
+  if (Number.isFinite(playbackRate) && playbackRate > 0) {
+    entry.playbackRate = playbackRate;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Label helpers
+// ---------------------------------------------------------------------------
+
+export function getTimelineElementDisplayLabel(input: {
+  id?: string | null;
+  label?: string | null;
+  tag?: string | null;
+}): string {
+  const label = input.label?.trim();
+  if (label) return label;
+  const id = input.id?.trim();
+  if (id) return id;
+  const tag = input.tag?.trim().toLowerCase();
+  return tag ? `${tag} clip` : "Timeline clip";
+}
+
+export const IMPLICIT_TIMELINE_LAYER_SKIP_TAGS = new Set([
+  "base",
+  "link",
+  "meta",
+  "noscript",
+  "script",
+  "style",
+  "template",
+]);
+
+export function humanizeTimelineIdentifier(value: string): string {
+  return value
+    .trim()
+    .replace(/[_-]+/g, " ")
+    .replace(/\s+/g, " ")
+    .replace(/\b\w/g, (match) => match.toUpperCase());
+}
+
+export function getImplicitTimelineLayerLabel(el: HTMLElement): string {
+  const explicitLabel =
+    el.getAttribute("data-timeline-label") ??
+    el.getAttribute("data-label") ??
+    el.getAttribute("aria-label");
+  if (explicitLabel?.trim()) return explicitLabel.trim();
+  if (el.id.trim()) return humanizeTimelineIdentifier(el.id);
+  const classes = el.className.split(/\s+/).filter(Boolean);
+  const className = classes.find((value) => value !== "clip") ?? classes[0];
+  if (className) return humanizeTimelineIdentifier(className);
+  return getTimelineElementDisplayLabel({ tag: el.tagName });
+}
+
+// ---------------------------------------------------------------------------
+// Selector / identity / key builders
+// ---------------------------------------------------------------------------
+
+export function getTimelineElementSelector(el: Element): string | undefined {
+  if (isHtmlElement(el) && el.id) return `#${el.id}`;
+  const compId = el.getAttribute("data-composition-id");
+  if (compId) return `[data-composition-id="${compId}"]`;
+  if (isHtmlElement(el)) {
+    const classes = el.className.split(/\s+/).filter(Boolean);
+    const firstClass = classes.find((className) => className !== "clip") ?? classes[0];
+    if (firstClass) return `.${firstClass}`;
+  }
+  return undefined;
+}
+
+export function getTimelineElementSourceFile(el: Element): string | undefined {
+  const ownerRoot = el.parentElement?.closest("[data-composition-id]");
+  return (
+    ownerRoot?.getAttribute("data-composition-file") ??
+    ownerRoot?.getAttribute("data-composition-src") ??
+    undefined
+  );
+}
+
+export function getTimelineElementSelectorIndex(
+  doc: Document,
+  el: Element,
+  selector: string | undefined,
+): number | undefined {
+  if (!selector || selector.startsWith("#") || selector.startsWith("[data-composition-id=")) {
+    return undefined;
+  }
+
+  try {
+    const matches = Array.from(doc.querySelectorAll(selector));
+    const matchIndex = matches.indexOf(el);
+    return matchIndex >= 0 ? matchIndex : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+export function buildTimelineElementKey(params: {
+  id: string;
+  fallbackIndex: number;
+  domId?: string;
+  selector?: string;
+  selectorIndex?: number;
+  sourceFile?: string;
+}): string {
+  const scope = params.sourceFile ?? "index.html";
+  if (params.domId) return `${scope}#${params.domId}`;
+  if (params.selector) return `${scope}:${params.selector}:${params.selectorIndex ?? 0}`;
+  return `${scope}:${params.id}:${params.fallbackIndex}`;
+}
+
+export function buildTimelineElementIdentity(params: {
+  preferredId?: string | null;
+  label: string;
+  fallbackIndex: number;
+  domId?: string;
+  selector?: string;
+  selectorIndex?: number;
+  sourceFile?: string;
+}): { id: string; key: string } {
+  const id =
+    params.preferredId?.trim() ||
+    buildTimelineElementKey({
+      id: params.label,
+      fallbackIndex: params.fallbackIndex,
+      domId: params.domId,
+      selector: params.selector,
+      selectorIndex: params.selectorIndex,
+      sourceFile: params.sourceFile,
+    });
+  const key = buildTimelineElementKey({
+    id,
+    fallbackIndex: params.fallbackIndex,
+    domId: params.domId,
+    selector: params.selector,
+    selectorIndex: params.selectorIndex,
+    sourceFile: params.sourceFile,
+  });
+  return { id, key };
+}
+
+export function getTimelineElementIdentity(element: TimelineElement): string {
+  return element.key ?? element.id;
+}
+
+// ---------------------------------------------------------------------------
+// DOM node querying
+// ---------------------------------------------------------------------------
+
+export function getTimelineDomNodes(doc: Document): Element[] {
+  const rootComp = doc.querySelector("[data-composition-id]");
+  return Array.from(doc.querySelectorAll("[data-start]")).filter((node) => node !== rootComp);
+}
+
+function numbersNearlyEqual(a: number, b: number): boolean {
+  return Math.abs(a - b) < 0.001;
+}
+
+function nodeMatchesManifestClip(node: Element, clip: ClipManifestClip): boolean {
+  const tagName = clip.tagName?.toLowerCase();
+  if (tagName && node.tagName.toLowerCase() !== tagName) return false;
+
+  const start = Number.parseFloat(node.getAttribute("data-start") ?? "");
+  if (Number.isFinite(start) && !numbersNearlyEqual(start, clip.start)) return false;
+
+  const duration = Number.parseFloat(node.getAttribute("data-duration") ?? "");
+  if (Number.isFinite(duration) && !numbersNearlyEqual(duration, clip.duration)) return false;
+
+  const track = Number.parseInt(node.getAttribute("data-track-index") ?? "", 10);
+  if (Number.isFinite(track) && track !== clip.track) return false;
+
+  return true;
+}
+
+function findTimelineDomNode(doc: Document, id: string): Element | null {
+  return (
+    doc.getElementById(id) ??
+    doc.querySelector(`[data-composition-id="${id}"]`) ??
+    doc.querySelector(`.${id}`) ??
+    null
+  );
+}
+
+export function findTimelineDomNodeForClip(
+  doc: Document,
+  clip: ClipManifestClip,
+  fallbackIndex: number,
+  usedNodes = new Set<Element>(),
+): Element | null {
+  const byIdentity = clip.id ? findTimelineDomNode(doc, clip.id) : null;
+  if (byIdentity && !usedNodes.has(byIdentity)) return byIdentity;
+
+  const candidates = getTimelineDomNodes(doc).filter((node) => !usedNodes.has(node));
+  const exact = candidates.find((node) => nodeMatchesManifestClip(node, clip));
+  if (exact) return exact;
+
+  return candidates[fallbackIndex] ?? null;
+}
+
+// ---------------------------------------------------------------------------
+// Implicit layer detection
+// ---------------------------------------------------------------------------
+
+export function isImplicitTimelineLayerCandidate(root: Element, el: Element): el is HTMLElement {
+  if (!isHtmlElement(el)) return false;
+  if (el.parentElement !== root) return false;
+  const tagName = el.tagName.toLowerCase();
+  if (IMPLICIT_TIMELINE_LAYER_SKIP_TAGS.has(tagName)) return false;
+  if (el.hasAttribute("data-start") || el.hasAttribute("data-track-index")) return false;
+  return Boolean(getTimelineElementSelector(el));
+}