@hyperframes/studio 0.8.142 → 0.8.143

package/dist/index.html

@@ -14,7 +14,7 @@
         document.documentElement.dataset.theme = "paper";
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-B-wffzRH.js"></script>
+    <script type="module" crossorigin src="/assets/index-J7jpL4pj.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-CVd4O6eH.css">
   </head>
   <body>

package/dist/index.js

@@ -3597,6 +3597,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 +3702,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") {
@@ -17143,17 +17144,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 +17231,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 +17240,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 +17249,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 +17258,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 +17280,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 +17335,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 +17348,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 +17391,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) {
@@ -21837,6 +21781,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 +21936,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 +25252,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 +25303,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 +25350,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 +25421,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 +26935,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);
@@ -32184,7 +32133,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;
@@ -52882,7 +52831,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 +52935,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 +54657,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 +55981,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 +58455,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 +58582,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 +67048,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 +75076,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 +75148,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 +75413,7 @@ function useProjectFileWriter({ projectId }) {
 }
 
 // src/hooks/useFileManager.ts
+import { encodeUrlPath as encodeUrlPath5 } from "@hyperframes/parsers";
 function useFileManager({
   projectId,
   showToast,
@@ -75763,7 +75723,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 +81759,7 @@ function useDomGeometryCommits({
 }
 
 // src/hooks/useDomEditCommits.ts
+import { encodeUrlPath as encodeUrlPath6 } from "@hyperframes/parsers";
 function useDomEditCommits({
   activeCompPath,
   previewIframeRef,
@@ -81837,7 +81798,7 @@ function useDomEditCommits({
       return {
         family: fontFamilyFromAssetPath(asset),
         path: asset,
-        url: buildProjectApiPath(projectId, `/preview/${asset}`)
+        url: buildProjectApiPath(projectId, `/preview/${encodeUrlPath6(asset)}`)
       };
     },
     [fileTree, projectId, importedFontAssetsRef]
@@ -91352,6 +91313,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 +91341,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;