@neta-art/cohub 12.3.0 → 12.4.0

package/README.md

@@ -244,7 +244,10 @@ detail and text work reaches your Board without code changes.
 Pictures your own items show go through `itemAsset`. They share the built-in
 loader: CDN variants sized to the screen, loads ordered by where the view is
 heading, prefetch, compact copies when panned away, device budgets, one cache
-and exports. Call `invalidateItemAssets()` when the data it reads changes:
+and exports. `src` is a Space path, resolved like an image item's, or a URL;
+`fit: "cover"` sizes pictures cropped to fill their box by the short edge. Call
+`invalidateItemAssets()` when the data it reads changes, and `invalidatePath`
+when a file changes:
 
 ```ts
 const assets = createBoardAssetManager({
@@ -252,8 +255,8 @@ const assets = createBoardAssetManager({
   // undefined keeps the built-in rule; null shows no picture.
   itemAsset: (item) => {
     if (item.type !== "acme.order") return undefined;
-    const cover = covers.get(item.props.orderId as string);
-    return cover ? { url: cover, fit: "cover" } : null;
+    const cover = covers.get(item.props.orderId as string); // "orders/o-1.webp"
+    return cover ? { src: cover, fit: "cover" } : null;
   },
 });
 ```
@@ -276,7 +279,14 @@ const assets = createBoardAssetManager({
 - **Card keys.** A renderer's `hitAt(item, point, context)` returns `{ action, cursor? }`
   for keys it draws; the stage shows the cursor, passes the hovered key to renderers as
   `context.hoveredHit` and sends presses to `onHit` (return `false` to let the editor
-  have them). Media cards report `BOARD_PLAY_MEDIA` this way.
+  have them). Media cards report `BOARD_PLAY_MEDIA` this way. `handlesHit(item, action)`
+  names the keys you act on; the rest show no cursor and go to the editor.
+- **Touch.** A touch on the selected item drags it, never a port. Pass
+  `touchRotation: false` to `createBoardEditor` to move and resize by touch and pen
+  without a rotation handle.
+- **DOM views.** `viewLayer: "below"` puts them under the canvas, so selection and
+  strokes draw over them; views there get no input. Use a theme with `imageBackground`
+  and paint the Board background behind the host, or the canvas covers them.
 - **Previews.** Write `preview: { title, excerpt, cover, src }` on your items so
   clients without your renderer, exports and agents show them as cards. Keep it out
   of undo with `editor.commitPatch(patch, { record: false })`.

package/dist/board/editor/clipboard.js

@@ -1,6 +1,6 @@
 import { parseBoardItem } from "../../protocol/dist/board-model.js";
-import { BOARD_CLIPBOARD_KIND, BOARD_CLIPBOARD_MIME } from "../../protocol/dist/board.js";
 import { arrowBindings, isArrowBinding } from "../../protocol/dist/board-layout.js";
+import { BOARD_CLIPBOARD_KIND, BOARD_CLIPBOARD_MIME } from "../../protocol/dist/board.js";
 import { createBoardItemId } from "../model/items/id.js";
 //#region src/board/editor/clipboard.ts
 /** How far a duplicate or repeated paste lands from its source. */

package/dist/board/editor/context.d.ts

@@ -84,6 +84,8 @@ type BoardEditorOptions = {
   initialTool?: BoardToolId;
   key?: string;
   readonly?: boolean;
+  /** false: touch and pen move and resize the selection but never rotate it. */
+  touchRotation?: boolean;
   preferences?: Partial<BoardEditorPreferences>;
   onPreferencesChange?: (preferences: BoardEditorPreferences) => void;
   onCommit: (patch: BoardPatch) => void | Promise<void>;

package/dist/board/editor/creation.js

@@ -1,6 +1,6 @@
 import { IDENTITY_MATRIX, applyMatrix, invertMatrix } from "../../protocol/dist/board-layout.js";
-import { buildBoardScene } from "../model/scene.js";
 import { rectCenter } from "../model/geometry.js";
+import { buildBoardScene } from "../model/scene.js";
 import { isShapeKind } from "../model/shape-types.js";
 import { createBoardItemId } from "../model/items/id.js";
 import { createAppBoardItem, createArrowBoardItem, createDrawBoardItem, createFileNodeForPath, createFrameBoardItem, createMediaBoardItem, createShapeBoardItem, createTaskBoardItem, createTextBoardItem } from "../model/items/create.js";

package/dist/board/editor/editor.js

@@ -1,8 +1,8 @@
 import { clampBoardStrokeSize } from "../../protocol/dist/board-constants.js";
-import { buildBoardScene } from "../model/scene.js";
+import { hasBoardScripts } from "../model/script-index.js";
 import { normalizeViewport } from "../model/geometry.js";
+import { buildBoardScene } from "../model/scene.js";
 import { isBoardColorId } from "../model/palette.js";
-import { hasBoardScripts } from "../model/script-index.js";
 import { isShapeKind } from "../model/shape-types.js";
 import { createBoardToolStyles } from "../model/tool-styles.js";
 import { titleForBoardItem } from "../model/items/create.js";
@@ -96,6 +96,11 @@ function createBoardEditor(options) {
 	ctx.snapshots = createSnapshotsModule(ctx);
 	ctx.remote = createRemoteModule(ctx);
 	const { document, query, camera, selection, creation, deletion, copy, interaction, animation, snapshots, remote } = ctx;
+	const transformChannels = options.touchRotation === false ? [
+		"scene",
+		"selection",
+		"hover"
+	] : ["scene", "selection"];
 	let viewStateQueued = false;
 	function emitViewState() {
 		viewStateQueued = false;
@@ -193,7 +198,7 @@ function createBoardEditor(options) {
 			return read(["scene", "selection"], selection.bounds);
 		},
 		get selectionTransform() {
-			return read(["scene", "selection"], selection.transform);
+			return read(transformChannels, selection.transform);
 		},
 		get camera() {
 			return read("camera", () => state.camera);

package/dist/board/editor/interaction.js

@@ -170,6 +170,11 @@ function createInteractionModule(ctx) {
 			size: arrow.size
 		};
 	}
+	function onSelectedItem(event) {
+		if (!canTapSelectWithHand(event.pointerType)) return false;
+		const item = ctx.query.itemAt(event.world);
+		return item !== null && state.selection.includes(item.id);
+	}
 	function plainPrimary(event) {
 		return event.button === 0 && !event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey;
 	}
@@ -296,7 +301,7 @@ function createInteractionModule(ctx) {
 				ctx.creation.beginTextDraft(event.world);
 				return;
 		}
-		const port = connectionPortAt$1(event.world, event.pointerType);
+		const port = onSelectedItem(event) ? null : connectionPortAt$1(event.world, event.pointerType);
 		if (port) {
 			state.interaction = arrowGesture(port.point, event.world, port.itemId, port.side);
 			return;

package/dist/board/editor/selection.js

@@ -1,6 +1,7 @@
-import { sceneItemToItem } from "../model/scene.js";
 import { selectionBounds } from "../model/geometry.js";
+import { sceneItemToItem } from "../model/scene.js";
 import { alignFrames, distributeFrames } from "./align.js";
+import { canTapSelectWithHand } from "./tool.js";
 import { resolveSelectionTransform } from "./selection-transform.js";
 import { memo } from "./state.js";
 //#region src/board/editor/selection.ts
@@ -17,7 +18,18 @@ function createSelectionModule(ctx) {
 		return result;
 	});
 	const bounds = memo(() => [items()], (selected) => selectionBounds(selected.map((item) => item.frame)));
-	const transform = memo(() => [items(), bounds()], (selected, rect) => resolveSelectionTransform(registry, selected, rect));
+	const rotatesOnTouch = ctx.options.touchRotation !== false;
+	const transform = memo(() => [
+		items(),
+		bounds(),
+		rotatesOnTouch || !canTapSelectWithHand(state.hoverPointerType)
+	], (selected, rect, rotates) => {
+		const resolved = resolveSelectionTransform(registry, selected, rect);
+		return resolved && !rotates ? {
+			...resolved,
+			canRotate: false
+		} : resolved;
+	});
 	function set(ids) {
 		state.selection = ids.filter((id) => Boolean(state.base.items[id]));
 	}

package/dist/board/export/index.js

@@ -1,9 +1,9 @@
 import { buildBoardScene } from "../model/scene.js";
 import { resolveBoardAnimationCamera } from "../model/sampling.js";
+import { normalizeBoardDocument, planBoardExport } from "../model/export-plan.js";
 import { parseBoardCssColor } from "../render/css-color.js";
 import { defaultBoardPalette } from "../render/palette.js";
 import { createBoardRenderSampler } from "../render/sampling.js";
-import { normalizeBoardDocument, planBoardExport } from "../model/export-plan.js";
 import { ensureBoardTextMeasurement } from "../render/text-measurement.js";
 import { createBoardExportScene } from "./scene.js";
 import { Rectangle, RendererType } from "pixi.js";

package/dist/board/export/node/scripts.js

@@ -1,5 +1,5 @@
-import { buildBoardScene } from "../../model/scene.js";
 import { boardScriptScope, composeBoardScriptItems } from "../../model/script-scene.js";
+import { buildBoardScene } from "../../model/scene.js";
 import { createBoardScriptModuleReader, loadBoardScriptSources } from "../../../protocol/dist/board-script-modules.js";
 import { createScriptRuntime } from "../../render/script-runtime.js";
 import { initializeBoardFonts } from "./fonts.js";

package/dist/board/export/scene.js

@@ -1,9 +1,9 @@
+import { boardAssetKey } from "../model/asset-key.js";
 import { buildFallbackShapeColors } from "../model/palette.js";
 import { defaultBoardPalette } from "../render/palette.js";
 import { clippingAncestor, isClippingFrame, syncClipGroup } from "../render/clip.js";
 import { DEFAULT_BOARD_RENDER_LABELS, getBoardCardRenderer } from "../render/renderers/board-renderer-registry.js";
 import { resolveBoardRenderStyle } from "../render/style.js";
-import { boardAssetKey } from "../model/asset-key.js";
 import { Container, Graphics, Sprite, TilingSprite } from "pixi.js";
 //#region src/board/export/scene.ts
 function buildContext(input) {

package/dist/board/model/asset-key.d.ts

@@ -7,13 +7,13 @@ type BoardAssetKeySource = {
   value: string;
   fit?: "cover";
 };
-/** `fit` applies to images: `cover` bounds the short edge instead of the long one. */
+/** `src` is a Space file path or a URL; `fit: "cover"` sizes an image by its short edge. */
 type BoardAssetRef = {
-  url: string;
+  src: string;
   media?: "image" | "video";
   fit?: "contain" | "cover";
 };
-declare function boardAssetRefKey({ url, media, fit }: BoardAssetRef): string;
+declare function boardAssetRefKey({ src, media, fit }: BoardAssetRef): string | null;
 declare function imageAssetKey(item: BoardSceneItem): string | null;
 declare function boardAssetKey(item: BoardSceneItem): string | null;
 declare function boardAssetKeySource(key: string): BoardAssetKeySource | null;

package/dist/board/model/asset-key.js

@@ -1,11 +1,18 @@
 import { mediaVariantSize, videoFrameUrl } from "../../media.js";
-import { boardItemPreview, parseBoardMediaSource } from "../../protocol/dist/board-model.js";
+import { boardItemPreview, isSafeBoardSourcePath, parseBoardMediaSource } from "../../protocol/dist/board-model.js";
 import { featuredTaskArtifact, taskArtifactPreviewUrl } from "../../protocol/dist/board-task.js";
 import { isBoardModelItem } from "./media.js";
 //#region src/board/model/asset-key.ts
-function boardAssetRefKey({ url, media = "image", fit }) {
-	if (media === "video") return `video-url:${encodeURIComponent(url)}`;
-	return fit === "cover" ? `cover-url:${url}` : `url:${url}`;
+const COVER = "cover:";
+function boardAssetRefKey({ src, media = "image", fit }) {
+	if (!src) return null;
+	const source = {
+		kind: isSafeBoardSourcePath(src) ? "file" : "url",
+		value: src
+	};
+	if (media === "video") return stillKey("video", source, void 0);
+	const key = `${source.kind}:${source.value}`;
+	return fit === "cover" ? COVER + key : key;
 }
 function imageAssetKey(item) {
 	if (item.type === "image") {
@@ -27,8 +34,7 @@ function imageAssetKey(item) {
 	return source ? `${source.kind}:${source.value}` : null;
 }
 const STILL_MEDIA = ["video", "model"];
-function stillKey(media, src, mtimeMs) {
-	const source = parseBoardMediaSource(src);
+function stillKey(media, source, mtimeMs) {
 	if (!source) return null;
 	return source.kind === "url" ? `${media}-url:${encodeURIComponent(source.value)}` : `${media}:${encodeURIComponent(source.value)}:${mtimeMs ?? "unknown"}`;
 }
@@ -42,8 +48,8 @@ function taskPreviewKey(item) {
 }
 function boardAssetKey(item) {
 	if (item.type === "task") return taskPreviewKey(item);
-	if (item.type === "video") return stillKey("video", item.props.src, item.props.snapshot?.mtimeMs);
-	if (item.type === "file" && isBoardModelItem(item)) return stillKey("model", item.props.src, item.props.snapshot?.mtimeMs);
+	if (item.type === "video") return stillKey("video", parseBoardMediaSource(item.props.src), item.props.snapshot?.mtimeMs);
+	if (item.type === "file" && isBoardModelItem(item)) return stillKey("model", parseBoardMediaSource(item.props.src), item.props.snapshot?.mtimeMs);
 	return imageAssetKey(item);
 }
 function boardAssetKeySource(key) {
@@ -53,6 +59,14 @@ function boardAssetKeySource(key) {
 		if (separator < 0) return null;
 		base = key.slice(separator + 1);
 	}
+	if (!base.startsWith(COVER)) return sourceOf(base);
+	const source = sourceOf(base.slice(6));
+	return source?.media === "image" ? {
+		...source,
+		fit: "cover"
+	} : null;
+}
+function sourceOf(base) {
 	try {
 		for (const media of STILL_MEDIA) {
 			if (base.startsWith(`${media}-url:`)) return {
@@ -82,12 +96,6 @@ function boardAssetKeySource(key) {
 		media: "image",
 		value: base.slice(4)
 	};
-	if (base.startsWith("cover-url:")) return {
-		kind: "url",
-		media: "image",
-		value: base.slice(10),
-		fit: "cover"
-	};
 	return null;
 }
 function boardTexturePixels(item, scale) {

package/dist/board/model/index.js

@@ -1,36 +1,36 @@
 import { BOARD_STROKE_MAX_SIZE, BOARD_STROKE_MIN_SIZE, clampBoardStrokeSize } from "../../protocol/dist/board-constants.js";
 import { isPublicBoardRemoteAddress, normalizeBoardRemoteUrl } from "../../protocol/dist/board-url.js";
 import { BOARD_ANCHOR_SIDES, BOARD_ARROW_ROUTES, BOARD_CAMERA_TARGET, BOARD_COLOR_TOKENS, BOARD_DASHES, BOARD_DERIVED_SIZE_TYPES, BOARD_EFFECT_KINDS, BOARD_EFFECT_KIND_INFO, BOARD_ENTER_PRESETS, BOARD_EXTENSION_TYPE_PATTERN, BOARD_GRID_DEFAULT_SIZE, BOARD_GRID_MAX_SIZE, BOARD_GRID_MIN_SIZE, BOARD_ID_MAX_LENGTH, BOARD_ITEM_SCHEMAS, BOARD_ITEM_TYPES, BOARD_PLAY_MODES, BOARD_SHAPE_GEOMETRIES, BOARD_TASK_ARTIFACT_LIMIT, BOARD_TEXT_ALIGNS, BoardAnimationHeaderSchema, BoardAnimationSchema, BoardArrowAnchorSchema, BoardArrowBindingSchema, BoardArrowEndSchema, BoardArrowItemSchema, BoardAudioItemSchema, BoardBackgroundSchema, BoardColorSchema, BoardCropSchema, BoardCustomItemSchema, BoardDrawItemSchema, BoardDrawPointSchema, BoardEaseSchema, BoardEffectItemSchema, BoardExtensionItemSchema, BoardFileItemSchema, BoardFrameItemSchema, BoardIdSchema, BoardImageItemSchema, BoardItemPreviewSchema, BoardKeySchema, BoardKeyframeSchema, BoardMarkerSchema, BoardMediaOriginSchema, BoardMediaSnapshotSchema, BoardMediaSourceSchema, BoardPatchSchema, BoardScriptSchema, BoardSettingsSchema, BoardShapeItemSchema, BoardSizeSchema, BoardStyleSchema, BoardTaskArtifactSchema, BoardTaskItemSchema, BoardTaskSnapshotSchema, BoardTextItemSchema, BoardTrackSchema, BoardVec2Schema, BoardVideoItemSchema, boardItemPreview, boardItemSchema, emptyBoardDocument, hasAuthoredSize, isBoardColorString, isBoardEase, isBuiltinItem, isBuiltinItemType, isEmptyBoardDelta, isFileBackedItem, isMediaItem, isSafeBoardSourcePath, parseBoardItem, parseBoardMediaSource } from "../../protocol/dist/board-model.js";
-import { isBoardPath, parseBoardManifest, serializeBoardManifest } from "../../protocol/dist/board.js";
 import { BOARD_TASK_SOURCE_PREFIX, boardTaskSource, featuredTaskArtifact, rankedTaskArtifacts, taskArtifactPreviewUrl, taskArtifacts, taskRunArtifacts, taskRunToBoardTaskSnapshot, withObservedArtifactFacts } from "../../protocol/dist/board-task.js";
 import { IDENTITY_MATRIX, adoptBoardNaturalSize, anchorPoint, applyMatrix, arrowBindings, autoAnchorSide, bendControl, clampBoardFontSize, createBoardLayout, createDocumentLayout, drawPointsBounds, drawSampleRadius, estimateTextWidth, fitBoardMediaSize, framePoint, invertMatrix, isArrowBinding, layoutBoardText, multiplyMatrix, pointsRect, rotateAround, scaleVector, setBoardTextLayouter, sideAnchor } from "../../protocol/dist/board-layout.js";
 import { applyBoardDelta, applyBoardPatch, applyBoardPatchToDocument, boardPatchTouches, createDocumentState, diffBoardDocuments, diffMergePatch, isEmptyBoardPatch, listBoardProperties, mergePatch, parseBoardDocument, pruneBoardTrack, resolveBoardProperty, trackReferences } from "../../protocol/dist/board-patch.js";
+import { isBoardPath, parseBoardManifest, serializeBoardManifest } from "../../protocol/dist/board.js";
 import { BOARD_SCHEMA_TARGETS, boardJsonSchema, boardSchemaOverview } from "../../protocol/dist/board-schema.js";
-import { applyBoardEvaluation, boardAnimationTime, boardDocumentAt, boardEase, compileBoardAnimations, evaluateBoardAnimations, parseHexColor, sampleBoardTrack } from "./animation.js";
-import { buildBoardScene, orderBoardItems, placeItem, refreshBoardScene, sceneItemToItem, sceneItemsToRecord, toSceneItem } from "./scene.js";
-import { CORNER_RESIZE_HANDLES, CORNER_ROTATION_ZONE_WIDTH, EDGE_RESIZE_HANDLES, FIT_PADDING, HANDLE_DIRECTION, HANDLE_HIT_RADIUS, MAX_BOARD_ZOOM, MIN_BOARD_ZOOM, MIN_ITEM_SIZE, RESIZE_HANDLES, ROTATION_HANDLE_OFFSET, VIEWPORT_MARGIN_RATIO, angleFromCenter, cameraForFocus, cameraForRect, cameraForState, clamp, clampZoom, degToRad, expandRect, fitToContent, frameContainsPoint, frameCornerRotationHandleAt, frameCorners, frameEdgeHandleAt, frameHandlePosition, frameRayIntersection, frameRect, handlePosition, itemBounds, normalizeRotation, normalizeViewport, normalizedPoint, panBy, pointToWorld, pointsBounds, radToDeg, rectCenter, rectContainsPoint, rectForCameraFocus, rectsIntersect, resizeFrame, resizeFrameToSize, rotateFrames, rotatePointAround, rotationHandleAnchor, rotationHandlePosition, scaleFrames, screenOffset, screenPoint, screenToWorld, selectionBounds, stableCullRect, unionRects, visibleWorldRect, worldOffset, worldPoint, worldRect, worldToScreen, zoomAround } from "./geometry.js";
-import { createBoardAnimationSampler, resolveBoardAnimationCamera } from "./sampling.js";
-import { BOARD_THEME_IDS } from "./themes.js";
-import { BOARD_COLORS, DEFAULT_BOARD_COLOR, boardColorCssVar, buildFallbackShapeColors, isBoardColorId, pickBoardColor, resolveBoardColor, resolveItemColor } from "./palette.js";
-import { ARROW_BINDING_GAP, arrowHitRadius, arrowPathBounds, distanceToArrow, pathMidpoint, pathPointAt, resolveAnchor, resolveArrow, resolveSceneArrow } from "./arrow-geometry.js";
-import { BOARD_EXPORT_DEFAULT_PADDING, BOARD_EXPORT_DEFAULT_SCALE, BOARD_EXPORT_ITEM_WARN_THRESHOLD, BOARD_EXPORT_MAX_EDGE, BOARD_EXPORT_MAX_PIXELS, exportItemBounds, normalizeBoardDocument, planBoardExport } from "./export-plan.js";
-import { BOARD_FRAME_LABEL_LINE_HEIGHT, BOARD_FRAME_LABEL_SIZE, SHAPE_LABEL_PADDING, TEXT_FONT_FAMILY, TEXT_FONT_SIZE, TEXT_LINE_HEIGHT, TEXT_MAX_FONT_SIZE, TEXT_MIN_FONT_SIZE, boardEditableText, boardFontFamily, frameLabelHitRect, frameLabelOffset, layoutShapeLabel } from "./text-metrics.js";
-import { boardModelFormat, getMediaExtension, getMediaResourceTitle, inferBoardMediaKind, isBoardModelItem } from "./media.js";
-import { FILE_EXCERPT_MAX_BYTES, FILE_EXCERPT_MAX_CHARS, buildCodeExcerpt, buildFileExcerpt, buildFileSnapshot, fileBaseName, fileCategory, fileStem, readCoverFromFrontmatter, readFrontmatterScalars, readTitleFromFrontmatter, resolveCoverRef, resolveFileTitle, resolveSpacePath, shouldFetchFileExcerpt, splitFrontmatter } from "./file-snapshot.js";
-import { availabilityFromError, fileCategoryAccent, fileMetaLine, filePreviewKind, filePreviewMemoKey, filePreviewScope, fileTypeLabel, formatFileSize, isFileSnapshotFresh, mergeFileSnapshot } from "./file-preview.js";
-import { buildStrokeOutline, buildStrokeRibbonGeometry, computeDrawBounds, createStrokeRibbonBuilder, distanceToStroke, isStrokeCorner, sampleRadius, simplifyDrawIndices, trimDrawPoints } from "./draw-geometry.js";
+import { placeBoardOverlay } from "./overlay-placement.js";
 import { boardScriptItems, hasBoardScripts } from "./script-index.js";
+import { CORNER_RESIZE_HANDLES, CORNER_ROTATION_ZONE_WIDTH, EDGE_RESIZE_HANDLES, FIT_PADDING, HANDLE_DIRECTION, HANDLE_HIT_RADIUS, MAX_BOARD_ZOOM, MIN_BOARD_ZOOM, MIN_ITEM_SIZE, RESIZE_HANDLES, ROTATION_HANDLE_OFFSET, VIEWPORT_MARGIN_RATIO, angleFromCenter, cameraForFocus, cameraForRect, cameraForState, clamp, clampZoom, degToRad, expandRect, fitToContent, frameContainsPoint, frameCornerRotationHandleAt, frameCorners, frameEdgeHandleAt, frameHandlePosition, frameRayIntersection, frameRect, handlePosition, itemBounds, normalizeRotation, normalizeViewport, normalizedPoint, panBy, pointToWorld, pointsBounds, radToDeg, rectCenter, rectContainsPoint, rectForCameraFocus, rectsIntersect, resizeFrame, resizeFrameToSize, rotateFrames, rotatePointAround, rotationHandleAnchor, rotationHandlePosition, scaleFrames, screenOffset, screenPoint, screenToWorld, selectionBounds, stableCullRect, unionRects, visibleWorldRect, worldOffset, worldPoint, worldRect, worldToScreen, zoomAround } from "./geometry.js";
 import { boardScriptScope, composeBoardScriptItems, prepareBoardScriptOutput, scriptTemporaryPrefix, validateBoardScriptCommit, validateBoardScriptOutput } from "./script-scene.js";
 import { boardScriptHitVisible, boardScriptTarget, resolveBoardScriptHit } from "./script-hit.js";
-import { BOARD_THUMBNAIL_EDGE, boardAssetKey, boardAssetKeySource, boardAssetRefKey, boardTextureEdge, boardTexturePixels, imageAssetKey } from "./asset-key.js";
-import { placeBoardOverlay } from "./overlay-placement.js";
 import { BOARD_SCRIPT_API } from "./script-api.js";
 import { BOARD_SCRIPT_DRAWING_EXAMPLE } from "./script-example.js";
+import { applyBoardEvaluation, boardAnimationTime, boardDocumentAt, boardEase, compileBoardAnimations, evaluateBoardAnimations, parseHexColor, sampleBoardTrack } from "./animation.js";
+import { buildBoardScene, orderBoardItems, placeItem, refreshBoardScene, sceneItemToItem, sceneItemsToRecord, toSceneItem } from "./scene.js";
+import { createBoardAnimationSampler, resolveBoardAnimationCamera } from "./sampling.js";
 import { boardPathTrack, boardSequence, boardSequencePatch } from "./authoring.js";
 import { BOARD_PRESET_NAMES, boardNestedAnimation, boardNestedAnimationTrack, boardPresetTracks, isBoardPresetName, listBoardPresets } from "./presets.js";
+import { ARROW_BINDING_GAP, arrowHitRadius, arrowPathBounds, distanceToArrow, pathMidpoint, pathPointAt, resolveAnchor, resolveArrow, resolveSceneArrow } from "./arrow-geometry.js";
+import { buildStrokeOutline, buildStrokeRibbonGeometry, computeDrawBounds, createStrokeRibbonBuilder, distanceToStroke, isStrokeCorner, sampleRadius, simplifyDrawIndices, trimDrawPoints } from "./draw-geometry.js";
 import { appendBoardDrawSamples, quantizeDrawCoordinate } from "./draw-input.js";
+import { boardModelFormat, getMediaExtension, getMediaResourceTitle, inferBoardMediaKind, isBoardModelItem } from "./media.js";
+import { BOARD_THUMBNAIL_EDGE, boardAssetKey, boardAssetKeySource, boardAssetRefKey, boardTextureEdge, boardTexturePixels, imageAssetKey } from "./asset-key.js";
 import { BOARD_EXPORT_TEXTURE_BYTES, boardTextureBytes, selectBoardExportAssets } from "./export-assets.js";
+import { BOARD_EXPORT_DEFAULT_PADDING, BOARD_EXPORT_DEFAULT_SCALE, BOARD_EXPORT_ITEM_WARN_THRESHOLD, BOARD_EXPORT_MAX_EDGE, BOARD_EXPORT_MAX_PIXELS, exportItemBounds, normalizeBoardDocument, planBoardExport } from "./export-plan.js";
+import { FILE_EXCERPT_MAX_BYTES, FILE_EXCERPT_MAX_CHARS, buildCodeExcerpt, buildFileExcerpt, buildFileSnapshot, fileBaseName, fileCategory, fileStem, readCoverFromFrontmatter, readFrontmatterScalars, readTitleFromFrontmatter, resolveCoverRef, resolveFileTitle, resolveSpacePath, shouldFetchFileExcerpt, splitFrontmatter } from "./file-snapshot.js";
+import { availabilityFromError, fileCategoryAccent, fileMetaLine, filePreviewKind, filePreviewMemoKey, filePreviewScope, fileTypeLabel, formatFileSize, isFileSnapshotFresh, mergeFileSnapshot } from "./file-preview.js";
+import { BOARD_THEME_IDS } from "./themes.js";
+import { BOARD_COLORS, DEFAULT_BOARD_COLOR, boardColorCssVar, buildFallbackShapeColors, isBoardColorId, pickBoardColor, resolveBoardColor, resolveItemColor } from "./palette.js";
 import { SHAPE_KINDS, isShapeKind } from "./shape-types.js";
+import { BOARD_FRAME_LABEL_LINE_HEIGHT, BOARD_FRAME_LABEL_SIZE, SHAPE_LABEL_PADDING, TEXT_FONT_FAMILY, TEXT_FONT_SIZE, TEXT_LINE_HEIGHT, TEXT_MAX_FONT_SIZE, TEXT_MIN_FONT_SIZE, boardEditableText, boardFontFamily, frameLabelHitRect, frameLabelOffset, layoutShapeLabel } from "./text-metrics.js";
 import { DEFAULT_BOARD_TOOL_STYLES, createBoardToolStyles } from "./tool-styles.js";
 import { clientToLocal, elementClientToLocal } from "./client-geometry.js";
 import { boardMediaTarget, probeBoardMediaSize, settleBoardMediaSizes } from "./media-sizes.js";

package/dist/board/model/items/create.js

@@ -3,10 +3,10 @@ import { BoardMediaOriginSchema, parseBoardItem } from "../../../protocol/dist/b
 import { featuredTaskArtifact } from "../../../protocol/dist/board-task.js";
 import { fitBoardMediaSize, pointsRect } from "../../../protocol/dist/board-layout.js";
 import "../geometry.js";
+import { quantizeDrawCoordinate } from "../draw-input.js";
 import { boardModelFormat, getMediaResourceTitle, inferBoardMediaKind } from "../media.js";
 import { fileStem } from "../file-snapshot.js";
 import { filePreviewKind } from "../file-preview.js";
-import { quantizeDrawCoordinate } from "../draw-input.js";
 import { DEFAULT_BOARD_TOOL_STYLES } from "../tool-styles.js";
 import { createBoardItemId } from "./id.js";
 //#region src/board/model/items/create.ts

package/dist/board/model/sampling.js

@@ -1,7 +1,7 @@
 import { arrowBindings } from "../../protocol/dist/board-layout.js";
+import { cameraForFocus, cameraForState } from "./geometry.js";
 import { applyBoardEvaluation, boardAnimationTime, compileBoardAnimations, evaluateBoardAnimations } from "./animation.js";
 import { buildBoardScene } from "./scene.js";
-import { cameraForFocus, cameraForState } from "./geometry.js";
 //#region src/board/model/sampling.ts
 function createBoardAnimationSampler(document, animation, options = {}) {
 	const selected = animation ? document.animations[animation] : void 0;

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

@@ -258,12 +258,12 @@ declare const BOARD_THEME_DATA: {
     readonly colorScheme: "dark";
     readonly palette: {
       readonly bg: 329221;
-      readonly surface: 2039072;
-      readonly hover: 1842202;
+      readonly surface: 1249814;
+      readonly hover: 1973788;
       readonly border: 1842202;
       readonly brand: 3900150;
-      readonly text: 15920612;
-      readonly muted: 9999759;
+      readonly text: 16314853;
+      readonly muted: 7630695;
       readonly rare: 9235170;
       readonly epic: 7266776;
       readonly legendary: 15449187;
@@ -272,47 +272,47 @@ declare const BOARD_THEME_DATA: {
       readonly brand: {
         readonly stroke: 15524306;
         readonly fill: 15524306;
-        readonly label: 15920612;
+        readonly label: 16314853;
       };
       readonly neutral: {
-        readonly stroke: 15920612;
-        readonly fill: 15920612;
-        readonly label: 15920612;
+        readonly stroke: 15524306;
+        readonly fill: 15524306;
+        readonly label: 16314853;
       };
       readonly black: {
         readonly stroke: 0;
         readonly fill: 0;
-        readonly label: 15920612;
+        readonly label: 16314853;
       };
       readonly white: {
         readonly stroke: 16777215;
         readonly fill: 16777215;
-        readonly label: 15920612;
+        readonly label: 16314853;
       };
       readonly blue: {
         readonly stroke: 9235170;
         readonly fill: 9235170;
-        readonly label: 15920612;
+        readonly label: 16314853;
       };
       readonly green: {
         readonly stroke: 8177036;
         readonly fill: 8177036;
-        readonly label: 15920612;
+        readonly label: 16314853;
       };
       readonly amber: {
         readonly stroke: 15449187;
         readonly fill: 15449187;
-        readonly label: 15920612;
+        readonly label: 16314853;
       };
       readonly violet: {
         readonly stroke: 11971327;
         readonly fill: 11971327;
-        readonly label: 15920612;
+        readonly label: 16314853;
       };
       readonly rose: {
         readonly stroke: 15562341;
         readonly fill: 15562341;
-        readonly label: 15920612;
+        readonly label: 16314853;
       };
     };
     readonly style: {
@@ -327,8 +327,8 @@ declare const BOARD_THEME_DATA: {
     readonly palette: {
       readonly bg: 16185078;
       readonly surface: 16777215;
-      readonly hover: 15461355;
-      readonly border: 14935011;
+      readonly hover: 16185078;
+      readonly border: 15527149;
       readonly brand: 1824230;
       readonly text: 1447704;
       readonly muted: 7566452;
@@ -409,13 +409,13 @@ declare const BOARD_THEME_DATA: {
   readonly "neta-pixel-dark": {
     readonly colorScheme: "dark";
     readonly palette: {
-      readonly bg: 1447704;
-      readonly surface: 2631979;
-      readonly hover: 3224115;
-      readonly border: 3618875;
+      readonly bg: 1118739;
+      readonly surface: 1842463;
+      readonly hover: 2237220;
+      readonly border: 2763565;
       readonly brand: 1824230;
-      readonly text: 15921907;
-      readonly muted: 9408656;
+      readonly text: 16185078;
+      readonly muted: 9079436;
       readonly rare: 1824230;
       readonly epic: 1824230;
       readonly legendary: 16766287;
@@ -424,47 +424,47 @@ declare const BOARD_THEME_DATA: {
       readonly brand: {
         readonly stroke: 16185078;
         readonly fill: 16185078;
-        readonly label: 15921907;
+        readonly label: 16185078;
       };
       readonly neutral: {
-        readonly stroke: 9408656;
-        readonly fill: 9408656;
-        readonly label: 15921907;
+        readonly stroke: 9079436;
+        readonly fill: 9079436;
+        readonly label: 16185078;
       };
       readonly black: {
         readonly stroke: 0;
         readonly fill: 0;
-        readonly label: 15921907;
+        readonly label: 16185078;
       };
       readonly white: {
         readonly stroke: 16777215;
         readonly fill: 16777215;
-        readonly label: 15921907;
+        readonly label: 16185078;
       };
       readonly blue: {
         readonly stroke: 6010853;
         readonly fill: 6010853;
-        readonly label: 15921907;
+        readonly label: 16185078;
       };
       readonly green: {
         readonly stroke: 9683613;
         readonly fill: 9683613;
-        readonly label: 15921907;
+        readonly label: 16185078;
       };
       readonly amber: {
         readonly stroke: 14264410;
         readonly fill: 14264410;
-        readonly label: 15921907;
+        readonly label: 16185078;
       };
       readonly violet: {
         readonly stroke: 11441117;
         readonly fill: 11441117;
-        readonly label: 15921907;
+        readonly label: 16185078;
       };
       readonly rose: {
         readonly stroke: 15043210;
         readonly fill: 15043210;
-        readonly label: 15921907;
+        readonly label: 16185078;
       };
     };
     readonly style: {

package/dist/board/model/themes.js

@@ -265,12 +265,12 @@ const BOARD_THEME_DATA = {
 		colorScheme: "dark",
 		palette: {
 			bg: 329221,
-			surface: 2039072,
-			hover: 1842202,
+			surface: 1249814,
+			hover: 1973788,
 			border: 1842202,
 			brand: 3900150,
-			text: 15920612,
-			muted: 9999759,
+			text: 16314853,
+			muted: 7630695,
 			rare: 9235170,
 			epic: 7266776,
 			legendary: 15449187
@@ -279,47 +279,47 @@ const BOARD_THEME_DATA = {
 			brand: {
 				stroke: 15524306,
 				fill: 15524306,
-				label: 15920612
+				label: 16314853
 			},
 			neutral: {
-				stroke: 15920612,
-				fill: 15920612,
-				label: 15920612
+				stroke: 15524306,
+				fill: 15524306,
+				label: 16314853
 			},
 			black: {
 				stroke: 0,
 				fill: 0,
-				label: 15920612
+				label: 16314853
 			},
 			white: {
 				stroke: 16777215,
 				fill: 16777215,
-				label: 15920612
+				label: 16314853
 			},
 			blue: {
 				stroke: 9235170,
 				fill: 9235170,
-				label: 15920612
+				label: 16314853
 			},
 			green: {
 				stroke: 8177036,
 				fill: 8177036,
-				label: 15920612
+				label: 16314853
 			},
 			amber: {
 				stroke: 15449187,
 				fill: 15449187,
-				label: 15920612
+				label: 16314853
 			},
 			violet: {
 				stroke: 11971327,
 				fill: 11971327,
-				label: 15920612
+				label: 16314853
 			},
 			rose: {
 				stroke: 15562341,
 				fill: 15562341,
-				label: 15920612
+				label: 16314853
 			}
 		},
 		style: {
@@ -332,8 +332,8 @@ const BOARD_THEME_DATA = {
 		palette: {
 			bg: 16185078,
 			surface: 16777215,
-			hover: 15461355,
-			border: 14935011,
+			hover: 16185078,
+			border: 15527149,
 			brand: 1824230,
 			text: 1447704,
 			muted: 7566452,
@@ -414,13 +414,13 @@ const BOARD_THEME_DATA = {
 	"neta-pixel-dark": {
 		colorScheme: "dark",
 		palette: {
-			bg: 1447704,
-			surface: 2631979,
-			hover: 3224115,
-			border: 3618875,
+			bg: 1118739,
+			surface: 1842463,
+			hover: 2237220,
+			border: 2763565,
 			brand: 1824230,
-			text: 15921907,
-			muted: 9408656,
+			text: 16185078,
+			muted: 9079436,
 			rare: 1824230,
 			epic: 1824230,
 			legendary: 16766287
@@ -429,47 +429,47 @@ const BOARD_THEME_DATA = {
 			brand: {
 				stroke: 16185078,
 				fill: 16185078,
-				label: 15921907
+				label: 16185078
 			},
 			neutral: {
-				stroke: 9408656,
-				fill: 9408656,
-				label: 15921907
+				stroke: 9079436,
+				fill: 9079436,
+				label: 16185078
 			},
 			black: {
 				stroke: 0,
 				fill: 0,
-				label: 15921907
+				label: 16185078
 			},
 			white: {
 				stroke: 16777215,
 				fill: 16777215,
-				label: 15921907
+				label: 16185078
 			},
 			blue: {
 				stroke: 6010853,
 				fill: 6010853,
-				label: 15921907
+				label: 16185078
 			},
 			green: {
 				stroke: 9683613,
 				fill: 9683613,
-				label: 15921907
+				label: 16185078
 			},
 			amber: {
 				stroke: 14264410,
 				fill: 14264410,
-				label: 15921907
+				label: 16185078
 			},
 			violet: {
 				stroke: 11441117,
 				fill: 11441117,
-				label: 15921907
+				label: 16185078
 			},
 			rose: {
 				stroke: 15043210,
 				fill: 15043210,
-				label: 15921907
+				label: 16185078
 			}
 		},
 		style: {

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

@@ -1,7 +1,7 @@
 import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
 import { degToRad, rotatePointAround, worldPoint } from "../model/geometry.js";
-import { boardCardDetailed } from "./lod.js";
 import { isBoardModelItem } from "../model/media.js";
+import { boardCardDetailed } from "./lod.js";
 import { audioKeyCenter } from "./renderers/audio-card-renderer.js";
 import { modelKeyCenter } from "./renderers/model-card-renderer.js";
 //#region src/board/render/media-interaction.ts

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

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

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

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

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

@@ -1,8 +1,8 @@
 import { applyMatrix } from "../../../protocol/dist/board-layout.js";
+import { computeDrawBounds, createStrokeRibbonBuilder, trimDrawPoints } from "../../model/draw-geometry.js";
 import { itemAlpha, itemColor } from "../palette.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarStroke, farStrokeSamples } from "./far-plate.js";
-import { computeDrawBounds, createStrokeRibbonBuilder, trimDrawPoints } from "../../model/draw-geometry.js";
 import { Container, Graphics, Mesh, MeshGeometry, Texture } from "pixi.js";
 //#region src/board/render/renderers/draw-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();

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

@@ -1,5 +1,7 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../../protocol/dist/board-constants.js";
 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";
@@ -7,8 +9,6 @@ import { createCardTag, syncCardTag, zoomCardTag } from "../card-tag.js";
 import { cardElevation, containRect, drawCardSurface, traceCardOutline } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate, farPictureTone } from "./far-plate.js";
-import { fileCategory, fileStem } from "../../model/file-snapshot.js";
-import { fileCategoryAccent, fileMetaLine, filePreviewKind, fileTypeLabel } from "../../model/file-preview.js";
 import { Container, Graphics, Sprite, Text, Texture } from "pixi.js";
 //#region src/board/render/renderers/file-card-renderer.ts
 const PADDING = 10;

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

@@ -1,6 +1,6 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { itemAlpha, itemColor } from "../palette.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 { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";
 import { createLabel, positionShell } from "./base-card-renderer.js";

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

@@ -1,12 +1,12 @@
+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 { isBoardModelItem } from "../../model/media.js";
 import { cardElevation, containRect, drawCardSurface } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate, farPictureTone } from "./far-plate.js";
 import { drawModelKey } from "./media-key.js";
-import { fileStem } from "../../model/file-snapshot.js";
-import { fileMetaLine } from "../../model/file-preview.js";
 import { Container, Graphics, Sprite, Texture } from "pixi.js";
 //#region src/board/render/renderers/model-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();

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

@@ -1,6 +1,6 @@
 import { worldPoint } from "../../model/geometry.js";
-import { itemAlpha, itemColor } from "../palette.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 { dashPattern, roundRectPoints, tracePolyline, trimPolyline } from "../stroke.js";

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

@@ -1,6 +1,6 @@
+import { getMediaResourceTitle } from "../../model/media.js";
 import { boardCardDetailed } from "../lod.js";
 import { createCardTag, formatBoardDuration, syncCardTag, zoomCardTag } from "../card-tag.js";
-import { getMediaResourceTitle } from "../../model/media.js";
 import { cardElevation, containRect, drawCardSurface, fillCardPicture } from "../surface.js";
 import { positionShell } from "./base-card-renderer.js";
 import { drawFarPlate, farPictureTone } from "./far-plate.js";

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

@@ -1,5 +1,5 @@
-import { buildBoardScene } from "../model/scene.js";
 import { composeBoardScriptItems } from "../model/script-scene.js";
+import { buildBoardScene } from "../model/scene.js";
 import { createBoardScriptHost } from "./script-host.js";
 //#region src/board/render/script-export.ts
 async function prepareBrowserBoardScripts(document, time, readModule, snapshots) {

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

@@ -1,9 +1,9 @@
-import { getBoardResolution } from "./text-resolution.js";
-import { BoardScriptTexture } from "./script-texture.js";
-import { scriptResolution } from "./script-resolution.js";
 import { boardScriptItems } from "../model/script-index.js";
 import { boardScriptScope } from "../model/script-scene.js";
 import { boardScriptHitVisible, resolveBoardScriptHit } from "../model/script-hit.js";
+import { getBoardResolution } from "./text-resolution.js";
+import { BoardScriptTexture } from "./script-texture.js";
+import { scriptResolution } from "./script-resolution.js";
 import { createBoardScriptModuleReader, loadBoardScriptSources } from "../../protocol/dist/board-script-modules.js";
 import { boardScriptFrameSource } from "./script-sandbox.js";
 //#region src/board/render/script-host.ts

package/dist/board/replica/index.js

@@ -233,6 +233,17 @@ function createBoardReplica(options) {
 	function onOnline() {
 		if (pending.length || readError || writeError) retry();
 	}
+	async function restore() {
+		const [cached, stored] = await Promise.all([storage.readDocument().catch(() => null), storage.listPending().catch(() => [])]);
+		if (disposed) return;
+		const known = new Set(stored.map((entry) => entry.mutationId));
+		pending = [...stored, ...pending.filter((entry) => !known.has(entry.mutationId))];
+		restored = true;
+		const parsed = cached && !server ? parseBoardDocument(cached.document) : null;
+		if (cached && parsed?.ok) adoptServer(parsed.document, cached.version, false);
+		else recompute();
+		emit();
+	}
 	function receivePlayback(next) {
 		playbackRevision += 1;
 		playback = next;
@@ -249,16 +260,7 @@ function createBoardReplica(options) {
 		async start() {
 			unsubscribeRemote ??= subscribeRemote();
 			globalThis.addEventListener?.("online", onOnline);
-			const [cached, stored] = await Promise.all([storage.readDocument().catch(() => null), storage.listPending().catch(() => [])]);
-			if (disposed) return;
-			const known = new Set(stored.map((entry) => entry.mutationId));
-			pending = [...stored, ...pending.filter((entry) => !known.has(entry.mutationId))];
-			restored = true;
-			const parsed = cached && !server ? parseBoardDocument(cached.document) : null;
-			if (cached && parsed?.ok) adoptServer(parsed.document, cached.version, false);
-			else recompute();
-			emit();
-			await refresh();
+			await Promise.all([restore(), refresh()]);
 			await flush();
 		},
 		apply(patch) {

package/dist/board/stage/assets.js

@@ -1,8 +1,8 @@
 import { probeMediaInfo } from "../../protocol/dist/core/media.js";
 import { MEDIA_VARIANT_SIZES, imageVariantUrl, variantSource } from "../../media.js";
 import { boardModelFormat } from "../model/media.js";
-import { loadVideoThumbnailTexture, videoTextureNaturalSize } from "../render/video-thumbnail.js";
 import { boardAssetKey, boardAssetKeySource, boardAssetRefKey } from "../model/asset-key.js";
+import { loadVideoThumbnailTexture, videoTextureNaturalSize } from "../render/video-thumbnail.js";
 import { planLruTrim } from "./lru.js";
 import { defaultBoardDeviceBudget } from "./device.js";
 import { scheduleBoardIdle } from "./idle.js";

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

@@ -35,6 +35,8 @@ type BoardStageOptions = {
   source: BoardAssetSource;
   renderers?: BoardCardRendererResolver;
   views?: readonly BoardItemView[];
+  /** `below` needs a theme with `imageBackground`; views there get no input. */
+  viewLayer?: "above" | "below";
   theme?: () => BoardStageTheme;
   labels?: () => BoardRenderLabels;
   taskRun?: (taskRunId: string) => {
@@ -56,6 +58,8 @@ type BoardStageOptions = {
   onLongPress?: (item: BoardSceneItem, press: BoardStagePress) => void;
   /** A press on a card key (`BoardCardRenderer.hitAt`); return false to leave it to the editor. */
   onHit?: (item: BoardSceneItem, action: string, press: BoardStagePress) => boolean | undefined;
+  /** Card keys `onHit` acts on; others go to the editor. */
+  handlesHit?: (item: BoardSceneItem, action: string) => boolean;
   onDoubleClick?: (item: BoardSceneItem | null, point: WorldPoint) => boolean | undefined;
   onSurfaceChange?: (size: {
     width: number;

package/dist/board/stage/stage.js

@@ -1,25 +1,25 @@
 import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
 import { applyMatrix, invertMatrix } from "../../protocol/dist/board-layout.js";
 import { itemBounds, pointToWorld, rectsIntersect, screenPoint, stableCullRect, visibleWorldRect, worldPoint } from "../model/geometry.js";
+import { boardScriptScope, composeBoardScriptItems, prepareBoardScriptOutput, validateBoardScriptCommit } from "../model/script-scene.js";
+import { boardScriptTarget } from "../model/script-hit.js";
 import { createBoardAnimationSampler, resolveBoardAnimationCamera } from "../model/sampling.js";
+import { resolveSceneArrow } from "../model/arrow-geometry.js";
+import { boardTextureEdge } from "../model/asset-key.js";
 import { pickBoardColor, resolveItemColor } from "../model/palette.js";
+import { elementClientToLocal } from "../model/client-geometry.js";
+import { isCreationBoardTool } from "../editor/tool.js";
+import { resizeCursorForHandle } from "../editor/selection-transform.js";
 import { parseBoardCssColor } from "../render/css-color.js";
 import { itemAlpha } from "../render/palette.js";
-import { resolveSceneArrow } from "../model/arrow-geometry.js";
 import { onBoardTextFontsChange } from "../render/text-measurement.js";
 import { boardLodRatio, boardLodSize } from "../render/lod.js";
 import { createBoardBackground, updateBoardBackground } from "../render/board-background.js";
 import { getBoardResolution } from "../render/text-resolution.js";
 import { DEFAULT_BOARD_RENDER_LABELS, getBoardCardRenderer } from "../render/renderers/board-renderer-registry.js";
-import { boardScriptScope, composeBoardScriptItems, prepareBoardScriptOutput, validateBoardScriptCommit } from "../model/script-scene.js";
-import { boardScriptTarget } from "../model/script-hit.js";
 import { createBoardScriptHost } from "../render/script-host.js";
 import { defaultBoardRenderStyle } from "../render/style.js";
 import { boardRenderTheme } from "../render/theme.js";
-import { boardTextureEdge } from "../model/asset-key.js";
-import { elementClientToLocal } from "../model/client-geometry.js";
-import { isCreationBoardTool } from "../editor/tool.js";
-import { resizeCursorForHandle } from "../editor/selection-transform.js";
 import { createBoardPlayer } from "../player/index.js";
 import { createBoardScriptObservers } from "../model/script-observers.js";
 import { defaultBoardDeviceBudget } from "./device.js";
@@ -155,7 +155,7 @@ function mountBoardStage(host, options) {
 		if (item) options.onLongPress?.(item, press);
 	});
 	const renderCamera = () => playbackCamera ?? editor.camera;
-	const views = createBoardItemViewLayer(host, editor, options.views ?? [], renderCamera, scheduleTick);
+	const views = createBoardItemViewLayer(host, editor, options.views ?? [], renderCamera, scheduleTick, options.viewLayer);
 	const player = createBoardPlayer({ resolveColor: (color) => {
 		const current = theme();
 		return {
@@ -512,7 +512,8 @@ function mountBoardStage(host, options) {
 	}
 	function hitAt(item, point) {
 		if (!lastContext || !scene?.getNode(item.id)) return null;
-		return resolveRenderer(item, lastContext).hitAt?.(item, point, lastContext) ?? null;
+		const hit = resolveRenderer(item, lastContext).hitAt?.(item, point, lastContext);
+		return hit && (options.handlesHit?.(item, hit.action) ?? true) ? hit : null;
 	}
 	function hoverHit(input) {
 		if (!options.onHit) return;

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

@@ -38,6 +38,6 @@ type BoardItemViewLayer = {
   }): void;
   destroy(): void;
 };
-declare function createBoardItemViewLayer(host: HTMLElement, editor: BoardEditor, views: readonly BoardItemView[], camera: () => BoardViewport, onInvalidate?: () => void): BoardItemViewLayer;
+declare function createBoardItemViewLayer(host: HTMLElement, editor: BoardEditor, views: readonly BoardItemView[], camera: () => BoardViewport, onInvalidate?: () => void, layer?: "above" | "below"): BoardItemViewLayer;
 //#endregion
 export { BoardItemView, BoardItemViewContext, BoardItemViewInstance, BoardItemViewLayer, createBoardItemViewLayer };

package/dist/board/stage/views.js

@@ -18,10 +18,10 @@ function onScreen(frame, camera, surface) {
 	const top = bounds.y * camera.zoom + camera.y;
 	return left + bounds.width * camera.zoom >= -240 && top + bounds.height * camera.zoom >= -240 && left <= surface.width + VISIBLE_MARGIN && top <= surface.height + VISIBLE_MARGIN;
 }
-function createBoardItemViewLayer(host, editor, views, camera, onInvalidate = () => {}) {
+function createBoardItemViewLayer(host, editor, views, camera, onInvalidate = () => {}, layer = "above") {
 	const element = host.ownerDocument.createElement("div");
 	element.dataset.boardViews = "";
-	element.style.cssText = "position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none";
+	element.style.cssText = `position:absolute;inset:0;z-index:${layer === "below" ? 0 : 2};overflow:hidden;pointer-events:none`;
 	host.appendChild(element);
 	const world = host.ownerDocument.createElement("div");
 	world.style.cssText = "position:absolute;inset:0;transform-origin:0 0;pointer-events:none";

package/dist/protocol/dist/board-patch.js

@@ -1,6 +1,6 @@
 import { BOARD_CAMERA_TARGET, BoardAnimationHeaderSchema, BoardColorSchema, BoardPatchSchema, BoardSettingsSchema, BoardTrackSchema, BoardVec2Schema, boardItemSchema, isBuiltinItemType, parseBoardItem } from "./board-model.js";
-import { boardJsonEquals } from "./board-json.js";
 import { applyMatrix, arrowBindings, createBoardLayout, invertMatrix, isArrowBinding } from "./board-layout.js";
+import { boardJsonEquals } from "./board-json.js";
 import { z } from "zod";
 //#region ../protocol/dist/board-patch.js
 function slot(map, key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neta-art/cohub",
-  "version": "12.3.0",
+  "version": "12.4.0",
   "description": "Cohub SDK for spaces, sessions, boards, and realtime agent collaboration.",
   "license": "Apache-2.0",
   "private": false,