@glissade/scene 0.31.0-pre.1 → 0.32.0-pre.0

package/dist/chart.d.ts

@@ -0,0 +1,106 @@
+import { V as NodeProps, i as Group, u as Rect } from "./nodes.js";
+
+//#region src/chart.d.ts
+
+declare class ChartError extends Error {
+  constructor(message: string);
+}
+/** One data row: a plain record. `xKey`/`yKey` name the label + numeric columns. */
+type DataRow = Readonly<Record<string, unknown>>;
+/**
+ * A continuous scale: a pure, serializable map from a numeric DOMAIN onto a pixel
+ * (or unit) RANGE. `linearScale`/`logScale` produce these. Serializable by shape
+ * (`{ id, domain, range }`) so an agent/tool can round-trip it, matching the
+ * data-motion card's "scales are value-types" pitch.
+ */
+interface Scale {
+  readonly id: 'linear' | 'log';
+  readonly domain: readonly [number, number];
+  readonly range: readonly [number, number];
+  /** Map a domain value onto the range (clamped-free — extrapolates linearly). */
+  map(v: number): number;
+}
+/** A categorical BAND scale: N equal bands across a range, each with a `bandwidth`. */
+interface BandScale {
+  readonly id: 'band';
+  readonly count: number;
+  readonly range: readonly [number, number];
+  /** The width of one band's drawable area (after padding). */
+  readonly bandwidth: number;
+  /** The CENTER of band `i` (0-based) within the range. */
+  map(i: number): number;
+}
+/** A colour-ramp scale: a numeric domain → an interpolated hex colour STRING. */
+interface ColorScale {
+  readonly id: 'color-ramp';
+  readonly stops: readonly string[];
+  readonly domain: readonly [number, number];
+  /** Map a domain value onto its interpolated colour (`#rrggbb`). */
+  map(v: number): string;
+}
+/** A linear scale mapping `domain` → `range` (the workhorse for a value axis). */
+declare function linearScale(domain: readonly [number, number], range: readonly [number, number]): Scale;
+/**
+ * A base-10 logarithmic scale. Requires a strictly-positive domain (log of a
+ * non-positive number is undefined) — throws otherwise, fail-loud.
+ */
+declare function logScale(domain: readonly [number, number], range: readonly [number, number]): Scale;
+/**
+ * A categorical band scale: `count` equal bands across `range`, separated by a
+ * `padding` fraction (0..1) of each step. `map(i)` is band `i`'s center;
+ * `bandwidth` is its drawable width.
+ */
+declare function bandScale(count: number, range: readonly [number, number], padding?: number): BandScale;
+/**
+ * A colour ramp over `domain` (default `[0, 1]`): at least two hex stops,
+ * interpolated in sRGB byte space. `map(v)` returns `#rrggbb`. Deterministic and
+ * pure — the same v yields the same bytes, so a fill driven by a ramp is golden-
+ * stable.
+ */
+declare function colorRamp(stops: readonly string[], domain?: readonly [number, number]): ColorScale;
+interface ChartSpec extends NodeProps {
+  /** Stable id — REQUIRED; bars bind tracks against `${id}/bars/${i}`. */
+  id: string;
+  /** The rows to plot (each a plain record). */
+  data: readonly DataRow[];
+  /** The column naming each bar's category label (used for ordering / count). */
+  xKey: string;
+  /** The column naming each bar's numeric value. */
+  yKey: string;
+  /** Total chart width (px) the bands divide. */
+  width: number;
+  /** Total chart height (px) — a full-value bar fills it. */
+  height: number;
+  /**
+   * The value → height scale. Defaults to `linearScale([0, max(y)], [0, height])`
+   * (turnkey: bars are proportional to their value, tallest fills the box).
+   */
+  yScale?: Scale;
+  /** Gap fraction between bars (0..1) passed to the internal band scale. Default 0.2. */
+  bandPadding?: number;
+  /**
+   * Bar fill: a solid colour string, or a `ColorScale` evaluated at each bar's
+   * VALUE (a colour ramp over the data). Default `'#4f8cff'`.
+   */
+  fill?: string | ColorScale;
+}
+interface ChartResult {
+  /** The wrapping group (center-anchored on its content box, like Grid). */
+  readonly node: Group;
+  /** The bar nodes in row order — `bars[i]` plots `data[i]`. */
+  readonly bars: readonly Rect[];
+  /** Ready-to-bind target ids in row order: `${id}/bars/${i}/${prop}`. */
+  targets(prop: string): string[];
+}
+/**
+ * Build a bar chart from `data` and return a `Group` of bars, each pinned to the
+ * axis at its base and sized to its value. Center-anchored (the group origin is
+ * the center of the content box), matching every other glissade node's convention.
+ *
+ * The bars are freshly constructed nodes (never cloned from the caller); their
+ * `height`/`fill` are plain signals, so a later track bind against
+ * `chart.targets(prop)` wins and drives the reveal.
+ */
+declare function Chart(spec: ChartSpec): ChartResult;
+//#endregion
+export { BandScale, Chart, ChartError, ChartResult, ChartSpec, ColorScale, DataRow, Scale, bandScale, colorRamp, linearScale, logScale };

