@glissade/scene 0.17.0 → 0.17.1

package/dist/layoutEngine.js

@@ -1,2020 +1,3 @@
-import { TARGET_PATH, computed, emitDevWarning, random, signal, vec2Signal } from "@glissade/core";
-//#region src/matrix.ts
-const IDENTITY = [
-	1,
-	0,
-	0,
-	1,
-	0,
-	0
-];
-const z = (v) => v === 0 ? 0 : v;
-function multiply(m1, m2) {
-	const [a1, b1, c1, d1, e1, f1] = m1;
-	const [a2, b2, c2, d2, e2, f2] = m2;
-	return [
-		z(a1 * a2 + c1 * b2),
-		z(b1 * a2 + d1 * b2),
-		z(a1 * c2 + c1 * d2),
-		z(b1 * c2 + d1 * d2),
-		z(a1 * e2 + c1 * f2 + e1),
-		z(b1 * e2 + d1 * f2 + f1)
-	];
-}
-/** Compose translate × rotate × scale (rotation in degrees). */
-function fromTRS(position, rotationDeg, scale) {
-	const r = rotationDeg * Math.PI / 180;
-	const cos = Math.cos(r);
-	const sin = Math.sin(r);
-	const [sx, sy] = scale;
-	return [
-		z(cos * sx),
-		z(sin * sx),
-		z(-sin * sy),
-		z(cos * sy),
-		z(position[0]),
-		z(position[1])
-	];
-}
-/** Inverse affine: [A | t]⁻¹ = [A⁻¹ | −A⁻¹t]; null when degenerate (det 0). */
-function invert(m) {
-	const [a, b, c, d, e, f] = m;
-	const det = a * d - b * c;
-	if (det === 0) return null;
-	const ia = d / det;
-	const ib = -b / det;
-	const ic = -c / det;
-	const id = a / det;
-	return [
-		z(ia),
-		z(ib),
-		z(ic),
-		z(id),
-		z(-(ia * e + ic * f)),
-		z(-(ib * e + id * f))
-	];
-}
-function applyToPoint(m, p) {
-	return [m[0] * p[0] + m[2] * p[1] + m[4], m[1] * p[0] + m[3] * p[1] + m[5]];
-}
-function matEquals(a, b) {
-	return a[0] === b[0] && a[1] === b[1] && a[2] === b[2] && a[3] === b[3] && a[4] === b[4] && a[5] === b[5];
-}
-//#endregion
-//#region src/displayDiff.ts
-/**
-* The collapse-replacer shared by the cacheKey serializer
-* (`createDisplayListBuilder().cacheKey`), `cacheColdAudit.hashDisplayList`,
-* and `serializeDisplayList` here. CRITICAL: this is BYTE-PRESERVING — the
-* cacheKey it backs stamps into pushGroup and keys the §3.5 raster cache, so
-* its output must not move. The three call sites previously DUPLICATED this
-* byte-for-byte; it lives here once.
-*
-*  - ArrayBuffer / typed-array views collapse to a `ab:<len>` / `view:<len>`
-*    length marker (opaque binary never belongs in a structural key).
-*  - Functions drop (JSON would already drop them; explicit for parity).
-*  - Non-finite numbers (`NaN`/`Infinity`/`-Infinity`) collapse to DISTINCT
-*    string sentinels. `JSON.stringify` natively serializes all three to the
-*    SAME token (`null`), which would collide the cacheKey of two DisplayLists
-*    that differ only in WHICH non-finite value reaches a draw field — a stale
-*    raster + an `auditCacheCold` false-OK. The distinct sentinels keep them
-*    apart. This does NOT touch FINITE numbers (the common path): only the
-*    three non-finite inputs change, so the §3.5 cacheKey bytes for every real
-*    (finite) list are byte-identical — pinned by the regression guard.
-*
-* NOTE: `-0` is intentionally NOT normalized here. The matrix layer
-* (`matrix.ts`) already normalizes `-0 → 0` at the source, and adding a `-0`
-* pass to THIS replacer would change the cacheKey bytes for any list that ever
-* carried a raw `-0` — silently invalidating the cache cluster-wide. (`-0` is
-* finite, so the non-finite branch never touches it.) Byte preservation wins;
-* the regression guard pins the exact key.
-*/
-function collapseReplacer(_key, value) {
-	if (value instanceof ArrayBuffer) return `ab:${value.byteLength}`;
-	if (ArrayBuffer.isView(value)) return `view:${value.byteLength}`;
-	if (typeof value === "function") return void 0;
-	if (typeof value === "number" && !Number.isFinite(value)) {
-		if (Number.isNaN(value)) return "NaN";
-		return value > 0 ? "Infinity" : "-Infinity";
-	}
-	return value;
-}
-/** A flat, stable JSON value for one command with its resource ids INLINED to content. */
-function commandView(cmd, resources) {
-	const out = {};
-	for (const [k, v] of Object.entries(cmd)) out[k] = v;
-	if (cmd.op === "clip" || cmd.op === "fillPath" || cmd.op === "strokePath") out["path"] = resources[cmd.path];
-	else if (cmd.op === "drawImage") out["image"] = resources[cmd.image];
-	return out;
-}
-const stable = (v) => JSON.stringify(v, collapseReplacer);
-/** Field-level diff of two same-op command views (shallow over top-level props). */
-function diffFields(a, b) {
-	const changes = [];
-	const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
-	for (const k of keys) {
-		if (k === "op") continue;
-		if (stable(a[k]) !== stable(b[k])) changes.push({
-			path: k,
-			from: a[k],
-			to: b[k]
-		});
-	}
-	return changes;
-}
-/**
-* Index-aligned positional diff of two DisplayLists. Command i in `a` is
-* compared to command i in `b`; trailing commands become `add`/`remove`. A
-* single insert/remove cascades — this is the documented v1 cliff.
-*/
-function diffDisplayLists(a, b) {
-	const deltas = [];
-	const n = Math.max(a.commands.length, b.commands.length);
-	for (let i = 0; i < n; i++) {
-		const ca = a.commands[i];
-		const cb = b.commands[i];
-		if (ca !== void 0 && cb !== void 0) {
-			const va = commandView(ca, a.resources);
-			const vb = commandView(cb, b.resources);
-			if (stable(va) === stable(vb)) continue;
-			if (ca.op !== cb.op) deltas.push({
-				index: i,
-				kind: "change",
-				opA: ca.op,
-				opB: cb.op,
-				fields: [{
-					path: "op",
-					from: ca.op,
-					to: cb.op
-				}]
-			});
-			else deltas.push({
-				index: i,
-				kind: "change",
-				opA: ca.op,
-				opB: cb.op,
-				fields: diffFields(va, vb)
-			});
-		} else if (cb !== void 0) deltas.push({
-			index: i,
-			kind: "add",
-			opB: cb.op,
-			fields: []
-		});
-		else if (ca !== void 0) deltas.push({
-			index: i,
-			kind: "remove",
-			opA: ca.op,
-			fields: []
-		});
-	}
-	const sizeDiffers = a.size.w !== b.size.w || a.size.h !== b.size.h;
-	return {
-		equal: deltas.length === 0 && !sizeDiffers,
-		deltas,
-		...sizeDiffers ? { size: {
-			from: a.size,
-			to: b.size
-		} } : {}
-	};
-}
-/** Human-readable, multi-line rendering of a DisplayDiff (CLI command-tree). */
-function formatDisplayDiff(diff) {
-	if (diff.equal) return "DisplayLists are identical.";
-	const lines = [];
-	if (diff.size) lines.push(`size  ${diff.size.from.w}x${diff.size.from.h} -> ${diff.size.to.w}x${diff.size.to.h}`);
-	for (const d of diff.deltas) if (d.kind === "add") lines.push(`+ [${d.index}] add    ${d.opB ?? "?"}`);
-	else if (d.kind === "remove") lines.push(`- [${d.index}] remove ${d.opA ?? "?"}`);
-	else {
-		const op = d.opA === d.opB ? d.opA : `${d.opA ?? "?"} -> ${d.opB ?? "?"}`;
-		lines.push(`~ [${d.index}] ${op}`);
-		for (const f of d.fields) lines.push(`      ${f.path}: ${stable(f.from)} -> ${stable(f.to)}`);
-	}
-	return lines.join("\n");
-}
-/**
-* The `.dl.json` snapshot interchange schema (DESIGN §7.4). Users commit
-* `.dl.json` baselines, so this carries the SAME break-policy obligation as
-* `Timeline.version` and `SidecarDoc.sidecarVersion`: bump on a breaking shape
-* change. Independent of the API version.
-*/
-const DL_SNAPSHOT_VERSION = 1;
-/**
-* Serialize a DisplayList to a stable `.dl.json` document string (reusing the
-* byte-preserving collapse-replacer). Round-trips through `parseDisplaySnapshot`.
-*/
-function serializeDisplayList(dl) {
-	const snapshot = {
-		dlSnapshotVersion: 1,
-		size: dl.size,
-		commands: dl.commands,
-		resources: dl.resources
-	};
-	return JSON.stringify(snapshot, collapseReplacer, 2);
-}
-var DlSnapshotError = class extends Error {
-	constructor(message) {
-		super(message);
-		this.name = "DlSnapshotError";
-	}
-};
-/** Parse a `.dl.json` snapshot back into a DisplayList (validates the version). */
-function parseDisplaySnapshot(json) {
-	const doc = JSON.parse(json);
-	if (doc.dlSnapshotVersion !== 1) throw new DlSnapshotError(`unsupported dlSnapshotVersion ${String(doc.dlSnapshotVersion)}; this build reads 1`);
-	if (!doc.size || !Array.isArray(doc.commands) || !Array.isArray(doc.resources)) throw new DlSnapshotError("malformed .dl.json snapshot (need size, commands[], resources[])");
-	return {
-		size: doc.size,
-		commands: doc.commands,
-		resources: doc.resources
-	};
-}
-//#endregion
-//#region src/displayList.ts
-var FilterValidationError = class extends Error {
-	constructor(message) {
-		super(message);
-		this.name = "FilterValidationError";
-	}
-};
-const FILTER_KINDS = new Set([
-	"blur",
-	"drop-shadow",
-	"brightness",
-	"contrast",
-	"saturate"
-]);
-/** Document-layer validation: reject unknown kinds and out-of-range params loudly. */
-function validateFilters(filters) {
-	for (const f of filters) {
-		if (!FILTER_KINDS.has(f.kind)) throw new FilterValidationError(`unknown filter kind '${String(f.kind)}' (have: ${[...FILTER_KINDS].join(", ")})`);
-		if (f.kind === "blur" && !(Number.isFinite(f.radius) && f.radius >= 0)) throw new FilterValidationError(`blur radius must be ≥ 0, got ${String(f.radius)}`);
-		if (f.kind === "drop-shadow") {
-			if (![
-				f.dx,
-				f.dy,
-				f.blur
-			].every(Number.isFinite) || f.blur < 0) throw new FilterValidationError("drop-shadow needs finite dx/dy and blur ≥ 0");
-			if (typeof f.color !== "string" || f.color.length === 0) throw new FilterValidationError("drop-shadow needs a color string");
-		}
-		if ((f.kind === "brightness" || f.kind === "contrast" || f.kind === "saturate") && !(Number.isFinite(f.amount) && f.amount >= 0)) throw new FilterValidationError(`${f.kind} amount must be ≥ 0, got ${String(f.amount)}`);
-	}
-}
-/**
-* Compile the validated union to the canvas 2D `ctx.filter` syntax — both
-* backends speak it (browser canvas and @napi-rs/canvas/Skia). This is the
-* ONLY place the CSS-like syntax appears; documents never carry it.
-*/
-function filtersToCanvasFilter(filters) {
-	if (filters.length === 0) return "none";
-	return filters.map((f) => {
-		switch (f.kind) {
-			case "blur": return `blur(${f.radius}px)`;
-			case "drop-shadow": return `drop-shadow(${f.dx}px ${f.dy}px ${f.blur}px ${f.color})`;
-			default: return `${f.kind}(${f.amount})`;
-		}
-	}).join(" ");
-}
-/**
-* Outer glow as stacked zero-offset drop-shadows — the classic recipe, fully
-* deterministic on both backends (it is just filters). intensity stacks more
-* layers; pair with a signal binding to follow an animated fill.
-*/
-function glow(color, radius = 16, intensity = 2) {
-	const layers = [];
-	for (let i = 0; i < Math.max(1, intensity); i++) layers.push({
-		kind: "drop-shadow",
-		dx: 0,
-		dy: 0,
-		blur: radius * (1 + i * 1.5),
-		color
-	});
-	return layers;
-}
-/**
-* Resource ids that appear in a draw command — only path/image/video draws
-* carry one. Keeps the cacheKey serializer in lockstep with DrawCommand.
-*/
-function commandResourceIds(cmd) {
-	switch (cmd.op) {
-		case "clip":
-		case "fillPath":
-		case "strokePath": return [cmd.path];
-		case "drawImage": return [cmd.image];
-		default: return [];
-	}
-}
-/** FNV-1a over a string → an 8-hex-digit stable token (no crypto dep, ESM-safe). */
-function fnv1a(s) {
-	let h = 2166136261;
-	for (let i = 0; i < s.length; i++) {
-		h ^= s.charCodeAt(i);
-		h = Math.imul(h, 16777619);
-	}
-	return (h >>> 0).toString(16).padStart(8, "0");
-}
-function createDisplayListBuilder(size) {
-	const commands = [];
-	const resources = [];
-	const interned = /* @__PURE__ */ new Map();
-	return {
-		push: (cmd) => {
-			if (cmd.op === "pushGroup" && cmd.filters.length > 0) validateFilters(cmd.filters);
-			commands.push(cmd);
-		},
-		resource: (res) => {
-			const k = JSON.stringify(res);
-			const hit = interned.get(k);
-			if (hit !== void 0) return hit;
-			const id = resources.length;
-			resources.push(res);
-			interned.set(k, id);
-			return id;
-		},
-		mark: () => commands.length,
-		cacheKey: (start, end) => {
-			if (end <= start) return void 0;
-			const localIds = /* @__PURE__ */ new Map();
-			const usedResources = [];
-			const remap = (id) => {
-				let local = localIds.get(id);
-				if (local === void 0) {
-					local = localIds.size;
-					localIds.set(id, local);
-					usedResources.push(resources[id]);
-				}
-				return local;
-			};
-			const sliceCmds = commands.slice(start, end).map((cmd) => {
-				if (commandResourceIds(cmd).length === 0) return cmd;
-				if (cmd.op === "drawImage") return {
-					...cmd,
-					image: remap(cmd.image)
-				};
-				return {
-					...cmd,
-					path: remap(cmd.path)
-				};
-			});
-			return fnv1a(JSON.stringify({
-				c: sliceCmds,
-				r: usedResources
-			}, collapseReplacer));
-		},
-		patchCacheKey: (i, key) => {
-			const cmd = commands[i];
-			if (cmd && cmd.op === "pushGroup") cmd.cacheKey = key;
-		},
-		finish: () => ({
-			commands,
-			resources,
-			size
-		})
-	};
-}
-//#endregion
-//#region src/text.ts
-/**
-* §3.6 measurement quantum (px). Scene-owned pre-measure quantizes every
-* layout-feeding advance to this grid ONCE, then hands Yoga frozen integers —
-* so sub-pixel measureText drift between Skia/HarfBuzz versions cannot move a
-* whole layout. The single source of truth for the grid; `quantize` rounds to
-* it. (Yoga's `setMeasureFunc` was considered and rejected — see DESIGN.md §3.6.)
-*/
-const MEASURE_QUANTUM_PX = .5;
-/** §3.6 measurement quantum — round to the MEASURE_QUANTUM_PX grid. */
-function quantize(v) {
-	return Math.round(v / MEASURE_QUANTUM_PX) * MEASURE_QUANTUM_PX;
-}
-/**
-* Estimating fallback measurer — used only when no backend has been injected
-* (e.g. evaluating for IR-level tests). Deterministic but not metrically
-* faithful; mount(), the CLI, and exporters always inject the real one.
-*/
-let defaultMeasurer = null;
-/**
-* Process-wide fallback measurer for FACTORY-TIME measurement — component
-* factories run before any scene exists, so Text pulls (measuredSize,
-* lineBoxes, wordBoxes) and createScene fall back here before the estimator.
-* Node consumers: `setDefaultMeasurer(createMeasurer({ fonts }))` from
-* @glissade/backend-skia gives factory code the rasterizer's real metrics.
-* Scene-injected measurers (mount/CLI/golden harness) always win.
-*/
-function setDefaultMeasurer(m) {
-	defaultMeasurer = m;
-}
-/** The default-or-estimating chain end; internal fallback for measurer pulls. */
-function fallbackMeasurer() {
-	return defaultMeasurer ?? estimatingMeasurer;
-}
-const estimatingMeasurer = { measureText(text, font) {
-	return {
-		width: text.length * font.size * .52,
-		ascent: font.size * .8,
-		descent: font.size * .2
-	};
-} };
-let wordSegmenter;
-/**
-* The draw-path word segmentation (Intl.Segmenter boundaries, punctuation
-* glued to its predecessor) — exported so Text.wordBoxes() boxes EXACTLY the
-* units the breaker flows.
-*/
-function segmentWords(text) {
-	if (wordSegmenter === void 0) wordSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "word" }) : null;
-	if (wordSegmenter) {
-		const raw = [...wordSegmenter.segment(text)].map((s) => s.segment);
-		const glued = [];
-		for (const seg of raw) if (glued.length > 0 && /^[^\p{L}\p{N}\s]+$/u.test(seg)) glued[glued.length - 1] += seg;
-		else glued.push(seg);
-		return glued;
-	}
-	return text.split(/(\s+)/).filter((w) => w.length > 0);
-}
-let graphemeSegmenter;
-/**
-* Split text into graphemes (user-perceived characters). Exported so Text.draw
-* (reveal masking), Text.graphemes() (authoring), and revealSchedule() (the SFX
-* keystroke contract) all count the SAME units.
-*/
-function segmentGraphemes(text) {
-	if (graphemeSegmenter === void 0) graphemeSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
-	if (graphemeSegmenter) return [...graphemeSegmenter.segment(text)].map((s) => s.segment);
-	return Array.from(text);
-}
-/**
-* Greedy line breaking: explicit '\n' always breaks; otherwise word segments
-* flow until maxWidth is exceeded (Intl.Segmenter boundaries, so CJK wraps
-* without spaces). A segment wider than maxWidth gets its own line (no
-* intra-word breaking in v1).
-*/
-function breakLines(text, font, maxWidth, measurer) {
-	const paragraphs = text.split("\n");
-	if (maxWidth === void 0 || maxWidth <= 0) return paragraphs;
-	const lines = [];
-	for (const para of paragraphs) {
-		const words = segmentWords(para);
-		let line = "";
-		for (const word of words) {
-			const candidate = line + word;
-			if (line !== "" && quantize(measurer.measureText(candidate.trimEnd(), font).width) > maxWidth) {
-				lines.push(line.trimEnd());
-				line = word.trimStart() === "" ? "" : word;
-			} else line = candidate;
-		}
-		lines.push(line.trimEnd());
-	}
-	return lines;
-}
-//#endregion
-//#region src/node.ts
-/**
-* Scene-graph node base (DESIGN.md §3.1): every animatable property is a
-* signal; transforms are computed matrix signals; emit() is pure — it reads
-* signals and ctx only, and produces IR commands, never canvas calls.
-*/
-const ANCHOR_PRESETS = {
-	"center": [.5, .5],
-	"top-left": [0, 0],
-	"top": [.5, 0],
-	"top-right": [1, 0],
-	"left": [0, .5],
-	"right": [1, .5],
-	"bottom-left": [0, 1],
-	"bottom": [.5, 1],
-	"bottom-right": [1, 1]
-};
-function resolveAnchor(spec) {
-	if (typeof spec === "string") {
-		const preset = ANCHOR_PRESETS[spec];
-		if (!preset) throw new Error(`unknown anchor '${spec}' (use a preset like 'top-left' or a [ax, ay] pair)`);
-		return preset;
-	}
-	return [spec[0], spec[1]];
-}
-function initScalar(sig, init) {
-	if (typeof init === "function") sig.bindSource(init);
-	else if (init !== void 0) sig.set(init);
-	return sig;
-}
-function initVec2(sig, init) {
-	if (typeof init === "function") sig.bindSource(init);
-	else if (init !== void 0) sig.set(init);
-	return sig;
-}
-var Node = class {
-	id;
-	position;
-	rotation;
-	scale;
-	opacity;
-	blend;
-	zIndex;
-	filters;
-	/** Resolved anchor fraction over the intrinsic box; [0.5, 0.5] = center. */
-	anchor;
-	/** True only when the author SET an anchor — unset keeps the legacy origin. */
-	hasAnchor;
-	/** §3.5: opt-in cross-frame raster cache. Forces a group + a stamped cacheKey. */
-	cache;
-	parent = null;
-	#warnedAnchor = false;
-	/** v2 §C.3: participates in hit testing; set implicitly by attaching a listener. */
-	interactive = false;
-	/** v2 §C.3: false prunes this subtree from hit testing (PixiJS's flag). */
-	interactiveChildren = true;
-	/** v2 §C.3: explicit hit-shape override in node-local coordinates. */
-	hitArea;
-	/**
-	* Injected by createScene: the scene's CURRENT TextMeasurer (§3.2), so
-	* derived-size bindings (e.g. a background tracking Layout.computedSize)
-	* measure with the same rasterizer the flow uses.
-	*/
-	measurerSource = null;
-	localMatrix;
-	worldMatrix;
-	/** Track-target paths → bindable signals; subclasses register their own props. */
-	targets = /* @__PURE__ */ new Map();
-	constructor(props = {}) {
-		this.id = props.id;
-		this.position = initVec2(vec2Signal([0, 0]), props.position);
-		this.rotation = initScalar(signal(0), props.rotation);
-		this.scale = initVec2(vec2Signal([1, 1]), props.scale);
-		this.opacity = initScalar(signal(1), props.opacity);
-		this.blend = initScalar(signal("source-over"), props.blend);
-		this.zIndex = initScalar(signal(0), props.zIndex);
-		this.filters = initScalar(signal([]), props.filters);
-		this.hasAnchor = props.anchor !== void 0;
-		this.anchor = resolveAnchor(props.anchor ?? "center");
-		this.cache = props.cache === true;
-		this.localMatrix = computed(() => {
-			const trs = fromTRS(this.position(), this.rotation(), this.scale());
-			const [sx, sy] = this.anchorShift();
-			return sx === 0 && sy === 0 ? trs : multiply(trs, [
-				1,
-				0,
-				0,
-				1,
-				sx,
-				sy
-			]);
-		}, { equals: matEquals });
-		this.worldMatrix = computed(() => this.parent ? multiply(this.parent.worldMatrix(), this.localMatrix()) : this.localMatrix(), { equals: matEquals });
-		this.registerTarget("position", this.position, "vec2");
-		this.registerTarget("position.x", this.position.x, "number");
-		this.registerTarget("position.y", this.position.y, "number");
-		this.registerTarget("rotation", this.rotation, "number");
-		this.registerTarget("scale", this.scale, "vec2");
-		this.registerTarget("scale.x", this.scale.x, "number");
-		this.registerTarget("scale.y", this.scale.y, "number");
-		this.registerTarget("opacity", this.opacity, "number");
-		this.registerTarget("zIndex", this.zIndex, "number");
-	}
-	/**
-	* Register a track-target path → bindable signal, stamping the value type the
-	* signal accepts (§2.2). The stamp is what bindTimeline's bind-time guard
-	* reads to reject a mismatched track (a scalar on a vec2, a number on a paint
-	* prop, …) instead of silently sampling to NaN/undefined.
-	*
-	* `expects` is OPTIONAL: omitting it (the 2-arg form) leaves the target
-	* UNtagged — bindTimeline then skips the type guard for it, which is the
-	* back-compat seam for external `Custom`/`Node` subclasses (DESIGN.md §329)
-	* and prebuilt 0.13 nodes that called the 2-arg form (0.13 had no guard). A
-	* built-in node opts INTO the guard by tagging.
-	*/
-	registerTarget(path, sig, expects) {
-		sig.expects = expects;
-		this.targets.set(path, sig);
-		if (this.id !== void 0) sig[TARGET_PATH] = `${this.id}/${path}`;
-	}
-	resolveTarget(path) {
-		return this.targets.get(path);
-	}
-	/**
-	* Natural size for flex flow (§3.2); null = not flowable (a Layout parent
-	* emits such children absolutely, untouched).
-	*/
-	intrinsicSize(measurer) {
-		return null;
-	}
-	/**
-	* Vector from the DRAW origin to the intrinsic box's top-left, in the
-	* geometry space draw() emits into (anchor-independent — the anchor shift
-	* lives in localMatrix). Hit testing boxes nodes with this. Default:
-	* center-anchored geometry (every shape). Text overrides — it draws from a
-	* left/center/right baseline origin; Path from author-positioned bounds.
-	*/
-	drawOffset(measurer) {
-		const m = measurer ?? this.measurerSource?.() ?? fallbackMeasurer();
-		const size = this.intrinsicSize(m) ?? {
-			w: 0,
-			h: 0
-		};
-		return {
-			x: -size.w / 2,
-			y: -size.h / 2
-		};
-	}
-	/**
-	* Vector from the node ORIGIN (the point `position` places) to the box's
-	* top-left, so Layout can place any node. With an anchor this is exactly
-	* (−ax·w, −ay·h); the center default reproduces (−w/2, −h/2).
-	*/
-	flowOffset(measurer) {
-		const m = measurer ?? this.measurerSource?.() ?? fallbackMeasurer();
-		const d = this.drawOffset(m);
-		const [sx, sy] = this.anchorShift(m);
-		return {
-			x: d.x + sx,
-			y: d.y + sy
-		};
-	}
-	/**
-	* Translation composed after TRS in localMatrix: moves the drawn box so the
-	* anchor point lands on the origin. shift = −(drawOffset + anchor·size).
-	* No anchor set → zero shift, the legacy origin (shape center / Text
-	* baseline / Path author coords) — every pre-anchor scene is byte-stable.
-	* An EXPLICIT anchor pins position to that fraction of the box, even
-	* 'center' (which differs from the legacy origin only for Text and Path).
-	* Nodes without an intrinsic box (Group) warn once and ignore it.
-	*/
-	anchorShift(measurer) {
-		if (!this.hasAnchor) return [0, 0];
-		const [ax, ay] = this.anchor;
-		const m = measurer ?? this.measurerSource?.() ?? fallbackMeasurer();
-		const size = this.intrinsicSize(m);
-		if (!size) {
-			if (!this.#warnedAnchor) {
-				this.#warnedAnchor = true;
-				emitDevWarning(`anchor set on a node without an intrinsic box${this.id ? ` ('${this.id}')` : ""} — ignored (give it a sized node, or position children explicitly)`);
-			}
-			return [0, 0];
-		}
-		const d = this.drawOffset(m);
-		const sx = -(d.x + ax * size.w);
-		const sy = -(d.y + ay * size.h);
-		return [sx === 0 ? 0 : sx, sy === 0 ? 0 : sy];
-	}
-	/** §3.5 predicate: composite-as-a-unit when opacity/blend/filters demand it. */
-	requiresGroup() {
-		return this.opacity() < 1 || this.blend() !== "source-over" || this.filters().length > 0;
-	}
-	/** §3.7: a subtree-level shader pass; ShaderEffect overrides. */
-	groupShader() {}
-	emit(out, ctx) {
-		const opacity = this.opacity();
-		if (opacity <= 0) return;
-		const local = this.localMatrix();
-		const isIdentity = matEquals(local, IDENTITY);
-		const shader = this.groupShader();
-		const group = this.requiresGroup() || shader !== void 0 || this.cache;
-		const wantsKey = this.cache && out.mark !== void 0;
-		out.push({ op: "save" });
-		if (!isIdentity) out.push({
-			op: "transform",
-			m: local
-		});
-		let pushIdx = -1;
-		if (group) {
-			if (wantsKey) pushIdx = out.mark();
-			out.push({
-				op: "pushGroup",
-				opacity,
-				blend: this.blend(),
-				filters: this.filters(),
-				...shader !== void 0 ? { shader } : {}
-			});
-		}
-		const drawStart = wantsKey ? out.mark() : -1;
-		this.draw(out, ctx);
-		if (group) {
-			if (wantsKey) {
-				const key = out.cacheKey(drawStart, out.mark());
-				if (key !== void 0) out.patchCacheKey(pushIdx, key);
-			}
-			out.push({ op: "popGroup" });
-		}
-		out.push({ op: "restore" });
-	}
-};
-//#endregion
-//#region src/sketch.ts
-/**
-* Hand-drawn stroke styles via GEOMETRIC roughening — not raster textures. A
-* shape's outline is flattened to polylines, then each segment is redrawn as a
-* slightly jittered, bowed stroke, overlaid in a few passes. Because it's pure
-* path math seeded by a stable per-shape seed, the result is byte-identical on
-* both backends and re-evaluates deterministically (the seed is consumed fresh
-* each draw, never as a shared stateful stream).
-*/
-const KINDS = [
-	"marker",
-	"crayon",
-	"pencil",
-	"ink",
-	"chalk"
-];
-var SketchValidationError = class extends Error {
-	constructor(message) {
-		super(message);
-		this.name = "SketchValidationError";
-	}
-};
-/** Reject unknown kinds / out-of-range params at construction (like validateFilters). */
-function validateSketch(s) {
-	if (!KINDS.includes(s.kind)) throw new SketchValidationError(`unknown sketch kind '${String(s.kind)}' (have: ${KINDS.join(", ")})`);
-	if (s.width !== void 0 && !(s.width > 0)) throw new SketchValidationError(`sketch width must be > 0, got ${String(s.width)}`);
-	if (s.roughness !== void 0 && !(s.roughness >= 0)) throw new SketchValidationError(`sketch roughness must be ≥ 0, got ${String(s.roughness)}`);
-	if ((s.kind === "crayon" || s.kind === "pencil") && s.passes !== void 0 && !(s.passes >= 1)) throw new SketchValidationError(`sketch passes must be ≥ 1, got ${String(s.passes)}`);
-	if (s.kind === "chalk" && s.dash !== void 0 && (!Array.isArray(s.dash) || s.dash.some((d) => !(d >= 0)))) throw new SketchValidationError("sketch chalk dash must be an array of non-negative numbers");
-}
-/** Per-kind defaults — the character of each look. */
-function resolveSketch(s) {
-	switch (s.kind) {
-		case "marker": return {
-			width: s.width ?? 8,
-			roughness: s.roughness ?? 1.2,
-			passes: 2
-		};
-		case "crayon": return {
-			width: s.width ?? 4,
-			roughness: s.roughness ?? 2.4,
-			passes: s.passes ?? 3
-		};
-		case "pencil": return {
-			width: s.width ?? 1.5,
-			roughness: s.roughness ?? 1,
-			passes: s.passes ?? 2
-		};
-		case "ink": return {
-			width: s.width ?? 2.5,
-			roughness: s.roughness ?? .8,
-			passes: 1
-		};
-		case "chalk": return {
-			width: s.width ?? 3,
-			roughness: s.roughness ?? 1.6,
-			passes: 1,
-			dash: s.dash ?? [6, 5]
-		};
-	}
-}
-const cubic = (p0, c1, c2, p1, t) => {
-	const mt = 1 - t;
-	const a = mt * mt * mt;
-	const b = 3 * mt * mt * t;
-	const c = 3 * mt * t * t;
-	const d = t * t * t;
-	return [a * p0[0] + b * c1[0] + c * c2[0] + d * p1[0], a * p0[1] + b * c1[1] + c * c2[1] + d * p1[1]];
-};
-const quad = (p0, c, p1, t) => {
-	const mt = 1 - t;
-	return [mt * mt * p0[0] + 2 * mt * t * c[0] + t * t * p1[0], mt * mt * p0[1] + 2 * mt * t * c[1] + t * t * p1[1]];
-};
-const ellipse = (cx, cy, rx, ry, rot, ang) => {
-	const ex = rx * Math.cos(ang);
-	const ey = ry * Math.sin(ang);
-	const cos = Math.cos(rot);
-	const sin = Math.sin(rot);
-	return [cx + ex * cos - ey * sin, cy + ex * sin + ey * cos];
-};
-/**
-* Flatten a path to polylines — de Casteljau for C/Q, arc sampling for E
-* (Circle and rounded-rect corners are 'E' segments, so this MUST handle them
-* or those shapes roughen wrong). `steps` is the samples per curved segment.
-*/
-function flatten(segs, steps = 16) {
-	const polys = [];
-	let cur = null;
-	let px = 0;
-	let py = 0;
-	let sx = 0;
-	let sy = 0;
-	const ensure = (x, y) => {
-		if (!cur) {
-			cur = {
-				points: [[x, y]],
-				closed: false
-			};
-			polys.push(cur);
-			sx = x;
-			sy = y;
-		}
-		return cur;
-	};
-	for (const s of segs) switch (s[0]) {
-		case "M":
-			cur = {
-				points: [[s[1], s[2]]],
-				closed: false
-			};
-			polys.push(cur);
-			px = sx = s[1];
-			py = sy = s[2];
-			break;
-		case "L":
-			ensure(px, py).points.push([s[1], s[2]]);
-			px = s[1];
-			py = s[2];
-			break;
-		case "C": {
-			const c = ensure(px, py);
-			for (let k = 1; k <= steps; k++) c.points.push(cubic([px, py], [s[1], s[2]], [s[3], s[4]], [s[5], s[6]], k / steps));
-			px = s[5];
-			py = s[6];
-			break;
-		}
-		case "Q": {
-			const c = ensure(px, py);
-			for (let k = 1; k <= steps; k++) c.points.push(quad([px, py], [s[1], s[2]], [s[3], s[4]], k / steps));
-			px = s[3];
-			py = s[4];
-			break;
-		}
-		case "E": {
-			const [, cx, cy, rx, ry, rot, a0, a1] = s;
-			const begin = ellipse(cx, cy, rx, ry, rot, a0);
-			const c = ensure(begin[0], begin[1]);
-			for (let k = 1; k <= steps; k++) c.points.push(ellipse(cx, cy, rx, ry, rot, a0 + (a1 - a0) * (k / steps)));
-			const end = ellipse(cx, cy, rx, ry, rot, a1);
-			px = end[0];
-			py = end[1];
-			break;
-		}
-		case "Z":
-			if (cur) {
-				cur.points.push([sx, sy]);
-				cur.closed = true;
-				px = sx;
-				py = sy;
-			}
-			break;
-	}
-	return polys.filter((p) => p.points.length > 0);
-}
-/** Total length of a flattened polyline (for draw-on dashing). */
-function arcLength(poly) {
-	let len = 0;
-	for (let i = 1; i < poly.points.length; i++) len += Math.hypot(poly.points[i][0] - poly.points[i - 1][0], poly.points[i][1] - poly.points[i - 1][1]);
-	return len;
-}
-function validateHachure(h) {
-	if (!(h.gap > 0)) throw new SketchValidationError(`hachure gap must be > 0, got ${String(h.gap)}`);
-	if (h.roughness !== void 0 && !(h.roughness >= 0)) throw new SketchValidationError(`hachure roughness must be ≥ 0, got ${String(h.roughness)}`);
-}
-/**
-* Parallel hatch lines covering a path's bounding box at `angleRad`, spaced
-* `gap`, lightly jittered. Returned as `M/L` segments to be stroked INSIDE a
-* clip of the shape (the caller emits the clip). Pure; `rng` reseeded per draw.
-*/
-function hachureLines(segs, spec, rng) {
-	const polys = flatten(segs);
-	let minX = Infinity;
-	let minY = Infinity;
-	let maxX = -Infinity;
-	let maxY = -Infinity;
-	for (const p of polys) for (const [x, y] of p.points) {
-		if (x < minX) minX = x;
-		if (y < minY) minY = y;
-		if (x > maxX) maxX = x;
-		if (y > maxY) maxY = y;
-	}
-	if (!Number.isFinite(minX)) return [];
-	const cx = (minX + maxX) / 2;
-	const cy = (minY + maxY) / 2;
-	const ca = Math.cos(spec.angleRad);
-	const sa = Math.sin(spec.angleRad);
-	const toRot = (x, y) => [(x - cx) * ca + (y - cy) * sa, -(x - cx) * sa + (y - cy) * ca];
-	const fromRot = (x, y) => [cx + x * ca - y * sa, cy + x * sa + y * ca];
-	let rMinX = Infinity;
-	let rMinY = Infinity;
-	let rMaxX = -Infinity;
-	let rMaxY = -Infinity;
-	const corners = [
-		[minX, minY],
-		[maxX, minY],
-		[maxX, maxY],
-		[minX, maxY]
-	];
-	for (const [x, y] of corners) {
-		const [rx, ry] = toRot(x, y);
-		if (rx < rMinX) rMinX = rx;
-		if (ry < rMinY) rMinY = ry;
-		if (rx > rMaxX) rMaxX = rx;
-		if (ry > rMaxY) rMaxY = ry;
-	}
-	const rough = spec.roughness ?? 1;
-	const jit = () => (rng() * 2 - 1) * rough;
-	const out = [];
-	for (let y = rMinY + spec.gap / 2; y < rMaxY; y += spec.gap) {
-		const a = fromRot(rMinX, y + jit());
-		const b = fromRot(rMaxX, y + jit());
-		out.push([
-			"M",
-			a[0],
-			a[1]
-		], [
-			"L",
-			b[0],
-			b[1]
-		]);
-	}
-	return out;
-}
-/**
-* Roughen a path into hand-drawn stroke passes. Each segment becomes a bowed,
-* jittered quadratic; `passes` overlay slightly different jitters for the
-* built-up look. `rng` must be a freshly seeded generator (the caller reseeds
-* per draw from a stable seed, so evaluate() stays pure).
-*/
-function roughen(segs, style, rng) {
-	const resolved = resolveSketch(style);
-	const polys = flatten(segs);
-	const jit = () => (rng() * 2 - 1) * resolved.roughness;
-	const strokes = [];
-	for (let pass = 0; pass < resolved.passes; pass++) {
-		const out = [];
-		for (const poly of polys) {
-			const pts = poly.points;
-			if (pts.length < 2) continue;
-			let ax = pts[0][0] + jit();
-			let ay = pts[0][1] + jit();
-			out.push([
-				"M",
-				ax,
-				ay
-			]);
-			for (let i = 1; i < pts.length; i++) {
-				const bx = pts[i][0] + jit();
-				const by = pts[i][1] + jit();
-				const dx = bx - ax;
-				const dy = by - ay;
-				const len = Math.hypot(dx, dy) || 1;
-				const bow = jit() * .5;
-				const mx = (ax + bx) / 2 + -dy / len * bow;
-				const my = (ay + by) / 2 + dx / len * bow;
-				out.push([
-					"Q",
-					mx,
-					my,
-					bx,
-					by
-				]);
-				ax = bx;
-				ay = by;
-			}
-		}
-		strokes.push(out);
-	}
-	return {
-		strokes,
-		resolved
-	};
-}
-/** FNV-1a 32-bit — a stable per-shape sketch seed from its id. */
-function hashStr(s) {
-	let h = 2166136261;
-	for (let i = 0; i < s.length; i++) {
-		h ^= s.charCodeAt(i);
-		h = Math.imul(h, 16777619);
-	}
-	return h >>> 0;
-}
-/** Convenience: the rough stroke passes for a path at a given seed. */
-function sketchStrokes(segs, style, seed) {
-	return roughen(segs, style, random(seed >>> 0)).strokes;
-}
-//#endregion
-//#region src/nodes.ts
-/**
-* Built-in nodes for M1 (DESIGN.md §3.1): Group, Rect, Circle, Text.
-* Path/Image/Video/Layout arrive with their milestones.
-*/
-/**
-* The NAMED extension point of the closed §3.1 taxonomy: the documented base
-* an author subclasses to emit IR commands (never canvas calls). It adds
-* nothing to `Node` — it exists so "custom-via-subclassing" is a real,
-* exported surface (the ninth taxonomy member) rather than an unnamed
-* convention. Subclasses implement the abstract `draw()` from `Node`.
-*/
-var Custom = class extends Node {};
-/** Rounded-rect path segments — Rect's outline, shared with Highlight. */
-function roundedRectSegs(x, y, w, h, r) {
-	if (r <= 0) return [
-		[
-			"M",
-			x,
-			y
-		],
-		[
-			"L",
-			x + w,
-			y
-		],
-		[
-			"L",
-			x + w,
-			y + h
-		],
-		[
-			"L",
-			x,
-			y + h
-		],
-		["Z"]
-	];
-	const HALF = Math.PI / 2;
-	return [
-		[
-			"M",
-			x + r,
-			y
-		],
-		[
-			"L",
-			x + w - r,
-			y
-		],
-		[
-			"E",
-			x + w - r,
-			y + r,
-			r,
-			r,
-			0,
-			-HALF,
-			0
-		],
-		[
-			"L",
-			x + w,
-			y + h - r
-		],
-		[
-			"E",
-			x + w - r,
-			y + h - r,
-			r,
-			r,
-			0,
-			0,
-			HALF
-		],
-		[
-			"L",
-			x + r,
-			y + h
-		],
-		[
-			"E",
-			x + r,
-			y + h - r,
-			r,
-			r,
-			0,
-			HALF,
-			Math.PI
-		],
-		[
-			"L",
-			x,
-			y + r
-		],
-		[
-			"E",
-			x + r,
-			y + r,
-			r,
-			r,
-			0,
-			Math.PI,
-			Math.PI + HALF
-		],
-		["Z"]
-	];
-}
-var Group = class extends Node {
-	children;
-	/** Version bumped on structural child mutation, so a dependency-tracked memo
-	* (e.g. Layout's computed) re-runs when the child SET changes — not only when
-	* a participating prop signal does. */
-	#structure = signal(0);
-	constructor(props = {}) {
-		super(props);
-		this.children = props.children ?? [];
-		for (const child of this.children) child.parent = this;
-	}
-	/** Record the structural version as a dependency — call inside a computed
-	* that walks `children` so add()/remove() invalidate it. */
-	trackStructure() {
-		this.#structure();
-	}
-	add(child) {
-		child.parent = this;
-		this.children.push(child);
-		this.#structure.set(this.#structure.peek() + 1);
-		return this;
-	}
-	/** Remove a child (the reactive counterpart to add()); no-op if absent. */
-	remove(child) {
-		const i = this.children.indexOf(child);
-		if (i >= 0) {
-			this.children.splice(i, 1);
-			if (child.parent === this) child.parent = null;
-			this.#structure.set(this.#structure.peek() + 1);
-		}
-		return this;
-	}
-	draw(out, ctx) {
-		const sorted = this.children.map((node, i) => ({
-			node,
-			i
-		})).sort((a, b) => a.node.zIndex() - b.node.zIndex() || a.i - b.i).map((e) => e.node);
-		for (const child of sorted) child.emit(out, ctx);
-	}
-};
-/** A color string is sugar for a solid `color` Paint; a Paint passes through. */
-function toPaint(fill) {
-	return typeof fill === "string" ? {
-		kind: "color",
-		color: fill
-	} : fill;
-}
-var Shape = class extends Node {
-	fill;
-	stroke;
-	strokeWidth;
-	sketch;
-	sketchFill;
-	sketchSeed;
-	reveal;
-	constructor(props = {}) {
-		super(props);
-		this.fill = initProp(signal(""), props.fill);
-		this.stroke = initProp(signal(""), props.stroke);
-		this.strokeWidth = initProp(signal(0), props.strokeWidth);
-		this.reveal = initProp(signal(1), props.reveal);
-		this.registerTarget("fill", this.fill, ["color", "paint"]);
-		this.registerTarget("stroke", this.stroke, "color");
-		this.registerTarget("strokeWidth", this.strokeWidth, "number");
-		this.registerTarget("reveal", this.reveal, "number");
-		if (props.sketch) validateSketch(props.sketch);
-		if (props.sketchFill) validateHachure(props.sketchFill);
-		if (props.sketchFill && !props.sketch) emitDevWarning(`${this.id !== void 0 ? `'${this.id}': ` : ""}sketchFill is ignored without sketch — hachure fill is drawn only by the sketch renderer. Set a sketch style (e.g. { kind: 'pencil' }) to see it.`);
-		this.sketch = props.sketch;
-		this.sketchFill = props.sketchFill;
-		this.sketchSeed = props.sketchSeed ?? (this.id !== void 0 ? hashStr(this.id) : 0);
-	}
-	draw(out) {
-		const segs = this.pathSegs();
-		if (this.sketch) return this.drawSketch(out, segs);
-		const path = out.resource({
-			kind: "path",
-			segs
-		});
-		const fill = this.fill();
-		if (fill) out.push({
-			op: "fillPath",
-			path,
-			paint: toPaint(fill)
-		});
-		const stroke = this.stroke();
-		const width = this.strokeWidth();
-		if (stroke && width > 0) {
-			const reveal = this.reveal();
-			if (reveal < 1) emitDrawOnStroke(out, segs, {
-				kind: "color",
-				color: stroke
-			}, { width }, reveal);
-			else out.push({
-				op: "strokePath",
-				path,
-				paint: {
-					kind: "color",
-					color: stroke
-				},
-				stroke: { width }
-			});
-		}
-	}
-	/** Hand-drawn render: solid fill (if any) under roughened, multi-pass strokes.
-	* The seed is consumed fresh each draw, so re-evaluation is byte-identical. */
-	drawSketch(out, segs) {
-		const rng = random(this.sketchSeed >>> 0);
-		const fill = this.fill();
-		if (fill) {
-			const path = out.resource({
-				kind: "path",
-				segs
-			});
-			out.push({
-				op: "fillPath",
-				path,
-				paint: toPaint(fill)
-			});
-		}
-		const { strokes, resolved } = roughen(segs, this.sketch, rng);
-		const ink = this.stroke() || (typeof fill === "string" ? fill : "") || "#000000";
-		if (this.sketchFill) {
-			const clipPath = out.resource({
-				kind: "path",
-				segs
-			});
-			out.push({ op: "save" });
-			out.push({
-				op: "clip",
-				path: clipPath,
-				rule: "nonzero"
-			});
-			const hatch = hachureLines(segs, this.sketchFill, rng);
-			if (hatch.length > 0) {
-				const hp = out.resource({
-					kind: "path",
-					segs: hatch
-				});
-				out.push({
-					op: "strokePath",
-					path: hp,
-					paint: {
-						kind: "color",
-						color: ink
-					},
-					stroke: {
-						width: Math.max(1, resolved.width * .5),
-						cap: "round"
-					}
-				});
-			}
-			out.push({ op: "restore" });
-		}
-		const reveal = this.reveal();
-		const drawOn = reveal < 1;
-		for (const passSegs of strokes) {
-			if (passSegs.length === 0) continue;
-			if (drawOn) {
-				emitDrawOnStroke(out, passSegs, {
-					kind: "color",
-					color: ink
-				}, {
-					width: resolved.width,
-					cap: "round",
-					join: "round"
-				}, reveal);
-				continue;
-			}
-			const path = out.resource({
-				kind: "path",
-				segs: passSegs
-			});
-			out.push({
-				op: "strokePath",
-				path,
-				paint: {
-					kind: "color",
-					color: ink
-				},
-				stroke: {
-					width: resolved.width,
-					cap: "round",
-					join: "round",
-					...resolved.dash ? { dash: resolved.dash } : {}
-				}
-			});
-		}
-	}
-};
-function initProp(sig, init) {
-	if (typeof init === "function") sig.bindSource(init);
-	else if (init !== void 0) sig.set(init);
-	return sig;
-}
-/** Split a stroke path into its subpaths (each starting at an 'M'). */
-function splitContours(segs) {
-	const out = [];
-	let cur = null;
-	for (const s of segs) if (s[0] === "M") {
-		cur = [s];
-		out.push(cur);
-	} else if (cur) cur.push(s);
-	return out;
-}
-/**
-* Emit a stroke that "draws on" by arc length — a retreating dash PER CONTOUR
-* (canvas restarts the dash phase at each subpath move, so each contour reveals
-* from its own start). Shared by sketched and plain stroked shapes.
-*/
-function emitDrawOnStroke(out, segs, paint, baseStroke, reveal) {
-	for (const contour of splitContours(segs)) {
-		const len = flatten(contour).reduce((s, p) => s + arcLength(p), 0);
-		const path = out.resource({
-			kind: "path",
-			segs: contour
-		});
-		out.push({
-			op: "strokePath",
-			path,
-			paint,
-			stroke: {
-				...baseStroke,
-				dash: [len, len],
-				dashOffset: len * (1 - reveal)
-			}
-		});
-	}
-}
-/**
-* `PathSeg[]` → `PathValue` (Lottie vertex contours) — the inverse of
-* `Path.pathSegs`, so geometry from `roundedRectSegs` / `sketchStrokes` /
-* `flatten` can be placed on a `Path` node (to morph, motion-path, or draw-on
-* it). C/Q become an anchor + relative in/out tangents; L is a zero-tangent
-* vertex; E samples to vertices; Z closes the contour, folding the closing
-* tangent back onto the first vertex. Round-trips C-contours exactly.
-*/
-function pathFromSegs(segs) {
-	const contours = [];
-	let c = null;
-	const push = (v, inT = [0, 0], outT = [0, 0]) => {
-		c.v.push(v);
-		c.in.push(inT);
-		c.out.push(outT);
-	};
-	const last = () => c.v[c.v.length - 1];
-	for (const s of segs) switch (s[0]) {
-		case "M":
-			c = {
-				closed: false,
-				v: [[s[1], s[2]]],
-				in: [[0, 0]],
-				out: [[0, 0]]
-			};
-			contours.push(c);
-			break;
-		case "L":
-			if (c) push([s[1], s[2]]);
-			break;
-		case "C":
-			if (c) {
-				const p0 = last();
-				c.out[c.out.length - 1] = [s[1] - p0[0], s[2] - p0[1]];
-				push([s[5], s[6]], [s[3] - s[5], s[4] - s[6]]);
-			}
-			break;
-		case "Q":
-			if (c) {
-				const p0 = last();
-				const qx = s[1];
-				const qy = s[2];
-				const px = s[3];
-				const py = s[4];
-				c.out[c.out.length - 1] = [2 / 3 * (qx - p0[0]), 2 / 3 * (qy - p0[1])];
-				push([px, py], [2 / 3 * (qx - px), 2 / 3 * (qy - py)]);
-			}
-			break;
-		case "E":
-			if (c) {
-				const [, cx, cy, rx, ry, rot, a0, a1] = s;
-				const cos = Math.cos(rot);
-				const sin = Math.sin(rot);
-				for (let k = 1; k <= 16; k++) {
-					const ang = a0 + (a1 - a0) * (k / 16);
-					const ex = rx * Math.cos(ang);
-					const ey = ry * Math.sin(ang);
-					push([cx + ex * cos - ey * sin, cy + ex * sin + ey * cos]);
-				}
-			}
-			break;
-		case "Z":
-			if (c) {
-				c.closed = true;
-				const f = c.v[0];
-				const l = last();
-				if (c.v.length > 1 && Math.abs(f[0] - l[0]) < 1e-9 && Math.abs(f[1] - l[1]) < 1e-9) {
-					c.in[0] = c.in[c.in.length - 1];
-					c.v.pop();
-					c.in.pop();
-					c.out.pop();
-				}
-			}
-			break;
-	}
-	return contours;
-}
-var Rect = class extends Shape {
-	width;
-	height;
-	/** Corner radius; clamped to half the smaller dimension. radius = h/2 makes a pill. */
-	cornerRadius;
-	constructor(props = {}) {
-		super(props);
-		this.width = initProp(signal(0), props.width);
-		this.height = initProp(signal(0), props.height);
-		this.cornerRadius = initProp(signal(0), props.cornerRadius);
-		this.registerTarget("width", this.width, "number");
-		this.registerTarget("height", this.height, "number");
-		this.registerTarget("cornerRadius", this.cornerRadius, "number");
-	}
-	intrinsicSize() {
-		return {
-			w: this.width(),
-			h: this.height()
-		};
-	}
-	pathSegs() {
-		const w = this.width();
-		const h = this.height();
-		const r = Math.min(Math.max(0, this.cornerRadius()), w / 2, h / 2);
-		return roundedRectSegs(-w / 2, -h / 2, w, h, r);
-	}
-};
-var Circle = class extends Shape {
-	radius;
-	constructor(props = {}) {
-		super(props);
-		this.radius = initProp(signal(0), props.radius);
-		this.registerTarget("radius", this.radius, "number");
-	}
-	intrinsicSize() {
-		const d = this.radius() * 2;
-		return {
-			w: d,
-			h: d
-		};
-	}
-	pathSegs() {
-		const r = this.radius();
-		return [[
-			"E",
-			0,
-			0,
-			r,
-			r,
-			0,
-			0,
-			Math.PI * 2
-		], ["Z"]];
-	}
-};
-/**
-* Arbitrary bezier geometry — the Lottie-import landing spot and the target
-* of native path morphs. Coordinates are node-local (the node origin is
-* wherever the author put 0,0); flow placement uses the control-point bounds.
-*/
-var Path = class extends Shape {
-	data;
-	constructor(props = {}) {
-		super(props);
-		this.data = initProp(signal([]), props.data);
-		this.registerTarget("d", this.data, "path");
-	}
-	/** Control-point bounding box (conservative: contains the true curve). */
-	bounds() {
-		let minX = Infinity;
-		let minY = Infinity;
-		let maxX = -Infinity;
-		let maxY = -Infinity;
-		for (const c of this.data()) for (let i = 0; i < c.v.length; i++) {
-			const vx = c.v[i][0];
-			const vy = c.v[i][1];
-			const candidates = [
-				[vx, vy],
-				[vx + c.in[i][0], vy + c.in[i][1]],
-				[vx + c.out[i][0], vy + c.out[i][1]]
-			];
-			for (const p of candidates) {
-				if (p[0] < minX) minX = p[0];
-				if (p[1] < minY) minY = p[1];
-				if (p[0] > maxX) maxX = p[0];
-				if (p[1] > maxY) maxY = p[1];
-			}
-		}
-		if (minX > maxX) return {
-			minX: 0,
-			minY: 0,
-			maxX: 0,
-			maxY: 0
-		};
-		return {
-			minX,
-			minY,
-			maxX,
-			maxY
-		};
-	}
-	intrinsicSize() {
-		const b = this.bounds();
-		return {
-			w: b.maxX - b.minX,
-			h: b.maxY - b.minY
-		};
-	}
-	/** Geometry is node-local, not center-anchored: offset to the box's actual top-left. */
-	drawOffset() {
-		const b = this.bounds();
-		return {
-			x: b.minX,
-			y: b.minY
-		};
-	}
-	pathSegs() {
-		const segs = [];
-		for (const c of this.data()) {
-			const n = c.v.length;
-			if (n === 0) continue;
-			segs.push([
-				"M",
-				c.v[0][0],
-				c.v[0][1]
-			]);
-			for (let i = 0; i < n - 1; i++) segs.push([
-				"C",
-				c.v[i][0] + c.out[i][0],
-				c.v[i][1] + c.out[i][1],
-				c.v[i + 1][0] + c.in[i + 1][0],
-				c.v[i + 1][1] + c.in[i + 1][1],
-				c.v[i + 1][0],
-				c.v[i + 1][1]
-			]);
-			if (c.closed && n > 1) {
-				segs.push([
-					"C",
-					c.v[n - 1][0] + c.out[n - 1][0],
-					c.v[n - 1][1] + c.out[n - 1][1],
-					c.v[0][0] + c.in[0][0],
-					c.v[0][1] + c.in[0][1],
-					c.v[0][0],
-					c.v[0][1]
-				]);
-				segs.push(["Z"]);
-			}
-		}
-		return segs;
-	}
-};
-var ImageNode = class extends Node {
-	/** Marks this node as referencing a kind 'image' timeline asset (§2.3). */
-	static assetKind = "image";
-	assetId;
-	width;
-	height;
-	constructor(props) {
-		super(props);
-		this.assetId = props.assetId;
-		this.width = initProp(signal(0), props.width);
-		this.height = initProp(signal(0), props.height);
-		this.registerTarget("width", this.width, "number");
-		this.registerTarget("height", this.height, "number");
-	}
-	intrinsicSize() {
-		return {
-			w: this.width(),
-			h: this.height()
-		};
-	}
-	draw(out) {
-		const w = this.width();
-		const h = this.height();
-		if (w <= 0 || h <= 0) return;
-		const image = out.resource({
-			kind: "image",
-			assetId: this.assetId
-		});
-		out.push({
-			op: "drawImage",
-			image,
-			dst: {
-				x: -w / 2,
-				y: -h / 2,
-				w,
-				h
-			}
-		});
-	}
-};
-/**
-* Pure given a warmed VideoFrameSource (§3.8): emit() does only the
-* frame-indexed media-time arithmetic — mediaT = trimStart + (t - at) * rate —
-* and references the exact source-grid frame; backends resolve it.
-*/
-var Video = class extends Node {
-	/** Marks this node as referencing a kind 'video' timeline asset (§3.8). */
-	static assetKind = "video";
-	assetId;
-	at;
-	trimStart;
-	playbackRate;
-	clipDuration;
-	sourceFps;
-	width;
-	height;
-	constructor(props) {
-		super(props);
-		this.assetId = props.assetId;
-		this.at = props.at ?? 0;
-		this.trimStart = props.trimStart ?? 0;
-		this.playbackRate = props.playbackRate ?? 1;
-		this.clipDuration = props.clipDuration;
-		this.sourceFps = props.sourceFps;
-		this.width = initProp(signal(0), props.width);
-		this.height = initProp(signal(0), props.height);
-		this.registerTarget("width", this.width, "number");
-		this.registerTarget("height", this.height, "number");
-	}
-	/** Frame-indexed media time for timeline time t; null when outside the clip. */
-	mediaTime(t) {
-		const local = (t - this.at) * this.playbackRate;
-		if (local < 0) return null;
-		if (this.clipDuration !== void 0 && t - this.at >= this.clipDuration) return null;
-		const mediaT = this.trimStart + local;
-		if (this.sourceFps !== void 0) return Math.floor(mediaT * this.sourceFps + 1e-9) / this.sourceFps;
-		return mediaT;
-	}
-	draw(out, ctx) {
-		const mediaT = this.mediaTime(ctx.time);
-		if (mediaT === null) return;
-		const w = this.width();
-		const h = this.height();
-		if (w <= 0 || h <= 0) return;
-		const image = out.resource({
-			kind: "videoFrame",
-			assetId: this.assetId,
-			mediaT
-		});
-		out.push({
-			op: "drawImage",
-			image,
-			dst: {
-				x: -w / 2,
-				y: -h / 2,
-				w,
-				h
-			}
-		});
-	}
-};
-var Text = class extends Node {
-	text;
-	fill;
-	fontSize;
-	fontFamily;
-	fontWeight;
-	fontStyle;
-	align;
-	width;
-	lineHeight;
-	reveal;
-	constructor(props = {}) {
-		super(props);
-		this.text = initProp(signal(""), props.text);
-		this.fill = initProp(signal("#000000"), props.fill);
-		this.fontSize = initProp(signal(16), props.fontSize);
-		this.fontFamily = props.fontFamily ?? "sans-serif";
-		this.fontWeight = props.fontWeight ?? 400;
-		this.fontStyle = props.fontStyle ?? "normal";
-		this.align = props.align ?? "left";
-		this.width = initProp(signal(0), props.width);
-		this.lineHeight = props.lineHeight ?? 1.25;
-		this.reveal = initProp(signal(Number.POSITIVE_INFINITY), props.reveal);
-		this.registerTarget("width", this.width, "number");
-		this.registerTarget("text", this.text, "string");
-		this.registerTarget("fill", this.fill, "color");
-		this.registerTarget("fontSize", this.fontSize, "number");
-		this.registerTarget("reveal", this.reveal, "number");
-	}
-	intrinsicSize(measurer) {
-		const text = this.text();
-		if (!text) return {
-			w: 0,
-			h: 0
-		};
-		const font = {
-			family: this.fontFamily,
-			size: this.fontSize(),
-			weight: this.fontWeight,
-			...this.fontStyle === "italic" ? { style: "italic" } : {}
-		};
-		const maxWidth = this.width();
-		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, measurer);
-		const widest = Math.max(...lines.map((l) => quantize(measurer.measureText(l, font).width)), 0);
-		return {
-			w: maxWidth > 0 ? maxWidth : widest,
-			h: quantize(font.size * this.lineHeight) * lines.length
-		};
-	}
-	/** Text draws from a baseline origin at its align edge, not a center (§3.6). */
-	drawOffset(measurer) {
-		const m = measurer ?? this.measurerSource?.() ?? fallbackMeasurer();
-		const size = this.intrinsicSize(m);
-		const font = {
-			family: this.fontFamily,
-			size: this.fontSize(),
-			weight: this.fontWeight,
-			...this.fontStyle === "italic" ? { style: "italic" } : {}
-		};
-		const firstLine = breakLines(this.text(), font, this.width() > 0 ? this.width() : void 0, m)[0] ?? "";
-		const ascent = m.measureText(firstLine, font).ascent;
-		return {
-			x: this.align === "left" ? 0 : this.align === "center" ? -size.w / 2 : -size.w,
-			y: -ascent
-		};
-	}
-	/**
-	* The wrapped box {w, h}, measured with the scene's active measurer — the
-	* same numbers Layout flows with, public so bindings never hand-calculate
-	* text dimensions (e.g. underline width = () => title.measuredSize().w).
-	*/
-	measuredSize(measurer) {
-		return this.intrinsicSize(measurer ?? this.measurerSource?.() ?? fallbackMeasurer());
-	}
-	/**
-	* Per-line ink boxes in this node's DRAW space (origin = first baseline at
-	* the align edge), from the same breakLines pass that draws. Pull-based:
-	* re-measures when text/font/width animate. Blank lines (from '\n\n')
-	* produce no box. The substrate for highlights, underlines, per-line
-	* reveals, selections.
-	*/
-	lineBoxes(measurer) {
-		const m = measurer ?? this.measurerSource?.() ?? fallbackMeasurer();
-		const text = this.text();
-		if (!text) return [];
-		const font = {
-			family: this.fontFamily,
-			size: this.fontSize(),
-			weight: this.fontWeight,
-			...this.fontStyle === "italic" ? { style: "italic" } : {}
-		};
-		const maxWidth = this.width();
-		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, m);
-		const step = quantize(font.size * this.lineHeight);
-		const boxes = [];
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-			if (!line) continue;
-			const met = m.measureText(line, font);
-			const w = quantize(met.width);
-			const x = this.align === "left" ? 0 : this.align === "center" ? -w / 2 : -w;
-			boxes.push({
-				text: line,
-				x,
-				y: i * step - met.ascent,
-				w,
-				h: met.ascent + met.descent
-			});
-		}
-		return boxes;
-	}
-	/**
-	* Per-word ink boxes within each laid-out line — the SAME segmentation the
-	* breaker flows (Intl.Segmenter boundaries, punctuation glued), positioned
-	* by cumulative prefix advances so cross-word kerning is exact and word
-	* widths sum to the line's width. Whitespace contributes advance but no
-	* box. Pair index-wise with a narration manifest's word timestamps for
-	* karaoke; draw your own rects for sub-line multi-color token work.
-	*/
-	wordBoxes(measurer) {
-		const m = measurer ?? this.measurerSource?.() ?? fallbackMeasurer();
-		const text = this.text();
-		if (!text) return [];
-		const font = {
-			family: this.fontFamily,
-			size: this.fontSize(),
-			weight: this.fontWeight,
-			...this.fontStyle === "italic" ? { style: "italic" } : {}
-		};
-		const maxWidth = this.width();
-		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, m);
-		const step = quantize(font.size * this.lineHeight);
-		const boxes = [];
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-			if (!line) continue;
-			const met = m.measureText(line, font);
-			const lineW = quantize(met.width);
-			const lineX = this.align === "left" ? 0 : this.align === "center" ? -lineW / 2 : -lineW;
-			const y = i * step - met.ascent;
-			const h = met.ascent + met.descent;
-			let prefix = "";
-			for (const seg of segmentWords(line)) {
-				const start = prefix;
-				prefix += seg;
-				const word = seg.trim();
-				if (word === "") continue;
-				const lead = seg.length - seg.trimStart().length;
-				const before = m.measureText(start + seg.slice(0, lead), font).width;
-				const after = m.measureText(start + seg.trimEnd(), font).width;
-				boxes.push({
-					text: word,
-					line: i,
-					x: lineX + before,
-					y,
-					w: after - before,
-					h
-				});
-			}
-		}
-		return boxes;
-	}
-	/**
-	* The laid-out grapheme stream the typewriter reveal advances over — every
-	* grapheme of every wrapped line, in reading order (soft-wrap whitespace is
-	* dropped by the breaker, exactly as drawn, so draw/revealHead/revealSchedule
-	* all agree). Pull-based; its length is the `reveal` count that shows
-	* everything. Author a per-keystroke staircase straight off it:
-	*
-	*   const g = title.graphemes();
-	*   track('title/reveal', 'number',
-	*     g.map((_, i) => key(t0 + i * 0.05, i + 1, { interp: 'hold' })));
-	*/
-	graphemes(measurer) {
-		const m = measurer ?? this.measurerSource?.() ?? fallbackMeasurer();
-		const text = this.text();
-		if (!text) return [];
-		const font = {
-			family: this.fontFamily,
-			size: this.fontSize(),
-			weight: this.fontWeight,
-			...this.fontStyle === "italic" ? { style: "italic" } : {}
-		};
-		const maxWidth = this.width();
-		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, m);
-		const out = [];
-		for (const line of lines) for (const g of segmentGraphemes(line)) out.push(g);
-		return out;
-	}
-	/**
-	* Draw-space position of the reveal head — the caret point just after the
-	* last revealed grapheme, for the current `reveal` value. Drives TextCursor;
-	* honours align and wrap exactly like wordBoxes(). At reveal 0 it sits at the
-	* start of the first line; fully revealed, at the end of the last line.
-	*/
-	revealHead(measurer) {
-		const m = measurer ?? this.measurerSource?.() ?? fallbackMeasurer();
-		const font = {
-			family: this.fontFamily,
-			size: this.fontSize(),
-			weight: this.fontWeight,
-			...this.fontStyle === "italic" ? { style: "italic" } : {}
-		};
-		const maxWidth = this.width();
-		const lines = breakLines(this.text(), font, maxWidth > 0 ? maxWidth : void 0, m);
-		const step = quantize(font.size * this.lineHeight);
-		const total = lines.reduce((n, l) => n + segmentGraphemes(l).length, 0);
-		const revealRaw = this.reveal();
-		const shown = Math.max(0, Math.min(Number.isFinite(revealRaw) ? Math.floor(revealRaw) : total, total));
-		let remaining = shown;
-		let last = {
-			x: 0,
-			y: 0,
-			h: 0,
-			line: 0,
-			index: shown
-		};
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i] ?? "";
-			const met = m.measureText(line, font);
-			const lineW = quantize(met.width);
-			const lineX = this.align === "left" ? 0 : this.align === "center" ? -lineW / 2 : -lineW;
-			const y = i * step - met.ascent;
-			const h = met.ascent + met.descent;
-			const gs = segmentGraphemes(line);
-			if (remaining <= gs.length) return {
-				x: lineX + (remaining <= 0 ? 0 : m.measureText(gs.slice(0, remaining).join(""), font).width),
-				y,
-				h,
-				line: i,
-				index: shown
-			};
-			remaining -= gs.length;
-			last = {
-				x: lineX + met.width,
-				y,
-				h,
-				line: i,
-				index: shown
-			};
-		}
-		return last;
-	}
-	draw(out, ctx) {
-		const text = this.text();
-		if (!text) return;
-		const font = {
-			family: this.fontFamily,
-			size: this.fontSize(),
-			weight: this.fontWeight,
-			...this.fontStyle === "italic" ? { style: "italic" } : {}
-		};
-		const maxWidth = this.width();
-		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, ctx.measurer);
-		const step = quantize(font.size * this.lineHeight);
-		const revealRaw = this.reveal();
-		const masked = Number.isFinite(revealRaw);
-		let remaining = masked ? Math.max(0, Math.floor(revealRaw)) : 0;
-		for (let i = 0; i < lines.length; i++) {
-			const line = lines[i];
-			if (!line) continue;
-			if (!masked) {
-				out.push({
-					op: "fillText",
-					text: line,
-					font,
-					paint: {
-						kind: "color",
-						color: this.fill()
-					},
-					x: 0,
-					y: i * step,
-					...this.align !== "left" ? { align: this.align } : {}
-				});
-				continue;
-			}
-			if (remaining <= 0) break;
-			const gs = segmentGraphemes(line);
-			const show = Math.min(remaining, gs.length);
-			remaining -= show;
-			if (show === gs.length) out.push({
-				op: "fillText",
-				text: line,
-				font,
-				paint: {
-					kind: "color",
-					color: this.fill()
-				},
-				x: 0,
-				y: i * step,
-				...this.align !== "left" ? { align: this.align } : {}
-			});
-			else {
-				const lineW = quantize(ctx.measurer.measureText(line, font).width);
-				const lineX = this.align === "left" ? 0 : this.align === "center" ? -lineW / 2 : -lineW;
-				out.push({
-					op: "fillText",
-					text: gs.slice(0, show).join(""),
-					font,
-					paint: {
-						kind: "color",
-						color: this.fill()
-					},
-					x: lineX,
-					y: i * step
-				});
-			}
-		}
-	}
-};
-/**
-* Pure per-grapheme schedule from a Text and its reveal track — geometry from
-* the text, timing from the track. A grapheme's time is the first key whose
-* value reveals it (value >= index + 1); graphemes the track never reaches are
-* omitted. The single source SFX keystroke-sync consumes (keystrokeClips()):
-* one click per mark at `at: mark.time`, char-class policy (skip space/newline,
-* pick a sample) decided downstream from `mark.grapheme`.
-*/
-function revealSchedule(text, reveal, measurer) {
-	const m = measurer ?? text.measurerSource?.() ?? fallbackMeasurer();
-	const src = text.text();
-	if (!src) return [];
-	const font = {
-		family: text.fontFamily,
-		size: text.fontSize(),
-		weight: text.fontWeight,
-		...text.fontStyle === "italic" ? { style: "italic" } : {}
-	};
-	const maxWidth = text.width();
-	const lines = breakLines(src, font, maxWidth > 0 ? maxWidth : void 0, m);
-	const step = quantize(font.size * text.lineHeight);
-	const keys = reveal.keys;
-	const marks = [];
-	let k = 0;
-	for (let li = 0; li < lines.length; li++) {
-		const line = lines[li];
-		if (!line) continue;
-		const met = m.measureText(line, font);
-		const lineW = quantize(met.width);
-		const lineX = text.align === "left" ? 0 : text.align === "center" ? -lineW / 2 : -lineW;
-		const y = li * step - met.ascent;
-		let prefix = "";
-		for (const g of segmentGraphemes(line)) {
-			prefix += g;
-			const need = k + 1;
-			let time = Number.POSITIVE_INFINITY;
-			for (const key of keys) if (key.value >= need) {
-				time = key.t;
-				break;
-			}
-			if (Number.isFinite(time)) marks.push({
-				charIndex: k,
-				grapheme: g,
-				time,
-				x: lineX + m.measureText(prefix, font).width,
-				y,
-				line: li
-			});
-			k++;
-		}
-	}
-	return marks;
-}
-//#endregion
 //#region src/layoutEngine.ts
 var LayoutEngineMissingError = class extends Error {
 	constructor() {
@@ -2034,4 +17,4 @@ function requireLayoutEngine() {
 	return engine;
 }
 //#endregion
-export { multiply as $, estimatingMeasurer as A, validateFilters as B, sketchStrokes as C, resolveAnchor as D, Node as E, setDefaultMeasurer as F, formatDisplayDiff as G, DlSnapshotError as H, FilterValidationError as I, IDENTITY as J, parseDisplaySnapshot as K, createDisplayListBuilder as L, quantize as M, segmentGraphemes as N, MEASURE_QUANTUM_PX as O, segmentWords as P, matEquals as Q, filtersToCanvasFilter as R, roughen as S, validateSketch as T, collapseReplacer as U, DL_SNAPSHOT_VERSION as V, diffDisplayLists as W, fromTRS as X, applyToPoint as Y, invert as Z, arcLength as _, Circle as a, hashStr as b, ImageNode as c, Text as d, Video as f, SketchValidationError as g, roundedRectSegs as h, setLayoutEngine as i, fallbackMeasurer as j, breakLines as k, Path as l, revealSchedule as m, getLayoutEngine as n, Custom as o, pathFromSegs as p, serializeDisplayList as q, requireLayoutEngine as r, Group as s, LayoutEngineMissingError as t, Rect as u, flatten as v, validateHachure as w, resolveSketch as x, hachureLines as y, glow as z };
+export { setLayoutEngine as i, getLayoutEngine as n, requireLayoutEngine as r, LayoutEngineMissingError as t };