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

package/dist/core.js

@@ -48,6 +48,37 @@ function strokeId(value) {
 	return value;
 }
 //#endregion
+//#region src/core/document/migrations/registry.ts
+/** Schema versions this build can load. An unrecognized version fails safely (`DOCUMENT_VERSION_UNSUPPORTED`) rather than being silently treated as current. */
+var SUPPORTED_SCHEMA_VERSIONS = /* @__PURE__ */ new Set([0, 1]);
+function isSupportedSchemaVersion(version) {
+	return typeof version === "number" && SUPPORTED_SCHEMA_VERSIONS.has(version);
+}
+/**
+* Document collection fields introduced after schemaVersion 1 first
+* shipped real documents. A document stored before a field's introduction
+* can never retroactively gain it, so requiring it at load would fail
+* every pre-existing document — these stay optional even at the current
+* version. New entries only ever get added here, never removed (an old
+* stored document's absence of a since-introduced field must keep loading
+* for as long as that document might still exist).
+*/
+var FIELDS_OPTIONAL_AT_CURRENT_VERSION = /* @__PURE__ */ new Set([
+	"customObjects",
+	"rectangles",
+	"ellipses",
+	"groups",
+	"lines",
+	"arrows",
+	"polygons",
+	"stars",
+	"hearts"
+]);
+/** Whether `field` must be present on a document already at the current schema version (never required on an older, migrating-forward document). */
+function isFieldRequiredAtCurrentVersion(field) {
+	return !FIELDS_OPTIONAL_AT_CURRENT_VERSION.has(field);
+}
+//#endregion
 //#region src/core/document/document-schema.ts
 var CURRENT_DOCUMENT_SCHEMA_VERSION = 1;
 var DocumentRecoveryError = class extends Error {
@@ -76,7 +107,7 @@ function loadDocumentBytes(originalBytes) {
 function migrateDocument(raw) {
 	if (!isRecord(raw)) return failure("DOCUMENT_VALIDATION_FAILED", "Document must be an object");
 	const version = raw.schemaVersion ?? 0;
-	if (version !== 0 && version !== 1) return failure("DOCUMENT_VERSION_UNSUPPORTED", `Document schema version ${String(version)} is unsupported`, void 0, "schemaVersion");
+	if (!isSupportedSchemaVersion(version)) return failure("DOCUMENT_VERSION_UNSUPPORTED", `Document schema version ${String(version)} is unsupported`, void 0, "schemaVersion");
 	if (!isJsonValue(raw)) return failure("DOCUMENT_VALIDATION_FAILED", "Document must contain JSON values only");
 	const strokes = validateStrokes(raw.strokes);
 	if (strokes instanceof DocumentRecoveryError) return {
@@ -89,7 +120,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),
+		rectangles: validateCollection(raw, "rectangles", version, validateRectangle),
+		ellipses: validateCollection(raw, "ellipses", version, validateEllipse),
+		groups: validateCollection(raw, "groups", version, validateGroup),
+		lines: validateCollection(raw, "lines", version, validateLine),
+		arrows: validateCollection(raw, "arrows", version, validateArrow),
+		polygons: validateCollection(raw, "polygons", version, validatePolygon),
+		stars: validateCollection(raw, "stars", version, validateStar),
+		hearts: validateCollection(raw, "hearts", version, validateHeart)
 	};
 	if (collections.notes instanceof DocumentRecoveryError) return {
 		ok: false,
@@ -115,6 +154,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 +202,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
 		}
 	};
 }
@@ -135,8 +220,19 @@ function serializeDocument(document) {
 	if (!result.ok || result.migratedFrom !== 1) throw result.ok ? new DocumentRecoveryError("DOCUMENT_VALIDATION_FAILED", "Saving requires the current Document schema") : result.error;
 	return JSON.stringify(result.document);
 }
