@glissade/scene 0.5.0-pre.5 → 0.5.0-pre.6

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { $ as Resource, A as HitArea, B as segmentGraphemes, C as VideoProps, D as AnchorSpec, E as roundedRectSegs, F as TextMeasurer, G as DisplayListBuilder, H as setDefaultMeasurer, I as TextMetricsLite, J as FilterValidationError, K as DrawCommand, L as breakLines, M as NodeProps, N as PropInit, O as BindablePropTarget, P as resolveAnchor, Q as Rect$1, R as estimatingMeasurer, S as Video, T as revealSchedule, U as BlendMode, V as segmentWords, W as DisplayList, X as Paint, Y as FontSpec, Z as PathSeg, _ as Rect, a as LayoutEngineMissingError, at as glow, b as Text, c as requireLayoutEngine, ct as Mat2x3, d as Group, dt as invert, et as ResourceId, f as ImageNode, ft as matEquals, g as PathProps, h as Path, i as LayoutEngine, it as filtersToCanvasFilter, j as Node, k as EvalContext, l as setLayoutEngine, lt as applyToPoint, m as LineBox, n as LayoutChildSpec, nt as StrokeStyle, ot as validateFilters, p as ImageProps, pt as multiply, q as FilterSpec, r as LayoutContainerSpec, rt as createDisplayListBuilder, s as getLayoutEngine, st as IDENTITY, t as LayoutBox, tt as ShaderRef, u as Circle, ut as fromTRS, v as RevealMark, w as WordBox, x as TextProps, y as ShapeProps, z as quantize } from "./layoutEngine.js";
+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";
 
 //#region src/highlight.d.ts
