@neta-art/cohub 12.5.0 → 13.0.0

package/dist/board/model/themes.d.ts

@@ -64,6 +64,14 @@ declare const BOARD_THEME_DATA: {
       };
     };
     readonly style: {};
+    readonly backdrop: {
+      readonly pattern: {
+        readonly kind: "dots";
+        readonly pitch: 24;
+        readonly color: 2566444;
+        readonly size: 2;
+      };
+    };
   };
   readonly light: {
     readonly colorScheme: "light";
@@ -127,6 +135,14 @@ declare const BOARD_THEME_DATA: {
       };
     };
     readonly style: {};
+    readonly backdrop: {
+      readonly pattern: {
+        readonly kind: "dots";
+        readonly pitch: 24;
+        readonly color: 15001321;
+        readonly size: 2;
+      };
+    };
   };
   readonly "solarized-dark": {
     readonly colorScheme: "dark";
@@ -190,6 +206,14 @@ declare const BOARD_THEME_DATA: {
       };
     };
     readonly style: {};
+    readonly backdrop: {
+      readonly pattern: {
+        readonly kind: "dots";
+        readonly pitch: 24;
+        readonly color: 1122594;
+        readonly size: 2;
+      };
+    };
   };
   readonly "solarized-light": {
     readonly colorScheme: "light";
@@ -253,6 +277,14 @@ declare const BOARD_THEME_DATA: {
       };
     };
     readonly style: {};
+    readonly backdrop: {
+      readonly pattern: {
+        readonly kind: "dots";
+        readonly pitch: 24;
+        readonly color: 15130570;
+        readonly size: 2;
+      };
+    };
   };
   readonly "neta-studio": {
     readonly colorScheme: "dark";
@@ -405,6 +437,15 @@ declare const BOARD_THEME_DATA: {
       readonly font: "\"Figtree Variable\", \"PingFang SC\", \"Noto Sans CJK SC\", \"Microsoft YaHei\", system-ui, sans-serif";
       readonly frameLabelSize: 16;
     };
+    readonly backdrop: {
+      readonly pattern: {
+        readonly kind: "dots";
+        readonly pitch: 24;
+        readonly color: 14935011;
+        readonly size: 2;
+        readonly shape: "square";
+      };
+    };
   };
   readonly "neta-pixel-dark": {
     readonly colorScheme: "dark";
@@ -489,6 +530,15 @@ declare const BOARD_THEME_DATA: {
       readonly font: "\"Figtree Variable\", \"PingFang SC\", \"Noto Sans CJK SC\", \"Microsoft YaHei\", system-ui, sans-serif";
       readonly frameLabelSize: 16;
     };
+    readonly backdrop: {
+      readonly pattern: {
+        readonly kind: "dots";
+        readonly pitch: 24;
+        readonly color: 3816512;
+        readonly size: 2;
+        readonly shape: "square";
+      };
+    };
   };
 };
 //#endregion

package/dist/board/model/themes.js

@@ -70,7 +70,13 @@ const BOARD_THEME_DATA = {
 				label: 15330286
 			}
 		},
-		style: {}
+		style: {},
+		backdrop: { pattern: {
+			kind: "dots",
+			pitch: 24,
+			color: 2566444,
+			size: 2
+		} }
 	},
 	light: {
 		colorScheme: "light",
@@ -133,7 +139,13 @@ const BOARD_THEME_DATA = {
 				label: 66050
 			}
 		},
-		style: {}
+		style: {},
+		backdrop: { pattern: {
+			kind: "dots",
+			pitch: 24,
+			color: 15001321,
+			size: 2
+		} }
 	},
 	"solarized-dark": {
 		colorScheme: "dark",
@@ -196,7 +208,13 @@ const BOARD_THEME_DATA = {
 				label: 12572374
 			}
 		},
-		style: {}
+		style: {},
+		backdrop: { pattern: {
+			kind: "dots",
+			pitch: 24,
+			color: 1122594,
+			size: 2
+		} }
 	},
 	"solarized-light": {
 		colorScheme: "light",
@@ -259,7 +277,13 @@ const BOARD_THEME_DATA = {
 				label: 2110772
 			}
 		},
-		style: {}
+		style: {},
+		backdrop: { pattern: {
+			kind: "dots",
+			pitch: 24,
+			color: 15130570,
+			size: 2
+		} }
 	},
 	"neta-studio": {
 		colorScheme: "dark",
@@ -409,7 +433,14 @@ const BOARD_THEME_DATA = {
 			motion: "stepped",
 			font: "\"Figtree Variable\", \"PingFang SC\", \"Noto Sans CJK SC\", \"Microsoft YaHei\", system-ui, sans-serif",
 			frameLabelSize: 16
-		}
+		},
+		backdrop: { pattern: {
+			kind: "dots",
+			pitch: 24,
+			color: 14935011,
+			size: 2,
+			shape: "square"
+		} }
 	},
 	"neta-pixel-dark": {
 		colorScheme: "dark",
@@ -493,7 +524,14 @@ const BOARD_THEME_DATA = {
 			motion: "stepped",
 			font: "\"Figtree Variable\", \"PingFang SC\", \"Noto Sans CJK SC\", \"Microsoft YaHei\", system-ui, sans-serif",
 			frameLabelSize: 16
-		}
+		},
+		backdrop: { pattern: {
+			kind: "dots",
+			pitch: 24,
+			color: 3816512,
+			size: 2,
+			shape: "square"
+		} }
 	}
 };
 //#endregion

package/dist/board/render/backdrop-layer.d.ts

@@ -0,0 +1,21 @@
+import { BoardBackdrop } from "./backdrop.js";
+import { Container, Texture } from "pixi.js";
+//#region src/board/render/backdrop-layer.d.ts
+type BoardBackdropView = {
+  x: number;
+  y: number;
+  zoom: number;
+  width: number;
+  height: number;
+  density: number;
+};
+type BoardBackdropLayer = {
+  readonly container: Container;
+  sync(backdrop: BoardBackdrop, view: BoardBackdropView, texture: Texture | null, imageAlpha?: number): void;
+  destroy(): void;
+};
+declare function createBoardBackdropLayer(options: {
+  patterns: boolean;
+}): BoardBackdropLayer;
+//#endregion
+export { BoardBackdropLayer, BoardBackdropView, createBoardBackdropLayer };

package/dist/board/render/backdrop-layer.js

