kritzel-stencil 0.0.160 → 0.0.161

package/dist/components/{p-DTHqEUDc.js → p-D7BLVRXX.js}

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 import { K as KritzelMouseButton } from './p-D8W6LE-c.js';
 import { e as KritzelBaseObject, f as KritzelBaseTool, g as KritzelEventHelper, h as KritzelToolRegistry, c as KritzelTextTool, b as KritzelBrushTool, K as KritzelText, a as KritzelPath, d as KritzelKeyboardHelper } from './p-CBYBurdY.js';
-import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-C2sWlNsJ.js';
+import { K as KritzelContextMenu, d as defineCustomElement$3 } from './p-D_ygcWSz.js';
 import { O as ObjectHelper } from './p-B0kd2rUI.js';
+import { K as KritzelIconRegistry, d as defineCustomElement$1 } from './p-DbKKCHKd.js';
 import { K as KritzelWorkspace } from './p-n789Y3S-.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
-import { d as defineCustomElement$2 } from './p-CLt3HMl6.js';
-import { d as defineCustomElement$1 } from './p-Bhtn9qay.js';
+import { d as defineCustomElement$2 } from './p-B_3OZeom.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -236,6 +236,63 @@ class KritzelImageTool extends KritzelBaseTool {
     }
 }
 
