@hyperframes/studio 0.8.33 → 0.8.34

package/dist/index.js

@@ -1,13 +1,18 @@
 import {
+  DOM_EDIT_LAYER_OBSERVER_INIT,
   buildDefaultDomEditTextField,
   buildDomEditPatchTarget,
   buildDomEditRichTextPatchOperation,
   buildDomEditStylePatchOperation,
   buildDomEditTextPatchOperation,
+  buildProjectApiPath,
+  buildProjectHash,
   buildStableSelector,
   buildTextFieldChildLocator,
   collectDomEditLayerItems,
+  createDomEditLayerWalkCache,
   domEditSelectionToFacts,
+  drainPendingLayerMutations,
   escapeCssString,
   findElementForSelection,
   findElementForTimelineElement,
@@ -20,12 +25,14 @@ import {
   isElementVisibleThroughAncestors,
   isHtmlElement,
   isTextEditableSelection,
+  parseProjectHashRoute,
+  parseProjectIdFromHash,
   readHfId,
   resolveAllVisualDomEditTargets,
   resolveDomEditSelection,
   serializeDomEditTextFields,
   setCompositionSourceMap
-} from "./chunk-A7S5SGNA.js";
+} from "./chunk-7BP32G62.js";
 import {
   __export
 } from "./chunk-PZ5AY32C.js";