@@ -0,0 +1,227 @@
+import { boardPatternLevel } from "./backdrop.js";
+import { Container, Geometry, Mesh, Shader, Sprite, TilingSprite, UniformGroup } from "pixi.js";
+//#region src/board/render/backdrop-layer.ts
+const VERTEX = `
+in vec2 aPosition;
+out vec2 vPosition;
+
+uniform mat3 uProjectionMatrix;
+uniform mat3 uWorldTransformMatrix;
+uniform mat3 uTransformMatrix;
+
+void main() {
+	mat3 mvp = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;
+	gl_Position = vec4((mvp * vec3(aPosition, 1.0)).xy, 0.0, 1.0);
+	vPosition = aPosition;
+}
+`;
+const FRAGMENT = `
+in vec2 vPosition;
+out vec4 finalColor;
+
+uniform float uDensity;
+uniform vec2 uOrigin;
+uniform float uPitch;
+uniform float uFade;
+uniform float uSize;
+uniform float uSquare;
+uniform float uLines;
+uniform vec4 uInk;
+
+vec2 snap(vec2 center) {
+	return mod(uSize, 2.0) == 1.0 ? floor(center) + 0.5 : floor(center + 0.5);
+}
+
+float coverage(vec2 p, float pitch) {
+	vec2 d = abs(p - snap(uOrigin + floor((p - uOrigin) / pitch + 0.5) * pitch));
+	float radius = uSize * 0.5;
+	if (uLines > 0.5) return min(d.x, d.y) < radius ? 1.0 : 0.0;
+	if (uSquare > 0.5) return max(d.x, d.y) < radius ? 1.0 : 0.0;
+	float edge = 0.5 * uDensity;
+	return clamp((radius + edge - length(d)) / edge, 0.0, 1.0);
+}
+
+void main() {
+	vec2 p = vPosition * uDensity;
+	float alpha = uInk.a * max(coverage(p, uPitch * 2.0), coverage(p, uPitch) * uFade);
+	finalColor = vec4(uInk.rgb * alpha, alpha);
+}
+`;
+function wrap(value, period) {
+	return (value % period + period) % period;
+}
+function createPatternMesh() {
+	const positions = /* @__PURE__ */ new Float32Array(8);
+	const geometry = new Geometry({
+		attributes: { aPosition: {
+			buffer: positions,
+			format: "float32x2"
+		} },
+		indexBuffer: new Uint32Array([
+			0,
+			1,
+			2,
+			0,
+			2,
+			3
+		])
+	});
+	const uniforms = new UniformGroup({
+		uDensity: {
+			value: 1,
+			type: "f32"
+		},
+		uOrigin: {
+			value: /* @__PURE__ */ new Float32Array(2),
+			type: "vec2<f32>"
+		},
+		uPitch: {
+			value: 1,
+			type: "f32"
+		},
+		uFade: {
+			value: 0,
+			type: "f32"
+		},
+		uSize: {
+			value: 1,
+			type: "f32"
+		},
+		uSquare: {
+			value: 0,
+			type: "f32"
+		},
+		uLines: {
+			value: 0,
+			type: "f32"
+		},
+		uInk: {
+			value: /* @__PURE__ */ new Float32Array(4),
+			type: "vec4<f32>"
+		}
+	});
+	const shader = Shader.from({
+		gl: {
+			name: "board-backdrop-pattern",
+			vertex: VERTEX,
+			fragment: FRAGMENT,
+			preferredFragmentPrecision: "highp"
+		},
+		resources: { patternUniforms: uniforms }
+	});
+	const mesh = new Mesh({
+		geometry,
+		shader,
+		label: "board-backdrop-pattern"
+	});
+	let width = 0;
+	let height = 0;
+	return {
+		mesh,
+		sync(pattern, view) {
+			if (view.width !== width || view.height !== height) {
+				width = view.width;
+				height = view.height;
+				positions.set([
+					0,
+					0,
+					width,
+					0,
+					width,
+					height,
+					0,
+					height
+				]);
+				geometry.getBuffer("aPosition").update();
+			}
+			const level = boardPatternLevel(pattern, view.zoom);
+			const pitch = level.pitch * view.density;
+			const values = uniforms.uniforms;
+			values.uDensity = view.density;
+			values.uOrigin[0] = wrap(view.x * view.density, pitch * 2);
+			values.uOrigin[1] = wrap(view.y * view.density, pitch * 2);
+			values.uPitch = pitch;
+			values.uFade = level.fade;
+			values.uSize = Math.max(1, Math.round(pattern.size * view.density));
+			values.uSquare = pattern.shape === "square" ? 1 : 0;
+			values.uLines = pattern.kind === "grid" ? 1 : 0;
+			values.uInk[0] = (pattern.color >> 16 & 255) / 255;
+			values.uInk[1] = (pattern.color >> 8 & 255) / 255;
+			values.uInk[2] = (pattern.color & 255) / 255;
+			values.uInk[3] = pattern.alpha;
+		},
+		destroy() {
+			mesh.destroy();
+			geometry.destroy();
+			shader.destroy();
+		}
+	};
+}
+function placeImage(parts, image, texture, view, alpha) {
+	if (image.fit === "repeat") {
+		if (parts.picture) parts.picture.visible = false;
+		parts.tiles ??= parts.container.addChildAt(new TilingSprite({
+			texture,
+			label: "board-backdrop-tiles"
+		}), 0);
+		const tiles = parts.tiles;
+		const tileWidth = (image.tile?.width ?? texture.width) * view.zoom;
+		const tileHeight = (image.tile?.height ?? texture.height) * view.zoom;
+		tiles.texture = texture;
+		tiles.visible = true;
+		tiles.alpha = alpha;
+		tiles.width = view.width;
+		tiles.height = view.height;
+		tiles.tileScale.set(tileWidth / texture.width, tileHeight / texture.height);
+		tiles.tilePosition.set(wrap(view.x, tileWidth), wrap(view.y, tileHeight));
+		return;
+	}
+	if (parts.tiles) parts.tiles.visible = false;
+	parts.picture ??= parts.container.addChildAt(new Sprite({
+		texture,
+		label: "board-backdrop-picture"
+	}), 0);
+	const picture = parts.picture;
+	const scale = (image.fit === "cover" ? Math.max : Math.min)(view.width / texture.width, view.height / texture.height);
+	picture.texture = texture;
+	picture.visible = true;
+	picture.alpha = alpha;
+	picture.width = texture.width * scale;
+	picture.height = texture.height * scale;
+	picture.position.set((view.width - picture.width) / 2, (view.height - picture.height) / 2);
+}
+function createBoardBackdropLayer(options) {
+	const container = new Container({ label: "board-backdrop" });
+	const parts = {
+		tiles: null,
+		picture: null,
+		container
+	};
+	let pattern = null;
+	return {
+		container,
+		sync(backdrop, view, texture, imageAlpha = 1) {
+			if (backdrop.image && texture) placeImage(parts, backdrop.image, texture, view, backdrop.image.opacity * imageAlpha);
+			else {
+				if (parts.tiles) parts.tiles.visible = false;
+				if (parts.picture) parts.picture.visible = false;
+			}
+			const shown = options.patterns && backdrop.pattern !== null;
+			if (shown && backdrop.pattern) {
+				if (!pattern) {
+					pattern = createPatternMesh();
+					container.addChild(pattern.mesh);
+				}
+				pattern.sync(backdrop.pattern, view);
+			}
+			if (pattern) pattern.mesh.visible = shown;
+		},
+		destroy() {
+			pattern?.destroy();
+			pattern = null;
+			container.destroy({ children: true });
+		}
+	};
+}
+//#endregion
+export { createBoardBackdropLayer };

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

