@neta-art/cohub 11.0.0 → 11.2.0

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

@@ -1,91 +1,94 @@
-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 { boardCardDetailed } from "../text-resolution.js";
+import { createCardTag, formatBoardDuration, syncCardTag, zoomCardTag } from "../card-tag.js";
+import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
-import { Container, Graphics, Sprite, Text, Texture } from "pixi.js";
+import { drawMediaPlayKey } from "./media-key.js";
+import { Container, Graphics, Sprite, Texture } from "pixi.js";
 //#region src/board/render/renderers/video-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
-const RADIUS = 4;
-function layoutContain(sprite, width, height) {
-	const texture = sprite.texture;
-	if (!texture.width || !texture.height) return;
-	const scale = Math.min(width / texture.width, height / texture.height);
-	sprite.width = texture.width * scale;
-	sprite.height = texture.height * scale;
-	sprite.x = (width - sprite.width) / 2;
-	sprite.y = (height - sprite.height) / 2;
+const FILM_RAIL = 10;
+const FILM_HOLE = 4;
+function videoTitle(item) {
+	return item.props.snapshot?.title ?? getMediaResourceTitle(item.props.src);
 }
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
 	positionShell(parts.root, item);
 	const { width, height } = item.frame;
-	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 ?? getMediaResourceTitle(item.props.src);
+	const title = videoTitle(item);
+	const durationMs = item.props.snapshot?.durationMs;
+	const duration = durationMs ? formatBoardDuration(durationMs) : "";
+	syncCardTag(parts.tag, {
+		glyph: "video",
+		text: duration ? `${title} · ${duration}` : title,
+		width
+	}, context);
 	const key = context.assetKey(item);
 	const texture = key ? context.getTexture(key) : null;
-	const failed = Boolean(key && !texture && context.hasError(key));
-	syncTextResolution(parts.label, parts, context.zoom);
-	if (parts.label.text !== title) parts.label.text = title;
-	syncTextWrapWidth(parts.label, parts, Math.max(1, width - 16), resizing);
-	parts.label.position.set(8, Math.max(8, height - parts.label.height - 8));
+	const elevation = cardElevation(context, item.id);
 	const sig = [
 		key ?? "",
 		texture ? `${texture.width}x${texture.height}` : "none",
 		width,
 		height,
-		selected,
-		hovered,
-		failed,
-		title,
-		item.props.time ?? 0,
-		parts.label.height,
-		context.palette.surface,
-		context.palette.brand,
-		context.palette.muted,
-		context.palette.border,
-		context.palette.hover,
-		context.palette.text
+		elevation,
+		boardCardDetailed(context.zoom),
+		context.themeKey
 	].join("|");
 	if (sig === parts.sig) return;
 	parts.sig = sig;
+	const framed = context.style.media === "framed";
+	const rect = {
+		x: 0,
+		y: 0,
+		width,
+		height
+	};
+	const rail = framed ? Math.min(FILM_RAIL, height / 6) : 0;
+	const screen = {
+		x: framed ? rail * .6 : 0,
+		y: rail,
+		width: width - (framed ? rail * 1.2 : 0),
+		height: height - rail * 2
+	};
+	drawCardSurface(parts.plate.clear(), rect, context.style, {
+		fill: framed ? context.palette.text : context.palette.surface,
+		border: framed ? null : context.palette.border,
+		borderAlpha: .85,
+		elevation
+	});
+	if (framed) drawFilmRails(parts.plate, width, height, rail, context.palette.bg);
+	traceCardOutline(parts.mask.clear(), framed ? screen : rect, framed ? {
+		corner: "round",
+		radius: 1
+	} : context.style).fill({ color: 16777215 });
 	if (texture && parts.sprite.texture !== texture) parts.sprite.texture = texture;
 	parts.sprite.visible = Boolean(texture);
-	if (texture) layoutContain(parts.sprite, width, height);
-	parts.mask.clear().roundRect(0, 0, width, height, RADIUS).fill({ color: 16777215 });
-	parts.plate.clear().roundRect(0, 0, width, height, RADIUS).fill({
-		color: context.palette.surface,
-		alpha: .96
-	});
-	parts.chrome.clear();
 	if (texture) {
-		const bandHeight = Math.min(height, parts.label.height + 16);
-		parts.chrome.rect(0, height - bandHeight, width, bandHeight).fill({
-			color: context.palette.surface,
-			alpha: .78
-		});
+		const fitted = containRect(screen.width, screen.height, texture.width, texture.height);
+		parts.sprite.position.set(screen.x + fitted.x, screen.y + fitted.y);
+		parts.sprite.width = fitted.width;
+		parts.sprite.height = fitted.height;
 	}
-	const cx = width / 2;
-	const cy = height / 2;
-	const radius = Math.min(22, Math.min(width, height) * .18);
-	parts.chrome.circle(cx, cy, radius).fill({
-		color: selected ? context.palette.brand : context.palette.surface,
-		alpha: texture ? .88 : .96
-	});
-	const triangle = radius * .55;
-	parts.chrome.moveTo(cx - triangle * .35, cy - triangle * .6).lineTo(cx - triangle * .35, cy + triangle * .6).lineTo(cx + triangle * .7, cy).closePath().fill({
-		color: context.palette.text,
-		alpha: .94
-	});
-	parts.chrome.roundRect(0, 0, width, height, RADIUS).stroke({
-		color: selected ? context.palette.brand : hovered ? context.palette.muted : context.palette.border,
-		width: selected ? 2 : 1,
-		alpha: selected ? .95 : .85
+	parts.chrome.clear();
+	if (boardCardDetailed(context.zoom)) drawMediaPlayKey(parts.chrome, screen.x + screen.width / 2, screen.y + screen.height / 2, Math.min(18, Math.min(screen.width, screen.height) * .16), context);
+}
+function drawFilmRails(graphics, width, height, rail, hole) {
+	const size = Math.min(FILM_HOLE, rail * .45);
+	const step = size * 2.5;
+	const count = Math.max(1, Math.floor((width - step) / step));
+	const start = (width - (count - 1) * step - size) / 2;
+	for (let index = 0; index < count; index += 1) {
+		const x = start + index * step;
+		graphics.rect(x, (rail - size) / 2, size, size).rect(x, height - rail + (rail - size) / 2, size, size);
+	}
+	graphics.fill({
+		color: hole,
+		alpha: .9
 	});
-	parts.label.style.fill = texture ? context.palette.text : context.palette.muted;
 }
 const videoCardRenderer = {
 	id: "video-card",
@@ -96,20 +99,8 @@ const videoCardRenderer = {
 		const sprite = new Sprite(Texture.EMPTY);
 		const mask = new Graphics();
 		const chrome = new Graphics();
-		const resolution = textResolutionForZoom(context.zoom);
-		const label = new Text({
-			text: "",
-			style: {
-				fill: context.palette.muted,
-				fontFamily: BOARD_FONT_STACK,
-				fontSize: 12,
-				fontWeight: "500",
-				wordWrap: true
-			},
-			resolution,
-			roundPixels: true
-		});
-		root.addChild(plate, sprite, mask, chrome, label);
+		const tag = createCardTag();
+		root.addChild(plate, sprite, mask, chrome, tag.root);
 		sprite.mask = mask;
 		partsByContainer.set(root, {
 			root,
@@ -117,10 +108,8 @@ const videoCardRenderer = {
 			sprite,
 			mask,
 			chrome,
-			label,
-			sig: "",
-			wrapWidth: 0,
-			resolution
+			tag,
+			sig: ""
 		});
 		if (item.type === "video") sync(root, item, context);
 		return root;
@@ -128,6 +117,10 @@ const videoCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "video") sync(container, item, context);
 	},
+	zoom: (container, zoom) => {
+		const tag = partsByContainer.get(container)?.tag;
+		if (tag) zoomCardTag(tag, zoom);
+	},
 	renderFar: (graphics, item, context) => {
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.surface,

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

@@ -1,7 +1,7 @@
 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 { BoardScriptEvent, BoardScriptOutput, BoardScriptSnapshot } from "../model/script.js";
 import { BoardScene } from "../model/scene.js";
 import { BoardScriptHost } from "./renderers/board-renderer-registry.js";
 //#region src/board/render/script-host.d.ts

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

@@ -1,8 +1,9 @@
 import { boardScriptItems } from "../model/script-index.js";
 import { boardScriptScope } from "../model/script-scene.js";
+import { boardScriptHitVisible, resolveBoardScriptHit } from "../model/script-hit.js";
+import { BoardScriptTexture } from "./script-texture.js";
 import { createBoardScriptModuleReader, loadBoardScriptSources } from "../../protocol/dist/board-script-modules.js";
 import { boardScriptFrameSource } from "./script-sandbox.js";
-import { Texture } from "pixi.js";
 //#region src/board/render/script-host.ts
 function createBoardScriptHost(options) {
 	const revisions = /* @__PURE__ */ new Map();
@@ -25,11 +26,27 @@ function createBoardScriptHost(options) {
 		return value;
 	}
 	const focusTargets = /* @__PURE__ */ new Map();
+	const focusStyles = /* @__PURE__ */ new WeakMap();
 	const layer = document.createElement("div");
+	let interactive = false;
 	layer.style.cssText = "position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2";
 	layer.dataset.boardScripts = "";
 	options.host.appendChild(layer);
 	let disposed = false;
+	const retiredTextures = /* @__PURE__ */ new Set();
+	let retirementFrame = 0;
+	function retireTexture(texture) {
+		if (!texture.current) return;
+		retiredTextures.add(texture);
+		if (retirementFrame) return;
+		retirementFrame = requestAnimationFrame(() => {
+			retirementFrame = requestAnimationFrame(() => {
+				retirementFrame = 0;
+				for (const retired of retiredTextures) retired.destroy();
+				retiredTextures.clear();
+			});
+		});
+	}
 	function ensureBroker() {
 		if (broker) return;
 		broker = document.createElement("iframe");
@@ -58,7 +75,7 @@ function createBoardScriptHost(options) {
 			post(entry, { kind: "dispose" });
 			entry.timer = setTimeout(() => removeFrame(entry), 100);
 		} else removeFrame(entry);
-		entry.texture?.destroy(true);
+		retireTexture(entry.texture);
 		entries.delete(entry.id);
 		revisions.set(entry.id, (revisions.get(entry.id) ?? 0) + 1);
 		options.onOutput(entry.id, null);
@@ -99,7 +116,10 @@ function createBoardScriptHost(options) {
 			removeFrame(entry);
 			return;
 		}
-		if (entries.get(entry.id) !== entry) return;
+		if (entries.get(entry.id) !== entry) {
+			data.bitmap?.close?.();
+			return;
+		}
 		if (data.kind === "ready") {
 			entry.ready = true;
 			options.onFrame();
@@ -149,11 +169,7 @@ function createBoardScriptHost(options) {
 		clearTimeout(entry.timer);
 		entry.pending = false;
 		revisions.set(entry.id, (revisions.get(entry.id) ?? 0) + 1);
-		if (data.bitmap) {
-			const previous = entry.texture;
-			entry.texture = Texture.from(data.bitmap);
-			previous?.destroy(true);
-		}
+		if (data.bitmap) entry.texture.update(data.bitmap);
 		try {
 			const output = data.output;
 			if (output) {
@@ -170,7 +186,7 @@ function createBoardScriptHost(options) {
 	return {
 		revision: (id) => revisions.get(id) ?? 0,
 		ready: (id) => entries.get(id)?.output !== null && entries.get(id)?.output !== void 0,
-		frame: (item) => entries.get(item.id)?.texture ?? null,
+		frame: (item) => entries.get(item.id)?.texture.current ?? null,
 		error: (id) => entries.get(id)?.error ?? null,
 		release: () => {},
 		fault(id, message) {
@@ -215,10 +231,12 @@ function createBoardScriptHost(options) {
 		get animated() {
 			return [...entries.values()].some((entry) => !entry.error && entry.output?.animated && (entry.visible || entry.output.updating) && !entry.pending);
 		},
-		sync(board, scene, camera, time, interactive, visibleIds) {
+		sync(board, scene, camera, time, inputEnabled, visibleIds) {
 			if (disposed) return;
+			interactive = inputEnabled;
 			const alive = /* @__PURE__ */ new Set();
 			const liveFocusTargets = /* @__PURE__ */ new Set();
+			let focusSurface;
 			for (const [id, item] of boardScriptItems(board)) {
 				if (!item.script?.enabled) continue;
 				alive.add(id);
@@ -255,7 +273,7 @@ function createBoardScriptHost(options) {
 						inputKey: "",
 						inputDocument: null,
 						startedAt: (options.export ? 0 : time) - (input.snapshot?.time ?? 0),
-						texture: null,
+						texture: new BoardScriptTexture(),
 						error: null,
 						output: null,
 						events: [],
@@ -306,14 +324,15 @@ function createBoardScriptHost(options) {
 				}
 				if (entry.output && !options.export) {
 					const hits = Object.entries(entry.output.hits).filter(([, hit]) => hit.label);
-					if (!hits.length && entry.output.listens.length) hits.push([id, {
-						x: 0,
-						y: 0,
-						width: box.width,
-						height: box.height,
-						label: "text" in item.props && typeof item.props.text === "string" ? item.props.text : item.script.src
-					}]);
 					for (const [target, hit] of hits) {
+						const resolved = resolveBoardScriptHit(scene, id, hit);
+						if (!resolved) continue;
+						const { rect } = resolved;
+						if (interactive) focusSurface ??= {
+							width: options.host.clientWidth,
+							height: options.host.clientHeight
+						};
+						const focusable = Boolean(focusSurface && interactive && boardScriptHitVisible(scene, resolved, camera, focusSurface));
 						const key = `${id}/${target}`;
 						liveFocusTargets.add(key);
 						let button = focusTargets.get(key);
@@ -322,15 +341,11 @@ function createBoardScriptHost(options) {
 							button.type = "button";
 							const emit = (type, key) => {
 								const current = entries.get(id);
-								if (!current || current.error) return;
+								if (!interactive || !current || current.error || !current.output?.listens.includes(type)) return;
 								current.events.push({
 									type,
 									target,
-									key,
-									point: {
-										x: hit.x + hit.width / 2,
-										y: hit.y + hit.height / 2
-									}
+									key
 								});
 								current.dirty = true;
 								options.onFrame();
@@ -343,10 +358,16 @@ function createBoardScriptHost(options) {
 							focusTargets.set(key, button);
 							layer.appendChild(button);
 						}
-						button.setAttribute("aria-label", hit.label ?? target);
-						button.tabIndex = interactive && visible ? 0 : -1;
-						const [a, b, c, d, x, y] = scene.layout.matrix(id);
-						button.style.cssText = `position:absolute;pointer-events:none;background:transparent;border:0;padding:0;transform-origin:0 0;width:${hit.width}px;height:${hit.height}px;transform:matrix(${a * camera.zoom},${b * camera.zoom},${c * camera.zoom},${d * camera.zoom},${(x + a * hit.x + c * hit.y) * camera.zoom + camera.x},${(y + b * hit.x + d * hit.y) * camera.zoom + camera.y})`;
+						const label = hit.label ?? target;
+						if (button.getAttribute("aria-label") !== label) button.setAttribute("aria-label", label);
+						const tabIndex = focusable ? 0 : -1;
+						if (button.tabIndex !== tabIndex) button.tabIndex = tabIndex;
+						const [a, b, c, d, x, y] = scene.layout.matrix(resolved.id);
+						const style = `position:absolute;pointer-events:none;background:transparent;border:0;padding:0;transform-origin:0 0;width:${rect.width}px;height:${rect.height}px;transform:matrix(${a * camera.zoom},${b * camera.zoom},${c * camera.zoom},${d * camera.zoom},${(x + a * rect.x + c * rect.y) * camera.zoom + camera.x},${(y + b * rect.x + d * rect.y) * camera.zoom + camera.y})`;
+						if (focusStyles.get(button) !== style) {
+							button.style.cssText = style;
+							focusStyles.set(button, style);
+						}
 					}
 				}
 				if (!entry.ready || !entry.sources || entry.pending || !entry.dirty && (!entry.output?.animated || !visible && !entry.output.updating || entry.time === time)) continue;
@@ -378,6 +399,10 @@ function createBoardScriptHost(options) {
 		event(id, event) {
 			const entry = entries.get(id);
 			if (!entry || entry.error || entry.output && !entry.output.listens.includes(event.type)) return;
+			if (event.type === "viewchange" || event.type === "selectionchange") {
+				const queued = entry.events.findIndex((pending) => pending.type === event.type);
+				if (queued >= 0) entry.events.splice(queued, 1);
+			}
 			if (event.type === "pointermove" && entry.events.at(-1)?.type === "pointermove") entry.events.pop();
 			if (entry.events.length >= 128) return;
 			entry.events.push(event);

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

@@ -33,6 +33,8 @@ function createScriptRuntime(module, initial, host) {
 	let patches = effects?.patches ?? {};
 	let items = effects?.items ?? {};
 	let space = effects?.space ?? "world";
+	let anchor = effects?.anchor;
+	let view = null;
 	let hits = effects?.hits ?? {};
 	const invalidate = () => {
 		if (disposed) return;
@@ -69,6 +71,9 @@ function createScriptRuntime(module, initial, host) {
 		get frame() {
 			return frame;
 		},
+		get view() {
+			return view;
+		},
 		random() {
 			randomState = Math.imul(randomState, 1664525) + 1013904223 >>> 0;
 			return randomState / 4294967296;
@@ -79,10 +84,11 @@ function createScriptRuntime(module, initial, host) {
 				listeners = /* @__PURE__ */ new Set();
 				handlers.set(type, listeners);
 			}
-			listeners.add(handler);
+			const listener = (event) => handler(event);
+			listeners.add(listener);
 			invalidate();
 			return () => {
-				listeners.delete(handler);
+				listeners.delete(listener);
 				invalidate();
 			};
 		},
@@ -101,6 +107,7 @@ function createScriptRuntime(module, initial, host) {
 		scene(next, options) {
 			items = structuredClone(next);
 			space = options?.space ?? "world";
+			anchor = options?.anchor ? structuredClone(options.anchor) : void 0;
 			invalidate();
 		},
 		hitRegions(next) {
@@ -162,6 +169,7 @@ function createScriptRuntime(module, initial, host) {
 		},
 		event(event) {
 			if (disposed) return;
+			if (event.type === "viewchange") view = event.data;
 			const listeners = handlers.get(event.type);
 			if (!listeners?.size) return;
 			for (const handler of listeners) handler(event);
@@ -175,6 +183,7 @@ function createScriptRuntime(module, initial, host) {
 			return {
 				parameters: module.parameters,
 				space,
+				anchor,
 				patches,
 				items,
 				hits,
@@ -193,7 +202,8 @@ function createScriptRuntime(module, initial, host) {
 					patches,
 					items,
 					hits,
-					space
+					space,
+					anchor
 				} : void 0
 			};
 			return clone ? structuredClone(snapshot) : snapshot;

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

@@ -0,0 +1,11 @@
+import { Texture } from "pixi.js";
+//#region src/board/render/script-texture.d.ts
+declare class BoardScriptTexture {
+  private texture;
+  private bitmap;
+  get current(): Texture | null;
+  update(bitmap: ImageBitmap): void;
+  destroy(): void;
+}
+//#endregion
+export { BoardScriptTexture };

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

@@ -0,0 +1,33 @@
+import { ImageSource, Texture } from "pixi.js";
+//#region src/board/render/script-texture.ts
+var BoardScriptTexture = class {
+	texture = null;
+	bitmap = null;
+	get current() {
+		return this.texture;
+	}
+	update(bitmap) {
+		const previous = this.bitmap;
+		this.bitmap = bitmap;
+		if (!this.texture) {
+			this.texture = new Texture({
+				source: new ImageSource({ resource: bitmap }),
+				dynamic: true
+			});
+			return;
+		}
+		const source = this.texture.source;
+		source.resource = bitmap;
+		source.update();
+		if (previous !== bitmap) previous?.close();
+	}
+	destroy() {
+		if (!this.texture) return;
+		this.texture.destroy(true);
+		this.bitmap?.close();
+		this.bitmap = null;
+		this.texture = null;
+	}
+};
+//#endregion
+export { BoardScriptTexture };

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

@@ -5,7 +5,7 @@ import { Graphics } from "pixi.js";
 //#region src/board/render/stroke.d.ts
 declare function dashPattern(dash: BoardDash | undefined, width: number): [number, number] | null;
 declare function trimPolyline(path: readonly WorldPoint[], trim: number | undefined): readonly WorldPoint[];
-declare function tracePolyline(graphics: Graphics, path: readonly WorldPoint[], pattern: [number, number] | null, closed?: boolean): void;
+declare function tracePolyline(graphics: Graphics, path: readonly WorldPoint[], pattern: [number, number] | null, closed?: boolean, offset?: number): void;
 declare function traceArrowhead(graphics: Graphics, tip: WorldPoint, angle: number, size: number): void;
 declare function endAngle(path: readonly WorldPoint[], atStart: boolean): number | null;
 declare function roundRectPoints(width: number, height: number, radius: number): WorldPoint[];

package/dist/board/render/stroke.js

@@ -31,7 +31,7 @@ function trimPolyline(path, trim) {
 	}
 	return out;
 }
-function tracePolyline(graphics, path, pattern, closed = false) {
+function tracePolyline(graphics, path, pattern, closed = false, offset = 0) {
 	const points = closed && path.length > 2 ? [...path, path[0]] : path;
 	if (points.length < 2) return;
 	if (!pattern) {
@@ -45,9 +45,10 @@ function tracePolyline(graphics, path, pattern, closed = false) {
 		return;
 	}
 	const [dash, gap] = pattern;
-	let penDown = true;
-	let fresh = true;
-	let remaining = dash;
+	const phase = Math.max(0, offset) % (dash + gap);
+	let penDown = phase < dash;
+	let fresh = penDown;
+	let remaining = penDown ? dash - phase : dash + gap - phase;
 	for (let index = 1; index < points.length; index += 1) {
 		const a = points[index - 1];
 		const b = points[index];

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

@@ -0,0 +1,29 @@
+//#region src/board/render/style.d.ts
+type BoardRenderStyle = {
+  corner: "round" | "pixel";
+  radius: number;
+  shadow: BoardShadowStyle | null;
+  selection: BoardSelectionStyle;
+  media: "plain" | "framed";
+  progress: "shimmer" | "mosaic";
+  icons: "line" | "pixel";
+  motion: "smooth" | "stepped";
+  font: string;
+};
+type BoardShadowStyle = {
+  color: number;
+  alpha: number;
+  blur: number;
+  y: number;
+};
+type BoardSelectionStyle = {
+  width: number;
+  outset: number;
+  dash: number;
+  handle: "circle" | "square";
+  handleSize: number;
+};
+declare function defaultBoardRenderStyle(mode: "dark" | "light"): BoardRenderStyle;
+declare function resolveBoardRenderStyle(mode: "dark" | "light", style?: Partial<BoardRenderStyle>): BoardRenderStyle;
+//#endregion
+export { BoardRenderStyle, BoardSelectionStyle, BoardShadowStyle, defaultBoardRenderStyle, resolveBoardRenderStyle };

package/dist/board/render/style.js

@@ -0,0 +1,54 @@
+import { BOARD_FONT_STACK } from "../../protocol/dist/board-constants.js";
+//#region src/board/render/style.ts
+const BASE = {
+	corner: "round",
+	radius: 6,
+	selection: {
+		width: 1.5,
+		outset: 3,
+		dash: 0,
+		handle: "square",
+		handleSize: 8
+	},
+	media: "plain",
+	progress: "shimmer",
+	icons: "line",
+	motion: "smooth",
+	font: BOARD_FONT_STACK
+};
+const SHADOW = {
+	light: {
+		color: 1447704,
+		alpha: .06,
+		blur: 12,
+		y: 2
+	},
+	dark: {
+		color: 0,
+		alpha: .24,
+		blur: 12,
+		y: 2
+	}
+};
+function defaultBoardRenderStyle(mode) {
+	return {
+		...BASE,
+		selection: { ...BASE.selection },
+		shadow: { ...SHADOW[mode] }
+	};
+}
+function resolveBoardRenderStyle(mode, style) {
+	const base = defaultBoardRenderStyle(mode);
+	if (!style) return base;
+	return {
+		...base,
+		...style,
+		selection: {
+			...base.selection,
+			...style.selection
+		},
+		shadow: style.shadow === void 0 ? base.shadow : style.shadow
+	};
+}
+//#endregion
+export { defaultBoardRenderStyle, resolveBoardRenderStyle };

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

@@ -0,0 +1,34 @@
+import { WorldPoint } from "../model/geometry.js";
+import { BoardRenderStyle, BoardShadowStyle } from "./style.js";
+import { Graphics } from "pixi.js";
+//#region src/board/render/surface.d.ts
+declare const PIXEL_STEP = 2;
+type CardRect = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+declare function traceCardOutline(graphics: Graphics, rect: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, grow?: number): Graphics;
+declare function tracePixelRect(graphics: Graphics, x: number, y: number, width: number, height: number, step: number): Graphics;
+declare function cardOutlinePoints(rect: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, grow?: number): WorldPoint[];
+declare function drawCardShadow(graphics: Graphics, rect: CardRect, style: Pick<BoardRenderStyle, "corner" | "radius">, shadow: BoardShadowStyle | null): void;
+type CardSurface = {
+  fill: number;
+  fillAlpha?: number;
+  border?: number | null;
+  borderAlpha?: number;
+  elevation?: CardElevation;
+};
+type CardElevation = 0 | 1 | 2;
+declare function cardShadow(style: BoardRenderStyle, elevation: CardElevation): BoardShadowStyle | null;
+declare function drawCardSurface(graphics: Graphics, rect: CardRect, style: BoardRenderStyle, surface: CardSurface): Graphics;
+declare function containRect(width: number, height: number, imageWidth: number, imageHeight: number): CardRect;
+declare function cardElevation(context: {
+  liftedIds: ReadonlySet<string>;
+}, id: string): CardElevation;
+declare function isBoardCard(item: {
+  type: string;
+}): boolean;
+//#endregion
+export { CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect };