@react-x11/components 0.14.0 → 0.14.1

package/src/html/paint.ts

@@ -88,6 +88,7 @@ import type {
   LineText,
   Marker,
   SelectionStyler,
+  ShapeStyler,
 } from './layout/boxes.js';
 import type { SelectionStyle } from './css/cascade.js';
 import {
@@ -247,6 +248,9 @@ export interface PaintOptions {
   /** @internal Each box's `::selection`, where a rule styles one
    *  (`BoxTree.selectionStyler`). */
   selectionStyler?: SelectionStyler | null;
+  /** @internal What the rules give the shapes in each drawing, where one
+   *  could reach any (`BoxTree.shapeStyler`). */
+  shapeStyler?: ShapeStyler | null;
 }
 
 /**
@@ -705,6 +709,7 @@ export function paintDocument(
     canvasSource: canvas?.source,
     negative: tree.negative,
     selectionStyler: options.selection ? tree.selectionStyler : null,
+    shapeStyler: tree.shapeStyler,
   });
   ctx.restore();
 }
@@ -1535,7 +1540,9 @@ function paintContent(
     for (const child of below) 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') paintSvg(ctx, box, options);
   }
@@ -2250,7 +2257,7 @@ function paintFlowLines(
     }
     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);
     paintFlowLines(ctx, child, options, outlines);
@@ -4230,11 +4237,20 @@ function paintBackgroundImage(
     // 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 &&
@@ -4478,7 +4494,8 @@ function paintOutline(
  * 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: PaintContext,
@@ -4523,21 +4540,16 @@ function paintBorders(
     paths && mitred(b, r, bottomInk, rightInk, bottomStyle, rightStyle);
   const bl = paths && mitred(b, l, bottomInk, leftInk, bottomStyle, leftStyle);
 
+  const widths = [t, r, b, l];
+  const joins = doubleJoins(box);
+  /** A side with square corners, the top first and clockwise. */
   const edge = (
-    ex: number,
-    ey: number,
-    ew: number,
-    eh: number,
+    at: number,
     style: ComputedStyle['borderTopStyle'],
     color: string,
-    horizontal: boolean,
   ): void => {
-    const rect = clampRect(options, ex, ey, ew, eh);
-    if (!rect) return;
     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: number[], color: string): void => {
@@ -4568,7 +4580,7 @@ function paintBorders(
         [x, y, x1, y, cutRight ? px1 : x1, py0, cutLeft ? px0 : x, py0],
         topInk,
       );
-    } else edge(x, y, w, t, topStyle, topInk, true);
+    } else edge(0, topStyle, topInk);
   }
   if (bottomInk !== null) {
     const cutLeft = bl && !over(leftInk);
@@ -4578,17 +4590,17 @@ function paintBorders(
         [x1, y1, x, y1, cutLeft ? px0 : x, py1, cutRight ? px1 : x1, py1],
         bottomInk,
       );
-    } else edge(x, y1 - b, w, b, bottomStyle, bottomInk, true);
+    } else 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);
+    } else 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);
+    } else edge(1, rightStyle, rightInk);
   }
 }
 
@@ -4715,12 +4727,13 @@ function paintBorderImage(
     const svg = image instanceof SvgDrawing ? image : null;
     const w = Math.max(1, Math.round(cw));
     const h = Math.max(1, Math.round(ch));
+    const scheme = box.style.colorScheme;
     const drawn = options.cached?.(
-      `border-image|${key}|${w}x${h}`,
+      `border-image|${key}|${w}x${h}|${scheme}`,
       w,
       h,
       (sctx) => {
-        if (svg) svg.draw(sctx, 0, 0, w, h, scale);
+        if (svg) 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) fillGradient(sctx, paint, { x: 0, y: 0, w, h });
@@ -4942,28 +4955,164 @@ function roundedRing(
   }
   if (color === null) return true;
   if (isTransparent(color)) return true;
-  const rect = clampRect(options, x, y, w, h);
-  if (!rect) return true;
-  const top = box.borderTop;
-  const right = box.borderRight;
-  const bottom = box.borderBottom;
-  const left = box.borderLeft;
+  const ring = cutRing(
+    options,
+    x,
+    y,
+    w,
+    h,
+    corners,
+    box.borderTop,
+    box.borderRight,
+    box.borderBottom,
+    box.borderLeft,
+  );
+  if (!ring) return true;
+  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),
+    outer.rect,
+    outer.corners,
+    inner ? inner.rect : { x: 0, y: 0, width: 0, height: 0 },
+    inner ? inner.corners : outer.corners,
   );
   return true;
 }
 
