@scrawl-board/board 0.1.0-beta.4 → 0.1.0-beta.6

package/dist/browser.d.ts

@@ -591,6 +591,7 @@ interface BoardSnapshot {
     readonly zoom: number;
     readonly readOnly: boolean;
     readonly selection: readonly string[];
+    readonly focusedItem: FocusedItem | null;
     readonly strokeCount: number;
     readonly objectCount: number;
     readonly canUndo: boolean;
@@ -601,6 +602,27 @@ interface BoardSnapshot {
         readonly collaboration: CollaborationSnapshot;
     };
 }
+/**
+ * `selection` collapsed into the one thing a selected-object toolbar needs:
+ * what's selected, its lock state, and where to anchor above it. `null`
+ * when nothing is selected, or when the selection mixes types/objects that
+ * don't resolve to a single focus (anything but one object, or several
+ * strokes sharing a `clusterId` — a multi-stroke shape).
+ *
+ * Raw lock fields, not a derived `canUnlock` — this API has no notion of
+ * "the local user" to judge that against (see `canUnlockItem` in `../core`,
+ * which takes a `userId` the Host already owns). A Custom object's lock
+ * shape doesn't carry a holder name, so it always reports `locked: false`
+ * here, matching the engine's own internal selection-badge behavior.
+ */
+interface FocusedItem {
+    readonly type: "stroke" | "note" | "text" | "table" | "image" | "timer" | "custom";
+    readonly id: string;
+    readonly locked: boolean;
+    readonly lockedBy?: string;
+    readonly lockedByName?: string;
+    readonly screenPosition?: ScreenPoint;
+}
 interface BoardControllerError {
     source: "controller" | "renderer" | "persistence" | "collaboration";
     code: string;
@@ -967,6 +989,17 @@ interface BoardController {
         add(input: BoardObjectInput): string;
         update(id: string, patch: BoardObjectPatch): void;
         remove(ids: readonly string[]): void;
+        /**
+         * Clone each given object as a new, unlocked copy offset by a small
+         * fixed cascade (matching the Duplicate affordance's established Host
+         * convention), as one undoable step. Order-preserving: `result[i]` is
+         * the clone of `ids[i]`. Strokes that share a `clusterId` among the
+         * given ids get a single fresh shared `clusterId` in the result, so
+         * duplicating a whole multi-stroke shape (e.g. an arrow's shaft + head)
+         * keeps it one shape — pass every member's id together, not just one.
+         * Unknown ids are silently skipped, matching `remove`'s convention.
+         */
+        duplicate(ids: readonly string[]): readonly string[];
         table: {
             addRow(tableId: string): void;
             addCol(tableId: string): void;
@@ -1056,4 +1089,4 @@ type LocalBoard = {
 declare function createLocalBoard(options: LocalBoardOptions): LocalBoard;
 
 export { AssetResolutionError, STAMPS, SUPPORTED_ASSET_MEDIA_TYPES, assetRef, clampAssetCacheBytes, cloneCustomObject, createBoardController, createLocalBoard, isAssetRef, isStampKind, stampDataUrl };
-export type { ApplyOpsResult, AssetDiagnostic, AssetIngestRequest, AssetIngestResult, AssetIngestor, AssetKind, AssetPurpose, AssetRef, AssetResolutionErrorCode, AssetResolveRequest, AssetResolveResult, AssetResolver, BoardController, BoardControllerError, BoardEventMap, BoardKeyInput, BoardObject, BoardObjectInput, BoardObjectPatch, BoardPointerInput, BoardScene, BoardSnapshot, BoardStyle, BoardThemeOptions, BoardView, BuiltInTool, CollaborationAdapter, CollaborationReceiver, CollaborationSession, CollaborationSnapshot, CollaboratorIdentity, CommentMarker, ControllerOp, CreateBoardControllerOptions, CustomBoardObject, CustomObjectAddInput, CustomObjectDefinition, CustomTool, CustomToolDefinition, DeepReadonly, DocumentContext, ExtensionCommand, ExtensionDiagnostic, ExtensionHitResult, ExtensionId, ExtensionRequirement, InputModifiers, JsonObject, JsonValue, LoadResult, LocalBoard, LocalBoardOptions, LocalBoardSnapshot, Mat2x3, ObjectDescribeContext, ObjectIntent, ObjectType, PersistenceAdapter, PersistenceDiagnostic, PersistenceSnapshot, PresenceCursor, PresenceUser, PresenceView, QueryableBoardObject, ReadonlyBoardDocument, ReadonlyCustomObject, ReadonlyDocumentChange, SceneEllipse, SceneGroup, SceneImage, ScenePath, SceneRect, SceneText, ScrawlExtension, ScreenPoint, ScreenRect, StampKind, SupportedAssetMediaType, ToolCancelReason, ToolCapabilities, ToolCursor, ToolId };
+export type { ApplyOpsResult, AssetDiagnostic, AssetIngestRequest, AssetIngestResult, AssetIngestor, AssetKind, AssetPurpose, AssetRef, AssetResolutionErrorCode, AssetResolveRequest, AssetResolveResult, AssetResolver, BoardController, BoardControllerError, BoardEventMap, BoardKeyInput, BoardObject, BoardObjectInput, BoardObjectPatch, BoardPointerInput, BoardScene, BoardSnapshot, BoardStyle, BoardThemeOptions, BoardView, BuiltInTool, CollaborationAdapter, CollaborationReceiver, CollaborationSession, CollaborationSnapshot, CollaboratorIdentity, CommentMarker, ControllerOp, CreateBoardControllerOptions, CustomBoardObject, CustomObjectAddInput, CustomObjectDefinition, CustomTool, CustomToolDefinition, DeepReadonly, DocumentContext, ExtensionCommand, ExtensionDiagnostic, ExtensionHitResult, ExtensionId, ExtensionRequirement, FocusedItem, InputModifiers, JsonObject, JsonValue, LoadResult, LocalBoard, LocalBoardOptions, LocalBoardSnapshot, Mat2x3, ObjectDescribeContext, ObjectIntent, ObjectType, PersistenceAdapter, PersistenceDiagnostic, PersistenceSnapshot, PresenceCursor, PresenceUser, PresenceView, QueryableBoardObject, ReadonlyBoardDocument, ReadonlyCustomObject, ReadonlyDocumentChange, SceneEllipse, SceneGroup, SceneImage, ScenePath, SceneRect, SceneText, ScrawlExtension, ScreenPoint, ScreenRect, StampKind, SupportedAssetMediaType, ToolCancelReason, ToolCapabilities, ToolCursor, ToolId };

package/dist/browser.js

@@ -123,7 +123,11 @@ function validateStrokes(raw) {
 	for (let index = 0; index < raw.length; index += 1) {
 		const value = raw[index];
 		const path = `strokes[${index}]`;
-		if (!isRecord(value) || !nonempty(value.id) || !nonempty(value.color) || !positive(value.baseWidth) || !optionalEnum(value.tool, ["marker", "highlighter"]) || !validLock(value) || !optionalString(value.clusterId) || !validMatrix(value.matrix) || !Array.isArray(value.points)) return validation("invalid stroke", path);
+		if (!isRecord(value) || !nonempty(value.id) || !nonempty(value.color) || !positive(value.baseWidth) || !optionalEnum(value.tool, [
+			"marker",
+			"highlighter",
+			"shape"
+		]) || !validLock(value) || !optionalString(value.clusterId) || !validMatrix(value.matrix) || !Array.isArray(value.points)) return validation("invalid stroke", path);
 		const points = [];
 		for (let pointIndex = 0; pointIndex < value.points.length; pointIndex += 1) {
 			const point = normalizePoint(value.points[pointIndex]);
@@ -404,9 +408,21 @@ var HIGHLIGHT_COLORS = {
 };
 var NOTE_COLORS = {
 	yellow: "#FDE68A",
+	amber: "#FCD34D",
+	orange: "#FDBA74",
+	peach: "#FED7AA",
+	red: "#FCA5A5",
+	rose: "#FECACA",
 	pink: "#FBCFE8",
+	magenta: "#F9A8D4",
+	purple: "#D8B4FE",
+	lavender: "#E9D5FF",
 	blue: "#BFDBFE",
-	green: "#BBF7D0"
+	cornflower: "#93C5FD",
+	sky: "#7DD3FC",
+	cyan: "#BAE6FD",
+	green: "#BBF7D0",
+	mint: "#86EFAC"
 };
 var TEXT_DEFAULT_SIZE = 1.8;
 function cloneText(block) {
@@ -36320,13 +36336,26 @@ var INK_Z = .02;
 var HIGHLIGHT_Z = .016;
 /** Ghosts sit under everything so live strokes always read on top. */
 var GHOST_Z = .012;
+/**
+* A miter join at each centerline point — averaging the incoming and
+* outgoing segment directions into one width offset — under-covers the
+* outside of a sharp turn: the two segments' edges diverge there, leaving a
+* real geometric gap (the board shows through, not just a shader artifact).
+* Barely visible on opaque ink, but glaring on the highlighter's lower,
+* multiply-blended opacity, which is why this reads as "goes transparent
+* at corners" specifically there even though the underlying strip geometry
+* is shared with ink. Below this turn angle a miter join is a fine
+* approximation and not worth the extra geometry.
+*/
+var JOIN_ANGLE_THRESHOLD = .35;
+var JOIN_SEGMENTS = 10;
 function buildRibbonGeometry(points, baseWidth, z = INK_Z, handDrawn = true) {
 	const edges = ribbonEdges(points, baseWidth, handDrawn);
 	const n = edges.length;
-	const positions = new Float32Array(n * 2 * 3);
-	const uvs = new Float32Array(n * 2 * 2);
-	const alphas = new Float32Array(n * 2);
-	const indices = new Uint32Array((n - 1) * 6);
+	const positions = new Array(n * 2 * 3);
+	const uvs = new Array(n * 2 * 2);
+	const alphas = new Array(n * 2);
+	const indices = new Array((n - 1) * 6);
 	for (let i = 0; i < n; i++) {
 		const e = edges[i];
 		const vi = i * 6;
@@ -36355,11 +36384,45 @@ function buildRibbonGeometry(points, baseWidth, z = INK_Z, handDrawn = true) {
 			indices[ii + 5] = a + 2;
 		}
 	}
+	for (let i = 1; i < n - 1; i++) {
+		const prev = points[Math.max(0, i - 1)];
+		const point = points[i];
+		const next = points[Math.min(n - 1, i + 1)];
+		const inX = point.x - prev.x, inY = point.y - prev.y;
+		const outX = next.x - point.x, outY = next.y - point.y;
+		const inLen = Math.hypot(inX, inY) || 1;
+		const outLen = Math.hypot(outX, outY) || 1;
+		const inDx = inX / inLen, inDy = inY / inLen;
+		const outDx = outX / outLen, outDy = outY / outLen;
+		const cos = inDx * outDx + inDy * outDy;
+		if (Math.acos(Math.min(1, Math.max(-1, cos))) < JOIN_ANGLE_THRESHOLD) continue;
+		const radius = (handDrawn ? baseWidth * (MIN_WIDTH_FACTOR + (1 - MIN_WIDTH_FACTOR) * point.pressure) : baseWidth) / 2;
+		const t = i / (n - 1);
+		const alpha = edges[i].alpha;
+		const side = inDx * outDy - inDy * outDx > 0 ? -1 : 1;
+		const inEdgeX = point.x + side * -inDy * radius, inEdgeY = point.y + side * inDx * radius;
+		const outEdgeX = point.x + side * -outDy * radius, outEdgeY = point.y + side * outDx * radius;
+		const angle1 = Math.atan2(inEdgeY - point.y, inEdgeX - point.x);
+		let sweep = Math.atan2(outEdgeY - point.y, outEdgeX - point.x) - angle1;
+		while (sweep > Math.PI) sweep -= Math.PI * 2;
+		while (sweep < -Math.PI) sweep += Math.PI * 2;
+		const center = positions.length / 3;
+		positions.push(point.x, point.y, z);
+		uvs.push(t, .5);
+		alphas.push(alpha);
+		for (let s = 0; s <= JOIN_SEGMENTS; s++) {
+			const theta = angle1 + sweep * (s / JOIN_SEGMENTS);
+			positions.push(point.x + Math.cos(theta) * radius, point.y + Math.sin(theta) * radius, z);
+			uvs.push(t, .5);
+			alphas.push(alpha);
+			if (s > 0) indices.push(center, center + s, center + s + 1);
+		}
+	}
 	const geometry = new BufferGeometry();
-	geometry.setAttribute("position", new BufferAttribute(positions, 3));
-	geometry.setAttribute("uv", new BufferAttribute(uvs, 2));
-	geometry.setAttribute("aAlpha", new BufferAttribute(alphas, 1));
-	geometry.setIndex(new BufferAttribute(indices, 1));
+	geometry.setAttribute("position", new BufferAttribute(new Float32Array(positions), 3));
+	geometry.setAttribute("uv", new BufferAttribute(new Float32Array(uvs), 2));
+	geometry.setAttribute("aAlpha", new BufferAttribute(new Float32Array(alphas), 1));
+	geometry.setIndex(indices);
 	geometry.computeBoundingSphere();
 	return geometry;
 }
@@ -36470,6 +36533,7 @@ var StrokeRenderer = class {
 			if (mesh) {
 				mesh.geometry.dispose();
 				mesh.geometry = buildRibbonGeometry(stroke.points, stroke.baseWidth, strokeZ(stroke), handDrawn(stroke));
+				mesh.material = stroke.tool === "highlighter" ? this.materials.highlight(stroke.color) : this.materials.get(stroke.color);
 			}
 		}
 		for (const stroke of change.transformed) {
@@ -36500,9 +36564,9 @@ function syncMatrix(mesh, stroke) {
 }
 //#endregion
 //#region src/renderer/shapes/markerProp.ts
-var BODY_LENGTH = 11;
-var BODY_RADIUS = .85;
-var TIP_LENGTH = 1.6;
+var BODY_LENGTH = 7;
+var BODY_RADIUS = .55;
+var TIP_LENGTH = 1.05;
 var BASE_TILT = .42;
 var VELOCITY_TILT = .22;
 var MAX_EXTRA_TILT = .35;
@@ -36533,12 +36597,12 @@ var MarkerProp = class {
 		const tip = new Mesh(new ConeGeometry(BODY_RADIUS * .55, TIP_LENGTH, 14), tipMaterial);
 		tip.rotation.x = Math.PI;
 		tip.position.y = TIP_LENGTH / 2;
-		this.body.position.y = 7.1;
+		this.body.position.y = 4.55;
 		const pen = new Group();
 		pen.add(this.body, tip);
 		pen.rotation.x = Math.PI / 2;
 		this.group.add(pen);
-		this.shadow = new Mesh(new CircleGeometry(1.4, 24), new MeshBasicMaterial({
+		this.shadow = new Mesh(new CircleGeometry(.9, 24), new MeshBasicMaterial({
 			color: 0,
 			transparent: true,
 			opacity: .13,
@@ -44649,7 +44713,7 @@ function distToSegmentSq(p, a, b) {
 }
 //#endregion
 //#region src/interaction/tools/eraserTool.ts
-var DECAY_PER_PASS = .4;
+var DECAY_PER_PASS = 1;
 /** A point can take another decay pass after this long — rubbing works. */
 var REARM_MS = 250;
 var EraserTool = class {
@@ -44743,19 +44807,11 @@ var EraserTool = class {
 			const runs = partitionByErasure(current.points);
 			const survives = runs.filter((r) => r.survives && r.points.length >= 2);
 			const keepId = survives.length === 1 && survives[0].points.length === current.points.length;
-			const m = current.matrix;
 			for (const run of runs) if (run.survives && run.points.length >= 2) after.push({
 				...current,
 				id: keepId ? current.id : crypto.randomUUID(),
 				points: run.points
 			});
-			else if (!run.survives) {
-				const world = m ? run.points.map((p) => ({
-					...p,
-					...apply(m, p)
-				})) : run.points;
-				this.ctx.renderer.addGhost(world, current.color, current.baseWidth * (m ? avgScale(m) : 1), current.tool !== "shape");
-			}
 		}
 		doc.removeStrokes(before.map((s) => s.id));
 		doc.addStrokes(after.map(cloneStroke));
@@ -44963,10 +45019,10 @@ function buildShape(kind, a, b, step, constrain) {
 		case "ellipse": return [ellipse(a, targetB, step)];
 		case "line": return [sampleSegment(a, constrain ? snappedEnd(a, b) : b, step)];
 		case "arrow": return arrow(a, constrain ? snappedEnd(a, b) : b, step);
-		case "triangle": return [polygon(3, a, targetB, step, -Math.PI / 2)];
+		case "triangle": return [polygon(3, a, targetB, step, Math.PI / 2)];
 		case "diamond": return [polygon(4, a, targetB, step, 0)];
-		case "pentagon": return [polygon(5, a, targetB, step, -Math.PI / 2)];
-		case "hexagon": return [polygon(6, a, targetB, step, -Math.PI / 2)];
+		case "pentagon": return [polygon(5, a, targetB, step, Math.PI / 2)];
+		case "hexagon": return [polygon(6, a, targetB, step, Math.PI / 2)];
 		case "octagon": return [polygon(8, a, targetB, step, Math.PI / 8)];
 		case "star": return [star(5, a, targetB, step)];
 		case "heart": return [heart(a, targetB, step)];
@@ -45165,6 +45221,7 @@ var ShapeTool = class {
 			this.ctx.clusters.assign(strokes[0]);
 			for (const s of strokes) s.clusterId = strokes[0].clusterId;
 			this.ctx.history.execute(new AddStrokesCommand(strokes));
+			this.ctx.selection.set(strokes.map((s) => s.id));
 			this.ctx.setTool?.("select");
 		}
 		this.ctx.transition("idle");
@@ -45746,6 +45803,13 @@ var HANDLE_HIT_PX = 12;
 var ROTATE_OFFSET_PX = 26;
 var ROTATE_HIT_PX = 14;
 var COLOR = 2450411;
+/**
+* Visual-only outset between the selected object and the gizmo's outline/
+* handles — the object's actual bounding box (used for resize math, see
+* `anchorPoint`/`handlePoint`'s callers in `selectTool.ts`) never changes;
+* only where the outline and handle meshes are *drawn* and hit-tested does.
+*/
+var GAP_PX = 8;
 var SelectionGizmo = class {
 	constructor(scene) {
 		this.group = new Group();
@@ -45760,7 +45824,7 @@ var SelectionGizmo = class {
 		this.outline = new LineLoop(new BufferGeometry(), this.lineMaterial);
 		this.outline.position.z = GIZMO_Z;
 		this.outline.frustumCulled = false;
-		const handleGeometry = new PlaneGeometry(1, 1);
+		const handleGeometry = new CircleGeometry(.5, 20);
 		const handleMaterial = new MeshBasicMaterial({ color: COLOR });
 		const makeHandle = () => new Mesh(handleGeometry, handleMaterial);
 		this.handles = {
@@ -45788,18 +45852,19 @@ var SelectionGizmo = class {
 		if (!box) return;
 		this.lineMaterial.color.setHex(locked ? 16096779 : COLOR);
 		this.rotateHandle.visible = !locked;
+		const visual = this.visualBox(box, wpp);
 		const positions = new Float32Array([
-			box.minX,
-			box.minY,
+			visual.minX,
+			visual.minY,
 			GIZMO_Z,
-			box.maxX,
-			box.minY,
+			visual.maxX,
+			visual.minY,
 			GIZMO_Z,
-			box.maxX,
-			box.maxY,
+			visual.maxX,
+			visual.maxY,
 			GIZMO_Z,
-			box.minX,
-			box.maxY,
+			visual.minX,
+			visual.maxY,
 			GIZMO_Z
 		]);
 		this.outline.geometry.dispose();
@@ -45811,17 +45876,27 @@ var SelectionGizmo = class {
 		for (const [handle, mesh] of Object.entries(this.handles)) {
 			mesh.visible = !locked;
 			if (!locked) {
-				const p = this.handlePoint(handle, box);
+				const p = this.handlePoint(handle, visual);
 				mesh.position.set(p.x, p.y, GIZMO_Z);
 				mesh.scale.set(size, size, 1);
 			}
 		}
 		if (!locked) {
-			const rotate = this.rotatePoint(box, wpp);
+			const rotate = this.rotatePoint(visual, wpp);
 			this.rotateHandle.position.set(rotate.x, rotate.y, GIZMO_Z);
 			this.rotateHandle.scale.set(size, size, 1);
 		}
 	}
+	/** The object's real bbox outset by `GAP_PX`, screen-constant — where the outline/handles are drawn and hit-tested. Never used for resize math (see `anchorPoint`). */
+	visualBox(box, wpp) {
+		const gap = GAP_PX * wpp;
+		return {
+			minX: box.minX - gap,
+			minY: box.minY - gap,
+			maxX: box.maxX + gap,
+			maxY: box.maxY + gap
+		};
+	}
 	handlePoint(handle, box) {
 		const midX = (box.minX + box.maxX) / 2;
 		const midY = (box.minY + box.maxY) / 2;
@@ -45909,7 +45984,8 @@ var SelectionGizmo = class {
 		if (!this.box || this.isLocked) return null;
 		const handleR = HANDLE_HIT_PX * this.wpp;
 		const edgeSlop = 6 * this.wpp;
-		const rotate = this.rotatePoint(this.box, this.wpp);
+		const visual = this.visualBox(this.box, this.wpp);
+		const rotate = this.rotatePoint(visual, this.wpp);
 		if (Math.hypot(p.x - rotate.x, p.y - rotate.y) < ROTATE_HIT_PX * this.wpp) return { kind: "rotate" };
 		for (const handle of [
 			"nw",
@@ -45921,13 +45997,13 @@ var SelectionGizmo = class {
 			"e",
 			"w"
 		]) {
-			const hp = this.handlePoint(handle, this.box);
+			const hp = this.handlePoint(handle, visual);
 			if (Math.abs(p.x - hp.x) < handleR && Math.abs(p.y - hp.y) < handleR) return {
 				kind: "scale",
 				handle
 			};
 		}
-		const { minX, maxX, minY, maxY } = this.box;
+		const { minX, maxX, minY, maxY } = visual;
 		const inX = p.x >= minX - edgeSlop && p.x <= maxX + edgeSlop;
 		const inY = p.y >= minY - edgeSlop && p.y <= maxY + edgeSlop;
 		if (inX && Math.abs(p.y - maxY) < edgeSlop) return {
@@ -45947,7 +46023,7 @@ var SelectionGizmo = class {
 			handle: "w"
 		};
 		const pad = 2 * this.wpp;
-		if (p.x >= minX - pad && p.x <= maxX + pad && p.y >= minY - pad && p.y <= maxY + pad) return { kind: "inside" };
+		if (p.x >= this.box.minX - pad && p.x <= this.box.maxX + pad && p.y >= this.box.minY - pad && p.y <= this.box.maxY + pad) return { kind: "inside" };
 		return null;
 	}
 	rotatePoint(box, wpp) {
@@ -48180,6 +48256,112 @@ function createBoardControllerWithEngine(options, existingEngine) {
 		})),
 		...[...document.allCustomObjects()].map((value) => clone(toBoardObject(value)))
 	];
+	const projectToScreen = (point) => engine ? engine.boardToScreen(point) : {
+		x: (point.x - view.x) * view.zoom,
+		y: (view.y - point.y) * view.zoom
+	};
+	const lockFields = (item) => ({
+		locked: !!item.locked,
+		...item.lockedBy ? { lockedBy: item.lockedBy } : {},
+		...item.lockedByName ? { lockedByName: item.lockedByName } : {}
+	});
+	const lockFieldsMany = (items) => {
+		const locked = items.filter((i) => i.locked);
+		if (locked.length === 0) return { locked: false };
+		const lockedBys = [...new Set(locked.map((i) => i.lockedBy).filter((v) => !!v))];
+		const names = [...new Set(locked.map((i) => i.lockedByName).filter((v) => !!v))];
+		return {
+			locked: true,
+			...lockedBys.length === 1 ? { lockedBy: lockedBys[0] } : {},
+			...names.length === 1 ? { lockedByName: names[0] } : {}
+		};
+	};
+	const strokeClusterAnchor = (strokes) => {
+		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+		for (const s of strokes) for (const p of s.points) {
+			const world = s.matrix ? apply(s.matrix, p) : p;
+			minX = Math.min(minX, world.x);
+			maxX = Math.max(maxX, world.x);
+			minY = Math.min(minY, world.y);
+			maxY = Math.max(maxY, world.y);
+		}
+		if (!Number.isFinite(minX)) return projectToScreen({
+			x: 0,
+			y: 0
+		});
+		return projectToScreen({
+			x: (minX + maxX) / 2,
+			y: maxY + 1.4
+		});
+	};
+	/** Per-type anchor formulas mirror `ScrawlEngine.getSelectedItemInfo` exactly, so a Host-built toolbar lands in the same spot the SDK's own would. */
+	const anchorFor = (obj) => {
+		switch (obj.type) {
+			case "note": return projectToScreen({
+				x: obj.x,
+				y: obj.y + obj.size / 2 + 1
+			});
+			case "text": {
+				const { width } = measureTextBlock(obj.text, obj.fontSize);
+				return projectToScreen({
+					x: obj.x + width / 2,
+					y: obj.y + 1
+				});
+			}
+			case "table": {
+				const { width } = measureTable(obj);
+				return projectToScreen({
+					x: obj.x + width / 2,
+					y: obj.y + 1.2
+				});
+			}
+			case "image": return projectToScreen({
+				x: obj.x,
+				y: obj.y + obj.height / 2 + 1.2
+			});
+			case "timer": return projectToScreen({
+				x: obj.x,
+				y: obj.y + obj.size / 2 + 1.2
+			});
+			case "custom": {
+				const b = obj.fallback.bounds;
+				return projectToScreen(apply(obj.transform, {
+					x: b.x + b.width / 2,
+					y: b.y + b.height + 1
+				}));
+			}
+			case "stroke": return strokeClusterAnchor([obj]);
+		}
+	};
+	const computeFocusedItem = () => {
+		if (selection.length === 0) return null;
+		if (selection.length === 1) {
+			const obj = readObject(selection[0]);
+			if (!obj) return null;
+			if (obj.type === "custom") return {
+				type: "custom",
+				id: obj.id,
+				locked: false,
+				screenPosition: anchorFor(obj)
+			};
+			return {
+				type: obj.type,
+				id: obj.id,
+				...lockFields(obj),
+				screenPosition: anchorFor(obj)
+			};
+		}
+		const objects = selection.map(readObject);
+		if (!objects.every((o) => o?.type === "stroke")) return null;
+		const clusterId = objects[0].clusterId;
+		if (!clusterId || !objects.every((o) => o.clusterId === clusterId)) return null;
+		return {
+			type: "stroke",
+			id: objects[0].id,
+			...lockFieldsMany(objects),
+			screenPosition: strokeClusterAnchor(objects)
+		};
+	};
 	const updateObject = (id, patch) => {
 		assertMutable();
 		const before = readObject(id);
@@ -48221,6 +48403,7 @@ function createBoardControllerWithEngine(options, existingEngine) {
 			zoom: view.zoom,
 			readOnly,
 			selection: Object.freeze([...selection]),
+			focusedItem: computeFocusedItem(),
 			strokeCount: [...document.all()].length,
 			objectCount: allObjects().length,
 			canUndo: history.canUndo,
@@ -48635,10 +48818,7 @@ function createBoardControllerWithEngine(options, existingEngine) {
 				changed();
 			},
 			get: () => ({ ...view }),
-			boardToScreen: (point) => engine ? engine.boardToScreen(point) : {
-				x: (point.x - view.x) * view.zoom,
-				y: (view.y - point.y) * view.zoom
-			},
+			boardToScreen: (point) => projectToScreen(point),
 			screenToBoard: (point) => engine ? engine.screenToBoard(point.x, point.y) ?? {
 				x: point.x,
 				y: point.y
@@ -48675,6 +48855,81 @@ function createBoardControllerWithEngine(options, existingEngine) {
 			update(id, patch) {
 				updateObject(id, patch);
 			},
+			duplicate(ids) {
+				assertMutable();
+				const objects = [...new Set(ids)].map(readObject).filter((o) => !!o);
+				if (objects.length === 0) return [];
+				const DX = 1.5;
+				const DY = -1.5;
+				const newClusterIds = /* @__PURE__ */ new Map();
+				const clusterIdFor = (oldClusterId) => {
+					let next = newClusterIds.get(oldClusterId);
+					if (!next) {
+						next = crypto.randomUUID();
+						newClusterIds.set(oldClusterId, next);
+					}
+					return next;
+				};
+				const commands = [];
+				const newIds = [];
+				for (const obj of objects) {
+					const id = createId();
+					newIds.push(id);
+					const rest = { ...obj };
+					delete rest.locked;
+					delete rest.lockedBy;
+					delete rest.lockedByName;
+					let duplicated;
+					if (obj.type === "stroke") {
+						const matrix = obj.matrix ?? [
+							1,
+							0,
+							0,
+							1,
+							0,
+							0
+						];
+						duplicated = {
+							...rest,
+							id,
+							matrix: [
+								matrix[0],
+								matrix[1],
+								matrix[2],
+								matrix[3],
+								matrix[4] + DX,
+								matrix[5] + DY
+							],
+							...obj.clusterId ? { clusterId: clusterIdFor(obj.clusterId) } : {}
+						};
+					} else if (obj.type === "custom") {
+						const t = obj.transform;
+						duplicated = {
+							...rest,
+							id,
+							transform: [
+								t[0],
+								t[1],
+								t[2],
+								t[3],
+								t[4] + DX,
+								t[5] + DY
+							]
+						};
+						delete duplicated.lock;
+					} else duplicated = {
+						...rest,
+						id,
+						x: obj.x + DX,
+						y: obj.y + DY
+					};
+					validateBoardObject(duplicated.type, duplicated);
+					commands.push(addCommand(duplicated.type, duplicated));
+				}
+				executeHistory(() => history.execute(new CommandBatch("duplicate content", commands)));
+				changed();
+				return newIds;
+			},
 			table: {
 				addRow(tableId) {
 					const table = document.getTable(tableId);

package/dist/core.d.ts

@@ -492,9 +492,21 @@ declare const HIGHLIGHT_COLORS: {
 };
 declare const NOTE_COLORS: {
     readonly yellow: "#FDE68A";
+    readonly amber: "#FCD34D";
+    readonly orange: "#FDBA74";
+    readonly peach: "#FED7AA";
+    readonly red: "#FCA5A5";
+    readonly rose: "#FECACA";
     readonly pink: "#FBCFE8";
+    readonly magenta: "#F9A8D4";
+    readonly purple: "#D8B4FE";
+    readonly lavender: "#E9D5FF";
     readonly blue: "#BFDBFE";
+    readonly cornflower: "#93C5FD";
+    readonly sky: "#7DD3FC";
+    readonly cyan: "#BAE6FD";
     readonly green: "#BBF7D0";
+    readonly mint: "#86EFAC";
 };
 /**
  * One collaborator's vote on a note. One per person; toggling removes it.

package/dist/core.js

@@ -148,7 +148,11 @@ function validateStrokes(raw) {
 	for (let index = 0; index < raw.length; index += 1) {
 		const value = raw[index];
 		const path = `strokes[${index}]`;
-		if (!isRecord(value) || !nonempty(value.id) || !nonempty(value.color) || !positive(value.baseWidth) || !optionalEnum(value.tool, ["marker", "highlighter"]) || !validLock(value) || !optionalString(value.clusterId) || !validMatrix(value.matrix) || !Array.isArray(value.points)) return validation("invalid stroke", path);
+		if (!isRecord(value) || !nonempty(value.id) || !nonempty(value.color) || !positive(value.baseWidth) || !optionalEnum(value.tool, [
+			"marker",
+			"highlighter",
+			"shape"
+		]) || !validLock(value) || !optionalString(value.clusterId) || !validMatrix(value.matrix) || !Array.isArray(value.points)) return validation("invalid stroke", path);
 		const points = [];
 		for (let pointIndex = 0; pointIndex < value.points.length; pointIndex += 1) {
 			const point = normalizePoint(value.points[pointIndex]);
@@ -429,9 +433,21 @@ var HIGHLIGHT_COLORS = {
 };
 var NOTE_COLORS = {
 	yellow: "#FDE68A",
+	amber: "#FCD34D",
+	orange: "#FDBA74",
+	peach: "#FED7AA",
+	red: "#FCA5A5",
+	rose: "#FECACA",
 	pink: "#FBCFE8",
+	magenta: "#F9A8D4",
+	purple: "#D8B4FE",
+	lavender: "#E9D5FF",
 	blue: "#BFDBFE",
-	green: "#BBF7D0"
+	cornflower: "#93C5FD",
+	sky: "#7DD3FC",
+	cyan: "#BAE6FD",
+	green: "#BBF7D0",
+	mint: "#86EFAC"
 };
 var TEXT_DEFAULT_SIZE = 1.8;
 function cloneText(block) {