@glissade/scene 0.19.1 → 0.20.0-pre.3

package/dist/motion.d.ts

@@ -0,0 +1,60 @@
+import { B as NodeProps, V as PropInit, c as Path, z as Node } from "./nodes.js";
+import { BindableSignal, PathValue, Vec2 } from "@glissade/core";
+
+//#region src/motionPath.d.ts
+
+/** An arc-length-parameterized sampler over a path. */
+interface PathSampler {
+  /** total arc length */
+  readonly length: number;
+  /** point at arc-length s (clamped to [0, length]) */
+  at(s: number): Vec2;
+  /** unit tangent at arc-length s (forward direction of travel) */
+  tangentAt(s: number): Vec2;
+  /** point at normalized progress u in [0, 1] */
+  atProgress(u: number): Vec2;
+  /** unit tangent at normalized progress u in [0, 1] */
+  tangentAtProgress(u: number): Vec2;
+}
+/**
+ * Build a reusable arc-length sampler. Densely samples each cubic into a
+ * cumulative-length polyline (samplesPerSegment, default 32) so `at`/`tangent`
+ * are simple span lerps — smooth enough for motion, no per-call bezier solve.
+ */
+declare function motionPath(path: PathValue, opts?: {
+  samplesPerSegment?: number;
+}): PathSampler;
+/** Total arc length of a path. */
+declare function pathLength(path: PathValue): number;
+/** Point at arc-length s along a path (clamped to [0, length]). */
+declare function pointAtLength(path: PathValue, s: number): Vec2;
+interface FollowPathProps extends NodeProps {
+  /** the node to move along the path; its position (and rotation, if orient) is owned by this */
+  target: Node;
+  /** a static PathValue, or a Path node followed LIVE (re-sampled as its `data` morphs) */
+  path: PathValue | Path;
+  /** 0→1 position along the path's arc length; default 1 (the end). Track `<id>/progress`. */
+  progress?: PropInit<number>;
+  /** rotate the target to the path tangent — a cursor that points where it heads; default false */
+  orient?: boolean;
+  /** degrees added to the orient angle (e.g. if the sprite points up at rest) */
+  orientOffset?: number;
+  samplesPerSegment?: number;
+}
+/**
+ * A companion node that drives `target` along `path` as `progress` animates.
+ * Owns the target's `position` (and `rotation` when `orient`) via pull-based
+ * binding, so there's no eval-order side effect. Add it to the scene (its
+ * `progress` is the animatable target); it draws nothing itself.
+ */
+declare class FollowPath extends Node {
+  readonly target: Node;
+  readonly progress: BindableSignal<number>;
+  constructor(props: FollowPathProps);
+  protected draw(): void;
+}
+/** `children: [route, cursor, followPath(cursor, route, { orient: true })]` — cursor traces the route.
+ * Pass the Path *node* to follow it as it morphs; pass a PathValue for a fixed route. */
+declare function followPath(target: Node, path: PathValue | Path, props?: Omit<FollowPathProps, 'target' | 'path'>): FollowPath;
+//#endregion
+export { FollowPath, type FollowPathProps, type PathSampler, followPath, motionPath, pathLength, pointAtLength };

package/dist/motion.js

