fabricjs-document-engine 0.7.0 → 1.0.0

package/README.md

@@ -16,6 +16,7 @@ Fabric already draws objects, handles interaction and serializes to JSON. This p
 - **Versions and migration.** Keep named versions, restore any of them as a new revision, and open plain Fabric JSON or documents saved by older versions of this package.
 - **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.
 - **React ready, framework free.** Hooks for React, and a small state store for any other framework. Your toolbar and UI stay yours.
+- **Hardened.** Imported documents are cleaned and size-limited, undo history has a memory budget, and every feature is tested in Chromium, Firefox and WebKit. See the [compatibility and performance results](https://github.com/re-sohail/fabricjs-document-engine/blob/main/docs/compatibility.md).
 - **Fabric 6 and 7.** Every release is tested against both.
 
 ## Install
@@ -155,6 +156,7 @@ engine.on('save:status', ({ status, isDirty, revision, lastSavedAt, error }) =>
 - **Stale responses.** If another document is loaded while a save is running, that save's response is ignored and any queued save is cancelled with `SAVE_CANCELLED`.
 - **Conflicts.** When another tab or device saved first, the save fails with `SAVE_CONFLICT` and the status becomes `conflict`. Either reload the document with `engine.load(id)`, or keep your version with `engine.save({ overwrite: true })`.
 - **Retries.** Temporary failures are retried with exponential backoff and jitter. Each retry emits `save:retry` with `{ attempt, delay, error }`.
+- **Unsaved work is never replaced silently.** With a storage adapter, `load`, `loadDocument`, `importFabricJson` and `newDocument` refuse with `UNSAVED_CHANGES` while there are unsaved changes. Save first, or pass `{ discardUnsavedChanges: true }` when the user chose to throw the changes away.
 
 ### Warn before leaving
 
@@ -401,97 +403,49 @@ interface FabricDocument {
 
 Keep project data such as titles, owners and tags in `metadata` with `engine.updateMetadata()`, rather than on Fabric objects.
 
-## API
-
-| Member | What it does |
-| --- | --- |
-| `createDocumentEngine({ canvas, storage?, customObjects?, document? })` | Connects the engine to your canvas. |
-| `engine.toDocument()` | Serializes the canvas into the versioned document format. |
-| `engine.loadDocument(document, { restoreCanvasSize? })` | Validates and loads a document. Resolves when the objects are on the canvas. |
-| `engine.load(id)` / `engine.save({ overwrite? })` | Reads from or writes to your storage adapter. |
-| `engine.importFabricJson(json, { id?, metadata? })` | Opens plain Fabric JSON, as text or an object. |
-| `engine.createVersion(name?)` / `engine.listVersions()` | Keeps a named version, or lists versions newest first. |
-| `engine.restoreVersion(id)` / `engine.deleteVersion(id)` | Restores a version as a new unsaved revision, or deletes it. |
-| `engine.isDirty()` | Tells you whether there are unsaved changes. |
-| `engine.getSaveState()` | Returns `{ status, isDirty, isSaving, revision, lastSavedAt, error }`. |
-| `bindUnsavedChangesWarning(engine)` | Asks the browser to confirm before closing a page with unsaved changes. Returns an unbind function. |
-| `engine.newDocument({ id?, metadata? })` | Clears the canvas and starts a fresh document. |
-| `engine.getDocumentInfo()` | Returns the current document's id, dates and metadata. |
-| `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.getAssetManifest()` | Lists the images and fonts used on the canvas. |
-| `engine.checkAssets()` | Resolves to `{ manifest, missingImages, unavailableFonts, warnings }` for the current canvas. |
-| `engine.replaceImage(oldUrl, newUrl)` | Replaces every image with that URL as one undo step. Resolves to the number of images replaced. |
-| `engine.export(options)` | Exports PNG, JPEG, WebP, SVG or JSON. See [Export](#export). |
-| `engine.preflightExport(options)` | Resolves to `{ ok, problems, warnings }` without exporting. |
-| `downloadExport(result, fileName?)` | Starts a browser download of an export result. |
-| `engine.getRecoverableDocuments()` | Lists recovery copies, newest first. |
-| `engine.restoreRecovery(id?)` / `engine.discardRecovery(id?)` | Loads or deletes a recovery copy. The default is the current document. |
-| `engine.getRecovery(id?)` / `engine.flushRecovery()` | Reads a copy, or writes one now. |
-| `engine.getInterruptedLoad()` | Returns the load that was running when the tab last crashed, if any. |
-| `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`, `document:change`, `load:success`, `load:error`, `save:start`, `save:success`, `save:error`, `save:retry`, `save:status`, `assets:warning`, `recovery:checkpoint`, `recovery:restored`, `recovery:error`, `export:success`, `export:error`, `version:created`, `version:restored`, `version:error`, `history:change` or `history:error`. Returns an unsubscribe function. |
-| `engine.destroy()` | Stops listening to the canvas and cancels a running load. |
-| `createDocumentStateStore(engine)` | Framework-free `{ getSnapshot, subscribe, destroy }` state for toolbars. |
-| `validateDocument(value)` | Returns a list of issues with the exact path of each problem. |
-
-## Errors
-
-Every failure is a `DocumentEngineError` with a `code` you can switch on:
-
-| Code | Meaning |
-| --- | --- |
-| `INVALID_DOCUMENT` | The document shape is wrong. `error.issues` lists each path, such as `objects[3].objects[1].type`. |
-| `UNSUPPORTED_SCHEMA` | The document was written by a newer version of this package. |
-| `UNKNOWN_OBJECT_TYPE` | A type is not registered. `error.unknownTypes` lists them. |
-| `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. |
-| `MISSING_ASSETS` | Images could not be loaded and had no replacement. `error.missingAssets` lists each `{ url, objectIds }`. |
-| `MISSING_FONTS` | Fonts are not available and `requireFonts` is on. `error.missingFonts` lists them. |
-| `ASSET_UPLOAD_FAILED` | Your `upload` handler failed while saving. |
-| `SAVE_FAILED` | Your storage adapter rejected the save after all retries. `error.retryable` tells you whether trying again could help. |
-| `SAVE_CONFLICT` | Another tab or device saved this document first. |
-| `SAVE_CANCELLED` | A queued save was dropped because another document was opened. |
-| `DOCUMENT_NOT_FOUND` | The built-in adapters have no document with that id. |
-| `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. |
-| `MIGRATION_FAILED` | An older document could not be upgraded. `error.migrationFrom` is the schema version it started from. |
-| `VERSIONS_UNSUPPORTED` | The storage adapter has no version methods. |
-| `VERSION_NOT_FOUND` | There is no version with that id. |
-| `VERSION_FAILED` | An automatic version could not be kept. It is delivered as a `version:error` event. |
-| `EXPORT_BLOCKED` | The preflight found problems. `error.problems` lists each one with the objects involved. |
-| `INVALID_EXPORT_OPTIONS` | The format, scale, quality, area or padding is not valid, or the area is empty. |
-| `EXPORT_ABORTED` | The export was cancelled with its `signal`. |
-| `EXPORT_FAILED` | Fabric could not render the export. `error.cause` holds the original error. |
-| `RECOVERY_MISSING` | A recovery method was called without `recovery: { store }`. |
-| `RECOVERY_NOT_FOUND` | There is no recovery copy for that document. |
-| `RECOVERY_FAILED` | Writing a recovery copy failed, for example because storage is full. It is delivered as a `recovery:error` event and never interrupts editing. |
-| `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()`. |
-
-A failed load never clears or half-fills your canvas.
-
-## Roadmap
-
-| Stage | Focus | Released in |
-| --- | --- | --- |
-| 1 | Document foundation: ids, save and load, validation, custom objects | 0.0.0 |
-| 2 | Undo and redo with transactions | 0.1.0 |
-| 3 | Safe saving: dirty state, autosave, stale-response protection | 0.2.0 |
-| 4 | Assets and fonts | 0.3.0 |
-| 5 | Recovery after a refresh or crash | 0.4.0 |
-| 6 | PNG, JPEG, SVG and JSON export with preflight checks | 0.5.0 |
-| 7 | Named versions and schema migrations | 0.6.0 |
-| 8 | React adapter and examples | 0.7.0 |
-| 9 | Hardening and benchmarks | |
-| 10 | Stable API | 1.0.0 |
+The format is described by a JSON Schema that ships with the package:
+
+```ts
+import schema from 'fabricjs-document-engine/schema/document-v1.json';
+```
+
+## API reference
+
+Every function, option, event and error code is listed in [docs/api.md](https://github.com/re-sohail/fabricjs-document-engine/blob/main/docs/api.md). Every failure is a `DocumentEngineError` with a stable `code` you can switch on, such as `SAVE_CONFLICT`, `MISSING_ASSETS` or `UNSAVED_CHANGES`. A failed load never clears or half-fills your canvas.
+
+## Stability
+
+Version 1.0 freezes the document format and the adapter contracts:
+
+- Documents are validated by the published JSON Schema at `fabricjs-document-engine/schema/document-v1.json`. Every 1.x release reads every document written by earlier releases, as well as plain Fabric JSON from Fabric 5, 6 and 7.
+- Public API names, options, events and error codes do not change within 1.x. New ones may be added.
+- Storage, version and recovery adapters written for 1.0 keep working. `verifyStorageAdapter(storage)` from `fabricjs-document-engine/storage` checks that your adapter follows the save rules.
+
+The full promise is in the [compatibility policy](https://github.com/re-sohail/fabricjs-document-engine/blob/main/docs/compatibility-policy.md). Tested browsers, Fabric versions and performance results are in [docs/compatibility.md](https://github.com/re-sohail/fabricjs-document-engine/blob/main/docs/compatibility.md), and a complete setup is in the [production guide](https://github.com/re-sohail/fabricjs-document-engine/blob/main/docs/production.md).
+
+## Imported content and limits
+
+Documents often come from users, so the engine treats them as untrusted:
+
+- Keys named `__proto__`, `constructor` or `prototype` are removed before Fabric sees them. Fabric copies every key onto the object it creates, so these keys could otherwise change an object's prototype.
+- Image addresses are checked after `assets.resolveUrl`, before anything is fetched. `http:`, `https:`, `blob:`, relative addresses and `data:image/...` are allowed. `javascript:`, `file:` and non-image `data:` addresses are refused with `UNSAFE_DOCUMENT`.
+- A document with more than 50,000 objects, or nested more than 100 levels deep, is refused before loading, so a hostile file cannot freeze the tab.
+
+```ts
+createDocumentEngine({
+  canvas,
+  limits: {
+    maxObjects: 10_000,
+    maxDepth: 40,
+    isAllowedUrl: (url) => url.startsWith('https://cdn.example.com/'),
+  },
+  history: { limit: 100, maxBytes: 32 * 1024 * 1024 },
+});
+```
+
+`history.maxBytes` caps the memory undo history uses. The default is 64 MB, and the oldest steps are dropped first. SVG export escapes text, so text such as `<script>` inside a text box stays text.
+
+Accessibility guidance for your toolbar, status text and dialogs is in [docs/accessibility.md](https://github.com/re-sohail/fabricjs-document-engine/blob/main/docs/accessibility.md).
 
 ## Troubleshooting
 

package/dist/assets/asset-pipeline.cjs

@@ -2,6 +2,7 @@ const require_asset_references = require("./asset-references.cjs");
 const require_asset_manifest = require("./asset-manifest.cjs");
 const require_errors = require("../engine/errors.cjs");
 const require_font_check = require("./font-check.cjs");
+const require_content_limits = require("../security/content-limits.cjs");
 const require_image_check = require("./image-check.cjs");
 //#region src/assets/asset-pipeline.ts
 function cloneDocument(document) {
@@ -105,10 +106,11 @@ async function replaceMissingImages(document, missingImages, options, signal) {
 		warnings
 	};
 }
-async function prepareAssetsForLoad(input, options, signal) {
+async function prepareAssetsForLoad(input, options, signal, isAllowedUrl) {
 	const document = cloneDocument(input);
 	const { resolveUrl } = options;
 	if (resolveUrl) await rewriteUrls(document, async (url) => resolveUrl(url));
+	require_content_limits.refuseUnsafeImageUrls(document.objects, isAllowedUrl);
 	const report = await inspectAssets(document, options, signal);
 	if (options.requireFonts && report.unavailableFonts.length > 0) {
 		const families = report.unavailableFonts.map((font) => font.family).join(", ");

package/dist/assets/asset-pipeline.js

@@ -2,6 +2,7 @@ import { findImageReferences } from "./asset-references.js";
 import { buildAssetManifest, isEmbeddedUrl } from "./asset-manifest.js";
 import { DocumentEngineError, isDocumentEngineError } from "../engine/errors.js";
 import { findUnavailableFonts } from "./font-check.js";
+import { refuseUnsafeImageUrls } from "../security/content-limits.js";
 import { findMissingImages, isCrossOriginUrl, isPortableUrl } from "./image-check.js";
 //#region src/assets/asset-pipeline.ts
 function cloneDocument(document) {
@@ -105,10 +106,11 @@ async function replaceMissingImages(document, missingImages, options, signal) {
 		warnings
 	};
 }
-async function prepareAssetsForLoad(input, options, signal) {
+async function prepareAssetsForLoad(input, options, signal, isAllowedUrl) {
 	const document = cloneDocument(input);
 	const { resolveUrl } = options;
 	if (resolveUrl) await rewriteUrls(document, async (url) => resolveUrl(url));
+	refuseUnsafeImageUrls(document.objects, isAllowedUrl);
 	const report = await inspectAssets(document, options, signal);
 	if (options.requireFonts && report.unavailableFonts.length > 0) {
 		const families = report.unavailableFonts.map((font) => font.family).join(", ");

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

@@ -1,5 +1,6 @@
 const require_asset_manifest = require("../assets/asset-manifest.cjs");
 const require_errors = require("./errors.cjs");
+const require_content_limits = require("../security/content-limits.cjs");
 const require_image_check = require("../assets/image-check.cjs");
 const require_asset_pipeline = require("../assets/asset-pipeline.cjs");
 const require_export_area = require("../export/export-area.cjs");
@@ -72,6 +73,7 @@ function createDocumentEngine(options) {
 	const history = require_create_history.createHistory({
 		canvas,
 		limit: options.history?.limit,
+		maxBytes: options.history?.maxBytes,
 		serializeObjects: () => {
 			rebuildIndex();
 			return require_fabric_adapter.serializeCanvas(canvas, registry.propertiesToInclude()).objects;
@@ -161,8 +163,13 @@ function createDocumentEngine(options) {
 	function loadDocument(input, loadOptions = {}) {
 		return loadMigratedDocument(input, loadOptions, {});
 	}
+	function protectUnsavedChanges(discardUnsavedChanges) {
+		if (!storage || discardUnsavedChanges || !saving.state().isDirty) return;
+		throw new require_errors.DocumentEngineError("UNSAVED_CHANGES", "The current document has unsaved changes. Save first, or pass { discardUnsavedChanges: true } to replace it anyway.");
+	}
 	async function loadMigratedDocument(input, loadOptions, importDetails) {
 		ensureUsable();
+		protectUnsavedChanges(loadOptions.discardUnsavedChanges);
 		activeLoad?.abort();
 		const controller = new AbortController();
 		activeLoad = controller;
@@ -171,13 +178,13 @@ function createDocumentEngine(options) {
 		try {
 			await recovery?.markLoadStarted(documentId);
 			if (controller.signal.aborted) throw new Error("aborted");
-			const { document: migrated, migratedFrom } = require_migrate_document.migrateDocument(input, {
+			const { document: migrated, migratedFrom } = require_migrate_document.migrateDocument(require_content_limits.secureDocument(input, options.limits), {
 				canvasWidth: canvas.getWidth(),
 				canvasHeight: canvas.getHeight(),
 				...importDetails
 			});
 			const checked = checkDocument(migrated);
-			const { document, warnings } = await require_asset_pipeline.prepareAssetsForLoad(checked, assetOptions, controller.signal);
+			const { document, warnings } = await require_asset_pipeline.prepareAssetsForLoad(checked, assetOptions, controller.signal, options.limits?.isAllowedUrl);
 			if (controller.signal.aborted) throw new Error("aborted");
 			await history.withoutRecording(() => require_fabric_adapter.loadIntoCanvas(canvas, {
 				version: document.fabricVersion,
@@ -295,7 +302,7 @@ function createDocumentEngine(options) {
 			id: current.id,
 			createdAt: current.createdAt,
 			revision: baseRevision
-		});
+		}, { discardUnsavedChanges: true });
 		noteContentChange();
 		events.emit("version:restored", {
 			version: require_document_version.summarize(version),
@@ -310,6 +317,7 @@ function createDocumentEngine(options) {
 	async function load(documentId, loadOptions) {
 		ensureUsable();
 		const source = requireStorage();
+		protectUnsavedChanges(loadOptions?.discardUnsavedChanges);
 		let stored;
 		try {
 			stored = await source.loadDocument(documentId);
@@ -329,8 +337,9 @@ function createDocumentEngine(options) {
 		}
 		return saving.save(saveOptions);
 	}
-	function newDocument(newOptions) {
+	function newDocument(newOptions = {}) {
 		ensureUsable();
+		protectUnsavedChanges(newOptions.discardUnsavedChanges);
 		activeLoad?.abort();
 		history.withoutRecording(() => canvas.clear());
 		objectsById.clear();
@@ -412,10 +421,10 @@ function createDocumentEngine(options) {
 				const area = require_export_area.resolveExportArea(canvas, settings.area, settings.padding);
 				return {
 					area,
-					content: format === "svg" ? require_render_export.renderSvg(canvas, area, settings.scale) : require_render_export.renderRaster(canvas, area, format, settings.scale, settings.quality)
+					content: format === "svg" ? Promise.resolve(new Blob([require_render_export.renderSvg(canvas, area, settings.scale)], { type: require_render_export.mimeTypes.svg })) : require_render_export.renderRaster(canvas, area, format, settings.scale, settings.quality)
 				};
 			});
-			const blob = format === "svg" ? new Blob([rendered.content], { type: require_render_export.mimeTypes.svg }) : require_render_export.dataUrlToBlob(rendered.content);
+			const blob = await rendered.content;
 			return {
 				format,
 				mimeType: blob.type || require_render_export.mimeTypes[format],
@@ -486,6 +495,7 @@ function createDocumentEngine(options) {
 	}
 	function destroy() {
 		if (destroyed) return;
+		if (recovery && saving.state().isDirty) recovery.writeNow();
 		destroyed = true;
 		activeLoad?.abort();
 		history.destroy();

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

@@ -6,6 +6,7 @@ import { ExportPreflight } from "../export/preflight-export.cjs";
 import { NewDocumentOptions } from "../document/create-document.cjs";
 import { CustomObjectDefinition } from "../fabric/object-registry.cjs";
 import { HistoryOptions, HistoryState } from "../history/create-history.cjs";
+import { ContentLimits } from "../security/content-limits.cjs";
 import { VersionOptions, VersionSummary } from "../versions/document-version.cjs";
 import { InterruptedLoad, RecoveryOptions, RecoveryRecord } from "../recovery/recovery-controller.cjs";
 import { AutosaveOptions } from "../save/autosave-scheduler.cjs";
@@ -27,9 +28,14 @@ export interface DocumentEngineOptions {
   assets?: AssetOptions;
   recovery?: RecoveryOptions;
   versions?: VersionOptions;
+  limits?: ContentLimits;
 }
 export interface LoadOptions {
   restoreCanvasSize?: boolean;
+  discardUnsavedChanges?: boolean;
+}
+export interface NewDocumentRequest extends NewDocumentOptions {
+  discardUnsavedChanges?: boolean;
 }
 export interface ImportOptions extends LoadOptions {
   id?: string;
@@ -109,7 +115,7 @@ export interface DocumentEngine {
   readonly canvas: StaticCanvas;
   getDocumentInfo(): DocumentInfo;
   updateMetadata(changes: Record<string, unknown>): void;
-  newDocument(options?: NewDocumentOptions): void;
+  newDocument(options?: NewDocumentRequest): void;
   toDocument(): FabricDocument;
   loadDocument(document: unknown, options?: LoadOptions): Promise<FabricDocument>;
   load(documentId: string, options?: LoadOptions): Promise<FabricDocument>;

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

@@ -6,6 +6,7 @@ import { ExportPreflight } from "../export/preflight-export.js";
 import { NewDocumentOptions } from "../document/create-document.js";
 import { CustomObjectDefinition } from "../fabric/object-registry.js";
 import { HistoryOptions, HistoryState } from "../history/create-history.js";
+import { ContentLimits } from "../security/content-limits.js";
 import { VersionOptions, VersionSummary } from "../versions/document-version.js";
 import { InterruptedLoad, RecoveryOptions, RecoveryRecord } from "../recovery/recovery-controller.js";
 import { AutosaveOptions } from "../save/autosave-scheduler.js";
@@ -27,9 +28,14 @@ export interface DocumentEngineOptions {
   assets?: AssetOptions;
   recovery?: RecoveryOptions;
   versions?: VersionOptions;
+  limits?: ContentLimits;
 }
 export interface LoadOptions {
   restoreCanvasSize?: boolean;
+  discardUnsavedChanges?: boolean;
+}
+export interface NewDocumentRequest extends NewDocumentOptions {
+  discardUnsavedChanges?: boolean;
 }
 export interface ImportOptions extends LoadOptions {
   id?: string;
@@ -109,7 +115,7 @@ export interface DocumentEngine {
   readonly canvas: StaticCanvas;
   getDocumentInfo(): DocumentInfo;
   updateMetadata(changes: Record<string, unknown>): void;
-  newDocument(options?: NewDocumentOptions): void;
+  newDocument(options?: NewDocumentRequest): void;
   toDocument(): FabricDocument;
   loadDocument(document: unknown, options?: LoadOptions): Promise<FabricDocument>;
   load(documentId: string, options?: LoadOptions): Promise<FabricDocument>;

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

@@ -1,5 +1,6 @@
 import { buildAssetManifest } from "../assets/asset-manifest.js";
 import { DocumentEngineError, isDocumentEngineError } from "./errors.js";
+import { secureDocument } from "../security/content-limits.js";
 import { isSameUrl } from "../assets/image-check.js";
 import { inspectAssets, prepareAssetsForLoad, prepareAssetsForSave } from "../assets/asset-pipeline.js";
 import { resolveExportArea } from "../export/export-area.js";
@@ -7,7 +8,7 @@ import { normalizeExportOptions } from "../export/export-options.js";
 import { readObjectId, writeObjectId } from "../fabric/object-ids.js";
 import { collectSerializedTypes, walkObjects } from "../fabric/walk-objects.js";
 import { preflightExport } from "../export/preflight-export.js";
-import { dataUrlToBlob, mimeTypes, renderRaster, renderSvg, withExportView } from "../export/render-export.js";
+import { mimeTypes, renderRaster, renderSvg, withExportView } from "../export/render-export.js";
 import "../document/document-format.js";
 import { createId } from "../document/ids.js";
 import { createDocumentInfo } from "../document/create-document.js";
@@ -72,6 +73,7 @@ function createDocumentEngine(options) {
 	const history = createHistory({
 		canvas,
 		limit: options.history?.limit,
+		maxBytes: options.history?.maxBytes,
 		serializeObjects: () => {
 			rebuildIndex();
 			return serializeCanvas(canvas, registry.propertiesToInclude()).objects;
@@ -161,8 +163,13 @@ function createDocumentEngine(options) {
 	function loadDocument(input, loadOptions = {}) {
 		return loadMigratedDocument(input, loadOptions, {});
 	}
+	function protectUnsavedChanges(discardUnsavedChanges) {
+		if (!storage || discardUnsavedChanges || !saving.state().isDirty) return;
+		throw new DocumentEngineError("UNSAVED_CHANGES", "The current document has unsaved changes. Save first, or pass { discardUnsavedChanges: true } to replace it anyway.");
+	}
 	async function loadMigratedDocument(input, loadOptions, importDetails) {
 		ensureUsable();
+		protectUnsavedChanges(loadOptions.discardUnsavedChanges);
 		activeLoad?.abort();
 		const controller = new AbortController();
 		activeLoad = controller;
@@ -171,13 +178,13 @@ function createDocumentEngine(options) {
 		try {
 			await recovery?.markLoadStarted(documentId);
 			if (controller.signal.aborted) throw new Error("aborted");
-			const { document: migrated, migratedFrom } = migrateDocument(input, {
+			const { document: migrated, migratedFrom } = migrateDocument(secureDocument(input, options.limits), {
 				canvasWidth: canvas.getWidth(),
 				canvasHeight: canvas.getHeight(),
 				...importDetails
 			});
 			const checked = checkDocument(migrated);
-			const { document, warnings } = await prepareAssetsForLoad(checked, assetOptions, controller.signal);
+			const { document, warnings } = await prepareAssetsForLoad(checked, assetOptions, controller.signal, options.limits?.isAllowedUrl);
 			if (controller.signal.aborted) throw new Error("aborted");
 			await history.withoutRecording(() => loadIntoCanvas(canvas, {
 				version: document.fabricVersion,
@@ -295,7 +302,7 @@ function createDocumentEngine(options) {
 			id: current.id,
 			createdAt: current.createdAt,
 			revision: baseRevision
-		});
+		}, { discardUnsavedChanges: true });
 		noteContentChange();
 		events.emit("version:restored", {
 			version: summarize(version),
@@ -310,6 +317,7 @@ function createDocumentEngine(options) {
 	async function load(documentId, loadOptions) {
 		ensureUsable();
 		const source = requireStorage();
+		protectUnsavedChanges(loadOptions?.discardUnsavedChanges);
 		let stored;
 		try {
 			stored = await source.loadDocument(documentId);
@@ -329,8 +337,9 @@ function createDocumentEngine(options) {
 		}
 		return saving.save(saveOptions);
 	}
-	function newDocument(newOptions) {
+	function newDocument(newOptions = {}) {
 		ensureUsable();
+		protectUnsavedChanges(newOptions.discardUnsavedChanges);
 		activeLoad?.abort();
 		history.withoutRecording(() => canvas.clear());
 		objectsById.clear();
@@ -412,10 +421,10 @@ function createDocumentEngine(options) {
 				const area = resolveExportArea(canvas, settings.area, settings.padding);
 				return {
 					area,
-					content: format === "svg" ? renderSvg(canvas, area, settings.scale) : renderRaster(canvas, area, format, settings.scale, settings.quality)
+					content: format === "svg" ? Promise.resolve(new Blob([renderSvg(canvas, area, settings.scale)], { type: mimeTypes.svg })) : renderRaster(canvas, area, format, settings.scale, settings.quality)
 				};
 			});
-			const blob = format === "svg" ? new Blob([rendered.content], { type: mimeTypes.svg }) : dataUrlToBlob(rendered.content);
+			const blob = await rendered.content;
 			return {
 				format,
 				mimeType: blob.type || mimeTypes[format],
@@ -486,6 +495,7 @@ function createDocumentEngine(options) {
 	}
 	function destroy() {
 		if (destroyed) return;
+		if (recovery && saving.state().isDirty) recovery.writeNow();
 		destroyed = true;
 		activeLoad?.abort();
 		history.destroy();

package/dist/engine/errors.d.cts

@@ -1,7 +1,7 @@
 import { FontAsset, ImageAsset } from "../assets/asset-manifest.cjs";
 import { ExportProblem } from "../export/preflight-export.cjs";
 //#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" | "MIGRATION_FAILED" | "VERSIONS_UNSUPPORTED" | "VERSION_NOT_FOUND" | "VERSION_FAILED" | "INVALID_EXPORT_OPTIONS" | "EXPORT_BLOCKED" | "EXPORT_FAILED" | "EXPORT_ABORTED" | "ENGINE_DESTROYED";
+export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSAFE_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "UNSAVED_CHANGES" | "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;

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" | "MIGRATION_FAILED" | "VERSIONS_UNSUPPORTED" | "VERSION_NOT_FOUND" | "VERSION_FAILED" | "INVALID_EXPORT_OPTIONS" | "EXPORT_BLOCKED" | "EXPORT_FAILED" | "EXPORT_ABORTED" | "ENGINE_DESTROYED";
+export type DocumentErrorCode = "INVALID_DOCUMENT" | "UNSAFE_DOCUMENT" | "UNSUPPORTED_SCHEMA" | "UNKNOWN_OBJECT_TYPE" | "INVALID_CUSTOM_OBJECT" | "LOAD_ABORTED" | "LOAD_FAILED" | "MISSING_ASSETS" | "MISSING_FONTS" | "ASSET_UPLOAD_FAILED" | "STORAGE_MISSING" | "UNSAVED_CHANGES" | "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;

package/dist/export/render-export.cjs

@@ -33,12 +33,9 @@ function withExportView(canvas, background, format, work) {
 	}
 }
 function renderRaster(canvas, area, format, scale, quality) {
-	return canvas.toDataURL({
-		...area,
-		format,
-		quality,
-		multiplier: scale,
-		enableRetinaScaling: false
+	const rendered = canvas.toCanvasElement(scale, area);
+	return new Promise((resolve, reject) => {
+		rendered.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error(`The browser could not encode ${format}`)), mimeTypes[format], quality);
 	});
 }
 function renderSvg(canvas, area, scale) {
@@ -53,16 +50,7 @@ function renderSvg(canvas, area, scale) {
 		height: String(area.height * scale)
 	});
 }
-function dataUrlToBlob(dataUrl) {
-	const [header, payload = ""] = dataUrl.split(",");
-	const mimeType = /data:([^;]+)/.exec(header ?? "")?.[1] ?? "application/octet-stream";
-	const binary = atob(payload);
-	const bytes = new Uint8Array(binary.length);
-	for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
-	return new Blob([bytes], { type: mimeType });
-}
 //#endregion
-exports.dataUrlToBlob = dataUrlToBlob;
 exports.mimeTypes = mimeTypes;
 exports.renderRaster = renderRaster;
 exports.renderSvg = renderSvg;

package/dist/export/render-export.js

@@ -33,12 +33,9 @@ function withExportView(canvas, background, format, work) {
 	}
 }
 function renderRaster(canvas, area, format, scale, quality) {
-	return canvas.toDataURL({
-		...area,
-		format,
-		quality,
-		multiplier: scale,
-		enableRetinaScaling: false
+	const rendered = canvas.toCanvasElement(scale, area);
+	return new Promise((resolve, reject) => {
+		rendered.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error(`The browser could not encode ${format}`)), mimeTypes[format], quality);
 	});
 }
 function renderSvg(canvas, area, scale) {
@@ -53,13 +50,5 @@ function renderSvg(canvas, area, scale) {
 		height: String(area.height * scale)
 	});
 }
-function dataUrlToBlob(dataUrl) {
-	const [header, payload = ""] = dataUrl.split(",");
-	const mimeType = /data:([^;]+)/.exec(header ?? "")?.[1] ?? "application/octet-stream";
-	const binary = atob(payload);
-	const bytes = new Uint8Array(binary.length);
-	for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
-	return new Blob([bytes], { type: mimeType });
-}
 //#endregion
-export { dataUrlToBlob, mimeTypes, renderRaster, renderSvg, withExportView };
+export { mimeTypes, renderRaster, renderSvg, withExportView };

package/dist/history/apply-state.cjs

@@ -34,10 +34,12 @@ async function applyStateChange(canvas, change) {
 	try {
 		const outgoing = current.filter((object) => !kept.has(object));
 		if (outgoing.length > 0) canvas.remove(...outgoing);
+		let onCanvas = canvas.getObjects();
 		arranged.forEach((object, index) => {
-			if (canvas.getObjects()[index] === object) return;
+			if (onCanvas[index] === object) return;
 			if (object.canvas === canvas) canvas.moveObjectTo(object, index);
 			else canvas.insertAt(index, object);
+			onCanvas = canvas.getObjects();
 		});
 	} finally {
 		canvas.renderOnAddRemove = renderOnAddRemove;

package/dist/history/apply-state.js

@@ -34,10 +34,12 @@ async function applyStateChange(canvas, change) {
 	try {
 		const outgoing = current.filter((object) => !kept.has(object));
 		if (outgoing.length > 0) canvas.remove(...outgoing);
+		let onCanvas = canvas.getObjects();
 		arranged.forEach((object, index) => {
-			if (canvas.getObjects()[index] === object) return;
+			if (onCanvas[index] === object) return;
 			if (object.canvas === canvas) canvas.moveObjectTo(object, index);
 			else canvas.insertAt(index, object);
+			onCanvas = canvas.getObjects();
 		});
 	} finally {
 		canvas.renderOnAddRemove = renderOnAddRemove;

package/dist/history/create-history.cjs

@@ -25,7 +25,10 @@ function describePendingChanges(changes) {
 }
 function createHistory(options) {
 	const { canvas, serializeObjects, onChange, onContentChange } = options;
-	const stack = require_history_stack.createHistoryStack(Math.max(1, options.limit ?? 100));
+	const stack = require_history_stack.createHistoryStack({
+		steps: Math.max(1, options.limit ?? 100),
+		bytes: Math.max(0, options.maxBytes ?? 67108864)
+	});
 	let snapshot = require_snapshot.createSnapshot(serializeObjects());
 	let pendingChanges = [];
 	let flushScheduled = false;

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

@@ -2,6 +2,7 @@ import { StaticCanvas } from "fabric";
 //#region src/history/create-history.d.ts
 export interface HistoryOptions {
   limit?: number;
+  maxBytes?: number;
 }
 export interface HistoryState {
   canUndo: boolean;

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

@@ -2,6 +2,7 @@ import { StaticCanvas } from "fabric";
 //#region src/history/create-history.d.ts
 export interface HistoryOptions {
   limit?: number;
+  maxBytes?: number;
 }
 export interface HistoryState {
   canUndo: boolean;

package/dist/history/create-history.js

@@ -25,7 +25,10 @@ function describePendingChanges(changes) {
 }
 function createHistory(options) {
 	const { canvas, serializeObjects, onChange, onContentChange } = options;
-	const stack = createHistoryStack(Math.max(1, options.limit ?? 100));
+	const stack = createHistoryStack({
+		steps: Math.max(1, options.limit ?? 100),
+		bytes: Math.max(0, options.maxBytes ?? 67108864)
+	});
 	let snapshot = createSnapshot(serializeObjects());
 	let pendingChanges = [];
 	let flushScheduled = false;