@react-x11/components 0.14.0 → 0.14.1

package/dist/html/paint.js

@@ -494,6 +494,7 @@ export function paintDocument(ctx, tree, options) {
         canvasSource: canvas?.source,
         negative: tree.negative,
         selectionStyler: options.selection ? tree.selectionStyler : null,
+        shapeStyler: tree.shapeStyler,
     });
     ctx.restore();
 }
@@ -1175,8 +1176,9 @@ function paintContent(ctx, box, options) {
             paintStacked(ctx, child, options);
     }
     if (visible) {
-        if (box.marker)
-            paintMarker(ctx, box.marker, options);
+        if (box.marker) {
+            paintMarker(ctx, box.marker, options, box.style.colorScheme);
+        }
         if (box.replaced === 'image')
             paintImage(ctx, box, options);
         else if (box.replaced === 'svg')
@@ -1742,7 +1744,7 @@ function paintFlowLines(ctx, box, options, outlines) {
         if (!intersects(child, options))
             continue;
         if (child.marker && child.style.visibility === 'visible') {
-            paintMarker(ctx, child.marker, options);
+            paintMarker(ctx, child.marker, options, child.style.colorScheme);
         }
         if (child.lines)
             paintLines(ctx, child, options);
@@ -3426,12 +3428,13 @@ function paintBackgroundImage(ctx, style, area, at, options, corners = null) {
         // a drawing is drawn a tile at a time, at the size it was given
         if (tiles <= MAX_TILES) {
             for (let y = fromY; y < toY; y += stepY) {
-                for (let x = fromX; x < toX; x += stepX)
-                    svg.draw(ctx, Math.round(x), Math.round(y), iw, ih, scale);
+                for (let x = fromX; x < toX; x += stepX) {
+                    svg.drawImage(ctx, Math.round(x), Math.round(y), iw, ih, scale, style.colorScheme);
+                }
             }
         }
         else {
-            svg.draw(ctx, x0, y0, iw, ih, scale);
+            svg.drawImage(ctx, x0, y0, iw, ih, scale, style.colorScheme);
         }
     }
     else if (tiles > 1 &&
@@ -3647,7 +3650,8 @@ function paintOutline(ctx, box, options) {
  * width: the CSS triangle a dropdown's caret and a tooltip's arrow are
  * drawn with, which came out as the rectangle around it. Only a solid side
  * is cut, and only against a side that is solid or paints nothing; dots,
- * dashes and a double border's two lines keep their rectangles.
+ * dashes and a double border's two lines keep their rectangles, the lines
+ * joined where two double sides of one colour meet (`fillSide`).
  */
 function paintBorders(ctx, box, options) {
     // most boxes have none, and are asked on every paint
@@ -3687,14 +3691,12 @@ function paintBorders(ctx, box, options) {
     const tr = paths && mitred(t, r, topInk, rightInk, topStyle, rightStyle);
     const br = paths && mitred(b, r, bottomInk, rightInk, bottomStyle, rightStyle);
     const bl = paths && mitred(b, l, bottomInk, leftInk, bottomStyle, leftStyle);
-    const edge = (ex, ey, ew, eh, style, color, horizontal) => {
-        const rect = clampRect(options, ex, ey, ew, eh);
-        if (!rect)
-            return;
+    const widths = [t, r, b, l];
+    const joins = doubleJoins(box);
+    /** A side with square corners, the top first and clockwise. */
+    const edge = (at, style, color) => {
         ctx.fillStyle = color;
-        // The un-clamped start is the dash phase's origin, so the pattern does
-        // not crawl as the viewport moves along a long edge.
-        fillEdge(ctx, rect, horizontal ? ex : ey, style, horizontal);
+        fillSide(ctx, options, at, x, y, w, h, widths, style, joins);
     };
     /** A side with a cut corner: its outer edge and then its inner one. */
     const side = (points, color) => {
@@ -3724,7 +3726,7 @@ function paintBorders(ctx, box, options) {
             side([x, y, x1, y, cutRight ? px1 : x1, py0, cutLeft ? px0 : x, py0], topInk);
         }
         else
-            edge(x, y, w, t, topStyle, topInk, true);
+            edge(0, topStyle, topInk);
     }
     if (bottomInk !== null) {
         const cutLeft = bl && !over(leftInk);
@@ -3733,21 +3735,21 @@ function paintBorders(ctx, box, options) {
             side([x1, y1, x, y1, cutLeft ? px0 : x, py1, cutRight ? px1 : x1, py1], bottomInk);
         }
         else
-            edge(x, y1 - b, w, b, bottomStyle, bottomInk, true);
+            edge(2, bottomStyle, bottomInk);
     }
     if (leftInk !== null) {
         if (tl || bl) {
             side([x, bl ? y1 : py1, x, tl ? y : py0, px0, py0, px0, py1], leftInk);
         }
         else
-            edge(x, y + t, l, h - t - b, leftStyle, leftInk, false);
+            edge(3, leftStyle, leftInk);
     }
     if (rightInk !== null) {
         if (tr || br) {
             side([x1, tr ? y : py0, x1, br ? y1 : py1, px1, py1, px1, py0], rightInk);
         }
         else
-            edge(x1 - r, y + t, r, h - t - b, rightStyle, rightInk, false);
+            edge(1, rightStyle, rightInk);
     }
 }
 /**
@@ -3858,9 +3860,10 @@ function paintBorderImage(ctx, box, options) {
         const svg = image instanceof SvgDrawing ? image : null;
         const w = Math.max(1, Math.round(cw));
         const h = Math.max(1, Math.round(ch));
-        const drawn = options.cached?.(`border-image|${key}|${w}x${h}`, w, h, (sctx) => {
+        const scheme = box.style.colorScheme;
+        const drawn = options.cached?.(`border-image|${key}|${w}x${h}|${scheme}`, w, h, (sctx) => {
             if (svg)
-                svg.draw(sctx, 0, 0, w, h, scale);
+                svg.drawImage(sctx, 0, 0, w, h, scale, scheme);
             else if (typeof source !== 'string') {
                 const paint = gradientFill(sctx, source, 0, 0, w, h, box.style.color);
                 if (paint)
@@ -4062,22 +4065,107 @@ function roundedRing(ctx, box, x, y, w, h, options) {
         return true;
     if (isTransparent(color))
         return true;
-    const rect = clampRect(options, x, y, w, h);
-    if (!rect)
+    const ring = cutRing(options, x, y, w, h, corners, box.borderTop, box.borderRight, box.borderBottom, box.borderLeft);
+    if (!ring)
         return true;
-    const top = box.borderTop;
-    const right = box.borderRight;
-    const bottom = box.borderBottom;
-    const left = box.borderLeft;
+    const { outer, inner } = ring;
     ctx.fillStyle = inkColor(color, s.color);
-    fillRing(ctx, { x: rect.x, y: rect.y, width: rect.w, height: rect.h }, corners, {
-        x: rect.x + left,
-        y: rect.y + top,
-        width: Math.max(0, rect.w - left - right),
-        height: Math.max(0, rect.h - top - bottom),
-    }, insetCorners(corners, top, right, bottom, left));
+    fillRing(ctx, outer.rect, outer.corners, inner ? inner.rect : { x: 0, y: 0, width: 0, height: 0 }, inner ? inner.corners : outer.corners);
     return true;
 }
+/**
+ * A rounded box's ring — its border edge and its padding edge, the box
+ * inside its borders — cut to the neighbourhood of what is being painted,
+ * as `clampRect` cuts a rectangle. Both edges are the box's own, cut to
+ * one window, so what is left is the part of the true ring in it. Cutting
+ * the box first and insetting the cut by the borders put the hole a
+ * border's width in from the cut rather than from the box's edge, and left
+ * none where a border was wider than `CLAMP_PAD`: the ring filled whatever
+ * of the box a paint reached. A cut is straight, so a side of the window
+ * is moved out past any corner's curve it would cross, and a corner on a
+ * side the window cut is square, its curve being outside. Null where the
+ * ring has nothing in the window.
+ */
+function cutRing(options, x, y, w, h, corners, top, right, bottom, left) {
+    const { x: cx, y: cy } = corners;
+    // where each corner's curve runs, across and down — the padding edge's
+    // run inside the border edge's
+    const across = [
+        [x, x + cx[0]],
+        [x + w - cx[1], x + w],
+        [x + w - cx[2], x + w],
+        [x, x + cx[3]],
+    ];
+    const down = [
+        [y, y + cy[0]],
+        [y, y + cy[1]],
+        [y + h - cy[2], y + h],
+        [y + h - cy[3], y + h],
+    ];
+    const d = options.damage;
+    const side = (at, spans, towards) => Math.max(-COORD_LIMIT, Math.min(COORD_LIMIT, outOfSpans(at, spans, towards)));
+    const x0 = side(d ? d.x - CLAMP_PAD : -COORD_LIMIT, across, -1);
+    const y0 = side(d ? d.y - CLAMP_PAD : -COORD_LIMIT, down, -1);
+    const x1 = side(d ? d.x + d.width + CLAMP_PAD : COORD_LIMIT, across, 1);
+    const y1 = side(d ? d.y + d.height + CLAMP_PAD : COORD_LIMIT, down, 1);
+    const cut = (rx, ry, rw, rh, c) => {
+        const l = Math.max(rx, x0);
+        const t = Math.max(ry, y0);
+        const r = Math.min(rx + rw, x1);
+        const b = Math.min(ry + rh, y1);
+        if (r <= l || b <= t)
+            return null;
+        // the corners of the sides the window left where they were
+        const kept = [
+            t === ry && l === rx,
+            t === ry && r === rx + rw,
+            b === ry + rh && r === rx + rw,
+            b === ry + rh && l === rx,
+        ];
+        return {
+            rect: { x: l, y: t, width: r - l, height: b - t },
+            corners: {
+                x: c.x.map((v, i) => (kept[i] ? v : 0)),
+                y: c.y.map((v, i) => (kept[i] ? v : 0)),
+            },
+        };
+    };
+    const outer = cut(x, y, w, h, corners);
+    if (!outer)
+        return null;
+    const iw = w - left - right;
+    const ih = h - top - bottom;
+    const inner = iw > 0 && ih > 0
+        ? cut(x + left, y + top, iw, ih, insetCorners(corners, top, right, bottom, left))
+        : null;
+    // a window inside the padding edge, where the ring has nothing
+    if (inner && sameRounded(outer, inner))
+        return null;
+    return { outer, inner };
+}
+/** A position moved out of any of `spans` it is inside, towards their
+ *  starts where `towards` is negative and their ends where it is not. */
+function outOfSpans(at, spans, towards) {
+    for (let moved = true; moved;) {
+        moved = false;
+        for (const [from, to] of spans) {
+            if (at > from && at < to) {
+                at = towards < 0 ? from : to;
+                moved = true;
+            }
+        }
+    }
+    return at;
+}
+/** Whether two rounded rectangles are one shape. */
+function sameRounded(a, b) {
+    return (a.rect.x === b.rect.x &&
+        a.rect.y === b.rect.y &&
+        a.rect.width === b.rect.width &&
+        a.rect.height === b.rect.height &&
+        a.corners.x.every((v, i) => v === b.corners.x[i]) &&
+        a.corners.y.every((v, i) => v === b.corners.y[i]));
+}
 /**
  * Clip to what a box's border paints, for a layer of `background-clip:
  * border-area` (CSS Backgrounds 4, 2.1): each side's width and style, and
@@ -4085,12 +4173,17 @@ function roundedRing(ctx, box, x, y, w, h, options) {
  * the value is for. The shapes are the border painter's own, so that the
  * background shows exactly where that border would: the ring `roundedRing`
  * fills where a rounded border is solid, the ring the trapezoids of a 3D
- * style make, and otherwise the rectangles `fillEdge` fills a side at a
- * time — the dots, the dashes, the two lines of a double border. All of
+ * style make, and otherwise the rectangles `fillSide` fills a side at a
+ * time — the dots, the dashes, the two lines of a double border joined as
+ * they are painted, by the sides' colours though neither is drawn. All of
  * them run clockwise and a ring's inside the other way, so the clip is the
- * union by the non-zero rule, the one every context's `clip` takes. False
- * where the border paints nothing or the context cannot clip, and nothing
- * is pushed.
+ * union by the non-zero rule, the one every context's `clip` takes. Each
+ * is placed from the box's edges and then cut to the painted area: placed
+ * from the cut, a border wider than `CLAMP_PAD` put its bands and its
+ * ring's hole a border's width in from wherever the paint was cut, and
+ * the background was painted over the content of a box repainted in part.
+ * False where the border paints nothing in the painted area or the context
+ * cannot clip, and nothing is pushed.
  */
 function pushBorderArea(ctx, box, options) {
     const t = box.borderTop;
@@ -4109,44 +4202,53 @@ function pushBorderArea(ctx, box, options) {
     const h = Math.round(top + frameHeight(box)) - y;
     if (w <= 0 || h <= 0)
         return false;
-    const area = clampRect(options, x, y, w, h);
-    if (!area)
+    if (!clampRect(options, x, y, w, h))
         return false;
     const corners = cornersOf(s, w, h);
     ctx.save();
     ctx.beginPath();
+    // how many shapes the path has: none, and the border paints nothing here
+    let shapes = 0;
     if (corners && canCurve(ctx) && solidBorder(box)) {
-        roundedRect(ctx, area.x, area.y, area.w, area.h, corners, true);
-        const iw = area.w - l - r;
-        const ih = area.h - t - b;
-        if (iw > 0 && ih > 0) {
-            const inner = insetCorners(corners, t, r, b, l);
-            roundedRect(ctx, area.x + l, area.y + t, iw, ih, inner, true, true);
+        const ring = cutRing(options, x, y, w, h, corners, t, r, b, l);
+        if (ring) {
+            const add = ({ rect, corners: c }, hole) => roundedRect(ctx, rect.x, rect.y, rect.width, rect.height, c, true, hole);
+            add(ring.outer, false);
+            // the padding edge run the other way, which cuts it out
+            if (ring.inner)
+                add(ring.inner, true);
+            shapes = 1;
         }
     }
-    else if (sculpted(s)) {
-        // a band a side, which the trapezoids cover between them
-        ctx.rect(area.x, area.y, area.w, t);
-        ctx.rect(area.x, area.y + area.h - b, area.w, b);
-        ctx.rect(area.x, area.y + t, l, area.h - t - b);
-        ctx.rect(area.x + area.w - r, area.y + t, r, area.h - t - b);
-    }
     else {
-        const path = { fillRect: ctx.rect.bind(ctx) };
-        const edge = (ex, ey, ew, eh, style, horizontal) => {
-            const rect = clampRect(options, ex, ey, ew, eh);
-            if (rect)
-                fillEdge(path, rect, horizontal ? ex : ey, style, horizontal);
+        // A side at a time, from the box's edges and cut to the painted area
+        // after: a 3D side as a band, which the trapezoids cover between them,
+        // and any other as `fillSide` fills it.
+        const path = {
+            fillRect(ex, ey, ew, eh) {
+                ctx.rect(ex, ey, ew, eh);
+                shapes += 1;
+            },
         };
-        const between = h - t - b;
-        if (t > 0)
-            edge(x, y, w, t, s.borderTopStyle, true);
-        if (b > 0)
-            edge(x, y + h - b, w, b, s.borderBottomStyle, true);
-        if (l > 0)
-            edge(x, y + t, l, between, s.borderLeftStyle, false);
-        if (r > 0)
-            edge(x + w - r, y + t, r, between, s.borderRightStyle, false);
+        const widths = [t, r, b, l];
+        const joins = doubleJoins(box);
+        const styles = sculpted(s)
+            ? ['solid', 'solid', 'solid', 'solid']
+            : [
+                s.borderTopStyle,
+                s.borderRightStyle,
+                s.borderBottomStyle,
+                s.borderLeftStyle,
+            ];
+        for (let at = 0; at < 4; at += 1) {
+            if (widths[at] > 0) {
+                fillSide(path, options, at, x, y, w, h, widths, styles[at], joins);
+            }
+        }
+    }
+    if (!shapes) {
+        ctx.restore();
+        return false;
     }
     ctx.clip();
     return true;
@@ -4175,10 +4277,12 @@ function sculpted(s) {
  * colour's shadow and `outset` its bottom and right; `groove` is `inset`
  * outside `outset`, a band each, and `ridge` the other way round
  * (`borderShades`). A side of any other style takes its trapezoid in its
- * colour. The trapezoids are clamped to the painted area, which leaves a
- * cut end square and out of sight and keeps a long box's far corners out
- * of X's coordinates. False where the context cannot draw a path, and the
- * sides are drawn straight.
+ * colour. The trapezoids are cut to the painted area (`fillPolygon`), which
+ * keeps a long box's far corners out of X's coordinates and a join on its
+ * diagonal: its corners clamped in, a border wider than `CLAMP_PAD` turned
+ * the join to cross the damage at 45° wherever it was, and a scrolled
+ * strip smeared the corners of a thick one. False where the context cannot
+ * draw a path, and the sides are drawn straight.
  */
 function paintSculpted(ctx, box, x, y, w, h, options) {
     if (!ctx.beginPath || !ctx.moveTo || !ctx.lineTo || !ctx.fill)
@@ -4191,8 +4295,6 @@ function paintSculpted(ctx, box, x, y, w, h, options) {
     const r = box.borderRight;
     const b = box.borderBottom;
     const l = box.borderLeft;
-    const cx = (v) => Math.max(area.x - 1, Math.min(v, area.x + area.w + 1));
-    const cy = (v) => Math.max(area.y - 1, Math.min(v, area.y + area.h + 1));
     /** The band between the edge `outer` of the way in and `inner`, for one
      *  side: 0 is the border box, 1 the padding box. */
     const band = (side, outer, inner, color) => {
@@ -4212,12 +4314,7 @@ function paintSculpted(ctx, box, x, y, w, h, options) {
                     ? [o.x1, o.y1, o.x0, o.y1, i.x0, i.y1, i.x1, i.y1]
                     : [o.x0, o.y1, o.x0, o.y0, i.x0, i.y0, i.x0, i.y1];
         ctx.fillStyle = color;
-        ctx.beginPath();
-        ctx.moveTo(cx(points[0]), cy(points[1]));
-        for (let k = 2; k < 8; k += 2)
-            ctx.lineTo(cx(points[k]), cy(points[k + 1]));
-        ctx.closePath?.();
-        ctx.fill();
+        fillPolygon(ctx, points, area);
     };
     const sides = [
         [t, s.borderTopStyle, s.borderTopColor],
@@ -4329,6 +4426,91 @@ function paintCollapsedBorders(ctx, table, options) {
         fillEdge(ctx, rect, s.horizontal ? s.x : s.y, s.border.style, s.horizontal);
     }
 }
+/**
+ * One side of a border box at `x, y`, `w` by `h` — `at` counts the top
+ * first and clockwise — as rectangles cut to what the paint reaches: the
+ * top and the bottom the width of the box and the left and the right
+ * between them, so a corner is a square of one side or the other.
+ *
+ * A double side is two lines, a band each along its outer and its inner
+ * edge. Where it meets another double side of its colour (`joins`, the
+ * top left corner first) the lines of the two meet as two frames do, one
+ * inside the other (CSS Backgrounds 3, 4.2 and 4.3): the outer line of the
+ * left or the right runs on to the outer line of the top or the bottom,
+ * and the inner line of the top or the bottom stops at the inner line of
+ * the side. With square corners the outer frame was open at each of them
+ * and the inner line of the top ran on past the side's to the border edge.
+ * Each line is cut to the paint on its own, so a border wider than the
+ * reach around the paint keeps its lines at its edges, and not at the
+ * edges of the part of it cut out.
+ */
+function fillSide(ctx, options, at, x, y, w, h, widths, style, joins) {
+    const [t, r, b, l] = widths;
+    const width = widths[at];
+    const horizontal = (at & 1) === 0;
+    if (style === 'double' && width >= 3) {
+        const band = doubleBand(width);
+        const line = (lx, ly, lw, lh) => {
+            const rect = clampRect(options, lx, ly, lw, lh);
+            if (rect)
+                ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+        };
+        if (horizontal) {
+            // the outer line the width of the box, and the inner one from the
+            // inner line of a side it joins, or from the edge of the box
+            const from = joins[at === 0 ? 0 : 3] ? x + l - doubleBand(l) : x;
+            const to = joins[at === 0 ? 1 : 2] ? x + w - r + doubleBand(r) : x + w;
+            line(x, at === 0 ? y : y + h - band, w, band);
+            line(from, at === 0 ? y + t - band : y + h - b, to - from, band);
+        }
+        else {
+            // the outer line from the outer line of a side it joins, or from
+            // that side's inner edge, and the inner one between the two sides
+            const from = joins[at === 3 ? 0 : 1] ? y + doubleBand(t) : y + t;
+            const to = joins[at === 3 ? 3 : 2] ? y + h - doubleBand(b) : y + h - b;
+            line(at === 3 ? x : x + w - band, from, band, to - from);
+            line(at === 3 ? x + l - band : x + w - r, y + t, band, h - t - b);
+        }
+        return;
+    }
+    const ex = at === 1 ? x + w - r : x;
+    const ey = at === 0 ? y : at === 2 ? y + h - b : y + t;
+    const rect = horizontal
+        ? clampRect(options, ex, ey, w, width)
+        : clampRect(options, ex, ey, width, h - t - b);
+    // The un-clamped start is the dash phase's origin, so the pattern does
+    // not crawl as the viewport moves along a long edge.
+    if (rect)
+        fillEdge(ctx, rect, horizontal ? ex : ey, style, horizontal);
+}
+/**
+ * The corners of a box where two double sides of one colour meet, the top
+ * left first and clockwise, and whose lines `fillSide` joins. By the
+ * colours as written, a transparent one included, which is how a clip to
+ * the border's area draws the border it does not paint.
+ */
+function doubleJoins(box) {
+    const s = box.style;
+    const color = (width, style, value) => style === 'double' && width >= 3 ? inkColor(value, s.color) : null;
+    const top = color(box.borderTop, s.borderTopStyle, s.borderTopColor);
+    const bottom = color(box.borderBottom, s.borderBottomStyle, s.borderBottomColor);
+    if (top === null && bottom === null)
+        return UNJOINED;
+    const right = color(box.borderRight, s.borderRightStyle, s.borderRightColor);
+    const left = color(box.borderLeft, s.borderLeftStyle, s.borderLeftColor);
+    return [
+        top !== null && top === left,
+        top !== null && top === right,
+        bottom !== null && bottom === right,
+        bottom !== null && bottom === left,
+    ];
+}
+const UNJOINED = [false, false, false, false];
+/** How wide each of a double border's two lines is, the gap between them
+ *  what is left of the side. */
+function doubleBand(thickness) {
+    return Math.max(1, Math.floor(thickness / 3));
+}
 function fillEdge(ctx, rect, phaseOrigin, style, horizontal) {
     const { x, y, w, h } = rect;
     const length = horizontal ? w : h;
@@ -4355,7 +4537,7 @@ function fillEdge(ctx, rect, phaseOrigin, style, horizontal) {
         return;
     }
     if (style === 'double' && thickness >= 3) {
-        const band = Math.max(1, Math.floor(thickness / 3));
+        const band = doubleBand(thickness);
         if (horizontal) {
             ctx.fillRect(x, y, length, band);
             ctx.fillRect(x, y + thickness - band, length, band);
@@ -4369,7 +4551,9 @@ function fillEdge(ctx, rect, phaseOrigin, style, horizontal) {
     ctx.fillRect(x, y, w, h);
 }
 /** A list item's bullet or number, in the margin. */
-function paintMarker(ctx, marker, options) {
+function paintMarker(ctx, marker, options, 
+/** The item's colour scheme, which an SVG image in it is drawn in. */
+scheme) {
     const x = marker.x + options.originX;
     const y = marker.y + options.originY;
     if (marker.image) {
@@ -4379,7 +4563,7 @@ function paintMarker(ctx, marker, options) {
         if (!loaded || !(width > 0 && height > 0))
             return;
         if (loaded.image instanceof SvgDrawing) {
-            loaded.image.draw(ctx, x, y, width, height, options.scale ?? 1);
+            loaded.image.drawImage(ctx, x, y, width, height, options.scale ?? 1, scheme);
         }
         else
             ctx.drawImage?.(loaded.image, x, y, width, height);
@@ -4411,7 +4595,7 @@ function paintImage(ctx, box, options) {
         const past = at.x < x || at.y < y || at.x + at.w > x + w || at.y + at.h > y + h;
         const clipped = (!!corners || past) && pushClip(ctx, { x, y, w, h }, corners);
         if (image instanceof SvgDrawing) {
-            image.draw(ctx, at.x, at.y, at.w, at.h, options.scale ?? 1);
+            image.drawImage(ctx, at.x, at.y, at.w, at.h, options.scale ?? 1, box.style.colorScheme);
         }
         else
             ctx.drawImage(image, at.x, at.y, at.w, at.h);
@@ -4499,7 +4683,8 @@ function fitted(box, x, y, w, h) {
 /** An inline `<svg>`, drawn in its content box. Its `currentColor` is the
  *  box's `color`, as an icon's is the text's around it, and what it is
  *  painted with the box's `fill` and `stroke`, where the document's style
- *  sheets set them: an icon set's `.icon { fill: currentColor }`. */
+ *  sheets set them: an icon set's `.icon { fill: currentColor }`. What
+ *  they give a shape inside it is asked for here (`BoxTree.shapeStyler`). */
 function paintSvg(ctx, box, options) {
     if (!box.el)
         return;
@@ -4511,7 +4696,7 @@ function paintSvg(ctx, box, options) {
     const paint = (value) => value === null || value === 'currentColor' || value === 'none'
         ? value
         : inkColor(value, style.color);
-    inlineDrawing(box.el).draw(ctx, x, y, w, h, options.scale ?? 1, style.color, paint(style.fill), paint(style.stroke));
+    inlineDrawing(box.el).draw(ctx, x, y, w, h, options.scale ?? 1, style.color, paint(style.fill), paint(style.stroke), options.shapeStyler?.(box) ?? null);
 }
 /**
  * The X protocol carries glyph positions as Int16, so anything drawn past