fabricjs-document-engine 0.2.0 → 0.3.0

package/dist/assets/asset-references.cjs

@@ -0,0 +1,83 @@
+//#region src/assets/asset-references.ts
+function isPlainObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function visitObjects(objects, visit) {
+	const pending = objects.map((object) => ({
+		object,
+		ownerId: object.id
+	})).reverse();
+	while (pending.length > 0) {
+		const { object, ownerId } = pending.pop();
+		const id = object.id ?? ownerId;
+		visit(object, id);
+		const children = (object.objects ?? []).map((child) => ({
+			object: child,
+			ownerId: child.id ?? id
+		}));
+		if (object.clipPath) children.push({
+			object: object.clipPath,
+			ownerId: id
+		});
+		pending.push(...children.reverse());
+	}
+}
+function findImageReferences(objects) {
+	const references = [];
+	visitObjects(objects, (object, objectId) => {
+		if (typeof object.src === "string" && object.src.length > 0) references.push({
+			url: object.src,
+			objectId,
+			crossOrigin: object.crossOrigin,
+			holder: object,
+			key: "src"
+		});
+		for (const paintKey of ["fill", "stroke"]) {
+			const paint = object[paintKey];
+			if (isPlainObject(paint) && typeof paint.source === "string" && paint.source.length > 0) references.push({
+				url: paint.source,
+				objectId,
+				crossOrigin: paint.crossOrigin,
+				holder: paint,
+				key: "source"
+			});
+		}
+	});
+	return references;
+}
+function characterStylesOf(styles) {
+	if (Array.isArray(styles)) return styles.map((range) => isPlainObject(range) && isPlainObject(range.style) ? range.style : {});
+	if (!isPlainObject(styles)) return [];
+	return Object.values(styles).flatMap((line) => isPlainObject(line) ? Object.values(line).filter(isPlainObject) : []);
+}
+function textOf(value, fallback) {
+	if (typeof value === "string" && value.length > 0) return value;
+	if (typeof value === "number") return String(value);
+	return fallback;
+}
+function findFontReferences(objects) {
+	const references = [];
+	visitObjects(objects, (object, objectId) => {
+		if (typeof object.fontFamily !== "string") return;
+		const base = {
+			family: object.fontFamily,
+			weight: textOf(object.fontWeight, "normal"),
+			style: textOf(object.fontStyle, "normal"),
+			objectId
+		};
+		references.push(base);
+		for (const characterStyle of characterStylesOf(object.styles)) {
+			if (characterStyle.fontFamily === void 0 && characterStyle.fontWeight === void 0 && characterStyle.fontStyle === void 0) continue;
+			references.push({
+				family: textOf(characterStyle.fontFamily, base.family),
+				weight: textOf(characterStyle.fontWeight, base.weight),
+				style: textOf(characterStyle.fontStyle, base.style),
+				objectId
+			});
+		}
+	});
+	return references;
+}
+//#endregion
+exports.findFontReferences = findFontReferences;
+exports.findImageReferences = findImageReferences;

package/dist/assets/asset-references.js

