@hyperframes/core 0.8.92 → 0.8.94

package/dist/compiler/selectorIdTokens.js

@@ -0,0 +1,195 @@
+/**
+ * Shared low-level scanner: walk a CSS selector and replace whole-token
+ * `#id` occurrences that sit outside quotes and attribute-selector brackets.
+ *
+ * Extracted from `compositionScoping.ts`'s authored-root-id rewrite (the
+ * original, single-id version of this scan) so `svgIdNamespacing.ts` can
+ * reuse the exact same quote/bracket-tracking logic for its many-id rewrite
+ * instead of a second, drifting copy of the same state machine.
+ *
+ * Split into two small passes rather than one branch-heavy loop: first mark
+ * which offsets are outside a quoted string or an attribute-selector
+ * bracket (`markUnguardedOffsets`), then walk the selector once more,
+ * consulting that mask, to actually splice in replacements
+ * (`replaceSelectorIdTokens`). Each pass stays simple enough to read at a
+ * glance instead of one function juggling both jobs.
+ *
+ * The `#id` token is read as a CSS identifier per CSS Syntax Level 3
+ * (`decodeCssIdentifierAt`): `\.`-style and `\HEX `-style escapes are
+ * decoded before the id is compared against the candidate list, so a
+ * stylesheet spelling `#fx\.1` matches the element whose raw `id` attribute
+ * is `fx.1`. Callers emit replacement selectors through
+ * `escapeCssIdentifier`, the inverse operation.
+ */
+/** Unescaped name code points: `[A-Za-z0-9_-]` plus any non-ASCII. */
+function isNameChar(char) {
+    if (!char)
+        return false;
+    return /[\w-]/.test(char) || char.charCodeAt(0) >= 0x80;
+}
+/** CSS whitespace as defined by CSS Syntax Level 3 (`\r\n` handled by the caller). */
+function isCssWhitespace(char) {
+    return char === " " || char === "\t" || char === "\n" || char === "\r" || char === "\f";
+}
+const HEX_ESCAPE_RE = /^[0-9a-fA-F]{1,6}/;
+/** Out-of-range and surrogate code points decode to U+FFFD, as the spec requires. */
+function sanitizeCodePoint(codePoint) {
+    const isSurrogate = codePoint >= 0xd800 && codePoint <= 0xdfff;
+    return codePoint === 0 || codePoint > 0x10ffff || isSurrogate ? 0xfffd : codePoint;
+}
+/** A hex escape swallows ONE following whitespace; `\r\n` counts as one. */
+function skipEscapeWhitespace(text, index) {
+    if (text[index] === "\r" && text[index + 1] === "\n")
+        return index + 2;
+    return isCssWhitespace(text[index]) ? index + 1 : index;
+}
+/**
+ * "Consume an escaped code point" (CSS Syntax Level 3) with `text[index]`
+ * being the backslash: 1-6 hex digits plus one optional trailing whitespace
+ * decode to that code point, any other non-newline character decodes to
+ * itself. Returns `null` for an invalid escape (trailing backslash or a
+ * backslash before a newline), which ends the identifier.
+ */
+function consumeCssEscape(text, index) {
+    const next = text[index + 1];
+    if (next === undefined || 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),
+    };
+}
+/**
+ * Read one CSS identifier starting at `start` and return its decoded value
+ * plus the offset just past it, or `null` when no identifier starts there.
+ * Follows the "consume an ident sequence" algorithm of CSS Syntax Level 3.
+ */
+export 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 };
+}
+const CODE_UNIT_HYPHEN = 0x2d;
+function isDigitCodeUnit(codeUnit) {
+    return codeUnit >= 0x30 && codeUnit <= 0x39;
+}
+/** Code units `CSS.escape` copies through verbatim: `[A-Za-z0-9_-]` and non-ASCII. */
+function isPlainNameCodeUnit(codeUnit) {
+    return (codeUnit >= 0x80 ||
+        codeUnit === CODE_UNIT_HYPHEN ||
+        codeUnit === 0x5f ||
+        isDigitCodeUnit(codeUnit) ||
+        (codeUnit >= 0x41 && codeUnit <= 0x5a) ||
+        (codeUnit >= 0x61 && codeUnit <= 0x7a));
+}
+/** Code units `CSS.escape` writes as a hex escape: control characters, and a
+ *  digit in a position where it would otherwise start a number. */
+function needsHexEscape(value, index) {
+    const codeUnit = value.charCodeAt(index);
+    if ((codeUnit >= 0x01 && codeUnit <= 0x1f) || codeUnit === 0x7f)
+        return true;
+    if (!isDigitCodeUnit(codeUnit))
+        return false;
+    return index === 0 || (index === 1 && value.charCodeAt(0) === CODE_UNIT_HYPHEN);
+}
+/**
+ * Serialize `value` as a CSS identifier — the `CSS.escape()` algorithm from
+ * CSSOM, implemented here because Node has no `CSS` global. Every output is
+ * a valid `#ident` selector body that `decodeCssIdentifierAt` round-trips
+ * back to `value`.
+ */
+export 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;
+}
+/**
+ * A full attribute-selector bracket (`[data-x="a"]`, quotes optional, `]`
+ * inside a quoted value tolerated) or a bare quoted string. Either is a
+ * region where a literal `#` is never an id-selector prefix — the CSS parser
+ * itself never looks for one there — so `markUnguardedOffsets` below can
+ * find every such region with one pass of `matchAll` instead of a hand-rolled
+ * character-by-character state machine. Inside the bracket alternative, bare
+ * characters exclude the quote marks so each position matches exactly one
+ * branch (no ambiguous backtracking).
+ */
+const GUARDED_SELECTOR_SEGMENT_RE = /\\(?:[0-9a-fA-F]{1,6}(?:\r\n|[ \t\r\n\f])?|[\s\S])|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|\[(?:"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|[^\]"'])*\]/g;
+/**
+ * `mask[i]` is `true` when `selector[i]` sits outside both a quoted string
+ * and an attribute-selector bracket — the two places a literal `#` is never
+ * an id selector prefix.
+ */
+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;
+}
+/**
+ * Replace every whole-token `#id` in `selector` whose DECODED identifier is
+ * in `candidateIds`, skipping occurrences inside a quoted string or an
+ * attribute-selector bracket.
+ *
+ * Because the whole identifier is consumed before comparing, `#clip2` is
+ * never mistaken for `#clip`, and `#fx\.1` matches the candidate `fx.1`.
+ * `resolveReplacement` receives the matched (decoded) id and returns the
+ * full replacement text (including its own leading `#`, if any) to splice
+ * in.
+ */
+export 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;
+}
+//# sourceMappingURL=selectorIdTokens.js.map

