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

package/dist/core.js

@@ -89,7 +89,15 @@ function migrateDocument(raw) {
 		tables: validateCollection(raw, "tables", version, validateTable),
 		images: validateCollection(raw, "images", version, validateImage),
 		timers: validateCollection(raw, "timers", version, validateTimer),
-		customObjects: validateCollection(raw, "customObjects", version, validateCustomObject, false)
+		customObjects: validateCollection(raw, "customObjects", version, validateCustomObject, false),
+		rectangles: validateCollection(raw, "rectangles", version, validateRectangle, false),
+		ellipses: validateCollection(raw, "ellipses", version, validateEllipse, false),
+		groups: validateCollection(raw, "groups", version, validateGroup, false),
+		lines: validateCollection(raw, "lines", version, validateLine, false),
+		arrows: validateCollection(raw, "arrows", version, validateArrow, false),
+		polygons: validateCollection(raw, "polygons", version, validatePolygon, false),
+		stars: validateCollection(raw, "stars", version, validateStar, false),
+		hearts: validateCollection(raw, "hearts", version, validateHeart, false)
 	};
 	if (collections.notes instanceof DocumentRecoveryError) return {
 		ok: false,
@@ -115,6 +123,43 @@ function migrateDocument(raw) {
 		ok: false,
 		error: collections.customObjects
 	};
+	if (collections.rectangles instanceof DocumentRecoveryError) return {
+		ok: false,
+		error: collections.rectangles
+	};
+	if (collections.ellipses instanceof DocumentRecoveryError) return {
+		ok: false,
+		error: collections.ellipses
+	};
+	if (collections.groups instanceof DocumentRecoveryError) return {
+		ok: false,
+		error: collections.groups
+	};
+	if (collections.lines instanceof DocumentRecoveryError) return {
+		ok: false,
+		error: collections.lines
+	};
+	if (collections.arrows instanceof DocumentRecoveryError) return {
+		ok: false,
+		error: collections.arrows
+	};
+	if (collections.polygons instanceof DocumentRecoveryError) return {
+		ok: false,
+		error: collections.polygons
+	};
+	if (collections.stars instanceof DocumentRecoveryError) return {
+		ok: false,
+		error: collections.stars
+	};
+	if (collections.hearts instanceof DocumentRecoveryError) return {
+		ok: false,
+		error: collections.hearts
+	};
+	const objectOrder = validateObjectOrder(raw.objectOrder);
+	if (objectOrder instanceof DocumentRecoveryError) return {
+		ok: false,
+		error: objectOrder
+	};
 	return {
 		ok: true,
 		migratedFrom: version,
@@ -126,7 +171,16 @@ function migrateDocument(raw) {
 			tables: collections.tables,
 			images: collections.images,
 			timers: collections.timers,
-			customObjects: collections.customObjects
+			customObjects: collections.customObjects,
+			rectangles: collections.rectangles,
+			ellipses: collections.ellipses,
+			groups: collections.groups,
+			lines: collections.lines,
+			arrows: collections.arrows,
+			polygons: collections.polygons,
+			stars: collections.stars,
+			hearts: collections.hearts,
+			objectOrder
 		}
 	};
 }
@@ -190,6 +244,41 @@ function validateImage(v) {
 	const identifiesAnImage = v.ref !== void 0 ? isAssetRef(v.ref) : nonempty(v.src);
 	return basePosition(v) && identifiesAnImage && positive(v.width) && positive(v.height) && positive(v.aspectRatio) && validLock(v) && optionalString(v.name) && optionalString(v.createdAt) && optionalString(v.stamp);
 }
+function validateShapeStyle(v) {
+	return optionalString(v.fill) && optionalString(v.stroke) && (v.strokeWidth === void 0 || positive(v.strokeWidth)) && (v.opacity === void 0 || finite(v.opacity) && v.opacity >= 0 && v.opacity <= 1);
+}
+function validateRectangle(v) {
+	return basePosition(v) && positive(v.width) && positive(v.height) && validLock(v) && validateShapeStyle(v) && (v.rotation === void 0 || finite(v.rotation)) && (v.cornerRadius === void 0 || finite(v.cornerRadius) && v.cornerRadius >= 0);
+}
+function validateEllipse(v) {
+	return basePosition(v) && positive(v.width) && positive(v.height) && validLock(v) && validateShapeStyle(v) && (v.rotation === void 0 || finite(v.rotation));
+}
+function validatePolygon(v) {
+	return basePosition(v) && positive(v.width) && positive(v.height) && validLock(v) && validateShapeStyle(v) && (v.rotation === void 0 || finite(v.rotation)) && (v.sides === 3 || v.sides === 4 || v.sides === 5 || v.sides === 6 || v.sides === 8);
+}
+function validateStar(v) {
+	return basePosition(v) && positive(v.width) && positive(v.height) && validLock(v) && validateShapeStyle(v) && (v.rotation === void 0 || finite(v.rotation)) && finite(v.points) && v.points >= 3 && finite(v.innerRadiusRatio) && v.innerRadiusRatio > 0 && v.innerRadiusRatio < 1;
+}
+function validateHeart(v) {
+	return basePosition(v) && positive(v.width) && positive(v.height) && validLock(v) && validateShapeStyle(v) && (v.rotation === void 0 || finite(v.rotation));
+}
+function validPoint(v) {
+	return isRecord(v) && finite(v.x) && finite(v.y);
+}
+function validateLine(v) {
+	return nonempty(v.id) && validPoint(v.start) && validPoint(v.end) && validLock(v) && validateShapeStyle(v);
+}
+function validateArrow(v) {
+	return nonempty(v.id) && validPoint(v.start) && validPoint(v.end) && validLock(v) && validateShapeStyle(v) && (v.head === void 0 || v.head === "triangle" || v.head === "none");
+}
+function validateGroup(v) {
+	return nonempty(v.id) && Array.isArray(v.children) && v.children.every((c) => nonempty(c)) && validLock(v);
+}
+function validateObjectOrder(v) {
+	if (v === void 0) return [];
+	if (!Array.isArray(v) || !v.every((id) => nonempty(id))) return validation("objectOrder must be an array of ids", "objectOrder");
+	return structuredClone(v);
+}
 function validateTimer(v) {
 	return basePosition(v) && positive(v.size) && positive(v.durationMs) && finite(v.remainingMs) && v.remainingMs >= 0 && (v.runningSince === void 0 || finite(v.runningSince)) && validLock(v);
 }
@@ -772,6 +861,222 @@ function serializeLock(item) {
 	};
 }
 //#endregion