@@ -532,15 +539,14 @@ var Player = forwardRef2(
     useMountEffect(() => {
       const container = containerRef.current;
       if (!container) return;
+      const previewSource = directUrl || (projectId ? buildProjectApiPath(projectId, "/preview") : null);
+      if (!previewSource) return;
       let canceled = false;
       let cleanup;
       import("@hyperframes/player").then(() => {
         if (canceled) return;
         const player = document.createElement("hyperframes-player");
-        const srcUrl = new URL(
-          directUrl || `/api/projects/${projectId}/preview`,
-          window.location.origin
-        );
+        const srcUrl = new URL(previewSource, window.location.origin);
         applyPreviewVariablesToUrl(srcUrl);
         const src = srcUrl.pathname + srcUrl.search;
         const retryPreview = () => {
@@ -3764,10 +3770,13 @@ var scrubAudioEl = null;
 var scrubStopTimer = null;
 var scrubPrevMuted = null;
 var scrubPrevVolume = null;
+function isAudioNode(node) {
+  return node !== null && node.namespaceURI === "http://www.w3.org/1999/xhtml" && node.localName === "audio";
+}
 function resolveScrubAudioEl(doc, musicId) {
   if (musicId) {
     const byId = doc.getElementById(musicId);
-    if (byId instanceof HTMLAudioElement) return byId;
+    if (isAudioNode(byId)) return byId;
   }
   return doc.querySelector("audio[data-timeline-role='music']") ?? doc.querySelector("audio");
 }
@@ -13093,7 +13102,7 @@ async function resolveDroppedAssetDuration(projectId, assetPath, kind) {
   if (kind === "image") return DEFAULT_TIMELINE_ASSET_DURATION.image;
   const media = document.createElement(kind === "video" ? "video" : "audio");
   media.preload = "metadata";
-  media.src = `/api/projects/${projectId}/preview/${assetPath}`;
+  media.src = buildProjectApiPath(projectId, `/preview/${assetPath}`);
   const duration = await new Promise((resolve) => {
     const timeout = window.setTimeout(() => resolve(DEFAULT_TIMELINE_ASSET_DURATION[kind]), 3e3);
     const finalize = (value) => {
@@ -16401,7 +16410,7 @@ async function retryStudioSave(operation, options = {}) {
 
 // src/utils/studioFileHistory.ts
 async function readProjectFileContent(pid, path) {
-  const response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`);
+  const response = await fetch(buildProjectApiPath(pid, `/files/${encodeURIComponent(path)}`));
   if (!response.ok) {
     throw await createStudioSaveHttpError(response, `Failed to read ${path}`);
   }
@@ -24058,7 +24067,7 @@ function resolveMediaPreviewUrl(src, projectId, studioOrigin) {
       return src;
     }
     if (!studioOrigin || parsed.origin !== studioOrigin) return src;
-    const previewPath = new URL(`/api/projects/${projectId}/preview/`, studioOrigin).pathname;
+    const previewPath = new URL(buildProjectApiPath(projectId, `/preview/`), studioOrigin).pathname;
     if (parsed.pathname.startsWith(previewPath)) return src;
     if (parsed.pathname.startsWith("/api/")) return src;
     try {
@@ -24068,7 +24077,10 @@ function resolveMediaPreviewUrl(src, projectId, studioOrigin) {
     }
     suffix = `${parsed.search}${parsed.hash}`;
   }
-  return `/api/projects/${projectId}/preview/${encodePreviewPath(relativePath.replace(/^\/+/, ""))}${suffix}`;
+  return buildProjectApiPath(
+    projectId,
+    `/preview/${encodePreviewPath(relativePath.replace(/^\/+/, ""))}${suffix}`
+  );
 }
 
 // src/player/components/VideoThumbnail.tsx
@@ -26679,7 +26691,7 @@ function useCompositionStack({
     {
       id: "master",
       label: "Master",
-      previewUrl: `/api/projects/${projectId}/preview`
+      previewUrl: buildProjectApiPath(projectId, `/preview`)
     }
   ]);
   const onCompositionChangeRef = useRef47(onCompositionChange);
@@ -26725,7 +26737,10 @@ function useCompositionStack({
           return prev.slice(0, -1);
         }
         const label = resolvedPath.split("/").pop()?.replace(/\.html$/, "") || resolvedPath;
-        const previewUrl = `/api/projects/${projectId}/preview/comp/${encodePreviewPath(resolvedPath)}`;
+        const previewUrl = buildProjectApiPath(
+          projectId,
+          `/preview/comp/${encodePreviewPath(resolvedPath)}`
+        );
         return [...prev, { id: resolvedPath, label, previewUrl }];
       });
     },
@@ -26736,14 +26751,17 @@ function useCompositionStack({
     const master = {
       id: "master",
       label: "Master",
-      previewUrl: `/api/projects/${projectId}/preview`
+      previewUrl: buildProjectApiPath(projectId, `/preview`)
     };
     if (activeCompositionPath === "index.html") {
       usePlayerStore.getState().setElements([]);
       updateCompositionStack([master]);
     } else if (activeCompositionPath) {
       const label = activeCompositionPath.replace(/^compositions\//, "").replace(/\.html$/, "");
-      const previewUrl = `/api/projects/${projectId}/preview/comp/${encodePreviewPath(activeCompositionPath)}`;
+      const previewUrl = buildProjectApiPath(
+        projectId,
+        `/preview/comp/${encodePreviewPath(activeCompositionPath)}`
+      );
       usePlayerStore.getState().setElements([]);
       updateCompositionStack((prev) => {
         if (prev[prev.length - 1]?.id === activeCompositionPath) return prev;
@@ -26923,7 +26941,7 @@ function NLEProvider({
     setCompIdToSrc(emptyMap);
     setCompositionSourceMap(emptyMap);
     onCompIdToSrcChangeRef.current?.(emptyMap);
-    fetch(`/api/projects/${projectId}/files/index.html`, {
+    fetch(buildProjectApiPath(projectId, `/files/index.html`), {
       signal: controller.signal
     }).then((r) => {
       if (!r.ok) throw new Error(`HTTP ${r.status}`);
@@ -27865,6 +27883,7 @@ var CaptionOverlay = memo20(function CaptionOverlay2({ iframeRef }) {
     };
     const unsubPlayer = usePlayerStore.subscribe(scheduleTick);
     const handleMessage = (e) => {
+      if (!e.source || e.source !== iframeRef.current?.contentWindow) return;
       const data = e.data;
       if (data?.source === "hf-preview") scheduleTick();
     };
@@ -28570,6 +28589,36 @@ function buildAgentContextPreview(selection, activeCompPath) {
   ].filter(Boolean).join("\n");
 }
 
+// src/components/editor/domEditOverlayBasis.ts
+function readPositiveDimension(value) {
+  if (!value) return null;
+  const parsed = Number.parseFloat(value);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+}
+function findOverlayRootElement(doc) {
+  return doc?.querySelector("[data-composition-id]") ?? doc?.documentElement ?? null;
+}
+function resolveRootDimensions(root) {
+  if (!root) return null;
+  const rootRect = root.getBoundingClientRect();
+  const width = readPositiveDimension(root.getAttribute("data-width")) ?? rootRect.width;
+  const height = readPositiveDimension(root.getAttribute("data-height")) ?? rootRect.height;
+  if (!width || !height) return null;
+  return { width, height };
+}
+function computeOverlayRootScale(overlayEl, iframe, doc) {
+  const iframeRect = iframe.getBoundingClientRect();
+  const overlayRect = overlayEl.getBoundingClientRect();
+  const dims = resolveRootDimensions(findOverlayRootElement(doc));
+  if (!dims) return null;
+  return {
+    iframeRect,
+    overlayRect,
+    rootScaleX: iframeRect.width / dims.width,
+    rootScaleY: iframeRect.height / dims.height
+  };
+}
+
 // src/components/editor/domEditOverlayTransform.ts
 var COMPOSITION_ROOT_ATTR = "data-composition-id";
 function individualRotateDegrees(value) {
@@ -28587,19 +28636,33 @@ function individualRotateDegrees(value) {
   const deg = Number.parseFloat(angle);
   return Number.isFinite(deg) ? deg : 0;
 }
-function composeElementTransform(element, ops, getStyle) {
-  let acc = ops.identity();
+function ownNodeTransform(node, ops, getStyle) {
+  const style = getStyle(node);
+  if (!style) return null;
+  const transform = style.transform;
+  const own = transform && transform !== "none" ? ops.fromTransform(transform) : ops.identity();
+  if (!own) return null;
+  const spin = individualRotateDegrees(style.rotate);
+  return spin === 0 ? own : ops.compose(ops.fromRotate(spin), own);
+}
+function composeElementTransform(element, ops, getStyle, memo52) {
+  const pending2 = [];
+  let above;
   for (let node = element; node; node = node.parentElement) {
-    const style = getStyle(node);
-    if (!style) return null;
-    const transform = style.transform;
-    let own = transform && transform !== "none" ? ops.fromTransform(transform) : ops.identity();
-    if (!own) return null;
-    const spin = individualRotateDegrees(style.rotate);
-    if (spin !== 0) own = ops.compose(ops.fromRotate(spin), own);
-    acc = ops.compose(own, acc);
+    above = memo52?.get(node);
+    if (above !== void 0) break;
+    pending2.push(node);
     if (node.hasAttribute(COMPOSITION_ROOT_ATTR)) break;
   }
+  let acc = above === void 0 ? ops.identity() : above;
+  for (let i = pending2.length - 1; i >= 0; i -= 1) {
+    const node = pending2[i];
+    if (acc !== null) {
+      const own = ownNodeTransform(node, ops, getStyle);
+      acc = own === null ? null : ops.compose(acc, own);
+    }
+    memo52?.set(node, acc);
+  }
   return acc;
 }
 
@@ -28832,24 +28895,44 @@ function rotateDeltaIntoFrame(deltaX, deltaY, angleDeg) {
   return { deltaX: deltaX * cos - deltaY * sin, deltaY: deltaX * sin + deltaY * cos };
 }
 
+// src/components/editor/domEditOverlayMeasurePass.ts
+function createOverlayMeasurePass() {
+  return {
+    visible: /* @__PURE__ */ new Map(),
+    transform: /* @__PURE__ */ new Map(),
+    sourceBoundary: /* @__PURE__ */ new Map(),
+    sourceBoundaryRect: /* @__PURE__ */ new Map()
+  };
+}
+function readThroughPass(memo52, key2, compute) {
+  const answered = memo52.get(key2);
+  if (answered !== void 0) return answered;
+  const value = compute();
+  memo52.set(key2, value);
+  return value;
+}
+
 // src/components/editor/domEditOverlayGeometry.ts
 function isElementVisibleForOverlay(el) {
   return isElementVisibleThroughAncestors(el);
 }
-function readPositiveDimension(value) {
-  if (!value) return null;
-  const parsed = Number.parseFloat(value);
-  return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
-}
-function findSourceBoundary(element) {
-  let current = element;
-  while (current) {
-    if (current.hasAttribute("data-composition-file") || current.hasAttribute("data-composition-src")) {
-      return current;
+var isSourceBoundary = (node) => node.hasAttribute("data-composition-file") || node.hasAttribute("data-composition-src");
+function findSourceBoundary(element, pass) {
+  const pending2 = [];
+  let boundary;
+  for (let node = element; node; node = node.parentElement) {
+    boundary = pass?.sourceBoundary.get(node);
+    if (boundary !== void 0) break;
+    if (isSourceBoundary(node)) {
+      boundary = node;
+      pass?.sourceBoundary.set(node, node);
+      break;
     }
-    current = current.parentElement;
+    pending2.push(node);
   }
-  return null;
+  const answer = boundary ?? null;
+  if (pass) for (const node of pending2) pass.sourceBoundary.set(node, answer);
+  return answer;
 }
 function resolveDomEditCoordinateScale(input) {
   const rootScaleX = input.rootScaleX > 0 ? input.rootScaleX : 1;
@@ -28861,8 +28944,8 @@ function resolveDomEditCoordinateScale(input) {
     scaleY: sourceScaleY > 0 ? sourceScaleY : rootScaleY
   };
 }
-function toVisibleOverlayRect(overlayEl, iframe, element) {
-  const rect = toOverlayRect(overlayEl, iframe, element);
+function toVisibleOverlayRect(overlayEl, iframe, element, precomputedScale) {
+  const rect = toOverlayRect(overlayEl, iframe, element, precomputedScale);
   return rect ? { ...rect, ...hugRectForElement(rect, element) } : null;
 }
 function toVisibleOverlayRects(overlayEl, iframe, elements) {
@@ -28873,7 +28956,7 @@ function toVisibleOverlayRects(overlayEl, iframe, elements) {
     return rect ? { ...rect, ...hugRectForElement(rect, element) } : null;
   });
 }
-function readElementTransformSnapshot(win, element) {
+function readElementTransformSnapshot(win, element, pass) {
   const DOMMatrixCtor = win.DOMMatrix;
   if (!DOMMatrixCtor) return null;
   const cs = win.getComputedStyle(element);
@@ -28887,7 +28970,8 @@ function readElementTransformSnapshot(win, element) {
     const matrix = composeElementTransform(
       element,
       ops,
-      (node) => node === element ? cs : win.getComputedStyle(node)
+      (node) => node === element ? cs : win.getComputedStyle(node),
+      pass?.transform
     );
     return matrix ? { matrix, cs } : null;
   } catch {
@@ -28906,36 +28990,17 @@ function rotationDegreesFromMatrix(matrix) {
   return Number.isFinite(deg) ? deg : 0;
 }
 var ROTATION_GATE_EPSILON_DEG = 1e-4;
-function findOverlayRootElement(doc) {
-  return doc?.querySelector("[data-composition-id]") ?? doc?.documentElement ?? null;
-}
-function resolveRootDimensions(root) {
-  if (!root) return null;
-  const rootRect = root.getBoundingClientRect();
-  const width = readPositiveDimension(root.getAttribute("data-width")) ?? rootRect.width;
-  const height = readPositiveDimension(root.getAttribute("data-height")) ?? rootRect.height;
-  if (!width || !height) return null;
-  return { width, height };
-}
-function computeOverlayRootScale(overlayEl, iframe, doc) {
-  const iframeRect = iframe.getBoundingClientRect();
-  const overlayRect = overlayEl.getBoundingClientRect();
-  const dims = resolveRootDimensions(findOverlayRootElement(doc));
-  if (!dims) return null;
-  return {
-    iframeRect,
-    overlayRect,
-    rootScaleX: iframeRect.width / dims.width,
-    rootScaleY: iframeRect.height / dims.height
-  };
-}
-function toOverlayRect(overlayEl, iframe, element, precomputedScale) {
+function toOverlayRect(overlayEl, iframe, element, precomputedScale, pass) {
   const scale = precomputedScale ?? computeOverlayRootScale(overlayEl, iframe, iframe.contentDocument);
   if (!scale) return null;
   const { iframeRect, overlayRect, rootScaleX, rootScaleY } = scale;
   const elementRect = element.getBoundingClientRect();
-  const sourceBoundary = findSourceBoundary(element);
-  const sourceBoundaryRect = sourceBoundary?.getBoundingClientRect();
+  const sourceBoundary = findSourceBoundary(element, pass);
+  const sourceBoundaryRect = sourceBoundary && pass ? readThroughPass(
+    pass.sourceBoundaryRect,
+    sourceBoundary,
+    () => sourceBoundary.getBoundingClientRect()
+  ) : sourceBoundary?.getBoundingClientRect();
   const editScale = resolveDomEditCoordinateScale({
     rootScaleX,
     rootScaleY,
@@ -29005,13 +29070,13 @@ function elementCornerOverlayPoints(overlayEl, iframe, element, precomputedScale
     sw: toOverlay(relCorners.sw)
   };
 }
-function orientedOverlayRect(overlayEl, iframe, element) {
-  const scale = computeOverlayRootScale(overlayEl, iframe, iframe.contentDocument);
+function orientedOverlayRect(overlayEl, iframe, element, precomputedScale, pass) {
+  const scale = precomputedScale ?? computeOverlayRootScale(overlayEl, iframe, iframe.contentDocument);
   if (!scale) return null;
-  const base2 = toOverlayRect(overlayEl, iframe, element, scale);
+  const base2 = toOverlayRect(overlayEl, iframe, element, scale, pass);
   if (!base2) return null;
   const win = iframe.contentWindow;
-  const transform = win ? readElementTransformSnapshot(win, element) : null;
+  const transform = win ? readElementTransformSnapshot(win, element, pass) : null;
   const angle = transform ? rotationDegreesFromMatrix(transform.matrix) : 0;
   if (Math.abs(angle) < ROTATION_GATE_EPSILON_DEG) return base2;
   const corners = elementCornerOverlayPoints(overlayEl, iframe, element, scale, transform);
@@ -29033,8 +29098,8 @@ function orientedOverlayRect(overlayEl, iframe, element) {
     angle
   };
 }
-function orientedVisibleOverlayRect(overlayEl, iframe, element) {
-  const rect = orientedOverlayRect(overlayEl, iframe, element);
+function orientedVisibleOverlayRect(overlayEl, iframe, element, precomputedScale) {
+  const rect = orientedOverlayRect(overlayEl, iframe, element, precomputedScale);
   return rect ? { ...rect, ...hugRectForElement(rect, element) } : null;
 }
 var OVERLAY_RECT_EPSILON_PX = 0.5;
@@ -29076,20 +29141,26 @@ function resolveDomEditGroupOverlayRect(rects) {
     editScaleY: 1
   };
 }
-function groupAwareOverlayRect(overlayEl, iframe, el) {
-  const rect = toOverlayRect(overlayEl, iframe, el);
+function groupAwareOverlayRect(overlayEl, iframe, el, precomputedScale, pass) {
+  const rect = toOverlayRect(overlayEl, iframe, el, precomputedScale, pass);
   if (!rect || !el.hasAttribute("data-hf-group")) return rect;
   const rects = [];
   for (const child of Array.from(el.children)) {
-    const childRect = toOverlayRect(overlayEl, iframe, child);
+    const childRect = toOverlayRect(
+      overlayEl,
+      iframe,
+      child,
+      precomputedScale,
+      pass
+    );
     if (childRect) rects.push(childRect);
   }
   const union = rects.length > 0 ? resolveDomEditGroupOverlayRect(rects) : null;
   if (!union) return rect;
   return { ...union, editScaleX: rect.editScaleX, editScaleY: rect.editScaleY };
 }
-function orientedGroupAwareOverlayRect(overlayEl, iframe, el) {
-  return el.hasAttribute("data-hf-group") ? groupAwareOverlayRect(overlayEl, iframe, el) : orientedOverlayRect(overlayEl, iframe, el);
+function orientedGroupAwareOverlayRect(overlayEl, iframe, el, precomputedScale, pass) {
+  return el.hasAttribute("data-hf-group") ? groupAwareOverlayRect(overlayEl, iframe, el, precomputedScale, pass) : orientedOverlayRect(overlayEl, iframe, el, precomputedScale, pass);
 }
 function filterNestedDomEditGroupItems(items) {
   return items.filter(
@@ -29437,6 +29508,125 @@ function hasDomEditRotationChanged(initialAngle, nextAngle) {
 
 // src/components/editor/useDomEditOverlayRects.ts
 import { useRef as useRef54, useState as useState36 } from "react";
+
+// src/components/editor/overlayFrameLoop.ts
+var AWAKE_MS = 400;
+var IDLE_POLL_MS = 250;
+var subscribers = /* @__PURE__ */ new Set();
+var frameId = null;
+var idleTimerId = null;
+var awakeUntil = 0;
+var listenersAttached = false;
+var WINDOW_EVENTS = [
+  "pointerdown",
+  "pointermove",
+  "pointerup",
+  "wheel",
+  "keydown",
+  "keyup",
+  "scroll",
+  "resize",
+  "visibilitychange"
+];
+var lastPreviewFrame = null;
+var lastPreviewPlaying = null;
+function isFromPreviewOrigin(event) {
+  if (typeof window === "undefined") return true;
+  return event.origin === window.location.origin;
+}
+function isPreviewPayload(data) {
+  if (data == null || typeof data !== "object") return false;
+  return data.source === "hf-preview";
+}
+function previewStateOf(data) {
+  if (data.type !== "state") return null;
+  const frame = data.frame;
+  return {
+    frame: typeof frame === "number" ? frame : null,
+    playing: data.isPlaying === true
+  };
+}
+function onPreviewMessage(event) {
+  if (!isFromPreviewOrigin(event)) return;
+  const data = event.data;
+  if (!isPreviewPayload(data)) return;
+  const state = previewStateOf(data);
+  if (state) {
+    if (state.frame === lastPreviewFrame && state.playing === lastPreviewPlaying) return;
+    lastPreviewFrame = state.frame;
+    lastPreviewPlaying = state.playing;
+  }
+  requestOverlayFrames();
+}
+function runFrame() {
+  frameId = null;
+  schedule();
+  for (const subscriber of subscribers) {
+    try {
+      subscriber();
+    } catch (error) {
+      queueMicrotask(() => {
+        throw error;
+      });
+    }
+  }
+}
+function schedule() {
+  if (subscribers.size === 0) return;
+  if (frameId != null || idleTimerId != null) return;
+  if (performance.now() < awakeUntil) {
+    frameId = requestAnimationFrame(runFrame);
+    return;
+  }
+  idleTimerId = setTimeout(() => {
+    idleTimerId = null;
+    frameId = requestAnimationFrame(runFrame);
+  }, IDLE_POLL_MS);
+}
+function requestOverlayFrames() {
+  awakeUntil = performance.now() + AWAKE_MS;
+  if (idleTimerId != null) {
+    clearTimeout(idleTimerId);
+    idleTimerId = null;
+  }
+  schedule();
+}
+function attachListeners() {
+  if (listenersAttached || typeof window === "undefined") return;
+  listenersAttached = true;
+  for (const type of WINDOW_EVENTS) {
+    window.addEventListener(type, requestOverlayFrames, { capture: true, passive: true });
+  }
+  window.addEventListener("message", onPreviewMessage, { capture: true, passive: true });
+}
+function detachListeners() {
+  if (!listenersAttached || typeof window === "undefined") return;
+  listenersAttached = false;
+  for (const type of WINDOW_EVENTS) {
+    window.removeEventListener(type, requestOverlayFrames, { capture: true });
+  }
+  window.removeEventListener("message", onPreviewMessage, { capture: true });
+}
+function subscribeOverlayFrame(update) {
+  subscribers.add(update);
+  attachListeners();
+  requestOverlayFrames();
+  return () => {
+    subscribers.delete(update);
+    if (subscribers.size > 0) return;
+    if (frameId != null) {
+      cancelAnimationFrame(frameId);
+      frameId = null;
+    }
+    if (idleTimerId != null) {
+      clearTimeout(idleTimerId);
+      idleTimerId = null;
+    }
+    detachListeners();
+  };
+}
+
+// src/components/editor/useDomEditOverlayRects.ts
 function childRectsEqual(a, b) {
   if (a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) {
@@ -29492,14 +29682,12 @@ function useDomEditOverlayRects({
     return next;
   };
   useMountEffect(() => {
-    let frame = 0;
     const clearAll = () => {
       setOverlayRect(null);
       setHoverRect(null);
       setGroupOverlayItems([]);
     };
     const update = () => {
-      frame = requestAnimationFrame(update);
       if (rafPausedRef.current) {
         if (childRectsRef.current.length > 0) {
           childRectsRef.current = [];
@@ -29525,6 +29713,7 @@ function useDomEditOverlayRects({
         clearAll();
         return;
       }
+      const scale = computeOverlayRootScale(overlayEl, iframe, doc);
       if (sel) {
         const el = resolveElementForOverlay(
           doc,
@@ -29533,7 +29722,7 @@ function useDomEditOverlayRects({
           resolvedElementRef
         );
         if (el && isElementVisibleForOverlay(el)) {
-          const nextRect = orientedGroupAwareOverlayRect(overlayEl, iframe, el);
+          const nextRect = orientedGroupAwareOverlayRect(overlayEl, iframe, el, scale);
           setOverlayRect(nextRect);
           const descendants = el.querySelectorAll("*");
           if (descendants.length > 0 && descendants.length <= 60) {
@@ -29541,7 +29730,7 @@ function useDomEditOverlayRects({
             for (let i = 0; i < descendants.length; i++) {
               const child = descendants[i];
               if (!child.getBoundingClientRect) continue;
-              const r = orientedVisibleOverlayRect(overlayEl, iframe, child);
+              const r = orientedVisibleOverlayRect(overlayEl, iframe, child, scale);
               if (r && r.width > 2 && r.height > 2) nextChildRects.push(r);
             }
             if (!childRectsEqual(childRectsRef.current, nextChildRects)) {
@@ -29576,7 +29765,7 @@ function useDomEditOverlayRects({
           if (liveGroupKeys.has(key2)) continue;
           liveGroupKeys.add(key2);
           const el = resolveGroupElement(doc, groupSelection);
-          const base2 = el ? groupAwareOverlayRect(overlayEl, iframe, el) : null;
+          const base2 = el ? groupAwareOverlayRect(overlayEl, iframe, el, scale) : null;
           const rect = base2 && el ? { ...base2, ...hugRectForElement(base2, el) } : base2;
           if (el && rect)
             nextGroupItems.push({ key: key2, selection: groupSelection, element: el, rect });
@@ -29611,10 +29800,9 @@ function useDomEditOverlayRects({
         setHoverRect(null);
         return;
       }
-      setHoverRect(orientedGroupAwareOverlayRect(overlayEl, iframe, hoverEl));
+      setHoverRect(orientedGroupAwareOverlayRect(overlayEl, iframe, hoverEl, scale));
     };
-    frame = requestAnimationFrame(update);
-    return () => cancelAnimationFrame(frame);
+    return subscribeOverlayFrame(update);
   });
   return {
     overlayRect,
@@ -29692,7 +29880,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-JMMVOGTO.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-UKMVYXT6.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -32553,9 +32741,7 @@ var SnapGuideOverlay = memo21(function SnapGuideOverlay2({
     height: compositionHeight
   };
   useMountEffect(() => {
-    let frame = 0;
     const update = () => {
-      frame = requestAnimationFrame(update);
       const state = snapGuidesRef.current;
       const guides = state?.guides ?? [];
       const spacingGuides = state?.spacingGuides ?? [];
@@ -32611,8 +32797,7 @@ var SnapGuideOverlay = memo21(function SnapGuideOverlay2({
         }
       }
     };
-    frame = requestAnimationFrame(update);
-    return () => cancelAnimationFrame(frame);
+    return subscribeOverlayFrame(update);
   });
   return /* @__PURE__ */ jsxs56("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", children: [
     Array.from({ length: MAX_GUIDES }, (_, i) => /* @__PURE__ */ jsx73(
@@ -33269,9 +33454,7 @@ function useDomEditCompositionRect({
     scaleY: 1
   });
   useMountEffect(() => {
-    let frame = 0;
     const update = () => {
-      frame = requestAnimationFrame(update);
       const iframe = iframeRef.current;
       const overlayEl = overlayRef.current;
       if (!iframe || !overlayEl) return;
@@ -33289,8 +33472,7 @@ function useDomEditCompositionRect({
       const next = { left, top, width: iRect.width, height: iRect.height, scaleX, scaleY };
       setCompRect((prev) => sameRect(prev, next) ? prev : next);
     };
-    frame = requestAnimationFrame(update);
-    return () => cancelAnimationFrame(frame);
+    return subscribeOverlayFrame(update);
   });
   return compRect;
 }
@@ -33312,7 +33494,12 @@ function extendsOutside(rect, comp) {
   const centerY = rect.top + rect.height / 2;
   return centerX - halfWidth < comp.left || centerX + halfWidth > comp.left + comp.width || centerY - halfHeight < comp.top || centerY + halfHeight > comp.top + comp.height;
 }
-function recomputeOffCanvasIndicators(iframe, overlay, doc, comp, activeCompositionPath, sigRef, elementsRef, setRects) {
+function measureItemRect(overlay, iframe, element, scale, pass) {
+  if (!isElementComputedVisible(element, pass.visible)) return null;
+  const base2 = orientedGroupAwareOverlayRect(overlay, iframe, element, scale, pass);
+  return base2 ? { ...base2, ...hugRectForElement(base2, element) } : null;
+}
+function recomputeOffCanvasIndicators(iframe, overlay, doc, comp, activeCompositionPath, sigRef, elementsRef, setRects, walkCache) {
   if (comp.width <= 0 || !doc) {
     sigRef.current = "";
     elementsRef.current = /* @__PURE__ */ new Map();
@@ -33321,16 +33508,18 @@ function recomputeOffCanvasIndicators(iframe, overlay, doc, comp, activeComposit
   }
   const root = doc.querySelector("[data-composition-id]") ?? doc.body;
   const acp = activeCompositionPath ?? "index.html";
-  const items = collectDomEditLayerItems(root, {
-    activeCompositionPath: acp,
-    isMasterView: !acp || acp === "index.html"
-  });
+  const items = collectDomEditLayerItems(
+    root,
+    { activeCompositionPath: acp, isMasterView: !acp || acp === "index.html" },
+    void 0,
+    walkCache
+  );
+  const scale = computeOverlayRootScale(overlay, iframe, doc);
+  const pass = createOverlayMeasurePass();
   const rects = [];
   const elMap = /* @__PURE__ */ new Map();
   for (const item of items) {
-    if (!isElementComputedVisible(item.element)) continue;
-    const base2 = orientedGroupAwareOverlayRect(overlay, iframe, item.element);
-    const r = base2 ? { ...base2, ...hugRectForElement(base2, item.element) } : null;
+    const r = measureItemRect(overlay, iframe, item.element, scale, pass);
     if (!r) continue;
     if (extendsOutside(r, comp)) {
       rects.push({
@@ -33361,20 +33550,14 @@ function clearIndicators(options) {
   options.elementsRef.current = /* @__PURE__ */ new Map();
   options.setRects([]);
 }
-function observeDoc(doc, markDirty) {
+function observeDoc(doc, cache2, markDirty) {
   const Observer = doc.defaultView?.MutationObserver ?? globalThis.MutationObserver;
   if (!Observer) return null;
-  const observer = new Observer(markDirty);
-  observer.observe(doc.documentElement, {
-    attributes: true,
-    // data-hidden is included explicitly: hiding an element writes data-hidden, and
-    // although the runtime honoring also writes display:"none" (a style mutation we'd
-    // catch anyway), keying on the attribute directly makes the coupling robust to any
-    // future throttling of that runtime sync.
-    attributeFilter: ["style", "class", "transform", "width", "height", "data-hidden"],
-    childList: true,
-    subtree: true
+  const observer = new Observer((records) => {
+    cache2.ingest(records);
+    markDirty();
   });
+  observer.observe(doc.documentElement, DOM_EDIT_LAYER_OBSERVER_INIT);
   return observer;
 }
 var RECOMPUTE_INTERVAL_MS = 100;
@@ -33382,20 +33565,21 @@ function rebuildDue(dirty, lastAt, now2) {
   return dirty && now2 - lastAt >= RECOMPUTE_INTERVAL_MS;
 }
 function startOffCanvasIndicatorRefresh(options) {
-  let frame = 0;
   let lastCompSig = "";
   let lastRecomputeAt = Number.NEGATIVE_INFINITY;
+  const walkCache = createDomEditLayerWalkCache();
   const markDirty = () => {
     options.dirtyRef.current = true;
+    requestOverlayFrames();
   };
   const attachObserver = (doc) => {
     options.observerRef.current?.disconnect();
-    options.observerRef.current = doc?.documentElement ? observeDoc(doc, markDirty) : null;
+    walkCache.invalidateAll();
+    options.observerRef.current = doc?.documentElement ? observeDoc(doc, walkCache, markDirty) : null;
     options.observedDocRef.current = doc;
     options.sigRef.current = "";
   };
   const update = () => {
-    frame = requestAnimationFrame(update);
     const iframe = options.iframeRef.current;
     const overlayEl = options.overlayRef.current;
     const doc = iframe?.contentDocument ?? null;
@@ -33417,6 +33601,7 @@ function startOffCanvasIndicatorRefresh(options) {
     if (!rebuildDue(options.dirtyRef.current, lastRecomputeAt, now2)) return;
     lastRecomputeAt = now2;
     options.dirtyRef.current = false;
+    drainPendingLayerMutations(options.observerRef.current, walkCache);
     recomputeOffCanvasIndicators(
       iframe,
       overlayEl,
@@ -33425,12 +33610,13 @@ function startOffCanvasIndicatorRefresh(options) {
       options.activeCompositionPathRef.current,
       options.sigRef,
       options.elementsRef,
-      options.setRects
+      options.setRects,
+      walkCache
     );
   };
-  frame = requestAnimationFrame(update);
+  const unsubscribe = subscribeOverlayFrame(update);
   return () => {
-    cancelAnimationFrame(frame);
+    unsubscribe();
     options.observerRef.current?.disconnect();
     options.observerRef.current = null;
     options.observedDocRef.current = null;
@@ -37066,7 +37252,6 @@ function useMotionPathData(iframeRef, selector) {
       return;
     }
     setHome(null);
-    let raf = 0;
     const tick = () => {
       const el = iframeRef.current;
       if (el) {
@@ -37097,10 +37282,8 @@ function useMotionPathData(iframeRef, selector) {
           setPScale((p) => Math.abs(p - ps) < 1e-3 ? p : ps);
         }
       }
-      raf = requestAnimationFrame(tick);
     };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
+    return subscribeOverlayFrame(tick);
   }, [selector, iframeRef]);
   useEffect44(() => {
     if (!selector) {
@@ -37703,12 +37886,13 @@ function readPositiveDimensions(width, height) {
   if (parsedWidth === null || parsedHeight === null) return null;
   return { width: parsedWidth, height: parsedHeight };
 }
-function useCompositionDimensions() {
+function useCompositionDimensions(iframeRef) {
   const [compositionDimensions, setCompositionDimensions] = useState46(
     null
   );
   useMountEffect(() => {
     const handleMessage = (e) => {
+      if (!e.source || e.source !== iframeRef.current?.contentWindow) return;
       const dimensions = readCompositionSizeMessage(e.data);
       if (!dimensions) return;
       setCompositionDimensions(
@@ -39169,7 +39353,10 @@ function useElementLifecycleOps({
         }
         domEditSaveTimestampRef.current = Date.now();
         const removeResponse = await fetch(
-          `/api/projects/${pid}/file-mutations/remove-elements/${encodeURIComponent(targetPath)}`,
+          buildProjectApiPath(
+            pid,
+            `/file-mutations/remove-elements/${encodeURIComponent(targetPath)}`
+          ),
           {
             method: "POST",
             headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
@@ -39647,7 +39834,7 @@ function PreviewOverlays({
 }) {
   const { activeCompPath, previewIframeRef } = useStudioShellContext();
   const { captionEditMode, compositionLoading, isPlaying } = useStudioPlaybackContext();
-  const compositionDimensions = useCompositionDimensions();
+  const compositionDimensions = useCompositionDimensions(previewIframeRef);
   const captionModelPresent = useCaptionStore((state) => state.model !== null);
   const captionDismissed = useCaptionStore((state) => state.dismissed);
   const captionSyncError = useCaptionStore((state) => state.syncError);
@@ -41796,52 +41983,6 @@ var STUDIO_SEEK_DESCRIPTION = [
   "Returns `ok: true`, or `ok: false` with `kind`, `reason` and a `hint`."
 ].join(" ");
 
-// src/utils/projectRouting.ts
-var PROJECT_HASH_PREFIX = "#project/";
-function decodeHashProjectId(value) {
-  try {
-    return decodeURIComponent(value);
-  } catch {
-    return value;
-  }
-}
-function normalizeHashParams(params) {
-  if (!params) return new URLSearchParams();
-  if (params instanceof URLSearchParams) return params;
-  const next = new URLSearchParams();
-  for (const [key2, value] of Object.entries(params)) {
-    if (!key2 || value == null || value === "") continue;
-    next.set(key2, value);
-  }
-  return next;
-}
-function encodeProjectId(projectId) {
-  return encodeURIComponent(projectId);
-}
-function buildProjectHash(projectId, params) {
-  const search = normalizeHashParams(params).toString();
-  return `${PROJECT_HASH_PREFIX}${encodeProjectId(projectId)}${search ? `?${search}` : ""}`;
-}
-function parseProjectHashRoute(hash) {
-  if (!hash.startsWith(PROJECT_HASH_PREFIX)) return null;
-  const route = hash.slice(PROJECT_HASH_PREFIX.length);
-  const queryIndex = route.indexOf("?");
-  const encodedProjectId = queryIndex >= 0 ? route.slice(0, queryIndex) : route;
-  if (!encodedProjectId || encodedProjectId.includes("/")) return null;
-  const rawParams = queryIndex >= 0 ? route.slice(queryIndex + 1) : "";
-  return {
-    projectId: decodeHashProjectId(encodedProjectId),
-    params: new URLSearchParams(rawParams)
-  };
-}
-function parseProjectIdFromHash(hash) {
-  return parseProjectHashRoute(hash)?.projectId ?? null;
-}
-function buildProjectApiPath(projectId, suffix = "") {
-  const normalizedSuffix = suffix && !suffix.startsWith("/") ? `/${suffix}` : suffix;
-  return `/api/projects/${encodeProjectId(projectId)}${normalizedSuffix}`;
-}
-
 // src/utils/frameCapture.ts
 function normalizeCompositionPath(compositionPath) {
   return compositionPath && compositionPath !== "master" ? compositionPath : "index.html";
@@ -48645,7 +48786,7 @@ function ImageFillField({
         selectedAsset && /* @__PURE__ */ jsx104("div", { className: "overflow-hidden rounded-xl border border-neutral-800 bg-neutral-900/80", children: /* @__PURE__ */ jsx104(
           "img",
           {
-            src: `/api/projects/${projectId}/preview/${selectedAsset}`,
+            src: buildProjectApiPath(projectId, `/preview/${selectedAsset}`),
             alt: selectedAsset.split("/").pop() ?? selectedAsset,
             className: "h-28 w-full object-contain bg-neutral-950/80"
           }
@@ -62863,7 +63004,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
   const loadRenders = useCallback80(async () => {
     if (!projectId) return;
     try {
-      const res = await fetch(`/api/projects/${projectId}/renders`);
+      const res = await fetch(buildProjectApiPath(projectId, `/renders`));
       if (!res.ok) {
         setLoadError(`Couldn't load render history (server error ${res.status}).`);
         return;
@@ -62950,7 +63091,7 @@ function useRenderQueue(projectId, activeCompPathRef) {
       }
       let res;
       try {
-        res = await fetch(`/api/projects/${projectId}/render`, {
+        res = await fetch(buildProjectApiPath(projectId, `/render`), {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(body)
@@ -63600,7 +63741,9 @@ async function captureProjectProvenance(projectId, files, compositions) {
   };
   if (!scaffolded) return;
   try {
-    const res = await fetch(`/api/projects/${projectId}/files/${encodeURIComponent(CONFIG_FILE)}`);
+    const res = await fetch(
+      buildProjectApiPath(projectId, `/files/${encodeURIComponent(CONFIG_FILE)}`)
+    );
     if (!res.ok) return;
     const envelope = await res.json();
     const raw = envelope.content;
@@ -64276,7 +64419,7 @@ function useCaptionSync(projectId) {
     }
     const seqAtSave = editSeqRef.current;
     const overrides = buildOverrides(state.model);
-    fetch(`/api/projects/${pid}/files/${encodeURIComponent("caption-overrides.json")}`, {
+    fetch(buildProjectApiPath(pid, `/files/${encodeURIComponent("caption-overrides.json")}`), {
       method: "PUT",
       headers: { "Content-Type": "text/plain", ...studioWriteHeaders() },
       body: JSON.stringify(overrides, null, 2)
@@ -64334,7 +64477,7 @@ function useCaptionSync(projectId) {
     let data;
     try {
       const res = await fetch(
-        `/api/projects/${pid}/files/${encodeURIComponent("caption-overrides.json")}`
+        buildProjectApiPath(pid, `/files/${encodeURIComponent("caption-overrides.json")}`)
       );
       if (!res.ok) return;
       data = await res.json();
@@ -65026,7 +65169,7 @@ function useFileTree({ projectId, projectIdRef }) {
     }
     let cancelled = false;
     setFileTreeLoaded(false);
-    fetch(`/api/projects/${projectId}`).then((r) => r.json()).then((data) => {
+    fetch(buildProjectApiPath(projectId)).then((r) => r.json()).then((data) => {
       if (cancelled) return;
       if (data.files) setFileTree(data.files);
       if (data.compositions) setCompositionPaths(data.compositions);
@@ -65044,7 +65187,7 @@ function useFileTree({ projectId, projectIdRef }) {
   const refreshFileTree = useCallback86(async () => {
     const pid = projectIdRef.current;
     if (!pid) return;
-    const res = await fetch(`/api/projects/${pid}`);
+    const res = await fetch(buildProjectApiPath(pid));
     const data = await res.json();
     if (data.files) setFileTree(data.files);
   }, [projectIdRef]);
@@ -65054,10 +65197,10 @@ function useFileTree({ projectId, projectIdRef }) {
     [fileTree]
   );
   const fontAssets = useMemo58(
-    () => assets.filter((asset) => FONT_EXT.test(asset)).map((asset) => ({
+    () => (projectId ? assets : []).filter((asset) => FONT_EXT.test(asset)).map((asset) => ({
       family: fontFamilyFromAssetPath(asset),
       path: asset,
-      url: `/api/projects/${projectId}/preview/${asset}`
+      url: projectId ? buildProjectApiPath(projectId, `/preview/${asset}`) : ""
     })),
     [assets, projectId]
   );
@@ -66760,7 +66903,10 @@ function useTimelineDeleteOps({
             throw new Error(`Timeline element ${target.id} is missing a patchable target`);
           }
           const removeResponse = await fetch(
-            `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
+            buildProjectApiPath(
+              pid,
+              `/file-mutations/remove-element/${encodeURIComponent(targetPath)}`
+            ),
             {
               method: "POST",
               headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
@@ -68070,7 +68216,7 @@ function useAskAgentModal({
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
       try {
         const response = await fetch(
-          `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`
+          buildProjectApiPath(pid, `/files/${encodeURIComponent(targetPath)}`)
         );
         if (!response.ok) return;
         const data = await response.json();
@@ -70362,11 +70508,11 @@ function useDomEditCommits({
       const asset = fileTree.find(
         (path) => FONT_EXT.test(path) && fontFamilyFromAssetPath(path).toLowerCase() === family.toLowerCase()
       );
-      if (!asset) return null;
+      if (!asset || !projectId) return null;
       return {
         family: fontFamilyFromAssetPath(asset),
         path: asset,
-        url: `/api/projects/${projectId}/preview/${asset}`
+        url: buildProjectApiPath(projectId, `/preview/${asset}`)
       };
     },
     [fileTree, projectId, importedFontAssetsRef]
@@ -70386,7 +70532,7 @@ function useDomEditCommits({
         return result;
       };
       const readResponse = await fetch(
-        `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`
+        buildProjectApiPath(pid, `/files/${encodeURIComponent(targetPath)}`)
       );
       if (!readResponse.ok) {
         throw await createStudioSaveHttpError(readResponse, `Failed to read ${targetPath}`);
@@ -70426,7 +70572,7 @@ function useDomEditCommits({
       }
       domEditSaveTimestampRef.current = Date.now();
       const patchResponse = await fetch(
-        `/api/projects/${pid}/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,
+        buildProjectApiPath(pid, `/file-mutations/patch-element/${encodeURIComponent(targetPath)}`),
         {
           method: "POST",
           headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
@@ -70691,7 +70837,7 @@ async function commitStructuralMutation(pid, targetPath, route, body, label, dep
   const originalContent = await readProjectFileContent(pid, targetPath);
   deps.domEditSaveTimestampRef.current = Date.now();
   const mutateResponse = await fetch(
-    `/api/projects/${pid}/file-mutations/${route}/${encodeURIComponent(targetPath)}`,
+    buildProjectApiPath(pid, `/file-mutations/${route}/${encodeURIComponent(targetPath)}`),
     {
       method: "POST",
       headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
@@ -75244,7 +75390,7 @@ async function installRegistryItem({
   blockName,
   showToast
 }) {
-  const response = await fetch(`/api/projects/${projectId}/registry/install`, {
+  const response = await fetch(buildProjectApiPath(projectId, `/registry/install`), {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ blockName })
@@ -76443,7 +76589,7 @@ function useCaptionDetection({
       if (!captionSrcPath) return;
       activating = true;
       const srcPath = captionSrcPath;
-      fetch(`/api/projects/${projectId}/files/${encodeURIComponent(srcPath)}`).then((r) => r.json()).then((data) => {
+      fetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(srcPath)}`)).then((r) => r.json()).then((data) => {
         if (!data.content || !doc || !win || useCaptionStore.getState().isEditMode) return;
         const root = doc.querySelector("[data-composition-id]");
         const w = parseInt(root?.getAttribute("data-width") ?? "1920", 10);
@@ -76462,6 +76608,7 @@ function useCaptionDetection({
       });
     };
     const handleMessage = (e) => {
+      if (!e.source || e.source !== previewIframeRef.current?.contentWindow) return;
       const data = e.data;
       if (data?.source === "hf-preview" && (data?.type === "state" || data?.type === "timeline")) {
         if (!acceptStudioRuntimeMessage(data)) return;
@@ -76753,7 +76900,7 @@ var ImageThumbnail = memo37(function ImageThumbnail2({
 function normalizeCompositionSrc(compSrc, projectId, origin) {
   try {
     const parsed = new URL(compSrc, origin);
-    const previewPrefix = `/api/projects/${projectId}/preview/`;
+    const previewPrefix = buildProjectApiPath(projectId, `/preview/`);
     if (parsed.pathname.startsWith(previewPrefix)) {
       return parsed.pathname.slice(previewPrefix.length);
     }
@@ -76765,7 +76912,7 @@ function resolvePreviewRelative(src, pid, origin) {
   if (!src) return null;
   try {
     const parsed = new URL(src, origin);
-    const base2 = new URL(`/api/projects/${pid}/preview/`, origin).pathname;
+    const base2 = new URL(buildProjectApiPath(pid, `/preview/`), origin).pathname;
     return parsed.pathname.startsWith(base2) ? decodeURIComponent(parsed.pathname.slice(base2.length)) : null;
   } catch {
     return null;
@@ -76784,7 +76931,7 @@ function renderAudioClip(el, pid, sessionEpoch, labelColor, context) {
   const audioUrl = resolveMediaPreviewUrl(el.src ?? "", pid, window.location.origin);
   const srcRelative = resolvePreviewRelative(audioUrl, pid, window.location.origin);
   const encodedRelative = srcRelative ? encodePreviewPath(srcRelative) : null;
-  const waveformUrl = encodedRelative ? `/api/projects/${pid}/waveform/${encodedRelative}` : void 0;
+  const waveformUrl = encodedRelative ? buildProjectApiPath(pid, `/waveform/${encodedRelative}`) : void 0;
   const { start, end } = trimFractions(el);
   return createElement3(AudioWaveform, {
     audioUrl,
@@ -76827,7 +76974,7 @@ function useRenderClipContent({
       }
       if (compSrc) {
         return createElement3(CompositionThumbnail, {
-          previewUrl: `/api/projects/${pid}/preview/comp/${encodePreviewPath(compSrc)}`,
+          previewUrl: buildProjectApiPath(pid, `/preview/comp/${encodePreviewPath(compSrc)}`),
           label: "",
           labelColor: style.label,
           seekTime: 0,
@@ -76887,7 +77034,7 @@ function useRenderClipContent({
       }
       if (htmlPreviewEligible) {
         return createElement3(CompositionThumbnail, {
-          previewUrl: `/api/projects/${pid}/preview`,
+          previewUrl: buildProjectApiPath(pid, `/preview`),
           label: "",
           labelColor: style.label,
           selector: el.selector,
@@ -77103,7 +77250,7 @@ function useLintModal(projectId, refreshKey) {
       if (!projectId) return;
       if (!opts?.background) setLinting(true);
       try {
-        const res = await fetch(`/api/projects/${projectId}/lint`);
+        const res = await fetch(buildProjectApiPath(projectId, `/lint`));
         const data = await res.json();
         const parsed = (data.findings ?? []).map(parseFinding);
         if (opts?.background) {
@@ -77238,9 +77385,10 @@ function useCompositionContentLoader({
 }) {
   return useCallback137(
     (comp) => {
+      if (!projectId) return;
       setActiveCompPath(comp.endsWith(".html") ? comp : null);
       setEditingFile({ path: comp, content: null });
-      fetch(`/api/projects/${projectId}/files/${comp}`).then(async (r) => {
+      fetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(comp)}`)).then(async (r) => {
         if (!r.ok) throw new Error(`Failed to load ${comp} (${r.status})`);
         return r.json();
       }).then((data) => {
@@ -79314,7 +79462,7 @@ function CompCard({
     setLivePreviewLoaded(false);
   };
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
-  const previewUrl = `/api/projects/${projectId}/preview/comp/${comp}`;
+  const previewUrl = buildProjectApiPath(projectId, `/preview/comp/${comp}`);
   const thumbnailUrl2 = buildCompositionThumbnailUrl({
     previewUrl,
     seekTime: THUMBNAIL_SEEK_TIME_SECONDS,
@@ -80669,7 +80817,7 @@ var AssetsTab = memo40(function AssetsTab2({
   useEffect121(() => {
     if (manifest404Ref.current.has(projectId)) return;
     let cancelled = false;
-    fetch(`/api/projects/${projectId}/preview/.media/manifest.jsonl`).then((r) => {
+    fetch(buildProjectApiPath(projectId, `/preview/.media/manifest.jsonl`)).then((r) => {
       if (!r.ok) {
         manifest404Ref.current.add(projectId);
         return "";
@@ -81683,7 +81831,7 @@ function MediaErrorPanel({ name, filePath }) {
   ] });
 }
 function MediaPreview({ projectId, filePath }) {
-  const serveUrl = `/api/projects/${projectId}/preview/${filePath}`;
+  const serveUrl = buildProjectApiPath(projectId, `/preview/${filePath}`);
   const name = filePath.split("/").pop() ?? filePath;
   const [failedPath, setFailedPath] = useState131(null);
   const failed2 = failedPath === filePath;
@@ -83360,7 +83508,7 @@ var RenderQueueItem = memo47(function RenderQueueItem2({
   const [hovered, setHovered] = useState137(false);
   const [videoReady, setVideoReady] = useState137(false);
   const [confirmingDelete, setConfirmingDelete] = useState137(false);
-  const fileSrc = `/api/projects/${projectId}/renders/file/${job.filename}`;
+  const fileSrc = buildProjectApiPath(projectId, `/renders/file/${job.filename}`);
   const handleOpen = useCallback157(() => {
     window.open(fileSrc, "_blank");
   }, [fileSrc]);
@@ -87894,7 +88042,7 @@ function FramePoster({
     return /* @__PURE__ */ jsx208("div", { className: "flex h-full w-full items-center justify-center text-[11px] text-neutral-600", children: "Preview unavailable" });
   }
   let url = buildCompositionThumbnailUrl({
-    previewUrl: `/api/projects/${projectId}/preview/comp/${src}`,
+    previewUrl: buildProjectApiPath(projectId, `/preview/comp/${src}`),
     seekTime: seconds,
     duration: 0,
     origin: window.location.origin,
@@ -89673,10 +89821,10 @@ function StudioApp() {
   const renderClipContent = useRenderClipContent({
     projectIdRef: fileManager.projectIdRef,
     compIdToSrc,
-    activePreviewUrl: activeCompPath ? `/api/projects/${projectId}/preview/comp/${activeCompPath}` : null,
+    activePreviewUrl: activeCompPath && projectId ? buildProjectApiPath(projectId, `/preview/comp/${activeCompPath}`) : null,
     effectiveTimelineDuration
   });
-  const compositionDimensions = useCompositionDimensions();
+  const compositionDimensions = useCompositionDimensions(previewIframeRef);
   const { lintModal, linting, handleLint, closeLintModal, findingsByFile } = useLintModal(
     projectId,
     refreshKey