@neta-art/cohub 11.0.0 → 11.2.0

package/dist/board/stage/scene.js

@@ -1,6 +1,5 @@
 import { parseBoardItem } from "../../protocol/dist/board-model.js";
 import { drawPointsBounds } from "../../protocol/dist/board-layout.js";
-import { CORNER_RESIZE_HANDLES, frameCorners, frameHandlePosition, frameRayIntersection, rotationHandleAnchor, rotationHandlePosition } from "../model/geometry.js";
 import { clippingAncestor, isClippingFrame, syncClipGroup } from "../render/clip.js";
 import { Graphics } from "pixi.js";
 //#region src/board/stage/scene.ts
@@ -9,6 +8,7 @@ const FAR_LAYER_EXIT = 350;
 const FAR_PASS_BATCH = 240;
 const FAR_LIVE_LIMIT = 64;
 const Z_FAR_LAYER = -1;
+const Z_LIFTED = 1e9;
 const Z_LIVE_STROKE = Number.MAX_SAFE_INTEGER - 1;
 const Z_OVERLAY = Number.MAX_SAFE_INTEGER;
 const POOL_LIMIT_PER_RENDERER = 48;
@@ -21,26 +21,6 @@ function idSetSignature(ids) {
 	}
 	return hash;
 }
-function traceFrame(graphics, frame) {
-	const corners = frameCorners(frame);
-	const first = corners[0];
-	if (!first) return graphics;
-	graphics.moveTo(first.x, first.y);
-	for (let index = 1; index < corners.length; index += 1) {
-		const point = corners[index];
-		if (point) graphics.lineTo(point.x, point.y);
-	}
-	return graphics.closePath();
-}
-function frameEdgePoints(frame, handle) {
-	switch (handle) {
-		case "n": return [frameHandlePosition(frame, "nw"), frameHandlePosition(frame, "ne")];
-		case "e": return [frameHandlePosition(frame, "ne"), frameHandlePosition(frame, "se")];
-		case "s": return [frameHandlePosition(frame, "sw"), frameHandlePosition(frame, "se")];
-		case "w": return [frameHandlePosition(frame, "nw"), frameHandlePosition(frame, "sw")];
-		default: return null;
-	}
-}
 function createBoardScene(options) {
 	const { world, overlay, getRenderer } = options;
 	world.sortableChildren = true;
@@ -48,12 +28,15 @@ function createBoardScene(options) {
 	const cards = /* @__PURE__ */ new Map();
 	const clips = /* @__PURE__ */ new Map();
 	const animatedIds = /* @__PURE__ */ new Set();
+	const tickingIds = /* @__PURE__ */ new Set();
 	const pools = /* @__PURE__ */ new Map();
 	const heldKeys = /* @__PURE__ */ new Map();
 	let orderById = /* @__PURE__ */ new Map();
 	let farSig = null;
 	let farActive = false;
 	let lastStructureVersion = -1;
+	let lastZoom = NaN;
+	let lifted = /* @__PURE__ */ new Set();
 	const liveStrokes = /* @__PURE__ */ new Map();
 	function setHeldKey(context, cardId, desiredKey) {
 		const heldKey = heldKeys.get(cardId) ?? null;
@@ -72,6 +55,7 @@ function createBoardScene(options) {
 		setHeldKey(context, id, null);
 		cards.delete(id);
 		animatedIds.delete(id);
+		tickingIds.delete(id);
 		if (destroyed) return;
 		entry.container.parent?.removeChild(entry.container);
 		entry.container.visible = false;
@@ -123,6 +107,7 @@ function createBoardScene(options) {
 		container.alpha = scene.opacity(item.id);
 		hostFor(item, scene).addChild(container);
 		if (renderer.animated) animatedIds.add(item.id);
+		if (renderer.tick) tickingIds.add(item.id);
 		const entry = {
 			item,
 			container,
@@ -135,6 +120,7 @@ function createBoardScene(options) {
 		};
 		cards.set(item.id, entry);
 		setHeldKey(context, item.id, context.assetKey(item));
+		renderer.zoom?.(container, context.zoom);
 		return entry;
 	}
 	let farFront = createFarLayer();
@@ -352,7 +338,8 @@ function createBoardScene(options) {
 			const hovered = context.hoveredId === id;
 			const resizing = context.resizingIds.has(id);
 			const scriptRevision = context.scripts?.revision?.(id) ?? 0;
-			const changed = scriptRevision !== entry.scriptRevision || item !== entry.item || entry.renderer.animated || selected !== entry.selected || hovered !== entry.hovered || resizing !== entry.resizing || globalSig !== entry.globalSig;
+			const observed = entry.renderer.observesSelection === true && (selected !== entry.selected || hovered !== entry.hovered);
+			const changed = input.staleIds?.has(id) || scriptRevision !== entry.scriptRevision || item !== entry.item || entry.renderer.animated || observed || resizing !== entry.resizing || globalSig !== entry.globalSig;
 			entry.scriptRevision = scriptRevision;
 			entry.item = item;
 			entry.selected = selected;
@@ -363,120 +350,39 @@ function createBoardScene(options) {
 			if (changed) {
 				entry.renderer.update(entry.container, item, context);
 				entry.container.alpha = scene.opacity(id);
+				if (entry.renderer.tick) tickingIds.add(id);
 			}
 		}
 		if (structureChanged || liveSetChanged) syncClips(scene);
-		if (structureChanged || farModeChanged || liveSetChanged) applyChildOrder();
+		if (context.zoom !== lastZoom) {
+			lastZoom = context.zoom;
+			for (const entry of cards.values()) entry.renderer.zoom?.(entry.container, lastZoom);
+		}
+		const liftChanged = context.liftedIds !== lifted;
+		lifted = context.liftedIds;
+		if (structureChanged || farModeChanged || liveSetChanged || liftChanged) applyChildOrder(scene);
 		syncLiveStrokes(input);
 	}
-	function applyChildOrder() {
-		for (const [id, entry] of cards) entry.container.zIndex = orderById.get(id) ?? 0;
-		world.sortableChildren = true;
-		world.sortChildren();
-	}
-	function drawOverlay(input, palette) {
-		overlay.clear();
-		const { zoom, pointerType, marquee, selection, transform, controls, hoveredControl, rotationPointer, arrowEndpoints, ports, hoveredPort, arrowDraft, bindTarget } = input;
-		const inv = 1 / zoom;
-		const brand = palette.brand;
-		if (marquee) {
-			overlay.rect(marquee.x, marquee.y, marquee.width, marquee.height).fill({
-				color: brand,
-				alpha: .08
-			});
-			overlay.rect(marquee.x, marquee.y, marquee.width, marquee.height).stroke({
-				color: brand,
-				width: inv,
-				alpha: .7
-			});
-		}
-		if (bindTarget) traceFrame(overlay, bindTarget).stroke({
-			color: brand,
-			width: 2 * inv,
-			alpha: .9
-		});
-		if (arrowDraft) {
-			const { from, to, size, targetFrame } = arrowDraft;
-			if (targetFrame) traceFrame(overlay, targetFrame).stroke({
-				color: brand,
-				width: 2 * inv,
-				alpha: .9
-			});
-			overlay.moveTo(from.x, from.y).lineTo(to.x, to.y).stroke({
-				color: brand,
-				width: Math.max(size, 1.5) * inv,
-				alpha: .85,
-				cap: "round"
-			});
-			overlay.circle(to.x, to.y, 3.5 * inv).fill({
-				color: brand,
-				alpha: .95
-			});
+	function tick(clock) {
+		let next = null;
+		for (const id of tickingIds) {
+			const entry = cards.get(id);
+			const wait = entry?.container.visible ? entry.renderer.tick?.(entry.container, clock) ?? null : null;
+			if (wait === null) tickingIds.delete(id);
+			else next = next === null ? wait : Math.min(next, wait);
 		}
-		if (ports && ports.length > 0) for (const port of ports) {
-			const hovered = hoveredPort && Math.abs(hoveredPort.x - port.x) < .001 && Math.abs(hoveredPort.y - port.y) < .001;
-			const r = (hovered ? port.radius * 1.5 : port.radius) * inv;
-			overlay.circle(port.x, port.y, r).fill({
-				color: palette.surface,
-				alpha: 1
-			}).stroke({
-				color: brand,
-				width: 1.5 * inv,
-				alpha: hovered ? 1 : .8
-			});
-		}
-		if (!transform || selection.length === 0) return;
-		const source = transform.frame;
-		traceFrame(overlay, source).stroke({
-			color: brand,
-			width: 1.5 * inv,
-			alpha: .95
-		});
-		if (!controls) return;
-		if (arrowEndpoints && arrowEndpoints.length > 0) {
-			const r = 5 * inv;
-			for (const point of arrowEndpoints) overlay.circle(point.x, point.y, r).fill({
-				color: palette.surface,
-				alpha: 1
-			}).stroke({
-				color: brand,
-				width: 1.5 * inv
-			});
-			return;
-		}
-		if (hoveredControl?.kind === "resize" && transform.resizeMode === "free") {
-			const edge = frameEdgePoints(source, hoveredControl.handle);
-			if (edge) overlay.moveTo(edge[0].x, edge[0].y).lineTo(edge[1].x, edge[1].y).stroke({
-				color: brand,
-				width: 2.5 * inv,
-				alpha: 1
-			});
-		}
-		if (transform.resizeMode !== "none") for (const handle of CORNER_RESIZE_HANDLES) {
-			const position = frameHandlePosition(source, handle);
-			const hovered = hoveredControl?.kind === "resize" && hoveredControl.handle === handle;
-			overlay.circle(position.x, position.y, (hovered ? 5 : 4) * inv).fill({
-				color: hovered ? brand : palette.surface,
-				alpha: 1
-			}).stroke({
-				color: brand,
-				width: 1.5 * inv
-			});
-		}
-		if (transform.canRotate && (pointerType === "touch" || transform.resizeMode === "none")) {
-			const rotation = rotationPointer ?? rotationHandlePosition(source, zoom);
-			const anchor = rotationPointer ? frameRayIntersection(source, rotationPointer) : rotationHandleAnchor(source);
-			const hovered = rotationPointer !== null || hoveredControl?.kind === "rotate";
-			overlay.moveTo(anchor.x, anchor.y).lineTo(rotation.x, rotation.y).stroke({
-				color: brand,
-				width: inv,
-				alpha: .8
-			});
-			overlay.circle(rotation.x, rotation.y, (hovered ? 6 : 5) * inv).fill({ color: hovered ? brand : palette.surface }).stroke({
-				color: brand,
-				width: 1.5 * inv
-			});
+		return next;
+	}
+	function applyChildOrder(scene) {
+		const raised = new Set(lifted);
+		for (const id of lifted) if (scene.get(id)?.type === "frame") for (const child of scene.descendants(id)) raised.add(child);
+		const order = (id) => (orderById.get(id) ?? 0) + (raised.has(id) ? Z_LIFTED : 0);
+		for (const [id, entry] of cards) entry.container.zIndex = order(id);
+		for (const [id, entry] of clips) {
+			entry.group.zIndex = order(id) + .5;
+			entry.group.sortChildren();
 		}
+		world.sortChildren();
 	}
 	function destroy(context) {
 		for (const entry of cards.values()) entry.renderer.destroy?.(entry.container, context);
@@ -489,11 +395,13 @@ function createBoardScene(options) {
 		for (const entry of clips.values()) entry.group.destroy({ children: true });
 		clips.clear();
 		animatedIds.clear();
+		tickingIds.clear();
 		for (const id of [...liveStrokes.keys()]) removeLiveStroke(id, context);
 		resetFarLayer();
 		farActive = false;
 		visibleMemo = null;
 		lastStructureVersion = -1;
+		lastZoom = NaN;
 	}
 	return {
 		sync,
@@ -507,7 +415,7 @@ function createBoardScene(options) {
 		get animated() {
 			return animatedIds.size > 0;
 		},
-		drawOverlay,
+		tick,
 		destroy
 	};
 }

package/dist/board/stage/script-pointer.d.ts

@@ -13,6 +13,7 @@ declare function createBoardScriptPointerRouter(): {
     recipient: BoardScriptPointerTarget | null;
     click: BoardScriptPointerTarget | null;
   };
+  cancelScripts(cancel: (pointerId: number, target: BoardScriptPointerTarget) => void, owner?: string, retained?: Readonly<Record<string, unknown>>): void;
   clear(): void;
 };
 //#endregion

package/dist/board/stage/script-pointer.js

@@ -15,17 +15,23 @@ function createBoardScriptPointerRouter() {
 				...point
 			});
 			const gesture = gestures.get(pointerId);
-			const recipient = gesture ? gesture.target : phase === "move" ? target : null;
+			const recipient = gesture ? gesture.cancelled ? null : gesture.target : phase === "move" ? target : null;
 			let click = null;
 			if (phase === "up") {
 				gestures.delete(pointerId);
-				if (!cancelled && gesture?.target && target?.owner === gesture.target.owner && target.target === gesture.target.target && Math.hypot(point.x - gesture.x, point.y - gesture.y) < 5) click = gesture.target;
+				if (!cancelled && !gesture?.cancelled && gesture?.target && target?.owner === gesture.target.owner && target.target === gesture.target.target && Math.hypot(point.x - gesture.x, point.y - gesture.y) < 5) click = gesture.target;
 			}
 			return {
 				recipient,
 				click
 			};
 		},
+		cancelScripts(cancel, owner, retained) {
+			for (const [pointerId, gesture] of gestures) if (!gesture.cancelled && gesture.target && (!owner || gesture.target.owner === owner) && (!retained || !Object.hasOwn(retained, gesture.target.target))) {
+				gesture.cancelled = true;
+				cancel(pointerId, gesture.target);
+			}
+		},
 		clear() {
 			gestures.clear();
 		}

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

@@ -1,8 +1,8 @@
-import { BoardItem } from "../../protocol/dist/board-model.js";
+import { BoardItem, BoardTaskItem } from "../../protocol/dist/board-model.js";
 import { BoardPlaybackSnapshot } from "../../protocol/dist/board.js";
 import "../../protocol/dist/index.js";
+import { BoardViewport, Rect, WorldPoint } from "../model/geometry.js";
 import { BoardScriptOutput, BoardScriptSnapshot } from "../model/script.js";
-import { BoardViewport, WorldPoint } from "../model/geometry.js";
 import { BoardScene, BoardSceneItem } from "../model/scene.js";
 import { BoardShapeColors } from "../model/palette.js";
 import { BoardAssetSource } from "../model/media-playback.js";
@@ -10,7 +10,8 @@ import "../model/index.js";
 import { BoardPointerEvent } from "../editor/interaction.js";
 import { BoardEditor } from "../editor/editor.js";
 import "../editor/index.js";
-import { BoardCardRendererResolver, BoardRenderPalette } from "../render/renderers/board-renderer-registry.js";
+import { BoardRenderStyle } from "../render/style.js";
+import { BoardCardRendererResolver, BoardRenderLabels, BoardRenderPalette } from "../render/renderers/board-renderer-registry.js";
 import "../render/index.js";
 import { BoardAssetManager } from "./assets.js";
 import { BoardLiveStroke } from "./scene.js";
@@ -22,6 +23,7 @@ type BoardStageTheme = {
   palette: BoardRenderPalette;
   colors: BoardShapeColors;
   colorScheme: "dark" | "light";
+  style?: BoardRenderStyle;
   imageBackground?: boolean;
 };
 type BoardStagePointerPhase = "down" | "move" | "up" | "leave";
@@ -32,6 +34,12 @@ type BoardStageOptions = {
   renderers?: BoardCardRendererResolver;
   views?: readonly BoardItemView[];
   theme?: () => BoardStageTheme;
+  labels?: () => BoardRenderLabels;
+  taskRun?: (taskRunId: string) => {
+    status: BoardTaskItem["props"]["snapshot"]["status"];
+    startedAt?: string;
+  } | null;
+  reducedMotion?: () => boolean;
   playback?: () => BoardPlaybackSnapshot | null;
   fileState?: (path: string) => "ok" | "missing" | "unavailable";
   previews?: () => ReadonlyMap<string, BoardItem>;
@@ -48,6 +56,7 @@ type BoardStageOptions = {
     height: number;
   }) => void;
   onVisibleChange?: (ids: ReadonlySet<string> | null) => void;
+  safeRect?: () => Rect;
   scriptCapabilities?: Record<string, (id: string, input: unknown) => Promise<unknown>>;
 };
 type BoardStage = {
@@ -66,6 +75,7 @@ type BoardStage = {
   subscribeScripts(listener: () => void): () => void;
   invalidate(options?: {
     cards?: boolean;
+    items?: Iterable<string>;
   }): void;
   isMaterialized(id: string): boolean;
   toWorld(clientX: number, clientY: number): WorldPoint;