From eef500c8902de9573d6941234693f06a8d018991 Mon Sep 17 00:00:00 2001 From: Miguel Angel Simon Sierra Date: Wed, 8 Jul 2026 13:19:56 -0400 Subject: [PATCH] fix(studio): realm-safe isHTMLElement so timeline z-index commits land MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit applyTimelineStackingReorder resolves the live clip from the preview IFRAME, then gated it with `element instanceof HTMLElement` against the MAIN window's constructor. Cross-realm instanceof is always false, so every timeline z-index commit silently bailed ("element not live in iframe") — the drag resolved the right z but never wrote it. Use the element's own-realm HTMLElement constructor (matching timelineDOM.ts). Verified end-to-end: dragging a card down now lowers its z-index and reorders the row, leaving sibling z-indexes untouched. Unit tests missed this because the happy-dom test iframe shares a realm; caught via a real-browser Puppeteer E2E drag. --- packages/studio/src/hooks/timelineEditingHelpers.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/studio/src/hooks/timelineEditingHelpers.ts b/packages/studio/src/hooks/timelineEditingHelpers.ts index 6e14c32b5..6a403a6b9 100644 --- a/packages/studio/src/hooks/timelineEditingHelpers.ts +++ b/packages/studio/src/hooks/timelineEditingHelpers.ts @@ -12,7 +12,12 @@ import type { EditHistoryKind } from "../utils/editHistory"; import type { TimelineZIndexReorderCommit } from "./useTimelineEditingTypes"; function isHTMLElement(element: Element | null): element is HTMLElement { - return element != null && element instanceof HTMLElement; + if (!element) return false; + // Use the element's OWN realm's HTMLElement: timeline clips live in the preview + // iframe, and cross-realm `element instanceof HTMLElement` (main window) is + // always false — which silently dropped every timeline z-index commit. + const Ctor = element.ownerDocument?.defaultView?.HTMLElement ?? globalThis.HTMLElement; + return element instanceof Ctor; } /**