@@ -116,6 +116,7 @@ interface TypewriterResult {
 declare function typewriter(target: string, edits: readonly TypeEdit[], opts?: {
   start?: number;
   perChar?: number;
+  gap?: number;
 }): TypewriterResult;
 //#endregion
 //#region src/motionPath.d.ts
@@ -306,6 +307,7 @@ interface Ctx2DLike<TPath, TDrawable> {
   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;
+  lineDashOffset: number;
   fillStyle: unknown;
   strokeStyle: unknown;
   lineWidth: number;
@@ -415,4 +417,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 PropInit, Raster2D, type Raster2DHost, Rect, type Rect$1 as RectShape, type Resource, type ResourceId, type RevealMark, type Scene, type SceneInit, type SceneModule, type ShaderCaps, ShaderEffect, type ShaderEffectProps, type ShaderRef, type ShapeProps, 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, bindScene, breakLines, createDisplayListBuilder, createScene, estimatingMeasurer, evaluate, filtersToCanvasFilter, followPath, fontString, fromTRS, getLayoutEngine, glow, highlight, invert, matEquals, matchTokenRun, motionPath, multiply, pathLength, pointAtLength, quantize, requireLayoutEngine, resolveAnchor, revealSchedule, roundedRectSegs, segmentGraphemes, segmentWords, setDefaultMeasurer, setLayoutEngine, textCursor, tokenHighlight, typewriter, validateFilters };
+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 };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as fromTRS, C as FilterValidationError, D as validateFilters, E as glow, M as matEquals, N as multiply, O as IDENTITY, S as setDefaultMeasurer, T as filtersToCanvasFilter, _ as estimatingMeasurer, a as Circle, b as segmentGraphemes, c as Path, d as Video, f as revealSchedule, g as breakLines, h as resolveAnchor, i as setLayoutEngine, j as invert, k as applyToPoint, l as Rect, m as Node, n as getLayoutEngine, o as Group, p as roundedRectSegs, r as requireLayoutEngine, s as ImageNode, t as LayoutEngineMissingError, u as Text, v as fallbackMeasurer, w as createDisplayListBuilder, x as segmentWords, y as quantize } from "./layoutEngine.js";
+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";
 //#region src/highlight.ts
 /**
@@ -181,6 +181,7 @@ const DEFAULT_PER_CHAR = .06;
 function typewriter(target, edits, opts = {}) {
 	const start = opts.start ?? 0;
 	const globalPer = opts.perChar ?? DEFAULT_PER_CHAR;
+	const gap = opts.gap ?? 0;
 	let t = start;
 	const shown = [];
 	const keys = [key(start, "", { interp: "hold" })];
@@ -221,6 +222,7 @@ function typewriter(target, edits, opts = {}) {
 			end: t,
 			value: shown.join("")
 		});
+		if (gap > 0 && ei < edits.length - 1) t += gap;
 	}
 	return {
 		track: track(target, "string", keys),
@@ -859,9 +861,15 @@ var Raster2D = class {
 				ctx.lineWidth = cmd.stroke.width;
 				ctx.lineCap = cmd.stroke.cap ?? "butt";
 				ctx.lineJoin = cmd.stroke.join ?? "miter";
-				if (cmd.stroke.dash) ctx.setLineDash(cmd.stroke.dash);
+				if (cmd.stroke.dash) {
+					ctx.setLineDash(cmd.stroke.dash);
+					ctx.lineDashOffset = cmd.stroke.dashOffset ?? 0;
+				}
 				ctx.stroke(this.path(list.resources, cmd.path));
-				if (cmd.stroke.dash) ctx.setLineDash([]);
+				if (cmd.stroke.dash) {
+					ctx.setLineDash([]);
+					ctx.lineDashOffset = 0;
+				}
 				const b = this.pathBounds(list.resources, cmd.path);
 				if (b) {
 					const o = cmd.stroke.width * ((cmd.stroke.join ?? "miter") === "miter" ? 5 : 1);
@@ -1071,4 +1079,4 @@ function evaluate(scene, doc, t) {
 	});
 }
 //#endregion
-export { Circle, ColdAssetError, DuplicateNodeIdError, FilterValidationError, FollowPath, Group, Highlight, IDENTITY, ImageNode, LayoutEngineMissingError, Node, Path, Raster2D, Rect, ShaderEffect, Text, TextCursor, TokenHighlight, TokenMatchError, Video, applyToPoint, bindScene, breakLines, createDisplayListBuilder, createScene, estimatingMeasurer, evaluate, filtersToCanvasFilter, followPath, fontString, fromTRS, getLayoutEngine, glow, highlight, invert, matEquals, matchTokenRun, motionPath, multiply, pathLength, pointAtLength, quantize, requireLayoutEngine, resolveAnchor, revealSchedule, roundedRectSegs, segmentGraphemes, segmentWords, setDefaultMeasurer, setLayoutEngine, textCursor, tokenHighlight, typewriter, validateFilters };
+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 };

package/dist/layout.d.ts

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

package/dist/layout.js

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

@@ -1,4 +1,4 @@
-import { BindableSignal, PathValue, ReadonlySignal, Track, Vec2, Vec2Signal } from "@glissade/core";
+import { BindableSignal, PathValue, ReadonlySignal, Rng, Track, Vec2, Vec2Signal } from "@glissade/core";
 
 //#region src/matrix.d.ts
 
@@ -351,6 +351,72 @@ declare abstract class Node {
   emit(out: DisplayListBuilder, ctx: EvalContext): void;
 }
 //#endregion
+//#region src/sketch.d.ts
+/** The closed set of hand-drawn looks. Mirrors FilterSpec's discipline. */
+type SketchStyle = {
+  kind: 'marker';
+  width?: number;
+  roughness?: number;
+} | {
+  kind: 'crayon';
+  width?: number;
+  roughness?: number;
+  passes?: number;
+} | {
+  kind: 'pencil';
+  width?: number;
+  roughness?: number;
+  passes?: number;
+} | {
+  kind: 'ink';
+  width?: number;
+  roughness?: number;
+} | {
+  kind: 'chalk';
+  width?: number;
+  roughness?: number;
+  dash?: number[];
+};
+declare class SketchValidationError extends Error {
+  constructor(message: string);
+}
+/** Reject unknown kinds / out-of-range params at construction (like validateFilters). */
+declare function validateSketch(s: SketchStyle): void;
+interface ResolvedSketch {
+  width: number;
+  roughness: number;
+  passes: number;
+  dash?: number[];
+}
+/** Per-kind defaults — the character of each look. */
+declare function resolveSketch(s: SketchStyle): ResolvedSketch;
+interface Polyline {
+  points: [number, number][];
+  closed: boolean;
+}
+/**
+ * Flatten a path to polylines — de Casteljau for C/Q, arc sampling for E
+ * (Circle and rounded-rect corners are 'E' segments, so this MUST handle them
+ * or those shapes roughen wrong). `steps` is the samples per curved segment.
+ */
+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;
+/**
+ * Roughen a path into hand-drawn stroke passes. Each segment becomes a bowed,
+ * jittered quadratic; `passes` overlay slightly different jitters for the
+ * built-up look. `rng` must be a freshly seeded generator (the caller reseeds
+ * per draw from a stable seed, so evaluate() stays pure).
+ */
+declare function roughen(segs: readonly PathSeg[], style: SketchStyle, rng: Rng): {
+  strokes: PathSeg[][];
+  resolved: ResolvedSketch;
+};
+/** FNV-1a 32-bit — a stable per-shape sketch seed from its id. */
+
+/** Convenience: the rough stroke passes for a path at a given seed. */
+declare function sketchStrokes(segs: readonly PathSeg[], style: SketchStyle, seed: number): PathSeg[][];
+//#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[];
@@ -366,14 +432,28 @@ interface ShapeProps extends NodeProps {
   fill?: PropInit<string>;
   stroke?: PropInit<string>;
   strokeWidth?: PropInit<number>;
+  /** hand-drawn look: the outline is geometrically roughened (see sketch.ts) */
+  sketch?: SketchStyle;
+  /** seed for the roughening; default a stable hash of the node id */
+  sketchSeed?: number;
+  /** draw-on for a sketched shape: 0..1 of the outline drawn (default 1 = whole).
+   * Track `<id>/reveal`. Precise for single-contour shapes; multi-contour ones
+   * reveal each contour in parallel. */
+  reveal?: PropInit<number>;
 }
 declare abstract class Shape extends Node {
   readonly fill: BindableSignal<string>;
   readonly stroke: BindableSignal<string>;
   readonly strokeWidth: BindableSignal<number>;
+  readonly sketch: SketchStyle | undefined;
+  readonly sketchSeed: number;
+  readonly reveal: BindableSignal<number>;
   constructor(props?: ShapeProps);
   protected abstract pathSegs(): PathSeg[];
   protected draw(out: DisplayListBuilder): void;
+  /** 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. */
+  private drawSketch;
 }
 declare class Rect extends Shape {
   readonly width: BindableSignal<number>;
@@ -673,4 +753,4 @@ declare function setLayoutEngine(e: LayoutEngine): void;
 declare function getLayoutEngine(): LayoutEngine | null;
 declare function requireLayoutEngine(): LayoutEngine;
 //#endregion
-export { Resource as $, HitArea as A, segmentGraphemes as B, VideoProps as C, AnchorSpec as D, roundedRectSegs as E, TextMeasurer as F, DisplayListBuilder as G, setDefaultMeasurer as H, TextMetricsLite as I, FilterValidationError as J, DrawCommand as K, breakLines as L, NodeProps as M, PropInit as N, BindablePropTarget as O, resolveAnchor as P, Rect$1 as Q, estimatingMeasurer as R, Video as S, revealSchedule as T, BlendMode as U, segmentWords as V, DisplayList as W, Paint as X, FontSpec as Y, PathSeg as Z, Rect as _, LayoutEngineMissingError as a, glow as at, Text as b, requireLayoutEngine as c, Mat2x3 as ct, Group as d, invert as dt, ResourceId as et, ImageNode as f, matEquals as ft, PathProps as g, Path as h, LayoutEngine as i, filtersToCanvasFilter as it, Node as j, EvalContext as k, setLayoutEngine as l, applyToPoint as lt, LineBox as m, LayoutChildSpec as n, StrokeStyle as nt, LayoutResult as o, validateFilters as ot, ImageProps as p, multiply as pt, FilterSpec as q, LayoutContainerSpec as r, createDisplayListBuilder as rt, getLayoutEngine as s, IDENTITY as st, LayoutBox as t, ShaderRef as tt, Circle as u, fromTRS as ut, RevealMark as v, WordBox as w, TextProps as x, ShapeProps as y, quantize as z };
+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 };

