kritzel-stencil 0.0.161 → 0.0.162

package/dist/esm/kritzel-color_22.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-SGde3HXB.js';
-import { U as KritzelDevicesHelper, G as KritzelBrushTool, L as KritzelTextTool, V as KritzelMouseButton, N as KritzelSelectionTool, S as DEFAULT_BRUSH_CONFIG, I as KritzelEraserTool, T as DEFAULT_TEXT_CONFIG, J as KritzelImageTool, R as KritzelWorkspace, W as KritzelIconRegistry, X as KritzelKeyboardHelper, Y as KritzelBaseHandler, Z as KritzelToolRegistry, _ as KritzelSelectionBox, $ as KritzelSelectionGroup, a0 as KritzelBaseObject, F as KritzelImage, K as KritzelText, E as KritzelPath, a1 as Doc, a2 as DEFAULT_SYNC_CONFIG, a3 as UndoManager, Q as KritzelAppStateMap, a4 as ObjectHelper, a5 as KritzelEventHelper, a6 as KritzelBaseTool, M as KritzelCursorHelper } from './default-text-tool.config-BvCgOiKA.js';
+import { Y as KritzelDevicesHelper, I as KritzelBrushTool, N as KritzelTextTool, Z as KritzelMouseButton, Q as KritzelSelectionTool, V as DEFAULT_BRUSH_CONFIG, X as DEFAULT_LINE_TOOL_CONFIG, J as KritzelLineTool, L as KritzelEraserTool, W as DEFAULT_TEXT_CONFIG, M as KritzelImageTool, T as KritzelWorkspace, _ as KritzelIconRegistry, $ as KritzelKeyboardHelper, a0 as KritzelBaseHandler, a1 as KritzelToolRegistry, a2 as KritzelSelectionBox, a3 as KritzelSelectionGroup, a4 as KritzelBaseObject, F as KritzelImage, K as KritzelText, G as KritzelLine, E as KritzelPath, a5 as Doc, a6 as DEFAULT_SYNC_CONFIG, a7 as UndoManager, P as KritzelCursorHelper, S as KritzelAppStateMap, U as KritzelAnchorManager, a8 as ObjectHelper, a9 as KritzelEventHelper, aa as KritzelBaseTool, ab as KritzelClassHelper } from './default-line-tool.config-C35m-d1Y.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -603,6 +603,13 @@ const KritzelEditor = class {
             icon: 'pen',
             config: DEFAULT_BRUSH_CONFIG,
         },
+        {
+            name: 'line',
+            type: 'tool',
+            tool: KritzelLineTool,
+            icon: 'arrow',
+            config: DEFAULT_LINE_TOOL_CONFIG,
+        },
         {
             name: 'eraser',
             type: 'tool',
@@ -802,7 +809,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c824014ce85ef5c94436211df5241d23f11caed4' }, h("kritzel-workspace-manager", { key: '8ce43afa37896897674b5df943bef3fe1ffba32b', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '12f80313bb145d9065a6222d5a8b503f0eca177a', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '0a1e63580afcbe65e5cf42833d86c3b34bb686c7', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (h(Host, { key: 'f107cce23625f36978736ef948a51cd91d84c3f1' }, h("kritzel-workspace-manager", { key: 'a924de174ac5226c3ac5507c35e162b35490a5dd', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '48b6c14ca2c1e1a2c745ec81294a331a463219a1', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '2ec26e1444f4ba642c4fdc4ef2da1a62dc0256a6', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     static get watchers() { return {
         "isEngineReady": ["onIsEngineReady"],
@@ -18325,18 +18332,14 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
     }
 }
 
