@neta-art/cohub 12.1.1 → 12.3.0

package/dist/board/render/text-edit.js

@@ -0,0 +1,134 @@
+import { BOARD_FONT_STACK } from "../../protocol/dist/board-constants.js";
+import { layoutBoardText } from "../../protocol/dist/board-layout.js";
+import { degToRad, rotatePointAround, worldPoint, worldToScreen } from "../model/geometry.js";
+import { resolveSceneArrow } from "../model/arrow-geometry.js";
+import { BOARD_FRAME_LABEL_LINE_HEIGHT, frameLabelOffset, layoutShapeLabel } from "../model/text-metrics.js";
+import { boardTextStyle, canvasFont, canvasFontFamily, layoutTextLines } from "./text-measurement.js";
+import { ARROW_LABEL, arrowLabelAnchor } from "./labels.js";
+//#region src/board/render/text-edit.ts
+function place({ center, ...box }, viewport) {
+	const screen = worldToScreen(center, viewport);
+	return {
+		left: screen.x - box.width / 2 - box.padding.x,
+		top: screen.y - box.height / 2 - box.padding.y,
+		...box
+	};
+}
+function label(draft, font, lineHeight) {
+	const { lines, width } = layoutTextLines(draft, canvasFont(font));
+	return {
+		width: Math.max(width, font.fontSize * 4),
+		height: lines.length * lineHeight
+	};
+}
+function boardTextEditLayout(item, { viewport, scene, style, draft }) {
+	const { frame } = item;
+	const rotation = frame.rotation || 0;
+	const center = worldPoint(frame.x + frame.width / 2, frame.y + frame.height / 2);
+	const { zoom } = viewport;
+	if (item.type === "text") {
+		const { props } = item;
+		const text = layoutBoardText({
+			...props,
+			text: draft
+		});
+		const scale = zoom * frame.width / text.width;
+		return place({
+			center,
+			width: text.width,
+			height: text.height,
+			padding: {
+				x: 1 / scale,
+				y: 0
+			},
+			scale,
+			rotation,
+			font: boardTextStyle(props),
+			lineHeight: text.lineHeight,
+			textAlign: props.align ?? "left",
+			whiteSpace: props.width ? "pre-wrap" : "pre",
+			live: true
+		}, viewport);
+	}
+	if (item.type === "shape") {
+		const { props } = item;
+		const text = layoutShapeLabel({
+			text: draft,
+			fontSize: props.fontSize
+		}, frame.width);
+		return place({
+			center,
+			width: Math.max(0, frame.width - 16),
+			height: Math.min(frame.height, text.height),
+			padding: {
+				x: 8,
+				y: Math.max(0, (frame.height - text.height) / 2)
+			},
+			scale: zoom,
+			rotation,
+			font: boardTextStyle({
+				font: "sans",
+				fontSize: props.fontSize,
+				fontWeight: 500
+			}),
+			lineHeight: text.lineHeight,
+			textAlign: props.align ?? "center",
+			whiteSpace: "pre-wrap",
+			live: false
+		}, viewport);
+	}
+	if (item.type === "frame") {
+		const fontSize = style?.frameLabelSize ?? 12;
+		const lineHeight = fontSize * BOARD_FRAME_LABEL_LINE_HEIGHT;
+		const font = {
+			fontFamily: canvasFontFamily(style?.font ?? "\"Geist Variable\", \"Geist\", \"Noto Sans CJK SC\", \"Noto Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", system-ui, -apple-system, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\", \"Noto Sans Math\", \"Noto Sans Symbols 2\", \"DejaVu Sans\", \"FreeSans\", \"FreeSerif\", sans-serif"),
+			fontSize,
+			fontWeight: "600"
+		};
+		const size = label(draft, font, lineHeight);
+		const { x, y } = frameLabelOffset(fontSize);
+		const local = worldPoint(frame.x + x + size.width / 2, frame.y + y + size.height / 2);
+		return place({
+			center: rotation ? rotatePointAround(local, center, degToRad(rotation)) : local,
+			...size,
+			padding: {
+				x: 4,
+				y: 2
+			},
+			scale: zoom,
+			rotation,
+			font,
+			lineHeight,
+			textAlign: "left",
+			whiteSpace: "pre",
+			live: false
+		}, viewport);
+	}
+	if (item.type === "arrow") {
+		const { fontSize } = item.props;
+		const font = {
+			fontFamily: canvasFontFamily(BOARD_FONT_STACK),
+			fontSize,
+			fontWeight: ARROW_LABEL.fontWeight
+		};
+		const lineHeight = fontSize * ARROW_LABEL.lineHeight;
+		return place({
+			center: arrowLabelAnchor(resolveSceneArrow(item, scene), item.style),
+			...label(draft, font, lineHeight),
+			padding: {
+				x: fontSize * ARROW_LABEL.padX,
+				y: fontSize * ARROW_LABEL.padY
+			},
+			scale: zoom,
+			rotation: 0,
+			font,
+			lineHeight,
+			textAlign: "center",
+			whiteSpace: "pre",
+			live: false
+		}, viewport);
+	}
+	return null;
+}
+//#endregion
+export { boardTextEditLayout };