-function validateCollection(raw, name, version, validator, requiredAtCurrentVersion = true) {
-	if (requiredAtCurrentVersion && version === 1 && !(name in raw)) return validation(`${name} is required`, name);
+/**
+* A Document's serialized size in bytes (Phase 5) — UTF-8, not UTF-16
+* `string.length`, since a Document with non-ASCII note/text content (most
+* of them, eventually) would otherwise under-report. Useful for a Host
+* deciding when to warn about an unusually large board, or for logging/
+* telemetry around save size — not consulted by anything inside this
+* package itself, which has no size limit of its own.
+*/
+function documentSize(document) {
+	return new TextEncoder().encode(JSON.stringify(document)).length;
+}
+function validateCollection(raw, name, version, validator) {
+	if (isFieldRequiredAtCurrentVersion(name) && version === 1 && !(name in raw)) return validation(`${name} is required`, name);
 	const value = raw[name] ?? [];
 	if (!Array.isArray(value)) return validation(`${name} must be an array`, name);
 	for (let index = 0; index < value.length; index += 1) if (!isRecord(value[index]) || !validator(value[index])) return validation(`invalid ${name} entry`, `${name}[${index}]`);
@@ -148,11 +244,20 @@ 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, [
+		if (!isRecord(value)) return validation("stroke must be an object", path);
+		if (!nonempty(value.id)) return validation("stroke.id must be a non-empty string", `${path}.id`);
+		if (!nonempty(value.color)) return validation("stroke.color must be a non-empty string", `${path}.color`);
+		if (!positive(value.baseWidth)) return validation("stroke.baseWidth must be a positive number", `${path}.baseWidth`);
+		if (!optionalEnum(value.tool, [
 			"marker",
 			"highlighter",
 			"shape"
-		]) || !validLock(value) || !optionalString(value.clusterId) || !validMatrix(value.matrix) || !Array.isArray(value.points)) return validation("invalid stroke", path);
+		])) return validation("stroke.tool must be \"marker\", \"highlighter\", or \"shape\"", `${path}.tool`);
+		if (!validLock(value)) return validation("invalid stroke.lock", `${path}.lock`);
+		if (!validHidden(value)) return validation("invalid stroke.hidden", `${path}.hidden`);
+		if (!optionalString(value.clusterId)) return validation("stroke.clusterId must be a string", `${path}.clusterId`);
+		if (!validMatrix(value.matrix)) return validation("invalid stroke.matrix", `${path}.matrix`);
+		if (!Array.isArray(value.points)) return validation("stroke.points must be an array", `${path}.points`);
 		const points = [];
 		for (let pointIndex = 0; pointIndex < value.points.length; pointIndex += 1) {
 			const point = normalizePoint(value.points[pointIndex]);
@@ -178,20 +283,55 @@ function normalizePoint(raw) {
 	return values;
 }
 function validateNote(v) {
-	return basePosition(v) && positive(v.size) && finite(v.zOffset) && nonempty(v.color) && typeof v.text === "string" && validLock(v) && (v.votes === void 0 || Array.isArray(v.votes) && v.votes.every((vote) => isRecord(vote) && nonempty(vote.userId) && nonempty(vote.name) && nonempty(vote.color)));
+	return basePosition(v) && positive(v.size) && finite(v.zOffset) && nonempty(v.color) && typeof v.text === "string" && validLock(v) && validHidden(v) && (v.votes === void 0 || Array.isArray(v.votes) && v.votes.every((vote) => isRecord(vote) && nonempty(vote.userId) && nonempty(vote.name) && nonempty(vote.color)));
 }
 function validateText(v) {
-	return basePosition(v) && typeof v.text === "string" && positive(v.fontSize) && nonempty(v.color) && validLock(v) && optionalString(v.clusterId);
+	return basePosition(v) && typeof v.text === "string" && positive(v.fontSize) && nonempty(v.color) && validLock(v) && validHidden(v) && optionalString(v.clusterId);
 }
 function validateTable(v) {
-	return basePosition(v) && integer(v.rows) && integer(v.cols) && numberArray(v.colWidths, v.cols) && numberArray(v.rowHeights, v.rows) && isStringRecord(v.cells) && validLock(v) && optionalString(v.color) && optionalString(v.backgroundColor) && optionalString(v.clusterId);
+	return basePosition(v) && integer(v.rows) && integer(v.cols) && numberArray(v.colWidths, v.cols) && numberArray(v.rowHeights, v.rows) && isStringRecord(v.cells) && validLock(v) && validHidden(v) && optionalString(v.color) && optionalString(v.backgroundColor) && optionalString(v.clusterId);
 }
 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);