@@ -0,0 +1,45 @@
+import { BoardBackgroundFit, BoardSettings } from "../../protocol/dist/board-model.js";
+import "../../protocol/dist/index.js";
+import { BoardShapeColors } from "../model/palette.js";
+import { BoardRenderPalette } from "./renderers/board-renderer-registry.js";
+//#region src/board/render/backdrop.d.ts
+type BoardBackdropPattern = {
+  kind: "dots" | "grid";
+  pitch: number;
+  color: number;
+  alpha: number;
+  size: number;
+  shape: "round" | "square";
+  subdivide: boolean;
+};
+type BoardBackdropImage = {
+  src: string;
+  fit: BoardBackgroundFit;
+  opacity: number;
+  tile?: {
+    width: number;
+    height: number;
+  };
+};
+type BoardBackdrop = {
+  color: number;
+  image: BoardBackdropImage | null;
+  pattern: BoardBackdropPattern | null;
+};
+type BoardThemeBackdrop = {
+  image?: BoardBackdropImage;
+  pattern?: Pick<BoardBackdropPattern, "kind" | "pitch" | "color"> & Partial<Pick<BoardBackdropPattern, "alpha" | "size" | "shape">>;
+};
+type BoardBackdropTheme = {
+  palette: BoardRenderPalette;
+  colors: BoardShapeColors;
+  colorScheme: "dark" | "light";
+  backdrop?: BoardThemeBackdrop;
+};
+declare function resolveBoardBackdrop(settings: BoardSettings, theme: BoardBackdropTheme, purpose?: "stage" | "export"): BoardBackdrop;
+declare function boardPatternLevel(pattern: Pick<BoardBackdropPattern, "pitch" | "subdivide">, zoom: number): {
+  pitch: number;
+  fade: number;
+};
+//#endregion
+export { BoardBackdrop, BoardBackdropImage, BoardBackdropPattern, BoardBackdropTheme, BoardThemeBackdrop, boardPatternLevel, resolveBoardBackdrop };

