kritzel-stencil 0.0.159 → 0.0.161

package/dist/components/{p-BAplhrRJ.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) {
@@ -471,32 +528,43 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 if (!this.hasResized) {
                     return;
                 }
+                const rotation = selectionGroup.rotation;
+                const sin = Math.sin(rotation);
+                const cos = Math.cos(rotation);
+                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 - dx;
-                        this.newSize.height = this.initialSize.height - dy;
-                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
-                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
+                        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 + dx;
-                        this.newSize.height = this.initialSize.height - dy;
-                        this.newSize.x = this.initialSize.x;
-                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
+                        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 - dx;
-                        this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
-                        this.newSize.y = this.initialSize.y;
+                        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 + dx;
-                        this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = this.initialSize.x;
-                        this.newSize.y = this.initialSize.y;
+                        this.newSize.width = this.initialSize.width + localDx * objectScale;
+                        this.newSize.height = this.initialSize.height + localDy * objectScale;
                         break;
                 }
+                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);
             }
         }
@@ -522,32 +590,43 @@ class KritzelResizeHandler extends KritzelBaseHandler {
                 if (!this.hasResized) {
                     return;
                 }
+                const rotation = selectionGroup.rotation;
+                const sin = Math.sin(rotation);
+                const cos = Math.cos(rotation);
+                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 - dx;
-                        this.newSize.height = this.initialSize.height - dy;
-                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
-                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
+                        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 + dx;
-                        this.newSize.height = this.initialSize.height - dy;
-                        this.newSize.x = this.initialSize.x;
-                        this.newSize.y = dy / this._core.store.state.scale + this.initialSize.y;
+                        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 - dx;
-                        this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = dx / this._core.store.state.scale + this.initialSize.x;
-                        this.newSize.y = this.initialSize.y;
+                        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 + dx;
-                        this.newSize.height = this.initialSize.height + dy;
-                        this.newSize.x = this.initialSize.x;
-                        this.newSize.y = this.initialSize.y;
+                        this.newSize.width = this.initialSize.width + localDx * objectScale;
+                        this.newSize.height = this.initialSize.height + localDy * objectScale;
                         break;
                 }
+                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);
             }
         }
@@ -600,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;
@@ -622,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;
@@ -640,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);
@@ -659,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);
@@ -717,6 +800,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     objectIds = [];
     // Store snapshots of object state for transformations (rotation, resize)
     unchangedObjectSnapshots = new Map();
+    snapshotRotation = 0;
     minX;
     maxX;
     minY;
