@scrawl-board/board 0.1.0-beta.0 → 0.1.0-beta.10

package/dist/core.js

@@ -1,10 +1,44 @@
-//#region src/core-internal/assets.ts
+//#region src/core/shapes/assets.ts
 var ASSET_REF_PATTERN = /^asset:[a-z0-9](?:[a-z0-9.-]{0,61}[a-z0-9])?:[A-Za-z0-9._~-]+$/;
+/** Hard ceiling on a reference's own wire length — independent of any resource limit below. */
+var ASSET_REF_MAX_BYTES = 512;
 function isAssetRef(value) {
 	return typeof value === "string" && ASSET_REF_PATTERN.test(value) && new TextEncoder().encode(value).length <= 512;
 }
+/** Throws on malformed input; use `isAssetRef` where a boolean is wanted instead. */
+function assetRef(value) {
+	if (!isAssetRef(value)) throw new TypeError(`Not a well-formed AssetRef: ${JSON.stringify(value)}`);
+	return value;
+}
+var AssetResolutionError = class extends Error {
+	constructor(code, retryable, message, ref) {
+		super(message);
+		this.code = code;
+		this.retryable = retryable;
+		this.ref = ref;
+		this.name = "AssetResolutionError";
+	}
+};
+var ASSET_MAX_ENCODED_BYTES = 20 * 1024 * 1024;
+var ASSET_MAX_DIMENSION_PX = 8192;
+var ASSET_MAX_DECODED_MEGAPIXELS = 40;
+var ASSET_MAX_CONCURRENT_RESOLUTIONS = 6;
+var ASSET_CACHE_BYTES_DEFAULT = 256 * 1024 * 1024;
+var ASSET_CACHE_BYTES_MIN = 64 * 1024 * 1024;
+var ASSET_CACHE_BYTES_MAX = 512 * 1024 * 1024;
+var ASSET_EXPORT_MAX_ENCODED_BYTES = 100 * 1024 * 1024;
+var ASSET_EXPORT_MAX_DECODED_MEGAPIXELS = 100;
+var SUPPORTED_ASSET_MEDIA_TYPES = [
+	"image/png",
+	"image/jpeg",
+	"image/webp"
+];
+function clampAssetCacheBytes(value) {
+	if (value === void 0 || !Number.isFinite(value)) return ASSET_CACHE_BYTES_DEFAULT;
+	return Math.min(ASSET_CACHE_BYTES_MAX, Math.max(ASSET_CACHE_BYTES_MIN, Math.floor(value)));
+}
 //#endregion
