@neta-art/cohub 10.0.0 → 11.0.0

package/dist/board/render/css-color.js

@@ -1,36 +1,50 @@
 import { DOMAdapter } from "pixi.js";
 //#region src/board/render/css-color.ts
-const CACHE_LIMIT = 256;
 const cache = /* @__PURE__ */ new Map();
 let canvas = null;
-function parseBoardCssColor(value) {
+function parseBoardCssPaint(value) {
 	const key = value.trim();
 	if (!key) return null;
-	const cached = cache.get(key);
-	if (cached !== void 0 || cache.has(key)) return cached ?? null;
+	if (key.toLowerCase() === "transparent") return {
+		color: 0,
+		alpha: 0
+	};
+	const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(key)?.[1];
+	if (hex) {
+		const digits = hex.length <= 4 ? [...hex].map((digit) => digit + digit).join("") : hex;
+		return {
+			color: Number.parseInt(digits.slice(0, 6), 16),
+			alpha: digits.length === 8 ? Number.parseInt(digits.slice(6), 16) / 255 : 1
+		};
+	}
+	if (cache.has(key)) return cache.get(key) ?? null;
 	let result = null;
 	try {
-		const direct = /^#([0-9a-f]{6})$/i.exec(key);
-		if (direct?.[1]) result = Number.parseInt(direct[1], 16);
-		else {
-			canvas ??= DOMAdapter.get().createCanvas(1, 1);
-			const context = canvas.getContext("2d");
-			if (context) {
-				context.fillStyle = "#010203";
-				context.fillStyle = key;
-				const first = String(context.fillStyle);
-				context.fillStyle = "#040506";
-				context.fillStyle = key;
-				const match = first === String(context.fillStyle) ? /^#([0-9a-f]{6})$/i.exec(first) : null;
-				if (match?.[1]) result = Number.parseInt(match[1], 16);
-			}
+		canvas ??= DOMAdapter.get().createCanvas(1, 1);
+		const context = canvas.getContext("2d");
+		context.fillStyle = "#010203";
+		context.fillStyle = key;
+		const first = context.fillStyle;
+		context.fillStyle = "#040506";
+		context.fillStyle = key;
+		if (first === context.fillStyle) {
+			context.clearRect(0, 0, 1, 1);
+			context.fillRect(0, 0, 1, 1);
+			const [r = 0, g = 0, b = 0, a = 0] = context.getImageData(0, 0, 1, 1).data;
+			result = {
+				color: r << 16 | g << 8 | b,
+				alpha: a / 255
+			};
 		}
 	} catch {
 		result = null;
 	}
-	if (cache.size >= CACHE_LIMIT) cache.clear();
+	if (cache.size >= 256) cache.clear();
 	cache.set(key, result);
 	return result;
 }
+function parseBoardCssColor(value) {
+	return parseBoardCssPaint(value)?.color ?? null;
+}
 //#endregion
-export { parseBoardCssColor };
+export { parseBoardCssColor, parseBoardCssPaint };

package/dist/board/render/diagnostics.d.ts

@@ -0,0 +1,20 @@
+import { BoardTextItem } from "../../protocol/dist/board-model.js";
+import "../../protocol/dist/index.js";
+import { BoardScene } from "../model/scene.js";
+//#region src/board/render/diagnostics.d.ts
+type BoardRenderDiagnostic = {
+  code: "text-clipped" | "text-overlap" | "glyph-unavailable" | "effect-follow-unused";
+  item: string;
+  related?: string;
+  characters?: string;
+};
+declare function measureBoardText(props: BoardTextItem["props"]): {
+  width: number;
+  height: number;
+  lines: string[];
+  lineHeight: number;
+  missingCharacters: string;
+};
+declare function inspectBoardScene(scene: BoardScene, limit?: number): BoardRenderDiagnostic[];
+//#endregion
+export { BoardRenderDiagnostic, inspectBoardScene, measureBoardText };

package/dist/board/render/diagnostics.js

@@ -0,0 +1,117 @@
+import { layoutBoardText } from "../../protocol/dist/board-layout.js";
+import { itemBounds, rectsIntersect } from "../model/geometry.js";
+import { boardFontFamily } from "../model/text-metrics.js";
+import { BOARD_FONT_STACKS, ensureBoardTextMeasurement } from "./text-measurement.js";
+import { DOMAdapter } from "pixi.js";
+//#region src/board/render/diagnostics.ts
+const glyphCache = /* @__PURE__ */ new Map();
+let glyphContext;
+function missingGlyph(character, font) {
+	if (/\s/u.test(character)) return false;
+	const key = `${font}:${character}`;
+	const cached = glyphCache.get(key);
+	if (cached !== void 0) return cached;
+	try {
+		glyphContext ??= DOMAdapter.get().createCanvas(64, 64).getContext("2d");
+		const ctx = glyphContext;
+		ctx.font = `32px ${font}`;
+		const absent = "􏿿";
+		if (ctx.measureText(character).width !== ctx.measureText(absent).width) {
+			if (glyphCache.size >= 2048) glyphCache.clear();
+			glyphCache.set(key, false);
+			return false;
+		}
+		const pixels = (text) => {
+			ctx.clearRect(0, 0, 64, 64);
+			ctx.fillStyle = "#000000";
+			ctx.fillText(text, 0, 40);
+			return ctx.getImageData(0, 0, 64, 64).data;
+		};
+		const a = pixels(character);
+		const b = pixels(absent);
+		const missing = a.some((n) => n !== 0) && a.every((n, i) => n === b[i]);
+		if (glyphCache.size >= 2048) glyphCache.clear();
+		glyphCache.set(key, missing);
+		return missing;
+	} catch {
+		return false;
+	}
+}
+function measureBoardText(props) {
+	ensureBoardTextMeasurement();
+	const font = boardFontFamily(props.font, BOARD_FONT_STACKS);
+	const characters = [...new Set(props.text)].slice(0, 512).filter((char) => missingGlyph(char, font)).join("");
+	return {
+		...layoutBoardText(props),
+		missingCharacters: characters
+	};
+}
+function inspectBoardScene(scene, limit = 100) {
+	ensureBoardTextMeasurement();
+	const diagnostics = [];
+	const texts = scene.items.filter((item) => item.type === "text" && scene.opacity(item.id) > .01);
+	const push = (entry) => {
+		if (diagnostics.length < limit) diagnostics.push(entry);
+	};
+	for (const item of scene.items) {
+		if (diagnostics.length >= limit) break;
+		if (item.type === "effect" && item.props.follow && item.props.kind !== "trail") push({
+			code: "effect-follow-unused",
+			item: item.id
+		});
+	}
+	let glyphBudget = 256;
+	for (const item of texts) {
+		if (diagnostics.length >= limit || item.type !== "text") break;
+		if (glyphBudget-- > 0) {
+			const measured = measureBoardText(item.props);
+			if (measured.missingCharacters) push({
+				code: "glyph-unavailable",
+				item: item.id,
+				characters: measured.missingCharacters
+			});
+		}
+		const bounds = itemBounds(item.frame);
+		let parentId = item.parent;
+		while (parentId) {
+			const parent = scene.get(parentId);
+			if (!parent) break;
+			if (parent.type === "frame" && parent.props.clip) {
+				const clip = itemBounds(parent.frame);
+				if (bounds.x < clip.x - 1 || bounds.y < clip.y - 1 || bounds.x + bounds.width > clip.x + clip.width + 1 || bounds.y + bounds.height > clip.y + clip.height + 1) {
+					push({
+						code: "text-clipped",
+						item: item.id,
+						related: parentId
+					});
+					break;
+				}
+			}
+			parentId = parent.parent;
+		}
+	}
+	const sorted = texts.map((item) => ({
+		item,
+		rect: itemBounds(item.frame)
+	})).sort((a, b) => a.rect.x - b.rect.x);
+	let comparisons = 0;
+	for (let i = 0; i < sorted.length && diagnostics.length < limit; i++) {
+		const a = sorted[i];
+		if (!a) continue;
+		for (let j = i + 1; j < sorted.length; j++) {
+			const b = sorted[j];
+			if (!b) continue;
+			if (b.rect.x >= a.rect.x + a.rect.width) break;
+			if (++comparisons > 1e4) return diagnostics;
+			if (a.item.parent === b.item.parent && rectsIntersect(a.rect, b.rect)) push({
+				code: "text-overlap",
+				item: a.item.id,
+				related: b.item.id
+			});
+			if (diagnostics.length >= limit) break;
+		}
+	}
+	return diagnostics;
+}
+//#endregion
+export { inspectBoardScene, measureBoardText };

package/dist/board/render/index.d.ts

@@ -1,14 +1,17 @@
-import { BoardCardRenderer, BoardCardRendererResolver, BoardRenderContext, BoardRenderPalette, BoardSketchHost, createBoardCardRendererResolver, getBoardCardRenderer } from "./renderers/board-renderer-registry.js";
+import { BoardCardRenderer, BoardCardRendererResolver, BoardRenderContext, BoardRenderPalette, BoardScriptHost, createBoardCardRendererResolver, getBoardCardRenderer } from "./renderers/board-renderer-registry.js";
+import { createBoardRenderSampler } from "./sampling.js";
+import { BoardRenderDiagnostic, inspectBoardScene, measureBoardText } from "./diagnostics.js";
 import { BoardBackgroundContext, createBoardBackground, updateBoardBackground } from "./board-background.js";
 import { ClipGroup, clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline } from "./clip.js";
-import { parseBoardCssColor } from "./css-color.js";
+import { BoardCssPaint, parseBoardCssColor, parseBoardCssPaint } from "./css-color.js";
 import { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible } from "./media-interaction.js";
-import { defaultBoardPalette, itemColor } from "./palette.js";
-import { BoardSketchHostOptions, BrowserBoardSketchHost, createBoardSketchHost } from "./sketch-host.js";
-import { dashPattern, endAngle, traceArrowhead, tracePolyline, trimPolyline } from "./stroke.js";
+import { defaultBoardPalette, itemAlpha, itemColor } from "./palette.js";
+import { BoardScriptHostOptions, BrowserBoardScriptHost, createBoardScriptHost } from "./script-host.js";
+import { prepareBrowserBoardScripts } from "./script-export.js";
+import { dashPattern, endAngle, roundRectPoints, traceArrowhead, tracePolyline, trimPolyline } from "./stroke.js";
 import { BOARD_EFFECT_MAX_PARTICLES } from "./renderers/effect-card-renderer.js";
 import { TASK_CARD_FULL_DETAIL_ZOOM } from "./renderers/task-card-renderer.js";
 import { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.js";
 import { getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
 import { VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, loadVideoThumbnailTexture, videoTextureNaturalSize, videoThumbnailSize } from "./video-thumbnail.js";
-export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BoardBackgroundContext, BoardCardRenderer, BoardCardRendererResolver, BoardMediaAction, BoardRenderContext, BoardRenderPalette, BoardSketchHost, BoardSketchHostOptions, BrowserBoardSketchHost, ClipGroup, TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardMediaActionAt, clippingAncestor, createBoardBackground, createBoardCardRendererResolver, createBoardSketchHost, dashPattern, defaultBoardPalette, endAngle, ensureBoardTextMeasurement, getBoardCardRenderer, getBoardResolution, installBoardTextMeasurement, isClippingFrame, itemColor, loadVideoThumbnailTexture, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceFrameOutline, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BoardBackgroundContext, BoardCardRenderer, BoardCardRendererResolver, BoardCssPaint, BoardMediaAction, BoardRenderContext, BoardRenderDiagnostic, BoardRenderPalette, BoardScriptHost, BoardScriptHostOptions, BrowserBoardScriptHost, ClipGroup, TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardMediaActionAt, clippingAncestor, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, dashPattern, defaultBoardPalette, endAngle, ensureBoardTextMeasurement, getBoardCardRenderer, getBoardResolution, inspectBoardScene, installBoardTextMeasurement, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, roundRectPoints, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceFrameOutline, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };

package/dist/board/render/index.js

@@ -1,14 +1,17 @@
-import { parseBoardCssColor } from "./css-color.js";
+import { parseBoardCssColor, parseBoardCssPaint } from "./css-color.js";
+import { defaultBoardPalette, itemAlpha, itemColor } from "./palette.js";
+import { createBoardRenderSampler } from "./sampling.js";
+import { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.js";
+import { inspectBoardScene, measureBoardText } from "./diagnostics.js";
 import { createBoardBackground, updateBoardBackground } from "./board-background.js";
 import { clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline } from "./clip.js";
 import { getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
 import { TASK_CARD_FULL_DETAIL_ZOOM } from "./renderers/task-card-renderer.js";
 import { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible } from "./media-interaction.js";
-import { defaultBoardPalette, itemColor } from "./palette.js";
-import { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.js";
-import { dashPattern, endAngle, traceArrowhead, tracePolyline, trimPolyline } from "./stroke.js";
+import { dashPattern, endAngle, roundRectPoints, traceArrowhead, tracePolyline, trimPolyline } from "./stroke.js";
 import { BOARD_EFFECT_MAX_PARTICLES } from "./renderers/effect-card-renderer.js";
 import { createBoardCardRendererResolver, getBoardCardRenderer } from "./renderers/board-renderer-registry.js";
-import { createBoardSketchHost } from "./sketch-host.js";
+import { createBoardScriptHost } from "./script-host.js";
+import { prepareBrowserBoardScripts } from "./script-export.js";
 import { VIDEO_THUMBNAIL_MAX_EDGE, loadVideoThumbnailTexture, videoTextureNaturalSize, videoThumbnailSize } from "./video-thumbnail.js";
-export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, boardMediaActionAt, clippingAncestor, createBoardBackground, createBoardCardRendererResolver, createBoardSketchHost, dashPattern, defaultBoardPalette, endAngle, ensureBoardTextMeasurement, getBoardCardRenderer, getBoardResolution, installBoardTextMeasurement, isClippingFrame, itemColor, loadVideoThumbnailTexture, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceFrameOutline, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, boardMediaActionAt, clippingAncestor, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, dashPattern, defaultBoardPalette, endAngle, ensureBoardTextMeasurement, getBoardCardRenderer, getBoardResolution, inspectBoardScene, installBoardTextMeasurement, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, roundRectPoints, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceFrameOutline, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };

package/dist/board/render/palette.d.ts

@@ -4,6 +4,7 @@ import { BoardColorId } from "../model/palette.js";
 import { BoardRenderContext, BoardRenderPalette } from "./renderers/board-renderer-registry.js";
 //#region src/board/render/palette.d.ts
 declare function defaultBoardPalette(mode: "dark" | "light"): BoardRenderPalette;
+declare function itemAlpha(context: Pick<BoardRenderContext, "colorScheme">, color: BoardColor | undefined): number;
 declare function itemColor(context: Pick<BoardRenderContext, "colors" | "colorScheme" | "palette">, color: BoardColor | undefined, fallback: BoardColorId, part?: "stroke" | "fill" | "label"): number;
 //#endregion
-export { defaultBoardPalette, itemColor };
+export { defaultBoardPalette, itemAlpha, itemColor };

package/dist/board/render/palette.js

@@ -1,5 +1,5 @@
 import { resolveItemColor } from "../model/palette.js";
-import { parseBoardCssColor } from "./css-color.js";
+import { parseBoardCssColor, parseBoardCssPaint } from "./css-color.js";
 //#region src/board/render/palette.ts
 const DARK = {
 	bg: 1315860,
@@ -28,9 +28,13 @@ const LIGHT = {
 function defaultBoardPalette(mode) {
 	return { ...mode === "light" ? LIGHT : DARK };
 }
+function itemAlpha(context, color) {
+	const value = typeof color === "object" && color ? color[context.colorScheme] : color;
+	return value ? parseBoardCssPaint(value)?.alpha ?? 1 : 1;
+}
 function itemColor(context, color, fallback, part = "stroke") {
 	if (((typeof color === "object" && color ? color[context.colorScheme] : color) ?? fallback) === "neutral" && part !== "fill") return context.palette.text;
 	return resolveItemColor(color, fallback, context.colors, context.colorScheme, parseBoardCssColor, part);
 }
 //#endregion
-export { defaultBoardPalette, itemColor };
+export { defaultBoardPalette, itemAlpha, itemColor };

package/dist/board/render/renderers/arrow-card-renderer.js

@@ -1,8 +1,8 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { pathPointAt, resolveSceneArrow } from "../../model/arrow-geometry.js";
+import { itemAlpha, itemColor } from "../palette.js";
 import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
 import { drawFarStroke } from "./far-plate.js";
-import { itemColor } from "../palette.js";
 import { dashPattern, endAngle, traceArrowhead, tracePolyline, trimPolyline } from "../stroke.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/arrow-card-renderer.ts
@@ -16,6 +16,7 @@ function sync(container, item, context) {
 	const { props, style } = item;
 	const selected = context.selectedIds.has(item.id);
 	const hovered = context.hoveredId === item.id;
+	parts.line.alpha = itemAlpha(context, style.stroke);
 	const color = itemColor(context, style.stroke, "brand");
 	const size = style.strokeWidth ?? 2.5;
 	syncTextResolution(parts.label, parts, context.zoom);
@@ -130,7 +131,7 @@ const arrowCardRenderer = {
 		drawFarStroke(graphics, trimPolyline(resolved.path, arrow.style.trim), {
 			color: itemColor(context, arrow.style.stroke, "brand"),
 			width: arrow.style.strokeWidth ?? 2.5,
-			alpha: .85
+			alpha: .85 * itemAlpha(context, arrow.style.stroke)
 		});
 	},
 	destroy: (container) => {

package/dist/board/render/renderers/audio-card-renderer.js

@@ -1,4 +1,5 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { getMediaResourceTitle } from "../../model/media.js";
 import { drawAudioWaveform } from "../audio-waveform.js";
 import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
@@ -15,7 +16,7 @@ function sync(container, item, context) {
 	const { width, height } = item.frame;
 	const selected = context.selectedIds.has(item.id);
 	const hovered = context.hoveredId === item.id;
-	const title = item.props.snapshot?.title ?? item.props.src.split("/").pop() ?? "Audio";
+	const title = item.props.snapshot?.title ?? getMediaResourceTitle(item.props.src);
 	syncTextResolution(parts.label, parts, context.zoom);
 	if (parts.label.text !== title) parts.label.text = title;
 	syncTextWrapWidth(parts.label, parts, Math.max(1, width - 24), false);

package/dist/board/render/renderers/board-renderer-registry.d.ts

@@ -1,4 +1,5 @@
-import { BoardSettings, BoardSketchItem } from "../../../protocol/dist/board-model.js";
+import { BoardCustomItem, BoardDocument, BoardSettings } from "../../../protocol/dist/board-model.js";
+import { BoardFrame } from "../../../protocol/dist/board-layout.js";
 import "../../../protocol/dist/index.js";
 import { BoardScene, BoardSceneItem, SceneItem } from "../../model/scene.js";
 import { BoardShapeColors } from "../../model/palette.js";
@@ -16,8 +17,11 @@ type BoardRenderPalette = {
   epic: number;
   legendary: number;
 };
-type BoardSketchHost = {
-  frame: (item: SceneItem<BoardSketchItem>, time: number, resolution: number) => Texture | null;
+type BoardScriptHost = {
+  document?: (document: BoardDocument, time: number) => BoardDocument;
+  ready?: (id: string) => boolean;
+  revision?: (id: string) => number;
+  frame: (item: SceneItem<BoardCustomItem>, time: number, resolution: number) => Texture | null;
   error: (id: string) => string | null;
   release: (id: string) => void;
 };
@@ -33,7 +37,8 @@ type BoardRenderContext = {
   rendererType: "gpu" | "canvas";
   zoom: number;
   time: number;
-  sketches?: BoardSketchHost;
+  frameAt?: (id: string, time: number) => BoardFrame | undefined;
+  scripts?: BoardScriptHost;
   assetKey: (item: BoardSceneItem) => string | null;
   getTexture: (key: string) => Texture | null;
   hasError: (key: string) => boolean;
@@ -59,4 +64,4 @@ declare function createBoardCardRendererResolver(renderers?: Iterable<BoardCardR
 /** The built-in renderers alone. */
 declare const getBoardCardRenderer: BoardCardRendererResolver;
 //#endregion
-export { BoardCardRenderer, BoardCardRendererResolver, BoardRenderContext, BoardRenderPalette, BoardSketchHost, createBoardCardRendererResolver, getBoardCardRenderer };
+export { BoardCardRenderer, BoardCardRendererResolver, BoardRenderContext, BoardRenderPalette, BoardScriptHost, createBoardCardRendererResolver, getBoardCardRenderer };

package/dist/board/render/renderers/board-renderer-registry.js

@@ -1,13 +1,13 @@
+import { ensureBoardTextMeasurement } from "../text-measurement.js";
 import { fileCardRenderer } from "./file-card-renderer.js";
 import { taskCardRenderer } from "./task-card-renderer.js";
-import { ensureBoardTextMeasurement } from "../text-measurement.js";
 import { arrowCardRenderer } from "./arrow-card-renderer.js";
 import { audioCardRenderer } from "./audio-card-renderer.js";
 import { drawCardRenderer } from "./draw-card-renderer.js";
 import { effectCardRenderer } from "./effect-card-renderer.js";
 import { frameCardRenderer } from "./frame-card-renderer.js";
 import { shapeCardRenderer } from "./shape-card-renderer.js";
-import { sketchCardRenderer } from "./sketch-card-renderer.js";
+import { customCardRenderer } from "./custom-card-renderer.js";
 import { imageCardRenderer } from "./image-card-renderer.js";
 import { textCardRenderer } from "./text-card-renderer.js";
 import { unknownCardRenderer } from "./unknown-card-renderer.js";
@@ -25,7 +25,7 @@ const builtinCardRenderers = [
 	arrowCardRenderer,
 	frameCardRenderer,
 	effectCardRenderer,
-	sketchCardRenderer
+	customCardRenderer
 ];
 /**
 * Pick a renderer per item: `renderers` first, then the built-ins. Items no

package/dist/board/render/renderers/custom-card-renderer.d.ts

@@ -0,0 +1,5 @@
+import { BoardCardRenderer } from "./board-renderer-registry.js";
+//#region src/board/render/renderers/custom-card-renderer.d.ts
+declare const customCardRenderer: BoardCardRenderer;
+//#endregion
+export { customCardRenderer };

package/dist/board/render/renderers/{sketch-card-renderer.js → custom-card-renderer.js}

@@ -3,26 +3,27 @@ import { getBoardResolution } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { Container, Graphics, Sprite, Text, Texture } from "pixi.js";
-//#region src/board/render/renderers/sketch-card-renderer.ts
+//#region src/board/render/renderers/custom-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
 	if (parts.id !== item.id) {
-		context.sketches?.release(parts.id);
+		context.scripts?.release(parts.id);
 		parts.id = item.id;
 	}
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
 	const resolution = Math.min(4, Math.max(.25, context.zoom * getBoardResolution()));
-	const texture = context.sketches?.frame(item, context.time, resolution) ?? null;
-	const error = context.sketches?.error(item.id) ?? null;
+	const texture = context.scripts?.frame(item, context.time, resolution) ?? null;
+	const error = context.scripts?.error(item.id) ?? null;
 	parts.sprite.visible = Boolean(texture);
 	if (texture && parts.sprite.texture !== texture) parts.sprite.texture = texture;
 	parts.sprite.width = width;
 	parts.sprite.height = height;
 	const selected = context.selectedIds.has(item.id);
-	const message = texture ? "" : error ? `${item.props.src}\n${error}` : item.props.src;
+	const ready = Boolean(texture) || context.scripts?.ready?.(item.id) === true;
+	const message = error ? `${item.script.src}\n${error}` : ready ? "" : item.script.src;
 	const sig = [
 		width,
 		height,
@@ -35,21 +36,21 @@ function sync(container, item, context) {
 	if (sig === parts.sig) return;
 	parts.sig = sig;
 	parts.placeholder.clear();
-	if (!texture || selected) parts.placeholder.rect(0, 0, width, height).stroke({
+	if (!ready || selected || error) parts.placeholder.rect(0, 0, width, height).stroke({
 		color: selected ? context.palette.brand : context.palette.border,
 		width: selected ? 2 : 1,
 		alpha: .8
 	});
-	parts.label.visible = !texture;
+	parts.label.visible = !ready || Boolean(error);
 	parts.label.text = message;
 	parts.label.style.fill = error ? context.colors.rose.stroke : context.palette.muted;
 	parts.label.style.wordWrapWidth = Math.max(40, width - 16);
 	parts.label.position.set(width / 2, height / 2);
 }
-const sketchCardRenderer = {
-	id: "sketch-card",
-	canRender: (item) => item.type === "sketch",
-	animated: true,
+const customCardRenderer = {
+	id: "custom-card",
+	canRender: (item) => item.type === "custom",
+	animated: false,
 	create: (item, context) => {
 		const root = new Container();
 		const sprite = new Sprite(Texture.EMPTY);
@@ -75,11 +76,11 @@ const sketchCardRenderer = {
 			label,
 			sig: ""
 		});
-		if (item.type === "sketch") sync(root, item, context);
+		if (item.type === "custom") sync(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		if (item.type === "sketch") sync(container, item, context);
+		if (item.type === "custom") sync(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
@@ -89,10 +90,10 @@ const sketchCardRenderer = {
 	},
 	destroy: (container, context) => {
 		const parts = partsByContainer.get(container);
-		if (parts) context.sketches?.release(parts.id);
+		if (parts) context.scripts?.release(parts.id);
 		parts?.root.destroy({ children: true });
 		partsByContainer.delete(container);
 	}
 };
 //#endregion
-export { sketchCardRenderer };
+export { customCardRenderer };

package/dist/board/render/renderers/draw-card-renderer.js

@@ -1,8 +1,8 @@
 import { applyMatrix } from "../../../protocol/dist/board-layout.js";
 import { computeDrawBounds, createStrokeRibbonBuilder, trimDrawPoints } from "../../model/draw-geometry.js";
+import { itemAlpha, itemColor } from "../palette.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarStroke, farStrokeSamples } from "./far-plate.js";
-import { itemColor } from "../palette.js";
 import { Container, Graphics, Mesh, MeshGeometry, Texture } from "pixi.js";
 //#region src/board/render/renderers/draw-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -77,6 +77,7 @@ function sync(container, item, context) {
 	}
 	const stroke = parts.stroke;
 	if (!stroke) return;
+	stroke.alpha = itemAlpha(context, item.style.stroke);
 	if (stroke instanceof Mesh) stroke.tint = color;
 	const { box } = parts;
 	const sx = item.frame.width / box.width;
@@ -120,7 +121,7 @@ const drawCardRenderer = {
 		drawFarStroke(graphics, samples.map((point) => applyMatrix(matrix, point)), {
 			color: itemColor(context, draw.style.stroke, "brand"),
 			width: draw.style.strokeWidth ?? 4,
-			alpha: 1
+			alpha: itemAlpha(context, draw.style.stroke)
 		});
 	},
 	destroy: (container) => {

package/dist/board/render/renderers/effect-card-renderer.js

@@ -1,6 +1,6 @@
+import { itemAlpha, itemColor } from "../palette.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { itemColor } from "../palette.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/effect-card-renderer.ts
 const BOARD_EFFECT_MAX_PARTICLES = 4e3;
@@ -109,11 +109,27 @@ function drawTrail(graphics, parts, item, context, color) {
 		parts.trail.length = 0;
 		return;
 	}
-	const head = {
-		x: target.frame.x + target.frame.width / 2 - item.frame.x,
-		y: target.frame.y + target.frame.height / 2 - item.frame.y,
-		t: time
+	const angle = item.frame.rotation * Math.PI / 180;
+	const localPoint = (frame, t) => {
+		const dx = frame.x + frame.width / 2 - item.frame.x - item.frame.width / 2;
+		const dy = frame.y + frame.height / 2 - item.frame.y - item.frame.height / 2;
+		return {
+			x: dx * Math.cos(angle) + dy * Math.sin(angle) + item.frame.width / 2,
+			y: -dx * Math.sin(angle) + dy * Math.cos(angle) + item.frame.height / 2,
+			t
+		};
 	};
+	const head = localPoint(target.frame, time);
+	if (context.frameAt) {
+		parts.trail.length = 0;
+		const start = Math.max(0, time - item.props.life);
+		const step = Math.max(1e3 / 30, item.props.life / 63);
+		for (let t = Math.ceil(start / step) * step; t < time; t += step) {
+			const past = context.frameAt(target.id, t);
+			if (past) parts.trail.push(localPoint(past, t));
+		}
+		parts.trail.push(head);
+	}
 	const last = parts.trail.at(-1);
 	if (last && (time < last.t || time - last.t > item.props.life)) parts.trail.length = 0;
 	if (!last || Math.hypot(head.x - last.x, head.y - last.y) > .5) parts.trail.push(head);
@@ -140,6 +156,7 @@ function sync(container, item, context) {
 	const seed = hashString(props.seed ?? item.id);
 	const time = Math.max(0, context.time);
 	const graphics = parts.graphics;
+	graphics.alpha = itemAlpha(context, item.style.fill ?? item.style.stroke);
 	graphics.clear();
 	switch (props.kind) {
 		case "particles":