@neta-art/cohub 10.0.0 → 11.1.0

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, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, DEFAULT_BOARD_RENDER_LABELS, 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, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, BoardScriptHostOptions, BrowserBoardScriptHost, ClipGroup, DEFAULT_BOARD_RENDER_LABELS, 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 { DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer } from "./renderers/board-renderer-registry.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, DEFAULT_BOARD_RENDER_LABELS, 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/media-interaction.js

@@ -1,4 +1,4 @@
-import { featuredTaskArtifact } from "../model/task.js";
+import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
 import "./renderers/task-card-renderer.js";
 //#region src/board/render/media-interaction.ts
 function mediaPlayBadgeVisible(item, zoom, options) {

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, BoardTaskItem } 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,11 +17,22 @@ 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;
 };
+type BoardRenderLabels = {
+  queued: string;
+  generating: string;
+  failed: string;
+  previewUnavailable: string;
+  noPreview: string;
+};
+declare const DEFAULT_BOARD_RENDER_LABELS: BoardRenderLabels;
 type BoardRenderContext = {
   settings: BoardSettings;
   scene: BoardScene;
@@ -33,7 +45,14 @@ type BoardRenderContext = {
   rendererType: "gpu" | "canvas";
   zoom: number;
   time: number;
-  sketches?: BoardSketchHost;
+  reducedMotion: boolean;
+  labels: BoardRenderLabels;
+  taskRun: (taskRunId: string) => {
+    status: BoardTaskItem["props"]["snapshot"]["status"];
+    startedAt?: string;
+  } | null;
+  frameAt?: (id: string, time: number) => BoardFrame | undefined;
+  scripts?: BoardScriptHost;
   assetKey: (item: BoardSceneItem) => string | null;
   getTexture: (key: string) => Texture | null;
   hasError: (key: string) => boolean;
@@ -45,6 +64,7 @@ type BoardCardRenderer = {
   id: string;
   canRender: (item: BoardSceneItem, context: BoardRenderContext) => boolean;
   animated?: boolean;
+  tick?: (container: Container, clock: number) => number | null;
   create: (item: BoardSceneItem, context: BoardRenderContext) => Container;
   update: (container: Container, item: BoardSceneItem, context: BoardRenderContext) => void;
   renderFar?: (graphics: Graphics, item: BoardSceneItem, context: BoardRenderContext) => void;
@@ -59,4 +79,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, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer };

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

@@ -1,18 +1,25 @@
+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";
 import { videoCardRenderer } from "./video-card-renderer.js";
 //#region src/board/render/renderers/board-renderer-registry.ts
+const DEFAULT_BOARD_RENDER_LABELS = {
+	queued: "Queued",
+	generating: "Generating",
+	failed: "Failed",
+	previewUnavailable: "Preview unavailable",
+	noPreview: "No preview"
+};
 const builtinCardRenderers = [
 	textCardRenderer,
 	imageCardRenderer,
@@ -25,7 +32,7 @@ const builtinCardRenderers = [
 	arrowCardRenderer,
 	frameCardRenderer,
 	effectCardRenderer,
-	sketchCardRenderer
+	customCardRenderer
 ];
 /**
 * Pick a renderer per item: `renderers` first, then the built-ins. Items no
@@ -41,4 +48,4 @@ function createBoardCardRendererResolver(renderers = []) {
 /** The built-in renderers alone. */
 const getBoardCardRenderer = createBoardCardRendererResolver();
 //#endregion
-export { createBoardCardRendererResolver, getBoardCardRenderer };
+export { DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer };

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,28 @@ 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;
+	const display = texture ?? Texture.EMPTY;
+	if (parts.sprite.texture !== display) parts.sprite.texture = display;
 	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 +37,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 +77,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 +91,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":

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

@@ -1,8 +1,9 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { itemAlpha, itemColor } from "../palette.js";
 import { syncTextResolution } from "../text-resolution.js";
 import { createLabel, positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { itemColor } from "../palette.js";
+import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/frame-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -16,13 +17,15 @@ function sync(container, item, context) {
 	const selected = context.selectedIds.has(item.id);
 	const hovered = context.hoveredId === item.id;
 	const fill = itemColor(context, style.fill ?? style.stroke, "neutral", "fill");
-	const fillAlpha = style.fillOpacity ?? (style.fill ? 1 : DEFAULT_WASH);
+	const fillAlpha = (style.fillOpacity ?? (style.fill ? 1 : DEFAULT_WASH)) * itemAlpha(context, style.fill ?? style.stroke);
 	const baseStroke = itemColor(context, style.stroke, "neutral");
-	const stroke = selected ? context.palette.brand : baseStroke;
-	const alpha = selected ? 1 : hovered ? .85 : .55;
+	const stroke = selected ? context.palette.brand : hovered && style.stroke ? context.palette.muted : baseStroke;
+	const alpha = (selected || style.stroke ? 1 : hovered ? .85 : .55) * itemAlpha(context, style.stroke);
 	const radius = style.radius ?? 4;
 	const strokeWidth = style.strokeWidth ?? 1.5;
+	const decorated = props.decoration !== "none";
 	const visualSig = [
+		props.decoration,
 		frame.width,
 		frame.height,
 		selected,
@@ -30,23 +33,36 @@ function sync(container, item, context) {
 		fill,
 		fillAlpha,
 		stroke,
+		alpha,
 		radius,
-		strokeWidth
+		strokeWidth,
+		style.dash,
+		style.trim
 	].join("|");
 	if (visualSig !== parts.visualSig) {
 		parts.visualSig = visualSig;
 		parts.box.clear();
-		parts.box.roundRect(0, 0, frame.width, frame.height, radius).fill({
+		if (decorated) parts.box.roundRect(0, 0, frame.width, frame.height, radius).fill({
 			color: fill,
 			alpha: fillAlpha
 		});
-		if (strokeWidth > 0 || selected) parts.box.roundRect(0, 0, frame.width, frame.height, radius).stroke({
-			color: stroke,
-			width: selected ? Math.max(2, strokeWidth) : strokeWidth,
-			alpha
-		});
+		const width = selected ? Math.max(2, strokeWidth) : strokeWidth;
+		const pattern = decorated ? dashPattern(style.dash, width) : null;
+		const trim = decorated ? style.trim ?? 1 : 1;
+		if ((decorated && strokeWidth > 0 || selected || hovered) && trim > 0) {
+			if (pattern || trim < 1) tracePolyline(parts.box, trimPolyline(roundRectPoints(frame.width, frame.height, radius), trim), pattern);
+			else parts.box.roundRect(0, 0, frame.width, frame.height, radius);
+			parts.box.stroke({
+				color: stroke,
+				width,
+				alpha,
+				cap: pattern || trim < 1 ? "round" : "butt",
+				join: "round"
+			});
+		}
 	}
-	const title = locked ? `🔒 ${props.label || "Frame"}` : props.label || "Frame";
+	parts.label.visible = decorated;
+	const title = locked ? `🔒 ${props.label}`.trim() : props.label;
 	const labelColor = style.stroke ? baseStroke : context.palette.muted;
 	const textSig = [title, labelColor].join("|");
 	if (textSig !== parts.textSig) {
@@ -84,10 +100,10 @@ const frameCardRenderer = {
 		if (item.type === "frame") sync(container, item, context);
 	},
 	renderFar: (graphics, item, context) => {
-		if (item.type !== "frame") return;
+		if (item.type !== "frame" || item.props.decoration === "none") return;
 		drawFarPlate(graphics, item.frame, {
 			fill: itemColor(context, item.style.fill ?? item.style.stroke, "neutral", "fill"),
-			fillAlpha: Math.max(.07, item.style.fillOpacity ?? (item.style.fill ? 1 : 0))
+			fillAlpha: Math.max(.07, item.style.fillOpacity ?? (item.style.fill ? 1 : 0)) * itemAlpha(context, item.style.fill ?? item.style.stroke)
 		});
 	},
 	destroy: (container) => {