kritzel-stencil 0.4.5 → 0.4.7

package/dist/components/{p--Oazz-BP.js → p-C2yi85nc.js}

@@ -1,20 +1,19 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
 import { a as KritzelMouseButton, d as defineCustomElement$5 } from './p-Cm33td2O.js';
-import { K as KritzelBaseObject, e as KritzelMathHelper, f as KritzelGeometryHelper, a as KritzelPath, b as KritzelLine, d as defineCustomElement$7 } from './p-Ka7OWbnk.js';
+import { K as KritzelBaseObject, e as KritzelMathHelper, f as KritzelGeometryHelper, a as KritzelPath, b as KritzelLine, d as defineCustomElement$6 } from './p-Ka7OWbnk.js';
 import { c as commonjsGlobal } from './p-BFTU3MAI.js';
 import { a as KritzelColorHelper, D as DEFAULT_COLOR_PALETTE, K as KritzelThemeManager } from './p-BmyTdQGy.js';
 import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
 import { K as KritzelFontRegistry, r as resolveTextToolAvailableFonts } from './p-DJkKlUyZ.js';
-import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$1 } from './p-PSFAfAyd.js';
+import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$1 } from './p-CwuGA058.js';
 import { K as KritzelWorkspace, W as WORKSPACE_EXPORT_VERSION } from './p-DAwPPDMS.js';
 import { K as KritzelHTMLHelper } from './p-WUdQqYnu.js';
-import { K as KritzelContextMenu, d as defineCustomElement$6 } from './p-BxpKq94F.js';
 import { O as ObjectHelper } from './p-Dd-pMvlr.js';
 import * as Y from 'yjs';
 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$4 } from './p-CdR76C4L.js';