package/dist/board/render/backdrop.js

@@ -0,0 +1,62 @@
+import "../../protocol/dist/board-model.js";
+import { isBoardColorId, pickBoardColor } from "../model/palette.js";
+import { parseBoardCssColor } from "./css-color.js";
+//#region src/board/render/backdrop.ts
+const PATTERN_DEFAULTS = {
+	dots: {
+		alpha: .5,
+		size: 2
+	},
+	grid: {
+		alpha: 1,
+		size: 1
+	}
+};
+function resolveBoardBackdrop(settings, theme, purpose = "stage") {
+	const { color, image, pattern } = settings.background;
+	const themed = !(color !== void 0 || image !== void 0) && purpose === "stage" ? theme.backdrop : void 0;
+	return {
+		color: backgroundColor(settings.background.color, theme),
+		image: image ? {
+			src: image.src,
+			fit: image.fit,
+			opacity: image.opacity ?? 1
+		} : themed?.image ?? null,
+		pattern: purpose === "export" || pattern === "none" ? null : pattern ? patternStyle(theme, pattern, settings.grid?.size ?? 24, false) : themed?.pattern ? patternStyle(theme, themed.pattern.kind, themed.pattern.pitch, true) : null
+	};
+}
+function backgroundColor(color, theme) {
+	const value = typeof color === "object" ? color[theme.colorScheme] : color;
+	if (!value) return theme.palette.bg;
+	const token = value.trim().toLowerCase();
+	if (isBoardColorId(token)) return pickBoardColor(theme.colors, token, theme.colorScheme).fill;
+	return parseBoardCssColor(value) ?? theme.palette.bg;
+}
+function patternStyle(theme, kind, pitch, subdivide) {
+	const own = theme.backdrop?.pattern?.kind === kind ? theme.backdrop.pattern : void 0;
+	const defaults = PATTERN_DEFAULTS[kind];
+	return {
+		kind,
+		pitch,
+		color: own?.color ?? (kind === "grid" ? theme.palette.border : theme.palette.muted),
+		alpha: own ? own.alpha ?? 1 : defaults.alpha,
+		size: own?.size ?? defaults.size,
+		shape: own?.shape ?? "round",
+		subdivide
+	};
+}
+const MIN_GAP = 8;
+const FADE = .25;
+function boardPatternLevel(pattern, zoom) {
+	const gap = Math.max(pattern.pitch / 1.25, MIN_GAP);
+	const unit = pattern.pitch * Math.max(zoom, 1e-6);
+	const level = Math.ceil(Math.log2(gap / unit));
+	const pitch = unit * 2 ** (pattern.subdivide ? level : Math.max(0, level));
+	const t = Math.min(1, Math.max(0, (pitch / gap - 1) / FADE));
+	return {
+		pitch,
+		fade: t * t * (3 - 2 * t)
+	};
+}
+//#endregion
+export { boardPatternLevel, resolveBoardBackdrop };

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

