kritzel-stencil 0.3.11 → 0.3.12

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var schema_constants = require('./schema.constants-BNMNpzvA.js');
+var schema_constants = require('./schema.constants-CzfoUWxF.js');
 var Y = require('yjs');
 var yWebsocket = require('y-websocket');
 require('y-indexeddb');

package/dist/cjs/kritzel-active-users_42.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-CFnj_FXt.js');
-var schema_constants = require('./schema.constants-BNMNpzvA.js');
+var schema_constants = require('./schema.constants-CzfoUWxF.js');
 var Y = require('yjs');
 require('y-indexeddb');
 require('y-websocket');
@@ -951,6 +951,7 @@ const KritzelControls = class {
         this.isControlsReady = index.createEvent(this, "isControlsReady");
     }
     get host() { return index.getElement(this); }
+    visible = true;
     controls = [];
     activeControl = null;
     isUtilityPanelVisible = true;
@@ -1175,13 +1176,13 @@ const KritzelControls = class {
         // Separate tool controls from config control
         const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (index.h(index.Host, { key: 'b567aac7bca12cc5ffb0ee1eb9e6978636aa3c31', class: {
+        return (index.h(index.Host, { key: '0f40a136a6a9556080d922d346318045794421a8', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '88e8ae9ae7429987724df70895b02a3f59216364', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: 'd543e7575cb30e54d9362eddf7c7221fb8cce5f5', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '658e3d7b94e49a002d5057c1fb4fc199a371c48d', class: "kritzel-controls" }, index.h("div", { key: 'b54bb52a43e4a94ae1148cd4e75528bcaad681ef', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: '36ce760357d3228141281a45c0ac7b0024b04795', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '1083380152e9d1b51c35da335533c20ca2ca8fcc', class: "kritzel-controls" }, index.h("div", { key: '11ef0fb76c30ffda0e30f01d43229ca2142a5854', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), index.h("div", { key: '269924a8859aece37ff31202307d4feaecbbde86', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -1211,10 +1212,10 @@ const KritzelControls = class {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, index.h("kritzel-icon", { name: control.icon })));
-        })), index.h("div", { key: 'f0b1e0f74fe197f4d39e307e7dd8dd4819c4b183', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
+        })), index.h("div", { key: '8b97a5bba3ac4992482e8f433d7ba6197918a914', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (index.h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, index.h("div", { key: '51cc3ebf13092e710048441ff64856edd4f53dfc', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: 'dcace186ae3ece1d7e943f51b48ed5094d847284', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: '9b16ac90f335fec3c043545fa0c5b363ab99924e', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: '2425507968e27a01b66c1d7be79a40ebe77cd27d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, index.h("div", { key: 'd9adef8c2acc8d9b9d745174050ce78960b89b58', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), index.h("kritzel-tooltip", { key: '7605bbd2b6335c89c57aa68952293f26efad6b4b', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, index.h("kritzel-tool-config", { key: '27b0f41442215e78b692fa44bb665444a4993b89', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), index.h("div", { key: '1fb5979b1c531593acf5086861b22b7d78d03e8d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -1223,7 +1224,7 @@ const KritzelControls = class {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (index.h("div", { key: 'd2499df3c0a90c101957f55664452739e0f1692b', class: "color-container" }, index.h("kritzel-color", { key: 'b7cfcd3a8579c63f508c2786eecace1223e88974', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (index.h("div", { key: '3713ef344630f6b4d88df2e83992018859ddb18c', class: "color-container" }, index.h("kritzel-color", { key: 'c2679f68efae77c6daeb98be9e03d5320d51a73a', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -2162,6 +2163,7 @@ const DEFAULT_SHAPE_CONFIG = {
     fillColor: { light: 'transparent', dark: 'transparent' },
     strokeColor: schema_constants.DEFAULT_COLOR_PALETTE[0],
     strokeWidth: 4,
+    opacity: 1,
     fontColor: schema_constants.DEFAULT_COLOR_PALETTE[0],
     fontSize: 16,
     fontFamily: 'Arial',
@@ -2364,6 +2366,7 @@ const KritzelEditor = class {
     isUtilityPanelVisible = true;
     isWorkspaceManagerVisible = true;
     isMoreMenuVisible = true;
+    isObjectDistanceFadingActive = false;
     syncConfig = DEFAULT_SYNC_CONFIG;
     assetStorageConfig = schema_constants.DEFAULT_ASSET_STORAGE_CONFIG;
     /** The element to use as the target for the cursor. Defaults to the editor container if not set. */
@@ -2479,12 +2482,18 @@ const KritzelEditor = class {
     async addObject(object) {
         return this.engineRef.addObject(object);
     }
+    async addObjects(objects) {
+        return this.engineRef.addObjects(objects);
+    }
     async updateObject(object, updatedProperties) {
         return this.engineRef.updateObject(object, updatedProperties);
     }
     async removeObject(object) {
         return this.engineRef.removeObject(object);
     }
+    async removeObjects(objects) {
+        return this.engineRef.removeObjects(objects);
+    }
     async getSelectedObjects() {
         return this.engineRef.getSelectedObjects();
     }
@@ -2959,31 +2968,31 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (index.h(index.Host, { key: '3606d2318e6811f2f4b647f1531ff8bda409a401', style: {
+        return (index.h(index.Host, { key: '440621eb23598732c63d4be92ae16785d84b3d6f', style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, index.h("div", { key: '094e66c69a829a3d150cd672f66f3f092cf19623', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'b31a64b26f0f13a24bc07f2a5db8230ebc0377e2', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: '9768ead0daf60292c649a0ccdb4dcd92d8ce342a', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: 'cf4cf487da19cd10352a31dab4e50db4aaabfd7a', ref: el => {
+            } }, index.h("div", { key: 'b20c930c8094f7ab9db8fdb09428cf34a2cab024', class: "top-left-buttons" }, index.h("kritzel-workspace-manager", { key: 'a6ff7e54fb3d45f4a3b1d009b12d2f6229d14d87', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-back-to-content", { key: 'a3cbb86082c2f0768b7457ec25740d27200e287b', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), index.h("kritzel-engine", { key: '82e611de33c40997943e1fd702f0b601fadbf591', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), index.h("kritzel-controls", { key: 'eb0839b834e688f15461ebd7391c87b331a5b328', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), index.h("kritzel-controls", { key: 'eb48df395318bde3fc0bc48784510bf5139bc9e8', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: 'e5c14a118d245ef0ec1c5863eb21022a5e5d7c77', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'bad9ebae5bc91efaf388e525375ba263f0344374', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), index.h("div", { key: '1259089ca70c634621f7e2db274868b12a3e5e8a', class: "top-right-buttons" }, index.h("kritzel-settings", { key: 'b38b01040714827a5d824694b481edb8094eafd8', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'ca28cd1057181b347af75ea51950114272bf33ec', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), index.h("kritzel-export", { key: 'a678999cac4f3618c44d1340b6905ec2f3061dd5', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '1b667e832c1f231ecdd9ea0cca0504c6f4a82ce1', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: 'ec0a1827625f79435d20b8d53374eb29e7174f7e', user: this.user }), shouldShowLoginButton && (index.h("kritzel-button", { key: '0ddec61cc09b96797c33ae18c225ec967efed3e8', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), index.h("kritzel-more-menu", { key: 'e9d41eff38bbd4e9420f8586559597f8ec9d6802', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), index.h("kritzel-share-dialog", { key: 'f3fd8a06f5cf0ac89c02d535ee30dec05c9e536f', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), index.h("kritzel-active-users", { key: '7d0b70c7347e7fda4e96a59b27b8fb6c2eb77f49', users: this.activeUsers }), shouldShowCurrentUser && index.h("kritzel-current-user", { key: 'ed364648df937fb1e84d850953fee51f6e54e95e', user: this.user }), shouldShowLoginButton && (index.h("kritzel-button", { key: 'dd24afa0746a311ac4a27000281fef28bddf844a', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), index.h("kritzel-more-menu", { key: '713da1a5313809083470a8a23c0531e9e198c4bd', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), index.h("kritzel-share-dialog", { key: '37f80fdb7b1087926b72ece7693f816c9f85f746', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: '49bd9f85d4cb7ee0f8dc7d2b7248169848c36b9f', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (index.h("kritzel-login-dialog", { key: 'f5b59522082824bc236784a9083f1d425852d487', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -26524,6 +26533,11 @@ const KritzelEngine = class {
     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) {
@@ -26958,7 +26972,7 @@ const KritzelEngine = class {
         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
@@ -26987,7 +27001,7 @@ const KritzelEngine = class {
                     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);
@@ -27033,6 +27047,82 @@ const KritzelEngine = class {
         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 (schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
+                    const pendingContent = object.content;
+                    object.editor = object.createEditor();
+                    if (pendingContent) {
+                        object.setContent(pendingContent);
+                    }
+                }
+                if (schema_constants.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 (schema_constants.KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
+                                flushGroup(child);
+                            }
+                        });
+                    };
+                    flushGroup(object);
+                    allFlushedChildren.forEach(child => {
+                        if (schema_constants.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.
@@ -27062,6 +27152,28 @@ const KritzelEngine = class {
         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;
@@ -27716,6 +27828,12 @@ const KritzelEngine = class {
         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;
     }
@@ -28039,6 +28157,54 @@ const KritzelEngine = class {
         schema_constants.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 (!schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') &&
+            !schema_constants.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 (index.h(index.Host, null, this.core.store.state.isLoading && (index.h("div", { class: "workspace-loading-overlay" }, index.h("span", { class: "workspace-loading-spinner" }), "Loading..."))));
@@ -28048,6 +28214,7 @@ const KritzelEngine = class {
         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;
@@ -28061,39 +28228,34 @@ const KritzelEngine = class {
         return (index.h(index.Host, null, this.core.store.state.isLoading && (index.h("div", { class: "workspace-loading-overlay" }, index.h("span", { class: "workspace-loading-spinner" }), "Loading...")), this.core.store.state.debugInfo.showViewportInfo && (index.h("div", { class: "debug-panel" }, index.h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", null, "TranslateX: ", this.core.store.state?.translateX), index.h("div", null, "TranslateY: ", this.core.store.state?.translateY), index.h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", null, "PointerCount: ", this.core.store.state.pointers.size), index.h("div", null, "Scale: ", this.core.store.state?.scale), index.h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), index.h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), index.h("div", null, "PointerX: ", this.core.store.state?.pointerX), index.h("div", null, "PointerY: ", this.core.store.state?.pointerY), index.h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), index.h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), index.h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), index.h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), index.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 (index.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',
-                } }, schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
-                return (index.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 }, index.h("path", { d: object?.d, fill: schema_constants.KritzelColorHelper.applyOpacity(object.fill, effectiveOpacity, currentTheme), stroke: schema_constants.KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' })));
-            })(), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
-                return (index.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) && (index.h("defs", null, object.hasStartArrow && (index.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" }, index.h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: schema_constants.KritzelColorHelper.applyOpacity(object.getArrowFill('start'), effectiveOpacity), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (index.h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, index.h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: schema_constants.KritzelColorHelper.applyOpacity(object.getArrowFill('end'), effectiveOpacity), transform: `scale(${object.getArrowSize('end') / 10})` }))))), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: schema_constants.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 })));
-            })(), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState === 'ready' && (index.h("img", { ref: el => el && object.mount(el), src: object.resolvedSrc || object.src, style: {
+                } }, schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.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 }, index.h("path", { d: object?.d, fill: schema_constants.KritzelColorHelper.applyOpacity(object.fill, effectiveOpacity, currentTheme), stroke: schema_constants.KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (index.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) && (index.h("defs", null, object.hasStartArrow && (index.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" }, index.h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: schema_constants.KritzelColorHelper.applyOpacity(object.getArrowFill('start'), effectiveOpacity), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (index.h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, index.h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: schema_constants.KritzelColorHelper.applyOpacity(object.getArrowFill('end'), effectiveOpacity), transform: `scale(${object.getArrowSize('end') / 10})` }))))), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), index.h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: schema_constants.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 }))), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState === 'ready' && (index.h("img", { ref: el => el && object.mount(el), src: object.resolvedSrc || object.src, style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -28101,7 +28263,7 @@ const KritzelEngine = class {
                     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: schema_constants.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     borderColor: schema_constants.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
@@ -28119,7 +28281,7 @@ const KritzelEngine = class {
                     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: schema_constants.KritzelColorHelper.resolveThemeColor({ light: '#e5e7eb', dark: '#2a2a2a' }, currentTheme),
                     borderColor: object.loadState === 'error'
@@ -28143,7 +28305,7 @@ const KritzelEngine = class {
                     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: schema_constants.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     borderColor: schema_constants.KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
@@ -28184,7 +28346,7 @@ const KritzelEngine = class {
                     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',
                 } }, index.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',
@@ -28197,7 +28359,6 @@ const KritzelEngine = class {
                     backgroundColor: schema_constants.KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
                 } }))), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
                 const fillResolved = schema_constants.KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme);
                 const strokeResolved = schema_constants.KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme);
                 const isFilled = !!fillResolved && fillResolved !== 'transparent';
@@ -28239,7 +28400,7 @@ const KritzelEngine = class {
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
-                } }, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("div", null, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
+                } }, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("div", null, index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), index.h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = schema_constants.KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
                     const localClientId = this.core.store.objects?.localClientId;
@@ -28514,6 +28675,9 @@ const KritzelEngine = class {
         "lockDrawingScale": [{
                 "onLockDrawingScaleChange": 0
             }],
+        "isObjectDistanceFadingActive": [{
+                "onIsObjectDistanceFadingActiveChange": 0
+            }],
         "theme": [{
                 "onThemeChange": 0
             }],
@@ -29785,7 +29949,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.3.11';
+const KRITZEL_VERSION = '0.3.12';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;