@hyperframes/studio 0.8.142 → 0.8.144

package/dist/index.js

@@ -40,7 +40,7 @@ import {
   usePreviewVariablesStore,
   whenPreviewBooted,
   writeStudioUiPreferences
-} from "./chunk-H2DUOXTF.js";
+} from "./chunk-G3EDKRZH.js";
 import {
   Button,
   ContextMenu,
@@ -72,7 +72,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-LOVBLSMR.js";
+} from "./chunk-Y2OHHNM2.js";
 import {
   DOM_EDIT_LAYER_OBSERVER_INIT,
   STUDIO_FLAT_INSPECTOR_ENABLED,
@@ -105,7 +105,7 @@ import {
   resolveDomEditSelection,
   serializeDomEditTextFields,
   studioApiFetch
-} from "./chunk-UYWON5AX.js";
+} from "./chunk-PEAKCOUW.js";
 import {
   LAYER_REVEAL_PRIOR_POSITION_ATTR,
   LAYER_REVEAL_PRIOR_Z_ATTR,
@@ -158,13 +158,14 @@ import {
   roundTo3,
   roundToCenti,
   roundToLayoutPx,
+  roundToLayoutSize,
   runtimeAudioId,
   sameTimelineText,
   setCompositionSourceMap,
   splitTimelineElementKey,
   toHexColor,
   wrapTimeline
-} from "./chunk-TFLU2MGI.js";
+} from "./chunk-3GHTHPZD.js";
 import "./chunk-PZ5AY32C.js";
 
 // src/components/EditorShell.tsx
@@ -3597,6 +3598,7 @@ function useTimelineZoom() {
 import { useCallback as useCallback5, useEffect as useEffect6, useRef as useRef6, useState as useState4 } from "react";
 
 // src/utils/timelineAssetDrop.ts
+import { encodeUrlPath } from "@hyperframes/parsers";
 import { buildTimelineAssetId } from "@hyperframes/core/timeline-asset-id";
 
 // src/utils/mediaTypes.ts
@@ -3701,7 +3703,7 @@ function fitTimelineAssetGeometry(natural, comp) {
   };
 }
 function buildTimelineAssetInsertHtml(input) {
-  const sharedAttrs = `id="${input.id}" data-hf-id="${input.hfId}" class="clip" src="${input.assetPath}" data-start="${input.start}" data-duration="${input.duration}" data-track-index="${input.track}"`;
+  const sharedAttrs = `id="${input.id}" data-hf-id="${input.hfId}" class="clip" src="${encodeUrlPath(input.assetPath)}" data-start="${input.start}" data-duration="${input.duration}" data-track-index="${input.track}"`;
   const geometry = input.geometry ?? { left: 0, top: 0, width: 640, height: 360 };
   const visualStyles = `position: absolute; left: ${geometry.left}px; top: ${geometry.top}px; width: ${geometry.width}px; height: ${geometry.height}px; object-fit: contain; z-index: ${input.zIndex}`;
   if (input.kind === "image") {
@@ -16485,17 +16487,24 @@ var measure = (entries) => isTimelineZoomPreviewing() || commit(
   })
 );
 var onPresence = (entries) => measure(entries.filter((entry2) => entry2.isIntersecting));
