kritzel-stencil 0.4.26 → 0.4.27

package/dist/components/index.js

@@ -1,8 +1,7 @@
 export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-B43upypT.js';
 export { K as KritzelBaseObject, b as KritzelLine, a as KritzelPath } from './p-bAacqNHq.js';
-export { u as APP_STATE_MIGRATIONS, A as AssetNotFoundError, D as DE_LOCALE, E as EN_LOCALE, F as FR_LOCALE, I as IndexedDBAssetProvider, s as KritzelAlignment, o as KritzelAnchorManager, n as KritzelAssetResolver, e as KritzelBaseTool, f as KritzelBrushTool, l as KritzelCursorHelper, d as KritzelCustomElement, r as KritzelCustomElementRendererRegistry, h as KritzelEraserTool, b as KritzelGroup, a as KritzelImage, i as KritzelImageTool, q as KritzelLicenseManager, g as KritzelLineTool, p as KritzelLocalizationManager, m as KritzelSelectionTool, c as KritzelShape, k as KritzelShapeTool, K as KritzelText, j as KritzelTextTool, S as ShapeType, W as WORKSPACE_MIGRATIONS, t as runMigrations } from './p-DUoQyGKc.js';
+export { v as APP_STATE_MIGRATIONS, A as AssetNotFoundError, D as DE_LOCALE, E as EN_LOCALE, F as FR_LOCALE, o as IndexedDBAssetProvider, I as IndexedDBSyncProvider, t as KritzelAlignment, p as KritzelAnchorManager, n as KritzelAssetResolver, e as KritzelBaseTool, f as KritzelBrushTool, l as KritzelCursorHelper, d as KritzelCustomElement, s as KritzelCustomElementRendererRegistry, h as KritzelEraserTool, b as KritzelGroup, a as KritzelImage, i as KritzelImageTool, r as KritzelLicenseManager, g as KritzelLineTool, q as KritzelLocalizationManager, m as KritzelSelectionTool, c as KritzelShape, k as KritzelShapeTool, K as KritzelText, j as KritzelTextTool, S as ShapeType, W as WORKSPACE_MIGRATIONS, u as runMigrations } from './p-CYwoBiqy.js';
 import * as Y from 'yjs';
-import { IndexeddbPersistence } from 'y-indexeddb';
 import { WebsocketProvider } from 'y-websocket';
 import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './kritzel-editor.js';
 export { d as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, c as DEFAULT_LINE_TOOL_CONFIG, b as DEFAULT_TEXT_CONFIG, KritzelEditor, defineCustomElement as defineCustomElementKritzelEditor, h as hasRemoteSyncProvider } from './kritzel-editor.js';
@@ -554,45 +553,6 @@ class InMemorySyncProvider {
     }
 }
 
-/**
- * IndexedDB sync provider for local persistence
- */
-class IndexedDBSyncProvider {
-    static type = 'local';
-    type = 'local';
-    provider;
-    isConnected = false;
-    constructor(docName, doc, options) {
-        const dbName = options?.name || docName;
-        this.provider = new IndexeddbPersistence(dbName, doc);
-    }
-    async connect() {
-        if (this.isConnected) {
-            return;
-        }
-        return new Promise(resolve => {
-            this.provider.on('synced', () => {
-                this.isConnected = true;
-                resolve();
-            });
-        });
-    }
-    disconnect() {
-        // IndexedDB doesn't need explicit disconnect
-        this.isConnected = false;
-    }
-    async reconnect() {
-        this.disconnect();
-        return this.connect();
-    }
-    destroy() {
-        if (this.provider) {
-            this.provider.destroy();
-        }
-        this.isConnected = false;
-    }
-}
-
 /**
  * WebSocket sync provider for real-time collaboration
  */
@@ -1235,4 +1195,4 @@ class PresignedAssetProvider {
     }
 }
 
-export { BroadcastSyncProvider, HocuspocusSyncProvider, HttpAssetProvider, InMemorySyncProvider, IndexedDBSyncProvider, PresignedAssetProvider, WebSocketSyncProvider };
+export { BroadcastSyncProvider, HocuspocusSyncProvider, HttpAssetProvider, InMemorySyncProvider, PresignedAssetProvider, WebSocketSyncProvider };

package/dist/components/kritzel-editor.js

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
 import { K as KritzelIconRegistry, d as defineCustomElement$r } from './p-CSuU8frA.js';