+class KritzelCursorHelper {
+    static _pointerCursor = null;
+    /**
+     * Returns the custom pointer cursor CSS value.
+     * This can be used instead of `cursor: pointer` for consistent styling.
+     */
+    static getPointerCursor() {
+        if (!this._pointerCursor) {
+            this._pointerCursor = this.getCursor({ iconName: 'pointer' });
+        }
+        return this._pointerCursor;
+    }
+    /**
+     * Returns a custom cursor CSS value with support for rotation.
+     * The icon is retrieved from the KritzelIconRegistry.
+     */
+    static getCursor(options) {
+        const iconName = options.iconName === 'default' ? 'mouse-pointer' : options.iconName;
+        const iconSvg = KritzelIconRegistry.get(iconName);
+        if (!iconSvg) {
+            console.warn(`Icon "${iconName}" not found in registry.`);
+            return 'auto';
+        }
+        const size = options.size || 24;
+        const rotation = options.rotation || 0;
+        const color = options.color || 'black';
+        // Default cursor (mouse-pointer) has hotspot at (4, 4), others at center
+        const hotspot = options.hotspot || (options.iconName === 'default' ? { x: 4, y: 4 } : { x: size / 2, y: size / 2 });
+        // Modify the SVG string to set size and color
+        // We replace width and height to match the requested size
+        // We replace currentColor with the requested color
+        let content = iconSvg
+            .replace(/width="\d+"/, `width="${size}"`)
+            .replace(/height="\d+"/, `height="${size}"`)
+            .replace(/currentColor/g, color);
+        // Create the SVG string
+        // We rotate around the center of the SVG canvas
+        const center = size / 2;
+        // We use a group to apply the rotation
+        const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+        <g transform="rotate(${rotation} ${center} ${center})">
+          ${content}
+        </g>
+      </svg>
+    `;
+        // Encode the SVG for use in a data URI
+        // We need to be careful with encoding to ensure it works across browsers
+        const encodedSvg = encodeURIComponent(svg.replace(/\s+/g, ' ').trim())
+            .replace(/'/g, '%27')
+            .replace(/"/g, '%22');
+        const dataUri = `data:image/svg+xml;charset=utf-8,${encodedSvg}`;
+        // Return the cursor style string
+        return `url('${dataUri}') ${hotspot.x} ${hotspot.y}, auto`;
+    }
+}
+
 class KritzelBaseHandler {
     _core;
     constructor(core) {
@@ -474,39 +531,40 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 const rotation = selectionGroup.rotation;
                 const sin = Math.sin(rotation);
                 const cos = Math.cos(rotation);
-                const activeScale = selectionGroup.scale || this._core.store.state.scale;
+                const objectScale = selectionGroup.scale || 1;
+                const currentScale = this._core.store.state.scale;
                 // Calculate delta in local unrotated space
                 // We rotate the screen delta by -rotation to align with the object's axes
-                const localDx = dx * cos + dy * sin;
-                const localDy = -dx * sin + dy * cos;
+                const localDx = (dx * cos + dy * sin) / currentScale;
+                const localDy = (-dx * sin + dy * cos) / currentScale;
                 // Calculate the center of the selection group before resize
-                const initialCenterX = this.initialSize.x + this.initialSize.width / activeScale / 2;
-                const initialCenterY = this.initialSize.y + this.initialSize.height / activeScale / 2;
+                const initialCenterX = this.initialSize.x + this.initialSize.width / objectScale / 2;
+                const initialCenterY = this.initialSize.y + this.initialSize.height / objectScale / 2;
                 // The center moves by half of the screen delta (scaled)
                 // This is true regardless of rotation because the resize happens symmetrically around the center
                 // relative to the fixed point logic
-                const newCenterX = initialCenterX + dx / activeScale / 2;
-                const newCenterY = initialCenterY + dy / activeScale / 2;
+                const newCenterX = initialCenterX + dx / currentScale / 2;
+                const newCenterY = initialCenterY + dy / currentScale / 2;
                 switch (this._core.store.state.resizeHandleType) {
                     case KritzelHandleType.TopLeft:
-                        this.newSize.width = this.initialSize.width - localDx;
-                        this.newSize.height = this.initialSize.height - localDy;
+                        this.newSize.width = this.initialSize.width - localDx * objectScale;
+                        this.newSize.height = this.initialSize.height - localDy * objectScale;
                         break;
                     case KritzelHandleType.TopRight:
-                        this.newSize.width = this.initialSize.width + localDx;
-                        this.newSize.height = this.initialSize.height - localDy;
+                        this.newSize.width = this.initialSize.width + localDx * objectScale;
+                        this.newSize.height = this.initialSize.height - localDy * objectScale;
                         break;
                     case KritzelHandleType.BottomLeft:
-                        this.newSize.width = this.initialSize.width - localDx;
-                        this.newSize.height = this.initialSize.height + localDy;
+                        this.newSize.width = this.initialSize.width - localDx * objectScale;
+                        this.newSize.height = this.initialSize.height + localDy * objectScale;
                         break;
                     case KritzelHandleType.BottomRight:
-                        this.newSize.width = this.initialSize.width + localDx;
-                        this.newSize.height = this.initialSize.height + localDy;
+                        this.newSize.width = this.initialSize.width + localDx * objectScale;
+                        this.newSize.height = this.initialSize.height + localDy * objectScale;
                         break;
                 }
-                this.newSize.x = newCenterX - this.newSize.width / activeScale / 2;
-                this.newSize.y = newCenterY - this.newSize.height / activeScale / 2;
+                this.newSize.x = newCenterX - this.newSize.width / objectScale / 2;
+                this.newSize.y = newCenterY - this.newSize.height / objectScale / 2;
                 selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
             }
         }
@@ -535,33 +593,40 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 const rotation = selectionGroup.rotation;
                 const sin = Math.sin(rotation);
                 const cos = Math.cos(rotation);
-                const activeScale = selectionGroup.scale || this._core.store.state.scale;
-                const localDx = dx * cos + dy * sin;
-                const localDy = -dx * sin + dy * cos;
-                const initialCenterX = this.initialSize.x + this.initialSize.width / activeScale / 2;
-                const initialCenterY = this.initialSize.y + this.initialSize.height / activeScale / 2;
-                const newCenterX = initialCenterX + dx / activeScale / 2;
-                const newCenterY = initialCenterY + dy / activeScale / 2;
+                const objectScale = selectionGroup.scale || 1;
+                const currentScale = this._core.store.state.scale;
+                // Calculate delta in local unrotated space
+                // We rotate the screen delta by -rotation to align with the object's axes
+                const localDx = (dx * cos + dy * sin) / currentScale;
+                const localDy = (-dx * sin + dy * cos) / currentScale;
+                // Calculate the center of the selection group before resize
+                const initialCenterX = this.initialSize.x + this.initialSize.width / objectScale / 2;
+                const initialCenterY = this.initialSize.y + this.initialSize.height / objectScale / 2;
+                // The center moves by half of the screen delta (scaled)
+                // This is true regardless of rotation because the resize happens symmetrically around the center
+                // relative to the fixed point logic
+                const newCenterX = initialCenterX + dx / currentScale / 2;
+                const newCenterY = initialCenterY + dy / currentScale / 2;
                 switch (this._core.store.state.resizeHandleType) {
                     case KritzelHandleType.TopLeft:
-                        this.newSize.width = this.initialSize.width - localDx;
-                        this.newSize.height = this.initialSize.height - localDy;
+                        this.newSize.width = this.initialSize.width - localDx * objectScale;
+                        this.newSize.height = this.initialSize.height - localDy * objectScale;
                         break;
                     case KritzelHandleType.TopRight:
-                        this.newSize.width = this.initialSize.width + localDx;
-                        this.newSize.height = this.initialSize.height - localDy;
+                        this.newSize.width = this.initialSize.width + localDx * objectScale;
+                        this.newSize.height = this.initialSize.height - localDy * objectScale;
                         break;
                     case KritzelHandleType.BottomLeft:
-                        this.newSize.width = this.initialSize.width - localDx;
-                        this.newSize.height = this.initialSize.height + localDy;
+                        this.newSize.width = this.initialSize.width - localDx * objectScale;
+                        this.newSize.height = this.initialSize.height + localDy * objectScale;
                         break;
                     case KritzelHandleType.BottomRight:
-                        this.newSize.width = this.initialSize.width + localDx;
-                        this.newSize.height = this.initialSize.height + localDy;
+                        this.newSize.width = this.initialSize.width + localDx * objectScale;
+                        this.newSize.height = this.initialSize.height + localDy * objectScale;
                         break;
                 }
-                this.newSize.x = newCenterX - this.newSize.width / activeScale / 2;
-                this.newSize.y = newCenterY - this.newSize.height / activeScale / 2;
+                this.newSize.x = newCenterX - this.newSize.width / objectScale / 2;
+                this.newSize.y = newCenterY - this.newSize.height / objectScale / 2;
                 selectionGroup.resize(this.newSize.x, this.newSize.y, this.newSize.width, this.newSize.height);
             }
         }
@@ -614,8 +679,9 @@ class KritzelRotationHandler extends KritzelBaseHandler {
                     const clientX = event.clientX - this._core.store.offsetX;
                     const clientY = event.clientY - this._core.store.offsetY;
                     this._core.store.state.isRotating = true;
-                    const centerX = selectionGroup.translateX + selectionGroup.width / 2 / this._core.store.state.scale;
-                    const centerY = selectionGroup.translateY + selectionGroup.height / 2 / this._core.store.state.scale;
+                    const objectScale = selectionGroup.scale || 1;
+                    const centerX = selectionGroup.translateX + selectionGroup.width / 2 / objectScale;
+                    const centerY = selectionGroup.translateY + selectionGroup.height / 2 / objectScale;
                     const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
                     const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
                     this.initialSelectionGroupRotation = selectionGroup.rotation;
@@ -636,8 +702,9 @@ class KritzelRotationHandler extends KritzelBaseHandler {
                     const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
                     const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
                     this._core.store.state.isRotating = true;
-                    const centerX = selectionGroup.translateX + selectionGroup.width / 2 / this._core.store.state.scale;
-                    const centerY = selectionGroup.translateY + selectionGroup.height / 2 / this._core.store.state.scale;
+                    const objectScale = selectionGroup.scale || 1;
+                    const centerX = selectionGroup.translateX + selectionGroup.width / 2 / objectScale;
+                    const centerY = selectionGroup.translateY + selectionGroup.height / 2 / objectScale;
                     const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
                     const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
                     this.initialSelectionGroupRotation = selectionGroup.rotation;
@@ -654,8 +721,9 @@ class KritzelRotationHandler extends KritzelBaseHandler {
             if (this._core.store.state.isRotating && selectionGroup) {
                 const clientX = event.clientX - this._core.store.offsetX;
                 const clientY = event.clientY - this._core.store.offsetY;
-                const groupCenterX = selectionGroup.translateX + selectionGroup.width / 2 / this._core.store.state.scale;
-                const groupCenterY = selectionGroup.translateY + selectionGroup.height / 2 / this._core.store.state.scale;
+                const objectScale = selectionGroup.scale || 1;
+                const groupCenterX = selectionGroup.translateX + selectionGroup.width / 2 / objectScale;
+                const groupCenterY = selectionGroup.translateY + selectionGroup.height / 2 / objectScale;
                 const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
                 const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
                 const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
@@ -673,8 +741,9 @@ class KritzelRotationHandler extends KritzelBaseHandler {
             if (this._core.store.state.isRotating && selectionGroup) {
                 const clientX = Math.round(firstTouch.clientX - this._core.store.offsetX);
                 const clientY = Math.round(firstTouch.clientY - this._core.store.offsetY);
-                const groupCenterX = selectionGroup.translateX + selectionGroup.width / 2 / this._core.store.state.scale;
-                const groupCenterY = selectionGroup.translateY + selectionGroup.height / 2 / this._core.store.state.scale;
+                const objectScale = selectionGroup.scale || 1;
+                const groupCenterX = selectionGroup.translateX + selectionGroup.width / 2 / objectScale;
+                const groupCenterY = selectionGroup.translateY + selectionGroup.height / 2 / objectScale;
                 const cursorX = (clientX - this._core.store.state.translateX) / this._core.store.state.scale;
                 const cursorY = (clientY - this._core.store.state.translateY) / this._core.store.state.scale;
                 const currentRotation = Math.atan2(groupCenterY - cursorY, groupCenterX - cursorX);
@@ -33979,8 +34048,10 @@ const DEFAULT_ENGINE_CONFIG = {
     isPanning: false,
     isSelecting: false,
     isResizing: false,
+    isResizeHandleHovered: false,
     isResizeHandleSelected: false,
     isRotating: false,
+    isRotationHandleHovered: false,
     isRotationHandleSelected: false,
     isDragging: false,
     isDrawing: false,
@@ -34016,6 +34087,10 @@ const DEFAULT_ENGINE_CONFIG = {
     longTouchDelay: 300,
     pointers: new Map(),
     workspaces: [],
+    cursor: {
+        icon: 'default',
+        iconActive: 'default'
+    }
 };
 
 class KritzelCustomElement extends KritzelBaseObject {
@@ -34610,6 +34685,9 @@ class KritzelStore {
     get isDisabled() {
         return this._state.isEnabled === false || this._state.isReady === false || this._state.activeWorkspace === null;
     }
+    get isPointerDown() {
+        return this._state.pointers.size > 0;
+    }
     constructor(state) {
         this._state = state;
         this._state.objects = new KritzelObjectMap();
@@ -35094,7 +35172,7 @@ class KritzelCore {
     }
 }
 
-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}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}.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}";
+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}";
 
 const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine extends H {
     get host() { return this; }
@@ -35133,6 +35211,15 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             this.core.store.state.scaleMin = newValue;
         }
     }
+    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;
+    }
     isEngineReady;
     activeToolChange;
     workspacesChange;
@@ -35173,7 +35260,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         if (this.core.store.isDisabled) {
             return;
         }
-        this.core.store.state.pointers.set(ev.pointerId, ev);
+        if (this.core.store.state.pointers.has(ev.pointerId)) {
+            this.core.store.state.pointers.set(ev.pointerId, ev);
+        }
         if (this.core.store.state.pointers.size > 1) {
             this.throttledPointerMoveMulti(ev);
         }
@@ -35186,6 +35275,10 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         }
         this.core.store.state.pointers.delete(ev.pointerId);
         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.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
@@ -35195,6 +35288,10 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         }
         this.host.releasePointerCapture(ev.pointerId);
         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.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
@@ -35369,6 +35466,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     contextMenuHandler;
     keyHandler;
     contextMenuElement = null;
+    cursorTargetElement = null;
     get isSelecting() {
         return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
     }
@@ -35392,6 +35490,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     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;
+        }
     }
     componentWillLoad() {
         this.validateScaleMax(this.scaleMax);
@@ -35401,6 +35505,10 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         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());
         // Set sync configuration if provided
         if (this.syncConfig) {
             this.core.setSyncConfig(this.syncConfig);
@@ -35442,6 +35550,20 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         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';
@@ -35458,7 +35580,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
             depth: 100,
         };
         const visibleObjects = this.core.store.state.objects.query(viewportBounds);
-        return (h(Host, { key: '1a76bcddde5f1aa68dd20a73af61f6f89ab08c78' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '9be109e44187d7d2072e115533b3c58a36351993', class: "debug-panel" }, h("div", { key: 'de16ca51bc04f851ef65a9a937829916041abd1c' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '299b05d4091d6c883ee637207e242e3fdb93f19c' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '9ef3f04b7fcb42ec87d8b7e6b9f5e914918fd780' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'cd920e869be5112c7dbe7d494f9fa06902c3d30a' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: 'd8d28322f8cc2b5cf9a3da2c97c91e3115f53ddc' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'e8d920e10b020b359533682452f76489bc8e9f2d' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '768280f7bf01703c9f6ea22b06b89fe7130006a4' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'ff0f5e860a9987abaf8c81b95d1476af19d9b186' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'a672fbf63576a1776f4d3960d9f36493a4308a79' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: 'd562bff5d582e3df38e0a62229c8c7b0700b9fa0' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'd6b2646e7fd0abb5d39928c51ad340ccf306db01' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '453e3d3691aad984895241734c70de61cbcd60ec' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '156668df87ea5001c7348c1c141f1c8601fe23da' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '86f956f35a84961c17685ebfd7cb73e92f04cd45' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '73581c5791434983308d49e5c41f82836729a75d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '23f3eef374052545b7e99b0cb58a00011b421188' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '51842e9f6e95413e6defbe6f81f43c1c7559be3e' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'b835c25cb75bc6f6d29a71ba25b18735f60319f8' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '9a9740f44f06d57f2f9a1fce94ca2330a9c14e29' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '9b97322077152d4fbcb98bc650ee7d0555f8d06d' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '9eddc79647458ca7b72e3241709fc36276587159' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '426ac2bf30669cc79beda5c2e5136eba5c29c578' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '8544b6e8aaeacee60fe9597ec13af11c938eaacf' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '5101eecff40329a93b5ac6eb09830f1067ebaa90', id: "origin", class: "origin", style: {
+        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: {
                 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: {
@@ -35556,25 +35679,25 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 } }), 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',
-                } }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                }, 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: {
                     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',
-                } }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                }, 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: {
                     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',
-                } }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                }, 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: {
                     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',
-                } }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
+                }, 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: {
                     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: {
@@ -35582,10 +35705,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     paintOrder: 'fill',
                 } }), 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',
-                    cursor: 'grab',
                     paintOrder: 'fill',
-                } }))))));
-        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '8270193062df51aa5e358bd31c0851f54e4644d1', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+                }, 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: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -35596,12 +35718,13 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     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: '7d199fcf652dee0cd12fff8a558b455c361e019f', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '609dd8438a2678eaa3ce0a73858d9236c9371f96', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
         "scaleMax": ["validateScaleMax"],
-        "scaleMin": ["validateScaleMin"]
+        "scaleMin": ["validateScaleMin"],
+        "cursorTarget": ["onCursorTargetChange"]
     }; }
     static get style() { return kritzelEngineCss; }
 }, [769, "kritzel-engine", {
@@ -35612,6 +35735,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
         "objectContextMenuItems": [16],
         "scaleMax": [1026, "scale-max"],
         "scaleMin": [1026, "scale-min"],
+        "cursorTarget": [16],
         "forceUpdate": [32],
         "registerTool": [64],
         "changeActiveTool": [64],
@@ -35645,7 +35769,8 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
     }, [[0, "wheel", "handleWheel"], [0, "pointerdown", "handlePointerDown"], [0, "pointermove", "handlePointerMove"], [0, "pointerup", "handlePointerUp"], [0, "pointercancel", "handlePointerCancel"], [0, "longpress", "handleLongPress"], [0, "contextmenu", "handleContextMenu"], [9, "resize", "handleResize"], [8, "keydown", "handleKeyDown"], [8, "keyup", "handleKeyUp"], [4, "dblclick", "preventDoubleTapZoomOnTouchDevices"]], {
         "workspace": ["onWorkspaceChange"],
         "scaleMax": ["validateScaleMax"],
-        "scaleMin": ["validateScaleMin"]
+        "scaleMin": ["validateScaleMin"],
+        "cursorTarget": ["onCursorTargetChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -35676,7 +35801,7 @@ function defineCustomElement() {
     } });
 }
 
-export { isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelEraserTool as E, KritzelImageTool as F, KritzelSelectionTool as G, HocuspocusProvider as H, IndexedDBSyncProvider as I, KritzelAppStateMap as J, KritzelImage as K, ABSOLUTE_SCALE_MAX as L, ABSOLUTE_SCALE_MIN as M, defineCustomElement as N, Observable$1 as O, KritzelEngine as P, writeVarUint8Array$2 as a, readVarUint8Array$2 as b, applyUpdate as c, encodeStateVector as d, encodeStateAsUpdate as e, createEncoder$1 as f, createDecoder$1 as g, create$8 as h, fromBase64 as i, toBase64 as j, createUint8ArrayFromArrayBuffer as k, offChange as l, readVarString$2 as m, floor$2 as n, onChange as o, getUnixTime$1 as p, equalityDeep$1 as q, readVarUint$2 as r, setIfUndefined$1 as s, toUint8Array$1 as t, writeVarString$2 as u, varStorage as v, writeVarUint$2 as w, map as x, ObservableV2 as y, length$3 as z };
-//# sourceMappingURL=p-DTHqEUDc.js.map
+export { isNode as A, min$2 as B, pow as C, HocuspocusProviderWebsocket as D, KritzelEraserTool as E, KritzelImageTool as F, KritzelCursorHelper as G, HocuspocusProvider as H, KritzelSelectionTool as I, IndexedDBSyncProvider as J, KritzelImage as K, KritzelAppStateMap as L, ABSOLUTE_SCALE_MAX as M, ABSOLUTE_SCALE_MIN as N, Observable$1 as O, defineCustomElement as P, KritzelEngine as Q, writeVarUint8Array$2 as a, readVarUint8Array$2 as b, applyUpdate as c, encodeStateVector as d, encodeStateAsUpdate as e, createEncoder$1 as f, createDecoder$1 as g, create$8 as h, fromBase64 as i, toBase64 as j, createUint8ArrayFromArrayBuffer as k, offChange as l, readVarString$2 as m, floor$2 as n, onChange as o, getUnixTime$1 as p, equalityDeep$1 as q, readVarUint$2 as r, setIfUndefined$1 as s, toUint8Array$1 as t, writeVarString$2 as u, varStorage as v, writeVarUint$2 as w, map as x, ObservableV2 as y, length$3 as z };
+//# sourceMappingURL=p-D7BLVRXX.js.map
 
-//# sourceMappingURL=p-DTHqEUDc.js.map
+//# sourceMappingURL=p-D7BLVRXX.js.map