fabricjs-document-engine 0.5.0 → 0.7.0

package/dist/engine/errors.d.ts

@@ -1,7 +1,7 @@
 import { FontAsset, ImageAsset } from "../assets/asset-manifest.js";
 import { ExportProblem } from "../export/preflight-export.js";
 //#region src/engine/errors.d.ts
-export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "RECOVERY_MISSING" | "RECOVERY_NOT_FOUND" | "RECOVERY_FAILED" | "INVALID_EXPORT_OPTIONS" | "EXPORT_BLOCKED" | "EXPORT_FAILED" | "EXPORT_ABORTED" | "ENGINE_DESTROYED";
+export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "RECOVERY_MISSING" | "RECOVERY_NOT_FOUND" | "RECOVERY_FAILED" | "MIGRATION_FAILED" | "VERSIONS_UNSUPPORTED" | "VERSION_NOT_FOUND" | "VERSION_FAILED" | "INVALID_EXPORT_OPTIONS" | "EXPORT_BLOCKED" | "EXPORT_FAILED" | "EXPORT_ABORTED" | "ENGINE_DESTROYED";
 export interface DocumentIssue {
   code: DocumentErrorCode;
   path: string;
@@ -13,6 +13,7 @@ export interface DocumentEngineErrorDetails {
   missingAssets?: ImageAsset[];
   missingFonts?: FontAsset[];
   problems?: ExportProblem[];
+  migrationFrom?: number;
   cause?: unknown;
   retryable?: boolean;
 }
@@ -23,6 +24,7 @@ export declare class DocumentEngineError extends Error {
   readonly missingAssets: ImageAsset[];
   readonly missingFonts: FontAsset[];
   readonly problems: ExportProblem[];
+  readonly migrationFrom: number | undefined;
   readonly cause: unknown;
   readonly retryable: boolean;
   constructor(code: DocumentErrorCode, message: string, details?: DocumentEngineErrorDetails);

package/dist/engine/errors.js

@@ -9,6 +9,7 @@ var DocumentEngineError = class extends Error {
 		this.missingAssets = details.missingAssets ?? [];
 		this.missingFonts = details.missingFonts ?? [];
 		this.problems = details.problems ?? [];
+		this.migrationFrom = details.migrationFrom;
 		this.cause = details.cause;
 		this.retryable = details.retryable ?? false;
 	}

package/dist/index.cjs

@@ -2,16 +2,21 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_errors = require("./engine/errors.cjs");
 const require_document_format = require("./document/document-format.cjs");
 const require_validate_document = require("./document/validate-document.cjs");
+const require_migrate_document = require("./migrations/migrate-document.cjs");
 const require_create_document_engine = require("./engine/create-document-engine.cjs");
 const require_keyboard_shortcuts = require("./history/keyboard-shortcuts.cjs");
 const require_unsaved_changes_warning = require("./save/unsaved-changes-warning.cjs");
 const require_download_export = require("./export/download-export.cjs");
+const require_document_state_store = require("./state/document-state-store.cjs");
 exports.CURRENT_SCHEMA_VERSION = require_document_format.CURRENT_SCHEMA_VERSION;
 exports.DocumentEngineError = require_errors.DocumentEngineError;
 exports.bindKeyboardShortcuts = require_keyboard_shortcuts.bindKeyboardShortcuts;
 exports.bindUnsavedChangesWarning = require_unsaved_changes_warning.bindUnsavedChangesWarning;
 exports.createConflictError = require_errors.createConflictError;
 exports.createDocumentEngine = require_create_document_engine.createDocumentEngine;
+exports.createDocumentStateStore = require_document_state_store.createDocumentStateStore;
+exports.detectSchemaVersion = require_migrate_document.detectSchemaVersion;
 exports.downloadExport = require_download_export.downloadExport;
 exports.isDocumentEngineError = require_errors.isDocumentEngineError;
+exports.migrateDocument = require_migrate_document.migrateDocument;
 exports.validateDocument = require_validate_document.validateDocument;

package/dist/index.d.cts

@@ -7,6 +7,7 @@ import { ExportPreflight, ExportProblem, ExportProblemCode } from "./export/pref
 import { NewDocumentOptions } from "./document/create-document.cjs";
 import { CustomObjectDefinition } from "./fabric/object-registry.cjs";
 import { HistoryOptions, HistoryState } from "./history/create-history.cjs";
+import { DocumentVersion, VersionKind, VersionOptions, VersionStorage, VersionSummary } from "./versions/document-version.cjs";
 import { RecoveryStore } from "./recovery/recovery-store.cjs";
 import { InterruptedLoad, RecoveryOptions, RecoveryRecord } from "./recovery/recovery-controller.cjs";
 import { AutosaveOptions } from "./save/autosave-scheduler.cjs";
@@ -15,9 +16,11 @@ import { DocumentEngineError, DocumentEngineErrorDetails, DocumentErrorCode, Doc
 import { DocumentStorage, SaveContext, SaveResult } from "./storage/storage-contract.cjs";
 import { SaveOptions, SaveRetryEvent, SaveState, SaveStatus } from "./save/save-controller.cjs";
 import { Unsubscribe } from "./engine/event-emitter.cjs";
-import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, LoadOptions, createDocumentEngine } from "./engine/create-document-engine.cjs";
+import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, ImportOptions, LoadOptions, createDocumentEngine } from "./engine/create-document-engine.cjs";
 import { validateDocument } from "./document/validate-document.cjs";
 import { KeyboardShortcutOptions, UndoRedoTarget, bindKeyboardShortcuts } from "./history/keyboard-shortcuts.cjs";
 import { UnsavedChangesSource, bindUnsavedChangesWarning } from "./save/unsaved-changes-warning.cjs";
 import { DownloadableExport, downloadExport } from "./export/download-export.cjs";
-export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CURRENT_SCHEMA_VERSION, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentStorage, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type HistoryOptions, type HistoryState, type ImageAsset, type InterruptedLoad, type KeyboardShortcutOptions, type LoadOptions, type NewDocumentOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, downloadExport, isDocumentEngineError, validateDocument };
+import { Migration, MigrationContext, MigrationResult, detectSchemaVersion, migrateDocument } from "./migrations/migrate-document.cjs";
+import { DocumentState, DocumentStateStore, createDocumentStateStore } from "./state/document-state-store.cjs";
+export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CURRENT_SCHEMA_VERSION, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentState, type DocumentStateStore, type DocumentStorage, type DocumentVersion, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type HistoryOptions, type HistoryState, type ImageAsset, type ImportOptions, type InterruptedLoad, type KeyboardShortcutOptions, type LoadOptions, type Migration, type MigrationContext, type MigrationResult, type NewDocumentOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, type VersionKind, type VersionOptions, type VersionStorage, type VersionSummary, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, createDocumentStateStore, detectSchemaVersion, downloadExport, isDocumentEngineError, migrateDocument, validateDocument };

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import { ExportPreflight, ExportProblem, ExportProblemCode } from "./export/pref
 import { NewDocumentOptions } from "./document/create-document.js";
 import { CustomObjectDefinition } from "./fabric/object-registry.js";
 import { HistoryOptions, HistoryState } from "./history/create-history.js";
