@hyperframes/studio 0.8.86 → 0.8.87

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -35,6 +35,15 @@ import { collectSnapContext, buildExcludeElements } from "./snapTargetCollection
 import { logResize, resetResizeMoveLog } from "../../utils/resizeDebug";
 import { logDrag, readDragPositions, resetDragMoveLog } from "../../utils/dragDebug";
 
+export function notifyBlockedPress(
+  e: React.PointerEvent<HTMLElement>,
+  opts: UseDomEditOverlayGesturesOptions,
+  selection: DomEditSelection,
+): void {
+  if (e.button !== 0 || selection.capabilities.commitCheckPending) return;
+  opts.onBlockedMoveRef.current(selection);
+}
+
 export function startGroupDrag(
   e: React.PointerEvent<HTMLElement>,
   opts: UseDomEditOverlayGesturesOptions,
@@ -48,7 +57,7 @@ export function startGroupDrag(
   if (blockedSelection) {
     e.preventDefault();
     e.stopPropagation();
-    opts.onBlockedMoveRef.current(blockedSelection);
+    notifyBlockedPress(e, opts, blockedSelection);
     return false;
   }
 

package/src/components/editor/domEditing.test.ts

@@ -17,6 +17,7 @@ import {
   resolveDomEditCapabilities,
   resolveDomEditSelection,
 } from "./domEditing";
+import { normalizeTimelineCompositionSource } from "./domEditingDom";
 
 function createDocument(markup: string): Document {
   const window = new Window();
@@ -910,6 +911,34 @@ describe("resolveDomEditSelection", () => {
     expect(first).not.toBe(second);
   });
 
+  it("reads a preview prefix only from a URL, not from a project folder named preview", () => {
+    expect(normalizeTimelineCompositionSource("sections/preview/x.html")).toBe(
+      "sections/preview/x.html",
+    );
+    expect(
+      normalizeTimelineCompositionSource(
+        "http://localhost:5190/api/projects/p/preview/sections/x.html",
+      ),
+    ).toBe("sections/x.html");
+    expect(normalizeTimelineCompositionSource("/api/projects/p/preview/comp/sections/x.html")).toBe(
+      "sections/x.html",
+    );
+  });
+
+  it("finds a composition host authored with a ./ path", () => {
+    const document = createDocument(`
+      <div data-composition-id="scene" data-composition-file="./compositions/scene.html"></div>
+    `);
+
+    expect(
+      findElementForTimelineElement(
+        document,
+        { id: "scene", compositionSrc: "./compositions/scene.html" },
+        { activeCompositionPath: null, isMasterView: true },
+      )?.getAttribute("data-composition-id"),
+    ).toBe("scene");
+  });
+
   it("resolves generated timeline ids without throwing", () => {
     const document = createDocument(`
       <div data-composition-id="hook">

package/src/components/editor/domEditingDom.ts

@@ -199,6 +199,7 @@ export function getSourceFileForElement(
 export function normalizeTimelineCompositionSource(value: string | undefined): string | undefined {
   const trimmed = value?.trim();
   if (!trimmed) return undefined;
+  if (!/^([a-z][a-z0-9+.-]*:|\/)/i.test(trimmed)) return trimmed;
 
   let pathname = trimmed;
   try {

package/src/components/editor/domEditingTypes.ts

@@ -61,6 +61,7 @@ export interface DomEditCapabilities {
   canApplyManualSize: boolean;
   canApplyManualRotation: boolean;
   reasonIfDisabled?: string;
+  commitCheckPending?: boolean;
 }
 
 export interface DomEditTextField {

package/src/components/editor/marqueeCommit.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment happy-dom
+import { act, useRef } from "react";
+import type { Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it } from "vitest";
+import { installReactActEnvironment, mountReactHarness } from "../../hooks/domSelectionTestHarness";
+import { useMarqueeGestures } from "./marqueeCommit";
+
+installReactActEnvironment();
+HTMLElement.prototype.setPointerCapture ??= () => {};
+HTMLElement.prototype.releasePointerCapture ??= () => {};
+
+function Overlay() {
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const marquee = useMarqueeGestures({
+    iframeRef: useRef<HTMLIFrameElement>(null),
+    overlayRef,
+    activeCompositionPathRef: useRef<string | null>("index.html"),
+    onMarqueeSelectRef: useRef(undefined),
+  });
+  return (
+    <div
+      ref={overlayRef}
+      data-overlay
+      onPointerDown={marquee.begin}
+      onPointerMove={marquee.onPointerMove}
+      onPointerUp={marquee.onPointerUp}
+    >
+      {marquee.marqueeRect && <div data-band />}
+    </div>
+  );
+}
+
+const pointer = (type: string, clientX: number, clientY: number) =>
+  act(() => {
+    document
+      .querySelector("[data-overlay]")!
+      .dispatchEvent(
+        new PointerEvent(type, { bubbles: true, button: 0, pointerId: 1, clientX, clientY }),
+      );
+  });
+const escape = () => {
+  const event = new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true });
+  act(() => {
+    document.body.dispatchEvent(event);
+  });
+  return event;
+};
+
+let root: Root;
+let hostEscapes: KeyboardEvent[];
+const hostListener = (e: KeyboardEvent) => {
+  if (e.key === "Escape") hostEscapes.push(e);
+};
+
+beforeEach(() => {
+  hostEscapes = [];
+  window.addEventListener("keydown", hostListener);
+  root = mountReactHarness(<Overlay />);
+});
+
+afterEach(() => {
+  window.removeEventListener("keydown", hostListener);
+  act(() => root.unmount());
+  document.body.innerHTML = "";
+});
+
+it("an escape cancels a preview band while the pointer is still down, and stops there", () => {
+  pointer("pointerdown", 10, 10);
+  pointer("pointermove", 120, 90);
+  expect(document.querySelector("[data-band]")).not.toBeNull();
+
+  const event = escape();
+
+  expect(document.querySelector("[data-band]")).toBeNull();
+  expect(event.defaultPrevented).toBe(true);
+  expect(hostEscapes).toHaveLength(0);
+});
+
+it("an escape with no band in flight still reaches the host", () => {
+  const event = escape();
+
+  expect(event.defaultPrevented).toBe(false);
+  expect(hostEscapes).toHaveLength(1);
+});

package/src/components/editor/marqueeCommit.ts

@@ -1,5 +1,5 @@
 // fallow-ignore-file code-duplication
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { DomEditSelection } from "./domEditing";
 import { collectDomEditLayerItems, resolveDomEditSelection } from "./domEditingLayers";
 import { isElementComputedVisible } from "./domEditingElement";
@@ -209,6 +209,18 @@ export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGest
     reset();
   }, [reset]);
 
+  useEffect(() => {
+    const cancelBandBeforeHostEscape = (e: KeyboardEvent) => {
+      if (e.key !== "Escape" || !marqueeRef.current) return;
+      e.preventDefault();
+      e.stopPropagation();
+      cancel();
+    };
+    window.addEventListener("keydown", cancelBandBeforeHostEscape, { capture: true });
+    return () =>
+      window.removeEventListener("keydown", cancelBandBeforeHostEscape, { capture: true });
+  }, [cancel]);
+
   const onPointerMove = useCallback(
     (event: React.PointerEvent<HTMLDivElement>) => {
       const m = marqueeRef.current;

package/src/components/editor/useColorGradingController.test.ts

@@ -7,6 +7,7 @@ import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
 import { runtimeProtocolMetadata } from "@hyperframes/core/runtime/protocol";
 import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
 import { useColorGradingController } from "./useColorGradingController";
+import { sceneSwapFor } from "../../player/sceneSwap";
 import type { DomEditSelection } from "./domEditing";
 
 function brightPopGrading() {
@@ -390,6 +391,29 @@ describe("useColorGradingController", () => {
     vi.useRealTimers();
   });
 
+  it("re-sends the grade to the preview after edited scenes are swapped in", async () => {
+    vi.useFakeTimers();
+    const { contentWindow, iframe } = createPreviewFrame();
+    (contentWindow as unknown as { __hfSwapScenes: () => Promise<void> }).__hfSwapScenes =
+      async () => {};
+    vi.spyOn(globalThis, "fetch").mockResolvedValue(new Response("<html></html>"));
+    const postMessage = vi.spyOn(contentWindow, "postMessage");
+    const { root, getState } = renderHook(vi.fn(), makeElement(), { current: iframe });
+    act(() => getState().commitColorGrading(brightPopGrading()));
+    await act(async () => {
+      vi.advanceTimersByTime(100);
+      await vi.runAllTimersAsync();
+    });
+    postMessage.mockClear();
+
+    await act(() => sceneSwapFor(iframe)!("/preview", () => true));
+    const replayed = colorGradingMessages(postMessage.mock.calls);
+    expect(replayed.at(-1)?.grading).toMatchObject({ preset: "bright-pop" });
+
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+
   it("animates only the selected video card without starting the project player", async () => {
     vi.useFakeTimers();
     const { contentWindow, iframe } = createPreviewFrame();

package/src/components/editor/useColorGradingController.ts

@@ -1,5 +1,6 @@
 import { mediaMetadataUrl } from "../../utils/studioHelpers";
 import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
+import { onPreviewContentReplaced } from "../../player/sceneSwap";
 import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
 import {
   HF_COLOR_GRADING_ATTR,
@@ -445,11 +446,11 @@ export function useColorGradingController({
       if (!acceptStudioRuntimeMessage(data)) return;
       refreshAndReplay();
     };
-    iframe.addEventListener("load", refreshAndReplay);
     window.addEventListener("message", onMessage);
     const timer = window.setTimeout(refreshAndReplay, 80);
+    const stopReplay = onPreviewContentReplaced(iframe, refreshAndReplay);
     return () => {
-      iframe.removeEventListener("load", refreshAndReplay);
+      stopReplay();
       window.removeEventListener("message", onMessage);
       window.clearTimeout(timer);
     };

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -45,6 +45,7 @@ import {
 import { resolveCenterResizeSize } from "./domEditResizeLocal";
 import { resolveResizeDraftRect } from "./resizeDraft";
 import {
+  notifyBlockedPress,
   startGesture as _startGesture,
   startGroupDrag as _startGroupDrag,
 } from "./domEditOverlayStartGesture";
@@ -103,6 +104,15 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     },
   ) => _startGesture(kind, e, opts, options);
 
+  // A press on a box that cannot move says why at once.
+  const startBlockedMove = (e: React.PointerEvent<HTMLElement>, selection: DomEditSelection) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    opts.blockedMoveRef.current = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY };
+    notifyBlockedPress(e, opts, selection);
+  };
+
   const moveGroupDrag = createGroupDragMover(opts, setDraftGroupOverlayItems);
 
   // fallow-ignore-next-line complexity
@@ -116,13 +126,11 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       opts.onCanvasPointerMoveRef.current(e, { preferClipAncestor: false });
     }
 
-    if (blockedMove && sel) {
+    if (blockedMove) {
       const dx = e.clientX - blockedMove.startX;
       const dy = e.clientY - blockedMove.startY;
-      if (!blockedMove.notified && Math.hypot(dx, dy) >= BLOCKED_MOVE_THRESHOLD_PX) {
-        blockedMove.notified = true;
+      if (Math.hypot(dx, dy) >= BLOCKED_MOVE_THRESHOLD_PX) {
         opts.suppressNextBoxClickRef.current = true;
-        opts.onBlockedMoveRef.current(sel);
       }
       return;
     }
@@ -545,5 +553,12 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
     opts.rafPausedRef.current = false;
   };
 
-  return { startGesture, startGroupDrag, onPointerMove, onPointerUp, clearPointerState };
+  return {
+    startGesture,
+    startGroupDrag,
+    startBlockedMove,
+    onPointerMove,
+    onPointerUp,
+    clearPointerState,
+  };
 }

package/src/components/nle/useCompositionStack.test.tsx

@@ -8,6 +8,59 @@ import { useCompositionStack } from "./useCompositionStack";
 
 installReactActEnvironment();
 
+describe("useCompositionStack — drilling into a composition file", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  for (const compositionSrc of [
+    "sections/compositions/x.html",
+    "http://localhost:5190/api/projects/p/preview/sections/compositions/x.html",
+    "/api/projects/p/preview/comp/sections/compositions/x.html",
+  ]) {
+    it(`opens the full project path for ${compositionSrc}`, async () => {
+      const host = document.createElement("div");
+      document.body.append(host);
+      const root = createRoot(host);
+      let stack!: ReturnType<typeof useCompositionStack>;
+      function Harness() {
+        stack = useCompositionStack({ projectId: "p" });
+        return null;
+      }
+      await act(async () => {
+        root.render(<Harness />);
+      });
+      await act(async () => {
+        stack.handleDrillDown({ id: "x", compositionSrc });
+      });
+      expect(stack.compositionStack[1]).toMatchObject({
+        id: "sections/compositions/x.html",
+        previewUrl: "/api/projects/p/preview/comp/sections/compositions/x.html",
+      });
+      act(() => root.unmount());
+    });
+  }
+
+  it("keeps a top-level compositions/ path and drops a leading ./", async () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    let stack!: ReturnType<typeof useCompositionStack>;
+    function Harness() {
+      stack = useCompositionStack({ projectId: "p" });
+      return null;
+    }
+    await act(async () => {
+      root.render(<Harness />);
+    });
+    await act(async () => {
+      stack.handleDrillDown({ id: "x", compositionSrc: "./compositions/x.html" });
+    });
+    expect(stack.compositionStack[1]?.id).toBe("compositions/x.html");
+    act(() => root.unmount());
+  });
+});
+
 describe("useCompositionStack — project scoping", () => {
   afterEach(() => {
     document.body.innerHTML = "";

package/src/components/nle/useCompositionStack.ts

@@ -4,6 +4,7 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import { liveTime, usePlayerStore } from "../../player/store/playerStore";
 import type { CompositionLevel } from "./CompositionBreadcrumb";
 import { encodePreviewPath } from "../../player/components/thumbnailUtils";
+import { normalizeTimelineCompositionSource } from "../editor/domEditingDom";
 
 interface UseCompositionStackOptions {
   projectId: string;
@@ -79,14 +80,9 @@ export function useCompositionStack({
     (element: { id: string; compositionSrc?: string }) => {
       if (!element.compositionSrc) return;
 
-      const compId = element.id;
-      let resolvedPath = compIdToSrcRef.current.get(compId);
-
-      if (!resolvedPath) {
-        const src = element.compositionSrc;
-        const compMatch = src.match(/compositions\/.*\.html/);
-        resolvedPath = compMatch ? compMatch[0] : src;
-      }
+      const src = compIdToSrcRef.current.get(element.id) ?? element.compositionSrc;
+      const normalized = normalizeTimelineCompositionSource(src) ?? src;
+      const resolvedPath = normalized.replace(/^(\.\/|\/)+/, "");
 
       usePlayerStore.getState().setElements([]);
 

package/src/hooks/domStyleCommit.ts

@@ -0,0 +1,129 @@
+import type { PatchOperation } from "../utils/sourcePatcher";
+import {
+  isImageBackgroundValue,
+  isManualGeometryStyleProperty,
+  normalizeDomEditStyleValue,
+} from "../utils/studioHelpers";
+import {
+  injectPreviewGoogleFont,
+  injectPreviewImportedFont,
+  ensureImportedFontFace,
+} from "../utils/studioFontHelpers";
+import {
+  buildDomEditStylePatchOperation,
+  findElementForSelection,
+  getDomEditTargetKey,
+  type DomEditSelection,
+} from "../components/editor/domEditing";
+import type { ImportedFontAsset } from "../components/editor/fontAssets";
+import type { PersistDomEditOperations } from "./domEditCommitTypes";
+import { reportDomEditPersistFailure } from "./domEditPersistFailure";
+import {
+  bumpDomEditCommitMapVersion,
+  domEditCommitDeclined,
+  runReportedDomEditCommit,
+  type DomEditCommitOutcome,
+} from "./domEditCommitRunner";
+
+const IMAGE_BACKGROUND_FIT: Array<[string, string]> = [
+  ["background-position", "center"],
+  ["background-repeat", "no-repeat"],
+  ["background-size", "contain"],
+];
+
+export interface DomStyleCommitContext {
+  activeCompPath: string | null;
+  previewIframeRef: React.RefObject<HTMLIFrameElement | null>;
+  persistDomEditOperations: PersistDomEditOperations;
+  showToast: (message: string, tone?: "error" | "info") => void;
+  /** Latest-commit versions per target and property set; keep one map per caller. */
+  versions: Map<string, symbol>;
+  resolveImportedFontAsset?: (fontFamilyValue: string) => ImportedFontAsset | null;
+  resync?: (selection: DomEditSelection) => void;
+}
+
+/** Applies inline styles live and saves them as one source patch and one undo step. */
+// fallow-ignore-next-line complexity
+export async function commitDomStyles(
+  context: DomStyleCommitContext,
+  selection: DomEditSelection,
+  styles: Record<string, string>,
+): Promise<DomEditCommitOutcome> {
+  const entries = Object.entries(styles);
+  if (entries.length === 0) return domEditCommitDeclined("no-selection");
+  if (entries.some(([property]) => isManualGeometryStyleProperty(property)))
+    return domEditCommitDeclined("geometry-property");
+  if (!selection.capabilities.canEditStyles) return domEditCommitDeclined("styles-not-editable");
+
+  const { activeCompPath, previewIframeRef, persistDomEditOperations, showToast } = context;
+  // One version per element and property, so a failed save never reverts a later edit's property.
+  const targetKey = getDomEditTargetKey(selection);
+  const owned = entries.map(([property]) => ({
+    property,
+    isLatest: bumpDomEditCommitMapVersion(context.versions, `${targetKey}:${property}`),
+  }));
+  const ownsAny = () => owned.some(({ isLatest }) => isLatest());
+  const fontFamily = styles["font-family"];
+  const importedFont =
+    fontFamily !== undefined ? (context.resolveImportedFontAsset?.(fontFamily) ?? null) : null;
+  const doc = previewIframeRef.current?.contentDocument;
+  const operations: PatchOperation[] = [];
+  const liveStyles: Array<[string, string]> = [];
+  for (const [property, value] of entries) {
+    const normalized = normalizeDomEditStyleValue(property, value);
+    operations.push(buildDomEditStylePatchOperation(property, normalized));
+    liveStyles.push([property, normalized]);
+    if (property === "background-image" && isImageBackgroundValue(value)) {
+      for (const [fit, fitValue] of IMAGE_BACKGROUND_FIT) {
+        if (fit in styles) continue;
+        operations.push(buildDomEditStylePatchOperation(fit, fitValue));
+        liveStyles.push([fit, fitValue]);
+      }
+    }
+  }
+  let editedElement: HTMLElement | null = null;
+  const previousInline = new Map<string, string>();
+
+  return runReportedDomEditCommit({
+    capture: () => {
+      const el = doc ? findElementForSelection(doc, selection, activeCompPath) : null;
+      if (!el) return;
+      editedElement = el;
+      for (const [property] of entries)
+        previousInline.set(property, el.style.getPropertyValue(property));
+    },
+    apply: () => {
+      if (!editedElement) return;
+      for (const [property, value] of liveStyles) editedElement.style.setProperty(property, value);
+      if (fontFamily !== undefined && doc) {
+        injectPreviewGoogleFont(doc, fontFamily);
+        if (importedFont) injectPreviewImportedFont(doc, importedFont);
+      }
+    },
+    persist: () =>
+      persistDomEditOperations(selection, operations, {
+        label: "Edit layer style",
+        // Inline styles are already live, so a reload would only blank the preview.
+        skipRefresh: true,
+        prepareContent: importedFont
+          ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
+          : undefined,
+      }),
+    shouldRevert: ownsAny,
+    revert: () => {
+      const el = editedElement;
+      if (!el) return;
+      // ponytail: background-image fit styles are not reverted here.
+      for (const { property, isLatest } of owned) {
+        const previous = previousInline.get(property);
+        if (previous === undefined || !isLatest()) continue;
+        if (previous === "") el.style.removeProperty(property);
+        else el.style.setProperty(property, previous);
+      }
+    },
+    onError: (error) => reportDomEditPersistFailure(selection, operations, error, showToast),
+    shouldResync: ownsAny,
+    resync: () => context.resync?.(selection),
+    onFinally: () => owned.forEach(({ isLatest }) => isLatest.release()),
+  });
+}

package/src/hooks/gsapEditOutcome.ts

@@ -45,7 +45,7 @@ export type GsapEditOutcome =
     }
   | { status: "blocked"; reason: GsapEditBlockReason; detail?: GsapEditBlockDetail };
 
-const COPY: Record<GsapEditBlockReason, string> = {
+export const GSAP_EDIT_BLOCK_COPY: Record<GsapEditBlockReason, string> = {
   "no-selector": "This layer needs a stable selector before Studio can save the edit.",
   "unroll-required":
     "This motion comes from a helper or loop. Choose Unroll to edit it explicitly.",
@@ -57,7 +57,7 @@ export class GsapEditBlockedError extends Error {
     readonly reason: GsapEditBlockReason,
     readonly detail?: GsapEditBlockDetail,
   ) {
-    super(COPY[reason]);
+    super(GSAP_EDIT_BLOCK_COPY[reason]);
     this.name = "GsapEditBlockedError";
   }
 }

package/src/hooks/gsapElementMatch.ts

@@ -0,0 +1,38 @@
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+
+interface GsapElementTarget {
+  id?: string | null;
+  selector?: string | null;
+}
+
+/**
+ * Tweens whose target addresses the element: by id, by its selection selector, as one part of a
+ * group selector, or, given the live element, by any selector part the element matches.
+ */
+export function getAnimationsForElement(
+  animations: GsapAnimation[],
+  target: GsapElementTarget,
+  element?: Element | null,
+): GsapAnimation[] {
+  const matchers = new Set<string>();
+  if (target.id) matchers.add(`#${target.id}`);
+  if (target.selector) matchers.add(target.selector);
+  if (matchers.size === 0 && !element) return [];
+  return animations.filter((a) =>
+    a.targetSelector.split(",").some((part) => {
+      const trimmed = part.trim();
+      if (!trimmed) return false;
+      if (matchers.has(trimmed)) return true;
+      const lastSimple = trimmed.split(/\s+/).pop();
+      if (lastSimple && matchers.has(lastSimple)) return true;
+      if (element) {
+        try {
+          if (element.matches(trimmed)) return true;
+        } catch {
+          return false;
+        }
+      }
+      return false;
+    }),
+  );
+}

package/src/hooks/gsapResizeIntercept.ts

@@ -5,7 +5,7 @@
  * frame can't jump. Split from gsapRuntimeBridge, which owns the shared
  * group-tween resolution used by the drag/resize/rotate intercepts.
  */
-import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { clearStudioBoxSize } from "../components/editor/manualEdits";
 import {
@@ -14,7 +14,6 @@ import {
 } from "../components/editor/manualEditsTypes";
 import { setElementGsapPosition, setElementGsapScale } from "../utils/elementGsap";
 import { usePlayerStore } from "../player/store/playerStore";
-import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
 import { readAllAnimatedProperties, readGsapProperty } from "./gsapRuntimeReaders";
 import {
   commitStaticGsapPosition,
@@ -35,11 +34,8 @@ import { isInstantHold, selectorFromSelection, writeTargetSelector } from "./gsa
 import { roundTo3 } from "../utils/rounding";
 import { resolveGroupTween } from "./gsapRuntimeBridge";
 import { logResize } from "../utils/resizeDebug";
-import {
-  animationWritesAnyProperty,
-  directEditOutcomeForProperties,
-  type GsapEditOutcome,
-} from "./gsapEditOutcome";
+import { animationWritesAnyProperty, type GsapEditOutcome } from "./gsapEditOutcome";
+import { preflightGsapResizeIntercept, resizeRoute } from "./gsapResizePreflight";
 
 const IDENTITY_ONE_PROPS = new Set(["opacity", "autoAlpha", "scale", "scaleX", "scaleY"]);
 
@@ -103,17 +99,12 @@ export async function tryGsapResizeIntercept(
   fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
 ): Promise<GsapEditOutcome> {
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
-  const allKnownAnimations = [...animations, ...fetchedAnimations];
-  // If the element already has a scale-group tween, resize should modify scale
-  // (the user is resizing something whose visual size is driven by scale).
-  // Otherwise, use the size group (width/height).
-  const hasScaleGroup = allKnownAnimations.some((a) => a.propertyGroup === "scale");
-  const resizeGroup: PropertyGroupName = hasScaleGroup ? "scale" : "size";
-  const resizeProperties =
-    resizeGroup === "scale" ? new Set(["scale", "scaleX", "scaleY"]) : new Set(["width", "height"]);
-  const editability = directEditOutcomeForProperties(allKnownAnimations, resizeProperties);
-  if (editability.status === "blocked") return editability;
-  const workingAnimations = animations.length > 0 ? animations : fetchedAnimations;
+  const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
+  if (outcome.status === "blocked") return outcome;
+  const { resizeGroup, resizeProperties, workingAnimations } = resizeRoute(
+    animations,
+    fetchedAnimations,
+  );
   // The initial ownership fetch already supplied the complete parse. Only retain
   // the fetch callback when a legacy mixed tween may be split and must then be
   // re-read; otherwise resolveGroupTween would perform the same network read twice.
@@ -132,20 +123,8 @@ export async function tryGsapResizeIntercept(
     resolved?.anim && animationWritesAnyProperty(resolved.anim, resizeProperties)
       ? resolved.anim
       : null;
-  const liveSelector = selectorFromSelection(selection);
-  const hasLiveResizeTween = liveSelector
-    ? hasNonHoldTweenForElement(iframe, liveSelector, undefined, [...resizeProperties])
-    : false;
-  if (!anim && hasLiveResizeTween) {
-    // Third twin of the position/rotation cases: a live tween with no source match.
-    return {
-      status: "blocked",
-      reason: "source-uneditable",
-      detail: "live-resize-no-source-tween",
-    };
-  }
   logResize("intercept-enter", {
-    hasScaleGroup,
+    hasScaleGroup: resizeGroup === "scale",
     resizeGroup,
     animMethod: anim?.method ?? null,
     animId: anim?.id ?? null,