@neta-art/cohub 11.1.0 → 11.3.0

package/dist/board/stage/overlay.js

@@ -0,0 +1,182 @@
+import { CORNER_RESIZE_HANDLES, frameCorners, frameHandlePosition, frameRayIntersection, rotationHandleAnchor, rotationHandlePosition } from "../model/geometry.js";
+import { resolveSceneArrow } from "../model/arrow-geometry.js";
+import { tracePolyline } from "../render/stroke.js";
+import { cardOutlinePoints, isBoardCard, traceCardOutline } from "../render/surface.js";
+//#region src/board/stage/overlay.ts
+const HOVER_ALPHA = .55;
+const PEER_ALPHA = .6;
+function expandFrame(frame, by) {
+	return {
+		...frame,
+		x: frame.x - by,
+		y: frame.y - by,
+		width: frame.width + by * 2,
+		height: frame.height + by * 2
+	};
+}
+function traceFrame(graphics, frame) {
+	const corners = frameCorners(frame);
+	const first = corners[0];
+	if (!first) return graphics;
+	graphics.moveTo(first.x, first.y);
+	for (const point of corners.slice(1)) graphics.lineTo(point.x, point.y);
+	return graphics.closePath();
+}
+function edgeOf(frame, handle) {
+	const at = (corner) => frameHandlePosition(frame, corner);
+	switch (handle) {
+		case "n": return [at("nw"), at("ne")];
+		case "e": return [at("ne"), at("se")];
+		case "s": return [at("sw"), at("se")];
+		case "w": return [at("nw"), at("sw")];
+		default: return null;
+	}
+}
+function strokeOutline(graphics, frame, card, style, line, inv, dash, march) {
+	const shape = card ? style : {
+		corner: "round",
+		radius: 0
+	};
+	const rect = {
+		x: -frame.width / 2,
+		y: -frame.height / 2,
+		width: frame.width,
+		height: frame.height
+	};
+	const angle = (frame.rotation || 0) * Math.PI / 180;
+	graphics.save();
+	graphics.setTransform(Math.cos(angle), Math.sin(angle), -Math.sin(angle), Math.cos(angle), frame.x + frame.width / 2, frame.y + frame.height / 2);
+	if (dash > 0) tracePolyline(graphics, cardOutlinePoints(rect, shape), [dash * inv, dash * inv], false, march * inv);
+	else traceCardOutline(graphics, rect, shape);
+	graphics.stroke({
+		...line,
+		cap: "butt",
+		join: "miter"
+	});
+	graphics.restore();
+}
+function drawHandle(graphics, point, style, palette, inv, active) {
+	const size = (active ? style.selection.handleSize + 2 : style.selection.handleSize) * inv;
+	if (style.selection.handle === "square") graphics.rect(point.x - size / 2, point.y - size / 2, size, size);
+	else graphics.circle(point.x, point.y, size / 2);
+	graphics.fill({
+		color: active ? palette.brand : palette.surface,
+		alpha: 1
+	}).stroke({
+		color: palette.brand,
+		width: style.selection.width * inv,
+		alignment: 1
+	});
+}
+function strokeArrow(graphics, item, scene, color, inv, alpha) {
+	const arrow = item;
+	const path = resolveSceneArrow(arrow, scene).path;
+	const first = path[0];
+	if (!first) return;
+	graphics.moveTo(first.x, first.y);
+	for (const point of path.slice(1)) graphics.lineTo(point.x, point.y);
+	graphics.stroke({
+		color,
+		width: (arrow.style.strokeWidth ?? 2) + 6 * inv,
+		alpha,
+		cap: "round",
+		join: "round"
+	});
+}
+function drawBoardOverlay(graphics, input) {
+	const { zoom, palette, style, scene, selected, transform, controls, hoveredControl } = input;
+	const inv = 1 / Math.max(zoom, 1e-4);
+	const brand = palette.brand;
+	const outset = style.selection.outset * inv;
+	if (input.marquee) {
+		const { x, y, width, height } = input.marquee;
+		graphics.rect(x, y, width, height).fill({
+			color: brand,
+			alpha: .08
+		});
+		graphics.rect(x, y, width, height).stroke({
+			color: brand,
+			width: inv,
+			alpha: .7
+		});
+	}
+	if (input.bindTarget) traceFrame(graphics, input.bindTarget).stroke({
+		color: brand,
+		width: 2 * inv,
+		alpha: .9
+	});
+	for (const port of input.ports ?? []) {
+		const hovered = input.hoveredPort && Math.abs(input.hoveredPort.x - port.x) < .001 && Math.abs(input.hoveredPort.y - port.y) < .001;
+		const radius = (hovered ? port.radius * 1.5 : port.radius) * inv;
+		if (style.corner === "pixel") graphics.rect(port.x - radius, port.y - radius, radius * 2, radius * 2);
+		else graphics.circle(port.x, port.y, radius);
+		graphics.fill({
+			color: palette.surface,
+			alpha: 1
+		}).stroke({
+			color: brand,
+			width: 1.5 * inv,
+			alpha: hovered ? 1 : .8
+		});
+	}
+	const hovered = input.hovered;
+	if (hovered && hovered.type === "arrow") strokeArrow(graphics, hovered, scene, palette.muted, inv, .2);
+	else if (hovered) strokeOutline(graphics, expandFrame(hovered.frame, outset), isBoardCard(hovered), style, {
+		color: palette.muted,
+		width: inv * style.selection.width,
+		alpha: HOVER_ALPHA
+	}, inv, 0, 0);
+	if (selected.length === 0) return;
+	const single = selected.length === 1 ? selected[0] : void 0;
+	const dash = style.selection.dash;
+	const line = {
+		color: brand,
+		width: style.selection.width * inv,
+		alpha: 1
+	};
+	for (const item of selected) if (item.type === "arrow") strokeArrow(graphics, item, scene, brand, inv, .3);
+	else if (!single) strokeOutline(graphics, expandFrame(item.frame, outset), isBoardCard(item), style, {
+		...line,
+		alpha: PEER_ALPHA
+	}, inv, 0, 0);
+	if (!transform) return;
+	if (single?.type !== "arrow") {
+		const card = single ? isBoardCard(single) : false;
+		strokeOutline(graphics, expandFrame(transform.frame, outset), card, style, line, inv, dash, input.march);
+	}
+	if (!controls) return;
+	if (input.arrowEndpoints?.length) {
+		for (const point of input.arrowEndpoints) drawHandle(graphics, point, style, palette, inv, false);
+		return;
+	}
+	const frame = expandFrame(transform.frame, outset);
+	if (hoveredControl?.kind === "resize" && transform.resizeMode === "free") {
+		const edge = edgeOf(frame, hoveredControl.handle);
+		if (edge) graphics.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 active = hoveredControl?.kind === "resize" && hoveredControl.handle === handle;
+		drawHandle(graphics, frameHandlePosition(frame, handle), style, palette, inv, active);
+	}
+	if (transform.canRotate && (input.pointerType === "touch" || transform.resizeMode === "none")) {
+		const pointer = input.rotationPointer;
+		const rotation = pointer ?? rotationHandlePosition(frame, zoom);
+		const anchor = pointer ? frameRayIntersection(frame, pointer) : rotationHandleAnchor(frame);
+		const active = pointer !== null || hoveredControl?.kind === "rotate";
+		graphics.moveTo(anchor.x, anchor.y).lineTo(rotation.x, rotation.y).stroke({
+			color: brand,
+			width: inv,
+			alpha: .8
+		});
+		graphics.circle(rotation.x, rotation.y, (active ? 6 : 5) * inv).fill({ color: active ? brand : palette.surface }).stroke({
+			color: brand,
+			width: 1.5 * inv
+		});
+	}
+}
+//#endregion
+export { drawBoardOverlay, expandFrame };

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