package/dist/compiler/selectorIdTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectorIdTokens.js","sourceRoot":"","sources":["../../src/compiler/selectorIdTokens.ts"],"names":[],"mappings":"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"}

package/dist/compiler/svgIdNamespacing.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Native SVG url()/href references resolve by document order, bypassing JS scoping.
+ * Rename only colliding, natively referenced SVG ids; leave JS-only ids reachable
+ * by libraries that bypass the scoped selector shim. The first unrenamable element
+ * keeps the authored id (otherwise the first element does). Renamed elements retain
+ * data-hf-authored-id for script lookup compatibility.
+ */
+/** Reused from `compositionScoping.ts`'s `AUTHORED_ROOT_ID_ATTR` in spirit —
+ *  same purpose (let a renamed id still resolve by its authored name), now
+ *  generalized from "the composition root" to any renamed descendant. */
+export declare const SVG_AUTHORED_ID_ATTR = "data-hf-authored-id";
+/** Structural shape both a linkedom/live-DOM `Element` and `Document`
+ *  satisfy — mirrors the narrow-interface pattern `mediaRenderIds.ts` and
+ *  `compositionAssembly.ts` already use so this module works unmodified
+ *  across the preview bundler and the render compiler. */
+interface SvgIdQueryable {
+    querySelectorAll(selector: string): Iterable<Element>;
+}
+/** One inlined composition instance, as seen in the ASSEMBLED document. */
+export interface SvgIdScope {
+    /** The element whose subtree holds this instance's content (the host). */
+    root: Element;
+    /**
+     * Document-unique prefix for ids renamed in this scope — the instance's
+     * runtime composition id. An empty namespace makes the scope read-only:
+     * an anonymous host has no identity to prefix with, the same guard
+     * `scopeCssToComposition` and `wrapScopedCompositionScript` apply.
+     */
+    namespace: string;
+    /**
+     * Nested composition hosts inside `root` whose content belongs to their
+     * OWN scope. Their subtrees are skipped both when collecting this scope's
+     * ids and when rewriting its references.
+     */
+    exclude?: readonly Element[];
+    /**
+     * This instance's extracted `<style>` text (already removed from the DOM
+     * by the inline pipeline). Scanned for `url(#id)` references so a filter
+     * that is only applied from a stylesheet still counts as natively
+     * referenced. The caller rewrites these strings afterwards via
+     * `rewriteSvgIdReferencesInCss` with the returned map.
+     */
+    cssTexts?: readonly string[];
+}
+/**
+ * Rename every colliding, natively-referenced SVG id across the inlined
+ * composition instances in `scopes` and rewrite each instance's attribute
+ * references (`href`/`xlink:href`, any `url(#id)` funcref — including inside
+ * a `style` attribute) to match.
+ *
+ * Returns one old-id -> new-id map per scope, in the same order, so the
+ * caller can apply the identical substitution to that instance's separately
+ * extracted `<style>` text via `rewriteSvgIdReferencesInCss`, which this
+ * function never sees. Maps include inherited references whose original target
+ * was renamed elsewhere; scopes with local definitions keep their own mapping.
+ *
+ * `document` must be the ASSEMBLED document every scope root lives in: the
+ * collision census covers the whole thing, including ids the top-level
+ * document declares itself, since those collide with an inlined instance's
+ * ids just as two instances collide with each other.
+ */
+export declare function namespaceCollidingSvgIds(document: SvgIdQueryable, scopes: readonly SvgIdScope[]): Map<string, string>[];
+/**
+ * Apply the same id substitution `namespaceCollidingSvgIds` computed to a
+ * composition's `<style>` text.
+ *
+ * `<style>` content is extracted from the DOM and carried around as a raw
+ * string by the inline pipeline (see `inlineSubCompositions`'s
+ * `scopeSubStyle`), so it is never visited by the attribute walk. Both a bare
+ * `#id` selector (`#clip rect { fill: red }`, already scoped to the right
+ * instance by #556's composition-box prefix, but still naming the PRE-rename
+ * id) and a `url(#id)` declaration value need rewriting here, or a
+ * same-composition stylesheet rule silently stops matching the element whose
+ * id this module just changed.
+ */
+export declare function rewriteSvgIdReferencesInCss(css: string, idMap: ReadonlyMap<string, string>): string;
+export {};
+//# sourceMappingURL=svgIdNamespacing.d.ts.map

