@grafloria/element 0.3.18 → 0.3.20

package/src/libs/renderer/src/export/capture-host.js

@@ -0,0 +1,1259 @@
+"use strict";
+// THE DOM BOUNDARY of custom-node export — the one file here that needs a browser.
+//
+// THE SPLIT, AND WHY
+// ------------------
+// `exportSvg` is pure, DOM-free and deterministic, and that is a guarantee worth more
+// than the feature this file enables. So the DOM is not allowed to leak into it. The
+// division is:
+//
+//   capture-host.ts  (HERE)   reads live elements — getBoundingClientRect,
+//                             getComputedStyle — and emits PLAIN DATA.
+//   custom-nodes.ts  (pure)   places that data into the export tree.
+//   svg-export.ts    (pure)   still takes only data; still runs in bare Node.
+//
+// Nothing in this module touches ambient `document` or `window`: every entry point
+// takes the element it works on and reaches the window through `ownerDocument`. So
+// importing it from an SSR bundle is harmless — it simply is never called there, and
+// `exportSvg` keeps working with no capture at all.
+//
+// WHY TRANSCRIBE RATHER THAN SCREENSHOT
+// -------------------------------------
+// The tempting shortcut is `foreignObject` for everything: paste the host's HTML in
+// and let the browser deal with it. But a `foreignObject` is dead weight in a PDF and
+// in every standalone rasterizer — the export would look right in exactly one viewer
+// and be blank in the places people actually send files.
+//
+// So this walks the host and transcribes what it finds into SVG primitives:
+//
+//   inline <svg>   LIFTED, element for element, with `var(--…)` resolved through
+//                  getComputedStyle. A donut's arcs stay arcs. This is the common
+//                  case for the dashboard kit and it is exact, not approximated.
+//   text           emitted as <text> at its laid-out position, with the resolved
+//                  font and fill. This is what makes a KPI's headline number — plain
+//                  HTML, no SVG anywhere near it — survive the trip.
+//   boxes          background fills and borders become <rect>/<line>, which is what
+//                  draws widget cards and table rules.
+//
+// Beyond those three it now also transcribes the CSS paint a widget card is actually
+// built from, REUSING the renderer's own paint-server model (`svg/paint-servers.ts`) so
+// there is exactly one set of gradient/shadow VNode builders in the codebase:
+//
+//   background gradient   linear-/radial-gradient() → a `<linearGradient>` /
+//                         `<radialGradient>` def (userSpaceOnUse, real pixel endpoints so
+//                         the CSS angle is not distorted on a non-square box) that the box
+//                         rect fills with via `url(#…)`.
+//   box-shadow            → the `feDropShadow` filter def, applied to the box. Outer only;
+//                         `inset` is skipped and reported.
+//   images                <img> / background-image:url() → an `<image>`, inlined to a
+//                         data: URI when the canvas is readable.
+//
+// The SAME VNode tree then feeds the SVG serializer, the PDF painter and `vnodeBounds`,
+// all of which already understand these element types. The honest per-format story: SVG
+// and resvg render them faithfully; PDF flattens a gradient to a solid stop (with a
+// warning), omits the shadow blur (the box still draws), and CANNOT draw an image at all
+// (no image XObject) — so an image is reported as a PDF fidelity risk here rather than
+// vanishing silently.
+//
+// Two more things it transcribes:
+//
+//   pseudo-elements   `::before` / `::after` boxes, read via getComputedStyle(el, '::…').
+//                     A pseudo has NO element to getBoundingClientRect(), so its box is
+//                     DERIVED: explicit width/height + position offsets for an absolute
+//                     pseudo; the origin's content start (border + padding in) for a
+//                     static one. Quoted `content` strings go through the SAME text
+//                     emission as real text nodes (so text-transform etc. hold);
+//                     attr()/counter()/url() content is skipped and reported; a painted
+//                     pseudo whose box cannot be derived is reported, never guessed.
+//   clipping          `overflow: hidden|clip|auto|scroll` wraps the element's
+//                     DESCENDANTS in a `<g clip-path="url(#…)">` whose `<clipPath>` is
+//                     the (rounded) border box, so a chart or image inside a rounded
+//                     card cannot bleed past the corners; CSS `clip-path` basic shapes
+//                     (inset/circle/ellipse/polygon) wrap the element ITSELF the same
+//                     way; path()/url() clip-paths are skipped and reported (content
+//                     exports unclipped, not wrong). Nested clips compose as nested
+//                     groups. SVG/resvg honour clipPath faithfully; the PDF painter does
+//                     not yet apply clips, which is reported as a fidelity risk.
+// Transforms remain out of scope and, when they carry paint we cannot see, degrade to
+// the reported fidelity fallbacks.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IMAGE_NOT_INLINED_WARNING = exports.IMAGE_PDF_WARNING = void 0;
+exports.captureCustomNodeHost = captureCustomNodeHost;
+exports.stripResolvedImageWarnings = stripResolvedImageWarnings;
+const custom_nodes_1 = require("./custom-nodes");
+const paint_servers_1 = require("../svg/paint-servers");
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+/** Presentation properties lifted off computed style when transcribing inline SVG. */
+const SVG_PAINT_PROPS = [
+    ['fill', 'fill'],
+    ['fill-opacity', 'fillOpacity'],
+    ['stroke', 'stroke'],
+    ['stroke-width', 'strokeWidth'],
+    ['stroke-opacity', 'strokeOpacity'],
+    ['stroke-linecap', 'strokeLinecap'],
+    ['stroke-linejoin', 'strokeLinejoin'],
+    ['stroke-dasharray', 'strokeDasharray'],
+    ['opacity', 'opacity'],
+];
+/**
+ * Text properties — applied ONLY to elements that can render glyphs. `getComputedStyle`
+ * happily reports a font for every `<path>` and `<line>` in the document, and writing
+ * those out would add a `font-family` to several hundred marks that can never draw a
+ * character. That is pure file weight.
+ */
+const SVG_TEXT_PROPS = [
+    ['font-family', 'fontFamily'],
+    ['font-size', 'fontSize'],
+    ['font-weight', 'fontWeight'],
+    ['letter-spacing', 'letterSpacing'],
+    ['text-anchor', 'textAnchor'],
+];
+const TEXT_ELEMENTS = new Set(['text', 'tspan', 'textPath']);
+/** Attributes that must NOT be copied verbatim — they are re-derived or meaningless here. */
+const SKIP_ATTRS = new Set(['class', 'style', 'xmlns']);
+/** Geometry-free SVG elements we never need to emit. */
+const SVG_IGNORED = new Set(['title', 'desc', 'metadata', 'script', 'style']);
+/**
+ * Capture ONE custom node's host into plain data.
+ *
+ * Never throws: an export must not be taken down by a host in a state we did not
+ * anticipate. A failed capture degrades to `fidelity: 'empty'`, which the pure layer
+ * turns into a marked box and a warning — the whole point being that a blank is never
+ * silent.
+ */
+function captureCustomNodeHost(id, rect, host, options = {}) {
+    var _a, _b, _c, _d;
+    try {
+        const el = host;
+        const win = (_a = el === null || el === void 0 ? void 0 : el.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+        if (!el || !win || typeof win.getComputedStyle !== 'function') {
+            return { id, rect, fidelity: 'empty' };
+        }
+        const hostRect = el.getBoundingClientRect();
+        // The html layer carries the camera as a CSS transform, so client rects come back
+        // multiplied by the zoom. `offsetWidth` is layout space and is not, so their ratio
+        // IS the zoom — no need to be told it.
+        const inferred = hostRect.width > 0 && host.offsetWidth
+            ? hostRect.width / host.offsetWidth
+            : 1;
+        const scale = options.scale && options.scale > 0 ? options.scale : inferred > 0 ? inferred : 1;
+        const ctx = {
+            win,
+            originX: hostRect.left,
+            originY: hostRect.top,
+            scale,
+            out: [],
+            budget: (_b = options.maxElements) !== null && _b !== void 0 ? _b : 4000,
+            sawUncapturable: false,
+            warnings: [],
+            emittedDefs: new Set(),
+            // jsdom does not implement getComputedStyle(el, '::before') — it LOGS a
+            // not-implemented error (it does not throw) and returns the element's own style,
+            // once per call. Probing it per element would print hundreds of identical lines
+            // into every jsdom-hosted test run for a fact known up front: jsdom announces
+            // itself in the UA. Real browsers are untouched.
+            pseudoUnsupported: /jsdom/i.test((_d = (_c = win.navigator) === null || _c === void 0 ? void 0 : _c.userAgent) !== null && _d !== void 0 ? _d : ''),
+        };
+        walk(el, ctx, ctx.out);
+        if (ctx.out.length === 0)
+            return { id, rect, fidelity: 'empty' };
+        const warning = ctx.warnings.length ? dedupe(ctx.warnings).join(' ') : undefined;
+        return warning
+            ? { id, rect, fidelity: 'vector', content: ctx.out, warning }
+            : { id, rect, fidelity: 'vector', content: ctx.out };
+    }
+    catch (_e) {
+        return { id, rect, fidelity: 'empty' };
+    }
+}
+/** Collapse repeated caveats — one gradient warning for a board of twelve is enough. */
+function dedupe(values) {
+    return [...new Set(values)];
+}
+/** Client-space rect → host-local layout rect. */
+function localRect(ctx, r) {
+    return {
+        x: (r.left - ctx.originX) / ctx.scale,
+        y: (r.top - ctx.originY) / ctx.scale,
+        width: r.width / ctx.scale,
+        height: r.height / ctx.scale,
+    };
+}
+function isTransparent(color) {
+    if (!color)
+        return true;
+    const c = color.trim().toLowerCase();
+    if (c === 'transparent' || c === 'none')
+        return true;
+    // rgba(…, 0) — a zero alpha paints nothing.
+    const m = /^rgba?\(([^)]+)\)$/.exec(c);
+    if (m) {
+        const parts = m[1].split(',').map(s => parseFloat(s.trim()));
+        if (parts.length === 4 && !(parts[3] > 0))
+            return true;
+    }
+    return false;
+}
+const px = (value) => {
+    const v = parseFloat(value);
+    return Number.isFinite(v) ? v : 0;
+};
+function walk(el, ctx, sink) {
+    var _a, _b, _c, _d, _e;
+    if (ctx.budget-- <= 0)
+        return;
+    const style = ctx.win.getComputedStyle(el);
+    if (style['display'] === 'none' || style['visibility'] === 'hidden')
+        return;
+    // Fully transparent chrome — the kit's hover-revealed resize handle is exactly this.
+    // It is not on screen, so it must not be in the file.
+    if (parseFloat((_a = style['opacity']) !== null && _a !== void 0 ? _a : '1') === 0)
+        return;
+    if (el.localName === 'svg' && el.namespaceURI !== 'http://www.w3.org/1999/xhtml') {
+        liftSvg(el, ctx, sink);
+        return; // lifted whole — never descend, the transcription owns the subtree
+    }
+    const rect = localRect(ctx, el.getBoundingClientRect());
+    const hasBox = rect.width > 0 && rect.height > 0;
+    // Clipping. CSS `clip-path` clips the element ITSELF (own background included);
+    // `overflow` clips only its DESCENDANTS. Each becomes a detached sink that is
+    // wrapped in a `<g clip-path="url(#…)">` at the end — IF anything painted into it,
+    // so an empty clip leaves neither a group nor a def behind. Nested clips compose
+    // naturally: an inner clipped element builds its own group inside the outer one.
+    const selfClip = hasBox ? clipPathShapeFor((_c = (_b = style['clip-path']) !== null && _b !== void 0 ? _b : style['clipPath']) !== null && _c !== void 0 ? _c : '', rect, ctx) : null;
+    const overflowClip = hasBox ? overflowClipFor(style, rect) : null;
+    const ownSink = selfClip ? [] : sink;
+    const childSink = overflowClip ? [] : ownSink;
+    if (hasBox) {
+        emitBox(style, rect, ctx, ownSink);
+        // An <img> paints its bitmap; that is its whole content and it has no children.
+        if (el.localName === 'img')
+            emitImage(el, rect, ctx, el.getAttribute('src'), ownSink);
+    }
+    // Does the origin have flow content of its own? A static ::after flows AFTER it,
+    // at a position this transcriber cannot measure — that case warns instead of guessing.
+    let hasFlowContent = false;
+    for (let i = 0; i < el.childNodes.length; i++) {
+        const child = el.childNodes[i];
+        if (child.nodeType === ELEMENT_NODE ||
+            (child.nodeType === TEXT_NODE && ((_d = child.nodeValue) !== null && _d !== void 0 ? _d : '').trim() !== '')) {
+            hasFlowContent = true;
+            break;
+        }
+    }
+    const beforeExists = hasBox ? emitPseudo(el, style, rect, '::before', ctx, childSink, false) : false;
+    for (let i = 0; i < el.childNodes.length; i++) {
+        const child = el.childNodes[i];
+        if (child.nodeType === ELEMENT_NODE) {
+            walk(child, ctx, childSink);
+        }
+        else if (child.nodeType === TEXT_NODE && ((_e = child.nodeValue) !== null && _e !== void 0 ? _e : '').trim() !== '') {
+            emitText(el, child, style, ctx, childSink);
+        }
+    }
+    if (hasBox)
+        emitPseudo(el, style, rect, '::after', ctx, childSink, hasFlowContent || beforeExists);
+    if (overflowClip && childSink.length > 0) {
+        pushDef(ctx, overflowClip.id, () => overflowClip.def);
+        ownSink.push({
+            type: 'g',
+            props: { 'clip-path': `url(#${overflowClip.id})` },
+            children: childSink,
+        });
+    }
+    if (selfClip && ownSink.length > 0) {
+        pushDef(ctx, selfClip.id, () => selfClip.def);
+        sink.push({
+            type: 'g',
+            props: { 'clip-path': `url(#${selfClip.id})` },
+            children: ownSink,
+        });
+    }
+}
+/**
+ * Background fill and borders → `<rect>` / `<line>`, pushed into `sink` (the display
+ * list of whatever clip scope the element lives in). Also used for a pseudo-element's
+ * derived box — the style record is then the PSEUDO's computed style, which is what
+ * makes gradients/shadows/borders on a `::before` ride the exact same code.
+ */
+function emitBox(style, rect, ctx, sink) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const bg = (_b = (_a = style['background-color']) !== null && _a !== void 0 ? _a : style['backgroundColor']) !== null && _b !== void 0 ? _b : '';
+    const radius = px((_d = (_c = style['border-top-left-radius']) !== null && _c !== void 0 ? _c : style['borderTopLeftRadius']) !== null && _d !== void 0 ? _d : '0');
+    // A CSS `background-image` is either a gradient (→ paint-server fill) or a bitmap
+    // (→ an <image> behind the content). Its computed value keeps the layers we authored.
+    const bgImage = (_f = (_e = style['background-image']) !== null && _e !== void 0 ? _e : style['backgroundImage']) !== null && _f !== void 0 ? _f : '';
+    const gradientFill = gradientFillFor(bgImage, rect, ctx);
+    // The box's fill: a gradient wins over a flat colour (CSS paints the image over the
+    // colour), and either one is what a drop shadow is cast from.
+    const fill = gradientFill !== null && gradientFill !== void 0 ? gradientFill : (isTransparent(bg) ? undefined : bg);
+    const shadowRef = shadowFilterFor((_h = (_g = style['box-shadow']) !== null && _g !== void 0 ? _g : style['boxShadow']) !== null && _h !== void 0 ? _h : '', ctx);
+    if (fill !== undefined) {
+        sink.push({
+            type: 'rect',
+            props: Object.assign(Object.assign(Object.assign({ x: round(rect.x), y: round(rect.y), width: round(rect.width), height: round(rect.height) }, (radius > 0 ? { rx: round(radius) } : {})), { fill }), (shadowRef ? { filter: shadowRef } : {})),
+            children: [],
+        });
+    }
+    else if (shadowRef) {
+        // A shadow with nothing to cast it from: feDropShadow blurs the source graphic's
+        // alpha, and a box with no fill has none. Report rather than emit a shadow of nothing.
+        ctx.warnings.push('a box-shadow on a widget with no painted background was omitted.');
+    }
+    // A bitmap background sits behind the element's content — emitted here, before the
+    // children the walk descends into next.
+    emitBackgroundImage(bgImage, rect, ctx, sink);
+    // Borders. A uniform box gets one stroked rect; anything else (a table's row rule is
+    // a bottom border only) gets a line per painted side, which is the only way those
+    // survive at all.
+    const sides = ['top', 'right', 'bottom', 'left'].map(side => {
+        var _a, _b, _c;
+        return ({
+            side,
+            width: px((_a = style[`border-${side}-width`]) !== null && _a !== void 0 ? _a : ''),
+            color: (_b = style[`border-${side}-color`]) !== null && _b !== void 0 ? _b : '',
+            style: (_c = style[`border-${side}-style`]) !== null && _c !== void 0 ? _c : 'none',
+        });
+    });
+    const painted = sides.filter(s => s.width > 0 && s.style !== 'none' && !isTransparent(s.color));
+    if (painted.length === 0)
+        return;
+    const uniform = painted.length === 4 &&
+        painted.every(s => s.width === painted[0].width && s.color === painted[0].color);
+    if (uniform) {
+        const w = painted[0].width;
+        // A CSS border sits INSIDE the box; an SVG stroke straddles the path. Inset by half.
+        sink.push({
+            type: 'rect',
+            props: Object.assign(Object.assign({ x: round(rect.x + w / 2), y: round(rect.y + w / 2), width: round(Math.max(0, rect.width - w)), height: round(Math.max(0, rect.height - w)) }, (radius > 0 ? { rx: round(Math.max(0, radius - w / 2)) } : {})), { fill: 'none', stroke: painted[0].color, 'stroke-width': round(w) }),
+            children: [],
+        });
+        return;
+    }
+    for (const s of painted) {
+        const inset = s.width / 2;
+        const [x1, y1, x2, y2] = s.side === 'top'
+            ? [rect.x, rect.y + inset, rect.x + rect.width, rect.y + inset]
+            : s.side === 'bottom'
+                ? [rect.x, rect.y + rect.height - inset, rect.x + rect.width, rect.y + rect.height - inset]
+                : s.side === 'left'
+                    ? [rect.x + inset, rect.y, rect.x + inset, rect.y + rect.height]
+                    : [rect.x + rect.width - inset, rect.y, rect.x + rect.width - inset, rect.y + rect.height];
+        sink.push({
+            type: 'line',
+            props: {
+                x1: round(x1),
+                y1: round(y1),
+                x2: round(x2),
+                y2: round(y2),
+                stroke: s.color,
+                'stroke-width': round(s.width),
+            },
+            children: [],
+        });
+    }
+}
+/**
+ * One run of text → `<text>`.
+ *
+ * The position comes from a Range over the text node, which is the TIGHT laid-out box
+ * — the parent's box would be the whole card for a title. SVG's `y` is the baseline
+ * and CSS gives us a line box, so the baseline is derived from the box centre and the
+ * font size; that is an approximation, but it is the same one every HTML→SVG
+ * transcriber makes and it is visually indistinguishable for single-line runs.
+ */
+function emitText(parent, textNode, style, ctx, sink) {
+    var _a, _b, _c;
+    const raw = ((_a = textNode.nodeValue) !== null && _a !== void 0 ? _a : '').replace(/\s+/g, ' ').trim();
+    if (raw === '')
+        return;
+    const doc = ((_b = parent.ownerDocument) !== null && _b !== void 0 ? _b : null);
+    let box = null;
+    try {
+        const range = (_c = doc === null || doc === void 0 ? void 0 : doc.createRange) === null || _c === void 0 ? void 0 : _c.call(doc);
+        if (range) {
+            range.selectNodeContents(textNode);
+            const r = range.getBoundingClientRect();
+            if (r && r.width >= 0 && r.height > 0)
+                box = r;
+        }
+    }
+    catch (_d) {
+        /* fall through to the parent's box */
+    }
+    if (!box)
+        box = parent.getBoundingClientRect();
+    const rect = localRect(ctx, box);
+    if (!(rect.height > 0))
+        return;
+    pushTextVNode(raw, rect, style, ctx, sink);
+}
+/**
+ * The one place a run of text becomes a `<text>` VNode. Real text nodes arrive here
+ * with their Range-measured box; pseudo-element `content` strings arrive with their
+ * DERIVED box — and because both go through this, text-transform, colour, tracking and
+ * the baseline approximation cannot drift between the two.
+ */
+function pushTextVNode(raw, rect, style, ctx, sink) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const collapsed = raw.replace(/\s+/g, ' ').trim();
+    if (collapsed === '')
+        return;
+    // `text-transform` is applied by the RENDERER, not stored in the text node — the DOM
+    // still says "Total revenue" while the screen says "TOTAL REVENUE". Copying nodeValue
+    // verbatim is how an export comes out subtly but visibly wrong on every widget title.
+    const content = applyTextTransform(collapsed, (_a = style['text-transform']) !== null && _a !== void 0 ? _a : style['textTransform']);
+    const fontSize = px((_c = (_b = style['font-size']) !== null && _b !== void 0 ? _b : style['fontSize']) !== null && _c !== void 0 ? _c : '12') / 1;
+    const align = ((_e = (_d = style['text-align']) !== null && _d !== void 0 ? _d : style['textAlign']) !== null && _e !== void 0 ? _e : 'start').toLowerCase();
+    const anchor = align === 'center' ? 'middle' : align === 'right' || align === 'end' ? 'end' : 'start';
+    const x = anchor === 'middle' ? rect.x + rect.width / 2 : anchor === 'end' ? rect.x + rect.width : rect.x;
+    // Alphabetic baseline ≈ 0.36em below the centre of the line box for typical faces.
+    const y = rect.y + rect.height / 2 + fontSize * 0.36;
+    const color = (_f = style['color']) !== null && _f !== void 0 ? _f : '#000';
+    const tracking = px((_h = (_g = style['letter-spacing']) !== null && _g !== void 0 ? _g : style['letterSpacing']) !== null && _h !== void 0 ? _h : '');
+    sink.push({
+        type: 'text',
+        props: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ x: round(x), y: round(y) }, (anchor !== 'start' ? { 'text-anchor': anchor } : {})), { 'font-family': (_k = (_j = style['font-family']) !== null && _j !== void 0 ? _j : style['fontFamily']) !== null && _k !== void 0 ? _k : 'sans-serif', 'font-size': round(fontSize) }), (normalWeight(style) ? {} : { 'font-weight': (_l = style['font-weight']) !== null && _l !== void 0 ? _l : style['fontWeight'] })), (tracking ? { 'letter-spacing': round(tracking) } : {})), { fill: color, textContent: content }),
+        children: [],
+    });
+}
+/** What the renderer does to the text on the way to the screen. */
+function applyTextTransform(text, transform) {
+    switch ((transform !== null && transform !== void 0 ? transform : '').toLowerCase()) {
+        case 'uppercase':
+            return text.toUpperCase();
+        case 'lowercase':
+            return text.toLowerCase();
+        case 'capitalize':
+            return text.replace(/(^|\s)(\S)/g, (_, lead, ch) => lead + ch.toUpperCase());
+        default:
+            return text;
+    }
+}
+function normalWeight(style) {
+    var _a, _b;
+    const w = String((_b = (_a = style['font-weight']) !== null && _a !== void 0 ? _a : style['fontWeight']) !== null && _b !== void 0 ? _b : '400');
+    return w === '400' || w === 'normal';
+}
+/**
+ * Lift an inline `<svg>` into the display list.
+ *
+ * This is the fidelity win: the kit draws every chart as inline SVG, so a donut's arcs,
+ * a bar's rects and a line's polylines come across as THEMSELVES — real vector, exact
+ * geometry, valid in a PDF. The two things that must happen on the way:
+ *
+ *  1. the viewBox fit is baked into a transform (see `viewBoxTransform`), because no
+ *     target downstream of here implements nested-`<svg>` viewBox mapping;
+ *  2. every paint is read from COMPUTED style, which is what resolves the kit's
+ *     `var(--axdb-grid)` / `var(--axdb-ink)` into literal colours. Copying attributes
+ *     verbatim would carry `var(…)` into the file and break the export's standing
+ *     "no unresolved custom properties" guarantee — the values would render black, or
+ *     not at all, outside a browser.
+ */
+function liftSvg(el, ctx, sink) {
+    var _a;
+    const rect = localRect(ctx, el.getBoundingClientRect());
+    if (!(rect.width > 0) || !(rect.height > 0))
+        return;
+    const viewBox = parseViewBox(el.getAttribute('viewBox'));
+    const fit = viewBox
+        ? (0, custom_nodes_1.viewBoxTransform)(viewBox, rect, (_a = el.getAttribute('preserveAspectRatio')) !== null && _a !== void 0 ? _a : 'xMidYMid meet')
+        : '';
+    const children = [];
+    for (let i = 0; i < el.childNodes.length; i++) {
+        const child = el.childNodes[i];
+        if (child.nodeType !== ELEMENT_NODE)
+            continue;
+        const vnode = transcribeSvgElement(child, ctx);
+        if (vnode)
+            children.push(vnode);
+    }
+    if (children.length === 0)
+        return;
+    const transform = [`translate(${round(rect.x)} ${round(rect.y)})`, fit].filter(Boolean).join(' ');
+    sink.push({
+        type: 'g',
+        props: { transform, className: 'grafloria-lifted-svg' },
+        children,
+    });
+}
+function parseViewBox(raw) {
+    if (!raw)
+        return null;
+    const parts = raw.trim().split(/[\s,]+/).map(Number);
+    if (parts.length !== 4 || !parts.every(Number.isFinite))
+        return null;
+    return { x: parts[0], y: parts[1], width: parts[2], height: parts[3] };
+}
+function transcribeSvgElement(el, ctx) {
+    var _a, _b, _c;
+    if (ctx.budget-- <= 0)
+        return null;
+    if (SVG_IGNORED.has(el.localName))
+        return null;
+    const style = ctx.win.getComputedStyle(el);
+    if (style['display'] === 'none' || style['visibility'] === 'hidden')
+        return null;
+    const props = {};
+    // Geometry and every other authored attribute, verbatim.
+    for (let i = 0; i < el.attributes.length; i++) {
+        const attr = el.attributes[i];
+        if (SKIP_ATTRS.has(attr.name))
+            continue;
+        props[attr.name] = attr.value;
+    }
+    // Paint, RESOLVED — this is what turns `var(--axdb-grid)` into a colour.
+    const wanted = TEXT_ELEMENTS.has(el.localName)
+        ? [...SVG_PAINT_PROPS, ...SVG_TEXT_PROPS]
+        : SVG_PAINT_PROPS;
+    for (const [attr, prop] of wanted) {
+        const value = (_a = style[attr]) !== null && _a !== void 0 ? _a : style[prop];
+        if (value === undefined || value === '' || value === 'normal')
+            continue;
+        props[attr] = value;
+    }
+    const children = [];
+    let text;
+    for (let i = 0; i < el.childNodes.length; i++) {
+        const child = el.childNodes[i];
+        if (child.nodeType === ELEMENT_NODE) {
+            const vnode = transcribeSvgElement(child, ctx);
+            if (vnode)
+                children.push(vnode);
+        }
+        else if (child.nodeType === TEXT_NODE && ((_b = child.nodeValue) !== null && _b !== void 0 ? _b : '').trim() !== '') {
+            text = (text !== null && text !== void 0 ? text : '') + ((_c = child.nodeValue) !== null && _c !== void 0 ? _c : '');
+        }
+    }
+    if (text !== undefined && children.length === 0)
+        props['textContent'] = text;
+    return { type: el.localName, props, children };
+}
+// ---------------------------------------------------------------------------
+// CSS paint transcription — gradients, shadows, images.
+//
+// These read COMPUTED style values (rgb()/rgba() colours, px lengths, resolved angles),
+// so the parsing is deliberately narrow: it handles the forms a browser actually emits
+// from getComputedStyle, not the full authoring grammar. Everything reuses the renderer's
+// own paint-server VNode builders (`svg/paint-servers.ts`) so the def shapes live in one
+// place. Def dedup is by the stable `paintDefId` hash: identical paint → one def.
+// ---------------------------------------------------------------------------
+/**
+ * The capture-time verdict on an external image, EXPORTED because the async export path
+ * revises it: `await export(…)` fetches external URLs (environment fetch, then
+ * `ExportOptions.assetFetcher`) and STRIPS this warning from any capture whose images it
+ * embedded — see `stripResolvedImageWarnings`. The synchronous entry points cannot fetch,
+ * so for them this text is the whole truth, and it names the way out.
+ */
+exports.IMAGE_PDF_WARNING = 'a widget image references an EXTERNAL URL — a synchronous export keeps the link (the ' +
+    'SVG renders online, but a PDF cannot fetch a URL, so it will be MISSING from a PDF ' +
+    'export). `await export(…)` embeds the image when its server allows CORS or when ' +
+    'ExportOptions.assetFetcher is supplied.';
+/** Companion caveat from `resolveImageHref` — same lifecycle as {@link IMAGE_PDF_WARNING}. */
+exports.IMAGE_NOT_INLINED_WARNING = 'an image could not be inlined (cross-origin or unloaded) — the export references it ' +
+    'externally and is not fully self-contained.';
+/**
+ * Remove the two external-image caveats from a capture's warning — called by the async
+ * export AFTER it embedded every external image the capture held, at which point both
+ * sentences assert a problem that no longer exists (the same defect, mirrored, as
+ * staying silent about one that does). Returns undefined when nothing else remains.
+ */
+function stripResolvedImageWarnings(warning) {
+    if (!warning)
+        return warning;
+    const stripped = warning
+        .replace(exports.IMAGE_PDF_WARNING, '')
+        .replace(exports.IMAGE_NOT_INLINED_WARNING, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+    return stripped === '' ? undefined : stripped;
+}
+/** Register a def VNode once per capture; identical defs (same id) collapse to one. */
+function pushDef(ctx, id, build) {
+    if (ctx.emittedDefs.has(id))
+        return;
+    ctx.emittedDefs.add(id);
+    ctx.out.push(build());
+}
+/** Split on TOP-LEVEL commas only — commas inside `rgb(…)` / nested `()` are left alone. */
+function splitTopLevel(value) {
+    const out = [];
+    let depth = 0;
+    let cur = '';
+    for (const ch of value) {
+        if (ch === '(')
+            depth++;
+        else if (ch === ')')
+            depth--;
+        if (ch === ',' && depth === 0) {
+            out.push(cur);
+            cur = '';
+        }
+        else {
+            cur += ch;
+        }
+    }
+    if (cur.trim() !== '')
+        out.push(cur);
+    return out.map(s => s.trim());
+}
+const COLOR_TOKEN = /(rgba?\([^)]*\)|hsla?\([^)]*\)|#[0-9a-fA-F]{3,8})/;
+/** Does an argument carry a colour (→ a stop), or is it a direction/shape config? */
+function looksLikeColor(arg) {
+    return COLOR_TOKEN.test(arg);
+}
+/** The one flat colour that best stands in — the fill a box wears when a gradient is present. */
+function gradientFillFor(bgImage, rect, ctx) {
+    const grad = parseGradient(bgImage);
+    if (!grad)
+        return undefined;
+    for (const c of grad.caveats)
+        ctx.warnings.push(c);
+    if (grad.kind === 'linear') {
+        const e = linearEndpoints(grad.angle, rect);
+        const id = (0, paint_servers_1.paintDefId)(Object.assign(Object.assign({ k: 'l' }, e), { stops: grad.stops }));
+        pushDef(ctx, id, () => (0, paint_servers_1.buildLinearGradientUserSpace)(id, Object.assign(Object.assign({}, e), { stops: grad.stops })));
+        return `url(#${id})`;
+    }
+    const g = radialGeometry(grad, rect);
+    const id = (0, paint_servers_1.paintDefId)(Object.assign(Object.assign({ k: 'r' }, g), { stops: grad.stops }));
+    pushDef(ctx, id, () => (0, paint_servers_1.buildRadialGradientUserSpace)(id, Object.assign(Object.assign({}, g), { stops: grad.stops })));
+    return `url(#${id})`;
+}
+/** Parse a computed `background-image` gradient. Returns null for a bitmap or `none`. */
+function parseGradient(bgImage) {
+    const raw = (bgImage !== null && bgImage !== void 0 ? bgImage : '').trim();
+    if (!raw || raw === 'none')
+        return null;
+    const layers = splitTopLevel(raw);
+    const caveats = [];
+    if (layers.length > 1)
+        caveats.push('only the first of multiple background-image layers was exported.');
+    const m = /^(repeating-)?(linear|radial)-gradient\(([\s\S]*)\)$/i.exec(layers[0]);
+    if (!m)
+        return null;
+    if (m[1])
+        caveats.push('a repeating gradient was exported as a single non-repeating gradient.');
+    const kind = m[2].toLowerCase();
+    const args = splitTopLevel(m[3]);
+    if (args.length === 0)
+        return null;
+    let angle = 180; // CSS default direction is `to bottom`
+    let center = null;
+    let stopArgs = args;
+    if (!looksLikeColor(args[0])) {
+        if (kind === 'linear')
+            angle = parseAngle(args[0]);
+        else
+            center = parseRadialCenter(args[0]);
+        stopArgs = args.slice(1);
+    }
+    const stops = parseStops(stopArgs);
+    if (stops.length < 2)
+        return null;
+    return { kind, angle, center, stops, caveats };
+}
+/** A CSS gradient angle/side → degrees (0=up, 90=right, clockwise). */
+function parseAngle(token) {
+    const t = token.trim().toLowerCase();
+    const m = /^(-?[\d.]+)(deg|grad|rad|turn)?$/.exec(t);
+    if (m) {
+        const v = parseFloat(m[1]);
+        switch (m[2]) {
+            case 'rad':
+                return (v * 180) / Math.PI;
+            case 'grad':
+                return v * 0.9;
+            case 'turn':
+                return v * 360;
+            default:
+                return v;
+        }
+    }
+    if (t.startsWith('to ')) {
+        const sides = new Set(t.slice(3).trim().split(/\s+/));
+        const top = sides.has('top');
+        const bottom = sides.has('bottom');
+        const left = sides.has('left');
+        const right = sides.has('right');
+        // Corner directions are approximated by their 45° diagonal — exact CSS corner angles
+        // depend on the box aspect ratio, which is a refinement not worth its complexity here.
+        if (top && right)
+            return 45;
+        if (bottom && right)
+            return 135;
+        if (bottom && left)
+            return 225;
+        if (top && left)
+            return 315;
+        if (top)
+            return 0;
+        if (right)
+            return 90;
+        if (left)
+            return 270;
+        return 180; // bottom
+    }
+    return 180;
+}
+/** Endpoints for a linear gradient, in host-local pixel space (userSpaceOnUse). */
+function linearEndpoints(angleDeg, rect) {
+    const th = (angleDeg * Math.PI) / 180;
+    const s = Math.sin(th);
+    const c = Math.cos(th);
+    const w = rect.width;
+    const h = rect.height;
+    const cx = rect.x + w / 2;
+    const cy = rect.y + h / 2;
+    // The gradient line runs through the centre and spans corner-to-corner.
+    const len = Math.abs(w * s) + Math.abs(h * c);
+    // y is DOWN in SVG, so the "to top" direction (θ=0) is (0,-1): end = centre + (s,-c)·len/2.
+    return {
+        x1: round(cx - (s * len) / 2),
+        y1: round(cy + (c * len) / 2),
+        x2: round(cx + (s * len) / 2),
+        y2: round(cy - (c * len) / 2),
+    };
+}
+/** Centre + radius for a radial gradient, host-local pixels. Default: centre, farthest-corner. */
+function radialGeometry(grad, rect) {
+    var _a, _b, _c, _d;
+    const fx = (_b = (_a = grad.center) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0.5;
+    const fy = (_d = (_c = grad.center) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0.5;
+    const cx = rect.x + rect.width * fx;
+    const cy = rect.y + rect.height * fy;
+    // Default ending shape/size is farthest-corner: the max distance from the centre to any
+    // of the box's four corners.
+    const dx = Math.max(cx - rect.x, rect.x + rect.width - cx);
+    const dy = Math.max(cy - rect.y, rect.y + rect.height - cy);
+    return { cx: round(cx), cy: round(cy), r: round(Math.hypot(dx, dy)) };
+}
+/** `circle at 25% 75%` / `at center` → the centre as 0–1 fractions, or null for default. */
+function parseRadialCenter(config) {
+    var _a, _b, _c;
+    const at = /\bat\s+(.+)$/i.exec(config.trim());
+    if (!at)
+        return null;
+    const parts = at[1].trim().split(/\s+/);
+    const axis = (token, horizontal) => {
+        const t = token.toLowerCase();
+        if (t === 'center')
+            return 0.5;
+        if (t === 'left')
+            return 0;
+        if (t === 'right')
+            return 1;
+        if (t === 'top')
+            return 0;
+        if (t === 'bottom')
+            return 1;
+        const pct = /^(-?[\d.]+)%$/.exec(t);
+        if (pct)
+            return parseFloat(pct[1]) / 100;
+        return horizontal ? 0.5 : 0.5;
+    };
+    const x = axis((_a = parts[0]) !== null && _a !== void 0 ? _a : 'center', true);
+    const y = axis((_c = (_b = parts[1]) !== null && _b !== void 0 ? _b : parts[0]) !== null && _c !== void 0 ? _c : 'center', false);
+    return { x, y };
+}
+/** Parse the colour-stop list, filling in unpositioned stops by even distribution. */
+function parseStops(parts) {
+    const raw = parts.map(parseStop).filter((s) => s !== null);
+    if (raw.length === 0)
+        return [];
+    if (raw[0].offset == null)
+        raw[0].offset = 0;
+    if (raw[raw.length - 1].offset == null)
+        raw[raw.length - 1].offset = 1;
+    // Fill each run of unpositioned stops by interpolating between its anchored neighbours.
+    let i = 0;
+    while (i < raw.length) {
+        if (raw[i].offset != null) {
+            i++;
+            continue;
+        }
+        let j = i;
+        while (j < raw.length && raw[j].offset == null)
+            j++;
+        const prev = raw[i - 1].offset;
+        const next = raw[j].offset;
+        const gap = j - (i - 1);
+        for (let k = i; k < j; k++)
+            raw[k].offset = prev + ((next - prev) * (k - (i - 1))) / gap;
+        i = j;
+    }
+    return raw.map(s => (Object.assign({ offset: round(s.offset), color: s.color }, (s.opacity !== undefined ? { opacity: s.opacity } : {}))));
+}
+/** One `rgb(…) 40%` stop → colour + optional offset (fraction) + optional split-out alpha. */
+function parseStop(part) {
+    const t = part.trim();
+    const cm = COLOR_TOKEN.exec(t);
+    if (!cm)
+        return null;
+    const rawColor = cm[0];
+    const rest = t.slice(0, cm.index) + t.slice(cm.index + rawColor.length);
+    const pm = /(-?[\d.]+)%/.exec(rest);
+    const offset = pm ? Math.max(0, Math.min(1, parseFloat(pm[1]) / 100)) : null;
+    return Object.assign(Object.assign({}, splitAlpha(rawColor)), { offset });
+}
+/** rgba(r,g,b,a<1) → { color: rgb(r,g,b), opacity: a }. Everything else passes through. */
+function splitAlpha(color) {
+    const m = /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/i.exec(color.trim());
+    if (m) {
+        const a = parseFloat(m[4]);
+        if (a < 1)
+            return { color: `rgb(${m[1]}, ${m[2]}, ${m[3]})`, opacity: a };
+        return { color: `rgb(${m[1]}, ${m[2]}, ${m[3]})` };
+    }
+    return { color };
+}
+// -- box-shadow --------------------------------------------------------------
+/** Build the drop-shadow filter def for a box-shadow and return its `url(#…)` ref. */
+function shadowFilterFor(boxShadow, ctx) {
+    const raw = (boxShadow !== null && boxShadow !== void 0 ? boxShadow : '').trim();
+    if (!raw || raw === 'none')
+        return undefined;
+    const shadows = splitTopLevel(raw);
+    const first = shadows[0];
+    if (/\binset\b/i.test(first)) {
+        ctx.warnings.push('an inset box-shadow was skipped — inset shadows are not exported.');
+        return undefined;
+    }
+    if (shadows.length > 1)
+        ctx.warnings.push('only the first of multiple box-shadows was exported.');
+    const shadow = parseShadow(first);
+    if (!shadow)
+        return undefined;
+    const id = (0, paint_servers_1.paintDefId)({ shadow });
+    pushDef(ctx, id, () => (0, paint_servers_1.buildShadowFilterVNode)(id, shadow));
+    return `url(#${id})`;
+}
+/** `rgba(…) 2px 4px 12px 0px` (computed form: colour first) → a Shadow spec, or null. */
+function parseShadow(value) {
+    var _a;
+    const t = value.trim();
+    const cm = COLOR_TOKEN.exec(t);
+    const color = cm ? cm[0] : 'rgba(0, 0, 0, 0.35)';
+    const rest = cm ? t.slice(0, cm.index) + t.slice(cm.index + color.length) : t;
+    const nums = ((_a = rest.match(/-?[\d.]+px/g)) !== null && _a !== void 0 ? _a : []).map(v => parseFloat(v));
+    if (nums.length < 2)
+        return null;
+    const [offsetX, offsetY, blur = 0] = nums; // a 4th value is spread, which SVG has no analogue for
+    // CSS blur radius ≈ 2× the Gaussian std-deviation — halve it so the shadow is as soft as
+    // the browser paints it, matching the serializer's own `blur()` translation.
+    return { offsetX, offsetY, blur: round(blur / 2), color };
+}
+// -- images ------------------------------------------------------------------
+/** `background-image: url("…")` → an `<image>` behind the element's content. */
+function emitBackgroundImage(bgImage, rect, ctx, sink) {
+    const url = parseBgUrl(bgImage);
+    if (!url)
+        return;
+    emitImage(null, rect, ctx, url, sink);
+}
+/** The first `url(…)` in a computed `background-image`, unquoted, or null. */
+function parseBgUrl(bgImage) {
+    const m = /url\(\s*(['"]?)([^'")]+)\1\s*\)/i.exec(bgImage !== null && bgImage !== void 0 ? bgImage : '');
+    return m ? m[2] : null;
+}
+/**
+ * Emit an `<image>` for an `<img>` (pass the element) or a CSS bitmap (pass null).
+ * Inlined to a data: URI when the pixels are readable, so the file stays self-contained;
+ * ALWAYS warned, because PDF cannot draw an image at all.
+ */
+function emitImage(el, rect, ctx, src, sink) {
+    if (!src)
+        return;
+    const href = resolveImageHref(el, src, ctx);
+    // Only an EXTERNAL image is a PDF risk now: the PDF writer embeds data: PNGs/JPEGs
+    // as image XObjects (b2854b0a1) and carries its own precise warnings for the forms
+    // it refuses (interlaced, 16-bit, CMYK…). An external URL it cannot fetch, so that
+    // half of the old blanket warning is the half that stays.
+    if (!href.startsWith('data:'))
+        ctx.warnings.push(exports.IMAGE_PDF_WARNING);
+    sink.push({
+        type: 'image',
+        props: {
+            x: round(rect.x),
+            y: round(rect.y),
+            width: round(rect.width),
+            height: round(rect.height),
+            href,
+        },
+        children: [],
+    });
+}
+/** A data: URI if we can read the bitmap; otherwise the original src (external, warned). */
+function resolveImageHref(el, src, ctx) {
+    if (src.startsWith('data:'))
+        return src;
+    const inlined = el ? tryCanvasInline(el, ctx) : null;
+    if (inlined)
+        return inlined;
+    ctx.warnings.push(exports.IMAGE_NOT_INLINED_WARNING);
+    return src;
+}
+/** Read a loaded, same-origin `<img>` to a PNG data URI via a canvas. Null on any failure. */
+function tryCanvasInline(el, ctx) {
+    var _a, _b;
+    try {
+        const doc = el.ownerDocument;
+        if (!doc || typeof doc.createElement !== 'function')
+            return null;
+        const img = el;
+        const nw = (_a = img.naturalWidth) !== null && _a !== void 0 ? _a : 0;
+        const nh = (_b = img.naturalHeight) !== null && _b !== void 0 ? _b : 0;
+        if (!nw || !nh)
+            return null;
+        const canvas = doc.createElement('canvas');
+        canvas.width = nw;
+        canvas.height = nh;
+        const context = canvas.getContext('2d');
+        if (!context)
+            return null;
+        context.drawImage(el, 0, 0);
+        return canvas.toDataURL('image/png');
+    }
+    catch (_c) {
+        ctx.warnings.push('an image could not be inlined (cross-origin or unloaded) — the export references it ' +
+            'externally and is not fully self-contained.');
+        return null;
+    }
+}
+// -- pseudo-elements ---------------------------------------------------------
+//
+// `getComputedStyle(el, '::before')` reports a pseudo's computed style, but a pseudo
+// has NO element to getBoundingClientRect() — its box must be DERIVED:
+//
+//   absolute/fixed   left/top (or right/bottom + size) offsets against the origin's
+//                    border box, plus computed width/height. This is the decorative-
+//                    pseudo idiom and it derives exactly.
+//   static/relative  a ::before flows at the origin's CONTENT start (border + padding
+//                    in). A ::after only flows there when the origin has no other flow
+//                    content — otherwise its position depends on layout this
+//                    transcriber cannot measure, and it warns instead of guessing.
+//
+// Sizes: explicit px/% resolve; `auto` resolves for a TEXT pseudo (its line box is
+// derived from its own font, the same approximation `emitText` makes), but a PAINTED
+// box with auto size is underivable and is reported, never guessed.
+/** A px/% length against a basis. Returns null for auto/keywords/unparsable. */
+function resolveLen(token, basis) {
+    const t = (token !== null && token !== void 0 ? token : '').trim();
+    if (t === '')
+        return null;
+    const pct = /^(-?[\d.]+)%$/.exec(t);
+    if (pct)
+        return (parseFloat(pct[1]) / 100) * basis;
+    const abs = /^(-?[\d.]+)(?:px)?$/.exec(t);
+    if (abs)
+        return parseFloat(abs[1]);
+    return null;
+}
+/** Everything outside quoted strings — for detecting attr()/counter()/url() content. */
+function stripQuoted(value) {
+    return value.replace(/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, '');
+}
+/**
+ * A computed `content` value → the text it contributes. Quoted strings (and their
+ * concatenation) are transcribed; attr()/counter()/url() cannot be resolved from
+ * computed style alone and are skipped WITH a warning. The `/ "alt text"` clause is
+ * not rendered content and is cut.
+ */
+function parsePseudoContent(value, ctx) {
+    if (/(attr|counters?|url|image-set)\s*\(/i.test(stripQuoted(value))) {
+        ctx.warnings.push('a pseudo-element content value (attr()/counter()/url()) was skipped — only quoted ' +
+            'strings are transcribed.');
+    }
+    let out = '';
+    let quote = null;
+    for (let i = 0; i < value.length; i++) {
+        const ch = value[i];
+        if (quote) {
+            if (ch === quote)
+                quote = null;
+            else if (ch === '\\' && i + 1 < value.length)
+                out += value[++i];
+            else
+                out += ch;
+        }
+        else if (ch === '"' || ch === "'") {
+            quote = ch;
+        }
+        else if (ch === '/') {
+            break; // alt-text clause — never rendered
+        }
+    }
+    return out;
+}
+/** Does the pseudo's style paint a box at all (background or any visible border)? */
+function pseudoPaintsBox(ps) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    if (!isTransparent((_b = (_a = ps['background-color']) !== null && _a !== void 0 ? _a : ps['backgroundColor']) !== null && _b !== void 0 ? _b : ''))
+        return true;
+    const bgi = ((_d = (_c = ps['background-image']) !== null && _c !== void 0 ? _c : ps['backgroundImage']) !== null && _d !== void 0 ? _d : '').trim();
+    if (bgi !== '' && bgi !== 'none')
+        return true;
+    for (const side of ['top', 'right', 'bottom', 'left']) {
+        if (px((_e = ps[`border-${side}-width`]) !== null && _e !== void 0 ? _e : '') > 0 &&
+            ((_f = ps[`border-${side}-style`]) !== null && _f !== void 0 ? _f : 'none') !== 'none' &&
+            !isTransparent((_g = ps[`border-${side}-color`]) !== null && _g !== void 0 ? _g : '')) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Transcribe one `::before` / `::after`. Returns whether the pseudo EXISTS (generated
+ * a box per `content`), which the caller feeds into the ::after flow-position rule —
+ * a ::before box is flow content the ::after would come after.
+ */
+function emitPseudo(el, originStyle, originRect, which, ctx, sink, precededByFlowContent) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+    if (ctx.pseudoUnsupported)
+        return false;
+    let ps;
+    try {
+        ps = ctx.win.getComputedStyle(el, which);
+    }
+    catch (_1) {
+        ctx.pseudoUnsupported = true; // e.g. jsdom — learn it once, not once per element
+        return false;
+    }
+    if (!ps)
+        return false;
+    const rawContent = ((_a = ps['content']) !== null && _a !== void 0 ? _a : '').trim();
+    // `content: none | normal` (or nothing readable) → the pseudo generates NO box.
+    if (rawContent === '' || rawContent === 'none' || rawContent === 'normal')
+        return false;
+    if (ps['display'] === 'none' || ps['visibility'] === 'hidden')
+        return true;
+    if (parseFloat((_b = ps['opacity']) !== null && _b !== void 0 ? _b : '1') === 0)
+        return true;
+    const text = parsePseudoContent(rawContent, ctx);
+    const paintsBox = pseudoPaintsBox(ps);
+    if (text === '' && !paintsBox)
+        return true; // exists, but there is nothing to draw
+    const w = resolveLen((_c = ps['width']) !== null && _c !== void 0 ? _c : '', originRect.width);
+    const h = resolveLen((_d = ps['height']) !== null && _d !== void 0 ? _d : '', originRect.height);
+    // The flow start of the origin's content box — where a static ::before sits.
+    const flowX = originRect.x +
+        px((_f = (_e = originStyle['border-left-width']) !== null && _e !== void 0 ? _e : originStyle['borderLeftWidth']) !== null && _f !== void 0 ? _f : '') +
+        px((_h = (_g = originStyle['padding-left']) !== null && _g !== void 0 ? _g : originStyle['paddingLeft']) !== null && _h !== void 0 ? _h : '');
+    const flowY = originRect.y +
+        px((_k = (_j = originStyle['border-top-width']) !== null && _j !== void 0 ? _j : originStyle['borderTopWidth']) !== null && _k !== void 0 ? _k : '') +
+        px((_m = (_l = originStyle['padding-top']) !== null && _l !== void 0 ? _l : originStyle['paddingTop']) !== null && _m !== void 0 ? _m : '');
+    const pos = ((_o = ps['position']) !== null && _o !== void 0 ? _o : 'static').toLowerCase();
+    let x;
+    let y;
+    if (pos === 'absolute' || pos === 'fixed') {
+        // Containing block approximated by the origin box — the decorative-pseudo idiom
+        // (`position: relative` origin, absolute pseudo) makes this exact.
+        const left = resolveLen((_p = ps['left']) !== null && _p !== void 0 ? _p : '', originRect.width);
+        const right = resolveLen((_q = ps['right']) !== null && _q !== void 0 ? _q : '', originRect.width);
+        const top = resolveLen((_r = ps['top']) !== null && _r !== void 0 ? _r : '', originRect.height);
+        const bottom = resolveLen((_s = ps['bottom']) !== null && _s !== void 0 ? _s : '', originRect.height);
+        x =
+            left !== null
+                ? originRect.x + left
+                : right !== null && w !== null
+                    ? originRect.x + originRect.width - right - w
+                    : left === null && right === null
+                        ? flowX // no offsets → the static position
+                        : null;
+        y =
+            top !== null
+                ? originRect.y + top
+                : bottom !== null && h !== null
+                    ? originRect.y + originRect.height - bottom - h
+                    : top === null && bottom === null
+                        ? flowY
+                        : null;
+    }
+    else {
+        if (which === '::after' && precededByFlowContent) {
+            ctx.warnings.push('a painted ::after pseudo-element flows after content this transcriber cannot ' +
+                'measure — it was skipped.');
+            return true;
+        }
+        x = flowX;
+        y = flowY;
+        if (pos === 'relative') {
+            x += (_u = resolveLen((_t = ps['left']) !== null && _t !== void 0 ? _t : '', originRect.width)) !== null && _u !== void 0 ? _u : 0;
+            y += (_w = resolveLen((_v = ps['top']) !== null && _v !== void 0 ? _v : '', originRect.height)) !== null && _w !== void 0 ? _w : 0;
+        }
+    }
+    if (x === null || y === null) {
+        ctx.warnings.push(`the position of a ${which} pseudo-element could not be derived — it was skipped.`);
+        return true;
+    }
+    const box = w !== null && h !== null ? { x, y, width: w, height: h } : null;
+    if (box && box.width > 0 && box.height > 0) {
+        emitBox(ps, box, ctx, sink);
+    }
+    else if (paintsBox) {
+        ctx.warnings.push(`a painted ${which} pseudo-element's box could not be derived (auto size) — its ` +
+            'background/border was skipped.');
+    }
+    if (text !== '') {
+        const fontSize = px((_y = (_x = ps['font-size']) !== null && _x !== void 0 ? _x : ps['fontSize']) !== null && _y !== void 0 ? _y : '12');
+        const lineBox = (_0 = resolveLen((_z = ps['line-height']) !== null && _z !== void 0 ? _z : '', 0)) !== null && _0 !== void 0 ? _0 : fontSize * 1.2;
+        const textRect = box !== null && box !== void 0 ? box : { x, y, width: w !== null && w !== void 0 ? w : 0, height: h !== null && h !== void 0 ? h : lineBox };
+        pushTextVNode(text, textRect, ps, ctx, sink);
+    }
+    return true;
+}
+const OVERFLOW_CLIPPING = new Set(['hidden', 'clip', 'auto', 'scroll']);
+/** `overflow` that clips → the element's (rounded) border box as a clip shape. */
+function overflowClipFor(style, rect) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const ox = (_c = (_b = (_a = style['overflow-x']) !== null && _a !== void 0 ? _a : style['overflowX']) !== null && _b !== void 0 ? _b : style['overflow']) !== null && _c !== void 0 ? _c : '';
+    const oy = (_f = (_e = (_d = style['overflow-y']) !== null && _d !== void 0 ? _d : style['overflowY']) !== null && _e !== void 0 ? _e : style['overflow']) !== null && _f !== void 0 ? _f : '';
+    if (!OVERFLOW_CLIPPING.has(ox) && !OVERFLOW_CLIPPING.has(oy))
+        return null;
+    const radius = px((_h = (_g = style['border-top-left-radius']) !== null && _g !== void 0 ? _g : style['borderTopLeftRadius']) !== null && _h !== void 0 ? _h : '0');
+    return clipShapeDef('rect', Object.assign({ x: round(rect.x), y: round(rect.y), width: round(rect.width), height: round(rect.height) }, (radius > 0 ? { rx: round(radius) } : {})));
+}
+/** Wrap one shape in a stably-identified `<clipPath>` def (same shape → same id). */
+function clipShapeDef(type, props) {
+    const id = (0, paint_servers_1.paintDefId)({ clip: type, props });
+    return {
+        id,
+        def: { type: 'clipPath', props: { id }, children: [{ type, props, children: [] }] },
+    };
+}
+/**
+ * A computed CSS `clip-path` → a clip def, or null. inset()/circle()/ellipse()/
+ * polygon() are transcribed; path()/url()/shape() cannot be expressed as one of the
+ * def shapes and are skipped WITH a warning — the content exports unclipped, which is
+ * a smaller lie than clipping it wrong.
+ */
+function clipPathShapeFor(value, rect, ctx) {
+    const t = (value !== null && value !== void 0 ? value : '').trim();
+    if (t === '' || t === 'none')
+        return null;
+    const m = /^(inset|circle|ellipse|polygon)\(([\s\S]*)\)(?:\s+([a-z-]+))?$/i.exec(t);
+    if (!m) {
+        ctx.warnings.push('an unsupported clip-path (path()/url()/reference-box form) was skipped — that ' +
+            'content is exported UNCLIPPED.');
+        return null;
+    }
+    if (m[3] && m[3].toLowerCase() !== 'border-box') {
+        ctx.warnings.push(`a clip-path reference box "${m[3]}" was approximated as border-box.`);
+    }
+    const kind = m[1].toLowerCase();
+    const args = m[2].trim();
+    const shape = kind === 'inset'
+        ? insetShape(args, rect)
+        : kind === 'circle'
+            ? circleShape(args, rect)
+            : kind === 'ellipse'
+                ? ellipseShape(args, rect)
+                : polygonShape(args, rect);
+    if (!shape) {
+        ctx.warnings.push(`a clip-path ${kind}() could not be parsed and was skipped — that content is exported UNCLIPPED.`);
+        return null;
+    }
+    return clipShapeDef(shape.type, shape.props);
+}
+/** `inset(t r b l round radius)` → a (rounded) rect. Percentages resolve per axis. */
+function insetShape(args, rect) {
+    var _a, _b, _c, _d, _e;
+    const [offsetsPart, roundPart] = args.split(/\bround\b/i);
+    const tokens = offsetsPart.trim().split(/\s+/).filter(Boolean);
+    if (tokens.length < 1 || tokens.length > 4)
+        return null;
+    // CSS 1-to-4 expansion: t / t+lr / t+lr+b / t r b l.
+    const o = [
+        tokens[0],
+        (_a = tokens[1]) !== null && _a !== void 0 ? _a : tokens[0],
+        (_b = tokens[2]) !== null && _b !== void 0 ? _b : tokens[0],
+        (_d = (_c = tokens[3]) !== null && _c !== void 0 ? _c : tokens[1]) !== null && _d !== void 0 ? _d : tokens[0],
+    ];
+    const top = resolveLen(o[0], rect.height);
+    const right = resolveLen(o[1], rect.width);
+    const bottom = resolveLen(o[2], rect.height);
+    const left = resolveLen(o[3], rect.width);
+    if (top === null || right === null || bottom === null || left === null)
+        return null;
+    const width = rect.width - left - right;
+    const height = rect.height - top - bottom;
+    if (!(width > 0) || !(height > 0))
+        return null;
+    const radius = roundPart ? resolveLen((_e = roundPart.trim().split(/[\s/]+/)[0]) !== null && _e !== void 0 ? _e : '', rect.width) : null;
+    return {
+        type: 'rect',
+        props: Object.assign({ x: round(rect.x + left), y: round(rect.y + top), width: round(width), height: round(height) }, (radius !== null && radius > 0 ? { rx: round(radius) } : {})),
+    };
+}
+/** The centre a `… at <position>` clause resolves to, in host-local pixels. */
+function shapeCentre(args, rect) {
+    var _a;
+    const c = (_a = parseRadialCenter(args)) !== null && _a !== void 0 ? _a : { x: 0.5, y: 0.5 };
+    return { cx: rect.x + rect.width * c.x, cy: rect.y + rect.height * c.y };
+}
+/** One radius token against one axis; `closest-`/`farthest-side` use the given distances. */
+function shapeRadius(token, basis, closest, farthest) {
+    const t = (token !== null && token !== void 0 ? token : '').trim().toLowerCase();
+    if (t === '' || t === 'closest-side')
+        return closest;
+    if (t === 'farthest-side')
+        return farthest;
+    return resolveLen(t, basis);
+}
+function circleShape(args, rect) {
+    const { cx, cy } = shapeCentre(args, rect);
+    const sides = [cx - rect.x, rect.x + rect.width - cx, cy - rect.y, rect.y + rect.height - cy];
+    const rToken = args.split(/\bat\b/i)[0].trim();
+    // A circle's percentage radius resolves against the reference-box diagonal / √2.
+    const r = shapeRadius(rToken, Math.hypot(rect.width, rect.height) / Math.SQRT2, Math.min(...sides), Math.max(...sides));
+    if (r === null || !(r > 0))
+        return null;
+    return { type: 'circle', props: { cx: round(cx), cy: round(cy), r: round(r) } };
+}
+function ellipseShape(args, rect) {
+    var _a, _b, _c;
+    const { cx, cy } = shapeCentre(args, rect);
+    const tokens = args.split(/\bat\b/i)[0].trim().split(/\s+/).filter(Boolean);
+    const rx = shapeRadius((_a = tokens[0]) !== null && _a !== void 0 ? _a : '', rect.width, Math.min(cx - rect.x, rect.x + rect.width - cx), Math.max(cx - rect.x, rect.x + rect.width - cx));
+    const ry = shapeRadius((_c = (_b = tokens[1]) !== null && _b !== void 0 ? _b : tokens[0]) !== null && _c !== void 0 ? _c : '', rect.height, Math.min(cy - rect.y, rect.y + rect.height - cy), Math.max(cy - rect.y, rect.y + rect.height - cy));
+    if (rx === null || ry === null || !(rx > 0) || !(ry > 0))
+        return null;
+    return {
+        type: 'ellipse',
+        props: { cx: round(cx), cy: round(cy), rx: round(rx), ry: round(ry) },
+    };
+}
+function polygonShape(args, rect) {
+    var _a;
+    const parts = splitTopLevel(args);
+    let start = 0;
+    let evenodd = false;
+    const first = ((_a = parts[0]) !== null && _a !== void 0 ? _a : '').trim().toLowerCase();
+    if (first === 'evenodd' || first === 'nonzero') {
+        evenodd = first === 'evenodd';
+        start = 1;
+    }
+    const points = [];
+    for (let i = start; i < parts.length; i++) {
+        const pair = parts[i].trim().split(/\s+/);
+        if (pair.length !== 2)
+            return null;
+        const vx = resolveLen(pair[0], rect.width);
+        const vy = resolveLen(pair[1], rect.height);
+        if (vx === null || vy === null)
+            return null;
+        points.push(`${round(rect.x + vx)},${round(rect.y + vy)}`);
+    }
+    if (points.length < 3)
+        return null;
+    return {
+        type: 'polygon',
+        props: Object.assign({ points: points.join(' ') }, (evenodd ? { 'clip-rule': 'evenodd' } : {})),
+    };
+}
+/** 4dp is finer than any renderer resolves, and keeps the output byte-stable. */
+function round(value) {
+    return Math.round(value * 1e4) / 1e4;
+}
+//# sourceMappingURL=capture-host.js.map