-var onResize = (entries) => measure(
-  entries.map(({ target, contentRect: { width, height } }) => ({
-    target,
-    size: { width, height }
-  }))
-);
+var pendingSizes = /* @__PURE__ */ new Map();
+var pendingSizesFrame = 0;
+var applyPendingSizes = () => {
+  pendingSizesFrame = 0;
+  const entries = [...pendingSizes].map(([target, size]) => ({ target, size }));
+  pendingSizes.clear();
+  measure(entries);
+};
+var applyResizesNextFrame = (entries) => {
+  for (const { target, contentRect } of entries)
+    pendingSizes.set(target, { width: contentRect.width, height: contentRect.height });
+  pendingSizesFrame ||= requestAnimationFrame(applyPendingSizes);
+};
 var observeIntersections = (callback) => typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver(callback, GAP_WARNING);
 function acquire() {
   if (users++ === 0) {
     shared = {
-      resize: new ResizeObserver(onResize),
+      resize: new ResizeObserver(applyResizesNextFrame),
       presence: observeIntersections(onPresence),
       gaps: observeIntersections(
         (entries) => entries.some((entry2) => entry2.isIntersecting) && scheduleRefresh()
@@ -16516,6 +16525,9 @@ function release() {
   window.removeEventListener("scroll", scheduleRefresh, { capture: true });
   cancelAnimationFrame(frame2);
   frame2 = 0;
+  cancelAnimationFrame(pendingSizesFrame);
+  pendingSizesFrame = 0;
+  pendingSizes.clear();
 }
 var watchGap = (gap) => {
   if (!gap) return;
@@ -16556,6 +16568,7 @@ function useThumbnailStripSize() {
       resize.unobserve(target);
       presence?.unobserve(target);
       strips.delete(target);
+      pendingSizes.delete(target);
       release();
     };
   }, []);
@@ -17143,17 +17156,41 @@ function useOwnPreviewIframe() {
 import { isHtmlElement as isHtmlElement4 } from "@hyperframes/core/runtime/dom-realm";
 
 // src/utils/sourcePatcher.ts
+import {
+  scanHtmlOpeningTags,
+  decodeAuthoredAttribute,
+  HTML_ATTRIBUTE_ENTITIES
+} from "@hyperframes/parsers";
 function escapeRegex(s) {
   return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
+function tagAttribute(tag, name) {
+  return scanHtmlOpeningTags(tag)[0]?.attributes.find((attr) => attr.name === name.toLowerCase());
+}
+function patchTagAttribute(tag, name, edit) {
+  if (edit.kind === "remove") {
+    const attributes = scanHtmlOpeningTags(tag)[0]?.attributes.filter((attr2) => attr2.name === name.toLowerCase()) ?? [];
+    const parts = [];
+    let cursor = 0;
+    for (const attribute of attributes) {
+      let start = attribute.start;
+      while (start > cursor && /[\t\n\f\r ]/.test(tag[start - 1])) start--;
+      parts.push(tag.slice(cursor, start));
+      cursor = attribute.end;
+    }
+    parts.push(tag.slice(cursor));
+    return parts.join("");
+  }
+  const attr = tagAttribute(tag, name);
+  const replacement = edit.kind === "boolean" ? name : `${name}="${escapeHtmlAttribute(edit.value)}"`;
+  if (attr) return tag.slice(0, attr.start) + replacement + tag.slice(attr.end);
+  return tag.endsWith("/") ? `${tag.slice(0, -1).trimEnd()} ${replacement} /` : `${tag} ${replacement}`;
+}
 function escapeStyleAttributeValue(value, quote) {
   return quote === '"' ? value.replace(/"/g, """) : value.replace(/'/g, "'");
 }
 function escapeHtmlAttribute(value) {
-  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function unescapeHtmlAttribute(value) {
-  return value.replace(/&quot;/g, '"').replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+  return value.replace(/[&"<>]/g, (char) => HTML_ATTRIBUTE_ENTITIES[char][0]);
 }
 function splitInlineStyleDeclarations(style) {
   const declarations = [];
@@ -17206,7 +17243,7 @@ function resolveSourceFile(elementId2, selector, files) {
   if (!elementId2 && !selector) return null;
   if (elementId2) {
     for (const [path, content] of Object.entries(files)) {
-      if (content.includes(`id="${elementId2}"`) || content.includes(`id='${elementId2}'`)) {
+      if (findTagByAttribute(content, "id", elementId2)) {
         return path;
       }
     }
@@ -17215,7 +17252,7 @@ function resolveSourceFile(elementId2, selector, files) {
   if (compIdMatch) {
     const compId = compIdMatch[1];
     for (const [path, content] of Object.entries(files)) {
-      if (content.includes(`data-composition-id="${compId}"`)) {
+      if (findTagByAttribute(content, "data-composition-id", compId)) {
         return path;
       }
     }
@@ -17224,7 +17261,7 @@ function resolveSourceFile(elementId2, selector, files) {
   if (classMatch) {
     const cls = classMatch[1];
     for (const [path, content] of Object.entries(files)) {
-      if (content.includes(`class="${cls}"`) || content.includes(`class="${cls} `) || content.includes(` ${cls}"`)) {
+      if (findTagByClass(content, { selector: `.${cls}` })) {
         return path;
       }
     }
@@ -17233,18 +17270,14 @@ function resolveSourceFile(elementId2, selector, files) {
   return null;
 }
 function patchInlineStyle(html2, elementId2, prop, value) {
-  const idPattern = new RegExp(`(<[^>]*\\bid=(["'])${escapeRegex(elementId2)}\\2[^>]*)>`, "i");
-  const match = idPattern.exec(html2);
-  if (!match) return html2;
-  const tag = match[1];
-  return patchInlineStyleInTag(html2, tag, prop, value);
-}
-function patchInlineStyleInTag(html2, tag, prop, value) {
-  if (!tag) return html2;
-  const styleMatch = /\bstyle=(")([^"]*)"|\bstyle=(')([^']*)'/.exec(tag);
-  if (styleMatch) {
-    const existingStyle = styleMatch[2] ?? styleMatch[4];
-    const quote = styleMatch[1] ?? styleMatch[3];
+  return patchInlineStyleByTarget(html2, { id: elementId2 }, prop, value);
+}
+function patchInlineStyleInTag(tag, prop, value) {
+  if (!tag) return tag;
+  const styleMatch = tagAttribute(tag, "style");
+  if (styleMatch?.kind === "value") {
+    const existingStyle = styleMatch.value;
+    const quote = styleMatch.quote || '"';
     const props = /* @__PURE__ */ new Map();
     for (const part of splitInlineStyleDeclarations(existingStyle)) {
       const colon = part.indexOf(":");
@@ -17259,67 +17292,54 @@ function patchInlineStyleInTag(html2, tag, prop, value) {
       props.set(prop, value);
     }
     const newStyle = Array.from(props.entries()).map(([k, v]) => `${k}: ${escapeStyleAttributeValue(v, quote)}`).join("; ");
-    const newTag = tag.replace(styleMatch[0], `style=${quote}${newStyle}${quote}`);
-    return html2.replace(tag, newTag);
+    const newTag = tag.slice(0, styleMatch.start) + `style=${quote}${newStyle}${quote}` + tag.slice(styleMatch.end);
+    return newTag;
   } else {
-    if (value === null) return html2;
+    if (value === null) return tag;
     const selfClosing = tag.endsWith("/");
     const base2 = selfClosing ? tag.slice(0, -1).trimEnd() : tag;
     const newTag = `${base2} style="${prop}: ${escapeStyleAttributeValue(value, '"')}"${selfClosing ? " /" : ""}`;
-    return html2.replace(tag, newTag);
+    return newTag;
   }
 }
 function patchInlineStyleByTarget(html2, target, prop, value) {
   const match = findTagByTarget(html2, target);
   if (!match) return html2;
-  const newTag = patchInlineStyleInTag(match.tag, match.tag, prop, value);
+  const newTag = patchInlineStyleInTag(match.tag, prop, value);
   return replaceTagAtMatch(html2, match, newTag);
 }
 function replaceTagAtMatch(html2, match, newTag) {
   return `${html2.slice(0, match.start)}${newTag}${html2.slice(match.end)}`;
 }
-function execDataAttrPattern(html2, attr, value) {
-  const pattern = new RegExp(`(<[^>]*\\b${attr}=(["'])${escapeRegex(value)}\\2[^>]*)>`, "i");
-  const match = pattern.exec(html2);
-  if (match?.index == null) return null;
-  return { tag: match[1], start: match.index, end: match.index + match[1].length };
+function findTagByAttribute(html2, name, value) {
+  const found = scanHtmlOpeningTags(html2).find((tag) => {
+    const attr = tag.attributes.find((attr2) => attr2.name === name);
+    return tag.closed && attr?.kind === "value" && decodeAuthoredAttribute(attr.value) === value;
+  });
+  return found ? { tag: html2.slice(found.start, found.bodyEnd), start: found.start, end: found.bodyEnd } : null;
 }
 function findTagByClass(html2, target) {
   const classMatch = target.selector?.match(/^\.([a-zA-Z0-9_-]+)$/);
   if (!classMatch) return null;
-  const cls = classMatch[1];
-  const pattern = new RegExp(
-    `(<[^>]*\\bclass=(["'])[^"']*\\b${escapeRegex(cls)}\\b[^"']*\\2[^>]*)>`,
-    "gi"
-  );
-  const selectorIndex = target.selectorIndex ?? 0;
-  let match;
-  let currentIndex = 0;
-  while ((match = pattern.exec(html2)) !== null) {
-    if (currentIndex === selectorIndex && match.index != null) {
-      return {
-        tag: match[1],
-        start: match.index,
-        end: match.index + match[1].length
-      };
-    }
-    currentIndex += 1;
-  }
-  return null;
+  const found = scanHtmlOpeningTags(html2).filter((tag) => {
+    const attr = tag.attributes.find((attr2) => attr2.name === "class");
+    return tag.closed && attr?.kind === "value" && decodeAuthoredAttribute(attr.value).split(/\s+/).includes(classMatch[1]);
+  })[target.selectorIndex ?? 0];
+  return found ? { tag: html2.slice(found.start, found.bodyEnd), start: found.start, end: found.bodyEnd } : null;
 }
 function findTagByTarget(html2, target) {
   if (target.hfId) {
-    const result = execDataAttrPattern(html2, "data-hf-id", target.hfId);
+    const result = findTagByAttribute(html2, "data-hf-id", target.hfId);
     if (result) return result;
   }
   if (target.id) {
-    const result = execDataAttrPattern(html2, "id", target.id);
+    const result = findTagByAttribute(html2, "id", target.id);
     if (result) return result;
   }
   if (!target.selector) return null;
   const compositionIdMatch = target.selector.match(/^\[data-composition-id="([^"]+)"\]$/);
   if (compositionIdMatch) {
-    const result = execDataAttrPattern(html2, "data-composition-id", compositionIdMatch[1]);
+    const result = findTagByAttribute(html2, "data-composition-id", compositionIdMatch[1]);
     if (result) return result;
   }
   return findTagByClass(html2, target);
@@ -17327,9 +17347,11 @@ function findTagByTarget(html2, target) {
 function readAttributeByTarget(html2, target, attr) {
   const match = findTagByTarget(html2, target);
   if (!match) return void 0;
-  const fullAttr = attr.startsWith("data-") ? attr : `data-${attr}`;
-  const valueMatch = new RegExp(`\\b${fullAttr}=(["'])([^"']*)\\1`).exec(match.tag);
-  return valueMatch?.[2] != null ? unescapeHtmlAttribute(valueMatch[2]) : void 0;
+  return readTagAttribute(match.tag, attr.startsWith("data-") ? attr : `data-${attr}`);
+}
+function readTagAttribute(tag, attr) {
+  const value = tagAttribute(tag, attr);
+  return value?.kind === "value" ? decodeAuthoredAttribute(value.value) : void 0;
 }
 function readTagSnippetByTarget(html2, target) {
   const match = findTagByTarget(html2, target);
@@ -17338,60 +17360,15 @@ function readTagSnippetByTarget(html2, target) {
 function patchAttributeByTarget(html2, target, attr, value) {
   const match = findTagByTarget(html2, target);
   if (!match) return html2;
-  const fullAttr = attr.startsWith("data-") ? attr : `data-${attr}`;
-  const attrPattern = new RegExp(`\\b${escapeRegex(fullAttr)}=(["'])([^"']*)\\1`);
-  const tag = match.tag;
-  if (value === null) {
-    const boolAttrPattern = new RegExp(`\\b${escapeRegex(fullAttr)}(?:=(["'])[^"']*\\1)?`);
-    if (!boolAttrPattern.test(tag)) return html2;
-    const removePattern = new RegExp(`\\s+${escapeRegex(fullAttr)}(?:=(["'])[^"']*\\1)?`);
-    const newTag2 = tag.replace(removePattern, "");
-    return replaceTagAtMatch(html2, match, newTag2);
-  }
-  const escaped = escapeHtmlAttribute(value);
-  if (attrPattern.test(tag)) {
-    const newTag2 = tag.replace(attrPattern, `${fullAttr}="${escaped}"`);
-    return replaceTagAtMatch(html2, match, newTag2);
-  }
-  const newTag = tag + ` ${fullAttr}="${escaped}"`;
-  return replaceTagAtMatch(html2, match, newTag);
+  const name = attr.startsWith("data-") ? attr : `data-${attr}`;
+  const edit = value === null ? { kind: "remove" } : { kind: "value", value };
+  return replaceTagAtMatch(html2, match, patchTagAttribute(match.tag, name, edit));
 }
 function patchAttribute(html2, elementId2, attr, value) {
-  const idPattern = new RegExp(`(<[^>]*\\bid=(["'])${escapeRegex(elementId2)}\\2[^>]*)>`, "i");
-  const match = idPattern.exec(html2);
-  if (!match) return html2;
-  const tag = match[1];
-  const fullAttr = attr.startsWith("data-") ? attr : `data-${attr}`;
-  const attrPattern = new RegExp(`\\b${escapeRegex(fullAttr)}=(["'])([^"']*)\\1`);
-  if (value === null) {
-    const boolAttrPattern = new RegExp(`\\b${escapeRegex(fullAttr)}(?:=(["'])[^"']*\\1)?`);
-    if (!boolAttrPattern.test(tag)) return html2;
-    const removePattern = new RegExp(`\\s+${escapeRegex(fullAttr)}(?:=(["'])[^"']*\\1)?`);
-    const newTag = tag.replace(removePattern, "");
-    return html2.replace(tag, newTag);
-  }
-  const escaped = escapeHtmlAttribute(value);
-  if (attrPattern.test(tag)) {
-    const newTag = tag.replace(attrPattern, `${fullAttr}="${escaped}"`);
-    return html2.replace(tag, newTag);
-  } else {
-    const newTag = tag + ` ${fullAttr}="${escaped}"`;
-    return html2.replace(tag, newTag);
-  }
+  return patchAttributeByTarget(html2, { id: elementId2 }, attr, value);
 }
 function patchTextContent(html2, elementId2, value) {
-  const openTagPattern = new RegExp(
-    `(<([a-z0-9-]+)[^>]*\\bid=(["'])${escapeRegex(elementId2)}\\3[^>]*>)`,
-    "i"
-  );
-  const match = openTagPattern.exec(html2);
-  if (!match || match.index == null) return html2;
-  const openingTag = match[1];
-  const tagName = match[2];
-  const contentStart = match.index + openingTag.length;
-  const closingIndex = findMatchingClosingTagIndex(html2, tagName, contentStart);
-  if (closingIndex < 0) return html2;
-  return `${html2.slice(0, contentStart)}${value}${html2.slice(closingIndex)}`;
+  return patchTextContentByTarget(html2, { id: elementId2 }, value);
 }
 function findMatchingClosingTagIndex(html2, tagName, contentStart) {
   const tagPattern = new RegExp(`</?${escapeRegex(tagName)}\\b[^>]*>`, "gi");
@@ -17426,47 +17403,26 @@ var HTML_BOOLEAN_ATTRIBUTES = /* @__PURE__ */ new Set([
   "reversed",
   "selected"
 ]);
-function patchHtmlAttributeInTag(html2, tag, attr, value) {
-  if (!tag) return html2;
-  const isBoolean = HTML_BOOLEAN_ATTRIBUTES.has(attr);
-  if (isBoolean) {
-    const escapedAttr = escapeRegex(attr);
-    const hasBoolAttr = new RegExp(`(?:^|\\s)${escapedAttr}(?:\\s|=|$)`).test(tag);
-    if (value === null || value === "" || value === "false") {
-      if (!hasBoolAttr) return html2;
-      const removePattern = new RegExp(`\\s+${escapedAttr}(?:=(["'])[^"']*\\1)?`);
-      const newTag3 = tag.replace(removePattern, "");
-      return html2.replace(tag, newTag3);
-    }
-    if (hasBoolAttr) return html2;
-    const newTag2 = tag + ` ${attr}`;
-    return html2.replace(tag, newTag2);
-  }
-  const attrPattern = new RegExp(`\\b${escapeRegex(attr)}=(["'])([^"']*)\\1`);
-  if (value === null) {
-    if (!attrPattern.test(tag)) return html2;
-    const removePattern = new RegExp(`\\s+${escapeRegex(attr)}=(["'])[^"']*\\1`);
-    const newTag2 = tag.replace(removePattern, "");
-    return html2.replace(tag, newTag2);
-  }
-  const escaped = escapeHtmlAttribute(value);
-  if (attrPattern.test(tag)) {
-    const newTag2 = tag.replace(attrPattern, `${attr}="${escaped}"`);
-    return html2.replace(tag, newTag2);
-  }
-  const newTag = tag + ` ${attr}="${escaped}"`;
-  return html2.replace(tag, newTag);
+function patchHtmlAttributeInTag(tag, attr, value) {
+  if (!tag) return tag;
+  let edit;
+  if (HTML_BOOLEAN_ATTRIBUTES.has(attr)) {
+    if (value === null || value === "" || value === "false") edit = { kind: "remove" };
+    else {
+      if (tagAttribute(tag, attr)) return tag;
+      edit = { kind: "boolean" };
+    }
+  } else edit = value === null ? { kind: "remove" } : { kind: "value", value };
+  const newTag = patchTagAttribute(tag, attr, edit);
+  return newTag;
 }
 function patchHtmlAttribute(html2, elementId2, attr, value) {
-  const idPattern = new RegExp(`(<[^>]*\\bid=(["'])${escapeRegex(elementId2)}\\2[^>]*)>`, "i");
-  const match = idPattern.exec(html2);
-  if (!match) return html2;
-  return patchHtmlAttributeInTag(html2, match[1], attr, value);
+  return patchHtmlAttributeByTarget(html2, { id: elementId2 }, attr, value);
 }
 function patchHtmlAttributeByTarget(html2, target, attr, value) {
   const match = findTagByTarget(html2, target);
   if (!match) return html2;
-  const newTag = patchHtmlAttributeInTag(match.tag, match.tag, attr, value);
+  const newTag = patchHtmlAttributeInTag(match.tag, attr, value);
   return replaceTagAtMatch(html2, match, newTag);
 }
 function patchTextContentByTarget(html2, target, value) {
@@ -17631,8 +17587,8 @@ import { motionPathPluginUrl } from "@hyperframes/core/gsap-cdn";
 // src/utils/authoredSource.ts
 import { ensureHfIds, isCompositionTemplate } from "@hyperframes/parsers/hf-ids";
 import {
-  STUDIO_PREVIEW_LAZY_ATTR,
-  STUDIO_PREVIEW_UPCOMING_ATTR
+  PREVIEW_ONLY_ATTRS,
+  STUDIO_PREVIEW_LAZY_ATTR
 } from "@hyperframes/core/studio-preview-mark";
 function parseSavedSource(html2) {
   return new DOMParser().parseFromString(ensureHfIds(html2), "text/html");
@@ -17713,10 +17669,8 @@ function authoredMarkup(authored, live, sourceFile) {
 function liveMarkupWithoutPreviewMarks(live) {
   const copy = live.cloneNode(true);
   for (const el of [copy, ...Array.from(copy.querySelectorAll("*"))]) {
-    el.removeAttribute(STUDIO_PREVIEW_UPCOMING_ATTR);
-    if (!el.hasAttribute(STUDIO_PREVIEW_LAZY_ATTR)) continue;
-    el.removeAttribute("loading");
-    el.removeAttribute(STUDIO_PREVIEW_LAZY_ATTR);
+    if (el.hasAttribute(STUDIO_PREVIEW_LAZY_ATTR)) el.removeAttribute("loading");
+    for (const attr of PREVIEW_ONLY_ATTRS) el.removeAttribute(attr);
   }
   return copy.outerHTML;
 }
@@ -21837,6 +21791,7 @@ import {
 } from "@hyperframes/core/audio-automation";
 
 // src/utils/studioHelpers.ts
+import { encodeUrlPath as encodeUrlPath2 } from "@hyperframes/parsers";
 function getTimelineElementLabel(element) {
   return element.label || element.id || element.tag;
 }
@@ -21991,7 +21946,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 = buildProjectApiPath(projectId, `/preview/${assetPath}`);
+  media.src = buildProjectApiPath(projectId, `/preview/${encodeUrlPath2(assetPath)}`);
   const duration = await new Promise((resolve) => {
     const timeout = window.setTimeout(() => resolve(DEFAULT_TIMELINE_ASSET_DURATION[kind]), 3e3);
     const finalize = (value) => {
@@ -25307,6 +25262,7 @@ function isPeakMap(value) {
 }
 
 // src/player/components/thumbnailUtils.ts
+import { decodedUrlPath } from "@hyperframes/parsers";
 function quantizeThumbnailFrameCount(frameCount) {
   const safeCount = Math.max(1, Number.isFinite(frameCount) ? Math.ceil(frameCount) : 1);
   const cap = 2 ** Math.floor(Math.log2(MAX_VISIBLE_THUMBNAIL_FRAMES));
@@ -25357,6 +25313,9 @@ function computeThumbnailStrip(containerWidth, aspect, clipHeight, minFrameWidth
   const frameCount = measured ? Math.max(1, Math.ceil(containerWidth / frameW)) : 1;
   return { frameW, frameCount };
 }
+function authoredSrcPath(src) {
+  return /^(?:[a-z][a-z\d+.-]*:|\/\/)/i.test(src) ? src : decodedUrlPath(src);
+}
 function encodePreviewPath(relativePath) {
   return relativePath.split("/").map(encodeURIComponent).join("/");
 }
@@ -25401,7 +25360,7 @@ function loadPeakMap(url) {
 function clipPeaksUrl(src, projectId) {
   const origin2 = window.location.origin;
   const relative = resolvePreviewRelative(
-    resolveMediaPreviewUrl(src ?? "", projectId, origin2),
+    resolveMediaPreviewUrl(authoredSrcPath(src ?? ""), projectId, origin2),
     projectId,
     origin2
   );
@@ -25472,7 +25431,7 @@ function isNormalizePlan(value) {
 async function requestNormalizePlan(projectId, el, fetchImpl = studioApiFetch) {
   const origin2 = window.location.origin;
   const relative = resolvePreviewRelative(
-    resolveMediaPreviewUrl(el.src ?? "", projectId, origin2),
+    resolveMediaPreviewUrl(authoredSrcPath(el.src ?? ""), projectId, origin2),
     projectId,
     origin2
   );
@@ -26986,10 +26945,10 @@ function formatAttrs(attrs) {
 function readAuthoredSrc(source, target) {
   const tag = findTagByTarget(source, target);
   if (!tag) return "";
-  const own = /\bsrc=(["'])([^"']*)\1/.exec(tag.tag);
-  if (own?.[2]) return unescapeHtmlAttribute(own[2]);
-  const firstSource = /^\s*<source\b[^>]*?\bsrc=(["'])([^"']*)\1/i.exec(source.slice(tag.end + 1));
-  return firstSource?.[2] ? unescapeHtmlAttribute(firstSource[2]) : "";
+  const own = readTagAttribute(tag.tag, "src");
+  if (own) return own;
+  const firstSource = /^\s*<source\b[^>]*>/i.exec(source.slice(tag.end + 1));
+  return firstSource && readTagAttribute(firstSource[0], "src") || "";
 }
 function insertBeforeTarget(source, target, markup) {
   const match = findTagByTarget(source, target);
@@ -29960,9 +29919,10 @@ function buildStandaloneRootTimelineElement(params) {
 
 // src/player/hooks/timelineSyncHydration.ts
 import { resolveCssStackingContextId as resolveCssStackingContextId2 } from "@hyperframes/core/runtime/stacking-context";
+import { LOOP_INFLATED_TIMELINE_SECONDS } from "@hyperframes/core/runtime/composition-length";
 import { HF_AUDIO_GROUP_ATTR as HF_AUDIO_GROUP_ATTR3 } from "@hyperframes/core/audio-groups";
 function sanitizeDurationSeconds(value) {
-  return Number.isFinite(value) && value > 0 && value < 7200 ? value : 0;
+  return Number.isFinite(value) && value > 0 && value < LOOP_INFLATED_TIMELINE_SECONDS ? value : 0;
 }
 function readChildAudioGroupState(child) {
   const audioGroup = child.getAttribute(HF_AUDIO_GROUP_ATTR3);
@@ -31340,7 +31300,7 @@ function readParentFlexBasisPixels(element, size) {
   const display2 = readStyleOrComputed(parent, "display").trim();
   if (display2 !== "flex" && display2 !== "inline-flex") return null;
   const direction = readStyleOrComputed(parent, "flex-direction").trim();
-  return roundToLayoutPx(Math.max(1, direction.startsWith("column") ? size.height : size.width));
+  return direction.startsWith("column") ? size.height : size.width;
 }
 function restoreStaleStudioScaleResize(element) {
   if (!element.hasAttribute(STUDIO_ORIGINAL_SCALE_ATTR)) return;
@@ -31403,17 +31363,16 @@ function writeStudioBoxSizeVars(element, size) {
     element.setAttribute(STUDIO_ORIGINAL_DISPLAY_ATTR, element.style.getPropertyValue("display"));
   }
   element.setAttribute(STUDIO_BOX_SIZE_ATTR, "true");
-  element.style.setProperty(STUDIO_WIDTH_PROP, `${roundToLayoutPx(Math.max(1, size.width))}px`);
-  element.style.setProperty(STUDIO_HEIGHT_PROP, `${roundToLayoutPx(Math.max(1, size.height))}px`);
+  element.style.setProperty(STUDIO_WIDTH_PROP, `${size.width}px`);
+  element.style.setProperty(STUDIO_HEIGHT_PROP, `${size.height}px`);
 }
-function applyStudioBoxSizeDimensions(element, size) {
+function applyStudioBoxSizeDimensions(element, wantedSize) {
+  const size = roundToLayoutSize(wantedSize);
   writeStudioBoxSizeVars(element, size);
   restoreStaleStudioScaleResize(element);
-  const width = roundToLayoutPx(Math.max(1, size.width));
-  const height = roundToLayoutPx(Math.max(1, size.height));
   element.style.setProperty("box-sizing", "border-box");
-  element.style.setProperty("width", `${width}px`);
-  element.style.setProperty("height", `${height}px`);
+  element.style.setProperty("width", `${size.width}px`);
+  element.style.setProperty("height", `${size.height}px`);
   element.style.setProperty("min-width", "0px");
   element.style.setProperty("min-height", "0px");
   element.style.setProperty("max-width", "none");
@@ -31428,6 +31387,7 @@ function applyStudioBoxSizeDimensions(element, size) {
   if (computedDisplay === "inline") {
     element.style.setProperty("display", "inline-block");
   }
+  return size;
 }
 function applyStudioBoxSize(element, size) {
   promoteInlineForTransform(element);
@@ -31445,7 +31405,7 @@ function applyStudioBoxSizeDraft(element, size) {
     boxSizeDraftBases.set(element, { width: element.offsetWidth, height: element.offsetHeight });
   }
   promoteInlineForTransform(element);
-  applyStudioBoxSizeDimensions(element, size);
+  return applyStudioBoxSizeDimensions(element, size);
 }
 function isSimpleRotateAngle(value) {
   return /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|rad|turn|grad)$/.test(value.trim());
@@ -32184,7 +32144,7 @@ function getCachedProbe(url) {
   return cached5?.result;
 }
 function resolveProbeSource(src, projectId) {
-  return projectId ? resolveMediaPreviewUrl(src, projectId, window.location.origin) : src;
+  return projectId ? resolveMediaPreviewUrl(authoredSrcPath(src), projectId, window.location.origin) : src;
 }
 function evictMetadataOverflow() {
   const overflow = cache.size + failed.size - TIMELINE_VIEWPORT_BUDGETS.metadataRegistryEntries;
@@ -37615,7 +37575,7 @@ function OffCanvasIndicators({
     const selectOffCanvas = async () => {
       const el = elements.current.get(r.key);
       if (!el) return;
-      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-KBTPQKGA.js");
+      const { resolveDomEditSelection: resolveDomEditSelection2 } = await import("./domEditingLayers-PYST4G45.js");
       const acp = activeCompositionPathRef.current ?? "index.html";
       const sel = await resolveDomEditSelection2(el, {
         activeCompositionPath: acp,
@@ -37671,7 +37631,7 @@ function ChildRectOutlines({
 
 // src/components/editor/domEditResizeLocal.ts
 var MIN_RESIZE_LOCAL_PX = 1;
-var DEGENERATE_START_DIST_PX = 3;
+var DEGENERATE_START_DIST_PX = 0.5;
 function resolveCenterResizeScale(input) {
   const startDist = Math.hypot(
     input.pointerStart.x - input.centerStart.x,
@@ -37726,6 +37686,17 @@ function resolveRotatedResizeCursor(handle, rotationDeg) {
   const bucket = Math.round(normalized / 45) % 8;
   return CURSORS_8[bucket];
 }
+function resizeRemainderShift(corners, grab, { wanted, written }) {
+  const u = { x: corners.ne.x - corners.nw.x, y: corners.ne.y - corners.nw.y };
+  const v = { x: corners.sw.x - corners.nw.x, y: corners.sw.y - corners.nw.y };
+  const det = u.x * v.y - u.y * v.x;
+  if (!det) return { x: 0, y: 0 };
+  const su = Math.sign((grab.x * v.y - grab.y * v.x) / det);
+  const sv = Math.sign((u.x * grab.y - u.y * grab.x) / det);
+  const kw = su * (wanted.width - written.width) / (2 * written.width);
+  const kh = sv * (wanted.height - written.height) / (2 * written.height);
+  return { x: u.x * kw + v.x * kh, y: u.y * kw + v.y * kh };
+}
 function computeNextResizeAnchor(prev, fixedStart, fixedNow) {
   const base2 = prev ?? { dx: 0, dy: 0 };
   return { dx: base2.dx + (fixedStart.x - fixedNow.x), dy: base2.dy + (fixedStart.y - fixedNow.y) };
@@ -39653,6 +39624,7 @@ function startGesture(kind, e, opts, options) {
       manualEditDragToken,
       snapContext,
       resizeHandle: kind === "resize" ? options?.resizeHandle ?? "se" : void 0,
+      resizePressFromCorner: kind === "resize" && options?.resizeCorner ? { x: e.clientX - options.resizeCorner.x, y: e.clientY - options.resizeCorner.y } : void 0,
       resizeFixedCenterStart
     };
     if (kind === "resize") {
@@ -39746,7 +39718,7 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
     offerUndo();
   };
   const drawPressedBox = (origin2) => origin2 && ((dx, dy) => opts.setOverlayRect(shiftedOverlayRect(origin2, dx, dy)));
-  const drawResizedBox = (origin2, press) => {
+  const drawResizedBox = (origin2, grabbed) => {
     if (!origin2) return null;
     const bounds = opts.overlayRef.current?.getBoundingClientRect();
     const centre = {
@@ -39754,8 +39726,12 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
       y: (bounds?.top ?? 0) + origin2.top + origin2.height / 2
     };
     return (dx, dy) => {
-      const pointer = { x: press.x + dx, y: press.y + dy };
-      const scale = resolveCenterResizeScale({ pointer, pointerStart: press, centerStart: centre });
+      const pointer = { x: grabbed.x + dx, y: grabbed.y + dy };
+      const scale = resolveCenterResizeScale({
+        pointer,
+        pointerStart: grabbed,
+        centerStart: centre
+      });
       const [width, height] = [origin2.width * scale, origin2.height * scale];
       opts.setOverlayRect({
         ...origin2,
@@ -39874,7 +39850,10 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
     let draw = null;
     if (kind === "drag") draw = drawPressedBox(opts.overlayRectRef.current);
     if (kind === "resize")
-      draw = drawResizedBox(opts.overlayRectRef.current, { x: e.clientX, y: e.clientY });
+      draw = drawResizedBox(
+        opts.overlayRectRef.current,
+        options?.resizeCorner ?? { x: e.clientX, y: e.clientY }
+      );
     return startOnShownPreview(
       e,
       () => {
@@ -39889,6 +39868,7 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
           selection,
           rect,
           resizeHandle: options?.resizeHandle,
+          resizeCorner: options?.resizeCorner,
           at
         });
       },
@@ -39899,10 +39879,14 @@ function createPreviewGestureStarts(opts, moveActiveGesture, releaseActiveGestur
 }
 
 // src/components/editor/resizeDraft.ts
-function resolveResizeAnchor(g, corners, measureOrientedRect) {
+function resolveResizeAnchor(g, corners, measureOrientedRect, sizes) {
   const fixedStart = g.resizeFixedCenterStart;
   if (corners && fixedStart) {
-    return computeNextResizeAnchor(g.lastResizeAnchor, fixedStart, overlayCornersCentroid(corners));
+    const press = g.resizePressFromCorner ?? { x: 0, y: 0 };
+    const grab = { x: g.startX - press.x - g.centerX, y: g.startY - press.y - g.centerY };
+    const shift = resizeRemainderShift(corners, grab, sizes);
+    const target = { x: fixedStart.x + shift.x, y: fixedStart.y + shift.y };
+    return computeNextResizeAnchor(g.lastResizeAnchor, target, overlayCornersCentroid(corners));
   }
   const fallbackRect = measureOrientedRect();
   return resolveResizeCenterAnchorOffset({
@@ -39912,9 +39896,9 @@ function resolveResizeAnchor(g, corners, measureOrientedRect) {
     overlayHeight: fallbackRect ? fallbackRect.height : g.originHeight
   });
 }
-function resolveAnchoredResizeDraft(g, member, element, overlayEl, iframe, measureOrientedRect) {
+function resolveAnchoredResizeDraft(g, member, element, overlayEl, iframe, measureOrientedRect, sizes) {
   const corners = overlayEl && iframe ? elementCornerOverlayPoints(overlayEl, iframe, element) : null;
-  const anchor2 = resolveResizeAnchor(g, corners, measureOrientedRect);
+  const anchor2 = resolveResizeAnchor(g, corners, measureOrientedRect, sizes);
   g.lastResizeAnchor = anchor2;
   applyManualOffsetDragDraft(member, anchor2.dx, anchor2.dy);
   return measureOrientedRect() ?? {
@@ -39927,7 +39911,7 @@ function resolveAnchoredResizeDraft(g, member, element, overlayEl, iframe, measu
     angle: g.actualRotation
   };
 }
-function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRect) {
+function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRect, sizes) {
   if (g.pathOffsetMember) {
     return resolveAnchoredResizeDraft(
       g,
@@ -39935,7 +39919,8 @@ function resolveResizeDraftRect(g, element, overlayEl, iframe, measureOrientedRe
       element,
       overlayEl,
       iframe,
-      measureOrientedRect
+      measureOrientedRect,
+      sizes
     );
   }
   return measureOrientedRect() ?? {
@@ -40260,14 +40245,15 @@ function createDomEditOverlayGestureHandlers(opts) {
       }
       if (g.pathOffsetMember) applyManualOffsetDragDraft(g.pathOffsetMember, dx, dy);
     } else {
+      const grab = g.resizePressFromCorner ?? { x: 0, y: 0 };
       const nextSize = resolveCenterResizeSize({
         baseWidth: g.actualWidth,
         baseHeight: g.actualHeight,
-        pointer: { x: e.clientX, y: e.clientY },
-        pointerStart: { x: g.startX, y: g.startY },
+        pointer: { x: e.clientX - grab.x, y: e.clientY - grab.y },
+        pointerStart: { x: g.startX - grab.x, y: g.startY - grab.y },
         centerStart: { x: g.centerX, y: g.centerY }
       });
-      applyStudioBoxSizeDraft(sel.element, nextSize);
+      const writtenSize = applyStudioBoxSizeDraft(sel.element, nextSize);
       const overlayEl = opts.overlayRef.current;
       const iframe = opts.iframeRef.current;
       const measureOrientedRect = () => overlayEl && iframe ? orientedOverlayRect(overlayEl, iframe, sel.element) : null;
@@ -40276,7 +40262,8 @@ function createDomEditOverlayGestureHandlers(opts) {
         sel.element,
         overlayEl,
         iframe,
-        measureOrientedRect
+        measureOrientedRect,
+        { wanted: nextSize, written: writtenSize }
       );
       logResizeMove({
         pointer: { x: e.clientX, y: e.clientY },
@@ -41353,13 +41340,22 @@ var RESIZE_HANDLE_DEFS = [
   { handle: "se", cursor: "nwse-resize", x: "right", y: "bottom" }
 ];
 var NO_CROP_INSET = { top: 0, right: 0, bottom: 0, left: 0 };
-function resizeHandleStyle(def, overlayRect, cropInset) {
+function resizeHandleLayout(def, overlayRect, cropInset) {
   const half = RESIZE_HANDLE_HIT_PX / 2;
   const inset = cropInset ?? NO_CROP_INSET;
-  const style = { cursor: def.cursor, touchAction: "none" };
-  style.left = def.x === "left" ? overlayRect.left + inset.left - half : overlayRect.left + overlayRect.width - inset.right - half;
-  style.top = def.y === "top" ? overlayRect.top + inset.top - half : overlayRect.top + overlayRect.height - inset.bottom - half;
-  return style;
+  const cornerX = def.x === "left" ? overlayRect.left + inset.left : overlayRect.left + overlayRect.width - inset.right;
+  const cornerY = def.y === "top" ? overlayRect.top + inset.top : overlayRect.top + overlayRect.height - inset.bottom;
+  const slideOutToFreeMiddleX = (def.x === "left" ? -1 : 1) * Math.max(0, half - (overlayRect.width - inset.left - inset.right) / 4);
+  const slideOutToFreeMiddleY = (def.y === "top" ? -1 : 1) * Math.max(0, half - (overlayRect.height - inset.top - inset.bottom) / 4);
+  return {
+    style: {
+      cursor: def.cursor,
+      touchAction: "none",
+      left: cornerX - half + slideOutToFreeMiddleX,
+      top: cornerY - half + slideOutToFreeMiddleY
+    },
+    anchor: { left: half - slideOutToFreeMiddleX, top: half - slideOutToFreeMiddleY }
+  };
 }
 function DomEditGroupChrome({
   groupOverlayItems,
@@ -41491,26 +41487,42 @@ function DomEditSelectionChrome({
             },
             selectionKey
           ),
-          canManipulate && !editing && selection.capabilities.canApplyManualSize && RESIZE_HANDLE_DEFS.map(
-            (def) => def.handle !== "se" && !selection.capabilities.canApplyManualOffset ? null : /* @__PURE__ */ jsx99(
+          canManipulate && !editing && selection.capabilities.canApplyManualSize && RESIZE_HANDLE_DEFS.map((def) => {
+            if (def.handle !== "se" && !selection.capabilities.canApplyManualOffset) return null;
+            const layout = resizeHandleLayout(def, overlayRect, cropOutlineInsetPx ?? void 0);
+            return /* @__PURE__ */ jsxs69(
               "div",
               {
                 className: "pointer-events-auto absolute flex h-4 w-4 items-center justify-center",
                 style: {
-                  ...resizeHandleStyle(def, overlayRect, cropOutlineInsetPx ?? void 0),
+                  ...layout.style,
                   // Cursor rotates with the object: bucket the corner's base
                   // diagonal + element rotation into the 8 CSS resize cursors.
                   cursor: resolveRotatedResizeCursor(def.handle, overlayRect.angle ?? 0)
                 },
                 onPointerDown: (e) => {
                   e.stopPropagation();
-                  gestures.startGesture("resize", e, { resizeHandle: def.handle });
+                  const corner = e.currentTarget.querySelector("[data-resize-corner]")?.getBoundingClientRect();
+                  gestures.startGesture("resize", e, {
+                    resizeHandle: def.handle,
+                    resizeCorner: corner && { x: corner.left, y: corner.top }
+                  });
                 },
-                children: /* @__PURE__ */ jsx99("div", { className: "pointer-events-none h-[12px] w-[12px] rounded-full border-[1.5px] border-studio-accent bg-white shadow-[0_0_3px_rgba(0,0,0,0.45)]" })
+                children: [
+                  /* @__PURE__ */ jsx99(
+                    "span",
+                    {
+                      "data-resize-corner": true,
+                      className: "pointer-events-none absolute",
+                      style: layout.anchor
+                    }
+                  ),
+                  /* @__PURE__ */ jsx99("div", { className: "pointer-events-none h-[12px] w-[12px] rounded-full border-[1.5px] border-studio-accent bg-white shadow-[0_0_3px_rgba(0,0,0,0.45)]" })
+                ]
               },
               def.handle
-            )
-          )
+            );
+          })
         ]
       }
     ),
@@ -52882,7 +52894,11 @@ function trimFractions(el) {
   return { start, end };
 }
 function renderAudioClip(el, pid, sessionEpoch, labelColor, context, elements, labelInset) {
-  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);
   const encodedRelative = srcRelative ? encodePreviewPath(srcRelative) : null;
   const waveformUrl = encodedRelative ? buildProjectApiPath(pid, `/waveform/${encodedRelative}`) : void 0;
@@ -52982,7 +52998,11 @@ 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
+        );
         if (el.tag === "img") {
           return createElement(ImageThumbnail, {
             imageSrc: mediaSrc,
@@ -54700,8 +54720,8 @@ function MediaSection({
   const [removeProgress, setRemoveProgress] = useState65(null);
   const [createPlate, setCreatePlate] = useState65(false);
   const [quality, setQuality] = useState65("balanced");
-  const absoluteSrc = projectDir && srcAttr && !srcAttr.startsWith("http") ? `${projectDir}/${srcAttr}` : srcAttr;
-  const projectSrc = srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr) ? stripQueryAndHash(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr) : "";
+  const projectSrc = srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr) ? authoredSrcPath(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr) : "";
+  const absoluteSrc = projectDir && projectSrc ? `${projectDir}/${projectSrc}` : srcAttr;
   const canRemoveBackground = Boolean(onRemoveBackground && isVisualMedia && projectSrc);
   const panelTitle = isImage ? "Image" : isVideo ? "Video" : "Audio";
   useEffect72(() => {
@@ -56024,7 +56044,7 @@ function resolveProjectAssetPath(sourceFile, src, projectId) {
     return stripPreviewAssetPath(trimmed, projectId);
   }
   const sourceDir = sourceFile.includes("/") ? sourceFile.slice(0, sourceFile.lastIndexOf("/")) : "";
-  const parts = `${sourceDir}/${trimmed}`.split("/");
+  const parts = `${sourceDir}/${authoredSrcPath(trimmed)}`.split("/");
   const normalized = [];
   for (const part of parts) {
     if (!part || part === ".") continue;
@@ -58498,6 +58518,7 @@ function ReverseGradientIcon({ size = 16 }) {
 }
 
 // src/components/editor/propertyPanelFill.tsx
+import { encodeUrlPath as encodeUrlPath3 } from "@hyperframes/parsers";
 import { jsx as jsx137, jsxs as jsxs99 } from "react/jsx-runtime";
 function normalizeProjectPath(value) {
   const trimmed = value.trim();
@@ -58624,7 +58645,7 @@ function ImageFillField({
         selectedAsset && /* @__PURE__ */ jsx137("div", { className: "overflow-hidden rounded-xl border border-neutral-800 bg-neutral-900/80", children: /* @__PURE__ */ jsx137(
           "img",
           {
-            src: buildProjectApiPath(projectId, `/preview/${selectedAsset}`),
+            src: buildProjectApiPath(projectId, `/preview/${encodeUrlPath3(selectedAsset)}`),
             alt: selectedAsset.split("/").pop() ?? selectedAsset,
             className: "h-28 w-full object-contain bg-neutral-950/80"
           }
@@ -67090,8 +67111,8 @@ function FlatMediaSection({
   const [removeProgress, setRemoveProgress] = useState94(null);
   const [createPlate, setCreatePlate] = useState94(false);
   const [quality, setQuality] = useState94("balanced");
-  const absoluteSrc = projectDir && srcAttr && !srcAttr.startsWith("http") ? `${projectDir}/${srcAttr}` : srcAttr;
-  const projectSrc = srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr) ? stripQueryAndHash(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr) : "";
+  const projectSrc = srcAttr && !/^(?:https?:|data:|blob:)/i.test(srcAttr) ? authoredSrcPath(srcAttr.startsWith("./") ? srcAttr.slice(2) : srcAttr) : "";
+  const absoluteSrc = projectDir && projectSrc ? `${projectDir}/${projectSrc}` : srcAttr;
   const canRemoveBackground = Boolean(onRemoveBackground && isVisualMedia && projectSrc);
   useEffect94(() => {
     setRemoveProgress(null);
@@ -75118,6 +75139,7 @@ import { useState as useState117, useCallback as useCallback104, useRef as useRe
 
 // src/hooks/useFileTree.ts
 import { useState as useState116, useCallback as useCallback101, useEffect as useEffect113, useMemo as useMemo71, useRef as useRef128 } from "react";
+import { encodeUrlPath as encodeUrlPath4 } from "@hyperframes/parsers";
 var EMPTY_FILE_LIST = [];
 function useFileTree({ projectId, projectIdRef }) {
   const [fetched, setFetched] = useState116(null);
@@ -75189,7 +75211,7 @@ function useFileTree({ projectId, projectIdRef }) {
     () => (projectId ? assets : []).filter((asset) => FONT_EXT.test(asset)).map((asset) => ({
       family: fontFamilyFromAssetPath(asset),
       path: asset,
-      url: projectId ? buildProjectApiPath(projectId, `/preview/${asset}`) : ""
+      url: projectId ? buildProjectApiPath(projectId, `/preview/${encodeUrlPath4(asset)}`) : ""
     })),
     [assets, projectId]
   );
@@ -75454,6 +75476,7 @@ function useProjectFileWriter({ projectId }) {
 }
 
 // src/hooks/useFileManager.ts
+import { encodeUrlPath as encodeUrlPath5 } from "@hyperframes/parsers";
 function useFileManager({
   projectId,
   showToast,
@@ -75763,7 +75786,7 @@ function useFileManager({
       const imported = uploaded.filter((asset) => FONT_EXT.test(asset)).map((asset) => ({
         family: fontFamilyFromAssetPath(asset),
         path: asset,
-        url: `/api/projects/${encodeURIComponent(pid)}/preview/${asset}`
+        url: `/api/projects/${encodeURIComponent(pid)}/preview/${encodeUrlPath5(asset)}`
       }));
       importedFontAssetsRef.current = [
         ...imported,
@@ -81799,6 +81822,7 @@ function useDomGeometryCommits({
 }
 
 // src/hooks/useDomEditCommits.ts
+import { encodeUrlPath as encodeUrlPath6 } from "@hyperframes/parsers";
 function useDomEditCommits({
   activeCompPath,
   previewIframeRef,
@@ -81837,7 +81861,7 @@ function useDomEditCommits({
       return {
         family: fontFamilyFromAssetPath(asset),
         path: asset,
-        url: buildProjectApiPath(projectId, `/preview/${asset}`)
+        url: buildProjectApiPath(projectId, `/preview/${encodeUrlPath6(asset)}`)
       };
     },
     [fileTree, projectId, importedFontAssetsRef]
@@ -84815,6 +84839,9 @@ function tweenUsesScaleLonghands(anim) {
   );
   return inKeyframes || Object.keys(anim?.properties ?? {}).some(isLonghand);
 }
+function rectCentre(rect) {
+  return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
+}
 async function tryGsapResizeIntercept(selection, size, animations, iframe, commitMutation, fetchFallbackAnimations, dragOffset, draw = (run) => run(), stamp) {
   const moment = editMoment(stamp);
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
@@ -84929,8 +84956,7 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
     scaleDraftEl = el;
     committedScale = useScaleLonghands ? { x: newScaleX, y: newScaleY } : { x: newScaleX, y: newScaleX };
     if (el) {
-      const dropRect = draw(() => el.getBoundingClientRect());
-      scaleDraftDropPoint = { x: dropRect.x, y: dropRect.y };
+      scaleDraftDropPoint = draw(() => rectCentre(el.getBoundingClientRect()));
     }
   } else {
     resizeProps = {
@@ -84961,31 +84987,31 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       );
       const base3 = { x: baseGsapX, y: baseGsapY };
       setElementGsapPosition(draftEl, base3.x, base3.y);
-      const post2 = draftEl.getBoundingClientRect();
-      const residual = { x: dropPoint.x - post2.x, y: dropPoint.y - post2.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: base3 });
-        return "settled";
-      }
+      const post2 = rectCentre(draftEl.getBoundingClientRect());
+      const residual2 = { x: dropPoint.x - post2.x, y: dropPoint.y - post2.y };
+      if (!Number.isFinite(residual2.x) || !Number.isFinite(residual2.y)) return null;
       const corrected2 = {
-        x: roundTo3(base3.x + residual.x),
-        y: roundTo3(base3.y + residual.y)
+        x: roundTo3(base3.x + residual2.x),
+        y: roundTo3(base3.y + residual2.y)
       };
+      if (corrected2.x === roundTo3(base3.x) && corrected2.y === roundTo3(base3.y)) {
+        logResize("scale-finalize", { skipped: "already-on-drop-point", residual: residual2, base: base3 });
+        return "settled";
+      }
       logResize("scale-finalize", {
         dropPoint,
-        post: { x: post2.x, y: post2.y },
-        residual,
+        post: post2,
+        residual: residual2,
         gsapPos,
         base: base3,
         corrected: corrected2
       });
       setElementGsapPosition(draftEl, corrected2.x, corrected2.y);
-      return { base: base3, corrected: corrected2 };
+      return { base: base3, corrected: corrected2, residual: residual2 };
     });
     if (measured === null) return false;
     if (measured === "settled") return true;
-    const { base: base2, corrected } = measured;
+    const { base: base2, corrected, residual } = measured;
     const currentAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : resolved2?.animations ?? animations;
     const delta = { x: corrected.x - base2.x, y: corrected.y - base2.y };
     const positionTween = pickClosestToPlayhead(
@@ -84995,6 +85021,10 @@ async function tryGsapResizeIntercept(selection, size, animations, iframe, commi
       moment.time
     );
     if (positionTween) {
+      if (Math.abs(residual.x) < 0.5 && Math.abs(residual.y) < 0.5) {
+        draw(() => setElementGsapPosition(draftEl, base2.x, base2.y));
+        return true;
+      }
       logResize("scale-finalize", { route: "position-keyframe", tweenId: positionTween.id });
       assertGsapEditPersisted(
         await commitGsapPositionFromDrag(selection, positionTween, delta, base2, iframe, {
@@ -91352,6 +91382,7 @@ import { memo as memo50, useCallback as useCallback171 } from "react";
 
 // src/components/MediaPreview.tsx
 import { useState as useState136 } from "react";
+import { encodeUrlPath as encodeUrlPath7 } from "@hyperframes/parsers";
 import { jsx as jsx212, jsxs as jsxs166 } from "react/jsx-runtime";
 function MediaErrorPanel({ name, filePath }) {
   return /* @__PURE__ */ jsxs166("div", { className: "flex flex-col items-center justify-center h-full p-4 bg-neutral-950 gap-2", children: [
@@ -91379,7 +91410,7 @@ function MediaErrorPanel({ name, filePath }) {
   ] });
 }
 function MediaPreview({ projectId, filePath }) {
-  const serveUrl = buildProjectApiPath(projectId, `/preview/${filePath}`);
+  const serveUrl = buildProjectApiPath(projectId, `/preview/${encodeUrlPath7(filePath)}`);
   const name = filePath.split("/").pop() ?? filePath;
   const [failedPath, setFailedPath] = useState136(null);
   const failed2 = failedPath === filePath;