+/** A rectangle and the radii of its corners. */
+interface Rounded {
+  rect: Rect;
+  corners: Corners;
+}
+
+/**
+ * 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: PaintOptions,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  corners: Corners,
+  top: number,
+  right: number,
+  bottom: number,
+  left: number,
+): { outer: Rounded; inner: Rounded | null } | null {
+  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: [number, number][] = [
+    [x, x + cx[0]],
+    [x + w - cx[1], x + w],
+    [x + w - cx[2], x + w],
+    [x, x + cx[3]],
+  ];
+  const down: [number, number][] = [
+    [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: number, spans: [number, number][], towards: number) =>
+    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: number,
+    ry: number,
+    rw: number,
+    rh: number,
+    c: Corners,
+  ): Rounded | null => {
+    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)) as Corners['x'],
+        y: c.y.map((v, i) => (kept[i] ? v : 0)) as Corners['y'],
+      },
+    };
+  };
+  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: number,
+  spans: readonly [number, number][],
+  towards: number,
+): number {
+  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: Rounded, b: Rounded): boolean {
+  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
@@ -4971,12 +5120,17 @@ function roundedRing(
  * 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: PaintContext,
@@ -4998,43 +5152,60 @@ function pushBorderArea(
   const w = Math.round(left + box.width) - x;
   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) return false;
+  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 }: Rounded, hole: boolean): void =>
+        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: number,
-      ey: number,
-      ew: number,
-      eh: number,
-      style: ComputedStyle['borderTopStyle'],
-      horizontal: boolean,
-    ): void => {
-      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: number, ey: number, ew: number, eh: number) {
+        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: ComputedStyle['borderTopStyle'][] = 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;
@@ -5071,10 +5242,12 @@ function sculpted(s: ComputedStyle): boolean {
  * 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: PaintContext,
@@ -5093,10 +5266,6 @@ function paintSculpted(
   const r = box.borderRight;
   const b = box.borderBottom;
   const l = box.borderLeft;
-  const cx = (v: number) =>
-    Math.max(area.x - 1, Math.min(v, area.x + area.w + 1));
-  const cy = (v: number) =>
-    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: number, outer: number, inner: number, color: string) => {
@@ -5117,12 +5286,7 @@ function paintSculpted(
             ? [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: [number, string, string][] = [
     [t, s.borderTopStyle, s.borderTopColor],
@@ -5249,6 +5413,111 @@ function paintCollapsedBorders(
   }
 }
 
+/**
+ * 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: Pick<FillContext, 'fillRect'>,
+  options: PaintOptions,
+  at: number,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  widths: readonly number[],
+  style: ComputedStyle['borderTopStyle'],
+  joins: readonly boolean[],
+): void {
+  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: number, ly: number, lw: number, lh: number): void => {
+      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: Frame): readonly boolean[] {
+  const s = box.style;
+  const color = (
+    width: number,
+    style: ComputedStyle['borderTopStyle'],
+    value: string,
+  ): string | null =>
+    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: readonly boolean[] = [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: number): number {
+  return Math.max(1, Math.floor(thickness / 3));
+}
+
 function fillEdge(
   ctx: Pick<FillContext, 'fillRect'>,
   rect: { x: number; y: number; w: number; h: number },
@@ -5277,7 +5546,7 @@ function fillEdge(
     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);
@@ -5295,6 +5564,8 @@ function paintMarker(
   ctx: PaintContext,
   marker: Marker,
   options: PaintOptions,
+  /** The item's colour scheme, which an SVG image in it is drawn in. */
+  scheme: 'light' | 'dark',
 ): void {
   const x = marker.x + options.originX;
   const y = marker.y + options.originY;
@@ -5304,7 +5575,15 @@ function paintMarker(
     const loaded = options.backgroundImageFor?.(url);
     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);
     return;
   }
@@ -5336,7 +5615,15 @@ function paintImage(ctx: PaintContext, box: Box, options: PaintOptions): void {
     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);
     if (clipped) ctx.restore();
     return;
@@ -5427,7 +5714,8 @@ function fitted(
 /** 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: PaintContext, box: Box, options: PaintOptions): void {
   if (!box.el) return;
   const x = Math.round(box.contentX + options.originX);
@@ -5449,6 +5737,7 @@ function paintSvg(ctx: PaintContext, box: Box, options: PaintOptions): void {
     style.color,
     paint(style.fill),
     paint(style.stroke),
+    options.shapeStyler?.(box) ?? null,
   );
 }