framefields 2.0.10 → 2.1.0

package/dist/{dist-B9Afsv83.mjs → dist-fjKpBYkc.mjs}

@@ -573,7 +573,7 @@ var ProceduralSignalImpl = class {
 function signalBuilder(config) {
 	return new ProceduralSignalImpl(config);
 }
-function sineSignal(options = {}) {
+function periodicSignal(wave, options) {
 	const min = options.min;
 	const max = options.max;
 	let amplitude = options.amplitude ?? 1;
@@ -595,35 +595,15 @@ function sineSignal(options = {}) {
 				const freq = frequency ?? 1;
 				angle = 2 * Math.PI * freq * ctx.time + phase;
 			}
-			return offset + amplitude * Math.sin(angle);
+			return offset + amplitude * wave(angle);
 		}
 	});
 }
+function sineSignal(options = {}) {
+	return periodicSignal(Math.sin, options);
+}
 function cosineSignal(options = {}) {
-	const min = options.min;
-	const max = options.max;
-	let amplitude = options.amplitude ?? 1;
-	let offset = options.offset ?? 0;
-	if (min !== void 0 && max !== void 0) {
-		offset = (min + max) / 2;
-		amplitude = (max - min) / 2;
-	} else if (min !== void 0) offset = min + amplitude;
-	else if (max !== void 0) offset = max - amplitude;
-	const period = options.period;
-	const frequency = options.frequency;
-	const phase = options.phase ?? 0;
-	return signalBuilder({
-		type: "custom",
-		fn: (ctx) => {
-			let angle;
-			if (period !== void 0 && period > 0) angle = 2 * Math.PI * ctx.frame / period + phase;
-			else {
-				const freq = frequency ?? 1;
-				angle = 2 * Math.PI * freq * ctx.time + phase;
-			}
-			return offset + amplitude * Math.cos(angle);
-		}
-	});
+	return periodicSignal(Math.cos, options);
 }
 const Signal = {
 	state: signal,
@@ -1294,6 +1274,11 @@ const VideoTextPropsSchema = z.object({
 	fontWeight: z.union([z.number(), z.string()]).optional(),
 	fill: z.string().optional(),
 	align: z.string().optional(),
+	direction: z.enum([
+		"ltr",
+		"rtl",
+		"auto"
+	]).optional(),
 	verticalAlign: z.string().optional(),
 	letterSpacing: z.number().optional(),
 	lineHeight: z.number().optional(),
@@ -1725,6 +1710,655 @@ function computeVideoCropRenderProps(virtualMedia) {
 		cropTranslatePercentageY: -(totalOffsetY / sourceH) * 100
 	};
 }
+const NAMED = {
+	transparent: "#00000000",
+	black: "#000000",
+	white: "#ffffff",
+	red: "#ff0000",
+	green: "#008000",
+	lime: "#00ff00",
+	blue: "#0000ff",
+	yellow: "#ffff00",
+	cyan: "#00ffff",
+	aqua: "#00ffff",
+	magenta: "#ff00ff",
+	fuchsia: "#ff00ff",
+	orange: "#ffa500",
+	purple: "#800080",
+	pink: "#ffc0cb",
+	gray: "#808080",
+	grey: "#808080",
+	silver: "#c0c0c0",
+	maroon: "#800000",
+	navy: "#000080",
+	teal: "#008080",
+	olive: "#808000",
+	gold: "#ffd700",
+	coral: "#ff7f50",
+	salmon: "#fa8072",
+	crimson: "#dc143c",
+	indigo: "#4b0082",
+	violet: "#ee82ee",
+	turquoise: "#40e0d0",
+	tomato: "#ff6347",
+	chocolate: "#d2691e",
+	tan: "#d2b48c",
+	beige: "#f5f5dc",
+	ivory: "#fffff0",
+	khaki: "#f0e68c",
+	lavender: "#e6e6fa",
+	mint: "#98ff98",
+	skyblue: "#87ceeb",
+	slategray: "#708090",
+	dimgray: "#696969",
+	lightgray: "#d3d3d3",
+	darkgray: "#a9a9a9",
+	whitesmoke: "#f5f5f5",
+	hotpink: "#ff69b4",
+	deeppink: "#ff1493",
+	dodgerblue: "#1e90ff",
+	royalblue: "#4169e1",
+	steelblue: "#4682b4",
+	midnightblue: "#191970",
+	limegreen: "#32cd32",
+	forestgreen: "#228b22",
+	seagreen: "#2e8b57",
+	darkorange: "#ff8c00",
+	orangered: "#ff4500",
+	firebrick: "#b22222",
+	rebeccapurple: "#663399"
+};
+const clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function parseHex(h) {
+	if (!/^[0-9a-f]+$/i.test(h)) return null;
+	const x = (i, n) => parseInt(n === 1 ? h[i] + h[i] : h.slice(i, i + 2), 16) / 255;
+	switch (h.length) {
+		case 3: return [
+			x(0, 1),
+			x(1, 1),
+			x(2, 1),
+			1
+		];
+		case 4: return [
+			x(0, 1),
+			x(1, 1),
+			x(2, 1),
+			x(3, 1)
+		];
+		case 6: return [
+			x(0, 2),
+			x(2, 2),
+			x(4, 2),
+			1
+		];
+		case 8: return [
+			x(0, 2),
+			x(2, 2),
+			x(4, 2),
+			x(6, 2)
+		];
+		default: return null;
+	}
+}
+/** Splits `rgb(1 2 3 / 50%)` or `rgb(1, 2, 3, .5)` into its argument tokens. */
+function fnArgs(body) {
+	return body.replace(/\s*\/\s*/, " ").split(/[\s,]+/).filter(Boolean);
+}
+/** A number, or a percentage scaled so 100% = `pct100`. */
+function num(tok, pct100) {
+	if (tok === void 0 || tok === "none") return 0;
+	if (tok.endsWith("%")) return parseFloat(tok) / 100 * pct100;
+	return parseFloat(tok);
+}
+function hue(tok) {
+	if (tok === void 0) return 0;
+	if (tok.endsWith("turn")) return parseFloat(tok) * 360;
+	if (tok.endsWith("rad")) return parseFloat(tok) * 180 / Math.PI;
+	return parseFloat(tok);
+}
+function alpha(tok) {
+	return tok === void 0 ? 1 : clamp01(num(tok, 1));
+}
+function hslToRgb(h, s, l) {
+	const a = s * Math.min(l, 1 - l);
+	const f = (n) => {
+		const k = (n + h / 30) % 12;
+		return l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
+	};
+	return [
+		f(0),
+		f(8),
+		f(4)
+	];
+}
+const toLinear = (c) => c <= .04045 ? c / 12.92 : ((c + .055) / 1.055) ** 2.4;
+const toGamma = (c) => c <= .0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - .055;
+/** sRGB (0..1) → OKLab [L, a, b]. */
+function rgbToOklab(r, g, b) {
+	const lr = toLinear(r);
+	const lg = toLinear(g);
+	const lb = toLinear(b);
+	const l = Math.cbrt(.4122214708 * lr + .5363325363 * lg + .0514459929 * lb);
+	const m = Math.cbrt(.2119034982 * lr + .6806995451 * lg + .1073969566 * lb);
+	const s = Math.cbrt(.0883024619 * lr + .2817188376 * lg + .6299787005 * lb);
+	return [
+		.2104542553 * l + .793617785 * m - .0040720468 * s,
+		1.9779984951 * l - 2.428592205 * m + .4505937099 * s,
+		.0259040371 * l + .7827717662 * m - .808675766 * s
+	];
+}
+/** OKLab → sRGB (0..1, clamped to gamut). */
+function oklabToRgb(L, a, b) {
+	const l = (L + .3963377774 * a + .2158037573 * b) ** 3;
+	const m = (L - .1055613458 * a - .0638541728 * b) ** 3;
+	const s = (L - .0894841775 * a - 1.291485548 * b) ** 3;
+	return [
+		clamp01(toGamma(4.0767416621 * l - 3.3077115913 * m + .2309699292 * s)),
+		clamp01(toGamma(-1.2684380046 * l + 2.6097574011 * m - .3413193965 * s)),
+		clamp01(toGamma(-.0041960863 * l - .7034186147 * m + 1.707614701 * s))
+	];
+}
+/**
+* Parses any CSS color this engine accepts: hex (3/4/6/8), `rgb()`/`rgba()`,
+* `hsl()`/`hsla()`, `oklch()`, `oklab()` (comma or space syntax, `/ alpha`)
+* and common named colors. Returns `null` when the string is not a color.
+*/
+function parseCssColor(input) {
+	const s = input.trim().toLowerCase();
+	if (!s) return null;
+	if (s.startsWith("#")) return parseHex(s.slice(1));
+	const named = NAMED[s];
+	if (named) return parseHex(named.slice(1));
+	const m = /^([a-z]+)\((.*)\)$/.exec(s);
+	if (!m) return null;
+	const [, fn, body] = m;
+	const t = fnArgs(body);
+	switch (fn) {
+		case "rgb":
+		case "rgba": return [
+			clamp01(num(t[0], 255) / 255),
+			clamp01(num(t[1], 255) / 255),
+			clamp01(num(t[2], 255) / 255),
+			alpha(t[3])
+		];
+		case "hsl":
+		case "hsla": {
+			const [r, g, b] = hslToRgb((hue(t[0]) % 360 + 360) % 360, clamp01(num(t[1], 100) / 100), clamp01(num(t[2], 100) / 100));
+			return [
+				r,
+				g,
+				b,
+				alpha(t[3])
+			];
+		}
+		case "oklch": {
+			const L = num(t[0], 1);
+			const C = num(t[1], .4);
+			const H = hue(t[2]) * Math.PI / 180;
+			const [r, g, b] = oklabToRgb(L, C * Math.cos(H), C * Math.sin(H));
+			return [
+				r,
+				g,
+				b,
+				alpha(t[3])
+			];
+		}
+		case "oklab": {
+			const [r, g, b] = oklabToRgb(num(t[0], 1), num(t[1], .4), num(t[2], .4));
+			return [
+				r,
+				g,
+				b,
+				alpha(t[3])
+			];
+		}
+		default: return null;
+	}
+}
+/** Formats straight sRGB as `#rrggbb` (or `#rrggbbaa` when translucent). */
+function formatHex([r, g, b, a]) {
+	const h = (v) => Math.round(clamp01(v) * 255).toString(16).padStart(2, "0");
+	return `#${h(r)}${h(g)}${h(b)}${a < .999 ? h(a) : ""}`;
+}
+const parseOr = (c) => parseCssColor(c) ?? [
+	0,
+	0,
+	0,
+	0
+];
+/**
+* Mixes two colors perceptually (in OKLab), `t` = 0 → `a`, 1 → `b`.
+* Midpoints keep their lightness and saturation instead of going muddy
+* the way a plain sRGB lerp does.
+*/
+function mixColors(a, b, t) {
+	const ca = parseOr(a);
+	const cb = parseOr(b);
+	const pa = ca[3] < 1e-4 ? cb : ca;
+	const pb = cb[3] < 1e-4 ? ca : cb;
+	const la = rgbToOklab(pa[0], pa[1], pa[2]);
+	const lb = rgbToOklab(pb[0], pb[1], pb[2]);
+	const k = clamp01(t);
+	const [r, g, bl] = oklabToRgb(la[0] + (lb[0] - la[0]) * k, la[1] + (lb[1] - la[1]) * k, la[2] + (lb[2] - la[2]) * k);
+	return formatHex([
+		r,
+		g,
+		bl,
+		ca[3] + (cb[3] - ca[3]) * k
+	]);
+}
+/** Samples a multi-stop gradient (stops in any order) at `t` ∈ [0, 1]. */
+function sampleColorStops(stops, t) {
+	const list = normalizeColorStops(stops);
+	if (list.length === 0) return "#00000000";
+	if (t <= list[0].offset) return list[0].color;
+	for (let i = 1; i < list.length; i++) {
+		const b = list[i];
+		if (t <= b.offset) {
+			const a = list[i - 1];
+			const span = b.offset - a.offset;
+			return mixColors(a.color, b.color, span > 0 ? (t - a.offset) / span : 1);
+		}
+	}
+	return list[list.length - 1].color;
+}
+/** Bare color strings become evenly spaced stops; result is sorted by offset. */
+function normalizeColorStops(stops) {
+	const n = stops.length;
+	return stops.map((s, i) => typeof s === "string" ? {
+		offset: n > 1 ? i / (n - 1) : 0,
+		color: s
+	} : {
+		offset: clamp01(s.offset),
+		color: s.color
+	}).sort((a, b) => a.offset - b.offset);
+}
+function oklchOf(c) {
+	const [r, g, b, a] = parseOr(c);
+	const [L, A, B] = rgbToOklab(r, g, b);
+	return [
+		L,
+		Math.hypot(A, B),
+		Math.atan2(B, A) * 180 / Math.PI,
+		a
+	];
+}
+function fromOklch(L, C, H, a) {
+	const h = H * Math.PI / 180;
+	const [r, g, b] = oklabToRgb(L, C * Math.cos(h), C * Math.sin(h));
+	return formatHex([
+		r,
+		g,
+		b,
+		a
+	]);
+}
+/**
+* Authoring helpers for colors. Every function returns a hex string, so the
+* result drops straight into any color prop or keyframe.
+*
+* ```ts
+* Color.oklch(0.7, 0.15, 250)          // perceptual: equal L reads equally bright
+* Color.hsl(212, 0.95, 0.74)
+* Color.mix("#ff5a1f", "#1f6bff", 0.5) // OKLab, no muddy midpoint
+* const wave = Color.ramp(["#3b82f6", "#8b5cf6", "#ec4899"]);
+* wave(0.5)                            // sample a gradient
+* Color.lighten("#ff5a1f", 0.1), Color.alpha("#000", 0.4)
+* ```
+*/
+const Color = {
+	parse: parseCssColor,
+	hex(c) {
+		return formatHex(parseOr(c));
+	},
+	rgb(r, g, b, a = 1) {
+		return formatHex([
+			r / 255,
+			g / 255,
+			b / 255,
+			a
+		]);
+	},
+	hsl(h, s, l, a = 1) {
+		const [r, g, b] = hslToRgb((h % 360 + 360) % 360, clamp01(s), clamp01(l));
+		return formatHex([
+			r,
+			g,
+			b,
+			a
+		]);
+	},
+	oklch(l, c, h, a = 1) {
+		return fromOklch(l, c, h, a);
+	},
+	mix: mixColors,
+	ramp(stops) {
+		const list = normalizeColorStops(stops);
+		return (t) => sampleColorStops(list, t);
+	},
+	steps(stops, n) {
+		const list = normalizeColorStops(stops);
+		return Array.from({ length: n }, (_, i) => sampleColorStops(list, n > 1 ? i / (n - 1) : 0));
+	},
+	lighten(c, amount) {
+		const [L, C, H, a] = oklchOf(c);
+		return fromOklch(clamp01(L + amount), C, H, a);
+	},
+	darken(c, amount) {
+		const [L, C, H, a] = oklchOf(c);
+		return fromOklch(clamp01(L - amount), C, H, a);
+	},
+	saturate(c, factor) {
+		const [L, C, H, a] = oklchOf(c);
+		return fromOklch(L, C * factor, H, a);
+	},
+	rotate(c, degrees) {
+		const [L, C, H, a] = oklchOf(c);
+		return fromOklch(L, C, H + degrees, a);
+	},
+	alpha(c, a) {
+		const [r, g, b] = parseOr(c);
+		return formatHex([
+			r,
+			g,
+			b,
+			clamp01(a)
+		]);
+	},
+	contrast(a, b) {
+		const lum = (c) => {
+			const [r, g, bl] = parseOr(c);
+			return .2126 * toLinear(r) + .7152 * toLinear(g) + .0722 * toLinear(bl);
+		};
+		const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x);
+		return (hi + .05) / (lo + .05);
+	},
+	readableOn(background) {
+		return Color.contrast(background, "#ffffff") >= Color.contrast(background, "#000000") ? "#ffffff" : "#000000";
+	}
+};
+/**
+* CSS gradients (`linear-gradient`, `radial-gradient`, `conic-gradient`) as
+* values for any `background` or shape `fill`, plus `Gradient` helpers that
+* write them. Colors blend perceptually (OKLab), not through muddy sRGB.
+*/
+/** Gradients this renderer draws at most this many stops (extra ones are resampled). */
+const MAX_GRADIENT_STOPS = 8;
+const GRADIENT_RE = /^\s*(linear|radial|conic)-gradient\(\s*([\s\S]*)\)\s*$/i;
+function isCssGradient(value) {
+	return typeof value === "string" && GRADIENT_RE.test(value);
+}
+/** Splits on commas that are not inside parentheses. */
+function splitTopLevel(s) {
+	const out = [];
+	let depth = 0;
+	let cur = "";
+	for (const ch of s) {
+		if (ch === "(") depth++;
+		if (ch === ")") depth--;
+		if (ch === "," && depth === 0) {
+			out.push(cur.trim());
+			cur = "";
+		} else cur += ch;
+	}
+	if (cur.trim()) out.push(cur.trim());
+	return out;
+}
+function parseAngle(tok) {
+	const m = /^(-?[\d.]+)(deg|turn|rad|grad)?$/i.exec(tok.trim());
+	if (!m) return null;
+	const v = parseFloat(m[1]);
+	switch ((m[2] ?? "deg").toLowerCase()) {
+		case "turn": return v * 360;
+		case "rad": return v * 180 / Math.PI;
+		case "grad": return v * .9;
+		default: return v;
+	}
+}
+const SIDE_ANGLES = {
+	top: 0,
+	right: 90,
+	bottom: 180,
+	left: 270,
+	"top right": 45,
+	"right top": 45,
+	"bottom right": 135,
+	"right bottom": 135,
+	"bottom left": 225,
+	"left bottom": 225,
+	"top left": 315,
+	"left top": 315
+};
+const POSITION_KEYWORDS = {
+	left: 0,
+	top: 0,
+	center: .5,
+	right: 1,
+	bottom: 1
+};
+/** `at 30% 70%`, `at left top`, `at center`. */
+function parsePosition(tokens) {
+	const vals = tokens.map((t) => t in POSITION_KEYWORDS ? {
+		v: POSITION_KEYWORDS[t],
+		axis: t === "top" || t === "bottom" ? "y" : t === "left" || t === "right" ? "x" : "any"
+	} : {
+		v: t.endsWith("%") ? parseFloat(t) / 100 : .5,
+		axis: "any"
+	});
+	let x = .5;
+	let y = .5;
+	if (vals.length === 1) if (vals[0].axis === "y") y = vals[0].v;
+	else x = vals[0].v;
+	else if (vals.length >= 2) if (vals[0].axis === "y" || vals[1].axis === "x") {
+		y = vals[0].v;
+		x = vals[1].v;
+	} else {
+		x = vals[0].v;
+		y = vals[1].v;
+	}
+	return [x, y];
+}
+/** Parses one `color [pos] [pos]` stop list entry; positions in 0..1 (or px later). */
+function parseStop(s) {
+	const m = /^((?:[a-z]+\([^)]*\))|#[0-9a-f]+|[a-z]+)\s*(.*)$/i.exec(s.trim());
+	if (!m) return null;
+	const color = parseCssColor(m[1]);
+	if (!color) return null;
+	const positions = [];
+	for (const p of m[2].split(/\s+/).filter(Boolean)) if (p.endsWith("%")) positions.push(parseFloat(p) / 100);
+	else if (p === "0") positions.push(0);
+	else if (/(deg|turn|rad|grad)$/i.test(p)) {
+		const a = parseAngle(p);
+		if (a !== null) positions.push(a / 360);
+	}
+	return {
+		color,
+		positions: positions.filter((p) => Number.isFinite(p))
+	};
+}
+/** CSS stop fixup: clamp ascending, spread unpositioned stops evenly. */
+function resolveStops(raw) {
+	const n = raw.length;
+	if (n === 0) return [];
+	const pos = raw.map((r) => r.position);
+	if (pos[0] === void 0) pos[0] = 0;
+	if (pos[n - 1] === void 0) pos[n - 1] = 1;
+	let maxSoFar = -Infinity;
+	for (let i = 0; i < n; i++) {
+		const p = pos[i];
+		if (p !== void 0) {
+			pos[i] = Math.max(p, maxSoFar);
+			maxSoFar = pos[i];
+		}
+	}
+	for (let i = 1; i < n; i++) {
+		if (pos[i] !== void 0) continue;
+		let j = i;
+		while (pos[j] === void 0) j++;
+		const a = pos[i - 1];
+		const b = pos[j];
+		for (let k = i; k < j; k++) pos[k] = a + (b - a) * (k - i + 1) / (j - i + 1);
+	}
+	return raw.map((r, i) => ({
+		offset: pos[i],
+		color: r.color
+	}));
+}
+const cache = /* @__PURE__ */ new Map();
+/** Parses a CSS gradient string; `null` when it is not one this engine draws. */
+function parseCssGradient(input) {
+	const hit = cache.get(input);
+	if (hit !== void 0) return hit;
+	const result = parseUncached(input);
+	if (cache.size > 512) cache.clear();
+	cache.set(input, result);
+	return result;
+}
+function parseUncached(input) {
+	const m = GRADIENT_RE.exec(input);
+	if (!m) return null;
+	const type = m[1].toLowerCase();
+	const parts = splitTopLevel(m[2]);
+	const g = {
+		type,
+		angle: 180,
+		center: [.5, .5],
+		shape: "ellipse",
+		from: 0,
+		stops: []
+	};
+	const first = parts[0]?.toLowerCase().trim() ?? "";
+	let consumedFirst = false;
+	if (type === "linear") if (first.startsWith("to ")) {
+		const side = first.slice(3).trim().replace(/\s+/g, " ");
+		if (side in SIDE_ANGLES) {
+			g.angle = SIDE_ANGLES[side];
+			consumedFirst = true;
+		}
+	} else {
+		const a = parseAngle(first);
+		if (a !== null) {
+			g.angle = a;
+			consumedFirst = true;
+		}
+	}
+	else {
+		const tokens = first.split(/\s+/).filter(Boolean);
+		const at = tokens.indexOf("at");
+		const before = at >= 0 ? tokens.slice(0, at) : tokens;
+		if (at >= 0 || before.some((t) => t === "circle" || t === "ellipse" || t === "from" || /^closest|^farthest/.test(t) || type === "radial" && /px$/.test(t))) {
+			consumedFirst = true;
+			if (at >= 0) g.center = parsePosition(tokens.slice(at + 1));
+			if (type === "radial") {
+				if (before.includes("circle")) g.shape = "circle";
+				const px = before.filter((t) => /px$/.test(t)).map((t) => parseFloat(t));
+				if (px.length === 1) {
+					g.shape = "circle";
+					g.radius = [px[0], px[0]];
+				} else if (px.length >= 2) g.radius = [px[0], px[1]];
+			} else {
+				const f = before.indexOf("from");
+				if (f >= 0 && before[f + 1]) g.from = parseAngle(before[f + 1]) ?? 0;
+			}
+		}
+	}
+	const raw = [];
+	for (const p of consumedFirst ? parts.slice(1) : parts) {
+		const stop = parseStop(p);
+		if (!stop) return null;
+		if (stop.positions.length === 0) raw.push({ color: stop.color });
+		for (const pos of stop.positions) raw.push({
+			color: stop.color,
+			position: pos
+		});
+	}
+	if (raw.length === 0) return null;
+	if (raw.length === 1) raw.push({ ...raw[0] });
+	g.stops = resolveStops(raw);
+	return g;
+}
+/** Up to MAX_GRADIENT_STOPS stops: longer lists are resampled evenly. */
+function limitGradientStops(stops) {
+	if (stops.length <= MAX_GRADIENT_STOPS) return stops;
+	const out = [];
+	const lo = stops[0].offset;
+	const hi = stops[stops.length - 1].offset;
+	for (let i = 0; i < MAX_GRADIENT_STOPS; i++) {
+		const t = lo + (hi - lo) * i / (MAX_GRADIENT_STOPS - 1);
+		let k = 1;
+		while (k < stops.length - 1 && stops[k].offset < t) k++;
+		const a = stops[k - 1];
+		const b = stops[k];
+		const span = b.offset - a.offset;
+		const f = span > 0 ? Math.min(1, Math.max(0, (t - a.offset) / span)) : 1;
+		out.push({
+			offset: t,
+			color: a.color.map((v, j) => v + (b.color[j] - v) * f)
+		});
+	}
+	return out;
+}
+/**
+* Stops as OKLab + alpha for the GPU. A transparent stop borrows its
+* neighbor's color, so fading to `transparent` keeps the hue instead of
+* passing through grey (CSS premultiplied interpolation does the same).
+*/
+function gradientStopsToOklab(stops) {
+	const lab = stops.map((s) => rgbToOklab(s.color[0], s.color[1], s.color[2]));
+	return stops.map((s, i) => {
+		let src = lab[i];
+		if (s.color[3] < 1e-4) {
+			const prev = stops.slice(0, i).reverse().findIndex((p) => p.color[3] > 1e-4);
+			const next = stops.slice(i + 1).findIndex((p) => p.color[3] > 1e-4);
+			const pi = prev >= 0 ? i - 1 - prev : -1;
+			const ni = next >= 0 ? i + 1 + next : -1;
+			if (pi >= 0 && ni >= 0) {
+				const a = lab[pi];
+				const b = lab[ni];
+				src = [
+					(a[0] + b[0]) / 2,
+					(a[1] + b[1]) / 2,
+					(a[2] + b[2]) / 2
+				];
+			} else if (pi >= 0) src = lab[pi];
+			else if (ni >= 0) src = lab[ni];
+		}
+		return [
+			src[0],
+			src[1],
+			src[2],
+			s.color[3]
+		];
+	});
+}
+function stopList(stops) {
+	return stops.map((s) => typeof s === "string" ? s : `${s.color} ${Math.round(s.offset * 1e4) / 100}%`).join(", ");
+}
+/**
+* Writes CSS gradient strings for `background` / `fill`:
+*
+* ```ts
+* Layer.box({ background: Gradient.linear(["#ff5a1f", "#7c3aed"], 135) })
+* Layer.shape("circle", { fill: Gradient.radial(["#fff", "transparent"]) })
+* Gradient.conic(["red", "yellow", "lime", "aqua", "blue", "magenta", "red"])
+* ```
+* Plain strings work too: `"linear-gradient(to right, #000, #fff 80%)"`.
+*/
+const Gradient = {
+	linear(stops, angle = 180) {
+		return `linear-gradient(${angle}deg, ${stopList(stops)})`;
+	},
+	radial(stops, options = {}) {
+		const at = options.at ?? [.5, .5];
+		return `radial-gradient(${options.radius !== void 0 ? `${options.radius}px` : options.circle ? "circle" : "ellipse"} at ${at[0] * 100}% ${at[1] * 100}%, ${stopList(stops)})`;
+	},
+	conic(stops, options = {}) {
+		const at = options.at ?? [.5, .5];
+		return `conic-gradient(from ${options.from ?? 0}deg at ${at[0] * 100}% ${at[1] * 100}%, ${stopList(stops)})`;
+	},
+	parse: parseCssGradient,
+	is: isCssGradient
+};
 /**
 * Performs a deep comparison between two values to determine if they are equivalent.
 * Handles primitives, objects, arrays, Dates, and NaNs.
@@ -1900,5 +2534,5 @@ function extractSvgDimensions(buffer) {
 }
 
 //#endregion
-export { VideoAnimationSchema as $, MediaSourceSchema as A, programmaticSignal as At, SignalChannelMetaSchema as B, signal as Bt, GeneratorSignalDataSchema as C, getLeafMediaType as Ct, MIME_TYPES as D, isEqual as Dt, JsonValueSchema as E, hasOnlySingleSource as Et, NodeResultSchema as F, resolveMediaMimeType as Ft, SingleOutputGenericSchema as G, timeSignal as Gt, SignalGateDataSchema as H, sineSignal as Ht, NodeVisualConfigSchema as I, resolveNumber as It, TextOperationSchema as J, SourceOperationSchema as K, updateClockSignals as Kt, OutputItemSchema as L, resolveParam as Lt, ModerationUnrefundableError as M, registerSignalDependency as Mt, MultiOutputGenericSchema as N, reportRenderDiagnostic as Nt, MediaMetadataSchema as O, isSignal as Ot, NodeMetadataSchema as P, resolveBoolean as Pt, TransitionTypeSchema as Q, ProgrammaticSignal as R, resolveString as Rt, FileDataSchema as S, getFingerprint as St, HandleTypeVal as T, getRenderFingerprint as Tt, SignalMathDataSchema as U, stampResult as Ut, SignalDataSchema as V, signalBuilder as Vt, SignalStatsSchema as W, takeRenderDiagnostics as Wt, TimelineTransformSchema as X, TimelineSegmentSchema as Y, TransitionSchema as Z, DataTypes as _, frameArraySignal as _t, BaseVideoLayerPropsSchema as a, VirtualMediaDataSchema as at, ExtendedLayerSchema as b, getActiveMediaMetadata as bt, COMPOSITOR_DEFAULTS as c, computeVideoCropRenderProps as ct, DATA_TYPE_EXTENSIONS as d, createOutputItemSchema as dt, VideoLayerTypeSchema as et, DEFAULT_DURATION_MS as f, createVirtualMedia as ft, DataTypeVal as g, findSourceAsset as gt, DataType as h, extractSvgDimensions as ht, BaseMediaOperationPropsSchema as i, VideoTimingPropsSchema as it, ModerationError as j, progressSignal as jt, MediaOperationSchema as k, isVirtualMediaData as kt, ConfigHandleSchema as l, computed as lt, DEFAULT_MEDIA_DIMENSION as m, deserializeSignalData as mt, AnyOutputUnionSchema as n, VideoStylePropsSchema as nt, CAPTION_LAYER_DEFAULTS as o, appendOperation as ot, DEFAULT_FPS as p, dataTypeColors as pt, TEXT_LAYER_DEFAULTS as q, AudioExtractorSignalDataSchema as r, VideoTextPropsSchema as rt, COMPOSITE_OPERATIONS as s, checkNodeResultCache as st, AnimationTypeSchema as t, VideoSpatialPropsSchema as tt, ConfigSchemaRegistry as u, cosineSignal as ut, Effect as v, frameSignal as vt, GlobalCompositeOperation as w, getMediaType as wt, FileAssetSchema as x, getFileDataMetadata as xt, ExportResultSchema as y, generateId as yt, Signal as z, serializeSignalData as zt };
-//# sourceMappingURL=dist-B9Afsv83.mjs.map
+export { TimelineTransformSchema as $, serializeSignalData as $t, MIME_TYPES as A, gradientStopsToOklab as At, OutputItemSchema as B, parseCssColor as Bt, FileDataSchema as C, generateId as Ct, HandleTypeVal as D, getLeafMediaType as Dt, Gradient as E, getFingerprint as Et, ModerationUnrefundableError as F, isVirtualMediaData as Ft, SignalGateDataSchema as G, reportRenderDiagnostic as Gt, Signal as H, programmaticSignal as Ht, MultiOutputGenericSchema as I, limitGradientStops as It, SingleOutputGenericSchema as J, resolveNumber as Jt, SignalMathDataSchema as K, resolveBoolean as Kt, NodeMetadataSchema as L, mixColors as Lt, MediaOperationSchema as M, isCssGradient as Mt, MediaSourceSchema as N, isEqual as Nt, JsonValueSchema as O, getMediaType as Ot, ModerationError as P, isSignal as Pt, TimelineSegmentSchema as Q, sampleColorStops as Qt, NodeResultSchema as R, normalizeColorStops as Rt, FileAssetSchema as S, frameSignal as St, GlobalCompositeOperation as T, getFileDataMetadata as Tt, SignalChannelMetaSchema as U, progressSignal as Ut, ProgrammaticSignal as V, parseCssGradient as Vt, SignalDataSchema as W, registerSignalDependency as Wt, TEXT_LAYER_DEFAULTS as X, resolveString as Xt, SourceOperationSchema as Y, resolveParam as Yt, TextOperationSchema as Z, rgbToOklab as Zt, DataTypeVal as _, deserializeSignalData as _t, BaseVideoLayerPropsSchema as a, timeSignal as an, VideoStylePropsSchema as at, ExportResultSchema as b, formatHex as bt, COMPOSITOR_DEFAULTS as c, VirtualMediaDataSchema as ct, ConfigSchemaRegistry as d, computeVideoCropRenderProps as dt, signal as en, TransitionSchema as et, DATA_TYPE_EXTENSIONS as f, computed as ft, DataType as g, dataTypeColors as gt, DEFAULT_MEDIA_DIMENSION as h, createVirtualMedia as ht, BaseMediaOperationPropsSchema as i, takeRenderDiagnostics as in, VideoSpatialPropsSchema as it, MediaMetadataSchema as j, hasOnlySingleSource as jt, MAX_GRADIENT_STOPS as k, getRenderFingerprint as kt, Color as l, appendOperation as lt, DEFAULT_FPS as m, createOutputItemSchema as mt, AnyOutputUnionSchema as n, sineSignal as nn, VideoAnimationSchema as nt, CAPTION_LAYER_DEFAULTS as o, updateClockSignals as on, VideoTextPropsSchema as ot, DEFAULT_DURATION_MS as p, cosineSignal as pt, SignalStatsSchema as q, resolveMediaMimeType as qt, AudioExtractorSignalDataSchema as r, stampResult as rn, VideoLayerTypeSchema as rt, COMPOSITE_OPERATIONS as s, VideoTimingPropsSchema as st, AnimationTypeSchema as t, signalBuilder as tn, TransitionTypeSchema as tt, ConfigHandleSchema as u, checkNodeResultCache as ut, DataTypes as v, extractSvgDimensions as vt, GeneratorSignalDataSchema as w, getActiveMediaMetadata as wt, ExtendedLayerSchema as x, frameArraySignal as xt, Effect as y, findSourceAsset as yt, NodeVisualConfigSchema as z, oklabToRgb as zt };
+//# sourceMappingURL=dist-fjKpBYkc.mjs.map