@versatiles/svg-renderer 1.1.0 → 2.0.0-rc.0

package/dist/index.js

@@ -310,10 +310,7 @@ var v8_default = {
 			"type": "enum",
 			"values": { "image": {} }
 		},
-		"url": {
-			"required": true,
-			"type": "string"
-		},
+		"url": { "type": "string" },
 		"coordinates": {
 			"required": true,
 			"type": "array",
@@ -653,9 +650,9 @@ var v8_default = {
 			"requires": ["icon-image"],
 			"expression": {
 				"interpolated": false,
-				"parameters": ["zoom"]
+				"parameters": ["zoom", "feature"]
 			},
-			"property-type": "data-constant"
+			"property-type": "data-driven"
 		},
 		"icon-size": {
 			"type": "number",
@@ -1116,6 +1113,31 @@ var v8_default = {
 			},
 			"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": {
@@ -1591,7 +1613,6 @@ var v8_default = {
 		"fill-extrusion-height": {
 			"type": "number",
 			"default": 0,
-			"minimum": 0,
 			"units": "meters",
 			"transition": true,
 			"expression": {
@@ -1607,7 +1628,6 @@ var v8_default = {
 		"fill-extrusion-base": {
 			"type": "number",
 			"default": 0,
-			"minimum": 0,
 			"units": "meters",
 			"transition": true,
 			"requires": ["fill-extrusion-height"],
@@ -2642,44 +2662,10 @@ var v8_default = {
 		}
 	}
 };
-//#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" };
@@ -2775,7 +2761,7 @@ function verifyType(provided, sample) {
 	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;
@@ -2870,7 +2856,7 @@ function hslToRgb([h, s, l, alpha]) {
 		alpha
 	];
 }
-//#endregion
+
 //#region src/util/get_own.ts
 const hasOwnProperty = Object.hasOwn || function hasOwnProperty(object, key) {
 	return Object.prototype.hasOwnProperty.call(object, key);
@@ -2878,7 +2864,7 @@ const hasOwnProperty = Object.hasOwn || function hasOwnProperty(object, key) {
 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.
@@ -2957,9 +2943,9 @@ function parseCssColor(input) {
 				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;
@@ -2979,8 +2965,8 @@ function parseCssColor(input) {
 		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);
@@ -2991,9 +2977,9 @@ function parseHex(hex) {
 	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);
 }
 /**
@@ -3756,7 +3742,7 @@ const namedColors = {
 		50
 	]
 };
-//#endregion
+
 //#region src/util/interpolate-primitives.ts
 function interpolateNumber(from, to, t) {
 	return from + t * (to - from);
@@ -3766,7 +3752,7 @@ function interpolateArray(from, to, t) {
 		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.
@@ -3950,26 +3936,7 @@ var Color$1 = class Color {
 		}
 	}
 };
-//#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",
@@ -4006,7 +3973,7 @@ var Formatted = class Formatted {
 		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
@@ -4050,14 +4017,12 @@ var Padding = class Padding {
 					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);
 	}
@@ -4068,7 +4033,7 @@ var Padding = class Padding {
 		return new Padding(interpolateArray(from.values, to.values, t));
 	}
 };
-//#endregion
+
 //#region src/expression/types/number_array.ts
 /**
 * An array of numbers. Create instances from
@@ -4098,7 +4063,7 @@ var NumberArray = class NumberArray {
 		return new NumberArray(interpolateArray(from.values, to.values, t));
 	}
 };
-//#endregion
+
 //#region src/expression/types/color_array.ts
 /**
 * An array of colors. Create instances from
@@ -4141,7 +4106,7 @@ var ColorArray = class ColorArray {
 		return new ColorArray(colors);
 	}
 };
-//#endregion
+
 //#region src/expression/runtime_error.ts
 var RuntimeError = class extends Error {
 	constructor(message, path) {
@@ -4153,7 +4118,7 @@ var RuntimeError = class extends Error {
 		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([
@@ -4205,7 +4170,7 @@ var VariableAnchorOffsetCollection = class VariableAnchorOffsetCollection {
 		return new VariableAnchorOffsetCollection(output);
 	}
 };
-//#endregion
+
 //#region src/expression/types/resolved_image.ts
 var ResolvedImage = class ResolvedImage {
 	constructor(options) {
@@ -4223,7 +4188,7 @@ var ResolvedImage = class ResolvedImage {
 		});
 	}
 };
-//#endregion
+
 //#region src/expression/types/projection_definition.ts
 var ProjectionDefinition = class ProjectionDefinition {
 	constructor(from, to, transition) {
@@ -4249,7 +4214,26 @@ var ProjectionDefinition = class ProjectionDefinition {
 		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" ? [
@@ -4316,7 +4300,7 @@ function valueToString(value) {
 	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) {
@@ -4325,7 +4309,7 @@ var Literal = class Literal {
 	}
 	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;
@@ -4340,86 +4324,525 @@ var Literal = class Literal {
 		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) {
@@ -4515,177 +4938,13 @@ var Coercion = class Coercion {
 		}
 	}
 	eachChild(fn) {
-		this.args.forEach(fn);
-	}
-	outputDefined() {
-		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));
+		this.args.forEach(fn);
 	}
-	/**
-	* 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;
+	outputDefined() {
+		return this.args.every((arg) => arg.outputDefined());
 	}
 };
-//#endregion
+
 //#region src/expression/definitions/let.ts
 var Let = class Let {
 	constructor(bindings, result) {
@@ -4719,7 +4978,7 @@ var Let = class Let {
 		return this.result.outputDefined();
 	}
 };
-//#endregion
+
 //#region src/expression/definitions/var.ts
 var Var = class Var {
 	constructor(name, boundExpression) {
@@ -4741,7 +5000,7 @@ var Var = class Var {
 		return false;
 	}
 };
-//#endregion
+
 //#region src/expression/definitions/at.ts
 var At = class At {
 	constructor(type, index, input, key) {
@@ -4774,7 +5033,7 @@ var At = class At {
 		return false;
 	}
 };
-//#endregion
+
 //#region src/expression/definitions/in.ts
 var In = class In {
 	constructor(needle, haystack, key) {
@@ -4818,7 +5077,7 @@ var In = class In {
 		return true;
 	}
 };
-//#endregion
+
 //#region src/expression/definitions/index_of.ts
 var IndexOf = class IndexOf {
 	constructor(needle, haystack, key, fromIndex) {
@@ -4873,7 +5132,7 @@ var IndexOf = class IndexOf {
 		return false;
 	}
 };
-//#endregion
+
 //#region src/expression/definitions/match.ts
 var Match = class Match {
 	constructor(inputType, outputType, input, cases, outputs, otherwise) {
@@ -4932,7 +5191,7 @@ var Match = class Match {
 		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) {
@@ -4954,344 +5213,71 @@ var Case = class Case {
 			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]);
-		}
-		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) {
@@ -5336,7 +5322,7 @@ var Coalesce = class Coalesce {
 		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";
@@ -5459,7 +5445,7 @@ const LessThan = makeComparison("<", lt, ltCollate);
 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) {
@@ -5495,7 +5481,7 @@ var CollatorExpression = class CollatorExpression {
 		return false;
 	}
 };
-//#endregion
+
 //#region src/expression/definitions/number_format.ts
 var NumberFormat = class NumberFormat {
 	constructor(number, locale, currency, unit, minFractionDigits, maxFractionDigits) {
@@ -5507,143 +5493,62 @@ var NumberFormat = class NumberFormat {
 		this.minFractionDigits = minFractionDigits;
 		this.maxFractionDigits = maxFractionDigits;
 	}
-	static parse(args, context) {
-		if (args.length !== 3) return context.error("Expected two arguments.");
-		const number = context.parse(args[1], 1, NumberType);
-		if (!number) return null;
-		const options = args[2];
-		if (typeof options !== "object" || Array.isArray(options)) return context.error("NumberFormat options argument must be an object.");
-		let locale = null;
-		if (options["locale"]) {
-			locale = context.parse(options["locale"], 1, StringType);
-			if (!locale) return null;
-		}
-		let currency = null;
-		if (options["currency"]) {
-			currency = context.parse(options["currency"], 1, StringType);
-			if (!currency) return null;
-		}
-		let unit = null;
-		if (options["unit"]) {
-			unit = context.parse(options["unit"], 1, StringType);
-			if (!unit) return null;
-		}
-		if (currency && unit) return context.error("NumberFormat options `currency` and `unit` are mutually exclusive");
-		let minFractionDigits = null;
-		if (options["min-fraction-digits"]) {
-			minFractionDigits = context.parse(options["min-fraction-digits"], 1, NumberType);
-			if (!minFractionDigits) return null;
-		}
-		let maxFractionDigits = null;
-		if (options["max-fraction-digits"]) {
-			maxFractionDigits = context.parse(options["max-fraction-digits"], 1, NumberType);
-			if (!maxFractionDigits) return null;
-		}
-		return new NumberFormat(number, locale, currency, unit, minFractionDigits, maxFractionDigits);
-	}
-	evaluate(ctx) {
-		return new Intl.NumberFormat(this.locale ? this.locale.evaluate(ctx) : [], {
-			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
-				});
-			}
+	static parse(args, context) {
+		if (args.length !== 3) return context.error("Expected two arguments.");
+		const number = context.parse(args[1], 1, NumberType);
+		if (!number) return null;
+		const options = args[2];
+		if (typeof options !== "object" || Array.isArray(options)) return context.error("NumberFormat options argument must be an object.");
+		let locale = null;
+		if (options["locale"]) {
+			locale = context.parse(options["locale"], 1, StringType);
+			if (!locale) return null;
 		}
-		return new FormatExpression(sections);
+		let currency = null;
+		if (options["currency"]) {
+			currency = context.parse(options["currency"], 1, StringType);
+			if (!currency) return null;
+		}
+		let unit = null;
+		if (options["unit"]) {
+			unit = context.parse(options["unit"], 1, StringType);
+			if (!unit) return null;
+		}
+		if (currency && unit) return context.error("NumberFormat options `currency` and `unit` are mutually exclusive");
+		let minFractionDigits = null;
+		if (options["min-fraction-digits"]) {
+			minFractionDigits = context.parse(options["min-fraction-digits"], 1, NumberType);
+			if (!minFractionDigits) return null;
+		}
+		let maxFractionDigits = null;
+		if (options["max-fraction-digits"]) {
+			maxFractionDigits = context.parse(options["max-fraction-digits"], 1, NumberType);
+			if (!maxFractionDigits) return null;
+		}
+		return new NumberFormat(number, locale, currency, unit, minFractionDigits, maxFractionDigits);
 	}
 	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));
+		return new Intl.NumberFormat(this.locale ? this.locale.evaluate(ctx) : [], {
+			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) {
-		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);
-		}
+		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) {
@@ -5669,7 +5574,7 @@ var ImageExpression = class ImageExpression {
 		return false;
 	}
 };
-//#endregion
+
 //#region src/expression/definitions/length.ts
 var Length = class Length {
 	constructor(input, key) {
@@ -5697,7 +5602,7 @@ var Length = class Length {
 		return false;
 	}
 };
-//#endregion
+
 //#region src/util/geometry_util.ts
 const EXTENT = 8192;
 function getTileCoordinates(p, canonical) {
@@ -5793,7 +5698,7 @@ function twoSided(p1, p2, q1, q2) {
 	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 = [];
@@ -5955,7 +5860,7 @@ var Within = class Within {
 		return true;
 	}
 };
-//#endregion
+
 //#region node_modules/tinyqueue/index.js
 var TinyQueue = class {
 	constructor(data = [], compare = (a, b) => a < b ? -1 : a > b ? 1 : 0) {
@@ -6008,54 +5913,10 @@ var TinyQueue = class {
 		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) {
@@ -6064,7 +5925,7 @@ var CheapRuler = class {
 		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.
@@ -6135,7 +5996,7 @@ var CheapRuler = class {
 		return deg;
 	}
 };
-//#endregion
+
 //#region src/expression/definitions/distance.ts
 const MinPointsSize = 100;
 const MinLinePointsSize = 50;
@@ -6403,9 +6264,7 @@ function pointToGeometryDistance(ctx, geometries) {
 			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;
 	}
@@ -6425,9 +6284,7 @@ function lineStringToGeometryDistance(ctx, geometries) {
 			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;
 	}
@@ -6451,9 +6308,7 @@ function polygonToGeometryDistance(ctx, geometries) {
 			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;
 	}
@@ -6509,72 +6364,270 @@ var Distance = class Distance {
 		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) {
 		this.key = key;
 		this.type = ValueType;
 	}
-	static parse(args, context) {
-		if (args.length !== 2) return context.error(`Expected 1 argument, but found ${args.length - 1} instead.`);
-		const key = args[1];
-		if (key === void 0 || key === null) return context.error("Global state property must be defined.");
-		if (typeof key !== "string") return context.error(`Global state property must be string, but found ${typeof args[1]} instead.`);
-		return new GlobalState(key);
+	static parse(args, context) {
+		if (args.length !== 2) return context.error(`Expected 1 argument, but found ${args.length - 1} instead.`);
+		const key = args[1];
+		if (key === void 0 || key === null) return context.error("Global state property must be defined.");
+		if (typeof key !== "string") return context.error(`Global state property must be string, but found ${typeof args[1]} instead.`);
+		return new GlobalState(key);
+	}
+	evaluate(ctx) {
+		const globalState = ctx.globals?.globalState;
+		if (!globalState || Object.keys(globalState).length === 0) return null;
+		return getOwn(globalState, this.key) ?? null;
+	}
+	eachChild() {}
+	outputDefined() {
+		return false;
+	}
+};
+
+//#region src/expression/definitions/index.ts
+const expressions = {
+	"==": Equals,
+	"!=": NotEquals,
+	">": GreaterThan,
+	"<": LessThan,
+	">=": GreaterThanOrEqual,
+	"<=": LessThanOrEqual,
+	array: Assertion,
+	at: At,
+	boolean: Assertion,
+	case: Case,
+	coalesce: Coalesce,
+	collator: CollatorExpression,
+	format: FormatExpression,
+	image: ImageExpression,
+	in: In,
+	"index-of": IndexOf,
+	interpolate: Interpolate,
+	"interpolate-hcl": Interpolate,
+	"interpolate-lab": Interpolate,
+	length: Length,
+	let: Let,
+	literal: Literal,
+	match: Match,
+	number: Assertion,
+	"number-format": NumberFormat,
+	object: Assertion,
+	semiliteral: Semiliteral,
+	slice: Slice,
+	step: Step,
+	string: Assertion,
+	"to-boolean": Coercion,
+	"to-color": Coercion,
+	"to-number": Coercion,
+	"to-string": Coercion,
+	var: Var,
+	within: Within,
+	distance: Distance,
+	"global-state": GlobalState
+};
+
+//#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);
 	}
-	evaluate(ctx) {
-		const globalState = ctx.globals?.globalState;
-		if (!globalState || Object.keys(globalState).length === 0) return null;
-		return getOwn(globalState, this.key) ?? null;
+	/**
+	* 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));
 	}
-	eachChild() {}
-	outputDefined() {
-		return false;
+	/**
+	* 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/index.ts
-const expressions = {
-	"==": Equals,
-	"!=": NotEquals,
-	">": GreaterThan,
-	"<": LessThan,
-	">=": GreaterThanOrEqual,
-	"<=": LessThanOrEqual,
-	array: Assertion,
-	at: At,
-	boolean: Assertion,
-	case: Case,
-	coalesce: Coalesce,
-	collator: CollatorExpression,
-	format: FormatExpression,
-	image: ImageExpression,
-	in: In,
-	"index-of": IndexOf,
-	interpolate: Interpolate,
-	"interpolate-hcl": Interpolate,
-	"interpolate-lab": Interpolate,
-	length: Length,
-	let: Let,
-	literal: Literal,
-	match: Match,
-	number: Assertion,
-	"number-format": NumberFormat,
-	object: Assertion,
-	slice: Slice,
-	step: Step,
-	string: Assertion,
-	"to-boolean": Coercion,
-	"to-color": Coercion,
-	"to-number": Coercion,
-	"to-string": Coercion,
-	var: Var,
-	within: Within,
-	distance: Distance,
-	"global-state": GlobalState
-};
-//#endregion
+
 //#region src/expression/compound_expression.ts
 var CompoundExpression = class CompoundExpression {
 	constructor(name, type, evaluate, args, key) {
@@ -7149,21 +7202,7 @@ function isGlobalPropertyConstant(e, properties) {
 	});
 	return result;
 }
-//#endregion
-//#region src/util/result.ts
-function success(value) {
-	return {
-		result: "success",
-		value
-	};
-}
-function error(value) {
-	return {
-		result: "error",
-		value
-	};
-}
-//#endregion
+
 //#region src/util/properties.ts
 function supportsPropertyExpression(spec) {
 	return spec["property-type"] === "data-driven" || spec["property-type"] === "cross-faded-data-driven";
@@ -7174,13 +7213,13 @@ function supportsZoomExpression(spec) {
 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";
@@ -7190,7 +7229,7 @@ function getType(val) {
 	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;
@@ -7288,21 +7327,21 @@ function createFunction(parameters, propertySpec) {
 		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];
@@ -7312,13 +7351,13 @@ function evaluateIntervalFunction(parameters, propertySpec, input) {
 }
 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;
@@ -7352,7 +7391,7 @@ function evaluateIdentityFunction(parameters, propertySpec, input) {
 			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
@@ -7392,14 +7431,28 @@ function evaluateIdentityFunction(parameters, propertySpec, input) {
 *
 * @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) {
@@ -7681,7 +7734,7 @@ function addGlobalState(globals, globalState) {
 		globalState
 	};
 }
-//#endregion
+
 //#region src/feature_filter/index.ts
 function classifyChildren(children) {
 	let sawLegacy = false;
@@ -7787,12 +7840,10 @@ function findMixedLegacyFilter(filter, path = []) {
 			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;
 }
@@ -7830,7 +7881,7 @@ function featureFilter(filter, rootKey, globalState) {
 		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(", "));
@@ -7849,13 +7900,13 @@ function geometryNeeded(filter) {
 	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];
@@ -7867,9 +7918,9 @@ function convertComparisonOp$1(property, value, op) {
 	}
 }
 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]];
@@ -7886,7 +7937,7 @@ function convertInOp$1(property, values) {
 		];
 	}
 }
-function convertHasOp$1(property) {
+function convertHasOp(property) {
 	switch (property) {
 		case "$type": return true;
 		case "$id": return ["filter-has-id"];
@@ -7963,6 +8014,10 @@ class Color {
     get rgb() {
         return `#${d2h(this.values[0])}${d2h(this.values[1])}${d2h(this.values[2])}`;
     }
+    /** The red, green and blue components as bytes, for painting pixels directly. */
+    get rgbBytes() {
+        return [this.values[0], this.values[1], this.values[2]];
+    }
     get opacity() {
         return this.values[3] / 255;
     }
@@ -8181,6 +8236,133 @@ function formatNum(tenths) {
     return (negative ? '-' : '') + String(whole) + '.' + String(frac);
 }
 
+/**
+ * Where a symbol sits relative to its point, shared by every backend so the two cannot
+ * drift apart. The text vocabulary is SVG's (`text-anchor` / `dominant-baseline`); the
+ * canvas backend translates it to `textAlign` / `textBaseline`.
+ */
+function mapTextAnchor(anchor) {
+    switch (anchor) {
+        case 'left':
+            return ['start', 'central'];
+        case 'right':
+            return ['end', 'central'];
+        case 'top':
+            return ['middle', 'text-before-edge'];
+        case 'bottom':
+            return ['middle', 'text-after-edge'];
+        case 'top-left':
+            return ['start', 'text-before-edge'];
+        case 'top-right':
+            return ['end', 'text-before-edge'];
+        case 'bottom-left':
+            return ['start', 'text-after-edge'];
+        case 'bottom-right':
+            return ['end', 'text-after-edge'];
+        default:
+            return ['middle', 'central'];
+    }
+}
+function mapIconAnchor(anchor, w, h) {
+    switch (anchor) {
+        case 'left':
+            return [0, -h / 2];
+        case 'right':
+            return [-w, -h / 2];
+        case 'top':
+            return [-w / 2, 0];
+        case 'bottom':
+            return [-w / 2, -h];
+        case 'top-left':
+            return [0, 0];
+        case 'top-right':
+            return [-w, 0];
+        case 'bottom-left':
+            return [0, -h];
+        case 'bottom-right':
+            return [-w, -h];
+        default:
+            return [-w / 2, -h / 2];
+    }
+}
+
+/** 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]);
+}
+
 // line-blur approximates MapLibre's edge-feather blur, which keeps an opaque core
 // and feathers over ~`blur` px with a hard cutoff. feGaussianBlur alone conserves
 // total ink and leaves soft, infinite tails, so we combine three corrections,
@@ -8202,21 +8384,29 @@ class SVGRenderer {
     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)
@@ -8224,9 +8414,11 @@ class SVGRenderer {
         // 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;
@@ -8241,37 +8433,48 @@ class SVGRenderer {
             // 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);
+                    }
                 }
             }
         });
@@ -8279,8 +8482,9 @@ class SVGRenderer {
         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>');
     }
@@ -8288,7 +8492,12 @@ class SVGRenderer {
         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]) => {
@@ -8323,7 +8532,8 @@ class SVGRenderer {
                 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),
@@ -8336,8 +8546,9 @@ class SVGRenderer {
                 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) => {
@@ -8346,7 +8557,13 @@ class SVGRenderer {
             });
         });
         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} />`);
@@ -8603,20 +8820,77 @@ class SVGRenderer {
             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)
                 attrs += ' style="image-rendering:pixelated"';
             this.#svg.push(`<image ${attrs} />`);
         }
-        this.#svg.push('</g>');
+        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)}" />`);
         }
@@ -8643,9 +8917,6 @@ class SVGRenderer {
             `<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');
     }
@@ -8665,6 +8936,9 @@ function strokeAttr(color, width) {
 function formatScaled(v) {
     return formatNum(Math.round(v * 10));
 }
+function formatUnit(v) {
+    return (Math.round(v * 100000) / 100000).toString();
+}
 function formatScale(v) {
     return (Math.round(v * 10000) / 10000).toString();
 }
@@ -8675,50 +8949,6 @@ function formatPoint(p) {
     const [x, y] = roundXY(p[0], p[1]);
     return formatNum(x) + ',' + formatNum(y);
 }
-function mapTextAnchor(anchor) {
-    switch (anchor) {
-        case 'left':
-            return ['start', 'central'];
-        case 'right':
-            return ['end', 'central'];
-        case 'top':
-            return ['middle', 'text-before-edge'];
-        case 'bottom':
-            return ['middle', 'text-after-edge'];
-        case 'top-left':
-            return ['start', 'text-before-edge'];
-        case 'top-right':
-            return ['end', 'text-before-edge'];
-        case 'bottom-left':
-            return ['start', 'text-after-edge'];
-        case 'bottom-right':
-            return ['end', 'text-after-edge'];
-        default:
-            return ['middle', 'central'];
-    }
-}
-function mapIconAnchor(anchor, w, h) {
-    switch (anchor) {
-        case 'left':
-            return [0, -h / 2];
-        case 'right':
-            return [-w, -h / 2];
-        case 'top':
-            return [-w / 2, 0];
-        case 'bottom':
-            return [-w / 2, -h];
-        case 'top-left':
-            return [0, 0];
-        case 'top-right':
-            return [-w, 0];
-        case 'bottom-left':
-            return [0, -h];
-        case 'bottom-right':
-            return [-w, -h];
-        default:
-            return [-w / 2, -h / 2];
-    }
-}
 function escapeXml(s) {
     return s
         .replace(/&/g, '&amp;')
@@ -8758,6 +8988,12 @@ class Feature {
     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;
@@ -8765,6 +9001,7 @@ class Feature {
         this.properties = opt.properties;
         this.patterns = opt.patterns;
         this.geometry = opt.geometry;
+        this.outline = opt.outline;
     }
     getBbox() {
         if (this.#bbox)
@@ -9859,6 +10096,138 @@ function readUtf8(buf, pos, end) {
     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) {
@@ -9866,11 +10235,8 @@ async function loadVectorSource(source, job, layerFeatures) {
     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));
@@ -9882,9 +10248,6 @@ async function loadVectorSource(source, job, layerFeatures) {
             }
             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) {
@@ -9903,6 +10266,22 @@ async function loadVectorSource(source, job, layerFeatures) {
                         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) {
@@ -9920,6 +10299,7 @@ async function loadVectorSource(source, job, layerFeatures) {
                     const feature = new Feature({
                         type,
                         geometry,
+                        outline,
                         id: featureSrc.id,
                         properties: featureSrc.properties,
                     });
@@ -9930,9 +10310,41 @@ async function loadVectorSource(source, job, layerFeatures) {
         }
     }));
 }
+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: [],
@@ -9945,9 +10357,17 @@ function loadGeoJSONSource(options) {
         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 });
@@ -9958,7 +10378,10 @@ function loadGeoJSONSource(options) {
     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);
@@ -10001,23 +10424,23 @@ function loadGeoJSONSource(options) {
     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':
@@ -10041,6 +10464,22 @@ function loadGeoJSONSource(options) {
             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).
@@ -10078,6 +10517,23 @@ async function getRasterTiles(job, sourceName) {
         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);
@@ -10181,6 +10637,7 @@ async function getLayerFeatures(job) {
                         zoom,
                         center,
                         layerFeatures,
+                        projection: job.projection,
                     });
                 }
                 break;
@@ -10312,6 +10769,594 @@ function getLayerStyles(layers) {
     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];
@@ -10324,9 +11369,27 @@ function resolveTokens(text, properties) {
         return '';
     });
 }
-async function renderMap(job) {
+/**
+ * Draws the map described by `job` onto its renderer and returns that renderer, so a
+ * caller can take the result in whatever form the backend provides (see
+ * {@link renderMap} for the SVG string, or the PNG entry point for an image buffer).
+ */
+async function drawMap(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();
+    return job.renderer;
+}
+async function renderMap(job) {
+    return (await drawMap(job)).getString();
 }
 function getFeatures(layerFeatures, layerStyle) {
     return layerFeatures.get(layerStyle.sourceLayer) ?? layerFeatures.get(layerStyle.source);
@@ -10439,7 +11502,7 @@ async function render(job) {
             case 'raster':
                 {
                     const tiles = await getRasterTiles(job, layerStyle.source);
-                    renderer.drawRasterTiles(layerId, tiles, {
+                    await renderer.drawRasterTiles(layerId, tiles, {
                         opacity: getPaint('raster-opacity'),
                         hueRotate: getPaint('raster-hue-rotate'),
                         brightnessMin: getPaint('raster-brightness-min'),
@@ -10491,7 +11554,7 @@ async function render(job) {
                     if (symbolFeatures.length === 0)
                         continue;
                     // Render icons first (underneath text)
-                    renderer.drawIcons(`${layerId}-icons`, symbolFeatures.flatMap((feature) => {
+                    await renderer.drawIcons(`${layerId}-icons`, symbolFeatures.flatMap((feature) => {
                         const iconImage = getLayout('icon-image', feature);
                         const iconName = iconImage != null
                             ? resolveTokens(iconImage.toString(), feature.properties)
@@ -10555,6 +11618,61 @@ async function render(job) {
     }
 }
 
+/**
+ * Renders a MapLibre style to an SVG image.
+ *
+ * Fetches the vector and raster tiles the view needs, then draws every layer as SVG
+ * elements: fills and lines as paths, raster tiles and sprites as embedded images. The
+ * result is a single self-contained SVG document — it references no external files, so
+ * it can be saved, inlined into HTML or opened in a vector editor as is.
+ *
+ * Works in Node.js (22 or later) and in the browser. The same function is exported by
+ * `@versatiles/svg-renderer`, `@versatiles/png-renderer` and
+ * `@versatiles/maplibre-svg-export`; the examples import it from the first.
+ *
+ * @example Render a map in Node.js
+ * ```ts
+ * import { renderToSVG } from '@versatiles/svg-renderer';
+ * import { inlineSources, osm } from '@versatiles/style';
+ * import { writeFile } from 'node:fs/promises';
+ *
+ * // inlineSources() resolves the style's TileJSON sources into tile URLs,
+ * // which the renderer needs. Without it the map comes out empty.
+ * const style = await inlineSources(osm({ theme: 'colorful' }));
+ *
+ * const svg = await renderToSVG({
+ *   style,
+ *   width: 800,
+ *   height: 600,
+ *   lon: 13.4, // Berlin
+ *   lat: 52.52,
+ *   zoom: 12,
+ * });
+ *
+ * await writeFile('berlin.svg', svg);
+ * ```
+ *
+ * @example Render a hosted style in the browser
+ * ```ts
+ * import { renderToSVG } from '@versatiles/svg-renderer';
+ *
+ * // This hosted style already lists its tile URLs, so it can be used directly.
+ * const style = await fetch(
+ *   'https://tiles.versatiles.org/assets/styles/colorful/style.json',
+ * ).then((response) => response.json());
+ *
+ * document.body.innerHTML = await renderToSVG({ style, width: 800, height: 600, zoom: 3 });
+ * ```
+ *
+ * @example Include labels and icons
+ * ```ts
+ * const svg = await renderToSVG({ style, lon: 13.4, lat: 52.52, zoom: 14, renderLabels: true });
+ * ```
+ *
+ * @param options - What to render and how large. Only `style` is required.
+ * @returns The SVG document, as a string beginning with `<svg`.
+ * @throws If `width` or `height` is not positive.
+ */
 async function renderToSVG(options) {
     const width = options.width ?? 1024;
     const height = options.height ?? 1024;