@@ -3,7 +3,8 @@ import { BOARD_LOD_HYSTERESIS, BoardLod, BoardLodKind, COMPACT_BOARD_LOD, DEFAUL
 import { BoardCardHit, 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, inspectBoardItems, inspectBoardScene, measureBoardText } from "./diagnostics.js";
-import { BoardBackgroundContext, createBoardBackground, updateBoardBackground } from "./board-background.js";
+import { BoardBackdrop, BoardBackdropImage, BoardBackdropPattern, BoardBackdropTheme, BoardThemeBackdrop, boardPatternLevel, resolveBoardBackdrop } from "./backdrop.js";
+import { BoardBackdropLayer, BoardBackdropView, createBoardBackdropLayer } from "./backdrop-layer.js";
 import { CARD_TAG_SIZE, CardGlyph, CardTag, createCardTag, drawCardGlyph, formatBoardDuration, syncCardTag, traceCube, zoomCardTag } from "./card-tag.js";
 import { ClipGroup, clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline } from "./clip.js";
 import { BoardCssPaint, parseBoardCssColor, parseBoardCssPaint } from "./css-color.js";
@@ -21,4 +22,4 @@ import { BoardTextEditInput, BoardTextEditLayout, boardTextEditLayout } from "./
 import { fitTextToLines, fitTextToWidth } from "./text-fit.js";
 import { boardTextResolution, getBoardResolution, syncTextResolution, 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, BOARD_LOD_HYSTERESIS, BOARD_PLAY_MEDIA, BoardBackgroundContext, BoardCardHit, BoardCardRenderer, BoardCardRendererResolver, BoardCssPaint, BoardLod, BoardLodKind, BoardMediaAction, BoardRenderContext, BoardRenderDiagnostic, BoardRenderLabels, BoardRenderPalette, BoardRenderStyle, BoardRenderStyleInput, BoardRenderTheme, BoardScriptHost, BoardScriptHostOptions, BoardSelectionStyle, BoardShadowStyle, BoardTextEditInput, BoardTextEditLayout, BoardTextLineLayout, BoardTextLineOptions, BoardTextStyle, BoardTextWhiteSpace, BrowserBoardScriptHost, CARD_TAG_SIZE, COMPACT_BOARD_LOD, CardCrop, CardElevation, CardGlyph, CardRect, CardSurface, CardTag, ClipGroup, DEFAULT_BOARD_LOD, DEFAULT_BOARD_RENDER_LABELS, type FarPlateStyle, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardMediaActionAt, boardRenderTheme, boardTextEditLayout, boardTextResolution, boardTextSize, boardTextStyle, canvasFont, canvasFontFamily, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, cssBaselineShift, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, drawFarBars, drawFarPlate, endAngle, ensureBoardTextMeasurement, farPictureTone, fillCardPicture, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardItems, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, layoutTextLines, loadVideoThumbnailTexture, measureBoardText, measureTextWidth, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayHit, mediaPlayKeyCenter, onBoardTextFontsChange, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, textZoomBucket, traceArrowhead, traceCardOutline, traceCube, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BOARD_LOD_HYSTERESIS, BOARD_PLAY_MEDIA, BoardBackdrop, BoardBackdropImage, BoardBackdropLayer, BoardBackdropPattern, BoardBackdropTheme, BoardBackdropView, BoardCardHit, BoardCardRenderer, BoardCardRendererResolver, BoardCssPaint, BoardLod, BoardLodKind, BoardMediaAction, BoardRenderContext, BoardRenderDiagnostic, BoardRenderLabels, BoardRenderPalette, BoardRenderStyle, BoardRenderStyleInput, BoardRenderTheme, BoardScriptHost, BoardScriptHostOptions, BoardSelectionStyle, BoardShadowStyle, BoardTextEditInput, BoardTextEditLayout, BoardTextLineLayout, BoardTextLineOptions, BoardTextStyle, BoardTextWhiteSpace, BoardThemeBackdrop, BrowserBoardScriptHost, CARD_TAG_SIZE, COMPACT_BOARD_LOD, CardCrop, CardElevation, CardGlyph, CardRect, CardSurface, CardTag, ClipGroup, DEFAULT_BOARD_LOD, DEFAULT_BOARD_RENDER_LABELS, type FarPlateStyle, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardMediaActionAt, boardPatternLevel, boardRenderTheme, boardTextEditLayout, boardTextResolution, boardTextSize, boardTextStyle, canvasFont, canvasFontFamily, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackdropLayer, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, cssBaselineShift, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, drawFarBars, drawFarPlate, endAngle, ensureBoardTextMeasurement, farPictureTone, fillCardPicture, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardItems, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, layoutTextLines, loadVideoThumbnailTexture, measureBoardText, measureTextWidth, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayHit, mediaPlayKeyCenter, onBoardTextFontsChange, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardBackdrop, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, textZoomBucket, traceArrowhead, traceCardOutline, traceCube, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };

package/dist/board/render/index.js

@@ -1,14 +1,15 @@
 import { parseBoardCssColor, parseBoardCssPaint } from "./css-color.js";
-import { defaultBoardPalette, itemAlpha, itemColor } from "./palette.js";
-import { createBoardRenderSampler } from "./sampling.js";
+import { boardPatternLevel, resolveBoardBackdrop } from "./backdrop.js";
+import { createBoardBackdropLayer } from "./backdrop-layer.js";
 import { BOARD_FONT_STACKS, boardTextStyle, canvasFont, canvasFontFamily, cssBaselineShift, ensureBoardTextMeasurement, fitLineWithEllipsis, installBoardTextMeasurement, layoutTextLines, measureTextWidth, onBoardTextFontsChange } from "./text-measurement.js";
-import { inspectBoardItems, inspectBoardScene, measureBoardText } from "./diagnostics.js";
-import { BOARD_LOD_HYSTERESIS, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardTextSize } from "./lod.js";
-import { createBoardBackground, updateBoardBackground } from "./board-background.js";
 import { fitTextToLines, fitTextToWidth } from "./text-fit.js";
 import { boardTextResolution, getBoardResolution, syncTextResolution, textZoomBucket } from "./text-resolution.js";
 import { CARD_TAG_SIZE, createCardTag, drawCardGlyph, formatBoardDuration, syncCardTag, traceCube, zoomCardTag } from "./card-tag.js";
 import { clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline } from "./clip.js";
+import { inspectBoardItems, inspectBoardScene, measureBoardText } from "./diagnostics.js";
+import { defaultBoardPalette, itemAlpha, itemColor } from "./palette.js";
+import { createBoardRenderSampler } from "./sampling.js";
+import { BOARD_LOD_HYSTERESIS, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardTextSize } from "./lod.js";
 import { dashPattern, endAngle, roundRectPoints, traceArrowhead, tracePolyline, trimPolyline } from "./stroke.js";
 import { PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, fillCardPicture, isBoardCard, traceCardOutline, tracePixelRect } from "./surface.js";
 import { drawFarBars, drawFarPlate, farPictureTone } from "./renderers/far-plate.js";
@@ -21,4 +22,4 @@ import { defaultBoardRenderStyle, resolveBoardRenderStyle } from "./style.js";
 import { boardRenderTheme } from "./theme.js";
 import { boardTextEditLayout } from "./text-edit.js";
 import { VIDEO_THUMBNAIL_MAX_EDGE, loadVideoThumbnailTexture, videoTextureNaturalSize, videoThumbnailSize } from "./video-thumbnail.js";
-export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BOARD_LOD_HYSTERESIS, BOARD_PLAY_MEDIA, CARD_TAG_SIZE, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, DEFAULT_BOARD_RENDER_LABELS, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardMediaActionAt, boardRenderTheme, boardTextEditLayout, boardTextResolution, boardTextSize, boardTextStyle, canvasFont, canvasFontFamily, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, cssBaselineShift, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, drawFarBars, drawFarPlate, endAngle, ensureBoardTextMeasurement, farPictureTone, fillCardPicture, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardItems, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, layoutTextLines, loadVideoThumbnailTexture, measureBoardText, measureTextWidth, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayHit, mediaPlayKeyCenter, onBoardTextFontsChange, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, textZoomBucket, traceArrowhead, traceCardOutline, traceCube, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BOARD_LOD_HYSTERESIS, BOARD_PLAY_MEDIA, CARD_TAG_SIZE, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, DEFAULT_BOARD_RENDER_LABELS, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardMediaActionAt, boardPatternLevel, boardRenderTheme, boardTextEditLayout, boardTextResolution, boardTextSize, boardTextStyle, canvasFont, canvasFontFamily, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackdropLayer, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, cssBaselineShift, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, drawFarBars, drawFarPlate, endAngle, ensureBoardTextMeasurement, farPictureTone, fillCardPicture, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardItems, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, layoutTextLines, loadVideoThumbnailTexture, measureBoardText, measureTextWidth, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayHit, mediaPlayKeyCenter, onBoardTextFontsChange, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardBackdrop, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, textZoomBucket, traceArrowhead, traceCardOutline, traceCube, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };

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