+//#region src/core/shapes/shapeObjects.ts
+var SHAPE_MIN_SIZE = .5;
+var SHAPE_DEFAULT_STROKE = "#1C1C1E";
+var SHAPE_DEFAULT_STROKE_WIDTH = .12;
+function cloneRectangle(rect) {
+	return { ...rect };
+}
+function cloneEllipse(ellipse) {
+	return { ...ellipse };
+}
+function clonePolygon(polygon) {
+	return { ...polygon };
+}
+function cloneStar(star) {
+	return { ...star };
+}
+function cloneHeart(heart) {
+	return { ...heart };
+}
+function cloneLine(line) {
+	return {
+		...line,
+		start: { ...line.start },
+		end: { ...line.end }
+	};
+}
+function cloneArrow(arrow) {
+	return {
+		...arrow,
+		start: { ...arrow.start },
+		end: { ...arrow.end }
+	};
+}
+function cloneGroup(group) {
+	return {
+		...group,
+		children: [...group.children]
+	};
+}
+//#endregion
+//#region src/core/document/objectBounds.ts
+function growAll(points) {
+	let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+	for (const p of points) {
+		if (p.x < minX) minX = p.x;
+		if (p.y < minY) minY = p.y;
+		if (p.x > maxX) maxX = p.x;
+		if (p.y > maxY) maxY = p.y;
+	}
+	return {
+		minX,
+		minY,
+		maxX,
+		maxY
+	};
+}
+function noteBounds(note) {
+	const half = note.size / 2;
+	return {
+		minX: note.x - half,
+		minY: note.y - half,
+		maxX: note.x + half,
+		maxY: note.y + half
+	};
+}
+/** (x, y) is the top-left corner; text flows downward via -y. */
+function textBounds(block) {
+	const { width, height } = measureTextBlock(block.text, block.fontSize);
+	return {
+		minX: block.x,
+		minY: block.y - height,
+		maxX: block.x + width,
+		maxY: block.y
+	};
+}
+/** (x, y) is the top-left corner, matching TextBlock's convention. */
+function tableBounds(table) {
+	const { width, height } = measureTable(table);
+	return {
+		minX: table.x,
+		minY: table.y - height,
+		maxX: table.x + width,
+		maxY: table.y
+	};
+}
+/** (x, y) is the center — ImageBlock's own, different convention. */
+function imageBounds(image) {
+	const halfW = image.width / 2;
+	const halfH = image.height / 2;
+	return {
+		minX: image.x - halfW,
+		minY: image.y - halfH,
+		maxX: image.x + halfW,
+		maxY: image.y + halfH
+	};
+}
+function timerBounds(timer) {
+	const half = timer.size / 2;
+	return {
+		minX: timer.x - half,
+		minY: timer.y - half,
+		maxX: timer.x + half,
+		maxY: timer.y + half
+	};
+}
+/** World-space corners of the object's local `fallback.bounds`, taken through its `transform` — the same math `hitTestCustom`'s inverse already relies on being correct. */
+function customObjectBounds(object) {
+	const b = object.fallback.bounds;
+	return growAll([
+		{
+			x: b.x,
+			y: b.y
+		},
+		{
+			x: b.x + b.width,
+			y: b.y
+		},
+		{
+			x: b.x,
+			y: b.y + b.height
+		},
+		{
+			x: b.x + b.width,
+			y: b.y + b.height
+		}
+	].map((corner) => apply(object.transform, corner)));
+}
+/**
+* Shared by Rectangle/Ellipse: both use the top-edge, Y-up, extends-downward
+* convention (see `shapeObjects.ts`'s own header comment), and both rotate
+* (Phase 3) about the same center `(x + width/2, y - height/2)`. An ellipse's
+* axis-aligned bounds equal its bounding rectangle's — an ellipse never
+* exceeds the box it's inscribed in — so one corner-rotation helper covers
+* both shapes exactly.
+*/
+function topEdgeRotatedBounds(x, y, width, height, rotation) {
+	if (!rotation) return {
+		minX: x,
+		minY: y - height,
+		maxX: x + width,
+		maxY: y
+	};
+	const m = rotationAbout(rotation, x + width / 2, y - height / 2);
+	return growAll([
+		{
+			x,
+			y
+		},
+		{
+			x: x + width,
+			y
+		},
+		{
+			x,
+			y: y - height
+		},
+		{
+			x: x + width,
+			y: y - height
+		}
+	].map((corner) => apply(m, corner)));
+}
+function rectangleBounds(rect) {
+	return topEdgeRotatedBounds(rect.x, rect.y, rect.width, rect.height, rect.rotation);
+}
+function ellipseBounds(ellipse) {
+	return topEdgeRotatedBounds(ellipse.x, ellipse.y, ellipse.width, ellipse.height, ellipse.rotation);
+}
+/**
+* Same top-edge/Y-up/rotate-about-center convention as Rectangle — a
+* regular polygon's own outline is normalized (`polygonGeometry.ts`'s
+* `fitToBox`) to exactly fill its declared box, so this is exact at
+* rotation 0 and a safe (never-too-small) superset once rotated, matching
+* how `ellipseBounds` already treats its own inscribed shape.
+*/
+function polygonBounds(polygon) {
+	return topEdgeRotatedBounds(polygon.x, polygon.y, polygon.width, polygon.height, polygon.rotation);
+}
+/** Same convention and same safe-superset reasoning as `polygonBounds` — a star's points are normalized to touch its declared box (`polygonGeometry.ts`'s `starPoints`). */
+function starBounds(star) {
+	return topEdgeRotatedBounds(star.x, star.y, star.width, star.height, star.rotation);
+}
+/** Same convention and same safe-superset reasoning as `polygonBounds` — a heart's curve is normalized to touch its declared box (`polygonGeometry.ts`'s `heartPoints`). */
+function heartBounds(heart) {
+	return topEdgeRotatedBounds(heart.x, heart.y, heart.width, heart.height, heart.rotation);
+}
+/** No rotation concept (see `shapeObjects.ts`'s header) — the two endpoints already are the bounds. */
+function lineBounds(line) {
+	return growAll([line.start, line.end]);
+}
+/** Same as `lineBounds` — an arrow's head barbs stay within the shaft's own bounding box (they curve back toward it, never past the tip). */
+function arrowBounds(arrow) {
+	return growAll([arrow.start, arrow.end]);
+}
+/**
+* Union of one or more child bounds, or `null` when every child resolved to
+* nothing (an empty or entirely-dangling group). Used for `GroupObject`
+* bounds — the caller (`BoardDocument.bbox`) supplies `resolve` as its own
+* `bbox(id)` so this stays a pure fold with no document dependency here.
+*/
+function unionBounds(boxes) {
+	let result;
+	for (const box of boxes) {
+		if (!box) continue;
+		if (!result) {
+			result = { ...box };
+			continue;
+		}
+		result.minX = Math.min(result.minX, box.minX);
+		result.minY = Math.min(result.minY, box.minY);
+		result.maxX = Math.max(result.maxX, box.maxX);
+		result.maxY = Math.max(result.maxY, box.maxY);
+	}
+	return result;
+}
+//#endregion
 //#region src/core/document/document.ts
 /**
 * The one place a live Stroke becomes its wire representation — in
@@ -822,8 +1127,73 @@ var EMPTY_CHANGE = {
 	timersUpdated: [],
 	customObjectsAdded: [],
 	customObjectsRemoved: [],
-	customObjectsUpdated: []
+	customObjectsUpdated: [],
+	rectanglesAdded: [],
+	rectanglesRemoved: [],
+	rectanglesUpdated: [],
+	ellipsesAdded: [],
+	ellipsesRemoved: [],
+	ellipsesUpdated: [],
+	groupsAdded: [],
+	groupsRemoved: [],
+	groupsUpdated: [],
+	linesAdded: [],
+	linesRemoved: [],
+	linesUpdated: [],
+	arrowsAdded: [],
+	arrowsRemoved: [],
+	arrowsUpdated: [],
+	polygonsAdded: [],
+	polygonsRemoved: [],
+	polygonsUpdated: [],
+	starsAdded: [],
+	starsRemoved: [],
+	starsUpdated: [],
+	heartsAdded: [],
+	heartsRemoved: [],
+	heartsUpdated: [],
+	orderChanged: []
 };
+/**
+* Flat content types that participate in the unified paint order — see
+* `DocumentChange.orderChanged`'s own doc comment for why notes/timers are
+* excluded. Listed back-to-front in the exact sequence the old fixed
+* per-renderer Z constants already used (rectangles/ellipses lowest, then
+* tables, then images, then ink/text, then custom objects) — this is what
+* `replaceAll`/`emit`'s automatic append-on-add tracking uses to synthesize
+* a default order for a legacy document with no persisted `objectOrder`, so
+* an existing document's visual stacking never changes just from loading it.
+*/
+var ORDERED_ADDED_FIELDS = [
+	"rectanglesAdded",
+	"ellipsesAdded",
+	"tablesAdded",
+	"imagesAdded",
+	"added",
+	"textAdded",
+	"customObjectsAdded",
+	"groupsAdded",
+	"linesAdded",
+	"arrowsAdded",
+	"polygonsAdded",
+	"starsAdded",
+	"heartsAdded"
+];
+var ORDERED_REMOVED_FIELDS = [
+	"rectanglesRemoved",
+	"ellipsesRemoved",
+	"tablesRemoved",
+	"imagesRemoved",
+	"removed",
+	"textRemoved",
+	"customObjectsRemoved",
+	"groupsRemoved",
+	"linesRemoved",
+	"arrowsRemoved",
+	"polygonsRemoved",
+	"starsRemoved",
+	"heartsRemoved"
+];
 var BoardDocument = class {
 	constructor(id) {
 		this.id = id;
@@ -835,8 +1205,83 @@ var BoardDocument = class {
 		this.images = /* @__PURE__ */ new Map();
 		this.timers = /* @__PURE__ */ new Map();
 		this.customObjects = /* @__PURE__ */ new Map();
+		this.rectangles = /* @__PURE__ */ new Map();
+		this.ellipses = /* @__PURE__ */ new Map();
+		this.groups = /* @__PURE__ */ new Map();
+		this.lines = /* @__PURE__ */ new Map();
+		this.arrows = /* @__PURE__ */ new Map();
+		this.polygons = /* @__PURE__ */ new Map();
+		this.stars = /* @__PURE__ */ new Map();
+		this.hearts = /* @__PURE__ */ new Map();
 		this.bboxes = /* @__PURE__ */ new Map();
 		this.listeners = /* @__PURE__ */ new Set();
+		this.objectOrder = [];
+		this.orderIndex = /* @__PURE__ */ new Map();
+	}
+	reindexOrder() {
+		this.orderIndex = new Map(this.objectOrder.map((id, index) => [id, index]));
+	}
+	/** The full current paint order, back to front. */
+	order() {
+		return this.objectOrder;
+	}
+	/** This object's rank in the paint order, or -1 if it doesn't participate (unknown id, a note, or a timer). */
+	orderRank(id) {
+		return this.orderIndex.get(id) ?? -1;
+	}
+	bringForward(id) {
+		const i = this.orderIndex.get(id);
+		if (i === void 0 || i >= this.objectOrder.length - 1) return;
+		[this.objectOrder[i], this.objectOrder[i + 1]] = [this.objectOrder[i + 1], this.objectOrder[i]];
+		this.reindexOrder();
+		this.emit({ orderChanged: [...this.objectOrder] });
+	}
+	sendBackward(id) {
+		const i = this.orderIndex.get(id);
+		if (i === void 0 || i <= 0) return;
+		[this.objectOrder[i], this.objectOrder[i - 1]] = [this.objectOrder[i - 1], this.objectOrder[i]];
+		this.reindexOrder();
+		this.emit({ orderChanged: [...this.objectOrder] });
+	}
+	bringToFront(id) {
+		const i = this.orderIndex.get(id);
+		if (i === void 0 || i >= this.objectOrder.length - 1) return;
+		this.objectOrder.splice(i, 1);
+		this.objectOrder.push(id);
+		this.reindexOrder();
+		this.emit({ orderChanged: [...this.objectOrder] });
+	}
+	sendToBack(id) {
+		const i = this.orderIndex.get(id);
+		if (i === void 0 || i <= 0) return;
+		this.objectOrder.splice(i, 1);
+		this.objectOrder.unshift(id);
+		this.reindexOrder();
+		this.emit({ orderChanged: [...this.objectOrder] });
+	}
+	/** Reorders `id` relative to its current neighbors. A no-op for an id that doesn't participate in paint order (see `orderRank`). */
+	reorder(id, direction) {
+		if (this.orderIndex.get(id) === void 0) return;
+		if (direction === "forward") this.bringForward(id);
+		else if (direction === "backward") this.sendBackward(id);
+		else if (direction === "front") this.bringToFront(id);
+		else this.sendToBack(id);
+	}
+	/**
+	* Overwrites the paint order directly — used only when loading a document
+	* that already carries a persisted `objectOrder`; every other order
+	* mutation goes through `reorder`/the automatic append-on-add tracking in
+	* `emit`. Ids not present in the document are dropped; ids present in the
+	* document but missing from `order` are appended at the back, so a
+	* partially-stale order (e.g. from a schema migration) never silently
+	* drops an object from paint order entirely.
+	*/
+	setOrder(order) {
+		const known = new Set(this.objectOrder);
+		const next = order.filter((id) => known.has(id));
+		for (const id of this.objectOrder) if (!next.includes(id)) next.push(id);
+		this.objectOrder = next;
+		this.reindexOrder();
 	}
 	get(id) {
 		return this.strokes.get(id);
@@ -844,8 +1289,63 @@ var BoardDocument = class {
 	all() {
 		return this.strokes.values();
 	}
-	bbox(id) {
-		return this.bboxes.get(id);
+	/**
+	* World-space bounds for any content object, of any type. Strokes hit
+	* their cached-on-mutation fast path (`bboxes`, populated by
+	* `addStrokes`/`transformStrokes` — many points, worth caching); every
+	* other type computes on demand via `objectBounds.ts` (cheap arithmetic,
+	* no caching needed). A group's bounds are the union of its (recursively
+	* resolved) children — `seen` guards against a cycle in nested groups.
+	*/
+	bbox(id, seen) {
+		const cached = this.bboxes.get(id);
+		if (cached) return cached;
+		const note = this.notes.get(id);
+		if (note) return noteBounds(note);
+		const text = this.texts.get(id);
+		if (text) return textBounds(text);
+		const table = this.tables.get(id);
+		if (table) return tableBounds(table);
+		const image = this.images.get(id);
+		if (image) return imageBounds(image);
+		const timer = this.timers.get(id);
+		if (timer) return timerBounds(timer);
+		const custom = this.customObjects.get(id);
+		if (custom) return customObjectBounds(custom);
+		const rect = this.rectangles.get(id);
+		if (rect) return rectangleBounds(rect);
+		const ellipse = this.ellipses.get(id);
+		if (ellipse) return ellipseBounds(ellipse);
+		const line = this.lines.get(id);
+		if (line) return lineBounds(line);
+		const arrow = this.arrows.get(id);
+		if (arrow) return arrowBounds(arrow);
+		const polygon = this.polygons.get(id);
+		if (polygon) return polygonBounds(polygon);
+		const star = this.stars.get(id);
+		if (star) return starBounds(star);
+		const heart = this.hearts.get(id);
+		if (heart) return heartBounds(heart);
+		const group = this.groups.get(id);
+		if (group) {
+			const visited = seen ?? /* @__PURE__ */ new Set();
+			if (visited.has(id)) return void 0;
+			visited.add(id);
+			return unionBounds(group.children.map((childId) => this.bbox(childId, visited)));
+		}
+	}
+	/**
+	* True if `id` exists and is locked, for any type — the same per-type
+	* probe pattern as `bbox`, for interactive gestures (drag/transform) that
+	* need to gate on lock state regardless of what's selected. Custom
+	* objects are deliberately excluded: their `lock` field is a different
+	* shape (`{holderId, acquiredAt}`, no display name) with no interactive
+	* lock UI yet, matching the existing, deliberate "always unlockable,
+	* never gates a drag" treatment already established elsewhere (e.g.
+	* `getSelectedItemInfo`'s custom branch hardcodes `isLocked: false`).
+	*/
+	isLocked(id) {
+		return !!this.strokes.get(id)?.locked || !!this.notes.get(id)?.locked || !!this.texts.get(id)?.locked || !!this.tables.get(id)?.locked || !!this.images.get(id)?.locked || !!this.timers.get(id)?.locked || !!this.rectangles.get(id)?.locked || !!this.ellipses.get(id)?.locked || !!this.groups.get(id)?.locked || !!this.lines.get(id)?.locked || !!this.arrows.get(id)?.locked || !!this.polygons.get(id)?.locked || !!this.stars.get(id)?.locked || !!this.hearts.get(id)?.locked;
 	}
 	subscribe(listener) {
 		this.listeners.add(listener);
@@ -994,6 +1494,166 @@ var BoardDocument = class {
 		this.customObjects.set(object.id, object);
 		this.emit({ customObjectsUpdated: [object] });
 	}
+	getRectangle(id) {
+		return this.rectangles.get(id);
+	}
+	allRectangles() {
+		return this.rectangles.values();
+	}
+	addRectangles(rectangles) {
+		for (const rect of rectangles) this.rectangles.set(rect.id, rect);
+		this.emit({ rectanglesAdded: rectangles });
+	}
+	removeRectangles(ids) {
+		const rectanglesRemoved = [];
+		for (const id of ids) if (this.rectangles.delete(id)) rectanglesRemoved.push(id);
+		if (rectanglesRemoved.length) this.emit({ rectanglesRemoved });
+	}
+	/** Replace a rectangle's contents (move, resize, restyle) under the same id. */
+	setRectangle(rect) {
+		this.rectangles.set(rect.id, rect);
+		this.emit({ rectanglesUpdated: [rect] });
+	}
+	getEllipse(id) {
+		return this.ellipses.get(id);
+	}
+	allEllipses() {
+		return this.ellipses.values();
+	}
+	addEllipses(ellipses) {
+		for (const ellipse of ellipses) this.ellipses.set(ellipse.id, ellipse);
+		this.emit({ ellipsesAdded: ellipses });
+	}
+	removeEllipses(ids) {
+		const ellipsesRemoved = [];
+		for (const id of ids) if (this.ellipses.delete(id)) ellipsesRemoved.push(id);
+		if (ellipsesRemoved.length) this.emit({ ellipsesRemoved });
+	}
+	/** Replace an ellipse's contents (move, resize, restyle) under the same id. */
+	setEllipse(ellipse) {
+		this.ellipses.set(ellipse.id, ellipse);
+		this.emit({ ellipsesUpdated: [ellipse] });
+	}
+	getGroup(id) {
+		return this.groups.get(id);
+	}
+	allGroups() {
+		return this.groups.values();
+	}
+	addGroups(groups) {
+		for (const group of groups) this.groups.set(group.id, group);
+		this.emit({ groupsAdded: groups });
+	}
+	removeGroups(ids) {
+		const groupsRemoved = [];
+		for (const id of ids) if (this.groups.delete(id)) groupsRemoved.push(id);
+		if (groupsRemoved.length) this.emit({ groupsRemoved });
+	}
+	/** Replace a group's contents (its children list) under the same id. */
+	setGroup(group) {
+		this.groups.set(group.id, group);
+		this.emit({ groupsUpdated: [group] });
+	}
+	getLine(id) {
+		return this.lines.get(id);
+	}
+	allLines() {
+		return this.lines.values();
+	}
+	addLines(lines) {
+		for (const line of lines) this.lines.set(line.id, line);
+		this.emit({ linesAdded: lines });
+	}
+	removeLines(ids) {
+		const linesRemoved = [];
+		for (const id of ids) if (this.lines.delete(id)) linesRemoved.push(id);
+		if (linesRemoved.length) this.emit({ linesRemoved });
+	}
+	/** Replace a line's contents (move, restyle) under the same id. */
+	setLine(line) {
+		this.lines.set(line.id, line);
+		this.emit({ linesUpdated: [line] });
+	}
+	getArrow(id) {
+		return this.arrows.get(id);
+	}
+	allArrows() {
+		return this.arrows.values();
+	}
+	addArrows(arrows) {
+		for (const arrow of arrows) this.arrows.set(arrow.id, arrow);
+		this.emit({ arrowsAdded: arrows });
+	}
+	removeArrows(ids) {
+		const arrowsRemoved = [];
+		for (const id of ids) if (this.arrows.delete(id)) arrowsRemoved.push(id);
+		if (arrowsRemoved.length) this.emit({ arrowsRemoved });
+	}
+	/** Replace an arrow's contents (move, restyle, change head) under the same id. */
+	setArrow(arrow) {
+		this.arrows.set(arrow.id, arrow);
+		this.emit({ arrowsUpdated: [arrow] });
+	}
+	getPolygon(id) {
+		return this.polygons.get(id);
+	}
+	allPolygons() {
+		return this.polygons.values();
+	}
+	addPolygons(polygons) {
+		for (const polygon of polygons) this.polygons.set(polygon.id, polygon);
+		this.emit({ polygonsAdded: polygons });
+	}
+	removePolygons(ids) {
+		const polygonsRemoved = [];
+		for (const id of ids) if (this.polygons.delete(id)) polygonsRemoved.push(id);
+		if (polygonsRemoved.length) this.emit({ polygonsRemoved });
+	}
+	/** Replace a polygon's contents (move, resize, rotate, restyle) under the same id. */
+	setPolygon(polygon) {
+		this.polygons.set(polygon.id, polygon);
+		this.emit({ polygonsUpdated: [polygon] });
+	}
+	getStar(id) {
+		return this.stars.get(id);
+	}
+	allStars() {
+		return this.stars.values();
+	}
+	addStars(stars) {
+		for (const star of stars) this.stars.set(star.id, star);
+		this.emit({ starsAdded: stars });
+	}
+	removeStars(ids) {
+		const starsRemoved = [];
+		for (const id of ids) if (this.stars.delete(id)) starsRemoved.push(id);
+		if (starsRemoved.length) this.emit({ starsRemoved });
+	}
+	/** Replace a star's contents (move, resize, rotate, restyle) under the same id. */
+	setStar(star) {
+		this.stars.set(star.id, star);
+		this.emit({ starsUpdated: [star] });
+	}
+	getHeart(id) {
+		return this.hearts.get(id);
+	}
+	allHearts() {
+		return this.hearts.values();
+	}
+	addHearts(hearts) {
+		for (const heart of hearts) this.hearts.set(heart.id, heart);
+		this.emit({ heartsAdded: hearts });
+	}
+	removeHearts(ids) {
+		const heartsRemoved = [];
+		for (const id of ids) if (this.hearts.delete(id)) heartsRemoved.push(id);
+		if (heartsRemoved.length) this.emit({ heartsRemoved });
+	}
+	/** Replace a heart's contents (move, resize, rotate, restyle) under the same id. */
+	setHeart(heart) {
+		this.hearts.set(heart.id, heart);
+		this.emit({ heartsUpdated: [heart] });
+	}
 	setStrokeLocked(id, locked, by) {
 		const stroke = this.strokes.get(id);
 		if (!stroke) return;
@@ -1041,8 +1701,56 @@ var BoardDocument = class {
 		applyItemLock(timer, locked, by);
 		this.emit({ timersUpdated: [timer] });
 	}
+	setRectangleLocked(id, locked, by) {
+		const rect = this.rectangles.get(id);
+		if (!rect) return;
+		applyItemLock(rect, locked, by);
+		this.emit({ rectanglesUpdated: [rect] });
+	}
+	setEllipseLocked(id, locked, by) {
+		const ellipse = this.ellipses.get(id);
+		if (!ellipse) return;
+		applyItemLock(ellipse, locked, by);
+		this.emit({ ellipsesUpdated: [ellipse] });
+	}
+	setGroupLocked(id, locked, by) {
+		const group = this.groups.get(id);
+		if (!group) return;
+		applyItemLock(group, locked, by);
+		this.emit({ groupsUpdated: [group] });
+	}
+	setLineLocked(id, locked, by) {
+		const line = this.lines.get(id);
+		if (!line) return;
+		applyItemLock(line, locked, by);
+		this.emit({ linesUpdated: [line] });
+	}
+	setArrowLocked(id, locked, by) {
+		const arrow = this.arrows.get(id);
+		if (!arrow) return;
+		applyItemLock(arrow, locked, by);
+		this.emit({ arrowsUpdated: [arrow] });
+	}
+	setPolygonLocked(id, locked, by) {
+		const polygon = this.polygons.get(id);
+		if (!polygon) return;
+		applyItemLock(polygon, locked, by);
+		this.emit({ polygonsUpdated: [polygon] });
+	}
+	setStarLocked(id, locked, by) {
+		const star = this.stars.get(id);
+		if (!star) return;
+		applyItemLock(star, locked, by);
+		this.emit({ starsUpdated: [star] });
+	}
+	setHeartLocked(id, locked, by) {
+		const heart = this.hearts.get(id);
+		if (!heart) return;
+		applyItemLock(heart, locked, by);
+		this.emit({ heartsUpdated: [heart] });
+	}
 	/** Replace all content (initial load). Does not touch `version`. */
-	replaceAll(strokes, notes, texts, tables = [], images = [], timers = [], customObjects = []) {
+	replaceAll(strokes, notes, texts, tables = [], images = [], timers = [], customObjects = [], rectangles = [], ellipses = [], groups = [], lines = [], arrows = [], polygons = [], stars = [], hearts = [], objectOrder) {
 		const removed = [...this.strokes.keys()];
 		const notesRemoved = [...this.notes.keys()];
 		const textRemoved = [...this.texts.keys()];
@@ -1050,6 +1758,14 @@ var BoardDocument = class {
 		const imagesRemoved = [...this.images.keys()];
 		const timersRemoved = [...this.timers.keys()];
 		const customObjectsRemoved = [...this.customObjects.keys()];
+		const rectanglesRemoved = [...this.rectangles.keys()];
+		const ellipsesRemoved = [...this.ellipses.keys()];
+		const groupsRemoved = [...this.groups.keys()];
+		const linesRemoved = [...this.lines.keys()];
+		const arrowsRemoved = [...this.arrows.keys()];
+		const polygonsRemoved = [...this.polygons.keys()];
+		const starsRemoved = [...this.stars.keys()];
+		const heartsRemoved = [...this.hearts.keys()];
 		this.strokes.clear();
 		this.notes.clear();
 		this.texts.clear();
@@ -1057,6 +1773,14 @@ var BoardDocument = class {
 		this.images.clear();
 		this.timers.clear();
 		this.customObjects.clear();
+		this.rectangles.clear();
+		this.ellipses.clear();
+		this.groups.clear();
+		this.lines.clear();
+		this.arrows.clear();
+		this.polygons.clear();
+		this.stars.clear();
+		this.hearts.clear();
 		this.bboxes.clear();
 		for (const stroke of strokes) {
 			this.strokes.set(stroke.id, stroke);
@@ -1068,6 +1792,14 @@ var BoardDocument = class {
 		for (const img of images) this.images.set(img.id, img);
 		for (const timer of timers) this.timers.set(timer.id, timer);
 		for (const object of customObjects) this.customObjects.set(object.id, object);
+		for (const rect of rectangles) this.rectangles.set(rect.id, rect);
+		for (const ellipse of ellipses) this.ellipses.set(ellipse.id, ellipse);
+		for (const group of groups) this.groups.set(group.id, group);
+		for (const line of lines) this.lines.set(line.id, line);
+		for (const arrow of arrows) this.arrows.set(arrow.id, arrow);
+		for (const polygon of polygons) this.polygons.set(polygon.id, polygon);
+		for (const star of stars) this.stars.set(star.id, star);
+		for (const heart of hearts) this.hearts.set(heart.id, heart);
 		this.emit({
 			added: strokes,
 			removed,
@@ -1082,8 +1814,25 @@ var BoardDocument = class {
 			timersAdded: timers,
 			timersRemoved,
 			customObjectsAdded: customObjects,
-			customObjectsRemoved
+			customObjectsRemoved,
+			rectanglesAdded: rectangles,
+			rectanglesRemoved,
+			ellipsesAdded: ellipses,
+			ellipsesRemoved,
+			groupsAdded: groups,
+			groupsRemoved,
+			linesAdded: lines,
+			linesRemoved,
+			arrowsAdded: arrows,
+			arrowsRemoved,
+			polygonsAdded: polygons,
+			polygonsRemoved,
+			starsAdded: stars,
+			starsRemoved,
+			heartsAdded: hearts,
+			heartsRemoved
 		});
+		if (objectOrder) this.setOrder(objectOrder);
 	}
 	/** Apply incremental real-time change received from a remote collaborator over WebSocket. */
 	applyRemoteChange(change) {
@@ -1195,6 +1944,114 @@ var BoardDocument = class {
 			for (const object of change.customObjectsUpdated) this.customObjects.set(object.id, object);
 			events.customObjectsUpdated = change.customObjectsUpdated;
 		}
+		if (change.rectanglesAdded && change.rectanglesAdded.length > 0) {
+			for (const rect of change.rectanglesAdded) this.rectangles.set(rect.id, rect);
+			events.rectanglesAdded = change.rectanglesAdded;
+		}
+		if (change.rectanglesRemoved && change.rectanglesRemoved.length > 0) {
+			const rectanglesRemoved = [];
+			for (const id of change.rectanglesRemoved) if (this.rectangles.delete(id)) rectanglesRemoved.push(id);
+			if (rectanglesRemoved.length > 0) events.rectanglesRemoved = rectanglesRemoved;
+		}
+		if (change.rectanglesUpdated && change.rectanglesUpdated.length > 0) {
+			for (const rect of change.rectanglesUpdated) this.rectangles.set(rect.id, rect);
+			events.rectanglesUpdated = change.rectanglesUpdated;
+		}
+		if (change.ellipsesAdded && change.ellipsesAdded.length > 0) {
+			for (const ellipse of change.ellipsesAdded) this.ellipses.set(ellipse.id, ellipse);
+			events.ellipsesAdded = change.ellipsesAdded;
+		}
+		if (change.ellipsesRemoved && change.ellipsesRemoved.length > 0) {
+			const ellipsesRemoved = [];
+			for (const id of change.ellipsesRemoved) if (this.ellipses.delete(id)) ellipsesRemoved.push(id);
+			if (ellipsesRemoved.length > 0) events.ellipsesRemoved = ellipsesRemoved;
+		}
+		if (change.ellipsesUpdated && change.ellipsesUpdated.length > 0) {
+			for (const ellipse of change.ellipsesUpdated) this.ellipses.set(ellipse.id, ellipse);
+			events.ellipsesUpdated = change.ellipsesUpdated;
+		}
+		if (change.groupsAdded && change.groupsAdded.length > 0) {
+			for (const group of change.groupsAdded) this.groups.set(group.id, group);
+			events.groupsAdded = change.groupsAdded;
+		}
+		if (change.groupsRemoved && change.groupsRemoved.length > 0) {
+			const groupsRemoved = [];
+			for (const id of change.groupsRemoved) if (this.groups.delete(id)) groupsRemoved.push(id);
+			if (groupsRemoved.length > 0) events.groupsRemoved = groupsRemoved;
+		}
+		if (change.groupsUpdated && change.groupsUpdated.length > 0) {
+			for (const group of change.groupsUpdated) this.groups.set(group.id, group);
+			events.groupsUpdated = change.groupsUpdated;
+		}
+		if (change.linesAdded && change.linesAdded.length > 0) {
+			for (const line of change.linesAdded) this.lines.set(line.id, line);
+			events.linesAdded = change.linesAdded;
+		}
+		if (change.linesRemoved && change.linesRemoved.length > 0) {
+			const linesRemoved = [];
+			for (const id of change.linesRemoved) if (this.lines.delete(id)) linesRemoved.push(id);
+			if (linesRemoved.length > 0) events.linesRemoved = linesRemoved;
+		}
+		if (change.linesUpdated && change.linesUpdated.length > 0) {
+			for (const line of change.linesUpdated) this.lines.set(line.id, line);
+			events.linesUpdated = change.linesUpdated;
+		}
+		if (change.arrowsAdded && change.arrowsAdded.length > 0) {
+			for (const arrow of change.arrowsAdded) this.arrows.set(arrow.id, arrow);
+			events.arrowsAdded = change.arrowsAdded;
+		}
+		if (change.arrowsRemoved && change.arrowsRemoved.length > 0) {
+			const arrowsRemoved = [];
+			for (const id of change.arrowsRemoved) if (this.arrows.delete(id)) arrowsRemoved.push(id);
+			if (arrowsRemoved.length > 0) events.arrowsRemoved = arrowsRemoved;
+		}
+		if (change.arrowsUpdated && change.arrowsUpdated.length > 0) {
+			for (const arrow of change.arrowsUpdated) this.arrows.set(arrow.id, arrow);
+			events.arrowsUpdated = change.arrowsUpdated;
+		}
+		if (change.polygonsAdded && change.polygonsAdded.length > 0) {
+			for (const polygon of change.polygonsAdded) this.polygons.set(polygon.id, polygon);
+			events.polygonsAdded = change.polygonsAdded;
+		}
+		if (change.polygonsRemoved && change.polygonsRemoved.length > 0) {
+			const polygonsRemoved = [];
+			for (const id of change.polygonsRemoved) if (this.polygons.delete(id)) polygonsRemoved.push(id);
+			if (polygonsRemoved.length > 0) events.polygonsRemoved = polygonsRemoved;
+		}
+		if (change.polygonsUpdated && change.polygonsUpdated.length > 0) {
+			for (const polygon of change.polygonsUpdated) this.polygons.set(polygon.id, polygon);
+			events.polygonsUpdated = change.polygonsUpdated;
+		}
+		if (change.starsAdded && change.starsAdded.length > 0) {
+			for (const star of change.starsAdded) this.stars.set(star.id, star);
+			events.starsAdded = change.starsAdded;
+		}
+		if (change.starsRemoved && change.starsRemoved.length > 0) {
+			const starsRemoved = [];
+			for (const id of change.starsRemoved) if (this.stars.delete(id)) starsRemoved.push(id);
+			if (starsRemoved.length > 0) events.starsRemoved = starsRemoved;
+		}
+		if (change.starsUpdated && change.starsUpdated.length > 0) {
+			for (const star of change.starsUpdated) this.stars.set(star.id, star);
+			events.starsUpdated = change.starsUpdated;
+		}
+		if (change.heartsAdded && change.heartsAdded.length > 0) {
+			for (const heart of change.heartsAdded) this.hearts.set(heart.id, heart);
+			events.heartsAdded = change.heartsAdded;
+		}
+		if (change.heartsRemoved && change.heartsRemoved.length > 0) {
+			const heartsRemoved = [];
+			for (const id of change.heartsRemoved) if (this.hearts.delete(id)) heartsRemoved.push(id);
+			if (heartsRemoved.length > 0) events.heartsRemoved = heartsRemoved;
+		}
+		if (change.heartsUpdated && change.heartsUpdated.length > 0) {
+			for (const heart of change.heartsUpdated) this.hearts.set(heart.id, heart);
+			events.heartsUpdated = change.heartsUpdated;
+		}
+		if (change.orderChanged && change.orderChanged.length > 0) {
+			this.setOrder(change.orderChanged);
+			events.orderChanged = change.orderChanged;
+		}
 		this.emit(events);
 	}
 	toJSON() {
@@ -1206,12 +2063,45 @@ var BoardDocument = class {
 			tables: [...this.tables.values()].map(cloneTable),
 			images: [...this.images.values()].map(cloneImage),
 			timers: [...this.timers.values()].map(cloneTimer),
-			customObjects: [...this.customObjects.values()].map(cloneCustomObject)
+			customObjects: [...this.customObjects.values()].map(cloneCustomObject),
+			rectangles: [...this.rectangles.values()].map(cloneRectangle),
+			ellipses: [...this.ellipses.values()].map(cloneEllipse),
+			groups: [...this.groups.values()].map(cloneGroup),
+			lines: [...this.lines.values()].map(cloneLine),
+			arrows: [...this.arrows.values()].map(cloneArrow),
+			polygons: [...this.polygons.values()].map(clonePolygon),
+			stars: [...this.stars.values()].map(cloneStar),
+			hearts: [...this.hearts.values()].map(cloneHeart),
+			objectOrder: [...this.objectOrder]
 		};
 	}
+	static deserializeGroups(data) {
+		return (data.groups ?? []).map(cloneGroup);
+	}
+	static deserializeLines(data) {
+		return (data.lines ?? []).map(cloneLine);
+	}
+	static deserializeArrows(data) {
+		return (data.arrows ?? []).map(cloneArrow);
+	}
+	static deserializePolygons(data) {
+		return (data.polygons ?? []).map(clonePolygon);
+	}
+	static deserializeStars(data) {
+		return (data.stars ?? []).map(cloneStar);
+	}
+	static deserializeHearts(data) {
+		return (data.hearts ?? []).map(cloneHeart);
+	}
 	static deserializeCustomObjects(data) {
 		return (data.customObjects ?? []).map(cloneCustomObject);
 	}
+	static deserializeRectangles(data) {
+		return (data.rectangles ?? []).map(cloneRectangle);
+	}
+	static deserializeEllipses(data) {
+		return (data.ellipses ?? []).map(cloneEllipse);
+	}
 	static deserializeImages(data) {
 		return (data.images ?? []).map(cloneImage);
 	}
@@ -1245,7 +2135,56 @@ var BoardDocument = class {
 		}
 		return strokes;
 	}
+	/**
+	* Every mutation funnels through here, so paint-order tracking lives in
+	* exactly one place rather than at every individual add/remove call site
+	* (18 of them, times `replaceAll`/`applyRemoteChange`) — new ids are
+	* appended to the back (front-most) of `objectOrder`, removed ids are
+	* spliced out. An explicit reorder (`reorder`/`setOrder`) updates
+	* `objectOrder` itself before calling this, so this step is a no-op for
+	* ids already tracked (idempotent by construction: `orderIndex.has` gates
+	* every append).
+	*
+	* `orderChanged` is populated here whenever `objectOrder` actually
+	* changed — not just for an explicit reorder, but for any add/remove too.
+	* A pure append never shifts an existing id's rank (new ids land at the
+	* tail), but a removal splices a middle id out, which *does* shift every
+	* id after it down by one — a renderer that only resynced Z on an
+	* explicit reorder would silently render those with a stale rank until
+	* something else happened to touch them, eventually colliding with a
+	* freshly-added object's freshly-computed Z. Firing this on every
+	* order-touching change (not just removes) is simpler than special-
+	* casing which kind of change actually needs it, at the cost of a
+	* redundant same-value resync on a pure append.
+	*/
 	emit(change) {
+		let orderTouched = false;
+		for (const field of ORDERED_ADDED_FIELDS) {
+			const objects = change[field];
+			if (!objects) continue;
+			for (const object of objects) if (!this.orderIndex.has(object.id)) {
+				this.objectOrder.push(object.id);
+				orderTouched = true;
+			}
+		}
+		for (const field of ORDERED_REMOVED_FIELDS) {
+			const ids = change[field];
+			if (!ids) continue;
+			for (const id of ids) {
+				const index = this.objectOrder.indexOf(id);
+				if (index !== -1) {
+					this.objectOrder.splice(index, 1);
+					orderTouched = true;
+				}
+			}
+		}
+		if (orderTouched) {
+			this.reindexOrder();
+			change = {
+				...change,
+				orderChanged: [...this.objectOrder]
+			};
+		}
 		const full = {
 			...EMPTY_CHANGE,
 			...change
@@ -1399,6 +2338,200 @@ var TransformCommand = class {
 		if (changed.length) doc.transformStrokes(changed);
 	}
 };
+/**
+* One move gesture over a mixed-type selection (Phase 3) — the general
+* successor to `TransformCommand` for translation. `TransformCommand`
+* itself stays as-is (still used for scale/rotate, which remain stroke-only
+* this phase — see `interaction/tools/selectTool.ts`'s `TransformState`):
+* its own per-id `doc.get(id)` check already no-ops safely for any id that
+* isn't a stroke, so it doesn't need touching for that narrower case.
+*
+* `delta` here is always a pure translation (never scale/rotate), so
+* `apply(delta, point)` is a safe, uniform way to move every position-only
+* type's `x`/`y` — translating commutes trivially regardless of a shape's
+* own rotation. Matrix-carrying types (stroke, Custom) instead compose
+* `delta` onto their existing matrix/transform, matching `TransformCommand`.
+*
+* A group id in `ids` is expanded into its (recursively resolved, cycle-
+* safe) children every time `compose` runs — deterministic, since group
+* membership never changes mid-command — so moving a selected group means
+* moving every one of its members by the same delta. This expansion is
+* `TransformObjectsCommand`'s own responsibility precisely so a caller that
+* doesn't itself expand groups (e.g. `ScrawlEngine.nudgeSelection`) still
+* gets correct behavior; `interaction/tools/selectTool.ts`'s `TransformState`
+* separately expands for its own reason (live per-child drag preview), which
+* makes this a no-op re-expansion for that caller, not a conflict.
+*/
+var TransformObjectsCommand = class {
+	constructor(ids, delta) {
+		this.ids = ids;
+		this.delta = delta;
+		this.label = "move selection";
+		this.inverse = invert(delta);
+	}
+	apply(doc) {
+		this.compose(doc, this.delta);
+	}
+	revert(doc) {
+		this.compose(doc, this.inverse);
+	}
+	compose(doc, m) {
+		const resolved = /* @__PURE__ */ new Set();
+		const expand = (id, seen) => {
+			if (seen.has(id)) return;
+			seen.add(id);
+			const group = doc.getGroup(id);
+			if (group) {
+				for (const childId of group.children) expand(childId, seen);
+				return;
+			}
+			resolved.add(id);
+		};
+		for (const id of this.ids) expand(id, /* @__PURE__ */ new Set());
+		const changedStrokes = [];
+		for (const id of resolved) {
+			const stroke = doc.get(id);
+			if (stroke) {
+				stroke.matrix = mul(m, stroke.matrix ?? [
+					1,
+					0,
+					0,
+					1,
+					0,
+					0
+				]);
+				changedStrokes.push(stroke);
+				continue;
+			}
+			const custom = doc.getCustomObject(id);
+			if (custom) {
+				doc.setCustomObject({
+					...custom,
+					transform: mul(m, custom.transform)
+				});
+				continue;
+			}
+			const note = doc.getNote(id);
+			if (note) {
+				const p = apply(m, note);
+				doc.setNote({
+					...note,
+					x: p.x,
+					y: p.y
+				});
+				continue;
+			}
+			const text = doc.getText(id);
+			if (text) {
+				const p = apply(m, text);
+				doc.setText({
+					...text,
+					x: p.x,
+					y: p.y
+				});
+				continue;
+			}
+			const table = doc.getTable(id);
+			if (table) {
+				const p = apply(m, table);
+				doc.setTable({
+					...table,
+					x: p.x,
+					y: p.y
+				});
+				continue;
+			}
+			const image = doc.getImage(id);
+			if (image) {
+				const p = apply(m, image);
+				doc.setImage({
+					...image,
+					x: p.x,
+					y: p.y
+				});
+				continue;
+			}
+			const timer = doc.getTimer(id);
+			if (timer) {
+				const p = apply(m, timer);
+				doc.setTimer({
+					...timer,
+					x: p.x,
+					y: p.y
+				});
+				continue;
+			}
+			const rect = doc.getRectangle(id);
+			if (rect) {
+				const p = apply(m, rect);
+				doc.setRectangle({
+					...rect,
+					x: p.x,
+					y: p.y
+				});
+				continue;
+			}
+			const ellipse = doc.getEllipse(id);
+			if (ellipse) {
+				const p = apply(m, ellipse);
+				doc.setEllipse({
+					...ellipse,
+					x: p.x,
+					y: p.y
+				});
+				continue;
+			}
+			const line = doc.getLine(id);
+			if (line) {
+				doc.setLine({
+					...line,
+					start: apply(m, line.start),
+					end: apply(m, line.end)
+				});
+				continue;
+			}
+			const arrow = doc.getArrow(id);
+			if (arrow) {
+				doc.setArrow({
+					...arrow,
+					start: apply(m, arrow.start),
+					end: apply(m, arrow.end)
+				});
+				continue;
+			}
+			const polygon = doc.getPolygon(id);
+			if (polygon) {
+				const p = apply(m, polygon);
+				doc.setPolygon({
+					...polygon,
+					x: p.x,
+					y: p.y
+				});
+				continue;
+			}
+			const star = doc.getStar(id);
+			if (star) {
+				const p = apply(m, star);
+				doc.setStar({
+					...star,
+					x: p.x,
+					y: p.y
+				});
+				continue;
+			}
+			const heart = doc.getHeart(id);
+			if (heart) {
+				const p = apply(m, heart);
+				doc.setHeart({
+					...heart,
+					x: p.x,
+					y: p.y
+				});
+			}
+		}
+		if (changedStrokes.length) doc.transformStrokes(changedStrokes);
+	}
+};
 var AddNoteCommand = class {
 	constructor(note) {
 		this.label = "add note";
@@ -1600,6 +2733,342 @@ var DeleteTimerCommand = class {
 		doc.addTimers([cloneTimer(this.timer)]);
 	}
 };
+/** Add/update/delete for semantic Rectangle objects (Phase 2). */
+var AddRectangleCommand = class {
+	constructor(rect) {
+		this.label = "add rectangle";
+		this.rect = cloneRectangle(rect);
+	}
+	apply(doc) {
+		doc.addRectangles([cloneRectangle(this.rect)]);
+	}
+	revert(doc) {
+		doc.removeRectangles([this.rect.id]);
+	}
+};
+var UpdateRectangleCommand = class {
+	constructor(before, after) {
+		this.label = "update rectangle";
+		this.before = cloneRectangle(before);
+		this.after = cloneRectangle(after);
+	}
+	apply(doc) {
+		doc.setRectangle(cloneRectangle(this.after));
+	}
+	revert(doc) {
+		doc.setRectangle(cloneRectangle(this.before));
+	}
+};
+var DeleteRectangleCommand = class {
+	constructor(rect) {
+		this.label = "delete rectangle";
+		this.rect = cloneRectangle(rect);
+	}
+	apply(doc) {
+		doc.removeRectangles([this.rect.id]);
+	}
+	revert(doc) {
+		doc.addRectangles([cloneRectangle(this.rect)]);
+	}
+};
+/** Add/update/delete for semantic Ellipse objects (Phase 2). */
+var AddEllipseCommand = class {
+	constructor(ellipse) {
+		this.label = "add ellipse";
+		this.ellipse = cloneEllipse(ellipse);
+	}
+	apply(doc) {
+		doc.addEllipses([cloneEllipse(this.ellipse)]);
+	}
+	revert(doc) {
+		doc.removeEllipses([this.ellipse.id]);
+	}
+};
+var UpdateEllipseCommand = class {
+	constructor(before, after) {
+		this.label = "update ellipse";
+		this.before = cloneEllipse(before);
+		this.after = cloneEllipse(after);
+	}
+	apply(doc) {
+		doc.setEllipse(cloneEllipse(this.after));
+	}
+	revert(doc) {
+		doc.setEllipse(cloneEllipse(this.before));
+	}
+};
+var DeleteEllipseCommand = class {
+	constructor(ellipse) {
+		this.label = "delete ellipse";
+		this.ellipse = cloneEllipse(ellipse);
+	}
+	apply(doc) {
+		doc.removeEllipses([this.ellipse.id]);
+	}
+	revert(doc) {
+		doc.addEllipses([cloneEllipse(this.ellipse)]);
+	}
+};
+/** Add/update/delete for semantic Line objects (Phase 4). */
+var AddLineCommand = class {
+	constructor(line) {
+		this.label = "add line";
+		this.line = cloneLine(line);
+	}
+	apply(doc) {
+		doc.addLines([cloneLine(this.line)]);
+	}
+	revert(doc) {
+		doc.removeLines([this.line.id]);
+	}
+};
+var UpdateLineCommand = class {
+	constructor(before, after) {
+		this.label = "update line";
+		this.before = cloneLine(before);
+		this.after = cloneLine(after);
+	}
+	apply(doc) {
+		doc.setLine(cloneLine(this.after));
+	}
+	revert(doc) {
+		doc.setLine(cloneLine(this.before));
+	}
+};
+var DeleteLineCommand = class {
+	constructor(line) {
+		this.label = "delete line";
+		this.line = cloneLine(line);
+	}
+	apply(doc) {
+		doc.removeLines([this.line.id]);
+	}
+	revert(doc) {
+		doc.addLines([cloneLine(this.line)]);
+	}
+};
+/** Add/update/delete for semantic Arrow objects (Phase 4). */
+var AddArrowCommand = class {
+	constructor(arrow) {
+		this.label = "add arrow";
+		this.arrow = cloneArrow(arrow);
+	}
+	apply(doc) {
+		doc.addArrows([cloneArrow(this.arrow)]);
+	}
+	revert(doc) {
+		doc.removeArrows([this.arrow.id]);
+	}
+};
+var UpdateArrowCommand = class {
+	constructor(before, after) {
+		this.label = "update arrow";
+		this.before = cloneArrow(before);
+		this.after = cloneArrow(after);
+	}
+	apply(doc) {
+		doc.setArrow(cloneArrow(this.after));
+	}
+	revert(doc) {
+		doc.setArrow(cloneArrow(this.before));
+	}
+};
+var DeleteArrowCommand = class {
+	constructor(arrow) {
+		this.label = "delete arrow";
+		this.arrow = cloneArrow(arrow);
+	}
+	apply(doc) {
+		doc.removeArrows([this.arrow.id]);
+	}
+	revert(doc) {
+		doc.addArrows([cloneArrow(this.arrow)]);
+	}
+};
+/** Add/update/delete for semantic Polygon objects (Phase 4) — Triangle/Diamond/Pentagon/Hexagon/Octagon. */
+var AddPolygonCommand = class {
+	constructor(polygon) {
+		this.label = "add polygon";
+		this.polygon = clonePolygon(polygon);
+	}
+	apply(doc) {
+		doc.addPolygons([clonePolygon(this.polygon)]);
+	}
+	revert(doc) {
+		doc.removePolygons([this.polygon.id]);
+	}
+};
+var UpdatePolygonCommand = class {
+	constructor(before, after) {
+		this.label = "update polygon";
+		this.before = clonePolygon(before);
+		this.after = clonePolygon(after);
+	}
+	apply(doc) {
+		doc.setPolygon(clonePolygon(this.after));
+	}
+	revert(doc) {
+		doc.setPolygon(clonePolygon(this.before));
+	}
+};
+var DeletePolygonCommand = class {
+	constructor(polygon) {
+		this.label = "delete polygon";
+		this.polygon = clonePolygon(polygon);
+	}
+	apply(doc) {
+		doc.removePolygons([this.polygon.id]);
+	}
+	revert(doc) {
+		doc.addPolygons([clonePolygon(this.polygon)]);
+	}
+};
+/** Add/update/delete for semantic Star objects (Phase 4). */
+var AddStarCommand = class {
+	constructor(star) {
+		this.label = "add star";
+		this.star = cloneStar(star);
+	}
+	apply(doc) {
+		doc.addStars([cloneStar(this.star)]);
+	}
+	revert(doc) {
+		doc.removeStars([this.star.id]);
+	}
+};
+var UpdateStarCommand = class {
+	constructor(before, after) {
+		this.label = "update star";
+		this.before = cloneStar(before);
+		this.after = cloneStar(after);
+	}
+	apply(doc) {
+		doc.setStar(cloneStar(this.after));
+	}
+	revert(doc) {
+		doc.setStar(cloneStar(this.before));
+	}
+};
+var DeleteStarCommand = class {
+	constructor(star) {
+		this.label = "delete star";
+		this.star = cloneStar(star);
+	}
+	apply(doc) {
+		doc.removeStars([this.star.id]);
+	}
+	revert(doc) {
+		doc.addStars([cloneStar(this.star)]);
+	}
+};
+/** Add/update/delete for semantic Heart objects (Phase 4). */
+var AddHeartCommand = class {
+	constructor(heart) {
+		this.label = "add heart";
+		this.heart = cloneHeart(heart);
+	}
+	apply(doc) {
+		doc.addHearts([cloneHeart(this.heart)]);
+	}
+	revert(doc) {
+		doc.removeHearts([this.heart.id]);
+	}
+};
+var UpdateHeartCommand = class {
+	constructor(before, after) {
+		this.label = "update heart";
+		this.before = cloneHeart(before);
+		this.after = cloneHeart(after);
+	}
+	apply(doc) {
+		doc.setHeart(cloneHeart(this.after));
+	}
+	revert(doc) {
+		doc.setHeart(cloneHeart(this.before));
+	}
+};
+var DeleteHeartCommand = class {
+	constructor(heart) {
+		this.label = "delete heart";
+		this.heart = cloneHeart(heart);
+	}
+	apply(doc) {
+		doc.removeHearts([this.heart.id]);
+	}
+	revert(doc) {
+		doc.addHearts([cloneHeart(this.heart)]);
+	}
+};
+/** Add/update/delete for Groups (Phase 3). */
+var AddGroupCommand = class {
+	constructor(group) {
+		this.label = "group";
+		this.group = cloneGroup(group);
+	}
+	apply(doc) {
+		doc.addGroups([cloneGroup(this.group)]);
+	}
+	revert(doc) {
+		doc.removeGroups([this.group.id]);
+	}
+};
+var UpdateGroupCommand = class {
+	constructor(before, after) {
+		this.label = "update group";
+		this.before = cloneGroup(before);
+		this.after = cloneGroup(after);
+	}
+	apply(doc) {
+		doc.setGroup(cloneGroup(this.after));
+	}
+	revert(doc) {
+		doc.setGroup(cloneGroup(this.before));
+	}
+};
+var DeleteGroupCommand = class {
+	constructor(group) {
+		this.label = "ungroup";
+		this.group = cloneGroup(group);
+	}
+	apply(doc) {
+		doc.removeGroups([this.group.id]);
+	}
+	revert(doc) {
+		doc.addGroups([cloneGroup(this.group)]);
+	}
+};
+var REORDER_LABELS = {
+	forward: "bring forward",
+	backward: "send backward",
+	front: "bring to front",
+	back: "send to back"
+};
+/**
+* Bring-forward / send-backward / bring-to-front / send-to-back (Phase 3) —
+* one command family covering all four directions rather than four
+* near-identical classes, since the only difference between them is which
+* `BoardDocument.reorder` direction to replay. Captures the full paint order
+* on first `apply` rather than in the constructor — `BoardDocument.order()`
+* needs the doc, which a `Command` only ever receives via `apply`/`revert` —
+* so `revert` can restore it exactly; redo re-runs the same `reorder` call,
+* which is deterministic because `revert` always restores the identical
+* starting order first.
+*/
+var ReorderObjectCommand = class {
+	constructor(id, direction) {
+		this.id = id;
+		this.direction = direction;
+		this.before = null;
+		this.label = REORDER_LABELS[direction];
+	}
+	apply(doc) {
+		this.before ??= [...doc.order()];
+		doc.reorder(this.id, this.direction);
+	}
+	revert(doc) {
+		if (this.before) doc.applyRemoteChange({ orderChanged: this.before });
+	}
+};
 var LockItemsCommand = class {
 	constructor(targets, targetState, actor) {
 		this.label = "toggle lock";
@@ -1627,10 +3096,38 @@ var LockItemsCommand = class {
 		else if (type === "table") doc.setTableLocked(id, locked, by);
 		else if (type === "image") doc.setImageLocked(id, locked, by);
 		else if (type === "timer") doc.setTimerLocked(id, locked, by);
+		else if (type === "rectangle") doc.setRectangleLocked(id, locked, by);
+		else if (type === "ellipse") doc.setEllipseLocked(id, locked, by);
+		else if (type === "group") doc.setGroupLocked(id, locked, by);
+		else if (type === "line") doc.setLineLocked(id, locked, by);
+		else if (type === "arrow") doc.setArrowLocked(id, locked, by);
+		else if (type === "polygon") doc.setPolygonLocked(id, locked, by);
+		else if (type === "star") doc.setStarLocked(id, locked, by);
+		else if (type === "heart") doc.setHeartLocked(id, locked, by);
 	}
 };
 //#endregion
 //#region src/core/history/history.ts
+/**
+* Several commands applied/reverted together as one undo step (Phase 3
+* consolidation — this exact class used to be hand-duplicated as a private
+* `CommandBatch` in `controller-internal.ts` and an exported
+* `ExtensionCommandBatch` in `interaction/tools/customTool.ts`; both now
+* import this one instead). Revert runs in reverse order, so a batch that
+* depends on ordering (e.g. add-then-reference) undoes cleanly.
+*/
+var CommandBatch = class {
+	constructor(label, commands) {
+		this.label = label;
+		this.commands = commands;
+	}
+	apply(doc) {
+		for (const command of this.commands) command.apply(doc);
+	}
+	revert(doc) {
+		for (const command of [...this.commands].reverse()) command.revert(doc);
+	}
+};
 var LIMIT = 200;
 var History = class {
 	constructor(doc) {
@@ -1699,6 +3196,14 @@ var ADDED = [
 	["tablesAdded", "tables"],
 	["imagesAdded", "images"],
 	["timersAdded", "timers"],
+	["rectanglesAdded", "rectangles"],
+	["ellipsesAdded", "ellipses"],
+	["groupsAdded", "groups"],
+	["linesAdded", "lines"],
+	["arrowsAdded", "arrows"],
+	["polygonsAdded", "polygons"],
+	["starsAdded", "stars"],
+	["heartsAdded", "hearts"],
 	["customObjectsAdded", "customObjects"]
 ];
 var UPDATED = [
@@ -1709,6 +3214,14 @@ var UPDATED = [
 	["tablesUpdated", "tables"],
 	["imagesUpdated", "images"],
 	["timersUpdated", "timers"],
+	["rectanglesUpdated", "rectangles"],
+	["ellipsesUpdated", "ellipses"],
+	["groupsUpdated", "groups"],
+	["linesUpdated", "lines"],
+	["arrowsUpdated", "arrows"],
+	["polygonsUpdated", "polygons"],
+	["starsUpdated", "stars"],
+	["heartsUpdated", "hearts"],
 	["customObjectsUpdated", "customObjects"]
 ];
 var REMOVED = [
@@ -1718,6 +3231,14 @@ var REMOVED = [
 	["tablesRemoved", "tables"],
 	["imagesRemoved", "images"],
 	["timersRemoved", "timers"],
+	["rectanglesRemoved", "rectangles"],
+	["ellipsesRemoved", "ellipses"],
+	["groupsRemoved", "groups"],
+	["linesRemoved", "lines"],
+	["arrowsRemoved", "arrows"],
+	["polygonsRemoved", "polygons"],
+	["starsRemoved", "stars"],
+	["heartsRemoved", "hearts"],
 	["customObjectsRemoved", "customObjects"]
 ];
 function toWireObject(collection, object) {
@@ -1787,22 +3308,74 @@ function ribbonEdges(points, baseWidth, handDrawn = true) {
 //#endregion
 //#region src/core/document/spatialIndex.ts
 var CELL = 8;
+/**
+* Non-stroke types have no separate "transformed" event the way strokes
+* do — any content replace (`setNote`/`setTable`/...) goes through the
+* type's single `*Updated` field regardless of whether it moved, so a
+* reindex on every update is unconditional (cheap arithmetic per object,
+* matching `objectBounds.ts`'s own "no caching needed" precedent for these
+* types — not worth distinguishing "moved" from "just retexted").
+*/
+var ADDED_FIELDS = [
+	"added",
+	"notesAdded",
+	"textAdded",
+	"tablesAdded",
+	"imagesAdded",
+	"timersAdded",
+	"customObjectsAdded",
+	"rectanglesAdded",
+	"ellipsesAdded"
+];
+var REMOVED_FIELDS = [
+	"removed",
+	"notesRemoved",
+	"textRemoved",
+	"tablesRemoved",
+	"imagesRemoved",
+	"timersRemoved",
+	"customObjectsRemoved",
+	"rectanglesRemoved",
+	"ellipsesRemoved"
+];
+var UPDATED_FIELDS = [
+	"notesUpdated",
+	"textUpdated",
+	"tablesUpdated",
+	"imagesUpdated",
+	"timersUpdated",
+	"customObjectsUpdated",
+	"rectanglesUpdated",
+	"ellipsesUpdated"
+];
 var SpatialIndex = class {
 	constructor(doc) {
 		this.doc = doc;
 		this.cells = /* @__PURE__ */ new Map();
-		this.strokeCells = /* @__PURE__ */ new Map();
+		this.objectCells = /* @__PURE__ */ new Map();
 		this.unsubscribe = doc.subscribe((change) => {
-			for (const id of change.removed) this.remove(id);
-			for (const stroke of change.added) this.insert(stroke.id);
+			for (const field of REMOVED_FIELDS) for (const id of change[field]) this.remove(id);
+			for (const field of ADDED_FIELDS) for (const object of change[field]) this.insert(object.id);
 			for (const stroke of change.transformed) {
 				this.remove(stroke.id);
 				this.insert(stroke.id);
 			}
+			for (const field of UPDATED_FIELDS) for (const object of change[field]) {
+				this.remove(object.id);
+				this.insert(object.id);
+			}
 		});
 		for (const stroke of doc.all()) this.insert(stroke.id);
-	}
-	/** Ids of strokes whose bbox may overlap the query rect. */
+		for (const note of doc.allNotes()) this.insert(note.id);
+		for (const text of doc.allTexts()) this.insert(text.id);
+		for (const table of doc.allTables()) this.insert(table.id);
+		for (const image of doc.allImages()) this.insert(image.id);
+		for (const timer of doc.allTimers()) this.insert(timer.id);
+		for (const object of doc.allCustomObjects()) this.insert(object.id);
+		for (const rect of doc.allRectangles()) this.insert(rect.id);
+		for (const ellipse of doc.allEllipses()) this.insert(ellipse.id);
+	}
+	/** Ids of content objects (any type except groups) whose bbox may overlap the query rect. */
 	query(minX, minY, maxX, maxY) {
 		const result = /* @__PURE__ */ new Set();
 		for (const key of cellsOf({
@@ -1819,13 +3392,13 @@ var SpatialIndex = class {
 	dispose() {
 		this.unsubscribe();
 		this.cells.clear();
-		this.strokeCells.clear();
+		this.objectCells.clear();
 	}
 	insert(id) {
 		const box = this.doc.bbox(id);
 		if (!box) return;
 		const keys = cellsOf(box);
-		this.strokeCells.set(id, keys);
+		this.objectCells.set(id, keys);
 		for (const key of keys) {
 			let bucket = this.cells.get(key);
 			if (!bucket) {
@@ -1836,9 +3409,9 @@ var SpatialIndex = class {
 		}
 	}
 	remove(id) {
-		const keys = this.strokeCells.get(id);
+		const keys = this.objectCells.get(id);
 		if (!keys) return;
-		this.strokeCells.delete(id);
+		this.objectCells.delete(id);
 		for (const key of keys) {
 			const bucket = this.cells.get(key);
 			if (bucket) {
@@ -1943,6 +3516,135 @@ function clamp(value, min, max) {
 	return Math.min(max, Math.max(min, value));
 }
 //#endregion
+//#region src/core/shapes/lineGeometry.ts
+var BARB_ANGLE = Math.PI * (25 / 180);
+/** Two barb segments (each `[fromPoint, tip]`), or `[]` for `head: "none"`. */
+function arrowHeadBarbs(start, end, head) {
+	if (head === "none") return [];
+	const len = Math.hypot(end.x - start.x, end.y - start.y);
+	if (len < 1e-6) return [];
+	const dirX = (end.x - start.x) / len;
+	const dirY = (end.y - start.y) / len;
+	const headLen = Math.min(4, Math.max(1.2, len * .25));
+	const barb = (sign) => {
+		const cos = Math.cos(BARB_ANGLE * sign);
+		const sin = Math.sin(BARB_ANGLE * sign);
+		return {
+			x: end.x - headLen * (dirX * cos - dirY * sin),
+			y: end.y - headLen * (dirX * sin + dirY * cos)
+		};
+	};
+	return [[barb(1), end], [barb(-1), end]];
+}
+//#endregion
+//#region src/core/shapes/polygonGeometry.ts
+/**
+* The tuned per-`sides` starting angle that makes each regular-polygon kind
+* look right inscribed in its bounding box (a point-up triangle, a
+* flat-sided diamond, a point-up pentagon/hexagon, a flat-topped octagon) —
+* extracted unchanged from the legacy shape-stroke tool's own per-call
+* arguments, which were already tuned and shipped. Any `sides` count not
+* listed falls back to the common "point at top" case.
+*/
+function polygonStartAngle(sides) {
+	switch (sides) {
+		case 3: return Math.PI / 2;
+		case 4: return 0;
+		case 8: return Math.PI / 8;
+		default: return Math.PI / 2;
+	}
+}
+/**
+* Rescales/recenters an arbitrary point set so its own bounding box exactly
+* fills `[-width/2, width/2] × [-height/2, height/2]`, centered at the
+* origin. Needed because "inscribed on a radius-rx,ry ellipse" (the natural
+* way to place N evenly-spaced vertices) does *not* by itself guarantee a
+* full, centered fit: a shape only touches every edge of its box when it
+* has a vertex at each of the four cardinal angles (true for a square/
+* diamond/octagon-with-the-right-start-angle) — a triangle or pentagon's
+* *actual* bounding box is both smaller than and off-center from the
+* nominal rx,ry ellipse (verified: an upward triangle's own bounding box is
+* ~13% narrower than its circumradius, and vertically off-center by a
+* quarter of its own height). Every semantic shape's declared `width`/
+* `height` has to be the shape's *real* extent — `objectBounds.ts` and
+* rotate-about-center math both assume it — so every generator below routes
+* through this instead of leaving each one to reinvent (or skip) the fix.
+*/
+function fitToBox(points, width, height) {
+	let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+	for (const p of points) {
+		if (p.x < minX) minX = p.x;
+		if (p.x > maxX) maxX = p.x;
+		if (p.y < minY) minY = p.y;
+		if (p.y > maxY) maxY = p.y;
+	}
+	const rawW = maxX - minX || 1;
+	const rawH = maxY - minY || 1;
+	const cx = (minX + maxX) / 2;
+	const cy = (minY + maxY) / 2;
+	return points.map((p) => ({
+		x: (p.x - cx) / rawW * width,
+		y: (p.y - cy) / rawH * height
+	}));
+}
+/**
+* A regular `sides`-gon inscribed in a `width`×`height` box, centered at
+* the origin and fit exactly to it via `fitToBox` — independently scaled
+* per axis (like an ellipse inscribed in a non-square box), not a true
+* regular polygon forced square. `sides: 4` with the diamond start angle
+* (0) produces the four cardinal points of the box — a diamond is exactly
+* this case, not a separate shape.
+*/
+function regularPolygonPoints(sides, width, height, startAngle) {
+	const raw = [];
+	for (let i = 0; i < sides; i++) {
+		const theta = startAngle + i / sides * Math.PI * 2;
+		raw.push({
+			x: Math.cos(theta),
+			y: Math.sin(theta)
+		});
+	}
+	return fitToBox(raw, width, height);
+}
+/**
+* A `points`-pointed star inscribed in a `width`×`height` box, centered at
+* the origin and fit exactly to it via `fitToBox` — alternating outer/inner
+* vertices, `innerRatio` of the outer radius. Matches the legacy tool's own
+* tuned defaults (5 points, 0.42).
+*/
+function starPoints(points, innerRatio, width, height) {
+	const total = points * 2;
+	const raw = [];
+	for (let i = 0; i < total; i++) {
+		const isOuter = i % 2 === 0;
+		const theta = -Math.PI / 2 + i / total * Math.PI * 2;
+		const r = isOuter ? 1 : innerRatio;
+		raw.push({
+			x: Math.cos(theta) * r,
+			y: Math.sin(theta) * r
+		});
+	}
+	return fitToBox(raw, width, height);
+}
+var HEART_SEGMENTS = 64;
+/**
+* A heart inscribed in a `width`×`height` box, centered at the origin and
+* fit exactly to it via `fitToBox` — the standard parametric heart curve
+* (`x = 16 sin³t`, `y = 13 cos t − 5 cos 2t − 2 cos 3t − cos 4t`, matching
+* the legacy shape-stroke tool's own formula).
+*/
+function heartPoints(width, height) {
+	const raw = [];
+	for (let i = 0; i < HEART_SEGMENTS; i++) {
+		const t = i / HEART_SEGMENTS * Math.PI * 2;
+		raw.push({
+			x: 16 * Math.sin(t) ** 3,
+			y: -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t))
+		});
+	}
+	return fitToBox(raw, width, height);
+}
+//#endregion
 //#region src/persistence/serialization/svg.ts
 /** Matches the key light used by the board shader and note shadows. */
 var LIGHT = {
@@ -1980,7 +3682,14 @@ function documentToSVG(doc, now = 0, registry, backgroundColor = DEFAULT_BACKGRO
 	const images = doc.images ?? [];
 	const timers = doc.timers ?? [];
 	const customObjects = doc.customObjects ?? [];
-	const bounds = contentBounds(doc.strokes, notes, texts, tables, images, timers, customObjects);
+	const rectangles = doc.rectangles ?? [];
+	const ellipses = doc.ellipses ?? [];
+	const lines = doc.lines ?? [];
+	const arrows = doc.arrows ?? [];
+	const polygons = doc.polygons ?? [];
+	const stars = doc.stars ?? [];
+	const hearts = doc.hearts ?? [];
+	const bounds = contentBounds(doc.strokes, notes, texts, tables, images, timers, customObjects, rectangles, ellipses, lines, arrows, polygons, stars, hearts);
 	const view = `${fmt(bounds.minX)} ${fmt(bounds.minY)} ${fmt(bounds.width)} ${fmt(bounds.height)}`;
 	const defs = notes.map(noteShadowFilter).join("\n");
 	const highlights = doc.strokes.filter((s) => s.tool === "highlighter");
@@ -1989,6 +3698,13 @@ function documentToSVG(doc, now = 0, registry, backgroundColor = DEFAULT_BACKGRO
 		`<rect x="${fmt(bounds.minX)}" y="${fmt(bounds.minY)}" width="${fmt(bounds.width)}" height="${fmt(bounds.height)}" fill="${backgroundColor}"/>`,
 		...images.map((image) => imageToElement(image, resolvedAssets)),
 		...tables.map(tableToGroup),
+		...rectangles.map(rectangleToElement),
+		...ellipses.map(ellipseToElement),
+		...polygons.map(polygonToElement),
+		...stars.map(starToElement),
+		...hearts.map(heartToElement),
+		...lines.map(lineToElement),
+		...arrows.map(arrowToGroup),
 		...highlights.flatMap(strokeToPaths),
 		...ink.flatMap(strokeToPaths),
 		...texts.map(textToElement),
@@ -2228,7 +3944,91 @@ function imageToElement(image, resolvedAssets) {
 	}
 	return `<image href="${escapeXML(image.src)}" x="${fmt(left)}" y="${fmt(top)}" width="${fmt(image.width)}" height="${fmt(image.height)}" preserveAspectRatio="none"/>`;
 }
-function contentBounds(strokes, notes, texts, tables = [], images = [], timers = [], customObjects = []) {
+/** (x, y) is the top edge (core/shapes/shapeObjects.ts) — same convention as TableBlock, so `svgY = -y` directly, no height offset. */
+/**
+* SVG `transform` attribute for a top-edge, Y-up shape's `rotation` (about
+* its own center, per `shapeObjects.ts`'s convention) — board-space
+* `rotationAbout` fed through the existing `svgTransformAttr` F·M·F
+* conversion, exactly how `sceneNodeToSVG`'s identical-convention `rect`
+* case already does it. Shared by every top-edge shape kind (Rectangle,
+* Ellipse, and Phase 4's Polygon/Star/Heart), not just these two.
+*/
+function shapeRotationAttr(x, y, width, height, rotation) {
+	if (!rotation) return "";
+	return svgTransformAttr(rotationAbout(rotation, x + width / 2, y - height / 2));
+}
+function opacityAttrOf(opacity) {
+	return opacity !== void 0 && opacity < 1 ? ` opacity="${fmt(opacity)}"` : "";
+}
+function rectangleToElement(rect) {
+	const svgY = -rect.y;
+	const stroke = rect.stroke ? ` stroke="${rect.stroke}" stroke-width="${fmt(rect.strokeWidth ?? .12)}"` : "";
+	const rx = rect.cornerRadius ? ` rx="${fmt(rect.cornerRadius)}"` : "";
+	const transform = shapeRotationAttr(rect.x, rect.y, rect.width, rect.height, rect.rotation);
+	const opacity = opacityAttrOf(rect.opacity);
+	return `<rect data-id="${rect.id}" x="${fmt(rect.x)}" y="${fmt(svgY)}" width="${fmt(rect.width)}" height="${fmt(rect.height)}" fill="${rect.fill ?? "none"}"${rx}${stroke}${opacity}${transform}/>`;
+}
+function ellipseToElement(ellipse) {
+	const cx = ellipse.x + ellipse.width / 2;
+	const cy = -ellipse.y + ellipse.height / 2;
+	const stroke = ellipse.stroke ? ` stroke="${ellipse.stroke}" stroke-width="${fmt(ellipse.strokeWidth ?? .12)}"` : "";
+	const transform = shapeRotationAttr(ellipse.x, ellipse.y, ellipse.width, ellipse.height, ellipse.rotation);
+	const opacity = opacityAttrOf(ellipse.opacity);
+	return `<ellipse data-id="${ellipse.id}" cx="${fmt(cx)}" cy="${fmt(cy)}" rx="${fmt(ellipse.width / 2)}" ry="${fmt(ellipse.height / 2)}" fill="${ellipse.fill ?? "none"}"${stroke}${opacity}${transform}/>`;
+}
+/**
+* A regular N-gon inscribed in the same top-edge/Y-up bounding box
+* Rectangle uses — points are authored unrotated (absolute, y-flipped),
+* with `transform` handling rotation about the shape's own center exactly
+* like `rectangleToElement`/`ellipseToElement` already do, so this reuses
+* that same proven pattern rather than rotating points by hand.
+*/
+function polygonToElement(polygon) {
+	const cx = polygon.x + polygon.width / 2;
+	const cy = polygon.y - polygon.height / 2;
+	const svgPoints = regularPolygonPoints(polygon.sides, polygon.width, polygon.height, polygonStartAngle(polygon.sides)).map((p) => `${fmt(cx + p.x)},${fmt(-(cy + p.y))}`).join(" ");
+	const stroke = polygon.stroke ? ` stroke="${polygon.stroke}" stroke-width="${fmt(polygon.strokeWidth ?? .12)}"` : "";
+	const transform = shapeRotationAttr(polygon.x, polygon.y, polygon.width, polygon.height, polygon.rotation);
+	const opacity = opacityAttrOf(polygon.opacity);
+	return `<polygon data-id="${polygon.id}" points="${svgPoints}" fill="${polygon.fill ?? "none"}"${stroke}${opacity}${transform}/>`;
+}
+/** Same convention/pattern as `polygonToElement` — a `points`-vertex star with `innerRadiusRatio` (`polygonGeometry.ts`'s `starPoints`). */
+function starToElement(star) {
+	const cx = star.x + star.width / 2;
+	const cy = star.y - star.height / 2;
+	const svgPoints = starPoints(star.points, star.innerRadiusRatio, star.width, star.height).map((p) => `${fmt(cx + p.x)},${fmt(-(cy + p.y))}`).join(" ");
+	const stroke = star.stroke ? ` stroke="${star.stroke}" stroke-width="${fmt(star.strokeWidth ?? .12)}"` : "";
+	const transform = shapeRotationAttr(star.x, star.y, star.width, star.height, star.rotation);
+	const opacity = opacityAttrOf(star.opacity);
+	return `<polygon data-id="${star.id}" points="${svgPoints}" fill="${star.fill ?? "none"}"${stroke}${opacity}${transform}/>`;
+}
+/** Same convention/pattern as `polygonToElement` — the standard parametric heart curve (`polygonGeometry.ts`'s `heartPoints`), emitted as a closed `<polygon>` (dense enough at `HEART_SEGMENTS` to read as a smooth curve). */
+function heartToElement(heart) {
+	const cx = heart.x + heart.width / 2;
+	const cy = heart.y - heart.height / 2;
+	const svgPoints = heartPoints(heart.width, heart.height).map((p) => `${fmt(cx + p.x)},${fmt(-(cy + p.y))}`).join(" ");
+	const stroke = heart.stroke ? ` stroke="${heart.stroke}" stroke-width="${fmt(heart.strokeWidth ?? .12)}"` : "";
+	const transform = shapeRotationAttr(heart.x, heart.y, heart.width, heart.height, heart.rotation);
+	const opacity = opacityAttrOf(heart.opacity);
+	return `<polygon data-id="${heart.id}" points="${svgPoints}" fill="${heart.fill ?? "none"}"${stroke}${opacity}${transform}/>`;
+}
+/** No rotation/box concept (see shapeObjects.ts's header) — the two endpoints are emitted directly, y-flipped like every other coordinate here. */
+function lineToElement(line) {
+	const stroke = line.stroke ?? "#1C1C1E";
+	const width = line.strokeWidth ?? .12;
+	const opacity = opacityAttrOf(line.opacity);
+	return `<line data-id="${line.id}" x1="${fmt(line.start.x)}" y1="${fmt(-line.start.y)}" x2="${fmt(line.end.x)}" y2="${fmt(-line.end.y)}" stroke="${stroke}" stroke-width="${fmt(width)}"${opacity}/>`;
+}
+/** Shaft plus head barbs — same `arrowHeadBarbs` the canvas renderer uses, so the two never drift. */
+function arrowToGroup(arrow) {
+	const stroke = arrow.stroke ?? "#1C1C1E";
+	const width = arrow.strokeWidth ?? .12;
+	const opacity = opacityAttrOf(arrow.opacity);
+	const segment = (a, b) => `<line x1="${fmt(a.x)}" y1="${fmt(-a.y)}" x2="${fmt(b.x)}" y2="${fmt(-b.y)}" stroke="${stroke}" stroke-width="${fmt(width)}"/>`;
+	const segments = [segment(arrow.start, arrow.end), ...arrowHeadBarbs(arrow.start, arrow.end, arrow.head).map(([a, b]) => segment(a, b))];
+	return `<g data-id="${arrow.id}"${opacity}>${segments.join("")}</g>`;
+}
+function contentBounds(strokes, notes, texts, tables = [], images = [], timers = [], customObjects = [], rectangles = [], ellipses = [], lines = [], arrows = [], polygons = [], stars = [], hearts = []) {
 	let minX = Infinity;
 	let minY = Infinity;
 	let maxX = -Infinity;
@@ -2290,6 +4090,34 @@ function contentBounds(strokes, notes, texts, tables = [], images = [], timers =
 			grow(p.x, -p.y);
 		}
 	}
+	for (const rect of rectangles) {
+		grow(rect.x, -rect.y);
+		grow(rect.x + rect.width, -rect.y + rect.height);
+	}
+	for (const ellipse of ellipses) {
+		grow(ellipse.x, -ellipse.y);
+		grow(ellipse.x + ellipse.width, -ellipse.y + ellipse.height);
+	}
+	for (const line of lines) {
+		grow(line.start.x, -line.start.y);
+		grow(line.end.x, -line.end.y);
+	}
+	for (const arrow of arrows) {
+		grow(arrow.start.x, -arrow.start.y);
+		grow(arrow.end.x, -arrow.end.y);
+	}
+	for (const polygon of polygons) {
+		grow(polygon.x, -polygon.y);
+		grow(polygon.x + polygon.width, -polygon.y + polygon.height);
+	}
+	for (const star of stars) {
+		grow(star.x, -star.y);
+		grow(star.x + star.width, -star.y + star.height);
+	}
+	for (const heart of hearts) {
+		grow(heart.x, -heart.y);
+		grow(heart.x + heart.width, -heart.y + heart.height);
+	}
 	if (minX > maxX) return {
 		minX: 0,
 		minY: 0,
@@ -2314,4 +4142,4 @@ function fmt(n) {
 var SDK_PACKAGE_NAME = "@scrawl-board/board";
 var SDK_DEVELOPMENT_VERSION = "0.0.0-development";
 //#endregion
-export { ASSET_CACHE_BYTES_DEFAULT, ASSET_CACHE_BYTES_MAX, ASSET_CACHE_BYTES_MIN, ASSET_EXPORT_MAX_DECODED_MEGAPIXELS, ASSET_EXPORT_MAX_ENCODED_BYTES, ASSET_MAX_CONCURRENT_RESOLUTIONS, ASSET_MAX_DECODED_MEGAPIXELS, ASSET_MAX_DIMENSION_PX, ASSET_MAX_ENCODED_BYTES, ASSET_REF_MAX_BYTES, ASSET_REF_PATTERN, AddImageCommand, AddNoteCommand, AddStrokesCommand, AddTableCommand, AddTextCommand, AddTimerCommand, AssetResolutionError, BEACON_INSET, BoardDocument, CURRENT_DOCUMENT_SCHEMA_VERSION, ClusterStore, DeleteImageCommand, DeleteNoteCommand, DeleteStrokesCommand, DeleteTableCommand, DeleteTextCommand, DeleteTimerCommand, DocumentRecoveryError, END_TAPER, ERASE_THRESHOLD, EraseCommand, FOG_COLOR, HIGHLIGHT_COLORS, History, IDENTITY, INK_COLORS, LockItemsCommand, MIN_WIDTH_FACTOR, NOTE_COLORS, NOTE_DEFAULT_SIZE, NOTE_DEFAULT_Z, NOTE_MAX_Z, NOTE_MIN_Z, NOTE_PEEL_STEP, SDK_DEVELOPMENT_VERSION, SDK_PACKAGE_NAME, STAMPS, STAMP_SIZE, SUPPORTED_ASSET_MEDIA_TYPES, SpatialIndex, TABLE_DEFAULT_CELL_HEIGHT, TABLE_DEFAULT_CELL_WIDTH, TABLE_DEFAULT_FONT_SIZE, TEXT_DEFAULT_SIZE, TIMER_DEFAULT_DURATION_MS, TIMER_DEFAULT_SIZE, TIMER_PRESETS_MS, TransformCommand, UpdateImageCommand, UpdateNoteCommand, UpdateTableCommand, UpdateTextCommand, UpdateTimerCommand, apply, applyItemLock, assetRef, avgScale, canUnlockItem, changeToOps, clampAssetCacheBytes, cloneCustomObject, cloneImage, cloneNote, cloneStroke, cloneTable, cloneText, cloneTimer, documentId, documentToSVG, formatTimer, invert, isAssetRef, isIdentity, isStampKind, loadDocumentBytes, measureTable, measureTextBlock, migrateDocument, mul, pauseTimer, placePresenceBeacon, ribbonEdges, rotationAbout, scalingAbout, searchBoard, serializeDocument, serializeLock, serializeStroke, setTimerDuration, stampDataUrl, startTimer, strokeId, timerExpired, timerRemaining, toggleTimer, translation };
+export { ASSET_CACHE_BYTES_DEFAULT, ASSET_CACHE_BYTES_MAX, ASSET_CACHE_BYTES_MIN, ASSET_EXPORT_MAX_DECODED_MEGAPIXELS, ASSET_EXPORT_MAX_ENCODED_BYTES, ASSET_MAX_CONCURRENT_RESOLUTIONS, ASSET_MAX_DECODED_MEGAPIXELS, ASSET_MAX_DIMENSION_PX, ASSET_MAX_ENCODED_BYTES, ASSET_REF_MAX_BYTES, ASSET_REF_PATTERN, AddArrowCommand, AddEllipseCommand, AddGroupCommand, AddHeartCommand, AddImageCommand, AddLineCommand, AddNoteCommand, AddPolygonCommand, AddRectangleCommand, AddStarCommand, AddStrokesCommand, AddTableCommand, AddTextCommand, AddTimerCommand, AssetResolutionError, BEACON_INSET, BoardDocument, CURRENT_DOCUMENT_SCHEMA_VERSION, ClusterStore, CommandBatch, DeleteArrowCommand, DeleteEllipseCommand, DeleteGroupCommand, DeleteHeartCommand, DeleteImageCommand, DeleteLineCommand, DeleteNoteCommand, DeletePolygonCommand, DeleteRectangleCommand, DeleteStarCommand, DeleteStrokesCommand, DeleteTableCommand, DeleteTextCommand, DeleteTimerCommand, DocumentRecoveryError, END_TAPER, ERASE_THRESHOLD, EraseCommand, FOG_COLOR, HIGHLIGHT_COLORS, History, IDENTITY, INK_COLORS, LockItemsCommand, MIN_WIDTH_FACTOR, NOTE_COLORS, NOTE_DEFAULT_SIZE, NOTE_DEFAULT_Z, NOTE_MAX_Z, NOTE_MIN_Z, NOTE_PEEL_STEP, ReorderObjectCommand, SDK_DEVELOPMENT_VERSION, SDK_PACKAGE_NAME, SHAPE_DEFAULT_STROKE, SHAPE_DEFAULT_STROKE_WIDTH, SHAPE_MIN_SIZE, STAMPS, STAMP_SIZE, SUPPORTED_ASSET_MEDIA_TYPES, SpatialIndex, TABLE_DEFAULT_CELL_HEIGHT, TABLE_DEFAULT_CELL_WIDTH, TABLE_DEFAULT_FONT_SIZE, TEXT_DEFAULT_SIZE, TIMER_DEFAULT_DURATION_MS, TIMER_DEFAULT_SIZE, TIMER_PRESETS_MS, TransformCommand, TransformObjectsCommand, UpdateArrowCommand, UpdateEllipseCommand, UpdateGroupCommand, UpdateHeartCommand, UpdateImageCommand, UpdateLineCommand, UpdateNoteCommand, UpdatePolygonCommand, UpdateRectangleCommand, UpdateStarCommand, UpdateTableCommand, UpdateTextCommand, UpdateTimerCommand, apply, applyItemLock, assetRef, avgScale, canUnlockItem, changeToOps, clampAssetCacheBytes, cloneArrow, cloneCustomObject, cloneEllipse, cloneGroup, cloneHeart, cloneImage, cloneLine, cloneNote, clonePolygon, cloneRectangle, cloneStar, cloneStroke, cloneTable, cloneText, cloneTimer, documentId, documentToSVG, formatTimer, invert, isAssetRef, isIdentity, isStampKind, loadDocumentBytes, measureTable, measureTextBlock, migrateDocument, mul, pauseTimer, placePresenceBeacon, ribbonEdges, rotationAbout, scalingAbout, searchBoard, serializeDocument, serializeLock, serializeStroke, setTimerDuration, stampDataUrl, startTimer, strokeId, timerExpired, timerRemaining, toggleTimer, translation };