fabricjs-document-engine 0.6.0 → 0.8.0

package/README.md

@@ -15,6 +15,8 @@ Fabric already draws objects, handles interaction and serializes to JSON. This p
 - **Dependable export.** PNG, JPEG, WebP, SVG and editable JSON. You choose the area, scale and background. A preflight check means an export either succeeds or tells you exactly which image or font prevents it.
 - **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
@@ -40,6 +42,42 @@ localStorage.setItem(document.id, JSON.stringify(document));
 await engine.loadDocument(JSON.parse(localStorage.getItem(document.id)!));
 ```
 
+## React
+
+```tsx
+import { useDocumentEngine, useDocumentState, DocumentEngineProvider, useEngine } from 'fabricjs-document-engine/react';
+
+function Editor({ canvas }: { canvas: Canvas | null }) {
+  const engine = useDocumentEngine(canvas, { storage, autosave: true });
+  return (
+    <DocumentEngineProvider engine={engine}>
+      <YourToolbar />
+    </DocumentEngineProvider>
+  );
+}
+
+function YourToolbar() {
+  const engine = useEngine();
+  const state = useDocumentState(engine);
+  if (!engine || !state) return null;
+  return (
+    <>
+      <button disabled={!state.canUndo} onClick={() => engine.undo()}>Undo {state.undoLabel}</button>
+      <button disabled={!state.isDirty} onClick={() => engine.save()}>Save</button>
+      <span>{state.saveStatus}</span>
+    </>
+  );
+}
+```
+
+- `useDocumentEngine(canvas, options)` creates the engine once your Fabric canvas exists and destroys it on unmount. It returns `null` until then. Options are read when the engine is created.
+- `useDocumentState(engine)` returns `{ documentId, isLoading, loadError, saveStatus, isDirty, isSaving, revision, lastSavedAt, saveError, canUndo, canRedo, undoLabel, redoLabel, assetWarnings }` and re-renders when any of them change.
+- `useDocumentEvent(engine, 'save:error', handler)` subscribes to any event with the latest handler.
+- `DocumentEngineProvider` and `useEngine()` pass the engine to deeply nested toolbars.
+- The React entry is marked `'use client'` for Next.js. React is an optional peer dependency, so the core never imports it.
+
+For other frameworks, `createDocumentStateStore(engine)` gives the same state as `{ getSnapshot, subscribe }`, which fits Svelte stores, Vue's `shallowRef` and similar tools.
+
 ## Saving and loading through storage
 
 The built-in adapters are the quickest way to start:
@@ -59,6 +97,8 @@ await engine.save();
 
 Both adapters also have `listDocuments()` and `deleteDocument(id)`. To build on another key-value store, use `createKeyValueStorage({ read, write, remove, keys }, prefix)`.
 
+More adapters, including a REST API with revision checks and image uploads, are in [docs/storage-examples.md](https://github.com/re-sohail/fabricjs-document-engine/blob/main/docs/storage-examples.md).
+
 ### Your own backend
 
 A storage adapter is two functions:
@@ -398,8 +438,10 @@ Keep project data such as titles, owners and tags in `metadata` with `engine.upd
 | `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`, `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.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. |
+| `secureDocument(value, limits?)` / `refuseUnsafeImageUrls(objects, isAllowed?)` / `isSafeImageUrl(url)` | The safety checks, exported for server-side validation. |
+| `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
@@ -408,6 +450,7 @@ Every failure is a `DocumentEngineError` with a `code` you can switch on:
 
 | Code | Meaning |
 | --- | --- |
