kritzel-stencil 0.0.162 → 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 { Y as KritzelDevicesHelper, I as KritzelBrushTool, N as KritzelTextTool, Z as KritzelMouseButton, Q as KritzelSelectionTool, V as DEFAULT_BRUSH_CONFIG, X as DEFAULT_LINE_TOOL_CONFIG, J as KritzelLineTool, L as KritzelEraserTool, W as DEFAULT_TEXT_CONFIG, M as KritzelImageTool, T as KritzelWorkspace, _ as KritzelIconRegistry, $ as KritzelKeyboardHelper, a0 as KritzelBaseHandler, a1 as KritzelToolRegistry, a2 as KritzelSelectionBox, a3 as KritzelSelectionGroup, a4 as KritzelBaseObject, F as KritzelImage, K as KritzelText, G as KritzelLine, E as KritzelPath, a5 as Doc, a6 as DEFAULT_SYNC_CONFIG, a7 as UndoManager, P as KritzelCursorHelper, S as KritzelAppStateMap, U as KritzelAnchorManager, a8 as ObjectHelper, a9 as KritzelEventHelper, aa as KritzelBaseTool, ab as KritzelClassHelper } from './default-line-tool.config-C35m-d1Y.js';
+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;
 
@@ -623,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',
@@ -809,7 +1469,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f107cce23625f36978736ef948a51cd91d84c3f1' }, h("kritzel-workspace-manager", { key: 'a924de174ac5226c3ac5507c35e162b35490a5dd', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '48b6c14ca2c1e1a2c745ec81294a331a463219a1', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, syncConfig: this.syncConfig, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onObjectsChange: event => this.handleObjectsChange(event), onUndoStateChange: event => this.handleUndoStateChange(event) }), h("kritzel-controls", { key: '2ec26e1444f4ba642c4fdc4ef2da1a62dc0256a6', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState, onIsControlsReady: () => (this.isControlsReady = true) })));
+        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"],
@@ -18054,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;
@@ -18366,7 +19034,7 @@ const DEFAULT_ENGINE_CONFIG = {
     contextMenuY: 0,
     skipContextMenu: false,
     debugInfo: {
-        showObjectInfo: false,
+        showObjectInfo: true,
         showViewportInfo: false
     },
     host: null,
@@ -18475,6 +19143,17 @@ class KritzelReviver {
                     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;
@@ -18505,6 +19184,9 @@ class KritzelReviver {
                     case 'KritzelLineTool':
                         revivedObj = new KritzelLineTool(this._core);
                         break;
+                    case 'KritzelShapeTool':
+                        revivedObj = new KritzelShapeTool(this._core);
+                        break;
                     default:
                         revivedObj = obj;
                 }
@@ -18980,6 +19662,10 @@ 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;
@@ -19228,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();
@@ -19236,10 +19927,7 @@ 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();
@@ -19616,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)
@@ -19688,6 +20382,14 @@ 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'));
@@ -20113,9 +20815,9 @@ 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);
+        const visibleObjects = this.core.store.state.objects.query(viewportBounds).sort((a, b) => a.zIndex - b.zIndex);
         this.core.cursorManager.applyCursor();
-        return (h(Host, { key: '4a7e8c72ad1f80c3c31aa37eff33e78634cb37d1' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '3c8981ce6cafbc49f4f04189d27809c511bf45c4', class: "debug-panel" }, h("div", { key: '428d483a87b98cde24446a0a26ba790ec2a6358b' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '3ec597c219109c026f78e5018a885e88e51aa5c4' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '803c0d009b19fdc7c465ef14f3b5f278a954a912' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '8b1aef0ae845cdf4b93afe59d8c78c84dd181a2d' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '137ead0c39a2fba55b4c4dde53fb09d0832439e1' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: 'b19f710385e4306620176551853eb2645b96ca7a' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '943b55daada95aa37b759e45a15ffcfca76fba72' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'd001782dd4bc48c84c08477b26e5f3fce8df0b47' }, "Scale: ", this.core.store.state?.scale), h("div", { key: 'ed640d3905b39a995ba40a1cbf38f10a4aa1b400' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '154888aabbb56365aaf4584b0b991be848629e3e' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'c0c39e988940baf20137de8a0eeda2c085da2810' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'abd5a79b27bc75e898877d33097597c057dc3f2b' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '9c49bf3246525c9a755bb293bec8a143ade97158' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '88ff8ab48af31bf036719f72a5a3726780ab9720' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '9650075f855fcf91b7303d3ace14242075fc523d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '911acb1f90f9812d30dc0aebceb207aecf9b4248' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'b65db638d3cefbd74e2d03b639ee5fe86a2a858b' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'c53ca259dadc656762733119b4086c1f82235a7e' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'ae2d7a8917af450eb3bfd8e171a87530f337c0c2' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '5633cd9901ec028e4f5433c84b07321932beea66' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '82232a8eec470562e5658dee9713c855e78ca6a3' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: '5b6b04b323a21ef37ddb144721ea01dccc7aec8b' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '3287f804515cfa31eaa755332e2043fce4feb7a9' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '3a59fd4db60f6f05d419de39149ea10e482875d4' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: 'f91a8ea9dfc50e5f1ae89d66c7609a103e3263a4' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '40ba8fb5530243c18e0b0c3ad68dadb2cbc615a1', id: "origin", class: "origin", style: {
+        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: {
@@ -20161,7 +20863,32 @@ 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',
@@ -20177,7 +20904,13 @@ 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("div", { style: { whiteSpace: 'nowrap' } }, "rotationDegrees: ", object.rotationDegrees)))))), 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(),
@@ -20333,7 +21066,7 @@ const KritzelEngine = class {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #3b82f6)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '7e350c48da76c54a223f23ead9dea8018b0bc36c', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), 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`,
@@ -20344,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: '7923a3f6a92fa71911c971166171317b5bc421bf', 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"],