@neta-art/cohub 8.23.0 → 9.0.0

package/dist/board/render/board-background.d.ts

@@ -1,13 +1,15 @@
-import { BoardDocument, BoardViewport } from "../../protocol/dist/board-document.js";
+import { BoardSettings } from "../../protocol/dist/board-model.js";
+import "../../protocol/dist/index.js";
+import { BoardViewport } from "../geometry.js";
 import { BoardRenderPalette } from "./renderers/board-renderer-registry.js";
 import { Application, Container } from "pixi.js";
 //#region src/board/render/board-background.d.ts
 type BoardBackgroundContext = {
   app: Application;
-  document: BoardDocument;
+  settings: BoardSettings;
   viewport: BoardViewport;
+  colorScheme: "dark" | "light";
   palette: BoardRenderPalette;
-  /** The host renders an image backdrop below the transparent Pixi canvas. */
   hasImageBackground?: boolean;
 };
 declare function createBoardBackground(context: BoardBackgroundContext): Container;

package/dist/board/render/board-background.js

@@ -28,11 +28,12 @@ function buildGridTexture(context, size, color, opacity, kind) {
 	return target;
 }
 function sync(parts, context) {
-	const { app, document, viewport, palette } = context;
+	const { app, settings, viewport, palette } = context;
 	const width = app.screen.width;
 	const height = app.screen.height;
-	const declaredBackground = document.appearance.background;
-	const bgColor = declaredBackground.color ? parseBoardCssColor(declaredBackground.color) ?? palette.bg : palette.bg;
+	const declared = settings.background.color;
+	const cssColor = typeof declared === "object" ? declared[context.colorScheme] : declared;
+	const bgColor = cssColor ? parseBoardCssColor(cssColor) ?? palette.bg : palette.bg;
 	const bgAlpha = context.hasImageBackground ? 0 : 1;
 	if (parts.lastWidth !== width || parts.lastHeight !== height || parts.lastBg !== bgColor || parts.lastBgAlpha !== bgAlpha) {
 		parts.fill.clear();
@@ -45,10 +46,10 @@ function sync(parts, context) {
 		parts.lastBg = bgColor;
 		parts.lastBgAlpha = bgAlpha;
 	}
-	const visible = document.appearance.grid?.visible === true;
-	const size = Math.max(4, document.appearance.grid?.size ?? 24);
-	const opacity = document.appearance.grid?.opacity ?? .12;
-	const kind = document.appearance.background?.kind === "grid" ? "grid" : "dots";
+	const kind = settings.background.kind === "grid" ? "grid" : "dots";
+	const visible = settings.grid?.visible === true;
+	const size = Math.max(4, settings.grid?.size ?? 24);
+	const opacity = .12;
 	const key = `${kind}|${size}|${palette.border}|${opacity}`;
 	if (!visible) {
 		if (parts.sprite) parts.sprite.visible = false;

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

@@ -0,0 +1,14 @@
+import { BoardScene, BoardSceneItem } from "../core/scene.js";
+import { Container, Graphics } from "pixi.js";
+//#region src/board/render/clip.d.ts
+declare function isClippingFrame(item: BoardSceneItem): boolean;
+declare function clippingAncestor(scene: BoardScene, item: BoardSceneItem): string | undefined;
+declare function traceFrameOutline(graphics: Graphics, item: BoardSceneItem): void;
+type ClipGroup = {
+  group: Container;
+  mask: Graphics;
+  sig: string;
+};
+declare function syncClipGroup(entry: ClipGroup | undefined, item: BoardSceneItem): ClipGroup;
+//#endregion
+export { ClipGroup, clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline };

package/dist/board/render/clip.js

@@ -0,0 +1,47 @@
+import { framePoint } from "../../protocol/dist/board-layout.js";
+import { Container, Graphics } from "pixi.js";
+//#region src/board/render/clip.ts
+function isClippingFrame(item) {
+	return item.type === "frame" && item.props.clip !== false;
+}
+function clippingAncestor(scene, item) {
+	let cursor = item.parent;
+	for (let depth = 0; cursor && depth < 64; depth += 1) {
+		const parent = scene.get(cursor);
+		if (!parent) return void 0;
+		if (isClippingFrame(parent)) return cursor;
+		cursor = parent.parent;
+	}
+}
+function traceFrameOutline(graphics, item) {
+	const corners = [
+		framePoint(item.frame, 0, 0),
+		framePoint(item.frame, 1, 0),
+		framePoint(item.frame, 1, 1),
+		framePoint(item.frame, 0, 1)
+	];
+	graphics.poly(corners.flatMap((point) => [point.x, point.y])).fill(16777215);
+}
+function syncClipGroup(entry, item) {
+	const next = entry ?? (() => {
+		const group = new Container({ label: `board-clip-${item.id}` });
+		const mask = new Graphics();
+		group.addChild(mask);
+		group.mask = mask;
+		return {
+			group,
+			mask,
+			sig: ""
+		};
+	})();
+	const { x, y, width, height, rotation } = item.frame;
+	const sig = `${x},${y},${width},${height},${rotation}`;
+	if (sig !== next.sig) {
+		next.sig = sig;
+		next.mask.clear();
+		traceFrameOutline(next.mask, item);
+	}
+	return next;
+}
+//#endregion
+export { clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline };

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

@@ -1,11 +1,14 @@
-import { BoardCardRenderer, BoardRenderContext, BoardRenderPalette, boardCardRenderersForTest, getBoardCardRenderer, registerBoardCardRenderer } from "./renderers/board-renderer-registry.js";
+import { BoardCardRenderer, BoardRenderContext, BoardRenderPalette, BoardSketchHost, boardCardRenderersForTest, getBoardCardRenderer, registerBoardCardRenderer } from "./renderers/board-renderer-registry.js";
 import { BoardBackgroundContext, createBoardBackground, updateBoardBackground } from "./board-background.js";
-import { ConnectionLayer, ConnectionRenderInput, createConnectionLayer, framesFromItems } from "./connection-layer.js";
+import { ClipGroup, clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline } from "./clip.js";
 import { parseBoardCssColor } from "./css-color.js";
 import { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible } from "./media-interaction.js";
-import { defaultBoardPalette } from "./palette.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 { BOARD_EFFECT_MAX_PARTICLES } from "./renderers/effect-card-renderer.js";
 import { TASK_CARD_FULL_DETAIL_ZOOM } from "./renderers/task-card-renderer.js";
-import { ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.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 { BoardBackgroundContext, BoardCardRenderer, BoardMediaAction, BoardRenderContext, BoardRenderPalette, ConnectionLayer, ConnectionRenderInput, TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardCardRenderersForTest, boardMediaActionAt, createBoardBackground, createConnectionLayer, defaultBoardPalette, ensureBoardTextMeasurement, framesFromItems, getBoardCardRenderer, getBoardResolution, installBoardTextMeasurement, loadVideoThumbnailTexture, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, registerBoardCardRenderer, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BoardBackgroundContext, BoardCardRenderer, BoardMediaAction, BoardRenderContext, BoardRenderPalette, BoardSketchHost, BoardSketchHostOptions, BrowserBoardSketchHost, ClipGroup, TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardCardRenderersForTest, boardMediaActionAt, clippingAncestor, createBoardBackground, createBoardSketchHost, dashPattern, defaultBoardPalette, endAngle, ensureBoardTextMeasurement, getBoardCardRenderer, getBoardResolution, installBoardTextMeasurement, isClippingFrame, itemColor, loadVideoThumbnailTexture, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, registerBoardCardRenderer, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceFrameOutline, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };

package/dist/board/render/index.js

@@ -1,11 +1,14 @@
 import { parseBoardCssColor } from "./css-color.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 { createConnectionLayer, framesFromItems } from "./connection-layer.js";
 import { TASK_CARD_FULL_DETAIL_ZOOM } from "./renderers/task-card-renderer.js";
 import { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible } from "./media-interaction.js";
-import { defaultBoardPalette } from "./palette.js";
-import { ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.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 { BOARD_EFFECT_MAX_PARTICLES } from "./renderers/effect-card-renderer.js";
 import { boardCardRenderersForTest, getBoardCardRenderer, registerBoardCardRenderer } from "./renderers/board-renderer-registry.js";
+import { createBoardSketchHost } from "./sketch-host.js";
 import { VIDEO_THUMBNAIL_MAX_EDGE, loadVideoThumbnailTexture, videoTextureNaturalSize, videoThumbnailSize } from "./video-thumbnail.js";
-export { TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, boardCardRenderersForTest, boardMediaActionAt, createBoardBackground, createConnectionLayer, defaultBoardPalette, ensureBoardTextMeasurement, framesFromItems, getBoardCardRenderer, getBoardResolution, installBoardTextMeasurement, loadVideoThumbnailTexture, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, registerBoardCardRenderer, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, boardCardRenderersForTest, boardMediaActionAt, clippingAncestor, createBoardBackground, createBoardSketchHost, dashPattern, defaultBoardPalette, endAngle, ensureBoardTextMeasurement, getBoardCardRenderer, getBoardResolution, installBoardTextMeasurement, isClippingFrame, itemColor, loadVideoThumbnailTexture, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, registerBoardCardRenderer, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceFrameOutline, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };

package/dist/board/render/media-interaction.d.ts

@@ -1,17 +1,16 @@
-import { BoardItem } from "../../protocol/dist/board-document.js";
 import { WorldPoint } from "../geometry.js";
+import { BoardSceneItem } from "../core/scene.js";
 //#region src/board/render/media-interaction.d.ts
 type BoardMediaAction = {
   action: "play-media";
   itemId: string;
 };
-declare function mediaPlayBadgeVisible(item: BoardItem, zoom: number, options: {
+declare function mediaPlayBadgeVisible(item: BoardSceneItem, zoom: number, options: {
   materialized: boolean;
   hasVideoPreview: boolean;
 }): boolean;
-/** The central badge is a fixed screen-space target, independent of Board zoom. */
-declare function mediaPlayBadgeHit(item: BoardItem, point: WorldPoint, zoom: number): boolean;
-declare function boardMediaActionAt(item: BoardItem, point: WorldPoint, zoom: number, options: {
+declare function mediaPlayBadgeHit(item: BoardSceneItem, point: WorldPoint, zoom: number): boolean;
+declare function boardMediaActionAt(item: BoardSceneItem, point: WorldPoint, zoom: number, options: {
   materialized: boolean;
   hasVideoPreview: boolean;
 }): BoardMediaAction | null;

package/dist/board/render/media-interaction.js

@@ -5,11 +5,10 @@ function mediaPlayBadgeVisible(item, zoom, options) {
 	if (!options.materialized) return false;
 	if (item.type === "video" || item.type === "audio") return true;
 	if (item.type !== "task" || zoom < .55) return false;
-	const artifact = featuredTaskArtifact(item.snapshot.artifacts);
+	const artifact = featuredTaskArtifact(item.props.snapshot.artifacts);
 	if (artifact?.type === "audio") return true;
 	return artifact?.type === "video" && (Boolean(artifact.previewUrl) || options.hasVideoPreview);
 }
-/** The central badge is a fixed screen-space target, independent of Board zoom. */
 function mediaPlayBadgeHit(item, point, zoom) {
 	const radius = 28 / Math.max(zoom, .05);
 	const centerX = item.frame.x + item.frame.width / 2;

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

@@ -1,5 +1,9 @@
-import { BoardRenderPalette } from "./renderers/board-renderer-registry.js";
+import { BoardColor } from "../../protocol/dist/board-model.js";
+import "../../protocol/dist/index.js";
+import { BoardColorId } from "../core/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 itemColor(context: Pick<BoardRenderContext, "colors" | "colorScheme" | "palette">, color: BoardColor | undefined, fallback: BoardColorId, part?: "stroke" | "fill" | "label"): number;
 //#endregion
-export { defaultBoardPalette };
+export { defaultBoardPalette, itemColor };

package/dist/board/render/palette.js

@@ -1,3 +1,5 @@
+import { resolveItemColor } from "../core/palette.js";
+import { parseBoardCssColor } from "./css-color.js";
 //#region src/board/render/palette.ts
 const DARK = {
 	bg: 1315860,
@@ -26,5 +28,9 @@ const LIGHT = {
 function defaultBoardPalette(mode) {
 	return { ...mode === "light" ? LIGHT : DARK };
 }
+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 };
+export { defaultBoardPalette, itemColor };

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

@@ -1,95 +1,91 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { resolveArrow, sampleArrow } from "../../core/arrow-geometry.js";
-import { pickBoardColor } from "../../core/palette.js";
+import { pathPointAt, resolveSceneArrow } from "../../core/arrow-geometry.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
 const partsByContainer = /* @__PURE__ */ new WeakMap();
-/** Open chevron arrowhead — clearly directional, not a tiny filled nub. */
-function drawArrowhead(graphics, tip, angle, size, color, strokeWidth) {
-	const spread = Math.PI / 6;
-	const left = {
-		x: tip.x - size * Math.cos(angle - spread),
-		y: tip.y - size * Math.sin(angle - spread)
-	};
-	const right = {
-		x: tip.x - size * Math.cos(angle + spread),
-		y: tip.y - size * Math.sin(angle + spread)
-	};
-	graphics.moveTo(left.x, left.y).lineTo(tip.x, tip.y).lineTo(right.x, right.y).stroke({
-		color,
-		width: Math.max(1.5, strokeWidth),
-		alpha: 1,
-		cap: "round",
-		join: "round"
-	});
-}
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
 	parts.root.position.set(0, 0);
 	parts.root.rotation = 0;
+	parts.root.scale.set(1);
+	const { props, style } = item;
 	const selected = context.selectedIds.has(item.id);
 	const hovered = context.hoveredId === item.id;
-	const color = pickBoardColor(context.colors, item.color, context.colorScheme);
+	const color = itemColor(context, style.stroke, "brand");
+	const size = style.strokeWidth ?? 2.5;
 	syncTextResolution(parts.label, parts, context.zoom);
-	const resolved = resolveArrow(item);
+	const resolved = resolveSceneArrow(item, context.scene);
+	const path = trimPolyline(resolved.path, style.trim);
 	const lineSig = [
-		resolved.start.x,
-		resolved.start.y,
-		resolved.end.x,
-		resolved.end.y,
-		resolved.control.x,
-		resolved.control.y,
+		path.map((point) => `${point.x},${point.y}`).join(";"),
 		selected,
 		hovered,
-		color.stroke,
-		item.size,
-		item.arrowStart,
-		item.arrowEnd
+		color,
+		size,
+		style.dash,
+		props.arrowStart,
+		props.arrowEnd
 	].join("|");
 	if (lineSig !== parts.lineSig) {
 		parts.lineSig = lineSig;
 		parts.line.clear();
-		const strokeColor = color.stroke;
-		const width = selected ? item.size + 1 : item.size;
-		const samples = sampleArrow(resolved, 24);
-		const head = samples[0];
-		const tail = samples[samples.length - 1];
-		if (head && tail) {
-			parts.line.moveTo(head.x, head.y);
-			for (let i = 1; i < samples.length; i += 1) {
-				const point = samples[i];
-				if (point) parts.line.lineTo(point.x, point.y);
-			}
+		const width = selected ? size + 1 : size;
+		const stroke = {
+			color,
+			width,
+			alpha: selected || hovered ? 1 : .92,
+			cap: "round",
+			join: "round"
+		};
+		tracePolyline(parts.line, path, dashPattern(style.dash, width));
+		parts.line.stroke(stroke);
+		const first = path[0];
+		const last = path[path.length - 1];
+		if (first && last) {
+			const span = Math.hypot(last.x - first.x, last.y - first.y);
+			const headSize = Math.min(Math.max(14, size * 5.5), Math.max(10, span * .28));
+			const complete = style.trim === void 0 || style.trim >= 1;
+			const endDirection = endAngle(path, false);
+			const startDirection = endAngle(path, true);
+			if (props.arrowEnd && endDirection !== null && path.length > 1) traceArrowhead(parts.line, last, endDirection, headSize);
+			if (props.arrowStart && startDirection !== null && complete) traceArrowhead(parts.line, first, startDirection, headSize);
 			parts.line.stroke({
-				color: strokeColor,
-				width,
-				alpha: selected || hovered ? 1 : .92,
-				cap: "round",
-				join: "round"
+				...stroke,
+				width: Math.max(1.5, width)
 			});
-			const span = Math.hypot(tail.x - head.x, tail.y - head.y);
-			const headSize = Math.min(Math.max(14, item.size * 5.5), Math.max(10, span * .28));
-			if (item.arrowEnd) {
-				const prev = samples[samples.length - 2];
-				if (prev) drawArrowhead(parts.line, tail, Math.atan2(tail.y - prev.y, tail.x - prev.x), headSize, strokeColor, width);
-			}
-			if (item.arrowStart) {
-				const next = samples[1];
-				if (next) drawArrowhead(parts.line, head, Math.atan2(head.y - next.y, head.x - next.x), headSize, strokeColor, width);
-			}
 		}
 	}
-	const labelSig = [item.label, color.label].join("|");
+	const labelSig = [
+		props.label,
+		context.palette.text,
+		context.palette.bg,
+		props.fontSize
+	].join("|");
 	if (labelSig !== parts.labelSig) {
 		parts.labelSig = labelSig;
-		parts.label.text = item.label;
-		parts.label.style.fill = color.label;
+		parts.label.text = props.label;
+		parts.label.style.fill = context.palette.text;
+		parts.label.style.fontSize = props.fontSize;
+		const padX = props.fontSize * .4;
+		const padY = props.fontSize * .15;
+		const { width, height } = parts.label;
+		parts.backdrop.clear();
+		parts.backdrop.roundRect(-width / 2 - padX, -height / 2 - padY, width + padX * 2, height + padY * 2, props.fontSize * .3).fill({
+			color: context.palette.bg,
+			alpha: .92
+		});
 	}
-	parts.label.visible = item.label.length > 0;
-	parts.label.position.copyFrom(resolved.control);
+	const visible = props.label.length > 0 && (style.trim === void 0 || style.trim >= .5);
+	parts.label.visible = visible;
+	parts.backdrop.visible = visible;
+	const mid = style.trim === void 0 ? resolved.mid : pathPointAt(resolved.path, .5);
+	parts.label.position.set(mid.x, mid.y);
+	parts.backdrop.position.set(mid.x, mid.y);
 }
 const arrowCardRenderer = {
 	id: "arrow-card",
@@ -103,17 +99,19 @@ const arrowCardRenderer = {
 			style: {
 				fill: 16777215,
 				fontFamily: BOARD_FONT_STACK,
-				fontSize: 12,
+				fontSize: 14,
 				fontWeight: "500"
 			},
 			resolution,
 			roundPixels: true
 		});
 		label.anchor.set(.5);
-		root.addChild(line, label);
+		const backdrop = new Graphics();
+		root.addChild(line, backdrop, label);
 		partsByContainer.set(root, {
 			root,
 			line,
+			backdrop,
 			label,
 			lineSig: "",
 			labelSig: "",
@@ -127,11 +125,11 @@ const arrowCardRenderer = {
 	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "arrow") return;
-		const resolved = resolveArrow(item);
-		const color = pickBoardColor(context.colors, item.color, context.colorScheme);
-		drawFarStroke(graphics, sampleArrow(resolved, 12), {
-			color: color.stroke,
-			width: item.size,
+		const arrow = item;
+		const resolved = resolveSceneArrow(arrow, context.scene);
+		drawFarStroke(graphics, trimPolyline(resolved.path, arrow.style.trim), {
+			color: itemColor(context, arrow.style.stroke, "brand"),
+			width: arrow.style.strokeWidth ?? 2.5,
 			alpha: .85
 		});
 	},

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

@@ -1,6 +1,6 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
 import { drawAudioWaveform } from "../audio-waveform.js";
+import { syncTextResolution, syncTextWrapWidth, textResolutionForZoom } from "../text-resolution.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { Container, Graphics, Text } from "pixi.js";
@@ -15,7 +15,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.snapshot?.title ?? item.ref.path.split("/").pop() ?? "Audio";
+	const title = item.props.snapshot?.title ?? item.props.src.split("/").pop() ?? "Audio";
 	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);
@@ -46,7 +46,7 @@ function sync(container, item, context) {
 	const labelBand = Math.min(height * .38, parts.label.height + 16);
 	const waveformInset = Math.min(24, width * .08);
 	parts.waveform.clear();
-	drawAudioWaveform(parts.waveform, `${item.ref.path}:${item.snapshot?.mtimeMs ?? "unknown"}`, {
+	drawAudioWaveform(parts.waveform, `${item.props.src}:${item.props.snapshot?.mtimeMs ?? "unknown"}`, {
 		x: waveformInset,
 		y: 10,
 		width: Math.max(1, width - waveformInset * 2),

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

@@ -1,11 +1,11 @@
-import { BoardItem } from "../../../protocol/dist/board-document.js";
+import { BoardFrame } from "../../../protocol/dist/board-layout.js";
+import "../../../protocol/dist/index.js";
 import { BoardRenderPalette } from "./board-renderer-registry.js";
 import { Container, Text } from "pixi.js";
 //#region src/board/render/renderers/base-card-renderer.d.ts
 declare const CARD_RADIUS = 10;
 declare const CARD_PADDING = 12;
 declare const FOOTER_HEIGHT = 34;
-declare function emphasisColor(item: BoardItem, palette: BoardRenderPalette): number;
 declare function createLabel(text: string, style: Record<string, unknown>): Text;
 type CardShellState = {
   width: number;
@@ -16,11 +16,8 @@ type CardShellState = {
   title: string;
 };
 type CardShell = {
-  /** Root container positioned by the item frame. */
   root: Container;
-  /** Masked container for renderer-specific content. */
   content: Container;
-  /** Rectangle (local coords) available for content. */
   contentRect: () => {
     x: number;
     y: number;
@@ -30,17 +27,9 @@ type CardShell = {
   update: (state: CardShellState, palette: BoardRenderPalette, footer: boolean) => void;
   destroy: () => void;
 };
-/**
- * Shared card chrome: rounded background, selection/hover border, optional
- * footer with title, and a masked content region. Tracks the last rendered
- * state so unchanged attributes are not redrawn.
- */
 declare function createCardShell(): CardShell;
-/**
- * Position a shell root at an item frame. The container pivots around its
- * center so that Pixi's rotation matches the geometry model (which treats
- * `frame.rotation` as a rotation about the frame center).
- */
-declare function positionShell(root: Container, item: BoardItem): void;
+declare function positionShell(root: Container, item: {
+  frame: BoardFrame;
+}): void;
 //#endregion
-export { CARD_PADDING, CARD_RADIUS, CardShell, CardShellState, FOOTER_HEIGHT, createCardShell, createLabel, emphasisColor, positionShell };
+export { CARD_PADDING, CARD_RADIUS, CardShell, CardShellState, FOOTER_HEIGHT, createCardShell, createLabel, positionShell };

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

@@ -1,5 +1,4 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { parseBoardCssColor } from "../css-color.js";
 import { getBoardResolution } from "../text-resolution.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/base-card-renderer.ts
@@ -10,18 +9,6 @@ const TEXT_OPTIONS = {
 	resolution: getBoardResolution(),
 	roundPixels: true
 };
-function emphasisColor(item, palette) {
-	if (item.style?.accentColor) {
-		const normalized = parseBoardCssColor(item.style.accentColor);
-		if (normalized != null) return normalized;
-	}
-	switch (item.style?.emphasis) {
-		case "rare": return palette.rare;
-		case "epic": return palette.epic;
-		case "legendary": return palette.legendary;
-		default: return palette.brand;
-	}
-}
 function createLabel(text, style) {
 	return new Text({
 		...TEXT_OPTIONS,
@@ -29,11 +16,6 @@ function createLabel(text, style) {
 		style
 	});
 }
-/**
-* Shared card chrome: rounded background, selection/hover border, optional
-* footer with title, and a masked content region. Tracks the last rendered
-* state so unchanged attributes are not redrawn.
-*/
 function createCardShell() {
 	const root = new Container();
 	const background = new Graphics();
@@ -120,11 +102,6 @@ function createCardShell() {
 		destroy
 	};
 }
-/**
-* Position a shell root at an item frame. The container pivots around its
-* center so that Pixi's rotation matches the geometry model (which treats
-* `frame.rotation` as a rotation about the frame center).
-*/
 function positionShell(root, item) {
 	const { x, y, width, height, rotation } = item.frame;
 	root.pivot.set(width / 2, height / 2);
@@ -133,4 +110,4 @@ function positionShell(root, item) {
 	root.rotation = (rotation || 0) * Math.PI / 180;
 }
 //#endregion
-export { CARD_PADDING, CARD_RADIUS, FOOTER_HEIGHT, createCardShell, createLabel, emphasisColor, positionShell };
+export { CARD_PADDING, CARD_RADIUS, FOOTER_HEIGHT, createCardShell, createLabel, positionShell };