@image-marker/web 0.1.0

package/lib/module/editor/controller.js

@@ -0,0 +1,915 @@
+import { migrateWatermarkRecipe, } from './core-contract.js';
+import { normalizeSafeArea, snapLayerPosition } from './geometry.js';
+function cloneSource(value) {
+    if (Array.isArray(value)) {
+        return value.map(cloneSource);
+    }
+    if (value && typeof value === 'object') {
+        const prototype = Object.getPrototypeOf(value);
+        if (prototype === Object.prototype || prototype === null) {
+            return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, cloneSource(item)]));
+        }
+    }
+    return value;
+}
+function cloneLayer(layer) {
+    return cloneSource(layer);
+}
+function cloneRecipe(recipe) {
+    return cloneSource(recipe);
+}
+function cloneExportOptions(options) {
+    return {
+        invisible: options.invisible ? { ...options.invisible } : undefined,
+        contentCredentials: options.contentCredentials
+            ? { ...options.contentCredentials }
+            : undefined,
+    };
+}
+function cloneViewport(viewport) {
+    return { ...viewport, pan: { ...viewport.pan } };
+}
+function coordinate(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value === 'string' && !value.trim().endsWith('%')) {
+        const parsed = Number(value);
+        if (Number.isFinite(parsed))
+            return parsed;
+    }
+    return 0;
+}
+function clamp(value, minimum, maximum) {
+    return Math.max(minimum, Math.min(value, maximum));
+}
+function clampScale(value) {
+    return clamp(value, 0.01, 100);
+}
+function normalizeDegrees(value) {
+    const normalized = value % 360;
+    return normalized < 0 ? normalized + 360 : normalized;
+}
+function unique(values) {
+    return [...new Set(values)];
+}
+function isControllerOptions(value) {
+    return 'document' in value;
+}
+function isClipboard(value) {
+    if (!value || typeof value !== 'object')
+        return false;
+    const candidate = value;
+    return (candidate.kind === 'image-marker/editor-layers' &&
+        candidate.version === 1 &&
+        Array.isArray(candidate.layers));
+}
+/**
+ * Headless state engine shared by native and Web editor surfaces.
+ *
+ * Recipe state, multi-selection, history, clipboard, grouping, alignment,
+ * viewport state, and optional autosave live here. Rendering and application
+ * design-system choices remain injectable.
+ */
+export class ImageMarkerEditorController {
+    constructor(documentOrOptions, legacyHistoryLimit = 100) {
+        this.selectedLayerIds = [];
+        this.exportOptions = {};
+        this.viewport = {
+            zoom: 1,
+            pan: { x: 0, y: 0 },
+            fitMode: 'contain',
+        };
+        this.snapGuides = [];
+        this.past = [];
+        this.future = [];
+        this.listeners = new Set();
+        this.idSequence = 0;
+        this.groupSequence = 0;
+        this.historyGroupActive = false;
+        this.historyGroupCaptured = false;
+        const options = isControllerOptions(documentOrOptions)
+            ? documentOrOptions
+            : {
+                document: documentOrOptions,
+                historyLimit: legacyHistoryLimit,
+            };
+        this.recipe = migrateWatermarkRecipe(options.document);
+        this.safeArea = normalizeSafeArea();
+        this.historyLimit = Math.max(1, options.historyLimit ?? 100);
+        this.autosave = options.autosave;
+        this.onChange = options.onChange;
+        this.idSequence = this.recipe.layers.length;
+    }
+    getState() {
+        const selectedLayerId = this.selectedLayerIds.at(-1);
+        return {
+            recipe: cloneRecipe(this.recipe),
+            selectedLayerIds: [...this.selectedLayerIds],
+            selectedLayerId,
+            safeArea: { ...this.safeArea },
+            snapGuides: this.snapGuides.map((guide) => ({ ...guide })),
+            exportOptions: cloneExportOptions(this.exportOptions),
+            viewport: cloneViewport(this.viewport),
+            canUndo: this.past.length > 0,
+            canRedo: this.future.length > 0,
+        };
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        listener(this.getState());
+        return () => this.listeners.delete(listener);
+    }
+    dispose() {
+        if (this.autosaveTimer)
+            clearTimeout(this.autosaveTimer);
+        this.autosaveTimer = undefined;
+        this.listeners.clear();
+    }
+    beginHistoryGroup() {
+        this.historyGroupActive = true;
+        this.historyGroupCaptured = false;
+    }
+    endHistoryGroup() {
+        this.historyGroupActive = false;
+        this.historyGroupCaptured = false;
+        this.snapGuides = [];
+        this.emit();
+    }
+    selectLayer(id, mode = 'replace') {
+        if (!id || !this.recipe.layers.some((layer) => layer.id === id)) {
+            if (mode === 'replace')
+                this.selectedLayerIds = [];
+            this.emit(true);
+            return;
+        }
+        if (mode === 'add') {
+            this.selectedLayerIds = unique([...this.selectedLayerIds, id]);
+        }
+        else if (mode === 'toggle') {
+            this.selectedLayerIds = this.selectedLayerIds.includes(id)
+                ? this.selectedLayerIds.filter((value) => value !== id)
+                : [...this.selectedLayerIds, id];
+        }
+        else {
+            this.selectedLayerIds = [id];
+        }
+        this.emit(true);
+    }
+    selectLayers(ids) {
+        const existing = new Set(this.recipe.layers.map((layer) => layer.id));
+        this.selectedLayerIds = unique(ids).filter((id) => existing.has(id));
+        this.emit(true);
+    }
+    selectAll() {
+        this.selectedLayerIds = this.recipe.layers.map((layer) => layer.id);
+        this.emit(true);
+    }
+    clearSelection() {
+        this.selectLayer(undefined);
+    }
+    /**
+     * Synchronize a controlled Editor state. History capture is opt-in so parent
+     * renders do not create undo entries.
+     */
+    replaceState(state, recordHistory = false) {
+        const apply = () => {
+            this.recipe = cloneRecipe(state.recipe);
+            this.selectedLayerIds = [...state.selectedLayerIds];
+            this.safeArea = { ...state.safeArea };
+            this.exportOptions = cloneExportOptions(state.exportOptions);
+            this.viewport = cloneViewport(state.viewport);
+            this.snapGuides = state.snapGuides.map((guide) => ({ ...guide }));
+        };
+        if (recordHistory)
+            this.commit(apply);
+        else {
+            apply();
+            this.emit(true);
+        }
+    }
+    importRecipe(document) {
+        this.commit(() => {
+            this.recipe = migrateWatermarkRecipe(document);
+            this.selectedLayerIds = [];
+            this.idSequence = this.recipe.layers.length;
+        });
+    }
+    applyTemplate(template) {
+        this.importRecipe(template.recipe);
+    }
+    exportRecipe() {
+        return cloneRecipe(this.recipe);
+    }
+    addLayer(layer, index = this.recipe.layers.length) {
+        const id = layer.id ?? this.nextLayerId();
+        if (this.recipe.layers.some((item) => item.id === id)) {
+            throw new Error(`Layer id "${id}" already exists.`);
+        }
+        const definition = migrateWatermarkRecipe({
+            schemaVersion: 2,
+            layers: [{ ...layer, id }],
+            output: {},
+        }).layers[0];
+        if (!definition) {
+            throw new Error('Unable to create the editor layer.');
+        }
+        this.commit(() => {
+            const insertion = Math.max(0, Math.min(index, this.recipe.layers.length));
+            this.recipe.layers.splice(insertion, 0, definition);
+            this.selectedLayerIds = [id];
+        });
+        return id;
+    }
+    duplicateLayers(ids = this.selectedLayerIds) {
+        const selected = this.layersByIds(ids);
+        if (selected.length === 0)
+            return [];
+        const created = [];
+        this.commit(() => {
+            for (const source of selected) {
+                const index = this.layerIndex(source.id);
+                const id = this.uniqueLayerId(`${source.id}-copy`);
+                const copy = cloneLayer(source);
+                copy.id = id;
+                copy.name = source.name ? `${source.name} copy` : undefined;
+                copy.locked = false;
+                copy.position = {
+                    ...copy.position,
+                    X: coordinate(copy.position?.X) + 16,
+                    Y: coordinate(copy.position?.Y) + 16,
+                };
+                this.recipe.layers.splice(index + 1, 0, copy);
+                created.push(id);
+            }
+            this.selectedLayerIds = created;
+        });
+        return created;
+    }
+    removeLayer(id = this.selectedLayerIds.at(-1)) {
+        if (!id)
+            return false;
+        return this.removeLayers([id]) > 0;
+    }
+    removeLayers(ids = this.selectedLayerIds) {
+        const selected = this.editableLayers(ids);
+        if (selected.length === 0)
+            return 0;
+        const selectedIds = new Set(selected.map((layer) => layer.id));
+        this.commit(() => {
+            this.recipe.layers = this.recipe.layers.filter((layer) => !selectedIds.has(layer.id));
+            this.selectedLayerIds = this.selectedLayerIds.filter((id) => !selectedIds.has(id));
+        });
+        return selected.length;
+    }
+    setLayerVisible(id, visible) {
+        this.patchLayer(id, { visible });
+    }
+    setLayerLocked(id, locked) {
+        const index = this.layerIndex(id);
+        if (index < 0)
+            throw new Error(`Unknown layer id "${id}".`);
+        this.commit(() => {
+            const layer = this.recipe.layers[index];
+            if (layer)
+                this.recipe.layers[index] = { ...layer, locked };
+        });
+    }
+    renameLayer(id, name) {
+        const normalized = name?.trim();
+        this.patchLayer(id, { name: normalized || undefined });
+    }
+    patchLayer(id, patch) {
+        this.updateLayer(id, (layer) => {
+            if (patch.id !== undefined && patch.id !== id) {
+                throw new Error('Layer IDs cannot be changed through update operations.');
+            }
+            if (patch.type !== undefined && patch.type !== layer.type) {
+                throw new Error('Layer types cannot be changed through update operations.');
+            }
+            return {
+                ...layer,
+                ...cloneSource(patch),
+                id,
+                type: layer.type,
+            };
+        });
+    }
+    updateTextLayer(id, patch) {
+        this.updateLayer(id, (layer) => {
+            if (layer.type !== 'text') {
+                throw new Error(`Layer "${id}" is not a text layer.`);
+            }
+            return {
+                ...layer,
+                ...patch,
+                style: patch.style
+                    ? { ...layer.style, ...cloneSource(patch.style) }
+                    : layer.style,
+            };
+        });
+    }
+    replaceImage(id, source) {
+        this.updateLayer(id, (layer) => {
+            if (layer.type !== 'image') {
+                throw new Error(`Layer "${id}" is not an image layer.`);
+            }
+            return { ...layer, src: source };
+        });
+    }
+    moveLayer(id, point, snapContext) {
+        const layer = this.requireEditableLayer(id);
+        const previous = {
+            x: coordinate(layer.position?.X),
+            y: coordinate(layer.position?.Y),
+        };
+        const snapped = snapContext
+            ? snapLayerPosition(point, {
+                ...snapContext,
+                safeArea: snapContext.safeArea ?? this.safeArea,
+            })
+            : { point, guides: [] };
+        const transformIds = this.transformLayerIds(id);
+        this.editableLayers(transformIds);
+        const delta = {
+            x: snapped.point.x - previous.x,
+            y: snapped.point.y - previous.y,
+        };
+        this.commit(() => {
+            this.moveLayersBy(transformIds, delta);
+            this.snapGuides = snapped.guides;
+        });
+        return snapped.point;
+    }
+    nudgeLayer(id, delta) {
+        const layer = this.requireEditableLayer(id);
+        this.moveLayer(id, {
+            x: coordinate(layer.position?.X) + delta.x,
+            y: coordinate(layer.position?.Y) + delta.y,
+        });
+    }
+    nudgeSelection(delta) {
+        const layers = this.editableLayers(this.selectedLayerIds);
+        if (layers.length === 0)
+            return;
+        this.commit(() => this.moveLayersBy(layers.map((layer) => layer.id), delta));
+    }
+    scaleLayer(id, scale) {
+        if (!Number.isFinite(scale))
+            throw new Error('scale must be finite.');
+        this.updateLayer(id, (current) => {
+            if (current.type === 'image') {
+                return { ...current, scale: clampScale(scale) };
+            }
+            return {
+                ...current,
+                style: {
+                    ...current.style,
+                    fontSize: clampScale(14 * scale),
+                    fontSizeRatio: undefined,
+                },
+            };
+        });
+    }
+    rotateLayer(id, degrees) {
+        if (!Number.isFinite(degrees)) {
+            throw new Error('rotation must be finite.');
+        }
+        this.updateLayer(id, (layer) => layer.type === 'image'
+            ? { ...layer, rotate: normalizeDegrees(degrees) }
+            : {
+                ...layer,
+                style: {
+                    ...layer.style,
+                    rotate: normalizeDegrees(degrees),
+                },
+            });
+    }
+    reorderLayer(id, targetIndex) {
+        const currentIndex = this.layerIndex(id);
+        if (currentIndex < 0)
+            throw new Error(`Unknown layer id "${id}".`);
+        this.requireEditableLayer(id);
+        const bounded = Math.max(0, Math.min(Math.trunc(targetIndex), this.recipe.layers.length - 1));
+        if (bounded === currentIndex)
+            return;
+        this.commit(() => {
+            const [layer] = this.recipe.layers.splice(currentIndex, 1);
+            if (layer)
+                this.recipe.layers.splice(bounded, 0, layer);
+        });
+    }
+    groupLayers(ids = this.selectedLayerIds, requestedGroupId) {
+        const layers = this.editableLayers(unique(ids));
+        if (layers.length < 2) {
+            throw new Error('Grouping requires at least two editable layers.');
+        }
+        const groupId = this.uniqueGroupId(requestedGroupId ?? 'group');
+        const selected = new Set(layers.map((layer) => layer.id));
+        this.commit(() => {
+            this.recipe.layers = this.recipe.layers.map((layer) => selected.has(layer.id) ? { ...layer, groupId } : layer);
+            this.selectedLayerIds = layers.map((layer) => layer.id);
+        });
+        return groupId;
+    }
+    ungroupLayers(ids = this.selectedLayerIds) {
+        const layers = this.editableLayers(ids);
+        const groupIds = unique(layers
+            .map((layer) => layer.groupId)
+            .filter((value) => Boolean(value)));
+        if (groupIds.length === 0)
+            return [];
+        const selectedGroups = new Set(groupIds);
+        this.editableLayers(this.recipe.layers
+            .filter((layer) => layer.groupId && selectedGroups.has(layer.groupId))
+            .map((layer) => layer.id));
+        this.commit(() => {
+            this.recipe.layers = this.recipe.layers.map((layer) => {
+                if (!layer.groupId || !selectedGroups.has(layer.groupId))
+                    return layer;
+                const next = { ...layer };
+                delete next.groupId;
+                return next;
+            });
+        });
+        return groupIds;
+    }
+    alignLayers(alignment, bounds, canvas) {
+        const layers = this.editableLayers(this.selectedLayerIds);
+        const byId = new Map(bounds.map((bound) => [bound.id, bound]));
+        const selectedBounds = layers.map((layer) => {
+            const bound = byId.get(layer.id);
+            if (!bound)
+                throw new Error(`Missing bounds for layer "${layer.id}".`);
+            return bound;
+        });
+        if (selectedBounds.length === 0)
+            return;
+        const minX = canvas ? 0 : Math.min(...selectedBounds.map((item) => item.x));
+        const minY = canvas ? 0 : Math.min(...selectedBounds.map((item) => item.y));
+        const maxX = canvas
+            ? canvas.width
+            : Math.max(...selectedBounds.map((item) => item.x + item.width));
+        const maxY = canvas
+            ? canvas.height
+            : Math.max(...selectedBounds.map((item) => item.y + item.height));
+        this.commit(() => {
+            for (const bound of selectedBounds) {
+                const layer = this.recipe.layers[this.layerIndex(bound.id)];
+                if (!layer)
+                    continue;
+                let x = coordinate(layer.position?.X);
+                let y = coordinate(layer.position?.Y);
+                if (alignment === 'left')
+                    x = minX;
+                else if (alignment === 'center') {
+                    x = (minX + maxX - bound.width) / 2;
+                }
+                else if (alignment === 'right')
+                    x = maxX - bound.width;
+                else if (alignment === 'top')
+                    y = minY;
+                else if (alignment === 'middle') {
+                    y = (minY + maxY - bound.height) / 2;
+                }
+                else
+                    y = maxY - bound.height;
+                layer.position = { ...layer.position, X: x, Y: y };
+            }
+        });
+    }
+    distributeLayers(direction, bounds) {
+        const layers = this.editableLayers(this.selectedLayerIds);
+        if (layers.length < 3) {
+            throw new Error('Distribution requires at least three editable layers.');
+        }
+        const selected = new Set(layers.map((layer) => layer.id));
+        const items = bounds
+            .filter((bound) => selected.has(bound.id))
+            .sort((left, right) => direction === 'horizontal' ? left.x - right.x : left.y - right.y);
+        if (items.length !== layers.length) {
+            throw new Error('Bounds are required for every selected layer.');
+        }
+        const first = items[0];
+        const last = items.at(-1);
+        const start = direction === 'horizontal' ? first.x : first.y;
+        const end = direction === 'horizontal' ? last.x + last.width : last.y + last.height;
+        const occupied = items.reduce((total, item) => total + (direction === 'horizontal' ? item.width : item.height), 0);
+        const gap = (end - start - occupied) / (items.length - 1);
+        this.commit(() => {
+            let cursor = start;
+            for (const item of items) {
+                const layer = this.recipe.layers[this.layerIndex(item.id)];
+                if (!layer)
+                    continue;
+                layer.position = {
+                    ...layer.position,
+                    X: direction === 'horizontal' ? cursor : coordinate(layer.position?.X),
+                    Y: direction === 'vertical' ? cursor : coordinate(layer.position?.Y),
+                };
+                cursor += (direction === 'horizontal' ? item.width : item.height) + gap;
+            }
+        });
+    }
+    copyLayers(ids = this.selectedLayerIds) {
+        const selected = new Set(ids);
+        const clipboard = {
+            kind: 'image-marker/editor-layers',
+            version: 1,
+            layers: this.recipe.layers
+                .filter((layer) => selected.has(layer.id))
+                .map(cloneLayer),
+        };
+        if (clipboard.layers.length === 0) {
+            throw new Error('Copy requires at least one existing layer.');
+        }
+        this.clipboard = cloneSource(clipboard);
+        this.emit();
+        return JSON.stringify(clipboard);
+    }
+    canPaste() {
+        return Boolean(this.clipboard?.layers.length);
+    }
+    pasteLayers(serialized, offset = { x: 20, y: 20 }) {
+        const parsed = typeof serialized === 'string'
+            ? JSON.parse(serialized)
+            : serialized ?? this.clipboard;
+        if (!isClipboard(parsed)) {
+            throw new Error('Unsupported editor clipboard payload.');
+        }
+        const created = [];
+        const groupIds = new Map();
+        this.commit(() => {
+            for (const source of parsed.layers) {
+                const copy = cloneLayer(source);
+                copy.id = this.uniqueLayerId(`${source.id}-copy`);
+                if (copy.groupId) {
+                    const mapped = groupIds.get(copy.groupId) ??
+                        this.uniqueGroupId(`${copy.groupId}-copy`);
+                    groupIds.set(copy.groupId, mapped);
+                    copy.groupId = mapped;
+                }
+                copy.position = {
+                    ...copy.position,
+                    X: coordinate(copy.position?.X) + offset.x,
+                    Y: coordinate(copy.position?.Y) + offset.y,
+                };
+                this.recipe.layers.push(copy);
+                created.push(copy.id);
+            }
+            this.selectedLayerIds = created;
+        });
+        return created;
+    }
+    setSafeArea(safeArea) {
+        this.commit(() => {
+            this.safeArea = normalizeSafeArea(safeArea);
+        });
+    }
+    setExportOptions(options) {
+        this.commit(() => {
+            this.exportOptions = cloneExportOptions(options);
+        });
+    }
+    setViewportZoom(zoom, anchor) {
+        if (!Number.isFinite(zoom))
+            throw new Error('zoom must be finite.');
+        const nextZoom = clamp(zoom, 0.1, 16);
+        const previousZoom = this.viewport.zoom;
+        const nextPan = anchor
+            ? {
+                x: anchor.x -
+                    ((anchor.x - this.viewport.pan.x) * nextZoom) / previousZoom,
+                y: anchor.y -
+                    ((anchor.y - this.viewport.pan.y) * nextZoom) / previousZoom,
+            }
+            : this.viewport.pan;
+        this.viewport = {
+            zoom: nextZoom,
+            pan: nextPan,
+            fitMode: nextZoom === 1 ? 'contain' : 'manual',
+        };
+        this.emit(true);
+    }
+    zoomViewportBy(factor, anchor) {
+        this.setViewportZoom(this.viewport.zoom * factor, anchor);
+    }
+    panViewport(delta) {
+        this.viewport = {
+            ...this.viewport,
+            pan: {
+                x: this.viewport.pan.x + delta.x,
+                y: this.viewport.pan.y + delta.y,
+            },
+            fitMode: 'manual',
+        };
+        this.emit(true);
+    }
+    fitViewport() {
+        this.viewport = {
+            zoom: 1,
+            pan: { x: 0, y: 0 },
+            fitMode: 'contain',
+        };
+        this.emit(true);
+    }
+    handleKeyCommand(command) {
+        const modifier = command.metaKey || command.ctrlKey;
+        const key = command.key.toLowerCase();
+        if (modifier && key === 'z') {
+            if (command.shiftKey)
+                this.redo();
+            else
+                this.undo();
+            return true;
+        }
+        if (modifier && key === 'y') {
+            this.redo();
+            return true;
+        }
+        if (modifier && key === 'a') {
+            this.selectAll();
+            return true;
+        }
+        if (modifier && key === 'c') {
+            this.copyLayers();
+            return true;
+        }
+        if (modifier && key === 'x') {
+            this.copyLayers();
+            this.removeLayers();
+            return true;
+        }
+        if (modifier && key === 'v') {
+            this.pasteLayers();
+            return true;
+        }
+        if (modifier && key === 'd') {
+            this.duplicateLayers();
+            return true;
+        }
+        if (modifier && key === 'g') {
+            if (command.shiftKey)
+                this.ungroupLayers();
+            else
+                this.groupLayers();
+            return true;
+        }
+        if (modifier && key === '0') {
+            this.fitViewport();
+            return true;
+        }
+        if (modifier && (key === '+' || key === '=')) {
+            this.zoomViewportBy(1.2);
+            return true;
+        }
+        if (modifier && key === '-') {
+            this.zoomViewportBy(1 / 1.2);
+            return true;
+        }
+        const id = this.selectedLayerIds.at(-1);
+        if (!id)
+            return false;
+        if (key === 'delete' || key === 'backspace') {
+            return this.removeLayers() > 0;
+        }
+        const amount = command.shiftKey ? 10 : 1;
+        if (key === 'arrowleft') {
+            this.nudgeSelection({ x: -amount, y: 0 });
+        }
+        else if (key === 'arrowright') {
+            this.nudgeSelection({ x: amount, y: 0 });
+        }
+        else if (key === 'arrowup') {
+            this.nudgeSelection({ x: 0, y: -amount });
+        }
+        else if (key === 'arrowdown') {
+            this.nudgeSelection({ x: 0, y: amount });
+        }
+        else if (key === '[') {
+            this.reorderLayer(id, this.layerIndex(id) - 1);
+        }
+        else if (key === ']') {
+            this.reorderLayer(id, this.layerIndex(id) + 1);
+        }
+        else {
+            return false;
+        }
+        return true;
+    }
+    undo() {
+        const previous = this.past.pop();
+        if (!previous)
+            return false;
+        this.future.push(this.snapshot());
+        this.restore(previous);
+        this.emit(true);
+        return true;
+    }
+    redo() {
+        const next = this.future.pop();
+        if (!next)
+            return false;
+        this.past.push(this.snapshot());
+        this.restore(next);
+        this.emit(true);
+        return true;
+    }
+    serializeState() {
+        const snapshot = {
+            version: 1,
+            recipe: cloneRecipe(this.recipe),
+            selectedLayerIds: [...this.selectedLayerIds],
+            safeArea: { ...this.safeArea },
+            // Do not persist invisible-watermark keys or signing adapters.
+            exportOptions: {},
+            viewport: cloneViewport(this.viewport),
+        };
+        return JSON.stringify(snapshot);
+    }
+    restoreSerializedState(serialized) {
+        const parsed = JSON.parse(serialized);
+        if (parsed.version !== 1 || !parsed.recipe) {
+            throw new Error('Unsupported editor autosave document.');
+        }
+        const recipe = migrateWatermarkRecipe(parsed.recipe);
+        const existing = new Set(recipe.layers.map((layer) => layer.id));
+        this.recipe = recipe;
+        this.selectedLayerIds = (parsed.selectedLayerIds ?? []).filter((id) => existing.has(id));
+        this.safeArea = normalizeSafeArea(parsed.safeArea);
+        this.exportOptions = cloneExportOptions(parsed.exportOptions ?? {});
+        this.viewport = parsed.viewport
+            ? cloneViewport(parsed.viewport)
+            : { zoom: 1, pan: { x: 0, y: 0 }, fitMode: 'contain' };
+        this.past.length = 0;
+        this.future.length = 0;
+        this.emit();
+    }
+    async restoreAutosave() {
+        if (!this.autosave)
+            return false;
+        const serialized = await this.autosave.storage.load(this.autosave.key);
+        if (!serialized)
+            return false;
+        this.restoreSerializedState(serialized);
+        return true;
+    }
+    async flushAutosave() {
+        if (!this.autosave)
+            return false;
+        if (this.autosaveTimer)
+            clearTimeout(this.autosaveTimer);
+        this.autosaveTimer = undefined;
+        await this.autosave.storage.save(this.autosave.key, this.serializeState());
+        return true;
+    }
+    async clearAutosave() {
+        if (!this.autosave?.storage.remove)
+            return false;
+        if (this.autosaveTimer)
+            clearTimeout(this.autosaveTimer);
+        this.autosaveTimer = undefined;
+        await this.autosave.storage.remove(this.autosave.key);
+        return true;
+    }
+    updateLayer(id, updater) {
+        const index = this.layerIndex(id);
+        const layer = this.requireEditableLayer(id);
+        this.commit(() => {
+            const updated = updater(cloneLayer(layer));
+            if (updated.id !== id) {
+                throw new Error('Layer IDs cannot be changed through update operations.');
+            }
+            this.recipe.layers[index] = updated;
+        });
+    }
+    requireEditableLayer(id) {
+        const layer = this.recipe.layers[this.layerIndex(id)];
+        if (!layer)
+            throw new Error(`Unknown layer id "${id}".`);
+        if (layer.locked)
+            throw new Error(`Layer "${id}" is locked.`);
+        return layer;
+    }
+    editableLayers(ids) {
+        return unique(ids).map((id) => this.requireEditableLayer(id));
+    }
+    layersByIds(ids) {
+        return unique(ids).map((id) => {
+            const layer = this.recipe.layers[this.layerIndex(id)];
+            if (!layer)
+                throw new Error(`Unknown layer id "${id}".`);
+            return layer;
+        });
+    }
+    transformLayerIds(id) {
+        if (this.selectedLayerIds.length > 1 &&
+            this.selectedLayerIds.includes(id)) {
+            return [...this.selectedLayerIds];
+        }
+        const layer = this.recipe.layers[this.layerIndex(id)];
+        if (layer?.groupId) {
+            return this.recipe.layers
+                .filter((item) => item.groupId === layer.groupId)
+                .map((item) => item.id);
+        }
+        return [id];
+    }
+    moveLayersBy(ids, delta) {
+        const selected = new Set(ids);
+        for (const layer of this.recipe.layers) {
+            if (!selected.has(layer.id))
+                continue;
+            layer.position = {
+                ...layer.position,
+                X: coordinate(layer.position?.X) + delta.x,
+                Y: coordinate(layer.position?.Y) + delta.y,
+            };
+        }
+    }
+    layerIndex(id) {
+        return this.recipe.layers.findIndex((layer) => layer.id === id);
+    }
+    nextLayerId() {
+        let id;
+        do {
+            this.idSequence += 1;
+            id = `layer-editor-${this.idSequence}`;
+        } while (this.recipe.layers.some((layer) => layer.id === id));
+        return id;
+    }
+    uniqueLayerId(requested) {
+        let id = requested;
+        let sequence = 2;
+        while (this.recipe.layers.some((layer) => layer.id === id)) {
+            id = `${requested}-${sequence}`;
+            sequence += 1;
+        }
+        return id;
+    }
+    uniqueGroupId(requested) {
+        const existing = new Set(this.recipe.layers
+            .map((layer) => layer.groupId)
+            .filter((value) => Boolean(value)));
+        let id = requested;
+        while (existing.has(id)) {
+            this.groupSequence += 1;
+            id = `${requested}-${this.groupSequence + 1}`;
+        }
+        return id;
+    }
+    commit(mutator) {
+        const shouldCapture = !this.historyGroupActive || !this.historyGroupCaptured;
+        if (shouldCapture) {
+            this.past.push(this.snapshot());
+            if (this.past.length > this.historyLimit)
+                this.past.shift();
+            this.future.length = 0;
+            if (this.historyGroupActive)
+                this.historyGroupCaptured = true;
+        }
+        mutator();
+        this.emit(true);
+    }
+    snapshot() {
+        return {
+            recipe: cloneRecipe(this.recipe),
+            selectedLayerIds: [...this.selectedLayerIds],
+            safeArea: { ...this.safeArea },
+            exportOptions: cloneExportOptions(this.exportOptions),
+            viewport: cloneViewport(this.viewport),
+        };
+    }
+    restore(snapshot) {
+        this.recipe = cloneRecipe(snapshot.recipe);
+        this.selectedLayerIds = [...snapshot.selectedLayerIds];
+        this.safeArea = { ...snapshot.safeArea };
+        this.exportOptions = cloneExportOptions(snapshot.exportOptions);
+        this.viewport = cloneViewport(snapshot.viewport);
+        this.snapGuides = [];
+    }
+    scheduleAutosave() {
+        if (!this.autosave)
+            return;
+        if (this.autosaveTimer)
+            clearTimeout(this.autosaveTimer);
+        this.autosaveTimer = setTimeout(() => {
+            this.autosaveTimer = undefined;
+            try {
+                Promise.resolve(this.autosave?.storage.save(this.autosave.key, this.serializeState())).catch((reason) => this.reportAutosaveError(reason));
+            }
+            catch (reason) {
+                this.reportAutosaveError(reason);
+            }
+        }, Math.max(0, this.autosave.debounceMs ?? 350));
+    }
+    reportAutosaveError(reason) {
+        this.autosave?.onError?.(reason instanceof Error ? reason : new Error(String(reason)));
+    }
+    emit(persist = false) {
+        const state = this.getState();
+        this.listeners.forEach((listener) => listener(state));
+        this.onChange?.(state);
+        if (persist)
+            this.scheduleAutosave();
+    }
+}