@glissade/scene 0.3.0 → 0.4.1

package/dist/index.d.ts

@@ -1,8 +1,34 @@
-import { $ as invert, A as breakLines, B as Paint, C as EvalContext, D as PropInit, E as NodeProps, F as DisplayListBuilder, G as StrokeStyle, H as Rect$1, I as DrawCommand, J as validateFilters, K as createDisplayListBuilder, L as FilterSpec, M as quantize, N as BlendMode, O as TextMeasurer, P as DisplayList, Q as fromTRS, R as FilterValidationError, S as BindablePropTarget, T as Node, U as Resource, V as PathSeg, W as ResourceId, X as Mat2x3, Y as IDENTITY, Z as applyToPoint, _ as ShapeProps, a as LayoutEngineMissingError, b as Video, c as requireLayoutEngine, d as Group, et as matEquals, f as ImageNode, g as Rect, h as PathProps, i as LayoutEngine, j as estimatingMeasurer, k as TextMetricsLite, l as setLayoutEngine, m as Path, n as LayoutChildSpec, p as ImageProps, q as filtersToCanvasFilter, r as LayoutContainerSpec, s as getLayoutEngine, t as LayoutBox, tt as multiply, u as Circle, v as Text, w as HitArea, x as VideoProps, y as TextProps, z as FontSpec } from "./layoutEngine.js";
-import { BoundTimeline, CompiledTimeline, Playhead, Timeline } from "@glissade/core";
+import { $ as glow, A as PropInit, B as DrawCommand, C as roundedRectSegs, D as HitArea, E as EvalContext, F as estimatingMeasurer, G as PathSeg, H as FilterValidationError, I as quantize, J as ResourceId, K as Rect$1, L as BlendMode, M as TextMeasurer, N as TextMetricsLite, O as Node, P as breakLines, Q as filtersToCanvasFilter, R as DisplayList, S as VideoProps, T as BindablePropTarget, U as FontSpec, V as FilterSpec, W as Paint, X as StrokeStyle, Y as ShaderRef, Z as createDisplayListBuilder, _ as Rect, a as LayoutEngineMissingError, at as invert, b as TextProps, c as requireLayoutEngine, d as Group, et as validateFilters, f as ImageNode, g as PathProps, h as Path, i as LayoutEngine, it as fromTRS, j as resolveAnchor, k as NodeProps, l as setLayoutEngine, m as LineBox, n as LayoutChildSpec, nt as Mat2x3, ot as matEquals, p as ImageProps, q as Resource, r as LayoutContainerSpec, rt as applyToPoint, s as getLayoutEngine, st as multiply, t as LayoutBox, tt as IDENTITY, u as Circle, v as ShapeProps, w as AnchorSpec, x as Video, y as Text, z as DisplayListBuilder } from "./layoutEngine.js";
+import { BindableSignal, BoundTimeline, CompiledTimeline, Playhead, Timeline } from "@glissade/core";
 
-//#region src/assets.d.ts
+//#region src/highlight.d.ts
 