package/dist/chart.js

@@ -0,0 +1,157 @@
+import { o as Rect, r as Group } from "./nodes.js";
+//#region src/chart.ts
+var ChartError = class extends Error {
+	constructor(message) {
+		super(message);
+		this.name = "ChartError";
+	}
+};
+/** A linear scale mapping `domain` → `range` (the workhorse for a value axis). */
+function linearScale(domain, range) {
+	const [d0, d1] = domain;
+	const [r0, r1] = range;
+	const span = d1 - d0;
+	return {
+		id: "linear",
+		domain,
+		range,
+		map: (v) => span === 0 ? r0 : r0 + (v - d0) / span * (r1 - r0)
+	};
+}
+/**
+* A base-10 logarithmic scale. Requires a strictly-positive domain (log of a
+* non-positive number is undefined) — throws otherwise, fail-loud.
+*/
+function logScale(domain, range) {
+	const [d0, d1] = domain;
+	const [r0, r1] = range;
+	if (d0 <= 0 || d1 <= 0) throw new ChartError(`logScale needs a strictly-positive domain (got [${d0}, ${d1}])`);
+	const l0 = Math.log10(d0);
+	const lspan = Math.log10(d1) - l0;
+	return {
+		id: "log",
+		domain,
+		range,
+		map: (v) => {
+			if (v <= 0) throw new ChartError(`logScale cannot map a non-positive value (${v})`);
+			return lspan === 0 ? r0 : r0 + (Math.log10(v) - l0) / lspan * (r1 - r0);
+		}
+	};
+}
+/**
+* A categorical band scale: `count` equal bands across `range`, separated by a
+* `padding` fraction (0..1) of each step. `map(i)` is band `i`'s center;
+* `bandwidth` is its drawable width.
+*/
+function bandScale(count, range, padding = .2) {
+	if (!Number.isInteger(count) || count < 1) throw new ChartError(`bandScale needs a positive integer count (got ${count})`);
+	if (padding < 0 || padding >= 1) throw new ChartError(`bandScale padding must be in [0, 1) (got ${padding})`);
+	const [r0, r1] = range;
+	const step = (r1 - r0) / count;
+	return {
+		id: "band",
+		count,
+		range,
+		bandwidth: step * (1 - padding),
+		map: (i) => r0 + step * i + step / 2
+	};
+}
+/** Parse a `#rgb`/`#rrggbb` hex string to `[r, g, b]` bytes; throws on a bad format. */
+function parseHex(hex) {
+	const h = hex.trim().replace(/^#/, "");
+	const full = h.length === 3 ? h.replace(/(.)/g, "$1$1") : h;
+	if (!/^[0-9a-fA-F]{6}$/.test(full)) throw new ChartError(`colorRamp stop '${hex}' is not a #rgb/#rrggbb hex colour`);
+	return [
+		parseInt(full.slice(0, 2), 16),
+		parseInt(full.slice(2, 4), 16),
+		parseInt(full.slice(4, 6), 16)
+	];
+}
+function toHex(n) {
+	return Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, "0");
+}
+/**
+* A colour ramp over `domain` (default `[0, 1]`): at least two hex stops,
+* interpolated in sRGB byte space. `map(v)` returns `#rrggbb`. Deterministic and
+* pure — the same v yields the same bytes, so a fill driven by a ramp is golden-
+* stable.
+*/
+function colorRamp(stops, domain = [0, 1]) {
+	if (stops.length < 2) throw new ChartError("colorRamp needs at least two colour stops");
+	const rgb = stops.map(parseHex);
+	const [d0, d1] = domain;
+	const span = d1 - d0;
+	return {
+		id: "color-ramp",
+		stops,
+		domain,
+		map: (v) => {
+			const seg = (span === 0 ? 0 : Math.max(0, Math.min(1, (v - d0) / span))) * (stops.length - 1);
+			const i = Math.min(stops.length - 2, Math.floor(seg));
+			const f = seg - i;
+			const a = rgb[i];
+			const b = rgb[i + 1];
+			return `#${toHex(a[0] + (b[0] - a[0]) * f)}${toHex(a[1] + (b[1] - a[1]) * f)}${toHex(a[2] + (b[2] - a[2]) * f)}`;
+		}
+	};
+}
+/** Coerce a row's numeric column, failing loud on a non-finite value. */
+function numAt(row, key, i) {
+	const raw = row[key];
+	const n = typeof raw === "number" ? raw : Number(raw);
+	if (!Number.isFinite(n)) throw new ChartError(`Chart row ${i}: ${key}=${JSON.stringify(raw)} is not a finite number`);
+	return n;
+}
+/**
+* Build a bar chart from `data` and return a `Group` of bars, each pinned to the
+* axis at its base and sized to its value. Center-anchored (the group origin is
+* the center of the content box), matching every other glissade node's convention.
+*
+* The bars are freshly constructed nodes (never cloned from the caller); their
+* `height`/`fill` are plain signals, so a later track bind against
+* `chart.targets(prop)` wins and drives the reveal.
+*/
+function Chart(spec) {
+	const { id, data, xKey, yKey, width, height, bandPadding = .2, fill = "#4f8cff" } = spec;
+	if (data.length === 0) throw new ChartError("Chart needs at least one data row");
+	if (!(width > 0) || !(height > 0)) throw new ChartError(`Chart needs positive width/height (got ${width}×${height})`);
+	const values = data.map((row, i) => numAt(row, yKey, i));
+	data.forEach((row, i) => {
+		if (row[xKey] === void 0) throw new ChartError(`Chart row ${i}: missing xKey '${xKey}'`);
+	});
+	const yMax = Math.max(...values, 0);
+	const yScale = spec.yScale ?? linearScale([0, yMax === 0 ? 1 : yMax], [0, height]);
+	const bands = bandScale(data.length, [0, width], bandPadding);
+	const ox = -width / 2;
+	const baseline = height / 2;
+	const bars = data.map((row, i) => {
+		const h = yScale.map(values[i]);
+		const barFill = typeof fill === "string" ? fill : fill.map(values[i]);
+		return new Rect({
+			id: `${id}/bars/${i}`,
+			anchor: "bottom",
+			position: [ox + bands.map(i), baseline],
+			width: bands.bandwidth,
+			height: h,
+			fill: barFill
+		});
+	});
+	const node = new Group({
+		id,
+		children: bars,
+		...stripChartOnly(spec)
+	});
+	const targets = (prop) => bars.map((_, i) => `${id}/bars/${i}/${prop}`);
+	return {
+		node,
+		bars,
+		targets
+	};
+}
+/** Strip Chart's own props so the rest (position/opacity/anchor/…) pass to the Group. */
+function stripChartOnly(spec) {
+	const { id, data, xKey, yKey, width, height, yScale, bandPadding, fill, children, ...nodeProps } = spec;
+	return nodeProps;
+}
+//#endregion
+export { Chart, ChartError, bandScale, colorRamp, linearScale, logScale };