package/dist/board/render/text-fit.d.ts

@@ -1,8 +1,6 @@
 import { Text } from "pixi.js";
 //#region src/board/render/text-fit.d.ts
-declare function ellipsizeWrappedLines(lines: string[], maxLines: number): string;
-declare function fitLineWithEllipsis(line: string, wrapWidth: number, measureWidth: (value: string) => number): string;
 declare function fitTextToLines(text: Text, value: string, maxLines: number, wrapWidth: number): void;
 declare function fitTextToWidth(text: Text, value: string, width: number): void;
 //#endregion
-export { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth };
+export { fitTextToLines, fitTextToWidth };

package/dist/board/render/text-fit.js

@@ -1,53 +1,10 @@
-import { CanvasTextMetrics } from "pixi.js";
+import { fitLineWithEllipsis, layoutTextLines } from "./text-measurement.js";
+import { CanvasTextMetrics, fontStringFromTextStyle } from "pixi.js";
 //#region src/board/render/text-fit.ts
-function ellipsizeWrappedLines(lines, maxLines) {
-	if (maxLines <= 0 || lines.length === 0) return "";
-	if (lines.length <= maxLines) return lines.join("\n");
-	const kept = lines.slice(0, maxLines);
-	const lastIndex = kept.length - 1;
-	const last = (kept[lastIndex] ?? "").replace(/\s+$/u, "");
-	kept[lastIndex] = last ? `${last}…` : "…";
-	return kept.join("\n");
-}
-function fitLineWithEllipsis(line, wrapWidth, measureWidth) {
-	const trimmed = line.replace(/\s+$/u, "");
-	if (!trimmed) return "…";
-	const full = `${trimmed}…`;
-	if (measureWidth(full) <= wrapWidth) return full;
-	let lo = 0;
-	let hi = trimmed.length;
-	let best = "…";
-	while (lo <= hi) {
-		const mid = lo + hi >> 1;
-		const candidate = mid > 0 ? `${trimmed.slice(0, mid)}…` : "…";
-		if (measureWidth(candidate) <= wrapWidth) {
-			best = candidate;
-			lo = mid + 1;
-		} else hi = mid - 1;
-	}
-	return best;
-}
 function fitTextToLines(text, value, maxLines, wrapWidth) {
-	const width = Math.max(1, wrapWidth);
-	text.style.wordWrapWidth = width;
-	if (!value || maxLines <= 0) {
-		if (text.text !== "") text.text = "";
-		return;
-	}
-	const charCap = Math.max(maxLines * Math.ceil(width), maxLines * 4);
-	const sample = value.length > charCap ? value.slice(0, charCap) : value;
-	const metrics = CanvasTextMetrics.measureText(sample, text.style);
-	if (!(metrics.lines.length > maxLines || sample !== value)) {
-		if (text.text !== value) text.text = value;
-		return;
-	}
-	const keptCount = Math.min(maxLines, metrics.lines.length);
-	const kept = metrics.lines.slice(0, keptCount);
-	const lastIndex = kept.length - 1;
-	const probe = text.style.clone();
-	probe.wordWrap = false;
-	kept[lastIndex] = fitLineWithEllipsis(kept[lastIndex] ?? "", width, (candidate) => CanvasTextMetrics.measureText(candidate, probe).width);
-	const fitted = kept.join("\n");
+	text.style.wordWrap = false;
+	const { lines } = layoutTextLines(value, fontStringFromTextStyle(text.style), Math.max(1, wrapWidth), { maxLines });
+	const fitted = lines.join("\n");
 	if (text.text !== fitted) text.text = fitted;
 }
 function fitTextToWidth(text, value, width) {
@@ -57,4 +14,4 @@ function fitTextToWidth(text, value, width) {
 	if (text.text !== fitted) text.text = fitted;
 }
 //#endregion
-export { ellipsizeWrappedLines, fitLineWithEllipsis, fitTextToLines, fitTextToWidth };
+export { fitTextToLines, fitTextToWidth };

package/dist/board/render/text-measurement.d.ts

@@ -1,10 +1,34 @@
+import { BoardTextFont, BoardTextLines } from "../../protocol/dist/board-layout.js";
+import "../../protocol/dist/index.js";
+import { TextStyle } from "pixi.js";
 //#region src/board/render/text-measurement.d.ts
 declare const BOARD_FONT_STACKS: {
   sans: string;
   serif: string;
   mono: string;
 };
+type BoardTextStyle = {
+  fontFamily: string;
+  fontSize: number;
+  fontWeight: string;
+};
+declare function canvasFontFamily(families: string): string;
+declare function boardTextStyle({ font, fontSize, fontWeight }: BoardTextFont): BoardTextStyle;
+declare function canvasFont({ fontFamily, fontSize, fontWeight }: BoardTextStyle): string;
+declare function measureTextWidth(text: string, font: string): number;
+type BoardTextWhiteSpace = "normal" | "pre-wrap";
+type BoardTextLineOptions = {
+  whiteSpace?: BoardTextWhiteSpace;
+  maxLines?: number;
+};
+type BoardTextLineLayout = BoardTextLines & {
+  truncated: boolean;
+};
+declare function layoutTextLines(text: string, font: string, maxWidth?: number, { whiteSpace, maxLines }?: BoardTextLineOptions): BoardTextLineLayout;
+declare function fitLineWithEllipsis(line: string, width: number, measureWidth: (value: string) => number): string;
+declare function cssBaselineShift(style: TextStyle): number;
 declare function installBoardTextMeasurement(): void;
 declare function ensureBoardTextMeasurement(): void;
+declare function onBoardTextFontsChange(listener: () => void): () => void;
 //#endregion
-export { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement };
+export { BOARD_FONT_STACKS, BoardTextLineLayout, BoardTextLineOptions, BoardTextStyle, BoardTextWhiteSpace, boardTextStyle, canvasFont, canvasFontFamily, cssBaselineShift, ensureBoardTextMeasurement, fitLineWithEllipsis, installBoardTextMeasurement, layoutTextLines, measureTextWidth, onBoardTextFontsChange };

package/dist/board/render/text-measurement.js

@@ -1,38 +1,176 @@
 import { BOARD_FONT_STACK, BOARD_MONO_FONT_STACK } from "../../protocol/dist/board-constants.js";
-import { setBoardTextMeasurer } from "../../protocol/dist/board-layout.js";
+import { clampBoardFontSize, setBoardTextLayouter } from "../../protocol/dist/board-layout.js";
 import { boardFontFamily } from "../model/text-metrics.js";
-import { DOMAdapter } from "pixi.js";
+import { CanvasTextMetrics, DOMAdapter, fontStringFromTextStyle } from "pixi.js";
+import { clearCache, layoutWithLines, prepareWithSegments } from "@chenglou/pretext";
 //#region src/board/render/text-measurement.ts
 const BOARD_FONT_STACKS = {
 	sans: BOARD_FONT_STACK,
-	serif: "ui-serif, Georgia, \"Noto Serif CJK SC\", \"Songti SC\", \"Noto Sans Math\", \"DejaVu Sans\", \"Noto Sans CJK SC\", \"FreeSans\", \"FreeSerif\", sans-serif",
+	serif: "ui-serif, Georgia, \"Noto Serif CJK SC\", \"Songti SC\", \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\", \"Noto Sans Math\", \"DejaVu Sans\", \"Noto Sans CJK SC\", \"FreeSans\", \"FreeSerif\", sans-serif",
 	mono: BOARD_MONO_FONT_STACK
 };
+const GENERIC_FAMILIES = /* @__PURE__ */ new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui"
+]);
+const QUOTED = /^(["']).+\1$/;
+const familyLists = /* @__PURE__ */ new Map();
+function canvasFontFamily(families) {
+	let list = familyLists.get(families);
+	if (list === void 0) {
+		list = families.split(",").map((name) => name.trim()).filter(Boolean).map((name) => QUOTED.test(name) || GENERIC_FAMILIES.has(name) ? name : `"${name}"`).join(", ");
+		familyLists.set(families, list);
+	}
+	return list;
+}
+function boardTextStyle({ font, fontSize, fontWeight }) {
+	return {
+		fontFamily: canvasFontFamily(boardFontFamily(font, BOARD_FONT_STACKS)),
+		fontSize: clampBoardFontSize(fontSize),
+		fontWeight: String(Math.round(fontWeight / 100) * 100)
+	};
+}
+function canvasFont({ fontFamily, fontSize, fontWeight }) {
+	return `${fontWeight} ${fontSize}px ${fontFamily}`;
+}
+const PREPARED_LIMIT = 256;
+const prepared = /* @__PURE__ */ new Map();
+const measuredFonts = /* @__PURE__ */ new Set();
+const measuredFamilies = /* @__PURE__ */ new Set();
+const TRAILING_SPACE = /[ \t]+$/u;
+const unquote = (name) => name.trim().replace(/^["']|["']$/gu, "");
+function prepareText(text, font, whiteSpace) {
+	const key = `${whiteSpace}\n${font}\n${text}`;
+	let value = prepared.get(key);
+	if (value) {
+		prepared.delete(key);
+		prepared.set(key, value);
+		return value;
+	}
+	if (!measuredFonts.has(font)) {
+		measuredFonts.add(font);
+		for (const name of /px\s+(.+)$/u.exec(font)?.[1]?.split(",") ?? []) measuredFamilies.add(unquote(name));
+	}
+	value = prepareWithSegments(text, font, { whiteSpace });
+	if (prepared.size >= PREPARED_LIMIT) prepared.delete(prepared.keys().next().value);
+	prepared.set(key, value);
+	return value;
+}
 let measureContext;
-let installed = false;
-function getMeasureContext() {
-	if (measureContext !== void 0) return measureContext;
-	try {
-		measureContext = DOMAdapter.get().createCanvas(1, 1).getContext("2d") ?? null;
-	} catch {
-		measureContext = null;
+function measureTextWidth(text, font) {
+	measureContext ??= DOMAdapter.get().createCanvas(1, 1).getContext("2d");
+	if (!measureContext) return 0;
+	measureContext.font = font;
+	return measureContext.measureText(text).width;
+}
+function layoutTextLines(text, font, maxWidth = Number.POSITIVE_INFINITY, { whiteSpace = "pre-wrap", maxLines = Number.POSITIVE_INFINITY } = {}) {
+	const lines = [];
+	const widths = [];
+	if (maxLines <= 0) return {
+		lines,
+		width: 0,
+		truncated: text.length > 0
+	};
+	let source = whiteSpace === "normal" ? text.replace(/\s+/gu, " ").trim() : text.replace(/\r\n?/gu, "\n").replaceAll("	", " ");
+	const cap = Number.isFinite(maxLines) && Number.isFinite(maxWidth) ? maxLines * (Math.ceil(maxWidth) + 1) : Number.POSITIVE_INFINITY;
+	let truncated = source.length > cap;
+	if (truncated) source = source.slice(0, cap);
+	const paragraphs = whiteSpace === "normal" ? source ? [source] : [] : source.split("\n");
+	for (const paragraph of paragraphs) {
+		if (lines.length > maxLines) break;
+		if (!paragraph) {
+			lines.push("");
+			widths.push(0);
+			continue;
+		}
+		const wrapped = layoutWithLines(prepareText(paragraph, font, whiteSpace), maxWidth, 1).lines;
+		for (const [index, line] of wrapped.entries()) {
+			lines.push(index === wrapped.length - 1 ? line.text : line.text.replace(TRAILING_SPACE, ""));
+			widths.push(line.width);
+		}
 	}
-	return measureContext;
+	if (lines.length > maxLines) {
+		truncated = true;
+		lines.length = maxLines;
+		widths.length = maxLines;
+	}
+	if (truncated && lines.length > 0) {
+		const last = lines.length - 1;
+		lines[last] = fitLineWithEllipsis(lines[last], maxWidth, (value) => measureTextWidth(value, font));
+		widths[last] = measureTextWidth(lines[last], font);
+	}
+	return {
+		lines,
+		width: widths.reduce((max, width) => Math.max(max, width), 0),
+		truncated
+	};
 }
-function measureText(text, fontSize, fontWeight, font) {
-	const context = getMeasureContext();
-	if (!context) return null;
-	context.font = `${fontWeight} ${fontSize}px ${boardFontFamily(font, BOARD_FONT_STACKS)}`;
-	return context.measureText(text).width;
+const graphemes = typeof Intl.Segmenter === "function" ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
+function fitLineWithEllipsis(line, width, measureWidth) {
+	const trimmed = line.replace(/\s+$/u, "");
+	if (!trimmed) return "…";
+	if (measureWidth(`${trimmed}…`) <= width) return `${trimmed}…`;
+	const parts = graphemes ? Array.from(graphemes.segment(trimmed), ({ segment }) => segment) : Array.from(trimmed);
+	let lo = 0;
+	let hi = parts.length - 1;
+	while (lo < hi) {
+		const mid = lo + hi + 1 >> 1;
+		if (measureWidth(`${parts.slice(0, mid).join("")}…`) <= width) lo = mid;
+		else hi = mid - 1;
+	}
+	return `${parts.slice(0, lo).join("")}…`;
+}
+const baselineShifts = /* @__PURE__ */ new Map();
+function cssBaselineShift(style) {
+	const font = fontStringFromTextStyle(style);
+	let shift = baselineShifts.get(font);
+	if (shift === void 0) {
+		const ink = CanvasTextMetrics.measureFont(font);
+		const context = DOMAdapter.get().createCanvas(1, 1).getContext("2d");
+		shift = 0;
+		if (context) {
+			context.font = font;
+			const { fontBoundingBoxAscent: ascent, fontBoundingBoxDescent: descent } = context.measureText("M");
+			if (Number.isFinite(ascent) && Number.isFinite(descent)) shift = (ascent - descent - (ink.ascent - ink.descent)) / 2;
+		}
+		baselineShifts.set(font, shift);
+	}
+	return shift;
+}
+const layoutBoardLines = (text, font, maxWidth) => layoutTextLines(text, canvasFont(boardTextStyle(font)), maxWidth);
+const canMeasure = () => typeof OffscreenCanvas !== "undefined" || typeof document !== "undefined";
+let installed = false;
+let fontsChanged = false;
+const fontListeners = /* @__PURE__ */ new Set();
+function notifyFontsChanged() {
+	fontsChanged = false;
+	installBoardTextMeasurement();
+	for (const listener of fontListeners) listener();
 }
 function installBoardTextMeasurement() {
-	measureContext = void 0;
 	installed = true;
-	setBoardTextMeasurer(measureText);
+	prepared.clear();
+	baselineShifts.clear();
+	clearCache();
+	CanvasTextMetrics.clearMetrics();
+	setBoardTextLayouter(canMeasure() ? layoutBoardLines : void 0);
 }
 function ensureBoardTextMeasurement() {
 	if (installed) return;
 	installBoardTextMeasurement();
+	globalThis.document?.fonts?.addEventListener("loadingdone", (event) => {
+		if (fontsChanged || !event.fontfaces.some((face) => measuredFamilies.has(unquote(face.family)))) return;
+		fontsChanged = true;
+		requestAnimationFrame(notifyFontsChanged);
+	});
+}
+function onBoardTextFontsChange(listener) {
+	fontListeners.add(listener);
+	return () => fontListeners.delete(listener);
 }
 //#endregion
-export { BOARD_FONT_STACKS, ensureBoardTextMeasurement, installBoardTextMeasurement };
+export { BOARD_FONT_STACKS, boardTextStyle, canvasFont, canvasFontFamily, cssBaselineShift, ensureBoardTextMeasurement, fitLineWithEllipsis, installBoardTextMeasurement, layoutTextLines, measureTextWidth, onBoardTextFontsChange };

package/dist/board/render/text-resolution.d.ts

@@ -5,13 +5,8 @@ declare function getBoardResolution(size?: {
   height: number;
 }, devicePixelRatio?: number): number;
 declare function textZoomBucket(zoom: number): number;
-declare function boardCardDetailed(zoom: number): boolean;
 /** Exact screen density at rest; reuse or step the raster while moving. */
 declare function boardTextResolution(target: number, current: number, settled: boolean): number;
 declare function syncTextResolution(text: Text, resolution: number): void;
-/** Defer expensive Pixi word-wrap rasterisation during a live resize. */
-declare function syncTextWrapWidth(text: Text, state: {
-  wrapWidth: number;
-}, width: number, defer: boolean): void;
 //#endregion
-export { boardCardDetailed, boardTextResolution, getBoardResolution, syncTextResolution, syncTextWrapWidth, textZoomBucket };
+export { boardTextResolution, getBoardResolution, syncTextResolution, textZoomBucket };

package/dist/board/render/text-resolution.js

@@ -23,9 +23,6 @@ function textZoomBucket(zoom) {
 	for (const bucket of ZOOM_BUCKETS) if (clamped <= bucket) return bucket;
 	return ZOOM_BUCKETS[ZOOM_BUCKETS.length - 1] ?? 4;
 }
-function boardCardDetailed(zoom) {
-	return textZoomBucket(zoom) >= 1;
-}
 /** Exact screen density at rest; reuse or step the raster while moving. */
 function boardTextResolution(target, current, settled) {
 	if (!Number.isFinite(target) || target <= 0) return current > 0 ? current : 1;
@@ -39,11 +36,5 @@ function syncTextResolution(text, resolution) {
 	const next = Math.min(limit, Math.max(MIN_TEXT_RESOLUTION, resolution));
 	if (text.resolution !== next) text.resolution = next;
 }
-/** Defer expensive Pixi word-wrap rasterisation during a live resize. */
-function syncTextWrapWidth(text, state, width, defer) {
-	if (defer || width === state.wrapWidth) return;
-	text.style.wordWrapWidth = width;
-	state.wrapWidth = width;
-}
 //#endregion
-export { boardCardDetailed, boardTextResolution, getBoardResolution, syncTextResolution, syncTextWrapWidth, textZoomBucket };
+export { boardTextResolution, getBoardResolution, syncTextResolution, textZoomBucket };

package/dist/board/render/theme.d.ts

@@ -0,0 +1,15 @@
+import { BoardShapeColors } from "../model/palette.js";
+import { BoardThemeId } from "../model/themes.js";
+import { BoardRenderStyle } from "./style.js";
+import { BoardRenderPalette } from "./renderers/board-renderer-registry.js";
+//#region src/board/render/theme.d.ts
+type BoardRenderTheme = {
+  colorScheme: "dark" | "light";
+  palette: BoardRenderPalette;
+  colors: BoardShapeColors;
+  style: BoardRenderStyle;
+};
+/** A built-in Cohub theme as the app draws it; spread it into export or sampler options. */
+declare function boardRenderTheme(id: BoardThemeId): BoardRenderTheme;
+//#endregion
+export { BoardRenderTheme, boardRenderTheme };

package/dist/board/render/theme.js

@@ -0,0 +1,15 @@
+import { BOARD_THEME_DATA } from "../model/themes.js";
+import { resolveBoardRenderStyle } from "./style.js";
+//#region src/board/render/theme.ts
+/** A built-in Cohub theme as the app draws it; spread it into export or sampler options. */
+function boardRenderTheme(id) {
+	const { colorScheme, palette, colors, style } = BOARD_THEME_DATA[id];
+	return {
+		colorScheme,
+		palette: { ...palette },
+		colors: Object.fromEntries(Object.entries(colors).map(([key, value]) => [key, { ...value }])),
+		style: resolveBoardRenderStyle(colorScheme, style)
+	};
+}
+//#endregion
+export { boardRenderTheme };

package/dist/board/replica/index.d.ts

@@ -1,6 +1,7 @@
 import { BoardDelta, BoardDocument, BoardPatch } from "../../protocol/dist/board-model.js";
 import { BoardApplyResult, BoardPlaybackSnapshot, BoardReadResult } from "../../protocol/dist/board.js";
 import "../../protocol/dist/index.js";
+import { BoardReplicaDatabaseOptions, BoardReplicaScope, clearBoardReplicaStorage, createIndexedDbBoardReplicaStorage } from "./indexeddb.js";
 //#region src/board/replica/index.d.ts
 type BoardPendingPatch = {
   mutationId: string;
@@ -27,6 +28,7 @@ type BoardRemote = {
         playback: BoardPlaybackSnapshot | null;
       };
     }) => void;
+    resync?: () => void;
   }): () => void;
 };
 type BoardReplicaStorage = {
@@ -62,9 +64,9 @@ declare function createBoardReplica(options: BoardReplicaOptions): {
   receive: (payload: BoardChangedPayload) => void;
   receivePlayback: (next: BoardPlaybackSnapshot | null) => void;
   refresh: () => Promise<void>;
-  retry(): Promise<void>;
+  retry: () => Promise<void>;
   dispose(): void;
 };
 type BoardReplica = ReturnType<typeof createBoardReplica>;
 //#endregion
-export { BoardChangedPayload, BoardPendingPatch, BoardRemote, BoardReplica, BoardReplicaOptions, BoardReplicaState, BoardReplicaStorage, createBoardReplica };
+export { BoardChangedPayload, BoardPendingPatch, BoardRemote, BoardReplica, type BoardReplicaDatabaseOptions, BoardReplicaOptions, type BoardReplicaScope, BoardReplicaState, BoardReplicaStorage, clearBoardReplicaStorage, createBoardReplica, createIndexedDbBoardReplicaStorage };

package/dist/board/replica/index.js

@@ -1,6 +1,7 @@
 import { applyBoardDelta, applyBoardPatchToDocument, parseBoardDocument } from "../../protocol/dist/board-patch.js";
 import { createBoardEntityId } from "../model/items/id.js";
 import { shareBoardDocument } from "../model/document-share.js";
+import { clearBoardReplicaStorage, createIndexedDbBoardReplicaStorage } from "./indexeddb.js";
 //#region src/board/replica/index.ts
 function memoryStorage() {
 	return {
@@ -47,6 +48,7 @@ function createBoardReplica(options) {
 	let retryTimer = null;
 	let retryDelay = RETRY_BASE_MS;
 	let disposed = false;
+	let restored = false;
 	let unpersisted = null;
 	let persistTimer = null;
 	function subscribeRemote() {
@@ -54,7 +56,8 @@ function createBoardReplica(options) {
 		try {
 			return remote.subscribe({
 				changed: (event) => receive(event.payload),
-				playback: (event) => receivePlayback(event.payload.playback)
+				playback: (event) => receivePlayback(event.payload.playback),
+				resync: () => void retry()
 			});
 		} catch {
 			return null;
@@ -157,7 +160,7 @@ function createBoardReplica(options) {
 		retryDelay = Math.min(RETRY_MAX_MS, retryDelay * 2);
 	}
 	async function flush() {
-		if (sending || disposed || !loaded) return;
+		if (sending || disposed || !loaded || !restored) return;
 		sending = true;
 		try {
 			while (pending.length && !disposed) {
@@ -217,6 +220,19 @@ function createBoardReplica(options) {
 		}
 		emit();
 	}
+	function retry() {
+		if (disposed) return Promise.resolve();
+		if (retryTimer) clearTimeout(retryTimer);
+		retryTimer = null;
+		retryDelay = RETRY_BASE_MS;
+		readError = null;
+		writeError = null;
+		emit();
+		return refresh().then(flush);
+	}
+	function onOnline() {
+		if (pending.length || readError || writeError) retry();
+	}
 	function receivePlayback(next) {
 		playbackRevision += 1;
 		playback = next;
@@ -232,13 +248,15 @@ function createBoardReplica(options) {
 		},
 		async start() {
 			unsubscribeRemote ??= subscribeRemote();
+			globalThis.addEventListener?.("online", onOnline);
 			const [cached, stored] = await Promise.all([storage.readDocument().catch(() => null), storage.listPending().catch(() => [])]);
 			if (disposed) return;
-			pending = stored;
-			if (cached && !server) {
-				const parsed = parseBoardDocument(cached.document);
-				if (parsed.ok) adoptServer(parsed.document, cached.version, false);
-			}
+			const known = new Set(stored.map((entry) => entry.mutationId));
+			pending = [...stored, ...pending.filter((entry) => !known.has(entry.mutationId))];
+			restored = true;
+			const parsed = cached && !server ? parseBoardDocument(cached.document) : null;
+			if (cached && parsed?.ok) adoptServer(parsed.document, cached.version, false);
+			else recompute();
 			emit();
 			await refresh();
 			await flush();
@@ -256,17 +274,10 @@ function createBoardReplica(options) {
 		receive,
 		receivePlayback,
 		refresh,
-		retry() {
-			if (retryTimer) clearTimeout(retryTimer);
-			retryTimer = null;
-			retryDelay = RETRY_BASE_MS;
-			readError = null;
-			writeError = null;
-			emit();
-			return refresh().then(flush);
-		},
+		retry,
 		dispose() {
 			disposed = true;
+			globalThis.removeEventListener?.("online", onOnline);
 			unsubscribeRemote?.();
 			unsubscribeRemote = null;
 			listeners.clear();
@@ -276,4 +287,4 @@ function createBoardReplica(options) {
 	};
 }
 //#endregion
-export { createBoardReplica };
+export { clearBoardReplicaStorage, createBoardReplica, createIndexedDbBoardReplicaStorage };

package/dist/board/replica/indexeddb.d.ts

@@ -0,0 +1,16 @@
+import { BoardReplicaStorage } from "./index.js";
+//#region src/board/replica/indexeddb.d.ts
+type BoardReplicaScope = {
+  userKey: string;
+  spaceId: string;
+  boardId: string;
+};
+type BoardReplicaDatabaseOptions = {
+  database?: string;
+};
+declare function createIndexedDbBoardReplicaStorage(scope: BoardReplicaScope, options?: BoardReplicaDatabaseOptions): BoardReplicaStorage;
+declare function clearBoardReplicaStorage(options?: BoardReplicaDatabaseOptions & {
+  userKey?: string;
+}): Promise<void>;
+//#endregion
+export { BoardReplicaDatabaseOptions, BoardReplicaScope, clearBoardReplicaStorage, createIndexedDbBoardReplicaStorage };