@glissade/scene 0.5.0 → 0.6.0-pre.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { $ as BlendMode, A as SketchValidationError, B as HitArea, C as VideoProps, Ct as multiply, D as Polyline, E as roundedRectSegs, F as sketchStrokes, G as TextMeasurer, H as NodeProps, I as validateSketch, J as estimatingMeasurer, K as TextMetricsLite, L as AnchorSpec, M as flatten, N as resolveSketch, O as ResolvedSketch, P as roughen, Q as setDefaultMeasurer, R as BindablePropTarget, S as Video, St as matEquals, T as revealSchedule, U as PropInit, V as Node, W as resolveAnchor, X as segmentGraphemes, Y as quantize, Z as segmentWords, _ as Rect, _t as IDENTITY, a as LayoutEngineMissingError, at as FontSpec, b as Text, bt as fromTRS, c as requireLayoutEngine, ct as Rect$1, d as Group, dt as ShaderRef, et as DisplayList, f as ImageNode, ft as StrokeStyle, g as PathProps, gt as validateFilters, h as Path, ht as glow, i as LayoutEngine, it as FilterValidationError, j as arcLength, k as SketchStyle, l as setLayoutEngine, lt as Resource, m as LineBox, mt as filtersToCanvasFilter, n as LayoutChildSpec, nt as DrawCommand, ot as Paint, p as ImageProps, pt as createDisplayListBuilder, q as breakLines, r as LayoutContainerSpec, rt as FilterSpec, s as getLayoutEngine, st as PathSeg, t as LayoutBox, tt as DisplayListBuilder, u as Circle, ut as ResourceId, v as RevealMark, vt as Mat2x3, w as WordBox, x as TextProps, xt as invert, y as ShapeProps, yt as applyToPoint, z as EvalContext } from "./layoutEngine.js";
-import { BindableSignal, BoundTimeline, CompiledTimeline, PathValue, Playhead, Timeline, Track, Vec2 } from "@glissade/core";
+import { $ as quantize, A as ResolvedSketch, B as validateSketch, C as VideoProps, Ct as applyToPoint, D as roundedRectSegs, Dt as multiply, E as revealSchedule, Et as matEquals, F as hachureLines, G as Node, H as BindablePropTarget, I as resolveSketch, J as resolveAnchor, K as NodeProps, L as roughen, M as SketchValidationError, N as arcLength, O as HachureSpec, P as flatten, Q as estimatingMeasurer, R as sketchStrokes, S as Video, St as Mat2x3, T as pathFromSegs, Tt as invert, U as EvalContext, V as AnchorSpec, W as HitArea, X as TextMetricsLite, Y as TextMeasurer, Z as breakLines, _ as Rect, _t as createDisplayListBuilder, a as LayoutEngineMissingError, at as DisplayListBuilder, b as Text, bt as validateFilters, c as requireLayoutEngine, ct as FilterValidationError, d as Group, dt as PathSeg, et as segmentGraphemes, f as ImageNode, ft as Rect$1, g as PathProps, gt as StrokeStyle, h as Path, ht as ShaderRef, i as LayoutEngine, it as DisplayList, j as SketchStyle, k as Polyline, l as setLayoutEngine, lt as FontSpec, m as LineBox, mt as ResourceId, n as LayoutChildSpec, nt as setDefaultMeasurer, ot as DrawCommand, p as ImageProps, pt as Resource, q as PropInit, r as LayoutContainerSpec, rt as BlendMode, s as getLayoutEngine, st as FilterSpec, t as LayoutBox, tt as segmentWords, u as Circle, ut as Paint, v as RevealMark, vt as filtersToCanvasFilter, w as WordBox, wt as fromTRS, x as TextProps, xt as IDENTITY, y as ShapeProps, yt as glow, z as validateHachure } from "./layoutEngine.js";
+import { BindableSignal, BoundTimeline, CompiledTimeline, EaseSpec, PathValue, Playhead, Timeline, Track, Vec2 } from "@glissade/core";
 
 //#region src/highlight.d.ts
 
@@ -119,6 +119,26 @@ declare function typewriter(target: string, edits: readonly TypeEdit[], opts?: {
   gap?: number;
 }): TypewriterResult;
 //#endregion