+interface HighlightProps extends NodeProps {
+  /** The Text whose lines get the marker. Place this node as an EARLIER
+   * sibling (same parent) so it paints behind the glyphs. */
+  text: Text;
+  color?: PropInit<string>;
+  /** 0→1 sweep across all lines in reading order, at constant speed weighted
+   * by line width; default 1 (fully highlighted). Track: '<id>/progress'. */
+  progress?: PropInit<number>;
+  /** Marker overhang beyond each line's ink box, [x, y] px; default [4, 2]. */
+  padding?: [number, number];
+  /** Rounded marker ends; default 4 (clamped to the box). */
+  cornerRadius?: number;
+}
+declare class Highlight extends Node {
+  readonly target: Text;
+  readonly color: BindableSignal<string>;
+  readonly progress: BindableSignal<number>;
+  readonly padding: [number, number];
+  readonly cornerRadius: number;
+  constructor(props: HighlightProps);
+  protected draw(out: DisplayListBuilder, ctx: EvalContext): void;
+}
+/** `children: [highlight(title, { color: '#ffe066' }), title]` — marker behind the text. */
+declare function highlight(text: Text, props?: Omit<HighlightProps, 'text'>): Highlight;
+//#endregion
+//#region src/assets.d.ts
 /**
  * Asset contracts (DESIGN.md §3.8): evaluate() never awaits — callers warm
  * sources first (§2.5 readiness precondition), then emission is pure. The
@@ -37,6 +63,23 @@ declare class ColdAssetError extends Error {
   constructor(assetId: string, detail: string, mediaT?: number);
 }
 //#endregion
+//#region src/shaderEffect.d.ts
+interface ShaderEffectProps extends NodeProps {
+  children?: Node[];
+  /** WGSL fragment module: `struct Uniforms {...}` + `@fragment fn effect(@location(0) uv: vec2f) -> @location(0) vec4f`. */
+  wgsl: string;
+  /** Initial scalar uniforms; each becomes an animatable signal + track target 'u.<name>'. */
+  uniforms?: Record<string, number>;
+}
+declare class ShaderEffect extends Group {
+  readonly wgsl: string;
+  readonly uniformSignals: ReadonlyMap<string, BindableSignal<number>>;
+  constructor(props: ShaderEffectProps);
+  /** The live uniform signal (throws on unknown names — typos fail loudly). */
+  uniform(name: string): BindableSignal<number>;
+  protected groupShader(): ShaderRef;
+}
+//#endregion
 //#region src/raster2d.d.ts
 /** The structural path surface buildPath drives — DOM Path2D and @napi-rs Path2D both satisfy it. */
 interface PathLike {
@@ -60,6 +103,9 @@ interface Ctx2DLike<TPath, TDrawable> {
   fill(path: TPath): void;
   stroke(path: TPath): void;
   fillText(text: string, x: number, y: number): void;
+  measureText(text: string): {
+    width: number;
+  };
   drawImage(image: TDrawable, x: number, y: number, w?: number, h?: number): void;
   drawImage(image: TDrawable, sx: number, sy: number, sw: number, sh: number, x: number, y: number, w: number, h: number): void;
   setLineDash(segments: number[]): void;
@@ -85,15 +131,29 @@ interface Raster2DHost<TCanvas extends CanvasLike, TPath extends PathLike, TDraw
   context(canvas: TCanvas): Ctx2DLike<TPath, TDrawable>;
   createCanvas(w: number, h: number): TCanvas;
   newPath(): TPath;
+  /**
+   * §3.7 shader pass: run the WGSL effect over the group layer and return a
+   * drawable replacement, or null when unavailable. Absent/null → the layer
+   * composites unfiltered per caps.shaders (warn by default, error opt-in).
+   * Only browser hosts wire this (via @glissade/effects-webgpu); headless
+   * backends stay GPU-free by construction.
+   */
+  applyShader?(layer: TCanvas, shader: ShaderRef, w: number, h: number): TDrawable | null;
 }
+type ShaderCaps = 'warn' | 'error';
 declare function fontString(font: FontSpec): string;
 declare class Raster2D<TCanvas extends CanvasLike, TPath extends PathLike, TDrawable> {
   private readonly host;
+  /** caps.shaders (§3.7): what happens when a shader can't run here. */
+  private readonly shaderCaps;
   private readonly pool;
   private readonly pathCache;
+  private readonly pathBoundsCache;
   private readonly images;
   private readonly videos;
-  constructor(host: Raster2DHost<TCanvas, TPath, TDrawable>);
+  private warnedShaders;
+  constructor(host: Raster2DHost<TCanvas, TPath, TDrawable>, /** caps.shaders (§3.7): what happens when a shader can't run here. */
+  shaderCaps?: ShaderCaps);
   /** Register a decoded still (kind 'image' assets). */
   setImageAsset(assetId: string, image: TDrawable): void;
   /** Register a warmed-on-demand video source (kind 'video' assets, §3.8). */
@@ -101,6 +161,7 @@ declare class Raster2D<TCanvas extends CanvasLike, TPath extends PathLike, TDraw
   dispose(): void;
   private resolveDrawable;
   private path;
+  private pathBounds;
   private buildPath;
   private acquire;
   private release;
@@ -157,4 +218,4 @@ declare function bindScene(scene: Scene, doc: Timeline): BindingCacheEntry;
  */
 declare function evaluate(scene: Scene, doc: Timeline, t: number): DisplayList;
 //#endregion
-export { type BindablePropTarget, type BlendMode, type CanvasLike, Circle, ColdAssetError, type Ctx2DLike, type DisplayList, type DisplayListBuilder, type DrawCommand, DuplicateNodeIdError, type EvalContext, type FilterSpec, FilterValidationError, type FontSpec, Group, type HitArea, IDENTITY, type ImageHandle, ImageNode, type ImageProps, type LayoutBox, type LayoutChildSpec, type LayoutContainerSpec, type LayoutEngine, LayoutEngineMissingError, type Mat2x3, Node, type NodeProps, type Paint, Path, type PathLike, type PathProps, type PathSeg, type PropInit, Raster2D, type Raster2DHost, Rect, type Rect$1 as RectShape, type Resource, type ResourceId, type Scene, type SceneInit, type SceneModule, type ShapeProps, type StrokeStyle, Text, type TextMeasurer, type TextMetricsLite, type TextProps, Video, type VideoFrameSource, type VideoProps, applyToPoint, bindScene, breakLines, createDisplayListBuilder, createScene, estimatingMeasurer, evaluate, filtersToCanvasFilter, fontString, fromTRS, getLayoutEngine, invert, matEquals, multiply, quantize, requireLayoutEngine, setLayoutEngine, validateFilters };
+export { type AnchorSpec, type BindablePropTarget, type BlendMode, type CanvasLike, Circle, ColdAssetError, type Ctx2DLike, type DisplayList, type DisplayListBuilder, type DrawCommand, DuplicateNodeIdError, type EvalContext, type FilterSpec, FilterValidationError, type FontSpec, Group, Highlight, type HighlightProps, type HitArea, IDENTITY, type ImageHandle, ImageNode, type ImageProps, type LayoutBox, type LayoutChildSpec, type LayoutContainerSpec, type LayoutEngine, LayoutEngineMissingError, type LineBox, type Mat2x3, Node, type NodeProps, type Paint, Path, type PathLike, type PathProps, type PathSeg, type PropInit, Raster2D, type Raster2DHost, Rect, type Rect$1 as RectShape, type Resource, type ResourceId, type Scene, type SceneInit, type SceneModule, type ShaderCaps, ShaderEffect, type ShaderEffectProps, type ShaderRef, type ShapeProps, type StrokeStyle, Text, type TextMeasurer, type TextMetricsLite, type TextProps, Video, type VideoFrameSource, type VideoProps, applyToPoint, bindScene, breakLines, createDisplayListBuilder, createScene, estimatingMeasurer, evaluate, filtersToCanvasFilter, fontString, fromTRS, getLayoutEngine, glow, highlight, invert, matEquals, multiply, quantize, requireLayoutEngine, resolveAnchor, roundedRectSegs, setLayoutEngine, validateFilters };

package/dist/index.js

@@ -1,5 +1,84 @@
-import { C as invert, S as fromTRS, T as multiply, _ as createDisplayListBuilder, a as Circle, b as IDENTITY, c as Path, d as Video, f as Node, g as FilterValidationError, h as quantize, i as setLayoutEngine, l as Rect, m as estimatingMeasurer, n as getLayoutEngine, o as Group, p as breakLines, r as requireLayoutEngine, s as ImageNode, t as LayoutEngineMissingError, u as Text, v as filtersToCanvasFilter, w as matEquals, x as applyToPoint, y as validateFilters } from "./layoutEngine.js";
-import { bindTimeline, compileTimeline, createPlayhead, evaluateAt } from "@glissade/core";
+import { C as IDENTITY, D as matEquals, E as invert, O as multiply, S as validateFilters, T as fromTRS, _ as quantize, a as Circle, b as filtersToCanvasFilter, c as Path, d as Video, f as roundedRectSegs, g as estimatingMeasurer, h as breakLines, i as setLayoutEngine, l as Rect, m as resolveAnchor, n as getLayoutEngine, o as Group, p as Node, r as requireLayoutEngine, s as ImageNode, t as LayoutEngineMissingError, u as Text, v as FilterValidationError, w as applyToPoint, x as glow, y as createDisplayListBuilder } from "./layoutEngine.js";
+import { bindTimeline, compileTimeline, createPlayhead, emitDevWarning, evaluateAt, signal } from "@glissade/core";
+//#region src/highlight.ts
+/**
+* Marker-style text highlight: per-line rounded rects behind a Text node's
+* laid-out lines, swept by ONE 0→1 progress track in reading order. Lines
+* come from Text.lineBoxes() each frame, so the marker re-flows with wrap
+* width, font, and text animation — and the line count is dynamic because
+* the rects are draw() output, not child nodes. Pure data, both backends,
+* golden-coverable. For karaoke, key '<id>/progress' from narrate's
+* word timestamps.
+*/
+var Highlight = class extends Node {
+	target;
+	color;
+	progress;
+	padding;
+	cornerRadius;
+	constructor(props) {
+		super(props);
+		this.target = props.text;
+		this.color = init(signal("#ffe066"), props.color);
+		this.progress = init(signal(1), props.progress);
+		this.padding = props.padding ?? [4, 2];
+		this.cornerRadius = props.cornerRadius ?? 4;
+		this.registerTarget("progress", this.progress);
+		this.registerTarget("color", this.color);
+	}
+	draw(out, ctx) {
+		const progress = Math.min(1, Math.max(0, this.progress()));
+		if (progress <= 0) return;
+		const [px, py] = this.padding;
+		const boxes = this.target.lineBoxes(ctx.measurer).map((b) => ({
+			x: b.x - px,
+			y: b.y - py,
+			w: b.w + 2 * px,
+			h: b.h + 2 * py
+		}));
+		const total = boxes.reduce((sum, b) => sum + b.w, 0);
+		if (total <= 0) return;
+		const tm = this.target.localMatrix();
+		if (!matEquals(tm, IDENTITY)) out.push({
+			op: "transform",
+			m: tm
+		});
+		const color = this.color();
+		let remaining = progress * total;
+		for (const b of boxes) {
+			const fill = Math.min(b.w, remaining);
+			remaining -= fill;
+			if (fill <= 0) break;
+			const r = Math.min(this.cornerRadius, fill / 2, b.h / 2);
+			const path = out.resource({
+				kind: "path",
+				segs: roundedRectSegs(b.x, b.y, fill, b.h, r)
+			});
+			out.push({
+				op: "fillPath",
+				path,
+				paint: {
+					kind: "color",
+					color
+				}
+			});
+			if (remaining <= 0) break;
+		}
+	}
+};
+/** `children: [highlight(title, { color: '#ffe066' }), title]` — marker behind the text. */
+function highlight(text, props = {}) {
+	return new Highlight({
+		...props,
+		text
+	});
+}
+function init(sig, v) {
+	if (typeof v === "function") sig.bindSource(v);
+	else if (v !== void 0) sig.set(v);
+	return sig;
+}
+//#endregion
 //#region src/assets.ts
 var ColdAssetError = class extends Error {
 	assetId;
@@ -15,6 +94,45 @@ var ColdAssetError = class extends Error {
 	}
 };
 //#endregion
+//#region src/shaderEffect.ts
+/**
+* ShaderEffect (§3.7): a group whose rasterized subtree runs through a WGSL
+* pass. THIS FILE IS PURE DATA — the GPU runner lives in the browser-only
+* @glissade/effects-webgpu package; headless backends degrade per
+* caps.shaders (passthrough + warning by default). Uniforms are per-name
+* number signals registered as '<id>/u.<name>' track targets, so shader
+* params animate exactly like any other property.
+*/
+var ShaderEffect = class extends Group {
+	wgsl;
+	uniformSignals;
+	constructor(props) {
+		super(props);
+		this.wgsl = props.wgsl;
+		const map = /* @__PURE__ */ new Map();
+		for (const [name, value] of Object.entries(props.uniforms ?? {})) {
+			const sig = signal(value);
+			map.set(name, sig);
+			this.registerTarget(`u.${name}`, sig);
+		}
+		this.uniformSignals = map;
+	}
+	/** The live uniform signal (throws on unknown names — typos fail loudly). */
+	uniform(name) {
+		const sig = this.uniformSignals.get(name);
+		if (!sig) throw new Error(`ShaderEffect has no uniform '${name}' (have: ${[...this.uniformSignals.keys()].join(", ")})`);
+		return sig;
+	}
+	groupShader() {
+		const uniforms = {};
+		for (const [name, sig] of this.uniformSignals) uniforms[name] = sig();
+		return {
+			wgsl: this.wgsl,
+			uniforms
+		};
+	}
+};
+//#endregion
 //#region src/raster2d.ts
 /**
 * The shared DisplayList interpreter (§3.4): one command walk over the
@@ -26,14 +144,81 @@ var ColdAssetError = class extends Error {
 function fontString(font) {
 	return `${font.style === "italic" ? "italic " : ""}${font.weight !== void 0 && font.weight !== 400 ? `${font.weight} ` : ""}${font.size}px ${font.family}`;
 }
+/**
+* How far a filter chain can paint beyond its input (device px). Each stage
+* feeds the next, so outsets ADD. Gaussian reach: Skia truncates at 3σ and
+* the CSS blur/shadow radii are ≥ σ, so 3× the radius over-covers either
+* convention. Color-only filters map transparent → transparent: zero outset.
+*/
+function filterOutset(filters) {
+	let total = 0;
+	for (const f of filters ?? []) if (f.kind === "blur") total += 3 * f.radius;
+	else if (f.kind === "drop-shadow") total += Math.max(Math.abs(f.dx), Math.abs(f.dy)) + 3 * f.blur;
+	return total;
+}
+function growBounds(b, x, y) {
+	if (!b) return {
+		minX: x,
+		minY: y,
+		maxX: x,
+		maxY: y
+	};
+	if (x < b.minX) b.minX = x;
+	if (y < b.minY) b.minY = y;
+	if (x > b.maxX) b.maxX = x;
+	if (y > b.maxY) b.maxY = y;
+	return b;
+}
+/** Local-space rect (already outset) → device-space box under m. */
+function accumulateRect(layer, m, x0, y0, x1, y1) {
+	for (const [x, y] of [
+		[x0, y0],
+		[x1, y0],
+		[x0, y1],
+		[x1, y1]
+	]) layer.bounds = growBounds(layer.bounds, m[0] * x + m[2] * y + m[4], m[1] * x + m[3] * y + m[5]);
+}
+/** Control-point box of a path — curves and rotated ellipses stay inside it. */
+function segsBounds(segs) {
+	let b = null;
+	const pt = (x, y) => {
+		b = growBounds(b, x, y);
+	};
+	for (const seg of segs) switch (seg[0]) {
+		case "M":
+		case "L":
+			pt(seg[1], seg[2]);
+			break;
+		case "C":
+			pt(seg[1], seg[2]);
+			pt(seg[3], seg[4]);
+			pt(seg[5], seg[6]);
+			break;
+		case "Q":
+			pt(seg[1], seg[2]);
+			pt(seg[3], seg[4]);
+			break;
+		case "E": {
+			const r = Math.max(seg[3], seg[4]);
+			pt(seg[1] - r, seg[2] - r);
+			pt(seg[1] + r, seg[2] + r);
+			break;
+		}
+	}
+	return b;
+}
 var Raster2D = class {
 	host;
+	shaderCaps;
 	pool = [];
 	pathCache = /* @__PURE__ */ new WeakMap();
+	pathBoundsCache = /* @__PURE__ */ new WeakMap();
 	images = /* @__PURE__ */ new Map();
 	videos = /* @__PURE__ */ new Map();
-	constructor(host) {
+	warnedShaders = false;
+	constructor(host, shaderCaps = "warn") {
 		this.host = host;
+		this.shaderCaps = shaderCaps;
 	}
 	/** Register a decoded still (kind 'image' assets). */
 	setImageAsset(assetId, image) {
@@ -74,6 +259,12 @@ var Raster2D = class {
 		}
 		return p;
 	}
+	pathBounds(resources, id) {
+		const res = resources[id];
+		if (!res || res.kind !== "path") return null;
+		if (!this.pathBoundsCache.has(res)) this.pathBoundsCache.set(res, segsBounds(res.segs));
+		return this.pathBoundsCache.get(res) ?? null;
+	}
 	buildPath(segs) {
 		const p = this.host.newPath();
 		for (const seg of segs) switch (seg[0]) {
@@ -122,17 +313,25 @@ var Raster2D = class {
 			ctx: base,
 			canvas: null,
 			opacity: 1,
-			blend: "source-over"
+			blend: "source-over",
+			bounds: null,
+			unbounded: false
 		}];
 		const ctxOf = () => layers[layers.length - 1].ctx;
+		const top = () => layers[layers.length - 1];
+		let mat = IDENTITY;
+		const matStack = [];
 		for (const cmd of list.commands) switch (cmd.op) {
 			case "save":
+				matStack.push(mat);
 				ctxOf().save();
 				break;
 			case "restore":
+				mat = matStack.pop() ?? mat;
 				ctxOf().restore();
 				break;
 			case "transform":
+				mat = multiply(mat, cmd.m);
 				ctxOf().transform(cmd.m[0], cmd.m[1], cmd.m[2], cmd.m[3], cmd.m[4], cmd.m[5]);
 				break;
 			case "clip":
@@ -142,6 +341,8 @@ var Raster2D = class {
 				const ctx = ctxOf();
 				ctx.fillStyle = cmd.paint.color;
 				ctx.fill(this.path(list.resources, cmd.path));
+				const b = this.pathBounds(list.resources, cmd.path);
+				if (b) accumulateRect(top(), mat, b.minX, b.minY, b.maxX, b.maxY);
 				break;
 			}
 			case "strokePath": {
@@ -153,6 +354,11 @@ var Raster2D = class {
 				if (cmd.stroke.dash) ctx.setLineDash(cmd.stroke.dash);
 				ctx.stroke(this.path(list.resources, cmd.path));
 				if (cmd.stroke.dash) ctx.setLineDash([]);
+				const b = this.pathBounds(list.resources, cmd.path);
+				if (b) {
+					const o = cmd.stroke.width * ((cmd.stroke.join ?? "miter") === "miter" ? 5 : 1);
+					accumulateRect(top(), mat, b.minX - o, b.minY - o, b.maxX + o, b.maxY + o);
+				}
 				break;
 			}
 			case "fillText": {
@@ -162,6 +368,15 @@ var Raster2D = class {
 				ctx.textBaseline = "alphabetic";
 				ctx.textAlign = cmd.align ?? "left";
 				ctx.fillText(cmd.text, cmd.x, cmd.y);
+				try {
+					const width = ctx.measureText(cmd.text).width;
+					const align = cmd.align ?? "left";
+					const x0 = align === "center" ? cmd.x - width / 2 : align === "right" ? cmd.x - width : cmd.x;
+					const m = cmd.font.size;
+					accumulateRect(top(), mat, x0 - m, cmd.y - 1.5 * m, x0 + width + m, cmd.y + .75 * m);
+				} catch {
+					top().unbounded = true;
+				}
 				break;
 			}
 			case "drawImage": {
@@ -173,6 +388,7 @@ var Raster2D = class {
 				const { x, y, w: dw, h: dh } = cmd.dst;
 				if (cmd.src) ctx.drawImage(drawable, cmd.src.x, cmd.src.y, cmd.src.w, cmd.src.h, x, y, dw, dh);
 				else ctx.drawImage(drawable, x, y, dw, dh);
+				accumulateRect(top(), mat, x, y, x + dw, y + dh);
 				break;
 			}
 			case "pushGroup": {
@@ -187,7 +403,11 @@ var Raster2D = class {
 					canvas: layerCanvas,
 					opacity: cmd.opacity,
 					blend: cmd.blend,
-					filter: filtersToCanvasFilter(cmd.filters)
+					filter: filtersToCanvasFilter(cmd.filters),
+					filters: cmd.filters,
+					...cmd.shader !== void 0 ? { shader: cmd.shader } : {},
+					bounds: null,
+					unbounded: false
 				});
 				break;
 			}
@@ -195,12 +415,60 @@ var Raster2D = class {
 				const layer = layers.pop();
 				if (!layer || layer.canvas === null) throw new Error("popGroup without matching pushGroup");
 				const parent = ctxOf();
+				let drawable = layer.canvas;
+				let shaderReplaced = false;
+				if (layer.shader !== void 0) {
+					const replaced = this.host.applyShader?.(layer.canvas, layer.shader, w, h) ?? null;
+					if (replaced !== null) {
+						drawable = replaced;
+						shaderReplaced = true;
+						layer.bounds = {
+							minX: 0,
+							minY: 0,
+							maxX: w,
+							maxY: h
+						};
+						layer.unbounded = false;
+					} else if (this.shaderCaps === "error") throw new Error("a ShaderEffect reached a backend without a shader runner (§3.7) — load @glissade/effects-webgpu in the browser, or accept passthrough with caps.shaders: warn");
+					else if (!this.warnedShaders) {
+						this.warnedShaders = true;
+						emitDevWarning("ShaderEffect pass skipped: no shader runner here (headless or webgpu-less browser) — subtree composites unfiltered (§3.7 caps.shaders)");
+					}
+				}
+				const hasFilter = layer.filter !== void 0 && layer.filter !== "none";
+				const outset = hasFilter ? filterOutset(layer.filters) : 0;
+				const parentLayer = top();
+				if (layer.unbounded || layer.blend !== "source-over") parentLayer.unbounded = true;
+				else if (layer.bounds) accumulateRect(parentLayer, IDENTITY, layer.bounds.minX - outset, layer.bounds.minY - outset, layer.bounds.maxX + outset, layer.bounds.maxY + outset);
+				const clippable = hasFilter && !shaderReplaced && !layer.unbounded && layer.blend === "source-over";
+				if (clippable && layer.bounds === null) {
+					this.release(layer.canvas);
+					break;
+				}
 				parent.save();
 				parent.resetTransform();
+				if (clippable && layer.bounds) {
+					const x0 = Math.max(0, Math.floor(layer.bounds.minX - outset));
+					const y0 = Math.max(0, Math.floor(layer.bounds.minY - outset));
+					const x1 = Math.min(w, Math.ceil(layer.bounds.maxX + outset));
+					const y1 = Math.min(h, Math.ceil(layer.bounds.maxY + outset));
+					if (x0 >= x1 || y0 >= y1) {
+						parent.restore();
+						this.release(layer.canvas);
+						break;
+					}
+					const clip = this.host.newPath();
+					clip.moveTo(x0, y0);
+					clip.lineTo(x1, y0);
+					clip.lineTo(x1, y1);
+					clip.lineTo(x0, y1);
+					clip.closePath();
+					parent.clip(clip, "nonzero");
+				}
 				parent.globalAlpha = layer.opacity;
-				if (layer.filter !== void 0 && layer.filter !== "none") parent.filter = layer.filter;
+				if (hasFilter) parent.filter = layer.filter;
 				parent.globalCompositeOperation = layer.blend;
-				parent.drawImage(layer.canvas, 0, 0);
+				parent.drawImage(drawable, 0, 0);
 				parent.restore();
 				this.release(layer.canvas);
 				break;
@@ -295,4 +563,4 @@ function evaluate(scene, doc, t) {
 	});
 }
 //#endregion
-export { Circle, ColdAssetError, DuplicateNodeIdError, FilterValidationError, Group, IDENTITY, ImageNode, LayoutEngineMissingError, Node, Path, Raster2D, Rect, Text, Video, applyToPoint, bindScene, breakLines, createDisplayListBuilder, createScene, estimatingMeasurer, evaluate, filtersToCanvasFilter, fontString, fromTRS, getLayoutEngine, invert, matEquals, multiply, quantize, requireLayoutEngine, setLayoutEngine, validateFilters };
+export { Circle, ColdAssetError, DuplicateNodeIdError, FilterValidationError, Group, Highlight, IDENTITY, ImageNode, LayoutEngineMissingError, Node, Path, Raster2D, Rect, ShaderEffect, Text, Video, applyToPoint, bindScene, breakLines, createDisplayListBuilder, createScene, estimatingMeasurer, evaluate, filtersToCanvasFilter, fontString, fromTRS, getLayoutEngine, glow, highlight, invert, matEquals, multiply, quantize, requireLayoutEngine, resolveAnchor, roundedRectSegs, setLayoutEngine, validateFilters };

package/dist/layout.d.ts

@@ -1,4 +1,4 @@
-import { C as EvalContext, D as PropInit, E as NodeProps, F as DisplayListBuilder, O as TextMeasurer, T as Node, a as LayoutEngineMissingError, d as Group, i as LayoutEngine, l as setLayoutEngine, n as LayoutChildSpec, o as LayoutResult, r as LayoutContainerSpec, s as getLayoutEngine, t as LayoutBox } from "./layoutEngine.js";
+import { A as PropInit, E as EvalContext, M as TextMeasurer, O as Node, a as LayoutEngineMissingError, d as Group, i as LayoutEngine, k as NodeProps, l as setLayoutEngine, n as LayoutChildSpec, o as LayoutResult, r as LayoutContainerSpec, s as getLayoutEngine, t as LayoutBox, z as DisplayListBuilder } from "./layoutEngine.js";
 import { BindableSignal } from "@glissade/core";
 
 //#region src/layout.d.ts

package/dist/layout.js

@@ -1,4 +1,4 @@
-import { i as setLayoutEngine, m as estimatingMeasurer, n as getLayoutEngine, o as Group, r as requireLayoutEngine, t as LayoutEngineMissingError } from "./layoutEngine.js";
+import { g as estimatingMeasurer, i as setLayoutEngine, n as getLayoutEngine, o as Group, r as requireLayoutEngine, t as LayoutEngineMissingError } from "./layoutEngine.js";
 import { signal } from "@glissade/core";
 //#region src/layout.ts
 /**

package/dist/layoutEngine.d.ts

@@ -89,12 +89,31 @@ declare function validateFilters(filters: readonly FilterSpec[]): void;
  * ONLY place the CSS-like syntax appears; documents never carry it.
  */
 declare function filtersToCanvasFilter(filters: readonly FilterSpec[]): string;
+/**
+ * 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.
+ */
+declare function glow(color: string, radius?: number, intensity?: number): FilterSpec[];
 interface Rect$1 {
   x: number;
   y: number;
   w: number;
   h: number;
 }
+/**
+ * Shader effect pass (§3.7): runs over the group's rasterized texture.
+ * EXPLICITLY outside the determinism guarantee — GPU/driver per-pixel
+ * variance breaks distributed reproducibility; export with shaders is
+ * best-effort, single machine. Uniform VALUES are resolved at emit time
+ * (they ride on signals), so the IR stays a plain serializable snapshot.
+ */
+interface ShaderRef {
+  /** WGSL fragment module: declare `struct Uniforms` + `@fragment fn effect(@location(0) uv: vec2f) -> @location(0) vec4f`. */
+  wgsl: string;
+  /** Scalar uniforms, packed as f32 in SORTED KEY ORDER into the Uniforms struct. */
+  uniforms: Record<string, number>;
+}
 type DrawCommand = {
   op: 'save';
 } | {
@@ -134,6 +153,7 @@ type DrawCommand = {
   opacity: number;
   blend: BlendMode;
   filters: FilterSpec[];
+  shader?: ShaderRef;
   cacheKey?: string;
 } | {
   op: 'popGroup';
@@ -183,6 +203,15 @@ declare const estimatingMeasurer: TextMeasurer;
 declare function breakLines(text: string, font: FontSpec, maxWidth: number | undefined, measurer: TextMeasurer): string[];
 //#endregion
 //#region src/node.d.ts
+/**
+ * Where `position` pins to on the node's intrinsic box, as fractions of its
+ * size — and the rotation/scale pivot (the Lottie anchor model). Default
+ * 'center' preserves every pre-anchor scene byte-for-byte. With a non-center
+ * anchor, grow direction falls out: anchor 'left' + a width track sweeps
+ * rightward, anchor [0, 1] grows a bar upward.
+ */
+type AnchorSpec = 'center' | 'top-left' | 'top' | 'top-right' | 'left' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right' | readonly [number, number];
+declare function resolveAnchor(spec: AnchorSpec): Vec2;
 interface EvalContext {
   /** The playhead value at evaluate() entry — the only time channel (§3.1). */
   readonly time: number;
@@ -203,6 +232,8 @@ interface NodeProps {
   zIndex?: PropInit<number>;
   /** Group filters (§3.4): the subtree composites as a unit through them. */
   filters?: PropInit<FilterSpec[]>;
+  /** Placement point + transform pivot on the intrinsic box; default 'center'. */
+  anchor?: AnchorSpec;
 }
 interface BindablePropTarget {
   bindSource(fn: () => unknown): void;
@@ -222,6 +253,7 @@ type HitArea = {
   r: number;
 };
 declare abstract class Node {
+  #private;
   readonly id: string | undefined;
   readonly position: Vec2Signal;
   readonly rotation: BindableSignal<number>;
@@ -230,6 +262,10 @@ declare abstract class Node {
   readonly blend: BindableSignal<BlendMode>;
   readonly zIndex: BindableSignal<number>;
   readonly filters: BindableSignal<FilterSpec[]>;
+  /** Resolved anchor fraction over the intrinsic box; [0.5, 0.5] = center. */
+  readonly anchor: Vec2;
+  /** True only when the author SET an anchor — unset keeps the legacy origin. */
+  readonly hasAnchor: boolean;
   parent: Node | null;
   /** v2 §C.3: participates in hit testing; set implicitly by attaching a listener. */
   interactive: boolean;
@@ -261,20 +297,45 @@ declare abstract class Node {
     h: number;
   } | null;
   /**
-   * Vector from the node origin to its intrinsic box's TOP-LEFT, so Layout
-   * can place any anchor correctly. Default: center-anchored (every shape).
-   * Text overrides — it draws from a left/center/right baseline origin.
+   * 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.
    */
-  flowOffset(measurer: TextMeasurer): {
+  drawOffset(measurer?: TextMeasurer): {
     x: number;
     y: number;
   };
+  /**
+   * 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?: TextMeasurer): {
+    x: number;
+    y: number;
+  };
+  /**
+   * 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.
+   */
+  protected anchorShift(measurer?: TextMeasurer): Vec2;
   /** §3.5 predicate: composite-as-a-unit when opacity/blend/filters demand it. */
   protected requiresGroup(): boolean;
+  /** §3.7: a subtree-level shader pass; ShaderEffect overrides. */
+  protected groupShader(): ShaderRef | undefined;
   emit(out: DisplayListBuilder, ctx: EvalContext): void;
 }
 //#endregion
 //#region src/nodes.d.ts
+/** Rounded-rect path segments — Rect's outline, shared with Highlight. */
+declare function roundedRectSegs(x: number, y: number, w: number, h: number, r: number): PathSeg[];
 declare class Group extends Node {
   readonly children: Node[];
   constructor(props?: NodeProps & {
@@ -347,7 +408,7 @@ declare class Path extends Shape {
     h: number;
   };
   /** Geometry is node-local, not center-anchored: offset to the box's actual top-left. */
-  flowOffset(): {
+  drawOffset(): {
     x: number;
     y: number;
   };
@@ -408,6 +469,14 @@ declare class Video extends Node {
   mediaTime(t: number): number | null;
   protected draw(out: DisplayListBuilder, ctx: EvalContext): void;
 }
+/** One laid-out line's ink box, in the Text node's draw space. */
+interface LineBox {
+  text: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
 interface TextProps extends NodeProps {
   text?: PropInit<string>;
   fill?: PropInit<string>;
@@ -436,10 +505,27 @@ declare class Text extends Node {
     h: number;
   };
   /** Text draws from a baseline origin at its align edge, not a center (§3.6). */
-  flowOffset(measurer: TextMeasurer): {
+  drawOffset(measurer?: TextMeasurer): {
     x: number;
     y: number;
   };
+  /**
+   * 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?: TextMeasurer): {
+    w: number;
+    h: number;
+  };
+  /**
+   * 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?: TextMeasurer): LineBox[];
   protected draw(out: DisplayListBuilder, ctx: EvalContext): void;
 }
 //#endregion
@@ -491,4 +577,4 @@ declare function setLayoutEngine(e: LayoutEngine): void;
 declare function getLayoutEngine(): LayoutEngine | null;
 declare function requireLayoutEngine(): LayoutEngine;
 //#endregion
-export { invert as $, breakLines as A, Paint as B, EvalContext as C, PropInit as D, NodeProps as E, DisplayListBuilder as F, StrokeStyle as G, Rect$1 as H, DrawCommand as I, validateFilters as J, createDisplayListBuilder as K, FilterSpec as L, quantize as M, BlendMode as N, TextMeasurer as O, DisplayList as P, fromTRS as Q, FilterValidationError as R, BindablePropTarget as S, Node as T, Resource as U, PathSeg as V, ResourceId as W, Mat2x3 as X, IDENTITY as Y, applyToPoint as Z, ShapeProps as _, LayoutEngineMissingError as a, Video as b, requireLayoutEngine as c, Group as d, matEquals as et, ImageNode as f, Rect as g, PathProps as h, LayoutEngine as i, estimatingMeasurer as j, TextMetricsLite as k, setLayoutEngine as l, Path as m, LayoutChildSpec as n, LayoutResult as o, ImageProps as p, filtersToCanvasFilter as q, LayoutContainerSpec as r, getLayoutEngine as s, LayoutBox as t, multiply as tt, Circle as u, Text as v, HitArea as w, VideoProps as x, TextProps as y, FontSpec as z };
+export { glow as $, PropInit as A, DrawCommand as B, roundedRectSegs as C, HitArea as D, EvalContext as E, estimatingMeasurer as F, PathSeg as G, FilterValidationError as H, quantize as I, ResourceId as J, Rect$1 as K, BlendMode as L, TextMeasurer as M, TextMetricsLite as N, Node as O, breakLines as P, filtersToCanvasFilter as Q, DisplayList as R, VideoProps as S, BindablePropTarget as T, FontSpec as U, FilterSpec as V, Paint as W, StrokeStyle as X, ShaderRef as Y, createDisplayListBuilder as Z, Rect as _, LayoutEngineMissingError as a, invert as at, TextProps as b, requireLayoutEngine as c, Group as d, validateFilters as et, ImageNode as f, PathProps as g, Path as h, LayoutEngine as i, fromTRS as it, resolveAnchor as j, NodeProps as k, setLayoutEngine as l, LineBox as m, LayoutChildSpec as n, Mat2x3 as nt, LayoutResult as o, matEquals as ot, ImageProps as p, Resource as q, LayoutContainerSpec as r, applyToPoint as rt, getLayoutEngine as s, multiply as st, LayoutBox as t, IDENTITY as tt, Circle as u, ShapeProps as v, AnchorSpec as w, Video as x, Text as y, DisplayListBuilder as z };

package/dist/layoutEngine.js

@@ -1,4 +1,4 @@
-import { TARGET_PATH, computed, signal, vec2Signal } from "@glissade/core";
+import { TARGET_PATH, computed, emitDevWarning, signal, vec2Signal } from "@glissade/core";
 //#region src/matrix.ts
 const IDENTITY = [
 	1,
@@ -106,6 +106,22 @@ function filtersToCanvasFilter(filters) {
 		}
 	}).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;
+}
 function createDisplayListBuilder(size) {
 	const commands = [];
 	const resources = [];
@@ -192,6 +208,25 @@ function breakLines(text, font, maxWidth, measurer) {
 * 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);
@@ -211,7 +246,12 @@ var Node = class {
 	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;
 	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). */
@@ -237,7 +277,20 @@ var Node = class {
 		this.blend = initScalar(signal("source-over"), props.blend);
 		this.zIndex = initScalar(signal(0), props.zIndex);
 		this.filters = initScalar(signal([]), props.filters);
-		this.localMatrix = computed(() => fromTRS(this.position(), this.rotation(), this.scale()), { equals: matEquals });
+		this.hasAnchor = props.anchor !== void 0;
+		this.anchor = resolveAnchor(props.anchor ?? "center");
+		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);
 		this.registerTarget("position.x", this.position.x);
@@ -264,12 +317,15 @@ var Node = class {
 		return null;
 	}
 	/**
-	* Vector from the node origin to its intrinsic box's TOP-LEFT, so Layout
-	* can place any anchor correctly. Default: center-anchored (every shape).
-	* Text overrides — it draws from a left/center/right baseline origin.
+	* 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.
 	*/
-	flowOffset(measurer) {
-		const size = this.intrinsicSize(measurer) ?? {
+	drawOffset(measurer) {
+		const m = measurer ?? this.measurerSource?.() ?? estimatingMeasurer;
+		const size = this.intrinsicSize(m) ?? {
 			w: 0,
 			h: 0
 		};
@@ -278,16 +334,59 @@ var Node = class {
 			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?.() ?? estimatingMeasurer;
+		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?.() ?? estimatingMeasurer;
+		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 group = this.requiresGroup();
+		const shader = this.groupShader();
+		const group = this.requiresGroup() || shader !== void 0;
 		out.push({ op: "save" });
 		if (!isIdentity) out.push({
 			op: "transform",
@@ -297,7 +396,8 @@ var Node = class {
 			op: "pushGroup",
 			opacity,
 			blend: this.blend(),
-			filters: this.filters()
+			filters: this.filters(),
+			...shader !== void 0 ? { shader } : {}
 		});
 		this.draw(out, ctx);
 		if (group) out.push({ op: "popGroup" });
@@ -310,6 +410,101 @@ var Node = class {
 * Built-in nodes for M1 (DESIGN.md §3.1): Group, Rect, Circle, Text.
 * Path/Image/Video/Layout arrive with their milestones.
 */
+/** 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;
 	constructor(props = {}) {
@@ -399,101 +594,8 @@ var Rect = class extends Shape {
 	pathSegs() {
 		const w = this.width();
 		const h = this.height();
-		const x = -w / 2;
-		const y = -h / 2;
 		const r = Math.min(Math.max(0, this.cornerRadius()), w / 2, h / 2);
-		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"]
-		];
+		return roundedRectSegs(-w / 2, -h / 2, w, h, r);
 	}
 };
 var Circle = class extends Shape {
@@ -578,7 +680,7 @@ var Path = class extends Shape {
 		};
 	}
 	/** Geometry is node-local, not center-anchored: offset to the box's actual top-left. */
-	flowOffset() {
+	drawOffset() {
 		const b = this.bounds();
 		return {
 			x: b.minX,
@@ -761,20 +863,65 @@ var Text = class extends Node {
 		};
 	}
 	/** Text draws from a baseline origin at its align edge, not a center (§3.6). */
-	flowOffset(measurer) {
-		const size = this.intrinsicSize(measurer);
+	drawOffset(measurer) {
+		const m = measurer ?? this.measurerSource?.() ?? estimatingMeasurer;
+		const size = this.intrinsicSize(m);
 		const font = {
 			family: this.fontFamily,
 			size: this.fontSize(),
 			weight: this.fontWeight
 		};
-		const firstLine = breakLines(this.text(), font, this.width() > 0 ? this.width() : void 0, measurer)[0] ?? "";
-		const ascent = measurer.measureText(firstLine, font).ascent;
+		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?.() ?? estimatingMeasurer);
+	}
+	/**
+	* 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?.() ?? estimatingMeasurer;
+		const text = this.text();
+		if (!text) return [];
+		const font = {
+			family: this.fontFamily,
+			size: this.fontSize(),
+			weight: this.fontWeight
+		};
+		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;
+	}
 	draw(out, ctx) {
 		const text = this.text();
 		if (!text) return;
@@ -823,4 +970,4 @@ function requireLayoutEngine() {
 	return engine;
 }
 //#endregion
-export { invert as C, fromTRS as S, multiply as T, createDisplayListBuilder as _, Circle as a, IDENTITY as b, Path as c, Video as d, Node as f, FilterValidationError as g, quantize as h, setLayoutEngine as i, Rect as l, estimatingMeasurer as m, getLayoutEngine as n, Group as o, breakLines as p, requireLayoutEngine as r, ImageNode as s, LayoutEngineMissingError as t, Text as u, filtersToCanvasFilter as v, matEquals as w, applyToPoint as x, validateFilters as y };
+export { IDENTITY as C, matEquals as D, invert as E, multiply as O, validateFilters as S, fromTRS as T, quantize as _, Circle as a, filtersToCanvasFilter as b, Path as c, Video as d, roundedRectSegs as f, estimatingMeasurer as g, breakLines as h, setLayoutEngine as i, Rect as l, resolveAnchor as m, getLayoutEngine as n, Group as o, Node as p, requireLayoutEngine as r, ImageNode as s, LayoutEngineMissingError as t, Text as u, FilterValidationError as v, applyToPoint as w, glow as x, createDisplayListBuilder as y };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/scene",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "glissade scene graph: nodes, transforms, DisplayList emission. Renderer-agnostic; zero DOM/Node dependencies.",
   "license": "Apache-2.0",
   "type": "module",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "yoga-layout": "^3.2.1",
-    "@glissade/core": "0.3.0"
+    "@glissade/core": "0.4.1"
   },
   "repository": {
     "type": "git",