@@ -1,11 +1,7 @@
 import { BoardDrawPoint } from "../../protocol/dist/board-model.js";
-import { BoardFrame } from "../../protocol/dist/board-layout.js";
-import { Rect, WorldPoint } from "../model/geometry.js";
 import { BoardScene as BoardScene$1, BoardSceneItem } from "../model/scene.js";
 import "../model/index.js";
-import { BoardSelectionTransform, BoardTransformControl } from "../editor/selection-transform.js";
-import "../editor/index.js";
-import { BoardCardRendererResolver, BoardRenderContext, BoardRenderPalette } from "../render/renderers/board-renderer-registry.js";
+import { BoardCardRendererResolver, BoardRenderContext } from "../render/renderers/board-renderer-registry.js";
 import "../render/index.js";
 import { Container, Graphics } from "pixi.js";
 //#region src/board/stage/scene.d.ts
@@ -29,42 +25,6 @@ type SceneSyncInput = {
   geometryVersion: number;
   gestureActive: boolean;
 };
-type SceneOverlayInput = {
-  zoom: number;
-  pointerType: string;
-  marquee: Rect | null;
-  selection: string[];
-  transform: BoardSelectionTransform | null;
-  controls: boolean;
-  hoveredControl: BoardTransformControl | null;
-  rotationPointer: WorldPoint | null;
-  arrowEndpoints?: Array<{
-    x: number;
-    y: number;
-  }>;
-  ports?: ReadonlyArray<{
-    x: number;
-    y: number;
-    radius: number;
-  }>;
-  hoveredPort?: {
-    x: number;
-    y: number;
-  } | null;
-  arrowDraft?: {
-    from: {
-      x: number;
-      y: number;
-    };
-    to: {
-      x: number;
-      y: number;
-    };
-    size: number;
-    targetFrame: BoardFrame | null;
-  } | null;
-  bindTarget?: BoardFrame | null;
-};
 type BoardSceneNode = {
   item: BoardSceneItem;
   container: Container;
@@ -74,7 +34,6 @@ type BoardScene = {
   getNode: (itemId: string) => BoardSceneNode | null;
   readonly animated: boolean;
   tick: (clock: number) => number | null;
-  drawOverlay: (input: SceneOverlayInput, palette: BoardRenderPalette) => void;
   destroy: (context: BoardRenderContext) => void;
 };
 declare function createBoardScene(options: {
@@ -84,4 +43,4 @@ declare function createBoardScene(options: {
   onFarLayerFrame?: () => void;
 }): BoardScene;
 //#endregion
-export { BoardLiveStroke, BoardScene, BoardSceneNode, SceneOverlayInput, SceneSyncInput, createBoardScene };
+export { BoardLiveStroke, BoardScene, BoardSceneNode, SceneSyncInput, createBoardScene };

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;
@@ -55,6 +35,8 @@ function createBoardScene(options) {
 	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;
@@ -138,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();
@@ -355,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 = input.staleIds?.has(id) || 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;
@@ -370,7 +354,13 @@ function createBoardScene(options) {
 			}
 		}
 		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 tick(clock) {
@@ -383,114 +373,16 @@ function createBoardScene(options) {
 		}
 		return next;
 	}
-	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
-			});
-		}
-		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
-			});
+	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);
@@ -509,6 +401,7 @@ function createBoardScene(options) {
 		farActive = false;
 		visibleMemo = null;
 		lastStructureVersion = -1;
+		lastZoom = NaN;
 	}
 	return {
 		sync,
@@ -523,7 +416,6 @@ function createBoardScene(options) {
 			return animatedIds.size > 0;
 		},
 		tick,
-		drawOverlay,
 		destroy
 	};
 }

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

