kritzel-stencil 0.1.80 → 0.1.81

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var workspace_migrations = require('./workspace.migrations-DUXtSb7C.js');
+var workspace_migrations = require('./workspace.migrations-BVBITEM5.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 workspace_migrations = require('./workspace.migrations-DUXtSb7C.js');
+var workspace_migrations = require('./workspace.migrations-BVBITEM5.js');
 var Y = require('yjs');
 require('y-websocket');
 require('y-indexeddb');
@@ -20759,7 +20759,7 @@ class KritzelCustomElement extends workspace_migrations.KritzelBaseObject {
         const object = new KritzelCustomElement(config);
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         return object;
     }
@@ -22287,18 +22287,6 @@ class KritzelStore {
         }
         return this._state.objects;
     }
-    /**
-     * Gets the currently active workspace.
-     * Throws an error if no active workspace is set, as it is required for workspace-bound operations.
-     * @returns The current active KritzelWorkspace
-     * @throws Error if no active workspace is set in the state
-     */
-    get activeWorkspace() {
-        if (!this._state.activeWorkspace) {
-            throw new Error('Active workspace is not set.');
-        }
-        return this._state.activeWorkspace;
-    }
     /**
      * Gets the host element for the Kritzel editor.
      * Throws an error if the host is not set, as it is required for many operations.
@@ -23481,7 +23469,7 @@ class KritzelCore {
         workspace.updatedAt = new Date();
         this.saveWorkspaceToAppState(workspace);
         // Keep metadata map in sync when the active workspace's name changes
-        if (this._store.activeWorkspace?.id === workspace.id) {
+        if (this._store.state.activeWorkspace?.id === workspace.id) {
             this._store.objects?.setWorkspaceName(workspace.name);
         }
         const workspaces = this._store.state.workspaces;
@@ -23499,7 +23487,7 @@ class KritzelCore {
      */
     deleteWorkspace(workspace) {
         // If deleting the active workspace, need to handle ObjectMap cleanup
-        if (this._store.activeWorkspace?.id === workspace.id) {
+        if (this._store.state.activeWorkspace?.id === workspace.id) {
             this.engine.viewport?.cancelPendingUpdates();
             this._store.objects?.destroy();
         }
@@ -23520,7 +23508,7 @@ class KritzelCore {
      * @param scale - The zoom scale of the viewport
      */
     updateWorkspaceViewport(translateX, translateY, scale) {
-        const activeWorkspace = this._store.activeWorkspace;
+        const activeWorkspace = this._store.state.activeWorkspace;
         if (!activeWorkspace) {
             return;
         }
@@ -23543,7 +23531,7 @@ class KritzelCore {
      * @returns True if the workspace is public, false otherwise
      */
     getIsPublic() {
-        return this._store.activeWorkspace?.isPublic ?? false;
+        return this._store.state.activeWorkspace?.isPublic ?? false;
     }
     // ═══════════════════════════════════════════════════════════════════════════
     // Object Management Methods
@@ -23735,7 +23723,7 @@ class KritzelCore {
         if (!copiedObjects || copiedObjects.length === 0) {
             return;
         }
-        const activeWorkspace = this._store.activeWorkspace;
+        const activeWorkspace = this._store.state.activeWorkspace;
         const originalIdMapping = this._store.state.copiedObjectIdMapping;
         // Check if we're pasting from a different workspace
         const isDifferentWorkspace = copiedObjects.some(obj => obj.workspaceId !== activeWorkspace.id);
@@ -24251,7 +24239,7 @@ class KritzelCore {
         // saving the old workspace's viewport to the new workspace
         this._kritzelEngine.viewport?.cancelPendingUpdates();
         // Immediately save the current workspace's viewport before switching
-        const currentWorkspace = this._store.activeWorkspace;
+        const currentWorkspace = this._store.state.activeWorkspace;
         if (currentWorkspace) {
             this.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
         }
@@ -25606,13 +25594,13 @@ const KritzelEngine = class {
         }
         // Let batched prop updates settle, then perform an idempotent re-check.
         await Promise.resolve();
-        const currentWorkspaceId = this.core.store.activeWorkspace?.id;
+        const currentWorkspaceId = this.core.store.state.activeWorkspace?.id;
         if (currentWorkspaceId === newWorkspaceId) {
             return;
         }
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(newWorkspace);
-        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
     }
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
     editorId;
@@ -25630,8 +25618,11 @@ const KritzelEngine = class {
         this._syncConfigRevision++;
         // Keep core config in sync immediately so late prop updates are not lost.
         this.core.setSyncConfig(newValue);
-        // If syncConfig arrives after componentDidLoad, initialize Yjs now
-        if (newValue && !this._isYjsInitialized) {
+        // If syncConfig arrives after componentDidLoad, initialize Yjs now.
+        // Guard on _isViewportReady to avoid restoring viewport state before
+        // viewportWidth/viewportHeight are set (they default to 0 until the
+        // KritzelViewport constructor runs inside componentDidLoad's timeout).
+        if (newValue && !this._isYjsInitialized && this._isViewportReady) {
             await this.initializeSyncAndWorkspace();
         }
     }
@@ -26064,7 +26055,7 @@ const KritzelEngine = class {
         object._core = this.core;
         object.scale = this.core.store.state.scale;
         object.zIndex = this.core.store.currentZIndex;
-        object.workspaceId = this.core.store.activeWorkspace.id;
+        object.workspaceId = this.core.store.state.activeWorkspace.id;
         // Handle KritzelText: recreate the editor now that _core is available
         // The editor's dispatchTransaction callback needs _core for persisting changes
         if (workspace_migrations.KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
@@ -26085,7 +26076,7 @@ const KritzelEngine = class {
                 child._core = this.core;
                 child.scale = this.core.store.state.scale;
                 child.zIndex = this.core.store.currentZIndex;
-                child.workspaceId = this.core.store.activeWorkspace.id;
+                child.workspaceId = this.core.store.state.activeWorkspace.id;
                 idRemapping.set(oldId, child.id);
                 object.childIds.push(child.id);
             });
@@ -26286,7 +26277,7 @@ const KritzelEngine = class {
         // Save critical state before screenshot to restore after
         const savedState = {
             objects: this.core.store.objects,
-            activeWorkspace: this.core.store.activeWorkspace,
+            activeWorkspace: this.core.store.state.activeWorkspace,
             workspaces: this.core.store.state.workspaces,
             activeTool: this.core.store.state.activeTool,
             isReady: this.core.store.state.isReady,
@@ -26484,7 +26475,7 @@ const KritzelEngine = class {
      * @returns A JSON string representing the complete workspace state.
      */
     async exportAsJson() {
-        const workspace = this.core.store.activeWorkspace;
+        const workspace = this.core.store.state.activeWorkspace;
         if (!workspace) {
             throw new Error('Cannot export workspace: no active workspace is loaded');
         }
@@ -26560,7 +26551,7 @@ const KritzelEngine = class {
         if (data.version && data.version !== workspace_migrations.WORKSPACE_EXPORT_VERSION) {
             console.warn(`Workspace version mismatch: expected ${workspace_migrations.WORKSPACE_EXPORT_VERSION}, got ${data.version}`);
         }
-        const activeWorkspace = this.core.store.activeWorkspace;
+        const activeWorkspace = this.core.store.state.activeWorkspace;
         if (!activeWorkspace) {
             throw new Error('Cannot load objects: no active workspace is loaded');
         }
@@ -26700,7 +26691,7 @@ const KritzelEngine = class {
     }
     /** Returns the currently active workspace. */
     async getActiveWorkspace() {
-        const activeWorkspace = this.core.store.activeWorkspace;
+        const activeWorkspace = this.core.store.state.activeWorkspace;
         if (!activeWorkspace) {
             throw new Error('No active workspace is loaded');
         }
@@ -26733,7 +26724,7 @@ const KritzelEngine = class {
         this.workspacesChange.emit(this.core.store.state.workspaces);
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(workspace);
-        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
     }
     /**
      * Reinitializes sync by performing a full teardown and re-initialization.
@@ -26755,6 +26746,7 @@ const KritzelEngine = class {
     keyHandler;
     contextMenuElement = null;
     _lastHadSelectionGroup = false;
+    _isViewportReady = false;
     _isYjsInitialized = false;
     _isResolvingActiveWorkspaceId = false;
     _stateChangeListenersRegistered = false;
@@ -26828,6 +26820,7 @@ const KritzelEngine = class {
             this.contextMenuHandler = new KritzelContextMenuHandler(this.core, this.globalContextMenuItems, this.objectContextMenuItems);
             this.keyHandler = new KritzelKeyHandler(this.core);
             this.viewport = new KritzelViewport(this.core, this.host);
+            this._isViewportReady = true;
             // Initialize cursor manager with target element and shadow root
             this.core.cursorManager.setTargetElement(this.cursorTarget || document.body);
             if (this.host.shadowRoot) {
@@ -26893,7 +26886,7 @@ const KritzelEngine = class {
             await this.initializeWorkspaceIfNeeded(startupWorkspace);
         }
         // Emit initial active workspace once startup initialization has completed
-        const initialActiveWorkspace = this.core.store.activeWorkspace;
+        const initialActiveWorkspace = this.core.store.state.activeWorkspace;
         if (initialActiveWorkspace) {
             this.activeWorkspaceChange.emit(initialActiveWorkspace);
         }
@@ -26922,7 +26915,7 @@ const KritzelEngine = class {
         if (!this.activeWorkspaceId || this._isResolvingActiveWorkspaceId) {
             return;
         }
-        if (this.core.store.activeWorkspace?.id === this.activeWorkspaceId) {
+        if (this.core.store.state.activeWorkspace?.id === this.activeWorkspaceId) {
             return;
         }
         this._isResolvingActiveWorkspaceId = true;
@@ -26938,17 +26931,17 @@ const KritzelEngine = class {
             }
             return;
         }
-        if (this.core.store.activeWorkspace?.id === workspace.id) {
+        if (this.core.store.state.activeWorkspace?.id === workspace.id) {
             return;
         }
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(workspace);
-        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
     }
     async initializeWorkspaceIfNeeded(workspace, options) {
         const targetWorkspaceId = workspace?.id ?? null;
         const targetKey = targetWorkspaceId ?? (options?.skipFallbackCreation ? '__NO_FALLBACK__' : '__AUTO__');
-        if (targetWorkspaceId && this.core.store.activeWorkspace?.id === targetWorkspaceId) {
+        if (targetWorkspaceId && this.core.store.state.activeWorkspace?.id === targetWorkspaceId) {
             return;
         }
         if (this._workspaceInitializationPromise && this._workspaceInitializationTargetKey === targetKey) {
@@ -28715,7 +28708,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.80';
+const KRITZEL_VERSION = '0.1.81';
 
 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)}`;
 

package/dist/cjs/{workspace.migrations-DUXtSb7C.js → workspace.migrations-BVBITEM5.js}

@@ -446,7 +446,7 @@ class KritzelBaseObject {
         const object = new KritzelBaseObject();
         object._core = core;
         object.zIndex = core.store.currentZIndex;
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         return object;
     }
@@ -15343,7 +15343,7 @@ class KritzelText extends KritzelBaseObject {
         const object = new KritzelText();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.fontSize = fontSize || 8;
         object.fontFamily = fontFamily || 'Arial';
@@ -15735,7 +15735,7 @@ class KritzelPath extends KritzelBaseObject {
         const object = new KritzelPath();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.options = options;
         object.points = options?.points ?? [];
@@ -16237,7 +16237,7 @@ class KritzelImage extends KritzelBaseObject {
         const object = new KritzelImage();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.x = 0;
         object.y = 0;
@@ -16388,7 +16388,7 @@ class KritzelLine extends KritzelBaseObject {
         const object = new KritzelLine();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.options = options;
         object.startX = options?.startX ?? 0;
@@ -17148,7 +17148,7 @@ class KritzelGroup extends KritzelBaseObject {
         const group = new KritzelGroup();
         group._core = core;
         group.id = group.generateId();
-        group.workspaceId = core.store.activeWorkspace.id;
+        group.workspaceId = core.store.state.activeWorkspace.id;
         group.userId = core.user?.id;
         group.scale = core.store.state.scale;
         group.zIndex = core.store.currentZIndex;
@@ -17706,7 +17706,7 @@ class KritzelShape extends KritzelBaseObject {
         const object = new KritzelShape();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.x = config?.x ?? 0;
         object.y = config?.y ?? 0;
@@ -18617,7 +18617,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         const object = new KritzelSelectionGroup();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.clientId = core.store.objects?.localClientId ?? undefined;
         object.scale = core.store.state.scale;
@@ -20944,7 +20944,7 @@ class KritzelSelectionBox extends KritzelBaseObject {
         const object = new KritzelSelectionBox();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.scale = core.store.state.scale;
         object.zIndex = 99999;

package/dist/collection/classes/core/core.class.js

@@ -358,7 +358,7 @@ export class KritzelCore {
         workspace.updatedAt = new Date();
         this.saveWorkspaceToAppState(workspace);
         // Keep metadata map in sync when the active workspace's name changes
-        if (this._store.activeWorkspace?.id === workspace.id) {
+        if (this._store.state.activeWorkspace?.id === workspace.id) {
             this._store.objects?.setWorkspaceName(workspace.name);
         }
         const workspaces = this._store.state.workspaces;
@@ -376,7 +376,7 @@ export class KritzelCore {
      */
     deleteWorkspace(workspace) {
         // If deleting the active workspace, need to handle ObjectMap cleanup
-        if (this._store.activeWorkspace?.id === workspace.id) {
+        if (this._store.state.activeWorkspace?.id === workspace.id) {
             this.engine.viewport?.cancelPendingUpdates();
             this._store.objects?.destroy();
         }
@@ -397,7 +397,7 @@ export class KritzelCore {
      * @param scale - The zoom scale of the viewport
      */
     updateWorkspaceViewport(translateX, translateY, scale) {
-        const activeWorkspace = this._store.activeWorkspace;
+        const activeWorkspace = this._store.state.activeWorkspace;
         if (!activeWorkspace) {
             return;
         }
@@ -420,7 +420,7 @@ export class KritzelCore {
      * @returns True if the workspace is public, false otherwise
      */
     getIsPublic() {
-        return this._store.activeWorkspace?.isPublic ?? false;
+        return this._store.state.activeWorkspace?.isPublic ?? false;
     }
     // ═══════════════════════════════════════════════════════════════════════════
     // Object Management Methods
@@ -612,7 +612,7 @@ export class KritzelCore {
         if (!copiedObjects || copiedObjects.length === 0) {
             return;
         }
-        const activeWorkspace = this._store.activeWorkspace;
+        const activeWorkspace = this._store.state.activeWorkspace;
         const originalIdMapping = this._store.state.copiedObjectIdMapping;
         // Check if we're pasting from a different workspace
         const isDifferentWorkspace = copiedObjects.some(obj => obj.workspaceId !== activeWorkspace.id);
@@ -1128,7 +1128,7 @@ export class KritzelCore {
         // saving the old workspace's viewport to the new workspace
         this._kritzelEngine.viewport?.cancelPendingUpdates();
         // Immediately save the current workspace's viewport before switching
-        const currentWorkspace = this._store.activeWorkspace;
+        const currentWorkspace = this._store.state.activeWorkspace;
         if (currentWorkspace) {
             this.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
         }

package/dist/collection/classes/core/store.class.js

@@ -40,18 +40,6 @@ export class KritzelStore {
         }
         return this._state.objects;
     }
-    /**
-     * Gets the currently active workspace.
-     * Throws an error if no active workspace is set, as it is required for workspace-bound operations.
-     * @returns The current active KritzelWorkspace
-     * @throws Error if no active workspace is set in the state
-     */
-    get activeWorkspace() {
-        if (!this._state.activeWorkspace) {
-            throw new Error('Active workspace is not set.');
-        }
-        return this._state.activeWorkspace;
-    }
     /**
      * Gets the host element for the Kritzel editor.
      * Throws an error if the host is not set, as it is required for many operations.

package/dist/collection/classes/objects/base-object.class.js

@@ -208,7 +208,7 @@ export class KritzelBaseObject {
         const object = new KritzelBaseObject();
         object._core = core;
         object.zIndex = core.store.currentZIndex;
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         return object;
     }

package/dist/collection/classes/objects/custom-element.class.js

@@ -48,7 +48,7 @@ export class KritzelCustomElement extends KritzelBaseObject {
         const object = new KritzelCustomElement(config);
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         return object;
     }

package/dist/collection/classes/objects/group.class.js

@@ -69,7 +69,7 @@ export class KritzelGroup extends KritzelBaseObject {
         const group = new KritzelGroup();
         group._core = core;
         group.id = group.generateId();
-        group.workspaceId = core.store.activeWorkspace.id;
+        group.workspaceId = core.store.state.activeWorkspace.id;
         group.userId = core.user?.id;
         group.scale = core.store.state.scale;
         group.zIndex = core.store.currentZIndex;

package/dist/collection/classes/objects/image.class.js

@@ -39,7 +39,7 @@ export class KritzelImage extends KritzelBaseObject {
         const object = new KritzelImage();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.x = 0;
         object.y = 0;

package/dist/collection/classes/objects/line.class.js

@@ -79,7 +79,7 @@ export class KritzelLine extends KritzelBaseObject {
         const object = new KritzelLine();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.options = options;
         object.startX = options?.startX ?? 0;

package/dist/collection/classes/objects/path.class.js

@@ -61,7 +61,7 @@ export class KritzelPath extends KritzelBaseObject {
         const object = new KritzelPath();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.options = options;
         object.points = options?.points ?? [];

package/dist/collection/classes/objects/selection-box.class.js

@@ -18,7 +18,7 @@ export class KritzelSelectionBox extends KritzelBaseObject {
         const object = new KritzelSelectionBox();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.scale = core.store.state.scale;
         object.zIndex = 99999;

package/dist/collection/classes/objects/selection-group.class.js

@@ -91,7 +91,7 @@ export class KritzelSelectionGroup extends KritzelBaseObject {
         const object = new KritzelSelectionGroup();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.clientId = core.store.objects?.localClientId ?? undefined;
         object.scale = core.store.state.scale;

package/dist/collection/classes/objects/shape.class.js

@@ -105,7 +105,7 @@ export class KritzelShape extends KritzelBaseObject {
         const object = new KritzelShape();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.x = config?.x ?? 0;
         object.y = config?.y ?? 0;

package/dist/collection/classes/objects/text.class.js

@@ -121,7 +121,7 @@ export class KritzelText extends KritzelBaseObject {
         const object = new KritzelText();
         object._core = core;
         object.id = object.generateId();
-        object.workspaceId = core.store.activeWorkspace.id;
+        object.workspaceId = core.store.state.activeWorkspace.id;
         object.userId = core.user?.id;
         object.fontSize = fontSize || 8;
         object.fontFamily = fontFamily || 'Arial';

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

@@ -31,13 +31,13 @@ export class KritzelEngine {
         }
         // Let batched prop updates settle, then perform an idempotent re-check.
         await Promise.resolve();
-        const currentWorkspaceId = this.core.store.activeWorkspace?.id;
+        const currentWorkspaceId = this.core.store.state.activeWorkspace?.id;
         if (currentWorkspaceId === newWorkspaceId) {
             return;
         }
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(newWorkspace);
-        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
     }
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
     editorId;
@@ -55,8 +55,11 @@ export class KritzelEngine {
         this._syncConfigRevision++;
         // Keep core config in sync immediately so late prop updates are not lost.
         this.core.setSyncConfig(newValue);
-        // If syncConfig arrives after componentDidLoad, initialize Yjs now
-        if (newValue && !this._isYjsInitialized) {
+        // If syncConfig arrives after componentDidLoad, initialize Yjs now.
+        // Guard on _isViewportReady to avoid restoring viewport state before
+        // viewportWidth/viewportHeight are set (they default to 0 until the
+        // KritzelViewport constructor runs inside componentDidLoad's timeout).
+        if (newValue && !this._isYjsInitialized && this._isViewportReady) {
             await this.initializeSyncAndWorkspace();
         }
     }
@@ -489,7 +492,7 @@ export class KritzelEngine {
         object._core = this.core;
         object.scale = this.core.store.state.scale;
         object.zIndex = this.core.store.currentZIndex;
-        object.workspaceId = this.core.store.activeWorkspace.id;
+        object.workspaceId = this.core.store.state.activeWorkspace.id;
         // Handle KritzelText: recreate the editor now that _core is available
         // The editor's dispatchTransaction callback needs _core for persisting changes
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
@@ -510,7 +513,7 @@ export class KritzelEngine {
                 child._core = this.core;
                 child.scale = this.core.store.state.scale;
                 child.zIndex = this.core.store.currentZIndex;
-                child.workspaceId = this.core.store.activeWorkspace.id;
+                child.workspaceId = this.core.store.state.activeWorkspace.id;
                 idRemapping.set(oldId, child.id);
                 object.childIds.push(child.id);
             });
@@ -711,7 +714,7 @@ export class KritzelEngine {
         // Save critical state before screenshot to restore after
         const savedState = {
             objects: this.core.store.objects,
-            activeWorkspace: this.core.store.activeWorkspace,
+            activeWorkspace: this.core.store.state.activeWorkspace,
             workspaces: this.core.store.state.workspaces,
             activeTool: this.core.store.state.activeTool,
             isReady: this.core.store.state.isReady,
@@ -909,7 +912,7 @@ export class KritzelEngine {
      * @returns A JSON string representing the complete workspace state.
      */
     async exportAsJson() {
-        const workspace = this.core.store.activeWorkspace;
+        const workspace = this.core.store.state.activeWorkspace;
         if (!workspace) {
             throw new Error('Cannot export workspace: no active workspace is loaded');
         }
@@ -985,7 +988,7 @@ export class KritzelEngine {
         if (data.version && data.version !== WORKSPACE_EXPORT_VERSION) {
             console.warn(`Workspace version mismatch: expected ${WORKSPACE_EXPORT_VERSION}, got ${data.version}`);
         }
-        const activeWorkspace = this.core.store.activeWorkspace;
+        const activeWorkspace = this.core.store.state.activeWorkspace;
         if (!activeWorkspace) {
             throw new Error('Cannot load objects: no active workspace is loaded');
         }
@@ -1125,7 +1128,7 @@ export class KritzelEngine {
     }
     /** Returns the currently active workspace. */
     async getActiveWorkspace() {
-        const activeWorkspace = this.core.store.activeWorkspace;
+        const activeWorkspace = this.core.store.state.activeWorkspace;
         if (!activeWorkspace) {
             throw new Error('No active workspace is loaded');
         }
@@ -1158,7 +1161,7 @@ export class KritzelEngine {
         this.workspacesChange.emit(this.core.store.state.workspaces);
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(workspace);
-        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
     }
     /**
      * Reinitializes sync by performing a full teardown and re-initialization.
@@ -1180,6 +1183,7 @@ export class KritzelEngine {
     keyHandler;
     contextMenuElement = null;
     _lastHadSelectionGroup = false;
+    _isViewportReady = false;
     _isYjsInitialized = false;
     _isResolvingActiveWorkspaceId = false;
     _stateChangeListenersRegistered = false;
@@ -1238,6 +1242,7 @@ export class KritzelEngine {
             this.contextMenuHandler = new KritzelContextMenuHandler(this.core, this.globalContextMenuItems, this.objectContextMenuItems);
             this.keyHandler = new KritzelKeyHandler(this.core);
             this.viewport = new KritzelViewport(this.core, this.host);
+            this._isViewportReady = true;
             // Initialize cursor manager with target element and shadow root
             this.core.cursorManager.setTargetElement(this.cursorTarget || document.body);
             if (this.host.shadowRoot) {
@@ -1303,7 +1308,7 @@ export class KritzelEngine {
             await this.initializeWorkspaceIfNeeded(startupWorkspace);
         }
         // Emit initial active workspace once startup initialization has completed
-        const initialActiveWorkspace = this.core.store.activeWorkspace;
+        const initialActiveWorkspace = this.core.store.state.activeWorkspace;
         if (initialActiveWorkspace) {
             this.activeWorkspaceChange.emit(initialActiveWorkspace);
         }
@@ -1332,7 +1337,7 @@ export class KritzelEngine {
         if (!this.activeWorkspaceId || this._isResolvingActiveWorkspaceId) {
             return;
         }
-        if (this.core.store.activeWorkspace?.id === this.activeWorkspaceId) {
+        if (this.core.store.state.activeWorkspace?.id === this.activeWorkspaceId) {
             return;
         }
         this._isResolvingActiveWorkspaceId = true;
@@ -1348,17 +1353,17 @@ export class KritzelEngine {
             }
             return;
         }
-        if (this.core.store.activeWorkspace?.id === workspace.id) {
+        if (this.core.store.state.activeWorkspace?.id === workspace.id) {
             return;
         }
         this.core.beforeWorkspaceChange();
         await this.initializeWorkspaceIfNeeded(workspace);
-        this.activeWorkspaceChange.emit(this.core.store.activeWorkspace);
+        this.activeWorkspaceChange.emit(this.core.store.state.activeWorkspace);
     }
     async initializeWorkspaceIfNeeded(workspace, options) {
         const targetWorkspaceId = workspace?.id ?? null;
         const targetKey = targetWorkspaceId ?? (options?.skipFallbackCreation ? '__NO_FALLBACK__' : '__AUTO__');
-        if (targetWorkspaceId && this.core.store.activeWorkspace?.id === targetWorkspaceId) {
+        if (targetWorkspaceId && this.core.store.state.activeWorkspace?.id === targetWorkspaceId) {
             return;
         }
         if (this._workspaceInitializationPromise && this._workspaceInitializationTargetKey === targetKey) {