package/dist/describe.js

@@ -1,4 +1,4 @@
-import { _ as NODE_CONSTRUCTION_PROP_NAMES, a as Path, c as Video, g as BASE_CONSTRUCTION_PROP_NAMES, i as ImageNode, o as Rect, r as Group, s as Text, t as Circle } from "./nodes.js";
+import { D as NODE_CONSTRUCTION_PROP_NAMES, E as BASE_CONSTRUCTION_PROP_NAMES, a as Path, c as Video, i as ImageNode, o as Rect, r as Group, s as Text, t as Circle } from "./nodes.js";
 import { easings, listValueTypes } from "@glissade/core";
 //#region src/describe.ts
 /**
@@ -22,7 +22,7 @@ import { easings, listValueTypes } from "@glissade/core";
 * never pulled onto the base embed path — a scene that never calls `describe()`
 * pays zero bytes for it.
 */
-const RAW_VERSION = "0.31.0-pre.1";
+const RAW_VERSION = "0.32.0-pre.0";
 const PACKAGE_VERSION = RAW_VERSION.includes("GLISSADE_".concat("VERSION")) ? "0.0.0-dev" : RAW_VERSION;
 /** Arity of a value type's numeric repr: vec2/vec2-arc → 2, number → 1; others (color/paint/path/string/boolean) carry no scalar arity. */
 function arityOf(type) {
@@ -393,6 +393,36 @@ const HELPERS = [
 		import: "@glissade/scene/grid",
 		usage: "Grid({ columns: number | (number | { fr })[], children: Node[], gap?, columnGap?, rowGap?, cellHeight?, width? }): Group  —  child[i] → row floor(i/cols), col i%cols"
 	},
+	{
+		name: "Chart",
+		summary: "Build-time bar chart: bind a table (rows) → positioned+sized Rect bars, each pinned to the axis and grown from its base, returning a Group. Pure fan-out (like Grid) — animate a reveal with tl.stagger(chart.targets(\"height\"), …) or a colour sweep on \"fill\". Tree-shaken off the base scene index.",
+		import: "@glissade/scene/chart",
+		usage: "Chart({ id, data: Row[], xKey, yKey, width, height, yScale?, bandPadding?, fill?: string | ColorScale }): { node: Group, bars: Rect[], targets(prop): string[] }"
+	},
+	{
+		name: "linearScale",
+		summary: "A serializable linear scale (value axis): maps a numeric domain onto a pixel/unit range. Pair with Chart({ yScale }). On the @glissade/scene/chart subpath.",
+		import: "@glissade/scene/chart",
+		usage: "linearScale(domain: [number, number], range: [number, number]): Scale"
+	},
+	{
+		name: "logScale",
+		summary: "A serializable base-10 log scale (strictly-positive domain; throws otherwise) for a value axis. Pair with Chart({ yScale }). On the @glissade/scene/chart subpath.",
+		import: "@glissade/scene/chart",
+		usage: "logScale(domain: [number, number], range: [number, number]): Scale"
+	},
+	{
+		name: "bandScale",
+		summary: "A categorical band scale: N equal bands across a range with a padding gap, each with a bandwidth. Chart uses this internally for the x axis; exposed for custom layouts. On the @glissade/scene/chart subpath.",
+		import: "@glissade/scene/chart",
+		usage: "bandScale(count: number, range: [number, number], padding?: number): BandScale"
+	},
+	{
+		name: "colorRamp",
+		summary: "A serializable colour ramp (>=2 hex stops, sRGB-interpolated) over a numeric domain → a #rrggbb string. Pass as Chart({ fill }) to colour bars by value. On the @glissade/scene/chart subpath.",
+		import: "@glissade/scene/chart",
+		usage: "colorRamp(stops: string[], domain?: [number, number]): ColorScale"
+	},
 	{
 		name: "Stack",
 		summary: "Yoga-flexbox layout factory (column by default) — a Layout subclass that stacks children with gap/padding/justify/align. Needs loadYogaLayoutEngine() before mount/render. On the @glissade/scene/layout subpath.",

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { C as Mat2x3, D as matEquals, E as invert, O as multiply, S as IDENTITY, T as fromTRS, _ as StrokeStyle, a as FilterSpec, b as glow, c as MeshInterpolation, d as Paint, f as PathSeg, g as ShaderRef, h as ResourceId, i as DrawCommand, l as MeshPaint, m as Resource, n as DisplayList, o as FilterValidationError, p as Rect$1, r as DisplayListBuilder, s as FontSpec, t as BlendMode, u as MeshPoint, v as createDisplayListBuilder, w as applyToPoint, x as validateFilters, y as filtersToCanvasFilter } from "./displayList.js";
-import { t as collapseReplacer } from "./collapseReplacer.js";
 import { $ as measureWrappedText, A as resolveSketch, B as NodeConstructionError, C as Polyline, D as arcLength, E as SketchValidationError, F as AnchorSpec, G as TextMeasurer, H as PropInit, I as BindablePropTarget, J as __resetEstimateWarnings, K as TextMetricsLite, L as EvalContext, M as sketchStrokes, N as validateHachure, O as flatten, P as validateSketch, Q as isEstimatingMeasurer, R as HitArea, S as HachureSpec, T as SketchStyle, U as resolveAnchor, V as NodeProps, W as MEASURE_QUANTUM_PX, X as breakLines, Y as assertFiniteFontSize, Z as estimatingMeasurer, _ as WordBox, a as ImageNode, b as revealSchedule, c as Path, d as RevealMark, et as quantize, f as ShapeProps, g as VideoProps, h as Video, i as Group, j as roughen, k as hachureLines, l as PathProps, m as TextProps, n as Custom, nt as segmentWords, o as ImageProps, p as Text, q as WrappedTextMetrics, r as GraphemeBox, rt as setDefaultMeasurer, s as LineBox, t as Circle, tt as segmentGraphemes, u as Rect, v as coercePathData, w as ResolvedSketch, x as roundedRectSegs, y as pathFromSegs, z as Node } from "./nodes.js";
+import { t as collapseReplacer } from "./collapseReplacer.js";
 import { a as SceneModule, c as evaluate, i as SceneInit, n as ReservedNodeIdError, o as bindScene, r as Scene, s as createScene, t as DuplicateNodeIdError } from "./scene.js";
 import { a as LayoutEngineMissingError, c as requireLayoutEngine, i as LayoutEngine, l as setLayoutEngine, n as LayoutChildSpec, r as LayoutContainerSpec, s as getLayoutEngine, t as LayoutBox } from "./layoutEngine.js";
 import { BindableSignal, CoverageReport, EaseSpec, FontMode, FontUsage, MeshPaint as MeshPaint$1, Rng, Timeline, Track } from "@glissade/core";

package/dist/index.js

@@ -1,4 +1,4 @@
-import { $ as multiply, A as setDefaultMeasurer, B as validateHachure, C as estimatingMeasurer, D as quantize, E as measureWrappedText, F as hachureLines, G as glow, H as FilterValidationError, I as hashStr, J as IDENTITY, K as validateFilters, L as resolveSketch, M as SketchValidationError, N as arcLength, O as segmentGraphemes, P as flatten, Q as matEquals, R as roughen, S as breakLines, T as isEstimatingMeasurer, U as createDisplayListBuilder, V as validateSketch, W as filtersToCanvasFilter, X as fromTRS, Y as applyToPoint, Z as invert, a as Path, b as __resetEstimateWarnings, c as Video, d as revealSchedule, f as roundedRectSegs, h as resolveAnchor, i as ImageNode, k as segmentWords, l as coercePathData, m as NodeConstructionError, n as Custom, o as Rect, p as Node, q as collapseReplacer, r as Group, s as Text, t as Circle, u as pathFromSegs, x as assertFiniteFontSize, y as MEASURE_QUANTUM_PX, z as sketchStrokes } from "./nodes.js";
+import { $ as multiply, A as __resetEstimateWarnings, B as setDefaultMeasurer, C as Node, F as isEstimatingMeasurer, G as glow, H as FilterValidationError, I as measureWrappedText, J as IDENTITY, K as validateFilters, L as quantize, M as breakLines, N as estimatingMeasurer, Q as matEquals, R as segmentGraphemes, S as validateSketch, T as resolveAnchor, U as createDisplayListBuilder, W as filtersToCanvasFilter, X as fromTRS, Y as applyToPoint, Z as invert, _ as hashStr, a as Path, b as sketchStrokes, c as Video, d as revealSchedule, f as roundedRectSegs, g as hachureLines, h as flatten, i as ImageNode, j as assertFiniteFontSize, k as MEASURE_QUANTUM_PX, l as coercePathData, m as arcLength, n as Custom, o as Rect, p as SketchValidationError, q as collapseReplacer, r as Group, s as Text, t as Circle, u as pathFromSegs, v as resolveSketch, w as NodeConstructionError, x as validateHachure, y as roughen, z as segmentWords } from "./nodes.js";
 import { a as evaluate, i as createScene, n as ReservedNodeIdError, r as bindScene, t as DuplicateNodeIdError } from "./scene.js";
 import { i as setLayoutEngine, n as getLayoutEngine, r as requireLayoutEngine, t as LayoutEngineMissingError } from "./layoutEngine.js";
 import { i as echo, n as motionBlur, r as Echo, t as MotionBlur } from "./motionBlur.js";

package/dist/layoutCtors.js

@@ -1,4 +1,4 @@
-import { r as Group, w as fallbackMeasurer } from "./nodes.js";
+import { P as fallbackMeasurer, r as Group } from "./nodes.js";
 import { r as requireLayoutEngine } from "./layoutEngine.js";
 import { computed, signal } from "@glissade/core";
 //#region src/layoutCtors.ts

package/dist/nodes.js

@@ -252,388 +252,101 @@ function createDisplayListBuilder(size) {
 	};
 }
 //#endregion
-//#region src/sketch.ts
+//#region src/text.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).
+* Text measurement + line breaking (DESIGN.md §3.6). Shaping is delegated to
+* the canvas implementation; line breaking is OURS, driven by the injected
+* TextMeasurer so the breaker always measures with the rasterizer that will
+* draw. Layout-feeding measurements are quantized (0.5px) so sub-pixel
+* advance drift between Skia/HarfBuzz versions cannot move whole layouts.
 */
-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");
+/**
+* §3.6 measurement quantum (px). Scene-owned pre-measure quantizes every
+* layout-feeding advance to this grid ONCE, then hands Yoga frozen integers —
+* so sub-pixel measureText drift between Skia/HarfBuzz versions cannot move a
+* whole layout. The single source of truth for the grid; `quantize` rounds to
+* it. (Yoga's `setMeasureFunc` was considered and rejected — see DESIGN.md §3.6.)
+*/
+const MEASURE_QUANTUM_PX = .5;
+/** §3.6 measurement quantum — round to the MEASURE_QUANTUM_PX grid. */
+function quantize(v) {
+	return Math.round(v / MEASURE_QUANTUM_PX) * MEASURE_QUANTUM_PX;
 }
-/** 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]
-		};
-	}
+/**
+* FAIL LOUD on a non-measurable FontSpec (§0.24 fail-loud sweep). A `size` that
+* isn't a finite positive number silently yields NaN/0 metrics in the estimating
+* measurers (and a wrong-font fallback in the real backends) → zero-height layout
+* boxes, broken wrapping/reveal, all with NO error — the silent-wrong-result class
+* an agent can't glance-test. The common cause is the field name: the FontSpec
+* field is `size`, NOT `fontSize` (that is the Text node prop). The single guard
+* every measurement entry point (breakLines, measureWrappedText, the backend
+* `measureText`s) routes through, so the contract is enforced uniformly.
+*/
+function assertFiniteFontSize(font, where) {
+	if (typeof font.size !== "number" || !Number.isFinite(font.size) || font.size <= 0) throw new Error(`${where}: font.size must be a positive number (got ${JSON.stringify(font.size)}). The FontSpec field is \`size\`, not \`fontSize\` (that is the Text node prop) — pass \`{ family, size }\`.`);
 }
-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.
+* Estimating fallback measurer — used only when no backend has been injected
+* (e.g. evaluating for IR-level tests). Deterministic but not metrically
+* faithful; mount(), the CLI, and exporters always inject the real one.
 */
-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;
+let defaultMeasurer = null;
+/**
+* Process-wide fallback measurer for FACTORY-TIME measurement — component
+* factories run before any scene exists, so Text pulls (measuredSize,
+* lineBoxes, wordBoxes) and createScene fall back here before the estimator.
+* Node consumers: `setDefaultMeasurer(createMeasurer({ fonts }))` from
+* @glissade/backend-skia gives factory code the rasterizer's real metrics.
+* Scene-injected measurers (mount/CLI/golden harness) always win.
+*/
+function setDefaultMeasurer(m) {
+	defaultMeasurer = m;
+}
+/** The default-or-estimating chain end; internal fallback for measurer pulls. */
+function fallbackMeasurer() {
+	return defaultMeasurer ?? estimatingMeasurer;
+}
+const estimatingMeasurer = { measureText(text, font) {
+	return {
+		width: text.length * font.size * .52,
+		ascent: font.size * .8,
+		descent: font.size * .2
 	};
-	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);
+} };
+/**
+* True when `m` is the per-character ESTIMATING fallback (the module singleton)
+* — i.e. no real backend measurer and no registered `defaultMeasurer` was
+* available. Identity-compare so a real backend or a `setDefaultMeasurer`-
+* registered measurer never trips it.
+*/
+function isEstimatingMeasurer(m) {
+	return m === estimatingMeasurer;
 }
