@neta-art/cohub 10.0.0 → 11.0.0

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) => {

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

@@ -1,6 +1,6 @@
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { Container, Graphics, Sprite, Texture } from "pixi.js";
+import { Container, Graphics, Rectangle, Sprite, Texture } from "pixi.js";
 //#region src/board/render/renderers/image-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
 const RADIUS = 2;
@@ -15,6 +15,39 @@ function layoutContain(sprite, width, height) {
 	sprite.x = (width - sprite.width) / 2;
 	sprite.y = (height - sprite.height) / 2;
 }
+function cropRect(crop) {
+	if (!crop) return null;
+	const w = Math.min(crop.w, 1 - crop.x);
+	const h = Math.min(crop.h, 1 - crop.y);
+	return w > 0 && h > 0 ? {
+		x: crop.x,
+		y: crop.y,
+		w,
+		h
+	} : null;
+}
+function showTexture(parts, texture, crop) {
+	const rect = texture ? cropRect(crop) : null;
+	const key = rect ? `${rect.x}|${rect.y}|${rect.w}|${rect.h}` : "";
+	const previous = parts.cropped;
+	const reusable = previous && parts.cropSource === texture && parts.cropKey === key;
+	if (texture && rect && !reusable) {
+		const { frame } = texture;
+		const width = Math.max(1, frame.width * rect.w);
+		const height = Math.max(1, frame.height * rect.h);
+		const x = frame.x + Math.min(frame.width * rect.x, frame.width - width);
+		const y = frame.y + Math.min(frame.height * rect.y, frame.height - height);
+		parts.cropped = new Texture({
+			source: texture.source,
+			frame: new Rectangle(x, y, width, height)
+		});
+	} else if (!rect) parts.cropped = null;
+	parts.cropSource = rect ? texture : null;
+	parts.cropKey = key;
+	const display = parts.cropped ?? texture ?? Texture.EMPTY;
+	if (parts.sprite.texture !== display) parts.sprite.texture = display;
+	if (previous && previous !== parts.cropped) previous.destroy(false);
+}
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
@@ -33,12 +66,13 @@ function sync(container, item, context) {
 		selected,
 		hovered,
 		texId,
+		JSON.stringify(item.props.crop ?? null),
 		failed,
 		context.colorScheme
 	].join("|");
 	if (sig === parts.sig) return;
 	parts.sig = sig;
-	if (texture && parts.sprite.texture !== texture) parts.sprite.texture = texture;
+	showTexture(parts, texture, item.props.crop);
 	parts.sprite.visible = Boolean(texture);
 	if (texture) layoutContain(parts.sprite, width, height);
 	parts.placeholder.clear();
@@ -98,7 +132,10 @@ const imageCardRenderer = {
 			root,
 			sprite,
 			placeholder,
-			sig: ""
+			sig: "",
+			cropped: null,
+			cropSource: null,
+			cropKey: ""
 		});
 		if (item.type === "image") sync(root, item, context);
 		return root;
@@ -118,7 +155,9 @@ const imageCardRenderer = {
 		});
 	},
 	destroy: (container) => {
-		partsByContainer.get(container)?.root.destroy({ children: true });
+		const parts = partsByContainer.get(container);
+		parts?.root.destroy({ children: true });
+		parts?.cropped?.destroy(false);
 		partsByContainer.delete(container);
 	}
 };

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

@@ -1,10 +1,10 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { worldPoint } from "../../model/geometry.js";
+import { itemAlpha, itemColor } from "../palette.js";
 import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { itemColor } from "../palette.js";
-import { dashPattern, tracePolyline, trimPolyline } from "../stroke.js";
+import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { Container, Graphics, GraphicsPath, Matrix, Text } from "pixi.js";
 //#region src/board/render/renderers/shape-card-renderer.ts
 const DEFAULT_ROUNDED_RADIUS = 8;
@@ -86,27 +86,7 @@ function outlinePoints(geometry, width, height, radius) {
 			p(0, height),
 			p(width / 2, 0)
 		];
