hyperframes 0.8.92 → 0.8.94

package/dist/{chunk-LNYBSC5Z.js → chunk-QKKGOE4B.js}

@@ -23,7 +23,7 @@ import {
   shouldClampResolvedMediaDuration,
   stripEmbeddedRuntimeScripts,
   warnUnknownEnumValues
-} from "./chunk-WNYPPH3Y.js";
+} from "./chunk-ZEBQBMB2.js";
 import {
   cssVariableName
 } from "./chunk-VC76R6W2.js";
@@ -317,6 +317,122 @@ import { transformSync } from "esbuild";
 
 // ../core/dist/compiler/compositionScoping.js
 import postcss from "postcss";
+
+// ../core/dist/compiler/selectorIdTokens.js
+function isNameChar(char) {
+  if (!char)
+    return false;
+  return /[\w-]/.test(char) || char.charCodeAt(0) >= 128;
+}
+function isCssWhitespace(char) {
+  return char === " " || char === "	" || char === "\n" || char === "\r" || char === "\f";
+}
+var HEX_ESCAPE_RE = /^[0-9a-fA-F]{1,6}/;
+function sanitizeCodePoint(codePoint) {
+  const isSurrogate = codePoint >= 55296 && codePoint <= 57343;
+  return codePoint === 0 || codePoint > 1114111 || isSurrogate ? 65533 : codePoint;
+}
+function skipEscapeWhitespace(text, index) {
+  if (text[index] === "\r" && text[index + 1] === "\n")
+    return index + 2;
+  return isCssWhitespace(text[index]) ? index + 1 : index;
+}
+function consumeCssEscape(text, index) {
+  const next = text[index + 1];
+  if (next === void 0 || next === "\n")
+    return null;
+  const hex = HEX_ESCAPE_RE.exec(text.slice(index + 1, index + 7));
+  if (!hex)
+    return { value: next, end: index + 2 };
+  const codePoint = sanitizeCodePoint(Number.parseInt(hex[0], 16));
+  return {
+    value: String.fromCodePoint(codePoint),
+    end: skipEscapeWhitespace(text, index + 1 + hex[0].length)
+  };
+}
+function decodeCssIdentifierAt(text, start) {
+  let index = start;
+  let value = "";
+  while (index < text.length) {
+    const char = text[index];
+    if (char === "\\") {
+      const escape = consumeCssEscape(text, index);
+      if (!escape)
+        break;
+      value += escape.value;
+      index = escape.end;
+      continue;
+    }
+    if (!isNameChar(char))
+      break;
+    value += char;
+    index += 1;
+  }
+  return index === start ? null : { value, end: index };
+}
+var CODE_UNIT_HYPHEN = 45;
+function isDigitCodeUnit(codeUnit) {
+  return codeUnit >= 48 && codeUnit <= 57;
+}
+function isPlainNameCodeUnit(codeUnit) {
+  return codeUnit >= 128 || codeUnit === CODE_UNIT_HYPHEN || codeUnit === 95 || isDigitCodeUnit(codeUnit) || codeUnit >= 65 && codeUnit <= 90 || codeUnit >= 97 && codeUnit <= 122;
+}
+function needsHexEscape(value, index) {
+  const codeUnit = value.charCodeAt(index);
+  if (codeUnit >= 1 && codeUnit <= 31 || codeUnit === 127)
+    return true;
+  if (!isDigitCodeUnit(codeUnit))
+    return false;
+  return index === 0 || index === 1 && value.charCodeAt(0) === CODE_UNIT_HYPHEN;
+}
+function escapeCssIdentifier(value) {
+  let result = "";
+  for (let index = 0; index < value.length; index += 1) {
+    const codeUnit = value.charCodeAt(index);
+    const char = value[index];
+    if (codeUnit === 0)
+      result += "\uFFFD";
+    else if (needsHexEscape(value, index))
+      result += `\\${codeUnit.toString(16)} `;
+    else if (index === 0 && value.length === 1 && codeUnit === CODE_UNIT_HYPHEN)
+      result += `\\${char}`;
+    else if (isPlainNameCodeUnit(codeUnit))
+      result += char;
+    else
+      result += `\\${char}`;
+  }
+  return result;
+}
+var GUARDED_SELECTOR_SEGMENT_RE = /\\(?:[0-9a-fA-F]{1,6}(?:\r\n|[ \t\r\n\f])?|[\s\S])|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|\[(?:"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|[^\]"'])*\]/g;
+function markUnguardedOffsets(selector) {
+  const mask = new Array(selector.length).fill(true);
+  for (const match of selector.matchAll(GUARDED_SELECTOR_SEGMENT_RE)) {
+    const start = match.index;
+    mask.fill(false, start, start + match[0].length);
+  }
+  return mask;
+}
+function replaceSelectorIdTokens(selector, candidateIds, resolveReplacement) {
+  if (candidateIds.length === 0 || !selector.includes("#"))
+    return selector;
+  const candidates = new Set(candidateIds);
+  const unguarded = markUnguardedOffsets(selector);
+  let result = "";
+  let index = 0;
+  while (index < selector.length) {
+    const token = unguarded[index] && selector[index] === "#" ? decodeCssIdentifierAt(selector, index + 1) : null;
+    if (token && candidates.has(token.value)) {
+      result += resolveReplacement(token.value);
+      index = token.end;
+    } else {
+      result += selector[index];
+      index += 1;
+    }
+  }
+  return result;
+}
+
+// ../core/dist/compiler/compositionScoping.js
 var AUTHORED_ROOT_ID_ATTR = "data-hf-authored-id";
 var INNER_ROOT_ATTR = "data-hf-inner-root";
 function escapeRegExp(value) {
@@ -325,67 +441,15 @@ function escapeRegExp(value) {
 function escapeCssAttributeValue(value) {
   return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
 }
-function escapeCssIdentifier(value) {
-  if (!value)
-    return value;
-  const escaped = value.replace(/[^a-zA-Z0-9_-]/g, (char) => `\\${char}`);
-  return escaped.replace(/^-?\d/, (match) => `\\${match}`);
-}
 function getAuthoredRootIdSelectorForms(authoredRootId) {
   const trimmed = authoredRootId.trim();
   if (!trimmed)
     return [];
   return Array.from(/* @__PURE__ */ new Set([trimmed, escapeCssIdentifier(trimmed)])).filter(Boolean);
 }
-function isSelectorNameChar(char) {
-  return !!char && /[\w-]/.test(char);
-}
 function replaceAuthoredRootIdSelectors(selector, authoredRootId, replacement) {
-  const forms = getAuthoredRootIdSelectorForms(authoredRootId).sort((a, b) => b.length - a.length);
-  if (forms.length === 0)
-    return selector;
-  let result = "";
-  let bracketDepth = 0;
-  let quote = null;
-  for (let index = 0; index < selector.length; index += 1) {
-    const char = selector[index];
-    const previousChar = index > 0 ? selector[index - 1] : "";
-    if (quote) {
-      result += char;
-      if (char === quote && previousChar !== "\\") {
-        quote = null;
-      }
-      continue;
-    }
-    if (char === '"' || char === "'") {
-      quote = char;
-      result += char;
-      continue;
-    }
-    if (char === "[") {
-      bracketDepth += 1;
-      result += char;
-      continue;
-    }
-    if (char === "]") {
-      bracketDepth = Math.max(0, bracketDepth - 1);
-      result += char;
-      continue;
-    }
-    if (char === "#" && bracketDepth === 0) {
-      const matchedForm = forms.find((form) => selector.startsWith(form, index + 1));
-      if (matchedForm) {
-        const nextChar = selector[index + 1 + matchedForm.length];
-        if (!isSelectorNameChar(nextChar)) {
-          result += replacement;
-          index += matchedForm.length;
-          continue;
-        }
-      }
-    }
-    result += char;
-  }
-  return result;
+  const forms = getAuthoredRootIdSelectorForms(authoredRootId);
+  return replaceSelectorIdTokens(selector, forms, () => replacement);
 }
 function normalizeAuthoredRootIdSelector(selector, authoredRootId) {
   const trimmed = authoredRootId?.trim();
@@ -532,6 +596,7 @@ function scopedModulePrelude(timelineCompositionId, compositionSrc) {
   return `const __hyperframes = (function(__hfBaseHyperframes, __hfTimelineCompId, __hfCompositionSrc) {
   return ${SCOPED_HYPERFRAMES_EXPRESSION};
 })(window.__hyperframes, ${jsonScriptLiteral(timelineCompositionId)}, ${jsonScriptLiteral(compositionSrc?.trim() || null)});
+${wrapScopedCompositionScript("", timelineCompositionId)}
 `;
 }
 function wrapScopedCompositionScript(source, compositionId, errorLabel = "[HyperFrames] composition script error:", scopeSelectorOverride, timelineCompositionId = compositionId, authoredRootId, compositionSrc) {
@@ -543,7 +608,6 @@ function wrapScopedCompositionScript(source, compositionId, errorLabel = "[Hyper
   const scopeSelectorLiteral = jsonScriptLiteral(scopeSelectorOverride ?? null);
   const rootSelectorPatternLiteral = jsonScriptLiteral(String.raw`\[\s*data-composition-id\s*=\s*(?:"${escapedCompositionId}"|'${escapedCompositionId}')\s*\]`);
   const timingSelectorPatternLiteral = jsonScriptLiteral(String.raw`\s*\[\s*data-(?:start|duration)\s*=\s*(?:"[^"]*"|'[^']*')\s*\]`);
-  const authoredRootIdFormsLiteral = jsonScriptLiteral(getAuthoredRootIdSelectorForms(authoredRootId?.trim() || ""));
   return `(function(){
   var __hfCompId = ${compositionIdLiteral};
   var __hfTimelineCompId = ${timelineCompositionIdLiteral};
@@ -560,15 +624,19 @@ function wrapScopedCompositionScript(source, compositionId, errorLabel = "[Hyper
   var __hfRoot = null;
   var __hfRootSelectorPattern = ${rootSelectorPatternLiteral};
   var __hfTimingSelectorPattern = ${timingSelectorPatternLiteral};
-  var __hfAuthoredRootIdForms = ${authoredRootIdFormsLiteral};
   var __hfAuthoredRootSelector = __hfAuthoredRootId
     ? "[" + __hfAuthoredRootAttr + '="' + __hfEscapeAttr(__hfAuthoredRootId) + '"]'
     : "";
-  var __hfIsSelectorNameChar = function(char) {
-    return !!char && /[\\w-]/.test(char);
+  var __hfCssEscape = function(value) {
+    var text = value + "";
+    if (typeof CSS !== "undefined" && CSS && typeof CSS.escape === "function") {
+      try { return CSS.escape(text); } catch {}
+    }
+    return text.replace(/[^a-zA-Z0-9_-]/g, function(char) { return "\\\\" + char; });
   };
-  var __hfReplaceAuthoredRootIdSelectors = function(selector) {
-    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== "string") {
+  // Decode complete CSS identifiers before comparing authored ids.
+  var __hfRewriteIdSelectors = function(selector, entries) {
+    if (!entries || !entries.length || typeof selector !== "string" || selector.indexOf("#") === -1) {
       return selector;
     }
     var result = "";
@@ -576,10 +644,17 @@ function wrapScopedCompositionScript(source, compositionId, errorLabel = "[Hyper
     var quote = null;
     for (var index = 0; index < selector.length; index += 1) {
       var char = selector[index];
-      var previousChar = index > 0 ? selector[index - 1] : "";
+      if (char === "\\\\") {
+        var escape = selector.slice(index).match(/^\\\\(?:[0-9a-fA-F]{1,6}(?:\\r\\n|[ \\t\\r\\n\\f])?|[\\s\\S])/);
+        if (escape) {
+          result += escape[0];
+          index += escape[0].length - 1;
+          continue;
+        }
+      }
       if (quote) {
         result += char;
-        if (char === quote && previousChar !== "\\\\") {
+        if (char === quote) {
           quote = null;
         }
         continue;
@@ -600,36 +675,83 @@ function wrapScopedCompositionScript(source, compositionId, errorLabel = "[Hyper
         continue;
       }
       if (char === "#" && bracketDepth === 0) {
-        var matchedForm = null;
-        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {
-          var form = __hfAuthoredRootIdForms[formIndex];
-          if (selector.slice(index + 1, index + 1 + form.length) === form) {
-            matchedForm = form;
-            break;
-          }
-        }
-        if (matchedForm) {
-          var nextChar = selector[index + 1 + matchedForm.length];
-          if (!__hfIsSelectorNameChar(nextChar)) {
-            result += __hfAuthoredRootSelector;
-            index += matchedForm.length;
-            continue;
-          }
+        var token = selector.slice(index + 1).match(/^(?:[\\w\\u0080-\\uffff-]|\\\\(?:[0-9a-fA-F]{1,6}(?:\\r\\n|[ \\t\\r\\n\\f])?|[^\\r\\n\\f]))+/);
+        if (token) {
+          var decoded = token[0].replace(/\\\\([0-9a-fA-F]{1,6})(?:\\r\\n|[ \\t\\r\\n\\f])?|\\\\([^\\r\\n\\f])/g, function(_, hex, escaped) {
+            if (!hex) return escaped;
+            var code = parseInt(hex, 16);
+            return String.fromCodePoint(!code || code > 0x10ffff || (code >= 0xd800 && code <= 0xdfff) ? 0xfffd : code);
+          });
+          var matched = entries.find(function(entry) { return entry.id === decoded; });
+          result += matched ? matched.replacement : "#" + token[0];
+          index += token[0].length;
+          continue;
         }
       }
       result += char;
     }
     return result;
   };
+  var __hfAuthoredRootEntries = __hfAuthoredRootSelector
+    ? [{ id: __hfAuthoredRootId, replacement: __hfAuthoredRootSelector }]
+    : [];
+  // Include both renamed and untouched instances. Each wrapper refreshes this
+  // document-wide cache because preview scene swaps can introduce new ids.
+  var __hfRenamedIdEntries = function() {
+    if (window.__hfRenamedIdSelectorEntries) return window.__hfRenamedIdSelectorEntries;
+    var entries = [];
+    var seen = Object.create(null);
+    var nodes;
+    try {
+      nodes = window.document.querySelectorAll("[" + __hfAuthoredRootAttr + "][id]");
+    } catch {
+      nodes = [];
+    }
+    for (var i = 0; i < nodes.length; i += 1) {
+      var authored = nodes[i].getAttribute(__hfAuthoredRootAttr);
+      if (!authored || seen[authored] || authored === nodes[i].id) continue;
+      seen[authored] = true;
+      var escaped = __hfCssEscape(authored);
+      entries.push({
+        id: authored,
+        replacement: ":is(#" + escaped + ", [" + __hfAuthoredRootAttr + '="' + __hfEscapeAttr(authored) + '"])',
+      });
+    }
+    window.__hfRenamedIdSelectorEntries = entries;
+    return window.__hfRenamedIdSelectorEntries;
+  };
+  // element.querySelector("#authored") on an arbitrary Element never passes
+  // through the scoped document proxy, so the same rewrite is installed once
+  // per document on Element.prototype \u2014 only when at least one id was
+  // actually renamed, so a document without collisions runs untouched
+  // natives. Document.prototype is deliberately NOT patched: an unscoped
+  // document-wide lookup cannot know which instance it means, and rewriting
+  // it would only widen the ambiguity.
+  var __hfInstallRenamedIdSelectorShim = function() {
+    if (window.__hfRenamedIdSelectorShim) return;
+    var entries = __hfRenamedIdEntries();
+    if (!entries.length) return;
+    var proto = window.Element && window.Element.prototype;
+    if (!proto || typeof proto.querySelector !== "function" || typeof proto.querySelectorAll !== "function") {
+      return;
+    }
+    var nativeQuerySelector = proto.querySelector;
+    var nativeQuerySelectorAll = proto.querySelectorAll;
+    proto.querySelector = function(selector) {
+      return nativeQuerySelector.call(this, __hfRewriteIdSelectors(selector, __hfRenamedIdEntries()));
+    };
+    proto.querySelectorAll = function(selector) {
+      return nativeQuerySelectorAll.call(this, __hfRewriteIdSelectors(selector, __hfRenamedIdEntries()));
+    };
+    window.__hfRenamedIdSelectorShim = true;
+  };
   var __hfNormalizeSelector = function(selector) {
     if (!__hfCompId || typeof selector !== "string") return selector;
     var normalized = selector
       .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)
       .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);
-    if (__hfAuthoredRootSelector) {
-      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);
-    }
-    return normalized;
+    normalized = __hfRewriteIdSelectors(normalized, __hfAuthoredRootEntries);
+    return __hfRewriteIdSelectors(normalized, __hfRenamedIdEntries());
   };
   var __hfFindRoot = function() {
     if (!__hfRoot && __hfRootSelector) {
@@ -779,6 +901,7 @@ function wrapScopedCompositionScript(source, compositionId, errorLabel = "[Hyper
       resolved.push(item);
       return resolved;
     }, []);
+
   };
   var __hfScopeTimeline = function(timeline) {
     if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;
@@ -891,6 +1014,8 @@ ${source.replace(/<\/(script)/gi, "<\\/$1")}
     });
   };
   __hfFindRoot();
+  window.__hfRenamedIdSelectorEntries = null;
+  __hfInstallRenamedIdSelectorShim();
   __hfRecordAnimations(__hfRun);
 })();`;
 }
@@ -925,6 +1050,260 @@ async function validateHyperframeHtmlContract(html) {
   return { isValid: false, missingKeys, failureReason };
 }
 
+// ../core/dist/compiler/svgIdNamespacing.js
+import postcss2 from "postcss";
+var ID_ATTR = "id";
+var SVG_AUTHORED_ID_ATTR = "data-hf-authored-id";
+var URL_HASH_REF_RE = /(url\(\s*)(["']?)#([^"')\s]+)\2(\s*\))/gi;
+function isHrefAttrName(name) {
+  return name === "href" || name.endsWith(":href");
+}
+function sanitizeNamespaceSegment(value) {
+  return value.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+function rewriteUrlHashRefs(value, idMap) {
+  if (!value || !value.toLowerCase().includes("url("))
+    return value;
+  return value.replace(URL_HASH_REF_RE, (full, pre, quote, id, post) => {
+    const mapped = idMap.get(id);
+    return mapped ? `${pre}${quote}#${mapped}${quote}${post}` : full;
+  });
+}
+function rewriteHrefValue(value, idMap) {
+  if (!value.startsWith("#"))
+    return null;
+  const mapped = idMap.get(value.slice(1));
+  return mapped ? `#${mapped}` : null;
+}
+function rewriteElementIdReferences(el, idMap) {
+  const attrs = el.attributes ? Array.from(el.attributes) : [];
+  for (const attr of attrs) {
+    const { name, value } = attr;
+    if (!value)
+      continue;
+    if (isHrefAttrName(name)) {
+      const rewritten = rewriteHrefValue(value, idMap);
+      if (rewritten) {
+        el.setAttribute(name, rewritten);
+        continue;
+      }
+    }
+    if (value.toLowerCase().includes("url(")) {
+      const rewritten = rewriteUrlHashRefs(value, idMap);
+      if (rewritten !== value)
+        el.setAttribute(name, rewritten);
+    }
+  }
+}
+function collectUrlHashRefsFromText(text, filter, out) {
+  let m;
+  URL_HASH_REF_RE.lastIndex = 0;
+  while (m = URL_HASH_REF_RE.exec(text)) {
+    const refId = m[3];
+    if (filter.has(refId))
+      out.add(refId);
+  }
+}
+function collectHrefFragmentRef(attr, filter, out) {
+  if (isHrefAttrName(attr.name) && attr.value.startsWith("#")) {
+    const id = attr.value.slice(1);
+    if (filter.has(id))
+      out.add(id);
+  }
+}
+function collectNativelyReferencedIds(elements, cssTexts, svgIds) {
+  const referenced = /* @__PURE__ */ new Set();
+  for (const el of elements) {
+    for (const attr of el.attributes ? Array.from(el.attributes) : []) {
+      if (!attr.value)
+        continue;
+      collectHrefFragmentRef(attr, svgIds, referenced);
+      if (attr.value.toLowerCase().includes("url("))
+        collectUrlHashRefsFromText(attr.value, svgIds, referenced);
+    }
+  }
+  for (const text of cssTexts) {
+    if (text.toLowerCase().includes("url("))
+      collectUrlHashRefsFromText(text, svgIds, referenced);
+  }
+  return referenced;
+}
+function isExcluded(el, exclude) {
+  return exclude.some((excluded) => excluded === el || excluded.contains(el));
+}
+function collectScopeElements(scope) {
+  const exclude = scope.exclude ?? [];
+  const descendants = [...scope.root.querySelectorAll("*")];
+  const own = exclude.length ? descendants.filter((el) => !isExcluded(el, exclude)) : descendants;
+  return [scope.root, ...own];
+}
+function collectSvgIdElements(scope) {
+  const exclude = scope.exclude ?? [];
+  const matches = [...scope.root.querySelectorAll("svg [id], svg[id]")];
+  return exclude.length ? matches.filter((el) => !isExcluded(el, exclude)) : matches;
+}
+function resolveScope(scope) {
+  const elements = collectScopeElements(scope);
+  const renamable = /* @__PURE__ */ new Set();
+  if (!scope.namespace)
+    return { elements, renamable };
+  const svgIdElements = collectSvgIdElements(scope);
+  const svgIds = /* @__PURE__ */ new Set();
+  for (const el of svgIdElements) {
+    const id = el.getAttribute(ID_ATTR);
+    if (id)
+      svgIds.add(id);
+  }
+  if (svgIds.size === 0)
+    return { elements, renamable };
+  const nativelyReferenced = collectNativelyReferencedIds(elements, scope.cssTexts ?? [], svgIds);
+  for (const el of svgIdElements) {
+    const id = el.getAttribute(ID_ATTR);
+    if (id && nativelyReferenced.has(id))
+      renamable.add(el);
+  }
+  return { elements, renamable };
+}
+function buildIdCensus(document) {
+  const elementsById = /* @__PURE__ */ new Map();
+  const usedIds = /* @__PURE__ */ new Set();
+  for (const el of document.querySelectorAll("[id]")) {
+    const id = el.getAttribute(ID_ATTR);
+    if (!id)
+      continue;
+    usedIds.add(id);
+    const list = elementsById.get(id);
+    if (list)
+      list.push(el);
+    else
+      elementsById.set(id, [el]);
+  }
+  return { elementsById, usedIds };
+}
+function hasAnyCollision(census) {
+  for (const elements of census.elementsById.values()) {
+    if (elements.length > 1)
+      return true;
+  }
+  return false;
+}
+function mintNamespacedId(namespace, originalId, usedIds) {
+  const base = `${sanitizeNamespaceSegment(namespace)}--${originalId}`;
+  let candidate = base;
+  for (let n = 2; usedIds.has(candidate); n += 1)
+    candidate = `${base}-${n}`;
+  usedIds.add(candidate);
+  return candidate;
+}
+function planRenames(census, scopes, scopeIndexByRenamable) {
+  const idMaps = scopes.map(() => /* @__PURE__ */ new Map());
+  for (const [id, elements] of census.elementsById) {
+    if (elements.length < 2)
+      continue;
+    const keeper = elements.find((el) => !scopeIndexByRenamable.has(el)) ?? elements[0];
+    for (const el of elements) {
+      if (el === keeper)
+        continue;
+      const scopeIndex = scopeIndexByRenamable.get(el);
+      if (scopeIndex === void 0)
+        continue;
+      const idMap = idMaps[scopeIndex];
+      if (!idMap.has(id)) {
+        idMap.set(id, mintNamespacedId(scopes[scopeIndex].namespace, id, census.usedIds));
+      }
+    }
+  }
+  return idMaps;
+}
+function applyRenames(resolved, idMap) {
+  for (const el of resolved.elements) {
+    const currentId = el.getAttribute(ID_ATTR);
+    if (currentId && resolved.renamable.has(el) && idMap.has(currentId)) {
+      if (!el.hasAttribute(SVG_AUTHORED_ID_ATTR))
+        el.setAttribute(SVG_AUTHORED_ID_ATTR, currentId);
+      el.setAttribute(ID_ATTR, idMap.get(currentId));
+    }
+    rewriteElementIdReferences(el, idMap);
+  }
+}
+function namespaceCollidingSvgIds(document, scopes) {
+  const untouched = scopes.map(() => /* @__PURE__ */ new Map());
+  if (scopes.length === 0)
+    return untouched;
+  const census = buildIdCensus(document);
+  if (!hasAnyCollision(census))
+    return untouched;
+  const resolved = scopes.map(resolveScope);
+  const scopeIndexByRenamable = /* @__PURE__ */ new Map();
+  resolved.forEach(({ renamable }, index) => {
+    for (const el of renamable)
+      scopeIndexByRenamable.set(el, index);
+  });
+  if (scopeIndexByRenamable.size === 0)
+    return untouched;
+  const idMaps = planRenames(census, scopes, scopeIndexByRenamable);
+  const referenceMaps = resolved.map((scope, index) => {
+    const references = new Map(idMaps[index]);
+    const localIds = new Set(scope.elements.map((el) => el.getAttribute(ID_ATTR)));
+    for (const [id, elements] of census.elementsById) {
+      if (localIds.has(id))
+        continue;
+      const targetScope = scopeIndexByRenamable.get(elements[0]);
+      if (targetScope === void 0)
+        continue;
+      const mapped = idMaps[targetScope].get(id);
+      if (mapped)
+        references.set(id, mapped);
+    }
+    return references;
+  });
+  referenceMaps.forEach((idMap, index) => {
+    if (idMap.size > 0)
+      applyRenames(resolved[index], idMap);
+  });
+  return referenceMaps;
+}
+function renameIdTokensInSelector(selector, idMap) {
+  return replaceSelectorIdTokens(selector, [...idMap.keys()], (matchedId) => `#${escapeCssIdentifier(idMap.get(matchedId))}`);
+}
+function rewriteSvgIdReferencesInCss(css, idMap) {
+  if (!css || idMap.size === 0)
+    return css;
+  if (!css.includes("#") && !css.toLowerCase().includes("url("))
+    return css;
+  let root;
+  try {
+    root = postcss2.parse(css);
+  } catch {
+    return css;
+  }
+  let mutated = false;
+  root.walkRules((rule) => {
+    const rewritten = rule.selectors.map((selector) => renameIdTokensInSelector(selector, idMap));
+    if (rewritten.some((selector, index) => selector !== rule.selectors[index])) {
+      rule.selectors = rewritten;
+      mutated = true;
+    }
+  });
+  root.walkDecls((decl) => {
+    const rewritten = rewriteUrlHashRefs(decl.value, idMap);
+    if (rewritten !== decl.value) {
+      decl.value = rewritten;
+      mutated = true;
+    }
+  });
+  root.walkAtRules((atRule) => {
+    if (!atRule.params)
+      return;
+    const rewritten = rewriteUrlHashRefs(atRule.params, idMap);
+    if (rewritten !== atRule.params) {
+      atRule.params = rewritten;
+      mutated = true;
+    }
+  });
+  return mutated ? root.toResult({ map: false }).css : css;
+}
+
 // ../core/dist/compiler/compositionAssembly.js
 var COMPOSITION_ID_ATTR = "data-composition-id";
 var COMPOSITION_SRC_ATTR = "data-composition-src";
@@ -1060,6 +1439,7 @@ function inlineSubCompositions(document, hosts, options) {
   const moduleScripts = [];
   const externalLinks = [];
   const variablesByComp = {};
+  const svgIdScopes = [];
   const sceneHosts = /* @__PURE__ */ new Map();
   const queue = hosts.map((element) => ({
     element,
@@ -1159,6 +1539,7 @@ function inlineSubCompositions(document, hosts, options) {
         externalLinks.push({ href, rel, crossorigin, media, title, type, disabled });
       }
     }
+    const styleStart = styles.length;
     for (const styleEl of plan.styleSources) {
       if (cssStyleMergeKey(styleEl) === void 0)
         continue;
@@ -1167,6 +1548,7 @@ function inlineSubCompositions(document, hosts, options) {
         styleScenes.push(scene);
       styleEl.remove();
     }
+    const styleEnd = styles.length;
     for (const scriptEl of plan.scriptSources) {
       const externalSrc = resolveSubAssetPath(scriptEl.getAttribute("src"));
       const type = (scriptEl.getAttribute("type") || "").trim().toLowerCase();
@@ -1258,7 +1640,28 @@ function inlineSubCompositions(document, hosts, options) {
     for (const nestedHost of nested.hosts) {
       queue.push({ element: nestedHost.host, ancestry: nestedAncestry, scene });
     }
+    svgIdScopes.push({
+      root: hostEl,
+      namespace: runtimeCompId || scopeCompId,
+      exclude: nested.hosts.map((nestedHost) => nestedHost.host),
+      styleStart,
+      styleEnd
+    });
   }
+  const svgIdMaps = namespaceCollidingSvgIds(document, svgIdScopes.map(({ root, namespace, exclude, styleStart, styleEnd }) => ({
+    root,
+    namespace,
+    exclude,
+    cssTexts: styles.slice(styleStart, styleEnd).map((style) => style.css)
+  })));
+  svgIdMaps.forEach((idMap, index) => {
+    if (idMap.size === 0)
+      return;
+    const { styleStart, styleEnd } = svgIdScopes[index];
+    for (let i = styleStart; i < styleEnd; i += 1) {
+      styles[i].css = rewriteSvgIdReferencesInCss(styles[i].css, idMap);
+    }
+  });
   return {
     styles,
     styleScenes,