@neta-art/cohub 12.2.0 → 12.4.0

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: 888041,
-			text: 15920612,
-			muted: 9999759,
+			brand: 3900150,
+			text: 16314853,
+			muted: 7630695,
 			rare: 9235170,
 			epic: 7266776,
 			legendary: 15449187
@@ -279,58 +279,61 @@ 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: {}
+		style: {
+			selection: { outset: 0 },
+			frameLabelSize: 16
+		}
 	},
 	"neta-pixel": {
 		colorScheme: "light",
 		palette: {
 			bg: 16185078,
 			surface: 16777215,
-			hover: 15461355,
-			border: 14935011,
+			hover: 16185078,
+			border: 15527149,
 			brand: 1824230,
 			text: 1447704,
 			muted: 7566452,
@@ -394,9 +397,9 @@ const BOARD_THEME_DATA = {
 				y: 0
 			},
 			selection: {
-				width: 2,
-				outset: 8,
-				dash: 4,
+				width: 1.5,
+				outset: 0,
+				dash: 0,
 				handle: "square",
 				handleSize: 8
 			},
@@ -404,19 +407,20 @@ const BOARD_THEME_DATA = {
 			progress: "mosaic",
 			icons: "pixel",
 			motion: "stepped",
-			font: "\"Figtree Variable\", \"PingFang SC\", \"Noto Sans CJK SC\", \"Microsoft YaHei\", system-ui, sans-serif"
+			font: "\"Figtree Variable\", \"PingFang SC\", \"Noto Sans CJK SC\", \"Microsoft YaHei\", system-ui, sans-serif",
+			frameLabelSize: 16
 		}
 	},
 	"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
@@ -425,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: {
@@ -477,9 +481,9 @@ const BOARD_THEME_DATA = {
 				y: 0
 			},
 			selection: {
-				width: 2,
-				outset: 8,
-				dash: 4,
+				width: 1.5,
+				outset: 0,
+				dash: 0,
 				handle: "square",
 				handleSize: 8
 			},
@@ -487,7 +491,8 @@ const BOARD_THEME_DATA = {
 			progress: "mosaic",
 			icons: "pixel",
 			motion: "stepped",
-			font: "\"Figtree Variable\", \"PingFang SC\", \"Noto Sans CJK SC\", \"Microsoft YaHei\", system-ui, sans-serif"
+			font: "\"Figtree Variable\", \"PingFang SC\", \"Noto Sans CJK SC\", \"Microsoft YaHei\", system-ui, sans-serif",
+			frameLabelSize: 16
 		}
 	}
 };

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

@@ -1,13 +1,13 @@
 import { BoardRenderStyle, BoardRenderStyleInput, BoardSelectionStyle, BoardShadowStyle, defaultBoardRenderStyle, resolveBoardRenderStyle } from "./style.js";
-import { BOARD_LOD_HYSTERESIS, BoardLod, BoardLodKind, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLongEdge, boardTextSize } from "./lod.js";
-import { BoardCardRenderer, BoardCardRendererResolver, BoardRenderContext, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer } from "./renderers/board-renderer-registry.js";
+import { BOARD_LOD_HYSTERESIS, BoardLod, BoardLodKind, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardTextSize } from "./lod.js";
+import { BoardCardHit, BoardCardRenderer, BoardCardRendererResolver, BoardRenderContext, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer } from "./renderers/board-renderer-registry.js";
 import { createBoardRenderSampler } from "./sampling.js";
 import { BoardRenderDiagnostic, inspectBoardItems, inspectBoardScene, measureBoardText } from "./diagnostics.js";
 import { BoardBackgroundContext, createBoardBackground, updateBoardBackground } from "./board-background.js";
 import { CARD_TAG_SIZE, CardGlyph, CardTag, createCardTag, drawCardGlyph, formatBoardDuration, syncCardTag, traceCube, zoomCardTag } from "./card-tag.js";
 import { ClipGroup, clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline } from "./clip.js";
 import { BoardCssPaint, parseBoardCssColor, parseBoardCssPaint } from "./css-color.js";