@@ -0,0 +1,82 @@
+//#region src/assets/asset-references.ts
+function isPlainObject(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function visitObjects(objects, visit) {
+	const pending = objects.map((object) => ({
+		object,
+		ownerId: object.id
+	})).reverse();
+	while (pending.length > 0) {
+		const { object, ownerId } = pending.pop();
+		const id = object.id ?? ownerId;
+		visit(object, id);
+		const children = (object.objects ?? []).map((child) => ({
+			object: child,
+			ownerId: child.id ?? id
+		}));
+		if (object.clipPath) children.push({
+			object: object.clipPath,
+			ownerId: id
+		});
+		pending.push(...children.reverse());
+	}
+}
+function findImageReferences(objects) {
+	const references = [];
+	visitObjects(objects, (object, objectId) => {
+		if (typeof object.src === "string" && object.src.length > 0) references.push({
+			url: object.src,
+			objectId,
+			crossOrigin: object.crossOrigin,
+			holder: object,
+			key: "src"
+		});
+		for (const paintKey of ["fill", "stroke"]) {
+			const paint = object[paintKey];
+			if (isPlainObject(paint) && typeof paint.source === "string" && paint.source.length > 0) references.push({
+				url: paint.source,
+				objectId,
+				crossOrigin: paint.crossOrigin,
+				holder: paint,
+				key: "source"
+			});
+		}
+	});
+	return references;
+}
+function characterStylesOf(styles) {
+	if (Array.isArray(styles)) return styles.map((range) => isPlainObject(range) && isPlainObject(range.style) ? range.style : {});
+	if (!isPlainObject(styles)) return [];
+	return Object.values(styles).flatMap((line) => isPlainObject(line) ? Object.values(line).filter(isPlainObject) : []);
+}
+function textOf(value, fallback) {
+	if (typeof value === "string" && value.length > 0) return value;
+	if (typeof value === "number") return String(value);
+	return fallback;
+}
+function findFontReferences(objects) {
+	const references = [];
+	visitObjects(objects, (object, objectId) => {
+		if (typeof object.fontFamily !== "string") return;
+		const base = {
+			family: object.fontFamily,
+			weight: textOf(object.fontWeight, "normal"),
+			style: textOf(object.fontStyle, "normal"),
+			objectId
+		};
+		references.push(base);
+		for (const characterStyle of characterStylesOf(object.styles)) {
+			if (characterStyle.fontFamily === void 0 && characterStyle.fontWeight === void 0 && characterStyle.fontStyle === void 0) continue;
+			references.push({
+				family: textOf(characterStyle.fontFamily, base.family),
+				weight: textOf(characterStyle.fontWeight, base.weight),
+				style: textOf(characterStyle.fontStyle, base.style),
+				objectId
+			});
+		}
+	});
+	return references;
+}
+//#endregion
+export { findFontReferences, findImageReferences };

package/dist/assets/font-check.cjs

@@ -0,0 +1,59 @@
+//#region src/assets/font-check.ts
+const genericFamilies = /* @__PURE__ */ new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"ui-serif",
+	"ui-sans-serif",
+	"ui-monospace",
+	"ui-rounded",
+	"emoji",
+	"math",
+	"fangsong"
+]);
+const fallbackFamilies = [
+	"monospace",
+	"serif",
+	"sans-serif"
+];
+const sampleText = "mmmmmmmmmmlli WwQq 0123456789";
+function firstFamily(family) {
+	return (family.split(",")[0] ?? family).trim().replace(/^["']|["']$/g, "");
+}
+function cssFamily(family) {
+	return genericFamilies.has(family.toLowerCase()) ? family : `"${family.replace(/"/g, "\\\"")}"`;
+}
+function fontDescriptor(font, size = 32) {
+	return `${font.style} ${font.weight} ${size}px ${cssFamily(firstFamily(font.family))}`;
+}
+function createMeasuringContext() {
+	if (typeof document === "undefined") return null;
+	return document.createElement("canvas").getContext("2d");
+}
+function isFontRenderable(font, context = createMeasuringContext()) {
+	const family = firstFamily(font.family);
+	if (context === null || genericFamilies.has(family.toLowerCase())) return true;
+	return fallbackFamilies.some((fallback) => {
+		context.font = `${font.style} ${font.weight} 72px ${fallback}`;
+		const fallbackWidth = context.measureText(sampleText).width;
+		context.font = `${font.style} ${font.weight} 72px ${cssFamily(family)}, ${fallback}`;
+		return context.measureText(sampleText).width !== fallbackWidth;
+	});
+}
+async function prepareFont(font, loadFont) {
+	if (loadFont) await loadFont(font);
+	const fontSet = typeof document === "undefined" ? void 0 : document.fonts;
+	if (fontSet) await fontSet.load(fontDescriptor(font), sampleText);
+}
+async function findUnavailableFonts(fonts, loadFont) {
+	await Promise.allSettled(fonts.map((font) => prepareFont(font, loadFont)));
+	const context = createMeasuringContext();
+	return fonts.filter((font) => !isFontRenderable(font, context));
+}
+//#endregion
+exports.findUnavailableFonts = findUnavailableFonts;
+exports.fontDescriptor = fontDescriptor;
+exports.isFontRenderable = isFontRenderable;

package/dist/assets/font-check.d.cts

@@ -0,0 +1,4 @@
+import { FontAsset } from "./asset-manifest.cjs";
+//#region src/assets/font-check.d.ts
+export type FontLoader = (font: FontAsset) => void | Promise<void>;
+//#endregion

package/dist/assets/font-check.d.ts

@@ -0,0 +1,4 @@
+import { FontAsset } from "./asset-manifest.js";
+//#region src/assets/font-check.d.ts
+export type FontLoader = (font: FontAsset) => void | Promise<void>;
+//#endregion

package/dist/assets/font-check.js

@@ -0,0 +1,57 @@
+//#region src/assets/font-check.ts
+const genericFamilies = /* @__PURE__ */ new Set([
+	"serif",
+	"sans-serif",
+	"monospace",
+	"cursive",
+	"fantasy",
+	"system-ui",
+	"ui-serif",
+	"ui-sans-serif",
+	"ui-monospace",
+	"ui-rounded",
+	"emoji",
+	"math",
+	"fangsong"
+]);
+const fallbackFamilies = [
+	"monospace",
+	"serif",
+	"sans-serif"
+];
+const sampleText = "mmmmmmmmmmlli WwQq 0123456789";
+function firstFamily(family) {
+	return (family.split(",")[0] ?? family).trim().replace(/^["']|["']$/g, "");
+}
+function cssFamily(family) {
+	return genericFamilies.has(family.toLowerCase()) ? family : `"${family.replace(/"/g, "\\\"")}"`;
+}
+function fontDescriptor(font, size = 32) {
+	return `${font.style} ${font.weight} ${size}px ${cssFamily(firstFamily(font.family))}`;
+}
+function createMeasuringContext() {
+	if (typeof document === "undefined") return null;
+	return document.createElement("canvas").getContext("2d");
+}
+function isFontRenderable(font, context = createMeasuringContext()) {
+	const family = firstFamily(font.family);
+	if (context === null || genericFamilies.has(family.toLowerCase())) return true;
+	return fallbackFamilies.some((fallback) => {
+		context.font = `${font.style} ${font.weight} 72px ${fallback}`;
+		const fallbackWidth = context.measureText(sampleText).width;
+		context.font = `${font.style} ${font.weight} 72px ${cssFamily(family)}, ${fallback}`;
+		return context.measureText(sampleText).width !== fallbackWidth;
+	});
+}
+async function prepareFont(font, loadFont) {
+	if (loadFont) await loadFont(font);
+	const fontSet = typeof document === "undefined" ? void 0 : document.fonts;
+	if (fontSet) await fontSet.load(fontDescriptor(font), sampleText);
+}
+async function findUnavailableFonts(fonts, loadFont) {
+	await Promise.allSettled(fonts.map((font) => prepareFont(font, loadFont)));
+	const context = createMeasuringContext();
+	return fonts.filter((font) => !isFontRenderable(font, context));
+}
+//#endregion
+export { findUnavailableFonts, fontDescriptor, isFontRenderable };

package/dist/assets/image-check.cjs

@@ -0,0 +1,36 @@
+let fabric = require("fabric");
+//#region src/assets/image-check.ts
+function isCrossOriginUrl(url) {
+	const location = globalThis.location;
+	if (!location || url.startsWith("data:") || url.startsWith("blob:")) return false;
+	try {
+		const parsed = new URL(url, location.href);
+		return (parsed.protocol === "http:" || parsed.protocol === "https:") && parsed.origin !== location.origin;
+	} catch {
+		return false;
+	}
+}
+function isPortableUrl(url) {
+	return !url.startsWith("blob:");
+}
+function isSameUrl(first, second) {
+	if (first === second) return true;
+	const location = globalThis.location;
+	try {
+		return new URL(first, location?.href).href === new URL(second, location?.href).href;
+	} catch {
+		return false;
+	}
+}
+async function findMissingImages(images, signal) {
+	const results = await Promise.allSettled(images.map((image) => fabric.util.loadImage(image.url, {
+		signal,
+		crossOrigin: image.crossOrigin ?? null
+	})));
+	return images.filter((_, index) => results[index].status === "rejected").map((image) => image.url);
+}
+//#endregion
+exports.findMissingImages = findMissingImages;
+exports.isCrossOriginUrl = isCrossOriginUrl;
+exports.isPortableUrl = isPortableUrl;
+exports.isSameUrl = isSameUrl;

package/dist/assets/image-check.js

@@ -0,0 +1,33 @@
+import { util } from "fabric";
+//#region src/assets/image-check.ts
+function isCrossOriginUrl(url) {
+	const location = globalThis.location;
+	if (!location || url.startsWith("data:") || url.startsWith("blob:")) return false;
+	try {
+		const parsed = new URL(url, location.href);
+		return (parsed.protocol === "http:" || parsed.protocol === "https:") && parsed.origin !== location.origin;
+	} catch {
+		return false;
+	}
+}
+function isPortableUrl(url) {
+	return !url.startsWith("blob:");
+}
+function isSameUrl(first, second) {
+	if (first === second) return true;
+	const location = globalThis.location;
+	try {
+		return new URL(first, location?.href).href === new URL(second, location?.href).href;
+	} catch {
+		return false;
+	}
+}
+async function findMissingImages(images, signal) {
+	const results = await Promise.allSettled(images.map((image) => util.loadImage(image.url, {
+		signal,
+		crossOrigin: image.crossOrigin ?? null
+	})));
+	return images.filter((_, index) => results[index].status === "rejected").map((image) => image.url);
+}
+//#endregion
+export { findMissingImages, isCrossOriginUrl, isPortableUrl, isSameUrl };

package/dist/document/document-format.d.cts

@@ -1,3 +1,4 @@
+import { AssetManifest } from "../assets/asset-manifest.cjs";
 //#region src/document/document-format.d.ts
 export declare const CURRENT_SCHEMA_VERSION = 1;
 export interface SerializedFabricObject {
@@ -21,6 +22,7 @@ export interface FabricDocument {
   fabricVersion?: string;
   canvas: DocumentCanvas;
   objects: SerializedFabricObject[];
+  assets?: AssetManifest;
   metadata: Record<string, unknown>;
 }
 export interface DocumentInfo {

package/dist/document/document-format.d.ts

@@ -1,3 +1,4 @@
+import { AssetManifest } from "../assets/asset-manifest.js";
 //#region src/document/document-format.d.ts
 export declare const CURRENT_SCHEMA_VERSION = 1;
 export interface SerializedFabricObject {
@@ -21,6 +22,7 @@ export interface FabricDocument {
   fabricVersion?: string;
   canvas: DocumentCanvas;
   objects: SerializedFabricObject[];
+  assets?: AssetManifest;
   metadata: Record<string, unknown>;
 }
 export interface DocumentInfo {

package/dist/document/validate-document.cjs

@@ -58,6 +58,10 @@ function validateDocument(value) {
 	if (typeof value.createdAt !== "string") issues.push(invalid("createdAt", "must be an ISO date string"));
 	if (typeof value.updatedAt !== "string") issues.push(invalid("updatedAt", "must be an ISO date string"));
 	if (value.revision !== void 0 && !(Number.isInteger(value.revision) && value.revision >= 0)) issues.push(invalid("revision", "must be a whole number of zero or more when present"));
+	if (value.assets !== void 0) {
+		const assets = value.assets;
+		if (!isPlainObject(assets) || !Array.isArray(assets.images) || !Array.isArray(assets.fonts)) issues.push(invalid("assets", "must be an object with images and fonts arrays when present"));
+	}
 	if (!isPlainObject(value.metadata)) issues.push(invalid("metadata", "must be an object"));
 	if (!isPlainObject(value.canvas)) issues.push(invalid("canvas", "must be an object"));
 	else {

package/dist/document/validate-document.js

@@ -58,6 +58,10 @@ function validateDocument(value) {
 	if (typeof value.createdAt !== "string") issues.push(invalid("createdAt", "must be an ISO date string"));
 	if (typeof value.updatedAt !== "string") issues.push(invalid("updatedAt", "must be an ISO date string"));
 	if (value.revision !== void 0 && !(Number.isInteger(value.revision) && value.revision >= 0)) issues.push(invalid("revision", "must be a whole number of zero or more when present"));
+	if (value.assets !== void 0) {
+		const assets = value.assets;
+		if (!isPlainObject(assets) || !Array.isArray(assets.images) || !Array.isArray(assets.fonts)) issues.push(invalid("assets", "must be an object with images and fonts arrays when present"));
+	}
 	if (!isPlainObject(value.metadata)) issues.push(invalid("metadata", "must be an object"));
 	if (!isPlainObject(value.canvas)) issues.push(invalid("canvas", "must be an object"));
 	else {

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

@@ -1,3 +1,7 @@
+const require_asset_manifest = require("../assets/asset-manifest.cjs");
+const require_errors = require("./errors.cjs");
+const require_image_check = require("../assets/image-check.cjs");
+const require_asset_pipeline = require("../assets/asset-pipeline.cjs");
 require("../document/document-format.cjs");
 const require_ids = require("../document/ids.cjs");
 const require_create_document = require("../document/create-document.cjs");
@@ -5,12 +9,15 @@ const require_validate_document = require("../document/validate-document.cjs");
 const require_walk_objects = require("../fabric/walk-objects.cjs");
 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_save_controller = require("../save/save-controller.cjs");
 const require_event_emitter = require("./event-emitter.cjs");
 //#region src/engine/create-document-engine.ts
+function isReplaceableImage(object) {
+	const candidate = object;
+	return typeof candidate.getSrc === "function" && typeof candidate.setSrc === "function";
+}
 function describeDocumentId(value) {
 	const id = value?.id;
 	return typeof id === "string" ? id : void 0;
@@ -21,6 +28,8 @@ function createDocumentEngine(options) {
 	const registry = require_object_registry.createObjectRegistry(options.customObjects);
 	const events = require_event_emitter.createEventEmitter();
 	const objectsById = /* @__PURE__ */ new Map();
+	const assetOptions = options.assets ?? {};
+	const uploadedUrls = /* @__PURE__ */ new Map();
 	let documentInfo = require_create_document.createDocumentInfo(options.document);
 	let activeLoad = null;
 	let destroyed = false;
@@ -65,7 +74,11 @@ function createDocumentEngine(options) {
 	});
 	const saving = require_save_controller.createSaveController({
 		getStorage: () => requireStorage(),
-		createDocument: () => toDocument(),
+		createDocument: async () => {
+			const prepared = await require_asset_pipeline.prepareAssetsForSave(toDocument(), assetOptions, uploadedUrls);
+			if (prepared.warnings.length > 0) events.emit("assets:warning", { warnings: prepared.warnings });
+			return prepared.document;
+		},
 		retry: options.saveRetry,
 		autosave: options.autosave === true ? {} : options.autosave ?? false,
 		onStateChange: (state) => events.emit("save:status", state),
@@ -93,6 +106,7 @@ function createDocumentEngine(options) {
 				height: canvas.getHeight()
 			},
 			objects: serialized.objects,
+			assets: require_asset_manifest.buildAssetManifest(serialized.objects),
 			metadata: { ...documentInfo.metadata }
 		};
 		if (serialized.version !== void 0) document.fabricVersion = serialized.version;
@@ -100,8 +114,8 @@ function createDocumentEngine(options) {
 		return document;
 	}
 	function toLoadError(error, signal) {
-		if (require_errors.isDocumentEngineError(error)) return error;
 		if (signal.aborted) return new require_errors.DocumentEngineError("LOAD_ABORTED", "Loading stopped because a newer load started", { cause: error });
+		if (require_errors.isDocumentEngineError(error)) return error;
 		const reason = error instanceof Error ? error.message : String(error);
 		return new require_errors.DocumentEngineError("LOAD_FAILED", `Fabric could not load the document: ${reason}`, { cause: error });
 	}
@@ -123,7 +137,9 @@ function createDocumentEngine(options) {
 		activeLoad = controller;
 		events.emit("load:start", { documentId: describeDocumentId(input) });
 		try {
-			const document = checkDocument(input);
+			const checked = checkDocument(input);
+			const { document, warnings } = await require_asset_pipeline.prepareAssetsForLoad(checked, assetOptions, controller.signal);
+			if (controller.signal.aborted) throw new Error("aborted");
 			await history.withoutRecording(() => require_fabric_adapter.loadIntoCanvas(canvas, {
 				version: document.fabricVersion,
 				background: document.canvas.background,
@@ -144,7 +160,11 @@ function createDocumentEngine(options) {
 			history.reset();
 			saving.startSession(document.revision ?? 0);
 			canvas.requestRenderAll();
-			events.emit("load:success", { document });
+			if (warnings.length > 0) events.emit("assets:warning", { warnings });
+			events.emit("load:success", {
+				document,
+				warnings
+			});
 			return document;
 		} catch (error) {
 			const engineError = toLoadError(error, controller.signal);
@@ -186,6 +206,7 @@ function createDocumentEngine(options) {
 		history.withoutRecording(() => canvas.clear());
 		objectsById.clear();
 		documentInfo = require_create_document.createDocumentInfo(newOptions);
+		uploadedUrls.clear();
 		history.reset();
 		saving.startSession(0);
 	}
@@ -196,6 +217,30 @@ function createDocumentEngine(options) {
 		rebuildIndex();
 		return objectsById.get(id);
 	}
+	function checkAssets() {
+		ensureUsable();
+		return require_asset_pipeline.inspectAssets(toDocument(), assetOptions, new AbortController().signal);
+	}
+	async function replaceImage(oldUrl, newUrl) {
+		ensureUsable();
+		const images = [];
+		require_walk_objects.walkObjects(canvas.getObjects(), (object) => {
+			if (isReplaceableImage(object) && require_image_check.isSameUrl(object.getSrc(), oldUrl)) images.push(object);
+		});
+		if (images.length === 0) return 0;
+		await history.transaction("Replace image", () => Promise.all(images.map(async (image) => {
+			const displayedWidth = image.width * image.scaleX;
+			const displayedHeight = image.height * image.scaleY;
+			await image.setSrc(newUrl, { crossOrigin: image.crossOrigin ?? null });
+			image.set({
+				scaleX: displayedWidth / image.width,
+				scaleY: displayedHeight / image.height
+			});
+			image.setCoords();
+		})));
+		canvas.requestRenderAll();
+		return images.length;
+	}
 	async function travelThroughHistory(direction) {
 		ensureUsable();
 		try {
@@ -247,6 +292,12 @@ function createDocumentEngine(options) {
 			registry.register(definition);
 		},
 		getObjectById,
+		getAssetManifest: () => toDocument().assets ?? {
+			images: [],
+			fonts: []
+		},
+		checkAssets,
+		replaceImage,
 		transaction(label, work) {
 			ensureUsable();
 			return history.transaction(label, work);

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

@@ -1,4 +1,6 @@
 import { DocumentInfo, FabricDocument } from "../document/document-format.cjs";
+import { AssetManifest } from "../assets/asset-manifest.cjs";
+import { AssetOptions, AssetReport, AssetWarning } from "../assets/asset-pipeline.cjs";
 import { NewDocumentOptions } from "../document/create-document.cjs";
 import { CustomObjectDefinition } from "../fabric/object-registry.cjs";
 import { HistoryOptions, HistoryState } from "../history/create-history.cjs";
@@ -18,6 +20,7 @@ export interface DocumentEngineOptions {
   history?: HistoryOptions;
   autosave?: boolean | AutosaveOptions;
   saveRetry?: RetryOptions;
+  assets?: AssetOptions;
 }
 export interface LoadOptions {
   restoreCanvasSize?: boolean;
@@ -28,6 +31,10 @@ export interface DocumentEngineEvents {
   };
   "load:success": {
     document: FabricDocument;
+    warnings: AssetWarning[];
+  };
+  "assets:warning": {
+    warnings: AssetWarning[];
   };
   "load:error": {
     error: DocumentEngineError;
@@ -72,6 +79,9 @@ export interface DocumentEngine {
   };
   clearHistory(): void;
   getObjectById(id: string): FabricObject | undefined;
+  getAssetManifest(): AssetManifest;
+  checkAssets(): Promise<AssetReport>;
+  replaceImage(oldUrl: string, newUrl: string): Promise<number>;
   on<Name extends keyof DocumentEngineEvents>(name: Name, handler: (payload: DocumentEngineEvents[Name]) => void): Unsubscribe;
   destroy(): void;
 }

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

@@ -1,4 +1,6 @@
 import { DocumentInfo, FabricDocument } from "../document/document-format.js";
+import { AssetManifest } from "../assets/asset-manifest.js";
+import { AssetOptions, AssetReport, AssetWarning } from "../assets/asset-pipeline.js";
 import { NewDocumentOptions } from "../document/create-document.js";
 import { CustomObjectDefinition } from "../fabric/object-registry.js";
 import { HistoryOptions, HistoryState } from "../history/create-history.js";
@@ -18,6 +20,7 @@ export interface DocumentEngineOptions {
   history?: HistoryOptions;
   autosave?: boolean | AutosaveOptions;
   saveRetry?: RetryOptions;
+  assets?: AssetOptions;
 }
 export interface LoadOptions {
   restoreCanvasSize?: boolean;
@@ -28,6 +31,10 @@ export interface DocumentEngineEvents {
   };
   "load:success": {
     document: FabricDocument;
+    warnings: AssetWarning[];
+  };
+  "assets:warning": {
+    warnings: AssetWarning[];
   };
   "load:error": {
     error: DocumentEngineError;
@@ -72,6 +79,9 @@ export interface DocumentEngine {
   };
   clearHistory(): void;
   getObjectById(id: string): FabricObject | undefined;
+  getAssetManifest(): AssetManifest;
+  checkAssets(): Promise<AssetReport>;
+  replaceImage(oldUrl: string, newUrl: string): Promise<number>;
   on<Name extends keyof DocumentEngineEvents>(name: Name, handler: (payload: DocumentEngineEvents[Name]) => void): Unsubscribe;
   destroy(): void;
 }