-import { v as DEFAULT_STROKE_SIZES, w as DEFAULT_FONT_SIZES, S as ShapeType, m as KritzelSelectionTool, f as KritzelBrushTool, h as KritzelEraserTool, g as KritzelLineTool, k as KritzelShapeTool, j as KritzelTextTool, i as KritzelImageTool, s as KritzelAlignment, x as DEFAULT_SYNC_CONFIG, y as KritzelSelectionGroup, z as KritzelSelectionBox, B as KritzelKeyboardHelper, C as defineCustomElement$w } from './p-DUoQyGKc.js';
+import { w as DEFAULT_STROKE_SIZES, x as DEFAULT_FONT_SIZES, S as ShapeType, m as KritzelSelectionTool, f as KritzelBrushTool, h as KritzelEraserTool, g as KritzelLineTool, k as KritzelShapeTool, j as KritzelTextTool, i as KritzelImageTool, t as KritzelAlignment, y as DEFAULT_SYNC_CONFIG, z as KritzelSelectionGroup, B as KritzelSelectionBox, C as KritzelKeyboardHelper, G as defineCustomElement$w } from './p-CYwoBiqy.js';
 import { D as DEFAULT_COLOR_PALETTE, T as ThemeHelper, d as darkTheme, l as lightTheme } from './p-7I4Uzjrw.js';
 import { D as DEFAULT_TEXT_TOOL_AVAILABLE_FONTS, r as resolveTextToolAvailableFonts, K as KritzelFontRegistry } from './p-DJkKlUyZ.js';
 import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$4 } from './p-DK0anxtL.js';
@@ -29,7 +29,7 @@ import { d as defineCustomElement$t } from './p-djJSnjAX.js';
 import { d as defineCustomElement$s } from './p-BprEDRpA.js';
 import { d as defineCustomElement$q } from './p-NOWtUeeQ.js';
 import { d as defineCustomElement$p } from './p-CXpv9Rxe.js';
-import { d as defineCustomElement$o } from './p-Cva3jIIU.js';
+import { d as defineCustomElement$o } from './p-4uoSa0Xl.js';
 import { d as defineCustomElement$n } from './p-C0FEC_gS.js';
 import { d as defineCustomElement$m } from './p-DhabvHJM.js';
 import { d as defineCustomElement$k, a as defineCustomElement$l } from './p-CAXR5-S9.js';
@@ -39,7 +39,7 @@ import { d as defineCustomElement$h } from './p-DTB3ykgO.js';
 import { d as defineCustomElement$g } from './p-DnmVD1Mz.js';
 import { d as defineCustomElement$f } from './p-jIKskj3S.js';
 import { d as defineCustomElement$e } from './p-CBrn5AIB.js';
-import { d as defineCustomElement$d } from './p-m7SeNszM.js';
+import { d as defineCustomElement$d } from './p-BTo2cQZ9.js';
 import { d as defineCustomElement$c } from './p-BFYtCsZu.js';
 import { d as defineCustomElement$b } from './p-ChPs27Fd.js';
 import { d as defineCustomElement$a } from './p-Dvn6ad4a.js';
@@ -2934,7 +2934,7 @@ const DEFAULT_SHAPE_CONFIG = {
     sizes: [...DEFAULT_STROKE_SIZES],
 };
 
