@hyperframes/studio 0.8.86 → 0.8.88

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/appHotkeysDispatch.ts

@@ -207,6 +207,14 @@ export function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCa
     return;
   }
 
+  if ((key === "[" || key === "]") && !event.shiftKey && !event.altKey) {
+    event.preventDefault();
+    const store = usePlayerStore.getState();
+    if (key === "[") store.selectLeftward();
+    else store.selectRightward();
+    return;
+  }
+
   // CapCut returns to the select tool with "A". Scoped to the razor being
   // armed; usePlaybackKeyboard.ts's own "A" (seek to in-point) checks the
   // same activeTool to stay out of the way.

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,

package/src/hooks/gsapResizePreflight.ts

@@ -0,0 +1,56 @@
+import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
+import { selectorFromSelection } from "./gsapShared";
+import {
+  animationWritesAnyProperty,
+  directEditOutcomeForProperties,
+  type GsapEditOutcome,
+} from "./gsapEditOutcome";
+
+export function resizeRoute(animations: GsapAnimation[], fetchedAnimations: GsapAnimation[]) {
+  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 workingAnimations = animations.length > 0 ? animations : fetchedAnimations;
+  return { allKnownAnimations, resizeGroup, resizeProperties, workingAnimations };
+}
+
+/** The resize commit's refusal rule, also run ahead of time to hide the resize handles. */
+export function preflightGsapResizeIntercept(
+  selection: DomEditSelection,
+  animations: GsapAnimation[],
+  iframe: HTMLIFrameElement | null,
+  fetchedAnimations: GsapAnimation[] = [],
+): GsapEditOutcome {
+  const { allKnownAnimations, resizeGroup, resizeProperties, workingAnimations } = resizeRoute(
+    animations,
+    fetchedAnimations,
+  );
+  const editability = directEditOutcomeForProperties(allKnownAnimations, resizeProperties);
+  if (editability.status === "blocked") return editability;
+  const hasSourceTween = workingAnimations.some(
+    (a) =>
+      (a.propertyGroup === resizeGroup || !a.propertyGroup) &&
+      animationWritesAnyProperty(a, resizeProperties),
+  );
+  const liveSelector = selectorFromSelection(selection);
+  if (
+    !hasSourceTween &&
+    liveSelector &&
+    hasNonHoldTweenForElement(iframe, liveSelector, undefined, [...resizeProperties])
+  ) {
+    // 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",
+    };
+  }
+  return { status: "persisted" };
+}