-/** 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;
+const warnedEstimate = /* @__PURE__ */ new Set();
+/**
+* One-shot dev-warning when a build-time geometry getter resolved its measurer
+* to the rough per-character estimate (no backend, no `setDefaultMeasurer`).
+* `site` keys the de-dupe so each distinct caller warns at most once. Silent
+* when a real measurer is in play — the estimate is the only footgun here.
+*/
+function warnIfEstimating(m, site) {
+	if (!isEstimatingMeasurer(m)) return;
+	if (warnedEstimate.has(site)) return;
+	warnedEstimate.add(site);
+	emitDevWarning(`${site}: no text measurer available — using a rough per-character estimate; pass { measurer } or call after setTextMeasurer()/setDefaultMeasurer() for exact layout.`);
 }
-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)}`);
+/**
+* Test-only: clear the one-shot de-dupe so the estimate warning can re-assert.
+* @internal
+*/
+function __resetEstimateWarnings() {
+	warnedEstimate.clear();
 }
+let wordSegmenter;
 /**
-* 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
-* 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/text.ts
-/**
-* Text measurement + line breaking (DESIGN.md §3.6). Shaping is delegated to
-* the canvas implementation; line breaking is OURS, driven by the injected
-* TextMeasurer so the breaker always measures with the rasterizer that will
-* draw. Layout-feeding measurements are quantized (0.5px) so sub-pixel
-* advance drift between Skia/HarfBuzz versions cannot move whole layouts.
-*/
-/**
-* §3.6 measurement quantum (px). Scene-owned pre-measure quantizes every
-* layout-feeding advance to this grid ONCE, then hands Yoga frozen integers —
-* so sub-pixel measureText drift between Skia/HarfBuzz versions cannot move a
-* whole layout. The single source of truth for the grid; `quantize` rounds to
-* it. (Yoga's `setMeasureFunc` was considered and rejected — see DESIGN.md §3.6.)
-*/
-const MEASURE_QUANTUM_PX = .5;
-/** §3.6 measurement quantum — round to the MEASURE_QUANTUM_PX grid. */
-function quantize(v) {
-	return Math.round(v / MEASURE_QUANTUM_PX) * MEASURE_QUANTUM_PX;
-}
-/**
-* FAIL LOUD on a non-measurable FontSpec (§0.24 fail-loud sweep). A `size` that
-* isn't a finite positive number silently yields NaN/0 metrics in the estimating
-* measurers (and a wrong-font fallback in the real backends) → zero-height layout
-* boxes, broken wrapping/reveal, all with NO error — the silent-wrong-result class
-* an agent can't glance-test. The common cause is the field name: the FontSpec
-* field is `size`, NOT `fontSize` (that is the Text node prop). The single guard
-* every measurement entry point (breakLines, measureWrappedText, the backend
-* `measureText`s) routes through, so the contract is enforced uniformly.
-*/
-function assertFiniteFontSize(font, where) {
-	if (typeof font.size !== "number" || !Number.isFinite(font.size) || font.size <= 0) throw new Error(`${where}: font.size must be a positive number (got ${JSON.stringify(font.size)}). The FontSpec field is \`size\`, not \`fontSize\` (that is the Text node prop) — pass \`{ family, size }\`.`);
-}
-/**
-* Estimating fallback measurer — used only when no backend has been injected
-* (e.g. evaluating for IR-level tests). Deterministic but not metrically
-* faithful; mount(), the CLI, and exporters always inject the real one.
-*/
-let defaultMeasurer = null;
-/**
-* Process-wide fallback measurer for FACTORY-TIME measurement — component
-* factories run before any scene exists, so Text pulls (measuredSize,
-* lineBoxes, wordBoxes) and createScene fall back here before the estimator.
-* Node consumers: `setDefaultMeasurer(createMeasurer({ fonts }))` from
-* @glissade/backend-skia gives factory code the rasterizer's real metrics.
-* Scene-injected measurers (mount/CLI/golden harness) always win.
-*/
-function setDefaultMeasurer(m) {
-	defaultMeasurer = m;
-}
-/** The default-or-estimating chain end; internal fallback for measurer pulls. */
-function fallbackMeasurer() {
-	return defaultMeasurer ?? estimatingMeasurer;
-}
-const estimatingMeasurer = { measureText(text, font) {
-	return {
-		width: text.length * font.size * .52,
-		ascent: font.size * .8,
-		descent: font.size * .2
-	};
-} };
-/**
-* True when `m` is the per-character ESTIMATING fallback (the module singleton)
-* — i.e. no real backend measurer and no registered `defaultMeasurer` was
-* available. Identity-compare so a real backend or a `setDefaultMeasurer`-
-* registered measurer never trips it.
-*/
-function isEstimatingMeasurer(m) {
-	return m === estimatingMeasurer;
-}
-const warnedEstimate = /* @__PURE__ */ new Set();
-/**
-* One-shot dev-warning when a build-time geometry getter resolved its measurer
-* to the rough per-character estimate (no backend, no `setDefaultMeasurer`).
-* `site` keys the de-dupe so each distinct caller warns at most once. Silent
-* when a real measurer is in play — the estimate is the only footgun here.
-*/
-function warnIfEstimating(m, site) {
-	if (!isEstimatingMeasurer(m)) return;
-	if (warnedEstimate.has(site)) return;
-	warnedEstimate.add(site);
-	emitDevWarning(`${site}: no text measurer available — using a rough per-character estimate; pass { measurer } or call after setTextMeasurer()/setDefaultMeasurer() for exact layout.`);
-}
-/**
-* Test-only: clear the one-shot de-dupe so the estimate warning can re-assert.
-* @internal
-*/
-function __resetEstimateWarnings() {
-	warnedEstimate.clear();
-}
-let wordSegmenter;
-/**
-* The draw-path word segmentation (Intl.Segmenter boundaries, punctuation
-* glued to its predecessor) — exported so Text.wordBoxes() boxes EXACTLY the
-* units the breaker flows.
+* The draw-path word segmentation (Intl.Segmenter boundaries, punctuation
+* glued to its predecessor) — exported so Text.wordBoxes() boxes EXACTLY the
+* units the breaker flows.
 */
 function segmentWords(text) {
 	if (wordSegmenter === void 0) wordSegmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "word" }) : null;