package/dist/layoutEngine.js

@@ -1,4 +1,4 @@
-import { TARGET_PATH, computed, emitDevWarning, signal, vec2Signal } from "@glissade/core";
+import { TARGET_PATH, computed, emitDevWarning, random, signal, vec2Signal } from "@glissade/core";
 //#region src/matrix.ts
 const IDENTITY = [
 	1,
@@ -437,6 +437,230 @@ var Node = class {
 	}
 };
 //#endregion
+//#region src/sketch.ts
+/**
+* Hand-drawn stroke styles via GEOMETRIC roughening — not raster textures. A
+* shape's outline is flattened to polylines, then each segment is redrawn as a
+* slightly jittered, bowed stroke, overlaid in a few passes. Because it's pure
+* path math seeded by a stable per-shape seed, the result is byte-identical on
+* both backends and re-evaluates deterministically (the seed is consumed fresh
+* each draw, never as a shared stateful stream).
+*/
+const KINDS = [
+	"marker",
+	"crayon",
+	"pencil",
+	"ink",
+	"chalk"
+];
+var SketchValidationError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "SketchValidationError";
+	}
+};
+/** Reject unknown kinds / out-of-range params at construction (like validateFilters). */
+function validateSketch(s) {
+	if (!KINDS.includes(s.kind)) throw new SketchValidationError(`unknown sketch kind '${String(s.kind)}' (have: ${KINDS.join(", ")})`);
+	if (s.width !== void 0 && !(s.width > 0)) throw new SketchValidationError(`sketch width must be > 0, got ${String(s.width)}`);
+	if (s.roughness !== void 0 && !(s.roughness >= 0)) throw new SketchValidationError(`sketch roughness must be ≥ 0, got ${String(s.roughness)}`);
+	if ((s.kind === "crayon" || s.kind === "pencil") && s.passes !== void 0 && !(s.passes >= 1)) throw new SketchValidationError(`sketch passes must be ≥ 1, got ${String(s.passes)}`);
+	if (s.kind === "chalk" && s.dash !== void 0 && (!Array.isArray(s.dash) || s.dash.some((d) => !(d >= 0)))) throw new SketchValidationError("sketch chalk dash must be an array of non-negative numbers");
+}
+/** Per-kind defaults — the character of each look. */
+function resolveSketch(s) {
+	switch (s.kind) {
+		case "marker": return {
+			width: s.width ?? 8,
+			roughness: s.roughness ?? 1.2,
+			passes: 2
+		};
+		case "crayon": return {
+			width: s.width ?? 4,
+			roughness: s.roughness ?? 2.4,
+			passes: s.passes ?? 3
+		};
+		case "pencil": return {
+			width: s.width ?? 1.5,
+			roughness: s.roughness ?? 1,
+			passes: s.passes ?? 2
+		};
+		case "ink": return {
+			width: s.width ?? 2.5,
+			roughness: s.roughness ?? .8,
+			passes: 1
+		};
+		case "chalk": return {
+			width: s.width ?? 3,
+			roughness: s.roughness ?? 1.6,
+			passes: 1,
+			dash: s.dash ?? [6, 5]
+		};
+	}
+}
+const cubic = (p0, c1, c2, p1, t) => {
+	const mt = 1 - t;
+	const a = mt * mt * mt;
+	const b = 3 * mt * mt * t;
+	const c = 3 * mt * t * t;
+	const d = t * t * t;
+	return [a * p0[0] + b * c1[0] + c * c2[0] + d * p1[0], a * p0[1] + b * c1[1] + c * c2[1] + d * p1[1]];
+};
+const quad = (p0, c, p1, t) => {
+	const mt = 1 - t;
+	return [mt * mt * p0[0] + 2 * mt * t * c[0] + t * t * p1[0], mt * mt * p0[1] + 2 * mt * t * c[1] + t * t * p1[1]];
+};
+const ellipse = (cx, cy, rx, ry, rot, ang) => {
+	const ex = rx * Math.cos(ang);
+	const ey = ry * Math.sin(ang);
+	const cos = Math.cos(rot);
+	const sin = Math.sin(rot);
+	return [cx + ex * cos - ey * sin, cy + ex * sin + ey * cos];
+};
+/**
+* Flatten a path to polylines — de Casteljau for C/Q, arc sampling for E
+* (Circle and rounded-rect corners are 'E' segments, so this MUST handle them
+* or those shapes roughen wrong). `steps` is the samples per curved segment.
+*/
+function flatten(segs, steps = 16) {
+	const polys = [];
+	let cur = null;
+	let px = 0;
+	let py = 0;
+	let sx = 0;
+	let sy = 0;
+	const ensure = (x, y) => {
+		if (!cur) {
+			cur = {
+				points: [[x, y]],
+				closed: false
+			};
+			polys.push(cur);
+			sx = x;
+			sy = y;
+		}
+		return cur;
+	};
+	for (const s of segs) switch (s[0]) {
+		case "M":
+			cur = {
+				points: [[s[1], s[2]]],
+				closed: false
+			};
+			polys.push(cur);
+			px = sx = s[1];
+			py = sy = s[2];
+			break;
+		case "L":
+			ensure(px, py).points.push([s[1], s[2]]);
+			px = s[1];
+			py = s[2];
+			break;
+		case "C": {
+			const c = ensure(px, py);
+			for (let k = 1; k <= steps; k++) c.points.push(cubic([px, py], [s[1], s[2]], [s[3], s[4]], [s[5], s[6]], k / steps));
+			px = s[5];
+			py = s[6];
+			break;
+		}
+		case "Q": {
+			const c = ensure(px, py);
+			for (let k = 1; k <= steps; k++) c.points.push(quad([px, py], [s[1], s[2]], [s[3], s[4]], k / steps));
+			px = s[3];
+			py = s[4];
+			break;
+		}
+		case "E": {
+			const [, cx, cy, rx, ry, rot, a0, a1] = s;
+			const begin = ellipse(cx, cy, rx, ry, rot, a0);
+			const c = ensure(begin[0], begin[1]);
+			for (let k = 1; k <= steps; k++) c.points.push(ellipse(cx, cy, rx, ry, rot, a0 + (a1 - a0) * (k / steps)));
+			const end = ellipse(cx, cy, rx, ry, rot, a1);
+			px = end[0];
+			py = end[1];
+			break;
+		}
+		case "Z":
+			if (cur) {
+				cur.points.push([sx, sy]);
+				cur.closed = true;
+				px = sx;
+				py = sy;
+			}
+			break;
+	}
+	return polys.filter((p) => p.points.length > 0);
+}
+/** Total length of a flattened polyline (for draw-on dashing). */
+function arcLength(poly) {
+	let len = 0;
+	for (let i = 1; i < poly.points.length; i++) len += Math.hypot(poly.points[i][0] - poly.points[i - 1][0], poly.points[i][1] - poly.points[i - 1][1]);
+	return len;
+}
+/**
+* Roughen a path into hand-drawn stroke passes. Each segment becomes a bowed,
+* jittered quadratic; `passes` overlay slightly different jitters for the
+* built-up look. `rng` must be a freshly seeded generator (the caller reseeds
+* per draw from a stable seed, so evaluate() stays pure).
+*/
+function roughen(segs, style, rng) {
+	const resolved = resolveSketch(style);
+	const polys = flatten(segs);
+	const jit = () => (rng() * 2 - 1) * resolved.roughness;
+	const strokes = [];
+	for (let pass = 0; pass < resolved.passes; pass++) {
+		const out = [];
+		for (const poly of polys) {
+			const pts = poly.points;
+			if (pts.length < 2) continue;
+			let ax = pts[0][0] + jit();
+			let ay = pts[0][1] + jit();
+			out.push([
+				"M",
+				ax,
+				ay
+			]);
+			for (let i = 1; i < pts.length; i++) {
+				const bx = pts[i][0] + jit();
+				const by = pts[i][1] + jit();
+				const dx = bx - ax;
+				const dy = by - ay;
+				const len = Math.hypot(dx, dy) || 1;
+				const bow = jit() * .5;
+				const mx = (ax + bx) / 2 + -dy / len * bow;
+				const my = (ay + by) / 2 + dx / len * bow;
+				out.push([
+					"Q",
+					mx,
+					my,
+					bx,
+					by
+				]);
+				ax = bx;
+				ay = by;
+			}
+		}
+		strokes.push(out);
+	}
+	return {
+		strokes,
+		resolved
+	};
+}
+/** FNV-1a 32-bit — a stable per-shape sketch seed from its id. */
+function hashStr(s) {
+	let h = 2166136261;
+	for (let i = 0; i < s.length; i++) {
+		h ^= s.charCodeAt(i);
+		h = Math.imul(h, 16777619);
+	}
+	return h >>> 0;
+}
+/** Convenience: the rough stroke passes for a path at a given seed. */
+function sketchStrokes(segs, style, seed) {
+	return roughen(segs, style, random(seed >>> 0)).strokes;
+}
+//#endregion
 //#region src/nodes.ts
 /**
 * Built-in nodes for M1 (DESIGN.md §3.1): Group, Rect, Circle, Text.
@@ -561,17 +785,26 @@ var Shape = class extends Node {
 	fill;
 	stroke;
 	strokeWidth;
+	sketch;
+	sketchSeed;
+	reveal;
 	constructor(props = {}) {
 		super(props);
 		this.fill = initProp(signal(""), props.fill);
 		this.stroke = initProp(signal(""), props.stroke);
 		this.strokeWidth = initProp(signal(0), props.strokeWidth);
+		this.reveal = initProp(signal(1), props.reveal);
 		this.registerTarget("fill", this.fill);
 		this.registerTarget("stroke", this.stroke);
 		this.registerTarget("strokeWidth", this.strokeWidth);
+		this.registerTarget("reveal", this.reveal);
+		if (props.sketch) validateSketch(props.sketch);
+		this.sketch = props.sketch;
+		this.sketchSeed = props.sketchSeed ?? (this.id !== void 0 ? hashStr(this.id) : 0);
 	}
 	draw(out) {
 		const segs = this.pathSegs();
+		if (this.sketch) return this.drawSketch(out, segs);
 		const path = out.resource({
 			kind: "path",
 			segs
@@ -597,12 +830,91 @@ var Shape = class extends Node {
 			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 fill = this.fill();
+		if (fill) {
+			const path = out.resource({
+				kind: "path",
+				segs
+			});
+			out.push({
+				op: "fillPath",
+				path,
+				paint: {
+					kind: "color",
+					color: fill
+				}
+			});
+		}
+		const { strokes, resolved } = roughen(segs, this.sketch, random(this.sketchSeed >>> 0));
+		const ink = this.stroke() || fill || "#000000";
+		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)
+						}
+					});
+				}
+				continue;
+			}
+			const path = out.resource({
+				kind: "path",
+				segs: passSegs
+			});
+			out.push({
+				op: "strokePath",
+				path,
+				paint: {
+					kind: "color",
+					color: ink
+				},
+				stroke: {
+					width: resolved.width,
+					cap: "round",
+					join: "round",
+					...resolved.dash ? { dash: resolved.dash } : {}
+				}
+			});
+		}
+	}
 };
 function initProp(sig, init) {
 	if (typeof init === "function") sig.bindSource(init);
 	else if (init !== void 0) sig.set(init);
 	return sig;
 }
+/** Split a stroke path into its subpaths (each starting at an 'M'). */
+function splitContours(segs) {
+	const out = [];
+	let cur = null;
+	for (const s of segs) if (s[0] === "M") {
+		cur = [s];
+		out.push(cur);
+	} else if (cur) cur.push(s);
+	return out;
+}
 var Rect = class extends Shape {
 	width;
 	height;
@@ -1224,4 +1536,4 @@ function requireLayoutEngine() {
 	return engine;
 }
 //#endregion
-export { fromTRS as A, FilterValidationError as C, validateFilters as D, glow as E, matEquals as M, multiply as N, IDENTITY as O, setDefaultMeasurer as S, filtersToCanvasFilter as T, estimatingMeasurer as _, Circle as a, segmentGraphemes as b, Path as c, Video as d, revealSchedule as f, breakLines as g, resolveAnchor as h, setLayoutEngine as i, invert as j, applyToPoint as k, Rect as l, Node as m, getLayoutEngine as n, Group as o, roundedRectSegs as p, requireLayoutEngine as r, ImageNode as s, LayoutEngineMissingError as t, Text as u, fallbackMeasurer as v, createDisplayListBuilder as w, segmentWords as x, quantize as y };
+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 };

package/package.json

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