-//#region src/core-internal/identifiers.ts
+//#region src/core/document/identifiers.ts
 function documentId(value) {
 	if (!value) throw new TypeError("DocumentId cannot be empty");
 	return value;
@@ -14,7 +48,38 @@ function strokeId(value) {
 	return value;
 }
 //#endregion
-//#region src/document-schema.ts
+//#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 {
 	constructor(code, message, originalBytes, path) {
@@ -42,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 {
@@ -55,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,
@@ -81,18 +154,102 @@ 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
+	};
+	if (raw.pageName !== void 0 && (typeof raw.pageName !== "string" || !raw.pageName.trim() || raw.pageName.length > 200)) return failure("DOCUMENT_VALIDATION_FAILED", "Invalid first page name");
+	const notebookIds = /* @__PURE__ */ new Set(["default"]);
+	const sectionIds = /* @__PURE__ */ new Set(["default"]);
+	for (const field of ["notebooks", "sections"]) {
+		if (raw[field] === void 0) continue;
+		if (!Array.isArray(raw[field])) return failure("DOCUMENT_VALIDATION_FAILED", `${field} must be an array`);
+		const seen = /* @__PURE__ */ new Set();
+		for (const item of raw[field]) {
+			if (!isRecord(item) || typeof item.id !== "string" || !item.id.trim() || seen.has(item.id) || typeof item.name !== "string" || !item.name.trim() || item.name.length > 200 || typeof item.color !== "string" || !/^#[0-9a-f]{6}$/i.test(item.color)) return failure("DOCUMENT_VALIDATION_FAILED", `Invalid or duplicate ${field} entry`);
+			if (field === "sections" && (typeof item.notebookId !== "string" || !notebookIds.has(item.notebookId))) return failure("DOCUMENT_VALIDATION_FAILED", "Section references an unknown notebook");
+			seen.add(item.id);
+			(field === "notebooks" ? notebookIds : sectionIds).add(item.id);
+		}
+	}
+	if (raw.pageSectionId !== void 0 && (typeof raw.pageSectionId !== "string" || !sectionIds.has(raw.pageSectionId))) return failure("DOCUMENT_VALIDATION_FAILED", "First page references an unknown section");
+	const pages = [];
+	if (raw.pages !== void 0) {
+		if (!Array.isArray(raw.pages)) return failure("DOCUMENT_VALIDATION_FAILED", "Pages must be an array");
+		const ids = /* @__PURE__ */ new Set(["default"]);
+		for (const page of raw.pages) {
+			if (!isRecord(page) || typeof page.id !== "string" || !page.id || ids.has(page.id) || typeof page.name !== "string" || !page.name.trim() || page.name.length > 200 || !isRecord(page.content) || page.content.pages !== void 0 || page.content.pageName !== void 0 || page.content.notebooks !== void 0 || page.content.sections !== void 0 || page.content.pageSectionId !== void 0) return failure("DOCUMENT_VALIDATION_FAILED", "Invalid or duplicate page");
+			if (page.sectionId !== void 0 && (typeof page.sectionId !== "string" || !sectionIds.has(page.sectionId))) return failure("DOCUMENT_VALIDATION_FAILED", "Page references an unknown section");
+			const content = migrateDocument(page.content);
+			if (!content.ok) return content;
+			ids.add(page.id);
+			pages.push({
+				id: page.id,
+				name: page.name,
+				...page.sectionId !== void 0 ? { sectionId: page.sectionId } : {},
+				content: content.document
+			});
+		}
+	}
 	return {
 		ok: true,
 		migratedFrom: version,
 		document: {
 			schemaVersion: 1,
+			...raw.notebooks !== void 0 ? { notebooks: raw.notebooks } : {},
+			...raw.sections !== void 0 ? { sections: raw.sections } : {},
+			...raw.pageSectionId !== void 0 ? { pageSectionId: raw.pageSectionId } : {},
+			...raw.pageName !== void 0 ? { pageName: raw.pageName } : {},
+			...raw.pages !== void 0 ? { pages } : {},
 			strokes,
 			notes: collections.notes,
 			textBlocks: collections.textBlocks,
 			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
 		}
 	};
 }
@@ -101,8 +258,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}]`);
@@ -114,7 +282,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, ["marker", "highlighter"]) || !validLock(value) || !optionalString(value.clusterId) || !validMatrix(value.matrix) || !Array.isArray(value.points)) return validation("invalid stroke", path);
+		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"
+		])) 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]);
@@ -140,20 +321,62 @@ 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 validBinding(v) {
+	return v === void 0 || isRecord(v) && nonempty(v.objectId) && finite(v.x) && finite(v.y) && v.x >= 0 && v.x <= 1 && v.y >= 0 && v.y <= 1;
+}
+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") && (v.routing === void 0 || [
+		"straight",
+		"curved",
+		"polyline"
+	].includes(v.routing)) && validBinding(v.startBinding) && validBinding(v.endBinding) && (v.waypoints === void 0 || Array.isArray(v.waypoints) && v.waypoints.length <= 256 && v.waypoints.every(validPoint));
+}
+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);
@@ -172,6 +395,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);
 }
@@ -222,7 +448,7 @@ function validation(message, path) {
 	return new DocumentRecoveryError("DOCUMENT_VALIDATION_FAILED", message, void 0, path);
 }
 //#endregion
-//#region src/core-internal/affine2d.ts
+//#region src/core/shapes/affine2d.ts
 var IDENTITY = [
 	1,
 	0,
@@ -306,7 +532,7 @@ function avgScale(m) {
 	return (Math.hypot(m[0], m[1]) + Math.hypot(m[2], m[3])) / 2;
 }
 //#endregion
-//#region src/core-internal/boardSearch.ts
+//#region src/core/document/boardSearch.ts
 function hay(s) {
 	return s.toLowerCase();
 }
@@ -371,7 +597,7 @@ function searchBoard(query, board) {
 	return hits;
 }
 //#endregion
-//#region src/core-internal/types.ts
+//#region src/core/shapes/types.ts
 /** Erasure level at which a point counts as fully erased. */
 var ERASE_THRESHOLD = .95;
 function cloneStroke(stroke) {
@@ -388,16 +614,28 @@ var INK_COLORS = {
 	green: "#16A34A"
 };
 var HIGHLIGHT_COLORS = {
-	yellow: "#FDE047",
-	green: "#86EFAC",
-	pink: "#F9A8D4",
-	blue: "#93C5FD"
+	yellow: "#FACC15",
+	green: "#4ADE80",
+	pink: "#F472B6",
+	blue: "#60A5FA"
 };
 var NOTE_COLORS = {
-	yellow: "#FDE68A",
-	pink: "#FBCFE8",
-	blue: "#BFDBFE",
-	green: "#BBF7D0"
+	yellow: "#FDE047",
+	amber: "#FACC15",
+	orange: "#FB923C",
+	peach: "#FDBA74",
+	red: "#FB7185",
+	rose: "#FDA4AF",
+	pink: "#F9A8D4",
+	magenta: "#F472B6",
+	purple: "#C084FC",
+	lavender: "#C4B5FD",
+	blue: "#93C5FD",
+	cornflower: "#60A5FA",
+	sky: "#38BDF8",
+	cyan: "#67E8F9",
+	green: "#86EFAC",
+	mint: "#4ADE80"
 };
 var TEXT_DEFAULT_SIZE = 1.8;
 function cloneText(block) {
@@ -442,13 +680,12 @@ function measureTable(table) {
 		height: table.rowHeights.reduce((sum, h) => sum + h, 0)
 	};
 }
-var BOARD_COLOR = "#FFFFFF";
 var FOG_COLOR = "#FFFFFF";
 function cloneImage(img) {
 	return { ...img };
 }
 //#endregion
-//#region src/core-internal/clusterStore.ts
+//#region src/core/document/clusterStore.ts
 /** A stroke joins a cluster last written to within this window at full reach. */
 var RECENT_MS = 8e3;
 /** Older clusters are still joinable, at half the gap threshold. */
@@ -619,7 +856,7 @@ function clamp$1(v, lo, hi) {
 	return Math.min(hi, Math.max(lo, v));
 }
 //#endregion
-//#region src/core-internal/extensionTypes.ts
+//#region src/core/shapes/extensionTypes.ts
 function cloneCustomObject(object) {
 	return {
 		...object,
@@ -629,7 +866,7 @@ function cloneCustomObject(object) {
 	};
 }
 //#endregion
-//#region src/core-internal/kitchenTimer.ts
+//#region src/core/shapes/kitchenTimer.ts
 var TIMER_DEFAULT_SIZE = 12;
 var TIMER_DEFAULT_DURATION_MS = 300 * 1e3;
 var TIMER_PRESETS_MS = [
@@ -686,7 +923,7 @@ function formatTimer(ms) {
 	return `${Math.floor(total / 60)}:${(total % 60).toString().padStart(2, "0")}`;
 }
 //#endregion
-//#region src/core-internal/itemLock.ts
+//#region src/core/shapes/itemLock.ts
 /**
 * Apply or clear a lock in place. Unlock always drops the holder so a stale
 * name cannot linger on an unlocked item.
@@ -723,7 +960,409 @@ function serializeLock(item) {
 	};
 }
 //#endregion
-//#region src/core-internal/document.ts
+//#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: .3
+};
+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 },
+		...arrow.waypoints ? { waypoints: arrow.waypoints.map((p) => ({ ...p })) } : {},
+		...arrow.startBinding ? { startBinding: { ...arrow.startBinding } } : {},
+		...arrow.endBinding ? { endBinding: { ...arrow.endBinding } } : {}
+	};
+}
+function cloneGroup(group) {
+	return {
+		...group,
+		children: [...group.children]
+	};
+}
+//#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]];
+}
+/** Shared routed shaft for previews, rendering, bounds and SVG export. */
+function connectorPoints(arrow) {
+	const { start: a, end: b, routing } = arrow;
+	if (!routing || routing === "straight") return [a, b];
+	const mx = (a.x + b.x) / 2;
+	if (routing === "polyline") return [
+		a,
+		...arrow.waypoints ?? [],
+		b
+	];
+	return Array.from({ length: 49 }, (_, i) => {
+		const t = i / 48, u = 1 - t;
+		return {
+			x: u ** 3 * a.x + 3 * u * t * mx + t ** 3 * b.x,
+			y: (u ** 3 + 3 * u * u * t) * a.y + (3 * u * t * t + t ** 3) * b.y
+		};
+	});
+}
+/** Shaft and arrowhead paths, with the head following the final route tangent. */
+function arrowPolylines(arrow) {
+	const points = connectorPoints(arrow).filter((p, i, all) => i === 0 || Math.hypot(p.x - all[i - 1].x, p.y - all[i - 1].y) > 1e-8);
+	if (points.length < 2) return [];
+	if (!arrow.routing || arrow.routing === "straight") return [points, ...arrowHeadBarbs(arrow.start, arrow.end, arrow.head)];
+	const a = points[points.length - 2], b = points[points.length - 1];
+	const tangentLength = Math.hypot(b.x - a.x, b.y - a.y);
+	const length = points.slice(1).reduce((sum, p, i) => sum + Math.hypot(p.x - points[i].x, p.y - points[i].y), 0);
+	return [points, ...arrowHeadBarbs({
+		x: b.x - (b.x - a.x) / tangentLength * length,
+		y: b.y - (b.y - a.y) / tangentLength * length
+	}, b, arrow.head)];
+}
+function arrowSegments(arrow) {
+	return arrowPolylines(arrow).flatMap((points) => points.slice(1).map((p, i) => [points[i], p]));
+}
+//#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,
+		...arrow.routing ? arrowSegments(arrow).flat() : []
+	]);
+}
+/**
+* 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/shapes/connectorGeometry.ts
+/** Space left between an arrowhead's tip and the outline it points at. */
+var CONNECTOR_HEAD_GAP = .35;
+function anchorPoint(target, binding) {
+	const { box } = target;
+	return {
+		x: box.minX + (box.maxX - box.minX) * binding.x,
+		y: box.minY + (box.maxY - box.minY) * binding.y
+	};
+}
+/**
+* Where the ray from `from` (inside the target) toward `toward` leaves the
+* outline, pulled back by `gap` toward `toward`. Returns `from` when `toward`
+* is itself inside the outline — there's no meaningful exit to aim for.
+*/
+function clipToOutline(target, from, toward, gap = 0) {
+	const dx = toward.x - from.x;
+	const dy = toward.y - from.y;
+	const length = Math.hypot(dx, dy);
+	if (length < 1e-9) return from;
+	const t = target.outline === "ellipse" ? ellipseExit(target.box, from, dx, dy) : boxExit(target.box, from, dx, dy);
+	if (t === null || t >= 1) return from;
+	const along = Math.min(t + gap / length, 1);
+	return {
+		x: from.x + dx * along,
+		y: from.y + dy * along
+	};
+}
+function boxExit(box, from, dx, dy) {
+	let t = Infinity;
+	if (dx > 0) t = Math.min(t, (box.maxX - from.x) / dx);
+	else if (dx < 0) t = Math.min(t, (box.minX - from.x) / dx);
+	if (dy > 0) t = Math.min(t, (box.maxY - from.y) / dy);
+	else if (dy < 0) t = Math.min(t, (box.minY - from.y) / dy);
+	return Number.isFinite(t) ? Math.max(0, t) : null;
+}
+function ellipseExit(box, from, dx, dy) {
+	const rx = (box.maxX - box.minX) / 2;
+	const ry = (box.maxY - box.minY) / 2;
+	if (rx <= 0 || ry <= 0) return boxExit(box, from, dx, dy);
+	const px = from.x - (box.minX + rx);
+	const py = from.y - (box.minY + ry);
+	const a = dx * dx / (rx * rx) + dy * dy / (ry * ry);
+	const b = 2 * (px * dx / (rx * rx) + py * dy / (ry * ry));
+	const c = px * px / (rx * rx) + py * py / (ry * ry) - 1;
+	const disc = b * b - 4 * a * c;
+	if (disc < 0) return null;
+	return Math.max(0, (-b + Math.sqrt(disc)) / (2 * a));
+}
+function isCentred(binding) {
+	return binding.x === .5 && binding.y === .5;
+}
+/**
+* The endpoints a connector should have given its bindings. An unbound end
+* keeps its stored point; a precise one sits on its anchor. Centred ends on
+* curved connectors leave their shapes horizontally (matching the S-curve's
+* tangents); others aim at the next point along the route. Only an end with
+* an arrowhead is pulled back from the outline.
+*/
+function resolveConnectorEnds(arrow, targetOf) {
+	const startTarget = arrow.startBinding && targetOf(arrow.startBinding.objectId);
+	const endTarget = arrow.endBinding && targetOf(arrow.endBinding.objectId);
+	const startAnchor = startTarget ? anchorPoint(startTarget, arrow.startBinding) : arrow.start;
+	const endAnchor = endTarget ? anchorPoint(endTarget, arrow.endBinding) : arrow.end;
+	const afterStart = arrow.waypoints?.[0] ?? endAnchor;
+	const beforeEnd = arrow.waypoints?.at(-1) ?? startAnchor;
+	const aim = (from, toward) => arrow.routing === "curved" ? {
+		x: from.x + Math.sign(toward.x - from.x || 1) * 1e6,
+		y: from.y
+	} : toward;
+	const headGap = arrow.head === "none" ? 0 : CONNECTOR_HEAD_GAP;
+	const place = (target, binding, anchor, toward, gap, fallback) => {
+		if (!target || !binding) return fallback;
+		return isCentred(binding) ? clipToOutline(target, anchor, aim(anchor, toward), gap) : anchor;
+	};
+	return {
+		start: place(startTarget, arrow.startBinding, startAnchor, afterStart, 0, arrow.start),
+		end: place(endTarget, arrow.endBinding, endAnchor, beforeEnd, headGap, arrow.end)
+	};
+}
+//#endregion
+//#region src/core/document/document.ts
 /**
 * The one place a live Stroke becomes its wire representation — in
 * particular, points collapse from {x,y,pressure,erase?} objects into
@@ -773,8 +1412,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;
@@ -786,8 +1490,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);
@@ -795,8 +1576,88 @@ 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.
+	*/
+	/**
+	* What a connector can attach to at `id`: its bounds and outline shape.
+	* Connectors, lines and groups aren't targets (that would allow cycles).
+	*/
+	connectorTarget(id) {
+		if (this.arrows.has(id) || this.lines.has(id) || this.groups.has(id)) return void 0;
+		const box = this.bbox(id);
+		if (!box) return void 0;
+		return {
+			box,
+			outline: this.ellipses.has(id) ? "ellipse" : "box"
+		};
+	}
+	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);
@@ -945,6 +1806,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;
@@ -992,8 +2023,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()];
@@ -1001,6 +2080,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();
@@ -1008,6 +2095,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);
@@ -1019,6 +2114,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,
@@ -1033,8 +2136,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) {
@@ -1146,6 +2266,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() {
@@ -1157,12 +2385,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);
 	}
@@ -1178,7 +2439,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({
@@ -1192,11 +2463,79 @@ 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 targetOf = (objectId) => this.connectorTarget(objectId);
+		for (const arrow of this.arrows.values()) {
+			if (!arrow.startBinding && !arrow.endBinding) continue;
+			const { start, end } = resolveConnectorEnds(arrow, targetOf);
+			if (start.x === arrow.start.x && start.y === arrow.start.y && end.x === arrow.end.x && end.y === arrow.end.y) continue;
+			const next = {
+				...arrow,
+				start,
+				end
+			};
+			this.arrows.set(arrow.id, next);
+			if (change.arrowsAdded?.some((a) => a.id === arrow.id)) change.arrowsAdded = change.arrowsAdded.map((a) => a.id === arrow.id ? next : a);
+			else change.arrowsUpdated = [...(change.arrowsUpdated ?? []).filter((a) => a.id !== arrow.id), next];
+		}
+		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
@@ -1282,7 +2621,7 @@ function computeBBox(stroke) {
 	return world;
 }
 //#endregion
-//#region src/core-internal/commands.ts
+//#region src/core/commands/commands.ts
 /** One drawing action — a marker stroke, or a shape's strokes as one unit. */
 var AddStrokesCommand = class {
 	constructor(strokes) {
@@ -1350,7 +2689,202 @@ var TransformCommand = class {
 		if (changed.length) doc.transformStrokes(changed);
 	}
 };
-var AddNoteCommand = class {
+/**
+* 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),
+					...arrow.waypoints ? { waypoints: arrow.waypoints.map((p) => apply(m, p)) } : {}
+				});
+				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";
 		this.note = cloneNote(note);
@@ -1551,6 +3085,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";
@@ -1578,16 +3448,63 @@ 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-internal/history.ts
+//#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 {
+	/** Switch independent page histories while retaining the same document instance. */
+	setScope(id) {
+		if (id === this.scope) return;
+		this.scopes.set(this.scope, {
+			undo: [...this.undoStack],
+			redo: [...this.redoStack]
+		});
+		const next = this.scopes.get(id);
+		this.undoStack.splice(0, this.undoStack.length, ...next?.undo ?? []);
+		this.redoStack.splice(0, this.redoStack.length, ...next?.redo ?? []);
+		this.scope = id;
+	}
+	/** Discard all page histories after replacing a saved document. */
+	clearScopes() {
+		this.scopes.clear();
+		this.clear();
+	}
 	constructor(doc) {
 		this.doc = doc;
 		this.undoStack = [];
 		this.redoStack = [];
+		this.scope = "default";
+		this.scopes = /* @__PURE__ */ new Map();
 		this.onCommand = null;
 		this.undoing = false;
 	}
@@ -1642,7 +3559,7 @@ var History = class {
 	}
 };
 //#endregion
-//#region src/core-internal/ops.ts
+//#region src/core/events/ops.ts
 var ADDED = [
 	["added", "strokes"],
 	["notesAdded", "notes"],
@@ -1650,6 +3567,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 = [
@@ -1660,6 +3585,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 = [
@@ -1669,6 +3602,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) {
@@ -1696,10 +3637,18 @@ function changeToOps(change, restoring = false) {
 	return ops;
 }
 //#endregion
-//#region src/core-internal/ribbonEdges.ts
+//#region src/core/shapes/ribbonEdges.ts
 var MIN_WIDTH_FACTOR = .35;
 var END_TAPER = .55;
-function ribbonEdges(points, baseWidth) {
+/**
+* @param handDrawn Default `true`: ink's organic feel — width follows
+* per-point pressure, and both ends taper. Pass `false` for a geometric
+* shape outline, which has no real pressure signal and isn't a pen stroke
+* with a lift-off: it renders at the exact `baseWidth`, uniformly, with no
+* taper at its start/end (which, for a closed shape, is the same point —
+* tapering it would visibly pinch just that one corner).
+*/
+function ribbonEdges(points, baseWidth, handDrawn = true) {
 	const pts = points.length === 1 ? [points[0], {
 		...points[0],
 		x: points[0].x + baseWidth * .05
@@ -1714,9 +3663,29 @@ function ribbonEdges(points, baseWidth) {
 		const len = Math.hypot(dx, dy) || 1;
 		dx /= len;
 		dy /= len;
-		let width = baseWidth * (MIN_WIDTH_FACTOR + (1 - MIN_WIDTH_FACTOR) * pts[i].pressure);
-		if (i === 0 || i === n - 1) width *= END_TAPER;
-		const hw = width / 2;
+		let width = handDrawn ? baseWidth * (MIN_WIDTH_FACTOR + (1 - MIN_WIDTH_FACTOR) * pts[i].pressure) : baseWidth;
+		if (handDrawn && (i === 0 || i === n - 1)) width *= END_TAPER;
+		let miterScale = 1;
+		if (!handDrawn && n > 2) {
+			const closed = pts[0].x === pts[n - 1].x && pts[0].y === pts[n - 1].y;
+			const before = pts[i === 0 && closed ? n - 2 : Math.max(0, i - 1)];
+			const after = pts[i === n - 1 && closed ? 1 : Math.min(n - 1, i + 1)];
+			const incomingLength = Math.hypot(pts[i].x - before.x, pts[i].y - before.y);
+			const outgoingLength = Math.hypot(after.x - pts[i].x, after.y - pts[i].y);
+			if (incomingLength > 0 && outgoingLength > 0) {
+				const ax = (pts[i].x - before.x) / incomingLength;
+				const ay = (pts[i].y - before.y) / incomingLength;
+				const bx = (after.x - pts[i].x) / outgoingLength;
+				const by = (after.y - pts[i].y) / outgoingLength;
+				const length = Math.hypot(ax + bx, ay + by);
+				if (length > 1e-4) {
+					dx = (ax + bx) / length;
+					dy = (ay + by) / length;
+					miterScale = Math.min(4, 1 / Math.max(.25, dx * bx + dy * by));
+				}
+			}
+		}
+		const hw = width / 2 * miterScale;
 		out[i] = {
 			lx: pts[i].x - dy * hw,
 			ly: pts[i].y + dx * hw,
@@ -1728,24 +3697,76 @@ function ribbonEdges(points, baseWidth) {
 	return out;
 }
 //#endregion
-//#region src/core-internal/spatialIndex.ts
+//#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({
@@ -1762,13 +3783,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) {
@@ -1779,9 +3800,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) {
@@ -1801,7 +3822,7 @@ function cellsOf(box) {
 	return keys;
 }
 //#endregion
-//#region src/core-internal/stamps.ts
+//#region src/core/shapes/stamps.ts
 var STAMP_SIZE = 6;
 var STAMPS = [
 	{
@@ -1850,7 +3871,7 @@ function isStampKind(value) {
 	return typeof value === "string" && STAMPS.some((s) => s.kind === value);
 }
 //#endregion
-//#region src/core-internal/presence.ts
+//#region src/collaboration/presence/presence.ts
 /** Keep beacons clear of typical chrome at the top and bottom of the Board. */
 var BEACON_INSET = {
 	top: 72,
@@ -1886,7 +3907,766 @@ function clamp(value, min, max) {
 	return Math.min(max, Math.max(min, value));
 }
 //#endregion
-//#region src/core-internal/svg.ts
+//#region src/core/shapes/iconLibrary.ts
+var ICON_LIBRARY = [
+	{
+		name: "lucide:check",
+		label: "Check",
+		category: "Status",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 6L9 17l-5-5\"/>"
+	},
+	{
+		name: "lucide:x",
+		label: "Cross",
+		category: "Status",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M18 6L6 18M6 6l12 12\"/>"
+	},
+	{
+		name: "lucide:star",
+		label: "Star",
+		category: "Status",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.12 2.12 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.12 2.12 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.12 2.12 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.12 2.12 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.12 2.12 0 0 0 1.597-1.16z\"/>"
+	},
+	{
+		name: "lucide:heart",
+		label: "Heart",
+		category: "Status",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2 9.5a5.5 5.5 0 0 1 9.591-3.676a.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5\"/>"
+	},
+	{
+		name: "lucide:flag",
+		label: "Flag",
+		category: "Status",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528\"/>"
+	},
+	{
+		name: "lucide:bookmark",
+		label: "Bookmark",
+		category: "Status",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z\"/>"
+	},
+	{
+		name: "lucide:bell",
+		label: "Bell",
+		category: "Status",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10.268 21a2 2 0 0 0 3.464 0m-10.47-5.674A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326\"/>"
+	},
+	{
+		name: "lucide:info",
+		label: "Info",
+		category: "Status",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4m0-4h.01\"/></g>"
+	},
+	{
+		name: "lucide:circle-alert",
+		label: "Alert",
+		category: "Status",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 8v4m0 4h.01\"/></g>"
+	},
+	{
+		name: "lucide:circle-question-mark",
+		label: "Question",
+		category: "Status",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3m.08 4h.01\"/></g>"
+	},
+	{
+		name: "lucide:thumbs-up",
+		label: "Thumbs up",
+		category: "Status",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 5.88L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88M7 10v12\"/>"
+	},
+	{
+		name: "lucide:thumbs-down",
+		label: "Thumbs down",
+		category: "Status",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 18.12L10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88M17 14V2\"/>"
+	},
+	{
+		name: "lucide:arrow-up",
+		label: "Arrow up",
+		category: "Arrows",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m5 12l7-7l7 7m-7 7V5\"/>"
+	},
+	{
+		name: "lucide:arrow-down",
+		label: "Arrow down",
+		category: "Arrows",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 5v14m7-7l-7 7l-7-7\"/>"
+	},
+	{
+		name: "lucide:arrow-left",
+		label: "Arrow left",
+		category: "Arrows",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"/>"
+	},
+	{
+		name: "lucide:arrow-right",
+		label: "Arrow right",
+		category: "Arrows",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"/>"
+	},
+	{
+		name: "lucide:arrow-up-right",
+		label: "Arrow up-right",
+		category: "Arrows",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"/>"
+	},
+	{
+		name: "lucide:refresh-cw",
+		label: "Refresh",
+		category: "Arrows",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M3 12a9 9 0 0 1 9-9a9.75 9.75 0 0 1 6.74 2.74L21 8\"/><path d=\"M21 3v5h-5m5 4a9 9 0 0 1-9 9a9.75 9.75 0 0 1-6.74-2.74L3 16\"/><path d=\"M8 16H3v5\"/></g>"
+	},
+	{
+		name: "lucide:move",
+		label: "Move",
+		category: "Arrows",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 2v20m3-3l-3 3l-3-3M19 9l3 3l-3 3M2 12h20M5 9l-3 3l3 3M9 5l3-3l3 3\"/>"
+	},
+	{
+		name: "lucide:shuffle",
+		label: "Shuffle",
+		category: "Arrows",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"m18 14l4 4l-4 4m0-20l4 4l-4 4\"/><path d=\"M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22M2 6h1.972a4 4 0 0 1 3.6 2.2M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45\"/></g>"
+	},
+	{
+		name: "lucide:user",
+		label: "User",
+		category: "People",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/></g>"
+	},
+	{
+		name: "lucide:users",
+		label: "Users",
+		category: "People",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M16 3.128a4 4 0 0 1 0 7.744M22 21v-2a4 4 0 0 0-3-3.87\"/><circle cx=\"9\" cy=\"7\" r=\"4\"/></g>"
+	},
+	{
+		name: "lucide:briefcase",
+		label: "Briefcase",
+		category: "People",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\"/><rect width=\"20\" height=\"14\" x=\"2\" y=\"6\" rx=\"2\"/></g>"
+	},
+	{
+		name: "lucide:building",
+		label: "Building",
+		category: "People",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M12 10h.01M12 14h.01M12 6h.01M16 10h.01M16 14h.01M16 6h.01M8 10h.01M8 14h.01M8 6h.01M9 22v-3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3\"/><rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"/></g>"
+	},
+	{
+		name: "lucide:calendar",
+		label: "Calendar",
+		category: "People",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M8 2v3m8-3v3\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"/><path d=\"M3 9h18\"/></g>"
+	},
+	{
+		name: "lucide:clock",
+		label: "Clock",
+		category: "People",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 6v6l4 2\"/></g>"
+	},
+	{
+		name: "lucide:mail",
+		label: "Mail",
+		category: "People",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"m22 7l-8.991 5.727a2 2 0 0 1-2.009 0L2 7\"/><rect width=\"20\" height=\"16\" x=\"2\" y=\"4\" rx=\"2\"/></g>"
+	},
+	{
+		name: "lucide:message-circle",
+		label: "Message",
+		category: "People",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092a10 10 0 1 0-4.777-4.719\"/>"
+	},
+	{
+		name: "lucide:file",
+		label: "File",
+		category: "Objects",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\"/><path d=\"M14 2v5a1 1 0 0 0 1 1h5\"/></g>"
+	},
+	{
+		name: "lucide:folder",
+		label: "Folder",
+		category: "Objects",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"/>"
+	},
+	{
+		name: "lucide:image",
+		label: "Image",
+		category: "Objects",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15l-3.086-3.086a2 2 0 0 0-2.828 0L6 21\"/></g>"
+	},
+	{
+		name: "lucide:link",
+		label: "Link",
+		category: "Objects",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"/><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"/></g>"
+	},
+	{
+		name: "lucide:paperclip",
+		label: "Paperclip",
+		category: "Objects",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 6l-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551\"/>"
+	},
+	{
+		name: "lucide:pin",
+		label: "Pin",
+		category: "Objects",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 17v5M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4a1 1 0 0 1 1 1z\"/>"
+	},
+	{
+		name: "lucide:map-pin",
+		label: "Map pin",
+		category: "Objects",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0\"/><circle cx=\"12\" cy=\"10\" r=\"3\"/></g>"
+	},
+	{
+		name: "lucide:search",
+		label: "Search",
+		category: "Objects",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"m21 21l-4.34-4.34\"/><circle cx=\"11\" cy=\"11\" r=\"8\"/></g>"
+	},
+	{
+		name: "lucide:settings",
+		label: "Settings",
+		category: "Objects",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M9.671 4.136a2.34 2.34 0 0 1 4.659 0a2.34 2.34 0 0 0 3.319 1.915a2.34 2.34 0 0 1 2.33 4.033a2.34 2.34 0 0 0 0 3.831a2.34 2.34 0 0 1-2.33 4.033a2.34 2.34 0 0 0-3.319 1.915a2.34 2.34 0 0 1-4.659 0a2.34 2.34 0 0 0-3.32-1.915a2.34 2.34 0 0 1-2.33-4.033a2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></g>"
+	},
+	{
+		name: "lucide:trash-2",
+		label: "Trash",
+		category: "Objects",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 11v6m4-6v6m5-11v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"/>"
+	},
+	{
+		name: "lucide:lock",
+		label: "Lock",
+		category: "Objects",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><rect width=\"18\" height=\"11\" x=\"3\" y=\"11\" rx=\"2\" ry=\"2\"/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/></g>"
+	},
+	{
+		name: "lucide:key",
+		label: "Key",
+		category: "Objects",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"m15.5 7.5l2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4m2-2l-9.6 9.6\"/><circle cx=\"7.5\" cy=\"15.5\" r=\"5.5\"/></g>"
+	},
+	{
+		name: "lucide:code",
+		label: "Code",
+		category: "Tech",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m16 18l6-6l-6-6M8 6l-6 6l6 6\"/>"
+	},
+	{
+		name: "lucide:database",
+		label: "Database",
+		category: "Tech",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><ellipse cx=\"12\" cy=\"5\" rx=\"9\" ry=\"3\"/><path d=\"M3 5v14a9 3 0 0 0 18 0V5\"/><path d=\"M3 12a9 3 0 0 0 18 0\"/></g>"
+	},
+	{
+		name: "lucide:server",
+		label: "Server",
+		category: "Tech",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><rect width=\"20\" height=\"8\" x=\"2\" y=\"2\" rx=\"2\" ry=\"2\"/><rect width=\"20\" height=\"8\" x=\"2\" y=\"14\" rx=\"2\" ry=\"2\"/><path d=\"M6 6h.01M6 18h.01\"/></g>"
+	},
+	{
+		name: "lucide:cloud",
+		label: "Cloud",
+		category: "Tech",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9\"/>"
+	},
+	{
+		name: "lucide:git-branch",
+		label: "Branch",
+		category: "Tech",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M15 6a9 9 0 0 0-9 9V3\"/><circle cx=\"18\" cy=\"6\" r=\"3\"/><circle cx=\"6\" cy=\"18\" r=\"3\"/></g>"
+	},
+	{
+		name: "lucide:terminal",
+		label: "Terminal",
+		category: "Tech",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 19h8M4 17l6-6l-6-6\"/>"
+	},
+	{
+		name: "lucide:cpu",
+		label: "CPU",
+		category: "Tech",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M12 20v2m0-20v2m5 16v2m0-20v2M2 12h2m-2 5h2M2 7h2m16 5h2m-2 5h2M20 7h2M7 20v2M7 2v2\"/><rect width=\"16\" height=\"16\" x=\"4\" y=\"4\" rx=\"2\"/><rect width=\"8\" height=\"8\" x=\"8\" y=\"8\" rx=\"1\"/></g>"
+	},
+	{
+		name: "lucide:bug",
+		label: "Bug",
+		category: "Tech",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M12 20v-9m2-4a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4zm.12-3.12L16 2\"/><path d=\"M21 21a4 4 0 0 0-3.81-4M21 5a4 4 0 0 1-3.55 3.97M22 13h-4M3 21a4 4 0 0 1 3.81-4M3 5a4 4 0 0 0 3.55 3.97M6 13H2M8 2l1.88 1.88M9 7.13V6a3 3 0 1 1 6 0v1.13\"/></g>"
+	},
+	{
+		name: "lucide:lightbulb",
+		label: "Idea",
+		category: "Ideas",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 14c.2-1 .7-1.7 1.5-2.5c1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5c.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4\"/>"
+	},
+	{
+		name: "lucide:zap",
+		label: "Zap",
+		category: "Ideas",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15.914 4a1.5 1.5 0 0 0-2.474-1.561l-9 9A1.5 1.5 0 0 0 5.5 14h4.002a.5.5 0 0 1 .471.666L8.086 20a1.5 1.5 0 0 0 2.475 1.56l9-9A1.5 1.5 0 0 0 18.5 10h-3.997a.5.5 0 0 1-.472-.667z\"/>"
+	},
+	{
+		name: "lucide:target",
+		label: "Target",
+		category: "Ideas",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><circle cx=\"12\" cy=\"12\" r=\"6\"/><circle cx=\"12\" cy=\"12\" r=\"2\"/></g>"
+	},
+	{
+		name: "lucide:rocket",
+		label: "Rocket",
+		category: "Ideas",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09\"/><path d=\"M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z\"/><path d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05\"/></g>"
+	},
+	{
+		name: "lucide:trophy",
+		label: "Trophy",
+		category: "Ideas",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M10 14.66V17a1 1 0 0 1-1 1a2 2 0 0 0-2 2v2m7-7.34V17a1 1 0 0 0 1 1a2 2 0 0 1 2 2v2m.916-12H19.5A2.5 2.5 0 0 0 22 7.5V5a1 1 0 0 0-1-1h-3M4 22h16\"/><path d=\"M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z\"/><path d=\"M6.084 10H4.5A2.5 2.5 0 0 1 2 7.5V5a1 1 0 0 1 1-1h3\"/></g>"
+	},
+	{
+		name: "lucide:gift",
+		label: "Gift",
+		category: "Ideas",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M12 7v14m8-10v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8m3.5-4a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5a1 1 0 0 1 0 5\"/><rect width=\"18\" height=\"4\" x=\"3\" y=\"7\" rx=\"1\"/></g>"
+	},
+	{
+		name: "lucide:coffee",
+		label: "Coffee",
+		category: "Ideas",
+		body: "<path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 2v2m4-2v2m2 4a1 1 0 0 1 1 1v8a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1h14a4 4 0 1 1 0 8h-1M6 2v2\"/>"
+	},
+	{
+		name: "lucide:smile",
+		label: "Smile",
+		category: "Ideas",
+		body: "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 14s1.5 2 4 2s4-2 4-2M9 9h.01M15 9h.01\"/></g>"
+	}
+];
+//#endregion
+//#region src/core/shapes/emoji.ts
+var EMOJI_LIBRARY = [
+	{
+		name: "emoji:grinning",
+		label: "Grinning face",
+		category: "Smileys",
+		char: "😀"
+	},
+	{
+		name: "emoji:joy",
+		label: "Tears of joy",
+		category: "Smileys",
+		char: "😂"
+	},
+	{
+		name: "emoji:smiling",
+		label: "Smiling face",
+		category: "Smileys",
+		char: "😊"
+	},
+	{
+		name: "emoji:heart-eyes",
+		label: "Heart eyes",
+		category: "Smileys",
+		char: "😍"
+	},
+	{
+		name: "emoji:thinking",
+		label: "Thinking face",
+		category: "Smileys",
+		char: "🤔"
+	},
+	{
+		name: "emoji:sunglasses",
+		label: "Sunglasses",
+		category: "Smileys",
+		char: "😎"
+	},
+	{
+		name: "emoji:crying",
+		label: "Crying face",
+		category: "Smileys",
+		char: "😢"
+	},
+	{
+		name: "emoji:angry",
+		label: "Angry face",
+		category: "Smileys",
+		char: "😡"
+	},
+	{
+		name: "emoji:sleeping",
+		label: "Sleeping face",
+		category: "Smileys",
+		char: "😴"
+	},
+	{
+		name: "emoji:mind-blown",
+		label: "Mind blown",
+		category: "Smileys",
+		char: "🤯"
+	},
+	{
+		name: "emoji:grimacing",
+		label: "Grimacing face",
+		category: "Smileys",
+		char: "😬"
+	},
+	{
+		name: "emoji:partying",
+		label: "Partying face",
+		category: "Smileys",
+		char: "🥳"
+	},
+	{
+		name: "emoji:thumbs-up",
+		label: "Thumbs up emoji",
+		category: "Gestures",
+		char: "👍"
+	},
+	{
+		name: "emoji:thumbs-down",
+		label: "Thumbs down emoji",
+		category: "Gestures",
+		char: "👎"
+	},
+	{
+		name: "emoji:clap",
+		label: "Clapping hands",
+		category: "Gestures",
+		char: "👏"
+	},
+	{
+		name: "emoji:raised-hands",
+		label: "Raised hands",
+		category: "Gestures",
+		char: "🙌"
+	},
+	{
+		name: "emoji:folded-hands",
+		label: "Folded hands",
+		category: "Gestures",
+		char: "🙏"
+	},
+	{
+		name: "emoji:eyes",
+		label: "Eyes",
+		category: "Gestures",
+		char: "👀"
+	},
+	{
+		name: "emoji:muscle",
+		label: "Flexed biceps",
+		category: "Gestures",
+		char: "💪"
+	},
+	{
+		name: "emoji:wave",
+		label: "Waving hand",
+		category: "Gestures",
+		char: "👋"
+	},
+	{
+		name: "emoji:red-heart",
+		label: "Red heart",
+		category: "Symbols",
+		char: "❤️"
+	},
+	{
+		name: "emoji:fire",
+		label: "Flame",
+		category: "Symbols",
+		char: "🔥"
+	},
+	{
+		name: "emoji:star",
+		label: "Medium star",
+		category: "Symbols",
+		char: "⭐"
+	},
+	{
+		name: "emoji:check",
+		label: "Check mark button",
+		category: "Symbols",
+		char: "✅"
+	},
+	{
+		name: "emoji:cross",
+		label: "Cross mark",
+		category: "Symbols",
+		char: "❌"
+	},
+	{
+		name: "emoji:warning",
+		label: "Warning sign",
+		category: "Symbols",
+		char: "⚠️"
+	},
+	{
+		name: "emoji:question",
+		label: "Red question mark",
+		category: "Symbols",
+		char: "❓"
+	},
+	{
+		name: "emoji:hundred",
+		label: "Hundred points",
+		category: "Symbols",
+		char: "💯"
+	},
+	{
+		name: "emoji:light-bulb",
+		label: "Light bulb",
+		category: "Symbols",
+		char: "💡"
+	},
+	{
+		name: "emoji:bullseye",
+		label: "Bullseye",
+		category: "Symbols",
+		char: "🎯"
+	},
+	{
+		name: "emoji:party-popper",
+		label: "Party popper",
+		category: "Objects",
+		char: "🎉"
+	},
+	{
+		name: "emoji:rocket",
+		label: "Rocket emoji",
+		category: "Objects",
+		char: "🚀"
+	},
+	{
+		name: "emoji:trophy",
+		label: "Trophy emoji",
+		category: "Objects",
+		char: "🏆"
+	},
+	{
+		name: "emoji:pushpin",
+		label: "Pushpin",
+		category: "Objects",
+		char: "📌"
+	},
+	{
+		name: "emoji:memo",
+		label: "Memo",
+		category: "Objects",
+		char: "📝"
+	},
+	{
+		name: "emoji:calendar",
+		label: "Tear-off calendar",
+		category: "Objects",
+		char: "📅"
+	},
+	{
+		name: "emoji:alarm-clock",
+		label: "Alarm clock",
+		category: "Objects",
+		char: "⏰"
+	},
+	{
+		name: "emoji:speech-balloon",
+		label: "Speech balloon",
+		category: "Objects",
+		char: "💬"
+	}
+];
+var BY_NAME$1 = new Map(EMOJI_LIBRARY.map((emoji) => [emoji.name, emoji]));
+function isEmojiName(value) {
+	return typeof value === "string" && BY_NAME$1.has(value);
+}
+function emojiDefinition(name) {
+	return BY_NAME$1.get(name);
+}
+var EMOJI_FONTS = `"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif`;
+/** An emoji as a standalone SVG data URL, sized to rasterise sharply (see icons.ts). */
+function emojiDataUrl(name) {
+	const emoji = BY_NAME$1.get(name);
+	if (!emoji) throw new Error(`Unknown emoji: ${name}`);
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 64 64"><text x="32" y="34" text-anchor="middle" dominant-baseline="central" font-size="52" font-family='${EMOJI_FONTS}'>${emoji.char}</text></svg>`;
+	return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+//#endregion
+//#region src/core/shapes/icons.ts
+/**
+* Rasterised size of an icon's SVG. The library's own art is a 24px grid, far
+* too small to use as a texture directly — the browser rasterises a data-URL
+* SVG at its declared size, so declare one that still looks sharp when a
+* sticker is zoomed well past the size it was placed at.
+*/
+var ICON_RASTER_SIZE = 256;
+var BY_NAME = new Map(ICON_LIBRARY.map((icon) => [icon.name, icon]));
+function isIconName(value) {
+	return typeof value === "string" && BY_NAME.has(value);
+}
+function iconDefinition(name) {
+	return BY_NAME.get(name);
+}
+/** The vendored icons grouped for a picker, in the order they were vendored. */
+function iconCategories() {
+	const groups = [];
+	for (const icon of ICON_LIBRARY) {
+		const existing = groups.find((group) => group.category === icon.category);
+		if (existing) existing.icons.push(icon);
+		else groups.push({
+			category: icon.category,
+			icons: [icon]
+		});
+	}
+	return groups;
+}
+/**
+* An icon as a standalone SVG data URL, drawn in `color`.
+*
+* The library's art strokes in `currentColor`, which has no meaning once the
+* markup is detached into a data URL — an `<img>`/texture has no inherited
+* colour to resolve it against — so the colour is substituted in rather than
+* inherited.
+*/
+function iconDataUrl(name, color) {
+	const icon = BY_NAME.get(name);
+	if (!icon) throw new Error(`Unknown icon: ${name}`);
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${ICON_RASTER_SIZE}" height="${ICON_RASTER_SIZE}" viewBox="0 0 24 24">${icon.body.replaceAll("currentColor", color)}</svg>`;
+	return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+function isStickerKind(value) {
+	return isStampKind(value) || isEmojiName(value) || isIconName(value);
+}
+/** Human-readable name for any sticker kind — what a placed sticker is called and searched by. */
+function stickerLabel(kind) {
+	if (isStampKind(kind)) return STAMPS.find((stamp) => stamp.kind === kind).label;
+	return emojiDefinition(kind)?.label ?? BY_NAME.get(kind)?.label ?? kind;
+}
+/**
+* The image `src` for whichever sticker kind is selected. Stamp-pad stamps
+* and emoji carry their own colours, so only icons take the Host's colour.
+*/
+function stickerDataUrl(kind, color) {
+	if (isStampKind(kind)) return stampDataUrl(kind);
+	if (isEmojiName(kind)) return emojiDataUrl(kind);
+	return iconDataUrl(kind, color);
+}
+//#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`), used
+* as-is with no extra sign flip: board space is y-up (see `shapeTool.ts`'s
+* commitBoxShape), and this formula's cusp already lands at its most
+* negative y (bottom) with the two lobes above it, right side up. Negating
+* y — as an earlier version of this function did — puts the cusp at the
+* top instead, rendering an upside-down heart.
+*/
+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 = {
 	x: -.25,
@@ -1896,12 +4676,19 @@ var LIGHT = {
 var MARGIN = 4;
 var NOTE_FONT_RATIO = 44 / 512;
 var NOTE_PAD_RATIO = 40 / 512;
+/** Matches the theme system's light-preset `boardSurface` default (theme.ts) — kept in sync manually, since core-internal stays decoupled from the theme layer. */
+var DEFAULT_BACKGROUND_COLOR = "#f5f5f3";
 /**
 * `registry` is optional and only enables rendering Custom objects through
 * their own `describe()` — without it (or for an object whose extension
 * isn't in it), Custom objects still export via the standard fallback
 * placeholder (`fallback.bounds`/`label`), never silently dropped.
 *
+* `backgroundColor` should be the Host's actual resolved `boardTheme.surface`
+* so an export matches what was on screen; defaults to the theme system's
+* own light-preset default when the caller doesn't have one on hand. The
+* board's reference grid, if any, is a screen-only aid and never exported.
+*
 * `resolvedAssets` (ticket #23) maps an Asset reference to an already-
 * resolved `data:` URI — see `assetExport.ts`'s `exportDocumentSVGWithAssets`,
 * which is the only intended caller that ever passes one. Without it, every
@@ -1909,22 +4696,36 @@ var NOTE_PAD_RATIO = 40 / 512;
 * placeholder instead of guessing at a URL; a legacy `src`-backed image is
 * unaffected either way.
 */
-function documentToSVG(doc, now = 0, registry, resolvedAssets) {
+function documentToSVG(doc, now = 0, registry, backgroundColor = DEFAULT_BACKGROUND_COLOR, resolvedAssets) {
 	const notes = doc.notes ?? [];
 	const texts = doc.textBlocks ?? [];
 	const tables = doc.tables ?? [];
 	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="${BOARD_COLOR}"/>`,
+		`<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),
@@ -1943,7 +4744,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);
 }
@@ -1967,17 +4768,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;
@@ -2008,7 +4809,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>`
@@ -2021,7 +4822,7 @@ function strokeToPaths(stroke) {
 		y,
 		pressure,
 		...erase > 0 ? { erase } : {}
-	})), stroke.baseWidth);
+	})), stroke.baseWidth, stroke.tool !== "shape");
 	const transform = stroke.matrix ? ` transform="matrix(${fmt(stroke.matrix[0])} ${fmt(-stroke.matrix[1])} ${fmt(-stroke.matrix[2])} ${fmt(stroke.matrix[3])} ${fmt(stroke.matrix[4])} ${fmt(-stroke.matrix[5])})"` : "";
 	const baseOpacity = stroke.tool === "highlighter" ? .4 : 1;
 	const paths = [];
@@ -2032,7 +4833,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;
 }
@@ -2054,14 +4855,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;
@@ -2071,7 +4872,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("");
@@ -2102,8 +4903,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"/>`);
@@ -2131,14 +4932,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;
@@ -2146,7 +4947,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"/>`,
@@ -2159,12 +4960,100 @@ 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);
+	if (arrow.routing) {
+		const paths = arrowPolylines(arrow).map((points) => `<polyline points="${points.map((p) => `${fmt(p.x)},${fmt(-p.y)}`).join(" ")}" fill="none" stroke="${stroke}" stroke-width="${fmt(arrow.strokeWidth ?? SHAPE_DEFAULT_STROKE_WIDTH)}" stroke-linejoin="round"/>`);
+		return `<g data-id="${escapeXML(arrow.id)}"${opacityAttrOf(arrow.opacity)}>${paths.join("")}</g>`;
+	}
+	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 = [...arrowSegments(arrow).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;
@@ -2226,6 +5115,35 @@ 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) for (const point of [
+		arrow.start,
+		arrow.end,
+		...arrowSegments(arrow).flat()
+	]) grow(point.x, -point.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,
@@ -2250,4 +5168,4 @@ function fmt(n) {
 var SDK_PACKAGE_NAME = "@scrawl-board/board";
 var SDK_DEVELOPMENT_VERSION = "0.0.0-development";
 //#endregion
-export { AddImageCommand, AddNoteCommand, AddStrokesCommand, AddTableCommand, AddTextCommand, AddTimerCommand, BEACON_INSET, BOARD_COLOR, 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, 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, avgScale, canUnlockItem, changeToOps, cloneImage, cloneNote, cloneStroke, cloneTable, cloneText, cloneTimer, documentId, documentToSVG, formatTimer, invert, 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, EMOJI_LIBRARY, END_TAPER, ERASE_THRESHOLD, EraseCommand, FOG_COLOR, HIGHLIGHT_COLORS, History, ICON_LIBRARY, 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, emojiDataUrl, emojiDefinition, formatTimer, iconCategories, iconDataUrl, iconDefinition, invert, isAssetRef, isEmojiName, isIconName, isIdentity, isStampKind, isStickerKind, loadDocumentBytes, measureTable, measureTextBlock, migrateDocument, mul, pauseTimer, placePresenceBeacon, ribbonEdges, rotationAbout, scalingAbout, searchBoard, serializeDocument, serializeLock, serializeStroke, setTimerDuration, stampDataUrl, startTimer, stickerDataUrl, stickerLabel, strokeId, timerExpired, timerRemaining, toggleTimer, translation };