@glissade/scene 0.20.0-pre.3 → 0.20.0-pre.5

package/dist/constructionProps.js

@@ -50,7 +50,8 @@ const NODE_CONSTRUCTION_PROP_NAMES = {
 		"fontWeight",
 		"fontStyle",
 		"align",
-		"lineHeight"
+		"lineHeight",
+		"fontVariationSettings"
 	],
 	Image: ["assetId"],
 	Video: [

package/dist/describe.d.ts

@@ -95,7 +95,8 @@ interface ApiManifest {
   /**
    * The curated helper/factory surface (0.20) — `createPlayer`/`mount`,
    * `motionPath`/`followPath`, `clip`/`clipList`, `renderToDataURL`/`snapshotCanvas`,
-   * `splitText`. Every `name` is also a `window.glissade.<name>` global on the IIFE.
+   * `splitText`, `Grid`, and the `Stack`/`Row`/`Column` layout factories. Every
+   * `name` is also a `window.glissade.<name>` global on the IIFE.
    */
   helpers: DescribedHelper[];
   createScene: string;

package/dist/describe.js

@@ -23,7 +23,7 @@ import { easings, listValueTypes } from "@glissade/core";
 * never pulled onto the base embed path — a scene that never calls `describe()`
 * pays zero bytes for it.
 */
-const RAW_VERSION = "0.20.0-pre.3";
+const RAW_VERSION = "0.20.0-pre.5";
 const PACKAGE_VERSION = RAW_VERSION.includes("GLISSADE_".concat("VERSION")) ? "0.0.0-dev" : RAW_VERSION;
 /** Arity of a value type's numeric repr: vec2/vec2-arc → 2, number → 1; others (color/paint/path/string/boolean) carry no scalar arity. */
 function arityOf(type) {
@@ -74,7 +74,8 @@ const CONSTRUCTION_PROP_META = {
 		fontWeight: { type: "number" },
 		fontStyle: { type: "'normal'|'italic'" },
 		align: { type: "'left'|'center'|'right'" },
-		lineHeight: { type: "number" }
+		lineHeight: { type: "number" },
+		fontVariationSettings: { type: "string" }
 	},
 	Image: { assetId: {
 		type: "string",
@@ -330,6 +331,30 @@ const HELPERS = [
 		summary: "Split a Text node into per-word / per-char parts you can animate individually (kinetic typography). Tree-shaken off the base scene index.",
 		import: "@glissade/scene/type",
 		usage: "splitText(text: Text, opts?: { by?: 'word'|'char' }): Node[]"
+	},
+	{
+		name: "Grid",
+		summary: "Build-time CSS-grid-style track resolver: position plain children into a column grid (fr/px tracks + gaps), returning a Group. Pure fan-out (no Yoga, no new target) — the goldens hold by construction. Tree-shaken off the base scene index.",
+		import: "@glissade/scene/grid",
+		usage: "Grid({ columns: number | (number | { fr })[], children: Node[], gap?, columnGap?, rowGap?, cellHeight?, width? }): Group  —  child[i] → row floor(i/cols), col i%cols"
+	},
+	{
+		name: "Stack",
+		summary: "Yoga-flexbox layout factory (column by default) — a Layout subclass that stacks children with gap/padding/justify/align. Needs loadYogaLayoutEngine() before mount/render. On the @glissade/scene/layout subpath.",
+		import: "@glissade/scene/layout",
+		usage: "Stack({ children, direction?: 'row'|'column', gap?, padding?, justify?, align? }): Layout"
+	},
+	{
+		name: "Row",
+		summary: "Yoga-flexbox layout factory pinned to direction:\"row\" — children laid out horizontally. Needs loadYogaLayoutEngine() before mount/render. On the @glissade/scene/layout subpath.",
+		import: "@glissade/scene/layout",
+		usage: "Row({ children, gap?, padding?, justify?, align? }): Layout"
+	},
+	{
+		name: "Column",
+		summary: "Yoga-flexbox layout factory pinned to direction:\"column\" — children laid out vertically. Needs loadYogaLayoutEngine() before mount/render. On the @glissade/scene/layout subpath.",
+		import: "@glissade/scene/layout",
+		usage: "Column({ children, gap?, padding?, justify?, align? }): Layout"
 	}
 ];
 /** One-line "what's there" for each documented tree-shakeable subpath entry. */

package/dist/diagnostics.d.ts

@@ -1,8 +1,7 @@
-import { i as DrawCommand, m as Resource, n as DisplayList, r as DisplayListBuilder } from "./displayList.js";
+import { i as DrawCommand, m as Resource, n as DisplayList } from "./displayList.js";
 import { t as collapseReplacer } from "./collapseReplacer.js";
-import { B as NodeProps, L as EvalContext, V as PropInit, _ as WordBox, p as Text, z as Node } from "./nodes.js";
 import { r as Scene } from "./scene.js";
-import { Timeline, Vec2 } from "@glissade/core";
+import { Timeline } from "@glissade/core";
 
 //#region src/displayDiff.d.ts
 
@@ -104,56 +103,4 @@ interface CacheColdResult {
  */
 declare function auditCacheCold(createScene: () => Scene, doc: Timeline, t: number): CacheColdResult;
 //#endregion
-//#region src/tokenHighlight.d.ts
-interface TokenRange {
-  /** token text (whitespace-insensitive run match) or inclusive [from, to] wordBoxes indices */
-  match: string | readonly [number, number];
-  /** which occurrence of a string match; default 1 (the first) */
-  occurrence?: number;
-  /** range id for track targets ('<nodeId>/<rangeId>/fill' …); default 'r<index>' */
-  id?: string;
-  fill?: PropInit<string>;
-  opacity?: PropInit<number>;
-  /** 0→1 left-to-right reveal across the range; default 1 */
-  progress?: PropInit<number>;
-  /** scale about the range rect's center; default 1 */
-  scale?: PropInit<number>;
-  /** translation of the range's rects, px — shakes and nudges; default [0, 0] */
-  offset?: PropInit<Vec2>;
-}
-interface TokenHighlightProps extends NodeProps {
-  /** the Text whose tokens get highlighted; place this node as an EARLIER sibling */
-  text: Text;
-  ranges: TokenRange[];
-  /** marker overhang beyond the ink box, [x, y] px; default [4, 2] */
-  padding?: [number, number];
-  cornerRadius?: number;
-  /** re-resolve string matches every frame (animated text); default false — drift throws */
-  rematch?: boolean;
-}
-declare class TokenMatchError extends Error {
-  constructor(message: string);
-}
-/**
- * Find the Nth whitespace-stripped consecutive run of boxes equal to token.
- * Boundary-exact: a run that diverges mid-segment is not a match; ending
- * mid-segment throws (with the real segment list) rather than half-boxing.
- */
-declare function matchTokenRun(boxes: WordBox[], token: string, occurrence?: number): [number, number];
-declare class TokenHighlight extends Node {
-  readonly target: Text;
-  readonly padding: [number, number];
-  readonly cornerRadius: number;
-  readonly rematch: boolean;
-  private readonly ranges;
-  constructor(props: TokenHighlightProps);
-  private resolveRun;
-  protected draw(out: DisplayListBuilder, ctx: EvalContext): void;
-}
-/**
- * `children: [tokenHighlight(para, { ranges: [{ match: '$48,200', fill: cat.money }] }), para]`
- * — each range animates independently via '<id>/<rangeId>/fill|opacity|progress|scale'.
- */
-declare function tokenHighlight(text: Text, props: Omit<TokenHighlightProps, 'text'>): TokenHighlight;
-//#endregion
-export { type CacheColdResult, type CommandDelta, DL_SNAPSHOT_VERSION, type DisplayDiff, type DlSnapshot, DlSnapshotError, type FieldChange, TokenHighlight, type TokenHighlightProps, TokenMatchError, type TokenRange, auditCacheCold, collapseReplacer, diffDisplayLists, formatDisplayDiff, matchTokenRun, parseDisplaySnapshot, serializeDisplayList, tokenHighlight };
+export { type CacheColdResult, type CommandDelta, DL_SNAPSHOT_VERSION, type DisplayDiff, type DlSnapshot, DlSnapshotError, type FieldChange, auditCacheCold, collapseReplacer, diffDisplayLists, formatDisplayDiff, parseDisplaySnapshot, serializeDisplayList };

package/dist/diagnostics.js

@@ -1,6 +1,5 @@
-import { H as IDENTITY, K as matEquals, L as createDisplayListBuilder, V as collapseReplacer, f as roundedRectSegs, p as Node, r as Group } from "./nodes.js";
+import { L as createDisplayListBuilder, V as collapseReplacer, r as Group } from "./nodes.js";
 import { a as evaluate } from "./scene.js";
-import { signal, vec2Signal } from "@glissade/core";
 //#region src/displayDiff.ts
 /** A flat, stable JSON value for one command with its resource ids INLINED to content. */
 function commandView(cmd, resources) {
@@ -192,193 +191,4 @@ function auditCacheCold(createScene, doc, t) {
 	};
 }
 //#endregion
-//#region src/tokenHighlight.ts
-/**
-* Multi-range token highlight: sub-line ranges over a Text node's wordBoxes,
-* each with its OWN animatable fill/opacity/progress/scale — four-color
-* category passes, per-token flips, karaoke-with-color. Design answers from
-* downstream production (the NNDL verification ritual):
-*  - ranges VALIDATE at construction and THROW on copy drift at draw — the
-*    throw is load-bearing (it catches edited copy that no longer matches);
-*    `rematch: true` opts animated text into per-frame re-resolution.
-*  - a range spanning a wrap produces one rect per line segment.
-*  - string matches are whitespace-stripped consecutive box runs and must end
-*    boundary-exact (mid-segment end = error listing the actual segments);
-*    `[wordIndex, wordIndex]` ranges sidestep matching entirely.
-*/
-var TokenMatchError = class extends Error {
-	constructor(message) {
-		super(message);
-		this.name = "TokenMatchError";
-	}
-};
-const stripWs = (s) => s.replace(/\s+/g, "");
-/**
-* Find the Nth whitespace-stripped consecutive run of boxes equal to token.
-* Boundary-exact: a run that diverges mid-segment is not a match; ending
-* mid-segment throws (with the real segment list) rather than half-boxing.
-*/
-function matchTokenRun(boxes, token, occurrence = 1) {
-	const want = stripWs(token);
-	if (want.length === 0) throw new TokenMatchError("empty token");
-	let seen = 0;
-	for (let i = 0; i < boxes.length; i++) {
-		let acc = "";
-		for (let j = i; j < boxes.length; j++) {
-			acc += stripWs(boxes[j].text);
-			if (acc === want) {
-				seen++;
-				if (seen === occurrence) return [i, j];
-				break;
-			}
-			if (!want.startsWith(acc)) break;
-		}
-	}
-	throw new TokenMatchError(`no match for token '${token}'${occurrence > 1 ? ` (occurrence ${occurrence})` : ""} — segments are [${boxes.map((b) => `'${b.text}'`).join(", ")}]`);
-}
-var TokenHighlight = class extends Node {
-	target;
-	padding;
-	cornerRadius;
-	rematch;
-	ranges;
-	constructor(props) {
-		super(props);
-		this.target = props.text;
-		this.padding = props.padding ?? [4, 2];
-		this.cornerRadius = props.cornerRadius ?? 4;
-		this.rematch = props.rematch ?? false;
-		const boxes = this.target.wordBoxes();
-		this.ranges = props.ranges.map((spec, index) => {
-			const run = this.resolveRun(boxes, spec);
-			const id = spec.id ?? `r${index}`;
-			const r = {
-				spec,
-				fill: init(signal("#ffe066"), spec.fill),
-				opacity: init(signal(1), spec.opacity),
-				progress: init(signal(1), spec.progress),
-				scale: init(signal(1), spec.scale),
-				offset: initVec(vec2Signal([0, 0]), spec.offset),
-				run,
-				bound: runText(boxes, run)
-			};
-			this.registerTarget(`${id}/fill`, r.fill, "color");
-			this.registerTarget(`${id}/opacity`, r.opacity, "number");
-			this.registerTarget(`${id}/progress`, r.progress, "number");
-			this.registerTarget(`${id}/scale`, r.scale, "number");
-			this.registerTarget(`${id}/offset`, r.offset, "vec2");
-			this.registerTarget(`${id}/offset.x`, r.offset.x, "number");
-			this.registerTarget(`${id}/offset.y`, r.offset.y, "number");
-			return r;
-		});
-	}
-	resolveRun(boxes, spec) {
-		if (typeof spec.match !== "string") {
-			const [from, to] = spec.match;
-			if (from < 0 || to >= boxes.length || from > to) throw new TokenMatchError(`word index range [${from}, ${to}] out of bounds (${boxes.length} boxes)`);
-			return [from, to];
-		}
-		return matchTokenRun(boxes, spec.match, spec.occurrence ?? 1);
-	}
-	draw(out, ctx) {
-		const boxes = this.target.wordBoxes(ctx.measurer);
-		if (boxes.length === 0) return;
-		const tm = this.target.localMatrix();
-		const [px, py] = this.padding;
-		let pushedTransform = false;
-		for (const r of this.ranges) {
-			const opacity = r.opacity();
-			if (opacity <= 0) continue;
-			const progress = Math.min(1, Math.max(0, r.progress()));
-			if (progress <= 0) continue;
-			let run = r.run;
-			if (this.rematch && typeof r.spec.match === "string") run = matchTokenRun(boxes, r.spec.match, r.spec.occurrence ?? 1);
-			else if (runText(boxes, run) !== r.bound) throw new TokenMatchError(`bound token '${r.bound}' no longer matches boxes [${run[0]}, ${run[1]}] — the text changed (segments now [${boxes.slice(run[0], run[1] + 1).map((b) => `'${b.text}'`).join(", ")}]); pass rematch: true for animated text`);
-			const lineRects = [];
-			for (let i = run[0]; i <= run[1]; i++) {
-				const b = boxes[i];
-				const last = lineRects[lineRects.length - 1];
-				const cur = i > run[0] && boxes[i - 1].line === b.line ? last : void 0;
-				if (cur) {
-					cur.w = b.x + b.w + px - cur.x;
-					cur.y = Math.min(cur.y, b.y - py);
-					cur.h = Math.max(cur.h, b.y + b.h + py - cur.y);
-				} else lineRects.push({
-					x: b.x - px,
-					y: b.y - py,
-					w: b.w + 2 * px,
-					h: b.h + 2 * py
-				});
-			}
-			if (!pushedTransform && !matEquals(tm, IDENTITY)) {
-				out.push({
-					op: "transform",
-					m: tm
-				});
-				pushedTransform = true;
-			}
-			const grouped = opacity < 1;
-			if (grouped) out.push({
-				op: "pushGroup",
-				opacity,
-				blend: "source-over",
-				filters: []
-			});
-			const fill = r.fill();
-			const scale = r.scale();
-			const [ox, oy] = r.offset();
-			let remaining = progress * lineRects.reduce((sum, q) => sum + q.w, 0);
-			for (const q of lineRects) {
-				const fillW = Math.min(q.w, remaining);
-				remaining -= fillW;
-				if (fillW <= 0) break;
-				const cx = q.x + q.w / 2 + ox;
-				const cy = q.y + q.h / 2 + oy;
-				const w = fillW * scale;
-				const h = q.h * scale;
-				const x = cx - q.w / 2 * scale;
-				const y = cy - h / 2;
-				const rad = Math.min(this.cornerRadius, w / 2, h / 2);
-				const path = out.resource({
-					kind: "path",
-					segs: roundedRectSegs(x, y, w, h, rad)
-				});
-				out.push({
-					op: "fillPath",
-					path,
-					paint: {
-						kind: "color",
-						color: fill
-					}
-				});
-				if (remaining <= 0) break;
-			}
-			if (grouped) out.push({ op: "popGroup" });
-		}
-	}
-};
-function runText(boxes, run) {
-	return boxes.slice(run[0], run[1] + 1).map((b) => stripWs(b.text)).join("");
-}
-/**
-* `children: [tokenHighlight(para, { ranges: [{ match: '$48,200', fill: cat.money }] }), para]`
-* — each range animates independently via '<id>/<rangeId>/fill|opacity|progress|scale'.
-*/
-function tokenHighlight(text, props) {
-	return new TokenHighlight({
-		...props,
-		text
-	});
-}
-function init(sig, v) {
-	if (typeof v === "function") sig.bindSource(v);
-	else if (v !== void 0) sig.set(v);
-	return sig;
-}
-function initVec(sig, v) {
-	if (typeof v === "function") sig.bindSource(v);
-	else if (v !== void 0) sig.set(v);
-	return sig;
-}
-//#endregion
-export { DL_SNAPSHOT_VERSION, DlSnapshotError, TokenHighlight, TokenMatchError, auditCacheCold, collapseReplacer, diffDisplayLists, formatDisplayDiff, matchTokenRun, parseDisplaySnapshot, serializeDisplayList, tokenHighlight };
+export { DL_SNAPSHOT_VERSION, DlSnapshotError, auditCacheCold, collapseReplacer, diffDisplayLists, formatDisplayDiff, parseDisplaySnapshot, serializeDisplayList };

package/dist/tokens.d.ts

@@ -0,0 +1,58 @@
+import { r as DisplayListBuilder } from "./displayList.js";
+import { B as NodeProps, L as EvalContext, V as PropInit, _ as WordBox, p as Text, z as Node } from "./nodes.js";
+import { Vec2 } from "@glissade/core";
+
+//#region src/tokenHighlight.d.ts
+
+interface TokenRange {
+  /** token text (whitespace-insensitive run match) or inclusive [from, to] wordBoxes indices */
+  match: string | readonly [number, number];
+  /** which occurrence of a string match; default 1 (the first) */
+  occurrence?: number;
+  /** range id for track targets ('<nodeId>/<rangeId>/fill' …); default 'r<index>' */
+  id?: string;
+  fill?: PropInit<string>;
+  opacity?: PropInit<number>;
+  /** 0→1 left-to-right reveal across the range; default 1 */
+  progress?: PropInit<number>;
+  /** scale about the range rect's center; default 1 */
+  scale?: PropInit<number>;
+  /** translation of the range's rects, px — shakes and nudges; default [0, 0] */
+  offset?: PropInit<Vec2>;
+}
+interface TokenHighlightProps extends NodeProps {
+  /** the Text whose tokens get highlighted; place this node as an EARLIER sibling */
+  text: Text;
+  ranges: TokenRange[];
+  /** marker overhang beyond the ink box, [x, y] px; default [4, 2] */
+  padding?: [number, number];
+  cornerRadius?: number;
+  /** re-resolve string matches every frame (animated text); default false — drift throws */
+  rematch?: boolean;
+}
+declare class TokenMatchError extends Error {
+  constructor(message: string);
+}
+/**
+ * Find the Nth whitespace-stripped consecutive run of boxes equal to token.
+ * Boundary-exact: a run that diverges mid-segment is not a match; ending
+ * mid-segment throws (with the real segment list) rather than half-boxing.
+ */
+declare function matchTokenRun(boxes: WordBox[], token: string, occurrence?: number): [number, number];
+declare class TokenHighlight extends Node {
+  readonly target: Text;
+  readonly padding: [number, number];
+  readonly cornerRadius: number;
+  readonly rematch: boolean;
+  private readonly ranges;
+  constructor(props: TokenHighlightProps);
+  private resolveRun;
+  protected draw(out: DisplayListBuilder, ctx: EvalContext): void;
+}
+/**
+ * `children: [tokenHighlight(para, { ranges: [{ match: '$48,200', fill: cat.money }] }), para]`
+ * — each range animates independently via '<id>/<rangeId>/fill|opacity|progress|scale'.
+ */
+declare function tokenHighlight(text: Text, props: Omit<TokenHighlightProps, 'text'>): TokenHighlight;
+//#endregion
+export { TokenHighlight, type TokenHighlightProps, TokenMatchError, type TokenRange, matchTokenRun, tokenHighlight };

package/dist/tokens.js

@@ -0,0 +1,192 @@
+import { H as IDENTITY, K as matEquals, f as roundedRectSegs, p as Node } from "./nodes.js";
+import { signal, vec2Signal } from "@glissade/core";
+//#region src/tokenHighlight.ts
+/**
+* Multi-range token highlight: sub-line ranges over a Text node's wordBoxes,
+* each with its OWN animatable fill/opacity/progress/scale — four-color
+* category passes, per-token flips, karaoke-with-color. Design answers from
+* downstream production (the NNDL verification ritual):
+*  - ranges VALIDATE at construction and THROW on copy drift at draw — the
+*    throw is load-bearing (it catches edited copy that no longer matches);
+*    `rematch: true` opts animated text into per-frame re-resolution.
+*  - a range spanning a wrap produces one rect per line segment.
+*  - string matches are whitespace-stripped consecutive box runs and must end
+*    boundary-exact (mid-segment end = error listing the actual segments);
+*    `[wordIndex, wordIndex]` ranges sidestep matching entirely.
+*/
+var TokenMatchError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "TokenMatchError";
+	}
+};
+const stripWs = (s) => s.replace(/\s+/g, "");
+/**
+* Find the Nth whitespace-stripped consecutive run of boxes equal to token.
+* Boundary-exact: a run that diverges mid-segment is not a match; ending
+* mid-segment throws (with the real segment list) rather than half-boxing.
+*/
+function matchTokenRun(boxes, token, occurrence = 1) {
+	const want = stripWs(token);
+	if (want.length === 0) throw new TokenMatchError("empty token");
+	let seen = 0;
+	for (let i = 0; i < boxes.length; i++) {
+		let acc = "";
+		for (let j = i; j < boxes.length; j++) {
+			acc += stripWs(boxes[j].text);
+			if (acc === want) {
+				seen++;
+				if (seen === occurrence) return [i, j];
+				break;
+			}
+			if (!want.startsWith(acc)) break;
+		}
+	}
+	throw new TokenMatchError(`no match for token '${token}'${occurrence > 1 ? ` (occurrence ${occurrence})` : ""} — segments are [${boxes.map((b) => `'${b.text}'`).join(", ")}]`);
+}
+var TokenHighlight = class extends Node {
+	target;
+	padding;
+	cornerRadius;
+	rematch;
+	ranges;
+	constructor(props) {
+		super(props);
+		this.target = props.text;
+		this.padding = props.padding ?? [4, 2];
+		this.cornerRadius = props.cornerRadius ?? 4;
+		this.rematch = props.rematch ?? false;
+		const boxes = this.target.wordBoxes();
+		this.ranges = props.ranges.map((spec, index) => {
+			const run = this.resolveRun(boxes, spec);
+			const id = spec.id ?? `r${index}`;
+			const r = {
+				spec,
+				fill: init(signal("#ffe066"), spec.fill),
+				opacity: init(signal(1), spec.opacity),
+				progress: init(signal(1), spec.progress),
+				scale: init(signal(1), spec.scale),
+				offset: initVec(vec2Signal([0, 0]), spec.offset),
+				run,
+				bound: runText(boxes, run)
+			};
+			this.registerTarget(`${id}/fill`, r.fill, "color");
+			this.registerTarget(`${id}/opacity`, r.opacity, "number");
+			this.registerTarget(`${id}/progress`, r.progress, "number");
+			this.registerTarget(`${id}/scale`, r.scale, "number");
+			this.registerTarget(`${id}/offset`, r.offset, "vec2");
+			this.registerTarget(`${id}/offset.x`, r.offset.x, "number");
+			this.registerTarget(`${id}/offset.y`, r.offset.y, "number");
+			return r;
+		});
+	}
+	resolveRun(boxes, spec) {
+		if (typeof spec.match !== "string") {
+			const [from, to] = spec.match;
+			if (from < 0 || to >= boxes.length || from > to) throw new TokenMatchError(`word index range [${from}, ${to}] out of bounds (${boxes.length} boxes)`);
+			return [from, to];
+		}
+		return matchTokenRun(boxes, spec.match, spec.occurrence ?? 1);
+	}
+	draw(out, ctx) {
+		const boxes = this.target.wordBoxes(ctx.measurer);
+		if (boxes.length === 0) return;
+		const tm = this.target.localMatrix();
+		const [px, py] = this.padding;
+		let pushedTransform = false;
+		for (const r of this.ranges) {
+			const opacity = r.opacity();
+			if (opacity <= 0) continue;
+			const progress = Math.min(1, Math.max(0, r.progress()));
+			if (progress <= 0) continue;
+			let run = r.run;
+			if (this.rematch && typeof r.spec.match === "string") run = matchTokenRun(boxes, r.spec.match, r.spec.occurrence ?? 1);
+			else if (runText(boxes, run) !== r.bound) throw new TokenMatchError(`bound token '${r.bound}' no longer matches boxes [${run[0]}, ${run[1]}] — the text changed (segments now [${boxes.slice(run[0], run[1] + 1).map((b) => `'${b.text}'`).join(", ")}]); pass rematch: true for animated text`);
+			const lineRects = [];
+			for (let i = run[0]; i <= run[1]; i++) {
+				const b = boxes[i];
+				const last = lineRects[lineRects.length - 1];
+				const cur = i > run[0] && boxes[i - 1].line === b.line ? last : void 0;
+				if (cur) {
+					cur.w = b.x + b.w + px - cur.x;
+					cur.y = Math.min(cur.y, b.y - py);
+					cur.h = Math.max(cur.h, b.y + b.h + py - cur.y);
+				} else lineRects.push({
+					x: b.x - px,
+					y: b.y - py,
+					w: b.w + 2 * px,
+					h: b.h + 2 * py
+				});
+			}
+			if (!pushedTransform && !matEquals(tm, IDENTITY)) {
+				out.push({
+					op: "transform",
+					m: tm
+				});
+				pushedTransform = true;
+			}
+			const grouped = opacity < 1;
+			if (grouped) out.push({
+				op: "pushGroup",
+				opacity,
+				blend: "source-over",
+				filters: []
+			});
+			const fill = r.fill();
+			const scale = r.scale();
+			const [ox, oy] = r.offset();
+			let remaining = progress * lineRects.reduce((sum, q) => sum + q.w, 0);
+			for (const q of lineRects) {
+				const fillW = Math.min(q.w, remaining);
+				remaining -= fillW;
+				if (fillW <= 0) break;
+				const cx = q.x + q.w / 2 + ox;
+				const cy = q.y + q.h / 2 + oy;
+				const w = fillW * scale;
+				const h = q.h * scale;
+				const x = cx - q.w / 2 * scale;
+				const y = cy - h / 2;
+				const rad = Math.min(this.cornerRadius, w / 2, h / 2);
+				const path = out.resource({
+					kind: "path",
+					segs: roundedRectSegs(x, y, w, h, rad)
+				});
+				out.push({
+					op: "fillPath",
+					path,
+					paint: {
+						kind: "color",
+						color: fill
+					}
+				});
+				if (remaining <= 0) break;
+			}
+			if (grouped) out.push({ op: "popGroup" });
+		}
+	}
+};
+function runText(boxes, run) {
+	return boxes.slice(run[0], run[1] + 1).map((b) => stripWs(b.text)).join("");
+}
+/**
+* `children: [tokenHighlight(para, { ranges: [{ match: '$48,200', fill: cat.money }] }), para]`
+* — each range animates independently via '<id>/<rangeId>/fill|opacity|progress|scale'.
+*/
+function tokenHighlight(text, props) {
+	return new TokenHighlight({
+		...props,
+		text
+	});
+}
+function init(sig, v) {
+	if (typeof v === "function") sig.bindSource(v);
+	else if (v !== void 0) sig.set(v);
+	return sig;
+}
+function initVec(sig, v) {
+	if (typeof v === "function") sig.bindSource(v);
+	else if (v !== void 0) sig.set(v);
+	return sig;
+}
+//#endregion
+export { TokenHighlight, TokenMatchError, matchTokenRun, tokenHighlight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/scene",
-  "version": "0.20.0-pre.3",
+  "version": "0.20.0-pre.5",
   "description": "glissade scene graph: nodes, transforms, DisplayList emission. Renderer-agnostic; zero DOM/Node dependencies.",
   "license": "Apache-2.0",
   "engines": {
@@ -41,6 +41,10 @@
       "types": "./dist/diagnostics.d.ts",
       "default": "./dist/diagnostics.js"
     },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "default": "./dist/tokens.js"
+    },
     "./motion": {
       "types": "./dist/motion.d.ts",
       "default": "./dist/motion.js"
@@ -55,7 +59,7 @@
   ],
   "dependencies": {
     "yoga-layout": "^3.2.1",
-    "@glissade/core": "0.20.0-pre.3"
+    "@glissade/core": "0.20.0-pre.5"
   },
   "repository": {
     "type": "git",