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

package/dist/core.js

@@ -48,6 +48,37 @@ function strokeId(value) {
 	return value;
 }
 //#endregion
+//#region src/core/document/migrations/registry.ts
+/** Schema versions this build can load. An unrecognized version fails safely (`DOCUMENT_VERSION_UNSUPPORTED`) rather than being silently treated as current. */
+var SUPPORTED_SCHEMA_VERSIONS = /* @__PURE__ */ new Set([0, 1]);
+function isSupportedSchemaVersion(version) {
+	return typeof version === "number" && SUPPORTED_SCHEMA_VERSIONS.has(version);
+}
+/**
+* Document collection fields introduced after schemaVersion 1 first
+* shipped real documents. A document stored before a field's introduction
+* can never retroactively gain it, so requiring it at load would fail
+* every pre-existing document — these stay optional even at the current
+* version. New entries only ever get added here, never removed (an old
+* stored document's absence of a since-introduced field must keep loading
+* for as long as that document might still exist).
+*/
+var FIELDS_OPTIONAL_AT_CURRENT_VERSION = /* @__PURE__ */ new Set([
+	"customObjects",
+	"rectangles",
+	"ellipses",
+	"groups",
+	"lines",
+	"arrows",
+	"polygons",
+	"stars",
+	"hearts"
+]);
+/** Whether `field` must be present on a document already at the current schema version (never required on an older, migrating-forward document). */
+function isFieldRequiredAtCurrentVersion(field) {
+	return !FIELDS_OPTIONAL_AT_CURRENT_VERSION.has(field);
+}
+//#endregion
 //#region src/core/document/document-schema.ts
 var CURRENT_DOCUMENT_SCHEMA_VERSION = 1;
 var DocumentRecoveryError = class extends Error {
@@ -76,7 +107,7 @@ function loadDocumentBytes(originalBytes) {
 function migrateDocument(raw) {
 	if (!isRecord(raw)) return failure("DOCUMENT_VALIDATION_FAILED", "Document must be an object");
 	const version = raw.schemaVersion ?? 0;
-	if (version !== 0 && version !== 1) return failure("DOCUMENT_VERSION_UNSUPPORTED", `Document schema version ${String(version)} is unsupported`, void 0, "schemaVersion");
+	if (!isSupportedSchemaVersion(version)) return failure("DOCUMENT_VERSION_UNSUPPORTED", `Document schema version ${String(version)} is unsupported`, void 0, "schemaVersion");
 	if (!isJsonValue(raw)) return failure("DOCUMENT_VALIDATION_FAILED", "Document must contain JSON values only");
 	const strokes = validateStrokes(raw.strokes);
 	if (strokes instanceof DocumentRecoveryError) return {
@@ -89,15 +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),
-		rectangles: validateCollection(raw, "rectangles", version, validateRectangle, false),
-		ellipses: validateCollection(raw, "ellipses", version, validateEllipse, false),
-		groups: validateCollection(raw, "groups", version, validateGroup, false),
-		lines: validateCollection(raw, "lines", version, validateLine, false),
-		arrows: validateCollection(raw, "arrows", version, validateArrow, false),
-		polygons: validateCollection(raw, "polygons", version, validatePolygon, false),
-		stars: validateCollection(raw, "stars", version, validateStar, false),
-		hearts: validateCollection(raw, "hearts", version, validateHeart, false)
+		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,
@@ -189,8 +220,19 @@ function serializeDocument(document) {
 	if (!result.ok || result.migratedFrom !== 1) throw result.ok ? new DocumentRecoveryError("DOCUMENT_VALIDATION_FAILED", "Saving requires the current Document schema") : result.error;
 	return JSON.stringify(result.document);
 }
-function validateCollection(raw, name, version, validator, requiredAtCurrentVersion = true) {
-	if (requiredAtCurrentVersion && version === 1 && !(name in raw)) return validation(`${name} is required`, name);
+/**
+* A Document's serialized size in bytes (Phase 5) — UTF-8, not UTF-16
+* `string.length`, since a Document with non-ASCII note/text content (most
+* of them, eventually) would otherwise under-report. Useful for a Host
+* deciding when to warn about an unusually large board, or for logging/
+* telemetry around save size — not consulted by anything inside this
+* package itself, which has no size limit of its own.
+*/
+function documentSize(document) {
+	return new TextEncoder().encode(JSON.stringify(document)).length;
+}
+function validateCollection(raw, name, version, validator) {
+	if (isFieldRequiredAtCurrentVersion(name) && version === 1 && !(name in raw)) return validation(`${name} is required`, name);
 	const value = raw[name] ?? [];
 	if (!Array.isArray(value)) return validation(`${name} must be an array`, name);
 	for (let index = 0; index < value.length; index += 1) if (!isRecord(value[index]) || !validator(value[index])) return validation(`invalid ${name} entry`, `${name}[${index}]`);
@@ -202,11 +244,20 @@ function validateStrokes(raw) {
 	for (let index = 0; index < raw.length; index += 1) {
 		const value = raw[index];
 		const path = `strokes[${index}]`;
-		if (!isRecord(value) || !nonempty(value.id) || !nonempty(value.color) || !positive(value.baseWidth) || !optionalEnum(value.tool, [
+		if (!isRecord(value)) return validation("stroke must be an object", path);
+		if (!nonempty(value.id)) return validation("stroke.id must be a non-empty string", `${path}.id`);
+		if (!nonempty(value.color)) return validation("stroke.color must be a non-empty string", `${path}.color`);
+		if (!positive(value.baseWidth)) return validation("stroke.baseWidth must be a positive number", `${path}.baseWidth`);
+		if (!optionalEnum(value.tool, [
 			"marker",
 			"highlighter",
 			"shape"
-		]) || !validLock(value) || !optionalString(value.clusterId) || !validMatrix(value.matrix) || !Array.isArray(value.points)) return validation("invalid stroke", path);
+		])) return validation("stroke.tool must be \"marker\", \"highlighter\", or \"shape\"", `${path}.tool`);
+		if (!validLock(value)) return validation("invalid stroke.lock", `${path}.lock`);
+		if (!validHidden(value)) return validation("invalid stroke.hidden", `${path}.hidden`);
+		if (!optionalString(value.clusterId)) return validation("stroke.clusterId must be a string", `${path}.clusterId`);
+		if (!validMatrix(value.matrix)) return validation("invalid stroke.matrix", `${path}.matrix`);
+		if (!Array.isArray(value.points)) return validation("stroke.points must be an array", `${path}.points`);
 		const points = [];
 		for (let pointIndex = 0; pointIndex < value.points.length; pointIndex += 1) {
 			const point = normalizePoint(value.points[pointIndex]);
@@ -232,47 +283,47 @@ 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) && validateShapeStyle(v) && (v.rotation === void 0 || finite(v.rotation)) && (v.cornerRadius === void 0 || finite(v.cornerRadius) && v.cornerRadius >= 0);
+	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) && validateShapeStyle(v) && (v.rotation === void 0 || finite(v.rotation));
+	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) && validateShapeStyle(v) && (v.rotation === void 0 || finite(v.rotation)) && (v.sides === 3 || v.sides === 4 || v.sides === 5 || v.sides === 6 || v.sides === 8);
+	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) && validateShapeStyle(v) && (v.rotation === void 0 || finite(v.rotation)) && finite(v.points) && v.points >= 3 && finite(v.innerRadiusRatio) && v.innerRadiusRatio > 0 && v.innerRadiusRatio < 1;
+	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) && validateShapeStyle(v) && (v.rotation === void 0 || finite(v.rotation));
+	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) && validateShapeStyle(v);
+	return nonempty(v.id) && validPoint(v.start) && validPoint(v.end) && validLock(v) && validHidden(v) && validateShapeStyle(v);
 }
 function validateArrow(v) {
-	return nonempty(v.id) && validPoint(v.start) && validPoint(v.end) && validLock(v) && validateShapeStyle(v) && (v.head === void 0 || v.head === "triangle" || v.head === "none");
+	return nonempty(v.id) && validPoint(v.start) && validPoint(v.end) && validLock(v) && validHidden(v) && validateShapeStyle(v) && (v.head === void 0 || v.head === "triangle" || v.head === "none");
 }
 function validateGroup(v) {
-	return nonempty(v.id) && Array.isArray(v.children) && v.children.every((c) => nonempty(c)) && validLock(v);
+	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 [];
@@ -280,7 +331,7 @@ function validateObjectOrder(v) {
 	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);
@@ -299,6 +350,9 @@ function basePosition(v) {
 function validLock(v) {
 	return (v.locked === void 0 || typeof v.locked === "boolean") && optionalString(v.lockedBy) && optionalString(v.lockedByName);
 }
+function validHidden(v) {
+	return v.hidden === void 0 || typeof v.hidden === "boolean";
+}
 function validMatrix(v) {
 	return v === void 0 || Array.isArray(v) && v.length === 6 && v.every(finite);
 }
@@ -863,8 +917,51 @@ function serializeLock(item) {
 //#endregion
 //#region src/core/shapes/shapeObjects.ts
 var SHAPE_MIN_SIZE = .5;
-var SHAPE_DEFAULT_STROKE = "#1C1C1E";
-var SHAPE_DEFAULT_STROKE_WIDTH = .12;
+/**
+* Centralized shape style defaults (Phase 8) — one object a Host can read
+* to know (or, by not relying on the standalone constants below, override
+* via its own UI state) what a newly drawn Rectangle/Ellipse/Line/Arrow/
+* Polygon/Star/Heart starts with when the user hasn't picked a stroke/width
+* yet. `shapeTool.ts` (commit-time), `renderer/shapes/lines.ts` (render-time
+* fallback for an object missing these fields), and
+* `persistence/serialization/svg.ts` (export-time fallback) all read from
+* here — the two standalone constants below are kept for source
+* compatibility and simply mirror this object's values, not a second
+* source of truth.
+*/
+var SHAPE_STYLE_DEFAULTS = {
+	stroke: "#1C1C1E",
+	strokeWidth: .12
+};
+var SHAPE_DEFAULT_STROKE = SHAPE_STYLE_DEFAULTS.stroke;
+var SHAPE_DEFAULT_STROKE_WIDTH = SHAPE_STYLE_DEFAULTS.strokeWidth;
+/**
+* Normalizes a box-shaped object's `x`/`y`/`width`/`height` to non-negative
+* dimensions in place of whatever an arbitrary caller supplied (Phase 8) —
+* the interactive drag tools (`shapeTool.ts`) already produce
+* always-non-negative geometry by scanning min/max points before ever
+* constructing a shape, but a raw `content.add`/`content.update` call (Host
+* code, a Custom tool, or a remote collaboration Op) has no such guarantee.
+* `BoardDocument` calls this at every entry point so "dragging from
+* bottom-right toward top-left" and "a negative `width`/`height` patch"
+* produce the same valid geometry regardless of source. A no-op (returns
+* the same reference) when both dimensions are already non-negative, so
+* this never allocates on the common path.
+*/
+function normalizeBoxGeometry(box) {
+	if (box.width >= 0 && box.height >= 0) return box;
+	const left = Math.min(box.x, box.x + box.width);
+	const right = Math.max(box.x, box.x + box.width);
+	const top = Math.max(box.y, box.y - box.height);
+	const bottom = Math.min(box.y, box.y - box.height);
+	return {
+		...box,
+		x: left,
+		y: top,
+		width: right - left,
+		height: top - bottom
+	};
+}
 function cloneRectangle(rect) {
 	return { ...rect };
 }
@@ -1233,31 +1330,33 @@ var BoardDocument = class {
 		const i = this.orderIndex.get(id);
 		if (i === void 0 || i >= this.objectOrder.length - 1) return;
 		[this.objectOrder[i], this.objectOrder[i + 1]] = [this.objectOrder[i + 1], this.objectOrder[i]];
-		this.reindexOrder();
-		this.emit({ orderChanged: [...this.objectOrder] });
+		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.reindexOrder();
-		this.emit({ orderChanged: [...this.objectOrder] });
+		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);
-		this.reindexOrder();
-		this.emit({ orderChanged: [...this.objectOrder] });
+		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);
-		this.reindexOrder();
-		this.emit({ orderChanged: [...this.objectOrder] });
+		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) {
@@ -1347,6 +1446,18 @@ var BoardDocument = class {
 	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);
 		return () => this.listeners.delete(listener);
@@ -1501,8 +1612,9 @@ var BoardDocument = class {
 		return this.rectangles.values();
 	}
 	addRectangles(rectangles) {
-		for (const rect of rectangles) this.rectangles.set(rect.id, rect);
-		this.emit({ rectanglesAdded: 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 = [];
@@ -1511,8 +1623,9 @@ var BoardDocument = class {
 	}
 	/** Replace a rectangle's contents (move, resize, restyle) under the same id. */
 	setRectangle(rect) {
-		this.rectangles.set(rect.id, rect);
-		this.emit({ rectanglesUpdated: [rect] });
+		const normalized = normalizeBoxGeometry(rect);
+		this.rectangles.set(normalized.id, normalized);
+		this.emit({ rectanglesUpdated: [normalized] });
 	}
 	getEllipse(id) {
 		return this.ellipses.get(id);
@@ -1521,8 +1634,9 @@ var BoardDocument = class {
 		return this.ellipses.values();
 	}
 	addEllipses(ellipses) {
-		for (const ellipse of ellipses) this.ellipses.set(ellipse.id, ellipse);
-		this.emit({ ellipsesAdded: 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 = [];
@@ -1531,8 +1645,9 @@ var BoardDocument = class {
 	}
 	/** Replace an ellipse's contents (move, resize, restyle) under the same id. */
 	setEllipse(ellipse) {
-		this.ellipses.set(ellipse.id, ellipse);
-		this.emit({ ellipsesUpdated: [ellipse] });
+		const normalized = normalizeBoxGeometry(ellipse);
+		this.ellipses.set(normalized.id, normalized);
+		this.emit({ ellipsesUpdated: [normalized] });
 	}
 	getGroup(id) {
 		return this.groups.get(id);
@@ -1601,8 +1716,9 @@ var BoardDocument = class {
 		return this.polygons.values();
 	}
 	addPolygons(polygons) {
-		for (const polygon of polygons) this.polygons.set(polygon.id, polygon);
-		this.emit({ polygonsAdded: 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 = [];
@@ -1611,8 +1727,9 @@ var BoardDocument = class {
 	}
 	/** Replace a polygon's contents (move, resize, rotate, restyle) under the same id. */
 	setPolygon(polygon) {
-		this.polygons.set(polygon.id, polygon);
-		this.emit({ polygonsUpdated: [polygon] });
+		const normalized = normalizeBoxGeometry(polygon);
+		this.polygons.set(normalized.id, normalized);
+		this.emit({ polygonsUpdated: [normalized] });
 	}
 	getStar(id) {
 		return this.stars.get(id);
@@ -1621,8 +1738,9 @@ var BoardDocument = class {
 		return this.stars.values();
 	}
 	addStars(stars) {
-		for (const star of stars) this.stars.set(star.id, star);
-		this.emit({ starsAdded: 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 = [];
@@ -1631,8 +1749,9 @@ var BoardDocument = class {
 	}
 	/** Replace a star's contents (move, resize, rotate, restyle) under the same id. */
 	setStar(star) {
-		this.stars.set(star.id, star);
-		this.emit({ starsUpdated: [star] });
+		const normalized = normalizeBoxGeometry(star);
+		this.stars.set(normalized.id, normalized);
+		this.emit({ starsUpdated: [normalized] });
 	}
 	getHeart(id) {
 		return this.hearts.get(id);
@@ -1641,8 +1760,9 @@ var BoardDocument = class {
 		return this.hearts.values();
 	}
 	addHearts(hearts) {
-		for (const heart of hearts) this.hearts.set(heart.id, heart);
-		this.emit({ heartsAdded: 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 = [];
@@ -1651,8 +1771,9 @@ var BoardDocument = class {
 	}
 	/** Replace a heart's contents (move, resize, rotate, restyle) under the same id. */
 	setHeart(heart) {
-		this.hearts.set(heart.id, heart);
-		this.emit({ heartsUpdated: [heart] });
+		const normalized = normalizeBoxGeometry(heart);
+		this.hearts.set(normalized.id, normalized);
+		this.emit({ heartsUpdated: [normalized] });
 	}
 	setStrokeLocked(id, locked, by) {
 		const stroke = this.strokes.get(id);
@@ -2117,7 +2238,17 @@ var BoardDocument = class {
 	static deserializeTables(data) {
 		return (data.tables ?? []).map(cloneTable);
 	}
-	static deserializeStrokes(data) {
+	/**
+	* `onSkip` (Phase 9) replaces an unconditional `console.error` — `core`
+	* must never do raw console I/O (no dev-gate, no way for a Host to
+	* suppress or redirect it), so a skipped stroke is now reported only if
+	* the caller asks for it, via whatever diagnostic channel it already
+	* has (e.g. `controller-internal.ts` routes this into the same typed
+	* `"error"` event every other diagnostic already uses). Silent by
+	* default, matching how every other `deserialize*` method here already
+	* behaves (no diagnostics at all).
+	*/
+	static deserializeStrokes(data, onSkip) {
 		const strokes = [];
 		for (const s of data.strokes) try {
 			strokes.push({
@@ -2131,7 +2262,7 @@ 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;
 	}
@@ -2145,46 +2276,51 @@ var BoardDocument = class {
 	* ids already tracked (idempotent by construction: `orderIndex.has` gates
 	* every append).
 	*
-	* `orderChanged` is populated here whenever `objectOrder` actually
-	* changed — not just for an explicit reorder, but for any add/remove too.
-	* A pure append never shifts an existing id's rank (new ids land at the
-	* tail), but a removal splices a middle id out, which *does* shift every
-	* id after it down by one — a renderer that only resynced Z on an
-	* explicit reorder would silently render those with a stale rank until
-	* something else happened to touch them, eventually colliding with a
-	* freshly-added object's freshly-computed Z. Firing this on every
-	* order-touching change (not just removes) is simpler than special-
-	* casing which kind of change actually needs it, at the cost of a
-	* redundant same-value resync on a pure append.
+	* `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) {
-		let orderTouched = false;
+		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)) {
-				this.objectOrder.push(object.id);
-				orderTouched = true;
-			}
+			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) {
-				const index = this.objectOrder.indexOf(id);
-				if (index !== -1) {
-					this.objectOrder.splice(index, 1);
-					orderTouched = true;
-				}
-			}
+			for (const id of ids) if (this.orderIndex.has(id)) removedIds.add(id);
 		}
-		if (orderTouched) {
-			this.reindexOrder();
-			change = {
-				...change,
-				orderChanged: [...this.objectOrder]
-			};
+		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
@@ -3695,7 +3831,7 @@ function documentToSVG(doc, now = 0, registry, backgroundColor = DEFAULT_BACKGRO
 	const highlights = doc.strokes.filter((s) => s.tool === "highlighter");
 	const ink = doc.strokes.filter((s) => s.tool !== "highlighter");
 	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${view}">\n<defs>\n${defs}\n</defs>\n${[
-		`<rect x="${fmt(bounds.minX)}" y="${fmt(bounds.minY)}" width="${fmt(bounds.width)}" height="${fmt(bounds.height)}" fill="${backgroundColor}"/>`,
+		`<rect x="${fmt(bounds.minX)}" y="${fmt(bounds.minY)}" width="${fmt(bounds.width)}" height="${fmt(bounds.height)}" fill="${escapeXML(backgroundColor)}"/>`,
 		...images.map((image) => imageToElement(image, resolvedAssets)),
 		...tables.map(tableToGroup),
 		...rectangles.map(rectangleToElement),
@@ -3723,7 +3859,7 @@ function customObjectToGroup(object, registry, resolvedAssets) {
 	const definition = registry?.objectType(object.type);
 	if (definition) try {
 		const scene = definition.describe(object, { selected: false });
-		return `<g data-id="${object.id}">${sceneNodeToSVG(scene, object.transform, resolvedAssets)}</g>`;
+		return `<g data-id="${escapeXML(object.id)}">${sceneNodeToSVG(scene, object.transform, resolvedAssets)}</g>`;
 	} catch {}
 	return fallbackToGroup(object);
 }
@@ -3747,17 +3883,17 @@ function sceneNodeToSVG(node, parent, resolvedAssets) {
 		case "rect": {
 			const svgY = -node.y - node.height;
 			const rx = node.cornerRadius ? ` rx="${fmt(node.cornerRadius)}"` : "";
-			const stroke = node.stroke ? ` stroke="${node.stroke}" stroke-width="${fmt(node.strokeWidth ?? .1)}"` : "";
-			return `<rect x="${fmt(node.x)}" y="${fmt(svgY)}" width="${fmt(node.width)}" height="${fmt(node.height)}" fill="${node.fill ?? "none"}"${rx}${stroke}${opacityAttr}${transformAttr}/>`;
+			const stroke = node.stroke ? ` stroke="${escapeXML(node.stroke)}" stroke-width="${fmt(node.strokeWidth ?? .1)}"` : "";
+			return `<rect x="${fmt(node.x)}" y="${fmt(svgY)}" width="${fmt(node.width)}" height="${fmt(node.height)}" fill="${escapeXML(node.fill ?? "none")}"${rx}${stroke}${opacityAttr}${transformAttr}/>`;
 		}
 		case "text": {
 			const anchor = node.align === "center" ? ` text-anchor="middle"` : node.align === "end" ? ` text-anchor="end"` : "";
 			const tspans = node.text.split("\n").map((line, i) => `<tspan x="${fmt(node.x)}" y="${fmt(-node.y + node.fontSize * (.8 + 1.25 * i))}">${escapeXML(line)}</tspan>`).join("");
-			return `<text font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(node.fontSize)}" font-weight="500" fill="${node.color}"${anchor}${opacityAttr}${transformAttr}>${tspans}</text>`;
+			return `<text font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(node.fontSize)}" font-weight="500" fill="${escapeXML(node.color)}"${anchor}${opacityAttr}${transformAttr}>${tspans}</text>`;
 		}
 		case "ellipse": {
-			const stroke = node.stroke ? ` stroke="${node.stroke}" stroke-width="${fmt(node.strokeWidth ?? .1)}"` : "";
-			return `<ellipse cx="${fmt(node.cx)}" cy="${fmt(-node.cy)}" rx="${fmt(node.rx)}" ry="${fmt(node.ry)}" fill="${node.fill ?? "none"}"${stroke}${opacityAttr}${transformAttr}/>`;
+			const stroke = node.stroke ? ` stroke="${escapeXML(node.stroke)}" stroke-width="${fmt(node.strokeWidth ?? .1)}"` : "";
+			return `<ellipse cx="${fmt(node.cx)}" cy="${fmt(-node.cy)}" rx="${fmt(node.rx)}" ry="${fmt(node.ry)}" fill="${escapeXML(node.fill ?? "none")}"${stroke}${opacityAttr}${transformAttr}/>`;
 		}
 		case "image": {
 			const svgY = -node.y - node.height;
@@ -3788,7 +3924,7 @@ function fallbackToGroup(object) {
 	const label = object.fallback.label;
 	const labelEl = label ? `<text x="${fmt(b.x + Math.min(.3, b.width * .1))}" y="${fmt(svgY + Math.min(1.2, b.height * .4))}" font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(Math.min(1.1, b.height * .3))}" fill="#6B7280">${escapeXML(label)}</text>` : "";
 	return [
-		`<g data-id="${object.id}" data-fallback="true"${svgTransformAttr(object.transform)}>`,
+		`<g data-id="${escapeXML(object.id)}" data-fallback="true"${svgTransformAttr(object.transform)}>`,
 		`<rect x="${fmt(b.x)}" y="${fmt(svgY)}" width="${fmt(b.width)}" height="${fmt(b.height)}" fill="#F3F4F6" stroke="#9CA3AF" stroke-width="0.15" stroke-dasharray="0.3 0.3"/>`,
 		labelEl,
 		`</g>`
@@ -3812,7 +3948,7 @@ function strokeToPaths(stroke) {
 		const d = `M ${left.join(" L ")} L ${right.join(" L ")} Z`;
 		const opacity = run.opacity * baseOpacity;
 		const opacityAttr = opacity < 1 ? ` fill-opacity="${fmt(opacity)}"` : "";
-		paths.push(`<path data-id="${stroke.id}" d="${d}" fill="${stroke.color}"${opacityAttr}${transform}/>`);
+		paths.push(`<path data-id="${escapeXML(stroke.id)}" d="${d}" fill="${escapeXML(stroke.color)}"${opacityAttr}${transform}/>`);
 	}
 	return paths;
 }
@@ -3834,14 +3970,14 @@ function splitByOpacity(edges) {
 function textToElement(block) {
 	const top = -block.y;
 	const tspans = block.text.split("\n").map((line, i) => `<tspan x="${fmt(block.x)}" y="${fmt(top + block.fontSize * (.8 + 1.25 * i))}">${escapeXML(line)}</tspan>`).join("");
-	return `<text font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(block.fontSize)}" font-weight="500" fill="${block.color}">${tspans}</text>`;
+	return `<text font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(block.fontSize)}" font-weight="500" fill="${escapeXML(block.color)}">${tspans}</text>`;
 }
 function noteShadowFilter(note) {
 	const dx = -LIGHT.x / LIGHT.z * note.zOffset;
 	const dy = LIGHT.y / LIGHT.z * note.zOffset;
 	const blur = (.35 + note.zOffset * .55) / 2;
 	const opacity = Math.max(.05, .26 - note.zOffset * .028);
-	return `<filter id="sh-${note.id}" x="-50%" y="-50%" width="200%" height="200%"><feDropShadow dx="${fmt(dx)}" dy="${fmt(dy)}" stdDeviation="${fmt(blur)}" flood-opacity="${fmt(opacity)}"/></filter>`;
+	return `<filter id="sh-${escapeXML(note.id)}" x="-50%" y="-50%" width="200%" height="200%"><feDropShadow dx="${fmt(dx)}" dy="${fmt(dy)}" stdDeviation="${fmt(blur)}" flood-opacity="${fmt(opacity)}"/></filter>`;
 }
 function noteToGroup(note) {
 	const left = note.x - note.size / 2;
@@ -3851,7 +3987,7 @@ function noteToGroup(note) {
 	const tspans = wrapText(note.text, note.size - pad * 2, fontSize).map((line, i) => `<tspan x="${fmt(left + pad)}" y="${fmt(top + pad + fontSize * (.8 + 1.25 * i))}">${escapeXML(line)}</tspan>`).join("");
 	return [
 		`<g>`,
-		`<rect x="${fmt(left)}" y="${fmt(top)}" width="${fmt(note.size)}" height="${fmt(note.size)}" fill="${note.color}" filter="url(#sh-${note.id})"/>`,
+		`<rect x="${fmt(left)}" y="${fmt(top)}" width="${fmt(note.size)}" height="${fmt(note.size)}" fill="${escapeXML(note.color)}" filter="url(#sh-${escapeXML(note.id)})"/>`,
 		`<text font-family="ui-rounded, 'Segoe UI', sans-serif" font-size="${fmt(fontSize)}" font-weight="500" fill="#37352F">${tspans}</text>`,
 		`</g>`
 	].join("");
@@ -3882,8 +4018,8 @@ function tableToGroup(table) {
 	const left = table.x;
 	const top = -table.y;
 	const headerH = table.rowHeights[0] ?? height / table.rows;
-	const borderColor = table.color || "#D1D5DB";
-	const bgColor = table.backgroundColor || "#FFFFFF";
+	const borderColor = escapeXML(table.color || "#D1D5DB");
+	const bgColor = escapeXML(table.backgroundColor || "#FFFFFF");
 	const elements = [];
 	elements.push(`<rect x="${fmt(left)}" y="${fmt(top)}" width="${fmt(width)}" height="${fmt(height)}" fill="${bgColor}" rx="0.5"/>`);
 	elements.push(`<rect x="${fmt(left)}" y="${fmt(top)}" width="${fmt(width)}" height="${fmt(headerH)}" fill="#F3F4F6" rx="0.5"/>`);
@@ -3911,14 +4047,14 @@ function tableToGroup(table) {
 				const padY = Math.min(.3, rowH * .12);
 				const fontSize = Math.min(1.25, rowH * .45);
 				const weight = r === 0 ? "bold" : "500";
-				const color = r === 0 ? "#111827" : table.color ?? "#374151";
+				const color = escapeXML(r === 0 ? "#111827" : table.color ?? "#374151");
 				elements.push(`<text x="${fmt(left + cellLeft + padX)}" y="${fmt(top + cellTop + padY + fontSize * .8)}" font-family="Inter, 'Segoe UI', sans-serif" font-size="${fmt(fontSize)}" font-weight="${weight}" fill="${color}">${escapeXML(text)}</text>`);
 			}
 			cellLeft += colW;
 		}
 		cellTop += rowH;
 	}
-	return `<g data-id="${table.id}">\n${elements.join("\n")}\n</g>`;
+	return `<g data-id="${escapeXML(table.id)}">\n${elements.join("\n")}\n</g>`;
 }
 function timerToGroup(timer, now) {
 	const r = timer.size / 2;
@@ -3926,7 +4062,7 @@ function timerToGroup(timer, now) {
 	const cy = -timer.y;
 	const label = formatTimer(timerRemaining(timer, now));
 	return [
-		`<g data-id="${timer.id}">`,
+		`<g data-id="${escapeXML(timer.id)}">`,
 		`<circle cx="${fmt(cx + .4)}" cy="${fmt(cy + .4)}" r="${fmt(r)}" fill="#000" fill-opacity="0.12"/>`,
 		`<circle cx="${fmt(cx)}" cy="${fmt(cy)}" r="${fmt(r)}" fill="#E11D48"/>`,
 		`<circle cx="${fmt(cx)}" cy="${fmt(cy)}" r="${fmt(r * .72)}" fill="#FAFAF9"/>`,
@@ -3939,8 +4075,8 @@ 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"/>`;
 }
@@ -3962,19 +4098,19 @@ function opacityAttrOf(opacity) {
 }
 function rectangleToElement(rect) {
 	const svgY = -rect.y;
-	const stroke = rect.stroke ? ` stroke="${rect.stroke}" stroke-width="${fmt(rect.strokeWidth ?? .12)}"` : "";
+	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="${rect.id}" x="${fmt(rect.x)}" y="${fmt(svgY)}" width="${fmt(rect.width)}" height="${fmt(rect.height)}" fill="${rect.fill ?? "none"}"${rx}${stroke}${opacity}${transform}/>`;
+	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="${ellipse.stroke}" stroke-width="${fmt(ellipse.strokeWidth ?? .12)}"` : "";
+	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="${ellipse.id}" cx="${fmt(cx)}" cy="${fmt(cy)}" rx="${fmt(ellipse.width / 2)}" ry="${fmt(ellipse.height / 2)}" fill="${ellipse.fill ?? "none"}"${stroke}${opacity}${transform}/>`;
+	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
@@ -3987,46 +4123,46 @@ function polygonToElement(polygon) {
 	const cx = polygon.x + polygon.width / 2;
 	const cy = polygon.y - polygon.height / 2;
 	const svgPoints = regularPolygonPoints(polygon.sides, polygon.width, polygon.height, polygonStartAngle(polygon.sides)).map((p) => `${fmt(cx + p.x)},${fmt(-(cy + p.y))}`).join(" ");
-	const stroke = polygon.stroke ? ` stroke="${polygon.stroke}" stroke-width="${fmt(polygon.strokeWidth ?? .12)}"` : "";
+	const 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="${polygon.id}" points="${svgPoints}" fill="${polygon.fill ?? "none"}"${stroke}${opacity}${transform}/>`;
+	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="${star.stroke}" stroke-width="${fmt(star.strokeWidth ?? .12)}"` : "";
+	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="${star.id}" points="${svgPoints}" fill="${star.fill ?? "none"}"${stroke}${opacity}${transform}/>`;
+	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="${heart.stroke}" stroke-width="${fmt(heart.strokeWidth ?? .12)}"` : "";
+	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="${heart.id}" points="${svgPoints}" fill="${heart.fill ?? "none"}"${stroke}${opacity}${transform}/>`;
+	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 = line.stroke ?? "#1C1C1E";
-	const width = line.strokeWidth ?? .12;
+	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="${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}/>`;
+	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 = arrow.stroke ?? "#1C1C1E";
-	const width = arrow.strokeWidth ?? .12;
+	const stroke = escapeXML(arrow.stroke ?? SHAPE_DEFAULT_STROKE);
+	const width = arrow.strokeWidth ?? SHAPE_DEFAULT_STROKE_WIDTH;
 	const opacity = opacityAttrOf(arrow.opacity);
 	const segment = (a, b) => `<line x1="${fmt(a.x)}" y1="${fmt(-a.y)}" x2="${fmt(b.x)}" y2="${fmt(-b.y)}" stroke="${stroke}" stroke-width="${fmt(width)}"/>`;
 	const segments = [segment(arrow.start, arrow.end), ...arrowHeadBarbs(arrow.start, arrow.end, arrow.head).map(([a, b]) => segment(a, b))];
-	return `<g data-id="${arrow.id}"${opacity}>${segments.join("")}</g>`;
+	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;
@@ -4142,4 +4278,4 @@ function fmt(n) {
 var SDK_PACKAGE_NAME = "@scrawl-board/board";
 var SDK_DEVELOPMENT_VERSION = "0.0.0-development";
 //#endregion
-export { ASSET_CACHE_BYTES_DEFAULT, ASSET_CACHE_BYTES_MAX, ASSET_CACHE_BYTES_MIN, ASSET_EXPORT_MAX_DECODED_MEGAPIXELS, ASSET_EXPORT_MAX_ENCODED_BYTES, ASSET_MAX_CONCURRENT_RESOLUTIONS, ASSET_MAX_DECODED_MEGAPIXELS, ASSET_MAX_DIMENSION_PX, ASSET_MAX_ENCODED_BYTES, ASSET_REF_MAX_BYTES, ASSET_REF_PATTERN, AddArrowCommand, AddEllipseCommand, AddGroupCommand, AddHeartCommand, AddImageCommand, AddLineCommand, AddNoteCommand, AddPolygonCommand, AddRectangleCommand, AddStarCommand, AddStrokesCommand, AddTableCommand, AddTextCommand, AddTimerCommand, AssetResolutionError, BEACON_INSET, BoardDocument, CURRENT_DOCUMENT_SCHEMA_VERSION, ClusterStore, CommandBatch, DeleteArrowCommand, DeleteEllipseCommand, DeleteGroupCommand, DeleteHeartCommand, DeleteImageCommand, DeleteLineCommand, DeleteNoteCommand, DeletePolygonCommand, DeleteRectangleCommand, DeleteStarCommand, DeleteStrokesCommand, DeleteTableCommand, DeleteTextCommand, DeleteTimerCommand, DocumentRecoveryError, END_TAPER, ERASE_THRESHOLD, EraseCommand, FOG_COLOR, HIGHLIGHT_COLORS, History, IDENTITY, INK_COLORS, LockItemsCommand, MIN_WIDTH_FACTOR, NOTE_COLORS, NOTE_DEFAULT_SIZE, NOTE_DEFAULT_Z, NOTE_MAX_Z, NOTE_MIN_Z, NOTE_PEEL_STEP, ReorderObjectCommand, SDK_DEVELOPMENT_VERSION, SDK_PACKAGE_NAME, SHAPE_DEFAULT_STROKE, SHAPE_DEFAULT_STROKE_WIDTH, SHAPE_MIN_SIZE, STAMPS, STAMP_SIZE, SUPPORTED_ASSET_MEDIA_TYPES, SpatialIndex, TABLE_DEFAULT_CELL_HEIGHT, TABLE_DEFAULT_CELL_WIDTH, TABLE_DEFAULT_FONT_SIZE, TEXT_DEFAULT_SIZE, TIMER_DEFAULT_DURATION_MS, TIMER_DEFAULT_SIZE, TIMER_PRESETS_MS, TransformCommand, TransformObjectsCommand, UpdateArrowCommand, UpdateEllipseCommand, UpdateGroupCommand, UpdateHeartCommand, UpdateImageCommand, UpdateLineCommand, UpdateNoteCommand, UpdatePolygonCommand, UpdateRectangleCommand, UpdateStarCommand, UpdateTableCommand, UpdateTextCommand, UpdateTimerCommand, apply, applyItemLock, assetRef, avgScale, canUnlockItem, changeToOps, clampAssetCacheBytes, cloneArrow, cloneCustomObject, cloneEllipse, cloneGroup, cloneHeart, cloneImage, cloneLine, cloneNote, clonePolygon, cloneRectangle, cloneStar, cloneStroke, cloneTable, cloneText, cloneTimer, documentId, documentToSVG, formatTimer, invert, isAssetRef, isIdentity, isStampKind, loadDocumentBytes, measureTable, measureTextBlock, migrateDocument, mul, pauseTimer, placePresenceBeacon, ribbonEdges, rotationAbout, scalingAbout, searchBoard, serializeDocument, serializeLock, serializeStroke, setTimerDuration, stampDataUrl, startTimer, strokeId, timerExpired, timerRemaining, toggleTimer, translation };
+export { ASSET_CACHE_BYTES_DEFAULT, ASSET_CACHE_BYTES_MAX, ASSET_CACHE_BYTES_MIN, ASSET_EXPORT_MAX_DECODED_MEGAPIXELS, ASSET_EXPORT_MAX_ENCODED_BYTES, ASSET_MAX_CONCURRENT_RESOLUTIONS, ASSET_MAX_DECODED_MEGAPIXELS, ASSET_MAX_DIMENSION_PX, ASSET_MAX_ENCODED_BYTES, ASSET_REF_MAX_BYTES, ASSET_REF_PATTERN, AddArrowCommand, AddEllipseCommand, AddGroupCommand, AddHeartCommand, AddImageCommand, AddLineCommand, AddNoteCommand, AddPolygonCommand, AddRectangleCommand, AddStarCommand, AddStrokesCommand, AddTableCommand, AddTextCommand, AddTimerCommand, AssetResolutionError, BEACON_INSET, BoardDocument, CURRENT_DOCUMENT_SCHEMA_VERSION, ClusterStore, CommandBatch, DeleteArrowCommand, DeleteEllipseCommand, DeleteGroupCommand, DeleteHeartCommand, DeleteImageCommand, DeleteLineCommand, DeleteNoteCommand, DeletePolygonCommand, DeleteRectangleCommand, DeleteStarCommand, DeleteStrokesCommand, DeleteTableCommand, DeleteTextCommand, DeleteTimerCommand, DocumentRecoveryError, END_TAPER, ERASE_THRESHOLD, EraseCommand, FOG_COLOR, HIGHLIGHT_COLORS, History, IDENTITY, INK_COLORS, LockItemsCommand, MIN_WIDTH_FACTOR, NOTE_COLORS, NOTE_DEFAULT_SIZE, NOTE_DEFAULT_Z, NOTE_MAX_Z, NOTE_MIN_Z, NOTE_PEEL_STEP, ReorderObjectCommand, SDK_DEVELOPMENT_VERSION, SDK_PACKAGE_NAME, SHAPE_DEFAULT_STROKE, SHAPE_DEFAULT_STROKE_WIDTH, SHAPE_MIN_SIZE, SHAPE_STYLE_DEFAULTS, STAMPS, STAMP_SIZE, SUPPORTED_ASSET_MEDIA_TYPES, SpatialIndex, TABLE_DEFAULT_CELL_HEIGHT, TABLE_DEFAULT_CELL_WIDTH, TABLE_DEFAULT_FONT_SIZE, TEXT_DEFAULT_SIZE, TIMER_DEFAULT_DURATION_MS, TIMER_DEFAULT_SIZE, TIMER_PRESETS_MS, TransformCommand, TransformObjectsCommand, UpdateArrowCommand, UpdateEllipseCommand, UpdateGroupCommand, UpdateHeartCommand, UpdateImageCommand, UpdateLineCommand, UpdateNoteCommand, UpdatePolygonCommand, UpdateRectangleCommand, UpdateStarCommand, UpdateTableCommand, UpdateTextCommand, UpdateTimerCommand, apply, applyItemLock, assetRef, avgScale, canUnlockItem, changeToOps, clampAssetCacheBytes, cloneArrow, cloneCustomObject, cloneEllipse, cloneGroup, cloneHeart, cloneImage, cloneLine, cloneNote, clonePolygon, cloneRectangle, cloneStar, cloneStroke, cloneTable, cloneText, cloneTimer, documentId, documentSize, documentToSVG, formatTimer, invert, isAssetRef, isIdentity, isStampKind, loadDocumentBytes, measureTable, measureTextBlock, migrateDocument, mul, pauseTimer, placePresenceBeacon, ribbonEdges, rotationAbout, scalingAbout, searchBoard, serializeDocument, serializeLock, serializeStroke, setTimerDuration, stampDataUrl, startTimer, strokeId, timerExpired, timerRemaining, toggleTimer, translation };