@neta-art/cohub 8.23.0 → 9.0.0

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

@@ -1,32 +1,12 @@
-import { BoardFileItem, BoardItem } from "../../../protocol/dist/board-document.js";
+import { BoardFileItem } from "../../../protocol/dist/board-model.js";
+import "../../../protocol/dist/index.js";
+import { BoardSceneItem, SceneItem } from "../../core/scene.js";
 import { BoardCardRenderer } from "./board-renderer-registry.js";
 import { Text } from "pixi.js";
 //#region src/board/render/renderers/file-card-renderer.d.ts
-/**
- * Join already-wrapped lines and append an ellipsis to the last one.
- * Pure helper so the clamp can be unit-tested without a Pixi canvas.
- */
 declare function ellipsizeWrappedLines(lines: string[], maxLines: number): string;
-/**
- * Shorten `line` so `line + "…"` fits in `wrapWidth`.
- *
- * Binary search over the prefix: O(log n) single-line measures. Callers pass a
- * measure callback so this stays free of Pixi types and easy to unit-test.
- */
 declare function fitLineWithEllipsis(line: string, wrapWidth: number, measureWidth: (value: string) => number): string;
-/**
- * Fit a Pixi text node into a fixed line budget.
- *
- * Pixi Text has no built-in max-lines / ellipsis, so we measure with the same
- * style the node will render, keep the leading wrapped lines, and mark a cut
- * with an ellipsis. Returning early when everything fits avoids an extra
- * texture rebuild on the common path.
- *
- * Cost is one wrap of a length-capped sample, plus at most a binary search on
- * the last kept line. No character-by-character multi-line remeasure.
- */
 declare function fitTextToLines(text: Text, value: string, maxLines: number, wrapWidth: number): void;
-/** Scale an image into a fixed cover band without cropping or distortion. */
 declare function containCoverRect(width: number, height: number, imageWidth: number, imageHeight: number): {
   x: number;
   y: number;
@@ -34,7 +14,6 @@ declare function containCoverRect(width: number, height: number, imageWidth: num
   height: number;
 };
 declare const fileCardRenderer: BoardCardRenderer;
-/** Helper kept for type narrowing in tests. */
-declare function isFileItem(item: BoardItem): item is BoardFileItem;
+declare function isFileItem(item: BoardSceneItem): item is SceneItem<BoardFileItem>;
 //#endregion
 export { containCoverRect, ellipsizeWrappedLines, fileCardRenderer, fitLineWithEllipsis, fitTextToLines, isFileItem };

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

@@ -6,26 +6,9 @@ import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate } from "./far-plate.js";
 import { CanvasTextMetrics, Container, Graphics, Sprite, Text, Texture } from "pixi.js";
 //#region src/board/render/renderers/file-card-renderer.ts
-/**
-* File card renderer.
-*
-* The card is an *entry point* to a workspace file, so it shows only what helps
-* you recognise and pick it: an optional cover, the name, a couple of lines of
-* excerpt. Everything else belongs to the file preview that opens
-* when the card is activated.
-*
-* Cost is managed through three levels of detail keyed on zoom, because a board
-* is expected to hold thousands of these. Pixi `Text` is a rasterised texture,
-* so below roughly one CSS pixel per glyph it can only ever resolve to a smudge;
-* the tiers below simply stop paying for what cannot be read anyway.
-*
-* Absolute floor: content never paints outside the node frame. A rounded clip
-* mask is the hard boundary; line-clamped title/excerpt keep the interior tidy.
-*/
 const RADIUS = 4;
 const PADDING = 10;
 const COVER_RATIO = .56;
-/** Minimum body height reserved under a cover so the title stays readable. */
 const MIN_BODY_FOR_COVER = 38;
 const TITLE_SIZE = 13;
 const TITLE_LINE = TITLE_SIZE * 1.35;
@@ -36,29 +19,20 @@ const EXCERPT_MAX_LINES = 3;
 const TYPE_MARK_SIZE = 28;
 const GAP = 4;
 const STRIPE = 2;