-import { d as defineCustomElement$3 } from './p-DgJ0ufzr.js';
-import { d as defineCustomElement$2 } from './p-894OnDQV.js';
+import { d as defineCustomElement$3 } from './p-BVEGQLBD.js';
+import { d as defineCustomElement$2 } from './p-CM1duewg.js';
 
 class KritzelKeyboardHelper {
     static forceHideKeyboard() {
@@ -42165,6 +42164,18 @@ class KritzelViewport {
     animateViewportTo(targetTranslateX, targetTranslateY, targetScale, duration = 150) {
         // Cancel any existing animation
         this.cancelViewportAnimation();
+        if (duration <= 0) {
+            // Apply immediately; interpolating with duration 0 divides by zero
+            // (rAF timestamps can precede performance.now()), producing NaN state.
+            this._core.store.state.scale = targetScale;
+            const clamped = this.clampTranslate(targetTranslateX, targetTranslateY);
+            this._core.store.state.translateX = clamped.translateX;
+            this._core.store.state.translateY = clamped.translateY;
+            this._core.store.state.hasViewportChanged = true;
+            this._core.rerender();
+            this._debounceUpdate();
+            return;
+        }
         const startTranslateX = this._core.store.state.translateX;
         const startTranslateY = this._core.store.state.translateY;
         const startScale = this._core.store.state.scale;
@@ -42172,7 +42183,8 @@ class KritzelViewport {
         this._core.store.state.isScaling = true;
         const animate = (currentTime) => {
             const elapsed = currentTime - startTime;
-            const progress = Math.min(elapsed / duration, 1);
+            // Clamp to [0, 1]; rAF timestamps can precede startTime, yielding negative progress
+            const progress = Math.min(Math.max(elapsed, 0) / duration, 1);
             // easeOutCubic easing function
             const eased = 1 - Math.pow(1 - progress, 3);
             this._core.store.state.scale = startScale + (targetScale - startScale) * eased;
@@ -46656,13 +46668,13 @@ class KritzelCore {
     }
     /**
      * Selects all objects in the workspace.
-     * Excludes selection-related and context menu objects.
+     * Excludes selection-related objects.
      * Switches to selection tool.
      */
     selectAllObjects() {
         const allObjects = this._store.objects
             .allObjects()
-            .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox) && !(o instanceof KritzelContextMenu));
+            .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox));
         if (allObjects.length > 0) {
             const selectionGroup = KritzelSelectionGroup.create(this);
             allObjects.forEach(obj => {
@@ -46681,7 +46693,7 @@ class KritzelCore {
     }
     /**
      * Selects all objects currently visible in the viewport.
-     * Excludes selection-related and context menu objects.
+     * Excludes selection-related objects.
      * Switches to selection tool.
      */
     selectAllObjectsInViewport() {
@@ -46696,7 +46708,7 @@ class KritzelCore {
         const objectsInViewport = this._store.objects
             .query(viewportBounds)
             .filter(o => o.isInViewport())
-            .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox) && !(o instanceof KritzelContextMenu));
+            .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox));
         if (objectsInViewport.length > 0) {
             const selectionGroup = KritzelSelectionGroup.create(this);
             objectsInViewport.forEach(obj => {
@@ -48797,6 +48809,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     awarenessChange;
     /** Emitted when notifications change. */
     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 when remote workspace synchronization is in progress. */
@@ -48807,6 +48821,31 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     async triggerSelectionChange() {
         this.objectsSelectionChange.emit();
     }
+    /** Starts a scene bootstrap phase by hiding the scene immediately. */
+    async beginSceneBootstrap() {
+        if (this._sceneBootstrapTransitionTimer !== null) {
+            clearTimeout(this._sceneBootstrapTransitionTimer);
+            this._sceneBootstrapTransitionTimer = null;
+        }
+        this._sceneBootstrapTransitionEnabled = false;
+        this._sceneBootstrapOpacity = 0;
+        this.core.rerender();
+    }
+    /** Ends a scene bootstrap phase by fading the scene back in. */
+    async endSceneBootstrap() {
+        if (this._sceneBootstrapTransitionTimer !== null) {
+            clearTimeout(this._sceneBootstrapTransitionTimer);
+            this._sceneBootstrapTransitionTimer = null;
+        }
+        this._sceneBootstrapTransitionEnabled = true;
+        this._sceneBootstrapOpacity = 1;
+        this.core.rerender();
+        this._sceneBootstrapTransitionTimer = setTimeout(() => {
+            this._sceneBootstrapTransitionEnabled = false;
+            this._sceneBootstrapTransitionTimer = null;
+            this.core.rerender();
+        }, 220);
+    }
     handleWheel(ev) {
         if (this.core.store.isDisabled) {
             return;
@@ -48964,6 +49003,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     }
     handleLongPress(ev) {
         this.contextMenuHandler.handleContextMenu(ev.detail);
+        this.emitContextMenuStateChange();
     }
     handleContextMenu(ev) {
         if (ev.cancelable) {
@@ -48976,6 +49016,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             return;
         }
         this.contextMenuHandler.handleContextMenu(ev);
+        this.emitContextMenuStateChange();
     }
     handleResize() {
         this.viewport.handleResize();
@@ -49217,6 +49258,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.core.store.objects?.clearLocalSelectionBox();
         this.core.store.state.isSelecting = false;
         this.core.store.state.isEnabled = true;
+        this.emitContextMenuStateChange();
         this.core.rerender();
     }
     /**
@@ -49230,6 +49272,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
      */
     async openContextMenu(options) {
         this.contextMenuHandler.open(options);
+        this.emitContextMenuStateChange();
     }
     /**
      * Retrieves a canvas object by its unique ID.
@@ -49982,14 +50025,26 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         // Revive and add objects to the current workspace
         if (data.objects && Array.isArray(data.objects)) {
             const reviver = new KritzelReviver(this.core);
-            for (const objData of data.objects) {
-                const revivedObj = reviver.revive(objData);
-                if (revivedObj) {
+            const objectsMap = this.core.store.objects;
+            const insertRevivedObjects = () => {
+                for (const objData of data.objects) {
+                    const revivedObj = reviver.revive(objData);
+                    if (!revivedObj) {
+                        continue;
+                    }
                     // Update workspaceId to the current workspace's ID
                     revivedObj.workspaceId = currentWorkspaceId;
                     this.core.addObject(revivedObj);
                     loadedCount++;
                 }
+            };
+            if (objectsMap) {
+                objectsMap.transaction(() => {
+                    insertRevivedObjects();
+                });
+            }
+            else {
+                insertRevivedObjects();
             }
         }
         // Rerender to apply changes
@@ -50335,7 +50390,6 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     viewport;
     contextMenuHandler;
     keyHandler;
-    contextMenuElement = null;
     _lastHadSelectionGroup = false;
     _isViewportReady = false;
     _isYjsInitialized = false;
@@ -50351,6 +50405,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     _hasLoggedUnlicensedWelcomeBanner = false;
     _previousVisibleCustomElements = new Set();
     _revealedImageKeys = new Set();
+    _sceneBootstrapOpacity = 1;
+    _sceneBootstrapTransitionEnabled = false;
+    _sceneBootstrapTransitionTimer = null;
     _defaultUndoState = {
         canUndo: false,
         canRedo: false,
@@ -50371,6 +50428,22 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.isSyncing = isSyncing;
         this.syncingChange.emit(isSyncing);
     }
+    emitContextMenuStateChange() {
+        this.contextMenuStateChange.emit({
+            isVisible: this.core.store.state.isContextMenuVisible,
+            isObjectMenu: !!this.core.store.selectionGroup,
+            items: this.core.store.state.contextMenuItems,
+            objects: this.core.store.selectionGroup?.objects || [],
+            position: {
+                x: this.core.store.state.contextMenuX,
+                y: this.core.store.state.contextMenuY,
+            },
+            worldPosition: {
+                x: this.core.store.state.contextMenuWorldX,
+                y: this.core.store.state.contextMenuWorldY,
+            },
+        });
+    }
     applyToolConfig(tool, toolConfig) {
         const normalizedToolConfig = this.normalizeToolConfig(toolConfig);
         Object.entries(normalizedToolConfig).forEach(([key, value]) => {
@@ -50459,6 +50532,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.viewportChange = createEvent(this, "viewportChange");
         this.awarenessChange = createEvent(this, "awarenessChange");
         this.notificationsChange = createEvent(this, "notificationsChange");
+        this.contextMenuStateChange = createEvent(this, "contextMenuStateChange");
         this.loadingChange = createEvent(this, "loadingChange");
         this.syncingChange = createEvent(this, "syncingChange");
         this.core = new KritzelCore(this);
@@ -50466,6 +50540,10 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
         this._revealedImageKeys.clear();
+        if (this._sceneBootstrapTransitionTimer !== null) {
+            clearTimeout(this._sceneBootstrapTransitionTimer);
+            this._sceneBootstrapTransitionTimer = null;
+        }
         // Unmount all remaining custom elements
         if (this.core.store.allObjects) {
             this.core.store.allObjects.forEach(object => {
@@ -50509,6 +50587,10 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         this.core.store.state.viewportBoundaryRight = this.viewportBoundaryRight;
         this.core.store.state.viewportBoundaryTop = this.viewportBoundaryTop;
         this.core.store.state.viewportBoundaryBottom = this.viewportBoundaryBottom;
+        if (this.debugInfo) {
+            this.core.store.state.debugInfo = this.debugInfo;
+            this.core.assetResolver.setShowInfo(this.debugInfo.showAssetResolverInfo);
+        }
         this._isWorkspaceLoading = true;
         this.syncLoadingState();
     }
@@ -50914,6 +50996,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         }
         return (h(Host, null, h("kritzel-loading-overlay", { visible: this.core.store.state.isLoading, text: this.core.localizationManager.translate('engine.loading') }), h("kritzel-sync-indicator", { visible: this.isSyncing, text: "Syncing..." }), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
+                opacity: this._sceneBootstrapOpacity.toString(),
+                transition: this._sceneBootstrapTransitionEnabled ? 'opacity 220ms ease-out' : 'none',
+                willChange: this._sceneBootstrapTransitionEnabled ? 'opacity' : undefined,
             } }, visibleObjects?.map(object => {
             const { multiplied: effectiveOpacity, overridden: effectiveOpacityString } = this.getObjectEffectiveOpacity(object, viewportScale);
             return (h("div", { key: object.id, id: object.id, class: "object", style: {
@@ -51340,20 +51425,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } })))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { class: "context-menu", ref: el => (this.contextMenuElement = el ?? null), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
-                position: 'absolute',
-                left: `${this.core.store.state.contextMenuX}px`,
-                top: `${this.core.store.state.contextMenuY}px`,
-                zIndex: '10002',
-            }, onActionSelected: event => {
-                if (event.detail.action) {
-                    event.detail.action({
-                        x: this.core.store.state.contextMenuWorldX,
-                        y: this.core.store.state.contextMenuWorldY,
-                    }, this.core.store.selectionGroup?.objects || []);
-                }
-                this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool?.toolType === 'eraser' && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core }), !this.core.licenseManager.isLicensed && h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') })));
+        })()), this.core.store.objects?.hasAwareness && h("kritzel-awareness-cursors", { core: this.core }), this.core.store.state?.activeTool?.toolType === 'eraser' && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { core: this.core }), !this.core.licenseManager.isLicensed && h("kritzel-watermark", { core: this.core, label: this.core.localizationManager.translate('watermark.poweredBy') })));
     }
     static get watchers() { return {
         "workspace": [{
@@ -51461,6 +51533,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "forceUpdate": [32],
         "isSyncing": [32],
         "triggerSelectionChange": [64],
+        "beginSceneBootstrap": [64],
+        "endSceneBootstrap": [64],
         "registerTool": [64],
         "changeActiveTool": [64],
         "changeActiveToolByName": [64],
@@ -51616,7 +51690,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["kritzel-engine", "kritzel-awareness-cursors", "kritzel-context-menu", "kritzel-cursor-trail", "kritzel-icon", "kritzel-loading-overlay", "kritzel-sync-indicator", "kritzel-watermark"];
+    const components = ["kritzel-engine", "kritzel-awareness-cursors", "kritzel-cursor-trail", "kritzel-icon", "kritzel-loading-overlay", "kritzel-sync-indicator", "kritzel-watermark"];
     components.forEach(tagName => { switch (tagName) {
         case "kritzel-engine":
             if (!customElements.get(transformTag(tagName))) {
@@ -51624,11 +51698,6 @@ function defineCustomElement() {
             }
             break;
         case "kritzel-awareness-cursors":
-            if (!customElements.get(transformTag(tagName))) {
-                defineCustomElement$7();
-            }
-            break;
-        case "kritzel-context-menu":
             if (!customElements.get(transformTag(tagName))) {
                 defineCustomElement$6();
             }

package/dist/components/{p-894OnDQV.js → p-CM1duewg.js}

@@ -15,7 +15,7 @@ const KritzelSyncIndicator = /*@__PURE__*/ proxyCustomElement(class KritzelSyncI
     /** The text displayed next to the spinner. */
     text = 'Syncing...';
     render() {
-        return (h(Host, { key: '833aa19a39357398a9fc2d97246398b77f1b990f' }, h("div", { key: 'cabb31890ea7c6afdafa6427306caa19a2d8f818', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: '086105d00156d8556d8a78cfb0cec47d65b40a1f', class: "spinner", "aria-hidden": "true" }), h("span", { key: '9934152bb9f55399a20112f4230c4efc1518a2e1' }, this.text))));
+        return (h(Host, { key: '585d5fd13116c093e5221164e36e6e986a63da58' }, h("div", { key: 'd4e0d9e51db002b8ea201a0564c22916809c346d', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: 'b82f4c363ee31ae697e435fc8eb6ce0e2f3df1ab', class: "spinner", "aria-hidden": "true" }), h("span", { key: 'f39e04332aaf622dad69d0e5d6b6e90ee5df3ed1' }, this.text))));
     }
     static get style() { return kritzelSyncIndicatorCss(); }
 }, [513, "kritzel-sync-indicator", {

package/dist/components/{p-e6Zpc9Vp.js → p-COjsYPir.js}

@@ -2,7 +2,7 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transf
 import { d as defineCustomElement$5 } from './p-DX2nriaq.js';
 import { d as defineCustomElement$4 } from './p-Df3BwVGy.js';
 import { d as defineCustomElement$3 } from './p-CdR76C4L.js';
-import { d as defineCustomElement$2 } from './p-C4NrrUfN.js';
+import { d as defineCustomElement$2 } from './p-DSOc0eIT.js';
 import { d as defineCustomElement$1 } from './p-D09kgc5Q.js';
 
 const kritzelExportCss = () => `:host{display:flex;flex-direction:column;min-height:0}.export-content{display:flex;flex-direction:column;gap:16px;padding:0;flex:1}.export-content kritzel-pill-tabs{align-self:center}.export-tab-content{display:flex;flex-direction:column;gap:16px;min-height:330px}.format-selection{display:flex;flex-direction:column;gap:6px}.format-selection label{font-size:14px;font-weight:500;color:var(--kritzel-global-text-primary, #333)}.export-primary-button{width:100%;padding:12px 24px;background-color:var(--kritzel-global-primary-color, #007AFF);color:var(--kritzel-global-primary-text-color, #fff);border:none;border-radius:var(--kritzel-button-border-radius, 8px);font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.export-primary-button:hover{background-color:var(--kritzel-global-primary-hover-color, #0066d6)}.export-primary-button:focus-visible{outline:revert;outline-offset:revert}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-global-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-global-text-secondary, #666)}@media (max-width: 576px){.export-tab-content{flex:1;min-height:0}}`;
@@ -87,7 +87,7 @@ const KritzelExport = /*@__PURE__*/ proxyCustomElement(class KritzelExport exten
         return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (h(Host, { key: '2f12ec7f4754e3f2aa0364809bdbde60102d76e4' }, h("kritzel-dialog", { key: '0e5929e175ac41dd7f480aabaef2aa109a15f679', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '6afffd8098e414c117582f3485dbaa348747eb4c', class: "export-content" }, h("kritzel-pill-tabs", { key: 'dd901f356e80fb71033311825e4d83af36b9c561', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '9fab5c1037cc9187c4f14c9534c8f395fde0d7cf', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
+        return (h(Host, { key: '0bc45e80716be4a7b19ae12a6464a641b5bd4550' }, h("kritzel-dialog", { key: 'f336f8b1e4ae10954d48ca67da88504faf06b295', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'e2d1209652bb54fb7f623e50bc4bbbb703083b76', class: "export-content" }, h("kritzel-pill-tabs", { key: 'dd78430b78d1e8c4ac0a76e8a6a5d48bebf5e889', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: 'e06564889d991afc7a4ac43bb1e5504e98c94c52', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
     }
     static get style() { return kritzelExportCss(); }
 }, [513, "kritzel-export", {

package/dist/components/{p-BsANVili.js → p-CVhcOiEA.js}

@@ -102,15 +102,15 @@ const KritzelMasterDetail = /*@__PURE__*/ proxyCustomElement(class KritzelMaster
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (h(Host, { key: 'e363142a5175b1f711cebfc98cfeedf07cd2c6c3' }, h("div", { key: 'eebf863ecdb4a53289cb56e14c02977375781167', class: {
+        return (h(Host, { key: '0edf50b0b853633b88bf481f97f22aceba9e163e' }, h("div", { key: '21a0a3f81e5a60889ccd152c905cb41f52c3e037', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, h("nav", { key: '06660d3cd7de29ba46e3437169f99cb00eef1cc6', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
+            } }, h("nav", { key: '41f88248cc372c8cae4cb50a19edf462a01e43f2', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index === this.focusedIndex,
-            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '0d6b6722ecbf64b28d27754161f861edafa3882c', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '3d8ac88c0f8a7a840b5560c4917d74ff910a99c8', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '03cf6ca5ea2b9d16ff21b1b38fd0b6148d35ff1f', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '3323357889024c0d2126c30d976c3ece7ddd706a' })))));
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: 'f8447facf3dfdbd7772823654847e1b90b03f73e', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '3edc9784267613e6b3a706739bbb537161e4c747', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: 'ec0b4691735578525e5863842271366e04b13fb7', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: 'c21fbaff78f98859b9756427125b60504d4bb630' })))));
     }
     static get watchers() { return {
         "selectedItemId": [{

package/dist/components/{p-PSFAfAyd.js → p-CwuGA058.js}

@@ -25,7 +25,7 @@ const KritzelWatermark = /*@__PURE__*/ proxyCustomElement(class KritzelWatermark
     label;
     render() {
         const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
-        return (h(Host, { key: '143ea32342e30351c93751714dfd12b725ddca24' }, h("a", { key: '95fb2dfa0d806367e6a71dad3932b321d7ae5a76', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
+        return (h(Host, { key: '0eccc75e51c7ac199e23d8f3a871593f1fb65a17' }, h("a", { key: '2029f8b56ba8609ca621447eac0df9d30ebfbbbe', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
     }
     static get style() { return kritzelWatermarkCss(); }
 }, [513, "kritzel-watermark", {

package/dist/components/{p-U6uE85Qx.js → p-D0oplzU-.js}

@@ -1,20 +1,20 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { a as CURRENT_WORKSPACE_SCHEMA_VERSION, C as CURRENT_APP_STATE_SCHEMA_VERSION } from './p-CW-VyJgK.js';
+import { C as CURRENT_APP_STATE_SCHEMA_VERSION, a as CURRENT_WORKSPACE_SCHEMA_VERSION } from './p-CW-VyJgK.js';
 import { d as defineCustomElement$6 } from './p-DX2nriaq.js';
 import { d as defineCustomElement$5 } from './p-Df3BwVGy.js';
 import { d as defineCustomElement$4 } from './p-CdR76C4L.js';
-import { d as defineCustomElement$3 } from './p-BsANVili.js';
-import { d as defineCustomElement$2 } from './p-BDzlx2hB.js';
-import { d as defineCustomElement$1 } from './p-CWRSGYOE.js';
+import { d as defineCustomElement$3 } from './p-CVhcOiEA.js';
+import { d as defineCustomElement$2 } from './p-DIMNEOTW.js';
+import { d as defineCustomElement$1 } from './p-BzJEwFtn.js';
 
 /**
  * The current version of the Kritzel library.
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.4.5';
+const KRITZEL_VERSION = '0.4.7';
 
-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)}`;
+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)}`;
 
 const DEFAULT_SCALE_MIN = 0.0001;
 const DEFAULT_SCALE_MAX = 1000;
@@ -225,23 +225,10 @@ const KritzelSettings = /*@__PURE__*/ proxyCustomElement(class KritzelSettings e
         }));
     }
     renderCategoryContent() {
-        switch (this.selectedCategoryId) {
-            case 'general':
-                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.general.title', 'General Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.theme.label', 'Theme')), h("p", { class: "settings-description" }, this.t('settings.general.theme.description', 'Select a registered color theme for the editor interface.')), h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), this.availableLocales.length > 0 && (h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.language.label', 'Language')), h("p", { class: "settings-description" }, this.t('settings.general.language.description', 'Select the display language for the editor interface.')), h("kritzel-dropdown", { options: this.availableLocales.map(l => ({ value: l.code, label: l.label })), value: this.locale, onValueChanged: this.handleLocaleChange }))), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale')), h("p", { class: "settings-description" }, this.t('settings.general.lockDrawingScale.description', 'When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.')), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale'), onCheckedChange: this.handleLockDrawingScaleChange })))));
-            case 'viewport':
-                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.viewport.title', 'Viewport Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.minZoom.label', 'Minimum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.minZoom.description', 'Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.')), h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.maxZoom.label', 'Maximum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.maxZoom.description', 'Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.')), h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryLeft.label', 'Viewport Boundary Left')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryLeft.description', 'Left boundary in world coordinates. Set to limit how far left the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryLeftChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryRight.label', 'Viewport Boundary Right')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryRight.description', 'Right boundary in world coordinates. Set to limit how far right the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryRightChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryTop.label', 'Viewport Boundary Top')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryTop.description', 'Top boundary in world coordinates. Set to limit how far up the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryTopChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryBottom.label', 'Viewport Boundary Bottom')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryBottom.description', 'Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryBottomChange })))));
-            case 'shortcuts':
-                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.shortcuts.title', 'Keyboard Shortcuts')), h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (h("div", { class: "shortcuts-category", key: category }, h("h4", { class: "shortcuts-category-title" }, category), h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, h("span", { class: "shortcut-label" }, shortcut.label), h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut))))))))))));
-            case 'developer':
-                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.developer.title', 'Developer Options')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showViewportInfo.description', 'Display viewport debug information such as position, zoom level, and boundaries.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info'), onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showObjectInfo.label', 'Show Object Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showObjectInfo.description', 'Display debug information about objects on the canvas.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: this.t('settings.developer.showObjectInfo.label', 'Show Object Info'), onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showSyncProviderInfo.description', 'Display debug information about the sync provider connection status.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info'), onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showMigrationInfo.description', 'Display debug information about data migrations.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info'), onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') })))));
-            case 'about':
-                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.about.title', 'About')), h("p", null, this.t('settings.about.description', 'Kritzel - A drawing application')), h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), h("p", { class: "version-info" }, "App-State Schema v", CURRENT_APP_STATE_SCHEMA_VERSION), h("p", { class: "version-info" }, "Workspace Schema v", CURRENT_WORKSPACE_SCHEMA_VERSION)));
-            default:
-                return null;
-        }
+        return (h("div", { class: "settings-categories-wrapper" }, h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'general' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.general.title', 'General Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.theme.label', 'Theme')), h("p", { class: "settings-description" }, this.t('settings.general.theme.description', 'Select a registered color theme for the editor interface.')), h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), this.availableLocales.length > 0 && (h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.language.label', 'Language')), h("p", { class: "settings-description" }, this.t('settings.general.language.description', 'Select the display language for the editor interface.')), h("kritzel-dropdown", { options: this.availableLocales.map(l => ({ value: l.code, label: l.label })), value: this.locale, onValueChanged: this.handleLocaleChange }))), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale')), h("p", { class: "settings-description" }, this.t('settings.general.lockDrawingScale.description', 'When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.')), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale'), onCheckedChange: this.handleLockDrawingScaleChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'viewport' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.viewport.title', 'Viewport Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.minZoom.label', 'Minimum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.minZoom.description', 'Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.')), h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.maxZoom.label', 'Maximum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.maxZoom.description', 'Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.')), h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryLeft.label', 'Viewport Boundary Left')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryLeft.description', 'Left boundary in world coordinates. Set to limit how far left the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryLeftChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryRight.label', 'Viewport Boundary Right')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryRight.description', 'Right boundary in world coordinates. Set to limit how far right the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryRightChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryTop.label', 'Viewport Boundary Top')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryTop.description', 'Top boundary in world coordinates. Set to limit how far up the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryTopChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryBottom.label', 'Viewport Boundary Bottom')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryBottom.description', 'Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryBottomChange }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'shortcuts' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.shortcuts.title', 'Keyboard Shortcuts')), h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (h("div", { class: "shortcuts-category", key: category }, h("h4", { class: "shortcuts-category-title" }, category), h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, h("span", { class: "shortcut-label" }, shortcut.label), h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut)))))))))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'developer' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.developer.title', 'Developer Options')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showViewportInfo.description', 'Display viewport debug information such as position, zoom level, and boundaries.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info'), onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showObjectInfo.label', 'Show Object Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showObjectInfo.description', 'Display debug information about objects on the canvas.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: this.t('settings.developer.showObjectInfo.label', 'Show Object Info'), onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showSyncProviderInfo.description', 'Display debug information about the sync provider connection status.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info'), onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showMigrationInfo.description', 'Display debug information about data migrations.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info'), onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'about' } }, h("div", { class: "settings-content" }, h("h3", null, this.t('settings.about.title', 'About')), h("p", null, this.t('settings.about.description', 'Kritzel - A drawing application')), h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), h("p", { class: "version-info" }, "App-State Schema v", CURRENT_APP_STATE_SCHEMA_VERSION), h("p", { class: "version-info" }, "Workspace Schema v", CURRENT_WORKSPACE_SCHEMA_VERSION)))));
     }
     render() {
-        return (h(Host, { key: '1fb0bca35cb20633f017a927d39e2a66ebfb403b' }, h("kritzel-dialog", { key: '6366a8d8e7f65ef3f715248db3dc7c7e36dd3f4a', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '2f4891d1ef0b3f130c591790b2e53e7264a61145', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (h(Host, { key: '36bca8be04b34a37630d6aa5394595a8b394d180' }, h("kritzel-dialog", { key: '1e257904178fd9afa2bfbe4a758663fb366c8847', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'b7d9ad97d9b126ccf6e800e6c9032749635eb988', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get watchers() { return {
         "settings": [{

package/dist/components/{p-Cr682JI_.js → p-D8TOEhPY.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
 import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
 import { d as defineCustomElement$4 } from './p-CdR76C4L.js';
-import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-CwJwsRR3.js';
-import { d as defineCustomElement$1 } from './p-Ca-igU1f.js';
+import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-BKOsmXB5.js';
+import { d as defineCustomElement$1 } from './p-BLOPBDUF.js';
 
 const kritzelSplitButtonCss = () => `:host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:var(--kritzel-split-button-color, #000000);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}`;
 
@@ -103,7 +103,7 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: 'b3b5b4a63df6e6a4bd2902716a8c26830e31127d', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a25f723f41c1604172fa96d036eab6b80a22add5', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '6999b1baefa3c940c2a25772b0c03ab0c809cd79', name: this.buttonIcon })), h("div", { key: 'dcbff30cae4a73b5c214c0ae98b16c8d681b8eed', class: "split-divider" }), h("button", { key: 'bdbe0b300b3c5df31df58574ee055f05787acceb', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: '66969517639c73140a745bc189730dfa09eafa08', name: this.dropdownIcon })), h("kritzel-portal", { key: '197d002ea78ddb535743d6d2f872b9779dfc462b', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '15f1d42042e2368ff04e54f7872480f9f8841900', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (h(Host, { key: 'fa22dc1185ef07d8127d9ee9f6dbe482d126f934', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a48aba702b70e9b24ad5486dde61fa9f9c8f7cdc', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '0d1c9a3e9f744541dd6ebe491105f6ee65233543', name: this.buttonIcon })), h("div", { key: 'c9db29f0b9c9cf1974d78f4f60be9e1b0e26c5d2', class: "split-divider" }), h("button", { key: '57addfd5228b7c7668be902c53683d12c976b89b', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: 'd860cc503043425860b1234b5d34693bfdd1d5ab', name: this.dropdownIcon })), h("kritzel-portal", { key: 'cd6dda8869aea4205d922fc639073019bbd2b102', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '1ef1c2b319662e7a2af15b46362addcc75bceb68', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
     static get style() { return kritzelSplitButtonCss(); }
 }, [513, "kritzel-split-button", {

package/dist/components/{p-ClFprFvz.js → p-DDbO5q-e.js}

@@ -2,9 +2,9 @@ import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transf
 import { K as KritzelWorkspace } from './p-DAwPPDMS.js';
 import { O as ObjectHelper } from './p-Dd-pMvlr.js';
 import { d as defineCustomElement$5 } from './p-CdR76C4L.js';
-import { d as defineCustomElement$3, a as defineCustomElement$4 } from './p-CwJwsRR3.js';
-import { d as defineCustomElement$2 } from './p-Ca-igU1f.js';
-import { d as defineCustomElement$1 } from './p-Cr682JI_.js';
+import { d as defineCustomElement$3, a as defineCustomElement$4 } from './p-BKOsmXB5.js';
+import { d as defineCustomElement$2 } from './p-BLOPBDUF.js';
+import { d as defineCustomElement$1 } from './p-D8TOEhPY.js';
 
 const kritzelWorkspaceManagerCss = () => `:host{display:flex;flex-direction:column;z-index:1}.manager{opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.manager.visible{opacity:1;pointer-events:auto}`;
 

package/dist/components/{p-BDzlx2hB.js → p-DIMNEOTW.js}

@@ -97,7 +97,7 @@ const KritzelNumericInput = /*@__PURE__*/ proxyCustomElement(class KritzelNumeri
         this.valueChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: 'eb766b22717d856d096bd1a4a44279f6ac994892' }, h("div", { key: '2394e2b2af48f560e77e7a37b34d00656b0dd344', class: "input-container" }, this.label && h("label", { key: 'd8889aa93d4a86fa841f4da1f0b97411ab039cb1', class: "input-label" }, this.label), h("div", { key: 'b55ae2edf164cdfcdda356119b148c8bfb8fbd24', class: "input-wrapper" }, h("input", { key: 'ee1f1663f19c5ca66d64b6c5142005da318e03e4', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: '82e127b045e631616e6368c437473bbf9732445d', class: "spinner-buttons" }, h("button", { key: 'e7412dffccbdacbb5743ae2e2e7bd33c68e6fceb', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '7e471bf2bee5d4d161fea2e838b26e2f28bb84d9', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '69e4c80eed03b2ee2a044d07f35420b7618f4e75', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'a0c2350d48c398f7396cebd973438c0e390d0aff', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: 'c1f6264d187936d5eb0cc43c0275dc2e2c93b854', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'facbdd171b43868ec41b469b0d11d6c9bfcec3aa', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '8901e0b56ccbc344420483a4a56663f7cd74d9e8' }, h("div", { key: '5f3d6b5c56007e11383aa69f60f22031b0e8f332', class: "input-container" }, this.label && h("label", { key: '2cb102a5b6c16d068f4f304fbcc6241f79fc0ce8', class: "input-label" }, this.label), h("div", { key: '96441095acc3d9a8e77b6d2bac2ceda683c9c976', class: "input-wrapper" }, h("input", { key: '523a5485111077e20faded235df6362e5ea9cfd4', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: '2071e98125a8d014513e93052bd8c1fee17932a5', class: "spinner-buttons" }, h("button", { key: '12422e5285dfb532dbbb6eb1a36dbcb3de50f2bc', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '49ad5625c80fae6706ba4ab91f47bd550481ef74', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'ff7d19b61baeb5ba58bb60f2cc629bcec6eb4411', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'e4fec28e4fc997e007127f2b30b00cc752433221', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '27bf06cde8de11f4a97090911afd6b8993463112', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'ed7071dd79bfe509ebb319ce43ecb3e982dd4157', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get watchers() { return {
         "value": [{

package/dist/components/{p-C4NrrUfN.js → p-DSOc0eIT.js}

@@ -39,7 +39,7 @@ const KritzelInput = /*@__PURE__*/ proxyCustomElement(class KritzelInput extends
         this.valueChange.emit(input.value);
     };
     render() {
-        return (h(Host, { key: 'a59aa026922a3267ec7e6177973e80edfa97202c' }, h("div", { key: '46b1f191072bfb2a26579a329f8fd6ec86ca3ef9', class: "input-container" }, this.label && h("label", { key: '5409f811792034be56c3269b31ff374d8ed33de2', class: "input-label" }, this.label), h("div", { key: 'f51219b2a6384aeee63a7c8214821abd853a0ea5', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '05c93a526aa2f2d757a7c139fa3a47d84a4e2d95', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '91b60b25a7ff750720ff1961e224a035a2d86096', class: "input-suffix" }, this.suffix)))));
+        return (h(Host, { key: '46a0a48902a06ad85edcbaad3679ce3fe9ba850c' }, h("div", { key: 'a6beaf920614aa959d2fbd68b7268afba8637358', class: "input-container" }, this.label && h("label", { key: 'ca6d3fb3c22f1540795dbb0695ddd9b87cc05eee', class: "input-label" }, this.label), h("div", { key: '78d116e82531a9cca996d594792245449bcaf9c8', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '0d10d6356dea3a11338172bbe8c3c878eefcc708', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '0e6166ba8728efc1035302d7fb048306efbe5a68', class: "input-suffix" }, this.suffix)))));
     }
     static get watchers() { return {
         "value": [{

package/dist/components/{p-D5jf8wAu.js → p-DXcjIb_a.js}

@@ -91,16 +91,16 @@ const KritzelAvatar = /*@__PURE__*/ proxyCustomElement(class KritzelAvatar exten
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (h(Host, { key: 'a25cae3d0597e53606a00855e3175c89ff90d58e', style: containerStyles, class: {
+        return (h(Host, { key: '116725d55e4443e80216b3b3251e957d2009b43e', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'c3288f0ba9e0d8876403244fe3942dd91e685a79', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'd70ad4eb484404b18c13e066e8c10b3c86918ee5', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (h("span", { key: 'ae0ca459b87e90a1f67abe747b75d8dd61247ead', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '2a60a0347ae21732828920339f53803330c9c6c6', class: "avatar-default" }, h("svg", { key: 'ee057dc02ae61206164775b35ad1408fe04dfed9', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '2190046ba2e2c659d47f8a7f4a12bb10ae626f07', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (h("span", { key: '21a9022cffdb69e0c3626e513cb3c036a9d3a16d', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '43e676af007bf254b1921f3efcbc7fff4e204359', class: "avatar-default" }, h("svg", { key: 'a7378795539a902e28ca644a80f1ca00cc9f818a', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '31548a495a86f033325c98cfcc0ae398b6bb8281', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get watchers() { return {
         "user": [{