+	return basePosition(v) && identifiesAnImage && positive(v.width) && positive(v.height) && positive(v.aspectRatio) && validLock(v) && validHidden(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) && validHidden(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) && validHidden(v) && validateShapeStyle(v) && (v.rotation === void 0 || finite(v.rotation));
+}
+function validatePolygon(v) {
+	return basePosition(v) && positive(v.width) && positive(v.height) && validLock(v) && validHidden(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) && validHidden(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) && validHidden(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) && validHidden(v) && validateShapeStyle(v);
+}
+function validateArrow(v) {
+	return nonempty(v.id) && validPoint(v.start) && validPoint(v.end) && validLock(v) && validHidden(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) && validHidden(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);
+	return basePosition(v) && positive(v.size) && positive(v.durationMs) && finite(v.remainingMs) && v.remainingMs >= 0 && (v.runningSince === void 0 || finite(v.runningSince)) && validLock(v) && validHidden(v);
 }
 function validateCustomObject(v) {
 	return nonempty(v.id) && nonempty(v.type) && integer(v.schemaVersion) && validMatrix(v.transform) && Array.isArray(v.transform) && validCustomFallback(v.fallback) && (v.lock === void 0 || validCustomLock(v.lock)) && isJsonValue(v.props);
@@ -210,6 +350,9 @@ function basePosition(v) {
 function validLock(v) {
 	return (v.locked === void 0 || typeof v.locked === "boolean") && optionalString(v.lockedBy) && optionalString(v.lockedByName);
 }
+function validHidden(v) {
+	return v.hidden === void 0 || typeof v.hidden === "boolean";
+}
 function validMatrix(v) {
 	return v === void 0 || Array.isArray(v) && v.length === 6 && v.every(finite);
 }
@@ -772,6 +915,265 @@ function serializeLock(item) {
 	};
 }
 //#endregion
+//#region src/core/shapes/shapeObjects.ts
+var SHAPE_MIN_SIZE = .5;
+/**
+* Centralized shape style defaults (Phase 8) — one object a Host can read
+* to know (or, by not relying on the standalone constants below, override
+* via its own UI state) what a newly drawn Rectangle/Ellipse/Line/Arrow/
+* Polygon/Star/Heart starts with when the user hasn't picked a stroke/width
+* yet. `shapeTool.ts` (commit-time), `renderer/shapes/lines.ts` (render-time
+* fallback for an object missing these fields), and
+* `persistence/serialization/svg.ts` (export-time fallback) all read from
+* here — the two standalone constants below are kept for source
+* compatibility and simply mirror this object's values, not a second
+* source of truth.
+*/
+var SHAPE_STYLE_DEFAULTS = {
+	stroke: "#1C1C1E",
+	strokeWidth: .12
+};
+var SHAPE_DEFAULT_STROKE = SHAPE_STYLE_DEFAULTS.stroke;
+var SHAPE_DEFAULT_STROKE_WIDTH = SHAPE_STYLE_DEFAULTS.strokeWidth;
+/**
+* Normalizes a box-shaped object's `x`/`y`/`width`/`height` to non-negative
+* dimensions in place of whatever an arbitrary caller supplied (Phase 8) —
+* the interactive drag tools (`shapeTool.ts`) already produce
+* always-non-negative geometry by scanning min/max points before ever
+* constructing a shape, but a raw `content.add`/`content.update` call (Host
+* code, a Custom tool, or a remote collaboration Op) has no such guarantee.
+* `BoardDocument` calls this at every entry point so "dragging from
+* bottom-right toward top-left" and "a negative `width`/`height` patch"
+* produce the same valid geometry regardless of source. A no-op (returns
+* the same reference) when both dimensions are already non-negative, so
+* this never allocates on the common path.
+*/
+function normalizeBoxGeometry(box) {
+	if (box.width >= 0 && box.height >= 0) return box;
+	const left = Math.min(box.x, box.x + box.width);
+	const right = Math.max(box.x, box.x + box.width);
+	const top = Math.max(box.y, box.y - box.height);
+	const bottom = Math.min(box.y, box.y - box.height);
+	return {
+		...box,
+		x: left,
+		y: top,
+		width: right - left,
+		height: top - bottom
+	};
+}
+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 +1224,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 +1302,85 @@ 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.orderIndex.set(this.objectOrder[i], i);
+		this.orderIndex.set(this.objectOrder[i + 1], i + 1);
+		this.emit({ orderChanged: [this.objectOrder[i], this.objectOrder[i + 1]] });
+	}
+	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.orderIndex.set(this.objectOrder[i], i);
+		this.orderIndex.set(this.objectOrder[i - 1], i - 1);
+		this.emit({ orderChanged: [this.objectOrder[i - 1], this.objectOrder[i]] });
+	}
+	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);
+		for (let k = i; k < this.objectOrder.length; k++) this.orderIndex.set(this.objectOrder[k], k);
+		this.emit({ orderChanged: this.objectOrder.slice(i) });
+	}
+	sendToBack(id) {
+		const i = this.orderIndex.get(id);
+		if (i === void 0 || i <= 0) return;
+		this.objectOrder.splice(i, 1);
+		this.objectOrder.unshift(id);
+		for (let k = 0; k <= i; k++) this.orderIndex.set(this.objectOrder[k], k);
+		this.emit({ orderChanged: this.objectOrder.slice(0, i + 1) });
+	}
+	/** 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 +1388,75 @@ 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;
+	}
+	/**
+	* True if `id` exists and is hidden, for any type — the same per-type
+	* probe pattern as {@link isLocked} (Phase 8). Custom objects are
+	* excluded for the same reason `isLocked` excludes them: they have no
+	* `Hideable` field at all, so "hidden" isn't a concept that applies to
+	* them yet. Used by marquee selection (`selectTool.ts`) to keep a hidden
+	* object out of a rubber-band selection even for object types whose own
+	* renderer doesn't yet suppress click-based hit-testing.
+	*/
+	isHidden(id) {
+		return !!this.strokes.get(id)?.hidden || !!this.notes.get(id)?.hidden || !!this.texts.get(id)?.hidden || !!this.tables.get(id)?.hidden || !!this.images.get(id)?.hidden || !!this.timers.get(id)?.hidden || !!this.rectangles.get(id)?.hidden || !!this.ellipses.get(id)?.hidden || !!this.groups.get(id)?.hidden || !!this.lines.get(id)?.hidden || !!this.arrows.get(id)?.hidden || !!this.polygons.get(id)?.hidden || !!this.stars.get(id)?.hidden || !!this.hearts.get(id)?.hidden;
 	}
 	subscribe(listener) {
 		this.listeners.add(listener);
@@ -994,6 +1605,176 @@ 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) {
+		const normalized = rectangles.map(normalizeBoxGeometry);
+		for (const rect of normalized) this.rectangles.set(rect.id, rect);
+		this.emit({ rectanglesAdded: normalized });
+	}
+	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) {
+		const normalized = normalizeBoxGeometry(rect);
+		this.rectangles.set(normalized.id, normalized);
+		this.emit({ rectanglesUpdated: [normalized] });
+	}
+	getEllipse(id) {
+		return this.ellipses.get(id);
+	}
+	allEllipses() {
+		return this.ellipses.values();
+	}
+	addEllipses(ellipses) {
+		const normalized = ellipses.map(normalizeBoxGeometry);
+		for (const ellipse of normalized) this.ellipses.set(ellipse.id, ellipse);
+		this.emit({ ellipsesAdded: normalized });
+	}
+	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) {
+		const normalized = normalizeBoxGeometry(ellipse);
+		this.ellipses.set(normalized.id, normalized);
+		this.emit({ ellipsesUpdated: [normalized] });
+	}
+	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) {
+		const normalized = polygons.map(normalizeBoxGeometry);
+		for (const polygon of normalized) this.polygons.set(polygon.id, polygon);
+		this.emit({ polygonsAdded: normalized });
+	}
+	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) {
+		const normalized = normalizeBoxGeometry(polygon);
+		this.polygons.set(normalized.id, normalized);
+		this.emit({ polygonsUpdated: [normalized] });
+	}
+	getStar(id) {
+		return this.stars.get(id);
+	}
+	allStars() {
+		return this.stars.values();
+	}
+	addStars(stars) {
+		const normalized = stars.map(normalizeBoxGeometry);
+		for (const star of normalized) this.stars.set(star.id, star);
+		this.emit({ starsAdded: normalized });
+	}
+	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) {
+		const normalized = normalizeBoxGeometry(star);
+		this.stars.set(normalized.id, normalized);
+		this.emit({ starsUpdated: [normalized] });
+	}
+	getHeart(id) {
+		return this.hearts.get(id);
+	}
+	allHearts() {
+		return this.hearts.values();
+	}
+	addHearts(hearts) {
+		const normalized = hearts.map(normalizeBoxGeometry);
+		for (const heart of normalized) this.hearts.set(heart.id, heart);
+		this.emit({ heartsAdded: normalized });
+	}
+	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) {
+		const normalized = normalizeBoxGeometry(heart);
+		this.hearts.set(normalized.id, normalized);
+		this.emit({ heartsUpdated: [normalized] });
+	}
 	setStrokeLocked(id, locked, by) {
 		const stroke = this.strokes.get(id);
 		if (!stroke) return;
@@ -1041,8 +1822,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 +1879,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 +1894,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 +1913,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 +1935,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 +2065,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 +2184,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);
 	}