@@ -0,0 +1,171 @@
+import { a as Path, p as Node } from "./nodes.js";
+import { signal } from "@glissade/core";
+//#region src/motionPath.ts
+/**
+* Motion along a path: sample a point (and tangent) at an arc-length position on
+* a PathValue, and drive a node along it over time. The Path node draws/morphs
+* geometry; this is the companion that makes another node — a cursor, a dot, an
+* arrow — *travel* that geometry.
+*
+* Sampling is arc-length parameterized (constant speed), so progress 0→1 moves
+* evenly instead of bunching at the control points. Pure and deterministic: the
+* table is built once from a static PathValue and `atProgress` is a pure
+* function of progress, so evaluate() stays pure and goldens are byte-stable.
+*/
+const clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function cubicPoint(p0, p1, p2, p3, 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 * p1[0] + c * p2[0] + d * p3[0], a * p0[1] + b * p1[1] + c * p2[1] + d * p3[1]];
+}
+/** PathValue contours → cubic segments, same v/in/out math as Path.pathSegs. */
+function toCubics(path) {
+	const out = [];
+	for (const ct of path) {
+		const n = ct.v.length;
+		for (let i = 0; i < n - 1; i++) out.push([
+			ct.v[i],
+			[ct.v[i][0] + ct.out[i][0], ct.v[i][1] + ct.out[i][1]],
+			[ct.v[i + 1][0] + ct.in[i + 1][0], ct.v[i + 1][1] + ct.in[i + 1][1]],
+			ct.v[i + 1]
+		]);
+		if (ct.closed && n > 1) out.push([
+			ct.v[n - 1],
+			[ct.v[n - 1][0] + ct.out[n - 1][0], ct.v[n - 1][1] + ct.out[n - 1][1]],
+			[ct.v[0][0] + ct.in[0][0], ct.v[0][1] + ct.in[0][1]],
+			ct.v[0]
+		]);
+	}
+	return out;
+}
+/**
+* Build a reusable arc-length sampler. Densely samples each cubic into a
+* cumulative-length polyline (samplesPerSegment, default 32) so `at`/`tangent`
+* are simple span lerps — smooth enough for motion, no per-call bezier solve.
+*/
+function motionPath(path, opts = {}) {
+	const steps = Math.max(1, Math.floor(opts.samplesPerSegment ?? 32));
+	const cubics = toCubics(path);
+	const pts = [];
+	const cum = [];
+	if (cubics.length > 0) {
+		let prev = cubicPoint(...cubics[0], 0);
+		pts.push(prev);
+		cum.push(0);
+		let acc = 0;
+		for (const cub of cubics) for (let k = 1; k <= steps; k++) {
+			const p = cubicPoint(...cub, k / steps);
+			acc += Math.hypot(p[0] - prev[0], p[1] - prev[1]);
+			pts.push(p);
+			cum.push(acc);
+			prev = p;
+		}
+	} else {
+		const first = path[0]?.v[0];
+		pts.push(first ? [first[0], first[1]] : [0, 0]);
+		cum.push(0);
+	}
+	const total = cum[cum.length - 1];
+	const locate = (s) => {
+		if (total <= 0 || s <= 0) return {
+			i: 0,
+			f: 0
+		};
+		if (s >= total) return {
+			i: pts.length - 2,
+			f: 1
+		};
+		let i = 0;
+		while (i < cum.length - 1 && cum[i + 1] < s) i++;
+		const span = cum[i + 1] - cum[i];
+		return {
+			i,
+			f: span > 0 ? (s - cum[i]) / span : 0
+		};
+	};
+	const at = (s) => {
+		if (pts.length === 1) return [pts[0][0], pts[0][1]];
+		const { i, f } = locate(s);
+		const a = pts[i];
+		const b = pts[i + 1];
+		return [a[0] + (b[0] - a[0]) * f, a[1] + (b[1] - a[1]) * f];
+	};
+	const tangentAt = (s) => {
+		if (pts.length === 1) return [1, 0];
+		const { i } = locate(s);
+		const a = pts[i];
+		const b = pts[i + 1];
+		const dx = b[0] - a[0];
+		const dy = b[1] - a[1];
+		const len = Math.hypot(dx, dy);
+		return len > 0 ? [dx / len, dy / len] : [1, 0];
+	};
+	return {
+		length: total,
+		at,
+		tangentAt,
+		atProgress: (u) => at(clamp01(u) * total),
+		tangentAtProgress: (u) => tangentAt(clamp01(u) * total)
+	};
+}
+/** Total arc length of a path. */
+function pathLength(path) {
+	return motionPath(path).length;
+}
+/** Point at arc-length s along a path (clamped to [0, length]). */
+function pointAtLength(path, s) {
+	return motionPath(path).at(s);
+}
+/**
+* A companion node that drives `target` along `path` as `progress` animates.
+* Owns the target's `position` (and `rotation` when `orient`) via pull-based
+* binding, so there's no eval-order side effect. Add it to the scene (its
+* `progress` is the animatable target); it draws nothing itself.
+*/
+var FollowPath = class extends Node {
+	target;
+	progress;
+	constructor(props) {
+		super(props);
+		this.target = props.target;
+		this.progress = signal(1);
+		if (typeof props.progress === "function") this.progress.bindSource(props.progress);
+		else if (props.progress !== void 0) this.progress.set(props.progress);
+		this.registerTarget("progress", this.progress, "number");
+		const sOpts = props.samplesPerSegment !== void 0 ? { samplesPerSegment: props.samplesPerSegment } : {};
+		const getPath = props.path instanceof Path ? () => props.path.data() : () => props.path;
+		let cachedPath = getPath();
+		let cachedSampler = motionPath(cachedPath, sOpts);
+		const sampler = () => {
+			const pv = getPath();
+			if (pv !== cachedPath) {
+				cachedPath = pv;
+				cachedSampler = motionPath(pv, sOpts);
+			}
+			return cachedSampler;
+		};
+		props.target.position.bindSource(() => sampler().atProgress(this.progress()));
+		if (props.orient) {
+			const offset = props.orientOffset ?? 0;
+			props.target.rotation.bindSource(() => {
+				const t = sampler().tangentAtProgress(this.progress());
+				return Math.atan2(t[1], t[0]) * 180 / Math.PI + offset;
+			});
+		}
+	}
+	draw() {}
+};
+/** `children: [route, cursor, followPath(cursor, route, { orient: true })]` — cursor traces the route.
+* Pass the Path *node* to follow it as it morphs; pass a PathValue for a fixed route. */
+function followPath(target, path, props = {}) {
+	return new FollowPath({
+		...props,
+		target,
+		path
+	});
+}
+//#endregion
+export { FollowPath, followPath, motionPath, pathLength, pointAtLength };

