fabricjs-document-engine 0.0.0 → 0.2.0

package/dist/engine/create-document-engine.js

@@ -7,6 +7,8 @@ import { loadIntoCanvas, serializeCanvas } from "../fabric/fabric-adapter.js";
 import { readObjectId, writeObjectId } from "../fabric/object-ids.js";
 import { DocumentEngineError, isDocumentEngineError } from "./errors.js";
 import { createObjectRegistry } from "../fabric/object-registry.js";
+import { createHistory } from "../history/create-history.js";
+import { createSaveController } from "../save/save-controller.js";
 import { createEventEmitter } from "./event-emitter.js";
 //#region src/engine/create-document-engine.ts
 function describeDocumentId(value) {
@@ -15,6 +17,7 @@ function describeDocumentId(value) {
 }
 function createDocumentEngine(options) {
 	const { canvas, storage } = options;
+	if (options.autosave && !storage) throw new DocumentEngineError("STORAGE_MISSING", "Autosave needs a storage adapter passed to createDocumentEngine");
 	const registry = createObjectRegistry(options.customObjects);
 	const events = createEventEmitter();
 	const objectsById = /* @__PURE__ */ new Map();
@@ -50,6 +53,27 @@ function createDocumentEngine(options) {
 	canvas.on("object:added", handleObjectAdded);
 	canvas.on("object:removed", handleObjectRemoved);
 	rebuildIndex();
+	const history = createHistory({
+		canvas,
+		limit: options.history?.limit,
+		serializeObjects: () => {
+			rebuildIndex();
+			return serializeCanvas(canvas, registry.propertiesToInclude()).objects;
+		},
+		onChange: (state) => events.emit("history:change", state),
+		onContentChange: () => saving.noteContentChange()
+	});
+	const saving = createSaveController({
+		getStorage: () => requireStorage(),
+		createDocument: () => toDocument(),
+		retry: options.saveRetry,
+		autosave: options.autosave === true ? {} : options.autosave ?? false,
+		onStateChange: (state) => events.emit("save:status", state),
+		onStart: (document) => events.emit("save:start", { document }),
+		onSuccess: (document) => events.emit("save:success", { document }),
+		onError: (error) => events.emit("save:error", { error }),
+		onRetry: (event) => events.emit("save:retry", event)
+	});
 	function toDocument() {
 		ensureUsable();
 		rebuildIndex();
@@ -63,6 +87,7 @@ function createDocumentEngine(options) {
 			id: documentInfo.id,
 			createdAt: documentInfo.createdAt,
 			updatedAt: documentInfo.updatedAt,
+			revision: saving.state().revision,
 			canvas: {
 				width: canvas.getWidth(),
 				height: canvas.getHeight()
@@ -99,11 +124,11 @@ function createDocumentEngine(options) {
 		events.emit("load:start", { documentId: describeDocumentId(input) });
 		try {
 			const document = checkDocument(input);
-			await loadIntoCanvas(canvas, {
+			await history.withoutRecording(() => loadIntoCanvas(canvas, {
 				version: document.fabricVersion,
 				background: document.canvas.background,
 				objects: document.objects
-			}, controller.signal);
+			}, controller.signal));
 			if (controller.signal.aborted) throw new Error("aborted");
 			if (loadOptions.restoreCanvasSize ?? true) canvas.setDimensions({
 				width: document.canvas.width,
@@ -116,6 +141,8 @@ function createDocumentEngine(options) {
 				metadata: { ...document.metadata }
 			};
 			rebuildIndex();
+			history.reset();
+			saving.startSession(document.revision ?? 0);
 			canvas.requestRenderAll();
 			events.emit("load:success", { document });
 			return document;
@@ -139,34 +166,28 @@ function createDocumentEngine(options) {
 			stored = await source.loadDocument(documentId);
 		} catch (error) {
 			const reason = error instanceof Error ? error.message : String(error);
-			const engineError = new DocumentEngineError("LOAD_FAILED", `Storage could not load "${documentId}": ${reason}`, { cause: error });
+			const engineError = isDocumentEngineError(error) ? error : new DocumentEngineError("LOAD_FAILED", `Storage could not load "${documentId}": ${reason}`, { cause: error });
 			events.emit("load:error", { error: engineError });
 			throw engineError;
 		}
 		return loadDocument(stored, loadOptions);
 	}
-	async function save() {
-		ensureUsable();
-		const target = requireStorage();
-		const document = toDocument();
-		events.emit("save:start", { document });
+	function save(saveOptions) {
 		try {
-			await target.saveDocument(document);
+			ensureUsable();
 		} catch (error) {
-			const reason = error instanceof Error ? error.message : String(error);
-			const engineError = new DocumentEngineError("SAVE_FAILED", `Storage could not save the document: ${reason}`, { cause: error });
-			events.emit("save:error", { error: engineError });
-			throw engineError;
+			return Promise.reject(error);
 		}
-		events.emit("save:success", { document });
-		return document;
+		return saving.save(saveOptions);
 	}
 	function newDocument(newOptions) {
 		ensureUsable();
 		activeLoad?.abort();
-		canvas.clear();
+		history.withoutRecording(() => canvas.clear());
 		objectsById.clear();
 		documentInfo = createDocumentInfo(newOptions);
+		history.reset();
+		saving.startSession(0);
 	}
 	function getObjectById(id) {
 		ensureUsable();
@@ -175,10 +196,23 @@ function createDocumentEngine(options) {
 		rebuildIndex();
 		return objectsById.get(id);
 	}
+	async function travelThroughHistory(direction) {
+		ensureUsable();
+		try {
+			return await history[direction]();
+		} catch (error) {
+			const reason = error instanceof Error ? error.message : String(error);
+			const engineError = new DocumentEngineError("HISTORY_FAILED", `Could not ${direction}: ${reason}`, { cause: error });
+			events.emit("history:error", { error: engineError });
+			throw engineError;
+		}
+	}
 	function destroy() {
 		if (destroyed) return;
 		destroyed = true;
 		activeLoad?.abort();
+		history.destroy();
+		saving.destroy();
 		canvas.off("object:added", handleObjectAdded);
 		canvas.off("object:removed", handleObjectRemoved);
 		objectsById.clear();
@@ -199,17 +233,37 @@ function createDocumentEngine(options) {
 					...changes
 				}
 			};
+			saving.noteContentChange();
 		},
 		newDocument,
 		toDocument,
 		loadDocument,
 		load,
 		save,
+		isDirty: () => saving.state().isDirty,
+		getSaveState: () => saving.state(),
 		registerObject(definition) {
 			ensureUsable();
 			registry.register(definition);
 		},
 		getObjectById,
+		transaction(label, work) {
+			ensureUsable();
+			return history.transaction(label, work);
+		},
+		commit(label = "Edit") {
+			ensureUsable();
+			return history.commit(label);
+		},
+		undo: () => travelThroughHistory("undo"),
+		redo: () => travelThroughHistory("redo"),
+		canUndo: () => history.state().canUndo,
+		canRedo: () => history.state().canRedo,
+		getHistory: () => history.labels(),
+		clearHistory() {
+			ensureUsable();
+			history.reset();
+		},
 		on: (name, handler) => events.on(name, handler),
 		destroy
 	};

package/dist/engine/errors.cjs

@@ -7,11 +7,16 @@ var DocumentEngineError = class extends Error {
 		this.issues = details.issues ?? [];
 		this.unknownTypes = details.unknownTypes ?? [];
 		this.cause = details.cause;
+		this.retryable = details.retryable ?? false;
 	}
 };
 function isDocumentEngineError(value) {
 	return value instanceof DocumentEngineError;
 }
+function createConflictError(documentId, expectedRevision, actualRevision) {
+	return new DocumentEngineError("SAVE_CONFLICT", `Document "${documentId}" was saved somewhere else: expected revision ${expectedRevision} but storage has ${actualRevision}`);
+}
 //#endregion
 exports.DocumentEngineError = DocumentEngineError;
+exports.createConflictError = createConflictError;
 exports.isDocumentEngineError = isDocumentEngineError;

package/dist/engine/errors.d.cts

@@ -1,5 +1,5 @@
 //#region src/engine/errors.d.ts
-export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "STORAGE_MISSING" | "SAVE_FAILED" | "ENGINE_DESTROYED";
+export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "STORAGE_MISSING" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "ENGINE_DESTROYED";
 export interface DocumentIssue {
   code: DocumentErrorCode;
   path: string;
@@ -9,13 +9,16 @@ export interface DocumentEngineErrorDetails {
   issues?: DocumentIssue[];
   unknownTypes?: string[];
   cause?: unknown;
+  retryable?: boolean;
 }
 export declare class DocumentEngineError extends Error {
   readonly code: DocumentErrorCode;
   readonly issues: DocumentIssue[];
   readonly unknownTypes: string[];
   readonly cause: unknown;
+  readonly retryable: boolean;
   constructor(code: DocumentErrorCode, message: string, details?: DocumentEngineErrorDetails);
 }
 export declare function isDocumentEngineError(value: unknown): value is DocumentEngineError;
+export declare function createConflictError(documentId: string, expectedRevision: number, actualRevision: number): DocumentEngineError;
 //#endregion

package/dist/engine/errors.d.ts

@@ -1,5 +1,5 @@
 //#region src/engine/errors.d.ts
-export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "STORAGE_MISSING" | "SAVE_FAILED" | "ENGINE_DESTROYED";
+export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "STORAGE_MISSING" | "SAVE_FAILED" | "SAVE_CONFLICT" | "SAVE_CANCELLED" | "DOCUMENT_NOT_FOUND" | "HISTORY_FAILED" | "ENGINE_DESTROYED";
 export interface DocumentIssue {
   code: DocumentErrorCode;
   path: string;
@@ -9,13 +9,16 @@ export interface DocumentEngineErrorDetails {
   issues?: DocumentIssue[];
   unknownTypes?: string[];
   cause?: unknown;
+  retryable?: boolean;
 }
 export declare class DocumentEngineError extends Error {
   readonly code: DocumentErrorCode;
   readonly issues: DocumentIssue[];
   readonly unknownTypes: string[];
   readonly cause: unknown;
+  readonly retryable: boolean;
   constructor(code: DocumentErrorCode, message: string, details?: DocumentEngineErrorDetails);
 }
 export declare function isDocumentEngineError(value: unknown): value is DocumentEngineError;
+export declare function createConflictError(documentId: string, expectedRevision: number, actualRevision: number): DocumentEngineError;
 //#endregion

package/dist/engine/errors.js

@@ -7,10 +7,14 @@ var DocumentEngineError = class extends Error {
 		this.issues = details.issues ?? [];
 		this.unknownTypes = details.unknownTypes ?? [];
 		this.cause = details.cause;
+		this.retryable = details.retryable ?? false;
 	}
 };
 function isDocumentEngineError(value) {
 	return value instanceof DocumentEngineError;
 }
+function createConflictError(documentId, expectedRevision, actualRevision) {
+	return new DocumentEngineError("SAVE_CONFLICT", `Document "${documentId}" was saved somewhere else: expected revision ${expectedRevision} but storage has ${actualRevision}`);
+}
 //#endregion
-export { DocumentEngineError, isDocumentEngineError };
+export { DocumentEngineError, createConflictError, isDocumentEngineError };

package/dist/fabric/fabric-adapter.cjs

@@ -1,4 +1,5 @@
 const require_walk_objects = require("./walk-objects.cjs");
+let fabric = require("fabric");
 //#region src/fabric/fabric-adapter.ts
 function keepOriginExplicit(liveObjects, serializedObjects) {
 	const pending = [];
@@ -56,13 +57,17 @@ function refuseMissingObjects(serialized, created, error) {
 	const actual = countLiveTree(created);
 	if (actual !== expected) throw new Error(`Only ${actual} of ${expected} objects inside the ${describeObject(serialized)} could be created`);
 }
+const strictReviver = refuseMissingObjects;
+function createObjects(serializedObjects) {
+	return fabric.util.enlivenObjects(serializedObjects, { reviver: strictReviver });
+}
 async function loadIntoCanvas(canvas, content, signal) {
 	const json = { objects: content.objects };
 	if (content.version !== void 0) json.version = content.version;
 	if (content.background !== void 0) json.background = content.background;
-	const reviver = refuseMissingObjects;
-	await canvas.loadFromJSON(json, reviver, { signal });
+	await canvas.loadFromJSON(json, strictReviver, { signal });
 }
 //#endregion
+exports.createObjects = createObjects;
 exports.loadIntoCanvas = loadIntoCanvas;
 exports.serializeCanvas = serializeCanvas;

package/dist/fabric/fabric-adapter.js

@@ -1,4 +1,5 @@
 import { childrenOf, walkObjects } from "./walk-objects.js";
+import { util } from "fabric";
 //#region src/fabric/fabric-adapter.ts
 function keepOriginExplicit(liveObjects, serializedObjects) {
 	const pending = [];
@@ -56,12 +57,15 @@ function refuseMissingObjects(serialized, created, error) {
 	const actual = countLiveTree(created);
 	if (actual !== expected) throw new Error(`Only ${actual} of ${expected} objects inside the ${describeObject(serialized)} could be created`);
 }
+const strictReviver = refuseMissingObjects;
+function createObjects(serializedObjects) {
+	return util.enlivenObjects(serializedObjects, { reviver: strictReviver });
+}
 async function loadIntoCanvas(canvas, content, signal) {
 	const json = { objects: content.objects };
 	if (content.version !== void 0) json.version = content.version;
 	if (content.background !== void 0) json.background = content.background;
-	const reviver = refuseMissingObjects;
-	await canvas.loadFromJSON(json, reviver, { signal });
+	await canvas.loadFromJSON(json, strictReviver, { signal });
 }
 //#endregion
-export { loadIntoCanvas, serializeCanvas };
+export { createObjects, loadIntoCanvas, serializeCanvas };

package/dist/history/apply-state.cjs

@@ -0,0 +1,48 @@
+const require_fabric_adapter = require("../fabric/fabric-adapter.cjs");
+const require_object_ids = require("../fabric/object-ids.cjs");
+//#region src/history/apply-state.ts
+function arrangeObjects(current, change, created) {
+	const arranged = [];
+	for (const object of current) {
+		const id = require_object_ids.readObjectId(object) ?? "";
+		if (!change.objects.has(id)) {
+			arranged.push(object);
+			continue;
+		}
+		const replacement = created.get(id);
+		if (replacement) {
+			arranged.push(replacement);
+			created.delete(id);
+		}
+	}
+	arranged.push(...created.values());
+	if (change.order === null) return arranged;
+	const position = new Map(change.order.map((id, index) => [id, index]));
+	return arranged.sort((first, second) => (position.get(require_object_ids.readObjectId(first) ?? "") ?? Infinity) - (position.get(require_object_ids.readObjectId(second) ?? "") ?? Infinity));
+}
+async function applyStateChange(canvas, change) {
+	const serializedObjects = [];
+	for (const json of change.objects.values()) if (json !== null) serializedObjects.push(JSON.parse(json));
+	const createdObjects = await require_fabric_adapter.createObjects(serializedObjects);
+	const createdById = new Map(createdObjects.map((object) => [require_object_ids.readObjectId(object) ?? "", object]));
+	canvas.discardActiveObject?.();
+	const current = canvas.getObjects();
+	const arranged = arrangeObjects(current, change, createdById);
+	const kept = new Set(arranged);
+	const renderOnAddRemove = canvas.renderOnAddRemove;
+	canvas.renderOnAddRemove = false;
+	try {
+		const outgoing = current.filter((object) => !kept.has(object));
+		if (outgoing.length > 0) canvas.remove(...outgoing);
+		arranged.forEach((object, index) => {
+			if (canvas.getObjects()[index] === object) return;
+			if (object.canvas === canvas) canvas.moveObjectTo(object, index);
+			else canvas.insertAt(index, object);
+		});
+	} finally {
+		canvas.renderOnAddRemove = renderOnAddRemove;
+	}
+	canvas.requestRenderAll();
+}
+//#endregion
+exports.applyStateChange = applyStateChange;

package/dist/history/apply-state.js

@@ -0,0 +1,48 @@
+import { createObjects } from "../fabric/fabric-adapter.js";
+import { readObjectId } from "../fabric/object-ids.js";
+//#region src/history/apply-state.ts
+function arrangeObjects(current, change, created) {
+	const arranged = [];
+	for (const object of current) {
+		const id = readObjectId(object) ?? "";
+		if (!change.objects.has(id)) {
+			arranged.push(object);
+			continue;
+		}
+		const replacement = created.get(id);
+		if (replacement) {
+			arranged.push(replacement);
+			created.delete(id);
+		}
+	}
+	arranged.push(...created.values());
+	if (change.order === null) return arranged;
+	const position = new Map(change.order.map((id, index) => [id, index]));
+	return arranged.sort((first, second) => (position.get(readObjectId(first) ?? "") ?? Infinity) - (position.get(readObjectId(second) ?? "") ?? Infinity));
+}
+async function applyStateChange(canvas, change) {
+	const serializedObjects = [];
+	for (const json of change.objects.values()) if (json !== null) serializedObjects.push(JSON.parse(json));
+	const createdObjects = await createObjects(serializedObjects);
+	const createdById = new Map(createdObjects.map((object) => [readObjectId(object) ?? "", object]));
+	canvas.discardActiveObject?.();
+	const current = canvas.getObjects();
+	const arranged = arrangeObjects(current, change, createdById);
+	const kept = new Set(arranged);
+	const renderOnAddRemove = canvas.renderOnAddRemove;
+	canvas.renderOnAddRemove = false;
+	try {
+		const outgoing = current.filter((object) => !kept.has(object));
+		if (outgoing.length > 0) canvas.remove(...outgoing);
+		arranged.forEach((object, index) => {
+			if (canvas.getObjects()[index] === object) return;
+			if (object.canvas === canvas) canvas.moveObjectTo(object, index);
+			else canvas.insertAt(index, object);
+		});
+	} finally {
+		canvas.renderOnAddRemove = renderOnAddRemove;
+	}
+	canvas.requestRenderAll();
+}
+//#endregion
+export { applyStateChange };

package/dist/history/create-history.cjs

@@ -0,0 +1,193 @@
+const require_apply_state = require("./apply-state.cjs");
+const require_history_stack = require("./history-stack.cjs");
+const require_snapshot = require("./snapshot.cjs");
+//#region src/history/create-history.ts
+const verbsByAction = {
+	drag: "Move",
+	rotate: "Rotate",
+	scale: "Resize",
+	scaleX: "Resize",
+	scaleY: "Resize",
+	resizing: "Resize",
+	skewX: "Skew",
+	skewY: "Skew"
+};
+function nameOf(object) {
+	return (object.constructor.type ?? object.type).toLowerCase();
+}
+function isPromiseLike(value) {
+	return typeof value?.then === "function";
+}
+function describePendingChanges(changes) {
+	if (new Set(changes.map((change) => change.verb)).size > 1) return "Edit objects";
+	const verb = changes[0]?.verb ?? "Edit";
+	return changes.length === 1 ? `${verb} ${changes[0].noun}` : `${verb} ${changes.length} objects`;
+}
+function createHistory(options) {
+	const { canvas, serializeObjects, onChange, onContentChange } = options;
+	const stack = require_history_stack.createHistoryStack(Math.max(1, options.limit ?? 100));
+	let snapshot = require_snapshot.createSnapshot(serializeObjects());
+	let pendingChanges = [];
+	let flushScheduled = false;
+	let transactionDepth = 0;
+	let pausedDepth = 0;
+	let applying = false;
+	let queue = Promise.resolve();
+	function state() {
+		const undoLabels = stack.undoLabels();
+		const redoLabels = stack.redoLabels();
+		return {
+			canUndo: undoLabels.length > 0,
+			canRedo: redoLabels.length > 0,
+			undoLabel: undoLabels[0],
+			redoLabel: redoLabels[0]
+		};
+	}
+	function commit(label) {
+		pendingChanges = [];
+		const nextSnapshot = require_snapshot.createSnapshot(serializeObjects());
+		const difference = require_snapshot.diffSnapshots(snapshot, nextSnapshot);
+		snapshot = nextSnapshot;
+		if (difference === null) return false;
+		stack.record({
+			label,
+			...difference
+		});
+		onContentChange();
+		onChange(state());
+		return true;
+	}
+	function isRecording() {
+		return !applying && pausedDepth === 0 && transactionDepth === 0;
+	}
+	function commitPendingChanges() {
+		flushScheduled = false;
+		if (pendingChanges.length === 0) return;
+		if (isRecording()) commit(describePendingChanges(pendingChanges));
+		pendingChanges = [];
+	}
+	function notice(verb, target) {
+		if (!isRecording()) return;
+		pendingChanges.push({
+			verb,
+			noun: nameOf(target)
+		});
+		if (flushScheduled) return;
+		flushScheduled = true;
+		queueMicrotask(commitPendingChanges);
+	}
+	const handleAdded = ({ target }) => notice("Add", target);
+	const handleRemoved = ({ target }) => notice("Delete", target);
+	const handleModified = (event) => {
+		const action = event.action ?? event.transform?.action ?? "";
+		notice(verbsByAction[action] ?? "Transform", event.target);
+	};
+	const handleTextEdited = ({ target }) => notice("Edit", target);
+	const listeners = [
+		["object:added", handleAdded],
+		["object:removed", handleRemoved],
+		["object:modified", handleModified],
+		["text:editing:exited", handleTextEdited]
+	];
+	const eventTarget = canvas;
+	listeners.forEach(([name, handler]) => eventTarget.on(name, handler));
+	function transaction(label, work) {
+		if (transactionDepth === 0) commitPendingChanges();
+		transactionDepth += 1;
+		const finish = () => {
+			transactionDepth -= 1;
+			if (transactionDepth === 0) commit(label);
+		};
+		let result;
+		try {
+			result = work();
+		} catch (error) {
+			finish();
+			throw error;
+		}
+		if (!isPromiseLike(result)) {
+			finish();
+			return result;
+		}
+		return Promise.resolve(result).then((value) => {
+			finish();
+			return value;
+		}, (error) => {
+			finish();
+			throw error;
+		});
+	}
+	function withoutRecording(work) {
+		pausedDepth += 1;
+		let result;
+		try {
+			result = work();
+		} catch (error) {
+			pausedDepth -= 1;
+			throw error;
+		}
+		if (!isPromiseLike(result)) {
+			pausedDepth -= 1;
+			return result;
+		}
+		return Promise.resolve(result).finally(() => {
+			pausedDepth -= 1;
+		});
+	}
+	function runInOrder(task) {
+		const run = queue.then(task);
+		queue = run.catch(() => void 0);
+		return run;
+	}
+	function travel(takeStep, pickChange, putBack, moveTo) {
+		return runInOrder(async () => {
+			if (transactionDepth > 0) return false;
+			commitPendingChanges();
+			const step = takeStep();
+			if (step === void 0) return false;
+			applying = true;
+			try {
+				await require_apply_state.applyStateChange(canvas, pickChange(step));
+			} catch (error) {
+				putBack(step);
+				throw error;
+			} finally {
+				applying = false;
+			}
+			snapshot = require_snapshot.createSnapshot(serializeObjects());
+			moveTo(step);
+			onContentChange();
+			onChange(state());
+			return true;
+		});
+	}
+	return {
+		commit(label) {
+			if (applying) return false;
+			return commit(label);
+		},
+		transaction,
+		undo: () => travel(() => stack.takeUndo(), (step) => step.before, (step) => stack.returnUndo(step), (step) => stack.returnRedo(step)),
+		redo: () => travel(() => stack.takeRedo(), (step) => step.after, (step) => stack.returnRedo(step), (step) => stack.returnUndo(step)),
+		state,
+		labels: () => ({
+			undo: stack.undoLabels(),
+			redo: stack.redoLabels()
+		}),
+		withoutRecording,
+		reset() {
+			pendingChanges = [];
+			stack.clear();
+			snapshot = require_snapshot.createSnapshot(serializeObjects());
+			onChange(state());
+		},
+		destroy() {
+			listeners.forEach(([name, handler]) => eventTarget.off(name, handler));
+			pendingChanges = [];
+			stack.clear();
+		}
+	};
+}
+//#endregion
+exports.createHistory = createHistory;
+exports.describePendingChanges = describePendingChanges;

package/dist/history/create-history.d.cts

@@ -0,0 +1,12 @@
+import { StaticCanvas } from "fabric";
+//#region src/history/create-history.d.ts
+export interface HistoryOptions {
+  limit?: number;
+}
+export interface HistoryState {
+  canUndo: boolean;
+  canRedo: boolean;
+  undoLabel: string | undefined;
+  redoLabel: string | undefined;
+}
+//#endregion

package/dist/history/create-history.d.ts

@@ -0,0 +1,12 @@
+import { StaticCanvas } from "fabric";
+//#region src/history/create-history.d.ts
+export interface HistoryOptions {
+  limit?: number;
+}
+export interface HistoryState {
+  canUndo: boolean;
+  canRedo: boolean;
+  undoLabel: string | undefined;
+  redoLabel: string | undefined;
+}
+//#endregion