@neta-art/cohub 11.0.0 → 11.2.0

package/README.md

@@ -46,18 +46,39 @@ Development uses:
 - API: `https://api-dev.cohub.live`
 - WebSocket: `wss://gateway-dev.cohub.live/ws`
 
-Custom endpoints are still supported when needed:
+Override endpoints for self-hosted deployments or proxies:
 
 ```ts
 const client = createCohubClient({
   baseUrl: "https://api.example.com",
+  webBaseUrl: "https://cohub.example.com",
   getAccessToken: async () => localStorage.getItem("token"),
   websocket: {
     url: "https://gateway.example.com",
   },
+  voice: {
+    url: "https://gateway.example.com",
+  },
 });
 ```
 
+In Node.js, the SDK and CLI share these optional environment variables:
+
+| Variable | Endpoint |
+| --- | --- |
+| `COHUB_BASE_URL` | API base URL |
+| `COHUB_WS_URL` | Realtime gateway URL (`http(s)` or `ws(s)`; `/ws` is added when omitted) |
+| `COHUB_WEB_URL` | Web origin for App authorization and CLI links |
+| `COHUB_VOICE_WS_URL` | Voice input gateway URL; falls back to `COHUB_WS_URL` with `/asr/ws` |
+
+Explicit client options take precedence over environment variables. Unconfigured
+endpoints use the selected environment's defaults. API, web, and gateway addresses
+are configured separately; changing `baseUrl` does not change the gateway.
+
+```bash
+COHUB_BASE_URL=http://localhost:3000 COHUB_WS_URL=ws://localhost:8080 node app.js
+```
+
 ## Spaces and sessions
 
 A **Space** is a live, isolated working environment where users and agents create together.
