@neta-art/cohub 8.24.0 → 9.0.0

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

@@ -1,4 +1,6 @@
-import { BoardDocument, BoardItem } from "../../../protocol/dist/board-document.js";
+import { BoardSettings, BoardSketchItem } from "../../../protocol/dist/board-model.js";
+import "../../../protocol/dist/index.js";
+import { BoardScene, BoardSceneItem, SceneItem } from "../../core/scene.js";
 import { BoardShapeColors } from "../../core/palette.js";
 import { Container, Graphics, Texture } from "pixi.js";
 //#region src/board/render/renderers/board-renderer-registry.d.ts
@@ -14,74 +16,42 @@ type BoardRenderPalette = {
   epic: number;
   legendary: number;
 };
+type BoardSketchHost = {
+  frame: (item: SceneItem<BoardSketchItem>, time: number, resolution: number) => Texture | null;
+  error: (id: string) => string | null;
+  release: (id: string) => void;
+};
 type BoardRenderContext = {
-  document: BoardDocument;
-  /**
-   * O(1) item lookup by id. Renderers that need to resolve references (arrow
-   * bindings) must use this rather than scanning `document.items`, which would
-   * be O(items) per card per frame.
-   */
-  getItem: (id: string) => BoardItem | null;
+  settings: BoardSettings;
+  scene: BoardScene;
   selectedIds: Set<string>;
   hoveredId: string | null;
-  /** Nodes currently receiving a live resize preview. */
   resizingIds: Set<string>;
   palette: BoardRenderPalette;
-  /**
-   * Live shape colors resolved from CSS tokens (theme + space theme.css).
-   * Prefer this over hard-coded light/dark tables at render time.
-   */
   colors: BoardShapeColors;
-  /** Resolved color mode, for fallback mapping when colors are unavailable. */
   colorScheme: "dark" | "light";
-  /** Rendering backend selected by the host; Canvas uses compatibility paths. */
   rendererType: "gpu" | "canvas";
-  /** Current camera zoom — used for text re-rasterisation buckets. */
   zoom: number;
-  /** Stable preview texture key for an item, or null when it has no preview. */
-  assetKey: (item: BoardItem) => string | null;
-  /** Currently loaded texture for a key (null while loading). */
+  time: number;
+  sketches?: BoardSketchHost;
+  assetKey: (item: BoardSceneItem) => string | null;
   getTexture: (key: string) => Texture | null;
-  /** Whether the preview for a key failed to load (for a failure placeholder). */
   hasError: (key: string) => boolean;
-  /**
-   * Whether a referenced workspace file could not be read, and why. Transient,
-   * client-local state — never part of the document — so one client's outage is
-   * not shown to everyone.
-   */
   fileState: (path: string) => "ok" | "missing" | "unavailable";
-  /** Reference-counted texture acquisition and release. */
   acquireTexture: (key: string) => void;
   releaseTexture: (key: string) => void;
 };
 type BoardCardRenderer = {
   id: string;
-  canRender: (item: BoardItem, context: BoardRenderContext) => boolean;
-  create: (item: BoardItem, context: BoardRenderContext) => Container;
-  /** Efficiently sync an existing container to a (possibly changed) item. */
-  update: (container: Container, item: BoardItem, context: BoardRenderContext) => void;
-  /**
-   * Draw the item as flat batched geometry into a shared `Graphics`, for the
-   * far LOD used when too many cards are on screen to afford a container each.
-   *
-   * Implementing this opts the shape into the far layer: past the scene's
-   * visible-card threshold it is drawn here instead of being materialised, so
-   * cost stops scaling with node count. Omit it for shapes whose whole point is
-   * their vector detail (strokes, arrows, frames) — those keep real containers.
-   *
-   * Must draw in world space and must not allocate per call beyond the path
-   * itself; this runs once per far-capable item on every far-layer rebuild.
-   */
-  renderFar?: (graphics: Graphics, item: BoardItem, context: BoardRenderContext) => void;
+  canRender: (item: BoardSceneItem, context: BoardRenderContext) => boolean;
+  animated?: boolean;
+  create: (item: BoardSceneItem, context: BoardRenderContext) => Container;
+  update: (container: Container, item: BoardSceneItem, context: BoardRenderContext) => void;
+  renderFar?: (graphics: Graphics, item: BoardSceneItem, context: BoardRenderContext) => void;
   destroy?: (container: Container, context: BoardRenderContext) => void;
 };