@@ -10,6 +10,7 @@ import "../model/index.js";
 import { BoardPointerEvent } from "../editor/interaction.js";
 import { BoardEditor } from "../editor/editor.js";
 import "../editor/index.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";
@@ -22,6 +23,7 @@ type BoardStageTheme = {
   palette: BoardRenderPalette;
   colors: BoardShapeColors;
   colorScheme: "dark" | "light";
+  style?: BoardRenderStyle;
   imageBackground?: boolean;
 };
 type BoardStagePointerPhase = "down" | "move" | "up" | "leave";

package/dist/board/stage/stage.js

@@ -14,12 +14,14 @@ import { createBoardBackground, updateBoardBackground } from "../render/board-ba
 import { getBoardResolution, textZoomBucket } from "../render/text-resolution.js";
 import { DEFAULT_BOARD_RENDER_LABELS, getBoardCardRenderer } from "../render/renderers/board-renderer-registry.js";
 import { createBoardScriptHost } from "../render/script-host.js";
+import { defaultBoardRenderStyle } from "../render/style.js";
 import { createBoardPlayer } from "../player/index.js";
 import { createBoardScriptObservers } from "../model/script-observers.js";
 import { toBoardPointerEvent } from "./pointer.js";
 import { createBoardScene } from "./scene.js";
 import { scheduleBoardMaintenance } from "./maintenance.js";
 import { createBoardScriptPointerRouter } from "./script-pointer.js";