+import { DocumentVersion, VersionKind, VersionOptions, VersionStorage, VersionSummary } from "./versions/document-version.js";
 import { RecoveryStore } from "./recovery/recovery-store.js";
 import { InterruptedLoad, RecoveryOptions, RecoveryRecord } from "./recovery/recovery-controller.js";
 import { AutosaveOptions } from "./save/autosave-scheduler.js";
@@ -15,9 +16,11 @@ import { DocumentEngineError, DocumentEngineErrorDetails, DocumentErrorCode, Doc
 import { DocumentStorage, SaveContext, SaveResult } from "./storage/storage-contract.js";
 import { SaveOptions, SaveRetryEvent, SaveState, SaveStatus } from "./save/save-controller.js";
 import { Unsubscribe } from "./engine/event-emitter.js";
-import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, LoadOptions, createDocumentEngine } from "./engine/create-document-engine.js";
+import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, ExportResult, ImportOptions, LoadOptions, createDocumentEngine } from "./engine/create-document-engine.js";
 import { validateDocument } from "./document/validate-document.js";
 import { KeyboardShortcutOptions, UndoRedoTarget, bindKeyboardShortcuts } from "./history/keyboard-shortcuts.js";
 import { UnsavedChangesSource, bindUnsavedChangesWarning } from "./save/unsaved-changes-warning.js";
 import { DownloadableExport, downloadExport } from "./export/download-export.js";