+| `UNSAFE_DOCUMENT` | The document broke a safety rule: an unsafe image address, too many objects, or nesting too deep. `error.issues` lists each one. |
 | `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. |
@@ -449,10 +492,38 @@ A failed load never clears or half-fills your canvas.
 | 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 | |
-| 9 | Hardening and benchmarks | |
+| 8 | React adapter and examples | 0.7.0 |
+| 9 | Hardening and benchmarks | 0.8.0 |
 | 10 | Stable API | 1.0.0 |
 
+## 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
+
+Common problems and fixes are in [docs/troubleshooting.md](https://github.com/re-sohail/fabricjs-document-engine/blob/main/docs/troubleshooting.md).
+
 ## License
 
 MIT

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;
@@ -171,13 +173,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,
@@ -201,6 +203,7 @@ function createDocumentEngine(options) {
 			saving.startSession(document.revision ?? 0);
 			canvas.requestRenderAll();
 			if (warnings.length > 0) events.emit("assets:warning", { warnings });
+			events.emit("document:change", { documentId: document.id });
 			events.emit("load:success", {
 				document,
 				warnings,
@@ -338,6 +341,7 @@ function createDocumentEngine(options) {
 		history.reset();
 		recovery?.cancel();
 		saving.startSession(0);
+		events.emit("document:change", { documentId: documentInfo.id });
 	}
 	function getObjectById(id) {
 		ensureUsable();
@@ -410,10 +414,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],

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,6 +28,7 @@ export interface DocumentEngineOptions {
   assets?: AssetOptions;
   recovery?: RecoveryOptions;
   versions?: VersionOptions;
+  limits?: ContentLimits;
 }
 export interface LoadOptions {
   restoreCanvasSize?: boolean;
@@ -48,6 +50,9 @@ export interface DocumentEngineEvents {
   "load:start": {
     documentId: string | undefined;
   };
+  "document:change": {
+    documentId: string;
+  };
   "load:success": {
     document: FabricDocument;
     warnings: AssetWarning[];

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,6 +28,7 @@ export interface DocumentEngineOptions {
   assets?: AssetOptions;
   recovery?: RecoveryOptions;
   versions?: VersionOptions;
+  limits?: ContentLimits;
 }
 export interface LoadOptions {
   restoreCanvasSize?: boolean;
@@ -48,6 +50,9 @@ export interface DocumentEngineEvents {
   "load:start": {
     documentId: string | undefined;
   };
+  "document:change": {
+    documentId: string;
+  };
   "load:success": {
     document: FabricDocument;
     warnings: AssetWarning[];

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;
@@ -171,13 +173,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,
@@ -201,6 +203,7 @@ function createDocumentEngine(options) {
 			saving.startSession(document.revision ?? 0);
 			canvas.requestRenderAll();
 			if (warnings.length > 0) events.emit("assets:warning", { warnings });
+			events.emit("document:change", { documentId: document.id });
 			events.emit("load:success", {
 				document,
 				warnings,
@@ -338,6 +341,7 @@ function createDocumentEngine(options) {
 		history.reset();
 		recovery?.cancel();
 		saving.startSession(0);
+		events.emit("document:change", { documentId: documentInfo.id });
 	}
 	function getObjectById(id) {
 		ensureUsable();
@@ -410,10 +414,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],

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" | "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" | "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;

package/dist/history/history-stack.cjs

@@ -1,27 +1,63 @@
 //#region src/history/history-stack.ts
-function createHistoryStack(limit) {
+function bytesOfChange(change) {
+	let bytes = (change.order?.length ?? 0) * 8;
+	for (const [id, json] of change.objects) bytes += (id.length + (json?.length ?? 0)) * 2;
+	return bytes;
+}
+function estimateStepBytes(step) {
+	return bytesOfChange(step.before) + bytesOfChange(step.after) + step.label.length * 2;
+}
+function createHistoryStack(limits) {
 	const undoSteps = [];
 	const redoSteps = [];
-	function pushWithinLimit(steps, step) {
+	const sizes = /* @__PURE__ */ new WeakMap();
+	let totalBytes = 0;
+	function sizeOf(step) {
+		let size = sizes.get(step);
+		if (size === void 0) {
+			size = estimateStepBytes(step);
+			sizes.set(step, size);
+		}
+		return size;
+	}
+	function forget(step) {
+		if (step) totalBytes -= sizeOf(step);
+	}
+	function stayWithinLimits() {
+		while (undoSteps.length > limits.steps) forget(undoSteps.shift());
+		while (redoSteps.length > limits.steps) forget(redoSteps.shift());
+		while (totalBytes > limits.bytes && undoSteps.length + redoSteps.length > 1) forget(undoSteps.length > 0 ? undoSteps.shift() : redoSteps.shift());
+	}
+	function add(steps, step) {
 		steps.push(step);
-		if (steps.length > limit) steps.shift();
+		totalBytes += sizeOf(step);
+		stayWithinLimits();
+	}
+	function take(steps) {
+		const step = steps.pop();
+		forget(step);
+		return step;
 	}
 	return {
 		record(step) {
-			pushWithinLimit(undoSteps, step);
+			redoSteps.forEach(forget);
 			redoSteps.length = 0;
+			add(undoSteps, step);
 		},
-		takeUndo: () => undoSteps.pop(),
-		takeRedo: () => redoSteps.pop(),
-		returnUndo: (step) => pushWithinLimit(undoSteps, step),
-		returnRedo: (step) => pushWithinLimit(redoSteps, step),
+		takeUndo: () => take(undoSteps),
+		takeRedo: () => take(redoSteps),
+		returnUndo: (step) => add(undoSteps, step),
+		returnRedo: (step) => add(redoSteps, step),
 		undoLabels: () => undoSteps.map((step) => step.label).reverse(),
 		redoLabels: () => redoSteps.map((step) => step.label).reverse(),
+		usedBytes: () => totalBytes,
 		clear() {
 			undoSteps.length = 0;
 			redoSteps.length = 0;
+			totalBytes = 0;
 		}
 	};
 }
 //#endregion
 exports.createHistoryStack = createHistoryStack;
+exports.estimateStepBytes = estimateStepBytes;

package/dist/history/history-stack.js

@@ -1,27 +1,62 @@
 //#region src/history/history-stack.ts
-function createHistoryStack(limit) {
+function bytesOfChange(change) {
+	let bytes = (change.order?.length ?? 0) * 8;
+	for (const [id, json] of change.objects) bytes += (id.length + (json?.length ?? 0)) * 2;
+	return bytes;
+}
+function estimateStepBytes(step) {
+	return bytesOfChange(step.before) + bytesOfChange(step.after) + step.label.length * 2;
+}
+function createHistoryStack(limits) {
 	const undoSteps = [];
 	const redoSteps = [];
-	function pushWithinLimit(steps, step) {
+	const sizes = /* @__PURE__ */ new WeakMap();
+	let totalBytes = 0;
+	function sizeOf(step) {
+		let size = sizes.get(step);
+		if (size === void 0) {
+			size = estimateStepBytes(step);
+			sizes.set(step, size);
+		}
+		return size;
+	}
+	function forget(step) {
+		if (step) totalBytes -= sizeOf(step);
+	}
+	function stayWithinLimits() {
+		while (undoSteps.length > limits.steps) forget(undoSteps.shift());
+		while (redoSteps.length > limits.steps) forget(redoSteps.shift());
+		while (totalBytes > limits.bytes && undoSteps.length + redoSteps.length > 1) forget(undoSteps.length > 0 ? undoSteps.shift() : redoSteps.shift());
+	}
+	function add(steps, step) {
 		steps.push(step);
-		if (steps.length > limit) steps.shift();
+		totalBytes += sizeOf(step);
+		stayWithinLimits();
+	}
+	function take(steps) {
+		const step = steps.pop();
+		forget(step);
+		return step;
 	}
 	return {
 		record(step) {
-			pushWithinLimit(undoSteps, step);
+			redoSteps.forEach(forget);
 			redoSteps.length = 0;
+			add(undoSteps, step);
 		},
-		takeUndo: () => undoSteps.pop(),
-		takeRedo: () => redoSteps.pop(),
-		returnUndo: (step) => pushWithinLimit(undoSteps, step),
-		returnRedo: (step) => pushWithinLimit(redoSteps, step),
+		takeUndo: () => take(undoSteps),
+		takeRedo: () => take(redoSteps),
+		returnUndo: (step) => add(undoSteps, step),
+		returnRedo: (step) => add(redoSteps, step),
 		undoLabels: () => undoSteps.map((step) => step.label).reverse(),
 		redoLabels: () => redoSteps.map((step) => step.label).reverse(),
+		usedBytes: () => totalBytes,
 		clear() {
 			undoSteps.length = 0;
 			redoSteps.length = 0;
+			totalBytes = 0;
 		}
 	};
 }
 //#endregion
-export { createHistoryStack };
+export { createHistoryStack, estimateStepBytes };