@motionscript/renderer 0.1.0-alpha.9 → 0.1.0

package/dist/index.js

@@ -8242,6 +8242,222 @@ function dashedPath(cs, dash, offset, dots, fit) {
 	return any ? b.build() : null;
 }
 //#endregion
+//#region web/src/adapter/svg-path.ts
+/** Endpoint-parameterised arc → cubic segments (SVG implementation notes F.6). */
+function arcTo(b, x1, y1, rx, ry, phi, large, sweep, x2, y2) {
+	if (rx === 0 || ry === 0) {
+		b.lineTo(x2, y2);
+		return;
+	}
+	rx = Math.abs(rx);
+	ry = Math.abs(ry);
+	const c = Math.cos(phi), s = Math.sin(phi);
+	const dx = (x1 - x2) / 2, dy = (y1 - y2) / 2;
+	const xp = c * dx + s * dy, yp = -s * dx + c * dy;
+	const lam = xp * xp / (rx * rx) + yp * yp / (ry * ry);
+	if (lam > 1) {
+		rx *= Math.sqrt(lam);
+		ry *= Math.sqrt(lam);
+	}
+	const num = rx * rx * ry * ry - rx * rx * yp * yp - ry * ry * xp * xp;
+	const den = rx * rx * yp * yp + ry * ry * xp * xp;
+	let k = Math.sqrt(Math.max(0, num / den));
+	if (large === sweep) k = -k;
+	const cxp = k * rx * yp / ry, cyp = -k * ry * xp / rx;
+	const cx = c * cxp - s * cyp + (x1 + x2) / 2, cy = s * cxp + c * cyp + (y1 + y2) / 2;
+	const ang = (ux, uy, vx, vy) => Math.atan2(ux * vy - uy * vx, ux * vx + uy * vy);
+	const t1 = ang(1, 0, (xp - cxp) / rx, (yp - cyp) / ry);
+	let dt = ang((xp - cxp) / rx, (yp - cyp) / ry, (-xp - cxp) / rx, (-yp - cyp) / ry);
+	if (!sweep && dt > 0) dt -= 2 * Math.PI;
+	else if (sweep && dt < 0) dt += 2 * Math.PI;
+	const n = Math.ceil(Math.abs(dt) / (Math.PI / 2) - 1e-9);
+	const seg = dt / n;
+	const alpha = 4 / 3 * Math.tan(seg / 4);
+	for (let i = 0; i < n; i++) {
+		const ta = t1 + i * seg, tb = ta + seg;
+		const cosA = Math.cos(ta), sinA = Math.sin(ta), cosB = Math.cos(tb), sinB = Math.sin(tb);
+		const ax = cx + rx * cosA * c - ry * sinA * s, ay = cy + rx * cosA * s + ry * sinA * c;
+		const bx = cx + rx * cosB * c - ry * sinB * s, by = cy + rx * cosB * s + ry * sinB * c;
+		const dax = -rx * sinA * c - ry * cosA * s, day = -rx * sinA * s + ry * cosA * c;
+		const dbx = -rx * sinB * c - ry * cosB * s, dby = -rx * sinB * s + ry * cosB * c;
+		b.cubicTo(ax + alpha * dax, ay + alpha * day, bx - alpha * dbx, by - alpha * dby, i === n - 1 ? x2 : bx, i === n - 1 ? y2 : by);
+	}
+}
+function parseSvgPath(d) {
+	const b = new PathBuilder();
+	const tokens = d.match(/[a-zA-Z]|-?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/g) ?? [];
+	let i = 0;
+	let cmd = "";
+	let x = 0, y = 0, sx = 0, sy = 0;
+	let lcx = 0, lcy = 0, lqx = 0, lqy = 0;
+	let prev = "";
+	const num = () => Number(tokens[i++]);
+	const more = () => i < tokens.length && !/[a-zA-Z]/.test(tokens[i]);
+	while (i < tokens.length) {
+		if (/[a-zA-Z]/.test(tokens[i])) cmd = tokens[i++];
+		const rel = cmd === cmd.toLowerCase();
+		const C = cmd.toUpperCase();
+		const ox = rel ? x : 0, oy = rel ? y : 0;
+		switch (C) {
+			case "M":
+				x = ox + num();
+				y = oy + num();
+				b.moveTo(x, y);
+				sx = x;
+				sy = y;
+				cmd = rel ? "l" : "L";
+				break;
+			case "L":
+				x = ox + num();
+				y = oy + num();
+				b.lineTo(x, y);
+				break;
+			case "H":
+				x = (rel ? x : 0) + num();
+				b.lineTo(x, y);
+				break;
+			case "V":
+				y = (rel ? y : 0) + num();
+				b.lineTo(x, y);
+				break;
+			case "C": {
+				const x1 = ox + num(), y1 = oy + num(), x2 = ox + num(), y2 = oy + num();
+				x = ox + num();
+				y = oy + num();
+				b.cubicTo(x1, y1, x2, y2, x, y);
+				lcx = x2;
+				lcy = y2;
+				break;
+			}
+			case "S": {
+				const r = prev === "C" || prev === "S";
+				const x1 = r ? 2 * x - lcx : x, y1 = r ? 2 * y - lcy : y;
+				const x2 = ox + num(), y2 = oy + num();
+				x = ox + num();
+				y = oy + num();
+				b.cubicTo(x1, y1, x2, y2, x, y);
+				lcx = x2;
+				lcy = y2;
+				break;
+			}
+			case "Q":
+				lqx = ox + num();
+				lqy = oy + num();
+				x = ox + num();
+				y = oy + num();
+				b.quadTo(lqx, lqy, x, y);
+				break;
+			case "T": {
+				const r = prev === "Q" || prev === "T";
+				lqx = r ? 2 * x - lqx : x;
+				lqy = r ? 2 * y - lqy : y;
+				x = ox + num();
+				y = oy + num();
+				b.quadTo(lqx, lqy, x, y);
+				break;
+			}
+			case "A": {
+				const rx = num(), ry = num(), phi = num() * Math.PI / 180, large = num() !== 0, sweep = num() !== 0;
+				const nx = ox + num(), ny = oy + num();
+				arcTo(b, x, y, rx, ry, phi, large, sweep, nx, ny);
+				x = nx;
+				y = ny;
+				break;
+			}
+			case "Z":
+				b.close();
+				x = sx;
+				y = sy;
+				break;
+			default: i++;
+		}
+		prev = C;
+		if (C === "Z" && more()) cmd = "L";
+	}
+	return b.build();
+}
+//#endregion
+//#region web/src/adapter/geometry/sink.ts
+var SvgSink = class {
+	parts = [];
+	move(x, y) {
+		this.parts.push(`M ${x} ${y}`);
+	}
+	line(x, y) {
+		this.parts.push(`L ${x} ${y}`);
+	}
+	arc(rx, ry, large, sweep, x, y) {
+		this.parts.push(`A ${rx} ${ry} 0 ${large} ${sweep} ${x} ${y}`);
+	}
+	close() {
+		this.parts.push("Z");
+	}
+	toString() {
+		return this.parts.join(" ");
+	}
+};
+/**
+* The outline as `parseSvgPath` reads it from {@link SvgSink}'s string, without
+* the string. A finite number prints and parses back to itself, and the parser
+* adds an absolute coordinate to 0 (so −0 lands as 0); a number that is not
+* finite does not survive the tokenizer, so `ok` turns false and the caller
+* takes the string route.
+*/
+var PathDataSink = class {
+	ok = true;
+	b = new PathBuilder();
+	empty = true;
+	x = 0;
+	y = 0;
+	sx = 0;
+	sy = 0;
+	move(x, y) {
+		this.check(x, y);
+		this.x = this.sx = 0 + x;
+		this.y = this.sy = 0 + y;
+		this.b.moveTo(this.x, this.y);
+	}
+	line(x, y) {
+		this.check(x, y);
+		this.x = 0 + x;
+		this.y = 0 + y;
+		this.b.lineTo(this.x, this.y);
+	}
+	arc(rx, ry, large, sweep, x, y) {
+		this.check(rx, ry, x, y);
+		const nx = 0 + x, ny = 0 + y;
+		arcTo(this.b, this.x, this.y, rx + 0, ry + 0, 0, large !== 0, sweep !== 0, nx, ny);
+		this.x = nx;
+		this.y = ny;
+	}
+	close() {
+		this.empty = false;
+		this.b.close();
+		this.x = this.sx;
+		this.y = this.sy;
+	}
+	result() {
+		return this.empty ? null : this.b.build();
+	}
+	check(...values) {
+		this.empty = false;
+		for (const v of values) if (!Number.isFinite(v)) this.ok = false;
+	}
+};
+function svgOf(emit) {
+	const sink = new SvgSink();
+	emit(sink);
+	return sink.toString();
+}
+/** What `parseSvgPath(svgOf(emit))` gives (null for an empty string), built directly. */
+function pathDataOf(emit) {
+	const sink = new PathDataSink();
+	emit(sink);
+	if (sink.ok) return sink.result();
+	const svg = svgOf(emit);
+	return svg ? parseSvgPath(svg) : null;
+}
+//#endregion
 //#region web/src/adapter/geometry/base.ts
 var ShapeGeometry = class {
 	fullState;
@@ -8249,6 +8465,11 @@ var ShapeGeometry = class {
 	constructor(state) {
 		this.fullState = this.resolveState(state);
 	}
+	/** `buildSVGPath` parsed, or null where it is empty. A shape writing to a {@link PathSink} skips the string. */
+	buildPathData(geo) {
+		const svg = this.buildSVGPath(geo);
+		return svg ? parseSvgPath(svg) : null;
+	}
 	get geometry() {
 		return this.geo ??= this.computeGeometry();
 	}
@@ -8287,24 +8508,29 @@ function cornerReach(c) {
 	return c.radius > 0 ? c.radius : 0;
 }
 /**
-* SVG commands for a right-angle (rect) corner, the pen already at its entry
-* point `apex + d0·radius`; they leave it at `apex + d1·radius`. `d0` points
+* A right-angle (rect) corner, the pen already at its entry point
+* `apex + d0·radius`; it leaves the pen at `apex + d1·radius`. `d0` points
 * from the apex back along the incoming edge, `d1` along the outgoing one.
-* Empty for a zero radius (the edge runs on to a sharp apex).
+* Nothing for a zero radius (the edge runs on to a sharp apex).
 */
-function cornerCommands(ax, ay, d0x, d0y, d1x, d1y, c) {
-	if (c.radius <= 0) return "";
-	return cornerCommandsFromCut(ax, ay, d0x, d0y, d1x, d1y, c.radius, c.radius, c.style);
+function cornerTo(sink, ax, ay, d0x, d0y, d1x, d1y, c) {
+	if (c.radius <= 0) return;
+	cutCornerTo(sink, ax, ay, d0x, d0y, d1x, d1y, c.radius, c.radius, c.style);
 }
 /**
-* SVG commands for a corner of any angle, given the cut-back distance `cut`
-* along each edge and the arc `radius` (they differ off a right angle). The pen
-* is at `apex + d0·cut`; the commands leave it at `apex + d1·cut`.
+* A corner of any angle, given the cut-back distance `cut` along each edge and
+* the arc `radius` (they differ off a right angle). The pen is at
+* `apex + d0·cut`; it is left at `apex + d1·cut`.
 */
-function cornerCommandsFromCut(ax, ay, d0x, d0y, d1x, d1y, cut, radius, style) {
+function cutCornerTo(sink, ax, ay, d0x, d0y, d1x, d1y, cut, radius, style) {
 	const ex = ax + d1x * cut, ey = ay + d1y * cut;
-	if (style === "angled") return `L ${ex} ${ey}`;
-	return `A ${radius} ${radius} 0 0 ${d0x * d1y - d0y * d1x < 0 ? 1 : 0} ${ex} ${ey}`;
+	if (style === "angled") return sink.line(ex, ey);
+	const cross = d0x * d1y - d0y * d1x;
+	sink.arc(radius, radius, 0, cross < 0 ? 1 : 0, ex, ey);
+}
+/** {@link cutCornerTo} as SVG commands. */
+function cornerCommandsFromCut(ax, ay, d0x, d0y, d1x, d1y, cut, radius, style) {
+	return svgOf((sink) => cutCornerTo(sink, ax, ay, d0x, d0y, d1x, d1y, cut, radius, style));
 }
 //#endregion
 //#region web/src/adapter/geometry/ellipse.ts
@@ -8333,21 +8559,19 @@ var EllipseGeometry = class extends ShapeGeometry {
 		};
 	}
 	buildSVGPath(geo) {
-		const { cx, cy, halfWidth, halfHeight, ratio } = geo;
-		if (ratio >= 1) return "";
-		if (!geo.isFullShape) return ratio <= 0 ? wedge(geo) : annularSector(geo);
-		const outer = fullEllipse(cx, cy, halfWidth, halfHeight, 0);
-		if (ratio <= 0) return outer;
-		return `${outer} ${fullEllipse(cx, cy, halfWidth * ratio, halfHeight * ratio, 1)}`;
+		return svgOf((sink) => outline$1(sink, geo));
+	}
+	buildPathData(geo) {
+		return pathDataOf((sink) => outline$1(sink, geo));
 	}
 	/** What a ratio-1 ellipse strokes, once: the bare outline or open arc. Null below ratio 1. */
 	ringOutline(geo) {
 		if (geo.ratio < 1) return null;
-		return geo.isFullShape ? fullEllipse(geo.cx, geo.cy, geo.halfWidth, geo.halfHeight, 0) : openArc(geo);
+		return svgOf((sink) => geo.isFullShape ? fullEllipse(sink, geo.cx, geo.cy, geo.halfWidth, geo.halfHeight, 0) : openArc(sink, geo));
 	}
 	buildSVGAlignInterior(geo) {
-		if (geo.isFullShape) return geo.ratio >= 1 ? fullEllipse(geo.cx, geo.cy, geo.halfWidth, geo.halfHeight, 0) : null;
-		return geo.ratio >= 1 || geo.ratio <= 0 ? wedge(geo) : annularSector(geo);
+		if (geo.isFullShape) return geo.ratio >= 1 ? svgOf((sink) => fullEllipse(sink, geo.cx, geo.cy, geo.halfWidth, geo.halfHeight, 0)) : null;
+		return svgOf((sink) => geo.ratio >= 1 || geo.ratio <= 0 ? wedge(sink, geo) : annularSector(sink, geo));
 	}
 	supportsSpread() {
 		return true;
@@ -8356,7 +8580,7 @@ var EllipseGeometry = class extends ShapeGeometry {
 		if (!geo.isFullShape || geo.ratio >= 1) return null;
 		const halfWidth = geo.halfWidth + spread, halfHeight = geo.halfHeight + spread;
 		if (halfWidth <= 0 || halfHeight <= 0) return null;
-		return fullEllipse(geo.cx, geo.cy, halfWidth, halfHeight, 0);
+		return svgOf((sink) => fullEllipse(sink, geo.cx, geo.cy, halfWidth, halfHeight, 0));
 	}
 	computeBounds(geo) {
 		const { cx, cy, halfWidth, halfHeight } = geo;
@@ -8368,11 +8592,21 @@ var EllipseGeometry = class extends ShapeGeometry {
 		};
 	}
 };
-function fullEllipse(cx, cy, rx, ry, sweepFlag) {
-	const left = cx - rx;
-	return `M ${left} ${cy} A ${rx} ${ry} 0 1 ${sweepFlag} ${cx + rx} ${cy} A ${rx} ${ry} 0 1 ${sweepFlag} ${left} ${cy} Z`;
-}
-/** A partial sweep's outer curve: its start point, and the `A` that runs it round. */
+function outline$1(sink, geo) {
+	const { cx, cy, halfWidth, halfHeight, ratio } = geo;
+	if (ratio >= 1) return;
+	if (!geo.isFullShape) return ratio <= 0 ? wedge(sink, geo) : annularSector(sink, geo);
+	fullEllipse(sink, cx, cy, halfWidth, halfHeight, 0);
+	if (ratio > 0) fullEllipse(sink, cx, cy, halfWidth * ratio, halfHeight * ratio, 1);
+}
+function fullEllipse(sink, cx, cy, rx, ry, sweepFlag) {
+	const left = cx - rx, right = cx + rx;
+	sink.move(left, cy);
+	sink.arc(rx, ry, 1, sweepFlag, right, cy);
+	sink.arc(rx, ry, 1, sweepFlag, left, cy);
+	sink.close();
+}
+/** A partial sweep's outer curve: its start point, and the arc that runs it round. */
 function outerArc(geo) {
 	const { cx, cy, halfWidth, halfHeight, startAngle, sweep } = geo;
 	const endAngle = startAngle + sweep;
@@ -8381,26 +8615,38 @@ function outerArc(geo) {
 	const sx = cx + halfWidth * Math.cos(startAngle * TO_RAD), sy = cy + halfHeight * Math.sin(startAngle * TO_RAD);
 	const ex = cx + halfWidth * Math.cos(endAngle * TO_RAD), ey = cy + halfHeight * Math.sin(endAngle * TO_RAD);
 	return {
-		start: `${sx} ${sy}`,
-		arc: `A ${halfWidth} ${halfHeight} 0 ${largeArc} ${sweepFlag} ${ex} ${ey}`
+		sx,
+		sy,
+		arc: (sink) => sink.arc(halfWidth, halfHeight, largeArc, sweepFlag, ex, ey)
 	};
 }
-function openArc(geo) {
-	const { start, arc } = outerArc(geo);
-	return `M ${start} ${arc}`;
+function openArc(sink, geo) {
+	const { sx, sy, arc } = outerArc(geo);
+	sink.move(sx, sy);
+	arc(sink);
 }
-function wedge(geo) {
-	const { start, arc } = outerArc(geo);
-	return `M ${geo.cx} ${geo.cy} L ${start} ${arc} Z`;
+function wedge(sink, geo) {
+	const { sx, sy, arc } = outerArc(geo);
+	sink.move(geo.cx, geo.cy);
+	sink.line(sx, sy);
+	arc(sink);
+	sink.close();
 }
 /** Out along the outer arc, in to the inner edge, back along the inner arc, closed along the start radius. */
-function annularSector(geo) {
+function annularSector(sink, geo) {
 	const { cx, cy, halfWidth, halfHeight, startAngle, sweep, ratio } = geo;
-	const { start, arc } = outerArc(geo);
+	const { sx, sy, arc } = outerArc(geo);
 	const endAngle = startAngle + sweep;
 	const innerW = halfWidth * ratio, innerH = halfHeight * ratio;
 	const isx = cx + innerW * Math.cos(startAngle * TO_RAD), isy = cy + innerH * Math.sin(startAngle * TO_RAD);
-	return `M ${start} ${arc} L ${cx + innerW * Math.cos(endAngle * TO_RAD)} ${cy + innerH * Math.sin(endAngle * TO_RAD)} A ${innerW} ${innerH} 0 ${Math.abs(sweep) > 180 ? 1 : 0} ${sweep > 0 ? 0 : 1} ${isx} ${isy} Z`;
+	const iex = cx + innerW * Math.cos(endAngle * TO_RAD), iey = cy + innerH * Math.sin(endAngle * TO_RAD);
+	const largeArc = Math.abs(sweep) > 180 ? 1 : 0;
+	const innerSweepFlag = sweep > 0 ? 0 : 1;
+	sink.move(sx, sy);
+	arc(sink);
+	sink.line(iex, iey);
+	sink.arc(innerW, innerH, largeArc, innerSweepFlag, isx, isy);
+	sink.close();
 }
 //#endregion
 //#region web/src/adapter/geometry/line.ts
@@ -8596,22 +8842,31 @@ var PolygramGeometry = class extends ShapeGeometry {
 //#endregion
 //#region web/src/adapter/geometry/rect.ts
 /** The outline clockwise, each corner its own arc or chamfer `radius` px from the apex. */
-function rectToSvg(l, t, r, b, tl, tr, br, bl) {
+function roundedRect(sink, l, t, r, b, tl, tr, br, bl) {
 	const rTL = cornerReach(tl), rTR = cornerReach(tr), rBR = cornerReach(br), rBL = cornerReach(bl);
-	return [
-		`M ${l + rTL} ${t}`,
-		`L ${r - rTR} ${t}`,
-		cornerCommands(r, t, -1, 0, 0, 1, tr),
-		`L ${r} ${b - rBR}`,
-		cornerCommands(r, b, 0, -1, -1, 0, br),
-		`L ${l + rBL} ${b}`,
-		cornerCommands(l, b, 1, 0, 0, -1, bl),
-		`L ${l} ${t + rTL}`,
-		cornerCommands(l, t, 0, 1, 1, 0, tl),
-		"Z"
-	].filter(Boolean).join(" ");
-}
-var plainRect = (l, t, r, b) => `M ${l} ${t} L ${r} ${t} L ${r} ${b} L ${l} ${b} Z`;
+	sink.move(l + rTL, t);
+	sink.line(r - rTR, t);
+	cornerTo(sink, r, t, -1, 0, 0, 1, tr);
+	sink.line(r, b - rBR);
+	cornerTo(sink, r, b, 0, -1, -1, 0, br);
+	sink.line(l + rBL, b);
+	cornerTo(sink, l, b, 1, 0, 0, -1, bl);
+	sink.line(l, t + rTL);
+	cornerTo(sink, l, t, 0, 1, 1, 0, tl);
+	sink.close();
+}
+function plainRect(sink, l, t, r, b) {
+	sink.move(l, t);
+	sink.line(r, t);
+	sink.line(r, b);
+	sink.line(l, b);
+	sink.close();
+}
+function outline(sink, geo) {
+	const { left, top, right, bottom, tl, tr, br, bl, isZero } = geo;
+	if (isZero) plainRect(sink, left, top, right, bottom);
+	else roundedRect(sink, left, top, right, bottom, tl, tr, br, bl);
+}
 /** Per-corner radii and styles, scaled down together where adjacent corners would overrun a side. */
 var RectGeometry = class extends ShapeGeometry {
 	resolveState(state) {
@@ -8662,8 +8917,10 @@ var RectGeometry = class extends ShapeGeometry {
 		};
 	}
 	buildSVGPath(geo) {
-		const { left, top, right, bottom, tl, tr, br, bl, isZero } = geo;
-		return isZero ? plainRect(left, top, right, bottom) : rectToSvg(left, top, right, bottom, tl, tr, br, bl);
+		return svgOf((sink) => outline(sink, geo));
+	}
+	buildPathData(geo) {
+		return pathDataOf((sink) => outline(sink, geo));
 	}
 	supportsSpread() {
 		return true;
@@ -8694,8 +8951,8 @@ var RectGeometry = class extends ShapeGeometry {
 		tr.radius *= scale;
 		br.radius *= scale;
 		bl.radius *= scale;
-		if (tl.radius === 0 && tr.radius === 0 && br.radius === 0 && bl.radius === 0) return plainRect(left, top, right, bottom);
-		return rectToSvg(left, top, right, bottom, tl, tr, br, bl);
+		if (tl.radius === 0 && tr.radius === 0 && br.radius === 0 && bl.radius === 0) return svgOf((sink) => plainRect(sink, left, top, right, bottom));
+		return svgOf((sink) => roundedRect(sink, left, top, right, bottom, tl, tr, br, bl));
 	}
 	computeBounds(geo) {
 		return {
@@ -8716,139 +8973,6 @@ function cornerScale(w, h, tl, tr, br, bl) {
 	return Math.min(top, bottom, left, right);
 }
 //#endregion
-//#region web/src/adapter/svg-path.ts
-/** Endpoint-parameterised arc → cubic segments (SVG implementation notes F.6). */
-function arcTo(b, x1, y1, rx, ry, phi, large, sweep, x2, y2) {
-	if (rx === 0 || ry === 0) {
-		b.lineTo(x2, y2);
-		return;
-	}
-	rx = Math.abs(rx);
-	ry = Math.abs(ry);
-	const c = Math.cos(phi), s = Math.sin(phi);
-	const dx = (x1 - x2) / 2, dy = (y1 - y2) / 2;
-	const xp = c * dx + s * dy, yp = -s * dx + c * dy;
-	const lam = xp * xp / (rx * rx) + yp * yp / (ry * ry);
-	if (lam > 1) {
-		rx *= Math.sqrt(lam);
-		ry *= Math.sqrt(lam);
-	}
-	const num = rx * rx * ry * ry - rx * rx * yp * yp - ry * ry * xp * xp;
-	const den = rx * rx * yp * yp + ry * ry * xp * xp;
-	let k = Math.sqrt(Math.max(0, num / den));
-	if (large === sweep) k = -k;
-	const cxp = k * rx * yp / ry, cyp = -k * ry * xp / rx;
-	const cx = c * cxp - s * cyp + (x1 + x2) / 2, cy = s * cxp + c * cyp + (y1 + y2) / 2;
-	const ang = (ux, uy, vx, vy) => Math.atan2(ux * vy - uy * vx, ux * vx + uy * vy);
-	const t1 = ang(1, 0, (xp - cxp) / rx, (yp - cyp) / ry);
-	let dt = ang((xp - cxp) / rx, (yp - cyp) / ry, (-xp - cxp) / rx, (-yp - cyp) / ry);
-	if (!sweep && dt > 0) dt -= 2 * Math.PI;
-	else if (sweep && dt < 0) dt += 2 * Math.PI;
-	const n = Math.ceil(Math.abs(dt) / (Math.PI / 2) - 1e-9);
-	const seg = dt / n;
-	const alpha = 4 / 3 * Math.tan(seg / 4);
-	const pt = (t) => [cx + rx * Math.cos(t) * c - ry * Math.sin(t) * s, cy + rx * Math.cos(t) * s + ry * Math.sin(t) * c];
-	const dpt = (t) => [-rx * Math.sin(t) * c - ry * Math.cos(t) * s, -rx * Math.sin(t) * s + ry * Math.cos(t) * c];
-	for (let i = 0; i < n; i++) {
-		const ta = t1 + i * seg, tb = ta + seg;
-		const [ax, ay] = pt(ta), [bx, by] = pt(tb), [dax, day] = dpt(ta), [dbx, dby] = dpt(tb);
-		b.cubicTo(ax + alpha * dax, ay + alpha * day, bx - alpha * dbx, by - alpha * dby, i === n - 1 ? x2 : bx, i === n - 1 ? y2 : by);
-	}
-}
-function parseSvgPath(d) {
-	const b = new PathBuilder();
-	const tokens = d.match(/[a-zA-Z]|-?(?:\d+\.?\d*|\.\d+)(?:[eE][-+]?\d+)?/g) ?? [];
-	let i = 0;
-	let cmd = "";
-	let x = 0, y = 0, sx = 0, sy = 0;
-	let lcx = 0, lcy = 0, lqx = 0, lqy = 0;
-	let prev = "";
-	const num = () => Number(tokens[i++]);
-	const more = () => i < tokens.length && !/[a-zA-Z]/.test(tokens[i]);
-	while (i < tokens.length) {
-		if (/[a-zA-Z]/.test(tokens[i])) cmd = tokens[i++];
-		const rel = cmd === cmd.toLowerCase();
-		const C = cmd.toUpperCase();
-		const ox = rel ? x : 0, oy = rel ? y : 0;
-		switch (C) {
-			case "M":
-				x = ox + num();
-				y = oy + num();
-				b.moveTo(x, y);
-				sx = x;
-				sy = y;
-				cmd = rel ? "l" : "L";
-				break;
-			case "L":
-				x = ox + num();
-				y = oy + num();
-				b.lineTo(x, y);
-				break;
-			case "H":
-				x = (rel ? x : 0) + num();
-				b.lineTo(x, y);
-				break;
-			case "V":
-				y = (rel ? y : 0) + num();
-				b.lineTo(x, y);
-				break;
-			case "C": {
-				const x1 = ox + num(), y1 = oy + num(), x2 = ox + num(), y2 = oy + num();
-				x = ox + num();
-				y = oy + num();
-				b.cubicTo(x1, y1, x2, y2, x, y);
-				lcx = x2;
-				lcy = y2;
-				break;
-			}
-			case "S": {
-				const r = prev === "C" || prev === "S";
-				const x1 = r ? 2 * x - lcx : x, y1 = r ? 2 * y - lcy : y;
-				const x2 = ox + num(), y2 = oy + num();
-				x = ox + num();
-				y = oy + num();
-				b.cubicTo(x1, y1, x2, y2, x, y);
-				lcx = x2;
-				lcy = y2;
-				break;
-			}
-			case "Q":
-				lqx = ox + num();
-				lqy = oy + num();
-				x = ox + num();
-				y = oy + num();
-				b.quadTo(lqx, lqy, x, y);
-				break;
-			case "T": {
-				const r = prev === "Q" || prev === "T";
-				lqx = r ? 2 * x - lqx : x;
-				lqy = r ? 2 * y - lqy : y;
-				x = ox + num();
-				y = oy + num();
-				b.quadTo(lqx, lqy, x, y);
-				break;
-			}
-			case "A": {
-				const rx = num(), ry = num(), phi = num() * Math.PI / 180, large = num() !== 0, sweep = num() !== 0;
-				const nx = ox + num(), ny = oy + num();
-				arcTo(b, x, y, rx, ry, phi, large, sweep, nx, ny);
-				x = nx;
-				y = ny;
-				break;
-			}
-			case "Z":
-				b.close();
-				x = sx;
-				y = sy;
-				break;
-			default: i++;
-		}
-		prev = C;
-		if (C === "Z" && more()) cmd = "L";
-	}
-	return b.build();
-}
-//#endregion
 //#region web/src/adapter/shapes.ts
 function flipPositionY(state, width, height) {
 	const withPivotOffset = resolvePivotPosition(state, width, height);
@@ -8981,24 +9105,37 @@ function parse(svg, full) {
 function viaGeometry(Shape, state) {
 	const shape = new Shape(state);
 	const full = shape.fullState, geo = shape.geometry;
-	const base = parse(shape.buildSVGPath(geo), full);
-	const trims = shape.needsTrim();
-	const range = trims ? shape.getTrimRange() : null;
-	const fill = base && range ? trimPath(base, range.start, range.end) : base;
-	let stroke = fill;
-	const ring = shape instanceof EllipseGeometry ? shape.ringOutline(geo) : null;
-	if (ring != null) {
+	const range = shape.needsTrim() ? shape.getTrimRange() : null;
+	const base = once(() => {
+		const outline = shape.buildPathData(geo);
+		return outline && shapeTransform(full, outline);
+	});
+	const fill = once(() => {
+		const p = base();
+		return p && range ? trimPath(p, range.start, range.end) : p;
+	});
+	const stroke = once(() => {
+		const ring = shape instanceof EllipseGeometry ? shape.ringOutline(geo) : null;
+		if (ring == null) return fill();
 		const outline = parse(ring, full);
-		stroke = outline && range ? trimPath(outline, range.start, range.end) : outline;
-	}
-	const interiorSvg = shape.buildSVGAlignInterior(geo);
-	const interior = interiorSvg != null ? parse(interiorSvg, full) : trims ? base : fill;
+		return outline && range ? trimPath(outline, range.start, range.end) : outline;
+	});
+	const interior = once(() => {
+		const svg = shape.buildSVGAlignInterior(geo);
+		return svg != null ? parse(svg, full) : range ? base() : fill();
+	});
 	const b = shape.computeBounds(geo);
 	const spread = shape.supportsSpread() ? (s) => parse(shape.buildSpreadSVGPath(geo, s), full) : void 0;
 	return {
-		fill,
-		stroke,
-		interior,
+		get fill() {
+			return fill();
+		},
+		get stroke() {
+			return stroke();
+		},
+		get interior() {
+			return interior();
+		},
 		bounds: b ? [
 			b.left,
 			b.top,
@@ -9006,9 +9143,67 @@ function viaGeometry(Shape, state) {
 			b.bottom
 		] : null,
 		spread,
-		trimmed: !!range
+		trimmed: !!range,
+		native: range ? void 0 : nativeOf(shape, full, geo)
+	};
+}
+function once(make) {
+	let made = false;
+	let value;
+	return () => {
+		if (!made) {
+			value = make();
+			made = true;
+		}
+		return value;
 	};
 }
+/**
+* The shape the renderer draws itself: an unturned, unscaled rect whose corners
+* are all rounded (or square) and within half its shorter side, as the renderer
+* clamps them, or a whole ellipse with no hole.
+*/
+function nativeOf(shape, full, geo) {
+	if ((full.rotation ?? 0) !== 0 || (full.scale ?? 1) !== 1) return void 0;
+	if (shape instanceof EllipseGeometry) {
+		if (!geo.isFullShape || geo.ratio > 0) return void 0;
+		const w = geo.halfWidth * 2, h = geo.halfHeight * 2;
+		if (!(w > 0 && h > 0) || !Number.isFinite(w + h + geo.cx + geo.cy)) return void 0;
+		return {
+			kind: "ellipse",
+			x: geo.cx - geo.halfWidth,
+			y: geo.cy - geo.halfHeight,
+			w,
+			h,
+			radii: [
+				0,
+				0,
+				0,
+				0
+			]
+		};
+	}
+	if (shape instanceof RectGeometry) {
+		const w = geo.right - geo.left, h = geo.bottom - geo.top;
+		if (!(w > 0 && h > 0) || !Number.isFinite(w + h + geo.left + geo.top)) return void 0;
+		const corners = [
+			geo.tl,
+			geo.tr,
+			geo.br,
+			geo.bl
+		];
+		const limit = Math.min(w, h) / 2;
+		if (corners.some((c) => !(c.radius >= 0 && c.radius <= limit) || c.radius > 0 && c.style === "angled")) return void 0;
+		return {
+			kind: "rect",
+			x: geo.left,
+			y: geo.top,
+			w,
+			h,
+			radii: corners.map((c) => c.radius)
+		};
+	}
+}
 /** A path: data centred on its control-point bounds (or centerBounds), turned about the origin. */
 function pathShape(state) {
 	const shape = new PathGeometry(state);
@@ -9411,6 +9606,29 @@ var SHAPE_OPS = new Set([
 	"text",
 	"richText"
 ]);
+var isSolid = (f) => f.type === "solid";
+/** `box` grown by `d` (shrunk when negative), each rounded corner with it; null where that is no longer the offset outline. */
+function offsetBox(box, d) {
+	if (d === 0) return box;
+	const w = box.w + 2 * d, h = box.h + 2 * d;
+	if (!(w > 0 && h > 0)) return null;
+	if (box.kind === "ellipse") return {
+		...box,
+		x: box.x - d,
+		y: box.y - d,
+		w,
+		h
+	};
+	if (box.radii.some((r) => r > 0 && !(r + d > 0))) return null;
+	return {
+		...box,
+		x: box.x - d,
+		y: box.y - d,
+		w,
+		h,
+		radii: box.radii.map((r) => r > 0 ? r + d : 0)
+	};
+}
 var BLACK = {
 	kind: "solid",
 	color: [
@@ -9995,6 +10213,7 @@ var WgpuRenderContext = class extends CanvasRenderContext2D {
 	paintFill(layers) {
 		this.paintText(layers, null);
 		if (!layers.length) return;
+		if (this.fillNative(layers)) return;
 		const path = this.surface("fill");
 		const geoms = path ? [{ path }] : [];
 		for (const s of this.shapes) if (s.members) geoms.push({ members: s.members });
@@ -10004,6 +10223,84 @@ var WgpuRenderContext = class extends CanvasRenderContext2D {
 		this.shadows = [];
 		for (const g of geoms) this.fillGeom(g, bounds, layers, all);
 	}
+	/**
+	* One rect or ellipse painted solid, with no shadow to cast, drawn as the
+	* renderer's own shape. Gradients and images stay paths: their paint space
+	* is the path's.
+	*/
+	fillNative(layers) {
+		const shape = this.shapes.length === 1 ? this.shapes[0] : null;
+		const box = shape?.native;
+		if (!shape || !box || this.inVectorMask || this.shadows.length || !layers.every(isSolid)) return false;
+		for (const f of layers) {
+			const paint = fillPaint(f, shape.bounds, this.missing, this.assets);
+			if (paint) this.native(this.cur, box, {
+				fill: paint,
+				opacity: this.worldAlpha * (f.opacity ?? 1),
+				blend: this.blendOf(f)
+			});
+		}
+		return true;
+	}
+	/**
+	* An undashed solid stroke round one rect, or round a circle (an ellipse's
+	* offset outline is no ellipse), drawn as the renderer's own shape. Biased by
+	* `align`, the band is a centred stroke round the shape offset by
+	* align·weight/2, which stays exact while no rounded corner shrinks away. The
+	* renderer keeps a square corner sharp, which is a miter join.
+	*/
+	strokeNative(st, weight, intWidth, dev) {
+		const shape = this.shapes.length === 1 ? this.shapes[0] : null;
+		const native = shape?.native;
+		if (!shape || !native || weight <= 0 || (st.dash?.length ?? 0) > 0 || !st.fill.every(isSolid)) return false;
+		if (native.kind === "ellipse" && Math.abs(native.w - native.h) > .001) return false;
+		if (native.kind === "rect" && native.radii.some((r) => r === 0) && (st.join !== "miter" || !(st.miterLimit >= Math.SQRT2))) return false;
+		const a = Math.max(-1, Math.min(1, st.align ?? 0));
+		const box = offsetBox(native, a * weight / 2);
+		if (!box) return false;
+		const b = shape.bounds;
+		const snapM = this.snapBounds([
+			Math.fround(b[0]),
+			Math.fround(b[1]),
+			Math.fround(b[2]),
+			Math.fround(b[3])
+		], intWidth, dev);
+		const parent = snapM ? this.doc.group(this.cur, { transform: snapM }) : this.cur;
+		for (const f of st.fill) {
+			const paint = fillPaint(f, b, this.missing, this.assets);
+			if (!paint) continue;
+			const stroke = {
+				paint,
+				width: weight,
+				join: st.join,
+				cap: st.cap,
+				miter: st.miterLimit
+			};
+			this.native(parent, box, {
+				opacity: this.worldAlpha * (f.opacity ?? 1),
+				stroke,
+				...a === 0 && { blend: this.blendOf(f) }
+			});
+		}
+		return true;
+	}
+	native(parent, box, props) {
+		const at = {
+			...props,
+			transform: [
+				1,
+				0,
+				0,
+				1,
+				box.x,
+				box.y
+			],
+			w: box.w,
+			h: box.h,
+			radii: box.radii
+		};
+		return box.kind === "rect" ? this.doc.rect(parent, at) : this.doc.ellipse(parent, at);
+	}
 	fillGeom(geom, bounds, layers, all) {
 		if (this.inVectorMask) {
 			this.leaf(this.cur, geom, { fill: BLACK });
@@ -10494,8 +10791,10 @@ var WgpuRenderContext = class extends CanvasRenderContext2D {
 	/** StrokeHandler.snapPath: an axis-aligned thin stroke's shape scaled and
 	*  moved so its device bounds sit on pixel edges (centres for odd widths). */
 	snap(path, intWidth, m) {
+		return this.snapBounds(pathBounds(path), intWidth, m);
+	}
+	snapBounds([bx0, by0, bx1, by1], intWidth, m) {
 		if (intWidth <= 0 || Math.abs(m[1]) > 1e-6 || Math.abs(m[2]) > 1e-6 || m[0] === 0 || m[3] === 0) return null;
-		const [bx0, by0, bx1, by1] = pathBounds(path);
 		if (bx1 - bx0 <= 0 || by1 - by0 <= 0) return null;
 		const sx = m[0], sy = m[3], tx = m[4], ty = m[5];
 		const l = tx + sx * bx0, t = ty + sy * by0, r = tx + sx * bx1, b = ty + sy * by1;
@@ -10521,7 +10820,8 @@ var WgpuRenderContext = class extends CanvasRenderContext2D {
 	}
 	paintStroke(strokes) {
 		for (const st of strokes) this.paintText(st.fill, st);
-		const fillAll = this.surface("fill");
+		let fillAll;
+		const surfaceFill = () => fillAll === void 0 ? fillAll = this.surface("fill") : fillAll;
 		const dev = this.device();
 		const scale = Math.sqrt(Math.abs(dev[0] * dev[3] - dev[1] * dev[2]));
 		const rotated = isProjective(dev) || Math.abs(dev[1]) > 1e-6 || Math.abs(dev[2]) > 1e-6;
@@ -10531,6 +10831,7 @@ var WgpuRenderContext = class extends CanvasRenderContext2D {
 				intWidth = Math.max(1, Math.round(weight * scale));
 				weight = intWidth / scale;
 			}
+			if (this.strokeNative(st, weight, intWidth, dev)) continue;
 			for (const shape of this.strokeShapes()) {
 				let geom, interior;
 				let plan = {
@@ -10548,7 +10849,7 @@ var WgpuRenderContext = class extends CanvasRenderContext2D {
 					geom = { path: p.source ?? shape.stroke };
 					interior = shape.alignInterior ? { members: shape.alignInterior } : shape.interior && isClosed(shape.interior) ? { path: shape.interior } : null;
 				}
-				const bounds = this.bounds(fillAll ?? ("path" in geom ? geom.path : null));
+				const bounds = this.bounds(surfaceFill() ?? ("path" in geom ? geom.path : null));
 				const a = Math.max(-1, Math.min(1, st.align ?? 0));
 				const halves = a !== 0 && interior !== null && !plan.ends.some((e) => isStrokeMarker(e.cap)) ? [[(1 + a) * weight, "out"], [(1 - a) * weight, "in"]] : [[weight, "both"]];
 				const snapM = shape.fill ? this.snap(shape.fill, intWidth, dev) : null;
@@ -10587,7 +10888,7 @@ var WgpuRenderContext = class extends CanvasRenderContext2D {
 	*  whole, else their contours together (a union would close open ones),
 	*  aligned against the union. Text keeps each shape apart. */
 	strokeShapes() {
-		if (this.shapes.some((s) => s.text)) return this.shapes;
+		if (this.shapes.length < 2 || this.shapes.some((s) => s.text)) return this.shapes;
 		const withPaths = this.shapes.filter((s) => s.members || s.fill && s.fill.verbs.length).sort((a, b) => (b.members ? 1 : 0) - (a.members ? 1 : 0));
 		if (withPaths.length < 2) return this.shapes;
 		const members = [];