domotion-svg 0.2.2 → 0.3.2

package/src/capture/script/walker/borders-backgrounds.ts

@@ -40,7 +40,7 @@
 //   - **borderImageIntrinsicWidth / Height**: same pattern for border-
 //     image-source url().
 
-export const createBordersBackgroundsHandler = ({ normColor, resolvePlaceholderShownBg, resolveCornerRadius }) => {
+export const createBordersBackgroundsHandler = ({ normColor, normGradientColors, resolvePlaceholderShownBg, resolveCornerRadius }) => {
   const isUaColorBorder = (tag, el, cs, side) =>
     tag === 'input' && el.type === 'color'
     && normColor(cs[side], cs.color).replace(/\s+/g, '') === 'rgb(0,0,0)';
@@ -87,10 +87,25 @@ export const createBordersBackgroundsHandler = ({ normColor, resolvePlaceholderS
     layers.push(bgImage.slice(start));
 
     return layers.map((layer) => {
+      // DM-759: `image-set(url(...) 1x, url(...) 2x, ...)` layers wrap their
+      // url() candidates inside the function call; the top-level regex
+      // below only matches a bare `url(...)` at layer start. Probe the
+      // FIRST url() inside the image-set instead so the renderer's `cover`
+      // / `contain` math has the right aspect ratio. Picking any candidate
+      // works because Chrome's image-set candidates are conventionally the
+      // SAME image at different resolutions / formats, so the intrinsic
+      // aspect is consistent across them; the absolute scale may differ
+      // by the 1x/2x factor but `cover` / `contain` are aspect-driven.
+      let searchLayer = layer;
+      const imgSet = /^\s*(?:-webkit-)?image-set\(\s*([\s\S]+)\s*\)\s*$/i.exec(layer);
+      if (imgSet != null) searchLayer = imgSet[1];
       // Match all three url() forms: "...", '...', and bare. Data: URLs
       // with embedded HTML attribute quotes (escaped as \") were silently
       // truncated by a prior single-regex implementation. DM-308.
-      const u = /^\s*url\(\s*(?:"((?:\\.|[^"\\])*)"|'((?:\\.|[^'\\])*)'|([^)\s]+))\s*\)/.exec(layer);
+      // For image-set candidates the url() may appear anywhere in the
+      // inner string, so anchor at the start of the SEARCH LAYER but
+      // allow leading whitespace.
+      const u = /\burl\(\s*(?:"((?:\\.|[^"\\])*)"|'((?:\\.|[^'\\])*)'|([^)\s]+))\s*\)/.exec(searchLayer);
       if (u == null) return null;
       const raw = u[1] || u[2] || u[3] || '';
       if (raw === '') return null;
@@ -111,6 +126,48 @@ export const createBordersBackgroundsHandler = ({ normColor, resolvePlaceholderS
     return img[dim] || undefined;
   };
 
+  // DM-690: CSS 2.1 §17.6.2.1 — `border-style: hidden` has the highest
+  // precedence in `border-collapse: collapse` mode and SUPPRESSES the
+  // neighbor cell's matching border too. Walk the table grid neighbors and
+  // return per-side flags so the caller can rewrite this cell's border-side
+  // styles to `'hidden'` (which the renderer already skips). Scope: simple
+  // tables (no rowspan / colspan); good enough for the bug-report fixture
+  // `04-deep-border-conflict` and the common-case marketing tables.
+  const cellHiddenNeighbors = (el, tag, cs) => {
+    const out = { top: false, right: false, bottom: false, left: false };
+    if ((tag !== 'td' && tag !== 'th') || cs.borderCollapse !== 'collapse') return out;
+    const tr = el.parentElement;
+    if (tr == null || tr.tagName !== 'TR') return out;
+    const rowCells = Array.from(tr.children).filter((c) => c.tagName === 'TD' || c.tagName === 'TH');
+    const colIdx = rowCells.indexOf(el);
+    const hiddenSide = (cell, side) => {
+      if (cell == null) return false;
+      const cs2 = getComputedStyle(cell);
+      return cs2['border' + side + 'Style'] === 'hidden';
+    };
+    if (hiddenSide(rowCells[colIdx - 1], 'Right')) out.left = true;
+    if (hiddenSide(rowCells[colIdx + 1], 'Left')) out.right = true;
+    // Resolve the surrounding table to walk row-neighbors across
+    // thead/tbody/tfoot sections.
+    let table = tr.parentElement;
+    while (table != null && table.tagName !== 'TABLE') table = table.parentElement;
+    if (table != null) {
+      const allRows = Array.from(table.querySelectorAll('tr')).filter((t) => t.closest('table') === table);
+      const rowIdx = allRows.indexOf(tr);
+      const above = allRows[rowIdx - 1];
+      const below = allRows[rowIdx + 1];
+      if (above != null) {
+        const aboveCells = Array.from(above.children).filter((c) => c.tagName === 'TD' || c.tagName === 'TH');
+        if (hiddenSide(aboveCells[colIdx], 'Bottom')) out.top = true;
+      }
+      if (below != null) {
+        const belowCells = Array.from(below.children).filter((c) => c.tagName === 'TD' || c.tagName === 'TH');
+        if (hiddenSide(belowCells[colIdx], 'Top')) out.bottom = true;
+      }
+    }
+    return out;
+  };
+
   const captureBordersBackgrounds = (el, cs, tag, rect, isPlaceholderCapture) => ({
     backgroundColor: (function () {
       if (isPlaceholderCapture) {
@@ -130,25 +187,72 @@ export const createBordersBackgroundsHandler = ({ normColor, resolvePlaceholderS
     borderRightWidth: cs.borderRightWidth,
     borderBottomWidth: cs.borderBottomWidth,
     borderLeftWidth: cs.borderLeftWidth,
-    borderTopStyle: cs.borderTopStyle,
-    borderRightStyle: cs.borderRightStyle,
-    borderBottomStyle: cs.borderBottomStyle,
-    borderLeftStyle: cs.borderLeftStyle,
+    // DM-690: when an adjacent collapsed-table cell declares its matching
+    // side as `border-style: hidden`, CSS 2.1 §17.6.2.1 says we MUST treat
+    // our side as hidden too (precedence: `hidden > widest > ...`). Override
+    // here at capture time so the renderer's existing `style === 'hidden'`
+    // skip suppresses the paint on this side. (Cells whose OWN side is
+    // already hidden are unaffected — they pass through.)
+    ...(function () {
+      const hn = cellHiddenNeighbors(el, tag, cs);
+      return {
+        borderTopStyle: hn.top ? 'hidden' : cs.borderTopStyle,
+        borderRightStyle: hn.right ? 'hidden' : cs.borderRightStyle,
+        borderBottomStyle: hn.bottom ? 'hidden' : cs.borderBottomStyle,
+        borderLeftStyle: hn.left ? 'hidden' : cs.borderLeftStyle,
+      };
+    })(),
     borderTopColor: tintedBorderColor(tag, el, cs, 'borderTopColor'),
     borderRightColor: tintedBorderColor(tag, el, cs, 'borderRightColor'),
     borderBottomColor: tintedBorderColor(tag, el, cs, 'borderBottomColor'),
     borderLeftColor: tintedBorderColor(tag, el, cs, 'borderLeftColor'),
     borderCollapse: cs.borderCollapse,
     frostedBgFallback: computeFrostedBgFallback(cs),
-    backgroundImage: cs.backgroundImage,
+    backgroundImage: normGradientColors(cs.backgroundImage, cs.color),
     backgroundSize: cs.backgroundSize,
     backgroundPosition: cs.backgroundPosition,
     backgroundRepeat: cs.backgroundRepeat,
     backgroundClip: cs.backgroundClip,
+    backgroundBlendMode: cs.backgroundBlendMode,
     // DM-462: -webkit-text-fill-color is the property that actually makes
     // the headline text transparent in the background-clip:text idiom
     // (cs.color may still report a normal value).
     webkitTextFillColor: cs.webkitTextFillColor || cs.WebkitTextFillColor || undefined,
+    // DM-749: Stripe's keynote-speaker headline pattern — a span with
+    // `background-image: <gradient>; background-clip: text; -webkit-text-
+    // fill-color: transparent` wraps a child div that holds the actual
+    // text. The gradient is on the parent but Chrome lets it paint through
+    // the child's glyphs because background-clip: text masks the gradient
+    // by the union of all descendant text shapes. When the element's own
+    // bg-image is none AND its text-fill-color is transparent AND an
+    // ancestor has background-clip: text with a gradient, capture that
+    // ancestor's gradient so the renderer can use it as the glyph fill.
+    inheritedTextFillGradient: (function () {
+      const ownTfc = cs.webkitTextFillColor || cs.WebkitTextFillColor || '';
+      // Only meaningful when our own text is transparent.
+      if (!/^(rgba\(0[^)]*?,\s*0\)|transparent)$/i.test(ownTfc.trim())) return undefined;
+      // Walk up at most 8 ancestors looking for `background-clip: text`
+      // + a non-none `background-image`. 8 covers the Stripe hds-heading
+      // depth-of-2 nesting comfortably without scanning the whole tree.
+      let p = el.parentElement;
+      let depth = 0;
+      while (p != null && depth < 8) {
+        const pcs = window.getComputedStyle(p);
+        const bc = (pcs.backgroundClip || '') + ' ' + (pcs.webkitBackgroundClip || '');
+        if (/\btext\b/i.test(bc) && pcs.backgroundImage && pcs.backgroundImage !== 'none' && pcs.backgroundImage !== '') {
+          return pcs.backgroundImage;
+        }
+        p = p.parentElement;
+        depth++;
+      }
+      return undefined;
+    })(),
+    // DM-719: `-webkit-text-stroke-width` / `-webkit-text-stroke-color` paint a
+    // stroke around each glyph outline. Captured so the renderer can add a
+    // `stroke` attribute to the text-path emission.
+    webkitTextStrokeWidth: cs.webkitTextStrokeWidth || cs.WebkitTextStrokeWidth || undefined,
+    webkitTextStrokeColor: cs.webkitTextStrokeColor || cs.WebkitTextStrokeColor || undefined,
+    paintOrder: cs.paintOrder || undefined,
     backgroundOrigin: cs.backgroundOrigin,
     backgroundAttachment: cs.backgroundAttachment,
     backgroundIntrinsic: computeBackgroundIntrinsic(cs),
@@ -164,6 +268,9 @@ export const createBordersBackgroundsHandler = ({ normColor, resolvePlaceholderS
     outlineColor: normColor(cs.outlineColor),
     outlineOffset: cs.outlineOffset,
     boxShadow: cs.boxShadow,
+    // box-decoration-break: 'slice' (default) vs 'clone'. Drives per-fragment
+    // paint of wrapped inline elements; see CapturedElement.inlineFragments.
+    boxDecorationBreak: cs.boxDecorationBreak || cs.webkitBoxDecorationBreak || 'slice',
   });
 
   return { captureBordersBackgrounds };

package/src/capture/script/walker/counter-style-resolver.ts

@@ -0,0 +1,184 @@
+// @ts-nocheck
+//
+// DM-770 / DM-788: resolves a custom @counter-style name + 1-based index to
+// the marker symbol string per the CSS Counter Styles algorithms (cyclic,
+// fixed, numeric, alphabetic, symbolic, additive) plus prefix / suffix /
+// pad / negative / range / fallback / extends descriptors.
+//
+// Used by:
+//   - lists-counters.ts to resolve `list-style-type: <custom-name>` markers
+//     on <li> elements (DM-770)
+//   - pseudo-content.ts to resolve `counter(name, custom-style)` /
+//     `counters(name, sep, custom-style)` inside `::before` / `::after`
+//     `content` declarations (DM-788)
+//
+// The counter-style rule map is populated by `_walkRulesForCounterStyles` in
+// the orchestrator pre-walk (`src/capture/script/index.ts`); both walkers
+// close over the same object reference so a single sweep of styleSheets is
+// shared across the capture.
+//
+// Bundled into the page-context capture script via the index.ts orchestrator;
+// no runtime imports of its own.
+
+export const createCounterStyleResolver = ({ counterStyles }) => {
+  // Built-in counter-style names whose algorithm the render side already
+  // covers inside `formatListMarker`. When an `extends` / `fallback` chain
+  // bottoms out at one of these, return the formatted symbol so the caller
+  // can stamp it directly without recursing through this resolver.
+  const BUILTINS = new Set([
+    'decimal', 'decimal-leading-zero',
+    'lower-alpha', 'lower-latin', 'upper-alpha', 'upper-latin',
+    'lower-roman', 'upper-roman',
+    'lower-greek',
+    'disc', 'circle', 'square', 'none',
+  ]);
+
+  // Marker-context resolution (used by list-item ::marker). Returns the full
+  // string with prefix + pad + value + suffix wrapping per the CSS spec.
+  const resolveCounterStyle = (name, n) => _resolve(name, n, 0, true);
+  // Counter-function-context resolution (used by `counter()` / `counters()`
+  // inside `content`). Per Chrome's paint, the function returns only the
+  // pad-formatted value: prefix / suffix are NOT included. Matches DM-788
+  // empirical probe.
+  const resolveCounterValue = (name, n) => _resolve(name, n, 0, false);
+  const isCustomCounterStyle = (name) => counterStyles[name] != null;
+
+  const _resolve = (name, n, depth, wrap) => {
+    if (depth > 16) return null; // fallback / extends loop guard
+    if (BUILTINS.has(name)) return _formatBuiltin(name, n);
+    const def = counterStyles[name];
+    if (def == null) return _formatBuiltin('decimal', n);
+    if (def.system === 'extends' && def.extendsName != null) {
+      const childSym = _resolve(def.extendsName, n, depth + 1, wrap);
+      if (childSym == null) return null;
+      const padded = _applyPad(childSym, def.padLen, def.padSym);
+      return wrap ? (def.prefix + padded + def.suffix) : padded;
+    }
+    if (n < def.rangeLo || n > def.rangeHi) {
+      return _resolve(def.fallback ?? 'decimal', n, depth + 1, wrap);
+    }
+    const negative = n < 0;
+    const abs = Math.abs(n);
+    let core = null;
+    switch (def.system) {
+      case 'cyclic':
+        if (def.symbols.length === 0) break;
+        core = def.symbols[((abs - 1) % def.symbols.length + def.symbols.length) % def.symbols.length];
+        break;
+      case 'fixed': {
+        const idx0 = abs - 1;
+        if (idx0 >= 0 && idx0 < def.symbols.length) core = def.symbols[idx0];
+        break;
+      }
+      case 'numeric': {
+        if (def.symbols.length < 2) break;
+        if (abs === 0) { core = def.symbols[0]; break; }
+        const base = def.symbols.length;
+        let v = abs;
+        let s = '';
+        while (v > 0) { s = def.symbols[v % base] + s; v = Math.floor(v / base); }
+        core = s;
+        break;
+      }
+      case 'alphabetic': {
+        if (def.symbols.length === 0 || abs <= 0) break;
+        const base = def.symbols.length;
+        let v = abs;
+        let s = '';
+        while (v > 0) { v--; s = def.symbols[v % base] + s; v = Math.floor(v / base); }
+        core = s;
+        break;
+      }
+      case 'symbolic': {
+        if (def.symbols.length === 0 || abs <= 0) break;
+        const base = def.symbols.length;
+        const copies = Math.ceil(abs / base);
+        const sym = def.symbols[(abs - 1) % base];
+        core = sym.repeat(copies);
+        break;
+      }
+      case 'additive': {
+        if (def.additiveSymbols.length === 0) break;
+        if (abs === 0) {
+          const zero = def.additiveSymbols.find((s) => s.weight === 0);
+          core = zero ? zero.sym : null;
+        } else {
+          let v = abs;
+          let s = '';
+          for (const { weight, sym } of def.additiveSymbols) {
+            if (weight <= 0) continue;
+            const count = Math.floor(v / weight);
+            for (let i = 0; i < count; i++) s += sym;
+            v -= count * weight;
+          }
+          core = v === 0 ? s : null;
+        }
+        break;
+      }
+    }
+    if (core == null) return _resolve(def.fallback ?? 'decimal', n, depth + 1, wrap);
+    const padded = _applyPad(core, def.padLen, def.padSym);
+    const sign = negative ? def.negPrefix : '';
+    const signTail = negative ? def.negSuffix : '';
+    return wrap
+      ? (def.prefix + sign + padded + signTail + def.suffix)
+      : (sign + padded + signTail);
+  };
+
+  const _applyPad = (s, len, sym) => {
+    if (!len || !sym) return s;
+    while ([...s].length < len) s = sym + s;
+    return s;
+  };
+
+  const _formatBuiltin = (type, n) => {
+    switch (type) {
+      case 'decimal': return String(n);
+      case 'decimal-leading-zero': return n < 10 && n >= 0 ? '0' + n : String(n);
+      case 'lower-alpha':
+      case 'lower-latin':
+        return _alphaMarker(n, false);
+      case 'upper-alpha':
+      case 'upper-latin':
+        return _alphaMarker(n, true);
+      case 'lower-roman': return _romanMarker(n).toLowerCase();
+      case 'upper-roman': return _romanMarker(n);
+      case 'lower-greek': return _greekMarker(n);
+      case 'disc':
+      case 'circle':
+      case 'square':
+      case 'none':
+        return null;
+      default: return String(n);
+    }
+  };
+  const _alphaMarker = (n, upper) => {
+    if (n <= 0) return String(n);
+    const base = upper ? 65 : 97;
+    let s = '';
+    let v = n;
+    while (v > 0) { v--; s = String.fromCharCode(base + (v % 26)) + s; v = Math.floor(v / 26); }
+    return s;
+  };
+  const _greekMarker = (n) => {
+    if (n <= 0) return String(n);
+    const greek = 'αβγδεζηθικλμνξοπρστυφχψω';
+    let s = '';
+    let v = n;
+    while (v > 0) { v--; s = greek.charAt(v % 24) + s; v = Math.floor(v / 24); }
+    return s;
+  };
+  const _romanMarker = (n) => {
+    if (n <= 0 || n >= 4000) return String(n);
+    const vals = [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1];
+    const syms = ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I'];
+    let s = '';
+    let v = n;
+    for (let i = 0; i < vals.length; i++) {
+      while (v >= vals[i]) { s += syms[i]; v -= vals[i]; }
+    }
+    return s;
+  };
+
+  return { resolveCounterStyle, resolveCounterValue, isCustomCounterStyle };
+};

package/src/capture/script/walker/input-value.ts

@@ -93,9 +93,22 @@ export const createInputValueHandler = ({ vp, normColor, measureFontMetrics }) =
     // + ascent), so without this adjustment the text shows up at the top
     // of the button instead of centered. Surfaced by framer-mobile-fold's
     // "Okay" button (display: flex; align-items: center; height: 45px).
+    //
+    // DM-666: `<input type="submit" | "button" | "reset">` are button-type
+    // inputs whose value text Chrome ALWAYS centers vertically inside the
+    // content box — this is the UA-stylesheet `appearance: button`
+    // behaviour, independent of `display` / `align-items`. Google's
+    // homepage "Google Search" / "I'm Feeling Lucky" inputs are exactly
+    // this case: `display: inline-block`, no flex, 36-px tall with 14-px
+    // text — the value sits dead-centre in Chrome but anchored to
+    // content-top in the captured tree pre-fix. Extending the centring to
+    // these button types here keeps the renderer's textTop = line-box-top
+    // contract intact.
     const display = cs.display;
     const isFlexLike = display === 'flex' || display === 'inline-flex' || display === 'grid' || display === 'inline-grid';
-    if (isFlexLike && cs.alignItems === 'center') {
+    const isButtonInput = tag === 'input'
+      && (inputType === 'submit' || inputType === 'button' || inputType === 'reset');
+    if ((isFlexLike && cs.alignItems === 'center') || isButtonInput) {
       const contentH = rect.height - bt - bb - pt - pb;
       if (contentH > textHeight + 0.5) {
         textTop = (rect.top - vp.y + bt + pt) + (contentH - textHeight) / 2;

package/src/capture/script/walker/lists-counters.ts

@@ -14,7 +14,8 @@
 // outer-page environment exposes `document` / `window` / `Image` without the
 // project's tsconfig DOM lib applying.
 
-export const createListsCountersHandler = ({ normColor }) => {
+export const createListsCountersHandler = ({ normColor, resolveCounterStyle, isCustomCounterStyle }) => {
+
   const captureListsCounters = (el, cs, tag) => {
     // CSS treats any element with display:list-item as a list item — the tag
     // alone isn't enough. An <li> with display:inline-block (e.g. a horizontal
@@ -72,6 +73,27 @@ export const createListsCountersHandler = ({ normColor }) => {
     // else the values come back equal to the element's own font and are
     // quietly ignored at render time, so leave them undefined.
     const markerCs = isListItem ? window.getComputedStyle(el, '::marker') : null;
+    let markerContent = markerCs ? markerCs.content : undefined;
+
+    // DM-770: if list-style-type names a custom @counter-style and the
+    // ::marker pseudo doesn't already define a `content` override, resolve
+    // the marker symbol from the captured rule definitions. Chrome's CSSOM
+    // returns the resolved `::marker { content }` as the literal `"normal"`
+    // even when the painted marker is a custom symbol, so we re-implement
+    // the resolution algorithm against the captured rule map.
+    if (isListItem && resolveCounterStyle != null && listItemIndex != null) {
+      const lsType = cs.listStyleType;
+      const isCustom = lsType != null && isCustomCounterStyle != null && isCustomCounterStyle(lsType);
+      const noAuthorContent = markerContent == null || markerContent === '' || markerContent === 'normal';
+      if (isCustom && noAuthorContent) {
+        const resolved = resolveCounterStyle(lsType, listItemIndex);
+        if (resolved != null) {
+          // Wrap as a CSS-string so the render-time `rawContent` parser
+          // (which strips surrounding quotes) accepts it.
+          markerContent = '"' + resolved.replace(/\\/g, '\\\\').replace(/"/g, '\\"') + '"';
+        }
+      }
+    }
 
     return {
       listMarkerIntrinsic,
@@ -79,7 +101,7 @@ export const createListsCountersHandler = ({ normColor }) => {
       markerColor: markerCs ? normColor(markerCs.color) : undefined,
       markerFontWeight: markerCs ? markerCs.fontWeight : undefined,
       markerFontSize: markerCs ? markerCs.fontSize : undefined,
-      markerContent: markerCs ? markerCs.content : undefined,
+      markerContent,
       markerFontFamily: markerCs ? markerCs.fontFamily : undefined,
     };
   };

package/src/capture/script/walker/masks-clips.ts

@@ -39,6 +39,7 @@
 export const createMasksClipsHandler = ({ vp, warn }) => {
   const maskDefs = new Map();
   const maskRasters = new Map();
+  const clipPathDefs = new Map();
   let maskRasterIdx = 0;
 
   const discoverMasks = (el, cs, sel) => {
@@ -138,5 +139,43 @@ export const createMasksClipsHandler = ({ vp, warn }) => {
     }
   };
 
-  return { discoverMasks, maskDefs, maskRasters };
+  // DM-826: clip-path: url("#id") same-document fragment ref. Resolves the
+  // fragment to an inline `<clipPath>` element and stashes its outerHTML so
+  // the renderer can emit it into the output SVG `<defs>`. See
+  // `docs/39-clip-path-fragment-references.md`.
+  //
+  // Scope (initial cut): same-document `<clipPath>` defs with
+  // `clipPathUnits="objectBoundingBox"` or the default `userSpaceOnUse`. The
+  // emitted def carries `clipPathUnits` through verbatim — SVG handles
+  // objectBoundingBox auto-scaling natively. userSpaceOnUse refs are recorded
+  // but the renderer currently passes coordinates through unchanged (best-
+  // effort; faithful support needs per-element translation, deferred).
+  const discoverClipPaths = (el, cs, sel) => {
+    const cp = cs.clipPath;
+    if (!cp || cp === 'none' || cp === '') return;
+    // Strip an optional <geometry-box> keyword (`padding-box` / `border-box` /
+    // …) before the url(...) check — `clip-path: url(#id) padding-box` is
+    // valid per CSS Masking 1 §3.1. The renderer's geo-box handling is
+    // shape-side; here we only care about the url() form.
+    const cpShape = cp.replace(/\b(?:content-box|padding-box|border-box|margin-box|fill-box|stroke-box|view-box)\b/i, '').trim();
+    const fragMatch = /^url\(\s*(?:"|')?#([^"')\s]+)(?:"|')?\s*\)$/i.exec(cpShape);
+    if (fragMatch != null) {
+      const fragId = fragMatch[1];
+      if (!clipPathDefs.has(fragId)) {
+        const target = document.getElementById(fragId);
+        if (target != null && target.tagName.toLowerCase() === 'clippath') {
+          clipPathDefs.set(fragId, { id: fragId, outerHTML: target.outerHTML });
+        } else {
+          warn(sel, 'clip-path', 'clip-path fragment "#' + fragId + '" did not resolve to an inline <clipPath> element');
+        }
+      }
+      return;
+    }
+    const extFragMatch = /^url\(\s*(?:"|')?[^"')#]+#[^"')\s]+(?:"|')?\s*\)$/i.exec(cpShape);
+    if (extFragMatch != null) {
+      warn(sel, 'clip-path', 'external-file SVG fragment refs (url("./file.svg#id")) are not yet emitted');
+    }
+  };
+
+  return { discoverMasks, discoverClipPaths, maskDefs, maskRasters, clipPathDefs };
 };