@neta-art/cohub 11.1.0 → 11.2.0

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

@@ -40,6 +40,7 @@ type BoardEditorState = {
     width: number;
     height: number;
   };
+  controlOutset: number;
   cameraPolicy: BoardCameraPolicy;
   tool: BoardToolId;
   toolStyles: BoardToolStyleMap;

package/dist/board/editor/context.js

@@ -8,6 +8,7 @@ const STATE_CHANNELS = {
 	selection: "selection",
 	camera: "camera",
 	surfaceSize: "camera",
+	controlOutset: "selection",
 	cameraPolicy: "camera",
 	tool: "tool",
 	toolStyles: "tool",

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

@@ -126,6 +126,7 @@ declare function createBoardEditor(options: BoardEditorOptions): {
     width: number;
     height: number;
   };
+  controlOutset: number;
   loadDocument: (next: BoardDocument, key?: string) => void;
   undo: () => void;
   redo: () => void;

package/dist/board/editor/editor.js

@@ -53,6 +53,7 @@ function createBoardEditor(options) {
 			width: 0,
 			height: 0
 		},
+		controlOutset: 0,
 		cameraPolicy: preferences?.cameraPolicy ?? "follow",
 		tool: options.initialTool ?? "select",
 		toolStyles: preferences?.toolStyles ?? createBoardToolStyles(),
@@ -339,6 +340,12 @@ function createBoardEditor(options) {
 		set surfaceSize(value) {
 			state.surfaceSize = value;
 		},
+		get controlOutset() {
+			return read("selection", () => state.controlOutset);
+		},
+		set controlOutset(value) {
+			if (value !== state.controlOutset) state.controlOutset = value;
+		},
 		loadDocument: remote.loadDocument,
 		undo: document.undo,
 		redo: document.redo,

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

@@ -28,6 +28,10 @@ type BoardInteraction = {
   single: BoardFrame | null;
   bounds: Rect;
   origin: Map<string, BoardFrame>;
+  grab: {
+    x: number;
+    y: number;
+  };
   moved: boolean;
 } | {
   type: "rotating";

package/dist/board/editor/interaction.js

@@ -1,4 +1,4 @@
-import { clampZoom, normalizeRotation, panBy, rectCenter, rectsIntersect, resizeFrame, rotateFrames, scaleFrames, screenPoint, selectionBounds, worldPoint, zoomAround } from "../model/geometry.js";
+import { clampZoom, frameHandlePosition, normalizeRotation, panBy, rectCenter, rectsIntersect, resizeFrame, rotateFrames, scaleFrames, screenPoint, selectionBounds, worldPoint, zoomAround } from "../model/geometry.js";
 import { resolveSceneArrow } from "../model/arrow-geometry.js";
 import { appendBoardDrawSamples } from "../model/draw-input.js";
 import { createBoardItemId } from "../model/items/id.js";
@@ -51,8 +51,9 @@ function createInteractionModule(ctx) {
 		state.hoverPoint,
 		state.hoverPointerType,
 		state.camera.zoom,
-		ctx.selection.transform()
-	], (interaction, tool, hoverPoint, pointerType, zoom, transform) => interaction.type === "idle" && !pinch && tool === "select" && hoverPoint ? selectionTransformControlAt(transform, hoverPoint, zoom, pointerType) : null);
+		ctx.selection.transform(),
+		state.controlOutset
+	], (interaction, tool, hoverPoint, pointerType, zoom, transform, outset) => interaction.type === "idle" && !pinch && tool === "select" && hoverPoint ? selectionTransformControlAt(transform, hoverPoint, zoom, pointerType, outset) : null);
 	function gridSnapSize() {
 		const grid = state.base.board.grid;
 		return grid?.visible === true ? grid.size ?? 0 : 0;
@@ -244,7 +245,8 @@ function createInteractionModule(ctx) {
 			return;
 		}
 		const bounds = ctx.selection.bounds();
-		const control = selectionTransformControlAt(ctx.selection.transform(), event.world, camera.zoom, event.pointerType);
+		const transform = ctx.selection.transform();
+		const control = selectionTransformControlAt(transform, event.world, camera.zoom, event.pointerType, state.controlOutset);
 		if (control?.kind === "rotate" && bounds) {
 			const pivot = rectCenter(bounds);
 			state.interaction = {
@@ -257,15 +259,21 @@ function createInteractionModule(ctx) {
 			};
 			return;
 		}
-		if (control?.kind === "resize" && bounds) {
+		if (control?.kind === "resize" && bounds && transform) {
 			const origin = ctx.selection.framesFor(ctx.selection.movable());
 			const single = origin.size === 1 ? { ...[...origin.values()][0] } : null;
+			const edge = frameHandlePosition(transform.frame, control.handle);
+			const grab = {
+				x: edge.x - event.world.x,
+				y: edge.y - event.world.y
+			};
 			state.interaction = {
 				type: "resizing",
 				handle: control.handle,
 				single,
 				bounds,
 				origin,
+				grab,
 				moved: false
 			};
 			return;
@@ -349,13 +357,14 @@ function createInteractionModule(ctx) {
 			moved: true
 		};
 		const frames = /* @__PURE__ */ new Map();
+		const point = worldPoint(event.world.x + gesture.grab.x, event.world.y + gesture.grab.y);
 		if (gesture.single) {
 			const id = [...gesture.origin.keys()][0];
 			const item = state.scene.get(id);
 			const keepAspect = item ? registry.capabilities(item).aspectLocked || event.shiftKey : event.shiftKey;
-			frames.set(id, resizeFrame(gesture.single, gesture.handle, event.world, void 0, keepAspect));
+			frames.set(id, resizeFrame(gesture.single, gesture.handle, point, void 0, keepAspect));
 		} else {
-			const scaled = scaleFrames([...gesture.origin.values()], gesture.bounds, gesture.handle, event.world);
+			const scaled = scaleFrames([...gesture.origin.values()], gesture.bounds, gesture.handle, point);
 			[...gesture.origin.keys()].forEach((id, index) => {
 				const frame = scaled[index];
 				if (frame) frames.set(id, frame);

package/dist/board/editor/selection-transform.d.ts

@@ -19,6 +19,6 @@ type BoardSelectionTransform = {
   canRotate: boolean;
 };
 declare function resolveSelectionTransform(registry: BoardRegistry, items: BoardSceneItem[], bounds: Rect | null): BoardSelectionTransform | null;
-declare function selectionTransformControlAt(transform: BoardSelectionTransform | null, point: WorldPoint, zoom: number, pointerType: string): BoardTransformControl | null;
+declare function selectionTransformControlAt(selection: BoardSelectionTransform | null, point: WorldPoint, zoom: number, pointerType: string, outset?: number): BoardTransformControl | null;
 //#endregion
 export { BoardSelectionTransform, BoardTransformControl, resizeCursorForHandle, resolveSelectionTransform, selectionTransformControlAt };

package/dist/board/editor/selection-transform.js

@@ -51,10 +51,21 @@ function controlHitRadius(pointerType) {
 	if (pointerType === "pen") return 12;
 	return 8;
 }
-function selectionTransformControlAt(transform, point, zoom, pointerType) {
-	if (!transform) return null;
+function selectionTransformControlAt(selection, point, zoom, pointerType, outset = 0) {
+	if (!selection) return null;
 	const screenRadius = controlHitRadius(pointerType);
 	const radius = screenRadius / Math.max(zoom, 1e-4);
+	const grow = outset / Math.max(zoom, 1e-4);
+	const transform = grow > 0 ? {
+		...selection,
+		frame: {
+			...selection.frame,
+			x: selection.frame.x - grow,
+			y: selection.frame.y - grow,
+			width: selection.frame.width + grow * 2,
+			height: selection.frame.height + grow * 2
+		}
+	} : selection;
 	if (transform.resizeMode !== "none") for (const handle of CORNER_RESIZE_HANDLES) {
 		const position = frameHandlePosition(transform.frame, handle);
 		if (Math.hypot(position.x - point.x, position.y - point.y) <= radius) return {

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

@@ -6,6 +6,7 @@ import { BoardEvaluation } from "../model/animation.js";
 import { BoardAnimationSampler } from "../model/sampling.js";
 import { BoardExportPlan, BoardExportPlanInput, BoardExportRegion } from "../model/export-plan.js";
 import { BoardShapeColors } from "../model/palette.js";
+import { BoardRenderStyle } from "../render/style.js";
 import { BoardCardRendererResolver, BoardRenderPalette, BoardScriptHost } from "../render/renderers/board-renderer-registry.js";
 import "../render/index.js";
 import { BoardExportScene, BoardExportSceneInput, createBoardExportScene } from "./scene.js";
@@ -29,6 +30,7 @@ type BoardExportOptions = {
   background?: BoardExportBackground;
   palette?: Partial<BoardRenderPalette>;
   colors?: BoardShapeColors;
+  style?: Partial<BoardRenderStyle>;
   textures?: Map<string, Texture>;
   scripts?: BoardScriptHost;
   assetKey?: (item: BoardSceneItem) => string | null;

package/dist/board/export/index.js

@@ -76,6 +76,7 @@ function renderBoardExport(renderer, input, options = {}) {
 		colorScheme,
 		palette,
 		colors: options.colors,
+		style: options.style,
 		textures: options.textures,
 		scripts: options.scripts,
 		assetKey: options.assetKey,

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

@@ -3,6 +3,7 @@ import "../../protocol/dist/index.js";
 import { Rect } from "../model/geometry.js";
 import { BoardScene, BoardSceneItem } from "../model/scene.js";
 import { BoardShapeColors } from "../model/palette.js";
+import { BoardRenderStyle } from "../render/style.js";
 import { BoardCardRendererResolver, BoardRenderContext, BoardRenderPalette } from "../render/renderers/board-renderer-registry.js";
 import "../render/index.js";
 import { Container, Texture } from "pixi.js";
@@ -18,6 +19,7 @@ type BoardExportSceneInput = {
   colorScheme: "dark" | "light";
   palette?: Partial<BoardRenderPalette>;
   colors?: BoardShapeColors;
+  style?: Partial<BoardRenderStyle>;
   textures?: Map<string, Texture>;
   scripts?: BoardRenderContext["scripts"];
   assetKey?: (item: BoardSceneItem) => string | null;

package/dist/board/export/scene.js

@@ -3,6 +3,7 @@ import { imageAssetKey } from "../model/image-key.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 { Container, Graphics, Sprite, TilingSprite } from "pixi.js";
 //#region src/board/export/scene.ts
 function buildContext(input) {
@@ -17,12 +18,15 @@ function buildContext(input) {
 			selectedIds: /* @__PURE__ */ new Set(),
 			hoveredId: null,
 			resizingIds: /* @__PURE__ */ new Set(),
+			liftedIds: /* @__PURE__ */ new Set(),
 			palette: {
 				...defaultBoardPalette(input.colorScheme),
 				...input.palette
 			},
 			colors: input.colors ?? buildFallbackShapeColors(input.colorScheme),
 			colorScheme: input.colorScheme,
+			style: resolveBoardRenderStyle(input.colorScheme, input.style),
+			themeKey: "export",
 			rendererType: "canvas",
 			zoom: input.scale,
 			reducedMotion: true,

package/dist/board/model/file-preview.d.ts

@@ -7,7 +7,6 @@ type FilePreviewKind = "cover" | "text" | "blank";
  * sync with them.
  */
 declare function filePreviewKind(snapshot: BoardFileSnapshotFacts | undefined): FilePreviewKind;
-/** Short uppercase type label for a file card (`MD`, `JSON`, `FILE`). */
 declare function fileTypeLabel(path: string): string;
 /** Human-readable byte size. Kept as a public helper for custom card renderers. */
 declare function formatFileSize(bytes: number | undefined): string;

package/dist/board/model/file-preview.js

@@ -11,13 +11,22 @@ function filePreviewKind(snapshot) {
 	if (snapshot.excerpt) return "text";
 	return "blank";
 }
-/** Short uppercase type label for a file card (`MD`, `JSON`, `FILE`). */
 function fileTypeLabel(path) {
+	if (isWebPageUrl(path)) return "LINK";
 	const name = fileBaseName(path);
 	const dot = name.lastIndexOf(".");
 	if (dot <= 0) return (name.replace(/^\./, "") || "file").toUpperCase();
 	return name.slice(dot + 1).toUpperCase();
 }
+function isWebPageUrl(path) {
+	if (!/^https?:\/\//i.test(path)) return false;
+	try {
+		const last = new URL(path).pathname.split("/").filter(Boolean).pop() ?? "";
+		return !/\.[a-z\d]{1,8}$/i.test(last);
+	} catch {
+		return false;
+	}
+}
 /** Human-readable byte size. Kept as a public helper for custom card renderers. */
 function formatFileSize(bytes) {
 	if (bytes === void 0 || !Number.isFinite(bytes) || bytes < 0) return "";

package/dist/board/render/audio-waveform.d.ts

@@ -7,6 +7,6 @@ declare function drawAudioWaveform(graphics: Graphics, seed: string, rect: {
   y: number;
   width: number;
   height: number;
-}, color: number, alpha?: number): void;
+}, color: number, alpha?: number, square?: boolean): void;
 //#endregion
 export { audioWaveformBars, drawAudioWaveform };

package/dist/board/render/audio-waveform.js

@@ -17,7 +17,7 @@ function audioWaveformBars(seed, count) {
 	}
 	return bars;
 }
-function drawAudioWaveform(graphics, seed, rect, color, alpha = .72) {
+function drawAudioWaveform(graphics, seed, rect, color, alpha = .72, square = false) {
 	const count = Math.max(8, Math.min(DEFAULT_BARS, Math.floor(rect.width / 4)));
 	const step = rect.width / count;
 	const barWidth = Math.max(1.5, step - BAR_GAP);
@@ -26,11 +26,14 @@ function drawAudioWaveform(graphics, seed, rect, color, alpha = .72) {
 	const bars = audioWaveformBars(seed, count);
 	for (let index = 0; index < count; index += 1) {
 		const height = Math.max(2, (bars[index] ?? .4) * maxHeight);
-		graphics.roundRect(rect.x + index * step, centerY - height / 2, barWidth, height, barWidth / 2).fill({
-			color,
-			alpha
-		});
+		const x = rect.x + index * step;
+		if (square) graphics.rect(x, centerY - height / 2, barWidth, height);
+		else graphics.roundRect(x, centerY - height / 2, barWidth, height, barWidth / 2);
 	}
+	graphics.fill({
+		color,
+		alpha
+	});
 }
 //#endregion
 export { audioWaveformBars, drawAudioWaveform };

package/dist/board/render/card-tag.d.ts

@@ -0,0 +1,24 @@
+import { BoardRenderContext } from "./renderers/board-renderer-registry.js";
+import { Container, Graphics, Text } from "pixi.js";
+//#region src/board/render/card-tag.d.ts
+type CardGlyph = "image" | "video" | "audio" | "file" | "task";
+declare const CARD_TAG_SIZE = 11;
+declare function formatBoardDuration(ms: number): string;
+declare function drawCardGlyph(graphics: Graphics, glyph: CardGlyph, color: number, pixel: boolean): void;
+type CardTag = {
+  root: Container;
+  icon: Graphics;
+  text: Text | null;
+  sig: string;
+  resolution: number;
+  width: number;
+};
+declare function createCardTag(): CardTag;
+declare function zoomCardTag(tag: CardTag, zoom: number): void;
+declare function syncCardTag(tag: CardTag, input: {
+  glyph: CardGlyph;
+  text: string;
+  width: number;
+}, context: BoardRenderContext): void;
+//#endregion
+export { CARD_TAG_SIZE, CardGlyph, CardTag, createCardTag, drawCardGlyph, formatBoardDuration, syncCardTag, zoomCardTag };

package/dist/board/render/card-tag.js

@@ -0,0 +1,205 @@
+import { fitTextToWidth } from "./text-fit.js";
+import { syncTextResolution, textResolutionForZoom } from "./text-resolution.js";
+import { Container, Graphics, Text } from "pixi.js";
+//#region src/board/render/card-tag.ts
+const CARD_TAG_SIZE = 11;
+const ICON = 12;
+const GAP = 5;
+const MAX_GROWTH = 1.25;
+const MIN_READABLE = 7;
+const SECOND = 1e3;
+function formatBoardDuration(ms) {
+	const total = Math.max(0, Math.floor(ms / SECOND));
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const seconds = String(total % 60).padStart(2, "0");
+	return hours > 0 ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}` : `${minutes}:${seconds}`;
+}
+const PIXEL_GLYPHS = {
+	image: [
+		"######",
+		"#....#",
+		"#.#..#",
+		"#.##.#",
+		"######",
+		"......"
+	],
+	video: [
+		"######",
+		"#.#..#",
+		"#.##.#",
+		"#.#..#",
+		"######",
+		"......"
+	],
+	audio: [
+		"...#..",
+		"...##.",
+		"...#.#",
+		"...#..",
+		".###..",
+		".###.."
+	],
+	file: [
+		"####..",
+		"#..##.",
+		"#...##",
+		"#....#",
+		"#....#",
+		"######"
+	],
+	task: [
+		"..#...",
+		".###..",
+		"#####.",
+		".###..",
+		"..#...",
+		"......"
+	]
+};
+function drawLineGlyph(graphics, glyph, color) {
+	const line = {
+		color,
+		width: 1.25,
+		alpha: 1,
+		cap: "round",
+		join: "round"
+	};
+	switch (glyph) {
+		case "image":
+			graphics.roundRect(1, 2, 10, 8, 1.5).stroke(line);
+			graphics.moveTo(2.5, 9).lineTo(5, 6).lineTo(7, 8).lineTo(8.5, 6.5).lineTo(10, 8).stroke(line);
+			return;
+		case "video":
+			graphics.roundRect(1, 2.5, 10, 7, 1.5).stroke(line);
+			graphics.poly([
+				5,
+				4.5,
+				5,
+				7.5,
+				7.5,
+				6
+			]).fill({ color });
+			return;
+		case "audio":
+			for (const [x, height] of [
+				[2.5, 3],
+				[5, 7],
+				[7.5, 9],
+				[10, 5]
+			]) graphics.moveTo(x, 6 - height / 2).lineTo(x, 6 + height / 2);
+			graphics.stroke(line);
+			return;
+		case "file":
+			graphics.poly([
+				2.5,
+				1,
+				7.5,
+				1,
+				9.5,
+				3,
+				9.5,
+				11,
+				2.5,
+				11
+			]).stroke(line);
+			graphics.moveTo(7.5, 1).lineTo(7.5, 3).lineTo(9.5, 3).stroke(line);
+			return;
+		case "task":
+			graphics.poly([
+				6,
+				1,
+				7.3,
+				4.7,
+				11,
+				6,
+				7.3,
+				7.3,
+				6,
+				11,
+				4.7,
+				7.3,
+				1,
+				6,
+				4.7,
+				4.7
+			]).fill({ color });
+			return;
+	}
+}
+function drawCardGlyph(graphics, glyph, color, pixel) {
+	if (!pixel) {
+		drawLineGlyph(graphics, glyph, color);
+		return;
+	}
+	PIXEL_GLYPHS[glyph].forEach((row, y) => {
+		for (let x = 0; x < row.length; x += 1) if (row[x] === "#") graphics.rect(x * 2, y * 2, 2, 2);
+	});
+	graphics.fill({ color });
+}
+function createCardTag() {
+	const root = new Container({ label: "card-tag" });
+	const icon = new Graphics();
+	root.addChild(icon);
+	root.visible = false;
+	return {
+		root,
+		icon,
+		text: null,
+		sig: "",
+		resolution: 0,
+		width: 0
+	};
+}
+function zoomCardTag(tag, zoom) {
+	if (!tag.text || !tag.sig) return;
+	const scale = Math.min(MAX_GROWTH, Math.max(1, 1 / Math.max(zoom, .01)));
+	const span = 17 + tag.text.width;
+	tag.root.scale.set(scale);
+	tag.root.position.set(0, -18 * scale);
+	tag.root.visible = 11 * scale * zoom >= MIN_READABLE && span * scale <= tag.width + .5;
+}
+function syncCardTag(tag, input, context) {
+	tag.width = input.width;
+	if (!input.text || input.width <= 24) {
+		tag.sig = "";
+		tag.root.visible = false;
+		return;
+	}
+	if (!tag.text) {
+		tag.resolution = textResolutionForZoom(context.zoom);
+		tag.text = new Text({
+			text: "",
+			style: {
+				fontFamily: context.style.font,
+				fontSize: 11,
+				fontWeight: "500"
+			},
+			resolution: tag.resolution,
+			roundPixels: true
+		});
+		tag.root.addChild(tag.text);
+	}
+	syncTextResolution(tag.text, tag, context.zoom);
+	const sig = [
+		input.glyph,
+		input.text,
+		input.width,
+		context.themeKey
+	].join("|");
+	if (sig === tag.sig) {
+		zoomCardTag(tag, context.zoom);
+		return;
+	}
+	tag.sig = sig;
+	const color = context.palette.muted;
+	const pixel = context.style.icons === "pixel";
+	drawCardGlyph(tag.icon.clear(), input.glyph, color, pixel);
+	tag.text.style.fill = color;
+	tag.text.style.fontFamily = context.style.font;
+	fitTextToWidth(tag.text, input.text, Math.max(1, input.width - ICON - GAP));
+	tag.text.position.set(17, (ICON - tag.text.height) / 2);
+	zoomCardTag(tag, context.zoom);
+}
+//#endregion
+export { CARD_TAG_SIZE, createCardTag, drawCardGlyph, formatBoardDuration, syncCardTag, zoomCardTag };

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

@@ -1,17 +1,20 @@
+import { BoardRenderStyle, BoardSelectionStyle, BoardShadowStyle, defaultBoardRenderStyle, resolveBoardRenderStyle } from "./style.js";
 import { 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, inspectBoardScene, measureBoardText } from "./diagnostics.js";
 import { BoardBackgroundContext, createBoardBackground, updateBoardBackground } from "./board-background.js";
+import { CARD_TAG_SIZE, CardGlyph, CardTag, createCardTag, drawCardGlyph, formatBoardDuration, syncCardTag, 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 } from "./media-interaction.js";
+import { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, 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";
 import { dashPattern, endAngle, roundRectPoints, traceArrowhead, tracePolyline, trimPolyline } from "./stroke.js";
+import { CardElevation, CardRect, CardSurface, PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect } from "./surface.js";
 import { BOARD_EFFECT_MAX_PARTICLES } from "./renderers/effect-card-renderer.js";
-import { TASK_CARD_FULL_DETAIL_ZOOM } from "./renderers/task-card-renderer.js";
+import { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth } from "./text-fit.js";
 import { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.js";
-import { getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
+import { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, 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, BoardBackgroundContext, BoardCardRenderer, BoardCardRendererResolver, BoardCssPaint, BoardMediaAction, BoardRenderContext, BoardRenderDiagnostic, BoardRenderLabels, BoardRenderPalette, BoardScriptHost, BoardScriptHostOptions, BrowserBoardScriptHost, ClipGroup, DEFAULT_BOARD_RENDER_LABELS, TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardMediaActionAt, clippingAncestor, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, dashPattern, defaultBoardPalette, endAngle, ensureBoardTextMeasurement, getBoardCardRenderer, getBoardResolution, inspectBoardScene, installBoardTextMeasurement, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, roundRectPoints, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceFrameOutline, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, BoardBackgroundContext, BoardCardRenderer, BoardCardRendererResolver, BoardCssPaint, BoardMediaAction, BoardRenderContext, BoardRenderDiagnostic, BoardRenderLabels, BoardRenderPalette, BoardRenderStyle, BoardScriptHost, BoardScriptHostOptions, BoardSelectionStyle, BoardShadowStyle, BrowserBoardScriptHost, CARD_TAG_SIZE, CardElevation, CardGlyph, CardRect, CardSurface, CardTag, ClipGroup, DEFAULT_BOARD_RENDER_LABELS, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, VideoNaturalSize, boardCardDetailed, boardMediaActionAt, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, ellipsizeWrappedLines, endAngle, ensureBoardTextMeasurement, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceCardOutline, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };

package/dist/board/render/index.js

@@ -4,14 +4,17 @@ import { createBoardRenderSampler } from "./sampling.js";
 import { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement } from "./text-measurement.js";
 import { inspectBoardScene, measureBoardText } from "./diagnostics.js";
 import { createBoardBackground, updateBoardBackground } from "./board-background.js";
+import { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth } from "./text-fit.js";
+import { boardCardDetailed, getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
+import { CARD_TAG_SIZE, createCardTag, drawCardGlyph, formatBoardDuration, syncCardTag, zoomCardTag } from "./card-tag.js";
 import { clippingAncestor, isClippingFrame, syncClipGroup, traceFrameOutline } from "./clip.js";
-import { getBoardResolution, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket } from "./text-resolution.js";
-import { TASK_CARD_FULL_DETAIL_ZOOM } from "./renderers/task-card-renderer.js";
-import { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible } from "./media-interaction.js";
 import { dashPattern, endAngle, roundRectPoints, traceArrowhead, tracePolyline, trimPolyline } from "./stroke.js";
+import { PIXEL_STEP, cardElevation, cardOutlinePoints, cardShadow, containRect, drawCardShadow, drawCardSurface, isBoardCard, traceCardOutline, tracePixelRect } from "./surface.js";
+import { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, 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 { VIDEO_THUMBNAIL_MAX_EDGE, loadVideoThumbnailTexture, videoTextureNaturalSize, videoThumbnailSize } from "./video-thumbnail.js";
-export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, DEFAULT_BOARD_RENDER_LABELS, TASK_CARD_FULL_DETAIL_ZOOM, VIDEO_THUMBNAIL_MAX_EDGE, boardMediaActionAt, clippingAncestor, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, dashPattern, defaultBoardPalette, endAngle, ensureBoardTextMeasurement, getBoardCardRenderer, getBoardResolution, inspectBoardScene, installBoardTextMeasurement, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, roundRectPoints, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceFrameOutline, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize };
+export { BOARD_EFFECT_MAX_PARTICLES, BOARD_FONT_STACKS, CARD_TAG_SIZE, DEFAULT_BOARD_RENDER_LABELS, PIXEL_STEP, VIDEO_THUMBNAIL_MAX_EDGE, boardCardDetailed, boardMediaActionAt, cardElevation, cardOutlinePoints, cardShadow, clippingAncestor, containRect, createBoardBackground, createBoardCardRendererResolver, createBoardRenderSampler, createBoardScriptHost, createCardTag, dashPattern, defaultBoardPalette, defaultBoardRenderStyle, drawCardGlyph, drawCardShadow, drawCardSurface, ellipsizeWrappedLines, endAngle, ensureBoardTextMeasurement, fitLineWithEllipsis, fitTextToLines, fitTextToWidth, formatBoardDuration, getBoardCardRenderer, getBoardResolution, inspectBoardScene, installBoardTextMeasurement, isBoardCard, isClippingFrame, itemAlpha, itemColor, loadVideoThumbnailTexture, measureBoardText, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter, parseBoardCssColor, parseBoardCssPaint, prepareBrowserBoardScripts, resolveBoardRenderStyle, roundRectPoints, syncCardTag, syncClipGroup, syncTextResolution, syncTextWrapWidth, textResolutionForZoom, textZoomBucket, traceArrowhead, traceCardOutline, traceFrameOutline, tracePixelRect, tracePolyline, trimPolyline, updateBoardBackground, videoTextureNaturalSize, videoThumbnailSize, zoomCardTag };

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

@@ -9,10 +9,11 @@ declare function mediaPlayBadgeVisible(item: BoardSceneItem, zoom: number, optio
   materialized: boolean;
   hasVideoPreview: boolean;
 }): boolean;
+declare function mediaPlayKeyCenter(item: BoardSceneItem): WorldPoint;
 declare function mediaPlayBadgeHit(item: BoardSceneItem, point: WorldPoint, zoom: number): boolean;
 declare function boardMediaActionAt(item: BoardSceneItem, point: WorldPoint, zoom: number, options: {
   materialized: boolean;
   hasVideoPreview: boolean;
 }): BoardMediaAction | null;
 //#endregion
-export { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible };
+export { BoardMediaAction, boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter };

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

@@ -1,19 +1,27 @@
 import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
-import "./renderers/task-card-renderer.js";
+import { degToRad, rotatePointAround, worldPoint } from "../model/geometry.js";
+import { boardCardDetailed } from "./text-resolution.js";
+import { audioKeyCenter } from "./renderers/audio-card-renderer.js";
 //#region src/board/render/media-interaction.ts
 function mediaPlayBadgeVisible(item, zoom, options) {
 	if (!options.materialized) return false;
 	if (item.type === "video" || item.type === "audio") return true;
-	if (item.type !== "task" || zoom < .55) return false;
+	if (item.type !== "task" || !boardCardDetailed(zoom)) return false;
 	const artifact = featuredTaskArtifact(item.props.snapshot.artifacts);
 	if (artifact?.type === "audio") return true;
 	return artifact?.type === "video" && (Boolean(artifact.previewUrl) || options.hasVideoPreview);
 }
+function mediaPlayKeyCenter(item) {
+	const { x, y, width, height, rotation } = item.frame;
+	const center = worldPoint(x + width / 2, y + height / 2);
+	if (item.type !== "audio") return center;
+	const key = audioKeyCenter(width, height);
+	return rotatePointAround(worldPoint(x + key.x, y + key.y), center, degToRad(rotation || 0));
+}
 function mediaPlayBadgeHit(item, point, zoom) {
 	const radius = 28 / Math.max(zoom, .05);
-	const centerX = item.frame.x + item.frame.width / 2;
-	const centerY = item.frame.y + item.frame.height / 2;
-	return Math.hypot(point.x - centerX, point.y - centerY) <= radius;
+	const center = mediaPlayKeyCenter(item);
+	return Math.hypot(point.x - center.x, point.y - center.y) <= radius;
 }
 function boardMediaActionAt(item, point, zoom, options) {
 	return mediaPlayBadgeVisible(item, zoom, options) && mediaPlayBadgeHit(item, point, zoom) ? {
@@ -22,4 +30,4 @@ function boardMediaActionAt(item, point, zoom, options) {
 	} : null;
 }
 //#endregion
-export { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible };
+export { boardMediaActionAt, mediaPlayBadgeHit, mediaPlayBadgeVisible, mediaPlayKeyCenter };

package/dist/board/render/palette.js

@@ -14,8 +14,8 @@ const DARK = {
 	legendary: 16096779
 };
 const LIGHT = {
-	bg: 16777215,
-	surface: 16053493,
+	bg: 16251129,
+	surface: 16777215,
 	hover: 15329772,
 	border: 14079706,
 	brand: 15222030,