package/dist/compiler/svgIdNamespacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgIdNamespacing.d.ts","sourceRoot":"","sources":["../../src/compiler/svgIdNamespacing.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAOH;;yEAEyE;AACzE,eAAO,MAAM,oBAAoB,wBAAwB,CAAC;AAoE1D;;;0DAG0D;AAC1D,UAAU,cAAc;IACtB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;CACvD;AAED,2EAA2E;AAC3E,MAAM,WAAW,UAAU;IACzB,0EAA0E;IAC1E,IAAI,EAAE,OAAO,CAAC;IACd;;;;;OAKG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,OAAO,EAAE,CAAC;IAC7B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC9B;AA8LD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,cAAc,EACxB,MAAM,EAAE,SAAS,UAAU,EAAE,GAC5B,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAiCvB;AAqBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,2BAA2B,CACzC,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GACjC,MAAM,CAsCR"}

package/dist/compiler/svgIdNamespacing.js

@@ -0,0 +1,365 @@
+/**
+ * Native SVG url()/href references resolve by document order, bypassing JS scoping.
+ * Rename only colliding, natively referenced SVG ids; leave JS-only ids reachable
+ * by libraries that bypass the scoped selector shim. The first unrenamable element
+ * keeps the authored id (otherwise the first element does). Renamed elements retain
+ * data-hf-authored-id for script lookup compatibility.
+ */
+import postcss from "postcss";
+import { escapeCssIdentifier, replaceSelectorIdTokens } from "./selectorIdTokens.js";
+const ID_ATTR = "id";
+/** Reused from `compositionScoping.ts`'s `AUTHORED_ROOT_ID_ATTR` in spirit —
+ *  same purpose (let a renamed id still resolve by its authored name), now
+ *  generalized from "the composition root" to any renamed descendant. */
+export const SVG_AUTHORED_ID_ATTR = "data-hf-authored-id";
+/**
+ * Matches a `url(#id)` funcref value — quoted or bare — as used by
+ * `clip-path`, `filter`, `mask`, `fill`, `stroke`, `marker-start/mid/end`,
+ * `cursor`, `mask-image`, and equally by any of those written into an inline
+ * `style` attribute or a `<style>` declaration value. One pattern covers all
+ * of them because CSS only ever spells an id reference this way in a
+ * property VALUE — a bare `#id` (no `url()`) is exclusively a *selector*.
+ *
+ * The captured id is the literal fragment text. A fragment is a URL, not a
+ * CSS identifier, so it carries no CSS escapes; the replacement keeps the
+ * original quoting and only swaps the id, which stays a valid fragment
+ * because the namespace prefix is restricted to `[A-Za-z0-9_-]`.
+ */
+const URL_HASH_REF_RE = /(url\(\s*)(["']?)#([^"')\s]+)\2(\s*\))/gi;
+/**
+ * Attributes carrying a bare `#id` fragment reference rather than a
+ * `url(#id)` funcref — SVG's `<use>`, `<a>`, `<pattern>`, `<textPath>`,
+ * `<feImage>`, `<mpath>`, and so on. Matching by suffix also covers
+ * namespaced `xlink:href`, however a given DOM implementation exposes it.
+ */
+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;
+}
+/** Rewrite every id reference carried on one element's attributes. CSS text
+ *  inside a `<style>` element is handled separately by
+ *  `rewriteSvgIdReferencesInCss` — it is extracted and scoped as a raw
+ *  string elsewhere in the inline pipeline, never visited by this walk. */
+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);
+    }
+}
+/**
+ * Ids referenced by native browser resolution — `url(#id)` funcrefs and
+ * bare `href="#id"` fragment refs — as opposed to JavaScript-only refs
+ * (e.g. GSAP's `tl.to("#cut-1")`). Global libraries access `document`
+ * directly and bypass the composition-scoped querySelector Proxy, so only
+ * natively-referenced ids are safe to rename.
+ *
+ * RESIDUAL, BY DESIGN: two instances that both animate the same JS-ONLY id
+ * (two catalog scenes each doing `tl.to("#cut-1")`) both keep `id="cut-1"`.
+ * Scripts wrapped by `wrapScopedCompositionScript` still find their own
+ * element (the scoped `document`/GSAP proxies filter to the instance root),
+ * but an UNSCOPED lookup — a third-party library reading `document` directly
+ * — binds to the first instance in document order, exactly as it did before
+ * this module existed. Broadening this pre-scan to JS-only ids would trade
+ * that residual for breaking every such library lookup outright (the
+ * regression that motivated the gate), so the residual stays.
+ *
+ * Also not pre-scanned: references a script injects at runtime
+ * (`el.setAttribute("clip-path", "url(#foo)")` as the ONLY reference to
+ * `#foo`). Static markup and stylesheets are the contract.
+ */
+function collectNativelyReferencedIds(elements, cssTexts, svgIds) {
+    const referenced = 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));
+}
+/** `root` plus every descendant that is not inside an excluded subtree. */
+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];
+}
+/** Every `<svg>`-subtree element in the scope that carries an id. */
+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 = new Set();
+    if (!scope.namespace)
+        return { elements, renamable };
+    const svgIdElements = collectSvgIdElements(scope);
+    const svgIds = 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 = new Map();
+    const usedIds = 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;
+}
+/** A namespaced id that is not already taken anywhere in the document. */
+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;
+}
+/**
+ * Decide, per scope, which ids get renamed and to what. For every colliding
+ * id the keeper is the first element in document order that no scope can
+ * rename, else simply the first element; every other renamable element's
+ * scope receives a mapping for that id.
+ */
+function planRenames(census, scopes, scopeIndexByRenamable) {
+    const idMaps = scopes.map(() => 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 === undefined)
+                continue;
+            const idMap = idMaps[scopeIndex];
+            if (!idMap.has(id)) {
+                idMap.set(id, mintNamespacedId(scopes[scopeIndex].namespace, id, census.usedIds));
+            }
+        }
+    }
+    return idMaps;
+}
+/** Rename the planned elements in one scope and rewrite every reference in
+ *  that scope's attributes to match. */
+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);
+    }
+}
+/**
+ * Rename every colliding, natively-referenced SVG id across the inlined
+ * composition instances in `scopes` and rewrite each instance's attribute
+ * references (`href`/`xlink:href`, any `url(#id)` funcref — including inside
+ * a `style` attribute) to match.
+ *
+ * Returns one old-id -> new-id map per scope, in the same order, so the
+ * caller can apply the identical substitution to that instance's separately
+ * extracted `<style>` text via `rewriteSvgIdReferencesInCss`, which this
+ * function never sees. Maps include inherited references whose original target
+ * was renamed elsewhere; scopes with local definitions keep their own mapping.
+ *
+ * `document` must be the ASSEMBLED document every scope root lives in: the
+ * collision census covers the whole thing, including ids the top-level
+ * document declares itself, since those collide with an inlined instance's
+ * ids just as two instances collide with each other.
+ */
+export function namespaceCollidingSvgIds(document, scopes) {
+    const untouched = scopes.map(() => new Map());
+    if (scopes.length === 0)
+        return untouched;
+    const census = buildIdCensus(document);
+    if (!hasAnyCollision(census))
+        return untouched;
+    const resolved = scopes.map(resolveScope);
+    const scopeIndexByRenamable = 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);
+    // A reference without a local definition keeps its original document-order target,
+    // even if that target was renamed in an ancestor or another composition.
+    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 === undefined)
+                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;
+}
+/**
+ * Whole-token `#id` replacement inside a CSS selector, generalized to many
+ * ids at once and to a literal `#newId` swap instead of an attribute-selector
+ * expansion (a plain descendant/id selector already resolves correctly once
+ * the id itself is unique — no extra scoping needed). Shares its quote- and
+ * bracket-aware scan with `compositionScoping.ts`'s
+ * `replaceAuthoredRootIdSelectors` via `selectorIdTokens.ts`, rather than a
+ * second copy of the same state machine. The scanner decodes CSS identifier
+ * escapes before matching, so `#fx\.1` matches the raw id `fx.1`, and the
+ * replacement is re-escaped so the emitted selector stays valid.
+ */
+function renameIdTokensInSelector(selector, idMap) {
+    return replaceSelectorIdTokens(selector, [...idMap.keys()], (matchedId) => `#${escapeCssIdentifier(idMap.get(matchedId))}`);
+}
+/**
+ * Apply the same id substitution `namespaceCollidingSvgIds` computed to a
+ * composition's `<style>` text.
+ *
+ * `<style>` content is extracted from the DOM and carried around as a raw
+ * string by the inline pipeline (see `inlineSubCompositions`'s
+ * `scopeSubStyle`), so it is never visited by the attribute walk. Both a bare
+ * `#id` selector (`#clip rect { fill: red }`, already scoped to the right
+ * instance by #556's composition-box prefix, but still naming the PRE-rename
+ * id) and a `url(#id)` declaration value need rewriting here, or a
+ * same-composition stylesheet rule silently stops matching the element whose
+ * id this module just changed.
+ */
+export function rewriteSvgIdReferencesInCss(css, idMap) {
+    if (!css || idMap.size === 0)
+        return css;
+    if (!css.includes("#") && !css.toLowerCase().includes("url("))
+        return css;
+    let root;
+    try {
+        root = postcss.parse(css);
+    }
+    catch {
+        // Unparseable CSS is the caller's problem to report; leaving it untouched
+        // is strictly better than dropping the whole stylesheet here.
+        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;
+}
+//# sourceMappingURL=svgIdNamespacing.js.map