@@ -1,7 +1,7 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { resolveSceneArrow } from "../../model/arrow-geometry.js";
-import { itemAlpha, itemColor } from "../palette.js";
 import { syncTextResolution } from "../text-resolution.js";
+import { itemAlpha, itemColor } from "../palette.js";
 import { dashPattern, endAngle, traceArrowhead, tracePolyline, trimPolyline } from "../stroke.js";
 import { drawCardSurface } from "../surface.js";
 import { drawFarStroke } from "./far-plate.js";

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

@@ -1,9 +1,9 @@
 import { getMediaResourceTitle } from "../../model/media.js";
-import { boardCardDetailed } from "../lod.js";
+import { drawAudioWaveform } from "../audio-waveform.js";
 import { fitTextToWidth } from "../text-fit.js";
 import { syncTextResolution } from "../text-resolution.js";
 import { formatBoardDuration } from "../card-tag.js";
-import { drawAudioWaveform } from "../audio-waveform.js";
+import { boardCardDetailed } from "../lod.js";
 import { cardElevation, drawCardSurface } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";

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

@@ -2,10 +2,10 @@ import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/
 import { boardItemPreview } from "../../../protocol/dist/board-model.js";
 import { fileCategory, fileStem } from "../../model/file-snapshot.js";
 import { fileCategoryAccent, fileMetaLine, filePreviewKind, fileTypeLabel } from "../../model/file-preview.js";