-class KritzelClassHelper {
-    static isInstanceOf(object, className) {
-        return !!object && object.__class__ === className;
-    }
-}
-
 const DEFAULT_ENGINE_CONFIG = {
     activeWorkspace: null,
     activeTool: null,
     copiedObjects: null,
     objects: null,
+    snapCandidate: null,
     resizeHandleType: null,
+    lineHandleType: null,
     hasViewportChanged: false,
     hasObjectsChanged: false,
     isReady: false,
@@ -18350,6 +18353,8 @@ const DEFAULT_ENGINE_CONFIG = {
     isRotating: false,
     isRotationHandleHovered: false,
     isRotationHandleSelected: false,
+    isLineHandleSelected: false,
+    isLineHandleDragging: false,
     isDragging: false,
     isDrawing: false,
     isErasing: false,
@@ -18464,6 +18469,9 @@ class KritzelReviver {
                     case 'KritzelPath':
                         revivedObj = KritzelPath.create(this._core).deserialize(obj);
                         break;
+                    case 'KritzelLine':
+                        revivedObj = KritzelLine.create(this._core).deserialize(obj);
+                        break;
                     case 'KritzelText':
                         revivedObj = KritzelText.create(this._core, obj.fontSize, obj.fontFamily).deserialize(obj);
                         break;
@@ -18494,6 +18502,9 @@ class KritzelReviver {
                     case 'KritzelTextTool':
                         revivedObj = new KritzelTextTool(this._core);
                         break;
+                    case 'KritzelLineTool':
+                        revivedObj = new KritzelLineTool(this._core);
+                        break;
                     default:
                         revivedObj = obj;
                 }
@@ -18973,6 +18984,10 @@ class KritzelStore {
         const drawingPaths = this._state.objects.filter(o => o instanceof KritzelPath && o.isCompleted === false);
         return drawingPaths.length > 0 ? drawingPaths[0] : null;
     }
+    get currentLine() {
+        const drawingLines = this._state.objects.filter(o => o instanceof KritzelLine && o.isCompleted === false);
+        return drawingLines.length > 0 ? drawingLines[0] : null;
+    }
     get offsetX() {
         return this._state.host.getBoundingClientRect().left;
     }
@@ -19009,11 +19024,129 @@ class KritzelStore {
     }
 }
 
+/**
+ * Manages cursor state and updates across the application.
+ * Handles cursor changes based on handle hovers, tool states, and interactions.
+ */
+class KritzelCursorManager {
+    _core;
+    _targetElement = null;
+    _shadowRoot = null;
+    constructor(core) {
+        this._core = core;
+    }
+    /**
+     * Sets the target element where cursor styles will be applied.
+     * Also sets the pointer cursor CSS variable for child components.
+     */
+    setTargetElement(element) {
+        // Reset cursor on old target
+        if (this._targetElement) {
+            this._targetElement.style.cursor = '';
+            this._targetElement.style.removeProperty('--kritzel-pointer-cursor');
+        }
+        this._targetElement = element;
+        // Set the pointer cursor CSS variable for child components to use
+        if (this._targetElement) {
+            this._targetElement.style.setProperty('--kritzel-pointer-cursor', KritzelCursorHelper.getPointerCursor());
+        }
+    }
+    /**
+     * Gets the current cursor target element.
+     */
+    getTargetElement() {
+        return this._targetElement;
+    }
+    /**
+     * Sets the shadow root for element detection.
+     */
+    setShadowRoot(shadowRoot) {
+        this._shadowRoot = shadowRoot;
+    }
+    /**
+     * Resets cursor to default state.
+     * Should be called when all pointers are released.
+     */
+    resetToDefault() {
+        this._core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+    }
+    /**
+     * Detects handle hover states using elementsFromPoint() to work with overlapped elements.
+     * This approach finds all elements at the pointer position instead of relying on pointerenter/pointerleave.
+     */
+    updateHoverState(ev) {
+        if (this._core.store.isPointerDown)
+            return;
+        if (!this._shadowRoot)
+            return;
+        const elementsAtPoint = this._shadowRoot.elementsFromPoint(ev.clientX, ev.clientY);
+        if (!elementsAtPoint || elementsAtPoint.length === 0)
+            return;
+        // Check for resize handle overlays (selection group)
+        const resizeHandleOverlay = elementsAtPoint.find(el => el.classList.contains('resize-handle-overlay'));
+        if (resizeHandleOverlay) {
+            const selectionGroup = this._core.store.selectionGroup;
+            const rotationDegrees = selectionGroup?.rotationDegrees ?? 0;
+            // Determine rotation offset based on handle position
+            const isTopLeft = resizeHandleOverlay.classList.contains('top-left');
+            const isBottomRight = resizeHandleOverlay.classList.contains('bottom-right');
+            const rotationOffset = (isTopLeft || isBottomRight) ? -45 : 45;
+            this._core.store.state.cursor = { icon: 'move-vertical', rotation: rotationDegrees + rotationOffset };
+            return;
+        }
+        // Check for rotation handle overlay
+        const rotationHandleOverlay = elementsAtPoint.find(el => el.classList.contains('rotation-handle-overlay'));
+        if (rotationHandleOverlay) {
+            this._core.store.state.cursor = { icon: 'hand', iconActive: 'hand-grab' };
+            return;
+        }
+        // Check for line handle overlays (selection line)
+        const lineHandleOverlay = elementsAtPoint.find(el => el.classList.contains('selection-line-handle-overlay'));
+        if (lineHandleOverlay) {
+            this._core.store.state.cursor = { icon: 'hand', iconActive: 'hand-grab' };
+            return;
+        }
+        // Reset cursor if not hovering any handle
+        this._core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+    }
+    /**
+     * Applies the current cursor state to the target element.
+     * Should be called in the render loop.
+     */
+    applyCursor() {
+        const state = this._core.store.state;
+        const isPointerDown = this._core.store.isPointerDown;
+        const icon = state.cursor?.icon;
+        const iconActive = state.cursor?.iconActive ?? icon;
+        const rotation = state.cursor?.rotation;
+        const cursor = KritzelCursorHelper.getCursor({
+            iconName: isPointerDown ? iconActive : icon,
+            rotation: rotation,
+        });
+        if (this._targetElement) {
+            this._targetElement.style.cursor = cursor;
+        }
+    }
+    /**
+     * Cleans up cursor state when the component is disconnected.
+     */
+    cleanup() {
+        if (this._targetElement) {
+            this._targetElement.style.cursor = '';
+            this._targetElement.style.removeProperty('--kritzel-pointer-cursor');
+        }
+        this._targetElement = null;
+        this._shadowRoot = null;
+    }
+}
+
 class KritzelCore {
     _kritzelEngine;
     _store;
     _syncConfig;
     _appStateMap;
+    _anchorManager;
+    _cursorManager;
     get engine() {
         return this._kritzelEngine;
     }
@@ -19023,10 +19156,18 @@ class KritzelCore {
     get appStateMap() {
         return this._appStateMap;
     }
+    get anchorManager() {
+        return this._anchorManager;
+    }
+    get cursorManager() {
+        return this._cursorManager;
+    }
     constructor(kritzelEngine) {
         this._kritzelEngine = kritzelEngine;
         this._store = new KritzelStore(DEFAULT_ENGINE_CONFIG);
         this._appStateMap = new KritzelAppStateMap();
+        this._anchorManager = new KritzelAnchorManager(this);
+        this._cursorManager = new KritzelCursorManager(this);
     }
     setSyncConfig(config) {
         this._syncConfig = config;
@@ -19099,6 +19240,8 @@ class KritzelCore {
         const objectsMap = new KritzelObjectMap();
         await objectsMap.initialize(this, activeWorkspace.id, this._syncConfig);
         this._store.state.objects = objectsMap;
+        // Rebuild anchor index after loading objects
+        this._anchorManager.rebuildIndex();
         this.engine.emitObjectsChange();
         this.rerender();
     }
@@ -19159,6 +19302,15 @@ class KritzelCore {
         this._store.state.objects.insert(object);
     }
     removeObject(object) {
+        // Handle anchor cleanup
+        if (object instanceof KritzelLine) {
+            // If removing a line, clean up its anchor index entries
+            this._anchorManager.handleLineDeleted(object.id);
+        }
+        else {
+            // If removing a non-line object, detach any lines anchored to it
+            this._anchorManager.handleObjectDeleted(object.id);
+        }
         object.isMounted = false;
         this._store.state.objects.remove(o => o.id === object.id);
     }
@@ -19216,8 +19368,18 @@ class KritzelCore {
     copy() {
         const selectionGroup = this._store.selectionGroup;
         if (selectionGroup) {
-            // Copy each object and store them in an array
-            this._store.state.copiedObjects = selectionGroup.objects.sort((a, b) => a.zIndex - b.zIndex).map(obj => obj.copy());
+            // Copy each object and store them in an array, also track the ID mapping
+            const idMapping = new Map();
+            const copiedObjects = selectionGroup.objects
+                .sort((a, b) => a.zIndex - b.zIndex)
+                .map(obj => {
+                const copiedObj = obj.copy();
+                // Map: newId -> originalId
+                idMapping.set(copiedObj.id, obj.id);
+                return copiedObj;
+            });
+            this._store.state.copiedObjects = copiedObjects;
+            this._store.state.copiedObjectIdMapping = idMapping;
         }
     }
     paste(x, y) {
@@ -19226,6 +19388,7 @@ class KritzelCore {
             return;
         }
         const activeWorkspace = this._store.state.activeWorkspace;
+        const originalIdMapping = this._store.state.copiedObjectIdMapping;
         // Check if we're pasting from a different workspace
         const isDifferentWorkspace = copiedObjects.some(obj => obj.workspaceId !== activeWorkspace.id);
         // Calculate the bounding box of all copied objects
@@ -19257,6 +19420,14 @@ class KritzelCore {
         this.removeSelectionBox();
         // Create a new selection group for the pasted objects
         const selectionGroup = KritzelSelectionGroup.create(this);
+        // Build a reverse mapping: originalId -> newCopiedObjectId
+        // This is used to remap anchor references from original IDs to the copied object IDs
+        const originalToNewIdMap = new Map();
+        if (originalIdMapping) {
+            originalIdMapping.forEach((originalId, copiedId) => {
+                originalToNewIdMap.set(originalId, copiedId);
+            });
+        }
         // First add all copied objects to the objectsMap with updated positions
         copiedObjects.forEach((obj, i) => {
             // Update workspace if pasting to a different workspace
@@ -19272,6 +19443,27 @@ class KritzelCore {
             // Add to selection group
             selectionGroup.addOrRemove(obj);
         });
+        // Update line anchors to point to the newly pasted objects
+        // Only remap if the anchor target was also part of the copied selection
+        copiedObjects.forEach(obj => {
+            if (obj instanceof KritzelLine) {
+                let updated = false;
+                if (obj.startAnchor && originalToNewIdMap.has(obj.startAnchor.objectId)) {
+                    obj.startAnchor = { objectId: originalToNewIdMap.get(obj.startAnchor.objectId) };
+                    updated = true;
+                }
+                if (obj.endAnchor && originalToNewIdMap.has(obj.endAnchor.objectId)) {
+                    obj.endAnchor = { objectId: originalToNewIdMap.get(obj.endAnchor.objectId) };
+                    updated = true;
+                }
+                // If anchors were updated, rebuild the anchor index and persist the change
+                if (updated) {
+                    this._store.state.objects.update(obj);
+                }
+            }
+        });
+        // Rebuild anchor index after all anchor updates
+        this._anchorManager.rebuildIndex();
         // Mark selection group as selected
         selectionGroup.isSelected = true;
         // Set rotation for single object
@@ -19297,7 +19489,17 @@ class KritzelCore {
         // Update copiedObjects to the newly created objects for potential future pastes
         const newSelectionGroup = this._store.selectionGroup;
         if (newSelectionGroup) {
-            this._store.state.copiedObjects = newSelectionGroup.objects.sort((a, b) => a.zIndex - b.zIndex).map(obj => obj.copy());
+            // Create new copies and track the ID mapping for future pastes
+            const newIdMapping = new Map();
+            const newCopiedObjects = newSelectionGroup.objects
+                .sort((a, b) => a.zIndex - b.zIndex)
+                .map(obj => {
+                const copiedObj = obj.copy();
+                newIdMapping.set(copiedObj.id, obj.id);
+                return copiedObj;
+            });
+            this._store.state.copiedObjects = newCopiedObjects;
+            this._store.state.copiedObjectIdMapping = newIdMapping;
         }
         this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         this.engine.emitObjectsChange();
@@ -19398,6 +19600,9 @@ class KritzelCore {
         this._store.state.isSelecting = false;
         this._store.state.isResizeHandleSelected = false;
         this._store.state.isRotationHandleSelected = false;
+        this._store.state.isLineHandleSelected = false;
+        this._store.state.isLineHandleDragging = false;
+        this._store.state.lineHandleType = null;
         this.rerender();
     }
     resetActiveText() {
@@ -19449,6 +19654,26 @@ class KritzelCore {
         }
         return [];
     }
+    /**
+     * Get all elements at a pointer position that match a given selector.
+     * Uses elementsFromPoint to find overlapped elements.
+     */
+    getElementsAtPoint(event, selector) {
+        const shadowRoot = this._store.state.host?.shadowRoot;
+        if (!shadowRoot)
+            return [];
+        const elementsAtPoint = shadowRoot.elementsFromPoint(event.clientX, event.clientY);
+        if (!elementsAtPoint || elementsAtPoint.length === 0)
+            return [];
+        return elementsAtPoint.filter(el => el.matches(selector));
+    }
+    /**
+     * Check if any element at the pointer position matches the given selector.
+     * Useful for detecting hover states on overlapped elements.
+     */
+    isPointerOverElement(event, selector) {
+        return this.getElementsAtPoint(event, selector).length > 0;
+    }
     getCanvasPoint(event) {
         if (!this._store.state.host) {
             return { x: 0, y: 0 };
@@ -19467,6 +19692,46 @@ class KritzelCore {
         this.clearSelection();
         this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
+    displaySelectionGroupUI(object) {
+        if (!object.isSelected) {
+            return false;
+        }
+        const selectionGroup = this._store.selectionGroup;
+        if (!selectionGroup) {
+            // During selection phase (no group yet), hide UI for KritzelLine objects
+            return !(object instanceof KritzelLine);
+        }
+        // Show UI if selection contains more than one object
+        if (selectionGroup.objects.length > 1) {
+            return true;
+        }
+        // Hide UI if selection contains a single KritzelLine
+        if (selectionGroup.objects.length === 1) {
+            const selectedObject = selectionGroup.objects[0];
+            return !(selectedObject instanceof KritzelLine);
+        }
+        return true;
+    }
+    displaySelectionLineUI(object) {
+        // Only show line UI on KritzelLine objects, not on selection groups
+        if (!(object instanceof KritzelLine)) {
+            return false;
+        }
+        // During selection phase (no group yet), show line UI if line is selected
+        const selectionGroup = this._store.selectionGroup;
+        if (!selectionGroup) {
+            return object.isSelected;
+        }
+        if (!selectionGroup.isSelected) {
+            return false;
+        }
+        // Show UI only if selection contains exactly one KritzelLine and it's this object
+        if (selectionGroup.objects.length === 1) {
+            const selectedObject = selectionGroup.objects[0];
+            return selectedObject instanceof KritzelLine && selectedObject.id === object.id;
+        }
+        return false;
+    }
 }
 
 const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}";
@@ -19510,12 +19775,7 @@ const KritzelEngine = class {
     }
     cursorTarget;
     onCursorTargetChange(newValue) {
-        // Reset cursor on old target
-        if (this.cursorTargetElement) {
-            this.cursorTargetElement.style.cursor = '';
-        }
-        // Set new target (defaults to document.body)
-        this.cursorTargetElement = newValue || document.body;
+        this.core.cursorManager.setTargetElement(newValue || document.body);
     }
     isEngineReady;
     activeToolChange;
@@ -19563,6 +19823,8 @@ const KritzelEngine = class {
         if (this.core.store.state.pointers.size > 1) {
             this.throttledPointerMoveMulti(ev);
         }
+        // Update cursor for handle hover states using elementsFromPoint
+        this.core.cursorManager.updateHoverState(ev);
         this.viewport.handlePointerMove(ev);
         this.core.store.state?.activeTool?.handlePointerMove(ev);
     }
@@ -19574,7 +19836,7 @@ const KritzelEngine = class {
         this.host.releasePointerCapture(ev.pointerId);
         // Reset cursor to default when all pointers are released
         if (this.core.store.state.pointers.size === 0) {
-            this.core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+            this.core.cursorManager.resetToDefault();
         }
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
@@ -19587,7 +19849,7 @@ const KritzelEngine = class {
         this.core.store.state.pointers.delete(ev.pointerId);
         // Reset cursor to default when all pointers are released
         if (this.core.store.state.pointers.size === 0) {
-            this.core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+            this.core.cursorManager.resetToDefault();
         }
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
@@ -19763,7 +20025,6 @@ const KritzelEngine = class {
     contextMenuHandler;
     keyHandler;
     contextMenuElement = null;
-    cursorTargetElement = null;
     get isSelecting() {
         return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
     }
@@ -19783,12 +20044,7 @@ const KritzelEngine = class {
     disconnectedCallback() {
         this.throttledWheel.cancel();
         this.throttledPointerMoveMulti.cancel();
-        // Reset cursor on target element
-        if (this.cursorTargetElement) {
-            this.cursorTargetElement.style.cursor = '';
-            this.cursorTargetElement.style.removeProperty('--kritzel-pointer-cursor');
-            this.cursorTargetElement = null;
-        }
+        this.core.cursorManager.cleanup();
     }
     componentWillLoad() {
         this.validateScaleMax(this.scaleMax);
@@ -19798,10 +20054,9 @@ const KritzelEngine = class {
         this.contextMenuHandler = new KritzelContextMenuHandler(this.core, this.globalContextMenuItems, this.objectContextMenuItems);
         this.keyHandler = new KritzelKeyHandler(this.core);
         this.viewport = new KritzelViewport(this.core, this.host);
-        // Set cursor target element (use prop value or default to document.body)
-        this.cursorTargetElement = this.cursorTarget || document.body;
-        // Set the pointer cursor CSS variable for child components to use
-        this.cursorTargetElement.style.setProperty('--kritzel-pointer-cursor', KritzelCursorHelper.getPointerCursor());
+        // Initialize cursor manager with target element and shadow root
+        this.core.cursorManager.setTargetElement(this.cursorTarget || document.body);
+        this.core.cursorManager.setShadowRoot(this.host.shadowRoot);
         // Set sync configuration if provided
         if (this.syncConfig) {
             this.core.setSyncConfig(this.syncConfig);
@@ -19843,20 +20098,6 @@ const KritzelEngine = class {
         KritzelKeyboardHelper.forceHideKeyboard();
         this.core.rerender();
     }
-    updateCursor() {
-        const state = this.core.store.state;
-        const isPointerDown = this.core.store.isPointerDown;
-        const icon = state.cursor?.icon;
-        const iconActive = state.cursor?.iconActive ?? icon;
-        const rotation = state.cursor?.rotation;
-        const cursor = KritzelCursorHelper.getCursor({
-            iconName: isPointerDown ? iconActive : icon,
-            rotation: rotation,
-        });
-        if (this.cursorTargetElement) {
-            this.cursorTargetElement.style.cursor = cursor;
-        }
-    }
     render() {
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
@@ -19873,17 +20114,17 @@ const KritzelEngine = class {
             depth: 100,
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds);
-        this.updateCursor();
-        return (h(Host, { key: '192c356c5476b2b3cf370b05efd5742776423200' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'fae1b053c1eda01726f6b583a8dd167bb1c34aa1', class: "debug-panel" }, h("div", { key: '0e0fab7c39c1c8116831cf7b228914b0c40fb338' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '770d284f5104919c5c6a36e653971d3662e9428b' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '4937256ccf074a0a2fffb9c8c32a8c6ba41d3fb4' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '447d95aed0dda6e212e7c67ff4bc0a2e574131fd' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '548a04b16f68873e5fc0a2767146b52e83b9f0f8' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '16a92abf89f1b438f14f311dd248ae82e1ac1982' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '92a2abc5a757c64d764f3e1ee525556eb6a88852' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '7677d4fd149ef2507626e50502d7c2b74fb294af' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '3120c7ff85fd9f8ef14fb313b9aae6f2fc817f75' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '100cd8a8c221d66046d9ff869b23809ca2568d12' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '2efec039f635eec81d172113d55284eb9002f339' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'f1df2fbf86a1944831c26a23e8c0baadd5ba1c56' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '10098cd2ffd07200fc8a12941ffd91fc1fac4de8' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '75043ccdac3ef3b02dae17b758813132174c2034' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '59217b67d572cc60fc8381bcc930a952fea2faaa' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'c4a7d64031d3b430673adb6adcb7f525f7a47ddc' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'd62bef9cab424e77781a3d5639552b8122e92238' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'ab5dbbc947b335a1396a945328a5939d690d8cd0' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'fb2c19a0cdc070ecbf28e51b08112a73ffcf2817' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '2d5519541aeb9a6423524463a03d1626f5eaf6ca' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'f86b578263c68ac194d6b3d606a1cb31717b1792' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '52ed5379ef3e9a18cbabe14be8106055a8f71ede' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '6b97e5f6c90666283fb5cfed0cf0e3b7bc0fffe3' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '5f80b9d4121974ee1e8afe89925b6b38b840e90f' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '8a280b4454677f5dc29e4a2a39fd4f7cfc8c26df' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '660dd95852906f5c049b9527b26ea0af3fa04274', id: "origin", class: "origin", style: {
+        this.core.cursorManager.applyCursor();
+        return (h(Host, { key: '4a7e8c72ad1f80c3c31aa37eff33e78634cb37d1' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '3c8981ce6cafbc49f4f04189d27809c511bf45c4', class: "debug-panel" }, h("div", { key: '428d483a87b98cde24446a0a26ba790ec2a6358b' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '3ec597c219109c026f78e5018a885e88e51aa5c4' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '803c0d009b19fdc7c465ef14f3b5f278a954a912' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '8b1aef0ae845cdf4b93afe59d8c78c84dd181a2d' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '137ead0c39a2fba55b4c4dde53fb09d0832439e1' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'b19f710385e4306620176551853eb2645b96ca7a' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '943b55daada95aa37b759e45a15ffcfca76fba72' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'd001782dd4bc48c84c08477b26e5f3fce8df0b47' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'ed640d3905b39a995ba40a1cbf38f10a4aa1b400' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '154888aabbb56365aaf4584b0b991be848629e3e' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'c0c39e988940baf20137de8a0eeda2c085da2810' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'abd5a79b27bc75e898877d33097597c057dc3f2b' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '9c49bf3246525c9a755bb293bec8a143ade97158' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '88ff8ab48af31bf036719f72a5a3726780ab9720' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '9650075f855fcf91b7303d3ace14242075fc523d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '911acb1f90f9812d30dc0aebceb207aecf9b4248' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'b65db638d3cefbd74e2d03b639ee5fe86a2a858b' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'c53ca259dadc656762733119b4086c1f82235a7e' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'ae2d7a8917af450eb3bfd8e171a87530f337c0c2' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '5633cd9901ec028e4f5433c84b07321932beea66' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '82232a8eec470562e5658dee9713c855e78ca6a3' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '5b6b04b323a21ef37ddb144721ea01dccc7aec8b' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '3287f804515cfa31eaa755332e2043fce4feb7a9' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '3a59fd4db60f6f05d419de39149ea10e482875d4' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'f91a8ea9dfc50e5f1ae89d66c7609a103e3263a4' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '40ba8fb5530243c18e0b0c3ad68dadb2cbc615a1', 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})`,
             } }, visibleObjects?.map(object => {
             return (h("div", { key: object.id, style: {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
-                    zIndex: object.zIndex.toString(),
                     position: 'absolute',
                     pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
                 } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
+                    zIndex: object.zIndex.toString(),
                     height: object?.totalHeight.toString(),
                     width: object?.totalWidth.toString(),
                     left: '0',
@@ -19893,7 +20134,7 @@ const KritzelEngine = class {
                     transformOrigin: `${object.totalWidth / 2}px ${object.totalHeight / 2}px`,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke, "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` })))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: object?.stroke, "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
                     minHeight: '0',
                     minWidth: '0',
                     backgroundColor: object.backgroundColor,
@@ -19902,18 +20143,14 @@ const KritzelEngine = class {
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
                     overflow: 'visible',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
-                    height: object?.height.toString(),
-                    width: object?.width.toString(),
-                    position: 'absolute',
-                    overflow: 'visible',
-                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke, "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
+                    display: KritzelClassHelper.isInstanceOf(object, 'KritzelLine') || KritzelClassHelper.isInstanceOf(object, 'KritzelPath') ? 'none' : 'block'
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
                     width: '100%',
                     height: '100%',
                     userSelect: 'none',
                     pointerEvents: 'none',
                     imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { id: "text-object", ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     minWidth: object.initialWidth + 'px',
                     minHeight: object.initialHeight + 'px',
                     maxWidth: '500px',
@@ -19930,7 +20167,7 @@ const KritzelEngine = class {
                     pointerEvents: 'auto',
                     overflow: 'hidden',
                     display: 'block',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => object.mount(el), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
                 } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
@@ -19940,7 +20177,8 @@ const KritzelEngine = class {
                     borderWidth: KritzelDevicesHelper.isFirefox() ? object.borderWidth + 'px' : '0',
                     borderStyle: KritzelDevicesHelper.isFirefox() ? 'solid' : 'none',
                     borderColor: KritzelDevicesHelper.isFirefox() ? object.borderColor : 'transparent',
-                } }))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("g", { style: { pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY)))))), h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                } }))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("g", { style: { pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "rotationDegrees: ", object.rotationDegrees)))))), h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                    zIndex: (object.zIndex + 1).toString(),
                     height: object?.totalHeight.toString(),
                     width: object?.totalWidth.toString(),
                     left: '0',
@@ -19950,7 +20188,7 @@ const KritzelEngine = class {
                     transformOrigin: `${object.totalWidth / 2}px ${object.totalHeight / 2}px`,
                     overflow: 'visible',
                     pointerEvents: 'none',
-                } }, object.isSelected && (h("g", { class: "selection-borders", style: { pointerEvents: 'none' } }, h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
+                } }, this.core.displaySelectionGroupUI(object) && (h("g", { class: "selection-group-ui", style: { pointerEvents: 'none' } }, h("g", { class: "selection-group-borders" }, h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
@@ -19966,31 +20204,31 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
-                } }))), object.isSelected && !this.isSelecting && (h("g", { class: "selection-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } })), !this.isSelecting && (h("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees - 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees + 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees + 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees - 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
+                } }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                 } }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
@@ -19999,8 +20237,103 @@ const KritzelEngine = class {
                 } }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'hand', iconActive: 'hand-grab' }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }))))));
-        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '0da13416f8f2cf2f0eb6fcbb8eacb942dda0efb5', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+                } }))))), this.core.displaySelectionLineUI(object) && KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } }, h("g", { class: "selection-line-borders" }, h("path", { class: "selection-line-border", d: this.core.anchorManager.computeClippedLinePath(object, true), style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                    strokeLinecap: 'round',
+                    fill: 'none',
+                } })), !this.isSelecting && (h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle-overlay start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle center", cx: object.controlX !== undefined ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle-overlay center", cx: object.controlX !== undefined ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle-overlay end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                    paintOrder: 'fill',
+                } }))))))));
+        }), (() => {
+            const data = this.core.anchorManager.getAnchorLinesRenderData();
+            if (!data)
+                return null;
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "anchor-lines", style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: '1px',
+                    height: '1px',
+                    pointerEvents: 'none',
+                    zIndex: '9998',
+                    overflow: 'visible',
+                } }, data.startAnchorViz && (h("g", { class: "anchor-line-start" }, data.startAnchorViz.pathD ? (h("path", { d: data.startAnchorViz.pathD, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.3))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                    fill: 'none',
+                } })) : (h("line", { x1: data.startAnchorViz.edgeX, y1: data.startAnchorViz.edgeY, x2: data.startAnchorViz.centerX, y2: data.startAnchorViz.centerY, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.3))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })), h("circle", { cx: data.startAnchorViz.centerX, cy: data.startAnchorViz.centerY, r: data.indicatorRadius, style: {
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(0, 0, 0))',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } }))), data.endAnchorViz && (h("g", { class: "anchor-line-end" }, data.endAnchorViz.pathD ? (h("path", { d: data.endAnchorViz.pathD, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                    fill: 'none',
+                } })) : (h("line", { x1: data.endAnchorViz.edgeX, y1: data.endAnchorViz.edgeY, x2: data.endAnchorViz.centerX, y2: data.endAnchorViz.centerY, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })), h("circle", { cx: data.endAnchorViz.centerX, cy: data.endAnchorViz.centerY, r: data.indicatorRadius, style: {
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } })))));
+        })(), (() => {
+            const data = this.core.anchorManager.getSnapIndicatorRenderData();
+            if (!data)
+                return null;
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "snap-indicator", style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: '1px',
+                    height: '1px',
+                    pointerEvents: 'none',
+                    zIndex: '9999',
+                    overflow: 'visible',
+                } }, h("g", null, data.snapLinePath ? (h("path", { d: data.snapLinePath, fill: "none", style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })) : (data.edgeX !== undefined && data.edgeY !== undefined && (h("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } }))), h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } }))));
+        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '7e350c48da76c54a223f23ead9dea8018b0bc36c', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -20011,7 +20344,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '609dd8438a2678eaa3ce0a73858d9236c9371f96', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '7923a3f6a92fa71911c971166171317b5bc421bf', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],