-/**
- * Every registered renderer, for invariants that must hold across all of them —
- * notably that each can draw itself at far LOD, which is what keeps the far
- * layer's z-order correct (see board-scene).
- */
 declare function boardCardRenderersForTest(): readonly BoardCardRenderer[];
-declare function getBoardCardRenderer(item: BoardItem, context: BoardRenderContext): BoardCardRenderer;
+declare function getBoardCardRenderer(item: BoardSceneItem, context: BoardRenderContext): BoardCardRenderer;
 declare function registerBoardCardRenderer(renderer: BoardCardRenderer): void;
 //#endregion
-export { BoardCardRenderer, BoardRenderContext, BoardRenderPalette, boardCardRenderersForTest, getBoardCardRenderer, registerBoardCardRenderer };
+export { BoardCardRenderer, BoardRenderContext, BoardRenderPalette, BoardSketchHost, boardCardRenderersForTest, getBoardCardRenderer, registerBoardCardRenderer };

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

@@ -4,8 +4,10 @@ import { ensureBoardTextMeasurement } from "../text-measurement.js";
 import { arrowCardRenderer } from "./arrow-card-renderer.js";
 import { audioCardRenderer } from "./audio-card-renderer.js";
 import { drawCardRenderer } from "./draw-card-renderer.js";
+import { effectCardRenderer } from "./effect-card-renderer.js";
 import { frameCardRenderer } from "./frame-card-renderer.js";
-import { geoCardRenderer } from "./geo-card-renderer.js";
+import { shapeCardRenderer } from "./shape-card-renderer.js";
+import { sketchCardRenderer } from "./sketch-card-renderer.js";
 import { imageCardRenderer } from "./image-card-renderer.js";
 import { textCardRenderer } from "./text-card-renderer.js";
 import { unknownCardRenderer } from "./unknown-card-renderer.js";
@@ -18,17 +20,14 @@ const boardCardRenderers = [
 	audioCardRenderer,
 	fileCardRenderer,
 	taskCardRenderer,
-	geoCardRenderer,
+	shapeCardRenderer,
 	drawCardRenderer,
 	arrowCardRenderer,
 	frameCardRenderer,
+	effectCardRenderer,
+	sketchCardRenderer,
 	unknownCardRenderer
 ];
-/**
-* Every registered renderer, for invariants that must hold across all of them —
-* notably that each can draw itself at far LOD, which is what keeps the far
-* layer's z-order correct (see board-scene).
-*/
 function boardCardRenderersForTest() {
 	return boardCardRenderers;
 }

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

@@ -1,79 +1,110 @@
-import { buildStrokeRibbonGeometry, computeDrawBounds } from "../../core/draw-geometry.js";
-import { pickBoardColor } from "../../core/palette.js";
+import { applyMatrix } from "../../../protocol/dist/board-layout.js";
+import { computeDrawBounds, createStrokeRibbonBuilder, trimDrawPoints } from "../../core/draw-geometry.js";
 import { positionShell } from "./base-card-renderer.js";
-import { drawFarStroke } from "./far-plate.js";
+import { drawFarStroke, farStrokeSamples } from "./far-plate.js";
+import { itemColor } from "../palette.js";
 import { Container, Graphics, Mesh, MeshGeometry, Texture } from "pixi.js";
 //#region src/board/render/renderers/draw-card-renderer.ts
 const partsByContainer = /* @__PURE__ */ new WeakMap();