-export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CURRENT_SCHEMA_VERSION, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentStorage, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type HistoryOptions, type HistoryState, type ImageAsset, type InterruptedLoad, type KeyboardShortcutOptions, type LoadOptions, type NewDocumentOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, downloadExport, isDocumentEngineError, validateDocument };
+import { Migration, MigrationContext, MigrationResult, detectSchemaVersion, migrateDocument } from "./migrations/migrate-document.js";
+import { DocumentState, DocumentStateStore, createDocumentStateStore } from "./state/document-state-store.js";
+export { type AssetManifest, type AssetOptions, type AssetReport, type AssetWarning, type AssetWarningCode, type AutosaveOptions, CURRENT_SCHEMA_VERSION, type CustomObjectDefinition, type DocumentCanvas, type DocumentEngine, DocumentEngineError, type DocumentEngineErrorDetails, type DocumentEngineEvents, type DocumentEngineOptions, type DocumentErrorCode, type DocumentInfo, type DocumentIssue, type DocumentState, type DocumentStateStore, type DocumentStorage, type DocumentVersion, type DownloadableExport, type ExportArea, type ExportBackground, type ExportFormat, type ExportOptions, type ExportPreflight, type ExportProblem, type ExportProblemCode, type ExportRect, type ExportResult, type FabricDocument, type FontAsset, type FontLoader, type HistoryOptions, type HistoryState, type ImageAsset, type ImportOptions, type InterruptedLoad, type KeyboardShortcutOptions, type LoadOptions, type Migration, type MigrationContext, type MigrationResult, type NewDocumentOptions, type RecoveryOptions, type RecoveryRecord, type RecoveryStore, type RetryOptions, type SaveContext, type SaveOptions, type SaveResult, type SaveRetryEvent, type SaveState, type SaveStatus, type SerializedFabricObject, type UndoRedoTarget, type UnsavedChangesSource, type Unsubscribe, type UploadRequest, type VersionKind, type VersionOptions, type VersionStorage, type VersionSummary, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, createDocumentStateStore, detectSchemaVersion, downloadExport, isDocumentEngineError, migrateDocument, validateDocument };

package/dist/index.js

@@ -1,8 +1,10 @@
 import { DocumentEngineError, createConflictError, isDocumentEngineError } from "./engine/errors.js";
 import { CURRENT_SCHEMA_VERSION } from "./document/document-format.js";
 import { validateDocument } from "./document/validate-document.js";
+import { detectSchemaVersion, migrateDocument } from "./migrations/migrate-document.js";
 import { createDocumentEngine } from "./engine/create-document-engine.js";
 import { bindKeyboardShortcuts } from "./history/keyboard-shortcuts.js";
 import { bindUnsavedChangesWarning } from "./save/unsaved-changes-warning.js";
 import { downloadExport } from "./export/download-export.js";
-export { CURRENT_SCHEMA_VERSION, DocumentEngineError, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, downloadExport, isDocumentEngineError, validateDocument };
+import { createDocumentStateStore } from "./state/document-state-store.js";
+export { CURRENT_SCHEMA_VERSION, DocumentEngineError, bindKeyboardShortcuts, bindUnsavedChangesWarning, createConflictError, createDocumentEngine, createDocumentStateStore, detectSchemaVersion, downloadExport, isDocumentEngineError, migrateDocument, validateDocument };

package/dist/migrations/migrate-document.cjs