@@ -1227,7 +2238,17 @@ var BoardDocument = class {
 	static deserializeTables(data) {
 		return (data.tables ?? []).map(cloneTable);
 	}
-	static deserializeStrokes(data) {
+	/**
+	* `onSkip` (Phase 9) replaces an unconditional `console.error` — `core`
+	* must never do raw console I/O (no dev-gate, no way for a Host to
+	* suppress or redirect it), so a skipped stroke is now reported only if
+	* the caller asks for it, via whatever diagnostic channel it already
+	* has (e.g. `controller-internal.ts` routes this into the same typed
+	* `"error"` event every other diagnostic already uses). Silent by
+	* default, matching how every other `deserialize*` method here already
+	* behaves (no diagnostics at all).
+	*/
+	static deserializeStrokes(data, onSkip) {
 		const strokes = [];
 		for (const s of data.strokes) try {
 			strokes.push({
@@ -1241,11 +2262,65 @@ var BoardDocument = class {
 				...serializeLock(s)
 			});
 		} catch (err) {
-			console.error(`Skipping malformed stroke ${s?.id ?? "(no id)"}:`, err);
+			onSkip?.(s?.id ?? "(no id)", err);
 		}
 		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` (Phase 9) reports exactly the ids whose rank actually
+	* changed, using `orderIndex` throughout instead of `indexOf` — a pure
+	* append never shifts any existing id's rank (new ids land at the tail,
+	* already covered by this same change's own `Added` field, so
+	* `orderChanged` stays unset), while a removal shifts every id at-or-
+	* after the lowest removed rank down by one, computed in a single O(n)
+	* filter pass (not one `indexOf`+`splice` per removed id) regardless of
+	* how many ids this one change removes. Every renderer's `onChange` now
+	* looks up only the ids actually in `orderChanged` instead of walking
+	* its entire mesh map on any order-touching change — a broad, unfiltered
+	* `orderChanged` here would silently defeat that fix, not just waste
+	* cycles here.
+	*/
 	emit(change) {
+		const newIds = [];
+		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)) newIds.push(object.id);
+		}
+		const removedIds = /* @__PURE__ */ new Set();
+		for (const field of ORDERED_REMOVED_FIELDS) {
+			const ids = change[field];
+			if (!ids) continue;
+			for (const id of ids) if (this.orderIndex.has(id)) removedIds.add(id);
+		}
+		let orderChanged;
+		if (removedIds.size > 0) {
+			let minIndex = this.objectOrder.length;
+			for (const id of removedIds) minIndex = Math.min(minIndex, this.orderIndex.get(id));
+			const next = [];
+			for (const id of this.objectOrder) if (!removedIds.has(id)) next.push(id);
+			this.objectOrder = next;
+			for (let k = minIndex; k < this.objectOrder.length; k++) this.orderIndex.set(this.objectOrder[k], k);
+			for (const id of removedIds) this.orderIndex.delete(id);
+			orderChanged = this.objectOrder.slice(minIndex);
+		}
+		if (newIds.length > 0) for (const id of newIds) {
+			this.orderIndex.set(id, this.objectOrder.length);
+			this.objectOrder.push(id);
+		}
+		if (orderChanged) change = {
+			...change,
+			orderChanged
+		};
 		const full = {
 			...EMPTY_CHANGE,
 			...change
@@ -1399,6 +2474,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 +2869,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 +3232,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 +3332,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 +3350,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 +3367,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 +3444,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 +3528,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 +3545,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 +3652,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,15 +3818,29 @@ 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");
 	const ink = doc.strokes.filter((s) => s.tool !== "highlighter");
 	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${view}">\n<defs>\n${defs}\n</defs>\n${[
-		`<rect x="${fmt(bounds.minX)}" y="${fmt(bounds.minY)}" width="${fmt(bounds.width)}" height="${fmt(bounds.height)}" fill="${backgroundColor}"/>`,
+		`<rect x="${fmt(bounds.minX)}" y="${fmt(bounds.minY)}" width="${fmt(bounds.width)}" height="${fmt(bounds.height)}" fill="${escapeXML(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),
@@ -2007,7 +3859,7 @@ function customObjectToGroup(object, registry, resolvedAssets) {
 	const definition = registry?.objectType(object.type);
 	if (definition) try {
 		const scene = definition.describe(object, { selected: false });
-		return `<g data-id="${object.id}">${sceneNodeToSVG(scene, object.transform, resolvedAssets)}</g>`;
+		return `<g data-id="${escapeXML(object.id)}">${sceneNodeToSVG(scene, object.transform, resolvedAssets)}</g>`;
 	} catch {}
 	return fallbackToGroup(object);
 }
@@ -2031,17 +3883,17 @@ function sceneNodeToSVG(node, parent, resolvedAssets) {
 		case "rect": {
 			const svgY = -node.y - node.height;
 			const rx = node.cornerRadius ? ` rx="${fmt(node.cornerRadius)}"` : "";
-			const stroke = node.stroke ? ` stroke="${node.stroke}" stroke-width="${fmt(node.strokeWidth ?? .1)}"` : "";
-			return `<rect x="${fmt(node.x)}" y="${fmt(svgY)}" width="${fmt(node.width)}" height="${fmt(node.height)}" fill="${node.fill ?? "none"}"${rx}${stroke}${opacityAttr}${transformAttr}/>`;
+			const stroke = node.stroke ? ` stroke="${escapeXML(node.stroke)}" stroke-width="${fmt(node.strokeWidth ?? .1)}"` : "";
+			return `<rect x="${fmt(node.x)}" y="${fmt(svgY)}" width="${fmt(node.width)}" height="${fmt(node.height)}" fill="${escapeXML(node.fill ?? "none")}"${rx}${stroke}${opacityAttr}${transformAttr}/>`;
 		}
 		case "text": {
 			const anchor = node.align === "center" ? ` text-anchor="middle"` : node.align === "end" ? ` text-anchor="end"` : "";
 			const tspans = node.text.split("\n").map((line, i) => `<tspan x="${fmt(node.x)}" y="${fmt(-node.y + node.fontSize * (.8 + 1.25 * i))}">${escapeXML(line)}</tspan>`).join("");
-			return `<text font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(node.fontSize)}" font-weight="500" fill="${node.color}"${anchor}${opacityAttr}${transformAttr}>${tspans}</text>`;
+			return `<text font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(node.fontSize)}" font-weight="500" fill="${escapeXML(node.color)}"${anchor}${opacityAttr}${transformAttr}>${tspans}</text>`;
 		}
 		case "ellipse": {
-			const stroke = node.stroke ? ` stroke="${node.stroke}" stroke-width="${fmt(node.strokeWidth ?? .1)}"` : "";
-			return `<ellipse cx="${fmt(node.cx)}" cy="${fmt(-node.cy)}" rx="${fmt(node.rx)}" ry="${fmt(node.ry)}" fill="${node.fill ?? "none"}"${stroke}${opacityAttr}${transformAttr}/>`;
+			const stroke = node.stroke ? ` stroke="${escapeXML(node.stroke)}" stroke-width="${fmt(node.strokeWidth ?? .1)}"` : "";
+			return `<ellipse cx="${fmt(node.cx)}" cy="${fmt(-node.cy)}" rx="${fmt(node.rx)}" ry="${fmt(node.ry)}" fill="${escapeXML(node.fill ?? "none")}"${stroke}${opacityAttr}${transformAttr}/>`;
 		}
 		case "image": {
 			const svgY = -node.y - node.height;
@@ -2072,7 +3924,7 @@ function fallbackToGroup(object) {
 	const label = object.fallback.label;
 	const labelEl = label ? `<text x="${fmt(b.x + Math.min(.3, b.width * .1))}" y="${fmt(svgY + Math.min(1.2, b.height * .4))}" font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(Math.min(1.1, b.height * .3))}" fill="#6B7280">${escapeXML(label)}</text>` : "";
 	return [
-		`<g data-id="${object.id}" data-fallback="true"${svgTransformAttr(object.transform)}>`,
+		`<g data-id="${escapeXML(object.id)}" data-fallback="true"${svgTransformAttr(object.transform)}>`,
 		`<rect x="${fmt(b.x)}" y="${fmt(svgY)}" width="${fmt(b.width)}" height="${fmt(b.height)}" fill="#F3F4F6" stroke="#9CA3AF" stroke-width="0.15" stroke-dasharray="0.3 0.3"/>`,
 		labelEl,
 		`</g>`
@@ -2096,7 +3948,7 @@ function strokeToPaths(stroke) {
 		const d = `M ${left.join(" L ")} L ${right.join(" L ")} Z`;
 		const opacity = run.opacity * baseOpacity;
 		const opacityAttr = opacity < 1 ? ` fill-opacity="${fmt(opacity)}"` : "";
-		paths.push(`<path data-id="${stroke.id}" d="${d}" fill="${stroke.color}"${opacityAttr}${transform}/>`);
+		paths.push(`<path data-id="${escapeXML(stroke.id)}" d="${d}" fill="${escapeXML(stroke.color)}"${opacityAttr}${transform}/>`);
 	}
 	return paths;
 }
@@ -2118,14 +3970,14 @@ function splitByOpacity(edges) {
 function textToElement(block) {
 	const top = -block.y;
 	const tspans = block.text.split("\n").map((line, i) => `<tspan x="${fmt(block.x)}" y="${fmt(top + block.fontSize * (.8 + 1.25 * i))}">${escapeXML(line)}</tspan>`).join("");
-	return `<text font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(block.fontSize)}" font-weight="500" fill="${block.color}">${tspans}</text>`;
+	return `<text font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(block.fontSize)}" font-weight="500" fill="${escapeXML(block.color)}">${tspans}</text>`;
 }
 function noteShadowFilter(note) {
 	const dx = -LIGHT.x / LIGHT.z * note.zOffset;
 	const dy = LIGHT.y / LIGHT.z * note.zOffset;
 	const blur = (.35 + note.zOffset * .55) / 2;
 	const opacity = Math.max(.05, .26 - note.zOffset * .028);
-	return `<filter id="sh-${note.id}" x="-50%" y="-50%" width="200%" height="200%"><feDropShadow dx="${fmt(dx)}" dy="${fmt(dy)}" stdDeviation="${fmt(blur)}" flood-opacity="${fmt(opacity)}"/></filter>`;
+	return `<filter id="sh-${escapeXML(note.id)}" x="-50%" y="-50%" width="200%" height="200%"><feDropShadow dx="${fmt(dx)}" dy="${fmt(dy)}" stdDeviation="${fmt(blur)}" flood-opacity="${fmt(opacity)}"/></filter>`;
 }
 function noteToGroup(note) {
 	const left = note.x - note.size / 2;
@@ -2135,7 +3987,7 @@ function noteToGroup(note) {
 	const tspans = wrapText(note.text, note.size - pad * 2, fontSize).map((line, i) => `<tspan x="${fmt(left + pad)}" y="${fmt(top + pad + fontSize * (.8 + 1.25 * i))}">${escapeXML(line)}</tspan>`).join("");
 	return [
 		`<g>`,
-		`<rect x="${fmt(left)}" y="${fmt(top)}" width="${fmt(note.size)}" height="${fmt(note.size)}" fill="${note.color}" filter="url(#sh-${note.id})"/>`,
+		`<rect x="${fmt(left)}" y="${fmt(top)}" width="${fmt(note.size)}" height="${fmt(note.size)}" fill="${escapeXML(note.color)}" filter="url(#sh-${escapeXML(note.id)})"/>`,
 		`<text font-family="ui-rounded, 'Segoe UI', sans-serif" font-size="${fmt(fontSize)}" font-weight="500" fill="#37352F">${tspans}</text>`,
 		`</g>`
 	].join("");
@@ -2166,8 +4018,8 @@ function tableToGroup(table) {
 	const left = table.x;
 	const top = -table.y;
 	const headerH = table.rowHeights[0] ?? height / table.rows;
-	const borderColor = table.color || "#D1D5DB";
-	const bgColor = table.backgroundColor || "#FFFFFF";
+	const borderColor = escapeXML(table.color || "#D1D5DB");
+	const bgColor = escapeXML(table.backgroundColor || "#FFFFFF");
 	const elements = [];
 	elements.push(`<rect x="${fmt(left)}" y="${fmt(top)}" width="${fmt(width)}" height="${fmt(height)}" fill="${bgColor}" rx="0.5"/>`);
 	elements.push(`<rect x="${fmt(left)}" y="${fmt(top)}" width="${fmt(width)}" height="${fmt(headerH)}" fill="#F3F4F6" rx="0.5"/>`);
@@ -2195,14 +4047,14 @@ function tableToGroup(table) {
 				const padY = Math.min(.3, rowH * .12);
 				const fontSize = Math.min(1.25, rowH * .45);
 				const weight = r === 0 ? "bold" : "500";
-				const color = r === 0 ? "#111827" : table.color ?? "#374151";
+				const color = escapeXML(r === 0 ? "#111827" : table.color ?? "#374151");
 				elements.push(`<text x="${fmt(left + cellLeft + padX)}" y="${fmt(top + cellTop + padY + fontSize * .8)}" font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(fontSize)}" font-weight="${weight}" fill="${color}">${escapeXML(text)}</text>`);
 			}
 			cellLeft += colW;
 		}
 		cellTop += rowH;
 	}
-	return `<g data-id="${table.id}">\n${elements.join("\n")}\n</g>`;
+	return `<g data-id="${escapeXML(table.id)}">\n${elements.join("\n")}\n</g>`;
 }
 function timerToGroup(timer, now) {
 	const r = timer.size / 2;
@@ -2210,7 +4062,7 @@ function timerToGroup(timer, now) {
 	const cy = -timer.y;
 	const label = formatTimer(timerRemaining(timer, now));
 	return [
-		`<g data-id="${timer.id}">`,
+		`<g data-id="${escapeXML(timer.id)}">`,
 		`<circle cx="${fmt(cx + .4)}" cy="${fmt(cy + .4)}" r="${fmt(r)}" fill="#000" fill-opacity="0.12"/>`,
 		`<circle cx="${fmt(cx)}" cy="${fmt(cy)}" r="${fmt(r)}" fill="#E11D48"/>`,
 		`<circle cx="${fmt(cx)}" cy="${fmt(cy)}" r="${fmt(r * .72)}" fill="#FAFAF9"/>`,
@@ -2223,12 +4075,96 @@ function imageToElement(image, resolvedAssets) {
 	const top = -image.y - image.height / 2;
 	if (image.ref) {
 		const dataUri = resolvedAssets?.get(image.ref);
-		if (!dataUri) return `<g data-id="${image.id}" data-fallback="true">${imagePlaceholderElement(left, top, image.width, image.height, image.name)}</g>`;
-		return `<image data-id="${image.id}" href="${escapeXML(dataUri)}" x="${fmt(left)}" y="${fmt(top)}" width="${fmt(image.width)}" height="${fmt(image.height)}" preserveAspectRatio="none"/>`;
+		if (!dataUri) return `<g data-id="${escapeXML(image.id)}" data-fallback="true">${imagePlaceholderElement(left, top, image.width, image.height, image.name)}</g>`;
+		return `<image data-id="${escapeXML(image.id)}" href="${escapeXML(dataUri)}" x="${fmt(left)}" y="${fmt(top)}" width="${fmt(image.width)}" height="${fmt(image.height)}" preserveAspectRatio="none"/>`;
 	}
 	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="${escapeXML(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="${escapeXML(rect.id)}" x="${fmt(rect.x)}" y="${fmt(svgY)}" width="${fmt(rect.width)}" height="${fmt(rect.height)}" fill="${escapeXML(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="${escapeXML(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="${escapeXML(ellipse.id)}" cx="${fmt(cx)}" cy="${fmt(cy)}" rx="${fmt(ellipse.width / 2)}" ry="${fmt(ellipse.height / 2)}" fill="${escapeXML(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="${escapeXML(polygon.stroke)}" stroke-width="${fmt(polygon.strokeWidth ?? SHAPE_DEFAULT_STROKE_WIDTH)}"` : "";
+	const transform = shapeRotationAttr(polygon.x, polygon.y, polygon.width, polygon.height, polygon.rotation);
+	const opacity = opacityAttrOf(polygon.opacity);
+	return `<polygon data-id="${escapeXML(polygon.id)}" points="${svgPoints}" fill="${escapeXML(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="${escapeXML(star.stroke)}" stroke-width="${fmt(star.strokeWidth ?? SHAPE_DEFAULT_STROKE_WIDTH)}"` : "";
+	const transform = shapeRotationAttr(star.x, star.y, star.width, star.height, star.rotation);
+	const opacity = opacityAttrOf(star.opacity);
+	return `<polygon data-id="${escapeXML(star.id)}" points="${svgPoints}" fill="${escapeXML(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="${escapeXML(heart.stroke)}" stroke-width="${fmt(heart.strokeWidth ?? SHAPE_DEFAULT_STROKE_WIDTH)}"` : "";
+	const transform = shapeRotationAttr(heart.x, heart.y, heart.width, heart.height, heart.rotation);
+	const opacity = opacityAttrOf(heart.opacity);
+	return `<polygon data-id="${escapeXML(heart.id)}" points="${svgPoints}" fill="${escapeXML(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 = escapeXML(line.stroke ?? SHAPE_DEFAULT_STROKE);
+	const width = line.strokeWidth ?? SHAPE_DEFAULT_STROKE_WIDTH;
+	const opacity = opacityAttrOf(line.opacity);
+	return `<line data-id="${escapeXML(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 = escapeXML(arrow.stroke ?? SHAPE_DEFAULT_STROKE);
+	const width = arrow.strokeWidth ?? SHAPE_DEFAULT_STROKE_WIDTH;
+	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="${escapeXML(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 +4226,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 +4278,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, SHAPE_STYLE_DEFAULTS, 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, documentSize, 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 };