-import { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter } from "./media-interaction.js";
+import { BOARD_PLAY_MEDIA, BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayHit, mediaPlayKeyCenter } from "./media-interaction.js";
 import { defaultBoardPalette, itemAlpha, itemColor } from "./palette.js";
 import { BoardScriptHostOptions, BrowserBoardScriptHost, createBoardScriptHost } from "./script-host.js";
 import { prepareBrowserBoardScripts } from "./script-export.js";
@@ -15,8 +15,10 @@ import { dashPattern, endAngle, roundRectPoints, traceArrowhead, tracePolyline,
 import { CardCrop, CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, fillCardPicture, isBoardCard, traceCardOutline, tracePixelRect } from "./surface.js";
 import { BoardRenderTheme, boardRenderTheme } from "./theme.js";
 import { BOARD_EFFECT_MAX_PARTICLES } from "./renderers/effect-card-renderer.js";
-import { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth } from "./text-fit.js";
-import { BOARD_FONT_STACKS, BoardTextStyle, boardTextStyle, canvasFont, canvasFontFamily, cssBaselineShift, ensureBoardTextMeasurement, installBoardTextMeasurement, layoutTextLines, onBoardTextFontsChange } from "./text-measurement.js";
+import { FarPlateStyle, drawFarBars, drawFarPlate, farPictureTone } from "./renderers/far-plate.js";
+import { BOARD_FONT_STACKS, BoardTextLineLayout, BoardTextLineOptions, BoardTextStyle, BoardTextWhiteSpace, boardTextStyle, canvasFont, canvasFontFamily, cssBaselineShift, ensureBoardTextMeasurement, fitLineWithEllipsis, installBoardTextMeasurement, layoutTextLines, measureTextWidth, onBoardTextFontsChange } from "./text-measurement.js";
+import { BoardTextEditInput, BoardTextEditLayout, boardTextEditLayout } from "./text-edit.js";
+import { fitTextToLines, fitTextToWidth } from "./text-fit.js";
 import { boardTextResolution, getBoardResolution, syncTextResolution, textZoomBucket } from "./text-resolution.js";
 import { VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, loadVideoThumbnailTexture, videoTextureNaturalSize, videoThumbnailSize } from "./video-thumbnail.js";
-export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BOARD_LOD_HYSTERESIS, BoardBackgroundContext, BoardCardRenderer, BoardCardRendererResolver, BoardCssPaint, BoardLod, BoardLodKind, BoardMediaAction, BoardRenderContext, BoardRenderDiagnostic, BoardRenderLabels, BoardRenderPalette, BoardRenderStyle, BoardRenderStyleInput, BoardRenderTheme, BoardScriptHost, BoardScriptHostOptions, BoardSelectionStyle, BoardShadowStyle, BoardTextStyle, BrowserBoardScriptHost, CARD_TAG_SIZE, COMPACT_BOARD_LOD, CardCrop, CardElevation, CardGlyph, CardRect, CardSurface, CardTag, ClipGroup, DEFAULT_BOARD_LOD, DEFAULT_BOARD_RENDER_LABELS, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardCardDetailed, boardLongEdge, boardMediaActionAt, boardRenderTheme, boardTextResolution, boardTextSize, boardTextStyle, canvasFont, canvasFontFamily, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, cssBaselineShift, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, ellipsizeWrappedLines, endAngle, ensureBoardTextMeasurement, fillCardPicture, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardItems, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, layoutTextLines, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter, onBoardTextFontsChange, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, textZoomBucket, traceArrowhead, traceCardOutline, traceCube, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BOARD_LOD_HYSTERESIS, BOARD_PLAY_MEDIA, BoardBackgroundContext, BoardCardHit, BoardCardRenderer, BoardCardRendererResolver, BoardCssPaint, BoardLod, BoardLodKind, BoardMediaAction, BoardRenderContext, BoardRenderDiagnostic, BoardRenderLabels, BoardRenderPalette, BoardRenderStyle, BoardRenderStyleInput, BoardRenderTheme, BoardScriptHost, BoardScriptHostOptions, BoardSelectionStyle, BoardShadowStyle, BoardTextEditInput, BoardTextEditLayout, BoardTextLineLayout, BoardTextLineOptions, BoardTextStyle, BoardTextWhiteSpace, BrowserBoardScriptHost, CARD_TAG_SIZE, COMPACT_BOARD_LOD, CardCrop, CardElevation, CardGlyph, CardRect, CardSurface, CardTag, ClipGroup, DEFAULT_BOARD_LOD, DEFAULT_BOARD_RENDER_LABELS, type FarPlateStyle, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardMediaActionAt, boardRenderTheme, boardTextEditLayout, boardTextResolution, boardTextSize, boardTextStyle, canvasFont, canvasFontFamily, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, cssBaselineShift, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, drawFarBars, drawFarPlate, endAngle, ensureBoardTextMeasurement, farPictureTone, fillCardPicture, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardItems, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, layoutTextLines, loadVideoThumbnailTexture, measureBoardText, measureTextWidth, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayHit, mediaPlayKeyCenter, onBoardTextFontsChange, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, textZoomBucket, traceArrowhead, traceCardOutline, traceCube, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };

package/dist/board/render/index.js

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

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

@@ -0,0 +1,15 @@
+import { BoardArrowItem } from "../../protocol/dist/board-model.js";
+import "../../protocol/dist/index.js";
+import { WorldPoint } from "../model/geometry.js";
+import { ResolvedArrow } from "../model/arrow-geometry.js";
+//#region src/board/render/labels.d.ts
+declare const FRAME_LABEL_WEIGHT = "600";
+declare const ARROW_LABEL: {
+  readonly fontWeight: "500";
+  readonly lineHeight: 1.25;
+  readonly padX: 0.5;
+  readonly padY: 0.25;
+};
+declare function arrowLabelAnchor(arrow: ResolvedArrow, style: BoardArrowItem["style"]): WorldPoint;
+//#endregion
+export { ARROW_LABEL, FRAME_LABEL_WEIGHT, arrowLabelAnchor };

package/dist/board/render/labels.js

@@ -0,0 +1,14 @@
+import { pathPointAt } from "../model/arrow-geometry.js";
+//#region src/board/render/labels.ts
+const FRAME_LABEL_WEIGHT = "600";
+const ARROW_LABEL = {
+	fontWeight: "500",
+	lineHeight: 1.25,
+	padX: .5,
+	padY: .25
+};
+function arrowLabelAnchor(arrow, style) {
+	return style.trim === void 0 ? arrow.mid : pathPointAt(arrow.path, .5);
+}
+//#endregion
+export { ARROW_LABEL, FRAME_LABEL_WEIGHT, arrowLabelAnchor };

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

@@ -17,6 +17,14 @@ declare const COMPACT_BOARD_LOD: BoardLod;
 declare const BOARD_LOD_HYSTERESIS = 0.8;
 declare function boardCardDetailed(zoom: number): boolean;
 declare function boardLongEdge(item: BoardSceneItem): number;
+type BoardLodRenderer = {
+  lod?: {
+    kind: BoardLodKind;
+    size?: (item: BoardSceneItem) => number;
+  };
+};
+declare function boardLodSize(renderer: BoardLodRenderer, item: BoardSceneItem): number;
+declare function boardLodRatio(renderer: BoardLodRenderer, size: number, zoom: number, lod: BoardLod): number;
 declare function boardTextSize(item: BoardSceneItem): number;
 //#endregion