+import { drawBoardOverlay } from "./overlay.js";
 import { createBoardItemViewLayer } from "./views.js";
 import { Application, Container, Graphics, RendererType } from "pixi.js";
 //#region src/board/stage/stage.ts
@@ -42,7 +44,19 @@ function defaultTheme() {
 		colorScheme: "dark"
 	};
 }
+const NO_IDS = /* @__PURE__ */ new Set();
+const MARCH_STEP_MS = 160;
+const MARCH_SMOOTH_MS = 40;
 const ROTATE_CURSOR = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8M21 3v5h-5' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36L21 8M21 3v5h-5' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, crosshair`;
+const defaultStyles = /* @__PURE__ */ new Map();
+function styleOf(theme) {
+	if (theme.style) return theme.style;
+	const cached = defaultStyles.get(theme.colorScheme);
+	if (cached) return cached;
+	const style = defaultBoardRenderStyle(theme.colorScheme);
+	defaultStyles.set(theme.colorScheme, style);
+	return style;
+}
 function mountBoardStage(host, options) {
 	const { editor, assets } = options;
 	const theme = options.theme ?? defaultTheme;
@@ -148,6 +162,19 @@ function mountBoardStage(host, options) {
 		}
 		if (sizes.length > 0) editor.adoptMediaNaturalSizes(sizes);
 	}
+	let lifted = null;
+	function liftedIds() {
+		const interaction = editor.interaction;
+		if (interaction.type !== "translating" || !interaction.moved) {
+			lifted = null;
+			return NO_IDS;
+		}
+		if (lifted?.origin !== interaction.origin) lifted = {
+			origin: interaction.origin,
+			ids: new Set(interaction.origin.keys())
+		};
+		return lifted.ids;
+	}
 	function renderContext(current, renderScene, time) {
 		const interaction = editor.interaction;
 		return {
@@ -158,9 +185,12 @@ function mountBoardStage(host, options) {
 			selectedIds: new Set(editor.selection),
 			hoveredId: editor.hoverId,
 			resizingIds: interaction.type === "resizing" ? new Set(interaction.origin.keys()) : /* @__PURE__ */ new Set(),
+			liftedIds: liftedIds(),
 			palette: current.palette,
 			colors: current.colors,
 			colorScheme: current.colorScheme,
+			style: styleOf(current),
+			themeKey: current.key,
 			rendererType: app?.renderer.type === RendererType.CANVAS ? "canvas" : "gpu",
 			zoom: renderCamera().zoom,
 			reducedMotion: options.reducedMotion?.() ?? false,
@@ -275,6 +305,72 @@ function mountBoardStage(host, options) {
 			});
 		}
 	}
+	let march = 0;
+	let marchTimer = null;
+	function stopMarch() {
+		if (marchTimer !== null) clearTimeout(marchTimer);
+		marchTimer = null;
+	}
+	function scheduleMarch(style) {
+		const stepped = style.motion === "stepped";
+		if (marchTimer !== null || !active || disposed) return;
+		marchTimer = setTimeout(() => {
+			marchTimer = null;
+			march += stepped ? 2 : 1;
+			drawInteraction();
+			scheduleRender();
+		}, stepped ? MARCH_STEP_MS : MARCH_SMOOTH_MS);
+	}
+	function drawInteraction() {
+		if (!overlay) return;
+		const current = theme();
+		const style = styleOf(current);
+		const renderScene = editor.scene;
+		const camera = renderCamera();
+		const interaction = editor.interaction;
+		const selected = editor.selection.flatMap((id) => renderScene.get(id) ?? []);
+		const single = selected.length === 1 ? selected[0] : void 0;
+		let arrowEndpoints;
+		if (single?.type === "arrow" && !single.locked) {
+			const resolved = resolveSceneArrow(single, renderScene);
+			arrowEndpoints = [
+				resolved.start.point,
+				resolved.mid,
+				resolved.end.point
+			];
+		}
+		const hoverId = interaction.type === "idle" ? editor.hoverId : null;
+		const hovered = hoverId && !editor.selection.includes(hoverId) ? renderScene.get(hoverId) ?? null : null;
+		overlay.clear();
+		drawBoardOverlay(overlay, {
+			zoom: camera.zoom,
+			pointerType: editor.pointerType,
+			palette: current.palette,
+			style,
+			scene: renderScene,
+			hovered,
+			selected,
+			march,
+			marquee: editor.marquee,
+			transform: editor.selectionTransform,
+			controls: editor.tool === "select",
+			hoveredControl: editor.hoveredTransformControl,
+			rotationPointer: interaction.type === "rotating" ? interaction.current : null,
+			arrowEndpoints,
+			ports: editor.connectionPorts,
+			hoveredPort: editor.hoveredConnectionPort,
+			bindTarget: editor.bindTargetFrame ?? editor.arrowDraft?.targetFrame ?? null
+		});
+		options.drawOverlay?.(overlay, {
+			zoom: camera.zoom,
+			theme: current,
+			scene: renderScene
+		});
+		drawTransient(overlay, current);
+		editor.controlOutset = style.selection.outset;
+		if (style.selection.dash > 0 && selected.length > 0 && !(options.reducedMotion?.() ?? false)) scheduleMarch(style);
+		else stopMarch();
+	}
 	function cursorFor() {
 		if (scriptMode === "interact" && scriptHover) {
 			const output = scriptOutputs.get(scriptHover.owner);
@@ -506,38 +602,7 @@ function mountBoardStage(host, options) {
 			gestureActive: editor.gestureActive && editor.interaction.type !== "panning"
 		});
 		staleIds.clear();
-		const single = editor.selection.length === 1 ? renderScene.get(editor.selection[0]) : null;
-		let arrowEndpoints;
-		if (single?.type === "arrow" && !single.locked) {
-			const resolved = resolveSceneArrow(single, renderScene);
-			arrowEndpoints = [
-				resolved.start.point,
-				resolved.mid,
-				resolved.end.point
-			];
-		}
-		const interaction = editor.interaction;
-		scene.drawOverlay({
-			zoom: camera.zoom,
-			pointerType: editor.pointerType,
-			marquee: editor.marquee,
-			selection: editor.selection,
-			transform: editor.selectionTransform,
-			controls: editor.tool === "select",
-			hoveredControl: editor.hoveredTransformControl,
-			rotationPointer: interaction.type === "rotating" ? interaction.current : null,
-			arrowEndpoints,
-			ports: editor.connectionPorts,
-			hoveredPort: editor.hoveredConnectionPort,
-			arrowDraft: null,
-			bindTarget: editor.bindTargetFrame ?? editor.arrowDraft?.targetFrame ?? null
-		}, current.palette);
-		options.drawOverlay?.(overlay, {
-			zoom: camera.zoom,
-			theme: current,
-			scene: renderScene
-		});
-		drawTransient(overlay, current);
+		drawInteraction();
 		views.sync({
 			ids,
 			scene: renderScene,
@@ -809,6 +874,7 @@ function mountBoardStage(host, options) {
 			if (active === next) return;
 			active = next;
 			if (!active) {
+				stopMarch();
 				cancelScriptPointers();
 				cancelAnimationFrame(renderFrame);
 				cancelAnimationFrame(tickFrame);
@@ -836,6 +902,7 @@ function mountBoardStage(host, options) {
 		toWorld: (clientX, clientY) => screenToWorld(clientX, clientY, rectOf(), renderCamera()),
 		destroy() {
 			disposed = true;
+			stopMarch();
 			scriptPointers.clear();
 			stopTransforms?.();
 			scriptObservers.clear();