@@ -1128,6 +841,293 @@ 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;
+}
+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
+* 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.
@@ -2302,4 +2302,4 @@ function revealSchedule(text, reveal, measurer) {
 	return marks;
 }
 //#endregion
-export { multiply as $, setDefaultMeasurer as A, validateHachure as B, estimatingMeasurer as C, quantize as D, measureWrappedText as E, hachureLines as F, glow as G, FilterValidationError as H, hashStr as I, IDENTITY as J, validateFilters as K, resolveSketch as L, SketchValidationError as M, arcLength as N, segmentGraphemes as O, flatten as P, matEquals as Q, roughen as R, breakLines as S, isEstimatingMeasurer as T, createDisplayListBuilder as U, validateSketch as V, filtersToCanvasFilter as W, fromTRS as X, applyToPoint as Y, invert as Z, NODE_CONSTRUCTION_PROP_NAMES as _, Path as a, __resetEstimateWarnings as b, Video as c, revealSchedule as d, roundedRectSegs as f, BASE_CONSTRUCTION_PROP_NAMES as g, resolveAnchor as h, ImageNode as i, warnIfEstimating as j, segmentWords as k, coercePathData as l, NodeConstructionError as m, Custom as n, Rect as o, Node as p, collapseReplacer as q, Group as r, Text as s, Circle as t, pathFromSegs as u, isConstructionProp as v, fallbackMeasurer as w, assertFiniteFontSize as x, MEASURE_QUANTUM_PX as y, sketchStrokes as z };
+export { multiply as $, __resetEstimateWarnings as A, setDefaultMeasurer as B, Node as C, NODE_CONSTRUCTION_PROP_NAMES as D, BASE_CONSTRUCTION_PROP_NAMES as E, isEstimatingMeasurer as F, glow as G, FilterValidationError as H, measureWrappedText as I, IDENTITY as J, validateFilters as K, quantize as L, breakLines as M, estimatingMeasurer as N, isConstructionProp as O, fallbackMeasurer as P, matEquals as Q, segmentGraphemes as R, validateSketch as S, resolveAnchor as T, createDisplayListBuilder as U, warnIfEstimating as V, filtersToCanvasFilter as W, fromTRS as X, applyToPoint as Y, invert as Z, hashStr as _, Path as a, sketchStrokes as b, Video as c, revealSchedule as d, roundedRectSegs as f, hachureLines as g, flatten as h, ImageNode as i, assertFiniteFontSize as j, MEASURE_QUANTUM_PX as k, coercePathData as l, arcLength as m, Custom as n, Rect as o, SketchValidationError as p, collapseReplacer as q, Group as r, Text as s, Circle as t, pathFromSegs as u, resolveSketch as v, NodeConstructionError as w, validateHachure as x, roughen as y, segmentWords as z };

