kritzel-stencil 0.1.16 → 0.1.17

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

@@ -418,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) {
@@ -447,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 () => { };
     }
 }
 
@@ -14126,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',
@@ -14169,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',
     },
@@ -14214,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',
@@ -14263,9 +14296,6 @@ const lightTheme = {
         thumbColor: '#ffffff',
         trackColor: '#e0e0e0',
     },
-    portal: {
-        maxHeight: '300px',
-    },
     settings: {
         contentHeadingColor: '#000000',
         contentTextColor: '#333333',
@@ -14278,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',
@@ -14299,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%)',
@@ -14359,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',
@@ -14384,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',
@@ -14396,8 +14408,6 @@ const darkTheme = {
         footerBorder: '1px solid #3a3a3a',
         headerBorder: '1px solid #3a3a3a',
         titleColor: '#ffffff',
-        titleFontSize: '18px',
-        titleFontWeight: '600',
     },
     dropdown: {
         accentColor: '#0A84FF',
@@ -14405,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',
     },
@@ -14450,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',
@@ -14499,9 +14488,6 @@ const darkTheme = {
         thumbColor: '#ffffff',
         trackColor: '#4a4a4a',
     },
-    portal: {
-        maxHeight: '300px',
-    },
     settings: {
         contentHeadingColor: '#ffffff',
         contentTextColor: '#e0e0e0',
@@ -14514,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',
@@ -14535,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%)',
@@ -15291,15 +15267,10 @@ class KritzelPath extends KritzelBaseObject {
      * Does NOT modify translateX/translateY (use updateDimensions for initial setup).
      */
     updateBoundingBox() {
-        const rotatedPoints = this.points.map(([x, y]) => {
-            const rotatedX = x * Math.cos(this.rotation) - y * Math.sin(this.rotation);
-            const rotatedY = x * Math.sin(this.rotation) + y * Math.cos(this.rotation);
-            return [rotatedX, rotatedY];
-        });
-        const minX = Math.min(...rotatedPoints.map(p => p[0] - this.strokeWidth / 2));
-        const minY = Math.min(...rotatedPoints.map(p => p[1] - this.strokeWidth / 2));
-        const maxX = Math.max(...rotatedPoints.map(p => p[0] + this.strokeWidth / 2));
-        const maxY = Math.max(...rotatedPoints.map(p => p[1] + this.strokeWidth / 2));
+        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;
@@ -17779,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);
@@ -17805,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-BXYWjUSM.js');
+var defaultLineTool_config = require('./default-line-tool.config-D-Ru2SSK.js');
 
 /**
  * BroadcastChannel sync provider for cross-tab synchronization

package/dist/cjs/kritzel-back-to-content_32.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-i21-qqbc.js');
-var defaultLineTool_config = require('./default-line-tool.config-BXYWjUSM.js');
+var defaultLineTool_config = require('./default-line-tool.config-D-Ru2SSK.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1173,7 +1173,7 @@ const KritzelDialog = class {
 };
 KritzelDialog.style = kritzelDialogCss();
 
-const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-controls-control-border-radius, 12px);overflow:visible;height:32px;width:100%;position:relative}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-controls-control-border-radius, 12px);border:none;background-color:var(--kritzel-controls-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-controls-background-color, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-controls-control-border-radius, 12px);box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
+const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-controls-control-border-radius, 12px);overflow:visible;height:32px;width:100%;position:relative}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-controls-control-border-radius, 12px);border:none;background-color:var(--kritzel-controls-background-color, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-controls-background-color, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-controls-control-border-radius, 12px);box-shadow:var(--kritzel-controls-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
 
 const KritzelDropdown = class {
     constructor(hostRef) {
@@ -1210,6 +1210,12 @@ const KritzelDropdown = class {
         this.evaluateSuffixContent();
         this.evaluatePrefixContent();
     }
+    disconnectedCallback() {
+        // Close menu when component is removed from DOM to prevent orphaned open dropdowns
+        if (this.isOpen) {
+            this.isOpen = false;
+        }
+    }
     handleDocumentClick(event) {
         if (this.isOpen && !this.el.contains(event.target)) {
             this.closeMenu();
@@ -1399,7 +1405,7 @@ const KritzelDropdown = class {
             'open-up': this.openDirection === 'up',
             'open-down': this.openDirection === 'down',
         };
-        return (index.h(index.Host, { key: '29d076eb2ef76527c0930ab82ace0d05c896ab6c' }, index.h("div", { key: '1afac5cc0b7f408849670b8cb62fe0bd0f3b27f1', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, index.h("slot", { key: '3cfcf787c3b3eedbd6bf30c7506a0a4912429672', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), index.h("div", { key: 'b88120ed3e44871220e6ba61e8bef457651a2086', class: "dropdown-container", style: { width: this.width } }, index.h("button", { key: '79082189066f3d0b4f5797420ec222847792fe52', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, index.h("span", { key: 'a490bb6689ec1820144fe82f6833bee82e6ead0e', class: "dropdown-trigger-label" }, this.getSelectedLabel()), index.h("span", { key: '8bd7768f6fdd3c507bbca54d7d135adabe04901f', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, index.h("svg", { key: 'e1b854d2c93e3067181108f8d782e1393ddb615c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: '3622cbf8964f4e50aa55be5209240dfd252f1d84', points: "6 9 12 15 18 9" }))))), index.h("slot", { key: 'b91317736904cbeee0f87058b822bd77c6b163ca', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), index.h("ul", { key: '0ca8690345974e9b7ad184f4c7ab7cf5367b183c', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index$1) => {
+        return (index.h(index.Host, { key: '83e46921e04c655ed185bfe3de524a61e9510447' }, index.h("div", { key: '251ee0af926e24e13a2b07fa6b8b41d02212434d', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, index.h("slot", { key: '2cf811d76e5e626d19aa746e4f59b4d25ca45ae0', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), index.h("div", { key: '1d54e16f12814c150d842266f6ee6ae8891a0130', class: "dropdown-container", style: { width: this.width } }, index.h("button", { key: '3c99b3dd4a25a59579eed072953c3d7f502f7a21', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, index.h("span", { key: '1bfa6da63ffdd6bf2b022f92425ce212e009d507', class: "dropdown-trigger-label" }, this.getSelectedLabel()), index.h("span", { key: 'e08ae142512344ffcd0ecfb477133a18fcfb3f34', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, index.h("svg", { key: '8386ae9c934762f8e054f42c580cf750c5a9440a', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: '024d4ecbc8a3ab9879edc02c890df7ceabef1f8a', points: "6 9 12 15 18 9" }))))), index.h("slot", { key: '028de1fa2049c7d682b967f34a3a5e9c39d32fe2', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), index.h("ul", { key: '51cd0ecefc1dcb0cd869d7e67c56f1944847efef', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index$1) => {
             const isSelected = option.value === this.internalValue;
             const isFocused = index$1 === this.focusedIndex;
             const optionClasses = {
@@ -23717,7 +23723,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.1.16';
+const KRITZEL_VERSION = '0.1.17';
 
 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:500;color:var(--kritzel-settings-label-color, #333333);margin:0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}`;
 
@@ -24008,7 +24014,7 @@ const KritzelStrokeSize = class {
 };
 KritzelStrokeSize.style = kritzelStrokeSizeCss();
 
-const kritzelToolConfigCss = () => `.expand-toggle{background:none;border:none;cursor:pointer;padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}`;
+const kritzelToolConfigCss = () => `.expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}`;
 
 const KritzelToolConfig = class {
     constructor(hostRef) {

package/dist/collection/classes/handlers/move.handler.js

@@ -102,7 +102,7 @@ export 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);
@@ -128,7 +128,7 @@ export 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/collection/classes/objects/path.class.js

@@ -246,15 +246,10 @@ export class KritzelPath extends KritzelBaseObject {
      * Does NOT modify translateX/translateY (use updateDimensions for initial setup).
      */
     updateBoundingBox() {
-        const rotatedPoints = this.points.map(([x, y]) => {
-            const rotatedX = x * Math.cos(this.rotation) - y * Math.sin(this.rotation);
-            const rotatedY = x * Math.sin(this.rotation) + y * Math.cos(this.rotation);
-            return [rotatedX, rotatedY];
-        });
-        const minX = Math.min(...rotatedPoints.map(p => p[0] - this.strokeWidth / 2));
-        const minY = Math.min(...rotatedPoints.map(p => p[1] - this.strokeWidth / 2));
-        const maxX = Math.max(...rotatedPoints.map(p => p[0] + this.strokeWidth / 2));
-        const maxY = Math.max(...rotatedPoints.map(p => p[1] + this.strokeWidth / 2));
+        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;

package/dist/collection/components/shared/kritzel-dropdown/kritzel-dropdown.css

@@ -126,7 +126,7 @@
 
 .dropdown-menu.is-open {
   opacity: 1;
-  visibility: visible;
+  visibility: inherit;
   transform: translateY(0);
 }
 

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

@@ -30,6 +30,12 @@ export class KritzelDropdown {
         this.evaluateSuffixContent();
         this.evaluatePrefixContent();
     }
+    disconnectedCallback() {
+        // Close menu when component is removed from DOM to prevent orphaned open dropdowns
+        if (this.isOpen) {
+            this.isOpen = false;
+        }
+    }
     handleDocumentClick(event) {
         if (this.isOpen && !this.el.contains(event.target)) {
             this.closeMenu();
@@ -219,7 +225,7 @@ export class KritzelDropdown {
             'open-up': this.openDirection === 'up',
             'open-down': this.openDirection === 'down',
         };
-        return (h(Host, { key: '29d076eb2ef76527c0930ab82ace0d05c896ab6c' }, h("div", { key: '1afac5cc0b7f408849670b8cb62fe0bd0f3b27f1', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '3cfcf787c3b3eedbd6bf30c7506a0a4912429672', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: 'b88120ed3e44871220e6ba61e8bef457651a2086', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '79082189066f3d0b4f5797420ec222847792fe52', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: 'a490bb6689ec1820144fe82f6833bee82e6ead0e', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '8bd7768f6fdd3c507bbca54d7d135adabe04901f', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: 'e1b854d2c93e3067181108f8d782e1393ddb615c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '3622cbf8964f4e50aa55be5209240dfd252f1d84', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'b91317736904cbeee0f87058b822bd77c6b163ca', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: '0ca8690345974e9b7ad184f4c7ab7cf5367b183c', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+        return (h(Host, { key: '83e46921e04c655ed185bfe3de524a61e9510447' }, h("div", { key: '251ee0af926e24e13a2b07fa6b8b41d02212434d', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '2cf811d76e5e626d19aa746e4f59b4d25ca45ae0', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '1d54e16f12814c150d842266f6ee6ae8891a0130', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '3c99b3dd4a25a59579eed072953c3d7f502f7a21', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: '1bfa6da63ffdd6bf2b022f92425ce212e009d507', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: 'e08ae142512344ffcd0ecfb477133a18fcfb3f34', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '8386ae9c934762f8e054f42c580cf750c5a9440a', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '024d4ecbc8a3ab9879edc02c890df7ceabef1f8a', points: "6 9 12 15 18 9" }))))), h("slot", { key: '028de1fa2049c7d682b967f34a3a5e9c39d32fe2', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: '51cd0ecefc1dcb0cd869d7e67c56f1944847efef', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
             const isSelected = option.value === this.internalValue;
             const isFocused = index === this.focusedIndex;
             const optionClasses = {

package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.css

@@ -1,7 +1,7 @@
 .expand-toggle {
   background: none;
   border: none;
-  cursor: pointer;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
   padding: 0;
   margin: 0;
   display: flex;

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.1.16';
+export const KRITZEL_VERSION = '0.1.17';