@hyperframes/studio 0.8.142 → 0.8.144

package/src/hooks/gsapResizeIntercept.ts

@@ -170,6 +170,11 @@ function tweenUsesScaleLonghands(anim: GsapAnimation | null): boolean {
 
 // ── Resize intercept ──────────────────────────────────────────────────────
 
+// The resize is centre-anchored, so a scale that cannot reproduce the dragged size splits the gap evenly.
+function rectCentre(rect: DOMRect): { x: number; y: number } {
+  return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+}
+
 // fallow-ignore-next-line complexity
 export async function tryGsapResizeIntercept(
   selection: DomEditSelection,
@@ -371,15 +376,10 @@ export async function tryGsapResizeIntercept(
     committedScale = useScaleLonghands
       ? { x: newScaleX, y: newScaleY }
       : { x: newScaleX, y: newScaleX };
-    // Where the user DROPPED the box: the draft (anchor-pinned to the
-    // gesture-start top-left) is still applied here, so this rect is exactly
-    // what the preview showed at release. The committed scale renders around
-    // the element CENTER instead — the finalize step below measures that
-    // difference and compensates, so release matches the drop pixel-for-pixel
-    // regardless of live scale or repeat resizes.
+    // Where the user DROPPED the box: the draft is still applied, so this is what the preview showed
+    // at release. The finalize step below moves the committed scale's box onto it.
     if (el) {
-      const dropRect = draw(() => el.getBoundingClientRect());
-      scaleDraftDropPoint = { x: dropRect.x, y: dropRect.y };
+      scaleDraftDropPoint = draw(() => rectCentre(el.getBoundingClientRect()));
     }
   } else {
     resizeProps = {
@@ -396,8 +396,8 @@ export async function tryGsapResizeIntercept(
   // position (a `tl.set` hold or none) — a keyframed position path has no
   // single anchor to preserve, so it keeps the plain center-scale behavior.
   // The size route hands its draft to GSAP itself (handOverDraftSize).
-  // ponytail: for a 3D-rotated element the rects are AABBs, so the anchor is
-  // approximate rather than corner-exact.
+  // ponytail: the centre of an AABB is exact for any 2D transform; under
+  // perspective it is approximate.
   // fallow-ignore-next-line complexity
   const finalizeScaleResizeCommit = async (): Promise<boolean> => {
     // Only the scale route captures the element, so a null draft means this
@@ -428,15 +428,9 @@ export async function tryGsapResizeIntercept(
       );
       const base = { x: baseGsapX, y: baseGsapY };
       setElementGsapPosition(draftEl, base.x, base.y);
-      const post = draftEl.getBoundingClientRect();
+      const post = rectCentre(draftEl.getBoundingClientRect());
       const residual = { x: dropPoint.x - post.x, y: dropPoint.y - post.y };
       if (!Number.isFinite(residual.x) || !Number.isFinite(residual.y)) return null;
-      if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
-        logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base });
-        // Settled, with nothing to write. Still ours: forwarding the drag offset
-        // on top would move the box off the point it is already sitting on.
-        return "settled" as const;
-      }
       // The ONE corrected position — rounded once so the live runtime and the
       // persisted file agree exactly (commitStaticGsapPosition composes the same
       // rounded value from this delta).
@@ -444,9 +438,15 @@ export async function tryGsapResizeIntercept(
         x: roundTo3(base.x + residual.x),
         y: roundTo3(base.y + residual.y),
       };
+      if (corrected.x === roundTo3(base.x) && corrected.y === roundTo3(base.y)) {
+        logResize("scale-finalize", { skipped: "already-on-drop-point", residual, base });
+        // Settled, with nothing to write. Still ours: forwarding the drag offset
+        // on top would move the box off the point it is already sitting on.
+        return "settled" as const;
+      }
       logResize("scale-finalize", {
         dropPoint,
-        post: { x: post.x, y: post.y },
+        post,
         residual,
         gsapPos,
         base,
@@ -455,11 +455,11 @@ export async function tryGsapResizeIntercept(
       // Correct the live box in the same task as the measurement, so no frame shows it off the drop
       // point while the position write is in flight.
       setElementGsapPosition(draftEl, corrected.x, corrected.y);
-      return { base, corrected };
+      return { base, corrected, residual };
     });
     if (measured === null) return false;
     if (measured === "settled") return true;
-    const { base, corrected } = measured;
+    const { base, corrected, residual } = measured;
     // Re-fetch: the scale commit above just rewrote the script, so the caller's
     // animation list (and its ids) may be stale for the position lookup.
     const currentAnimations = fetchFallbackAnimations
@@ -482,6 +482,11 @@ export async function tryGsapResizeIntercept(
       moment.time,
     );
     if (positionTween) {
+      // A sub-pixel correction is not worth a keyframe in an authored tween.
+      if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
+        draw(() => setElementGsapPosition(draftEl, base.x, base.y));
+        return true;
+      }
       logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });
       assertGsapEditPersisted(
         await commitGsapPositionFromDrag(selection, positionTween, delta, base, iframe, {

package/src/hooks/useDomEditCommits.ts

@@ -23,6 +23,7 @@ import {
 } from "./useDomEditCommitsHelpers";
 import type { CutoverResult } from "../utils/sdkCutover";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
+import { encodeUrlPath } from "@hyperframes/parsers";
 
 export interface UseDomEditCommitsParams {
   activeCompPath: string | null;
@@ -112,7 +113,7 @@ export function useDomEditCommits({
       return {
         family: fontFamilyFromAssetPath(asset),
         path: asset,
-        url: buildProjectApiPath(projectId, `/preview/${asset}`),
+        url: buildProjectApiPath(projectId, `/preview/${encodeUrlPath(asset)}`),
       };
     },
     [fileTree, projectId, importedFontAssetsRef],

package/src/hooks/useFileManager.ts

@@ -9,6 +9,7 @@ import { useFileTree } from "./useFileTree";
 import { useEditorSave } from "./useEditorSave";
 import { useProjectFileWriter } from "./useProjectFileWriter";
 import { studioApiFetch } from "../utils/studioApiFetch";
+import { encodeUrlPath } from "@hyperframes/parsers";
 
 // ── Types ──
 
@@ -386,7 +387,7 @@ export function useFileManager({
         .map((asset) => ({
           family: fontFamilyFromAssetPath(asset),
           path: asset,
-          url: `/api/projects/${encodeURIComponent(pid)}/preview/${asset}`,
+          url: `/api/projects/${encodeURIComponent(pid)}/preview/${encodeUrlPath(asset)}`,
         }));
       importedFontAssetsRef.current = [
         ...imported,

package/src/hooks/useFileTree.ts

@@ -4,6 +4,7 @@ import { FONT_EXT } from "../utils/mediaTypes";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import { captureProjectProvenance } from "../components/feedback/projectProvenance";
 import { studioApiFetch } from "../utils/studioApiFetch";
+import { encodeUrlPath } from "@hyperframes/parsers";
 
 interface UseFileTreeOptions {
   projectId: string | null;
@@ -119,7 +120,7 @@ export function useFileTree({ projectId, projectIdRef }: UseFileTreeOptions) {
         .map((asset) => ({
           family: fontFamilyFromAssetPath(asset),
           path: asset,
-          url: projectId ? buildProjectApiPath(projectId, `/preview/${asset}`) : "",
+          url: projectId ? buildProjectApiPath(projectId, `/preview/${encodeUrlPath(asset)}`) : "",
         })),
     [assets, projectId],
   );

package/src/hooks/useRenderClipContent.ts

@@ -17,7 +17,11 @@ import { AudibleVideoClipContent } from "../player/components/AudibleVideoClipCo
 import { ClipPeakMarks } from "../player/components/ClipPeakMarks";
 import { clipPeaksUrl, clipSourceWindow } from "../player/components/clipPeakMap";
 import { clipHasSound } from "../player/components/clipMenuNormalize";
-import { encodePreviewPath, resolveMediaPreviewUrl } from "../player/components/thumbnailUtils";
+import {
+  authoredSrcPath,
+  encodePreviewPath,
+  resolveMediaPreviewUrl,
+} from "../player/components/thumbnailUtils";
 import { usePlayerStore } from "../player/store/playerStore";
 import { thumbnailRevisionOf } from "../player/store/thumbnailSlice";
 import { effectiveThumbnailMode } from "../player/lib/thumbnailPolicy";
@@ -67,7 +71,11 @@ function renderAudioClip(
   elements: readonly TimelineElement[],
   labelInset?: number,
 ): ReactNode {
-  const audioUrl = resolveMediaPreviewUrl(el.src ?? "", pid, window.location.origin);
+  const audioUrl = resolveMediaPreviewUrl(
+    authoredSrcPath(el.src ?? ""),
+    pid,
+    window.location.origin,
+  );
   const srcRelative = resolvePreviewRelative(audioUrl, pid, window.location.origin);
   // Encode each path segment (spaces, parens, U+202F, unicode) so the URL matches
   // what the assets panel loads — a raw segment 404s. resolvePreviewRelative
@@ -213,7 +221,11 @@ export function useRenderClipContent({
       const htmlPreviewEligible = el.duration > 0 && effectiveTimelineDuration > 0;
 
       if ((el.tag === "video" || el.tag === "img") && el.src) {
-        const mediaSrc = resolveMediaPreviewUrl(el.src, pid, window.location.origin);
+        const mediaSrc = resolveMediaPreviewUrl(
+          authoredSrcPath(el.src),
+          pid,
+          window.location.origin,
+        );
         // Still images can't be decoded by VideoThumbnail's <video> extractor
         // (the error event fires and the shimmer never resolves) — render the
         // image itself as the strip.

package/src/hooks/useThumbnailStripSize.test.tsx

@@ -18,9 +18,125 @@ vi.mock("../player/components/timelineZoomInput", () => ({
 
 Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
 
+/** Runs the frames the hook asked for, as the browser does after the observer's delivery. */
+function nextFrames() {
+  vi.useFakeTimers({ toFake: ["requestAnimationFrame", "cancelAnimationFrame"] });
+  return () => act(() => vi.advanceTimersToNextFrame());
+}
+
+// A strip that re-rendered inside the observer's delivery resized the timeline Chromium had already measured that
+// frame, which it reported as a ResizeObserver loop on every frame of a trim.
+it("applies a reported size on the next frame, never inside the observer's delivery", () => {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const runFrames = nextFrames();
+  const host = document.createElement("div");
+  document.body.append(host);
+  Object.defineProperty(host, "clientWidth", { configurable: true, value: 300 });
+  Object.defineProperty(host, "clientHeight", { configurable: true, value: 40 });
+  const root = createRoot(host);
+  function Harness() {
+    const [size, ref] = useThumbnailStripSize();
+    return <div ref={ref}>{`${size.width}x${size.height}`}</div>;
+  }
+  try {
+    act(() => root.render(<Harness />));
+    reportResize(310, 40);
+    reportResize(320, 40);
+    expect(vi.getTimerCount()).toBe(1);
+    expect(host.textContent).toBe("300x40");
+    runFrames();
+    expect(host.textContent).toBe("320x40");
+  } finally {
+    act(() => root.unmount());
+    host.remove();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    globalThis.ResizeObserver = originalResizeObserver;
+  }
+});
+
+it("cancels a pending resize frame when the last strip unmounts", () => {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const runFrames = nextFrames();
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  function Harness() {
+    const [, ref] = useThumbnailStripSize();
+    return <div ref={ref} />;
+  }
+  try {
+    act(() => root.render(<Harness />));
+    reportResize(320, 40);
+    expect(vi.getTimerCount()).toBe(1);
+    act(() => root.unmount());
+    expect(vi.getTimerCount()).toBe(0);
+    runFrames();
+  } finally {
+    act(() => root.unmount());
+    host.remove();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    globalThis.ResizeObserver = originalResizeObserver;
+  }
+});
+
+it("drops a pending size when its strip unmounts, so a strip remounted on that box keeps its own", () => {
+  const originalResizeObserver = globalThis.ResizeObserver;
+  globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const runFrames = nextFrames();
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  function Strip() {
+    const [size, ref] = useThumbnailStripSize();
+    return <div ref={ref}>{`${size.width}x${size.height}`}</div>;
+  }
+  function Box({ id }: { id: string }) {
+    const box = (element: HTMLDivElement | null) => {
+      if (!element) return;
+      Object.defineProperty(element, "clientWidth", { configurable: true, value: 300 });
+      Object.defineProperty(element, "clientHeight", { configurable: true, value: 40 });
+    };
+    return (
+      <div ref={box} data-testid="box">
+        <Strip key={id} />
+      </div>
+    );
+  }
+  // The other strip keeps the shared observer alive across the remount.
+  const render = (id: string) =>
+    act(() =>
+      root.render(
+        <>
+          <div>
+            <Strip />
+          </div>
+          <Box id={id} />
+        </>,
+      ),
+    );
+  try {
+    render("a");
+    reportResize(320, 40);
+    render("b");
+    runFrames();
+    expect(host.querySelector('[data-testid="box"]')?.textContent).toBe("300x40");
+  } finally {
+    act(() => root.unmount());
+    host.remove();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+    globalThis.ResizeObserver = originalResizeObserver;
+  }
+});
+
 it("does not re-render the strip when the observer reports the size it already holds", () => {
   const originalResizeObserver = globalThis.ResizeObserver;
   globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const runFrames = nextFrames();
   const host = document.createElement("div");
   document.body.append(host);
   Object.defineProperty(host, "clientWidth", { configurable: true, value: 300 });
@@ -45,14 +161,18 @@ it("does not re-render the strip when the observer reports the size it already h
     const settled = stripRenders;
 
     act(() => reportResize(300, 40));
+    runFrames();
     expect(stripRenders).toBe(settled);
 
     act(() => reportResize(320, 40));
+    runFrames();
     expect(stripRenders).toBe(settled + 1);
     expect(host.textContent).toBe("320x40");
   } finally {
     act(() => root.unmount());
     host.remove();
+    vi.useRealTimers();
+    vi.restoreAllMocks();
     globalThis.ResizeObserver = originalResizeObserver;
   }
 });
@@ -60,6 +180,7 @@ it("does not re-render the strip when the observer reports the size it already h
 it("measures a strip once a zoom preview ends, not while the preview scales it", () => {
   const originalResizeObserver = globalThis.ResizeObserver;
   globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver;
+  const runFrames = nextFrames();
   const host = document.createElement("div");
   document.body.append(host);
   let width = 300;
@@ -75,6 +196,7 @@ it("measures a strip once a zoom preview ends, not while the preview scales it",
     zoom.previewing = true;
     width = 600;
     act(() => reportResize(600, 40));
+    runFrames();
     expect(host.textContent).toBe("300x40");
     zoom.previewing = false;
     act(() => zoom.listeners.forEach((listener) => listener()));
@@ -83,6 +205,7 @@ it("measures a strip once a zoom preview ends, not while the preview scales it",
     zoom.previewing = false;
     act(() => root.unmount());
     host.remove();
+    vi.useRealTimers();
     globalThis.ResizeObserver = originalResizeObserver;
   }
 });

package/src/hooks/useThumbnailStripSize.ts

@@ -152,13 +152,20 @@ const measure = (entries: { target: Element; size?: { width: number; height: num
 const onPresence = (entries: IntersectionObserverEntry[]) =>
   measure(entries.filter((entry) => entry.isIntersecting));
 
-const onResize = (entries: ResizeObserverEntry[]) =>
-  measure(
-    entries.map(({ target, contentRect: { width, height } }) => ({
-      target,
-      size: { width, height },
-    })),
-  );
+const pendingSizes = new Map<Element, { width: number; height: number }>();
+let pendingSizesFrame = 0;
+const applyPendingSizes = () => {
+  pendingSizesFrame = 0;
+  const entries = [...pendingSizes].map(([target, size]) => ({ target, size }));
+  pendingSizes.clear();
+  measure(entries);
+};
+
+const applyResizesNextFrame = (entries: ResizeObserverEntry[]) => {
+  for (const { target, contentRect } of entries)
+    pendingSizes.set(target, { width: contentRect.width, height: contentRect.height });
+  pendingSizesFrame ||= requestAnimationFrame(applyPendingSizes);
+};
 
 const observeIntersections = (callback: IntersectionObserverCallback) =>
   typeof IntersectionObserver === "undefined"
@@ -168,7 +175,7 @@ const observeIntersections = (callback: IntersectionObserverCallback) =>
 function acquire() {
   if (users++ === 0) {
     shared = {
-      resize: new ResizeObserver(onResize),
+      resize: new ResizeObserver(applyResizesNextFrame),
       presence: observeIntersections(onPresence),
       gaps: observeIntersections(
         (entries) => entries.some((entry) => entry.isIntersecting) && scheduleRefresh(),
@@ -190,6 +197,9 @@ function release() {
   window.removeEventListener("scroll", scheduleRefresh, { capture: true });
   cancelAnimationFrame(frame);
   frame = 0;
+  cancelAnimationFrame(pendingSizesFrame);
+  pendingSizesFrame = 0;
+  pendingSizes.clear();
 }
 
 const watchGap = (gap: HTMLDivElement | null) => {
@@ -234,6 +244,7 @@ export function useThumbnailStripSize() {
       resize.unobserve(target);
       presence?.unobserve(target);
       strips.delete(target);
+      pendingSizes.delete(target);
       release();
     };
   }, []);

package/src/player/components/CompositionThumbnail.test.ts

@@ -47,6 +47,7 @@ beforeEach(() => {
 afterEach(() => {
   act(() => root?.unmount());
   root = null;
+  vi.useRealTimers();
   thumbnailScheduler.invalidateProject("/api/projects/demo/preview");
   globalThis.ResizeObserver = originalResizeObserver;
   globalThis.Image = originalImage;
@@ -175,7 +176,9 @@ describe("CompositionThumbnail", () => {
       await new Promise((resolve) => setTimeout(resolve, 0));
     });
 
+    vi.useFakeTimers({ toFake: ["requestAnimationFrame", "cancelAnimationFrame"] });
     act(() => reportResize(500, 40));
+    act(() => vi.advanceTimersToNextFrame());
 
     expect(host.querySelector("img")?.parentElement?.style.width).toBe("108px");
   });

package/src/player/components/ImageThumbnail.test.tsx

@@ -2,7 +2,7 @@
 
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MockResizeObserver, reportResize } from "../../hooks/resizeObserverTestUtils";
 import { thumbnailScheduler } from "../lib/thumbnailScheduler";
 import { ImageThumbnail } from "./ImageThumbnail";
@@ -64,6 +64,7 @@ beforeEach(() => {
 afterEach(() => {
   act(() => root?.unmount());
   root = null;
+  vi.useRealTimers();
   thumbnailScheduler.invalidateProject("p");
   globalThis.IntersectionObserver = originalIO;
   globalThis.ResizeObserver = originalRO;
@@ -187,7 +188,9 @@ describe("ImageThumbnail", () => {
       probe.onload?.();
     });
 
+    vi.useFakeTimers({ toFake: ["requestAnimationFrame", "cancelAnimationFrame"] });
     act(() => reportResize(500, 40));
+    act(() => vi.advanceTimersToNextFrame());
 
     expect(host.querySelector("img")?.parentElement?.style.width).toBe("108px");
   });

package/src/player/components/VideoThumbnail.test.tsx

@@ -23,6 +23,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
+  vi.useRealTimers();
   thumbnailScheduler.invalidateProject("p");
   vi.clearAllMocks();
 });
@@ -243,8 +244,10 @@ describe("VideoThumbnail", () => {
     });
     await render(0, 0);
 
+    vi.useFakeTimers({ toFake: ["requestAnimationFrame", "cancelAnimationFrame"] });
+    act(() => reportResize(500, 40));
     await act(async () => {
-      reportResize(500, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
 
@@ -264,7 +267,9 @@ describe("VideoThumbnail", () => {
 
 describe("VideoThumbnail during a zoom", () => {
   beforeEach(() => {
-    vi.useFakeTimers({ toFake: ["setTimeout", "clearTimeout"] });
+    vi.useFakeTimers({
+      toFake: ["setTimeout", "clearTimeout", "requestAnimationFrame", "cancelAnimationFrame"],
+    });
     vi.mocked(decodeVideoThumbnail).mockResolvedValue({
       value: { kind: "filmstrip", urls: ["blob:a", "blob:b"], aspect: 16 / 9 },
       weight: 256,
@@ -308,6 +313,7 @@ describe("VideoThumbnail during a zoom", () => {
     vi.mocked(decodeVideoThumbnail).mockImplementation(() => new Promise(() => {}));
     await act(async () => {
       reportResize(880, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
     await rest();
@@ -326,6 +332,7 @@ describe("VideoThumbnail during a zoom", () => {
     vi.mocked(decodeVideoThumbnail).mockImplementation(() => new Promise(() => {}));
     await act(async () => {
       reportResize(880, 40);
+      vi.advanceTimersToNextFrame();
       root.render(clip(undefined, "overscan"));
       await Promise.resolve();
     });
@@ -371,6 +378,7 @@ describe("VideoThumbnail during a zoom", () => {
     vi.mocked(decodeVideoThumbnail).mockImplementation(() => new Promise(() => {}));
     await act(async () => {
       reportResize(880, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
     await rest();
@@ -411,6 +419,7 @@ describe("VideoThumbnail during a zoom", () => {
     await render(440);
     await act(async () => {
       reportResize(50, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
     await rest();
@@ -419,6 +428,7 @@ describe("VideoThumbnail during a zoom", () => {
     vi.mocked(decodeVideoThumbnail).mockImplementation(() => new Promise(() => {}));
     await act(async () => {
       reportResize(880, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
     await rest();
@@ -431,6 +441,7 @@ describe("VideoThumbnail during a zoom", () => {
     await act(async () => {
       markTimelineMotion();
       reportResize(880, 40);
+      vi.advanceTimersToNextFrame();
       await Promise.resolve();
     });
     expect(decodeVideoThumbnail).not.toHaveBeenCalled();

package/src/player/components/clipMenuNormalize.ts

@@ -1,6 +1,6 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
 import { resolvePreviewRelative } from "../../utils/previewRelativePath";
-import { resolveMediaPreviewUrl } from "./thumbnailUtils";
+import { authoredSrcPath, resolveMediaPreviewUrl } from "./thumbnailUtils";
 import type { TimelineElement } from "../store/timelineElement";
 import { parseAutomation, VOLUME_TARGET } from "@hyperframes/core/audio-automation";
 import type { TimelineEditOutcome } from "../../hooks/timelineEditPermission";
@@ -79,7 +79,7 @@ export async function requestNormalizePlan(
 ): Promise<NormalizePlan> {
   const origin = window.location.origin;
   const relative = resolvePreviewRelative(
-    resolveMediaPreviewUrl(el.src ?? "", projectId, origin),
+    resolveMediaPreviewUrl(authoredSrcPath(el.src ?? ""), projectId, origin),
     projectId,
     origin,
   );

package/src/player/components/clipPeakMap.ts

@@ -3,7 +3,7 @@ import { studioApiFetch } from "../../utils/studioApiFetch";
 import { resolvePreviewRelative } from "../../utils/previewRelativePath";
 import type { TimelineElement } from "../store/timelineElement";
 import { clipSourcePeak, isPeakMap, type ClipSourceWindow, type PeakMap } from "./clipPeakRuns";
-import { encodePreviewPath, resolveMediaPreviewUrl } from "./thumbnailUtils";
+import { authoredSrcPath, encodePreviewPath, resolveMediaPreviewUrl } from "./thumbnailUtils";
 
 const peakMapRequests = new Map<string, Promise<PeakMap | null>>();
 
@@ -23,7 +23,7 @@ export function loadPeakMap(url: string): Promise<PeakMap | null> {
 export function clipPeaksUrl(src: string | undefined, projectId: string): string | undefined {
   const origin = window.location.origin;
   const relative = resolvePreviewRelative(
-    resolveMediaPreviewUrl(src ?? "", projectId, origin),
+    resolveMediaPreviewUrl(authoredSrcPath(src ?? ""), projectId, origin),
     projectId,
     origin,
   );

package/src/player/components/thumbnailUtils.test.ts

@@ -1,5 +1,7 @@
 import { describe, expect, it } from "vitest";
+import { buildTimelineAssetInsertHtml } from "../../utils/timelineAssetDrop";
 import {
+  authoredSrcPath,
   computeThumbnailStrip,
   encodePreviewPath,
   resolveMediaPreviewUrl,
@@ -187,3 +189,34 @@ describe("encodePreviewPath", () => {
     expect(encodePreviewPath("assets/music.mp3")).toBe("assets/music.mp3");
   });
 });
+
+describe("authoredSrcPath", () => {
+  const droppedSrc = (assetPath: string) =>
+    /src="([^"]*)"/.exec(
+      buildTimelineAssetInsertHtml({
+        id: "clip",
+        hfId: "hf-clip",
+        assetPath,
+        kind: "video",
+        start: 0,
+        duration: 2,
+        track: 1,
+        zIndex: 1,
+      }),
+    )![1]!;
+
+  it.each([
+    ["assets/My clip.mp4", "/api/projects/p/preview/assets/My%20clip.mp4"],
+    ["assets/café.mp4", "/api/projects/p/preview/assets/caf%C3%A9.mp4"],
+    ["assets/50% off #1?.mp4", "/api/projects/p/preview/assets/50%25%20off%20%231%3F.mp4"],
+  ])("previews a dropped %j at its own file", (assetPath, url) => {
+    expect(resolveMediaPreviewUrl(authoredSrcPath(droppedSrc(assetPath)), "p")).toBe(url);
+  });
+
+  it("drops the query and fragment, and leaves URLs with a scheme alone", () => {
+    expect(authoredSrcPath("assets/a%20b.mp4?v=2#t=1")).toBe("assets/a b.mp4");
+    expect(authoredSrcPath("assets/100%.png")).toBe("assets/100%.png");
+    expect(authoredSrcPath("https://cdn.example/a%20b.mp4")).toBe("https://cdn.example/a%20b.mp4");
+    expect(authoredSrcPath("//cdn.example/a%20b.mp4")).toBe("//cdn.example/a%20b.mp4");
+  });
+});

package/src/player/components/thumbnailUtils.ts

@@ -1,3 +1,4 @@
+import { decodedUrlPath } from "@hyperframes/parsers";
 import { buildProjectApiPath } from "../../utils/projectRouting";
 import { MAX_VISIBLE_THUMBNAIL_FRAMES } from "../lib/timelineViewportBudgets";
 
@@ -94,6 +95,10 @@ export function computeThumbnailStrip(
   return { frameW, frameCount };
 }
 
+export function authoredSrcPath(src: string): string {
+  return /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(src) ? src : decodedUrlPath(src);
+}
+
 /**
  * Percent-encode each segment of a composition-relative media path so filenames
  * containing spaces, parentheses, a U+202F narrow no-break space (the macOS

package/src/player/hooks/timelineSyncHydration.ts

@@ -13,6 +13,7 @@ import { createTimelineDomNodeResolver, findClipElementById } from "../lib/timel
 import { usePlayerStore } from "../store/playerStore";
 import type { TimelineElement, DomClipChild, SubCompositionHostState } from "../store/playerStore";
 import { resolveCssStackingContextId } from "@hyperframes/core/runtime/stacking-context";
+import { LOOP_INFLATED_TIMELINE_SECONDS } from "@hyperframes/core/runtime/composition-length";
 import type { ClipTree } from "@hyperframes/core/runtime/clipTree";
 import { HF_AUDIO_GROUP_ATTR } from "@hyperframes/core/audio-groups";
 import { groupInfoFor } from "../lib/timelineGroupInfo";
@@ -31,7 +32,7 @@ import { inspectStudioRuntimeMessage } from "../lib/runtimeProtocol";
 
 /** Reject non-finite, non-positive, and absurdly large (loop-inflated) values. */
 export function sanitizeDurationSeconds(value: number): number {
-  return Number.isFinite(value) && value > 0 && value < 7200 ? value : 0;
+  return Number.isFinite(value) && value > 0 && value < LOOP_INFLATED_TIMELINE_SECONDS ? value : 0;
 }
 
 /**