package/dist/orient.js

@@ -1,4 +1,4 @@
-import { Y as applyToPoint, a as Path, p as Node } from "./nodes.js";
+import { C as Node, Y as applyToPoint, a as Path } from "./nodes.js";
 import { signal } from "@glissade/core";
 //#region src/motionPath.ts
 /**

package/dist/scene.js

@@ -1,4 +1,4 @@
-import { E as measureWrappedText, U as createDisplayListBuilder, r as Group, v as isConstructionProp, w as fallbackMeasurer } from "./nodes.js";
+import { I as measureWrappedText, O as isConstructionProp, P as fallbackMeasurer, U as createDisplayListBuilder, r as Group } from "./nodes.js";
 import { bindTimeline, compileTimeline, createPlayhead, evaluateAt, signal } from "@glissade/core";
 //#region src/scene.ts
 /**

package/dist/tokens.js

@@ -1,4 +1,4 @@
-import { J as IDENTITY, Q as matEquals, f as roundedRectSegs, p as Node } from "./nodes.js";
+import { C as Node, J as IDENTITY, Q as matEquals, f as roundedRectSegs } from "./nodes.js";
 import { signal, vec2Signal } from "@glissade/core";
 //#region src/tokenHighlight.ts
 /**

package/dist/type.js

@@ -1,4 +1,4 @@
-import { D as quantize, j as warnIfEstimating, r as Group, s as Text, w as fallbackMeasurer } from "./nodes.js";
+import { L as quantize, P as fallbackMeasurer, V as warnIfEstimating, r as Group, s as Text } from "./nodes.js";
 //#region src/type.ts
 /**
 * `@glissade/scene/type` — `splitText()`: build-time split-text sub-targets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glissade/scene",
-  "version": "0.31.0-pre.1",
+  "version": "0.32.0-pre.0",
   "description": "glissade scene graph: nodes, transforms, DisplayList emission. Renderer-agnostic; zero DOM/Node dependencies.",
   "license": "Apache-2.0",
   "engines": {
@@ -27,6 +27,10 @@
       "types": "./dist/grid.d.ts",
       "default": "./dist/grid.js"
     },
+    "./chart": {
+      "types": "./dist/chart.d.ts",
+      "default": "./dist/chart.js"
+    },
     "./path": {
       "types": "./dist/path.d.ts",
       "default": "./dist/path.js"
@@ -65,7 +69,7 @@
   ],
   "dependencies": {
     "yoga-layout": "^3.2.1",
-    "@glissade/core": "0.31.0-pre.1"
+    "@glissade/core": "0.32.0-pre.0"
   },
   "repository": {
     "type": "git",