kritzel-stencil 0.1.15 → 0.1.17

package/dist/cjs/{default-line-tool.config-DuwiflC4.js → default-line-tool.config-D-Ru2SSK.js}

@@ -397,6 +397,13 @@ class KritzelBaseObject {
     edit(_event) {
         // This method can be overridden by subclasses to handle edit actions.
     }
+    /**
+     * Called after properties are updated via updateObject.
+     * Override in subclasses to perform custom logic when specific properties change.
+     */
+    onAfterUpdate(_changedProperties) {
+        // Default implementation does nothing
+    }
     hitTest(_x, _y) {
         return true; // Default implementation, can be overridden by subclasses
     }
@@ -411,6 +418,32 @@ class KritzelBaseObject {
     }
 }
 
+class KritzelDevicesHelper {
+    static isTouchDevice() {
+        return window.matchMedia('(any-pointer: coarse)').matches;
+    }
+    static isAndroid() {
+        return /android/i.test(navigator.userAgent);
+    }
+    static isIOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent);
+    }
+    static detectOS() {
+        if (this.isIOS()) {
+            return 'iOS';
+        }
+        else if (this.isAndroid()) {
+            return 'Android';
+        }
+        else {
+            return 'Other';
+        }
+    }
+    static isFirefox() {
+        return /firefox/i.test(navigator.userAgent);
+    }
+}
+
 class KritzelKeyboardHelper {
     static forceHideKeyboard() {
         if (document.activeElement instanceof HTMLElement) {
@@ -440,49 +473,82 @@ class KritzelKeyboardHelper {
             meta.setAttribute('content', newContent);
         }
     }
+    static isTextInputFocused() {
+        const activeElement = document.activeElement;
+        if (!activeElement)
+            return false;
+        // Check for standard text input elements
+        if (activeElement instanceof HTMLInputElement) {
+            const textTypes = ['text', 'password', 'email', 'number', 'search', 'tel', 'url'];
+            return textTypes.includes(activeElement.type);
+        }
+        if (activeElement instanceof HTMLTextAreaElement) {
+            return true;
+        }
+        // Check for contenteditable elements
+        if (activeElement instanceof HTMLElement && activeElement.isContentEditable) {
+            return true;
+        }
+        return false;
+    }
     static onKeyboardVisibleChanged(callback) {
+        const os = KritzelDevicesHelper.detectOS();
+        if (os !== 'iOS' && os !== 'Android') {
+            return () => { };
+        }
+        // Use VirtualKeyboard API if available (modern browsers)
+        if ('virtualKeyboard' in navigator) {
+            const vk = navigator.virtualKeyboard;
+            const onGeometryChange = () => {
+                const isOpen = vk.boundingRect.height > 0;
+                callback(isOpen);
+            };
+            vk.addEventListener('geometrychange', onGeometryChange);
+            return () => vk.removeEventListener('geometrychange', onGeometryChange);
+        }
+        // Fallback: combine focus detection with viewport changes
         if ('visualViewport' in window) {
             const VIEWPORT_VS_CLIENT_HEIGHT_RATIO = 0.75;
-            const onResize = (event) => {
-                const target = event.target;
-                const isOpen = (target.height * target.scale) / window.screen.height < VIEWPORT_VS_CLIENT_HEIGHT_RATIO;
+            let initialHeight = window.visualViewport.height;
+            const checkKeyboardState = () => {
+                const viewportRatio = (window.visualViewport.height * window.visualViewport.scale) / initialHeight;
+                const viewportShrunk = viewportRatio < VIEWPORT_VS_CLIENT_HEIGHT_RATIO;
+                const isOpen = viewportShrunk && this.isTextInputFocused();
                 callback(isOpen);
             };
+            const onResize = () => {
+                checkKeyboardState();
+            };
+            const onFocusIn = () => {
+                // Update initial height when focus changes to capture pre-keyboard state
+                if (!this.isTextInputFocused()) {
+                    initialHeight = window.visualViewport.height;
+                }
+                // Small delay to allow viewport to adjust
+                setTimeout(checkKeyboardState, 100);
+            };
+            const onFocusOut = () => {
+                // Keyboard closes when focus leaves text inputs
+                setTimeout(() => {
+                    if (!this.isTextInputFocused()) {
+                        callback(false);
+                        // Reset initial height after keyboard closes
+                        setTimeout(() => {
+                            initialHeight = window.visualViewport.height;
+                        }, 300);
+                    }
+                }, 100);
+            };
             window.visualViewport.addEventListener('resize', onResize);
-            return () => window.visualViewport.removeEventListener('resize', onResize);
-        }
-        else {
-            // Fallback for older browsers does not provide a reliable event-based mechanism.
-            console.warn('Listening for keyboard visibility changes is not reliably supported in this browser.');
-            // Return a no-op cleanup function.
-            return () => { };
-        }
-    }
-}
-
-class KritzelDevicesHelper {
-    static isTouchDevice() {
-        return window.matchMedia('(any-pointer: coarse)').matches;
-    }
-    static isAndroid() {
-        return /android/i.test(navigator.userAgent);
-    }
-    static isIOS() {
-        return /iPad|iPhone|iPod/.test(navigator.userAgent);
-    }
-    static detectOS() {
-        if (this.isIOS()) {
-            return 'iOS';
-        }
-        else if (this.isAndroid()) {
-            return 'Android';
-        }
-        else {
-            return 'Other';
+            document.addEventListener('focusin', onFocusIn);
+            document.addEventListener('focusout', onFocusOut);
+            return () => {
+                window.visualViewport.removeEventListener('resize', onResize);
+                document.removeEventListener('focusin', onFocusIn);
+                document.removeEventListener('focusout', onFocusOut);
+            };
         }
-    }
-    static isFirefox() {
-        return /firefox/i.test(navigator.userAgent);
+        return () => { };
     }
 }
 
@@ -14089,7 +14155,6 @@ const lightTheme = {
         dividerColor: '#e0e0e0',
         focusColor: '#007acc',
         focusRingColor: 'rgba(0, 122, 255, 0.3)',
-        pointerCursor: 'pointer',
         hoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
         iconColor: 'currentColor',
         scrollbarThumbColor: '#ebebeb',
@@ -14120,17 +14185,11 @@ const lightTheme = {
     contextMenu: {
         backgroundColor: '#ffffff',
         border: '1px solid #ebebeb',
-        borderRadius: '12px',
         boxShadow: '0 1px 6px rgba(0, 0, 0, 0.12)',
         itemActiveBackgroundColor: 'hsl(0, 0%, 0%, 8.6%)',
-        itemBorderRadius: '12px',
         itemColor: '#333333',
         itemDisabledColor: '#aaaaaa',
-        itemFontSize: '14px',
-        itemGap: '8px',
         itemHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
-        itemPadding: '8px',
-        padding: '4px',
     },
     controls: {
         backgroundColor: '#ffffff',
@@ -14163,16 +14222,6 @@ const lightTheme = {
         selectedBackgroundColor: '#007bff1a',
         textColor: '#333333',
     },
-    editor: {
-        controlsBottom: '16px',
-        controlsTransform: 'translateX(-50%)',
-        controlsTransition: 'opacity 0.2s ease',
-        controlsTransitionDuration: '0.2s',
-        topLeftButtonsLeft: '16px',
-        topLeftButtonsTop: '16px',
-        topRightButtonsRight: '16px',
-        topRightButtonsTop: '16px',
-    },
     engine: {
         backgroundColor: '#ffffff',
     },
@@ -14208,27 +14257,17 @@ const lightTheme = {
     menu: {
         backgroundColor: '#ffffff',
         border: '1px solid #ebebeb',
-        borderRadius: '12px',
         boxShadow: '0 0 3px rgba(0, 0, 0, 0.08)',
-        gap: '4px',
-        itemBorderRadius: '12px',
         itemButtonHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
         itemChildOpenBackgroundColor: 'hsl(0, 0%, 0%, 3%)',
         itemColor: '#333333',
         itemEditingBackgroundColor: '#f0f0f0',
-        itemFontSize: '14px',
-        itemHeight: '40px',
         itemInputBorder: '1px solid #ccc',
-        itemInputHeight: '32px',
         itemInputSelectionColor: 'rgba(255, 255, 255, 0.16)',
         itemInputSelectionTextColor: '#000000',
-        itemMinHeight: '40px',
         itemOverlayBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
-        itemPadding: '8px',
         itemSelectedBackgroundColor: '#007aff',
         itemSelectedColor: '#ffffff',
-        padding: '8px',
-        width: '200px',
     },
     moreMenu: {
         buttonActiveBackgroundColor: '#e9e9e9',
@@ -14257,9 +14296,6 @@ const lightTheme = {
         thumbColor: '#ffffff',
         trackColor: '#e0e0e0',
     },
-    portal: {
-        maxHeight: '300px',
-    },
     settings: {
         contentHeadingColor: '#000000',
         contentTextColor: '#333333',
@@ -14272,14 +14308,10 @@ const lightTheme = {
         selectedBackgroundColor: '#ebebeb',
     },
     slideToggle: {
-        borderRadius: '11px',
-        height: '22px',
         thumbColor: '#fff',
         thumbSize: '18px',
         trackCheckedColor: '#007AFF',
         trackColor: '#ccc',
-        transitionDuration: '0.2s',
-        width: '40px',
     },
     splitButton: {
         backgroundColor: '#ffffff',
@@ -14293,20 +14325,14 @@ const lightTheme = {
         hoverBackgroundColor: '#ebebeb',
         selectedBackgroundColor: '#ebebeb',
     },
-    submenu: {
-        gap: '4px',
-    },
     tooltip: {
         backgroundColor: '#ffffff',
         border: '1px solid #ebebeb',
-        borderRadius: '16px',
         boxShadow: '0 1px 6px rgba(0, 0, 0, 0.12)',
         color: '#000000',
-        padding: '12px',
     },
     utilityPanel: {
         backgroundColor: '#e2e2e2',
-        buttonBorderRadius: '8px',
         buttonColor: '#333333',
         buttonHoverBackgroundColor: 'hsl(0, 0%, 0%, 4.3%)',
         separatorColor: 'hsl(0, 0%, 0%, 8%)',
@@ -14323,7 +14349,6 @@ const darkTheme = {
         dividerColor: '#3a3a3a',
         focusColor: '#4da3ff',
         focusRingColor: 'rgba(0, 122, 255, 0.4)',
-        pointerCursor: 'pointer',
         hoverBackground: 'hsl(0, 0%, 100%, 8%)',
         iconColor: 'currentColor',
         scrollbarThumbColor: '#555555',
@@ -14354,17 +14379,11 @@ const darkTheme = {
     contextMenu: {
         backgroundColor: '#2a2a2a',
         border: '1px solid #3a3a3a',
-        borderRadius: '12px',
         boxShadow: '0 1px 8px rgba(0, 0, 0, 0.4)',
         itemActiveBackgroundColor: 'hsl(0, 0%, 100%, 12%)',
-        itemBorderRadius: '12px',
         itemColor: '#e0e0e0',
         itemDisabledColor: '#666666',
-        itemFontSize: '14px',
-        itemGap: '8px',
         itemHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
-        itemPadding: '8px',
-        padding: '4px',
     },
     controls: {
         backgroundColor: '#2a2a2a',
@@ -14379,9 +14398,7 @@ const darkTheme = {
     dialog: {
         backdropColor: 'rgba(0, 0, 0, 0.6)',
         backgroundColor: '#2a2a2a',
-        bodyPadding: '16px',
         border: '1px solid #3a3a3a',
-        borderRadius: '16px',
         boxShadow: '0 4px 24px rgba(0, 0, 0, 0.5)',
         closeButtonActiveBackground: 'hsl(0, 0%, 100%, 12%)',
         closeButtonBackground: 'transparent',
@@ -14391,8 +14408,6 @@ const darkTheme = {
         footerBorder: '1px solid #3a3a3a',
         headerBorder: '1px solid #3a3a3a',
         titleColor: '#ffffff',
-        titleFontSize: '18px',
-        titleFontWeight: '600',
     },
     dropdown: {
         accentColor: '#0A84FF',
@@ -14400,16 +14415,6 @@ const darkTheme = {
         selectedBackgroundColor: 'rgba(10, 132, 255, 0.2)',
         textColor: '#e0e0e0',
     },
-    editor: {
-        controlsBottom: '16px',
-        controlsTransform: 'translateX(-50%)',
-        controlsTransition: 'opacity 0.2s ease',
-        controlsTransitionDuration: '0.2s',
-        topLeftButtonsLeft: '16px',
-        topLeftButtonsTop: '16px',
-        topRightButtonsRight: '16px',
-        topRightButtonsTop: '16px',
-    },
     engine: {
         backgroundColor: '#1a1a1a',
     },
@@ -14445,33 +14450,22 @@ const darkTheme = {
     menu: {
         backgroundColor: '#2a2a2a',
         border: '1px solid #3a3a3a',
-        borderRadius: '12px',
         boxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
-        gap: '4px',
-        itemBorderRadius: '12px',
         itemButtonHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
         itemChildOpenBackgroundColor: 'hsl(0, 0%, 100%, 6%)',
         itemColor: '#e0e0e0',
         itemEditingBackgroundColor: '#3a3a3a',
-        itemFontSize: '14px',
-        itemHeight: '40px',
         itemInputBorder: '1px solid #4a4a4a',
-        itemInputHeight: '32px',
         itemInputSelectionColor: 'rgba(255, 255, 255, 0.2)',
         itemInputSelectionTextColor: '#ffffff',
-        itemMinHeight: '40px',
         itemOverlayBackgroundColor: 'hsl(0, 0%, 0%, 20%)',
-        itemPadding: '8px',
         itemSelectedBackgroundColor: '#0A84FF',
         itemSelectedColor: '#ffffff',
-        padding: '8px',
-        width: '200px',
     },
     moreMenu: {
         buttonActiveBackgroundColor: '#444444',
         buttonBackgroundColor: '#2a2a2a',
         buttonBorder: '1px solid #3a3a3a',
-        buttonBorderRadius: '12px',
         buttonBoxShadow: '0 0 6px rgba(0, 0, 0, 0.3)',
         buttonColor: '#ffffff',
         buttonHoverBackgroundColor: '#3b3b3b',
@@ -14494,9 +14488,6 @@ const darkTheme = {
         thumbColor: '#ffffff',
         trackColor: '#4a4a4a',
     },
-    portal: {
-        maxHeight: '300px',
-    },
     settings: {
         contentHeadingColor: '#ffffff',
         contentTextColor: '#e0e0e0',
@@ -14509,14 +14500,10 @@ const darkTheme = {
         selectedBackgroundColor: '#3a3a3a',
     },
     slideToggle: {
-        borderRadius: '11px',
-        height: '22px',
         thumbColor: '#ffffff',
-        thumbSize: '18px',
         trackCheckedColor: '#0A84FF',
         trackColor: '#4a4a4a',
         transitionDuration: '0.2s',
-        width: '40px',
     },
     splitButton: {
         backgroundColor: '#2a2a2a',
@@ -14530,20 +14517,14 @@ const darkTheme = {
         hoverBackgroundColor: '#3a3a3a',
         selectedBackgroundColor: '#3a3a3a',
     },
-    submenu: {
-        gap: '4px',
-    },
     tooltip: {
         backgroundColor: '#2a2a2a',
         border: '1px solid #3a3a3a',
-        borderRadius: '16px',
         boxShadow: '0 1px 8px rgba(0, 0, 0, 0.4)',
         color: '#ffffff',
-        padding: '12px',
     },
     utilityPanel: {
         backgroundColor: '#3a3a3a',
-        buttonBorderRadius: '8px',
         buttonColor: '#e0e0e0',
         buttonHoverBackgroundColor: 'hsl(0, 0%, 100%, 8%)',
         separatorColor: 'hsl(0, 0%, 100%, 12%)',
@@ -15101,6 +15082,12 @@ class KritzelPath extends KritzelBaseObject {
         const scaleY = height / this.height;
         this.width = width;
         this.height = height;
+        if (this.points.length === 1) {
+            const p = this.points[0];
+            const spreadX = Math.max(0, width - this.strokeWidth) / scaleX;
+            const spreadY = Math.max(0, height - this.strokeWidth) / scaleY;
+            this.points.push([p[0] + spreadX, p[1] + spreadY]);
+        }
         this.points = this.points.map(([x, y]) => [x * scaleX, y * scaleY]);
         this.d = this.generateSvgPath();
         this.width = Math.max(...this.points.map(p => p[0])) - Math.min(...this.points.map(p => p[0])) + this.strokeWidth;
@@ -15201,6 +15188,13 @@ class KritzelPath extends KritzelBaseObject {
         this._adjustedPoints = null;
         this._core.store.state.objects.update(this);
     }
+    onAfterUpdate(changedProperties) {
+        if (changedProperties.includes('strokeWidth')) {
+            this.d = this.generateSvgPath();
+            this.updateBoundingBox();
+            this._adjustedPoints = null;
+        }
+    }
     computeAdjustedPoints() {
         if (!this.points?.length) {
             return [];
@@ -15268,6 +15262,20 @@ class KritzelPath extends KritzelBaseObject {
         this.translateX = (this.x + this.translateX) / this.scale;
         this.translateY = (this.y + this.translateY) / this.scale;
     }
+    /**
+     * Updates width, height, x, y based on current points and strokeWidth.
+     * Does NOT modify translateX/translateY (use updateDimensions for initial setup).
+     */
+    updateBoundingBox() {
+        const minX = Math.min(...this.points.map(p => p[0])) - this.strokeWidth / 2;
+        const minY = Math.min(...this.points.map(p => p[1])) - this.strokeWidth / 2;
+        const maxX = Math.max(...this.points.map(p => p[0])) + this.strokeWidth / 2;
+        const maxY = Math.max(...this.points.map(p => p[1])) + this.strokeWidth / 2;
+        this.width = maxX - minX + this.lineSlack;
+        this.height = maxY - minY + this.lineSlack;
+        this.x = minX;
+        this.y = minY;
+    }
     generateSvgPath() {
         const stroke = this.getStrokeFromPoints(this.points, this.strokeWidth);
         return this.getSvgPathFromStroke(stroke);
@@ -17454,12 +17462,11 @@ class KritzelTextTool extends KritzelBaseTool {
             const clientY = event.clientY - this._core.store.offsetY;
             const viewportScale = this._core.store.state.scale;
             const lockScale = this._core.store.state.lockDrawingScale;
-            const divider = lockScale ? viewportScale : 1;
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily, lockScale ? 1 : viewportScale);
             text.fontColor = this.fontColor;
             text.opacity = this.opacity;
-            text.translateX = (clientX - this._core.store.state.translateX) / divider;
-            text.translateY = (clientY - this._core.store.state.translateY) / divider;
+            text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
+            text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
             text.zIndex = this._core.store.currentZIndex;
             this._core.store.state.objects.insert(text);
             this._core.rerender();
@@ -17492,12 +17499,11 @@ class KritzelTextTool extends KritzelBaseTool {
             const clientY = Math.round(activePointers[0].clientY - this._core.store.offsetY);
             const viewportScale = this._core.store.state.scale;
             const lockScale = this._core.store.state.lockDrawingScale;
-            const divider = lockScale ? viewportScale : 1;
             const text = KritzelText.create(this._core, this.fontSize, this.fontFamily, lockScale ? 1 : viewportScale);
             text.fontColor = this.fontColor;
             text.opacity = this.opacity;
-            text.translateX = (clientX - this._core.store.state.translateX) / divider;
-            text.translateY = (clientY - this._core.store.state.translateY) / divider;
+            text.translateX = (clientX - this._core.store.state.translateX) / viewportScale;
+            text.translateY = (clientY - this._core.store.state.translateY) / viewportScale;
             text.zIndex = this._core.store.currentZIndex;
             this._core.store.state.objects.insert(text);
             this._core.rerender();
@@ -17548,7 +17554,7 @@ KritzelIconRegistry.registerIcons({
     'image': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></svg>',
     'chevron-down': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',
     'chevron-up': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',
-    'chevron-left': '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>',
+    'chevron-left': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>',
     'chevron-right': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>',
     'chevrons-left': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-left-icon lucide-chevrons-left"><path d="m11 17-5-5 5-5"/><path d="m18 17-5-5 5-5"/></svg>',
     'copy': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
@@ -17744,7 +17750,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 const moveDeltaX = Math.abs(clientX - this.startX);
                 const moveDeltaY = Math.abs(clientY - this.startY);
                 const moveThreshold = 5;
-                if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
+                if (this.hasMoved || moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
                     // Check for anchor disconnect threshold on lines
                     this.checkAndDisconnectAnchors(clientX, clientY);
                     selectionGroup.move(clientX, clientY, this.dragStartX, this.dragStartY);
@@ -17770,7 +17776,7 @@ class KritzelMoveHandler extends KritzelBaseHandler {
                 const moveDeltaX = Math.abs(x - this.startX);
                 const moveDeltaY = Math.abs(y - this.startY);
                 const moveThreshold = 5;
-                if (moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
+                if (this.hasMoved || moveDeltaX > moveThreshold || moveDeltaY > moveThreshold) {
                     clearTimeout(this._core.store.state.longTouchTimeout);
                     // Check for anchor disconnect threshold on lines
                     this.checkAndDisconnectAnchors(x, y);

package/dist/cjs/index.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var defaultLineTool_config = require('./default-line-tool.config-DuwiflC4.js');
+var defaultLineTool_config = require('./default-line-tool.config-D-Ru2SSK.js');
 
 /**
  * BroadcastChannel sync provider for cross-tab synchronization