kritzel-stencil 0.4.6 → 0.4.8

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

@@ -243,6 +243,7 @@ export class KritzelEditor {
     isEditorVisible = false;
     activeNotification;
     isNotificationDismissing = false;
+    contextMenuState;
     normalizedControls = [];
     notificationDismissTimeout;
     notificationDismissAnimationTimeout;
@@ -712,6 +713,22 @@ export class KritzelEditor {
         this.activeNotification = event.detail;
         this.scheduleNotificationDismiss();
     }
+    handleContextMenuStateChange(event) {
+        event.stopPropagation();
+        this.contextMenuState = event.detail.isVisible ? event.detail : undefined;
+    }
+    handleContextMenuActionSelected(event) {
+        const contextMenuState = this.contextMenuState;
+        if (!contextMenuState || !event.detail.action) {
+            void this.hideContextMenu();
+            return;
+        }
+        event.detail.action({
+            x: contextMenuState.worldPosition.x,
+            y: contextMenuState.worldPosition.y,
+        }, contextMenuState.objects);
+        void this.hideContextMenu();
+    }
     handleNotificationHoverChange(event) {
         event.stopPropagation();
         this.isNotificationHovered = event.detail;
@@ -1016,36 +1033,41 @@ export class KritzelEditor {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '0fea11ea16e8baca0a7ecbd22c8025b47d451ac0' }, h("div", { key: 'd2ed05c8a6ecbe5b3cc4fc8bc12affefc1c15976', class: "editor-content", style: {
+        return (h(Host, { key: 'ab06876e3a07e97c3788113ffd0483bbb2819d5b' }, h("div", { key: 'e393eacfad2b224a720e5a97b047af8dd3ce97a5', 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: '3dfab068157d0091834c80d901262228b4f63546', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'e70f2a26a371a13c771d2b45f12fbd7f41fa7f9a', 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: 'f0e4851612bac461d97d16c0f23aeefbd1a220e4', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '633dcabf1875a0af0399807f111d19e8e1d2781e', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: '67336263f6de75f03116d751157b78b8f42649c8', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'b0316aa4e37283d1de8a969c07523c28408ce474', notification: this.activeNotification, locale: this.locale, onDismiss: this.dismissNotification, onHoverChange: event => this.handleNotificationHoverChange(event) })))), h("kritzel-engine", { key: '6e9c047b04221332ffb5a50970d8f37592db4b5d', ref: el => {
+            } }, h("div", { key: 'd9dcbd6859bea28d75c7f8b0cc26ea3ba58b2433', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: '945953a6c95520316c4e0f35503a824414bd3c7a', 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: '8b345bf6ce0ec33ca35f1f630af2050b95bc6b74', visible: this.isBackToContentButtonVisible, text: this.resolvedTerms['backToContent.label'] ?? 'Back to content', onBackToContent: () => this.backToContent() })), this.activeNotification && (h("div", { key: '1b965de38a7f1f40d5d91431801e873289416924', class: "top-center-notification-layer", role: "presentation" }, h("div", { key: 'f165dc7acc5e1bc7923fec217ebc16fe4a3f2ece', class: { 'top-center-notification-container': true, 'is-dismissing': this.isNotificationDismissing }, role: "presentation" }, h("kritzel-notification-card", { key: 'c5cf7edc1f921e35310c89449f5a043dda171a04', 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: 'fc3417276f0034e7fc7e8360d3f3ce57106146b2', 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-engine", { key: '0c9df0386d38a87f50d324cfc51307a1cb947a58', 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) }), h("kritzel-controls", { key: 'a664a3b51842238e092835ba6e68b63409829dba', 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, 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) }), h("kritzel-controls", { key: '46d8e9c45c7bed24fc02d17c8fef836d596088d7', 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: '7da601af2f3e5be020b2dacac9ed377660488005', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: 'e764e09ab790810620527618e40c298495c56b72', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'c846bd187a9c3d4e4c9034a605ea77500a815cd2', class: "top-right-buttons" }, h("kritzel-settings", { key: '1b0d3c6acda30f6222dcf13f131d4cad87ced86b', 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: 'e3ef94509a82fe435f827b66cf1813969b7dec66', class: "bottom-left-buttons" }, h("kritzel-zoom-panel", { key: '4e6cbdf85f550e6e3037dce3b910c0582ea0320b', visible: this.isZoomPanelVisible, disabled: !this.isZoomingEnabled, zoomPercent: this.currentZoomPercent, terms: this.resolvedTerms, onZoomIn: () => this.zoomIn(), onZoomOut: () => this.zoomOut() })), h("div", { key: 'a62df7f8a68cbed728b701894a5284c2bff39e1e', class: "top-right-buttons" }, h("kritzel-settings", { key: '0b6daf9ff43551df9f86431d398a32913a845925', 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: '7a81c4ff0c57159e892f393649fff5a0199b9875', 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: '29d02ffd3358fe91d27435cc3fdd5f8ac2ad7cf5', 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: '4bde72a3369f8bc1b61a8c765c7a9f95204316d6', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'f03fd82e0adbd13746197e2f850cd378657aa2de', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '6b9e5ad046b65f874b0dc11e65264f998f8ce97c', 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: '729ca599e46654bc1429b5d91ff73f26d9b6e7bb', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: '84c07268072418a82cf504f16803c59a1e37c0ae', user: this.user, terms: this.resolvedTerms, onClick: () => this.currentUserDialogRef?.open() }), shouldShowCurrentUser && (h("kritzel-current-user-dialog", { key: '55189e3da7899628b252e7995b20bc422fce2d5c', ref: el => {
                 if (el) {
                     this.currentUserDialogRef = el;
                     this.currentUserDialogRef.addEventListener('logoutRequest', this.handleCurrentUserLogout);
                 }
-            }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (h("kritzel-button", { key: '41adb50a6e861c57621d0ac65cbf5c8c152c096d', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: 'cc62a0b8a6af7d54637783f4138b7f5283e0ff58', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '4239378411242077f1c44500e17cf9118842f44e', ref: el => {
+            }, user: this.user, terms: this.resolvedTerms })), shouldShowLoginButton && (h("kritzel-button", { key: 'a55d85769bad635fcc7934f584bf1bf74c1e7ea6', onButtonClick: () => this.loginDialogRef?.open() }, this.resolvedTerms['login.dialogTitle'] ?? 'Sign in')), h("kritzel-more-menu", { key: '67dd879ec3c55c98e32f6112ca53d925f47b56b4', items: this.moreMenuItems, visible: this.isMoreMenuVisible, terms: this.resolvedTerms }), h("kritzel-share-dialog", { key: '5f13130099110eb472022099219e15877ceceb57', 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: 'c68ce90d2cc0dc96eeafd36355b91e19f921d8f7', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, terms: this.resolvedTerms, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'cda0fcdcad75de8730ce10bda425cc0fbe01429a', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -1882,6 +1904,7 @@ export class KritzelEditor {
             "isEditorVisible": {},
             "activeNotification": {},
             "isNotificationDismissing": {},
+            "contextMenuState": {},
             "normalizedControls": {}
         };
     }

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

@@ -254,6 +254,8 @@ export class KritzelEngine {
     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. */
@@ -446,6 +448,7 @@ export class KritzelEngine {
     }
     handleLongPress(ev) {
         this.contextMenuHandler.handleContextMenu(ev.detail);
+        this.emitContextMenuStateChange();
     }
     handleContextMenu(ev) {
         if (ev.cancelable) {
@@ -458,6 +461,7 @@ export class KritzelEngine {
             return;
         }
         this.contextMenuHandler.handleContextMenu(ev);
+        this.emitContextMenuStateChange();
     }
     handleResize() {
         this.viewport.handleResize();
@@ -699,6 +703,7 @@ export class KritzelEngine {
         this.core.store.objects?.clearLocalSelectionBox();
         this.core.store.state.isSelecting = false;
         this.core.store.state.isEnabled = true;
+        this.emitContextMenuStateChange();
         this.core.rerender();
     }
     /**
@@ -712,6 +717,7 @@ export class KritzelEngine {
      */
     async openContextMenu(options) {
         this.contextMenuHandler.open(options);
+        this.emitContextMenuStateChange();
     }
     /**
      * Retrieves a canvas object by its unique ID.
@@ -1829,7 +1835,6 @@ export class KritzelEngine {
     viewport;
     contextMenuHandler;
     keyHandler;
-    contextMenuElement = null;
     _lastHadSelectionGroup = false;
     _isViewportReady = false;
     _isYjsInitialized = false;
@@ -1868,6 +1873,22 @@ export class KritzelEngine {
         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]) => {
@@ -1988,6 +2009,10 @@ export class KritzelEngine {
         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();
     }
@@ -2391,7 +2416,9 @@ export class KritzelEngine {
                 this.emitObjectsInViewportChange();
             }
         }
-        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: {
+        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", style: {
+                color: 'var(--kritzel-global-text-primary)',
+            } }, 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',
@@ -2574,6 +2601,7 @@ export class KritzelEngine {
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
+                    color: 'var(--kritzel-global-text-primary)',
                 } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isSelected: ", object.isSelected ? 'true' : 'false'), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isInteractive: ", object.isInteractive ? 'true' : 'false'))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
@@ -2774,8 +2802,12 @@ export class KritzelEngine {
                     strokeDasharray: data.dashArray,
                     strokeLinecap: 'round',
                 } }))), h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
-                    fill: isActiveSnap ? 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))' : 'rgba(59, 130, 246, 0.18)',
-                    stroke: isActiveSnap ? 'var(--kritzel-snap-indicator-stroke, #007bff)' : 'rgba(59, 130, 246, 0.5)',
+                    fill: isActiveSnap
+                        ? 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))'
+                        : 'var(--kritzel-snap-indicator-fill-inactive, var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.18)))',
+                    stroke: isActiveSnap
+                        ? 'var(--kritzel-snap-indicator-stroke, #007bff)'
+                        : 'var(--kritzel-snap-indicator-stroke-inactive, var(--kritzel-snap-indicator-stroke, rgba(59, 130, 246, 0.5)))',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
         })(), (() => {
@@ -2822,20 +2854,7 @@ export class KritzelEngine {
                     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 is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }
@@ -3779,6 +3798,28 @@ export class KritzelEngine {
                         }
                     }
                 }
+            }, {
+                "method": "contextMenuStateChange",
+                "name": "contextMenuStateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when context-menu visibility, items, or position changes."
+                },
+                "complexType": {
+                    "original": "KritzelContextMenuState",
+                    "resolved": "KritzelContextMenuState",
+                    "references": {
+                        "KritzelContextMenuState": {
+                            "location": "import",
+                            "path": "../../../interfaces/context-menu-state.interface",
+                            "id": "src/interfaces/context-menu-state.interface.ts::KritzelContextMenuState",
+                            "referenceLocation": "KritzelContextMenuState"
+                        }
+                    }
+                }
             }, {
                 "method": "loadingChange",
                 "name": "loadingChange",

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

@@ -19,7 +19,7 @@ export 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 is() { return "kritzel-watermark"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js

@@ -81,16 +81,16 @@ export class KritzelAvatar {
             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 is() { return "kritzel-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-button/kritzel-button.js

@@ -15,11 +15,11 @@ export class KritzelButton {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Host, { key: 'ee7da1d8d86cdd6f920d15642203265cc93cda4e' }, h("button", { key: '15b1f11be5157c70ef5a4b3cd917bacb8f90ee4a', type: this.type, class: {
+        return (h(Host, { key: 'b9de2a1261ca0cb491f6980db6a596c48fa45b3a' }, h("button", { key: 'a9507ea0f6a1d9fcb19a7df16bea54cc0ead24f9', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8500172bd4540f4fa9c5e629d1ceb1816dcf556a' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8449a26d4f9fe0226c6150a6639c522486b59780' }))));
     }
     static get is() { return "kritzel-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-color/kritzel-color.js

@@ -38,13 +38,13 @@ export class KritzelColorComponent {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (h(Host, { key: 'a898705a76a25b051b046cb3d5274c1701482a4c' }, h("div", { key: '7d5ce83a17f710a1d808ff7d572b75585caada72', class: "checkerboard-bg", style: {
+        return (h(Host, { key: 'e39c77c55942b9c615e404efabf4939b2cf05a34' }, h("div", { key: 'ac343295592ea80ca7d3da61ca1244dd1aaa50db', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '8d318c989b7e69bc61dd653688a9e7480c4ee34d', class: {
+            } }, h("div", { key: '4c87934b3febd4c41874cd290d86a9a9a557e3e5', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {

package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js

@@ -33,7 +33,7 @@ export class KritzelColorPalette {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: '6e16fdd13c09ab2bcffb83df7ed861560f486518' }, h("div", { key: '48cc257315e13822dcc8bea314d26f1137d9b3cc', class: {
+        return (h(Host, { key: '16aa405a43b3943473e577c5a6ab86adf4ae1ba9' }, h("div", { key: 'f65bb286889700dc1f0e8d84ff59721071b7b73a', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {

package/dist/collection/components/shared/kritzel-font/kritzel-font.js

@@ -4,7 +4,7 @@ export class KritzelFont {
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: '57369ac95d0c99a52a8580e7659ec10e0e8ab38e' }, h("div", { key: 'e8f128fd7b8d26debb2c4ad2075b27f969d731bd', class: "font-preview", style: {
+        return (h(Host, { key: '054371cac30a2433611139a670406b0a1e3b99ff' }, h("div", { key: 'b4f2142b3cb31d067f39952a38b6f665f28f63bf', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color

package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js

@@ -17,7 +17,7 @@ export class KritzelFontSize {
     render() {
         const color = 'var(--kritzel-global-text-primary)';
         const sizes = this.sizes ?? [];
-        return (h(Host, { key: '298b8c232c4d96583f4899efea86482ae8ebd319' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: '56eb19367abe312bac3b626cfcae3b1ff6e90d21' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));

package/dist/collection/components/shared/kritzel-input/kritzel-input.js

@@ -28,7 +28,7 @@ export class KritzelInput {
         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 is() { return "kritzel-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js

@@ -90,15 +90,15 @@ export class KritzelMasterDetail {
         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 is() { return "kritzel-master-detail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-menu/kritzel-menu.js

@@ -51,7 +51,7 @@ export class KritzelMenu {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: '9edadb795e13a5242a0a086bd78c21f0f420e88c', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '4925a8698c1ac61787ba8c44beeed46461c62625', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (h(Host, { key: '27a90a3a8549517a2d6e341a5da13496bf714970', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'c0c2351fac389f6676b38481eaacee553ca6867a', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
     static get is() { return "kritzel-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js

@@ -90,12 +90,12 @@ export class KritzelMenuItem {
         ];
     }
     render() {
-        return (h(Host, { key: '89e05e4ec01b4de48019a2459f625e34669b8429', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(Host, { key: '9d6653a630da5a3da38291d89d6d7d59d6994e02', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, h("div", { key: '5de01524315482194c26e4bd4969f2ead4d852ec', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: '48a1678296e672c6c03fb3e1473c42d3a246d481', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get is() { return "kritzel-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js

@@ -86,7 +86,7 @@ export class KritzelNumericInput {
         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 is() { return "kritzel-numeric-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js

@@ -22,7 +22,7 @@ export class KritzelOpacitySlider {
     }
     render() {
         const percentage = this.getPercentage();
-        return (h(Host, { key: 'a175945928dac5ae5b4464c0b11c4d812f8a3ef6' }, h("div", { key: 'a045d452d459577f8d657e00dd9189797dd4de66', class: "opacity-container" }, h("div", { key: '11a4217a4b6e1f0b1981a8fd8e03f505a9d4a3b5', class: "slider-wrapper" }, h("input", { key: '2cbf72a10026c4201727208230b8832ea2309a76', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+        return (h(Host, { key: '2dadd8a7c4d1af748e91a6005433288ab231f2e8' }, h("div", { key: '65ae90d95bffff244d97329754cf0cb8f73331fa', class: "opacity-container" }, h("div", { key: '90e95347f7015882112f0653a25347e715233227', class: "slider-wrapper" }, h("input", { key: '15836bc089c1725062016677d3b95384d1958431', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
                 '--slider-progress': `${percentage}%`,
                 '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
             } })))));

package/dist/collection/components/shared/kritzel-portal/kritzel-portal.js

@@ -277,7 +277,7 @@ export class KritzelPortal {
         this.portal.style.visibility = 'visible';
     }
     render() {
-        return (h(Host, { key: 'f919789973cd7828b393028171594d481113fb45', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '21b837fe7162c0a0a8d01bb5c41d3736a265714c' })));
+        return (h(Host, { key: '72273b4c7811473072ee27668836a5ddddcfd618', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'b4f37ca27c47ab950a4639162fa31a3c2362d6f7' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.js

@@ -21,7 +21,7 @@ export class KritzelSlideToggle {
         }
     };
     render() {
-        return (h(Host, { key: 'e132e2614dcf2c7afc51e8aa064de36ea4a84710', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: 'c7857aa2b747aba1851f7df1bde3d0469898d32a', class: "toggle-track" }, h("div", { key: '6beb1821fdc265b4fb5d0a6813a33fb768366984', class: "toggle-thumb" }))));
+        return (h(Host, { key: '00160c9cfdafa0d53f3acfb1fb235b29abf2622a', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: '385008948ffbdc0f26249d2d833aae8f04eeb6a0', class: "toggle-track" }, h("div", { key: '43929e94335589feb24ee45f1c34a270653dd412', class: "toggle-thumb" }))));
     }
     static get is() { return "kritzel-slide-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js

@@ -82,7 +82,7 @@ export class KritzelSplitButton {
         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 is() { return "kritzel-split-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js

@@ -9,7 +9,7 @@ export class KritzelStrokeSize {
     }
     render() {
         const sizes = this.sizes ?? [];
-        return (h(Host, { key: 'a097daf527501b07874b449ac75ecb765cdd81b2' }, h("div", { key: '0e2b3ade9bae7d4f97d5de8ecd44424fe914f3e7', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: 'ba181d798d2bf7b60308746635d2077ce1353b83' }, h("div", { key: '048fc8934190359b9337747567844ca88925a6ce', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));

package/dist/collection/components/shared/kritzel-sync-indicator/kritzel-sync-indicator.js

@@ -5,7 +5,7 @@ export class KritzelSyncIndicator {
     /** 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 is() { return "kritzel-sync-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js

@@ -128,14 +128,14 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'c0a4b682b3279b8c830dfa758284979e91c0ce2a', style: {
+        return (h(Host, { key: '227146703158aa65ecffcce348e568d559cee829', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, h("div", { key: '09fd259d19d42db513161b645aa19206ae81c76a', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'f743c0ca8c415d71e0af53cdab8304df60dd9a37' }))));
+            } }, h("div", { key: '573e97ed81920066e8fbf50f790224c23b37ec21', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'c489b45928cf6720c6827df73b9eedf08bc9d5e2' }))));
     }
     static get is() { return "kritzel-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js

@@ -16,7 +16,7 @@ export class KritzelBackToContent {
         this.backToContent.emit();
     };
     render() {
-        return (h(Host, { key: '9a087efd5b544a5633b89fcdfa9609a207eb70fc' }, h("button", { key: 'd02c237dd9fe08a5e65b2c72cc47f4444b47338c', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '3345e1bd20a1a4e2f6e46b1a365e3405a8304f4e', name: "chevrons-left" }))));
+        return (h(Host, { key: '86a94bdc5bb02977214f999b7b880ce3193b6d8f' }, h("button", { key: '6a07c13c9986ebef6100140f7e702a1dfb5c2033', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: 'ebadc99b15f2f015ada8795fa05a3a64ccac9cb5', name: "chevrons-left" }))));
     }
     static get is() { return "kritzel-back-to-content"; }
     static get encapsulation() { return "shadow"; }