@@ -787,6 +871,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
      */
     captureUnchangedSnapshots() {
         this.unchangedObjectSnapshots.clear();
+        this.snapshotRotation = this.rotation;
         this.objects.forEach(obj => {
             this.unchangedObjectSnapshots.set(obj.id, {
                 id: obj.id,
@@ -846,14 +931,56 @@ class KritzelSelectionGroup extends KritzelBaseObject {
     resize(x, y, width, height) {
         const widthScaleFactor = width / this.width;
         const heightScaleFactor = height / this.height;
-        const deltaX = x - this.translateX;
-        const deltaY = y - this.translateY;
+        // Calculate old center
+        const oldCenterX = this.translateX + this.totalWidth / 2 / this.scale;
+        const oldCenterY = this.translateY + this.totalHeight / 2 / this.scale;
+        // Calculate new center
+        const newTotalWidth = width + this.padding * 2;
+        const newTotalHeight = height + this.padding * 2;
+        const newCenterX = x + newTotalWidth / 2 / this.scale;
+        const newCenterY = y + newTotalHeight / 2 / this.scale;
+        const rotation = this.rotation;
+        const cos = Math.cos(-rotation);
+        const sin = Math.sin(-rotation);
+        const cosR = Math.cos(rotation);
+        const sinR = Math.sin(rotation);
         this._core.store.state.objects.transaction(() => {
             this.objects.forEach(child => {
-                const updatedWidth = child.width * widthScaleFactor;
-                const updatedHeight = child.height * heightScaleFactor;
-                const updatedX = child.translateX + deltaX + (child.translateX - this.translateX) * (widthScaleFactor - 1);
-                const updatedY = child.translateY + deltaY + (child.translateY - this.translateY) * (heightScaleFactor - 1);
+                // Calculate child center
+                const childCenterX = child.translateX + child.totalWidth / 2 / child.scale;
+                const childCenterY = child.translateY + child.totalHeight / 2 / child.scale;
+                // Vector from old group center to child center
+                const dx = childCenterX - oldCenterX;
+                const dy = childCenterY - oldCenterY;
+                // Rotate to local space (align with group axes)
+                const localX = dx * cos - dy * sin;
+                const localY = dx * sin + dy * cos;
+                // Scale in local space
+                const scaledLocalX = localX * widthScaleFactor;
+                const scaledLocalY = localY * heightScaleFactor;
+                // Rotate back to world space
+                const rotatedX = scaledLocalX * cosR - scaledLocalY * sinR;
+                const rotatedY = scaledLocalX * sinR + scaledLocalY * cosR;
+                // New child center
+                const newChildCenterX = newCenterX + rotatedX;
+                const newChildCenterY = newCenterY + rotatedY;
+                // New child top-left
+                // Calculate relative rotation
+                const relativeRotation = child.rotation - rotation;
+                const cosRel = Math.cos(relativeRotation);
+                const sinRel = Math.sin(relativeRotation);
+                // Project the group's scale factors onto the child's local axes
+                // We use absolute values because scaling is magnitude-based
+                // If the child is aligned (0 deg), cos=1, sin=0 -> scales match
+                // If the child is 90 deg, cos=0, sin=1 -> scales swap
+                const newChildWidthScale = Math.sqrt(Math.pow(widthScaleFactor * cosRel, 2) + Math.pow(heightScaleFactor * sinRel, 2));
+                const newChildHeightScale = Math.sqrt(Math.pow(widthScaleFactor * sinRel, 2) + Math.pow(heightScaleFactor * cosRel, 2));
+                const updatedWidth = child.width * newChildWidthScale;
+                const updatedHeight = child.height * newChildHeightScale;
+                const updatedTotalWidth = updatedWidth + child.padding * 2;
+                const updatedTotalHeight = updatedHeight + child.padding * 2;
+                const updatedX = newChildCenterX - updatedTotalWidth / 2 / child.scale;
+                const updatedY = newChildCenterY - updatedTotalHeight / 2 / child.scale;
                 child.resize(updatedX, updatedY, updatedWidth, updatedHeight);
             });
             // Refresh dimensions and update the SelectionGroup to propagate changes to other tabs
@@ -866,7 +993,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         this.rotation = value;
         const centerX = this.translateX + this.totalWidth / 2 / this.scale;
         const centerY = this.translateY + this.totalHeight / 2 / this.scale;
-        const angle = value;
+        const angle = value - this.snapshotRotation;
         const cos = Math.cos(angle);
         const sin = Math.sin(angle);
         this._core.store.state.objects.transaction(() => {
@@ -882,7 +1009,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
                 const rotatedY = sin * offsetX + cos * offsetY;
                 child.translateX = centerX + rotatedX - child.totalWidth / 2 / child.scale;
                 child.translateY = centerY + rotatedY - child.totalHeight / 2 / child.scale;
-                child.rotate(this.objects.length === 1 ? value : value + unchangedSnapshot.rotation);
+                child.rotate(this.objects.length === 1 ? value : unchangedSnapshot.rotation + angle);
             });
         });
     }
@@ -913,14 +1040,45 @@ class KritzelSelectionGroup extends KritzelBaseObject {
             this.height = (this.maxY - this.minY - this.padding) * this.scale;
         }
         else {
-            this.minX = Math.min(...this.objects.map(obj => obj.minXRotated));
-            this.maxX = Math.max(...this.objects.map(obj => obj.maxXRotated));
-            this.minY = Math.min(...this.objects.map(obj => obj.minYRotated));
-            this.maxY = Math.max(...this.objects.map(obj => obj.maxYRotated));
-            this.translateX = this.minX - this.padding;
-            this.translateY = this.minY - this.padding;
-            this.width = (this.maxX - this.minX - this.padding) * this.scale;
-            this.height = (this.maxY - this.minY - this.padding) * this.scale;
+            const rotation = this.rotation;
+            const cos = Math.cos(-rotation);
+            const sin = Math.sin(-rotation);
+            let minX = Infinity;
+            let maxX = -Infinity;
+            let minY = Infinity;
+            let maxY = -Infinity;
+            this.objects.forEach(obj => {
+                const polygon = obj.rotatedPolygon;
+                const corners = [polygon.topLeft, polygon.topRight, polygon.bottomRight, polygon.bottomLeft];
+                corners.forEach(corner => {
+                    // Rotate corner into local space (aligned with group rotation)
+                    const rx = corner.x * cos - corner.y * sin;
+                    const ry = corner.x * sin + corner.y * cos;
+                    if (rx < minX)
+                        minX = rx;
+                    if (rx > maxX)
+                        maxX = rx;
+                    if (ry < minY)
+                        minY = ry;
+                    if (ry > maxY)
+                        maxY = ry;
+                });
+            });
+            // Dimensions in world units (unrotated)
+            const worldWidth = maxX - minX;
+            const worldHeight = maxY - minY;
+            this.width = (worldWidth - this.padding) * this.scale;
+            this.height = (worldHeight - this.padding) * this.scale;
+            // Center of the box in rotated space
+            const cRx = (minX + maxX) / 2;
+            const cRy = (minY + maxY) / 2;
+            // Rotate center back to world space
+            const cosR = Math.cos(rotation);
+            const sinR = Math.sin(rotation);
+            const cx = cRx * cosR - cRy * sinR;
+            const cy = cRx * sinR + cRy * cosR;
+            this.translateX = cx - (this.width / this.scale + 2 * this.padding) / 2;
+            this.translateY = cy - (this.height / this.scale + 2 * this.padding) / 2;
         }
         this._core.store.state.objects.update(this);
     }
@@ -33890,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,
@@ -33927,6 +34087,10 @@ const DEFAULT_ENGINE_CONFIG = {
     longTouchDelay: 300,
     pointers: new Map(),
     workspaces: [],
+    cursor: {
+        icon: 'default',
+        iconActive: 'default'
+    }
 };
 
 class KritzelCustomElement extends KritzelBaseObject {
@@ -34521,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();
@@ -35005,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; }
@@ -35044,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;
@@ -35084,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);
         }
@@ -35097,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);
     }
@@ -35106,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);
     }
@@ -35280,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;
     }
@@ -35303,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);
@@ -35312,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);
@@ -35353,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';
@@ -35369,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: {
@@ -35467,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: {
@@ -35493,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`,
@@ -35507,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", {
@@ -35523,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],
@@ -35556,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") {
@@ -35587,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-BAplhrRJ.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-BAplhrRJ.js.map
+//# sourceMappingURL=p-D7BLVRXX.js.map