-import { boardCardDetailed } from "../lod.js";
 import { fitTextToLines } from "../text-fit.js";
 import { syncTextResolution } from "../text-resolution.js";
 import { createCardTag, syncCardTag, zoomCardTag } from "../card-tag.js";
+import { boardCardDetailed } from "../lod.js";
 import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate, farPictureTone } from "./far-plate.js";

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

@@ -1,7 +1,7 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 import { BOARD_FRAME_LABEL_LINE_HEIGHT, frameLabelOffset } from "../../model/text-metrics.js";
-import { itemAlpha, itemColor } from "../palette.js";
 import { syncTextResolution } from "../text-resolution.js";
+import { itemAlpha, itemColor } from "../palette.js";
 import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { createLabel, positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";

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

@@ -1,8 +1,8 @@
 import { isBoardModelItem } from "../../model/media.js";
 import { fileStem } from "../../model/file-snapshot.js";
 import { fileMetaLine } from "../../model/file-preview.js";
-import { boardCardDetailed } from "../lod.js";
 import { createCardTag, syncCardTag, traceCube, zoomCardTag } from "../card-tag.js";
+import { boardCardDetailed } from "../lod.js";
 import { cardElevation, containRect, drawCardSurface } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate, farPictureTone } from "./far-plate.js";

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

@@ -1,8 +1,8 @@
 import { worldPoint } from "../../model/geometry.js";
 import { layoutShapeLabel } from "../../model/text-metrics.js";
-import { itemAlpha, itemColor } from "../palette.js";
 import { boardTextStyle, cssBaselineShift } from "../text-measurement.js";
 import { syncTextResolution } from "../text-resolution.js";
+import { itemAlpha, itemColor } from "../palette.js";
 import { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";