+//#region src/drawOn.d.ts
+interface DrawOnOptions {
+  /** when the stroke-on starts, seconds; default 0 */
+  start?: number;
+  /** how long it takes, seconds; default 1 */
+  duration?: number;
+  /** the ease arriving at fully drawn; default 'easeInOutCubic' */
+  ease?: EaseSpec;
+}
+/** A `<id>/reveal` track running 0→1 — point a stroked/sketched shape at it to
+ * hand-draw itself on. `target` is the node id. */
+declare function drawOn(target: string, opts?: DrawOnOptions): Track<number>;
+interface DrawOnEachOptions extends DrawOnOptions {
+  /** gap between each shape starting, seconds; default 0.6 × duration */
+  delay?: number;
+}
+/** Cascade several shapes drawing themselves on, one after another — the
+ * whiteboard sequence. Returns one reveal track per id, staggered by `delay`. */
+declare function drawOnEach(targets: readonly string[], opts?: DrawOnEachOptions): Track<number>[];
+//#endregion
 //#region src/motionPath.d.ts
 /** An arc-length-parameterized sampler over a path. */
 interface PathSampler {
@@ -417,4 +437,4 @@ declare function bindScene(scene: Scene, doc: Timeline): BindingCacheEntry;
  */
 declare function evaluate(scene: Scene, doc: Timeline, t: number): DisplayList;
 //#endregion
-export { type AnchorSpec, type BindablePropTarget, type BlendMode, type CanvasLike, Circle, ColdAssetError, type Ctx2DLike, type DisplayList, type DisplayListBuilder, type DrawCommand, DuplicateNodeIdError, type EditMark, type EvalContext, type FilterSpec, FilterValidationError, FollowPath, type FollowPathProps, 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 PathSampler, type PathSeg, type Polyline, type PropInit, Raster2D, type Raster2DHost, Rect, type Rect$1 as RectShape, type ResolvedSketch, type Resource, type ResourceId, type RevealMark, type Scene, type SceneInit, type SceneModule, type ShaderCaps, ShaderEffect, type ShaderEffectProps, type ShaderRef, type ShapeProps, type SketchStyle, SketchValidationError, type StepMark, type StrokeStyle, Text, TextCursor, type TextCursorProps, type TextMeasurer, type TextMetricsLite, type TextProps, TokenHighlight, type TokenHighlightProps, TokenMatchError, type TokenRange, type TypeEdit, type TypewriterResult, Video, type VideoFrameSource, type VideoProps, type WordBox, applyToPoint, arcLength, bindScene, breakLines, createDisplayListBuilder, createScene, estimatingMeasurer, evaluate, filtersToCanvasFilter, flatten, followPath, fontString, fromTRS, getLayoutEngine, glow, highlight, invert, matEquals, matchTokenRun, motionPath, multiply, pathLength, pointAtLength, quantize, requireLayoutEngine, resolveAnchor, resolveSketch, revealSchedule, roughen, roundedRectSegs, segmentGraphemes, segmentWords, setDefaultMeasurer, setLayoutEngine, sketchStrokes, textCursor, tokenHighlight, typewriter, validateFilters, validateSketch };
+export { type AnchorSpec, type BindablePropTarget, type BlendMode, type CanvasLike, Circle, ColdAssetError, type Ctx2DLike, type DisplayList, type DisplayListBuilder, type DrawCommand, type DrawOnEachOptions, type DrawOnOptions, DuplicateNodeIdError, type EditMark, type EvalContext, type FilterSpec, FilterValidationError, FollowPath, type FollowPathProps, type FontSpec, Group, type HachureSpec, 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 PathSampler, type PathSeg, type Polyline, type PropInit, Raster2D, type Raster2DHost, Rect, type Rect$1 as RectShape, type ResolvedSketch, type Resource, type ResourceId, type RevealMark, type Scene, type SceneInit, type SceneModule, type ShaderCaps, ShaderEffect, type ShaderEffectProps, type ShaderRef, type ShapeProps, type SketchStyle, SketchValidationError, type StepMark, type StrokeStyle, Text, TextCursor, type TextCursorProps, type TextMeasurer, type TextMetricsLite, type TextProps, TokenHighlight, type TokenHighlightProps, TokenMatchError, type TokenRange, type TypeEdit, type TypewriterResult, Video, type VideoFrameSource, type VideoProps, type WordBox, applyToPoint, arcLength, bindScene, breakLines, createDisplayListBuilder, createScene, drawOn, drawOnEach, estimatingMeasurer, evaluate, filtersToCanvasFilter, flatten, followPath, fontString, fromTRS, getLayoutEngine, glow, hachureLines, highlight, invert, matEquals, matchTokenRun, motionPath, multiply, pathFromSegs, pathLength, pointAtLength, quantize, requireLayoutEngine, resolveAnchor, resolveSketch, revealSchedule, roughen, roundedRectSegs, segmentGraphemes, segmentWords, setDefaultMeasurer, setLayoutEngine, sketchStrokes, textCursor, tokenHighlight, typewriter, validateFilters, validateHachure, validateSketch };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { A as FilterValidationError, B as multiply, C as breakLines, D as segmentGraphemes, E as quantize, F as IDENTITY, I as applyToPoint, L as fromTRS, M as filtersToCanvasFilter, N as glow, O as segmentWords, P as validateFilters, R as invert, S as resolveAnchor, T as fallbackMeasurer, _ as resolveSketch, a as Circle, b as validateSketch, c as Path, d as Video, f as revealSchedule, g as flatten, h as arcLength, i as setLayoutEngine, j as createDisplayListBuilder, k as setDefaultMeasurer, l as Rect, m as SketchValidationError, n as getLayoutEngine, o as Group, p as roundedRectSegs, r as requireLayoutEngine, s as ImageNode, t as LayoutEngineMissingError, u as Text, v as roughen, w as estimatingMeasurer, x as Node, y as sketchStrokes, z as matEquals } from "./layoutEngine.js";
-import { bindTimeline, compileTimeline, createPlayhead, emitDevWarning, evaluateAt, key, signal, track, vec2Signal } from "@glissade/core";
+import { A as segmentGraphemes, B as fromTRS, C as validateSketch, D as estimatingMeasurer, E as breakLines, F as filtersToCanvasFilter, H as matEquals, I as glow, L as validateFilters, M as setDefaultMeasurer, N as FilterValidationError, O as fallbackMeasurer, P as createDisplayListBuilder, R as IDENTITY, S as validateHachure, T as resolveAnchor, U as multiply, V as invert, _ as flatten, a as Circle, b as roughen, c as Path, d as Video, f as pathFromSegs, g as arcLength, h as SketchValidationError, i as setLayoutEngine, j as segmentWords, k as quantize, l as Rect, m as roundedRectSegs, n as getLayoutEngine, o as Group, p as revealSchedule, r as requireLayoutEngine, s as ImageNode, t as LayoutEngineMissingError, u as Text, v as hachureLines, w as Node, x as sketchStrokes, y as resolveSketch, z as applyToPoint } from "./layoutEngine.js";
+import { bindTimeline, compileTimeline, createPlayhead, emitDevWarning, evaluateAt, key, signal, stagger, track, vec2Signal } from "@glissade/core";
 //#region src/highlight.ts
 /**
 * Marker-style text highlight: per-line rounded rects behind a Text node's
@@ -232,6 +232,28 @@ function typewriter(target, edits, opts = {}) {
 	};
 }
 //#endregion
+//#region src/drawOn.ts
+/**
+* Whiteboard kit: one-call "draw this shape on" tracks. A stroked or sketched
+* shape's `reveal` (0..1) animates it stroking itself on; `drawOn` builds that
+* track, and `drawOnEach` cascades a list of shapes one after another (the
+* classic whiteboard sequence) via the core `stagger` helper.
+*/
+/** A `<id>/reveal` track running 0→1 — point a stroked/sketched shape at it to
+* hand-draw itself on. `target` is the node id. */
+function drawOn(target, opts = {}) {
+	const start = opts.start ?? 0;
+	const duration = opts.duration ?? 1;
+	const ease = opts.ease ?? "easeInOutCubic";
+	return track(`${target}/reveal`, "number", [key(start, 0), key(start + duration, 1, ease)]);
+}
+/** Cascade several shapes drawing themselves on, one after another — the
+* whiteboard sequence. Returns one reveal track per id, staggered by `delay`. */
+function drawOnEach(targets, opts = {}) {
+	const delay = opts.delay ?? (opts.duration ?? 1) * .6;
+	return stagger(targets.map((t) => drawOn(t, opts)), delay);
+}
+//#endregion
 //#region src/motionPath.ts
 /**
 * Motion along a path: sample a point (and tangent) at an arc-length position on
@@ -1079,4 +1101,4 @@ function evaluate(scene, doc, t) {
 	});
 }
 //#endregion
-export { Circle, ColdAssetError, DuplicateNodeIdError, FilterValidationError, FollowPath, Group, Highlight, IDENTITY, ImageNode, LayoutEngineMissingError, Node, Path, Raster2D, Rect, ShaderEffect, SketchValidationError, Text, TextCursor, TokenHighlight, TokenMatchError, Video, applyToPoint, arcLength, bindScene, breakLines, createDisplayListBuilder, createScene, estimatingMeasurer, evaluate, filtersToCanvasFilter, flatten, followPath, fontString, fromTRS, getLayoutEngine, glow, highlight, invert, matEquals, matchTokenRun, motionPath, multiply, pathLength, pointAtLength, quantize, requireLayoutEngine, resolveAnchor, resolveSketch, revealSchedule, roughen, roundedRectSegs, segmentGraphemes, segmentWords, setDefaultMeasurer, setLayoutEngine, sketchStrokes, textCursor, tokenHighlight, typewriter, validateFilters, validateSketch };
+export { Circle, ColdAssetError, DuplicateNodeIdError, FilterValidationError, FollowPath, Group, Highlight, IDENTITY, ImageNode, LayoutEngineMissingError, Node, Path, Raster2D, Rect, ShaderEffect, SketchValidationError, Text, TextCursor, TokenHighlight, TokenMatchError, Video, applyToPoint, arcLength, bindScene, breakLines, createDisplayListBuilder, createScene, drawOn, drawOnEach, estimatingMeasurer, evaluate, filtersToCanvasFilter, flatten, followPath, fontString, fromTRS, getLayoutEngine, glow, hachureLines, highlight, invert, matEquals, matchTokenRun, motionPath, multiply, pathFromSegs, pathLength, pointAtLength, quantize, requireLayoutEngine, resolveAnchor, resolveSketch, revealSchedule, roughen, roundedRectSegs, segmentGraphemes, segmentWords, setDefaultMeasurer, setLayoutEngine, sketchStrokes, textCursor, tokenHighlight, typewriter, validateFilters, validateHachure, validateSketch };

package/dist/layout.d.ts

@@ -1,4 +1,4 @@
-import { G as TextMeasurer, H as NodeProps, U as PropInit, V 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, tt as DisplayListBuilder, z as EvalContext } from "./layoutEngine.js";
+import { G as Node, K as NodeProps, U as EvalContext, Y as TextMeasurer, a as LayoutEngineMissingError, at as DisplayListBuilder, d as Group, i as LayoutEngine, l as setLayoutEngine, n as LayoutChildSpec, o as LayoutResult, q as PropInit, r as LayoutContainerSpec, s as getLayoutEngine, t as LayoutBox } from "./layoutEngine.js";
 import { BindableSignal } from "@glissade/core";
 
 //#region src/layout.d.ts

package/dist/layout.js

@@ -1,4 +1,4 @@
-import { T as fallbackMeasurer, i as setLayoutEngine, n as getLayoutEngine, o as Group, r as requireLayoutEngine, t as LayoutEngineMissingError } from "./layoutEngine.js";
+import { O as fallbackMeasurer, 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

@@ -402,6 +402,22 @@ interface Polyline {
 declare function flatten(segs: readonly PathSeg[], steps?: number): Polyline[];
 /** Total length of a flattened polyline (for draw-on dashing). */
 declare function arcLength(poly: Polyline): number;
+/** A sketchy fill: parallel hatch lines (clipped to the shape by the caller). */
+interface HachureSpec {
+  /** hatch line angle, radians */
+  angleRad: number;
+  /** spacing between lines, px */
+  gap: number;
+  /** jitter amplitude, px; default 1 */
+  roughness?: number;
+}
+declare function validateHachure(h: HachureSpec): void;
+/**
+ * Parallel hatch lines covering a path's bounding box at `angleRad`, spaced
+ * `gap`, lightly jittered. Returned as `M/L` segments to be stroked INSIDE a
+ * clip of the shape (the caller emits the clip). Pure; `rng` reseeded per draw.
+ */
+declare function hachureLines(segs: readonly PathSeg[], spec: HachureSpec, rng: Rng): PathSeg[];
 /**
  * Roughen a path into hand-drawn stroke passes. Each segment becomes a bowed,
  * jittered quadratic; `passes` overlay slightly different jitters for the
@@ -440,12 +456,16 @@ interface ShapeProps extends NodeProps {
    * Track `<id>/reveal`. Precise for single-contour shapes; multi-contour ones
    * reveal each contour in parallel. */
   reveal?: PropInit<number>;
+  /** sketchy hatch fill clipped to the shape (the pencil/crayon filled look);
+   * requires `sketch`. */
+  sketchFill?: HachureSpec;
 }
 declare abstract class Shape extends Node {
   readonly fill: BindableSignal<string>;
   readonly stroke: BindableSignal<string>;
   readonly strokeWidth: BindableSignal<number>;
   readonly sketch: SketchStyle | undefined;
+  readonly sketchFill: HachureSpec | undefined;
   readonly sketchSeed: number;
   readonly reveal: BindableSignal<number>;
   constructor(props?: ShapeProps);
@@ -455,6 +475,15 @@ declare abstract class Shape extends Node {
    * The seed is consumed fresh each draw, so re-evaluation is byte-identical. */
   private drawSketch;
 }
+/**
+ * `PathSeg[]` → `PathValue` (Lottie vertex contours) — the inverse of
+ * `Path.pathSegs`, so geometry from `roundedRectSegs` / `sketchStrokes` /
+ * `flatten` can be placed on a `Path` node (to morph, motion-path, or draw-on
+ * it). C/Q become an anchor + relative in/out tangents; L is a zero-tangent
+ * vertex; E samples to vertices; Z closes the contour, folding the closing
+ * tangent back onto the first vertex. Round-trips C-contours exactly.
+ */
+declare function pathFromSegs(segs: readonly PathSeg[]): PathValue;
 declare class Rect extends Shape {
   readonly width: BindableSignal<number>;
   readonly height: BindableSignal<number>;
@@ -753,4 +782,4 @@ declare function setLayoutEngine(e: LayoutEngine): void;
 declare function getLayoutEngine(): LayoutEngine | null;
 declare function requireLayoutEngine(): LayoutEngine;
 //#endregion
-export { BlendMode as $, SketchValidationError as A, HitArea as B, VideoProps as C, multiply as Ct, Polyline as D, roundedRectSegs as E, sketchStrokes as F, TextMeasurer as G, NodeProps as H, validateSketch as I, estimatingMeasurer as J, TextMetricsLite as K, AnchorSpec as L, flatten as M, resolveSketch as N, ResolvedSketch as O, roughen as P, setDefaultMeasurer as Q, BindablePropTarget as R, Video as S, matEquals as St, revealSchedule as T, PropInit as U, Node as V, resolveAnchor as W, segmentGraphemes as X, quantize as Y, segmentWords as Z, Rect as _, IDENTITY as _t, LayoutEngineMissingError as a, FontSpec as at, Text as b, fromTRS as bt, requireLayoutEngine as c, Rect$1 as ct, Group as d, ShaderRef as dt, DisplayList as et, ImageNode as f, StrokeStyle as ft, PathProps as g, validateFilters as gt, Path as h, glow as ht, LayoutEngine as i, FilterValidationError as it, arcLength as j, SketchStyle as k, setLayoutEngine as l, Resource as lt, LineBox as m, filtersToCanvasFilter as mt, LayoutChildSpec as n, DrawCommand as nt, LayoutResult as o, Paint as ot, ImageProps as p, createDisplayListBuilder as pt, breakLines as q, LayoutContainerSpec as r, FilterSpec as rt, getLayoutEngine as s, PathSeg as st, LayoutBox as t, DisplayListBuilder as tt, Circle as u, ResourceId as ut, RevealMark as v, Mat2x3 as vt, WordBox as w, TextProps as x, invert as xt, ShapeProps as y, applyToPoint as yt, EvalContext as z };
+export { quantize as $, ResolvedSketch as A, validateSketch as B, VideoProps as C, applyToPoint as Ct, roundedRectSegs as D, multiply as Dt, revealSchedule as E, matEquals as Et, hachureLines as F, Node as G, BindablePropTarget as H, resolveSketch as I, resolveAnchor as J, NodeProps as K, roughen as L, SketchValidationError as M, arcLength as N, HachureSpec as O, flatten as P, estimatingMeasurer as Q, sketchStrokes as R, Video as S, Mat2x3 as St, pathFromSegs as T, invert as Tt, EvalContext as U, AnchorSpec as V, HitArea as W, TextMetricsLite as X, TextMeasurer as Y, breakLines as Z, Rect as _, createDisplayListBuilder as _t, LayoutEngineMissingError as a, DisplayListBuilder as at, Text as b, validateFilters as bt, requireLayoutEngine as c, FilterValidationError as ct, Group as d, PathSeg as dt, segmentGraphemes as et, ImageNode as f, Rect$1 as ft, PathProps as g, StrokeStyle as gt, Path as h, ShaderRef as ht, LayoutEngine as i, DisplayList as it, SketchStyle as j, Polyline as k, setLayoutEngine as l, FontSpec as lt, LineBox as m, ResourceId as mt, LayoutChildSpec as n, setDefaultMeasurer as nt, LayoutResult as o, DrawCommand as ot, ImageProps as p, Resource as pt, PropInit as q, LayoutContainerSpec as r, BlendMode as rt, getLayoutEngine as s, FilterSpec as st, LayoutBox as t, segmentWords as tt, Circle as u, Paint as ut, RevealMark as v, filtersToCanvasFilter as vt, WordBox as w, fromTRS as wt, TextProps as x, IDENTITY as xt, ShapeProps as y, glow as yt, validateHachure as z };

package/dist/layoutEngine.js

@@ -597,6 +597,69 @@ function arcLength(poly) {
 	for (let i = 1; i < poly.points.length; i++) len += Math.hypot(poly.points[i][0] - poly.points[i - 1][0], poly.points[i][1] - poly.points[i - 1][1]);
 	return len;
 }
+function validateHachure(h) {
+	if (!(h.gap > 0)) throw new SketchValidationError(`hachure gap must be > 0, got ${String(h.gap)}`);
+	if (h.roughness !== void 0 && !(h.roughness >= 0)) throw new SketchValidationError(`hachure roughness must be ≥ 0, got ${String(h.roughness)}`);
+}
+/**
+* Parallel hatch lines covering a path's bounding box at `angleRad`, spaced
+* `gap`, lightly jittered. Returned as `M/L` segments to be stroked INSIDE a
+* clip of the shape (the caller emits the clip). Pure; `rng` reseeded per draw.
+*/
+function hachureLines(segs, spec, rng) {
+	const polys = flatten(segs);
+	let minX = Infinity;
+	let minY = Infinity;
+	let maxX = -Infinity;
+	let maxY = -Infinity;
+	for (const p of polys) for (const [x, y] of p.points) {
+		if (x < minX) minX = x;
+		if (y < minY) minY = y;
+		if (x > maxX) maxX = x;
+		if (y > maxY) maxY = y;
+	}
+	if (!Number.isFinite(minX)) return [];
+	const cx = (minX + maxX) / 2;
+	const cy = (minY + maxY) / 2;
+	const ca = Math.cos(spec.angleRad);
+	const sa = Math.sin(spec.angleRad);
+	const toRot = (x, y) => [(x - cx) * ca + (y - cy) * sa, -(x - cx) * sa + (y - cy) * ca];
+	const fromRot = (x, y) => [cx + x * ca - y * sa, cy + x * sa + y * ca];
+	let rMinX = Infinity;
+	let rMinY = Infinity;
+	let rMaxX = -Infinity;
+	let rMaxY = -Infinity;
+	const corners = [
+		[minX, minY],
+		[maxX, minY],
+		[maxX, maxY],
+		[minX, maxY]
+	];
+	for (const [x, y] of corners) {
+		const [rx, ry] = toRot(x, y);
+		if (rx < rMinX) rMinX = rx;
+		if (ry < rMinY) rMinY = ry;
+		if (rx > rMaxX) rMaxX = rx;
+		if (ry > rMaxY) rMaxY = ry;
+	}
+	const rough = spec.roughness ?? 1;
+	const jit = () => (rng() * 2 - 1) * rough;
+	const out = [];
+	for (let y = rMinY + spec.gap / 2; y < rMaxY; y += spec.gap) {
+		const a = fromRot(rMinX, y + jit());
+		const b = fromRot(rMaxX, y + jit());
+		out.push([
+			"M",
+			a[0],
+			a[1]
+		], [
+			"L",
+			b[0],
+			b[1]
+		]);
+	}
+	return out;
+}
 /**
 * Roughen a path into hand-drawn stroke passes. Each segment becomes a bowed,
 * jittered quadratic; `passes` overlay slightly different jitters for the
@@ -786,6 +849,7 @@ var Shape = class extends Node {
 	stroke;
 	strokeWidth;
 	sketch;
+	sketchFill;
 	sketchSeed;
 	reveal;
 	constructor(props = {}) {
@@ -799,7 +863,9 @@ var Shape = class extends Node {
 		this.registerTarget("strokeWidth", this.strokeWidth);
 		this.registerTarget("reveal", this.reveal);
 		if (props.sketch) validateSketch(props.sketch);
+		if (props.sketchFill) validateHachure(props.sketchFill);
 		this.sketch = props.sketch;
+		this.sketchFill = props.sketchFill;
 		this.sketchSeed = props.sketchSeed ?? (this.id !== void 0 ? hashStr(this.id) : 0);
 	}
 	draw(out) {
@@ -820,19 +886,27 @@ var Shape = class extends Node {
 		});
 		const stroke = this.stroke();
 		const width = this.strokeWidth();
-		if (stroke && width > 0) out.push({
-			op: "strokePath",
-			path,
-			paint: {
+		if (stroke && width > 0) {
+			const reveal = this.reveal();
+			if (reveal < 1) emitDrawOnStroke(out, segs, {
 				kind: "color",
 				color: stroke
-			},
-			stroke: { width }
-		});
+			}, { width }, reveal);
+			else out.push({
+				op: "strokePath",
+				path,
+				paint: {
+					kind: "color",
+					color: stroke
+				},
+				stroke: { width }
+			});
+		}
 	}
 	/** Hand-drawn render: solid fill (if any) under roughened, multi-pass strokes.
 	* The seed is consumed fresh each draw, so re-evaluation is byte-identical. */
 	drawSketch(out, segs) {
+		const rng = random(this.sketchSeed >>> 0);
 		const fill = this.fill();
 		if (fill) {
 			const path = out.resource({
@@ -848,35 +922,53 @@ var Shape = class extends Node {
 				}
 			});
 		}
-		const { strokes, resolved } = roughen(segs, this.sketch, random(this.sketchSeed >>> 0));
+		const { strokes, resolved } = roughen(segs, this.sketch, rng);
 		const ink = this.stroke() || fill || "#000000";
+		if (this.sketchFill) {
+			const clipPath = out.resource({
+				kind: "path",
+				segs
+			});
+			out.push({ op: "save" });
+			out.push({
+				op: "clip",
+				path: clipPath,
+				rule: "nonzero"
+			});
+			const hatch = hachureLines(segs, this.sketchFill, rng);
+			if (hatch.length > 0) {
+				const hp = out.resource({
+					kind: "path",
+					segs: hatch
+				});
+				out.push({
+					op: "strokePath",
+					path: hp,
+					paint: {
+						kind: "color",
+						color: ink
+					},
+					stroke: {
+						width: Math.max(1, resolved.width * .5),
+						cap: "round"
+					}
+				});
+			}
+			out.push({ op: "restore" });
+		}
 		const reveal = this.reveal();
 		const drawOn = reveal < 1;
 		for (const passSegs of strokes) {
 			if (passSegs.length === 0) continue;
 			if (drawOn) {
-				for (const contour of splitContours(passSegs)) {
-					const len = flatten(contour).reduce((s, p) => s + arcLength(p), 0);
-					const path = out.resource({
-						kind: "path",
-						segs: contour
-					});
-					out.push({
-						op: "strokePath",
-						path,
-						paint: {
-							kind: "color",
-							color: ink
-						},
-						stroke: {
-							width: resolved.width,
-							cap: "round",
-							join: "round",
-							dash: [len, len],
-							dashOffset: len * (1 - reveal)
-						}
-					});
-				}
+				emitDrawOnStroke(out, passSegs, {
+					kind: "color",
+					color: ink
+				}, {
+					width: resolved.width,
+					cap: "round",
+					join: "round"
+				}, reveal);
 				continue;
 			}
 			const path = out.resource({
@@ -915,6 +1007,107 @@ function splitContours(segs) {
 	} else if (cur) cur.push(s);
 	return out;
 }
+/**
+* Emit a stroke that "draws on" by arc length — a retreating dash PER CONTOUR
+* (canvas restarts the dash phase at each subpath move, so each contour reveals
+* from its own start). Shared by sketched and plain stroked shapes.
+*/
+function emitDrawOnStroke(out, segs, paint, baseStroke, reveal) {
+	for (const contour of splitContours(segs)) {
+		const len = flatten(contour).reduce((s, p) => s + arcLength(p), 0);
+		const path = out.resource({
+			kind: "path",
+			segs: contour
+		});
+		out.push({
+			op: "strokePath",
+			path,
+			paint,
+			stroke: {
+				...baseStroke,
+				dash: [len, len],
+				dashOffset: len * (1 - reveal)
+			}
+		});
+	}
+}
+/**
+* `PathSeg[]` → `PathValue` (Lottie vertex contours) — the inverse of
+* `Path.pathSegs`, so geometry from `roundedRectSegs` / `sketchStrokes` /
+* `flatten` can be placed on a `Path` node (to morph, motion-path, or draw-on
+* it). C/Q become an anchor + relative in/out tangents; L is a zero-tangent
+* vertex; E samples to vertices; Z closes the contour, folding the closing
+* tangent back onto the first vertex. Round-trips C-contours exactly.
+*/
+function pathFromSegs(segs) {
+	const contours = [];
+	let c = null;
+	const push = (v, inT = [0, 0], outT = [0, 0]) => {
+		c.v.push(v);
+		c.in.push(inT);
+		c.out.push(outT);
+	};
+	const last = () => c.v[c.v.length - 1];
+	for (const s of segs) switch (s[0]) {
+		case "M":
+			c = {
+				closed: false,
+				v: [[s[1], s[2]]],
+				in: [[0, 0]],
+				out: [[0, 0]]
+			};
+			contours.push(c);
+			break;
+		case "L":
+			if (c) push([s[1], s[2]]);
+			break;
+		case "C":
+			if (c) {
+				const p0 = last();
+				c.out[c.out.length - 1] = [s[1] - p0[0], s[2] - p0[1]];
+				push([s[5], s[6]], [s[3] - s[5], s[4] - s[6]]);
+			}
+			break;
+		case "Q":
+			if (c) {
+				const p0 = last();
+				const qx = s[1];
+				const qy = s[2];
+				const px = s[3];
+				const py = s[4];
+				c.out[c.out.length - 1] = [2 / 3 * (qx - p0[0]), 2 / 3 * (qy - p0[1])];
+				push([px, py], [2 / 3 * (qx - px), 2 / 3 * (qy - py)]);
+			}
+			break;
+		case "E":
+			if (c) {
+				const [, cx, cy, rx, ry, rot, a0, a1] = s;
+				const cos = Math.cos(rot);
+				const sin = Math.sin(rot);
+				for (let k = 1; k <= 16; k++) {
+					const ang = a0 + (a1 - a0) * (k / 16);
+					const ex = rx * Math.cos(ang);
+					const ey = ry * Math.sin(ang);
+					push([cx + ex * cos - ey * sin, cy + ex * sin + ey * cos]);
+				}
+			}
+			break;
+		case "Z":
+			if (c) {
+				c.closed = true;
+				const f = c.v[0];
+				const l = last();
+				if (c.v.length > 1 && Math.abs(f[0] - l[0]) < 1e-9 && Math.abs(f[1] - l[1]) < 1e-9) {
+					c.in[0] = c.in[c.in.length - 1];
+					c.v.pop();
+					c.in.pop();
+					c.out.pop();
+				}
+			}
+			break;
+	}
+	return contours;
+}
 var Rect = class extends Shape {
 	width;
 	height;
@@ -1536,4 +1729,4 @@ function requireLayoutEngine() {
 	return engine;
 }
 //#endregion
-export { FilterValidationError as A, multiply as B, breakLines as C, segmentGraphemes as D, quantize as E, IDENTITY as F, applyToPoint as I, fromTRS as L, filtersToCanvasFilter as M, glow as N, segmentWords as O, validateFilters as P, invert as R, resolveAnchor as S, fallbackMeasurer as T, resolveSketch as _, Circle as a, validateSketch as b, Path as c, Video as d, revealSchedule as f, flatten as g, arcLength as h, setLayoutEngine as i, createDisplayListBuilder as j, setDefaultMeasurer as k, Rect as l, SketchValidationError as m, getLayoutEngine as n, Group as o, roundedRectSegs as p, requireLayoutEngine as r, ImageNode as s, LayoutEngineMissingError as t, Text as u, roughen as v, estimatingMeasurer as w, Node as x, sketchStrokes as y, matEquals as z };
+export { segmentGraphemes as A, fromTRS as B, validateSketch as C, estimatingMeasurer as D, breakLines as E, filtersToCanvasFilter as F, matEquals as H, glow as I, validateFilters as L, setDefaultMeasurer as M, FilterValidationError as N, fallbackMeasurer as O, createDisplayListBuilder as P, IDENTITY as R, validateHachure as S, resolveAnchor as T, multiply as U, invert as V, flatten as _, Circle as a, roughen as b, Path as c, Video as d, pathFromSegs as f, arcLength as g, SketchValidationError as h, setLayoutEngine as i, segmentWords as j, quantize as k, Rect as l, roundedRectSegs as m, getLayoutEngine as n, Group as o, revealSchedule as p, requireLayoutEngine as r, ImageNode as s, LayoutEngineMissingError as t, Text as u, hachureLines as v, Node as w, sketchStrokes as x, resolveSketch as y, applyToPoint as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/scene",
-  "version": "0.5.0",
+  "version": "0.6.0-pre.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.5.0"
+    "@glissade/core": "0.6.0-pre.1"
   },
   "repository": {
     "type": "git",