fabricjs-document-engine 0.0.0 → 0.1.0

package/README.md

@@ -9,6 +9,7 @@ Fabric already draws objects, handles interaction and serializes to JSON. This p
 - **Safe loading.** Documents are validated first. Unknown object types are refused before the canvas is touched. A missing image fails the load instead of silently disappearing. When loads overlap, the newest one wins.
 - **Custom objects.** Register your own Fabric classes and the extra properties they need to keep.
 - **Your storage.** Plug in any backend with two functions. No hosted service is needed.
+- **Reliable undo and redo.** One user action is one undo step. Transactions group several code changes into one labelled step, and ids survive undo and redo.
 - **Fabric 6 and 7.** Every release is tested against both.
 
 ## Install
@@ -68,6 +69,54 @@ const engine = createDocumentEngine({
 
 If a document contains a type that has not been registered, loading fails with `UNKNOWN_OBJECT_TYPE` and lists the missing types. Your object is never turned into something else.
 
+## Undo and redo
+
+History is on by default. The engine records these automatically:
+
+- adding and deleting objects, where several changes in the same tick become one step
+- pointer moves, resizes and rotations (Fabric's `object:modified`)
+- finished text editing
+
+Fabric fires no events for changes your code makes directly, such as `object.set('fill', 'red')` or `canvas.bringObjectForward(object)`. Wrap them in a transaction or call `commit`:
+
+```ts
+engine.transaction('Arrange furniture', () => {
+  chair.set({ left: 120, top: 80 });
+  table.set('fill', 'oak');
+  canvas.bringObjectToFront(table);
+});
+
+canvas.sendObjectBackwards(rug);
+engine.commit('Send rug backwards');
+
+await engine.undo();
+await engine.redo();
+```
+
+- Transactions can be nested, and the outermost label is used. They can also be async: `await engine.transaction('Import', async () => { ... })`.
+- Grouping and ungrouping are ordinary changes to the object list. Do the remove and the add inside one transaction and they take one undo step.
+- Undo and redo rebuild the changed objects from their saved state, so they come back as new instances with the same ids. Look them up again with `engine.getObjectById(id)` rather than keeping old references.
+- Keep the last 50 steps with `createDocumentEngine({ canvas, history: { limit: 50 } })`. The default is 100.
+
+### Keyboard shortcuts
+
+```ts
+import { bindKeyboardShortcuts } from 'fabricjs-document-engine';
+
+const unbind = bindKeyboardShortcuts(engine);
+```
+
+Ctrl/Cmd + Z undoes. Ctrl/Cmd + Shift + Z and Ctrl + Y redo. Shortcuts are ignored while the user is typing in an input, a textarea, a contenteditable element or Fabric text, so native text undo keeps working there. Pass `{ target: element }` to listen somewhere other than `window`.
+
+### Toolbar state
+
+```ts
+engine.on('history:change', ({ canUndo, canRedo, undoLabel, redoLabel }) => {
+  undoButton.disabled = !canUndo;
+  undoButton.title = undoLabel ? `Undo ${undoLabel}` : 'Undo';
+});
+```
+
 ## Document format
 
 ```ts
@@ -98,7 +147,14 @@ Keep project data such as titles, owners and tags in `metadata` with `engine.upd
 | `engine.updateMetadata(changes)` | Merges changes into the document metadata. |
 | `engine.getObjectById(id)` | Finds any object by id, including objects inside groups. |
 | `engine.registerObject({ fabricClass, properties })` | Registers a custom class after the engine is created. |
-| `engine.on(event, handler)` | Listens to `load:start`, `load:success`, `load:error`, `save:start`, `save:success` or `save:error`. Returns an unsubscribe function. |
+| `engine.transaction(label, work)` | Runs `work` and records everything it changed as one undo step. Returns what `work` returns. |
+| `engine.commit(label?)` | Records changes made since the last step. Returns `false` when nothing changed. |
+| `engine.undo()` / `engine.redo()` | Resolves to `true` when a step was applied. Calls run one after another. |
+| `engine.canUndo()` / `engine.canRedo()` | Tells you whether a step is available. |
+| `engine.getHistory()` | Returns `{ undo, redo }` label lists, newest first. |
+| `engine.clearHistory()` | Forgets all steps. Loading a document or starting a new one also does this. |
+| `bindKeyboardShortcuts(engine, { target? })` | Adds the undo and redo shortcuts. Returns an unbind function. |
+| `engine.on(event, handler)` | Listens to `load:start`, `load:success`, `load:error`, `save:start`, `save:success`, `save:error`, `history:change` or `history:error`. Returns an unsubscribe function. |
 | `engine.destroy()` | Stops listening to the canvas and cancels a running load. |
 | `validateDocument(value)` | Returns a list of issues with the exact path of each problem. |
 
@@ -114,6 +170,7 @@ Every failure is a `DocumentEngineError` with a `code` you can switch on:
 | `LOAD_FAILED` | Fabric or your storage could not load the document, for example because an image is missing. `error.cause` holds the original error. |
 | `LOAD_ABORTED` | A newer load started before this one finished. |
 | `SAVE_FAILED` | Your storage adapter rejected the save. |
+| `HISTORY_FAILED` | Undo or redo could not rebuild an object, for example because an image is gone. The step is kept and the canvas is unchanged. |
 | `STORAGE_MISSING` | `load` or `save` was called without a storage adapter. |
 | `INVALID_CUSTOM_OBJECT` | A registered class has no static `type`, or it does not extend a Fabric class. |
 | `ENGINE_DESTROYED` | The engine was used after `destroy()`. |
@@ -124,8 +181,8 @@ A failed load never clears or half-fills your canvas.
 
 | Version | Focus |
 | --- | --- |
-| 0.1 | Document foundation: ids, save and load, validation, custom objects |
-| 0.2 | Undo and redo with transactions |
+| 0.1 ✓ | Document foundation: ids, save and load, validation, custom objects |
+| 0.2 ✓ | Undo and redo with transactions |
 | 0.3 | Safe saving: dirty state, autosave, stale-response protection |
 | 0.4 | Assets and fonts |
 | 0.5 | Recovery after a refresh or crash |

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

@@ -7,6 +7,7 @@ const require_fabric_adapter = require("../fabric/fabric-adapter.cjs");
 const require_object_ids = require("../fabric/object-ids.cjs");
 const require_errors = require("./errors.cjs");
 const require_object_registry = require("../fabric/object-registry.cjs");
+const require_create_history = require("../history/create-history.cjs");
 const require_event_emitter = require("./event-emitter.cjs");
 //#region src/engine/create-document-engine.ts
 function describeDocumentId(value) {
@@ -50,6 +51,15 @@ function createDocumentEngine(options) {
 	canvas.on("object:added", handleObjectAdded);
 	canvas.on("object:removed", handleObjectRemoved);
 	rebuildIndex();
+	const history = require_create_history.createHistory({
+		canvas,
+		limit: options.history?.limit,
+		serializeObjects: () => {
+			rebuildIndex();
+			return require_fabric_adapter.serializeCanvas(canvas, registry.propertiesToInclude()).objects;
+		},
+		onChange: (state) => events.emit("history:change", state)
+	});
 	function toDocument() {
 		ensureUsable();
 		rebuildIndex();
@@ -99,11 +109,11 @@ function createDocumentEngine(options) {
 		events.emit("load:start", { documentId: describeDocumentId(input) });
 		try {
 			const document = checkDocument(input);
-			await require_fabric_adapter.loadIntoCanvas(canvas, {
+			await history.withoutRecording(() => require_fabric_adapter.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 +126,7 @@ function createDocumentEngine(options) {
 				metadata: { ...document.metadata }
 			};
 			rebuildIndex();
+			history.reset();
 			canvas.requestRenderAll();
 			events.emit("load:success", { document });
 			return document;
@@ -164,9 +175,10 @@ function createDocumentEngine(options) {
 	function newDocument(newOptions) {
 		ensureUsable();
 		activeLoad?.abort();
-		canvas.clear();
+		history.withoutRecording(() => canvas.clear());
 		objectsById.clear();
 		documentInfo = require_create_document.createDocumentInfo(newOptions);
+		history.reset();
 	}
 	function getObjectById(id) {
 		ensureUsable();
@@ -175,10 +187,22 @@ 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 require_errors.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();
 		canvas.off("object:added", handleObjectAdded);
 		canvas.off("object:removed", handleObjectRemoved);
 		objectsById.clear();
@@ -210,6 +234,23 @@ function createDocumentEngine(options) {
 			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/create-document-engine.d.cts

@@ -1,6 +1,7 @@
 import { DocumentInfo, FabricDocument } from "../document/document-format.cjs";
 import { NewDocumentOptions } from "../document/create-document.cjs";
 import { CustomObjectDefinition } from "../fabric/object-registry.cjs";
+import { HistoryOptions, HistoryState } from "../history/create-history.cjs";
 import { DocumentEngineError } from "./errors.cjs";
 import { Unsubscribe } from "./event-emitter.cjs";
 import { FabricObject, StaticCanvas } from "fabric";
@@ -14,6 +15,7 @@ export interface DocumentEngineOptions {
   storage?: DocumentStorage;
   customObjects?: CustomObjectDefinition[];
   document?: NewDocumentOptions;
+  history?: HistoryOptions;
 }
 export interface LoadOptions {
   restoreCanvasSize?: boolean;
@@ -37,6 +39,10 @@ export interface DocumentEngineEvents {
   "save:error": {
     error: DocumentEngineError;
   };
+  "history:change": HistoryState;
+  "history:error": {
+    error: DocumentEngineError;
+  };
 }
 export interface DocumentEngine {
   readonly canvas: StaticCanvas;
@@ -48,6 +54,17 @@ export interface DocumentEngine {
   load(documentId: string, options?: LoadOptions): Promise<FabricDocument>;
   save(): Promise<FabricDocument>;
   registerObject(definition: CustomObjectDefinition): void;
+  transaction<Result>(label: string, work: () => Result): Result;
+  commit(label?: string): boolean;
+  undo(): Promise<boolean>;
+  redo(): Promise<boolean>;
+  canUndo(): boolean;
+  canRedo(): boolean;
+  getHistory(): {
+    undo: string[];
+    redo: string[];
+  };
+  clearHistory(): void;
   getObjectById(id: string): FabricObject | undefined;
   on<Name extends keyof DocumentEngineEvents>(name: Name, handler: (payload: DocumentEngineEvents[Name]) => void): Unsubscribe;
   destroy(): void;

package/dist/engine/create-document-engine.d.ts

@@ -1,6 +1,7 @@
 import { DocumentInfo, FabricDocument } from "../document/document-format.js";
 import { NewDocumentOptions } from "../document/create-document.js";
 import { CustomObjectDefinition } from "../fabric/object-registry.js";
+import { HistoryOptions, HistoryState } from "../history/create-history.js";
 import { DocumentEngineError } from "./errors.js";
 import { Unsubscribe } from "./event-emitter.js";
 import { FabricObject, StaticCanvas } from "fabric";
@@ -14,6 +15,7 @@ export interface DocumentEngineOptions {
   storage?: DocumentStorage;
   customObjects?: CustomObjectDefinition[];
   document?: NewDocumentOptions;
+  history?: HistoryOptions;
 }
 export interface LoadOptions {
   restoreCanvasSize?: boolean;
@@ -37,6 +39,10 @@ export interface DocumentEngineEvents {
   "save:error": {
     error: DocumentEngineError;
   };
+  "history:change": HistoryState;
+  "history:error": {
+    error: DocumentEngineError;
+  };
 }
 export interface DocumentEngine {
   readonly canvas: StaticCanvas;
@@ -48,6 +54,17 @@ export interface DocumentEngine {
   load(documentId: string, options?: LoadOptions): Promise<FabricDocument>;
   save(): Promise<FabricDocument>;
   registerObject(definition: CustomObjectDefinition): void;
+  transaction<Result>(label: string, work: () => Result): Result;
+  commit(label?: string): boolean;
+  undo(): Promise<boolean>;
+  redo(): Promise<boolean>;
+  canUndo(): boolean;
+  canRedo(): boolean;
+  getHistory(): {
+    undo: string[];
+    redo: string[];
+  };
+  clearHistory(): void;
   getObjectById(id: string): FabricObject | undefined;
   on<Name extends keyof DocumentEngineEvents>(name: Name, handler: (payload: DocumentEngineEvents[Name]) => void): Unsubscribe;
   destroy(): void;

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

@@ -7,6 +7,7 @@ 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 { createEventEmitter } from "./event-emitter.js";
 //#region src/engine/create-document-engine.ts
 function describeDocumentId(value) {
@@ -50,6 +51,15 @@ 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)
+	});
 	function toDocument() {
 		ensureUsable();
 		rebuildIndex();
@@ -99,11 +109,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 +126,7 @@ function createDocumentEngine(options) {
 				metadata: { ...document.metadata }
 			};
 			rebuildIndex();
+			history.reset();
 			canvas.requestRenderAll();
 			events.emit("load:success", { document });
 			return document;
@@ -164,9 +175,10 @@ function createDocumentEngine(options) {
 	function newDocument(newOptions) {
 		ensureUsable();
 		activeLoad?.abort();
-		canvas.clear();
+		history.withoutRecording(() => canvas.clear());
 		objectsById.clear();
 		documentInfo = createDocumentInfo(newOptions);
+		history.reset();
 	}
 	function getObjectById(id) {
 		ensureUsable();
@@ -175,10 +187,22 @@ 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();
 		canvas.off("object:added", handleObjectAdded);
 		canvas.off("object:removed", handleObjectRemoved);
 		objectsById.clear();
@@ -210,6 +234,23 @@ function createDocumentEngine(options) {
 			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.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" | "HISTORY_FAILED" | "ENGINE_DESTROYED";
 export interface DocumentIssue {
   code: DocumentErrorCode;
   path: string;

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" | "HISTORY_FAILED" | "ENGINE_DESTROYED";
 export interface DocumentIssue {
   code: DocumentErrorCode;
   path: string;

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,191 @@
+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 } = 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
+		});
+		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);
+			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

package/dist/history/create-history.js

@@ -0,0 +1,190 @@
+import { applyStateChange } from "./apply-state.js";
+import { createHistoryStack } from "./history-stack.js";
+import { createSnapshot, diffSnapshots } from "./snapshot.js";
+//#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 } = options;
+	const stack = createHistoryStack(Math.max(1, options.limit ?? 100));
+	let 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 = createSnapshot(serializeObjects());
+		const difference = diffSnapshots(snapshot, nextSnapshot);
+		snapshot = nextSnapshot;
+		if (difference === null) return false;
+		stack.record({
+			label,
+			...difference
+		});
+		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 applyStateChange(canvas, pickChange(step));
+			} catch (error) {
+				putBack(step);
+				throw error;
+			} finally {
+				applying = false;
+			}
+			snapshot = createSnapshot(serializeObjects());
+			moveTo(step);
+			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 = createSnapshot(serializeObjects());
+			onChange(state());
+		},
+		destroy() {
+			listeners.forEach(([name, handler]) => eventTarget.off(name, handler));
+			pendingChanges = [];
+			stack.clear();
+		}
+	};
+}
+//#endregion
+export { createHistory, describePendingChanges };

package/dist/history/history-stack.cjs

@@ -0,0 +1,27 @@
+//#region src/history/history-stack.ts
+function createHistoryStack(limit) {
+	const undoSteps = [];
+	const redoSteps = [];
+	function pushWithinLimit(steps, step) {
+		steps.push(step);
+		if (steps.length > limit) steps.shift();
+	}
+	return {
+		record(step) {
+			pushWithinLimit(undoSteps, step);
+			redoSteps.length = 0;
+		},
+		takeUndo: () => undoSteps.pop(),
+		takeRedo: () => redoSteps.pop(),
+		returnUndo: (step) => pushWithinLimit(undoSteps, step),
+		returnRedo: (step) => pushWithinLimit(redoSteps, step),
+		undoLabels: () => undoSteps.map((step) => step.label).reverse(),
+		redoLabels: () => redoSteps.map((step) => step.label).reverse(),
+		clear() {
+			undoSteps.length = 0;
+			redoSteps.length = 0;
+		}
+	};
+}
+//#endregion
+exports.createHistoryStack = createHistoryStack;

package/dist/history/history-stack.js

@@ -0,0 +1,27 @@
+//#region src/history/history-stack.ts
+function createHistoryStack(limit) {
+	const undoSteps = [];
+	const redoSteps = [];
+	function pushWithinLimit(steps, step) {
+		steps.push(step);
+		if (steps.length > limit) steps.shift();
+	}
+	return {
+		record(step) {
+			pushWithinLimit(undoSteps, step);
+			redoSteps.length = 0;
+		},
+		takeUndo: () => undoSteps.pop(),
+		takeRedo: () => redoSteps.pop(),
+		returnUndo: (step) => pushWithinLimit(undoSteps, step),
+		returnRedo: (step) => pushWithinLimit(redoSteps, step),
+		undoLabels: () => undoSteps.map((step) => step.label).reverse(),
+		redoLabels: () => redoSteps.map((step) => step.label).reverse(),
+		clear() {
+			undoSteps.length = 0;
+			redoSteps.length = 0;
+		}
+	};
+}
+//#endregion
+export { createHistoryStack };

package/dist/history/keyboard-shortcuts.cjs

@@ -0,0 +1,32 @@
+//#region src/history/keyboard-shortcuts.ts
+function isTypingInto(element) {
+	if (!(element instanceof HTMLElement)) return false;
+	if (element.isContentEditable) return true;
+	return [
+		"INPUT",
+		"TEXTAREA",
+		"SELECT"
+	].includes(element.tagName);
+}
+function chooseAction(event) {
+	if (!(event.metaKey || event.ctrlKey) || event.altKey) return null;
+	const key = event.key.toLowerCase();
+	if (key === "z") return event.shiftKey ? "redo" : "undo";
+	if (key === "y" && event.ctrlKey && !event.shiftKey) return "redo";
+	return null;
+}
+function bindKeyboardShortcuts(engine, options = {}) {
+	const target = options.target ?? globalThis.window;
+	const handleKeyDown = (event) => {
+		const keyboardEvent = event;
+		if (keyboardEvent.defaultPrevented || isTypingInto(keyboardEvent.target)) return;
+		const action = chooseAction(keyboardEvent);
+		if (action === null) return;
+		keyboardEvent.preventDefault();
+		engine[action]().catch(() => void 0);
+	};
+	target.addEventListener("keydown", handleKeyDown);
+	return () => target.removeEventListener("keydown", handleKeyDown);
+}
+//#endregion
+exports.bindKeyboardShortcuts = bindKeyboardShortcuts;

package/dist/history/keyboard-shortcuts.d.cts

@@ -0,0 +1,10 @@
+//#region src/history/keyboard-shortcuts.d.ts
+export interface UndoRedoTarget {
+  undo(): Promise<boolean>;
+  redo(): Promise<boolean>;
+}
+export interface KeyboardShortcutOptions {
+  target?: EventTarget;
+}
+export declare function bindKeyboardShortcuts(engine: UndoRedoTarget, options?: KeyboardShortcutOptions): () => void;
+//#endregion

package/dist/history/keyboard-shortcuts.d.ts

@@ -0,0 +1,10 @@
+//#region src/history/keyboard-shortcuts.d.ts
+export interface UndoRedoTarget {
+  undo(): Promise<boolean>;
+  redo(): Promise<boolean>;
+}
+export interface KeyboardShortcutOptions {
+  target?: EventTarget;
+}
+export declare function bindKeyboardShortcuts(engine: UndoRedoTarget, options?: KeyboardShortcutOptions): () => void;
+//#endregion

package/dist/history/keyboard-shortcuts.js

@@ -0,0 +1,32 @@
+//#region src/history/keyboard-shortcuts.ts
+function isTypingInto(element) {
+	if (!(element instanceof HTMLElement)) return false;
+	if (element.isContentEditable) return true;
+	return [
+		"INPUT",
+		"TEXTAREA",
+		"SELECT"
+	].includes(element.tagName);
+}
+function chooseAction(event) {
+	if (!(event.metaKey || event.ctrlKey) || event.altKey) return null;
+	const key = event.key.toLowerCase();
+	if (key === "z") return event.shiftKey ? "redo" : "undo";
+	if (key === "y" && event.ctrlKey && !event.shiftKey) return "redo";
+	return null;
+}
+function bindKeyboardShortcuts(engine, options = {}) {
+	const target = options.target ?? globalThis.window;
+	const handleKeyDown = (event) => {
+		const keyboardEvent = event;
+		if (keyboardEvent.defaultPrevented || isTypingInto(keyboardEvent.target)) return;
+		const action = chooseAction(keyboardEvent);
+		if (action === null) return;
+		keyboardEvent.preventDefault();
+		engine[action]().catch(() => void 0);
+	};
+	target.addEventListener("keydown", handleKeyDown);
+	return () => target.removeEventListener("keydown", handleKeyDown);
+}
+//#endregion
+export { bindKeyboardShortcuts };

package/dist/history/snapshot.cjs

@@ -0,0 +1,47 @@
+//#region src/history/snapshot.ts
+function createSnapshot(objects) {
+	const objectsById = /* @__PURE__ */ new Map();
+	const order = [];
+	for (const object of objects) {
+		const id = object.id ?? "";
+		objectsById.set(id, JSON.stringify(object));
+		order.push(id);
+	}
+	return {
+		objectsById,
+		order
+	};
+}
+function haveSameOrder(first, second) {
+	return first.length === second.length && first.every((id, index) => id === second[index]);
+}
+function diffSnapshots(previous, next) {
+	const before = /* @__PURE__ */ new Map();
+	const after = /* @__PURE__ */ new Map();
+	for (const [id, json] of next.objectsById) {
+		const previousJson = previous.objectsById.get(id);
+		if (previousJson === json) continue;
+		before.set(id, previousJson ?? null);
+		after.set(id, json);
+	}
+	for (const [id, json] of previous.objectsById) {
+		if (next.objectsById.has(id)) continue;
+		before.set(id, json);
+		after.set(id, null);
+	}
+	const orderChanged = !haveSameOrder(previous.order, next.order);
+	if (before.size === 0 && !orderChanged) return null;
+	return {
+		before: {
+			objects: before,
+			order: orderChanged ? previous.order : null
+		},
+		after: {
+			objects: after,
+			order: orderChanged ? next.order : null
+		}
+	};
+}
+//#endregion
+exports.createSnapshot = createSnapshot;
+exports.diffSnapshots = diffSnapshots;

package/dist/history/snapshot.js

@@ -0,0 +1,46 @@
+//#region src/history/snapshot.ts
+function createSnapshot(objects) {
+	const objectsById = /* @__PURE__ */ new Map();
+	const order = [];
+	for (const object of objects) {
+		const id = object.id ?? "";
+		objectsById.set(id, JSON.stringify(object));
+		order.push(id);
+	}
+	return {
+		objectsById,
+		order
+	};
+}
+function haveSameOrder(first, second) {
+	return first.length === second.length && first.every((id, index) => id === second[index]);
+}
+function diffSnapshots(previous, next) {
+	const before = /* @__PURE__ */ new Map();
+	const after = /* @__PURE__ */ new Map();
+	for (const [id, json] of next.objectsById) {
+		const previousJson = previous.objectsById.get(id);
+		if (previousJson === json) continue;
+		before.set(id, previousJson ?? null);
+		after.set(id, json);
+	}
+	for (const [id, json] of previous.objectsById) {
+		if (next.objectsById.has(id)) continue;
+		before.set(id, json);
+		after.set(id, null);
+	}
+	const orderChanged = !haveSameOrder(previous.order, next.order);
+	if (before.size === 0 && !orderChanged) return null;
+	return {
+		before: {
+			objects: before,
+			order: orderChanged ? previous.order : null
+		},
+		after: {
+			objects: after,
+			order: orderChanged ? next.order : null
+		}
+	};
+}
+//#endregion
+export { createSnapshot, diffSnapshots };

package/dist/index.cjs

@@ -3,8 +3,10 @@ const require_document_format = require("./document/document-format.cjs");
 const require_validate_document = require("./document/validate-document.cjs");
 const require_errors = require("./engine/errors.cjs");
 const require_create_document_engine = require("./engine/create-document-engine.cjs");
+const require_keyboard_shortcuts = require("./history/keyboard-shortcuts.cjs");
 exports.CURRENT_SCHEMA_VERSION = require_document_format.CURRENT_SCHEMA_VERSION;
 exports.DocumentEngineError = require_errors.DocumentEngineError;
+exports.bindKeyboardShortcuts = require_keyboard_shortcuts.bindKeyboardShortcuts;
 exports.createDocumentEngine = require_create_document_engine.createDocumentEngine;
 exports.isDocumentEngineError = require_errors.isDocumentEngineError;
 exports.validateDocument = require_validate_document.validateDocument;

package/dist/index.d.cts

@@ -1,8 +1,10 @@
 import { CURRENT_SCHEMA_VERSION, DocumentCanvas, DocumentInfo, FabricDocument, SerializedFabricObject } from "./document/document-format.cjs";
 import { NewDocumentOptions } from "./document/create-document.cjs";
 import { CustomObjectDefinition } from "./fabric/object-registry.cjs";
+import { HistoryOptions, HistoryState } from "./history/create-history.cjs";
 import { DocumentEngineError, DocumentEngineErrorDetails, DocumentErrorCode, DocumentIssue, isDocumentEngineError } from "./engine/errors.cjs";
 import { Unsubscribe } from "./engine/event-emitter.cjs";
 import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, DocumentStorage, LoadOptions, createDocumentEngine } from "./engine/create-document-engine.cjs";
 import { validateDocument } from "./document/validate-document.cjs";
-export { 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 FabricDocument, type LoadOptions, type NewDocumentOptions, type SerializedFabricObject, type Unsubscribe, createDocumentEngine, isDocumentEngineError, validateDocument };
+import { KeyboardShortcutOptions, UndoRedoTarget, bindKeyboardShortcuts } from "./history/keyboard-shortcuts.cjs";
+export { 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 FabricDocument, type HistoryOptions, type HistoryState, type KeyboardShortcutOptions, type LoadOptions, type NewDocumentOptions, type SerializedFabricObject, type UndoRedoTarget, type Unsubscribe, bindKeyboardShortcuts, createDocumentEngine, isDocumentEngineError, validateDocument };

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 import { CURRENT_SCHEMA_VERSION, DocumentCanvas, DocumentInfo, FabricDocument, SerializedFabricObject } from "./document/document-format.js";
 import { NewDocumentOptions } from "./document/create-document.js";
 import { CustomObjectDefinition } from "./fabric/object-registry.js";
+import { HistoryOptions, HistoryState } from "./history/create-history.js";
 import { DocumentEngineError, DocumentEngineErrorDetails, DocumentErrorCode, DocumentIssue, isDocumentEngineError } from "./engine/errors.js";
 import { Unsubscribe } from "./engine/event-emitter.js";
 import { DocumentEngine, DocumentEngineEvents, DocumentEngineOptions, DocumentStorage, LoadOptions, createDocumentEngine } from "./engine/create-document-engine.js";
 import { validateDocument } from "./document/validate-document.js";
-export { 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 FabricDocument, type LoadOptions, type NewDocumentOptions, type SerializedFabricObject, type Unsubscribe, createDocumentEngine, isDocumentEngineError, validateDocument };
+import { KeyboardShortcutOptions, UndoRedoTarget, bindKeyboardShortcuts } from "./history/keyboard-shortcuts.js";
+export { 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 FabricDocument, type HistoryOptions, type HistoryState, type KeyboardShortcutOptions, type LoadOptions, type NewDocumentOptions, type SerializedFabricObject, type UndoRedoTarget, type Unsubscribe, bindKeyboardShortcuts, createDocumentEngine, isDocumentEngineError, validateDocument };

package/dist/index.js

@@ -2,4 +2,5 @@ import { CURRENT_SCHEMA_VERSION } from "./document/document-format.js";
 import { validateDocument } from "./document/validate-document.js";
 import { DocumentEngineError, isDocumentEngineError } from "./engine/errors.js";
 import { createDocumentEngine } from "./engine/create-document-engine.js";
-export { CURRENT_SCHEMA_VERSION, DocumentEngineError, createDocumentEngine, isDocumentEngineError, validateDocument };
+import { bindKeyboardShortcuts } from "./history/keyboard-shortcuts.js";
+export { CURRENT_SCHEMA_VERSION, DocumentEngineError, bindKeyboardShortcuts, createDocumentEngine, isDocumentEngineError, validateDocument };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fabricjs-document-engine",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Turn an existing Fabric.js canvas into a dependable editable document: stable object ids, versioned save and load, custom object registration and clear load errors.",
   "keywords": [
     "fabric",