@versatiles/svg-renderer 1.1.0 → 1.2.0

package/dist/maplibre-svg-export.umd.js

@@ -497,10 +497,7 @@
 				"type": "enum",
 				"values": { "image": {} }
 			},
-			"url": {
-				"required": true,
-				"type": "string"
-			},
+			"url": { "type": "string" },
 			"coordinates": {
 				"required": true,
 				"type": "array",
@@ -840,9 +837,9 @@
 				"requires": ["icon-image"],
 				"expression": {
 					"interpolated": false,
-					"parameters": ["zoom"]
+					"parameters": ["zoom", "feature"]
 				},
-				"property-type": "data-constant"
+				"property-type": "data-driven"
 			},
 			"icon-size": {
 				"type": "number",
@@ -1303,6 +1300,31 @@
 				},
 				"property-type": "data-constant"
 			},
+			"symbol-height-offset": {
+				"type": "number",
+				"default": 0,
+				"units": "meters",
+				"requires": [{ "symbol-placement": ["point"] }],
+				"expression": {
+					"interpolated": true,
+					"parameters": ["zoom", "feature"]
+				},
+				"property-type": "data-driven"
+			},
+			"symbol-height-anchor": {
+				"type": "enum",
+				"values": {
+					"ground": {},
+					"absolute": {}
+				},
+				"default": "ground",
+				"requires": ["symbol-height-offset"],
+				"expression": {
+					"interpolated": false,
+					"parameters": ["zoom"]
+				},
+				"property-type": "data-constant"
+			},
 			"visibility": {
 				"type": "enum",
 				"values": {
@@ -1778,7 +1800,6 @@
 			"fill-extrusion-height": {
 				"type": "number",
 				"default": 0,
-				"minimum": 0,
 				"units": "meters",
 				"transition": true,
 				"expression": {
@@ -1794,7 +1815,6 @@
 			"fill-extrusion-base": {
 				"type": "number",
 				"default": 0,
-				"minimum": 0,
 				"units": "meters",
 				"transition": true,
 				"requires": ["fill-extrusion-height"],
@@ -2829,44 +2849,10 @@
 			}
 		}
 	};
-	//#endregion
+
 	//#region src/reference/latest.ts
 	const latest = v8_default;
-	//#endregion
-	//#region src/expression/parsing_error.ts
-	var ExpressionParsingError = class extends Error {
-		constructor(key, message) {
-			super(message);
-			this.message = message;
-			this.key = key;
-		}
-	};
-	//#endregion
-	//#region src/expression/scope.ts
-	/**
-	* Tracks `let` bindings during expression parsing.
-	* @private
-	*/
-	var Scope = class Scope {
-		constructor(parent, bindings = []) {
-			this.parent = parent;
-			this.bindings = {};
-			for (const [name, expression] of bindings) this.bindings[name] = expression;
-		}
-		concat(bindings) {
-			return new Scope(this, bindings);
-		}
-		get(name) {
-			if (this.bindings[name]) return this.bindings[name];
-			if (this.parent) return this.parent.get(name);
-			throw new Error(`${name} not found in scope.`);
-		}
-		has(name) {
-			if (this.bindings[name]) return true;
-			return this.parent ? this.parent.has(name) : false;
-		}
-	};
-	//#endregion
+
 	//#region src/expression/types.ts
 	const NullType = { kind: "null" };
 	const NumberType = { kind: "number" };
@@ -2962,7 +2948,7 @@
 		if (provided.kind === "array" && sample.kind === "array") return provided.itemType.kind === sample.itemType.kind && typeof provided.N === "number";
 		return provided.kind === sample.kind;
 	}
-	//#endregion
+
 	//#region src/expression/types/color_spaces.ts
 	const Xn = .96422;
 	const Yn = 1;
@@ -3057,7 +3043,7 @@
 			alpha
 		];
 	}
-	//#endregion
+
 	//#region src/util/get_own.ts
 	const hasOwnProperty = Object.hasOwn || function hasOwnProperty(object, key) {
 		return Object.prototype.hasOwnProperty.call(object, key);
@@ -3065,7 +3051,7 @@
 	function getOwn(object, key) {
 		return hasOwnProperty(object, key) ? object[key] : void 0;
 	}
-	//#endregion
+
 	//#region src/expression/types/parse_css_color.ts
 	/**
 	* CSS color parser compliant with CSS Color 4 Specification.
@@ -3144,9 +3130,9 @@
 					const maxValue = valFormat === "%%%" ? 100 : valFormat === "" ? 255 : 0;
 					if (maxValue) {
 						const rgba = [
-							clamp(+r / maxValue, 0, 1),
-							clamp(+g / maxValue, 0, 1),
-							clamp(+b / maxValue, 0, 1),
+							clamp$1(+r / maxValue, 0, 1),
+							clamp$1(+g / maxValue, 0, 1),
+							clamp$1(+b / maxValue, 0, 1),
 							a ? parseAlpha(+a, ap) : 1
 						];
 						if (validateNumbers(rgba)) return rgba;
@@ -3166,8 +3152,8 @@
 			if (argFormat === "  " || argFormat === "  /" || argFormat === ",," || argFormat === ",,,") {
 				const hsla = [
 					+h,
-					clamp(+s, 0, 100),
-					clamp(+l, 0, 100),
+					clamp$1(+s, 0, 100),
+					clamp$1(+l, 0, 100),
 					a ? parseAlpha(+a, ap) : 1
 				];
 				if (validateNumbers(hsla)) return hslToRgb(hsla);
@@ -3178,9 +3164,9 @@
 		return parseInt(hex.padEnd(2, hex), 16) / 255;
 	}
 	function parseAlpha(a, asPercentage) {
-		return clamp(asPercentage ? a / 100 : a, 0, 1);
+		return clamp$1(asPercentage ? a / 100 : a, 0, 1);
 	}
-	function clamp(n, min, max) {
+	function clamp$1(n, min, max) {
 		return Math.min(Math.max(min, n), max);
 	}
 	/**
@@ -3943,7 +3929,7 @@
 			50
 		]
 	};
-	//#endregion
+
 	//#region src/util/interpolate-primitives.ts
 	function interpolateNumber(from, to, t) {
 		return from + t * (to - from);
@@ -3953,7 +3939,7 @@
 			return interpolateNumber(d, to[i], t);
 		});
 	}
-	//#endregion
+
 	//#region src/expression/types/color.ts
 	/**
 	* Checks whether the specified color space is one of the supported interpolation color spaces.
@@ -4137,26 +4123,7 @@
 			}
 		}
 	};
-	//#endregion
-	//#region src/expression/types/collator.ts
-	var Collator = class {
-		constructor(caseSensitive, diacriticSensitive, locale) {
-			if (caseSensitive) this.sensitivity = diacriticSensitive ? "variant" : "case";
-			else this.sensitivity = diacriticSensitive ? "accent" : "base";
-			this.locale = locale;
-			this.collator = new Intl.Collator(this.locale ? this.locale : [], {
-				sensitivity: this.sensitivity,
-				usage: "search"
-			});
-		}
-		compare(lhs, rhs) {
-			return this.collator.compare(lhs, rhs);
-		}
-		resolvedLocale() {
-			return new Intl.Collator(this.locale ? this.locale : []).resolvedOptions().locale;
-		}
-	};
-	//#endregion
+
 	//#region src/expression/types/formatted.ts
 	const VERTICAL_ALIGN_OPTIONS = [
 		"bottom",
@@ -4193,7 +4160,7 @@
 			return this.sections.map((section) => section.text).join("");
 		}
 	};
-	//#endregion
+
 	//#region src/expression/types/padding.ts
 	/**
 	* A set of four numbers representing padding around a box. Create instances from
@@ -4237,14 +4204,12 @@
 						input[1]
 					];
 					break;
-				case 3:
-					input = [
-						input[0],
-						input[1],
-						input[2],
-						input[1]
-					];
-					break;
+				case 3: input = [
+					input[0],
+					input[1],
+					input[2],
+					input[1]
+				];
 			}
 			return new Padding(input);
 		}
@@ -4255,7 +4220,7 @@
 			return new Padding(interpolateArray(from.values, to.values, t));
 		}
 	};
-	//#endregion
+
 	//#region src/expression/types/number_array.ts
 	/**
 	* An array of numbers. Create instances from
@@ -4285,7 +4250,7 @@
 			return new NumberArray(interpolateArray(from.values, to.values, t));
 		}
 	};
-	//#endregion
+
 	//#region src/expression/types/color_array.ts
 	/**
 	* An array of colors. Create instances from
@@ -4328,7 +4293,7 @@
 			return new ColorArray(colors);
 		}
 	};
-	//#endregion
+
 	//#region src/expression/runtime_error.ts
 	var RuntimeError = class extends Error {
 		constructor(message, path) {
@@ -4340,7 +4305,7 @@
 			return this.message;
 		}
 	};
-	//#endregion
+
 	//#region src/expression/types/variable_anchor_offset_collection.ts
 	/** Set of valid anchor positions, as a set for validation */
 	const anchors = /* @__PURE__ */ new Set([
@@ -4392,7 +4357,7 @@
 			return new VariableAnchorOffsetCollection(output);
 		}
 	};
-	//#endregion
+
 	//#region src/expression/types/resolved_image.ts
 	var ResolvedImage = class ResolvedImage {
 		constructor(options) {
@@ -4410,7 +4375,7 @@
 			});
 		}
 	};
-	//#endregion
+
 	//#region src/expression/types/projection_definition.ts
 	var ProjectionDefinition = class ProjectionDefinition {
 		constructor(from, to, transition) {
@@ -4436,7 +4401,26 @@
 			if (typeof input === "string") return new ProjectionDefinition(input, input, 1);
 		}
 	};
-	//#endregion
+
+	//#region src/expression/types/collator.ts
+	var Collator = class {
+		constructor(caseSensitive, diacriticSensitive, locale) {
+			if (caseSensitive) this.sensitivity = diacriticSensitive ? "variant" : "case";
+			else this.sensitivity = diacriticSensitive ? "accent" : "base";
+			this.locale = locale;
+			this.collator = new Intl.Collator(this.locale ? this.locale : [], {
+				sensitivity: this.sensitivity,
+				usage: "search"
+			});
+		}
+		compare(lhs, rhs) {
+			return this.collator.compare(lhs, rhs);
+		}
+		resolvedLocale() {
+			return new Intl.Collator(this.locale ? this.locale : []).resolvedOptions().locale;
+		}
+	};
+
 	//#region src/expression/values.ts
 	function validateRGBA(r, g, b, a) {
 		if (!(typeof r === "number" && r >= 0 && r <= 255 && typeof g === "number" && g >= 0 && g <= 255 && typeof b === "number" && b >= 0 && b <= 255)) return `Invalid rgba value [${(typeof a === "number" ? [
@@ -4503,7 +4487,7 @@
 		else if (value instanceof Color$1 || value instanceof ProjectionDefinition || value instanceof Formatted || value instanceof Padding || value instanceof NumberArray || value instanceof ColorArray || value instanceof VariableAnchorOffsetCollection || value instanceof ResolvedImage) return value.toString();
 		else return JSON.stringify(value);
 	}
-	//#endregion
+
 	//#region src/expression/definitions/literal.ts
 	var Literal = class Literal {
 		constructor(type, value) {
@@ -4512,7 +4496,7 @@
 		}
 		static parse(args, context) {
 			if (args.length !== 2) return context.error(`'literal' expression requires exactly one argument, but found ${args.length - 1} instead.`);
-			if (!isValue(args[1])) return context.error("invalid value");
+			if (!isValue(args[1])) return context.error(`invalid value of type "${typeof args[1]}"`);
 			const value = args[1];
 			let type = typeOf(value);
 			const expected = context.expectedType;
@@ -4527,86 +4511,525 @@
 			return true;
 		}
 	};
-	//#endregion
-	//#region src/expression/definitions/assertion.ts
-	const types$1 = {
-		string: StringType,
-		number: NumberType,
-		boolean: BooleanType,
-		object: ObjectType
-	};
-	var Assertion = class Assertion {
-		constructor(type, args, key) {
-			this.type = type;
-			this.args = args;
-			this.key = key;
+
+	//#region src/expression/evaluation_context.ts
+	const geometryTypes = [
+		"Unknown",
+		"Point",
+		"LineString",
+		"Polygon"
+	];
+	var EvaluationContext = class {
+		constructor() {
+			this.globals = null;
+			this.feature = null;
+			this.featureState = null;
+			this.formattedSection = null;
+			this._parseColorCache = /* @__PURE__ */ new Map();
+			this.availableImages = null;
+			this.canonical = null;
 		}
-		static parse(args, context) {
-			if (args.length < 2) return context.error("Expected at least one argument.");
-			let i = 1;
-			let type;
-			const name = args[0];
-			if (name === "array") {
-				let itemType;
-				if (args.length > 2) {
-					const type = args[1];
-					if (typeof type !== "string" || !(type in types$1) || type === "object") return context.error("The item type argument of \"array\" must be one of string, number, boolean", 1);
-					itemType = types$1[type];
-					i++;
-				} else itemType = ValueType;
-				let N;
-				if (args.length > 3) {
-					if (args[2] !== null && (typeof args[2] !== "number" || args[2] < 0 || args[2] !== Math.floor(args[2]))) return context.error("The length argument to \"array\" must be a positive integer literal", 2);
-					N = args[2];
-					i++;
-				}
-				type = array(itemType, N);
-			} else {
-				if (!types$1[name]) throw new Error(`Types doesn't contain name = ${name}`);
-				type = types$1[name];
-			}
-			const parsed = [];
-			for (; i < args.length; i++) {
-				const input = context.parse(args[i], i, ValueType);
-				if (!input) return null;
-				parsed.push(input);
-			}
-			return new Assertion(type, parsed, context.key);
+		id() {
+			return this.feature && "id" in this.feature ? this.feature.id : null;
 		}
