kritzel-stencil 0.3.11 → 0.3.13

package/dist/collection/components/core/kritzel-engine/kritzel-engine.js

@@ -93,8 +93,18 @@ export class KritzelEngine {
     }
     /** Context menu items shown when right-clicking the canvas background. */
     globalContextMenuItems;
+    onGlobalContextMenuItemsChange(newValue) {
+        if (this.contextMenuHandler) {
+            this.contextMenuHandler.globalContextMenuItems = newValue ?? [];
+        }
+    }
     /** Context menu items shown when right-clicking a selected object. */
     objectContextMenuItems;
+    onObjectContextMenuItemsChange(newValue) {
+        if (this.contextMenuHandler) {
+            this.contextMenuHandler.objectContextMenuItems = newValue ?? [];
+        }
+    }
     /** Maximum zoom scale allowed. Clamped to the absolute maximum defined by the engine. */
     scaleMax = ABSOLUTE_SCALE_MAX;
     validateScaleMax(newValue) {
@@ -129,6 +139,11 @@ export class KritzelEngine {
     onLockDrawingScaleChange(newValue) {
         this.core.store.state.lockDrawingScale = newValue;
     }
+    /** When true, objects fade based on distance to the viewport center. */
+    isObjectDistanceFadingActive = false;
+    onIsObjectDistanceFadingActiveChange() {
+        this.core.rerender();
+    }
     /** The current theme to apply to the editor */
     theme = 'light';
     onThemeChange(newValue) {
@@ -563,7 +578,7 @@ export class KritzelEngine {
         this.core.deselectAllObjects();
         object.id = object.generateId();
         object._core = this.core;
-        object.scale = this.core.store.state.scale;
+        object.scale = object.scale ?? this.core.store.state.scale;
         object.zIndex = this.core.store.currentZIndex;
         object.workspaceId = this.core.store.state.activeWorkspace.id;
         // Handle KritzelText: recreate the editor now that _core is available
@@ -592,7 +607,7 @@ export class KritzelEngine {
                     const oldId = child.id;
                     child.id = child.generateId();
                     child._core = this.core;
-                    child.scale = this.core.store.state.scale;
+                    child.scale = child.scale ?? this.core.store.state.scale;
                     child.zIndex = this.core.store.currentZIndex;
                     child.workspaceId = this.core.store.state.activeWorkspace.id;
                     idRemapping.set(oldId, child.id);
@@ -638,6 +653,82 @@ export class KritzelEngine {
         this.emitObjectsAdded([object]);
         return object;
     }
+    /**
+     * Adds multiple objects to the canvas in a single batch operation.
+     * All objects are inserted within one Yjs transaction (single undo step),
+     * triggering only one rerender cycle. Intended for programmatic streaming
+     * scenarios where per-object overhead would cause stutter.
+     * @param objects - The object instances to add.
+     * @returns The added objects.
+     */
+    async addObjects(objects) {
+        if (objects.length === 0) {
+            return [];
+        }
+        this.core.store.objects.transaction(() => {
+            for (const object of objects) {
+                object.id = object.generateId();
+                object._core = this.core;
+                object.zIndex = this.core.store.currentZIndex;
+                object.workspaceId = this.core.store.state.activeWorkspace.id;
+                if (KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
+                    const pendingContent = object.content;
+                    object.editor = object.createEditor();
+                    if (pendingContent) {
+                        object.setContent(pendingContent);
+                    }
+                }
+                if (KritzelClassHelper.isInstanceOf(object, 'KritzelGroup') && object._pendingChildren.length > 0) {
+                    const idRemapping = new Map();
+                    const allFlushedChildren = [];
+                    const flushGroup = (group) => {
+                        if (group._pendingChildren.length === 0) {
+                            return;
+                        }
+                        const pending = group._pendingChildren;
+                        group._pendingChildren = [];
+                        group.childIds = [];
+                        pending.forEach(child => {
+                            const oldId = child.id;
+                            child.id = child.generateId();
+                            child._core = this.core;
+                            child.zIndex = this.core.store.currentZIndex;
+                            child.workspaceId = this.core.store.state.activeWorkspace.id;
+                            idRemapping.set(oldId, child.id);
+                            group.childIds.push(child.id);
+                            allFlushedChildren.push(child);
+                            if (KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
+                                flushGroup(child);
+                            }
+                        });
+                    };
+                    flushGroup(object);
+                    allFlushedChildren.forEach(child => {
+                        if (KritzelClassHelper.isInstanceOf(child, 'KritzelLine')) {
+                            if (child.startAnchor && idRemapping.has(child.startAnchor.objectId)) {
+                                child.startAnchor = { objectId: idRemapping.get(child.startAnchor.objectId) };
+                            }
+                            if (child.endAnchor && idRemapping.has(child.endAnchor.objectId)) {
+                                child.endAnchor = { objectId: idRemapping.get(child.endAnchor.objectId) };
+                            }
+                        }
+                    });
+                    allFlushedChildren.forEach(child => {
+                        this.core.addObject(child);
+                    });
+                    object.finalize();
+                    this.core.anchorManager.rebuildIndex();
+                }
+                this.core.addObject(object);
+            }
+        });
+        this.core.rerender();
+        await new Promise(resolve => {
+            requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+        });
+        this.emitObjectsAdded(objects);
+        return objects;
+    }
     /**
      * Updates properties of an existing canvas object.
      * @param object - The object to update.
@@ -667,6 +758,28 @@ export class KritzelEngine {
         this.emitObjectsRemoved([object]);
         return object;
     }
+    /**
+     * Removes multiple objects from the canvas in a single batch operation.
+     * All removals happen within one Yjs transaction (single undo step),
+     * triggering only one rerender cycle. Intended for programmatic streaming
+     * scenarios where per-object overhead would cause stutter.
+     * @param objects - The objects to remove.
+     * @returns The removed objects.
+     */
+    async removeObjects(objects) {
+        const objectsMap = this.core.store.objects;
+        if (!objectsMap || objects.length === 0) {
+            return [];
+        }
+        objectsMap.transaction(() => {
+            for (const object of objects) {
+                this.core.removeObject(object);
+            }
+        });
+        this.core.rerender();
+        this.emitObjectsRemoved(objects);
+        return objects;
+    }
     /** Returns the currently selected objects. Returns an empty array if nothing is selected. */
     async getSelectedObjects() {
         const selectionGroup = this.core.store.selectionGroup;
@@ -716,6 +829,14 @@ export class KritzelEngine {
         this.core.rerender();
         return object;
     }
+    /**
+     * Pans the viewport to center on the given object without changing the zoom level.
+     * Unlike `centerObjectInViewport`, this moves the camera — not the object.
+     * @param object - The object whose center the viewport should pan to.
+     */
+    async panToObject(object) {
+        this.viewport.panTo(object.centerX, object.centerY);
+    }
     /**
      * Pans and zooms the viewport to fit the nearest content, with padding.
      * Useful when the user has panned away from all objects.
@@ -733,6 +854,16 @@ export class KritzelEngine {
     async centerAllObjects(animate = true) {
         return this.viewport.centerFitAllObjects(animate);
     }
+    /**
+     * Pans and zooms the viewport to fit the provided objects.
+     * Calculates the combined bounding box of the given objects and centers the viewport to show them.
+     * @param objects - The objects to center and fit in the viewport.
+     * @param animate - Whether to animate the viewport transition (default: true).
+     * @returns `true` if objects were provided and the viewport was adjusted, `false` otherwise.
+     */
+    async centerObjects(objects, animate = true) {
+        return this.viewport.centerFitObjects(objects, animate);
+    }
     /**
      * Sets the viewport to center on the given world coordinates at the specified scale.
      * @param x - X position in world coordinates to center on.
@@ -1321,6 +1452,12 @@ export class KritzelEngine {
         undoStackSize: 0,
         redoStackSize: 0,
     };
+    _objectDistanceFadeNearScale = 1;
+    _objectDistanceFadeFarScale = 0.15;
+    _objectDistanceFadeMinOpacity = 0;
+    _objectDistanceFadeCloseStartScale = 2;
+    _objectDistanceFadeCloseMaxScale = 4;
+    _objectDistanceFadeCloseMinOpacity = 0;
     syncLoadingState() {
         this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
     }
@@ -1629,6 +1766,54 @@ export class KritzelEngine {
         KritzelKeyboardHelper.forceHideKeyboard();
         this.core.rerender();
     }
+    getObjectDistanceFadeMultiplier(objectScale, viewportScale) {
+        if (!this.isObjectDistanceFadingActive) {
+            return 1;
+        }
+        const safeViewportScale = Math.max(Number.isFinite(viewportScale) ? viewportScale : 1, Number.EPSILON);
+        const safeObjectScale = Math.max(Number.isFinite(objectScale) ? objectScale : 1, Number.EPSILON);
+        const normalizedScale = safeViewportScale / safeObjectScale;
+        const farFadeMultiplier = this.getFarDistanceFadeMultiplier(normalizedScale);
+        const closeFadeMultiplier = this.getCloseDistanceFadeMultiplier(normalizedScale);
+        return Math.min(farFadeMultiplier, closeFadeMultiplier);
+    }
+    getFarDistanceFadeMultiplier(normalizedScale) {
+        if (normalizedScale >= this._objectDistanceFadeNearScale) {
+            return 1;
+        }
+        if (normalizedScale <= this._objectDistanceFadeFarScale) {
+            return this._objectDistanceFadeMinOpacity;
+        }
+        const progress = (this._objectDistanceFadeNearScale - normalizedScale) /
+            (this._objectDistanceFadeNearScale - this._objectDistanceFadeFarScale);
+        const smooth = progress * progress * (3 - 2 * progress);
+        return 1 - smooth * (1 - this._objectDistanceFadeMinOpacity);
+    }
+    getCloseDistanceFadeMultiplier(normalizedScale) {
+        if (normalizedScale <= this._objectDistanceFadeCloseStartScale) {
+            return 1;
+        }
+        if (normalizedScale >= this._objectDistanceFadeCloseMaxScale) {
+            return this._objectDistanceFadeCloseMinOpacity;
+        }
+        const progress = (normalizedScale - this._objectDistanceFadeCloseStartScale) /
+            (this._objectDistanceFadeCloseMaxScale - this._objectDistanceFadeCloseStartScale);
+        const smooth = progress * progress * (3 - 2 * progress);
+        return 1 - smooth * (1 - this._objectDistanceFadeCloseMinOpacity);
+    }
+    shouldApplyDistanceFade(object) {
+        return (!KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') &&
+            !KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox'));
+    }
+    getObjectEffectiveOpacity(object, viewportScale) {
+        const safeObjectOpacity = Number.isFinite(object.opacity) ? object.opacity : 1;
+        const distanceFadeMultiplier = this.shouldApplyDistanceFade(object)
+            ? this.getObjectDistanceFadeMultiplier(object.scale, viewportScale)
+            : 1;
+        const multiplied = (object.markedForRemoval ? 0.5 : 1) * safeObjectOpacity * distanceFadeMultiplier;
+        const overridden = ((object.markedForRemoval ? 0.5 : safeObjectOpacity) * distanceFadeMultiplier).toString();
+        return { multiplied, overridden };
+    }
     render() {
         if (!this.viewport) {
             return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading..."))));
@@ -1638,6 +1823,7 @@ export class KritzelEngine {
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
+        const viewportScale = this.core.store.state.scale;
         const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
         const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
         const visibleObjects = this.core.store.objectsInViewport;
@@ -1651,39 +1837,34 @@ export class KritzelEngine {
         return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading...")), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
+            const { multiplied: effectiveOpacity, overridden: effectiveOpacityString } = this.getObjectEffectiveOpacity(object, viewportScale);
             return (h("div", { key: object.id, id: object.id, class: "object", style: {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
                     position: 'absolute',
                     zIndex: object.zIndex.toString(),
                     pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
-                return (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
-                        height: object?.totalHeight + 'px',
-                        width: object?.totalWidth + 'px',
-                        left: '0',
-                        top: '0',
-                        position: 'absolute',
-                        transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                        transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                        overflow: 'visible',
-                    }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.applyOpacity(object.fill, effectiveOpacity, currentTheme), stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' })));
-            })(), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
-                return (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
-                        height: object?.totalHeight + 'px',
-                        width: object?.totalWidth + 'px',
-                        left: '0',
-                        top: '0',
-                        position: 'absolute',
-                        transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                        transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                        overflow: 'visible',
-                    }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('start'), effectiveOpacity), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('end'), effectiveOpacity), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined })));
-            })(), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState === 'ready' && (h("img", { ref: el => el && object.mount(el), src: object.resolvedSrc || object.src, style: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                    height: object?.totalHeight + 'px',
+                    width: object?.totalWidth + 'px',
+                    left: '0',
+                    top: '0',
+                    position: 'absolute',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                    overflow: 'visible',
+                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.applyOpacity(object.fill, effectiveOpacity, currentTheme), stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                    height: object?.totalHeight + 'px',
+                    width: object?.totalWidth + 'px',
+                    left: '0',
+                    top: '0',
+                    position: 'absolute',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                    overflow: 'visible',
+                }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('start'), effectiveOpacity), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('end'), effectiveOpacity), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState === 'ready' && (h("img", { ref: el => el && object.mount(el), src: object.resolvedSrc || object.src, style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -1691,7 +1872,7 @@ export class KritzelEngine {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
@@ -1709,7 +1890,7 @@ export class KritzelEngine {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor({ light: '#e5e7eb', dark: '#2a2a2a' }, currentTheme),
                     borderColor: object.loadState === 'error'
@@ -1733,7 +1914,7 @@ export class KritzelEngine {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
@@ -1774,7 +1955,7 @@ export class KritzelEngine {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                 } }, h("div", { id: "text-object", ref: el => el && object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     minWidth: object.initialWidth + 'px',
@@ -1787,7 +1968,6 @@ export class KritzelEngine {
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
                 } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
                 const fillResolved = KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme);
                 const strokeResolved = KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme);
                 const isFilled = !!fillResolved && fillResolved !== 'transparent';
@@ -1829,7 +2009,7 @@ export class KritzelEngine {
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
-                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
+                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
                     const localClientId = this.core.store.objects?.localClientId;
@@ -2290,7 +2470,7 @@ export class KritzelEngine {
                 "setter": false,
                 "reflect": false,
                 "attribute": "scale-max",
-                "defaultValue": "ABSOLUTE_SCALE_MAX"
+                "defaultValue": "1000"
             },
             "scaleMin": {
                 "type": "number",
@@ -2310,7 +2490,7 @@ export class KritzelEngine {
                 "setter": false,
                 "reflect": false,
                 "attribute": "scale-min",
-                "defaultValue": "ABSOLUTE_SCALE_MIN"
+                "defaultValue": "0.0001"
             },
             "cursorTarget": {
                 "type": "unknown",
@@ -2354,6 +2534,26 @@ export class KritzelEngine {
                 "attribute": "lock-drawing-scale",
                 "defaultValue": "true"
             },
+            "isObjectDistanceFadingActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, objects fade based on distance to the viewport center."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-object-distance-fading-active",
+                "defaultValue": "false"
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,
@@ -3573,6 +3773,61 @@ export class KritzelEngine {
                         }]
                 }
             },
+            "addObjects": {
+                "complexType": {
+                    "signature": "<T extends KritzelBaseObject>(objects: T[]) => Promise<T[]>",
+                    "parameters": [{
+                            "name": "objects",
+                            "type": "T[]",
+                            "docs": "- The object instances to add."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        },
+                        "KritzelText": {
+                            "location": "import",
+                            "path": "../../../classes/objects/text.class",
+                            "id": "src/classes/objects/text.class.ts::KritzelText",
+                            "referenceLocation": "KritzelText"
+                        },
+                        "KritzelGroup": {
+                            "location": "import",
+                            "path": "../../../classes/objects/group.class",
+                            "id": "src/classes/objects/group.class.ts::KritzelGroup",
+                            "referenceLocation": "KritzelGroup"
+                        },
+                        "KritzelLine": {
+                            "location": "import",
+                            "path": "../../../classes/objects/line.class",
+                            "id": "src/classes/objects/line.class.ts::KritzelLine",
+                            "referenceLocation": "KritzelLine"
+                        }
+                    },
+                    "return": "Promise<T[]>"
+                },
+                "docs": {
+                    "text": "Adds multiple objects to the canvas in a single batch operation.\nAll objects are inserted within one Yjs transaction (single undo step),\ntriggering only one rerender cycle. Intended for programmatic streaming\nscenarios where per-object overhead would cause stutter.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "objects - The object instances to add."
+                        }, {
+                            "name": "returns",
+                            "text": "The added objects."
+                        }]
+                }
+            },
             "updateObject": {
                 "complexType": {
                     "signature": "<T extends KritzelBaseObject>(object: T, updatedProperties: Partial<T>) => Promise<T | null>",
@@ -3658,6 +3913,43 @@ export class KritzelEngine {
                         }]
                 }
             },
+            "removeObjects": {
+                "complexType": {
+                    "signature": "<T extends KritzelBaseObject>(objects: T[]) => Promise<T[]>",
+                    "parameters": [{
+                            "name": "objects",
+                            "type": "T[]",
+                            "docs": "- The objects to remove."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "T": {
+                            "location": "global",
+                            "id": "global::T"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<T[]>"
+                },
+                "docs": {
+                    "text": "Removes multiple objects from the canvas in a single batch operation.\nAll removals happen within one Yjs transaction (single undo step),\ntriggering only one rerender cycle. Intended for programmatic streaming\nscenarios where per-object overhead would cause stutter.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "objects - The objects to remove."
+                        }, {
+                            "name": "returns",
+                            "text": "The removed objects."
+                        }]
+                }
+            },
             "getSelectedObjects": {
                 "complexType": {
                     "signature": "() => Promise<KritzelBaseObject<any>[]>",
@@ -3813,6 +4105,36 @@ export class KritzelEngine {
                         }]
                 }
             },
+            "panToObject": {
+                "complexType": {
+                    "signature": "(object: KritzelBaseObject) => Promise<void>",
+                    "parameters": [{
+                            "name": "object",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>",
+                            "docs": "- The object whose center the viewport should pan to."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Pans the viewport to center on the given object without changing the zoom level.\nUnlike `centerObjectInViewport`, this moves the camera \u2014 not the object.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "object - The object whose center the viewport should pan to."
+                        }]
+                }
+            },
             "backToContent": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",
@@ -3860,6 +4182,46 @@ export class KritzelEngine {
                         }]
                 }
             },
+            "centerObjects": {
+                "complexType": {
+                    "signature": "(objects: KritzelBaseObject[], animate?: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "objects",
+                            "type": "KritzelBaseObject<HTMLElement | SVGElement>[]",
+                            "docs": "- The objects to center and fit in the viewport."
+                        }, {
+                            "name": "animate",
+                            "type": "boolean",
+                            "docs": "- Whether to animate the viewport transition (default: true)."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "KritzelBaseObject": {
+                            "location": "import",
+                            "path": "../../../classes/objects/base-object.class",
+                            "id": "src/classes/objects/base-object.class.ts::KritzelBaseObject",
+                            "referenceLocation": "KritzelBaseObject"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Pans and zooms the viewport to fit the provided objects.\nCalculates the combined bounding box of the given objects and centers the viewport to show them.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "objects - The objects to center and fit in the viewport."
+                        }, {
+                            "name": "param",
+                            "text": "animate - Whether to animate the viewport transition (default: true)."
+                        }, {
+                            "name": "returns",
+                            "text": "`true` if objects were provided and the viewport was adjusted, `false` otherwise."
+                        }]
+                }
+            },
             "setViewport": {
                 "complexType": {
                     "signature": "(x: number, y: number, scale: number) => Promise<void>",
@@ -4712,6 +5074,12 @@ export class KritzelEngine {
             }, {
                 "propName": "user",
                 "methodName": "onUserChange"
+            }, {
+                "propName": "globalContextMenuItems",
+                "methodName": "onGlobalContextMenuItemsChange"
+            }, {
+                "propName": "objectContextMenuItems",
+                "methodName": "onObjectContextMenuItemsChange"
             }, {
                 "propName": "scaleMax",
                 "methodName": "validateScaleMax"
@@ -4724,6 +5092,9 @@ export class KritzelEngine {
             }, {
                 "propName": "lockDrawingScale",
                 "methodName": "onLockDrawingScaleChange"
+            }, {
+                "propName": "isObjectDistanceFadingActive",
+                "methodName": "onIsObjectDistanceFadingActiveChange"
             }, {
                 "propName": "theme",
                 "methodName": "onThemeChange"