@neta-art/cohub 11.0.0 → 11.2.0

package/dist/board/render/surface.js

@@ -0,0 +1,132 @@
+import { worldPoint } from "../model/geometry.js";
+import { roundRectPoints } from "./stroke.js";
+//#region src/board/render/surface.ts
+const PIXEL_STEP = 2;
+const SHADOW_LAYERS = 5;
+function traceCardOutline(graphics, rect, style, grow = 0) {
+	const x = rect.x - grow;
+	const y = rect.y - grow;
+	const width = Math.max(0, rect.width + grow * 2);
+	const height = Math.max(0, rect.height + grow * 2);
+	if (style.corner === "pixel") return tracePixelRect(graphics, x, y, width, height, 2);
+	const radius = Math.min(Math.max(0, style.radius + grow), width / 2, height / 2);
+	return radius > 0 ? graphics.roundRect(x, y, width, height, radius) : graphics.rect(x, y, width, height);
+}
+function tracePixelRect(graphics, x, y, width, height, step) {
+	const s = Math.min(step, width / 4, height / 4);
+	if (s <= 0) return graphics.rect(x, y, width, height);
+	return graphics.poly(pixelRectPoints(x, y, width, height, s).flatMap((point) => [point.x, point.y]));
+}
+function pixelRectPoints(x, y, width, height, s) {
+	const r = x + width;
+	const b = y + height;
+	const p = worldPoint;
+	return [
+		p(x, y + s * 2),
+		p(x + s, y + s * 2),
+		p(x + s, y + s),
+		p(x + s * 2, y + s),
+		p(x + s * 2, y),
+		p(r - s * 2, y),
+		p(r - s * 2, y + s),
+		p(r - s, y + s),
+		p(r - s, y + s * 2),
+		p(r, y + s * 2),
+		p(r, b - s * 2),
+		p(r - s, b - s * 2),
+		p(r - s, b - s),
+		p(r - s * 2, b - s),
+		p(r - s * 2, b),
+		p(x + s * 2, b),
+		p(x + s * 2, b - s),
+		p(x + s, b - s),
+		p(x + s, b - s * 2),
+		p(x, b - s * 2)
+	];
+}
+function cardOutlinePoints(rect, style, grow = 0) {
+	const x = rect.x - grow;
+	const y = rect.y - grow;
+	const width = Math.max(0, rect.width + grow * 2);
+	const height = Math.max(0, rect.height + grow * 2);
+	if (style.corner === "pixel") {
+		const s = Math.min(2, width / 4, height / 4);
+		const points = pixelRectPoints(x, y, width, height, Math.max(0, s));
+		return [...points, points[0]];
+	}
+	const radius = Math.min(Math.max(0, style.radius + grow), width / 2, height / 2);
+	return roundRectPoints(width, height, radius).map((point) => worldPoint(point.x + x, point.y + y));
+}
+function drawCardShadow(graphics, rect, style, shadow) {
+	if (!shadow || shadow.alpha <= 0 || shadow.blur <= 0) return;
+	const offset = {
+		...rect,
+		y: rect.y + shadow.y
+	};
+	const reach = (index) => (1 - index / SHADOW_LAYERS) ** 2;
+	for (let index = SHADOW_LAYERS; index >= 1; index -= 1) {
+		const alpha = shadow.alpha * (reach(index - 1) - reach(index));
+		traceCardOutline(graphics, offset, style, shadow.blur * index / SHADOW_LAYERS).fill({
+			color: shadow.color,
+			alpha
+		});
+		traceCardOutline(graphics, rect, style).cut();
+	}
+}
+function cardShadow(style, elevation) {
+	const shadow = style.shadow;
+	if (!shadow || elevation === 0) return null;
+	if (elevation === 1) return shadow;
+	return {
+		...shadow,
+		alpha: Math.min(1, shadow.alpha * 1.6),
+		blur: shadow.blur * 1.6,
+		y: shadow.y * 2 + 4
+	};
+}
+function drawCardSurface(graphics, rect, style, surface) {
+	drawCardShadow(graphics, rect, style, cardShadow(style, surface.elevation ?? 0));
+	traceCardOutline(graphics, rect, style).fill({
+		color: surface.fill,
+		alpha: surface.fillAlpha ?? 1
+	});
+	if (surface.border != null) traceCardOutline(graphics, rect, style).stroke({
+		color: surface.border,
+		width: 1,
+		alpha: surface.borderAlpha ?? 1,
+		alignment: 1
+	});
+	return graphics;
+}
+function containRect(width, height, imageWidth, imageHeight) {
+	if (width <= 0 || height <= 0 || imageWidth <= 0 || imageHeight <= 0) return {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	};
+	const scale = Math.min(width / imageWidth, height / imageHeight);
+	return {
+		x: (width - imageWidth * scale) / 2,
+		y: (height - imageHeight * scale) / 2,
+		width: imageWidth * scale,
+		height: imageHeight * scale
+	};
+}
+const FREE_FORM_TYPES = /* @__PURE__ */ new Set([
+	"text",
+	"shape",
+	"draw",
+	"arrow",
+	"frame",
+	"effect",
+	"custom"
+]);
+function cardElevation(context, id) {
+	return context.liftedIds.has(id) ? 2 : 1;
+}
+function isBoardCard(item) {
+	return !FREE_FORM_TYPES.has(item.type);
+}
+//#endregion
+export { PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect };

package/dist/board/render/text-fit.d.ts

@@ -0,0 +1,8 @@
+import { Text } from "pixi.js";
+//#region src/board/render/text-fit.d.ts
+declare function ellipsizeWrappedLines(lines: string[], maxLines: number): string;
+declare function fitLineWithEllipsis(line: string, wrapWidth: number, measureWidth: (value: string) => number): string;
+declare function fitTextToLines(text: Text, value: string, maxLines: number, wrapWidth: number): void;
+declare function fitTextToWidth(text: Text, value: string, width: number): void;
+//#endregion
+export { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth };

package/dist/board/render/text-fit.js

@@ -0,0 +1,60 @@
+import { CanvasTextMetrics } from "pixi.js";
+//#region src/board/render/text-fit.ts
+function ellipsizeWrappedLines(lines, maxLines) {
+	if (maxLines <= 0 || lines.length === 0) return "";
+	if (lines.length <= maxLines) return lines.join("\n");
+	const kept = lines.slice(0, maxLines);
+	const lastIndex = kept.length - 1;
+	const last = (kept[lastIndex] ?? "").replace(/\s+$/u, "");
+	kept[lastIndex] = last ? `${last}…` : "…";
+	return kept.join("\n");
+}
+function fitLineWithEllipsis(line, wrapWidth, measureWidth) {
+	const trimmed = line.replace(/\s+$/u, "");
+	if (!trimmed) return "…";
+	const full = `${trimmed}…`;
+	if (measureWidth(full) <= wrapWidth) return full;
+	let lo = 0;
+	let hi = trimmed.length;
+	let best = "…";
+	while (lo <= hi) {
+		const mid = lo + hi >> 1;
+		const candidate = mid > 0 ? `${trimmed.slice(0, mid)}…` : "…";
+		if (measureWidth(candidate) <= wrapWidth) {
+			best = candidate;
+			lo = mid + 1;
+		} else hi = mid - 1;
+	}
+	return best;
+}
+function fitTextToLines(text, value, maxLines, wrapWidth) {
+	const width = Math.max(1, wrapWidth);
+	text.style.wordWrapWidth = width;
+	if (!value || maxLines <= 0) {
+		if (text.text !== "") text.text = "";
+		return;
+	}
+	const charCap = Math.max(maxLines * Math.ceil(width), maxLines * 4);
+	const sample = value.length > charCap ? value.slice(0, charCap) : value;
+	const metrics = CanvasTextMetrics.measureText(sample, text.style);
+	if (!(metrics.lines.length > maxLines || sample !== value)) {
+		if (text.text !== value) text.text = value;
+		return;
+	}
+	const keptCount = Math.min(maxLines, metrics.lines.length);
+	const kept = metrics.lines.slice(0, keptCount);
+	const lastIndex = kept.length - 1;
+	const probe = text.style.clone();
+	probe.wordWrap = false;
+	kept[lastIndex] = fitLineWithEllipsis(kept[lastIndex] ?? "", width, (candidate) => CanvasTextMetrics.measureText(candidate, probe).width);
+	const fitted = kept.join("\n");
+	if (text.text !== fitted) text.text = fitted;
+}
+function fitTextToWidth(text, value, width) {
+	text.style.wordWrap = false;
+	const measure = (candidate) => CanvasTextMetrics.measureText(candidate, text.style).width;
+	const fitted = !value || measure(value) <= width ? value : fitLineWithEllipsis(value, width, measure);
+	if (text.text !== fitted) text.text = fitted;
+}
+//#endregion
+export { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth };

package/dist/board/render/text-resolution.d.ts

@@ -2,6 +2,7 @@ import { Text } from "pixi.js";
 //#region src/board/render/text-resolution.d.ts
 declare function getBoardResolution(): number;
 declare function textZoomBucket(zoom: number): number;
+declare function boardCardDetailed(zoom: number): boolean;
 /** Effective text resolution for a given camera zoom. */
 declare function textResolutionForZoom(zoom: number): number;
 /** Update a Pixi text texture only when zoom crosses a resolution bucket. */
@@ -13,4 +14,4 @@ declare function syncTextWrapWidth(text: Text, state: {
   wrapWidth: number;
 }, width: number, defer: boolean): void;
 //#endregion
-export { getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket };
+export { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket };

package/dist/board/render/text-resolution.js

@@ -21,6 +21,9 @@ function textZoomBucket(zoom) {
 	for (const bucket of TEXT_ZOOM_BUCKETS) if (clamped <= bucket) return bucket;
 	return TEXT_ZOOM_BUCKETS[TEXT_ZOOM_BUCKETS.length - 1] ?? 4;
 }
+function boardCardDetailed(zoom) {
+	return textZoomBucket(zoom) >= 1;
+}
 /** Effective text resolution for a given camera zoom. */
 function textResolutionForZoom(zoom) {
 	const bucket = textZoomBucket(zoom);
@@ -40,4 +43,4 @@ function syncTextWrapWidth(text, state, width, defer) {
 	state.wrapWidth = width;
 }
 //#endregion
-export { getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket };
+export { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket };

package/dist/board/stage/assets.js

@@ -1,6 +1,6 @@
 import { mediaPreviewCandidates } from "../../media.js";
 import { parseBoardMediaSource } from "../../protocol/dist/board-model.js";
-import { featuredTaskArtifact } from "../model/task.js";
+import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
 import { boardImageKeySource, imageAssetKey } from "../model/image-key.js";
 import { loadVideoThumbnailTexture, videoTextureNaturalSize } from "../render/video-thumbnail.js";
 import { DEFAULT_LRU_BUDGET, selectLruEvictions } from "./lru.js";

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

@@ -2,7 +2,8 @@ import { DEFAULT_LRU_BUDGET, LruBudget, LruEntry, selectLruEvictions } from "./l
 import { BoardImageTexturePool, boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTexture, unloadBoardImageTexture } from "./texture-pool.js";
 import { BoardAssetManager, BoardAssetManagerOptions, boardAssetKey, createBoardAssetManager } from "./assets.js";
 import { toBoardPointerEvent } from "./pointer.js";
-import { BoardLiveStroke, BoardScene, BoardSceneNode, SceneOverlayInput, SceneSyncInput, createBoardScene } from "./scene.js";
+import { BoardLiveStroke, BoardScene, BoardSceneNode, SceneSyncInput, createBoardScene } from "./scene.js";
 import { BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, createBoardItemViewLayer } from "./views.js";
 import { BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, mountBoardStage } from "./stage.js";
-export { BoardAssetManager, BoardAssetManagerOptions, BoardImageTexturePool, BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, BoardLiveStroke, BoardScene, BoardSceneNode, BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, SceneOverlayInput, SceneSyncInput, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardScene, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+import { BoardOverlayInput, drawBoardOverlay, expandFrame } from "./overlay.js";
+export { BoardAssetManager, BoardAssetManagerOptions, BoardImageTexturePool, BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, BoardLiveStroke, BoardOverlayInput, BoardScene, BoardSceneNode, BoardStage, BoardStageOptions, BoardStagePointerPhase, BoardStageTheme, DEFAULT_LRU_BUDGET, LruBudget, LruEntry, SceneSyncInput, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };

package/dist/board/stage/index.js

@@ -3,6 +3,7 @@ import { boardImageTexturePool, createBoardImageTexturePool, loadBoardImageTextu
 import { boardAssetKey, createBoardAssetManager } from "./assets.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardScene } from "./scene.js";
+import { drawBoardOverlay, expandFrame } from "./overlay.js";
 import { createBoardItemViewLayer } from "./views.js";
 import { mountBoardStage } from "./stage.js";
-export { DEFAULT_LRU_BUDGET, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardScene, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };
+export { DEFAULT_LRU_BUDGET, boardAssetKey, boardImageTexturePool, createBoardAssetManager, createBoardImageTexturePool, createBoardItemViewLayer, createBoardScene, drawBoardOverlay, expandFrame, loadBoardImageTexture, mountBoardStage, selectLruEvictions, toBoardPointerEvent, unloadBoardImageTexture };

package/dist/board/stage/overlay.d.ts

@@ -0,0 +1,41 @@
+import { BoardFrame } from "../../protocol/dist/board-layout.js";
+import { Rect, WorldPoint } from "../model/geometry.js";
+import { BoardScene, BoardSceneItem } from "../model/scene.js";
+import "../model/index.js";
+import { BoardSelectionTransform, BoardTransformControl } from "../editor/selection-transform.js";
+import "../editor/index.js";
+import { BoardRenderStyle } from "../render/style.js";
+import { BoardRenderPalette } from "../render/renderers/board-renderer-registry.js";
+import "../render/index.js";
+import { Graphics } from "pixi.js";
+//#region src/board/stage/overlay.d.ts
+type BoardOverlayInput = {
+  zoom: number;
+  pointerType: string;
+  palette: BoardRenderPalette;
+  style: BoardRenderStyle;
+  scene: BoardScene;
+  hovered: BoardSceneItem | null;
+  selected: readonly BoardSceneItem[];
+  march: number;
+  marquee: Rect | null;
+  transform: BoardSelectionTransform | null;
+  controls: boolean;
+  hoveredControl: BoardTransformControl | null;
+  rotationPointer: WorldPoint | null;
+  arrowEndpoints?: readonly WorldPoint[];
+  ports?: ReadonlyArray<{
+    x: number;
+    y: number;
+    radius: number;
+  }>;
+  hoveredPort?: {
+    x: number;
+    y: number;
+  } | null;
+  bindTarget?: BoardFrame | null;
+};
+declare function expandFrame(frame: BoardFrame, by: number): BoardFrame;
+declare function drawBoardOverlay(graphics: Graphics, input: BoardOverlayInput): void;
+//#endregion
+export { BoardOverlayInput, drawBoardOverlay, expandFrame };

package/dist/board/stage/overlay.js

@@ -0,0 +1,182 @@
+import { CORNER_RESIZE_HANDLES, frameCorners, frameHandlePosition, frameRayIntersection, rotationHandleAnchor, rotationHandlePosition } from "../model/geometry.js";
+import { resolveSceneArrow } from "../model/arrow-geometry.js";
+import { tracePolyline } from "../render/stroke.js";
+import { cardOutlinePoints, isBoardCard, traceCardOutline } from "../render/surface.js";
+//#region src/board/stage/overlay.ts
+const HOVER_ALPHA = .55;
+const PEER_ALPHA = .6;
+function expandFrame(frame, by) {
+	return {
+		...frame,
+		x: frame.x - by,
+		y: frame.y - by,
+		width: frame.width + by * 2,
+		height: frame.height + by * 2
+	};
+}
+function traceFrame(graphics, frame) {
+	const corners = frameCorners(frame);
+	const first = corners[0];
+	if (!first) return graphics;
+	graphics.moveTo(first.x, first.y);
+	for (const point of corners.slice(1)) graphics.lineTo(point.x, point.y);
+	return graphics.closePath();
+}
+function edgeOf(frame, handle) {
+	const at = (corner) => frameHandlePosition(frame, corner);
+	switch (handle) {
+		case "n": return [at("nw"), at("ne")];
+		case "e": return [at("ne"), at("se")];
+		case "s": return [at("sw"), at("se")];
+		case "w": return [at("nw"), at("sw")];
+		default: return null;
+	}
+}
+function strokeOutline(graphics, frame, card, style, line, inv, dash, march) {
+	const shape = card ? style : {
+		corner: "round",
+		radius: 0
+	};
+	const rect = {
+		x: -frame.width / 2,
+		y: -frame.height / 2,
+		width: frame.width,
+		height: frame.height
+	};
+	const angle = (frame.rotation || 0) * Math.PI / 180;
+	graphics.save();
+	graphics.setTransform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), frame.x + frame.width / 2, frame.y + frame.height / 2);
+	if (dash > 0) tracePolyline(graphics, cardOutlinePoints(rect, shape), [dash * inv, dash * inv], false, march * inv);
+	else traceCardOutline(graphics, rect, shape);
+	graphics.stroke({
+		...line,
+		cap: "butt",
+		join: "miter"
+	});
+	graphics.restore();
+}
+function drawHandle(graphics, point, style, palette, inv, active) {
+	const size = (active ? style.selection.handleSize + 2 : style.selection.handleSize) * inv;
+	if (style.selection.handle === "square") graphics.rect(point.x - size / 2, point.y - size / 2, size, size);
+	else graphics.circle(point.x, point.y, size / 2);
+	graphics.fill({
+		color: active ? palette.brand : palette.surface,
+		alpha: 1
+	}).stroke({
+		color: palette.brand,
+		width: style.selection.width * inv,
+		alignment: 1
+	});
+}
+function strokeArrow(graphics, item, scene, color, inv, alpha) {
+	const arrow = item;
+	const path = resolveSceneArrow(arrow, scene).path;
+	const first = path[0];
+	if (!first) return;
+	graphics.moveTo(first.x, first.y);
+	for (const point of path.slice(1)) graphics.lineTo(point.x, point.y);
+	graphics.stroke({
+		color,
+		width: (arrow.style.strokeWidth ?? 2) + 6 * inv,
+		alpha,
+		cap: "round",
+		join: "round"
+	});
+}
+function drawBoardOverlay(graphics, input) {
+	const { zoom, palette, style, scene, selected, transform, controls, hoveredControl } = input;
+	const inv = 1 / Math.max(zoom, 1e-4);
+	const brand = palette.brand;
+	const outset = style.selection.outset * inv;
+	if (input.marquee) {
+		const { x, y, width, height } = input.marquee;
+		graphics.rect(x, y, width, height).fill({
+			color: brand,
+			alpha: .08
+		});
+		graphics.rect(x, y, width, height).stroke({
+			color: brand,
+			width: inv,
+			alpha: .7
+		});
+	}
+	if (input.bindTarget) traceFrame(graphics, input.bindTarget).stroke({
+		color: brand,
+		width: 2 * inv,
+		alpha: .9
+	});
+	for (const port of input.ports ?? []) {
+		const hovered = input.hoveredPort && Math.abs(input.hoveredPort.x - port.x) < .001 && Math.abs(input.hoveredPort.y - port.y) < .001;
+		const radius = (hovered ? port.radius * 1.5 : port.radius) * inv;
+		if (style.corner === "pixel") graphics.rect(port.x - radius, port.y - radius, radius * 2, radius * 2);
+		else graphics.circle(port.x, port.y, radius);
+		graphics.fill({
+			color: palette.surface,
+			alpha: 1
+		}).stroke({
+			color: brand,
+			width: 1.5 * inv,
+			alpha: hovered ? 1 : .8
+		});
+	}
+	const hovered = input.hovered;
+	if (hovered && hovered.type === "arrow") strokeArrow(graphics, hovered, scene, palette.muted, inv, .2);
+	else if (hovered) strokeOutline(graphics, expandFrame(hovered.frame, outset), isBoardCard(hovered), style, {
+		color: palette.muted,
+		width: inv * style.selection.width,
+		alpha: HOVER_ALPHA
+	}, inv, 0, 0);
+	if (selected.length === 0) return;
+	const single = selected.length === 1 ? selected[0] : void 0;
+	const dash = style.selection.dash;
+	const line = {
+		color: brand,
+		width: style.selection.width * inv,
+		alpha: 1
+	};
+	for (const item of selected) if (item.type === "arrow") strokeArrow(graphics, item, scene, brand, inv, .3);
+	else if (!single) strokeOutline(graphics, expandFrame(item.frame, outset), isBoardCard(item), style, {
+		...line,
+		alpha: PEER_ALPHA
+	}, inv, 0, 0);
+	if (!transform) return;
+	if (single?.type !== "arrow") {
+		const card = single ? isBoardCard(single) : false;
+		strokeOutline(graphics, expandFrame(transform.frame, outset), card, style, line, inv, dash, input.march);
+	}
+	if (!controls) return;
+	if (input.arrowEndpoints?.length) {
+		for (const point of input.arrowEndpoints) drawHandle(graphics, point, style, palette, inv, false);
+		return;
+	}
+	const frame = expandFrame(transform.frame, outset);
+	if (hoveredControl?.kind === "resize" && transform.resizeMode === "free") {
+		const edge = edgeOf(frame, hoveredControl.handle);
+		if (edge) graphics.moveTo(edge[0].x, edge[0].y).lineTo(edge[1].x, edge[1].y).stroke({
+			color: brand,
+			width: 2.5 * inv,
+			alpha: 1
+		});
+	}
+	if (transform.resizeMode !== "none") for (const handle of CORNER_RESIZE_HANDLES) {
+		const active = hoveredControl?.kind === "resize" && hoveredControl.handle === handle;
+		drawHandle(graphics, frameHandlePosition(frame, handle), style, palette, inv, active);
+	}
+	if (transform.canRotate && (input.pointerType === "touch" || transform.resizeMode === "none")) {
+		const pointer = input.rotationPointer;
+		const rotation = pointer ?? rotationHandlePosition(frame, zoom);
+		const anchor = pointer ? frameRayIntersection(frame, pointer) : rotationHandleAnchor(frame);
+		const active = pointer !== null || hoveredControl?.kind === "rotate";
+		graphics.moveTo(anchor.x, anchor.y).lineTo(rotation.x, rotation.y).stroke({
+			color: brand,
+			width: inv,
+			alpha: .8
+		});
+		graphics.circle(rotation.x, rotation.y, (active ? 6 : 5) * inv).fill({ color: active ? brand : palette.surface }).stroke({
+			color: brand,
+			width: 1.5 * inv
+		});
+	}
+}
+//#endregion
+export { drawBoardOverlay, expandFrame };

package/dist/board/stage/scene.d.ts

@@ -1,11 +1,7 @@
 import { BoardDrawPoint } from "../../protocol/dist/board-model.js";
-import { BoardFrame } from "../../protocol/dist/board-layout.js";
-import { Rect, WorldPoint } from "../model/geometry.js";
 import { BoardScene as BoardScene$1, BoardSceneItem } from "../model/scene.js";
 import "../model/index.js";
-import { BoardSelectionTransform, BoardTransformControl } from "../editor/selection-transform.js";
-import "../editor/index.js";
-import { BoardCardRendererResolver, BoardRenderContext, BoardRenderPalette } from "../render/renderers/board-renderer-registry.js";
+import { BoardCardRendererResolver, BoardRenderContext } from "../render/renderers/board-renderer-registry.js";
 import "../render/index.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/stage/scene.d.ts
@@ -24,46 +20,11 @@ type SceneSyncInput = {
   visibleIds: Set<string> | null;
   pinnedIds: Set<string>;
   globalSig: string;
+  staleIds?: ReadonlySet<string>;
   structureVersion: number;
   geometryVersion: number;
   gestureActive: boolean;
 };
-type SceneOverlayInput = {
-  zoom: number;
-  pointerType: string;
-  marquee: Rect | null;
-  selection: string[];
-  transform: BoardSelectionTransform | null;
-  controls: boolean;
-  hoveredControl: BoardTransformControl | null;
-  rotationPointer: WorldPoint | null;
-  arrowEndpoints?: Array<{
-    x: number;
-    y: number;
-  }>;
-  ports?: ReadonlyArray<{
-    x: number;
-    y: number;
-    radius: number;
-  }>;
-  hoveredPort?: {
-    x: number;
-    y: number;
-  } | null;
-  arrowDraft?: {
-    from: {
-      x: number;
-      y: number;
-    };
-    to: {
-      x: number;
-      y: number;
-    };
-    size: number;
-    targetFrame: BoardFrame | null;
-  } | null;
-  bindTarget?: BoardFrame | null;
-};
 type BoardSceneNode = {
   item: BoardSceneItem;
   container: Container;
@@ -72,7 +33,7 @@ type BoardScene = {
   sync: (input: SceneSyncInput) => void;
   getNode: (itemId: string) => BoardSceneNode | null;
   readonly animated: boolean;
-  drawOverlay: (input: SceneOverlayInput, palette: BoardRenderPalette) => void;
+  tick: (clock: number) => number | null;
   destroy: (context: BoardRenderContext) => void;
 };
 declare function createBoardScene(options: {
@@ -82,4 +43,4 @@ declare function createBoardScene(options: {
   onFarLayerFrame?: () => void;
 }): BoardScene;
 //#endregion
-export { BoardLiveStroke, BoardScene, BoardSceneNode, SceneOverlayInput, SceneSyncInput, createBoardScene };
+export { BoardLiveStroke, BoardScene, BoardSceneNode, SceneSyncInput, createBoardScene };