@glissade/scene 0.10.0 → 0.10.1-pre.1

package/dist/index.d.ts

@@ -440,6 +440,10 @@ declare class ShaderEffect extends Group {
 }
 //#endregion
 //#region src/raster2d.d.ts
+/** A backend gradient handle (DOM CanvasGradient and @napi-rs CanvasGradient both satisfy it). */
+interface CanvasGradientLike {
+  addColorStop(offset: number, color: string): void;
+}
 /** The structural path surface buildPath drives — DOM Path2D and @napi-rs Path2D both satisfy it. */
 interface PathLike {
   moveTo(x: number, y: number): void;
@@ -468,6 +472,8 @@ 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;
+  createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number, r1: number): CanvasGradientLike;
+  createLinearGradient(x0: number, y0: number, x1: number, y1: number): CanvasGradientLike;
   lineDashOffset: number;
   fillStyle: unknown;
   strokeStyle: unknown;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { A as quantize, B as applyToPoint, C as validateSketch, D as breakLines, E as MEASURE_QUANTUM_PX, F as createDisplayListBuilder, H as invert, I as filtersToCanvasFilter, L as glow, M as segmentWords, N as setDefaultMeasurer, O as estimatingMeasurer, P as FilterValidationError, R as validateFilters, S as validateHachure, T as resolveAnchor, U as matEquals, V as fromTRS, W as multiply, _ 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 segmentGraphemes, k as fallbackMeasurer, 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 IDENTITY } from "./layoutEngine.js";
-import { bindTimeline, buildFontRegistry, compileTimeline, createPlayhead, emitDevWarning, evaluateAt, key, parseCmap, signal, stagger, track, validateFonts, vec2Signal } from "@glissade/core";
+import { bindTimeline, buildFontRegistry, compileTimeline, createPlayhead, emitDevWarning, evaluateAt, key, lerpColor, parseCmap, signal, stagger, track, validateFonts, vec2Signal } from "@glissade/core";
 //#region src/highlight.ts
 /**
 * Marker-style text highlight: per-line rounded rects behind a Text node's
@@ -958,6 +958,38 @@ var ShaderEffect = class extends Group {
 		};
 	}
 };
+const smoothstep = (u) => u * u * (3 - 2 * u);
+const GAUSS_K = 2.4;
+const GAUSS_NORM = 1 - Math.exp(-5.76 / 2);
+const gaussianEase = (u) => (1 - Math.exp(-((u * GAUSS_K) ** 2) / 2)) / GAUSS_NORM;
+/**
+* Densify `stops` into a `smooth`/`gaussian` oklab ramp. The output spans the
+* input's offset range with GRADIENT_RAMP_STEPS uniformly-spaced stops; each
+* point eases its blend within the authored segment it falls in. Returns the
+* input unchanged for `linear` (or a single stop) — the canvas-native path.
+*/
+function densifyStops(stops, mode) {
+	if (mode === "linear" || stops.length < 2) return stops;
+	const ease = mode === "gaussian" ? gaussianEase : smoothstep;
+	const o0 = stops[0].offset;
+	const span = stops[stops.length - 1].offset - o0;
+	if (span <= 0) return stops;
+	const out = [];
+	let seg = 0;
+	for (let i = 0; i < 64; i++) {
+		const offset = o0 + span * (i / 63);
+		while (seg < stops.length - 2 && offset > stops[seg + 1].offset) seg++;
+		const a = stops[seg];
+		const b = stops[seg + 1];
+		const w = b.offset - a.offset;
+		const u = w > 0 ? Math.min(1, Math.max(0, (offset - a.offset) / w)) : 0;
+		out.push({
+			offset,
+			color: lerpColor(a.color, b.color, ease(u))
+		});
+	}
+	return out;
+}
 //#endregion
 //#region src/raster2d.ts
 /**
@@ -967,6 +999,25 @@ var ShaderEffect = class extends Group {
 * four-line adapters, so the twin rasterizers structurally cannot drift —
 * the golden + SSIM suites verify the refactor preserved every byte.
 */
+function resolveFill(ctx, paint, bounds) {
+	if (paint.kind === "color") return paint.color;
+	let g;
+	if (paint.kind === "radial") {
+		const cx = paint.center ? paint.center[0] : bounds ? (bounds.minX + bounds.maxX) / 2 : 0;
+		const cy = paint.center ? paint.center[1] : bounds ? (bounds.minY + bounds.maxY) / 2 : 0;
+		const r = paint.radius !== void 0 ? paint.radius : bounds ? Math.hypot(bounds.maxX - bounds.minX, bounds.maxY - bounds.minY) / 2 : 0;
+		g = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
+	} else {
+		const fx = paint.from ? paint.from[0] : bounds ? (bounds.minX + bounds.maxX) / 2 : 0;
+		const fy = paint.from ? paint.from[1] : bounds ? bounds.minY : 0;
+		const tx = paint.to ? paint.to[0] : bounds ? (bounds.minX + bounds.maxX) / 2 : 0;
+		const ty = paint.to ? paint.to[1] : bounds ? bounds.maxY : 0;
+		g = ctx.createLinearGradient(fx, fy, tx, ty);
+	}
+	const stops = paint.interpolation ? densifyStops(paint.stops, paint.interpolation) : paint.stops;
+	for (const s of stops) g.addColorStop(s.offset, s.color);
+	return g;
+}
 function fontString(font) {
 	return `${font.style === "italic" ? "italic " : ""}${font.weight !== void 0 && font.weight !== 400 ? `${font.weight} ` : ""}${font.size}px ${font.family}`;
 }
