@unmade/text-renderer 1.2.0 → 1.3.1

package/dist/node/index.js

@@ -1,7 +1,7 @@
 import { Blob as e, Buffer as t, Face as n, Feature as r, Font as i, shape as a } from "harfbuzzjs";
 import o from "@thednp/dommatrix";
-import { DOMParser as s } from "linkedom";
 import "node:path";
+import { DOMParser as s } from "linkedom";
 import { svgPathProperties as c } from "svg-path-properties";
 //#region src/loading/createLoadedFont.ts
 function l(e) {
@@ -305,7 +305,87 @@ var D = (e) => e === void 0 || e === "flat" ? { type: "flat" } : e === "curved"
 		verticalAlignment: r
 	}), c = new E(s, o), l = new E(i / 2, a), u = new E(i - s, o), d = i * .2, f = new E(d, a), p = new E(i - d, a);
 	return `${`M ${c.toSVGString()}`} ${`Q ${f.toSVGString()} ${l.toSVGString()}`} ${`Q ${p.toSVGString()} ${u.toSVGString()}`}`;
-}, M = (e) => {
+}, M = class e {
+	constructor(e = 0, t = 0, n = 0, r = 1) {
+		this.x = e, this.y = t, this.z = n, this.w = r;
+	}
+	static fromPoint(t) {
+		return new e(t.x, t.y, t.z === void 0 ? 0 : t.z, t.w === void 0 ? 1 : t.w);
+	}
+	matrixTransform(t) {
+		return t.is2D && this.z === 0 && this.w === 1 ? new e(this.x * t.a + this.y * t.c + t.e, this.x * t.b + this.y * t.d + t.f, 0, 1) : new e(this.x * t.m11 + this.y * t.m21 + this.z * t.m31 + this.w * t.m41, this.x * t.m12 + this.y * t.m22 + this.z * t.m32 + this.w * t.m42, this.x * t.m13 + this.y * t.m23 + this.z * t.m33 + this.w * t.m43, this.x * t.m14 + this.y * t.m24 + this.z * t.m34 + this.w * t.m44);
+	}
+	toJSON() {
+		return {
+			x: this.x,
+			y: this.y,
+			z: this.z,
+			w: this.w
+		};
+	}
+}, N = s, te = o, P = new N().parseFromString("<svg></svg>", "image/svg+xml");
+P.readyState = "complete";
+//#endregion
+//#region src/helpers/bbox.ts
+var F = class {
+	get x3() {
+		return this._x3 || this.x1;
+	}
+	get y3() {
+		return this._y3 || this.y2;
+	}
+	get x4() {
+		return this._x4 || this.x2;
+	}
+	get y4() {
+		return this._y4 || this.y1;
+	}
+	constructor(e, t, n, r, i, a, o, s) {
+		this.x1 = e, this.y1 = t, this.x2 = n, this.y2 = r, this._x3 = i, this._y3 = a, this._x4 = o, this._y4 = s, this.corners = [
+			new M(this.x1, this.y1),
+			new M(this.x2, this.y2),
+			new M(this.x3, this.y3),
+			new M(this.x4, this.y4)
+		];
+	}
+	transform(e) {
+		this.corners = this.corners.map((t) => t.matrixTransform(e)), this.x1 = this.corners[0].x, this.y1 = this.corners[0].y, this.x2 = this.corners[1].x, this.y2 = this.corners[1].y, this._x3 = this.corners[2].x, this._y3 = this.corners[2].y, this._x4 = this.corners[3].x, this._y4 = this.corners[3].y;
+	}
+	toPointsArray() {
+		return this.corners.map((e) => [e.x, e.y]);
+	}
+	getBBox() {
+		let e = Math.min(this.x1, this.x2, this.x3, this.x4), t = Math.min(this.y1, this.y2, this.y3, this.y4), n = Math.max(this.x1, this.x2, this.x3, this.x4) - e, r = Math.max(this.y1, this.y2, this.y3, this.y4) - t;
+		return new I(e, t, e + n, t + r);
+	}
+}, I = class extends F {
+	get x() {
+		return this.x1;
+	}
+	get y() {
+		return this.y1;
+	}
+	get width() {
+		return this.x2 - this.x1;
+	}
+	get height() {
+		return this.y2 - this.y1;
+	}
+	add(e) {
+		this.x1 = Math.min(this.x1, e.x1, e.x2, e.x3, e.x4), this.y1 = Math.min(this.y1, e.y1, e.y2, e.y3, e.y4), this.x2 = Math.max(this.x2, e.x1, e.x2, e.x3, e.x4), this.y2 = Math.max(this.y2, e.y1, e.y2, e.y3, e.y4);
+	}
+	addPoint(e, t) {
+		this.x1 = Math.min(this.x1, e), this.y1 = Math.min(this.y1, t), this.x2 = Math.max(this.x2, e), this.y2 = Math.max(this.y2, t);
+	}
+	serialize() {
+		return {
+			x: this.x,
+			y: this.y,
+			width: this.width,
+			height: this.height
+		};
+	}
+}, L = (e) => {
 	for (let t of [
 		"I",
 		"l",
@@ -315,28 +395,24 @@ var D = (e) => e === void 0 || e === "flat" ? { type: "flat" } : e === "curved"
 		if (n && n.name !== ".notdef") return t;
 	}
 	return console.error("No standard character found for fixed height calculation. Using \"I\" as default."), "I";
-}, N = 100, P = ({ font: e, boxDimensions: t, physicalSize: n, spacing: r = T }) => {
+}, R = 100, z = ({ font: e, boxDimensions: t, physicalSize: n, spacing: r = T }) => {
 	let i = n;
 	if (i[1] !== t.physicalUnits) throw Error(`Mismatched units between physicalFontSize (${i[1]}) and boxDimensions (${t.physicalUnits})`);
-	let { outlineWidth: a } = r, o = M(e), s = e.getPath(o, 0, 0, N).getBoundingBox(), c = s.y2 - s.y1;
+	let { outlineWidth: a } = r, o = L(e), s = e.getPath(o, 0, 0, R).getBoundingBox(), c = s.y2 - s.y1;
 	if (a > 0) {
-		let e = N * a;
+		let e = R * a;
 		c += e * 2;
 	}
 	let l = c / t.height * t.physicalHeight;
-	return N * (i[0] / l);
-}, F = ({ font: e, text: t, fontSize: n, spacing: r = T }) => {
+	return R * (i[0] / l);
+}, B = ({ font: e, text: t, fontSize: n, spacing: r = T }) => {
 	let { outlineWidth: i, letterSpacing: a, letterSpacingOutline: o } = r, s = e.getPath(t, 0, 0, n).getBoundingBox(), c = i ? n * i * 2 : 0, l = i > 0 ? o : a, u = t.length > 1 ? l * n * (t.length - 1) : 0;
 	return {
 		width: s.x2 - s.x1 + c + u,
 		height: s.y2 - s.y1 + c,
 		baseline: s.y1 * -1 + c / 2
 	};
-}, I = s, te = o, ne = new I().parseFromString("<svg></svg>", "image/svg+xml");
-ne.readyState = "complete";
-//#endregion
-//#region ../svg-helpers/dist/colours/named-colours.mjs
-var re = {
+}, ne = {
 	aliceblue: "#f0f8ff",
 	antiquewhite: "#faebd7",
 	aqua: "#00ffff",
@@ -485,13 +561,13 @@ var re = {
 	whitesmoke: "#f5f5f5",
 	yellow: "#ffff00",
 	yellowgreen: "#9acd32"
-}, ie = (e) => {
+}, re = (e) => {
 	let t = Array.from(e), n = !1;
 	return t[0] === "#" && (t.shift(), n = !0), t.length === 3 && (t = t.map((e) => `${e}${e}`)), `${n ? "#" : ""}${t.join("").toLowerCase()}`;
-}, L = (e) => Math.max(0, Math.min(255, Math.round(typeof e == "string" ? Number.parseInt(e, 10) : e))).toString(16).padStart(2, "0"), R = (...e) => {
+}, V = (e) => Math.max(0, Math.min(255, Math.round(typeof e == "string" ? Number.parseInt(e, 10) : e))).toString(16).padStart(2, "0"), H = (...e) => {
 	let [t, n, r] = Array.isArray(e[0]) ? e[0] : e;
-	return `#${L(t)}${L(n)}${L(r)}`;
-}, ae = (e, t, n) => {
+	return `#${V(t)}${V(n)}${V(r)}`;
+}, ie = (e, t, n) => {
 	if (t === 0) {
 		let e = Math.round(n * 255);
 		return [
@@ -506,22 +582,22 @@ var re = {
 		Math.round((c + o) * 255),
 		Math.round((l + o) * 255)
 	];
-}, oe = (e) => /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.test(e), z = (e) => {
+}, ae = (e) => /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.test(e), U = (e) => {
 	let t = e.trim().toLowerCase();
-	if (t.startsWith("#") || /^[0-9a-f]{3}([0-9a-f]{3})?$/.test(t)) return oe(t) ? ie(t) : void 0;
+	if (t.startsWith("#") || /^[0-9a-f]{3}([0-9a-f]{3})?$/.test(t)) return ae(t) ? re(t) : void 0;
 	if (t.startsWith("rgb")) {
 		let e = t.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+\s*)?\)/);
-		return e ? R(Number.parseInt(e[1], 10), Number.parseInt(e[2], 10), Number.parseInt(e[3], 10)) : void 0;
+		return e ? H(Number.parseInt(e[1], 10), Number.parseInt(e[2], 10), Number.parseInt(e[3], 10)) : void 0;
 	}
 	if (t.startsWith("hsl")) {
 		let e = t.match(/hsla?\(\s*(\d+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*[\d.]+\s*)?\)/);
 		if (!e) return;
-		let [n, r, i] = ae(Number.parseInt(e[1], 10), Number.parseFloat(e[2]) / 100, Number.parseFloat(e[3]) / 100);
-		return R(n, r, i);
+		let [n, r, i] = ie(Number.parseInt(e[1], 10), Number.parseFloat(e[2]) / 100, Number.parseFloat(e[3]) / 100);
+		return H(n, r, i);
 	}
-	let n = re[t];
+	let n = ne[t];
 	if (n) return n;
-}, B = {
+}, W = {
 	svg: "svg",
 	circle: "circle",
 	desc: "desc",
@@ -532,98 +608,98 @@ var re = {
 	polygon: "polygon",
 	polyline: "polyline",
 	stop: "stop"
-}, V = {
+}, G = {
 	fill: "fill",
 	stroke: "stroke"
-}, se = {
+}, oe = {
 	tiling: [
-		B.circle,
-		B.ellipse,
-		B.rect,
-		B.line,
-		B.path,
-		B.polygon,
-		B.polyline,
-		B.stop,
-		`[${V.fill}]`,
-		`[${V.stroke}]`
+		W.circle,
+		W.ellipse,
+		W.rect,
+		W.line,
+		W.path,
+		W.polygon,
+		W.polyline,
+		W.stop,
+		`[${G.fill}]`,
+		`[${G.stroke}]`
 	],
 	nonTiling: [
-		B.circle,
-		B.desc,
-		B.ellipse,
-		B.rect,
-		B.line,
-		B.path,
-		B.polygon,
-		B.polyline,
-		B.stop,
-		`[${V.fill}]`,
-		`[${V.stroke}]`
+		W.circle,
+		W.desc,
+		W.ellipse,
+		W.rect,
+		W.line,
+		W.path,
+		W.polygon,
+		W.polyline,
+		W.stop,
+		`[${G.fill}]`,
+		`[${G.stroke}]`
 	]
-}, ce = (e) => Array.from(e.querySelectorAll(se.tiling.map((e) => `*:not(clipPath) > ${e}`).join(", "))), le = (e) => {
-	let t = e.getAttribute(V.stroke);
+}, se = (e) => Array.from(e.querySelectorAll(oe.tiling.map((e) => `*:not(clipPath) > ${e}`).join(", "))), ce = (e) => {
+	let t = e.getAttribute(G.stroke);
 	return t === "none" || !t ? !1 : t;
-}, H = (e) => {
-	if (!(e === "none" || e === "transparent" || e.startsWith("url("))) return z(e);
-}, ue = (e) => {
-	let t = ce(e).reduce((e, t) => {
-		let n = t.getAttribute("stop-color"), r = t.getAttribute(V.fill) || "#000", i = le(t);
+}, K = (e) => {
+	if (!(e === "none" || e === "transparent" || e.startsWith("url("))) return U(e);
+}, le = (e) => {
+	let t = se(e).reduce((e, t) => {
+		let n = t.getAttribute("stop-color"), r = t.getAttribute(G.fill) || "#000", i = ce(t);
 		if (r && !n) {
-			let t = H(r);
+			let t = K(r);
 			t && e.add(t);
 		}
 		if (n) {
-			let t = H(n);
+			let t = K(n);
 			t && e.add(t);
 		}
 		if (i) {
-			let t = H(i);
+			let t = K(i);
 			t && e.add(t);
 		}
 		return e;
 	}, /* @__PURE__ */ new Set());
 	return Array.from(t);
-}, de = (e) => {
-	let t = new I().parseFromString(e, "image/svg+xml").querySelector("svg");
-	return t ? ue(t) : [];
+}, ue = (e) => {
+	let t = new N().parseFromString(e, "image/svg+xml").querySelector("svg");
+	return t ? le(t) : [];
 };
 //#endregion
 //#region src/glyph/svg-glyph-converter.ts
-function U(e) {
+function q(e) {
 	let t = e.trim(), n = t.startsWith("<svg") || t.startsWith("<?xml"), r = n ? t : `<svg>${t}</svg>`;
 	return {
-		doc: new I().parseFromString(r, "image/svg+xml"),
+		doc: new N().parseFromString(r, "image/svg+xml"),
 		wasWrapped: !n
 	};
 }
-function W(e, t) {
+function J(e, t) {
 	let n = e.querySelector("svg");
 	return n ? t ? n.innerHTML : n.outerHTML : "";
 }
-function fe(e) {
+function de(e) {
 	let { svgGlyphs: t } = e;
 	if (!t || t.size === 0) return [];
 	let n = /* @__PURE__ */ new Set();
-	for (let [, e] of t) for (let t of de(e.svg)) n.add(t);
+	for (let [, e] of t) for (let t of ue(e.svg)) n.add(t);
 	return Array.from(n);
 }
-function pe(e) {
+function fe(e) {
 	return !!e && e !== "none" && e !== "transparent" && !e.startsWith("url(");
 }
-function me(e) {
-	let t = new I().parseFromString(e, "image/svg+xml").querySelector("svg");
+function pe(e) {
+	let t = new N().parseFromString(e, "image/svg+xml").querySelector("svg");
 	return t ? t.innerHTML.trim() : "";
 }
-var he = [
+var me = [
 	"fill",
 	"stroke",
 	"clip-path",
 	"mask",
 	"filter"
 ];
-function ge(e, t) {
-	let { doc: n, wasWrapped: r } = U(e), i = /* @__PURE__ */ new Map();
+function he(e, t) {
+	let { doc: n, wasWrapped: r } = q(e), i = /* @__PURE__ */ new Map();
 	for (let e of n.querySelectorAll("[id]")) {
 		let n = e.getAttribute("id");
 		if (!n) continue;
@@ -631,7 +707,7 @@ function ge(e, t) {
 		i.set(n, r), e.setAttribute("id", r);
 	}
 	if (i.size === 0) return e;
-	for (let e of he) for (let t of n.querySelectorAll(`[${e}]`)) {
+	for (let e of me) for (let t of n.querySelectorAll(`[${e}]`)) {
 		let n = t.getAttribute(e);
 		if (n) {
 			let r = n.replace(/url\(#([^)]+)\)/g, (e, t) => {
@@ -648,13 +724,13 @@ function ge(e, t) {
 			a && e.setAttribute(t, `#${a}`);
 		}
 	}
-	return W(n, r);
+	return J(n, r);
 }
-var _e = [
+var ge = [
 	"fill",
 	"stroke",
 	"stop-color"
-], ve = [
+], _e = [
 	"path",
 	"rect",
 	"circle",
@@ -663,30 +739,30 @@ var _e = [
 	"polyline",
 	"text"
 ];
-function ye(e, t) {
-	let { doc: n, wasWrapped: r } = U(e), i = {};
-	for (let [e, n] of Object.entries(t)) i[z(e) ?? e.toLowerCase()] = n;
-	for (let e of _e) for (let t of n.querySelectorAll(`[${e}]`)) {
+function ve(e, t) {
+	let { doc: n, wasWrapped: r } = q(e), i = {};
+	for (let [e, n] of Object.entries(t)) i[U(e) ?? e.toLowerCase()] = n;
+	for (let e of ge) for (let t of n.querySelectorAll(`[${e}]`)) {
 		let n = t.getAttribute(e);
-		if (!n || !pe(n)) continue;
-		let r = z(n), a = r ? i[r] : void 0;
+		if (!n || !fe(n)) continue;
+		let r = U(n), a = r ? i[r] : void 0;
 		a && t.setAttribute(e, a.hex);
 	}
 	let a = i["#000000"];
 	if (a) {
-		let e = ve.map((e) => `${e}:not([fill])`).join(", ");
+		let e = _e.map((e) => `${e}:not([fill])`).join(", ");
 		for (let t of n.querySelectorAll(e)) t.setAttribute("fill", a.hex);
 	}
-	return W(n, r);
+	return J(n, r);
 }
 //#endregion
 //#region src/helpers/xml.ts
-function be(e) {
+function ye(e) {
 	return e.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&apos;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 //#endregion
 //#region src/rendering/index.ts
-var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontSize: r, spacing: i = T, horizontalAlignment: a = "centre", colourMap: o }) => {
+var Y = (e, t, n) => e / n * t, be = ({ font: e, baselinePath: t, text: n, fontSize: r, spacing: i = T, horizontalAlignment: a = "centre", colourMap: o }) => {
 	let { outlineWidth: s, letterSpacing: l, letterSpacingOutline: u } = i, d = new c(t), f = s ? r * s * 2 : 0, p = d.getTotalLength(), m = e.getPaths(n, 0, 0, r, { drawSVG: !1 }), h = e.getPath(n, 0, 0, r, { drawSVG: !1 }).getBoundingBox(), g = h.x1 - f / 2, _ = h.x2 + f / 2 - g, v = s > 0 ? u : l, y = v ? v * r : 0;
 	a === "distributed" && (y = n.length === 1 ? 0 : (p - _) / (n.length - 1));
 	let b = y * (n.length - 1), x = _ + b, S = 0 - g;
@@ -695,7 +771,7 @@ var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontS
 	for (let t = 0; t < m.length; t++) {
 		let i = m[t], a = i.getBoundingBox(), s = e.charToGlyph(n[t]), { advanceWidth: c } = s;
 		if (!c) throw Error(`No advance width for character: ${n[t]} in font ${e.names.fontFamily}`);
-		let { x1: l, x2: u } = s.getBoundingBox(), f = G(c, r, e.unitsPerEm), h = G(u - l, r, e.unitsPerEm), g = S + a.x1;
+		let { x1: l, x2: u } = s.getBoundingBox(), f = Y(c, r, e.unitsPerEm), h = Y(u - l, r, e.unitsPerEm), g = S + a.x1;
 		if (t > 0 && (g += y * t), g + h > p) throw Error(`TOO_WIDE: character "${n[t]}" at index ${t} exceeds baseline path length (${Math.round(g + h)} > ${Math.round(p)})`);
 		let _ = g + f / 2, v = d.getTangentAtLength(_), b = Math.atan2(v.y, v.x) * 180 / Math.PI, x = d.getPointAtLength(g), w = x.x, T = x.y, D = a.x2 - a.x1, O = new E(a.x1 + D / 2, 0), k = ee(new E(a.x1, 0), b, O), A = w - k.X, j = T - k.Y, M = new te();
 		M = M.translate(A, j);
@@ -710,8 +786,8 @@ var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontS
 		if (e.svgGlyphs) {
 			let n = e.svgGlyphs.get(s.index);
 			if (n) {
-				let e = me(n.svg);
-				e = ge(e, `g${s.index}-${t}`), o && (e = ye(e, o)), F = {
+				let e = pe(n.svg);
+				e = he(e, `g${s.index}-${t}`), o && (e = ve(e, o)), F = {
 					content: e,
 					viewBox: n.viewbox,
 					x: a.x1,
@@ -727,7 +803,7 @@ var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontS
 			matrix: M,
 			attributes: {
 				d: P,
-				"data-character": be(n[t]),
+				"data-character": ye(n[t]),
 				transform: N
 			},
 			glyphData: {
@@ -738,93 +814,146 @@ var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontS
 		});
 	}
 	return C;
-}, K = { hex: "#FFFFFF" }, q = (e, t) => {
-	let n = `data-${e}-colour-url`, r = [`${e}="${t.hex}"`];
-	return t.reference && r.push(`${n}="${t.reference}"`), r.join(" ");
-}, J = (e, t) => {
-	let { attributes: n, svgGlyph: r } = e;
-	return r ? `<g transform="${n.transform}" data-character="${n["data-character"]}"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${r.viewBox}" width="${r.width}" height="${r.height}" x="${r.x}" y="${r.y}" data-glyph-index="${r.glyphIndex}">${r.content}</svg></g>` : `<path d="${n.d}" ${q("fill", t)} transform="${n.transform}" data-character="${n["data-character"]}"/>`;
-}, Se = ({ boxDimensions: e, paths: t, spacing: n = T, fontSize: r = 0, fillColour: i = K, strokeColour: a = K }) => {
-	let { width: o, height: s } = e, { outlineWidth: c } = n, l = c > 0 && r > 0, u;
-	if (l) {
-		let e = r * c * 2;
-		u = `${t.filter((e) => !e.svgGlyph).map(({ attributes: t }) => `<path d="${t.d}" ${q("fill", a)} ${q("stroke", a)} stroke-width="${e}" stroke-linejoin="round" transform="${t.transform}" data-character="${t["data-character"]}"/>`).join("\n  ")}\n  ${t.map((e) => J(e, i)).join("\n  ")}`;
-	} else u = t.map((e) => J(e, i)).join("\n  ");
-	return `<svg xmlns="http://www.w3.org/2000/svg" width="${o}" height="${s}" viewBox="0 0 ${o} ${s}">${u ? `\n  ${u}\n` : ""}</svg>`;
-}, Y = (e) => {
-	let { text: t, font: n, physicalSize: r, fontSize: i, boxDimensions: a, spacing: o = T, verticalAlignment: s = "centre", baseline: c = "flat", horizontalAlignment: l = "left", fillColour: u = { hex: "#FFFFFF" }, strokeColour: d = { hex: "#FFFFFF" }, colourMap: f } = e, { width: p, height: m, physicalWidth: h, physicalHeight: g } = a;
-	if (p <= 0 || m <= 0) throw Error(`boxDimensions width and height must be positive (got ${p}x${m})`);
-	if (h <= 0 || g <= 0) throw Error(`boxDimensions physicalWidth and physicalHeight must be positive (got ${h}x${g})`);
-	if (r[0] <= 0) throw Error(`physicalSize height must be positive (got ${r[0]})`);
-	let _ = i ?? P({
-		font: n,
-		boxDimensions: a,
-		physicalSize: r,
+}, X = (e) => {
+	let { font: t, text: n, boxDimensions: r, physicalSize: i, fontSize: a, spacing: o = T, baseline: s = "flat", horizontalAlignment: c = "left", verticalAlignment: l = "centre", colourMap: u } = e, { width: d, height: f, physicalWidth: p, physicalHeight: m } = r;
+	if (d <= 0 || f <= 0) throw Error(`boxDimensions width and height must be positive (got ${d}x${f})`);
+	if (p <= 0 || m <= 0) throw Error(`boxDimensions physicalWidth and physicalHeight must be positive (got ${p}x${m})`);
+	if (i[0] <= 0) throw Error(`physicalSize height must be positive (got ${i[0]})`);
+	let h = a ?? z({
+		font: t,
+		boxDimensions: r,
+		physicalSize: i,
 		spacing: o
-	}), v = D(c), y = t.split("\n").filter((e) => e.length > 0);
-	y.length || (y = [""]), (v.type === "curved" || v.type === "custom") && (y = [y.join("")]);
-	let b = y.map((e) => F({
-		font: n,
+	}), g = D(s), _ = n.split("\n").filter((e) => e.length > 0);
+	_.length || (_ = [""]), (g.type === "curved" || g.type === "custom") && (_ = [_.join("")]);
+	let v = _.map((e) => B({
+		font: t,
 		text: e,
-		fontSize: _,
+		fontSize: h,
 		spacing: o
-	})), x = Math.max(...b.map((e) => e.baseline)), S = x + Math.max(...b.map((e) => e.height - e.baseline)), w = y.length === 1 ? S : S + S * (y.length - 1) * C, E = [];
-	for (let e = 0; e < y.length; e++) {
-		let t;
-		switch (v.type) {
+	})), y = Math.max(...v.map((e) => e.baseline)), b = y + Math.max(...v.map((e) => e.height - e.baseline)), x = _.length === 1 ? b : b + b * (_.length - 1) * C, S = [];
+	for (let e = 0; e < _.length; e++) {
+		let n;
+		switch (g.type) {
 			case "custom":
-				O(v.path), t = v.path;
+				O(g.path), n = g.path;
 				break;
 			case "curved": {
-				let e = F({
-					font: n,
-					text: M(n),
-					fontSize: _,
+				let e = B({
+					font: t,
+					text: L(t),
+					fontSize: h,
 					spacing: o
 				});
-				t = j({
-					boxDimensions: a,
+				n = j({
+					boxDimensions: r,
 					baseline: e.baseline,
 					textHeight: e.height,
-					verticalAlignment: s
+					verticalAlignment: l
 				});
 				break;
 			}
-			case "flat": t = k({
-				boxDimensions: a,
-				totalTextHeight: w,
-				baseline: x,
-				lineHeight: S,
-				verticalAlignment: s,
+			case "flat": n = k({
+				boxDimensions: r,
+				totalTextHeight: x,
+				baseline: y,
+				lineHeight: b,
+				verticalAlignment: l,
 				lineNumber: e
 			});
 		}
-		let r = xe({
-			font: n,
-			baselinePath: t,
-			text: y[e],
-			fontSize: _,
+		S.push(...be({
+			font: t,
+			baselinePath: n,
+			text: _[e],
+			fontSize: h,
 			spacing: o,
-			horizontalAlignment: l,
-			colourMap: f
-		});
-		E.push(...r);
+			horizontalAlignment: c,
+			colourMap: u
+		}));
+	}
+	return {
+		fontSize: h,
+		lines: _,
+		paths: S,
+		spacing: o,
+		tallestHeight: b,
+		totalHeight: x,
+		maxBaseline: y
+	};
+}, xe = (e) => {
+	let { font: t, boxDimensions: n, spacing: r = T } = e, { fontSize: i, paths: a, lines: o } = X(e), s = null;
+	for (let e of a) {
+		let { x1: t, y1: n, x2: r, y2: i } = e.glyphData.bbox, a = new I(t, n, r, i);
+		a.transform(e.matrix), s ? s.add(a) : s = a.getBBox();
+	}
+	if (s && r.outlineWidth > 0) {
+		let e = i * r.outlineWidth;
+		s = new I(s.x1 - e, s.y1 - e, s.x2 + e, s.y2 + e);
 	}
-	return Se({
-		boxDimensions: a,
-		paths: E,
+	let c = s ?? new I(0, 0, 0, 0), l = (e) => e / n.width * n.physicalWidth, u = (e) => e / n.height * n.physicalHeight, d = B({
+		font: t,
+		text: L(t),
+		fontSize: i,
+		spacing: r
+	});
+	return {
+		fontSize: i,
+		bbox: {
+			x: c.x,
+			y: c.y,
+			width: c.width,
+			height: c.height
+		},
+		physicalWidth: l(c.width),
+		physicalHeight: u(c.height),
+		physicalUnits: n.physicalUnits,
+		physicalCapHeight: u(d.height),
+		lines: o.map((e) => {
+			let n = B({
+				font: t,
+				text: e,
+				fontSize: i,
+				spacing: r
+			});
+			return {
+				text: e,
+				width: n.width,
+				height: n.height,
+				baseline: n.baseline
+			};
+		})
+	};
+}, Se = { hex: "#FFFFFF" }, Z = (e, t) => {
+	let n = `data-${e}-colour-url`, r = [`${e}="${t.hex}"`];
+	return t.reference && r.push(`${n}="${t.reference}"`), r.join(" ");
+}, Ce = (e, t) => {
+	let { attributes: n, svgGlyph: r } = e;
+	return r ? `<g transform="${n.transform}" data-character="${n["data-character"]}"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="${r.viewBox}" width="${r.width}" height="${r.height}" x="${r.x}" y="${r.y}" data-glyph-index="${r.glyphIndex}">${r.content}</svg></g>` : `<path d="${n.d}" ${Z("fill", t)} transform="${n.transform}" data-character="${n["data-character"]}"/>`;
+}, we = ({ boxDimensions: e, paths: t, spacing: n = T, fontSize: r = 0, fillColour: i = Se, strokeColour: a = Se }) => {
+	let { width: o, height: s } = e, { outlineWidth: c } = n, l = c > 0 && r > 0, u;
+	if (l) {
+		let e = r * c * 2;
+		u = `${t.filter((e) => !e.svgGlyph).map(({ attributes: t }) => `<path d="${t.d}" ${Z("fill", a)} ${Z("stroke", a)} stroke-width="${e}" stroke-linejoin="round" transform="${t.transform}" data-character="${t["data-character"]}"/>`).join("\n  ")}\n  ${t.map((e) => Ce(e, i)).join("\n  ")}`;
+	} else u = t.map((e) => Ce(e, i)).join("\n  ");
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${o}" height="${s}" viewBox="0 0 ${o} ${s}">${u ? `\n  ${u}\n` : ""}</svg>`;
+}, Q = (e) => {
+	let { boxDimensions: t, fillColour: n = { hex: "#FFFFFF" }, strokeColour: r = { hex: "#FFFFFF" } } = e, { fontSize: i, paths: a, spacing: o } = X(e);
+	return we({
+		boxDimensions: t,
+		paths: a,
 		spacing: o,
-		fontSize: _,
-		fillColour: u,
-		strokeColour: d
+		fontSize: i,
+		fillColour: n,
+		strokeColour: r
 	});
-}, X = 100, Ce = (e) => {
+}, Te = 100, Ee = (e) => {
 	let t = e.split("\n").filter((e) => e.length > 0);
 	return t.length ? t : [""];
-}, we = (e) => e.split("\n").filter((e) => e.length > 0).join(""), Te = (e, t, n, r, i, a) => {
-	let o = F({
+}, De = (e) => e.split("\n").filter((e) => e.length > 0).join(""), Oe = (e, t, n, r, i, a) => {
+	let o = B({
 		font: e,
-		text: M(e),
+		text: L(e),
 		fontSize: n,
 		spacing: r
 	}), s = {
@@ -832,7 +961,7 @@ var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontS
 		baseline: o.baseline,
 		textHeight: o.height,
 		verticalAlignment: a
-	}, l = new c(j(s)).getTotalLength(), { curveTop: u, curveBottom: d } = A(s), f = F({
+	}, l = new c(j(s)).getTotalLength(), { curveTop: u, curveBottom: d } = A(s), f = B({
 		font: e,
 		text: t,
 		fontSize: n,
@@ -842,36 +971,36 @@ var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontS
 		width: f.width <= l,
 		height: p >= 0 && m <= i.height
 	};
-}, Z = (e) => e.width && e.height, Q = (e) => e.width ? "height" : "width", Ee = .01, De = 60, Oe = ({ font: e, text: t, boxDimensions: n, spacing: r, verticalAlignment: i, minFontSize: a, maxFontSize: o }) => {
-	let s = we(t);
+}, $ = (e) => e.width && e.height, ke = (e) => e.width ? "height" : "width", Ae = .01, je = 60, Me = ({ font: e, text: t, boxDimensions: n, spacing: r, verticalAlignment: i, minFontSize: a, maxFontSize: o }) => {
+	let s = De(t);
 	if (!s.length) return {
 		fontSize: o,
 		fits: !0,
 		boundBy: "requestedSize"
 	};
-	let c = (t) => Te(e, s, t, r, n, i), l = c(a);
-	if (!Z(l)) return {
+	let c = (t) => Oe(e, s, t, r, n, i), l = c(a);
+	if (!$(l)) return {
 		fontSize: a,
 		fits: !1,
-		boundBy: Q(l)
+		boundBy: ke(l)
 	};
-	if (Z(c(o))) return {
+	if ($(c(o))) return {
 		fontSize: o,
 		fits: !0,
 		boundBy: "requestedSize"
 	};
 	let u = a, d = o, f = 0;
-	for (; d - u > Ee && f < De;) {
+	for (; d - u > Ae && f < je;) {
 		let e = (u + d) / 2;
-		Z(c(e)) ? u = e : d = e, f++;
+		$(c(e)) ? u = e : d = e, f++;
 	}
 	return {
 		fontSize: u,
 		fits: !0,
-		boundBy: Q(c(d))
+		boundBy: ke(c(d))
 	};
-}, $ = (e) => {
-	let { font: t, text: n, boxDimensions: r, size: i, spacing: a = T, baseline: o = "flat", verticalAlignment: s = "centre" } = e, l = i.mode === "fitToBox" ? i.maxFontSize : i.mode === "fontSize" ? i.fontSize : P({
+}, Ne = (e) => {
+	let { font: t, text: n, boxDimensions: r, size: i, spacing: a = T, baseline: o = "flat", verticalAlignment: s = "centre" } = e, l = i.mode === "fitToBox" ? i.maxFontSize : i.mode === "fontSize" ? i.fontSize : z({
 		font: t,
 		boxDimensions: r,
 		physicalSize: i.physicalSize,
@@ -883,7 +1012,7 @@ var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontS
 		boundBy: "requestedSize"
 	};
 	let u = D(o);
-	if (u.type === "curved") return Oe({
+	if (u.type === "curved") return Me({
 		font: t,
 		text: n,
 		boxDimensions: r,
@@ -892,14 +1021,14 @@ var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontS
 		minFontSize: i.mode === "fitToBox" ? i.minFontSize : l,
 		maxFontSize: l
 	});
-	let d = Ce(n);
+	let d = Ee(n);
 	u.type === "custom" && (d = [d.join("")]);
-	let f = d.map((e) => F({
+	let f = d.map((e) => B({
 		font: t,
 		text: e,
-		fontSize: X,
+		fontSize: Te,
 		spacing: a
-	})), p = Math.max(...f.map((e) => e.baseline)) + Math.max(...f.map((e) => e.height - e.baseline)), m = d.length === 1 ? p : p + p * (d.length - 1) * C, h = Math.max(...f.map((e) => e.width)), g = (u.type === "custom" ? new c(u.path).getTotalLength() : r.width) / h, _ = r.height / m, v = g <= _ ? "width" : "height", y = X * Math.min(g, _);
+	})), p = Math.max(...f.map((e) => e.baseline)) + Math.max(...f.map((e) => e.height - e.baseline)), m = d.length === 1 ? p : p + p * (d.length - 1) * C, h = Math.max(...f.map((e) => e.width)), g = (u.type === "custom" ? new c(u.path).getTotalLength() : r.width) / h, _ = r.height / m, v = g <= _ ? "width" : "height", y = Te * Math.min(g, _);
 	return i.mode === "fitToBox" ? y < i.minFontSize ? {
 		fontSize: i.minFontSize,
 		fits: !1,
@@ -921,10 +1050,10 @@ var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontS
 		fits: !1,
 		boundBy: v
 	};
-}, ke = (e) => {
+}, Pe = (e) => {
 	let t = e.text, n = t, r = 0, i = 0;
 	for (;;) {
-		let a = $({
+		let a = Ne({
 			...e,
 			text: n
 		});
@@ -942,15 +1071,15 @@ var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontS
 			i += n.length - e.length, n = e;
 		}
 	}
-}, Ae = async (e) => {
+}, Fe = async (e) => {
 	let { fontUrl: t, fontSizeFallback: n, ...r } = e, i = await x(t, !!r.colourMap);
 	try {
-		return Y({
+		return Q({
 			...r,
 			font: i
 		});
 	} catch (e) {
-		if (n != null && e instanceof Error && e.message.startsWith("TOO_WIDE")) return Y({
+		if (n != null && e instanceof Error && e.message.startsWith("TOO_WIDE")) return Q({
 			...r,
 			font: i,
 			fontSize: n
@@ -959,4 +1088,4 @@ var G = (e, t, n) => e / n * t, xe = ({ font: e, baselinePath: t, text: n, fontS
 	}
 };
 //#endregion
-export { S as DEFAULT_OUTLINE_FACTOR, T as DEFAULT_SPACING, C as LINE_HEIGHT, ke as fitAndTruncateTextToBox, j as generateCurvedBaseline, k as generateFlatBaseline, p as getFontCache, fe as getFontColours, P as getFontSizeFromPhysicalSize, $ as getFontSizeToFitBox, Ae as getRenderedText, F as getTextMetricsAtFontSize, x as loadFont, D as normaliseBaselineOption, Y as renderText, O as validateCustomBaselinePath };
+export { S as DEFAULT_OUTLINE_FACTOR, T as DEFAULT_SPACING, C as LINE_HEIGHT, Pe as fitAndTruncateTextToBox, j as generateCurvedBaseline, k as generateFlatBaseline, p as getFontCache, de as getFontColours, z as getFontSizeFromPhysicalSize, Ne as getFontSizeToFitBox, Fe as getRenderedText, B as getTextMetricsAtFontSize, X as layoutText, x as loadFont, xe as measureText, D as normaliseBaselineOption, Q as renderText, O as validateCustomBaselinePath };