@scrawl-board/board 0.1.0-beta.3 → 0.1.0-beta.5

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) {
@@ -35884,12 +35900,16 @@ var FRAGMENT = `
     return max(lineAlpha2.x, lineAlpha2.y);
   }
 
-  // Distance from p's nearest grid intersection, in world units. Dot radius
-  // matches the configured line width in pixels, same anti-aliasing.
+  // Distance from p's nearest grid intersection, in world units. A line's
+  // width reads as visible even at 1px because it spans the whole screen;
+  // an isolated dot at that same 1px radius gets almost entirely eaten by
+  // anti-aliasing and all but disappears. Scaling the radius up keeps a
+  // dot's on-screen weight comparable to a line drawn with the same
+  // uGridLineWidthPx, rather than using it literally as a radius.
   float gridDotAlpha(vec2 p) {
     vec2 cell = mod(p, uGridSpacing) - uGridSpacing * 0.5;
     float dist = length(cell);
-    float radius = uGridLineWidthPx * uWorldPerPixel;
+    float radius = uGridLineWidthPx * uWorldPerPixel * 1.75;
     float aa = uWorldPerPixel;
     return 1.0 - smoothstep(radius - aa * 0.5, radius + aa * 0.5, dist);
   }
@@ -36466,6 +36486,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) {
@@ -44645,7 +44666,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 {
@@ -44739,19 +44760,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));
@@ -44959,10 +44972,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)];
@@ -45161,6 +45174,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");
@@ -45742,6 +45756,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();
@@ -45756,7 +45777,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 = {
@@ -45784,18 +45805,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();
@@ -45807,17 +45829,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;
@@ -45905,7 +45937,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",
@@ -45917,13 +45950,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 {
@@ -45943,7 +45976,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) {
@@ -48176,6 +48209,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);
@@ -48217,6 +48356,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,
@@ -48631,10 +48771,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
@@ -48671,6 +48808,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) {