-/** Zoom below which the title is dropped (glyphs are sub-pixel). */
 const LOD_TITLE_ZOOM = .35;
-/** Zoom below which the excerpt is dropped. */
 const LOD_BODY_ZOOM = .6;
-/** Upper bound on dashes in the unavailable-state edge, regardless of width. */
 const MAX_DASHES = 40;
 const partsByContainer = /* @__PURE__ */ new WeakMap();
-/** Detail tier for a zoom level. */
 function detailFor(zoom) {
 	if (zoom < LOD_TITLE_ZOOM) return "plate";
 	if (zoom < LOD_BODY_ZOOM) return "title";
 	return "full";
 }
-/** Cover band height for a card, or 0 when it has no cover. */
 function coverHeight(item, height) {
-	if (filePreviewKind(item.snapshot) !== "cover") return 0;
+	if (filePreviewKind(item.props.snapshot) !== "cover") return 0;
 	const ideal = Math.round(height * COVER_RATIO);
 	return Math.max(0, Math.min(ideal, height - MIN_BODY_FOR_COVER));
 }
-/**
-* Join already-wrapped lines and append an ellipsis to the last one.
-* Pure helper so the clamp can be unit-tested without a Pixi canvas.
-*/
 function ellipsizeWrappedLines(lines, maxLines) {
 	if (maxLines <= 0 || lines.length === 0) return "";
 	if (lines.length <= maxLines) return lines.join("\n");
@@ -68,12 +42,6 @@ function ellipsizeWrappedLines(lines, maxLines) {
 	kept[lastIndex] = last ? `${last}…` : "…";
 	return kept.join("\n");
 }
-/**
-* Shorten `line` so `line + "…"` fits in `wrapWidth`.
-*
-* Binary search over the prefix: O(log n) single-line measures. Callers pass a
-* measure callback so this stays free of Pixi types and easy to unit-test.
-*/
 function fitLineWithEllipsis(line, wrapWidth, measureWidth) {
 	const trimmed = line.replace(/\s+$/u, "");
 	if (!trimmed) return "…";
@@ -92,17 +60,6 @@ function fitLineWithEllipsis(line, wrapWidth, measureWidth) {
 	}
 	return best;
 }
-/**
-* Fit a Pixi text node into a fixed line budget.
-*
-* Pixi Text has no built-in max-lines / ellipsis, so we measure with the same
-* style the node will render, keep the leading wrapped lines, and mark a cut
-* with an ellipsis. Returning early when everything fits avoids an extra
-* texture rebuild on the common path.
-*
-* Cost is one wrap of a length-capped sample, plus at most a binary search on
-* the last kept line. No character-by-character multi-line remeasure.
-*/
 function fitTextToLines(text, value, maxLines, wrapWidth) {
 	const width = Math.max(1, wrapWidth);
 	text.style.wordWrapWidth = width;
@@ -126,12 +83,10 @@ function fitTextToLines(text, value, maxLines, wrapWidth) {
 	const fitted = kept.join("\n");
 	if (text.text !== fitted) text.text = fitted;
 }
-/** How many full lines of `lineHeight` fit in `room`, capped at `max`. */
 function linesInRoom(room, lineHeight, max) {
 	if (room < lineHeight * .85) return 0;
 	return Math.max(0, Math.min(max, Math.floor((room + .5) / lineHeight)));
 }
-/** Scale an image into a fixed cover band without cropping or distortion. */
 function containCoverRect(width, height, imageWidth, imageHeight) {
 	if (width <= 0 || height <= 0 || imageWidth <= 0 || imageHeight <= 0) return {
 		x: 0,
@@ -169,10 +124,10 @@ function sync(container, item, context) {
 	const key = context.assetKey(item);
 	const texture = key ? context.getTexture(key) : null;
 	const coverFailed = Boolean(key && !texture && context.hasError(key));
-	const fileState = context.fileState(item.ref.path);
+	const fileState = context.fileState(item.props.src);
 	const band = coverHeight(item, height);
-	const kind = filePreviewKind(item.snapshot);
-	const category = fileCategory(item.ref.path, item.snapshot?.mimeType);
+	const kind = filePreviewKind(item.props.snapshot);
+	const category = fileCategory(item.props.src, item.props.snapshot?.mimeType);
 	const accent = fileCategoryAccent(category, context.palette);
 	syncTextResolution(parts.title, parts.titleRes, context.zoom);
 	syncTextResolution(parts.excerpt, parts.excerptRes, context.zoom);
@@ -240,9 +195,9 @@ function sync(container, item, context) {
 		parts.typeMark.visible = false;
 		return;
 	}
-	const title = item.snapshot?.title || fileStem(item.ref.path);
-	const excerpt = item.snapshot?.excerpt ?? "";
-	const mark = fileTypeLabel(item.ref.path);
+	const title = item.props.snapshot?.title || fileStem(item.props.src);
+	const excerpt = item.props.snapshot?.excerpt ?? "";
+	const mark = fileTypeLabel(item.props.src);
 	const innerWidth = Math.max(1, width - 20);
 	const showTypeMark = kind === "blank";
 	const textSig = [
@@ -369,12 +324,8 @@ const fileCardRenderer = {
 	update: (container, item, context) => {
 		if (item.type === "file") sync(container, item, context);
 	},
-	/**
-	* Far LOD: a plate with a muted accent band. Sampling the real cover here
-	* would mean one draw call per distinct image and defeat the batch.
-	*/
 	renderFar: (graphics, item, context) => {
-		const category = fileCategory(item.type === "file" ? item.ref.path : "", item.type === "file" ? item.snapshot?.mimeType : void 0);
+		const category = fileCategory(item.type === "file" ? item.props.src : "", item.type === "file" ? item.props.snapshot?.mimeType : void 0);
 		drawFarPlate(graphics, item.frame, {
 			fill: context.palette.surface,
 			fillAlpha: .96,
@@ -387,7 +338,6 @@ const fileCardRenderer = {
 		partsByContainer.delete(container);
 	}
 };
-/** Helper kept for type narrowing in tests. */
 function isFileItem(item) {
 	return item.type === "file";
 }

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

@@ -1,49 +1,58 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { pickBoardColor } from "../../core/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 { Container, Graphics } from "pixi.js";
 //#region src/board/render/renderers/frame-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
+const DEFAULT_WASH = .04;
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
-	if (!parts || item.type !== "frame") return;
-	const { frame, label, color, locked } = item;
+	if (!parts) return;
+	const { frame, style, props, locked } = item;
 	positionShell(parts.root, item);
 	syncTextResolution(parts.label, parts, context.zoom);
 	const selected = context.selectedIds.has(item.id);
 	const hovered = context.hoveredId === item.id;
-	const palette = pickBoardColor(context.colors, color, context.colorScheme);
-	const stroke = selected ? context.palette.brand : palette.stroke;
+	const fill = itemColor(context, style.fill ?? style.stroke, "neutral", "fill");
+	const fillAlpha = style.fillOpacity ?? (style.fill ? 1 : DEFAULT_WASH);
+	const baseStroke = itemColor(context, style.stroke, "neutral");
+	const stroke = selected ? context.palette.brand : baseStroke;
 	const alpha = selected ? 1 : hovered ? .85 : .55;
+	const radius = style.radius ?? 4;
+	const strokeWidth = style.strokeWidth ?? 1.5;
 	const visualSig = [
 		frame.width,
 		frame.height,
 		selected,
 		hovered,
-		palette.fill,
-		stroke
+		fill,
+		fillAlpha,
+		stroke,
+		radius,
+		strokeWidth
 	].join("|");
 	if (visualSig !== parts.visualSig) {
 		parts.visualSig = visualSig;
 		parts.box.clear();
-		parts.box.roundRect(0, 0, frame.width, frame.height, 4).fill({
-			color: palette.fill,
-			alpha: .04
+		parts.box.roundRect(0, 0, frame.width, frame.height, radius).fill({
+			color: fill,
+			alpha: fillAlpha
 		});
-		parts.box.roundRect(0, 0, frame.width, frame.height, 4).stroke({
+		if (strokeWidth > 0 || selected) parts.box.roundRect(0, 0, frame.width, frame.height, radius).stroke({
 			color: stroke,
-			width: selected ? 2 : 1.5,
+			width: selected ? Math.max(2, strokeWidth) : strokeWidth,
 			alpha
 		});
 	}
-	const title = locked ? `🔒 ${label || "Frame"}` : label || "Frame";
-	const textSig = [title, palette.stroke].join("|");
+	const title = locked ? `🔒 ${props.label || "Frame"}` : props.label || "Frame";
+	const labelColor = style.stroke ? baseStroke : context.palette.muted;
+	const textSig = [title, labelColor].join("|");
 	if (textSig !== parts.textSig) {
 		parts.textSig = textSig;
 		parts.label.text = title;
-		parts.label.style.fill = palette.stroke;
+		parts.label.style.fill = labelColor;
 	}
 	parts.label.position.set(4, -18);
 }
@@ -68,26 +77,17 @@ const frameCardRenderer = {
 			textSig: "",
 			resolution: label.resolution
 		});
-		sync(root, item, context);
+		if (item.type === "frame") sync(root, item, context);
 		return root;
 	},
 	update: (container, item, context) => {
-		sync(container, item, context);
+		if (item.type === "frame") sync(container, item, context);
 	},
-	/**
-	* Far LOD: a frame is a background region, so it draws as a faint wash with no
-	* label.
-	*
-	* Batching it is what keeps it *behind* its contents. As a live container it
-	* would be drawn above the whole far layer no matter where the document places
-	* it, so a frame would hide every card inside it.
-	*/
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "frame") return;
-		const palette = pickBoardColor(context.colors, item.color, context.colorScheme);
 		drawFarPlate(graphics, item.frame, {
-			fill: palette.fill,
-			fillAlpha: .07
+			fill: itemColor(context, item.style.fill ?? item.style.stroke, "neutral", "fill"),
+			fillAlpha: Math.max(.07, item.style.fillOpacity ?? (item.style.fill ? 1 : 0))
 		});
 	},
 	destroy: (container) => {

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

@@ -1,8 +1,9 @@
-import { BoardImageItem, BoardItem } from "../../../protocol/dist/board-document.js";
+import { BoardImageItem } from "../../../protocol/dist/board-model.js";
+import "../../../protocol/dist/index.js";
+import { BoardSceneItem, SceneItem } from "../../core/scene.js";
 import { BoardCardRenderer } from "./board-renderer-registry.js";
 //#region src/board/render/renderers/image-card-renderer.d.ts
 declare const imageCardRenderer: BoardCardRenderer;
-/** Helper kept for type narrowing in tests. */
-declare function isImageItem(item: BoardItem): item is BoardImageItem;
+declare function isImageItem(item: BoardSceneItem): item is SceneItem<BoardImageItem>;
 //#endregion
 export { imageCardRenderer, isImageItem };

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

@@ -4,14 +4,6 @@ import { Container, Graphics, Sprite, Texture } from "pixi.js";
 //#region src/board/render/renderers/image-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
 const RADIUS = 2;
-/**
-* Lay the sprite out inside the frame.
-*
-* The frame normally already matches the image's pixel aspect (see the editor's
-* media size adoption), so this fills it exactly. Until that correction lands
-* for a freshly dropped file, `contain` keeps the whole image visible rather
-* than cropping it — the brief letterbox is self-correcting.
-*/
 function layoutContain(sprite, width, height) {
 	const texture = sprite.texture;
 	const tw = texture.width;
@@ -130,7 +122,6 @@ const imageCardRenderer = {
 		partsByContainer.delete(container);
 	}
 };
-/** Helper kept for type narrowing in tests. */
 function isImageItem(item) {
 	return item.type === "image";
 }

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

@@ -0,0 +1,9 @@
+import { BoardShapeItem } from "../../../protocol/dist/board-model.js";
+import "../../../protocol/dist/index.js";
+import { BoardCardRenderer } from "./board-renderer-registry.js";
+import { Graphics } from "pixi.js";
+//#region src/board/render/renderers/shape-card-renderer.d.ts
+declare function traceShapeOutline(graphics: Graphics, props: BoardShapeItem["props"], width: number, height: number, radius?: number): void;
+declare const shapeCardRenderer: BoardCardRenderer;
+//#endregion
+export { shapeCardRenderer, traceShapeOutline };

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

@@ -0,0 +1,240 @@
+import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
+import { worldPoint } from "../../geometry.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 { Container, Graphics, GraphicsPath, Matrix, Text } from "pixi.js";
+//#region src/board/render/renderers/shape-card-renderer.ts
+const DEFAULT_ROUNDED_RADIUS = 8;
+const partsByContainer = /* @__PURE__ */ new WeakMap();
+const pathCache = /* @__PURE__ */ new Map();
+function parsedPath(d) {
+	if (pathCache.has(d)) return pathCache.get(d) ?? null;
+	let entry = null;
+	try {
+		const path = new GraphicsPath(d);
+		const probe = new Graphics().path(path).fill(0);
+		const bounds = probe.getLocalBounds();
+		probe.destroy();
+		entry = {
+			path,
+			bounds: {
+				x: bounds.x,
+				y: bounds.y,
+				width: Math.max(1e-6, bounds.width),
+				height: Math.max(1e-6, bounds.height)
+			}
+		};
+	} catch {
+		entry = null;
+	}
+	if (pathCache.size > 256) pathCache.clear();
+	pathCache.set(d, entry);
+	return entry;
+}
+function traceShapeOutline(graphics, props, width, height, radius) {
+	switch (props.geometry) {
+		case "ellipse":
+			graphics.ellipse(width / 2, height / 2, width / 2, height / 2);
+			return;
+		case "diamond":
+			graphics.moveTo(width / 2, 0).lineTo(width, height / 2).lineTo(width / 2, height).lineTo(0, height / 2).closePath();
+			return;
+		case "triangle":
+			graphics.moveTo(width / 2, 0).lineTo(width, height).lineTo(0, height).closePath();
+			return;
+		case "rounded":
+			graphics.roundRect(0, 0, width, height, radius ?? DEFAULT_ROUNDED_RADIUS);
+			return;
+		case "path": {
+			const parsed = props.path ? parsedPath(props.path) : null;
+			if (!parsed) {
+				graphics.rect(0, 0, width, height);
+				return;
+			}
+			const sx = width / parsed.bounds.width;
+			const sy = height / parsed.bounds.height;
+			graphics.path(parsed.path.clone(true).transform(new Matrix(sx, 0, 0, sy, -parsed.bounds.x * sx, -parsed.bounds.y * sy)));
+			return;
+		}
+		default: if (radius) graphics.roundRect(0, 0, width, height, radius);
+		else graphics.rect(0, 0, width, height);
+	}
+}
+function outlinePoints(geometry, width, height, radius) {
+	const p = (x, y) => worldPoint(x, y);
+	switch (geometry) {
+		case "ellipse": {
+			const segments = 64;
+			return Array.from({ length: 65 }, (_, index) => {
+				const angle = -Math.PI / 2 + index / segments * Math.PI * 2;
+				return p(width / 2 + Math.cos(angle) * width / 2, height / 2 + Math.sin(angle) * height / 2);
+			});
+		}
+		case "diamond": return [
+			p(width / 2, 0),
+			p(width, height / 2),
+			p(width / 2, height),
+			p(0, height / 2),
+			p(width / 2, 0)
+		];
+		case "triangle": return [
+			p(width / 2, 0),
+			p(width, height),
+			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)
+			];
+		}
+	}
+}
+function sync(container, item, context) {
+	const parts = partsByContainer.get(container);
+	if (!parts) return;
+	positionShell(parts.root, item);
+	const { width, height } = item.frame;
+	const { props, style } = item;
+	const selected = context.selectedIds.has(item.id);
+	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 strokeWidth = style.strokeWidth ?? 1.75;
+	syncTextResolution(parts.label, parts, context.zoom);
+	const visualSig = [
+		width,
+		height,
+		selected,
+		hovered,
+		props.geometry,
+		props.path,
+		fill,
+		fillOpacity,
+		stroke,
+		strokeWidth,
+		style.dash,
+		style.radius,
+		style.trim,
+		context.palette.muted
+	].join("|");
+	if (visualSig !== parts.visualSig) {
+		parts.visualSig = visualSig;
+		parts.shape.clear();
+		if (fillOpacity > 0) {
+			traceShapeOutline(parts.shape, props, width, height, style.radius);
+			parts.shape.fill({
+				color: fill,
+				alpha: fillOpacity
+			});
+		}
+		const lineWidth = selected ? Math.max(2.5, strokeWidth) : strokeWidth;
+		const pattern = dashPattern(style.dash, lineWidth);
+		const partial = style.trim !== void 0 && style.trim < 1;
+		if (strokeWidth > 0 && (!partial || style.trim)) {
+			if ((pattern || partial) && props.geometry !== "path") {
+				const radius = style.radius ?? (props.geometry === "rounded" ? DEFAULT_ROUNDED_RADIUS : 0);
+				tracePolyline(parts.shape, trimPolyline(outlinePoints(props.geometry, width, height, radius), style.trim), pattern);
+			} else traceShapeOutline(parts.shape, props, width, height, style.radius);
+			parts.shape.stroke({
+				color: hovered && !selected ? context.palette.muted : stroke,
+				width: lineWidth,
+				alpha: selected ? 1 : hovered ? .95 : .85,
+				cap: partial || pattern ? "round" : "butt",
+				join: "round"
+			});
+		}
+	}
+	const label = itemColor(context, style.stroke, "neutral", "label");
+	const textSig = [
+		props.text,
+		label,
+		props.fontSize,
+		props.align
+	].join("|");
+	if (textSig !== parts.textSig) {
+		parts.textSig = textSig;
+		parts.label.text = props.text;
+		parts.label.visible = props.text.length > 0;
+		parts.label.style.fill = label;
+		parts.label.style.fontSize = props.fontSize;
+		parts.label.style.lineHeight = props.fontSize * 1.4;
+		parts.label.style.align = props.align;
+	}
+	syncTextWrapWidth(parts.label, parts, Math.max(1, width - 16), context.resizingIds.has(item.id));
+	parts.label.position.set(width / 2, height / 2);
+}
+const shapeCardRenderer = {
+	id: "shape-card",
+	canRender: (item) => item.type === "shape",
+	create: (item, context) => {
+		const root = new Container();
+		const shape = new Graphics();
+		const resolution = textResolutionForZoom(context.zoom);
+		const label = new Text({
+			text: "",
+			style: {
+				fill: 16777215,
+				fontFamily: BOARD_FONT_STACK,
+				fontSize: 20,
+				fontWeight: "500",
+				align: "center",
+				wordWrap: true,
+				lineHeight: 28
+			},
+			resolution,
+			roundPixels: true
+		});
+		label.anchor.set(.5);
+		root.addChild(shape, label);
+		partsByContainer.set(root, {
+			root,
+			shape,
+			label,
+			visualSig: "",
+			textSig: "",
+			wrapWidth: 0,
+			resolution
+		});
+		if (item.type === "shape") sync(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "shape") sync(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		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),
+			accent: itemColor(context, item.style.stroke, "brand"),
+			accentAlpha: .9
+		});
+	},
+	destroy: (container) => {
+		partsByContainer.get(container)?.root.destroy({ children: true });
+		partsByContainer.delete(container);
+	}
+};
+//#endregion
+export { shapeCardRenderer, traceShapeOutline };

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

@@ -0,0 +1,5 @@
+import { BoardCardRenderer } from "./board-renderer-registry.js";
+//#region src/board/render/renderers/sketch-card-renderer.d.ts
+declare const sketchCardRenderer: BoardCardRenderer;
+//#endregion
+export { sketchCardRenderer };