@@ -101,10 +122,15 @@ const stop = board.subscribe({
 });
 ```
 
-Task Items keep a small, replaceable display snapshot beside their stable
-`taskRunId`; build it from an authoritative TaskRun with
-`taskRunToBoardTaskSnapshot(taskRun)` from `@neta-art/cohub/board`, and restore
-a Board's TaskRuns in one request with `client.tasks.getMany(ids, { spaceId })`.
+Task Items show a run by its `taskRunId`. Write only the id; the server fills
+the display snapshot from the run and rewrites it when the run finishes, on
+every Board in the Space that shows it. Lay a run's results out as media with
+`createTaskResultItems`; each result keeps an `origin` leading back to the run.
+
+```ts
+const { taskRunId } = await client.generations.create({ spaceId, model, content });
+await board.apply({ items: { hero: { type: "task", position: { x: 80, y: 80 }, size: { width: 480, height: 270 }, props: { taskRunId } } } });
+```
 
 ### Layers
 

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/creation.d.ts

@@ -28,8 +28,8 @@ declare function createCreationModule(ctx: EditorContext): {
     snapshot?: BoardMediaSnapshot;
   }) => string;
   addFile: (path: string, at: WorldPoint, snapshot?: BoardMediaSnapshot & BoardFileSnapshotFacts) => string;
-  addTask: (taskRunId: string, snapshot: BoardTaskSnapshot, at: WorldPoint, metadata?: Record<string, unknown>) => string;
-  addTaskWithSources: (taskRunId: string, snapshot: BoardTaskSnapshot, at: WorldPoint, sources: BoardTaskSource[], metadata?: Record<string, unknown>) => string | null;
+  addTask: (taskRunId: string, snapshot: BoardTaskSnapshot, at: WorldPoint, metadata?: Record<string, unknown>, aspect?: number) => string;
+  addTaskWithSources: (taskRunId: string, snapshot: BoardTaskSnapshot, at: WorldPoint, sources: BoardTaskSource[], metadata?: Record<string, unknown>, aspect?: number) => string | null;
   addText: (text: string, at: WorldPoint) => void;
   addShape: (at: WorldPoint, geometry?: ShapeKind) => void;
   addFrame: (at: WorldPoint) => void;

package/dist/board/editor/creation.js

@@ -53,10 +53,10 @@ function createCreationModule(ctx) {
 		if (options.readonly) return null;
 		return addOne(ctx.registry.create(type, input));
 	}
-	function addTaskWithSources(taskRunId, snapshot, at, sources, metadata) {
+	function addTaskWithSources(taskRunId, snapshot, at, sources, metadata, aspect) {
 		if (options.readonly) return null;
 		const { arrow } = state.toolStyles;
-		const task = createTaskBoardItem(taskRunId, snapshot, at.x, at.y, metadata);
+		const task = createTaskBoardItem(taskRunId, snapshot, at.x, at.y, metadata, void 0, aspect);
 		add([task, ...sources.filter((source) => source.itemId !== task.id && state.scene.get(source.itemId)).map((source) => {
 			const entry = createArrowBoardItem({
 				x: 0,
@@ -199,7 +199,7 @@ function createCreationModule(ctx) {
 		addApp: (app, at) => addOne(createAppBoardItem(app, at.x, at.y)),
 		addMedia: (src, at, options = {}) => addOne(createMediaBoardItem(src, at.x, at.y, options.snapshot, void 0, options.kind)),
 		addFile: (path, at, snapshot) => addOne(createFileNodeForPath(path, at.x, at.y, snapshot)),
-		addTask: (taskRunId, snapshot, at, metadata) => addOne(createTaskBoardItem(taskRunId, snapshot, at.x, at.y, metadata)),
+		addTask: (taskRunId, snapshot, at, metadata, aspect) => addOne(createTaskBoardItem(taskRunId, snapshot, at.x, at.y, metadata, void 0, aspect)),
 		addTaskWithSources,
 		addText: (text, at) => {
 			add([createTextBoardItem(text, at.x, at.y, styles().text.color)]);

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

@@ -11,7 +11,7 @@ import "../model/index.js";
 import { AlignMode, DistributeAxis } from "./align.js";
 import { BoardFocusOptions } from "./camera.js";
 import { BoardSelectionTransform, BoardTransformControl } from "./selection-transform.js";
-import { BoardInteraction, BoardPointerEvent } from "./interaction.js";
+import { BoardInteraction, BoardPointerEvent, BoardTransformEnd } from "./interaction.js";
 import { BoardAppMetadata, BoardTaskSource } from "./creation.js";
 import { BoardClipboardPayload } from "./clipboard.js";
 import { BoardNaturalSize } from "./snapshots.js";
@@ -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;
@@ -178,8 +179,8 @@ declare function createBoardEditor(options: BoardEditorOptions): {
     kind?: BoardMediaItemKind;
     snapshot?: BoardMediaSnapshot;
   }) => string;
-  addTask: (taskRunId: string, snapshot: BoardTaskSnapshot, at: WorldPoint, metadata?: Record<string, unknown>) => string;
-  addTaskWithSources: (taskRunId: string, snapshot: BoardTaskSnapshot, at: WorldPoint, sources: BoardTaskSource[], metadata?: Record<string, unknown>) => string | null;
+  addTask: (taskRunId: string, snapshot: BoardTaskSnapshot, at: WorldPoint, metadata?: Record<string, unknown>, aspect?: number) => string;
+  addTaskWithSources: (taskRunId: string, snapshot: BoardTaskSnapshot, at: WorldPoint, sources: BoardTaskSource[], metadata?: Record<string, unknown>, aspect?: number) => string | null;
   addText: (text: string, at: WorldPoint) => void;
   addShape: (at: WorldPoint, geometry?: ShapeKind) => void;
   addFrame: (at: WorldPoint) => void;
@@ -204,7 +205,6 @@ declare function createBoardEditor(options: BoardEditorOptions): {
     snapshot: BoardFileSnapshotFacts;
     replace?: boolean;
   }>) => void;
-  applyTaskSnapshots: (snapshots: ReadonlyMap<string, BoardTaskSnapshot>) => void;
   setPlayhead: (next: BoardPlayhead | null) => void;
   setRecording: (value: boolean) => void;
   keyframeState: (property: string) => "animated" | "keyframe" | "none";
@@ -217,6 +217,7 @@ declare function createBoardEditor(options: BoardEditorOptions): {
   pointerMove: (event: BoardPointerEvent) => void;
   pointerUp: (event: BoardPointerEvent) => void;
   pointerLeave: () => void;
+  subscribeTransforms: (listener: (event: BoardTransformEnd) => void) => () => void;
   cancelPointerInteraction: () => void;
   destroy(): 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,
@@ -409,7 +416,6 @@ function createBoardEditor(options) {
 		applyMediaFileChange: snapshots.applyMediaFileChange,
 		adoptMediaNaturalSizes: snapshots.adoptMediaNaturalSizes,
 		applyFileSnapshots: snapshots.applyFileSnapshots,
-		applyTaskSnapshots: snapshots.applyTaskSnapshots,
 		setPlayhead: animation.setPlayhead,
 		setRecording: animation.setRecording,
 		keyframeState: tracked([
@@ -427,6 +433,7 @@ function createBoardEditor(options) {
 		pointerMove: interaction.pointerMove,
 		pointerUp: interaction.pointerUp,
 		pointerLeave: interaction.pointerLeave,
+		subscribeTransforms: interaction.subscribeTransforms,
 		cancelPointerInteraction: interaction.cancel,
 		destroy() {
 			stopViewState();

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

@@ -2,7 +2,7 @@ import { BOARD_CLIPBOARD_MIME } from "../../protocol/dist/board.js";
 import { AlignMode, DistributeAxis, alignFrames, distributeFrames, framesBounds } from "./align.js";
 import { BoardFocusOptions } from "./camera.js";
 import { BoardSelectionTransform, BoardTransformControl, resizeCursorForHandle, resolveSelectionTransform, selectionTransformControlAt } from "./selection-transform.js";
-import { BoardInteraction, BoardPointerEvent } from "./interaction.js";
+import { BoardInteraction, BoardPointerEvent, BoardTransformEnd } from "./interaction.js";
 import { BoardAppMetadata, BoardTaskSource } from "./creation.js";
 import { BOARD_CLIPBOARD_VERSION, BoardClipboardPayload, DUPLICATE_OFFSET, MAX_CLIPBOARD_CHARS, MAX_CLIPBOARD_ITEMS, defaultPasteOffset, encodeClipboard, materializeClipboard, parseClipboard, remapItems } from "./clipboard.js";
 import { BoardNaturalSize } from "./snapshots.js";
@@ -15,4 +15,4 @@ import { BoardEditPlayhead, diffBoardEdits, isEmptyBoardPatch, readPath, routeBo
 import { BoardEditor, createBoardEditor } from "./editor.js";
 import { SpatialEntry, SpatialIndex, createSpatialIndex } from "./spatial.js";
 import { normalizeWheelDelta, wheelZoomFactor } from "./wheel.js";
-export { AlignMode, BOARD_CLIPBOARD_MIME, BOARD_CLIPBOARD_VERSION, BOARD_HAND_TAP_SLOP, type BoardAppMetadata, type BoardCameraPolicy, BoardClipboardPayload, BoardEditPlayhead, type BoardEditor, type BoardEditorChannel, type BoardEditorListener, type BoardEditorOptions, type BoardEditorPreferences, type BoardFocusOptions, type BoardInteraction, type BoardNaturalSize, type BoardPlayhead, type BoardPointerEvent, BoardSelectionTransform, type BoardTaskSource, BoardToolId, BoardTransformControl, type BoardViewState, CONNECTION_PORT_HIT_RADIUS, CONNECTION_PORT_OFFSET, CONNECTION_PORT_RADIUS, CONNECTION_PORT_TOUCH_HIT_RADIUS, CONNECTION_SIDES, ConnectionPort, DUPLICATE_OFFSET, DistributeAxis, MAX_CLIPBOARD_CHARS, MAX_CLIPBOARD_ITEMS, SnapAxis, SnapGuide, SnapOptions, SnapResult, SpatialEntry, SpatialIndex, alignFrames, canTapSelectWithHand, computeSnap, connectionPortAt, connectionPorts, createBoardEditor, createSpatialIndex, defaultBoardTool, defaultPasteOffset, diffBoardEdits, distributeFrames, encodeClipboard, framesBounds, isContinuousBoardTool, isCreationBoardTool, isEmptyBoardPatch, isWithinHandTapSlop, materializeClipboard, normalizeWheelDelta, parseClipboard, portHitRadius, readPath, remapItems, resizeCursorForHandle, resolveSelectionTransform, routeBoardEdits, sameJson, selectionTransformControlAt, wheelZoomFactor, writePath };
+export { AlignMode, BOARD_CLIPBOARD_MIME, BOARD_CLIPBOARD_VERSION, BOARD_HAND_TAP_SLOP, type BoardAppMetadata, type BoardCameraPolicy, BoardClipboardPayload, BoardEditPlayhead, type BoardEditor, type BoardEditorChannel, type BoardEditorListener, type BoardEditorOptions, type BoardEditorPreferences, type BoardFocusOptions, type BoardInteraction, type BoardNaturalSize, type BoardPlayhead, type BoardPointerEvent, BoardSelectionTransform, type BoardTaskSource, BoardToolId, BoardTransformControl, type BoardTransformEnd, type BoardViewState, CONNECTION_PORT_HIT_RADIUS, CONNECTION_PORT_OFFSET, CONNECTION_PORT_RADIUS, CONNECTION_PORT_TOUCH_HIT_RADIUS, CONNECTION_SIDES, ConnectionPort, DUPLICATE_OFFSET, DistributeAxis, MAX_CLIPBOARD_CHARS, MAX_CLIPBOARD_ITEMS, SnapAxis, SnapGuide, SnapOptions, SnapResult, SpatialEntry, SpatialIndex, alignFrames, canTapSelectWithHand, computeSnap, connectionPortAt, connectionPorts, createBoardEditor, createSpatialIndex, defaultBoardTool, defaultPasteOffset, diffBoardEdits, distributeFrames, encodeClipboard, framesBounds, isContinuousBoardTool, isCreationBoardTool, isEmptyBoardPatch, isWithinHandTapSlop, materializeClipboard, normalizeWheelDelta, parseClipboard, portHitRadius, readPath, remapItems, resizeCursorForHandle, resolveSelectionTransform, routeBoardEdits, sameJson, selectionTransformControlAt, wheelZoomFactor, writePath };

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";
@@ -90,6 +94,11 @@ type BoardPointerEvent = {
   pressure: number;
   samples?: readonly BoardDrawInputSample[];
 };
+type BoardTransformEnd = {
+  ids: string[];
+  operation: "move" | "resize" | "rotate" | "arrow";
+  cancelled: boolean;
+};
 declare function createInteractionModule(ctx: EditorContext): {
   marquee: () => Rect | null;
   hoveredControl: () => BoardTransformControl | null;
@@ -108,8 +117,9 @@ declare function createInteractionModule(ctx: EditorContext): {
   pointerUp: (event: BoardPointerEvent) => void;
   pointerLeave: () => void;
   cancel: () => void;
-  destroy: () => void;
+  subscribeTransforms(listener: (event: BoardTransformEnd) => void): () => void;
+  destroy(): void;
 };
 type InteractionModule = ReturnType<typeof createInteractionModule>;
 //#endregion
-export { BoardInteraction, BoardPointerEvent, InteractionModule, createInteractionModule };
+export { BoardInteraction, BoardPointerEvent, BoardTransformEnd, InteractionModule, createInteractionModule };

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";
@@ -15,6 +15,23 @@ function angleFrom(center, point) {
 	return Math.atan2(point.y - center.y, point.x - center.x) * 180 / Math.PI;
 }
 function createInteractionModule(ctx) {
+	const transformListeners = /* @__PURE__ */ new Set();
+	function transformEnd(gesture, cancelled) {
+		if (!transformListeners.size || !("moved" in gesture) || !gesture.moved) return;
+		let event;
+		if (gesture.type === "translating" || gesture.type === "resizing" || gesture.type === "rotating") event = {
+			ids: [...gesture.origin.keys()],
+			operation: gesture.type === "translating" ? "move" : gesture.type === "resizing" ? "resize" : "rotate",
+			cancelled
+		};
+		else if (gesture.type === "draggingArrowHandle") event = {
+			ids: [gesture.arrowId],
+			operation: "arrow",
+			cancelled
+		};
+		else return;
+		for (const listener of transformListeners) listener(event);
+	}
 	const { state, options, registry } = ctx;
 	const activePointers = /* @__PURE__ */ new Map();
 	let pinch = null;
@@ -34,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;
@@ -227,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 = {
@@ -240,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;
@@ -332,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);
@@ -493,6 +519,10 @@ function createInteractionModule(ctx) {
 		if (activePointers.size > 0) return;
 		const gesture = state.interaction;
 		if (gesture.type === "drawing" && gesture.pointerId !== event.pointerId) return;
+		if (event.cancelled) {
+			cancel();
+			return;
+		}
 		state.snapGuides = [];
 		state.interaction = { type: "idle" };
 		switch (gesture.type) {
@@ -531,6 +561,7 @@ function createInteractionModule(ctx) {
 			case "creatingBox": ctx.creation.commitBox(gesture);
 		}
 		ctx.remote.flushPending();
+		transformEnd(gesture, false);
 	}
 	function pointerLeave() {
 		if (state.interaction.type !== "idle") return;
@@ -538,12 +569,14 @@ function createInteractionModule(ctx) {
 		state.hoverId = null;
 	}
 	function cancel() {
+		const gesture = state.interaction;
 		activePointers.clear();
 		pinch = null;
 		state.snapGuides = [];
 		state.interaction = { type: "idle" };
 		ctx.document.discardDraft();
 		ctx.remote.flushPending();
+		transformEnd(gesture, true);
 	}
 	const ports = memo(() => [
 		state.scene,
@@ -577,7 +610,16 @@ function createInteractionModule(ctx) {
 		pointerUp,
 		pointerLeave,
 		cancel,
-		destroy: () => activePointers.clear()
+		subscribeTransforms(listener) {
+			transformListeners.add(listener);
+			return () => {
+				transformListeners.delete(listener);
+			};
+		},
+		destroy() {
+			activePointers.clear();
+			transformListeners.clear();
+		}
 	};
 }
 //#endregion

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/editor/snapshots.d.ts

@@ -1,4 +1,3 @@
-import { BoardTaskSnapshot } from "../../protocol/dist/board-model.js";
 import { BoardFileSnapshotFacts } from "../model/file-snapshot.js";
 import "../model/index.js";
 import { EditorContext } from "./context.js";
@@ -20,7 +19,6 @@ declare function createSnapshotsModule(ctx: EditorContext): {
     snapshot: BoardFileSnapshotFacts;
     replace?: boolean;
   }>) => void;
-  applyTaskSnapshots: (snapshots: ReadonlyMap<string, BoardTaskSnapshot>) => void;
 };
 type SnapshotsModule = ReturnType<typeof createSnapshotsModule>;
 //#endregion

package/dist/board/editor/snapshots.js

@@ -1,15 +1,16 @@
+import { featuredTaskArtifact } from "../../protocol/dist/board-task.js";
 import { mergeFileSnapshot } from "../model/file-preview.js";
-import { featuredTaskArtifact } from "../model/task.js";
 import { sameJson } from "./document-edits.js";
 //#region src/board/editor/snapshots.ts
 function fitHeight(item, natural) {
 	const height = item.size.width * natural.height / natural.width;
 	if (!Number.isFinite(height) || height <= 0) return null;
+	const shift = item.type === "task" ? 0 : (item.size.height - height) / 2;
 	return {
 		...item,
 		position: {
 			x: item.position.x,
-			y: item.position.y + (item.size.height - height) / 2
+			y: item.position.y + shift
 		},
 		size: {
 			...item.size,
@@ -105,27 +106,10 @@ function createSnapshotsModule(ctx) {
 		}
 		commit(changes);
 	}
-	function applyTaskSnapshots(snapshots) {
-		if (snapshots.size === 0) return;
-		const changes = /* @__PURE__ */ new Map();
-		for (const [id, item] of Object.entries(state.base.items)) {
-			if (item.type !== "task") continue;
-			const snapshot = snapshots.get(item.props.taskRunId);
-			if (snapshot && !sameJson(snapshot, item.props.snapshot)) changes.set(id, {
-				...item,
-				props: {
-					...item.props,
-					snapshot
-				}
-			});
-		}
-		commit(changes);
-	}
 	return {
 		applyMediaFileChange,
 		adoptMediaNaturalSizes,
-		applyFileSnapshots,
-		applyTaskSnapshots
+		applyFileSnapshots
 	};
 }
 //#endregion

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

@@ -2,7 +2,8 @@ import { buildFallbackShapeColors } from "../model/palette.js";
 import { imageAssetKey } from "../model/image-key.js";
 import { defaultBoardPalette } from "../render/palette.js";
 import { clippingAncestor, isClippingFrame, syncClipGroup } from "../render/clip.js";
-import { getBoardCardRenderer } from "../render/renderers/board-renderer-registry.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,14 +18,20 @@ 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,
+			labels: DEFAULT_BOARD_RENDER_LABELS,
+			taskRun: () => null,
 			scripts: input.scripts,
 			assetKey: input.assetKey ?? imageAssetKey,
 			getTexture: (key) => textures.get(key) ?? null,

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/model/image-key.js

@@ -1,5 +1,5 @@
 import { parseBoardMediaSource } from "../../protocol/dist/board-model.js";
-import { featuredTaskArtifact, taskArtifactPreviewUrl } from "./task.js";
+import { featuredTaskArtifact, taskArtifactPreviewUrl } from "../../protocol/dist/board-task.js";
 //#region src/board/model/image-key.ts
 function imageAssetKey(item) {
 	if (item.type === "image") {