-/** Canvas fallback for environments where Pixi intentionally has no Mesh pipe. */
-function createCanvasStroke(positions, indices, color, alpha) {
-	const graphics = new Graphics();
+function fillRibbon(graphics, ribbon, color) {
+	const { positions, indices } = ribbon;
 	for (let offset = 0; offset < indices.length; offset += 3) {
 		const a = (indices[offset] ?? 0) * 2;
 		const b = (indices[offset + 1] ?? 0) * 2;
 		const c = (indices[offset + 2] ?? 0) * 2;
 		graphics.moveTo(positions[a] ?? 0, positions[a + 1] ?? 0).lineTo(positions[b] ?? 0, positions[b + 1] ?? 0).lineTo(positions[c] ?? 0, positions[c + 1] ?? 0).closePath();
 	}
-	return graphics.fill({
-		color,
-		alpha
-	});
+	return graphics.fill({ color });
+}
+function replaceStroke(parts, next) {
+	if (parts.stroke) {
+		parts.root.removeChild(parts.stroke);
+		parts.stroke.destroy();
+	}
+	parts.stroke = next;
+	parts.root.addChild(next);
+	return next;
+}
+function tessellate(parts, points, size, paint) {
+	parts.ribbon ??= createStrokeRibbonBuilder(size);
+	const ribbon = parts.ribbon.build(points);
+	if (paint !== null) {
+		fillRibbon(parts.stroke instanceof Graphics ? parts.stroke.clear() : replaceStroke(parts, new Graphics()), ribbon, paint);
+		return;
+	}
+	if (ribbon.indices.length === 0) {
+		if (parts.stroke) parts.stroke.visible = false;
+		return;
+	}
+	if (parts.uvs.length < ribbon.positions.length) parts.uvs = new Float32Array(ribbon.positions.length * 2);
+	const { positions, indices } = ribbon;
+	const uvs = parts.uvs.subarray(0, positions.length);
+	if (parts.stroke instanceof Mesh) {
+		const geometry = parts.stroke.geometry;
+		geometry.positions = positions;
+		geometry.uvs = uvs;
+		geometry.indices = indices;
+		parts.stroke.visible = true;
+		return;
+	}
+	replaceStroke(parts, new Mesh({
+		geometry: new MeshGeometry({
+			positions,
+			uvs,
+			indices
+		}),
+		texture: Texture.WHITE
+	}));
 }
 function sync(container, item, context) {
 	const parts = partsByContainer.get(container);
 	if (!parts) return;
 	positionShell(parts.root, item);
-	const selected = context.selectedIds.has(item.id);
-	const hovered = context.hoveredId === item.id;
-	const color = pickBoardColor(context.colors, item.color, context.colorScheme);
-	const sig = [
-		item.points.length,
-		item.size,
-		item.color,
-		selected,
-		hovered,
-		context.colorScheme,
-		color.stroke
-	].join("|");
-	if (sig !== parts.sig || item.points !== parts.points) {
-		parts.sig = sig;
-		parts.points = item.points;
-		parts.baseWidth = computeDrawBounds(item.points, item.size).width;
-		const ribbon = buildStrokeRibbonGeometry(item.points, item.size);
-		const alpha = selected || hovered ? 1 : .92;
-		const nextStroke = context.rendererType !== "canvas" ? new Mesh({
-			geometry: new MeshGeometry({
-				positions: ribbon.positions,
-				indices: ribbon.indices
-			}),
-			texture: Texture.WHITE
-		}) : createCanvasStroke(ribbon.positions, ribbon.indices, color.stroke, alpha);
-		if (nextStroke instanceof Mesh) {
-			nextStroke.tint = color.stroke;
-			nextStroke.alpha = alpha;
-		}
-		const previous = parts.stroke;
-		parts.stroke = nextStroke;
-		parts.root.removeChild(previous);
-		previous.destroy();
-		parts.root.addChild(nextStroke);
+	const { points } = item.props;
+	const size = item.style.strokeWidth ?? 4;
+	const trim = item.style.trim;
+	const color = itemColor(context, item.style.stroke, "brand");
+	const paint = context.rendererType === "canvas" ? color : null;
+	if (points !== parts.points || points.length !== parts.count || size !== parts.size || trim !== parts.trim || paint !== parts.paint) {
+		if (size !== parts.size) parts.ribbon = null;
+		parts.points = points;
+		parts.count = points.length;
+		parts.size = size;
+		parts.trim = trim;
+		parts.paint = paint;
+		parts.box = computeDrawBounds(points, size);
+		tessellate(parts, trimDrawPoints(points, trim), size, paint);
 	}
-	const previewScale = item.frame.width / Math.max(1e-4, parts.baseWidth);
-	parts.stroke.scale.set(Number.isFinite(previewScale) ? previewScale : 1);
+	const stroke = parts.stroke;
+	if (!stroke) return;
+	if (stroke instanceof Mesh) stroke.tint = color;
+	const { box } = parts;
+	const sx = item.frame.width / box.width;
+	const sy = item.frame.height / box.height;
+	stroke.scale.set(sx, sy);
+	stroke.position.set(-box.x * sx, -box.y * sy);
 }
 const drawCardRenderer = {
 	id: "draw-card",
 	canRender: (item) => item.type === "draw",
 	create: (item, context) => {
 		const root = new Container();
-		const stroke = new Graphics();
-		root.addChild(stroke);
 		partsByContainer.set(root, {
 			root,
-			stroke,
-			sig: "",
+			stroke: null,
+			ribbon: null,
+			uvs: /* @__PURE__ */ new Float32Array(0),
 			points: null,
-			baseWidth: 0
+			count: 0,
+			size: 0,
+			trim: void 0,
+			paint: null,
+			box: {
+				x: 0,
+				y: 0,
+				width: 1,
+				height: 1
+			}
 		});
 		if (item.type === "draw") sync(root, item, context);
 		return root;
@@ -83,11 +114,13 @@ const drawCardRenderer = {
 	},
 	renderFar: (graphics, item, context) => {
 		if (item.type !== "draw") return;
-		const color = pickBoardColor(context.colors, item.color, context.colorScheme);
-		drawFarStroke(graphics, item.points, {
-			color: color.stroke,
-			width: item.size,
-			alpha: .92
+		const draw = item;
+		const matrix = context.scene.layout.matrix(draw.id);
+		const samples = farStrokeSamples(trimDrawPoints(draw.props.points, draw.style.trim));
+		drawFarStroke(graphics, samples.map((point) => applyMatrix(matrix, point)), {
+			color: itemColor(context, draw.style.stroke, "brand"),
+			width: draw.style.strokeWidth ?? 4,
+			alpha: 1
 		});
 	},
 	destroy: (container) => {

package/dist/board/render/renderers/effect-card-renderer.d.ts

@@ -0,0 +1,6 @@
+import { BoardCardRenderer } from "./board-renderer-registry.js";
+//#region src/board/render/renderers/effect-card-renderer.d.ts
+declare const BOARD_EFFECT_MAX_PARTICLES = 4000;
+declare const effectCardRenderer: BoardCardRenderer;
+//#endregion
+export { BOARD_EFFECT_MAX_PARTICLES, effectCardRenderer };

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

@@ -0,0 +1,197 @@
+import { positionShell } from "./base-card-renderer.js";
+import { drawFarPlate } from "./far-plate.js";
+import { itemColor } from "../palette.js";
+import { Container, Graphics } from "pixi.js";
+//#region src/board/render/renderers/effect-card-renderer.ts
+const BOARD_EFFECT_MAX_PARTICLES = 4e3;
+const TRAIL_SAMPLES = 64;
+const partsByContainer = /* @__PURE__ */ new WeakMap();
+function hashString(value) {
+	let hash = 2166136261;
+	for (let index = 0; index < value.length; index += 1) {
+		hash ^= value.charCodeAt(index);
+		hash = Math.imul(hash, 16777619);
+	}
+	return hash >>> 0;
+}
+function random(seed, index, channel) {
+	let x = (seed ^ Math.imul(index + 1, 2654435761) ^ Math.imul(channel + 1, 2246822519)) >>> 0;
+	x ^= x >>> 16;
+	x = Math.imul(x, 2146121005);
+	x ^= x >>> 15;
+	x = Math.imul(x, 2221713035);
+	x ^= x >>> 16;
+	return (x >>> 0) / 4294967296;
+}
+function velocity(props, seed, index) {
+	const angle = (props.direction + (random(seed, index, 1) - .5) * props.spread) * Math.PI / 180;
+	const speed = props.speed * (.7 + random(seed, index, 2) * .6);
+	return {
+		vx: Math.cos(angle) * speed,
+		vy: Math.sin(angle) * speed
+	};
+}
+function drawParticles(graphics, props, width, height, time, seed, color) {
+	const rate = props.rate * props.intensity;
+	if (rate <= 0) return;
+	const life = props.life;
+	const interval = 1e3 / rate;
+	const newest = Math.floor(time / interval);
+	const count = Math.min(BOARD_EFFECT_MAX_PARTICLES, Math.ceil(life / interval));
+	for (let index = Math.max(0, newest - count + 1); index <= newest; index += 1) {
+		const age = (time - index * interval) / 1e3;
+		if (age < 0 || age * 1e3 > life) continue;
+		const progress = age * 1e3 / life;
+		const { vx, vy } = velocity(props, seed, index);
+		const x = random(seed, index, 3) * width + vx * age;
+		const y = random(seed, index, 4) * height + vy * age + .5 * props.gravity * age * age;
+		const size = props.particleSize * (.6 + random(seed, index, 5) * .8) * (1 - progress * .5);
+		graphics.circle(x, y, size / 2).fill({
+			color,
+			alpha: (1 - progress) * Math.min(1, props.intensity)
+		});
+	}
+}
+function drawImpact(graphics, props, width, height, time, seed, color) {
+	const life = props.life;
+	const cycle = Math.floor(time / life);
+	const age = (time - cycle * life) / 1e3;
+	const progress = age * 1e3 / life;
+	const count = Math.min(BOARD_EFFECT_MAX_PARTICLES, Math.round(props.rate * props.intensity));
+	const cx = width / 2;
+	const cy = height / 2;
+	const alpha = (1 - progress) ** 1.5 * Math.min(1, props.intensity);
+	const radius = Math.min(width, height) * .5 * Math.sqrt(progress);
+	graphics.circle(cx, cy, radius).stroke({
+		color,
+		width: Math.max(1, props.particleSize * (1 - progress)),
+		alpha: alpha * .8
+	});
+	const burst = hashString(`${seed}:${cycle}`);
+	for (let index = 0; index < count; index += 1) {
+		const { vx, vy } = velocity({
+			...props,
+			spread: props.spread
+		}, burst, index);
+		const x = cx + vx * age;
+		const y = cy + vy * age + .5 * props.gravity * age * age;
+		graphics.circle(x, y, props.particleSize / 2 * (1 - progress * .6)).fill({
+			color,
+			alpha
+		});
+	}
+}
+function drawFlash(graphics, props, width, height, time, color) {
+	const alpha = (1 - time % props.life / props.life) ** 2 * Math.min(1, props.intensity);
+	if (alpha <= .001) return;
+	graphics.rect(0, 0, width, height).fill({
+		color,
+		alpha
+	});
+}
+function drawGlow(graphics, props, width, height, time, color) {
+	const pulse = .75 + .25 * Math.sin(time / props.life * Math.PI * 2);
+	const rings = 12;
+	const cx = width / 2;
+	const cy = height / 2;
+	for (let ring = rings; ring >= 1; ring -= 1) {
+		const fraction = ring / rings;
+		graphics.ellipse(cx, cy, width / 2 * fraction, height / 2 * fraction).fill({
+			color,
+			alpha: Math.min(1, props.intensity) * pulse * (1 - fraction) * 2 / rings
+		});
+	}
+}
+function drawTrail(graphics, parts, item, context, color) {
+	const target = item.props.follow ? context.scene.get(item.props.follow) : void 0;
+	const time = context.time;
+	if (!target) {
+		parts.trail.length = 0;
+		return;
+	}
+	const head = {
+		x: target.frame.x + target.frame.width / 2 - item.frame.x,
+		y: target.frame.y + target.frame.height / 2 - item.frame.y,
+		t: time
+	};
+	const last = parts.trail.at(-1);
+	if (last && (time < last.t || time - last.t > item.props.life)) parts.trail.length = 0;
+	if (!last || Math.hypot(head.x - last.x, head.y - last.y) > .5) parts.trail.push(head);
+	while (parts.trail.length > TRAIL_SAMPLES || parts.trail[0] && time - parts.trail[0].t > item.props.life) parts.trail.shift();
+	for (let index = 1; index < parts.trail.length; index += 1) {
+		const a = parts.trail[index - 1];
+		const b = parts.trail[index];
+		const fade = 1 - (time - b.t) / item.props.life;
+		graphics.moveTo(a.x, a.y).lineTo(b.x, b.y).stroke({
+			color,
+			width: item.props.particleSize * fade,
+			alpha: fade * Math.min(1, item.props.intensity),
+			cap: "round"
+		});
+	}
+}
+function sync(container, item, context) {
+	const parts = partsByContainer.get(container);
+	if (!parts) return;
+	positionShell(parts.root, item);
+	const { width, height } = item.frame;
+	const { props } = item;
+	const color = itemColor(context, item.style.fill ?? item.style.stroke, "brand", "fill");
+	const seed = hashString(props.seed ?? item.id);
+	const time = Math.max(0, context.time);
+	const graphics = parts.graphics;
+	graphics.clear();
+	switch (props.kind) {
+		case "particles":
+			drawParticles(graphics, props, width, height, time, seed, color);
+			break;
+		case "impact":
+			drawImpact(graphics, props, width, height, time, seed, color);
+			break;
+		case "flash":
+			drawFlash(graphics, props, width, height, time, color);
+			break;
+		case "glow":
+			drawGlow(graphics, props, width, height, time, color);
+			break;
+		case "trail": drawTrail(graphics, parts, item, context, color);
+	}
+	if (context.selectedIds.has(item.id) || context.hoveredId === item.id) graphics.rect(0, 0, width, height).stroke({
+		color: context.palette.muted,
+		width: 1,
+		alpha: .6
+	});
+}
+const effectCardRenderer = {
+	id: "effect-card",
+	canRender: (item) => item.type === "effect",
+	animated: true,
+	create: (item, context) => {
+		const root = new Container();
+		const graphics = new Graphics();
+		root.addChild(graphics);
+		partsByContainer.set(root, {
+			root,
+			graphics,
+			trail: []
+		});
+		if (item.type === "effect") sync(root, item, context);
+		return root;
+	},
+	update: (container, item, context) => {
+		if (item.type === "effect") sync(container, item, context);
+	},
+	renderFar: (graphics, item, context) => {
+		if (item.type !== "effect") return;
+		drawFarPlate(graphics, item.frame, {
+			fill: itemColor(context, item.style.fill, "brand", "fill"),
+			fillAlpha: .08
+		});
+	},
+	destroy: (container) => {
+		partsByContainer.get(container)?.root.destroy({ children: true });
+		partsByContainer.delete(container);
+	}
+};
+//#endregion
+export { BOARD_EFFECT_MAX_PARTICLES, effectCardRenderer };

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

@@ -1,32 +1,15 @@
-import { BoardFrame } from "../../../protocol/dist/board-document.js";
+import { BoardFrame } from "../../../protocol/dist/board-layout.js";
+import "../../../protocol/dist/index.js";
 import { Graphics } from "pixi.js";
 //#region src/board/render/renderers/far-plate.d.ts
 type FarPlateStyle = {
-  /** Plate body fill. */
   fill: number;
   fillAlpha?: number;
-  /** Optional accent band along the top edge, identifying the content kind. */
   accent?: number;
   accentAlpha?: number;
 };
-/**
- * Draw one card as a far-LOD plate: a filled body plus an optional top accent
- * band. Selection and hover are intentionally not drawn here — the interaction
- * overlay already renders selection in world space, above this layer.
- */
 declare function drawFarPlate(graphics: Graphics, frame: BoardFrame, style: FarPlateStyle): void;
-/**
- * Draw one card as a far-LOD polyline.
- *
- * The counterpart to `drawFarPlate` for shapes whose meaning is a path rather than
- * a region — strokes and arrows. It stays in the shared `Graphics`, so these keep
- * their place in the batch and therefore in document order: an unbatched shape
- * would be a live container, drawn above every plate no matter where the document
- * puts it.
- *
- * Points are decimated to a bound, because a freehand stroke can hold thousands of
- * samples that are sub-pixel apart at this zoom.
- */
+declare function farStrokeSamples<T>(points: readonly T[]): readonly T[];
 declare function drawFarStroke(graphics: Graphics, points: ReadonlyArray<{
   x: number;
   y: number;
@@ -36,4 +19,4 @@ declare function drawFarStroke(graphics: Graphics, points: ReadonlyArray<{
   alpha?: number;
 }): void;
 //#endregion
-export { FarPlateStyle, drawFarPlate, drawFarStroke };
+export { FarPlateStyle, drawFarPlate, drawFarStroke, farStrokeSamples };

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

@@ -1,16 +1,9 @@
 import { degToRad } from "../../geometry.js";
 //#region src/board/render/renderers/far-plate.ts
-/** Upper bound on points kept when a stroke is drawn at far LOD. */
 const FAR_STROKE_MAX_POINTS = 24;
-/** Accent band height as a fraction of the plate, clamped to sane world units. */
 const ACCENT_RATIO = .14;
 const ACCENT_MIN = 2;
 const ACCENT_MAX = 10;
-/**
-* Trace a frame's rectangle, honouring rotation. Unrotated frames take the
-* fast `rect` path; rotated ones emit four explicit corners (still one path,
-* no arcs) so the far layer never needs a per-card transform.
-*/
 function traceFrame(graphics, frame, inset = 0, heightOverride) {
 	const x = frame.x + inset;
 	const y = frame.y + inset;
@@ -39,11 +32,6 @@ function traceFrame(graphics, frame, inset = 0, heightOverride) {
 	const d = corner(x, y + height);
 	graphics.moveTo(a.x, a.y).lineTo(b.x, b.y).lineTo(c.x, c.y).lineTo(d.x, d.y).closePath();
 }
-/**
-* Draw one card as a far-LOD plate: a filled body plus an optional top accent
-* band. Selection and hover are intentionally not drawn here — the interaction
-* overlay already renders selection in world space, above this layer.
-*/
 function drawFarPlate(graphics, frame, style) {
 	if (frame.width <= 0 || frame.height <= 0) return;
 	traceFrame(graphics, frame);
@@ -58,30 +46,23 @@ function drawFarPlate(graphics, frame, style) {
 		alpha: style.accentAlpha ?? .9
 	});
 }
-/**
-* Draw one card as a far-LOD polyline.
-*
-* The counterpart to `drawFarPlate` for shapes whose meaning is a path rather than
-* a region — strokes and arrows. It stays in the shared `Graphics`, so these keep
-* their place in the batch and therefore in document order: an unbatched shape
-* would be a live container, drawn above every plate no matter where the document
-* puts it.
-*
-* Points are decimated to a bound, because a freehand stroke can hold thousands of
-* samples that are sub-pixel apart at this zoom.
-*/
+function farStrokeSamples(points) {
+	if (points.length <= FAR_STROKE_MAX_POINTS) return points;
+	const step = Math.ceil(points.length / FAR_STROKE_MAX_POINTS);
+	const out = [];
+	for (let i = 0; i < points.length - 1; i += step) out.push(points[i]);
+	out.push(points[points.length - 1]);
+	return out;
+}
 function drawFarStroke(graphics, points, style) {
-	if (points.length < 2) return;
-	const step = Math.max(1, Math.ceil(points.length / FAR_STROKE_MAX_POINTS));
-	const first = points[0];
-	if (!first) return;
+	const samples = farStrokeSamples(points);
+	if (samples.length < 2) return;
+	const first = samples[0];
 	graphics.moveTo(first.x, first.y);
-	for (let i = step; i < points.length; i += step) {
-		const point = points[i];
-		if (point) graphics.lineTo(point.x, point.y);
+	for (let i = 1; i < samples.length; i += 1) {
+		const point = samples[i];
+		graphics.lineTo(point.x, point.y);
 	}
-	const last = points[points.length - 1];
-	if (last) graphics.lineTo(last.x, last.y);
 	graphics.stroke({
 		color: style.color,
 		width: style.width,
@@ -89,4 +70,4 @@ function drawFarStroke(graphics, points, style) {
 	});
 }
 //#endregion
-export { drawFarPlate, drawFarStroke };
+export { drawFarPlate, drawFarStroke, farStrokeSamples };