@@ -0,0 +1,65 @@
+const require_errors = require("../engine/errors.cjs");
+require("../document/document-format.cjs");
+const require_ids = require("../document/ids.cjs");
+//#region src/migrations/migrate-document.ts
+function isPlainObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function positiveNumberOr(value, fallback) {
+	return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function fromFabricJson(json, context) {
+	const now = (/* @__PURE__ */ new Date()).toISOString();
+	const document = {
+		schemaVersion: 1,
+		id: context.id ?? (typeof json.id === "string" && json.id.length > 0 ? json.id : require_ids.createId()),
+		createdAt: now,
+		updatedAt: now,
+		revision: 0,
+		canvas: {
+			width: positiveNumberOr(json.width, context.canvasWidth),
+			height: positiveNumberOr(json.height, context.canvasHeight),
+			...json.background === void 0 ? {} : { background: json.background }
+		},
+		objects: json.objects,
+		metadata: { ...context.metadata }
+	};
+	if (typeof json.version === "string") document.fabricVersion = json.version;
+	return document;
+}
+const migrations = { 0: fromFabricJson };
+function detectSchemaVersion(value) {
+	if (!isPlainObject(value)) return void 0;
+	if (typeof value.schemaVersion === "number" && Number.isInteger(value.schemaVersion)) return value.schemaVersion;
+	if (value.schemaVersion === void 0 && Array.isArray(value.objects)) return 0;
+}
+function migrateDocument(value, context, steps = migrations, targetVersion = 1) {
+	const startVersion = detectSchemaVersion(value);
+	if (startVersion === void 0 || startVersion >= targetVersion || startVersion < 0) return {
+		document: value,
+		migratedFrom: void 0
+	};
+	let document = JSON.parse(JSON.stringify(value));
+	for (let version = startVersion; version < targetVersion; version += 1) {
+		const step = steps[version];
+		if (!step) throw new require_errors.DocumentEngineError("MIGRATION_FAILED", `There is no migration from schema version ${version}`, { migrationFrom: version });
+		try {
+			document = step(document, context);
+		} catch (error) {
+			const reason = error instanceof Error ? error.message : String(error);
+			throw new require_errors.DocumentEngineError("MIGRATION_FAILED", `Could not migrate the document from schema version ${version} to ${version + 1}: ${reason}`, {
+				cause: error,
+				migrationFrom: version
+			});
+		}
+		if (document.schemaVersion !== version + 1) throw new require_errors.DocumentEngineError("MIGRATION_FAILED", `The migration from schema version ${version} produced version ${String(document.schemaVersion)} instead of ${version + 1}`, { migrationFrom: version });
+	}
+	return {
+		document,
+		migratedFrom: startVersion
+	};
+}
+//#endregion
+exports.detectSchemaVersion = detectSchemaVersion;
+exports.migrateDocument = migrateDocument;
+exports.migrations = migrations;

package/dist/migrations/migrate-document.d.cts

@@ -0,0 +1,15 @@
+//#region src/migrations/migrate-document.d.ts
+export interface MigrationContext {
+  canvasWidth: number;
+  canvasHeight: number;
+  id?: string;
+  metadata?: Record<string, unknown>;
+}
+export type Migration = (document: Record<string, unknown>, context: MigrationContext) => Record<string, unknown>;
+export interface MigrationResult {
+  document: unknown;
+  migratedFrom: number | undefined;
+}
+export declare function detectSchemaVersion(value: unknown): number | undefined;
+export declare function migrateDocument(value: unknown, context: MigrationContext, steps?: Readonly<Record<number, Migration>>, targetVersion?: number): MigrationResult;
+//#endregion

package/dist/migrations/migrate-document.d.ts

@@ -0,0 +1,15 @@
+//#region src/migrations/migrate-document.d.ts
+export interface MigrationContext {
+  canvasWidth: number;
+  canvasHeight: number;
+  id?: string;
+  metadata?: Record<string, unknown>;
+}
+export type Migration = (document: Record<string, unknown>, context: MigrationContext) => Record<string, unknown>;
+export interface MigrationResult {
+  document: unknown;
+  migratedFrom: number | undefined;
+}
+export declare function detectSchemaVersion(value: unknown): number | undefined;
+export declare function migrateDocument(value: unknown, context: MigrationContext, steps?: Readonly<Record<number, Migration>>, targetVersion?: number): MigrationResult;
+//#endregion

package/dist/migrations/migrate-document.js

@@ -0,0 +1,63 @@
+import { DocumentEngineError } from "../engine/errors.js";
+import "../document/document-format.js";
+import { createId } from "../document/ids.js";
+//#region src/migrations/migrate-document.ts
+function isPlainObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function positiveNumberOr(value, fallback) {
+	return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function fromFabricJson(json, context) {
+	const now = (/* @__PURE__ */ new Date()).toISOString();
+	const document = {
+		schemaVersion: 1,
+		id: context.id ?? (typeof json.id === "string" && json.id.length > 0 ? json.id : createId()),
+		createdAt: now,
+		updatedAt: now,
+		revision: 0,
+		canvas: {
+			width: positiveNumberOr(json.width, context.canvasWidth),
+			height: positiveNumberOr(json.height, context.canvasHeight),
+			...json.background === void 0 ? {} : { background: json.background }
+		},
+		objects: json.objects,
+		metadata: { ...context.metadata }
+	};
+	if (typeof json.version === "string") document.fabricVersion = json.version;
+	return document;
+}
+const migrations = { 0: fromFabricJson };
+function detectSchemaVersion(value) {
+	if (!isPlainObject(value)) return void 0;
+	if (typeof value.schemaVersion === "number" && Number.isInteger(value.schemaVersion)) return value.schemaVersion;
+	if (value.schemaVersion === void 0 && Array.isArray(value.objects)) return 0;
+}
+function migrateDocument(value, context, steps = migrations, targetVersion = 1) {
+	const startVersion = detectSchemaVersion(value);
+	if (startVersion === void 0 || startVersion >= targetVersion || startVersion < 0) return {
+		document: value,
+		migratedFrom: void 0
+	};
+	let document = JSON.parse(JSON.stringify(value));
+	for (let version = startVersion; version < targetVersion; version += 1) {
+		const step = steps[version];
+		if (!step) throw new DocumentEngineError("MIGRATION_FAILED", `There is no migration from schema version ${version}`, { migrationFrom: version });
+		try {
+			document = step(document, context);
+		} catch (error) {
+			const reason = error instanceof Error ? error.message : String(error);
+			throw new DocumentEngineError("MIGRATION_FAILED", `Could not migrate the document from schema version ${version} to ${version + 1}: ${reason}`, {
+				cause: error,
+				migrationFrom: version
+			});
+		}
+		if (document.schemaVersion !== version + 1) throw new DocumentEngineError("MIGRATION_FAILED", `The migration from schema version ${version} produced version ${String(document.schemaVersion)} instead of ${version + 1}`, { migrationFrom: version });
+	}
+	return {
+		document,
+		migratedFrom: startVersion
+	};
+}
+//#endregion
+export { detectSchemaVersion, migrateDocument, migrations };

package/dist/react/engine-context.cjs

@@ -0,0 +1,12 @@
+let react = require("react");
+//#region src/react/engine-context.ts
+const EngineContext = (0, react.createContext)(null);
+function DocumentEngineProvider({ engine, children }) {
+	return (0, react.createElement)(EngineContext.Provider, { value: engine }, children);
+}
+function useEngine() {
+	return (0, react.useContext)(EngineContext);
+}
+//#endregion
+exports.DocumentEngineProvider = DocumentEngineProvider;
+exports.useEngine = useEngine;

package/dist/react/engine-context.d.cts

@@ -0,0 +1,10 @@
+import { DocumentEngine } from "../engine/create-document-engine.cjs";
+import { ReactNode } from "react";
+//#region src/react/engine-context.d.ts
+export interface DocumentEngineProviderProps {
+  engine: DocumentEngine | null;
+  children?: ReactNode;
+}
+export declare function DocumentEngineProvider({ engine, children }: DocumentEngineProviderProps): ReactNode;
+export declare function useEngine(): DocumentEngine | null;
+//#endregion

package/dist/react/engine-context.d.ts

@@ -0,0 +1,10 @@
+import { DocumentEngine } from "../engine/create-document-engine.js";
+import { ReactNode } from "react";
+//#region src/react/engine-context.d.ts
+export interface DocumentEngineProviderProps {
+  engine: DocumentEngine | null;
+  children?: ReactNode;
+}
+export declare function DocumentEngineProvider({ engine, children }: DocumentEngineProviderProps): ReactNode;
+export declare function useEngine(): DocumentEngine | null;
+//#endregion

package/dist/react/engine-context.js

@@ -0,0 +1,11 @@
+import { createContext, createElement, useContext } from "react";
+//#region src/react/engine-context.ts
+const EngineContext = createContext(null);
+function DocumentEngineProvider({ engine, children }) {
+	return createElement(EngineContext.Provider, { value: engine }, children);
+}
+function useEngine() {
+	return useContext(EngineContext);
+}
+//#endregion
+export { DocumentEngineProvider, useEngine };

package/dist/react/use-document-engine.cjs

@@ -0,0 +1,23 @@
+const require_create_document_engine = require("../engine/create-document-engine.cjs");
+let react = require("react");
+//#region src/react/use-document-engine.ts
+function useDocumentEngine(canvas, options = {}) {
+	const latestOptions = (0, react.useRef)(options);
+	latestOptions.current = options;
+	const [engine, setEngine] = (0, react.useState)(null);
+	(0, react.useEffect)(() => {
+		if (!canvas) return void 0;
+		const created = require_create_document_engine.createDocumentEngine({
+			...latestOptions.current,
+			canvas
+		});
+		setEngine(created);
+		return () => {
+			created.destroy();
+			setEngine((current) => current === created ? null : current);
+		};
+	}, [canvas]);
+	return engine;
+}
+//#endregion
+exports.useDocumentEngine = useDocumentEngine;

package/dist/react/use-document-engine.d.cts

@@ -0,0 +1,6 @@
+import { DocumentEngine, DocumentEngineOptions } from "../engine/create-document-engine.cjs";
+import { StaticCanvas } from "fabric";
+//#region src/react/use-document-engine.d.ts
+export type ReactEngineOptions = Omit<DocumentEngineOptions, "canvas">;
+export declare function useDocumentEngine(canvas: StaticCanvas | null | undefined, options?: ReactEngineOptions): DocumentEngine | null;
+//#endregion

package/dist/react/use-document-engine.d.ts

@@ -0,0 +1,6 @@
+import { DocumentEngine, DocumentEngineOptions } from "../engine/create-document-engine.js";
+import { StaticCanvas } from "fabric";
+//#region src/react/use-document-engine.d.ts
+export type ReactEngineOptions = Omit<DocumentEngineOptions, "canvas">;
+export declare function useDocumentEngine(canvas: StaticCanvas | null | undefined, options?: ReactEngineOptions): DocumentEngine | null;
+//#endregion

package/dist/react/use-document-engine.js

@@ -0,0 +1,23 @@
+import { createDocumentEngine } from "../engine/create-document-engine.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/react/use-document-engine.ts
+function useDocumentEngine(canvas, options = {}) {
+	const latestOptions = useRef(options);
+	latestOptions.current = options;
+	const [engine, setEngine] = useState(null);
+	useEffect(() => {
+		if (!canvas) return void 0;
+		const created = createDocumentEngine({
+			...latestOptions.current,
+			canvas
+		});
+		setEngine(created);
+		return () => {
+			created.destroy();
+			setEngine((current) => current === created ? null : current);
+		};
+	}, [canvas]);
+	return engine;
+}
+//#endregion
+export { useDocumentEngine };

package/dist/react/use-document-event.cjs

@@ -0,0 +1,12 @@
+let react = require("react");
+//#region src/react/use-document-event.ts
+function useDocumentEvent(engine, name, handler) {
+	const latestHandler = (0, react.useRef)(handler);
+	latestHandler.current = handler;
+	(0, react.useEffect)(() => {
+		if (!engine) return void 0;
+		return engine.on(name, (payload) => latestHandler.current(payload));
+	}, [engine, name]);
+}
+//#endregion
+exports.useDocumentEvent = useDocumentEvent;

package/dist/react/use-document-event.d.cts

@@ -0,0 +1,4 @@
+import { DocumentEngine, DocumentEngineEvents } from "../engine/create-document-engine.cjs";
+//#region src/react/use-document-event.d.ts
+export declare function useDocumentEvent<Name extends keyof DocumentEngineEvents>(engine: DocumentEngine | null | undefined, name: Name, handler: (payload: DocumentEngineEvents[Name]) => void): void;
+//#endregion

package/dist/react/use-document-event.d.ts

@@ -0,0 +1,4 @@
+import { DocumentEngine, DocumentEngineEvents } from "../engine/create-document-engine.js";
+//#region src/react/use-document-event.d.ts
+export declare function useDocumentEvent<Name extends keyof DocumentEngineEvents>(engine: DocumentEngine | null | undefined, name: Name, handler: (payload: DocumentEngineEvents[Name]) => void): void;
+//#endregion

package/dist/react/use-document-event.js

@@ -0,0 +1,12 @@
+import { useEffect, useRef } from "react";
+//#region src/react/use-document-event.ts
+function useDocumentEvent(engine, name, handler) {
+	const latestHandler = useRef(handler);
+	latestHandler.current = handler;
+	useEffect(() => {
+		if (!engine) return void 0;
+		return engine.on(name, (payload) => latestHandler.current(payload));
+	}, [engine, name]);
+}
+//#endregion
+export { useDocumentEvent };

package/dist/react/use-document-state.cjs

@@ -0,0 +1,11 @@
+const require_document_state_store = require("../state/document-state-store.cjs");
+let react = require("react");
+//#region src/react/use-document-state.ts
+const subscribeToNothing = () => () => void 0;
+const nothing = () => null;
+function useDocumentState(engine) {
+	const store = (0, react.useMemo)(() => engine ? require_document_state_store.createDocumentStateStore(engine) : null, [engine]);
+	return (0, react.useSyncExternalStore)(store ? store.subscribe : subscribeToNothing, store ? store.getSnapshot : nothing, nothing);
+}
+//#endregion
+exports.useDocumentState = useDocumentState;

package/dist/react/use-document-state.d.cts

@@ -0,0 +1,5 @@
+import { DocumentEngine } from "../engine/create-document-engine.cjs";
+import { DocumentState } from "../state/document-state-store.cjs";
+//#region src/react/use-document-state.d.ts
+export declare function useDocumentState(engine: DocumentEngine | null | undefined): DocumentState | null;
+//#endregion

package/dist/react/use-document-state.d.ts

@@ -0,0 +1,5 @@
+import { DocumentEngine } from "../engine/create-document-engine.js";
+import { DocumentState } from "../state/document-state-store.js";
+//#region src/react/use-document-state.d.ts
+export declare function useDocumentState(engine: DocumentEngine | null | undefined): DocumentState | null;
+//#endregion

package/dist/react/use-document-state.js

@@ -0,0 +1,11 @@
+import { createDocumentStateStore } from "../state/document-state-store.js";
+import { useMemo, useSyncExternalStore } from "react";
+//#region src/react/use-document-state.ts
+const subscribeToNothing = () => () => void 0;
+const nothing = () => null;
+function useDocumentState(engine) {
+	const store = useMemo(() => engine ? createDocumentStateStore(engine) : null, [engine]);
+	return useSyncExternalStore(store ? store.subscribe : subscribeToNothing, store ? store.getSnapshot : nothing, nothing);
+}
+//#endregion
+export { useDocumentState };

package/dist/react.cjs

@@ -0,0 +1,11 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_use_document_engine = require("./react/use-document-engine.cjs");
+const require_use_document_state = require("./react/use-document-state.cjs");
+const require_use_document_event = require("./react/use-document-event.cjs");
+const require_engine_context = require("./react/engine-context.cjs");
+exports.DocumentEngineProvider = require_engine_context.DocumentEngineProvider;
+exports.useDocumentEngine = require_use_document_engine.useDocumentEngine;
+exports.useDocumentEvent = require_use_document_event.useDocumentEvent;
+exports.useDocumentState = require_use_document_state.useDocumentState;
+exports.useEngine = require_engine_context.useEngine;

package/dist/react.d.cts

@@ -0,0 +1,6 @@
+import { DocumentState } from "./state/document-state-store.cjs";
+import { ReactEngineOptions, useDocumentEngine } from "./react/use-document-engine.cjs";
+import { useDocumentState } from "./react/use-document-state.cjs";
+import { useDocumentEvent } from "./react/use-document-event.cjs";
+import { DocumentEngineProvider, DocumentEngineProviderProps, useEngine } from "./react/engine-context.cjs";
+export { DocumentEngineProvider, type DocumentEngineProviderProps, type DocumentState, type ReactEngineOptions, useDocumentEngine, useDocumentEvent, useDocumentState, useEngine };

package/dist/react.d.ts

@@ -0,0 +1,6 @@
+import { DocumentState } from "./state/document-state-store.js";
+import { ReactEngineOptions, useDocumentEngine } from "./react/use-document-engine.js";
+import { useDocumentState } from "./react/use-document-state.js";
+import { useDocumentEvent } from "./react/use-document-event.js";
+import { DocumentEngineProvider, DocumentEngineProviderProps, useEngine } from "./react/engine-context.js";
+export { DocumentEngineProvider, type DocumentEngineProviderProps, type DocumentState, type ReactEngineOptions, useDocumentEngine, useDocumentEvent, useDocumentState, useEngine };

package/dist/react.js

@@ -0,0 +1,6 @@
+"use client";
+import { useDocumentEngine } from "./react/use-document-engine.js";
+import { useDocumentState } from "./react/use-document-state.js";
+import { useDocumentEvent } from "./react/use-document-event.js";
+import { DocumentEngineProvider, useEngine } from "./react/engine-context.js";
+export { DocumentEngineProvider, useDocumentEngine, useDocumentEvent, useDocumentState, useEngine };

package/dist/state/document-state-store.cjs

@@ -0,0 +1,114 @@
+//#region src/state/document-state-store.ts
+function initialState(engine) {
+	const saveState = engine.getSaveState();
+	const history = engine.getHistory();
+	return {
+		documentId: engine.getDocumentInfo().id,
+		isLoading: false,
+		loadError: void 0,
+		saveStatus: saveState.status,
+		isDirty: saveState.isDirty,
+		isSaving: saveState.isSaving,
+		revision: saveState.revision,
+		lastSavedAt: saveState.lastSavedAt,
+		saveError: saveState.error,
+		canUndo: history.undo.length > 0,
+		canRedo: history.redo.length > 0,
+		undoLabel: history.undo[0],
+		redoLabel: history.redo[0],
+		assetWarnings: []
+	};
+}
+function withLiveEngineValues(engine, previous) {
+	return {
+		...previous,
+		...initialState(engine),
+		isLoading: previous.isLoading,
+		loadError: previous.loadError,
+		assetWarnings: previous.assetWarnings
+	};
+}
+function isSameState(first, second) {
+	return Object.keys(first).every((key) => first[key] === second[key]);
+}
+function createDocumentStateStore(engine) {
+	let state = initialState(engine);
+	const listeners = /* @__PURE__ */ new Set();
+	let detachFromEngine;
+	function update(changes) {
+		const next = {
+			...state,
+			...changes
+		};
+		if (isSameState(state, next)) return;
+		state = next;
+		for (const listener of [...listeners]) listener();
+	}
+	function attachToEngine() {
+		const unsubscribers = [
+			engine.on("load:start", () => update({
+				isLoading: true,
+				loadError: void 0
+			})),
+			engine.on("load:success", ({ warnings }) => update({
+				isLoading: false,
+				assetWarnings: warnings
+			})),
+			engine.on("load:error", ({ error }) => {
+				if (error.code !== "LOAD_ABORTED") update({
+					isLoading: false,
+					loadError: error
+				});
+			}),
+			engine.on("document:change", ({ documentId }) => update({
+				documentId,
+				loadError: void 0
+			})),
+			engine.on("assets:warning", ({ warnings }) => update({ assetWarnings: warnings })),
+			engine.on("save:status", (saveState) => update({
+				saveStatus: saveState.status,
+				isDirty: saveState.isDirty,
+				isSaving: saveState.isSaving,
+				revision: saveState.revision,
+				lastSavedAt: saveState.lastSavedAt,
+				saveError: saveState.error
+			})),
+			engine.on("history:change", (history) => update({
+				canUndo: history.canUndo,
+				canRedo: history.canRedo,
+				undoLabel: history.undoLabel,
+				redoLabel: history.redoLabel
+			}))
+		];
+		return () => unsubscribers.forEach((unsubscribe) => unsubscribe());
+	}
+	function refreshWhileDetached() {
+		if (detachFromEngine) return;
+		const fresh = withLiveEngineValues(engine, state);
+		if (!isSameState(state, fresh)) state = fresh;
+	}
+	return {
+		getSnapshot() {
+			refreshWhileDetached();
+			return state;
+		},
+		subscribe(listener) {
+			refreshWhileDetached();
+			listeners.add(listener);
+			detachFromEngine ?? (detachFromEngine = attachToEngine());
+			return () => {
+				listeners.delete(listener);
+				if (listeners.size > 0) return;
+				detachFromEngine?.();
+				detachFromEngine = void 0;
+			};
+		},
+		destroy() {
+			listeners.clear();
+			detachFromEngine?.();
+			detachFromEngine = void 0;
+		}
+	};
+}
+//#endregion
+exports.createDocumentStateStore = createDocumentStateStore;