-		default: {
-			const r = Math.min(radius, width / 2, height / 2);
-			if (r <= 0) return [
-				p(0, 0),
-				p(width, 0),
-				p(width, height),
-				p(0, height),
-				p(0, 0)
-			];
-			const corner = (cx, cy, from) => Array.from({ length: 9 }, (_, index) => {
-				const angle = from + index / 8 * (Math.PI / 2);
-				return p(cx + Math.cos(angle) * r, cy + Math.sin(angle) * r);
-			});
-			return [
-				...corner(width - r, r, -Math.PI / 2),
-				...corner(width - r, height - r, 0),
-				...corner(r, height - r, Math.PI / 2),
-				...corner(r, r, Math.PI),
-				p(width - r, 0)
-			];
-		}
+		default: return roundRectPoints(width, height, radius);
 	}
 }
 function sync(container, item, context) {
@@ -119,7 +99,8 @@ function sync(container, item, context) {
 	const hovered = context.hoveredId === item.id;
 	const stroke = itemColor(context, style.stroke ?? style.fill, "brand");
 	const fill = itemColor(context, style.fill ?? style.stroke, "brand", "fill");
-	const fillOpacity = style.fillOpacity ?? (style.fill ? 1 : 0);
+	const fillOpacity = (style.fillOpacity ?? (style.fill ? 1 : 0)) * itemAlpha(context, style.fill ?? style.stroke);
+	const strokeAlpha = itemAlpha(context, style.stroke ?? style.fill);
 	const strokeWidth = style.strokeWidth ?? 1.75;
 	syncTextResolution(parts.label, parts, context.zoom);
 	const visualSig = [
@@ -132,6 +113,7 @@ function sync(container, item, context) {
 		fill,
 		fillOpacity,
 		stroke,
+		strokeAlpha,
 		strokeWidth,
 		style.dash,
 		style.radius,
@@ -159,12 +141,13 @@ function sync(container, item, context) {
 			parts.shape.stroke({
 				color: hovered && !selected ? context.palette.muted : stroke,
 				width: lineWidth,
-				alpha: selected ? 1 : hovered ? .95 : .85,
+				alpha: (selected ? 1 : hovered ? .95 : .85) * strokeAlpha,
 				cap: partial || pattern ? "round" : "butt",
 				join: "round"
 			});
 		}
 	}
+	parts.label.alpha = itemAlpha(context, style.stroke);
 	const label = itemColor(context, style.stroke, "neutral", "label");
 	const textSig = [
 		props.text,
@@ -226,9 +209,9 @@ const shapeCardRenderer = {
 		if (item.type !== "shape") return;
 		drawFarPlate(graphics, item.frame, {
 			fill: itemColor(context, item.style.fill ?? item.style.stroke, "brand", "fill"),
-			fillAlpha: Math.max(.18, item.style.fillOpacity ?? 0),
+			fillAlpha: Math.max(.18, item.style.fillOpacity ?? 0) * itemAlpha(context, item.style.fill ?? item.style.stroke),
 			accent: itemColor(context, item.style.stroke, "brand"),
-			accentAlpha: .9
+			accentAlpha: .9 * itemAlpha(context, item.style.stroke)
 		});
 	},
 	destroy: (container) => {

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

@@ -1,10 +1,10 @@
 import { layoutBoardText } from "../../../protocol/dist/board-layout.js";
 import { boardFontFamily } from "../../model/text-metrics.js";
+import { itemAlpha, itemColor } from "../palette.js";
+import { BOARD_FONT_STACKS } from "../text-measurement.js";
 import { syncTextResolution, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { itemColor } from "../palette.js";
-import { BOARD_FONT_STACKS } from "../text-measurement.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/text-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -33,6 +33,8 @@ function sync(container, item, context) {
 	parts.body.anchor.set(anchorX, 0);
 	parts.body.position.set(item.frame.width * anchorX, 0);
 	syncTextResolution(parts.body, parts, context.zoom * Math.max(1, previewScale));
+	parts.body.alpha = itemAlpha(context, item.style.fill);
+	parts.caret.alpha = parts.body.alpha;
 	const ink = itemColor(context, item.style.fill, "neutral");
 	const text = revealed(props.text, props.reveal);
 	const contentSig = [
@@ -93,7 +95,7 @@ const textCardRenderer = {
 		if (item.type !== "text") return;
 		drawFarPlate(graphics, item.frame, {
 			fill: itemColor(context, item.style.fill, "neutral"),
-			fillAlpha: .35
+			fillAlpha: .35 * itemAlpha(context, item.style.fill)
 		});
 	},
 	destroy: (container) => {

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

@@ -54,6 +54,7 @@ const unknownCardRenderer = {
 	create: (item, context) => {
 		const root = new Container();
 		const box = new Graphics();
+		box.context.batchMode = "batch";
 		const resolution = textResolutionForZoom(context.zoom);
 		const label = new Text({
 			text: "",

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

@@ -1,4 +1,5 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { getMediaResourceTitle } from "../../model/media.js";
 import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
@@ -23,7 +24,7 @@ function sync(container, item, context) {
 	const selected = context.selectedIds.has(item.id);
 	const hovered = context.hoveredId === item.id;
 	const resizing = context.resizingIds.has(item.id);
-	const title = item.props.snapshot?.title ?? item.props.src.split("/").pop() ?? "Video";
+	const title = item.props.snapshot?.title ?? getMediaResourceTitle(item.props.src);
 	const key = context.assetKey(item);
 	const texture = key ? context.getTexture(key) : null;
 	const failed = Boolean(key && !texture && context.hasError(key));

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

@@ -0,0 +1,22 @@
+import { BoardDocument } from "../../protocol/dist/board-model.js";
+import { BoardFrame } from "../../protocol/dist/board-layout.js";
+import "../../protocol/dist/index.js";
+import { BoardScene } from "../model/scene.js";
+import { BoardEvaluation } from "../model/animation.js";
+import { BoardShapeColors } from "../model/palette.js";
+import { BoardRenderPalette } from "./renderers/board-renderer-registry.js";
+//#region src/board/render/sampling.d.ts
+declare function createBoardRenderSampler(document: BoardDocument, animation: string | null, options?: {
+  colorScheme?: "dark" | "light";
+  colors?: BoardShapeColors;
+  palette?: Partial<BoardRenderPalette>;
+}): {
+  frameAt(id: string, time: number): BoardFrame | undefined;
+  at(time: number): {
+    document: BoardDocument;
+    evaluation: BoardEvaluation;
+    scene: BoardScene;
+  };
+};
+//#endregion
+export { createBoardRenderSampler };

package/dist/board/render/sampling.js

@@ -0,0 +1,21 @@
+import { createBoardAnimationSampler } from "../model/sampling.js";
+import { buildFallbackShapeColors } from "../model/palette.js";
+import { defaultBoardPalette, itemAlpha, itemColor } from "./palette.js";
+//#region src/board/render/sampling.ts
+function createBoardRenderSampler(document, animation, options = {}) {
+	const colorScheme = options.colorScheme ?? "dark";
+	const context = {
+		colorScheme,
+		colors: options.colors ?? buildFallbackShapeColors(colorScheme),
+		palette: {
+			...defaultBoardPalette(colorScheme),
+			...options.palette
+		}
+	};
+	return createBoardAnimationSampler(document, animation, { resolveColor: (color) => ({
+		color: itemColor(context, color, "brand", "fill"),
+		alpha: itemAlpha(context, color)
+	}) });
+}
+//#endregion
+export { createBoardRenderSampler };

package/dist/board/render/script-export.d.ts

@@ -0,0 +1,11 @@
+import { BoardDocument } from "../../protocol/dist/board-model.js";
+import "../../protocol/dist/index.js";
+import { BoardScriptSnapshot } from "../model/script.js";
+import { BoardScriptHost } from "./renderers/board-renderer-registry.js";
+//#region src/board/render/script-export.d.ts
+declare function prepareBrowserBoardScripts(document: BoardDocument, time: number, readModule: (path: string) => Promise<string>, snapshots?: Readonly<Record<string, BoardScriptSnapshot>>): Promise<{
+  host: BoardScriptHost;
+  dispose(): void;
+}>;
+//#endregion
+export { prepareBrowserBoardScripts };

package/dist/board/render/script-export.js

@@ -0,0 +1,86 @@
+import { composeBoardScriptItems } from "../model/script-scene.js";
+import { buildBoardScene } from "../model/scene.js";
+import { createBoardScriptHost } from "./script-host.js";
+//#region src/board/render/script-export.ts
+async function prepareBrowserBoardScripts(document, time, readModule, snapshots) {
+	if (!Number.isFinite(time) || time < 0 || time > 6e5) throw new Error("Script export time must be between 0 and 600000 ms.");
+	const element = globalThis.document.createElement("div");
+	element.style.cssText = "position:fixed;left:-10000px;top:0;width:1px;height:1px;visibility:hidden;pointer-events:none";
+	globalThis.document.body.appendChild(element);
+	const outputs = /* @__PURE__ */ new Map();
+	const scene = buildBoardScene(document);
+	const ids = Object.entries(document.items).filter(([, item]) => item.script?.enabled).map(([id]) => id);
+	let schedule = () => {};
+	const host = createBoardScriptHost({
+		host: element,
+		readModule,
+		export: true,
+		snapshots,
+		timeoutMs: 15e3,
+		onFrame: () => schedule(),
+		onOutput(id, output) {
+			if (output) outputs.set(id, output);
+			else outputs.delete(id);
+		}
+	});
+	const dispose = () => {
+		schedule = () => {};
+		host.destroy();
+		element.remove();
+	};
+	try {
+		await new Promise((resolve, reject) => {
+			const timer = setTimeout(() => reject(/* @__PURE__ */ new Error("Script export preparation timed out.")), 2e4);
+			let queued = false;
+			const sync = () => {
+				queued = false;
+				try {
+					host.sync(document, scene, {
+						x: 0,
+						y: 0,
+						zoom: 1
+					}, time, false);
+					for (const id of ids) {
+						const error = host.error(id);
+						if (error) throw new Error(error);
+					}
+					if (ids.every((id) => host.ready?.(id))) {
+						clearTimeout(timer);
+						schedule = () => {};
+						resolve();
+					}
+				} catch (error) {
+					clearTimeout(timer);
+					schedule = () => {};
+					reject(error);
+				}
+			};
+			schedule = () => {
+				if (!queued) {
+					queued = true;
+					queueMicrotask(sync);
+				}
+			};
+			schedule();
+		});
+		return {
+			host: {
+				...host,
+				document(input) {
+					const items = { ...input.items };
+					for (const [id, item] of composeBoardScriptItems(input, buildBoardScene(input), outputs)) items[id] = item;
+					return {
+						...input,
+						items
+					};
+				}
+			},
+			dispose
+		};
+	} catch (error) {
+		dispose();
+		throw error;
+	}
+}
+//#endregion
+export { prepareBrowserBoardScripts };

package/dist/board/render/script-host.d.ts

@@ -0,0 +1,31 @@
+import { BoardDocument } from "../../protocol/dist/board-model.js";
+import "../../protocol/dist/index.js";
+import { BoardScriptEvent, BoardScriptOutput, BoardScriptSnapshot } from "../model/script.js";
+import { BoardViewport } from "../model/geometry.js";
+import { BoardScene } from "../model/scene.js";
+import { BoardScriptHost } from "./renderers/board-renderer-registry.js";
+//#region src/board/render/script-host.d.ts
+type BoardScriptHostOptions = {
+  readModule(path: string): Promise<string>;
+  host: HTMLElement;
+  onFrame(): void;
+  onOutput(id: string, output: BoardScriptOutput | null): void;
+  capabilities?: Record<string, (id: string, input: unknown) => Promise<unknown>>;
+  timeoutMs?: number;
+  export?: boolean;
+  snapshots?: Readonly<Record<string, BoardScriptSnapshot>>;
+};
+type BrowserBoardScriptHost = BoardScriptHost & {
+  sync(document: BoardDocument, scene: BoardScene, camera: BoardViewport, time: number, interactive: boolean, visibleIds?: ReadonlySet<string> | null): void;
+  event(id: string, event: BoardScriptEvent): void;
+  output(id: string): BoardScriptOutput | null;
+  snapshot(id: string): Promise<BoardScriptSnapshot | null>;
+  restore(id: string, snapshot: BoardScriptSnapshot): void;
+  fault(id: string, message: string): void;
+  readonly animated: boolean;
+  invalidate(src?: string): void;
+  destroy(): void;
+};
+declare function createBoardScriptHost(options: BoardScriptHostOptions): BrowserBoardScriptHost;
+//#endregion
+export { BoardScriptHostOptions, BrowserBoardScriptHost, createBoardScriptHost };