-const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;container-type:inline-size;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:start;line-height:normal}.editor-content{position:absolute;inset:0}.editor-content>kritzel-engine{position:absolute;inset:0;z-index:0}kritzel-controls{position:absolute;z-index:1;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;z-index:1;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-center-notification-layer{position:absolute;top:var(--kritzel-editor-top-center-notification-top, 14px);left:0;right:0;z-index:var(--kritzel-editor-top-center-notification-z-index, 10001);display:flex;justify-content:center;pointer-events:none}.top-center-notification-container{width:min(90vw, 420px);pointer-events:auto;animation:kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms)     var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1))}.top-center-notification-container.is-dismissing{animation:kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms)     var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards}@keyframes kritzel-notification-slide-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes kritzel-notification-fade-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}@media (prefers-reduced-motion: reduce){.top-center-notification-container{animation:none}}.top-right-buttons{position:absolute;z-index:1;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.bottom-left-buttons{position:absolute;z-index:1;left:var(--kritzel-editor-top-left-buttons-left, 14px);bottom:var(--kritzel-editor-controls-bottom, 14px);display:flex;align-items:flex-end}@container (max-width: 767px){.bottom-left-buttons{display:none}}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
+const kritzelEditorCss = () => `kritzel-editor{display:flex;margin:0;position:relative;container-type:inline-size;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:start;line-height:normal}.editor-content{position:absolute;inset:0}.editor-content>kritzel-engine{position:absolute;inset:0;z-index:0}kritzel-controls{position:absolute;z-index:2;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100% - 16px);bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}.top-left-buttons{position:absolute;z-index:2;top:var(--kritzel-editor-top-left-buttons-top, 14px);left:var(--kritzel-editor-top-left-buttons-left, 14px);display:flex;align-items:flex-start;gap:8px}.top-center-notification-layer{position:absolute;top:var(--kritzel-editor-top-center-notification-top, 14px);left:0;right:0;z-index:var(--kritzel-editor-top-center-notification-z-index, 10001);display:flex;justify-content:center;pointer-events:none}.top-center-notification-container{width:min(90vw, 420px);pointer-events:auto;animation:kritzel-notification-slide-in var(--kritzel-editor-notification-animation-duration, 220ms)     var(--kritzel-editor-notification-animation-easing, cubic-bezier(0.22, 1, 0.36, 1))}.top-center-notification-container.is-dismissing{animation:kritzel-notification-fade-out var(--kritzel-editor-notification-dismiss-animation-duration, 180ms)     var(--kritzel-editor-notification-dismiss-animation-easing, ease-in) forwards}@keyframes kritzel-notification-slide-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes kritzel-notification-fade-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-6px)}}@media (prefers-reduced-motion: reduce){.top-center-notification-container{animation:none}}.top-right-buttons{position:absolute;z-index:2;top:var(--kritzel-editor-top-right-buttons-top, 14px);right:var(--kritzel-editor-top-right-buttons-right, 14px);display:flex;align-items:center;gap:8px}.bottom-left-buttons{position:absolute;z-index:2;left:var(--kritzel-editor-top-left-buttons-left, 14px);bottom:var(--kritzel-editor-controls-bottom, 14px);display:flex;align-items:flex-end}@container (max-width: 767px){.bottom-left-buttons{display:none}}.top-right-button{display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:var(--kritzel-split-button-border, 1px solid #ebebeb);border-radius:var(--kritzel-split-button-border-radius, 12px);background-color:var(--kritzel-split-button-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent}.top-right-button:hover{background-color:#f5f5f5}.top-right-button:active{background-color:#ebebeb}`;
 
 const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor extends H {
     constructor(registerHost) {
@@ -3168,15 +3168,12 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
     isWorkspaceManagerVisible = true;
     isMoreMenuVisible = true;
     isZoomPanelVisible = true;
-    isObjectDistanceFadingActive = false;
     syncConfig = DEFAULT_SYNC_CONFIG;
     assetStorageConfig = DEFAULT_ASSET_STORAGE_CONFIG;
     /** The element to use as the target for the cursor. Defaults to the editor container if not set. */
     cursorTarget;
     /** Optional login configuration. When provided, a "Sign in" button is shown that opens a login dialog with the configured providers. */
     loginConfig;
-    /** Whether the editor is in a loading state. When true, a loading overlay is displayed. */
-    isLoading = false;
     /** Optional unique identifier for namespacing storage keys across multiple editor instances. */
     editorId;
     /** Optional workspace ID to set as active. If provided, the editor will automatically activate the workspace with this ID. */
@@ -3217,6 +3214,11 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
     normalizedControls = [];
     resolvedMoreMenuItems = [];
     isLoadingOverlayVisible = false;
+    loadingOverlayShowTimeout;
+    loadingOverlayHideTimeout;
+    loadingOverlayShownTimestamp;
+    loadingOverlayDelayMs = 300;
+    loadingOverlayMinDisplayDurationMs = 400;
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
     notificationDisplayDurationMs = 5000;
@@ -3596,6 +3598,8 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         this.setOsSpecificCssVariables();
     }
     disconnectedCallback() {
+        this.clearLoadingOverlayShowTimer();
+        this.clearLoadingOverlayHideTimer();
         this.clearNotificationDismissTimer();
         this.clearNotificationDismissAnimationTimer();
     }
@@ -3711,6 +3715,46 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         event.stopPropagation();
         this.contextMenuState = event.detail.isVisible ? event.detail : undefined;
     }
+    handleIsLoadingChange(event) {
+        console.log('isLoadingChange event:', event.detail);
+        event.stopPropagation();
+        this.clearLoadingOverlayShowTimer();
+        this.clearLoadingOverlayHideTimer();
+        if (event.detail) {
+            this.loadingOverlayShowTimeout = setTimeout(() => {
+                this.isLoadingOverlayVisible = true;
+                this.loadingOverlayShownTimestamp = Date.now();
+                this.loadingOverlayShowTimeout = undefined;
+            }, this.loadingOverlayDelayMs);
+            return;
+        }
+        if (this.isLoadingOverlayVisible && this.loadingOverlayShownTimestamp !== undefined) {
+            const elapsed = Date.now() - this.loadingOverlayShownTimestamp;
+            const remaining = this.loadingOverlayMinDisplayDurationMs - elapsed;
+            if (remaining > 0) {
+                this.loadingOverlayHideTimeout = setTimeout(() => {
+                    this.isLoadingOverlayVisible = false;
+                    this.loadingOverlayShownTimestamp = undefined;
+                    this.loadingOverlayHideTimeout = undefined;
+                }, remaining);
+                return;
+            }
+        }
+        this.isLoadingOverlayVisible = false;
+        this.loadingOverlayShownTimestamp = undefined;
+    }
+    clearLoadingOverlayShowTimer() {
+        if (this.loadingOverlayShowTimeout) {
+            clearTimeout(this.loadingOverlayShowTimeout);
+            this.loadingOverlayShowTimeout = undefined;
+        }
+    }
+    clearLoadingOverlayHideTimer() {
+        if (this.loadingOverlayHideTimeout) {
+            clearTimeout(this.loadingOverlayHideTimeout);
+            this.loadingOverlayHideTimeout = undefined;
+        }
+    }
     handleContextMenuActionSelected(event) {
         const contextMenuState = this.contextMenuState;
         if (!contextMenuState || !event.detail.action) {
@@ -4012,40 +4056,40 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '10d7810f2db00207f1f024727fb3957dce6496c5' }, h("div", { key: 'f1bced369a6e820d17c89b6e8cdd8f09fc7e084f', class: "editor-content", style: {
+        return (h(Host, { key: '247f9ad977943d29333094737c8904253ccab5c7' }, h("div", { key: 'e14e57a04ca7138690a4893f2ac14140e0532fd2', class: "editor-content", style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, h("div", { key: '42d177987e4d14de10ebb45d673f750022c7d944', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'be583a237b378e0eeb14756fcb0bd9a733b51020', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '5713455fd09512085e5048ab3da35499d48c9bbc', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '41c3fbd197ccca774bb87be7d003374bc548e46e', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '5634e4cfd0d6cb7accee59e7f239e3d758872202', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'b1b2a90199b16e874a54a6435ebb4f873cc8a403', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (h("kritzel-context-menu", { key: '9b1d0f847171e177a2135454cab0c3761308c396', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
+            } }, h("div", { key: 'd9304408c6336c4b742b0e44d4a6d4dda5b2fad6', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'f44ca859cd70828c77a92607cbe5b9c26fd4a203', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, terms: this.resolvedTerms, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '1c65e5fbcc34dd43b7986f6177b8eab2bd709ad8', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '2f7715f5c7c128ec63f2fe60c508543db7dd571c', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '357014e172134af3a3d35af9978d14d23fadf7e3', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: '3962a562a8fc10b2bbdc1c8dd741a057e9e6df29', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), this.contextMenuState && this.contextMenuState.items.length > 0 && (h("kritzel-context-menu", { key: '669e6dae09d52e87dc22aa536f6f564f725f6c34', class: "context-menu", items: this.contextMenuState.items, objects: this.contextMenuState.objects, style: {
                 position: 'absolute',
                 left: `${this.contextMenuState.position.x}px`,
                 top: `${this.contextMenuState.position.y}px`,
                 zIndex: '10002',
-            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-loading-overlay", { key: '693536ad11dbc5080203902f0553d87b628704e9', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: 'd4dacd1803e63417c2d7d9dcd008345e947f2806', ref: el => {
+            }, onActionSelected: event => this.handleContextMenuActionSelected(event), onClose: () => this.hideContextMenu() })), h("kritzel-loading-overlay", { key: '40a32849c45b9b8240b3be427579cb6a6c63fa97', visible: this.isLoadingOverlayVisible, text: this.resolvedTerms['editor.loading'] ?? 'Loading...' }), h("kritzel-engine", { key: '424ec83a0e8e9c8174cd12439fff2b49898b8016', 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, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, 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), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onLoadingChange: event => (this.isLoadingOverlayVisible = event.detail) }), h("kritzel-controls", { key: 'f988a540cae6372b2259167956f81ecfae324bf1', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, 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, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, isPanningEnabled: this.isPanningEnabled, isZoomingEnabled: this.isZoomingEnabled, theme: this.theme, themes: this.themes, licenseKey: this.licenseKey, locale: this.locale, locales: this.locales, fallbackLocale: this.fallbackLocale, 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), onNotificationsChange: event => this.handleNotificationsChange(event), onContextMenuStateChange: event => this.handleContextMenuStateChange(event), onIsLoadingChange: event => this.handleIsLoadingChange(event) }), h("kritzel-controls", { key: 'e224d9cde14effc67b07f1f18597f45e3dc6d808', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'c9eca767869cb0504b18b480f14abb4ae9515e6a', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '9a02ece644a46b9eaa1ce92245df2183bfe7bb5a', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'a214d0c6039cfeeda9e4e015e83ca196e4b73b56', class: "top-right-buttons" }, h("kritzel-settings", { key: 'c20518083d832267e85384d14adca6342fa82299', ref: el => {
+            }, controls: this.normalizedControls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, terms: this.resolvedTerms, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '767b369fd2b55329d953d8c55ea897c35b921584', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: 'abaa0a55d433fa1740071f32f8dfc1854c6ed157', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'eb9e71d97b2b4663f02a17022494d353fa4f877e', class: "top-right-buttons" }, h("kritzel-settings", { key: '10ef2f68f90a6ceb3ce0a3110245c58da7ee2492', 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'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: '3306caba17bb638e5285c838539c7862e889dbbd', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], availableLocales: this.availableLocaleOptions, settings: this.currentSettingsConfig, terms: this.resolvedTerms, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'd72b5006a608570c26a2981d03f4d15e9b0c8b30', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '1aede3a116f502f017188153803c35e304592575', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '8eaa1d59ca018d1b1190aa01c9fa3d2bd587de4c', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: 'c9a138c1411746654b3a2385c6c5c82b875cf88d', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', terms: this.resolvedTerms, onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: 'cceafd7ae3f289edb351af4e614afca2385e196a', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '042fc9ce8487ea463f0ee77a5749786ed2931f07', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '7cce7677fbae0a1b897b2135f50e017df5409d32', ref: el => {
                 if (el) {
                     this.currentUserDialogRef = el;
                 }
-            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '9a2900deb52b4d70f1612fb75c5baa9302412ebf', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '027d3c3d847bf975bc5c6f44e9ecf1b452c77bf9', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '461e239bd09abf63b85e6122b1b9f7425da23ec3', ref: el => {
+            }, user: this.user, terms: this.resolvedTerms, onLogoutRequest: this.handleCurrentUserLogout })), shouldShowLoginButton && h("kritzel-button", { key: '97cf48d83804dfa5220ce38500af3f96687354d2', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in'), h("kritzel-more-menu", { key: '40a757fe355666e9306f2224d9ed9bf2c9b58f7a', items: this.resolvedMoreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: 'abb85b65a9d6196be701d35cbdf8bc3003d36bfe', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '1e324fb764ab33047dba85eb34ae51418d081f2c', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '6e8c86420a447b182bcbc23415d64a7fcb32a4a8', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -4126,12 +4170,10 @@ const KritzelEditor$1 = /*@__PURE__*/ proxyCustomElement(class KritzelEditor ext
         "isWorkspaceManagerVisible": [4, "is-workspace-manager-visible"],
         "isMoreMenuVisible": [4, "is-more-menu-visible"],
         "isZoomPanelVisible": [4, "is-zoom-panel-visible"],
-        "isObjectDistanceFadingActive": [4, "is-object-distance-fading-active"],
         "syncConfig": [16],
         "assetStorageConfig": [16],
         "cursorTarget": [16],
         "loginConfig": [16],
-        "isLoading": [4, "is-loading"],
         "editorId": [1, "editor-id"],
         "activeWorkspaceId": [1, "active-workspace-id"],
         "isEngineReady": [32],

package/dist/components/kritzel-engine.js

@@ -1,4 +1,4 @@
-import { G as KritzelEngine$1, C as defineCustomElement$1 } from './p-DUoQyGKc.js';
+import { H as KritzelEngine$1, G as defineCustomElement$1 } from './p-CYwoBiqy.js';
 
 const KritzelEngine = KritzelEngine$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-loading-overlay.js

@@ -1,4 +1,4 @@
-import { K as KritzelLoadingOverlay$1, d as defineCustomElement$1 } from './p-Cva3jIIU.js';
+import { K as KritzelLoadingOverlay$1, d as defineCustomElement$1 } from './p-4uoSa0Xl.js';
 
 const KritzelLoadingOverlay = KritzelLoadingOverlay$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-settings.js

@@ -1,4 +1,4 @@
-import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-m7SeNszM.js';
+import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-BTo2cQZ9.js';
 
 const KritzelSettings = KritzelSettings$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-Cva3jIIU.js → p-4uoSa0Xl.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
 
-const kritzelLoadingOverlayCss = () => `:host{display:contents}.loading-overlay{position:absolute;inset:0;z-index:var(--kritzel-editor-loading-overlay-z-index, 9999);display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-editor-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-editor-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;opacity:0;pointer-events:none;visibility:hidden}.loading-overlay.visible{pointer-events:all;visibility:visible;animation:kritzel-loading-fade-in 200ms ease-out var(--kritzel-editor-loading-overlay-delay, 300ms) forwards}.loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-editor-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-editor-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:kritzel-loading-spin 0.6s linear infinite}@keyframes kritzel-loading-spin{to{transform:rotate(360deg)}}@keyframes kritzel-loading-fade-in{to{opacity:1}}`;
+const kritzelLoadingOverlayCss = () => `:host{position:absolute;inset:0;z-index:var(--kritzel-editor-loading-overlay-z-index, 1);display:block;pointer-events:none}.loading-overlay{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--kritzel-editor-loading-overlay-background, rgba(255, 255, 255, 0.6));color:var(--kritzel-editor-loading-overlay-color, #333);font-family:var(--kritzel-font-family, sans-serif);font-size:1.25rem;opacity:0;pointer-events:none;visibility:hidden;transition:opacity 300ms ease,     visibility 0s linear 300ms}.loading-overlay.visible{opacity:1;pointer-events:all;visibility:visible;transition:opacity 300ms ease,     visibility 0s linear 0s}.loading-spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-editor-loading-overlay-spinner-color, #cccccc);border-top-color:var(--kritzel-editor-loading-overlay-spinner-active-color, #333333);border-radius:50%;animation:kritzel-loading-spin 0.6s linear infinite}@keyframes kritzel-loading-spin{to{transform:rotate(360deg)}}`;
 
 const KritzelLoadingOverlay = /*@__PURE__*/ proxyCustomElement(class KritzelLoadingOverlay extends H {
     constructor(registerHost) {

package/dist/components/{p-m7SeNszM.js → p-BTo2cQZ9.js}

@@ -12,7 +12,7 @@ import { d as defineCustomElement$1 } from './p-Dvn6ad4a.js';
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.4.26';
+const KRITZEL_VERSION = '0.4.27';
 
 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-tab-panel{display:none}.settings-tab-panel.is-active{display:block}.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/components/{p-DUoQyGKc.js → p-CYwoBiqy.js}

@@ -10,6 +10,7 @@ import { K as KritzelWorkspace, W as WORKSPACE_EXPORT_VERSION } from './p-DAwPPD
 import { K as KritzelHTMLHelper } from './p-WUdQqYnu.js';
 import { O as ObjectHelper } from './p-DPONTran.js';
 import * as Y from 'yjs';
+import { IndexeddbPersistence } from 'y-indexeddb';
 import { a as CURRENT_WORKSPACE_SCHEMA_VERSION, C as CURRENT_APP_STATE_SCHEMA_VERSION } from './p-CW-VyJgK.js';
 import { K as KritzelIconRegistry, d as defineCustomElement$2 } from './p-CSuU8frA.js';
 
@@ -21786,6 +21787,45 @@ class KritzelSelectionTool extends KritzelBaseTool {
     }
 }
 
+/**
+ * IndexedDB sync provider for local persistence
+ */
+class IndexedDBSyncProvider {
+    static type = 'local';
+    type = 'local';
+    provider;
+    isConnected = false;
+    constructor(docName, doc, options) {
+        const dbName = options?.name || docName;
+        this.provider = new IndexeddbPersistence(dbName, doc);
+    }
+    async connect() {
+        if (this.isConnected) {
+            return;
+        }
+        return new Promise(resolve => {
+            this.provider.on('synced', () => {
+                this.isConnected = true;
+                resolve();
+            });
+        });
+    }
+    disconnect() {
+        // IndexedDB doesn't need explicit disconnect
+        this.isConnected = false;
+    }
+    async reconnect() {
+        this.disconnect();
+        return this.connect();
+    }
+    destroy() {
+        if (this.provider) {
+            this.provider.destroy();
+        }
+        this.isConnected = false;
+    }
+}
+
 /**
  * Manages anchor connections between line endpoints and other objects.
  * Maintains a runtime index for efficient reverse lookups and handles
@@ -24326,7 +24366,7 @@ const WORKSPACE_MIGRATIONS = [
  * Default sync configuration - None
  */
 const DEFAULT_SYNC_CONFIG = {
-    providers: [],
+    providers: [IndexedDBSyncProvider],
 };
 
 var lodash$1 = {exports: {}};
@@ -48866,11 +48906,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     isPanningEnabled = true;
     /** When false, Ctrl+wheel events do not zoom the viewport. */
     isZoomingEnabled = true;
-    /** External loading state. Combined with internal workspace-loading state to drive the overlay. */
-    isLoading = false;
-    onIsLoadingChange() {
-        this.syncLoadingState();
-    }
     /** Emitted when the engine has fully initialized and is ready for interaction. */
     isEngineReady;
     /** Emitted when the active drawing tool changes. */
@@ -48903,8 +48938,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     notificationsChange;
     /** Emitted when context-menu visibility, items, or position changes. */
     contextMenuStateChange;
-    /** Emitted when the combined loading state (external `isLoading` prop or internal workspace loading) changes. */
-    loadingChange;
+    /** Emitted while the selected workspace's objects are being initialized and synchronized. */
+    isLoadingChange;
     forceUpdate = 0;
     /** Manually triggers the `objectsSelectionChange` event. */
     async triggerSelectionChange() {
@@ -50482,7 +50517,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     _syncInitPromise = null;
     _syncConfigRevision = 0;
     _assetStorageConfigRevision = 0;
-    _isWorkspaceLoading = false;
     _hasLoggedUnlicensedWelcomeBanner = false;
     _previousVisibleCustomElements = new Set();
     _revealedImageKeys = new Set();
@@ -50501,9 +50535,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     _objectDistanceFadeCloseStartScale = 2;
     _objectDistanceFadeCloseMaxScale = 4;
     _objectDistanceFadeCloseMinOpacity = 0;
-    syncLoadingState() {
-        this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
-        this.loadingChange.emit(this.core.store.state.isLoading);
+    setLoadingState(isLoading) {
+        if (this.core.store.state.isLoading === isLoading) {
+            return;
+        }
+        this.core.store.state.isLoading = isLoading;
+        this.isLoadingChange.emit(isLoading);
     }
     isNetworkAvailable() {
         return typeof navigator !== 'undefined' && navigator.onLine;
@@ -50613,7 +50650,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.awarenessChange = createEvent(this, "awarenessChange");
         this.notificationsChange = createEvent(this, "notificationsChange");
         this.contextMenuStateChange = createEvent(this, "contextMenuStateChange");
-        this.loadingChange = createEvent(this, "loadingChange");
+        this.isLoadingChange = createEvent(this, "isLoadingChange");
         this.core = new KritzelCore(this);
     }
     disconnectedCallback() {
@@ -50670,8 +50707,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             this.core.store.state.debugInfo = this.debugInfo;
             this.core.assetResolver.setShowInfo(this.debugInfo.showAssetResolverInfo);
         }
-        this._isWorkspaceLoading = true;
-        this.syncLoadingState();
     }
     async componentDidLoad() {
         setTimeout(async () => {
@@ -50809,15 +50844,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         if (!this.core.appStateMap.hasNetworkSyncProvider || !this.isNetworkAvailable()) {
             return;
         }
-        this._isWorkspaceLoading = true;
-        this.syncLoadingState();
-        try {
-            await this.core.appStateMap.whenNetworkSynced();
-        }
-        finally {
-            this._isWorkspaceLoading = false;
-            this.syncLoadingState();
-        }
+        await this.core.appStateMap.whenNetworkSynced();
     }
     resolveStartupWorkspace() {
         if (this.activeWorkspaceId) {
@@ -50866,21 +50893,21 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             await this._workspaceInitializationPromise;
             return;
         }
-        this._isWorkspaceLoading = true;
-        this.syncLoadingState();
+        this.setLoadingState(true);
         const initializationPromise = this.core.initializeWorkspace(workspace, options);
+        const objectsMap = this.core.store.objects;
         this._workspaceInitializationPromise = initializationPromise;
         this._workspaceInitializationTargetKey = targetKey;
         try {
             await initializationPromise;
+            await objectsMap?.whenNetworkSynced();
         }
         finally {
             // Only the most recent init clears loading state to prevent race conditions
             if (this._workspaceInitializationPromise === initializationPromise) {
                 this._workspaceInitializationPromise = null;
                 this._workspaceInitializationTargetKey = null;
-                this._isWorkspaceLoading = false;
-                this.syncLoadingState();
+                this.setLoadingState(false);
             }
         }
     }
@@ -51589,9 +51616,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             }],
         "debugInfo": [{
                 "onDebugInfoChange": 0
-            }],
-        "isLoading": [{
-                "onIsLoadingChange": 0
             }]
     }; }
     static get style() { return kritzelEngineCss(); }
@@ -51622,7 +51646,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "debugInfo": [16],
         "isPanningEnabled": [4, "is-panning-enabled"],
         "isZoomingEnabled": [4, "is-zooming-enabled"],
-        "isLoading": [4, "is-loading"],
         "forceUpdate": [32],
         "triggerSelectionChange": [64],
         "beginSceneBootstrap": [64],
@@ -51772,9 +51795,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             }],
         "debugInfo": [{
                 "onDebugInfoChange": 0
-            }],
-        "isLoading": [{
-                "onIsLoadingChange": 0
             }]
     }]);
 function defineCustomElement() {
@@ -51811,4 +51831,4 @@ function defineCustomElement() {
     } });
 }
 
-export { AssetNotFoundError as A, KritzelKeyboardHelper as B, defineCustomElement as C, DE_LOCALE as D, EN_LOCALE as E, FR_LOCALE as F, KritzelEngine as G, IndexedDBAssetProvider as I, KritzelText as K, ShapeType as S, WORKSPACE_MIGRATIONS as W, KritzelImage as a, KritzelGroup as b, KritzelShape as c, KritzelCustomElement as d, KritzelBaseTool as e, KritzelBrushTool as f, KritzelLineTool as g, KritzelEraserTool as h, KritzelImageTool as i, KritzelTextTool as j, KritzelShapeTool as k, KritzelCursorHelper as l, KritzelSelectionTool as m, KritzelAssetResolver as n, KritzelAnchorManager as o, KritzelLocalizationManager as p, KritzelLicenseManager as q, KritzelCustomElementRendererRegistry as r, KritzelAlignment as s, runMigrations as t, APP_STATE_MIGRATIONS as u, DEFAULT_STROKE_SIZES as v, DEFAULT_FONT_SIZES as w, DEFAULT_SYNC_CONFIG as x, KritzelSelectionGroup as y, KritzelSelectionBox as z };
+export { AssetNotFoundError as A, KritzelSelectionBox as B, KritzelKeyboardHelper as C, DE_LOCALE as D, EN_LOCALE as E, FR_LOCALE as F, defineCustomElement as G, KritzelEngine as H, IndexedDBSyncProvider as I, KritzelText as K, ShapeType as S, WORKSPACE_MIGRATIONS as W, KritzelImage as a, KritzelGroup as b, KritzelShape as c, KritzelCustomElement as d, KritzelBaseTool as e, KritzelBrushTool as f, KritzelLineTool as g, KritzelEraserTool as h, KritzelImageTool as i, KritzelTextTool as j, KritzelShapeTool as k, KritzelCursorHelper as l, KritzelSelectionTool as m, KritzelAssetResolver as n, IndexedDBAssetProvider as o, KritzelAnchorManager as p, KritzelLocalizationManager as q, KritzelLicenseManager as r, KritzelCustomElementRendererRegistry as s, KritzelAlignment as t, runMigrations as u, APP_STATE_MIGRATIONS as v, DEFAULT_STROKE_SIZES as w, DEFAULT_FONT_SIZES as x, DEFAULT_SYNC_CONFIG as y, KritzelSelectionGroup as z };

package/dist/esm/index.js

@@ -1,8 +1,8 @@
-import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-DfvqHmxc.js';
-export { P as APP_STATE_MIGRATIONS, A as AssetNotFoundError, R as CURRENT_APP_STATE_SCHEMA_VERSION, T as CURRENT_WORKSPACE_SCHEMA_VERSION, E as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, C as DEFAULT_LINE_TOOL_CONFIG, B as DEFAULT_TEXT_CONFIG, L as DE_LOCALE, J as EN_LOCALE, M as FR_LOCALE, I as IndexedDBAssetProvider, N as KritzelAlignment, t as KritzelAnchorManager, r as KritzelAssetResolver, K as KritzelBaseObject, i as KritzelBaseTool, j as KritzelBrushTool, p as KritzelCursorHelper, h as KritzelCustomElement, x as KritzelCustomElementRendererRegistry, l as KritzelEraserTool, y as KritzelFontRegistry, f as KritzelGroup, d as KritzelImage, m as KritzelImageTool, w as KritzelLicenseManager, e as KritzelLine, k as KritzelLineTool, v as KritzelLocalizationManager, c as KritzelPath, q as KritzelSelectionTool, g as KritzelShape, o as KritzelShapeTool, b as KritzelText, n as KritzelTextTool, u as KritzelThemeManager, s as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, Q as WORKSPACE_MIGRATIONS, G as darkTheme, z as hasRemoteSyncProvider, F as lightTheme, O as runMigrations } from './schema.constants-DfvqHmxc.js';
+import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-De_S50eB.js';
+export { Q as APP_STATE_MIGRATIONS, A as AssetNotFoundError, T as CURRENT_APP_STATE_SCHEMA_VERSION, U as CURRENT_WORKSPACE_SCHEMA_VERSION, F as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, E as DEFAULT_LINE_TOOL_CONFIG, C as DEFAULT_TEXT_CONFIG, M as DE_LOCALE, L as EN_LOCALE, N as FR_LOCALE, s as IndexedDBAssetProvider, I as IndexedDBSyncProvider, O as KritzelAlignment, u as KritzelAnchorManager, r as KritzelAssetResolver, K as KritzelBaseObject, i as KritzelBaseTool, j as KritzelBrushTool, p as KritzelCursorHelper, h as KritzelCustomElement, y as KritzelCustomElementRendererRegistry, l as KritzelEraserTool, z as KritzelFontRegistry, f as KritzelGroup, d as KritzelImage, m as KritzelImageTool, x as KritzelLicenseManager, e as KritzelLine, k as KritzelLineTool, w as KritzelLocalizationManager, c as KritzelPath, q as KritzelSelectionTool, g as KritzelShape, o as KritzelShapeTool, b as KritzelText, n as KritzelTextTool, v as KritzelThemeManager, t as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, R as WORKSPACE_MIGRATIONS, J as darkTheme, B as hasRemoteSyncProvider, G as lightTheme, P as runMigrations } from './schema.constants-De_S50eB.js';
 import * as Y from 'yjs';
-import { IndexeddbPersistence } from 'y-indexeddb';
 import { WebsocketProvider } from 'y-websocket';
+import 'y-indexeddb';
 
 /**
  * Common Math expressions.
@@ -501,45 +501,6 @@ class InMemorySyncProvider {
     }
 }
 
-/**
- * IndexedDB sync provider for local persistence
- */
-class IndexedDBSyncProvider {
-    static type = 'local';
-    type = 'local';
-    provider;
-    isConnected = false;
-    constructor(docName, doc, options) {
-        const dbName = options?.name || docName;
-        this.provider = new IndexeddbPersistence(dbName, doc);
-    }
-    async connect() {
-        if (this.isConnected) {
-            return;
-        }
-        return new Promise(resolve => {
-            this.provider.on('synced', () => {
-                this.isConnected = true;
-                resolve();
-            });
-        });
-    }
-    disconnect() {
-        // IndexedDB doesn't need explicit disconnect
-        this.isConnected = false;
-    }
-    async reconnect() {
-        this.disconnect();
-        return this.connect();
-    }
-    destroy() {
-        if (this.provider) {
-            this.provider.destroy();
-        }
-        this.isConnected = false;
-    }
-}
-
 /**
  * WebSocket sync provider for real-time collaboration
  */
@@ -1182,4 +1143,4 @@ class PresignedAssetProvider {
     }
 }
 
-export { BroadcastSyncProvider, HocuspocusSyncProvider, HttpAssetProvider, InMemorySyncProvider, IndexedDBSyncProvider, PresignedAssetProvider, WebSocketSyncProvider };
+export { BroadcastSyncProvider, HocuspocusSyncProvider, HttpAssetProvider, InMemorySyncProvider, PresignedAssetProvider, WebSocketSyncProvider };