package/dist/nodes.d.ts

@@ -201,6 +201,14 @@ declare abstract class Node {
     unbindSource(): void;
   }, expects?: ValueTypeId | readonly ValueTypeId[]): void;
   resolveTarget(path: string): BindablePropTarget | undefined;
+  /**
+   * This node's DESCRIBE type name (e.g. `Image`, `Rect`) — the key the
+   * construction-prop schema and `describe()` manifest use. Defaults to the
+   * class name; `ImageNode` overrides it (its class name is `ImageNode`, but
+   * the public taxonomy name is `Image`). Used by the bind guard to turn a
+   * generic unbound-target error into a friendlier construction-prop message.
+   */
+  get describeType(): string;
   /**
    * Enumerate this node's registered track-target paths and the value type each
    * accepts — the introspection seam `describe()` reads to build the API
@@ -493,6 +501,8 @@ interface ImageProps extends NodeProps {
 declare class ImageNode extends Node {
   /** Marks this node as referencing a kind 'image' timeline asset (§2.3). */
   static readonly assetKind: "image";
+  /** Public taxonomy name is `Image` (the class is `ImageNode`). */
+  get describeType(): string;
   readonly assetId: string;
   readonly width: BindableSignal<number>;
   readonly height: BindableSignal<number>;
@@ -586,14 +596,18 @@ interface TextProps extends NodeProps {
   fontStyle?: 'normal' | 'italic';
   /**
    * Variable-font axis settings in CSS `font-variation-settings` form
-   * (e.g. `'"wght" 700, "opsz" 14'`). **Not yet applied.** Accepted so the
-   * input is discoverable + typed, but as of 0.19 neither rasterizer wires
-   * variation axes through, so setting it emits a dev-warning and is otherwise
-   * a no-op (the value does NOT reach `ctx.font`). Animatable axes (a `wght`
-   * track, `opsz` driven by size, …) are a 0.20 feature. Until then, drive a
-   * weight axis via the discrete `fontWeight` named instances your font ships.
-   * Tracked so a silent drop becomes a loud one — see the splitText measurer
-   * precedent (0.19).
+   * (e.g. `'"wght" 700, "opsz" 14'`). 0.20 STATIC passthrough: threaded into
+   * `FontSpec` and applied by the rasterizer where the context supports it —
+   * the Skia/export path (`@napi-rs/canvas` exposes a settable
+   * `ctx.fontVariationSettings`) renders the axes; the browser DOM 2D context
+   * has no such property, so axes are best-effort there (a guarded no-op, never
+   * a throw). OMITTED when unset, so default Text emits a byte-identical
+   * FontSpec. Axes are STATIC only in 0.20 — **animatable** axes (a `wght`
+   * track, `opsz` driven by size, …) are deferred to 1.0 (an opaque CSS string
+   * isn't lerp-able); a track targeting `<id>/fontVariationSettings` hard-throws
+   * `UnboundTargetError` today (no property signal resolves to it). For a
+   * dynamic weight, use the discrete `fontWeight` named instances your font
+   * ships.
    */
   fontVariationSettings?: string;
   /** Horizontal alignment about the node position; default 'left'. */
@@ -629,6 +643,8 @@ declare class Text extends Node {
   readonly fontFamily: string;
   readonly fontWeight: number;
   readonly fontStyle: 'normal' | 'italic';
+  /** Static variable-font axes (CSS `font-variation-settings`); undefined = none. */
+  readonly fontVariationSettings: string | undefined;
   readonly align: 'left' | 'center' | 'right';
   readonly width: BindableSignal<number>;
   readonly lineHeight: number;
@@ -640,6 +656,14 @@ declare class Text extends Node {
    */
   readonly revealFraction: BindableSignal<number>;
   constructor(props?: TextProps);
+  /**
+   * The per-draw {@link FontSpec} — the single construction point every measure
+   * / layout / draw path routes through, so the spec is identical across them.
+   * `style: 'normal'` and an unset `fontVariationSettings` are OMITTED so a
+   * default-style, no-axes Text emits a byte-identical FontSpec (§3.6; the
+   * golden corpus depends on it).
+   */
+  private fontSpec;
   /**
    * The grapheme COUNT to reveal this frame — the single source the draw mask,
    * {@link revealHead}, and the masked emit path all read. When `revealFraction`

package/dist/nodes.js

@@ -61,14 +61,23 @@ 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
+//#region src/collapseReplacer.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.
+* The byte-preserving collapse-replacer (DESIGN.md §3.3 / §3.5).
+*
+* Extracted to its OWN tiny module in the 0.20 budget review so the heavy
+* DEV/CLI diagnostic surface (`diffDisplayLists`/`serializeDisplayList`/… in
+* `displayDiff.ts`, now on the `@glissade/scene/diagnostics` subpath) can leave
+* the base scene graph while THIS function — which IS on the render path — stays
+* reachable from `displayList.ts` (the §3.5 cacheKey serializer) at a few bytes.
+* Before the split, `displayList.ts` imported `collapseReplacer` from
+* `displayDiff.ts`, dragging the entire diff/snapshot module into every embed.
+*
+* Shared by the cacheKey serializer (`createDisplayListBuilder().cacheKey`),
+* `cacheColdAudit.hashDisplayList`, and `serializeDisplayList`. 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).
@@ -99,136 +108,6 @@ function collapseReplacer(_key, value) {
 	}
 	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 {
@@ -914,6 +793,16 @@ var Node = class {
 		return this.targets.get(path);
 	}
 	/**
+	* This node's DESCRIBE type name (e.g. `Image`, `Rect`) — the key the
+	* construction-prop schema and `describe()` manifest use. Defaults to the
+	* class name; `ImageNode` overrides it (its class name is `ImageNode`, but
+	* the public taxonomy name is `Image`). Used by the bind guard to turn a
+	* generic unbound-target error into a friendlier construction-prop message.
+	*/
+	get describeType() {
+		return this.constructor.name;
+	}
+	/**
 	* Enumerate this node's registered track-target paths and the value type each
 	* accepts — the introspection seam `describe()` reads to build the API
 	* manifest from the REAL `registerTarget` calls (so it can't drift). Returns
@@ -1006,6 +895,7 @@ var Node = class {
 		const shader = this.groupShader();
 		const group = this.requiresGroup() || shader !== void 0 || this.cache;
 		const wantsKey = this.cache && out.mark !== void 0;
+		out.enterNode?.(this.id);
 		out.push({ op: "save" });
 		if (!isIdentity) out.push({
 			op: "transform",
@@ -1032,6 +922,7 @@ var Node = class {
 			out.push({ op: "popGroup" });
 		}
 		out.push({ op: "restore" });
+		out.exitNode?.();
 	}
 };
 //#endregion
@@ -1620,6 +1511,10 @@ var Path = class extends Shape {
 var ImageNode = class extends Node {
 	/** Marks this node as referencing a kind 'image' timeline asset (§2.3). */
 	static assetKind = "image";
+	/** Public taxonomy name is `Image` (the class is `ImageNode`). */
+	get describeType() {
+		return "Image";
+	}
 	assetId;
 	width;
 	height;
@@ -1725,6 +1620,8 @@ var Text = class extends Node {
 	fontFamily;
 	fontWeight;
 	fontStyle;
+	/** Static variable-font axes (CSS `font-variation-settings`); undefined = none. */
+	fontVariationSettings;
 	align;
 	width;
 	lineHeight;
@@ -1743,6 +1640,7 @@ var Text = class extends Node {
 		this.fontFamily = props.fontFamily ?? "sans-serif";
 		this.fontWeight = props.fontWeight ?? 400;
 		this.fontStyle = props.fontStyle ?? "normal";
+		this.fontVariationSettings = props.fontVariationSettings;
 		this.align = props.align ?? "left";
 		this.width = initProp(signal(0), props.width);
 		this.lineHeight = props.lineHeight ?? 1.25;
@@ -1756,6 +1654,22 @@ var Text = class extends Node {
 		this.registerTarget("revealFraction", this.revealFraction, "number");
 	}
 	/**
+	* The per-draw {@link FontSpec} — the single construction point every measure
+	* / layout / draw path routes through, so the spec is identical across them.
+	* `style: 'normal'` and an unset `fontVariationSettings` are OMITTED so a
+	* default-style, no-axes Text emits a byte-identical FontSpec (§3.6; the
+	* golden corpus depends on it).
+	*/
+	fontSpec() {
+		return {
+			family: this.fontFamily,
+			size: this.fontSize(),
+			weight: this.fontWeight,
+			...this.fontStyle === "italic" ? { style: "italic" } : {},
+			...this.fontVariationSettings !== void 0 ? { fontVariationSettings: this.fontVariationSettings } : {}
+		};
+	}
+	/**
 	* The grapheme COUNT to reveal this frame — the single source the draw mask,
 	* {@link revealHead}, and the masked emit path all read. When `revealFraction`
 	* is set (not NaN) it wins: `round(clamp(fraction, 0, 1) * graphemeCount)`,
@@ -1775,12 +1689,7 @@ var Text = class extends Node {
 			w: 0,
 			h: 0
 		};
-		const font = {
-			family: this.fontFamily,
-			size: this.fontSize(),
-			weight: this.fontWeight,
-			...this.fontStyle === "italic" ? { style: "italic" } : {}
-		};
+		const font = this.fontSpec();
 		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);
@@ -1793,12 +1702,7 @@ var Text = class extends Node {
 	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 font = this.fontSpec();
 		const firstLine = breakLines(this.text(), font, this.width() > 0 ? this.width() : void 0, m)[0] ?? "";
 		const ascent = m.measureText(firstLine, font).ascent;
 		return {
@@ -1826,12 +1730,7 @@ var Text = class extends Node {
 		if (measurer === void 0) warnIfEstimating(m, "Text.lineBoxes");
 		const text = this.text();
 		if (!text) return [];
-		const font = {
-			family: this.fontFamily,
-			size: this.fontSize(),
-			weight: this.fontWeight,
-			...this.fontStyle === "italic" ? { style: "italic" } : {}
-		};
+		const font = this.fontSpec();
 		const maxWidth = this.width();
 		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, m);
 		const step = quantize(font.size * this.lineHeight);
@@ -1865,12 +1764,7 @@ var Text = class extends Node {
 		if (measurer === void 0) warnIfEstimating(m, "Text.wordBoxes");
 		const text = this.text();
 		if (!text) return [];
-		const font = {
-			family: this.fontFamily,
-			size: this.fontSize(),
-			weight: this.fontWeight,
-			...this.fontStyle === "italic" ? { style: "italic" } : {}
-		};
+		const font = this.fontSpec();
 		const maxWidth = this.width();
 		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, m);
 		const step = quantize(font.size * this.lineHeight);
@@ -1920,12 +1814,7 @@ var Text = class extends Node {
 		if (measurer === void 0) warnIfEstimating(m, "Text.graphemeBoxes");
 		const text = this.text();
 		if (!text) return [];
-		const font = {
-			family: this.fontFamily,
-			size: this.fontSize(),
-			weight: this.fontWeight,
-			...this.fontStyle === "italic" ? { style: "italic" } : {}
-		};
+		const font = this.fontSpec();
 		const maxWidth = this.width();
 		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, m);
 		const step = quantize(font.size * this.lineHeight);
@@ -1972,12 +1861,7 @@ var Text = class extends Node {
 		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 font = this.fontSpec();
 		const maxWidth = this.width();
 		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, m);
 		const out = [];
@@ -1992,12 +1876,7 @@ var Text = class extends Node {
 	*/
 	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 font = this.fontSpec();
 		const maxWidth = this.width();
 		const lines = breakLines(this.text(), font, maxWidth > 0 ? maxWidth : void 0, m);
 		const step = quantize(font.size * this.lineHeight);
@@ -2041,12 +1920,7 @@ var Text = class extends Node {
 	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 font = this.fontSpec();
 		const maxWidth = this.width();
 		const lines = breakLines(text, font, maxWidth > 0 ? maxWidth : void 0, ctx.measurer);
 		const step = quantize(font.size * this.lineHeight);
@@ -2121,7 +1995,8 @@ function revealSchedule(text, reveal, measurer) {
 		family: text.fontFamily,
 		size: text.fontSize(),
 		weight: text.fontWeight,
-		...text.fontStyle === "italic" ? { style: "italic" } : {}
+		...text.fontStyle === "italic" ? { style: "italic" } : {},
+		...text.fontVariationSettings !== void 0 ? { fontVariationSettings: text.fontVariationSettings } : {}
 	};
 	const maxWidth = text.width();
 	const lines = breakLines(src, font, maxWidth > 0 ? maxWidth : void 0, m);
@@ -2159,4 +2034,4 @@ function revealSchedule(text, reveal, measurer) {
 	return marks;
 }
 //#endregion
-export { multiply as $, hashStr as A, validateFilters as B, segmentWords as C, arcLength as D, SketchValidationError as E, validateSketch as F, formatDisplayDiff as G, DlSnapshotError as H, FilterValidationError as I, IDENTITY as J, parseDisplaySnapshot as K, createDisplayListBuilder as L, roughen as M, sketchStrokes as N, flatten as O, validateHachure as P, matEquals as Q, filtersToCanvasFilter as R, segmentGraphemes as S, warnIfEstimating as T, collapseReplacer as U, DL_SNAPSHOT_VERSION as V, diffDisplayLists as W, fromTRS as X, applyToPoint as Y, invert as Z, breakLines as _, Path as a, isEstimatingMeasurer as b, Video as c, revealSchedule as d, roundedRectSegs as f, __resetEstimateWarnings as g, MEASURE_QUANTUM_PX as h, ImageNode as i, resolveSketch as j, hachureLines as k, coercePathData as l, resolveAnchor as m, Custom as n, Rect as o, Node as p, serializeDisplayList as q, Group as r, Text as s, Circle as t, pathFromSegs as u, estimatingMeasurer as v, setDefaultMeasurer as w, quantize as x, fallbackMeasurer as y, glow as z };
+export { hashStr as A, validateFilters as B, segmentWords as C, arcLength as D, SketchValidationError as E, validateSketch as F, invert as G, IDENTITY as H, FilterValidationError as I, matEquals as K, createDisplayListBuilder as L, roughen as M, sketchStrokes as N, flatten as O, validateHachure as P, filtersToCanvasFilter as R, segmentGraphemes as S, warnIfEstimating as T, applyToPoint as U, collapseReplacer as V, fromTRS as W, breakLines as _, Path as a, isEstimatingMeasurer as b, Video as c, revealSchedule as d, roundedRectSegs as f, __resetEstimateWarnings as g, MEASURE_QUANTUM_PX as h, ImageNode as i, resolveSketch as j, hachureLines as k, coercePathData as l, resolveAnchor as m, Custom as n, Rect as o, Node as p, multiply as q, Group as r, Text as s, Circle as t, pathFromSegs as u, estimatingMeasurer as v, setDefaultMeasurer as w, quantize as x, fallbackMeasurer as y, glow as z };