@@ -1260,15 +1311,16 @@ var Raster2D = class {
 					break;
 				case "fillPath": {
 					const ctx = ctxOf();
-					ctx.fillStyle = cmd.paint.color;
-					ctx.fill(this.path(list.resources, cmd.path));
 					const b = this.pathBounds(list.resources, cmd.path);
+					ctx.fillStyle = resolveFill(ctx, cmd.paint, b);
+					ctx.fill(this.path(list.resources, cmd.path));
 					if (b) accumulateRect(top(), mat, b.minX, b.minY, b.maxX, b.maxY);
 					break;
 				}
 				case "strokePath": {
 					const ctx = ctxOf();
-					ctx.strokeStyle = cmd.paint.color;
+					const sb = this.pathBounds(list.resources, cmd.path);
+					ctx.strokeStyle = resolveFill(ctx, cmd.paint, sb);
 					ctx.lineWidth = cmd.stroke.width;
 					ctx.lineCap = cmd.stroke.cap ?? "butt";
 					ctx.lineJoin = cmd.stroke.join ?? "miter";
@@ -1281,17 +1333,16 @@ var Raster2D = class {
 						ctx.setLineDash([]);
 						ctx.lineDashOffset = 0;
 					}
-					const b = this.pathBounds(list.resources, cmd.path);
-					if (b) {
+					if (sb) {
 						const o = cmd.stroke.width * ((cmd.stroke.join ?? "miter") === "miter" ? 5 : 1);
-						accumulateRect(top(), mat, b.minX - o, b.minY - o, b.maxX + o, b.maxY + o);
+						accumulateRect(top(), mat, sb.minX - o, sb.minY - o, sb.maxX + o, sb.maxY + o);
 					}
 					break;
 				}
 				case "fillText": {
 					const ctx = ctxOf();
 					ctx.font = fontString(cmd.font);
-					ctx.fillStyle = cmd.paint.color;
+					ctx.fillStyle = resolveFill(ctx, cmd.paint, null);
 					ctx.textBaseline = "alphabetic";
 					ctx.textAlign = cmd.align ?? "left";
 					ctx.fillText(cmd.text, cmd.x, cmd.y);

package/dist/layoutEngine.d.ts

@@ -1,4 +1,4 @@
-import { BindableSignal, PathValue, ReadonlySignal, Rng, Track, Vec2, Vec2Signal } from "@glissade/core";
+import { BindableSignal, Paint, PathValue, ReadonlySignal, Rng, Track, Vec2, Vec2Signal } from "@glissade/core";
 
 //#region src/matrix.d.ts
 
@@ -33,11 +33,6 @@ type Resource = {
   mediaT: number;
 };
 type BlendMode = 'source-over' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten';
-/** M1: solid colors. Gradients/patterns are additive later — backends switch on kind. */
-type Paint = {
-  kind: 'color';
-  color: string;
-};
 interface StrokeStyle {
   width: number;
   cap?: 'butt' | 'round' | 'square';
@@ -498,8 +493,12 @@ declare class Group extends Node {
   remove(child: Node): this;
   protected draw(out: DisplayListBuilder, ctx: EvalContext): void;
 }
+/** A color string is sugar for a solid `color` Paint; a Paint passes through. */
+
 interface ShapeProps extends NodeProps {
-  fill?: PropInit<string>;
+  /** A CSS color string, or a `Paint` (e.g. a `radial` gradient — soft-light
+   * fills with no blur filter; center/radius default to the shape bounds). */
+  fill?: PropInit<string | Paint>;
   stroke?: PropInit<string>;
   strokeWidth?: PropInit<number>;
   /** hand-drawn look: the outline is geometrically roughened (see sketch.ts) */
@@ -515,7 +514,7 @@ interface ShapeProps extends NodeProps {
   sketchFill?: HachureSpec;
 }
 declare abstract class Shape extends Node {
-  readonly fill: BindableSignal<string>;
+  readonly fill: BindableSignal<string | Paint>;
   readonly stroke: BindableSignal<string>;
   readonly strokeWidth: BindableSignal<number>;
   readonly sketch: SketchStyle | undefined;

package/dist/layoutEngine.js

@@ -948,6 +948,13 @@ var Group = class extends Node {
 		for (const child of sorted) child.emit(out, ctx);
 	}
 };
+/** A color string is sugar for a solid `color` Paint; a Paint passes through. */
+function toPaint(fill) {
+	return typeof fill === "string" ? {
+		kind: "color",
+		color: fill
+	} : fill;
+}
 var Shape = class extends Node {
 	fill;
 	stroke;
@@ -984,10 +991,7 @@ var Shape = class extends Node {
 		if (fill) out.push({
 			op: "fillPath",
 			path,
-			paint: {
-				kind: "color",
-				color: fill
-			}
+			paint: toPaint(fill)
 		});
 		const stroke = this.stroke();
 		const width = this.strokeWidth();
@@ -1021,14 +1025,11 @@ var Shape = class extends Node {
 			out.push({
 				op: "fillPath",
 				path,
-				paint: {
-					kind: "color",
-					color: fill
-				}
+				paint: toPaint(fill)
 			});
 		}
 		const { strokes, resolved } = roughen(segs, this.sketch, rng);
-		const ink = this.stroke() || fill || "#000000";
+		const ink = this.stroke() || (typeof fill === "string" ? fill : "") || "#000000";
 		if (this.sketchFill) {
 			const clipPath = out.resource({
 				kind: "path",

package/package.json

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