-		evaluate(ctx) {
-			for (let i = 0; i < this.args.length; i++) {
-				const value = this.args[i].evaluate(ctx);
-				if (!checkSubtype(this.type, typeOf(value))) return value;
-				else if (i === this.args.length - 1) throw new RuntimeError(`Expected value to be of type ${typeToString(this.type)}, but found ${typeToString(typeOf(value))} instead.`, this.key);
-			}
-			throw new Error();
+		geometryType() {
+			return this.feature ? typeof this.feature.type === "number" ? geometryTypes[this.feature.type] : this.feature.type : null;
 		}
-		eachChild(fn) {
-			this.args.forEach(fn);
+		geometry() {
+			return this.feature && "geometry" in this.feature ? this.feature.geometry : null;
 		}
-		outputDefined() {
-			return this.args.every((arg) => arg.outputDefined());
+		canonicalID() {
+			return this.canonical;
+		}
+		properties() {
+			return this.feature && this.feature.properties || {};
+		}
+		parseColor(input) {
+			let cached = this._parseColorCache.get(input);
+			if (!cached) {
+				cached = Color$1.parse(input);
+				this._parseColorCache.set(input, cached);
+			}
+			return cached;
 		}
 	};
-	//#endregion
-	//#region src/expression/definitions/coercion.ts
-	const types = {
-		"to-boolean": BooleanType,
-		"to-color": ColorType,
-		"to-number": NumberType,
-		"to-string": StringType
-	};
+
+	//#region src/expression/stops.ts
 	/**
-	* Special form for error-coalescing coercion expressions "to-number",
-	* "to-color".  Since these coercions can fail at runtime, they accept multiple
-	* arguments, only evaluating one at a time until one succeeds.
-	*
+	* Returns the index of the last stop <= input, or 0 if it doesn't exist.
 	* @private
 	*/
-	var Coercion = class Coercion {
-		constructor(type, args, key) {
+	function findStopLessThanOrEqualTo(stops, input, key) {
+		const lastIndex = stops.length - 1;
+		let lowerIndex = 0;
+		let upperIndex = lastIndex;
+		let currentIndex = 0;
+		let currentValue, nextValue;
+		while (lowerIndex <= upperIndex) {
+			currentIndex = Math.floor((lowerIndex + upperIndex) / 2);
+			currentValue = stops[currentIndex];
+			nextValue = stops[currentIndex + 1];
+			if (currentValue <= input) {
+				if (currentIndex === lastIndex || input < nextValue) return currentIndex;
+				lowerIndex = currentIndex + 1;
+			} else if (currentValue > input) upperIndex = currentIndex - 1;
+			else throw new RuntimeError("Input is not a number.", key);
+		}
+		return 0;
+	}
+
+	//#region src/expression/definitions/step.ts
+	var Step = class Step {
+		constructor(type, input, stops, key) {
 			this.type = type;
-			this.args = args;
+			this.input = input;
+			this.key = key;
+			this.labels = [];
+			this.outputs = [];
+			for (const [label, expression] of stops) {
+				this.labels.push(label);
+				this.outputs.push(expression);
+			}
+		}
+		static parse(args, context) {
+			if (args.length - 1 < 4) return context.error(`Expected at least 4 arguments, but found only ${args.length - 1}.`);
+			if ((args.length - 1) % 2 !== 0) return context.error("Expected an even number of arguments.");
+			const input = context.parse(args[1], 1, NumberType);
+			if (!input) return null;
+			const stops = [];
+			let outputType = null;
+			if (context.expectedType && context.expectedType.kind !== "value") outputType = context.expectedType;
+			for (let i = 1; i < args.length; i += 2) {
+				const label = i === 1 ? -Infinity : args[i];
+				const value = args[i + 1];
+				const labelKey = i;
+				const valueKey = i + 1;
+				if (typeof label !== "number") return context.error("Input/output pairs for \"step\" expressions must be defined using literal numeric values (not computed expressions) for the input values.", labelKey);
+				if (stops.length && stops[stops.length - 1][0] >= label) return context.error("Input/output pairs for \"step\" expressions must be arranged with input values in strictly ascending order.", labelKey);
+				const parsed = context.parse(value, valueKey, outputType);
+				if (!parsed) return null;
+				outputType = outputType || parsed.type;
+				stops.push([label, parsed]);
+			}
+			return new Step(outputType, input, stops, context.key);
+		}
+		evaluate(ctx) {
+			const labels = this.labels;
+			const outputs = this.outputs;
+			if (labels.length === 1) return outputs[0].evaluate(ctx);
+			const value = this.input.evaluate(ctx);
+			if (value <= labels[0]) return outputs[0].evaluate(ctx);
+			const stopCount = labels.length;
+			if (value >= labels[stopCount - 1]) return outputs[stopCount - 1].evaluate(ctx);
+			return outputs[findStopLessThanOrEqualTo(labels, value, this.key)].evaluate(ctx);
+		}
+		eachChild(fn) {
+			fn(this.input);
+			for (const expression of this.outputs) fn(expression);
+		}
+		outputDefined() {
+			return this.outputs.every((out) => out.outputDefined());
+		}
+	};
+
+	//#region node_modules/@mapbox/unitbezier/index.js
+	function unitBezier(p1x, p1y, p2x, p2y) {
+		const cx = 3 * p1x;
+		const bx = 3 * (p2x - p1x) - cx;
+		const ax = 1 - cx - bx;
+		const cy = 3 * p1y;
+		const by = 3 * (p2y - p1y) - cy;
+		const ay = 1 - cy - by;
+		return function solve(x, epsilon = 1e-6) {
+			if (x <= 0) return 0;
+			if (x >= 1) return 1;
+			let t = x;
+			for (let i = 0; i < 8; i++) {
+				const x2 = ((ax * t + bx) * t + cx) * t - x;
+				if (Math.abs(x2) < epsilon) return ((ay * t + by) * t + cy) * t;
+				const d2 = (3 * ax * t + 2 * bx) * t + cx;
+				if (Math.abs(d2) < 1e-6) break;
+				t -= x2 / d2;
+			}
+			let t0 = 0;
+			let t1 = 1;
+			t = x;
+			for (let i = 0; i < 20; i++) {
+				const x2 = ((ax * t + bx) * t + cx) * t;
+				if (Math.abs(x2 - x) < epsilon) break;
+				if (x > x2) t0 = t;
+				else t1 = t;
+				t = (t0 + t1) * .5;
+			}
+			return ((ay * t + by) * t + cy) * t;
+		};
+	}
+
+	//#region src/expression/definitions/interpolate.ts
+	var Interpolate = class Interpolate {
+		constructor(type, operator, interpolation, input, stops, key) {
+			this.type = type;
+			this.operator = operator;
+			this.interpolation = interpolation;
+			this.input = input;
+			this.key = key;
+			this.labels = [];
+			this.outputs = [];
+			for (const [label, expression] of stops) {
+				this.labels.push(label);
+				this.outputs.push(expression);
+			}
+		}
+		static interpolationFactor(interpolation, input, lower, upper) {
+			let t = 0;
+			if (interpolation.name === "exponential") t = exponentialInterpolation(input, interpolation.base, lower, upper);
+			else if (interpolation.name === "linear") t = exponentialInterpolation(input, 1, lower, upper);
+			else if (interpolation.name === "cubic-bezier") {
+				const c = interpolation.controlPoints;
+				t = unitBezier(c[0], c[1], c[2], c[3])(exponentialInterpolation(input, 1, lower, upper));
+			}
+			return t;
+		}
+		static parse(args, context) {
+			let [operator, interpolation, input, ...rest] = args;
+			if (!Array.isArray(interpolation) || interpolation.length === 0) return context.error("Expected an interpolation type expression.", 1);
+			if (interpolation[0] === "linear") interpolation = { name: "linear" };
+			else if (interpolation[0] === "exponential") {
+				const base = interpolation[1];
+				if (typeof base !== "number") return context.error("Exponential interpolation requires a numeric base.", 1, 1);
+				interpolation = {
+					name: "exponential",
+					base
+				};
+			} else if (interpolation[0] === "cubic-bezier") {
+				const controlPoints = interpolation.slice(1);
+				if (controlPoints.length !== 4 || controlPoints.some((t) => typeof t !== "number" || t < 0 || t > 1)) return context.error("Cubic bezier interpolation requires four numeric arguments with values between 0 and 1.", 1);
+				interpolation = {
+					name: "cubic-bezier",
+					controlPoints
+				};
+			} else return context.error(`Unknown interpolation type ${String(interpolation[0])}`, 1, 0);
+			if (args.length - 1 < 4) return context.error(`Expected at least 4 arguments, but found only ${args.length - 1}.`);
+			if ((args.length - 1) % 2 !== 0) return context.error("Expected an even number of arguments.");
+			input = context.parse(input, 2, NumberType);
+			if (!input) return null;
+			const stops = [];
+			let outputType = null;
+			if ((operator === "interpolate-hcl" || operator === "interpolate-lab") && context.expectedType != ColorArrayType) outputType = ColorType;
+			else if (context.expectedType && context.expectedType.kind !== "value") outputType = context.expectedType;
+			for (let i = 0; i < rest.length; i += 2) {
+				const label = rest[i];
+				const value = rest[i + 1];
+				const labelKey = i + 3;
+				const valueKey = i + 4;
+				if (typeof label !== "number") return context.error("Input/output pairs for \"interpolate\" expressions must be defined using literal numeric values (not computed expressions) for the input values.", labelKey);
+				if (stops.length && stops[stops.length - 1][0] >= label) return context.error("Input/output pairs for \"interpolate\" expressions must be arranged with input values in strictly ascending order.", labelKey);
+				const parsed = context.parse(value, valueKey, outputType);
+				if (!parsed) return null;
+				outputType = outputType || parsed.type;
+				stops.push([label, parsed]);
+			}
+			if (!verifyType(outputType, NumberType) && !verifyType(outputType, ProjectionDefinitionType) && !verifyType(outputType, ColorType) && !verifyType(outputType, PaddingType) && !verifyType(outputType, NumberArrayType) && !verifyType(outputType, ColorArrayType) && !verifyType(outputType, VariableAnchorOffsetCollectionType) && !verifyType(outputType, array(NumberType))) return context.error(`Type ${typeToString(outputType)} is not interpolatable.`);
+			return new Interpolate(outputType, operator, interpolation, input, stops, context.key);
+		}
+		evaluate(ctx) {
+			const labels = this.labels;
+			const outputs = this.outputs;
+			if (labels.length === 1) return outputs[0].evaluate(ctx);
+			const value = this.input.evaluate(ctx);
+			if (value <= labels[0]) return outputs[0].evaluate(ctx);
+			const stopCount = labels.length;
+			if (value >= labels[stopCount - 1]) return outputs[stopCount - 1].evaluate(ctx);
+			const index = findStopLessThanOrEqualTo(labels, value, this.key);
+			const lower = labels[index];
+			const upper = labels[index + 1];
+			const t = Interpolate.interpolationFactor(this.interpolation, value, lower, upper);
+			const outputLower = outputs[index].evaluate(ctx);
+			const outputUpper = outputs[index + 1].evaluate(ctx);
+			switch (this.operator) {
+				case "interpolate": switch (this.type.kind) {
+					case "number": return interpolateNumber(outputLower, outputUpper, t);
+					case "color": return Color$1.interpolate(outputLower, outputUpper, t);
+					case "padding": return Padding.interpolate(outputLower, outputUpper, t);
+					case "colorArray": return ColorArray.interpolate(outputLower, outputUpper, t);
+					case "numberArray": return NumberArray.interpolate(outputLower, outputUpper, t);
+					case "variableAnchorOffsetCollection": return VariableAnchorOffsetCollection.interpolate(outputLower, outputUpper, t, this.key);
+					case "array": return interpolateArray(outputLower, outputUpper, t);
+					case "projectionDefinition": return ProjectionDefinition.interpolate(outputLower, outputUpper, t);
+				}
+				case "interpolate-hcl": switch (this.type.kind) {
+					case "color": return Color$1.interpolate(outputLower, outputUpper, t, "hcl");
+					case "colorArray": return ColorArray.interpolate(outputLower, outputUpper, t, "hcl");
+				}
+				case "interpolate-lab": switch (this.type.kind) {
+					case "color": return Color$1.interpolate(outputLower, outputUpper, t, "lab");
+					case "colorArray": return ColorArray.interpolate(outputLower, outputUpper, t, "lab");
+				}
+			}
+		}
+		eachChild(fn) {
+			fn(this.input);
+			for (const expression of this.outputs) fn(expression);
+		}
+		outputDefined() {
+			return this.outputs.every((out) => out.outputDefined());
+		}
+	};
+	/**
+	* Returns a ratio that can be used to interpolate between exponential function
+	* stops.
+	* How it works: Two consecutive stop values define a (scaled and shifted) exponential function `f(x) = a * base^x + b`, where `base` is the user-specified base,
+	* and `a` and `b` are constants affording sufficient degrees of freedom to fit
+	* the function to the given stops.
+	*
+	* Here's a bit of algebra that lets us compute `f(x)` directly from the stop
+	* values without explicitly solving for `a` and `b`:
+	*
+	* First stop value: `f(x0) = y0 = a * base^x0 + b`
+	* Second stop value: `f(x1) = y1 = a * base^x1 + b`
+	* => `y1 - y0 = a(base^x1 - base^x0)`
+	* => `a = (y1 - y0)/(base^x1 - base^x0)`
+	*
+	* Desired value: `f(x) = y = a * base^x + b`
+	* => `f(x) = y0 + a * (base^x - base^x0)`
+	*
+	* From the above, we can replace the `a` in `a * (base^x - base^x0)` and do a
+	* little algebra:
+	* ```
+	* a * (base^x - base^x0) = (y1 - y0)/(base^x1 - base^x0) * (base^x - base^x0)
+	*                     = (y1 - y0) * (base^x - base^x0) / (base^x1 - base^x0)
+	* ```
+	*
+	* If we let `(base^x - base^x0) / (base^x1 base^x0)`, then we have
+	* `f(x) = y0 + (y1 - y0) * ratio`.  In other words, `ratio` may be treated as
+	* an interpolation factor between the two stops' output values.
+	*
+	* (Note: a slightly different form for `ratio`,
+	* `(base^(x-x0) - 1) / (base^(x1-x0) - 1) `, is equivalent, but requires fewer
+	* expensive `Math.pow()` operations.)
+	*
+	* @private
+	*/
+	function exponentialInterpolation(input, base, lowerValue, upperValue) {
+		const difference = upperValue - lowerValue;
+		const progress = input - lowerValue;
+		if (difference === 0) return 0;
+		else if (base === 1) return progress / difference;
+		else return (Math.pow(base, progress) - 1) / (Math.pow(base, difference) - 1);
+	}
+	const interpolateFactory = {
+		color: Color$1.interpolate,
+		number: interpolateNumber,
+		padding: Padding.interpolate,
+		numberArray: NumberArray.interpolate,
+		colorArray: ColorArray.interpolate,
+		variableAnchorOffsetCollection: VariableAnchorOffsetCollection.interpolate,
+		array: interpolateArray
+	};
+
+	//#region src/expression/definitions/format.ts
+	var FormatExpression = class FormatExpression {
+		constructor(sections) {
+			this.type = FormattedType;
+			this.sections = sections;
+		}
+		static parse(args, context) {
+			if (args.length < 2) return context.error("Expected at least one argument.");
+			const firstArg = args[1];
+			if (!Array.isArray(firstArg) && typeof firstArg === "object") return context.error("First argument must be an image or text section.");
+			const sections = [];
+			let nextTokenMayBeObject = false;
+			for (let i = 1; i <= args.length - 1; ++i) {
+				const arg = args[i];
+				if (nextTokenMayBeObject && typeof arg === "object" && !Array.isArray(arg)) {
+					nextTokenMayBeObject = false;
+					let scale = null;
+					if (arg["font-scale"]) {
+						scale = context.parse(arg["font-scale"], 1, NumberType);
+						if (!scale) return null;
+					}
+					let font = null;
+					if (arg["text-font"]) {
+						font = context.parse(arg["text-font"], 1, array(StringType));
+						if (!font) return null;
+					}
+					let textColor = null;
+					if (arg["text-color"]) {
+						textColor = context.parse(arg["text-color"], 1, ColorType);
+						if (!textColor) return null;
+					}
+					let verticalAlign = null;
+					if (arg["vertical-align"]) {
+						if (typeof arg["vertical-align"] === "string" && !VERTICAL_ALIGN_OPTIONS.includes(arg["vertical-align"])) return context.error(`'vertical-align' must be one of: 'bottom', 'center', 'top' but found '${arg["vertical-align"]}' instead.`);
+						verticalAlign = context.parse(arg["vertical-align"], 1, StringType);
+						if (!verticalAlign) return null;
+					}
+					const lastExpression = sections[sections.length - 1];
+					lastExpression.scale = scale;
+					lastExpression.font = font;
+					lastExpression.textColor = textColor;
+					lastExpression.verticalAlign = verticalAlign;
+				} else {
+					const content = context.parse(args[i], 1, ValueType);
+					if (!content) return null;
+					const kind = content.type.kind;
+					if (kind !== "string" && kind !== "value" && kind !== "null" && kind !== "resolvedImage") return context.error("Formatted text type must be 'string', 'value', 'image' or 'null'.");
+					nextTokenMayBeObject = true;
+					sections.push({
+						content,
+						scale: null,
+						font: null,
+						textColor: null,
+						verticalAlign: null
+					});
+				}
+			}
+			return new FormatExpression(sections);
+		}
+		evaluate(ctx) {
+			const evaluateSection = (section) => {
+				const evaluatedContent = section.content.evaluate(ctx);
+				if (typeOf(evaluatedContent) === ResolvedImageType) return new FormattedSection("", evaluatedContent, null, null, null, section.verticalAlign ? section.verticalAlign.evaluate(ctx) : null);
+				return new FormattedSection(valueToString(evaluatedContent), null, section.scale ? section.scale.evaluate(ctx) : null, section.font ? section.font.evaluate(ctx).join(",") : null, section.textColor ? section.textColor.evaluate(ctx) : null, section.verticalAlign ? section.verticalAlign.evaluate(ctx) : null);
+			};
+			return new Formatted(this.sections.map(evaluateSection));
+		}
+		eachChild(fn) {
+			for (const section of this.sections) {
+				fn(section.content);
+				if (section.scale) fn(section.scale);
+				if (section.font) fn(section.font);
+				if (section.textColor) fn(section.textColor);
+				if (section.verticalAlign) fn(section.verticalAlign);
+			}
+		}
+		outputDefined() {
+			return false;
+		}
+	};
+
+	//#region src/util/classify_rings.ts
+	/**
+	* Classifies an array of rings into polygons with outer rings and holes
+	* @param rings - the rings to classify
+	* @param maxRings - the maximum number of rings to include in a polygon, use 0 to include all rings
+	* @returns an array of polygons with internal rings as holes
+	*/
+	function classifyRings$1(rings, maxRings) {
+		if (rings.length <= 1) return [rings];
+		const polygons = [];
+		let polygon;
+		let ccw;
+		for (const ring of rings) {
+			const area = calculateSignedArea(ring);
+			if (area === 0) continue;
+			ring.area = Math.abs(area);
+			if (ccw === void 0) ccw = area < 0;
+			if (ccw === area < 0) {
+				if (polygon) polygons.push(polygon);
+				polygon = [ring];
+			} else polygon.push(ring);
+		}
+		if (polygon) polygons.push(polygon);
+		return polygons;
+	}
+	/**
+	* Returns the signed area for the polygon ring.  Positive areas are exterior rings and
+	* have a clockwise winding.  Negative areas are interior rings and have a counter clockwise
+	* ordering.
+	*
+	* @param ring - Exterior or interior ring
+	* @returns Signed area
+	*/
+	function calculateSignedArea(ring) {
+		let sum = 0;
+		for (let i = 0, len = ring.length, j = len - 1, p1, p2; i < len; j = i++) {
+			p1 = ring[i];
+			p2 = ring[j];
+			sum += (p2.x - p1.x) * (p1.y + p2.y);
+		}
+		return sum;
+	}
+
+	//#region src/expression/definitions/assertion.ts
+	const types$1 = {
+		string: StringType,
+		number: NumberType,
+		boolean: BooleanType,
+		object: ObjectType
+	};
+	var Assertion = class Assertion {
+		constructor(type, args, key) {
+			this.type = type;
+			this.args = args;
+			this.key = key;
+		}
+		static parse(args, context) {
+			if (args.length < 2) return context.error("Expected at least one argument.");
+			let i = 1;
+			let type;
+			const name = args[0];
+			if (name === "array") {
+				let itemType;
+				if (args.length > 2) {
+					const type = args[1];
+					if (typeof type !== "string" || !(type in types$1) || type === "object") return context.error("The item type argument of \"array\" must be one of string, number, boolean", 1);
+					itemType = types$1[type];
+					i++;
+				} else itemType = ValueType;
+				let N;
+				if (args.length > 3) {
+					if (args[2] !== null && (typeof args[2] !== "number" || args[2] < 0 || args[2] !== Math.floor(args[2]))) return context.error("The length argument to \"array\" must be a positive integer literal", 2);
+					N = args[2];
+					i++;
+				}
+				type = array(itemType, N);
+			} else {
+				if (!types$1[name]) throw new Error(`Types doesn't contain name = ${name}`);
+				type = types$1[name];
+			}
+			const parsed = [];
+			for (; i < args.length; i++) {
+				const input = context.parse(args[i], i, ValueType);
+				if (!input) return null;
+				parsed.push(input);
+			}
+			return new Assertion(type, parsed, context.key);
+		}
+		evaluate(ctx) {
+			for (let i = 0; i < this.args.length; i++) {
+				const value = this.args[i].evaluate(ctx);
+				if (!checkSubtype(this.type, typeOf(value))) return value;
+				else if (i === this.args.length - 1) throw new RuntimeError(`Expected value to be of type ${typeToString(this.type)}, but found ${typeToString(typeOf(value))} instead.`, this.key);
+			}
+			throw new Error();
+		}
+		eachChild(fn) {
+			this.args.forEach(fn);
+		}
+		outputDefined() {
+			return this.args.every((arg) => arg.outputDefined());
+		}
+	};
+
+	//#region src/expression/definitions/coercion.ts
+	const types = {
+		"to-boolean": BooleanType,
+		"to-color": ColorType,
+		"to-number": NumberType,
+		"to-string": StringType
+	};
+	/**
+	* Special form for error-coalescing coercion expressions "to-number",
+	* "to-color".  Since these coercions can fail at runtime, they accept multiple
+	* arguments, only evaluating one at a time until one succeeds.
+	*
+	* @private
+	*/
+	var Coercion = class Coercion {
+		constructor(type, args, key) {
+			this.type = type;
+			this.args = args;
 			this.key = key;
 		}
 		static parse(args, context) {
@@ -4708,171 +5131,7 @@
 			return this.args.every((arg) => arg.outputDefined());
 		}
 	};
-	//#endregion
-	//#region src/expression/evaluation_context.ts
-	const geometryTypes = [
-		"Unknown",
-		"Point",
-		"LineString",
-		"Polygon"
-	];
-	var EvaluationContext = class {
-		constructor() {
-			this.globals = null;
-			this.feature = null;
-			this.featureState = null;
-			this.formattedSection = null;
-			this._parseColorCache = /* @__PURE__ */ new Map();
-			this.availableImages = null;
-			this.canonical = null;
-		}
-		id() {
-			return this.feature && "id" in this.feature ? this.feature.id : null;
-		}
-		geometryType() {
-			return this.feature ? typeof this.feature.type === "number" ? geometryTypes[this.feature.type] : this.feature.type : null;
-		}
-		geometry() {
-			return this.feature && "geometry" in this.feature ? this.feature.geometry : null;
-		}
-		canonicalID() {
-			return this.canonical;
-		}
-		properties() {
-			return this.feature && this.feature.properties || {};
-		}
-		parseColor(input) {
-			let cached = this._parseColorCache.get(input);
-			if (!cached) {
-				cached = Color$1.parse(input);
-				this._parseColorCache.set(input, cached);
-			}
-			return cached;
-		}
-	};
-	//#endregion
-	//#region src/expression/parsing_context.ts
-	/**
-	* State associated parsing at a given point in an expression tree.
-	* @private
-	*/
-	var ParsingContext = class ParsingContext {
-		constructor(registry, isConstantFunc, path = [], expectedType, scope = new Scope(), errors = []) {
-			this.registry = registry;
-			this.path = path;
-			this.key = path.map((part) => `[${part}]`).join("");
-			this.scope = scope;
-			this.errors = errors;
-			this.expectedType = expectedType;
-			this._isConstant = isConstantFunc;
-		}
-		/**
-		* @param expr the JSON expression to parse
-		* @param index the optional argument index if this expression is an argument of a parent expression that's being parsed
-		* @param options
-		* @param options.omitTypeAnnotations set true to omit inferred type annotations.  Caller beware: with this option set, the parsed expression's type will NOT satisfy `expectedType` if it would normally be wrapped in an inferred annotation.
-		* @private
-		*/
-		parse(expr, index, expectedType, bindings, options = {}) {
-			if (index) return this.concat(index, expectedType, bindings)._parse(expr, options);
-			return this._parse(expr, options);
-		}
-		_parse(expr, options) {
-			if (expr === null || typeof expr === "string" || typeof expr === "boolean" || typeof expr === "number") expr = ["literal", expr];
-			const key = this.key;
-			function annotate(parsed, type, typeAnnotation) {
-				if (typeAnnotation === "assert") return new Assertion(type, [parsed], key);
-				else if (typeAnnotation === "coerce") return new Coercion(type, [parsed], key);
-				else return parsed;
-			}
-			if (Array.isArray(expr)) {
-				if (expr.length === 0) return this.error("Expected an array with at least one element. If you wanted a literal array, use [\"literal\", []].");
-				const op = expr[0];
-				if (typeof op !== "string") {
-					this.error(`Expression name must be a string, but found ${typeof op} instead. If you wanted a literal array, use ["literal", [...]].`, 0);
-					return null;
-				}
-				const Expr = this.registry[op];
-				if (Expr) {
-					let parsed = Expr.parse(expr, this);
-					if (!parsed) return null;
-					if (this.expectedType) {
-						const expected = this.expectedType;
-						const actual = parsed.type;
-						if ((expected.kind === "string" || expected.kind === "number" || expected.kind === "boolean" || expected.kind === "object" || expected.kind === "array") && actual.kind === "value") parsed = annotate(parsed, expected, options.typeAnnotation || "assert");
-						else if ("projectionDefinition" === expected.kind && [
-							"string",
-							"array",
-							"value"
-						].includes(actual.kind) || [
-							"color",
-							"formatted",
-							"resolvedImage"
-						].includes(expected.kind) && ["value", "string"].includes(actual.kind) || ["padding", "numberArray"].includes(expected.kind) && [
-							"value",
-							"number",
-							"array"
-						].includes(actual.kind) || "colorArray" === expected.kind && [
-							"value",
-							"string",
-							"array"
-						].includes(actual.kind) || "variableAnchorOffsetCollection" === expected.kind && ["value", "array"].includes(actual.kind)) parsed = annotate(parsed, expected, options.typeAnnotation || "coerce");
-						else if (this.checkSubtype(expected, actual)) return null;
-					}
-					if (!(parsed instanceof Literal) && parsed.type.kind !== "resolvedImage" && this._isConstant(parsed)) {
-						const ec = new EvaluationContext();
-						try {
-							parsed = new Literal(parsed.type, parsed.evaluate(ec));
-						} catch (e) {
-							this.error(e.message);
-							return null;
-						}
-					}
-					return parsed;
-				}
-				return this.error(`Unknown expression "${op}". If you wanted a literal array, use ["literal", [...]].`, 0);
-			} else if (typeof expr === "undefined") return this.error("'undefined' value invalid. Use null instead.");
-			else if (typeof expr === "object") return this.error("Bare objects invalid. Use [\"literal\", {...}] instead.");
-			else return this.error(`Expected an array, but found ${typeof expr} instead.`);
-		}
-		/**
-		* Returns a copy of this context suitable for parsing the subexpression at
-		* index `index`, optionally appending to 'let' binding map.
-		*
-		* Note that `errors` property, intended for collecting errors while
-		* parsing, is copied by reference rather than cloned.
-		* @private
-		*/
-		concat(index, expectedType, bindings) {
-			const path = typeof index === "number" ? this.path.concat(index) : this.path;
-			const scope = bindings ? this.scope.concat(bindings) : this.scope;
-			return new ParsingContext(this.registry, this._isConstant, path, expectedType || null, scope, this.errors);
-		}
-		/**
-		* Push a parsing (or type checking) error into the `this.errors`
-		* @param error The message
-		* @param keys Optionally specify the source of the error at a child
-		* of the current expression at `this.key`.
-		* @private
-		*/
-		error(error, ...keys) {
-			const key = `${this.key}${keys.map((k) => `[${k}]`).join("")}`;
-			this.errors.push(new ExpressionParsingError(key, error));
-		}
-		/**
-		* Returns null if `t` is a subtype of `expected`; otherwise returns an
-		* error message and also pushes it to `this.errors`.
-		* @param expected The expected type
-		* @param t The actual type
-		* @returns null if `t` is a subtype of `expected`; otherwise returns an error message
-		*/
-		checkSubtype(expected, t) {
-			const error = checkSubtype(expected, t);
-			if (error) this.error(error);
-			return error;
-		}
-	};
-	//#endregion
+
 	//#region src/expression/definitions/let.ts
 	var Let = class Let {
 		constructor(bindings, result) {
@@ -4906,7 +5165,7 @@
 			return this.result.outputDefined();
 		}
 	};
-	//#endregion
+
 	//#region src/expression/definitions/var.ts
 	var Var = class Var {
 		constructor(name, boundExpression) {
@@ -4928,7 +5187,7 @@
 			return false;
 		}
 	};
-	//#endregion
+
 	//#region src/expression/definitions/at.ts
 	var At = class At {
 		constructor(type, index, input, key) {
@@ -4961,7 +5220,7 @@
 			return false;
 		}
 	};
-	//#endregion
+
 	//#region src/expression/definitions/in.ts
 	var In = class In {
 		constructor(needle, haystack, key) {
@@ -5005,7 +5264,7 @@
 			return true;
 		}
 	};
-	//#endregion
+
 	//#region src/expression/definitions/index_of.ts
 	var IndexOf = class IndexOf {
 		constructor(needle, haystack, key, fromIndex) {
@@ -5060,7 +5319,7 @@
 			return false;
 		}
 	};
-	//#endregion
+
 	//#region src/expression/definitions/match.ts
 	var Match = class Match {
 		constructor(inputType, outputType, input, cases, outputs, otherwise) {
@@ -5119,366 +5378,93 @@
 			return this.outputs.every((out) => out.outputDefined()) && this.otherwise.outputDefined();
 		}
 	};
-	//#endregion
-	//#region src/expression/definitions/case.ts
-	var Case = class Case {
-		constructor(type, branches, otherwise) {
-			this.type = type;
-			this.branches = branches;
-			this.otherwise = otherwise;
-		}
-		static parse(args, context) {
-			if (args.length < 4) return context.error(`Expected at least 3 arguments, but found only ${args.length - 1}.`);
-			if (args.length % 2 !== 0) return context.error("Expected an odd number of arguments.");
-			let outputType;
-			if (context.expectedType && context.expectedType.kind !== "value") outputType = context.expectedType;
-			const branches = [];
-			for (let i = 1; i < args.length - 1; i += 2) {
-				const test = context.parse(args[i], i, BooleanType);
-				if (!test) return null;
-				const result = context.parse(args[i + 1], i + 1, outputType);
-				if (!result) return null;
-				branches.push([test, result]);
-				outputType = outputType || result.type;
-			}
-			const otherwise = context.parse(args[args.length - 1], args.length - 1, outputType);
-			if (!otherwise) return null;
-			if (!outputType) throw new Error("Can't infer output type");
-			return new Case(outputType, branches, otherwise);
-		}
-		evaluate(ctx) {
-			for (const [test, expression] of this.branches) if (test.evaluate(ctx)) return expression.evaluate(ctx);
-			return this.otherwise.evaluate(ctx);
-		}
-		eachChild(fn) {
-			for (const [test, expression] of this.branches) {
-				fn(test);
-				fn(expression);
-			}
-			fn(this.otherwise);
-		}
-		outputDefined() {
-			return this.branches.every(([_, out]) => out.outputDefined()) && this.otherwise.outputDefined();
-		}
-	};
-	//#endregion
-	//#region src/expression/definitions/slice.ts
-	var Slice = class Slice {
-		constructor(type, input, beginIndex, key, endIndex) {
-			this.type = type;
-			this.input = input;
-			this.beginIndex = beginIndex;
-			this.key = key;
-			this.endIndex = endIndex;
-		}
-		static parse(args, context) {
-			if (args.length <= 2 || args.length >= 5) return context.error(`Expected 2 or 3 arguments, but found ${args.length - 1} instead.`);
-			const input = context.parse(args[1], 1, ValueType);
-			const beginIndex = context.parse(args[2], 2, NumberType);
-			if (!input || !beginIndex) return null;
-			if (!isValidType(input.type, [
-				array(ValueType),
-				StringType,
-				ValueType
-			])) return context.error(`Expected first argument to be of type array or string, but found ${typeToString(input.type)} instead`);
-			if (args.length === 4) {
-				const endIndex = context.parse(args[3], 3, NumberType);
-				if (!endIndex) return null;
-				return new Slice(input.type, input, beginIndex, context.key, endIndex);
-			} else return new Slice(input.type, input, beginIndex, context.key);
-		}
-		evaluate(ctx) {
-			const input = this.input.evaluate(ctx);
-			const beginIndex = this.beginIndex.evaluate(ctx);
-			let endIndex;
-			if (this.endIndex) endIndex = this.endIndex.evaluate(ctx);
-			if (isValidNativeType(input, ["string"])) return [...input].slice(beginIndex, endIndex).join("");
-			else if (isValidNativeType(input, ["array"])) return input.slice(beginIndex, endIndex);
-			else throw new RuntimeError(`Expected first argument to be of type array or string, but found ${typeToString(typeOf(input))} instead.`, this.key);
-		}
-		eachChild(fn) {
-			fn(this.input);
-			fn(this.beginIndex);
-			if (this.endIndex) fn(this.endIndex);
-		}
-		outputDefined() {
-			return false;
-		}
-	};
-	//#endregion
-	//#region src/expression/stops.ts
-	/**
-	* Returns the index of the last stop <= input, or 0 if it doesn't exist.
-	* @private
-	*/
-	function findStopLessThanOrEqualTo(stops, input, key) {
-		const lastIndex = stops.length - 1;
-		let lowerIndex = 0;
-		let upperIndex = lastIndex;
-		let currentIndex = 0;
-		let currentValue, nextValue;
-		while (lowerIndex <= upperIndex) {
-			currentIndex = Math.floor((lowerIndex + upperIndex) / 2);
-			currentValue = stops[currentIndex];
-			nextValue = stops[currentIndex + 1];
-			if (currentValue <= input) {
-				if (currentIndex === lastIndex || input < nextValue) return currentIndex;
-				lowerIndex = currentIndex + 1;
-			} else if (currentValue > input) upperIndex = currentIndex - 1;
-			else throw new RuntimeError("Input is not a number.", key);
-		}
-		return 0;
-	}
-	//#endregion
-	//#region src/expression/definitions/step.ts
-	var Step = class Step {
-		constructor(type, input, stops, key) {
-			this.type = type;
-			this.input = input;
-			this.key = key;
-			this.labels = [];
-			this.outputs = [];
-			for (const [label, expression] of stops) {
-				this.labels.push(label);
-				this.outputs.push(expression);
-			}
-		}
-		static parse(args, context) {
-			if (args.length - 1 < 4) return context.error(`Expected at least 4 arguments, but found only ${args.length - 1}.`);
-			if ((args.length - 1) % 2 !== 0) return context.error("Expected an even number of arguments.");
-			const input = context.parse(args[1], 1, NumberType);
-			if (!input) return null;
-			const stops = [];
-			let outputType = null;
-			if (context.expectedType && context.expectedType.kind !== "value") outputType = context.expectedType;
-			for (let i = 1; i < args.length; i += 2) {
-				const label = i === 1 ? -Infinity : args[i];
-				const value = args[i + 1];
-				const labelKey = i;
-				const valueKey = i + 1;
-				if (typeof label !== "number") return context.error("Input/output pairs for \"step\" expressions must be defined using literal numeric values (not computed expressions) for the input values.", labelKey);
-				if (stops.length && stops[stops.length - 1][0] >= label) return context.error("Input/output pairs for \"step\" expressions must be arranged with input values in strictly ascending order.", labelKey);
-				const parsed = context.parse(value, valueKey, outputType);
-				if (!parsed) return null;
-				outputType = outputType || parsed.type;
-				stops.push([label, parsed]);
-			}
-			return new Step(outputType, input, stops, context.key);
-		}
-		evaluate(ctx) {
-			const labels = this.labels;
-			const outputs = this.outputs;
-			if (labels.length === 1) return outputs[0].evaluate(ctx);
-			const value = this.input.evaluate(ctx);
-			if (value <= labels[0]) return outputs[0].evaluate(ctx);
-			const stopCount = labels.length;
-			if (value >= labels[stopCount - 1]) return outputs[stopCount - 1].evaluate(ctx);
-			return outputs[findStopLessThanOrEqualTo(labels, value, this.key)].evaluate(ctx);
-		}
-		eachChild(fn) {
-			fn(this.input);
-			for (const expression of this.outputs) fn(expression);
-		}
-		outputDefined() {
-			return this.outputs.every((out) => out.outputDefined());
-		}
-	};
-	//#endregion
-	//#region node_modules/@mapbox/unitbezier/index.js
-	function unitBezier(p1x, p1y, p2x, p2y) {
-		const cx = 3 * p1x;
-		const bx = 3 * (p2x - p1x) - cx;
-		const ax = 1 - cx - bx;
-		const cy = 3 * p1y;
-		const by = 3 * (p2y - p1y) - cy;
-		const ay = 1 - cy - by;
-		return function solve(x, epsilon = 1e-6) {
-			if (x <= 0) return 0;
-			if (x >= 1) return 1;
-			let t = x;
-			for (let i = 0; i < 8; i++) {
-				const x2 = ((ax * t + bx) * t + cx) * t - x;
-				if (Math.abs(x2) < epsilon) return ((ay * t + by) * t + cy) * t;
-				const d2 = (3 * ax * t + 2 * bx) * t + cx;
-				if (Math.abs(d2) < 1e-6) break;
-				t -= x2 / d2;
-			}
-			let t0 = 0;
-			let t1 = 1;
-			t = x;
-			for (let i = 0; i < 20; i++) {
-				const x2 = ((ax * t + bx) * t + cx) * t;
-				if (Math.abs(x2 - x) < epsilon) break;
-				if (x > x2) t0 = t;
-				else t1 = t;
-				t = (t0 + t1) * .5;
-			}
-			return ((ay * t + by) * t + cy) * t;
-		};
-	}
-	//#endregion
-	//#region src/expression/definitions/interpolate.ts
-	var Interpolate = class Interpolate {
-		constructor(type, operator, interpolation, input, stops, key) {
-			this.type = type;
-			this.operator = operator;
-			this.interpolation = interpolation;
-			this.input = input;
-			this.key = key;
-			this.labels = [];
-			this.outputs = [];
-			for (const [label, expression] of stops) {
-				this.labels.push(label);
-				this.outputs.push(expression);
-			}
-		}
-		static interpolationFactor(interpolation, input, lower, upper) {
-			let t = 0;
-			if (interpolation.name === "exponential") t = exponentialInterpolation(input, interpolation.base, lower, upper);
-			else if (interpolation.name === "linear") t = exponentialInterpolation(input, 1, lower, upper);
-			else if (interpolation.name === "cubic-bezier") {
-				const c = interpolation.controlPoints;
-				t = unitBezier(c[0], c[1], c[2], c[3])(exponentialInterpolation(input, 1, lower, upper));
-			}
-			return t;
-		}
-		static parse(args, context) {
-			let [operator, interpolation, input, ...rest] = args;
-			if (!Array.isArray(interpolation) || interpolation.length === 0) return context.error("Expected an interpolation type expression.", 1);
-			if (interpolation[0] === "linear") interpolation = { name: "linear" };
-			else if (interpolation[0] === "exponential") {
-				const base = interpolation[1];
-				if (typeof base !== "number") return context.error("Exponential interpolation requires a numeric base.", 1, 1);
-				interpolation = {
-					name: "exponential",
-					base
-				};
-			} else if (interpolation[0] === "cubic-bezier") {
-				const controlPoints = interpolation.slice(1);
-				if (controlPoints.length !== 4 || controlPoints.some((t) => typeof t !== "number" || t < 0 || t > 1)) return context.error("Cubic bezier interpolation requires four numeric arguments with values between 0 and 1.", 1);
-				interpolation = {
-					name: "cubic-bezier",
-					controlPoints
-				};
-			} else return context.error(`Unknown interpolation type ${String(interpolation[0])}`, 1, 0);
-			if (args.length - 1 < 4) return context.error(`Expected at least 4 arguments, but found only ${args.length - 1}.`);
-			if ((args.length - 1) % 2 !== 0) return context.error("Expected an even number of arguments.");
-			input = context.parse(input, 2, NumberType);
-			if (!input) return null;
-			const stops = [];
-			let outputType = null;
-			if ((operator === "interpolate-hcl" || operator === "interpolate-lab") && context.expectedType != ColorArrayType) outputType = ColorType;
-			else if (context.expectedType && context.expectedType.kind !== "value") outputType = context.expectedType;
-			for (let i = 0; i < rest.length; i += 2) {
-				const label = rest[i];
-				const value = rest[i + 1];
-				const labelKey = i + 3;
-				const valueKey = i + 4;
-				if (typeof label !== "number") return context.error("Input/output pairs for \"interpolate\" expressions must be defined using literal numeric values (not computed expressions) for the input values.", labelKey);
-				if (stops.length && stops[stops.length - 1][0] >= label) return context.error("Input/output pairs for \"interpolate\" expressions must be arranged with input values in strictly ascending order.", labelKey);
-				const parsed = context.parse(value, valueKey, outputType);
-				if (!parsed) return null;
-				outputType = outputType || parsed.type;
-				stops.push([label, parsed]);
+
+	//#region src/expression/definitions/case.ts
+	var Case = class Case {
+		constructor(type, branches, otherwise) {
+			this.type = type;
+			this.branches = branches;
+			this.otherwise = otherwise;
+		}
+		static parse(args, context) {
+			if (args.length < 4) return context.error(`Expected at least 3 arguments, but found only ${args.length - 1}.`);
+			if (args.length % 2 !== 0) return context.error("Expected an odd number of arguments.");
+			let outputType;
+			if (context.expectedType && context.expectedType.kind !== "value") outputType = context.expectedType;
+			const branches = [];
+			for (let i = 1; i < args.length - 1; i += 2) {
+				const test = context.parse(args[i], i, BooleanType);
+				if (!test) return null;
+				const result = context.parse(args[i + 1], i + 1, outputType);
+				if (!result) return null;
+				branches.push([test, result]);
+				outputType = outputType || result.type;
 			}
-			if (!verifyType(outputType, NumberType) && !verifyType(outputType, ProjectionDefinitionType) && !verifyType(outputType, ColorType) && !verifyType(outputType, PaddingType) && !verifyType(outputType, NumberArrayType) && !verifyType(outputType, ColorArrayType) && !verifyType(outputType, VariableAnchorOffsetCollectionType) && !verifyType(outputType, array(NumberType))) return context.error(`Type ${typeToString(outputType)} is not interpolatable.`);
-			return new Interpolate(outputType, operator, interpolation, input, stops, context.key);
+			const otherwise = context.parse(args[args.length - 1], args.length - 1, outputType);
+			if (!otherwise) return null;
+			if (!outputType) throw new Error("Can't infer output type");
+			return new Case(outputType, branches, otherwise);
 		}
 		evaluate(ctx) {
-			const labels = this.labels;
-			const outputs = this.outputs;
-			if (labels.length === 1) return outputs[0].evaluate(ctx);
-			const value = this.input.evaluate(ctx);
-			if (value <= labels[0]) return outputs[0].evaluate(ctx);
-			const stopCount = labels.length;
-			if (value >= labels[stopCount - 1]) return outputs[stopCount - 1].evaluate(ctx);
-			const index = findStopLessThanOrEqualTo(labels, value, this.key);
-			const lower = labels[index];
-			const upper = labels[index + 1];
-			const t = Interpolate.interpolationFactor(this.interpolation, value, lower, upper);
-			const outputLower = outputs[index].evaluate(ctx);
-			const outputUpper = outputs[index + 1].evaluate(ctx);
-			switch (this.operator) {
-				case "interpolate": switch (this.type.kind) {
-					case "number": return interpolateNumber(outputLower, outputUpper, t);
-					case "color": return Color$1.interpolate(outputLower, outputUpper, t);
-					case "padding": return Padding.interpolate(outputLower, outputUpper, t);
-					case "colorArray": return ColorArray.interpolate(outputLower, outputUpper, t);
-					case "numberArray": return NumberArray.interpolate(outputLower, outputUpper, t);
-					case "variableAnchorOffsetCollection": return VariableAnchorOffsetCollection.interpolate(outputLower, outputUpper, t, this.key);
-					case "array": return interpolateArray(outputLower, outputUpper, t);
-					case "projectionDefinition": return ProjectionDefinition.interpolate(outputLower, outputUpper, t);
-				}
-				case "interpolate-hcl": switch (this.type.kind) {
-					case "color": return Color$1.interpolate(outputLower, outputUpper, t, "hcl");
-					case "colorArray": return ColorArray.interpolate(outputLower, outputUpper, t, "hcl");
-				}
-				case "interpolate-lab": switch (this.type.kind) {
-					case "color": return Color$1.interpolate(outputLower, outputUpper, t, "lab");
-					case "colorArray": return ColorArray.interpolate(outputLower, outputUpper, t, "lab");
-				}
+			for (const [test, expression] of this.branches) if (test.evaluate(ctx)) return expression.evaluate(ctx);
+			return this.otherwise.evaluate(ctx);
+		}
+		eachChild(fn) {
+			for (const [test, expression] of this.branches) {
+				fn(test);
+				fn(expression);
 			}
+			fn(this.otherwise);
+		}
+		outputDefined() {
+			return this.branches.every(([_, out]) => out.outputDefined()) && this.otherwise.outputDefined();
+		}
+	};
+
+	//#region src/expression/definitions/slice.ts
+	var Slice = class Slice {
+		constructor(type, input, beginIndex, key, endIndex) {
+			this.type = type;
+			this.input = input;
+			this.beginIndex = beginIndex;
+			this.key = key;
+			this.endIndex = endIndex;
+		}
+		static parse(args, context) {
+			if (args.length <= 2 || args.length >= 5) return context.error(`Expected 2 or 3 arguments, but found ${args.length - 1} instead.`);
+			const input = context.parse(args[1], 1, ValueType);
+			const beginIndex = context.parse(args[2], 2, NumberType);
+			if (!input || !beginIndex) return null;
+			if (!isValidType(input.type, [
+				array(ValueType),
+				StringType,
+				ValueType
+			])) return context.error(`Expected first argument to be of type array or string, but found ${typeToString(input.type)} instead`);
+			if (args.length === 4) {
+				const endIndex = context.parse(args[3], 3, NumberType);
+				if (!endIndex) return null;
+				return new Slice(input.type, input, beginIndex, context.key, endIndex);
+			} else return new Slice(input.type, input, beginIndex, context.key);
+		}
+		evaluate(ctx) {
+			const input = this.input.evaluate(ctx);
+			const beginIndex = this.beginIndex.evaluate(ctx);
+			let endIndex;
+			if (this.endIndex) endIndex = this.endIndex.evaluate(ctx);
+			if (isValidNativeType(input, ["string"])) return [...input].slice(beginIndex, endIndex).join("");
+			else if (isValidNativeType(input, ["array"])) return input.slice(beginIndex, endIndex);
+			else throw new RuntimeError(`Expected first argument to be of type array or string, but found ${typeToString(typeOf(input))} instead.`, this.key);
 		}
 		eachChild(fn) {
 			fn(this.input);
-			for (const expression of this.outputs) fn(expression);
+			fn(this.beginIndex);
+			if (this.endIndex) fn(this.endIndex);
 		}
 		outputDefined() {
-			return this.outputs.every((out) => out.outputDefined());
+			return false;
 		}
 	};
-	/**
-	* Returns a ratio that can be used to interpolate between exponential function
-	* stops.
-	* How it works: Two consecutive stop values define a (scaled and shifted) exponential function `f(x) = a * base^x + b`, where `base` is the user-specified base,
-	* and `a` and `b` are constants affording sufficient degrees of freedom to fit
-	* the function to the given stops.
-	*
-	* Here's a bit of algebra that lets us compute `f(x)` directly from the stop
-	* values without explicitly solving for `a` and `b`:
-	*
-	* First stop value: `f(x0) = y0 = a * base^x0 + b`
-	* Second stop value: `f(x1) = y1 = a * base^x1 + b`
-	* => `y1 - y0 = a(base^x1 - base^x0)`
-	* => `a = (y1 - y0)/(base^x1 - base^x0)`
-	*
-	* Desired value: `f(x) = y = a * base^x + b`
-	* => `f(x) = y0 + a * (base^x - base^x0)`
-	*
-	* From the above, we can replace the `a` in `a * (base^x - base^x0)` and do a
-	* little algebra:
-	* ```
-	* a * (base^x - base^x0) = (y1 - y0)/(base^x1 - base^x0) * (base^x - base^x0)
-	*                     = (y1 - y0) * (base^x - base^x0) / (base^x1 - base^x0)
-	* ```
-	*
-	* If we let `(base^x - base^x0) / (base^x1 base^x0)`, then we have
-	* `f(x) = y0 + (y1 - y0) * ratio`.  In other words, `ratio` may be treated as
-	* an interpolation factor between the two stops' output values.
-	*
-	* (Note: a slightly different form for `ratio`,
-	* `(base^(x-x0) - 1) / (base^(x1-x0) - 1) `, is equivalent, but requires fewer
-	* expensive `Math.pow()` operations.)
-	*
-	* @private
-	*/
-	function exponentialInterpolation(input, base, lowerValue, upperValue) {
-		const difference = upperValue - lowerValue;
-		const progress = input - lowerValue;
-		if (difference === 0) return 0;
-		else if (base === 1) return progress / difference;
-		else return (Math.pow(base, progress) - 1) / (Math.pow(base, difference) - 1);
-	}
-	const interpolateFactory = {
-		color: Color$1.interpolate,
-		number: interpolateNumber,
-		padding: Padding.interpolate,
-		numberArray: NumberArray.interpolate,
-		colorArray: ColorArray.interpolate,
-		variableAnchorOffsetCollection: VariableAnchorOffsetCollection.interpolate,
-		array: interpolateArray
-	};
-	//#endregion
+
 	//#region src/expression/definitions/coalesce.ts
 	var Coalesce = class Coalesce {
 		constructor(type, args) {
@@ -5523,7 +5509,7 @@
 			return this.args.every((arg) => arg.outputDefined());
 		}
 	};
-	//#endregion
+
 	//#region src/expression/definitions/comparison.ts
 	function isComparableType(op, type) {
 		if (op === "==" || op === "!=") return type.kind === "boolean" || type.kind === "string" || type.kind === "number" || type.kind === "null" || type.kind === "value";
@@ -5646,7 +5632,7 @@
 	const GreaterThan = makeComparison(">", gt, gtCollate);
 	const LessThanOrEqual = makeComparison("<=", lteq, lteqCollate);
 	const GreaterThanOrEqual = makeComparison(">=", gteq, gteqCollate);
-	//#endregion
+
 	//#region src/expression/definitions/collator.ts
 	var CollatorExpression = class CollatorExpression {
 		constructor(caseSensitive, diacriticSensitive, locale) {
@@ -5682,7 +5668,7 @@
 			return false;
 		}
 	};
-	//#endregion
+
 	//#region src/expression/definitions/number_format.ts
 	var NumberFormat = class NumberFormat {
 		constructor(number, locale, currency, unit, minFractionDigits, maxFractionDigits) {
@@ -5733,104 +5719,23 @@
 				style: this.currency ? "currency" : this.unit ? "unit" : "decimal",
 				currency: this.currency ? this.currency.evaluate(ctx) : void 0,
 				unit: this.unit ? this.unit.evaluate(ctx) : void 0,
-				minimumFractionDigits: this.minFractionDigits ? this.minFractionDigits.evaluate(ctx) : void 0,
-				maximumFractionDigits: this.maxFractionDigits ? this.maxFractionDigits.evaluate(ctx) : void 0
-			}).format(this.number.evaluate(ctx));
-		}
-		eachChild(fn) {
-			fn(this.number);
-			if (this.locale) fn(this.locale);
-			if (this.currency) fn(this.currency);
-			if (this.unit) fn(this.unit);
-			if (this.minFractionDigits) fn(this.minFractionDigits);
-			if (this.maxFractionDigits) fn(this.maxFractionDigits);
-		}
-		outputDefined() {
-			return false;
-		}
-	};
-	//#endregion
-	//#region src/expression/definitions/format.ts
-	var FormatExpression = class FormatExpression {
-		constructor(sections) {
-			this.type = FormattedType;
-			this.sections = sections;
-		}
-		static parse(args, context) {
-			if (args.length < 2) return context.error("Expected at least one argument.");
-			const firstArg = args[1];
-			if (!Array.isArray(firstArg) && typeof firstArg === "object") return context.error("First argument must be an image or text section.");
-			const sections = [];
-			let nextTokenMayBeObject = false;
-			for (let i = 1; i <= args.length - 1; ++i) {
-				const arg = args[i];
-				if (nextTokenMayBeObject && typeof arg === "object" && !Array.isArray(arg)) {
-					nextTokenMayBeObject = false;
-					let scale = null;
-					if (arg["font-scale"]) {
-						scale = context.parse(arg["font-scale"], 1, NumberType);
-						if (!scale) return null;
-					}
-					let font = null;
-					if (arg["text-font"]) {
-						font = context.parse(arg["text-font"], 1, array(StringType));
-						if (!font) return null;
-					}
-					let textColor = null;
-					if (arg["text-color"]) {
-						textColor = context.parse(arg["text-color"], 1, ColorType);
-						if (!textColor) return null;
-					}
-					let verticalAlign = null;
-					if (arg["vertical-align"]) {
-						if (typeof arg["vertical-align"] === "string" && !VERTICAL_ALIGN_OPTIONS.includes(arg["vertical-align"])) return context.error(`'vertical-align' must be one of: 'bottom', 'center', 'top' but found '${arg["vertical-align"]}' instead.`);
-						verticalAlign = context.parse(arg["vertical-align"], 1, StringType);
-						if (!verticalAlign) return null;
-					}
-					const lastExpression = sections[sections.length - 1];
-					lastExpression.scale = scale;
-					lastExpression.font = font;
-					lastExpression.textColor = textColor;
-					lastExpression.verticalAlign = verticalAlign;
-				} else {
-					const content = context.parse(args[i], 1, ValueType);
-					if (!content) return null;
-					const kind = content.type.kind;
-					if (kind !== "string" && kind !== "value" && kind !== "null" && kind !== "resolvedImage") return context.error("Formatted text type must be 'string', 'value', 'image' or 'null'.");
-					nextTokenMayBeObject = true;
-					sections.push({
-						content,
-						scale: null,
-						font: null,
-						textColor: null,
-						verticalAlign: null
-					});
-				}
-			}
-			return new FormatExpression(sections);
-		}
-		evaluate(ctx) {
-			const evaluateSection = (section) => {
-				const evaluatedContent = section.content.evaluate(ctx);
-				if (typeOf(evaluatedContent) === ResolvedImageType) return new FormattedSection("", evaluatedContent, null, null, null, section.verticalAlign ? section.verticalAlign.evaluate(ctx) : null);
-				return new FormattedSection(valueToString(evaluatedContent), null, section.scale ? section.scale.evaluate(ctx) : null, section.font ? section.font.evaluate(ctx).join(",") : null, section.textColor ? section.textColor.evaluate(ctx) : null, section.verticalAlign ? section.verticalAlign.evaluate(ctx) : null);
-			};
-			return new Formatted(this.sections.map(evaluateSection));
-		}
-		eachChild(fn) {
-			for (const section of this.sections) {
-				fn(section.content);
-				if (section.scale) fn(section.scale);
-				if (section.font) fn(section.font);
-				if (section.textColor) fn(section.textColor);
-				if (section.verticalAlign) fn(section.verticalAlign);
-			}
+				minimumFractionDigits: this.minFractionDigits ? this.minFractionDigits.evaluate(ctx) : void 0,
+				maximumFractionDigits: this.maxFractionDigits ? this.maxFractionDigits.evaluate(ctx) : void 0
+			}).format(this.number.evaluate(ctx));
+		}
+		eachChild(fn) {
+			fn(this.number);
+			if (this.locale) fn(this.locale);
+			if (this.currency) fn(this.currency);
+			if (this.unit) fn(this.unit);
+			if (this.minFractionDigits) fn(this.minFractionDigits);
+			if (this.maxFractionDigits) fn(this.maxFractionDigits);
 		}
 		outputDefined() {
 			return false;
 		}
 	};
-	//#endregion
+
 	//#region src/expression/definitions/image.ts
 	var ImageExpression = class ImageExpression {
 		constructor(input) {
@@ -5856,7 +5761,7 @@
 			return false;
 		}
 	};
-	//#endregion
+
 	//#region src/expression/definitions/length.ts
 	var Length = class Length {
 		constructor(input, key) {
@@ -5884,7 +5789,7 @@
 			return false;
 		}
 	};
-	//#endregion
+
 	//#region src/util/geometry_util.ts
 	const EXTENT = 8192;
 	function getTileCoordinates(p, canonical) {
@@ -5980,7 +5885,7 @@
 		if (det1 > 0 && det2 < 0 || det1 < 0 && det2 > 0) return true;
 		return false;
 	}
-	//#endregion
+
 	//#region src/expression/definitions/within.ts
 	function getTilePolygon(coordinates, bbox, canonical) {
 		const polygon = [];
@@ -6142,7 +6047,7 @@
 			return true;
 		}
 	};
-	//#endregion
+
 	//#region node_modules/tinyqueue/index.js
 	var TinyQueue = class {
 		constructor(data = [], compare = (a, b) => a < b ? -1 : a > b ? 1 : 0) {
@@ -6195,54 +6100,10 @@
 			data[pos] = item;
 		}
 	};
-	//#endregion
-	//#region src/util/classify_rings.ts
-	/**
-	* Classifies an array of rings into polygons with outer rings and holes
-	* @param rings - the rings to classify
-	* @param maxRings - the maximum number of rings to include in a polygon, use 0 to include all rings
-	* @returns an array of polygons with internal rings as holes
-	*/
-	function classifyRings$1(rings, maxRings) {
-		if (rings.length <= 1) return [rings];
-		const polygons = [];
-		let polygon;
-		let ccw;
-		for (const ring of rings) {
-			const area = calculateSignedArea(ring);
-			if (area === 0) continue;
-			ring.area = Math.abs(area);
-			if (ccw === void 0) ccw = area < 0;
-			if (ccw === area < 0) {
-				if (polygon) polygons.push(polygon);
-				polygon = [ring];
-			} else polygon.push(ring);
-		}
-		if (polygon) polygons.push(polygon);
-		return polygons;
-	}
-	/**
-	* Returns the signed area for the polygon ring.  Positive areas are exterior rings and
-	* have a clockwise winding.  Negative areas are interior rings and have a counter clockwise
-	* ordering.
-	*
-	* @param ring - Exterior or interior ring
-	* @returns Signed area
-	*/
-	function calculateSignedArea(ring) {
-		let sum = 0;
-		for (let i = 0, len = ring.length, j = len - 1, p1, p2; i < len; j = i++) {
-			p1 = ring[i];
-			p2 = ring[j];
-			sum += (p2.x - p1.x) * (p1.y + p2.y);
-		}
-		return sum;
-	}
-	//#endregion
+
 	//#region src/util/cheap_ruler.ts
 	const RE = 6378.137;
-	const FE = 1 / 298.257223563;
-	const E2 = FE * (2 - FE);
+	const E2 = .0066943799901413165;
 	const RAD = Math.PI / 180;
 	var CheapRuler = class {
 		constructor(lat) {
@@ -6251,7 +6112,7 @@
 			const w2 = 1 / (1 - E2 * (1 - coslat * coslat));
 			const w = Math.sqrt(w2);
 			this.kx = m * w * coslat;
-			this.ky = m * w * w2 * (1 - E2);
+			this.ky = m * w * w2 * .9933056200098587;
 		}
 		/**
 		* Given two points of the form [longitude, latitude], returns the distance.
@@ -6322,7 +6183,7 @@
 			return deg;
 		}
 	};
-	//#endregion
+
 	//#region src/expression/definitions/distance.ts
 	const MinPointsSize = 100;
 	const MinLinePointsSize = 50;
@@ -6590,9 +6451,7 @@
 				case "LineString":
 					dist = Math.min(dist, pointSetToPointSetDistance(pointPosition, false, geometry.coordinates, true, ruler, dist));
 					break;
-				case "Polygon":
-					dist = Math.min(dist, pointsToPolygonDistance(pointPosition, false, geometry.coordinates, ruler, dist));
-					break;
+				case "Polygon": dist = Math.min(dist, pointsToPolygonDistance(pointPosition, false, geometry.coordinates, ruler, dist));
 			}
 			if (dist === 0) return dist;
 		}
@@ -6612,9 +6471,7 @@
 				case "LineString":
 					dist = Math.min(dist, pointSetToPointSetDistance(linePositions, true, geometry.coordinates, true, ruler, dist));
 					break;
-				case "Polygon":
-					dist = Math.min(dist, pointsToPolygonDistance(linePositions, true, geometry.coordinates, ruler, dist));
-					break;
+				case "Polygon": dist = Math.min(dist, pointsToPolygonDistance(linePositions, true, geometry.coordinates, ruler, dist));
 			}
 			if (dist === 0) return dist;
 		}
@@ -6638,9 +6495,7 @@
 				case "LineString":
 					dist = Math.min(dist, pointsToPolygonDistance(geometry.coordinates, true, polygon, ruler, dist));
 					break;
-				case "Polygon":
-					dist = Math.min(dist, polygonToPolygonDistance(polygon, geometry.coordinates, ruler, dist));
-					break;
+				case "Polygon": dist = Math.min(dist, polygonToPolygonDistance(polygon, geometry.coordinates, ruler, dist));
 			}
 			if (dist === 0) return dist;
 		}
@@ -6696,7 +6551,48 @@
 			return true;
 		}
 	};
-	//#endregion
+
+	//#region src/expression/definitions/semiliteral.ts
+	var Semiliteral = class Semiliteral {
+		constructor(arr) {
+			let elementType = null;
+			for (const expr of arr) if (!elementType) elementType = expr.type;
+			else if (elementType === expr.type) continue;
+			else {
+				elementType = ValueType;
+				break;
+			}
+			this.type = array(elementType ?? ValueType, arr.length);
+			this.arr = arr;
+		}
+		static parse(args, context) {
+			if (args.length !== 2) return context.error(`'semiliteral' expression requires exactly one argument, but found ${args.length - 1} instead.`);
+			if (!isValue(args[1])) return context.error(`invalid value of type "${typeof args[1]}"`);
+			const value = args[1];
+			const type = typeOf(value);
+			if (type.kind === "array") {
+				const arr = value;
+				const arrayContext = context.concat(1);
+				const parsed = [];
+				for (let i = 0; i < arr.length; i++) {
+					const item = arrayContext.parse(arr[i], i, ValueType);
+					if (!item) return null;
+					parsed.push(item);
+				}
+				return new Semiliteral(parsed);
+			} else return new Literal(type, value);
+		}
+		evaluate(ctx) {
+			return this.arr.map((arg) => arg.evaluate(ctx));
+		}
+		eachChild(fn) {
+			this.arr.forEach(fn);
+		}
+		outputDefined() {
+			return this.arr.every((arg) => arg.outputDefined());
+		}
+	};
+
 	//#region src/expression/definitions/global_state.ts
 	var GlobalState = class GlobalState {
 		constructor(key) {
@@ -6720,7 +6616,7 @@
 			return false;
 		}
 	};
-	//#endregion
+
 	//#region src/expression/definitions/index.ts
 	const expressions = {
 		"==": Equals,
@@ -6749,6 +6645,7 @@
 		number: Assertion,
 		"number-format": NumberFormat,
 		object: Assertion,
+		semiliteral: Semiliteral,
 		slice: Slice,
 		step: Step,
 		string: Assertion,
@@ -6761,7 +6658,163 @@
 		distance: Distance,
 		"global-state": GlobalState
 	};
-	//#endregion
+
+	//#region src/expression/parsing_error.ts
+	var ExpressionParsingError = class extends Error {
+		constructor(key, message) {
+			super(message);
+			this.message = message;
+			this.key = key;
+		}
+	};
+
+	//#region src/expression/scope.ts
+	/**
+	* Tracks `let` bindings during expression parsing.
+	* @private
+	*/
+	var Scope = class Scope {
+		constructor(parent, bindings = []) {
+			this.parent = parent;
+			this.bindings = {};
+			for (const [name, expression] of bindings) this.bindings[name] = expression;
+		}
+		concat(bindings) {
+			return new Scope(this, bindings);
+		}
+		get(name) {
+			if (this.bindings[name]) return this.bindings[name];
+			if (this.parent) return this.parent.get(name);
+			throw new Error(`${name} not found in scope.`);
+		}
+		has(name) {
+			if (this.bindings[name]) return true;
+			return this.parent ? this.parent.has(name) : false;
+		}
+	};
+
+	//#region src/expression/parsing_context.ts
+	/**
+	* State associated parsing at a given point in an expression tree.
+	* @private
+	*/
+	var ParsingContext = class ParsingContext {
+		constructor(registry, isConstantFunc, path = [], expectedType, scope = new Scope(), errors = []) {
+			this.registry = registry;
+			this.path = path;
+			this.key = path.map((part) => `[${part}]`).join("");
+			this.scope = scope;
+			this.errors = errors;
+			this.expectedType = expectedType;
+			this._isConstant = isConstantFunc;
+		}
+		/**
+		* @param expr the JSON expression to parse
+		* @param index the optional argument index if this expression is an argument of a parent expression that's being parsed
+		* @param options
+		* @param options.omitTypeAnnotations set true to omit inferred type annotations.  Caller beware: with this option set, the parsed expression's type will NOT satisfy `expectedType` if it would normally be wrapped in an inferred annotation.
+		* @private
+		*/
+		parse(expr, index, expectedType, bindings, options = {}) {
+			if (index != null) return this.concat(index, expectedType, bindings)._parse(expr, options);
+			return this._parse(expr, options);
+		}
+		_parse(expr, options) {
+			if (expr === null || typeof expr === "string" || typeof expr === "boolean" || typeof expr === "number") expr = ["literal", expr];
+			const key = this.key;
+			function annotate(parsed, type, typeAnnotation) {
+				if (typeAnnotation === "assert") return new Assertion(type, [parsed], key);
+				else if (typeAnnotation === "coerce") return new Coercion(type, [parsed], key);
+				else return parsed;
+			}
+			if (Array.isArray(expr)) {
+				if (expr.length === 0) return this.error("Expected an array with at least one element. If you wanted a literal array, use [\"literal\", []].");
+				const op = expr[0];
+				if (typeof op !== "string") {
+					this.error(`Expression name must be a string, but found ${typeof op} instead. If you wanted a literal array, use ["literal", [...]].`, 0);
+					return null;
+				}
+				const Expr = this.registry[op];
+				if (Expr) {
+					let parsed = Expr.parse(expr, this);
+					if (!parsed) return null;
+					if (this.expectedType) {
+						const expected = this.expectedType;
+						const actual = parsed.type;
+						if ((expected.kind === "string" || expected.kind === "number" || expected.kind === "boolean" || expected.kind === "object" || expected.kind === "array") && actual.kind === "value") parsed = annotate(parsed, expected, options.typeAnnotation || "assert");
+						else if ("projectionDefinition" === expected.kind && [
+							"string",
+							"array",
+							"value"
+						].includes(actual.kind) || [
+							"color",
+							"formatted",
+							"resolvedImage"
+						].includes(expected.kind) && ["value", "string"].includes(actual.kind) || ["padding", "numberArray"].includes(expected.kind) && [
+							"value",
+							"number",
+							"array"
+						].includes(actual.kind) || "colorArray" === expected.kind && [
+							"value",
+							"string",
+							"array"
+						].includes(actual.kind) || "variableAnchorOffsetCollection" === expected.kind && ["value", "array"].includes(actual.kind)) parsed = annotate(parsed, expected, options.typeAnnotation || "coerce");
+						else if (this.checkSubtype(expected, actual)) return null;
+					}
+					if (!(parsed instanceof Literal) && parsed.type.kind !== "resolvedImage" && this._isConstant(parsed)) {
+						const ec = new EvaluationContext();
+						try {
+							parsed = new Literal(parsed.type, parsed.evaluate(ec));
+						} catch (e) {
+							this.error(e.message);
+							return null;
+						}
+					}
+					return parsed;
+				}
+				return this.error(`Unknown expression "${op}". If you wanted a literal array, use ["literal", [...]].`, 0);
+			} else if (typeof expr === "undefined") return this.error("'undefined' value invalid. Use null instead.");
+			else if (typeof expr === "object") return this.error("Bare objects invalid. Use [\"literal\", {...}] instead.");
+			else return this.error(`Expected an array, but found ${typeof expr} instead.`);
+		}
+		/**
+		* Returns a copy of this context suitable for parsing the subexpression at
+		* index `index`, optionally appending to 'let' binding map.
+		*
+		* Note that `errors` property, intended for collecting errors while
+		* parsing, is copied by reference rather than cloned.
+		* @private
+		*/
+		concat(index, expectedType, bindings) {
+			const path = typeof index === "number" ? this.path.concat(index) : this.path;
+			const scope = bindings ? this.scope.concat(bindings) : this.scope;
+			return new ParsingContext(this.registry, this._isConstant, path, expectedType || null, scope, this.errors);
+		}
+		/**
+		* Push a parsing (or type checking) error into the `this.errors`
+		* @param error The message
+		* @param keys Optionally specify the source of the error at a child
+		* of the current expression at `this.key`.
+		* @private
+		*/
+		error(error, ...keys) {
+			const key = `${this.key}${keys.map((k) => `[${k}]`).join("")}`;
+			this.errors.push(new ExpressionParsingError(key, error));
+		}
+		/**
+		* Returns null if `t` is a subtype of `expected`; otherwise returns an
+		* error message and also pushes it to `this.errors`.
+		* @param expected The expected type
+		* @param t The actual type
+		* @returns null if `t` is a subtype of `expected`; otherwise returns an error message
+		*/
+		checkSubtype(expected, t) {
+			const error = checkSubtype(expected, t);
+			if (error) this.error(error);
+			return error;
+		}
+	};
+
 	//#region src/expression/compound_expression.ts
 	var CompoundExpression = class CompoundExpression {
 		constructor(name, type, evaluate, args, key) {
@@ -7329,28 +7382,14 @@
 		return result;
 	}
 	function isGlobalPropertyConstant(e, properties) {
-		if (e instanceof CompoundExpression && properties.indexOf(e.name) >= 0) return false;
-		let result = true;
-		e.eachChild((arg) => {
-			if (result && !isGlobalPropertyConstant(arg, properties)) result = false;
-		});
-		return result;
-	}
-	//#endregion
-	//#region src/util/result.ts
-	function success(value) {
-		return {
-			result: "success",
-			value
-		};
-	}
-	function error(value) {
-		return {
-			result: "error",
-			value
-		};
+		if (e instanceof CompoundExpression && properties.indexOf(e.name) >= 0) return false;
+		let result = true;
+		e.eachChild((arg) => {
+			if (result && !isGlobalPropertyConstant(arg, properties)) result = false;
+		});
+		return result;
 	}
-	//#endregion
+
 	//#region src/util/properties.ts
 	function supportsPropertyExpression(spec) {
 		return spec["property-type"] === "data-driven" || spec["property-type"] === "cross-faded-data-driven";
@@ -7361,13 +7400,13 @@
 	function supportsInterpolation(spec) {
 		return !!spec.expression && spec.expression.interpolated;
 	}
-	//#endregion
+
 	//#region src/util/extend.ts
 	function extendBy(output, ...inputs) {
 		for (const input of inputs) for (const k in input) output[k] = input[k];
 		return output;
 	}
-	//#endregion
+
 	//#region src/util/get_type.ts
 	function getType(val) {
 		if (val instanceof Number) return "number";
@@ -7377,7 +7416,7 @@
 		else if (val === null) return "null";
 		else return typeof val;
 	}
-	//#endregion
+
 	//#region src/function/index.ts
 	function isFunction(value) {
 		return typeof value === "object" && value !== null && !Array.isArray(value) && typeOf(value) === ObjectType;
@@ -7475,21 +7514,21 @@
 			kind: "source",
 			evaluate(_, feature) {
 				const value = feature && feature.properties ? feature.properties[parameters.property] : void 0;
-				if (value === void 0) return coalesce$1(parameters.default, propertySpec.default);
+				if (value === void 0) return coalesce(parameters.default, propertySpec.default);
 				return innerFun(parameters, propertySpec, value, hashedStops, categoricalKeyType);
 			}
 		};
 	}
-	function coalesce$1(a, b, c) {
+	function coalesce(a, b, c) {
 		if (a !== void 0) return a;
 		if (b !== void 0) return b;
 		if (c !== void 0) return c;
 	}
 	function evaluateCategoricalFunction(parameters, propertySpec, input, hashedStops, keyType) {
-		return coalesce$1(typeof input === keyType ? hashedStops[input] : void 0, parameters.default, propertySpec.default);
+		return coalesce(typeof input === keyType ? hashedStops[input] : void 0, parameters.default, propertySpec.default);
 	}
 	function evaluateIntervalFunction(parameters, propertySpec, input) {
-		if (getType(input) !== "number") return coalesce$1(parameters.default, propertySpec.default);
+		if (getType(input) !== "number") return coalesce(parameters.default, propertySpec.default);
 		const n = parameters.stops.length;
 		if (n === 1) return parameters.stops[0][1];
 		if (input <= parameters.stops[0][0]) return parameters.stops[0][1];
@@ -7499,13 +7538,13 @@
 	}
 	function evaluateExponentialFunction(parameters, propertySpec, input) {
 		const base = parameters.base !== void 0 ? parameters.base : 1;
-		if (getType(input) !== "number") return coalesce$1(parameters.default, propertySpec.default);
+		if (getType(input) !== "number") return coalesce(parameters.default, propertySpec.default);
 		const n = parameters.stops.length;
 		if (n === 1) return parameters.stops[0][1];
 		if (input <= parameters.stops[0][0]) return parameters.stops[0][1];
 		if (input >= parameters.stops[n - 1][0]) return parameters.stops[n - 1][1];
 		const index = findStopLessThanOrEqualTo(parameters.stops.map((stop) => stop[0]), input, "");
-		const t = interpolationFactor(input, base, parameters.stops[index][0], parameters.stops[index + 1][0]);
+		const t = interpolationFactor$1(input, base, parameters.stops[index][0], parameters.stops[index + 1][0]);
 		const outputLower = parameters.stops[index][1];
 		const outputUpper = parameters.stops[index + 1][1];
 		const interp = interpolateFactory[propertySpec.type] || identityFunction;
@@ -7539,7 +7578,7 @@
 				break;
 			default: if (getType(input) !== propertySpec.type && (propertySpec.type !== "enum" || !propertySpec.values[input])) input = void 0;
 		}
-		return coalesce$1(input, parameters.default, propertySpec.default);
+		return coalesce(input, parameters.default, propertySpec.default);
 	}
 	/**
 	* Returns a ratio that can be used to interpolate between exponential function
@@ -7579,14 +7618,28 @@
 	*
 	* @private
 	*/
-	function interpolationFactor(input, base, lowerValue, upperValue) {
+	function interpolationFactor$1(input, base, lowerValue, upperValue) {
 		const difference = upperValue - lowerValue;
 		const progress = input - lowerValue;
 		if (difference === 0) return 0;
 		else if (base === 1) return progress / difference;
 		else return (Math.pow(base, progress) - 1) / (Math.pow(base, difference) - 1);
 	}
-	//#endregion
+
+	//#region src/util/result.ts
+	function success(value) {
+		return {
+			result: "success",
+			value
+		};
+	}
+	function error(value) {
+		return {
+			result: "error",
+			value
+		};
+	}
+
 	//#region src/expression/index.ts
 	var StyleExpression = class {
 		constructor(expression, rootKey, propertySpec, globalState) {
@@ -7868,7 +7921,7 @@
 			globalState
 		};
 	}
-	//#endregion
+
 	//#region src/feature_filter/index.ts
 	function classifyChildren(children) {
 		let sawLegacy = false;
@@ -7974,12 +8027,10 @@
 				if (diagnostic) return diagnostic;
 				break;
 			}
-			case "case":
-				for (let i = 1; i < filter.length - 1; i += 2) {
-					const diagnostic = checkChild(i, path, filter);
-					if (diagnostic) return diagnostic;
-				}
-				break;
+			case "case": for (let i = 1; i < filter.length - 1; i += 2) {
+				const diagnostic = checkChild(i, path, filter);
+				if (diagnostic) return diagnostic;
+			}
 		}
 		return null;
 	}
@@ -8017,7 +8068,7 @@
 			needGeometry: false,
 			getGlobalStateRefs: () => /* @__PURE__ */ new Set()
 		};
-		if (!isExpressionFilter(filter)) filter = convertFilter$1(filter);
+		if (!isExpressionFilter(filter)) filter = convertFilter(filter);
 		else warnAboutMixedLegacyFilter(filter, rootKey);
 		const compiled = createExpression(filter, rootKey, filterSpec, globalState);
 		if (compiled.result === "error") throw new Error(compiled.value.map((err) => `${err.key}: ${err.message}`).join(", "));
@@ -8036,13 +8087,13 @@
 		for (let index = 1; index < filter.length; index++) if (geometryNeeded(filter[index])) return true;
 		return false;
 	}
-	function convertFilter$1(filter) {
+	function convertFilter(filter) {
 		if (!filter) return true;
 		const op = filter[0];
 		if (filter.length <= 1) return op !== "any";
-		return op === "==" ? convertComparisonOp$1(filter[1], filter[2], "==") : op === "!=" ? convertNegation(convertComparisonOp$1(filter[1], filter[2], "==")) : op === "<" || op === ">" || op === "<=" || op === ">=" ? convertComparisonOp$1(filter[1], filter[2], op) : op === "any" ? convertDisjunctionOp(filter.slice(1)) : op === "all" ? ["all"].concat(filter.slice(1).map(convertFilter$1)) : op === "none" ? ["all"].concat(filter.slice(1).map(convertFilter$1).map(convertNegation)) : op === "in" ? convertInOp$1(filter[1], filter.slice(2)) : op === "!in" ? convertNegation(convertInOp$1(filter[1], filter.slice(2))) : op === "has" ? convertHasOp$1(filter[1]) : op === "!has" ? convertNegation(convertHasOp$1(filter[1])) : true;
+		return op === "==" ? convertComparisonOp(filter[1], filter[2], "==") : op === "!=" ? convertNegation(convertComparisonOp(filter[1], filter[2], "==")) : op === "<" || op === ">" || op === "<=" || op === ">=" ? convertComparisonOp(filter[1], filter[2], op) : op === "any" ? convertDisjunctionOp(filter.slice(1)) : op === "all" ? ["all"].concat(filter.slice(1).map(convertFilter)) : op === "none" ? ["all"].concat(filter.slice(1).map(convertFilter).map(convertNegation)) : op === "in" ? convertInOp(filter[1], filter.slice(2)) : op === "!in" ? convertNegation(convertInOp(filter[1], filter.slice(2))) : op === "has" ? convertHasOp(filter[1]) : op === "!has" ? convertNegation(convertHasOp(filter[1])) : true;
 	}
-	function convertComparisonOp$1(property, value, op) {
+	function convertComparisonOp(property, value, op) {
 		switch (property) {
 			case "$type": return [`filter-type-${op}`, value];
 			case "$id": return [`filter-id-${op}`, value];
@@ -8054,9 +8105,9 @@
 		}
 	}
 	function convertDisjunctionOp(filters) {
-		return ["any"].concat(filters.map(convertFilter$1));
+		return ["any"].concat(filters.map(convertFilter));
 	}
-	function convertInOp$1(property, values) {
+	function convertInOp(property, values) {
 		if (values.length === 0) return false;
 		switch (property) {
 			case "$type": return ["filter-type-in", ["literal", values]];
@@ -8073,7 +8124,7 @@
 			];
 		}
 	}
-	function convertHasOp$1(property) {
+	function convertHasOp(property) {
 		switch (property) {
 			case "$type": return true;
 			case "$id": return ["filter-has-id"];
@@ -8389,21 +8440,29 @@
 	    width;
 	    height;
 	    #svg;
-	    #backgroundColor;
 	    #spriteSheetDefs = new Map();
 	    #spriteSymbolDefs = new Map();
 	    #sdfFilterDefs = new Map();
 	    #blurFilterDefs = new Map();
+	    #rasterDefs = [];
+	    #rasterClipCount = 0;
+	    #clipCircle;
 	    constructor(opt) {
 	        this.width = opt.width;
 	        this.height = opt.height;
 	        this.#svg = [];
-	        this.#backgroundColor = Color.transparent;
+	    }
+	    setClipCircle(circle) {
+	        this.#clipCircle = circle;
 	    }
 	    drawBackgroundFill(style) {
+	        // Every background layer paints over what is below it, like any other layer. (A
+	        // transparent one, e.g. an empty "slot" layer, must not erase an earlier background.)
 	        const color = new Color(style.color);
 	        color.alpha *= style.opacity;
-	        this.#backgroundColor = color;
+	        if (color.alpha <= 0)
+	            return;
+	        this.#svg.push(`<rect x="-1" y="-1" width="${(this.width + 2).toFixed(0)}" height="${(this.height + 2).toFixed(0)}" ${fillAttr(color)} />`);
 	    }
 	    drawPolygons(id, features) {
 	        if (features.length === 0)
@@ -8411,9 +8470,11 @@
 	        // Merge only *consecutive* features with identical attributes, so the paint
 	        // order of overlapping features matches MapLibre's source order. A global
 	        // merge would reorder interleaved features (e.g. data-driven fill colors).
-	        // Fills and their antialias outlines are collected in one pass but emitted
-	        // as two: MapLibre draws every fill first, then every outline, so a lower
-	        // feature's outline composites on top of a later overlapping fill.
+	        // Translucent features are never merged: MapLibre blends each one separately,
+	        // so where they overlap, their opacity adds up — within one merged <path> it
+	        // would not. Fills and their antialias outlines are collected in one pass but
+	        // emitted as two: MapLibre draws every fill first, then every outline, so a
+	        // lower feature's outline composites on top of a later overlapping fill.
 	        const fillGroups = [];
 	        const outlineGroups = [];
 	        let currentFillKey;
@@ -8428,37 +8489,48 @@
 	            // Round each ring once; shared by the fill and the outline pass.
 	            const rings = feature.geometry.map((ring) => ring.map((p) => roundXY(p.x, p.y)));
 	            const color = new Color(style.color);
+	            const translucent = style.opacity < 1 || color.alpha < 255;
 	            if (color.alpha > 0) {
 	                const key = color.hex + translate + opacityAttr;
-	                if (key !== currentFillKey) {
+	                if (translucent || key !== currentFillKey) {
 	                    fillGroups.push({ segments: [], attrs: `${fillAttr(color)}${translate}${opacityAttr}` });
-	                    currentFillKey = key;
+	                    currentFillKey = translucent ? undefined : key;
 	                }
 	                const group = fillGroups[fillGroups.length - 1];
 	                for (const ring of rings)
 	                    group.segments.push(ring);
 	            }
-	            // fill-antialias outline in an explicit fill-outline-color. MapLibre also
-	            // draws a *default* outline in the fill color, but that outline IS its fill-
-	            // edge antialiasing (draw_fill.ts clips it to just outside the shape) — and
-	            // an SVG <path fill> is already rasterizer-antialiased, so redrawing it is
-	            // redundant: measured identical pixel diff for +46–88% SVG size. We only
-	            // draw the outline when a distinct color is set — the visible-border case
-	            // (choropleths), which the browser's fill AA does not cover.
-	            if (style.antialias && style.outlineColor !== undefined) {
-	                const outlineColor = new Color(style.outlineColor);
+	            // fill-antialias outline, in fill-outline-color or else the fill color. For an
+	            // opaque fill, MapLibre's default outline IS its fill-edge antialiasing
+	            // (draw_fill.ts keeps it outside of the shape), and an SVG <path fill> is already
+	            // rasterizer-antialiased, so redrawing it is redundant: measured identical pixel
+	            // diff for +46–88% SVG size. It is drawn when it shows: in a distinct
+	            // fill-outline-color (choropleths), or for a translucent fill, where MapLibre
+	            // draws the outline over the fill's edge (e.g. buildings fading in).
+	            if (style.antialias && (style.outlineColor !== undefined || translucent)) {
+	                const outlineColor = style.outlineColor !== undefined ? new Color(style.outlineColor) : color;
 	                if (outlineColor.alpha > 0) {
+	                    const outlineTranslucent = translucent || outlineColor.alpha < 255;
 	                    const key = outlineColor.hex + translate + opacityAttr;
-	                    if (key !== currentOutlineKey) {
+	                    if (outlineTranslucent || key !== currentOutlineKey) {
 	                        outlineGroups.push({
-	                            segments: [],
+	                            closed: [],
+	                            open: [],
 	                            attrs: `fill="none" ${strokeAttr(outlineColor, formatScaled(FILL_OUTLINE_WIDTH_PX))}${translate}${opacityAttr}`,
 	                        });
-	                        currentOutlineKey = key;
+	                        currentOutlineKey = outlineTranslucent ? undefined : key;
 	                    }
 	                    const group = outlineGroups[outlineGroups.length - 1];
-	                    for (const ring of rings)
-	                        group.segments.push(ring);
+	                    // A polygon clipped to its tile has an outline without the clipped edges.
+	                    if (feature.outline) {
+	                        for (const line of feature.outline) {
+	                            group.open.push(line.map((p) => roundXY(p.x, p.y)));
+	                        }
+	                    }
+	                    else {
+	                        for (const ring of rings)
+	                            group.closed.push(ring);
+	                    }
 	                }
 	            }
 	        });
@@ -8466,8 +8538,9 @@
 	        for (const { segments, attrs } of fillGroups) {
 	            this.#svg.push(`<path d="${segmentsToPath(segments, true)}" ${attrs} />`);
 	        }
-	        for (const { segments, attrs } of outlineGroups) {
-	            this.#svg.push(`<path d="${segmentsToPath(segments, true)}" ${attrs} />`);
+	        for (const { closed, open, attrs } of outlineGroups) {
+	            const d = segmentsToPath(closed, true) + segmentsToPath(open, false);
+	            this.#svg.push(`<path d="${d}" ${attrs} />`);
 	        }
 	        this.#svg.push('</g>');
 	    }
@@ -8475,7 +8548,12 @@
 	        if (features.length === 0)
 	            return;
 	        // Merge only *consecutive* same-attribute features (see drawPolygons) so the
-	        // paint order of overlapping lines matches MapLibre's source order.
+	        // paint order of overlapping lines matches MapLibre's source order. Translucent
+	        // lines are never merged: MapLibre blends every line separately, so where lines
+	        // overlap (e.g. parallel rail tracks fading in), their opacity adds up — even
+	        // between the parts of one feature (tiles merge equal ways into one multi-line
+	        // feature). One <path> covers its overlaps only once, so a translucent line gets
+	        // a <path> per part.
 	        const groups = [];
 	        let currentKey;
 	        features.forEach(([feature, style]) => {
@@ -8510,7 +8588,8 @@
 	                translate,
 	                filterAttr,
 	            ].join('\0');
-	            if (key !== currentKey) {
+	            const translucent = effectiveOpacity < 1 || color.alpha < 255;
+	            if (translucent || key !== currentKey) {
 	                const attrs = [
 	                    'fill="none"',
 	                    strokeAttr(color, roundedWidth),
@@ -8523,8 +8602,9 @@
 	                groups.push({
 	                    segments: [],
 	                    attrs: attrs.join(' ') + translate + opacityAttr + filterAttr,
+	                    separate: translucent,
 	                });
-	                currentKey = key;
+	                currentKey = translucent ? undefined : key;
 	            }
 	            const group = groups[groups.length - 1];
 	            feature.geometry.forEach((line) => {
@@ -8533,7 +8613,13 @@
 	            });
 	        });
 	        this.#svg.push(`<g id="${escapeXml(id)}">`);
-	        for (const { segments, attrs } of groups) {
+	        for (const { segments, attrs, separate } of groups) {
+	            if (separate) {
+	                for (const segment of segments) {
+	                    this.#svg.push(`<path d="${segmentsToPath([segment])}" ${attrs} />`);
+	                }
+	                continue;
+	            }
 	            const chains = chainSegments(segments);
 	            const d = segmentsToPath(chains);
 	            this.#svg.push(`<path d="${d}" ${attrs} />`);
@@ -8790,7 +8876,10 @@
 	            gAttrs += ` filter="${filters.join(' ')}"`;
 	        this.#svg.push(`<g ${gAttrs}>`);
 	        const pixelated = style.resampling === 'nearest';
+	        this.#drawRasterMeshes(tiles, pixelated);
 	        for (const tile of tiles) {
+	            if (tile.triangles)
+	                continue;
 	            const overlap = Math.min(tile.width, tile.height) / 10000; // slight overlap to prevent sub-pixel gaps between tiles
 	            let attrs = `x="${formatScaled(tile.x - overlap)}" y="${formatScaled(tile.y - overlap)}" width="${formatScaled(tile.width + overlap * 2)}" height="${formatScaled(tile.height + overlap * 2)}" xlink:href="${tile.dataUri}"`;
 	            if (pixelated)
@@ -8799,11 +8888,65 @@
 	        }
 	        this.#svg.push('</g>');
 	    }
+	    /**
+	     * Draws raster tiles given as meshes of triangles (globe projection). Every tile image is
+	     * defined once (as a square of RASTER_TILE_UNITS); every triangle shows it through the affine
+	     * transform that maps its three source corners exactly onto its three screen corners, clipped
+	     * to the triangle on screen.
+	     *
+	     * Seams: within a tile, each clip triangle is grown by RASTER_TRIANGLE_OVERLAP_PX; the same
+	     * transform continues there, so the overlap shows (almost) the same pixels as the neighbour.
+	     * At tile borders that is not enough, as both images end on the same line and their anti-
+	     * aliased edges let a hairline of the background shine through. So first, as an underlay,
+	     * the triangles along the tile borders are drawn with their image reaching beyond the border
+	     * (see {@link bleedAtTileBorder}); then all triangles are drawn exactly on top of it. The
+	     * slightly shifted underlay only shows through the seam.
+	     */
+	    #drawRasterMeshes(tiles, pixelated) {
+	        const meshes = [];
+	        for (const tile of tiles) {
+	            if (!tile.triangles)
+	                continue;
+	            const imageId = `raster-${String(this.#rasterDefs.length)}`;
+	            const size = String(RASTER_TILE_UNITS);
+	            let imageAttrs = `id="${imageId}" width="${size}" height="${size}" preserveAspectRatio="none" xlink:href="${tile.dataUri}"`;
+	            if (pixelated)
+	                imageAttrs += ' style="image-rendering:pixelated"';
+	            this.#rasterDefs.push(`<image ${imageAttrs} />`);
+	            meshes.push({ imageId, triangles: tile.triangles });
+	        }
+	        for (const { imageId, triangles } of meshes) {
+	            for (const { source, target } of triangles) {
+	                if (!isOnTileBorder(source))
+	                    continue;
+	                this.#drawRasterTriangle(imageId, bleedAtTileBorder(source, target), target);
+	            }
+	        }
+	        for (const { imageId, triangles } of meshes) {
+	            for (const { source, target } of triangles) {
+	                this.#drawRasterTriangle(imageId, source, target);
+	            }
+	        }
+	    }
+	    #drawRasterTriangle(imageId, source, target) {
+	        const matrix = affineFromTriangles(source, target);
+	        if (!matrix)
+	            return;
+	        const clip = growTriangle(target, RASTER_TRIANGLE_OVERLAP_PX);
+	        const clipId = `raster-clip-${String(this.#rasterClipCount++)}`;
+	        const d = segmentsToPath([clip.map(([x, y]) => roundXY(x, y))], true);
+	        this.#svg.push(`<clipPath id="${clipId}"><path d="${d}"/></clipPath>` +
+	            `<g clip-path="url(#${clipId})"><use xlink:href="#${imageId}" transform="matrix(${matrix.map(formatUnit).join(',')})" /></g>`);
+	    }
 	    getString() {
 	        const w = this.width.toFixed(0);
 	        const h = this.height.toFixed(0);
 	        // Build defs content
-	        const defsContent = [`<clipPath id="vb"><rect width="${w}" height="${h}"/></clipPath>`];
+	        const clip = this.#clipCircle;
+	        const clipShape = clip
+	            ? `<circle cx="${formatUnit(clip.x)}" cy="${formatUnit(clip.y)}" r="${formatUnit(clip.radius)}"/>`
+	            : `<rect width="${w}" height="${h}"/>`;
+	        const defsContent = [`<clipPath id="vb">${clipShape}</clipPath>`, ...this.#rasterDefs];
 	        for (const sheet of this.#spriteSheetDefs.values()) {
 	            defsContent.push(`<image id="${escapeXml(sheet.defId)}" width="${formatNum(sheet.width)}" height="${formatNum(sheet.height)}" xlink:href="${escapeXml(sheet.href)}" />`);
 	        }
@@ -8830,9 +8973,6 @@
 	            `<defs>\n  ${defsContent.join('\n  ')}\n</defs>`,
 	            `<g id="map" clip-path="url(#vb)">`,
 	        ];
-	        if (this.#backgroundColor.alpha > 0) {
-	            parts.push(`<rect x="-1" y="-1" width="${(this.width + 2).toFixed(0)}" height="${(this.height + 2).toFixed(0)}" ${fillAttr(this.#backgroundColor)} />`);
-	        }
 	        parts.push(...this.#svg, '</g>', '</svg>');
 	        return parts.join('\n');
 	    }
@@ -8852,6 +8992,85 @@
 	function formatScaled(v) {
 	    return formatNum(Math.round(v * 10));
 	}
+	/** Size of a raster tile image in user units, when drawn as a mesh of triangles on the globe. */
+	const RASTER_TILE_UNITS = 256;
+	/** How far (pixels) a raster tile image reaches beyond the tile border in the seam underlay. */
+	const RASTER_TILE_BLEED_PX = 1;
+	/** How far (pixels) each raster triangle is grown beyond its edges to overlap its neighbours. */
+	const RASTER_TRIANGLE_OVERLAP_PX = 0.5;
+	/**
+	 * The affine transform [a, b, c, d, e, f] mapping the source triangle (in tile units 0..1,
+	 * scaled to RASTER_TILE_UNITS) exactly onto the target triangle, or undefined if either is
+	 * degenerate.
+	 */
+	function affineFromTriangles(source, target) {
+	    const k = RASTER_TILE_UNITS;
+	    const [[u0, v0], [u1, v1], [u2, v2]] = source.map(([u, v]) => [u * k, v * k]);
+	    const [[x0, y0], [x1, y1], [x2, y2]] = target;
+	    const du1 = u1 - u0;
+	    const dv1 = v1 - v0;
+	    const du2 = u2 - u0;
+	    const dv2 = v2 - v0;
+	    const det = du1 * dv2 - du2 * dv1;
+	    if (Math.abs(det) < 1e-12)
+	        return undefined;
+	    const dx1 = x1 - x0;
+	    const dx2 = x2 - x0;
+	    const dy1 = y1 - y0;
+	    const dy2 = y2 - y0;
+	    // Screen area below a hundredth of a pixel: nothing to draw.
+	    if (Math.abs(dx1 * dy2 - dx2 * dy1) < 0.02)
+	        return undefined;
+	    const a = (dx1 * dv2 - dx2 * dv1) / det;
+	    const c = (du1 * dx2 - du2 * dx1) / det;
+	    const b = (dy1 * dv2 - dy2 * dv1) / det;
+	    const d = (du1 * dy2 - du2 * dy1) / det;
+	    return [a, b, c, d, x0 - a * u0 - c * v0, y0 - b * u0 - d * v0];
+	}
+	function isOnTileBorder(source) {
+	    return source.some(([u, v]) => u === 0 || u === 1 || v === 0 || v === 1);
+	}
+	/**
+	 * Moves the source corners of a triangle that lie on the tile border inwards, by the
+	 * equivalent of RASTER_TILE_BLEED_PX on screen, so that the image edge lies beyond the border.
+	 * (Used for the underlay that closes the seams between tiles, see `#drawRasterMeshes`.)
+	 */
+	function bleedAtTileBorder(source, target) {
+	    const [[u0, v0], [u1, v1], [u2, v2]] = source;
+	    const [[x0, y0], [x1, y1], [x2, y2]] = target;
+	    const sourceArea = Math.abs((u1 - u0) * (v2 - v0) - (u2 - u0) * (v1 - v0));
+	    const targetArea = Math.abs((x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0));
+	    if (sourceArea === 0 || targetArea === 0)
+	        return source;
+	    // Pixels per tile unit, and the bleed in tile units, kept within the triangle.
+	    const scale = Math.sqrt(targetArea / sourceArea);
+	    const size = Math.max(Math.abs(u1 - u0), Math.abs(u2 - u0), Math.abs(v1 - v0), Math.abs(v2 - v0));
+	    const bleed = Math.min(RASTER_TILE_BLEED_PX / scale, size / 4);
+	    const inset = (t) => (t === 0 ? bleed : t === 1 ? 1 - bleed : t);
+	    return source.map(([u, v]) => [inset(u), inset(v)]);
+	}
+	/**
+	 * Moves every edge of a triangle outwards by `distance`, by scaling it around its incenter.
+	 * Growth is limited for very thin triangles, whose corners would otherwise shoot far out.
+	 */
+	function growTriangle(triangle, distance) {
+	    const [[x0, y0], [x1, y1], [x2, y2]] = triangle;
+	    const a = Math.hypot(x2 - x1, y2 - y1);
+	    const b = Math.hypot(x2 - x0, y2 - y0);
+	    const c = Math.hypot(x1 - x0, y1 - y0);
+	    const perimeter = a + b + c;
+	    const area = Math.abs((x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0)) / 2;
+	    if (perimeter === 0 || area === 0)
+	        return triangle;
+	    const inradius = (2 * area) / perimeter;
+	    const cx = (a * x0 + b * x1 + c * x2) / perimeter;
+	    const cy = (a * y0 + b * y1 + c * y2) / perimeter;
+	    const scale = 1 + distance / Math.max(inradius, 2 * distance);
+	    return triangle.map(([x, y]) => [cx + (x - cx) * scale, cy + (y - cy) * scale]);
+	}
+	function formatUnit(v) {
+	    return (Math.round(v * 100000) / 100000).toString();
+	}
 	function formatScale(v) {
 	    return (Math.round(v * 10000) / 10000).toString();
 	}
@@ -8945,6 +9164,12 @@
 	    properties;
 	    patterns;
 	    geometry;
+	    /**
+	     * The boundary of a polygon for the fill-antialias outline, as open polylines — when it
+	     * differs from the polygon's rings, i.e. when the polygon was clipped to its tile: the
+	     * clipped edges along the tile border are not part of the outline.
+	     */
+	    outline;
 	    #bbox;
 	    constructor(opt) {
 	        this.type = opt.type;
@@ -8952,6 +9177,7 @@
 	        this.properties = opt.properties;
 	        this.patterns = opt.patterns;
 	        this.geometry = opt.geometry;
+	        this.outline = opt.outline;
 	    }
 	    getBbox() {
 	        if (this.#bbox)
@@ -10046,6 +10272,138 @@
 	    return str;
 	}
 
+	/**
+	 * Clipping of vector tile geometry to the tile's own square.
+	 *
+	 * Vector tiles contain a buffer: geometry reaches a little beyond the tile, so a polygon on
+	 * a tile border exists in both tiles. MapLibre draws each tile clipped to its square (with the
+	 * stencil buffer), so nothing is drawn twice. Opaque fills hide the difference, translucent
+	 * ones do not: the overlap would be drawn with double opacity.
+	 */
+	/** Whether any point lies outside of the square [min, max]². */
+	function exceedsSquare(rings, min, max) {
+	    return rings.some((ring) => ring.some(({ x, y }) => x < min || x > max || y < min || y > max));
+	}
+	/**
+	 * Clips the rings of a polygon to the square [min, max]² (Sutherland–Hodgman). Rings that
+	 * vanish are dropped.
+	 */
+	function clipPolygon(rings, min, max) {
+	    const result = [];
+	    for (const ring of rings) {
+	        let points = ring;
+	        points = clipAgainst(points, (p) => p.x >= min, (a, b) => lerpAtX(a, b, min));
+	        points = clipAgainst(points, (p) => p.x <= max, (a, b) => lerpAtX(a, b, max));
+	        points = clipAgainst(points, (p) => p.y >= min, (a, b) => lerpAtY(a, b, min));
+	        points = clipAgainst(points, (p) => p.y <= max, (a, b) => lerpAtY(a, b, max));
+	        if (points.length >= 3)
+	            result.push(points);
+	    }
+	    return result;
+	}
+	/**
+	 * The boundary of a polygon within the square [min, max]², as open polylines: the parts of
+	 * its rings inside the square, without the edges the clipping adds along the square's border.
+	 * (MapLibre's fill outline follows the original rings, cut off at the tile border.)
+	 */
+	function clipPolygonOutline(rings, min, max) {
+	    const result = [];
+	    for (const ring of rings) {
+	        if (ring.length < 2)
+	            continue;
+	        const first = ring[0];
+	        const last = ring[ring.length - 1];
+	        const closed = first.x === last.x && first.y === last.y ? ring : [...ring, first];
+	        result.push(...clipLine(closed, min, max));
+	    }
+	    return result;
+	}
+	/** Clips a polyline to the square [min, max]², returning the parts inside of it. */
+	function clipLine(line, min, max) {
+	    const parts = [];
+	    let current = [];
+	    for (let i = 0; i + 1 < line.length; i++) {
+	        const segment = clipSegment(line[i], line[i + 1], min, max);
+	        if (!segment) {
+	            if (current.length > 1)
+	                parts.push(current);
+	            current = [];
+	            continue;
+	        }
+	        const [a, b] = segment;
+	        const last = current[current.length - 1];
+	        if (last?.x !== a.x || last.y !== a.y) {
+	            if (current.length > 1)
+	                parts.push(current);
+	            current = [a];
+	        }
+	        current.push(b);
+	        // The segment left the square: the line continues elsewhere.
+	        if (b !== line[i + 1]) {
+	            parts.push(current);
+	            current = [];
+	        }
+	    }
+	    if (current.length > 1)
+	        parts.push(current);
+	    return parts;
+	}
+	/** Liang–Barsky: the part of the segment a→b inside the square, or undefined. */
+	function clipSegment(a, b, min, max) {
+	    const dx = b.x - a.x;
+	    const dy = b.y - a.y;
+	    let t0 = 0;
+	    let t1 = 1;
+	    for (const [p, q] of [
+	        [-dx, a.x - min],
+	        [dx, max - a.x],
+	        [-dy, a.y - min],
+	        [dy, max - a.y],
+	    ]) {
+	        if (p === 0) {
+	            if (q < 0)
+	                return undefined;
+	            continue;
+	        }
+	        const t = q / p;
+	        if (p < 0) {
+	            if (t > t1)
+	                return undefined;
+	            if (t > t0)
+	                t0 = t;
+	        }
+	        else {
+	            if (t < t0)
+	                return undefined;
+	            if (t < t1)
+	                t1 = t;
+	        }
+	    }
+	    return [
+	        t0 === 0 ? a : { x: a.x + dx * t0, y: a.y + dy * t0 },
+	        t1 === 1 ? b : { x: a.x + dx * t1, y: a.y + dy * t1 },
+	    ];
+	}
+	function clipAgainst(points, inside, intersect) {
+	    const result = [];
+	    for (let i = 0; i < points.length; i++) {
+	        const current = points[i];
+	        const previous = points[(i + points.length - 1) % points.length];
+	        const currentInside = inside(current);
+	        if (currentInside !== inside(previous))
+	            result.push(intersect(previous, current));
+	        if (currentInside)
+	            result.push(current);
+	    }
+	    return result;
+	}
+	function lerpAtX(a, b, x) {
+	    return { x, y: a.y + ((b.y - a.y) * (x - a.x)) / (b.x - a.x) };
+	}
+	function lerpAtY(a, b, y) {
+	    return { x: a.x + ((b.x - a.x) * (y - a.y)) / (b.y - a.y), y };
+	}
+
 	const TILE_EXTENT = 4096;
 	const VTFeatureType = { Unknown: 0, Point: 1, LineString: 2, Polygon: 3 };
 	async function loadVectorSource(source, job, layerFeatures) {
@@ -10053,11 +10411,8 @@
 	    if (!tiles)
 	        return;
 	    const { width, height } = job.renderer;
-	    const { zoom, center } = job.view;
-	    const { zoomLevel, tileSize, tiles: tileCoordinates, } = calculateTileGrid(width, height, center, zoom, source.maxzoom);
-	    await Promise.all(tileCoordinates.map(async ({ x, y, offsetX, offsetY }) => {
-	        const offset = new Point2D(offsetX, offsetY);
-	        const tile = await getTile(tiles[0], zoomLevel, x, y);
+	    await Promise.all(getTileProjections(source, job).map(async ({ x, y, z, project, clipToTile }) => {
+	        const tile = await getTile(tiles[0], z, x, y);
 	        if (!tile)
 	            return;
 	        const vectorTile = new VectorTile(new PbfReader(tile.buffer));
@@ -10069,9 +10424,6 @@
 	            }
 	            for (let i = 0; i < layer.length; i++) {
 	                const featureSrc = layer.feature(i);
-	                const geometry = featureSrc
-	                    .loadGeometry()
-	                    .map((ring) => ring.map((point) => new Point2D(point.x, point.y).scale(tileSize / TILE_EXTENT).translate(offset)));
 	                let type;
 	                let list;
 	                switch (featureSrc.type) {
@@ -10090,6 +10442,22 @@
 	                        list = features.polygons;
 	                        break;
 	                }
+	                let rings = featureSrc.loadGeometry();
+	                let outline;
+	                // Clip polygons and lines to the tile, like MapLibre's stencil clipping: otherwise
+	                // the parts in the tile buffer are drawn twice, which shows when translucent.
+	                if (clipToTile && type !== 'Point' && exceedsSquare(rings, 0, TILE_EXTENT)) {
+	                    if (type === 'Polygon') {
+	                        outline = project('LineString', clipPolygonOutline(rings, 0, TILE_EXTENT));
+	                        rings = clipPolygon(rings, 0, TILE_EXTENT);
+	                    }
+	                    else {
+	                        rings = rings.flatMap((line) => clipLine(line, 0, TILE_EXTENT));
+	                    }
+	                }
+	                const geometry = project(type, rings);
+	                if (geometry.length === 0)
+	                    continue;
 	                // Split MultiPoint into individual Point features
 	                if (type === 'Point' && geometry.length > 1) {
 	                    for (const ring of geometry) {
@@ -10107,6 +10475,7 @@
 	                    const feature = new Feature({
 	                        type,
 	                        geometry,
+	                        outline,
 	                        id: featureSrc.id,
 	                        properties: featureSrc.properties,
 	                    });
@@ -10117,9 +10486,41 @@
 	        }
 	    }));
 	}
+	function getTileProjections(source, job) {
+	    const { width, height } = job.renderer;
+	    const { zoom, center } = job.view;
+	    const projection = job.projection;
+	    if (projection?.isGlobe) {
+	        // Never zoom level 0 on the globe: the left and right edge of its single tile coincide
+	        // (the antimeridian), which the horizon clipping cannot tell apart.
+	        const z = Math.max(1, Math.min(Math.floor(zoom), source.maxzoom ?? Infinity));
+	        const scale = 1 / (TILE_EXTENT * 2 ** z);
+	        return projection.coveringTiles(z).map(({ x, y }) => ({
+	            x,
+	            y,
+	            z,
+	            clipToTile: projection.isTileFullyVisible({ x, y, z }),
+	            project: (type, rings) => projection.projectGeometry(type, rings.map((ring) => ring.map((p) => [
+	                (x * TILE_EXTENT + p.x) * scale,
+	                (y * TILE_EXTENT + p.y) * scale,
+	            ]))),
+	        }));
+	    }
+	    const { zoomLevel, tileSize, tiles } = calculateTileGrid(width, height, center, zoom, source.maxzoom);
+	    return tiles.map(({ x, y, offsetX, offsetY }) => {
+	        const offset = new Point2D(offsetX, offsetY);
+	        return {
+	            x,
+	            y,
+	            z: zoomLevel,
+	            clipToTile: true,
+	            project: (_type, rings) => rings.map((ring) => ring.map((point) => new Point2D(point.x, point.y).scale(tileSize / TILE_EXTENT).translate(offset))),
+	        };
+	    });
+	}
 
 	function loadGeoJSONSource(options) {
-	    const { sourceName, data, width, height, zoom, center, layerFeatures } = options;
+	    const { sourceName, data, width, height, zoom, center, layerFeatures, projection } = options;
 	    const existing = layerFeatures.get(sourceName);
 	    const features = existing ?? {
 	        points: [],
@@ -10132,9 +10533,17 @@
 	        layerFeatures.set(sourceName, features);
 	    const worldSize = 512 * 2 ** zoom;
 	    const centerMercator = new Point2D(center[0], center[1]).getProject2Pixel();
-	    function projectCoord(coord) {
+	    function toMercator(coord) {
 	        const mercator = new Point2D(coord[0], coord[1]).getProject2Pixel();
-	        return new Point2D((mercator.x - centerMercator.x) * worldSize + width / 2, (mercator.y - centerMercator.y) * worldSize + height / 2);
+	        return [mercator.x, mercator.y];
+	    }
+	    function project(type, rings) {
+	        if (projection?.isGlobe) {
+	            if (type === 'Polygon')
+	                rings = orientRings(rings);
+	            return projection.projectGeometry(type, rings);
+	        }
+	        return rings.map((ring) => ring.map(([x, y]) => new Point2D((x - centerMercator.x) * worldSize + width / 2, (y - centerMercator.y) * worldSize + height / 2)));
 	    }
 	    function makeFeature(type, geometry, id, properties) {
 	        const feature = new Feature({ type, geometry, id, properties });
@@ -10145,7 +10554,10 @@
 	    function extractPoints(geometry) {
 	        return geometry.flatMap((ring) => ring.map((p) => [p]));
 	    }
-	    function addFeature(type, geometry, id, properties) {
+	    function addFeature(type, rings, id, properties) {
+	        const geometry = project(type, rings);
+	        if (geometry.length === 0)
+	            return;
 	        switch (type) {
 	            case 'Point': {
 	                const f = makeFeature('Point', geometry, id, properties);
@@ -10188,23 +10600,23 @@
 	    function processGeometry(geom, id, properties) {
 	        switch (geom.type) {
 	            case 'Point':
-	                addFeature('Point', [[projectCoord(geom.coordinates)]], id, properties);
+	                addFeature('Point', [[toMercator(geom.coordinates)]], id, properties);
 	                break;
 	            case 'MultiPoint':
-	                addFeature('Point', geom.coordinates.map((c) => [projectCoord(c)]), id, properties);
+	                addFeature('Point', geom.coordinates.map((c) => [toMercator(c)]), id, properties);
 	                break;
 	            case 'LineString':
-	                addFeature('LineString', [geom.coordinates.map((c) => projectCoord(c))], id, properties);
+	                addFeature('LineString', [geom.coordinates.map((c) => toMercator(c))], id, properties);
 	                break;
 	            case 'MultiLineString':
-	                addFeature('LineString', geom.coordinates.map((line) => line.map((c) => projectCoord(c))), id, properties);
+	                addFeature('LineString', geom.coordinates.map((line) => line.map((c) => toMercator(c))), id, properties);
 	                break;
 	            case 'Polygon':
-	                addFeature('Polygon', geom.coordinates.map((ring) => ring.map((c) => projectCoord(c))), id, properties);
+	                addFeature('Polygon', geom.coordinates.map((ring) => ring.map((c) => toMercator(c))), id, properties);
 	                break;
 	            case 'MultiPolygon':
 	                for (const polygon of geom.coordinates) {
-	                    addFeature('Polygon', polygon.map((ring) => ring.map((c) => projectCoord(c))), id, properties);
+	                    addFeature('Polygon', polygon.map((ring) => ring.map((c) => toMercator(c))), id, properties);
 	                }
 	                break;
 	            case 'GeometryCollection':
@@ -10228,6 +10640,22 @@
 	            break;
 	    }
 	}
+	/**
+	 * Orients polygon rings like vector tiles do (in mercator space, y pointing south: the
+	 * exterior ring clockwise, holes counter-clockwise), as the globe clipping relies on it.
+	 */
+	function orientRings(rings) {
+	    return rings.map((ring, index) => {
+	        let area = 0;
+	        for (let i = 0; i < ring.length; i++) {
+	            const [x0, y0] = ring[i];
+	            const [x1, y1] = ring[(i + 1) % ring.length];
+	            area += x0 * y1 - x1 * y0;
+	        }
+	        const isExterior = index === 0;
+	        return area > 0 === isExterior ? ring : [...ring].reverse();
+	    });
+	}
 
 	/**
 	 * Base64-encode an ArrayBuffer (standard alphabet, with padding).
@@ -10265,6 +10693,23 @@
 	        throw Error(`Invalid raster source "${sourceName}": expected type "raster" with a "tiles" array`);
 	    }
 	    const sourceUrl = source.tiles[0];
+	    const projection = job.projection;
+	    if (projection?.isGlobe) {
+	        // Never zoom level 0 on the globe: the left and right edge of its single tile coincide
+	        // (the antimeridian), which the horizon clipping cannot tell apart.
+	        const z = Math.max(1, Math.min(Math.floor(zoom), source.maxzoom ?? Infinity));
+	        const globeTiles = await Promise.all(projection.coveringTiles(z).map(async (id) => {
+	            const tile = await getTile(sourceUrl, id.z, id.x, id.y);
+	            if (!tile)
+	                return null;
+	            const triangles = projection.rasterTriangles(id);
+	            if (triangles.length === 0)
+	                return null;
+	            const dataUri = `data:${tile.contentType};base64,${arrayBufferToBase64(tile.buffer)}`;
+	            return { x: 0, y: 0, width: 1, height: 1, dataUri, triangles };
+	        }));
+	        return globeTiles.filter((tile) => tile !== null);
+	    }
 	    const { zoomLevel, tileSize, tiles } = calculateTileGrid(width, height, center, zoom, source.maxzoom);
 	    const rasterTiles = await Promise.all(tiles.map(async ({ x, y, offsetX, offsetY }) => {
 	        const tile = await getTile(sourceUrl, zoomLevel, x, y);
@@ -10368,6 +10813,7 @@
 	                        zoom,
 	                        center,
 	                        layerFeatures,
+	                        projection: job.projection,
 	                    });
 	                }
 	                break;
@@ -10499,6 +10945,594 @@
 	    return layers.map(createStyleLayer);
 	}
 
+	/**
+	 * Map projection: web mercator, MapLibre's globe ("vertical-perspective") or a blend of both.
+	 *
+	 * The math follows MapLibre GL JS (`vertical_perspective_transform.ts` and the
+	 * `_projection_globe.vertex.glsl` shader) for a camera without pitch, bearing or padding:
+	 * the globe is a sphere of radius `worldSize / (2π·cos(centerLat))` (so the map center has
+	 * the same scale as in mercator), viewed by a perspective camera `1.5 · height` pixels above
+	 * the map center. The globe → mercator transition blends the homogeneous clip-space positions
+	 * of both projections (x, y and w) *before* the perspective divide, exactly like the shader.
+	 *
+	 * All inputs are mercator world coordinates in the range 0..1 (`mx` east, `my` south).
+	 */
+	/** MapLibre's default vertical field of view (`TransformHelper._fovInRadians`). */
+	const FOV = 0.6435011087932844;
+	/** What MapLibre expands `projection: { type: 'globe' }` into (`projection_factory.ts`). */
+	const GLOBE_PRESET = [
+	    'interpolate',
+	    ['linear'],
+	    ['zoom'],
+	    11,
+	    'vertical-perspective',
+	    12,
+	    'mercator',
+	];
+	/** Below this globeness the far side of the globe is not clipped (MapLibre's `z_globeness_threshold`). */
+	const CLIP_THRESHOLD = 0.2;
+	/** Maximum distance (pixels) a straight segment may deviate from the curved globe surface. */
+	const MAX_CURVE_ERROR_PX = 0.25;
+	/** The same for the affine-mapped triangles of raster tiles (a coarser mesh keeps the SVG small). */
+	const MAX_RASTER_ERROR_PX = 1;
+	/** Upper bound for the number of cells per raster tile side. */
+	const MAX_RASTER_CELLS = 16;
+	/** Angle to go clockwise on screen (decreasing angle in the y-up view frame) from a0 to a1, in [0, 2π). */
+	function clockwiseDelta(a0, a1) {
+	    const delta = (a0 - a1) % (2 * Math.PI);
+	    return delta < 0 ? delta + 2 * Math.PI : delta;
+	}
+	/**
+	 * Returns how "globe-like" the projection is at the given zoom, matching MapLibre's
+	 * `GlobeProjection.transitionState`: 0 = mercator, 1 = globe, in between = transition.
+	 */
+	function getGlobeness(projection, zoom) {
+	    return evaluateGlobeness(projection?.type ?? 'mercator', zoom);
+	}
+	function evaluateGlobeness(value, zoom) {
+	    if (typeof value === 'string') {
+	        switch (value) {
+	            case 'globe':
+	                return evaluateGlobeness(GLOBE_PRESET, zoom);
+	            case 'vertical-perspective':
+	                return 1;
+	            default:
+	                return 0;
+	        }
+	    }
+	    if (!Array.isArray(value))
+	        return 0;
+	    const [op, ...args] = value;
+	    if (op === 'literal')
+	        return evaluateGlobeness(args[0], zoom);
+	    if (op === 'step') {
+	        // ["step", ["zoom"], output0, stop1, output1, ...]
+	        let result = args[1];
+	        for (let i = 2; i + 1 < args.length; i += 2) {
+	            if (zoom >= args[i])
+	                result = args[i + 1];
+	        }
+	        return evaluateGlobeness(result, zoom);
+	    }
+	    if (op === 'interpolate') {
+	        // ["interpolate", ["linear"] | ["exponential", base], ["zoom"], stop0, output0, ...]
+	        const interpolation = args[0];
+	        const base = interpolation[0] === 'exponential' ? interpolation[1] : 1;
+	        const stops = [];
+	        for (let i = 2; i + 1 < args.length; i += 2)
+	            stops.push([args[i], args[i + 1]]);
+	        if (stops.length === 0)
+	            return 0;
+	        if (zoom <= stops[0][0])
+	            return evaluateGlobeness(stops[0][1], zoom);
+	        for (let i = 1; i < stops.length; i++) {
+	            const [z1, out1] = stops[i];
+	            if (zoom > z1)
+	                continue;
+	            const [z0, out0] = stops[i - 1];
+	            const t = interpolationFactor(zoom, z0, z1, base);
+	            const g0 = evaluateGlobeness(out0, zoom);
+	            const g1 = evaluateGlobeness(out1, zoom);
+	            return g0 + (g1 - g0) * t;
+	        }
+	        return evaluateGlobeness(stops[stops.length - 1][1], zoom);
+	    }
+	    // A projection transition literal: [from, to, transition]
+	    if (value.length === 3 && typeof value[2] === 'number') {
+	        const g0 = evaluateGlobeness(value[0], zoom);
+	        const g1 = evaluateGlobeness(value[1], zoom);
+	        return g0 + (g1 - g0) * value[2];
+	    }
+	    return 0;
+	}
+	function interpolationFactor(input, lower, upper, base) {
+	    const difference = upper - lower;
+	    if (difference === 0)
+	        return 0;
+	    const progress = input - lower;
+	    if (base === 1)
+	        return progress / difference;
+	    return (Math.pow(base, progress) - 1) / (Math.pow(base, difference) - 1);
+	}
+	class Projection {
+	    width;
+	    height;
+	    zoom;
+	    /** 0 = mercator, 1 = globe, in between = transition (see {@link getGlobeness}). */
+	    globeness;
+	    /** Size of the whole world in pixels at the current zoom (mercator). */
+	    worldSize;
+	    /**
+	     * Maximum length (in mercator units) of a straight segment before it has to be
+	     * subdivided to follow the curvature of the globe.
+	     */
+	    maxSegmentLength;
+	    /** Whether geometry on the far side of the globe has to be removed. */
+	    clipsHorizon;
+	    #centerX;
+	    #centerY;
+	    #centerLng;
+	    #sinLat;
+	    #cosLat;
+	    /** Globe radius in pixels. */
+	    #radius;
+	    /** Distance of the camera to the map center in pixels. */
+	    #cameraDistance;
+	    /** Points of the unit sphere with a view-space z below this are behind the horizon. */
+	    #horizonZ;
+	    constructor(opt) {
+	        this.width = opt.width;
+	        this.height = opt.height;
+	        this.zoom = opt.zoom;
+	        this.globeness = Math.min(1, Math.max(0, opt.globeness ?? 0));
+	        this.worldSize = 512 * 2 ** opt.zoom;
+	        const center = new Point2D(opt.center[0], opt.center[1]).getProject2Pixel();
+	        this.#centerX = center.x;
+	        this.#centerY = center.y;
+	        const lat = (opt.center[1] * Math.PI) / 180;
+	        this.#centerLng = (opt.center[0] * Math.PI) / 180;
+	        this.#sinLat = Math.sin(lat);
+	        this.#cosLat = Math.cos(lat);
+	        this.#radius = this.worldSize / (2 * Math.PI * this.#cosLat);
+	        this.#cameraDistance = this.height / 2 / Math.tan(FOV / 2);
+	        this.#horizonZ = this.#radius / (this.#radius + this.#cameraDistance);
+	        this.clipsHorizon = this.globeness > CLIP_THRESHOLD;
+	        // A chord spanning the angle θ deviates R·θ²/8 from the sphere.
+	        const maxAngle = Math.sqrt((8 * MAX_CURVE_ERROR_PX) / this.#radius);
+	        this.maxSegmentLength = maxAngle / (2 * Math.PI);
+	    }
+	    static fromStyle(opt) {
+	        return new Projection({ ...opt, globeness: getGlobeness(opt.projection, opt.zoom) });
+	    }
+	    /** True when the globe projection is (at least partially) in effect. */
+	    get isGlobe() {
+	        return this.globeness > 0;
+	    }
+	    /**
+	     * The silhouette of the globe on screen, if the map has to be clipped to it.
+	     * (During the globe → mercator transition the silhouette is far outside the screen.)
+	     */
+	    get clipCircle() {
+	        if (!this.clipsHorizon)
+	            return undefined;
+	        const r = this.#radius;
+	        const d = this.#cameraDistance;
+	        const radius = (d * r) / Math.sqrt((d + r) * (d + r) - r * r);
+	        return { x: this.width / 2, y: this.height / 2, radius };
+	    }
+	    /** Mercator world coordinates → unit sphere in the view frame (x right, y up, z towards the camera). */
+	    toSphere(mx, my) {
+	        const dLng = mx * 2 * Math.PI - Math.PI - this.#centerLng;
+	        const lat = 2 * Math.atan(Math.exp(Math.PI - my * 2 * Math.PI)) - Math.PI / 2;
+	        const cosLat = Math.cos(lat);
+	        const x = Math.sin(dLng) * cosLat;
+	        const y = Math.sin(lat);
+	        const z = Math.cos(dLng) * cosLat;
+	        return [x, y * this.#cosLat - z * this.#sinLat, y * this.#sinLat + z * this.#cosLat];
+	    }
+	    /** Inverse of {@link toSphere}. */
+	    fromSphere(v) {
+	        const y = v[1] * this.#cosLat + v[2] * this.#sinLat;
+	        const z = -v[1] * this.#sinLat + v[2] * this.#cosLat;
+	        const lat = Math.asin(Math.max(-1, Math.min(1, y)));
+	        const lng = Math.atan2(v[0], z) + this.#centerLng;
+	        const mx = (lng + Math.PI) / (2 * Math.PI);
+	        const my = (Math.PI - Math.log(Math.tan(Math.PI / 4 + lat / 2))) / (2 * Math.PI);
+	        return [mx - Math.floor(mx), my];
+	    }
+	    isVisible(v) {
+	        return !this.clipsHorizon || v[2] >= this.#horizonZ;
+	    }
+	    /** Screen position of a mercator point. */
+	    project(mx, my, v) {
+	        // Flat (mercator) position, relative to the screen center. Use the world copy
+	        // nearest to the center.
+	        let dx = mx - this.#centerX;
+	        dx -= Math.round(dx);
+	        const flatX = dx * this.worldSize;
+	        const flatY = (my - this.#centerY) * this.worldSize;
+	        const t = this.globeness;
+	        if (t === 0)
+	            return new Point2D(flatX + this.width / 2, flatY + this.height / 2);
+	        v ??= this.toSphere(mx, my);
+	        const d = this.#cameraDistance;
+	        const r = this.#radius;
+	        // Homogeneous coordinates (x, y, w) of the globe position; the flat one is (d·x, d·y, d).
+	        const globeX = d * r * v[0];
+	        const globeY = -d * r * v[1];
+	        const globeW = d + r * (1 - v[2]);
+	        const w = d + (globeW - d) * t;
+	        return new Point2D((d * flatX + (globeX - d * flatX) * t) / w + this.width / 2, (d * flatY + (globeY - d * flatY) * t) / w + this.height / 2);
+	    }
+	    /**
+	     * Projects feature geometry given in mercator world coordinates to screen pixels.
+	     * On the globe, segments are subdivided to follow the curvature, lines are cut at
+	     * the horizon and polygons are clipped to the visible hemisphere (the clipped part of
+	     * the boundary follows the globe's silhouette).
+	     */
+	    projectGeometry(type, rings) {
+	        if (!this.isGlobe)
+	            return rings.map((ring) => ring.map(([mx, my]) => this.project(mx, my)));
+	        switch (type) {
+	            case 'Point':
+	                return rings
+	                    .map((ring) => ring.flatMap(([mx, my]) => {
+	                    const v = this.toSphere(mx, my);
+	                    return this.isVisible(v) ? [this.project(mx, my, v)] : [];
+	                }))
+	                    .filter((ring) => ring.length > 0);
+	            case 'LineString':
+	                return rings.flatMap((ring) => this.#clipLine(this.#densify(ring, false)));
+	            case 'Polygon':
+	                return this.#clipPolygon(rings.map((ring) => this.#densify(ring, true)));
+	        }
+	    }
+	    /** Subdivides long segments (in mercator space) and lifts the points onto the sphere. */
+	    #densify(ring, closed) {
+	        const maxLength = this.maxSegmentLength;
+	        const result = [];
+	        const count = ring.length;
+	        const segments = closed ? count : count - 1;
+	        for (let i = 0; i < count; i++) {
+	            const [x0, y0] = ring[i];
+	            result.push({ mx: x0, my: y0, v: this.toSphere(x0, y0) });
+	            if (i >= segments)
+	                continue;
+	            const [x1, y1] = ring[(i + 1) % count];
+	            const steps = Math.ceil(Math.max(Math.abs(x1 - x0), Math.abs(y1 - y0)) / maxLength);
+	            for (let s = 1; s < steps; s++) {
+	                const mx = x0 + ((x1 - x0) * s) / steps;
+	                const my = y0 + ((y1 - y0) * s) / steps;
+	                result.push({ mx, my, v: this.toSphere(mx, my) });
+	            }
+	        }
+	        return result;
+	    }
+	    /** Point on the segment a→b where it crosses the horizon plane. */
+	    #horizonCrossing(a, b) {
+	        const s = (a.v[2] - this.#horizonZ) / (a.v[2] - b.v[2]);
+	        const mx = a.mx + (b.mx - a.mx) * s;
+	        const my = a.my + (b.my - a.my) * s;
+	        return { mx, my, v: this.toSphere(mx, my) };
+	    }
+	    /** Splits a line into its visible parts. */
+	    #clipLine(points) {
+	        if (!this.clipsHorizon)
+	            return [points.map((p) => this.project(p.mx, p.my, p.v))];
+	        const parts = [];
+	        let current = [];
+	        for (let i = 0; i < points.length; i++) {
+	            const p = points[i];
+	            const visible = this.isVisible(p.v);
+	            const prev = i > 0 ? points[i - 1] : undefined;
+	            if (prev && this.isVisible(prev.v) !== visible) {
+	                const c = this.#horizonCrossing(prev, p);
+	                current.push(this.project(c.mx, c.my, c.v));
+	                if (!visible) {
+	                    parts.push(current);
+	                    current = [];
+	                }
+	            }
+	            if (visible)
+	                current.push(this.project(p.mx, p.my, p.v));
+	        }
+	        if (current.length > 0)
+	            parts.push(current);
+	        return parts.filter((part) => part.length > 1);
+	    }
+	    /**
+	     * Clips the rings of a polygon to the visible hemisphere.
+	     *
+	     * Every ring crossing the horizon is cut into its visible chains, each running from an
+	     * entry point to an exit point on the horizon. The chains are then reconnected along the
+	     * silhouette: from an exit point, the silhouette is followed to the nearest entry point
+	     * (of any chain of any ring). Rings follow the vector tile winding (exterior rings
+	     * clockwise on screen, holes counter-clockwise), which keeps the filled area on the right
+	     * of every ring, so the silhouette is always walked clockwise.
+	     */
+	    #clipPolygon(rings) {
+	        const project = (p) => this.project(p.mx, p.my, p.v);
+	        if (!this.clipsHorizon)
+	            return rings.map((ring) => ring.map(project));
+	        const result = [];
+	        const chains = [];
+	        const angleOf = (p) => Math.atan2(p.v[1], p.v[0]);
+	        for (const ring of rings) {
+	            const count = ring.length;
+	            const visible = ring.map((p) => this.isVisible(p.v));
+	            // Start walking at an entry point, so every chain is complete.
+	            let start = -1;
+	            for (let i = 0; i < count; i++) {
+	                if (visible[i] && !visible[(i + count - 1) % count]) {
+	                    start = i;
+	                    break;
+	                }
+	            }
+	            if (start < 0) {
+	                // No crossing: the ring is either completely visible or completely hidden.
+	                if (visible[0])
+	                    result.push(ring.map(project));
+	                continue;
+	            }
+	            let chain;
+	            for (let k = 0; k < count; k++) {
+	                const i = (start + k) % count;
+	                const p = ring[i];
+	                const prev = ring[(i + count - 1) % count];
+	                if (visible[i]) {
+	                    if (!chain) {
+	                        const c = this.#horizonCrossing(prev, p);
+	                        chain = { entry: angleOf(c), exit: 0, points: [project(c)] };
+	                    }
+	                    chain.points.push(project(p));
+	                }
+	                else if (chain) {
+	                    const c = this.#horizonCrossing(prev, p);
+	                    chain.points.push(project(c));
+	                    chain.exit = angleOf(c);
+	                    chains.push(chain);
+	                    chain = undefined;
+	                }
+	            }
+	        }
+	        // Reconnect the chains along the silhouette.
+	        const used = new Set();
+	        for (const first of chains) {
+	            if (used.has(first))
+	                continue;
+	            const ring = [];
+	            let chain = first;
+	            for (;;) {
+	                used.add(chain);
+	                ring.push(...chain.points);
+	                let next = first;
+	                let bestDelta = clockwiseDelta(chain.exit, first.entry);
+	                for (const candidate of chains) {
+	                    if (used.has(candidate))
+	                        continue;
+	                    const delta = clockwiseDelta(chain.exit, candidate.entry);
+	                    if (delta < bestDelta) {
+	                        bestDelta = delta;
+	                        next = candidate;
+	                    }
+	                }
+	                this.#pushArc(ring, chain.exit, next.entry);
+	                if (next === first)
+	                    break;
+	                chain = next;
+	            }
+	            result.push(ring);
+	        }
+	        return result;
+	    }
+	    /**
+	     * Appends points along the horizon circle, clockwise on screen (decreasing angle in the
+	     * y-up view frame) from angle a0 to a1.
+	     */
+	    #pushArc(result, a0, a1) {
+	        const delta = clockwiseDelta(a0, a1);
+	        const steps = Math.ceil(delta / (Math.PI / 90));
+	        const h = this.#horizonZ;
+	        const rho = Math.sqrt(1 - h * h);
+	        for (let s = 1; s < steps; s++) {
+	            const a = a0 - (delta * s) / steps;
+	            const v = [rho * Math.cos(a), rho * Math.sin(a), h];
+	            const [mx, my] = this.fromSphere(v);
+	            result.push(this.project(mx, my, v));
+	        }
+	    }
+	    /**
+	     * Splits a raster tile into a mesh of triangles, each small enough to be drawn with an
+	     * affine transform (see {@link RasterTriangle}). An affine transform is fully determined
+	     * by three points, so every triangle meets its projected corners exactly and neighbouring
+	     * triangles share their edges. Cells on the far side of the globe are dropped.
+	     */
+	    rasterTriangles(tile) {
+	        const tileSize = 1 / 2 ** tile.z;
+	        const maxLength = this.maxSegmentLength * Math.sqrt(MAX_RASTER_ERROR_PX / MAX_CURVE_ERROR_PX);
+	        const n = Math.max(1, Math.min(MAX_RASTER_CELLS, Math.ceil(tileSize / maxLength)));
+	        // Project the (n+1)² grid corners once.
+	        const corners = [];
+	        for (let j = 0; j <= n; j++) {
+	            for (let i = 0; i <= n; i++) {
+	                const mx = (tile.x + i / n) * tileSize;
+	                const my = (tile.y + j / n) * tileSize;
+	                let v = this.toSphere(mx, my);
+	                if (this.isVisible(v)) {
+	                    corners.push(this.project(mx, my, v));
+	                }
+	                else {
+	                    // Pull the corner onto the horizon, so cells at the silhouette end there.
+	                    if (this.#isBehind(v)) {
+	                        corners.push(undefined);
+	                        continue;
+	                    }
+	                    v = this.#clampToHorizon(v);
+	                    const [cx, cy] = this.fromSphere(v);
+	                    corners.push(this.project(cx, cy, v));
+	                }
+	            }
+	        }
+	        const triangles = [];
+	        for (let j = 0; j < n; j++) {
+	            for (let i = 0; i < n; i++) {
+	                const p00 = corners[j * (n + 1) + i];
+	                const p10 = corners[j * (n + 1) + i + 1];
+	                const p01 = corners[(j + 1) * (n + 1) + i];
+	                const p11 = corners[(j + 1) * (n + 1) + i + 1];
+	                if (!p00 || !p10 || !p01 || !p11)
+	                    continue;
+	                const minX = Math.min(p00.x, p10.x, p01.x, p11.x);
+	                const maxX = Math.max(p00.x, p10.x, p01.x, p11.x);
+	                const minY = Math.min(p00.y, p10.y, p01.y, p11.y);
+	                const maxY = Math.max(p00.y, p10.y, p01.y, p11.y);
+	                if (maxX < 0 || minX > this.width || maxY < 0 || minY > this.height)
+	                    continue;
+	                if (!this.#isCellVisible(tile, n, i, j))
+	                    continue;
+	                const u0 = i / n;
+	                const v0 = j / n;
+	                const u1 = (i + 1) / n;
+	                const v1 = (j + 1) / n;
+	                triangles.push({
+	                    source: [
+	                        [u0, v0],
+	                        [u1, v0],
+	                        [u1, v1],
+	                    ],
+	                    target: [
+	                        [p00.x, p00.y],
+	                        [p10.x, p10.y],
+	                        [p11.x, p11.y],
+	                    ],
+	                }, {
+	                    source: [
+	                        [u0, v0],
+	                        [u1, v1],
+	                        [u0, v1],
+	                    ],
+	                    target: [
+	                        [p00.x, p00.y],
+	                        [p11.x, p11.y],
+	                        [p01.x, p01.y],
+	                    ],
+	                });
+	            }
+	        }
+	        return triangles;
+	    }
+	    /** Whether any part of a raster cell is on the visible side of the globe. */
+	    #isCellVisible(tile, n, i, j) {
+	        if (!this.clipsHorizon)
+	            return true;
+	        const tileSize = 1 / 2 ** tile.z;
+	        for (let dj = 0; dj <= 2; dj++) {
+	            for (let di = 0; di <= 2; di++) {
+	                const mx = (tile.x + (i + di / 2) / n) * tileSize;
+	                const my = (tile.y + (j + dj / 2) / n) * tileSize;
+	                if (this.isVisible(this.toSphere(mx, my)))
+	                    return true;
+	            }
+	        }
+	        return false;
+	    }
+	    /** Moves a point on the far side of the globe onto the horizon (keeping its direction on screen). */
+	    #clampToHorizon(v) {
+	        const h = this.#horizonZ;
+	        const rho = Math.sqrt(1 - h * h);
+	        const len = Math.hypot(v[0], v[1]);
+	        if (len < 1e-12)
+	            return [rho, 0, h];
+	        return [(v[0] / len) * rho, (v[1] / len) * rho, h];
+	    }
+	    /** Points almost opposite the view direction have no meaningful place on the horizon. */
+	    #isBehind(v) {
+	        return Math.hypot(v[0], v[1]) < 1e-9;
+	    }
+	    /**
+	     * Tiles at zoom level `z` that are visible on screen, found by walking down the tile
+	     * pyramid and projecting a grid of sample points of each tile.
+	     */
+	    coveringTiles(z) {
+	        const result = [];
+	        const visit = (tz, tx, ty) => {
+	            if (tz >= 2 && !this.#isTileVisible(tz, tx, ty))
+	                return;
+	            if (tz === z) {
+	                result.push({ x: tx, y: ty, z: tz });
+	                return;
+	            }
+	            for (let dy = 0; dy < 2; dy++) {
+	                for (let dx = 0; dx < 2; dx++)
+	                    visit(tz + 1, tx * 2 + dx, ty * 2 + dy);
+	            }
+	        };
+	        visit(0, 0, 0);
+	        return result;
+	    }
+	    /**
+	     * Whether a tile, including a margin around it (the tile buffer, as a fraction of the tile
+	     * size), lies completely on the visible side of the globe, so no horizon clipping happens.
+	     */
+	    isTileFullyVisible(tile, margin = 0.1) {
+	        if (!this.clipsHorizon)
+	            return true;
+	        const size = 1 / 2 ** tile.z;
+	        const samples = 8;
+	        for (let j = 0; j <= samples; j++) {
+	            for (let i = 0; i <= samples; i++) {
+	                if (i !== 0 && i !== samples && j !== 0 && j !== samples)
+	                    continue; // the border only
+	                const mx = (tile.x - margin + ((1 + 2 * margin) * i) / samples) * size;
+	                const my = (tile.y - margin + ((1 + 2 * margin) * j) / samples) * size;
+	                if (!this.isVisible(this.toSphere(mx, my)))
+	                    return false;
+	            }
+	        }
+	        return true;
+	    }
+	    #isTileVisible(z, x, y) {
+	        const samples = 6;
+	        const size = 1 / 2 ** z;
+	        let minX = Infinity;
+	        let minY = Infinity;
+	        let maxX = -Infinity;
+	        let maxY = -Infinity;
+	        const addSample = (mx, my) => {
+	            const v = this.toSphere(mx, my);
+	            if (!this.isVisible(v))
+	                return;
+	            const p = this.project(mx, my, v);
+	            if (p.x < minX)
+	                minX = p.x;
+	            if (p.y < minY)
+	                minY = p.y;
+	            if (p.x > maxX)
+	                maxX = p.x;
+	            if (p.y > maxY)
+	                maxY = p.y;
+	        };
+	        for (let j = 0; j <= samples; j++) {
+	            for (let i = 0; i <= samples; i++)
+	                addSample((x + i / samples) * size, (y + j / samples) * size);
+	        }
+	        // Zoomed in, the visible part of the globe can be much smaller than the sample spacing.
+	        // So also sample the point of the tile closest to the map center.
+	        const x0 = x * size;
+	        const centerX = this.#centerX - Math.round(this.#centerX - (x0 + size / 2));
+	        addSample(clamp(centerX, x0, x0 + size), clamp(this.#centerY, y * size, (y + 1) * size));
+	        // A generous margin: the samples may miss the part of the tile at the silhouette.
+	        const margin = Math.max(maxX - minX, maxY - minY) / samples + 1;
+	        return (minX - margin <= this.width &&
+	            maxX + margin >= 0 &&
+	            minY - margin <= this.height &&
+	            maxY + margin >= 0);
+	    }
+	}
+	function clamp(value, min, max) {
+	    return Math.min(max, Math.max(min, value));
+	}
+
 	function resolveTokens(text, properties) {
 	    return text.replace(/\{([^}]+)\}/g, (_, key) => {
 	        const value = properties[key];
@@ -10512,6 +11546,16 @@
 	    });
 	}
 	async function renderMap(job) {
+	    job.projection ??= Projection.fromStyle({
+	        width: job.renderer.width,
+	        height: job.renderer.height,
+	        center: job.view.center,
+	        zoom: job.view.zoom,
+	        projection: job.style.projection,
+	    });
+	    const clipCircle = job.projection.clipCircle;
+	    if (clipCircle)
+	        job.renderer.setClipCircle?.(clipCircle);
 	    await render(job);
 	    return job.renderer.getString();
 	}