-export { BOARD_LOD_HYSTERESIS, BoardLod, BoardLodKind, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLongEdge, boardTextSize };
+export { BOARD_LOD_HYSTERESIS, BoardLod, BoardLodKind, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardTextSize };

package/dist/board/render/lod.js

@@ -18,10 +18,16 @@ function boardCardDetailed(zoom) {
 function boardLongEdge(item) {
 	return Math.max(item.frame.width, item.frame.height);
 }
+function boardLodSize(renderer, item) {
+	return renderer.lod?.size?.(item) ?? boardLongEdge(item);
+}
+function boardLodRatio(renderer, size, zoom, lod) {
+	return size * zoom / lod[renderer.lod?.kind ?? "card"];
+}
 function boardTextSize(item) {
 	if (item.type !== "text") return boardLongEdge(item);
 	const scale = item.frame.width / Math.max(1e-4, layoutBoardText(item.props).width);
 	return clampBoardFontSize(item.props.fontSize ?? 24) * scale;
 }
 //#endregion
-export { BOARD_LOD_HYSTERESIS, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLongEdge, boardTextSize };
+export { BOARD_LOD_HYSTERESIS, COMPACT_BOARD_LOD, DEFAULT_BOARD_LOD, boardCardDetailed, boardLodRatio, boardLodSize, boardLongEdge, boardTextSize };

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

@@ -1,8 +1,10 @@
 import { WorldPoint } from "../model/geometry.js";
 import { BoardSceneItem } from "../model/scene.js";
+import { BoardCardHit, BoardRenderContext } from "./renderers/board-renderer-registry.js";
 //#region src/board/render/media-interaction.d.ts
+declare const BOARD_PLAY_MEDIA = "play-media";
 type BoardMediaAction = {
-  action: "play-media";
+  action: typeof BOARD_PLAY_MEDIA;
   itemId: string;
 };
 declare function mediaPlayBadgeVisible(item: BoardSceneItem, zoom: number, options: {
@@ -15,5 +17,6 @@ declare function boardMediaActionAt(item: BoardSceneItem, point: WorldPoint, zoo
   materialized: boolean;
   hasVideoPreview: boolean;
 }): BoardMediaAction | null;
+declare function mediaPlayHit(item: BoardSceneItem, point: WorldPoint, context: BoardRenderContext): BoardCardHit | null;
 //#endregion
-export { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter };
+export { BOARD_PLAY_MEDIA, BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayHit, mediaPlayKeyCenter };

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

@@ -5,6 +5,7 @@ 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
+const BOARD_PLAY_MEDIA = "play-media";
 function mediaPlayBadgeVisible(item, zoom, options) {
 	if (!options.materialized) return false;
 	if (item.type === "video" || item.type === "audio") return true;
@@ -34,9 +35,20 @@ function mediaPlayBadgeHit(item, point, zoom) {
 }
 function boardMediaActionAt(item, point, zoom, options) {
 	return mediaPlayBadgeVisible(item, zoom, options) && mediaPlayBadgeHit(item, point, zoom) ? {
-		action: "play-media",
+		action: BOARD_PLAY_MEDIA,
 		itemId: item.id
 	} : null;
 }
+const PLAY_HIT = {
+	action: BOARD_PLAY_MEDIA,
+	cursor: "pointer"
+};
+function mediaPlayHit(item, point, context) {
+	const key = context.assetKey(item);
+	return boardMediaActionAt(item, point, context.zoom, {
+		materialized: true,
+		hasVideoPreview: Boolean(key && context.getTexture(key))
+	}) ? PLAY_HIT : null;
+}
 //#endregion
-export { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter };
+export { BOARD_PLAY_MEDIA, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayHit, mediaPlayKeyCenter };

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

@@ -1,10 +1,11 @@
 import { BOARD_FONT_STACK } from "../../../protocol/dist/board-constants.js";
-import { pathPointAt, resolveSceneArrow } from "../../model/arrow-geometry.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";
 import { drawFarStroke } from "./far-plate.js";
+import { ARROW_LABEL, arrowLabelAnchor } from "../labels.js";
 import { Container, Graphics, Text } from "pixi.js";
 //#region src/board/render/renderers/arrow-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
@@ -67,8 +68,9 @@ function sync(container, item, context) {
 		parts.label.text = props.label;
 		parts.label.style.fill = context.palette.text;
 		parts.label.style.fontSize = props.fontSize;
-		const padX = props.fontSize * .5;
-		const padY = props.fontSize * .25;
+		parts.label.style.lineHeight = props.fontSize * ARROW_LABEL.lineHeight;
+		const padX = props.fontSize * ARROW_LABEL.padX;
+		const padY = props.fontSize * ARROW_LABEL.padY;
 		const { width, height } = parts.label;
 		const plate = {
 			x: -width / 2 - padX,
@@ -88,7 +90,7 @@ function sync(container, item, context) {
 	const visible = props.label.length > 0 && (style.trim === void 0 || style.trim >= .5);
 	parts.label.visible = visible;
 	parts.backdrop.visible = visible;
-	const mid = style.trim === void 0 ? resolved.mid : pathPointAt(resolved.path, .5);
+	const mid = arrowLabelAnchor(resolved, style);
 	parts.label.position.set(mid.x, mid.y);
 	parts.backdrop.position.set(mid.x, mid.y);
 }
@@ -104,7 +106,7 @@ const arrowCardRenderer = {
 				fill: 16777215,
 				fontFamily: BOARD_FONT_STACK,
 				fontSize: 14,
-				fontWeight: "500"
+				fontWeight: ARROW_LABEL.fontWeight
 			},
 			resolution: context.textResolution,
 			roundPixels: true

package/dist/board/render/renderers/board-renderer-registry.d.ts

@@ -1,6 +1,7 @@
 import { BoardCustomItem, BoardDocument, BoardSettings, BoardTaskItem } from "../../../protocol/dist/board-model.js";
 import { BoardFrame } from "../../../protocol/dist/board-layout.js";
 import "../../../protocol/dist/index.js";
+import { WorldPoint } from "../../model/geometry.js";
 import { BoardScene, BoardSceneItem, SceneItem } from "../../model/scene.js";
 import { BoardShapeColors } from "../../model/palette.js";
 import { BoardRenderStyle } from "../style.js";
@@ -64,9 +65,18 @@ type BoardRenderContext = {
   assetKey: (item: BoardSceneItem) => string | null;
   getTexture: (key: string) => Texture | null;
   hasError: (key: string) => boolean;
+  assetTone?: (key: string) => number | null;
   fileState: (path: string) => "ok" | "missing" | "unavailable";
   acquireTexture: (key: string, item: BoardSceneItem) => void;
   releaseTexture: (key: string) => void;
+  hoveredHit?: {
+    itemId: string;
+    action: string;
+  } | null;
+};
+type BoardCardHit = {
+  action: string;
+  cursor?: string;
 };
 type BoardCardRenderer = {
   id: string;
@@ -89,6 +99,7 @@ type BoardCardRenderer = {
     kind: BoardLodKind;
     size?: (item: BoardSceneItem) => number;
   };
+  hitAt?: (item: BoardSceneItem, point: WorldPoint, context: BoardRenderContext) => BoardCardHit | null;
   renderFar?: (graphics: Graphics, item: BoardSceneItem, context: BoardRenderContext) => void;
   destroy?: (container: Container, context: BoardRenderContext) => void;
 };
@@ -101,4 +112,4 @@ declare function createBoardCardRendererResolver(renderers?: Iterable<BoardCardR
 /** The built-in renderers alone. */
 declare const getBoardCardRenderer: BoardCardRendererResolver;
 //#endregion
-export { BoardCardRenderer, BoardCardRendererResolver, BoardRenderContext, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer };
+export { BoardCardHit, BoardCardRenderer, BoardCardRendererResolver, BoardRenderContext, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, DEFAULT_BOARD_RENDER_LABELS, createBoardCardRendererResolver, getBoardCardRenderer };

package/dist/board/render/renderers/board-renderer-registry.js

@@ -1,6 +1,7 @@
 import { ensureBoardTextMeasurement } from "../text-measurement.js";
 import { audioCardRenderer } from "./audio-card-renderer.js";
 import { modelCardRenderer } from "./model-card-renderer.js";
+import { mediaPlayHit } from "../media-interaction.js";
 import { arrowCardRenderer } from "./arrow-card-renderer.js";
 import { drawCardRenderer } from "./draw-card-renderer.js";
 import { effectCardRenderer } from "./effect-card-renderer.js";
@@ -21,14 +22,18 @@ const DEFAULT_BOARD_RENDER_LABELS = {
 	previewUnavailable: "Preview unavailable",
 	noPreview: "No preview"
 };
+const playable = (renderer) => ({
+	...renderer,
+	hitAt: mediaPlayHit
+});
 const builtinCardRenderers = [
 	textCardRenderer,
 	imageCardRenderer,
-	videoCardRenderer,
-	audioCardRenderer,
-	modelCardRenderer,
+	playable(videoCardRenderer),
+	playable(audioCardRenderer),
+	playable(modelCardRenderer),
 	fileCardRenderer,
-	taskCardRenderer,
+	playable(taskCardRenderer),
 	shapeCardRenderer,
 	drawCardRenderer,
 	arrowCardRenderer,

package/dist/board/render/renderers/far-plate.d.ts

@@ -1,5 +1,7 @@
 import { BoardFrame } from "../../../protocol/dist/board-layout.js";
 import "../../../protocol/dist/index.js";
+import { BoardSceneItem } from "../../model/scene.js";
+import { BoardRenderContext } from "./board-renderer-registry.js";
 import { Graphics } from "pixi.js";
 //#region src/board/render/renderers/far-plate.d.ts
 type LocalRect = {
@@ -14,6 +16,7 @@ type FarPlateStyle = {
   accent?: number;
   accentAlpha?: number;
 };
+declare function farPictureTone(item: BoardSceneItem, context: BoardRenderContext): number | undefined;
 declare function drawFarPlate(graphics: Graphics, frame: BoardFrame, style: FarPlateStyle): void;
 declare function drawFarBars(graphics: Graphics, frame: BoardFrame, bars: readonly LocalRect[], style: {
   color: number;
@@ -29,4 +32,4 @@ declare function drawFarStroke(graphics: Graphics, points: ReadonlyArray<{
   alpha?: number;
 }): void;
 //#endregion
-export { FarPlateStyle, drawFarBars, drawFarPlate, drawFarStroke, farStrokeSamples };
+export { FarPlateStyle, drawFarBars, drawFarPlate, drawFarStroke, farPictureTone, farStrokeSamples };

package/dist/board/render/renderers/far-plate.js

@@ -32,6 +32,10 @@ function traceLocal(graphics, frame, rect) {
 	const d = corner(x, y + height);
 	graphics.moveTo(a.x, a.y).lineTo(b.x, b.y).lineTo(c.x, c.y).lineTo(d.x, d.y).closePath();
 }
+function farPictureTone(item, context) {
+	const key = context.assetKey(item);
+	return (key ? context.assetTone?.(key) : null) ?? void 0;
+}
 function drawFarPlate(graphics, frame, style) {
 	if (frame.width <= 0 || frame.height <= 0) return;
 	traceLocal(graphics, frame, {
@@ -89,4 +93,4 @@ function drawFarStroke(graphics, points, style) {
 	});
 }
 //#endregion
-export { drawFarBars, drawFarPlate, drawFarStroke, farStrokeSamples };
+export { drawFarBars, drawFarPlate, drawFarStroke, farPictureTone, farStrokeSamples };