kritzel-stencil 0.0.161 → 0.0.163

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-SGde3HXB.js';
-import { U as KritzelDevicesHelper, G as KritzelBrushTool, L as KritzelTextTool, V as KritzelMouseButton, N as KritzelSelectionTool, S as DEFAULT_BRUSH_CONFIG, I as KritzelEraserTool, T as DEFAULT_TEXT_CONFIG, J as KritzelImageTool, R as KritzelWorkspace, W as KritzelIconRegistry, X as KritzelKeyboardHelper, Y as KritzelBaseHandler, Z as KritzelToolRegistry, _ as KritzelSelectionBox, $ as KritzelSelectionGroup, a0 as KritzelBaseObject, F as KritzelImage, K as KritzelText, E as KritzelPath, a1 as Doc, a2 as DEFAULT_SYNC_CONFIG, a3 as UndoManager, Q as KritzelAppStateMap, a4 as ObjectHelper, a5 as KritzelEventHelper, a6 as KritzelBaseTool, M as KritzelCursorHelper } from './default-text-tool.config-BvCgOiKA.js';
+import { Y as KritzelDevicesHelper, I as KritzelBrushTool, N as KritzelTextTool, Z as KritzelMouseButton, _ as KritzelBaseObject, $ as Schema, a0 as schema, a1 as addListNodes, a2 as EditorView, a3 as EditorState, a4 as keymap, a5 as TextSelection, a6 as KritzelKeyboardHelper, a7 as KritzelToolRegistry, a8 as KritzelGeometryHelper, a9 as baseKeymap, aa as KritzelBaseTool, ab as KritzelEventHelper, Q as KritzelSelectionTool, V as DEFAULT_BRUSH_CONFIG, X as DEFAULT_LINE_TOOL_CONFIG, J as KritzelLineTool, L as KritzelEraserTool, W as DEFAULT_TEXT_CONFIG, M as KritzelImageTool, T as KritzelWorkspace, ac as KritzelIconRegistry, ad as KritzelBaseHandler, ae as KritzelSelectionBox, af as KritzelSelectionGroup, F as KritzelImage, K as KritzelText, G as KritzelLine, E as KritzelPath, ag as Doc, ah as DEFAULT_SYNC_CONFIG, ai as UndoManager, P as KritzelCursorHelper, S as KritzelAppStateMap, U as KritzelAnchorManager, aj as ObjectHelper, ak as KritzelClassHelper } from './default-line-tool.config-C35P3XfD.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -247,7 +247,7 @@ const KritzelControlTextConfig = class {
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
 
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:10001}";
+const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;background:var(--kritzel-controls-background-color, #ffffff);border-radius:12px;padding:6px;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);border:1px solid #ebebeb;z-index:10001;min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:10001}";
 
 const KritzelControls = class {
     constructor(hostRef) {
@@ -263,17 +263,24 @@ const KritzelControls = class {
     firstConfig = null;
     isTooltipVisible = false;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    selectedSubOptions = new Map();
+    openSubMenuControl = null;
     handleDocumentClick(event) {
         const element = event.target;
         if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
             return;
         }
         this.isTooltipVisible = false;
+        // Close submenu when clicking outside
+        if (!element.closest('.kritzel-control-split') && !element.closest('.kritzel-submenu')) {
+            this.openSubMenuControl = null;
+        }
     }
     handleKeyDown(event) {
         if (event.key === 'Escape') {
             event.preventDefault();
             this.closeTooltip();
+            this.openSubMenuControl = null;
             this.kritzelEngine?.enable();
         }
     }
@@ -349,36 +356,91 @@ const KritzelControls = class {
         this.isTooltipVisible = false;
         this.kritzelEngine?.enable();
     }
+    /**
+     * Get the currently selected sub-option for a control.
+     * Returns the first sub-option as default if none is selected.
+     */
+    getSelectedSubOption(control) {
+        if (!control.subOptions?.length)
+            return undefined;
+        return this.selectedSubOptions.get(control.name) || control.subOptions[0];
+    }
+    /**
+     * Toggle the submenu for a split-button control
+     */
+    toggleSubMenu(event, control) {
+        event.stopPropagation();
+        if (this.openSubMenuControl?.name === control.name) {
+            this.openSubMenuControl = null;
+        }
+        else {
+            this.openSubMenuControl = control;
+        }
+    }
+    /**
+     * Select a sub-option and update the tool property
+     */
+    async selectSubOption(control, option) {
+        // Update the selected sub-options map (create new Map for reactivity)
+        const newMap = new Map(this.selectedSubOptions);
+        newMap.set(control.name, option);
+        this.selectedSubOptions = newMap;
+        // Update the tool property if the tool is instantiated
+        if (control.tool && typeof control.tool !== 'function') {
+            control.tool[option.toolProperty] = option.value;
+        }
+        // Close the submenu
+        this.openSubMenuControl = null;
+        // Activate this control
+        await this.handleControlClick(control);
+    }
     render() {
-        const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;
-        return (h(Host, { key: 'c01351cbf438f2e36249b2ef3ef8725edcabd57b', class: {
+        const hasConfigUI = this.activeControl?.tool instanceof KritzelBrushTool ||
+            this.activeControl?.tool instanceof KritzelTextTool;
+        return (h(Host, { key: '34a8a81224f1714a30a0d6e03fb81ed031fe36a0', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '3c14cf25dd51f123dc8d33be92992e2f2c18ac40', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '8ddfe7b4872d59b08b0561dbd61c67b9c245dcc9', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '05719acfe12d1770bf49fb7d9989619f2e27ee0f', class: "kritzel-controls" }, this.controls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '370229830b9a6c0ae5704d9fb0ce35d130fcf049', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
+                // Check if this control has sub-options (split-button)
+                if (control.subOptions?.length) {
+                    const selectedSubOption = this.getSelectedSubOption(control);
+                    const isActive = this.activeControl?.name === control.name;
+                    const isSubMenuOpen = this.openSubMenuControl?.name === control.name;
+                    return (h("div", { class: {
+                            'kritzel-control-split': true,
+                            'selected': isActive,
+                        }, key: control.name }, h("button", { class: "kritzel-control-main", onClick: () => this.handleControlClick(control), title: selectedSubOption?.label }, h("kritzel-icon", { name: selectedSubOption?.icon || control.icon })), h("button", { class: {
+                            'kritzel-control-dropdown': true,
+                            'visible': isActive,
+                        }, onClick: (e) => this.toggleSubMenu(e, control), "aria-label": "Select shape type", "aria-expanded": isSubMenuOpen ? 'true' : 'false', tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), isSubMenuOpen && (h("div", { class: "kritzel-submenu" }, control.subOptions.map(option => (h("button", { class: {
+                            'kritzel-submenu-item': true,
+                            'active': option.id === selectedSubOption?.id,
+                        }, key: option.id, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
+                }
+                // Regular tool control (no sub-options)
                 return (h("button", { class: {
                         'kritzel-control': true,
                         'selected': this.activeControl?.name === control?.name,
                     }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, h("kritzel-icon", { name: control.icon })));
             }
-            if (control.type === 'divider') {
-                return h("div", { class: "kritzel-divider", key: control.name });
-            }
             if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {
-                return (h("div", { class: "kritzel-config-container", key: control.name }, h("kritzel-tooltip", { ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { tabIndex: 0, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
+                return (h("div", { class: {
+                        'kritzel-config-container': true,
+                        'visible': hasConfigUI,
+                    }, key: control.name }, h("kritzel-tooltip", { ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
                         if (event.key === 'Enter') {
                             this.handleConfigClick?.(event);
                         }
                     }, style: {
-                        cursor: this.activeControl.config ? 'pointer' : 'default',
-                        pointerEvents: hasNoConfig ? 'none' : 'auto',
+                        cursor: 'pointer',
                     } }, this.activeControl.tool instanceof KritzelBrushTool && (h("div", { class: "color-container" }, h("kritzel-color", { value: this.activeToolAsBrushTool?.color, size: this.activeToolAsBrushTool?.size, style: {
                         borderRadius: '50%',
                         border: 'none',
-                    } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: this.activeToolAsTextTool?.fontFamily, size: this.activeToolAsTextTool?.fontSize, color: this.activeToolAsTextTool?.fontColor }))), hasNoConfig && h("div", { class: "no-config" }))));
+                    } }))), this.activeControl.tool instanceof KritzelTextTool && (h("div", { class: "font-container" }, h("kritzel-font", { fontFamily: this.activeToolAsTextTool?.fontFamily, size: this.activeToolAsTextTool?.fontSize, color: this.activeToolAsTextTool?.fontColor }))))));
             }
         }))));
     }
@@ -573,6 +635,596 @@ const KritzelDropdown = class {
 };
 KritzelDropdown.style = kritzelDropdownCss;
 
+var ShapeType;
+(function (ShapeType) {
+    ShapeType["Rectangle"] = "rectangle";
+    ShapeType["Ellipse"] = "ellipse";
+    ShapeType["Triangle"] = "triangle";
+})(ShapeType || (ShapeType = {}));
+
+class KritzelShape extends KritzelBaseObject {
+    __class__ = 'KritzelShape';
+    shapeType = ShapeType.Rectangle;
+    fillColor = 'transparent';
+    strokeColor = '#000000';
+    strokeWidth = 4;
+    fontFamily = 'Arial';
+    fontSize = 16;
+    fontColor = '#000000';
+    /** Screen-space x coordinate of the shape's top-left corner (like Path.x) */
+    x = 0;
+    /** Screen-space y coordinate of the shape's top-left corner (like Path.y) */
+    y = 0;
+    scale = 1;
+    scaleFactor = 1;
+    isDebugInfoVisible = true;
+    isEditable = true;
+    isEditing = false;
+    editor = null;
+    content = null;
+    _schema = new Schema({
+        nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
+        marks: schema.spec.marks,
+    });
+    uneditedObject = null;
+    /**
+     * Returns the viewBox for the shape's SVG, using screen-space coordinates.
+     * This follows the same pattern as KritzelPath.viewBox.
+     */
+    get viewBox() {
+        return `${this.x} ${this.y} ${this.width} ${this.height}`;
+    }
+    constructor(config) {
+        super();
+        if (config) {
+            this.x = config.x ?? 0;
+            this.y = config.y ?? 0;
+            this.translateX = config.translateX ?? 0;
+            this.translateY = config.translateY ?? 0;
+            this.width = config.width ?? 100;
+            this.height = config.height ?? 100;
+            this.shapeType = config.shapeType ?? ShapeType.Rectangle;
+            this.fillColor = config.fillColor ?? 'transparent';
+            this.strokeColor = config.strokeColor ?? '#000000';
+            this.strokeWidth = config.strokeWidth ?? 4;
+            this.fontSize = config.fontSize ?? 16;
+            this.fontFamily = config.fontFamily ?? 'Arial';
+            this.fontColor = config.fontColor ?? '#000000';
+            this.scale = config.scale ?? 1;
+            this.scaleFactor = config.scaleX ?? 1;
+        }
+    }
+    /**
+     * Creates a new KritzelShape with screen-space coordinates.
+     * Following the same pattern as KritzelPath.create():
+     * - x, y are screen-space coordinates of the shape's top-left corner
+     * - translateX, translateY should be set to -viewportTranslateX, -viewportTranslateY
+     * - width, height are in screen-space
+     * - scale is the viewport scale at creation time
+     */
+    static create(core, config) {
+        const object = new KritzelShape();
+        object._core = core;
+        object.id = object.generateId();
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.x = config?.x ?? 0;
+        object.y = config?.y ?? 0;
+        object.translateX = config?.translateX ?? 0;
+        object.translateY = config?.translateY ?? 0;
+        object.width = config?.width ?? 100;
+        object.height = config?.height ?? 100;
+        object.shapeType = config?.shapeType ?? ShapeType.Rectangle;
+        object.fillColor = config?.fillColor ?? 'transparent';
+        object.strokeColor = config?.strokeColor ?? '#000000';
+        object.strokeWidth = config?.strokeWidth ?? 4;
+        object.fontSize = config?.fontSize ?? 16;
+        object.fontFamily = config?.fontFamily ?? 'Arial';
+        object.fontColor = config?.fontColor ?? '#000000';
+        object.backgroundColor = 'transparent';
+        object.scaleFactor = 1;
+        object.scale = core.store.state.scale;
+        object.zIndex = core.store.currentZIndex;
+        object.editor = object.createEditor();
+        // Compute world-space translateX/Y from screen-space coordinates
+        // This follows the same pattern as KritzelPath.updateDimensions()
+        object.updateDimensions();
+        return object;
+    }
+    /**
+     * Updates the translateX/Y to world coordinates based on screen-space x, y.
+     * This follows the same pattern as KritzelPath.updateDimensions().
+     *
+     * The formula: translateX = (x + initialTranslateX) / scale
+     * where initialTranslateX was -viewportTranslateX
+     *
+     * This converts screen-space position to world coordinates.
+     */
+    updateDimensions() {
+        this.translateX = (this.x + this.translateX) / this.scale;
+        this.translateY = (this.y + this.translateY) / this.scale;
+    }
+    mount(element) {
+        if (element === null || this.isInViewport() === false) {
+            return;
+        }
+        if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+    }
+    mountTextEditor(element) {
+        if (element === null) {
+            return;
+        }
+        if (this.editor.dom.parentElement === element) {
+            return;
+        }
+        element.style.fontFamily = this.fontFamily;
+        element.style.fontSize = `${this.fontSize}pt`;
+        element.style.color = this.fontColor;
+        element.style.whiteSpace = 'pre-wrap';
+        element.style.wordWrap = 'break-word';
+        element.innerHTML = '';
+        element.appendChild(this.editor.dom);
+    }
+    createEditor() {
+        const doc = this._schema.node('doc', null, [this._schema.node('paragraph')]);
+        return new EditorView(null, {
+            state: EditorState.create({
+                doc: doc,
+                plugins: [keymap(baseKeymap)],
+            }),
+            editable: () => false,
+            dispatchTransaction: transaction => {
+                const newState = this.editor.state.apply(transaction);
+                this.editor.updateState(newState);
+                if (transaction.docChanged) {
+                    this.content = newState.doc.toJSON();
+                    if (!transaction.getMeta('fromRemote')) {
+                        this._core.store.state.objects.update(this, { temporary: true });
+                    }
+                }
+            },
+        });
+    }
+    setContent(content) {
+        this.content = content;
+        if (this.editor && content) {
+            const newDoc = this.editor.state.schema.nodeFromJSON(content);
+            const tr = this.editor.state.tr.replaceWith(0, this.editor.state.doc.content.size, newDoc.content);
+            tr.setMeta('fromRemote', true);
+            this.editor.dispatch(tr);
+        }
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        this.width = width;
+        this.height = height;
+        this.translateX = x;
+        this.translateY = y;
+        this._core.store.state.objects.update(this);
+    }
+    focus(coords) {
+        if (this.editor) {
+            const doc = this.editor.state.doc;
+            if (coords?.x && coords?.y) {
+                const pos = this.editor.posAtCoords({ left: coords.x, top: coords.y });
+                if (pos) {
+                    this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
+                    this.editor.focus();
+                    if (KritzelDevicesHelper.isIOS()) {
+                        this.scrollIntoViewOnIOS();
+                    }
+                    return;
+                }
+            }
+            const end = Math.max(1, doc.content.size - 1);
+            this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, end)));
+            this.editor.focus();
+            if (KritzelDevicesHelper.isIOS()) {
+                this.scrollIntoViewOnIOS();
+            }
+        }
+    }
+    scrollIntoViewOnIOS() {
+        setTimeout(() => {
+            if (this.editor && this.editor.dom) {
+                this.editor.dom.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center',
+                    inline: 'nearest',
+                });
+            }
+        }, 300);
+    }
+    edit(event) {
+        KritzelKeyboardHelper.disableInteractiveWidget();
+        this.uneditedObject = this.clone();
+        this._core.store.setState('activeTool', KritzelToolRegistry.getTool('shape'));
+        this.editor.setProps({ editable: () => true });
+        this.isEditing = true;
+        this._core.rerender();
+        this.focus({ x: event?.clientX, y: event?.clientY });
+        KritzelKeyboardHelper.enableInteractiveWidget();
+    }
+    save() {
+        this.content = this.editor.state.doc.toJSON();
+        this.editor.setProps({ editable: () => false });
+        this.editor.dom.blur();
+        this.isEditing = false;
+        this._core.store.state.objects.consolidateTemporaryItems();
+        this._core.store.state.objects.update(this);
+        this._core.engine.emitObjectsChange();
+    }
+    handlePointerDown(event) {
+        if (!this.isEditing) {
+            return;
+        }
+        event.stopPropagation();
+    }
+    handlePointerMove(event) {
+        if (!this.isEditing) {
+            return;
+        }
+        event.stopPropagation();
+    }
+    handlePointerUp(event) {
+        if (!this.isEditing) {
+            return;
+        }
+        event.stopPropagation();
+    }
+    copy() {
+        const copiedObject = super.copy();
+        copiedObject.editor = copiedObject.createEditor();
+        if (this.content) {
+            copiedObject.setContent(this.content);
+        }
+        return copiedObject;
+    }
+    serialize() {
+        const { _core, _elementRef, _schema, element, totalWidth, totalHeight, editor, uneditedObject, ...remainingProps } = this;
+        const clonedProps = structuredClone(remainingProps);
+        if (element && typeof element === 'object' && 'nodeType' in element && element.nodeType === 1) {
+            clonedProps.element = element.cloneNode(true);
+        }
+        return clonedProps;
+    }
+    deserialize(object) {
+        super.deserialize(object);
+        if (object.content) {
+            this.setContent(object.content);
+        }
+        return this;
+    }
+    /**
+     * Returns the clipping polygon for arrow intersection.
+     * For ellipse: returns a many-sided polygon approximation
+     * For triangle: returns the 3 corners
+     * For rectangle: returns null (uses default rotatedPolygon)
+     *
+     * Includes padding for half the stroke width so arrow heads don't overlap the stroke.
+     */
+    getClipPolygon() {
+        // Calculate world-space center and dimensions
+        const worldWidth = this.totalWidth / this.scale;
+        const worldHeight = this.totalHeight / this.scale;
+        const centerX = this.translateX + worldWidth / 2;
+        const centerY = this.translateY + worldHeight / 2;
+        // Add padding for stroke width so arrows don't overlap the stroke
+        const strokePadding = (this.strokeWidth / this.scale) / 2;
+        switch (this.shapeType) {
+            case ShapeType.Ellipse:
+                // Return a 32-segment polygon approximation of the ellipse
+                // Add stroke padding to radii
+                return KritzelGeometryHelper.getEllipsePolygonApproximation(centerX, centerY, worldWidth / 2 + strokePadding, worldHeight / 2 + strokePadding, 32, this.rotation);
+            case ShapeType.Triangle:
+                // Return the 3 corners of the triangle in world coordinates
+                // Triangle: top-center, bottom-right, bottom-left
+                // Expand each vertex outward from center by strokePadding
+                const expandVertex = (vx, vy) => {
+                    const dx = vx - centerX;
+                    const dy = vy - centerY;
+                    const dist = Math.sqrt(dx * dx + dy * dy);
+                    if (dist === 0)
+                        return { x: vx, y: vy };
+                    const scale = (dist + strokePadding) / dist;
+                    return {
+                        x: centerX + dx * scale,
+                        y: centerY + dy * scale
+                    };
+                };
+                const topX = this.translateX + worldWidth / 2;
+                const topY = this.translateY;
+                const bottomLeftX = this.translateX;
+                const bottomLeftY = this.translateY + worldHeight;
+                const bottomRightX = this.translateX + worldWidth;
+                const bottomRightY = this.translateY + worldHeight;
+                const expandedTop = expandVertex(topX, topY);
+                const expandedBottomRight = expandVertex(bottomRightX, bottomRightY);
+                const expandedBottomLeft = expandVertex(bottomLeftX, bottomLeftY);
+                // Apply rotation around center if rotated
+                if (this.rotation !== 0) {
+                    const cos = Math.cos(this.rotation);
+                    const sin = Math.sin(this.rotation);
+                    const rotate = (p) => {
+                        const dx = p.x - centerX;
+                        const dy = p.y - centerY;
+                        return {
+                            x: centerX + dx * cos - dy * sin,
+                            y: centerY + dx * sin + dy * cos
+                        };
+                    };
+                    return [
+                        rotate(expandedTop),
+                        rotate(expandedBottomRight),
+                        rotate(expandedBottomLeft)
+                    ];
+                }
+                return [expandedTop, expandedBottomRight, expandedBottomLeft];
+            case ShapeType.Rectangle:
+            default:
+                // For rectangles, return null to use the default rotatedPolygon
+                return null;
+        }
+    }
+    /**
+     * Returns the SVG path for rendering the shape.
+     * The path uses screen-space coordinates relative to (x, y).
+     */
+    getSvgPath() {
+        const w = this.width;
+        const h = this.height;
+        switch (this.shapeType) {
+            case ShapeType.Rectangle:
+                return `M ${this.x} ${this.y} L ${this.x + w} ${this.y} L ${this.x + w} ${this.y + h} L ${this.x} ${this.y + h} Z`;
+            case ShapeType.Ellipse:
+                const cx = this.x + w / 2;
+                const cy = this.y + h / 2;
+                const rx = w / 2;
+                const ry = h / 2;
+                return `M ${cx - rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx + rx} ${cy} A ${rx} ${ry} 0 1 0 ${cx - rx} ${cy}`;
+            case ShapeType.Triangle:
+                const topX = this.x + w / 2;
+                const topY = this.y;
+                const bottomLeftX = this.x;
+                const bottomLeftY = this.y + h;
+                const bottomRightX = this.x + w;
+                const bottomRightY = this.y + h;
+                return `M ${topX} ${topY} L ${bottomRightX} ${bottomRightY} L ${bottomLeftX} ${bottomLeftY} Z`;
+            default:
+                return `M ${this.x} ${this.y} L ${this.x + w} ${this.y} L ${this.x + w} ${this.y + h} L ${this.x} ${this.y + h} Z`;
+        }
+    }
+}
+
+class KritzelShapeTool extends KritzelBaseTool {
+    shapeType = ShapeType.Rectangle;
+    fillColor = 'transparent';
+    strokeColor = '#000000';
+    strokeWidth = 4;
+    fontFamily = 'Arial';
+    fontSize = 16;
+    fontColor = '#000000';
+    palette = [
+        '#000000',
+        '#FFFFFF',
+        '#FF0000',
+        '#00FF00',
+        '#0000FF',
+        '#FFFF00',
+        '#FF00FF',
+        '#00FFFF',
+        '#808080',
+        '#C0C0C0',
+        '#800000',
+        '#008000',
+        '#000080',
+        '#808000',
+        '#800080',
+    ];
+    startX = 0;
+    startY = 0;
+    isDrawing = false;
+    currentShape = null;
+    constructor(core) {
+        super(core);
+    }
+    handlePointerDown(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            const path = event.composedPath().slice(1);
+            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
+            const object = this._core.findObjectById(objectElement?.id);
+            const activeShape = this._core.store.activeShape;
+            if (activeShape === null && object instanceof KritzelShape) {
+                object.edit(event);
+                return;
+            }
+            if (activeShape !== null && object instanceof KritzelShape) {
+                activeShape.save();
+                object.edit(event);
+                return;
+            }
+            if (activeShape !== null && object instanceof KritzelShape === false) {
+                this._core.resetActiveShape();
+                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                return;
+            }
+            if (KritzelEventHelper.isLeftClick(event) === false) {
+                return;
+            }
+            this.startDrawing(event.clientX, event.clientY);
+        }
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            const path = event.composedPath().slice(1);
+            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
+            const object = this._core.findObjectById(objectElement?.id);
+            const activeShape = this._core.store.activeShape;
+            if (activeShape === null && object instanceof KritzelShape) {
+                object.edit(event);
+                return;
+            }
+            if (activeShape !== null && object instanceof KritzelShape) {
+                activeShape.save();
+                object.edit(event);
+                return;
+            }
+            if (activeShape !== null && object instanceof KritzelShape === false) {
+                this._core.resetActiveShape();
+                this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                return;
+            }
+            if (activePointers.length > 1) {
+                return;
+            }
+            const clientX = Math.round(activePointers[0].clientX);
+            const clientY = Math.round(activePointers[0].clientY);
+            this.startDrawing(clientX, clientY);
+        }
+    }
+    handlePointerMove(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (!this.isDrawing || !this.currentShape) {
+            return;
+        }
+        if (event.pointerType === 'mouse') {
+            this.updateShapeSize(event.clientX, event.clientY);
+        }
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (activePointers.length === 1) {
+                const clientX = Math.round(activePointers[0].clientX);
+                const clientY = Math.round(activePointers[0].clientY);
+                this.updateShapeSize(clientX, clientY);
+            }
+        }
+    }
+    handlePointerUp(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (!this.isDrawing || !this.currentShape) {
+            return;
+        }
+        this.finishDrawing();
+    }
+    /**
+     * Start drawing a shape. Following the same pattern as LineTool/BrushTool:
+     * - Store screen coordinates for startX, startY
+     * - Set translateX/Y to -viewportTranslateX/Y (viewport offset)
+     * - Set x, y to the actual screen position
+     * - Let updateDimensions() convert to world coordinates
+     */
+    startDrawing(clientX, clientY) {
+        // Store screen coordinates (relative to host element)
+        this.startX = clientX - this._core.store.offsetX;
+        this.startY = clientY - this._core.store.offsetY;
+        this.isDrawing = true;
+        // Create shape using screen coordinates, following Path/Line pattern
+        this.currentShape = KritzelShape.create(this._core, {
+            x: this.startX,
+            y: this.startY,
+            translateX: -this._core.store.state.translateX,
+            translateY: -this._core.store.state.translateY,
+            width: 1,
+            height: 1,
+            shapeType: this.shapeType,
+            fillColor: this.fillColor,
+            strokeColor: this.strokeColor,
+            strokeWidth: this.strokeWidth,
+            fontSize: this.fontSize,
+            fontFamily: this.fontFamily,
+            fontColor: this.fontColor,
+        });
+        this._core.store.state.objects.insert(this.currentShape);
+        this._core.rerender();
+    }
+    /**
+     * Update shape size during drawing. Following the same pattern as LineTool:
+     * - Use screen coordinates directly
+     * - The shape's x, y, width, height are all in screen space
+     * - updateDimensions() handles conversion to world coordinates
+     */
+    updateShapeSize(clientX, clientY) {
+        if (!this.currentShape) {
+            return;
+        }
+        const currentX = clientX - this._core.store.offsetX;
+        const currentY = clientY - this._core.store.offsetY;
+        // Calculate bounding box in screen coordinates
+        const minX = Math.min(this.startX, currentX);
+        const minY = Math.min(this.startY, currentY);
+        const width = Math.abs(currentX - this.startX);
+        const height = Math.abs(currentY - this.startY);
+        // Update shape with screen coordinates
+        this.currentShape.x = minX;
+        this.currentShape.y = minY;
+        this.currentShape.width = Math.max(1, width);
+        this.currentShape.height = Math.max(1, height);
+        // Recalculate world-space translateX/Y
+        // Reset translateX/Y to initial value before updateDimensions
+        this.currentShape.translateX = -this._core.store.state.translateX;
+        this.currentShape.translateY = -this._core.store.state.translateY;
+        this.currentShape.updateDimensions();
+        this._core.store.state.objects.update(this.currentShape);
+    }
+    finishDrawing() {
+        if (!this.currentShape) {
+            return;
+        }
+        // Remove shape if it's too small (likely an accidental click)
+        // Compare in screen space
+        if (this.currentShape.width < 10 && this.currentShape.height < 10) {
+            const shapeId = this.currentShape.id;
+            this._core.store.state.objects.remove(o => o.id === shapeId);
+        }
+        else {
+            this.currentShape.zIndex = this._core.store.currentZIndex;
+            this._core.store.state.objects.update(this.currentShape);
+            this._core.engine.emitObjectsChange();
+            this._core.selectObjects([this.currentShape]);
+            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        }
+        this.isDrawing = false;
+        this.currentShape = null;
+        this._core.rerender();
+    }
+}
+
+const DEFAULT_SHAPE_CONFIG = {
+    shapeType: ShapeType.Rectangle,
+    fillColor: 'transparent',
+    strokeColor: '#000000',
+    strokeWidth: 4,
+    fontColor: '#000000',
+    fontSize: 16,
+    fontFamily: 'Arial',
+    palette: [
+        '#000000',
+        '#ff5252',
+        '#ffbc00',
+        '#00c853',
+        '#0000FF',
+        '#d500f9',
+        '#fafafa',
+        '#a52714',
+        '#ee8100',
+        '#558b2f',
+        '#01579b',
+        '#8e24aa',
+        '#90a4ae',
+    ],
+};
+
 const ABSOLUTE_SCALE_MAX = 1000;
 const ABSOLUTE_SCALE_MIN = 0.0001;
 
@@ -603,6 +1255,13 @@ const KritzelEditor = class {
             icon: 'pen',
             config: DEFAULT_BRUSH_CONFIG,
         },
+        {
+            name: 'line',
+            type: 'tool',
+            tool: KritzelLineTool,
+            icon: 'arrow',
+            config: DEFAULT_LINE_TOOL_CONFIG,
+        },
         {
             name: 'eraser',
             type: 'tool',
@@ -616,16 +1275,24 @@ const KritzelEditor = class {
             icon: 'type',
             config: DEFAULT_TEXT_CONFIG,
         },
+        {
+            name: 'shape',
+            type: 'tool',
+            tool: KritzelShapeTool,
+            icon: 'shape-rectangle',
+            config: DEFAULT_SHAPE_CONFIG,
+            subOptions: [
+                { id: 'rectangle', icon: 'shape-rectangle', label: 'Rectangle', value: ShapeType.Rectangle, toolProperty: 'shapeType' },
+                { id: 'ellipse', icon: 'shape-ellipse', label: 'Ellipse', value: ShapeType.Ellipse, toolProperty: 'shapeType' },
+                { id: 'triangle', icon: 'shape-triangle', label: 'Triangle', value: ShapeType.Triangle, toolProperty: 'shapeType' },
+            ],
+        },
         {
             name: 'image',
             type: 'tool',
             tool: KritzelImageTool,
             icon: 'image',
         },
-        {
-            name: 'divider',
-            type: 'divider',
-        },
         {
             name: 'config',
             type: 'config',
@@ -802,7 +1469,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: 'c824014ce85ef5c94436211df5241d23f11caed4' }, h("kritzel-workspace-manager", { key: '8ce43afa37896897674b5df943bef3fe1ffba32b', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '12f80313bb145d9065a6222d5a8b503f0eca177a', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '0a1e63580afcbe65e5cf42833d86c3b34bb686c7', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (h(Host, { key: 'a39268fb2722bc9e1627a46a3430a574322dfdfb' }, h("kritzel-workspace-manager", { key: 'b0c08f2cab64347c0ee14a87ed0ab769a2e95733', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: 'c0efb9b0cdfdf3a9ba945e71e37c60ebfc45e981', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '5a275fb94e2f55a1f79d6d5b5f518305cd739f24', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     static get watchers() { return {
         "isEngineReady": ["onIsEngineReady"],
@@ -18047,6 +18714,14 @@ class KritzelViewport {
             this._core.rerender();
         }, 100);
     }
+    /**
+     * Cancels any pending debounced viewport updates.
+     * Should be called before switching workspaces to prevent the old workspace's
+     * viewport state from being saved to the new workspace.
+     */
+    cancelPendingUpdates() {
+        this._debounceUpdate.cancel();
+    }
     handleResize() {
         this._core.store.state.viewportWidth = this._core.store.state.host.clientWidth;
         this._core.store.state.viewportHeight = this._core.store.state.host.clientHeight;
@@ -18325,18 +19000,14 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
     }
 }
 
-class KritzelClassHelper {
-    static isInstanceOf(object, className) {
-        return !!object && object.__class__ === className;
-    }
-}
-
 const DEFAULT_ENGINE_CONFIG = {
     activeWorkspace: null,
     activeTool: null,
     copiedObjects: null,
     objects: null,
+    snapCandidate: null,
     resizeHandleType: null,
+    lineHandleType: null,
     hasViewportChanged: false,
     hasObjectsChanged: false,
     isReady: false,
@@ -18350,6 +19021,8 @@ const DEFAULT_ENGINE_CONFIG = {
     isRotating: false,
     isRotationHandleHovered: false,
     isRotationHandleSelected: false,
+    isLineHandleSelected: false,
+    isLineHandleDragging: false,
     isDragging: false,
     isDrawing: false,
     isErasing: false,
@@ -18361,7 +19034,7 @@ const DEFAULT_ENGINE_CONFIG = {
     contextMenuY: 0,
     skipContextMenu: false,
     debugInfo: {
-        showObjectInfo: false,
+        showObjectInfo: true,
         showViewportInfo: false
     },
     host: null,
@@ -18464,9 +19137,23 @@ class KritzelReviver {
                     case 'KritzelPath':
                         revivedObj = KritzelPath.create(this._core).deserialize(obj);
                         break;
+                    case 'KritzelLine':
+                        revivedObj = KritzelLine.create(this._core).deserialize(obj);
+                        break;
                     case 'KritzelText':
                         revivedObj = KritzelText.create(this._core, obj.fontSize, obj.fontFamily).deserialize(obj);
                         break;
+                    case 'KritzelShape':
+                        revivedObj = KritzelShape.create(this._core, {
+                            shapeType: obj.shapeType,
+                            fillColor: obj.fillColor,
+                            strokeColor: obj.strokeColor,
+                            strokeWidth: obj.strokeWidth,
+                            fontSize: obj.fontSize,
+                            fontFamily: obj.fontFamily,
+                            fontColor: obj.fontColor,
+                        }).deserialize(obj);
+                        break;
                     case 'KritzelImage':
                         revivedObj = KritzelImage.create(this._core).deserialize(obj);
                         break;
@@ -18494,6 +19181,12 @@ class KritzelReviver {
                     case 'KritzelTextTool':
                         revivedObj = new KritzelTextTool(this._core);
                         break;
+                    case 'KritzelLineTool':
+                        revivedObj = new KritzelLineTool(this._core);
+                        break;
+                    case 'KritzelShapeTool':
+                        revivedObj = new KritzelShapeTool(this._core);
+                        break;
                     default:
                         revivedObj = obj;
                 }
@@ -18969,10 +19662,18 @@ class KritzelStore {
         const activeTexts = this._state.objects.filter(o => o instanceof KritzelText && o.isEditing);
         return activeTexts.length > 0 ? activeTexts[0] : null;
     }
+    get activeShape() {
+        const activeShapes = this._state.objects.filter(o => o instanceof KritzelShape && o.isEditing);
+        return activeShapes.length > 0 ? activeShapes[0] : null;
+    }
     get currentPath() {
         const drawingPaths = this._state.objects.filter(o => o instanceof KritzelPath && o.isCompleted === false);
         return drawingPaths.length > 0 ? drawingPaths[0] : null;
     }
+    get currentLine() {
+        const drawingLines = this._state.objects.filter(o => o instanceof KritzelLine && o.isCompleted === false);
+        return drawingLines.length > 0 ? drawingLines[0] : null;
+    }
     get offsetX() {
         return this._state.host.getBoundingClientRect().left;
     }
@@ -19009,11 +19710,129 @@ class KritzelStore {
     }
 }
 
+/**
+ * Manages cursor state and updates across the application.
+ * Handles cursor changes based on handle hovers, tool states, and interactions.
+ */
+class KritzelCursorManager {
+    _core;
+    _targetElement = null;
+    _shadowRoot = null;
+    constructor(core) {
+        this._core = core;
+    }
+    /**
+     * Sets the target element where cursor styles will be applied.
+     * Also sets the pointer cursor CSS variable for child components.
+     */
+    setTargetElement(element) {
+        // Reset cursor on old target
+        if (this._targetElement) {
+            this._targetElement.style.cursor = '';
+            this._targetElement.style.removeProperty('--kritzel-pointer-cursor');
+        }
+        this._targetElement = element;
+        // Set the pointer cursor CSS variable for child components to use
+        if (this._targetElement) {
+            this._targetElement.style.setProperty('--kritzel-pointer-cursor', KritzelCursorHelper.getPointerCursor());
+        }
+    }
+    /**
+     * Gets the current cursor target element.
+     */
+    getTargetElement() {
+        return this._targetElement;
+    }
+    /**
+     * Sets the shadow root for element detection.
+     */
+    setShadowRoot(shadowRoot) {
+        this._shadowRoot = shadowRoot;
+    }
+    /**
+     * Resets cursor to default state.
+     * Should be called when all pointers are released.
+     */
+    resetToDefault() {
+        this._core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+    }
+    /**
+     * Detects handle hover states using elementsFromPoint() to work with overlapped elements.
+     * This approach finds all elements at the pointer position instead of relying on pointerenter/pointerleave.
+     */
+    updateHoverState(ev) {
+        if (this._core.store.isPointerDown)
+            return;
+        if (!this._shadowRoot)
+            return;
+        const elementsAtPoint = this._shadowRoot.elementsFromPoint(ev.clientX, ev.clientY);
+        if (!elementsAtPoint || elementsAtPoint.length === 0)
+            return;
+        // Check for resize handle overlays (selection group)
+        const resizeHandleOverlay = elementsAtPoint.find(el => el.classList.contains('resize-handle-overlay'));
+        if (resizeHandleOverlay) {
+            const selectionGroup = this._core.store.selectionGroup;
+            const rotationDegrees = selectionGroup?.rotationDegrees ?? 0;
+            // Determine rotation offset based on handle position
+            const isTopLeft = resizeHandleOverlay.classList.contains('top-left');
+            const isBottomRight = resizeHandleOverlay.classList.contains('bottom-right');
+            const rotationOffset = (isTopLeft || isBottomRight) ? -45 : 45;
+            this._core.store.state.cursor = { icon: 'move-vertical', rotation: rotationDegrees + rotationOffset };
+            return;
+        }
+        // Check for rotation handle overlay
+        const rotationHandleOverlay = elementsAtPoint.find(el => el.classList.contains('rotation-handle-overlay'));
+        if (rotationHandleOverlay) {
+            this._core.store.state.cursor = { icon: 'hand', iconActive: 'hand-grab' };
+            return;
+        }
+        // Check for line handle overlays (selection line)
+        const lineHandleOverlay = elementsAtPoint.find(el => el.classList.contains('selection-line-handle-overlay'));
+        if (lineHandleOverlay) {
+            this._core.store.state.cursor = { icon: 'hand', iconActive: 'hand-grab' };
+            return;
+        }
+        // Reset cursor if not hovering any handle
+        this._core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+    }
+    /**
+     * Applies the current cursor state to the target element.
+     * Should be called in the render loop.
+     */
+    applyCursor() {
+        const state = this._core.store.state;
+        const isPointerDown = this._core.store.isPointerDown;
+        const icon = state.cursor?.icon;
+        const iconActive = state.cursor?.iconActive ?? icon;
+        const rotation = state.cursor?.rotation;
+        const cursor = KritzelCursorHelper.getCursor({
+            iconName: isPointerDown ? iconActive : icon,
+            rotation: rotation,
+        });
+        if (this._targetElement) {
+            this._targetElement.style.cursor = cursor;
+        }
+    }
+    /**
+     * Cleans up cursor state when the component is disconnected.
+     */
+    cleanup() {
+        if (this._targetElement) {
+            this._targetElement.style.cursor = '';
+            this._targetElement.style.removeProperty('--kritzel-pointer-cursor');
+        }
+        this._targetElement = null;
+        this._shadowRoot = null;
+    }
+}
+
 class KritzelCore {
     _kritzelEngine;
     _store;
     _syncConfig;
     _appStateMap;
+    _anchorManager;
+    _cursorManager;
     get engine() {
         return this._kritzelEngine;
     }
@@ -19023,10 +19842,18 @@ class KritzelCore {
     get appStateMap() {
         return this._appStateMap;
     }
+    get anchorManager() {
+        return this._anchorManager;
+    }
+    get cursorManager() {
+        return this._cursorManager;
+    }
     constructor(kritzelEngine) {
         this._kritzelEngine = kritzelEngine;
         this._store = new KritzelStore(DEFAULT_ENGINE_CONFIG);
         this._appStateMap = new KritzelAppStateMap();
+        this._anchorManager = new KritzelAnchorManager(this);
+        this._cursorManager = new KritzelCursorManager(this);
     }
     setSyncConfig(config) {
         this._syncConfig = config;
@@ -19087,6 +19914,11 @@ class KritzelCore {
         if (this._store.state.objects && this._store.state.objects.isReady) {
             this._store.state.objects.destroy();
         }
+        // Create new ObjectMap with its own Y.Doc for this workspace
+        const objectsMap = new KritzelObjectMap();
+        // Assign immediately so the UI shows an empty state while loading,
+        // instead of showing the old workspace's objects with the new workspace's viewport
+        this._store.state.objects = objectsMap;
         // Set active workspace
         this._store.state.activeWorkspace = activeWorkspace;
         this._store.state.workspaces = this.loadWorkspacesFromAppState();
@@ -19095,10 +19927,9 @@ class KritzelCore {
         this._store.state.translateX = viewport.translateX ?? 0;
         this._store.state.translateY = viewport.translateY ?? 0;
         this._store.state.scale = viewport.scale ?? 1;
-        // Create new ObjectMap with its own Y.Doc for this workspace
-        const objectsMap = new KritzelObjectMap();
         await objectsMap.initialize(this, activeWorkspace.id, this._syncConfig);
-        this._store.state.objects = objectsMap;
+        // Rebuild anchor index after loading objects
+        this._anchorManager.rebuildIndex();
         this.engine.emitObjectsChange();
         this.rerender();
     }
@@ -19159,6 +19990,15 @@ class KritzelCore {
         this._store.state.objects.insert(object);
     }
     removeObject(object) {
+        // Handle anchor cleanup
+        if (object instanceof KritzelLine) {
+            // If removing a line, clean up its anchor index entries
+            this._anchorManager.handleLineDeleted(object.id);
+        }
+        else {
+            // If removing a non-line object, detach any lines anchored to it
+            this._anchorManager.handleObjectDeleted(object.id);
+        }
         object.isMounted = false;
         this._store.state.objects.remove(o => o.id === object.id);
     }
@@ -19216,8 +20056,18 @@ class KritzelCore {
     copy() {
         const selectionGroup = this._store.selectionGroup;
         if (selectionGroup) {
-            // Copy each object and store them in an array
-            this._store.state.copiedObjects = selectionGroup.objects.sort((a, b) => a.zIndex - b.zIndex).map(obj => obj.copy());
+            // Copy each object and store them in an array, also track the ID mapping
+            const idMapping = new Map();
+            const copiedObjects = selectionGroup.objects
+                .sort((a, b) => a.zIndex - b.zIndex)
+                .map(obj => {
+                const copiedObj = obj.copy();
+                // Map: newId -> originalId
+                idMapping.set(copiedObj.id, obj.id);
+                return copiedObj;
+            });
+            this._store.state.copiedObjects = copiedObjects;
+            this._store.state.copiedObjectIdMapping = idMapping;
         }
     }
     paste(x, y) {
@@ -19226,6 +20076,7 @@ class KritzelCore {
             return;
         }
         const activeWorkspace = this._store.state.activeWorkspace;
+        const originalIdMapping = this._store.state.copiedObjectIdMapping;
         // Check if we're pasting from a different workspace
         const isDifferentWorkspace = copiedObjects.some(obj => obj.workspaceId !== activeWorkspace.id);
         // Calculate the bounding box of all copied objects
@@ -19257,6 +20108,14 @@ class KritzelCore {
         this.removeSelectionBox();
         // Create a new selection group for the pasted objects
         const selectionGroup = KritzelSelectionGroup.create(this);
+        // Build a reverse mapping: originalId -> newCopiedObjectId
+        // This is used to remap anchor references from original IDs to the copied object IDs
+        const originalToNewIdMap = new Map();
+        if (originalIdMapping) {
+            originalIdMapping.forEach((originalId, copiedId) => {
+                originalToNewIdMap.set(originalId, copiedId);
+            });
+        }
         // First add all copied objects to the objectsMap with updated positions
         copiedObjects.forEach((obj, i) => {
             // Update workspace if pasting to a different workspace
@@ -19272,6 +20131,27 @@ class KritzelCore {
             // Add to selection group
             selectionGroup.addOrRemove(obj);
         });
+        // Update line anchors to point to the newly pasted objects
+        // Only remap if the anchor target was also part of the copied selection
+        copiedObjects.forEach(obj => {
+            if (obj instanceof KritzelLine) {
+                let updated = false;
+                if (obj.startAnchor && originalToNewIdMap.has(obj.startAnchor.objectId)) {
+                    obj.startAnchor = { objectId: originalToNewIdMap.get(obj.startAnchor.objectId) };
+                    updated = true;
+                }
+                if (obj.endAnchor && originalToNewIdMap.has(obj.endAnchor.objectId)) {
+                    obj.endAnchor = { objectId: originalToNewIdMap.get(obj.endAnchor.objectId) };
+                    updated = true;
+                }
+                // If anchors were updated, rebuild the anchor index and persist the change
+                if (updated) {
+                    this._store.state.objects.update(obj);
+                }
+            }
+        });
+        // Rebuild anchor index after all anchor updates
+        this._anchorManager.rebuildIndex();
         // Mark selection group as selected
         selectionGroup.isSelected = true;
         // Set rotation for single object
@@ -19297,7 +20177,17 @@ class KritzelCore {
         // Update copiedObjects to the newly created objects for potential future pastes
         const newSelectionGroup = this._store.selectionGroup;
         if (newSelectionGroup) {
-            this._store.state.copiedObjects = newSelectionGroup.objects.sort((a, b) => a.zIndex - b.zIndex).map(obj => obj.copy());
+            // Create new copies and track the ID mapping for future pastes
+            const newIdMapping = new Map();
+            const newCopiedObjects = newSelectionGroup.objects
+                .sort((a, b) => a.zIndex - b.zIndex)
+                .map(obj => {
+                const copiedObj = obj.copy();
+                newIdMapping.set(copiedObj.id, obj.id);
+                return copiedObj;
+            });
+            this._store.state.copiedObjects = newCopiedObjects;
+            this._store.state.copiedObjectIdMapping = newIdMapping;
         }
         this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         this.engine.emitObjectsChange();
@@ -19398,6 +20288,9 @@ class KritzelCore {
         this._store.state.isSelecting = false;
         this._store.state.isResizeHandleSelected = false;
         this._store.state.isRotationHandleSelected = false;
+        this._store.state.isLineHandleSelected = false;
+        this._store.state.isLineHandleDragging = false;
+        this._store.state.lineHandleType = null;
         this.rerender();
     }
     resetActiveText() {
@@ -19411,6 +20304,12 @@ class KritzelCore {
             }
         }
     }
+    resetActiveShape() {
+        const activeShape = this._store.activeShape;
+        if (activeShape) {
+            activeShape.save();
+        }
+    }
     getObjectFromPointerEvent(event, selector = '.object') {
         const shadowRoot = this._store.state.host?.shadowRoot;
         if (!shadowRoot)
@@ -19449,6 +20348,26 @@ class KritzelCore {
         }
         return [];
     }
+    /**
+     * Get all elements at a pointer position that match a given selector.
+     * Uses elementsFromPoint to find overlapped elements.
+     */
+    getElementsAtPoint(event, selector) {
+        const shadowRoot = this._store.state.host?.shadowRoot;
+        if (!shadowRoot)
+            return [];
+        const elementsAtPoint = shadowRoot.elementsFromPoint(event.clientX, event.clientY);
+        if (!elementsAtPoint || elementsAtPoint.length === 0)
+            return [];
+        return elementsAtPoint.filter(el => el.matches(selector));
+    }
+    /**
+     * Check if any element at the pointer position matches the given selector.
+     * Useful for detecting hover states on overlapped elements.
+     */
+    isPointerOverElement(event, selector) {
+        return this.getElementsAtPoint(event, selector).length > 0;
+    }
     getCanvasPoint(event) {
         if (!this._store.state.host) {
             return { x: 0, y: 0 };
@@ -19463,10 +20382,58 @@ class KritzelCore {
         return { x: worldX, y: worldY };
     }
     beforeWorkspaceChange() {
+        // Cancel any pending debounced viewport updates to prevent them from
+        // saving the old workspace's viewport to the new workspace
+        this._kritzelEngine.viewport?.cancelPendingUpdates();
+        // Immediately save the current workspace's viewport before switching
+        const currentWorkspace = this._store.state.activeWorkspace;
+        if (currentWorkspace) {
+            this.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
+        }
         this.resetActiveText();
         this.clearSelection();
         this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
+    displaySelectionGroupUI(object) {
+        if (!object.isSelected) {
+            return false;
+        }
+        const selectionGroup = this._store.selectionGroup;
+        if (!selectionGroup) {
+            // During selection phase (no group yet), hide UI for KritzelLine objects
+            return !(object instanceof KritzelLine);
+        }
+        // Show UI if selection contains more than one object
+        if (selectionGroup.objects.length > 1) {
+            return true;
+        }
+        // Hide UI if selection contains a single KritzelLine
+        if (selectionGroup.objects.length === 1) {
+            const selectedObject = selectionGroup.objects[0];
+            return !(selectedObject instanceof KritzelLine);
+        }
+        return true;
+    }
+    displaySelectionLineUI(object) {
+        // Only show line UI on KritzelLine objects, not on selection groups
+        if (!(object instanceof KritzelLine)) {
+            return false;
+        }
+        // During selection phase (no group yet), show line UI if line is selected
+        const selectionGroup = this._store.selectionGroup;
+        if (!selectionGroup) {
+            return object.isSelected;
+        }
+        if (!selectionGroup.isSelected) {
+            return false;
+        }
+        // Show UI only if selection contains exactly one KritzelLine and it's this object
+        if (selectionGroup.objects.length === 1) {
+            const selectedObject = selectionGroup.objects[0];
+            return selectedObject instanceof KritzelLine && selectedObject.id === object.id;
+        }
+        return false;
+    }
 }
 
 const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p,h1,h2,h3,h4,h5,h6,blockquote,pre{margin:0;padding:0}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}";
@@ -19510,12 +20477,7 @@ const KritzelEngine = class {
     }
     cursorTarget;
     onCursorTargetChange(newValue) {
-        // Reset cursor on old target
-        if (this.cursorTargetElement) {
-            this.cursorTargetElement.style.cursor = '';
-        }
-        // Set new target (defaults to document.body)
-        this.cursorTargetElement = newValue || document.body;
+        this.core.cursorManager.setTargetElement(newValue || document.body);
     }
     isEngineReady;
     activeToolChange;
@@ -19563,6 +20525,8 @@ const KritzelEngine = class {
         if (this.core.store.state.pointers.size > 1) {
             this.throttledPointerMoveMulti(ev);
         }
+        // Update cursor for handle hover states using elementsFromPoint
+        this.core.cursorManager.updateHoverState(ev);
         this.viewport.handlePointerMove(ev);
         this.core.store.state?.activeTool?.handlePointerMove(ev);
     }
@@ -19574,7 +20538,7 @@ const KritzelEngine = class {
         this.host.releasePointerCapture(ev.pointerId);
         // Reset cursor to default when all pointers are released
         if (this.core.store.state.pointers.size === 0) {
-            this.core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+            this.core.cursorManager.resetToDefault();
         }
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
@@ -19587,7 +20551,7 @@ const KritzelEngine = class {
         this.core.store.state.pointers.delete(ev.pointerId);
         // Reset cursor to default when all pointers are released
         if (this.core.store.state.pointers.size === 0) {
-            this.core.store.state.cursor = { icon: 'default', iconActive: 'default' };
+            this.core.cursorManager.resetToDefault();
         }
         this.viewport.handlePointerUp(ev);
         this.core.store.state?.activeTool?.handlePointerUp(ev);
@@ -19763,7 +20727,6 @@ const KritzelEngine = class {
     contextMenuHandler;
     keyHandler;
     contextMenuElement = null;
-    cursorTargetElement = null;
     get isSelecting() {
         return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
     }
@@ -19783,12 +20746,7 @@ const KritzelEngine = class {
     disconnectedCallback() {
         this.throttledWheel.cancel();
         this.throttledPointerMoveMulti.cancel();
-        // Reset cursor on target element
-        if (this.cursorTargetElement) {
-            this.cursorTargetElement.style.cursor = '';
-            this.cursorTargetElement.style.removeProperty('--kritzel-pointer-cursor');
-            this.cursorTargetElement = null;
-        }
+        this.core.cursorManager.cleanup();
     }
     componentWillLoad() {
         this.validateScaleMax(this.scaleMax);
@@ -19798,10 +20756,9 @@ const KritzelEngine = class {
         this.contextMenuHandler = new KritzelContextMenuHandler(this.core, this.globalContextMenuItems, this.objectContextMenuItems);
         this.keyHandler = new KritzelKeyHandler(this.core);
         this.viewport = new KritzelViewport(this.core, this.host);
-        // Set cursor target element (use prop value or default to document.body)
-        this.cursorTargetElement = this.cursorTarget || document.body;
-        // Set the pointer cursor CSS variable for child components to use
-        this.cursorTargetElement.style.setProperty('--kritzel-pointer-cursor', KritzelCursorHelper.getPointerCursor());
+        // Initialize cursor manager with target element and shadow root
+        this.core.cursorManager.setTargetElement(this.cursorTarget || document.body);
+        this.core.cursorManager.setShadowRoot(this.host.shadowRoot);
         // Set sync configuration if provided
         if (this.syncConfig) {
             this.core.setSyncConfig(this.syncConfig);
@@ -19843,20 +20800,6 @@ const KritzelEngine = class {
         KritzelKeyboardHelper.forceHideKeyboard();
         this.core.rerender();
     }
-    updateCursor() {
-        const state = this.core.store.state;
-        const isPointerDown = this.core.store.isPointerDown;
-        const icon = state.cursor?.icon;
-        const iconActive = state.cursor?.iconActive ?? icon;
-        const rotation = state.cursor?.rotation;
-        const cursor = KritzelCursorHelper.getCursor({
-            iconName: isPointerDown ? iconActive : icon,
-            rotation: rotation,
-        });
-        if (this.cursorTargetElement) {
-            this.cursorTargetElement.style.cursor = cursor;
-        }
-    }
     render() {
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
@@ -19872,18 +20815,18 @@ const KritzelEngine = class {
             height: this.core.store.state.viewportHeight / this.core.store.state.scale,
             depth: 100,
         };
-        const visibleObjects = this.core.store.state.objects.query(viewportBounds);
-        this.updateCursor();
-        return (h(Host, { key: '192c356c5476b2b3cf370b05efd5742776423200' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'fae1b053c1eda01726f6b583a8dd167bb1c34aa1', class: "debug-panel" }, h("div", { key: '0e0fab7c39c1c8116831cf7b228914b0c40fb338' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '770d284f5104919c5c6a36e653971d3662e9428b' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '4937256ccf074a0a2fffb9c8c32a8c6ba41d3fb4' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '447d95aed0dda6e212e7c67ff4bc0a2e574131fd' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '548a04b16f68873e5fc0a2767146b52e83b9f0f8' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '16a92abf89f1b438f14f311dd248ae82e1ac1982' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '92a2abc5a757c64d764f3e1ee525556eb6a88852' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '7677d4fd149ef2507626e50502d7c2b74fb294af' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '3120c7ff85fd9f8ef14fb313b9aae6f2fc817f75' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '100cd8a8c221d66046d9ff869b23809ca2568d12' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '2efec039f635eec81d172113d55284eb9002f339' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'f1df2fbf86a1944831c26a23e8c0baadd5ba1c56' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '10098cd2ffd07200fc8a12941ffd91fc1fac4de8' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '75043ccdac3ef3b02dae17b758813132174c2034' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '59217b67d572cc60fc8381bcc930a952fea2faaa' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'c4a7d64031d3b430673adb6adcb7f525f7a47ddc' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'd62bef9cab424e77781a3d5639552b8122e92238' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'ab5dbbc947b335a1396a945328a5939d690d8cd0' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'fb2c19a0cdc070ecbf28e51b08112a73ffcf2817' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '2d5519541aeb9a6423524463a03d1626f5eaf6ca' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'f86b578263c68ac194d6b3d606a1cb31717b1792' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '52ed5379ef3e9a18cbabe14be8106055a8f71ede' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '6b97e5f6c90666283fb5cfed0cf0e3b7bc0fffe3' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '5f80b9d4121974ee1e8afe89925b6b38b840e90f' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '8a280b4454677f5dc29e4a2a39fd4f7cfc8c26df' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '660dd95852906f5c049b9527b26ea0af3fa04274', id: "origin", class: "origin", style: {
+        const visibleObjects = this.core.store.state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
+        this.core.cursorManager.applyCursor();
+        return (h(Host, { key: '209ccf8414c635c9e04ca4807c95a29c629071ec' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'df6a03d1341887960bb91cbaa0a5dca6880a9293', class: "debug-panel" }, h("div", { key: '65157757ec6549ad2af311085a9618ab661f5ac0' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '20137b6c651a9aa8df15bce66d5bfe870a7af139' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '49dd30286641236ae428c731bb181cb06269852e' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: 'd8ee431a10335e99aec40a596817765d7ee3f67b' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '34b1f31146080780433d6c1718d13bbfe397cb9b' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '4c279a106101cf808c91a2be4987569b21ae52b3' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '6ebd7ad3c803ef45d58a74180c52e8be8af8bca3' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '345970c8b2b54f3a0d8fe1d9bb1b7b33023db386' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'fc265ae0e71cf22311cab3006dfc29b9d24397d2' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '9f921032a58b55e60f82d11a76f269051357d3e1' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '6d197e06cc362a9ecb8bfe00d272aecfec2b49e1' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '5313589ba2a509c95a5730dcf29c4003d9884cbf' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '8af9f9d6e33a2897c20962048bbf2a058f9d4a45' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '81aec0050d3e2122643b61fd725e71b25d97bc27' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'c9956f05c01b74ee1666d9395a2715c3463fe401' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'ae0a01c8f8aafc08326b136720c6a75b6aec6299' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '7816d40d73248a55120440e6d721325e1894178e' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'c22383bacca0ada584f2e8a8577523c905d74ae2' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: '8185a7318c6cdfde558cc372b79582d58b706f9e' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '2d56b05377693ef032ab2316fa753ecedf264b9c' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '2e2bf9fd321ef04dc0ac6dc21539eb0117c9fb23' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '3118ab970d5d37e01405c42308fc051d675d4bfa' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'd8a31065843f89552f2d9c03dcbca960a716fa6c' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: 'cb8d28b6ea63cbb6572f761011fccb847b748227' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'd112a7e833c265085246817423557bfdc5b30b74' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: 'df4f302192a8fc9644b7f883618b0a0f8a600dc8', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             return (h("div", { key: object.id, style: {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
-                    zIndex: object.zIndex.toString(),
                     position: 'absolute',
                     pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
                 } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
+                    zIndex: object.zIndex.toString(),
                     height: object?.totalHeight.toString(),
                     width: object?.totalWidth.toString(),
                     left: '0',
@@ -19893,7 +20836,7 @@ const KritzelEngine = class {
                     transformOrigin: `${object.totalWidth / 2}px ${object.totalHeight / 2}px`,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke, "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` })))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: object?.stroke, "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
                     minHeight: '0',
                     minWidth: '0',
                     backgroundColor: object.backgroundColor,
@@ -19902,18 +20845,14 @@ const KritzelEngine = class {
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
                     overflow: 'visible',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
-                    height: object?.height.toString(),
-                    width: object?.width.toString(),
-                    position: 'absolute',
-                    overflow: 'visible',
-                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke, "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
+                    display: KritzelClassHelper.isInstanceOf(object, 'KritzelLine') || KritzelClassHelper.isInstanceOf(object, 'KritzelPath') ? 'none' : 'block'
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
                     width: '100%',
                     height: '100%',
                     userSelect: 'none',
                     pointerEvents: 'none',
                     imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { id: "text-object", ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     minWidth: object.initialWidth + 'px',
                     minHeight: object.initialHeight + 'px',
                     maxWidth: '500px',
@@ -19924,13 +20863,38 @@ const KritzelEngine = class {
                     backgroundColor: object.backgroundColor,
                     overflow: 'visible',
                     textRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'optimizeSpeed' : 'auto',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                    width: '100%',
+                    height: '100%',
+                    position: 'relative',
+                    overflow: 'visible',
+                } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                    position: 'absolute',
+                    top: '0',
+                    left: '0',
+                    width: '100%',
+                    height: '100%',
+                    overflow: 'visible',
+                    pointerEvents: 'none',
+                }, viewBox: object.viewBox, preserveAspectRatio: "none" }, h("path", { d: object.getSvgPath(), fill: object.fillColor, stroke: object.strokeColor, "stroke-width": object.strokeWidth })), h("div", { ref: el => object.mountTextEditor(el), style: {
+                    position: 'absolute',
+                    top: '0',
+                    left: '0',
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    textAlign: 'center',
+                    overflow: 'hidden',
+                    pointerEvents: object.isEditing ? 'auto' : 'none',
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
                     pointerEvents: 'auto',
                     overflow: 'hidden',
                     display: 'block',
-                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => object.mount(el), style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => object.mount(el), style: {
                     width: '100%',
                     height: '100%',
                 } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
@@ -19940,7 +20904,14 @@ const KritzelEngine = class {
                     borderWidth: KritzelDevicesHelper.isFirefox() ? object.borderWidth + 'px' : '0',
                     borderStyle: KritzelDevicesHelper.isFirefox() ? 'solid' : 'none',
                     borderColor: KritzelDevicesHelper.isFirefox() ? object.borderColor : 'transparent',
-                } }))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("g", { style: { pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY)))))), h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                } })))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("div", { style: {
+                    pointerEvents: 'none',
+                    position: 'absolute',
+                    left: `${object.totalWidth}px`,
+                    top: '0',
+                    zIndex: (object.zIndex + 2).toString(),
+                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex))), h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                    zIndex: (object.zIndex + 1).toString(),
                     height: object?.totalHeight.toString(),
                     width: object?.totalWidth.toString(),
                     left: '0',
@@ -19950,7 +20921,7 @@ const KritzelEngine = class {
                     transformOrigin: `${object.totalWidth / 2}px ${object.totalHeight / 2}px`,
                     overflow: 'visible',
                     pointerEvents: 'none',
-                } }, object.isSelected && (h("g", { class: "selection-borders", style: { pointerEvents: 'none' } }, h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
+                } }, this.core.displaySelectionGroupUI(object) && (h("g", { class: "selection-group-ui", style: { pointerEvents: 'none' } }, h("g", { class: "selection-group-borders" }, h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
@@ -19966,31 +20937,31 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
-                } }))), object.isSelected && !this.isSelecting && (h("g", { class: "selection-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } })), !this.isSelecting && (h("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees - 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees + 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees + 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                } }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
                     paintOrder: 'fill',
                 } }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'move-vertical', rotation: object.rotationDegrees - 45 }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
+                } }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
                     strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                 } }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
@@ -19999,8 +20970,103 @@ const KritzelEngine = class {
                 } }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     paintOrder: 'fill',
-                }, onPointerEnter: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'hand', iconActive: 'hand-grab' }), onPointerLeave: () => !this.core.store.isPointerDown && (this.core.store.state.cursor = { icon: 'default', iconActive: 'default' }) }))))));
-        })), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '0da13416f8f2cf2f0eb6fcbb8eacb942dda0efb5', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+                } }))))), this.core.displaySelectionLineUI(object) && KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } }, h("g", { class: "selection-line-borders" }, h("path", { class: "selection-line-border", d: this.core.anchorManager.computeClippedLinePath(object, true), style: {
+                    stroke: 'var(--kritzel-selection-border-color, #007AFF)',
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                    strokeLinecap: 'round',
+                    fill: 'none',
+                } })), !this.isSelecting && (h("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } }, h("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle-overlay start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle center", cx: object.controlX !== undefined ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle-overlay center", cx: object.controlX !== undefined ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                    paintOrder: 'fill',
+                } }), h("circle", { class: "selection-line-handle-overlay end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                    paintOrder: 'fill',
+                } }))))))));
+        }), (() => {
+            const data = this.core.anchorManager.getAnchorLinesRenderData();
+            if (!data)
+                return null;
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "anchor-lines", style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: '1px',
+                    height: '1px',
+                    pointerEvents: 'none',
+                    zIndex: '9998',
+                    overflow: 'visible',
+                } }, data.startAnchorViz && (h("g", { class: "anchor-line-start" }, data.startAnchorViz.pathD ? (h("path", { d: data.startAnchorViz.pathD, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.3))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                    fill: 'none',
+                } })) : (h("line", { x1: data.startAnchorViz.edgeX, y1: data.startAnchorViz.edgeY, x2: data.startAnchorViz.centerX, y2: data.startAnchorViz.centerY, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.3))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })), h("circle", { cx: data.startAnchorViz.centerX, cy: data.startAnchorViz.centerY, r: data.indicatorRadius, style: {
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(0, 0, 0))',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } }))), data.endAnchorViz && (h("g", { class: "anchor-line-end" }, data.endAnchorViz.pathD ? (h("path", { d: data.endAnchorViz.pathD, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                    fill: 'none',
+                } })) : (h("line", { x1: data.endAnchorViz.edgeX, y1: data.endAnchorViz.edgeY, x2: data.endAnchorViz.centerX, y2: data.endAnchorViz.centerY, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: `${data.lineStrokeWidth}`,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })), h("circle", { cx: data.endAnchorViz.centerX, cy: data.endAnchorViz.centerY, r: data.indicatorRadius, style: {
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } })))));
+        })(), (() => {
+            const data = this.core.anchorManager.getSnapIndicatorRenderData();
+            if (!data)
+                return null;
+            return (h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "snap-indicator", style: {
+                    position: 'absolute',
+                    left: '0',
+                    top: '0',
+                    width: '1px',
+                    height: '1px',
+                    pointerEvents: 'none',
+                    zIndex: '9999',
+                    overflow: 'visible',
+                } }, h("g", null, data.snapLinePath ? (h("path", { d: data.snapLinePath, fill: "none", style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } })) : (data.edgeX !== undefined && data.edgeY !== undefined && (h("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
+                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
+                    strokeWidth: data.lineStrokeWidth,
+                    strokeDasharray: data.dashArray,
+                    strokeLinecap: 'round',
+                } }))), h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
+                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
+                    stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
+                    strokeWidth: data.indicatorStrokeWidth,
+                } }))));
+        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '81b44614c23f4016a1daa914ef8ea73eda0869eb', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -20011,7 +21077,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: '609dd8438a2678eaa3ce0a73858d9236c9371f96', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'f748cd15c916d9fcb5fbf445167c69c1cc8aea63', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],